淘宝天猫VIP

阿里国内站VIP

阿里国际站VIP

京东平台VIP

疯狂插件VIP

全站通VIP

当前位置: 首页 设计师后期类教程分享 图片设计教程

设计师必知|学习UI图标设计要掌握哪些要点?

收藏 邀请

图标是UI页面中最关键的部分之一。它是一种视觉语言,代表信息、内容并揭示功能背后的含义。对于新人来说也是最容易上手的,阐述图标的那些事。

图标的设计需要表意明确,并具有适合的隐喻特征。首先,要根据对象确定图标的整体风格并进行概念草图绘制;其次,在草图的基础上给图标上色,设计图标适合的角度和透视;再对图标进行细节调整,以表现图标的质感;最后,根据一个图标样式发散进行成套图标设计,使界面内的图标形成统一的风格。


形态

移动应用界面图标的形态既丰富又具有概括性。形态是定义图标的大致轮廓和基本样式。为了使用户更容易理解和接受图标,设计形态时要根据对象特征进行一定的隐喻,使图标形态贴近用户的认知范围。因此,图标的形态要尽量简洁易懂,避免过度使用象征性的隐喻符号,用简单的图形作为整体象征性的代表。


色彩

色彩是图标设计的一个重要属性,要处理好图标的主要颜色与次要颜色之间的关系,它在很大程度上决定了图标的最终视觉效果。不同的颜色蕴含着不同的情感意义,因此设计师在设计手机界面图标时要基于应用的功能同时遵循用户的心理模型,以选择合适的色彩搭配。


例如:日历、通讯录这类代表客观事物的应用图标多采用绿色、灰色和蓝色,而一些游戏类图标则采用给人带来愉快心理暗示的暖色系配色。此外,成套图标的色彩在注意区分界面背景色的基础上还需统一在同类色系的视觉环境中,以保持界面视觉的稳定性。


光影

用户在实际生活中看到的物品在受到自然光线和物理光线的影响下会呈现立体的形态,因此要使一个图标变得立体就需要添加光影的效果。设计师首先要将图标想象成一个圆形的球体,通过定义图标的素描关系(即光线的方向)将图标分为白、灰、黑、影子、反光5个部分。


白是距离光线最近的部分,是图标最亮的模块;灰是白与黑的缓冲区域,起到柔和过渡的作用;黑是图标中颜色最重的部分,一般称为明暗交界线,也是呈现图标体积感的关键;影子是由于光线不能穿透物体而形成的物体的投影,它能使图标更加真实;反光在实际生活中是受到周边环境影响的反射光线,因此它能使图标看起来更加真实和立体。


随着对图标质感细腻程度的追求,图标的光影层级也会变得越来越丰富。此外,设计师还需注意成套图标中光影效果尤其是角度的一致性。


材质

从视觉传达的角度来看,手机界面图标所体现的材质感是指其模拟真实物体所呈现的丰富视觉效果。各种不同的质感为图标设计的主题表现提供了更多可能的形式,同时也提高了图标的可视性。例如:针对一些科技软件的图标,会采用金属拉丝的质感效果;针对卡通游戏类软件的图标,会用水晶质感效果。


布局

手机界面内空间的布局除了影响到整体界面的视觉效果之外,更重要的是能否让用户准确快速地进行识别和操作整体界面。这要求桌面背景和主要图标的集合以某种特定的主题方式加以展现,这种展现不仅涉及界面空间中图标的视觉,也涉及图标与图标、图标与背景之间的联系方式。因此,单个图标的大小与其他图标之间的比例关系以及整体图标排列的布局都是设计图标时应该考虑到的问题。


界面图标设计要点

①易识别。图标内容需表达简洁、清晰,避免过多元素堆积。设计时应首先考虑怎样使图标传递更多的信息而不会增加用户的视觉和理解负担。其次,图标在界面中的分组与排列也很重要,相似功能的图标尽量排列在一起。


②统一性。保持图标中元素表达的一致性和连续性。一致的外观与感觉可以在软件界面中创造一种和谐。如果界面图标缺乏一致性则很可能引起混淆,并使界面看起来没有条理。由于图标的功能各异,所用的图形必定不同,在同一软件界面里面的图标可以添加共同元素来统一风格。


在设计图标时,应考虑到用户已有的习惯和接受能力,最好调查一下其他同类软件的图标情况,以了解已经创建了什么样的用户使用习惯。


③根据目标用户群确定图标的风格。设计图标前一定要考虑清楚使用该应用的目标用户特点,不同的用户群具备不同的认知特点和审美情趣。


④构筑合理的隐喻。设计师在构建图形隐喻时,需要认真考虑所指代的对象以及用户解码后可能产生的各种理解、图标的使用情景、与其他图标之间的关系,从而寻找合适的喻体。


⑤设计的规范。图标中图形的设计要尽量饱满,充分利用图标的有限空间。设计师要按照不同系统平台设计规范中规定的图标尺寸大小进行设计。

以上就是今天的所有内容,关注疯狂的美工官网,每天分享不同的设计技巧!


路过

雷人

握手

鲜花

鸡蛋

阅读排行榜

关注官方微信

开放QQ群

美工5群:1061710658

美工3群:199**044(满

极限词群:951970623

平台简介

十年疯狂 初心不变:从2013年至今我们一直在研究和探索电商设计师所面临的难题最佳解决方案,我们致力打造一款更好用,更实用电商设计师辅助工具,疯狂十年只为做好一件事,以开放共享共赢的心态,更好的服务于广大电商设计师。
by:疯狂的美工电商设计师学习交流平台

手机版- 疯狂的美工 |网站地图

赣公网安备 36070202000375号

ICP证(电信增值许可证):赣B2-20220105 本站支持IPv6访问

Powered by Fkdmg.Com © 2013-2024    赣ICP备18006944号-1