在UI界面设计中必须了解的设计规范

设计营销   2020-10-18

想要系统高效的完成UI设计任务,尤其是数字化产品UI设计,必须了解和掌握一些科学的设计规范,一起探索一下:


A. 图标规范

像品牌标志一样,图标在设计时也要进行适当的减法,应尽量用简洁的线条来表达其含义,应尽量避免出现过于复杂的线条结构设计,而整体的图标也要保持风格的一致性,如图标的线条粗细、边缘弧度、图标宽比例、风格等。

1、象素校准

像素对齐需要严格执行,特别是在制作小尺寸图标时,如果没有严格按照像素对齐,那么最终的显示效果就会有问题。

2、用布尔运算输出
什么是布尔运算呢? 其实非常简单,布尔运算,实际上指的是设计软件中的图形合并工具,它包括组合、拆分、交集、剪切五个函数,这五个函数合称为布尔运算。当制作图标时,可以使用基本图形进行布尔运算,尽量少的使用钢笔,可以使您的图标更规范、更深入地理解图形结构、以后改变形状会更方便、并能有更容易让人接受的风格。
布尔运算

3、特别的风格

当制作系列图标时,在前期一定要为图标设定一个风格和原则,让它看起来与众不同。

值得注意的是,我们在制作线形图标时,必须保证描边粗细一致,圆角一致,如果没有遵循这些基本规则,也谈不上风格的统一,创新。

4、视觉大小统一

当设计图标时,我们会使用栅格辅助线来帮助我们更严谨,但是一定不要被辅助线所束缚,要学会灵活运用,保持视觉尺寸的一致性。

当今APP设计环境中,一些APP设计大师一直强调,设计师要有品牌意识。所以,在图标设计中,还必须强调“品牌性”,简而言之,就是将品牌中的抽象概念转化为具体图形,将品牌的主副色调运用到图标设计中。与此同时建议大家每周完成一件主题作品,提高自己的平面设计能力。


B.标注的规范

怎样整理好标注的思想——结构化思维进行分解,把大问题分解成小问题,一个一个地打碎!

标号的内容主要有四种不同的属性:大小、文本、间距、颜色。

当你做标注的时候,首先要去掉导航栏和标签栏,因为这些控件的通用性很强,需要单独拿出来做统一的标注,这里我们只给出内容区来做标注的例子。

标注的规范

1、尺寸

在网页上,我们会标注一些需要说明尺寸的东西,如图标,图片,头像等。我们需要注意的是关于尺寸尺寸的标注:

如果有圆角,就必须标明圆角半径。

有些控件如button、list等,要随时问自己是否有特殊状态,如按压、无效、选中等,如果不注明,默认情况下不会在会议中显示这些效果。

一般而言,图片的大小是要说明比例的,而不是固定的大小,以便开发可以更好的适应,常用的图片比例有4:3,16:9等等。

许多缺乏经验的设计者不了解适配的原理,因此很容易将一些控件设定成固定大小,如果你把这个按钮的宽度和高度标注出来,开发人员就会把这个按钮的大小写写死,一旦碰到屏幕(白色区域)较宽时,按钮大小还是固定的,都会影响视觉效果。因此,正确的标注方法是给出按钮两侧的空格,让整个按钮的宽度自适应(当然也要固定高度),这样无论遇到什么尺寸的分辨率,都能保持相同的视觉效果,非常具有扩展性。

2、文字

文本,需要标注文本的大小、字体、颜色、透明度、行高等,当然还可以与开发沟通,对一些内容进行删减。对文本进行标注要注意:文本有一个非常特殊的属性,在某些场景中,文本是动态的,因此,此时,需要将极限情况考虑清楚。

从表面上看,我们可以清晰地对标题文本的大小、颜色等内容进行标注,但如果标题文本过多,该如何处理?因此一定要给出一个说明极限情况的说明,例如最多显示多少个字符,字符超出极限值时就会被打点。

3、间距

有的人会觉得间距和尺寸有点类似,但是实际上它们有很大的不同,我们可以这样理解:大小是指容器的大小,而间距是指容器之间的距离。间隔是相当简单的,只要标注清楚就不会有太大的问题。

4、色彩

