一款社交类APP应用的UI界面改稿案例

  • A+
所属分类:大话设计

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

这次挑选了一款社交类应用来修改,原设计的配图以及布局看着比较混乱,组件的样式也比较单一。我们先来看一下这份设计有哪些问题,然后再来试着进行修改。

一款社交类APP应用的UI界面改稿案例

问题分析

排版:整体看上去问题不是特别大,但是各个元素内部的文字距离边距太小,看上去非常拥挤,以及不同字段的亲密性原则运用的不是特别理想。

字体:字体的对比不够明显,不同的字段应该在字号、粗细、颜色上有所差异,虽然这份设计的字体在颜色是有区别,但对比还是不够强烈,应该将粗细和大小也运用进去。

色彩:虽然大家能看出主色是蓝色渐变,但是出现的范围还是太少,应该加大主色出现的频率;在配图上当前使用的图片给人一种“轻飘飘”的感觉,也应做适当的调整。

样式:投影的使用不理想,颜色太深,使页面看上去很脏;基本组件的样式挑不出什么问题,但还可以做进一步的优化,看看哪些组件能玩出一点新颖的花样,而不是加点字和图就结束了。

案例修改

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

  • 对顶部的分页器进行细微调整,使它们之间的间距更合理。
  • Banner 图做成不通栏设计,让页面的割裂感看着没那么严重。
  • “今日话题”模块使用瓷片区的样式重新设计,原设计无法很好体现该模块所要表达的意图。
  • 底部动态从基础的平面四要素原则出发进行细微调整,使用卡片式的设计来呈现

一款社交类APP应用的UI界面改稿案例

第二页的调整:

  • 对模块进行重新排列,一般社交应用关注的话题会放在顶部(高权重),然后依次是用户的动态(中权重),到最后给用户推荐可能感兴趣的人(低权重)。(按照以前的设计,如果关注的用户有很多个,那么要看话题就得全部滑到底)
  • “我的话题”使用左右滑动的卡片来设计,节省页面空间,避免关注话题过多导致页面上半部分占用面积太大。
  • “动态卡片”沿用首页做过的样式直接套用,体现出“重复性”原则。
  • 底部”用户卡片“新了增一些字段,并做了细微的调整。

一款社交类APP应用的UI界面改稿案例

原型设计过程中,先确定页面的框架、模块排列顺序,这对后面做视觉设计的时候会起到一个很好的帮助,不会不知道该放些什么。上述调整主要根据一个社交应用合理的模块展示顺序进行排列,大家看看是不是比原图所表达的意图更清晰了。在确定了页面的整体框架后,下一步就可以进行视觉设计了。我们直接加入图片、图标和色彩,得到如下的效果。

一款社交类APP应用的UI界面改稿案例

做到这里,整个页面基本已经有了大致的设计效果,和之前做一下对比,可以明显感觉到比之前的设计有更好的提升。但依旧我会继续添加一些设计细节,具体如下:

  • Banner 加入投影,部分浅灰色卡片改成白色卡片,也加入投影,使页面看上去显得不那么脏。
  • 对 Banner 下方的新闻滚动器的图标,和标题文字进行优化
  • 对分页器进行细化,加入选择指示器,并且选中的文字放大展示。
  • 瓷片区右下角的更多矩形替换成描边,箭头使用背景反白的 ICON 来展示
  • 对动态卡片用户信息部分进行优化,现在看着字段有点少,新增了发布时间的字段。
  • 为部分头像加入了性别图标,还投影和描边,体现出层次感。
  • 对底部 Tab Bar 中间的按钮进行调整,将其突出展示,并加入投影,更具设计感。

一款社交类APP应用的UI界面改稿案例一款社交类APP应用的UI界面改稿案例

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

一款社交类APP应用的UI界面改稿案例



发表评论

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