手機(jī)APP用戶體驗(yàn)設(shè)計(jì)中的一致性探究

代婧　黃智宇

摘要：隨著移動(dòng)互聯(lián)網(wǎng)時(shí)代的到來(lái)，各種移動(dòng)智能設(shè)備正在占據(jù)著我們的工作和生活，以人為中心的用戶體驗(yàn)設(shè)計(jì)在國(guó)內(nèi)外設(shè)計(jì)界飛速發(fā)展；在眾多APP的設(shè)計(jì)中，用戶體驗(yàn)逐漸成為貫穿整個(gè)設(shè)計(jì)的主線，保持設(shè)計(jì)的一致性可以讓用戶感到易用與舒適并提升用戶體驗(yàn)，這成為決定用戶滿意度與忠誠(chéng)度的關(guān)鍵性因素。本文將從視覺設(shè)計(jì)、交互設(shè)計(jì)和產(chǎn)品迭代三個(gè)方面來(lái)探討APP用戶體驗(yàn)設(shè)計(jì)中的一致性原則。

關(guān)鍵詞：APP設(shè)計(jì) 用戶體驗(yàn) 一致性理論

中圖分類號(hào)：TB472 文獻(xiàn)標(biāo)識(shí)tR：A

文章編號(hào)：1003-0069（2018）04-0131-03

引言

手機(jī)APP的設(shè)計(jì)，從最初對(duì)設(shè)備功能性和操作流程的考慮，發(fā)展至今逐漸趨向?qū)θ说那楦行枨蠛托睦硖卣鞯难芯?，用戶體驗(yàn)成為了移動(dòng)端APP價(jià)值衡量的新標(biāo)準(zhǔn)。因此，本文從一致性的角度對(duì)手機(jī)APP的用戶體驗(yàn)設(shè)計(jì)進(jìn)行了探究。

一、對(duì)一致性的闡述

早在傳統(tǒng)的計(jì)算機(jī)軟件開發(fā)行業(yè)，Ben Shneiderman在《Designing the User Interface》一書中就提到了：一致性主要是指應(yīng)用程序中的通用操作序列、術(shù)語(yǔ)、組件、布局、顏色、排版樣式等的統(tǒng)一。

APP的產(chǎn)品會(huì)不斷迭代更新，但是所有升級(jí)的基礎(chǔ)都應(yīng)該基于一致性的原則，這不是一味地復(fù)制抄襲并固定的統(tǒng)一標(biāo)準(zhǔn)，而是縝密的一致性原則——在設(shè)計(jì)的過程中非常關(guān)注用戶以往的使用經(jīng)驗(yàn)以及產(chǎn)品本身邏輯上的匹配，但同時(shí)也注意保持產(chǎn)品對(duì)用戶的吸引力。優(yōu)秀的APP在達(dá)到設(shè)計(jì)的一致性后，一方面能夠提升團(tuán)隊(duì)協(xié)作的效率，讓各個(gè)部門的工作在已有的框架下進(jìn)行，而不會(huì)偏離產(chǎn)品，另一方面也能夠在用戶心中快速建立一個(gè)精準(zhǔn)的心智模型，有效地降低用戶的學(xué)習(xí)成本，提升產(chǎn)品的使用體驗(yàn)。不難發(fā)現(xiàn)，優(yōu)秀的APP能夠在眾多競(jìng)品中贏得用戶的滿意度與忠誠(chéng)度最基本的一個(gè)原則便是保持一致性。

二、手機(jī)APP的用戶體驗(yàn)要素

Jesse James Garrett提出了用戶體驗(yàn)要素的五個(gè)層面，包括表現(xiàn)層、框架層、結(jié)構(gòu)層、范圍層和戰(zhàn)略層。表現(xiàn)層指視覺設(shè)計(jì)，包含有屏的產(chǎn)品操作系統(tǒng)視覺和產(chǎn)品外觀視覺或最終產(chǎn)品的外觀；框架層指信息架構(gòu)設(shè)計(jì)，即搭建產(chǎn)品的骨架，包括將信息分級(jí)分類，對(duì)應(yīng)信息空間方面來(lái)說，這種界面就是屏幕上的一些元素的組合，允許用戶在信息架構(gòu)中穿行；結(jié)構(gòu)層從范圍轉(zhuǎn)變成系統(tǒng)如何響應(yīng)用戶的請(qǐng)求，在信息空間方面，結(jié)構(gòu)層則是信息空間中內(nèi)容元素的分布；范圍層指對(duì)產(chǎn)品實(shí)現(xiàn)功能組合的各種內(nèi)容元素的要求詳細(xì)描述；戰(zhàn)略層指與來(lái)自外部的用戶需求相對(duì)應(yīng)的企業(yè)內(nèi)部對(duì)產(chǎn)品的期望目標(biāo)。

