Mobile First（移動優(yōu)先）的口號最初是由Yahoo前首席設計架構(gòu)師Luke Wroblewski提出的，已經(jīng)獲得了業(yè)界的廣泛反響。他提倡產(chǎn)品研發(fā)團隊首先針對移動設備設計，這不僅是因為移動設備現(xiàn)在數(shù)量龐大而且在飛速增長，而且因為移動設備的限制能迫使我們改變舊習慣，先做減法，更關(guān)注產(chǎn)品最本質(zhì)、最重要的方面，同時更多地注意性能和使用場景，反而最后會得到更出色的用戶體驗。當然，移動設備中豐富的傳感器、攝像頭等等硬件，也為產(chǎn)品提供了更廣闊的空間。

全文如下：

當談到如何組織移動終端上的內(nèi)容和功能時，可靠有效的信息架構(gòu)準則比如清晰干凈的標簽、均衡的廣度和深度、恰當?shù)男闹悄Ｐ停╩ental models）都是非常重要的。但是要合理規(guī)劃移動Web應用還需要做到：

• 與人們使用移動設備的習慣和原因一致；
• 突出內(nèi)容而非導航；
• 對于搜索（exploration and pivoting）提供最相關(guān)的選擇
• 保持清晰與集中；
• 和移動用戶行為習慣一致。

在前面的部分中，我們已經(jīng)討論過移動設備的局限和功能，這些因素使得基于移動設備的設計工作非常獨特。同樣，傳統(tǒng)桌面Web也自有其限制和可能性，所以如果只是簡單的將桌面Web的工作策略移植到移動設備上經(jīng)常是行不通的。相反，你需要考慮移動設備的獨特優(yōu)勢以及如何與用戶需求結(jié)合起來。

在更高層次來看這種結(jié)合，就可以對人們使用移動設備的行為和原因進行闡述。Josh Clark在他的著作《Tapworthy》中，重點提到三種關(guān)鍵的移動行為模式：微操作（micro-tasking）、“我在當?shù)?rdquo;（“I’m local”）以及“我很無聊”（ “I’m bored”）這和Google提出的三種用戶典型行為分解非常吻合：緊急需求（urgent now），實時更新（repetitive now）, 和無聊（bored now），無論你如何標識這三種行為，移動場景基本包括以下交互類型：

查詢Lookup/Find（急需信息，本地）：我現(xiàn)在就需要某些問題的答案——通常和我當前所處位置有關(guān)；

• 探索/娛樂（在某地感到無聊）：我想消磨時間，只是想要有些東西來打發(fā)無聊時光。
• 簽到/狀態(tài)更新（重復/微任務）：我需要跟進一些很重要的東西，讓它們保持在最新狀態(tài)；
• 編輯/創(chuàng)建（緊急變化/微任務）：我現(xiàn)在急需完成一些任務。

因為這些場景都與用戶使用移動設備的需求直接相關(guān)，這些典型行為也決定了你該如何構(gòu)建和組織手機應用體驗，以契合用戶需求。例如，圖片分享Flickr通過四個主要功能傳達它的核心移動體驗，最近活動列表（Recent activity）和上傳功能（Uploads from your contacts）讓用戶隨時了解好友的新鮮事和新照片；當日有趣的事情（Today’s interestingness）和照片功能（Photos taken nearby）可以讓人們在無聊時觀看精美的圖片以打發(fā)時間。

圖4.1：Flickr和Basecamp的Web應用體驗都與用戶使用移動設備的需求契合

同樣，項目管理手機Web應用Basecamp所提供的核心體驗就是方便人們跟進、編輯、創(chuàng)建新信息、計劃任務等。由于人們使用Flickr和Basecamp的理由不盡相同，兩個網(wǎng)站都對移動版本的組織方式做了相應調(diào)整。

和人們使用手機的習慣保持一致，也就是讓你的網(wǎng)站和現(xiàn)實世界的需求保持一致。由于人們可以在任何地方使用手機應用，因此你需要考慮如何能讓你的應用在任何地方都能對用戶有用。這意味著進行大量的現(xiàn)實世界中的使用案例研究來搞清楚人們的真正需求，并以此來組織你的站點。我最近發(fā)現(xiàn)了一個很好的樣例。在Mobile in Higher Ed blog一文中, Dave Olsen對一個xkcd漫畫（注：一個小型漫畫網(wǎng)站，主題多涉及浪漫、諷刺、數(shù)學和語言）中的內(nèi)容做了如下闡述：

