设计语言有哪些？

设计语言最底层是项目设计语言，具有典型特征和主题，比如医疗项目凸显专业冷静，节日项目凸显热闹氛围。往上一层是产品设计语言，强调个性品牌，比如小视频的设计深色更沉浸，电商从结构到色彩都凸显热闹。很多产品随着发展，形成一些系列平台服务，平台设计语言确保服务“统一规范”。最顶层是生态设计语言，跨设备跨平台和硬件呈现的设计语言。

如何构建设计语言？

设计动手前，按照风格基调具象化拆解分析必不可少，每一个元素的表达手法都要定位清晰。

01 至简 光影艺术图标体系

图标体系化，多场景验证一致性，发现方案一不够极致，造型复杂；方案二具备良好的一致性，但破坏了物体固有的结构，影响识别度。

在一致性的前提下，尝试简化、提高识别度。巧妙的将光影和结构交汇，极简到2个图层呈现主体；语义清晰识别度高；角度渐变光影带来舒适亲和感，15°x角度的精准把控传达专业的品牌特性。因此总结出图标绘制要遵循的法则为识别性、品牌性、愉悦性、一致性。

02 和谐 家族感的色彩体系

a）标准色

初期直播品牌色继承百度App品牌色，随着业务逐渐中台化，需要专属直播色。运用色彩心理学传递给人不同的情绪及心理感受，寻找直播的专属色相，而活力、温暖的红色色调，更能体现亲和有力的产品气质。

红色也有冷暖之分，此时提高色相、饱和度的颗粒度，H色相以350°为起点，以2°递增或递减，S饱和度以5°为阶梯，生成更多色阶（保持相同B明度100），在多界面和真机验证，得出直播专属红（H350 S80 B100），冷暖适中符合平台属性。

b)协调的辅助色

C）调色版

03 考究 新颖独特材质

这种量身打造的稀缺材质运用在运营玩法上，如红包雨玩法，即能凸显平台专业用心的态度，又能强化用户消费行为转化，助力变现增长。

用户激励体系，采用3D玉石润泽质感+动态折射光影，体现有内涵不张扬的泛知识调性，凸显用户独特身份感。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系

作者：百度MEUX 

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

痛点

目前众多的网文产品中，设计同质化比较高，无论是产品视觉或是品牌运营视觉大多都缺乏独创性与统一性。番茄小说想要从众多产品中脱颖而出就需要走出一条合而不同的设计道路。因此提升产品的识别度与消费者对品牌的认知势在必行，设计需探索构建一套属于产品的语言体系。

解决方法

探索番茄小说的设计语言，建立产品认知

1. 文学特性——传统、网络的冷与热

传统文学

文学分为两类，严肃文学（看重语言和细节）、通俗文学（注重情节和故事，浅显易懂）。

周宪《文学理论导引》里定义「文学是以精致语言书写的具有艺术价值的以文本为中心的文化系统。」通过定义可以概括出文学的特点就是具有艺术价值，并且能够通过文字内容带人用户反思或者收获。当人们在阅读文学书籍时是冷静的，只有在这样的心境下读者才能更好的独立思考与分析。因此在氛围上需要给用户提供一个相对沉浸的空间、安逸的环境，通过分析可以提炼出的传统文学情绪关键词：沉浸、冷静、舒适、价值

网络文学

不同于传统文学，网络文学是顺应市场价值而诞生，是文学创作的平民化，让大家能够以网络为载体而发表的文字内容。广义来说，网络文学属于通俗文学的一类，注重情节和故事，通过文字传递的内容更加的朴实、接地气，在创作分类上也更加的多样化，作者可以天马行空的表达自己感受，可以说是在传统文学的基础上，给文字增加了几分烟火气息，也多了几分热闹的感受。

因此通过文学关键词可扩展出网络文学情绪关键词：沉浸、愉悦、烟火气

2. 调研分析

前期通过对小说用户群体与市场的走访调研，并通过数据分析，我们得到了如下结论：

产品用户类型

12-50岁青中年人；后GenX时代；一二三线城市有阅读小说习惯的人群；目前为对生活充满向往的学生与蓝领

产品品牌人格

乐观愉悦（轻松）；品质（书好）；亲民、丰富（书多）

产品视觉风格

品牌色贯穿产品，但不过分使用；视觉为产品功能服务，不做多余的设计；视觉表现多样化，但需要表达相同的产品气质；适度的留白，增强设计空间感

