找课堂合作机构>>
北京UI设计培训学校
欢迎您!

18500961172

全国统一培训热线 8:30-20:00
初学UI需掌握的UI设计规范知识

北京UI设计培训学校现有专兼职员工近百人,其中硕士及博士研究生有18 名。师资团队主要来自行业内的专家,他们不仅有高深的理论知识还有丰富的实战经验。课程设置主要以理论结合实践,偏重

课程导航
UI设计师
更多

初学UI需掌握的UI设计规范知识

初学UI需掌握的UI设计规范知识
来源:北京UI设计培训学校

2020-11-20 12:47|阅读:3012

进入 >

  UI设计就业前景好,每年都有很多人想要学习,但是很多新手需要可能不太清楚,U设计具有一定的设计规范,想要高效顺畅地完成设计任务,就必须遵守UI设计的规范,那么初学UI需掌握的UI设计规范知识有哪些呢?本文为大家做详细的内容介绍。


UI设计规范知识


  初学UI需掌握的UI设计规范知识:


  图标规范

  有一些设计师以为UI设计就是设计图标,虽然事实并非如此,比如图标的设计在整个UI设计中是比较基础的一个环节。

  图标与品牌标志一样,在设计时都需要做适当的减法,应该尽量用简约的线条去表达其含义,应该尽量避免出现线条结构过于复杂的设计。

  而且整体的图标都需要保持风格一致,例如图标的线条粗细、边角弧度、图标高度宽度比例、风格等等。

  特别是对于新人,很多都不知道什么是UI设计规范,下面就一起来先看看图标设计的规范吧:


  像素对齐

  需要严格的做到像素对齐,尤其是在做较小尺寸的图标时,如果不严格的遵循像素对齐,那最终的显示效果就会出现问题。


  多用布尔运算

  在做图标的时候,能用基本图形进行布尔运算的时候,尽量不要使用钢笔,这样做的好处有如下几点:

  让你的图标更加规范

  对图形结构理解更加深刻

  后期更改形状更加方便


  独特的风格

  在做系列图标的时候,一定要在前期给图标设定一个风格及原则,使之看起来与众不同。

  在这里值得一提就是,我们在做线性图标时,一定要描边粗细相同、圆角相同,如果这些基础的规则都没有遵循,那也就谈不上风格的统一、创新了。


  视觉大小统一

  在进行图标设计的时候,我们会使用栅格辅助线来帮助我们更加严格谨慎,但一定不要被辅助线困住,学会灵活运用,保持视觉上的大小统一。

  在如今的APP设计环境当中,一些APP设计大牛都一直强调,设计师要有品牌意识。

  那么,在图标的设计中,我们也必须强调“品牌性”,简单的说就是把品牌中的抽象的概念变成具象化的图形,把品牌主副色调应用到图标设计中。

  同时建议大家每个星期完成一个主题的作品,提升自己的平面设计能力。

  标注规范

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

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

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


  尺寸

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

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

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

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

  很多没有经验的设计师不理解适配的原理,所以很容易将一些控件给出固定的尺寸大小,如果你将这个按钮的宽度和高度都标注出来。

  开发就会将这个按钮的大小写死,一旦遇到屏幕(白色区域)较宽的时候,按钮还是固定大小,就会影响视觉效果。

  所以正确的标注方法是给出按钮两边的间距,让整个按钮的宽度自适应(当然高度还是要固定的),这样不论遇到哪种分辨率的尺寸,都能够保持相同的视觉效果,扩展性极强。


  文字

  文字,需要标注文字的大小、字体、颜色、透明度、行高等等,当然也可以和开发进行沟通,对一些内容进行删减。

  关于文字的标注需要注意的事项:文字有一个很特殊的属性,就在某些场景下,文字是动态的,所以这个时候,就需要将极限情况考虑清楚。

  表面上我们将标题文字的大小、颜色这些内容标注清楚就可以了,但是如果标题文字过多的时候该怎么处理呢?

  所以必须要给出一个极限情况的规范,比如最多显示多少个字符,字符超过极限值就用打点的方式处理。


  间距

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


  颜色

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


  命名规范

  很多UI设计师对于“命名”是没什么概念的,他们都是随随便便地用一些没有特定意思的字母去给页面命名,这是不好的。

  因为统一的、规范的命名对我们自己的文件整理有很大的帮助,后期修改文件、图层的时候更加方便快捷,而且规范的命名也显得我们自身比较专业。

  而且,如果如果命名不统一,团队之间的成员很难达成共识,任务交接时需要很大的学习成本。

  而更重要的是,有规范的命名可以极大的节省程序开发的时间成本,减少很多不必要的沟通与重复切图的概率。

  程序员完全可以直接使用的我们切片而不更改切片的名称,后期我们更换切图,只要切片名称不变,开发看都不用看直接替换就可以了。


  所有命名全部为小写英文字母

  在程序员的代码里只有小写的英文字母,如果你给出的命名全是中文的,那么他们是一定会更改的,所以命名全部用小写的英文字母是最基本的规则。

  有些人会觉得写这么多英文太麻烦,但其实为了自己专业能力的提高,这种规范的命名方式是必须要经历的过程,当你习惯了这样的命名方式后,你的成就感会油然而生。


  命名格式

  一个大型项目会分很多模块,每个模块由不同的设计师来独立完成,还有人会专门管理公共的组件,如tabbar、navbar等等,这种情况下就会分为两种切图,一种是通用类型的切图,还有一种就是各个模块特有的切图。


  通用切片命名格式:

  组件_类别_功能_状态2x.png

  举例:tabbar_icon_home_default 2x.png(对应中文:标签栏_图标_主页_默认2x.png)

  模块特有切图命名规则:

  模块_类别_功能_状态2x.png

  举例:mail_icon_search_pressed 2x.png(对应的中文为:邮件_图标_搜索_默认2x.png)

  我们的原则就是清晰的表达出切片的具体内容并且没有重复的名称。(要注意,命名中不能含有空格)


UI设计规范知识


  常用英文单词

  如果所有命名都写为全称,名字就会特别长,所以我们可以将一些常用的英文单词进行缩写,减少工作成本与开发代码资源。

  至于怎么缩写,只要整个团队能够达成共识并且输出一份缩写清单,任何缩写规则都是可以的。


  以上就是小编为大家找来的初学UI需掌握的UI设计规范知识的具体内容介绍,有想要学习UI设计的学员可以来做个相关的学习了解,希望对大家的备考有一定的帮助,想要了解更多UI设计相关的知识可以继续关注小编为大家带来的后续文章更新。


相关标签: UI设计规范知识
分享到:
0

声明:该作品系网友上传发布。找课堂仅提供信息发布平台,如若内容有误或侵权请联系删除,我们将按照规定及时处理。

北京UI设计培训学校
企业认证
营业执照
服务保障
诚信认证
地址认证