移动端设计实践优化

移动端虽然限于手机性能、网络等制约因素，不能达到如同PC的优秀效果，但移动端也有其独有的优势，比如可以通过手机特有的重力感应功能做视差滚动，“加速度”传感器实现“摇一摇”等优雅有趣的人机交互。

影响移动端网站首页的可视元素

• 网页加载时间
• 网站格式[设计与响应]
• 搜索可见
• 点击呼叫
• 登录可见
• 社交媒体功能
• App展示

---

1. 网页加载时间
   网页加载流程：

   1. 解析html结构
   2. 加载外部脚本和样式表文件
   3. 解析并执行脚本代码[可能存在部分脚本阻塞页面加载]
   4. 构建dom树完成[DOMContentLoaded]
   5. 加载图片等外部文件
   6. 页面加载完毕[load]
   

   ---

   优化本质：减少请求数量、减少请求数据

   1. 图标合并
   2. 使用base64减少不必要的网络请求
   3. 图片延迟加载
   4. js／css按需打包
   5. 代码压缩
   6. 图片压缩优化[**]
   7. cdn加速
   8. 缓存
   9. 精简代码
      …

2. 网站格式[设计与响应]
   较少的代码实现合理的网站结构布局有利于减少html的使用面积，进而减少网站的体积，提高下载速度。

3. 搜索可见
   好的搜索功能能增加用户的粘性，同样需要优化。

4. 点击呼叫
   点击呼叫允许客户不离开网站便可以便捷地与坐席联系，且具备可追踪性，有助于网页进行内容更新，减少联络次数，降低运营成本。

5. 登录可见
   用户转化？

6. 社交媒体功能
   信息压力转移？

7. App展示
   用户转化？

---

移动端首页设计规范

首屏作为App或移动web网站的入口，给用户的第一印象很重要，对用户留存也起到一定的作用，但是限于手机网络环境，往往响应速度被作为第一考虑因素，因此，首屏内容可能就要被适当删减，留下更主要关键信息。

1. 控制图片大小

2. 突出主体内容

3. 留取关键信息
   删除无关信息，减少非关键信息。

4. 减少交互或跳转
   删除不必要的交互，以及交互触发请求。

5. 减少网络请求
   静态资源和图片资源合并压缩，删除不必要的网络请求。

---

移动端专题页设计规范

1. 设置安全区
   无论移动端还是PC端，都应该确定一个安全区域作为用户的视触区域，重要信息都应该放置在安全区域内。移动端安全区设定：移动屏幕宽度两侧适当留白，首屏高度做响应适配。

2. 控制图片大小
   专题的头图往往给用户很强的视觉冲击，但是由于移动端网络限制，加载一张图片的等待成本往往比PC上大得多，因此头图的延展区域适合使用纯色、渐变可平铺的素材来减少网络流量，提高加载速度。

3. 字体
   专题页中，主要字号应控制在3个以内，字体尽量使用移动端系统默认字体渲染，避免随意使用字体字号，并且保证字号是整数。
   一般移动端字号是PC端的两倍。

4. 控件交互区域
   移动端往往为指控面板，手指在屏幕热区最小感应是44px，在移动端交互区域设计时，应关注该问题。

5. 减少跳转
   限于手机网络环境，页面的跳转会对用户产生更大的心理不安，因此应尽可能的在一个页面中合理展示关键信息。如果跳转必要，可使用展开、浮出、下拉等方式减少用户的心理效力。