搜狐视频V6【ICON篇】

 

搜狐视频V6新版终于上线啦,新版的设计突出了艺术、品质、效率。icon的设计采用了线性、简洁、黑白的风格。...





经过几个月的努力搜狐视频客户端V6全新上线,改版之后带来了愉悦与舒适的体验以及和用户的共鸣,此次改版中图标的视觉升级在众多app中脱颖而出,那么其中的图标设计背后表达的是什么呢?这个项目的制作过程又是怎样的?下面和大家一起聊聊6.0图标的设计思路。

对于V6我们全心为所有icon进行了再设计,以往纯文字的频道入口都以icon配文字来呈现,让信息更高效更直观的传达给用户。本着“丰富,时尚,简洁,有趣” 的设计初心,开始为本套图标进行了全新的设计。

需求分析
在开始项目之前我们对之前的版本进行了一系列用户调研,用户给出了自己的使用搜狐视频客户端的印象“淡雅,抽象,表意不明,单调”。将问题进行归纳分析,结合搜狐视频独特的设计语言开始设计初步优化方案。
前期调
带着用户对产品的期望,开始对后续的视觉设计进行灵感收集,归类整理。目前行业内比较流行的图标设计风格进行了分析,得出用户偏好方案的大致理由总结为:

  • 清晰、易识别、表意明确
  • 简洁、趣味、产生共鸣
  • 个性,整体,品牌传递


绘制草图
图标的三个主要特性:形状,视觉统一和可识别性。在设计过程中,这三个特性是设计师需要反复考虑的。即使我们在设计单个图标的时候,这三个特性也要牢记着。当然图标不是仅仅这三个特性,但是这些特性可以帮助我们很快的提高自己的图标设计水平。有了灵感之后开始绘制草图,视觉化表现创意,同时进行快速头脑风暴,层层筛选,选择最合适的一个进行深度雕琢。

设计风格
一个优秀的icon必须抽丝剥茧,把不必要的细节去除掉,同时又不能过于抽像。根据极简风界面的设计风格,我们尝试了不同的设计方向。

风格活泼有个性,但色块的面具居大。





画面留白、简洁、优雅,也因此过于细碎,不够整体。

颜色丰富、富有活力,然而大面积使用会过于花哨。





延续了品牌特征,设计能保持整体及延展性。



颜色标准
icon颜色以搜狐视频品牌色红黑为主,突出品牌特色,增强辨识度一致性



设计创意
图标除了表达产品逻辑之外,还往往体现了设计师的情怀。这就是所说的创意。选用什么样的元素变形可以更好地突出主题呢?

我们的思路是:收集想法—产生联想—进入创造—联想图案。比如根据“内地”这个关键词进行的相关联想!

经过分析筛选后,联想了很多关于内地的设计元素!比如有代表性的天安门建筑,内地电视剧《还珠格格》,可以脑补出一堆设计相关的词,其中的一个设计方案选取了尔康的形象创意,最终设计出方案!

规范设计
形状是一个图标的基本结构,相当于图标的骨架。主要的几何形状:圆形,矩形和三角形构成了图标设计的视觉基础。通过圆形,矩形和三角形等进行切割,运行布尔运算。我们通过建立网格来帮助我们在每个图标的设计中创建基本样式。




所谓“无以规矩,不成方圆”,网格对图标的规范化设计有着极大的“约束”作用。正方形图标大部分情况都会处于网格的中心位置,为了保持与圆形和三角形一致的视觉权重,我们可以通过使用参考线将图标保持在网格的核心区。每个图标的核心区都是由它自身的视觉权重所决定的。让图标本身的视觉重量去决定怎么去对齐这些轮廓线,调整后的垂直和水平方向的矩形与网格的关系,线的粗细和角度等,要用严格的数字去定义它们。



我们总结了这三点展开了整套图标的设计。

简化:使用简化的基本形状,并让icon的表意更清晰,用户很自然能理解,并想要和这些形状互动。

统一:颜色采用黑红品牌色,统一icon线条粗细以及表现形式,制定icon规范区域,让icon视觉上面积一致,也保证了用户可点击区域的大小。

情感:频道icon采取了微妙的圆角,目的是让用户觉得更容易亲近,浅灰色圆角背景让人感觉到很自然很平静。自媒体icon添加了微妙的红色色块,让icon更加有个性更自媒体。





每次图标设计都是一次新的挑战,除了要表达出表面的含义,也要符合实质内在的含义。

设计的时候也从里里外外不断的挖掘信息,思考如何才能最切实的表达。对于每一个图标象设计,都应反复思考和打磨,只为给用户呈现最佳的体验效果。考虑让形象如何融入产品,更好的丰富产品等等,树立一个鲜明的品牌形象。

“更多设计细节与创作流程后续情感篇会给大家讲解哦,敬请期待吧~”



最后最后!!我们这次为V6精选icon设计定制了一批贴纸 ,在公众账号中写下你对这次改版的意见和建议,我们会在留言公众账号的同学中,抽取幸运用户把贴纸包邮到你家,快来和我们的公众号留言吧!


    关注 搜狐视频UXD


微信扫一扫关注公众号

0 个评论

要回复文章请先登录注册