Native app 在資源上花費的巨大成本讓大多數(shù)的公司都選擇了一條相對性價比較高的方式，利用內(nèi)嵌的web view訪問web去做一些相對輕量級的功能——Hybrid App由此產(chǎn)生。

單純從設(shè)計師的角度來講，在所有原生組件都已經(jīng)模塊化的今天，其實設(shè)計原生頁面就像是拼積木一樣，并沒有太多可發(fā)揮的空間。而H5頁面是不是在這方面就好很多呢？也不盡然。作為一名的交互設(shè)計師，1年多來也支持了大大小小不下幾十個項目，其中大多數(shù)都會用H5頁面來承載產(chǎn)品內(nèi)容。不才在這里總結(jié)了一些H5頁面上面踩過的坑，希望能為他人做個提醒和參考，不足之處也望各位大神能告知哈！

坑位1:

涉及頁面類型：流程型頁面

產(chǎn)品舉例：創(chuàng)建／認證／投訴等

注意點：先關(guān)閉webview再跳轉(zhuǎn)到相應(yīng)的頁面鏈接

流程型頁面典型的特點就是會分步通過幾個H5頁面去完成一個較為復(fù)雜的功能。在整個流程的最后一個頁面完成或引導(dǎo)用戶跳出流程的同時，記得讓開發(fā)同學(xué)用參數(shù)控制，先關(guān)閉瀏覽器再跳轉(zhuǎn)到相應(yīng)的頁面鏈接。如果沒有這一步，例如用戶在創(chuàng)建完頁面點返回的時候，會“驚喜”的發(fā)現(xiàn)自己又回到了創(chuàng)建流程中。關(guān)閉瀏覽器再跳轉(zhuǎn)，這個技巧可以用在很多地方，包括不同流程中的H5頁之間的跳轉(zhuǎn)。下面是微博股票組合創(chuàng)建時的例子：

坑位2:

涉及頁面類型：移植移動端的PC老產(chǎn)品

產(chǎn)品舉例：認證／會員／幫助等

注意點：千萬不要一成不變

大概是09年開始，隨著智能機的普及，整個互聯(lián)網(wǎng)圈在產(chǎn)品開發(fā)的策略上漸漸有了轉(zhuǎn)變?！耙苿觾?yōu)先”作為一個戰(zhàn)略口號被提了出來。于是，原有的PC端大公司便開始了產(chǎn)品“遷徙”的計劃，大量原有的PC端老產(chǎn)品被移植到移動端。除了影響產(chǎn)品整體結(jié)構(gòu)形態(tài)的一些核心功能，大部分舊功能都在第一版app完成后，通過H5的方式加入進去。于是經(jīng)常出現(xiàn)的情況就是：PC端幾個頁面呈現(xiàn)的內(nèi)容，我們在移動端就要在幾個頁面里展示出來。美其名曰：雙端體驗一致性…

在這里我們不去討論雙端一致性的問題。我只想說，照搬PC的頁面內(nèi)容很容易造成H5頁面的易用性降低。我甚至有時候會極端的認為，一些老產(chǎn)品可以摒棄現(xiàn)有的功能而為移動端去創(chuàng)造一些新的功能。例如認證功能可以在移動端做一個快速認證入口，幫助功能可以在移動端不做字典式的list，而是做一個語音提問回答的功能等等…這些出發(fā)點，都是基于兩個硬件平臺在底層交互方式的區(qū)別，更少的輸入，更多的輸入方式等等，都是可以去突破的點。下面是淘寶在做雙端幫助產(chǎn)品時的例子：

坑位3:

涉及頁面類型：涉及數(shù)據(jù)的運營活動頁面

產(chǎn)品舉例：年終盤點／年終報告等

注意點：千萬不要輕視數(shù)據(jù)類頁面的難度

記得2015年底，微博做了一個運營活動－叫做我和小伙伴的2015。旨在通過數(shù)據(jù)統(tǒng)計呈現(xiàn)用戶這一年中在微博上的行為，以提高微博用戶的歸屬感。由于微博是一個以關(guān)系為基礎(chǔ)的產(chǎn)品，因此在頁面的展示中不斷的會有用戶的頭像出現(xiàn)，因此頭像陣列就作為整個活動頁面中很重要的元素之一。

其實這些H5活動頁面最大的難點就在于由于用戶數(shù)據(jù)的不同，作為頁面元素，它們在呈現(xiàn)上就會出現(xiàn)極大的差異性，頭像多少，數(shù)字量級高低會極大的影響整體頁面的視覺效果。所以可以總結(jié)的是：在設(shè)計過程中，會根據(jù)數(shù)據(jù)變幻樣式的元素，盡可能的不要作為一個獨立的元素去在畫面中呈現(xiàn)。

優(yōu)化建議：

1. 對于頭像類圖形，盡量精簡樣式，最好只存在有或者沒有的兩種情況。
2. 對于數(shù)字類，盡可能放在一個大的文字段落里，通過固定的文案段落，去減少數(shù)字變化帶來的對視覺的影響。

下面例子中，左邊的第二個活動頁面，因為用戶數(shù)據(jù)的缺失，所以在頁面上造成極大的不完整感。

More:

還有一些細節(jié)，比如H5與客戶端手勢的沖突，H5在不同平臺上分享流程等等都需要設(shè)計師從一開始就去設(shè)計，在這里就不一一展開了。

作者：俞俊偉（微信號yu8656302） 新浪微博交互設(shè)計師，交互界新人 2年互聯(lián)網(wǎng)產(chǎn)品設(shè)計經(jīng)驗 目前負責(zé)微博全站用戶運營產(chǎn)品的優(yōu)化及日常維護&獨立負責(zé)微博股票產(chǎn)品的設(shè)計工作

本文由 @俞俊偉 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。