“當我看著右邊的文氏圖(譯者注：Venn Diagrams，用于表示集合間的關(guān)系與運算)的時候，我想，‘這對我的移動應用站點來說，看起來就是一個天然的組織好的可用內(nèi)容’。……去掉了不需要的東西，做相應的裁剪，以便能適應設備和網(wǎng)絡的限制，就可以形成一個更好更有用的移動應用。”

我完全贊同他的觀點（就直接將他的原話引在這里）。

圖4.2：一個來自于xkcd的漫畫圖（http://bkaprt.com/mf/40），諷刺性對比了人們在一個大學網(wǎng)站中想要找到的信息和他們能找到的信息。#p#

內(nèi)容比導航更重要

在手機上，內(nèi)容比導航重要是一條普遍規(guī)則。無論人們是在跟進新消息如股票、新聞、比賽分數(shù)，或是查找當?shù)氐男畔ⅰ⑽恼?，他們想要的都是及時的反饋結(jié)果而非站點地圖。

太多的手機Web應用（就像我們剛剛所提到的Flickr和Basecamp的例子），在會話開始都是提供一列導航選擇而非內(nèi)容。對手機而言，時間很重要，下載是要費流量花錢的，所以，要盡快反饋給人們他們所需要的。

YouTube和ESPN手機Web應用就是這么做的。一個簡單的頭欄告訴你你正在訪問哪個站點，并將所有的導航選項放到一個按鈕中去了。頁面其他部分都是即時信息（ESPN）和最新的娛樂資訊（YouTube）（圖4.3）。

圖4.3：ESPN和YouTube的移動Web應用將重點放在內(nèi)容上而不是導航上。#p#

 定位與搜索

且慢，如果內(nèi)容總優(yōu)先于導航，那如何用我自己的方式瀏覽應用？難道我們不需要一種方式用于導航或者發(fā)現(xiàn)其他功能嗎？當然需要，但是，讓人們搜索相關(guān)內(nèi)容并不一定意味著應用中鋪設大量導航欄以至于掩蓋了內(nèi)容。

例如，F(xiàn)acebook的手機應用將我?？吹南嚓P(guān)內(nèi)容放在默認頁面的中心部分，這非常好；但是，因為在頁面頂端有三個導航欄，我只能在屏幕上看到一個更新。Google的Finace應用也以實時信息為主，但是這些信息卻被五個導航欄中夾在其中。這些導航選項（人們有可能并不需要這些導航選項）占用了屏幕上很多寶貴的空間，這些空間本來是可以用來突出更有用的內(nèi)容（圖4.4）。

圖4.4：Facebook和Google Finance 應用上用多個導航選項占用了寶貴的空間

 Facebook最近重新設計了他們的Web應用，減少了導航選項數(shù)量（圖4.5）。如果不算上消息推送中的“最熱消息”和“最多評論”的話，他們將導航選項減少了一半（從10個減到了5個）。這是個很好的開始。

圖4.5：Facebook最近的新的設計減少了其移動Web應用中導航選項的數(shù)量

 YouTube和ESPN的例子都是內(nèi)容優(yōu)先于導航，但對于用戶如何通過導航搜索到它們網(wǎng)站的其他內(nèi)容，有著不同的處理方式。YouTube提供了一個快捷方式，通過點擊這個快捷方式就可以全屏顯示出站點各個位置的導航（圖4.6）。這種方式需要你主動去尋找導航按鈕，并且當你在一個單獨的全屏頁面中查看（你將看不到原先的內(nèi)容頁面）導航欄。你需要了解YouTube頂端的圖標代表著“導航，請點擊”。

圖4.6：YouTube的移動Web應用頂部中有個導航按鈕用于全屏顯示應用地圖

ESPN在頂端有一個更為明顯的“Menu”按鈕，點擊后可在按鈕下面展開一個詳細（多級）的導航菜單（圖4.7）。這種方式讓你在導航時仍然停留在當前頁面，而不需要移動到并加載一個新的頁面。ESPN還在它的大多數(shù)頁面底部使用了這樣的導航按鈕。

圖4.7：ESPN的移動Web應用在每一頁的頂部和底部都有導航選項

在頁面底端的控制方式可以讓人們?nèi)菀子脝问诌M行操作，并在人們?yōu)g覽至屏幕底端時，提供給他們更多選擇和想法。YouTube的設計在頁面底端缺乏這樣的導航，因此當你達到頁面底端時，你就不知道下一步該做什么了（圖4.8）。

