未來的熱門!Web APP與原生APP有哪些交互設計區別?

@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頂部底部導航的設計:

未來的熱門!Web APP與原生APP有哪些交互設計區別?

1.2導航快捷鍵設計:

美團:頂部欄固定位置

淘寶:懸浮圓圈--可展開的按鈕

優酷:非首屏時頁面右側懸浮

未來的熱門!Web APP與原生APP有哪些交互設計區別?

二、有效的導航設計

1、基本的快捷導航中包括 返回常用頁面(如 首頁 我的 等)的快捷方式

2、出現深層架構時 及時補充返回重要層級頁面的快捷方式

3、情境式導航,方便用戶快捷跳轉到ta想去的頁面,如購買結束時提供查看訂單詳情的按鈕。

PS:Web APP更加需要畫頁面跳轉的流程圖,摸清各個頁面的入口,尤其是頁面返回的流程;有些簡化的返回按鈕,可以特殊注明返回到的頁面

>>>>>>>>> 怎樣引導用戶下載APP?

在哪里出現引導?

一般首頁、核心任務的頁面(如 電商Web APP的商品詳情頁 、視頻Web APP的視頻觀看頁)

二、引導下載APP有哪些形式?

  1. 頁面頂部放置下載條
  2. 頁面底部懸浮層引導
  3. 融合在頁面首屏中
  4. 下載按鈕形式
  5. 底部Foot里含客戶端下載入口

未來的熱門!Web APP與原生APP有哪些交互設計區別?

其次,在設計Web App時,有以下小技巧可以參考:

1、從頁面布局上減少跳轉:使用交互技巧隱藏文字(eg 騰訊視頻)

未來的熱門!Web APP與原生APP有哪些交互設計區別?

利用展開收起按鈕 減少頁面跳轉。

2、取消float浮層,增大展示空間(eg:大眾點評)

取消float浮層,同時在詳情尾部再次加上 “購買”按鈕。

未來的熱門!Web APP與原生APP有哪些交互設計區別?

浮層的轉換處理。

3、頁面中對圖片進行縮小(因情況而異)的處理、精簡一些標簽導航的視覺展示。

未來的熱門!Web APP與原生APP有哪些交互設計區別?

視覺微調。

技術上注意點:

1)各手機瀏覽器的兼容測試

2)底層服務的調取(能調取,但只有當其是核心功能時才保留 eg:新浪、美團等皆去掉了頭像上傳功能)

3)注意離線數據存儲,減少數據請求頻率。

4)考慮保存用戶的哪些數據:設置、個人數據、閱讀錨點、跳出頁面等。

5)避免動效與瀏覽器的交互沖突

6)按順序 異步加載 eg: 騰訊視頻

未來的熱門!Web APP與原生APP有哪些交互設計區別?

騰訊視頻異步加載。

雖然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

未來的熱門!Web APP與原生APP有哪些交互設計區別?

收藏 17
點贊 1

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。