手機(jī)交互設(shè)計(jì)禁忌

手機(jī)產(chǎn)品設(shè)計(jì)禁忌

在做手機(jī)產(chǎn)品設(shè)計(jì)的過程中，遇到很多看似很小，且很容易被忽略的問題，正是這些小問題，一次次的撩撥用戶的耐心，讓用戶對你的產(chǎn)品心生怨念。剛出道的朋友沒有經(jīng)過實(shí)戰(zhàn)，對細(xì)節(jié)注意不多，往往都會遇到類似的問題，強(qiáng)調(diào)多次后，覺得不如寫下來，給新人共勉。1、沒有不可點(diǎn)擊的效果

一般按鈕會有四態(tài)，不可點(diǎn)擊效果、可點(diǎn)擊效果、聚焦?fàn)顟B(tài)、按下狀態(tài)。如果你的按鈕此時處于不可用狀態(tài)，那么一定要灰掉，或者拿掉按鈕，否則會給用戶誤導(dǎo)。

2、菜單層次太深

菜單項(xiàng)以5~7個為宜，如果有二級菜單，就要注意合理的菜單分類，不能有太多層級的菜單，否則很難預(yù)期，也很難找到，尋找和返回都會變得很麻煩。3、文字長度不加以限制

手機(jī)界面很小，寸土寸金，一頁只能顯示下6~10個列表，一行只能顯示下10~16個字，標(biāo)題欄的字?jǐn)?shù)以5個以內(nèi)為宜，標(biāo)簽欄也以2~3個為宜，那么這時候出現(xiàn)文字過長的情況，一定要定義一下處理方式，如果是選擇型的，一般是截?cái)嗷蛘叽螯c(diǎn)縮略；如果是內(nèi)容閱讀型的，可以折行。但最合理的方式還是精簡文字內(nèi)容，縮短文字長度。4、文字表意不明

由于手機(jī)是碎片時間、片段式閱讀，所以手機(jī)界面上的文字表意性要求的更高，更苛刻，一定要在用戶瞟到的瞬間，準(zhǔn)確的傳達(dá)信息。除了表意清晰之外，還要求語言精簡，避免嗦；使用用戶的語言而不是程序的語言；產(chǎn)品文案體現(xiàn)產(chǎn)品性格。

5、交互流程分支太多

做交互的時候一定要有一個任務(wù)流程的概念貫穿始終，用戶是為了完成某個任務(wù)而使用軟件的，交互設(shè)計(jì)師除了關(guān)注界面元素、跳轉(zhuǎn)邏輯和交互反饋之外，還要關(guān)注用戶任務(wù)，分得清主要任務(wù)和次要人物，給主要任務(wù)一個暢通無阻的清晰流程，不要給予太多可能的分支，干擾主要流程。6、相關(guān)的選項(xiàng)離的很遠(yuǎn)

相關(guān)選項(xiàng)一定要具有操作上的延續(xù)性，雖然手機(jī)屏幕看起來比電腦屏幕要小的多，但是手機(jī)在屏幕上移動的代價，卻要比鼠標(biāo)在電腦上移動的代價大的多，如果手機(jī)上相關(guān)選選離得很遠(yuǎn)的話，用戶一是容易迷失，找不到下一步操作，二是需要移動手指，到屏幕另一端觸發(fā)操作。7、一次載入太多的數(shù)據(jù)

流量、電量、速度和穩(wěn)定性是手機(jī)產(chǎn)品的四個硬指標(biāo)，如果你的應(yīng)用不能合理的幫助用戶節(jié)約流量、電量，提升瀏覽速度和瀏覽體驗(yàn)，保證應(yīng)用的穩(wěn)定性能，就不要談什么用戶體驗(yàn)。你可以利用預(yù)加載緩存、批量載入、動態(tài)刷新、服務(wù)端數(shù)據(jù)壓縮等方式來保證省、快、穩(wěn)基礎(chǔ)體驗(yàn)。8、按鈕可點(diǎn)擊范圍比看起來小

我們都知道移動端有個神奇的數(shù)字“44”，根據(jù)食指最小點(diǎn)觸距離7mm、拇指最小點(diǎn)觸距離9mm，可以推導(dǎo)出做設(shè)計(jì)的時候，最小的點(diǎn)觸距離是44*32px。你可以設(shè)計(jì)一個精美的小圖標(biāo)，但是在定義它的點(diǎn)觸大小的時候，卻可以做放大處理，但你千萬不要設(shè)計(jì)一個傻大的圖標(biāo)，點(diǎn)觸范圍卻比圖標(biāo)要小，這樣會給用戶帶來明顯的誤操作挫敗感。9、標(biāo)簽頁跟內(nèi)容沒有從屬關(guān)系

標(biāo)簽頁跟內(nèi)容需要有很好的聯(lián)動關(guān)系，一般一個界面內(nèi)有二級標(biāo)簽就足夠復(fù)雜了，千萬不要再有三級標(biāo)簽、四級標(biāo)簽。每個標(biāo)簽頁都有自己特有的內(nèi)容，當(dāng)切換標(biāo)簽的時候，內(nèi)容跟著切換。標(biāo)簽頁如果是點(diǎn)擊切換，內(nèi)容部分可以整體刷新，標(biāo)簽頁如果是滑動切換，內(nèi)容頁也要跟著滑動切換，千萬不要一個點(diǎn)、一個滑。10、把所有的操作都暴露出來

手機(jī)產(chǎn)品交互設(shè)計(jì)要經(jīng)歷縮減、隱藏、附加、組織的過程，千萬不要妄圖把什么功能、什么操作都暴露出來，以彰顯強(qiáng)大。你需要把自己應(yīng)用的所有功能所有操作做個優(yōu)先級設(shè)定，那些常用的20%的功能，放在界面的主要位置上，其他80%的操作，放在次要位置或合理歸類組織后，隱藏起來就可以了。11、沒有空數(shù)據(jù)界面設(shè)計(jì)

我們在做設(shè)計(jì)的時候，往往是提供理想化的場景，用戶都已經(jīng)進(jìn)來了，我們怎么玩。但是，往往應(yīng)用剛推出的時候，是沒有用戶的，甚至當(dāng)應(yīng)用有了一定用戶基礎(chǔ)的時候，新進(jìn)來的用戶打開應(yīng)用的時候，應(yīng)用仍然可能是一種沒有數(shù)據(jù)的狀態(tài)，再或者當(dāng)用戶清楚了全部數(shù)據(jù)，這三種情況下，用戶都可能遇到空數(shù)據(jù)的界面。新手設(shè)計(jì)師往往不加設(shè)計(jì)，這時候用戶就會看到一個空白界面，茫然失措。有經(jīng)驗(yàn)的做法就是，提供一個情感化的界面，告訴用戶當(dāng)前沒有內(nèi)容；更具引導(dǎo)性的做法，就是引導(dǎo)用戶去執(zhí)行操作。12、用戶引導(dǎo)的濫用

去年就預(yù)言用戶引導(dǎo)將要泛濫，很明顯設(shè)計(jì)部門都喜歡用漂亮的引導(dǎo)界面告訴用戶新增的功能或隱藏的應(yīng)用，但不是所有的應(yīng)用、所有的功能都需要花哨的引導(dǎo)的。如果是通用的功能、非重點(diǎn)的模塊，根本就不需要引導(dǎo)；如果是功能告知，只需呀輕量級的引導(dǎo)；如果是版本更新說明，說明書式的引導(dǎo)可以采用，但是要言簡意賅。

13、無加載中狀態(tài)

手機(jī)產(chǎn)品只要是需要聯(lián)網(wǎng)，需要交換數(shù)據(jù)，都需要提供一個加載中狀態(tài)的，無論是菊花轉(zhuǎn)還是Toast還是對話框，你需要給開發(fā)人員一個全局的定義，并且要告知加載中是模態(tài)（前臺加載）的還是非模態(tài)的（后臺加載）。且要考慮到加載時間過長、網(wǎng)絡(luò)開關(guān)沒有打開、網(wǎng)絡(luò)不通等情況分別怎么去處理。14、未定義Back的邏輯

在為Android做設(shè)計(jì)的時候，會涉及到硬件交互，其中Back鍵的使用，是一門學(xué)問，Android官方有一些指導(dǎo)原則可以借鑒，但是具體開發(fā)的時候，還是會有很多特殊情況，比如單一實(shí)例的替換、鍵盤及一些中間狀態(tài)，這種情況下，Back可能需要被定義一下，該回到前一個實(shí)例（那就需要變成多實(shí)例了）還是該回到初始狀態(tài)（清空輸入內(nèi)容或恢復(fù)初始狀態(tài)）。15、無橫屏模式的設(shè)計(jì)由于橫屏模式下，縱向空間變得格外寶貴，導(dǎo)航欄、標(biāo)簽欄、鍵盤都需要被壓扁，橫盤模式一定要考慮是簡單拉伸適配還是重新設(shè)計(jì)，如果你的應(yīng)用不適合在橫屏模式下使用，就屏蔽橫盤，如果你的應(yīng)用包括應(yīng)用widget都需要支持橫盤模式（甚至是帶側(cè)滑鍵盤的橫屏機(jī)器），就需要提供設(shè)計(jì)方案。如果是S60V5這種豎高的機(jī)器，甚至需要重新設(shè)計(jì)。作為手機(jī)產(chǎn)品交互設(shè)計(jì)師，利用設(shè)計(jì)規(guī)避問題，提升產(chǎn)品用戶體驗(yàn)，把體驗(yàn)轉(zhuǎn)化成價值，是我們所追求的境界。手機(jī)產(chǎn)品設(shè)計(jì)禁忌，是筆者遇到的一些設(shè)計(jì)問題，歡迎各路高手協(xié)同補(bǔ)充遇到的問題，共同避免重復(fù)發(fā)明輪子。

