移动端网页设计指南

尺寸问题

尺寸问题是最重要的，只有确定好了设计尺寸，让其适用于多种手机屏幕，这样才能产生不错的视觉效果以及很好的用户体验。虽然说现在有那么多种手机屏幕尺寸，尺寸大小基本都有偏差，但在HTML5移动端设计稿中，一般选择640x1136px即可。这样既满足了显示需求，又能降低用户加载图片需要的带宽。

字体选择

字体是基础。在网页上，我们通常会使用微软雅黑。那么，为了让客户端设计稿有较高的还原度，这里雅黑就会弱爆了，这些字体并不适合手机屏幕来显示，手机系统 ios、android 等是不支持微软雅黑字体的。这里直接为大家推荐字体，IOS： 请直接选用冬青黑体或者华文黑体即可，推荐使用冬青黑体，英文字体和数字字体可使用 Helvetica，字号选择则不要超过18，其他字号双数，同种类别下字号相同。

颜色选用

在移动端界面中通常需要选取主色，标准色，点晴色。移动端与网页端稍微不同，主色虽然是决定了画面风格的色彩但是往往不会被大面积的使用。通常在导航栏/部分按钮/icon/特殊页面等地方出现，会有点晴，定调的作用。统一的主色调也能让用户找到品牌感的归属，例如网易红/腾讯蓝/京东红/阿里橙等等。标准色指的是整套移动界面的色彩规范，确定文本/线段/图标/背景等等的颜色。点晴色通常会用在标题文本/按钮/icon等地方，通常起强调和引导阅读的作用。在颜色的选择上要善用高明度或者纯度较高的色彩，这样不仅能吸人眼球而且能增加空间的层次感。另外要适当留白，尤其移动端首屏中对留白的使用，能够使页面的空间感更强，视线更开阔，使用户进入一种轻松的氛围。

简单夺目

因为手机的屏幕大小是有限的，所以这就使得移动端网页一定要简单但是却要够夺目，够吸引。简单就是干净明了，不需要多么复杂的效果，太多的功能、操作及其他要素。这样页面加载的速度也会更快，夺目是指每屏都要又一个核心元素，中心元素不宜过多，突出重点为最优，让用户轻松看到最重要的信息。

界面排版

界面排版中最常见的方法是灵活运用黄金分割比比如说通栏高度的和间距的设定。另外在界面排布中，往往圆角和圆形比直角更容易让人接受，更加亲切。直角通常在需要更全面展示的地方，例如商品展示、用户的照片等地方，在个人类的feed或者头像，板块的样式等使用圆角会有更好的效果。另外在排版中要避免单调，增加版式的节奏感，并要有轻重缓急之分，这样让用户在观看的过程中不会感到冗长，无趣。

细节为王

细节？对，在web端，由于我们的浏览介质是显示器，加上显示器分辨率及之前的设计习惯，所以有时候我们可以不用太注重一个像素的移位等等的问题，但对于手机，可就完全不一样了，如果你是大大咧咧风格粗犷的设计师，那现在就要加倍细心了，你的粗心和粗狂的风格会在手机上成倍的放大放大再放大，比如发光比如投影比如字体一像素投影等等效果，这可不是时尚大气国际化哦，这是丑。当然，这个感觉是需要一定时间才能找到的，唯一的捷径就是多在手机上预览效果图，多研究其它应用的细节。有时间可以尝试画画图标，这是个细致活。