移動(dòng)用戶數(shù)和手機(jī)使用量都在逐年增加。隨著越來越多的用戶使用手機(jī)完成任務(wù)（參見The Future of Mobile ），如何改進(jìn)移動(dòng)用戶體驗(yàn)的各個(gè)影響要素，便成為值得關(guān)注的焦點(diǎn)。

　　移動(dòng)用戶體驗(yàn)是指用戶使用低端功能機(jī)到高清平板電腦間的任意設(shè)備中，與移動(dòng)產(chǎn)品（瀏覽器或App ）互動(dòng)之前、之時(shí)及之后的認(rèn)知和感受。

　　為了創(chuàng)建令移動(dòng)用戶愉悅的體驗(yàn)，我們必須重新思考那些長期以來被認(rèn)為理所當(dāng)然的桌面端設(shè)計(jì)。移動(dòng)用戶體驗(yàn)的復(fù)雜性源于移動(dòng)設(shè)備的特性，主要包括：小屏幕，設(shè)備特性的巨大差異，電量和網(wǎng)絡(luò)的限制，難以定位又永遠(yuǎn)變化的移動(dòng)使用場景。

通過解析移動(dòng)用戶體驗(yàn)的重要組成部分，我們可以得到一個(gè)概念框架來構(gòu)建和評估好的移動(dòng)體驗(yàn)。這些部分在文章《以用戶為中心的移動(dòng)設(shè)計(jì)方法》
中有所提及 
（參見
user-centered approach to designing for mobile
）。下圖組成要素決定了移動(dòng)用戶體驗(yàn)，包括：功能、情境、用戶輸入、內(nèi)容和營銷等等。

　　 以上這些要素的重要性會(huì)根據(jù)設(shè)備類型不同（如非智能手機(jī)、智能手機(jī)、平板電腦）和界面顯示不同（如 App 和 Web ）發(fā)生變化。本文將簡要介紹這些要素，并詳細(xì)說明相關(guān)的重要準(zhǔn)則。

在本篇案例當(dāng)中，我們將幫助各位使用Metro風(fēng)格的設(shè)計(jì)原則對原有的iOS應(yīng)用設(shè)計(jì)方案進(jìn)行重新構(gòu)思，大家會(huì)了解到怎樣將iPad當(dāng)中一些常見的界面元素及體驗(yàn)?zāi)Ｊ睫D(zhuǎn)換成為Metro風(fēng)格，以打造全新的Windows 8應(yīng)用。我們將對同一款應(yīng)用在兩個(gè)平臺中的不同設(shè)計(jì)方式進(jìn)行對比，幫助各位了解怎樣將你的應(yīng)用與Windows 8以及Metro設(shè)計(jì)原則進(jìn)行完美的融合。

我們將要研究的是一款相片日志應(yīng)用，用戶可以在線查看和管理他們的照片或視頻。下圖是這款應(yīng)用的Metro版本：

這款應(yīng)用最初是為iPad設(shè)計(jì)的，如下圖所示。

從設(shè)計(jì)及體驗(yàn)?zāi)Ｊ降慕嵌瘸霭l(fā)，該應(yīng)用可以大致被解構(gòu)為六個(gè)方面：

1. 布局和導(dǎo)航
2. 命令與行為
3. 契約(Contract)：搜索、分享及其他
4. 觸控與手勢
5. 屏幕定向與視圖模式
6. 消息通知

于移動(dòng)設(shè)備的操作系統(tǒng)及應(yīng)用來說，判斷其用戶界面設(shè)計(jì)方案是否優(yōu)秀的一個(gè)重要衡量標(biāo)準(zhǔn)，就是看它對于手指觸控操作的友好程度。相比于桌面計(jì)算設(shè)備及相關(guān)的軟件環(huán)境，觸屏移動(dòng)設(shè)備所具有的交互特性幾乎將用戶體驗(yàn)設(shè)計(jì)師們帶入了工業(yè)設(shè)計(jì)的領(lǐng)域；設(shè)計(jì)方案更多是在體現(xiàn)著人機(jī)工學(xué)方面的原理，而不再是僅僅用來規(guī)劃內(nèi)容與功能的視覺呈現(xiàn)方式。

拇指熱區(qū)與底部原則

首先，我們需要了解人們通常會(huì)以怎樣的方式將手指?？吭谠O(shè)備上。拿手機(jī)來說，普通青年們多數(shù)會(huì)使用拇指來進(jìn)行觸控操作，所以觸屏手機(jī)的界面交互方案基本是圍繞著拇指來進(jìn)行打造的。

