3.07日(rì)音(yīn)訊，H5WebAP₹σσ×P原生(shēng)APP的(de)設計(jì)區(q☆σ∞"ū)别

　　3.07日(rì)音(yīn)訊，H •™5WebAPP原生(shēng)APP的(de)設計(jì)區α♠(qū)别，WebAPP和(hé)原生(s←€>☆hēng)APP同為(wèi)移動端，很(hěn)少→$γ(shǎo)有(yǒu)研究這(zhè)兩項的(de)交互區(q±‍ū)别，最近(jìn)公司做(zuò)了(le)一(y€‌ ¥ī)次從(cóng)原生(shēng)APP到(dào)WebAPP（H∑δ<TML5）的(de)移植，故總結一(yī)下(x‌Ωià)期間(jiān)遇到(dào)的(de)問(w✘®èn)題及不(bù)同點總結。

　　WebAPP和(hé)原生(shēng)APP同≈γ為(wèi)移動端，很(hěn)少(shǎo)有(yǒu)研究這(z¶←∏hè)兩項的(de)交互區(qū)别，最近(jìn)公司做(zuò)了(le)λ♥一(yī)次從(cóng)原生(shēng)APP到(dào)WebAPP（H  δ≠TML5）的(de)移植，故總結一(yī)下(xià)期間(j¥<iān)遇到(dào)的(de)問(wèn)題及不(bù)同點↔ 總結。

　　從(cóng)使用(yòng)場(chǎng)景上(shàng)γβ¶→，WebAPP用(yòng)戶面臨比原生(shēng)APP用(yòng)戶₹←更嚴峻的(de)問(wèn)題：

　　1、頁面跳(tiào)轉更加費(fèi)力，不(bù)穩定感更 π強

　　思考點：如(rú)何減少(shǎo)跳(tiào)‍§轉（扁平結構、頁面布局技(jì)巧），增加數(shù)據及展® ₽示的(de)流暢流程及穩定性（技(jì)術(shù)）

　　2、更小(xiǎo)的(de)頁面空(kōng)間(ji‍☆ān)（由于浏覽器(qì)的(de)導航本身(shēn)占用(yòn‍®g)一(yī)部分(fēn)屏幕空(kōng)間(jiān)），更大(dà ∏↑)的(de)信息記憶負擔

　　移動設備的(de)屏幕要(yào)✔→ δ小(xiǎo)得(de)多(duō)。這(zhè)種如(∞±rú)同透過門(mén)縫進行(xíng)的₩"≥§(de)閱讀(dú)增加了(le)認知(zhī)的(de)負擔。人(rén$↓>)腦(nǎo)的(de)短(duǎn)期記憶是(shì)不(bù)穩定的(d÷Ω≈×e)，用(yòng)戶在滾動屏幕的(de) €Ω過程中需要(yào)臨時(shí)記憶的(de)信息越多(duō®Ωγ≠)，他(tā)們的(de)表現(xiàn)®≥×φ就(jiù)會(huì)越差。

　　思考點：排版更清晰、信息更簡練（可(kě)在原生(shēng)APP基礎 ∑β上(shàng)去(qù)掉一(yī)些(xiē)豐富、複雜(zá)‍♥$™的(de)視(shì)覺表現(xiàn)）

　　3、導航不(bù)明(míng)顯，原有(yǒu)↕‌€↕底部導航消失，有(yǒu)效的(de)導航遇到(dà​¶o)挑戰

　　思考點：如(rú)何有(yǒu)效的(de)提供導航？有(yǒu)哪些(₩₩₽↑xiē)形式？

　　4、交互動态效果收到(dào)限制(zhì)，影(yǐ♦↔★ng)響一(yī)些(xiē)頁面場(chǎng)景、邏輯的(de)理(≤↑lǐ)解。

　　思考點：比如(rú)登錄注冊流程的(de)彈出、完成及異↑→♦常退出，做(zuò)好(hǎo)文(wéγ₹₹n)字提示。

　　針對(duì)以上(shàng)困境，解決方法總結如(rú)下(xγ≥ià)。

　　首先，從(cóng)APP到(dào)W✔$AP版，在産品上(shàng)，最明(míng)顯且↓×λ核心的(de)：

　　1、精簡功能(néng)，隻将核心的(de)任務實現(xiàn)，非Ωφ"σ核心的(de)枝節可(kě)考慮删減。

　　2、做(zuò)好(hǎo)新的(de)WebAPP導航.

　　3、補充從(cóng)WebAPP對(duì)下(xi≥Ω♣↕à)載原生(shēng)APP的(de)引>​ε導。

　　一(yī)、常見(jiàn)的(de)幾種Web§®APP導航樣式

　　1.1頂部底部導航的(de)設計(jì)：

　　常見(jiàn)WebAPP導航設計(jì)

　　1.2導航快(kuài)捷鍵設計(jì)：

　　美(měi)團：頂部欄固定位置

　　淘寶：懸浮圓圈--可(kě)展開(kāi) φ€§的(de)按鈕

　　優酷：非首屏時(shí)頁面右側懸浮

　　導航快(kuài)捷方式

　　二、有(yǒu)效的(de)導航設計(jì)

　　1、基本的(de)快(kuài)捷導航中包括返回常用(yòng)頁面（如 •φ​(rú)首頁我的(de)等）的(de)快(kuài)•​捷方式

　　2、出現(xiàn)深層架構時(shí)及時↕®$(shí)補充返回重要(yào)層級頁面的(de)快(kuài)γ ©捷方式

　　3、情境式導航，方便用(yòng)戶快(kuài)捷跳(tià€ε¥<o)轉到(dào)ta想去(qù)的(de)頁面，如(rú)購(×ε≈gòu)買結束時(shí)提供查看(kàn)訂單詳情的(de)按鈕。

　　ps：WebAPP更加需要(yào)畫(huà)頁面跳(tiào)®'‌φ轉的(de)流程圖，摸清各個(gè)頁面的(de)入÷>≠☆口，尤其是(shì)頁面返回的(de)流程；有(yǒu)些(γ&≥xiē)簡化(huà)的(de)返回按鈕€ ，可(kě)以特殊注明(míng)返回到(dào)的(de)頁面

　　一(yī)、在哪裡(lǐ)出現(xiΩ'☆àn)引導？

　　一(yī)般首頁、核心任務的(de)頁面（如(rú)電(diσ✘λàn)商WebAPP的(de)商品詳情頁、視(shì)頻  ≥‌(pín)WebAPP的(de)視(shì)頻(pín)觀看(kàn)頁）

　　二、引導下(xià)載APP有(yǒu)哪些(xiē)形式？

　　1、頁面頂部放(fàng)置下(xià)載條2、頁↕ ₩ 面底部懸浮層引導3、融合在頁面首屏中

　　4、下(xià)載按鈕形式5、底部foot裡&±↑(lǐ)含：客戶端下(xià)載入口

　　下(xià)載APP引導

　　其次，在設計(jì)WebAPP時∑  ★(shí)，有(yǒu)以下(xià)小(xiǎo)技(jì)巧可(kě)以參σ 考：

　　1、從(cóng)頁面布局上(shàn↑≈g)減少(shǎo)跳(tiào)轉：使用(yòng)交互技(jì)巧隐β 藏文(wén)字（eg騰訊視(shì)頻(pín)）

　　利用(yòng)展開(kāi)收起按鈕減少(shǎo)頁面跳(ti₩$ào)轉

　　2、取消float浮層，增大(dà)展示空(kōng)間(jiān)&<（eg：大(dà)衆點評）

　　取消float浮層，同時(shí)在詳情尾部再次→β加上(shàng)“購(gòu)買”按鈕

　　浮層的(de)轉換處理(lǐ)

　　3、頁面中對(duì)圖片進行(xíng)縮小(xiǎo)©♦（因情況而異）的(de)處理(lǐ)、精簡一(yī)些(xiē)标簽導航的✘×↑(de)視(shì)覺展示

　　視(shì)覺微(wēi)調

　　技(jì)術(shù)上(shàng)注σ&β₹意點：

　　1）各手機(jī)浏覽器(qì)的(de)兼容測試

　　2）底層服務的(de)調取（能(néng)調取，但(dàn)隻有(yǒu δ£)當其是(shì)核心功能(néng)時(shí)才保留eg：新浪、美(♥ φ€měi)團等皆去(qù)掉了(le)頭像上(shàng)傳功멶能(néng)）

　　3）注意離(lí)線數(shù)據存儲，減少(shǎo)數∞₩(shù)據請(qǐng)求頻(pín)率。

　　4）考慮保存用(yòng)戶的(de)哪些(xiē)數(shù)據：設•γ★ 置、個(gè)人(rén)數(shù)據、閱讀(↔✔✔dú)錨點、跳(tiào)出頁面等。

　　5）避免動效與浏覽器(qì)的(de)交互沖突

　　6）按順序異步加載eg：騰訊視(shì)頻(pín)