大厂是如何做视觉设计的?来看腾讯实战案例的完整流程!

释放双眼,带上耳机,听听看~!
本篇主要介绍腾讯工业云渠道 WeMake 主页主视觉及二级页视觉部分的规划内容,重点讲解了工业渠道从 1.0 到 2.0 的视觉迭代进程和使用的方法。

本篇首要介绍腾讯工业云渠道 WeMake 主页主视觉及二级页视觉部分的规划内容,要点讲解了工业渠道从 1.0 到 2.0 的视觉迭代进程和运用的办法。

大厂是如何做视觉设计的?来看腾讯实战案例的完整流程!

大厂是怎么做视觉规划的?来看腾讯实战事例的完好流程!

规划布景

1. WeMake 渠道介绍

腾讯云工业云 wemake 渠道是腾讯工业互联网的重要组成部分,致力于为企业供给端到端的云服务,掩盖规划、研发、生产、出售等环节;供给工业 APP 运用商场,供给有职业竞争力的 APP 商场。在工业互联网场景,腾讯云供给了工业才能底座,构建出面向数据智能、物联网、工业 AI、5G、协同办公等中台才能。

2. 规划回溯

此次规划晋级首要目的为依据 1.0 的视觉根底上探求工业云的规划方向和进步渠道的全体视觉作用以及标准标准化落地。

大厂是如何做视觉设计的?来看腾讯实战案例的完整流程!

大厂是怎么做视觉规划的?来看腾讯实战事例的完好流程!

依据烟台工业云 1.0 的页面进行视觉探求,烟台工业云规划于 2019 年头,也是对于工业互联网中的工业互联网渠道进行的初步探求,而此次晋级则是更深化的探求工业互联网渠道的视觉方向可能与视觉进步的探求。工业项目的时刻是耗时很长的,打通数据与功用需求阅历时刻的验证,但是本次视觉规划的使命是探求更前沿的规划趋势,能够坚持渠道在持久安稳的状况。

3. 规划思路

经过 1.0 渠道的经验,进行 2.0 视觉风格的递进晋级。1.0 的探求阶段视觉上以资料为主来深化工业渠道的全体形象,在 3D 塑造方面也供给了一个方向性探求,那么 2.0 视觉风格也是以 3D 视觉的深化来进行了。除了在视觉层次上的进步外,也希望在视觉系统化和标准化上有新的发展,以便渠道树立完结后续的运营作业的顺利开展。

大厂是如何做视觉设计的?来看腾讯实战案例的完整流程!

大厂是怎么做视觉规划的?来看腾讯实战事例的完好流程!

规划剖析

渠道规划中,首先的规划要点是渠道主页的视觉晋级;主页的视觉体现就像是两个人相识,和碰头第一印象一样重要。那么关键因素也是要给对方留下深刻印象和特色。

1. 发现规划问题

发现问题是早期规划剖析中很重要的一个环节,为了更系统、全面的发现问题,在剖析进程中采用了对应产品 5 个层次的办法。如下图:

大厂是如何做视觉设计的?来看腾讯实战案例的完整流程!

大厂是怎么做视觉规划的?来看腾讯实战事例的完好流程!

而集中在视觉体现层的首要问题如下:

  • 视觉感触偏灰,智能化体现不足
  • 版面过于呆板,主页视觉精细度不行
  • 颜色调配过于单调
  • 工业渠道特征不行杰出
2. 确立主页优化方针

经过发现的界面问题的剖析,确立主页优化的方针。从现有的问题中,咱们要构成新的视觉感触,那么就要确认解决目前问题的规划方针。为了塑造 wemake 的工业制作的渠道,设立的规划方针分别是深化品牌、强化智能、杰出职业。

大厂是如何做视觉设计的?来看腾讯实战案例的完整流程!

大厂是怎么做视觉规划的?来看腾讯实战事例的完好流程!

3. 用户剖析

工业渠道的用户集中在企业决策人阅读和运营方运用人员运用。此类用户特色是年龄根本在 30 以上,更偏好沉稳的科技风。规划中,咱们需求给用户传递的是“安全”、“信任”、“价值”、“沉稳” 。

  • 安全:安全是工业云渠道的根底,重视数据安全性和渠道安全性是首要方针,也是用户最看重的根本要求。
  • 信任:渠道需求传递给用户值得信任的感触;其能够拆解为品牌影响力和产品影响力。
  • 价值:渠道需求传递给客户最大的价值是功用和体会上的高效性。
  • 沉稳:渠道需求在风格上传递沉稳的感触。

