從Web到移動應用的設計思維轉換

　　從Web到移動應用的設計思維轉換

　　【編者按】本文作者@劉津legene 隨著移動互聯網的快速發展，很多Web產品經理、設計師轉而投身至移動應用領域。看起來非常相關的工作，卻可能給他們帶來了不小的困擾。

　　很多剛剛接觸移動應用的產品經理、設計師依然習慣用Web的思維去做App。張小龍在談微信時就曾經說過：絕不考慮Web形態，一切考慮都基于App。那么，移動應用和Web相比，區別到底在哪里呢?

　　以下是作者以自己在工作中通過血的教訓總結出的幾點內容，在此與大家共享：

　　1、單一且專注

　　創新工場曾推出一款應用叫“布丁愛生活”，里面包含電影、美食等內容，但是推出后一直反響平平。后來這些內容被拆分成不同的應用，反而取得了不俗的成績。這是為什么呢?

　　我認為：

　　第一、移動端的屏幕小，場景不固定，太多的功能會造成層級復雜、操作困難，影響體驗。所以移動端本身不適合太多、太復雜的功能。

　　第二、從場景方面考慮，用戶在相應的場景下，才會想到相應的應用。比如說，用戶在想看電影的時候，可能就會搜素和電影相關的應用，而“愛生活”之類的產品，一般不會主動被搜到。即使用戶看到了，也不知道它是做什么的。所以做移動應用，千萬不要“大而全”。

　　2、細分需求并做到極致

　　陌陌在微信這種強大的競爭對手面前，是怎么生存并壯大起來的?況且微信也可以通過查看附近、搖一搖等方式聯系陌生人。拋開產品定位、營銷等問題，我想對比一下設計方面的區別。

　　打開應用后，在微信界面上，看到的是最近和你聯系過的人，以及它們的留言;而在陌陌上，首先看到的是附近陌生人的照片及個人簽名。

　　點擊微信標簽欄上的“找朋友”，再選中“附近的人”，才能到達如下圖的列表頁面。但很明顯，微信的頭像比陌陌的小很多，信息也不如陌陌豐富。如果你只是單純的想結交陌生人，會選擇哪個應用?

　　因此我的結論是，面對強大的對手，找準一個細分的需求點，把它做到極致，也不是沒有機會(不考慮營銷等其它因素)。

　　3、功能優先級

　　移動應用的使用場景、設備都和Web有巨大的區別。因此移動應用的功能，不僅取決于用戶需求，還要考慮使用場景、設備限制等因素。不要直接移植Web的功能到APP上。

　　比如說優惠券產品，Web端更重視打印功能;而手機端側重于到店展示。

　　微信剛出的時候，很多人覺得奇怪：騰訊已經有了手機QQ，為什么要再做個微信?它們有什么區別?

　　過了一段時間，我發現原先用手機QQ的人都改用微信了。為什么大家覺得在手機上，微信比QQ好用呢?

　　后來有一天我終于有點明白了：

　　手機QQ是Web端功能的移植;而微信的功能更多的考慮了移動應用的特點(語音輸入，通過手機通訊錄、QQ好友等方式添加好友，搖一搖……)

　　所以說，做APP時一定要充分考慮移動應用的場景、設備等特點來設計功能并決定功能優先級，而不是簡單移植Web的功能。

　　4、簡單、易用

　　用戶在使用Web網站時，一般是端坐在大屏幕前，既可以使用鼠標、也可以使用鍵盤;而用戶在使用移動應用時，可能是邊走邊用，也可能是在擁擠而晃動的公車內。因此移動應用的功能一定要簡單，字一定要夠大(字大了可放的內容就更少)，操作一定要簡單(保證可觸面積)……總之四個字：簡單易用。

　　5、尊重平臺特點及設計規范

　　移動應用不像Web端，界面夠大，使用環境夠穩定，即便有不易理解的地方也可以在界面上加各種引導和提示。就算沒有任何提示，用戶還可以自己嘗試。

　　但移動應用的界面小，承載的內容十分有限(Web端一個頁面的內容，移動應用可能要分很多個頁面來展現，頁面跳轉次數高)，使用環境不穩定，操作更困難，如果開發者都按自己的“想象”去設計界面，那后果不堪設想。

　　索性我們有各平臺的設計規范可以參考。設計規范可以更好的保持不同應用的一致性，讓用戶更易理解，減少學習成本，也讓界面看起來更友好。對產品設計者來說，認真研讀規范也是個學習的過程，幫助我們成長的更快。

　　之前有個PM堅決拒絕看各平臺的設計規范，認為產品設計者不應該受此約束，而應該大膽發揮。他設計的東西果然非常“非主流”，用戶使用起來不易理解。我認為即使真的想去打破什么約束，也應該先充分的了解它，然后再在此基礎去做更好的突破。

　　6、“又笨又大”的'UI風格

　　很多之前做Web產品的設計師，初次嘗試移動應用時都容易犯一個錯誤：界面看起來很美觀，但就是不像移動應用的界面，怎么看都有Web的影子在。為什么呢?因為設計師往往傾向于更小一點的字體，這樣可以讓界面看起來更精致，更美觀。

　　但這在移動應用上就行不通了，試想用戶如果在擁擠而晃動劇烈的公車上看密密麻麻的小字，將會多么氣惱。所以這時就需要設計師轉換一下思維了。

　　移動應用的UI風格有什么特點呢?簡單的來說：

　　1. 字一定要夠大，要一目了然

　　2. 布局非常的規整、簡潔、一致性更強，這樣閱覽起來更輕松

　　3. 內容少、顏色少……

　　這些可能都是Web端設計師非常討厭和排斥的東西，但是為了做出專業和易用的產品，一定要及時調整思路。

　　7、獨特的風格&精美的界面

　　雖然移動應用界面看起來“又笨又蠢”，設計師還要受到平臺規范的“束縛”，但這并不妨礙眾多令人驚嘆的移動應用界面的誕生。

　　移動應用界面應該比Web界面看起來更精美，想象一下蘋果或安卓優美的機身，配上一個簡陋粗糙的界面，將是多么煞風景的一件事情。

　　況且在小屏幕上，界面的缺陷更容易被人發覺。這些智能機的高端用戶，會毫不猶豫的帶著嫌棄的表情刪掉你的應用。

　　所以做移動應用的設計師，往往需要更加注意設計細節。當然，這建立在首先理解平臺規范和設計特點的基礎上，在這個基礎上去尋求突破。移動應用其實給了設計師更大的發揮空間。

　　不僅要精美，更要獨特。現在移動應用競爭非常的激烈，獨特的設計更容易讓你的應用脫穎而出。

　　8、其它

　　移動應用還有許多不同于Web端的特點，比如輸入方式、橫屏模式、啟動、加載、手勢、轉場、動畫等，這些就不一一敘述了，大家在設計規范上都可以找到相關內容。

　　總結

　　移動設備便攜、屏幕小、操作不便、但使用場景豐富多變，這些特點都決定了在移動應用上，不適于承載復雜的功能與龐雜的內容。很多時候，我們需要放棄Web端的思維，充分考慮移動設備的特點，專注的思考問題，才能做出更成功的移動應用。

　　最后想說的是，移動應用既不是Web端產品的附屬，也不是Web端產品的復制品，它應該有自己獨特的生命力。不建議Web端產品和客戶端產品由同樣的團隊來負責，這樣難以做出專業且高效的產品。