Applying white space in UI design

Applying white space in UI design

https://uxdesign.cc/whitespace-in-ui-design-44e332c8e4a

 

Follow the Law of Proximity

  • 相关元素应该间隔更近。相反,不相关的元素应该间隔得更远

  • 相同“类型”的元素应该均匀地间隔开


Start from a baseline of generous white space

Applying white space in UI design


  • 元素和元素之前不能太靠近,会很有压迫感

  • 如果元素数量很少,那么空间就应该再多些,至少善用整体空间


Use white space to focus attention on particular design elements.

  • 空间可以让用户更加聚焦在元素

  • 让用户聚焦不只是通过放大元素而已


Use the same method for measuring space in both design and implementation.

Applying white space in UI designApplying white space in UI design


  • 2 种衡量距离的方法

    • 给元素一个 bounding box

    • 不给元素 bounding box

  • 设计最好是使用第二个,因为视觉不会去假设你有 bounding box

  • 市场大部分都是第一个,因为设计字体的人,会给不同的 line height

  • 好在 w3c 有在准备 leading track(可能是几年后的事了)


Use a spacing system

Applying white space in UI design

  • 和颜色概念一样,拥有一套固定的标准

  • 固定的倍数


Avoid using spacing values that are visually too similar

Applying white space in UI design


  • 避免使用靠近的距离

  • 用户没有像素眼,看不出 1 ~ 2px 的差别

  • 设计规范是为了更好的去执行同个设计系统,如果设计出来在视觉上看不出差别,那么需要例外对待

    • 不同元素会影响我们的视觉,不能只是 follow spec 而已!


Reduce the line-height (ie. leading) as text size increases

Applying white space in UI design

  • 字体越大,空间越多

  • 市场上几乎都会特别对待 line height 当遇上较大的字号,同样的 letter space 也是


In an information-dense UI, rely on other techniques besides white space to convey how elements in the UI relate to one another.

Applying white space in UI design

  • 在信息密集的 UI 中,除了 “空白” 之外,还可以用其他方式去区分

    • Border

    • 字和字之间放个 “空中点”

    • 颜色












上一篇:连接到共享打印机时,为什么会出现错误“0x00000bc4 PRINTER


下一篇:并发编程——多个线程交替打印