400-700-1307

UI设计中经常用到的几个设计规范

2019-01-26 17:07

交互规范,图片处理规范,动效规范都是UI设计过程中经常用到的,所以今天兄弟连的小编具体为大家介绍。

以下几点交互规范:

简化操作:能一步完成的交互就不要分两步。

用户习惯:大部分用户都有固化思维,我们作为设计师应该尊重数据,尊重用户选择。

减少干扰:减少界面元素的不确定因素,方便用户快速找到自己想要的。

快速响应:加快用户读取的响应速度,能够避免从远程取数据的,就尽量避免。

界面友好:除了根据需求提供视觉解决方案以外,在设计的过程中适当地加入一些小细节使交互界面更加友好是设计师的职责所在。

图片处理规范

1.图片统一性

1)图片色调色温需统一,例如一个婴儿产品的首页,整体需要搭配暖色调的图片,这样看上去整体才比较统一舒服。

2)图片比例需统一,例如一个卖货的产品详情页,在同一屏的栏目中(页面)所出现的产品或者人物,比例就需要有一个统一的大小比例,这样看上去才比较统一舒服。

2.图片细节处理

1)图片精度不够(这里所说的精度不是说DPI分辨率需要300哦,那是做高精度印刷输出时才需要的,而在电脑及手机上的图片DPI分辨率为72即可,另外输出图片时需适当压缩一下图片的大小)、杂色太多可以使用PS内置的CR滤镜处理。

2)图片尺寸建议统一为偶数值,方便前端技术人员开发。

3)图片边缘避免与白色背景融合,可以在边缘位置加色。

4)为了配合标题字体,图片可以局部调亮或调暗。

动效规范

无论是现在经常看到的企业/品牌H5宣传页面、移动端启动页,还是曾经红极一时的首页动画,都需要用到动效效果。会做点动效会给我们加分不少,尤其是做一些加载动画,这是我们经常会遇到的需求。

做动效时,我们需要注意以下几点:

1)不论你的动画有多好看、多吸引眼球,如果成本太高或者过于复杂都是无法落地的,所以我们要遵循简单实用的原则来进行设计,千万不要过度设计。

2)任何交互动作所导致的状态都需要考虑正常状态与异常状态。拿加载动画来说,我们需要考虑加载成功的反馈与加载失败的反馈,并将之注明在输出规范中。

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

开班信息

当前校区

北京校区
  • 北京校区
  • 上海校区
  • 广州校区
  • 沈阳校区
  • 杭州校区
  • 南京校区
  • 郑州校区
  • 成都校区
  • 深圳校区
  • 西安校区
  • 苏州校区
  • 深圳沙井
  • 深圳观澜
  • 深圳龙岗
  • 武汉校区
  • 西宁校区
  • 石家庄校区
  • 湖北咸宁
  • 广东惠州
  • 广东佛山

                    Copyright © 2007-2019 IT兄弟连教育 版权所有 京ICP备11018177号  京公网安备 11010802026987号