《Design System》章节知识概念梳理(1-3)

866 阅读8分钟

阅读译文版本:mp.weixin.qq.com/s/zF_V7iHam… 十分感谢 C270 大大翻译

原书购买地址:www.smashingmagazine.com/printed-boo…


因为自己在实习时参与的项目以及毕业设计都是组件库的驱动、设计与实现,需要设计、Android和iOS共同配合完成,但自己对于设计的很多相关概念并不了解,因此在今年四月的时候找到这本《Design System》来阅读,想由此了解国外的设计界大厂对于设计体系的探索认知,从而更好地处理工作中遇到的问题。

阅读后收获良多,做一个知识概念的学习记录,这一篇是第一章到第三章,之后会更新后续的学习记录。

为了更便于理解,也更适用于我所应用的场景,书中名词一致修改:

  • 设计模式 -> 设计元素
    • 功能性模式 -> 功能性元素
    • 感知性模式 -> 感知性元素
  • 设计模式库 -> UI 组件库(一个广义的“UI组件库”不仅仅包括「组件」这种功能性设计元素,也包括「风格」这种感知性设计元素)
  • 模块化 -> 组件化
  • 工程师 -> 开发者

一、设计体系

1. 设计体系

「设计体系」:服务于数字化产品设计的一系列具有内在关联性的、组织有序的设计元素与实践方法。

  • 「设计元素」:任何可复用的界面组成要素,包括按钮、文本框、图标、配色、字体,以及可复用的功能流程与交互行为等等
  • 「实践」:在团队当中创建、提炼、使用和共享这些元素的过程。 设计体系的目标:通过一系列具有内在关联性的设计元素与实践方法来提升设计流程的成本效益,最终推动产品目标的实现。

2. 设计元素(设计体系的核心与基石)

设计元素的类型

  • 「功能性元素」:由产品的核心功能及其所在领域所决定的设计元素「实体化的、可执行的部分」
  • 「感知性元素」:由产品的气质(或品牌形象)决定,同时又进一步塑造了产品带给人们的感知的设计元素「描述性的」

(包括风格、文本样式、配色、图标风格、空间与布局、特定的形状、动效、音效等等。)

离开了感知性设计元素,对于那些领域相同且功能相似的产品,人们将难以分辨它们所属的品牌。

「设计语言」:一系列具有内在关联性的设计元素共同定义了产品界面的设计语言。

为了使设计和开发的工作更加有前瞻性,使设计和开发的沟通更高效,需要「能够被清晰定义、描述和复用的设计元素」。 它是:

  • 一种可以执行与复用的标准
  • 一种体系化的设计思维模式
  • 具有复用能力
    • 避免设计师过多地聚焦于设计元素本身,而将更多精力用于对设计需求的思考
    • 避免开发者过多地耗费精力于界面元素样式的调整,而将更多精力用于对业务功能的实现

3. 协作语言

语言是协作的基础。团队在进入实际工作流程之前,就应该对大家需要统一使用的工作语言进行讨论、评审和确认。

「工作语言」的应用

  • 从高层面的需求概念描述
  • 日常设计决策讨论中的表达方式

以此为基础,对于设计元素和相关文件的的命名方式才能在团队范围中保持统一。不仅应该定义命名,还要对设计元素的使用和认知进行详尽的描述与统一。因此,需要行之有效的提炼与共享协作方式:UI 组件库。

4. UI 组件库

「UI 组件库」:收集、整理并共享设计模式的典型工具,包含对于设计原则及元素使用方法的规范性说明

  • UI 组件库的历史发展

品牌识别文档的扩展内容 -> 界面设计模式 -> UI 组件库静态 PDF -> 动态“代码库”

  • UI 组件库的局限性

组件库 ≠ 设计体系,组件库仅是构造高效设计体系的工具,无法为设计产出的质量担保,但可以帮助修正问题,但设计质量的提升不能完全依赖工具。

组件库无法修复“坏”设计:组件自身的设计问题、组件的错误使用问题..

