近期，現(xiàn)金貸和白條商城部分客戶端2.0視覺改版已經(jīng)完成突颊，在微信服務(wù)號上還要做相同功能的h5視覺設(shè)計丧枪。查詢了網(wǎng)上的一些關(guān)于h5視覺設(shè)計的介紹之斯，結(jié)合工作經(jīng)驗做一些總結(jié)日杈。
如何判斷一個APP頁面是否是H5頁面？（轉(zhuǎn)自知乎吊圾，作者：好多魚）
1达椰、看斷網(wǎng)的情況
把手機(jī)的網(wǎng)絡(luò)斷掉。然后點開頁面项乒。然后可以正常顯示的東西就是原生寫的啰劲。
顯示404或則錯誤頁面的是html頁面。
2檀何、看布局邊界
開發(fā)者選項->顯示布局邊界蝇裤，頁面元素很多的情況下布局是一整塊的是h5的，布局密密麻麻的是原生控件频鉴。頁面有布局的是原生的栓辜，否則為h5頁面。
3垛孔、看復(fù)制文章的提示藕甩，需要你通過對比才能得出結(jié)果。
比如是文章資訊頁面可以長按頁面試試周荐，如果出現(xiàn)文字選擇狭莱、粘貼功能的是H5頁面，否則是native原生的頁面概作。
有些原生APP開放了復(fù)制粘貼功能或者關(guān)閉了腋妙。而H5的css屏蔽了復(fù)制選擇功能等等情況。需要通過對目標(biāo)測試APP進(jìn)行對比才可知讯榕。
這個在支付寶APP骤素、螞蟻聚寶都是可以判斷的。
4愚屁、看加載的方式
如果在打開新頁面導(dǎo)航欄下面有一條加載的線的話济竹，這個頁面就是H5頁面，如果沒有就是原生的霎槐。 微信里面打開我們的H5頁面常見的有個綠色的 加載線條送浊。如下圖紅框里面所示：
5、看app頂部 導(dǎo)航欄是否會有關(guān)閉的操作
如果APP頂部導(dǎo)航欄當(dāng)中出現(xiàn)了關(guān)閉按鈕或者有關(guān)閉的圖標(biāo)栽燕，那么當(dāng)前的頁面肯定的H5罕袋，原生的不會出現(xiàn)（除非設(shè)計開發(fā)者故意弄的）
美團(tuán)的、大眾點評的APp碍岔、微信APP當(dāng)加載h5過多的時候浴讯，左上角會出現(xiàn)關(guān)閉2字。
6蔼啦、判斷頁面 下拉刷新的時候（前提是要有下拉刷新的功能）
如果界面沒有明顯刷新現(xiàn)象的是原生的榆纽，如果有明顯刷新現(xiàn)象（比如閃一下）的是H5頁面（ios和android）。
比如淘寶的眾籌頁面捏肢。
7奈籽、下拉頁面的時候顯示網(wǎng)址提供方的一定是H5
WebAPP與原生APP的交互設(shè)計區(qū)別（轉(zhuǎn)自人人都是產(chǎn)品經(jīng)理）
由于h5語言本身存在較大的不穩(wěn)定性，WAP用戶面臨比APP用戶更嚴(yán)峻的問題：
1鸵赫、頁面跳轉(zhuǎn)更加費力衣屏，不穩(wěn)定感更強(qiáng)
思考點：如何減少跳轉(zhuǎn)（扁平結(jié)構(gòu)、頁面布局技巧）辩棒，增加數(shù)據(jù)及展示的流暢流程及穩(wěn)定性（技術(shù)）
2狼忱、更小的頁面空間（由于瀏覽器的導(dǎo)航本身占用一部分屏幕空間），更大的信息記憶負(fù)擔(dān)
思考點：排版更清晰一睁、信息更簡練 （可在APP基礎(chǔ)上去掉一些豐富钻弄、復(fù)雜的視覺表現(xiàn)）
3、導(dǎo)航不明顯者吁，原有底部導(dǎo)航消失窘俺，有效的導(dǎo)航遇到挑戰(zhàn)
思考點：如何有效的提供導(dǎo)航？有哪些形式复凳？
4瘤泪、交互動態(tài)效果收到限制，影響一些頁面場景染坯、邏輯的理解均芽。
思考點：比如登錄注冊流程的彈出、完成及異常退出单鹿，做好文字提示掀宋。
針對以上困境，解決方法總結(jié)如下仲锄。
首先劲妙，從APP到WAP版，在產(chǎn)品上儒喊，最明顯且核心的：
1镣奋、精簡功能，只將核心的任務(wù)實現(xiàn)怀愧，非核心的枝節(jié)可考慮刪減侨颈。
2余赢、做好新的WAP導(dǎo)航.
3、補(bǔ)充從WAP站對?下載APP?的引導(dǎo)哈垢。
h5的圖片適配方法（來源于網(wǎng)站）
1妻柒、contain 模式：以內(nèi)容中心為基點按照視覺稿的寬高比縮放以適配窗口顯示全頁面內(nèi)容，窗口與內(nèi)容的寬度比或高度比之間較小者縮放填滿窗口耘分，當(dāng)窗口寬高比和視覺稿不同時举塔，另一方向的兩側(cè)出現(xiàn)留空部分。
2求泰、cover 模式：以內(nèi)容中心為基點按照窗口的寬高比等比縮放以適配窗口央渣，窗口與內(nèi)容的寬度比或高度比之間較大者縮放填滿窗口，當(dāng)窗口寬高比和視覺稿不同時渴频，另一方向的兩側(cè)超出窗口被裁剪芽丹，這種模式不會出現(xiàn)「contain 模式」的留空部分情況。
3枉氮、fill 模式：以內(nèi)容中心為基點頁面拉伸填充滿整個窗口以適配窗口志衍，當(dāng)窗口寬高比和視覺稿不同時，內(nèi)容一定程度上被拉伸聊替。
4楼肪、scale-width 模式：頁面橫向縮放填充滿窗口，縱向按視覺稿的寬高比放大惹悄。出來的效果有兩種可能性春叫，「contain 模式」或者「cover 模式」的效果。
5泣港、scale-height 模式：頁面縱向縮放填充滿窗口暂殖，橫向按視覺稿的寬高比放大。出來的效果有兩種可能性当纱，「contain 模式」或者「cover 模式」的效果呛每。
1、高效適配的核心思想是「縮放」坡氯。
2晨横、每一種適配模式都不是絕對的，需要根據(jù)需求場景選用合適的形式箫柳。適配前先跟設(shè)計師溝通明確適配表現(xiàn)形式手形，遇到復(fù)雜的場景可以把內(nèi)容拆分出來區(qū)分適配。當(dāng)頁面內(nèi)容不適合方向旋轉(zhuǎn)展示悯恍，此時就不要無腦適配库糠，有兩個方式可以選擇：
找設(shè)計師出一版另一方向的響應(yīng)式設(shè)計稿然后制作成響應(yīng)式頁面；
出現(xiàn)提示方式讓用戶旋轉(zhuǎn)回支持的方向涮毫，比如（圖5）瞬欧。
3贷屎、需要設(shè)定窗口等于設(shè)備物理寬度，即 viewport 為 width=device-width, initial-scale=1艘虎。
4豫尽、適配相關(guān)的?js?放在?head?里，文檔結(jié)構(gòu)加載完成就先執(zhí)行適配?js顷帖，給?body?加一個顯隱動畫規(guī)避在?js?未執(zhí)行完成時頁面出現(xiàn)縮放前后。
