如何從零開(kāi)始學(xué)習交互設計發(fā)布者：本站     時(shí)間：2020-06-03 18:06:52

武俠小說(shuō)中有“走火入魔”一說(shuō)，指的是武功修煉過(guò)程中內力/內氣走錯方向，造成不同程度的后果。同理，在入門(mén)交互設計時(shí)，如果學(xué)習步驟有誤，輕則會(huì )演繹出“交互設計，從入門(mén)到放棄”，或者是東拼西湊，盡是零散的知識點(diǎn)和技巧，不成框架體系。本文今天主要梳理學(xué)習交互設計的路線(xiàn)圖，起師傅領(lǐng)進(jìn)門(mén)的作用，就像大學(xué)叫你領(lǐng)略每門(mén)學(xué)科的風(fēng)采魅力，但是精進(jìn)還是要靠個(gè)人修行。

如何從零開(kāi)始學(xué)習交互設計

有些同學(xué)入門(mén)交互的步驟是：看一些書(shū)，比如《交互設計精髓》，然后借鑒各個(gè)競品開(kāi)始畫(huà)交互稿，一年后好像也入門(mén)了，但這么做會(huì )有2個(gè)問(wèn)題：

先看書(shū)，尤其是《交互設計精髓》，很容易讓人放棄，也很容易讓人變得“空洞”；

跟著(zhù)競品學(xué)畫(huà)交互，很難領(lǐng)會(huì )到體系的基礎知識，學(xué)到的都是零散的點(diǎn)，也就是野路子。

那么相對有體系的學(xué)習步驟是怎樣的呢？這里筆者用“學(xué)武功”做一個(gè)類(lèi)比：

如何從零開(kāi)始學(xué)習交互設計

這個(gè)學(xué)習步驟也可以對應到交互設計T型能力圖譜上，如下圖：

如何從零開(kāi)始學(xué)習交互設計

下面的篇幅我們便來(lái)分別介紹每一個(gè)步驟具體學(xué)什么？怎么學(xué)？

一、界面基礎（招式）
界面基礎指的是：控件、布局、流程，也就是在交互稿上肉眼可見(jiàn)的部分。入門(mén)時(shí)先學(xué)界面基礎可以讓你快速感知到什么是交互設計，并建立一些興趣和信心。

1.1 控件

控件就是界面上最小的有效單元，比如下圖中的“搜索框”、“單選按鈕”、“復選框”、“下拉框”。

如何從零開(kāi)始學(xué)習交互設計

1.1.1 認識控件

掌握控件首先要“認識控件”，認識控件比較體系的方法是去閱讀各個(gè)平臺的官方設計規范，比如iOS、Android、MacOS、Windows（Desktop APP/UWP）、小程序。注意web端是沒(méi)有官方規范的，因為本身不是平臺。web端的規范屬于各自為政的狀態(tài)，國內后臺規范比較常見(jiàn)的是antdesign和element，前臺就沒(méi)有規范可言了。

如何從零開(kāi)始學(xué)習交互設計

 

 

1.1.2 了解控件的交互流程

很多控件都不是靜態(tài)的，都會(huì )有各自的一套交互流程，比如文本框（可參考下圖流程）：“用戶(hù)點(diǎn)擊文本框后，會(huì )出現光標，且彈出鍵盤(pán)。輸入第一個(gè)字符后，會(huì )出現“清空按鈕”。輸入很多字符后，會(huì )有截斷效果。輸入錯誤時(shí)，會(huì )報錯……”

如何從零開(kāi)始學(xué)習交互設計

如何從零開(kāi)始學(xué)習交互設計

了解控件的交互流程，可以幫助你更立體地了解一個(gè)控件。在實(shí)際的交互稿繪制中，也經(jīng)常會(huì )細致地描述某個(gè)控件的交互流程。

想要學(xué)習每個(gè)控件的交互流程，比較簡(jiǎn)單的方法就是找一些成熟的產(chǎn)品試用，看每進(jìn)行一個(gè)動(dòng)作下一步會(huì )發(fā)生什么，然后臨摹下來(lái)。對于移動(dòng)端，比較推薦大家臨摹微信。因為是微信是公認控件層面最講究的產(chǎn)品，設計規范和工具都比較全，比如WeUI提供了設計規范和小程序工具。當然，如果有耐心，各個(gè)平臺的官方規范都跟著(zhù)練一遍是最好的啦……

