h5移动端页面怎么根据设计稿布局
在移动端上，视觉线索是重要的组成部分，因为屏幕的局限性，我们需要清晰地告诉用户应该如何操作，应该浏览，哪些控件可以操作，甚至哪些操作可能会带来在哪些结果。所以，这里一定会涉及到信息的视觉化，所以这些视觉线索的设计应当遵循一定的规则
在小屏幕上，千万不要试图在一个界面上承载过多类型的内容，对于用户而言是极大的负担。将每一屏都视作一个单独的容器，每个容器承载不同的内容，切换界面，呈现不同的内容。当内容足够引人入胜的时候，用户会不自觉的滑动，切换，干净整洁、组织完善的布局则确保了整体体验的一致和便捷性。同时，界面的UI元素靠的太近，或者过小了会让手指粗壮的用户非常难于操作。从某种意义上来说，巨屏手机的出现和这种体验诉求不无关系。确保每个元素周围保留足够的空间和间隙，不仅仅方便用户点击，而且能够消除误触的情况。
最后与所有设计一样，记得保持所有的元素看起来一致，交互和运作方式也应当统一。一致的设计让用户能够更快适应产品，统一的设计让用户对于不同的界面有了预期。也许比起我们熟悉的电脑端网站的设计，移动端会更加精细些，需要我们发挥极致的追求细节精神。
H5布局如何下手？
所谓H5布局，说简单点，就是用H5特有的新标签（语义化）来替代传统布局方式。几点注意如下：
1）css写法不变，比如你定义标签，那css里就要这样写header{}。另外，H5标签也是可以加class或id的，css写法没啥区别，比如，.样式名{}#样式名{}；
2）移动端网站H5标签（包括css3）是支持的，放心大胆去弄，不要去考虑狗屁的兼容。如果是单纯PC网站，建议传统div方式布局比较合适；
3）响应式网站，技术强迫症，必须要用H5来做，那html5shiv.js或modernizr.js是不错的IE兼容解决方案。（比如李勇的小拼sem博客）。注意：ie8以下是没办法的，可以页面顶部弹出提醒升级你的IE，算友好体验的一部分吧。
H5移动端布局需要注意的一些细节：
⒈分辨率
这应该是移动端网页最关心的问题了，因为移动设备五花八门，各种分辨率都有。要想在这些设备上都能有良好的浏览体验，得花一番功夫。使用viewport：这已经是移动端网页的必备了，它可以设定页面的宽度，是否允许缩放等等。
一般设置width=device-width，就是设置为设备的屏幕宽度，当然也可以是具体数值。百分比与max(min)-width使用：移动端网页不仅分辨率不一，而且随时可以横竖屏切换，所以百分比宽度设定非常必要，再配合max(min)-width限制最大(小)宽度，能有效的适应各种分辨率。
这里的意思就是在大于640px的屏幕宽度下，使用style1样式，也可以写在样式内部，如：
@mediascreenand(min-width:640px){.d1{background:#ccc;}}
2.不使用绝对宽度
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。具体说，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)
"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。
.main{float:right;width:70%;}
.leftBar{float:left;width:25%;}
float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow(溢出)，避免了水平滚动条的出现。
另外，绝对定位(position:absolute)的使用，也要非常小心。
4.图片的自适应
除了布局和文本，"自适应网页设计"还必须实现图片的自动缩放。
这只要一行CSS代码：
img{max-width:100%;}
这行代码对于大多数嵌入网页的视频也有效，所以可以写成：
img,object{max-width:100%;}
老版本的IE不支持max-width，所以只好写成：
img{width:100%;}
此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：
img{-ms-interpolation-mode:bicubic;}
或者，EthanMarcotte的imgSizer.js。
addLoadEvent(function(){
varimgs=document.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});
| << 上一篇：怎么把网页设计的更有视觉效果 | >> 下一篇：网页设计移动端H5前端性能优化方案 |
- 2017-07-05平面设计师没有想象力怎么办
- 2017-06-26怎么把网页设计的更有视觉效果
- 2017-06-21室内设计装修开工前的准备工作怎么做
- 2017-06-01平面设计师怎么写每日工作总结
- 2017-05-30室内设计师怎么快速培养提高创意
- 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室内装修中设计效果图怎么收费
- 求学问答专业答复，快速响应
- 电话：0371-63218905
- 手机：13613841515
-
QQ：
