交互设计 » 复杂的UI列表设计,大神如何做简化?

复杂的UI列表设计,大神如何做简化?

发表于: 交互设计. 评论
Sponsor

前言:我们知道APP端的界面显示不如PC端,它的显示区域有限,那么如果有过有些的列表设计如何展示呢?把多余的数据隐藏?但基本都是重要内容,一次性展示才会更方便,那怎么处理?来一起看看大神是如何将这个列表UI做简化设计的吧!

那么复杂的UI列表界面,大神如何简化设计?

项目背景

智行App的“智慧出行”功能,作为一种全新的出行方案查询方式,致力于提供用户全面的出行方案推荐。

以往的方案查询,用户需要预先想好具体的出行方式,才能开始操作。

但这种搜索路径,并不是最简便的。

那么复杂的UI列表界面,大神如何简化设计?

我们希望直接给到用户所有的交通方案,并提供对比与出行建议。

也正是因此,我们需要设计一个更全面的方案列表页面

设计目标

那么复杂的UI列表界面,大神如何简化设计?

之前的页面效率非常低,为了让用户在同一个页面中,就可以完成方案的“浏览”、“切换”、“对比”。

我们制定了以下三个设计目标:

1.  提高对比效率

最初的版本存在的问题:

1)不同的方案类型纵向罗列,露出数量依赖屏幕高度;

2)“查看更多”的列表与主列表需要反复跳转;

3)不同方案之间距离远,全靠记忆力。

这都是我们需要解决的问题。

2.  加强操作提示

切换列表的操作,不可避免地会使用到“Tab”这种交互语言。

而常见的Tab形式大多存在点击感知不高的问题,是需要解决的核心问题。

3.  页面轻量化

OTA方案列表本身就是一个文字信息量巨大的页面。不同类型的方案之间,关键信息也不一致。

混合之后如何进行统一化设计,也是个很大的考验。

设计历程

整体项目经历了两次大的改版,我们分别对交互形式视觉样式做了升级。

交互形式探索

为了加强对比效率,将不同类型的方案列表放入同一个页面。我们主要做了以下几种交互的探索。

01. 「双列表」的探索

那么复杂的UI列表界面,大神如何简化设计?

不可否认的是,双列表在「横向对比」上有独特的优势。但缺点也是十分明显的:页面信息过于密集,容易造成视觉疲劳;也很难兼容三种以上的方式对比。

02. 「横向Tab栏」的探索

那么复杂的UI列表界面,大神如何简化设计?

这种形式用户的「认知度高」,但切实存在点击感知不强的缺点。我们分析了一下其中的原因,认为是:视线方向与手势方向不一致的结果。

如果阅读视线和滑动操作都是纵向的,会如何呢?

03. 「纵向Tab栏」的探索

细想一下自己使用以下应用时,是不是很自然的使用了切换。

那么复杂的UI列表界面,大神如何简化设计?

但如果我们采用了同样的结构,也迎来了新的问题:

如何在纵向Tab空间中,放下复杂的交通信息?

我们使用了新的图形化语言,并完成了第一次改版。

那么复杂的UI列表界面,大神如何简化设计?

至此,交互形式确认。初步方案上线后,整体页面的转化率获得了极大的提升。

那么复杂的UI列表设计界面,大神如何简化?

之后我们又进一步做了视觉的整体优化。

视觉降噪处理

验证了交互样式的成功后,我们希望让页面更加轻量化。

01. 视线重心转移

原页面头部的色彩比重非常大,但头部的信息与功能并不重要。我们的期望,是用户将视线集中在不同的方案Tab上。于是对页面做了初步的降噪处理,并增加了明显的操作提示

那么复杂的UI列表界面,大神如何简化设计?

02. 继续简化Tab栏

先前Tab虽然清晰,但形式过于整体,像行程说明,反而缺少了可以点击的感觉。

在样式简化的同时,我们进一步压缩宽度,也统一高度。使得Tab区域整体更“整齐划一”。

那么复杂的UI列表设计,大神如何简化界面?

03. 方案卡片的重构

方案卡片是用户对比的视觉主体。我们做了以下调整:

1、使用智行数字体增强辨识度

2、适配不同Tab下的关键信息

3、中转方案图形化

那么复杂的UI列表设计,大神如何简化界面?

那么复杂的UI列表设计,大神如何简化界面?

复杂的UI列表设计,大神如何简化界面?

整体效果

至此,整体的改版告一段落。我们来看下最终的效果。

复杂的UI列表设计,大神如何简化界面?

项目总结

项目上线后在数据上取得了很好的效果。就单页面的转化率来说,基本做到了和常见的火车列表页与机票列表页持平。在出行高峰、需求旺盛的时期甚至更好。

作者:智行ZXD设计中心

来源:智行ZXD设计中心(ID:gh_0a95e60710b1)

赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }