FantasticMao 技术笔记
BlogGitHub
  • README
  • C & Unix
    • C
      • 《C 程序设计语言》笔记
      • C 语言中的陷阱
      • CMake 示例
      • GNU make
      • LLVM Clang
      • Nginx 常用模块
      • Vim 常用命令
    • Unix-like
      • 《深入理解计算机系统》笔记
      • 《UNIX 环境高级编程》笔记 - UNIX 基础知识
      • 《UNIX 环境高级编程》笔记 - 文件 IO
      • 《UNIX 环境高级编程》笔记 - 标准 IO 库
      • 《鳥哥的 Linux 私房菜》笔记 - 目录配置
      • 《鳥哥的 Linux 私房菜》笔记 - 认识与学习 bash
      • 《鳥哥的 Linux 私房菜》笔记 - 任务管理
      • OpenWrt 中的陷阱
      • iptables 工作机制
  • Go
    • 《A Tour of Go》笔记
    • Go vs C vsJava
    • Go 常用命令
    • Go 语言中的陷阱
  • Java
    • JDK
      • 《Java 并发编程实战》笔记 - 线程池的使用
      • 设计模式概览
      • 集合概览
      • HashMap 内部算法
      • ThreadLocal 工作机制
      • Java Agent
    • JVM
      • 《深入理解 Java 虚拟机》笔记 - Java 内存模型与线程
      • JVM 运行时数据区
      • 类加载机制
      • 垃圾回收算法
      • 引用类型
      • 垃圾收集算法
      • 垃圾收集器
    • Spring
      • Spring IoC 容器扩展点
      • Spring Transaction 声明式事务管理
      • Spring Web MVC DispatcherServlet 工作机制
      • Spring Security Servlet 实现原理
    • 其它
      • 《Netty - One Framework to rule them all》演讲笔记
      • Hystrix 设计与实现
  • JavaScript
    • 《写给大家看的设计书》笔记 - 设计原则
    • 《JavaScript 权威指南》笔记 - jQuery 类库
  • 数据库
    • ElasticSearch
      • ElasticSearch 概览
    • HBase
      • HBase 数据模型
    • Prometheus
      • Prometheus 概览
      • Prometheus 数据模型和指标类型
      • Prometheus 查询语法
      • Prometheus 存储原理
      • Prometheus vs InfluxDB
    • Redis
      • 《Redis 设计与实现》笔记 - 简单动态字符串
      • 《Redis 设计与实现》笔记 - 链表
      • 《Redis 设计与实现》笔记 - 字典
      • 《Redis 设计与实现》笔记 - 跳跃表
      • 《Redis 设计与实现》笔记 - 整数集合
      • 《Redis 设计与实现》笔记 - 压缩列表
      • 《Redis 设计与实现》笔记 - 对象
      • Redis 内存回收策略
      • Redis 实现分布式锁
      • Redis 持久化机制
      • Redis 数据分片方案
      • 使用缓存的常见问题
    • MySQL
      • 《高性能 MySQL》笔记 - Schema 与数据类型优化
      • 《高性能 MySQL》笔记 - 创建高性能的索引
      • 《MySQL Reference Manual》笔记 - InnoDB 和 ACID 模型
      • 《MySQL Reference Manual》笔记 - InnoDB 多版本
      • 《MySQL Reference Manual》笔记 - InnoDB 锁
      • 《MySQL Reference Manual》笔记 - InnoDB 事务模型
      • B-Tree 简述
      • 理解查询执行计划
  • 中间件
    • gRPC
      • gRPC 负载均衡
    • ZooKeeper
      • ZooKeeper 数据模型
    • 消息队列
      • 消息积压解决策略
      • RocketMQ 架构设计
      • RocketMQ 功能特性
      • RocketMQ 消息存储
  • 分布式系统
    • 《凤凰架构》笔记
    • 系统设计思路
    • 系统优化思路
    • 分布式事务协议:二阶段提交和三阶段提交
    • 分布式系统的技术栈
    • 分布式系统的弹性设计
    • 单点登录解决方案
    • 容错,高可用和灾备
  • 数据结构和算法
    • 一致性哈希
    • 布隆过滤器
    • 散列表
  • 网络协议
    • 诊断工具
    • TCP 协议
      • TCP 报文结构
      • TCP 连接管理
由 GitBook 提供支持
在本页
  • 引言
  • 亲密性
  • 对齐
  • 重复
  • 对比
  • 总结
  1. JavaScript

《写给大家看的设计书》笔记 - 设计原则

最后更新于1年前

摘自 第一部分 —— 设计原则。

引言

以下是对基本设计原则的概述,每一个优秀的设计中都应用了这些设计原则。要记住,它们实际上是相互关联的,只应用某一个原则的情况很少。

  1. 对比(Contrast)

    对比的基本思想是,要避免页面上的元素太过相似。如果元素(字体、颜色、大小、线宽、形状、空间等)不相同,那就干脆让它们截然不同。要让页面引人注目,对比通常是最重要的一个因素。

  2. 重复(Repetition)

    让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片,等等。这样一来,既能增加条理性,还可以加强一致性。

  3. 对齐(Alignment)

    任何元素都不能在页面上随意安放,每个元素都应当与页面上的另一个元素存在某种视觉联系。这样能建立一种清晰、精巧而且清爽的视觉效果。

  4. 亲密性(Proximity)

    彼此相关的元素应当靠近,归组在一起。如果多个元素之间存在很近的亲密性,它们就会成为一个视觉单元,而不是多个孤立的项。这样有助于组织页面信息、减少混乱。

