為移動而設計,第一部分:資訊架構

發表於2012-12-18

英文原文: Designing for mobile (part 1): Information Architecture,編譯:騰訊CDC – lost

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

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

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

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

移動有何不同?

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

為移動而設計,第一部分:資訊架構

屬性與規格

絕大多數移動裝置配有觸控式螢幕,使用者主要通過手勢以及一些簡單的介面元素進行操作。由於受限於螢幕尺寸,有時我們希望螢幕中的顯示內容結構更簡單精緻。同樣由於受限於頻寬和連線速度,移動端上的設計需要優化載入時間,減少資料請求。

為何,何地與何時

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

我們如何行動和感知

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

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

移動如何影響設計師

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

移動設計實現方式

不同於傳統網站,移動設計的實現存在四種主流方式。移動使用者最希望在瀏覽器上瀏覽,移動式網站(為移動裝置而特地優化的網站)或者響應式網站(根據裝置重新排列布局的網站)的內容。而那些在裝置上安裝了應用程式的人會選擇原生應用混合模式應用。原生應用是獨立存在的:每一個應用的介面都被定義在平臺層上方。混合模式應用提供了更為靈活的方式,從網路中獲取內容,(即通過瀏覽器進行閱讀),但也提供了類似於原生應用的介面。

每一種實現方式都有正反兩面。選擇哪種樣式取決於專案的設計背景。(下面的表單中,星星越多,效果越好)
為移動而設計,第一部分:資訊架構

移動資訊架構
移動裝置同樣也有自己的資訊架構樣式庫。儘管響應式網站的結構可能更多遵從“標準化”樣式,而諸如原生應用則通常採用基於標籤的導航結構。但並不存在構造移動網站或應用的“正確”方法。接下來我們會帶來一些最流行的樣式:層級式、輻射式、套娃式、標籤檢視、便當盒和篩選檢視。

層級式(Hierarchy):

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

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

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

注意項:多面的導航結構應用於小螢幕上可能會給使用者引起的麻煩。

為移動而設計,第一部分:資訊架構

輻射式(Hub-spoke):

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

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

注意項:這種樣式不適於使用者進行多工操作。

為移動而設計,第一部分:資訊架構

套娃式(Nested doll):

套娃樣式採用漸進式導航引導使用者檢視到更詳細的內容至。當使用者操作不方便時,這是一種快速簡單的導航方法。通過點選“前進”或“後退”,使用者可以強烈感知自己所處何處。

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

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

為移動而設計,第一部分:資訊架構

標籤檢視(Tabbed view):

這是一種普通應用使用者熟悉的樣式。這種形式通過工具欄選單集合為一系列的內容。這樣使用者可以在第一次開啟應用時,便能快速掃過並瞭解應用的全部功能。

適用項:基於一個相似主題的工具項和多工情況。

注意項:這種樣式不太適合複雜類結構,較為適用於非常簡單的內容結構。

為移動而設計,第一部分:資訊架構

便當盒/儀表盤(Bento box/Dashboard)

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

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

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

為移動而設計,第一部分:資訊架構

篩選檢視(Filtered view)

最後,篩選檢視樣式允許使用者通過選擇篩選項來切換不同檢視從而在一系列的資料中進行導航。篩選同分面搜尋方法一樣,是一種很棒的適合使用者查詢內容的方法。

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

注意項: 移動裝置上,由於篩選和分面搜尋很複雜,所以很難在較小的螢幕上展示。

為移動而設計,第一部分:資訊架構

下一步

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

相關文章