移動設計八原則

移動設計八原則

   近幾年，交互設計專業也有了蓬勃發展，Alan Cooper、Donald Norman等人為交互設計提供了許多理論上的支持，Ben Shneiderman 提出的交互設計“黃金八法”和Nielsen 的“啟發式評估10 條原則”為交互設計的評估提供了標準，所有這些理論和原則在移動應用的設計上依然是通用的。但移動應用有其特殊性，在設備和情景上都與普通的設計不同。因此，我們在考慮其他原則的基礎上，整理了八條移動應用設計的針對性原則。

一、內容優先

   對于手機而言，屏幕空間資源顯得非常珍貴。為了提升屏幕空間的利用率，界面布局應以內容為核心，而提供符合用戶期望的內容是移動應用獲得成功的關鍵。如何設計和組織內容，使用戶能快速理解移動應用所提供的內容，使內容真正有意義，這是非常重要的。
重組內容，使內容符合移動的特征

   在PC 上的網頁內容往往相對復雜，在進行內容移動化時，并不合適把內容直接照搬到手機端。在進行移動應用設計時，應該重組內容，使其符合移動應用的特征。

移動應用的內容應使用用戶的語言，以用戶熟悉的維度來組織內容，這樣更容易查找目標信息，提升內容的利用率；刪除無關的多余內容，讓內容更簡潔清晰，考慮在小屏幕空間可以合理的布局，增加屏幕的利用率；內容要是清晰和具體的，是用戶恰好需要的；內容要是有情景特征的，可以在不同的情景下給用戶提供不同的情景下的內容。
優先突出用戶需要的信息，而簡化界面的導航

   一個應用提供給用戶的信息往往是太多而不是太少，設計師們的關注重點也會轉移到如何讓用戶找到內容，而忽略了能給用戶獲得價值的是內容，而不是導航。

書城閱讀軟件

   上圖是兩個書城閱讀軟件的首頁，左圖應用在設計上以導航和框架為基礎，用戶想要看到內容，則需要再次進行操作。而右圖應用則直接以用戶要看的內容（書）為主體，突出了內容的設計。

   在移動應用設計時，我們更為關注的是用戶需要的內容，其次才是導航。在內容本身復雜而多變的時候，如何讓用戶能更快速地獲取恰當的信息，在移動情景中會顯得很重要。

適時提升屏幕空間的利用率
   即使用戶的視覺注意點集中在內容上，在設計方面也要把屏幕資源更多的給內容而不是導航。只是在恰當的時候，可以讓用戶呼出導航即可。

在天貓客戶端的搜索列表界面，當用戶剛進入搜索列表時，應用會給用戶顯示篩選和標題欄。當用戶向上滑動列表查看列表中更多內容時，篩選和標題欄會自動收起，給出最大的空間來展示用戶需要的內容。當用戶需要導航時，向下滾動列表就可以顯示出來。在設計上充分考慮了內容優先，只是在恰當的時候才顯示導航和篩選等信息。

搜索列表設計

二、為觸摸而設計

   點擊操作是PC 時代交互的基礎，在觸屏設備上基于手指的手勢操作已經代替了鼠標的點擊操作。手勢操作靈活多變、交互自然，但也帶來識別性差、操作精度不高等缺點，都需要一些手勢設計的基本原則來指導和完善。
以信息架構為基礎，建立手勢交互規范

   在一個移動應用中，手勢的統一性非常重要。讓用戶在應用的任何界面中都知道怎么使用手勢，并達到預期的結果。這需要設計師提供一套基于應用信息架構的手勢規范，它將是導航與交互的基礎。下面我們以Clear 為例來講述一下手勢的架構設計。

Clear 的手勢架構

   Clear 這個應用的三層導航架構在整個交互架構上，都是以手勢為基礎。這里可以對Clear 的交互設計進行分析。

   第一部分就是它的導航邏輯。它的導航邏輯以手勢架構為基礎，層級導航向下時為Tab 點擊，層級向上返回時為在List 頂部向下在拖動一定距離。整個應用的導航邏輯統一，用戶只要在一個地方學會了操作，在整個應用中都能快速上手。

   第二部分就是細節交互。它也是以手勢為基礎，新增操作就是在列表頂部向上拖動一個項目距離，刪除操作是從右向左拖動項目到一定距離，設置是從左向右拖動項目到一定距離。

