Edmund C. Arnold 是一名报纸设计师,被公认为现代报纸设计之父。他设计了超过一千种报纸,包括波士顿环球报,国家观察报,今日报,多伦多星报,堪萨斯城之星报等等。在那个年代,人们对于报纸的追求就像如今大众对 ...
Edmund C. Arnold 是一名报纸设计师,被公认为现代报纸设计之父。他设计了超过一千种报纸,包括波士顿环球报,国家观察报,今日报,多伦多星报,堪萨斯城之星报等等。 在那个年代,人们对于报纸的追求就像如今大众对于手机的追求一样,新闻的内容虽然是主要的,但是报纸的外观、阅读方式、触摸舒适度等等,也都是非常讲究的。 Edmund C. Arnold 本身也是一位非常励志的人物。1945 年二战结束,32 岁的他开始研究排版编辑,1960 年成为锡拉丘兹大学 S. I. Newhouse 公共传播学院的教授,并于 1975 年被任命为弗吉尼亚联邦大学图形艺术系主任,期间还出过 27 本书籍。 20 世纪 50 年代,他在设计报纸的过程中,提出了一项原则,认为人的阅读方式应该是遵循某种习惯进行的,好像读书一样,除了从左到右,还有从上到下的方式。但这里面蕴含着什么信息呢?经过多方研究,他最终得出了被后人熟知的「古腾堡原则」,并附上了一张图,名为「古腾堡图」。 古腾堡图将显示介质分为四个象限:左上角的「第一视觉落点区」,也叫「主光学区域」,类似自然光的落点;右下角的「终端区域」;右上角的「强休区」和左下角的「弱休区」。 从图中可以看出,读者很自然地从「主光学区域」开始,在显示介质上来回移动,经过一系列扫描到达终端区域。 整个阅读方式由左向右方向前进,读者倾向于关注整个页面的开始与结束区域,至于段落的起始与结尾则较少被关注到,也就是休闲区。这个原则的支撑点为「阅读重心」,由人们一直以来的阅读习惯形成。 将图表的设计与阅读的重心相协调,能帮助读者梳理阅读的逻辑。据研究发现,这么做能提高读者阅读的节奏和理解能力。例如,遵循古腾堡图的布局把关键元素放在左上角(如标题)、中间(如图像)和右下角(如联系信息)。 所以我们经常会看到这样的图纸内容: 古腾堡图将设计元素的重量与它们的布局和组成进行协调,以指导眼睛的运动规律。对信息和媒介的熟悉程度也会影响眼球运动。例如,经常以一致的方式呈现给读者,不仅能让读者更容易理解内容,可信度也会随之提升。一致性原则也由此得来。 而当互联网兴起,该原则也被用到了网页设计乃至后来的移动设备的界面设计上。 下面我们来看看它在界面设计中,对按钮的影响。 根据古腾堡原则,在用户查看并不熟悉的界面时,浏览是用户的第一行为。他们的眼睛会根据界面元素进行移动,最终停留在结尾的行动点上。 这时候,按钮的位置至关重要。如果界面是需要用户阅读完并进行操作的话,按钮的最佳位置应该是在界面底部。 比如: 或者: 这张图很好地诠释了古腾堡原则的运用。如果各位有对界面滚屏做过研究,就能轻易的发现,界面红色区域的颜色深度代表了点击率的高低。用户的浏览视线,影响了界面信息的布局。 我们还可以看到,评论的视觉流也是按照这样的形式进行设计的: 各位甚至可以根据这个页面的布局,去判断这个产品功能的评论和点赞的排列顺序为什么是这样的。 即使是整个页面模块的评论展示,从小到大也都是依照类似的视觉流进行设计的。 比如: 但如果对这方面不熟悉,只是纯粹地觉得按钮位置占用了屏幕空间,而把按钮移到右上角,反而本末倒置。这样无论在操作还是阅读上,都会影响用户的使用路径。比如: 不仅如此,顶部按钮尺寸较小,因为它所占空间有限,因此在操作上相对来说不便于点击。所以这类顶部按钮更适用于「编辑页面」,需要用户谨慎操作。 比如: 在这样的情况下,使用顶部按钮,可以让用户在注意到应用栏中的状态更改后更快地采取操作行为。按钮与状态标题的接近意味着用户的眼睛不必偏离太远。 所以从古腾堡原则来看,我们需要注意的是,顶部按钮的设计,关键还在于可编辑内容区域,而不是按钮本身。而底部按钮的核心在于按钮本身,而不是内容。 在设计界面的过程中,我们通常会遇到一类水平摆放的按钮,类似于「取消」和「确认」。如: 这是比较常见的弹框按钮样式,设计师通常用它来让用户确认某种操作行为。有可能是提交表单,弹框内容是对表单内容的再次展示,方便用户用于确认,所以这里的确认文案可以是「提交」;也有可能是修改内容详情,修改完后点击确认。 无论是哪种,它都遵循古腾堡原则的视觉终点说明──让用户最快地看到主要操作内容。 在界面设计中还有非常多类似的页面,如: keep 的这个页面把「继续」和「结束」按钮并排放置,结束放在右边,完全符合「取消」和「退出」的排列逻辑,也符合古腾堡原则。且熟悉的朋友都知道,这个页面的「结束」按钮需要长按至多少秒才能结束。 |
什么是好的设计?好设计,就是不改稿的设计,甲方买单的设计,这句话多大多数设计师来
如何在设计中选择正确的字体和版式Typography can make or break your design: a proc
输入字段包含以下6个部分:1. 容器字段2. 前导图标(可选元素)3. 标签文本4. 占位符
网页设计入门之前的知识,多年设计经验所总结。围绕平面与网页设计之间的不同差异和共
当设计之事,由习惯变为自然。前几天,我和一位同事刚好在聊我们手机的主屏幕以及我们
因此,在相继分析网页情感化设计,网页UI文案设计以及网页视觉层级设计之后,Mockplus