起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識移動平臺上的產品設計
【編者按】本文由@淘寶UED團隊所撰。隨著智能手機的產生，人們對它們的使用時間與粘性迅速加大，移動互聯網的發展越來越迅猛，越來越多的PC端產品開始把注意力集中在轉移到方寸之間的屏幕之上時，有如潮水般洶涌。
移動互聯網的前景堪好。我們需要的就是適應在移動平臺設計一個好的APP，以此獲得自己的席位。
當下的移動互聯網產業，已經從單純的以實現單一功能為主，到平臺的轉移，再到各個APP之間的產業鏈的形成，還有廣告植入的各種運營手段產生各種盈利。
如何設計出一個好的APP，是我們今天需要介紹的主題。
所謂移動平臺，是指除了不方便搬動的PC機，所有方便移動和攜帶的電子設備。不僅僅是我們流行在使用的智能手機和各種Pad，也同時包含了車載應用和各種家庭生活電子產品。
移動平臺的特點：
1、時間碎片化：
移動設備的方便攜帶，也同時帶來了它瀏覽時間的碎片化。以智能手機為例：我們通常在短暫的時間里，完成一件任務或者是進行一個娛樂事件。
如散步、坐公交、睡前、午后閑暇、旅行的時候，開始拍照、分享、做筆記、玩游戲、購物，等等。在平均短短5-30分鐘的時間里，思路常常被打斷，手機常常被拿起放下，高效和輕交互，就成為了移動設計的特點。
2、手勢的應用：
?
移動觸屏的產生，同時也帶來了各種手勢的配搭。這些手勢的應用，相比于鍵盤、鼠標，能更加快速做出響應，并且降低學習成本，更加直觀地進行人機交流。
但觸摸相比鼠標，卻無法達到高度的精準，也無法出現像網頁中的鼠標hover、懸停等的效果。東西方人的指尖觸碰面積略有不同，但通常，它們合適的點擊區域是在44-44px的范圍里。
3、屏幕的限制：
我們說移動平臺的設計，其實就像是帶著枷鎖跳舞，這個枷鎖不僅是來自各個平臺系統的控件規范，還有最大的問題就是屏幕空間的有限，加之前面說過的44-44px的點擊區域，更是需要我們的APP設計。
在單個界面的展示，簡潔再扼要，交互輕量再輕量，層級淺顯再淺顯。
如何在有限的屏幕中展現更多的信息。有三個要素：
a. 巧妙地利用工具欄與toolbar的隱藏與浮出，最大程度地展示主題，同時快速的做出交互動作。
b. 合理放置控件布局：盡量把最重要的交互按鈕和信息，放置在第一屏中，這點相信在PC端網頁設計中也同樣適用。
c. 有針對性的移植：現在有越來越多的客戶端應用，都來自于成熟的網站產品的轉移，但網頁所能承載的信息與交互，遠遠大于客戶端。于是我們應該高度解理產品的核心功能與精神理念，提取最重要的信息模塊，進行客戶端的轉化移植。
實例1：flickr
圖片分享是flickr的精神宗旨，在客戶端中，只展現了轉發，拍照，贊，評論，前后瀏覽幾個最能體現產品的功能。而其他類似“感興趣的”“小組”和各種應用，在這里就不再做實現。
4、限制輸入：
我們在使用智能手機和其他移動設備的時候，必須在環境不穩定，并且碎片時間里快速地完成任務，而不像在PC電腦前，沉溺專注地做一件事。
而敲擊鍵盤輸入文字，卻需要花費一定的時間精力，在不得已的情況下，用戶并不喜歡在手機上長時間的敲擊虛擬鍵盤，（各位一定有經常按錯鍵的時候吧）所以許多優秀的app就會用其他的功能代替鍵盤，比如微信的語音功能。
如上是一款手機花費充值的app，在選擇金額上，它通過用戶利用滑動區域值，很好地解決了輸入數字的問題.
5、流量與費用的考慮：
移動用戶通常包流量來實現上網的樂趣，所以我們在設計app的時候應該同時考慮到流量與耗電的節約，尤其是合理的圖片展示對流量的影響。
比如weico+的應用，最新版節省了60%的耗電量，無疑是一大賣點。
還有新浪weibo的客戶端，對于圖片的展示，分成feeds小圖、點擊出中圖、再點擊加載詳細大圖，滿足了各種用戶瀏覽圖片的需要，通過需求細分來達到了節約流量的目的。
設計要求：
現在我們要開始著手開始設計一個app，說到實際操刀，該從何入手呢？
首先你要了解自己的產品屬性，它是一個全新的未有任何PC基礎的app，還是移植性的app？
1、全新的app設計：
每一個app都有它的精神宗旨。我們在這里給它一個定義叫做：產品定義描述（Application Definition Statement簡稱ADS），融會貫通，這個概念不僅體現在app的設計上，同時也體現在廣告策略案等不同工作領域的形成引導。
合理地給你的產品定義非常重要。首先你要想好，你的產品大致是屬于那種類型的app。
目前市面上的app大致分為3類：
實用工具型（Utility）：
比如天氣預報、錄音、計算器、股票查詢等應用。
生產效率型（Productivity）：
這類應用主要是解決用戶在極短并且不穩定的情況下高效地完成工作任務，比如印象筆記，mindmeister
沉浸型（Immersive）：
這類應用多數為游戲類，它能讓用戶長時間地沉浸在應用上。比如angry-birds
在明確了想要的app的類型之后
舉例：比如今天我們想著手做一款生產效率性的應用，它能幫助用戶隨時隨地記錄旅行中的感想與記錄，并且實現不同平臺之間的同步。我們暫時起名叫traveller’s book
接下來要如何應用的程序定義呢？你可以嘗試：
a.??? 列舉所有你覺得用戶會喜歡的功能點：
你可以像頭腦風暴一樣去盡量羅列你能想到的任務與創意，不要害怕嫌多，最后它們還會經過一場嚴苛的精簡。以traveller’s book為例，腦袋中的感興趣的任務可能是：
- 記錄行程
- 訂購機票
- Chack隨身物品
- 隨心拍攝+分享
- 查找攻略
- 顯示經歷的足跡
- 標注所在地理位置
- 記錄美食
- ……
b.??? 確定你的目標用戶：
你的用戶除了在使用移動設備，期待精致的圖片，簡潔的交互方式，出色的表現以外， 還具備什么樣的特性呢？以traveller’s book為例，你可以判斷下列描述是否適合你的用戶：
- 喜歡旅游
- 熱愛購物或享受生活感動
- 善于分享
- 希望有經歷與人生痕跡
- 寫攻略
- 背包客
- 驢友
- 旅行時間3-5天的度假
- 旅行時間15天以上的旅行
- ……
考慮完這些問題，挑選三條最符合你目標用戶的特性：喜歡分享與寫感想，查找路線與攻略，方便訂票（機票車票與門票）。
c.?? 通過對目標用戶的定義篩選功能點：
如果在確定了目標用戶的特性后，功能點只剩下寥寥數條，你就得到了它：偉大的程序應該像激光一樣準確聚焦在用戶想完成的任務上。
比如說，想想在第一步里你為旅行程序列數的大量潛在功能點。雖然這些功能點都很有用，但并不意味著每個功能點對用戶同樣有用。最重要的是，第二步中的目標用戶對這些功能點的喜愛程度也不一樣。
心里裝著目標用戶，再來檢視功能點清單，最后能將程序聚焦在三個功能點上：拍照分享寫記錄，訂各種形成票，獲取位置查找攻略。
現在可以定義你的程序了，精確地概括程序的功能以及目標用戶。好的定義應該是這樣的：
“一個解決旅途攻略，記錄點滴并線上購票的工具”
d.?? 為設備而設計：
我們知道不同的設備有不同的系統，不同的系統有不同的原生交互與UI控件，良好合理地利用，能緊密地高度地節約開發成本，并且達到用戶體驗一致，讓他們感覺iphone的app的操作習慣就是應該按照iphone自身原有的慣性的。
2、從網頁移植產品：
更多時候當我們擁有一個成熟的網頁產品的時候，我們會需要搶占用戶在碎片里的時間，方便他們解決問題。這時候你需要重新考慮給予web的設計。
- 首先你要關注你的程序，提取重要功能，時時想著ADS，確保你不會因為過多的功能或提取錯了重要功能而使應用發生了方向性的變化。
- 確保你的應用app，能幫助用戶做事，更高效直接地完成任務，不論是游戲任務還是工作任務。
- 結合移動設備的特點，多考慮合適的交互：
合理輕松的觸摸手勢
當內容展示不下的時候，可以考慮讓用戶翻頁，因為在客戶端，翻頁是一件很輕松完成的動作。
重置主頁圖標，也許在web端，兩個功能的按鈕可能相隔很遠，但在移動平臺中，你需要重新考慮它們的位置產生的關系。
我們可以看到在“印象筆記”的實例中，toolbar上始終展現著貫穿整個應用的功能：添加事件、查看歷史筆記、標簽、同步、以及當你筆記過多時候的快速搜索。層級關系從三級列表層，變成了單層（如過toolbar也算層的話那就是兩層）。
砍掉了不那么重要的功能比如：事件分類、時間提醒、項目合作、還有分享給朋友等。
為不同的平臺而設計
最后還不要忘記適應不同的設備平臺。比如返回按鈕，在ios和andriod上的界面都有出現，因為ios沒有物理返回鍵，而andriod的設備平臺雖然有物理返回鍵，但是當我們在進行一個任務的時候從屏幕把手指移動到物理鍵上就不是那么順暢了。
而在PLUM的設備中，應用有時候會把返回鍵去掉（PLUM的返回操作是物理鍵向左滑動），是因為PLUM的用戶忠實度和習慣養成性非常高，第一反應就是使用物理鍵，所以這個時候在界面上的返回按鈕就顯得雞肋了。
總而言之，我們必須在最短的時間里，展示出一個應用最主要的精神和功能。這樣才能設計出你心中預期又理想的程序。
- 目前還沒評論，等你發揮！
