如何分析对比两个网页设计(对网页布局方式做一下对比)

推荐语

　　国内首部长篇干货连续剧

《创意视觉六部真经》

　　文章来源：大创意（ID：pitchina_）

　　（本文已经获得转载授权，版权归大创意所有，如需转载本文，请联系原公众号“大创意”）

　　《招式一：统一/和谐》

　　和谐：从狭义上理解，和谐的平面设计是统一与对比两者之间不是乏味单调或杂乱无章的。广义上理解，是在判断两种以上的要素，或部分与部分的相互关系时，各部分给我们的感觉和意识是一种整体协调的关系。

1.接近性

元素之间的距离感

所谓的接近性是说元素与元素之间，距离较近的元素要比距离远的元素更被认为是有关联的。元素间彼此分散着，之间并没有任何联系，我们就可以将其视为单独的元素；反之，当他们聚集在一起，空间距离彼此接近，则有所关联，有所联系，那么就像一个整体，而不是单独的个体元素了。

下图可以看出，海报主题的鹿实际上是由52条线段组成，因为这52条线段被排列到一起，在空间上彼此接近，使得原本分散的元素，产生了联系，而不再是独立的个体。

（图片来源：Pinterest）

2.相似性

与其他元素重复运用

所谓的相似性，是指就各自分散的元素而言，具有相似性的元素会被认为是相关联的。相似性可以是颜色，大小，形状或方向。通过与其他元素的相似关系，来展示元素之间的关联性或者非关联性，传递一种有组织，有关联的感觉。

下图Salon网站根据两个版块相对大小进行分组。我们可以清楚感知到它们是两个独立的元素，左边是头条新闻，右边是浏览最多的新闻。即使每个部分提供相同的功能——展示阅读的文章，按大小分配，突出展示左边分组，这样会引导读者花更多精力看头条新闻。

（图片来源：Jon Hensley）

3.连续性

元素的图形延展

　　连续性是指犹如一条河、一条道路或是围栏线，元素布置在一条直线或曲线被视为更相关的元素，不是分别的直线或曲线，元素在一个特定的方向进行移动，进而视线相近跟随着移动方向，我们感知到的是形状，而不是分别的个体。

　　下图我们可以看到是两条曲线在画面中交错，然而我们视线会随着各自的端点移动，清楚的可以看出2条曲线绘成了2个侧脸，所以我们不会觉得那是2条错乱的曲线，而是图形，是一个整体。

（图片来源：Pinterest）

4.重复性

元素被复制模仿无数次

元素的重复并不单纯的将元素Ctrl+C、Ctrl+V，而是让画面有一定的规律，进而产生连续的变化。这些规律的元素是一种秩序的美，一种节奏的美。重复出现的元素有助于加深人们的印象，同时潜移默化的让人们接受，产生信赖关系。

现实生活中，许多品牌LOGO惯用重复元素，例如华为、GUCCI，adidas等。

中国传统纹样中四方连续等也是重复性很好的例子。

有的时候重复中往往会伴随着对比来突出重点，使视觉中心转移，下面的海报中《楚门的世界》(The Truman show)12台重复出现的电视中唯独有1台是破碎的，一排脚印从里面走了出来，讲的是一个什么样的故事呢，感兴趣的朋友们可以搜一搜。

（图片来源：Pinterest）

5.节奏感

位置、大小、颜色和图形元素的使用打破单一

　　节奏感则是元素的造型、大小、色彩分布等符合一定的比例关系，按一定的条理、秩序重复连续地排列，形成一种律动的形式。它有同等距离的连续，也有大小远近，轻重缓急，疏密对比，虚实冷暖等排列构成，主次分明。

　　在网页设计语言形态上讲究点、线、面、体的规律性变化，结构形式上讲究疏密、大小、曲直等，在色彩语言上讲究虚实、明暗、冷暖的对比。这样就有了节奏韵律，赋予了页面活力和生命，使它有了灵魂，也带给人们更好的用户体验。

（图片来源：Pinterest）

网页中黄色色块，它赋予这个页面节奏感，它的大小变换犹如音乐中的轻重，形状的改变犹如曲调的缓急，在网页中引领人们的自上而下有规律的阅览，仿佛音符在跳跃。