總的來說，Clear 這款應用的導航架構與手勢架構邏輯都比較清晰，操作一致性較高，易學性強。

   在應用設計時，完成信息架構設計后，也要思考應用手勢的架構，使基于手勢的導航能與信息架構整合一體，讓用戶方便、快捷地找到內容。
優先設計自然的手勢交互，而不只是Tap 點擊

   在移動應用的設計過程中，我們可以發現大多數的應用在手勢的使用上都是非常保守的，基本上以Tap 點擊為主，模擬在PC 上的操作方式。但是，作為以觸屏為基礎的設計，如果只使用Tap 點擊的形式，不能完全體現出自然的交互操作。我們建議在設計時，能更多地思考出一套適合自己應用的手勢交互形式，使用戶在操作的過程中能更自然、更高效。
引導用戶在情景中學習手勢操作

   由于手勢在界面上是相對隱藏的操作類型，需要用戶的探索和學習。因此，除了基本的用戶都熟知的手勢外，其他手勢在使用時都需要給出提示和引導。手勢操作基于程序性操作知識，最好的學習方式就是通過實際操作來理解和記憶。因此在手勢引導設計上，更多的是以指導用戶操作的方式來做，能讓用戶快速掌握。

手勢引導

   在Fantastical 的操作提示界面中，有一個藍色的小點一直從上到下落下，提示用戶向下拖曳來切換視圖。由于結合了實際操作，這個手勢更容易被記憶。
特殊手勢不是必須的

   蘋果的Mac OS 提供了很多快捷操作方式及手勢的交互形式，這些多指的手勢能讓專家用戶的操作效率得到大幅度提升。新手卻很難記住所有的手勢，但是這并不影響他們使用Mac 系統，因為系統都提供了滿足于新手的交互解決方案。在移動應用的設計上也會采用一些個性化的、不屬于各個操作系統規范里定義的手勢，在某些情景中使用也會非常合適。但是特殊手勢應作為快捷操作的形式存在，用戶不使用它也能完成任務。特殊手勢的使用能提升產品的交互效率，或者給出有趣的體驗，但是它們不是必須的。
可觸區域必須大于7×7 mm，盡量大于 9×9mm

   在觸摸操作設計時，我們已經知道在界面中的可觸物理區域不應小于7~9mm。為了讓用戶能在各種情景下都能容易操作，我們建議可觸區域不應小于9mm。但是可觸區域不同于在屏幕中直接呈現的物理大小，為了視覺及審美的需要，有時設計師會把屏幕元素設計得較小，這也是允許的，實際的可觸區域可以大于屏幕元素呈現給我們的大小。我們需要控制可觸區域的空間，在可觸區域中都可以觸發用戶的操作。
手勢操作要提供過程反饋提示

   在觸屏界面上，由于手勢操作是隱藏在界面中的，用戶必須去嘗試才能知道真實的效果如何。因此，在用戶手勢操作過程中反饋顯得非常重要，他們需要反饋才能知道手勢是否有效，也才能知道操作后獲得的結果。

三、轉換輸入方式

   文字輸入是移動端的軟肋之一，不管是手寫輸入還是鍵盤輸入，操作效率都相對較低。在行走或者單手操作時，輸入的出錯率也比較高。如何在應用設計時避免文字輸入，或者使用一些代替方案來提升輸入效率，在移動應用設計中顯得尤為重要。
減少文本輸入，轉化輸入形式

   在數字輸入過程中，常常會把文字的輸入轉化為基本的手勢輸入。手勢操作會以更快的形式進行輸入，提升了輸入的效率。如下面的兩個例子在移動輸入的改進方面提供了幫助，天貓客戶端的價格輸入轉化為手勢拔動；在Black Berry 的輸入法中，當用戶輸入某個字母后，系統會給用戶提供該字符串開始的推薦詞，用戶手指拔動就可以完成詞語輸入，省去了后面字符串的點擊輸入，提升了效率。