拇指是很不可思議的，據(jù)說它是將我們與動(dòng)物區(qū)分開來的重要標(biāo)志之一...拇指的功能具有相當(dāng)?shù)膹椥?，同時(shí)也受到一定的局限。對于常規(guī)的觸屏手機(jī)來說，我們可以使用拇指掃過屏幕當(dāng)中的大部分區(qū)域，但其中大約只有三分之一屬于真正有效的觸控區(qū)域。所以在設(shè)計(jì)當(dāng)中，要盡量將最重要的界面交互元素放置在這個(gè)范圍當(dāng)中。在右手持機(jī)的狀況下，有效觸控區(qū)域位于屏幕的左下方：

這也正是移動(dòng)系統(tǒng)或應(yīng)用中一些重要的工具欄或?qū)Ш浇Y(jié)構(gòu)通常被放置在界面底部的原因。與此相反的是，在傳統(tǒng)的桌面設(shè)備系統(tǒng)環(huán)境中，導(dǎo)航菜單一類的界面元素通常被放在界面頂部，無論是本地軟件還是網(wǎng)頁基本都是如此。對于我們有限的拇指作用范圍來說，這種傳統(tǒng)布局方式顯然不能在移動(dòng)設(shè)備的用戶界面當(dāng)中很好的適用。

相比之下，左下角還是右下角的問題略顯次要。我們在實(shí)際當(dāng)中經(jīng)常會(huì)更改左右手持機(jī)方式，想想看是不是這樣，譬如對于右撇子來說，當(dāng)他們正在寫字或是需要同時(shí)使用鼠標(biāo)操作桌面設(shè)備時(shí)，通常會(huì)將手機(jī)交于左手操作；而左撇子們則正相反。不過在多數(shù)時(shí)間內(nèi)，使用右手持機(jī)的用戶還是要相對較多一些。

底部原則可以幫助我們對界面當(dāng)中的可觸控元素進(jìn)行更好的組織。最常用的功能按鍵應(yīng)該被放在拇指最容易觸摸到的熱點(diǎn)區(qū)域當(dāng)中，而其它相對次要或是比較敏感的控制元素則應(yīng)該盡量避開這個(gè)區(qū)域。以iOS中的“編輯”按鈕來說，它通常被置于界面右上方，這個(gè)位置即可以保證它清晰可見，同時(shí)又不會(huì)被很容易的觸碰到，以免發(fā)生誤操作。

我個(gè)人對這方面的話題是蠻關(guān)注的，偶爾在微博 上弱弱的念叨兩句，也會(huì)有不少朋友來發(fā)表各自的看法，確實(shí)是大家都蠻關(guān)心的設(shè)計(jì)問題。另外最近看到不少文章觀點(diǎn)也都是圍繞這些展開的，其中有些比較公允務(wù)實(shí)，有些則比較偏頗；所謂偏頗，也就是片面表達(dá)某種風(fēng)格一定比某種風(fēng)格更好，以及好在哪里。說真的，都有一定的道理，都能看出發(fā)表論調(diào)的設(shè)計(jì)師的思考和激情。

有人說了你怎么這么沒節(jié)操呢，你到底覺得哪種好呢？我要說的是叭，在我看來這個(gè)事情里的的確確不應(yīng)該存在哪個(gè)強(qiáng)于哪個(gè)的爭議，因?yàn)樗揪筒皇莻€(gè)非黑即白非美即丑涇渭分明的問題；脫離了實(shí)際產(chǎn)品的上下文環(huán)境，脫離了產(chǎn)品功能與目標(biāo)用戶群類型之間的關(guān)聯(lián)，所謂好與不好的命題壓根就不成立。

說的具體些，遠(yuǎn)的不講，單說Beforweb 這邊的視覺風(fēng)格，除了每篇文章的圖標(biāo)以外，可以說是徹徹底底的扁平化了(當(dāng)然，細(xì)心的朋友可以在側(cè)邊欄標(biāo)題背景底部發(fā)現(xiàn)類似陰影效果的1像素邊框，這個(gè)不算數(shù)...)，但如果有人說我是扁平風(fēng)格的衛(wèi)道者的話，我會(huì)很不開心，因?yàn)槲抑皇窃谧约河X得合適的地方使用這種風(fēng)格而已。我喜歡iOS里很多擬物擬真風(fēng)格的界面，最典型的包括語音備忘錄、iBooks、iPad里的日歷等等，它們的界面讓我覺得親切自然，讓我可以在冰冷的電子設(shè)備當(dāng)中找到現(xiàn)實(shí)生活的真實(shí)感，就這么簡單。

