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

  大家都知道”细节决定成败”这句名言不仅在其他行业非常重要,而在页面设计当中更是颠扑不破的真理。需求的眼睛和感觉总是非常敏锐的,对于一个页面没有得到需求方的认可,但是他们又说不出什么理由,这个时候就是细节问题了。一个页面的细节到位才能充分体现出页面的品质。一个优秀的作品与卓越的作品相比差距就在于细节的把控。

  那我们具体该如果做好细节呢? 下面简单介绍一下。

  

  字符

  字符是页面中不可缺少的部分,页面上最重要的部分。所以这部分细节是最基础的,也是最不可忽视的。网页上80%的信息是以文字形式传达的,任何网页元素都无法替代文字的作用。网页中文字设计的好坏会直接影响到整个页面的视觉传达效果。

  字号

  字号的选择是根据功能需要而定的,字越大给浏览者的视觉冲击力越强,一般用于标题或其他需要强调的地方。小字整体性强,页面易产生多个中心,缺乏美感,时间略长,浏览者易产生视觉疲劳。最适合网页的字体大小为12磅,如果在一个页面内容较多,通常可以用9磅的字号,随着互联网飞速的发展,在内容较多的情况下10.5磅字号逐渐替代了9磅字号。游戏行业本身侧重于视觉传达,在官网及专题里文字都不会像门户类页面那么多,所以常规情况下最小保持10.5磅以上字号。

  

  标题文字的运用

  

  内容字体的运用

  字体

  不同的字体有不同的性格表现,严肃、幽默、力量、柔软等等。网页中比较常用的中文字体有宋体、黑体、楷体、隶书等。根据不同的页面主题可以选择不同性格的字体搭配。

  标题字体的选用对整个页面的编排起着重要的作用。字体选择、字体特效到位,不仅会突出页面主题,而且还会烘托整个页面的气氛。

  

  主标题用毛笔字体,副标题选择用了方正楷体简体与主标题进行搭配,突显游戏武侠风格特点,导航文字选用了与副标题相同字体,内容用微软雅黑字体。整个页面一共选用了三种字体。

  

  主标题字体微变型,副标题选用了微软雅黑细体。

  样式

  文字的样式主要包括常规、粗体、斜体等。正文中的文字宜采用常规样式,标题宜采用加粗或斜体样式。合理的运用文字样式,将更有利于文字的视觉传达,更有利于浏览者的阅读。

  

  间距

  文字的间距分为横向间距和纵向间距即”字距”"行距”。正文与标题的字距应该通篇保持一致,字距太大或太小都会导致可读性受到影响。行距的常规比例为10:12即用字10点,则行距12点。除了对于可读性的影响,行距本身也是具有很强表现力的设计语言,有意识地加宽或缩窄行距,能够体现独特的审美意趣。

  

  颜色

  颜色的运用对于整个文案的表达会产生很大的影响。使用不同颜色的文字可以使想要强调的部分更加引人注目。色彩可以使得文本不受位置的局限,加强或者减弱文本的表现强度,使页面文本的浏览产生视觉导向。

  

  排版

  文字的对齐方式一般分为四种:左对齐、右对齐、居中对齐和两端对齐,其中左对齐和两端对齐最为常用,因为这两种对齐方式比较符合人们的阅读方式。

  文字的排布方向主要有三种:横排、竖排和斜排,其中以横排为主,横排文字群体比较适合人们的阅读习惯。

  

  

  留白

  留白可以给人带来心理上的轻松与快乐,也可以给人带来紧张与节奏。元素之间的留白不能太大这是基本的原则,留白过多,页面会变得零碎。

  网页设计是以传达页面信息为主要目的的,留白更多的是服务和服从于网页的可用性。无数的可用性研究证实了一个事实:在Web中,用户对网页信息是进行浏览,而不是阅读。简洁明快、富于美感的页面更具有可浏览性,可使用户获得更加良好的浏览体验。

  留白空间不一定要是白色的。指的是任何与背景相同的空间。所以它可以是白色、黑色,其他纹理等。

  大面积的有色范围

  如在页面设计中只放置极少的必要元素,背景则用大面积的单纯色彩渲染,利用单纯色彩的力量来突出和烘托网页上的主要元素。边导航与主题内容的留白划分。

  

  导航按钮

  

  内容与图片

  

  对比色留白

  

  logo处留白

  

  层次

  页面设计需要层次感,当页面缺乏层次感的时候就会显得页面比较单调或者花哨。页面层次感可能有很多类型,例如色彩的层次感、元素的层次感等等。

  

  以足球场为背景,背景本身有深度,有远近景的层次感,人设采用远处模糊较小,近处清晰较大的视觉原理设计,使得页面更具层次感。

  

  整个背景以清晰的山峰为背景,主要内容为近景形成层次,背景中心山峰与两侧的山峰形成层次。

  

  高斯模糊的背景与页面主要内容形成层次。

  

  径向模糊及动感模糊处理的背景与页面主要内容形成层次。

  

  标题与人设叠加产生层次感

  

  红色块与灰色块形成层次感

  光影

  现实生活中无时无处不存在着光照和阴影。看到的每样东西都是通过光影反射形成它的形象。视觉上,光影帮助我们辨别事物,认知他们的材质、尺度和透视。

  所以如果要让我们的网页设计更加自然、有动感且真实直观,正确理解光影效果就变得非常重要。

  

  光源在人设背后,照亮背景与人设边缘,与人设正面形成对比。

  

  光源在人设侧顶端。

  

  光源在页面顶端,发散照射。

  

  光源在页面顶端,往下方照射在产品上,突出产品的品质。

  

  以元素为光源,照亮周围。

  

  光影的运用给人带来的视觉是地图铺在地面上,地图的折叠效果体现出立体感很强,云的影子表现出云在漂浮。

  

  左图1像素浅色和1像素深色线与背景行成对比而形成。右图文字底部的细微高光使文字显得有种突出感。

  光影在页面设计中使用方法及用处还有很多,比如增强页面气氛、突出主题等…

  总结:影响页面细节的因素还有很多,比如质感纹理、图标、色彩等,这里就不一一介绍了。有不对的地方还望大家指证,希望对大家有所帮助。谢谢!~

  【优设网 原创文章 】