1.1.3 了解控件的屬性

大多控件都會(huì )有自己的一些屬性，或者可以理解為可設置的參數。比如“列表”這個(gè)控件，需要交互設計師定義的屬性有：排序規則、加載規則、刷新規則、適配規則、截斷規則等。比如下圖中的群成員列表，他的“排序規則”可能是按照昵稱(chēng)首字母排列的，也可能是按照進(jìn)群先后順序排列的，或者是按照角色排列的。

如何從零開(kāi)始學(xué)習交互設計

“控件的屬性”沒(méi)有很好的學(xué)習途徑，如果有認識一些前輩愿意給你看交互稿是最好的。如果沒(méi)有只能自己摸索了。一個(gè)設計師的交互稿是否細致，開(kāi)發(fā)是否能很好閱讀，而不是經(jīng)常跑來(lái)說(shuō)你寫(xiě)漏了，主要取決于設計師對“控件屬性”的理解。

1.1.4 了解怎么使用控件

當了解上面所有關(guān)于控件的內容后，你還需要知道什么時(shí)候該用什么控件。舉個(gè)例子（下圖），當用戶(hù)輸入手機號錯誤的時(shí)候，需要給用戶(hù)一個(gè)錯誤提示，提示方式所用的控件可以有很多種：彈窗、toast、行內提示、氣泡提示。那么用哪一種最好呢？

如何從零開(kāi)始學(xué)習交互設計

答案是“不一定”，比如“彈窗”的缺點(diǎn)是打擾性很強，但優(yōu)點(diǎn)是可以承載大段文字，用戶(hù)到達率也更高。toast的打擾性很小，但只能放很短的文字，用戶(hù)很容易忽略。具體要看當時(shí)的情況是怎樣的，設計師想要什么樣的效果。

那么怎么學(xué)習控件的使用方法呢，可以推薦大家看《web界面設計》或者各個(gè)平臺的設計規范?？赐旰笤僬页鲱?lèi)似的控件，做對比思考，基本就能看出門(mén)道了。

1.2 布局

簡(jiǎn)單意義上理解，布局就是把“控件”和“內容”放到界面上合適的位置并賦予合適的視覺(jué)重量。在網(wǎng)頁(yè)時(shí)代，布局設計是相當重要的。但在移動(dòng)端盛行的當代，布局設計相對沒(méi)有那么被看重。主要原因是移動(dòng)端的布局設計趨同性比較大，設計訴求和設計空間都相對較小。但它仍然是設計基礎中重要的一部分

1.2.1 了解布局設計的基本理論

布局設計的基本理論有以下幾種：格式塔原理、網(wǎng)格系統、7±2法則、席克定律、費茨定律、奧卡姆剃刀原理、復雜性守恒定律。這幾種理論中除了“網(wǎng)格系統”外，其余的理論基本都可以在知乎搜一下然后10分鐘內了解吸收。這些理論相對比較底層，很難直接告訴你布局設計應該怎么做。但它們可以成為設計師心中的“標尺”和“依據”，會(huì )融入在你平時(shí)的設計工作中。

想了解格式塔原理或其它定律，推薦閱讀《一文讀懂交互設計7大定律》這篇文章就夠了。

如何從零開(kāi)始學(xué)習交互設計

1.2.2 布局設計的基本步驟

布局設計簡(jiǎn)單可以分為以下4個(gè)步驟：

列舉：將界面中所需要的元素列舉出來(lái)，比如：商品圖片、商品標題、價(jià)格、優(yōu)惠券、收藏、分享……

歸類(lèi)：將上述列舉的元素歸為幾類(lèi)，每一類(lèi)就是一個(gè)模塊。比如“收藏、購買(mǎi)、加入購物車(chē)”可以歸為“操作模塊”

排序：將上面歸類(lèi)好的模塊進(jìn)行排序，排序的依據一般是：用戶(hù)場(chǎng)景中的瀏覽順序、元素的重要性、業(yè)務(wù)期望

調整：布局排布的影響因素很多，最后需要綜合其他因素對布局進(jìn)行調整。并對各元素的視覺(jué)重量進(jìn)行定義調整