下面這些截圖來自我平常自娛自樂時(shí)會(huì)用到的一些音樂方面的iOS或OS X應(yīng)用。它們的功能的確非常棒，我著實(shí)在這些東西上花掉不少錢，但如果它們的界面沒有采用如此逼真的擬物化設(shè)計(jì)，如果他們只是干巴巴的功能和數(shù)據(jù)陳列或是Metro風(fēng)，我是絕不會(huì)在它們身上花半毛錢的。

移動(dòng)設(shè)備與傳統(tǒng)桌面設(shè)備雖然都被成為“計(jì)算設(shè)備”，但它們之間的差異是顯而易見的：移動(dòng)設(shè)備的屏幕要小很多，無線網(wǎng)絡(luò)鏈接方面會(huì)有不穩(wěn)定，電池續(xù)航能力較弱，等等。這份“弱點(diǎn)”清單可以列的很長，但如果你因此認(rèn)為移動(dòng)設(shè)備就是降級版的計(jì)算機(jī)，那同樣是錯(cuò)誤的看法。

實(shí)際上，從其他一些角度來觀察，移動(dòng)設(shè)備又是比桌面設(shè)備更加強(qiáng)大的。智能手機(jī)和平板電腦都是更加個(gè)人化的設(shè)備，它們會(huì)一直陪伴在你身邊，讓你隨時(shí)隨地都可以接入互聯(lián)網(wǎng)獲取所需的信息；它們身上還有傳統(tǒng)設(shè)備所不具備的很酷的功能，包括GPS、數(shù)位羅盤、加速計(jì)等等。

所有這些差異都使得移動(dòng)設(shè)備當(dāng)中的應(yīng)用程序在界面設(shè)計(jì)方面存在很多獨(dú)到之處。我(英文原文作者)基于在自己的workshop中的工作經(jīng)驗(yàn)，總結(jié)出了移動(dòng)應(yīng)用界面設(shè)計(jì)的十條原則及小提示，在這里與大家分享，希望能夠幫助那些還不是非常熟悉這個(gè)領(lǐng)域的設(shè)計(jì)師們建立起一套有實(shí)踐價(jià)值的設(shè)計(jì)思維框架。

1.設(shè)計(jì)觀念

從傳統(tǒng)設(shè)備轉(zhuǎn)向移動(dòng)領(lǐng)域，設(shè)計(jì)師們首先要做的是調(diào)整思維模式和設(shè)計(jì)觀念。

• 專注 ：移動(dòng)應(yīng)用的本質(zhì)目標(biāo)是幫助人們以最高的效率完成特定的任務(wù)。少即是多，你要砍掉的產(chǎn)品功能通常會(huì)比你想象的多很多。
• 獨(dú)特：從一開始就要理解你的應(yīng)用與同類產(chǎn)品相比具有哪些獨(dú)到之處，將其體現(xiàn)到產(chǎn)品的整體用戶體驗(yàn)策略當(dāng)中，并在交互及視覺設(shè)計(jì)流程當(dāng)中著重突出這些賣點(diǎn)。
• 迷人 ：移動(dòng)設(shè)備是相當(dāng)個(gè)人化的工具，人們會(huì)在長久的使用過程中逐漸將感情融入到軟硬件當(dāng)中；應(yīng)用程序同樣要與用戶在情感層面產(chǎn)生互動(dòng)，通過各種友好的、有趣的、可信賴的設(shè)計(jì)與功能讓用戶覺得愛不釋手。
• 體貼 ：不要將注意力過多集中在“開發(fā)”本身上，不要將自己的心智模型以及產(chǎn)品的業(yè)務(wù)邏輯作為設(shè)計(jì)的準(zhǔn)繩。如果你確實(shí)希望自己的產(chǎn)品能夠被更多用戶所接受，那么必須學(xué)會(huì)站在他們的角度觀察問題、制定設(shè)計(jì)決策。

不要用“多多益善”的觀念打造移動(dòng)應(yīng)用

