【編者按】本文由@淘寶UED團(tuán)隊(duì)所撰。隨著智能手機(jī)的產(chǎn)生，人們對它們的使用時間與粘性迅速加大，移動互聯(lián)網(wǎng)的發(fā)展越來越迅猛，越來越多的PC端產(chǎn)品開始把注意力集中在轉(zhuǎn)移到方寸之間的屏幕之上時，有如潮水般洶涌。

移動互聯(lián)網(wǎng)的前景堪好。我們需要的就是適應(yīng)在移動平臺設(shè)計(jì)一個好的APP，以此獲得自己的席位。

當(dāng)下的移動互聯(lián)網(wǎng)產(chǎn)業(yè)，已經(jīng)從單純的以實(shí)現(xiàn)單一功能為主，到平臺的轉(zhuǎn)移，再到各個APP之間的產(chǎn)業(yè)鏈的形成，還有廣告植入的各種運(yùn)營手段產(chǎn)生各種盈利。

如何設(shè)計(jì)出一個好的APP，是我們今天需要介紹的主題。

所謂移動平臺，是指除了不方便搬動的PC機(jī)，所有方便移動和攜帶的電子設(shè)備。不僅僅是我們流行在使用的智能手機(jī)和各種Pad，也同時包含了車載應(yīng)用和各種家庭生活電子產(chǎn)品。

移動平臺的特點(diǎn)：

1、時間碎片化：

移動設(shè)備的方便攜帶，也同時帶來了它瀏覽時間的碎片化。以智能手機(jī)為例：我們通常在短暫的時間里，完成一件任務(wù)或者是進(jìn)行一個娛樂事件。

如散步、坐公交、睡前、午后閑暇、旅行的時候，開始拍照、分享、做筆記、玩游戲、購物，等等。在平均短短5-30分鐘的時間里，思路常常被打斷，手機(jī)常常被拿起放下，高效和輕交互，就成為了移動設(shè)計(jì)的特點(diǎn)。

2、手勢的應(yīng)用：

?

移動觸屏的產(chǎn)生，同時也帶來了各種手勢的配搭。這些手勢的應(yīng)用，相比于鍵盤、鼠標(biāo)，能更加快速做出響應(yīng)，并且降低學(xué)習(xí)成本，更加直觀地進(jìn)行人機(jī)交流。

但觸摸相比鼠標(biāo)，卻無法達(dá)到高度的精準(zhǔn)，也無法出現(xiàn)像網(wǎng)頁中的鼠標(biāo)hover、懸停等的效果。東西方人的指尖觸碰面積略有不同，但通常，它們合適的點(diǎn)擊區(qū)域是在44-44px的范圍里。

3、屏幕的限制：

我們說移動平臺的設(shè)計(jì)，其實(shí)就像是帶著枷鎖跳舞，這個枷鎖不僅是來自各個平臺系統(tǒng)的控件規(guī)范，還有最大的問題就是屏幕空間的有限，加之前面說過的44-44px的點(diǎn)擊區(qū)域，更是需要我們的APP設(shè)計(jì)。

在單個界面的展示，簡潔再扼要，交互輕量再輕量，層級淺顯再淺顯。

如何在有限的屏幕中展現(xiàn)更多的信息。有三個要素：

a. 巧妙地利用工具欄與toolbar的隱藏與浮出，最大程度地展示主題，同時快速的做出交互動作。

b. 合理放置控件布局：盡量把最重要的交互按鈕和信息，放置在第一屏中，這點(diǎn)相信在PC端網(wǎng)頁設(shè)計(jì)中也同樣適用。

c. 有針對性的移植：現(xiàn)在有越來越多的客戶端應(yīng)用，都來自于成熟的網(wǎng)站產(chǎn)品的轉(zhuǎn)移，但網(wǎng)頁所能承載的信息與交互，遠(yuǎn)遠(yuǎn)大于客戶端。于是我們應(yīng)該高度解理產(chǎn)品的核心功能與精神理念，提取最重要的信息模塊，進(jìn)行客戶端的轉(zhuǎn)化移植。

實(shí)例1：flickr

圖片分享是flickr的精神宗旨，在客戶端中，只展現(xiàn)了轉(zhuǎn)發(fā)，拍照，贊，評論，前后瀏覽幾個最能體現(xiàn)產(chǎn)品的功能。而其他類似“感興趣的”“小組”和各種應(yīng)用，在這里就不再做實(shí)現(xiàn)。

4、限制輸入：

我們在使用智能手機(jī)和其他移動設(shè)備的時候，必須在環(huán)境不穩(wěn)定，并且碎片時間里快速地完成任務(wù)，而不像在PC電腦前，沉溺專注地做一件事。

而敲擊鍵盤輸入文字，卻需要花費(fèi)一定的時間精力，在不得已的情況下，用戶并不喜歡在手機(jī)上長時間的敲擊虛擬鍵盤，（各位一定有經(jīng)常按錯鍵的時候吧）所以許多優(yōu)秀的app就會用其他的功能代替鍵盤，比如微信的語音功能。

如上是一款手機(jī)花費(fèi)充值的app，在選擇金額上，它通過用戶利用滑動區(qū)域值，很好地解決了輸入數(shù)字的問題.

5、流量與費(fèi)用的考慮：

移動用戶通常包流量來實(shí)現(xiàn)上網(wǎng)的樂趣，所以我們在設(shè)計(jì)app的時候應(yīng)該同時考慮到流量與耗電的節(jié)約，尤其是合理的圖片展示對流量的影響。

比如weico+的應(yīng)用，最新版節(jié)省了60%的耗電量，無疑是一大賣點(diǎn)。

還有新浪weibo的客戶端，對于圖片的展示，分成feeds小圖、點(diǎn)擊出中圖、再點(diǎn)擊加載詳細(xì)大圖，滿足了各種用戶瀏覽圖片的需要，通過需求細(xì)分來達(dá)到了節(jié)約流量的目的。

設(shè)計(jì)要求：

現(xiàn)在我們要開始著手開始設(shè)計(jì)一個app，說到實(shí)際操刀，該從何入手呢？

首先你要了解自己的產(chǎn)品屬性，它是一個全新的未有任何PC基礎(chǔ)的app，還是移植性的app？

1、全新的app設(shè)計(jì)：

每一個app都有它的精神宗旨。我們在這里給它一個定義叫做：產(chǎn)品定義描述（Application Definition Statement簡稱ADS），融會貫通，這個概念不僅體現(xiàn)在app的設(shè)計(jì)上，同時也體現(xiàn)在廣告策略案等不同工作領(lǐng)域的形成引導(dǎo)。

合理地給你的產(chǎn)品定義非常重要。首先你要想好，你的產(chǎn)品大致是屬于那種類型的app。

目前市面上的app大致分為3類：

實(shí)用工具型（Utility）：

比如天氣預(yù)報、錄音、計(jì)算器、股票查詢等應(yīng)用。

生產(chǎn)效率型（Productivity）：

這類應(yīng)用主要是解決用戶在極短并且不穩(wěn)定的情況下高效地完成工作任務(wù)，比如印象筆記，mindmeister

沉浸型（Immersive）：

這類應(yīng)用多數(shù)為游戲類，它能讓用戶長時間地沉浸在應(yīng)用上。比如angry-birds

在明確了想要的app的類型之后

舉例：比如今天我們想著手做一款生產(chǎn)效率性的應(yīng)用，它能幫助用戶隨時隨地記錄旅行中的感想與記錄，并且實(shí)現(xiàn)不同平臺之間的同步。我們暫時起名叫traveller’s book

接下來要如何應(yīng)用的程序定義呢？你可以嘗試：

a.??? 列舉所有你覺得用戶會喜歡的功能點(diǎn)：

你可以像頭腦風(fēng)暴一樣去盡量羅列你能想到的任務(wù)與創(chuàng)意，不要害怕嫌多，最后它們還會經(jīng)過一場嚴(yán)苛的精簡。以traveller’s book為例，腦袋中的感興趣的任務(wù)可能是：

• 記錄行程
• 訂購機(jī)票
• Chack隨身物品
• 隨心拍攝+分享
• 查找攻略
• 顯示經(jīng)歷的足跡
• 標(biāo)注所在地理位置
• 記錄美食
• ……

b.??? 確定你的目標(biāo)用戶：

你的用戶除了在使用移動設(shè)備，期待精致的圖片，簡潔的交互方式，出色的表現(xiàn)以外， 還具備什么樣的特性呢？以traveller’s book為例，你可以判斷下列描述是否適合你的用戶：

• 喜歡旅游
• 熱愛購物或享受生活感動
• 善于分享
• 希望有經(jīng)歷與人生痕跡
• 寫攻略
• 背包客
• 驢友
• 旅行時間3-5天的度假
• 旅行時間15天以上的旅行
• ……

