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

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

详细解析如何打造网页的形式感技巧,PS<a href=/photoshop/ target=_blank class=infotextkey>教程</a>,

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

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

圆:可爱、灵动

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

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

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

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

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

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

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

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

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

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

这里是天马行空环节!

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

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

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

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

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

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

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

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

撒花~

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

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

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

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

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

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

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

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

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

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

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

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

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

关键词联想

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

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

选择主要图形元素

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

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

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

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

各种摆阶段

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

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

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

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

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

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

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