如果你一直以來從事著相對傳統(tǒng)的交互、視覺等方面的Web設(shè)計工作，而如今開始打算擴展視野、提升技能、隨“機”應(yīng)變，做一名移動互聯(lián)網(wǎng)的弄潮兒…那么本文很適合你閱讀。相關(guān)領(lǐng)域中的幾位牛人會在接下來的時間里帶給我們一些很實在的經(jīng)驗之談。全文大致分為三個主題：

• Web設(shè)計師需要學(xué)習(xí)哪些知識和技能，才能進入移動應(yīng)用的設(shè)計和開發(fā)領(lǐng)域？
• 從設(shè)計的角度講，移動客戶端應(yīng)用與傳統(tǒng)網(wǎng)站頁面之間的主要區(qū)別在哪里？
• 怎樣提升移動客戶端應(yīng)用的用戶體驗？設(shè)計師需要特別注意哪些？

開始進入正題?，F(xiàn)如今，到處都有人在談?wù)撘苿討?yīng)用方面的話題，從視覺外觀到交互體驗，這個那個的不亦樂乎。實際的統(tǒng)計數(shù)字也是蠻驚人的。最近，一份來自Flurry的研究報告顯示，用戶(美國地區(qū))每天使用移動應(yīng)用的時間，平均下來是81分鐘，已經(jīng)超過了平均74分鐘的上網(wǎng)時間。

在這個世道里，身為用戶體驗設(shè)計相關(guān)從業(yè)人員的你，無論一直以來的主攻方向是交互、視覺還是前端，也許現(xiàn)在都已經(jīng)開始琢磨著探索移動應(yīng)用的相關(guān)領(lǐng)域了。

本文中，我們將從三個主要問題入手，與幾位業(yè)內(nèi)專家進行探討，看看他們在“轉(zhuǎn)型”方面有哪些看法和建議。

Web設(shè)計師需要學(xué)習(xí)哪些知識和技能，才能進入移動應(yīng)用的設(shè)計和開發(fā)領(lǐng)域？

Josh Clark?(設(shè)計師、開發(fā)人員，著有《觸動人心 – 設(shè)計優(yōu)秀的iPhone應(yīng)用》一書，譯者老包)

說到正經(jīng)八本的設(shè)計技術(shù)能力，在入門階段其實沒太多新東西需要學(xué)。我們完全可以使用已經(jīng)輕車熟路的HTML、CSS和 JavaScript創(chuàng)建出用戶界面非常優(yōu)秀的客戶端應(yīng)用。別誤會，我不是在談?wù)揥eb App形式(什么是Web App？請參考我們之前關(guān)于網(wǎng)站移動化方法的文章)， 我是指所謂的“混合型應(yīng)用(hybrid apps)”，這是一種將基于HTML等前端技術(shù)實現(xiàn)的用戶界面搭載在原生客戶端上的方式，相當于為Web App穿上了原生客戶端的外衣，并放到App Store當中。對于希望轉(zhuǎn)型的傳統(tǒng)Web設(shè)計和開發(fā)人員，這種方式是個不錯的起點。

關(guān)于“混合型應(yīng)用”，Jonathan Stark寫了兩本很棒的書，分別是《構(gòu)建iPhone企業(yè)級應(yīng)用—基于HTML, CSS 和JavaScript》以及《使用HTML、CSS和JavaScript開發(fā)Android程序》，書中展示了怎樣使用開源框架PhoneGap創(chuàng)建這種混合形式的客戶端應(yīng)用。

作 為入門是不錯，但混合型應(yīng)用在太多方面無法與原生客戶端應(yīng)用相提并論。如果你想打造在視覺及動畫效果等方面都更加原汁原味的、特別是需要發(fā)揮設(shè)備硬件本身 各種功能的應(yīng)用的話，原生客戶端應(yīng)用仍然是不二之選。這就意味著你需要學(xué)習(xí)使用面向?qū)ο驝語言(Objective-C)去寫iOS應(yīng)用，或是使用 JAVA來打造Android版本。這些都是實實在在的編程語言，對于我們這樣的Web設(shè)計相關(guān)人員來說，學(xué)習(xí)的難度會驟增；通常，我們可以與經(jīng)驗豐富的 開發(fā)人員搭檔，由他們將設(shè)計思路和方案通過代碼實現(xiàn)出來。

