(资料图)

今天我们来调一个桌面端的设置页面，它不要求有多么难的视觉效果，只是很考验 UI 排版的基本功，怎么把这个页面的内容处理的井井有条，看起来清晰不费事儿是这次的首要难点。这个是设计师做好给到：看着比较凌乱，经过修改之后：原版凌乱的原因究竟是什么，以及怎么让它不凌乱，下面就来说一说01 现在需要处理的颜色关系很多我们一共要通过颜色区分出以下 6 组关系AB、BC、BE、CD、CE、DE这样做难度就很高，卡片与卡片之间就很容易融在一起，对比度拉不开。所以我先丢掉一些不必要存在的关系，让我们处理起来简单一些只留下 BC、CD 两组关系这样结构简单了，颜色层次也比较好处理！02 站在用户的角度，思考如何传达页面意思自己光想很难，可以看一些相同页面，看看别人在这方面是怎么做的，取其精华，去其糟粕。比如微软的这个设计：它在标题就明确写明并告知用户可以在这个页面做什么操作也用大大大字号标明了是几号屏幕这两点是可以运用在我们的设计上的。它不好的一点是下面的四个按钮，让人很难没有选择困难症，这点我们就不参考了· 我们也在标题标明含义、把屏幕数字放大· 由于整体界面都是左对齐，这里也要调整为左对齐才顺眼些·「检测」和「标识」按钮的位置，出于对页面的理解，改在右上角也更合适：·「应用」和「恢复」的按钮只有在用户改变屏幕排列顺序后，才显示，所以根据亲密性，不如把这俩按钮跟上面屏幕放在一起。而且它的重要性跟上面两个按钮也不一致，所以不需要框起来，只需要用文字按钮就行。现在页面的框架已经处理好了，接下来就是要仔细的思考页面中的间距、宽度高度，才能进一步让页面看起来更清晰更美观一些。03 根据黄金分割和经验，调整页面中的高度、宽度、间距1. 首先是内容的宽度，要定多宽？我们可以先把高度确定下来，再根据黄金分割去定宽度。在高度上，我想要一窗口展示完，不希望还要滑动才能看到一些内容，所以设定内容边框距离底部为24px，高度就确定了。再根据黄金分割，高度除宽度约为 0.6 宽度定为这么宽：（ps：这里输入框宽度也不能随意，要对齐填满页面的宽度）2. 上下分割也不可以草率随便，寻找最舒服的位置现在的分割是 55 分还是尽量去 靠近 黄金分割：先按照标准把它比例定为 0.6会发现下面的选择框高度 有些拥挤，可以再高一些，只要保证下面不拥挤，但是整体的比例分割又 靠近 黄金分割即可。3. 左右的模块分割也可以依据黄金分割这样就调整得差不多了，相较于原版，是不是变得更清晰直观了一点呢？原版修改后总结以上就是我的一点做稿心得，希望能对你有启发～想学习更多，可以关注第六期UI课程，更新了很多最新案例，详情看下方链接：

推荐内容