現(xiàn)代圖形用戶界面建立在直接操作屏幕上圖形對象的概念上均驶，既實現(xiàn)看見——操作——反饋的過程届囚，本文主要圍繞兩個部分婴噩，一個為界面的易操作性，另一個為反饋機制的設(shè)計瞒御。前一個部分從三個遞進的部分說起父叙，單個元素到多個元素最后至任務(wù)的整體性。反饋機制的設(shè)計是為了讓操作更符合用戶的心理肴裙，好比一個貼心的管家趾唱，讓用戶的每一步的操作都能有所預(yù)知。

1.界面的易操作性

單個元素

把一個界面進行劃分蜻懦，單個元素比如一個按鈕甜癞、一行文本、一個icon宛乃，一個滑塊等等悠咱，這些單個元素是組成這個界面最基礎(chǔ)的東西蒸辆，它們?nèi)绻麊慰勘旧硎菬o法承擔(dān)起一個任務(wù)的，但每個元素的設(shè)計妥當(dāng)乔煞，對整體將產(chǎn)生很大的影響吁朦。

舉一個例子谷歌翻譯的手寫圖標(biāo)

谷歌翻譯中第三個按鈕的含義是打開手寫功能，但在我第一次使用它的時候渡贾，我并不能很好的預(yù)知這代表了一個怎樣的功能逗宜，因為在以往的APP使用過程中，并沒有遇見過這樣的icon空骚。相比谷歌纺讲，我倒覺得印象筆記的這個icon更能說明含義當(dāng)然這也只是我一家之言。

而對比這個手寫icon囤屹，左邊的照相機和話筒熬甚，我能很快的反應(yīng)過來，代表的是拍攝和語音錄入肋坚，究其原因乡括，我覺得一方面是因為這兩個圖形的可識別性非常強，可以讓用戶很快的聯(lián)想到相關(guān)的事情智厌，而一根彎彎曲曲的曲線并不能讓用戶有一個很強的聯(lián)想诲泌；另一方面是因為在以往的其他的APP的使用過程中，已經(jīng)多次的見過這兩個icon铣鹏，這兩個功能比較常見敷扫，這也是為什么當(dāng)一個icon已被賦予了一個通用的含義以后，改變它所對應(yīng)的功能诚卸，將冒著非常大的風(fēng)險葵第，就比如紙飛機代表發(fā)信息，而設(shè)計師把它對應(yīng)為了撤銷功能合溺；圖片代表了打開相冊或則加入圖片卒密，而設(shè)計師把它設(shè)計為了打開攝像頭。

再舉一個例子棠赛，VSCO的幾個控件

VSCO的icon的設(shè)計雖然很有特點哮奇，但沒有文字說明，也沒有任何的隱喻恭朗，這對于新手用戶而言簡直就是災(zāi)難，即使一個已經(jīng)使用過VSCO的用戶依疼，他也沒有辦法記住每一個icon背后的含義痰腮。而且強迫用戶去記憶一個icon的功能，肯定不是我們所希望的律罢。假如在藝術(shù)性和易用性之間做取舍膀值，一個面向用戶的產(chǎn)品應(yīng)該毫不猶豫的選擇易用性棍丐。

多個元素

多個元素相比單個元素需要更強的邏輯性和層次性。因為它不再是單獨的一個元素沧踏，而是一個組合歌逢，組合依賴的是它們彼此間的聯(lián)系。比如一個樂隊翘狱，有主唱秘案、吉他手、貝斯手以及鼓手等等潦匈，每個人負(fù)責(zé)不一樣的部分阱高，但都代表著一種音樂的演奏方式，即它們之間的共性茬缩，所以它們可以組合在一起赤惊。比如前文提到的印象筆記中的這一組，它們代表的是不同的輸入方式凰锡，所以被放在了一起未舟。

而不同元素的組合除了他們的共性以外，有的還因為組成了一個流程或者一個步驟掂为，比如常見的注冊框裕膀，需要用戶先輸入手機號，再填寫驗證碼菩掏，驗證碼的填寫框旁邊一般會有一個發(fā)送驗證碼的按鍵魂角，收到了驗證碼，便可以將它填入填寫框內(nèi)智绸。驗證碼的填寫框和獲取驗證碼的按鈕就代表一個子流程野揪，因此組合在了一起。

整體

多個元素組成了一個又一個的組織以后瞧栗，就形成了一個器官斯稳，器官的作用是非常強大的，它可以完成一系列的任務(wù)迹恐，當(dāng)然首先它需要具有一個整體性挣惰。不相符合的組織是無法構(gòu)成一個整體的，就好比胃酸對于肺而言是沒有什么價值的殴边。良好的整體可以幫助用戶高效率的完成一個任務(wù)憎茂，再借用注冊登陸這個例子，有的產(chǎn)品注冊僅需要填寫手機號然后輸入驗證碼就可以完成注冊锤岸，

而有的除了這些以外竖幔，還需要填寫密碼，上傳用戶頭像是偷，甚至還要填寫完整的出生年月等等拳氢。有時用戶會抱怨”我僅僅是為了看一個新聞而已募逞！”

所以在設(shè)計一個流程的時候，需要充分考慮到某一個子流程是否有必要馋评，因為用戶往往希望自己做的越少越好放接，他需要的是一個貼心的助手，能比他自己還要了解他需要什么留特，他是誰纠脾，他是一個怎樣的人。

