图标设计的创意方法

上一篇《如何确定一套APP图标的风格》在文末关于图标创意的部分,简单地提了两种思路,后来想想其实还有很多方式。也许很多人都经历过在网上不断刷图片找参考期待灵感闪现,所以这篇从图标的造型、色彩、质感等维度去归纳图标的创意方法,从其中一个点切入寻求创新,也许能更快地找到好的表达。

01.从品牌LOGO延伸设计

这是最为推荐的思路,因为从Logo设计特征延展出来的图标设计,其实是把品牌基因融进UI设计,能让用户自然地产生与品牌间的联想,加深品牌印象

马蜂窝:提取了Logo底部的弧线设计,在系统图标中多处都应用了弧线,成为其标志性的设计元素,app logo和系统图标形成一套统一的视觉系统。

链家、Quark:都采用断线(或称为开口)的设计,由于品牌Logo本身具有这种特点,因此让人感觉非常自然、一体化。

02.从品牌IP延伸设计

和从品牌logo延伸的设计一样,从IP延展也能让用户自然地联想到品牌,并且拟人化的形象能让图标富有情感和活力,更好地将情绪传递给用户


03.造型创意

断线法:

断线(开口)的设计让图标更有造型感。需注意的是,开口通常选择在线条交界的地方,让图标有透气的感觉。

几何法:

运用基础的几何图形如圆、方、线条、点等做设计,这种设计语言最终呈现的风格往往会有较强的设计感;

由于这种设计造型简洁,所以通常会结合稍粗的线条增加图标视觉重量。


04.色彩创意

1) 色块(自如):描边的图标造型结合几何形状的色块,是现在较为流行的一种设计;

2)微渐变(大众点评):流行了一整年的设计,在很多app的金刚区图标上会采用这种设计来强调入口,吸引用户视觉注意力;

3)邻近色的碰撞(enjoy):比较少见,如果应用不当容易导致图标过于花哨,失去视觉焦点。


4)同色相的不同透明度或不同明度组合:能够丰富图标的色彩层次,同时又不至于让图标太复杂。


05.质感创意

具有质感的设计会让图标视觉非常突出,因此通常适合应用在界面本身内容较多,需要特别强调的图标类型上(如金刚区图标)

常用的表现手法:

1)渐变:应用渐变色让图标具有厚度或形成前后关系;

2) 投影:应用投影提高图标的视觉层级,使具有重量感;

3)轻拟物:比起以前追求逼真细节的拟物,通过色彩变化形成的轻微拟物质感能让图标更具现代感。


06.动效创意

在图标上应用动效的例子越来越多了,但多数是在切换tab时有一个缩放效果的动效。以下这两个例子是图标在选中状态时有很轻的动画效果,让人感觉很舒服:

氧气app:商店Tab在选中时,盒子上方的气泡在轻盈地晃动碰撞,创意也符合产品“氧气”的主题。并且这种微动效很轻,不会过于分散用户注意力,在图标动起来的瞬间,能给用户眼前一亮的惊喜;

饿了么:分类图标的“水果”图标,是会轻微弹跳的(嗯截图的时候橙子正跳着所以拉长了);

VSCO:DSCO icon有渐变色彩变化的动效,可能是出于推广的需求,需要吸引用户的注意,对于第一次看到的用户来说,出于好奇点击的可能性应该比较大。


只需要一点点的创新就能让图标形成差异化,深化品牌风格。以上每种创意方法都有各自的特点,在我们确定好风格方向后,需要结合项目特点选择合适的创意方法

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

推荐阅读更多精彩内容

  • 一个APP应用图标设计的美感与吸引力,决定了用户对产品的第一映像。一个有吸引力的APP应用图标,可以让用户愿意去了...
    Evans的璀璨星空阅读 2,321评论 0 17
  • 1 UI设计基础 1.1 为iOS而设计 1.1.1 iOS包含以下3条设计原则: 遵从,UI应该有助于人们理解内...
    Willry阅读 3,570评论 1 48
  • 今天一大早刚到公司路过其他部门的时侯听到一个姑娘在抱怨“啥事都叫我做,让我学ps,还要会做ppt,我成全能人了我。...
    s若水三千阅读 166评论 3 3
  • 你是否面对零食有两难的境地,不吃零食嘴总是痒痒,吃了又有负罪感。管住嘴是最有效的减肥方法,这些零食能让你瘦着大饱口...
    周五要吃糖豆沙阅读 900评论 0 7
  • 父亲离开已整整20年了,记忆中的音容被无情的时光淹没着,但那带有旱烟味的手,随着光阴的沉淀,渐渐读懂,因为...
    石水轩阅读 338评论 0 1