接上篇《讓你全方位學(xué)習(xí)成為一名交互設(shè)計(jì)師（1.6萬字誠(chéng)意之作）-上篇》

5.交互設(shè)計(jì)常見案例分析

交互設(shè)計(jì)日常需要注意積累案例，并從案例中學(xué)習(xí)總結(jié)，只有案例積累得越多，才能形成質(zhì)變。本章只是簡(jiǎn)單示意一下交互可以從哪些案例入手。

5.1導(dǎo)航

導(dǎo)航包括：左側(cè)導(dǎo)航、頂部導(dǎo)航、面包屑導(dǎo)航、電梯導(dǎo)航、搜索等。

5.2流程

常見一個(gè)完整功能流程

5.3表單

表單包括表單的展示、輸入以及數(shù)據(jù)校驗(yàn)。

5.4反饋

有反饋的才是交互，什么時(shí)候用輕反饋，什么時(shí)候用重反饋？

5.5場(chǎng)景

離開場(chǎng)景來談交互，都是耍流氓。

6.交互設(shè)計(jì)規(guī)范及趨勢(shì)

6.1柵格規(guī)范

首先，我們要明確一個(gè)觀念：交互設(shè)計(jì)師和視覺設(shè)計(jì)師是密切配合的，所以交互設(shè)計(jì)師也需要學(xué)習(xí)一些視覺設(shè)計(jì)的知識(shí)，以免雙方溝通出現(xiàn)問題。柵格化就是視覺設(shè)計(jì)中的比較基本有用的知識(shí)，至少可以規(guī)范交互設(shè)計(jì)師畫的原型，沒有超過視覺設(shè)計(jì)師所能承受的“界限”。

我們?cè)谠O(shè)計(jì)中常用的是：網(wǎng)頁(yè)柵格系統(tǒng)，百度百科給出的解釋是“以規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范網(wǎng)頁(yè)中的版面布局以及信息分布。對(duì)于網(wǎng)頁(yè)設(shè)計(jì)來說，柵格系統(tǒng)的使用，不僅可以讓網(wǎng)頁(yè)的信息呈現(xiàn)更加美觀易讀，更具可用性。而且，對(duì)于前端開發(fā)來說，網(wǎng)頁(yè)將更加的靈活與規(guī)范?！?/p>

柵格系統(tǒng)詳細(xì)的應(yīng)用，可以看這篇文章騰訊高手教你靠譜的布局設(shè)定方法，介紹得十分詳細(xì)，本文不再累述。

這里只簡(jiǎn)單總結(jié)一下學(xué)習(xí)柵格規(guī)范對(duì)交互設(shè)計(jì)的意義：

（1）和視覺設(shè)計(jì)師一起，達(dá)成頁(yè)面寬度的共識(shí)，而不是超出視覺設(shè)計(jì)的“邊界”；

（2）在交互設(shè)計(jì)時(shí)，用柵格化規(guī)范模塊的布局，整齊的分為N欄，讓原型變得更美觀；

（3）合理利用柵格，產(chǎn)出“黃金比例”的效果圖，例如制作簡(jiǎn)歷或者作品集。

6.2平臺(tái)設(shè)計(jì)規(guī)范

交互設(shè)計(jì)師必須掌握的知識(shí)點(diǎn)，也是面試必考題：平臺(tái)設(shè)計(jì)規(guī)范。因?yàn)?，我們所有的設(shè)計(jì)，幾乎都是基于這些平臺(tái)來進(jìn)行設(shè)計(jì)。

但要注意，不要過度在意平臺(tái)的設(shè)計(jì)規(guī)范，有一些規(guī)范也有自相矛盾的地方，舉例摘自：崇書慶發(fā)表于妖鹿山設(shè)計(jì)屯的《【交互小零食】- Ser.02》在iOS9規(guī)范中，“關(guān)于彈窗中的“推薦選項(xiàng)”應(yīng)該放在左邊還是右邊，分了兩種情況：如果推薦選項(xiàng)有破壞性，那么應(yīng)該放在左邊。如果沒有破壞性，則應(yīng)該放在右邊。但到了iOS10的時(shí)候，卻變成了推薦選項(xiàng)都應(yīng)該放在右邊?！?/p>

以下是一些交互設(shè)計(jì)師常見需要掌握的規(guī)范舉例，詳細(xì)規(guī)范需要自行去了解。

