育才学习网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的的截图。