需标注颜色的内容包括分割线颜色,背景颜色,按钮颜色等。色彩标注要注意:切记文字的颜色已归入文字属性内,不必重复标注,思想上必须保持清晰。

C.交互规范

下面是一些交互常识:

简单化的操作:可以一步完成的交互不分两步。

使用者习惯:大多数使用者都有固定的思维,设计人员要尊重资料及使用者的选择。

降低干扰:降低界面元素的不确定性,方便用户快速找到所需内容。

反应快:用户阅读时,反应快,可以避免。


D.图片处理规范

图像的一致性。

图片的色调色温需要统一,比如婴儿用品的首页,需要整体搭配暖色调的图片,这样整体看起来比较统一舒适。

2)图片比例需要统一,如销售产品的详细页面、产品出现在同一屏幕(页面)的栏目或人物、比例需要有统一的尺寸比例,这样看起来更统一、舒适。

图像细节处理

图片精度不够(这里说的精度不是说DPI分辨率需要300哦,那是做高精度印刷输出时才需要的,而DPI分辨率在电脑和手机上的图片DPI分辨率为72,另外输出图片时还需要对图片进行适当的压缩)、杂色过多可使用PS中内置的CR滤镜处理。

图片尺寸建议统一为偶数形式,便于前端技术人员开发。

图片的边缘避免与白色背景融合,可将颜色添加到边缘位置。

四、为配合标题字体,图片可部分调亮或变暗。


E.动画效果规范

不管是目前常见的企业/品牌H5宣传页,移动端启动页,还是曾经流行的首页动画,都需要使用动效效果。将做点动效会给我们带来不少收获,特别是做一些载入动画,这是我们经常遇到的需求。

在行动中,我们需要注意以下几点:

1、无论你的动画片多么好看,多么吸引眼球,如果成本太高或太复杂都不能落地,所以我们要遵循简单实用的原则来设计,绝不能设计得过头。

2、任何由交互性行为引起的状态都需要考虑到正常状态和异常状态。以装载动画为例,我们需要考虑装载成功的反馈和装载失败的反馈,并在输出说明中加以说明。

3、动态效果使用工具:可以PS做一些动态效果,可以用AE做一些加载动画,页面间的互动效果可以使用Flinto,Principle等等。


F.命名的规范

许多UI设计者对“命名”没有什么概念,他们只是随便用一些没有什么特别意义的字母来命名页面,这是很不好的。由于统一、规范的命名对我们自己整理文件很有帮助,在后期修改文件、图层时更方便快捷,而且规范的命名也显得我们自己更专业。另外,如果命名不统一,团队成员难以达成一致意见,移交任务需要花费大量的学习成本。

而且,规范的命名可以大大节约程序开发的时间成本,减少许多不必要的交流和重复切图的可能性,我们的切片完全可以由程序员直接使用,切片的名字也不会发生变化,后期我们更换切片的名字,只要切片的名字不变,开发看都不看直接替换。

1、全部名称是小写英文字母。

程序设计人员的代码中只有小写英文字母,如果你给的名字全是中文,那他们肯定要改,所以所有的名字都使用小写英文字母是基本规则。有人会觉得写这么多英文太麻烦了,但实际上,为了自己的专业水平的提高,这种规范化的命名是一个必须经历的过程,当你习惯了这样的命名之后,就会有一种成就感。

2、指定格式

大项目可以分成许多模块,每个模块由不同的设计人员独立完成,还可以专门管理公共组件,例如tabbar、navbar等,在这种情况下可以划分为两种类型的切图,一种是一般类型的切图,另一种是针对单个模块的切图。

常规片式命名格式:

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

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

特定的模块切图命名规则:

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

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

@2x.png代表切图的大小,分@1、@2、@3,一倍图、二倍图和三倍图,原则是,清晰地表述切片的具体内容,而不重复名称。(注意在名称中不得包含空格)



维好维可-用户体验体验创新设计

联系我们:

关注我们微信

关注我们,一起探索美好

+86-21-51115850
©2010-2021 维好维可 | 用户体验创新设计咨询公司-版权所有
沪ICP备19006116号-1

Hi,  认识一下
请留下需求和联系方式

合作咨询
+86-21-51115850
© 2010-2020  维好维可 | 用户体验创新设计咨询公司
沪ICP备19006116号-1
维好维可-微信二维码