专栏名称: Beforweb
为网而生 - 原创译文博客 - 关注移动、VR及互联网产品的用户体验设计。
目录
相关文章推荐
51好读  ›  专栏  ›  Beforweb

《设计体系》全书知识架构

Beforweb  · 公众号  · VR  · 2018-08-27 12:59

正文

Design Systems 全书译文是妥妥地发布完毕了,期间我个人学到很多,不知各位如何。对于学习而言,读一遍书远远不够,特别是本书这样针对一个大而模糊的概念进行解析与实践探索的状况更是如此。


所以我有在做一系列 知识提炼 ,一方面便于自己回顾、消化和参考,一方面也想分享出来供各位深入学习,这样整个事情才算完整。“知识提炼”包括多种形式和角度,例如今天这样文字版本的全书架构,以及关于设计体系“实体构成”和“实践框架”的脑图,包括实践案例等等,或许可以随着逐渐完善而放出。



本次内容分为两部分:首先是 全书目录 ,简明扼要,供各位直接翻阅;然后是更为详细的 各章节内容架构 ,将全书的知识要点一目了然地呈现出来,便于回顾或有目标地阅读。


还不大了解《设计体系》C版全书翻译项目的朋友,不妨参考之前的“ 广而告之 ”一文了解更多背景信息及相关声明;如果你喜欢C译版,可以通过文末的“ 喜欢作者 ”为我提供咖啡支援,随缘。


全书目录



全书知识架构


第一章 设计体系

Design Systems



“设计体系”是指服务于数字化产品设计的一系列具有内在关联性的、组织有序的设计模式与实践方法。其中,“模式”指代任何可复用的界面组成要素,包括按钮、文本框、图标、配色、字体,以及可复用的功能流程与交互行为等等;“实践”则是关于如何在设计团队当中创建、提炼、使用和共享这些模式。


知识架构


  • 设计体系的定义与组成要素

  • 设计模式

    • 设计模式的意义

    • 设计模式的类型

  • 协作语言

  • 设计模式库及其局限性

    • 模式库的历史发展

    • 模式库不是万金油

  • 如何定义设计体系的有效性

    • 统一目标

    • 识别问题

  • 体系化思维方式的范例:十分钟食谱网站

    • 分析产品的目标与价值

    • 制定设计原则

    • 关键行为与功能性设计模式

    • 视觉样式与感知性设计模式

    • 统一协作语言

阅读 “第一章 设计体系” ›



第二章 设计原则

Design Principles



在本书中,"设计原则"特指可以帮助团队定义优秀设计的本质及实现方式的指导原则,也就是关于如何在你的团队与产品当中实现最优设计的标准化共识。


设计原则可以是宏观的,也可以是微观的,可以基于特定的产品项目,也可以具备长久的战略性,其具体形式取决于不同公司与团队的情况;最重要的是能否通过设计原则来有效地帮助团队塑造设计思维模式,把控设计方向。


知识架构


  • 有效的设计原则具备哪些特质

    • 详实可考

    • 切实可行

    • 观点明确

    • 易懂易记

  • 如何定义设计原则

    • 以目标为始

    • 寻求多方意见

    • 聚焦于目标受众

    • 测试与迭代

  • 从设计原则到设计模式

    • 原则决定着模式的选择与运用

    • 模式是“单词”,“原则”是语法

    • 模式的迭代会反向影响原则的进化

阅读 “第二章 设计原则” ›



第三章 功能性设计模式

Functional Patterns



功能性设计模式是产品界面的实体化组成要素,其存在目的通常是帮助用户完成特定的操作行为。


目标决定着设计模式的功能作用,进而决定着其信息架构与实际呈现方式。充分理解设计目标,理解我们希望通过模式来鼓励怎样的关键行为,这将有助于我们定义更具健壮性与灵活性的设计模式;我们在基于现有模式扩展其承载内容的范围时,也可以更好的把握尺度,避免逾越其原本的设计目标。


知识架构


  • 功能性设计模式的特质

  • 关键行为与功能性设计模式

    • 如何定义功能性设计模式

      • 创建设计模式地图

      • 开展界面清查

      • 从“行为”的角度理解设计模式

      • 梳理信息架构

      • 衡量模式的权重

      • 将内容作为变量

阅读 “第三章 功能性设计模式” ›



第四章 感知性设计模式

Perceptual Patterns



产品界面设计中的感知性设计模式大致包括配色、字体、图片与图形风格、空间与布局、特定的形状、交互感知、动效、音效,以及所有对这些要素进行组合运用的特定方法。


很多时候,我们会将所有这些要素视为产品最外层的表现风格或主题皮肤。但实际上,感知性设计模式根植于品牌核心层面,并且同样需要随着产品的发展而保持进化。清晰有效的感知性设计模式是构筑品牌差异化的重要手段。


知识架构


  • 感知性设计模式有助于品牌特质的体现

  • 感知性设计模式将局部连接为整体

  • 探索感知性设计模式

    • 情绪板

    • 风格磁贴

    • 元素拼贴

  • 迭代与精进

    • 在品牌风格与一致性之间寻求平衡

    • 关于“标志性时刻”

    • 小规模测试

    • 在品牌风格与业务需求之间寻求平衡

  • 团队练习:识别标志性设计模式

