IT培训-高端面授IT培训机构
云和教育:云和数据集团高端IT职业教育品牌 全国咨询热线:0371-67988003
课程 请选择课程
    校区 请选择校区
      • 华为
        授权培训中心
      • 腾讯云
        一级认证培训中心
      • 百度营销大学
        豫陕深授权运营中心
      • Oracle甲骨文
        OAEP中心
      • Microsoft Azure
        微软云合作伙伴
      • Unity公司
        战略合作伙伴
      • 普华基础软件
        战略合作伙伴
      • 新开普(股票代码300248)
        旗下丹诚开普投资
      • 中国互联网百强企业锐之旗
        旗下锐旗资本投资

      标注规范:成为优秀UI设计师,必须了解的UI设计规范

      • 发布时间:
        2019-06-04
      • 版权所有:
        云和教育
      • 分享:

      没有规矩,不成方圆。UI设计也不例外,同样具有设计规范。系统建议的规范可以让我们设计具有统一性,界面视觉更美观。想要高效顺畅地完成设计任务,就必须遵守UI设计的规范。

      在前面的教程中,我们给大家讲解了图标设计规范,今天,我们再和大家分享一下,在UI设计中要遵守的标注规范。

      配图1 成为优秀UI设计师,必须了解的UI设计规范.jpg

      如何把标注的思路整理清晰——利用结构化思维进行拆解,将大问题拆解成小问题,逐一击破!

      标注主要是以下四种不同属性的内容:尺寸、文字、间距、颜色。

      在进行标注时,首先去除导航栏和标签栏,因为这些控件通用性非常强,需要单独拿出来进行统一标注,这里我们只对内容区来进行标注示例。

      配图2 成为优秀UI设计师,必须了解的UI设计规范.jpg

      1、尺寸

      我们要将页面上有所需要告知尺寸的内容进行标注,例如图标、图片、头像等等。关于尺寸维度的标注我们需要注意的是:

      有圆角的地方,需要将圆角半径标出。

      对于一些控件,如button、列表,一定要随时问自己有没有特殊状态,如按压状态、无效状态、选中状态等等,如果你不标明,开会就会默认没有这些效果。

      一般情况下,图片的尺寸是需要告诉比例的,而不是固定的大小,这样开发才能更好的适配,常用的图片比例有4:3、16:9等。

      很多没有经验的设计师不理解适配的原理,所以很容易将一些控件给出固定的尺寸大小。正确的标注方法是给出按钮两边的间距,让整个按钮的宽度自适应(当然高度还是要固定的),这样不论遇到哪种分辨率的尺寸,都能够保持相同的视觉效果,扩展性极强。

      配图3 成为优秀UI设计师,必须了解的UI设计规范.jpg

      2、文字

      文字,需要标注文字的大小、字体、颜色、透明度、行高等等,当然也可以和开发进行沟通,对一些内容进行删减。关于文字的标注需要注意的事项:文字有一个很特殊的属性,就在某些场景下,文字是动态的,所以这个时候,就需要将极限情况考虑清楚。

      表面上我们将标题文字的大小、颜色这些内容标注清楚就可以了,但是如果标题文字过多的时候该怎么处理呢?所以必须要给出一个极限情况的规范,比如最多显示多少个字符,字符超过极限值就用打点的方式处理。

      3、间距

      配图4 成为优秀UI设计师,必须了解的UI设计规范.jpg

      有人可能会觉得间距和尺寸有些相似,但其实它们有着很大的不同,我们可以这样理解:尺寸是形容容器的大小,而间距是形容容器之间的距离。间距相对比较简单,只要标注清晰就不会有太大问题。

      4、颜色

      需要标注颜色的内容有分割线颜色、背景色、按钮颜色等等。关于颜色的标注需要注意的事项:切记文字的颜色已经归类到文字属性里面,不用重复标注,思路一定要保持清晰。

      如果产品常用到渐变的话,需要注明渐变的角度以及渐变色的色值。包括产品如果有夜间模式的话,要额外注明日间和夜间模式下各个颜色的对应色值。

      配图5 成为优秀UI设计师,必须了解的UI设计规范.jpg

      标注的作用是给开发工程师提供参考,因此在标注之前需要和开发工程师进行沟通,了解他们的工作方式,标注完成之后宣讲你的注意事项,以更快捷高效的完成工作,并且最大限度的完成视觉高的还原。

      云和数据UI设计课程涵盖平面、网页、手绘、UI、UE、产品交互H5等多种设计,同时重点培养UI与产品交互设计能力,采用讲师全程面授,项目制实战教学,拥有“六位一体”“X+12”双重教学模式、严格科学的管理模式和一体化就业保障服务,让你快乐学习,快速上岗拿高薪!