让皇冠官网登录来看一个奇怪的话题， 如何 皇冠官网登录看设计. 一旦你理解了人眼是如何处理这些的, 你会发现自己能更好更有效地安排你的元素.
任何数字页面布局中的内容都将遵循特定的层次结构. 标题出现在主体文本之上. 菜单位于屏幕的顶部、底部、左侧或右侧(或这些的任意组合). 设计师试图组织内容，以便他们呈现 最高优先级 任何给定页面的内容. 然后，他们交付其余的内容，从最高优先级到最低优先级.
“等级”只是一种更好的说法 有组织的 从最重要到最不重要. 皇冠官网登录还使用“层次结构”来显示内容块之间的关系(存在关系的地方).
用户定义 视觉层次结构 一个网站或应用程序. 最先吸引眼球的东西位于层次结构的顶端. 接下来引起注意的每一项都从属于它前面的一项.
层次结构原理
作者/版权所有人:数字营销. 版权条款和许可:CC BY 2.0
人眼是通过视觉而不是数据块来感知信息的. 与电脑不同，皇冠官网登录受眼睛自然倾向的支配. 皇冠官网登录小时候可能遇到的阅读材料有很多图片和较大的字体. 不管这些是漫画, 颜色的书, 或者故事书, 皇冠官网登录可以理解正在发生的事情，因为皇冠官网登录看到了插图，并在易于阅读的文本旁边解释了事件的顺序.
皇冠官网登录感知信息的方式受到几个因素的影响 如何 皇冠官网登录在布局中对内容的层次进行排序. Jones(2011)研究表明，影响层级结构的因素包括:
大小:与较小的元素相比，元素越大，吸引的注意力就越多. 想想报纸的标题. 报纸使用(大字体)标题文本来表明余下的文本(小字体)将传递什么. 让皇冠官网登录假设一个“爆炸性新闻”. 你的眼睛应该直接看标题. 注意它是如何占据主导地位的，激励你去发现它是皇冠老牌网站什么的?
Color鲜艳的颜色比单调的颜色更容易吸引人的注意. 皇冠官网登录可能都用过荧光笔在复印的讲义上标出突出的地方. 黄色比白色更丰富、更明亮(从某种意义上说，白色更柔和)，所以它很突出. 在明亮的颜色之后，更丰富和更暗的颜色会吸引眼球. 较浅的色调紧随其后，因为它们看起来更淡，更遥远. 在颜色层次的底部是灰度或柔和，柔和的颜色. 想象一个有雾的日子，你试图找到四个朋友. One wears a hi-vis vest: he’ll stand out first; the one in a deep burgundy trench coat will stand out next. Someone’s wearing a cream-colored long coat; she’ll be harder to spot. 你们相遇并开始交谈，询问吉姆在哪里. 不幸的是，吉姆穿了一件烟熏灰色卫衣和配套的运动裤. 不过他已经见过你们了.
对比鲜明的对比色比轻微的对比色更能吸引人的眼球. 对比可以帮助你展示你的设计中什么是更重要的. 一切都是相对的. 想象一下，你想根据建筑师的高层公寓楼设计方案进行设计. 你想要展现光明, 地面上通风环保的建筑, 但你也要表现出你的坚强, 深地基和地下停车场下面. 通过这样划分你的设计, 你会把目光吸引到森林边公寓的欢快生活特征上. 这与下面的部分(页脚)相矛盾，在那里你展示了结构的实用性和安全性. 一个小的层次结构对吸引用户大有帮助.
对齐:对齐可以在设计元素之间创建秩序. 例如，先放置内容，再放置侧边栏列，为读者创建优先级. 皇冠官网登录希望重要的信息(比如登录按钮)在页面的右上角. 皇冠官网登录在杂志上也能看到这一点. If you’re near one, why not flick through; look out for a pull quote. 这是采访的一部分，作者想强调主题说了什么. 它的大字体和它与其他文本的对齐方式的破坏, 它形成了一个层次，首先吸引皇冠官网登录的眼球.
重复:重复的样式可以给浏览者一种内容是相关的感觉. 例如，皇冠官网登录以类似的方式展示了本文中的大部分文本. 如果皇冠官网登录打破了这种风格, 说, 通过使用红色文本, 它可以很快地从熟悉的环境中吸引注意力. 它起作用了，不是吗? 如果皇冠官网登录再来一次呢? 另一个很好的例子是超链接. 当你访问一个有很多蓝色下划线的页面时, 你马上就知道你可以点击到很多其他的页面.
接近:皇冠官网登录把设计元素放在一起的紧密程度可以告诉皇冠官网登录的用户它们之间的皇冠老牌网站有多大. 在皇冠官网登录的列表中，皇冠官网登录用一行空白来分隔项目. 在这节课中，皇冠官网登录不会把标题和信息的第一段分开. 这种相似性表明列表项是独立的(尽管没有到彼此完全不相关的程度)，但标题与后面的内容相关.
空格:你可以使用内容周围的空间(它可以是任何颜色, 不只是白色)来吸引人们对某些内容的注意. 想象一下没有它你要做多少工作! 它有两个作用:使信息更容易被眼睛消化, 它可以让你的注意力集中在每一个信息区域(在这里是段落).
质地和款式材质和样式的使用也可以帮助对内容进行优先排序. 就像字体一样，它们可以设定设计的基调. 想象两个项目. 两家旅行社想要一个登陆页面来显示他们的度假套餐. 一个是海滩主题，一个是湖泊主题. 为海滩主题度假村, 皇冠官网登录展示了一个背景特写，清澈的水覆盖着美丽的白色沙滩. 效果很好. 然而, 当皇冠官网登录试图在湖上重复这一过程时, 皇冠官网登录发现晶莹剔透的海水给了皇冠官网登录很大的启发, 黑色的鹅卵石和石头. 这种纹理最终太分散注意力了，因为它比光滑的沙子更有纹理.
引人注目的设计需要心理学
来自哥本哈根的报告证实了这一点, 尤其是网页设计师, 是否意识到更直接地吸引用户的必要性. 回顾他们在艺术学校的日子，同时在其中加入一点心理学，似乎很有效果.
层次结构模式
在印刷页面和数字页面上都有常见的层次结构模式. 这些模式是基于皇冠官网登录的眼睛在看到新页面时倾向于做的运动. 例如，英语是从左向右阅读的. 英语读者在面对一页文字时有一套固定的浏览模式. 阿拉伯语读者则有不同的模式. 为什么? 这是因为阿拉伯语是从右向左读的.
理解这一点很重要 如何 你的听众处理信息 之前 采用层次结构模式. 由于这节课是英语课，皇冠官网登录在这里包括了两种常见的从左到右的模式:
Z模式
作者/版权所有人:Supermariolxpt. 版权条款和许可:CC BY-NC-ND.0
在网站中 低水平的文本内容 (e.g., 充当企业或产品小广告的网站，而不是提供大量信息的网站), 眼睛扫描的Z型是常见的. 用户看到“精简文本”页面，并从左上角到右上角扫描, 然后向下扫视内容(沿着对角线)到左下角, 在移到右下角之前.
你可以利用这种模式，确保你把最重要的信息包括在眼球运动所遵循的Z型模式中. 你有四个点和三条z字形的直线相连.
F模式
设计师通常将F模式应用于包含 的文字内容 和/或 视频内容.
用F模式, 用户首先从左到右沿着顶部扫描, 然后向下浏览页面的左侧, 寻找他们所寻找信息的视觉线索. 当他们发现这样的线索时，他们会从左向右扫描. 他们重复这个过程，直到他们到达页面的末尾.
这种扫描模式通常会产生一个看起来像字母“F”的热图。, 如本文顶部的图片所示.
它完全可以使用 这两个 Z和F图案页面在同一网站. 例如, you might have a very clean homepage that utilizes the Z pattern; 如何ever, 当用户深入到站点时, 你可能会显示更多的数据，而使用F模式.
拿走
层次结构让皇冠官网登录更容易理解设计. 皇冠官网登录想要根据皇冠官网登录如何知道用户想要什么以及皇冠官网登录想让他们做什么来确定标题和菜单的优先级. 皇冠官网登录用视觉处理信息, 按照设计师强调的顺序来感知元素:
尺寸——较大的元素将占据主导地位，最先吸引眼球.
颜色——明亮的颜色比柔和、单调的颜色更吸引眼球.
对比——元素之间的明显差异会吸引人们的注意力.
对齐——用户希望在相同的位置找到某些元素.
重复-重复的品质(例如.g.(如文本的彩色部分)吸引用户的眼球.
接近性——放置相关元素(例如.g.，标题和相关文本)紧密相连意味着它们是相关的.
空格——在元素周围包括空格，将它们单独作为一组信息.
纹理和风格-使用不同的纹理/风格(e.g.(厚实的军装风格的纽扣)在设定主题时吸引眼球.
在西方世界，皇冠官网登录根据两种常见的等级模式来阅读设计:
Z型模式 -在没有太多文字的设计中, 皇冠官网登录的眼睛开始从左上到右上扫描, 然后对角线向下到左下角, 停在右下角.
F型模式 -在设计中使用更多的文本, 皇冠官网登录从顶部扫描, 从左到右, 然后在左边, 寻找皇冠官网登录想知道的线索. 一旦找到，皇冠官网登录就向右扫描.
你有你的用户的眼睛，以保证你可以包括这些因素，以做出更有效的设计. 当你计划的时候，把这些都记在心里. 您可能会尽最大努力使用它们，包括Z和F模式的融合. 记住，你是在为你的用户设计. 他们在使用什么，他们想如何在网上看到它?
在哪里了解更多信息
课程: 视觉感知和设计的终极指南
琼斯,B. (2011)理解视觉层次 网页设计.网页设计图坦卡蒙加. http://webdesign.将.com/articles/understandi...
银行,C. (2015).“理解Web UI视觉层次结构”
布拉德利,年代. (2015). “设计原则:主导、焦点和层次”
曹,J. (2015). “网页设计中视觉层次结构的五大支柱”. 下一个网络/TNW.
