AI中台
智能硬件
RPA云平台
数智员工
新一代企业数字焦点系统（YG-DAP）
智税云
财务云
易审云
协同云
人才云
培训云
知识云
售电云YGUEC | 用视觉设计头脑探索商务出行（上）
- 时间：2018-10-25
- 泉源：888集团6008
888集团6008用户体验中心今年迎接了一个有趣的使命 ，就是对智慧商旅APP举行视觉改版。在历程中 ，遇到了许多问题 ，也学会运用了许多要领 ，在这里与各人分享。
改版一样平常分为以下几种情形：1. 只改交互 ，不改视觉。2. 只改视觉 ，不改交互。3. 视觉交互一起改。
通常第1点的情形未几见 ，主要是第2和3点 ，第3点视觉交互一起改是相对较量容易的 ，但交互改动是跟营业需求的变换挂钩 ，有可能陪同整体战略妄想偏向爆发转变。第2点只改视觉不改交互 ，那限制条件就更多了。
那么本次改版我们是属于第3种情形 ，视觉交互一起改 ，在交互合理体现功效需求的同时 ，使用视觉设计指导用户高效使用产品 ，并爆发友好的用户体验。
视觉改版怎样开展今天小编就来剖析一下：
目的
首先在确定改版目的之前 ，先来看看产品泛起的问题有哪些：
1. 整体配色计划——缺乏品牌特征。色相 ，饱和度 ，亮度（HSB）没有纪律 ，看起来不像统一款产品。
（改版前）从左到右依次是首页、申请单、机票预订、旅馆预订
2.首页——产品设计营销痕迹过于显着。大篇幅的广告 ，但并不是用户使用中所需要的信息或功效 ，甚至对功效入口和使用造成滋扰。
3.首页——指导不敷直观。预订机票的指导不显着 ，已预订的机票无法审查。
4.申请单——表单信息沉重 ，对用户不敷友好。
通过界面的几个问题 ，反应出我们改版的缘故原由是视觉没有很好匹配品牌定位 ，在用户体验方面受到一定的影响。以是我们的目的是基于准确的品牌定位 ，从品牌 ，配色 ，排版 ，情作用 ，微交互等维度出发 ，重新界说视觉气概 ，抵达一种让用户一使用我们的产品就能感受到我们的品牌魅力和性格的目的 ，让用户从情绪上抵达共识的效果。
计划
1.品牌定位——用数学要领驾驭色彩
首先我们是做的企业商务旅行解决计划 ，沿用了我们888集团6008一直的b2b蹊径。因此在整体配色计划选用上 ，我们团结了888集团6008品牌标识色彩 ，运用了同色系中越发鲜艳的商务蓝 ，既能体现出888集团6008的品牌特征家族化 ，又不失体现智慧商旅这一互联网消耗产品的生动温度。
（改版后）从左到右依次是首页、机票预订、旅馆预订
使用一个主色 ，陪衬品牌定位清晰化 ，色彩搭配还看起来很是协调 ，是出自一个系列。着实 ，只要掌握一些技巧 ，就可以轻松明确色彩。（这里要敲黑板了）
在色相 ，饱和度 ，亮度（HSB）上做简朴的关联性� ？梢钥吹缴搪玫纳始苹� ，以主色蓝色的HSB为基准 ，辅助色保存了亮度（B）一致 ，调出预订旅馆的主色 ，在蓝色和紫色两个颜色的基础上 ，坚持色相（H）一致 ，又调出了响应的浅色系。其它色彩应用面积小 ，我们在主色的亮度（B）数值上做了加减法 ，统一+20并坚持一致。掌握这样的技巧 ，小编可以说每做一个设计都像是完成了一幅毕加索的作品一样。
2.首页——整体化 ，提升使命完成感
首页的改版大胆接纳了图片平铺做为配景 ，用都会与高架桥、水为素材 ，陪衬出商务出行的节奏感与大气正式的仪式感 ，以生动的其它色作为功效入口的图标底色 ，搭配稳重的主色 ，形成了强烈的视觉攻击 ，让用户的关注力聚焦在主要的功效入口 ，高效的举行操作 ，大大提高页面响应率、转化率。
（改版后）从左到右依次是首页（无行程）、首页（有行程）
用户首次使用商旅时 ，是没有任何行程和订单的 ，通常第一步就是申请出差 ，因此在页面中心位置设计了大大的“+”图标 ，通过视觉对用户的操作举行了强烈的指导。
当有了行程和订单时 ，用户的使用关注点改变 ，以卡片式设计的申请单泛起 ，取代了原有位置的“+”申请出差图标 ，“+”常驻在页面底部菜单栏 ，随时可以使用。
使用卡片设计 ，将每个申请单以拟物化的形式泛起在配景上 ，似乎每次用户都在真实的查阅自己的待办便当贴并举行下一步操作 ，切适用户翻开APP时刻的心情 ，去最先 ，去完成他的行程。通过情作用设计 ，提升了用户的使命完成感。
新版首页增添了统一申请单多人偕行的功效与设计 ，并将已经预订的机票、旅馆信息展示在卡片中 ，为每小我私家单独设计预订按钮。
通过色彩反差的运用及情作用的卡片设计 ，首页的改版很好的解决了旧版首页的2大问题：铺张页面一楼黄金位置 ，弱化了功效入口 ，操作指导性差。
3.申请单——使用色块分区 ，使用隐藏简化流程
当表单内容过多 ，页面过长时 ，对急于完成订票订旅馆使命的用户来说 ，是一种肩负。但凭证企业的差旅划定 ，出差必需要填写申请单 ，必需要包括用度本钱中心。我们在这次改版中 ，通过对差别用户的需求剖析 ，举行了分角色分场景设计。
当角色为企业员工时 ，填写出差申请单 ，默认睁开所有的表单信息；当填写预订机票、旅馆等订单时 ，系统自动填写关联申请单的表单信息 ，免去二次填写的懊恼。
当角色为企业高层向导时 ，填写出差行程单 ，默认收起用度归属表单 ，系统自动填写用度归属表单信息。
除了使用隐藏和系统自动填写两个要领简化表单过长问题 ，还通过视觉的色块分区法 ，将表单中的内容归类。如下图：
（改版后）出差申请单
使用主色与白色搭配作两个分区 ，将出差事由、目的地、时间三个出差信息与其他信息划脱离 ，视觉心剖析将两个分区想象成两步操作完成填单 ，从而整体化。
总结
现在迭代还在继续 ，改版也在一连中。我们做了许多探索 ，用了许多要领 ，在逐步的形成一个设计流程 ，这可以资助我们积累履历。要抵达一个乐成的视觉改版是要靠30%的探索流程+70%设计师水平。
粤公网安备 44049102496133号
