网页板式设计技巧,让焦点在右上角

用户行为的研究表明一个网站的右上角是绘制的至少注意力从人眼的区域。它只是我们的阅读习惯的反映。我们开始在左边,头向右,然后去从上到下。

F方式阅读

很多观众检查的“F”模式的网站,用的’F’一顶栏扩展在屏幕上某种方式,那么他们水平向下移动并扫描信的第二部分,直到最后他们看不起左用手网站的下部。

俯瞰右上角网站访问者意味着它不是设计者期待产生点击或其他行动的重要信息的正确位置。相反,它是理想的上下文图像,一个被观察者看见,但是不需要任何文本的读取。

然而,对于设计师的关键在于找出图像适合这个充满活力。

当观众看的第一次一个网站,最期待的左上角,其中有一个期望,看到网站等重要信息的名称。他们快速扫描向下,并可能一目了然的权利。

当设计团队来了解观众的眼图,他们开始使用右上角少有趣的内容,如免责声明,说明,或许标志确定为网站的不同语言版本的选择。虽然这是设计的旧样式,底层人类行为没有改变。

较大的网站,包含不同的内容,它们都在争夺观众的关注,但左上角仍然是最宝贵的空间。右上方是理想的图像,因为它们是圆周看到,并且可以下意识传达信息或提示的情绪。

寻找合适的背景图片

为了说明这是一个很好的适合屏幕右上角网站的图片,让我们回顾一下三组不同的背景图像,它们如何与内容进行互动。

例1:芭蕾舞鞋

让我们从一个芭蕾舞场景的两个不同的图像开始 – 之一,有鞋在帧的右上部,其他与上左侧的鞋。

图片1

F方式阅读

图片2

F方式阅读

图片来源:误。

下面是首选的’右边鞋的形象上的一些设计思路:

  • 它清楚地示出了用于右上角一个锐聚焦的图像的功率。
  • 图像本身是亲密,吸引观众到现场与性感和优雅的感觉。
  • 它确实离开左下角稍差一点,特别是当一个上下文内容的图像放置到文本的右侧,然后右上角会太占主导地位。一个可能的解决办法是更丰富的色调的木地板。
F方式阅读

简单的构图。

网站摄影时应借给人情味,而是寻找各种方法来填补“盲目”上角,当创造温暖和个性化的外观是困难的。创建具有注意力(与实际焦点)中心的组成入右上角一个摄影师做了一个非常不自然的站点之一,该组合物的其余部分必须以引起注意很无聊。

随着上角太多的优势,有喧宾夺主的观众,并鼓励他们离开现场,他们订婚了之前的风险。

例2:秋季森林路

我们的第二个例子通过一个秋天的森林采用了景区道路扭曲两个大体相似的看法。两个图像配行进远方道路,但第一直接行进朝向右上角,道路到达帧的结束。第二路风朝向组合物的中心。

让我们来剖析二:

图片1

F方式阅读

图片2

图片来源: <[/字幕]

  • 与延伸至道路右侧的图像是理想的,因为它是动态的,并鼓励头脑去探索和想象的可能性。
  • 两个图像将受益于对图像的双方更多的森林,因为这将更好地适应网页设计使用。
  • 与领先的缩小图像的中间道路的图像不是动态的,如果有副本和链接,道路居中块中使用本身会变得失去。当利用第一图像,观察者看到道路的两个连接部分。

[标题ID =“attachment_143511”ALIGN =“aligncenter”WIDTH =“1200”]一个简单的布局。

例3:海滩场景

最后一组的实例是含有一种与海浪和夕阳,另一个与左侧棕榈树海滩场景的图像。

图片1

 

图片2

图片来源:误。

  • 无本之木图像有海洋的一个醒目的横线,有一个有趣的功能太阳在右侧,与左侧只有天空。
  • 波的对角线效应拉动观众的注意力,并且是动态且功能强大。
  • 波的细节有助于平衡太阳,给设计师很多的工作。
  • 修剪更多的天空和包括更多的水与岸将进一步提高图像。
  • 太阳应该是补防的上缘,这是针对摄影师的本能。
  • 与树木的图像是一个更典型的现场,与主要特征的左侧,和不感兴趣的角度。

简单的构图。

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/262840.html

(0)
上一篇 2022年5月27日
下一篇 2022年5月27日

相关推荐

发表回复

登录后才能评论