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

升级篇:利用品牌基因法进行图标设计

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

图标设计如何具有品牌性?这可能是设计师工作中经常会遇到的问题。但很多新人也许并不了解什么是品牌性,更不知道如何将品牌性融入到图标当中,不过没关系,看了这篇文章你就不会那么困惑了!

文章目录[隐藏]

  • 1. 提取特定形状
    • 1.1 直接应用
    • 1.2 做为外轮廓
    • 1.3 将图形与图标巧妙融合
  • 2. 吸取品牌颜色
  • 3. 抓取风格特点
    • 相关阅读
    • #专栏作家#

图标设计如何具有品牌性?这可能是设计师工作中经常会遇到的问题。但很多新人也许并不了解什么是品牌性,更不知道如何将品牌性融入到图标当中,不过没关系,看了这篇文章你就不会那么困惑了!

升级篇:利用品牌基因法进行图标设计

前一阵子写了一篇《利用品牌基因法进行图标设计》,但只讲了一种提取视觉基因的方法,不够全面。菜心担心大家因为方法的不全面而导致设计效果过于死板,所以近期将整个品牌基因法的体系重新梳理了一遍,增加了一些提取基因的路径,可以扩展我们的设计思维与制作方法。

需要强调一点,文中所讲的品牌基因是指视觉上的哦!

来看下大纲:

  1. 提取特定形状
  2. 吸取品牌颜色
  3. 抓取风格特点

1. 提取特定形状

通过对logo或品牌元素提取特定形状,这个形状是固定的、具象的,例如圆形,三角形、字母甚至是logo本身等等。

提取出形状基因后,如何与图标相结合呢?有三种方法:

1.1 直接应用

最常见的用法就是直接将整个logo作为图标(比如首页),如下图:

升级篇:利用品牌基因法进行图标设计

再比如MONO的标签栏图标,设计的非常大胆,提取logo上面的4个字母——M、O、N、O后,直接将其作为图标,如下图:

升级篇:利用品牌基因法进行图标设计

但是这种方法还是有很大的风险,因为毕竟每个字母与功能本身的含义没什么联系,如果不是非常个性化的app,还是尽量少用吧!

1.2 做为外轮廓

将提取的形状作为整套图标的外轮廓,例如谷歌play一样,提取出三角形后,整套图标都是以三角形作为外形,如下图:

升级篇:利用品牌基因法进行图标设计

再比如你提取出一个圆形基因,也可以将其作为外轮廓使用,如下图:

升级篇:利用品牌基因法进行图标设计

1.3 将图形与图标巧妙融合

假如我在logo上面提取出一个圆形作为基因,我们可以将这个圆形巧妙的与图标进行融合,如下图:

升级篇:利用品牌基因法进行图标设计

但这里必须要强调一点,很多时候,我们很难将一个特定形状融入到所有的图标当中,如果强行融合,难免会让人觉得死板生硬,所有一定要有所取舍,例如案例中的图标也不是所有都融入了圆形,如下图:

升级篇:利用品牌基因法进行图标设计

有同学可能会问,为什么案例中有些图标没有融入圆形基因,也不影响整套图标的和谐统一呢?

因为它们融入了另外一个品牌基因——颜色。也就是我们接下来要讲的内容。

2. 吸取品牌颜色

这招是最简单直接的方法,直接吸取品牌色作为视觉基因,以此来进行图标设计,举几个例子:

升级篇:利用品牌基因法进行图标设计

升级篇:利用品牌基因法进行图标设计

颜色基因,我就不多讲了,比较容易理解。

但是大家仔细观察优酷这套图标,我们会发现除了颜色基因以外,好像在logo上还提取了一个叠层的效果,而这种叠层的效果又属于另外一种品牌基因——风格特点,我们继续往下看。

3. 抓取风格特点

这部分是今天内容的重点,也是我最近做图标的一些感受。

我们先来讲讲如何抓取风格特点!

又要开始拿我的作品来举例了,还是iwork那个logo:

升级篇:利用品牌基因法进行图标设计

除了颜色以外,我在logo上面提取出两个特点:

  1. 断:是指整个logo有两个断开的地方
  2. 层:是指logo有三个不同颜色的深浅,形成前后关系,也就是层级。

那如何将这两个特点运用到图标上呢?我们看下图:

升级篇:利用品牌基因法进行图标设计

  • 第一步:先画好基础形;
  • 第二步:将合适的地方断开;
  • 第三步:将局部(小块)调整颜色,以区分层级。

这样一个具有品牌基因的图标就诞生了!

其它的图标也是一样的道理,最后得到整套图标如下图:

升级篇:利用品牌基因法进行图标设计

上面这个案例只是抓取风格特点的一种结果,不同的案例会有不同的结果,例如网易云音乐的图标,是抓取logo上圆润的风格特点,如下图:

升级篇:利用品牌基因法进行图标设计

而优酷的图标则是抓取叠层的风格特点,如下图:

升级篇:利用品牌基因法进行图标设计

小密圈则是抓取断线的风格特点,如下图:

升级篇:利用品牌基因法进行图标设计