（1）IOS10設(shè)計(jì)規(guī)范

為IOS設(shè)備設(shè)計(jì)時(shí)必備，可參考站酷文章《設(shè)計(jì)資訊/資料：iOS10 GUI （附源文件下載）(翻譯理論)》

（2）Material Design

喜歡Andriod和Material Design風(fēng)格的，不容錯(cuò)過，可參考站酷文章《設(shè)計(jì)資訊/資料：Material Design 設(shè)計(jì)規(guī)范(翻譯理論)》

（3）Window10 UWP

來自微軟的UWP設(shè)計(jì)規(guī)范，參考官網(wǎng)《設(shè)計(jì)和UI》

（4）微信小程序

新的熱點(diǎn)，了解大平臺(tái)是怎樣做設(shè)計(jì)規(guī)范的。參考微信小程序官網(wǎng)給的規(guī)范《微信小程序設(shè)計(jì)指南》

6.3設(shè)計(jì)趨勢(shì)

作為一名優(yōu)秀的交互設(shè)計(jì)師，當(dāng)前的時(shí)尚流行元素，以及設(shè)計(jì)趨勢(shì)，也是需要了解的，不要讓自己的設(shè)計(jì)跟不上時(shí)代。

建議交互設(shè)計(jì)師了解兩方面的設(shè)計(jì)趨勢(shì)：交互設(shè)計(jì)趨勢(shì)，以及視覺設(shè)計(jì)趨勢(shì)。在年初或者年末的時(shí)候搜索最新的看即可。

2017年設(shè)計(jì)趨勢(shì)文章推薦：

（1）交互設(shè)計(jì)趨勢(shì)

人人都是產(chǎn)品經(jīng)理，《2017年度交互設(shè)計(jì)趨勢(shì)》

（2）視覺設(shè)計(jì)趨勢(shì)

優(yōu)設(shè)網(wǎng)，《趨勢(shì)丨8個(gè)你需要知道的2017年UI設(shè)計(jì)流行趨勢(shì)》

7.交互設(shè)計(jì)師進(jìn)階之路

7.1突破瓶頸

每個(gè)交互設(shè)計(jì)師通過努力都能成為高級(jí)交互設(shè)計(jì)師的水平，要想成為優(yōu)秀的資深交互設(shè)計(jì)師或者業(yè)內(nèi)有影響力的設(shè)計(jì)師還需要突破一個(gè)瓶頸。那么所謂的瓶頸期是指？這里可以參考《騰訊高級(jí)交互設(shè)計(jì)師：什么是優(yōu)秀的設(shè)計(jì)思維與方法？》一文即可。

按照慣例，總結(jié)了一下需要突破瓶頸的3大必要條件：

（1）知識(shí)的積累達(dá)到一定的程度，一般是由量變轉(zhuǎn)為質(zhì)變

（2）有個(gè)人的設(shè)計(jì)方法體系

（3）長(zhǎng)時(shí)間的經(jīng)驗(yàn)積累，至少需要5年以上

7.2進(jìn)修

交互設(shè)計(jì)師職位發(fā)展的時(shí)間不長(zhǎng)，大多數(shù)的交互設(shè)計(jì)師都是基本靠自學(xué)成才，那么對(duì)于入門或者想要更近一步的交互設(shè)計(jì)師，有什么樣的進(jìn)修渠道推薦呢？

不建議報(bào)讀培訓(xùn)班，不建議報(bào)讀培訓(xùn)班，不建議報(bào)讀培訓(xùn)班。重要的事情說3遍，報(bào)培訓(xùn)班不如自學(xué)。

推薦渠道一：進(jìn)培訓(xùn)體系完善的公司，接收培訓(xùn)。

最直接最節(jié)省成本的方法，有老司機(jī)帶領(lǐng)。前提是，我們要上一輛好的車。1-2年學(xué)成出師，比自己自學(xué)效率要快N倍，少走的彎路能繞地球一圈。

推薦渠道二：報(bào)讀設(shè)計(jì)類學(xué)校。

刷資歷首選，進(jìn)入知名企業(yè)必備敲門磚頭，系統(tǒng)的知識(shí)體系和方法論學(xué)習(xí)。缺點(diǎn)是學(xué)習(xí)周期長(zhǎng)，成本高，同時(shí)，院校的可選擇范圍也很小。推薦院校：清華美院、江南大學(xué)、中山大學(xué)、廣州美院。