如何開(kāi)始手機網(wǎng)頁(yè)設計

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

組織架構

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

• 配合使用方式：人們如何適用移動(dòng)設備，為什么這樣用？
• 強調內容超過(guò)導航
• 保持清晰和專(zhuān)注

配合移動(dòng)設備適用方式

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

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

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

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

“我有些無(wú)聊”。

 

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

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

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

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

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

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

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

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

內容優(yōu)于導航

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

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

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

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

定位和探索

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

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

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

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

 

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

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

別忽視另類(lèi)導航——控制屏幕底部容易些

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

當人們撥弄到屏幕底部，想選擇或決定去哪里的時(shí)候，很多移動(dòng)網(wǎng)頁(yè)沒(méi)有給與你機會(huì )。

youtube設計在每頁(yè)的底部缺少導航引導，當你劃撥到底部就沒(méi)地方可去了。

親，您這是讓我退出（Sign out）還是逼我寫(xiě)反饋意見(jiàn)（Feedback）??？

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

Bagcheck頂部的錨點(diǎn)鏈接從頁(yè)面底部展開(kāi)網(wǎng)站導航

 

關(guān)于返回鍵

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

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

andoidphone 一般都有物理返回按鍵

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

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

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