價格選擇的手勢BlackBerry 快捷輸入
簡化輸入選項，變填空為選擇

   在設置輸入或者對于一些已知項目的輸入中，盡量把用戶要輸入的內容變成選擇。如已有帳戶的登錄過程，讓用戶選擇而不是輸入。日期、地址等本身可以轉化為選擇項的內容，盡量使用選擇輸入。盡量把用戶的常用選項篩選出來讓用戶選擇，而不是直接讓用戶輸入。
使用手機已有的傳感器輸入

   使用語音、掃描識別（二維碼、條碼、文字等）、LBS 技術來減少用戶的輸入，給用戶提供便利。我們在進行輸入設計時，多轉換思維，發揮各個傳感器的基本特性并靈活運用，把難以輸入轉化為簡單智能的輸入形式，使用戶能更便捷地使用。

四、流暢性

   在移動應用的操作過程中會碰到多種多樣的情況——找不到目標、不知道該怎么操作、操作后沒有及時反饋，等等，這都會對應用的流暢性造成影響。在移動應用的設計中主要從三個方面來考慮應用的流暢性，即手指及手勢的操作流、用戶的注意流和界面反饋的轉場流暢性。

流的對比

   當把用戶完成任務的操作觸點連接起來就能組成一個完整的操作流，我們可以通過操作路徑來判斷界面的流暢性，操作路徑短能在一定程度上被認為是操作效率更高、流暢性更好。用戶在操作界面時，注視點轉移形成的焦點流連起來后就形成了注意流，注意流是否圓滑也是判斷界面是否流暢的重要標志。注意流大幅跳躍的界面一般被認為是界面元素的布局不夠合理，需要讓界面元素重新布局或者設計更好的注意引導機制，讓注意流更圓滑。在本書的番外篇“流”中我們將探討了一種移動應用的流設計方法，就是在操作流和注意流的基礎上來討論更自然流暢的設計體驗。

   除了注意流和操作流外，要讓界面保持流暢性，更重要的一條是讓應用的界面轉場過渡和反饋都是及時流暢的，轉場動效的設計在《移動設計》第5 章“細節”中會有詳細闡述。除了完成理想的動效外，設計師們在做完設計后，還需要時刻跟進項目，試用開發的中間版本，體驗應用的設計是否流暢，及時調整界面和轉場動效中不流暢的地方。

五、多通道設計

   多通道設計是指系統的輸入和輸出都可以由視覺、聽覺、觸覺等來協作完成，協同的多通道界面和交互也會讓用戶更有真實感和沉浸感。當前各個系統平臺下的基礎技術已經越來越成熟，語音輸入、手勢識別及其他由多種傳感器組成的綜合識別系統也會給用戶帶來更自然的感覺。設計師們在思考時，也可以從其他通道的角度來思考設計，給用戶一個更好的交互方式。

   多通道的設計在多數情況下都需要有深厚的技術功底做支持，新創團隊也需要較多的積累才可能達到。

Chirp

   上圖是兩部手機正在使用應用Chirp 來傳遞圖片的界面，發起和接收圖片使用的信號是鳥叫聲。發起方發出一個聲音，接收方接收到聲音后，就完成了圖片的傳遞。這是一個比較生動的多通道配合的例子。通過聲音發送信息的方法是一個理所當然的形式，它和我們對溝通的理解很一致（不同的鳥叫聲會傳遞不同的信息），而像藍牙、Wi- Fi 等復雜的協議對人們來說是看不見的、高深莫測的、不可愛的，它們讓人困擾或不爽。而通過Chirp得到的結果卻使設計更加有愛。

六、易學性

   對于移動應用產品，提倡的是簡單、直接的操作，傾向于清晰地表達產品目標和價值。讓用戶快速學會使用，盡量不要讓他們查看幫助文檔。保持界面架構簡單、明了，導航設計清晰易理解，操作簡單可見，通過界面元素的表意的和界面提供的線索就能讓用戶清晰地知道操作方式。只有這樣的設計，才能讓用戶的學習使用沒有負擔，而不是通過幫助系統來教會用戶操作。