时间: 2014-12-04
Tags: 网页设计

让页面更上档次 网页设计细节大总结的相关文章

网页设计细节大总结

大家都知道"细节决定成败"这句名言不仅在其他行业非常重要,而在页面设计当中更是颠扑不破的真理.需求的眼睛和感觉总是非常敏锐的,对于一个页面没有得到需求方的认可,但是他们又说不出什么理由,这个时候就是细节问题了.一个页面的细节到位才能充分体现出页面的品质.一个优秀的作品与卓越的作品相比差距就在于细节的把控. 那我们具体该如果做好细节呢? 下面简单介绍一下. 字符 字符是页面中不可缺少的部分,页面上最重要的部分.所以这部分细节是最基础的,也是最不可忽视的.网页上80%的信息是以文字形式传达

2009网页设计10大新趋势被确定

网页设计是一个急速发展的新媒体,它的快餐式文化,使得网页设计在不断的尝试更新的http://www.aliyun.com/zixun/aggregation/9255.html">设计理念,带给用户更多新鲜感.在过去的几个月,2009网页设计10大新趋势被确定.在这概况,你会发现审查每个趋势都有更加具体的举例,从中带给你更多灵感,激发你的下一个项目. 1. Letterpress 凸版效果 在我们的观察中,一个意料之外的趋势是,凸版效果(Letterpress,也就是我们的篆刻中的阴文效果

网页设计7大技巧

对于许多优秀网页设计作品都有一些共性,作为网页设计师我们必须要掌握这些设计技巧,比如页面的留白,文字的选择,元素的组合,像素效果的使用等等!这里我们一共总结出7种常见的设计技巧,对于网页设计师来说可以在许多网站中看到这些技巧的体现! "高品质"是所有人追求的目标,在网页设计的世界中也不例外.不过何为"品质",如何判断一项设计的品质是好还是坏?笔者恰好有一套找出网页设计中品质焦点的方法.一旦你了解到如何判断一项高品质的设计究竟好在哪里,你就掌握了让自己的设计更趋完美的

