交互設(shè)計(jì)：如何做到周到？

2019-12-25    資深UI設(shè)計(jì)者

在涉及體驗(yàn)細(xì)節(jié)的小需求上，避免所有的不周到，方才是周到


前兩篇，探討了個(gè)人對(duì)交互設(shè)計(jì)價(jià)值觀的理解，以及其對(duì)從業(yè)者和用戶的價(jià)值。


這一篇，我們就來(lái)探討一下，如何做到之前提到的 4 點(diǎn)價(jià)值觀。


先從“周到“開(kāi)始。

僅為一家之言。歡迎留言交流，說(shuō)出你的看法。



01 怎樣算是周到？


本著嚴(yán)謹(jǐn)?shù)膽B(tài)度，先捋一捋概念。


常言道，金杯銀杯，不如百姓口碑。


同理，周不周到，最終還是用戶說(shuō)了算。那用戶是怎么評(píng)判的呢？通常是憑主觀感受。


拿上篇文章中網(wǎng)易號(hào)文章編輯頁(yè)面的例子來(lái)說(shuō)，因?yàn)椤氨４妗焙汀按娌莞濉惫δ茏龅牟粔蚝?，所以給筆者留下了不夠周到的印象。


翻譯過(guò)來(lái)，就是，一些體驗(yàn)細(xì)節(jié)，影響了用戶的印象。


《設(shè)計(jì)師要懂心理學(xué)》這本書(shū)中有條原則，叫“整體認(rèn)知主要依靠周邊視覺(jué)而非中央視覺(jué)”。


講的是視覺(jué)和 UI 層面的用戶認(rèn)知。就是說(shuō)，用戶會(huì)關(guān)注并不顯眼的邊邊角角的設(shè)計(jì)，而且這些邊邊角角的設(shè)計(jì)會(huì)影響用戶對(duì)整體設(shè)計(jì)的認(rèn)知和印象。


舉個(gè)例子。假如說(shuō)，微博信息流頁(yè)面的掃一掃圖標(biāo)，在風(fēng)格、大小等方面和其它圖標(biāo)不統(tǒng)一，就會(huì)給用戶留下比較糟糕的印象，用戶很可能會(huì)覺(jué)得微博的設(shè)計(jì)不夠?qū)I(yè)。


這些是 UI 設(shè)計(jì)層面的。在交互設(shè)計(jì)層面，也是類(lèi)似的道理：體驗(yàn)細(xì)節(jié)會(huì)影響用戶的認(rèn)知。


總的來(lái)說(shuō)，至少在常用的交互細(xì)節(jié)上，不要給用戶留下負(fù)面印象，也不要讓用戶產(chǎn)生負(fù)面情緒，避免所有的不周到，才算是周到。



02 如何做到周到？


個(gè)人覺(jué)得，最關(guān)鍵的地方，是滿足好小需求。



啥是小需求？


個(gè)人觀點(diǎn)，籠統(tǒng)的講， 小需求是一種共性需求， 主要是一些體驗(yàn)細(xì)節(jié)。比如信息的分類(lèi)與展示、銜接不同頁(yè)面的各種彈窗與提示、對(duì)各種狀態(tài)的提示、對(duì)各種情況的到位解釋?zhuān)鹊取?/section>


有小需求，就有大需求。


所謂大需求，更多是一種個(gè)性需求， 不同的產(chǎn)品，會(huì)有不同的大需求。比如短視頻產(chǎn)品，它的大需求會(huì)包含視頻的拍攝、上傳、播放等；資訊類(lèi)產(chǎn)品，它的大需求則包含文章的撰寫(xiě)、編輯、發(fā)布、查看等。



工作經(jīng)歷，筆者見(jiàn)過(guò)一些交互設(shè)計(jì)不夠周到的產(chǎn)品。它們的共同特點(diǎn)就是： 大需求基本上得到了很好的滿足，小需求沒(méi)有得到很好的滿足。


這一大段，就圍繞如何更好的滿足小需求來(lái)展開(kāi)。主要建議如下。



1 工欲善其事，必先利其器


筆者有個(gè)客戶，是從事教育行業(yè)的，之前并沒(méi)有接觸過(guò)互聯(lián)網(wǎng)行業(yè)的產(chǎn)品與設(shè)計(jì)工作。