使用前引導

   現在移動應用的幫助頁面幾乎成了必不可少的元素，在應用中都植入了操作引導界面，其實這完全沒有必要。有些產品會出于各種原因，不得不設計幫助頁面，以免用戶在打開后不清楚應用是做什么的、不知道是怎么操作的而放棄使用。其實這些頁面在設計時就要考慮移動端的用戶行為和使用情境，因為用戶可能沒有那么多時間仔細去看說明，而是試圖快速地了解應用本身。許多應用更新后，都會發現啟動頁后有許多幫助內容，有些應用甚至提供了8、9 屏的內容或者各種操作說明，用戶既沒有耐心看，也很難記得住這些操作，我們建議最好不要超過3 屏內容，且要有快速退出的操作。

   對于功能引導設計，更好的幫助設計是把新功能的提示與產品本身做更完美的結合，這樣用戶在他剛好要使用的情境下獲得提示，讓用戶感到友好并不突兀，這樣的設計更合適。

七、為中斷而設計

   在玩手機時突然沒電了、寫微博時又被老板叫去做重要的事情、在搜索商品時收到了一條重要的信息……在移動情境中，被各種其他的事情打斷是很平常的。
保存用戶的操作，減少重復勞動

   網絡中斷狀態：移動網絡時常不穩定，當用戶在操作過程中，突然斷網則會給用戶帶來干擾，那是否要在設計上考慮保存用戶之前的勞動成果呢？如果當用戶正在發送一條評論內容，突然網絡中斷了，那應該如何處理呢？

   在移動應用上行服務端數據時，都需要考慮網絡狀態出現異常的狀況。例如新浪微博客戶端，當博文發送不成功時會暫存到草稿箱中，用戶可以在草稿箱里再次發送，iPhone 發送信息不成功，也會保存內容，標記為發送失敗，允許用戶重復發送。這都是暫存用戶輸入信息的好案例。在網站狀態不好時，應用需要保存用戶編輯的內容，允許用戶在網絡狀態良好時繼續發送，甚至自動在后臺繼續完成。

   編輯中斷狀態：當用戶在編輯內容時，由于其他的即時消息或者事件必須中斷當前的操作，則已編輯的內容該如何處理呢？在手機文本輸入上還沒有很好的體驗，那保存用戶已輸入成果，不丟失用戶輸入的數據就顯得尤為重要。

   在Line 等即時通信工具的對話輸入界面切換到其他界面，再返回后，信息都一直保存，而不丟失。在編輯內容的界面中，要考慮在各種中斷事件后，保存已編輯的內容，減少用戶的重復操作。
銜接用戶的記憶而不是讓用戶重頭開始

   當用戶在閱讀時被打斷，該如何處理返回的狀態呢？在閱讀狀態下，基于內容可以分為不同的情況：

書籍類的閱讀——用戶再次進入界面后，銜接上一次正在閱讀的頁面，而不是書本的首頁。

新聞類的閱讀——需要根據間隔時間來判斷，超過一天時間沒有閱讀，再次進入后，可以讓用戶選擇是否繼續閱讀或者返回首頁最新內容。若時間間隔很短，則直接返回之前的頁面內容繼續閱讀。

   對于閱讀類的應用，要判斷用戶是否要持續閱讀，使內容能更好地銜接起來。
無縫切換不同設備的內容

   當用戶使用PC 瀏覽了某個產品的內容，之后打開對應的手機應用，如何讓用戶感覺到在不同設備中訪問同一個內容能無縫銜接？

   Chrome 的手機瀏覽器可以查看PC 瀏覽器中打開的網頁，讓手機瀏覽器能快速地瀏覽PC 中已看的內容。那對于同類產品來說也很有必要。很多時候用戶都是匆匆地切換設備，但還想繼續之前的操作，如何能在多個不同設備之間無縫切換，會對體驗的提升產生很重要的作用。用戶可以主動發起內容切換到其他的設備上，也可以在用戶打開應用時，又可以提示用戶“是否要繼續其他設備上未完的操作？”未來多設備的用戶會越來越多，如何能在這方面提升用戶的切換體驗也是值得設計師們考慮的。

