如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

一、添加表頭：

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. { 
3.      model->setItem(i,0,new QStandardItem("2009441676")); 
4.         //設置字符顏色 
5.      model->item(i,0)->setForeground(QBrush(QColor(255, 0, 0))); 
6.         //設置字符位置 
7.      model->item(i,0)->setTextAlignment(Qt::AlignCenter); 
8.      model->setItem(i,1,new QStandardItem(QString::fromLocal8Bit("哈哈"))); 
9. }

復制代碼

四、刪除行：

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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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）：學習干擾了現存記憶。

這個正好跟上面相反，二手不斷培養現在的使用習慣，漸漸的就忘記了上一版的路徑。

四、怎樣預防干擾

要想預防干擾，就要避免輸出思考過程中相互沖突的設計。知覺的干擾效應，通常是因為信息的傳達過程中有歧義，或是因為把互相干擾的元素結合在一起。要把干擾效應降到，首先要求設計師用準確的設計語言傳達信息，如果這樣還是無法讓用戶很好的理解，其次可以考慮利用文字或者引導來告知用戶。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

一、 前言

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)

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

{
    "browser": "chrome64"
}

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

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

為了幫助設計師提升基礎審美。每周我們會挑選全球優秀拔尖的設計，幫你解讀每個設計背后的思考！讓基礎審美養成設計好習慣的第一步。

------------------任何設計問題添加微信：uiskyss---------------------------

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

我有一個朋友，名字叫做 Jimmy，這的確是一個很普遍的名字。當我認識他的時候，他正供職于一家名為 Shmuckle 的公司，而他正是這家公司的設計師。和所有的設計師一樣，他日思夜想夢寐以求的，是成為一名著名的設計師，而喬布斯的經歷對他有著不可磨滅的影響。Jimmy 和很多設計師一樣，著迷喬教主。好在 Jimmy 的崇拜并不是停留在嘴上，而是身體力行，力圖在公司里面推行好的設計。在 Jimmy 的眼中，好的設計應該是直觀的、創新且令人愉悅的。

當然，故事的發展如果總是一帆風順就沒有意思了。Jimmy 果然一如正常的劇情推進……他碰到障礙了。

這一次，Jimmy 正在執行一個重要的項目，這個項目的成敗將會直接影響到他的職業生涯。這次的任務，他需要為他們公司的一款產品，重新設計整個控制面板。而就在這次的項目當中，Jimmy 發現他沒有辦法拿出一套足夠優秀的解決方案。好在他還有 Plan B，那就是重新找靈感。Jimmy 開始重新播放他最喜歡的設計類的視頻，閱讀曾經給他啟發的文章，收聽其他同行所開設的播客，以期在其中找到感覺或者靈感。

可惜，靈感并沒有如期而至。局面尷尬了。

就在此刻，援手到了。Sarah 是公司的資深設計師，正巧這個時候路過 Jimmy 的工位，看到了 Jimmy 糾結掙扎的樣子。這是多么熟悉的場景啊，她早年入行的時候，同樣經歷過這樣的狀態，為求一好設計而痛苦不已。如今，她已經能夠輕松駕馭不同的需求，足以應對復雜多變的設計項目。

「Hey Jimmy，老遠就看到你正在揪頭發，看樣子正在構思新設計吧，瞧你這個狀態，應該不太順利吧？」

「誒，客戶說讓我給他們重新設計整個控制面板。他們覺得不夠好使，希望新的控制面板能夠更好展示信息，提升效率，最好再把幾個比較明顯的可訪問性問題給解決一下。但是我怎么設計……都覺得不對。客戶那邊有不少人參與了測試，有人覺得挺棒的，有人又非常討厭，還有一部分直接說還得接著改?，F在，我覺得無能為力，不知道要怎么弄了?！笿immy 保持著撓頭的姿勢，盯著屏幕說道。