這位客戶找到筆者的時(shí)候，是想要設(shè)計(jì)一款小程序的界面。當(dāng)時(shí)客戶非常自豪的對(duì)筆者說(shuō)，這個(gè)（原型）是我用墨刀畫(huà)的，現(xiàn)學(xué)現(xiàn)做。


說(shuō)起墨刀，本人也用過(guò)。和 Axure 相比，確實(shí)好用太多，在簡(jiǎn)潔性和智能性方面，感覺(jué)和 Sketch 有異曲同工之處。


關(guān)于墨刀如何好用，網(wǎng)上已經(jīng)有太多溢美之詞。筆者就結(jié)合自己的使用經(jīng)歷，簡(jiǎn)單總結(jié)一下：

1 好用，上手快。零基礎(chǔ)，只要會(huì)操作常用辦公軟件，簡(jiǎn)單學(xué)一下就能上手

2 內(nèi)置主流控件（iOS，安卓，WeUI等），非常方便

3 能在手機(jī)端預(yù)覽。加入鏈接和動(dòng)效后，會(huì)很酷

4 能查看頁(yè)面之間的跳轉(zhuǎn)邏輯。借助工作流功能，可實(shí)現(xiàn)這一點(diǎn)


以上主要是墨刀自身的優(yōu)點(diǎn)。結(jié)合本段主題，我們?cè)偬接懸幌拢瑢?duì)于日常工作，墨刀這把利器有哪些優(yōu)勢(shì)。


1.1 可以把更多精力花在創(chuàng)作上


當(dāng)我們不會(huì)用一款工具時(shí)，通常會(huì)有一些挫敗感。如果必須要用，接著很可能就會(huì)有一點(diǎn)焦灼了。


而墨刀，基本上不會(huì)讓我們體會(huì)到這些感覺(jué)。


我們也不用花無(wú)謂的時(shí)間去學(xué)習(xí)一些艱難的高深的技法，而是可以把更多的時(shí)間花在“創(chuàng)作”這件事上。


1.2 可以更好的去滿足小需求


部分公司，可能面臨如下情況。


公司沒(méi)有專(zhuān)門(mén)的交互設(shè)計(jì)師，產(chǎn)品的原型由產(chǎn)品經(jīng)理來(lái)畫(huà)。產(chǎn)品經(jīng)理本身還兼任項(xiàng)目經(jīng)理。


如果項(xiàng)目又特別趕，客觀上，產(chǎn)品經(jīng)理確實(shí)沒(méi)有太多時(shí)間去關(guān)注交互的體驗(yàn)細(xì)節(jié)。

主觀上，如果產(chǎn)品經(jīng)理對(duì)這些交互細(xì)節(jié)的興趣或重視程度不足、同時(shí)產(chǎn)品經(jīng)理上面的決策層也不去抓這些體驗(yàn)細(xì)節(jié)，最終的結(jié)果，就是產(chǎn)品的原型上可能會(huì)丟失很多體驗(yàn)細(xì)節(jié)。


筆者就有類(lèi)似的經(jīng)歷。


一款 App，產(chǎn)品經(jīng)理用 Axure 畫(huà)的原型。評(píng)審或宣講需求的時(shí)候，大家都是在電腦或會(huì)議室大屏幕上來(lái)看這個(gè)原型，同時(shí)所有人關(guān)注的是大需求。


理解完大需求，會(huì)有部分同學(xué)就大需求提出自己的看法或建議。最后，才會(huì)有部分同學(xué)就小需求指出不足并提出建議。


受限于職責(zé)、時(shí)間等各種因素，大家也不可能針對(duì)小需求提出太多建議。結(jié)果就是，仍然會(huì)有相當(dāng)數(shù)量的小需求被遺漏，或者沒(méi)有被很好的滿足。


墨刀有兩個(gè)功能，可以較好的規(guī)避這些問(wèn)題。一個(gè)是工作流功能，一個(gè)是手機(jī)端預(yù)覽功能。


工作流功能，類(lèi)似流程圖，即把所有頁(yè)面以合乎邏輯的方式鏈接起來(lái)?？陀^上，會(huì)促使我們畫(huà)出所有包含小需求的頁(yè)面，包括彈窗、狀態(tài)提示等。


