想做好专题页!先学专题页设计中的构图 - 优设网 - UISDC

想做好专题页!先学专题页设计中的构图

2013/10/30 43816评论区

想做好专题页!先学专题中的构图之美

mux:一个成功的专题页面,大部分会具有以下几个出彩的要素:色彩、构图、风格创意,细节等。一个页面从无到有,设计师需要对整个页面有全盘的设计和把控,良好的画面分割能够让用户第一眼看到这个页面就能被视觉吸引,甚至不用浏览具体内容就能了解这个页面的很多信息。

同样的素材,同样的配色,不同的构图能够让页面出来的效果有天壤之别。如果你还抱着一个专题就是一个出色的头图,下面的内容按部就班的填进去,那你就OUT了。现在的专题设计越来越具有整体画面感,看上去不像网站,更像是精美的杂志或者是精彩的平面设计作品。

万圣节快到了,时间紧要时童鞋们可以参考如何快速打造节日专题页设计,促销专题页可以从教你快速搭建节日促销专题页里学习,想要创造不一样的构图,就来阅读这篇吧 : )

好的页面构图能够让你页面更出彩,也能让你做设计更事半功倍。下面,我们就来看看一些好的专题都是怎么构图的。

(以下例子均来自互联网)

一、几何切割

在现实生活与自然界中,我们随处可见几何图形的存在,简单的三角形、正方形、长方形和圆形甚至几根线条就可以组成很多有趣的图形,也很符合现代审美需求,适当的画面切割能够给页面带来动感与节奏感。加入几根线条,几个块面就能令页面起到意想不到的效果。

实现的时候需要注意的是素材不适合太过复杂和花哨,一般会是纯色大块搭配渐变,主要突出形状和区块。

a. 简单切割

想做好专题页!先学专题中的构图之美
 
想做好专题页!先学专题中的构图之美
 
想做好专题页!先学专题中的构图之美

用一个形状或者素材切分整个页面,画面瞬时变得有趣生动起来,内容区域也能得到有效划分。

这类构图方式对内容没有过多要求,可随意安排。具体排版可根据内容来处理,也是现在专题页面用得最多,最普遍的一种构图方式。

b. 对称切割

想做好专题页!先学专题中的构图之美
 
想做好专题页!先学专题中的构图之美
 
想做好专题页!先学专题中的构图之美

这种构图方式的前提一般是内容分主要两部分,并且这两部分是对立关系的情况下,比如说:对战,男女,冷热等等。页面一分为二,内容划分明确也更加具有视觉冲击力。

c. 组合切割

想做好专题页!先学专题中的构图之美
 
想做好专题页!先学专题中的构图之美

集中而规律的排列,从整体上抓住人们的视觉。这种构图方式适合那种每个区块中的内容属于平级关系的专题,例如示例中的几个功能点和分类,都是属于同一级的内容,所占的比例也相同,用这种组合的排列能够保持各内容的关系,也能让布局更有创意。

d. 多重切割

想做好专题页!先学专题中的构图之美
 
想做好专题页!先学专题中的构图之美

不规则的构图,稳定而锐利,干净的排版,易于识别,不规则的构图方式,避免了画面生硬,不易产生审美疲劳。不同的形状和排列,呈现出来的视觉效果也不一样。这种构图方式使用最多的一般是为了体现时尚感,科技感,与锋利感觉的专题,例如时装,家电,以及游戏战斗类的专题等等。

二、主体轮廓

活动的专题年年做,没有新意,想更与众不同?那就这样处理吧,根据专题的主要内容,从整体上构建一个边界或外形线,形成一个大的轮廓,将专题内容巧妙的填充进去。这种处理方式能够让用户一眼就能了解到一些信息,符合专题主题,并且能够让页面更有设计感,生动且活泼。需要提醒的是设计的时候将形状尽量轮廓化,加以强调突出,主体不需要太具象,舍弃一些繁琐的、次要的元素,以免影响用户阅读内容。从个人经验来说,小编一般会在拿到需求的时候先进行脑暴发散联想,提取出一些有用的信息,再从中挑选出适合元素去寻找一些图片,通过图片素材来激发创意。

