网站设计ui规范（UI界面设计需要遵循哪些规范）

本文目录

• UI界面设计需要遵循哪些规范
• UI交互设计的设计规范都有哪些
• UI界面设计规范有哪些
• 到底什么是UI设计规范
• UI设计规范都有哪些
• UI设计规范
• UI设计规范有哪些
• Web UI设计规范及界面实现注意事项
• UI设计有哪些规范

UI界面设计需要遵循哪些规范

一：遵循一致的准则，确立标准并遵循无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。 这样得到的好处： 1：使用户使用起来能够建立起精确的心里模型，使用熟练了一个界面后，切换到另外一个界面能够很轻松的推测出各种功能，语句理解也不需要费神理解 2：降低培训、支持成本，支持人员不会行费力逐个指导。 3：给用户统一感觉，不觉得混乱，心情愉快，支持度增加 二：(Color)颜色使用恰当，遵循对比原则： 1：统一色调，针对软件类型以及用户工作环境选择恰当色调： 如：安全软件，根据工业标准，可以选取黄色，绿色体现环保，蓝色表现时尚、紫色表现浪漫等等，淡色可以使人舒适，暗色做背景使人不觉得累等 2：如果没有自己的系列界面，采用标准界面则可以少考虑此方面，做到与操作系统统一，读取系统标准色表 3：色盲、色弱用户，即使使用了特殊颜色表示重点或者特别的东西，也应该使用特殊指示符，?quot;!，?着重号，以及图标等 4：颜色方案也需要测试，常常由于显示器、显卡的问题，色彩表现每台机器都不一样，应该经过严格测试，不同机器进行颜色测试 5：遵循对比原则：在浅色背景上使用深色文字，深色背景上使用浅色文字，蓝色文字以白色背景容易识别，而在红色背景则不易分辨，原因是红色和蓝色没有足够反差，而蓝色和白色反差很大。除非特殊场合，杜绝使用对比强烈，让人产生憎恶感的颜色。6：整个界面色彩尽量少的使用类别不同的颜色 三：(Resource)资源 一个多姿多彩的人机交互界面，少不了精美的鼠标光标、图标以及指示图片、底图等。 1：也需要遵循统一的规则，包括上述颜色表的建立，图标的建立步骤也应该尽可能的形成标准，参考itop的outlookbar图标设计标准 2：有标准的图标风格设计，有统一的构图布局，有统一的色调、对比度、色阶，以及图片风格 3：底图应该融于底图，使用浅色,低对比，尽量少的使用颜色。 4：图标、图像应该很清晰的表达出意思，遵循常用标准，或者用户机器容易联想的到物件，绝对不允许画出默认奇妙的图案。 5：鼠标光标样式统一，尽量使用系统标准，杜绝出现重复的情况，例如某些软件中一个手的形状就有4钟不同的样子。 四：(Font)字体 使用统一字体，字体标准的选择依据操作系统类型决定。 中文采用标准字体，“宋体”，英文采用标准MicrosoftSansSerif不考虑特殊字体(隶书、草书等,特殊情况可以使用图片取代),保证每个用户使用起来显示都很正常。 字体大小根据系统标准字体来，例如MSS字体8磅，宋体的小五号字(9磅)五号字(10.5磅)。 所有控件尽量使用大小统一的字体属性，除了特殊提示信息、加强显示等例外情况 Windows系统有个桌面设置，设置大字体属性，很多界面设计者常常为这个恼火，如果设计时遵循微软的标准，全部使用相对大小作为控件的大小设置，当切换大小字体的时候，相对不会有什么特殊问题。 但是由于常常方便使用点阵作为窗口设计单位，导致改变大字体后，出现版面混乱的问题。 这个情况下，应该做相应处理： 1：写程序自动调节大小，点阵值乘以一个相应比例 2：全部采用点阵作为单位，不理会系统字体的调节，这样可以减少调节大字体带来的麻烦。**B/DELPHI中多采用这种方法，但是必然结果是和系统不统一。 五：(Text)文字表达 提示信息、帮助文档文字表达遵循以下准则： 1：口语化、客气、多用您、请，不要用或少用专业术语，杜绝错别字 2：断句逗号句号顿号分号的用法，提示信息比较多的话，应该分段， 3：警告、信息、错误使用对应的表示方法 4：使用统一的语言描述，例如一个关闭功能按钮，可以描述为退出、返回、关闭，则应该统一规定。 5:根据用户不同采用相应的词语语气语调，如专用软件，可以出现很多专业属于，用户为儿童：这可以语气亲切和蔼，老年用户则应该成熟稳重。制定标准遵循之。 六：(STYLE)控件风格，不要使用错误控件，控件功能要专一 有设计好的同一风格的控件，如果没有能力设计出一套控件，则使用标准控件，绝对不能不伦不类，杂乱无章 不要错误使用控件，例如： 使用Button样式做TTable的功能，拿主菜单条显示版权信息， 统一类型的控件操作方式相同，例如一个控件双击可以执行某些动作，而同样控件，双击却没有任何反映 一个控件只做单一功能，不复用 七：(ALIGN)控件布局，窗口不拥挤，按功能组合控件 1：屏幕不能拥挤 拥挤的屏幕让人难以理解，因而难以使用。试验结果(Mayhew,1992年)屏幕总体覆盖度不应该超过40％，而分组钟覆盖度不应该超过62％。 让人看上去，不能太拥挤，也不能太松散。 整个项目，采用统一的控件间距，通过调整窗体大小达到一致，即使在窗体大小不变的情况下，宁可留空部分区域，也不要破坏控件间的行间距。 2：区域排列 一行控件，纵向中对齐,控件间距基本保持一致 行与行之间间距相同，靠窗体Border距离应大于行间间距(间距加边缘留空)。 当屏幕有多个区域，要以视觉效果和效率来组织这些区域。 3：数据对齐要适当 说明文字，中文版应使用中文全角冒号，纵向对齐时，并按冒号右对其，如图。纵向控件宽度尽量保持相通。并左对齐。 4：有效组合 逻辑上相关联的控件应当加以组合，以表示其关联性，反之，任何不想光的项目应当风格开，在项目集合间，用间隔对其进行分组，或者使用方框划分各自区域。 例如：以下界面，选择搜索方式来判断号码范围是表示主叫号码范围还是被叫号码范围，和入帐方式无关， 则应该修改为：搜索方式和入帐方式调换位置。以免用户产生误解。 5：窗口缩放时，控件位置、布局： 为了使界面不出现跑版或者难看的局面，解决方法： 1：固定窗口大小，不允许改变尺寸， 2：改变尺寸的窗口，在Onsize的时候做控件位置、大小的相应改变。 **B/DELPHI的VCL中，大部分控件有布局属性： 某些控件拥有alignment属性，可以用来做布局调节：TcustomPanel，Tmemo等，考左靠右靠上靠下以及撑满(Client)属性，用来根据版面自动调节。 大部分控件有属性Anchors，里面上下左右akLeft,akTop等如果为true，则表示相对各个边缘的距离是否改变。这个可以进一步设计好排版工作。 八：(TABORDER)TAB顺序 习惯用法，阅读顺序，从从左到右，从上到下 窗体中控件的Tab按键激活顺序，TabOrder,.**B/DELPHI中使用窗体设计右键菜单选择taborder设置，VC中窗体RES区域使用ctrl+D 九：(ShortcutKey&Accelerator&PopMenu)快捷键、加速键和弹出菜单 快捷键： 1：全局快捷键菜单中加以描述CTRL+XXX并入帮助列表。 2：快捷键写入帮助，特殊说明，并在使用培训时强调使用 十：(ACTION)用户交互 1：disable而不是notvisible 要使一个功能有时允许有时不允许用户使用，则这个控件的不能随便隐藏，应该使用disable属性进行表示，以免用户发现控件失踪后措手无策 2：窗口弹出位置要明显 点击一个控件，弹出窗口或者菜单，应该给人明显提示，最低要求是覆盖刚才点击的位置，让用户轻松跳转到新的界面。 3：执行动作要提示 十一：(HELP)联机帮助： 1：系统默认、行业标准的控件操作不需要逐一描述，只需要对特殊控件加以描述2：特殊操作、特殊功能界面，在界面上加控件直接连接到对应的HELP文件中 3：特殊设置详细，应该在界面上用简洁明了的语句说明，或者是好用Tiptool，并由第二步帮助 十二：发行时阐明规则 对统一的东西进行逐一阐述，并加以典型描述，放入HELP和用户手册中，同时加有词汇表 附录： 美工何时参与进来： 美工作为界面美化的主要人员，不但拥有艺术设计、包装设计的才能，还应该穿插整个项目，给界面程序设计人员提出系统参考意见。 1：软件设计前期，美工参与需求了解，分析同类软件界面有缺点，提出主色调、典型界面风格、以及构思整个美术包装等。 2：界面原型设计过程中，与开发人员共同修改、商榷最终表现样式，以及确立UI标准。 3：程序开发过程中，提供标准风格的资源文件(icon,cur,bmp等)，并总结出统一风格的资源的设计过程，形成规范文档*. 4：产品化方面，协助制作帮助文件、网站风格以及参与制作，制作附带宣传图片、动画、产品包装、海报等。

UI交互设计的设计规范都有哪些

页面规范

UI交互设计规范中的页面信息规范主要指页面的静态信息应该遵循的规则，包括：1.标题规范;2.新窗口链接规范;3.图片规范。

信息规范

UI交互设计规范中的交互提示规范主要用于规定在交互过程中交互的方式及其信息提示，包括：

1.预先信息提示

a.表单提交类，b.谨慎类操作，c.差异化规则。

2、操作信息提示

a.操作确认提示，b.操作错误提示。

3、结果信息提示

a.查询类结果，b.保存类结果，c.附加类结果。

控件规范

UI交互设计规范中的控件规范是当有一些功能会被多个模块复用的时候(如标准评论框、标准好友选择器等)，需要把这些功能提炼出来设计成通用控件被多个模块共用。

总之，有了页面信息规范、交互信息规范、通用控件规范就能保证页面信息的一致、交互方式及提示的一致、通用功能模块一致。从而保证产品的一致性，并提高产品质量。

以上就是关于UI交互设计规范的相关内容，希望对想要学习UI设计的小伙伴们有所参考，想要了解更多UI设计相关内容，欢迎大家在平台及时查看。

UI界面设计规范有哪些

 一、字体

                  iOS的字体：

                                    中文字体：苹方 / PingFang SC

                                     CSS：Font-Family：PingFang SC

                                     英文、数字：Helvetial

                 Andioid的字体：

                                    中文字体：思源黑体 / Noto Sans Han

                                     英文、数字：Roboto

  二、规范

              1、  iPhone界面尺寸 

2、  iPhone图标尺寸

  3、  iPad的设计尺寸

 4、 iPad的图标尺寸

 5、 Andioid的图标尺寸

  6、Andioid的dp/sp/px换算表

三：小结

                      iPhone的主流设计尺寸：750x1334 px 

                                                            1242x2208 px

                      Andioid的主流设计尺寸：720x1280 px

                                                             1080x1920 px

到底什么是UI设计规范

UI 设计(或称界面设计)是指对软件的人机交互、操作逻辑、界面美观的整体设计，也叫界面设计。UI 设计分为实体 UI 和虚拟UI，互联网说的 UI 设计是虚拟 UI, UI 即User Inte***ce(用户界面)的简称。UI 设计师的职能大体包括三方面:一是图形设计，软件产品的产品“外形”设计。二是交互设计，主要在于设计软件的操作流程、树状结构、操作规范等。三是用户测试/研究，这里所谓的“测试”，其目标恰在于测试交互设计的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量 UI 设计的合理性。UI设计目前的前景还是很不错的，很多企业都缺少 UI设计师。而且可以看到的是，现在社会的发展，更多的智能机和智能机器人研发出现，这些都离不开UI 设计师。所以说 UI 设计的是很有前途的，是不会失业的。而且 UI 设计门槛不高，要入门也不难的。从工作内容来说，UI 设计在当前的互联网领域、科技领域可以说无处不在，好的 UI 设计能够明显提升用户的使用体验,从而给产品带来更多的附加值,所以UI 设计对于互联网产品是非常重要的。目前 UT 设计通常分为两个大的工作方向，一个是交互设计,另一个是视觉设计。总的来说，UI 设计相比较于编程而言，还是非常适合大众学的并且就业前景很广阔。学完 UI 设计，能获得一份稳定而又不失乐趣的工作，同时有利于追求更高品质的生活，在艺术领域可以获得更多的启迪。

UI设计规范都有哪些

好的UI设计不仅是让软件变得有个性有品位，还要让软件的操作变得舒适简单、自由，充分体现软件的定位和特点。1.简易性界面的简洁是要让用户便于使用、便于了解产品，并能减少用户发生错误选择的可能性。2.用户语言界面中要使用能反映用户本身的语言，而不是游戏设计者的语言。3.记忆负担最小化人脑不是电脑，在设计界面时必须要考虑人类大脑处理信息的限度。人类的短期记忆有限且极不稳定，24小时内存在约25%的遗忘率。所以对用户来说，浏览信息要比记忆更容易。4.一致性它是每一个优秀界面都具备的特点。界面的结构必须清晰且一致，风格必须与产品内容相一致。5.清楚在视觉效果上便于理解和使用。6.用户的熟悉程度用户可通过已掌握的知识来使用界面，但不应超出一般常识。7.从用户习惯考虑想用户所想，做用户所做。用户总是按照他们自己的方法理解和使用。通过比较两个不同世界(真实与虚拟)的事物，完成更好的设计。如：书籍对比竹简。8.排列一个有序的界面 能让用户轻松的使用。9.安全性用户能自由的作出选择，且所有选择都是可逆的。在用户作出危险的选择时有信息介入系统的提示。10.灵活性简单来说就是要让用户方便的使用，但不同于上述。即互动多重性，不局限于单一的工具(包括鼠标、键盘或手柄、界面)。11.人性化高效率和用户满意度是人性化的体现。应具备专家级和初级玩家系统，即用户可依据自己的习惯定制界面，并能保存设置。12.颜色不一样UI设计师是随着网络而兴起的新兴设计行业，从事对软件的人机交互、操作逻辑、界面美观的整体设计工作涉及范围包括商用平面设计、高级网页设计、移动应用界面设计及跨媒介设计以人为本，以用户体验需求为基础，发展多元化是目前中国信息产业中最为抢手的人才之一。

UI设计规范

