网页UI的视觉体系(一):F模式和Z模式

网页布局有哪些作用,有如何设计网页布局?今天飞屋睿UIdesign给同学们科普下这方面的知识,选用优秀的案例分析,一针见血的特点总结,通俗易懂,好学好用,刻不容缓感受下

版权申明:请转载和引用本文时载明原文出处和作者,尊重原创,谢谢!

从今天开始,我们也来聊聊UI设计。当我们谈论UI设计时,其实我的知识贡献范围也只能是WEB端,当然WEB端和软件端大同小异。但不管是设计网页界面还是软件界面,作为设计师,那就绝对不会否认这一点:比例、颜色、大小等微妙的元素间的平衡不是一项轻松的工作。

从今天开始,我们也来聊聊UI设计。当我们谈论UI设计时,其实我的知识贡献范围也只能是WEB端,当然WEB端和软件端大同小异。但不管是设计网页界面还是软件界面,作为设计师,那就绝对不会否认这一点:比例、颜色、大小等微妙的元素间的平衡不是一项轻松的工作。

得来不易的大牛经验合集打包:

图片 1

图片 2

网页UI设计也是一样,一个网站就像和其他传统的艺术创作一样遵循同样的规律,最终达到视觉的艺术效果。这是美学的范畴,同时隐含着现代商业的法则。一个优秀的网页设计必定是让人轻松又足够吸引的。

网页UI设计也是一样,一个网站就像和其他传统的艺术创作一样遵循同样的规律,最终达到视觉的艺术效果。这是美学的范畴,同时隐含着现代商业的法则。一个优秀的网页设计必定是让人轻松又足够吸引的。

视觉的创作组合

视觉的创作组合

让我们先谈谈,网站界面的三个功能。

让我们先谈谈,网站界面的三个功能。

引导用户——网站对用户的引导,就像暗中一只无形的手,会指引用户通过点击等操作按钮浏览网站,了解信息,而不会带给用户压迫感。比如square这个网站,当你不断下拉的时候,会出现相应的文字提示你接下来继续到哪里。

引导用户

图片 3

网站对用户的引导,就像暗中一只无形的手,会指引用户通过点击等操作按钮浏览网站,了解信息,而不会带给用户压迫感。比如Square这个网站,当你不断下拉的时候,会出现相应的文字提示你接下来继续到哪里。

呈现内容间的关系——按照一定的布局去展示网站的主次内容优先级,比如abduzeedo这个网站,就将主推的内容放在了最大的顶部三个卡片展示上,其他的普通内容则在下方以列表的方式展示,底部则是一些标签分类的链接。

Squareup

图片 4

图片 5

建立情感联系——人们去餐厅用餐,其实不会只把餐厅当做一个解决食欲的地方。他们会关注到餐厅的场地、氛围、菜式甚至是其中的一些特别的情调,他们在这里交谈、交易。同样道理,用户会因为和你的网站内容产生的情感联系而接受网页界面或交互的小小瑕疵。

呈现内容间的关系

浏览模式:人眼焦点预测

按照一定的布局去展示网站的主次内容优先级,比如abduzeedo这个网站,就将主推的内容放在了最大的顶部三个卡片展示上,其他的普通内容则在下方以列表的方式展示,底部则是一些标签分类的链接。

就像你的眼睛会更快关注到快速移动的物体,或当你在街边被高冷美好的模特吸引一样。人眼会在看这一行为中自动启发对眼界中出现的某个物体的特别注意力,我们这里可以称之为焦点。大部分的人都会被页面中的焦点所吸引。

Abduzeedo

例如一篇文章的展示,也会遵循相同的浏览模式。99Designs的设计作者Alex就提到了两种主要的浏览模式。

图片 6

图片 7

建立情感联系

F模式

人们去餐厅用餐,其实不会只把餐厅当做一个解决食欲的地方。他们会关注到餐厅的场地、氛围、菜式甚至是其中的一些特别的情调,他们在这里交谈、交易。同样道理,用户会因为和你的网站内容产生的情感联系而接受网页界面或交互的小小瑕疵。

这主要在一些以文字为主的网站出现,例如博客。F模式就是指,用户通常会沿着左侧垂直浏览而下,先去寻找文章中每个段落开头的兴趣点,这时,如果用户发现了他喜欢的,他就会从这里开始水平线方向的阅读。最终结果就是用户的视线呈F型或者E型进行浏览。

浏览模式:人眼焦点预测

The Nielsen
Norman机构曾对232名用户对上千个网站的浏览习惯进行观察,总结出F模式的特点:

就像你的眼睛会更快关注到快速移动的物体,或当你在街边被高冷美好的模特吸引一样。人眼会在看这一行为中自动启发对眼界中出现的某个物体的特别注意力,我们这里可以称之为焦点。大部分的人都会被页面中的焦点所吸引。

  • 用户极少逐字阅读文字。
  • 每个段落的开始两个字最为重要,这将决定内容是否能留住用户。
  • 初始段落,副标题和要点都要保持醒目。

例如一篇文章的展示,也会遵循相同的浏览模式。99Designs的设计作者Alex就提到了两种主要的浏览模式。

图片 8

图片 9

下图里的页面可以看到,重要的内容很清晰的展示出来,并且不会让用户花很多时间去浏览,而次要的内容也能快速尽收眼底。F模式对于那些嵌入广告的网站也是极为有用的,即使有了广告,也不会影响到内容。只要记住,内容为王,导航可以让用户更深入地浏览下去。

F模式

在所有浏览模式中,F模式就是一个引导路线图,而不仅仅是一个页面。因为,F模式的网站除了顶部展示区外,其他的内容会显得更平淡。就像下图所示,顶部1000像素后,网站就在水平方向加入了一些卡片式的内容组件,让网页内容更有趣。

这主要在一些以文字为主的网站出现,例如博客。F模式就是指,用户通常会沿着左侧垂直浏览而下,先去寻找文章中每个段落开头的兴趣点,这时,如果用户发现了他喜欢的,他就会从这里开始水平线方向的阅读。最终结果就是用户的视线呈F型或者E型进行浏览。

图片 10

网站地图xml地图