`
LD_21
  • 浏览: 130056 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

网页设计从优秀到卓越的6个细节

    博客分类:
  • ui
ui 
阅读更多
   优秀设计和卓越设计之间的区别是比较小的。一般人可能无法解释说明卓越的设计的具体差别,但他们可以找到自己喜欢的网页设计作品。通过对照一下几个优秀作品,我总结了一下作为卓越设计的几个细节差别。
内容摘要
1、合理使用渐变
2、留白
3、网格布局
4、提高字体应用
5、明确而有效的导航
6、设计漂亮、有用的页脚

介绍
优秀设计和卓越设计之间的区别是比较小的。一般人可能无法解释说明卓越的设计的具体差别,但他们可以找到自己喜欢的网页设计作品。通过对照一下几个优秀作品,我总结了一下作为卓越设计的几个细节差别。
前不久,我写过一篇卓越网站应该遵循的4个设计原则。现在这篇文章有点像是上一篇文章的延续。在上一篇文章里面我们重点讨论了对比、重复、对齐、分割在网页中的应用。以下内容我以几个优秀的网页作品作为实例,来说明卓越设计一直遵循的原则!

一、合理使用渐变
渐变不要滥用,更不要把渐变弄的跟彩虹似的,否则你的网页作品看起来比较外行。总而言之,合理的使用渐变对于优秀网站设计是有帮助的。

渐变、散景结合使用
Newism网站色彩丰富,但微妙的渐变与背景在视觉上结合的很到位。如果你也有兴趣在photoshop里面做这个散景效果,可以去Abduzeedo’s tutorial网站上面学习一下。

渐变、投影、纹理结合使用。
OnWired网站应用了这些设计技巧,显而易见,他的设计作品效果是很棒的!自始自终OnWired网站设计在应用渐变、投影、质感这方面是恰到好处的。我也特别喜欢设计师设计的这些。

二、留白
留白一词往往容易被误解从字面解释的空白。网页设计较为准确的描述则是网页各个板块元素之间的空间范围。进一步分析看看A List Apart是如何定义它的。
“留白”对于网页设计是很重要的,留白不至于让你页面元素都堆积在一起。对于年轻设计师来说留白可能是一个大问题,他们在做设计的时候将整个页面放的满满的,没有给页面足够的“呼吸空间”。这对于他们来说可能不是什么问题,如果内容放不下的话,他们可以借助浏览器的滚条来扩大页面的空间。

优秀的留白与巧妙的分割线
Snook网站布局方面设计的是比较合理、舒服的。同时注意一下,网站里面的虚线将各个板块区分开了,这样我们在浏览网站的时候就一目了然了。

抽象图形
沙发采用抽象、美观、简约的方法。通过使用无背景或杂乱的图像,给浏览者的空间是流畅、舒服的。

三、网格布局
网页设计的网格布局最初的灵感是借鉴了报纸的排版。但是如果你仔细观察周围的事物都可以找到网格现象,从好的设计到生活中的交通网。
960和蓝图可能是两个最流行的网格布局。我个人比较喜欢960网格布局,它简单、重点突出。你可以用任意对齐方式来安排你网站的元素,对齐在设计一个复杂的页面时,能使你的网站看起来比较精致、井然有序,并且你在网页布局里面添加任何模块内容时候都不用考虑其他的模块内容。

综合使用网格布局
Poccuo网站综合使用了网格布局,它采用3列和5列相结合的布局方式。给人以视觉吸引力和视觉空间。

博客采用列布局
我比较喜欢Web Design Ledger首页最上面的展现方式,他把最新的公告内容放大同时放到页面最顶部,其他的以3列的方式排列。

大量使用相等的列布局
Ecoki漂亮的网页布局显而易见采用的是4列、2行布局,同时幻灯片、缩略图、最新的审查也是采用相同的方式。

四、改善字体应用
字体应用困扰着大多数的设计师。如果要想提高你的设计水平,字体在其中扮演着重要的角色。不但在可读性方面也扮演着重要的角色,同时还可以增加设计作品的氛围。

用对比字体引起关注
SimpleBits网站在应用各种对比字体引导浏览者的注意力方面做的很棒。字体对比可以采取不同字体对比、各种颜色对比、字体大小对比等形式。

不要认为字体就像标志
这个网站看齐来就非常的漂亮、舒服,但你可以说出你的想法和感受来描述这个感觉。尤其在间距、字体选择等字体应用这方面做的挺完美的,我就被他的logo字体应用迷住了。

五、明确而有效的导航
良好的导航对于网页设计来说很重要,如果浏览者不能快速、便捷的找到它,他们就很有可能去别的网站了。这是我们所不愿意看到的,同时我知道MyInkBlog进行了一些改进,并将在以后重新设计中进行彻底的改进。

博客导航下面显示分类导航
在大多数情况下,博客导航放在页面的同时将分类作为第二导航放在页面的边栏。Tutorial9做了一件了不起的事情,他把浏览者关心的photoshop资源以生动的方式展现出来了,并且在鼠标经过二级导航的时候有一个高亮效果。

切换不同的图标效果
图标切换效果在web2.0网页设计里面无论是否需要被大量、胡乱的应用,并且成为一种趋势。并不是所有的都是不好的,web2.0里用的不好的原因是过度使用、业余使用造成的。在大多数情况下,适当的应用图标切换按钮是相当有效的。Carsonified网站在导航上就运用了单色、简洁的图标切换效果,并且于他的网站整体感觉想吻合。

六、使用漂亮实用的页脚
一开始我们就将页脚作为次要的内容,在页脚里面放置一些没有多大用处的内容。在设计的时候仅仅花费一点点心思在它上面。现在页脚对于整体设计来说变的越来越重要了,千万别错过好的页脚完成你设计。

展示大量的信息和证书
这个页脚主要展示了网站介绍和版权等必要的信息。Brian Hoff网站更是添加了一些个性、有趣的内容在里面。通过3列布局方式展示了作者的工作和建议性的内容。

添加搜索功能
Elliot Jay Stock’s网站在底部添加了一个特大的搜索框…
分享到:
评论

相关推荐

    网页设计教学大纲

    《网页设计与开发》课程是一门融合理论与实践的关键课程,尤其对于计算机及相关专业的...通过这个系统的训练,学生将不仅掌握网页设计的技巧,还将理解网页设计的艺术性和功能性,从而在网页设计领域展现出卓越的才能。

    让页面更上档次!网页设计细节大总结

    一个优秀的作品与卓越的作品相比差距就在于细节的把控。那我们具体该如果做好细节呢?下面简单介绍一下。字符是页面中不可缺少的部分,页面上最重要的部分。所以这部分细节是最基础的,也是最不可忽视的。网页上80%的...

    优秀产品推荐网页模板.7z

    研究响应式网站模板源码,不仅能够深入了解响应式设计的实现细节,学习如何在不同断点调整布局和样式,而且有助于提升编程技能,激发创新思维,打造独一无二的网站项目。 综上所述,HTML响应式网站模板源码是网站...

    逐浪字体的英文处理细节1

    这种注重细节的设计理念使得逐浪字体在各种应用场景中都能表现出优秀的可读性和美学价值,尤其在网页设计、排版印刷和数字媒体等领域,逐浪字体往往能为内容增色不少。 逐浪科技作为中国领先的科技产业集群,旗下...

    最好的CSS目录

    BestWebGallery是一个汇集了全球各地优秀网页设计的在线画廊。这里的作品通常具有极高的设计质量和创意水平,是设计师们获取灵感的理想之地。 #### 9. CSSReboot CSSReboot每个月都会重新启动一次,每次都会展示一...

    一个很好的系统页面

    在互联网技术日新月异的今天,系统页面的设计和优化成为了网页设计师与开发者关注的焦点。一个高效的系统页面不仅要具备强大的功能性,还要追求卓越的视觉效果,以此吸引用户并提供良好的用户体验。本篇文章将深入...

    UI插画设计师html5前端模板PX7.zip

    《UI插画设计师html5前端模板PX7:构建现代网页设计的艺术与技术》 UI插画设计师html5前端模板PX7是一款专为UI插画设计师精心打造的前端模板,它结合了HTML5、Bootstrap框架以及一系列美观的页面设计,旨在为用户...

    优秀个人简历模板系列-a优雅 (4).docx

    此外,他还负责了公司网站的后台维护工作,这表明亮亮不仅在平面设计上有所建树,在数字媒体和网页设计方面同样具有专业技能。 亮亮在亮亮图文旗舰店的工作经历同样值得称道。他在设计领域的工作能力得到了进一步的...

    122唯美简约设计艺术交互动态全套网站源代码.zip

    它以其独特的设计风格和卓越的用户体验,为网页设计师提供了丰富的灵感和实用的开发工具。 首先,我们来看"唯美"这一关键词。唯美主义在设计领域通常强调以美感为主导,追求极致的艺术表现。在这套源代码中,我们...

    优秀个人简历模板系列-英 文 简 历 (6).docx

    **经验(EXPERIENCE)**\n - **职位1:Web and Graphic Designer**:这表明求职者具备网页设计和图形设计的双重能力,能够处理网站界面和视觉元素的设计工作。\n - **项目领导力**:作为DFA Yale的联合创始人和领导...

    H206_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip

    其次,CSS3作为CSS的最新版本,其丰富的选择器、过渡(transition)、动画(animation)以及媒体查询(media queries)等功能,使得网页设计更具表现力和灵活性。媒体查询是实现响应式设计的关键,通过检测设备的...

    H864_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip

    在当今互联网时代,一个优秀的网站不仅仅需要吸引人的设计,还需要具备良好的用户体验和高效的技术支撑。"H864_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip" 提供的正是这样一套解决方案,它涵盖...

    H280_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip

    在当今互联网时代,一个优秀的网站不仅是企业的门面,更是与用户互动的重要平台。H280_html网站模板是专为移动端设计的一款H5模板,它融合了前沿的前端技术,如HTML、CSS和JS,实现了自适应响应式布局,旨在提供...

    H230_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip

    其次,CSS3是CSS技术的最新版本,它带来了更多的样式控制选项,如阴影、渐变、动画等,使得网页设计更具表现力。在H230模板中,CSS3被用来实现响应式布局,通过媒体查询(Media Queries)动态调整页面样式,确保在...

    世界名表品牌网站模板是一款html5模板,适合高端手表行业网站模板下载。_html网站模板_网页源码移动端前端_H5模.rar

    《世界名表品牌网站模板——打造高端网页设计的艺术与技术》 在当今互联网时代,一个优秀的网站不仅是企业形象的展示窗口,更是品牌价值的传递媒介。"世界名表品牌网站模板"便是这样一款专为高端手表行业量身定制的...

    H292_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip

    响应式设计是现代网页设计的核心,它确保网站能在各种设备上呈现出最佳的视觉效果和用户体验。H292模板采用自适应布局,能够根据用户的屏幕尺寸自动调整布局,无论是在手机、平板还是桌面电脑上,都能保证内容的清晰...

    zoom-tool.rar_zoom_zoom tool_放大镜

    本文将深入探讨由国外开发的“Zoom Tool”,一个专为网页设计的圆形放大镜效果,帮助用户更好地查看网页中的细节。 “Zoom Tool”是一款优秀的JavaScript插件,其核心功能是实现网页元素的即时放大,尤其适用于电商...

    H1158_html手机网站_网页源码移动端前端_H5模板_自适应响应式源码.zip

    这些细节的处理,使得H1158模板在满足功能需求的同时,也注重了美学和可用性的平衡。 总的来说,H1158_html手机网站_网页源码移动端前端_H5模板_自适应响应式源码是移动端开发者的理想选择。它不仅提供了强大的...

    H873_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip

    在当今互联网时代,一个优秀的网站不仅是企业的门面,更是与用户互动的重要平台。H873_html网站模板,以其精心设计的网页源码、移动端前端开发以及H5模板,为创建自适应响应式网站提供了强大的解决方案。本文将深入...

Global site tag (gtag.js) - Google Analytics