圖4.8：在YouTube的移動Web應用的頁面底端的選項基本上是走向了一條死胡同。退出登錄（Sign out）？還是發(fā)送反饋（Feedback）？

 盡管底端的菜單對于人們進行進一步搜索是很有幫助的，但它們不應該與其他地方能找到的菜單相同。與此相反，一個頂端的菜單按鈕應該可以將人們鏈到移動Web頁面的底部導航菜單（在內(nèi)容之后）。我們最近在Bagcheck移動Web應用使用了這種方式（圖4.9）。

圖4.9：一個在Bagcheck頂部的錨鏈接能讓你跳到頁面底端的導航菜單

 在站點頂部的一個簡單的錨鏈接能讓人們跳到頁面底端的導航選項。在內(nèi)容頁面底端顯示的這個菜單能讓人們搜索站點的其他部分，特別是當他們直接到了一個內(nèi)容頁面而不熟悉站點其他內(nèi)容的時候。

如果他們想要返回到他們剛剛瀏覽的內(nèi)容的話，在Bagcheck頁面底端的菜單也有一個“Top”鏈接讓人們可以回到頁面的初始位置。

這種設計使用了最少量的導航元素（僅僅是頂部的一個鏈接），讓人們在到達頁面底端時可以搜索站點其他地方的內(nèi)容，沒有復制其他菜單的內(nèi)容，并且（最好的一點）只需要一個錨鏈接就可以工作。這就對了：沒有很炫的JavaScript，沒有很炫的疊層（Overlays），也不需要去維護一個單獨的導航頁面，而只需要一個鏈接到頁面底端的錨，就是最簡單HTML 。（據(jù)我了解，在IE外的其他大多數(shù)瀏覽器都運行無礙）

Bagcheck的內(nèi)容頁面也有一種很獨特的相關(guān)導航菜單（related navigation lists），讓人們選擇深入探索某個話題的時候提供進一步搜索導航（圖4.10）。他們也可以只是使用底部的全局導航選項來到達站點的不同位置。

圖4.10：Bagcheck手機Web應用中的基于關(guān)聯(lián)導航菜單(Contextual navigation menu)可以讓人們進一步搜索相關(guān)內(nèi)容

關(guān)聯(lián)導航選項（Contextual navigation options）對任務來說是很有用的。在Gmail的手機應用中（圖4.11），可以在屏幕頂端看到一個內(nèi)容關(guān)聯(lián)菜單，因為這些操作直接和當前郵件內(nèi)容相關(guān)，將它們放在底端的話就妨礙效率，而讓它們一直置頂就可便于操作。

圖4.11：在Gmail移動Web應用中關(guān)聯(lián)動作選項（Contextual actions）可以讓人們迅速對他們的郵件進行操作#p#

 關(guān)于返回

我對觀摩不同產(chǎn)品的設計解決方案在多種平臺上的移植調(diào)整很感興趣，例如，很多iPhone本地應用在頭部有一個顯眼的“返回（back）”鏈接（圖4.12）。iOS設備本身并沒有設置一個物理的返回按鈕，也沒有為本地應用顯示任何一個系統(tǒng)級操作（chrome actions）。

圖4.12：在本地iPhone應用中，“back”按鈕是一個常見功能

 但是在一些移動Web應用中，也出現(xiàn)了不必要的“back”按鈕（本地應用中已經(jīng)有這樣一個按鈕了）?？紤]到主流移動設備（Android, Blackberry, Windows Phone 7等）都有一個物理的返回按鈕（圖4.13）。甚至Apple的移動Web瀏覽器在應用工具欄（application toolbar）也包括了重要的返回控制鍵（圖4.14）。你的移動Web應用中增加一個返回按鈕只能增加用戶的疑惑，用戶肯定會問：“這兩個按鈕功能是一樣的嗎？”

圖4.13：Android手持設備硬件上設置有返回按鈕

圖4.14：蘋果的瀏覽器在頭部的工具欄中有一個永久的返回按鈕

 所以在設計移動Web體驗時，直接讓本地應用去完成返回功能就可以了。如果你需要讓人們更快返回上一層，那么別使用“Back”來標記按鈕。#p#

屏幕底端的固定導航

說到iPhone的本地應用，它們當中有很多在屏幕底端使用了固定位置的導航條。這些菜單可以讓我們更容易用拇指完成一些關(guān)鍵操作，但是不像Web應用，本地的iOS應用并沒有瀏覽器控件占用屏幕空間。Yahoo！郵件的Web應用就顯示了瀏覽器菜單（browser chrome）會對Web頁面的影響，其中兩個瀏覽器菜單和兩個固定菜單只給收件箱下了很小的顯示空間（圖4.15）。

