详细解析如何打造网页的形式感技巧

作为自然界视觉的三种基础形态，它们分别由直线、折线、弧线组成。

我们来看看它们各自的几何形态的情感：

方：整齐、稳定、干净、锐利。缺点：生硬、呆板

圆：可爱、灵动

三角：动感、尖锐、不平衡

其中方向因为其整洁、易识别、重构性好的特点在网页设计中应用比较广泛，但与此同时也容易让人审美疲劳形成画面生硬的印象，所以在非门户或大型资料站等页面时可以采用圆、三角这两个元素进行调和。

如：活动专题页、内容不多的小型资料页。

增强视觉上的灵动和刺激可以让页面快速抓住玩家的眼睛，达到专题快速传播的效果。

现在我们就来用这三种几何形态为页面视觉做一个简单的配餐吧!

我们在此只是做了一些简单的尝试，三种形态的组合还有很多。在日常的页面设计中我们可以根据内容进行页面基础框架的打稿。

在配搭时，必须注意选择其中一种形作为主形，避免形成大形不清晰、小形各自独立的碎块。

一起来尝试做些小练习吧。

这里是天马行空环节!

搭几何框架的好处有很多。增强想象空间，这点很重要。

我们拿上一张的左一图形举例，它可以是一个信封、可以是测量器、也可以是棒球场。当然我们需要结合主题来变换各种几何搭配，不断刺激寻找到创作的G点。

另外在此基础上我们可以进行灵活的基础配色，无细节负担，运动起来当然方便。

文字排版，可以快速调整版块和文字比例。

搭完框架后配搭上必需的图片和文字，丰肉加质感。

在文字排版的时候，因为其不规则的形状，我会需要适当调整字符和图片内容。把握疏密和节奏。

一张有形式感又很整体的专题页面就完成了。

撒花~

我们再一起来欣赏一些平时看到的这些有形式感的专题页吧。

在配搭时，必须选择圆、方、三角的其中一个形作为主形，避免大形不清晰、小形各自独立的碎块。

这是一个圆和三角的陷形，结合logo的弧线打形。整个页面虽然各自为块，却浑然一体，刚柔并济。

这是一张我们日常可能收到的来自项目的需求，版块多、文字也不少。要做一张有形式感的页面看起来并不容易。怎么办呢?

让我们来简单规划一下吧。

这是一个愚人节的页面，项目策划了与此谐音的“鱼人”活动。

因为这个主题我们可以设计得相对轻松活泼有爱的风格。

现在我们来看看内容。内容大致分为两个部分，左右抓鱼、右边是变成鱼被抓。一个并列的形式，版块内容页相对类似。在最下方有一个共享的奖励版块，属于两大版块合用的部分。

有了一个大致的概念，我们就可以开始搭出我们的框架了。

关键词联想

看我交互需求稿后，我们围绕“愚人节”这个主题开始了系列关键词的联想。这个阶段可能是天马行空的，有着多种不可预计的有趣结果在等待我们。

选择主要图形元素

根据关键词联想，我们选择了主形圆形和辅形三角。

圆形：灵动、活泼、有趣、可爱、多变。

三角：尖锐、不平衡、刺激、动感。

各种摆阶段

设计是一个理性+联想+运气的过程。在圆方三角的各种摆过程中，我们可以泼墨般的尝试各种方案，由运气不断刺激灵感，灵感不继产生新的体验，把握住理性的缰绳，最终产生我们要的创意和图形。

1.在知道了策划需求后，我们大致清楚我们需要一个对称的造型。根据鱼人这个概念，我们通过圆方三角的基础形状搭出一只鱼的造型。

2.然后根据现有的页面内容继续细化框架，还是继续三种元素的配搭。

3.放入必需的图片和文字进行空间的比对，并进一步切割形状，丰润细节。在这个过程中必须注意运用颜色和形态大小保持每个版块的主形，避免过于琐碎。

在布局完整无误的情况下疯狂随意丰肉吧。一张有爱的鱼人节页面就这样快速简单的完成了。来试试吧!