唐昆

【摘 要】UI設(shè)計(jì)攜手機(jī)走到今天，支撐起了整個(gè)移動(dòng)互聯(lián)網(wǎng)行業(yè)。優(yōu)秀的UI設(shè)計(jì)總會(huì)給人們帶來(lái)驚喜和美妙的用戶(hù)體驗(yàn)，文章研究了UI設(shè)計(jì)對(duì)用戶(hù)體驗(yàn)的影響，包括設(shè)計(jì)的層次和要素、做好設(shè)計(jì)應(yīng)注意的原則、設(shè)計(jì)中的應(yīng)用。了解用戶(hù)的心智模式和行為模式，從而設(shè)計(jì)出更加令用戶(hù)滿(mǎn)意的移動(dòng)互聯(lián)網(wǎng)產(chǎn)品。

【關(guān)鍵詞】移動(dòng)互聯(lián)網(wǎng)；UI設(shè)計(jì)；用戶(hù)體驗(yàn)；心智模式

1 UI設(shè)計(jì)與用戶(hù)體驗(yàn)的概念

UI設(shè)計(jì)（user interface）是指用戶(hù)與產(chǎn)品界面的關(guān)系，包含了人機(jī)交互原理、視覺(jué)設(shè)計(jì)等。UI設(shè)計(jì)直面用戶(hù)又承接程序本身，每個(gè)用戶(hù)通過(guò)界面?zhèn)鬟f的信息來(lái)作出相應(yīng)的操作，這就要求設(shè)計(jì)符合能實(shí)現(xiàn)各模塊功能，并且符合邏輯。

什么叫做用戶(hù)體驗(yàn)？用戶(hù)體驗(yàn)是一種感受。用戶(hù)在使用產(chǎn)品的過(guò)程中，產(chǎn)生的感受即用戶(hù)體驗(yàn)。從第一臺(tái)智能手機(jī)研發(fā)之日起，設(shè)計(jì)師和開(kāi)發(fā)人員致力于人機(jī)交互的研究。設(shè)計(jì)師們關(guān)注用戶(hù)在操作手機(jī)時(shí)如何與手機(jī)發(fā)生聯(lián)系。于是，可接受、易操作便成了用戶(hù)體驗(yàn)的最初目標(biāo)。移動(dòng)互聯(lián)網(wǎng)發(fā)展的今天，用戶(hù)體驗(yàn)愈加注重的是信息傳遞和視聽(tīng)感受[1]。設(shè)計(jì)師通過(guò)UI設(shè)計(jì)把更好的產(chǎn)品和服務(wù)傳遞給用戶(hù)，把大量的平面和交互設(shè)計(jì)思想融入U(xiǎn)I設(shè)計(jì)，為了用戶(hù)有更好的體驗(yàn)。

2 設(shè)計(jì)的層次和要素

2.1 設(shè)計(jì)層次

從認(rèn)知心理學(xué)的角度對(duì)人類(lèi)大腦認(rèn)知系統(tǒng)進(jìn)行研究，人類(lèi)大腦認(rèn)知系統(tǒng)將事物分為三個(gè)層次，即感官層、行為層、反思層。這三個(gè)層次層層遞進(jìn)，其中，感官層優(yōu)先級(jí)最高，感官層作用于主觀意識(shí)和邏輯思維之前。感官層的作用是大腦對(duì)產(chǎn)品生成初次印象，這與產(chǎn)品的外觀和最初的用戶(hù)體驗(yàn)息息相關(guān)。而行為層是大腦對(duì)產(chǎn)品更深層次的認(rèn)識(shí)，是用戶(hù)在使用產(chǎn)品之后，對(duì)產(chǎn)品的功能、操作的初步了解。最后進(jìn)入反思層，這是大腦認(rèn)知最高層面，大腦對(duì)產(chǎn)品的認(rèn)知，由了解轉(zhuǎn)向到精神層面上。

用戶(hù)在感官層的體驗(yàn)主要來(lái)自于產(chǎn)品本身的外觀效果和外界對(duì)該產(chǎn)品的評(píng)價(jià)。在感官層中一切關(guān)于產(chǎn)品的視覺(jué)設(shè)計(jì)，以及基本功能都是形成用戶(hù)體驗(yàn)的重要原因。而在行為層中，用戶(hù)已經(jīng)使用過(guò)產(chǎn)品，這個(gè)時(shí)候的用戶(hù)體驗(yàn)則是操作的過(guò)程，重點(diǎn)在于人機(jī)交互[2]。反思層源于情感上的理解，這個(gè)跟用戶(hù)的個(gè)人背景、文化水平、對(duì)該產(chǎn)品的熟悉程度及其他們的期待值，都會(huì)影響用戶(hù)體驗(yàn)的結(jié)果，不要試圖改變用戶(hù)的心智模式，應(yīng)該首先找準(zhǔn)設(shè)計(jì)定位。

