• <bdo id="g6euu"><blockquote id="g6euu"></blockquote></bdo>
    <bdo id="g6euu"><samp id="g6euu"></samp></bdo>
  • 首页 > 网页教程 > 设计分享 > 网页设计教程:如何打造丰富、充满呼吸感的网页设计布局

    网页设计教程:如何打造丰富、充满呼吸感的网页设计布局

    时间:2016-09-13    来源:飞屋设计
    前言

    我们人类千人千面,但怎么长都不会偏离骨骼。因此,保持了内在的坚固恒久性,外表就一出戏,相对自由式的进行视觉想象编结。布局排版说来很容易,无 非就是整理好网页的元素清单,然后一一放上版面即可。其实就因为自由搭配的方式千差万别,我们总为最好解决方?#24863;?#24748;一线,其实最后的结果又马马虎虎。

    优秀的排版是构图、?#35745;?#37197;色、字体等各方协调的共同结果,设计其实是没有规则可循,审美从来都不在约束内发生。要想让整个版式内容丰富又充满呼吸的空间,需要我们整个的思考方式都流动起来。

    没有边界

    一段文字和一张?#35745;?#29978;至一个图标……在你进行布局的时候,由于你的素材并不是立刻手到擒来,你的布局总是?#19981;?#29992;一个个矩形来代表一段文字或一张?#35745;?#36825;本没有错,但这个做法?#19981;?#35753;你陷入“框架陷阱”。

    就像这样一个布局,只是画出了一个大致的框架图,也许你只是想说这只是框架,因为设计规划前期很多素材?#20849;?#19981;完善。

    然而,很有可能你就会因此而将页面设计成这样

    当然,你会说这样其实并没有什么不好,因为几乎我们所有看到的扁平化网页都是这个样式,但可以肯定的是,这个网页并没有多少呼吸的空间,整 个网页都被信息所填满,如果稍微改变一下布局的元素大小和位置,其实就会展示出不一样的版面效果(下图),而很显而易见后者的排版是更为灵活的。

    边界所造成的局限就是你的思维,你将会习惯在这个框架内去思考解决方案,如果你想要躲过这个陷阱,就是学会越过框架去思考。就算你做好了框架,也要认识到这不过是一个前期的不确定方向的试探,你完全可以改变框架的构造。

    很多设计师?#22312;?#20026;美术民工,而觉得?#32422;?#31163;艺术家这个范畴越来越远,其?#23616;?#30340;差别就是,工?#25345;?#26159;重复一项劳动,在创造之前它就已经知道了目标。比如设 计网页前,已经知道最终网页做成什么样,那么你的工作就仅仅是按部就班完成每个元素的对齐工作。而艺术家则是在事前并不知道结果,往往是一步一试探去寻找 更加有效的解决方案,艺术创作类似于一?#32622;?#38505;。设计师其实是取乎其中,也就是两个身份兼有的理想结合。

    创造焦点

    这么说也许有点夸张,但任何一件好的平面作品,一定是有焦点的。就像我们谈到过,十字准星型的视觉结构习惯将焦点置于?#34892;?#20301;置,要制造一个焦点的办 法有很多,简言之,就是制造冲突。想象你在一个人?#21512;?#30095;的大厅,突然有两个人高声争论什么,这时引起?#24605;?#20010;人围观,这个情景就在原本安静的人流中制造了一 个关注焦点。同样,在视觉领域也是如此,利用对比冲突应该是一种最有效的制造焦点的方式。

    对于焦点的认识我们也不应局限于是一个“点”,它是一块正吸引你的视线所投射的区域。它还可以分为实焦点和虚焦点,实焦点是在虚焦点之上更为精准的投射存在。

    这个页面设计中,字母与静物交相融合的区域位于正中,成为虚焦点,而利用色彩的对比,那?#34987;?#33394;眼镜又?#26377;?#28966;点的区域突出出来成为实焦点

    除了色彩,其他任何属性都可以经由对比形成焦点,这时你要做的,就是注意焦点不应太多。也因此,除了焦点以外,设计中的其他元素都要保持一种相似性。

    这里我们总结一下能用于进行对比属性,这些属性之间形成的对比越大,冲突越大。

    空间:充满-空置、积极活跃-消极被动、前进-后退、近-远、二维-三维、封闭-开放

    形式:简单-复杂、美-丑、抽象-具象、清晰-模糊、几何形式-有机形式、直线-曲线、对称-非对称、完整-破碎

    结构:井井有条-混乱无序、排列成序-随意放置、衬线字体-无衬线字体、机械-手工

    纹理?#21512;?粗、平滑-粗糙、反光-哑光、滑-黏、锐-钝

    位置:顶部-底部、高-低、右-左、上-下、前-后、有节奏-随意、单独-分组、接近-远离、?#34892;?边缘、整齐排列-互不关联、内-外

    方向:垂直-水平、垂直线-对角线、向前-向后、稳定-活动、内聚-分散、顺时针方向-逆时针方向、凹形-凸形、正体字-斜体字

    尺寸:大-小、长-短、窄-宽、扩大-收缩、深-浅

    颜色:黑色-彩色、亮-暗、暖色-冷色、明度-暗?#21462;?#22825;然-人造、饱和(深色)-无色(素色)

    密度?#21644;该?晦暗、稠密-稀薄、液体-固体

    重力:轻-重、稳定-不稳定

    注:上述内容摘自《平面设计原理》一书

    设计师在做设计时,其实并不会将这些规范提前设定在大脑中,而是经过经验的积累而形成一种潜在的直觉,这份清单的意义并不是需要你记下它,而是浏览完后,在设计的任何场合的提?#36873;?#27604;如一份作品完成后,可以看看究竟焦点是否足够吸引,哪些元素需要进一步调整。

    焦点突出的前提是非焦点区域的元素尽量保持一致。制造冲突似乎手到擒来,但是要保持一致却需要步步为营。

    例如下图页面正中的图案也是整个页面的焦点所在

    可以看到虚焦点区域是这个由手绘花朵、几何图案数字?#32422;?#20854;他手绘图案组成的这个图案几何体,实焦点却是落在了最大的手绘花朵上。这时,手绘花朵的有机与相邻的几何形有了一个对比,这就是几何形式与有机形式的对比。

    最大的实心花朵的尺寸大小刚好和右下方手绘的大脑的尺寸相同,而它们之间也存在色?#35270;?#26080;色彩的对比。

    三角的几何形与数字的位置刚好都是三角。再仔细观察整个彩绘花朵的材质和图中的几何?#25105;约?#25968;字的材质都相同,而与手绘的大脑的绘画材质有明显的差别,它们彼此间相互对比,而彼此又有统一。

    经过分析观察,一个焦点的构造也没有想象那么简单。如果把对比和统一看作一个天平的两极,那么所有元素间的关系都是在它们之间取值,此消彼长最后达到平衡。这完全可以看作是一?#33267;?#23398;。

    如果你的画面?#24615;?#32032;越多,越需要你加强整个画面的统一的力量。

    下面这个设计是由许多小插画所聚合的一个页面,一不小心就陷入凌乱,而设计师将这些插画分为三块内容,每块内容用背景色分区,形成三个矩形,这是形 状的统一。这些插画的材质和风格也统一,同时插画的物体所展示的方向也都是往斜下方,也形成了一种统一。因此,你可以看到这个画面的对比的力量相对较弱, 焦点是左边的矩形这一点没有人怀疑,而这个焦点里的插画可以看到是一件男士衬衫和女士衬衫,?#20449;?#29992;品的形成了对比。这个对比相对而言并不十分强烈。

    相关推荐
    25个精美绝伦的Photoshop网页设计及详细教程
    网页设计教程:20步创建完美网站布局设计
    优秀网页设计教程:网页中的“点、线、面
    教程:网页首图设计7个?#35760;?#20998;享
    CSS酷站网页水?#25945;?#32463;典设计欣赏
    欧美CSS酷站网页背景设计之光影特效赏析
    酷站欣赏之欧美棕色调网站设计案例赏析
    如何基于心理学设计的目的来制作受?#27809;?#27426;迎的网页
    二十款网页图文混排设计样式欣赏
    黑色的艺术:三十款暗黑色调的欧美CSS酷站欣赏
    35套精美绚丽的创意酷站设计欣赏
    网页设计的文字色?#35270;?#21487;读性分析
    如何掌握网页广告字体设计的?#35760;?/a>
    40款超个?#28304;?#31961;纸张纹理风格的CSS酷站欣赏
    15款富有创意的的html电?#29992;?#29255;设计欣赏
    国外49款创意型404错误网页欣赏(附演示网址)
    手绘风格的15款超级漂亮网站欣赏
    网易频道页面的改版过程分享
    网页设计师必备的13款国外CSS酷站参考画廊
    多款韩国绚丽风格的游戏网站界面设计欣赏
    网页设计中的构图?#35760;?#20998;享
    网页设计的几何圆之美
    网页交互设计的一些理解
    网页设计中上一页和下一页的?#27809;?#20307;验分析
    ?#24179;?#20998;割布局在网页设计中的应用
    简单而又不单调的网页视觉设计?#35760;?/a>
    让?#27809;?#24863;觉很糟糕的网页设计之十大原因
    淘宝网新年改版之网页宽度最佳尺寸浅析
    圆形元素在网页设计中如何应用的25个案例
    如何学习才能成长为?#24187;?#26356;好的设计师?
    淘宝案例分析之商城页面的?#27809;?#20307;验
    85个优秀的超大字体网页设计欣赏
    用实例理解网页设计的80/20规则
    寻找应用服务或程序类网站的设计规律
    10个国外网页设计领域最具影响力的人物
    30个出色的网页设计色彩搭配案例欣赏

    精彩推荐

    ?#35753;?#25945;程

    任选五走势图
  • <bdo id="g6euu"><blockquote id="g6euu"></blockquote></bdo>
    <bdo id="g6euu"><samp id="g6euu"></samp></bdo>
  • <bdo id="g6euu"><blockquote id="g6euu"></blockquote></bdo>
    <bdo id="g6euu"><samp id="g6euu"></samp></bdo>
  • 安徽25选5 pc结果参考wwwpc28am 今天安徽快3走势图解 贵州快3升级版 陕西快乐10分开奖查询 河南体彩网 09快乐双彩24期中奖号码 多乐彩基本走势图 31选7开奖结果查询结果 大乐透奖金 捕鱼游戏排行 江苏e球彩 今晚选4开奖结果查询 重庆时时彩彩票论坛群 广东彩票36选7