没错,少就是多
优秀的留白运用又一次让网页内容成为焦点
品质感明显下降了留白的影响就有这么大
digital mash
2
下图的example 1 (例子1)中,绿色内容框的边缘有一条更亮的绿色线而example 2处,区块内边缘有柔和的渐变阴影,而边缘之上还有一像素的白色描边这做法非常聪明,用阴影来强调高光后面的绿色区域有非常柔和细微的光影效果,有助于将注意力吸引到下面的白色区块中那清新脆爽的细节上去 尽管这种做法并不是总能让设计看起来更加精致,不过它们的确能帮助你赋予设计以三维的真实感于是设计元素就成了镶嵌在页面上的宝石,而不是平铺在上面的一张毫无动感的纸
01. 留白
出色的留白处理的实例
与其用尽心思填满某个区域,网页设计设计目标不如就把它留空,只保留至关重要的信息就好
不断尝试—失败—尝试,直到找到最佳方案
接下来我会给大家列一些要点,并附上相应的例子,与大家分享一下我在别人的网页设计中寻找“高品质”的过程
creatica daily 的大量空白
留白不够的例子
good.is
1
空白并不总是等着你去填充的
4
留白并不是浪费空间
查看全文
注:相关网站建设技巧阅读请移步到建站教程频道
利用网格当然能帮助你理解元素之间的空白每篇文章中都有大量内容,不过该站点的设计师们并不惮于给这么多内容之间填上大量留白并不是说你的文字不够多,就不能用很多留白
在好的网页设计中我最留意的是那些对设计元素之间留白的聪明运用网页设计留心不同内容区块之间的间距和排列方式,能让你的设计的整体感官大不一样,从而提升设计的品质
使用网格辅助设计
tutorial9.net上的细节
envato的细节鉴赏
在大空白上展示的元素往往更具吸引力digital mash的网站创造了极佳的亲和力
02. 像素级的完美
留白时的错误
页面整洁而有开放感,全都得益于设计师对文字和图像之间留白量的准确把握
大家在设计留白时的最常见问题就是各个区块的内容到边缘距离太小不论你的设计多么有风格,如果你硬要把东西塞得紧紧的,这些风格连同设计的品质,就都流失了
postbox 上也有很多空白
高效控制留白的技巧
各种不同情况下,留白要求都不尽相同你需要不断训练自己,做到对留白所能带网页设计网页分类来的改变时刻心中有数,从而有效地利用留白满足设计需求这要靠个人感觉的,不过都能从实践中锻炼出来
有一个方法能够看出某人在完成一项网页设计时是否真的用心了有时候创造奇迹的就是一些小细节,一些别人几乎无法察觉的细节我所说的“像素级的完 美”就是指在线条、边缘和边框描边上仔细推敲与其就用一条单一的线,不如多加一些细节细节可以是细微的渐变,也完全可以只是一条1像素宽的细线(用作表现阴影或高光)有了这些细节, 你的设计会大不一样有些设计师在这方面特擅长: collis ta’eed, david leggett 以及 wolfgang bartelme.
我觉得处理好留白的关键是从整网页设计注意问题体上感知设计元素把设计稿缩小观看会是个好办法
3
我们已经看到postbox的网站那些大留白创造了多么动人的效果,所以下面我们修改一下它的页面,看看减少留白会是什么效果:
像素级完美细节的实例
“高品质”是所有人追求的目标,在网页设计的世界中也不例外不过何为“品质”,如何判断一项设计的品质是好还是坏?笔者恰好有一套找出网页设计中品质焦点的方法一旦你了解到如何判断一项高品质的设计究竟好在哪里,你就掌握了让自己的设计更趋完美的大量技巧
下一页
david leggett 对于如何制造 单像素顶边条 有很深的理解他最近重新设计的 tutorial9 集合了很多非常棒的像素化技网页设计是什么课程巧 example 1 处你能看到,他是如何仅仅通过添加一条1像素的高光,而将导航标签变得更有质感example 2 处使用的技巧则更多了相机图标的投影,下方白色区域的阴影与高光,以及导航条上的1像素高光
仔细观察postbox的网站,你能看到边缘处的留白应该如何处理它的方框边缘有60像素的边内留白听起来似乎挺大的,实际看起来效果却好极了
不断尝试
白癜风最佳治疗方法北京治疗白癜风费用