网页美工设计

网页设计手机移动端设计稿宽度多少

编辑：时间：2018-02-21 09:20:46

　　在平时做手机端H5网页设计稿时，UI设计师和前端工程师肯定会纠结过：那么多手机屏幕尺寸，设计稿应该按照哪一个尺寸作为标准尺寸。现在已经有2K分辨率的手机屏幕了，设计稿是不是也要把宽高跟着最大分辨率来设计。显然不是。设备独立像像素、CSS像素和屏幕物理像素之间的关系。那么在前端布局(viewport设定content=”width=device-width”)时，样式尺寸就可以用设备独立像素(设备独立像素从数字上等同于CSS像素)的尺寸范围来进行设定各个元素的大小。

　　那么从上面所得出的结论，是否就可以断定设计稿直接按照设备独立像素来定就行了呢?且看下面的分析。所以我们在页面内容规划布局时，不能把重要内容放在太偏下的位置，否则前端布局时可能出现内容显示不全的情况。

　　通过对比可得：

　　除去将浏览器全屏显示的情况，几乎所有情况均会有顶部的状态栏和导航栏。iPhone的设计标准，状态栏和导航栏的独立像素高度分别为40px和88px。

　　由于Android系统可以更改状态栏和导航栏的高度，这里可以取默认值为48px和100px(这些尺寸网上均可查)。

　　那么就会把网页内容往下挤，进入盲区(根据不同的布局方式可能挤出视口，即可视区域之下，)。取这两个系统者的最大值为148(48+100)

　　那么在所有屏幕大小上把重要内容显示完全，就要注意市面上存在的小尺寸手机屏幕，现在绝大部分智能手机分辨率都在640x960px(iPhone4分辨率)之上，所以只要把重要内容放在上图5中的盲区之上即可。计算后的最安全高度为812(960-148=812)。

　　在此总结，一般情况下，以现有市场上流行的移动智能手机，单页翻转(非延伸向下的长页面)设计稿尺寸为640x1136，在高度为812处设置一条安全线(参考线)，将重要的内容布局在这条安全线之上。

　　结论：

　　1、像素是没有宽高的(不要被Photoshop中的像素格欺骗)，它只代表一个采样的色值。

　　2、任何图片作为数据信息被保存在存储盘中时，只有宽高像素数是有意义的，此时的ppi对于图片来说时没有任何意义，也并不能描述这个图片有多少英寸的宽度或者高度，而只有在被打印出来后才有ppi的意义，被打印出来才可以描述这张图片有多高多宽。

　　3、平时制作H5页面时设计原型时，产品经理出的原型稿建议屏宽为320px，用这个尺寸一是为了浏览方便(现在很多手机的屏宽达到1440px，用这个尺寸去模拟显然不现实)，二是以iPhone5s为标准的手机屏宽较小，进行内容排版布局时屏宽应该向下兼容。

　　4、制作设计稿时，设计师应该把原型稿上的所有尺寸进行2倍处理。这样设计稿在移动设备上预览便可保证清晰。而前端切片时，按照现在流行的做法，可以直接使用原型稿上的尺寸，也就是设计稿上的1/2。

　　5、一般情况下，H5页面设计稿做成640x1136px是最为稳妥的尺寸，在812px高度处增加一条安全线，重要内容在此线之上(网上有些文章说安全线是960px处，个人认为不太准确)。既保证了在移动设备上显示清晰，也保证了素材的最小尺寸。

　　虽然手机因为性能和网络等限制因素，不能达到PC专题那么优秀的效果。但手机网页还是有他独有的优势。手机网页也是可以动起来的，而且还可以通过手机特有的重力感应功能做视差滚动效果的交互，看起来很优雅。通过手机控制PC页面的浏览也是一种新体验，不妨试试挖掘更多可能性。下面郑州清新教育的小编告诉您手机网页设计注意事项，手机页面排版方法。

　　先做PC版的页面还是手机版页面　　看用户的访问数据来定。一般情况下都是先做PC版的页面再做手机页面，PC端网页可以呈现更丰富的内容，用户浏览网页时更专注，达到最好的体验。但有很多情况下，页面的访问更多的来自手机端，比如专题页面，用户通过微信、手机QQ入口进入。如果开始就先做PC版的专题，想必手机版的内容将是一个移植的PC版网页，让移动版的体验大打折扣。

　　1.安全宽度与扩展区域让页面适应主流分辨率　　与PC上网页的做法一样，确定一个安全宽度，把重要信息控制在640PX宽度内(以iphone分辨率为安全宽度。目前主要浏览器在iphone4S下的首屏高度如下,可以根据具体页面投放的渠道做相应的首屏高度。

　　2.控制图片的大小　　专题的头图一般有很强的视觉，对于手机用户来说，加载一张图片的等待时间比PC上成本大很多，如果一个页面加载时间超过5秒，70%的用户会选择关闭，那么再出彩的专题也没办法呈现再用户面前了,所以需要对设计稿做折中的处理。　　在做头部的延展区域(超出640px范围)，推荐使用纯色，渐变，可以平铺的素材，以便于减少头图的大小，提高加载速度，并且延展区域可以无缝连接。模糊的背景可以最大限度的压缩图片质量。

　　3.字体　　手机中的字号一般上电脑中的两倍，一般在电脑中用的12px的字体在手机网页中就该使用24px。在设计的过程中，也要使用iOS和安卓默认渲染的字体，以便更真实的还原真实环境。在规范的专题中，主要字号控制在3个，大中小都有一个区间。避免随意用字体字号，并且字号必须上整数。

　　4.控件交互区域适合触控　　手机专题的主按钮高度大于80px，并且根据活动的需求放在首屏内。文字链接上下的间距大于80px，手指在屏幕上热区最小感应是44px。

　　5.移动端网页少用跳转　　手机用户的网络环境不如PC用户，页面的跳转会对用户产生更大的心理效力，如果在手机页面中能把信息合理的展示在一个页面中最佳。如果非要跳转，咱们可以用些假装不是跳转的方式，比如展开，浮出等。减少用户产生的不安全感。

<< 上一篇：人工智能网页设计的特点和优势

>> 下一篇：网页设计常用的技能手法：色彩叠加

推荐资讯