首頁 > 運營推廣 > 正文

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

2020-02-14 22:29:59 來源:金橙教程網 作者:admin7 瀏覽:81次 「手機版」

web app

@ChM_CuoreAzzurro?:Web App和原生APP同為移動端,很少有時間研究這兩項的交互區別,最近公司做了一次從原生APP到Web App(HTML5 )的移植,故總結一下期間遇到的問題及不同點總結。

從使用場景上,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

    原文地址:jianshu

    作者:@ChM_CuoreAzzurro

    相關閱讀

    各位小伙伴要記住“happy new year”和“happy Spring

    各位小伙伴要記住“happy new year”和“happy Spring festival”可不是一個意思噢

    社交APP競品分析報告| 由陌陌看富聊

    富聊,一款基于有償聊天的移動社交應用。通過對比陌陌、富聊兩款app產品的定位分析、用戶畫像分析、功能結構分析、頁面及功能設計

    CHARLES&KEITH 2019年最新的小CK官網碼(只能用于官網及

    CHARLES&KEITH2019年最新的小CK官網碼(只能用于官網及app上哦)

    APP推廣如何突出重圍?流量營銷或是新出路

    流量經營不僅僅意味著運營商經營思路的轉變,對于要進軍移動互聯網的企業來說,更是一個“博出位”、迅速搶占入口的利器。未來必定會

    App Annie免費使用

    簡介視頻 排行榜 可以查看各大商店里最近90天內APP的歷史排名數據,并且可以進入任意APP頁面里查看該APP的詳細歷史排名數據。

(責任編輯:jjjccc)

關鍵詞:app,Web App,交互設計

福彩3d字谜画谜藏机图