「別糾結，」Sarah 微笑道：「如果一直盯著問題解決問題是常常會陷入這樣的困境的，解決方案其實并不復雜，你需要從根子上來想辦法。只要讓整個設計方案貼合規則基礎穩固了，問題就會迎刃而解了。其實，關鍵也就是幾個基本的設計原則?！?

「雖然這話經常聽到，但是真的能行？」Jimmy 狐疑地盯著 Sarah，思忖兩秒感覺到大姐頭這是要傳授秘籍，便摸過小本子，端正坐姿，準備做筆記：「那么，都有哪些原則呢？」

Sarah 拍了拍 Jimmy 的肩膀，端了杯咖啡，說道：「下樓散步吧，咱們邊走邊聊?！?

「其實，在產品完成之后，是需要基于幾個基本的原則來重新審視和調整設計的?！筍arah 喝了一口咖啡，慢慢地開始說。

保持清晰

Jimmy，如果腦子里面的思路沒有梳理清晰，很難做出條理清晰的產品的。因此，在設計產品之前，先應當消除思維中的混亂，有幾個事情，在設計的過程中要始終保持關注：

• 業務目標，客戶的問題和需要的功能則會催生設計，而這幾個因素之間是存在關系的。
• 永遠不要為了好看而犧牲功能。
• 下一步要做的事情始終要是不言自明的。
• 對于最重要的內容，要借助負空間、色彩、字體、圖形和其他的 UI 元素來進行突出展示的。
• 各種尺寸的文本都應該清晰可見。
• 圖標應該而銳利。
• 除此之外，要讓設計保持微妙而恰到好處。
• 通過設計，你的用戶應該本能的知道他在哪里，以及該做什么。

產品的外觀最終都是在清晰的設計（或者不夠清晰的設計）之下的副產物。清晰的設計意圖，最終會轉化為清晰的產品設計。——Massimo Vignelli

「我記得 Massimo Vignelli 在他的《The Vignelli Canon》中寫道，一個混亂而復雜的產品始終是源自于制造者本身的混亂，說明這個人本身內心深處心態復雜而想法混亂。」Sarah 說道。Jimmy 此刻若有所思。

可操作的界面

「接下來的這一點也同樣很重要。我們設計的數字產品必須清晰，也要專注于當前的任務，一個交互性強、可操作性優秀的 APP 才是用戶所需要的，而要做到這一點，屏幕上的內容應當始終是的，并且始終保持較高的相關性。與此同時，APP  也應當作為用戶意圖的延伸。如果用戶打開了你的 APP，想要解決某個問題，執行某個任務，而你的 APP 做不到這一點，那么情況就很糟糕了?！筍arah 說道。

她停了幾秒鐘，梳理了一下思路，繼續說道：「你看，我們所做的一切都是為了確保我們的方案，能夠在正確的環境中，面對著對的用戶，解決亟需解決的問題。當然，我們要經歷很多次的迭代，才能靠近這一目標?！?

主觀的愿景

「許多設計師和開發者都在說，APP 應該靈活，應該滿足所有客戶的需求。好吧，Jimmy，這些說法都是胡說八道的。但是有一個說法很真實，也需要你時刻謹記：試圖取悅每個人只會帶來無盡的壓力和痛苦，讓你沮喪，失去資源。所以，不要害怕失去一部分用戶，真正需要擔心的是失去愿景和遠見?！?

「一個偉大的而足夠優秀的數字產品，必須始終清楚它到底是服務于誰的。只有牢記真正的用戶，明白他們的需求，才能開發出真正有效的解決方案。最好的數字產品當中，都是藏著愿景的?！筍arah 和 Jimmy 走到了大樓的窗戶附近，看著外面來往的人流，Jimmy 忍不住問到：「那其他的用戶呢？」Sarah 笑著回答：「當我們滿足目前的目標之后，才能顧的上其他的人。我們的目標用戶才是核心，其他的人不喜歡，和我們的愿景不匹配，也不用操心。市場上會有其他的應用或者服務能夠滿足他們，讓他們高興，而我們總是只能身處一個陣營，你不可能什么都擁有?！筍arah 笑著回答 Jimmy 的疑問。