协作是组件库的基石,需要在团队当中进行诠释和沟通,以确保所有人都有着一致的认知,正是这些诠释和沟通决定着组件库能否具有长久的实用性。

组件库并不会束缚创意,它只会反射出设计体系本身的特征。如果设计体系对于创意试验更具包容性,那么组件库同样可以表现出这一点,使创意型工作变得更轻松。

需要将组件库和实践方法进行统一整合的系统化机制,以坚实的设计语言为基础,组件库才能真正成为高效能的设计协作工具;否则,它将只是一套零零散散的组件展示而已。

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

通过观察其各个组成部分能否有效协同促进产品目标的实现来进行判断

  • 统一目标

在高效能的系统当中,各个子系统之间都是高度关联且目标一致的:设计的逻辑会体现在前端实现的架构当中,设计元素遵从于规范标准,设计语言特质在设计方案、代码及 UI 组件库中都会有着清晰的体现。这类系统的运作方式当中处处体现着和谐,包括高效的功能流程和一致的用户体验。

6. 体系化设计思维方式

  1. 分析产品:目标用户、产品的核心目标、产品气质
  2. 制定设计原则:以原则为中心,决定每一个设计决策
  3. 关键行为 -> 功能性设计元素
  4. 视觉样式 -> 感知性设计元素
  5. 统一协作语言

二、设计原则

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

好的设计原则具有独特性,会促进设计师寻找角度进行思考。

  • 详实可考:基于特定的产品情境做细化
  • 切实可行:把形容词动词化,把感性认知指标化,并搭配实例进行诠释 “简约” -> “移除不必要的内容”
  • 观点明确:诠释面对冲突要素时的优先级与平衡性
  • 易懂易记
    • 反复运用与强调
    • 控制设计原则的内容数量(3-5 个)

Eg. Airbnb 的四项设计原则:”统一”、”通用”、”图形化”、”交流性”;

Eg. Spotify 的 ”TUNE” 原则:Tone、Usable、Necessary、Emotive(”悦目”、”易用”、”必要”、”情感”)

2. 如何定义设计原则

  • 以目标为始:设计原则必须符合产品目标并有助于产品特质的表达

Eg. TED 产品目标”将理念传达得致远、致广。” -> 设计原则”追求持久适用,而非盲从前沿”

  • 寻求多方意见:团队共同定义,整合新老员工的认知反馈
  • 聚焦于目标受众:确认设计原则的目标对象与受众
  • 测试与迭代

设计原则塑造着设计决策,后者也会反向推动前者的改变,需要不断测试、验证与修正。 将设计原则适用性评估融入到设计评审当中,持续考量设计原则能否与当前产品发展阶段保持契合;如果不能,则对设计原则进行迭代。

3. 从设计原则到设计元素

  • 原则决定着设计元素的选择与运用
  • 设计元素是“单词”,设计原则是“语法”
  • 元素的迭代也会反向影响原则的进化

三、功能性设计元素

功能性设计元素可以是简单而独立的,也可以被组合成为更加复杂的元素。

1.关键行为与功能性设计元素

设计元素是界面行为逻辑的具像化体现,因此要保证它们所承载的产品目标及关键行为是相对稳定的,其外观及交互层面的特征可以稍做变化。

2.如何定义功能性设计元素

关键:理解功能性元素与设计目标、关键行为之间的重要关联

  • 创建设计元素地图:以用户体验不同阶段罗列
  • 开展界面清查:汇总统一组件的不同场景(每几个月就需要一次)
  • 从“行为”的角度理解设计元素:“它是什么” -> “它用来做什么”

如果耦合表现形式与内容类型,会导致使用情境受限

Eg.“课程 banner” -> “推广内容”

  • 梳理信息架构:单个组件含有的要素,判断层级关系和是否是可选展示要素 -> 开发者搭建框架更清晰
  • 衡量同类元素的权重排序,描述各自的使用规则
  • 将内容作为变量:从目标层面入手,聚焦于设计目标的定义与实现,而非对特定的内容进行设计

To Be Continue~

欢迎催更(并没有人你醒醒