3. 小说产品特性

产品核心词：「沉浸中的愉悦」

正如我们对文学的分析，小说阅读同样是一种独立个体的行为方式，在读书时，我们不希望被人打扰，不希望被琐事细节阻断，我们希望在一个相对安静、舒适的环境下阅读，这是一种沉浸式的感受。

因此这里我们就根据用户的想要的感受，引入「沉浸」的概念——希望能够给读者留下一定的空间，并抛除繁杂打扰，让大家享受阅读与独立思考。其核心是围绕信息内容本身而呈现，设计不再作为独立于内容之外的元素存在，而将着眼于内容本身，为用户打造直观的视觉体验。拉大层级对比，增加适当的留白，在一定程度上增加少许修饰，打破绝对的冷淡。其既能体现出文学的特点，又能够在简约的基础上增加画面的构成感，给用户愉悦的感受。

触感

网络小说与传统文学另外一个最大的区别是触感。

传统文学大多以实体书籍纸张为承载，而网络文学来自于互联网是虚拟的。我们在阅读时，触摸纸张与书本朴实的质感，也能够给读者带来额外的舒适感受，因此如果能以视觉的形式还原用户对书籍的「触感」，不仅能够将网络与实体相链接，也可以帮助用户增加电子阅读的乐趣。

4. 建立番茄小说情绪版

根据归纳出的文学特征，以及调研用户年龄层与喜好，我们可以归纳出番茄小说基础原生关键词。

基础原生关键词

拓展衍生关键词

根据网络文学原生关键词，我们拓展出衍生词

• 沉浸：安静、干净、整洁、内部、深色
• 烟火气：城市、中国风、武侠、绘画、美女
• 愉悦：跳跃、阳光、水果、温暖、火热
• 触感：纸张、磨砂、纹理、褶皱、斑驳

图片搜索、提取情绪版

根据相关的衍生关键词，我们收集大量的视觉图片并将其汇总，借以分析其视觉特征

色彩提取

视觉映射

通过对情绪版的分析，我们可以得出结论并整理出番茄小说设计语言，轻量的色彩、写意式元素、非对称布局、纸纹理噪点

番茄小说设计语言

将传统的冷静沉浸与网络文学的热闹向融合是番茄小说设计语言的重要视觉呈现方式风格

多元化的简约设计+情感化修饰

• 简洁：简约，做不饱和的设计，给用户空间感、想象的余地
• 趣味：暖色+趣味，体现产品的温度与友好
• 风格多样化：视觉多样化体现小说多样性、市井特点
• 质感：增加视觉纹理，给用户带来真实阅读的感受

Logo

番茄的品牌名称基于「、优质」的产品理念，服务于产品设计、品牌设计中。番茄相对于红果是一个更加具象的表达，不仅可提高用户对产品的认知，也能传递小说品牌的理念和态度。基于此，这个理念框架是讲述品牌故事的关键载体。

logo动画展示

小说相关产品logo汇总

在logo的设计上我们将番茄的图形概念化，保留番茄籽，局部的留白让标志同样能表达空间与白的概念。我们选择在白色底上用红色非对称性式logo ，既区别了市面上大多产品logo样式，又能够加深用户对产品的印象，突出了「愉悦」的特性。

选定 logo 并设计图形+文字组合：

在文字设计上，相比正常宋体弱化文字衬线，为了突出空间感，我们扩大了字面拉伸了中宫的占比，这样做不仅提高文字识别度，整体气质也也能够与沉浸的定义相耦合。

品牌色

前期通过情绪版的分析，摘取关键词配色，综合归纳出符合番茄小说特性的的色彩搭配

通过对情绪版色彩的归纳，我们抽取具有代表性的颜色，作为番茄小说的品牌色

辅助图形

从logo中番茄图形的概念出发，提取出以圆、番茄籽、番茄轮廓为基本型的品牌图形元素

官方字体

考虑到官方字体在沉浸式页面中的运用，番茄官方字体的选择与品牌属性相契合的苹方体、宋体。

VI 呈现：

品牌视觉感受：

品牌体现—产品场景

番茄小说给人的感觉是安静、平和、友好。因此在颜色使用中以品牌色配合低饱和度背景色做搭配，突出产品的带给用户的沉浸、愉悦感。

运营场景—运营设计对品牌塑造的意义

第一眼的感受，往往决定了用户对产品的整体印象。目前在番茄小说的产品中，最直观的品牌视觉展示主要以书单活动banner为载体，其做为活动入口本身就处在一个前置的位置，占用空间大且更能吸引到用户的注意。因此，需要对运营焦点图设计精细化的打磨，让用户在打开产品的瞬间，快速塑造产品在用户心中的视觉形象。

番茄小说运营设计——和而不同

运营设计的基本原则

• 信息快速传达
• 促使用户行动

因此番茄小说的运营视觉需要紧密围绕在这个大前提下进行设计，快速传达信息=保证信息的简单化、文字有效性，促使用户行动=画面内容的趣味性、吸引性。

视觉呈现形式

遵循番茄体系，体现小说内核的「烟火」气质，视觉呈现多元化。以运营文案为中心，画面设计贴近内容，降低用户信息识别成本。

品牌运营视觉一期构建：手绘元素+非对称构图+质感

设计规范

运营视觉与品牌调性应是统一的，因此在运营设计的色彩选择需要与品牌配色相呼应，保证视觉与整个产品的和谐性。

运营插图案例

在运营活动中，依然要以产品所传递的气质来进行画面设计，即是保留沉浸的前提下，抽取关键词的某个方向来表达品牌运营所传递的理念。在色彩的使用上可以围绕关键词的方向来选择颜色，以表达内容所传递的信息，可适当使用品牌色作为点缀，但依然需要的保持视觉给人带来的平和感。

总结

作为一个从 0 到1的品牌，番茄小说的设计语言依然在不断的打磨、优化。整体清晰的品牌规划能够保证线上、线下、产品与营销的各个视觉设计环节更加统一，同时也为后续的设计指明方向，助力业务持续发展。

文章来源：优设    作者：今日头条UED

这篇文章来自于 Invision 出品的书籍，围绕规划、设计、构建和实现设计系统的实践经历来指导读者，其中包含了经验丰富专家的真知灼见和一手经验。我很喜欢，也分享给大家，推荐阅读。这是一个系列，一共有 7 章，感兴趣的话，持续关注吧。

20 世纪 60 年代，计算机硬件技术的升级开始超越软件发展的速度。计算机的处理速度变得越来越快，价格也越来越便宜，但计算机软件开发仍然处于缓慢、难以维护的境地，并且还很容易出错。两者之间的差距以及解决这个问题的困境被称之为「软件危机」。

在 1968 年的北约软件工程会议上，道格拉斯·麦克罗伊（Douglas McIlroy）提出了基于组件开发有可能是解决「软件危机」的方法之一。基于组件开发是一种通过复用代码来提高编程潜力的方法，该方法能帮助编程工作更、更易于扩展。这样做既能减少编程工作量又能提升软件开发的速度，让软件更好地运用现代计算机的力量。

在 50 年后的今天，我们又面临着类似的挑战，只不过这一次是在设计领域。在 UI 设计中，设计的角色是在为特定需求量身定做解决方案，所以很难去基于整个应用进行扩展。

你有没有走查过你输出的界面，发现自己使用了几十种类似的蓝色，或者同一个按钮不同的用法，将这些样式组合对应到你设计的每一个 UI 界面，就会意识到一套不成体系的设计是多么的难以维护。

△ 一份 UI 样式走查收集的成果，里面罗列的十几种类似的按钮样式说明之前团队挖的坑有多深。

在这种状态下，设计要跟上开发的速度，公司可以选择做以下三件事：

• 雇更多的人
• 提高设计速度
• 找到一个适用于多个问题的解决方案

通过复用设计，设计系统能够帮助团队更好、更快地构建产品——复用性使规范成为可能。这是设计系统的核心和价值。一个设计系统是一个可复用组件的合集，由清晰的规范作为指导，组合在一起构建成各种的应用程序。

50 多年来，工程师们一直在遵循着这个理念执行工作。现在是时候让设计充分发挥其潜力加入他们了。

用系统思维扩展设计

你可能已经清楚地意识到，设计系统已经成为当今软件行业的一个热门话题，并且理由也很充分。很多企业投资设计系统，因为他们认识到产品体验能够带来竞争优势，不仅能吸引和留住客户，更降低产品学习成本。

在重视设计系统的公司内部，通常能看见这种情况：

• 设计团队不断壮大。
• 设计师分布在整个公司的团队中，可能在多个部门。
• 设计在整个公司平台上的各个产品中都起着关键作用。

