5分钟拯救作品集首页！手把手教你提升UI界面设计质量

今天还是围绕页面做视觉改版，改版的对象是一个学员提交的作品集项目中的首页。而改版的核心原因，是因为在作品集的项目展示中，首页通常就是项目的“门面”，是建立观看者第一印象的关键页面，也可以说是整个项目中最重要的页面（没有之一）。

更多作品集干货：

如果该页面设计质量不足，或是展示的效果不佳，那么观看者对项目的评价就会直线下滑。所以做好首页的必要性是毋庸置疑的，而下面就是我们本次改版的对象：

首页优化说明

这次的优化的目标，是在原有的基础上做简单的调试实现效果的提升，让你们可以借鉴用极少的时间优化自己的项目首页，而不是把它们推翻重做。

所以我们先简单分析一遍原图当中存在的问题，包含下面这些要点：

全局问题：

1. 整体配图非常复杂、凌乱，拉低页面整体视觉效果
2. 使用的字体规格类型过多，信息的浏览不顺畅
3. 主色出现的场景权重过低导致色彩呈现没有主次
4. 页面视觉重心整体靠下，强弱对比失衡

细节问题：

① 顶部背景色“青黄不接”，过于朦胧的颜色和文字、组件无法很好的分隔，且搜索栏的轮廓比较奇怪，顶部栏整体内容太多太拥挤。

② 强推和推荐模块内容字段都很分散，很难看清里面的内容。

③ 月排行太拥挤，前三名书籍很难看清缺乏吸引力，下方文字也过小。

④ 底部导航的大黑描边图标和上方的整体风格不搭，非常突兀。

而要解决这些问题，先不急着想推倒重做，而是先了解什么样的综合信息型页面是合适的，适合作为项目第一个页面展示。

我给出的建议包含下面几点：

1. 色彩鲜艳明亮，品牌主色突出易于识别
2. 文字信息主次分明，尤其标题信息易于辨识
3. 组件设计工整（异形轮廓少），视觉效果平衡
4. 配图精挑细选，要拉高页面视觉的档次水平
5. 适当控制整体字段和信息量，提供喘息空间
6. 统一圆角、投影、字号等小细节参数
7. 没有把握的部分使用常规主流的布局方案（不出错）

基于上面的思路，我们开始对原设计做个简单的优化：

第一步，优化顶部设计，将搜索栏独立出来增加悬浮效果，强化分页器标题文字增加识别度。

第二步，优化顶部推荐组件，移除背景色使用彩色标签，增加封面和标题的尺寸。

第三步，优化精选推荐组件，强化标题，把标签换成常规设计样式，再优化下方书籍信息，增加空间大小。

第四步，优质排行组件，简单调整1、2、3名的排版方向，节约纵向空间，再加大封面的尺寸。

第五步，优化底部导航，使用灰色实心图标，弱化图标的突出性，和上方设计能更好结合。

最后，在看看和原图之间的对比，是否有了清晰的提升：

最后强调一点，就是作品集里首页和项目里展示的首页是 “不一样” 的，如果实际项目里有很多限制导致视觉效果奇差无比（比如书籍封面就是乱），那么作为面试者是不会考虑你背后原因的，这项目就是通不过，连到面试的机会也没有。

所以要放进项目中肯定要优化，而优化也不能改太离谱，确保你改动的结果全是经得起解释的，而不是做非常激进（还做不好）的改版，导致界面充斥大量不成熟、无法解释的设计。

结尾

如果没有足够信息就不要追求过度复杂的设计，简化后控制好细节远远比塞满内容的方案效果更好，看起来视觉观感更佳。项目展示的界面要注重“展示”效果，而不只是孤立在你设计区域中央的画布。

我们下篇再贱！

欢迎关注作者的微信公众号：「超人的电话亭」