首页

QTableView基本用法

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

一、添加表头:

  1. QStandardItemModel *model = new QStandardItemModel(); 
  2. model->setColumnCount(2); 
  3. model->setHeaderData(0,Qt::Horizontal,QString::fromLocal8Bit("卡号")); 
  4. model->setHeaderData(1,Qt::Horizontal,QString::fromLocal8Bit("姓名"));

复制代码


二、设置表格属性:

  1. ui->tableView->setModel(model); 
  2. //表头信息显示居左 
  3. ui->tableView->horizontalHeader()->setDefaultAlignment(Qt::AlignLeft); 
  4. //设置列宽不可变 
  5. ui->tableView->horizontalHeader()->setResizeMode(0,QHeaderView::Fixed); 
  6. ui->tableView->horizontalHeader()->setResizeMode(1,QHeaderView::Fixed); 
  7. ui->tableView->setColumnWidth(0,101); 
  8. ui->tableView->setColumnWidth(1,102);

复制代码


注:在进行表格设置时必须是“ui->tableView->setModel(model);”在前,属性具体设置在后,

反之则设置不会生效。如上述代码所示。

三、添加行(添加三行一样的信息):

  1. for(int i = 0; i < 3; i++) 
  2.      model->setItem(i,0,new QStandardItem("2009441676")); 
  3.         //设置字符颜色 
  4.      model->item(i,0)->setForeground(QBrush(QColor(255, 0, 0))); 
  5.         //设置字符位置 
  6.      model->item(i,0)->setTextAlignment(Qt::AlignCenter); 
  7.      model->setItem(i,1,new QStandardItem(QString::fromLocal8Bit("哈哈"))); 
  8. }

复制代码


四、删除行:

  1. //x是指定删除哪一行 
  2. model->removeRow(x); 
  3. //删除所有行 
  4. model->removeRows(0,model->rowCount());

复制代码


再举一个例子:

在一个药品划价模块中有这样的操作流程:

检索处方项目成功后,把该项目显示到QTableView里,把需要编辑的数量字段提供给用户输入,用户输入确认后,该项目留在列表中,然后开始下一项目检索录入。

实现过程如下:

录入的项目保留在临时表tmp中,界面上的QTableView取名为tbList,与tbList关联的Model取名为tb1。检索成功后,把检索结果插入到临时表中,把需要编辑的字段提供给用户。

  1. tb1=newQSqlTableModel(this,*dbR); //dbR是本应用中的数据源 
  2. tb1->setTable("tmp"); //处方临时表

复制代码


程序中需要显示的时候,

  1. tbList->setModel(NULL); //清除原先数据集 
  2. tbList->setModel(tb1); //刷新显示

复制代码


程序中需要提供编辑输入的时候

  1. QModelIndexmdidx=m_ui->tbList->model()->index(row,column); //获得需要编辑的单元格的位置 
  2. m_ui->tbList->setFocus(); //把输入焦点交给tbList 
  3. m_ui->tbList->setCurrentIndex(mdidx); //设定需要编辑的单元格 
  4. m_ui->tbList->edit(mdidx); //开始编辑

复制代码


有一个问题需要注意。向QTableView中添加记录时,字段一定要完整,不能有空白字段,否则结果无法保存。切记。

如果需要对用户输入做限制,比如只能在指定的字段输入指定的数据类型,可以通过QItemDelegate来实现。

贴一段代码,说明QTableView基本用法

  1. QStandardItemModel model; 
  2. //设置大小 
  3. model.setColumnCount(3); //列 
  4. model.setRowCount(musicFound); //行 
  5. //设置标题 
  6. model.setHeaderData(0,Qt::Horizontal,"ID"); 
  7. //添加数据 
  8. for(int j=0;j<row;j++)
  9. {
  10.             //写id
  11.             QStandardItem *itemID = new QStandardItem("hello");//QString::number(j)));
  12.             model.setItem(j,0,itemID);
  13. }
  14. //选择这个model 
  15. m_ui->tableView->setModel(&model); 
  16. //隐藏左边那列 
  17. m_ui->tableView->verticalHeader()->hide(); 
  18. //列宽 
  19. m_ui->tableView->setColumnWidth(0,30); 
  20. //整行选择 
  21. m_ui->tableView->setSelectionBehavior(QAbstractItemView::SelectRows);

 

 

QT的MVC(View/Delegate)模型十分强大,可以利用各种控件来对表格的输入进行限制,不过我以前一直没有过,这几天研究了一下,写个小例子,希望大家喜欢。
 
如果看不懂这个例子,请先看QT的自带例子:http://qt-project.org/doc/qt-4.8/itemviews-spinboxdelegate.html
 
思路:
 
1:为每一列定义委托:
A:第一列是编号列,使用只读委托,令该列的单元格是只读的
B:第三列是ID列,只能输入1-12个数字,利用QLineEdit委托和正则表达式对输入进行限制
C:第四年龄列,利用QSpinBox委托进行输入限制,只能输入1-100之间的数字
D:第五列是性别列,利用QComboBox委托对输入进行限制,该列的单元格只能输入Male或Female
E:第六列是头像列,在该列的单元格中央放置一张头像
2:定义代理类,把所有单元格中的字符居中显示。
3:利用QSS,将表格的背景色弄成黄蓝相间。
 
截图:
 


上代码:
 1.#include <QtGui>   
 2.  
 3.//编号列,只读委托   
 4.//这个方法我还真想不到,呵呵   
 5.class ReadOnlyDelegate : public QItemDelegate  
 6.{  
 7.    Q_OBJECT  
 8.public:  
 9.    ReadOnlyDelegate(QObject *parent = 0): QItemDelegate(parent) { }  
 10.    QWidget *createEditor(QWidget*parent, const QStyleOptionViewItem &option, 
 11.        const QModelIndex &index) const  
 12.    {  
 13.        return NULL;  
 14.    }  
 15.};  
 16.  
 17.//ID列,只能输入1-12个数字   
 18.//利用QLineEdit委托和正则表达式对输入进行限制   
 19.class UserIDDelegate : public QItemDelegate  
 20.{  
 21.    Q_OBJECT  
 22.public:  
 23.    UserIDDelegate(QObject *parent = 0): QItemDelegate(parent) { }  
 24.    QWidget *createEditor(QWidget *parent, const QStyleOptionViewItem &option, 
 25.        const QModelIndex &index) const  
 26.    {  
 27.        QLineEdit *editor = new QLineEdit(parent);  
 28.        QRegExp regExp("[0-9]{0,10}");  
 29.        editor->setValidator(new QRegExpValidator(regExp, parent));  
 30.        return editor;  
 31.    }  
 32.    void setEditorData(QWidget *editor, const QModelIndex &index) const  
 33.    {  
 34.        QString text = index.model()->data(index, Qt::EditRole).toString();  
 35.        QLineEdit *lineEdit = static_cast<QLineEdit*>(editor);  
 36.        lineEdit->setText(text);  
 37.    }  
 38.    void setModelData(QWidget *editor, QAbstractItemModel *model,  
 39.        const QModelIndex &index) const  
 40.    {  
 41.        QLineEdit *lineEdit = static_cast<QLineEdit*>(editor);  
 42.        QString text = lineEdit->text();  
 43.        model->setData(index, text, Qt::EditRole);  
 44.    }  
 45.    void updateEditorGeometry(QWidget *editor,  
 46.        const QStyleOptionViewItem &option, const QModelIndex &index) const  
 47.    {  
 48.        editor->setGeometry(option.rect);  
 49.    }  
 50.};  
 51.  
 52.//年龄列,利用QSpinBox委托进行输入限制,只能输入1-100之间的数字   
 53.class AgeDelegate : public QItemDelegate  
 54.{  
 55.    Q_OBJECT  
 56.public:  
 57.    AgeDelegate(QObject *parent = 0): QItemDelegate(parent) { }  
 58.    QWidget *createEditor(QWidget *parent, const QStyleOptionViewItem &option, 
 59.        const QModelIndex &index) const  
 60.    {  
 61.        QSpinBox *editor = new QSpinBox(parent);  
 62.        editor->setMinimum(1);  
 63.        editor->setMaximum(100);  
 64.        return editor;  
 65.    }  
 66.    void setEditorData(QWidget *editor, const QModelIndex &index) const  
 67.    {  
 68.        int value = index.model()->data(index, Qt::EditRole).toInt();  
 69.        QSpinBox *spinBox = static_cast<QSpinBox*>(editor);  
 70.        spinBox->setValue(value);  
 71.    }  
 72.    void setModelData(QWidget *editor, QAbstractItemModel *model,  
 73.        const QModelIndex &index) const  
 74.    {  
 75.        QSpinBox *spinBox = static_cast<QSpinBox*>(editor);  
 76.        spinBox->interpretText();  
 77.        int value = spinBox->value();  
 78.        model->setData(index, value, Qt::EditRole);  
 79.    }  
 80.    void updateEditorGeometry(QWidget *editor,  
 81.        const QStyleOptionViewItem &option, const QModelIndex &index) const  
 82.    {  
 83.        editor->setGeometry(option.rect);  
 84.    }  
 85.};  
 86.  
 87.//性别列,利用QComboBox委托对输入进行限制   
 88.//这一列的单元格只能输入Male或Female   
 89.class SexDelegate : public QItemDelegate  
 90.{  
 91.    Q_OBJECT  
 92.public:  
 93.    SexDelegate(QObject *parent = 0): QItemDelegate(parent) { }  
 94.    QWidget *createEditor(QWidget *parent, const QStyleOptionViewItem &option, 
 95.        const QModelIndex &index) const  
 96.    {  
 97.        QComboBox *editor = new QComboBox(parent);  
 98.        editor->addItem("Female");  
 99.        editor->addItem("Male");  
 100.        return editor;  
 101.    }  
 102.    void setEditorData(QWidget *editor, const QModelIndex &index) const  
 103.    {  
 104.        QString text = index.model()->data(index, Qt::EditRole).toString(); 
 105.        QComboBox *comboBox = static_cast<QComboBox*>(editor);  
 106.        int tindex = comboBox->findText(text);  
 107.        comboBox->setCurrentIndex(tindex);  
 108.    }  
 109.    void setModelData(QWidget *editor, QAbstractItemModel *model,  
 110.        const QModelIndex &index) const  
 111.    {  
 112.        QComboBox *comboBox = static_cast<QComboBox*>(editor);  
 113.        QString text = comboBox->currentText();  
 114.        model->setData(index, text, Qt::EditRole);  
 115.    }  
 116.    void updateEditorGeometry(QWidget *editor,  
 117.        const QStyleOptionViewItem &option, const QModelIndex &index) const 
 118.    {  
 119.        editor->setGeometry(option.rect);  
 120.    }  
 121.};  
 122.  
 123.//头像列,只是在单元格中央放一张小图而已   
 124.class IconDelegate : public QItemDelegate  
 125.{  
 126.    Q_OBJECT  
 127.public:  
 128.    IconDelegate(QObject *parent = 0): QItemDelegate(parent) { }  
 129.    void paint(QPainter *painter, const QStyleOptionViewItem &option,  
 130.        const QModelIndex & index ) const  
 131.    {  
 132.        //show.bmp是在工程目录中的一张图片(其实就是QQ的图标啦,呵呵)   
 133.        QPixmap pixmap = QPixmap("show.bmp").scaled(24, 24);  
 134.        qApp->style()->drawItemPixmap(painter, option.rect,  Qt::AlignCenter, QPixmap(pixmap)); 
 135.    }  
 136.};  
 137.  
 138.//代理类,把所有单元格中的字符居中显示   
 139.class VIPModel : public QStandardItemModel  
 140.{  
 141.    Q_OBJECT  
 142.public:  
 143.    VIPModel(QObject *parent=NULL) : QStandardItemModel(parent) { }  
 144.    VIPModel(int row, int column, QObject *parent=NULL)  
 145.        : QStandardItemModel(row, column, parent) { }  
 146.    QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const 
 147.    {  
 148.        if( Qt::TextAlignmentRole == role )  
 149.            return Qt::AlignCenter;   
 150.        return QStandardItemModel::data(index, role);  
 151.    }  
 152.  
 153.};  
 154.  
 155.#include "main.moc"   
 156.  
 157.int main(int argc, char *argv[])  
 158.{  
 159.    QApplication app(argc, argv);  
 160.  
 161.    VIPModel *model = new VIPModel(5, 5);  
 162.    QTableView *tableView = new QTableView;  
 163.  
 164.    //把表格的背景调成黄蓝相间   
 165.    //这种方法是在网上看到的,用起来还真方便啊   
 166.    tableView->setAlternatingRowColors(true);  
 167.    tableView->setStyleSheet("QTableView{background-color: rgb(250, 250, 115);" 
 168.        "alternate-background-color: rgb(141, 163, 215);}");  
 169.  
 170.    tableView->setWindowTitle("VIP List");  
 171.    tableView->resize(700, 400);  
 172.    tableView->setModel(model);  
 173.    QStringList headerList;  
 174.    headerList << "No." << "ID" << "Name" << "Age" << "Sex" << "Show";  
 175.    model->setHorizontalHeaderLabels(headerList);  
 176.    tableView->verticalHeader()->setVisible(false);  
 177.    tableView->horizontalHeader()->setStretchLastSection(true);  
 178.  
 179.    //为每一列加载委托   
 180.    ReadOnlyDelegate readOnlyDelegate;  
 181.    tableView->setItemDelegateForColumn(0, &readOnlyDelegate);  
 182.    UserIDDelegate userIDDelegate;  
 183.    tableView->setItemDelegateForColumn(1, &userIDDelegate);  
 184.    AgeDelegate spinBoxDelegate;  
 185.    tableView->setItemDelegateForColumn(3, &spinBoxDelegate);  
 186.    SexDelegate comboBoxDelegate;  
 187.    tableView->setItemDelegateForColumn(4, &comboBoxDelegate);  
 188.    IconDelegate iconDelegate;  
 189.    tableView->setItemDelegateForColumn(5, &iconDelegate);  
 190.  
 191.    for(int i=0; i<10; i++)  
 192.    {  
 193.        QModelIndex index = model->index(i, 0, QModelIndex());  
 194.        model->setData(index, i);  
 195.    }  
 196.  
 197.    tableView->show();  
 198.    return app.exec();  
 199.} 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