擴(kuò)展閱讀：手機(jī)交互設(shè)計(jì)

手機(jī)客戶端交互設(shè)計(jì)三部曲

文檔簡介：在各企業(yè)如火如荼進(jìn)行手機(jī)客戶端設(shè)計(jì)開發(fā)的這個時代，作為有過手機(jī)操作平臺、web應(yīng)用等多重交互設(shè)計(jì)經(jīng)歷的設(shè)計(jì)師，本人發(fā)現(xiàn)了一些初涉這個領(lǐng)域的設(shè)計(jì)師存在思路茫然不夠系統(tǒng)的情況，導(dǎo)致在設(shè)計(jì)進(jìn)程中原則飄忽、找不到客戶端的感覺等結(jié)果。本文檔即主要面對這類人群，旨在講明手機(jī)客戶端設(shè)計(jì)方法的來龍去脈，從最基本的硬件到平臺、到架構(gòu)和細(xì)節(jié)，以及一些需要注意的問題。實(shí)際上，還應(yīng)有第4部曲，就是交互設(shè)計(jì)的表達(dá)，這方面與web應(yīng)用差別是很明顯的。鑒于其企業(yè)內(nèi)部文檔性質(zhì)，不便做詳細(xì)說明，有興趣的同學(xué)可以另行探討。

三部曲指的是：

第一：手機(jī)軟件導(dǎo)航的交互特點(diǎn)

第二：手機(jī)軟件平臺與硬件的關(guān)系

第三：交互規(guī)范

引文：關(guān)于手機(jī)與web界面交互設(shè)計(jì)的區(qū)別

輸出Web取決于顯示器手機(jī)相對明顯更小的屏幕輸入風(fēng)格使用場景鼠標(biāo)/鍵盤操作受到瀏覽器和網(wǎng)絡(luò)性能限制家中、辦公室、咖啡店等室內(nèi)場所拇指/食指/觸摸操作受到硬件和操作平臺限制室內(nèi)、戶外、車中、單手、橫豎屏由輸出性能牽扯到的問題：

1.每屏無法顯示足夠多的內(nèi)容

2.沒有足夠空間放置全局導(dǎo)航條

3.沒有足夠空間利用空隙和各種輔助線來表達(dá)區(qū)塊之間的關(guān)系

由輸入性能牽扯到的問題：

1.按鍵機(jī)型需要焦點(diǎn)和方向鍵、OK鍵以及左右軟鍵、刪除鍵等硬件之間的配合

2.觸摸機(jī)型尤其需要注意區(qū)分可否點(diǎn)擊，并且可點(diǎn)擊的部分需要能準(zhǔn)確的釋義因?yàn)槿鄙賥eb界面中的懸停提示

由使用場景和狀態(tài)牽扯到的問題：

1.界面需要能適應(yīng)比web更多的典型場景，例如光線的強(qiáng)弱與使用者走動等情況，所以設(shè)計(jì)者需要一定程度脫離自己的工位去嘗試包括對比度和字號等能否滿足使用需求

2.本人沒有進(jìn)行過較深層次的研究，有興趣和經(jīng)驗(yàn)的同學(xué)可以多交流

引文部分的總結(jié)（概述）：

1.手機(jī)的操作比web頁面復(fù)雜，需了解其所基于的機(jī)型的硬鍵情況才能確定如何控制

2.手機(jī)軟件需要與web不同的導(dǎo)航形式，空間所限3.手機(jī)軟件在操作步驟的縮減方面需要傾注更多的精力，每屏空間所限

4.手機(jī)軟件需要在控件/組件釋義方面傾注更多的精力，硬鍵和邏輯所限

下面即三部曲刪減了大量實(shí)例圖片后的內(nèi)容，基本上只是總結(jié)說明了。觀者各自的手機(jī)都有大量的實(shí)例，有空可以多翻看。

第一：手機(jī)軟件導(dǎo)航的交互特點(diǎn)

上圖表現(xiàn)的是手機(jī)上的導(dǎo)航是如何表現(xiàn)和運(yùn)作的。在這套導(dǎo)航體系中，重要程度從高到低是“返回”“標(biāo)題”“菜單”。圖中是典型的S60第三版式的解決辦法，同時也是很大比例的按鍵控制機(jī)型的導(dǎo)航方式，其他平臺在菜單和返回的處理上有所不同，但同一個平臺的處理是一致的。

第二：手機(jī)軟件平臺與硬件的關(guān)系

觀者可以對比下面兩幅圖，試圖辨別在不同的視覺保真度上，哪個界面屬于哪個手機(jī)：

以上只是簡單的一例，翻看其他平臺或者具體的某些機(jī)型，你一定可以發(fā)現(xiàn)，每個平臺的機(jī)型都有自己的一套格局和控制方式。這絕不是拍腦袋想出來要如此強(qiáng)行定義的，因?yàn)槿绾慰刂七�受制于著手機(jī)的硬鍵情況，所以每個平臺也都會有各自的硬鍵配備，因此交互規(guī)范部分其實(shí)是可以包含硬鍵分布和控制特點(diǎn)的。第三：交互規(guī)范

Iphone和Android系統(tǒng)手機(jī)風(fēng)靡全球的同時，移動互聯(lián)網(wǎng)的發(fā)展也掀起了一股熱潮。最近發(fā)現(xiàn)身邊一些朋友紛紛在做手機(jī)上的第3方應(yīng)用，或多或少碰到了些困惑，也許對于做慣了基于瀏覽器的產(chǎn)品的設(shè)計(jì)師來說，有一些比較典型的要點(diǎn)容易被忽略，這就容易引發(fā)出：找不到手機(jī)軟件的感覺、布局經(jīng)常改變、設(shè)計(jì)和優(yōu)化時找不到明確的立足點(diǎn)等等一系列令人困惑的問題。本人有過一段手機(jī)交互設(shè)計(jì)的時光，將在這里羅列一些總結(jié)或感想，帶一些建議，供看官們斟酌和評判。拋開定位、使用環(huán)境這樣的用戶研究體系的大頭，專注于說明手機(jī)交互設(shè)計(jì)的特點(diǎn)，其難點(diǎn)在于如何有效的結(jié)合硬件、軟件平臺和設(shè)計(jì)規(guī)范。以硬件區(qū)分手機(jī)類型：

僅以物理硬鍵控制操作的機(jī)型（后文簡稱按鍵機(jī)）

主要以觸摸方式操作的機(jī)型（通常包含主頁、掛機(jī)等物理鍵）物理硬鍵齊全，但支持觸摸操作的機(jī)型（外形和按鍵機(jī)型一樣）

主流的可安裝第3方應(yīng)用的軟件平臺：

塞班s60（第3和第5版）WindowsMobileforPPCAndroidIphoneOS

Java（目前有非常巨大的智能和非智能機(jī)型群是包含java平臺的）其他還有很多，諸如plamos、UIQ等交互設(shè)計(jì)規(guī)范：

一個有經(jīng)驗(yàn)的設(shè)計(jì)開發(fā)團(tuán)隊(duì)，在項(xiàng)目初期會率先著手建立或檢查相應(yīng)平臺的設(shè)計(jì)規(guī)范。和web控件規(guī)范一樣，手機(jī)交互設(shè)計(jì)規(guī)范定義了一些常用控件、組件等的布局和響應(yīng)方式，提煉設(shè)計(jì)中的公共部分，減少設(shè)計(jì)和開發(fā)的重復(fù)思考，并確保整個設(shè)計(jì)體系的一致性。不同的是，手機(jī)交互設(shè)計(jì)規(guī)范不僅有著限定作用，它同時還是一個信息架構(gòu)的體現(xiàn)、一個創(chuàng)新的過程、并且它還對后續(xù)的交互設(shè)計(jì)起到一定指導(dǎo)作用。我們了解到的iphone的無菜單的風(fēng)格、各種操作手勢、彈出框、標(biāo)題欄和返回按鈕，都是在這個階段就需要定義好的，而不是具體到某個功能中才任由設(shè)計(jì)師發(fā)揮（所以說創(chuàng)新應(yīng)該作為一個系統(tǒng)工程，而不是在某幾個細(xì)節(jié)上靈光閃現(xiàn)）。

從設(shè)計(jì)第三方應(yīng)用的角度看，大致可以濃縮成以下幾個版本的設(shè)計(jì)規(guī)范：

S60第3版有一套比較經(jīng)典和嚴(yán)謹(jǐn)?shù)囊?guī)范。另外S60第5版雖然是觸摸屏機(jī)型，但是對于交互設(shè)計(jì)師的工作來說兩者區(qū)別并不巨大，只是把OK鍵替換換成了點(diǎn)擊，以及零碎的一些變化。