想做好专题页!先学专题中的构图之美
 
想做好专题页!先学专题中的构图之美
 
想做好专题页!先学专题中的构图之美
 
想做好专题页!先学专题中的构图之美
 
想做好专题页!先学专题中的构图之美
 
想做好专题页!先学专题中的构图之美
 
想做好专题页!先学专题中的构图之美
 
想做好专题页!先学专题中的构图之美

这类构图方式一般针对那种主体内容很明确以及具象,能够用物品或轮廓直接代表,比如:端午可以用龙舟、粽子;中秋可以用月饼、玉兔;会员可以用皇冠,钻石等等等等,可根据具体的内容来进行尝试。

三、放射及透视

通过整体放射状加透视构图,使画面呈现立体与空间感,视觉焦点明确,画面冲击力强,富有动感。需要注意的是放射状的排版不太适合文字阅读,要注意文字排版。建议在文字数量较少的情况下选择此种构图。一般游戏激战类的专题会较多的使用这种构图,突出动感。

想做好专题页!先学专题中的构图之美
 
想做好专题页!先学专题中的构图之美
 
想做好专题页!先学专题中的构图之美
 

四、整体场景

专题内容不多,要突出趣味性,又怕用户无聊,那就设计成一副美妙的插画吧!让用户迅速置身在搭建的场景中,带动情绪,参与互动,直观获取有用信息。这种处理方式会使页面信息表现的更加准确顺畅,快速有效的把目标用户带入到页面氛围当中。不过需要注意的是场景搭建对素材的要求比较高,明暗,阴影,透视以及层次感,体积都需要用心处理。这类专题大多都会搭配动画一起实现,在带入感上更进一层。在设计的时候,对专题内容头脑里要有画面感,先搭建大的画面关系,再往里头添细节和内容,切记场景不要抢了内容的视觉焦点,在适当的时候做些减法。

想做好专题页!先学专题中的构图之美
 
想做好专题页!先学专题中的构图之美
 
想做好专题页!先学专题中的构图之美
 

五、流程图

如果你拿到的专题是渐进以及流向又或者是展示各节点的内容,用别的形式总感觉不够具象,那何不干脆做成一个个性化的流程图?俗话说,千言万语不如一张图,专题运用这种构图方式能够将步骤,关系,各个节点以及整体流向展示清楚,配合图片展示,一个枯燥的流程瞬间变得个性十足,用户浏览简单又明了,并且充满了趣味性。

想做好专题页!先学专题中的构图之美
 
想做好专题页!先学专题中的构图之美
 
想做好专题页!先学专题中的构图之美

在网页设计越来越注重个性、趣味性以及视觉冲击力的今天,专题页面的构图也已经千变万化,以上只是列举出了其中较常见的一部分,不同的主题,不同的内容,构图排版的出发点也不尽相同,上面列举出来的方法也可以搭配使用。

在拿到需求的时候,先不着急下手,构思的时候可以大胆尝试,考虑内容和风格,先确定构图,再往里面添加内容,充分考虑到内容的排版,尽量做到让一个专题有大创意的同时又具有小细节,实现整体形式感的完美和谐的统一。

另外最后提醒一下:所谓构图就是将表现主题的各个构成要素按照主次关系放置在画面相应的区域,形成视觉感受,达到设计意图。所有的构图方式追根究底都是为内容服务,构图必须要服从主题表现的要求,设计师在设计的时候要注意在追求创意构图的同时也别影响到用户阅读内容。

原文地址:mux.baidu
 
================关于优设网================
“优设网uisdc.com“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计讲座:每月邀请国内互联网公司设计前辈及行业总监在群内及YY语音(YY频道:156982)分享实战经验。
设计微博:拥有粉丝量56万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

youshege
 

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/special-page-design

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 版式设计 界面设计 排版布局 职场 优设专访 设计师干货 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 设计规范 海报设计 设计趋势 用户体验设计 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里