移動設計八原則

    近幾年，互動設計專業也有了蓬勃發展，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客戶端、阿里旺旺等產品的設計。在移動領域擁有多平臺的設計經驗，關注跨界設計和移動體驗創新。

 

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


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

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