Java版事實(shí)上由于左右物理控制鍵和方向鍵、OK鍵是按鍵機(jī)型的普遍配置，S60第3版規(guī)范的適用范圍是非常廣泛的，稍微修改一點(diǎn)就可以適用于Java平臺。區(qū)別在于手機(jī)的“刪除”和“返回”兩個物理硬鍵的配置不太一致，所以需要統(tǒng)一將右下角的命令默認(rèn)為“返回”，在編輯文本時，臨時變?yōu)椤皠h除”。這樣犧牲了某些機(jī)型的某些操作的效率，保證了這個整體的機(jī)型都可使用。

IphoneOSIphone的出現(xiàn)一舉打破了之前若干平臺固有的設(shè)計(jì)定勢，硬鍵和操作模式都精簡了許多。不過其缺少固定的menu模式，這對第三方軟件的設(shè)計(jì)來說是個巨大的挑戰(zhàn)，要么需要很大程度上脫離iphone自身的設(shè)計(jì)規(guī)范體系，要么就極端精簡功能。

Android跟從了一些iphone中的經(jīng)典手勢，操作和頁面布局風(fēng)格上相對保守一點(diǎn)，保留了menu和back兩個硬鍵，雖然不夠獨(dú)樹一幟，但是在功能和設(shè)計(jì)之間做的了一個不錯的平衡，對于第三方應(yīng)用來說，這是一個可以有寬廣發(fā)揮空間的平臺。根據(jù)上文所述，接下來我就主要以S60第3版、Android、IphoneOS為代表，通過抽取手機(jī)交互設(shè)計(jì)規(guī)范中的部分，來說明他們的特性和區(qū)別，順帶展開一些個人經(jīng)驗(yàn)的敘述。

上面幾幅圖并沒有刻意選擇同一類型的界面來對比，我們不妨先僅關(guān)注硬鍵/全局功能鍵，會發(fā)現(xiàn)他們之間的顯著不同，實(shí)際上反映到設(shè)計(jì)過程中，這樣的區(qū)別對界面設(shè)計(jì)造成的影響要來的更大。

1.硬鍵和手勢控制

下面以摘取手機(jī)交互設(shè)計(jì)規(guī)范的形式來陳述：

大家請看以下截圖：S60第3版

AndroidIphone:

以上硬鍵和手勢對于操作的控制，需要我們在設(shè)計(jì)前有個十分清晰的認(rèn)識，并且整個團(tuán)隊(duì)達(dá)成一致，如有精力則需要專門寫到設(shè)計(jì)規(guī)范文檔中。硬鍵控制是沒有什么改動余地的，兩款觸摸機(jī)型可以對手勢適當(dāng)進(jìn)行取舍，畢竟有些應(yīng)用用不到所有的手勢，能精簡操作最好。（從下面開始，會有一些功能界面，請?jiān)试S我偷懶一下，用線框代替實(shí)際界面截圖）2.菜單

S60第3版的菜單是由左軟鍵或OK鍵調(diào)出，需要定義以下幾點(diǎn)：

（注：聚焦到某一條目上時，通常按OK鍵是打開，但有一些內(nèi)容包含幾種看起來級別相當(dāng)?shù)牟僮�，此時會彈出菜單選擇）

如何收回背景是否霧化每屏最多顯示多少條

有無二級菜單，如果有，怎樣調(diào)出和收回，和一級菜單的位置關(guān)系，焦點(diǎn)條的區(qū)別菜單項(xiàng)文字靠左

數(shù)字標(biāo)號，如果整個軟件能保證菜單項(xiàng)目均在10位以內(nèi)，建議加上，這樣可以與數(shù)字鍵盤對應(yīng)

對聚焦項(xiàng)或當(dāng)前頁面不適用的菜單項(xiàng)，是不顯示還是文字變灰處理。OK鍵菜單只包含針對聚焦內(nèi)容的操作項(xiàng)，需控制在一屏之內(nèi)，避免二級項(xiàng)

菜單項(xiàng)的排序規(guī)則：針對聚焦項(xiàng)的在上，其他的在下，這兩部分中分別按照使用頻率從上至下排列

Android

Android傳統(tǒng)的菜單是由menu硬鍵調(diào)出，比較多的是2-3行，每行2-3項(xiàng)，看起來像是一些按鈕，所以里面的圖標(biāo)和文字都居中。作為第3方應(yīng)用，如果菜單項(xiàng)稍多，做成一縱列的文字項(xiàng)從操作上來看也未嘗不可，畢竟用戶刻意記住其默認(rèn)的菜單形式也沒有什么好處。只是仍然需要注意控制一下數(shù)量，如果需要二級，可以考慮做成彈出的，比如在一級項(xiàng)中選擇“排序”，之后彈出選擇框來選擇。

Android還有一種長按菜單，按住某個項(xiàng)目達(dá)到一定時間后，會彈出在觸點(diǎn)附近的位置。Iphone

Iphone并沒有一個明確和固定的菜單模式，較保守一點(diǎn)可以說是沒有。一些類似菜單的操作通常是通過彈出選擇，或者是拆分成幾層，一次次點(diǎn)擊進(jìn)入更深層的頁面去尋找按鈕的形式來達(dá)成。所以要做Iphone平臺的第3方應(yīng)用的同學(xué)應(yīng)當(dāng)提前做好準(zhǔn)備，從產(chǎn)品策劃開始就著手考慮這個問題。最有效的辦法是首先盡可能的縮減功能，其次盡可能的縮減操作方式。否則會發(fā)現(xiàn)為了一些細(xì)枝末節(jié)的操作，還需要設(shè)定好幾層頁面。當(dāng)然，也可以加入一條操作欄來作為輔助，只是整體風(fēng)格和操作就不Iphone了。

說到這里，不得不結(jié)合前兩點(diǎn)延伸一下，對導(dǎo)航系統(tǒng)進(jìn)行說明：

眾所周知，導(dǎo)航系統(tǒng)主要擔(dān)負(fù)著幾個任務(wù)：展示內(nèi)容架構(gòu)、表明當(dāng)前位置/狀態(tài)、表明可以去哪里。在網(wǎng)頁上的典型形式為全局導(dǎo)航條。在手機(jī)上，導(dǎo)航系統(tǒng)同樣重要，但是受限于屏幕尺寸，一般沒有足夠的空間放置這樣的組件，但手機(jī)有著自己的體系：

我們可以看到各平臺對導(dǎo)航系統(tǒng)的規(guī)劃：

標(biāo)題顯示當(dāng)前位置，可以是文字、圖標(biāo)+文字、也可以是一系列tab

菜單顯示可以做些什么，通常包含兩種類型的選項(xiàng)：a只針對選中項(xiàng)/只針對當(dāng)前頁，b全局功能如設(shè)置和幫助，也就是說菜單大多數(shù)作用是發(fā)起針對當(dāng)前頁的操作，或者轉(zhuǎn)到和當(dāng)前頁面沒直接關(guān)系的頁面

返回這個比較復(fù)雜一些，也是最需要設(shè)計(jì)師注意的。鑒于第2條對于菜單形式的描述，如果再加入關(guān)聯(lián)頁面的選項(xiàng)，項(xiàng)目數(shù)量和類型會使菜單不堪重負(fù)。并且頁面標(biāo)題通常無法準(zhǔn)確表達(dá)出相應(yīng)頁面的內(nèi)容，即使放入菜單，也需要用戶花時間去理解和回憶。所以“返回”很重要：一個固定的位置，簡單機(jī)械的一個動作，一按一看一按一看，不需要刻意尋找和思考。在一個沒有全局導(dǎo)航的環(huán)境里，一步步后退到自己瀏覽過的頁面，從而了解當(dāng)前的頁面體系，或者重新發(fā)起一系列操作，是個能保證用戶找到位置的簡單高效的模式。

在做第3方應(yīng)用時，需要盡可能嚴(yán)格保持以上幾點(diǎn)的規(guī)范化3.焦點(diǎn)

焦點(diǎn)更大的意義是在按鍵機(jī)型上，用一個帶底色的條框襯托出當(dāng)前選中的項(xiàng)。對焦點(diǎn)的設(shè)定和控制應(yīng)當(dāng)盡可能的簡單，需要定義默認(rèn)聚焦的位置、是否允許上下左右循環(huán)。

在按鍵機(jī)型上，4個方向鍵控制焦點(diǎn)向4個方向移動。通常一個方向只限一種移動方式，如上左圖：上下鍵控制列表區(qū)的焦點(diǎn)在列表項(xiàng)間移動，左右鍵控制標(biāo)題欄的tab左右切換。如果列表區(qū)也分左右的話，處理起來就復(fù)雜了，應(yīng)極力避免。如上右圖：需要先向上移動焦點(diǎn)到標(biāo)題欄，然后才能按左右鍵切換tab？但如果當(dāng)前焦點(diǎn)所在的項(xiàng)處于第2屏，第3屏，或者更靠下呢？是否需要一直按住“上”，直到上邊的內(nèi)容滾好幾屏后才聚焦到tab上？

