移動互聯(lián)網(wǎng)中的UI設(shè)計與用戶體驗

唐昆

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

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

1 UI設(shè)計與用戶體驗的概念

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

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

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

2.1 設(shè)計層次

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

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

2.2 設(shè)計要素

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

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

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

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

3.1 用戶需求很重要

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

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

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

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

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

3.3 合理的信息反饋

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

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

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

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

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

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

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

4.1 利用信息圖形展示

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

4.2 圖形讓信息更清晰

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

4.3 圖形讓用戶更快分辨

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

4.4 少用文字，用圖釋義

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

5 結(jié)語

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

【參考文獻(xiàn)】

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

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

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

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

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