　　《招式二：平衡》

　　何为平衡？平衡就是从物理上理解是指的重量关系，在平面设计中指的是根据图像的形量、大小、轻重、色彩和材质的分布作用与视觉判断上的平衡。

1.对称性

对称轴图形

　　生活中，有很多对称性设计，宏伟的天安门，悠久的故宫等古都北京的象征。

　　平面中，也有很多LOGO用到了对称性设计，中国银行，工商银行等，还有airbnb，tripadvisor，奥迪，林肯等。

　　对称不但是平衡的一种表现方式，均衡也是对平衡的一种体现，平衡的图形是由对称的图形演化过来的。

　　当然，对称还分为：绝对对称与相对对称。上面提到的例子均是绝对对称，相对对称的核心在于两侧重量分布相似而非元素相同。相对对称避免绝对对称过于呆板的弊端，同时还有统一感、格律感。

2.非对称性

　　每个边上的元素有不同的形状，但在视觉上任然处于平衡，这也就是上面所提的相对对称。

3.放射状

　　放射具有很强的聚焦，这个焦点通常就是画面的中心；放射有一种深邃的空间感，光学的动感，使所有的图形向中心集中或由中心向四周扩散。

　　下图为纳撒尼尔·霍桑的代表作，长篇小说《红字》。究竟讲了一个什么样的故事，感兴趣的大家可以找来读读，95年同名电影也有上映。

“一片墨黑的土地，一个血红的A字。”

　　《招式三：层次结构》

1.树状图

元素的排列就像大树似的，有主干分支

下图是国外设计师设计的日历，[2016NATIONAL PARK CALENDAR]我们第一眼就会看到这个作品的主标题，这是就标题的整体而言。[2016]清晰的告诉我们这幅作品跟2016年相关，但这是今年的什么，那么就是后面[NATIONAL PARKCALENDAR]的副标题了。作品下面的12个月就是[2016][NATIONALPARK CALENDAR]的分支。

2.巢组织

元素的映射就如父母一样，下面分出是自己的子孙

下图是《VOGUE》的某期杂志封面，我们可以清晰地感受到这个“大家庭”在画面中起到的作用。抛开人物单看文字，这个“大家庭”中为人父母的就是大大的标题《VOGUE》他们的子孙就是下面的小字，但小字也有主次，也就是推荐文章的主次标题，就这样一个”家庭“组成了这个封面。

3.重要性

同样重要的元素属于同一类的等级位置

　　下图网页是设计师为土耳其飞马航空公司设计的，网页中文字的大小、颜色清楚的把主次划分出来，使访客轻松的搜索到自己想要浏览的内容。

以上，我们举得例子均是文字在画面中的层次结构，图像也是有层次结构，如里约奥运会中让我们清楚地认识了我国是以怎样的形式排列，以及他们没有正确的层次结构意识，弄错两国并列名次国旗升法等等。

　　（这才是我们的国旗！）

　　层次结构主要是通过大小、位置、颜色，主要的放大放在首位色彩突出，次要的缩小放在次位色彩次之。一级、二级主体以及相关元素之间的联系，就构成了一幅画面。

　　《招式四：比例》

　　提到“比例”我们能够想到的是人物比例，例如“三庭五眼”；儿时数学课上接触到的“黄金比例”，现已被运用到的格格层面，如：数学、物理、建筑、美术甚至是音乐；达芬奇著名的手稿《维特鲁威人》，“维特鲁威人”也是达芬奇以比例最精准的男性为蓝本，因此后世也常以“完美比例”来形容当中的男性。

1.大小

不同大小的元素之间的比例关系

正如上面[层级结构]中提到的，层级关系也是按照一定的大小比例体现的，例如主标题突出，那么简单的方法是什么？我所想到的简单粗暴的方法是加大加粗，颜色突出。那么副标题，其他元素大小依次递减。

2.比例

元素相互间按一定的比例排列，在视觉上更加和谐

　　刚刚提到的“黄金分割比”，还就是不断出现在视线中的“斐波那契螺旋线”（黄金螺旋），有种手握黄金螺旋（线），搞定所有设计稿的感角，呐呐，既然提到设计，不得不提的就是苹果的LOGO了，每次看到这样的LOGO，我都是这个样子的—orz，大写的服字。

