当前位置:首页 > 网页美工设计

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前端性能优化方案

返回首页

在线咨询

在线报名

电话报名