尊龙凯时

尊龙凯时动态

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

  • 时间：2018-11-19
  • 泉源：尊龙凯时

上一期讲述了尊龙凯时今年商旅项目的设计使命，现在已经完成了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还在一连迭代中，在营业功效日趋完善的未来，我们也会增添恰到利益的动效，来提升视觉感受与体验 。希望这个产品可以一直更新下去，顺应每个时代的目的用户的需求，做出更好的产品 。




网站地图