《Refactoring UI》第3章读书笔记 ——布局和间距
- 2023-12-21 15:17:08
- 陈建宇
- 原创 622
布局和间距
从太多的空白开始
清理设计的最简单方法之一是简单地给每个元素更多的呼吸空间。
应该删除空白,而不是添加
在为Web设计时,空白几乎总是添加到设计中。如果某些东西看起来有点太狭窄,你可以添加一点空白或填充物,直到事情看起来更好。这种方法的问题在于,元素只获得必要的最低呼吸空间,以免看起来积极糟糕。为了让一些东西看起来真的很棒,你通常需要更多的空白空间。更好的方法是从给一些东西太多的空间开始,然后删除它,直到你对结果感到满意。
密集的用户界面也有必要的
虽然具有大量呼吸空间的界面几乎总是感觉更干净、更简单,但在某些情况下,设计更紧凑无疑是有意义的。
建立间距和尺寸系统
在尝试决定用户界面中元素的完美大小时,您不应该在120px和125px之间挑剔。
痛苦地尝试一次一个像素的任意值充其量会大大减慢速度,并在最坏的情况下创建丑陋、不一致的设计。相反,将自己限制在预先定义的一组受限值上。
线性刻度不起作用
创建间距和尺寸系统并不像“确保一切都是4px的倍数”那么简单——像这样的天真方法不会使在120px和125px之间进行选择变得更容易。
为了使系统真正有用,它需要考虑相邻值之间的相对差异。
如果希望您的系统轻松做出尺寸决策,请确保您的规模中没有两个值接近25%左右。
定义尺寸系统
一个简单的方法是从一个合理的基本值开始,然后使用该值的因子和倍数构建一个尺度。
使用尺寸系统
一旦您定义了间距和大小系统,您就会发现您可以更快地设计,特别是如果您在浏览器中进行设计(键入数字时,坚持使用系统比使用鼠标拖动时更容易。)
不必填满整个屏幕。只给每个元素它所需的空间。
缩小画布
如果您在大画布上设计小界面时遇到困难,请缩小画布!很多时候,当约束是真实的时,设计一些小东西会更容易。
在分栏中思考
如果您想在不使表单更难使用的情况下更好地利用可用空间,您可以将支持文本分解为单独的列:这使设计感觉更加平衡和一致,同时不影响表单本身的最佳宽度。
不要强迫
就像你不应该担心填满整个屏幕一样,你也不应该试图不必要地把所有东西都塞进一个小区域。
网格被高估了
使用像12列网格这样的系统是简化布局决策的好方法,可以为您的设计带来令人满意的秩序感。但是,即使网格可能有用,将所有布局决策外包给网格可能弊大于利。
并非所有元素都应该是流动的
从根本上说,网格系统只是为了给元素提供流畅的、基于百分比的宽度,您可以从一组受限的百分比中进行选择。将网格系统视为宗教的问题在于,在许多情况下,元素具有固定宽度而不是相对宽度更有意义。
不要使用百分比来调整某物的大小,除非真的希望它缩放。
在需要之前,不要缩小元素
不要成为网格的奴隶——给你的组件他们需要的空间,在真正必要之前不要做出任何妥协。
相对尺寸不缩放
人们很容易相信,界面的每个部分都应该相对缩小,如果元素A需要在较小的屏幕上缩小25%,那么元素B也应该缩小25%。
一般来说,大屏幕上的大元素需要比已经相当小的元素收缩得更快——在小屏幕尺寸下,小元素和大元素之间的差异应该不那么极端。
元素内部的关系
东西应该独立缩放的想法不仅适用于不同屏幕尺寸的元素大小;它也适用于单个组件的属性。
放弃一切都需要按比例缩放的想法——给自己独立微调事物的自由,这使为多个上下文进行设计变得容易得多。
避免间距模糊
当元素组被显式分隔时——通常由边框或背景颜色——很明显哪些元素属于哪个组。
每当您依靠间距连接一组元`素时,请务必确保组周围的空间比其中的空间多——难以理解的界面总是看起来更糟。