开通学校主页 全国免费电话:400-619-8866  学校大全 - 职教学校动态
400-619-8866 工作日:8:00-21:30
周六日:8:00-21:30
站内消息 退出登录 我的店铺 网站首页
石家庄电脑学校
店龄7年109天总访问量31194、今天1、昨天1、前天1
干货|如何设计出优秀的UI界面图标?
发布时间:2019-03-13 11:30点击率:32我要分享

在图形交互界面(GUI)中,图标(icon)是一种最常使用的设计元素之一。图标设计,即icon设计在界面设计中占有很重要的位置,一个好的图标,可以让用户“一秒即懂”,那么如何设计出优秀的图标?石家庄电脑学校为你分享以下这些内容,相信会给你答案!






石家庄电脑学校为你分享优秀图标设计


1、易识别


清晰度是优秀界面的最重要特征,但不幸的是,图标往往不够清晰。


图标必须第一时间传达最重要的信息。当图标不能够立刻表达出所代表含义时,它就会变成一种“视觉噪音”,失去了图标存在的意义。


优秀的图标即不用阅读标签或文字提示,就可以被认知理解。


几个简单的规则,可以帮助你避免使用不能传达其含义的图标。


——尝试使用用户熟悉的icon

用户对于图标的理解,一般基于其使用与认知的经验。这就是为何使用用户熟悉的图标效果会比使用独特的图标要好。依靠通用型图标。就像屋子、打印、玩游戏和搜寻等等这些,不需要进行任何解释的图标。(通俗易懂的图标)


调查研究,检查你的竞争对手所用的图标。

——不要使用有歧义的icon

应该避免使用有多重含义的图标。举例来说,“心形”图标和“星星”图标都可以作为【喜欢】或将内容【收藏】起来。当一起使用时很可能造成用户干扰。(心形和星星图标有歧义)

——测试icon的含义表达

不要听从一些类似“人们每天都用我们的产品(APP),他们肯定能理解图标的意思”的话。


请测试你的图标!


5秒钟原则】是一种测试图标的有效方法。问问用户他们希望这个图标代表什么?如果需要花费5秒钟以上去思考这个图标,那么这个图标就不可能有效地传达其意义。

——测试icon的可拓展性

测试你的icon在类似15x15px的尺寸下是否依旧清晰。



(音乐图标缩放清晰)

——给陌生的icon附上标签文字

如果你还是想要使用特殊的图标,可以考虑在旁边给图标附上文字标签。(图标+文字)

——不要重新定义icon的含义

通过更改图标的含义来混淆用户相当容易。当图标的功能与预期认知不同时,会造成用户混淆。不要重新发明轮子!


即使意义上的细小区别,也会妨碍到用户理解图标的能力。


很长一段时间,Google Docs使用的图标看起来就像一个汉堡包。大多数界面使用类似的图标来表示主导航菜单,但Google重新定义了它的含义并将其用作“后退/返回”操作。当用户点击此图标时,他们会被重新引导到Google文档主页。


2、视觉舒适


可以通过插画、颜色以及图标传达品牌个性。如果做得好,图标肯定可以增强设计的美感。

KISS原则适用于所有UI元素,包括图标icons。保持图标的简洁性,并且遵循以下两条原则,避免没必要的复杂性:


限制颜色使用数量,使用不超过34种颜色,保持设计简洁。


通过聚焦于对象的基本特征,来减少图形设计细节的数量。尽量保持设计的概要性 ,因为设计概要性的在不同的界面和分辨率都可以进行转换。(请勿过于花俏,避免设计的图标上包含太多的视觉细节)

——通过添加动画效果创造愉悦体验

动画效果可以表达清晰功能的目的,并且可以创造用户愉悦体验。对于形态改变的情况,使用动画效果可以创造更好的动态体验。


3、合适尺寸


图标应该很好地作为用户的目标点。


设计师常见的错误之一,是在手机上为图标留下太小的空间。当你为触摸进行设计时,确保图标能够足够大方便手指的点击。参考:目标在屏幕中点击范围为7-10mm。并且,请确保在目标对象之间添加填充,以防止不准确的点击。(实际目标尺寸=视觉目标尺寸+填充 图片:Microsoft

4、一致性


一致性是设计中的关键原则。一致性设计是一种直观设计。


当使用相似的元素且具有一致的外观和功能时,可以让可用性和可学习性都得到提升改善。

——内部一致性

图标设计应该保持视觉统一,你决定用于你的产品的图标,应该保持统一样式。


理想情况下,它们看起来应该是一位设计师设计的。以下是你需要遵循的关于创造统一性的几条原则:使用相同颜色或者颜色组合在你的图标上使用相同的形状和其他样式属性(例如边框的大小)


——与平台保持一致

确保你的目标风格与平台一致,它们会让用户更容易去理解。(苹果iOSGoogle 安卓图标)

——与产品系列保持一致

如果你拥有整个产品系列,确保一致的图标风格(或至少类似)应用在你所有的产品中。

总结:通常来说,为你的项目寻找一个合适的图标并不容易。这就是为什么我分享这个资源列表来让这个任务变得简单。我会定期更新列表,以便你可以找到更有用的资源。


石家庄电脑学校网络传媒高级工程师专业(UI界面设计


网络传媒高级工程师专业前景:目前,中国有6.7亿网民、413万多家网站,越来越多的政府和企业更加注重使用网络技术运营和管理,网络技术得到了前所未有的发展。与此同时,网络的建设、维护与更新,需要大量的实用型网络技术人才,特别是高层次的网络管理员、网络架构工程师、网络开发运营工程师、企业信息管理师等相关人才,需求尤为迫切。


课程内容:

第一阶段 基础课程:桌面支持与系统管理,Office2010办公自动化,三大构成

电子商务基础,设计素描,图文混排、版式设计综合应用;

第二阶段 专业课程:三大设计,CorelDRAW矢量绘图,Illustrator图形设计,Photoshop图像处理,平面设计典型实例,职业素质课;

第三阶段 实训课程:网页图像制作(FM),Dreamweaver网页布局,Javascript脚本特效设计,DIV+CSS布局技术,ASP&Access网站后台技术,UI界面设计;

第四阶段 强化课程:网络应用技术基础,网络安全基础,网络设备与网络设计,网络综合布线,公司型网络搭建项目


看完了石家庄电脑学校为大家分享的干货,你都记下来了吗?想不想学习更多UI界面设计干货呢?那就持续关注我们吧!

回到顶部