@ChM_CuoreAzzurro :Web App和原生APP同為移動端,很少有時間研究這兩項的交互區別,最近公司做了一次從原生APP到Web App(HTML5 )的移植,故總結一下期間遇到的問題及不同點總結。
想學習交互,先了解下基礎的區別會很有幫助:《超贊!聊聊Web App、Hybrid APP與本地 APP的設計差異》
從使用場景上,Web App用戶面臨比原生APP用戶更嚴峻的問題:
1、頁面跳轉更加費力,不穩定感更強
思考點:如何減少跳轉(扁平結構、頁面布局技巧),增加數據及展示的流暢流程及穩定性(技術)
2、更小的頁面空間(由于瀏覽器的導航本身占用一部分屏幕空間),更大的信息記憶負擔
移動設備的屏幕要小得多。這種如同透過門縫進行的閱讀增加了認知的負擔。人腦的短期記憶是不穩定的,用戶在滾動屏幕的過程中需要臨時記憶的信息越多,他們的表現就會越差。——《貼心設計:打造高可用性的移動產品》
思考點:排版更清晰、信息更簡練 (可在原生APP基礎上去掉一些豐富、復雜的視覺表現)
3、導航不明顯,原有底部導航消失,有效的導航遇到挑戰
思考點:如何有效的提供導航?有哪些形式?
4、交互動態效果收到限制,影響一些頁面場景、邏輯的理解。
思考點:比如登錄注冊流程的彈出、完成及異常退出,做好文字提示。
針對以上困境,解決方法總結如下:
首先,從APP到WAP版,在產品上,最明顯且核心的:
1、精簡功能,只將核心的任務實現,非核心的枝節可考慮刪減。
2、做好新的Web App導航.
3、補充從Web App 對 下載原生APP 的引導。
>>>>> Web App導航怎樣設計?
一、常見的幾種Web APP導航樣式
1.1頂部底部導航的設計:
1.2導航快捷鍵設計:
美團:頂部欄固定位置
淘寶:懸浮圓圈--可展開的按鈕
優酷:非首屏時頁面右側懸浮
二、有效的導航設計
1、基本的快捷導航中包括 返回常用頁面(如 首頁 我的 等)的快捷方式
2、出現深層架構時 及時補充返回重要層級頁面的快捷方式
3、情境式導航,方便用戶快捷跳轉到ta想去的頁面,如購買結束時提供查看訂單詳情的按鈕。
PS:Web APP更加需要畫頁面跳轉的流程圖,摸清各個頁面的入口,尤其是頁面返回的流程;有些簡化的返回按鈕,可以特殊注明返回到的頁面
>>>>>>>>> 怎樣引導用戶下載APP?
在哪里出現引導?
一般首頁、核心任務的頁面(如 電商Web APP的商品詳情頁 、視頻Web APP的視頻觀看頁)
二、引導下載APP有哪些形式?
- 頁面頂部放置下載條
- 頁面底部懸浮層引導
- 融合在頁面首屏中
- 下載按鈕形式
- 底部Foot里含客戶端下載入口
其次,在設計Web App時,有以下小技巧可以參考:
1、從頁面布局上減少跳轉:使用交互技巧隱藏文字(eg 騰訊視頻)
利用展開收起按鈕 減少頁面跳轉。
2、取消float浮層,增大展示空間(eg:大眾點評)
取消float浮層,同時在詳情尾部再次加上 “購買”按鈕。
浮層的轉換處理。
3、頁面中對圖片進行縮小(因情況而異)的處理、精簡一些標簽導航的視覺展示。
視覺微調。
技術上注意點:
1)各手機瀏覽器的兼容測試
2)底層服務的調取(能調取,但只有當其是核心功能時才保留 eg:新浪、美團等皆去掉了頭像上傳功能)
3)注意離線數據存儲,減少數據請求頻率。
4)考慮保存用戶的哪些數據:設置、個人數據、閱讀錨點、跳出頁面等。
5)避免動效與瀏覽器的交互沖突
6)按順序 異步加載 eg: 騰訊視頻
騰訊視頻異步加載。
雖然Web App目前處于比較尷尬的地位,我們是由于原APP客戶端中一些頁面需要分享出去才開啟制作Web App版。
但是不得不承認,基于Web的輕APP 更新迭代起來更方便,隨著H5技術的成熟和發展,也許以后就是基于H5的Web App的天下了 0.0
【設計兩三事的人氣好文】
Top 1:設計一事,配色是重中之重,必須正確!
《秒變配色高手!怎么都不會錯的6條網頁設計配色原則》Top 2:設計二事,字體是畫龍點睛,定要最好的!
《字體排行榜!2014年最受歡迎的35款字體素材打包下載》Top 3:設計三事,視覺如衣服,文案是氣質,不能不高端!
《年度最佳教程!7招教你寫出互聯網頂尖文案!》
原文地址:jianshu
作者:@ChM_CuoreAzzurro
【優設網 原創文章 投稿郵箱:2650232288@qq.com】
================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量90萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com
官方微信:想在手機上、被窩里獲取設計教程和各種意想不到的"福利"嗎?添加優設哥微信號:youshege
復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。
發評論!每天贏獎品
點擊 登錄 后,在評論區留言,系統會隨機派送獎品
2012年成立至今,是國內備受歡迎的設計師平臺,提供獎品贊助 聯系我們
AI輔助海報設計101例
已累計誕生 737 位幸運星
發表評論
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