欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

一本写给所有人看的设计书,设计原则:亲密、对齐、重复、对比

最编程 2024-04-10 12:30:42
...

四大基本原则

1 亲密性(Proxinity)

①将相关元素组织在一起

不够亲密,二者不一定有关系

 相对亲密,二者很可能有关系

②位置越靠近说明关联越近 

 

③存在亲密性→【组合】成一个视觉单元,避免过多的独立元素

 

右边明显比左边好

④留白:分割亲密性、撇清关系

下面左图最严重的问题是所有的信息都堆在了一起【其实写代码也同理 代码之间为什么要加空格? - 知乎 https://www.zhihu.com/question/398008181

【注意】

  1. 避免一个页面上有太多孤立的元素。
  2. 不要在元素之间留出同样大小的空白,除非各组同属于一个子集。
  3. 标题、子标题、图表标题、图片能否归入其相关材料?一定要理清。
  4. 在有很近亲密性的元素之间建立关系。
  5. 不同属一组的元素之间不要建立关系!如果元素彼此无关,要把它们分开。
  6. 不要仅仅因为有空白就把元素放在角落或*。

2 对齐(Alignment)

①任何元素在排版时,不是随意摆放,每个元素都应当与页面上的另一个元素有某种视觉联系。

②最好用一种文本对齐

一个左对齐,一个中间对齐→无共同对齐方式,两种对齐也无关联

一个左对齐,一个右对齐→但上面标题的右边和下面右对齐的边界对齐了

③总是居中对齐?为何不试试别的对齐

居中对齐是初学者最常用的对齐方式。因为看起来安全,感觉上也舒服。

居中对齐会让人产生更正式、更稳重的感觉,这种外观显得更为中规中矩,但通常也很乏味

eg1. 报告封面

业余水准

 明确的左对齐,看不见的线提供了强有力的对齐基准

 eg2.信纸的设计

1.边框束缚了整个空间,给人一种受限制的感觉 2.页面开放了,突出了左对齐

3.文本位于左侧,采用右对齐 勇敢的设计!

 采用居中对齐必须是一个深思熟虑的决定。明显而有意为之的居中对齐效果最好。

 

对齐的目的:使页面统一、有条理

【注意】

  1. 避免在页面上混合使用多种文本对齐方式(eg.不要将某些文本居中,而另外一些文本右对齐)。
  2. 着力避免居中对齐,除非你有意识地想要创建一种比较正式、稳重(通常也更乏味)的感觉,如婚礼等。

3 重复(Repetition)

①什么是重复,重复的作用

让设计中的视觉要素在整个作品中重复出现

 后面穿同样衣服的人很可能同属一个组织/组group

②重复不代表一定重复一样的东西;重复元素不一定是图形,可以是空白、线、字体、对齐或其他任何你想重复的东西(颜色、形状、材质、空间关系、线宽、字体、大小和图片等)

上面不同版本有不同关注重点

 

 

 把一个元素从现在的设计中抽取出来,并根据这个元素创建一个新设计

 打字机图像在“电影剧本创作大会”的所有宣传材料中都有出现→只用重复一部分图像

 重复带来权威性、专业性

 【注意】

  1. 重复有其意义,但过多的重复带来疲劳

4 对比(Constrast)

①如果两者不完全相同,那就让他们截然不同

右边的图明显比左边的图更容易发现视觉重心

避免页面上的元素太过相似。如果元素(字体、颜色、大小、线宽、形状、空间等)不相同,那就干脆让它们截然不同。

②增强页面效果、有利于重点信息的组织

 

 

 

 

 总结:通过对比达到吸引人眼球的目的

总结

优秀的设计基本上全部运用了以上四大原则

字体与人生

字体应该是所有设计的基础 

 【to do】

设计的过程

  1. 从中心点开始。确定希望读者最先看什么。除非你已经决定要建立一个非常协调的设计,否则就应该创建一个有强烈对比的中心点。
  2. 将信息分组。按逻辑进行分组,确定这些组之间的关系。通过组之间的靠近与否(亲密性)来显示这些关系。
  3. 组织文本和图片时,建立并维护明确的对齐。能看到一个明显的边界,如照片边界或垂直线条,可通过其他文本或对象的对齐加强此边界。
  4. 创建重复,或者找出可以重复的项。为建立重复,可以使用粗字体、线、装饰符号或者某种空间布局。看看哪些元素已经自然地重复,再看看是否适合加大重复力度。
  5. 除非你已经决定创建一种协调的设计,否则一定要建立强烈的对比,这样会吸引读者的视线。要记住,对比要黑白分明。如果页面上的所有一切都又大又粗,很华丽,那么根本不存在任何对比!不论通过更大更粗来建立对比,还是通过更小更细形成对比,关键是要有所不同,这样才能引人注目。

启发

把正确的信息写下来将更容易记住。不是先乱猜再写下错误的答案,考试时得到正确答案的过程会让你很有收获。

在测验和答案之间反复检查,与朋友们一起讨论,特别是要把这些问题应用于你身边的其他页面设计。

参考

写给大家看的设计书7分钟总结【益点PS】_哔哩哔哩_bilibili

写给大家看的设计书(第3版) (豆瓣) (douban.com)