在一些情況下，焦點(diǎn)容易被遺忘，其中某些對觸摸屏機(jī)型同樣適用：

如上圖，頁面中包含了一些可操作的元素：人名、圖片、網(wǎng)址，這里也會隱藏著一些典型操作，例如對網(wǎng)址可能有“打開”“復(fù)制”“保存為書簽”等操作，此時聚焦并按OK鍵或者點(diǎn)擊則需要出現(xiàn)彈出菜單。

另外還需要注意上文提到的橫向和縱向切換焦點(diǎn)的問題，正文中同一行如果有兩個名字可以聚焦，但是左右方向鍵已經(jīng)被標(biāo)題欄占用，那么切換人名的優(yōu)先級應(yīng)降低，改用別的形式，即使是按上下方向鍵來左右切換人名也是可以的。4.彈出框

除了菜單功能的以外，彈出框一般出現(xiàn)在屏幕底端，同時其他屏幕其他部分背景霧化，這有利于用戶的視線從密密麻麻的小屏幕中快速找到關(guān)鍵：

彈出框有很多種類型，除了“確定”“取消”等元件的基本布局以外，幾個平臺區(qū)別不是很大，大致可以分成幾個類型和對應(yīng)的處理方式，以下是我歸納和建議的一些處理方式，只列最適用于S60第3版的：

5.列表

列表項(xiàng)的呈現(xiàn)可以集中定義幾種模式：常態(tài)、編輯/被調(diào)用：常態(tài)：

編輯/被調(diào)用：

6.還有一些方面可以事先定義：

搜索邏輯

事件處理：無信號、低電量提示的形式和時機(jī)、來電、來短信、鬧鐘時間到、緩存已滿、發(fā)現(xiàn)新版本等。

文本輸入：光標(biāo)的移動、刪除和復(fù)制粘貼、選中地址/人名等。

復(fù)雜邏輯的返回路徑：有時候會出現(xiàn)操作路徑中斷并跳轉(zhuǎn)的情況。比如正在寫短信時，彈出提示收到新短信，用戶此時通過彈出框直接轉(zhuǎn)到了查看短信的界面，此時“返回”是返回到查看短信的上一層，還是回到編輯短信的界面，這些情況想要集中處理，是比較令人頭疼的問題。不久前我大概歸納過一套返回邏輯，大意是：a路徑默認(rèn)是從操作步驟向前一步一步返回，或者逐層向上返回；b如果遇到路徑跨頁面體系轉(zhuǎn)移，先按照a的方式返回，到達(dá)跨頁面跳轉(zhuǎn)的界面時，允許跨一次跳轉(zhuǎn)，之后按a的方式返回。

以上羅列了一些我的歸納和心得，開始新項(xiàng)目的時候基本可以按此思路先把這些方面統(tǒng)一規(guī)范，提及都是習(xí)慣用法，追求穩(wěn)妥的項(xiàng)目可以直接套用，追求創(chuàng)新的項(xiàng)目也可作為一個評判依據(jù)。

最后，用一個簡單的例子提及一下：設(shè)計(jì)與系統(tǒng)規(guī)范盡量保持一致的重要性。

假如我們把mac系統(tǒng)的軟件風(fēng)格直接搬到windows中，那么在切換不同軟件的時候，

最小化、關(guān)閉等按鈕的忽左忽右，會使我們經(jīng)常默認(rèn)就把鼠標(biāo)移動到了相反的方向。

每1個第3方應(yīng)用在手機(jī)中都不可能一個程序在戰(zhàn)斗，手機(jī)中會自帶很多系統(tǒng)應(yīng)用，例如電話本、短消息、設(shè)置、瀏覽器等，他們都遵循著一樣的規(guī)范，用戶每天也會在這些程序中切換若干次。如果一個第3方應(yīng)用和他們的基本操作方式不同，每次都會使用戶經(jīng)歷仔細(xì)觀察、出錯等過程，想象一下每切換一次軟件就要轉(zhuǎn)換一套思維的痛苦吧。當(dāng)然，規(guī)范是可以打破的，如果我們找到了簡單高效并且操作方式和習(xí)慣用法沒有沖突的方式，可以嘗試一下。例如以前觸摸屏的列表項(xiàng)點(diǎn)擊一次是聚焦，再次點(diǎn)擊為打開，后來普遍改為點(diǎn)擊一次就打開。手機(jī)UI設(shè)計(jì)檢測要素

手機(jī)UI一直被我稱為產(chǎn)品的“臉面”，一款好的手機(jī)產(chǎn)品一定有一套優(yōu)秀的手機(jī)UI界面。手機(jī)UI從產(chǎn)品的圖標(biāo)開始，直到推出手機(jī)產(chǎn)品為止。產(chǎn)品的UI從產(chǎn)品概念開始，直到產(chǎn)品的生命周期結(jié)束，產(chǎn)品的UI一直深入著用戶的心。一個好產(chǎn)品UI評價標(biāo)準(zhǔn)會影響一個產(chǎn)品的品牌和用戶群體，這也是EICO對于魅族和Weico的價值所在，結(jié)合做過的產(chǎn)品對UI設(shè)計(jì)檢測要素進(jìn)行了整理。

iPhoneApp的特點(diǎn)及基本設(shè)計(jì)方法

一、iPhoneApp的特點(diǎn)

iPhone有自己的特點(diǎn)和氣質(zhì)，因此他的App不同于其他鍵盤手機(jī)甚至Android這種觸屏手機(jī)。首先iPhone只有一個物理按鍵Home，而這個按鈕主要是在系統(tǒng)級操作上起到一些作用，在一個應(yīng)用中，絕大多數(shù)情況都是退出功能。在480x320這個對手機(jī)而言很大的屏幕上要包括以下3個模塊，才能對一個App進(jìn)行操作。1、虛擬鍵盤

iPhone雖然與Android同為觸屏，但沒有物理鍵盤(而Android有可能有物理鍵盤)，所有的輸入操作都需要屏幕中的虛擬鍵盤來實(shí)現(xiàn)，同時需要考慮虛擬鍵盤的遮擋問題。2、目錄導(dǎo)航

沒有物理按鍵做為目錄菜單的呼出功能，完全不同于Symbian和Android系統(tǒng)，包括導(dǎo)航也需要屏幕中的虛擬按鈕來實(shí)現(xiàn)。3、功能操作

需要把所有的功能集成在App中，比如我們可以用Tabbar來做功能的分類，工具欄來做具體視圖的功能操作集合。

二、iPhone的使用習(xí)慣

顯然支持單手操作并不是iPhone應(yīng)用的特性，當(dāng)然也有一些游戲需要雙手進(jìn)行(沉浸式應(yīng)用)，但因?yàn)閕Phone有一塊非常靈敏支持手指多點(diǎn)觸控的電容屏，所以手指直接在屏幕上的操作更加直觀和更具操控感，不需要任何中間設(shè)備(按鍵或是鼠標(biāo))來控制。

1、自上而下的操作：

用戶多數(shù)情況下會如上圖的姿態(tài)，一手握機(jī)，大拇指做為主要操作和點(diǎn)擊手指，我們可以看到不管是iPhone系統(tǒng)應(yīng)用還是很多其他的優(yōu)秀應(yīng)用，大多使用很多的列表，因?yàn)槟粗冈诨瑒恿斜頃r會非常順暢和方便，而且操作速度非�？欤�所以很長的列表不會成為iPhone應(yīng)用的障礙，這與其他手機(jī)平臺上的特性不同，更何況在表格的情況下，單擊頂部的狀態(tài)欄可以快速回到頂部。2、減少輸入

這與《移動設(shè)備交互設(shè)計(jì)》書中的一些觀點(diǎn)一致，即對于手持設(shè)備我們要盡量的減少用戶輸入，特別對于iPhone這種虛擬鍵盤而言，即便電容屏再靈敏，對于每次都準(zhǔn)確的觸動面積很小的虛擬鍵盤也并不是一件輕松的事情，我們要盡量使用選擇器，或是輸入提示suggestion來減少成本。3、足夠大的按鈕面積

對于iPhone這塊電容屏來講，雖然很靈敏，但接受的感觸面積并不小，且用戶又是直接用手指操作，所以我們要對應(yīng)用中的所有按鈕要適合指尖來操作，跟據(jù)官方給出的設(shè)計(jì)指導(dǎo)，44*44pix是一個較理想的面積。4、多點(diǎn)觸控手勢

相對于設(shè)備的軟硬件來說，手指總是保持可用，它是人體的一部分，可以靈活的做各種動作，而且直接觸控屏幕非常直觀，且用戶也非常愿意使用這些看上去很酷手勢動作，比如可以對圖片用兩個手指拉開來放大，合并來縮小，直接拖動來調(diào)換順序，搖晃來進(jìn)行刷新等。當(dāng)然我們要考慮這些手勢在不同應(yīng)用的不同使用場景，不要濫用�？傊�，iPhone應(yīng)用的是線性的，連貫的，直觀的依賴滑動操作，手指點(diǎn)擊，以及各種手勢給人很酷的感覺。

三、iPhoneApp的基本設(shè)計(jì)方法1、iPhone應(yīng)用的分類1)高效型

