如何開(kāi)始移動(dòng)設(shè)計(jì)
對(duì)于我們中很多人來(lái)說(shuō)，移動(dòng)端設(shè)計(jì)是一個(gè)嶄新的機(jī)會(huì)。但是，如果你過(guò)去是桌面端的網(wǎng)頁(yè)設(shè)計(jì)師，如何將經(jīng)驗(yàn)轉(zhuǎn)換到移動(dòng)網(wǎng)頁(yè)端呢？當(dāng)然，已有的一些工具，經(jīng)驗(yàn)，技能仍然適用，只需開(kāi)始思考下如何在手機(jī)上進(jìn)行組織和布局。
組織架構(gòu)
當(dāng)你開(kāi)始組織移動(dòng)端界面的內(nèi)容和操作時(shí)，一些可靠的信息架構(gòu)準(zhǔn)則：比如，清晰的標(biāo)簽（labeling），平衡的寬度和深度，妥當(dāng)合理的心智模型，這些仍舊十分重要。但是，組織移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)體驗(yàn)?zāi)阈枰紤]以下因素：
配合使用方式：人們?nèi)绾芜m用移動(dòng)設(shè)備，為什么這樣用？
強(qiáng)調(diào)內(nèi)容超過(guò)導(dǎo)航
保持清晰和專注
配合移動(dòng)設(shè)備適用方式
網(wǎng)絡(luò)營(yíng)銷公司稱我們很容易理解移動(dòng)設(shè)備上獨(dú)特的限制和性能。簡(jiǎn)單來(lái)說(shuō)，桌面網(wǎng)頁(yè)同樣有很多獨(dú)特的限制。所以直接將桌面產(chǎn)品移植到手機(jī)端并無(wú)意義。而是要考慮移動(dòng)端獨(dú)有的特性，并且滿足到用戶需求。
通過(guò)研究一些專業(yè)分析的共通點(diǎn)，我們會(huì)得到一些啟發(fā)。面對(duì)通常人們是如何使用他們的移動(dòng)設(shè)備的，為什么？這個(gè)問(wèn)題時(shí)，Josh Clark在他的《觸動(dòng)人心》（注：《觸動(dòng)人心－設(shè)計(jì)優(yōu)秀的iphone應(yīng)用》一書中講到過(guò)三個(gè)關(guān)鍵用戶行為：
“我有個(gè)微任務(wù)要做”；
“我想看看附近的情況”；
“我有些無(wú)聊”。
這正好與google的調(diào)研不謀而合，他將移動(dòng)用戶細(xì)分為三種行為群體：當(dāng)前是急迫的，反復(fù)的，或者無(wú)聊的。
不管如何描述，移動(dòng)端的使用方式通常包括以下交互情形：
查找/發(fā)現(xiàn)（急需信息，基于地點(diǎn)位置）：我現(xiàn)在需要得到答案——多數(shù)是告訴我在哪里。
探索/娛樂(lè)（無(wú)聊，基于地點(diǎn)位置）：我現(xiàn)在想消磨時(shí)間，來(lái)點(diǎn)娛樂(lè)打發(fā)無(wú)聊。
簽到檢查（check－in）/狀態(tài)（重復(fù)/微任務(wù)處理）：一些重要的事需要不斷改變或更新，我想留在上面。
編輯/創(chuàng)建（緊急調(diào)整，微任務(wù)處理）：我需要馬上做完一些事，不能等。
以上因素決定人們?yōu)楹翁统鍪謾C(jī)，所以這些行為決定了手機(jī)體驗(yàn)應(yīng)該如何被構(gòu)造和組織來(lái)滿足人們的需求。
例如：照片分享Flickr的移動(dòng)網(wǎng)頁(yè)體驗(yàn)就有四個(gè)主要操作。你通訊錄里好友的最新活動(dòng)和最新上傳讓人們不斷想檢查是否有好友的照片更新；提供當(dāng)日附近人們上傳的一些有趣的內(nèi)容和照片，為想瀏覽優(yōu)質(zhì)照片的人們打發(fā)無(wú)聊時(shí)間的方式。
flickr的移動(dòng)網(wǎng)頁(yè)體驗(yàn)符合人們?yōu)槭裁炊统鍪謾C(jī)（雖然略顯生硬）。
配合移動(dòng)環(huán)境使用環(huán)境自然也需要適應(yīng)你網(wǎng)站真實(shí)世界的需要。因?yàn)橐苿?dòng)體驗(yàn)可能被用在任何地點(diǎn)場(chǎng)景，你需要考慮如何讓人們無(wú)論在哪里都覺(jué)得好用。
這就意味著需要考慮用戶真正需要你網(wǎng)站組織提供的真實(shí)用例（use cases）。之前我曾經(jīng)寫過(guò)一篇《利用人物角色來(lái)做信息架構(gòu)》其實(shí)就是通過(guò)分析用戶完成某任務(wù)的流程來(lái)進(jìn)行網(wǎng)頁(yè)上的信息架構(gòu)。這一點(diǎn)其實(shí)在手機(jī)端更加重要。
通過(guò)了解以上用戶會(huì)掏出手機(jī)的動(dòng)機(jī)，結(jié)合自身app提供的功能，盡量減少用戶在移動(dòng)端的操作路徑。
內(nèi)容優(yōu)于導(dǎo)航
一條常規(guī)理論，在移動(dòng)端內(nèi)容優(yōu)先于導(dǎo)航。無(wú)論人們是否經(jīng)常查看更新信息，諸如：股票，新聞或是比分；他們查看當(dāng)?shù)匦侣劵蚴峭ㄟ^(guò)搜索查找文章或是使用聊天工具，他們都想快速響應(yīng)需求而不是看到你的網(wǎng)站架構(gòu)脈絡(luò)。
太多的移動(dòng)網(wǎng)頁(yè)體驗(yàn)（像是之前的Flickr ）開(kāi)始時(shí)的對(duì)話都是一大堆的導(dǎo)航列表，而不是內(nèi)容信息。移動(dòng)端用戶時(shí)間很寶貴，下載也需要流量的金錢消耗，所以讓他們馬上獲得想要的信息才是關(guān)鍵。
Youtube ESPN的移動(dòng)網(wǎng)頁(yè)就是這樣做的。先是一個(gè)簡(jiǎn)單的抬頭告訴你身處哪里，將導(dǎo)航選項(xiàng)降級(jí)為一個(gè)單獨(dú)的按鈕。其余的位置放置可隨時(shí)查看的最新信息（ESPN）和最熱的供消遣的視頻。
ESPN Youtube移動(dòng)網(wǎng)頁(yè)體驗(yàn)將重點(diǎn)放在內(nèi)容信息上，而不是導(dǎo)航上。
定位和探索
但是，請(qǐng)稍等一下，如果內(nèi)容總是優(yōu)于導(dǎo)航。我如何才能在移動(dòng)網(wǎng)頁(yè)端找到我的路徑？難道我們不需要一種導(dǎo)航或路徑去發(fā)現(xiàn)哪里可以進(jìn)入？
當(dāng)然需要了，但是允許人們探索和定位相關(guān)的內(nèi)容并不意味著羅列一堆影響內(nèi)容瀏覽的導(dǎo)航條。
例如，舊版的facebook里將我經(jīng)常瀏覽的相關(guān)信息放在頂部和中間的重要位置，但是由于頂部導(dǎo)航占據(jù)三行的空間，每頁(yè)我一屏只能看到一條動(dòng)態(tài)。
之后，facebook調(diào)整了移動(dòng)網(wǎng)頁(yè)體驗(yàn)，重新設(shè)計(jì)了導(dǎo)航，減少了導(dǎo)航項(xiàng)的數(shù)量。如果你不去管頭條新聞和新聞?wù)麄儗?dǎo)航數(shù)量減半（從10減少到5）。It’s a good start.
關(guān)于導(dǎo)航菜單，youtube提供了一個(gè)全屏的快捷入口。這種方式的缺點(diǎn)：一是你需要主動(dòng)尋找；二是你不得不打斷當(dāng)前任務(wù)，跳轉(zhuǎn)到一個(gè)單獨(dú)的頁(yè)面；三是你要知道網(wǎng)格圖標(biāo)的意思是“導(dǎo)航菜單”。
ESPN移動(dòng)網(wǎng)頁(yè)設(shè)計(jì)聰明很多。他也在頂部有一個(gè)“菜單”按鈕，點(diǎn)擊后直接在下方直接展示多層級(jí)的導(dǎo)航列表。這種方式讓你思考下一步去哪里時(shí)，可以停留在當(dāng)前頁(yè)面，不需要離開(kāi)去加載一個(gè)新的頁(yè)面。
別忽視另類導(dǎo)航——控制屏幕底部容易些
不容忽視的是人們?cè)谑褂檬謾C(jī)時(shí)，容易的單手操作會(huì)讓他們舒服很多。對(duì)于單手來(lái)說(shuō)，屏幕底部操作也就顯得容易些。詳細(xì)討論可以參見(jiàn)《hover已死有事燒香》
當(dāng)人們撥弄到屏幕底部，想選擇或決定去哪里的時(shí)候，很多移動(dòng)網(wǎng)頁(yè)沒(méi)有給與你機(jī)會(huì)。
youtube設(shè)計(jì)在每頁(yè)的底部缺少導(dǎo)航引導(dǎo)，當(dāng)你劃撥到底部就沒(méi)地方可去了。
親，您這是讓我退出（Sign out）還是逼我寫反饋意見(jiàn)（Feedback）?。?/span>
底部菜單對(duì)引導(dǎo)用戶深入訪問(wèn)更有意義，但不好直接復(fù)制一個(gè)其他地方也有的菜單按鈕?？梢詫㈨敳康牟藛伟粹o從底部展開(kāi)（放在內(nèi)容信息之后）。Bagcheck移動(dòng)網(wǎng)頁(yè)端就是這么干的：
Bagcheck頂部的錨點(diǎn)鏈接從頁(yè)面底部展開(kāi)網(wǎng)站導(dǎo)航
關(guān)于返回鍵
網(wǎng)絡(luò)營(yíng)銷公司稱許多iphone的原生應(yīng)用在導(dǎo)航上都有個(gè)永久的返回按鈕。由于蘋果的移動(dòng)設(shè)備沒(méi)有硬件上的返回按鍵，所以很多app都在頂部標(biāo)題欄設(shè)置了返回按鈕。
不過(guò)在移動(dòng)互聯(lián)網(wǎng)的體驗(yàn)上，沒(méi)必要處處都設(shè)置返回按鈕。因?yàn)楹芏嘣O(shè)備上，諸如，andoid、黑莓、windows phone7都有硬件上的返回物理按鍵。
andoidphone 一般都有物理返回按鍵
即便是蘋果iphone上的瀏覽器，底部的工具欄上包含一個(gè)永久的返回按鈕。
iphone瀏覽器底部工具欄包含一個(gè)返回按鈕。某網(wǎng)頁(yè)左上角的返回實(shí)屬多余。
在移動(dòng)網(wǎng)頁(yè)體驗(yàn)上添加一個(gè)返回按鈕容易引起混淆。人們?cè)谑褂镁W(wǎng)頁(yè)時(shí)候會(huì)問(wèn)：“這兩個(gè)返回按鍵的作用是一樣的嗎？”。因此在移動(dòng)網(wǎng)頁(yè)設(shè)計(jì)時(shí)，不應(yīng)該在有限的空間內(nèi)占據(jù)一個(gè)多余的“返回”按鈕。
總之，當(dāng)你打算組織移動(dòng)網(wǎng)頁(yè)體驗(yàn)時(shí)，考慮哪些用戶行為符合移動(dòng)生活的需要。