以上就是菜心近期总结的《品牌基因法做图标》整套知识体系,后期会不断的优化改进,如果你有什么好的想法也欢迎和我私下交流,我们一起将这个系统完善起来,帮助那些需要帮助的好朋友们。

最后再提醒大家一下,当一种品牌基因无法突显品牌性的时候,我们可以使用多种基因相互组合。方法一定要灵活运用,切记不要钻牛角尖,不然菜心就白总结了!

相关阅读

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

#专栏作家#

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

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

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

logoUX产品产品经理体验设计分享品牌基因法图标图标设计微信案例分析用户用户体验用户体验设计用户体验设计师经验经验分享视觉设计设计师谷歌转载
赞 (0)
CatherineCatherine
0
生成海报
我花了20个小时研究3个按钮
上一篇 2017-05-04 05:01
需要产品经理用心做好的交互体验:「开关」
下一篇 2017-05-04 07:08

相关推荐

  • 百货类微信服务号改版:一个“失败”的设计案例? 交互设计

    百货类微信服务号改版:一个“失败”的设计案例?

    整理了一个售前项目的案例,重新绘制了36个原型页面,1张思维导图,3张流程图,2张对比图,1张结构图,介绍一家百货购物中心微信服务号改版的设计。

    2017-05-07
  • 40个创意单页面网站设计 交互设计

    40个创意单页面网站设计

    Web设计灵感总是帮助我们走在新趋势, 设计结构、颜色和总体设计过程。有很多灵感的网站列出的主题就是我想要这一个是不同的。所以在这个今天的帖子我收集了40个创意单页面网站设计欣赏,为你找设计的灵感。

    2017-06-03
  • 交互设计师如何设计复杂信息架构产品 交互设计

    交互设计师如何设计复杂信息架构产品

    最近忙于一个技术平台类项目,信息架构非常复杂,所以想写一些关于设计复杂信息架构产品的想法和经验。 我们做产品设计的设计师日常工作粗略分一下,可以分为两类,一类是ToC产品,面向消费者的产品,一类是ToB产品…

    2015-04-06
  • 柴静是个好的产品经理 交互设计

    柴静是个好的产品经理

    这几天,柴静刷屏,有捧有踩。但是从创业者的角度,谨以此文向由文艺青年找准路线之后成功转型的优秀代表柴静,她不仅是一位优秀的新闻工作者,还是一位极好的产品经理。 她做了一个很好的示范,互联网的时代如何打…

    2015-03-05
  • 打造一个平台的用户体验,从需求方和供给方入手 交互设计

    打造一个平台的用户体验,从需求方和供给方入手

    这几年做平台,我一直在思考平台的价值究竟是什么?后来我认识到:满足供需双方的需求,提供超越传统线下方式的用户体验,就是平台的价值。平台圈住的用户并不是它的价值,而是因为这个平台具备价值,所以用户愿意留在这个平台上。

    2017-05-11
  • 减少认知过载:塑造更好的用户体验 交互设计

    减少认知过载:塑造更好的用户体验

    设计不是美工,想成为优秀的设计师怎么能不懂点心理学?文章从认知心理学角度下手,分析了在交互设计过程中时常会犯得几种错误,一些平时稀松见惯的设计方式也都在这儿找到了比较理性的依据。设计是门科学,我们需要掌握一些方法论,以不变应万变。

    2017-05-11
  • 交互设计的三个半原则 从零开始学交互

    交互设计的三个半原则

    一些设计的基本原则往往是通用的、甚至可以说放之四海皆准的,例如优先级、一致性、界面的隐喻等等,好的设计都需要考虑到这些问题,甚至再更广的范围内也同样适用,而不仅仅是交互设计范畴。一个设计师&产品经…

    2017-08-01
  • 功能确定之后,如何做好产品的交互设计? 从零开始学交互

    功能确定之后,如何做好产品的交互设计?

    功能和数据都确定下之后,接下来我们就要把功能数据给设计出来,也就是决定它们长啥样,怎么操作的。如果说前面的分析研究、需求定义、功能数据确定是“做正确的事”,现在开始我们就要“正确地做事”,方向抓准了,我…

    2017-08-03
  • 同一个人的微博,首页连续出现48条是怎样的体验? 交互设计

    同一个人的微博,首页连续出现48条是怎样的体验?

    如果你是微博的轻度用户,可能偶尔觉得刷出来的内容有些不对劲;而如果你是微博的重度用户,那你很可能觉得微博的 timeline 有时候刷的很不爽。

    2017-05-14
  • 微信热点

    交互设计之流程设计(1)

    流程设计是将信息架构转变为交互稿的重要步骤,什么是流程设计呢?简单来说,就是用户完成一项任务的步骤流程,用户是怎样一步一步的完成任务的。本文将从流程设计重要性、如何进行流程设计、流程设计与交互工作三个方面来阐述流程设计。一、流程设计的重要性流程设计对于用户体验来说非常重要,一个好的流程设计将会给用户带来非常的体验。在这里从流程设计是什么、流程设计中需要考虑的问题、优秀流程设计的好处三个方便来进行讲解。1 流程设计是什么首先理解交互设计是...

    2018-05-06
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

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