微观设计拆解

微观设计3个大领域

一. 用户调研
二. 交互设计
三. 视觉设计

用户研究要点

交互设计关键点

  • 整体框架:设计目标,网站地图
  • 时序图&关键路径(行为和互动)
  • 导航
  • 排版(布局)
    1. 页面模块
    2. 模块组件化
  • 内容(文案)
    1. 话术和名词定义
    2. 异常状态提示

视觉设计关键点

视觉UI KIT
- 色彩
- 图片
- 字体
- 图标

设计原则( 有糟糕的设计,违反了什么设计原则?)

  • 交互原则:不允许出现的交互( 点线面元素组合的原则, 格式塔心理学: 亲密,对比,对齐,重复 (间距研究)
    1. 内容少的情况下,一屏显示完
  • 视觉原则
    1. 不允许出现的视觉

检查点

交互设计检查点

####整体
1. 就是什么角色在什么时间、什么地点、做了什么动作、解决了什么问题,达到什么样的效果?
1. 基于这个流程去思考如何通过设计去满足用户需求,达到目的。
2. 如何画繁为简?
1. 什么样的功能可以让用户最直接最高效地完成他们想做的事?
2. 怎么把复杂的概念和流程变得简洁明了?
3. 怎么让产品变得更符合用户的使用习惯?
4. 怎么利用产品的设计引导用户形成更好的习惯?
5. 怎么在不影响产品盈利的情况下最大程度地满足用户的要求?
6. 怎么能让用户喜欢一个产品喜欢到会推荐给自己的朋友?

1. 行为和互动Behaviorand interaction

  • 是否告知、引导用户可以做什么?
  • 是否告知需要进行哪些步骤?
  • 是否告知需要多少时间完成?
  • 是否告知第一步做什么?
  • 是否告知输入/操作限制?
  • 是否有必要的系统/用户行为反馈?
  • 是否允许必要的撒销操作?
  • 是否页面上所有操作都必须由用户完成?
  • 是否已将操作步骤点击次数减至最少?
  • 是否所有跳转都是必须的(无法在当前页面呈现) ?

2. 架构和导航Architecture and navigation

  • 是否采用了用户熟悉或容易理解的结构?
  • 是否能识别当前在网站中的位置?
  • 是否能清晰表达页面之间的结构?
  • 是否能快速回到首页/主要页面?
  • 链接名称与页面名称是否相对应?
  • 当前页面的结构和布局是否清晰?

2. 布局和设计Layout and design

  • 是否采用了用户熟悉的界面元素和控件?
  • 界面元素和控件的文字、位置、布局分组、大小
  • 颜色、形状等是否合理、容易识别、一致?
  • 界面元素/控件之间的关系是否表达正确?
  • 主要操作/阅读区域的视线是否流畅?
  • 其他文本(称谓、提示语、提供反馈)是否一致?

3. 内容和可读性Content and readability

  • 文字内容的交流对象是用户吗?
  • 语言是否简洁、易懂、礼貌?
  • 内容表达的含义是否一致?
  • 重要内容是否处于显著位置?
  • 0是否在需要时提供必要的信息?
  • 是否有干扰视线和主意力的元素?

视觉检查点

  1. UI是什么?(这个弄清楚了,也是一个进步)
  2. IOS的图标是多大的,我做多少像素的圆角了?
  3. 字体是做多大了?有没有想规范了?
  4. 按钮要做多大了才好点击了?
  5. 各个栏目的高度,间距又是多大比较合适了?