現(xiàn)階段，手機(jī)APP的設(shè)計(jì)總流程可以分為視覺設(shè)計(jì)、交互設(shè)計(jì)和產(chǎn)品迭代，分別對(duì)應(yīng)了用戶體驗(yàn)的表現(xiàn)層、框架層和結(jié)構(gòu)層、范圍層和戰(zhàn)略層。本文將從這三個(gè)方面探討APP用戶體驗(yàn)設(shè)計(jì)的一致性。

三、視覺設(shè)計(jì)的一致性

手機(jī)APP中的視覺界面是直接聯(lián)系用戶的重要媒介，也能給予用戶最直觀的感受，視覺界面能夠直接影響用戶對(duì)產(chǎn)品的心理印象，視覺的一致性主要體現(xiàn)在APP界面的風(fēng)格、布局、色彩、文字這四個(gè)方面。

（一）風(fēng)格統(tǒng)一

界面風(fēng)格即產(chǎn)品的格調(diào)，是指APP通過色彩的搭配、版式的編排等呈現(xiàn)出的一種整體視覺感受，常見的APP風(fēng)格有三類：擬物化設(shè)計(jì)風(fēng)格（Skeuomorphism Design）、材質(zhì)化設(shè)計(jì)風(fēng)格（Material Design）、扁平化設(shè)計(jì)風(fēng)格（Flat Design），界面風(fēng)格的設(shè)計(jì)往往是手機(jī)APP視覺設(shè)計(jì)的第一步，無(wú)論決定使用什么樣的設(shè)計(jì)風(fēng)格，整體的界面都應(yīng)該一致性地貫徹始終，如果界面中各個(gè)頁(yè)面或元素的風(fēng)格都無(wú)法統(tǒng)一，只會(huì)讓用戶產(chǎn)生粗制濫造的印象，對(duì)用戶體驗(yàn)帶來(lái)負(fù)面影響。

（二）布局一致

布局即界面中的版式編排，指不同的元素、控件及功能模塊等在界面中的排列效果，在視覺設(shè)計(jì)中應(yīng)保持一致的編排邏輯與法則，避免出現(xiàn)多種對(duì)齊、分布方式而造成視覺上的混亂。（如圖1），相比滴滴出行的確認(rèn)呼叫頁(yè)面中文字居左按鈕和標(biāo)題居中的布局，Uber優(yōu)步的打車確認(rèn)頁(yè)面整體更加穩(wěn)定，一致性的中心對(duì)稱經(jīng)過了設(shè)計(jì)的推敲，無(wú)論是按鈕還是文字都在頁(yè)面中得到了和諧統(tǒng)一。

（三）色彩規(guī)范

優(yōu)秀的APP往往都有一套規(guī)范的配色方案，通常會(huì)規(guī)定在界面中各個(gè)按鈕、文字、背景等視覺元素的準(zhǔn)確色值。這樣規(guī)范的好處是保證團(tuán)隊(duì)協(xié)作由不同設(shè)計(jì)師完成方案都能展現(xiàn)一致的視覺色彩效果，在提高設(shè)計(jì)效率的基礎(chǔ)上也強(qiáng)化了APP的視覺記憶性。

在圖形界面的視覺設(shè)計(jì)中，按重要性和吸引力來(lái)看，可以將色彩分為主色、輔助色和背景色。主色往往是產(chǎn)品的品牌色或代表色，例如滴滴出行應(yīng)用于品牌logo和界面中文字和圖形按鈕統(tǒng)一的橘色主色；輔助色是點(diǎn)綴界面的顏色，通常是提示氣泡或圖標(biāo)的顏色，它們?cè)诮缑嬷兴急壤淮?，但可以活躍界面的氣氛。優(yōu)秀的APP往往都有一套規(guī)范的配色方案，通常會(huì)規(guī)定產(chǎn)品的主色、輔助色和背景色，以及在界面中各個(gè)按鈕、文字、圖標(biāo)等視覺元素的準(zhǔn)確色值。這樣規(guī)范的好處是保證團(tuán)隊(duì)協(xié)作由不同設(shè)計(jì)師完成方案都能展現(xiàn)一致的視覺色彩效果，在充分提高設(shè)計(jì)效率的基礎(chǔ)上也強(qiáng)化了APP的視覺記憶性。

