一款“游戏应用商店”APP的改版优化改稿案例

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

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

这次挑选的是一款“游戏应用商店”APP的改版,我们首先来看一下这份改版有哪些问题。

一款“游戏应用商店”APP的改版优化改稿案例

问题分析

基本问题:

排版:页面对齐不统一,亲密性原则也没有很好地体现

字体:不同权重的文字应该在字重、色彩上体现出强烈的对比;右侧“简介内容”也过于拥挤

色彩:没有太大问题,但是左图“每日一荐”模块的橙色过于突兀;所有图片的使用也不够刺激

样式:底部 Home Indicator 上方的投影多余;整个页面没有太大亮点,组件的样式都过于平淡

其他问题:

  • 左图顶部搜索框的右侧,空出一大截无意义留白
  • 左图快速入口处无需加入背景分隔块,并且即使加入也无需使用圆角
  • 左图不同模块之间的间距很大,但右图两个模块之间的间距却非常小,两个页面不统一
  • 右图为二级页面,底部无需出现 Tab Bar
  • ...

案例修改

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

  • 搜索框改为图标的形式来展示,修改 Banner 图的样式,将文字放在图片中
  • 重构“每日一荐”模块的组件样式,原设计的组件样式无法体现出该模块的重要性。
  • 修改“小编精选”模块,减少页面图片的出现频率;少许增加了一些字段,使该模块内容更饱满。

一款“游戏应用商店”APP的改版优化改稿案例

第二页的调整:

  • 将游戏封面图叠放在游戏背景图上,并对字段进行重新排列。
  • 新增底部 Tab Bar ,将“下载”和“关注”放在上方,不管用户滑动到哪里都可以随时进行相关操作。
  • 将原来顶部的视频播放移到了中间,使页面更平衡,不会看上去中间部分全是文字。
  • 将“游戏截图”的尺寸进行重构,大图展示游戏重要的截图,其余图片使用小图,并使其可以被滑动,加强趣味性。

一款“游戏应用商店”APP的改版优化改稿案例

通过原型的调整,就可以明显看出修改后的模块比原设计更合理,样式更有趣。在设计原型的过程中要不断控制页面图片出现的频率,不能过多,也不能没有。大家可以仔细观察看看是不是比原来的页面更加干净合理了。在使用原型确定了页面的整体框架后,下一步就可以进行视觉设计了。我们先加入工具图标和底部标签栏的图标,再将主色和辅助色运用到界面中,效果如下:

一款“游戏应用商店”APP的改版优化改稿案例

然后我们再为页面增加配图。原设计的配图在色彩的搭配上过于混乱,这在真实项目中确实无法避免,但是以设计师的"作品"角度来切入的话,配图和文案的内容是可以自由修改的。

一款“游戏应用商店”APP的改版优化改稿案例

做到这里,整个页面基本已经有了大致的设计效果,和之前做一下对比,可以明显感觉到比之前的设计有更好的提升,但我们还可以继续优化页面,具体的优化如下:

  • Banner 图添加了投影,使页面体现出层级关系;图中加入小标签,使模块更丰富
  • 每日一荐模块卡片加入投影,玩家评论卡片做成纯白,使页面更干净
  • 修改每日一荐模块标题的展现形式;卡片的背景融入游戏截图;并加入游戏中相关角色的抠图放在右上角
  • 右图中的游戏封面和推荐图标加入描边,和背景做出区分

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

一款“游戏应用商店”APP的改版优化改稿案例一款“游戏应用商店”APP的改版优化改稿案例

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

一款“游戏应用商店”APP的改版优化改稿案例



发表评论

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