h5移動端頁面怎么根據(jù)設計稿布局
在移動端上，視覺線索是重要的組成部分，因為屏幕的局限性，我們需要清晰地告訴用戶應該如何操作，應該瀏覽，哪些控件可以操作，甚至哪些操作可能會帶來在哪些結果。所以，這里一定會涉及到信息的視覺化，所以這些視覺線索的設計應當遵循一定的規(guī)則
在小屏幕上，千萬不要試圖在一個界面上承載過多類型的內容，對于用戶而言是極大的負擔。將每一屏都視作一個單獨的容器，每個容器承載不同的內容，切換界面，呈現(xiàn)不同的內容。當內容足夠引人入勝的時候，用戶會不自覺的滑動，切換，干凈整潔、組織完善的布局則確保了整體體驗的一致和便捷性。同時，界面的UI元素靠的太近，或者過小了會讓手指粗壯的用戶非常難于操作。從某種意義上來說，巨屏手機的出現(xiàn)和這種體驗訴求不無關系。確保每個元素周圍保留足夠的空間和間隙，不僅僅方便用戶點擊，而且能夠消除誤觸的情況。
最后與所有設計一樣，記得保持所有的元素看起來一致，交互和運作方式也應當統(tǒng)一。一致的設計讓用戶能夠更快適應產品，統(tǒng)一的設計讓用戶對于不同的界面有了預期。也許比起我們熟悉的電腦端網站的設計，移動端會更加精細些，需要我們發(fā)揮極致的追求細節(jié)精神。
H5布局如何下手？
所謂H5布局，說簡單點，就是用H5特有的新標簽（語義化）來替代傳統(tǒng)布局方式。幾點注意如下：
1）css寫法不變，比如你定義標簽，那css里就要這樣寫header{}。另外，H5標簽也是可以加class或id的，css寫法沒啥區(qū)別，比如，.樣式名{}#樣式名{}；
2）移動端網站H5標簽（包括css3）是支持的，放心大膽去弄，不要去考慮狗屁的兼容。如果是單純PC網站，建議傳統(tǒng)div方式布局比較合適；
3）響應式網站，技術強迫癥，必須要用H5來做，那html5shiv.js或modernizr.js是不錯的IE兼容解決方案。（比如李勇的小拼sem博客）。注意：ie8以下是沒辦法的，可以頁面頂部彈出提醒升級你的IE，算友好體驗的一部分吧。
H5移動端布局需要注意的一些細節(jié)：
⒈分辨率
這應該是移動端網頁最關心的問題了，因為移動設備五花八門，各種分辨率都有。要想在這些設備上都能有良好的瀏覽體驗，得花一番功夫。使用viewport：這已經是移動端網頁的必備了，它可以設定頁面的寬度，是否允許縮放等等。
一般設置width=device-width，就是設置為設備的屏幕寬度，當然也可以是具體數(shù)值。百分比與max(min)-width使用：移動端網頁不僅分辨率不一，而且隨時可以橫豎屏切換，所以百分比寬度設定非常必要，再配合max(min)-width限制最大(小)寬度，能有效的適應各種分辨率。
這里的意思就是在大于640px的屏幕寬度下，使用style1樣式，也可以寫在樣式內部，如：
@mediascreenand(min-width:640px){.d1{background:#ccc;}}
2.不使用絕對寬度
由于網頁會根據(jù)屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。具體說，CSS代碼不能指定像素寬度：width:xxxpx;
只能指定百分比寬度：width:xx%或者width:auto。
3.相對大小的字體
字體也不能使用絕對大小(px)，而只能使用相對大小(em)。
body{font:normal100%Helvetica,Arial,sans-serif;}
上面的代碼指定，字體大小是頁面默認大小的100%，即16像素。
h1{font-size:1.5em;}
然后，h1的大小是默認大小的1.5倍，即24像素(24/16=1.5)。
small{font-size:0.875em;}
small元素的大小是默認大小的0.875倍，即14像素(14/16=0.875)。
4.流動布局(fluidgrid)
"流動布局"的含義是，各個區(qū)塊的位置都是浮動的，不是固定不變的。
.main{float:right;width:70%;}
.leftBar{float:left;width:25%;}
float的好處是，如果寬度太小，放不下兩個元素，后面的元素會自動滾動到前面元素的下方，不會在水平方向overflow(溢出)，避免了水平滾動條的出現(xiàn)。
另外，絕對定位(position:absolute)的使用，也要非常小心。
4.圖片的自適應
除了布局和文本，"自適應網頁設計"還必須實現(xiàn)圖片的自動縮放。
這只要一行CSS代碼：
img{max-width:100%;}
這行代碼對于大多數(shù)嵌入網頁的視頻也有效，所以可以寫成：
img,object{max-width:100%;}
老版本的IE不支持max-width，所以只好寫成：
img{width:100%;}
此外，windows平臺縮放圖片時，可能出現(xiàn)圖像失真現(xiàn)象。這時，可以嘗試使用IE的專有命令：
img{-ms-interpolation-mode:bicubic;}
或者，EthanMarcotte的imgSizer.js。
addLoadEvent(function(){
varimgs=document.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});
| << 上一篇：怎么把網頁設計的更有視覺效果 | >> 下一篇：網頁設計移動端H5前端性能優(yōu)化方案 |
- 2017-07-05平面設計師沒有想象力怎么辦
- 2017-06-26怎么把網頁設計的更有視覺效果
- 2017-06-21室內設計裝修開工前的準備工作怎么做
- 2017-06-01平面設計師怎么寫每日工作總結
- 2017-05-30室內設計師怎么快速培養(yǎng)提高創(chuàng)意
- 2017-05-24室內設計平面布局方案和技巧
- 2017-05-17室內設計CAD施工圖怎么畫的好
- 2017-05-11光線不好的房子怎么裝修設計變亮
- 2017-05-10室內家具設計師資格證怎么考
- 2017-05-03室內裝修設計怎么更好的做預算
- 2017-04-26平面設計軟件cdr里面陰影怎么做
- 2017-04-25室內設計中的剖面圖怎么畫
- 2017-04-25室內設計中怎么量房繪制草圖
- 2017-04-10網頁設計首頁如何布局會有好的用戶體驗
- 2017-04-06室內裝修中設計效果圖怎么收費
- 求學問答專業(yè)答復，快速響應
- 電話：0371-63218905
- 手機：13613841515
-
QQ：