當(dāng)然在設(shè)計一個整體的時候需要考慮流程的邏輯性以及視覺上的可操作性磕秤，整體的邏輯性就是要讓流程符合用戶的預(yù)期乳乌，用戶可以大致的理解每一步需要干什么，以及為什么要進行這一步市咆，比如訂外賣就是先選商家——選食物——填寫地址——選擇支付方式——支付完成汉操。假如把填寫地址提前到了選商家之前，用戶只是想進來看看有啥好吃的蒙兰，都還沒有決定是否要訂餐磷瘤，就被強制要求填寫地址，這顯然是不太合理的搜变。

視覺上的可操作性這里主要針對于移動端采缚，在移動端上由于界面以及單雙手操作的限制，需要注意整個流程的呈現(xiàn)在視覺上應(yīng)該如何排布挠他。

比如一個表單的填寫順序原本是從上至下扳抽，如果最后將提交按鈕放在了右上角，用戶需要將手指從原本的下方區(qū)域挪到上面去點擊提交殖侵，是一個不太方便的操作贸呢。假如在這樣設(shè)計時，并不是為了讓用戶增加一點提交的成本拢军，為了讓表單的提交率更加高一些楞陷，放在下面應(yīng)該會好一些。

2.反饋機制的建立

反饋機制作為直接操作中非常重要的一個環(huán)節(jié)茉唉，可以輔助性的幫助用戶達(dá)成目標(biāo)固蛾。雖然它可能對用戶需要進行的任務(wù)本身沒有太強的關(guān)聯(lián)性。沒有反饋度陆，也可以完成這個任務(wù)艾凯。但用戶需要一種掌控感，他希望是他自己在操控這個設(shè)備懂傀，這個軟件趾诗。舉個反面的例子，蘋果手機上的應(yīng)用平臺app store鸿竖，

當(dāng)在一個網(wǎng)絡(luò)并不太好的情況下打開它沧竟，進入以后可能呈現(xiàn)的只有一片空白。由于這個頁面并沒有刷新的功能（后來我偶然發(fā)現(xiàn)連續(xù)點擊10次以上底部的bar是可以進行刷新操作的缚忧，這也是讓我挺醉的）悟泵，只能看著空白頁面等待著，而且并不知道app store有沒有在進行加載闪水。所以沒有良好的反饋機制將直接導(dǎo)致用戶使用時的焦慮糕非，用戶并不希望從一個智能應(yīng)用中，感受到一種高冷或則傲慢的感覺球榆。

反饋機制如何建立朽肥，之前看過一篇文章講設(shè)計時需要注意的9種狀態(tài)，分別為：初始狀態(tài)持钉、加載中衡招、空狀態(tài)、單一項目每强、有一些數(shù)據(jù)始腾、數(shù)據(jù)過多、錯誤狀態(tài)空执、正確狀態(tài)以及完成狀態(tài)浪箭。借這幾種狀態(tài)，我們可以來思考這個問題：

1辨绊、加載中也就是loading狀態(tài)奶栖，但凡需要用戶等待的，都需要加入這個狀態(tài)门坷，好讓用戶知道此時正在通往成功的道路上宣鄙，這方面的設(shè)計也有很多文章進行了分析，使用戶在等待的過程中拜鹤，不至于太過焦慮框冀，通過有趣的設(shè)計分散用戶的注意力。

2敏簿、空狀態(tài)明也，像郵箱沒有郵件、購物車是空的惯裕。為的是告訴用戶一個確切的答案温数，同時又可以通過一些小的技巧達(dá)成一些其他的目的，比如引導(dǎo)用戶到其他頁面蜻势，比如愉悅用戶撑刺。

3、錯誤狀態(tài)握玛，這是反饋機制中需要特別重要的一點够傍，對于一個按鈕而言甫菠，如果操作是不正常的，可能以一個置灰的形式來傳達(dá)冕屯，告訴用戶這個按鈕并不能點擊寂诱。而對于一個任務(wù)流程而言，錯誤的狀態(tài)需要非常明確的告知用戶安聘，并且需要附上相關(guān)的解釋痰洒，好讓用戶知道該如何解決這個問題以及發(fā)生了什么，當(dāng)然要注意的就是用戶是沒有錯的浴韭，這也是about face中提到的一個設(shè)計原則丘喻。所以引導(dǎo)用戶解決問題，完成當(dāng)前的任務(wù)才是反饋的關(guān)鍵念颈。

4泉粉、正確狀態(tài)，這是設(shè)計者以及用戶都最希望看見的結(jié)果榴芳，可以適時給予用戶一些贊揚搀继。而在某些場景下，需要快速的繼續(xù)接下去的任務(wù)翠语，那么及時的進入下一個環(huán)節(jié)就是反饋的關(guān)鍵叽躯。當(dāng)然注意不要讓用戶迷失，比如用戶本來在瀏覽一個商品肌括，在這時選擇了登陸躏精，成功登陸以后卻跳向了首頁我磁，這會讓用戶感到不滿诅炉，因為他本身可能只是想登陸而已罢荡，并不希望影響到當(dāng)前的商品瀏覽。

這里提到的反饋機制的建立紧索，也僅僅是從九種狀態(tài)的角度來說的袁辈，還有沒有涉及到的地方，以后再談珠漂。