亲密性

如果一个设计中充斥着太多的内容,这个页面会显得杂乱无章,读者也无法从中很快看到所需的信息。Robin 亲密性原则是指: 将相关的元素组织在一起。

移动相关的元素项,使它们的物理位置相互靠近,将相关的元素项凝聚为一个组,而不是一堆彼此无关的片段;移动无关的元素项或组,使它们的物理位置相互分离,为读者提供一个直观的提示,使其可以马上了解页面的组织和内容。

就像实际生活中一样,亲密性意味着存在关联。如果把类似的元素组织为一个单元,马上会带来很多变化。首先,页面会变得更有条理。其次,你会更清楚地知道从哪里开始阅读,从哪里结束阅读。另外,空白(即字符之外的空间)也会变得更有组织。

亲密性原则不是说所有的元素都要靠近,其真正的含义是:如果某些元素在理解层面上存在关联,那么这些元素也应当在视觉层面上存在关联。除此之外,其它孤立的元素或元素组则不应该存在亲密性。物理位置的是否靠近,可以体现元素之间是否存在关联。

对齐

设计新手往往很草率,只要页面上刚好有空间,就会把文本和图片放在那里,而全然不考虑页面上的其它元素。这样得到的页面会给人一种杂乱无章的感觉。Robin 对齐原则是指:任何元素都不能在页面上随意安放,每个元素都应当与页面上的另一个元素存在某种视觉联系。

但并非是绝对不要使用居中对齐,仅是需要注意使用居中对齐时的效果。例如,大多数婚礼都很庄重、很正式,所以想用居中对齐设计结婚喜帖,完全可以在营造喜庆气氛的同时这么做。

在学习更多的设计原则之前,需要坚持一个原则:只使用一种对齐方式。在页面上只使用一种文本对齐,所有文本都左对齐,或右对齐,或居中对齐。不过,除非可以确保这些元素都能以某种方式对齐,才可以在一个页面上同时使用不同的对齐方式。(可惜不方便举例子,理解这段矛盾的话,请参照原书 P35)

重复

Robin 重复原则指出:设计中的某些元素需要在整个作品中重复出现。重复的元素可能是一种粗字体、粗线条、某个项目符号、颜色、某种设计要素、格式、空间关系等等。

读者能看到的任何地方都可以作为重复的元素。为了实现重复,可以增加全新的元素,可以选择简单的元素并以多种不同的方式加以重复,甚至可以增加与页面主题没有任何联系的元素。只要确保重复行为看起来像是有意为之,而不是乱七八糟的就行。

重复原则可以将作品中的各部分连接在一起,从而统一并增强整个作品的视觉效果。重复不仅只对一页的作品有效,对多页的文档设计更为重要。

对比

对比是增强页面视觉效果的最有效途径,也是在不同元素之间建立一种有组织的层次结构的最有效方法。Robin 对比原则指出:页面上的不同元素之间要有对比效果,以此达到吸引读者的对比效果。如果两个元素不完全相同,就应当使之不同,而且应当是截然不同。

对比不仅可以用来吸引眼球,还可以用来组织信息、清晰层级、在页面上指引读者,并制造焦点。可以采用多种方式产生对比,比如大字体与小字体的对比;典雅的旧式体与加粗的无衬线体产生对比;细线与粗线的对比;冷色与暖色的对比;平滑材质与粗糙材质的对比;水平元素与垂直元素的对比;间隔很宽的文本行与紧凑在一起的文本行形成对比;小图片与大图片的对比等等。

需要记住一个重要原则:想要实现有效的对比,对比就必须要强烈。千万不要畏畏缩缩。如果两个元素虽然不同,但是区别不大,这时候就不是对比了,而是冲突。不应该用 12 磅大小的字体与 14 磅大小的字体进行对比;也不要用 0.5 磅的线与 1 磅的线来对比;深棕色与黑色的对比也是不合适的。

总结

一个关于设计(同时也是生活)的更一般的指导原则是:不要畏畏缩缩。

  • 不要害怕留有空白;

  • 不要害怕设计是不对称的;

  • 不要害怕把图片设置得太大或太小;

  • 不要害怕把单词设置得非常大或非常小。

如果页面上的一些元素是对齐的,这会得到一个更内聚的单元。即使对齐的元素的物理位置是彼此分离的,但它们之间也会有一条看不见的线把彼此联系在一起。尽管 可能会分开某些元素,但对齐原则可以告诉读者,即使这些元素不靠近,它们任然是属于同一组的。

初学者通常采用居中对齐,居中对齐会创建一种更正式、更稳健的视觉效果,这种效果更为中规中矩,但通常也更乏味。这是一个误区,大多数精巧的设计通常都不会采用居中对齐。初学者需要从一开始就强制自己避免使用居中对齐。通过善用 ,并结合明确的左对齐或右对齐,来改善设计的实现。

将对比与其他原则:、、 合理搭配使用,才会有更好的整体效果。设计页面时,只使用一种原则是很少的。

《写给大家看的设计书》
亲密性原则
亲密性原则
亲密性原则
对齐原则
重复原则