爲什(shén)麽說H5現在越來(lái)越火，主要是因爲H5以其較高(gāo)的(de)趣味性和(hé)良好的(de)交互性受到越來(lái)越多(duō)用(yòng)戶的(de)青睐。 目前爲數不少的(de)APP應用(yòng)裏面嵌入了(le)H5頁面，今天，思遠(yuǎn)網絡結合自身的(de)一些在APP上面的(de)H5頁面交互設計心得(de)，跟大(dà)家討(tǎo)論下(xià)H5頁面交互設計的(de)四大(dà)缺點與解決方案。 從使用(yòng)場(chǎng)景上，H5頁面的(de)交互使用(yòng)與原生APP相比，缺乏以下(xià)四個(gè)方面的(de)不足： 1、頁面跳轉更加費力，不穩定感更強。而且頁面之間的(de)跳轉也(yě)不是很流暢，很多(duō)時(shí)候出現卡頓或卡死現象。 思考點：如何減少跳轉（扁平結構、頁面布局技巧），增加數據及展示的(de)流暢流程及穩定性（技術）
2、更小的(de)頁面空間（由于浏覽器的(de)導航本身占用(yòng)一部分(fēn)屏幕空間），更大(dà)的(de)信息記憶負擔。 人(rén)腦(nǎo)的(de)短期記憶是不穩定的(de)，用(yòng)戶在滾動屏幕的(de)過程中需要臨時(shí)記憶的(de)信息越多(duō)，他(tā)們的(de)表現就會越差。——《貼心設計：打造高(gāo)可(kě)用(yòng)性的(de)移動産品》 思考點：排版更清晰、信息更簡練 （可(kě)在原生APP基礎上去掉一些豐富、複雜(zá)的(de)視覺表現）
3、導航不明(míng)顯，原有底部導航消失，有效的(de)導航遇到挑戰等。 思考點：如何有效的(de)提供導航？有哪些形式？
4、交互動态效果收到限制，影(yǐng)響一些頁面場(chǎng)景、邏輯的(de)理(lǐ)解。 思考點：比如登錄注冊流程的(de)彈出、完成及異常退出，做(zuò)好文字提示。
針對(duì)以上困境，解決方法總結如下(xià)。首先，從APP到H5版，在産品上，最明(míng)顯且核心的(de)： 以下(xià)三點就是目前我們常見的(de)解決方案： 1、精簡功能，隻将核心的(de)任務實現，非核心的(de)枝節可(kě)考慮删減。 2、做(zuò)好新的(de)WebAPP（h5）交互導航. 3、補充從WebAPP（h5） 對(duì) 下(xià)載原生APP 的(de)引導。 4、減少頁面層級的(de)數量和(hé)輸入操作。 5、H5版上隻做(zuò)查詢、浏覽、顯示結果等操作。 |
