改了一周，就是改不出来，到底哪根筋没搭对！

今天我们来调一个桌面端的设置页面，它不要求有多么难的视觉效果，只是很考验 UI 排版的基本功，怎么把这个页面的内容处理的井井有条，看起来清晰不费事儿是这次的首要难点。

这个是设计师做好给到：

看着比较凌乱，经过修改之后：

原版凌乱的原因究竟是什么，以及怎么让它不凌乱，下面就来说一说

01 现在需要处理的颜色关系很多

我们一共要通过颜色区分出以下 6 组关系
AB、BC、BE、CD、CE、DE

这样做难度就很高，卡片与卡片之间就很容易融在一起，对比度拉不开。
所以我先丢掉一些不必要存在的关系，让我们处理起来简单一些

只留下 BC、CD 两组关系

这样结构简单了，颜色层次也比较好处理！

02 站在用户的角度，思考如何传达页面意思

自己光想很难，可以看一些相同页面，看看别人在这方面是怎么做的，取其精华，去其糟粕。
比如微软的这个设计：

它在标题就明确写明并告知用户可以在这个页面做什么操作

也用大大大字号标明了是几号屏幕

这两点是可以运用在我们的设计上的。

它不好的一点是下面的四个按钮，让人很难没有选择困难症，这点我们就不参考了

· 我们也在标题标明含义、把屏幕数字放大

· 由于整体界面都是左对齐，这里也要调整为左对齐才顺眼些

·「检测」和「标识」按钮的位置，出于对页面的理解，改在右上角也更合适：

·「应用」和「恢复」的按钮只有在用户改变屏幕排列顺序后，才显示，所以根据亲密性，不如把这俩按钮跟上面屏幕放在一起。
而且它的重要性跟上面两个按钮也不一致，所以不需要框起来，只需要用文字按钮就行。

现在页面的框架已经处理好了，接下来就是要仔细的思考页面中的间距、宽度高度，才能进一步让页面看起来更清晰更美观一些。

03 根据黄金分割和经验，调整页面中的高度、宽度、间距

1. 首先是内容的宽度，要定多宽？

我们可以先把高度确定下来，再根据黄金分割去定宽度。

在高度上，我想要一窗口展示完，不希望还要滑动才能看到一些内容，
所以设定内容边框距离底部为24px，高度就确定了。

再根据黄金分割，高度除宽度约为 0.6 宽度定为这么宽：

（ps：这里输入框宽度也不能随意，要对齐填满页面的宽度）

2. 上下分割也不可以草率随便，寻找最舒服的位置

现在的分割是 55 分

还是尽量去靠近黄金分割：先按照标准把它比例定为 0.6

会发现下面的选择框高度有些拥挤，可以再高一些，只要保证下面不拥挤，但是整体的比例分割又靠近黄金分割即可。

3. 左右的模块分割也可以依据黄金分割

这样就调整得差不多了，相较于原版，是不是变得更清晰直观了一点呢？

原版

修改后

总结

以上就是我的一点做稿心得，希望能对你有启发～

本文来自微信公众号“菜心设计铺”（ID：caixinshejipu）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。

TAGS: UI排版页面