八、智能有愛

   在E-mail 的設計中，郵件內容中有“附件”文字時，如果沒有貼附件，則會提醒用戶“是否忘記附件了？”這是一個被大家廣為稱贊的貼心設計。在移動應用的設計中，更需要這樣的設計來提升應用的競爭力。評價一個移動應用體驗的好壞，除了要看它是否滿足用戶需求和是否具有友好的可用性之外，能讓用戶感受到驚喜是在移動應用設計中最為推崇的。這樣的設計往往是超越了用戶的期望，它的表現是功能、交互或者操作流雖不是用戶預期的，但是用戶能很好地理解，并更高效、更有趣地完成任務。移動應用的設計應是驚喜有趣、智能高效和貼心的。讓人驚喜的有趣的設計主要是通過設計手法來實現的。設計師是一個生活的觀察家，對生活中有趣和美的事物有非常好的積累，當需要在產品設計中表現時，會時常把這類好的想法遷移過來。

……

   智能高效的設計主要是通過設計師們對移動設備的特點和產品使用情境做深刻分析后才會產生的結果。

Line 通過手機掃碼登錄PC 客戶端

   Line 在手機與PC 切換時，設計了一個二維碼掃描登錄功能。設計師們要去發現用戶的使用情境與行為表現，例如用戶在電腦邊上時，更希望能通過電腦來使用Line，以提升操作效率。

   同時設計師們也要去分析移動設備的特點，發揮移動的特點來解決這個切換的問題。貼心的設計往往會幫用戶提前想到一些事情，并滿足用戶還未意識到的需求，在用戶在犯錯誤的時候能自動彌補、糾正用戶的操作，并給出溫馨的提醒。例如，Sync.ME（原名Smartsync）是一個很有趣的社交信息同步應用。當朋友給你打電話時，該應用會將其最新的Facebook 狀態或照片顯示在手機屏幕上，讓你提前知道朋友最近的狀態。然后你如果看到朋友最新滑雪的照片，那么你接電話就可以說：“怎么樣，滑雪玩的爽不爽？”

Sync.ME 在來電時提示來電者的狀態更新

   總之，設計在很多時候都是靠靈感的閃現，移動應用的設計則更加的靈活多變，如何能更好地設計出一個應用，沒有具體的方法和成規。但是，為了能更好地避免設計師們走彎路，設計原則的學習是有必要的，它給了設計師們一定的參考和指導。各個移動平臺提供的設計是各大公司累積的移動設計的重要經驗的集合，可以給我們很多的參考和啟發，在學習了這些平臺的設計原則后，我們總結下上述八條移動應用設計原則，希望可以為移動應用的設計提供幫助。

原則一——內容優先：界面布局應以內容為核心，提供符合用戶期望的內容。

原則二——為觸摸而設計：界面的交互系統以自然手勢為基礎建構，符合人體工學并保持一致性。

原則三——轉換輸入方式：使用各種手機的設備特性和設計手段，減少在應用內的文字輸入。

原則四——流暢性：保持應用交互的手指及手勢的操作流、用戶的注意流和界面反饋轉場的流暢性。

原則五——多通道設計：發揮設備的多通道特性、協同的多通道界面和交互，讓用戶更有真實感和沉浸感

原則六——易學性：保持界面架構簡單、明了，導航設計清晰易理解，操作簡單可見，通過界面元素的表意的和界面提供的線索就能讓用戶清楚地知道其操作方式。

原則七——為中斷而設計：考慮應用的使用情境，確保在各個產出中斷的情境下，讓用戶恢復之前的操作，保持用戶的勞動付出。

原則八——智能有愛：給用戶提供讓他感到驚喜有趣的、智能高效的、貼心的設計。

作者簡介

傅小貞，浙大心理系畢業，03年起在UT斯達康，中國移動研究院，淘寶網等多家公司從事移動交互設計和用戶研究工作，曾組建過淘寶移動設計團隊，領導淘寶移動主站和主客戶端的設計；現負責斯凱UXC部門，推動冒泡系列產品設計。

胡甲超，交互設計師，來自阿里UX團隊。06年加入阿里巴巴，從事過網站、桌面軟件、無線客戶端的交互設計，參與了阿里軟件、淘寶Android客戶端、阿里旺旺等產品的設計。在移動領域擁有多平臺的設計經驗，關注跨界設計和移動體驗創新。

鄭元攏，無線領域設計專家，一線實戰經驗豐富。目前任職于淘寶，從事無線方面的創意產品設計，負責過淘寶系列產品移動端的交互設計。


本文節選自《移動設計》一書

傅小貞胡甲超鄭元攏著
電子工業出版社出版