這類應(yīng)用可以幫助用戶快速完成一個任務(wù)，注重內(nèi)容的組織邏輯功能和信息架構(gòu)的展現(xiàn)，以方便用戶快速高效的使用，最終完成任務(wù)。此類應(yīng)用一般包含大量的列表及每個列表中的任務(wù)功能。最典型的就是系統(tǒng)自帶的“Mail”應(yīng)用，這是一個非常典型的高效型應(yīng)用。

此類應(yīng)用給用戶的感覺是層層進(jìn)入，內(nèi)容逐步具體化，直到可以完成用戶的任務(wù)。另外一個非系統(tǒng)應(yīng)用且典型的就是QQ，可以看一下是不是也遵循這個特點(diǎn)。2)實(shí)用工具型應(yīng)用

此類應(yīng)用一般交互操作非常少，也沒有很深的層次結(jié)構(gòu)，往往都是直接了當(dāng)?shù)恼故拘畔�，一般會在“背面�?通常會有一個翻轉(zhuǎn)的效果)展示設(shè)置功能。最常見的就是“天氣”和“股票”兩個系統(tǒng)自帶的應(yīng)用。3)浸入式應(yīng)用

大多指游戲類應(yīng)用，但也有一些實(shí)用工具，比如電子羅盤，所謂浸入式應(yīng)用一般是全屏模式，專注一個任務(wù)或是娛樂的深入體驗(yàn)，沒有過多的文字，而將用戶的注意力放在如何使用它。2、設(shè)計(jì)iPhone應(yīng)用1)iPhone應(yīng)用的基本結(jié)構(gòu)

狀態(tài)欄：這是ios系統(tǒng)的一部分，除了浸入式應(yīng)用外，其他應(yīng)用一般都會保留這個bar。導(dǎo)航欄：這里包括當(dāng)前的title，當(dāng)前的主要操作的控件和返回的導(dǎo)航功能工具欄：對當(dāng)前內(nèi)容區(qū)可執(zhí)行的功能動作。

標(biāo)簽欄：可以理解為全局導(dǎo)航，方便快速切換功能或是導(dǎo)航。工具欄和標(biāo)簽欄在一個視圖中只能存在一個。

2)移植你的應(yīng)用

大多數(shù)情況下我們都是把web端的應(yīng)用移植到手機(jī)上，而在web端的應(yīng)用，如果我們列出一個功能結(jié)構(gòu)圖，可能會包含100項(xiàng)以上的功能點(diǎn)，你可以做如下工作：

①考慮這個web端的產(chǎn)品，核心功能是什么，任何一個產(chǎn)品都會有核心功能，以及附加功能，比如QQ，核心功能就是IM，即時通信，可能截屏是一個附加功能，盡管用的人非常多。確定核心功能后，以及圍繞核心功能盡可能少的擴(kuò)展功能和邏輯。如果你的web網(wǎng)站或是你的業(yè)務(wù)包括很多，可以把他們按不同業(yè)務(wù)類型拆分成不同的多個應(yīng)用。

②對確認(rèn)的功能結(jié)構(gòu)考慮在iPhone上的信息架構(gòu)模型，上文說過，iPhone應(yīng)用是線性的連貫操作，一層一層進(jìn)入直到完成最后的任務(wù)，所以你要按這個思路去整理信息架構(gòu)，一般來說，操作的深度不要超過3層，如果超過3層就要對產(chǎn)品形態(tài)進(jìn)行扁平化處理，即由深度改為廣度，因?yàn)殡S著深度的增加，每一級別都會有不同的功能，甚至有承載上一級的功能或邏輯，深度越多，這些功能就會越復(fù)雜，而在手機(jī)如此小的空間上就很難進(jìn)行合理組織。可以延伸閱讀kentzhu同學(xué)更多的限制，更簡單的設(shè)計(jì)③合理利用iPhone應(yīng)用的結(jié)構(gòu)及標(biāo)準(zhǔn)控件。

標(biāo)簽欄，可以理解為web應(yīng)用中的全局導(dǎo)航或是主要子功能的切換，這個bar可以貫穿于主要視圖的底部，方便用戶快速跳轉(zhuǎn)，比如下圖這個標(biāo)簽欄。

導(dǎo)航欄，可以理解為web應(yīng)用中的局部導(dǎo)航，子導(dǎo)航或是面包屑，顯示當(dāng)前位置，同時還承載了1個或兩個主要功能操作�？梢苑奖阌脩舴祷兀�或是對當(dāng)前視圖進(jìn)行1-2個最重要的操作。如下面這個導(dǎo)航欄。

工具欄，可以理解為web某個具體頁面中的一些主要操作功能，比如上傳，搜索等。如下面這個工具欄。

這是ios系統(tǒng)應(yīng)用mail中，具體郵件打開后的工具欄，包括了對當(dāng)前郵件的幾個主要操作。對于你的應(yīng)用，你也可以把一些操作放到主視圖區(qū)中以按鈕的形式展現(xiàn)，不放在底部的工具欄。但我們說，iPhone用戶更習(xí)慣于iPhone一些“標(biāo)準(zhǔn)”操作，習(xí)慣iPhone的標(biāo)準(zhǔn)邏輯，所以把主要的操作以底部工具欄的方式展現(xiàn)似乎更好一些。使用引喻的標(biāo)準(zhǔn)控件

我們看到滑動效果的開關(guān)，突起效果的分段按鈕，轉(zhuǎn)盤選擇器等，代替了傳統(tǒng)web中死板無生氣的標(biāo)準(zhǔn)控件。

④調(diào)用系統(tǒng)提供的功能接口

例如iPhone提供的地理位置接口，可以為你的應(yīng)用提供不同于web端的特殊功能，設(shè)計(jì)出更具有特色的產(chǎn)品，更能滿足移動用戶的需求。

最后，我想說iPhone應(yīng)用是簡潔的，包括設(shè)計(jì)上的簡潔和功能上的簡潔，不應(yīng)該有太多的功能分支，不管你是否能組織好這些功能，過多的功能總會把用戶搞暈。iPhone應(yīng)用是有特殊氣質(zhì)的，你可以把他設(shè)計(jì)的完全符合iPhone使用的特點(diǎn)，甚至帶有一點(diǎn)炫酷，而不用考慮低端用戶，因?yàn)槭褂胕Phone并且可以裝App的用戶，他的使用經(jīng)驗(yàn)不會太差。

手機(jī)產(chǎn)品交互體驗(yàn)評估方法

一、評估的目的

交互設(shè)計(jì)是一個迭代過程，通過交互設(shè)計(jì)評估，可以及早發(fā)現(xiàn)設(shè)計(jì)中缺陷，進(jìn)而能進(jìn)一步完善交互流程。通過評價，也可發(fā)現(xiàn)交互設(shè)計(jì)中可行、友善、合理或優(yōu)秀的地方，從而為后續(xù)產(chǎn)品的交互設(shè)計(jì)提供借鑒。二、評估的標(biāo)準(zhǔn)

手機(jī)產(chǎn)品交互設(shè)計(jì)的評估標(biāo)準(zhǔn)還是是否滿足用戶體驗(yàn)，當(dāng)然，體驗(yàn)是一個很虛的東西，沒有一個具體的量化標(biāo)準(zhǔn)，那我們就落在實(shí)處，從可以量化的維度打分。具體從那幾個維度入手，我認(rèn)為可以分為如下幾個，見圖1：

圖1交互體驗(yàn)評估維度1、產(chǎn)品架構(gòu)是否清晰無論是九宮格式的架構(gòu)還是標(biāo)簽頁式的架構(gòu)，都需要讓用戶一進(jìn)入產(chǎn)品，就可以一目了然的知道產(chǎn)品是干什么的，有幾個功能模塊，模塊之間怎么切換。

同時，產(chǎn)品層級較深的，設(shè)計(jì)師要清楚的了解有產(chǎn)品有多少個二級頁面，多少個三級頁面。這些二級頁面和三級頁面的架構(gòu)，是復(fù)用一級頁面的，還是有自己的架構(gòu)。有如下幾個評估標(biāo)準(zhǔn)：

產(chǎn)品結(jié)構(gòu)清晰，沒有不必要的層級能快速了解產(chǎn)品有幾個主要頁面所有主要部分都能夠通過首頁訪問清晰的指示了當(dāng)前的位置

2、產(chǎn)品流程是否清晰

要想表現(xiàn)層越簡單，背后的邏輯層可能就越復(fù)雜。那么我們評估流程的時候，不是以背后的邏輯層復(fù)雜度來評估，而是以表現(xiàn)層的簡潔度來評估的。比如說一個發(fā)布帖子的流程，總共需要幾個步驟，涉及到幾個層級（一級頁面到二級頁面到三級頁面）。當(dāng)然，不是說步驟越少、層級越淺就是好的設(shè)計(jì)。而是要簡單、明確、清晰。沒有不相關(guān)的干擾分支，沒有經(jīng)常會出現(xiàn)的誤操作，沒有提頓思考的空間，沒有操作之后無反應(yīng)的疑惑。有如下幾個評估標(biāo)準(zhǔn)：

明確產(chǎn)品有幾個主要的任務(wù)流程每個任務(wù)流程清晰，沒有太多分支任務(wù)流程符合用戶操作流程用戶可以取消正在執(zhí)行操作操作成功或失敗都有明確的反饋

