• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 如何找到改版的切入点?我用「品牌探索」这个方法!

如何找到改版的切入点?我用「品牌探索」这个方法!

作者:菜心设计铺 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含ICON,品牌,品牌基因法,品牌设计,图标优化,图标设计,经验分享等相关知识,菜心设计铺希望在学习及工作中可以帮助到您

@菜心设计铺 :前几天做了《暴风影音 App 重设计》,不过还没做完,所以今天主要讲讲我寻找改版切入点的方法——品牌探索。

到底品牌探索能给我们带来什么?真的能指导我们做设计吗?看完这篇文章估计你就能略懂一二了。

先来看下我寻找改版切入点的大纲吧:

  • 体验产品和竞品来发现问题
  • 品牌探索寻找切入点
  • 结合切入点进行优化
  • 突破自己做点不一样的

1. 体验产品和竞品来发现问题

做改版一定是基于某些问题的,而发现问题的方式有很多种,例如用户反馈数据,产品的发展战略、竞品分析、流行趋势等等。

我这里用到的方法就是通过体验产品和竞品来发现问题,今天拿图标来举例。

上图是暴风影音 APP 原版图标,问题如下:

  • 图标无明显性格,同质化严重,没有体现暴风影音的情感诉求。
  • 直角、圆角不统一。
  • 图标的渐变柔合度不够自然。

以上就是我发现的关于图标部分的问题。

2. 品牌探索寻找切入点

有些人可能会疑惑,到底品牌探索是做什么啊?其实就是看看企业的历史、理念、产品、官网、最近的动态,只要你用心去寻找,一定能发现一些指导你设计方向的内容。

比如,我在搜索资料的时候就发现,2017年,暴风集团的 logo 改版了:

从 logo 的改版上,我发现了几个小细节:

  • 简约,logo 去掉了部分细节,使其更加简约。
  • 尖角,某些圆角变成尖角,虽然不是纯尖角,但整体看起来感觉更加方正、干练。

官方文章的说法是使 logo 更有科技感,时尚感。

原来的图标没有调性,而企业 logo 的改版已经给了我们明确的调性和方向,我们可以顺着方向提取一些关键词:

这不就是很好的切入点嘛。

3. 结合切入点进行优化

结合上面提炼的几个关键词和原版图标的问题,把之前的图标变得方正(科技)、简约(时尚)、渐变柔和(这是基本要求)一些。

改版前:


改版后:

这里只能给大家提供一个思路方法,至于执行力,并不是看几篇文章就能解决的,只能靠我们自己多多练习了。

4. 突破自己做点不一样的

做到这里,虽然图标有些调性了,但还不够特别,这里就是难点了,突破自己的关键也在这里。如何能做出点不一样的感觉呢?这时候我们还是要从品牌出发,继续探索。我发现企业的 VI 系统中有这样一个辅助图形:

于是我提取出关键词——直线。

可是怎么能融入到图标设计当中呢?经过多次尝试后,最后以角度渐变的这种方式来融入刚刚提取的「直线」概念。

最终效果如下:

最后

寻找改版切入点的方式有很多种,这里仅仅只是介绍了一种,希望能对大家的思路有所启发。

记住,刚才提取的方向、元素、性格都是可以贯穿整个改版设计的。例如那个 VI 的辅助图形,是不是就可以用到标签按钮的背景上,增加一些独特性,而这些独特性都是根据品牌而来,不是凭空捏造,如下图:


还有提取矩形的元素是不是可以贯穿整个 app 设计,例如上图和下图,你都可以看到矩形的元素。

可以用到的地方还有很多,后面等我把其他界面优化完,继续和大家分享。

欢迎关注作者的微信公众号:「菜心设计铺」

「用品牌基因法做设计」

  • 《用品牌基因法,三步帮你搞定图标设计!》
  • 《用品牌基因法做图标设计,这是高级UI设计师才会的手法!》
  • 《用品牌基因法做图标设计,高级UI设计师才会的手法!(升级篇)》
  • 《用品牌基因法做图标设计,高级UI设计师才会的手法!(实战篇)》
  • 《网易资深设计师:视觉设计如何继承品牌基因?》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 关于favicon.ico的两三事(最好就是放根目录)
  • 为网站设置icon图标用于显示在浏览器标签页最左侧
  • 网站图标Icon添加方法!
  • 如何绘制功能性图标?来看资深设计师的全面总结!
  • 如何系统学习功能图标?来看资深设计师的全面总结!
  • 腾讯设计师总结的图标设计五维自检法
  • 超实用的扁平图标绘制终极指南!
  • 如何画好一组线性图标?来看这份新手科普总结!
  • 超全面的图标基础知识总结
  • 腾讯设计师:如何系统地设计界面图标?

相关文章

  • 2018-08-23用好这5个广告文案妙招,最纠结的用户也会被你打动!
  • 2018-08-23谷歌产品设计的秘诀:2017年你最应该掌握的设计方法
  • 2018-08-23如果你正在设计原型,这4个图片占位符工具别错过
  • 2018-08-23超全面!从0到1正确开启UX项目的方式
  • 2017-08-06在新窗口打开的跳转菜单 window.open使用介绍
  • 2018-08-23超实用!12 条提高产品可用性的动效设计原理(附案例)
  • 2017-08-06flex程序Firefox下中文输入乱码的bug
  • 2018-08-23看似简单的喜马拉雅FM主播等级体系,是如何做改版设计的?
  • 2018-08-23网易用研:超全面的语音交互知识科普
  • 2018-08-23近万字干货!可能是最全面的交互基础知识总结

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 50个漂亮的FLASH网站设计实例
    • 老板让我点评这个UI设计,但我不知道从哪说起…
    • 5个步骤实现响应式Web设计方法 与瀑布模式说”再见”(图文教程)
    • 这个博主靠P图收获了100多万粉丝,原因竟然是…
    • 怎样让一个div高度自适应浏览器高度
    • Google对话式交互规范指南(三):设计原则与方法
    • 进阶好文!如何把那么多经典的设计模型用起来?
    • UI实战教程!从零开始做APP 系列之界面设计篇
    • Git diff 比较两个版本的差异的常用命令格式
    • 5个实操改稿案例,教你做出高质量的Banner设计!

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有