如果你是设计师，那么前面所说对设计的投资听起来可能会令你很兴奋，但其实也带来很多挑战。当一个应用由不同的团队负责迭代各自模块的时候，你将如何跨平台设计一致的 UI？又如何使所有团队能够进行快速迭代？当团队的设计师设计出新的独立样式时，你又将如何处理这种不可避免的设计需求？

要了解如何应对上述的挑战，我们要先了解什么是设计系统。设计系统将个体和整体两个概念各自的优点结合在一起。

1. 标准

拥有 MAC 用户界面的技术知识是产品设计的关键因素，但了解用户界面背后的理论，才能够帮助你创造出色的产品。——苹果人机交互指南

为了设计卓越的用户体验，不仅要了解设计系统背后的内容，还要了解其设计的原因。我们一般会通过建立和遵守标准来达成共识，这样做能消除主观性和歧义性，保证产品团队内部不会出现摩擦和混乱。

这套标准的内容涵盖了设计和开发。例如对命名约定、无障碍标准和文件结构等等，帮助团队达成共识，减少出错。

视觉语言是设计标准的核心部分。定义颜色、形状、类型、图标、布局和动效的样式和用法对于创建品牌一致的用户体验至关重要。系统中的每个组件都包含这些元素，它们在表达品牌特性中扮演着不可或缺的角色。

没有标准，决策时就会无据可依。这不仅不能扩展设计，还会造成复杂、差劲的用户体验。

超越平台

视觉语言可以不局限于单一平台，可以在 Web，iOS，Android 和其他平台上延续。将规范文档展示在设计系统网站的醒目位置，能够帮助系统开发者了解组件的样式和交互模式。例如，Google 的 Material Design 就深入到其产品视觉语言的各个层面。

2. 组件

组件是系统中复用代码的一部分，它们充当应用程序界面的基础。组件的复杂性各不相同。将组件简化为单个功能（如按钮或下拉菜单）可以增加其灵活性，使其更易于复用。复杂的组件，如特定类型数据的图表，可以很好地满足其应用场景，但是这种复杂性限制它的使用场景数量。组件的复用性越高，需要维护的次数就越少，规模也就越简单。

基于组件的开发通过复用代码来减少技术开销。建立标准规范了这些组件的用途、样式和用法。两者结合在一起，就相当于为你的产品团队配备了一个清晰的系统，让他们了解到为什么和怎么做。

设计系统的价值

让我们详细看看设计系统如何帮助你解决一直以来的痛苦。

1. 扩展式设计

随着团队的成长，设计师通常会将注意力集中在应用程序的独立功能区域，如搜索和发现、帐户管理等。这就会导致设计碎片化，就像是一座设计的巴别塔，每个设计师都将他们的设计语言往上添。当设计师单独而不是系统地去解决问题时，就会发生这种情况。

没有通用设计语言统一产品和设计，用户体验就会开始崩溃。当缺乏设计规范时，设计讨论就变得毫无用处。为了使团队内部保持一致，必须要有一个共享的来源——可供参考的官方样式库。

大多数情况下的样式库都是静态的内容，例如设计模版。但是静态的参考几乎立刻就会过时。这就是为什么有的团队会建造像 Shopify’s Polaris 站点这样的网站——一个设计系统站点，用该设计系统构建而成，记录系统的所有方面，包括组件、指南和交互最佳使用场景。因为它是与系统一起构建的，所以它能够保持其永远是的。

对于产品团队而言，内部设计系统站点是最佳、最易访问的共享来源。它提供了一个引力，使团队成员保持一致和同步。

2. 管理你的债务

随着应用程序和团队的时间积累，会慢慢形成债务。这种债务不是金融债务，而是技术和设计债务。这些债务是因为解决独立问题获得的。设计债务由大量不可复用和不一致的样式和惯例组成，而维护它们是不可能完成的任务。随着时间的推移，这些债务的累积会成为减缓增长的巨大负担。

创造行为本身并不会产生债务——就像花钱本身并不会产生金融债务一样。但使用设计系统将使你的设计和代码保持足够简洁，同时仍然允许你进行升级和迭代。

3. 一致的设计

一致且重复使用的标准化组件，使你应用程序的易用性大大提升。标准化的组件还能让设计师花更少的时间关注样式，花更多的时间专注于提升用户体验。

4. 更快的原型

