網(wǎng)頁(yè)美工設計

h5移動(dòng)端頁(yè)面怎么根據設計稿布局

編輯：時(shí)間：2017-07-11 19:47:01

　　在移動(dòng)端上，視覺(jué)線(xiàn)索是重要的組成部分，因為屏幕的局限性，我們需要清晰地告訴用戶(hù)應該如何操作，應該瀏覽，哪些控件可以操作，甚至哪些操作可能會(huì )帶來(lái)在哪些結果。所以，這里一定會(huì )涉及到信息的視覺(jué)化，所以這些視覺(jué)線(xiàn)索的設計應當遵循一定的規則

　　在小屏幕上，千萬(wàn)不要試圖在一個(gè)界面上承載過(guò)多類(lèi)型的內容，對于用戶(hù)而言是極大的負擔。將每一屏都視作一個(gè)單獨的容器，每個(gè)容器承載不同的內容，切換界面，呈現不同的內容。當內容足夠引人入勝的時(shí)候，用戶(hù)會(huì )不自覺(jué)的滑動(dòng)，切換，干凈整潔、組織完善的布局則確保了整體體驗的一致和便捷性。同時(shí)，界面的UI元素靠的太近，或者過(guò)小了會(huì )讓手指粗壯的用戶(hù)非常難于操作。從某種意義上來(lái)說(shuō)，巨屏手機的出現和這種體驗訴求不無(wú)關(guān)系。確保每個(gè)元素周?chē)Ａ糇銐虻目臻g和間隙，不僅僅方便用戶(hù)點(diǎn)擊，而且能夠消除誤觸的情況。

　　最后與所有設計一樣，記得保持所有的元素看起來(lái)一致，交互和運作方式也應當統一。一致的設計讓用戶(hù)能夠更快適應產(chǎn)品，統一的設計讓用戶(hù)對于不同的界面有了預期。也許比起我們熟悉的電腦端網(wǎng)站的設計，移動(dòng)端會(huì )更加精細些，需要我們發(fā)揮極致的追求細節精神。

　　H5布局如何下手？

　　所謂H5布局，說(shuō)簡(jiǎn)單點(diǎn)，就是用H5特有的新標簽（語(yǔ)義化）來(lái)替代傳統布局方式。幾點(diǎn)注意如下：

　　1）css寫(xiě)法不變，比如你定義標簽，那css里就要這樣寫(xiě)header{}。另外，H5標簽也是可以加class或id的，css寫(xiě)法沒(méi)啥區別，比如，.樣式名{}#樣式名{}；

　　2）移動(dòng)端網(wǎng)站H5標簽（包括css3）是支持的，放心大膽去弄，不要去考慮狗屁的兼容。如果是單純PC網(wǎng)站，建議傳統div方式布局比較合適；

　　3）響應式網(wǎng)站，技術(shù)強迫癥，必須要用H5來(lái)做，那html5shiv.js或modernizr.js是不錯的IE兼容解決方案。（比如李勇的小拼sem博客）。注意：ie8以下是沒(méi)辦法的，可以頁(yè)面頂部彈出提醒升級你的IE，算友好體驗的一部分吧。

　　H5移動(dòng)端布局需要注意的一些細節：

　　⒈分辨率

　　這應該是移動(dòng)端網(wǎng)頁(yè)最關(guān)心的問(wèn)題了，因為移動(dòng)設備五花八門(mén)，各種分辨率都有。要想在這些設備上都能有良好的瀏覽體驗，得花一番功夫。使用viewport：這已經(jīng)是移動(dòng)端網(wǎng)頁(yè)的必備了，它可以設定頁(yè)面的寬度，是否允許縮放等等。

　　一般設置width=device-width，就是設置為設備的屏幕寬度，當然也可以是具體數值。百分比與max(min)-width使用：移動(dòng)端網(wǎng)頁(yè)不僅分辨率不一，而且隨時(shí)可以橫豎屏切換，所以百分比寬度設定非常必要，再配合max(min)-width限制最大(小)寬度，能有效的適應各種分辨率。

　　這里的意思就是在大于640px的屏幕寬度下，使用style1樣式，也可以寫(xiě)在樣式內部，如：

　　@mediascreenand(min-width:640px){.d1{background:#ccc;}}

　　2.不使用絕對寬度

　　由于網(wǎng)頁(yè)會(huì )根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。具體說(shuō)，CSS代碼不能指定像素寬度：width:xxxpx;

　　只能指定百分比寬度：width:xx%或者width:auto。

　　3.相對大小的字體

　　字體也不能使用絕對大小(px)，而只能使用相對大小(em)。

　　body{font:normal100%Helvetica,Arial,sans-serif;}

　　上面的代碼指定，字體大小是頁(yè)面默認大小的100%，即16像素。

　　h1{font-size:1.5em;}

　　然后，h1的大小是默認大小的1.5倍，即24像素(24/16=1.5)。

　　small{font-size:0.875em;}