那些很熟悉但又叫不出名字的设计法则:干扰效应

雪涛


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

《名侦探柯南》中总是提到福尔摩斯的一段话:「When you have eliminated the impossible, whatever remains, however improbable, must be the truth.(排除一切不可能的,剩下的即使再不可能,那也是真相。)」这句话用干扰效应来解释最好不过,本期我们来聊聊。


想看更多设计法则,这个专题里全都有:设计法则专题

一、干扰效应(Interference Effect )定义

干扰效应:一种现象,同时思考两件或两件以上的事情时,思考的过程会变得比较慢,也不准确。

二、干扰效应产生理由

有两种或两种以上的知觉或认知过程发生冲突时,就会产生干扰效应。

人们的知觉和认知的不同与心智模型有关,这些模式会独立分析、处理收到的相关信息,处理后会传送到工作记忆区,并作出诠释。当输出资料一致,诠释过程会又快又好。当输出资料不一致,就会产生干扰,需要一些其他的处理,以便更好地解决。解决这些问题需要浪费很多时间,对性能也会产生不好的影响。

三、干扰效应案例

1. 斯特鲁普干扰

斯特鲁普干扰(Stroop Interference):刺激物不相干的一面引发了思考过程,因而干扰了刺激物相关方面的思考。

图标协同文字可以准确的向用户传递所要表达的内容,二手在常用的 App 中截出了一些图标,却发现现在很多的图标在信息传达方面有所欠缺。

举四个例子:

下面这组图标,「地方菜系、美食、晚餐、大牌简餐」几个图标没有表达出所要传达的信息,还有几个图标要借助文字才能表达出其含义。即使图标设计的非常精美,但是图标功能却存在缺失,而且这几个图标不能刺激用户对信息的理解,反倒是让用户更加迷惑。设计师也注意到了这个情况,所以最近改版后,信息传达变的更加直接,减少了干扰。

接下来的这组图标也存在同样的问题,这组图标想借助图标上产品本身的含义来传达给用户要表达的信息,但是这需要用户对这些产品本身的定位非常明确,如果不明确的话只能干扰用户的行为,例如,用户需要知道「吕」是个韩国洗发水之后才能拐弯抹角的联想到「全球超市」,再例如:中间「轻奢」图标,用的是劳力士绿水鬼,一款70000+还要靠等才能买到的奢华手表,二手认为跟轻奢的定义有矛盾,除非这并不是劳力士。

米家这套图标二手认为可以准确传达所描述的信息,因为米家有种类繁多的 loT 产品,有时候一款产品更是分为不同的版本,如果用户只是根据名称选择的话不仅繁琐而且十分耗时,所以在选择产品时,米家把所有产品外形准确刻画成图标,用户可以先根据自己产品的外形大致选择型号,再根据文字提示准确的选择自己产品的版本。

△ 米家App图标

滴滴这套图标表达也很准确,不同的服务通过不同的图标可以准确传达。

△ 滴滴图标

2. 加纳干扰

加纳干扰(Garner Interference):刺激物一个无关的变化,引发了思考过程,干扰到跟刺激物相关的思考过程。

举个例子:如下图,指出单独一排的形状,比指出两排其中一排的形状要简单。两排形状紧靠在一起,激发了想说出旁边形状的思考程序,造成干扰。

根据上面这个案例,二手联想到了「个人中心」页面,大部分「个人中心」页面都选择了竖排列表布局。列表布局就是以列表的形式展示具体内容,并且能够根据数据的长度自适应显示,Material Design 建议列表是「可快速扫描」,适合显示类似的重复的内容。列表布局也是最快速的 app 布局方式。这种排列在某方面上就是降低了干扰。相比于列表布局,宫格导航是将主要入口全部聚合在页面,让用户做出选择。这样的组织方式无法让用户在第一时间看到内容,选择压力较大,采用这种导航的应用已经越来越少,往往用在二级页作为内容列表的一种图形化形式呈现,或是作为一系列工具入口的聚合。

△ 列表布局和宫格导航

3. 前向干扰

前向干扰(Proactive Interference):现存记忆干扰了学习。

举个例子:手淘的最近改版中,店铺首页顶部导航和底部自定义菜单结构化调整,但是有一个细节的变化让二手不断的犯错——返回按钮改成了关闭按钮,二手习惯点击左上角返回按钮来返回上一级菜单,改版后依旧习惯点击左上角,但是打开的是店铺印象,仅仅是图标左右位置简单的调换,已经让二手在使用的过程中挫败感强烈。这就是现在的使用记忆已经严重干扰了学习。所以产品在改版迭代的时候,尽量不要干扰用户已经熟悉的路径或是破坏用户使用习惯。

△ 手淘的店铺首页改版

4. 后向干扰

后向干扰(Retrosctive Interference):学习干扰了现存记忆。

这个正好跟上面相反,二手不断培养现在的使用习惯,渐渐的就忘记了上一版的路径。

四、怎样预防干扰

要想预防干扰,就要避免输出思考过程中相互冲突的设计。知觉的干扰效应,通常是因为信息的传达过程中有歧义,或是因为把互相干扰的元素结合在一起。要把干扰效应降到,首先要求设计师用准确的设计语言传达信息,如果这样还是无法让用户很好的理解,其次可以考虑利用文字或者引导来告知用户。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

 


sublime的使用

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

一、 前言

       使用Sublime Text 也有几个年头了,版本也从2升级到3了,但犹如寒天饮冰水,冷暖尽自知。最初也是不知道从何下手,满世界地查找资料,但能查阅到的资料,苦于它们的零碎、片面,不够系统和全面,所以一路走来,耗费了本人大量的时间和精力。所以蒙生了写这篇《Sublime Text 3 全程详细指南》,一来对自己的经验是一个总结,二来可以给初学者做个系统、全面的指引,让他们少走我当时走过的弯路,从而能快速地掌握Sublime Text这个优秀的编辑器。

      目前我正在使用的版本是Sublime Text 3 Build 3083的beta版本,已经相当稳定。所以本文所有讲解均以此版本为准,并以windows 7 x64平台为示例。至于其它的版本也不会有太大的差异。

 

二、 Sublime Text 特点

      1、Sublime Text 是一款跨平台代码编辑器,在Linux、OS X和Windows下均可使用。

      2、Sublime Text 是可扩展的,并包含大量实用插件,我们可以通过安装自己领域的插件来成倍提高工作效率。

      3、Sublime Text 分别是命令行环境和图形界面环境下的最佳选择,同时使用两者会大大提高工作效率。

      4、Sublime Text 为收费软件,建议有能力的人付费使用,以支持开发者。不过不购买也可以一直使用。

 

三、下载与安装

      1、下载:目前官方的正式版本为v2.0.2,我们打开官网下载链接http://www.sublimetext.com/3,下载Sublime Text 3 Build 3083。

 

      其中“Windows 64 bit”下载下来为“Sublime Text Build 3083 x64 Setup.exe”的安装程序;“portable version”下载下来为“Sublime Text Build 3083 x64.zip”编辑器的包,解压后无需安装就能运行。

 

      如果你的电脑平台是windows x86,也就是32位的系统,请点击“Windows”下载32位的安装程序,如果不想安装,就点击其后的“portable version”下载它的32位编辑器包。

 

      2、安装:双击上一步下载下来的“Sublime Text Build 3083 x64 Setup.exe”,记得选择“Add to explorer context menu”,把它加入右键快捷菜单。其它以默认设置安装。

 

      3、安装完毕,双击桌面“Sublime Text 3”快捷图标,打开程序,就可以见到“Sublime Tex的庐山真面目了。

 

      4、如果你不是把“Sublime Text 3”安装在默认路径,比如你把它安装在D盘,请你添加环境变量。

 

