网页设计心得之网页乾坤大挪移心得发布者：本站     时间：2021-12-20 12:12:00

腾讯TGI高级视觉设计师@晋小彦的系列专题，童鞋们看过瘾了木有?这一期教你如何将呆板僵硬的网页设计转眼就变成灵动活泼的创意设计，究竟是怎样的方法才能快速拓展设计思路呢?这一期，有招。

时间短、没点子、没创意，又要快速捕抓眼球,怎么办?

对页面整体进行旋转和平移是快速改变视觉是快速有效的方法.它打破了正常的网页视觉习惯,吸引了观众的注意力。

说说 —— 旋转和平移

网页设计心得之网页乾坤大挪移心得,PS教程,

网页设计心得之网页乾坤大挪移心得,PS教程,

如果每天要面对着巨大的需求量，难免有创意枯竭的时候，如果有一些相对讨巧的办法，能够不受主题限制，当然是再好不过的，这时候，我们不防试试这简单的小办法。

网页设计心得之网页乾坤大挪移心得,PS教程,

旋转和平移，这是针对整个页面的大版式而言的，到底会造成怎样一种效果，我们继续往下看。

网页设计心得之网页乾坤大挪移心得,PS教程,

图一：一张优质的稳定的摄影图片。

图二：旋转后的不稳定构图使图片显得活泼动感而有趣。

图三：重心右移，打破对称的构图增强了画面的紧张感。

这种最快速改变视觉结构的简单方式，可以快速的运用于网页中吗?

网页设计心得之网页乾坤大挪移心得,PS教程,

图一：我们正常的页面版式，居中对齐，稳定整齐，稍显呆板。

图二：画面中心旋转30度。

图三：整体画幅向右平移。

看起来似乎可以这么干，但它也将给我们带来其它一些细节上的难题。

想想 —— 整体旋转、背景旋转、综合旋转

网页设计心得之网页乾坤大挪移心得,PS教程,

网页设计心得之网页乾坤大挪移心得,PS教程,

旋转适合的页面及其产生的效果

旋转打破了画面横平竖直的呆板，旋转后的视觉更加轻松活跃，旋转构成的斜线条也可以产生运动和速度感，所以许多运动的、刺激的、具有速度感的主题适合直接旋转处理，另外运动、速度衍生出年轻的、时尚的之类主题也可以适用，轻微的旋转也可以使画面更贴近于自然的生活状态，增强真实性与亲切感。但在开始旋转设计改造之前，一定会有人产生这样的疑惑。

网页设计心得之网页乾坤大挪移心得,PS教程,

旋转可能会给我们带来以下一些问题

1.信息量的限制

由于旋转的构图，斜线与面边面框最终会有一个交界点，可能导致信息不能无限制的延续

2.排版的限制

由于旋转的形式需要整体的配合，而有部分素材无法配合旋转就会比较花时间去归纳处理。

3.浏览舒适性问题

由于角度倾斜，打破了习惯性视觉在提神的同时也会给浏览造成一定的困难和不舒适。

这些都是我们需要注意和解决的问题，带着这些问题，我们一起来看看旋转的一些潜规则。

网页设计心得之网页乾坤大挪移心得,PS教程,

在斜排布时注意几个要点，以免影响阅读。

1.非内容必要原因。文字尽量保持一定规律排布对齐。

2.非内容必要原因。并列内容尽量使用同一变换角度。

3.图三为正确的变换方式

在简单的图示下，这些错误看起来显而易见，但在实际的操作中，由于多种因素的干扰我们往往忽视这些问题。

在排版过程中无论如何我们都要尽量让依造某一规律对齐，在画幅已旋转的情况下更应该保持理性。旋转基本可以分为以下几种类。

网页设计心得之网页乾坤大挪移心得,PS教程,

1.整体旋转：

背景和内容一起旋转，需要注意两条边缘线，一是保持旋转的边缘线整齐，另外也要注意旋转后的内容不能超出1000宽度。为了兼顾信息的阅读性，背景和内容的同时旋转的角度尽量不要超过15度。

2.背景旋转：

背景旋转，信息内容保持不变。这种旋转即可以产生旋转的视觉形式感，又可以保证文字信息的阅读性，是比较推荐和常用的方式。但信息排版同样也受到斜线的1000宽度的限制，在具体操作中需要进行细节的调整。

3.综合旋转：

根据内容结构进行有选择的部分旋转。通常选择内容文字较少的SLOGAN跟随背景一同旋转共同达到旋转的形式感。信息量较多的正文保持水平不变，以方便阅读。这种方式也是经常被使用到。

PS：黄底为1000宽度的内容面积、蓝底为背景面积、白色虚线为1000宽度标准线、SLOGAN(主视觉标题))、文字、圆泡泡(图素)图片组成简易的网页示意图、透明背景为增阔的信息面积。(对于1024用户的最大网页宽度的定义，不同的公司有不同的标准，通常是在1000~1004范围，为了美观，设计上通常可多保留一些外边距。)