2.2 設(shè)計(jì)要素

在小小的手機(jī)屏幕上，如何把更完整移動(dòng)互聯(lián)網(wǎng)呈現(xiàn)給用戶(hù)，這是每個(gè)設(shè)計(jì)師所關(guān)心的。首先，每個(gè)互聯(lián)網(wǎng)產(chǎn)品要有獨(dú)立的構(gòu)架，結(jié)構(gòu)清晰的產(chǎn)品更能被用戶(hù)接受。在設(shè)計(jì)網(wǎng)頁(yè)或者app的導(dǎo)航欄時(shí)，應(yīng)當(dāng)采用方位感較強(qiáng)的設(shè)計(jì)，目的是讓用戶(hù)迅速了解自己需要找到的內(nèi)容，隨時(shí)隨地告訴用戶(hù)“自己在何位置？去那能做什么？”每個(gè)頁(yè)面、每個(gè)功能模塊、每個(gè)控件都要依照整體的邏輯順序呈現(xiàn)，每個(gè)頁(yè)面的信息功能層級(jí)的表現(xiàn)形式是最重要的連接線索。

其次，控制有效信息的呈現(xiàn)量。移動(dòng)設(shè)備的屏幕尺寸很小，每次傳遞的信息量十分有限，所以，篩選出重要信息呈現(xiàn)給用戶(hù)是十分必要的。采用任務(wù)欄，標(biāo)簽等形式收納信息，對(duì)信息進(jìn)行整理分出優(yōu)先級(jí)，通過(guò)二級(jí)頁(yè)面、三級(jí)頁(yè)面分層展示給用戶(hù)相關(guān)信息，信息有條不紊地展示，從而避免誤導(dǎo)用戶(hù)、防止用戶(hù)邏輯混亂。

最后，合理引導(dǎo)用戶(hù)操作，減輕用戶(hù)操作負(fù)擔(dān)。如果想讓用戶(hù)使用一個(gè)新產(chǎn)品，設(shè)計(jì)產(chǎn)品時(shí)要確保用戶(hù)能夠輕易察覺(jué)并理解它是什么？可以用來(lái)做什么？而不是用戶(hù)無(wú)法理解無(wú)奈去翻說(shuō)明書(shū)。設(shè)計(jì)時(shí)應(yīng)注意功能可見(jiàn)性提示，給予用戶(hù)適當(dāng)?shù)牟僮魈崾?，用?hù)就容易正確使用新產(chǎn)品。不要增添用戶(hù)操作負(fù)擔(dān)，如果操作太復(fù)雜，那么就拆分成多個(gè)較為容易步驟來(lái)執(zhí)行。人類(lèi)的大腦都是“懶惰”的，用戶(hù)樂(lè)意多點(diǎn)幾下，不愿長(zhǎng)時(shí)間思考怎么去做。

3 設(shè)計(jì)應(yīng)注意的原則

3.1 用戶(hù)需求很重要

用戶(hù)想要什么就給他什么。有男孩想追心儀的女孩，女孩喜歡吃蘋(píng)果，但是男孩卻硬生生送了她一車(chē)香蕉，你覺(jué)得女孩會(huì)很高興嗎？了解用戶(hù)想要什么很重要，無(wú)須花費(fèi)大量的時(shí)間試圖改變別人根深蒂固的觀念，也不要阻止用戶(hù)長(zhǎng)期以來(lái)形成的行為模式，設(shè)計(jì)產(chǎn)品就要根據(jù)用戶(hù)的需求來(lái)。根據(jù)馬斯洛提出的人類(lèi)5個(gè)需求層次來(lái)研究人類(lèi)實(shí)際需求[3]，從人類(lèi)本身的生理需求到自我實(shí)現(xiàn)都是實(shí)際需求的切入點(diǎn)。正如美食解決人的生理需求，因?yàn)橐苿?dòng)互聯(lián)網(wǎng)產(chǎn)品大多具有娛樂(lè)性質(zhì)，所以那些產(chǎn)品切入點(diǎn)則重在情感需求和自我實(shí)現(xiàn)上。

符合用戶(hù)真實(shí)需求的產(chǎn)品才能夠吸引用戶(hù)，但真實(shí)準(zhǔn)確的需求需要發(fā)掘。礦泉水真的賣(mài)點(diǎn)真的是礦物質(zhì)水嗎？賣(mài)礦泉水的企劃其實(shí)是在賣(mài)“便攜水”，礦物質(zhì)并不是礦泉水成功的關(guān)鍵。應(yīng)用在UI設(shè)計(jì)上，一個(gè)真實(shí)準(zhǔn)確的需求并不是問(wèn)卷調(diào)查上的答案，作用到界面上，需要考慮用戶(hù)的操作習(xí)慣和心智模式。