大厂是如何做视觉设计的?来看腾讯实战案例的完整流程!

大厂是怎么做视觉规划的?来看腾讯实战事例的完好流程!

4. 规划关键词

头脑风暴

经过用户剖析及结合产品功用特色,整理规划关键词:以“智能”“制作”发散扩展,展示腾讯云技能才能“数字化”“AI”等 ;展示职业特性“安全”“安稳” 等。

大厂是如何做视觉设计的?来看腾讯实战案例的完整流程!

大厂是怎么做视觉规划的?来看腾讯实战事例的完好流程!

关键词提炼

经过一系列的关键词和职业特性,咱们从工业数字化生产的核心“智造” 作为第一个关键词 ;从决策链路和用户剖析咱们总结了第二个关键词“安全”;依据渠道工业生态树立的愿景和定位,咱们总结了第三个关键词“链接”。

大厂是如何做视觉设计的?来看腾讯实战案例的完整流程!

大厂是怎么做视觉规划的?来看腾讯实战事例的完好流程!

心情版

心情版的目的是辅助展示终究视觉表达作用,协助规划师找到适宜的视觉演进方向。此次项目中心情版关键词“工业”找出工业生产和制作的实践场景,感触实践的工业职业气氛,“数字化”偏重智能视觉的展示,捉住心情版中点线面、空间以及颜色的智慧智能化表达。

大厂是如何做视觉设计的?来看腾讯实战案例的完整流程!

大厂是怎么做视觉规划的?来看腾讯实战事例的完好流程!

主视觉风格设定

1. 主视觉风格设定

主视觉设定思路:工业元素为根底,增加数字化元素表达。banner 主视觉以主体型+布景的方式统一化表达;树立渠道统一化视觉根底;调理不同主图形来表达不同二级页内容。

视觉转化

咱们经过解构的手法来拆解视觉元素和进行视觉转化;视觉转化是很重要的一个过程,经过规划剖析的定论要经过视觉转化来完结视觉的表达。也就是将关键词转化为原料质感颜色等视觉出现上的关键词。例如“工业”的关键词转化为原料,能够考虑到大部分工业的场景中视觉最多的会是金属和水泥,也就是这两种原料会在视觉上关联关键词。运用这种办法进行逐步推导转化。

大厂是如何做视觉设计的?来看腾讯实战案例的完整流程!

大厂是怎么做视觉规划的?来看腾讯实战事例的完好流程!

大厂是如何做视觉设计的?来看腾讯实战案例的完整流程!

大厂是怎么做视觉规划的?来看腾讯实战事例的完好流程!

经过视觉转化,先确认颜色和份额,为全体视觉奠定根底基调。

大厂是如何做视觉设计的?来看腾讯实战案例的完整流程!

大厂是怎么做视觉规划的?来看腾讯实战事例的完好流程!

视觉体现方式

在确认原料颜色后,还需求确认视觉体现方式;需求从很多的视觉体现方式中寻觅剖析其特色并结合产品特色找寻适宜的体现方式。

大厂是如何做视觉设计的?来看腾讯实战案例的完整流程!

大厂是怎么做视觉规划的?来看腾讯实战事例的完好流程!

大厂是如何做视觉设计的?来看腾讯实战案例的完整流程!

大厂是怎么做视觉规划的?来看腾讯实战事例的完好流程!

视觉元素

质感、颜色、方式确认后,那么最首要的“形”的选取也是很重要的;形也能够总结为视觉元素,是视觉的实践组成部分,不同的视觉元素经过规划师大脑对于美学的排列组合构成了终究的视觉出现方式。举例“机械臂” 既能展示“机械”的元素关键词,也能够体现工业机械的原料,也能够体现现代工业的智能化。

大厂是如何做视觉设计的?来看腾讯实战案例的完整流程!

大厂是怎么做视觉规划的?来看腾讯实战事例的完好流程!

2. 视觉探求

在进行视觉履行的进程中,必定不是一蹴即至的,而也是演进的调整的。视觉元素的出现份额和主次层级也需求不断探求比照而演进的。工业的视觉探求进程就是在不断的调校中进行的。

大厂是如何做视觉设计的?来看腾讯实战案例的完整流程!

大厂是怎么做视觉规划的?来看腾讯实战事例的完好流程!

咱们最早介入规划的时分会以互联网化的思想进行,要点杰出智能化主体,但就会缺少显着的职业特性,不能彻底满意规划方针;下一个阶段就是融入工业场景,将更多的工业元素融入到布景中;再下一个阶段是考虑渠道的属性,需求更加微观的视角,而不仅仅是偏重在细微场景中,所以采用更大的区域工业场景来展示渠道属性,并尝试平行透视来展示微观场景。终究在融合了品牌和多元素下构成了终究的精细化主视觉。

