青岛网站建设公司,青岛网站制作公司-奈薇建站网
建站咨询热线:0532-8878113118562723728 
知识普及 » 高品质的网页设计:实例与技巧

高品质的网页设计:实例与技巧

奈薇网页设计 2020-05-22 20:19发表
阅读次数 1788
  “高品质”是所有人追求的目标,在网页设计的世界中也不例外。不过何为“品质”,如何判断一项设计的品质是好还是坏?笔者恰好有一套找出网页设计中品质焦点的方法。一旦你了解到如何判断一项高品质的设计究竟好在哪里,你就掌握了让自己的设计更趋完美的大量技巧。

  接下来我会给大家列一些要点,并附上相应的例子,与大家分享一下我在别人的网页设计中寻找“高品质”的过程。

  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像素高光。

高品质的网页设计:实例与技巧相关标签:网站推广申请网站网站注册网页制作
相关热点推荐
细节处理让网页设计与众
企业网站建站的首要解决
网站如何吸引用户,提高
保持网站流量对网站改版
做网站设计应该更看重框
搜索引擎优化(SEO)
如何挑选专业的网站建设
奈薇建站网科技2017
如何推广网站宣传
好设计应该是平凡的设计
交互设计实用指南系列–
HTML5技术的优点和
行之有效的网络推广方式
网页中背景纹理的7个设
青岛公司如何做英文网站
做网站优化需要达到的目
方便和实用
网站颜色在网站建造策划
浅谈网站首页元素的放置
关于网站排名的基本原则
优化你的google
影响网站排名的一些不必
新站如何尽快让搜索引擎
网络广告与网站推广的步
青岛网站建设之SEO优
交互设计有效性之操作入
设计网页页面内容要新颖
让设计散发文化韵味
青岛做网站多少钱
TDK是什么?有什么作
如何选择一家好的青岛网
WEB站点的质量测试是
谈网页优化及网站优化的
网站推广之如何炒红你的
网络分析的前置知识(一
Google面包屑导航
北京网站设计应从运营和
响应式网站的利与弊
为何青岛网站建设公司提
青岛高端定制网站价格
奈薇建站网青岛网站建设公司/青岛网站制作公司,专业提供"气质"型网站建设及精美网站制作服务,同时欢迎各地网站建设公司、网站制作公司代理我们的奈薇建站系统共同发展

热点地区:青岛网站建设价格 青岛即墨网站制作公司 开发区信息港 山东在线门户
建站咨询热线0532-88781131 15166683288 13963906391
版权所有© BangJianZhan.Com & Nev.Cn 青岛网站建设/网站制作公司
青岛雨后网络科技有限公司 - 青岛市市北区福州北路90号,景泰尚都6层
已经为您服务了
186个月 14