5步搞定页面布局

Content：

 step 1：确定页面的任务目的
 step 2：信息元素的组织分类
 step 3：对组块进行排版布局
 step 4：权衡平台规范和用户的使用习惯
 step 5：页面排版的设计验证

---

step 1：确定页面的任务目的

“明确当前页面用户的任务和目的，以及产品的需求。”

• 判断一个页面的优劣
  有用：最重要的衡量标准，满足用户和产品的需求；
  易用：架构清晰、流程清晰、不需要思考
  好用：友好和充满情感化

• 案例 Case：网易严选详情页
  用户需求：
   1、查看心意的产品详情：价格、规格，然后进行购买；
   2、查看用户评价，帮助最初判断；
   3、先收藏起来，稍后购买；
  产品需求：
   1、用户购买转化率：进入页面就能够进行购买；
   2、将商品信息分享给其他人；

---

step 2：信息元素的组织分类

卡片分类：让用户自己对功能进行分类；

• 卡片分类的应用场景：
   信息架构、导航设计、页面设计

• 案例 Case：网易严选详情页
  用户需求——>功能：
   1、商品详情（包含各种详细的信息）
   2、商品简介（名字、图片）
   3、商品价格、运费、销量、规格（尺寸、颜色等）、数量
   4、用户评价
   5、购买、收藏
  产品需求——>功能：
   1、分享；
   2、喜欢；
   3、购买；
  使用卡片分类法：
  

  商品详情页

备注：如果有成熟、已经形成习惯的分类，直接用已经有的；

---

step 3：对组块进行排版布局

设计原则（非全部）

一、清晰的视觉引导

1、用户固有的阅读习惯
用户通常有从左往右阅读的习惯

视觉热点图

2、对角线法则
用户的视觉中心往往是从页面的左上角开始，终止于右下角；

对角线法则

二、显示

清晰的页面逻辑关系，突出主要任务流程

格式塔关于逻辑关系的应用：点（距离）、线（就是线）、面（块）

点线面区分逻辑关系

三、弱化

一些功能优先级较低，不需要用户第一时间能够区分出来，减少认知压力

1、视觉区分
button样式、颜色区分...

微信登录页

2、增加操作步骤
除了视觉上的区分外，也可以通过增加操作步骤，来有意增加么某些任务难度

易信 VS 微信

四、删除

删除不必要的功能；

• 必要的功能:
  1）关系到用户日常使用体验功能的功能
  2）能消除他们挫折感的功能
  其他的不必要的功能都能有针对性的删除

  
  
  删除二次验证密码功能

五、隐藏

有些信息并非主要任务流程中必须存在的，但是却又不能删除的“鸡肋”。

除了可以隐藏一些“鸡肋”功能外，一些高阶功能，普通用户比较少会用到，只有高级用户才会用到

六、影响因素：操作频率

右手为例

七、距离和面积（- -）

费次定律：用户使用字典设备到达一个目标的时间同以下两个因素有关：距离（D）和目标大小（S）
 1、距离越长，所用时间越长
 2、目标越大，所用时间约短

八、情感化设计（好用）

情感设计例子

九、动效

动效不在于酷炫，而是在体验的一部分

案例 Case：网易严选详情页

---

主要任务：

购买到心仪的产品

设计主线：

吧杂乱无章的功能点根据用户的期望及目标以正确的次序组织起来

次要任务：

浏览、选择、对比、收藏、加入购物车、充值等等

设计支线：

次要行为流是否能对用户完成主要行为流产生必要的帮助

设计策略

1、帮助用户快速获取商品信息
2、较为高效易用的购买流程
3、最有能够提供友好的用户体验

线框图

尺寸：360*640，较通用

---

step 4：权衡平台规范和用户使用习惯

• 问题：
  1、实际设计中，针对不同平台，我们需要设计几套方案？
  2、如果我们人力有限，能否只设计一套方案？这一套方案该怎么提供？
  3、如何以最低成本来谁家两套（安卓 & iOS）方案？
  4、除了两套方案外，有没有更好的解决办法？

---

step 5、页面排版的设计验证

你的设计方案能够同时满足用户和产品需求？
——实践是检验真理的唯一标准

• 关于借鉴与设计的三个阶段
  1、为了借鉴而借鉴
  2、为了避免借鉴，而差异化设计
  3、为了用户习惯而设计

• 交互设计师工作中最常用到快速验证方法：
  ×标准用户测试
  × 线上用户反馈
  × 数据表现
  √ “交互”专家评估
  √ “粗暴”的用户测试

• 专家评估是一种专家评审法，由几个评价者根据通用的可用性原则和经验来发现系统潜在的可用性问题
   1、邀请可用性评估专家
   2、每一个评估人员进行1—2小时的使用系统
   3、以可用性启发为基础，让评估人员对用户界面进行系统性的检查，找出存在的可用性问题
   4、之后提供一份独立的报告，在报告中应包括可用性问题的描述，问题的严重性以及改进的建议
   5、构建一个队系统的评价并尝试找出解决方案

• “交互”专家评估
  1、邀请交互专家
  2、系统评估
  3、需求交互&可用性问题
  4、整理结果
  5、修改及排期

• “粗暴”的用户测试
  1、不拘泥与形式的原型
  2、有针对性抓取同时进行测试
  3、可以任务走查，也可是AB测试
  4、获取测试结果后快速优化

---

End.