即使這樣，我們也無需扔掉HTML、CSS、JavaScript或是相關(guān)的Web App前端開發(fā)框架——這些工具可以幫助我們在開發(fā)原生應(yīng)用的過程中創(chuàng)建快速原型——無論視覺還是交互方面都相當高保真的快速原型。

說到設(shè)計工作本身，特別在用戶體驗方面，移動應(yīng)用與傳統(tǒng)網(wǎng)頁之間還是有著顯著差異的。有兩點需要特別注意：人機交互方式與使用場景。

• 對于移動設(shè)備來說，你需要面對和解決的交互設(shè)計方面的問題會有很多，和以往不同，你現(xiàn)在是在為手指做設(shè)計。你必須考慮的一個問題是，怎樣的頁面元素布局可 以讓拇指自由的操作并充分的休息。另外，當用戶在進行操作時，界面的一部分必然會被拇指遮擋住，所以要盡量保證控制元件的布局不會干擾到實際內(nèi)容。類似這 樣的問題還有很多，多數(shù)可以歸納到“舒適度”與“可視性”這兩方面。這也是多數(shù)觸屏智能手機會將主要控制元件或?qū)Ш揭活惙旁谄聊坏撞康脑颉@些與傳 統(tǒng)Web設(shè)計的習(xí)慣正好相反。
• 你需要知道用戶多數(shù)會在怎樣的環(huán)境下以怎樣的方式使用客戶端應(yīng)用。對于這個問題，我們通常有個誤解，就是覺得用戶都會在很忙很趕、無法集中注意力的情況下 使用應(yīng)用。其實這只是實際情況的一部分，“移動應(yīng)用”并非只在移動的狀態(tài)下被使用；很多時候，人們會在沙發(fā)上、在廚房中、在機場候機時進行操作。在這些場 景里，用戶擁有足夠多的操作時間，注意力也可以非常集中。另外，移動設(shè)備在很多方面的功能是超越桌面計算機的，譬如GPS、內(nèi)置麥克風(fēng)及攝像頭、觸控、陀 螺儀、羅盤等；基于這些功能打造的不同類型的客戶端應(yīng)用，它們所對應(yīng)的使用場景也各有不同。

不 要過于自信的假設(shè)用戶的意圖。移動應(yīng)用未必代表功能的簡化，當你告訴自己“用戶并不需要在移動版本中使用這個功能”時，你也許是錯的?；貞浺幌履闶欠裼羞@ 樣的經(jīng)歷：在移動設(shè)備的瀏覽器中打開一個你所熟悉的網(wǎng)站，卻發(fā)現(xiàn)頁面跳轉(zhuǎn)到了所謂的移動版本，不僅在視覺和操作上與你的習(xí)慣不符，更糟的是也許它所簡化掉 的功能正是你所需要的。雖然用戶正在使用小屏幕設(shè)備，但這不代表他們需要獲取的信息、需要使用的功能變少了。

我 想說的是，我相信在多數(shù)情況下，無論移動應(yīng)用還是所謂的移動版頁面，它們都應(yīng)該與桌面版的網(wǎng)站及產(chǎn)品具有相似的內(nèi)容與功能。當然，正如我們在前面提到的， 在呈現(xiàn)及交互方式等方面，它們需要基于設(shè)備自身的特點而區(qū)別對待，但在內(nèi)容方面應(yīng)當盡可能保持一致。有些時候，移動應(yīng)用甚至需要做的更多，拿亞馬遜 (Amazon)舉例子，他們的移動客戶端應(yīng)用還具有條碼掃描功能；這是充分利用移動設(shè)備特有功能的典型案例。

從網(wǎng)站移動化這個角度來說，作為Web設(shè)計和開發(fā)人員，需要把思路鍛煉的更加具有彈性。在過去超過15年的時間里，我們只是為桌面瀏覽器設(shè)計網(wǎng)站。真正的Web設(shè)計不該是這樣的，它應(yīng)該中立于平臺之間的差異，在任何設(shè)備、任何尺寸的屏幕中都保證可訪問性及可用性。

當然，在移動設(shè)備大規(guī)模普及之前，我們確實很難看到這一點；現(xiàn)在，我們開始了解到自己的網(wǎng)站和產(chǎn)品會被各種類型的設(shè)備訪問及使用。這并不是說我們要為所有類型的設(shè)備都單獨打造一個版本——真正需要的是讓網(wǎng)站有足夠的適應(yīng)性和響應(yīng)性。

