1. 程式人生 > >H5頁面互動設計的缺點與解決方案

H5頁面互動設計的缺點與解決方案

來源:世界工廠網線上生態學院 作者:布布_桃子 為什麼說H5現在越來越火,主要是因為H5以其較高的趣味性和良好的互動性受到越來越多使用者的青睞。隨著H5技術的發展,H5的型別和形式也越來越多,帶給人的新奇感也越來越多。H5頁面從一開始只有展示型,發展到現在多樣的互動型別,下面先來給大家說說H5頁面常用的互動型別。 一、互動型別 1、展示型 雖然現在互動型別多種多樣,但是展示型的主導地位還是不容動搖的。H5頁面展示型屬於圖文型,常見的是翻頁,多用於一些產品、功能、活動介紹、總結報告中。除了翻頁以外,還有點選,輸入文字,擦除螢幕,滑動螢幕等,玩法非常豐富。 2、遊戲型 遊戲型也是近非常火熱的一種型別,自“圍住神經貓”之後,H5頁面遊戲型越來越成為企業選擇的營銷方式。H5遊戲以其可愛的畫風、簡單的操作、誘人的獎勵虜獲了許多使用者的點選,通過遊戲,企業不僅達到了營銷推廣的目的,還能夠提高企業在使用者心目中的形象。 3、產品型 產品型和上面兩種型別有所不同,一般來說,H5頁面都是一次性的,這個營銷活動過去了,那麼這個頁面也很少會被點選。但是產品型是是作為一個長期運營的產品存在的,使用者的訪問可能會更固定,比如微信裡的購物頁面等。 H5頁面的互動型別遠不止以上三種,企業在決定使用哪種型別之前,一定要做好全面策劃,考慮到哪種型別更適合該營銷活動,從而選擇正確的型別。 二、缺點及解決方案 1、頁面跳轉費力 頁面跳轉更加費力,不穩定感更強。而且頁面之間的跳轉也不是很流暢,很多時候出現卡頓或卡死現象。 思考點:如何減少跳轉(扁平結構、頁面佈局技巧),增加資料及展示的流暢流程及穩定性(技術) 2、頁面空間小 更小的頁面空間(由於瀏覽器的導航本身佔用一部分螢幕空間),更大的資訊記憶負擔移動裝置的螢幕要小得多。這種如同透過門縫進行的閱讀增加了認知的負擔。 人腦的短期記憶是不穩定的,使用者在滾動螢幕的過程中需要臨時記憶的資訊越多,他們的表現就會越差。 思考點:排版更清晰、資訊更簡練 (可在原生APP基礎上去掉一些豐富、複雜的視覺表現) 。 3、導航不明顯 導航不明顯,原有底部導航消失,有效的導航遇到挑戰等。 思考點:如何有效的提供導航?有哪些形式? 4、互動動態受到限制 互動動態效果受到限制,影響一些頁面場景、邏輯的理解。 思考點:比如登入註冊流程的彈出、完成及異常退出,做好文字提示。 針對以上困境,解決方法總結如下。 首先,從APP到H5版,在產品上,最明顯且核心的: 以下幾點就是目前我們常見的解決方案: 1、精簡功能,只將核心的任務實現,非核心的枝節可考慮刪減。 2、做好新的WebAPP(h5)互動導航. 3、補充從WebAPP(h5) 對 下載原生APP 的引導。 4、減少頁面層級的數量和輸入操作。 5、H5版上只做查詢、瀏覽、顯示結果等操作。