從網(wǎng)站到移動(dòng)應(yīng)用——隨"機(jī)"應(yīng)變的用戶體驗(yàn)設(shè)計(jì)
話說，又是以移動(dòng)應(yīng)用為主線的文章，這是鬧哪樣呢。但也不至于和本小博客的主旨相悖;網(wǎng)站產(chǎn)品移動(dòng)化，設(shè)計(jì)思路移動(dòng)化...在移動(dòng)互聯(lián)網(wǎng)洶涌的大潮面前，這是合情合理的趨勢，也是我們在用戶體驗(yàn)設(shè)計(jì)相關(guān)的日常工作中越來越多需要面對和學(xué)習(xí)的。
如果你一直以來從事著相對傳統(tǒng)的交互、視覺等方面的Web設(shè)計(jì)工作，而如今開始打算擴(kuò)展視野、提升技能、隨“機(jī)”應(yīng)變，做一名移動(dòng)互聯(lián)網(wǎng)的弄潮兒...那么本文很適合你閱讀。相關(guān)領(lǐng)域中的幾位牛人會(huì)在接下來的時(shí)間里帶給我們一些很實(shí)在的經(jīng)驗(yàn)之談。全文大致分為三個(gè)主題：
◆ Web設(shè)計(jì)師需要學(xué)習(xí)哪些知識(shí)和技能，才能進(jìn)入移動(dòng)應(yīng)用的設(shè)計(jì)和開發(fā)領(lǐng)域?
◆ 從設(shè)計(jì)的角度講，移動(dòng)客戶端應(yīng)用與傳統(tǒng)網(wǎng)站頁面之間的主要區(qū)別在哪里?
◆ 怎樣提升移動(dòng)客戶端應(yīng)用的用戶體驗(yàn)?設(shè)計(jì)師需要特別注意哪些?
開始進(jìn)入正題。現(xiàn)如今，到處都有人在談?wù)撘苿?dòng)應(yīng)用方面的話題，從視覺外觀到交互體驗(yàn)，這個(gè)那個(gè)的不亦樂乎。實(shí)際的統(tǒng)計(jì)數(shù)字也是蠻驚人的。最近，一份來自Flurry的研究報(bào)告顯示，用戶(美國地區(qū))每天使用移動(dòng)應(yīng)用的時(shí)間，平均下來是81分鐘，已經(jīng)超過了平均74分鐘的上網(wǎng)時(shí)間。
在這個(gè)世道里，身為用戶體驗(yàn)設(shè)計(jì)相關(guān)從業(yè)人員的你，無論一直以來的主攻方向是交互、視覺還是前端，也許現(xiàn)在都已經(jīng)開始琢磨著探索移動(dòng)應(yīng)用的相關(guān)領(lǐng)域了。
本文中，我們將從三個(gè)主要問題入手，與幾位業(yè)內(nèi)專家進(jìn)行探討，看看他們在“轉(zhuǎn)型”方面有哪些看法和建議。
Web設(shè)計(jì)師需要學(xué)習(xí)哪些知識(shí)和技能，才能進(jìn)入移動(dòng)應(yīng)用的設(shè)計(jì)和開發(fā)領(lǐng)域?
Josh Clark (設(shè)計(jì)師、開發(fā)人員，著有《觸動(dòng)人心 - 設(shè)計(jì)優(yōu)秀的iPhone應(yīng)用》一書，譯者老包)
說到正經(jīng)八本的設(shè)計(jì)技術(shù)能力，在入門階段其實(shí)沒太多新東西需要學(xué)。我們完全可以使用已經(jīng)輕車熟路的HTML、CSS和 JavaScript創(chuàng)建出用戶界面非常優(yōu)秀的客戶端應(yīng)用。別誤會(huì)，我不是在談?wù)揥eb App形式(什么是Web App?請參考我們之前關(guān)于網(wǎng)站移動(dòng)化方法的文章)，我是指所謂的“混合型應(yīng)用(hybrid apps)”，這是一種將基于HTML等前端技術(shù)實(shí)現(xiàn)的用戶界面搭載在原生客戶端上的方式，相當(dāng)于為Web App穿上了原生客戶端的外衣，并放到App Store當(dāng)中。對于希望轉(zhuǎn)型的傳統(tǒng)Web設(shè)計(jì)和開發(fā)人員，這種方式是個(gè)不錯(cuò)的起點(diǎn)。
關(guān)于“混合型應(yīng)用”，Jonathan Stark寫了兩本很棒的書，分別是《構(gòu)建iPhone企業(yè)級(jí)應(yīng)用—基于HTML, CSS 和JavaScript》以及《使用HTML、CSS和JavaScript開發(fā)Android程序》，書中展示了怎樣使用開源框架PhoneGap創(chuàng)建這種混合形式的客戶端應(yīng)用。
作為入門是不錯(cuò)，但混合型應(yīng)用在太多方面無法與原生客戶端應(yīng)用相提并論。如果你想打造在視覺及動(dòng)畫效果等方面都更加原汁原味的、特別是需要發(fā)揮設(shè)備硬件本身各種功能的應(yīng)用的話，原生客戶端應(yīng)用仍然是不二之選。這就意味著你需要學(xué)習(xí)使用面向?qū)ο驝語言(Objective-C)去寫iOS應(yīng)用，或是使用JAVA來打造Android版本。這些都是實(shí)實(shí)在在的編程語言，對于我們這樣的Web設(shè)計(jì)相關(guān)人員來說，學(xué)習(xí)的難度會(huì)驟增;通常，我們可以與經(jīng)驗(yàn)豐富的開發(fā)人員搭檔，由他們將設(shè)計(jì)思路和方案通過代碼實(shí)現(xiàn)出來。
即使這樣，我們也無需扔掉HTML、CSS、JavaScript或是相關(guān)的Web App前端開發(fā)框架——這些工具可以幫助我們在開發(fā)原生應(yīng)用的過程中創(chuàng)建快速原型——無論視覺還是交互方面都相當(dāng)高保真的快速原型。
#p#
說到設(shè)計(jì)工作本身，特別在用戶體驗(yàn)方面，移動(dòng)應(yīng)用與傳統(tǒng)網(wǎng)頁之間還是有著顯著差異的。有兩點(diǎn)需要特別注意：人機(jī)交互方式與使用場景。
◆ 對于移動(dòng)設(shè)備來說，你需要面對和解決的交互設(shè)計(jì)方面的問題會(huì)有很多，和以往不同，你現(xiàn)在是在為手指做設(shè)計(jì)。你必須考慮的一個(gè)問題是，怎樣的頁面元素布局可 以讓拇指自由的操作并充分的休息。另外，當(dāng)用戶在進(jìn)行操作時(shí)，界面的一部分必然會(huì)被拇指遮擋住，所以要盡量保證控制元件的布局不會(huì)干擾到實(shí)際內(nèi)容。類似這 樣的問題還有很多，多數(shù)可以歸納到“舒適度”與“可視性”這兩方面。這也是多數(shù)觸屏智能手機(jī)會(huì)將主要控制元件或?qū)Ш揭活惙旁谄聊坏撞康脑?mdash;—而這些與傳 統(tǒng)Web設(shè)計(jì)的習(xí)慣正好相反。
◆ 你需要知道用戶多數(shù)會(huì)在怎樣的環(huán)境下以怎樣的方式使用客戶端應(yīng)用。對于這個(gè)問題，我們通常有個(gè)誤解，就是覺得用戶都會(huì)在很忙很趕、無法集中注意力的情況下使用應(yīng)用。其實(shí)這只是實(shí)際情況的一部分，“移動(dòng)應(yīng)用”并非只在移動(dòng)的狀態(tài)下被使用;很多時(shí)候，人們會(huì)在沙發(fā)上、在廚房中、在機(jī)場候機(jī)時(shí)進(jìn)行操作。在這些場景里，用戶擁有足夠多的操作時(shí)間，注意力也可以非常集中。另外，移動(dòng)設(shè)備在很多方面的功能是超越桌面計(jì)算機(jī)的，譬如GPS、內(nèi)置麥克風(fēng)及攝像頭、觸控、陀螺儀、羅盤等;基于這些功能打造的不同類型的客戶端應(yīng)用，它們所對應(yīng)的使用場景也各有不同。
不要過于自信的假設(shè)用戶的意圖。移動(dòng)應(yīng)用未必代表功能的簡化，當(dāng)你告訴自己“用戶并不需要在移動(dòng)版本中使用這個(gè)功能”時(shí)，你也許是錯(cuò)的?；貞浺幌履闶欠裼羞@樣的經(jīng)歷：在移動(dòng)設(shè)備的瀏覽器中打開一個(gè)你所熟悉的網(wǎng)站，卻發(fā)現(xiàn)頁面跳轉(zhuǎn)到了所謂的移動(dòng)版本，不僅在視覺和操作上與你的習(xí)慣不符，更糟的是也許它所簡化掉的功能正是你所需要的。雖然用戶正在使用小屏幕設(shè)備，但這不代表他們需要獲取的信息、需要使用的功能變少了。
我想說的是，我相信在多數(shù)情況下，無論移動(dòng)應(yīng)用還是所謂的移動(dòng)版頁面，它們都應(yīng)該與桌面版的網(wǎng)站及產(chǎn)品具有相似的內(nèi)容與功能。當(dāng)然，正如我們在前面提到的，在呈現(xiàn)及交互方式等方面，它們需要基于設(shè)備自身的特點(diǎn)而區(qū)別對待，但在內(nèi)容方面應(yīng)當(dāng)盡可能保持一致。有些時(shí)候，移動(dòng)應(yīng)用甚至需要做的更多，拿亞馬遜(Amazon)舉例子，他們的移動(dòng)客戶端應(yīng)用還具有條碼掃描功能;這是充分利用移動(dòng)設(shè)備特有功能的典型案例。
從網(wǎng)站移動(dòng)化這個(gè)角度來說，作為Web設(shè)計(jì)和開發(fā)人員，需要把思路鍛煉的更加具有彈性。在過去超過15年的時(shí)間里，我們只是為桌面瀏覽器設(shè)計(jì)網(wǎng)站。真正的Web設(shè)計(jì)不該是這樣的，它應(yīng)該中立于平臺(tái)之間的差異，在任何設(shè)備、任何尺寸的屏幕中都保證可訪問性及可用性。
當(dāng)然，在移動(dòng)設(shè)備大規(guī)模普及之前，我們確實(shí)很難看到這一點(diǎn);現(xiàn)在，我們開始了解到自己的網(wǎng)站和產(chǎn)品會(huì)被各種類型的設(shè)備訪問及使用。這并不是說我們要為所有類型的設(shè)備都單獨(dú)打造一個(gè)版本——真正需要的是讓網(wǎng)站有足夠的適應(yīng)性和響應(yīng)性。
關(guān)于響應(yīng)式Web設(shè)計(jì)，可以參考我們之前的兩篇文章：“什么是響應(yīng)式Web設(shè)計(jì)?怎樣進(jìn)行?” 以及 “通過CSS3 Media Query實(shí)現(xiàn)響應(yīng)式Web設(shè)計(jì)”。
Robin Nixon (Web開發(fā)人員、科技文章作者，著有HTML5 for iOS and Android: A beginner's Guide一書)
在我看來，對于傳統(tǒng)Web設(shè)計(jì)及開發(fā)人員來說，進(jìn)行擴(kuò)展或轉(zhuǎn)型的***入門方式，就是保持手頭技術(shù)的先進(jìn)性，包括HTML(5)、CSS(3)和JavaScript;目前，將Web App整合成為原生客戶端應(yīng)用的解決方案正在日趨成熟，要實(shí)現(xiàn)產(chǎn)品的移動(dòng)應(yīng)用化，我們并不一定需要花時(shí)間學(xué)會(huì)那些復(fù)雜的編程語言，比如面向?qū)ο驝語言、JAVA、.NET等。只要你擁有足夠扎實(shí)的前端設(shè)計(jì)和開發(fā)能力，你就可以很輕松的創(chuàng)建Web App。
Aaron Maxwell (Mobile Web Up創(chuàng)始人)
從設(shè)計(jì)的角度講，多數(shù)概念和技能依然適用。作為一名設(shè)計(jì)師，你要清楚自己希望用戶在使用移動(dòng)應(yīng)用的過程中做出怎樣的行為，你希望自己的產(chǎn)品能夠提供怎樣的用戶體驗(yàn)。這種說法雖然有些務(wù)虛，但是將注意力集中在這些問題上并延伸思考下去，確實(shí)是一個(gè)良好的開端。
菜單是一種可以帶來高效率的UI組件，除非你提供的菜單項(xiàng)過多。試著以逐層滑入作為呈現(xiàn)方式，將菜單項(xiàng)以合理的繼承關(guān)系組織起來，確保每層里面的菜單項(xiàng)不要過多。另外，標(biāo)簽(tab)形式的導(dǎo)航也是移動(dòng)應(yīng)用中的重要元素。
和傳統(tǒng)Web頁面一樣，移動(dòng)應(yīng)用界面中的留白也是一門學(xué)問。怎樣使用留白來表達(dá)視覺元素之間的關(guān)聯(lián)及分組關(guān)系，是需要認(rèn)真琢磨和嘗試的。尤其受移動(dòng)設(shè)備屏幕的可視區(qū)域尺寸所限，在對元素之間距離的控制方面，我們并沒有太多像素可用，所以對像素級(jí)細(xì)節(jié)的把握能力就顯得越發(fā)重要了。
要記得在適當(dāng)?shù)臅r(shí)候舍棄一些元素。比如，在設(shè)置菜單中，每添加一個(gè)菜單項(xiàng)都會(huì)增加操作的復(fù)雜度，使用戶多花費(fèi)一份時(shí)間和注意力在他們未必需要的功能里面。對于你的產(chǎn)品所涉及到的使用場景，要做到充分的了解，并在此基礎(chǔ)上判斷功能元素的優(yōu)先級(jí)，做好取舍。
Sarah Lynn (Web設(shè)計(jì)師、創(chuàng)意設(shè)計(jì)師)
在向移動(dòng)領(lǐng)域轉(zhuǎn)型這方面，我個(gè)人認(rèn)為最棒的、最切實(shí)可行的入門方式，就是研究學(xué)習(xí)市面上的各種移動(dòng)應(yīng)用。觀察它們，分析它們的功能，學(xué)習(xí)它們對原生控件的利用方式;去實(shí)際使用這些應(yīng)用，熟悉并理解各種控件的交互方式，并將不同的應(yīng)用加以對比。另外，不少公司和團(tuán)隊(duì)都做過大范圍的用戶研究，你可以通過他們的研究報(bào)告學(xué)到很多東西，尤其是在用戶體驗(yàn)等方面。
另外，有些不錯(cuò)的書也可以幫助你入門。我最推薦的一本，是Suzanne Ginsburg的Designing the iPhone User Experience(iPhone應(yīng)用的用戶體驗(yàn)設(shè)計(jì))。
有些工作需要花時(shí)間和心思去執(zhí)行，比如，要學(xué)會(huì)獲取用戶的反饋，另外一點(diǎn)是在進(jìn)入實(shí)際設(shè)計(jì)開發(fā)流程之前，做好充分的計(jì)劃工作;在初期可以制作紙質(zhì)原型，并盡早與用戶或有經(jīng)驗(yàn)的移動(dòng)應(yīng)用設(shè)計(jì)開發(fā)人員進(jìn)行交流。
從設(shè)計(jì)的角度講，移動(dòng)客戶端應(yīng)用與傳統(tǒng)網(wǎng)站頁面之間的主要區(qū)別在哪里?
Sarah Lynn
我認(rèn)為***的區(qū)別還是在于交互設(shè)計(jì)方面。
比起傳統(tǒng)的Web設(shè)計(jì)，你要考慮的東西有很多不同，比如移動(dòng)設(shè)備的屏幕尺寸、不同系統(tǒng)平臺(tái)之間的差異、使用場景和用戶習(xí)慣等。移動(dòng)應(yīng)用的使用場景其實(shí)有很多，包括最常見的在“移動(dòng)”中使用;另外一個(gè)常見的但是往往被忽視的場景，就是用戶身處穩(wěn)定的環(huán)境中，但因?yàn)闆]有條件或懶于使用臺(tái)式機(jī)或筆記本，所以使用移動(dòng)設(shè)備應(yīng)用代替執(zhí)行。所以，要清楚你的應(yīng)用最適宜的使用場景，針對這些場景中的用戶習(xí)慣進(jìn)行相應(yīng)的設(shè)計(jì)。以目標(biāo)用戶為中心，這個(gè)原則無論對移動(dòng)應(yīng)用設(shè)計(jì)還是網(wǎng)站頁面設(shè)計(jì)，都是必須貫徹的。
從傳統(tǒng)Web向移動(dòng)應(yīng)用轉(zhuǎn)型的過程里，怎樣很自然的把設(shè)計(jì)對象想的更小更彈性，這是個(gè)不小的挑戰(zhàn)。屏幕定向也是必須考慮的問題，你必須讓你的應(yīng)用在橫豎兩種模式下都可以很好的工作，并充分發(fā)揮每種定向方式的優(yōu)勢。
在入門階段，建議首先選定一個(gè)平臺(tái)，把它的優(yōu)點(diǎn)和缺點(diǎn)都吃透，對該平臺(tái)的設(shè)備可以提供的原生功能做到充分了解。做選擇時(shí)需要考慮的因素是多方面的，包括對自己的應(yīng)用所需提供的功能的充分規(guī)劃，以及對目標(biāo)用戶群的研究等。
#p#
怎樣提升移動(dòng)客戶端應(yīng)用的用戶體驗(yàn)?設(shè)計(jì)師需要特別注意哪些?
Mike Gualtieri (精算分析師，報(bào)告書Mobile App Design Best Practices的作者)
相比于普通的Web站點(diǎn)，用戶對移動(dòng)應(yīng)用的期望值更高。蘋果的iPhone等產(chǎn)品為移動(dòng)應(yīng)用樹立了很高的威望，尤其是在設(shè)計(jì)方面;多點(diǎn)觸摸和手勢等功能為移動(dòng)應(yīng)用帶來了全新的革命性的交互方式。想要在移動(dòng)應(yīng)用中實(shí)現(xiàn)優(yōu)秀的用戶體驗(yàn)設(shè)計(jì)，你必須對用戶有充分的了解，甚至超過他們對自身的了解。傳統(tǒng)的用戶研究方式仍可以有效的幫助我們創(chuàng)建人物角色，了解他們的實(shí)際需求、對應(yīng)用的使用場景等。
通常情況下，對于移動(dòng)應(yīng)用，設(shè)計(jì)師要盡量考慮到以下5點(diǎn)因素，以指導(dǎo)交互和視覺設(shè)計(jì)流程：
◆ 地點(diǎn)：用戶會(huì)在任何地方使用移動(dòng)應(yīng)用。
◆ 移動(dòng)：用戶會(huì)在移動(dòng)的狀態(tài)下使用應(yīng)用，比如走路、慢跑，或是在汽車等交通工具里。
◆ 即時(shí)：用戶會(huì)隨時(shí)拿出設(shè)備使用應(yīng)用。
◆ 偏好：有條件的情況下，用戶會(huì)根據(jù)不同的需求使用不同的移動(dòng)設(shè)備;有些用戶會(huì)對設(shè)備產(chǎn)生數(shù)碼依賴感，有些則是根據(jù)實(shí)際需求偶爾使用，情況因人而異。
◆ 設(shè)備：移動(dòng)設(shè)備只是個(gè)籠統(tǒng)的概念，對于某些應(yīng)用，必須全面的考慮到各種設(shè)備，比如智能手機(jī)、平板電腦、電子閱讀器等。
J.D.Biersdorfer (科技產(chǎn)品記者，著有Best iPhone Apps)
在寫B(tài)est iPhone Apps的過程里，我觀察并嘗試了400到500種iPhone應(yīng)用，總結(jié)下來，我認(rèn)為，能夠帶來很好的用戶體驗(yàn)的，多數(shù)是那些針對移動(dòng)設(shè)備特性而在視覺與交互方式等方面專門進(jìn)行打造的應(yīng)用。而那些很明顯在沿用傳統(tǒng)Web設(shè)計(jì)思路的、對屏幕尺寸和觸控操作方式都缺乏考慮的應(yīng)用，無論是元素的視覺風(fēng)格，還是布局的組織、空間的控制等方面，多數(shù)會(huì)產(chǎn)生不盡如人意，甚至是很糟的體驗(yàn)。
原文：http://beforweb.com/node/14/page/0/2
【編輯推薦】
