随着手机功能越来越多,这就使得手机浏览网页的用户也就越来越多,因此移动端的页面设计,就变得极为重要,需要从用户的体验角度去设计。
一、先做PC版的页面还是手机版页面
由用户的访问数据来定。
- 一般情况,先做PC端,再进行手机端。因为PC端可以呈现更丰富的内容,达到最好的体验。
- 但有很多情况下,页面的访问更多的来自手机端,比如手游的专题,用户通过微信进入。
- 比如,twitter与instagram的PC页面都是从手机端的延展,继承了手机端的交互,保持了很好的一致性体验。
二、手机版专题页面的注意事项
- 安全宽度与扩展区域让页面适应主流分辨率
- 与PC端做法一致,确定一个安全宽度。
- 重要信息控制在640PX宽度内(以iphone分辨率为安全宽度。)
- 目前主要浏览器在iphone4S下的首屏高度如下,可以根据具体页面投放的渠道做响应的首屏高度。
- 控制图片的大小
- 合理控制头图大小,如果一个页面加载时间超过5s,用户体验性就会很差。
- 在做头部的延展区域(超出640px范围),推荐使用纯色,渐变,可以平铺的素材,使得延展区域可以无缝连接。
- 模糊的背景可以最大限度的压缩图片质量。
- 字体
- 手机中的字号一般上电脑中的两倍。
- 在设计的过程中,也要使用iOS和安卓默认渲染的字体,以便更真实的还原真实环境。
- 在规范手游移动版专题中,主要字号控制在3个,大中小都有一个区间。
- 避免随意用字体字号,并且字号必须整数。
- 控制交互区域适合触控
- 手机专题的主按钮高度大于80px,并且根据活动的需求放在首屏内。
- 文字链接上下的间距大于80px,手指在屏幕上热区最小感应是44px。
- 移动端网页少跳转
- 手机用户的网络环境不如PC用户,页面的跳转会对用户产生更大的心理效力。
- 如果在手机页面中能把信息合理的展示在一个页面中最佳。
- 如果非要跳转,咱们可以用些假装不是跳转的方式,比如展开,浮出等。减少用户产生的不安全感。