润物细无声!5个超实用法则帮你精准设计图标

    今天的图标教程不停留在操作层面上,深入点,来说说那些微妙而关键的图标设计原则,看完这五点会发现,一枚优秀的图标可不光视觉效果好,在用户体验方面也经过细腻的思考,还不清楚的同学,戳 >>>

  你曾经遇到过让你给一个指定的问题设计图标的困难么?和你的开发者一起合作,却发现很难给你的客户一个足够完美的解决方案?当你在设计页面图标遇到麻烦的时候,这篇文章就可以帮助到你了。

  指导原则

  图标设计是整个页面视觉设计中一个最重要的视觉元素。一个图标的细节,样式和功能是由很多东西决定的。我最近也在为一系列的网站制作相应的页面图标,来传递微妙的隐喻。

  这篇文章会有一些最近的我为一个网站设置的error这个图标的案例。总而言之,图标设计的指导原则涉及到以下五个部分:

  理解问题所在

  采用全局方法

  越简单越美好

  考虑环境因素

  理解符号元素

  这篇文章不是那么难以理解,而且会给你在真正的图标设计中带来很大的帮助。

  一、理解问题所在

  有的时候你可能需要从零开始设计你的网站,那么你就需要大量的图标用于视觉表达。通常情况下,你的客户需要你为他定制出独一无二的图标。比如说,他需要我给一个文档设计一个“Error”的图标。

  起初,他建议说在一个页面图标里放一个X来表示文档类型不支持,或者表示文章没有被下载成功。他脑海中的图标是这个样子的:


  还不坏是吧?为了简单,我除去了一些元素,改成了:


  但是,我也承认它还需要改进,因为它还不像是一个专门为文档加载错误设计的一个图标。

  二、采用全局方法

  我们需要整体考虑图标的设置,所以我们拿了几个其他的图标例子作为灵感。

  “这个警告图标怎么样?”

  我们思考着,因为它实际上已经在网页中被大量使用了,人们可以轻易明白它的含义。


  当我们想设计一个图标的时候,一定要考虑到同种类型的其他图标是如何设计的。否则,你很有可能使用的图形的寓意在其他图标上已经被大量使用了,表达的还是另一个意思,那么你的设计就会产生歧义。

  三、越简单越美好

  之后,我们想到在一个文档图标中画一个大三角形,像是这样:


  但是,经验告诉我,它太复杂了。它的寓意不那么直接,人们也不能一眼看上去就明白是什么意思。

  四、考虑环境因素

  之后,我提出建议我们应该用一个大x包含在一个圆内的图标,像是这样:


  但是这还是不可取的,因为这个图标传达的信息是危险。这个图标表达的含义太过了。

  我现在想说的,是你需要考虑到环境色。颜色和视觉量级是传递图像的一个重要的方式。比如,红色常常用语警告,而浅色比如灰色显得更加中性。如果你用中性色来表示,那么可以恰如其分的表达出图标含义。

  五、理解符号元素

  符号语言是一种次通信,在网页设计中也是非常重要的一个部分。

  比如,装饰性字体更有女性气质,而手绘字体则看上去更加童趣。

  你想用你的图标表达怎样的含义?

  例如,这个Error图标并没有创造太多令人惊恐的元素。


  我记得这个图标常常在我网络瘫痪的时候出现,它们非常完美。含义也不过分,只是恰如其分的告诉用户出错了。

  再比如这个更直接一些:


  下面这个例子来源于Chrome浏览器,完美的表达出了我需要的那个图标。轻微,准确,告诉用户某个地方出了错。这个图标除了白色线条的部分都是灰色,可以让用户明白问题的严重,但是又不至于过分到让人民产生惊恐的感觉。


  最后一个图标表达的信息很简单,但是却传递了最准确的信息。

  结论

  图标使用的艺术需要一点点好眼力,也要一点点设计的经验。但是它也可以根据我们上述讨论的几个原则来构建。如果你的图标寓意太模糊,或者使用千篇一律的视觉提示,那么不妨再好好思考上述说到的五点。

分类:

  • PS入门教程
  • ps图标制作教程
时间: 2024-08-04 13:53:19

润物细无声!5个超实用法则帮你精准设计图标的相关文章

10个超实用的PS矢量图设计技巧

  大家都知道,Photoshop是编辑位图的一个重要应用程序.其实,Photoshop在处理矢量图方面也有很强大的功能.本PS教程中,将向大家介绍10个最重要的PS矢量图特征. 10个超实用的PS矢量图设计技巧 我们将学习如何使用自由钢笔工具.橡皮筋功能.即时形状属性.路径操作.路径安排.隔离以及其他功能.一起来学习吧! 一.自由钢笔工具 钢笔工具是PS中很有用的一个工具,但不是很好掌握.用它画直线很简单,但画曲线就比较难了.如果你精通钢笔工具,可以用它进行精确的选择.绘制不同的形状.创建矢量

120个PHOTOSHOP技巧帮你加速设计(后60个)

