UI小渣 | 不会绘制图标?一份简单实用的B端产品图标绘制指南!!!

小可爱们好,我是你们的小渣~

最近有不少小可爱和小渣说,想了解B 端设计相关的知识,但不知道在哪了解,很迷茫。其实有时候是你自己对岗位的认知还不够广阔,多了解一些不是坏事~

接下来小渣给你们介绍的B 端图标设计内容还是不错的,有兴趣的话往下看吧,或许它也是你走出迷茫的一条路径!

设计师可能会觉得 B 端设计少有发挥空间。

一是产品风格严肃专业,不像 C 端产品风格多种多样,可以调动起用户丰富细腻的情绪

二是用户更关注成本、效率、质量、安全,而非用户体验,公司愿意为此投入的资源也有限

三是视觉上的创新可能对用户习惯产生冲击,造成降低工作效率甚至出错等后果

如此一来,设计师很难以一己之力推动创新。但设计师不该任由客观条件禁锢、约束自己的创造力,在夹缝中也要努力生长。小渣相信,创造力,始终是设计师最核心的竞争力!!!

本文总结的是小渣在绘制 B 端图标之前,创意发散阶段用到的方法和技巧,抛砖引玉,欢迎大家在留言区讨论补充~~


一、盘点和分类,居高临下整体把握

B 端平台因其覆盖的业务类型多,操作链路长,角色权限复杂等特性,图标种类多、数量大。因此建议大家先对图标进行盘点和分类,从一个居高临下的角度获得整体上的把握。盘点分类工作需要注意以下两点。

1. 遵循穷尽互斥原则

即不遗漏、不重复原则。分类可以多个层级,也可以多个维度。划分合理的分类维度,需要设计师深入了解业务,对抽象的专有名词刨根问底,并对未来可能扩充的内容做出预判。

2. 长期维护

产品是个生命体,迭代中随时会出现业务和功能模块的调整、新增、重组、合并等变动,图标整理也不是一劳永逸的,需要长期维护。推荐使用 Excel 等表格类软件或在线工具来管理,便于团队共享和协作,也有利于自我沉淀。

从草图开始,不要在意手绘技法

有些设计师的习惯是上手就用电脑画图。本该是创意发散阶段,却从第一个图标开始就陷入细节的泥沼里爬不出来,线条 1px 还是 2px 好?圆角是 4px 还是 8px?颜色要不要换一个?有投影会不会更精致?结果花了很多时间,却没有高效率高质量的产出。

有些设计师觉得自己没有扎实的绘画基础,对手绘草图敬而远之。其实画草图不是为了交付给别人,而是设计师对头脑里一闪而过的灵感想法的快速记录。

这个记录过程包括横向的发散对比,也包括纵向的推敲深化。所以尽管大胆落笔就好,至于草图表现形式是不是美观成熟,不要在意~

△ 日本著名产品设计大师,深泽直人的草图


二、创意发散,方寸之间的头脑风暴


怎样为图标选取合适的形象?在创意发散阶段,小渣一般混用下面几个套路!

1. 客观形象

这是最直接的方法,图标形象在现实生活中客观存在,抽象出整体外观或者部分特征形态,也可选取场景中的代表物。

△ 「购物车」选取手推车整体外观,「仓库」选取了场景代表物「货架」

2. 隐喻

把抽象的概念,借以具体事物来表现。这个难度大一些,发散的时候要结合生活经验展开丰富的联想和类比。

△ 用「雪花」类比「冻结」,用「警灯」类比「预警」

3. 抛开固化形象

是不是一说到主页,大家就联想到一座尖顶的房子?一说到搜索,就是放大镜?在创意发散阶段,大家尽量尝试抛开那些已经固化的形象,释放自己的好奇心,探索一下还有没有其他的可能性,刻意培养自己的创造力。

另外随着科技发展技术更迭,一些通用形象也在慢慢被淘汰,被代表新技术的形象取代。例如保存图标从原来的软盘形象变成了云朵/箭头,密码图标从锁头或钥匙形象变成更丰富的形象。

△ 保存图标的进化

△ 密码图标有了更丰富的形象

这不是鼓动大家必须要用新创意取代固化形象。创新的价值是洞察问题本质,找到更好的解决方案。

在接下来的方案筛选阶段,建议大家还是选择用户接受度高的形象,而那些没有入选的创意图形,已经实现了设计师提升自己的价值。

4. 组合元素

对于抽象、复杂、组合的概念,可以用组合元素来阐述含义和使用场景。

△ 「利息」是经过时间积累产生的费用或收益,「货押」体现货物和现金之间的转换关系

△ 「对公打款」使用企业账户转账,「人脸核身」通过面部识别验证用户身份

5. 直接用字

这个方法简单粗暴了点,但在表达效果上也是直接且准确的。

△ 「包邮」图标、「正品保证」图标

最后小渣给大家总结一下吧~

图标的特征要足够鲜明,容易被用户识别。

在选取形象时,要还原使用场景,贴合目标用户的心理模型。不同场景下或不同目标受众看到同一形象,脑袋中映射到的可能是不同物品。例如消息框,在不同的场景下可能是消息、通知、评论、留言等等。

为了让大家少走弯路,避免小渣踩过的那些坑,我把我的B端产品图标绘制指南,倾囊相授,希望这份资料可以帮助到你们!~

欢迎大家在后台分享更多的其他设计技巧给小渣,我们会把优质的内容在下一次进行推送~~

为了让更多UI设计新手快速入行,小渣专门建立了一个UI小白交流群,大家可以扫描下方二维码加入组织~~我们每周会分享工具、课程、福利.....

UI设计不仅仅是工作,也是生活

更是一种美的享受

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343

推荐阅读更多精彩内容