中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

坑位1:

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

產品舉例：創建／認證／投訴等

注意點：先關閉webview再跳轉到相應的頁面鏈接

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

坑位2:

涉及頁面類型：移植移動端的PC老產品

產品舉例：認證／會員／幫助等

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

大概是09年開始，隨著智能機的普及，整個互聯網圈在產品開發的策略上漸漸有了轉變?！耙苿觾炏取弊鳛橐粋€戰略口號被提了出來。于是，原有的PC端大公司便開始了產品“遷徙”的計劃，大量原有的PC端老產品被移植到移動端。除了影響產品整體結構形態的一些核心功能，大部分舊功能都在第一版app完成后，通過H5的方式加入進去。于是經常出現的情況就是：PC端幾個頁面呈現的內容，我們在移動端就要在幾個頁面里展示出來。美其名曰：雙端體驗一致性…

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

坑位3:

涉及頁面類型：涉及數據的運營活動頁面

產品舉例：年終盤點／年終報告等

注意點：千萬不要輕視數據類頁面的難度

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

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

優化建議：

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

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

More:

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

作者：俞俊偉（微信號yu8656302） 新浪微博交互設計師，交互界新人 2年互聯網產品設計經驗 目前負責微博全站用戶運營產品的優化及日常維護&獨立負責微博股票產品的設計工作

本文由 @俞俊偉 原創發布于人人都是產品經理。未經許可，禁止轉載。