Web设计离不开的4项基本原则

本文转载自:http://turingbook.group.javaeye.com/group/blog/306608(作者为资深Web设计师)

很高兴在上个星期收到了图灵给我寄来的样书《写给大家看的设计书》,看着飘逸的封面,拿着书的感觉也很轻松。这本书的书名似乎挺土的,不过却给我带了第一印象——亲切。

一开始我都会把书粗略的翻了翻(这是我看书的习惯,每次拿到新书,我都会快速的浏览一遍,然后看看目录,对这个书的内容有个大概印象),我快速浏览的时候就发现这本书是彩印的,每一章都用了大量的图文结合+颜色的小例子,这样的方式是读者最喜欢的方式,也是最容易接受知识的方式,就像看漫画一样,看故事一样,不禁的融入其中。

这本书分三部分,第一部分设计原则(Design Principles)包括:第一章:约书亚数,第二章:亲密性,第三章:对齐,第四章:重复,第五章:对比,第六章:复习,第七章:颜色的运用,第八章:更多提示与技巧。第二部分字体设计(Designing With Type)包括:第九章:字体(与人生),第十章:字体类别,第十一章:字体对比。第三部分其他(Extras)包括:第十二章:你掌握了吗,第十三章:测验答案,第十四章:本书所用字体。

这本书由一个小故事开头,约书亚树的故事,在读这本书之前我就已经看过这个小故事了。我记得当时这个小故事是在告诉我:对自己平时的生活要处处留意,要善于观察。而作者是想说:一旦能够说出什么东西的名字,就会很容易注意到它。你就会掌握它,拥有它,使他在你的控制中。这里作者提到的“什么东西”就是作者贯穿全文的4四大基本设计原则——C.R.A.P。C是指“对比(Contrast)”;R是指“重复(Repetition)”;A是指“对齐(Alignment)”;P是指“亲密性(proximity)”。每一个优秀的设计中都应该用了这四大设计原则。

接着作者用了四章的内容分别阐述这四条设计原则,每一章的小例子都是由浅入深,由易入难。小例子采用了对比的方式,先举了没有用设计原则的情况,然后带着读者一起去发现这样的设计有哪些缺陷,如果用了设计原则后设计会变得怎样,让读者真正体会到采用这四条基本原则来设计的好处。很多地方都可见作者很用心的写这本书,每当小例子中出现了新的英文字体,作者都会把他标示在图片的右下方。不得不说全文用了很多我平时都没见过也没用过的英文字体,非常的漂亮,看到这么多的漂亮字体都想一下子收入囊中。然后作者花了一章的篇幅来重温这四条基本原则,并出了两道小测验的题目来考考读者有没有真正的会用到这四条设计原则,而答案在全书的倒数第二章测验答案给了详细的解释。

所有的设计都离不开C.R.A.P这四条基本设计原则,Web设计尤其如此。可以说有了这四条设计原则,你的设计看上去会更专业,更有条理,更统一。除了讲设计原则的这几章外,我最感兴趣的莫过于颜色的运用这一章了,在设计方面我没有接受过正规的培训,大学学的也是数学专业,然而我对设计方面却一直有好感,总是希望通过自己的双手可以绘出我想要的一切,平时走在路上我都会很留意身边很美的画面,试图去把它们圈在我的脑海里。颜色的取法我认为是设计的精髓所在,也是我认为最难的地方。这本书只花了一章来讲颜色,其实色原理论是非常深入,非常复杂的,这里只对色轮做了简要的解释,同时还提到了印刷色CMYK和web色RGB的区别。看到书中有些不错的颜色可惜收藏不了。这一章提到了互补色,我个人觉得还是挺有用的,在这一章让我又重温了一遍互补色的原理。

第八章举了很多方面的小例子,比如说:企业名片,信笺,信封,传单,新闻简报,宣传册,明信片,报纸广告等,涵盖面很广,让读者对基本的设计都有所了解。第二部分全部都在讲字体,告诉读者字体该怎么用,应该注意哪些方面。第三部分主要是在巩固前面说学到的东西,以及附录和索引。

总而言之,对于热爱设计的人来说《写给大家看的设计书》还是非常值得一读的。