支持多人的手機(jī)端預(yù)覽功能，使得我們?cè)谑謾C(jī)上，可以通過(guò)點(diǎn)擊等方式來(lái)模擬體驗(yàn)這款 App。這樣的環(huán)境下，我們會(huì)更容易理解大需求，也更容易發(fā)現(xiàn)小需求存在的問(wèn)題。


所以，個(gè)人的建議，就是用墨刀來(lái)畫(huà)原型，同時(shí)把工作流和多人手機(jī)端預(yù)覽（針對(duì) App、小程序）這兩項(xiàng)，作為硬性標(biāo)準(zhǔn)。


2 去用去感受


一款產(chǎn)品，在體驗(yàn)或使用時(shí)，非常容易發(fā)現(xiàn)問(wèn)題。


因?yàn)檫@時(shí)候，我們可以松弛下來(lái)，把自己切換成普通用戶。忘掉所有費(fèi)腦子的需求和設(shè)計(jì)原理，只依賴經(jīng)驗(yàn)和直覺(jué)來(lái)用這款產(chǎn)品。我們的主觀感受，會(huì)告訴我們，這款產(chǎn)品的交互，到底周不周到。


據(jù)陸樹(shù)燊的《微信團(tuán)隊(duì)的實(shí)驗(yàn)室文化》一文顯示，張小龍?jiān)u審微信的功能，不看原型圖，不看設(shè)計(jì)稿，也不看 Demo，而是體驗(yàn)前后臺(tái)代碼開(kāi)發(fā)好后的產(chǎn)品。這就意味著，如果一個(gè)功能在給到用戶前有 N 個(gè)方案，就會(huì)有 N 個(gè)方案對(duì)應(yīng)的前后臺(tái)代碼。


一定程度上，微信團(tuán)隊(duì)就是通過(guò)這種在正式發(fā)布前反復(fù)試錯(cuò)、不斷打磨的方式，最終給用戶提供了優(yōu)秀的交互體驗(yàn)。


估計(jì)，絕大部分團(tuán)隊(duì)和公司，都做不到微信這樣，開(kāi)發(fā) N 個(gè)版本，并去一一體驗(yàn)和比較這 N 個(gè)版本。


無(wú)法體驗(yàn)已經(jīng)開(kāi)發(fā)好的 N 個(gè)版本。但是，在真實(shí)的設(shè)備上體驗(yàn) N 個(gè)原型，我們還是可以做到的。


原型雖然沒(méi)有開(kāi)發(fā)好的產(chǎn)品那么順暢和流暢，但是，如果用墨刀在手機(jī)端體驗(yàn)一款加了鏈接和動(dòng)效的 App 原型，一樣可以發(fā)現(xiàn)很多問(wèn)題。


不過(guò)，根據(jù)經(jīng)歷和觀察，筆者發(fā)現(xiàn)，我們?nèi)祟?lèi)，是不喜歡體驗(yàn)原型的。

想一想，平常工作中，我們可能會(huì)樂(lè)此不疲的去體驗(yàn)開(kāi)發(fā)好的測(cè)試版產(chǎn)品。但對(duì)于原型，大部分時(shí)候，都是匆匆忙忙就過(guò)掉了。


個(gè)人有個(gè)猜測(cè)，就好像人類(lèi)喜歡逗貓遛狗、卻不太喜歡逗桌子上的模型貓和模型狗一樣，我們?nèi)祟?lèi)是不太愿意花費(fèi)太多時(shí)間和精力去和原型這種“假產(chǎn)品”互動(dòng)的。


所以，某種程度上，體驗(yàn)原型，是一種反人性的行為。


但卻是一種非常經(jīng)濟(jì)和的方法。


因?yàn)槭紫龋蟛糠謺r(shí)候，我們都是先選中一個(gè)原型方案，然后去設(shè)計(jì)、去開(kāi)發(fā)；其次，等到開(kāi)發(fā)好進(jìn)入測(cè)試環(huán)節(jié)，這時(shí)候，原型往往就成了測(cè)試的標(biāo)準(zhǔn)，依靠測(cè)試來(lái)優(yōu)化原型是不現(xiàn)實(shí)的。


所以，結(jié)合現(xiàn)狀，綜合來(lái)看，小需求能不能得到很好的滿足，很大程度上還是要依靠原型。


