愚人节，沉迷计算设计

今天是愚人节：

有家公司的数学好像不太好？

190-150=4.1 ？

过完节，我们还是要继续学习的，最近看到一本讲解设计原理的书，《写给大家看的设计书（第4版）》，作者Robin Williams从对比、重复、对齐、亲密性四个方面给我们梳理了其中的道理。

四个方面的原理分享给大家：

>> 对比（Contrast）

对比的基本思想是，要避免页面上的元素太过相似。如果元素（字体、颜色、大小、线宽、形状、空间等）不相同，那就干脆让它们截然不同。要让页面引人注目，对比通常是最重要的一个因素，正是它能使读者首先看这个页面。

>> 重复（Repetition）

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

>> 对齐（Alignment）

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

>> 亲密性（Proximity）

彼此相关的项应当靠近，归组在一起。如果多个项相互之间存在很近的亲密性，它们就会成为一个视觉单元，而不是多个孤立的元素。这有助于组织信息，减少混乱，为读者提供清晰的结构。

本文着重谈谈「亲密性」如何被「量化」为计算机语言。

这个属于计算设计的话题，

对于设计师来说比较烧脑，

对于程序员需要对设计有一定的理解。

我们慢慢道来~

从空间上来说，接近的元素，越亲密。

书中举了个形象的例子，就是生活中，如果我们看到两个人走在街上，他们的关系并不明确。如何判断他们的关系？他们认识彼此吗？可以从他们之间的空间距离判断。

>> 物理位置的接近就意味着存在关联（实际生活中也是如此）。

亲密性的含义：

>> 亲密性原则并不是说所有一切都要更靠近，其真正的含义是：

如果某些元素在理解上存在关联，或者相互之间存在某种关系，那么这些元素在视觉上也应当有关联。除此以外，其他孤立的元素或元素组则不应存在亲密性。位置是否靠近可以体现出元素之间是否存在关系。

>> 创建广告传单、宣传册、新闻简报或者其他出版物时，你很清楚其中哪些信息在逻辑上存在关联，知道哪些信息应当强调，而哪些信息不用强调。可以通过分组形象地表现这种信息。

如何用「算法」来判断平面设计作品上的元素之间的「亲密性」呢？

这里以下图的平面设计作品示例：

我们要做的第一步是识别图像上有哪些元素？

是不是需要识别字体、图片、装饰元素、背景等等？

其实不需要，我们可以通过边缘检测，把元素的边界点提取出来，简化平面设计作品。

这里推荐使用opencv的Shi-Tomasi算法，示例：

代码语言：javascript复制

import numpy as np
import cv2 as cv
from matplotlib import pyplot as plt
img = cv.imread('blox.jpg')
gray = cv.cvtColor(img,cv.COLOR_BGR2GRAY)
corners = cv.goodFeaturesToTrack(gray,25,0.01,10)
corners = np.int0(corners)
for i in corners:
    x,y = i.ravel()
    cv.circle(img,(x,y),3,255,-1)
plt.imshow(img),plt.show()

对于本文中的例子，通过边缘检测，提取后，如图所示：