Web设计离不开的4项基本原则相关推荐

  1. 《无懈可击的Web设计》_灵活的文字

    常见的方法 body{font-size:12px; } 使用像素单位的优点: 不管使用哪种浏览器或者设备来查看,文字看起来都大小一致. 为什么这么做不是无懈可击的? 以像素为单位设定文字大小之后,W ...

  2. 响应式Web设计的9项基本原则

    响应式web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难.没有固定的页面尺寸.没有毫米或英寸,没有任何物理限制,让人感到无从下手.随着建立网站可用的各种小工具越 ...

  3. web设计经验一 提升移动设备响应式设计的8个建议

    今天看到一些关于web设计的一些建议和设计经验,拿出来分享分享. 第一篇: 提升移动设备响应式设计的8个建议 一.直观性和易用性 在使用移动设备时,对于杂乱.复杂或者不直观的设计造成的混乱不佳的用户体 ...

  4. web页面uri唤醒应用_带有数据URI的高性能Web设计

    web页面uri唤醒应用 我们最近在Webdesigntuts +上介绍了Web设计中的数据URI的内容,原因和方式 ,在其中研究了使用数据URI进行性能友好的界面设计的一些可能性. 在今天的Prem ...

  5. 如何用手绘草图+头脑风暴进行移动Web设计

    如何用手绘草图+头脑风暴进行移动Web设计 编者按:前段时间在微博上流传过一张名为"外国设计师VS国内设计师:精采PK"的趣图,在图中我们可以看到老外设计师在做设计前先签好合同,按 ...

  6. 第一章 Web MVC简介 —— 跟开涛学SpringMVC

    第一章 Web MVC简介 -- 跟开涛学SpringMVC Web MVC简介 1.1.Web开发中的请求-响应模型: 在Web世界里,具体步骤如下: 1.  Web浏览器(如IE)发起请求,如访问 ...

  7. 移动 Web 设计中的一些错误理念

    目前,移动互联网飞速发展,越来越多的网站和应用开始向移动设备上迁移.但是,由于设备和操作方式的不同,移动Web设计和传统的Web设计之间有很多不同点,这就导致了一些错误的设计理念出现. 在设计过程中我 ...

  8. 什么是响应式Web设计?怎样进行?

    开 始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也是在国庆假期里开始 做Joomla文档翻译的:长假好时光,总会可以抽出 ...

  9. 第一章 Web MVC简介 —— 跟开涛学SpringMVC 博客分类: 跟开涛学SpringMVC webmvcjavaeespring跟开涛学SpringMVC Web MVC简介 1.1、We

    第一章 Web MVC简介 -- 跟开涛学SpringMVC 博客分类: 跟开涛学SpringMVC webmvcjavaeespring跟开涛学SpringMVC Web MVC简介 1.1.Web ...

最新文章

  1. 网页设计师的必备选择20 +必需的Windows应用程序
  2. Action 相关组件
  3. RHEL6网络相关配置
  4. Thymeleaf 常用属性
  5. pd对焦速度_捕捉爆炸瞬间!魅蓝Note6双PD对焦速度逆天
  6. orm2 中文文档 7. 创建和更新记录
  7. 最近在学习文案,一边看文案书,一边勾画笔记,一边练习
  8. Spring Boot 使用Dubbo 创建Hello Wrold
  9. 不同调制方式的包络和功率谱
  10. 上三角矩阵法Matlab,在MATLAB中重塑/变换上三角矩阵
  11. 计算机图标在桌面右侧,怎样把桌面图标放到屏幕的右边??
  12. srt,ass,ssa三种字幕的区别
  13. Android11.0(R) MTK6771 平板横屏方案修改(强制app横屏 + 开机logo/动画+关机充电横屏 + RecoveryUI 横屏)
  14. cocos2d-x 3.2 之 三消类游戏——万圣大作战
  15. java多线程复习与巩固(一)
  16. 怎么把视频内存压缩小?视频内存过大怎么压缩?
  17. 科普|AGV自动运输车的不同导航方式以及优缺点
  18. curl 支持ws吗_使用CURL请求WebService | 字痕随行
  19. 关于gp和mysql的两点区别
  20. 通过命令行运行matlab代码

热门文章

  1. criscriter英语测试软件,English test (英语测验)
  2. python tk messagebox_tkMessageBox
  3. 写一个函数,2 个参数,1 个字符串,1 个字节数,返回截取的字符串,要求字符串中的中文不能出现乱码
  4. java B2B2C Springboot电子商务平台源码-Feign 基本使用
  5. 顶尖创新型人才:10种与众不同的行为方式
  6. 96.6. Template
  7. VMware猛涨vSphere价格 并减少版本数量
  8. 在eclipse中搭建maven工程(第二种方法)
  9. CentOS LVM
  10. char[1] or char*