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

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

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

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

2、菜單層次太深

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

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

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

5、交互流程分支太多

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

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

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

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

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

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

我們?cè)谧鲈O(shè)計(jì)的時(shí)候，往往是提供理想化的場(chǎng)景，用戶都已經(jīng)進(jìn)來(lái)了，我們?cè)趺赐�。但是，往往�?yīng)用剛推出的時(shí)候，是沒(méi)有用戶的，甚至當(dāng)應(yīng)用有了一定用戶基礎(chǔ)的時(shí)候，新進(jìn)來(lái)的用戶打開(kāi)應(yīng)用的時(shí)候，應(yīng)用仍然可能是一種沒(méi)有數(shù)據(jù)的狀態(tài)，再或者當(dāng)用戶清楚了全部數(shù)據(jù)，這三種情況下，用戶都可能遇到空數(shù)據(jù)的界面。新手設(shè)計(jì)師往往不加設(shè)計(jì)，這時(shí)候用戶就會(huì)看到一個(gè)空白界面，茫然失措。有經(jīng)驗(yàn)的做法就是，提供一個(gè)情感化的界面，告訴用戶當(dāng)前沒(méi)有內(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)；如果是功能告知，只需呀輕量級(jí)的引導(dǎo)；如果是版本更新說(shuō)明，說(shuō)明書(shū)式的引導(dǎo)可以采用，但是要言簡(jiǎn)意賅。

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

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

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

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

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

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

三部曲指的是：

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

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

第三：交互規(guī)范

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

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

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

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

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

由輸入性能牽扯到的問(wèn)題：

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

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

由使用場(chǎng)景和狀態(tài)牽扯到的問(wèn)題：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.硬鍵和手勢(shì)控制

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

大家請(qǐng)看以下截圖：S60第3版

AndroidIphone:

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

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

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

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

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

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

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

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

Android

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5.列表

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

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

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

搜索邏輯

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

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

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

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

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

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

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

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

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

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

一、iPhoneApp的特點(diǎn)

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

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

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

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

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

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

1、自上而下的操作：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

一、評(píng)估的目的

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

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

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

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

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

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

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

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

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

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

有如下幾個(gè)評(píng)估標(biāo)準(zhǔn)：

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

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

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

布局清晰文案簡(jiǎn)潔

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

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

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

三、評(píng)估的方法

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

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

1．設(shè)計(jì)原則評(píng)價(jià)（guidelinesEvaluation）

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

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

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

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

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

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

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

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

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

2.軟件部分：

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

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

特殊交互模式帶來(lái)的新奇感受有趣

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

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

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

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

提示信息的不明確（不符合用戶模型）茫然過(guò)程處理時(shí)間過(guò)長(zhǎng)焦慮

二、用戶分類

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

讓用戶控制交互過(guò)程�！跋乱徊健薄ⅰ巴瓿伞�，面對(duì)不同層次提供多種選擇，給不同層次的用戶提供多種可能性；

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

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

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

四、總結(jié)

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

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

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

按鈕式布局

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

典型的按鈕式布局方式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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