考慮完這些問題，挑選三條最符合你目標(biāo)用戶的特性：喜歡分享與寫感想，查找路線與攻略，方便訂票（機(jī)票車票與門票）。

c.?? 通過對目標(biāo)用戶的定義篩選功能點(diǎn)：

如果在確定了目標(biāo)用戶的特性后，功能點(diǎn)只剩下寥寥數(shù)條，你就得到了它：偉大的程序應(yīng)該像激光一樣準(zhǔn)確聚焦在用戶想完成的任務(wù)上。

比如說，想想在第一步里你為旅行程序列數(shù)的大量潛在功能點(diǎn)。雖然這些功能點(diǎn)都很有用，但并不意味著每個功能點(diǎn)對用戶同樣有用。最重要的是，第二步中的目標(biāo)用戶對這些功能點(diǎn)的喜愛程度也不一樣。

心里裝著目標(biāo)用戶，再來檢視功能點(diǎn)清單，最后能將程序聚焦在三個功能點(diǎn)上：拍照分享寫記錄，訂各種形成票，獲取位置查找攻略。

現(xiàn)在可以定義你的程序了，精確地概括程序的功能以及目標(biāo)用戶。好的定義應(yīng)該是這樣的：

“一個解決旅途攻略，記錄點(diǎn)滴并線上購票的工具”

d.?? 為設(shè)備而設(shè)計(jì)：

我們知道不同的設(shè)備有不同的系統(tǒng)，不同的系統(tǒng)有不同的原生交互與UI控件，良好合理地利用，能緊密地高度地節(jié)約開發(fā)成本，并且達(dá)到用戶體驗(yàn)一致，讓他們感覺iphone的app的操作習(xí)慣就是應(yīng)該按照iphone自身原有的慣性的。

2、從網(wǎng)頁移植產(chǎn)品：

更多時候當(dāng)我們擁有一個成熟的網(wǎng)頁產(chǎn)品的時候，我們會需要搶占用戶在碎片里的時間，方便他們解決問題。這時候你需要重新考慮給予web的設(shè)計(jì)。

1. 首先你要關(guān)注你的程序，提取重要功能，時時想著ADS，確保你不會因?yàn)檫^多的功能或提取錯了重要功能而使應(yīng)用發(fā)生了方向性的變化。
2. 確保你的應(yīng)用app，能幫助用戶做事，更高效直接地完成任務(wù)，不論是游戲任務(wù)還是工作任務(wù)。
3. 結(jié)合移動設(shè)備的特點(diǎn)，多考慮合適的交互：

合理輕松的觸摸手勢

當(dāng)內(nèi)容展示不下的時候，可以考慮讓用戶翻頁，因?yàn)樵诳蛻舳?，翻頁是一件很輕松完成的動作。

重置主頁圖標(biāo)，也許在web端，兩個功能的按鈕可能相隔很遠(yuǎn)，但在移動平臺中，你需要重新考慮它們的位置產(chǎn)生的關(guān)系。

我們可以看到在“印象筆記”的實(shí)例中，toolbar上始終展現(xiàn)著貫穿整個應(yīng)用的功能：添加事件、查看歷史筆記、標(biāo)簽、同步、以及當(dāng)你筆記過多時候的快速搜索。層級關(guān)系從三級列表層，變成了單層（如過toolbar也算層的話那就是兩層）。

砍掉了不那么重要的功能比如：事件分類、時間提醒、項(xiàng)目合作、還有分享給朋友等。

為不同的平臺而設(shè)計(jì)

最后還不要忘記適應(yīng)不同的設(shè)備平臺。比如返回按鈕，在ios和andriod上的界面都有出現(xiàn)，因?yàn)閕os沒有物理返回鍵，而andriod的設(shè)備平臺雖然有物理返回鍵，但是當(dāng)我們在進(jìn)行一個任務(wù)的時候從屏幕把手指移動到物理鍵上就不是那么順暢了。

而在PLUM的設(shè)備中，應(yīng)用有時候會把返回鍵去掉（PLUM的返回操作是物理鍵向左滑動），是因?yàn)镻LUM的用戶忠實(shí)度和習(xí)慣養(yǎng)成性非常高，第一反應(yīng)就是使用物理鍵，所以這個時候在界面上的返回按鈕就顯得雞肋了。

總而言之，我們必須在最短的時間里，展示出一個應(yīng)用最主要的精神和功能。這樣才能設(shè)計(jì)出你心中預(yù)期又理想的程序。