B2C团购平台APP设计改稿优化案例

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

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

本期UI界面实例改稿与以往不同的是,这次只挑选了一份问题比较严重的作品,在原设计的基础上,对组件和配图全部进行调整,并适当增加了一些新模块和设计细节。

B2C团购平台APP设计改稿优化案例

通过观察原图不难发现,这是一款和大众点评有几分相似,都是为用户推荐吃喝玩乐资讯、品质生活指南,一款”以靠用户点评分享来吸引更多用户的 B2C 团购平台“。那么我们首先来看一下这份设计有哪些问题。

问题分析

基本问题:

排版:左图中,”精选“模块三个卡片之间的间距和其他所有卡片之间的间距不一致;卡片内部文字距离边缘的间距太小,看上去很拥挤。

字体:文字缺少足够的对比度,对权重的表现不理想,字重对比不够强烈;右图每张图片左下角的地址信息文字太小,在电脑上看都无法被看清楚。

色彩:主色使用太少,两个页面缺乏色彩联系;并且右图上方彩色渐变的加入反而使画面出现混乱。

样式:整个页面图片出现过多,文字较少;并且组件的样式过于简单,没有多大特色,看上去除了图片和文字就没有其他元素了。

其他问题:

  • 配图不好看,虽然在真实项目无法避免,但作为设计师的作品展示可以使用更好的图片。
  • 轮播图没有任何信息文字,用户无法知道其所要表达的相关内容
  • 快速入口的文字太大,并且图标可以优化的更好,而不是一个渐变背景加内部反白就结束了。
  • 右图左上角的热门话题文字无法被看清。
  • 右图动态卡片标题下方的文字放在此处不合理,这种卡片的标题是用户自己编辑的,那么标题下方肯定不应该是相关地点的注释说明 (按照现在这么做的话,如果有 100 个人点评某家相同的店铺,那就等于要重复显示 100 次)
  • ...

案例修改

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

  • 对 Nav Bar 部分进行细微调整,加大了地点文字
  • 轮播图内部加入了相关文字,并添加标签,让用户明确其所要表达的内容
  • 对精选模块的组件样式进行重构,减少页面的图片数量,加入分页滚动设计。

B2C团购平台APP设计改稿优化案例

第二页的调整:

  • 将热门话题下移,页面顶部新增一个模块,使页面的模块看上去饱满
  • 重构热门话题模块的样式,减少图片的出现面积,并且该模块无需使用渐变色进行凸显
  • 修改动态卡片内部的字段,将标题增加为两行,去除不应该出现的注释文字,增大图片中地区信息的字号

B2C团购平台APP设计改稿优化案例

我们通过原型的调整,让不同模块的组件样式保证足够的差异化和识别性,并减少页面图片出现的面积,大家可以仔细观察看看是不是比原来的页面更加干净合理了。在使用原型确定了页面的整体框架后,下一步就可以进行视觉设计了。我们先加入圆角和工具图标,再将一些数字改为 DIN 字体,并且看看页面的哪些地方可以加入主色和辅助色。

B2C团购平台APP设计改稿优化案例

然后我们再为页面增加配图。在 UI 设计真实项目中,确实无法控制用户上传的图片,但是以设计师的"作品"角度来切入的话,配图是可以自由修改的,包括图片中的色彩,以及对应的文案内容。如果一个界面中出现了多处需要应用配图的地方的话,那么不同的模块所使用配图的风格和色彩,也应该是不同的,而不是一种风格撸到底。

B2C团购平台APP设计改稿优化案例

做到这里,整个页面基本已经有了大致的设计效果,和之前做一下对比,可以明显感觉到比之前的设计有更好的提升,但我们还可以使用投影的方式为整个页面添加层级关系,并加入更多细节,具体的调整如下:

  • 为重要的元素添加投影,使页面体现出层级关系
  • 下方瀑布流卡片的背景从分割块开始使用白色到浅灰色的渐变,这样既体现出分割块,又可以让动态卡片的背景使用纯白色,使页面更干净
  • 右图的图片稍微有点多,对顶部模块选取了一张图进行背景模糊处理
  • 动态卡片中的地点信息加入了透明度并使用背景模糊来处理,而不是单单的纯灰色

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

B2C团购平台APP设计改稿优化案例B2C团购平台APP设计改稿优化案例

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

B2C团购平台APP设计改稿优化案例



发表评论

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