推荐设备MORE

小互动助手—做一个微信小程

小互动助手—做一个微信小程

疑难问题

电子商务网站开发公司-网页制作技巧:网页制作中

日期:2021-04-16
我要分享
--------

电子商务网站开发公司

-------

网页页面设计方案中的F式合理布局

今日大家来关键详细介绍网页页面设计方案中的F式合理布局。传统式的合理布局方法,依靠布局视觉效果案件线索, 操纵 客户的视觉效果相对路径,相较之下,F式合理布局更为当然,更为友善。本文将讲述一些F式合理布局的标准、基本原理和设计方案方式。

F式合理布局简介

F式合理布局是一种很科学研究的合理布局方式,基本概念根据了很多的眼动科学研究。一般来讲,客户访问网页页面的视觉效果运动轨迹是这样的 先看看顶部,随后看看左上角,随后沿着左侧缘趁机直下 .而客户常常不太留意右侧的信息内容,这是否有点像字母F?据此,大家习惯性性的把关键元素(诸如品牌Logo,导航栏,个人行为招唤控制)放在左侧,而右侧一般置放一些对客户不相干紧要的广告宣传信息内容。

大家来看一下Webdesigntuts+的眼动网络热点图:


这张眼动网络热点图展现了客户访问此网站的视觉效果运动轨迹,呈一个F型。热区(途中鲜红色、黄色、橙色一部分)意味着客户留意力最集中化的地区。
总结一下客户访问网页页面的一般方式:

先看看网页页面的左上角,掌握一下这是甚么网站(因而此处合适置放Logo) 了解是甚么
随后扫描仪一下网页页面的顶部(导航栏栏,检索栏) 掌握用法
下一步,客户的视野下移,刚开始阅读文章下一行的內容。
客户进到 扫描仪方式 ,一旦找到感兴趣爱好的內容便会开启。

将此种访问方式以线框图的方式展现,样子以下图。

有个规律性不可忽视:阅读文章通常为从上到下,从左到右的。客户常常忽视右边边的內容,大致的扫一眼罢了,因而不要在右边边下太大时间。应当把內容栏放在客户留意力高宽比集中化的左侧。

综上所述,依照逻辑性,大家得出以下结果:

品牌标示和导航栏应当放在网页页面的顶部,这是客户对网站的第一印象。
在內容构造中,照片更非常容易得到关心
客户访问完照片后,下一个关心点就是题目。
客户会大致的访问文字,可是常常不会通读。

将F式合理布局运用到设计方案中

这里我做了一个小训练,应用线框图方式,对关键元素开展了合理布局。

下图中能够看到,我把网站的主题/服务宗旨(Mission Statement)放在了导航栏栏的下面,这样客户访问完Logo和导航栏,就可以快速的掌握网站的服务宗旨.两栏合理布局的益处是信息内容层级清楚,可便捷客户迅速扫描仪內容 关键內容栏+輔助侧边栏

挺不光滑的,可是重要点都在,访问此网页页面时只需几秒钟,便能获得该网站的服务宗旨/主题

导航栏栏的功效是正确引导客户,让客户了解怎样转至不一样的网页页面。

顶属下方的內容栏中,将题目设定的十分醒目,客户访问完照片后,便能快速发觉到题目的存在 至于文字內容吧不做强求。

你们访问这个网页页面的视觉效果相对路径应当是这样的吧?

实际效果还能够是把?进行F式合理布局后,大家即可以此为基本,添加一些细节性元素。

也有一点值得留意的是F式合理布局中对行与行之间间距的操纵。(图中红线一部分)

假如网页页面无尽长,老这么访问下去,客户一定会很烦,感到枯燥乏味,对不对?这里能够略微做一下调剂,添加一点与F式合理布局标准 不融洽 的元素,给阅读文章节奏带来一些变数。

你看,上图中那个照片栏就是 不融洽 元素,它的出現有些出乎意料、摆脱了客户的预期,这类设计方案合适于那种较长竖直翻转的网页页面,这样客户就不会感到枯燥乏味了。

F式合理布局基本原理

F式合理布局可以见效的缘故,在于F式合理布局合乎客户的访问习惯性,更当然。合乎 从上到下,从左到右 的阅读文章方式。

可是这类阅读文章方式有益也有弊:

这样一来,最有使用价值的內容只能置放在网页页面顶部了。有些俗套
文字內容没法合理的引发客户留意,客户乃至连摘要都懒得读,看看题目就 过 了
网页页面太过重视对 题目 和 图象 的包装,无疑不合乎內容至上的标准

在选用F式合理布局开展设计方案师,许多设计方案师觉得自身不好像设计方案师,而想是生产制造噱头的 广告宣传商 。网页页面设计方案太具有功利性性,只追求完美一时的访问量,不遵照 內容为王 的标准,许多客户第一次将会觉得非常好,可是看了內容后大呼上当受骗,将会下一次她们就不会再度浏览该网页页面了。

因而,设计方案师要融洽好內容与合理布局之间的关联。这就有点像武侠小说了,內容如同内力,合理布局如同招式。花拳绣腿再好看,内力浓厚的人一招便能 以力破巧

那末右面的侧边栏该要如何设计方案呢?这里给出两点提议:

F式合理布局实例

那末具体实际操作起来应当如何呢?这里出示了一些规范F式合理布局的网站,一起来看一下吧。

<

 在节奏操纵方面做的非常好

Kickstarter

Phototuts (针对这个广告宣传的乱入我也很无语!)

 

无论设计方案趋势如何变,F式合理布局隐藏的基本原理不会落伍,由于这是客户长期性的习惯性。

或说,F式合理布局只是一个幌子,本文的目地是以便强化大伙儿对客户长期性阅读文章习惯性的了解 从上到下,从左到右 ,虽然这有点老生长发育谈,可是历经本文形象化的分析,你是不是也有一定的感悟了呢?针对节奏的切分,你又造成了甚么新的观点?

吸引住人的图象、具备噱头的题目仅仅是花招,內容才是王道,怎样结合,怎样二者兼而有之,设计方案师需要走得更远。

让合理布局不仅是一种方式,大家能够看的更远,融入一些客户体验设计方案元素。尝试一下,让你的设计方案不断 升級 。

---------

电子商务网站开发公司

------------