Ui培训之如何设计极简三色图标

小编之前在ui培训课程里面了解到,在ui设计当中,时下图标设计流行的是一种不一样的极简风,这样会更加细腻有趣。配色是设计中永恒的话题,在我看来简易更是设计的精髓。

Banana Bird

在刚刚接受ui培训的时候,一般会从单色,或者双色结构来授课,就如上图的banana bird图标,如此简易,但也明确体现图标所表达的内容。

KZ

然而,许多设计师都认为三种色彩构成的配色是最平衡也是最漂亮的,多一色显得太花,少一色又过于朴素,这也是为什么许多配色方案的构成多为3种色彩。就如小米的包装设计,都是以简单大方为主。如果将这种配色美学运用在最小的UI设计元素上会是什么效果呢?这就是在ui培训当中经常探讨的案例:三色图标设计。

Random Icons by Nick Slater

三种色彩能够让网页拥有奢华的视觉效果,也可以让极简的图标拥有细腻精致的特征,温润致密的质感,最大程度地体现色彩本身的优势。接下来以配色出众而著称的图标设计方案由趣达ui培训推荐参考学习;

WP Café del Museo icons by Israel Ortiz

浅黄色用作背景,红色用作图标设计的主色调,而绿色则同红色搭配在一起,起到了辅助和点缀的作用。作为一个以食物为主题的图标设计,红色非常开胃,绿色醒目而自然,堪称绝配。

素材下载地址:http://pan.baidu.com/s/1bn9bIqF

Four-Pack by Sebastian Abboud

白色勾勒出图标的轮廓,而深沉的褐色和黑色配合起来有着别样的美感,细节丰富而有温度。

Small Business Club Icons by Andrew Ronaldson

这组图标的设计充分运用了圆润的曲线,黑色构成轮廓,红色点亮整个设计,而白色则营造出负空间,设计互补而令人愉悦。

Nationwide Illustrations by Tomomi Sohn

这组图标设计的精彩之处在于蓝色阴影的选取,白色的底色不仅仅用作衬托而且为图标营造出空间感,黑色的细线则用来勾勒轮廓但又不会喧宾夺主。

FREEBIES – 42 Flat iOS Icon Set by HevnGrafix Design

考虑到需要呈现复杂的内容,这组图标设计中的,有的使用的是三种色彩,有的则使用了四种色彩,但是所用色系是非常统一的,主要是橙色、白色和绿色。每个图标都有着平滑的边缘和阴影,简单的设计营造出3D的质感,潜力无限。

Icons by Meg Lewis

这组图标的设计也比较有吸引力,黄黑本是经典配色,运用在这组图标设计中看起来也非常不错,几何轮廓的灵活运用让图标焕发出细腻的质感。

Rockstar Onesie by Alyssa Welch

这组图标的设计也足够专业,黑色的部分勾勒轮廓,白色填充空间,橙色补充细节提亮色彩。

Night Mode Icon Set by Jinglu Li

这个夜间模式图标的设计堪称别出心裁,深蓝色和黄色不仅是色轮上的经典配色,而且在这里黄色还被非常应景地作为提亮色,运用在图标的视觉元素上,极为精彩的设计。

Food Allergens Icons by Tunde Szentes

这组食物相关的图标设计营造出自然的氛围,颜色的选取显然是深思熟虑之后的结果,线条圆润,色彩深浅调节得到位。

结语

三色图标的设计非常有意思,做的好的图标已经不仅仅停留在图标的角色中,许多已经可以在页面中担当更加重要的插画的作用了。三种色彩的搭配让整个ui设计立体了起来,拥有了超越单色的立体结构和精彩效果,赋予页面更加强大的力量。

更多的ui培训文章--移动APP设计国外资源总汇

每天都一点点ui培训,每天多一点点经验。

找在线ui设计培训机构,就找趣达ui培训学院。

原文来自:优设

UI设计

时间: 2024-10-28 21:03:00

Ui培训之如何设计极简三色图标的相关文章

超流行的响应式设计极简教程

网上关于响应式设计的教程好复杂,我写一个简版的. 简单说呢就针对不同的屏幕分辨率应用不同的CSS样式.比如在电脑.Pad设备上,屏幕比较宽,就可以一行放2个Div.到了手机上,或者Pad竖着拿的的时候,一行就只放1个Div. 这里有2个关键点: 一是如何在不修改Dom结构的前提下调整布局. 二是如何判断屏幕分辨率并应用对应的CSS. 以上两点都应该不依赖与JS. 实现第一点依靠的是流式布局.就是所有参与布局的DIV都用float:left,宽度都用百分比表示.比如下图,黄色部分的宽度是60%,橘

移动开发中的极简设计

原文链接: The Art of Minimalism in Mobile App UI Design 原文作者 : Nick Babich 译文出自 : 掘金翻译计划 译者 : edvardhua 校对者 : owenlyn, jiaowoyongqi, Graning 文章结尾有英文原文 设计是一件用户驱动很强的工作.随着用户越来越偏好更简洁的交互界面,如何剔除多余的元素,保留最基础最重要的元素是极简设计的关键.极简设计形式和功能完美结合.它最大的优点是极简的表现形式,简洁的线条,大方的留白

