如何開始移動設(shè)計

對于我們中很多人來說，移動端設(shè)計是一個嶄新的機會。但是，如果你過去是桌面端的網(wǎng)頁設(shè)計師，如何將經(jīng)驗轉(zhuǎn)換到移動網(wǎng)頁端呢？當然，已有的一些工具，經(jīng)驗，技能仍然適用，只需開始思考下如何在手機上進行組織和布局。

組織架構(gòu)

當你開始組織移動端界面的內(nèi)容和操作時，一些可靠的信息架構(gòu)準則：比如，清晰的標簽（labeling），平衡的寬度和深度，妥當合理的心智模型，這些仍舊十分重要。但是，組織移動端網(wǎng)頁設(shè)計體驗?zāi)阈枰紤]以下因素：

• 配合使用方式：人們?nèi)绾芜m用移動設(shè)備，為什么這樣用？
• 強調(diào)內(nèi)容超過導(dǎo)航
• 保持清晰和專注

配合移動設(shè)備適用方式

我們很容易理解移動設(shè)備上獨特的限制和性能。簡單來說，桌面網(wǎng)頁同樣有很多獨特的限制。所以直接將桌面產(chǎn)品移植到手機端并無意義。而是要考慮移動端獨有的特性，并且滿足到用戶需求。

通過研究一些專業(yè)分析的共通點，我們會得到一些啟發(fā)。面對通常人們是如何使用他們的移動設(shè)備的，為什么？這個問題時，Josh Clark在他的《觸動人心》（注：《觸動人心－設(shè)計優(yōu)秀的iphone應(yīng)用》一書中講到過三個關(guān)鍵用戶行為：

“我有個微任務(wù)要做”；

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

“我有些無聊”。

這正好與google的調(diào)研不謀而合，他將移動用戶細分為三種行為群體：當前是急迫的，反復(fù)的，或者無聊的。

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

• 查找/發(fā)現(xiàn)（急需信息，基于地點位置）：我現(xiàn)在需要得到答案——多數(shù)是告訴我在哪里。
• 探索/娛樂（無聊，基于地點位置）：我現(xiàn)在想消磨時間，來點娛樂打發(fā)無聊。
• 簽到檢查（check－in）/狀態(tài)（重復(fù)/微任務(wù)處理）：一些重要的事需要不斷改變或更新，我想留在上面。
• 編輯/創(chuàng)建（緊急調(diào)整，微任務(wù)處理）：我需要馬上做完一些事，不能等。

以上因素決定人們?yōu)楹翁统鍪謾C，所以這些行為決定了手機體驗應(yīng)該如何被構(gòu)造和組織來滿足人們的需求。

例如：照片分享Flickr的移動網(wǎng)頁體驗就有四個主要操作。你通訊錄里好友的最新活動和最新上傳讓人們不斷想檢查是否有好友的照片更新；提供當日附近人們上傳的一些有趣的內(nèi)容和照片，為想瀏覽優(yōu)質(zhì)照片的人們打發(fā)無聊時間的方式。

flickr的移動網(wǎng)頁體驗符合人們?yōu)槭裁炊统鍪謾C（雖然略顯生硬）。

配合移動環(huán)境使用環(huán)境自然也需要適應(yīng)你網(wǎng)站真實世界的需要。因為移動體驗可能被用在任何地點場景，你需要考慮如何讓人們無論在哪里都覺得好用。

這就意味著需要考慮用戶真正需要你網(wǎng)站組織提供的真實用例（use cases）。之前我曾經(jīng)寫過一篇《利用人物角色來做信息架構(gòu)》其實就是通過分析用戶完成某任務(wù)的流程來進行網(wǎng)頁上的信息架構(gòu)。這一點其實在手機端更加重要。
通過了解以上用戶會掏出手機的動機，結(jié)合自身app提供的功能，盡量減少用戶在移動端的操作路徑。

內(nèi)容優(yōu)于導(dǎo)航

一條常規(guī)理論，在移動端內(nèi)容優(yōu)先于導(dǎo)航。無論人們是否經(jīng)常查看更新信息，諸如：股票，新聞或是比分；他們查看當?shù)匦侣劵蚴峭ㄟ^搜索查找文章或是使用聊天工具，他們都想快速響應(yīng)需求而不是看到你的網(wǎng)站架構(gòu)脈絡(luò)。

太多的移動網(wǎng)頁體驗（像是之前的Flickr ）開始時的對話都是一大堆的導(dǎo)航列表，而不是內(nèi)容信息。移動端用戶時間很寶貴，下載也需要流量的金錢消耗，所以讓他們馬上獲得想要的信息才是關(guān)鍵。

Youtube ESPN的移動網(wǎng)頁就是這樣做的。先是一個簡單的抬頭告訴你身處哪里，將導(dǎo)航選項降級為一個單獨的按鈕。其余的位置放置可隨時查看的最新信息（ESPN）和最熱的供消遣的視頻。