大厂是如何做视觉设计的?来看腾讯实战案例的完整流程!

大厂是怎么做视觉规划的?来看腾讯实战事例的完好流程!

大厂是如何做视觉设计的?来看腾讯实战案例的完整流程!

大厂是怎么做视觉规划的?来看腾讯实战事例的完好流程!

3. 主视觉计划

终究的主视觉计划贯穿“less is more”的理念,经过削减草案中视觉内容,集中展示各视觉元素的方式,使终究计划更杰出。并且在进行视觉探求后,进行全体的视觉感触的调整:弱化调理激烈的工业场景感触,强化智能化数字渠道感触,添加了虚拟化数字界面的规划。

大厂是如何做视觉设计的?来看腾讯实战案例的完整流程!

大厂是怎么做视觉规划的?来看腾讯实战事例的完好流程!

主视觉规划元素和颜色调配依照之前剖析的颜色和元素进行履行。

大厂是如何做视觉设计的?来看腾讯实战案例的完整流程!

大厂是怎么做视觉规划的?来看腾讯实战事例的完好流程!

视觉比照

以下是 1.0 和 2.0 的主视觉比照。总结一下,比较重要的改善点是工业颜色的调整,使其更符合工业职业的特性,并在主视觉上深化细节规划。

大厂是如何做视觉设计的?来看腾讯实战案例的完整流程!

大厂是怎么做视觉规划的?来看腾讯实战事例的完好流程!

视觉延伸与标准

作为渠道的规划,很重要的一点就是考虑渠道的视觉统一化规划,也是在主视觉完结后需求完善的要点内容。

1. 视觉统一化

统一化几乎是所有渠道最根底的方针也是最难以履行好的规划方针,咱们经常会头疼于怎么将视觉统一化。那么最简单的办法就是在最开端规划的时分将统一化考虑在内。视觉统一化的一大难点是差异化与统一元素的协调性;既要完结视觉的统一表达,又要有差异化表达。那么在进行工业渠道二级页面主视觉统一化的时分,咱们的规划思路是保存共同的根底布景和主体元素,然后加入不同页面差异点的视觉元素,终究构成能够统一化的视觉表达。

大厂是如何做视觉设计的?来看腾讯实战案例的完整流程!

大厂是怎么做视觉规划的?来看腾讯实战事例的完好流程!

在进行视觉履行的时分,需求光感、空间感。原料质感统一;杰出特性元素。

大厂是如何做视觉设计的?来看腾讯实战案例的完整流程!

大厂是怎么做视觉规划的?来看腾讯实战事例的完好流程!

2. 规划延展战略

作为渠道,其视觉的是具有很强的丰富性的,怎么构成统一的视觉系统,并进步视觉作用与履行功率也是要考虑的重要难题。那么在考虑这部分的时分,咱们的战略是树立资料库来满意不同的多维需求。在 3D 模型能够复用的情况下,既能够满意统一性需求,也能够进步履行功率。但是资料也是需求长时间堆集而成的。

大厂是如何做视觉设计的?来看腾讯实战案例的完整流程!

大厂是怎么做视觉规划的?来看腾讯实战事例的完好流程!

3. 视觉标准化

在视觉树立的进程中也要考虑到视觉标准化,也就是统一的视觉表达与标准的视觉言语出现,在后续的规划协作以及规划复用时,供给有用的参阅。

大厂是如何做视觉设计的?来看腾讯实战案例的完整流程!

大厂是怎么做视觉规划的?来看腾讯实战事例的完好流程!

结语

渠道类视觉迭代的进程中,除了要考虑履行层的内容还需求规划渠道全体视觉风格甚至是规划言语。规划进程中不仅仅要专心于视觉层面的履行和推导,也要考虑到终究视觉感触的全体感;终究也是需求精细化调整不同关键词的份额来达到终究平衡的视觉作用。

优设引荐关注“腾讯规划”官方大众号,第一时刻获取腾讯的规划办法论

大厂是如何做视觉设计的?来看腾讯实战案例的完整流程!

大厂是怎么做视觉规划的?来看腾讯实战事例的完好流程!

给TA打赏
共{{data.count}}人
人已打赏
教程分享

有哪些组件值得学习?我梳理了8个大厂的设计组件!

2021-9-8 17:28:59

教程分享

Windows 11全新设计语言如何引领设计新趋势 ?(附源文件下载)

2021-9-13 17:26:47

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索