图标是空心好还是实心好?

   最近,空心图标和实心图标的讨论变得激烈起来,有言论指出空心图标在视觉上比实心图标看起来更复杂,更容易让用户差生疲劳感和倦怠感。对此,设计师们都各抒己见,一部分人表示赞同这种说法,而另一部分人则表示这样的言论将问题过分了放大化了,并且在证据方面有所欠缺。

  图标也可以理解为是网站中的一种指引,是每个新用户都会涉及到的元素,所以无论空心或实心,一个能够令人一目了然,并且记忆深刻的图标才是用户真正喜欢的图标。

  以下是AnyForWeb搜寻的一些空心或实心的图标案例,看看你更倾心于哪一款呢?

  1.模糊背景上覆盖着由简单线条、字体和单一的颜色组成的空心图标,这会让整个界面看起来很优雅。不仅如此,这种简易的设计手法也让设计师轻松不少,在效果和操作上都令大家很满意。


  2.纯色的背景似乎搭配任何元素都能达到令人意想不到的效果,下面这个案例也不例外。正红色与白色之间的经典配搭,加以可爱的造型,成就了一个俏皮的实心图标设计。界面底部的实心按钮与幽灵按钮也与图标区域前后呼应。


  3.APP底部的图标随着用户的任意切换,在空心和实心之间自由转变。实心的图标相比较空心的而言,给人一种更突出和明显的视觉效果,让用户更容易的抓到重点。而主内容左边的卡通小图案同时采用了空心的设置,尽显极简主义。


  4.Line的界面似乎代表了大多数APP的图标设计方式。头部和底部的图标选用两种颜色的实心设计,下拉菜单部分使用空心图标。这样的设计虽然比较大众化,但不可否认的是,这样的做法的确让整个界面看起来格外整洁。


  5.幽灵按钮虽然简洁大方,但是过多的使用会另界面很单调无味,但如果使用全部实心的图标设计又会觉得很突兀。下面这个案例就想出了一个好方法。既然空心实心都不合适,那不如尝试一下让两者结合在一起吧。


  6.两种色差明显的颜色搭配在一起会体现出一种自然而然的时尚感,黑色背景和亮黄色的图标元素就是很典型的例子。强烈的对比色会让空心图标看起来也像实心图标一样,具有突出重点的效果。


  7.Metro风格的界面设计也能运用在APP的图标模块中,案例中将各种第三方分享平台的实心图标都用方块元素连接在一起,让原本单调的图标瞬间活跃了起来,给用户一种焕然一新的感觉。


  8.传统的导航图标大多会集中在一个区域内,而SevenEleven的APP在此做了很大的突破,将4个部分分别分布在界面的上下左右,简单的界面突然有了运动场的氛围,让APP充满了生命力。


  9.天气类应用的看点中总会有气候图标的一席之地,正如这个案例中所表现的,这又是一个空心与实心相结合的图标设计。


  10.这也是一个纯色块与实心图标搭配的案例,这个APP的界面设计其实很普通,但正因为图标的设计让网站变得可爱起来。


  图标在网页设计中算是一个小单元,但它的重要性大家都有目共睹。空心图标和实心图标在不同的环境中发挥着不同的作用,美化着网页中的小细节。

时间: 2024-09-19 09:19:45

图标是空心好还是实心好?的相关文章

html5使用canvas画空心圆与实心圆

 <canvas id="canvas" width="500" height="500" style="background-color: yellow;"></canvas> 代码如下: var canvas=document.getElementById("canvas"); var cxt=canvas.getContext("2d"); //画一个空心圆

空心图标真的比实心图标更难识别吗?

  编者按:自从IOS 7发布后,不知道同学们发现了木有,很多APP(QQ.微信.微博等)都跟着换上了空心图标,但空心图标会不会给用户带来认知疲劳,一直木有定论,现在有同学特意编写了一个APP,做了1260个图标识别测试,得出了精准的结论,结论是啥,来学习咯! 去年夏天,设计师Aubrey Johnson在Medium 上发表了一篇批判ios7的文章.Jonhson指出苹果的新空心图标比实心图标在视觉上更加复杂,给用户带来认知疲劳,这样会让用户对这样的界面产生视觉疲劳而厌倦使用.这篇文章很快就被

用css3实现各种图标效果