也就是說(shuō)，很有必要對(duì)原型進(jìn)行優(yōu)化。具體方法，就是在真實(shí)的設(shè)備上體驗(yàn)原型、反復(fù)體驗(yàn)、多人體驗(yàn)，并進(jìn)行相應(yīng)優(yōu)化。


3 參考設(shè)計(jì)規(guī)范


如前所述，用利器來(lái)創(chuàng)作原型，反復(fù)在原型里體驗(yàn)產(chǎn)品，這些強(qiáng)調(diào)的是內(nèi)部力量，即自身的努力。


下面，再談一談外部力量，即外界海量的知識(shí)與經(jīng)驗(yàn)。


說(shuō)起外界知識(shí)，除了直接參考其他產(chǎn)品的設(shè)計(jì)以外，大家參考最多的，可能就是《iOS Human Interface Guidelines》和《Material Design》這些設(shè)計(jì)規(guī)范了。


根據(jù)筆者的實(shí)際經(jīng)驗(yàn)，這兩個(gè)來(lái)自蘋(píng)果和谷歌的設(shè)計(jì)規(guī)范，很多時(shí)候，我們都是拿它們當(dāng)字典用。即哪一點(diǎn)不會(huì)或不太確定的時(shí)候，去翻一翻查一查。


雖然這倆規(guī)范很優(yōu)秀，但是卻很難被我們“物盡其用”，因?yàn)樗鼈兊闹R(shí)體系過(guò)于龐大，有點(diǎn)像一本字典。拿著“字典”里的每一條原則去檢驗(yàn)我們的交互設(shè)計(jì)，這是很難做到的。


但是有一個(gè)設(shè)計(jì)規(guī)范，去非常適合拿來(lái)檢驗(yàn)我們的交互設(shè)計(jì)，那就是尼爾森十大可用性原則。


太詳細(xì)的就不贅述了，這里我們?cè)俸?jiǎn)單回顧下這十條原則。


1) 狀態(tài)可見(jiàn)
用戶時(shí)刻清楚，正在發(fā)生什么


2) 環(huán)境貼切
營(yíng)造一個(gè)用戶熟悉的環(huán)境，比如語(yǔ)言、詞語(yǔ)、圖標(biāo)等


3) 用戶可控
控制權(quán)交給用戶，并且多數(shù)時(shí)候，考慮支持撤銷(xiāo)重做


4) 一致性
方方面面的統(tǒng)一，比如文案、視覺(jué)、操作等


5) 防錯(cuò)
盡最大可能，幫助用戶，避免用戶犯錯(cuò)


6) 易取：識(shí)別比記憶好
通過(guò)把組件、按鈕等元素可見(jiàn)化，降低用戶記憶負(fù)擔(dān)


7) 靈活
優(yōu)先考慮人數(shù)最多的中級(jí)用戶，同時(shí)兼顧高級(jí)和初級(jí)用戶


8) 易掃：優(yōu)美且簡(jiǎn)約
閱讀體驗(yàn)要好，掃視體驗(yàn)也要好；保持簡(jiǎn)約和美觀


9) 容錯(cuò)
幫助用戶識(shí)別、診斷，并從錯(cuò)誤中恢復(fù)


10) 人性化幫助
日常的使用最好脫離幫助文檔，但有必要提供幫助文檔



個(gè)人非常建議，在日常工作中，把尼爾森十大可用性原則作為一把標(biāo)尺，來(lái)時(shí)時(shí)刻刻檢驗(yàn)我們的交互設(shè)計(jì)。



結(jié)語(yǔ)


交互設(shè)計(jì)，在涉及體驗(yàn)細(xì)節(jié)的小需求上，避免所有的不周到，方才是周到。


用利器創(chuàng)作原型，要包含流程圖；多體驗(yàn)原型或產(chǎn)品，以體驗(yàn)結(jié)果為準(zhǔn)、而非討論結(jié)果為準(zhǔn)；參考優(yōu)秀的設(shè)計(jì)規(guī)范，用尼爾森十大可用性原則來(lái)檢驗(yàn)原型。


以上三點(diǎn)，可以幫助我們做到交互設(shè)計(jì)的周到。

其中，個(gè)人認(rèn)為，最為核心的是第二點(diǎn)：多體驗(yàn)原型或產(chǎn)品，直到自己覺(jué)得周到為止。



文章來(lái)源：站酷

分享本文至：

日歷

鏈接

個(gè)人資料

存檔