在每個層級，都可以找到回到上一級的方法預(yù)防出錯，如出錯要幫助用戶從錯誤中恢復(fù)過來復(fù)雜的交互是否有很好的引導(dǎo)和幫助3、控件使用是否準(zhǔn)確

手機(jī)產(chǎn)品涉及到很多的控件。一級標(biāo)簽欄、二級標(biāo)簽欄、列表、按鈕、對話框、提示框、發(fā)布框等等，這些控件使用的是否到位，是衡量一個設(shè)計(jì)師細(xì)節(jié)設(shè)計(jì)能力的重要標(biāo)準(zhǔn)。比如說兩個二級頁面都需要二級標(biāo)簽欄，如果你設(shè)計(jì)出來兩個樣式的話，那么說明你沒有用控件的思想來做設(shè)計(jì)，不僅設(shè)計(jì)師要設(shè)計(jì)兩套二級控件，程序人員要重復(fù)勞動，用戶也會疑惑這兩個控件是不是同一個含義同一種操作方式。再比如說，這個二級標(biāo)簽欄，它的從屬內(nèi)容是否在樣式上跟他有從屬關(guān)系，這個細(xì)節(jié)，如果不把握好，用戶很可能把這個二級標(biāo)簽欄看成了按鈕。

有如下幾個評估標(biāo)準(zhǔn)：

控件使用準(zhǔn)確性（比如是否混淆了單選框和復(fù)選框，對話框?qū)哟芜^多等）控件的復(fù)用（比如兩個頁面都用到tabbar，不用設(shè)計(jì)兩個）控件的狀態(tài)（比如不可點(diǎn)狀態(tài)、可點(diǎn)狀態(tài)、按下狀態(tài)、長按狀態(tài)）鏈接色的準(zhǔn)確使用焦點(diǎn)狀態(tài)的準(zhǔn)確使用

4、信息傳達(dá)是否到位

信息傳達(dá)包含產(chǎn)品文案引導(dǎo)、按鈕文案設(shè)計(jì)、列表文字布局、內(nèi)容頁排版、提醒文案設(shè)計(jì)等等。文案的梳理，有些公司是專門有內(nèi)容編輯來做的，但是大部分公司，都是產(chǎn)品經(jīng)理或者交互設(shè)計(jì)師直接完成的。那么文案是否準(zhǔn)確，是否能有效的傳達(dá)意思，也是衡量交互設(shè)計(jì)的一個重要標(biāo)準(zhǔn)。文字長度限制、特殊情況處理是否考慮到位，也是衡量設(shè)計(jì)師工作的基準(zhǔn)。而列表文字的布局、內(nèi)容頁的排版，則是信息布局的重中之重。有如下幾個評估標(biāo)準(zhǔn)：

布局清晰文案簡潔

沒有術(shù)語（比如“拉取失敗”這種文案）

合理排版（標(biāo)題、作者、時間的字號、字色，頁邊距的運(yùn)用）

標(biāo)簽和內(nèi)容的從屬關(guān)系（能否看出當(dāng)前標(biāo)簽頁，和當(dāng)前標(biāo)簽頁的從屬內(nèi)容）

三、評估的方法

交互體驗(yàn)評估還沒有一套成型的方法，傳統(tǒng)的評估都是靠直覺經(jīng)驗(yàn)，那么能否通過探索共性，轉(zhuǎn)化成一種科學(xué)的有效的評估方法呢？

傳統(tǒng)的方法有：實(shí)驗(yàn)方法（隨機(jī)和重復(fù)測試），監(jiān)測方法，調(diào)查方法等�？茖W(xué)的評估方法：

1．設(shè)計(jì)原則評價（guidelinesEvaluation）

為自己的部門或者項(xiàng)目寫一個設(shè)計(jì)原則，從架構(gòu)、流程、控件、內(nèi)容等多個維度來構(gòu)造一定的設(shè)計(jì)要求，一套成型的設(shè)計(jì)原則誕生之后，可以讓設(shè)計(jì)師在設(shè)計(jì)過程中進(jìn)行自我評價，也可以讓設(shè)計(jì)師完成設(shè)計(jì)之后交付其他設(shè)計(jì)師進(jìn)行協(xié)同評審。2．啟發(fā)式評估（euristicEvaluation）

啟發(fā)式評估是指少數(shù)幾個評估者檢查界面，并判斷界面是否符合公認(rèn)的可用性原則。具體的方法見JakobNielsen寫的HowtoConductaHeuristicEvaluation一文，中文翻譯見初心不忘翻譯的如何進(jìn)行啟發(fā)式評估。3．可用性測試（usabilityTesting）

測典型用戶執(zhí)行典型任務(wù)時的情況，測試指標(biāo)包括用戶出錯次數(shù)，完成任務(wù)的時間等。典型的可用性測試是在實(shí)驗(yàn)室環(huán)境中進(jìn)行的，被測試人員受到評價人員的密切控制。可用性測試主要是量化用戶的執(zhí)行情況，測試的結(jié)果通常被表示為統(tǒng)計(jì)值。具體的方法見小胖翻譯的了解可用性測試。英文原文鏈接已經(jīng)掛掉。四、評估的結(jié)果可以產(chǎn)出一份詳細(xì)的評估報告，分別闡述四個維度上，交互設(shè)計(jì)中存在的亮點(diǎn)和問題，亮點(diǎn)加分，問題扣分，最后繪制成蜂窩圖，如圖2。四個維度的分加起來除4乘10是最后的總得分。

圖2交互體驗(yàn)評估結(jié)果蜂窩圖

最后總結(jié)一下，體驗(yàn)是一種很虛的東西，難以靠數(shù)值量化出來，就如同情感無法量化一樣。所以本文旨在提供一種客觀一點(diǎn)的思考方法。基于用戶體驗(yàn)的手機(jī)產(chǎn)品交互設(shè)計(jì)原則

一、用戶體驗(yàn)信息收集

在討論手機(jī)的交互設(shè)計(jì)方法之前，需要先對手機(jī)的用戶使用習(xí)慣有一些基本的了解，需要對手機(jī)的用戶體驗(yàn)信息做一些收集整理。收集用戶體驗(yàn)信息首先需要確定兩個問題：一是確定目標(biāo)用戶群體；二是確定信息收集的方法和途徑。

在確定目標(biāo)用戶群體的時候，很顯然的是，已有產(chǎn)品有過使用和交互經(jīng)驗(yàn)，具備該產(chǎn)品或系統(tǒng)的交互體驗(yàn)的用戶，相比較于那些沒有體驗(yàn)的用戶，可以為設(shè)計(jì)提供更多更有效的信息。因此在收集用戶體驗(yàn)信息時，應(yīng)該首先考慮所需設(shè)計(jì)的產(chǎn)品的用戶或是有過類似產(chǎn)品使用經(jīng)驗(yàn)的用戶。在理想的情況下，當(dāng)用戶體驗(yàn)產(chǎn)品的交互時，設(shè)計(jì)師可以通過某種技術(shù)或是研究方法獲得用戶的全部感官印象，掌握他們的情感體驗(yàn)。然而這些主觀的體驗(yàn)信息很難用實(shí)驗(yàn)室的方法收集或是客觀的科學(xué)描述表達(dá)出來。因此我們只能尋求貼近實(shí)際的近距離接觸用戶體驗(yàn)的方法，就是深入訪談和現(xiàn)場觀察。我們需要調(diào)研的信息有：1.硬件部分：

手機(jī)的持機(jī)模式（右手操作、左手操作、雙手操作）；手機(jī)的操作模式（手指觸控、筆觸、按鍵、滾輪、長按）；兩種操作模式下的輸入方式（全鍵盤、九鍵、觸屏鍵盤、手寫）；信息反饋形式（屏幕信息輸出、聲音、振動、燈光）對用戶的影響；

2.軟件部分：

用戶對屏幕信息結(jié)構(gòu)的認(rèn)識（空間位置、信息排列順序、信息的分類）用戶對信息導(dǎo)航的使用（菜單、文件夾管理、搜尋特定文件）用戶對信息傳達(dá)的理解（圖形信息、文字信息）用戶對交互反饋的獲知（每個操作是否有明確的反饋）

3.積極的用戶體驗(yàn)：

特殊交互模式帶來的新奇感受有趣

簡潔的操作步驟和有效的信息提醒方式信任感軟件運(yùn)行速度，信息處理過程操縱感和成就感允許誤操作，有效引導(dǎo)安全感交互過程中的完美感官體驗(yàn)（視覺、聽覺）

類似于電腦操作過程的交互（有電腦使用經(jīng)驗(yàn)的用戶）熟悉感和成就感品牌元素在交互上的延續(xù)性熟悉感和優(yōu)越感

4.消極的用戶體驗(yàn)：

系統(tǒng)出錯、沒有提示信息壓力、緊張和茫然缺少誤操作的補(bǔ)救機(jī)制挫敗感、壓力交互步驟的繁復(fù)難記挫敗感

提示信息的不明確（不符合用戶模型）茫然過程處理時間過長焦慮

二、用戶分類

1.依據(jù)用戶的需求可將智能手機(jī)的用戶分為兩類：1.1過程為主的用戶(processorientedenduser)

過程為主的用戶的典型例子是電玩族，他們追求的終級目標(biāo)就是視覺聽覺的沖擊和享受，最終游戲的結(jié)果反而變得不是那么重要了。此類設(shè)計(jì)對視覺和創(chuàng)意的要求是極為挑剔的，絕大多數(shù)設(shè)計(jì)師都有深厚的美術(shù)功底。

1.2結(jié)果為主的用戶(resultorientedenduser)

然而，與結(jié)果為主的用戶設(shè)計(jì)相比，過程為主的用戶的市場和受眾都要小的多。結(jié)果為主的用戶不在乎用什么樣的方式完成任務(wù)，但是任務(wù)必須以最短的時間，以最簡潔的方式，最精確的運(yùn)算結(jié)果來完成。對于此類用戶的交互設(shè)計(jì)人員來講，更重要的是設(shè)計(jì)更合理的任務(wù)邏輯流程(logicaltaskflow),以期最大幅度的符合人腦的思考方式和認(rèn)知過程(cognitiveprocess)。

2.依據(jù)用戶的使用經(jīng)驗(yàn)可將用戶可以分類為：2.1新手用戶

指剛剛開始接觸和使用智能手機(jī)的用戶，對智能手機(jī)的操作系統(tǒng)沒有過使用經(jīng)驗(yàn)，對計(jì)算機(jī)及應(yīng)用程序的一般用法也沒有太多的了解，但有一定的手機(jī)使用經(jīng)驗(yàn)。2.2中級用戶

使用智能手機(jī)有一定的時間，換過至少一個智能手機(jī)。對智能手機(jī)的部分操作相對熟悉，但經(jīng)常使用的軟件數(shù)量較少，并不完全熟悉智能手機(jī)系統(tǒng)的所有功能，對界面交互所必需的語法信息了解較少。2.3專家用戶

有過相當(dāng)長時間的智能手機(jī)使用歷史，更換過幾次智能手機(jī)，對手機(jī)的交互和電腦的操作都非常了解，經(jīng)常主動尋找更簡潔和快速的交互方式。

一般來說，中級用戶和專家用戶在長期使用某部分交互時遇到的問題更具有代表性，而新手用戶提出的問題則更有利于設(shè)計(jì)人員認(rèn)清用戶與智能手機(jī)交互時的認(rèn)知過程。三、交互設(shè)計(jì)原則

對應(yīng)用戶體驗(yàn)信息的收集和用戶分類，我們可以總結(jié)出來智能手機(jī)上交互設(shè)計(jì)的方法和要點(diǎn)。1.硬件交互設(shè)計(jì)

根據(jù)人機(jī)工程學(xué)原理設(shè)計(jì)按鍵大小等硬件交互要素；

盡可能提供多種輸入方式，包括鍵盤輸入和手寫輸入，鍵盤包括數(shù)字鍵盤和全鍵盤。合理設(shè)計(jì)鍵盤使其符合用戶的使用習(xí)慣；

考慮環(huán)境對用戶操作的影響。例如嘈雜的環(huán)境下提供震動的提示方式，黑暗又需要保持安靜的環(huán)境下選擇指示燈閃爍發(fā)光的方式提示用戶。

同樣需要考慮環(huán)境因素對用戶的影響，利用機(jī)械結(jié)構(gòu)多樣化設(shè)計(jì)實(shí)現(xiàn)單手操作模式和雙手操作模式的切換，需要設(shè)計(jì)切換的便捷方式、屏幕方向的變化和鍵盤的轉(zhuǎn)換等等硬件交互要素的變化。

設(shè)計(jì)新奇的交互模式，將大大提升用戶體驗(yàn)，例如sony的滾輪導(dǎo)航模式，和蘋果的觸點(diǎn)導(dǎo)航鍵（旋轉(zhuǎn)和點(diǎn)擊），都獲得了巨大的商業(yè)成功。

2.信息交互設(shè)計(jì)

信息項(xiàng)目的排布密度合理，字體排列、圖標(biāo)排列的方式具有可調(diào)性，設(shè)計(jì)合適的方式來突出重點(diǎn)信息；

使用用戶的語言來傳達(dá)信息，而非技術(shù)的語言。有效地使用“隱喻”。例如windows里面的“記事本”就是一個很好的隱喻例子，因?yàn)樗�和人們熟悉的日常概念�?lián)系在一起，所以用戶可以很容易的理解這是一個什么工具。好的隱喻可以起到快捷的說明作用；

字體大小、顏色、圖標(biāo)設(shè)計(jì)等，都決定可讀性的好與壞；

需要保持一致性的不光有每個功能軟件或是服務(wù)的圖標(biāo)外觀，更包括開機(jī)動畫、細(xì)節(jié)元素和無形框架的一致，都需要貼合用戶行為習(xí)慣進(jìn)行設(shè)計(jì)；

盡量避免同一個元素包含太多的信息，例如，顏色的使用不要包含太多信息暗示，因?yàn)橛脩舨灰欢〞�注意到或是理解某種顏色所包含的暗示。

3.軟件交互設(shè)計(jì)

導(dǎo)航功能。隨時轉(zhuǎn)移功能，很容易從一個功能跳到另外一個功能；允許工作中斷。例如當(dāng)用戶編輯短信的時候，收到短信或電話，完成后回來仍能夠找到剛才正寫的短信息；

方便退出。例如，提供兩種退出方式，按一個鍵完全退出，或是一層一層的退出。

讓用戶知道自己當(dāng)前的位置，使其做出下一步行動的決定；

提供快速反饋，減少不必要的潛在等待時間。在任務(wù)交予系統(tǒng)處理或計(jì)算的時候，會有一段潛在的用戶等待時間，一般我們會通過合適的等待提示讓用戶知道現(xiàn)在正處于系統(tǒng)潛在工作狀態(tài)，而不至于讓用戶頻繁地重復(fù)操作，使系統(tǒng)更慢；或者合理通過多任務(wù)切換處理避免這樣的等待間隔。通過這些方法可以讓用戶回避這種的無效時間，從而提高交互效率。

良好的防錯機(jī)制。誤操作后，系統(tǒng)提供有針對性的清晰提示。即使發(fā)生錯誤操作，也能幫助用戶保存好之前的操作記錄，避免用戶重新再來；

提供了解用戶操作行為的途徑，可以更好的幫助改善系統(tǒng)的操作；通過縮短操作距離和增加目標(biāo)尺寸來加速目標(biāo)交互操作。

4.體驗(yàn)交互設(shè)計(jì)

讓用戶控制交互過程�！跋乱徊健�、“完成”，面對不同層次提供多種選擇，給不同層次的用戶提供多種可能性；

預(yù)設(shè)置的默認(rèn)狀態(tài)應(yīng)該具有一定共通性和智能性，并對用戶操作起到協(xié)助或提示的作用；此外，還應(yīng)留給用戶修改和設(shè)置默認(rèn)狀態(tài)的權(quán)限；

圖標(biāo)、多媒體設(shè)計(jì)、細(xì)節(jié)設(shè)計(jì)和附加功能設(shè)計(jì)為體驗(yàn)增值，有效提升體驗(yàn)度；視覺設(shè)計(jì)，例如開關(guān)機(jī)動畫、界面顯示效果等；

多方面考慮用戶信息的私密性，提供有效的保護(hù)機(jī)制，例如指紋識別密碼模式。

四、總結(jié)

體驗(yàn)是一個比較虛的概念，很難量化很難評估，所以也導(dǎo)致很多小的無線產(chǎn)品開發(fā)團(tuán)隊(duì)干脆放棄了對產(chǎn)品用戶體驗(yàn)的把握，甚至不需要設(shè)置一個專門的呃交互設(shè)計(jì)師職位來改善產(chǎn)品的交互體驗(yàn)，這對于成長型的公司是可以容忍的，但是對于要想做出精品，長期處于市場不敗之地的公司就顯得不夠嚴(yán)謹(jǐn)了。手機(jī)互聯(lián)網(wǎng)是未來的發(fā)展趨勢，手機(jī)產(chǎn)品也對交互設(shè)計(jì)提出了更多的要求，簡單探析了一下從用戶體驗(yàn)出發(fā)來進(jìn)行手機(jī)產(chǎn)品交互設(shè)計(jì)的方法原則，之后還是需要一個比較成型的交互體驗(yàn)評估體系的。手機(jī)產(chǎn)品框架層設(shè)計(jì):兩種主要的布局方式手機(jī)產(chǎn)品設(shè)計(jì)與傳統(tǒng)的桌面和web產(chǎn)品設(shè)計(jì)相比，最顯著的約束是設(shè)計(jì)空間的急劇縮小。打個比方，這就像從一個100平米的房子搬到5平米的單間，東西沒少一樣，可以施展的空間卻小了幾十倍。更重要的是，在這樣一個小空間里，你不能把東西胡亂擺放，要依舊保持它們的清晰、合理、簡潔、美觀。借用《用戶體驗(yàn)的要素》中的名詞，這涉及到“框架層”的設(shè)計(jì)問題，在手機(jī)產(chǎn)品的設(shè)計(jì)中，框架層的設(shè)計(jì)即布局問題尤其關(guān)鍵。

