那些年H5頁面上面踩過的坑

0 評論 15352 瀏覽 53 收藏 7 分鐘

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)建時的例子:

Slice 1

坑位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)品時的例子:

Group 3

坑位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ù)的缺失,所以在頁面上造成極大的不完整感。

Group 4

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)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!