以用戶體驗為中心的不同終端下同一App界面差異化設(shè)計

序言

隨著網(wǎng)絡(luò)的快速普及、移動互聯(lián)網(wǎng)技術(shù)的日趨成熟，便捷的移動終端獨有的定位使之成為人們?nèi)粘玫臉伺洌涫褂锰匦宰屓藗內(nèi)粘Ｉ畹母鱾€環(huán)節(jié)都在發(fā)生著巨大的變化。與此同時帶來了第三方應用程序的劇增，用戶可以隨時隨地在智能終端通過App應用程序完成諸如社交、資訊、旅行、餐飲、購物、健康、支付等行為，第三方應用程序已成為移動互聯(lián)網(wǎng)的關(guān)鍵應用，它為用戶創(chuàng)造了新的角色，重新塑造著用戶的人際關(guān)系，帶來的是人的行為方式和生活方式的改變。

移動終端與App應用程序

移動終端的定義是指可以在移動中使用的便攜式計算機設(shè)備，目前約定俗成被理解為具有多種應用功能的智能手機以及平板電腦。隨著網(wǎng)絡(luò)和技術(shù)的發(fā)展，移動通信產(chǎn)業(yè)正走向真正的移動信息時代，移動終端已經(jīng)成為一個綜合的信息處理平臺。

App的定義是指英文Application（應用程序）的簡稱，由于iPhone智能手機的流行以及相應App應用的開啟，現(xiàn)App泛指安裝在智能手機的第三方應用程序。

移動終端App應用程序界面是人與移動終端的“對話”窗口。這種“對話”的背后更值得研究的是用戶的需求和期望值以及用戶的行為習慣。在App應用程序開發(fā)的過程中，用戶的動機、需求、行為、習慣和喜好等，會直接影響應用程序產(chǎn)品后期各個層面上的設(shè)計，界面設(shè)計絕不能被簡單的看作可被觸控的屏幕圖形設(shè)計。用戶是否覺得設(shè)計的界面是好用的，他們能否通過對界面的操作達成目標，整個使用過程中是否具備良好的體驗感，研究移動終端表層的物理屬性和背后深層次的行為邏輯，才是我們當下App應用程序界面設(shè)計的關(guān)鍵所在。

不同移動終端App使用中用戶體驗差異化分析—iPhone VS iPad

ISO 9241-210標準將“人們對使用或期望使用的產(chǎn)品、系統(tǒng)或者服務的看法和反應”定義為用戶體驗。為此，ISO還附加說明解釋：“用戶體驗包含了用戶在使用一個產(chǎn)品或系統(tǒng)之前、使用期間和使用之后的全部感受，涉及情感、信仰、喜好、產(chǎn)品印象、生理和心理反應、行為和任務完成等各個方面”，并將技術(shù)、用戶和使用環(huán)境列為影響用戶體驗的三個因素。其中用戶是主導，技術(shù)與使用情境是條件。當技術(shù)或使用情境發(fā)生變化時，用戶群體便會發(fā)生改變，用戶體驗的范疇也就隨之發(fā)生改變。[1]

iPhone作為智能移動終端對第三方應用程序的興起和推動，并為了方便差異化對比研究，本文且限定在iOS系統(tǒng)平臺對iphone和ipad進行比對分析和探討，以期提示在進行同一App應用程序界面設(shè)計時，將這些因素納入到設(shè)計思考范疇中。

1.屏幕尺寸

移動終端的屏幕是用戶體驗的核心。用戶不光是在上面瀏覽文字、圖片和視頻，更多的還在與屏幕進行多點觸摸交互，不同的尺寸和分辨率對用戶體驗有著直接的影響。iPhone 5S與iPad屏幕尺寸有著巨大的差異，這直接影響用戶的操作空間。同一App應用程序在兩種終端下如何對現(xiàn)有空間進行合理布局，以及所呈現(xiàn)給用戶內(nèi)容的多少，都應經(jīng)過深思熟慮。針對兩種不同終端設(shè)計App應用程序界面時，屏幕尺寸的差異性是用戶體驗考慮的第一要素。

2.使用情境

使用情境是指用戶在何時何地如何使用產(chǎn)品。基于iPhone與iPad用戶使用特點，用戶在使用兩種移動終端的具體情境上存在很大程度上的不同。iPhone由于尺寸小、重量輕、隨時隨地隨身攜帶，其使用情境很寬泛。iPad由于尺寸相對大、重量重、不適合隨時隨地使用，因此，iPad通常用于工作后的閑暇時光，使用情境特點為相對固定。

3.操作方式