（四）文字規(guī)范

APP中文字的形式應(yīng)保持一致性的原則，文字的形式是指字體、字號(hào)、字重等表現(xiàn)樣式，設(shè)計(jì)時(shí)應(yīng)該同配色方案一樣建立一套文字規(guī)范，避免一款A(yù)PP中出現(xiàn)多種字體及大小不一的字號(hào)。另外，文字內(nèi)容也應(yīng)保持邏輯的一致性，“確定”對(duì)應(yīng)“取消”，“是”對(duì)應(yīng)“否”，嚴(yán)謹(jǐn)?shù)谋硎鼍筒粫?huì)給用戶帶來(lái)困擾。（如圖2），滴滴出行與Uber優(yōu)步作為打車軟件，輸入目的地與出發(fā)地的操作是APP的重要功能之一，然而在文字表述上，兩款業(yè)內(nèi)具有代表性的軟件都出現(xiàn)了不一致的表達(dá)，滴滴出行的“輸入出發(fā)地”并不能良好地對(duì)應(yīng)到“你要去哪兒”，一致性的文字表達(dá)應(yīng)當(dāng)是“輸入出發(fā)地”對(duì)應(yīng)“輸入目的地”，或者“你從哪兒來(lái)”對(duì)應(yīng)“你要去哪”，Uber優(yōu)步的輸入框中“您”和“你”的文字表述也并不具有良好的一致性，雖然這些細(xì)微的差別并不影響產(chǎn)品的功能，但會(huì)降低產(chǎn)品的設(shè)計(jì)品質(zhì)，最終將會(huì)影響產(chǎn)品在用戶心中的良好形象。

四、交互設(shè)計(jì)的一致性

依據(jù)Jon Kolko在《交互設(shè)計(jì)沉思錄》中的定義：“交互設(shè)計(jì)，指在人與產(chǎn)品、服務(wù)或系統(tǒng)之間創(chuàng)建的一系列對(duì)話（Dialogue）”，可以看出交互的本質(zhì)是一系列對(duì)話，而產(chǎn)生對(duì)話行為必定包含兩個(gè)或兩個(gè)以上的“人”之間的談話。在APP中的交互行為則可以理解為用戶與手機(jī)的“對(duì)話”，這種對(duì)話包含用戶對(duì)手機(jī)的操作，以及手機(jī)對(duì)用戶操作的反饋，我們可以對(duì)此進(jìn)行一致性設(shè)計(jì)原則的探究。

（一）操作方式

用戶是交互的發(fā)起者，通過一系列的操作行為與APP產(chǎn)生“對(duì)話”，以期達(dá)到用戶的使用目標(biāo)。面對(duì)相同的功能目標(biāo)時(shí)讓用戶的操作方式保持一致，不僅可以使用戶更流暢地使用產(chǎn)品，而且能夠降低學(xué)習(xí)成本，不會(huì)帶來(lái)困擾和迷茫。（如圖3），在滴滴出行l(wèi)Os移動(dòng)端中，順風(fēng)車與試駕頁(yè)面中都有切換乘客與車主的功能，然而順風(fēng)車頁(yè)面的切換方式是在標(biāo)簽導(dǎo)航下方點(diǎn)擊滑動(dòng)切換，試駕頁(yè)面的切換方式卻是在頁(yè)面右下角的懸浮按鈕點(diǎn)擊切換，相同的切換目的，卻在同一版本的產(chǎn)品中出現(xiàn)了兩種不同的操作方式，對(duì)于用戶理解和使用產(chǎn)品是不友好的，在交互設(shè)計(jì)中應(yīng)避免這樣的情況發(fā)生。

（二）操作反饋

用戶的每一次操作都應(yīng)該立刻得到可見的友好反饋，若沒有操作反饋，則不能形成用戶與APP的“對(duì)話”，也就無(wú)從說起交互，APP產(chǎn)品將失去生命力。保持用戶的操作與其預(yù)期的反饋一致這一點(diǎn)很重要，這是連貫地形成“對(duì)話”的必要條件。設(shè)計(jì)師可以通過氣泡狀提示、彈出框、聲音、震動(dòng)等方式給予用戶操作反饋，使他們更高效地達(dá)成目標(biāo)，即使出現(xiàn)操作失誤也應(yīng)當(dāng)有錯(cuò)誤提示反饋并提供解決方案。

