IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

经验分享|利用品牌基因法进行图标设计

Catherine • 2017-05-06 22:05 • 交互设计

在看这篇文章之前你需要清楚,我所讲的东西并不是什么权威,只是在工作中总结出来的一些的小经验而已,制作图标的方法也有很多种,这里只是给大家一个思路上的启发,希望能对你有所帮助吧!

文章目录[隐藏]

  • 一、什么是品牌基因?
  • 二、如何提取品牌基因
  • 三、如何将品牌基因注入到图标设计中?
  • 四、图标制作过程中需要注意的事项
    • 1. 避免过于生硬的结合
    • 2. 制定好断线及粗细规范
    • 3. 图标的特征不要太多
    • #专栏作家#

在看这篇文章之前你需要清楚,我所讲的东西并不是什么权威,只是在工作中总结出来的一些的小经验而已,制作图标的方法也有很多种,这里只是给大家一个思路上的启发,希望能对你有所帮助吧!

经验分享|利用品牌基因法进行图标设计

按照惯例,我们还是先来看一下本文的大纲:

  1. 什么是品牌基因
  2. 如何提取品牌基因
  3. 如何将品牌基因注入到图标设计中
  4. 图标制作过程中需要注意的事项

一、什么是品牌基因?

品牌包括了理念、视觉、行为三个部分,而本文所讲的品牌基因只是视觉层面的。

既然是视觉上的,那就一定是可以看见的东西。没错,简单来说,品牌基因就是一个符号,而这个符号可以来源于任何事物,就像三星GALAXY SIII的灵感是来自于大自然的鹅卵石,国际版QQ的灵感是来自于氧气…,但不论怎么样,最后我们都需要将这些基因、灵感可视化,变成一个或者一组符号传达给用户。

一句话总结:品牌基因(视觉层面)就是通过一件事物提取出一个(或一组)视觉符号。

二、如何提取品牌基因

就拿上期那套图标来说吧,灵感来自于哪里呢?

最初在做“我的”图标时,找了很多参考,网上一搜一大把,如图:

经验分享|利用品牌基因法进行图标设计

但是如果随便下载一个改一改就直接用,你会有一种很不踏实的感觉,因为当别人问你为什么这样设计的时候,你总不能说“我看网上都这么做的啊”。

那问题就来了,如何能做一个有理有据的图标呢?这时候你的脑袋里就可以思考“品牌基因”了。我们可以去观察品牌的logo、辅助图形、设计来源等等,这些都可以帮助你去提取符号、特征。

所以通过这个思路我去观察了logo,如图所示:

经验分享|利用品牌基因法进行图标设计

将logo的“i”字母放大后,我们会发现下面这个局部形状和人型(“我的”图标)很相似,

经验分享|利用品牌基因法进行图标设计

所以,在经过优化之后得到下图:

经验分享|利用品牌基因法进行图标设计

这样当别人问你为什么设计成这个样子的时候,你可以很自信的告诉他,你是通过logo上的元素提取优化得到的!

但是仅仅做这一个图标是不够的,我们需要提炼出一个能够贯穿整套图标的视觉符号,于是我再次去观察和思考logo的样式,细心的同学可能已经发现,其实整个logo的每一笔开头都有一个共同的特征,如下图

经验分享|利用品牌基因法进行图标设计

而这个共同的特征就是我们要找的符号,也就是所谓的品牌基因,是贯穿整个logo的灵魂所在,至于这个特征是怎么来的,那是做logo之前的事情,这里我们就不在阐述了。

后经过优化后,我将符号总结为以下特征:

经验分享|利用品牌基因法进行图标设计

三、如何将品牌基因注入到图标设计中?

得到这个视觉符号之后,就需要将这个特征注入到我们的图标设计中了,举个例子,我们现在来做“收藏”的图标,也就是一个爱心。

那首先我们还是需要去找一些参考,去了解爱心的结构,并在本子上画一些草图,最后思考如何与我们提取出来的符号相结合。如果这些前期内容你都做完了,恭喜你,我们可以开始电脑绘制了,步骤如下:

经验分享|利用品牌基因法进行图标设计

就这样一个有理有据的图标就完成了。同理,其他图标也用类似的方法进行绘制!

四、图标制作过程中需要注意的事项

首先来回顾一下整套图标的效果:

经验分享|利用品牌基因法进行图标设计

关于图标设计中注意的事项,之前有写过一篇,大家可以自行查阅《实例分析:图标设计4原则》,这里针对这一套图标再来增加三点。

1. 避免过于生硬的结合

当有些图标与提取出来的视觉符号很难完全结合时,那就不要去强行结合,只要大体调性是对的就ok,比如“扫一扫”的图标,最开始我就强行使用了一个10px的圆角和三个2px的圆角,如下图:

经验分享|利用品牌基因法进行图标设计

2. 制定好断线及粗细规范

制作断线的时候,一定要定好断线的规则,比如说我在做这套图标的时候,我会以50x50px的大小来绘制图标,线条描边是2px,所有断线的开口大小为10px,所有的断点要在大圆角拐角处破开(圆形图标除外),有了这些规则之后,才能够保证你输出的图标统一、规范!

3. 图标的特征不要太多