概念，灵感，方法和工具概念：设计互联网产品，Style Guide / Pattern Library 和纯粹的 Specification 各具不同功能和作用，却都含“设计规范”的概念。1. Style Guide / Pattern Library：偏重视觉概念，一般以文档或图像格式呈现（不限定）。内容：对设计作品中的字体（Typeface）、字型（Font）、色板、品牌标识规范（Brand Guideline）、Icon 等要素作出展示和说明。主要作用于设计团队或设计师之间，展示产品的视觉设计风格。便于风格复用，规范第三方的品牌塑造（Branding）和接入。实例参考（更多参考下文中“灵感”）：Brand Assets | KickstarterLogos & branding | Dropbox2. Style Guide / Pattern Library：偏重（Web 前端）开发概念，基本都以网页文档形式呈现。内容：对界面元素（UI Elements）的样式风格及实现其效果所对应的代码片段（HTML, CSS）作出说明解释，包含交互和动效设计（以 JavaScript 为主，更多信息参考：界面动效设计方法有哪些？）。例如：常见的基础布局（Grid System）、字体排版（Typography）、按钮、菜单、列表、对话框（Dialog）、Tooltip 等等。用于团队 Web 设计和开发协作，统一产品风格。复用时提升工作效率，同时也保证用户体验质量。实例参考（更多参考下文中“灵感”）：Pattern Library | MailChimpMapbox styleguide | Mapbox概念 1 和 2 结合的实例（更多参考下文中“灵感”）：Product Style Guide, Visual guidelines | SalesforceStyle Guide | Lonely Planet3. Specification (Spec)：介于设计与开发之间，由设计师直接在视觉稿（Mockup）中创建。内容：主要由 Annotation（注释，国内俗称“标注”）和 Measurement（量度）构成。Annotation 既注释设计稿中界面元素所使用的字体字型、色值等，Measurement 则注明各元素的尺寸及它们的边距，留白等。用于设计师与开发人员之间沟通和工作交接，保证开发出地产品界面和视觉稿高度统一。______________________________________________________________________________________灵感：一些常用的项目和文档都有采用上述的“概念”，比如采用了概念 1 的：iOS Human Inte***ce GuidelinesMaterial Guidelines采用概念 2 的：SkeletonPureBootstrap而概念 3 往往仅在公司或团队内部使用（详见下文“工具”）。灵感和实例资源：Website Style Guide Resources | 收录大量案例，该项目同时也收录了相关文章、工具、书籍、播客等。Find Guidelines | 一个直观的 Guideline 官方链接收集列表。Brand Style Guide Examples | 同上All The Style Guides | 同上，托管在 Tumblr ，以博客形式呈现。______________________________________________________________________________________方法和工具：1. Style Guide / Pattern Library：方法不限，以能够准确展现视觉设计风格和品牌识别（Identity）的规范为标准。正因其偏视觉化，编写文档不是必须的，可直接用图形软件产出。例如：Airbnb UI Toolkit WebSalesforce1 UI KitHousing UI Style Guide也可借助工具：Style Inventory for Sketch | Sketch 插件，基于视觉稿生成 “Style Guide”。Style Tiles | 用于快速制作“Style Guide”的 PSD 模版，Frontify Style Guide | Frontify 是一个面向设计团队的协作平台，提供“Style Guide”生成和“Spec”工具。CSS Stats | 解析 URl 对应网站的 Style（主要依靠分析 CSS 文件），展示相关信息，比如字体尺寸（font-size）、色板、浮动（float）采用数量等。Stylify Me | 填入网站 URL，自动生成对应页面的“Style Guide”。提供 PDF 文件保存。2. Style Guide / Pattern Library：因要制作出网页文档，且其中含有大量的 Web 组件（代码片段）和元素（视觉），可借助前端框架高效产出，比如相对大众的 Bootstrap，Semantic UI。在大量的自由和开源前端框架项目中，选择有维护支持，自身喜欢或熟悉的即可。可用工具：设计师 Brad Frost 有一套叫做“原子设计（Atomic Design）”的 Web 设计理论，在该领域有一定影响，其核心概念就是复用“Pattern Library”，高率生产 Web 页面：Atomic Design | Brad Frost他为该理论创建了一个开源项目，基于 PHP：Pattern Lab | Build Atomic Design SystemsWeb Starter Kit（HTML, CSS, JS） | Google Web Fundamentals 提供的 Web 生产样板，支持创建“Pattern Library”形式的文档。Style Guide Boilerplate（PHP） | “Pattern Library”样板，类似 Pattern Lab。更多方法类文章和工具列表可参考：Website Style Guide Resources50 Style Guide Tools, Articles, Books and Resources | Tuts+3. Specification (Spec)：“Spec”应以尽量降低设计师精力消耗，并能让开发人员清晰理解为标准。提高效率并保证质量的基础，是选择合适的工具。在绘制设计稿所用的图形软件中启用扩展和插件，直接生产“Spec”，高效直击主题：specKing | Photoshop（$19，推荐，正在使用）Specctr | Photoshop, Illustrator（$49 ,PS 和 AI 单独出售）Markly App | Photoshop, Sketch（$39.99，PS 和 Sketch 单独出售）Sketch Measure | Sketch（自由）一些其他插件也提供制作“Spec”功能，比如：PNG EXPRESS | Automated Design Delivery for Photoshop（$29）Ink | A Photoshop documentor plugin（免费）团队协作平台和其他工具：Avocode | 简化设计师与开发人员之间的协作流程（Web 产品），提供 Slice（切图）、Spec、图层转 CSS 等功能。Zeplin | 同样是一款有质量的设计协作软件。目前仅支持 Sketch 设计稿，PS 支持仍在开发中。产品处于邀请内侧阶段。Frontify | 上文“Style Guide 工具”提到过，属协作平台，支持对设计稿“Spec”。Assistor PS | 可独立在系统中运行的 PS 协助软件，但需借用 PS 载入设计文档。提供 Slice，Spec 等功能。