五、產(chǎn)品迭代的一致性

APP產(chǎn)品迭代更多的是從戰(zhàn)略層面的規(guī)劃，是對(duì)產(chǎn)品新的需求反饋進(jìn)行評(píng)估、開發(fā)、測(cè)試以及上線的一系列流程，而這始終是圍繞“帶來(lái)更出色的用戶體驗(yàn)”這一目的來(lái)進(jìn)行的。同一個(gè)APP在版本迭代更新的設(shè)計(jì)中應(yīng)當(dāng)保持一致性的原則，主要體現(xiàn)在交互方式和視覺表現(xiàn)都應(yīng)該與原來(lái)版本的規(guī)范一致，保證原有用戶可以用熟悉的方式體驗(yàn)新產(chǎn)品，而不產(chǎn)生較大的分歧。即使產(chǎn)品定位發(fā)生改變而進(jìn)行較大的更新與改版時(shí)，也應(yīng)提醒用戶改版后的變化，并進(jìn)行良好的操作引導(dǎo)去指引用戶體驗(yàn)新產(chǎn)品，否則用戶以原來(lái)熟悉的方式與新產(chǎn)品交流時(shí)卻沒有效果，可能會(huì)產(chǎn)生挫敗感進(jìn)而放棄。

APP產(chǎn)品的迭代更新是不可避免的，因?yàn)橛脩舻男枨笫窃谑褂煤腕w驗(yàn)中不斷被發(fā)現(xiàn)和滿足的，產(chǎn)品迭代更多的是從戰(zhàn)略層面的規(guī)劃，是對(duì)產(chǎn)品新的需求反饋進(jìn)行評(píng)估、開發(fā)、測(cè)試以及上線的一系列流程，而這始終是圍繞“帶來(lái)更出色的用戶體驗(yàn)”這一目的來(lái)進(jìn)行的。如此說來(lái)，APP其實(shí)就是一個(gè)不斷變化生長(zhǎng)的“有機(jī)體”，但無(wú)論如何變化如何更新，我們都必須保證APP的“基因”不會(huì)改變，也就是在用戶心中建立的心理模型如操作邏輯和視覺印象要保持不變。所以同一個(gè)APP在版本迭代更新的設(shè)計(jì)中也應(yīng)當(dāng)保持一致性的原則，主要體現(xiàn)在交互方式和視覺表現(xiàn)都應(yīng)該與原來(lái)版本的規(guī)范一致，保證原有用戶可以用熟悉的方式體驗(yàn)新產(chǎn)品，而不產(chǎn)生較大的分歧。即使產(chǎn)品定位發(fā)生改變而進(jìn)行較大的更新與改版時(shí)，也應(yīng)當(dāng)首先建立新的規(guī)范標(biāo)準(zhǔn)，使迭代更新的產(chǎn)品能夠在新版本中保持視覺和交互的一致性，同時(shí)也要提醒用戶改版后的變化，并進(jìn)行良好的操作引導(dǎo)去指引用戶體驗(yàn)新產(chǎn)品，否則用戶以原來(lái)熟悉的方式與新產(chǎn)品交流時(shí)卻沒有效果，可能會(huì)產(chǎn)生挫敗感進(jìn)而放棄。

結(jié)語(yǔ)

以上在用戶體驗(yàn)層面上探討了設(shè)計(jì)APP產(chǎn)品時(shí)保持一致性的方法，本文認(rèn)為，強(qiáng)調(diào)APP用戶體驗(yàn)設(shè)計(jì)中的一致性并不是為了將產(chǎn)品束縛在條條框框和形式化的范本中，而是深刻地從用戶體驗(yàn)的角度去設(shè)計(jì)具有杰出可用性的產(chǎn)品。一致與個(gè)性表面上是形成了互斥的矛盾關(guān)系，但兩者同時(shí)也是相輔相成的，一致的目的是為了形成個(gè)性，個(gè)性的體現(xiàn)也不能忽略一致。APP產(chǎn)品如果在設(shè)計(jì)中缺少了個(gè)性那么便會(huì)顯得枯燥乏味，如果缺少了一致也會(huì)顯得雜亂無(wú)章，因?yàn)閮烧叩暮椭C存在，才能形成所謂的設(shè)計(jì)美感。