圖4.15：Yahoo！郵件的手機Web應用在瀏覽器窗口底端設置了一個固定的導航菜單

 但是Web應用不應只適用于在iOS上的某一個Web瀏覽器，還應能適配其它多個瀏覽器。同時，不少移動設備在屏幕底端用設有物理控制按鈕，這種情況也給屏幕底端顯示的菜單造成了麻煩（圖4.16）。這些控制按鈕間的相似性使得人們在忽視菜單而點擊物理按鈕時一定會遇到錯誤。

圖4.16：很多設備在屏幕下方有物理的控制鍵

 當你開發(fā)一個本地應用時，可根據(jù)各個設備的物理按鈕調(diào)整菜單的位置，但是Web應用應該是能跨平臺的——無論屏幕底端有沒有物理按鈕。盡管在某些本地應用中，將導航菜單固定在屏幕底端或許是不錯的選擇，但當開發(fā)Web應用時，如果屏幕下端有Web瀏覽器菜單和物理按鍵，再將導航菜單固定在屏幕底端卻不是個好主意。如果你需要一個固定的菜單，那么應該將它放在頂部，就像Twitter為他們重新設計的手機Web應用一樣（圖4.17）。

圖4.17：Twitter的最新手機Web應用考慮到不同設備的區(qū)別，使用了一個頂部的導航菜單來完成關(guān)鍵操作#p#

保持布局簡潔、重點突出

像書中前半部分提到的一樣，當人們使用手機的時候，通常“只分配了全部注意力的一小部分，而且只使用拇指來操作”（one eyeball and one thumb）。用戶通常不是舒服地坐在桌子前只是全神關(guān)注你的站點。相反，他們所處的現(xiàn)實世界存在很多干擾。在這樣的情況下，我們只能獲得人們部分的注意力，他們需要清晰而重點突出的設計來完成事情——而不是用大量導航選項阻擋他們。

Yahoo！郵箱的撰寫郵件的界面是一個很好的例子，它將多余的功能去掉而讓人們集中于最基本的任務上（在這個例子中最基本的任務是寫郵件）。這個界面只包含一個導航項：“cancel”（圖4.18）。界面的其他部分都是直接集中于與手頭任務相關(guān)的功能。

圖4.18：對比了Yahoo’s Compose Mail（左）和ESPN的實時比賽界面（右）

與此相反，ESPN的NBA實時更新界面上卻覆蓋了太多導航選項以至于戰(zhàn)況顯示都被擠到了屏幕之外。此時最緊要的任務是觀看球賽而非在菜單間進行選擇。

在手機屏幕上盡可能少地使用導航選項也能幫忙減少錯誤。由于導航選項更少，當人們在完成當前任務的時候，不會因為意外操作而進入到別的任務中。#p#

總結(jié)：移動組織要點

 當你在組織Web應用時，要深入思考一下如何將移動行為和用戶需求進行匹配：

• 使用案例包括查詢（lookup/find）、搜索（explore/play）、跟進（check-in/play）、創(chuàng)建（edit/create），你需要想清楚移動場景下用戶是如何使用你的網(wǎng)站并對它的結(jié)構(gòu)進行合理地調(diào)整；
• 先關(guān)注內(nèi)容，再去考慮導航，這能讓人們更快接觸到他們想要的信息和任務；
• 高度關(guān)聯(lián)而且位置恰當?shù)膶Ш竭x項能可為瀏覽更多站點內(nèi)容提供良好體驗；
• 堅持簡潔清晰、重點突出，減少導航選項、精心設計用戶真正需要的關(guān)鍵任務，這點在用戶處于非理想場景下特別是忙碌時非常有用。
•  而當人們待在沙發(fā)上拿著手機享受閑暇時光時，也會欣賞你的簡約設計！

作者簡介：Luke是Bagcheck（http://bagcheck.com/）的創(chuàng)建者之一（Co-founder）和CPO（Chief Product Officer）。Bagcheck在公開成立九個月后就被Twitter收購了。在此之前，Luke在Benchmark Capital做EIR（Entrepreneur in Residence），并且是Yahoo首席設計師（Chief Design Architect (VP)），他在Yahoo的工作主要是產(chǎn)品部署和對于用戶使用Web、手機、TV等的體驗進行前瞻性思考綜合。Luke是《Web Form Design》和《Site-Seeing: A Visual Approach to Web Usability》的作者。

原文鏈接：Organizing Mobile