快捷搜索:  汽车  科技

ui设计师应该掌握的基本技能(这些设计规范你了解了吗)

ui设计师应该掌握的基本技能(这些设计规范你了解了吗)用熟悉的隐喻为用户的任务提供直接而直观的界面。帮助用户认知而不是记忆。用户记起与一个熟悉的事物相关联的意义要比他们记起一个特定命令的名称要容易得多。有良好的直觉特征UI设计有一个总体的原则,就是设计让用户使用起来觉得舒适的产品,而非让用户去被迫适应产品。清楚一致的设计允许用户将已有的知识传递到新的产品中,让他们更快地学习新事物,不必花时间来尝试记住交互中的不同。

大家都知道,UI设计师作为互联网企业中的设计岗位,从来不是“自由”的艺术家,我们的设计要为产品服务,遵循许多设计规范。

今天带来的这些规范,就是成为优秀UI设计师必须知道的“纯干货”~一起来看看吧。

1

//总体规范

UI设计有一个总体的原则,就是设计让用户使用起来觉得舒适的产品,而非让用户去被迫适应产品。

清楚一致的设计

允许用户将已有的知识传递到新的产品中,让他们更快地学习新事物,不必花时间来尝试记住交互中的不同。

有良好的直觉特征

用熟悉的隐喻为用户的任务提供直接而直观的界面。帮助用户认知而不是记忆。用户记起与一个熟悉的事物相关联的意义要比他们记起一个特定命令的名称要容易得多。

ui设计师应该掌握的基本技能(这些设计规范你了解了吗)(1)

同常见软件保持一致性。与用户以前用过的其它成功软保持一致的动作,体验感会更好。

较快的响应速度

保持界面能很快对用户操作作出反应。特别对于有大量录入项的界面,能让用户不使用鼠标即可完成快速数据录入。

简单且美观

界面应该很简单(不是过分单纯化)、易于学习、并且易于使用。在界面中,扩大功能和保持简单是相互矛盾的。一个有效的设计应该平衡这些目标。美观可视设计是应用程序界面的重要部分。

2

//图标规范

在界面图标设计中最常用尺寸有:12×12、16×16、24×24、32×32、48×48等,这里的建议是以48px作为常规图标的设计尺寸,因为iOS界面中的网格大小是4的倍数,苹果规范要求最小点击面积为44pt;安卓的网格是8的倍数,最小操作热区为48dp。

另外,@2x下作图要保证是4的倍数,这样可以整除2,适配@1x的屏幕;@3x下作图就需要是12的倍数了,这个数值可以整除2、3、4,适配@1x和@2x的屏幕。

关于尺寸的标准这里不赘述,还有一些通用标准,也是我们必须知道的。

1 像素对齐

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

ui设计师应该掌握的基本技能(这些设计规范你了解了吗)(2)

2 多用布尔运算

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

  • 让你的图标更加规范
  • 对图形结构理解更加深刻
  • 后期更改形状更加方便

3 独特的风格

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

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

4 视觉大小统一

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

3

//标注规范

标注其实是不管什么产品什么项目都会被要求规范的,作为UI设计师标注的时候要方便前端程序员使用,这里可以分为四个属性。

1 尺寸

页面上所有需要明确尺寸的内容都需要标注,特别是图标、图片、头像等。

这里需要注意这几点:

  • 圆角半径要注意标出
  • 控件状态变化要标明
  • 图片除了大小还需要注明比例

2 文字

一般情况下,文字的大小、字体、颜色、透明度和行高等等都是需要标注的,但这也可能过于冗长,可以跟前端沟通,对内容进行一定删减。

ui设计师应该掌握的基本技能(这些设计规范你了解了吗)(3)

3 间距

这里我们要区别间距和尺寸,尺寸是大小,而间距是距离,间距没有尺寸那么复杂,只需要标注清晰一般就不会有什么问题。

4 颜色

颜色包括分割线颜色、背景色、按钮颜色等等,文字的颜色无需标注。

4

//命名规范

命名经常被许多UI设计师忽略,随手用简单的词汇命名或者用几个随机字母代替,这样不仅会影响自己的工作效率,在与团队成员交接时也会浪费其他人的时间。

如果命名规范,后期程序员切片根本不需要更改名称,如果需要更换切图,规范的名称也会便捷很多。

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

这里要跟随程序员的习惯,用英文命名,这是一条最基本的规则。

ui设计师应该掌握的基本技能(这些设计规范你了解了吗)(4)

2 命名格式

命名格式的原则其实只有一点,那就是表达出切片的内容,且不会重复,这里有格式可以进行参考:

通用切片命名格式:

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

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

3 使用常用英文单词

命名时使用常用的英文单词进行命名,如果觉得冗长,可以进行一些简要的缩写。

比如“bg”就是“background”,“tab”就是“tabbar”。

5

//图片处理

1 统一性

图片的比例、色温色调必须统一,整体看上去才会更加舒适。

2 细节处理

图片的精度需要进行处理,尺寸尽可能为偶数值,边缘不要与背景融合。

猜您喜欢: