手机网站注意细节

一般情况下都是先做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用户，页面的跳转会对用户产生更大的心理效力，如果在手机页面中能把信息合理的展示在一个页面中最佳。如果非要跳转，咱们可以用些假装不是跳转的方式，比如展开，浮出等。减少用户产生的不安全感。

6、手机网站表单设计细节：在表单中尽量避免设计输入框，虽然很多手机用户喜欢打字聊天，但是让我在手机网站上没有任何输入的欲望，这一点从目前流行的手机APP上就可以看出，尽量不让用户登录，只需要登录一次下次永远不用登录了，手机网站的输入框设计容易被人所忽略，如果强迫输入还会引起人的抵触情绪，不是一个合格的设计，应当尽量减少！

7、网站对于触摸屏的功能设计细节：手机网站需要支持一定的触摸功能，如一些栏目页面的滑动，触摸好比电脑站的鼠标，只需要点几下就能浏览到想要的内容，而在手机站就用触摸来代替了，如一些导航的触发，功能的切换等都需要支持触屏，方便用户操作，毕竟手机网站设计的初衷不只是为了美观，也是为了实用。

8、设计排版细节：手机或移动设备由于显示屏的大小限制，局限了它并不能像电脑网站那样具有各种各样的排版，追求多栏目排版只会让页面看起来杂乱无章，无法集中精神去浏览需要的内容，页面看起来无从下手。正常情况手机排版设计也就只是通栏或者左右两个版块进行分布，还要进行适当的留白，留白是有学问的，合理的留白能使页面简洁的同时让整体风格显得大气有档次！

9、手机网站的响应式设计：虽然字面上是为手机做的网站，但其实是指以手机为代表的移动设备，除了兼容手机大小的分辨率之外，还要对平板电脑甚至是智能手表进行兼容，这种情况下能够解决多种分辨率下的响应式设计就出现了，对每种屏幕大小设计出一套排版方式，比如在电脑上浏览网站的产品或许是一排四个来设计，但在平板上就会自动变为一排三个的响应设计，到了手机上会显示一排两个响应设计，针对不同屏幕进行变换不同排版.