在设计系统下工作，你可以像玩乐高一样快速拼凑流程和交互，构建无数的原型和方案进行快速验证，从而帮助团队快速获得数据和结论。

5. 提高可用性

页面样式的不一致会影响产品的可用性，当 CSS 因为数不清的不一致样式元素和交互增加时，页面加载时间也会加长，这会导致很糟糕的用户体验。它还可能产生冲突的 CSS 和 JavaScript，从而可能破坏你的应用程序。通过使用设计程序，通过构建一个整体的组件库（而不是每页）来避免这些冲突，从而花费更少的时间来保证产品质量。

6. 建立可访问性程序

可访问性在组件级别就可以实现，针对残疾人士、网速较慢和老旧的计算机上进行优化。这是一个建立易用性程序很好的方法， 在第 3 章「构建设计系统」中，Katie Sylor-Miller 解释了设计系统如何帮助你改善产品的可用性，并保证遵守你所在国家/地区的法律。

（译者注：美国残疾人法案于 1990 年 7 月通过并签署，其中有规定网站的可用性必须遵守《美国残疾人法》（ADA）的相关内容。）

设计系统的误区

即使有上述说的这些好处，在团队内部推行一个设计系统的时候，仍然很难说服团队成员。设计师可能会感到局限或束缚，但通常这些被感知到的弱点正是设计系统的最大优势。

让我们来揭穿那些你在推行设计系统时经常会遇到的误区吧。

误区1：过于局限

误区：负责深入独立业务的设计师看到的设计标准可能会与其他需求的不一样，因此，他们会认为通用的设计系统过于局限，可能无法满足某些特定业务的需求。

现实：设计师通常会设计出自定义的解决方案以满足应用中的独立的业务，从而增加了设计和技术的负担。而使用设计系统，这些被设计的新解决方案可以被反馈到设计系统里面，使每个人都可以使用这些改进方案。

误区2：缺乏创造力

误区：如果设计师被限制在一个设计系统下做设计，那么他将不能去自由地探索设计风格。前端的工作通常包含着各种样式风格的更新。对应用程序的风格进行改版通常不是一个小任务。这也可能是一个很大的风险，因为从事这项工作会移除一部分的旧资源，可能会对可用性产生负面影响。

现实：设计系统的组成部分是相互关联的，这意味着当一个位置进行更改时，这项更改会在整个系统中同步，这使得系统内的样式更新工作变得轻而易举，但影响却大得多。以前是几周甚至几月的工作量，现在可以在一个下午就能完成。

误区3：一劳永逸

误区：设计和构建完设计系统后，工作就完成了。

现实：设计系统是有生命的，这意味着需要不断对其进行维护和改进。但是由于应用是由设计系统的复用性组件提供支持的，因此该应用会自动同步设计系统的改进内容，从而减少维护应用程序的工作量。这就是设计系统提供的扩展能力。

总结

设计系统不是一时流行的方法，也不是未经检验的假设。为了让设计找到与技术的快速发展相匹配的同等方案，基于组件的设计和开发是一种行之有效的可靠解决方案。

现在你已经了解了创建设计系统的真正价值，让我们在下一章中深入探讨实际的设计过程吧。

文章来源：优设    作者：彩云译设计

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

为什么我们需要设计语言系统（DLS）

我们也可以见到，越来越多的设计团队都会构建一套属于自己产品的设计语言系统。对于团队内部，它的意义在于通过系统化的设计规则，来控制产品长期迭代的熵值，以及提升团队的协同效率，同时，设计师有机会从重复的劳动中解放出来，投入更多精力到探讨问题本质实现价值创新。就好像在石器时代，祖先们记录事件或表达情感的混乱程度，远远高于现代人，关键在于是否拥有一套成熟的语言系统。

对于外部用户，设计语言系统可以让产品在不同终端、不同场景中的表现保持一致性，也有机会通过植入品牌基因的方式形成视觉锤，提升产品的识别度以及消费者对品牌的认知。就好像，我们可以通过「猪鼻」车头识别出那是宝马，通过「青蛙眼」车灯知道那是保时捷，是因为这些汽车品牌通过长期保持某个「一致性」的表现，形成一套高识别度的设计语言来表达「这就是我」。

界面设计的语言属性

在这里我们将借助语言学的角度，来探讨数字化产品界面设计语言系统的构建。在语言的应用中，我们通常会涉及语法、语素、语句、语境、语气等维度，通过不同的组合达成应景的表达与适时的沟通。