關(guān)于響應(yīng)式Web設(shè)計，可以參考我們之前的兩篇文章：“什么是響應(yīng)式Web設(shè)計？怎樣進行？” 以及 “通過CSS3 Media Query實現(xiàn)響應(yīng)式Web設(shè)計”。

Robin Nixon?(Web開發(fā)人員、科技文章作者，著有HTML5 for iOS and Android: A beginner’s Guide一書)

在我看來，對于傳統(tǒng)Web設(shè)計及開發(fā)人員來說，進行擴展或轉(zhuǎn)型的最佳入門方式，就是保持手頭技術(shù)的先進性，包括HTML(5)、CSS(3)和 JavaScript；目前，將Web App整合成為原生客戶端應(yīng)用的解決方案正在日趨成熟，要實現(xiàn)產(chǎn)品的移動應(yīng)用化，我們并不一定需要花時間學(xué)會那些復(fù)雜的編程語言，比如面向?qū)ο驝語言、 JAVA、.NET等。只要你擁有足夠扎實的前端設(shè)計和開發(fā)能力，你就可以很輕松的創(chuàng)建Web App。

Aaron Maxwell?(Mobile Web Up創(chuàng)始人)

從設(shè)計的角度講，多數(shù)概念和技能依然適用。作為一名設(shè)計師，你要清楚自己希望用戶在使用移動應(yīng)用的過程中做出怎樣的行為，你希望自己的產(chǎn)品能夠提供怎樣的用戶體驗。這種說法雖然有些務(wù)虛，但是將注意力集中在這些問題上并延伸思考下去，確實是一個良好的開端。

菜單是一種可以帶來高效率的UI組件，除非你提供的菜單項過多。試著以逐層滑入作為呈現(xiàn)方式，將菜單項以合理的繼承關(guān)系組織起來，確保每層里面的菜單項不要過多。另外，標簽(tab)形式的導(dǎo)航也是移動應(yīng)用中的重要元素。

和 傳統(tǒng)Web頁面一樣，移動應(yīng)用界面中的留白也是一門學(xué)問。怎樣使用留白來表達視覺元素之間的關(guān)聯(lián)及分組關(guān)系，是需要認真琢磨和嘗試的。尤其受移動設(shè)備屏幕 的可視區(qū)域尺寸所限，在對元素之間距離的控制方面，我們并沒有太多像素可用，所以對像素級細節(jié)的把握能力就顯得越發(fā)重要了。

要記得在適當?shù)臅r候舍棄一些元素。比如，在設(shè)置菜單中，每添加一個菜單項都會增加操作的復(fù)雜度，使用戶多花費一份時間和注意力在他們未必需要的功能里面。對于你的產(chǎn)品所涉及到的使用場景，要做到充分的了解，并在此基礎(chǔ)上判斷功能元素的優(yōu)先級，做好取舍。

Sarah Lynn?(Web設(shè)計師、創(chuàng)意設(shè)計師)

在向移動領(lǐng)域轉(zhuǎn)型這方面，我個人認為最棒的、最切實可行的入門方式，就是研究學(xué)習(xí)市面上的各種移動應(yīng)用。觀察它們，分析它們的功能，學(xué)習(xí)它們對原生 控件的利用方式；去實際使用這些應(yīng)用，熟悉并理解各種控件的交互方式，并將不同的應(yīng)用加以對比。另外，不少公司和團隊都做過大范圍的用戶研究，你可以通過 他們的研究報告學(xué)到很多東西，尤其是在用戶體驗等方面。

另外，有些不錯的書也可以幫助你入門。我最推薦的一本，是Suzanne Ginsburg的Designing the iPhone User Experience(iPhone應(yīng)用的用戶體驗設(shè)計)。

有些工作需要花時間和心思去執(zhí)行，比如，要學(xué)會獲取用戶的反饋，另外一點是在進入實際設(shè)計開發(fā)流程之前，做好充分的計劃工作；在初期可以制作紙質(zhì)原型，并盡早與用戶或有經(jīng)驗的移動應(yīng)用設(shè)計開發(fā)人員進行交流。

從設(shè)計的角度講，移動客戶端應(yīng)用與傳統(tǒng)網(wǎng)站頁面之間的主要區(qū)別在哪里？

