2015-9-24 用心設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)( www.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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)這里
來(lái)源：莫貝網(wǎng)
然而現(xiàn)實(shí)中，交互設(shè)計(jì)的改動(dòng)是難免的（因此一般一個(gè)項(xiàng)目會(huì)不斷迭代交互文檔），尤其是在時(shí)間安排緊促、產(chǎn)品需求不清晰的情況下。怎樣在交互設(shè)計(jì)階段盡可能思考周全，減少視覺(jué)設(shè)計(jì)與開發(fā)的返工呢？抱著提升自我、拯救伙伴的態(tài)度，我結(jié)合自己在移動(dòng)端app的項(xiàng)目經(jīng)驗(yàn)進(jìn)行了一些總結(jié)。這并不能涵蓋交互設(shè)計(jì)的所有方面，主要著重于設(shè)計(jì)時(shí)個(gè)人覺(jué)得容易疏漏的地方。
交互設(shè)計(jì)在我看來(lái)分結(jié)構(gòu)層面和細(xì)節(jié)層面，兩者在發(fā)現(xiàn)思維盲區(qū)、排查交互設(shè)計(jì)問(wèn)題時(shí)的角度有所不同。
結(jié)構(gòu)層面的交互設(shè)計(jì)是指，通過(guò)解析產(chǎn)品需求與核心目標(biāo)，梳理交互邏輯，設(shè)計(jì)使用流程、框架結(jié)構(gòu)和基礎(chǔ)功能。其目的是保證產(chǎn)品的可用性?？梢韵胂?，若在開發(fā)過(guò)程中對(duì)結(jié)構(gòu)層面的交互進(jìn)行改動(dòng)，成本是比較大的。
一些不成熟的結(jié)構(gòu)層面的交互設(shè)計(jì)，我覺(jué)得容易出問(wèn)題的地方主要是：
1. 沒(méi)有很好地把握平臺(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ì)把頁(yè)面跳轉(zhuǎn)到哪里，使用上是否會(huì)帶來(lái)困惑。在設(shè)計(jì)軟件結(jié)構(gòu)的初期，就需要與開發(fā)人員溝通設(shè)計(jì)稿，以便盡早發(fā)現(xiàn)問(wèn)題。
2. 頁(yè)面結(jié)構(gòu)復(fù)雜。
手機(jī)屏幕可謂寸土寸金，合理刪減一個(gè)元素，對(duì)用戶來(lái)說(shuō)就減少一個(gè)思維思維負(fù)擔(dān)或迷惑點(diǎn)。即使方案看起來(lái)OK，也需要不斷反問(wèn)自己：這種功能布局是最 簡(jiǎn)單的嗎？頁(yè)面最主要的操作是什么，是否明顯突出？其他功能或入口是否必要？頁(yè)面的組織是否清晰有規(guī)律？……不過(guò)需要注意的是，合理簡(jiǎn)化結(jié)構(gòu)的提前，是對(duì) 用戶使用場(chǎng)景有很好地了解。
3. 設(shè)計(jì)師與用戶使用經(jīng)驗(yàn)的差異。
設(shè)計(jì)師對(duì) 自己設(shè)計(jì)的產(chǎn)品十分了解，因此容易覺(jué)得一切使用起來(lái)都理所當(dāng)然，或者覺(jué)得別人稍微試一下就知道是怎么回事了。但事實(shí)上，很多人并沒(méi)這么“聰明”。這就需要 邀請(qǐng)對(duì)產(chǎn)品和項(xiàng)目不熟悉的“小白”來(lái)玩玩交互Demo，看看Ta是否能輕松知道你的產(chǎn)品是做什么的，完成核心功能時(shí)是否順暢，哪里會(huì)遇到磕絆。
細(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)的思維框架來(lái)幫助我們查漏補(bǔ)缺，而不是想到什么是什么。
1. 可以從“我”(使用者本身）和“別人”（其他使用者）的角度，檢查功能點(diǎn)是否齊全。
我：用戶間是存在差異的，有些因素將影響用戶在的需求和使用場(chǎng)景，如是否是第一次使用app，是否是會(huì)員等。站在不同用戶的角度想想，“我”在這個(gè) 頁(yè)面想做/能做什么事？做一件事的前、中、后階段，在設(shè)計(jì)上是否有體現(xiàn)？我是否可以取消、撤銷或退出某個(gè)步驟？如果中途這件事做失敗了呢？
別人：“別人”指與你在使用產(chǎn)品是直接相關(guān)的其他人。別人對(duì)我做了什么，我需要知道么？對(duì)我有何影響？舉個(gè)栗子，在一個(gè)“教室”功能的頁(yè)面中，我可 以和其他同學(xué)一起聽老師上直播課。這里老師對(duì)我有一些權(quán)限：禁止/允許我打字聊天，讓我上麥發(fā)言/下麥，把我踢出教室，給我發(fā)私聊。當(dāng)老師對(duì)我做這些事的 時(shí)候，我是否能明白是怎么回事？我知道應(yīng)該做出什么回應(yīng)嗎？我收到的提示足夠清晰嗎？
2. 檢查特殊情況。
一方面，想想用戶在使用產(chǎn)品時(shí)的主要場(chǎng)景是什么，有哪些影響因素。常見的影響因素有：
網(wǎng)絡(luò)環(huán)境：有無(wú)網(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)？在訂單頁(yè)支付倒計(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è)名額庫(kù)存，完成支付時(shí)完全扣去這個(gè)名額。如果當(dāng)你報(bào)名班級(jí)時(shí)，名額已滿，但還有人未付款，這時(shí)系統(tǒng)應(yīng)該有什么提示？這和報(bào)名班級(jí)時(shí)，班級(jí)絕對(duì)性 滿員（名額已滿，且所有人完成付款）的情況處理方式是不一樣的。另一種情況是，在你進(jìn)入確認(rèn)訂單頁(yè)時(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í)間沒(méi)有理解，可能需要進(jìn)一步友好地提示。
圖1. 班級(jí)報(bào)名關(guān)鍵頁(yè)面
另一方面，想想單個(gè)頁(yè)面元素會(huì)有哪幾種狀態(tài)。常見的狀態(tài)分類有：
中間狀態(tài)：在進(jìn)行下載、上傳、導(dǎo)入等操作時(shí)，用戶會(huì)有等待的過(guò)程。在這過(guò)程中，界面的狀態(tài)是怎樣的？怎樣讓等待不那么痛苦？是否允許中途取消？
控件狀態(tài)：控件激活、未激活、使用中的狀態(tài)是怎樣的？是否有一些限制？狀態(tài)轉(zhuǎn)變時(shí)會(huì)發(fā)生什么？其他情況的變化對(duì)控件的狀態(tài)是否有影響？以一個(gè)教室頁(yè)面的文字輸入框（圖2）為例，在輸入框中
輸入文字時(shí)，我們會(huì)在界面展示上做限制：輸入框最多顯示4行文字，鍵盤收起后保留輸入框狀態(tài)。此外。在上課過(guò)程中如果學(xué)生不守紀(jì)律，會(huì)被禁言。禁言 時(shí)輸入框的狀態(tài)是怎樣的呢？是完全不可用，還是可以編輯文字但無(wú)法發(fā)送？經(jīng)過(guò)仔細(xì)思考以及和開發(fā)的溝通，我給出的方案是：被禁言時(shí)，用戶仍然可以輸入文 字，只是不能發(fā)送。如果是在文字輸入過(guò)程中（鍵盤展開）被禁言亦然，此時(shí)仍然可以編輯文字，只是無(wú)法發(fā)送。
加載狀態(tài)：加載數(shù)據(jù)（文字，圖片，音頻，視頻，數(shù)據(jù)包等）的過(guò)程中，界面元素會(huì)有怎樣的變化？長(zhǎng)時(shí)間加載未成功怎么辦？
刷新狀態(tài)：刷新數(shù)據(jù)是自動(dòng)還是手動(dòng)的？執(zhí)行刷新操作時(shí)界面哪些原色會(huì)產(chǎn)生變化？刷新失敗了呢？
圖2.教室頁(yè)面的文字輸入框
以上說(shuō)的這些方法，也許可以幫我們掃除一些交互設(shè)計(jì)上的漏洞。但還有一部分漏洞可能來(lái)自我們自身的
1. 對(duì)抗。
聽到與自己的想法不同的意見，人本能的反應(yīng)就是找理由反駁。在和產(chǎn)品經(jīng)理等其他人討論設(shè)計(jì)方案的時(shí)候，我們也問(wèn)往往會(huì)遇到其他人與自己意見相左的情 況。這時(shí)，首先要相信對(duì)方是對(duì)事不對(duì)人的，然后靜下心來(lái)想想對(duì)方說(shuō)的是否有道理，自己之前的思路是否有問(wèn)題，或者有沒(méi)有兩全其美的方案。
2. 從眾。
人們趨向于采納多數(shù)人的選擇，跟隨多數(shù)人的行動(dòng)，這樣會(huì)感覺(jué)更加安穩(wěn)，均分壓力，避免沖突。人都是有思維惰性的，從眾可以把思考問(wèn)題、做決策的責(zé)任 默默地移交給別人。在審核交互方案時(shí)，當(dāng)多數(shù)人喜歡某一套方案時(shí)，我們可能便選擇了這個(gè)方案。但需要清楚的是，一旦之后發(fā)現(xiàn)問(wè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ì)覺(jué)得更有安全感，似乎已是最佳方案。越是這樣就越要給自己敲警鐘，主動(dòng)給當(dāng)前的解決方案找茬。
4. 關(guān)閉。
當(dāng)你覺(jué)得一個(gè)方案已塵埃落定、大家都覺(jué)得ok、一切看起來(lái)都那么完美的時(shí)候，我們往往會(huì)在大腦中關(guān)閉這項(xiàng)任務(wù)，不再去想。尤其是在公開了這套方案 后，你等于是在向別人宣布：“就這么定了！” 你也會(huì)格外捍衛(wèi)自己的決定。盡管我們可能已經(jīng)用了各種方法去保證方案的完善性，但人無(wú)完人，你永遠(yuǎn)不知道什么時(shí)候會(huì)發(fā)現(xiàn)新的問(wèn)題。我們能做的，也只是盡量 避免大問(wèn)題，盡量減少剩余的問(wèn)題。因此，永遠(yuǎn)不要給自己的思維打上句號(hào)，只要項(xiàng)目還未截止，就應(yīng)該不斷審視自己已有的設(shè)計(jì)。
圖3. 發(fā)現(xiàn)交互設(shè)計(jì)中的思維盲區(qū)
總結(jié)下來(lái)就是上面這張圖。最后想說(shuō)這是一個(gè)永不“關(guān)閉”的話題，希望大家可以不斷補(bǔ)充，相互學(xué)習(xí)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.miumiuwan.com