禅道博客

分享专业技术知识,文章内容干货满满

《Refactoring UI》第3章读书笔记 ——布局和间距

2022-09-22 10:44:32
陈建宇
原创 29

布局和间距

从太多的空白开始

清理设计的最简单方法之一是简单地给每个元素更多的呼吸空间。

应该删除空白,而不是添加

在为Web设计时,空白几乎总是添加到设计中。如果某些东西看起来有点太狭窄,你可以添加一点空白或填充物,直到事情看起来更好。这种方法的问题在于,元素只获得必要的最低呼吸空间,以免看起来积极糟糕。为了让一些东西看起来真的很棒,你通常需要更多的空白空间。更好的方法是从给一些东西太多的空间开始,然后删除它,直到你对结果感到满意。


密集的用户界面也有必要的

虽然具有大量呼吸空间的界面几乎总是感觉更干净、更简单,但在某些情况下,设计更紧凑无疑是有意义的。


建立间距和尺寸系统

在尝试决定用户界面中元素的完美大小时,您不应该在120px和125px之间挑剔。

痛苦地尝试一次一个像素的任意值充其量会大大减慢速度,并在最坏的情况下创建丑陋、不一致的设计。相反,将自己限制在预先定义的一组受限值上。


线性刻度不起作用

创建间距和尺寸系统并不像“确保一切都是4px的倍数”那么简单——像这样的天真方法不会使在120px和125px之间进行选择变得更容易。

为了使系统真正有用,它需要考虑相邻值之间的相对差异。


如果希望您的系统轻松做出尺寸决策,请确保您的规模中没有两个值接近25%左右。


定义尺寸系统

一个简单的方法是从一个合理的基本值开始,然后使用该值的因子和倍数构建一个尺度。


使用尺寸系统

 一旦您定义了间距和大小系统,您就会发现您可以更快地设计,特别是如果您在浏览器中进行设计(键入数字时,坚持使用系统比使用鼠标拖动时更容易。)

不必填满整个屏幕。只给每个元素它所需的空间。


缩小画布

如果您在大画布上设计小界面时遇到困难,请缩小画布!很多时候,当约束是真实的时,设计一些小东西会更容易。


在分栏中思考

如果您想在不使表单更难使用的情况下更好地利用可用空间,您可以将支持文本分解为单独的列:这使设计感觉更加平衡和一致,同时不影响表单本身的最佳宽度。


不要强迫

就像你不应该担心填满整个屏幕一样,你也不应该试图不必要地把所有东西都塞进一个小区域。


网格被高估了

使用像12列网格这样的系统是简化布局决策的好方法,可以为您的设计带来令人满意的秩序感。但是,即使网格可能有用,将所有布局决策外包给网格可能弊大于利。


并非所有元素都应该是流动的

从根本上说,网格系统只是为了给元素提供流畅的、基于百分比的宽度,您可以从一组受限的百分比中进行选择。将网格系统视为宗教的问题在于,在许多情况下,元素具有固定宽度而不是相对宽度更有意义。

不要使用百分比来调整某物的大小,除非真的希望它缩放。


在需要之前,不要缩小元素

不要成为网格的奴隶——给你的组件他们需要的空间,在真正必要之前不要做出任何妥协。


相对尺寸不缩放

人们很容易相信,界面的每个部分都应该相对缩小,如果元素A需要在较小的屏幕上缩小25%,那么元素B也应该缩小25%。

一般来说,大屏幕上的大元素需要比已经相当小的元素收缩得更快——在小屏幕尺寸下,小元素和大元素之间的差异应该不那么极端。


元素内部的关系

东西应该独立缩放的想法不仅适用于不同屏幕尺寸的元素大小;它也适用于单个组件的属性。

放弃一切都需要按比例缩放的想法——给自己独立微调事物的自由,这使为多个上下文进行设计变得容易得多。


避免间距模糊

当元素组被显式分隔时——通常由边框或背景颜色——很明显哪些元素属于哪个组。

每当您依靠间距连接一组元`素时,请务必确保组周围的空间比其中的空间多——难以理解的界面总是看起来更糟。

发表评论
评论通过审核后显示。