UI十点设计规范

来源：邢台IT培训学院时间：2020/6/28 9:45:16

UI设计(或称界面设计)是指对软件的人机交互、操作逻辑、界面美观的整体设计，也叫界面设计。UI设计分为实体UI和虚拟UI，互联网说的UI设计是虚拟UI，UI即UserInterface(用户界面)的简称。

好的UI设计不仅是让软件变得有个性有品位，还要让软件的操作变得舒适简单、自由，充分体现软件的定位和特点。

邢台IT培训学校

产品发展日趋平稳时，产品定位和品牌形象已进入稳定状态，参与设计的人越来越多，设计的统一性和效率的问题也渐渐显现。因此，为了增加平台设计统一性，提升团队工作效率，打磨细节体验，就需要我们定义和整理设计规范。
1.确定规范内容
UI设计中，设计规范是一个关键步骤。大厂基本上都有一套自己的完整规范体系，在整理设计规范时，以大平台规范体系作为参考，针对产品自身情况增删，整理出我们自己所需要的规范内容，能有效地避免规范内容遗漏缺失。
2.色彩规范
颜色是设计中重要的元素，颜色的运用与搭配决定设计的品质感。在UI设计中，颜色的使用规范主要在于：品牌主色、文本颜色、界面颜色（背景色、线框色）等。
3.字体规范
不同的字体气质不一样，并且不同场景下带给人的感受也不一样。所以需要在设计的时候考虑到字体的设计效果，然后在设计规范中注明。
4.图标规范
在UI界面中，具有标识性质的图形就是图标。作为UI设计中重要的设计模块，产品的每个页面中都有可能存在图标。设计规范中，图标一般按照用途分为两类：应用图标、功能图标。
应用图标：各种应用程序的识别标志，在应用商店里下载的一些应用程序的标志。
功能图标：规范中好标明图标格式与使用方式。比如Web设计，图片可以使用iconfont管理，可生成代码交付给前端开发；如果是原生APP，那么需要标注图标导出格式与尺寸。
5.图片规范
图片作为界面设计的重要组成部分，需要标明尺寸规范，分为不同用途的种类。
6.设计尺寸&栅格系统
设计尺寸，是指进行设计时，选择的画板尺寸。例如是750*1334，还是375*667，每个公司设计的基准都不一样，所以设计尺寸并没有规定只能用某一个尺寸，我们在设计时，使用的1倍图为基准进行设计的，基准尺寸为375*667。
栅格系统，是运用固定的格子设计版面布局，在UI设计和前端开发中被广泛应用的一套体系。在设计尺寸中提到栅格系统，是因为现在的设计基本都是一稿适配多端，而栅格系统能很好的解决这个问题。
7.界面布局
布局是页面构成的前提，是后续展开交互和视觉设计的基础。设计规范中可以提供常用的布局模板来增加同类产品间的一致性，设计者在选择布局之前，需要注意以下几点原则：
*明确用户在此场景中完成的主要任务和需获取的决策信息。
*明确决策信息和操作的级及内容特点，选择合理布局。
8.组件规范
常用的UI组件（Component）：表格、对话框、提示条、气泡提示、日期选择器、多级选择器、标签输入框、组合框、上传等。
在skecth中设计时，使用Symbol创建的组件，在后期整理时，可以节省许多的时间。
当然，Figma也同样具备这样的能力，你所创建的组件都存在于Assets中。
9.缺省页面
*空状态页面：显示对应的页面空状态的图标，增加相应的引导按钮。
*无网络状态：在没有连接到网络时的提示页面。
*404&505页面：发生未知错误时的页面。
10.规范级
了解规范的内容有哪些之后，我们需要确认的是规范级，规范内容庞大复杂，基础的、必要的、高性价比的放在个版本中，复杂的往后放，随着产品的迭代，规范才会越来越完整。
总结
一个好的规范应该是的、简单易懂的。具体执行时，我们应该确类合理、规范本身保持一致、布局排版易读，来提升设计师查阅的效率；确保定义清晰、描述准确、场景完备，来帮助设计师理解和使用。但值得注意的是，设计规范并不是「圣经」，不要因为规范而限制了自己的思维，当发现规范有问题的时候，要及时去修正，而不是做了一次之后，一直沿用，永不修改。

领取试听课

每天限量名额，先到先得

尊重原创文章，转载请注明出处与链接：http://www.peixun360.com/2331/news/207691/违者必究！以上就是邢台IT培训学院小编为您整理 UI十点设计规范的全部内容。