ESPN Youtube移動網(wǎng)頁體驗將重點放在內(nèi)容信息上，而不是導(dǎo)航上。

定位和探索

但是，請稍等一下，如果內(nèi)容總是優(yōu)于導(dǎo)航。我如何才能在移動網(wǎng)頁端找到我的路徑？難道我們不需要一種導(dǎo)航或路徑去發(fā)現(xiàn)哪里可以進入？

當然需要了，但是允許人們探索和定位相關(guān)的內(nèi)容并不意味著羅列一堆影響內(nèi)容瀏覽的導(dǎo)航條。

例如，舊版的facebook里將我經(jīng)常瀏覽的相關(guān)信息放在頂部和中間的重要位置，但是由于頂部導(dǎo)航占據(jù)三行的空間，每頁我一屏只能看到一條動態(tài)。

之后，facebook調(diào)整了移動網(wǎng)頁體驗，重新設(shè)計了導(dǎo)航，減少了導(dǎo)航項的數(shù)量。如果你不去管頭條新聞和新聞?wù)?，他們將?dǎo)航數(shù)量減半（從10減少到5）。It’s a good start.

關(guān)于導(dǎo)航菜單，youtube提供了一個全屏的快捷入口。這種方式的缺點：一是你需要主動尋找；二是你不得不打斷當前任務(wù)，跳轉(zhuǎn)到一個單獨的頁面；三是你要知道網(wǎng)格圖標的意思是“導(dǎo)航菜單”。

ESPN移動網(wǎng)頁設(shè)計聰明很多。他也在頂部有一個“菜單”按鈕，點擊后直接在下方直接展示多層級的導(dǎo)航列表。這種方式讓你思考下一步去哪里時，可以停留在當前頁面，不需要離開去加載一個新的頁面。

別忽視另類導(dǎo)航——控制屏幕底部容易些

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

當人們撥弄到屏幕底部，想選擇或決定去哪里的時候，很多移動網(wǎng)頁沒有給與你機會。

youtube設(shè)計在每頁的底部缺少導(dǎo)航引導(dǎo)，當你劃撥到底部就沒地方可去了。

親，您這是讓我退出（Sign out）還是逼我寫反饋意見（Feedback）??？

底部菜單對引導(dǎo)用戶深入訪問更有意義，但不好直接復(fù)制一個其他地方也有的菜單按鈕?？梢詫㈨敳康牟藛伟粹o從底部展開（放在內(nèi)容信息之后）。Bagcheck移動網(wǎng)頁端就是這么干的：

Bagcheck頂部的錨點鏈接從頁面底部展開網(wǎng)站導(dǎo)航

關(guān)于返回鍵

許多iphone的原生應(yīng)用在導(dǎo)航上都有個永久的返回按鈕。由于蘋果的移動設(shè)備沒有硬件上的返回按鍵，所以很多app都在頂部標題欄設(shè)置了返回按鈕。

不過在移動互聯(lián)網(wǎng)的體驗上，沒必要處處都設(shè)置返回按鈕。因為很多設(shè)備上，諸如，andoid、黑莓、windows phone7都有硬件上的返回物理按鍵。

andoidphone 一般都有物理返回按鍵

即便是蘋果iphone上的瀏覽器，底部的工具欄上包含一個永久的返回按鈕。
iphone瀏覽器底部工具欄包含一個返回按鈕。某網(wǎng)頁左上角的返回實屬多余。

在移動網(wǎng)頁體驗上添加一個返回按鈕容易引起混淆。人們在使用網(wǎng)頁時候會問：“這兩個返回按鍵的作用是一樣的嗎？”。因此在移動網(wǎng)頁設(shè)計時，不應(yīng)該在有限的空間內(nèi)占據(jù)一個多余的“返回”按鈕。

總之，當你打算組織移動網(wǎng)頁體驗時，考慮哪些用戶行為符合移動生活的需要。

• 移動用例（usecase）。像是尋找、探索/游戲，簽到/查看狀態(tài)，編輯/創(chuàng)建，思考這些行為，然后調(diào)整網(wǎng)站移動端使用時候的架構(gòu)。
• 首先關(guān)注內(nèi)容，其次才是導(dǎo)航。人們更關(guān)心信息和他們想快速處理的任務(wù)。
• 相關(guān)的的導(dǎo)航出現(xiàn)在合適的位置，會讓人們沉浸，或是訪問度更深。
• 減少關(guān)鍵任務(wù)的選擇。導(dǎo)航需要清晰并且關(guān)注在人們真正需要的事情上，多考慮人們在緊急狀態(tài)和非理想狀態(tài)下盡快提供幫助。
• 考慮人們在休閑時候使用手機，并且請考慮橫屏設(shè)計，讓人們更加欣賞你簡單的設(shè)計。

紀念翻譯未果的《mobile first》