當人們尋找軟件和服務的時候，他們要的并不是功能，他們要的是解決問題的方法，一個和自己相匹配的愿景?！?7Signals《Getting Real》

反饋系統

下一個原則，也是一個很重要的注意事項，那就是反饋。反饋能夠幫用戶確定操作是否執行了，明白結果是否發生，讓用戶明白當前的情況：

• 交互發生時，相應的交互元素應該被凸顯出來
• 進度指示控件應該持續地顯示當前狀態
• 動畫和聲音的加入有助于用戶理解交互的狀態和結果

「我想你應該知道，即使技術如此的進步，人類本身的生物性決定了我們依然是依靠反饋來確知互動的結果和狀態的。我們的身體（視覺或者觸感）需要感受到反饋，再像大腦發出信號，而虛擬的界面背后到底在發生什么，需要全面的交互設計傳遞出來，只有這樣用戶才不會費勁巴拉地去思考之前的點擊或者滑動交互是否操作成功了。反饋給用戶的信息也應該是能夠被輕松理解的，用戶不應該在這個事情上再費勁去思考了。因此，你手邊應該有關于心理學、行為學這類能夠揭示人類思考的圖書，因為它們能夠幫你提升技能?！筍arah 喝了一口咖啡，潤了潤嗓子，帶著 Jimmy 又溜達上樓，回到了辦公室。

善用隱喻

「隱喻——我這里說的并不是文學中的隱喻，」Sarah 又提到了一個看似無用但是經常被說起的概念：「你看，UI界面中的設計元素和交互方式和我們的現實生活中的元素和交互方式是如此的相似，這就是借用隱喻將我們的熟悉的元素和交互都投射到虛擬的數字產品當中。這樣一來，用戶會更快地學會和理解?！?

「正是因為隱喻的存在，現實的經驗和虛擬的交互產生了關聯，用戶交互因此而更加自然地發生。視線隨著被精心設計的布局而游移到重點上，用戶會下意識地點擊被高亮顯示的、和現實按鈕差不多的交互控件，他們還會下意識地在虛擬的屏幕上滑動，在界面之前自然游走。因此，你有必要了解你的核心用戶每天都在使用哪些 APP，他們都是如何交互的。這有助于你吸收經驗，消除不良的體驗，創造舒適的交互，降低學習的壓力，更好地轉化?！筍arah 一邊說著，一邊下意識地模擬著交互并解釋道。

內容的一致性

「接下來我們還是用案例來說明一下，會更容易理解?！拐f著 Sarah 坐到椅子上，并且打開電腦屏幕，說道：「比如我們要做一個日歷，你認為它應該是網格，還是做成列表？」Jimmy 撓頭想了一下，遲疑道：「恩……我們應該堅持使用網格的樣式。它更加緊湊也更加有條理，我說的對嗎？」

「其實這取決于用戶的主要目標是什么。如果這個日歷元素是出現在報告文檔當中，應該是用網格的樣式還是列表的樣式呢？一樣的，這要看情況。我們是否要在每個應用中都使用全局導航？同樣是需要基于上下文情況來決定的。一致的設計不止是表面樣式上的一致，還需要從需求、內容、用戶使用場景和體驗上來保持一致性。如果在特定的情況下，獨特的設計能夠帶來更大的價值，那么這是有意義的，這種特殊情況下不同是有必要的?！筍arah 細心地為 Jimmy 解釋道。

良好的設計，應該是特定語境經過評估后定制的副產物，而不是脫離使用場景而憑空創造出來的，否則，無論多么炫酷都是不合時宜的。——Massimo Vignelli

防御性設計

「最后要說的，是防御性設計?！筍arah 轉身對著 Jimmy，然后說道最后一個規則。

「防御性設計？什么東西？」Jimmy 感覺今天學到了不少，最后這個原則也被他寫到小本子上了?！高@個啊，也就是大家常說的直覺性設計?！筍arah 微微一笑。

