做UI设计最烦的就是找图标,要么太丑要么版权有问题。这篇不整虚的,直接告诉你怎么在半天内搞定一套既专业又好看的页面设计图标,让你不再为选哪个小箭头纠结到掉头发。
说实话,我见过太多刚入行的设计师,做页面设计图标的时候跟无头苍蝇似的。今天去素材网下个PNG,明天去Behance抄个SVG,最后拼出来的界面像个杂货铺。真的,丑不是问题,乱才是硬伤。客户一看你这界面,图标风格不统一,线条粗细不一,颜色还跳脱,直接就能把你怼回去。我当年也踩过这个坑,为了赶工期,随便从网上扒拉几个图标凑数,结果上线后被产品经理骂得狗血淋头。从那以后,我发誓再也不想搞这种低效的搬运工工作了。
今天我就把压箱底的干货掏出来,希望能帮你们省下那些无意义的刷图时间。记住,好的页面设计图标不是“找”来的,是“建”出来的。
第一步,定规矩,别急着动手。
很多新人一上来就打开软件开始画,这是大忌。你得先确定你的图标风格。是扁平化、线性、还是拟物?如果是现代SaaS后台,我建议用线性图标,留白多一点,显得高级。如果是电商APP,可能需要稍微带点填充的图标,增加点击欲望。最关键的是,定好网格。我用的是24x24的网格,笔画粗细统一为2px。这一步看似麻烦,但当你画到第50个图标时,你会发现这种一致性带来的视觉舒适感,是任何后期调色都救不回来的。别偷懒,网格定死了,后面的事就顺了。
第二步,建立自己的图标库,别老去外面淘。
我知道网上有很多免费的页面设计图标资源,比如Iconfont或者FontAwesome。但你要知道,别人的图标库是为了通用,你的项目是专用的。通用意味着妥协,妥协意味着平庸。我建议你建立一个本地库,把项目中常用的图标分类:导航类、操作类、状态类。每次新建项目,直接从这个库里拖拽,而不是去网上重新搜。这样不仅能保证风格绝对统一,还能极大提高效率。哪怕你只是把同一个图标复制粘贴,然后微调一下颜色,也比混用不同来源的图标要强得多。
第三步,细节决定成败,对齐是信仰。
当你把图标放进页面时,一定要检查视觉中心。数学中心不等于视觉中心。比如一个圆形的图标和一个方形的图标,如果底部对齐,圆形看起来会“飘”起来。这时候你需要手动调整,让它们的视觉重心在一条水平线上。还有,图标和文字之间的间距,建议保持图标宽度的1.5倍左右,这样呼吸感最好。别嫌麻烦,多花两分钟调整对齐,客户可能不会明说,但心里会觉得你这人靠谱,设计有质感。
最后,我想说,页面设计图标虽然小,但它承载着交互的反馈。一个错误的图标会让用户困惑,一个精美的图标能让用户心情愉悦。别再把它们当成可有可无的装饰了。去打磨你的每一个小细节,去建立你的规范,去坚持你的审美。这行当,拼到最后,拼的就是谁更用心,谁更较真。
别总想着走捷径,捷径往往是最远的路。把手头的每一个图标都当成艺术品来对待,你的作品自然会说话。加油吧,各位设计师,愿你们的图标库永远整洁,愿你们的客户永远满意。虽然我知道这很难,但咱们得试着去做到。哪怕今天只改好了一个图标的对齐,那也是进步。别放弃,别敷衍,别凑合。这就是我的态度。