移动网页设计9大原则——第2部分

[编者按]本文作者为来自 Mainstreethost 的站内营销专家 Kim Speier,主要介绍移动网页设计的九个原则,每个原则都配有生动的实例.文章系国内 ITOM 管理平台 OneAPM 编译呈现,点此查看文章的第一部分,以下为第二部分,主要介绍移动网页设计的另5个重要原则. 5)提供用户所需的搜索结果 一些移动用户在访问网页时目的十分明确,他们很少在模糊的菜单或一页又一页的商品间徘徊.搜索功能对于这类用户而言非常重要.而这也是要在搜索结果的第一页就提供精确结果的重要原因.搜索完成后,

9点会使网页设计效果大打折扣

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 一个好的网页设计,不仅吸引眼球,也能够保持用户的兴趣.字体.色彩.空白与内容间的完美结合可以构成一个很好看的设计,增加用户粘性;而一个坏的网页设计,也会让用户从你的网站里跑掉. 1.没有足够的空白 空白可以说是设计中最重要的一部分.它可以防止用户在浏览网站时变得疲惫,它可以在内容中划出距离.空白不是必须用白色的,它仅仅是为其他设计元素提供间隔

移动网页设计9大原则——第1部分

[编者按]本文作者为来自 Mainstreethost 的站内营销专家 Kim Speier,主要介绍移动网页设计的九个原则,每个原则都配有生动的实例.文章系国内 ITOM 管理平台 OneAPM 编译呈现,以下为正文的第一部分. 如今,移动设备已占据优势地位,谷歌2015年发布的报告中显示,52%的搜索流量和几乎50%的购物流量来自移动设备.因此,具有移动端兼容性的网页设计已从奢谈变成了必需品.2015年4月"Mobilegeddon"转变了众人熟悉的市场营销模式,将适应性设计和移动

网页设计十大灵感来源

  不仅仅只有网页设计能激发我们创建出色网站的动力,几乎我们身边的任何事都会有此作用. 我们从来都无法预测,体内的创造力之火何时会被何物点燃.我经常会发现,一些最普通不过的事情会使我用一种新的或是不同的眼光看待事物.以下是我最喜欢的除网页以外的10种设计灵感的来源. 自然 图01 图02 思考设计的最佳场所之一则是户外.看,大自然里那些美妙精致的形状与颜色的组合.就我个人而言,我喜欢把花作为调色板的灵感之源. 秋天的三色堇,展现出鲜明颜色的激烈碰撞,可以作为新的项目调色板设计的源泉. 音乐 许多

不可忽视的网页设计细节“对齐”

  对齐这个最基本的原则,我们自从记事起就开始接触.中国人讲究的对称艺术,在我们的生活中无处不在,这也决定了我们网页所必须遵循的一个原则就是一一对齐.那么,一一对齐这个看似简单的问题背后,又有哪些我们想不到的讲究呢?本文我们将一一探讨. 作为高效设计原则,"对齐"可以帮助我们对"元素如何在页面中布局"做出明确的决定.利用战略层上的布局,可以设计出更强大.更吸引人的作品;利用网格系统,可以为每个元素的定位提供标准的指导.没有对齐策略,我们就会随意安放元素,与其他相似元

网页设计细节:扩大用户可操作区域

从 Google 的一个细节说起: 整个虚线框都是"Next"的可点击区域.看似不经意,却直接提升了细节的可用性.其它页码也巧妙地和上面的字母 o 一起组成可点击区域.与百度和 Bing 的翻页相比,Google 优胜. 再来看 Twitter 的注册页面: 很大很舒服.到了这个页面,瞎逛都会忍不住去填写填写.提示文字也恰到好处,能提供帮助,不恼人. 我喜欢 Google. 来看下 Google Docs 中的颜色选择: 和其它富文本编辑器相比,Google 的颜色小框框大了不少.对比