《蝶变:移动用户体验设计之道》结合云之家移动办公产品的实际案例,分析了各类不同场景下产品的设计方法,详
细介绍了如何打造一款具备优秀用户体验的智能手机App,主要内容包括企业用户研究、To B
产品设计研究、交互和视觉设计技巧、平台建设和生态系统设计技巧和相关的案例及经验总
结。书中包含大量实际调研数据,对设计的迭代过程进行了充分展示,侧重实战经验,并非
空洞的设计思想和理论。
《蝶变:移动用户体验设计之道》适合用户体验设计领域的从业者、图形界面设计师、交互设计师、用户研究员、产
品设计规划人员、企业服务产品设计人员、移动办公产品行业相关人员阅读,也适合交互设
计、用户体验相关专业的学生阅读,还可作为相关专业培训机构的参考用书。
金蝶作为企业服务领域的老兵已经深耕B端市场25年,旗下云之家产品也已经在移动办公领域走过了8年时间。与C端产品不同,B端产品需要了解企业,要为客户提供*为专业的服务,在这一点上金蝶云之家团队有着丰富的经验。金蝶云之家用户体验部拥有20多名经验丰富的设计师,不仅年轻有创意,还致力于为客户打造专业的产品。
邓俊杰 金蝶云之家用户体验部总监,首席用户体验架构师。曾就职于华为技术有限公司,任交互设计师、设计主管、高级产品经理等职位。在用户体验相关领域工作13年,著有设计发明专利文章20余篇。
第 1 章 企业用户研究方法探讨
1.1 发掘用户真实的需求
1.2 如何设计问卷才能收集到高质量的数据
1.3 企业实地访谈启思录
1.4 企业用户访谈案例
1.5 可用性测试:任务评估模型与计量方式
1.6 论用户研究员的自我修养
第 2 章 To B 产品设计研究
2.1 关于用户故事地图的多种用法
2.2 用户画像烹饪课
2.3 产品设计需要考虑完整场景
2.4 基于场景进行的 To B 产品设计
2.5 如何做好 To B 产品需求
第 3 章 交互和视觉设计技巧篇
3.1 格式塔原则在移动办公设计中的运用
3.2 费茨定律在移动办公设计中的运用
3.3 表单设计技巧
3.4 重要的视觉设计原则——对比
3.5 黄金分割在界面设计中的应用
3.6 如何做好视觉设计走查
3.7 如何提高文本易读性
3.8 移动办公产品设计案例
第 4 章 平台建设和生态系统设计
4.1 为什么要构建平台控件库
4.2 设计规范和组件化
4.3 快速建立控件的方法
4.4 YunDesign 产品设计原则
4.5 职场社交在移动办公产品中的探索
第 5 章 设计案例精选
5.1 如何利用签到提高二次传播
5.2 智能审批设计探索
5.3 审批表单设计实践
5.4 To B 直播场景设计
5.5 CRM 产品设计总结
5.6 CRM 连接 ERP 项目
5.7 如何提升报表体验
第 6 章 设计能力提升篇
6.1 交互设计背后的心理学原理
6.2 设计用户的情绪
6.3 如何解决傻瓜式交互动画
6.4 产品设计师常常忽视哪些实际上很重要的事
6.5 如何开展竞品分析
6.6 如何创造体验、创造价值
6.7 设计师应该如何跟程序员合作
第3章 交互和视觉设计技巧篇3.1 格式塔原则在移动办公设计中的运用作者:王梓铭1. 格式塔原则首先简单介绍一下格式塔原则,它分成五个部分:(1)相近(Proximity):距离相近的各部分趋于组成整体;(2)相似(Similarity):在某一方面相似的各部分趋于组成整体;(3)封闭(Closure):彼此相属、构成封闭实体的各部分趋于组成整体;(4)连续(Continuity):人们倾向于完整地连接一个图形,而不是观察残缺的线条或形状;(5)简单(Simplicity):具有对称、规则、平滑的简单图形特征的各部分趋于组成整体。2. 说明与举例1)相近(Proximity)人们通常把位置相对靠近的事物当成一个整体,下面用几幅图来说明一下。如图所示,同样都是16个圆形,左图你会把16个圆形当成一个整体;但是右边那幅图,上面8个圆形和下面8个圆形各自靠得更近,所以你会把上面8个圆形当成一个整体,把下面8个当成另外一个整体。 ▲ 相近示意图1 ▲ 相近示意图2这里需要注意的是,相近性作为第一条原则,它的“权重”非常大,大到可以抵消其他原则,例如为上面的圆形添加颜色,甚至改变其形状,人们也会把相近的事物当成一个整体。那么相近性原则的实际应用,又有哪些呢?最常见的地方就是一些功能列表页面,例如设置,或者像微信的“发现”页面那样的功能列表。大家会把“扫一扫”和“摇一摇”当成一个整体,而把“购物”和“游戏”当成另一个整体,这样可以让界面显得更加清晰,同时还能突出重点。这个列表的两头实际上是最突出的,像“朋友圈”和“小程序”。如果没有使用格式塔的相近原则,界面就会显得非常杂乱了。
▲ 微信“发现”页面示意图iOS系统的设置,也通过位置亲疏关系来体现分组。
▲ iOS系统的设置支付宝首页的元素虽然很多,但是根据相似性可以清晰地分为几组。
▲ 支付宝首页2)相似(Similarity)人们会把那些明显具有共同特性(如形状、大小、运动趋势、方向、颜色等)的事物当成一个整体。例如下方第一幅图,大家会把同行的正方形当成一个整体,把其他圆形当成另一个整体。第二幅图,人们就会把大正方形当成整体,把小正方形当成另一个整体。
▲ 相似示意图1而这里需要注意的是人们对形状、大小、共同运动、方向、颜色的“感受权重”是不一样的,在这里颜色属性会覆盖其他属性的影响。左边这幅图,大家会把同行的正方形当成一个整体,加了颜色后的右图,就变成竖列圆形和正方形是个整体了。