小編導讀：本文從設計人員的角度出發，提出了移動端設計與傳統桌面端設計的不同之處，同時歸納總結并比較了多種主流的設計模式和信息架構，旨在幫助設計、產品、開發相關人員更好的思考移動端設計。分享給大家，希望有所幫助和啟發。

　　大約在1993年，我父親帶回家一部體型碩大、形似磚頭的移動電話。當時，我們全家人都對這個稀物表示難以置信的興奮，但是沒有人會認為它會對我們的生活產生巨大影響。幾年后，當我的一些朋友決定購買它時，我仍然會把它看作是一種花樣和噱頭。

　　如今全世界共有60億移動訂閱用戶，意味著如果人手一部移動電話，那么世界上87%的人便擁有移動電話。然而，將近有30億人使用臺式電腦，這和移動電話使用情況差別很大。

　　移動設備存在于我們的生活中，隨之而來也為移動端設計帶來了一系列新的限制和機遇。讓我們來看看設計方法會如何得以更新。

　　移動有何不同?

　　關于移動設計，我們最先需要了解的是它的不同之處，這并不僅僅指尺寸的不同。移動設備的屬性與規格也帶來了不同的設計啟示和要求。由于移動設備更輕更便攜，我們通常覺得它們更便于使用。通過頻繁使用移動設備，我們與它們之間建立了獨特而富有情感的聯系。

　　物理屬性和特征

　　大部分移動設備都是觸摸屏，用戶依賴于手勢——加上簡單的界面元素進行交互操作。由于它們尺寸更小，我們有時希望它上面的內容結構更小更簡潔。同時，由于有限的帶寬和連接速率，移動設備需要設計上充分利用加載時間，從而減少數據請求。

　　何時，何地，做什么

　　由于我們不斷地接觸移動設備，我們傾向于更頻繁地使用它們，無論是在公交車上，大街上，或者看電視時。我們經常一邊做事情一邊使用它們，這意味著我們可能在困難的閱讀環境下，或是各種干擾下使用移動設備。

　　我們的行為和感覺如何

　　最終，我們在使用移動設備時產生了不同的態度，行為和優先順序。“用戶體驗設計咨詢公司Foolproof”在“Going Mobile 2012”的研究中發現，這些設備給予我們一種對于“自由”和“控制”的新感覺。換句話說，一些用戶對他們的移動設備產生了非常真實的感情。Foolproof發現，63%的人在沒有移動設備時感到失落。他們把移動設備看成是“活的”……是他們身體和人格的一種延伸。

　　由于移動設備已經從根本上改變了人們的預期，對于我們設計師而言，采用“以用戶為中心”的設計思路來提供解決方案則顯得尤為重要。唯一的問題就是我們的傳統最佳實踐可能不管用了。

　　移動(環境)如何影響著設計師們

　　移動的不同直接影響著“以用戶為中心”設計流程的方方面面：從用戶研究到最終的開發測試。影響最大的是我們的分發方式和信息架構。

　　移動分發方式

　　不像傳統網站，移動端有四大著名的分發方法。移動用戶可以選擇在他們的瀏覽器上查看內容，這些內容要么是針對移動端設計的網站，要么是響應式的——意味著它會針對移動端重新布局。還有一部分用戶選擇安裝App，這些App要么是原生的，要么是混合的(原生+WebView)。原生應用有自我局限性：需要預先定制適配各種屏幕的應用。混合型應用則更靈活，它們從互聯網上讀取內容(就像在瀏覽器中看內容那樣)，但提供給用戶“像App那樣的“界面。

　　每一種分發方式都有優缺點。可以根據你項目的設計背景進行合適的選擇。(下面的表格，星星越多越好)

　　移動信息架構

　　移動設備也有它自己的信息架構模式。例如，響應式網站架構會遵循更多的“標準”模式，而原生app，經常使用基于“Tab頁簽”的導航結構。同時，在架構一個移動網站或應用時，沒有“正確”的方法。相對的，讓我們看看一些著名的設計模式：層級結構(Hierarchy)、集中和分發(Hub&spoke)、重疊放置(Nested doll)、頁簽視圖(Tabbed view)、便當盒(Bento box)和過濾視圖(Filtered view)：