成都UI培训:什么是UI设计?

成都UI培训:UI这个词对于我相信对于好多人来说都还不知道是什么?UI设计则是指对软件的人机交互.操作逻辑.界面美观的整体设计.软件设计可分为两个部分:编码设计与UI设计.编码设计大家都很熟悉,但是 UI设计还是一个很陌生的词,即使一些专门从事网站与多媒体设计的人也不完全理解UI的意思.UI的本意是用户界面,是英文User和 interface的缩写.从字面上看是用户与界面2个组成部分,但实际上还包括用户与界面之间的交互关系. 界面设计在漫长的软件发展中,界面设计工作一直没有被重视起来.做界面设

精美的极简主义的网页设计

极简主义界面设计是需要UI设计师用有限的资源来传达诠释艺术,也正因为元素的简约,也造就了它一定的独特性.就网站设计而言,极简主义的趋势看起来似乎已经巩固住了它的地位.最后,你肯定也跃跃欲试了,但是在一展身手之前,不妨从蓝蓝设计下面网站设计例子中得到启发,这些网站是极简主义在现代网页设计的代表作品. 极简主义的网站设计欣赏:http://www.lanlanwork.com/ Anonymous DesignBlvd Impress a Penguin Beatbox Academy Lorenz

518抽奖软件:极简主义设计的践行者

软件用途 用于企业年会抽奖,通过电脑连接LED或投影仪,实现大屏幕随机滚动抽取照片.号码.姓名的电脑软件.软件自带音效.精美的背景图,可以提升大中型年会的气氛.也可用于婚庆等其它场所. 开发原因 市面上的同类软件太复杂.缺乏设计,主要表现为: 1. 含没必要的功能,如锁定屏幕.从某奖项开始抽.临时修改奖品: 2. 菜单混乱不直白,分类没用好,没表明软件主体结构: 3. 将复杂的高级功能显摆出来,只会让普通用户迷惑: 4. 界面细节上,文字按钮摆放显乱.留白不合理等. 图文教程 一.抽奖前设置 包

通过极简模拟框架让你了解ASP.NET Core MVC框架的设计与实现[上篇]

<200行代码,7个对象--让你了解ASP.NET Core框架的本质>让很多读者对ASP.NET Core管道有了真实的了解.在过去很长一段时间中,有很多人私信给我:能否按照相同的方式分析一下MVC框架的设计与实现原理,希望这篇文章能够满足你们的需求.在对本章内容展开介绍之前,顺便作一下广告:<ASP.NET Core 3框架揭秘>已经开始销售,现时5折优惠还有最后4天,有兴趣的从这里入群购买. 目录一.Action元数据的解析     ActionDescriptor    

Java 线程第三版 第五章 极简同步技巧 读书笔记

一.能避免同步吗? 取得锁会因为以下原因导致成本很高: 取得由竞争的锁需要在虚拟机的层面上运行更多的程序代码. 要取得有竞争锁的线程总是必须等到锁被释放后. 1. 寄存器的效应 计算机有一定数量的主寄存器用来存储与程序有关的数据. 从逻辑上的观点来看,每个Thread都有自己的一组寄存器.当操作系统将某个Thread分配给CPU时,它会把该Thread特有的信息加载到CPU的寄存器中.在分配不同的Thread给CPU之前,它会将寄存器的信息存下来.所以Thread间绝不会共享保存在寄存器的数据.

张艾迪(创始人):视觉计算极简主义的设计

AOOOiA.global创始人艾迪张:面临着新互联网的时代的到来.全球各行业对产品设计和色彩搭配上进行了新的色彩标准化.就想人们喜欢Apple的黑与白.喜欢AOOOiA.Global/224 的赤橙黄绿青蓝紫的鲜亮的色彩世界一样;不同忽视的是.更明亮.更清晰.更拟真化的视觉体验与视觉计算中.每一帧的色彩.每一帧的画质.都将更加标志性的展现与运用在各个领域与产品之中:全球市场喜欢不断的跟随市场色彩的变化.而忽略了真实化色彩世界的本真进化::让我们随着色彩进化论从回到19世纪:直到19世纪.我们所

.NET Core实战项目之CMS 第七章 设计篇-用户权限极简设计全过程

写在前面 这篇我们对用户权限进行极简设计并保留其扩展性.首先很感谢大家的阅读,前面六章我带着大家快速入门了ASP.NET Core.ASP.NET Core的启动过程源码解析及配置文件的加载过程源码解析并引入依赖注入的概念.Git的快速入门.Dapper的快速入门.Vue的快速入门.不知道大伙掌握的怎么样了!如果你有兴趣的话可以加入我们的.NET Core实战项目群637326624跟更多的小伙伴共同进行交流下. 接下来我们就正式进入.NET Core实战项目之CMS的设计篇了.在设计篇呢,我们