完了,我一个UI设计师,一遇到交互问题就紧张,老板能不能不给我这样的需求!

用户头像
深圳/学生/160天前/1992浏览
完了,我一个UI设计师,一遇到交互问题就紧张,老板能不能不给我这样的需求!
这次我们遇到的案例是买火车票千钧一发拼手速的时刻,来看看优化前的页面:
完了,我一个UI设计师,一遇到交互问题就紧张,老板能不能不给我这样的需求!(图ZMTUzNDk2MzI=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
我们通过梳理信息,交互减步长,使用户一目了然快速作出选择,来看看优化后的页面:
完了,我一个UI设计师,一遇到交互问题就紧张,老板能不能不给我这样的需求!(图ZMTUzNDk2MzY=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
体验篇
知识点1:功能聚焦
优化前有一个体验上的BUG——无法一键预定多程的火车票,这是我们首要要解决的问题:
完了,我一个UI设计师,一遇到交互问题就紧张,老板能不能不给我这样的需求!(图ZMTUzNDk2NzY=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
仔细分析所有信息,可以归类为三个板块:
1. 信息展示(班次信息)
完了,我一个UI设计师,一遇到交互问题就紧张,老板能不能不给我这样的需求!(图ZMTUzNDk2NDA=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
2. 选择项(选择坐席)
完了,我一个UI设计师,一遇到交互问题就紧张,老板能不能不给我这样的需求!(图ZMTUzNDk2NDQ=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
3. 转化项(预定按钮)
完了,我一个UI设计师,一遇到交互问题就紧张,老板能不能不给我这样的需求!(图ZMTUzNDk2NDg=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
我们可以按照分类的思路将信息重组,分为三个板块展示而不是集中在一起。
优化前用户需要分别预定车票,优化后用户可以集中预定车票。信息重组后逻辑通顺,屏效提升:
完了,我一个UI设计师,一遇到交互问题就紧张,老板能不能不给我这样的需求!(图ZMTUzNDk2NTI=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
知识点2 排版
接下来是基本功向的调整
- 文字层级
我们可以通过文字的大小,字重,颜色来拉开文字层级,增加阅读的舒适度:
完了,我一个UI设计师,一遇到交互问题就紧张,老板能不能不给我这样的需求!(图ZMTUzNDk2NjQ=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
- 按钮层级
我们还可以加大选择坐席按钮的面积,使之更方便点击。另外,为了和转化项预定按钮拉开层级,我们需要将选座按钮的颜色降噪:
完了,我一个UI设计师,一遇到交互问题就紧张,老板能不能不给我这样的需求!(图ZMTUzNDk2NTY=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
视觉篇
知识点1:卡片异形
借鉴纸质的火车票轮廓,我们可以将班次卡片异形化处理,给页面带来一些趣味性:
完了,我一个UI设计师,一遇到交互问题就紧张,老板能不能不给我这样的需求!(图ZMTUzNDk2NjA=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
知识点2:加头图
增加一个头部图片可以使页面更具主题感:
完了,我一个UI设计师,一遇到交互问题就紧张,老板能不能不给我这样的需求!(图ZMTUzNDk2Njg=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
最后,让我们来看看优化前后对比:
完了,我一个UI设计师,一遇到交互问题就紧张,老板能不能不给我这样的需求!(图ZMTUzNDk2NzI=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
当你在下次实践中遇到信息多的案例时,别慌张,先对信息分类,再提升视觉体验。优化信息量多的页面也没有那么难。
54
举报
|
27
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
你可能喜欢
相关收藏夹
大家都在看
登录注册