设计一个好版式的诀窍

为什么书和杂志通常会统一版式?即便是视觉设计调整替换,在版式布局上也追求一致和谐,视觉舒适,不然读者会感到混乱,直接不看了或者跳到下一页。在出版物,网页设计,插画以及其他跟这些有联系的元素中,成功的设计取决于画面的绘制以及视觉引导。

也许有些人觉得这不是什么大问题!因为我们是学习文化课程长大,从小看设计相对较少,否则就能了解它到底有什么规律。在大多数文化环境下,我们习惯从左到右阅读。所以貌似视觉引导听起来不难。只需要在从左边开始并且让视线落在那个地方即可。其实在视觉设计中最大的挑战是引导读者按正确顺序阅读,至少要是你希望他们看到的顺序,这是版式设计最具有挑战性的地方。

规则

我基本上没有按规则走,但是吧,老师和牛逼的艺术家们说的这几句让人印象深刻。

在你打破常规之前,你必须先知道规则

你必须了解现实的世界后才能创造属于你的世界。

如果你去研究那些规则突破者,会发现他们都是从现实的,基础的学起并在这些基础上演变发展。规则是对版式,类型,颜色,插画以及摄影的基本理解,以及涉及到眼睛如何注意他们,当他们放在一起的时候大脑会怎么解读它们。

被很多大师应用在设计布局中的是“z”模式。它是(西方文化)重要信息阅读的战略布局:从左上角开始,向右然后向下,最后再回到左边。从上到下布局。标准而又简单。

当我在网上发现1950年的版式设计规则时忍不住笑了。这些规则是合理的,而且依旧是在讲设计基础。

  • 当你想要设置框架或者是提请注意信息时,可以使用边框把它们框起来(例如
    目录,日历,特殊说明)
  • 文本列和插图可以创建模糊的边框效果
  • 通过边框加阴影来让人注意到边框或图像
  • 通过比例(尺寸),颜色,画面位置的对比引导读者注意到一些重要的元素。确保这些东西对内容呈现的辅助作用
  • 通过加大,加粗或者图形元素来创建画面焦点。使用具有视觉重感,视觉强度或有颜色的元素进行对焦
  • 通过网格去组织画面元素。确保网格的灵活度,但是网格节不能过小。为了获得最大的灵活度,将画面划分为四到五列最佳。
  • 多列组织文本,在视觉上切分成更小的信息块更易于阅读
  • 在一个标准的页面上将文本划分成均等的两到三列,阅读体验最佳
  • 引用或者是编辑其他类型的支持内容,可以使用单个较宽行高短的列来排版

所以说,这些简单的规则依旧沿用到今天甚至还会继续沿用到未来。 但伴随着消费者文化的发展以及这些年在设计上很多牛逼的规则突破者的创新,规则在不断的演进发展。设计的一个演变是网格系统。据维基百科显示

第二次世界大战后,一些平面设计师,包括ax Bill,Emil Ruder等,受到了an Tschichold的现代主义思想的影响,开始质疑传统页面的相关性布局。他们开始设计一个灵活的系统,能够帮助设计师在组织页面时实现一致性。也因此现代排版网格与印刷开始关联起来

最酷的秘诀

之前,插画老师给我们看了一个方便识别画面焦点的工具。首先,从左上角到右下角画出一条对角线,页面可以是水平或者是垂直的。他对任何方向都是合适的。

接下来,从其他两个角各画一条直线垂直连接刚画好的水平线。线连接的点就是注意力的焦点即最大注意区域。可以做个试验。找一副著名的画作,然后在上面画上这些线(当然不是在博物馆里,否则你会被抓起来啊哈哈哈。)你会看到画家们是如何用这种布局创作了伟大的艺术


现在,你可以拿一本杂志或者一个网页做相同的尝试。首先。想想这个页面是怎么设计的。它看起来舒不舒服。当你盯着页面看的时候,你的眼睛的注意力先后顺序。你会因为看到这个页面而感到焦躁或者兴奋么?好了,现在你可以画一条线然后看看页面是怎么布局的。

如果没有任何重要的元素落在线相交的区域,你会感到焦虑,因为你的眼睛努力的看画面但是你的脑子里却一片混乱,因为版式的布局是逆向的,违背一般视觉规则。如果布局得好,你会感到兴奋,因为你的注意力被引导到所要表达展示的页面元素上。

当涉及到处理客户调整设计方案的需求时,使用这种布局方式去做示范。当你使用这种布局,他们更容易理解元素的放置。量化他们不想破坏的规则,使他们关注最终产品,让团队对他们的想法感到兴奋。因此把这个秘籍融入到设计中,你会发现在应对客户设计需求时,你有更多的余地。

所以说,有时候可以这样玩,坚持别人的规则,允许你打破他们不知道或者看不到的规则。

编译原文:http://www.webdesignerdepot.com/2013/06/the-trick-to-designing-a-great-layout/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,726评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,419评论 25 707
  • 当清晨的闹铃响起的时候,我的潜意识里闹铃10分钟后还会响,我不起床,我再睡一会,但脑海里的另一种声音告诉我...
    糖多米阅读 353评论 0 0
  • 《非暴力沟通》 非暴力沟通强调,感受的根源在于我们自身。我们的需要和期待,以及对他人言行的看法,导致了我们的感受。...
    幸福虚度的野人阅读 247评论 0 1
  • 我在格列姆悬崖边上遇到了一个羸弱的灵魂。 他穿着一身污血侵染的军装,左手紧张地反扭着,右手抓握着猎枪,我注意到他没...
    苏格拉低智商阅读 322评论 0 0