原文:用css3实现各种图标效果 公共样式 应该说现在绝大多数公司的项目前端都是一团乱,不仅仅是js写的没有任何框架而言,css同样也是如此,导致项目如果要升级或者说有新的变更维护起来就特别困难. 最近领导决定花大时间整理一下css样式,用他的一句话来说就是为后来者造福. 首先我们在整理样式之前,必须得有一个自己团队的规范. 思考真的很重要,所谓的磨刀不误砍柴工,事实上也就是说你在做任何事情之前都要把大致的流程,大致的思路想清楚之后再动手,否则就可能做到一半发现这样不对,然后前面的工夫全白费了,

iOS开发系列--IOS程序开发概览

概览 终于到了真正接触IOS应用程序的时刻了,之前我们花了很多时间去讨论C语言.ObjC等知识,对于很多朋友而言开发IOS第一天就想直接看到成果,看到可以运行的IOS程序.但是这里我想强调一下,前面的知识是你日后开发IOS的基础,没有那些知识你开发IOS会很痛苦,现在很多开发人员做开发都是一知半解,程序质量确实令人担忧,所以还是希望大家能够熟练掌握前面的内容,开发过程中多思考,彻底理解程序运行的原理.机制.好了言归正传,不管怎么样正式进入IOS开发还是令人兴奋的,今天的内容虽然说是开发预览,其实

《ANSYS 14热力学/电磁学/耦合场分析自学手册》——2.4 菜单栏

2.4 菜单栏 ANSYS 14热力学/电磁学/耦合场分析自学手册 菜单栏(Utility Menu)包含了ANSYS全部的公用函数,如文件控制.选取.图形控制.参数设置等.它采用下拉菜单结构.该菜单具有非模态性质(也就是以非独占形式存在的),允许在任何时刻(即在任何处理器下)进行访问,这使得它使用起来更为方便和友好. 每一个菜单都是一个下拉菜单,在下拉菜单中,要么包含了折叠子菜单(以" > "符号表示),要么执行某个动作,有如下3种动作. 立刻执行一个函数或者命令. 打开一个对

Illustrator绘制逼真质感的匕首效果教程

给各位Illustrator软件的使用者们来详细的解析分享一下绘制逼真质感的匕首效果的教程. 教程分享: 一. 1. 新建文件,新建图层; 2. 用矩形工具画一个长方形; 3. 按A键切换到空心箭头工具,选中左上方的节点,按住SHIFT键按右方向键移动节点. 4. 切换到添加节点工具,局部放大视图,添加如图的2个锚点.   二. 1.用转换节点工具把上面的新增的那个节点转化为曲线节点; 2.按住CTRL键可以临时切换到空心箭头工具,拖拽锚点手柄进行调节; 3.选中最左边的节点,按上方向键,调节到

iOS - Quartz 2D 二维绘图

1.Quartz 2D 简介 Quartz 2D 属于 Core Graphics(所以大多数相关方法的都是以 CG 开头),是 iOS/Mac OSX 提供的在内核之上的强大的 2D 绘图引擎,并且这个绘图引擎是设备无关的.也就是说,不用关心设备的大小,设备的分辨率,只要利用 Quartz 2D,这些设备相关的会自动处理. 1.Quartz 2D 在 iOS 开发中的价值 绘制一些系统 UIKit 框架中不好展示的内容,例如饼图 自定义一些控件 不添加 UI 控件的情况下,使 UI 内容更丰富

简单四步 菜鸟用Excel打出考试成绩表来

我在Excel教学中发现,先从简单的公式入手,直接进行实际问题地解决,能增强学生的学习兴趣.加快学习的进度,使学生更快的了解和掌握Excel.总之越简单越好,先入门再说.今天我们就先来学习打印输出一张成绩表. 第一步:表的设计及原始数据输入. 打开Excel程序就是一张空白表,无需特别设计,输入表头.姓名,按照成绩表的格式照搬过来就行.然后输入各门功课的成绩,每一个成绩放在一个单元格内.每一个单元格有一个地址,用列标和行标组成,如"高学健"的单元格地址是B2."物理"

用Excel打出考试成绩表来

  第一步:表的设计及原始数据输入. 打开Excel程序就是一张空白表,无需特别设计,输入表头.姓名,按照成绩表的格式照搬过来就行.然后输入各门功课的成绩,每一个成绩放在一个单元格内.每一个单元格有一个地址,用列标和行标组成,如"高学健"的单元格地址是B2."物理"在F1等.在输入时,根据各任课教师提供的成绩,可以用数字键盘按列输入,回车即可在下一个单元格中继续输入. 第二步:成绩的汇总及排序. 录入原始数据后,根据实际情况汇总.H2单元格中是"高学健&q