手機交互設計禁忌

手機產品設計禁忌

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

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

2、菜單層次太深

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

手機界面很小，寸土寸金，一頁只能顯示下6~10個列表，一行只能顯示下10~16個字，標題欄的字數以5個以內為宜，標簽欄也以2~3個為宜，那么這時候出現文字過長的情況，一定要定義一下處理方式，如果是選擇型的，一般是截斷或者打點縮略；如果是內容閱讀型的，可以折行。但最合理的方式還是精簡文字內容，縮短文字長度。4、文字表意不明

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

5、交互流程分支太多

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

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

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

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

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

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

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

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

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

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

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

擴展閱讀：手機交互設計

手機客戶端交互設計三部曲

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

三部曲指的是：

第一：手機軟件導航的交互特點

第二：手機軟件平臺與硬件的關系

第三：交互規(guī)范

引文：關于手機與web界面交互設計的區(qū)別

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

1.每屏無法顯示足夠多的內容

2.沒有足夠空間放置全局導航條

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

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

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

2.觸摸機型尤其需要注意區(qū)分可否點擊，并且可點擊的部分需要能準確的釋義因為缺少web界面中的懸停提示

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

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

2.本人沒有進行過較深層次的研究，有興趣和經驗的同學可以多交流

引文部分的總結（概述）：

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

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

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

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

第一：手機軟件導航的交互特點

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

第二：手機軟件平臺與硬件的關系

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

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

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

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

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

主流的可安裝第3方應用的軟件平臺：

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

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

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

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

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

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

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

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

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

1.硬鍵和手勢控制

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

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

AndroidIphone:

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

S60第3版的菜單是由左軟鍵或OK鍵調出，需要定義以下幾點：

（注：聚焦到某一條目上時，通常按OK鍵是打開，但有一些內容包含幾種看起來級別相當的操作，此時會彈出菜單選擇）

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

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

數字標號，如果整個軟件能保證菜單項目均在10位以內，建議加上，這樣可以與數字鍵盤對應

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

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

Android

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

Android還有一種長按菜單，按住某個項目達到一定時間后，會彈出在觸點附近的位置。Iphone

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

說到這里，不得不結合前兩點延伸一下，對導航系統進行說明：

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

我們可以看到各平臺對導航系統的規(guī)劃：

標題顯示當前位置，可以是文字、圖標+文字、也可以是一系列tab

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

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

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

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

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

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

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

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

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

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

5.列表

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

編輯/被調用：

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

搜索邏輯

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

文本輸入：光標的移動、刪除和復制粘貼、選中地址/人名等。

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

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

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

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

最小化、關閉等按鈕的忽左忽右，會使我們經常默認就把鼠標移動到了相反的方向。

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

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

iPhoneApp的特點及基本設計方法

一、iPhoneApp的特點

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

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

沒有物理按鍵做為目錄菜單的呼出功能，完全不同于Symbian和Android系統，包括導航也需要屏幕中的虛擬按鈕來實現。3、功能操作

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

二、iPhone的使用習慣

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

1、自上而下的操作：

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

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

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

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

三、iPhoneApp的基本設計方法1、iPhone應用的分類1)高效型

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

此類應用給用戶的感覺是層層進入，內容逐步具體化，直到可以完成用戶的任務。另外一個非系統應用且典型的就是QQ，可以看一下是不是也遵循這個特點。2)實用工具型應用

此類應用一般交互操作非常少，也沒有很深的層次結構，往往都是直接了當的展示信息，一般會在“背面”(通常會有一個翻轉的效果)展示設置功能。最常見的就是“天氣”和“股票”兩個系統自帶的應用。3)浸入式應用

大多指游戲類應用，但也有一些實用工具，比如電子羅盤，所謂浸入式應用一般是全屏模式，專注一個任務或是娛樂的深入體驗，沒有過多的文字，而將用戶的注意力放在如何使用它。2、設計iPhone應用1)iPhone應用的基本結構

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

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

2)移植你的應用

大多數情況下我們都是把web端的應用移植到手機上，而在web端的應用，如果我們列出一個功能結構圖，可能會包含100項以上的功能點，你可以做如下工作：

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

②對確認的功能結構考慮在iPhone上的信息架構模型，上文說過，iPhone應用是線性的連貫操作，一層一層進入直到完成最后的任務，所以你要按這個思路去整理信息架構，一般來說，操作的深度不要超過3層，如果超過3層就要對產品形態(tài)進行扁平化處理，即由深度改為廣度，因為隨著深度的增加，每一級別都會有不同的功能，甚至有承載上一級的功能或邏輯，深度越多，這些功能就會越復雜，而在手機如此小的空間上就很難進行合理組織�？梢匝由扉喿xkentzhu同學更多的限制，更簡單的設計③合理利用iPhone應用的結構及標準控件。

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

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

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

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

我們看到滑動效果的開關，突起效果的分段按鈕，轉盤選擇器等，代替了傳統web中死板無生氣的標準控件。

④調用系統提供的功能接口

例如iPhone提供的地理位置接口，可以為你的應用提供不同于web端的特殊功能，設計出更具有特色的產品，更能滿足移動用戶的需求。

最后，我想說iPhone應用是簡潔的，包括設計上的簡潔和功能上的簡潔，不應該有太多的功能分支，不管你是否能組織好這些功能，過多的功能總會把用戶搞暈。iPhone應用是有特殊氣質的，你可以把他設計的完全符合iPhone使用的特點，甚至帶有一點炫酷，而不用考慮低端用戶，因為使用iPhone并且可以裝App的用戶，他的使用經驗不會太差。

手機產品交互體驗評估方法

一、評估的目的

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

