如果你是一个React技术栈,PC中后台的前端开发工程师,一定知道 Ant Design,并且熟练使用Antd的组件进行前端开发。但是你阅读过 Ant Design 的设计体系,并且知道其是如何帮助产品和设计师进行产品设计工作的吗?
假如碰到以下 2 个问题:
从上述2个问题的思考延展出一个话题:作为一名前端开发者,需要了解下什么是设计体系
以下知识点都出自于《设计体系:数字产品设计的系统化方法》
设计体系为了实现数字产品的目的而组织起来的一套相互关联的模式和共享实践。使用对象是产品经理和设计师。
设计模式是一种用于解决特定设计问题的可复现、可复用的方案。
在数字产品设计过程中,设计模式受三部分内容影响。
产品与众不同的原因并不在于它所使用的模式的新颖性,而在于这些模式的运用方式,以及它们如何相互配合以实现特定的设计目的。
设计体系的一个主要目标就是“扩展创意方向”。需要将模式明确地阐述并且分享出来。才可以让团队持续可靠地遵循创意方向。
一套相互关联的模式构成了产品界面的设计语言。设计语言在被阐述时,需要确保它可操作、可重现,以一种系统性的方式进行阐述。
在一个团队中工作,设计语言就需要在所有参与产品创建的人之间共享。如果不共享语言,团队成员就无法有效地进行共同创造——每个人都对他们想要实现的目标有着不同的心智模型。
不仅要对语言形成共识,还要对语言的用法形成共识,假如仅仅对按钮这个词的含义达成共识是不够的,还需要对不同背景、不同目的下使用按钮的原因和方法形成共识。
随着设计语言变得更加丰富、更加复杂,需要一种高效的方式来对其进行捕获和共享。
在如今的互联网领域,模式库已经成为良好设计体系实践的重要组成部分。
模式库不仅包含收集、存储和共享设计模式的工具,还包含相应的使用原则和操作指南。
模式库只是有助于设计体系变得更加有效的一种工具,它不等价于设计体系。仅凭工具是无法对用户体验产生重大影响的。模式库是对其背后设计体系的反映。如果没有一套连贯的、集成了模式和实践的设计体系作为基础,这样的组件库的影响将十分有限。
只有将模式库作为构建坚实的设计语言的基础,它才会成为强大的设计工具和协作工具。
如何衡量设计体系的有效性?可以看它的不同部分一起发挥作用以帮助实现产品目的的程度。
只有当设计体系围绕产品目的,综合了设计过程中的成本效益及用户体验的效率和满意度时,它才是有效的。
在高效的设计体系中,不同的子体系为了同样的目的而相互连接,并协调一致:
产品设计的工作流程更高效,用它们创造出的用户体验更有意义,也更连贯。
背景:有这样一群人,他们喜欢健康的食品,但又不想花太多的时间做饭。想象一下我们正在开发一个为这类人提供食谱的网站
第一件事就是弄清楚用户是谁,他们的目标、需求和动机是什么。这个目的是产品的核心,它应该支撑设计和开发决策。
用一句话来表述这个网站的目的:让人们在十分钟内就能烹饪出美味又健康的膳食。
为确保我们所做的所有事情都清晰地体现了产品目的,我们需要建立一些基本原则和价值观。最重要的是参与产品创建的人都认同这些价值观,并承诺实践它们。
例如,十分钟食谱网站团队的每个人都需要了解时间的价值。
我们确定了希望用户实现或让用户有能力实现的主要行为,这会帮助用户实现他们的目标。设计的细节固然会随着网站的改版而变化,但上述关键行为将始终保持不变。这些行为足以体现网站的核心功能模块和交互方式
1、我们希望人们在十分钟之内就能做出好菜。这意味着我们的食谱只需要简单几步就能完成。这些步骤应该简短、清晰且重点突出。兴许我们还可以为每一步标注时间,确保总时长在十分钟以内。
2、我们希望人们的烹饪行为是自发的,仿佛随时都可以开始。他们可以利用现有的材料,而不必准备什么——他们不需要购买不常见的食材。在用户界面层面,这意味着需要使用带有清晰标注的食材缩略图。
我们需要弄清楚,我们希望人们在使用我们的产品有什么感受。
1、我们对健康的食品充满热情,所以希望整个网站都能体现这一点。或许网站要有一种有机、温暖、有益健康的感觉。我们也相信烹饪不需要进行大量的规划和准备,它应该是自发的、有趣的,可以在十分钟内进行试验和创新。
2、最终,我们有了温暖又朴实的配色、手绘的图标、可读性极强的排版、高质量的健康饮食照片,以及一些简单的界面元素和控件。这些风格样式便构成了我们的感知性模式。
设计原则指的是包含团队如何理解好设计之精髓,以及如何体现这一精髓之建议的共享指南。 换句话说,就是团队或产品,对于什么是好的设计,有一致的标准。
弄明白”设计原则“对团队和产品究竟意味着什么,才是对做设计决策有帮助的。
创新究竟需要什么?什么情况下设计会被认为是有用的?如何判定设计是否真的令人愉快?
好的设计原则所定义的特性能以不同方式解读,但需要将其放在特定的产品背景之下。
设计原则应该就如何帮产品解决设计问题提供实用的指导。只有将原则与应用原则的真实案例结合起来,才是最为实际的做法。
设计体系应该有态度、有观点,能让每一个使用它的人都得到创意上的指导。
设计是由我们所做的选择所塑造的。即使需要考虑一些相互冲突的因素,好的设计原则,会承认价值观的冲突,也能帮助确定优先级和平衡点,并给出平衡它们的建议。
团队成员都将它们作为日常工作的基础,用于制定设计决策。持续使用的原则才容易让人记住。
它们应当在日常对话中经常被提及,在演示文档和设计批评中经常出现,在一切能用到它们的地方显示出来。
设计原则必须遵循产品的目的,传递产品的精神。
团队需要形成产品设计的原则共识。
首先为设计自身和同事而写,尤其是设计师、开发人员、内容编辑、营销专家、领域专家,也就是与产品的创建直接相关的人员。
设计原则的目标应该是就“什么样的设计对产品来说是好设计”这一问题达成粗略的共识,并提供如何实现共识内容的实操指南。
随着产品不断演进,设计原则也会不断发展。有可能设计原则在一开始非常宽泛和抽象,但随着时间的推移逐渐变得清晰和具体。也有可能它们一开始是明确的且重点突出,但随着时间的推移逐渐变得空泛并失真。
为了持续改进设计原则,就需要不断地对其进行测试、评估和改进。只有在日常工作中使用它们,并有意识地这样做,设计原则才得以持续改进。
以下问题影响着模式的选择与运用。
原则和模式始终不断地相互影响,相互完善。
功能性模式是界面中有形的构件。它们的目的是让用户能够完成某种行为,或者激励用户完成某种行为。
它们在很大程度上是由产品所属的领域决定的。随着产品的发展,模式也在不断发展。它们的执行、内容、交互方式和显示效果可能会变,但它们所鼓励的核心行为保持相对稳定,因为这是植根于产品目的及其工作原理的。
牢记关键功能性模式的目的,有助于了解设计体系的运转方式,防止设计体系在发展过程中碎片化。
为了确定客户的需求、目标和动机
将功能性模式理解为具有相同目的的多个系列,而非单个页面。哪些行为是在用户轨迹的当前阶段需要去鼓励的?哪些模式可以支持这些行为?网站上还有哪些地方有这些模式,以及它们在那些地方是如何运转的?一个新的模式如何服务于整个设计体系?思考上述这些问题,是系统性地开展设计工作的一部分。
Brad Frost提出的界面清单流程已经成为一种流行的界面模块化方法。
通过这一过程,能看出哪些模式是重复的,并发现需要留意的问题区域。当发现有几十个页眉或弹出菜单,便会开始思考如何构建规范。
界面清单不一定包含所有的内容(尽管所做的第一个清单应当是全面的)。它可以一次仅关注一组模式,如促销模块、页眉或者所有产品展示模块,也可以专门针对排版、配色或动画等制作界面清单。
为了保持最佳效果,应该定期维护界面清单。即便团队已经维护了一个模式库,新的模式也会出现,需要放入整个设计体系。如果每隔几个月就维护一次界面清单,每次做这项工作就只需要花几个小时而已。而且,每次这样做的时候,都会让团队更好地理解设计体系并改进它。
要理解一个功能性模式的目的,需要关注它的作用是什么,而不是你认为它是什么。
要对功能性模式的工作方式达到共识,请描绘其结构:让功能性模块能够有效运行的核心内容。内容结构与模式的目的是密切相关的。
可以试着将相似的模式按照某个维度排在一起, 进行模式库的设计和提炼。
在某个维度上排列模式有助于确保对它们的使用是恰当的,不会在整个系统中争夺注意力。
这样做还有助于防止不必要地重复创建模块。
从目的开始,而不是从内容开始。这样,我们便不会将内容视为已知的资源,而是视为一种假设(hypothesis)。这样做能检测出我们是否已经定义好了模块的目的,以及我们的设计是否符合这一目的。
如果内容总是不能匹配此功能性模式,通常是由以下三个原因中的一个或多个引起的。
产品目的决定了其他的一切:模式的结构、内容及呈现。
了解模式的目的(也即了解需要达成或激励的行为),可以帮助我们设计和构建更加稳健的模块。
这样做可以帮助我们知道一个模式在应用之前有多少可以修改。这样做为整个团队提供了一个共同的参考点,并将模式与原始的设计意图联系在一起,从而减少了重复的情形。牢记目的还会让检测模式的有效性变得更加容易。
如果说功能性模块反映的是用户需要且想要的内容,那么感知性模式关注的则是他们直观的感受或行为。感知性模式并非来自用户的行为和操作,而是产品尽力打造的个性和营造的氛围带来的产物。
数字产品感知性模式的例子包括语气、排版、配色、布局、插图与图标样式、形状与纹理、间距、意象、交互或动画,以及这些要素在界面中的组合和使用的具体方式。
感知性模式通过界面传递品牌,并让品牌被人记住。
在模块化的系统中,想要做到视觉上的连贯统一可能是一件很棘手的事情。
模块是由不同的人根据不同的目的创建的。而由于感知性模式是渗透到系统中各个部分的,因此它们可以将系统的不同部分连接起来。如果这种连接是有效的,那么用户就会感受到模块之间的统一性。
举例一些模式
情绪板是探索不同视觉主题的绝佳工具,定义大致的品牌方向。
定义好了大致的品牌方向之后,便可以使用样式叠片来更加细致地探究多种可能性。
样式叠片其定义为 ”由字体、颜色等界面元素组成的能传递Web视觉品牌精髓的设计交付物。“
将样式集成到产品的过程中,样式的演变还将持续。在更为真实的界面设置中,使用模块和交互,进行品牌上的尝试,对感知性模式和功能性模式的改进都是有益的。
这是典型的迭代过程,不同的模式相互影响,直到最终设计语言得以成形。
产生太多的例外会削弱品牌性,同样,过分关注一致性也会扼杀品牌性。矛盾在于,让设计达到完美的一致性无法确保它依然具有很强的品牌性。有时,这样做反而会削弱品牌性——在一致性和统一性之间存在着细微的差别。
发展感知性模式需要为设计师赋予打破常规的权力,鼓励设计师积极地探索更多的可能性。好的设计体系能在品牌的一致性和创造性表达之间取得平衡。
小的细节可以为用户体验增加深度和意义。当我们为设计的系统化和结构化努力的时候,需要留意那些能让产品与众不同的细节。在构建设计体系的时候,一定要为创造和发展这些时刻而留足空间。
探索新样式的时候,请先在网站的一小块区域进行试验。打破常规的时候要格外小心,留意那些设计体系之外的模式,以及尝试这些模式的原因。如果它们起作用,就将它们应用到网站的其他区域,逐渐将它们融入设计体系。
无论我们如何保护品牌,这些事情都会发生——新的需求需要定制化的模式以及一次性的调整。如果我们没有意识到这些,那么这些例外之处就有可能削弱品牌性。
📚 小茗文章推荐:
关注公众号「Goodme前端团队」,获取更多干货实践,欢迎交流分享~