视觉设计（APP UI）规范文档怎么写？

Posted 2023-04-27

参考技术A 在创业公司工作的这几年中，很多工作都要涉及到视觉设计，但一般公司不会那么细，在我脑海中分为三种：

1.平面设计师： 限于2d广告设计，比如名片、海报、宣传画册、单页等等，做出来的UI可执行性很低，很多和原生系统相斥，工程师会很头疼。无规范可言。

2.UI设计师：限于软件UI的设计，一般的工程师拿到设计文件执行起来没有很大难度，但是做出来的平面没有创意，从技术上来看一般，想要让人眼前一亮或是加上营销的想法很难。无规范可言。

3.视觉设计师：有很好的审美观念，有平面设计大作，针对不同场所，不同功能的设计有自己独特的见解与经验；有3D设计经验，一般都有家居、建筑设计经验；对于不同系统的软件UI与UE都有研究，并针对不同功能的应用规划其功能流程让UI的不仅美观并且易于上手。 对于每一个公司或项目群都有其规范文档。

然而我就遇到过第一种，请不起第二种和第三种，平面压力很大导致辞职的较多，交接工作时我是来一个又要和他重新说一遍，一直觉得应该出个文档，看完之后能够马上上手的那种，现在才知道原来是叫做视觉设计规范文档

注明使用版本、设计操作系统、与开发时要说明的

1.指导分工协作

2.避免重复工作

3.视觉统一 ，形象加分

4.让思路更加清晰，工作更加高效

视觉设计师、平面设计师、交互设计师、产品经理、程序员、市场运营人员、前端开发、软件测试

色调：确认主题色、组件色

字号：根据实际用途与场景适配，以实际效果良好为准，确定一个适合值即可。

通用组件样式：将整个UI设计中能够通用的组件统一风格，比如：对话框，提示框，确认信息框等

不同状态下组件样式：不同状态下的组件样式一般为相同的，针对使用场景以实际效果为准

间距：框架中的间距、元素与元素之间的间距

图片规范：不同页面、位置、图片的尺寸、颜色等等参数要求

不同适用版本：平板、手机、电脑等不同版本

整体框架修饰：将整体框架固定，作为模板往里填，有利于掌控整体风格

不同级别子页面风格：不同子界面的设计可以完全放给下个设计师，有需要也可以进行限制

第一步确定清晰的流程与思路

第二步：

适配尺寸 ：android、ios不同系统、不同设备    表格或结构图表现

可参考  android尺寸等规范参考

要注意的是：

    anrdoid 要切图，将图标和图片元素切为hdpi、xhdpi、xxhdpi三套，放入三个文件夹中打包

    ios要切图，将图标和图片元素切为@2x,@3x两套，放入两个文件夹中打包

第三步：

  确认主题色与元素色

在appstyle系统统一默认配色中设置为主题色

在其他元素比如：分割线颜色、卡片阴影颜色深度、重要颜色文字深度等等

第四步：

文字

苹果常用字体 点这里！

不同地方、用途中文字的字体、字号

第五步：

图标

统一的尺寸，特殊用途的注明、不同状态的请附加

第六步：

按钮

按钮的样式与不同状态的样式、尺寸

悬浮按钮56dp，普通按钮48dp

第七步：

公共控件

比如对话框

第八步：

模块

确定某个模块的风格

第九步：

布局

确定大致布局风格

一次性不能将规范全都覆盖到位，可以不断的添加并注明添加人和时间，经过设计部审核才能生效发布。

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 Interface 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 等功能。 参考技术A UI设计，是一个新型行业，现在是互联网+的时代，互联网+销售（衣食住行）都与互联网有关，互联网+管理，管理无非是人、财、物。并且大到国家，小到家庭个人。并且是一个层层渗透发展速度，因此互联网的前景非常广阔。UI行业是每个互联网公司都很需要的。 参考技术B 高质量的规范文档是一个优秀设计系统的代表物。我们详实地描述每个 UI 组件的设计与代码规范，来帮助设计师高效地作出决策，推动开发速度。编写高质量的文档需要前期规划和一系列合理的流程来辅助，付出的成本相当高。