3.2 設(shè)計(jì)保持一致性

設(shè)計(jì)產(chǎn)品前要先做好產(chǎn)品定位，根據(jù)不同用戶(hù)需求作出不同的應(yīng)對(duì)模式，并且保持設(shè)計(jì)的一致性，這是提升效率的方式。絕大多數(shù)能夠發(fā)展下去的公司或者門(mén)店，只做一類(lèi)產(chǎn)品和服務(wù)。移動(dòng)互聯(lián)網(wǎng)產(chǎn)品在確定好定位之后，也要統(tǒng)一內(nèi)容跟風(fēng)格，風(fēng)格不統(tǒng)一猶如在書(shū)店里開(kāi)養(yǎng)殖場(chǎng)，這是何等景象？

定位的明確伴隨著UI界面的設(shè)計(jì)統(tǒng)一，要從視覺(jué)上、功能上、操作上都按照統(tǒng)一的邏輯和心智模式進(jìn)行設(shè)計(jì)。設(shè)計(jì)不僅僅在美學(xué)的范疇，還附加著文化、社會(huì)、歷史等多個(gè)角度的復(fù)合用戶(hù)體驗(yàn)[4]。常常美學(xué)與人機(jī)交互之間是最難平衡的，每一個(gè)功能模塊與操作流程要匹配得當(dāng)，這愈加需要設(shè)計(jì)統(tǒng)一。

3.3 合理的信息反饋

顯示操作結(jié)果是用戶(hù)執(zhí)行操作步驟后最關(guān)心的事項(xiàng)，是人機(jī)交互設(shè)計(jì)最重要的方面。當(dāng)用戶(hù)點(diǎn)了按鈕，便會(huì)對(duì)操作是擬定一個(gè)預(yù)期，給予用戶(hù)的預(yù)期一個(gè)結(jié)果，并及時(shí)顯示反饋信息來(lái)引導(dǎo)用戶(hù)操作。沒(méi)有了信息的及時(shí)反饋，用戶(hù)會(huì)琢磨這或許是操作錯(cuò)誤？還是按的時(shí)長(zhǎng)不夠？機(jī)器停止運(yùn)轉(zhuǎn)了？這些都是給用戶(hù)留下了不好的體驗(yàn)。endprint

反饋?zhàn)尣僮饔小百|(zhì)感”，每次一個(gè)操作步驟完成的反饋都是一次交互，讓用戶(hù)有種把控全局的感覺(jué)，使得信息處理及時(shí)、準(zhǔn)確。用戶(hù)在操作時(shí)，反饋要符合信息邏輯層面，有助于用戶(hù)預(yù)測(cè)和計(jì)劃執(zhí)行下一步操作，順應(yīng)用戶(hù)心智模式。并且，在每個(gè)模塊、每個(gè)功能、每項(xiàng)操作上都要使用反饋機(jī)制，保持反饋的連續(xù)性，從而保持用戶(hù)操作的邏輯性。

3.4 易于識(shí)別的設(shè)計(jì)

你若在使用物品時(shí)遇到麻煩——開(kāi)這個(gè)門(mén)是推還是拉？當(dāng)遇到操作上的麻煩時(shí)，或許不是用戶(hù)本身的問(wèn)題，可能是產(chǎn)品設(shè)計(jì)的毛病。當(dāng)用戶(hù)首次使用和操作某個(gè)界面時(shí)，用戶(hù)如何去得知產(chǎn)品的使用方法？是翻開(kāi)說(shuō)明書(shū)看看嗎？人類(lèi)大腦會(huì)從數(shù)以萬(wàn)計(jì)的物品中找出與其相似的物體，找出其中的聯(lián)系，使用象形圖提示用戶(hù)，在這個(gè)條件反射的推動(dòng)下探索新物品的使用方法。人類(lèi)大腦中存在著無(wú)數(shù)這樣的“機(jī)關(guān)”，容易讓用戶(hù)看懂的設(shè)計(jì)會(huì)使用戶(hù)不知不覺(jué)對(duì)產(chǎn)品產(chǎn)生好感，所以，易于識(shí)別的設(shè)計(jì)用戶(hù)體驗(yàn)的關(guān)鍵。

3.5 減少記憶負(fù)擔(dān)

