详细解析如何打造网页的形式感技巧
作为自然界视觉的三种基础形态,它们分别由直线、折线、弧线组成。
我们来看看它们各自的几何形态的情感:
方:整齐、稳定、干净、锐利。缺点:生硬、呆板
圆:可爱、灵动
三角:动感、尖锐、不平衡
其中方向因为其整洁、易识别、重构性好的特点在网页设计中应用比较广泛,但与此同时也容易让人审美疲劳形成画面生硬的印象,所以在非门户或大型资料站等页面时可以采用圆、三角这两个元素进行调和。
如:活动专题页、内容不多的小型资料页。
增强视觉上的灵动和刺激可以让页面快速抓住玩家的眼睛,达到专题快速传播的效果。
现在我们就来用这三种几何形态为页面视觉做一个简单的配餐吧!
我们在此只是做了一些简单的尝试,三种形态的组合还有很多。在日常的页面设计中我们可以根据内容进行页面基础框架的打稿。
在配搭时,必须注意选择其中一种形作为主形,避免形成大形不清晰、小形各自独立的碎块。
一起来尝试做些小练习吧。
这里是天马行空环节!
搭几何框架的好处有很多。增强想象空间,这点很重要。
我们拿上一张的左一图形举例,它可以是一个信封、可以是测量器、也可以是棒球场。当然我们需要结合主题来变换各种几何搭配,不断刺激寻找到创作的G点。
另外在此基础上我们可以进行灵活的基础配色,无细节负担,运动起来当然方便。
文字排版,可以快速调整版块和文字比例。
搭完框架后配搭上必需的图片和文字,丰肉加质感。
在文字排版的时候,因为其不规则的形状,我会需要适当调整字符和图片内容。把握疏密和节奏。
一张有形式感又很整体的专题页面就完成了。
撒花~
我们再一起来欣赏一些平时看到的这些有形式感的专题页吧。
在配搭时,必须选择圆、方、三角的其中一个形作为主形,避免大形不清晰、小形各自独立的碎块。
这是一个圆和三角的陷形,结合logo的弧线打形。整个页面虽然各自为块,却浑然一体,刚柔并济。
这是一张我们日常可能收到的来自项目的需求,版块多、文字也不少。要做一张有形式感的页面看起来并不容易。怎么办呢?
让我们来简单规划一下吧。
这是一个愚人节的页面,项目策划了与此谐音的“鱼人”活动。
因为这个主题我们可以设计得相对轻松活泼有爱的风格。
现在我们来看看内容。内容大致分为两个部分,左右抓鱼、右边是变成鱼被抓。一个并列的形式,版块内容页相对类似。在最下方有一个共享的奖励版块,属于两大版块合用的部分。
有了一个大致的概念,我们就可以开始搭出我们的框架了。
关键词联想
看我交互需求稿后,我们围绕“愚人节”这个主题开始了系列关键词的联想。这个阶段可能是天马行空的,有着多种不可预计的有趣结果在等待我们。
选择主要图形元素
根据关键词联想,我们选择了主形圆形和辅形三角。
圆形:灵动、活泼、有趣、可爱、多变。
三角:尖锐、不平衡、刺激、动感。
各种摆阶段
设计是一个理性+联想+运气的过程。在圆方三角的各种摆过程中,我们可以泼墨般的尝试各种方案,由运气不断刺激灵感,灵感不继产生新的体验,把握住理性的缰绳,最终产生我们要的创意和图形。
1.在知道了策划需求后,我们大致清楚我们需要一个对称的造型。根据鱼人这个概念,我们通过圆方三角的基础形状搭出一只鱼的造型。
2.然后根据现有的页面内容继续细化框架,还是继续三种元素的配搭。
3.放入必需的图片和文字进行空间的比对,并进一步切割形状,丰润细节。在这个过程中必须注意运用颜色和形态大小保持每个版块的主形,避免过于琐碎。
在布局完整无误的情况下疯狂随意丰肉吧。一张有爱的鱼人节页面就这样快速简单的完成了。来试试吧!