读书笔记:写给大家看的设计书

前言:

今天阅读了《写给大家看的设计书》,随手记了点笔记。

你眼中的设计师是什么样子的
是拿个画刷在街头粉刷着奇怪颜色的艺术家,是熟练地使用AI,PS等工具在计算机里画出一个个鲜活的画面的人,还是轻松的手绘着每日漫画的人?
我眼中的设计师是,满脑子都是ICON,界面,菜单,文字,PS….这么一群人。

正文:
读过《写给大家看的设计书》(PDF下载地址
写给大家看的设计书,豆瓣链接

以下是一些读书笔记

在开始文章之前让我们个简单的现象:
ABOUT THIS ARTICLE
About this article
第一行是大写,第二行是小写,有什么变化吗?
*大写变成小写后,留出了更多的空间,更加易读

一、设计原则
设计为什么需要一些原则,作者用『自己认识了一棵数的名字后开始注意到这样的树的』存在打了个比方:

一旦能够说出什么东西的名字,就会很容易注意到它。你就会掌握它,拥有它,它在你的控制之中。

设计需要遵守的什么准则(principles)呢?

对比(Contrast)。设计元素不能太相似,要有区分,有着重点。
重复(Repetition)。视觉元素要重复出现,增加条理性。
对齐(Alignment)。设计元素直接的排列需要有规律。
亲密性(proximity)。设计元素之间相关连成一个单元。

二、设计原则与方法

1)亲密性。设计元素按照视觉和逻辑关系进行组合。具有关联的放到一起,不相关的隔开。
设计方法:观察页面上的有多少孤立元素,将过多的孤立元素按照关系组合。

2)对齐。

居中是初学者最长用的对齐方式,中规中矩,但很乏味。若非要居中,请明显一点,或包装以下一下让它更生动。

  1. 一个页面只使用一种对齐方式**
  2. 文档的外观若差强人意,最可能的问题在于对齐
  3. 我们的眼睛喜欢看到有序的事物;这会给人一种平静、安全的感觉。也有助于表达信息。
  4. 绝对不要在左对齐的正文或缩进的文本上方将标题居中。
  5. 按照惯例,第一段都不缩进
  6. 找一条明确对齐线,若有照片,可沿照片直边与文本的平行边对齐。
  7. 若对齐很明确,可适当打破对齐

设计方法:注意元素位置,总能找到与之对齐的元素,设计同一而有条理的对齐方式。

3)重复,即元素的一致性
这里的重复指某个符号,字体,颜色,格式等。

  • 设计的某些方面需要在整个作品中重复
  • 重复有助于视觉上的连续
  • 重复为作品带来专业和权威性感受

设计方法:

  • 页面底部使用一致的线
  • 编号项列表
  • 避免太多重复一个元素
  • 相同的字体,颜色…

4)对比:增强页面视觉效果

不要畏畏缩缩
不要使用相近的项对比

设计方法:

字体大小、种类、粗细、冷暖色、材质、位置、间隔…

三、实例

我挑选了3个产品宣传页面的图来做对比说明:

搜狗输入法:
搜狗输入法

360安全浏览器:
360浏览器
360
6.1正式版(4月3日)35.2MB

百度输入法:
百度输入法
button
立即下载

百度的立即下载和版本信息在图片右侧,具体见其官网。

亲密:百度输入法将介绍和下载分离,其他产品介绍在上,下载在下。百度的的两块是独立存在,且中间空白太大。
对齐:百度局部左对齐,真题顶部对齐,但中间空白部分凌乱。搜狗右对齐;奇虎左对齐。
重复:每个产品都在相同介绍处,重复字体的样式。
对比:百度的介绍字体边框北京形成对比,但字体颜色相差太小。其他产品在颜色、形状、粗细上有强烈反差,可辨识度好。

由此分析,百度的产品介绍在设计上可能需要改进。

«« 产品分析之logo design memory of iphone »»