行動設計第一步：資訊架構

 行動設計第一步：資訊架構

記這這句話~設計友好的行動和桌面資訊架構正是創造絕佳行動體驗的第一步，就讓我們跟著作者一起讀下去吧!

圖片來源：hperticarati

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

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

行動裝置存在於我們的生活中，隨之而來也為行動版設計帶來了一系列新的限制和機遇，來看看我們是不是應該更新一下自己的設計方法吧。

行動有何不同？

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

屬性與規格

絕大多數行動裝置配有觸控螢幕，使用者主要藉由手勢及一些簡單的界面元素進行操作。由於受限於螢幕尺寸，有時我們希望螢幕中的顯示內容結構更簡單精緻。同樣由於受限於頻寬和連線速度，行動版上的設計需要改善載入時間，減少資料傳輸量。

為何，何地與何時

由於需要不間斷查看手機訊息，我們往往會更頻繁地使用手機。乘坐公交車時、街上漫步時或看電視時，它們都無處不在。甚至，我們通常「做」一些其他事情時也在使用。這意味著我們可能在一些複雜的視覺環境中或是一系列干擾條件下使用手機。

我們如何行動和感知

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

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

「行動」概念如何影響設計師

行動裝置差異化直接影響了以使用者為中心的整個設計過程：從使用者研究到最終的開發和實現方案的測試。而實現方法和資訊架構是整個設計流程中受影響最大的。

行動設計實現方式

不同於傳統網站，行動設計有四種主流方式。瀏覽器中顯示的網站可區分成行動版網站（特地為行動裝置而設計的網站）或 responsive design 網站（根據裝置顯示範圍大小重新排列、布局的設計）的內容。人們安裝的 app 不是原生 app 就是混合型 app。混合型 app 提供更加靈活的方式，從網頁上讀取內容，（即透過瀏覽器閱讀），同時提供了類似原生 app 的界面。

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

行動資訊架構

行動裝置同樣也有自己的資訊架構樣式庫。盡管responsive design網站的結構可能更多遵從「標準化」樣式，而諸如原生 app 則透過採用標籤試的導航結構。建構行動網站或 app 並沒有所謂「正確」的方法。接下來我們會看到一些最流行的樣式：階層式、輻射式、「俄羅斯娃娃式」、Tabbed view、便當盒/儀表板和篩選器樣式等。

階層式（Hierarchy）

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

Luke Wroblewski 在 〈 行動優先（Mobile First） 〉中告訴我們要先關注重要的內容：可以幫助我們創造更好的使用者體驗的產品特性和使用者使用過程。

適用範圍：整理需要跟桌面版保持一致結構的複雜網站。
注意事項：多方位的導航結構用在小尺寸螢幕上可能會給使用添麻煩。

輻射式（Hub-spoke）

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

適用範圍：多功能工具，其中每個都有不同的內部導航和目標。
注意事項：這種樣式不利於使用者進行多工操作。

俄羅斯娃娃（Nested doll）：

這種樣式採用漸進式導航以引導使用者查看更詳細的內容。當使用者操作不方便時，這是一種快速簡單的導航方法。點擊「前進」或「後退」，使用者可以強烈感知自己所處何處。

適用範圍：app 或網站的主題奇特或者主題之間密切相關。它們也是和在其他樣式底下使用，諸如標準的階層式或輻射樣式等等。
注意事項：使用者無法在不同內容中快速切換，因此需要考慮這種樣式是否方便查詢，而不能讓它成為搜尋內容的絆腳石。

Tabbed view

這是 app 使用者熟悉的樣式（編按：iPhone 內建的音樂、照片、App Store 都是採用這種形式）。這種形式透過工具欄目錄集合為一系列的內容。這樣使用者便可以在第一次打開 app 時快速看過、了解 app 的全部功能。

適用範圍：基於一個相似主題的工具項和多工情況。
注意事項：這種樣式不太適合有複雜結構的 app，較為適用於非常簡單的內容結構。

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

便當盒/儀表盤樣式透過元件展示相關工具或內容的部分訊息，再把更詳盡的內容連結到索引介面。由於這種樣式很複雜，它在桌面版顯示會比在行動版更為適合。這種顯示醒目有力，使用者只需要掃一眼就可以理解關鍵訊息，但它非常依賴訊息清晰的設計呈現。

適用範圍：主題相似的多功能工具和以內容為主的平板電腦 app。
注意事項：儘管平板電腦的螢幕提供更多空間承載這種樣式，但更為重要的是我們要理解使用者如何與每個部分的內容互動，以及我們要確保 app 簡單、有效、使用愉快。

Filtered view

最後，Filtered view 讓使用者用篩選的方式來切換不同內容，從而在一系列的數據中導航。篩選同分面搜索方法一樣，是一種很棒的適合使用者查詢內容的方法。

適用範圍：內容數量龐大的應用或網站，諸如文章，圖像和視頻。它可能為雜志樣式的應用或網站提供了好的基礎，或者是它可以作為另一個導航樣式內的子樣式。
注意事項：行動裝置上，由於篩選和分面搜索很複雜，所以很難在較小的螢幕上展示。

下一步

自從我第一次看到大型的磚頭式行動電話起，已經過了將近二十年，（而我買第一支行動電話也過有大約十二年了）。如今我、我父親和我認識的人幾乎都有一支智慧型手機，我們習慣頻繁地使用它們溝通、交流並管理我們的生活。每年科技都會進步，因此我們要清楚地知道自身需求並與時俱進。設計友好的行動和桌面資訊架構正是創造絕佳行動體驗的第一步。

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

資料來源:http://www.inside.com.tw/2012/12/28/design-for-mobile-part-1-information-architecture