随笔 - 21,  文章 - 0,  评论 - 14

图标:

具有指代意义的图形符号,图形化的标志,有特殊指向或特殊意义
UI设计的职责中包括图标设计

UI设计:

User Interface(用户界面)也叫用户界面设计,是指对软件人机交互、操作逻辑、界面美观的整体设计。
让软件变得个性有品位,让软件操作变得简单,自由,充分体现软件的定位和特点

应用场景:

1、app移动端
2、网页端
3、智能穿戴设备:例智能手表等

UI的实际意义:

UI用于获取信息,调取设备资源、控制设备运作的一个可视化入口界面。

UI图标—ICON

-ICON类别:拟物化图标、微扁平图标、扁平化图标、其他类型图标(MBE风格)
也分为3大类:写实化图标、扁平化图标、另类图标
-推荐icon网站:
www.iconfont.cn(阿里巴巴)

扁平化图标

设计技巧:
  • 极简:用简单的形状,概括出物体的轮廓
  • 圆角:使用大量的圆角,四角平稳过渡,显得美观自然
  • 色彩:色彩鲜亮,通过鲜明的色彩表现物体
  • 特征:摒弃高光,阴影等,写实的效果追求简化、符号化的设计元素

去掉冗余的装饰效果,意思是去掉多余的透视,纹理,渐变等能做出3D效果的元素。让“信息”本身重新作为核心被凸显出来。并且在设计元素上强调抽象、极简、符号化

扁平化图标优缺点:
  • 优点:

    • 简洁大方、美观好看
    • 降低移动设备的硬件需求,延长待机时间
    • 可以更加简单直接的将信息和事物的工作方式展示出来,减少认知障碍的产生。
  • 缺点:

    • 传达的感情不丰富

写实图标

如实地描绘事物,或照物体写实描绘,利用渐变、高光、透明度、阴影、样式、材质做到与对象基本符合的境界

设计技巧:
  • 真实:通过各种效果吧原有的样式展示出来
  • 光影:叠加、高光、纹理、阴影、材质
  • 细节:细节丰富,通过大量细节表现物体
  • 特征:追求模拟现实事物的造型和质感
写实图标的优点和不足
  • 优点:

    • 表现力十足,有较强的视觉冲击
  • 缺点:

    • 占内存过多,实际应用卡顿
    • 制作周期长,制作缓慢
    • 实际应用图标尺寸较小,细节不明显

另类图标(MBE):

MBE最早是一位法国设计师发表了一些Q版的图标,由于其简洁可爱,识别度高,受到众多设计爱好者的追捧与模仿,这种风格也随之火了起来,被命名MBE风格

设计技巧
  • 断点:利用断点在密集的线条交汇处做断开效果,破除了画面的压抑感,让整体看起来更加透气
  • 溢出:利用色块的错位,可以给画面营造质感,增加对风格的映像
另类图标的优点和不足
  • 优点:

    • 风格可爱,有艺术性
  • 缺点:

    • 风格不够高级,不能适用所有行业,不够大众化

图标网站:阿里巴巴矢量图标库(有不同风格的小图标)

扁平的风格是当下最流行的风格,简单大方,大众化,节约内存,制作简单
写实图标虽然现在不流行了,但是不能否认通道价值,写实图标是彰显功底的,学习图标从写实入手

posted on 2020-10-17 22:04  乂千  阅读(34)  评论(0编辑  收藏