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

　　英文原文:?http://www.uxbooth.com/articles/designing-for-mobile-part-1-information-architecture/

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

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

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

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

移動有何不同？

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

?

屬性與規格

　　絕大多數移動設備配有觸摸屏，用戶主要通過手勢以及一些簡單的界面元素進行操作。由于受限于屏幕尺寸，有時我們希望屏幕中的顯示內容結構更簡單精致。同樣由于受限于帶寬和連接速度，移動端上的設計需要優化加載時間，減少數據請求。

為何，何地與何時

　　由于需要不間斷查看手機信息，我們往往會更頻繁地使用手機。乘坐公交車時、街上漫步時或看電視時，它們都無處不在。甚至，我們通?！白觥币恍┢渌虑闀r也在使用。這意味著我們可能在一些復雜的視覺環境下或是一系列干擾條件下使用手機。

?

我們如何行動和感知

　　使用移動設備時，我們有不同的態度、行為和優先級。作為Going Mobile?2012研究的一部分，用戶體驗設計機構Foolproof?指出移動設備賦予我們一種新的自由感和控制感。還有一些用戶反而對他們的移動設備產生了非常真實的情感。Foolproof指出當智能電話不在身邊時，63%的人會感到失落不安。他們把這些設備描述為“有生命的”，是他們身體和人格的一種延伸。

　　移動設備從根本上改變了用戶的期望，因此對于設計師而言，非常重要的一點是遵從以用戶為中心的設計流程來進行設計。但存在的問題在于：以往那些最佳的傳統實踐方法并不總是可以參照。

移動如何影響設計師

　　移動設備的差異化直接作用于以用戶為中心的設計的整個過程：從用戶研究到最終的開發和實現方案的測試。而實現方法和信息架構是整個設計流程中受到最大影響的。

移動設計實現方式

　　不同于傳統網站，移動設計的實現存在四種主流方式。移動用戶最希望在瀏覽器上瀏覽，移動式網站(為移動設備而特地優化的網站)或者響應式網站(根據設備重新排列布局的網站)的內容。而那些在設備上安裝了應用程序的人會選擇原生應用或混合模式應用。原生應用是獨立存在的：每一個應用的界面都被定義在平臺層上方?；旌夏Ｊ綉锰峁┝烁鼮殪`活的方式，從網絡中獲取內容，（即通過瀏覽器進行閱讀），但也提供了類似于原生應用的界面。

　　每一種實現方式都有正反兩面。選擇哪種樣式取決于項目的設計背景。（下面的表單中，星星越多，效果越好）

移動信息架構

　　移動設備同樣也有自己的信息架構樣式庫。盡管響應式網站的結構可能更多遵從“標準化”樣式，而諸如原生應用則通常采用基于標簽的導航結構。但并不存在構造移動網站或應用的“正確”方法。接下來我們會帶來一些最流行的樣式：層級式、輻射式、套娃式、標簽視圖、便當盒和篩選視圖。

?

層級式（Hierarchy）：

　　層級樣式是帶有一個索引頁和一系列子頁面的標準網站結構。如果你在設計一個響應式網站，你可能會受限于此，然而它所帶來的額外樣式可以幫助你為適應移動設備而調整體驗。

　　Luke Wroblewski在博文《移動為先》（?Mobile First）中幫助我們首先關注于重要的內容：可以幫助我們創造更好的用戶體驗的產品特性和用戶使用過程。

　　適用項：整理需要跟桌面端網站保持一致結構的復雜站點。

????　注意項：多面的導航結構應用于小屏幕上可能會給用戶引起的麻煩。

輻射式（Hub-spoke）：

?　　輻射樣式向用戶提供了便于跳轉的中央式索引，這是iPhone的默認樣式。用戶無法在分頁面之間切換，而必須回到中央跳轉。一直以來，這種樣式主要用于工作流程受限的桌面端（通常是技術限制，諸如表單或者購買流程中受到的限制）。然后，這種樣式在移動設備上越來越流行，這是由于用戶使用移動設備時會專注于單一任務，以及由于設備本身的外型因素。這種樣式的流行使得全局性導航愈發難以使用。

?　　適用項：多功能工具，其中每個都有不同的內部導航和目標。

?　　注意項：這種樣式不適于用戶進行多任務操作。

套娃式（Nested doll）：

?　　套娃樣式采用漸進式導航引導用戶查看到更詳細的內容至。當用戶操作不方便時，這是一種快速簡單的導航方法。通過點擊“前進”或“后退”，用戶可以強烈感知自己所處何處。

?　　適用項：應用或網站的主題奇特或者主題之間密切相關。它們同樣適用于內置其他父樣式的子樣式，諸如標準的層級樣式式和輻射樣式。

?????????注意項：用戶無法在不同內容中快速切換，因此需要考慮這種樣式是否方便查找，而不能讓它成為查找內容的絆腳石。

標簽視圖（Tabbed view）：

? 　??這是一種普通應用用戶熟悉的樣式。這種形式通過工具欄菜單集合為一系列的內容。這樣用戶可以在第一次打開應用時，便能快速掃過并了解應用的全部功能。

　　適用項：基于一個相似主題的工具項和多任務情況。

　　注意項：這種樣式不太適合復雜類結構，較為適用于非常簡單的內容結構。

便當盒/儀表盤（Bento box/Dashboard）

?　　便當盒/儀表盤樣式通過使用組件展示相關工具或內容的部分信息，再把更詳盡的內容鏈接至到索引界面。由于這種樣式很復雜，它在桌面端顯示會比在移動端更為適合。這種顯示醒目有力，用戶只需要掃一眼就可以理解關鍵信息，但它嚴重依賴于信息清晰的設計呈現。。

　　適用項：主題相似的多功能工具和基于內容的平板電腦應用程序。

　　注意項：?盡管平板電腦的屏幕提供更多空間承載這種樣式，但更為重要的是我們要理解用戶如何與每塊內容互動，以及我們要確保應用簡單、有效、使用愉悅。

?

篩選視圖（Filtered view）

?　　最后，篩選視圖樣式允許用戶通過選擇篩選項來切換不同視圖從而在一系列的數據中進行導航。篩選同分面搜索方法一樣，是一種很棒的適合用戶查詢內容的方法。

　　適用項：內容數量龐大的應用或網站，諸如文章，圖像和視頻。它可能為雜志樣式的應用或網站提供了好的基礎，或者是它可以作為另一個導航樣式內的子樣式。

　　注意項:?移動設備上，由于篩選和分面搜索很復雜，所以很難在較小的屏幕上展示。

?下一步

　　自從我第一次看到大型的磚頭式移動電話起，已經過去了將近二十年，（而我買第一步移動電話也有大約十二年了）。如今我、我父親和我認識的人幾乎都有一部智能電話，我們習慣于頻繁地使用它們溝通、交流并且管理我們的生活。每一年科技都有一次飛躍，因此我們要清楚地認識到我們需要與時俱進。設計友好的移動和桌面信息架構正是創建偉大的移動體驗的第一步。在第二部分-設計考量?中，我將解釋移動內容的差異性如何影響最終方案的設計。

來源：騰訊CDC