“旅游社交类”应用UI界面设计的改稿优化案例

  • A+
所属分类:经验思维

本文来源: 酸梅干超人(公众号:超人的电话亭), 共 1931 字

“旅游社交类”应用UI界面设计的改稿优化案例

观察原图,我们可以发现这是一款“旅游社交类”应用,大体上的功能是:“用户通过在互联网上发布旅游信息,来寻找不同的旅伴,最终结伴前往目的地”。

明确了这个产品的主要功能,那么我们下一步先来看一下这份设计有哪些问题。

问题分析

基本问题:

排版:左图的“精选行程”和右图的“个人照片”两个模块和其他元素对齐不统一;部分元素之间的间距不一致;左图底部卡片内部的文字亲密性没有很好表现。

字体:字体对比表现得不够强烈;右侧“行程内容”模块可以适当加入一些图标等其他元素,全是文字让人看着很枯燥。

色彩:辅助色出现频率太少,可以适当加入一些其他色彩;图片选用的不理想,使页面特别混乱。

样式:所有的投影都太深,模糊值太低,让画面看上去很脏。左图底部卡片的样式不理想,当前样式让下方产生许多无意义留白;部分元素的圆角也不统一。

改版目标:

主要以简洁,年轻,高效三个原则进行改稿。在颜色的使用上都考虑使用饱和度较高的色彩,去除不必要的投影,紧跟当前 UI 设计趋势,页面模块和图标加入圆角设计,呈现出年轻的风格。

  • 简洁 —— 界面干净整洁,去除繁杂装饰,化繁为简,突出主要内容
  • 年轻 —— 使用高饱和度和明度的色彩,并且加入圆角设计,体现年轻活泼的气质
  • 高效 —— 不同模块区分明显,层级划分清晰,字段内容重点突出

案例修改

总结出上述问题后,我们就可以对其进行修改调整。首先第一步,就是先将页面中的模块使用原型的方式大致进行排列。

第一页的调整不是特别大,基本是对一些组件内部的字段进行重新排列,优化了一些组件的样式,具体如下:

  • 由于该应用首页图片出现频率会比较多,所以将 Banner 做成顶部不通栏的样式。
  • 对“精选行程”的样式进行了优化,在对齐上和其他组件保持一致。并加入了一些字段,因为这个模块比底部瀑布流展示的行程权重更高,所以这个卡片的字段应该更多且更丰富一些。
  • “热门结伴目的地”取消了原有的左右滑动样式,和上方组件做出区分,新设计的样式在一屏直接展示多个,使用户一眼明确哪些地点是热门的。
  • 底部瀑布流展示的行程,做成竖向排列,减少整体占用面积。在图片上新增了参与人数和收藏按钮,并对部分字段进行了重新排列和删减,只需把最重要的字段展示出来即可,过多的字段会导致用户无法明确自身的需求。

“旅游社交类”应用UI界面设计的改稿优化案例

第二页调整幅度较大,基本是把整个页面全部推翻重新进行排列,并适当删减了一些对用户无关紧要的字段,具体如下:

  • 这个页面整体图片出现不会很多,所以可以将图片放在顶部,并做成通栏式设计。
  • 将用户信息下移,放在行程介绍下方,并删减了一些无用的字段,使页面不会看上去全是文字。
  • 出发地、目的地直接做成标题,并加入一些用户自己输入的行程介绍。
  • 途径地点和报名人数直接在一个页面展示,减少用户多次点击跳转产生的焦虑感,这些内容不会占用页面太多面积。
  • 其余不重要的内容直接做成列表展示在下方,并将一些字段改成图标,可减少文字出现频率。
  • 底部 Tab Bar 只放申请加入按钮即可,去除原设计的四个按钮:留言放在了底部大标题的下方,添加好友和点赞在这个页面根本没有任何用处,分享在右上角出现过,无需重复出现。

“旅游社交类”应用UI界面设计的改稿优化案例

通过原型的调整后,就可以明显看出修改后的模块比原设计更合理,样式更丰富。原型是对我们在后面进行视觉设计中起到一个趋利避害的作用,在设计原型的过程中,一定要考虑到这个产品的主要功能、目的是什么?用户在这个页面最需要看到什么?不能盲目加入一些对用户核心目的没有任何帮助的内容。

在确定了页面的整体框架后,下一步就可以进行视觉设计了。我们直接加入图片、图标和色彩,得到如下的效果。

“旅游社交类”应用UI界面设计的改稿优化案例

做到这里,整个页面基本已经有了大致的设计效果,和之前做一下对比,可以明显感觉到比之前的设计有更好的提升。但是做到这里就结束了吗?大家都知道我是个喜欢抠细节的人,上面这份设计只是在原型的基础上填图加色,但远远没有达到我满意的效果,所以我对他进行了更细节的优化,具体如下:

  • 为所有头像添加了白色描边,并在部分头像旁加入了性别图标,使用户可以快速明确参加者的性别,这一点对于这个产品还是很重要的。
  • 将所有灰色的卡片改为纯白色,并为它们添加了投影,让页面体现出层级关系。
  • 左图底部的瀑布流卡片,如果将卡片改为白色并全部添加投影会让页面显得很脏,所以我从上方标题部分开始使用白色到浅灰色的渐变,这样即可以使页面均匀的过渡,又可以让卡片使用纯白色而不添加投影。
  • "热门结伴目的地"模块上面三个图片添加了标签,部分图标内部加入色彩,让主色出现的频率更高。
  • 右图加入了收藏按钮;“行程介绍”第三行的截断处使用白色渐变来过渡;“途径地点”旁加入了地图模式;页面的底部新增了一个回复模块。

完了之后,我们再对比一遍修改以后的案例和之前的案例,看看更细致的调整以后,有哪些提升

“旅游社交类”应用UI界面设计的改稿优化案例

“旅游社交类”应用UI界面设计的改稿优化案例

最后,我们再来看一下两张合在一起的效果。

“旅游社交类”应用UI界面设计的改稿优化案例一。



发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: