江苏龙网

  1. 首页 > 人文 > >

UI设计基本规范

_本文原始标题：UI设计基本规范
想要学习UI ， 那你知道UI设计的基本规范有哪些吗?
UI设计基本规范
文章图片

一、设计原则
统一性：每个设计应该是统一的 ， 不能有太多个性差异化的特征;
【UI设计基本规范】内容：用户更多关注的是内容 ， 而非设计本身;
确定性：在设计中减少不确定的因素 ， 和预期 。
二、色彩系统
设计中三大元素 ， 色彩 ， 字体 ， 图形 ， 我们在建立一个系统时候 ， 色彩是很重要一部分 ， 我们需要定义好我们整个系统的色彩架构体系 ， 色彩体系一旦建立好 ， 后面我们的设计都将围绕这些色彩进行设计 ， 色彩包括：品牌色、辅助色、字体黑白灰颜色、不可用颜色、超链接颜色、成功或失败颜色 ， 主色盘,辅助色盘,色盘延伸等 。
三、图形
图形 ， 设计中很重要元素之一 ， 我们插画风格图形如何定义 ， 图标 ， 背景图形都属于图形一部分 。 插画在设计运用类型有几种 ， 比如atlassian对于他们插画类型进行了规范 ， 插画需要有隐秘和故事性在里面 ， 插画必须有构建的感觉 ， 定义了人物特征以及颜色规范 。 包括对于空白页图形定义 ， 对图标风格定义 ， 包括色彩关系 ， 对于头像 ， 定义了有五官和无五官风格定义 ， 包括整个规范的正确示范和错误示范,图标规范等 。
四、栅格系统
栅格是为了保证页面中更好的布局 ， 保证布局统一性 。 栅格系统里面又分最小单位和间距 ， 在airbnb中对于间距 ， 他们运用了8的倍数 ， 所有的规范都是很有弹性的 ， 8 ， 16 ， 24 ， 48 ， 64来建立 。 网格系统中的列,也有叫栏,网格系统中的行,网格系统中的水槽,网格系统中的边距 。
五、字体
界面中出现最多的内容字体 ， 字体除了传统意义上大小之外 ， 还有字间距、行间距、字重对比、字体颜色等 。 字重 ， 就是字体粗细 ， 通过字重可以加强层级;字体大小以及运用场景 ， 字体在界面中什么样场景运用多大字号 ， 以及对应的字间距 ， 行间距等等都是需要我们去定义的;字体颜色 ， 什么时候用品牌色 ， 成功 ， 错过 ， 超链接出错等等各个状态的颜色如何去定义 ， 后面文章我会详细说明 。
六、投影
在设计系统中我们需要定义好投影关系 ， 投影需要去定义不同的强度大小 ， 以满足页面中需要 ， 一般通过透明度 ， 以及投影远近来定义 。
七、图文关系
图片和文字在界面中如何处理 ， 多色调如何运用 ， 黑色图片上放文字怎么处理 ， 白色图片放文字如何处理都是需要我们去详细定义的 。
设计一套设计语言是一个很复杂的过程 ， 前期一般需要比较资深的的设计师来完成 ， 设计完成后 ， 对于基础的颜色 ， 字体不要经常变动动 ， 成本会比较高 ， 至少需要保证这些基础元素 ， 一年内不要频繁变动 ， 今天和大家分享的只是一个大概框架 ， 后续我将会拆解里面每个模块 ， 逐步和大家分享如何去设计一个语言 。
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),当然iOS11中出现了大标题的设计 ， 字号还是要根据产品属性酌情设定 。 另外需要注意的一点是所有的字号设置都必须为偶数 ， 上下级内容字号极差关系为2-4号 。 关于字体 。
十三、切图规范
当界面设计定稿之后 ， 设计师需要对图标进行切片提供给开发工程师 ， 通常我们只需要对icon进行切图即可 ， 文字、线条和一些标准的几何形状是不需要切图的 ， 例如搜索框只需要在标注中描述它的尺寸、圆角大小、背景色值、不透明度即可 ， 开发工程师可以用代码实现这种效果 。
输出切片
先将设计稿中的图标重新排列在一张新的画布中 ， 保证同样尺寸的图标间距相同 ， 这样做的好处是为图标建立一个控件库 ， 有利于图标的整理 。
给每一个图标建立好参考线之后 ， 用PS自带的切片功能 ， 沿着建立好的每个图标的参考线画框即可 ， 注意最后要输出PNG格式的切片(PNG格式拥有更多的颜色和细节并且支持透明) 。
在具体操作时首先要将画布背景色去掉 ， 让画布变成透明 ， 做好切片后执行文件-存储为Web所用格式 ， 在对话框中选择PNG格式 ， 点击「存储」即可
切片命名
切片命名的通用规范是 ， 界面_功能_状态.png 。 名称应使用英文命名 ， 不要使用数字或者符号作为开头 ， 使用下划线进行连接 ， 例如一个首页处于正常状态下的按钮命名是home_btn_nor@2x.png 。 其中界面首页是home、空间按钮是btn、状态正常是normal 。 为了命名的正确性 ， 设计师需要先和合作的开发工程师进行沟通确认 。
十四、设计稿标注
当界面设计定稿之后 ， 设计师需要对界面进行标注给开发工程师在还原界面时进行参考 。 借助一些专业的标注工具有利于我们提高工作效率 ， 常用的标注工具有MarkMan或PXCook 。
在一份设计稿中需要标注的内容是文字的字号大小、粗细、颜色、不透明度;界面的背景颜色、不透明度;各个图标、列表、文字之间的间距 。
十五、程序的对应控件
Label的自身属性：颜色、字号、字体、行间距、对齐方式、透明度;
ImageView的自身属性：宽高、间距、距离、透明度 。
如今使用本地化插件SketchMeasure ， 几乎不用手工标注 ， 标注导出HTML后 ， 直接给开发 ， 他们想看什么属性自己点击查看 。 而一些线上工具的插件 ， 比如蓝湖、墨刀、Mockplus等 ， 功能更加丰富 。


    推荐阅读


    上一篇：都5G网速了，柯震东凭什么还觉得自己能被观众原谅？？

    下一篇：淘宝|降维起爆模型——2020全新淘宝运营思路