「我知道！喬布斯以前就經常說這個概念！」Jimmy 終于找到一個他足夠熟悉的概念，興奮不已。

「可是，你真的知道什么是直覺性的設計么？」Sarah 看著興奮的 Jimmy 賣了個關子。

「預測用戶行為？然后在用戶要執行下一個操作之前幫他解決需求？」Jimmy 狐疑地問道。

「是也不是。它并不是讓你去預測用戶的行為，防御性設計是為了避免出錯。無論你如何謹慎地去做設計，總會有錯誤發生，無論你做過多少調研，你計劃有多么妥帖，你的產品總會需要一個備用方案來規避問題?！筍arah 說道：「防御性設計，是讓你找到可能會出現的問題?！?

相信我，你的產品如果給了用戶負面的體驗，他們絕對不會忘記。

「我還是沒明白你的意思……」Jimmy 習慣性地撓頭。Sarah 耐心地開始解釋：「以開車為例來說明這個事兒吧。當你開車的時候，總會盡量避免道路上各種可能出現的危險情況，比如魯莽駕駛的大貨車，三心二意橫穿馬路的行人，懵懂無知在路邊打鬧的兒童，甚至野外竄上馬路的野鹿，等等。同樣的，作為設計師，我們需要預料到可能會出現的問題，以及始終保持專注來修復這些問題。這樣我們就不會破壞整個用戶體驗。我們要有良好的防御性的設計意識，維持住體驗，改善體驗?！筍arah 說到這個地方的時候，Jimmy 感覺她身上散發著某種光芒。

然后 Sarah 起身，帶著 Jimmy 回到他的工位。「怎么樣，這些東西你都記下來了嗎？」Sarah 打趣地歪著頭看著低著頭還在琢磨的 Jimmy，如同大男孩一樣的 Jimmy 驚訝地抬頭問道：「什么意思？這就是全部嘛？難道只有這些？」

Sarah 呼出一口氣，微笑著對 Jimmy 說道：「好了好了，設計原則、規則、規范、技巧有太多，可是對于每個人，每個公司而言，都有屬于自己的一套方法和策略。你可以盡興地去探索，但是即使你不知道全部，也可以借助你所熟知的幾個原則和策略，拿出足夠優秀的設計。我把我最熟悉的、掌握地最嫻熟、體會最深刻的幾個原則分享給你，它們足以幫你開啟一條走向好設計的道路，我覺得你要是真的體會到了，就已經能夠拿出比別人更好的東西了。其他的設計原則，只要你有耐心和時間，還可以繼續探索。該工作啦?！?

尾聲

就像 Sarah 說的，設計原則太多了，誰又規定死了具體有幾條呢？每個人心中的哈姆雷特都不一樣，每個人眼里的哈利波特又何嘗是一樣的呢？

最重要的問題在于，許多人知道原則，卻并不會在設計項目當中運用它們。洞悉每個設計項目當中的重點，了解客戶的需求，明白首要的設計目標，在產品和用戶之間，找到平衡點，用心地思考，利用好設計原則這一利器。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

慈心積善融學習，技術愿為有情學。善心速造多好事，前人栽樹后乘涼。我今于此寫經驗，愿見文者得啟發。

<?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 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
        

    

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

一、項目背景

手機充值作為一個日活數千萬的工具型產品，親密充作為多號碼充值的首要場景，對話費充值的生態與成長起到至關重要的作用。未來，在新用戶增速放緩環境下，發揮親密充功能沉淀的用戶充值關系，將成為我們新的探索方向。

所以此次在父親節進行發力，制作一款可以對手機充值親密充有拉動作用的 H5 品宣。

相對于每年母親節的聲勢浩大，但是一到父親節世界就都安靜了。這是機會也是挑戰，機會在于因為父親節平均聲量較小，所以產出較容易被大家所看到，同時也面臨著關注度不夠的客觀情況的挑戰。

二、創意來源