1. 语法

设计原则，可以理解为设计语言中的语法，是构建设计语言系统的起点，用于传达品牌主张或设计理念，它将指引业务设计执行的方向。

制定设计原则时，首先研究用户特性，聚焦产品核心价值，然后通过脑暴等形式选择有特点的维度，结合用户体验与品牌属性将其视觉化，最后用简要的语言归纳出来。

例如 Airbnb 的设计原则简单归纳为几点：

• 统一性：每一块设计，都是更大整体中的一部分，因此必须站在更大范围的角度上，给予系统积极正面的贡献。设计功能不应该是孤立的，也不能是离群的。
• 普遍性：Airbnb 在全世界使用，用户更是一个全球性的社区。我们的产品和可视化语言应该受到用户欢迎，同时也要易于访问。
• 标志性：我们专注于设计和功能，因此在这两方面，我们要既大胆又清晰。
• 对话性：呼吸对生命如此重要，我们要把同样的设计理念融入到产品里面，通过更容易理解的方式与我们的用户进行交流、沟通。

2. 语素

视觉基础是构成设计语言的最小单位，就像语素是语言中最小的音义结合体。在原子设计理论中，它属于最小粒度的元素，通常包括：颜色、字体、图标、网格等。

3. 语句

组件就像由若干个语素组成的语句，比如一个基础按钮，通常就是由颜色、字体、边距等元素组成。而我们平时所说的组件库，其实就是一部词典，其中包含了设计系统中所需的基础组件与用法，在界面设计中也具有较高的通用性。

4. 语义

符号是语言的载体，但符号本身没有意义，只有被赋予含义的符号才能够被使用，这时候语言就转化为信息，而语言的含义就是语义。在视觉传达设计中也一样，使用的图标或图形，需具备正确的语义属性。如果商场导视设计中非要使用「裙子」图标来代表「男厕」入口，如此混淆语义挑战公众认知，那就等着被投诉吧。

5. 语境

这里说的语境包含 3 个维度：一是流程意义上的上下文，二是产品属性中的语境，三是用户当下所处的环境。

当设计需要对上下文进行特别处理时，有可能对话的层级次序是受限于屏幕稀缺性，通常可采用 Z-Depth 叠加（Material Design属性）、步骤条、元素关联转场动效等方式。举个常见的例子，当用户发起一个删除数据的请求时，界面会弹出一个二次确认的模态会话，用户点击确认之后才会执行删除操作。

过去很长一段时间，数字产品设计圈内热衷于讨论的两种风格类型：隐喻（拟物化）与抽象（扁平化），时至今日可以说扁平化的风格在应用数量上压倒拟物化风格。然而，我依旧认为设计的风格策略取决于产品属性中的语境，这也是如今 iOS 人机界面设计规范所提倡的，它不再像早前的规则片面拒绝隐喻设计，而是鼓励设计师将用户在现实中最为熟悉的视觉样式，即操作方法映射与界面设计之中，苹果官方的 Garageband 就是一个很有说服力的例子。

针对用户当下所处的环境来适配界面语境，常见通过界面换肤的手法来实现，比如微信读书等阅读应用为用户提供白天模式或黑夜模式的选择。用户所处的外部环境因素可以很大程度上决定界面语言的应用，就好像在菜市场买东西要靠吼，在图书馆借书仅需要用肢体语言便能达成。

△ 如上，微信读书针对外部环境因素的自定义「语境」

6. 语气

交互界面通常需要使用说明或提示文案来指导用户完成操作，大多数情况下都是使用第二人称，就像在与用户对话，从以用户为中心的角度上讲，建议保持谦逊、友善的语气，尽可能避免使用晦涩的专业术语，谨慎使用带有强烈情感属性的感叹号，或过于口语化的语言。另外，语气的拿捏也将直接影响到与用户的距离感，以及当下的应景度。

• 正确示例：使用检索可以快速搜索任务。
• 不良示例：你一定会爱上方便快捷的检索功能！

7. 语速

语速在这里指的是界面的信息密度，在不同的场合对语速的控制能够提升接受者的体验，视觉设计也同样需要注意把握间距与留白，网格系统在这里可以起到「节拍器」的作用，借助节拍器可以让设计更具节奏感。而交互意义上的语速，更多体现在操作路径的长度，以及动效的速率。

△  如上，富途证券在产品介绍与盘中交易2个不同场景下的「语速」

8. 响度

其实就好像我们说话可以通过音量大小来控制信息的可感知程度，希望接受者听清楚的就说大声一点。汤姆奥斯本（Tom Osborne）的视觉响度指南（visual loudness guide）是一个如何系统地处理按钮和链接的例子，它们不是单独列出，而是作为一个套件呈现，并且根据每个元素的视觉冲击力会相应的拥有一个「响度」值。我们在构建设计语言系统时，也同样需要设置梯级「响度」的按钮、字重等组件来满足不同场景的表达需求。

△ Tom Osborne的视觉响度指南

设计语言系统的生态性

1. 基因遗传

同一个语系下的语言，无论是经过了朝代更迭，还是地域的迁徙，一定会保留一些固有的特性，这就是语言系统本身具有基因遗传的生态特性。

一套成熟的设计语言系统，也同样对产品设计表现着基因级别的底层影响力：在「代际」遗传上，体现在经久不衰的坚持。比如 Burberry 的格子纹理，无论是在哪一年的产品款式上，都不会丢失这个属性。在「同辈」影响上，通常体现在不同终端场景下产品表现的一致性，或是兄弟产品的相似程度。

2. 动态进化

设计语言系统不是一份静态的组件库与规范文档，而是一个动态的且能自我进化的系统。它的动态进化属性基于 3 个契机：

• 设计师基于可复用组件的设计系统构建产品功能设计时，可省下更多的时间，转移到设计系统上的优化；
• 随着产品发展，设计师将会遇到更多特殊需求，从而也会创建新的设计模式来解决问题，而这些新的设计模式也将同时反哺设计系统，不断提升系统的完善程度；
• 设计系统中可复用组件等的规模化应用，便于设计单元缺陷的暴露，这也将为系统单元优化提供优胜劣汰的方向。

3. 开放兼容

语言同时具备工具属性与文化属性，开放兼容对一门语言的意义在于被更多人接受、应用。

当前谷歌、苹果、微软、阿里巴巴等大型企业推出了开源的设计语言，这些成熟的设计体系其实承载着大量的项目实践与经验总结，对其他企业也有较大的借鉴价值。同时，对于平台级企业，开放统一的数字语言，让不同地域、不同类型的项目得以在共同的规则下发展、共生，这对于平台生态无疑是利好的。

设计语言作为工具来说，需具备普适性，在文化层面上也需具备兼容度──在满足企业自身品牌与业务需求之上，应该尽可能规避因宗教、民俗等因素带来的冲突。

举个例子，在法国和比利时，人们都厌恶墨绿色，因为二战期间两国饱受德国纳粹侵略之苦，而纳粹的军服是墨绿色的。那么，面向这两个国家用户的设计上，便应该避免使用墨绿的元素。这时，设计语言系统中组件元素的丰富程度，很大程度决定了设计表现的选择空间与可能性。

就好像，在美国街头询问公共厕所时，老美可能听不懂 WC，那就用他们听得懂的 Restroom 吧。这里想表达的是，你的语言系统中「词汇」越丰富，越能兼容不同文化背景下的表达。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

不管是做设计（感性）还是设计规范（理性），都是仁者见仁智者见智的，都很主观。我是想阐述出自己的想法供大家参考，文章中的数值也不是固定标准，还是希望大家根据不同的项目需求，去解决不同的实际问题。

目录

1.下拉菜单

   1.1 了解侧边导航栏

   1.2 绘制矩形框 

   1.3 文本行高

   1.4 层级划分

   1.5 确定距离

2.分页

   2.1 了解分页

   2.2 绘制普通分页

   2.3 绘制首末分页

   2.4 绘制跳转分页

3.步骤条

   3.1 了解步骤条

   3.2 绘制步骤条

1.1 了解侧边导航栏

侧边导航栏就是固定在侧边或从侧边划出的导航栏，一般应用在企业网站的触发型导航栏上，或后台页面/系统的左侧功能性导航栏上。侧边导航栏的方向是根据业务需求来做调整的，方向在那边就往哪边对齐。我们先了解一下侧边导航栏的样式。

设计师的对设计的理解和审美决定了周围要留多少的空白。

1.2 绘制矩形框

矩形框的高度可以随着屏幕高度的变化而变化，所以不需要考虑。那只定义矩形框的宽度就行了，宽度分别是：小（240px）、中（280px）、大（280px）。当我们决定采用哪种尺寸后，就要定义矩形框与内容之间的距离了。下图所示的例子是以中等尺寸来做参考的。

