联系电话136 8812 4668(业务咨询) / 158 8206 4880(服务投诉)
赛门仕博官网

1

2018年06月18日

为什么垂直方向设计在网站设计中越来越流行?

我们的阅读习惯是从左到右,所有生活中几乎都是根据从左到右来设计的,但现在从上到下(垂直方向)在网站设计中慢慢开始流行起来。比如下面这个网站例子采用就采用了垂直方向的设计,很多网站设计师都认为网站垂直设计是一种增强美学的有趣技巧。

网站垂直设计1

如今垂直设计开始规定接口的不同元素等规则,与大多数快速侵入设计并最终变得让人烦的设计趋势不同,垂直方向网站设计解决方案不会感到过渡设计或者平庸,反而感觉很新鲜别具一格。


一,视觉体验轻松

1,下面介绍几个垂直方向设计的网站案例,第一网站运用垂直设计方式来解释公司服务专业领域,采用四个并列的产品服务布局方式,而每个服务板块内容采用垂直方向设计来营造愉悦的秩序感。

2,第二个网站使用垂直排版处理和装饰元素(如轮廓矩形和条纹背景)完美结合结合使网站内容成为用户浏览的视觉焦点。

3,第三个网站使用信息流排版的方式,网站内容聚焦于页面中、左侧和右侧或者其他空白区域,为用户浏览形成了一条突出的视觉路径,让用户无法忽略掉网站内容。

4,第四个网站案例把品牌标志放在网站最特殊的位置,花卉装饰元素基于垂直排版作为网站标志成为用户浏览关注的焦点。

网站垂直设计2
网站垂直设计3
网站垂直设计4
网站垂直设计5

如果你认为垂直方向设计只适用于一般用途,那么你错了,垂直方向设计该适用于非传统方式设计的网站,比如下面这个网站:

网站垂直设计6

网站第一个板块选择支持滑块,该滑块展示了全高而不是全宽的图片,这个设计技巧使视觉内容几乎与左侧的文本内容具有相同的优先级。

文本内容有一个整洁的简约头版区域,两个直立的轮廓图,在两侧描述相关说明的文字内容,这种设计方法也适用于非静态网页设计,比如下面这个网站例子。

网站垂直设计7

这是一个小型动态电脑艺术品展览网站,与前面网站设计案例相比,这个网站看起来很“敷衍”,但任具有个性魅力。

网站垂直设计8

二,亦可变得严肃

例如下面的网站案例,“Tender to Art”公司作为一家艺术孵化器公司,为了避免使用平庸的插画设计方式,并证明“每个人及时没有好的环境也可以传递创造力和价值”的品牌理念,网站内页设计虽然采用了传统方式,但首页通过巧妙地使用垂直方向设计来吸引用户眼球,基于文本的标志,向下滚动指示器、滑块、导航菜单按钮等都采用垂直方向设计来增强网站品牌元素。

网站垂直设计9

“Canvas United”网站比“Tender to Art”公司网站更保守,对于那些打算在网站设计中使用一个或两个垂直对齐元素的人来说,对这种趋势的看法值得关注。堆叠的社交媒体链接块,微小的滑块分页按钮和条纹状图片背景构成了网站基础美学。

网站垂直设计10

“One Year in Review”网站的登陆页面包含四个主要元素:标语,动态背景,感谢文本列表和品牌用语。前三个位于垂直平面中自然地引导用户从上到下浏览阅读。

网站垂直设计11

三,营造美的视觉体验

对于很多网站,垂直方向设计可以不太适合,但运用小版块的次要用法却是可以的,毕竟传统网站建设内容位于水平位置,细节在水平轴上很好对其,形成视觉焦点而不会让用户感到迷惑。如何建设一个垂直方向位于整体美学核心的网站呢?网站设计有很多趋势,没使用一种趋势去建设网站都需要谨慎,比如设计过度就会破坏网站整体和谐。下面两个网站都是精心设计过的,来分析下网站垂直对齐设计如何为网页注入新的活力。

网站垂直设计12

“Crazy”网站首页只有两个符合传统水平设计的元素:网站logo和导航菜单图标。其他一切都是垂直设计的。在视觉上,可以定义三个具有明显间隙和顺序感的列表。该网站设计突破了经典网站结构设计方式,具有强烈的视觉吸引力。


“Carazo Arquitectura”网站首页使用垂直对齐的元素作为装饰细节。虽然页面中心的图片保持精确的椭圆形,但导航,标语,标题和滑块分页以及一堆在整个屏幕短线上散布的补充保持在同一水平线上,好像有吸引力向下移动。设计精致典雅。

网站垂直设计13

最后

网站垂直方向设计是一个很常用的技巧,能够让很多无聊的网站带来生动活力热情。此外,网站垂直方向设计几乎适用于任何界面元素,无论是滑块还是装饰元素。您如何看待这一趋势?垂直方向设计是否是引入设计改进和多样性的有效方式?如何去运用这种设计方式?