肥猫SEO论坛»论坛首页 › 行业交流 › 软件下载 › 实例分析：图标设计4原则

高端网站建设可签合同可上门沟通	站群程序定制/蜘蛛池租用	全行业SEO接单QQ1624516415	全行业SEO接单QQ1624516415
2000+站点外链一键通发	原创SEO文章代写【点击】	点击加入本站VIP 发帖免审核	广告位招租

honghu2

23万积分	0 好友	7万主题

发消息

实例分析：图标设计4原则

TA的其它主题

发表于 2021-9-26 16:57 | 查看: 557| 回复: 0

实例阐发：图标设计4原则

“辨认性”、“合适举动习气”、“原创性”、“易用性”……这是大师常说的几个图标设计大原则。而今天作者连系本身的实战履历，分享几个接地气的设计原则，但愿在你的现实事情中可以或许有所受益。

图标设计是界面设计最首要的构成部门之一，作为UI视觉设计师，这项技术已是咱们必需要把握的根基技术，那图标设计要遵守甚么样的原则呢？

“辨认性”、“合适举动习气”、“原创性”、“易用性”···

上面这些原则都是大的尺度，在图标设计的时辰起到了引导性的意义，可是这些法则实在都被大师说烂了，若是你对上面这几点还不太领会，可以自行baidu一下，这里我就未几说了，我要分享的是可以或许帮忙你晋升专业度的一些实战履历，若是你所做的图标能做到如下这几点，那末恭喜你，你合格了！

本文没有对图标举行具体的分类，所谈范畴也只是app中一些功效性图标的设计履历。

仍是先来看下纲领：
1、像素对齐2、多用布尔运算3、怪异的气概4、视觉巨细的同一5、2017年图标的风行趋向展望1、像素对齐
我记得之前在小公司的时辰，一小我卖力全部app的交互设计与视觉设计，设计团队只有两小我，有甚么问题都没人可以就教，那时狐疑我最大的一个问题就是：为甚么我做的图标老是发虚的呢？直到来了至公司和先辈们进修以后，才晓得本来是由于像素没有对齐。

咱们来看下面这张图：

图片布景的网格就是咱们所说的像素网格，我标明红点是想奉告大师，第一条竖线做到了像素对齐，而第二条竖线没有做到。咱们没有看到两者的区分是由于如今是在矢量图形的情况下显示的，若是导出来图片就会酿成下面如许：

这就是图标发虚的缘由，由于咱们没有严酷的做到像素对齐，特别是在做较小尺寸的图标时，若是不严酷的遵守像素对齐，那终极的显示结果就会呈现问题，好比说下面这类环境：

以是在你通往专业UI设计师的路上，这一点是必需要注重的。
多用布尔运算
在做图标的时辰，能用根基图形举行布尔运算的时辰，尽可能不要利用钢笔，如许做的益处有以下几点：
让你的图标加倍规范对图形布局理解加倍深入后期更改外形加倍便利
举个例子，下面这个图标：

若是咱们利用钢笔挺接去画，实在咱们很难画的出格规范，并且后期调解也很贫苦，最准确的法子就是去思虑他的布局，如许一个形状是不是可使用根基图形举行组合来实现，在颠末思虑与测验考试后，咱们会发明，实在他是用一个圆形和三个矩形组合而成的，以下图：

在日常平凡，咱们可以多去测验考试阐发并操练一些都雅的图标或真正的物体，去理解此中的布局与建造法子，当你堆集的履历足够多时，你便可以很自若的去设计你想要的精彩图标了。
3、怪异的气概
作为专业视觉设计师的你，在时候充沛的环境下，万万不要去网上下几个图标直接拿来用，你会上瘾的，而且也会被一些行内助举行批评，由于他们很轻易就可以看出来你做的图标是直接在网上下载的，好比下面如许的图标：

咱们在做系列图标的时辰，必定要在前期给图标设定一个气概及原则，使之看起来与众分歧，比方下面的图标：

一眼看上去，咱们便可以看出上面图标的特色，线条是断开的、所有的图标都是一笔划出来的，这些均可以让你的图标变得与众分歧。再好比你也能够从色彩上做文章，以下图：

实在法子另有不少，大师可以多多测验考试与立异。

在这里值得一提就是，咱们在做线性图标时，必定要包管描边粗细不异、圆角不异，若是这些根本的法则都没有遵守，那也就谈不上气概的同一、立异了。
4、视觉巨细同一

看上面这张图，一样都是44x44px尺寸的外形，方形就会比圆形看着大一些，固然咱们同一了物理尺寸，可是在视觉巨细上没有举行同一。

在举行图标设计的时辰，咱们会利用栅格辅助线来帮忙咱们加倍严酷谨严，但必定不要被辅助线困住，学会机动应用，连结视觉上的巨细同一。

再举个英文字体的例子，以下图：

固然在设计的时辰，利用了辅助线，可是设计者并无被辅助线所束厄局促，为了到达视觉巨细的同一，将曲线字母（比方o）举行了得当的放大，如许总体看起来才会调和安定。

设计图标的时辰也是同样，不但仅是图标的巨细，包含元素与元素的间隔、正形与负形的比例都是咱们必要斟酌的内容，若是有哪些内容本身还不太清晰，那就必要操纵业余的时候去好好弥补一下体系常识了。
5、2017年图标的风行趋向展望
察看了不少app的改版，发明功效性图标的变革趋向在某种水平上有必定的共性可寻，在这里我来分享两个本身的展望：
1.操纵局部色彩差别来突显图标气概

这类气概一向呈现在dribbble网站上的观点图标，如今也渐渐的在挪动app上面利用起来，若是如今你正在寻觅图标气概，这个标的目的无妨一试。
2.浏览类app图标的无色化

底部导航图标的无色化气概，在浏览类app起头渐渐风行起来，这类环境也能够理解，是为了让用户更好的聚焦浏览内容，优化浏览体验。

但不晓得今后其它类型的app图标会不会稻草网也走这个气概线路呢？

以上就是我本次分享的内容，实在一些很根基的原则，比方：辨认性、易用性，也都是十分首要的，但维维新闻网我感觉没甚么好诠释的，就没有出格拿出来论述，但愿大师能把所有首要的原则都铭刻于心，不竭地阐发、操练，或许将来的图标设计大家就是你了！

作者：菜心（微信公家号：菜心设计铺），华为ITUX用户体验设计师（主视觉）

本文由 @菜心原创公布于人人都是产物司理。未经允许，制止转载。

收藏0 回复显示全部楼层道具举报

返回列表

		自动登录	找回密码
密码			立即注册