1.3 文本行高

当我们绘制好矩形框，就要往里填内容了。文本行高上一章已经讲过了，就不多说了。文字的行高是由鼠标状态（Hover）的高度来确定的，Hover的高度有多高，文字的行高就有多高。但要注意的是，侧边导航栏的文本左右多留一下白，不能使导航栏看上去太紧凑，给人感觉太压抑，就会显得不是很美观了。

1.4 层级划分

因为侧边导航栏中有树形结构，一个主级别可以分散为多个子级别，所以就需要划分一下层级。划分层级的方法也有很多，可以改变字号、改变颜色、改变字形、改变距离，那我用的方法是改变距离。采用哪种方法还是要看具体需求，像那种需要想突出层级且对比强烈的需求，可以采用改变字号和改变字形（加粗）。下图中颜色越深层级越高，另外要注意的是，大类也有层次，越往上层级越高。

1.5 确定距离

当我们把矩形框绘制好，文本也填进去后，就要确定每一个层级的距离了，我们要做出1>2>3的感觉出来，细微调整每个层级的间距，使它们的差异突显出来。确定距离指的是每个层级左侧的距离，这就像楼梯一样，在上层的楼梯往往优先级是最高的。层级1（收藏夹）与层级2（艺术类）之间多留了4px的空白，目的是为了突显主级别与子级别之间的差异，稍微强化了一下主级别。

来看一下最终效果吧。

2.1 了解分页

侧边导航的讲完后来讲讲分页，分页有三种样式：普通分页、首末分页、跳转分页，名字是随便起的，能理解什么意思就行了，来让我们了解一下它的样式。

2.2 绘制普通分页

接下来我们学着画一下它。我把所有的分页分为三种尺寸（大中小），分别是32px（小）、36（中）、40（大），每一个小按钮的曲率分别是4px（小）、6px（中）、8px（大）。每个小按钮之间的间隔我用的是4px，也可以用8px，4px虽然更容易误触，但视觉效果要比8px好很多。

当然了以上数值也不是绝对的。尺寸、曲率和间隔都是需要根据项目需求与设计师自身审美来决定的。

2.3 绘制首末分页

首末分页就是在普通分页的基础上加两个按钮，分别是“跳转到首页”和“跳转到末页”。只要注意把“数字按钮（分页）”与跳转首末页按钮”按优先级分隔就可以了，要把控好这首末按钮与数字按钮之间的距离，距离过短容易误触，距离过长会破坏整体性。

2.4 绘制跳转分页

跳转分页是在首末分页的基础上加上“总页数”与“跳转至指定页数”这两个功能。跳转分页前端显示总页数，后端显示跳转至指定页数。所有按钮模块的间隔都成倍递减，这样不同分页的功能，区分就会更明显一些，而且它们之间也有隐性的关联。

将分页组件与其他组件组合起来看一下最终效果。图片压缩效果不是很好，要与实际效果（原始比例）差很多。

3.1 了解步骤条

步骤条相对比较简单，这里穿插一下讲了吧。步骤条的样式比较多，但他们的绘制方法都大同小异，我只单拿出一个来讲，就不一一的进行讲解了。

3.2 绘制步骤条

步骤条其实不难绘制的，注意对象和元素之间的距离就可以了。留的距离也要讲究一些，要匀称不能出现左面留太多而右面留太少的情况，具有关联性的部分距离差异不能太大。另外就要考虑视觉平衡性的问题，不能一味的采用水平或垂直居中。只要熟练把控好距离，知道什么需求下留多少的白，那绘制不同样式的步骤条，也会显得游刃有余，做出的东西也更自然舒服体验也更好。

做设计要精益求精，把每一个像素点都要考虑到并合理运用它们。

蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

无论你是不是一名视觉设计师，可能都会有这样的感受：视觉设计在创造一个新产品的过程中，显得并不那么重要，被安排在设计流程最后一环的视觉设计师们所能接触的，以及产生影响的范围都非常有限。我们还会不禁认为，视觉设计不就是画几个漂亮的icon和界面，比如我们平常看到一个app的第一印象觉得漂亮，这对学习了几年美术设计的人来说简直易如反掌。

真的是这样吗？从我这些年的探索与积累，来谈谈我从两个层次理解的视觉设计