UI设计规范有哪些

01.界面设计尺寸及栏高度02.边距和间距03.内容布局04.界面图片设计比例05.建立统一风格的图标06.APP版式设计规范07.界面文字设计规范08.设计适配09.切图规范10.设计稿标注

Web UI设计规范及界面实现注意事项

适用于WEB产品线的人机交互界面的设计，贯穿于以用户为中心的设计指导方向。根据WEB产品的特点制定出的一套规范，以达到提升用户体验，控制产品设计质量，提高设计效率的目的。 适合界面设计师、用户体验设计师、前台设计工程师、发布支持人员、运营人员等 1．【统一识别】规范能使页面相同属性单元统一识别，防止混乱，甚至出现严重错误，避免用户在浏览时理解困难。 2．【节约资源】除了门户网站、活动推广等个性页面外，相对于后台系统、物联网系统、数据统计系统、等界面设计，使用规范标准能极大的减少设计时间。 3.【重复利用】相同单元属性，页面新建时可以执行此标准重复使用，减少无关信息，就是减少对主题信息传达干扰，利用阅读与信息传递。 未通过客户或上级领导确认产出的界面，请勿上传至蓝湖协作系统 设计师在原型步骤及应该想好对应的图层结构，交互特效，并和前端开发人员做好交流，是否可以实现，功能的评估一定要细致 1．已上传至蓝湖协作平台的高保真界面，应根据平台中的标注尺寸进行精确还原，Web界面还原度不得低于95%；移动端还原度为100%（精确到一像素）。 2．开发人员完成视觉部分内容以后，必须由UI设计师及前端技术负责人进行校对工作。 3．如遇到界面效果复杂或组件样式特殊等难以实现的问题，应及时与对应的UI设计师或前端技术负责人沟通处理，不能随意更换。 4．前端开发人员无权更改设计图中的样式及功能，遇到问题应及时与设计人员协商。 5．如遇产品经理或项目负责人未通过设计师确认，直接要求修改界面视觉效果部分，前端开发人员可拒绝修改。必须由UI设计师对高保真图纸更改后再进行相应的修改。

UI设计有哪些规范

高质量的规范文档是一个优秀设计系统的代表物。我们详实地描述每个 UI 组件的设计与代码规范，来帮助设计师高效地作出决策，推动开发速度。编写高质量的文档需要前期规划和一系列合理的流程来辅助，付出的成本相当高。

这个系列由六篇文章组成，致力于描述编写组件规范文档的过程。本篇我会从目标读者、文档内容、文档结构开始。然后会涉及案例，设计与代码指南。这些内容来自于我自己这些年的实践经验以及社区里大家所分享的知识。

那么我以一个问题开始今天的主题：文档的目标读者是谁，他们需要什么样的内容，作为编写者我们该怎样组织文档结构来作出清晰的表达？

文档的目标读者

首先：你要弄清楚谁是你的文档的主要读者。

工程师，设计师，还有公司里的所有人！

当一个设计系统包含了代码指南，工程师们显然会是读者。那么一个只包含了代码指南的设计系统应该服务于设计师吗？如果文档里只包含了设计规范而没有代码（如 Material Design），工程师还是读者吗？

在我看来，两个问题的答案都是肯定的。规范文档是从不同的角度来服务于多种角色的。

除了设计与工程，它还服务于其他人吗？很有可能，特别是当文档所在的设计系统已经成为产品的基石时。简短有效的介绍对于 PM（产品经理） 很有价值，QA（测试） 则比较关注案例部分…等等。

