《写给大家看的设计书》摘要与总结

写给大家看的设计书

该书适合完全没有设计背景,或在设计方面没有经过正规培训的人。 该书的描述浅显易懂,并且配有很多插图来做描述的说明。阅读起来觉得很轻松。

该书主要有以下部分组成

  • 设计原则
  • 字体设计
  • 其他

设计原则

书中提到好的设计有如下4个原则

  • 亲密
  • 对齐
  • 重复
  • 对比

亲密

亲密指的是,将相关的内容组织在一起(即距离靠近)。这样有助于让不同的内容区分开,让信息变的清晰。

当页面有超过5个孤立的元素时,可以考虑是否把一些孤立的元素放到一起,否则页面容易显得比较乱。

为了显示亲密性,相关元素在距离上靠的比较近。同样的,不相关的元素之间应该有比较大的间距,或者有分隔线之类,让用户能明显的知道这些内容是不相关的。

对齐

对齐指的是:任何元素都不能在页面上随意安放。每一项都应当与页面上的某个内容存在某种视觉上的联系。对齐能给人整齐,有序的感觉。我们的眼睛也喜欢看到有序的事物,这给人一种平静,安全的感觉。

要避免页面上混合使用多种文本对齐方式(如有的文本左对齐,有的右对齐)。

另外,也要避免使用居中对齐,除非你有意识的想创建一种比较正式,稳重(通常也更乏味)的表示。并不是说完全杜绝使用居中对齐,有时可以有意的选择居中对齐,但不要把它作为默认选择。

重复

重复指的是:** 设计的某些方面需要在整个作品中重复。**其实也就是一致性。一个作品,如果没有重复,给人的感觉就是东拼西凑的,取该作品的一部分,我们也不能判断是否属于该作品。

要避免太多重复一个元素。太多的重复让人讨厌。

对比

对比指的是:** 如果两个项不完全相同,就应该使之完全不同。而且应当是完全不同。**对比能凸显不同,增强视觉效果。

对比的方式可以是,大小,颜色,背景,字体,位置等等。如标题和正文,可以用不同的字的大小,颜色,字体,给标题加个背景等等来做对比。

要避免的是,要用对比,就要截然不同。例如不要用棕色文本和黑色文本进行对比,不要用两种类似的字体进行对比。

颜色的运用

介绍了色轮,互补色,三色组,分裂互补三色组,类似色,亮色和暗色,色质和颜色模型:RGB 和 CYMK,顺带着介绍如何配色。

字体

介绍了字体如何搭配使用,以及各种英文字体的介绍。

其他

一些练习,以及答案。

试读

http://read.douban.com/ebook/402418/

致谢

《写给大家看的设计书》这书是用coding.net的1码币换的。Thanks coding.net


本文遵守创作共享CC BY-NC-SA 4.0协议 网络平台如需转载必须与本人联系确认。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序人生 阅读快乐

CSS设计指南 (第3版)

《图灵程序设计丛书:CSS设计指南(第3版)》是一本面向初中级读者的经典设计指南。全书共分8章,前4章分别介绍了HTML标记和文档结构、CSS工作原理、定位元素...

661
来自专栏九彩拼盘的叨叨叨

第三届 CSS 开发者大会笔记

这次大会于 2016 年 12 月 17 日在广州的天虹酒店举办。演讲嘉宾有大漠,勾三股四等一些业界大牛们。特邀嘉宾有 Andrey Sitnik(PostCS...

1282
来自专栏前端小作坊

中文排版二三事

前段时间一直在折腾中文排版相关的事情,自认为结果还算不错。故开源之,即是Entry.css。这是一个可配置的、更适合阅读的中文文章样式库,可以用来快速搭建中文博...

911
来自专栏DeveWork

WebFont 三宗罪之二:吹毛求疵的WebFont 渲染差异

话说上次发了篇危言耸听的“WebFont 三宗罪”系列之一,今日来讲三宗罪之二:吹毛求疵的WebFont 渲染差异。为什么用上“吹毛求疵”这个修饰词呢?因为Je...

2205
来自专栏IMWeb前端团队

rem不是神农草,治不了移动端百病

有很多朋友一聊起做移动端重构,第一个问题就是用什么单位合适。%,还是rem?(如果你还不太了解rem是什么单位,可先前往CSS3的REM设置字体大小了解。) 然...

21910
来自专栏ytkah

一行js弹窗代码就能设计漂亮的弹窗广告

  接到一个设计需求,要求xmyanke在网站右侧挂一个弹窗广告宣传最近的活动,找了半天都没看到合适的,自己鼓捣了一行js弹窗代码就能设计漂亮的弹窗广告,来瞧一...

6508
来自专栏GIS讲堂

lzugis——Arcgis Server for JavaScript API之自定义InfoWindow(续)

同样的标题后面加了一个括弧,不是为了增减博文数量,而确实是上个功能的完善,标注为续,意思是继续上次的内容,来说说如何自定义InfoWindow。

1583
来自专栏我爱编程

初识HTML5

客观地讲,没有不好的技术,只有没有用好的技术。JavaScript 的坎坷遭遇让我不禁想起了另一种被人们滥用的技术:Adobe公司研发的 Flash。

1832
来自专栏菜鸟前端工程师

html+css学习笔记019-H5响应式布局0自适应布局

3432
来自专栏编程

Web前端开发的四个阶段

第一阶段:HTML的学习 超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静态网页还是动态网页,最终...

2015

扫码关注云+社区

领取腾讯云代金券