這個用戶的狀態反映了許多人父親節送禮物的常態，送來送去好像什么都不合適，最終還是充了一筆話費，這恰好也是此次話費充值父親節品宣的落腳點。此次品宣的雛形就初現了，一個在老家缺少關心的空巢父親與一個在外地工作費盡心思送禮物的兒子，他們之間發生的火花。

但若單單如此，則略顯單調，如何增加趣味性與可玩性呢？

• 趣味性：配音的趣味性來源于劇本的趣味性與聲音的趣味性，劇本的趣味性可以在劇本中增加各種各樣的梗，聲音的趣味性可以聯想到各地的方言。那么選擇哪些地區的方言顯得尤為重要，為了覆蓋更多的地區，我們選擇了中國較有特色且差異較大的地區的方言，分別是江浙滬、兩廣、陜西、東北、中原、四川，這些地區的方言既有識別性，又有一定的喜劇效果。
• 可玩性：在采用選擇題的互動方式，模擬兒子為父親選擇禮物，讓用戶深度參與其中。

確定了主題后開始具體著手項目具體制作，由于第一次制作劇情動畫、配音與答題三者相結合的故事性交互 H5，下面會每一步說明，我們在這些地方都是怎么做的。

三、劇本編寫

劇本是故事性交互 H5 的重中之重，也是其對用戶是否吸引的關鍵因素，若缺乏吸引力用戶則無法到達最后看到品牌曝光，一個劇本最基本的需要一個通順且合理的劇情，更高的要求是要充分利用用戶好奇心，獲取用戶注意力，完成品牌與功能的曝光。按照寫文章的方法，一個飽滿的劇本需要有三部分組成。

• 虎頭：通過一個最常見也是最能引起共鳴的場景——也就是爸爸給兒子打電話，引出劇情；
• 豬肚：用搞笑與接地氣的父子對話持續吸引用戶，同時選擇題帶給用戶參與感；
• 鳳尾：通過劇情引導出，一個父親的日常狀態，對孩子的要求無非是想要日常的關心已足夠，最后引出品宣 slogan 點題，同時曝光親密充入口，引導綁定與充值。

四、劇本配音

具體的配音工作交給配音外包商就好，我們要做的就是對最后效果的把控。

• 配音劇本：需要提前寫好劇本，方便演員配音，同時增加可控性，六種方言需要找相應的方言同學在普通話劇本的基礎上一一編寫成方言劇本；
• 音效劇本：BGM 風格、按鍵音、鈴聲音效等等，可以用表格列出交予外包商也方便后期核對；
• 挑選演員：有些年輕配音演員可以配出老年音色，但是整體語感不及年齡較大的配音演員來的自然和諧。

五、配音與動畫相匹配

首先要了解匹配原理，為了節省開發時間與資源，六種方言動畫全部采用同一種幀數與時間，所以需要匹配每一句的配音時長。

配音時長可以通過三種方法控制：

• 在劇本階段，控制每句話的內容與字數保持大體一致。
• 在配音階段，備注配音演員進行時長控制。
• 在后期階段，通過后期軟件的加減速對每句話時長進行匹配。

六、人物風格設定

確定好玩法流程后，進入視覺階段，這次整體的設定是不同區域的爸爸形象，要表現出各區域的特色，結合好配音，才會達到比較理想的效果。

在人物的刻畫上，視覺是有很多表現形式的，但會根據整體方案的氣質去選擇合適的視覺呈現。由于這次的方案會有人物配音，為了使整體效果更自然，更接近用戶的想象，加上對產品用戶群的定位，我們摒棄了低齡卡通的設計方向，在人物設計上選擇了寫實的設計風格，更符合用戶心理對父親這個嚴肅、嚴謹的心理印象。

結合對話的內容以及動畫的表現形式，在細節刻畫顏色搭配上增加復古的味道，使人物更活潑不呆板將字體圖形化設計，結合中國元素，提煉各省市的簡稱加上有特點的人物設計，能更快速的幫用戶選擇以及增加親切感，以下就是各區域的爸爸形象設計，有沒有一款打動你呀。

