如何從零開始學(xué)習(xí)交互設(shè)計發(fā)布者：本站 時間：2020-06-03 18:06:52
武俠小說中有“走火入魔”一說，指的是武功修煉過程中內(nèi)力/內(nèi)氣走錯方向，造成不同程度的后果。同理，在入門交互設(shè)計時，如果學(xué)習(xí)步驟有誤，輕則會演繹出“交互設(shè)計，從入門到放棄”，或者是東拼西湊，盡是零散的知識點(diǎn)和技巧，不成框架體系。本文今天主要梳理學(xué)習(xí)交互設(shè)計的路線圖，起師傅領(lǐng)進(jìn)門的作用，就像大學(xué)叫你領(lǐng)略每門學(xué)科的風(fēng)采魅力，但是精進(jìn)還是要靠個人修行。
如何從零開始學(xué)習(xí)交互設(shè)計
有些同學(xué)入門交互的步驟是：看一些書，比如《交互設(shè)計精髓》，然后借鑒各個競品開始畫交互稿，一年后好像也入門了，但這么做會有2個問題：
先看書，尤其是《交互設(shè)計精髓》，很容易讓人放棄，也很容易讓人變得“空洞”；
跟著競品學(xué)畫交互，很難領(lǐng)會到體系的基礎(chǔ)知識，學(xué)到的都是零散的點(diǎn)，也就是野路子。
那么相對有體系的學(xué)習(xí)步驟是怎樣的呢？這里筆者用“學(xué)武功”做一個類比：
如何從零開始學(xué)習(xí)交互設(shè)計
這個學(xué)習(xí)步驟也可以對應(yīng)到交互設(shè)計T型能力圖譜上，如下圖：
如何從零開始學(xué)習(xí)交互設(shè)計
下面的篇幅我們便來分別介紹每一個步驟具體學(xué)什么？怎么學(xué)？
一、界面基礎(chǔ)（招式）
界面基礎(chǔ)指的是：控件、布局、流程，也就是在交互稿上肉眼可見的部分。入門時先學(xué)界面基礎(chǔ)可以讓你快速感知到什么是交互設(shè)計，并建立一些興趣和信心。
1.1 控件
控件就是界面上最小的有效單元，比如下圖中的“搜索框”、“單選按鈕”、“復(fù)選框”、“下拉框”。
如何從零開始學(xué)習(xí)交互設(shè)計
1.1.1 認(rèn)識控件
掌握控件首先要“認(rèn)識控件”，認(rèn)識控件比較體系的方法是去閱讀各個平臺的官方設(shè)計規(guī)范，比如iOS、Android、MacOS、Windows（Desktop APP/UWP）、小程序。注意web端是沒有官方規(guī)范的，因?yàn)楸旧聿皇瞧脚_。web端的規(guī)范屬于各自為政的狀態(tài)，國內(nèi)后臺規(guī)范比較常見的是antdesign和element，前臺就沒有規(guī)范可言了。
如何從零開始學(xué)習(xí)交互設(shè)計
1.1.2 了解控件的交互流程
很多控件都不是靜態(tài)的，都會有各自的一套交互流程，比如文本框（可參考下圖流程）：“用戶點(diǎn)擊文本框后，會出現(xiàn)光標(biāo)，且彈出鍵盤。輸入第一個字符后，會出現(xiàn)“清空按鈕”。輸入很多字符后，會有截斷效果。輸入錯誤時，會報錯……”
如何從零開始學(xué)習(xí)交互設(shè)計
如何從零開始學(xué)習(xí)交互設(shè)計
了解控件的交互流程，可以幫助你更立體地了解一個控件。在實(shí)際的交互稿繪制中，也經(jīng)常會細(xì)致地描述某個控件的交互流程。
想要學(xué)習(xí)每個控件的交互流程，比較簡單的方法就是找一些成熟的產(chǎn)品試用，看每進(jìn)行一個動作下一步會發(fā)生什么，然后臨摹下來。對于移動端，比較推薦大家臨摹微信。因?yàn)槭俏⑿攀枪J(rèn)控件層面最講究的產(chǎn)品，設(shè)計規(guī)范和工具都比較全，比如WeUI提供了設(shè)計規(guī)范和小程序工具。當(dāng)然，如果有耐心，各個平臺的官方規(guī)范都跟著練一遍是最好的啦……
1.1.3 了解控件的屬性
大多控件都會有自己的一些屬性，或者可以理解為可設(shè)置的參數(shù)。比如“列表”這個控件，需要交互設(shè)計師定義的屬性有：排序規(guī)則、加載規(guī)則、刷新規(guī)則、適配規(guī)則、截斷規(guī)則等。比如下圖中的群成員列表，他的“排序規(guī)則”可能是按照昵稱首字母排列的，也可能是按照進(jìn)群先后順序排列的，或者是按照角色排列的。
如何從零開始學(xué)習(xí)交互設(shè)計
“控件的屬性”沒有很好的學(xué)習(xí)途徑，如果有認(rèn)識一些前輩愿意給你看交互稿是最好的。如果沒有只能自己摸索了。一個設(shè)計師的交互稿是否細(xì)致，開發(fā)是否能很好閱讀，而不是經(jīng)常跑來說你寫漏了，主要取決于設(shè)計師對“控件屬性”的理解。
1.1.4 了解怎么使用控件
當(dāng)了解上面所有關(guān)于控件的內(nèi)容后，你還需要知道什么時候該用什么控件。舉個例子（下圖），當(dāng)用戶輸入手機(jī)號錯誤的時候，需要給用戶一個錯誤提示，提示方式所用的控件可以有很多種：彈窗、toast、行內(nèi)提示、氣泡提示。那么用哪一種最好呢？
如何從零開始學(xué)習(xí)交互設(shè)計
答案是“不一定”，比如“彈窗”的缺點(diǎn)是打擾性很強(qiáng)，但優(yōu)點(diǎn)是可以承載大段文字，用戶到達(dá)率也更高。toast的打擾性很小，但只能放很短的文字，用戶很容易忽略。具體要看當(dāng)時的情況是怎樣的，設(shè)計師想要什么樣的效果。
那么怎么學(xué)習(xí)控件的使用方法呢，可以推薦大家看《web界面設(shè)計》或者各個平臺的設(shè)計規(guī)范?？赐旰笤僬页鲱愃频目丶?，做對比思考，基本就能看出門道了。
1.2 布局
簡單意義上理解，布局就是把“控件”和“內(nèi)容”放到界面上合適的位置并賦予合適的視覺重量。在網(wǎng)頁時代，布局設(shè)計是相當(dāng)重要的。但在移動端盛行的當(dāng)代，布局設(shè)計相對沒有那么被看重。主要原因是移動端的布局設(shè)計趨同性比較大，設(shè)計訴求和設(shè)計空間都相對較小。但它仍然是設(shè)計基礎(chǔ)中重要的一部分
1.2.1 了解布局設(shè)計的基本理論
布局設(shè)計的基本理論有以下幾種：格式塔原理、網(wǎng)格系統(tǒng)、7±2法則、席克定律、費(fèi)茨定律、奧卡姆剃刀原理、復(fù)雜性守恒定律。這幾種理論中除了“網(wǎng)格系統(tǒng)”外，其余的理論基本都可以在知乎搜一下然后10分鐘內(nèi)了解吸收。這些理論相對比較底層，很難直接告訴你布局設(shè)計應(yīng)該怎么做。但它們可以成為設(shè)計師心中的“標(biāo)尺”和“依據(jù)”，會融入在你平時的設(shè)計工作中。
想了解格式塔原理或其它定律，推薦閱讀《一文讀懂交互設(shè)計7大定律》這篇文章就夠了。
如何從零開始學(xué)習(xí)交互設(shè)計
1.2.2 布局設(shè)計的基本步驟
布局設(shè)計簡單可以分為以下4個步驟：
列舉：將界面中所需要的元素列舉出來，比如：商品圖片、商品標(biāo)題、價格、優(yōu)惠券、收藏、分享……
歸類：將上述列舉的元素歸為幾類，每一類就是一個模塊。比如“收藏、購買、加入購物車”可以歸為“操作模塊”
排序：將上面歸類好的模塊進(jìn)行排序，排序的依據(jù)一般是：用戶場景中的瀏覽順序、元素的重要性、業(yè)務(wù)期望
調(diào)整：布局排布的影響因素很多，最后需要綜合其他因素對布局進(jìn)行調(diào)整。并對各元素的視覺重量進(jìn)行定義調(diào)整
學(xué)會基本步驟后，可以通過“默寫產(chǎn)品法”進(jìn)行練習(xí)。比如把淘寶商品詳情頁的元素摘錄下來，然后自行排布。最后和淘寶的設(shè)計進(jìn)行對比，思考淘寶為何這么設(shè)計，自己是否有思考疏忽？
1.3 流程
界面中的元素有2種：內(nèi)容和功能。內(nèi)容是靜態(tài)的，比如商品描述就是一種內(nèi)容。功能是動態(tài)的，比如“加入購物車”就是一個功能。在交互稿中，展示一個功能的方式往往是“描述其交互流程”。比如在聊天APP中“接收文件”的交互流程可以描述為：點(diǎn)開消息→看到文件→點(diǎn)擊下載→下載完成并打開。
如下圖所示：
如何從零開始學(xué)習(xí)交互設(shè)計
1.3.1 流程設(shè)計的步驟
流程設(shè)計的基本步驟是：
確定“任務(wù)”；
將“任務(wù)”拆成“動作”；
將“動作”對應(yīng)成界面。
舉個例子，如下圖。比如我們做一個“群聊”的功能，群聊功能中有一個“添加群成員”的小功能。我們可以把“添加1個成員”看做是一個“任務(wù)”，用戶想要完成這個任務(wù)，就必須有一系列“動作”。比如：找到群、找到添加入口、找到要添加的人、確定添加、確認(rèn)添加成功。列出這些動作后，我們再針對每個動作（或多個動作）設(shè)計相應(yīng)的界面，這就得到了交互流程。
如何從零開始學(xué)習(xí)交互設(shè)計
如何從零開始學(xué)習(xí)交互設(shè)計
實(shí)際的交互流程會比這個例子復(fù)雜很多，不僅僅有“一條主流程”，還會有很多“支流程”。比如上述例子中，用戶“找到群”的方式其實(shí)有很多，可以通過搜索，可以通過通訊錄，也可以通過消息列表。用戶“確認(rèn)添加”過程中也不一定就會“添加成功”，也可能中途突然反悔了，也可能網(wǎng)絡(luò)突然斷了。這些都屬于流程中的一部分，都需要體現(xiàn)在最終的交互稿中。
如何從零開始學(xué)習(xí)交互設(shè)計
對于復(fù)雜的交互流程，需要在繪制界面前搭建“流程圖”（如下圖），這樣可以讓你思路更加清晰，表達(dá)更加清楚。流程圖的繪制相對比較復(fù)雜，這里不展開討論。（下圖是移動端音視頻通話的流程圖的例子）
如何從零開始學(xué)習(xí)交互設(shè)計
1.4 步驟1的小結(jié)
以上我們介紹了入門交互設(shè)計的第1步“界面基礎(chǔ)”（信息量有點(diǎn)大哈），其中包含控件、布局、流程3個部分。
針對這3個部分筆者推薦一些實(shí)用的書籍（不是那種夸夸其談的書）：
如何從零開始學(xué)習(xí)交互設(shè)計
學(xué)會這些基礎(chǔ)后，基本就算是大概入門了，能夠自己畫一些交互稿了。
二、設(shè)計內(nèi)核（內(nèi)功）
這個部分的內(nèi)容會比較虛，也不太容易理解。但這部分的知識的確是一個交互設(shè)計師最“內(nèi)核”的部分，所謂的“交互設(shè)計天賦”大體就體現(xiàn)在這里了。
我們舉個例子方便了解這個部分要講的“用戶”、“目標(biāo)”、“場景”。如下圖所示，這是某個銀行APP的客服咨詢功能，筆者當(dāng)時想查詢開戶行，于是就輸入了“你好，怎么查詢開戶行”。此時系統(tǒng)回復(fù)了“正在安排客服，當(dāng)前排隊(duì)人數(shù)為299人，請稍后。退出排隊(duì)請輸入【1】”。
過了十幾分鐘，筆者有點(diǎn)不耐煩，于是又輸入了一個“你好”。系統(tǒng)又給了一個同樣的回復(fù)，只是排隊(duì)的人數(shù)刷新了一下。這個例子中的控件、布局、流程都沒有問題，但用戶使用過程卻會很痛苦，問題出在哪里呢？
選擇我們，優(yōu)質(zhì)服務(wù)，不容錯過
1. 優(yōu)秀的網(wǎng)絡(luò)資源，強(qiáng)大的網(wǎng)站優(yōu)化技術(shù)，穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗(yàn)，優(yōu)秀的技術(shù)和設(shè)計水平，更放心
3. 全程省心服務(wù)，不必?fù)?dān)心自己不懂網(wǎng)絡(luò)，更省心。
------------------------------------------------------------
24小時聯(lián)系電話：021-58370032
關(guān)鍵詞標(biāo)簽：上海網(wǎng)站建設(shè) 上海網(wǎng)站制作 網(wǎng)站優(yōu)化 小程序開發(fā)