UI设计规范有哪些，ui设计规范有人知道吗

大家好！对于UI设计规范有哪些你是否还存在疑惑呢？不用担心，今天本站就为大家提供关于UI设计规范有哪些的详尽解读，同时，我们也会探讨涉及到ui设计规范有人知道吗的相关问题。我们希望能通过这些信息，为大家解决实际问题。现在，让我们开始吧！

ui设计规范有人知道吗

一、一致性原则

坚持以用户体验为中心设计原则，界面直观、简洁，操作方便快捷，用户接触软件后对界面上对应的功能一目了然、不需要太多培训就可以方便使用本应用系统。

在整个平台中创造一致性，颜色、按钮、字体、品牌一致性，给用户安全感与熟悉感，同时解决设计师因为个人特征导致界面不统一问题。

1、字体

保持字体及颜色一致，避免一套主题出现多个字体;不可修改的字段，统一用灰色文字显示。

界面中出现最多的内容字体，字体除了传统意义上大小之外，还有字间距、行间距、字重对比、字体颜色等等

a)字重，顾名思义就是字体粗细，通过字重可以加强层级

b)字体大小以及运用场景，字体在界面中什么样场景运用多大字号，以及对应的字间距，行间距等等都是需要我们去定义的。

c)字体颜色，什么时候用品牌色，成功，错过，超链接出错等等各个状态的颜色如何去定义，后面文章我会详细说明。

2、对齐

保持页面内元素对齐方式的一致，如无特殊情况应避免同一页面出现多种数据对齐方式。

3、表单录入

在包含必须与选填的页面中，必须在必填项旁边给出醒目标识;各类型数据输入需限制文本类型，并做格式校验如电话号码输入只允许输入数字、邮箱地址需要包含“@”等，在用户输入有误时给出明确提示。

4、鼠标手势

可点击的按钮、链接需要切换鼠标手势至手型;

5、保持功能及内容描述一致

避免同一功能描述使用多个词汇，如编辑和修改，新增和增加，删除和清除混用等。建议在项目开发阶段建立一个产品词典，包括产品中常用术语及描述，设计或开发人员严格按照产品词典中的术语词汇来展示文字信息。

6、效率

提升效率，对于一些我们经常用到的组件、颜色、分割线、按钮、图标、字体、tab、表单等组件，如果提前设计统一好，能大大减少重复性设计，能让设计师更加专注在设计品质上加强，提升效率，对于基础的颜色、字体、间距可以提前开发好，减少重复性开发。

7、多平台统一

我们现在处于一个各种设备的时代，各种屏幕尺寸，平板电脑，笔记本，各种安卓机器，各种厂商自定义的系统等等，我们的设计需要在这些平台上运行，就必须保证设计的统一性。

8、投影

在设计系统中我们需要定义好投影关系，投影需要去定义不同的强度大小，以满足页面中需要，一般通过透明度，以及投影远近来定义。

9、图文关系

图片和文字在界面中如何处理，多色调如何运用，黑色图片上放文字怎么处理，白色图片放文字如何处理都是需要我们去详细定义的。

10、色彩系统

设计中三大元素，色彩，字体，图形，那么第一步我们在建立一个系统时候，色彩是很重要一部分，我们需要定义好我们整个系统的色彩架构体系，色彩体系一旦建立好，后面我们的设计都将围绕这些色彩进行设计，色彩包括：品牌色、辅助色、字体黑白灰颜色、不可用颜色、超链接颜色、成功或失败颜色等等。

二、准确性原则

使用一致的标记、标准缩写和颜色，显示信息的含义应该非常明确，用户不必再参考其它信息源。

显示有意义的出错信息，而不是单纯的程序错误代码。

避免使用文本输入框来放置不可编辑的文字内容，不要将文本输入框当成标签使用。

使用缩进和文本来辅助理解。

使用用户语言词汇，而不是单纯的专业计算机术语。

高效地使用显示器的显示空间，但要避免空间过于拥挤。

保持语言的一致性，如“确定”对应“取消”,“是”对应“否”。

三、可读性原则

1、文字长度

文字的长度，特别是在大块空白的设计中很重要，太长会导致眼睛疲惫，阅读困难。太短又经常会造成尴尬的断裂效果，断字的使用也会造成大量的复合词，这些断裂严重的影响了阅读的流畅性。

2、空间和对比度

每个字符同线路长度，间距也是重要的。所以每个字符之间的空间至少等于字符的尺寸，大多数数字设计人员习惯选择一个最小的文字大小的150%为空间距离，这就可以留下足够的空间。当每一行中读取大段的文字，且线路长度过多或线之间的空间太少，都会造成理解困难。

3、对齐方式

无论是在文本中心，还是偏左，或者是沿着一个文件的右侧对齐，文本的对齐相当重要，可以极大地影响可读性。一般而言，文本习惯向左对齐，因为它反映了你的阅读方式–从左至右。你熟悉每一行开始和结束的地方。

四、布局合理化原则

在进行设计时需要充分考虑布局的合理化问题，遵循用户从上而下，自左向右浏览、操作习惯，避免常用业务功能按键排列过于分散，以造成用户鼠标移动距离过长的弊端。多做“减法”运算，将不常用的功能区块隐藏，以保持界面的简洁，使用户专注于主要业务操作流程，有利于提高软件的易用性及可用性。

相关推荐

ui设计规范大全

ui设计培训四个月骗局

零基础学ui设计真他妈惨

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设计和建筑设计同样有着韵律之美，重复的模式会营造出独特的节奏之美。

1、模式理解韵律最直接的方式就是听歌，音乐拥有节奏感，绝大多数的音乐遵循着相同的节拍，节拍就是音乐模式的一部分。这方面最典型的APP是Airbnb，APP列表中每一间房子都占据一个模块，模块中有着大小相同的图片，价格、位置和房东信息和图片的相对位置一定，且排版匀称舒服，两个模块之间的间距也相同，当你浏览的时候，熟悉的节奏会让你清楚地知道上哪看关键信息。

2、间断当节奏被间隔打断的时候，会形成不同的层级，听歌的时候，均匀的节奏被其他的音乐元素打断的时候，你会意识到这是比较特别的部分。在Twitter的APP中，推文和推文保持着相同的样式，均匀的节奏，但是其中的“推荐用户”一项有着不同的样式，它插入到推文列表中，打破了整个信息流的节奏，凸显出不同的层级，会很快抓住你的注意力。

UI设计规范都包含哪些规范

1.基础规范

基础规范我划分的是组成页面最小的元素、是最基础的一步。基础规范有文字、颜色、布局层级、图形、分割线等。

2.组件规范

组件规范是由两个元素组成，且可点击的控件。组件规范有按钮、导航栏、搜索框、tab栏、列表、表格、筛选器等。

3.模块规范&banner运营规范

模块规范是一个大的板块，如金刚区、列表流、图片流等;因为banner运营是一个很复杂的模块，需要单独定义规范。

4.特殊状态规范

设计场景中一些特殊的状态，也是我们设计时经常忽略的地方。特殊状态规范有弹窗、空白页、加载态、toast浮层、启动图等等。

通过这四种规范的建立，UI设计规范已经很全面、细致了，希望大家在做设计的过程中善于总结归纳，同时积极主动的去建立规范、建立组建库。逐步的去解放自己的时间、成本，去做一些更具有创造力的工作，减少重复性工作。