如何掌握UI设计规范的技巧

来源：南京中公优就业IT培训机构时间：2020/7/16 16:43:22

　　如何掌握UI设计规范的技巧以下是小编为大家整理UI设计知识点的内容。

　　一、边距和间距

　　在移动端页面的设计中，页面中元素的边距和间距的设计规范是非常重要的，一个页面是否美观、简洁、是否通透和边距间距的设计规范紧密相连，所以说我们有必要对它们进行了解。

　　全局边距

　　全局边距是指页面内容到屏幕边缘的距离，整个应用的界面都应该以此来进行规范，以达到页面整体视觉效果的统一。全局边距的设置可以更好的引导用户竖向向下阅读。

　　卡片间距

　　在移动端页面设计中卡片式布局是非常常见的布局方式，至于卡片和卡片之间的距离的设置需要根据界面的风格以及卡片承载信息的多少来界定，通常小不低于16px，卡片间距的设置是灵活多变的，一定要根据产品的气质和实际需求去设置，平时也可以多截图测量一下各类 APP 的卡片间距都是怎么设置的，看的多了并融会贯通，卡片间距设置自然会更加合理，更加得心应手。

　　内容间距

　　一款 APP 除了状态栏、导航栏、标签栏、工具栏和控件icon就是内容了，内容的布局形式多种多样。格式塔邻近性原则认为：单个元素之间的相对距离会影响我们感知它是否以及如何组织在一起，互相靠近的元素看起来属于一组，而那些距离较远的则自动划分组外，距离近的关系紧密。

　　二、内容布局

　　在 APP 的设计中内容的布局形式多种多样，常用的两种布局形式就是列表式布局和卡片式布局。

　　列表式布局

　　列表式布局方式非常普遍，随便打开一个 APP，基本都存在这种布局方式，其布局形式的特点在于能够在较小的屏幕中显示多条信息，用户通过上下滑动的手势能获得大量的信息反馈。而列表也是一种非常容易理解的展示形式。

　　卡片式布局

　　形式非常灵活。其特点在于，每张卡片的内容和形式都可以相互独立，互不干扰，所以可以在同一个页面中出现不同的卡片承载不同的内容。而由于每张卡片都是独立存在的，其信息量可以相对列表更加丰富。

　　在使用卡片式布局的时候要注意卡片本身一般是白色的，而卡片之间的间距颜色一般是浅灰色，当然不同产品风格颜色可能不一样，有些是浅灰色偏蓝等。

　　三、界面图片设计比例

　　在 UI设计中，对于图片的尺寸和比例没有严格的规范，设计师往往凭借经验和感觉设置一个看起来不错的尺寸，但事实上我们是有章可循的。运用科学的手段设置图片的尺寸，可以获得优的方案，常见的图片尺寸有16:9、4:3、3:2、1:1和1:0.618(黄金比例)等。

　　四、APP版式设计规范

　　版式设计又叫做版面编辑，即在有限的版面空间里，将版面的构成要素如文字、图片、控件等根据特定的内容进行组合排列。一个的排版要考虑到用户的阅读习惯和设计美感，在 UI设计中版面设计的原则有哪些呢?

　　五、界面文字设计规范

　　文字是 APP 中核心的元素，是产品传达给用户的主要内容，所以说文字在 APP 的设计中是非常重要的，那么，文字的字体如何选择，字号如何设定，是否加粗，颜色如何设置

　　在一款 APP 中字号范围一般在20-36之间(@2x),当然 iOS 11中出现了大标题的设计，字号还是要根据产品属性酌情设定。另外需要注意的一点是所有的字号设置都必须为偶数，上下级内容字号极差关系为2-4号。关于字体。

　　六、切图规范

　　当界面设计定稿之后，设计师需要对图标进行切片提供给开发工程师，通常我们只需要对 icon 进行切图即可，文字、线条和一些标准的几何形状是不需要切图的，例如搜索框只需要在标注中描述它的尺寸、圆角大小、背景色值、不透明度即可，开发工程师可以用代码实现这种效果。

　　输出切片

　　先将设计稿中的图标重新排列在一张新的画布中，增加同样尺寸的图标间距相同，这样做的好处是为图标建立一个控件库，有利于图标的整理。

　　给每一个图标建立好参考线之后，用 PS 自带的切片功能，沿着建立好的每个图标的参考线画框即可，注意后要输出 PNG 格式的切片(PNG 格式拥有更多的颜色和细节并且支持透明)。

　　在具体操作时首先要将画布背景色去掉，让画布变成透明，做好切片后执行文件-存储为 Web 所用格式，在对话框中选择 PNG 格式，点击「存储」即可

　　切片命名

　　切片命名的通用规范是，界面_功能_状态.png。名称应使用英文命名，不要使用数字或者符号作为开头，使用下划线进行连接，例如一个首页处于正常状态下的按钮命名。其中界面首页是 home、空间按钮是 btn、状态正常是 normal。为了命名的正确性，设计师需要先和合作的开发工程师进行沟通确认。

　　七、设计稿标注

　　当界面设计定稿之后，设计师需要对界面进行标注给开发工程师在还原界面时进行参考。借助一些专业的标注工具有利于我们提高工作效率，常用的标注工具有 Mark Man 或 PX Cook。

　　在一份设计稿中需要标注的内容是文字的字号大小、粗细、颜色、不透明度;界面的背景颜色、不透明度;各个图标、列表、文字之间的间距。

　　八、程序的对应控件

　　Label的自身属性：颜色、字号、字体、行间距、对齐方式、透明度;

　　Image View的自身属性：宽高、间距、距离、透明度。

尊重原创文章，转载请注明出处与链接：http://www.peixun360.com/3182/news/219525/违者必究！ 以上就是南京中公优就业IT培训机构 小编为您整理 如何掌握UI设计规范的技巧的全部内容。