手機客戶端的設計

　　談手機客戶端的設計。接觸才1周，我就敢談～～整理一下思路，為以後鄙視現在的初級階段做個鋪墊。

　　拋開產品本身不談，手機客戶端要從幾個方面綜合考究，才能做出精彩的東西。手機端和WEB端，在很多方面是一致的，都要盡可能的把用戶當成懶漢和笨蛋。在以懶漢和笨蛋的態度對待受眾的基礎上，再考慮不同手機平台用戶的使用場景，讓這種懶和笨發揮的更加貼切，就可以了。

　　如果在WEB端已經有了一個成型且比較穩定的產品，比如某電商平台、某社區，在此基礎上做手機端產品，大致有章可循：

　　理順功能框架——設計交互——確定UI——上手把玩兒

　　1、決定功能及框架

　　首先需要思考一個問題，應該如何決定一個手機客戶端中實現哪些功能?兩個維度：

　　維度一：產品的核心功能和用戶對各功能的使用頻度。

　　維度二：手機用戶的使用場景

　　通過流程說事：

　　根據前提，既然已經有了成熟的PC端產品，和穩定的用戶群，那麼必然可以在當前的PC端使用場景下，淋漓盡致的勾繪出整個產品的功能框架、各個功能末梢的使用頻度。

　　再完美一些，所謂成熟的穩定的PC端產品必然是有其核心價值，滿足了用戶們的核心需求。那麼勾繪出的功能框架和各個功能末梢的使用頻度大小，必然應該與用戶們的需求一一對應，越是靠近核心需求，越是有更高的使用頻度。

　　其實有經驗的產品人應該對自己所做的產品了然於胸，不必勾繪什麼框架，浪費時間。

　　好了，根據眼前的功能框架和使用頻度，決定手機端必須要承載的若干功能，然後依次評價一下，這些功能是否是一個用戶躺在床上、坐在車上、走在路上的時候，非常適合拿著手機完成的功能之一，即套用手機用戶的使用場景。

　　沒有必要必須在這個階段就決定整個手機客戶端的功能框架，前面說的只是一種態度，一種思維模式。按照這種模式走，然後拿出第一期功能方案即可。另外，手機客戶端功能並不是越全面越好。功能全面與界面清楚、功能易用相比，後者優先級更高一些，即，寧願少放一些功能，讓用戶用著爽是第一位的。

　　2、設計交互場景

　　交互設計這個方面，其實沒有什麼好說的。不同平台，有不同的交互習慣和規范，這是必須要遵守的。兩個原則：一是，遵守不同平台的交互習慣和規范，甚至與同類產品的交互設計保持一致;二是，在一的基礎上，與PC端在某些通用頁面保持一致，減少用戶思考成本;三是，，，，沒有三，讓有經驗的交互設計師把關吧。

　　3、UI設計

　　千萬別讓UI的設計蓋過了功能本身，在PC端也是這個原則。UI是為功能服務的，是間接的為用戶體驗服務的。舉一個簡單的例子，新浪微博的WEICO版本和官方版本相比，其UI當然是高出幾籌，但我用了幾分鐘就夠了，因為我真的不想猜底部MENU中每個圖標代表什麼意思。問了身邊的幾個人，都感覺WEICO 不如官方版本好用。再看官方版本的UI，基本上可以說是沒有UI的。這就是功能易用性相比於UI的重要性，尤其在手機端。

　　當然，對於不同的手機端產品，UI的重要性也是不同的。但原則是，UI永遠是為功能服務的。看看例子吧：

　　左邊的新浪微博WEICO版本 VS 右邊的官方版本：

　　1、官方版本右上角放置了與大部分客戶端一致的刷新按鈕。WEICO放了一個拍照~~~

　　2、底部MENU，新浪微博的圖標設計也夠清晰，並且還有文字說明。看WEICO版本的最後一個MENU項，我還以為是核反應堆的水溫呢。

　　3、官方客戶端對圖片做了圓角處理，不知道WEICO為什麼不做，難看。

　　該模仿的要模仿、該啰嗦的要啰嗦，手機屏幕就這麼大點兒的地方，不要兼顧太多東西，也承載不了太多東西，優先照顧易用性。

　　左邊的網易新聞客戶端 和 右邊的周末畫報

　　兩者都屬於有一定內容組織的長篇閱讀類客戶端，所以閱讀體驗，是這個客戶端的核心價值之一。看他們的UI吧，確實異常優秀。尤其右邊這貨，使用起來的感覺簡直甚爽。從五個方面考究這兩款貨的視覺設計：

　　1、圖片處理。如圖~陰影、半透明文字

　　2、區塊渲染。右邊這貨，有些漸變的矩形作為底色。手機客戶端的區塊要異常分明，因為用戶跟產品之間的交流，區塊是最合適的橋梁。讓一個胖子用戶的粗手指去點擊一個文字連接，肯定讓胖子出一身汗，老是點錯。所以交互設計過程中，能用區塊完成的，就用區塊完成。

　　3、圖標及細節。其實MENU中的英文注釋根本沒必要，只是為了裝一些。右邊這貨的MENU和頂部TAB標簽，做的非常細致、非常好看。那邊角、那陰影、那進度條，很考究。

　　4、主題色。手機客戶端的UI，如果沒有太多能力和精力來做，其實是承載不了一個產品品牌的識別作用。主題色可用的地方不多，也就是頂部標題欄、用戶名顏色、標題等重要文字顏色，所以首先還是照顧用戶視覺上的一致性和區分度吧。

　　5、排版設計。尤其是注重閱讀體驗的客戶端，好看的排版是亮點。

　　在一個小屏幕上做文章，空間有限，所以細節更重要，但其實經驗更重要，體驗一堆各種各樣的客戶端，慢慢的也就知道哪些地方用的不舒服、哪些地方做的很貼心。

　　最後，上手把玩兒，然後再反復迭代。

　　原文:http://www.liesong.me/?p=275