七、主視覺風格設定

人物的設定出來后，主頁面的視覺風格就比較好把控了，復古的老式畫報風格，是一個很好的選擇～既能突出人物形象，又能把內容很好的劃分整合。

板式設定：

主頁面整體視覺風格確立以及版式布局，畫面主體還是以人物形象為主，配合動畫讓整個畫面更有動感，強調打電話的動作，更貼近產品。

在動畫的設計上，也是遇到了很多困難，因為6個區域人物分為獨白、對話、聽電話3個部分的動畫，而為了防止圖片過多文件過大每個動作都要控制在6/7幀的范圍內，又要保證形態的自然有趣，又要能對上字幕配音。

這里的難度非常非常的大，需要每個步驟都配合的剛剛好，非常感謝開發哥哥耐心打磨，最后的呈現還是很滿意的。

動畫效果，頁面過多就選一部分進行展示：

八、活動效果

最后整體數據效果還是比較理想，用戶完成全部選項占比整體 UV 34.89%，說明 H5 內容對用戶吸引度較高，能夠用內容本身吸引用戶到達廣告落地頁，完成運營目標。也帶來較高的親密充數據，相較平時有顯著提升，給親密充帶來綁定與充值。

九、結語

第一次制作配音動畫相關的運營 H5，制作初期既期待又緊張，中間也遇到了幾次看似無法逾越的難題，最終呈現結果也還較為滿意。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

我的設計師同仁們，我發現我們進入設計這個行業都是非常偶然的。以 Airbnb 的設計團隊為例，在 Airbnb 目前的設計團隊的設計師里，有人之前是做圖書館管理員的，有人之前是技工，還有人之前是壽險代理或理療師的?？傊诔蔀樵O計師之前，他們從事過的職業是五花八門，做什么的都有。由于他們內心是喜歡創意方面的工作的，這推動他們最終走上了設計這條道路。我對這一切是非常欣慰的，然而我總會忍不住去想，究竟還有多少有設計天賦的人才最終沒能走上設計這條職業道路。我知道未被挖掘的設計人才非常多，這也是我們現在想招聘優秀的設計師如此艱難的重要原因之一。

Airbnb 以設計驅動型文化著稱，公司的兩位聯合創始人也都畢業于聞名全球的設計學院：羅德島設計學院，對于這樣的一家公司，想招聘優秀的設計師都非常難，你可能會覺得難以置信，但事實確實如此。其實不光是 Airbnb，我曾經和包括 Apple、Google 和 Facebook 在內的很多非常注重設計的大公司高管都交流過，他們也同樣面臨類似的問題?，F在看似是沒有足夠多的設計師滿足市場需求，設計師人才供不應求。早期創業公司對這個問題應該感觸更深。每周，我都會從擁有很好發展前景的創業公司或中等規模公司的人那里聽說他們正在為招不到設計師而發愁。

即使設計不是公司最重要的部門，要想讓公司、尤其是資金資源有限的創業公司坐著等設計師在自己需要的時候自動出現是不現實的。如果我母親不是一位堅信設計是能成為一個職業的藝術家的話，我可能也不會進入設計師這個行當。能通往設計師的路徑有很多，設計師的角色也千變萬化。如果設計師沒有一個清晰的職業發展通道的話，要想找到下一代優秀的設計人才，我們依然只能靠意外的好運氣。

在各個行業的公司能為設計師從業者創造一種融洽的工作環境和清晰的職業發展通道之前，有必要和大家分析一下目前阻礙設計行業發展的幾大主要挑戰和障礙。

一、主要挑戰和障礙

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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

移動跨平臺框架React Native經過4年的發展，其生態已經變得異常豐富，在使用React Native開發項目的過程中，為了提高開發效率，我們經常會借鑒一些使用使用率比較高的開源庫，根據大眾的需求，對這些使用較高的 React-Native UI 庫，我們做一個簡單的總結和歸類，方便大家更好地入門 React Native。