火星网校
学习UI图标设计关键点有哪些
发布时间：2024-03-24 18:15:13 浏览量：228次
图标的设计需要表意明确，并具有适合的隐喻特征。首先，要根据对象确定图标的整体风格并进行概念草图绘制；其次，在草图的基础上给图标上色，设计图标适合的角度和透视；再对图标进行细节调整，以表现图标的质感；最后,根据一个图标样式发散进行成套图标设计，使界面内的图标形成统一的风格。
形态
移动应用界面图标的形态既丰富又具有概括性。形态是定义图标的大致轮廓和基本样式。为了使用户更容易理解和接受图标，设计形态时要根据对象特征进行一定的隐喻，使图标形态贴近用户的认知范围。因此，图标的形态要尽量简洁易懂，避免过度使用象征性的隐喻符号，用简单的图形作为整体象征性的代表。
色彩
色彩是图标设计的一个重要属性，要处理好图标的主要颜色与次要颜色之间的关系，它在很大程度上决定了图标的最终视觉效果。不同的颜色蕴含着不同的情感意义，因此设计师在设计手机界面图标时要基于应用的功能同时遵循用户的心理模型，以选择合适的色彩搭配。
例如：日历、通讯录这类代表客观事物的应用图标多采用绿色、灰色和蓝色，而一些游戏类图标则采用给人带来愉快心理暗示的暖色系配色。此外，成套图标的色彩在注意区分界面背景色的基础上还需统一在同类色系的视觉环境中，以保持界面视觉的稳定性。
光影
用户在实际生活中看到的物品在受到自然光线和物理光线的影响下会呈现立体的形态，因此要使一个图标变得立体就需要添加光影的效果。设计师首先要将图标想象成一个圆形的球体，通过定义图标的素描关系(即光线的方向)将图标分为白、灰、黑、影子、反光5个部分。
白是距离光线最近的部分，是图标最亮的模块；灰是白与黑的缓冲区域，起到柔和过渡的作用；黑是图标中颜色最重的部分，一般称为明暗交界线，也是呈现图标体积感的关键；影子是由于光线不能穿透物体而形成的物体的投影，它能使图标更加真实；反光在实际生活中是受到周边环境影响的反射光线，因此它能使图标看起来更加真实和立体。
随着对图标质感细腻程度的追求，图标的光影层级也会变得越来越丰富。此外，设计师还需注意成套图标中光影效果尤其是角度的一致性。
材质
从视觉传达的角度来看，手机界面图标所体现的材质感是指其模拟真实物体所呈现的丰富视觉效果。各种不同的质感为图标设计的主题表现提供了更多可能的形式，同时也提高了图标的可视性。例如：针对一些科技软件的图标，会采用金属拉丝的质感效果；针对卡通游戏类软件的图标，会用水晶质感效果。
布局
手机界面内空间的布局除了影响到整体界面的视觉效果之外，更重要的是能否让用户准确快速地进行识别和操作整体界面。这要求桌面背景和主要图标的集合以某种特定的主题方式加以展现，这种展现不仅涉及界面空间中图标的视觉，也涉及图标与图标、图标与背景之间的联系方式。因此，单个图标的大小与其他图标之间的比例关系以及整体图标排列的布局都是设计图标时应该考虑到的问题。
界面图标设计要点
①易识别。图标内容需表达简洁、清晰，避免过多元素堆积。设计时应首先考虑怎样使图标传递更多的信息而不会增加用户的视觉和理解负担。其次，图标在界面中的分组与排列也很重要，相似功能的图标尽量排列在一起。
②统一性。保持图标中元素表达的一致性和连续性。一致的外观与感觉可以在软件界面中创造一种和谐。如果界面图标缺乏一致性则很可能引起混淆，并使界面看起来没有条理。由于图标的功能各异，所用的图形必定不同，在同一软件界面里面的图标可以添加共同元素来统一风格。
在设计图标时，应考虑到用户已有的习惯和接受能力，最好调查一下其他同类软件的图标情况，以了解已经创建了什么样的用户使用习惯。
③根据目标用户群确定图标的风格。设计图标前一定要考虑清楚使用该应用的目标用户特点，不同的用户群具备不同的认知特点和审美情趣。
④构筑合理的隐喻。设计师在构建图形隐喻时，需要认真考虑所指代的对象以及用户解码后可能产生的各种理解、图标的使用情景、与其他图标之间的关系，从而寻找合适的喻体。
⑤设计的规范。图标中图形的设计要尽量饱满，充分利用图标的有限空间。设计师要按照不同系统平台设计规范中规定的图标尺寸大小进行设计。
热门课程推荐
热门资讯
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
2. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
那么,要学习UI设计就要学习哪些课程呢? 其实,UI设计课程涉及到许多领域,一般分为艺术设计课程、设计辅导课程、图形课程、测试课程、动画示范课程等几...
-
8. Photoshop操作教程：自制电子印章 | PS技巧详解
想要学会制作电子公章吗？跟随本教程，详细介绍Photoshop操作步骤，让您轻松掌握PS技巧，制作精美电子印章。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
学习平面设计要用到哪些软件？随着社会的发展，平面设计在我们日常生活中越来越重要。想了解平面设计软件都有哪些吗？本文为您介绍Photoshop、CorelDRAW、AI和CAD这四款必备的设计软件。
最新文章