學(xué)會(huì )基本步驟后，可以通過(guò)“默寫(xiě)產(chǎn)品法”進(jìn)行練習。比如把淘寶商品詳情頁(yè)的元素摘錄下來(lái)，然后自行排布。最后和淘寶的設計進(jìn)行對比，思考淘寶為何這么設計，自己是否有思考疏忽？

1.3 流程

界面中的元素有2種：內容和功能。內容是靜態(tài)的，比如商品描述就是一種內容。功能是動(dòng)態(tài)的，比如“加入購物車(chē)”就是一個(gè)功能。在交互稿中，展示一個(gè)功能的方式往往是“描述其交互流程”。比如在聊天APP中“接收文件”的交互流程可以描述為：點(diǎn)開(kāi)消息→看到文件→點(diǎn)擊下載→下載完成并打開(kāi)。

如下圖所示：

如何從零開(kāi)始學(xué)習交互設計

1.3.1 流程設計的步驟

流程設計的基本步驟是：

確定“任務(wù)”；

將“任務(wù)”拆成“動(dòng)作”；

將“動(dòng)作”對應成界面。

舉個(gè)例子，如下圖。比如我們做一個(gè)“群聊”的功能，群聊功能中有一個(gè)“添加群成員”的小功能。我們可以把“添加1個(gè)成員”看做是一個(gè)“任務(wù)”，用戶(hù)想要完成這個(gè)任務(wù)，就必須有一系列“動(dòng)作”。比如：找到群、找到添加入口、找到要添加的人、確定添加、確認添加成功。列出這些動(dòng)作后，我們再針對每個(gè)動(dòng)作（或多個(gè)動(dòng)作）設計相應的界面，這就得到了交互流程。

如何從零開(kāi)始學(xué)習交互設計

如何從零開(kāi)始學(xué)習交互設計

實(shí)際的交互流程會(huì )比這個(gè)例子復雜很多，不僅僅有“一條主流程”，還會(huì )有很多“支流程”。比如上述例子中，用戶(hù)“找到群”的方式其實(shí)有很多，可以通過(guò)搜索，可以通過(guò)通訊錄，也可以通過(guò)消息列表。用戶(hù)“確認添加”過(guò)程中也不一定就會(huì )“添加成功”，也可能中途突然反悔了，也可能網(wǎng)絡(luò )突然斷了。這些都屬于流程中的一部分，都需要體現在最終的交互稿中。

如何從零開(kāi)始學(xué)習交互設計

對于復雜的交互流程，需要在繪制界面前搭建“流程圖”（如下圖），這樣可以讓你思路更加清晰，表達更加清楚。流程圖的繪制相對比較復雜，這里不展開(kāi)討論。（下圖是移動(dòng)端音視頻通話(huà)的流程圖的例子）

如何從零開(kāi)始學(xué)習交互設計

1.4 步驟1的小結

以上我們介紹了入門(mén)交互設計的第1步“界面基礎”（信息量有點(diǎn)大哈），其中包含控件、布局、流程3個(gè)部分。

針對這3個(gè)部分筆者推薦一些實(shí)用的書(shū)籍（不是那種夸夸其談的書(shū)）：

如何從零開(kāi)始學(xué)習交互設計

學(xué)會(huì )這些基礎后，基本就算是大概入門(mén)了，能夠自己畫(huà)一些交互稿了。

二、設計內核（內功）
這個(gè)部分的內容會(huì )比較虛，也不太容易理解。但這部分的知識的確是一個(gè)交互設計師最“內核”的部分，所謂的“交互設計天賦”大體就體現在這里了。

我們舉個(gè)例子方便了解這個(gè)部分要講的“用戶(hù)”、“目標”、“場(chǎng)景”。如下圖所示，這是某個(gè)銀行APP的客服咨詢(xún)功能，筆者當時(shí)想查詢(xún)開(kāi)戶(hù)行，于是就輸入了“你好，怎么查詢(xún)開(kāi)戶(hù)行”。此時(shí)系統回復了“正在安排客服，當前排隊人數為299人，請稍后。退出排隊請輸入【1】”。

過(guò)了十幾分鐘，筆者有點(diǎn)不耐煩，于是又輸入了一個(gè)“你好”。系統又給了一個(gè)同樣的回復，只是排隊的人數刷新了一下。這個(gè)例子中的控件、布局、流程都沒(méi)有問(wèn)題，但用戶(hù)使用過(guò)程卻會(huì )很痛苦，問(wèn)題出在哪里呢？