申请网站
忘记密码
密 码：
登录名：
建站咨询热线：
0532-88781131
、
13165158935
知识普及 » 高品质的网页设计：实例与技巧
高品质的网页设计：实例与技巧
奈薇网页设计
于
2020-05-22 20:19
发表
阅读次数
1131
次
“高品质”是所有人追求的目标，在
网页设计
的世界中也不例外。不过何为“品质”，如何判断一项设计的品质是好还是坏？笔者恰好有一套找出
网页设计
中品质焦点的方法。一旦你了解到如何判断一项高品质的设计究竟好在哪里，你就掌握了让自己的设计更趋完美的大量技巧。
接下来我会给大家列一些要点，并附上相应的例子，与大家分享一下我在别人的
网页设计
中寻找“高品质”的过程。
01.留白
在好的
网页设计
中我最留意的是那些对设计元素之间留白的聪明运用。留心不同内容区块之间的间距和排列方式，能让你的设计的整体感官大不一样，从而提升设计的品质。
我觉得处理好留白的关键是从整体上感知设计元素。把设计稿缩小观看会是个好办法。
出色的留白处理的实例
Good.is
页面整洁而有开放感，全都得益于设计师对文字和图像之间留白量的准确把握。
DigitalMash
在大空白上展示的元素往往更具吸引力。DigitalMash的网站创造了极佳的亲和力。
CreaticaDaily的大量空白
优秀的留白运用又一次让网页内容成为焦点。每篇文章中都有大量内容，不过该站点的设计师们并不惮于给这么多内容之间填上大量留白。并不是说你的文字不够多，就不能用很多留白。
Postbox上也有很多空白
仔细观察Postbox的网站，你能看到边缘处的留白应该如何处理。它的方框边缘有60像素的边内留白。听起来似乎挺大的，实际看起来效果却好极了。
留白时的错误
大家在设计留白时的最常见问题就是各个区块的内容到边缘距离太小。不论你的设计多么有风格，如果你硬要把东西塞得紧紧的，这些风格连同设计的品质，就都流失了。
留白不够的例子
我们已经看到PostBox的网站那些大留白创造了多么动人的效果，所以下面我们修改一下它的页面，看看减少留白会是什么效果：
品质感明显下降了。留白的影响就有这么大。
高效控制留白的技巧
各种不同情况下，留白要求都不尽相同。你需要不断训练自己，做到对留白所能带来的改变时刻心中有数，从而有效地利用留白满足设计需求。这要靠个人感觉的，不过都能从实践中锻炼出来。
使用网格辅助设计
利用网格当然能帮助你理解元素之间的空白。
不断尝试
不断尝试—失败—尝试，直到找到最佳方案。
留白并不是浪费空间
空白并不总是等着你去填充的。
没错，少就是多
与其用尽心思填满某个区域，不如就把它留空，只保留至关重要的信息就好。
02.像素级的完美
有一个方法能够看出某人在完成一项
网页设计
时是否真的用心了。有时候创造奇迹的就是一些小细节，一些别人几乎无法察觉的细节。我所说的“像素级的完美”就是指在线条、边缘和边框描边上仔细推敲。与其就用一条单一的线，不如多加一些细节。细节可以是细微的渐变，也完全可以只是一条1像素宽的细线（用作表现阴影或高光）。有了这些细节，你的设计会大不一样。有些设计师在这方面特擅长：CollisTa’eed，DavidLeggett以及WolfgangBartelme.
像素级完美细节的实例
Envato的细节鉴赏
下图的Example1（例子1）中，绿色内容框的边缘有一条更亮的绿色线。而Example2处，区块内边缘有柔和的渐变阴影，而边缘之上还有一像素的白色描边。这做法非常聪明，用阴影来强调高光。后面的绿色区域有非常柔和细微的光影效果，有助于将注意力吸引到下面的白色区块中那清新脆爽的细节上去。尽管这种做法并不是总能让设计看起来更加精致，不过它们的确能帮助你赋予设计以三维的真实感。于是设计元素就成了镶嵌在页面上的宝石，而不是平铺在上面的一张毫无动感的纸。
yuhou.cn上的细节
DavidLeggett对于如何制造单像素顶边条有很深的理解。他最近重新设计的tutorial9集合了很多非常棒的像素化技巧。Example1处你能看到，他是如何仅仅通过添加一条1像素的高光，而将导航标签变得更有质感。Example2处使用的技巧则更多了。相机图标的投影，下方白色区域的阴影与高光，以及导航条上的1像素高光。
高品质的网页设计：实例与技巧相关标签：
网页设计
，
网页制作
，
设计网站
，
网站申请
相关热点推荐
网页设计中的功能与美化
网站策划的具体内容
HTML中不同的权重标
青岛网站制作支持旧IE
一个好的网站应该同时具
系统化学习SEO技术的
百度每个月的收录时间分
关于网站排名的基本原则
微型博客，专业领域个人
化妆品的网站策划分析
巧妙性设计之UI按钮设
制作网站应选择什么语言
网站建设的误区
如何做到网站的最佳优化
网络三阶段是指的哪三阶
全新角度洞悉网站建设中
新手建站要注意的几个关
越简单越丰富—极简网页
2015年网页设计十大
青岛网站设计中如何增强
青岛奈薇建站网科技，分
青岛网站制作中如何合理
如何提高百度收录的概率
网页设计配色应用实例剖
搜索引擎关键字推广 短
网站定位的个人建议
如何创造高质量内容的原
青岛网站建设报价与费用
如何利用微信高级接口？
企业自助建站的注意事项
奈薇建站网科技2016
表格在网站设计中的表现
如何防止网站被复制
十种最适合做站长的人
网页的交互设计
产品用户研究和基础用户
站在用户的角度来设计网
计算机网络管理技术及其
删格设计解决网站布局乱
CSS的十八般技巧（二
奈薇建站网青岛网站建设公司/青岛网站制作公司，专业提供"气质"型网站建设及精美网站制作服务，同时欢迎各地网站建设公司、网站制作公司代理我们的奈薇建站系统共同发展
热点地区：
青岛网站建设价格
青岛即墨网站制作公司
开发区信息港
山东在线门户