　　層級結構(Hierarchy)

　　層級模式是一種標準的網站架構，有一個主頁和一系列子頁面。如果你正在設計一個響應式網站，你可能會受限于這個模式。但是，引入額外的模式會使你根據移動端的經驗進行裁剪。

　　Luke Wroblewski的“移動優先”策略幫助我們優先關注首要對象：功能和用戶操作路徑將會幫助我們打造良好的用戶體驗。

　　適合：對于需要依據桌面網站架構進行設計而言，能夠很好的組織復雜的網站結構。

　　當心：導航。當用戶使用小屏幕時，多層導航架構會引起問題。

　　集中和分發(Hub&spoke)

　　集中和分發模式會在導航時給予你一個中心索引。這是蘋果iPhone的默認導航模式。用戶不能在不同子欄目中進行跳轉，必須回到索引頁面。這種模式在工作流程受限的桌面軟件上使用很久了(主要由于技術限制，像表單或者購買流程)，但是，由于用戶在移動場景上會關注于一個任務(除了設備的組成元件之外)，這種設計正變得更加普及，而全局導航在這種情況下會很難用。

　　適合：多功能工具，每個功能有一個獨立的內部導航和目標。

　　當心：用戶想要多任務時。

　　重疊放置(Nested doll)

　　重疊放置模式讓用戶以線性方式查看詳細內容。當用戶迷路時，這種設計能快速和方便地為用戶導航。它也給用戶一種強烈的感覺，通過向前和向后的操作，告訴他們處于整個內容結構中的位置。

　　適合：有著單一的，或者相關話題的App或者網站。也能用于其他父級模式中的的子模式，如標準層次機構模式或集中&分發模式。

　　不適合：無法快速在不同模塊中切換的用戶，此類用戶希望這樣做來判斷是否某一模塊適合他們，而不是把模塊作為瀏覽內容的障礙存在。

　　頁簽視圖(Tabbed view)

　　這種模式對于常規app的用戶而言十分熟悉。它通過一個工具條菜單將一組區塊組合在一起，從而允許用戶在首次使用時快速瀏覽和了解app的全部功能。

　　適合：基于工具的app，多任務，且主題相似。

　　當心：復雜的。這種模式適合簡單內容結構的應用。

　　便當盒(Bento box)

　　便當盒，或儀表盤模式，通過使用組件展示相關工具或內容的一部分，直接在首屏就能夠帶來更詳細的內容呈現。由于它的復雜性，相比手機端，這種模式更適合于平板。由于允許用戶對關鍵信息一目了然，這種模式顯得很強大。但是，其也嚴重依賴于設計良好，信息呈現清晰的界面。

　　適合：多功能工具，以及基于內容，具有相似主題的平板app。

　　當心：平板屏幕給予你更多的空間利用這個模式，但是，了解用戶如何在不同頁面之間進行交互使用，來確認app的易用性、有效性和娛樂性，是件非常重要的事。

　　過濾視圖(Filtered view)

　　過濾視圖最終允許用戶通過選擇過濾條件創造不同視圖，來在一系列數據之間進行導航。過濾，和使用“面搜索”一樣，從允許用戶瀏覽適合自己的內容而言，是一種很好的方法。

　　適合：擁有大量內容的App或者網站，例如文章、圖片和視頻。對于雜志類型的app或網站，或者作為其他導航模式的子模式而言，是個好選擇。

　　當心：移動。由于其復雜性，過濾器和面搜索在小屏幕上的展示會很困難。

　　下一步

　　這是近二十年以來我第一次看到大磚形手機，(且大概12年前我買了我的第一臺手機)?，F在，我、我父親和幾乎我認識的每一個人都有智能機，我們通過智能機有規律地、頻繁地互動、通信和管理我們的生活。每年技術會有個飛躍，很明顯我們需要和它一起改變。

　　設計出一個對移動端友好的信息架構僅是創建優秀移動應用的第一步。在第2部分——設計注意事項中，我將解釋移動環境的不同將如何影響你設計的最終方案。

　　本文作者：@ Elaine 翻譯@ 馬迪