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

爱依恋时尚男装

爱依恋时尚男装

2016-02-17 00:39

今天图老师小编要跟大家分享详细解析如何打造网页的形式感技巧,精心挑选的过程简单易学,喜欢的朋友一起来学习吧!

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

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

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

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

圆:可爱、灵动

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

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

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

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

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

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

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

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

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

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

这里是天马行空环节!

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

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

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

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

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

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

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

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

撒花~

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

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

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

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/pmsj/)

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

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

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

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

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

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

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

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/pmsj/)

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

关键词联想

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

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

选择主要图形元素

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

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

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

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

各种摆阶段

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

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

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

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

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

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

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

展开更多 50%)
分享

猜你喜欢

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

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析如何打造网页的形式感技巧

详细解析网页传体技巧解析

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析网页传体技巧解析

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

详细解析网页设计的构图技巧

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析网页设计的构图技巧

详细解析网页Banner设计的心得技巧

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析网页Banner设计的心得技巧

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

详细解析网页全屏设计的心得技巧

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析网页全屏设计的心得技巧

详细解析网页字体设计心得技巧

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析网页字体设计心得技巧

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

Dribbble上值得你关注的10位UI设计师

Dribbble上值得你关注的10位UI设计师

40扁平化的APP应用UI和网页设计素材

40扁平化的APP应用UI和网页设计素材
下拉加载更多内容 ↓