惡補交互基礎知識的好機會!這個國外系列的交互教程非常實用,適合包括設計師、開發、產品等學習,今天的第一部分歸納總結並比較了多種主流的設計模式和信息架構,全文圖示豐富,直觀易懂,譯者還很用心地將圖片轉成中文版,看起來不費力,強烈推薦呦!
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 )
最後,篩選視圖樣式允許用戶通過選擇篩選項來切換不同視圖從而在一系列的數據中進行導航。篩選同分面搜索方法一樣,是一種很棒的適合用戶查詢內容的方法。
適用項:內容數量龐大的應用或網站,諸如文章,圖像和視頻。它可能為雜志樣式的應用或網站提供了好的基礎,或者是它可以作為另一個導航樣式內的子樣式。
注意項: 移動設備上,由於篩選和分面搜索很復雜,所以很難在較小的屏幕上展示。
下一步
自從我第一次看到大型的磚頭式移動電話起,已經過去了將近二十年,(而我買第一步移動電話也有大約十二年了)。如今我、我父親和我認識的人幾乎都有一部智能電話,我們習慣於頻繁地使用它們溝通、交流並且管理我們的生活。每一年科技都有一次飛躍,因此我們要清楚地認識到我們需要與時俱進。設計友好的移動和桌面信息架構正是創建偉大的移動體驗的第一步。在第二部分中,我將解釋移動內容的差異性如何影響最終方案的設計。
<