Photoshop 工具使用技巧       120个PHOTOSHOP技巧帮你加速设计(前60个) 61. 快速调用笔刷 快速打开笔刷面板的快捷键是F5. 62. 混合火焰效果 A: 复制火焰 打开一个人物肖像图片和一个普通的火焰图片,使用移动工具,使用自动选择图层,并且显示变换控件.将火焰图片拖放到肖像图片上,模式选择混合模式. B: 位置和扭曲 单击边款,改变火焰的图层,调整大小,旋转,定位.在调整状态下,鼠标右键点击调出菜单,选择"扭曲",调整火焰姿态.使用快捷键Cmd/Ctr

3大速成法则帮你轻松搞定极简主义网站

  今天@念经的大猕猴桃 这篇译文特别不错,对于没有经验,想借鉴他人的设计师,如果没有强大的归纳能力,阅遍极简也枉然.恰好这篇文章把极简主义必备/抛弃的元素,可以运用的技巧,如何与其他风格结合这几个关键点都说得非常仔细,怒马不多说! 如今极简设计已普遍被应用于网页设计中,当然这拥有充分理由.轻量级的布局和低维修成本使其灵活适用于响应式设计.自然优雅极具美感,使得很多品牌和机构青睐并采用.然而赞赏这一设计风格和创造它是两码事. 看起来,由于极简主义元素不多,复制某种风格似乎变的及其容易.然而事实却

10个帮你UI设计提速的SKETCH使用技巧

  选择使用Sketch的理由很多,因为好奇跟风安装的同学应该不在少数,看了介绍觉得功能强大而安装的应该也不少.当然,如果你是一名UI/网页设计师,你的Mac和我一样感觉跑PS不堪重负,那么Sketch绝对能帮你排忧解难,从此告别卡顿和无所不在的进度条. 越来越多的设计师开始选择使用Sketch 设计网页.UI了,开发团队 Bohemian Coding 居功至伟.虽然这个还在不断迭代的软件还有不少Bug,并且在功能上尚未完全替代PS,但是已然可以逐渐降低使用PS这款臃肿软件的频率了. 上手新软

120个PS技巧帮你加速设计

  01.旋转样式 Cmd/Ctrl+Shift+Alt+T 是一个神奇的快捷键,可以帮你制作出惊人的万花筒图案,当你使用它的时候,可以复制当前图层,并且同时重复之前的旋转.放大等操作.正如下图所演示,使用这一快捷键可以轻松地将一束炫光化作一个漂亮的万花筒.在操作的时候,你先用Cmd/Ctrl+T和适当的旋转,回车确定,然后使用这组快捷键,直到完成整个样式. 02.让图片覆盖在文字上 其实这就是剪切蒙板的功能,但是有一种更简单的处理方式:将图片图层置于文字图层的正上方,按住Alt键,单击两个图层

120个PHOTOSHOP技巧帮你加速设计(前60个)

  Photoshop越来越强大了!试图掌控它的全部特性是不现实的(更何况有那么多隐藏的功能!),那么我们不妨收藏一下大神们总结的这120个PS技巧,偶尔翻看一下,让自己的设计更强大更高效! 这120款技巧覆盖了PS绝大多数的主要功能,这些功能你很熟悉,但是明白它们的细节,掌控发招的捷径,修图作画的时候说不定能收获奇效呢! 01.旋转样式 Cmd/Ctrl+Shift+Alt+T 是一个神奇的快捷键,可以帮你制作出惊人的万花筒图案,当你使用它的时候,可以复制当前图层,并且同时重复之前的旋转.放大

超实用的单页网站设计指南

  这篇好文将给同学们科普何时能用单页网站,设计时有哪些技巧,有哪些优秀范例可以借鉴,以及文末推荐一大波专业的单页网站资源,干货份量绝对足,充电时间到 >>> @十萬個為什麽 :单页设计,是一项处理小型网站的绝佳技巧,甚至有些网站你可能认为一张页面搞不定,也同样适用.从易于维护,到减少带宽占用,使用单页网站的好处不胜枚举. 假如你应对的是个小型网站,通常只有几个页面的那种,可以考虑使用单页设计,看看它是否能简化项目,对用户更加友好.继续阅读,你将了解它的益处,何时使用(或不该使用),还有

阿里超实用的移动WEB六大设计心法

  相比App,移动Web成本少,实现难度低,数据追踪更全面,还能快速调整.优点非常多,随着全民宽带的提高,未来也会是一大热点,今天阿里的师尹同学总结了超多超全面的移动Web六大设计心法,特别推荐阅读收藏. 在这个移动互联网时代,我们经常听到这样的话: 「我有个改变世界的点子,就差做个app了.」 「这是我们的商业计划书,虽然还没有开始推广,但我们真的击中了用户的痛点.总之,先做个app吧.」 随着移动互联网思维的渗透,以及智能手机浪潮的影响,一波波app前仆后继,截至2015年7月,App S

Word2010公式功能帮你轻松设计公式

在数学.物理等学科中往往会出现各种公式符号,那你知道在word中如何打出这些符号吗?今天小编就为大家介绍一下Word2010中的公式功能,可让您轻松完成各种公式的设计. 例如:我们需要插入一个二次公式和创建一个自定义公式. 操作方法 1.单击"插入"-""公式",下拉列表中列出了各种常用公式,单击"二次公式"即可加入Word文档. 2.若要创建自定义公式,可单击"插入"-"公式"-"插入