规范文档是从不同的角度来服务于多种角色的

很多设计系统团队还会把自己的系统公开出来，在体现共享精神的同时也能起到吸引行业人才的作用。所以文档应该能够体现团队的专业与严谨。

文档的主要目标是：为设计师、工程师和团队里的其他角色服务，让他们能够高效地做决策。

Takeaway：设计系统的效应和影响力不只覆盖设计与工程，一个成长中的系统必将会服务于更多的角色。

工程师，接着是设计师，然后才是其他人

为所有角色服务并不意味着平等地服务所有角色。工程师每天会查阅 10 次或更多次文档，他们甚至会把文档与代码器窗口并排排列！设计师的访问次数应该是少于工程师的，其他角色则会更少。

所以谁是最重要的？以我的经验来看，设计系统最初就是为了工程与设计之便，由工程师和设计师建立的。即使其他角色也对其有所贡献，但他们仍是偏次要的。因此我们首先需要确保工程师与设计师的需求能够得到满足。

设计师与工程师优先级最高

那么，工程师与设计师孰轻孰重呢？我最近参与设计的设计系统项目中都需要同时服务于两者，为设计和代码制作规范指南。我也在一些企业的文档中看到了对其中一方的过多偏见，或者是有将他们的目标完全分离开的倾向（稍后我会解释）。有很**度需要考量：设计系统的目标，他们的使用频率，内容深度、质量、生产成本，以及和他们日常工作的相关度。

设计师 vs 工程师

Takeaway：读者的优先级由很多因素决定。要有预期：工程师和设计师的需求会有冲突，并尽可能地优化和处理这些冲突。如果实在不行，就要偏向于距离最终产品最近的那一方，通常是工程师。这就意味着工程师优先，设计师其次。

文档内容

规范文档是连接读者与内容的媒介。内容会有不同的格式或模块，因此成本也各有差异，而你需要最终把它们编织在一起。

文档内容模块：简介和案例文档内容模块：设计参考和代码参考

抽象地来看，规范文档的内容通常包含以下四种模块：

• 介绍：组件的名称，以及一段简明扼要的介绍。（必要）

• 案例：这个组件的各种形式，状态，尺寸等等其他要素，比较好的做法是用代码直接把这些展示出来，而不是不可以交互的静态图片。（必要）

• 设计参考：比如什么时候应该用这个组件，允许的做法与不允许的做法，以及视觉、交互、文案方面的指南。（推荐）

• 代码参考：包含 API 和其他实施及部署方面的指南。（必要）

不同的模块会有不同的制作成本

「介绍」写起来当然非常的短平快。结构优秀的「案例」也是值得投入成本的，并且写起来会越来越顺手。工程师也需要一个合理清晰的「代码参考」。但是，真正有效的「设计参考」可能会非常耗费成本。

横轴：细节的丰富程度由浅到深。纵轴：制作成本由低到高

请点击输入图片描述

Takeaway：规范文档可以包含很多内容模块。所以需要团队在前期就进行充分的讨论，对每种内容模块做出符合自己团队和产品价值的判断，再投入成本去制作。

文档的信息结构

设计与代码：分开还是合并？

在实践中，设计师往往会自顾自的发布或更新和自己相关的内容，工程师也一样。这样的惯性行为会在无意中增加设计与工程的距离。所以大家需要在前期就对文档的信息结构达成共识。

谷歌的 Material 文档生态就是这种距离感的代表。 Material’s design foundation 优先服务于设计实践, 而 Material Design Lite，Polymer Project，Android Developer’s，Material UI (built for React) 都是服务于代码，和设计规范绑定的并不紧密。

请点击输入图片描述

这种分离的状态其实是有意义和理由的。因为 Material 是一个操作系统的底层系统，跨越了许多框架，团队，平台。它的复杂度在某种意义上超越了目前世界上所有的设计系统。但你要知道大多数的设计系统并不是服务于一个操作系统的，因此不会发展至如此复杂的形态。

对于像我们一样的产品团队来说，设计和代码分开是符合共识的。这种做法能够给分别为两种角色设计符合他们需求的体验。

组件设计规范与 API 和代码规范分别放在两个网站上。来自：Atlassian

请点击输入图片描述

这种做法也有风险。随着时间推移，两个网站可能出现不同步的现象：

• 设计与代码的分类逻辑出现差异（最简单的例子就是 Loader 和 Spinner 的命名：代码里叫 Loader，而设计里则叫 Spinner）

• 功能差异：设计规范里出现了代码不能实现的功能，或者代码里加入了设计里没有考虑的功能。

你可能会觉得这样也挺好，毕竟设计和代码本身就是两个领域。至少对于文档的写作者来说这种分离还是挺方便的（只用考虑自己的需求，管理自己的进度）。

但真正的读者需要的是一个「真相的唯一来源（Single source of truth）」。如果你是一个对设计和代码都有需求的读者，你会发现自己不停在两个网站间切换，两个地方都有对你有价值的内容，这感觉就像是在打网球时陷入了拉锯战。

Takeaway：要慎重地看待设计与代码的分离。虽然一开始方便了内容作者和发布者，但之后会有风险。这种做法也可能会在潜移默化中造成设计与工程的距离扩大。

合并内容的两种方案：堆叠还是切换？

例如 Morningstar Design System 是把设计和代码放在一个页面里，读者就能找到完全统一的命名，指南，功能描述。

一个页面之堆叠式：把设计和代码放在一个页面中，纵向滚动来查看。

请点击输入图片描述

堆叠式的布局方式会使得页面变得冗长。当然还有一种方式是使用 Tab 来切换内容。

一个页面之切换时：把设计和代码放在一个页面中，通过 Tab 来切换内容。

请点击输入图片描述

Takeaway：将设计和代码混合在一起是有可能的，大家可以按自己的需求来选择以上两种布局方式。

按类型来为内容做排列和编组

不论选择那种布局方式，文档内容的模块结构和顺序应该是保持一致的：

• 简介

• 案例

• 设计参考

• 代码参考

其实只要把「案例」放到读者一进来就能看到的地方，把设计和代码参考放在一步点击就能达到的地方，就是一个不错的设计了。下面是几种行业内比较有代表性的模式：

左：IBM Carbon 模式 中：Hudl’s Uniform System 模式 右：Lightning Design System 模式

请点击输入图片描述

IBM Carbon 认为代码更应该被优先展示，将交互用法和样式分别放在其他的 Tab 中。Hudl’s Uniform system 把顺序反了过来，设计优先于代码。 Salesforce’s Lightning Design System 把代码和组件案例放在 Tab 上方，默认选中开发者指南这个 Tab，而后两个 Tab 则被奇怪地留空了。

Takeaway：把简介和案例放在一开始最重要的位置，接下来的模块则没有唯一的方案，需要大家自己做出符合自己团队情况的判断。

若页面很长，则为读者提供定位导航

你的文档页面越长，越需要给读者清晰的认知，要让他们知道这个页面里会包含哪些内容以及当前所处的位置。纵向的定位导航栏是个不错的方案：一直固定存在于页面右侧，在滚动时同步追踪位置，并且可以包含子标题。

Morningstar Design System 在文档页面右侧设计了一个两级的定位导航栏

请点击输入图片描述

Takeaway：不论选择哪种形式，最重要的是在整个系统中保持逻辑一致，符合读者的预期与心理模型。

展示设计？展示代码？还是都展示？

把设计和代码融合，就会有读者只对其中一个方面感兴趣，他们会提出自己的意见：

设计负责人可能会问到：我能把这些代码案例和指南隐藏掉嘛？

工程师可能会问：我能把这些和设计规范有关的文字隐藏掉嘛？

可以考虑加一个选项或按钮来允许隐藏设计/代码内容。比如：

Design Only：把代码指南、代码片段和属性表等等都隐藏起来

Code Only：把视觉样式指南和文案指南都隐藏，但还是要把一部分交互用法指南保留着，这对工程师们也有用。