分分钟掌握设计基本原则
在这个创意无处不在的时代,越来越多的人成为设计师。简历、论文、PPT、个人主页、博客、活动海报、给客人的邮件、名片……,处处都在考验你的设计能力。
美术功课不好?没有艺术细胞?毫无设计经验?
没关系,本文就是为这些人准备的。
知识就是力量。当你看到一个设计得不好的页面时,大多数人可能会说他们不喜欢这个页面,但是对于如何修改却毫无头绪。我们会指出4大基本概念,几乎每一个精良的设计中都用到了这4个概念。一旦认识了这些概念,就会注意到你的页面中是否已经应用了这些概念。只有找出问题所在,方能得出解决方案。
放轻松,我们开始吧。
设计4大基本原则
以下是对基本设计原则的概述,每一个优秀的设计中都应用了这些设计原则。尽管我在后面还将会讨论这些原则,不过要记住,它们实际上是相互关联的。只应用某一个原则的情况很少。
对比(Contrast)
对比的基本思想是,要避免页面上的元素太过相似。如果元素(字体、颜色、大小、线宽、形状、空间等)不相同,那就干脆让它们截然不同。要让页面引人注目,对比通常是最重要的一个因素,正是它能使读者首先看这个页面。
重复(Repetition)
让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片,等等。这样一来,既能增加条理性,还可以加强统一性。
对齐(Alignment)
任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。这样能建立一种清晰、精巧而且清爽的外观。
亲密性(Proximity)
彼此相关的项应当靠近,归组在一起。如果多个项相互之间存在很近的亲密性,它们就会成为一个视觉单元,而不是多个孤立的元素。这有助于组织信息,减少混乱,为读者提供清晰的结构。
下面,我们先来详细介绍下亲密性和对比,这两个基本原则。
亲密性
Robin亲密性原则是指:将相关的项组织在一起,移动这些项,使它们的物理位置相互靠近,这样一来,相关的项将被看作凝聚为一体的一个组,而不再是一堆彼此无关的片段。
举个简单的例子
在一个页面上,物理位置的接近就意味着存在关联(实际生活中也是如此)。
亲密性原则也并不是说所有一切都要更靠近,其真正的含义是:如果某些元素在理解上存在关联,或者相互之间存在某种关系,那么这些元素在视觉上也应当有关联。除此以外,其他孤立的元素或元素组则不应存在亲密性。位置是否靠近可以体现出元素之间是否存在关系。
我们看一眼就能回答右边的传单上列了多少场读书会,因为每场读书会的信息都被归入有逻辑的亲密关系中(另外,活动名称现在加粗了,使用的是对比原则)。请注意,三场读书会之间的空白是相同的,显示出这三组之间有某些关系。就算文本字号小到不能阅读,你也马上就能知道有三个活动。
训练你的设计师之眼:找到至少5个让第二个例子看起来更清晰、表达更流畅的地方。(建议在第220 页。)
把问题说出来
这些章节中提供的例子都很简明易懂。但是既然你现在已经意识到了亲密性原则的重要性,那么就应该以崭新的角度重新审视身边的设计。
试一试:
找到因为没有善用亲密性而表意不清的例子。把想到的问题说出来。或许可以在一张纸上勾勒出你想如何有效组织信息的方案。
可以从一本书或杂志的目录上入手寻找缺少亲密性的案例。你经常会发现页码和章节或文章名离得太远。
所有的设计作品都要使用四种基本原则,也就是说,如果某个作品看起来业余又没有条理,那么缺少亲密性很有可能并不是出现的唯一问题。但是至少你已经可以准确地找到这个问题了。
亲密性小结
如果多个项相互之间存在很近的亲密性,它们将成为一个视觉单元,而不是多个孤立的元素。彼此相关的项应当归在一组。要有意识地注意你是怎样阅读的,你的视线怎样移动:从哪里开始;沿着怎样的路径;到哪里结束;读完之后,接下来看哪里?整个过程应当是一个合理的过程,有确定的开始,而且要有确定的结束。
1、根本目的
亲密性的根本目的是实现组织性。
2、如何实现
微微眯起眼睛,统计眼睛停顿的次数来数一数页面上有多少个元素。如果页面上的项超过3 ~ 5 个(当然,这取决于具体情况),就要看看哪些孤立的元素可以归在一组建立更近的亲密性,使之成为一个视觉单元。
3、要避免的问题
避免一个页面上有太多孤立的元素。
对比
Robin 对比原则指出:页面上的不同元素之间要有对比效果,达到吸引读者的对比效果。如果两个项不完全相同,就应当使之不同,而且应当是截然不同。
我们可以采用多种方式产生对比。如大字体与小字体的对比;细线与粗线的对比;冷色与暖色的对比;平滑材质与粗糙材质的对比;水平元素(如很长的一行文本)与垂直元素(如又高又窄的一列文本)的对比;间隔很宽的文本行与紧凑在一起的文本行形成对比;小图片与大图片的对比,等等。
对比对于信息的组织至关重要,应该让读者一眼看到文档就能立即理解文档的内容。
这是一封相当典型的自荐信。信息是完备的,不过这样一封自荐信肯定无法吸引你的注意。
注意以下问题。
■ 职位不清晰;职位和正文混杂在一起。段与段之间不清晰。
■ 页面上存在两种对齐方式:居中和左对齐。
■ 不同成就之间的间距和不同段之间的间距相同。
■ 布局不一致——日期有时在左边,有时在右边。
注意,如果使用了对比,不仅页面更吸引人,文档的目的和组织也会更一目了然。你的简历是别人对你的第一印象,所以一定要做得出色。
上述问题很容易修正。
■ 只保留一种对齐方式:左对齐。
■ 明显的标题。
■ 段之间的间隔比各段内文本行之间的间隔大(空间关系对比;亲密性)。
■ 学位和职位都用粗体(标题字体的重复),这种强烈对比能使你很快抓住要点。
对比小结
在页面上增加对比能吸引人的眼球。我们的眼睛喜欢看到对比的事物。如果页面上放两个不完全相同的元素(比如有两种不同字体,或者有两种不同线宽),它们就不能类似。要实现有效的对比,这两个元素必须截然不同。
1、根本目的
对比的根本目的有两个。一个是增强页面的效果。一个目的是有助于信息的组织。
2、如何实现
可以通过字体选择(见下一部分)、线宽、颜色、形状、大小、空间等来增加对比。增加对比很容易,途径有很多,这可能是增加视觉效果最有意思也最让人满意的方法了。重要的是:对比一定要强烈。
3、要避免的问题
不要犹豫。如果各个项不完全一样,干脆让它们截然不同!
未完待续……
本文选自《写给大家看的设计书》。
作者:Robin Williams
译者:苏金国,李盼
页数:252
开本:16
定价:79(精装),59(简装)
▷ Amazon设计类销售排行榜图书!
▷ 示例更新,全新升级!
▷ 设计大师手把手教你学设计!
本书作者RobinWilliams,世界著名设计师、技术专家和畅销书作家。图灵社区对她做过访谈,感兴趣的读者可以看看被豆瓣网友评为J.K.罗琳似的艰苦奋斗代表是如何自我定位的:ituring.cn/article/41065。
怎么样?要不要来一本!点击下面链接跳转到京东购买。
精装:http://item.jd.com/11818317.html
简装:http://item.jd.com/11824338.html
分分钟掌握设计基本原则相关推荐
- 电子电路设计基本概念100问(三)【学习目标:原理图、PCB、阻抗设计、电子设计基本原则、基本原器件等】
笔者电子信息专业硕士毕业,获得过多次电子设计大赛.大学生智能车.数学建模国奖,现就职于南京某半导体芯片公司,从事硬件研发,电路设计研究.对于学电子的小伙伴,深知入门的不易,特开次博客交流分享经验,共同 ...
- 史上最完整交互设计基本原则
via: http://36kr.com/p/5042087.html 摘要:如何设计出具有优秀用户体验的产品是交互设计师始终面临的一道难题,"好的产品设计一定是建立在对用户需求的深刻理解上 ...
- 史上最完整交互设计基本原则|推荐收藏
史上最完整交互设计基本原则|推荐收藏 人人都是产品经理 • 2 小时前 摘要:如何设计出具有优秀用户体验的产品是交互设计师始终面临的一道难题,"好的产品设计一定是建立在对用户需求的深刻理解 ...
- 电子电路设计基本概念100问(一)【学习目标:原理图、PCB、阻抗设计、电子设计基本原则、基本原器件等】
笔者电子信息专业硕士毕业,获得过多次电子设计大赛.大学生智能车.数学建模国奖,现就职于南京某半导体芯片公司,从事硬件研发,电路设计研究.对于学电子的小伙伴,深知入门的不易,特开次博客交流分享经验,共同 ...
- 实验室设计基本原则SICOLAB
实验室设计基本原则SICOLAB 实验室设计.实验室建设施工SICOLAB 实验室布局必须符合实验流程的规律,从样品接收.样品暂存.试剂和耗材储存.前处理和准备.样品分析测试.清洗到废物回收和处理,都 ...
- 实用分层模板,分分钟了解UI界面设计基本原则!
用户界面(UserInterface) 也称人机界面,是指软件用于和用户交流的外观.部件和程序等,简称UI,它是用户和智能手机之间进行交流和通讯的平台和纽带,是用户感知.认知.使用和体验软件的最主要的 ...
- UI实用可临摹素材|剖析UI界面设计基本原则!
用户界面(UserInterface) 也称人机界面,是指软件用于和用户交流的外观.部件和程序等,简称UI,它是用户和智能手机之间进行交流和通讯的平台和纽带,是用户感知.认知.使用和体验软件的最主要的 ...
- 响应已被截断_技术:RWD响应式网站网页设计基本原则
响应式网站网页设计 RWD响应式网站网页设计对于解决多尺寸屏幕问题是个很好的解决方案,从平面的角度切入需克服很多困难,没有固定的页面尺寸.没有毫米或英寸,没有任何限制会让人感到无从下手.随着建立网站的 ...
- ui界面设计基本原则
用户界面(UserInterface) 也称人机界面,是指软件用于和用户交流的外观.部件和程序等,简称UI,它是用户和智能手机之间进行交流和通讯的平台和纽带,是用户感知.认知.使用和体验软件的最主要的 ...
最新文章
- 详解PreparedStatement
- Jewels and Stones
- Swift - 使用set,get确保索引加减在正常的范围内
- MySQL记住密码_技术分享 | mysqlsh 命令行模式 密码保存
- 分布式系统概念 | 分布式理论:CAP、BASE
- 50万年薪程序员,被百万网民怒喷后,却迎来大撕逼
- 内部收益率irr_介绍一个神器,内部收益率IRR
- 漂亮的个人团队介绍网页模板
- jar 反编译 java_java打包jar反编译
- 从零实现深度学习框架——实现常见运算的计算图(上)
- 遥感动态监测实验(以福州为例)
- rtmp推流工具_EV录屏推流抖音直播教程——墨涩网
- YUV播放器支持10bit视频
- [dlang](4)自定义的mysql orm工具
- 计算机系统概论(原书第2版)部分课后习题答案(第四章)
- jit和jitx区别_JIT是什么东西 分分钟打下来!
- Android权限管理原理(含6.0)
- DS18B20 Proteus
- python处理脱敏问题
- 经典实践 | 网速测速小工具(上)
热门文章
- linux hosts文件如何修改_如何修改hosts文件?让你简单方便快捷管理
- iis5.1配置php5.3.1详解,WinXP IIS 5.1 PHP 5.3 VC9.0 配置详解
- php 表单处理,用PHP提交from表单的处理方法
- python Process finished with exit code -1073741819 (0xC0000005) 解决
- linux 重新加载驱动程序,在linux中模拟设备驱动程序崩溃。让python重新加载i
- HBase shell 命令执行
- Django缓存和信号
- os.makedirs和os.mkdir 生成文件夹
- Android基础新手教程——1.5.2 Git之使用GitHub搭建远程仓库
- 静态方法调用注入对象(springMvc)