張雅秋:移動網頁設計的資訊組織

發表於2012-07-06

來源:張雅秋

如何開始移動設計

對於我們中很多人來說,移動端設計是一個嶄新的機會。但是,如果你過去是桌面端的網頁設計師,如何將經驗轉換到移動網頁端呢?當然,已有的一些工具,經驗,技能仍然適用,只需開始思考下如何在手機上進行組織和佈局。

組織架構

當你開始組織移動端介面的內容和操作時,一些可靠的資訊架構準則:比如,清晰的標籤(labeling),平衡的寬度和深度,妥當合理的心智模型,這些仍舊十分重要。但是,組織移動端網頁設計體驗你需要考慮以下因素:

配合使用方式:人們如何適用移動裝置,為什麼這樣用?

強調內容超過導航

保持清晰和專注

配合移動裝置適用方式

我們很容易理解移動裝置上獨特的限制和效能。簡單來說,桌面網頁同樣有很多獨特的限制。所以直接將桌面產品移植到手機端並無意義。而是要考慮移動端獨有的特性,並且滿足到使用者需求。

通過研究一些專業分析的共通點,我們會得到一些啟發。面對通常人們是如何使用他們的移動裝置的,為什麼?這個問題時,Josh Clark在他的《觸動人心》(注:《觸動人心-設計優秀的iphone應用》一書中講到過三個關鍵使用者行為:

“我有個微任務要做”;

“我想看看附近的情況”;

“我有些無聊”。

這正好與google的調研不謀而合,他將移動使用者細分為三種行為群體:當前是急迫的,反覆的,或者無聊的

不管如何描述,移動端的使用方式通常包括以下互動情形:

查詢/發現(急需資訊,基於地點位置):我現在需要得到答案——多數是告訴我在哪裡。

探索/娛樂(無聊,基於地點位置):我現在想消磨時間,來點娛樂打發無聊。

簽到檢查(check-in)/狀態(重複/微任務處理):一些重要的事需要不斷改變或更新,我想留在上面。

編輯/建立(緊急調整,微任務處理):我需要馬上做完一些事,不能等。

以上因素決定人們為何掏出手機,所以這些行為決定了手機體驗應該如何被構造和組織來滿足人們的需求。

例如:照片分享Flickr的移動網頁體驗就有四個主要操作。你通訊錄裡好友的最新活動和最新上傳讓人們不斷想檢查是否有好友的照片更新;提供當日附近人們上傳的一些有趣的內容和照片,為想瀏覽優質照片的人們打發無聊時間的方式。

張雅秋:移動網頁設計的資訊組織

flickr的移動網頁體驗符合人們為什麼而掏出手機(雖然略顯生硬)。

配合移動環境使用環境自然也需要適應你網站真實世界的需要。因為移動體驗可能被用在任何地點場景,你需要考慮如何讓人們無論在哪裡都覺得好用。

這就意味著需要考慮使用者真正需要你網站組織提供的真實用例(use cases)。之前我曾經寫過一篇《利用人物角色來做資訊架構》其實就是通過分析使用者完成某任務的流程來進行網頁上的資訊架構。這一點其實在手機端更加重要。
通過了解以上使用者會掏出手機的動機,結合自身app提供的功能,儘量減少使用者在移動端的操作路徑。

內容優於導航

一條常規理論,在移動端內容優先於導航。無論人們是否經常檢視更新資訊,諸如:股票,新聞或是比分;他們檢視當地新聞或是通過搜尋查詢文章或是使用聊天工具,他們都想快速響應需求而不是看到你的網站架構脈絡。

太多的移動網頁體驗(像是之前的Flickr )開始時的對話都是一大堆的導航列表,而不是內容資訊。移動端使用者時間很寶貴,下載也需要流量的金錢消耗,所以讓他們馬上獲得想要的資訊才是關鍵。

張雅秋:移動網頁設計的資訊組織

Youtube ESPN的移動網頁就是這樣做的。先是一個簡單的抬頭告訴你身處哪裡,將導航選項降級為一個單獨的按鈕。其餘的位置放置可隨時檢視的最新資訊(ESPN)和最熱的供消遣的視訊。

ESPN Youtube移動網頁體驗將重點放在內容資訊上,而不是導航上。

定位和探索

但是,請稍等一下,如果內容總是優於導航。我如何才能在移動網頁端找到我的路徑?難道我們不需要一種導航或路徑去發現哪裡可以進入?

當然需要了,但是允許人們探索和定位相關的內容並不意味著羅列一堆影響內容瀏覽的導航條。

例如,舊版的facebook裡將我經常瀏覽的相關資訊放在頂部和中間的重要位置,但是由於頂部導航佔據三行的空間,每頁我一屏只能看到一條動態。

張雅秋:移動網頁設計的資訊組織

之後,facebook調整了移動網頁體驗,重新設計了導航,減少了導航項的數量。如果你不去管頭條新聞和新聞摘要,他們將導航數量減半(從10減少到5)。It’s a good start.

張雅秋:移動網頁設計的資訊組織

關於導航選單,youtube提供了一個全屏的快捷入口。這種方式的缺點:一是你需要主動尋找;二是你不得不打斷當前任務,跳轉到一個單獨的頁面;三是你要知道網格圖示的意思是“導航選單”。

張雅秋:移動網頁設計的資訊組織

ESPN移動網頁設計聰明很多。他也在頂部有一個“選單”按鈕,點選後直接在下方直接展示多層級的導航列表。這種方式讓你思考下一步去哪裡時,可以停留在當前頁面,不需要離開去載入一個新的頁面。

張雅秋:移動網頁設計的資訊組織

別忽視另類導航——控制螢幕底部容易些

不容忽視的是人們在使用手機時,容易的單手操作會讓他們舒服很多。對於單手來說,螢幕底部操作也就顯得容易些。詳細討論可以參見《hover已死有事燒香》

當人們撥弄到螢幕底部,想選擇或決定去哪裡的時候,很多移動網頁沒有給與你機會。

youtube設計在每頁的底部缺少導航引導,當你劃撥到底部就沒地方可去了。

張雅秋:移動網頁設計的資訊組織

親,您這是讓我退出(Sign out)還是逼我寫反饋意見(Feedback)啊?

底部選單對引導使用者深入訪問更有意義,但不好直接複製一個其他地方也有的選單按鈕。可以將頂部的選單按鈕從底部展開(放在內容資訊之後)。Bagcheck移動網頁端就是這麼幹的:

張雅秋:移動網頁設計的資訊組織

Bagcheck頂部的錨點連結從頁面底部展開網站導航

 關於返回鍵

許多iphone的原生應用在導航上都有個永久的返回按鈕。由於蘋果的移動裝置沒有硬體上的返回按鍵,所以很多app都在頂部標題欄設定了返回按鈕。

張雅秋:移動網頁設計的資訊組織

不過在移動網際網路的體驗上,沒必要處處都設定返回按鈕。因為很多裝置上,諸如,andoid、黑莓、windows phone7都有硬體上的返回物理按鍵。

張雅秋:移動網頁設計的資訊組織

andoidphone 一般都有物理返回按鍵

即便是蘋果iphone上的瀏覽器,底部的工具欄上包含一個永久的返回按鈕。

張雅秋:移動網頁設計的資訊組織

iphone瀏覽器底部工具欄包含一個返回按鈕。某網頁左上角的返回實屬多餘。

在移動網頁體驗上新增一個返回按鈕容易引起混淆。人們在使用網頁時候會問:“這兩個返回按鍵的作用是一樣的嗎?”。因此在移動網頁設計時,不應該在有限的空間內佔據一個多餘的“返回”按鈕。

總之,當你打算組織移動網頁體驗時,考慮哪些使用者行為符合移動生活的需要。

移動用例(usecase)。像是尋找、探索/遊戲,簽到/檢視狀態,編輯/建立,思考這些行為,然後調整網站移動端使用時候的架構。

首先關注內容,其次才是導航。人們更關心資訊和他們想快速處理的任務。

相關的的導航出現在合適的位置,會讓人們沉浸,或是訪問度更深。

減少關鍵任務的選擇。導航需要清晰並且關注在人們真正需要的事情上,多考慮人們在緊急狀態和非理想狀態下儘快提供幫助。

考慮人們在休閒時候使用手機,並且請考慮橫屏設計,讓人們更加欣賞你簡單的設計。

 

相關文章