Sarah Lynn

我認為最大的區(qū)別還是在于交互設(shè)計方面。

比起傳統(tǒng)的Web設(shè)計，你要考慮的東西有很多不同，比如移動設(shè)備的屏幕尺寸、不同系統(tǒng)平臺之 間的差異、使用場景和用戶習(xí)慣等。移動應(yīng)用的使用場景其實有很多，包括最常見的在“移動”中使用；另外一個常見的但是往往被忽視的場景，就是用戶身處穩(wěn)定 的環(huán)境中，但因為沒有條件或懶于使用臺式機或筆記本，所以使用移動設(shè)備應(yīng)用代替執(zhí)行。所以，要清楚你的應(yīng)用最適宜的使用場景，針對這些場景中的用戶習(xí)慣進 行相應(yīng)的設(shè)計。以目標用戶為中心，這個原則無論對移動應(yīng)用設(shè)計還是網(wǎng)站頁面設(shè)計，都是必須貫徹的。

從傳統(tǒng)Web向移動應(yīng)用轉(zhuǎn)型的過程里，怎樣很自然的把設(shè)計對象想的更小更彈性，這是個不小的挑戰(zhàn)。屏幕定向也是必須考慮的問題，你必須讓你的應(yīng)用在橫豎兩種模式下都可以很好的工作，并充分發(fā)揮每種定向方式的優(yōu)勢。

在入門階段，建議首先選定一個平臺，把它的優(yōu)點和缺點都吃透，對該平臺的設(shè)備可以提供的原生功能做到充分了解。做選擇時需要考慮的因素是多方面的，包括對自己的應(yīng)用所需提供的功能的充分規(guī)劃，以及對目標用戶群的研究等。

怎樣提升移動客戶端應(yīng)用的用戶體驗？設(shè)計師需要特別注意哪些？

Mike Gualtieri?(精算分析師，報告書Mobile App Design Best Practices的作者)

相比于普通的Web站點，用戶對移動應(yīng)用的期望值更高。蘋果的iPhone等產(chǎn)品為移動應(yīng)用樹立了很高的威望，尤其是在設(shè)計方面；多點觸摸和手勢等 功能為移動應(yīng)用帶來了全新的革命性的交互方式。想要在移動應(yīng)用中實現(xiàn)優(yōu)秀的用戶體驗設(shè)計，你必須對用戶有充分的了解，甚至超過他們對自身的了解。傳統(tǒng)的用 戶研究方式仍可以有效的幫助我們創(chuàng)建人物角色，了解他們的實際需求、對應(yīng)用的使用場景等。

通常情況下，對于移動應(yīng)用，設(shè)計師要盡量考慮到以下5點因素，以指導(dǎo)交互和視覺設(shè)計流程：

• 地點：用戶會在任何地方使用移動應(yīng)用。
• 移動：用戶會在移動的狀態(tài)下使用應(yīng)用，比如走路、慢跑，或是在汽車等交通工具里。
• 即時：用戶會隨時拿出設(shè)備使用應(yīng)用。
• 偏好：有條件的情況下，用戶會根據(jù)不同的需求使用不同的移動設(shè)備；有些用戶會對設(shè)備產(chǎn)生數(shù)碼依賴感，有些則是根據(jù)實際需求偶爾使用，情況因人而異。
• 設(shè)備：移動設(shè)備只是個籠統(tǒng)的概念，對于某些應(yīng)用，必須全面的考慮到各種設(shè)備，比如智能手機、平板電腦、電子閱讀器等。

J.D.Biersdorfer?(科技產(chǎn)品記者，著有Best iPhone Apps)

在寫B(tài)est iPhone Apps的過程里，我觀察并嘗試了400到500種iPhone應(yīng)用，總結(jié)下來，我認為，能夠帶來很好的用戶體驗的，多數(shù)是那些針對移動設(shè)備特性而在視覺 與交互方式等方面專門進行打造的應(yīng)用。而那些很明顯在沿用傳統(tǒng)Web設(shè)計思路的、對屏幕尺寸和觸控操作方式都缺乏考慮的應(yīng)用，無論是元素的視覺風(fēng)格，還是 布局的組織、空間的控制等方面，多數(shù)會產(chǎn)生不盡如人意，甚至是很糟的體驗。

來源：源地址：http://beforweb.com/node/14