我这一套其实是有一点点复杂的,因为它同时拥有三个属性,分别是不同大小的圆角、双色和断线,正常来说有1-2个特征就可以了,不然可能会让图标显的过于繁琐,所以大家在作图标的时候,这一点可以斟酌一下!

好了,以上就是本期分享的《利用品牌基因法进行图标设计》,希望能对大家有所启发!

看文章,你需要取其精华去其糟粕,不断的将精华内容纳入到自己的知识体系当中,不然……你懂得,科科!

#专栏作家#

菜心(微信号:18588404451  微信公众号:菜心设计铺),人人都是产品经理专栏作家,华为ITUX用户体验设计师(主视觉),3年工作经验,参与华为Welink、3MS、连长社区等多个项目的用户体验设计工作。欢迎大家互相交流关注。

本文原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/23871/

logoUX产品产品经理体验设计分享品牌基因品牌基因法图标图标设计微信灵感用户用户体验用户体验设计用户体验设计师经验经验分享经验总结视觉设计设计师转载
赞 (0)
CatherineCatherine
0
生成海报
APP设计:那些打动人心的设计点(一)
上一篇 2017-05-06 21:11
Stack自动布局:Sketch中的Flexbox
下一篇 2017-05-06 22:56

相关推荐

  • QQ音乐年终盘点H5设计总结:音乐与色彩的次元幻想 交互设计

    QQ音乐年终盘点H5设计总结:音乐与色彩的次元幻想

    2016年是一个H5满天飞的年代,如何在众多牛气的H5中脱颖而出,留住用户关注和让朋友圈永无休止的不停传播呢?这也是一枚骚气且不隐忍的运营设计师一直研究琢磨的课题。这里拿QQ音乐年终盘点H5为例来解析下我对H5的次元幻想。

    2017-05-07
  • 超实用的格式塔原理小科普 交互设计

    超实用的格式塔原理小科普

    在界面排版,网页广告设计等视觉传达设计工作中,视觉上的画面琐碎,零散,信息混乱无序总是视觉设计师无可避免的问题。

    2017-06-02
  • 如何建立真诚的用户界面 交互设计

    如何建立真诚的用户界面

    给用户控制权并展现产品界面的“诚意”,才能维持和用户之前的信任感。

    2017-04-28
  • 不扁平的设计:我们的世界没有一处是光滑和平整的 交互设计

    不扁平的设计:我们的世界没有一处是光滑和平整的

    “当我们在思考一个问题的时候,我们需要开放模式;但一旦我们找到一个解决方案,我们必须切换到闭合模式去实现它”

    2017-05-25
  • 从零开始学交互

    交互设计中,你不可不知的八个度

    数十万互联网从业者的共同关注!作者:李煜佳,华为交互设计师。专注于用户体验及服务设计,擅长设计分析、交互设计、细节体验提升等工作。作者原创并投稿早读课发表,转载请联系作者。欢迎投稿到早读课,投稿邮箱…

    2017-08-01
  • 微信热点

    全面掌握算法交互设计,你的设计你做主

    在OF COURSE学习最纯粹的创意编程Processing生成艺术进阶课程全面掌握算法交互设计12周成为顶尖设计师👇△课程介绍《Processing&OF算法交互线上课程》你将要学习的第一部分:培养算法创造能力,学习运用高级算法模拟真实环境中的自然变化。第二部分:理解并掌握算法交互的原理。第三部分:培养软硬件结合能力,学习使用手部识别设备Leap motion、体感识别摄像头Kinect和算法的交互。第四部分:运用openCV计算机图...

    2018-04-08
  • 微信热点

    创先争优|张迪:创业艰难,但梦想会让你永远保有对生活的热爱

    争先创优为全面贯彻党的教育方针,鼓励研究生勤奋学习、自强不息、积极实践、勇于创新,促进优良校风学风建设,培养德、智、体全面发展的高层次复合型人才,学校结合实际,研工部于2017年10月-11月组织开展了重庆大学2016至2017学年度研究生“争先创优”评选。为响应学校号召,UMD研究生网络文化工作室根据工作安排,特推出重庆大学“争先创优”优秀研究生人物志系列活动,从中挑选一批先进研究生代表,通过微博、微信、网站、电子显示屏等网络宣传平台...

    2018-03-01
  • 7种诀窍,创造利于记忆的用户体验 交互设计

    7种诀窍,创造利于记忆的用户体验

    了解记忆的工作原理,设计师可以创造出以人为本的界面,迎合用户这种与生俱来的能力,节约他们的精力,提升可用性。

    2017-04-27
  • 谈谈(web)网页设计中的留白原理 – 2016版 交互设计

    谈谈(web)网页设计中的留白原理 – 2016版

    设计中存在很多关于留白的只是,零零散散在网上也看过很多,总感觉比较零散,自己根据自己的感觉,重新把留白的原理和一些技巧系统的归纳整理了以下,也对自己的一个提升。分享给大家。

    2017-05-28
  • 能够带来更好体验的“浅交互设计”,是对人机交互设计方式的全新思考 从零开始学交互

    能够带来更好体验的“浅交互设计”,是对人机交互设计方式的全新思考

    原文地址:https://www.smashingmagazine.com/2016/03/getting-disconnected-shallow-interaction-design-deeper-human-experiences/本文由设计夹设计研究小组 成员杨梦龙翻译校对我们的一切都被连接起来了。我的手…

    2017-08-02
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress