好图标的秘密!顶尖设计师分享的6个图标设计优化指南(上) -
亚洲城ca88,ca88唯一官网,ca888亚洲城唯一入口

亚洲城ca88,ca88唯一官网,ca888亚洲城唯一入口

优秀设计联盟-SDC-网-设计师交流学习平台-听讲座,聊设计,找素材,尽在网

菜单

好图标的秘密!顶尖设计师分享的6个图标设计优化指南(上)

2016/05/31in 阅读 20875评论区

icon-optimization-guideline-1

UI的工作曾经被很多人等同于画图标,然而大家真的会画图标么?优质的图标和不够好的图标的区别其实非常小,但是这些细微的差别对于设计质量的影响却是很大。这篇文章分享的是如何用6个步骤来优化图标的设计。少有的icon设计理论结合实践的文章,强烈建议阅读。

这6个步骤应该作为一个指南而非教条来准守。

这篇文章中我们会将这六个步骤应用到一只柯基犬的图标上。这个图标有潜质,但是还不足以被认为是优秀的。下图是修改前和修改后的对比,接下来我们将详细说明具体步骤。

icon-design-01-opt

左边的是原来的icon. 右边的是按照本文原则重新设计过的icon

有效icon设计的三个属性

系统和深思熟虑的设计icon主要依靠三个属性:形式、审美统一、可辨识性。无论是设计一套还是设计单个的icon,都需要考虑这三点。

1、形式

形式是关于一个图标如何制作而成的最底层的结构。如果你忽略一个图标的细节,画一条线去表达它,看看它是不是变成了一个正方形、三角形、圆形、水平或者垂直的矩形?主要的几何图形——圆、三角和正方形——是创造一个icon视觉设计的的基础。在我们的例子中, Kem Bardly设计的小狗的头部是由两个三角和两个椭圆组成的。正如我们画素描之前要用尽可能大的简单的形状打草稿然后再去添加更多的细节一样,我们也是从简单的形状开始设计一个图标,然后再去添加更多的细节。

icon-design-02-opt

这张图片的关键线显示了由基本形状定义的设计形式

2、审美统一

我们说的审美统一是指在一个或者多个icon中共享同样的设计要素。比如说都是圆形或者方形的角,角的具体尺寸(2像素、4像素、等等),一致的线的粗细(2像素、4像素、等等)、风格(面、线、填充的线、字形)、颜色等等。审美统一让你的设计看起来是一个整体。在下面的例子中,三只狗狗都有共同的设计要素,比如2像素的圆角,2像素眼睛和鼻子的圆。

icon-design-03-opt

这三只狗狗用共同的设计和风格元素,创造了审美上的统一

3、可识别性

可识别是一个icon作为一个产品的本质或一个icon独特的原因。一个图标最终是否起作用取决于观看者能不能容易的识别icon所描绘的对象、想法、或者行为。可识别包括大家对于一个事物普遍的看法,但它也可以包括一些独特而意外的元素比如心形的小狗的鼻子。需要记住的是可识别性并不只是对事物单纯的描述,它还包含你对此独特的理解。在这方面审美统一和可识别能够并且经常的相互重叠在一起。

icon-design-05-opt

每只狗狗的独特性他们可以被识别,然而一致的元素和风格又让它们看起来是一组的。

目前为止,我们了解了有效的icon设计的三个主要属性。接下来,我们将深入了解如何用留个步骤来妥善处理这三个方面的问题。

六个步骤

1、从一个网格开始

我们这里使用一个32×32-pixel网格。我们的网格也包含一些基本的指导来帮助我们在每个图标的设计中创建基本样式。

icon-design-06-opt

在这里,我们看到了一个 32 × 32-pixel 的网格, 用一个 2-pixel边界 (或 “禁区”) 来留出喘息的空间。

网格外面的2像素是我们所说的“禁区”。除非绝对必要,避免图标出现在这个区域。“禁区”的目的主要是为了在图标周围创建一些喘息的空间。

对于icon可以用基础形状概括的,你可以画一条外边缘线来做边界框,这些边界框通常是一个正方形、圆形、三角形矩形等~

圆形的iocn以网格为中心,通常会接触到内容区的最外层的边缘,但不会进入禁区。注意,最常见打破禁区的情况是可以让一些微量的需要强调的元素向圆外延伸以保证设计的完整性 ,如下图所示。

icon-design-07-opt

△ 用网格和轮廓线对齐的圆形图标

方形的图标也是以网格为中心但并不会这么做,在大多数情况下,它会扩展到主要内容区的最外层的边缘。当需要和圆形或者三角形的图标保持一致的视觉重量时,大多数的长方形图标或正方形图标要对齐到中间的轮廓线(下图的橙色区域)。让图标本身的视觉重量去决定怎么去对齐这些轮廓线,这需要在练习中去感觉。看看下面方形的设计图,有三个同心方块被强调,浅蓝色、橙色、浅绿色。

icon-design-08-opt

△ 调整成一样视觉重量后的方形和圆形的图标

在32-pixel的正方形里,你会注意到20 × 28-pixel大小的水平或垂直的矩形。我们松散的遵循这些矩形图标是横向或是竖向的,并试图使这些图标匹配20 × 28-pixel的尺寸。

icon-design-09-opt

△ 调整后的垂直和水平方向的矩形与网格的关系

对角图标的大小是以圆形的边缘线来调整的。注意,最外层的点与圆形的参考线基本一致就行,不需要特别的精确,接近就可以了。

icon-design-10-opt

△ 调整后的对角图标大小与网格的关系

记住,你不用每次都严格遵循网格和参考线. 网格在这里的作用是为了帮助你让图标保持一致性, 但是如果你需要在制作一个伟大的图标和遵循这个规则之间二选一的话,那就打破它。有着“荷兰图标”美称的Hemmo de Jonge说过:

一个独特icon的精华比设置一致感要重要的多。

好了,明天会继续分享接下来的步骤2~6。

欢迎关注译者的微信公众号:

fkbsjqr

【VR设计好文合集】

可能是国内第一个VR原创教程:

VR设计指南:

UX设计师的VR设计经验:

【网 原创文章 投稿邮箱:2650232288@qq.com】

================关于网================
“网“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:。
设计微博:拥有粉丝量130万的人气微博 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:/icon-optimization-guideline

继续阅读与本文标签相同的文章

发表评论 加载中....

验证码加载中....

评论加载中....

底下还有哟~快放我们出去~
uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

评论就这些咯,让大家也知道你的独特见解 立即评论
以上留言仅代表用户个人观点,不代表立场

相关文章

关于我们

网(uisdc.com)是国内极具人气的设计师学习平台。2012年成立至今,一直专注于设计师的学习成长交流。目前正通过网站、微博、微信(ID:youshege)、各大社群为设计师提供高水准的行业设计讲座和领先的设计资讯分享。为设计师发声、替好作品说话,是平台的运营理念。想更全面了解或联系我们合作,欢迎访问。

我们的团队

微信

设计秘籍 一扫"掌"握!

                  官方 QQ 群:

Copyright © 2018 亚洲城ca88,ca88唯一官网,ca88手机版入口 -官方微信号:

sketch 大课堂 转场动效 设计师 扁平化设计 交互设计师 界面设计 排版布局 职场 平面设计 设计师专访 素材下载 视觉设计 配色 设计流程 web前端开发 AI教程 用户体验设计 设计理论 海报设计 神器下载 字体下载 设计趋势 设计规范 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享

上周热门文章

热门专题

把好文章收藏到微信

打开微信,扫码分享
学设计 在这里