然而，眾多手機(jī)產(chǎn)品看似紛雜的框架選擇，歸納起來，最主要的方式有兩種：按鈕式布局，標(biāo)簽式布局�；�于這兩種布局類型及其多種變形，并綜合兩種類型的巧妙組合，可以解決絕大多數(shù)功能模塊的組織問題。

手機(jī)產(chǎn)品框架層設(shè)計(jì)的兩種基本布局方式

按鈕式布局

當(dāng)多個功能之間相對獨(dú)立，用戶根據(jù)需求選擇其中一個功能時，按鈕式布局是一個不錯的選擇，結(jié)構(gòu)清晰、簡單明了。支付寶、12580客戶端、PingCo等手機(jī)產(chǎn)品的初始界面都采用了典型的按鈕式布局方式。

典型的按鈕式布局方式

以支付寶為例，當(dāng)在多個按鈕中選擇某個功能按鈕后，如“手機(jī)充值”，則直接進(jìn)入手機(jī)話費(fèi)充值頁面，然后進(jìn)行相應(yīng)的手機(jī)充值操作。這種設(shè)計(jì)結(jié)構(gòu)清晰，手機(jī)支付寶有8個主要功能，分成8個按鈕，布局有條不紊。

支付寶的手機(jī)充值功能

變體。按鈕式布局的表現(xiàn)形式多種多樣，有很多變體。比如，在熊貓看書中，幾個功能按鈕排成一行，放在底部，上面是熊貓看書的一些通告；在愛幫公交中，幾個鏈接本質(zhì)上是就是按鈕，可以分別選擇乘車、線路或站點(diǎn)查詢；在139i聯(lián)系中，按鈕成為長條形，每行一個，排成一列（樣式上類似于iphone上的系統(tǒng)控件），每個按鈕被激活后，下部都會有對應(yīng)功能的解釋。這些以不同方式展現(xiàn)出來的按鈕式布局，或者更加美觀，或者更加簡潔，把多個功能進(jìn)行了有效的組織。

按鈕式布局的更多實(shí)現(xiàn)形式（按鈕部分用黃色框標(biāo)出）

缺點(diǎn)。按鈕式布局的一個缺點(diǎn)是，功能模塊之間的切換需要較多步驟，功能之間相對離散。例如，從支付寶的手機(jī)充值頁面切換到交易查詢頁面，需要首先選擇右下角的“返回”按鈕，回到主界面，然后點(diǎn)擊“交易查詢”按鈕，才能進(jìn)入相應(yīng)界面。在支付寶中，這個問題似乎還不明顯，還不是一個問題。如果每個功能界面都比較復(fù)雜，層次較深（比如12580客戶端），則不同功能之間的切換將變得非常繁瑣，每次都要返回到按鈕組合界面，才能訪問其他功能。標(biāo)簽式布局

標(biāo)簽式布局能夠解決按鈕式布局中“功能離散”的缺點(diǎn)。當(dāng)功能之間聯(lián)系密切，用戶需要頻繁在各功能之間進(jìn)行頻繁時，標(biāo)簽式布局是首選的設(shè)計(jì)選擇。UCWeb瀏覽器（以及騰訊QQ瀏覽器）、手機(jī)MSN、愛幫愛逛的公交頻道等手機(jī)產(chǎn)品都采用了典型的標(biāo)簽式布局來組織一些功能界面。

典型的標(biāo)簽式布局(標(biāo)簽部分用黃色框標(biāo)出)

以愛幫愛逛的公交頻道為例，和公交相關(guān)的換乘、路線、站點(diǎn)三個功能組織成標(biāo)簽，用戶進(jìn)入該頻道后能夠一目了然，根據(jù)自己的需求輕松切換（默認(rèn)是用戶經(jīng)常使用的換乘功能）。

愛逛公交頻道的三個公交功能用標(biāo)簽組織

為什么沒有把愛幫公交中的三個功能集中在一個頁面，按照從上到下的方式排列呢？主要考慮兩個因素。

第一，功能完全展示。如果三個功能集中在一個頁面，由于每個功能的內(nèi)容都可能比較長（在小屏幕手機(jī)中尤其如此），如“查詢歷史”就會占據(jù)一大部分空間。此時，換乘之外的路線、站點(diǎn)兩個功能有可能無法在第一個屏幕展示出來，于是，用戶有可能不知道屏幕下面還有這兩個功能。

第二，快速切換標(biāo)簽。如果三個功能集中在一個頁面，若用戶想查公交站點(diǎn)，則必須“路過”排在前面的換乘、路線兩個功能模塊，至少需要按6-9個向下鍵才能到達(dá)公交站點(diǎn)的輸入框。采用標(biāo)簽式布局，最少只需移動兩次右鍵即可。

變體。標(biāo)簽式布局也可以有更多的表現(xiàn)形式，下面便是兩個例子。在手機(jī)大頭中，幾個主要頻道全部通過標(biāo)簽進(jìn)行組織（雖然看上去很像大大的按鈕），頻道之間通過左右鍵就可以實(shí)現(xiàn)切換，當(dāng)前選中標(biāo)簽一直處在中間位置，非常明顯。在千尺下載中，幾個主要功能的標(biāo)簽被放置在屏幕底部，和手機(jī)大頭一樣，也是通過左右鍵實(shí)現(xiàn)標(biāo)簽切換，當(dāng)前標(biāo)簽通過黃顏色識別，使用起來也非常直觀。

標(biāo)簽式布局的更多表現(xiàn)形式（標(biāo)簽部分用黃色框標(biāo)出）

缺點(diǎn)。當(dāng)然，標(biāo)簽式布局也有它的潛在問題，最主要的就是標(biāo)簽切換。當(dāng)標(biāo)簽頁面比較復(fù)雜時，比如包括很多鏈接，文字內(nèi)容很長，當(dāng)前光標(biāo)可能會停留在正文中。此時，如果把光標(biāo)移動到標(biāo)簽上再進(jìn)行切換，會非常繁瑣，需要很多按鍵操作。對于這個問題，騰訊QQ瀏覽器、手機(jī)MSN、UCWeb瀏覽器、貝多等手機(jī)軟件根據(jù)自身特點(diǎn)，有不同的解決方案。對于標(biāo)簽切換的各種實(shí)現(xiàn)及其優(yōu)劣，會專門撰文進(jìn)行分析。兩種布局方式的混合應(yīng)用

需要特別指出的是，按鈕式布局和標(biāo)簽式布局是在不同場景下組織多個功能模塊的不同方式，沒有優(yōu)劣之分，只看恰當(dāng)與否。在合適的場景使用恰當(dāng)?shù)姆绞�，就能讓�?fù)雜的功能在狹小的手機(jī)界面上得到很好的展示。事實(shí)上，多數(shù)功能復(fù)雜的產(chǎn)品，都要采用這兩種方式架構(gòu)自己的產(chǎn)品。下面是兩個混合使用兩種布局方式的典型例子。

手機(jī)QQ和掌上寶混合使用了兩種布局方式

在手機(jī)QQ中，初始的主菜單采用按鈕式布局，默認(rèn)情況下“QQ”是選中按鈕，因?yàn)椤癚Q”是最常用的功能。除此之外，移動方向鍵，還可以選擇“騰訊網(wǎng)”、“游戲”、“資訊”等功能按鈕。無論選擇哪個按鈕，點(diǎn)擊后，都會進(jìn)入標(biāo)簽式組織的操作頁面中，通過切換標(biāo)簽，仍然可以實(shí)現(xiàn)各功能的快速切換（瀏覽網(wǎng)頁，查看郵件，聊QQ，群聊，等等）。

掌上寶的所有界面完全是兩種布局的組合：一方面，通過左右鍵切換標(biāo)簽，實(shí)現(xiàn)各主要功能的循環(huán)切換，另一方面，在每個標(biāo)簽內(nèi)部，各個子功能組織成豎排的按鈕，通過上下鍵進(jìn)行選擇。左右鍵和上下鍵都得到了很好的利用，用戶在使用過程中不會意識到是在切換標(biāo)簽還是在移動按鈕，一切都通過設(shè)計(jì)自然達(dá)成。掌上寶共有36個子功能，通過這種組織方式，非常清晰的在手機(jī)上展現(xiàn)出來，操作極其方便。

友情提示：本文中關(guān)于《手機(jī)交互設(shè)計(jì)禁忌》給出的范例僅供您參考拓展思維使用，手機(jī)交互設(shè)計(jì)禁忌：該篇文章建議您自主創(chuàng)作。

來源：網(wǎng)絡(luò)整理 免責(zé)聲明：本文僅限學(xué)習(xí)分享，如產(chǎn)生版權(quán)問題，請聯(lián)系我們及時刪除。

《手機(jī)交互設(shè)計(jì)禁忌》由互聯(lián)網(wǎng)用戶整理提供,轉(zhuǎn)載分享請保留原作者信息,謝謝!
鏈接地址：http://m.taixiivf.com/gongwen/650750.html

• 上一篇：交互設(shè)計(jì)入門
• 下一篇：如果你想成為一名交互設(shè)計(jì)師