阅读 “第四章 感知性设计模式” ›



第五章 协作语言

Shared Language



如果一个界面元素没有经过恰当地命名,进而无法在团队内部形成统一认知,那么它就无法成为设计体系当中的一个具有实用价值的组成要素。通过命名,你便为某个元素赋予了用途。


好的命名方式意味着高度聚焦,易于记忆,并能体现设计模式的目标用途,必须令设计师明白其所指,进而意图明确地进行使用。


知识架构


  • 设计模式的命名方式

    • 探索最适合团队的命名方式

    • 好名字是基于隐喻的

    • 好名字是有个性的

    • 好名字可以体现目标用途

    • 团队协作

    • 建设贡献渠道

    • 通过用户测试命名方式

  • 在团队内部推广协作语言

    • 命名规范的可视化

    • 日常用语的标准化

    • 纳入新人培训流程

    • 定期同步

    • 鼓励跨职能合作

    • 编写词汇表

阅读 “第五章 协作语言” ›



第六章 设计体系的特质参量

Parameters Of Your System



设计体系并非以模式库的构建为始、为终,其背后有着一系列的影响要素,包括团队组织架构、团队文化、产品类型、设计流程等等。


没有任何一套即有模式可以完美适用于你的团队。有时我们会觉得其他公司的设计体系实现得非常正确,进而尝试模仿。实际上,任何设计体系都有着各自的实现方式,而每种实现方式都有其利弊。最适于你的团队的实现方式,应该是你能充分了解并掌控其利弊的那一种。


知识架构


  • 实践规则:严格或松散

    • Airbnb

      • 标准化规范

      • 设计与开发的精准同步

      • 严格的新模式入库流程

      • 详实全面的设计文档

    • TED

      • 草图示意

      • 简化的文档

    • 了解利弊,选择方向

  • 构造方式:模块化或整合化

    • 模块化的优点

      • 敏捷度高

      • 成本效益高

      • 易于维护

      • 适应性强

      • 效率高

    • 整合化的优点

      • 适用于特定类型

      • 整体性与连贯性强

      • 快速构建,无需考虑扩展与复用

      • 流程聚焦,易协调

    • 模块化与用户体验

      • 建筑行业案例

    • 模块化程度与项目特质

    • 了解利弊,选择方向

  • 管理机制:集中式或分布式

    • 集中式

    • 分布式

    • 了解利弊,选择方向

  • 小结

    • Airbnb

    • TED

    • FutureLearn

    • 哪类设计体系更适于你的团队

阅读 “第六章 设计体系的特质参量” ›



第七章 前期规划与起步

Planning And Practicalities



获取高层的认同和支持并不容易。有些团队会从现有产品当中收集一批典型的不一致性问题,呈交给高层并提出变革意向;不过很多时候,这种方式还不足以令管理者们意识到改进的真实价值。


为了获取支持,你需要让高层意识到,一套行之有效的设计体系能够帮助公司以更高的效率、更低的成本实现业务目标。换句话说,你们需要将其作为商业案例进行演示。


知识架构


  • 如何获取高层的支持

    • 利益演示,量化对比

      • 节省设计与开发成本

      • 节省全局迭代成本

      • 加快上线速度

      • 统一品牌认知

      • 建立品牌信任

      • 提升协作效率

    • 通过首轮产出争取资源

  • 如何起步

    • 确保目标清晰一致

      • 界面的体系化定义工作

      • 工作流程与管理机制的标准化工作

    • 提升工作透明度

      • 内部同步

      • 博客

    • 打造协作文化

      • Slack

      • 模式墙

      • 新人培训

      • 同步会议

      • 跨职能合作

      • 工作坊

      • 游击宣传

    • 保持团队动力

      • 先主体,后精进

      • 渐进与并行

  • 如何培养体系化的思维模式

阅读 “第七章 前期规划与起步” ›



第八章 功能性设计模式的体系化

Systemizing Functional Patterns



从用户历程的每个阶段当中识别出最为关键的用户需求与对应的行为,将它们解构为具体的任务,以此为分类标准将界面元素进行归类,并进行设计模式定义。


你在第一次实践当中或许会被实际产品当中大量的界面元素及设计模式吓到。没关系,你无须一轮搞定全部;从关键行为所对应的核心设计模式入手,一次构建一个类别。最重要的是保持经常性的实践。


知识架构


  • 目标导向的界面清查

  • 界面清查的准备工作

    • 时机

    • 团队

    • 打印页面

  • 第一步:识别关键行为

    • 如何识别

      • 以界面为单位

      • 以用户历程的不同阶段为单位

    • 选择恰当的用词

    • 解构关键行为

  • 第二步:按照目标将元素归类

  • 第三步:定义设计模式

    • 考量特定化程度

    • 梳理信息架构

  • 第四步:为设计模式命名

    • 从行为角度命名

    • 体现复用度

  • 重复上述步骤,逐步降低颗粒度







请到「今天看啥」查看全文