在頁(yè)面的功能模塊設(shè)計(jì)上，很多細(xì)節(jié)有助于獲得更好的用戶(hù)體驗(yàn)。人們能分門(mén)別類(lèi)地記住信息，并且如果每個(gè)記憶類(lèi)別里只有1至4條信息，那么人們能夠出色地回憶起來(lái)，所以，在設(shè)計(jì)的時(shí)候分類(lèi)一般一排只顯示不多余4個(gè)類(lèi)別信息，這樣有利于減少大腦記憶負(fù)擔(dān)。其次，點(diǎn)擊次數(shù)并不重要，人們?cè)敢庠谝龑?dǎo)下點(diǎn)擊操作多次。如果用戶(hù)在每次點(diǎn)擊時(shí)都能得到適量信息反饋，愿意沿著設(shè)計(jì)思路繼續(xù)查看網(wǎng)站，那么用戶(hù)壓根不會(huì)注意到點(diǎn)擊的操作。只要你給出明確的指示，并且任務(wù)不太費(fèi)時(shí)間，人們就能集中注意力并沉浸其中，而忽略別的干擾。任何減少記憶負(fù)擔(dān)的設(shè)計(jì)，都會(huì)解放用戶(hù)的大腦。

4 信息圖形的應(yīng)用

4.1 利用信息圖形展示

信息圖像設(shè)計(jì)就是針對(duì)內(nèi)容復(fù)雜、難以描述的信息進(jìn)行充分的理解、提煉、整理，并將其進(jìn)行可視化設(shè)計(jì)，通過(guò)簡(jiǎn)單清晰的圖像向用戶(hù)直觀展示。不同文字描述，圖像會(huì)刺激大腦視覺(jué)中樞，這種信息常常會(huì)給用戶(hù)留下深刻印象，更容易被用戶(hù)接受。

4.2 圖形讓信息更清晰

在設(shè)計(jì)時(shí)使用圖形展示信息，能夠很清楚的讓用戶(hù)了解情況，并引導(dǎo)用戶(hù)操作。根據(jù)木村博之的定義[5]，從視覺(jué)表現(xiàn)形式的角度，將“信息圖形”的呈現(xiàn)方式分為六大類(lèi)：圖解（Diagram）、圖表（Chart）、表格（Table）、統(tǒng)計(jì)圖（Graph）、地圖（Map）、圖形符號(hào)（Pictogram）。使用圖形能把信息形象化地展示給用戶(hù)，讓用戶(hù)更清晰地了解。

4.3 圖形讓用戶(hù)更快分辨

相比于文字，人腦能夠快速地辨別和記住更多的圖形信息。如“前方危險(xiǎn)禁止通行”的交通標(biāo)識(shí)牌與獨(dú)立的字牌，可想而知，人們?cè)趫D形上獲取信息的速度快過(guò)文字。并且，圖形的顏色也能直觀的表達(dá)信息。使用于生活實(shí)際物體相關(guān)的圖片來(lái)尋求相似的設(shè)計(jì)。在設(shè)計(jì)時(shí)，當(dāng)文字和圖形均可使用時(shí)，圖形加文字的組合是最合適選擇，展示空間有限時(shí)，單使用圖形傳遞信息也不錯(cuò)。

4.4 少用文字，用圖釋義

一幅圖片沒(méi)有或者很少有文字信息，它的含義也能被用戶(hù)理解，這才是設(shè)計(jì)信息圖形的初衷。信息圖形能夠在全世界范圍內(nèi)、不同語(yǔ)言環(huán)境下使用，不同膚色的人要理解信息圖的內(nèi)容也不困難?？刂葡鄬?duì)的信息量，讓信息符合邏輯、有條不紊地展示出來(lái)，在設(shè)計(jì)過(guò)程中，無(wú)需使用大量文字說(shuō)明，盡量使用圖形表示。確保用戶(hù)正確讀取信息，這是信息圖形設(shè)計(jì)所要追求的目標(biāo)。

5 結(jié)語(yǔ)

移動(dòng)互聯(lián)網(wǎng)中的UI設(shè)計(jì)與用戶(hù)，UI設(shè)計(jì)服務(wù)于用戶(hù)，追求的是良好的用戶(hù)體驗(yàn)。每個(gè)設(shè)計(jì)師必須遵循用戶(hù)的心智模式和行為模式是基本要求、掌握設(shè)計(jì)原則、拿捏用戶(hù)心理。隨著時(shí)代的發(fā)展和技術(shù)的革新，創(chuàng)新可能會(huì)成為UI設(shè)計(jì)的主要導(dǎo)向，敢問(wèn)路在何方，用戶(hù)體驗(yàn)指引遠(yuǎn)航。

【參考文獻(xiàn)】

[1]張晨起，PhotoshopUI交互設(shè)計(jì)人民郵電出版社[M].2016.

[2]蘇杰.人人都是產(chǎn)品經(jīng)理[M].電子工業(yè)出版社，2010.

[3]（美）戴維.巴斯.進(jìn)化心理學(xué)[M].商務(wù)印書(shū)館，1999.

[4]（美）唐納德.A.諾曼.設(shè)計(jì)心理學(xué)[M].中信出版社，2010.

[5]木村博之，圖解力[M].人民郵電出版社，2013.endprint