今年，我們(英文原文作者及團(tuán)隊(duì))發(fā)布了FreshBooks 的第一款iPhone應(yīng)用。從前我們的產(chǎn)品一直是通過Web端應(yīng)用的方式提供服務(wù)的。這次，我們把iPhone應(yīng)用的設(shè)計(jì)開發(fā)過程看作一張空白的花布，盡力在其中實(shí)現(xiàn)一些新的功能概念和設(shè)計(jì)想法。在這個(gè)過程中，我們著實(shí)學(xué)到不少東西。

不要害怕犯錯(cuò)

對于移動(dòng)應(yīng)用這樣的產(chǎn)品，設(shè)計(jì)過程中必然會(huì)遇到很多用戶體驗(yàn)方面的問題與挑戰(zhàn)，尤其是對于新手來說更是如此。

無論你的線框稿在邏輯上有多縝密，UI稿在視覺上有多漂亮，當(dāng)它們落實(shí)成為原型或最終產(chǎn)品時(shí)，總會(huì)有問題呈現(xiàn)出來。這并不完全是壞事；我們在設(shè)計(jì)FreshBooks的iPhone應(yīng)用時(shí)甚至將犯錯(cuò)這件事也納入到了流程規(guī)劃當(dāng)中，這就意味著：

• 坦承沒有完美的設(shè)計(jì)，無論稿件和原型多么優(yōu)秀。
• 真正的成功或失敗都是由用戶的反饋來定義的。
• 對于在設(shè)計(jì)過程中看到的問題要迅速做出反應(yīng)，根據(jù)從實(shí)際用戶身上得來的驗(yàn)證結(jié)果進(jìn)行迭代。

接下來，我將向各位描述一下我們在項(xiàng)目中犯過的三個(gè)錯(cuò)誤，以及我們是怎樣解決這些問題的。

應(yīng)用的主界面

在項(xiàng)目開始的時(shí)候，我們對FreshBooks的一些現(xiàn)有用戶進(jìn)行了訪談，了解他們在生活和工作中是怎樣使用移動(dòng)設(shè)備的，包括他們面對的實(shí)際問題，以及他們對移動(dòng)應(yīng)用版本的FreshBooks的期望。

根據(jù)這些訪談，我們歸納出了一些基本的設(shè)計(jì)原則，例如下面這條：

以任務(wù)為中心的用戶體驗(yàn)

移動(dòng)應(yīng)用版本的產(chǎn)品應(yīng)該圍繞著一系列互不相關(guān)的帳單任務(wù)進(jìn)行優(yōu)化，包括時(shí)間追蹤、為收據(jù)拍照存檔、開票等等，這些是移動(dòng)應(yīng)用所處的使用場景當(dāng)中最常見的任務(wù)。

而其他方面的復(fù)雜任務(wù)，包括批量編輯、權(quán)限管理、定制化等，則留給傳統(tǒng)的Web端應(yīng)用來承擔(dān)，以此來保證移動(dòng)版本在功能上的簡約與集中。

基于這條原則，我們設(shè)計(jì)了應(yīng)用的主界面。它由一系列最重要的任務(wù)組成，視覺上采用圖標(biāo)加文字標(biāo)題的形式，點(diǎn)擊進(jìn)入相應(yīng)的任務(wù)流程。例如，用戶點(diǎn)擊了其中的“創(chuàng)建新發(fā)票”之后會(huì)進(jìn)入發(fā)票列表界面，然后創(chuàng)建新發(fā)票的界面會(huì)自動(dòng)滑入視圖。

這種以典型任務(wù)為中心的設(shè)計(jì)思路在意圖上是好的，但接下來我們發(fā)現(xiàn)了一些問題。

又是天氣不錯(cuò)的周末，不冷不熱，一年里最舒服的一些時(shí)日了叭。感覺自從十一長假結(jié)束之后有些東西就變掉了，自己熟悉的很多事情、很多感覺，都像是在頭腦里向后退去了一層，要努力去抓才能讓它們回來的樣子誒。也許只是陽光泛濫了太久的緣故。

好叭。今次的譯文是我最喜歡的一類小菜，篇幅簡短，實(shí)戰(zhàn)性強(qiáng)。原文 作者，來自Frog的一名交互設(shè)計(jì)師，講述了她與朋友在共同設(shè)計(jì)開發(fā)拼車服務(wù)Ridejoy的iPhone客戶端 的過程中所遇到的一些挑戰(zhàn)以及相關(guān)的解決方案。前戲到這里，進(jìn)入正文。