藍(lán)藍(lán)設(shè)計(jì)( www.wtxcl.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

 

@琛桑要做芝麻藝人 ：作為入行不久的交互設(shè)計(jì)師，我發(fā)現(xiàn)自己在交互設(shè)計(jì)的實(shí)踐中無法顧及到方方面面，是存在思維盲區(qū)的。其中有欠缺經(jīng)驗(yàn)的原因，也有自身知識(shí)局限的問題。進(jìn)入開發(fā)階段后，每次需要修改交互時(shí)，心里都會(huì)有些慚愧，感覺為小伙伴們帶來了不必要的工作量。

然而現(xiàn)實(shí)中，交互設(shè)計(jì)的改動(dòng)是難免的（因此一般一個(gè)項(xiàng)目會(huì)不斷迭代交互文檔），尤其是在時(shí)間安排緊促、產(chǎn)品需求不清晰的情況下。怎樣在交互設(shè)計(jì)階段盡可能思考周全，減少視覺設(shè)計(jì)與開發(fā)的返工呢？抱著提升自我、拯救伙伴的態(tài)度，我結(jié)合自己在移動(dòng)端app的項(xiàng)目經(jīng)驗(yàn)進(jìn)行了一些總結(jié)。這并不能涵蓋交互設(shè)計(jì)的所有方面，主要著重于設(shè)計(jì)時(shí)個(gè)人覺得容易疏漏的地方。

交互設(shè)計(jì)在我看來分結(jié)構(gòu)層面和細(xì)節(jié)層面，兩者在發(fā)現(xiàn)思維盲區(qū)、排查交互設(shè)計(jì)問題時(shí)的角度有所不同。

結(jié)構(gòu)層面

結(jié)構(gòu)層面的交互設(shè)計(jì)是指，通過解析產(chǎn)品需求與核心目標(biāo)，梳理交互邏輯，設(shè)計(jì)使用流程、框架結(jié)構(gòu)和基礎(chǔ)功能。其目的是保證產(chǎn)品的可用性。可以想象，若在開發(fā)過程中對(duì)結(jié)構(gòu)層面的交互進(jìn)行改動(dòng)，成本是比較大的。

一些不成熟的結(jié)構(gòu)層面的交互設(shè)計(jì)，我覺得容易出問題的地方主要是：

1. 沒有很好地把握平臺(tái)特性。

尤其是Android平臺(tái)較iOS復(fù)雜些。比如由于Android手機(jī)對(duì)App性能消耗的要求更苛刻，設(shè)計(jì)時(shí)應(yīng)盡可能地選擇性能耗費(fèi)少的框架結(jié)構(gòu)；又如大部分Android手機(jī)屏幕上有虛擬按鈕，因此在完成界面設(shè)計(jì)后要考慮代表“返回”的虛擬按鈕會(huì)把頁面跳轉(zhuǎn)到哪里，使用上是否會(huì)帶來困惑。在設(shè)計(jì)軟件結(jié)構(gòu)的初期，就需要與開發(fā)人員溝通設(shè)計(jì)稿，以便盡早發(fā)現(xiàn)問題。

2. 頁面結(jié)構(gòu)復(fù)雜。

手機(jī)屏幕可謂寸土寸金，合理刪減一個(gè)元素，對(duì)用戶來說就減少一個(gè)思維思維負(fù)擔(dān)或迷惑點(diǎn)。即使方案看起來OK，也需要不斷反問自己：這種功能布局是最簡單的嗎？頁面最主要的操作是什么，是否明顯突出？其他功能或入口是否必要？頁面的組織是否清晰有規(guī)律？……不過需要注意的是，合理簡化結(jié)構(gòu)的提前，是對(duì)用戶使用場景有很好地了解。

3. 設(shè)計(jì)師與用戶使用經(jīng)驗(yàn)的差異。

設(shè)計(jì)師對(duì)自己設(shè)計(jì)的產(chǎn)品十分了解，因此容易覺得一切使用起來都理所當(dāng)然，或者覺得別人稍微試一下就知道是怎么回事了。但事實(shí)上，很多人并沒這么“聰明”。這就需要邀請(qǐng)對(duì)產(chǎn)品和項(xiàng)目不熟悉的“小白”來玩玩交互Demo，看看Ta是否能輕松知道你的產(chǎn)品是做什么的，完成核心功能時(shí)是否順暢，哪里會(huì)遇到磕絆。

細(xì)節(jié)層面

細(xì)節(jié)層面的設(shè)計(jì)附屬于功能點(diǎn)之下（如具體信息的排布，異常狀態(tài)的處理等），可以進(jìn)行獨(dú)立優(yōu)化而不影響整體的結(jié)構(gòu)，幫助用戶更好地達(dá)成目標(biāo)。細(xì)節(jié)層面要考慮的東西很多很雜，設(shè)計(jì)往往不難，難的是想全。因此，需要有一個(gè)系統(tǒng)的思維框架來幫助我們查漏補(bǔ)缺，而不是想到什么是什么。

1. 可以從“我”(使用者本身）和“別人”（其他使用者）的角度，檢查功能點(diǎn)是否齊全。

我：用戶間是存在差異的，有些因素將影響用戶在的需求和使用場景，如是否是第一次使用app，是否是會(huì)員等。站在不同用戶的角度想想，“我”在這個(gè)頁面想做/能做什么事？做一件事的前、中、后階段，在設(shè)計(jì)上是否有體現(xiàn)？我是否可以取消、撤銷或退出某個(gè)步驟？如果中途這件事做失敗了呢？

別人：“別人”指與你在使用產(chǎn)品是直接相關(guān)的其他人。別人對(duì)我做了什么，我需要知道么？對(duì)我有何影響？舉個(gè)栗子，在一個(gè)“教室”功能的頁面中，我可以和其他同學(xué)一起聽老師上直播課。這里老師對(duì)我有一些權(quán)限：禁止/允許我打字聊天，讓我上麥發(fā)言/下麥，把我踢出教室，給我發(fā)私聊。當(dāng)老師對(duì)我做這些事的時(shí)候，我是否能明白是怎么回事？我知道應(yīng)該做出什么回應(yīng)嗎？我收到的提示足夠清晰嗎？

2. 檢查特殊情況。

一方面，想想用戶在使用產(chǎn)品時(shí)的主要場景是什么，有哪些影響因素。常見的影響因素有：

網(wǎng)絡(luò)環(huán)境：有無網(wǎng)絡(luò)，網(wǎng)絡(luò)狀況不好，突然斷網(wǎng), 是否為Wifi環(huán)境，Wifi環(huán)境與非Wifi環(huán)境之間的轉(zhuǎn)換等。明確網(wǎng)絡(luò)情況的變化對(duì)用戶有怎樣的影響，是否需要讓用戶重新作出操作上的選擇，是否需要進(jìn)行明確的提示。

時(shí)間因素：操作的時(shí)間限制，某些功能的定時(shí)開啟等。需要考慮在不同時(shí)段，產(chǎn)品功能會(huì)有怎樣的差異，用戶是否可以預(yù)見這樣的差異。假如產(chǎn)品上的支付功能是有時(shí)間限制的，一定時(shí)間之后訂單將自動(dòng)取消。那么設(shè)計(jì)上是否已經(jīng)明顯地告訴用戶這一點(diǎn)？在訂單頁支付倒計(jì)時(shí)結(jié)束后，會(huì)發(fā)生什么情況？

數(shù)量限制：當(dāng)某個(gè)功能對(duì)數(shù)量有限制時(shí)，操作的時(shí)機(jī)就變得很重要。以在app上報(bào)名班級(jí)（圖1）的操作為例，假設(shè)班級(jí)容量為20人，確認(rèn)報(bào)名訂單時(shí)暫時(shí)扣去一個(gè)名額庫存，完成支付時(shí)完全扣去這個(gè)名額。如果當(dāng)你報(bào)名班級(jí)時(shí)，名額已滿，但還有人未付款，這時(shí)系統(tǒng)應(yīng)該有什么提示？這和報(bào)名班級(jí)時(shí)，班級(jí)絕對(duì)性滿員（名額已滿，且所有人完成付款）的情況處理方式是不一樣的。另一種情況是，在你進(jìn)入確認(rèn)訂單頁時(shí)，名額未滿，但當(dāng)你按下“確認(rèn)”訂單，此時(shí)名額已經(jīng)滿了，也應(yīng)該有相應(yīng)的提示。像這種對(duì)數(shù)量敏感的功能，應(yīng)盡量明確地告訴用戶限制條件，當(dāng)前的相關(guān)狀態(tài)是怎樣的（未滿員，暫時(shí)滿員，或已滿員？），防止用戶進(jìn)行不必要的操作。用戶若第一時(shí)間沒有理解，可能需要進(jìn)一步友好地提示。

圖1. 班級(jí)報(bào)名關(guān)鍵頁面

另一方面，想想單個(gè)頁面元素會(huì)有哪幾種狀態(tài)。常見的狀態(tài)分類有：

中間狀態(tài)：在進(jìn)行下載、上傳、導(dǎo)入等操作時(shí)，用戶會(huì)有等待的過程。在這過程中，界面的狀態(tài)是怎樣的？怎樣讓等待不那么痛苦？是否允許中途取消？

控件狀態(tài)：控件激活、未激活、使用中的狀態(tài)是怎樣的？是否有一些限制？狀態(tài)轉(zhuǎn)變時(shí)會(huì)發(fā)生什么？其他情況的變化對(duì)控件的狀態(tài)是否有影響？以一個(gè)教室頁面的文字輸入框（圖2）為例，在輸入框中

輸入文字時(shí)，我們會(huì)在界面展示上做限制：輸入框最多顯示4行文字，鍵盤收起后保留輸入框狀態(tài)。此外。在上課過程中如果學(xué)生不守紀(jì)律，會(huì)被禁言。禁言時(shí)輸入框的狀態(tài)是怎樣的呢？是完全不可用，還是可以編輯文字但無法發(fā)送？經(jīng)過仔細(xì)思考以及和開發(fā)的溝通，我給出的方案是：被禁言時(shí)，用戶仍然可以輸入文字，只是不能發(fā)送。如果是在文字輸入過程中（鍵盤展開）被禁言亦然，此時(shí)仍然可以編輯文字，只是無法發(fā)送。

加載狀態(tài)：加載數(shù)據(jù)（文字，圖片，音頻，視頻，數(shù)據(jù)包等）的過程中，界面元素會(huì)有怎樣的變化？長時(shí)間加載未成功怎么辦？

刷新狀態(tài)：刷新數(shù)據(jù)是自動(dòng)還是手動(dòng)的？執(zhí)行刷新操作時(shí)界面哪些原色會(huì)產(chǎn)生變化？刷新失敗了呢？

圖2.教室頁面的文字輸入框

以上說的這些方法，也許可以幫我們掃除一些交互設(shè)計(jì)上的漏洞。但還有一部分漏洞可能來自我們自身的

心理盲區(qū)

1. 對(duì)抗。

聽到與自己的想法不同的意見，人本能的反應(yīng)就是找理由反駁。在和產(chǎn)品經(jīng)理等其他人討論設(shè)計(jì)方案的時(shí)候，我們也問往往會(huì)遇到其他人與自己意見相左的情況。這時(shí)，首先要相信對(duì)方是對(duì)事不對(duì)人的，然后靜下心來想想對(duì)方說的是否有道理，自己之前的思路是否有問題，或者有沒有兩全其美的方案。

2. 從眾。

人們趨向于采納多數(shù)人的選擇，跟隨多數(shù)人的行動(dòng)，這樣會(huì)感覺更加安穩(wěn)，均分壓力，避免沖突。人都是有思維惰性的，從眾可以把思考問題、做決策的責(zé)任默默地移交給別人。在審核交互方案時(shí)，當(dāng)多數(shù)人喜歡某一套方案時(shí)，我們可能便選擇了這個(gè)方案。但需要清楚的是，一旦之后發(fā)現(xiàn)問題，需要負(fù)責(zé)修改方案的還是設(shè)計(jì)師自己，專業(yè)度被質(zhì)疑的還是只有設(shè)計(jì)師。因此，他人的建議只能作為參考，自己想清楚了才是王道。

3. 權(quán)威影響。

與從眾心理相似，權(quán)威影響也是一種趨從心態(tài)，其作用有時(shí)甚至大于從眾心理。在團(tuán)隊(duì)中可能會(huì)有幾個(gè)你特別欣賞的人，他們的意見你會(huì)格外看重。與這些人討論得出的結(jié)論，你會(huì)覺得更有安全感，似乎已是最佳方案。越是這樣就越要給自己敲警鐘，主動(dòng)給當(dāng)前的解決方案找茬。

4. 關(guān)閉。

當(dāng)你覺得一個(gè)方案已塵埃落定、大家都覺得ok、一切看起來都那么完美的時(shí)候，我們往往會(huì)在大腦中關(guān)閉這項(xiàng)任務(wù)，不再去想。尤其是在公開了這套方案后，你等于是在向別人宣布：“就這么定了！” 你也會(huì)格外捍衛(wèi)自己的決定。盡管我們可能已經(jīng)用了各種方法去保證方案的完善性，但人無完人，你永遠(yuǎn)不知道什么時(shí)候會(huì)發(fā)現(xiàn)新的問題。我們能做的，也只是盡量避免大問題，盡量減少剩余的問題。因此，永遠(yuǎn)不要給自己的思維打上句號(hào)，只要項(xiàng)目還未截止，就應(yīng)該不斷審視自己已有的設(shè)計(jì)。

圖3. 發(fā)現(xiàn)交互設(shè)計(jì)中的思維盲區(qū)

總結(jié)下來就是上面這張圖。最后想說這是一個(gè)永不“關(guān)閉”的話題，希望大家可以不斷補(bǔ)充，相互學(xué)習(xí)。