mansion88明升

mansion88明升动态

YGUEC | 用视觉设计头脑探索商务出行（上）

  • 时间：2018-10-25
  • 泉源：mansion88明升

mansion88明升用户体验中心今年迎接了一个有趣的使命，，，，，就是对智慧商旅APP举行视觉改版。。。在历程中，，，，，遇到了许多问题，，，，，也学会运用了许多要领，，，，，在这里与各人分享。。。

改版一样平常分为以下几种情形：1. 只改交互，，，，，不改视觉。。。2. 只改视觉，，，，，不改交互。。。3. 视觉交互一起改。。。

通常第1点的情形未几见，，，，，主要是第2和3点，，，，，第3点视觉交互一起改是相对较量容易的，，，，，但交互改动是跟营业需求的变换挂钩，，，，，有可能陪同整体战略妄想偏向爆发转变。。。第2点只改视觉不改交互，，，，，那限制条件就更多了。。。

那么本次改版我们是属于第3种情形，，，，，视觉交互一起改，，，，，在交互合理体现功效需求的同时，，，，，使用视觉设计指导用户高效使用产品，，，，，并爆发友好的用户体验。。。

视觉改版怎样开展今天小编就来剖析一下：

目的

首先在确定改版目的之前，，，，，先来看看产品泛起的问题有哪些：

1. 整体配色计划——缺乏品牌特征。。。色相，，，，，饱和度，，，，，亮度（HSB）没有纪律，，，，，看起来不像统一款产品。。。

（改版前）从左到右依次是首页、申请单、机票预订、旅馆预订

2.首页——产品设计营销痕迹过于显着。。。大篇幅的广告，，，，，但并不是用户使用中所需要的信息或功效，，，，，甚至对功效入口和使用造成滋扰。。。

3.首页——指导不敷直观。。。预订机票的指导不显着，，，，，已预订的机票无法审查。。。

4.申请单——表单信息沉重，，，，，对用户不敷友好。。。

通过界面的几个问题，，，，，反应出我们改版的缘故原由是视觉没有很好匹配品牌定位，，，，，在用户体验方面受到一定的影响。。。以是mansion88明升目的是基于准确的品牌定位，，，，，从品牌，，，，，配色，，，，，排版，，，，，情作用，，，，，微交互等维度出发，，，，，重新界说视觉气概，，，，，抵达一种让用户一使用mansion88明升产品就能感受到mansion88明升品牌魅力和性格的目的，，，，，让用户从情绪上抵达共识的效果。。。

计划

1.品牌定位——用数学要领驾驭色彩

首先我们是做的企业商务旅行解决计划，，，，，沿用了我们mansion88明升一直的b2b蹊径。。。因此在整体配色计划选用上，，，，，我们连系了mansion88明升品牌标识色彩，，，，，运用了同色系中越发鲜艳的商务蓝，，，，，既能体现出mansion88明升的品牌特征家族化，，，，，又不失体现智慧商旅这一互联网消耗产品的生动温度。。。

（改版后）从左到右依次是首页、机票预订、旅馆预订

使用一个主色，，，，，陪衬品牌定位清晰化，，，，，色彩搭配还看起来很是协调，，，，，是出自一个系列。。。着实，，，，，只要掌握一些技巧，，，，，就可以轻松明确色彩。。。（这里要敲黑板了）

在色相，，，，，饱和度，，，，，亮度（HSB）上做简朴的关联性。。�？？？梢钥吹缴搪玫纳始苹�，，，，，以主色蓝色的HSB为基准，，，，，辅助色保存了亮度（B）一致，，，，，调出预订旅馆的主色，，，，，在蓝色和紫色两个颜色的基础上，，，，，坚持色相（H）一致，，，，，又调出了响应的浅色系。。。其它色彩应用面积小，，，，，我们在主色的亮度（B）数值上做了加减法，，，，，统一+20并坚持一致。。。掌握这样的技巧，，，，，小编可以说每做一个设计都像是完成了一幅毕加索的作品一样。。。

2.首页——整体化，，，，，提升使命完成感

首页的改版大胆接纳了图片平铺做为配景，，，，，用都会与高架桥、水为素材，，，，，陪衬出商务出行的节奏感与大气正式的仪式感，，，，，以生动的其它色作为功效入口的图标底色，，，，，搭配稳重的主色，，，，，形成了强烈的视觉攻击，，，，，让用户的关注力聚焦在主要的功效入口，，，，，高效的举行操作，，，，，大大提高页面响应率、转化率。。。

（改版后）从左到右依次是首页（无行程）、首页（有行程）

用户首次使用商旅时，，，，，是没有任何行程和订单的，，，，，通常第一步就是申请出差，，，，，因此在页面中心位置设计了大大的“+”图标，，，，，通过视觉对用户的操作举行了强烈的指导。。。

当有了行程和订单时，，，，，用户的使用关注点改变，，，，，以卡片式设计的申请单泛起，，，，，取代了原有位置的“+”申请出差图标，，，，，“+”常驻在页面底部菜单栏，，，，，随时可以使用。。。

使用卡片设计，，，，，将每个申请单以拟物化的形式泛起在配景上，，，，，似乎每次用户都在真实的查阅自己的待办便当贴并举行下一步操作，，，，，切适用户翻开APP时刻的心情，，，，，去最先，，，，，去完成他的行程。。。通过情作用设计，，，，，提升了用户的使命完成感。。。

新版首页增添了统一申请单多人偕行的功效与设计，，，，，并将已经预订的机票、旅馆信息展示在卡片中，，，，，为每小我私家单独设计预订按钮。。。

通过色彩反差的运用及情作用的卡片设计，，，，，首页的改版很好的解决了旧版首页的2大问题：铺张页面一楼黄金位置，，，，，弱化了功效入口，，，，，操作指导性差。。。

3.申请单——使用色块分区，，，，，使用隐藏简化流程

当表单内容过多，，，，，页面过长时，，，，，对急于完成订票订旅馆使命的用户来说，，，，，是一种肩负。。。但凭证企业的差旅划定，，，，，出差必需要填写申请单，，，，，必需要包括用度本钱中心。。。我们在这次改版中，，，，，通过对差别用户的需求剖析，，，，，举行了分角色分场景设计。。。

当角色为企业员工时，，，，，填写出差申请单，，，，，默认睁开所有的表单信息 ； ；； ；当填写预订机票、旅馆等订单时，，，，，系统自动填写关联申请单的表单信息，，，，，免去二次填写的懊恼。。。

当角色为企业高层向导时，，，，，填写出差行程单，，，，，默认收起用度归属表单，，，，，系统自动填写用度归属表单信息。。。

除了使用隐藏和系统自动填写两个要领简化表单过长问题，，，，，还通过视觉的色块分区法，，，，，将表单中的内容归类。。。如下图：

（改版后）出差申请单

使用主色与白色搭配作两个分区，，，，，将出差事由、目的地、时间三个出差信息与其他信息划脱离，，，，，视觉心剖析将两个分区想象成两步操作完成填单，，，，，从而整体化。。。

总结

现在迭代还在继续，，，，，改版也在一连中。。。我们做了许多探索，，，，，用了许多要领，，，，，在逐步的形成一个设计流程，，，，，这可以资助我们积累履历。。。要抵达一个乐成的视觉改版是要靠30%的探索流程+70%设计师水平。。。




【网站地图】【sitemap】