3.分割

不同大小的元素集中的注意力

　　在平面构成中，把整体分成部分，叫分割。在日常生活中这种现象随时可见，如房屋的吊顶、地板都构成了分割。下面介绍几种常用的分割方法：

　　等形分割：

　　要求形状完全一样，分割后再把分隔界线加以取舍，会有良好的效果。

　　自由分割：

　　自由分割是不规则的，将画面自由分割的方法，它不同于数学规则分割产生的整齐效果，但它的随意性分割，给人活泼不受约束的感觉。

　　比例与数列：

　　利用比例完成的构图通常具有秩序、明朗的特性，给人清新之感。分隔予一定的法则，如黄金分割法、数列等。

　　《招式五：重要性》

1.亮点

打破原有的框架，强调视觉层级结构

　　什么样的作品能够吸引你的停留？或者是什么样的女性（男性）能够吸引你？想必都是它（他和她）有别于其他，在他们身上你会发现闪光之处，这也许就是传说中的“亮点”。“亮点”就是神仙放屁——不同凡响。广告创意也要如此，做“情理中意料外”的创意，有亮点才有瞩目。

　　每个人关注作品的点不同，所以认得“亮点”也就不尽相同，这里就不列举作品。

2.色彩

区分一系列类似的形式的元素

　　直接上图吧，下面是《KILL BILL》的电影海报，你的第一眼看到是什么？

另外，字体有属于自己的属性，表现刚强男人本色那么就选用黑体，较为粗犷的字体，如果表现女性柔美轻佻那么就选用衬线体或是纤细的字体，等等。色彩也不例外，有着属于自己的本质属性。提到淡雅、自然、静谧的年轻化的风格，我首先想到的是“小清新”，个人很喜欢“小清新”风格的所有，“小清新”都是淡雅、自然、朴实、超脱、静谧、活力满满的。当我们当提到“小清新”的时候脑海中自然的就会想到那些图片的色调，风格。于是这种色彩就被赋予了“小清新”这一昵称。

　　“小清新”源于日本，诸多年轻人饮料水广告中，均有“小清新”的出场，例如下面[日本宝矿力水]以蓝色系作为背景，比较有清纯有活力的女生作为主角，传递出了清新、卡哇伊、运动、年轻的气氛。

3.大小

元素大小的不同的利于集中注意力

大小其实上次在“比例”中也有所提及。哪里突出，大哪里（反之亦可）。大小差别少，给人的感觉较沈着温和，大小的差别大，给人的感觉就会比较鲜明，而且具有冲击力。

一张海报，一系列广告，所表达的重点是什么就突出什么，重要的事情，次要的事情，次次要的事情之间的排列就涉及到了“层次结构”，于是“对比”也就出来了，远近，大小，虚实，明暗等等，是画面更加丰富，具有层次感。

　　《招式六：相似性&对比》

1.明暗

前景和背景元素之间的对比

　　最具强烈的明暗对比的元素，比明暗差别不大的元素更能占据主导地位。

　　也就是又回归到了“对比”,通过明暗对比，突出主体，“明暗”其实并不是单纯的只是颜色的明度暗度关系，国画中的疏密关系也属于明暗关系。

　　下面是Blomberg Freezer冰箱的这个广告，“KEEPS IT FRESH IN POWER OUTAGE。

2.线性

元素不同的材质和形式带会来截然不同的效果

曲线很富有柔和感、缓和感；直线则富坚硬感、锐利感，极具男性气概。自然界中，皆由这两者适当混合。平常我们并不注意这种关系，可是，当曲线线或直线强调某形状时，我们便有了深刻的印象，同时也产生相对应的情感。故我们常为加深曲线印象，就以一些直线来强调，也可以说，少量的直线会使曲线更引人注目。（文：酷coo豆）

　　在网页设计中，线性会有引导作用、分割作用、提示作用、修饰作用等。红的的丝带贯穿整个页面，有一气呵成的连贯性。

线性的分割、修饰作用

TIPS

　　get创意视觉六大招式

　　分分钟变身设计小达人