mansion88明升

mansion88明升动态

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

  • 时间：2018-11-19
  • 泉源：mansion88明升

上一期讲述了mansion88明升今年商旅项目的设计使命， ，，，，现在已经完成了V2.2版本的设计改版， ，，，，并且上线。。。 。。产品迭代应该是与时俱进的， ，，，，当完成V2.2版本改版之后， ，，，，解决了旧版商旅的几大痛点的同时， ，，，，也会爆发新的问题。。。 。。下面就让我们来进入正题。。。 。。

1.新增功效——首页头轻脚重

随着营业增多， ，，，，商旅承载着越来越多的主要信息， ，，，，例如在V2.2版本之前， ，，，，商旅只有预订机票、旅馆， ，，，，记账， ，，，，报销几大营业功效， ，，，，在首页的顶部刚刚摆满一排功效入口。。。 。。厥后多了预订火车票、用车打车营业功效， ，，，，以后还会增添更多的功效。。。 。。在V2.2版本的基础上直接添加更改， ，，，，顶部一共6个功效入口， ，，，，一排放不下的情形下， ，，，，划分改为一排3个和一排4个两种效果。。。 。。若是下面泛起卡片式申请单， ，，，，页面整体就会以为下沉， ，，，，头轻脚重。。。 。。很显然， ，，，，现在这个视觉气概的扩展性很低。。。 。。并且当用户有许多个申请单时， ，，，，滑到最底部， ，，，，在想去使用顶部的功效入口， ，，，，还需要再滑回顶部。。。 。。

2.为多人预订——卡片过长， ，，，，没有重点

若是企业有一个角色， ，，，，是专门资助同事来申请出差和预订机票的， ，，，，那么他的首页可能会泛起多个申请单， ，，，，每个申请单有可能会泛起多人多个订单， ，，，，一个卡片会使得页面变得很长， ，，，，每小我私家对应的预订按钮也会变多， ，，，，本想突出预订按钮的初志就会因数目过多而变得没有意义。。。 。。

3.功效性差——机票订单状态繁杂

当员工预订机票去机场前， ，，，，需要关注机票的实时状态， ，，，，甚至机场航班的实时动态。。。 。。在V2.2版本的设计中， ，，，，我们太过强调了机票状态的显示， ，，，，将其设计成一个邮戳状样式压在航班信息卡片上， ，，，，在小屏幕手机上， ，，，，邮戳的位置占有了左右屏幕的二分之一的位置， ，，，，甚至遮掩住主要的航班信息文字。。。 。。这并不是用户点击机票订单界面想要看到的情形。。。 。。

刷新

1.有用使用空间

先来看看首页的功效入口， ，，，，我们将功效分为两类：

①预订功效

②报销功效

两类区分后， ，，，，就可以对其划分举行设计， ，，，，剖析几个功效的使用频率， ，，，，决议将其预订功效视觉强化， ，，，，继续接纳V2.2版本的圆形彩色气概。。。 。。其他功效则接纳方块结构， ，，，，使用基础形状体现差别功效。。。 。。

（从左到右依次为）V2.2首页、V3.0首页

当上滑审查申请单时， ，，，，功效入口并不会消逝， ，，，，将图标收纳牢靠在界面顶部， ，，，，不但可以利便随时使用功效， ，，，，并且不占用空间。。。 。。就似乎各人都在使用的支付宝， ，，，，滑动窗口的淡入淡出效果， ，，，，也是使得空间使用最大化。。。 。。

（效果图）支付宝窗口动效

2.陶醉式体验——让卡片更像卡片

我们改变战略， ，，，，只保存每个卡片中申请单的信息， ，，，，让卡片不再拉长。。。 。�？？ ？？ㄆ某た肀冉幽赡拷裰髁髌聊怀叽�16：9的比例， ，，，，现在的主流屏幕皆是圆角屏， ，，，，卡片的设计接纳圆角化， ，，，，使内容规整统一， ，，，，与屏幕更好的融合。。。 。。

我们通过卡片睁开为全屏界面的动效， ，，，，来扩展被珍藏起来的使命。。。 。。为每一个出行人的行程单带来陶醉式体验， ，，，，纵然预订按钮再多， ，，，，也可以解决摆放问题。。。 。。通过手势的左右滑动， ，，，，劳迫椿差别人的行程订单页面。。。 。。

（效果图）卡片睁开

3.增强比照——强化页面功效性

让我们来剖析一下用户在什么情形下会点击机票订单页面。。。 。。

（V3.0改版）审查机票订单需求剖析

我们将操作频率从高到低排列如下：

审查审批轨迹 – 审查航班动态、机票信息 – 退票、脱期 – 审查机票出票状态、申请单信息 – 填单

员工的每一个订单， ，，，，只要超标、退票、脱期， ，，，，都要经由向导审批， ，，，，关于这个订单中的航班动态、机票信息， ，，，，也是这个订单界面被审查的主要因素， ，，，，相对来说， ，，，，申请单信息被审查的频率会弱许多。。。 。。

连系V2.2版本订单状态戳会遮挡文字和页面的痛点， ，，，，我们给出了新的视觉解决计划。。。 。。我们将头部的蓝色整体色块让出， ，，，，留给最主要的几大信息：订单信息、航班动态、退改按钮；；将原有的头部机票信息下移并与申请单信息一致设计为白色卡片， ，，，，并将超标缘故原由、退改缘故原由等网络在上方。。。 。。在包管手机屏幕一屏之内， ，，，，将审批轨迹从底部移至机票信息下方， ，，，，一屏即可完成最频仍的状态审查与功效操作。。。 。。将文字字号差别拉大， ，，，，使其蹊径性更强。。。 。。

总结

每一个乐成的产品， ，，，，都是向着更好的体验去做每一次的更新迭代， ，，，，好比各人都会用的腾讯QQ， ，，，，也是从一个简朴的网络谈天室， ，，，，一步一步进化为现在重大功效的QQ， ，，，，搜集了文字对话、可以互动的语音视频谈天、看定位与天气、QQ秀、QQ空间、QQ邮箱提醒、效劳号推送、微视、实时演示PPT、演示白板、等等。。。 。。它的客户端界面也从以前的windows窗口样式变为厥后的扁平化视觉， ，，，，并配合动效， ，，，，使其越发灵动。。。 。。

（从左到右划分为）OICQ2010登录框、QQ2011登录框、QQ2018登录框

商旅的V3.0还在一连迭代中， ，，，，在营业功效日趋完善的未来， ，，，，我们也会增添恰到利益的动效， ，，，，来提升视觉感受与体验。。。 。。希望这个产品可以一直更新下去， ，，，，顺应每个时代的目的用户的需求， ，，，，做出更好的产品。。。 。。




【网站地图】【sitemap】