手機產品交互設計的評估標準還是是否滿足用戶體驗，當然，體驗是一個很虛的東西，沒有一個具體的量化標準，那我們就落在實處，從可以量化的維度打分。具體從那幾個維度入手，我認為可以分為如下幾個，見圖1：

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

同時，產品層級較深的，設計師要清楚的了解有產品有多少個二級頁面，多少個三級頁面。這些二級頁面和三級頁面的架構，是復用一級頁面的，還是有自己的架構。有如下幾個評估標準：

產品結構清晰，沒有不必要的層級能快速了解產品有幾個主要頁面所有主要部分都能夠通過首頁訪問清晰的指示了當前的位置

2、產品流程是否清晰

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

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

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

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

有如下幾個評估標準：

控件使用準確性（比如是否混淆了單選框和復選框，對話框層次過多等）控件的復用（比如兩個頁面都用到tabbar，不用設計兩個）控件的狀態(tài)（比如不可點狀態(tài)、可點狀態(tài)、按下狀態(tài)、長按狀態(tài)）鏈接色的準確使用焦點狀態(tài)的準確使用

4、信息傳達是否到位

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

布局清晰文案簡潔

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

合理排版（標題、作者、時間的字號、字色，頁邊距的運用）

標簽和內容的從屬關系（能否看出當前標簽頁，和當前標簽頁的從屬內容）

三、評估的方法

交互體驗評估還沒有一套成型的方法，傳統的評估都是靠直覺經驗，那么能否通過探索共性，轉化成一種科學的有效的評估方法呢？

傳統的方法有：實驗方法（隨機和重復測試），監(jiān)測方法，調查方法等�？茖W的評估方法：

1．設計原則評價（guidelinesEvaluation）

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

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

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

圖2交互體驗評估結果蜂窩圖

最后總結一下，體驗是一種很虛的東西，難以靠數值量化出來，就如同情感無法量化一樣。所以本文旨在提供一種客觀一點的思考方法�；�于用戶體驗的手機產品交互設計原則

一、用戶體驗信息收集

在討論手機的交互設計方法之前，需要先對手機的用戶使用習慣有一些基本的了解，需要對手機的用戶體驗信息做一些收集整理。收集用戶體驗信息首先需要確定兩個問題：一是確定目標用戶群體；二是確定信息收集的方法和途徑。

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

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

2.軟件部分：

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

3.積極的用戶體驗：

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

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

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

4.消極的用戶體驗：

系統出錯、沒有提示信息壓力、緊張和茫然缺少誤操作的補救機制挫敗感、壓力交互步驟的繁復難記挫敗感

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

二、用戶分類

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

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

1.2結果為主的用戶(resultorientedenduser)

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

2.依據用戶的使用經驗可將用戶可以分類為：2.1新手用戶

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

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

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

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

對應用戶體驗信息的收集和用戶分類，我們可以總結出來智能手機上交互設計的方法和要點。1.硬件交互設計

根據人機工程學原理設計按鍵大小等硬件交互要素；

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

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

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

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

2.信息交互設計

信息項目的排布密度合理，字體排列、圖標排列的方式具有可調性，設計合適的方式來突出重點信息；

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

字體大小、顏色、圖標設計等，都決定可讀性的好與壞；

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

盡量避免同一個元素包含太多的信息，例如，顏色的使用不要包含太多信息暗示，因為用戶不一定會注意到或是理解某種顏色所包含的暗示。

3.軟件交互設計

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

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

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

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

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

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

4.體驗交互設計

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

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

圖標、多媒體設計、細節(jié)設計和附加功能設計為體驗增值，有效提升體驗度；視覺設計，例如開關機動畫、界面顯示效果等；

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

四、總結

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

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

手機產品框架層設計的兩種基本布局方式

按鈕式布局

當多個功能之間相對獨立，用戶根據需求選擇其中一個功能時，按鈕式布局是一個不錯的選擇，結構清晰、簡單明了。支付寶、12580客戶端、PingCo等手機產品的初始界面都采用了典型的按鈕式布局方式。

典型的按鈕式布局方式

以支付寶為例，當在多個按鈕中選擇某個功能按鈕后，如“手機充值”，則直接進入手機話費充值頁面，然后進行相應的手機充值操作。這種設計結構清晰，手機支付寶有8個主要功能，分成8個按鈕，布局有條不紊。

支付寶的手機充值功能

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

按鈕式布局的更多實現形式（按鈕部分用黃色框標出）

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

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

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

以愛幫愛逛的公交頻道為例，和公交相關的換乘、路線、站點三個功能組織成標簽，用戶進入該頻道后能夠一目了然，根據自己的需求輕松切換（默認是用戶經常使用的換乘功能）。

愛逛公交頻道的三個公交功能用標簽組織

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

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

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

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

標簽式布局的更多表現形式（標簽部分用黃色框標出）

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

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

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

在手機QQ中，初始的主菜單采用按鈕式布局，默認情況下“QQ”是選中按鈕，因為“QQ”是最常用的功能。除此之外，移動方向鍵，還可以選擇“騰訊網”、“游戲”、“資訊”等功能按鈕。無論選擇哪個按鈕，點擊后，都會進入標簽式組織的操作頁面中，通過切換標簽，仍然可以實現各功能的快速切換（瀏覽網頁，查看郵件，聊QQ，群聊，等等）。

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

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

來源：網絡整理 免責聲明：本文僅限學習分享，如產生版權問題，請聯系我們及時刪除。

《手機交互設計禁忌》由互聯網用戶整理提供,轉載分享請保留原作者信息,謝謝!
鏈接地址：http://m.seogis.com/gongwen/650750.html

• 上一篇：交互設計入門
• 下一篇：如果你想成為一名交互設計師