界面图标设计

来源:优漫教育 发布人:UMAN 时间:2023-11-15 11:18:04

  图标设计的基本原则包括:辨识度高、风格统一、视觉美观、图标的辨识度高,表意准确,能让用户一眼就明白图标的含义;图标的风格统一,使整个界面具有很好的整体感;图标的视觉美观,能提高用户的关注度,使用户获得良好的体验感。


界面图标设计



  为了提高图标的辨识度,图标设计不能过于个性化,让用户难以理解。通常做设计之前,会参考同行业成熟产品的共性和特性。图标的风格统一从图标的尺寸、线面类型、色彩、圆角大小、透明度、倾斜角度、投影、渐变样式、风格等方面着手。

  图标设计步骤

  制作一个好图标,既要考虑图标的辨识度、美观性和统一度,也要考虑图标应用界面的文化、未来显示的载体以及不同产品的特殊要求等。

  图标设计过程大致分为三个步骤:借鉴线上产品尺寸,确定图标的尺寸大小,如Tab栏图标大小48px×48px,首页图标大小56px×56px,金刚区图标大小90px×90px;利用现实图库提炼实物图的共性形状,参考借鉴成熟的图标库。

  在设计制作完成图标后,还得做任务测试,进行设计细节自查,如设计的统一度、呼吸感、色彩情绪、业务联系是否符合要求;开展辨识度测试,遮住图标文字描述字段,做基于无背景的和有背景的图标可识别测试,看用户能否理解图标的含义。

  金刚区图标设计

  金刚区是APP首页的主图标区,位于页面中上部,Banner栏下面,其内容往往随公司活动需要随时灵活调整。因此,金刚区图标具有需求层次高、色彩丰富、以面性图标为主的特点。

  在设计之初,确定金刚区图标尺寸等基础规范:多借鉴成功产品的布局及尺寸,大多数产品金刚区图标尺寸为90px左右;设计图标良好的呼吸感,设计图标内部的呼吸感满足黄金分割比,图标和文字距离统一,图标四周距离统一为图文距离的倍数。

  在绘制图标形状前,还需进行造型再设计,主要考虑保证造型表意的准确性及造型的简洁性。颜色方面,金刚区图标色彩丰富,图标的配色主要考虑色彩情绪对图标辨识度的影响。

  配色过程通常为:确定主题色,选取主题色的邻近色和对比色,结合图标的功能表达及色彩情绪,从主题色及其邻近色和对比色中选取合适的色彩。在配色中注意控制各色相的饱和度和明度在统一比例,以保证各图标色调的和谐统一。

  Tab栏图标设计

  相对于金刚区图标的设计,Tab栏图标在外形设计和样式设计上要简单很多。Tab栏图标设计尺寸通常为48px。Tab栏图标设计根据用户群体及APP主题表达确定图标风格。

  总的来说,好的设计既要好看又要好用。图标布局以业务、功能和需求为出发点,安排重要功能图标靠前放置,引导用户使用相关功能;有良好的预见性,利用有效的图标辨识度完美展示其功能内容,利用色彩情绪唤起用户正确的情绪。

  广州UI设计培训训练营开始预约啦,全程级讲师亲授,为你解析UI行业发展趋势,就业前景,助你了解设计,轻松入门,快人一步成为设计师!现在点击聊天框报名还有免费试听课程领取,优先报名!先下手为强吧!
相关推荐
  • 【UI培训】:关于UI设计新手常遇到的问题及解决方法

    UI设计新手常遇到的问题有哪些?比如,请问UI设计师每天的工作内容是什么样的?除了做图还要干什么?还需要哪些技能?个人职业规划通常什么样?做图只是视觉设计师最基础的工作,除了视觉执行,还需要向上接入PD了解产品需求、在设计中验证交互流程,向下跟进程序开发、数据收…
    行业资讯
    发布时间:2022/03/24 查看详情
  • 室内设计应体现文化元素的六大重要思维

    无论是首都北京的故宫,还是西藏的布达拉宫,其精巧的室内装潢和环境艺术,都有谁能说出这并非出自顶级的专业室内设计师和艺术大师之手,中国传统室内设计文化也正是传统东方文化与古典建筑艺术的精华部分。
    行业资讯
    发布时间:2022/03/24 查看详情
  • UI设计培训中有没有学不会UI的人

    UI设计培训中有没有学不会UI的人?优漫教育小编要说是真的有,就是那些根本不想学的,就像你永远叫不醒一个装睡的人。如果你对ui有强烈的学习兴趣,想在ui行业有所建树,那么不论你是高中毕业、大学毕业,不论你是有计算机基础、零基础,不论你是男生、女生,不论你是20岁、30…
    行业资讯
    发布时间:2022/04/01 查看详情