由于兩種終端的尺寸、重量及使用情境的不同，導致了用戶在兩種終端操作上行為的差異?；趇Phone的尺寸用戶一般使用拇指進行單手操作，但對于iPad用戶一般會將其放置在桌面或腿上，或雙手握持狀態(tài)下進行操作，也就是說iPad自身產(chǎn)品的物理屬性和使用情境的差異注定了它與iPhone操作方式的差異性。因此在設(shè)計App應用程序的時候就要考慮兩種用戶的操作習慣，通過這些因素來考慮界面布局、層級、手勢設(shè)計等，這樣才能為用戶在操作App的同時帶來愉悅的體驗感。

4.任務流程

用戶打開App去完成某些任務，在不同終端下用戶所完成任務的步驟是不同的，帶給用戶的體驗也不一樣。由于尺寸、使用情境及操作特點的差異，導致iPhone的任務流程傾向于單任務縱深式的，而iPad的任務流程則會盡量扁平化層級，可以利用空間優(yōu)勢，在簡單操作下為用戶展示更多的內(nèi)容，幫助用戶更快捷的完成當前任務。

以用戶體驗為中心的不同終端下同一App界面差異化設(shè)計

基于用戶體驗下的移動終端App應用程序界面設(shè)計流程大致分為三個部分：1.用戶研究與產(chǎn)品定義；2.界面中的架構(gòu)設(shè)計；3.界面中的視覺設(shè)計。但依據(jù)不同終端的特性，又會在具體的設(shè)計中進行有針對性的不同的設(shè)計處理。

1.用戶研究與產(chǎn)品定義

用戶研究通常是指采用觀察和訪談等方法來獲取一些有關(guān)產(chǎn)品的真正用戶和潛在用戶的定性式數(shù)據(jù)研究。我們常從研究數(shù)據(jù)中提取行為模式，用以揭示用戶使用產(chǎn)品時的目標和動機。隨后，我們?yōu)檫@些目標構(gòu)造出虛擬的人物角色，用它來代表在目標與動機、使用行為、態(tài)度方面有明顯特征的一些用戶群。

同時，通過對該人群的前期了解，進一步調(diào)研并分析他們需求可能帶來的產(chǎn)品機會，以產(chǎn)品定義的形式針對可能的產(chǎn)品機會提出具體的設(shè)計要求，嘗試將一系列產(chǎn)品功能提煉成一份產(chǎn)品定義，這份報告需準確地描述目標用戶有哪些，以及此產(chǎn)品是什么，產(chǎn)品所提供的主要功能和特點等解決方案。同一App在iPhone與iPad不同終端里，這部分的研究與定義是一致的。

2.界面中的架構(gòu)設(shè)計

App界面架構(gòu)設(shè)計涉及到用戶的操作行為，針對不同終端在不同使用情境下用戶行為的分析可以幫助我們更深入地了解用戶，通過觀察用戶的行為能幫助建立合理的架構(gòu)以及后期有效的視覺跟進。

架構(gòu)設(shè)計決定了App應用程序界面的整體結(jié)構(gòu)，設(shè)計的形式和用戶的行為必須是一致的，架構(gòu)設(shè)計包括任務或功能架構(gòu)、信息架構(gòu)和交互架構(gòu)。

任務或功能架構(gòu)主要分析在整個App應用程序中用戶要完成哪些任務流，這些流程可幫助我們梳理App應用程序的信息架構(gòu)。信息架構(gòu)可以清晰地展示出各層級信息的設(shè)定與導航，準確的信息架構(gòu)讓用戶與移動終端的人機交互更高效。交互架構(gòu)不僅定義了高層次上的屏幕布局，也定義了產(chǎn)品的工作流、行為和組織。

針對iphone而言，App應用常是線性的縱深式連貫操作。一般來說，操作的深度需適度控制，因為隨著深度的增加，每一級別都會有不同的功能甚至承載上一級的功能或邏輯，深度越多，用戶就會感覺步驟越復雜。iPad終端由于尺寸優(yōu)勢，有足夠的屏幕空間為用戶呈現(xiàn)更多的內(nèi)容，因此，其信息架構(gòu)常設(shè)計為扁平化多層級的，我們在iPad上經(jīng)常會看到單屏中分屏分層級切換處理，它的結(jié)構(gòu)上減少了界面不斷返回的麻煩，交互方式也相對簡單，可以為用戶帶來便捷的體驗感。

3.界面中的視覺設(shè)計

App應用程序的用戶界面視覺設(shè)計以用戶的目標、需求、期望和使用情景等為基礎(chǔ)，以產(chǎn)品的商業(yè)和技術(shù)制約為前提，通過視覺表達恰當?shù)貙?nèi)容、功能、行為、風格和品牌等信息傳遞給用戶。同一App在iPhone與iPad不同終端里，整體界面的視覺設(shè)計應保持行為邏輯上的一致性和視覺識別上的一致性。

界面布局框架

同一App在iPhone與iPad不同終端里，整體界面布局框架應保持行為邏輯上的一致性，當主要的導航、工具欄和交互方式等相對統(tǒng)一時，能協(xié)助用戶在不同終端下切換后依舊能迅速定位，用戶無須重新適應新的界面環(huán)境，減少用戶認知難度，提升用戶使用的效率，增加體驗度。

視覺信息層級

界面視覺設(shè)計中表達信息的層級關(guān)系，可以利用尺寸、位置和色彩等來創(chuàng)建清晰的視覺信息層級。通常最為重要的內(nèi)容所占尺寸相對較大，位置也更為顯眼，容易引起用戶關(guān)注。對于iPhone觸控屏來講，用戶是直接用手指操作，所以設(shè)計要適合指尖操作，根據(jù)官方給出的設(shè)計指導，44×44像素是一個圖標較理想的尺寸，而iPad最佳理想的圖標尺寸是72×72像素。色彩的色相、飽和度以及純度的使用也是信息層級的一種表達，不同層級的信息需要色彩層級邏輯的配合。

界面視覺風格

界面視覺風格設(shè)計里需考慮到與App產(chǎn)品屬性對接、品牌信息的傳達和個性化選擇的可能性。App應用程序的界面視覺風格應從產(chǎn)品屬性出發(fā)，實現(xiàn)視覺風格與品牌信息協(xié)調(diào)一致，為App應用程序界面選擇支撐品牌的合適的布局、色彩、圖像體系，是建立品牌積極印象的良好手段。iPhone與iPad 中同一App應用程序界面設(shè)計的視覺風格應是一致的。

App應用程序界面構(gòu)建個性化是為了幫助用戶根據(jù)自己的喜好而進行選擇，是用戶個人意識在界面上的顯現(xiàn)。App應用程序界面的個性表達可以為用戶提供不同的視覺風格來滿足用戶的個性化需求。需要注意的是，個性化表達必須容易撤消，讓被改變的部件恢復默認的狀態(tài)。

界面詳細設(shè)計

界面的詳細設(shè)計中涉及到非常多的細節(jié)，諸如導航欄、工具欄、信息反饋上。導航欄用以顯示用戶當前位置，同時還承載主要功能操作切換。對于同一app在不同終端下構(gòu)建高效的導航，通常我們需相對統(tǒng)一導航的界面位置、色彩等視覺屬性，盡量使用極簡的視覺風格表達，避免無謂的細節(jié)表現(xiàn)。

工具欄是當用戶需要對當前界面內(nèi)容進行操作時，所設(shè)定的一些工具選項。由于iPhone與iPad的終端物理特點和用戶行為習慣，工具選項設(shè)計的位置針對不同終端會有適宜的位置變化。

信息反饋是App應用程序設(shè)計中的重要元素，觸摸屏使用中是借助于界面內(nèi)的圖形、顏色變化、聲效或震動進行信息反饋，同時，由于手指觸摸這種操作方式的特點，手指在點擊界面時必然會遮擋點擊部分，不同終端下需考慮信息反饋的大小位置及方式，及時有效地告訴用戶操作結(jié)果。

此外，移動終端App應用程序界面既然是人與移動終端的“對話”窗口，界面的視覺設(shè)計也需要具有情感體驗方面的考慮。界面中的情感表達源自前期用戶研究所得的數(shù)據(jù)，以此判斷特定用戶需求、期望及喜好，針對不同的用戶群體，在視覺設(shè)計時借助色彩、肌理和圖形實現(xiàn)有效的情感表達，提供有針對性的適宜的視覺設(shè)計方案。

除美觀之外，情感的體驗反應還與很多因素有關(guān)，不同的經(jīng)歷、個人的偏好等都是影響情感的因素。情感表達會根據(jù)用戶研究而選擇合適的視覺暗示，相同文化背景下人的行為大致相同，通過觀察其行為都可以被預知，具有相同文化背景的用戶對界面的情感反應也大致相同。

結(jié)語

如今，越來越多的人已經(jīng)認識到用戶體驗引導著產(chǎn)品研發(fā)、設(shè)計與服務，在App應用程序的界面設(shè)計中，必須深入地對用戶進行研究，構(gòu)建合理的用戶心理模型、任務流程、信息架構(gòu)、交互架構(gòu)及視覺設(shè)計，從而使用戶在App使用中便捷地獲取信息并進行流暢的操作，獲得愉悅的、有趣的體驗，形成用戶體驗生命周期的良性循環(huán)。

成功的具有良好用戶體驗的App應用程序界面設(shè)計涉及多個學科的交叉，跨學科合作已成為構(gòu)建良好用戶體驗的必備條件，只有通過跨專業(yè)專家諸如設(shè)計師、架構(gòu)師、程序員、社會學家、心理學家的參與，才可能激發(fā)更具創(chuàng)新意義的新型用戶體驗的設(shè)計。

（第一作者單位：北京師范大學珠海分校設(shè)計學院 第二作者單位：四川美術(shù)學院設(shè)計藝術(shù)學院）