文末有视频一哦～是不是对于我们的内容有所期待了，直接进入正题，今天给大家分享的是产品设计升级的交互视觉设计、设计落地和验证优化部分。

视觉设计我们通过对当前线上官网的设计走查，发现整体架构布局、全局通用UI元素、以及业务统一模块都有很多优化空间。

官网设计升级，考虑更多的是网站整体共性的问题，设计方向和规范制定必须普适于各个频道和业务线，以设计解决业务问题，视觉容器应该尽量做轻、做通，以冷静、克制的“视觉语气”与用户对话。通过首页点击数据发现流量增长乏力的部分原因是信息内容过于单一，更新频率较低且占据页面过多展示空间，无法达到良好的转化，浏览路径过长同时也影响着用户浏览首页的效率。

因此在本次升级中，我们希望焕新设计风格，塑造更完整的品牌形象；满足业务及用户的诉求，优化内容框架布局提升转化及运营资源位置的曝光，让官网更加精简、高效、易用。根据这个方向，我们制定了4个设计理念：1，风格定义2，精简易用3，多端融合4，设计语言系统

定义色系：视觉传达是人与人之间“看”的形式所进行的交流，是通过视觉语言进行信息传达、情感沟通、文化交流的传播方式。用户打开官网，第一进入观感的往往是颜色，凭借色彩共识获得理解与互动。在官网设计升级过程当中我们也在不断的调试最适合京东智联云使用的颜色体系，更加突出品牌氛围、更加明亮、亲和。在颜色变化时需每位设计师对色彩高度敏感与把握，颜色使用不好，会使页面暗沉压抑不通透；使用好了，提升高级感，时尚而友好。色调的明暗变化也可以在一些操作功能上起到引导作用。

a.色调丰富、使用灵活的调色板

按钮颜色的明暗或深浅，增强点击引导，例如登录、弹窗按钮、咨询、关注等业务需重点引导的操作。我们也设定了文字链颜色使用，例如默认为黑，移入为蓝，重提示为红。颜色会直接影响用户的观感，所以在用色方面需很细心讲究。

c.组件规范

banner组件规范的制定，从产品上线，大促活动，新闻发布等维度考虑banner的使用场景。当然个别业务特殊情况特殊处理，根据业务本身重要特性进行处理。每个组件都是经过全局考虑精心斟酌，对于如此庞大的产品包来说多一点元素都是负担，视觉退一步服务于产品内容，使内容更加突出展示及清爽大方，当然在需要视觉氛围重渲染的情况还是该有它的出彩。每一点的斟酌都只为整体品质。

在组件部分增加组合方式说明，梳理出组件搭配组合的多种方式。从组件的环境、颜色质感，布局等方面进行规范。

2、精简易用（结构简明，浏览舒适）

新的设计方式将界面呈现全新面貌，给用户整体的感知，达到想要的章法效果，有序可循，有理可依，有清晰的规划迭代，优化用户体验，助力业务增长。

             

结构简明：一个页面3个以内版式最为合宜。尽量将同类型场景、内容模版统一，达到简明统一的效果。比如行业模块入口的统一，解决用户对同类型内容的认知。整体视觉尽可能减少多余元素，用颜色和模块区分出不同层级的内容，能用一层元素区隔就不用第二层。比如信息卡片去掉了边框，减少分割线及统一浅色值，板块分割统一参数这些细节，让内容更清爽的呈现，让用户清晰关注到不同即可。

用户现在处于多种设备的使用场景，各种屏幕尺寸、平板电脑、笔记本，各种安卓机器，各种厂商自定义的系统等等，我们的设计需要在这些平台上运行，就必须保证设计的统一性。多端融合就是将平台价值与用户做柔性链接的一环，例如在APP场景中，由于有产品、活动、控制台等“干货”，用户能与平台保持刚性、稳定的连接。做APP应用内的品牌设计，核心价值在于助力用户认知到平台特性，感知平台价值。从设计专业视角来看，APP应用内的品牌设计，有利于定义并统一APP内视觉风格，保障用户的多端体验。

精选页  

活动页

APP主要以轻视觉重内容设计理念进行改版，产品图标及缺省场景均升级为浅色系2.5D插画风格样式，希望通过各端设计触点的配合给用户传达融合、一致的感受和体验。

Tab bars icon 为了增强识别度与趣味性，整体图标线条与形状升级较为柔、识别度较强的图形，同时点击态增加图标“填充元素位移”微动效，使用户切换tab时增加视觉关注度。

4、设计语言系统

全局元素一统风格、色调、组件