育才学习网ui设计文档怎么写(ui设计规范文档怎么写)
1.ui设计规范文档怎么写
ui设计规范；ui设计规范有哪些？这个问题对于ui设计师来说应该是比较关心的吧，因为作为ui设计师，ui整理设计规范也是设计能力的一种体现。
所以，无论是自己设计创作还是推动产品开发，你的设计规范是否完善，对产品的质量起着决定性的关键作用。那么我们今天就来聊聊这个问题吧！ui设计规范有几大分类组成：1、Logo 品牌印象的直接感受，根据页面不同背景所使用的Logo图也不同。
将产品中所使用到的Logo统一分类，以下引用Moby's Petshop UI Style Guide的Logo资源例举说明。Moby's Petshop UI 的Logo由图形和文字组合而成，而品牌色为蓝色，Logo的使用也需要考虑到Footer黑色背景下的Logo。
所以用Logo的横竖向排版和单个Logo图形来分类更好。分类里面则展现品牌色的Logo、品牌色背景的Logo、Footer黑色背景的Logo。
2、标准色 颜色是设计最重要的部分，没有之一。细节决定品质，所以对颜色的运用格外细致，颜色的搭配直接决定产品的品质感。
颜色大致可分为品牌色、文本颜色、背景色、线框色等。给颜色添加关键词，明确用于什么界面。
以下引用real-pixels UI Style Guide的颜色规范，可以借鉴的是每个颜色不仅标注了颜色值，而且右侧给出了颜色使用的场景，值得借鉴的是按钮Normal状态和Hover状态的颜色值放在一起，这样，对不同状态显示的颜色感受更直观。对颜色值统一规范命名变量，提高开发效率的同时更好的维护设计规范。
在前端开发中，对颜色值进行编号，这样对代码也有着极大的优化。定义一个设计规范的CSS样式库，开发过程中就不用重复修改CSS参数值，直接引用定义好的变量名就可以，这样修改设计规范的成本大大降低。
3、字体 字体是设计中必不可少的考虑因素，不同的字体气质不一样，并且不同场景下带给人的感受也不一样。所以需要在设计的时候考虑到字体的设计效果，然后在设计规范中注明。
以下引用的是Retail Banking Service UI Style Guide中的字体规范，在定义字体名称的同时也定义了字体的风格，并且添加了不同字体风格的预览效果，常见的字体风格有：Light、Regular、Italic、Semibold、Bold。4、段落设置 在实际的产品设计中，段落有很多种样式，不同场景下的段落要求也不一样。
比如：阅读内容的段落要求文本可阅读性强，所以对字体、字号、颜色、行间距等要求简单易读。而带有装饰性的段落文本则不需要那么严谨，装饰性强就可以。
需要注意的是：在定义段落默认字体的时候还需要定义一个后备字体，即默认字体不能正常显示情况下显示的字体。设计的水平层次就在于对细节的打磨，这也就是段落规范在设计中存在的意义。
5、图标 图标是重要的软件标识，在设计资源中是最重要的模块之一。在软件产品中甚至可能每个页面都存在图标，图标除了美化的作用以外，还有着明确指代含义的计算机图形。
具体分为以下三个作用：图标是与其它网站链接以及让其它网站链接的标志和门户。图标是网站形象的重要体现。
图标能使受众便于选择。根据图标大小和使用用途进行分类整理设计规范，这样才更清晰明了。
6、图片 图片也是属于设计规范最重要的部分之一，按照用途分类整理图片资源，设计风格系统化。7、度量 在设计的过程中，我们经常会使用一套规范的度量标准，来保持产品的一致性，分别为圆角值、间距、大小。
对度量解释最好的是设计中经常使用到的栅格系统（Grid Systems），运用固定的格子设计版面布局，其风格工整简洁。这就是我们在网页和APP设计的过程中经常使用到栅格系统的原因。
8、阴影 阴影风格及参数也是设计规范中的一部分，在整理设计规范的时候，需要注意的是阴影的参数值是网页中控制阴影的参数值，而不是设计软件中的参数值。举个例子：网页中阴影对应的参数值为：box-shadow: type:Outset offset X:0px offset Y:4px Blur:8px Spread:0px color:#000000 ，不透明度：10%，这才是程序员需要的阴影参数值，否则最终开发出来的阴影会出现不一致的情况，无法达到规范的目的。
9、组件 常用的UI组件（Component）:Button控件、下拉框、选择框（单选\复选框）、时间选择器、输入框、搜索框、进度条、分页器、提示框、警告框、表格、弹出面板、数字步进器、选项卡等。Button控件 按钮是最常见的组件之一，按钮有5个状态：Normal、Hover、Active、Disabled 、Loading。
需要在规范中分别罗列出这五个状态，标注上对应的按钮填充色、边框色、圆角值、按钮宽度和高度，按钮文本大小、颜色值。如果是图标按钮的话，除了上述参数值以外还需要标注icon和按钮文本之间的间距和icon图标的大小。
10、下拉框 下拉框是为用户提供多个选择的单选组件，优点是用最简单的界面布局方式收纳了很多的选项，需要注意定义下拉选择框弹出的时候，鼠标移动上去的Normal、Hover、Active状态。11、选择框（单选\复选框） 顾名思义，单选框是众多选择里面选一个，而复选框是众多选择里面可以无限制选择。
单选框和复选框都需要三个状态，即未选中状态、选中状态和不可点击状态。时间选择器：时间选择器是选择年月日的组件，分别对应年月日星期的。
2.UI界面设计报告怎么写
1. 有UI效果图，导入进axure里添加文字后，可以直接生成pdf文档。
2. 如没有UI效果图，用axure画出各个ui的线框图或添加交互效果后，用 Foxit PDF Editor （免费）编辑pdf里的字，把各个UI页面的说明一改，齐活，特快！望给分~~~
axure下载地址：?ald
Foxit PDF Editor 下载地址：
3.UI 设计文档要包含哪些内容
UI设计文档主要是为了解释说明自己的设计，让别人能快速地了解自己的设计。
UI 设计文档要包含这样几个大的方面
1、文档接受（文档的目的、文档的范围、读者对象、参考的文档，术语与解释）
2、用户界面设计规范
3、用户界面汇总
4、界面标准和公共控件（界面元素精细标准、标准按钮库和快捷键、标准交互对话框库、标准分辨率、标准操作、标准表格、标准编辑项类型库、标准列表、标准快捷搜索）
5、界面详细设计
4.UI设计要怎么写年度目标
很多人很头疼，年度总结与新年目标该怎么写？其实年度总结与目标正好是我们向上级领导、以及同事们展现你对本职工作认识度与工作计划的途径。写得好零领导更加喜欢你，也许你的一个建议成为了公司前景的目标。
年度目标一般要结合自己的本职工作去写、切忌太宽泛：
1、首先是总结自己进来做过的项目、担任的事项，是否顺利，有什么可以改进的地方？有哪些可以学习的地方？一条一条列出来，简评一下。
2、目标是建立在当下的，不能没有根据的提出来。所以在你总结了你的今年所经历的大大小小的项目后，是否在本职工作中还需要有提升的地方？（你可以从UI工作流程中、团队沟通中、自己对产品设计的理解中、团队需要你的地方等等来简述）
3、本职工作讲完后，可以说说通过其他什么途径，来提升自己的对UI设计的理解、产品需求的研究、以及在综合产品知识方面的了解。例如看什么书、去哪些平台坚持每周看几篇设计文档、或者去参加XX举办的设计大赛取得一个什么成绩，等等。
最后，祝你2017年开心快乐，事业顺利！
5.如何写UI作品说明
既要清晰描述用户界面原型中的细节和交互方式，又要方便项目组的其他开发人员、需求人员以及测试人员等角色交流察看的说明文档。
主要内容包括：
1. 产品的目标和成功标准，（例如一个全新的预言项目不可能要求用户满意度在90%以上，对升级产品要求就会高一些。）
2. 产品最终用户群及产品用途（了解用户的年龄、职业、产品的使用环境等都是非常必要的）
3. 首先满足基本功能。（例如DVD机的基本功能是播放影碟，可能还有播放CD的功能等等）
4. 主要功能（在产品的几十个功能中通过用户验证和项目组筛选，选取用户最常用到的功能，将其优化，以不同层次展现于界面上。）
5. 用户界面特性。（每一款界面都有自己的特性，比如触摸屏的操作界面与手机的操作界面就算功能完全一样，结构、布局等特点也不会相同的。）
6.求问如何写“完”UI设计说明书
我们的目标是：
既要清晰描述用户界面原型中的细节和交互方式，又要方便项目组的其他开发人员、需求人员以及测试人员等角色交流察看的说明文档。主要内容包括：
1. 产品的目标和成功标准，（例如一个全新的预言项目不可能要求用户满意度在90%以上，对升级产品要求就会高一些。）2. 产品最终用户群及产品用途（了解用户的年龄、职业、产品的使用环境等都是非常必要的）
3. 首先满足基本功能。（例如DVD机的基本功能是播放影碟，可能还有播放CD的功能等等）
4. 主要功能（在产品的几十个功能中通过用户验证和项目组筛选，选取用户最常用到的功能，将其优化，以不同层次展现于界面上。）
5. 用户界面特性。（每一款界面都有自己的特性，比如触摸屏的操作界面与手机的操作界面就算功能完全一样，结构、布局等特点也不会相同的。）几点注意事项
1. 必须紧贴需求，围绕功能点展开。
2. 描述语言简短精确（这样别人看的时候才不会烦）
3. 保持文本的易维护性，建议使用WORD的大纲视图编写，便于更改和查找。
4. 说明书一定要有版本管理，对每次更新内容要做详细说明。
6. 注意纪录，包括项目组和用户以及合作伙伴，如果在解释某一特性时令两人以上会感到困惑，那这一部分就需要更清楚的阐述了。
7. 设计与实现同步，这个时最难的了，很多设计由于程序无法实现都被“卡”掉，早期程序也无法确定是否可以实现，伤脑筋！
8. 维护UI设计说明书时不要忘记维护原型，作为UI设计说明书的补充原型是很重要的。UI设计中容易被忽略的地方
1. 支持错误提示和撤销操作
2. 简便的安装和卸载。
3. 必要的设置和帮助。
4. 异常处理、错误消息的描述和问题回应提示。
5. 除界面上有的图标和按钮外，还要有快节键、菜单访问键、右键菜单、是否支持从其它软件界面内托拽复制文件等操作的说明。
7. 状态区，用来描述界面状态的区域，通常位于页面下方。（PS存储时状态区会显示进度条）
8. 剪贴板行为，用户在我们产品中拷贝的文字或图片的局部，是否可以贴入其他程序。
9. 指针的行为，说明超过多长时间的等待时应出现沙漏状态，在文本输入区光标应有改变、有链接的地方有变为小手等
10. 声音行为，警示音、按钮触发音等
11. 统一消息窗的弹出位置、背景色、大小、布局及特色
12. 菜单栏和下拉选项等程序动作的描述，是向下还是向右弹出等。
7.UI设计要怎么写年度目标
很多人很头疼，年度总结与新年目标该怎么写？其实年度总结与目标正好是我们向上级领导、以及同事们展现你对本职工作认识度与工作计划的途径。
写得好零领导更加喜欢你，也许你的一个建议成为了公司前景的目标。年度目标一般要结合自己的本职工作去写、切忌太宽泛：1、首先是总结自己进来做过的项目、担任的事项，是否顺利，有什么可以改进的地方？有哪些可以学习的地方？一条一条列出来，简评一下。
2、目标是建立在当下的，不能没有根据的提出来。所以在你总结了你的今年所经历的大大小小的项目后，是否在本职工作中还需要有提升的地方？（你可以从UI工作流程中、团队沟通中、自己对产品设计的理解中、团队需要你的地方等等来简述）3、本职工作讲完后，可以说说通过其他什么途径，来提升自己的对UI设计的理解、产品需求的研究、以及在综合产品知识方面的了解。
例如看什么书、去哪些平台坚持每周看几篇设计文档、或者去参加XX举办的设计大赛取得一个什么成绩，等等。最后，祝你2017年开心快乐，事业顺利。
ui需求文档怎么写
1.来,讨论一下怎么写需求文档吧
用例和UP的讨论UML 中各种图形的重要性排行先谈谈我的想法。
1、功能需求；2、非功能需求或技术需求；我一般把功能需求划分为几个部分：a、业务过程；b、业务规则；c、业务数据；非功能需求（技术需求）我就不多说了，大致就是可用性，可靠性，性能，可支持性等等。1、用例规格说明描述业务过程；2、业务规则文档描述业务规则；3、术语表描述业务数据；4、补充规格说明描述非功能需求（技术需求）；UP的做法还是很有道理的。
这体现了两个原则：1、分离关注点（每个文档描述相对独立的领域）；2、减少重复（很多用例都会引用相同的业务规则及业务数据）；这样便能够尽可能的使文档结构清晰，易阅读，易理解。也便于跟踪和维护。
但另一方面由于将不同的领域分离到不同文件的做法也使得可阅读性有所降低。比如用例规格说明中的业务过程描述时常需要引用业务规则文档中的业务规则及术语表中的业务数据。
由于不是很方便在各个文档之间导航，你可能需要打开多个文档进行交叉阅读。这是比较麻烦的，特别是对于用户来说。
而且UP中每个用例都单独作为一个文件存在，这可能是为了便于跟踪及管理的缘故吧。但正如上所述，文件多了看着就觉得不爽了。
我觉得完全可以将用例合并到一个文档中。或者几个相对独立的文档中（比如根据子系统划分）。
易理解，易沟通，易确认，易跟踪，易测试，易验收。我想我们都应该以这个为目标来进行思考。
推荐链接Java开发新方式：专注UI，快速开发。
2.来,讨论一下怎么写需求文档吧
用例和UP的讨论
UML 中各种图形的重要性排行
先谈谈我的想法。
1、功能需求；
2、非功能需求或技术需求；
我一般把功能需求划分为几个部分：
a、业务过程；
b、业务规则；
c、业务数据；
非功能需求（技术需求）我就不多说了，大致就是可用性，可靠性，性能，可支持性等等。
1、用例规格说明描述业务过程；
2、业务规则文档描述业务规则；
3、术语表描述业务数据；
4、补充规格说明描述非功能需求（技术需求）；
UP的做法还是很有道理的。这体现了两个原则：
1、分离关注点（每个文档描述相对独立的领域）；
2、减少重复（很多用例都会引用相同的业务规则及业务数据）；
这样便能够尽可能的使文档结构清晰，易阅读，易理解。也便于跟踪和维护。
但另一方面由于将不同的领域分离到不同文件的做法也使得可阅读性有所降低。比如用例规格说明中的业务过程描述时常需要引用业务规则文档中的业务规则及术语表中的业务数据。由于不是很方便在各个文档之间导航，你可能需要打开多个文档进行交叉阅读。这是比较麻烦的，特别是对于用户来说。
而且UP中每个用例都单独作为一个文件存在，这可能是为了便于跟踪及管理的缘故吧。但正如上所述，文件多了看着就觉得不爽了。我觉得完全可以将用例合并到一个文档中。或者几个相对独立的文档中（比如根据子系统划分）。
易理解，
易沟通，
易确认，
易跟踪，
易测试，
易验收
我想我们都应该以这个为目标来进行思考。
推荐链接Java开发新方式：专注UI，快速开发！
3.怎么写项目需求文档
1 项目概述
1.1 建设背景
1.2 建设需求
1.3 建设目标
1.4 建设依据
2 网络及硬件方案
2.1 网络方案
2.2 硬件方案
2.3 系统软件方案
3 平台软件建设方案
4 终端管理方案
5 接口
6 项目组织
6.1 项目组织
6.2 项目管理
6.3 问题管理过程
6.4 项目实施步骤
6.5 项目沟通与交流
6.6 项目风险分析
6.7 风险规避
7 实施计划
----------------------------------
只能给你提供一个简单的目录结构，这样估计你也知道该从哪里下手了~
不需要的可以更改，有自己的想法可以加进去~
做项目需求调研，最需要的是自己动脑去想~
4.需求文档怎么写
文档需要体现：
1，电路板的尺寸规格，比如材质要求、面积、形状、板厚、最小线宽、最小线距、单面制板还是双面或是多层制板、定位孔位置及定位孔尺寸等等；
2，元器件封装，普通插式元件还是贴片封装元件，是0805封装还是0603或是。。；
3，接口形式。是焊盘还是插座、用什么规格的插座；
4，有什么特殊的接地要求。
以上这些是最起码的文档内容，没有这些内容指导就不好做事啦。还有更复杂的要求就暂免了，如EMI、EMS等等。
ui设计规范怎么写
1. UI设计规范都有哪些
轴在UI设计中是最基本、最常见的概念，也是用来组织界面结构的重要核心。简单说来，轴是在设计的时候组织一系列元素的假象线，在下面的设计图中，轴以虚线的方式被标注出来。
1、对齐
轴最常见于对称元素的使用，当元素被布置成轴对称的布局的时候，会给人有序感。就像生活中绝大多数的事情一样，我们更倾向于享受有序的的东西，它们令人感觉平稳、舒适、平易近人。最简单的一个例子就是iTunes 程序中的专辑列表的设计，所有的专辑列表在界面的左侧保持对齐，围绕虚线轴轴对称。
2、强化
虽然轴是一条假想的线，但是如果周围的元素的边缘控制得足够整齐，这跳线会在视觉中变得更加“明显”的。最好的例子是城市中的路灯构成了道路两旁建筑物之间的轴，如果一边有建筑一边没有，那么这种轴线的感觉不会那么强烈。
从产品设计的角度上来看，Twitter 的时间线设计就是一个很好的案例，左侧的头像和右侧的推文共同塑造出缝隙中轴线的感觉。
3、运动
当我们碰到某先线条的时候，视觉会很自然地沿着这些方向运动，就如同我们站在街上，会自觉地沿着街道的两头走动。两个端点决定了线，界定了开始和结束的地方，线，或者说轴线的存在会引导和提示运动的方向。
SoundCloud中，音轨沿着一条既定的水平轴线运动，随着音乐的播放，音轨自然地自左向右匀速运动。
4、连续性
如果终点是不确定的，那么你通常会沿着轴线的方向浏览/运动，直到你找到感兴趣的东西，或者感到厌倦并关闭应用。在建筑学中，未清楚界定的终点非常少见，因为建筑的修建通常没法永远持续下去，但是UI设计则不一样，无限地滚动下去是无比受欢迎的设计手法。
Pinterest的APP中就是这样做的，持续不断的图片沿着中轴线的方向持续不断地滚动下去，只要你有兴趣一直观看下去。
二、对称
当元素被均匀地放置在轴线的两侧之时，他们构成了对称的关系。当元素被精准地在轴线两侧一一对应之时，它们就形成了完美对称。
2. UI设计的规范标准有哪些
UI即User Interface（用户界面）的简称，UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计，好的UI设计不仅是让软件变得有个性有品位，还要让软件的操作变得舒适简单、自由，充分体现软件的定位和特点。
在飞速发展的电子产品中，界面设计工作一点点的被重视起来，做界面设计的“美工”也随之被称之为“UI设计师”或“UI工程师”，其实软件界面设计就像工业产品中的工业造型设计一样，是产品的重要卖点，一个产品拥有美观的界面会给人带来舒适的视觉享受，拉近人与商品的距离，是建立在科学性之上的艺术设计，那么，UI设计的规范标准有哪些呢？一、轴 轴在UI设计中是最基本、最常见的概念，也是用来组织界面结构的重要核心。简单说来，轴是在设计的时候组织一系列元素的假象线，在下面的设计图中，轴以虚线的方式被标注出来。
1、对齐 轴最常见于对称元素的使用，当元素被布置成轴对称的布局的时候，会给人有序感。就像生活中绝大多数的事情一样，我们更倾向于享受有序的的东西，它们令人感觉平稳、舒适、平易近人。
最简单的一个例子就是iTunes程序中的专辑列表的设计，所有的专辑列表在界面的左侧保持对齐，围绕虚线轴轴对称。2、强化 虽然轴是一条假想的线，但是如果周围的元素的边缘控制得足够整齐，这跳线会在视觉中变得更加“明显”的。
最好的例子是城市中的路灯构成了道路两旁建筑物之间的轴，如果一边有建筑一边没有，那么这种轴线的感觉不会那么强烈。从产品设计的角度上来看，Twitter的时间线设计就是一个很好的案例，左侧的头像和右侧的推文共同塑造出缝隙中轴线的感觉。
3、运动 当我们碰到某先线条的时候，视觉会很自然地沿着这些方向运动，就如同我们站在街上，会自觉地沿着街道的两头走动。两个端点决定了线，界定了开始和结束的地方，线或者说轴线的存在会引导和提示运动的方向。
SoundCloud中，音轨沿着一条既定的水平轴线运动，随着音乐的播放，音轨自然地自左向右匀速运动（具体可查看马海祥博客《如何利用动效设计吸引访客的注意力》的相关介绍）。4、连续性 如果终点是不确定的，那么你通常会沿着轴线的方向浏览/运动，直到你找到感兴趣的东西，或者感到厌倦并关闭应用。
在建筑学中，未清楚界定的终点非常少见，因为建筑的修建通常没法永远持续下去，但是UI设计则不一样，无限地滚动下去是无比受欢迎的设计手法。Pinterest的APP中就是这样做的，持续不断的图片沿着中轴线的方向持续不断地滚动下去，只要你有兴趣一直观看下去。
二、对称 当元素被均匀地放置在轴线的两侧之时，他们构成了对称的关系。当元素被精准地在轴线两侧一一对应之时，它们就形成了完美对称。
1、平衡 对称令整个设计更加平衡，当元素与控件在轴线两侧处于相同位置之时，会给人以协调和谐的设计感。当我们在规划街道两侧的房屋建设的时候，如果左右两侧都是5间大小一致的房子，当你走在街上的时候这种平衡的设计会令人非常舒适，这是平衡给人的感受。
Rdio的APP设计就遵循着这样的设计规则，屏幕两侧的控件是相同的规格，这类布局很适宜阅读，用户会自觉地自上到下，从左向右查看。2、不对称 如果轴线两侧的控件布置不再是一一对应尺寸相近，那就是不对称的设计，不对称的设计会给人明显的失衡感，可能会令人不舒服，但是也能造就残缺美，当然这要看你具体怎么做。
虽然Pinteret的APP设计在整体上是沿着中轴线对称的（宽度一致），但是两边的界面控件并非是对称的，它们的高度并不一致，位置也是错落的，稍微一点的落差都会被眼睛捕捉到，而这样的差异让用户无法准确地左右顺序阅读，不对称设计打破了设计的平衡性和舒适性，但是也可以缓解了规律性设计带来的视觉疲劳。三、层级 当某个元素出现在比其他元素更重要的位置的时候，层级就出现了。
1、尺寸 如果一个设计元素在尺寸上比其他的控件更大，就会区分出层级。毫无疑问，我们查看某个设计的时候，通常会被最大的元素吸引到。
如果一个建筑物有5个出窗户，其中一个是其他四个的两倍大，我们的注意力自然而然会被吸引过去。通过尺寸来区分文章列表层级的典型就是稍后读应用Pocket，顶部的轮播文章拥有更大的图片，它的位置和尺寸会令我们一眼注意到（具体可查看马海祥博客《详解移动端设备页面尺寸设计原理》的相关介绍）。
2、形状 如果一个控件在形状和形态上同其他的不一样，也可以让它独立出一个层级，不规则的设计同样会令人侧目，建筑物的正面拥有五个相同的窗户和一闪大门，你会立刻注意到门的独特之处。在Instagram的个人信息页中，圆形的个人头像在方形的图片中别具一格，非常抓人眼球。
它会让人意识到，这个独特的东西，更为重要。3、位置 位置的存在同样能彰显层级的不一样，在圆圈之内，中心位置的东西比边缘部分的看起来更重要，位于轴线顶端的控件会显得比其他部分的优先级更高。
以设计应用Path的设计为例，时间轴顶点处的用户头像就明显比时间轴上的其他部分更重要，而这个地方正好展示的也是用户头像。四、韵律 UI设计和建筑设计同样有着韵律之美。
3. 如何建立一套完整的UI 设计规范
前几个月都在陆陆续续做这件事，中间做着做着就焦头烂额了，遇到很多一时想不清楚的问题，直到最近才产出一份初具雏形的文档，不过在规范文档没有产出之前就已经在印象笔记中边设计边梳理所有的元素以保证界面的一致性，这二天正好在知乎上看到这个话题，就顺道来吐吐撰写设计规范过程中的一些想法~
首先需要想清楚这份规范文档是给谁使用，偏视觉和偏前端的规范并不一样，本来自己做之前是考虑给设计师查阅，但编写的过程中又觉得应该让前端工程师也能使用，可那样就意味着得包含相关样式的代码，且是网页格式，思考再三还是决定先专注于视觉设计师这个角色，让团队中不同的设计师能够产出设计语言一致的界面方案为先。而类似于JJ Ying分享的Lonely Planet或Purple: A UI kit for Heroku's web interfaces这种偏前端的样式库我认为可以让前端工程师去建立。
然后我也认为一套细致的设计规范对于更新迭代快速的互联网产品来说性价比不高，很可能好不容易完成了但又要面临新版本迭代，我的解决方案是出一份像Material Design 中文版式的Style Guide+UI Kit+标注图搭配使用，这也是受到台湾UI设计师Akane Lee的启发，可参考她的博文 UI 设计师应该要会写的文件
下面分别。
前几个月都在陆陆续续做这件事，中间做着做着就焦头烂额了，遇到很多一时想不清楚的问题，直到最近才产出一份初具雏形的文档，不过在规范文档没有产出之前就已经在印象笔记中边设计边梳理所有的元素以保证界面的一致性，这二天正好在知乎上看到这个话题，就顺道来吐吐撰写设计规范过程中的一些想法~
首先需要想清楚这份规范文档是给谁使用，偏视觉和偏前端的规范并不一样，本来自己做之前是考虑给设计师查阅，但编写的过程中又觉得应该让前端工程师也能使用，可那样就意味着得包含相关样式的代码，且是网页格式，思考再三还是决定先专注于视觉设计师这个角色，让团队中不同的设计师能够产出设计语言一致的界面方案为先。而类似于JJ Ying分享的Lonely Planet或Purple: A UI kit for Heroku's web interfaces这种偏前端的样式库我认为可以让前端工程师去建立。
然后我也认为一套细致的设计规范对于更新迭代快速的互联网产品来说性价比不高，很可能好不容易完成了但又要面临新版本迭代，我的解决方案是出一份像Material Design 中文版式的Style Guide+UI Kit+标注图搭配使用，这也是受到台湾UI设计师Akane Lee的启发，可参考她的博文 UI 设计师应该要会写的文件
下面分别说下这三种产出物的作用
Style Guide
pdf格式，主要作用是指南。用于说明色相、字体、字号、分隔线、间距等这些影响到风格形式的元素如何使用，如何建立层级，为了直观，需要适当的配上标注图，并说明界面中各组件的作用和使用场景。组件无需标注，从UI Kit的psd文件中提取即可。
UI Kit
psd格式，主要作用是提取。设计师可直接拖拽至PS中使用。
标注图
png格式，主要作用是参考。Style Guide中不会包含方方面面场景的情况，如果设计师捉摸不定逻辑上的一致性和合适的层级设定，可以参考更多以前交付给前端工程师的页面标注图，我向设计师传达的一个原则是：除非有更好的方案进行全局替代，否则应尽量使用之前已应用的方案，避免每次迭代都出现新的方案造成不一致问题的放大。
以上便是我目前在使用的方案，且仍在完善中，供各位知友酌情参考，最后附上几张Style Guide文档和Web UI Kit的的截图。
4. 如何制定UI设计规范
使用一致的标记、标准缩写和颜色，显示信息的含义应该非常明确，用户不必再参考其它信息源。
显示有意义的出错信息，而不是单纯的程序错误代码。
避免使用文本输入框来放置不可编辑的文字内容，不要将文本输入框当成标签使用。
使用缩进和文本来辅助理解。
使用用户语言词汇，而不是单纯的专业计算机术语。
高效地使用显示器的显示空间，但要避免空间过于拥挤。
保持语言的一致性，如“确定”对应“取消”，“是”对应“否”。
5. 如何写设计规范
如何设计切实可行的训练方案，是落实规范汉字书写训练的关键。多年来，我们在教学中对此进行了一定研究，初步总结出了设计书写训练方案应该遵循的几条原则：
1.统一性原则
所谓统一性原则，就是规范汉字书写训练的设计要与提高日常实用书写水平相统一，把“练”与“用”有机地结合在一起。要尽可能避免脱离实用的竖写训练。好的训练方案设计应该使学生不但在书写质量上有所长进，而且在书写速度上有所提高，以满足日常快速书写的需要。
2.阶段性原则
规范汉字书写训练，应该多次反复，但每次反复都不是简单重复，而要在训练的内容和要求上有所侧重，有所提高。这就是书写训练的阶段性原则。书写训练的要求要从易到难，由浅入深，避难求易，即使是同一内容的几次反复训练，也要循序渐进，在要求上逐步提高，形成一定的坡度。
3.针对性原则
同一个内容，可以从不同角度设计出不同的训练方案。哪些练习是合理的，哪些练习是不合理的，检验的标准只有一个，那就是是否针对了不同学生的不同实际需要。凡是紧扣学生的实际需要设计出来的练习，就是好练习；反之，就不是好练习。这就是针对性原则。
4.整体性原则
汉字是由笔画、部件（偏旁）组合而成的。要用它们组成和谐统一的方块字，必须考虑汉字的整体。如果在书写训练时忽视了汉字的整体与部分的关系，只是一笔一画地生拼硬凑，必然会顾此失彼，从而导致结构散乱，并直接影响书写速度。只有以整体观来把握书写的内在联系，才能逐步纠正拼凑笔画的错误书写习惯，并为从楷书到行书的过渡打下良好的基础。
6. 如何建立一套 UI 设计规范
首先需要想清楚这份规范文档是给谁使用，偏视觉和偏前端的规范并不一样，本来自己做之前是考虑给设计师查阅，但编写的过程中又觉得应该让前端工程师也能使用，可那样就意味着得包含相关样式的代码，且是网页格式，思考再三还是决定先专注于视觉设计师这个角色，让团队中不同的设计师能够产出设计语言一致的界面方案为先。
而类似于JJ Ying分享的Lonely Planet或Purple: A UI kit for Heroku's web interfaces这种偏前端的样式库我认为可以让前端工程师去建立。然后我也认为一套细致的设计规范对于更新迭代快速的互联网产品来说性价比不高，很可能好不容易完成了但又要面临新版本迭代，我的解决方案是出一份像Material Design 中文版式的Style Guide+UI Kit+标注图搭配使用，这也是受到台湾UI设计师Akane Lee的启发，可参考她的博文 UI 设计师应该要会写的文件，具体的话可以Q 1634795453。
下面分别说下这三种产出物的作用Style Guidepdf格式，主要作用是指南。用于说明色相、字体、字号、分隔线、间距等这些影响到风格形式的元素如何使用，如何建立层级，为了直观，需要适当的配上标注图，并说明界面中各组件的作用和使用场景。
组件无需标注，从UI Kit的psd文件中提取即可。UI Kitpsd格式，主要作用是提取。
设计师可直接拖拽至PS中使用。标注图png格式，主要作用是参考。
Style Guide中不会包含方方面面场景的情况，如果设计师捉摸不定逻辑上的一致性和合适的层级设定，可以参考更多以前交付给前端工程师的页面标注图，我向设计师传达的一个原则是：除非有更好的方案进行全局替代，否则应尽量使用之前已应用的方案，避免每次迭代都出现新的方案造成不一致问题的放大。以上便是我目前在使用的方案，且仍在完善中，供各位知友酌情参考，最后附上几张Style Guide文档和Web UI Kit的的截图。
转载请注明出处育才学习网 » ui设计规范文档怎么写