`

网页设计之细节篇

阅读更多

本文是刘韧老师关于网站页面的均衡规划与选择的思考,希望对大家有所帮助。

  1.尺寸

  a)800*600能照顾到所有网友的电脑,但相当是张“小报”。

  b)1024*768渐成主流。1024*768能比800*600多出一栏的信息。

  c)正文页采用自适应设计,能在正文页做更多相关内容。首页也可以尝试自适应的设计。自适应设计的核心是要留出宽度伸缩自如的栏。

  d)在1024*76模式下,页面的长度不易超过10屏。

  e)随着电脑升级换代,分辨率提高,电脑屏幕能够提供的面积越来越大,这是一种难得的资源,要充分利用。“小报”改“大报”要增加一倍的纸张成本,网站改“宽版”,不增加任何成本。

  2.字体字号

  a)目录页用小字号,为的是放更多的标题。

  b)正文页用大字号。为的是让读者读得舒坦。

  c)慎用不容易看清楚的楷体。楷体的作用等于图片,主要起美化版面的作用。

  d)多用对搜索引擎友好的标粗,来表示重点。

  3.颜色

  a)同一个页面的颜色不要超过4种。眼花缭乱,容易产生视觉疲劳。

  b)颜色对比不要反差太大。网页版面不是美术作品,要避免形式对内容的喧宾夺主。

  c)文字+底色能够起到很好的突出作用,在视觉变化上相当于图片的作用。

  4.静态化

  a)访问量大的页都应该静态化,以便减少服务器压力,增强网站稳定性。访问不到的网页是最差的网页。

  b)动态化和静态化在一个页面中结合使用,能同时得到轻负荷和即时交互性的好处。

  c)哪些页面的哪些地方需要静态化要在一开始就考虑,访问量大了之后,再高考虑,就迟了,由动态化转为静态化,会有很多历史问题。

  5.分栏

  a)首页选4栏?还是3栏?

  b)正文页多用2栏。

  c)“纵向逻辑”是指将相近的内容从上至下排列,而不是从左向右排列。如果读者对这方面内容感兴趣,他会从上至下,逐行阅读。这样可充分力利用首屏,让首页增多从上至下阅读的可能。

  d)避免一栏太强,一栏太弱。通过图片、套红等手段进行调控。平均使用读者主意力。使读者不敢放过左中右任何一栏。

  6.图片

  a)一图胜千言。十分必要时才用。因为图片的编辑成本和带宽成本都比较文字高很多。

  b)在目录页的图,小点,再小点,多用特写;小分辨率,能看就行。在正文页的图,保证清晰,美观。正文页有的是版面。

  c)正文页在5屏之内,尽量不要分页。让读者一次读完。

  7.导航条与网站地图

  a)导航条是网站的门牌号码,不能随意更改。否则,读者会迷路,找不到他原来看的内容。

  b)导航条上的分类名的前后次序要兼顾重点和读者阅读逻辑,即归类摆放。

  c)导航条最多三行。最好二行。太多行显重。

  d)导航的更多,就是网站地图。网站地图的摘要版可以放在网站底部,成为底部导航。网站的底部导航,很有必要。其好处是:一、可放多行;二、可形成网站底部的阅读重点。将读者从首屏带到最后一屏,期间会增加很多点击。

  e)主导航和频道导航:主导航每页都有,频道导航只在本频道页面出现。

  8.首页更新成本

  a)首页设计不能只考虑美观、协调,要考虑24小时更新一遍之要求。更新是网站的生命,一定要最大限度地降低首页更新成本。

  b)交叉自动同步更新的设计,可有效降低各种首页更新成本,给读者内容丰富即时的感觉。

  c)更新即时的首页是网站的资源,因为是资源,更多的标题会拥上这个首页。如此,正循环,这个首页也就火了。更新不即时的首页是网站的鸡肋,会越来越寂寞,最终会被荒废。

  d)每个首页的设计成至少要有一个读者点击进去的理由。即时更新比独家内容成本低。

分享到:
评论

相关推荐

    中文网页设计系列分享会--banner设计篇

    ### 中文网页设计系列分享会--banner设计篇 #### 一、引言 在中文网页设计领域中,banner设计作为视觉传达的重要组成部分,其影响力不容小觑。许多初学者可能会低估一个优秀banner的价值,认为其仅仅是简单图片和...

    AdobePhotoshop典型应用实例--网页设计篇(素材)

    在本资源包中,"Adobe Photoshop 典型应用实例--网页设计篇(素材)" 提供了一组专门针对网页设计的教程素材,旨在帮助用户掌握使用Photoshop进行网页设计的关键技巧。Photoshop作为业界领先的图像处理软件,其在...

    网页设计 应聘网页设计作品

    本篇文章将深入探讨“网页设计应聘作品”的相关知识点,以“table”、“div”和“css”为核心,结合实际案例分析。 首先,我们要明白网页设计的基本构成元素。在传统的网页设计中,“table”曾是布局的主要工具,它...

    网页设计论文(很实用)

    这篇"网页设计论文(很实用)"可能深入探讨了这些关键领域,旨在为实践者提供宝贵的指导和理论支持。以下是根据标题和描述推测出的一些可能涵盖的知识点: 1. **设计思想**:网页设计不仅仅是美观的图片布局,它更...

    2021网页设计心得体会篇.docx

    在网页设计这一领域,实习是一个非常宝贵的学习机会,它能够帮助我们从理论走向实践,弥补知识的空白和技能的不足。网页设计不仅涉及美学,还涵盖了用户体验、交互设计、前端开发等多个方面。在实习过程中,我们可以...

    网站建设与网页设计论文

    一篇全面的论文能够深入剖析网站建设与网页设计的关键要素,结合实际的设计实例和代码展示,为专业人士和学习者提供宝贵的学习资源。本文将从网站建设与网页设计的基础知识入手,探讨其在互联网中的重要性,并分析...

    【设计交流】SDC优秀网页设计2012讲座语录.pdf

    人马(@SixDogs)在 SDC15 期网页设计讲座中提到,Banner 设计应该具备以下特点:字体篇 clarity、标题简明易懂、推荐“方正兰亭黑”系列、禁止使用未授权字体、少用英文、拼写正确、避免对字体的变化等。...

    从零开始设计网页

    这篇教程将带你逐步了解如何利用Photoshop来创建一个专业级别的网页设计。 **第一步:使用960网格模板** 960网格系统是网页设计中的基础,它提供了布局的框架,帮助设计师快速建立结构。在960.gs网站上,你可以下载...

    挑战Dreamweaver CS3网页设计与Web 2.0开发 (邓文渊)【PDF】

    本书秉承作者倡导的“向上提升,向下扎根”的理念,将概念和实际操作讲解与一个“吴哥窟之旅”动态网站的开发细节相结合,并以图示化教学方式引领您全程体验Dreamweaver CS3在网页设计和Web 2.0动态网站开发中各个...

    2021网页设计师工作总结4篇.docx

    网页设计师工作总结是对过去一段时间工作成果、经验教训和个人成长的总结,是提升个人职业素养和专业技能的重要途径。以下是对这份工作总结中的关键知识点的详细解析: 1. **网页设计基础**:网页设计师需要掌握...

    网页设计实习心得感悟___五篇.docx

    网页设计实习心得感悟 网页设计实习是一段宝贵的经历,它为高校生提供了实践技能和理论知识相结合的机会。在实习期间,学生能够深入了解网页设计的工作流程,掌握网页制作的基本技巧,如使用Photoshop进行图片切片...

    艺术专业网页设计课程教法设计的创新实践探析

    本篇文档主要探讨了普通本科院校艺术设计专业中的网页设计课程教法的创新实践,旨在提出具体的教学创新途径,以增强艺术专业学生对网页设计的全面理解,并培养其设计思维与创新能力。 首先,文档从课程性质、教学...

    网页游戏开发设计简明教程

    本篇内容将围绕这些关键要素展开介绍,帮助读者理解网页游戏开发的基本框架和技术要点。 #### 一、数据流程 数据流程是网页游戏开发中的基础组成部分之一,它主要涉及到游戏数据的处理和传输过程。具体而言,数据...

    iPhone网页设计工具

    本篇文章主要介绍了用于iPhone网页设计的一系列工具和技术资源,旨在帮助开发者更好地适配iPhone设备的浏览体验。以下是对这些工具和技术的详细介绍。 ### iPhoney:iPhone网页测试环境 iPhoney是一款基于Safari...

    网页设计实习报告.doc

    本篇文章将以贵州师范大学白云校区食堂网页设计实习报告为例,深入探讨网页设计在现代信息化社会中的重要性,以及实习过程中对设计原则、用户需求、功能实现和视觉美学等方面的全面把握。 实习报告围绕网页设计的...

    基于HTML5以及css3的一些网页细节优化

    而Grid则为二维布局提供了强大支持,让网页设计师能精确控制每个单元格的位置和大小,尤其适合复杂网格系统的布局。 另外,CSS3的媒体查询(Media Queries)是实现响应式设计的关键。它们允许我们根据设备特性,如...

    网页设计课程设计汇本报告.doc

    在这样的背景下,本篇文章将详细介绍一份由伍志强同学在2013-2014学年第一学期完成的网页设计课程设计汇本报告。 伍志强同学的设计项目是一份涵盖了从需求分析到详细设计的完整过程的课程设计报告。该报告针对的...

    网页素材网页素材网页素材

    网页设计师需要根据网站的品牌调性和目标受众来挑选合适的字体组合。 此外,音频和视频素材能为网站增添动态元素,提高用户体验。例如,背景音乐可以营造特定的氛围,而嵌入的视频可以展示产品演示或公司介绍,让...

Global site tag (gtag.js) - Google Analytics