设计有趣的地方在于它的通用性,不论是音乐、建筑还是工业,设计的规范大同小异。今天山东新华电脑学院为大家带来的这些规范,可是成为优秀UI设计师必须知道的“纯干货”,还能让大家深刻了解UI设计规范的本质是什么,怎么样?有兴趣地朋友快来看看吧!
山东新华电脑学院分享UI设计规范
★图标规范
很多设计师以为UI设计就是设计图标。虽然事实并非如此,但图标的设计在整个UI设计中是比较基础的一个环节。
图标与品牌标志一样,在设计时都需要做适当的减法,应该尽量用简约的线条去表达其含义,应该尽量避免出现线条结构过于复杂的设计,而且整体的图标都需要保持风格一致,例如图标的线条粗细、边角弧度、图标高度宽度比例、风格等等。
像素对齐:需要严格的做到像素对齐,尤其是在做较小尺寸的图标时,如果不严格的遵循像素对齐,那终的显示效果就会出现问题。
多用布尔运算:在做图标的时候,能用基本图形进行布尔运算的时候,尽量不要使用钢笔
独特的风格:在做系列图标的时候,一定要在前期给图标设定一个风格及原则,使之看起来与众不同。
视觉大小统一:在进行图标设计的时候,我们会使用栅格辅助线来帮助我们更加严格谨慎,但一定不要被辅助线困住,学会灵活运用,保持视觉上的大小统一。
★标注规范
如何把标注的思路整理清晰——结构化思维进行拆解,将大问题拆解成小问题,逐一击破!
标注主要是以下四种不同属性的内容:尺寸、文字、间距、颜色。
在进行标注时,首先去除导航栏和标签栏,因为这些控件通用性非常强,需要单独拿出来进行统一标注,这里我们只对内容区来进行标注示例。
★命名规范
很多UI设计师对于“命名”是没什么概念的,他们都是随随便便地用一些没有特定意思的字母去给页面命名,这是不好的。因为统一的、规范的命名对我们自己的文件整理有很大的帮助,后期修改文件、图层的时候更加方便快捷,而且规范的命名也显得我们自身比较专业。而且,如果如果命名不统一,团队之间的成员很难达成共识,任务交接时需要很大的学习成本。
而更重要的是,有规范的命名可以极大的节省程序开发的时间成本,减少很多不必要的沟通与重复切图的概率,程序员完全可以直接使用的我们切片而不更改切片的名称,后期我们更换切图,只要切片名称不变,开发看都不用看直接替换就可以了。
★交互规范
以下几点交互常识:
简化操作:能一步完成的交互就不要分两步。
用户习惯:大部分用户都有固化思维,我们作为设计师应该尊重数据,尊重用户选择。
减少干扰:减少界面元素的不确定因素,方便用户快速找到自己想要的。
快速响应:加快用户读取的响应速度,能够避免从远程取数据的,就尽量避免。
界面友好:除了根据需求提供视觉解决方案以外,在设计的过程中适当地加入一些小细节使交互界面更加友好是设计师的职责所在。
★图片处理规范
图片统一性
1)图片色调色温需统一,例如一个婴儿产品的首页,整体需要搭配暖色调的图片,这样看上去整体才比较统一舒服。
#p#分页标题#e#
2)图片比例需统一,例如一个卖货的产品详情页,在同一屏的栏目中(页面)所出现的产品或者人物,比例就需要有一个统一的大小比例,这样看上去才比较统一舒服。
图片细节处理
1)图片精度不够(这里所说的精度不是说DPI分辨率需要300哦,那是做高精度印刷输出时才需要的,而在电脑及手机上的图片DPI分辨率为72即可,另外输出图片时需适当压缩一下图片的大小)、杂色太多可以使用PS内置的CR滤镜处理。
2)图片尺寸建议统一为偶数值,方便前端技术人员开发。
3)图片边缘避免与白色背景融合,可以在边缘位置加色。
4)为了配合标题字体,图片可以局部调亮或调暗。
★动效规范
无论是现在经常看到的企业/品牌H5宣传页面、移动端启动页,还是曾经红极一时的首页动画,都需要用到动效效果。会做点动效会给我们加分不少,尤其是做一些加载动画,这是我们经常会遇到的需求。
做动效时,我们需要注意以下几点:
1)不论你的动画有多好看、多吸引眼球,如果成本太高或者过于复杂都是无法落地的,所以我们要遵循简单实用的原则来进行设计,千万不要过度设计。
2)任何交互动作所导致的状态都需要考虑正常状态与异常状态。拿加载动画来说,我们需要考虑加载成功的反馈与加载失败的反馈,并将之注明在输出规范中。
3)动效使用的工具:可以PS做一些动态表情,用AE做一些加载动画,页面之间的交互动效可以使用Flinto、Principle等。
看了山东新华电脑学校的分享,相信你对UI设计有了一定的了解了吧!那么想成为优秀的UI设计师吗?快来山东新华电脑学校报名学习吧!