欢迎来到天天文库
浏览记录
ID:14660598
大小:261.92 KB
页数:18页
时间:2018-07-29
《网页ui设计之灵动布局》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、网页UI设计之灵动布局前言我们人类千人千面,但怎么长都不会偏离骨骼。因此,保持了内在的坚固恒久性,外表就一出戏,相对自由式的进行视觉想象编结。布局排版说来很容易,无非就是整理好网页的元素清单,然后一一放上版面即可。其实就因为自由搭配的方式千差万别,我们总为最好解决方案心悬一线,其实最后的结果又马马虎虎。优秀的排版是构图、图片、配色、字体等各方协调的共同结果,设计其实是没有规则可循,审美从来都不在约束内发生。要想让整个版式内容丰富又充满呼吸的空间,需要我们整个的思考方式都流动起来。没有边界一段文字和一张图片,甚至一个图标……在
2、你进行布局的时候,由于你的素材并不是立刻手到擒来,你的布局总是喜欢用一个个矩形来代表一段文字或一张图片,这本没有错,但这个做法也会让你陷入“框架陷阱”。就像这样一个布局,只是画出了一个大致的框架图,也许你只是想说这只是框架,因为设计规划前期很多素材还并不完善。UI设计然而,很有可能你就会因此而将页面设计成这样当然,你会说这样其实并没有什么不好,因为几乎我们所有看到的扁平化网页都是这个样式,但可以肯定的是,这个网页并没有多少呼吸的空间,整个网页都被信息所填满,如果稍微改变一下布局的元素大小和位置,其实就会展示出不一样的版面效果
3、(下图),而很显而易见后者的排版是更为灵活的。UI设计边界所造成的局限就是你的思维,你将会习惯在这个框架内去思考解决方案,如果你想要躲过这个陷阱,就是学会越过框架去思考。就算你做好了框架,也要认识到这不过是一个前期的不确定方向的试探,你完全可以改变框架的构造。很多设计师自诩为美术民工,而觉得自己离艺术家这个范畴越来越远,其本质的差别就是,工匠只是重复一项劳动,在创造之前它就已经知道了目标。比如设计网页前,已经知道最终网页做成什么样,那么你的工作就仅仅是按部就班完成每个元素的对齐工作。而艺术家则是在事前并不知道结果,往往是一步
4、一试探去寻找更加有效的解决方案,艺术创作类似于一种冒险。设计师其实是取乎其中,也就是两个身份兼有的理想结合。创造焦点这么说也许有点夸张,但任何一件好的平面作品,一定是有焦点的。就像我们谈到过,十字准星型的视觉结构习惯将焦点置于中心位置,要制造一个焦点的办法有很多,简言之,就是制造冲突。想象你在一个人群稀疏的大厅,突然有两个人高声争论什么,这时引起了几个人围观,这个情景就在原本安静的人流中制造了一个关注焦点。同样,在视觉领域也是如此,利用对比冲突应该是一种最有效的制造焦点的方式。对于焦点的认识我们也不应局限于是一个“点”,它是
5、一块正吸引你的视线所投射的区域。它还可以分为实焦点和虚焦点,实焦点是在虚焦点之上更为精准的投射存在。这个页面设计中,字母与静物交相融合的区域位于正中,成为虚焦点,而利用色彩的对比,那副黄色眼镜又从虚焦点的区域突出出来成为实焦点UI设计除了色彩,其他任何属性都可以经由对比形成焦点,这时你要做的,就是注意焦点不应太多。也因此,除了焦点以外,设计中的其他元素都要保持一种相似性。这里我们总结一下能用于进行对比属性,这些属性之间形成的对比越大,冲突越大。空间:充满-空置、积极活跃-消极被动、前进-后退、近-远、二维-三维、封闭-开放形
6、式:简单-复杂、美-丑、抽象-具象、清晰-模糊、几何形式-有机形式、直线-曲线、对称-非对称、完整-破碎结构:井井有条-混乱无序、排列成序-随意放置、衬线字体-无衬线字体、机械-手工纹理:细-粗、平滑-粗糙、反光-哑光、滑-黏、锐-钝位置:顶部-底部、高-低、右-左、上-下、前-后、有节奏-随意、单独-分组、接近-远离、中心-边缘、整齐排列-互不关联、内-外方向:垂直-水平、垂直线-对角线、向前-向后、稳定-活动、内聚-分散、顺时针方向-逆时针方向、凹形-凸形、正体字-斜体字尺寸:大-小、长-短、窄-宽、扩大-收缩、深-浅颜
7、色:黑色-彩色、亮-暗、暖色-冷色、明度-暗度、天然-人造、饱和(深色)-无色(素色)密度:透明-晦暗、稠密-稀薄、液体-固体重力:轻-重、稳定-不稳定(摘自《平面设计原理》一书)设计师在做设计时,其实并不会将这些规范提前设定在大脑中,而是经过经验的积累而形成一种潜在的直觉,这份清单的意义并不是需要你记下它,而是浏览完后,在设计的任何场合的提醒。比如一份作品完成后,可以看看究竟焦点是否足够吸引,哪些元素需要进一步调整。焦点突出的前提是非焦点区域的元素尽量保持一致。制造冲突似乎手到擒来,但是要保持一致却需要步步为营。例如下图页
8、面正中的图案也是整个页面的焦点所在UI设计可以看到虚焦点区域是这个由手绘花朵、几何图案数字以及其他手绘图案组成的这个图案几何体,实焦点却是落在了最大的手绘花朵上。这时,手绘花朵的有机与相邻的几何形有了一个对比,这就是几何形式与有机形式的对比。UI设计最大的实心花朵的尺寸大小刚好和右下方手绘
此文档下载收益归作者所有