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

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

问题分析

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

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

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

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

案例修改

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

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

第二页的调整：

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

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

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

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

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