四、设置字体及字体大小

      点菜单“Preferences--->Setting - User”,打开“Preferences.sublime-settings”。

 

      如下图添加所需代码,根据自己的喜好进行设置。设置字体用"font_face":"字体名称",设置字体大小用"font_size":"字体大小",注意它们之间需要用逗号隔开。

 

五、安装插件

       学习Sublime Text扩展插件的安装前,让我们来先了解一下它的插件官方网站:https://packagecontrol.io/

 

     当我们在搜索框中输入插件的关键字,相关的插件就会在下面实时显示出来,我们就可以选择自己想要的插件进行了解。

 

1、安装Package Control

      Package Control为插件管理包,所以我们首先要安装它。有了它,我们就可以很方便的浏览、安装和卸载Sublime Text中的插件。

      打开Package Control的网页https://packagecontrol.io/,点击右侧的“Install Now”按钮。

 

进入https://packagecontrol.io/installation#st3页面,选择“SUBLIME TEXT 3”选项卡,复制出里面的代码段:

 

import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

 

      双击桌面“Sublime Text 3”打开程序,快捷键 Ctrl + ` 打开Sublime Text控制台,将之前复制的代码粘贴到控制台里,按下“Eenter”键。

 

      等待其安装完成后关闭程序,重新启动“Sublime Text 3”,点开菜单“Preferences”可见“Package Control”项,说明插件管理包已安装成功。

 

2、ConvertToUTF8 插件安装

      a)功能说明:ConvertToUTF8 能将除UTF8编码之外的其他编码文件在 Sublime Text 中转换成UTF8编码,在打开文件的时候一开始会显示乱码,然后一刹那就自动显示出正常的字体,当然,在保存文件之后原文件的编码格式不会改变。

      b)安装方法一:快捷键 Ctrl+Shift+p ,打开 “Command Palette” 悬浮对话框,在顶部输入 “install”, 然后下选点击 “Package Control:Install Package”。

 

      在出现的悬浮对话框中输入 “convert”, 然后点选下面的 “ConvertToUTF8” 插件,就会自动开始安装,请耐心等待。

 

       当插件安装成功后,Sublime Text 3 编辑器底端的状态栏会有安装成功的提示。

 

 

      c)安装方法二:你还可以下载完整的插件包后解压,放入 C:\Users\userName\AppData\Roaming\Sublime Text 3\Packages 目录下,以达到安装插件的目的。下载地址:https://github.com/seanliang/ConvertToUTF8

如何找到 Packages 目录?一个快捷的方法是:双击打开你的 “Sublime Text 3”,点菜单 “Preferences--->Browse Packages...”。

 

      它会直接打开插件包存放的目录 “Packages”。然后你就可以把下载后解压好的插件包复制到这个 Packages 目录下。

      当然,如果你熟悉 git,你还可以用 git 从插件的 GitHub 库直接克隆插件包到 Packages 目录下。

 

      备注: 以后所有插件都可以通过以上介绍的两种方法安装,将不再赘述,推荐方法一,使用“ Package Control”安装插件。

 

3、BracketHighlighter 插件

      功能说明:高亮显示匹配的括号、引号和标签。

      插件地址:https://github.com/facelessuser/BracketHighlighter/tree/BH2ST3

 

4、LESS 插件

      功能说明:LESS语法高亮显示。

      插件地址:https://github.com/danro/LESS-sublime

 

5、sublime-less2css 插件

      功能说明:将less文件编译成css文件。

      插件地址:https://github.com/facelessuser/BracketHighlighter/tree/BH2ST3

      辅助工具:安装后从 https://github.com/duncansmart/less.js-windows 下载 less.js-windows,然后配置 less.js-windows 的环境变量。

 

6、Emmet 插件

      功能说明:Emmet的前身是大名鼎鼎的Zen codin。前端开发必备,HTML、CSS代码快速编写神器。

      使用方法:默认快捷键 Tab

      插件地址:https://github.com/sergeche/emmet-sublime

      辅助工具:PyV8 下载地址: https://github.com/emmetio/pyv8-binaries

      注意:Emmet 插件需要 PyV8 插件的支持,所以在安装 Emmet 时,会自动安装 PyV8 插件,如果安装后 Emmet 不能正常保用,很有可能是因为 PyV8 没有安装完全,Sublime Text 2 和 3 容易出现这个问题。你可以删除它,然后手动下载,采用方法二安装 PyV8 插件。

 

      使用方法示例:书写代码 ul#nav>li.item$*8>a{Item $}

 

      然后把光标定在这行代码的最后面,按 Tab 键,就会自动生成:

      <ul id="nav">

              <li class="item1"><a href="">Item 1</a></li>

             <li class="item2"><a href="">Item 2</a></li>

             <li class="item3"><a href="">Item 3</a></li>

             <li class="item4"><a href="">Item 4</a></li>

             <li class="item5"><a href="">Item 5</a></li>

             <li class="item6"><a href="">Item 6</a></li>

             <li class="item7"><a href="">Item 7</a></li>

             <li class="item8"><a href="">Item 8</a></li>

    </ul>

 

 

      更多更详细的使用方法,请查阅 Emmet 官网:http://docs.emmet.io/

 

7、JsFormat 插件

      功能说明:JavaScript代码格式化。

      使用方法:在打开的JavaScript文件里点右键,选择JsFormat。

      插件地址:https://github.com/jdc0589/jsformat

 

8、ColorHighlighter 插件

      功能说明:显示所选颜色值的颜色,并集成了ColorPicker

      插件地址:https://github.com/Monnoroch/ColorHighlighter

 

      在16进制的颜色值上点右键,选择“Choose color”,会弹性颜色拾色器,在需要的色块上单击。

 

 

      看看效果,颜色值和显示颜色都相应做了改变。

 

9、Compact Expand CSS Command 插件

      功能说明:使CSS属性展开及收缩,格式化CSS代码。

      使用方法:按 Ctrl+Alt+[ 收缩CSS代码为一行显示,按 Ctrl+Alt+] 展开CSS代码为多行显示。

      插件地址:https://gist.github.com/vitaLee/2863474 或者:https://github.com/TooBug/CompactExpandCss

 

      快捷键 Ctrl+Alt+[ 收缩CSS代码为效果: 

 

      快捷键 Ctrl+Alt+] 展开CSS代码为多行显示效果:

 

10、SublimeTmpl 插件

      功能说明:快速生成文件模板。

      使用方法:SublimeTmpl默认的快捷键如下,如果快捷键设置冲突可能无效。

                    Ctrl+Alt+h              新建 html 文件

                    Ctrl+Alt+j               新建 javascript 文件

                    Ctrl+Alt+c               新建 css 文件

                    Ctrl+Alt+p              新建 php 文件

                    Ctrl+Alt+r               新建 ruby 文件

                    Ctrl+Alt+Shift+p     新建 python 文件

      插件地址:https://github.com/kairyou/SublimeTmpl

 

      下图为按快捷键 Ctrl+Alt+h 新建的一个 html 文件。

 

      相应的模板为tmpl格式的文件,它们保存在C:\Users\ usersName\AppData\Roaming\Sublime Text 3\Packages\SublimeTmpl\templates下。

 

      当然你可以根据自己的喜好来更改模板格式。例如把“html.tmpl”改为早期的html标准格式后保存。

 

      现在按快捷键 Ctrl+Alt+H,新建一个 html 文件,其格式就和更改后模板格式完全一样了。如下图:

 

      新增语言:你还可以增加模板文件夹中没有的文件模板,并做相应的设置来使用这一功能。具体可以参考它的中文文档:http://www.fantxi.com/blog/archives/sublime-template-engine-sublimetmpl/

 

11、Alignment 插件

      功能说明:使代码格式的自动对齐。

      使用方法:快捷键Ctrl+Alt+A,可能与QQ截图冲突,二者中的一个要重置快捷键。

      插件地址:https://github.com/kevinsperrine/sublime_alignment

 

12、AutoFileName 插件

      功能说明:自动补全文件(目录)名。

      插件地址:https://github.com/BoundInCode/AutoFileName

 

      安装好后就可以来测试如何使用AutoFileName,先以<link>css档案来示范,当输入href=””的同时,Sublime Text就会将现在编辑档案的路径为中心,判断该路径内的所有档案。

      a)以这个档案为范本它会去抓取跟abc.html在同一层的档案列表。

 

      像我们这次要link的是在css资料夹内的auto.css,所以我们直接衔接打上css/,就会跑出css资料夹内的档案,整个用法以此类推

 

      b)像是<img src=””>的部分也是一样的方式,没什么困难了,弄懂一下路径就好了。

 

     c)再来看看是css档中要用url,也是用同样方式,只不过因为要连到上一层的images资料夹内的arrow.png,所以就前面打..(上层),依序去选择路径即可。

 

13、DocBlockr 插件

      功能说明:快速生成JavaScript (including ES6), PHP, ActionScript, Haxe, CoffeeScript, TypeScript, Java, Groovy, Objective C, C, C++ and Rust语言函数注释。

      使用方法:在函数上面输入/** ,然后按 Tab 就会自动生成注释。

      插件地址:https://github.com/spadgos/sublime-jsdocs

 

      在函数上面输入/** ,然后按Tab 就会自动生成注释。

 

14、SublimeCodeIntel 插件

      功能说明:智能提示。

      插件地址:https://github.com/SublimeCodeIntel/SublimeCodeIntel

 

15、HTML-CSS-JS Prettify 插件

      功能说明:HTML、CSS、JS格式化。

      插件地址:https://github.com/victorporof/Sublime-HTMLPrettify

      安装方法:安裝这个套件前必须先安裝node.js,指定 node.exe 的执行档所在位置。进而安装HTML-CSS-JS Prettify。

      使用方法一:View -> Show console 或者使用快捷键(Ctrl + `),在命令列的地方輸入:view.run_command("htmlprettify"),然后按下Enter。

 

      使用方法二:默认快捷键:Ctrl+Shift+H。

                       你也可以自行设置快捷键,菜单 “Preferences---> Key Bindings – User” 里新增:

{ 
    "keys": ["ctrl+shift+o"], 
    "command": "htmlprettify" 
}

 

       完成后保存,以上代码设定执行此插件的快捷键是:Ctrl+Shfit+O,自己设定的话就要测试一下,不要跟其他快捷键冲突。

 

      格式化前:

 

      格式化后:

 

16、SideBarEnhancements 插件

      功能说明:侧栏菜单扩充功能。

      插件地址:https://github.com/titoBouzout/SideBarEnhancements/tree/st3

 

17、View In Browser 插件

      功能说明:Sublime Text保存后网页自动同步更新。

      插件地址:https://github.com/adampresley/sublime-view-in-browser

      使用方法:在打开的文档任一处点右键,选择“View In Browser”,就会用默认的浏览器自动打开该文件。

 

      如果你电脑装有多个浏览器,你想换其它的作为此操作的默认浏览器,你可以按以下方法设置:

 

      打开“View In Browser.sublime-settings”,写入以下代码:

{
    "browser": "chrome64"
}

 

      这样你就把它默认设置为“Chrome”浏览器了,当然你还可以改成“Firefox”、“Safari”等等,前提是你的电脑事先已安装好了这些浏览器。

 

18、LiveReload 插件

      功能说明:调试网页实时自动更新。

      使用说明:快捷键 Ctr+Alt+V

      插件地址:https://github.com/dz0ny/LiveReload-sublimetext2

 

      同时Chrome浏览器也要安装LiveReload 的扩展插件。

 

19、TortoiseSVN 插件(win下需要安装有TortoiseSVN客户端支持)

      功能说明:版本控制工具。

      插件地址:https://github.com/dexbol/sublime-TortoiseSVN

 

20、Theme-Soda 插件

      功能说明:的 Sublime Text 主题之一。

      插件地址:https://github.com/buymeasoda/soda-theme

      安装完成后,点菜单 Preferences--->Settings - User,根据需要的主题效果,添加如下代码。

      Soda 亮色主题请添加:

{
    "soda_classic_tabs": true,
    "theme": "Soda Light 3.sublime-theme",
}

     

      Soda 暗色主题请添加:

{
    "soda_classic_tabs": true,
    "theme": "Soda Dark 3.sublime-theme",
}

 

 

      要达到图中的效果,你还需要下载与之搭配的 color scheme。下载地址:http://buymeasoda.github.com/soda-theme/extras/colour-schemes.zip,如果你喜欢 Soda Dark 和 Monokai,我建议你使用 Monokai Extended。这个 color scheme 是 Monokai Soda 的增强,再配合 Markdown Extended ,将大大改善 Markdown 的语法高亮。

 

      如果加代码 "soda_classic_tabs":true,文件标签页形状会如下显示:

 

      如果不添加此行代码,文件标签页形状会如下显示:

 

21、Theme-Flatland 插件

      功能说明:的 Sublime Text 主题之一。

      插件地址:https://github.com/thinkpixellab/flatland

 

22、Theme-Nexus 插件

      功能说明:的 Sublime Text 主题之一。

      插件地址:https://github.com/EleazarCrusader/nexus-theme

 

 

六、插件列表

    快捷键 Ctrl+Shift+P,在对话框中输入“list”,选择“Package Control:List Packages”。

      会列出所有已安装的插件。这样可以很方便地了解自己已经安装了哪些插件。

 

七、移除插件

      有时候我们需要移除自己不想要的插件,具体操作如下:快捷键 Ctrl+Shift+P,在对话框中输入“remove”,选择“Package Control: Remove Packages”。

 

      然后在出现的插件列表中点选你要移除的插件。

 

八、Sublime Text 的窗口操作

1、分屏

      Sublime Text有多种分屏形式,让我来具体地看一看。菜单 “View-àLayout”就可以选择你的分屏样式。

 

      对应的快捷键与分屏情况如下:

      Alt+Shift+1       Single             独屏

      Alt+Shift+2       Columns:2      纵向二栏分屏

      Alt+Shift+3       Columns:3      纵向三栏分屏

      Alt+Shift+4       Columns:4      纵向四栏分屏

 

      Alt+Shift+8       Rows:2          横向二栏分屏

      Alt+Shift+9       Rows:3          横向三栏分屏

 

      Alt+Shift+5       Grid              四格式分屏

 

2、创建新窗

      快捷键Ctrl+Shift+N 创建一个新窗口。

 

九、使用技巧荟萃

 (未完待续。。。。。。)

 

 

 

 

 

 

 

 

 

十、Sublime Text 快捷键列表

      快捷键按类型分列如下:

1、通用

      ↑↓← →    上下左右移动光标

      Alt    调出菜单

      Ctrl + Shift + P    调出命令板(Command Palette)

      Ctrl + `    调出控制台

2、编辑

      Ctrl + Enter    在当前行下面新增一行然后跳至该行

      Ctrl + Shift + Enter    在当前行上面增加一行并跳至该行

      Ctrl + ←/→    进行逐词移动

      Ctrl + Shift + ←/→    进行逐词选择

      Ctrl + ↑/↓    移动当前显示区域

      Ctrl + Shift + ↑/↓    移动当前行

3、选择

      Ctrl + D    选择当前光标所在的词并高亮该词所有出现的位置,再次 Ctrl + D 选择该词出现的下一个位置,在多重选词的过程中,使用 Ctrl + K 进行跳过,使用 Ctrl + U 进行回退,使用 Esc 退出多重编辑

      Ctrl + Shift + L    将当前选中区域打散

      Ctrl + J    把当前选中区域合并为一行

      Ctrl + M    在起始括号和结尾括号间切换

      Ctrl + Shift + M    快速选择括号间的内容

      Ctrl + Shift + J    快速选择同缩进的内容

     Ctrl + Shift + Space    快速选择当前作用域(Scope)的内容

4、查找&替换

      F3    跳至当前关键字下一个位置

      Shift + F3    跳到当前关键字上一个位置

      Alt + F3    选中当前关键字出现的所有位置

      Ctrl + F/H    进行标准查找/替换,之后:

      Alt + C    切换大小写敏感(Case-sensitive)模式

      Alt + W    切换整字匹配(Whole matching)模式

      Alt + R    切换正则匹配(Regex matching)模式

      Ctrl + Shift + H    替换当前关键字

      Ctrl + Alt + Enter    替换所有关键字匹配

      Ctrl + Shift + F    多文件搜索&替换

5、跳转

      Ctrl + P    跳转到指定文件,输入文件名后可以:

      @ 符号跳转    输入@symbol跳转到symbol符号所在的位置

      # 关键字跳转    输入#keyword跳转到keyword所在的位置

      : 行号跳转    输入:12跳转到文件的第12行。

      Ctrl + R    跳转到指定符号

      Ctrl + G    跳转到指定行号

6、窗口

      Ctrl + Shift + N    创建一个新窗口

      Ctrl + N    在当前窗口创建一个新标签

      Ctrl + W    关闭当前标签,当窗口内没有标签时会关闭该窗口

      Ctrl + Shift + T    恢复刚刚关闭的标签

7、屏幕

      F11    切换至普通全屏

      Shift + F11    切换至无干扰全屏

      Alt+Shift+1       Single             切换至独屏

      Alt+Shift+2       Columns:2      切换至纵向二栏分屏

      Alt+Shift+3       Columns:3      切换至纵向三栏分屏

      Alt+Shift+4       Columns:4      切换至纵向四栏分屏

      Alt+Shift+8       Rows:2          切换至横向二栏分屏

      Alt+Shift+9       Rows:3          切换至横向三栏分屏

      Alt+Shift+5       Grid              切换至四格式分屏

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

照片手绘设计趋势

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

香港理工大学教授John Heskett认为,作为设计师有三个阶段性的价值:修饰者,区分者,设计驱动。在信息爆炸的今天,设计师每天阅读大量的设计文章、作品,但却依然提升缓慢。一个优秀的设计作品:到底好在那里?背后思考是什么?品牌价值有哪些?…

为了帮助设计师提升基础审美。每周我们会挑选全球优秀拔尖的设计,帮你解读每个设计背后的思考!让基础审美养成设计好习惯的第一步。

------------------任何设计问题添加微信:uiskyss---------------------------

请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

JavaScript对象、JSON对象、JSON字符串的区别

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

JavaScript对象、JSON对象、JSON字符串的区别

一、首先看下什么是JSON

JSON:JavaScript Object Natation,JavaScript对象的表现形式,已经发展成一种轻量级的数据交换格式。

JavaScript对象的表现形式,指定义JS对象的一种方式。
数据交换格式,即用于交换的数据格式。

JSON是种格式:

数据在键值对中, 数据由逗号分隔, 花括号保存对象, 方括号保存数组.
键值对组合中的名称写在前面,值对写在后面,中间用冒号隔开
JSON 值可以是: 数字, 字符串, 逻辑值, 数组, 对象, null

JSON与XML相比,JSON更轻量级,XML更重量级,目前XML更多的用作配置文件。

 

二、再来看下什么是javascript对象

虽然有人说JavaScript 中的所有事物都是对象,但是 javascript 中,并不是所有的值都是对象,而有两种值类型:原始值和对象。
(参考:http://blog.csdn.net/justjavac/article/details/8432989 JavaScript 并非所有的东西都是对象)

JavaScript原始值:
字符串,数字,布尔值,null,正则表达式
注:在 JavaScript 中所有的数字都是浮点数

JavaScript内置对象:
Object(基础对象),
Array(数组),
Function(函数构造器),
Math(数学对象),
String(字符串对象),
Number(数值对象),
Boolean(布尔对象),
Date(日期时间),
Error(异常对象),
RegExp(正则表达式对象),
Arguments(函数参数集合)
(参考:http://www.cnblogs.com/lianzi/archive/2011/08/26/2154253.html javascript内置对象列表及Array和String的常用方法)

其中 Boolean, Number, String 是原始值的包装器,很少直接使用

JavaScript 创建对象的方法:
1)使用内置对象
var person=new Object();//创建基础对象实例,然后为其添加属性
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
2)自定义对象构造
function Person(firstname,lastname,age){//自定义对象构造器,然后创建实例
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
}
var person=new Person("Bill","Gates",56);
//定义对象构造器,可以使用“this”关键字构造、也可以使用原型prototype构造
(参考:http://www.jb51.net/article/20428.htm JavaScript 三种创建对象的方法)
3)使用直接量(literals 有直接量、字面量、常量等词义)
var arr = [obj.a, 0, obj.a+1];
var obj = {name: 'John' + 'McCarthy'};

注:
准确的说不叫直接量(literals),而叫初始器(Initialiser),可以在里面使用表达式
初始器有对象和数组两种,所以有“对象直接量”,“数组直接量”这样的说法

初始器基于JSON,要符合JSON语法格式,
因此有人说JSON是JavaScript的原生格式,
在JavaScript中处理JSON数据不需要任何特殊的API或者工具包

但是初始器里面是可以有表达式的,就像例子里的一样
(参考:http://www.cnblogs.com/snandy/p/3439790.html JavaScript中的直接量与初始器的区别)

原始值只包括字符串,数字,布尔值,null,正则表达式,不包括 Undefined 和 Initialiser

 

三、JavaScript对象、JSON对象、JSON字符串

javascript对象:javascript中,除开JavaScript原始值(字符串,数字,布尔值,null,正则表达式)的都是javascript对象

JSON对象:JSON对象这种叫法不太准确,可以理解为使用基于JSON的初始器定义的javascript对象

JSON字符串:符合JSON语法格式的字符串

 

 

javascript对象和JSON字符串相互转换:
1:jQuery插件支持的转换方式
$.parseJSON( jsonstr );$("xxx").serializeArray();
2:浏览器支持的转换方式(Firefox,chrome,opera,safari,ie9,ie8)等浏览器
JSON.parse(jsonstr);JSON.stringify(jsonobj);
3:Javascript支持的转换方式
eval('(' + jsonstr + ')');//不推荐
4:JSON官方的转换方式
引入 json.js 或 json2.js,用法同第二种
(参考:http://www.cnblogs.com/luminji/p/3617160.html JS中对象与字符串的互相转换)

 

JAVA对象和JSON字符串相互转换:
可以用jackson、Gson和json-lib等
(参考:http://www.blogjava.net/bolo/archive/2014/04/16/412533.html 使用jackson对Java对象与JSON字符串相互转换的一些总结)

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



该有的视觉元素全都有,设计不好到底差在哪里?

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

小时候我们很多经验都是来自于寓言故事,故事总能帮你更好地理解一些事情和道理。关于设计,这个道理同样适用。今天的文章,我们就跟着一个设计师的经历来学点什么吧。

我有一个朋友,名字叫做 Jimmy,这的确是一个很普遍的名字。当我认识他的时候,他正供职于一家名为 Shmuckle 的公司,而他正是这家公司的设计师。和所有的设计师一样,他日思夜想梦寐以求的,是成为一名著名的设计师,而乔布斯的经历对他有着不可磨灭的影响。Jimmy 和很多设计师一样,着迷乔教主。好在 Jimmy 的崇拜并不是停留在嘴上,而是身体力行,力图在公司里面推行好的设计。在 Jimmy 的眼中,好的设计应该是直观的、创新且令人愉悦的。

当然,故事的发展如果总是一帆风顺就没有意思了。Jimmy 果然一如正常的剧情推进……他碰到障碍了。

这一次,Jimmy 正在执行一个重要的项目,这个项目的成败将会直接影响到他的职业生涯。这次的任务,他需要为他们公司的一款产品,重新设计整个控制面板。而就在这次的项目当中,Jimmy 发现他没有办法拿出一套足够优秀的解决方案。好在他还有 Plan B,那就是重新找灵感。Jimmy 开始重新播放他最喜欢的设计类的视频,阅读曾经给他启发的文章,收听其他同行所开设的播客,以期在其中找到感觉或者灵感。

可惜,灵感并没有如期而至。局面尴尬了。

就在此刻,援手到了。Sarah 是公司的资深设计师,正巧这个时候路过 Jimmy 的工位,看到了 Jimmy 纠结挣扎的样子。这是多么熟悉的场景啊,她早年入行的时候,同样经历过这样的状态,为求一好设计而痛苦不已。如今,她已经能够轻松驾驭不同的需求,足以应对复杂多变的设计项目。

「Hey Jimmy,老远就看到你正在揪头发,看样子正在构思新设计吧,瞧你这个状态,应该不太顺利吧?」

「诶,客户说让我给他们重新设计整个控制面板。他们觉得不够好使,希望新的控制面板能够更好展示信息,提升效率,最好再把几个比较明显的可访问性问题给解决一下。但是我怎么设计……都觉得不对。客户那边有不少人参与了测试,有人觉得挺棒的,有人又非常讨厌,还有一部分直接说还得接着改。现在,我觉得无能为力,不知道要怎么弄了。」Jimmy 保持着挠头的姿势,盯着屏幕说道。

「别纠结,」Sarah 微笑道:「如果一直盯着问题解决问题是常常会陷入这样的困境的,解决方案其实并不复杂,你需要从根子上来想办法。只要让整个设计方案贴合规则基础稳固了,问题就会迎刃而解了。其实,关键也就是几个基本的设计原则。」

「虽然这话经常听到,但是真的能行?」Jimmy 狐疑地盯着 Sarah,思忖两秒感觉到大姐头这是要传授秘籍,便摸过小本子,端正坐姿,准备做笔记:「那么,都有哪些原则呢?」

Sarah 拍了拍 Jimmy 的肩膀,端了杯咖啡,说道:「下楼散步吧,咱们边走边聊。」

「其实,在产品完成之后,是需要基于几个基本的原则来重新审视和调整设计的。」Sarah 喝了一口咖啡,慢慢地开始说。

保持清晰

Jimmy,如果脑子里面的思路没有梳理清晰,很难做出条理清晰的产品的。因此,在设计产品之前,先应当消除思维中的混乱,有几个事情,在设计的过程中要始终保持关注:

  • 业务目标,客户的问题和需要的功能则会催生设计,而这几个因素之间是存在关系的。
  • 永远不要为了好看而牺牲功能。
  • 下一步要做的事情始终要是不言自明的。
  • 对于最重要的内容,要借助负空间、色彩、字体、图形和其他的 UI 元素来进行突出展示的。
  • 各种尺寸的文本都应该清晰可见。
  • 图标应该而锐利。
  • 除此之外,要让设计保持微妙而恰到好处。
  • 通过设计,你的用户应该本能的知道他在哪里,以及该做什么。

产品的外观最终都是在清晰的设计(或者不够清晰的设计)之下的副产物。清晰的设计意图,最终会转化为清晰的产品设计。——Massimo Vignelli

「我记得 Massimo Vignelli 在他的《The Vignelli Canon》中写道,一个混乱而复杂的产品始终是源自于制造者本身的混乱,说明这个人本身内心深处心态复杂而想法混乱。」Sarah 说道。Jimmy 此刻若有所思。

可操作的界面

「接下来的这一点也同样很重要。我们设计的数字产品必须清晰,也要专注于当前的任务,一个交互性强、可操作性优秀的 APP 才是用户所需要的,而要做到这一点,屏幕上的内容应当始终是的,并且始终保持较高的相关性。与此同时,APP  也应当作为用户意图的延伸。如果用户打开了你的 APP,想要解决某个问题,执行某个任务,而你的 APP 做不到这一点,那么情况就很糟糕了。」Sarah 说道。

她停了几秒钟,梳理了一下思路,继续说道:「你看,我们所做的一切都是为了确保我们的方案,能够在正确的环境中,面对着对的用户,解决亟需解决的问题。当然,我们要经历很多次的迭代,才能靠近这一目标。」

主观的愿景

「许多设计师和开发者都在说,APP 应该灵活,应该满足所有客户的需求。好吧,Jimmy,这些说法都是胡说八道的。但是有一个说法很真实,也需要你时刻谨记:试图取悦每个人只会带来无尽的压力和痛苦,让你沮丧,失去资源。所以,不要害怕失去一部分用户,真正需要担心的是失去愿景和远见。」

「一个伟大的而足够优秀的数字产品,必须始终清楚它到底是服务于谁的。只有牢记真正的用户,明白他们的需求,才能开发出真正有效的解决方案。最好的数字产品当中,都是藏着愿景的。」Sarah 和 Jimmy 走到了大楼的窗户附近,看着外面来往的人流,Jimmy 忍不住问到:「那其他的用户呢?」Sarah 笑着回答:「当我们满足目前的目标之后,才能顾的上其他的人。我们的目标用户才是核心,其他的人不喜欢,和我们的愿景不匹配,也不用操心。市场上会有其他的应用或者服务能够满足他们,让他们高兴,而我们总是只能身处一个阵营,你不可能什么都拥有。」Sarah 笑着回答 Jimmy 的疑问。

当人们寻找软件和服务的时候,他们要的并不是功能,他们要的是解决问题的方法,一个和自己相匹配的愿景。——37Signals《Getting Real》

反馈系统

下一个原则,也是一个很重要的注意事项,那就是反馈。反馈能够帮用户确定操作是否执行了,明白结果是否发生,让用户明白当前的情况:

  • 交互发生时,相应的交互元素应该被凸显出来
  • 进度指示控件应该持续地显示当前状态
  • 动画和声音的加入有助于用户理解交互的状态和结果

「我想你应该知道,即使技术如此的进步,人类本身的生物性决定了我们依然是依靠反馈来确知互动的结果和状态的。我们的身体(视觉或者触感)需要感受到反馈,再像大脑发出信号,而虚拟的界面背后到底在发生什么,需要全面的交互设计传递出来,只有这样用户才不会费劲巴拉地去思考之前的点击或者滑动交互是否操作成功了。反馈给用户的信息也应该是能够被轻松理解的,用户不应该在这个事情上再费劲去思考了。因此,你手边应该有关于心理学、行为学这类能够揭示人类思考的图书,因为它们能够帮你提升技能。」Sarah 喝了一口咖啡,润了润嗓子,带着 Jimmy 又溜达上楼,回到了办公室。

善用隐喻

「隐喻——我这里说的并不是文学中的隐喻,」Sarah 又提到了一个看似无用但是经常被说起的概念:「你看,UI界面中的设计元素和交互方式和我们的现实生活中的元素和交互方式是如此的相似,这就是借用隐喻将我们的熟悉的元素和交互都投射到虚拟的数字产品当中。这样一来,用户会更快地学会和理解。」

「正是因为隐喻的存在,现实的经验和虚拟的交互产生了关联,用户交互因此而更加自然地发生。视线随着被精心设计的布局而游移到重点上,用户会下意识地点击被高亮显示的、和现实按钮差不多的交互控件,他们还会下意识地在虚拟的屏幕上滑动,在界面之前自然游走。因此,你有必要了解你的核心用户每天都在使用哪些 APP,他们都是如何交互的。这有助于你吸收经验,消除不良的体验,创造舒适的交互,降低学习的压力,更好地转化。」Sarah 一边说着,一边下意识地模拟着交互并解释道。

内容的一致性

「接下来我们还是用案例来说明一下,会更容易理解。」说着 Sarah 坐到椅子上,并且打开电脑屏幕,说道:「比如我们要做一个日历,你认为它应该是网格,还是做成列表?」Jimmy 挠头想了一下,迟疑道:「恩……我们应该坚持使用网格的样式。它更加紧凑也更加有条理,我说的对吗?」

「其实这取决于用户的主要目标是什么。如果这个日历元素是出现在报告文档当中,应该是用网格的样式还是列表的样式呢?一样的,这要看情况。我们是否要在每个应用中都使用全局导航?同样是需要基于上下文情况来决定的。一致的设计不止是表面样式上的一致,还需要从需求、内容、用户使用场景和体验上来保持一致性。如果在特定的情况下,独特的设计能够带来更大的价值,那么这是有意义的,这种特殊情况下不同是有必要的。」Sarah 细心地为 Jimmy 解释道。

良好的设计,应该是特定语境经过评估后定制的副产物,而不是脱离使用场景而凭空创造出来的,否则,无论多么炫酷都是不合时宜的。——Massimo Vignelli

防御性设计

「最后要说的,是防御性设计。」Sarah 转身对着 Jimmy,然后说道最后一个规则。

「防御性设计?什么东西?」Jimmy 感觉今天学到了不少,最后这个原则也被他写到小本子上了。「这个啊,也就是大家常说的直觉性设计。」Sarah 微微一笑。

「我知道!乔布斯以前就经常说这个概念!」Jimmy 终于找到一个他足够熟悉的概念,兴奋不已。

「可是,你真的知道什么是直觉性的设计么?」Sarah 看着兴奋的 Jimmy 卖了个关子。

「预测用户行为?然后在用户要执行下一个操作之前帮他解决需求?」Jimmy 狐疑地问道。

「是也不是。它并不是让你去预测用户的行为,防御性设计是为了避免出错。无论你如何谨慎地去做设计,总会有错误发生,无论你做过多少调研,你计划有多么妥帖,你的产品总会需要一个备用方案来规避问题。」Sarah 说道:「防御性设计,是让你找到可能会出现的问题。」

相信我,你的产品如果给了用户负面的体验,他们绝对不会忘记。

「我还是没明白你的意思……」Jimmy 习惯性地挠头。Sarah 耐心地开始解释:「以开车为例来说明这个事儿吧。当你开车的时候,总会尽量避免道路上各种可能出现的危险情况,比如鲁莽驾驶的大货车,三心二意横穿马路的行人,懵懂无知在路边打闹的儿童,甚至野外窜上马路的野鹿,等等。同样的,作为设计师,我们需要预料到可能会出现的问题,以及始终保持专注来修复这些问题。这样我们就不会破坏整个用户体验。我们要有良好的防御性的设计意识,维持住体验,改善体验。」Sarah 说到这个地方的时候,Jimmy 感觉她身上散发着某种光芒。

然后 Sarah 起身,带着 Jimmy 回到他的工位。「怎么样,这些东西你都记下来了吗?」Sarah 打趣地歪着头看着低着头还在琢磨的 Jimmy,如同大男孩一样的 Jimmy 惊讶地抬头问道:「什么意思?这就是全部嘛?难道只有这些?」

Sarah 呼出一口气,微笑着对 Jimmy 说道:「好了好了,设计原则、规则、规范、技巧有太多,可是对于每个人,每个公司而言,都有属于自己的一套方法和策略。你可以尽兴地去探索,但是即使你不知道全部,也可以借助你所熟知的几个原则和策略,拿出足够优秀的设计。我把我最熟悉的、掌握地最娴熟、体会最深刻的几个原则分享给你,它们足以帮你开启一条走向好设计的道路,我觉得你要是真的体会到了,就已经能够拿出比别人更好的东西了。其他的设计原则,只要你有耐心和时间,还可以继续探索。该工作啦。」

尾声

就像 Sarah 说的,设计原则太多了,谁又规定死了具体有几条呢?每个人心中的哈姆雷特都不一样,每个人眼里的哈利波特又何尝是一样的呢?

最重要的问题在于,许多人知道原则,却并不会在设计项目当中运用它们。洞悉每个设计项目当中的重点,了解客户的需求,明白首要的设计目标,在产品和用户之间,找到平衡点,用心地思考,利用好设计原则这一利器。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

C#-XML基础 使用浏览器检查手写的xml文件是否正确

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

慈心积善融学习,技术愿为有情学。善心速造多好事,前人栽树后乘凉。我今于此写经验,愿见文者得启发。



  •    .NET Framework : 4.6.1
  •                           ide : visual studio 2017 community
  •                             os : win7 x86_64
  •            type setting : markdown
  •                         blog : https://blog.csdn.net/yushaopu
  •                     github : https://github.com/GratefulHeartCoder


xml file - 正确的文件

<?xml version="1.0" encoding="utf-8"?> <cultures> <taoists count="100" comment="good-t"> <book> <name>道德经</name> <author>老子</author> </book> <book> <name>文始真经</name> <author>关尹子</author> </book> </taoists> <buddhism count="321" comment="good-d"> <book> <name>金刚经</name> <author>释迦牟尼</author> </book> <book> <name>地藏菩萨本愿经</name> <author>地藏</author> </book> </buddhism> </cultures>
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

使用浏览器进行校验

这里写图片描述


xml file - 错误的

<?xml version="1.0" encoding="utf-8"?> <cultures> <taoists count="100 comment="good-t" <book> <name>道德经</name> <author>老子</author> </book> <book> <na>文始真经</name> <author>关尹子</author> </book> </taoists> <buddhism count="321" comment="good-d"> <book> <name>金刚经</name> <author>释迦牟尼</author> </book> <book> <name>地藏菩萨本愿经</name> <author>地藏</author> </book> </buddhism> </cultures>
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

使用浏览器进行校验

这里写图片描述


感想

xml文件挺常用的,用程序自动生成的xml文件最好,引号和尖括号等标点符号肯定是全的。把事情交给擅长它的人去做。知人善任!

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

腾讯实战案例!设计师如何从零开始做一款H5?

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

随着消费升级的步伐,商家总结出在带动消费能力上小孩>女人>宠物>男人的规律,爸爸们作为商家最不重视的一个角色,该如何在父亲节以爸爸为主角制作一款 H5 呢?

一、项目背景

手机充值作为一个日活数千万的工具型产品,亲密充作为多号码充值的首要场景,对话费充值的生态与成长起到至关重要的作用。未来,在新用户增速放缓环境下,发挥亲密充功能沉淀的用户充值关系,将成为我们新的探索方向。

所以此次在父亲节进行发力,制作一款可以对手机充值亲密充有拉动作用的 H5 品宣。

相对于每年母亲节的声势浩大,但是一到父亲节世界就都安静了。这是机会也是挑战,机会在于因为父亲节平均声量较小,所以产出较容易被大家所看到,同时也面临着关注度不够的客观情况的挑战。

二、创意来源

这个用户的状态反映了许多人父亲节送礼物的常态,送来送去好像什么都不合适,最终还是充了一笔话费,这恰好也是此次话费充值父亲节品宣的落脚点。此次品宣的雏形就初现了,一个在老家缺少关心的空巢父亲与一个在外地工作费尽心思送礼物的儿子,他们之间发生的火花。

但若单单如此,则略显单调,如何增加趣味性与可玩性呢?

  • 趣味性:配音的趣味性来源于剧本的趣味性与声音的趣味性,剧本的趣味性可以在剧本中增加各种各样的梗,声音的趣味性可以联想到各地的方言。那么选择哪些地区的方言显得尤为重要,为了覆盖更多的地区,我们选择了中国较有特色且差异较大的地区的方言,分别是江浙沪、两广、陕西、东北、中原、四川,这些地区的方言既有识别性,又有一定的喜剧效果。
  • 可玩性:在采用选择题的互动方式,模拟儿子为父亲选择礼物,让用户深度参与其中。

确定了主题后开始具体着手项目具体制作,由于第一次制作剧情动画、配音与答题三者相结合的故事性交互 H5,下面会每一步说明,我们在这些地方都是怎么做的。

三、剧本编写

剧本是故事性交互 H5 的重中之重,也是其对用户是否吸引的关键因素,若缺乏吸引力用户则无法到达最后看到品牌曝光,一个剧本最基本的需要一个通顺且合理的剧情,更高的要求是要充分利用用户好奇心,获取用户注意力,完成品牌与功能的曝光。按照写文章的方法,一个饱满的剧本需要有三部分组成。

  • 虎头:通过一个最常见也是最能引起共鸣的场景——也就是爸爸给儿子打电话,引出剧情;
  • 猪肚:用搞笑与接地气的父子对话持续吸引用户,同时选择题带给用户参与感;
  • 凤尾:通过剧情引导出,一个父亲的日常状态,对孩子的要求无非是想要日常的关心已足够,最后引出品宣 slogan 点题,同时曝光亲密充入口,引导绑定与充值。

四、剧本配音

具体的配音工作交给配音外包商就好,我们要做的就是对最后效果的把控。

  • 配音剧本:需要提前写好剧本,方便演员配音,同时增加可控性,六种方言需要找相应的方言同学在普通话剧本的基础上一一编写成方言剧本;
  • 音效剧本:BGM 风格、按键音、铃声音效等等,可以用表格列出交予外包商也方便后期核对;
  • 挑选演员:有些年轻配音演员可以配出老年音色,但是整体语感不及年龄较大的配音演员来的自然和谐。

五、配音与动画相匹配

首先要了解匹配原理,为了节省开发时间与资源,六种方言动画全部采用同一种帧数与时间,所以需要匹配每一句的配音时长。

配音时长可以通过三种方法控制:

  • 在剧本阶段,控制每句话的内容与字数保持大体一致。
  • 在配音阶段,备注配音演员进行时长控制。
  • 在后期阶段,通过后期软件的加减速对每句话时长进行匹配。

六、人物风格设定

确定好玩法流程后,进入视觉阶段,这次整体的设定是不同区域的爸爸形象,要表现出各区域的特色,结合好配音,才会达到比较理想的效果。

在人物的刻画上,视觉是有很多表现形式的,但会根据整体方案的气质去选择合适的视觉呈现。由于这次的方案会有人物配音,为了使整体效果更自然,更接近用户的想象,加上对产品用户群的定位,我们摒弃了低龄卡通的设计方向,在人物设计上选择了写实的设计风格,更符合用户心理对父亲这个严肃、严谨的心理印象。

结合对话的内容以及动画的表现形式,在细节刻画颜色搭配上增加复古的味道,使人物更活泼不呆板将字体图形化设计,结合中国元素,提炼各省市的简称加上有特点的人物设计,能更快速的帮用户选择以及增加亲切感,以下就是各区域的爸爸形象设计,有没有一款打动你呀。

七、主视觉风格设定

人物的设定出来后,主页面的视觉风格就比较好把控了,复古的老式画报风格,是一个很好的选择~既能突出人物形象,又能把内容很好的划分整合。

板式设定:

主页面整体视觉风格确立以及版式布局,画面主体还是以人物形象为主,配合动画让整个画面更有动感,强调打电话的动作,更贴近产品。

在动画的设计上,也是遇到了很多困难,因为6个区域人物分为独白、对话、听电话3个部分的动画,而为了防止图片过多文件过大每个动作都要控制在6/7帧的范围内,又要保证形态的自然有趣,又要能对上字幕配音。

这里的难度非常非常的大,需要每个步骤都配合的刚刚好,非常感谢开发哥哥耐心打磨,最后的呈现还是很满意的。

动画效果,页面过多就选一部分进行展示:

八、活动效果

最后整体数据效果还是比较理想,用户完成全部选项占比整体 UV 34.89%,说明 H5 内容对用户吸引度较高,能够用内容本身吸引用户到达广告落地页,完成运营目标。也带来较高的亲密充数据,相较平时有显著提升,给亲密充带来绑定与充值。

九、结语

第一次制作配音动画相关的运营 H5,制作初期既期待又紧张,中间也遇到了几次看似无法逾越的难题,最终呈现结果也还较为满意。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

Airbnb设计副总裁:设计的困境与出路

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

Alex Schleifer 是 Airbnb 的设计副总裁。在加入 Airbnb 之前,他曾在 Say Media 担任设计创意部高级副总裁。他在这篇文章中分享了目前设计行业在发展中存在的一些问题与挑战,并分析了背后的原因,同时还分享了解决问题的方法以及打造一个设计友好型公司的三大秘诀。

我的设计师同仁们,我发现我们进入设计这个行业都是非常偶然的。以 Airbnb 的设计团队为例,在 Airbnb 目前的设计团队的设计师里,有人之前是做图书馆管理员的,有人之前是技工,还有人之前是寿险代理或理疗师的。总之在成为设计师之前,他们从事过的职业是五花八门,做什么的都有。由于他们内心是喜欢创意方面的工作的,这推动他们最终走上了设计这条道路。我对这一切是非常欣慰的,然而我总会忍不住去想,究竟还有多少有设计天赋的人才最终没能走上设计这条职业道路。我知道未被挖掘的设计人才非常多,这也是我们现在想招聘优秀的设计师如此艰难的重要原因之一。

Airbnb 以设计驱动型文化著称,公司的两位联合创始人也都毕业于闻名全球的设计学院:罗德岛设计学院,对于这样的一家公司,想招聘优秀的设计师都非常难,你可能会觉得难以置信,但事实确实如此。其实不光是 Airbnb,我曾经和包括 Apple、Google 和 Facebook 在内的很多非常注重设计的大公司高管都交流过,他们也同样面临类似的问题。现在看似是没有足够多的设计师满足市场需求,设计师人才供不应求。早期创业公司对这个问题应该感触更深。每周,我都会从拥有很好发展前景的创业公司或中等规模公司的人那里听说他们正在为招不到设计师而发愁。

即使设计不是公司最重要的部门,要想让公司、尤其是资金资源有限的创业公司坐着等设计师在自己需要的时候自动出现是不现实的。如果我母亲不是一位坚信设计是能成为一个职业的艺术家的话,我可能也不会进入设计师这个行当。能通往设计师的路径有很多,设计师的角色也千变万化。如果设计师没有一个清晰的职业发展通道的话,要想找到下一代优秀的设计人才,我们依然只能靠意外的好运气。

在各个行业的公司能为设计师从业者创造一种融洽的工作环境和清晰的职业发展通道之前,有必要和大家分析一下目前阻碍设计行业发展的几大主要挑战和障碍。

一、主要挑战和障碍

1. 缺乏对设计全面而深入的理解

在设计行业之外,有些人会知道一点 UI 和 UX,但总的来说,相比大众对产品研发的理解,人们对设计是缺乏全面的认识与理解的。电子产品已成为每个人生活中必不可少的一部分,在一个设计能决定交互型电子产品与平台体验的行业,在功能之外还要更加注重整个产品的流畅性。对设计全面而深入的理解有助于设计师走出自己的小世界,从而打造一个更伟大的产品。

2. 缺乏标准化的组织架构

工程技术和产品管理团队的组织架构非常清晰,也有清晰明确的汇报体系,相比而言,设计师团队的组织架构形式各异。有的公司采用代理模式,在这种模式下,设计师会不停地从一个项目转向下一个项目,为全公司提供设计支持,很多公司都会默认采用这种模式。有的公司的设计师会全程参与产品的所有开发过程,从最开始到完成,这种模式下,设计主管和产品主管、工程主管一样向同一个领导汇报。还有一些公司,它的设计团队会向产品、工程或市场团队主管汇报工作。在设计领域,我们越早建立一个行业统一、清晰流畅的组织结构,那么在公司内部就越容易打造一种设计文化和清晰的设计师职业发展通道。

3. 缺少被大众熟知的设计师行业的榜样

在工程技术领域,大家熟知的行业榜样很多,包括 Bill Gates、Mark Zukerberg 和 Marissa Mayer 等。在产品领域,也有 Sundar Pichai、Reid Hoffman 和 Kevin Systrom 等众多行业榜样。如果让大家列举一些知名的设计师出身的人担任公司创始人或高管的例子,我敢肯定,在设计圈之外,除了 Jony Ivee 和 Yves Béhar 这极少数名字外,大家应该列不出其他人了,而这两个人还都是工业设计师。当然,我们并不是为了树立这些行业榜样而树立行业榜样,但是我们是可以能从为大众熟知的行业榜样的多少来了解设计师行业的是否成熟,以及设计师的职业发展通道是否清晰畅通。只有有足够多的行业榜样,设计师行业才能得到更好地发展。

如果一个国家全由设计师构成,那么我们会将哪个设计师的头像放在这个国家的法定货币上呢?

二、三种方法助你打造一个设计友好型的公司

设计师行业所面临的问题挑战和设计师的薪资待遇没有多大关联,它主要和设计师团队在公司里的位置有关系。对设计师的需求一直在那里,但设计师的职业发展通道却一直不清晰。下面就给大家分享几种方法,所有公司都可以采用这些方法去吸引优秀的设计人才,设计主管也可以更好地带领大家前进。

1. 从一开始就融合工程、产品和设计

在一些科技公司,包括 Airbnb 在内,工程(engineering)、产品(product)和设计(design)团队是捆绑在一起的,它们三者通常被合称为 EPD。以设计团队来说,团队里负责各个领域的所有设计师都会参与到从产品开始开发到发布的全过程。如果一个项目组负责一项新功能开发、产品营销或用户反馈,那么工程、产品和设计这三个团队都会分别至少指派一个人去参与其中。这种三者联合不仅能聚集产品的主要开发负责人,同时有助于所有三个团队成员职业发展通道的正规化。

这种三者融合的团队度就像下面这个三条腿的凳子,三条腿分别代表开发产品所需的三个不同团队,即工程、产品和设计团队。只有从产品开发伊始就做到三条腿协同并进(如Figure A图),那么在公司规模扩张的过程中才能保证三条腿一样长(如Figure B 图)。

我发现,从一开始就在工程、产品和设计三者的协调平衡方面做得比较好的公司一般都会做以下两项工作:

  • 从公司创立之初就招聘一位设计主管。稍后阅读应用 Pocket 在这方面就做得比较好。在 Pocket 刚创立的时候,公司创始人 Nate Weiner 自己虽然拥有一定的工程和设计经验,但在设计方面却缺乏敏锐度和洞察力,所以很快就招聘了设计师 Nikki Will 加入公司,他后来晋升为公司的设计主管。正是得益于 Will 在产品设计方面的贡献,Pocket 从一开始就打造了一个非常优秀的产品。
  • 让设计团队的规模和工程团队、产品团队的规模同步扩张。很多公司通常在产品经过前期的几个开发阶段后再开始招聘设计师去做视觉,而非从一开始就让设计师参与其中。设计工作如果和产品开发工作不同步,这不仅会让产品在 UI/UX 方面的决策复杂化,同时也不利于营造一个多方协同的产品开发团队氛围。那么该怎么做呢?在一开始招聘工程师和产品经理的同时就招聘设计师。你需要的设计师人数可能没有工程师那么多,不过你可以一开始就确定一个设计师对工程师的人数比例,我建议是在1:6至1:8之间。不同的公司可以根据自己产品的实际情况进行适当调整。

如果你不在一开始遵循这个原则,那么最后你只能做出一个蹩脚的产品,就会像下面的凳子那样不稳固。如果产品开发之初一个设计师都没有,那么你的产品就会像下面 Figure C图里的凳子一样,少一条腿。如果你在产品已经开发到一定阶段且比较成熟之后再让设计师参与,那么你做出的产品可能就会像 Figure D图中的凳子那样,三条腿不一样长。

要想避免自己的产品像上面的凳子那样蹩脚,最好的方法就是从一开始就同时打造三条腿(工程、产品和设计)。在实际操作中,要从一开始就招聘设计、工程和产品主管,三者向同一个人汇报工作。以 Airbnb 为例,Airbnb 的设计、工程与产品主管是平级的,而且都直接向创始人汇报工作。其实不光是工程、产品和设计部门的主管需要紧密协同,在涉及到每一个具体的项目时也需要三个部门的协同配合。

一款产品主要由以下三个要素来定义的:商务、代码与像素。在所有的产品决策中,要让每一个要素都有发言的机会。

在 Airbnb 的设计团队,我们采取了以下几项措施来明确设计师是能够引导公司发展的,同时让设计师能有一个清晰的职业发展通道。

2. 为资深设计师开辟一条清晰的职业发展路径

公司里的资深员工尤其是资深设计师所面临的一个问题是,随着他们在所负责的具体工作领域变得越来越资深,他们就会触碰到职业「天花板」,然而处于相应管理位置的人员却不会遇到这个问题。一般来说,这和他们的能力、工作表现或影响力没有太大关系,主要是因为他们掌握的技能组合是封闭、无法转移共享的。我们在 Airbnb 主要采取以下几项措施来抑制这种负面影响:

  • 为所有团队都设置统一的职位头衔。不管是工程、产品、设计还是市场营销人员,都采用统一的头衔设置。所有团队都使用相同的职位结构。
  • 将最资深的设计师晋升到最高职位,但不要让他们成为管理人员。提升至管理岗位并非一种晋升,而是一种跨界。让资深设计师能在自己的职业生涯中得到持续晋升,但又不会陷入与设计无关的管理琐事中。

只要能将上面两种做法结合,那么你就能提高下面这个地方的表现:

  • 设计师留存率。在以技术工艺为基础的设计或工程职业领域,你可以鼓励他们持续增强自己的核心竞争力和才能,而不是强迫他们转型走上管理岗位。一旦发生迫使转型的情况,很多人就会选择离开公司。
  • 让所有团队成员都能共同成长与发展。允许资深设计师参与重要的项目和重大的决策中,这样他们就能与工程师和产品团队成员共同成长,而不是让他们仅仅参与那些无法充分发挥自己才能的项目上。
  • 内部机动性与流动性更强。通过设置统一头衔和参与更多重要项目,设计师能够慢慢学到很多工程和产品领域的其它专业的知识,随着积累的跨领域知识越来越多,基于自己过去的项目经验、爱好和技能水平,设计师可能尝试公司内的其他职位。

3. 发现和使用新工具,创建一个自己的设计术语库

我承认,直到今天我依然无法摆脱对 Photoshop 的依赖。使用 Photoshop 已经成为我的一种习惯,就好比是设计师们曾将铅笔看做是他们的手的延伸一样。有些工具我们已经使用了20年,我们通常会根据自己的习惯和肌肉记忆来选择使用的软件,所以新工具能否适应设计师的使用习惯是至关重要的。

在新工具挖掘方面,我们有自己的实验人员,但最好能有人专门负责尝试和整合新设计工具。这就是为什么 Airbnb 会在设计运营团队上进行了大量投入,这个团队主要负责帮助设计团队在公司扩张过程能能更地开展工作。设计运营团队要确保设计工具能和工程、产品及其它部门使用的工具保持协调。

即使你现在还无法组建一支专门的设计运营团队,你同样可以采取一些小措施去进行工具整合和结构调整,让设计师更加便捷地工作。要从最基础的层面进行整合,尽可能统一大家的使用规范和语言。这不仅适用于开发一个设计系统,同时还适用于一些更常规的工作中,如何为文件命名、在哪里存储文件、如何管理版本等等。所有人都能遵循同一个规范要远比找到一种完美的规范重要得多。

这种规范与整合也为打造一套属于我们自己的设计语言系统(DLS)奠定基础。DLS 系统不光是一个视觉选择和设计模式语言,同时也是一个设计师和开发者协同开发产品的系统。DLS 的主要目的之一就是让设计师和开发者共同定新功能组件,一旦定义之后,这个组件名称将会同时应用在 iOS、安卓和 web平台上。尽管这些功能组件是不同开发人员在不同开发环境下开发的,但他们的名字都一样,而且它们对公司所有人而言都有同样的核心概念。

△ Airbnb的设计语言系统组件页面

这个系统打造完成之后,公司就可以在所有部门中打造一个共同的术语库。这不仅能提高沟通效率,同时也能让每一个人都能对公司的所有设计流程有更清晰的了解。Airbnb 内部开发的一些产品,如原生组件浏览器和 Airshots,能让公司的任何员工瞬间获取上千个设计界面。所有同事都可以在我们支持的任何语言与设备上看到任何应用版本的界面图。对于设计师,这有助于消除设计和最终产品之间的抽象层,最大限度减少设计师的困惑与混乱。

工程师通常都会快速更新自己所使用的工具与语言,设计师在这方面向工程师学习的东西有很多。工程师之所以快速更新所使用的工具,这是因为他们需要在竞争日趋激烈的市场中更快地发布代码。有些公司有上千个工程师,他们就像一群鱼一样在一个共享代码库里游,并可根据同伴的状况进行调整姿势。作为设计师的我们,现在在使用工具方面还没有达到这种同步性,要想达到这种同步性,首先需要尝试市场上现有的工具,如果找不到自己需要的工具,也不要担心需要自己开发。

一个行业标准的术语库有助于推动我们设计师的职业发展,而不是会限制它。在 Airbnb,除了统一规范我们设计界面的方式之外,我们还统一了我们工作语言。未来,我们希望公司内部讨论产品设计的方式在 Airbnb 外部同样适用,也希望 Google 和 Facebook 这样的巨头联合起来共同打造一个设计行业通用的术语库。

在字典里,每个字都有一些特定的含义,而诗歌所需要的所有要素都蕴含在其中。

可能是因为设计是一种视觉效果工作,所以我们很容易将其想象成一种唯美浪漫的工作。设计师往往很容易陷入色彩、字体、动画与图案中,而忘记设计是可以成为公司核心部门,并可以有更好的职业发展。在电影行业里,每当有新工具出现,如电影制作流程或硬件升级,电影行业都会专门召开一次会议对新工具展开讨论。如今,我自己也只参加那些不光讨论灵感与创意过程,同时还会讨论新出现的设计工具的会议。

在不限制设计师创作自由的情况下,设计部门最好有一个清晰的标准流程。在我看来,一位优秀的设计师是不仅能够和工程、产品部门同事一起让整个产品开发过程更加流程,同时还能积极学习工程、产品方面的专业知识。我发现能这么做的设计师少之又少,然而这是非常必要的,为了公司,也为了自己的职业发展。

在设计创意魔法的背后有工具在起作用,未来的设计需要同时依赖这两者。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

 

React Native第三方组件库汇总

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

移动跨平台框架React Native经过4年的发展,其生态已经变得异常丰富,在使用React Native开发项目的过程中,为了提高开发效率,我们经常会借鉴一些使用使用率比较高的开源库,根据大众的需求,对这些使用较高的 React-Native UI 库,我们做一个简单的总结和归类,方便大家更好地入门 React Native。

本文只是收集了一些常见的UI库和功能库,除了上面介绍的知名第三方库之外,还有很多实现小功能的库,这些库可以大大的提高我们的开发效率,并且可以在此基础上进行二次开发。并且欢迎大家关注我的《React Native移动开发实战》,第二版修改版会再近期再版,欢迎持续关注。

第三方库

UI套件

1, NativeBase

NativeBase 是一个广受欢迎的 UI 组件库,为 React Native 提供了数十个跨平台组件。在使用 NativeBase 时,你可以使用任意开箱即用的第三方原生库,而这个项目本身也拥有一个丰富的生态系统,从有用的入门套件到可定制的主题模板。 
NativeBase 项目地址: https://github.com/GeekyAnts/NativeBase 
入门学习地址: https://reactnativeseed.com/

2,React Native Elements

React Native Elements是一个高度可定制的跨平台 UI 工具包,完全用 Javascript 构建。该库的作者声称“React Native Elements 的想法更多的是关于组件结构而不是设计,这意味着在使用某些元素时可以减少样板代码,但可以完全控制它们的设计”,这对于开发新手和经验丰富的老手来说都很有吸引力。 
React Native Elements 项目地址: 
https://github.com/react-native-training/react-native-elements 
React Native Elements 示例项目: 
https://react-native-training.github.io/react-native-elements/

3,Shoutem

Shoutem也是一个 React Native UI 工具包,由 3 个部分组成:UI 组件、主题和组件动画。该库为 iOS 和 Android 提供了一组跨平台组件,所有组件都是可组合和可定制的。每个组件还提供了与其他组件一致的预定义样式,这样可以在无需手动定义复杂样式的情况下构建复杂的组件。

项目地址:https://shoutem.github.io/ui/

4, UI Kitten

UI Kitten这个库提供了一个可定制和可重复使用的 react-native 组件工具包,该工具包将样式定义移到特定位置,从而可以单独重用组件或为组件设置样式。通过传递不同的变量,可以很容易地“动态”改变主题样式。 
项目地址: https://github.com/akveo/react-native-ui-kitten 
项目体验地址:https://expo.io/@akveo/ui-kitten-explorer-app

5,React Native Material UI

React Native Material UI是一组高度可定制的 UI 组件,实现了谷歌的 Material Design。请注意,这个库使用了一个名为 uiTheme 的 JS 对象,这个对象在上下文间传递,以实现最大化的定制化能力。

React Native Material UI 项目地址: 
https://github.com/xotahal/react-native-material-ui 
包含库组件及示例的清单: 
https://github.com/xotahal/react-native-material-ui/blob/master/docs/Components.md

6,React Native Material Kit

React Native Material Kit是一套很有用的 UI 组件和主题,实现了谷歌的 Material Design。不过需要说明的是, React Native Material Kit在2017 年 12 月之后就停止维护了。 
项目地址: https://github.com/xinthink/react-native-material-kit

7,Nachos UI

Nachos UI 是一个 React Native 组件库,提供了 30 多个可定制的组件,这些组件也可以通过 react-native-web 在 Web 上运行。它通过了快照测试,支持格式化和 yarn,提供了热火的设计和全局主题管理器。 
项目地址: https://github.com/nachos-ui/nachos-ui

8,React Native UI Library

Wix 工程公司正致力于开发这个进的 UI 工具集和组件库,它还支持 react-native-animatable 和 react-native-blur。这个库附带了一组预定义的样式预设(转换为修饰符),包括 Color、Typography、Shadow、Border Radius 等。 
项目地址: https://github.com/wix/react-native-ui-lib 
这里写图片描述

9,React Native Paper

React Native Paper是一个跨平台的 UI 组件库,它遵循 Material Design 指南,提供了全局主题支持和可选的 babel 插件,用以减少捆绑包大小。 
React Native Paper 项目地址: 
https://github.com/callstack/react-native-paper

Expo 示例应用程序: 
https://expo.io/@satya164/react-native-paper-example

10,React Native Vector Icons

React Native Vector Icons是一组 React Native 的可定制图标,支持 NavBar/TabBar/ToolbarAndroid、图像源和完整样式。它非常有用,而且被数千个应用程序以及其他 UI 组件库(如 react-native-paper)所使用。 
项目地址: https://github.com/oblador/react-native-vector-icons 
示例项目:https://oblador.github.io/react-native-vector-icons/

11,Teaset

Teaset是一个 React Native UI 库,提供了 20 多个纯 JS(ES6)组件,用于内容显示和动作控制。虽然它的文档不够详尽,但它简洁的设计吸引了我的眼球。 
项目地址:https://github.com/rilyu/teaset

其他库

1,antd-mobile

antd-mobile是由蚂蚁金融团队推出的一个开源的react组件库,这个组件库拥有很多使用的组件。 
这里写图片描述 
项目地址:https://github.com/ant-design/ant-design-mobile

2,react-native-button

react-native-button是github上一个开源的button组件,目前仍保持比较快的更新频率,提供比较丰富的Button功能。 
项目地址:https://github.com/ide/react-native-button

3,react-native-image-viewer

react-native-image-viewer是一个图片大图浏览的库,点击图片可以放大缩小。 
这里写图片描述 
项目地址:https://github.com/ascoders/react-native-image-viewer

4,react-native-image-picker

react-native-image-picker是实现多个图像选择、裁剪、压缩等功能的第三方库,可以使用该库实现图片、照相等操作。 
这里写图片描述 
项目地址:https://github.com/react-community/react-native-image-picker

5,react-native-picker

react-native-picker是React native最常见的滚轮控件,可以实现单滚轮、双滚轮和三滚轮效果。 
这里写图片描述 
项目地址:https://github.com/beefe/react-native-picker

6,react-native-scrollable-tab-view

react-native-scrollable-tab-view是一个带有TabBar和可切换页面的控件。,在Android中可以看成是ViewPager和TabLayout的结合。 
项目地址:https://github.com/happypancake/react-native-scrollable-tab-view

7,react-native-app-intro

react-native-app-intro是实现引导页的库,当然开发者也可以自己手动实现。

项目地址:https://github.com/fuyaode/react-native-app-intro

8,3D Touch

3D Touch是实现React native 3D Touch的库,可以用此库很方便的实现3D Touch。效果如下: 
这里写图片描述 
项目地址:https://github.com/jordanbyron/react-native-quick-actions

react-native-snap-carousel是可以实现复杂效果的轮播图库,实现的效果如下: 
这里写图片描述 
除此之外,还可以实现Galley效果等多种效果。 
项目地址:https://github.com/archriss/react-native-snap-carousel

10,react-native-blur

react-native-blur是专门用于实现毛玻璃效果的。 
项目地址:https://github.com/react-native-community/react-native-blur

11,react-native-actionsheet

react-native-actionsheet是实现底部弹框的组件,可以在Android和iOS平台上共用,当然也可以自己封装实现。 
这里写图片描述 
项目地址:https://github.com/beefe/react-native-actionsheet

12,react-native-popover

react-native-popover是React Native开发中常见的弹出提示框操作,其效果如下图所示: 
这里写图片描述

13,react-native-charts-wrapper

图表在移动开发中应用的场景可谓非常多,这里介绍一款使用的比较多的库。 
这里写图片描述
项目地址:https://github.com/wuxudong/react-native-charts-wrapper

14,react-native-spinkit

react-native-spinkit是一个很炫的加载动画第三方库,可以根据实际情况定制加载的动画。 
这里写图片描述 
https://github.com/maxs15/react-native-spinkit

15,Facebook Design-iOS 10 iPhone GUI

Facebook Design-iOS 10 iPhone GUI是iOS 10 公开版的 GUI 元素模板,包括 Sketch、Photoshop、Figma、XD 和 Craft。 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档