论坛首页   WEB网页设计  WEB设计理念

[公告]快到[搜艺招聘网]发布招聘信息 注册简历、发布自己作品！ ：）
WEB设计理念
冥隼 查看冥隼的博客 金钱 : 2057 Level : 0 发帖数 : 274 最后登陆 : 2009/7/11 注册时间 : 2007/2/3	信息 | 留言 | 引用 | 回复 | 编辑 | 置顶 | 移动 | 删除 序言: 　　每一位杰出的Web设计师,对Web设计都有者自己独特的见解.我们这里要介绍一些Web设 　　计的正确观念和原则. 原则: 　　作为一个Web设计师,最重要的一点是要有创意,没有创意的网站是不成功的. 　　 　　要考虑带宽的问题; 　　要注重色彩的搭配问题; 　　要考虑适应不同浏览器.不同分辨率的情况; 　　要让浏览者容易找到要找的东西,网页内容便于阅读; 　　站点内容要精.专.及时更新; 　　提供交互性 　　简单即为美 　　确保站点上的每一个元素都有其存在的必要性 走 近 设 计 Web设计师不是爱赶时髦的艺术家,或是紧跟潮流的技术员. Web站点设计是一件极具创造性.挑战性的工作,要想把它做好,开发者必须具有一定的内涵.这种内涵不是来自个人的审美观和二进制的数据,而是人们自身的对生活的经历和体验. 　　走近Web设计就如同走入一个会议大厅,里面充满了能量和最新最棒的技术,人们不禁会会因其绝对重要性而肃然起敬.这种力量激励着你去把一个站点设计的更好.更具竞争力.更成功.闭上眼睛想想,你的设计将如何影响这个世界.忠告:Internet只是工具,而不是生活 　　在Web设计中,最关键的的是"Web的可访问性".它是指从现实的.线性的.可接触的世界进入人们所创建的虚幻的.非线性的.不可触知的世界的能力.对那些想访问自己站点的用户来说,可访问性是其进入站点内容的入口.从技术的角度看,可访问设计就是指任何访问你的站点的用户都能进入,而无须考虑其他软硬件情况. 　　如此的话,我们在开始设计初始的时候,首先要考虑的就是Web站点的可访问性,我们将要注意如下三个因素: 　　1.访问者的计算机平台 相关信息:http://www.pcwebpaeida.com/ 　　2.访问者的Web浏览器 相关信息:www.microsoft.com/ie; home.netscape.com; http://www.browsers.com/ 　　3.W3C标准 相关信息:http://http://www.w3.org<font%20color="/#FF3333%22%3E%3C/font%3E 　　为使一个站点能够完全可访问,设计者必须远离现在的潮流,回到从前,去准循那些可能已经不能适用于现代最新技术的标准.(中国的Internet最近二年才发展起来,如果是定位于中国市场,可以使用一些较新的技术,但如果你的访问者来自国外,那你就要小心谨慎的对待啦.) -------------------------------------------------------------------------------- 如何从技术上实现可访问性的技术 . 　　可访问性设计包括了可读性.上下文关系和功能性,如果设计者能认真考虑这三个设计因素,那么就在这个游戏中前迈了三大步. 可读性设计: 　　1.使用alt属性,这个属性可以让设计者在HTML代码中增加图形的说明,这一说明将出现在Web 页面图形显示的位置上,图形的说明应当清晰而明确. 　　2.为图形导航或非标准导航的页面增加一种替换方法. 　　3.为无法全部阅读的页面提供可下载全部文本功能,报纸.杂志.信息服务机构及内容丰富的站点都应把它当作首要问题来认真考虑. 上下文相关设计: 　　1.使用链接旁注来帮助访问者,而不时使他们更为迷惑.虽然,设计人员不愿让许多的链接文字来扰乱自己的站点,但大家可以将说明放在页面的上下文中.只用"单击此处"是不够的. 　　2.当设计师在页面中包括了声音.视频图象或其他高级编程技术时,一定要使用有效的链接说明. 　　3.尽量减少一个页面上的链路数.设计人员可以通过直观的导航来提高页面的明确性,避免混淆. 功能性设计: 　　1.如果设计师使用交互性的产品订单,那么最好同时提供一个可打印的订货单,或是给访问者提供电话号码及其他可能的联系方式. 形象思维的归纳 我们对于环境事物的感觉经验，都是源于过去的接触积累。即使不经肌体接触，也能判断它的软硬，粗细，轻重，冷热……尽管因生活背景，学习经验各异，但经过不自觉的归纳，秩序化的本能，多数人内心深处沉淀的感官经验，完全相似。 　　就物理功能而言，线条或色彩本身是没有任何情绪的。但由于经验的积累，才使人感受到粗线的坚实，细线的纤柔，快速的线条有流畅感，断挫的线条有滞凝的感觉，不同的颜色有了不同的情绪象征意义。 　　就像中国的书法艺术。不用声音就可以表现节奏和旋律，不必模拟实物的外形，就地能准确的表达出软硬，疏密，虚实，欹正等结构形态。利用点，线，面的规划，叙正均衡，大小错落及动静收放，产生顿挫，缓急的节奏，进而达到优美旋律的追求。 　　因此，每一个人都可以判断美与丑，和谐与冲突的差异，这种能力有别于知识性的思考，可称为“形象思维”。 　　成功的设计者，就是利用“形象思维”来思索点，线，面的构成，设计推演出有效的唤起美感经验的作品。 排版设计尤为如此。 　　有限的视觉符号，文字，少量的插图（有时没有），这些素材有时不具备描述清楚事件或呈现情绪的能力，即使能自由的使用线条和色彩辅助，仍然拘束，所以通过“形象思维”直接捕获内心的原点，是排版设计的唯一途径。 　　排版设计最重要的是，设计者如何把那些涵养和观点传达给观者，以便使版面上的思想能进入观者的心灵。 　　达意的图例，元素图表之善用，字类与词句之巧妙运用，照片及版面之动人安排，使设计意味深长的字群，照片和空间等关系变成一种沟通，而不只是装饰！ 我们对于环境事物的感觉经验，都是源于过去的接触积累。即使不经肌体接触，也能判断它的软硬，粗细，轻重，冷热……尽管因生活背景，学习经验各异，但经过不自觉的归纳，秩序化的本能，多数人内心深处沉淀的感官经验，完全相似。 　　就物理功能而言，线条或色彩本身是没有任何情绪的。但由于经验的积累，才使人感受到粗线的坚实，细线的纤柔，快速的线条有流畅感，断挫的线条有滞凝的感觉，不同的颜色有了不同的情绪象征意义。 　　就像中国的书法艺术。不用声音就可以表现节奏和旋律，不必模拟实物的外形，就地能准确的表达出软硬，疏密，虚实，欹正等结构形态。利用点，线，面的规划，叙正均衡，大小错落及动静收放，产生顿挫，缓急的节奏，进而达到优美旋律的追求。 　　因此，每一个人都可以判断美与丑，和谐与冲突的差异，这种能力有别于知识性的思考，可称为“形象思维”。 　　成功的设计者，就是利用“形象思维”来思索点，线，面的构成，设计推演出有效的唤起美感经验的作品。 排版设计尤为如此。 　　有限的视觉符号，文字，少量的插图（有时没有），这些素材有时不具备描述清楚事件或呈现情绪的能力，即使能自由的使用线条和色彩辅助，仍然拘束，所以通过“形象思维”直接捕获内心的原点，是排版设计的唯一途径。 　　排版设计最重要的是，设计者如何把那些涵养和观点传达给观者，以便使版面上的思想能进入观者的心灵。 　　达意的图例，元素图表之善用，字类与词句之巧妙运用，照片及版面之动人安排，使设计意味深长的字群，照片和空间等关系变成一种沟通，而不只是装饰！ 我们对于环境事物的感觉经验，都是源于过去的接触积累。即使不经肌体接触，也能判断它的软硬，粗细，轻重，冷热……尽管因生活背景，学习经验各异，但经过不自觉的归纳，秩序化的本能，多数人内心深处沉淀的感官经验，完全相似。 　　就物理功能而言，线条或色彩本身是没有任何情绪的。但由于经验的积累，才使人感受到粗线的坚实，细线的纤柔，快速的线条有流畅感，断挫的线条有滞凝的感觉，不同的颜色有了不同的情绪象征意义。 　　就像中国的书法艺术。不用声音就可以表现节奏和旋律，不必模拟实物的外形，就地能准确的表达出软硬，疏密，虚实，欹正等结构形态。利用点，线，面的规划，叙正均衡，大小错落及动静收放，产生顿挫，缓急的节奏，进而达到优美旋律的追求。 　　因此，每一个人都可以判断美与丑，和谐与冲突的差异，这种能力有别于知识性的思考，可称为“形象思维”。 　　成功的设计者，就是利用“形象思维”来思索点，线，面的构成，设计推演出有效的唤起美感经验的作品。 排版设计尤为如此。 　　有限的视觉符号，文字，少量的插图（有时没有），这些素材有时不具备描述清楚事件或呈现情绪的能力，即使能自由的使用线条和色彩辅助，仍然拘束，所以通过“形象思维”直接捕获内心的原点，是排版设计的唯一途径。 　　排版设计最重要的是，设计者如何把那些涵养和观点传达给观者，以便使版面上的思想能进入观者的心灵。 　　达意的图例，元素图表之善用，字类与词句之巧妙运用，照片及版面之动人安排，使设计意味深长的字群，照片和空间等关系变成一种沟通，而不只是装饰！ WWW.MDONG.ORG
2007/4/15	信息 | 留言 | 引用 | 回复 | 编辑 | 置顶 | 移动 | 删除 Edited by : 冥隼, 2007/4/15 16:33:53

回复:re:WEB设计理念
冥隼 查看冥隼的博客 金钱 : 2057 Level : 0 发帖数 : 274 最后登陆 : 2009/7/11 注册时间 : 2007/2/3	信息 | 留言 引用 | 回复 Web站点开发流程 1.初始会商,主要是收集该站点的关键信息,包括站点的目标读者.要发布的内容.开发Web服务器平台; 2.概念开发,设计师根据收集的信息,开始构思,通常,设计师要把这些构思用草图的形式呈现给顾客,这个草图要有整个网站的结构,不同的布局.设计及导航; 3.内容综合,当决定了设计师的设计,设计师开始制作一些初始图样,这些图样用PHOTOSHOP那样的程序来创建,然后,设计师将图样打印出来配合文字; 4.HTML布局和导航,一旦客户同意了这些内容综合,设计师开始编制Web页面,导航器也被编制到页面中,使客户第一次真正体验一下; 5.图形制作,如果客户同意了站点的外观和感受,设计师将大量制作所需的图形,并进行优化; 6.内容流程,客户的书面材料利用各种网页技术（CSS、JAVA、FLASH）,有机的和相关的图形整合在一起; 7.测试,在站点被提交给客户之前,设计师要彻底测试每个Web页面和联结,利用清单进行修补 8. 交付,一旦签收,客户要经常进行他们的测试,找出排版和内容方面的错误,做完了这些次要的修正后,正式启用站点.这套完整的计划可以用1-12个月来完成,平均完成时间为4个月.当站点启用后,要进行跟踪调查,以确定人们如何使用站点。经过6-12个月的运行之后，重新收集数据,开始重新设计,然后这个 Web设计过程再开始一遍 WWW.MDONG.ORG
2007/4/15	编辑 | 删除 Edited by : 冥隼, 2007/4/15 16:37:55

回复:re:WEB设计理念
冥隼 查看冥隼的博客 金钱 : 2057 Level : 0 发帖数 : 274 最后登陆 : 2009/7/11 注册时间 : 2007/2/3	信息 | 留言 引用 | 回复 关于网页导览设计的九点注意 　 -------------------------------------------------------------------------------- 　　一.当导览按钮连结到目前此页时 　　各Webpage若重复使用同一组的导览按钮，无可避免地会产生某一导览按钮连结到 目前此页的情形。为达成界面设计的一致性，并没有绝对的必要性拿掉此导览按钮，但 Webpage设计者可让此按钮不再具有超连结的功能；或将此按钮的彩度、亮度降低（如∶ 深绿色变成淡绿色，亮红色变成暗红色），使读者可清楚地意识到∶这个暗设下来的导 览按钮不再具有超连结的功能。 　　二.不要在一篇短文里提供太多的超连结 　　适当、有效率地使用超连结，是一个优良的导览系统不可或缺的要件之一。但过份 滥用超连结，造成短短的一篇文章里却处处是links，反而损害了Webpage行文的流畅与 可亲性。在充斥着超连结的短文里，很可能其中不少是无意义、没必要的links。例如∶ 连结到一页只有两三行注解的link、连结到一页只放了「施工中」的招牌的link。在一 篇长短适中的Webpage里（3、4个荧幕页面），文章里提供的文字式超连结最好不要超 过10个以上，以使全页行文能够顺畅，而读者也不至于眼见一大堆超连结，反而不知 从何点取才好。况且，连续、肩并肩地出现两、三个文字式超连结，很容易被误认为 只是一个长度较长的超连结，于是被读者忽略掉，便也失去了这些超连结的原本功能。 　　如果您果真有那么多的超连结必须提供给读者，不如将这些超连结以条列的方式， 一笔一笔清楚地列在一选单页或目录页上，既不防碍走文的顺畅，又呈现一目了然的导 览连结。 　　三.让超连结的字串长短适中且走文自然 　　抓住能传达主要讯息的字眼当做超连结的锚点（anchor），可有效地控制住超连结 的字串长度，避免字串过长（如∶整行、整句都是锚点字串）或过短（如∶仅一个字当 做锚点），而不利于读者的阅读或点取。 　　四.注意超连结颜色与单纯叙述文字的颜色呈现 　　WWW的语言—HTML允许Webpage设计者特别标明单纯叙述文字与超连结的用色，以便 丰富Webpage的色彩呈现。如果您的网站充满知识性的信息，欲传达给访问者，建议您 将网页内的文字与超连结用色，设计成较乾净素雅的色调，会较有利于阅读∶纯粹的叙 述文字采用较暗、较深的颜色来呈现（如∶黑色、墨绿色、暗褐色），超连结文字则以 较鲜明抢眼的色彩来强调（如∶亮黄色、翠绿色、鲜橘色），至于探访过的超连结则采 用较低于原超连结亮度的颜色做呈现。 　　五.分析、说明您提供的bookmarks或coollinks 　　常常看到热心的Webpage设计者条列了精心收集的bookmarks或coollinks，以分享 读者个人遨游WWW的美好经验。但多数Webpage设计者就只提供一大串links，并不分门 别类，也不加以分析、说明为什么这个link好，值得推荐？那个link的主要内容为何精 彩之处？又在哪？ 　　提供您的bookmarks或coollinks是一大善举，但未加以分析、说明，却变得功亏一 篑。多花几分钟，将您提供的bookmarks或coollinks稍加分类、注解，可提供读者清晰 的概念与无限的方便，也使您的站台的导览系统更加周全完善。未加以说明、注解的 coollinks，其实一点也不cool。老实说，任何人都可以到Yahoo轻易地找到上百上千的 links。您若未对这些推荐的links加以个人独特的评论、介绍，读者又何劳偏得到您的 站台去找索引呢？任何一个分类索引或搜寻引擎都绝对比您条列的links还要更完备齐 全。 　　六.在具前后连续顺序的文件里提供必要的连结 　　将篇幅过长的文件分隔成数篇较小的Webpages大大地增加了界面的亲和性，但在导 览按钮与超连结的配置上，Webpage设计者则要更细心周全地安排，使得读者不论身处 您站台的哪一阶层，依然能够快速便捷地通往其他任何一个页面。Webpage设计者应特 别注意∶ 　　 1.提供「上一页」、「下一页」、「回子目录页」与「回首页」的导览按钮或超 连结在一系列具前后连续顺序的文件里，每篇Webpage都至少应提供「上一页」、「下 一页」、「回子目录页」与「回首页」的导览按钮或超连结，可使读者能够立即得知 自己所在的页面，是属于一份较大文件内的一小部分。（考虑、体贴一下某读者不是 从您的Home顺序连结至此页，而是依循别的站台的某个link跳跃连结至此）。并且可 以藉由这些links随时参考连结「上一页」、「下一页」与本页的连贯内容；直接点取 「回子目录页」查寻其他相关的标题；或直接跳跃至homepage，浏览其他不同项目的信 息。 　　2.简明扼要地标明此页、上一页与下一页文件的标题或内容梗概 　　在一系列具前后连续顺序的文件里，每篇Webpage都应加上一个具说明性的标题， 使读者一目了然，马上抓住这一页的重点。 　　而完善的导览系统除了提供「上一页」、「下一页」的导览按钮或超连结外，更 添加精简达意的上一页与下一页标题、内容提要，使读者即使尚未点取这些Webpages 时，亦能先梗概地了解自己将连结至什么样的Webpage。 　　3.提醒读者某一系列文件已到尽头 　　当读者已达某一系列文件的最后一页时，Webpage设计者应提供一小段告示提醒读 者，同时不再提供「下一页」的导览按钮或超连结。 　　但基于Webpage介面设计的一致性，或许有些Webpage设计者并不希望在同一系列 的最后一篇Webpage里忽然少了一个先前每页都有的「下一页」导览按钮（尤其是精心 设计过的图形化导览按钮）。为达成此目的，可考虑将最后一页的「下一页」导览按 钮颜色暗沉下来，且不赋予超连结的功能，并提供一小段告示提醒读者，此系列文件 已到尽头，不再有「下一页」的内容。 　　七.在较长的Webpage内提供目录表与大标题 　　理想的Webpage长度以不超过3、4个荧幕页面为佳。但是如果基于某些特殊理由， 您的Webpage一定要做得很长，那么不要忘了在此长篇的Webpage最上头，提供一个目录 表，Webpage的内容也标上大小标题，以利清楚阅读。尤其重要的是，在这些标题与目 录表的HTMLsource里分别设置锚点，与连结到锚点，以使您的Webpage真正发扬WWW的 高互动性、高便捷性功能。 　　八.暂时不提供超连结到尚未完成的Webpage 　　超连结或导览按钮应该引导读者到一篇真正「有料」的Webpage，而不是以「挂羊 头卖狗肉」的方式，事先将某一超连结描述得超级精彩、超级诱人，结果读者兴致勃勃 地连结过去，却根本看不到任何精彩、诱人的内容，唯一所见的，只是一张无聊的告示 牌∶「施工中」。 　　如果您急欲在网络上推出您的站台、展现您Homepage，但仍有少数几页Webpage尚 未完成，建议您先暂时别让这些「施工中」的Webpage正式露面。（即先暂时别让这些 连往「施工中」的Webpage的「超连结」，拥有真正的超连结功能。）等到您「几乎」 完工之后（Webpage永远没有「真正」完工之时，总是需要不断地修改、增添、翻新）， 再正式开放连结也不迟。 　　倘若您急欲告诉读者，您即将提供一页超级精彩、超级诱人的Webpage在此站台， 只是目前仍在努力赶工中，您大可直接摆一段告示在即将是「超连结」的文字旁（但 目前仍不具超连结的功能），明白昭告世人，以减省读者徒然点取、徒然往返的时间； 也免得读者满怀希望，却又落得失望而归。 　　九.测试所有的超连结与导览按钮的真实可行性 　　Webpage上线之后，第一件该做的事，是逐一测试每一页的每一个超连结与每一个 导览按钮其真实可行性。彻底检验有没有失败的link无法连结到该连结的Webpage，却 反而冒出“FileNotFound"的错误讯号出来。这是一个负责任、够水准的Webpage设计者 对自己的作品应有的基本品质要求。 WWW.MDONG.ORG
2007/4/15	编辑 | 删除

回复:re:WEB设计理念
冥隼 查看冥隼的博客 金钱 : 2057 Level : 0 发帖数 : 274 最后登陆 : 2009/7/11 注册时间 : 2007/2/3	信息 | 留言 引用 | 回复 如何评测你的网页设计　 -------------------------------------------------------------------------------- 　　不管你怎么看待你的读者们，反正你的读者并不傻。让你的站点给用户提供一个持续更新、简便易用的界面，这不仅对你的访问率的提高有很大好处，而且也是出于对那些选择了你的网页进行浏览的读者的敬意。 　　但是你怎么知道，你十分重视和倾心的设计方式就一定合适？信息反馈就是一种方法－－－要留心那些花时间提笔写意见的人们发给你的邮件。还有一个更有效的方法就是在读者上网时你仔细观察他们访问你的站点时的真实反应，并询问他们一些简单的问题，然后对你的设计作出相应的调整和修改。要从测试中得到什么，只要你明白这一点，测试就非常简单。 　　不要去仿效识别心理学和行为学科的作法，他们通常是采取非常复杂的带有科学研究性质的方法来考察人们是如何理解信息、如何学习软件工具、以及这个认知过程本身。而你只需着眼于普通大众化的方法：让用户坐下来，面对你的设计，观察他们访问你的站点时的反应，你就能发现你在制作方面忽略掉的数不清的错误。接下来就好办了，你再完成修改就行了。 　　 你是否有过这种感觉，长时间地盯着一个字，它看上去就不象一个字了？同样，长时间的面对网上设计页面也会如此。当你花费了数小时制作你的页面以后，一些简单的错误就可能给忽略掉。这儿有一个例子，很能说明问题： 　　 我们的设计人员在重新设计Wired News站点时，他们在屏幕的左侧安置了一个导航工具，导航指向不同的内容：有股市行情分析（Stocks），有本周10大新闻（Top10），以及贸易杂志文章选载 （From the Trade）。不过，我们的测试人员看到这个导航工具和它相应的链结－－－股市、本周头十名、贸易行业，他们不自觉地就将这几个部分揉在一起。结果所有的读者都认为是这个意思：本周头10名运行最好的公开贸易公司，而From the Trade则被当作是进行买卖的意思。看来，他们在心理上都把所有的内容同股票挂钩了。 　　 通过让七八个读者访问网站半个小时这种简单测试方法，就很快发现了设计方面中令人费解的地方。有了这些测验结果数据之后，我们的设计人员就马上修正了链结的位置，并且使站点不那么花里胡哨、简便易用。 　　因此，你何不自己尝试一下？只需要几个朋友或是家庭成员，和他们坐在一块儿，让他们观察你的站点几分钟。在他们点击、逐一浏览页面时，请他们坦率说出自己的想法。在他们碰到了一个链结并点击的时候，问问他们期望链结后会是什么内容，最后再询问他们发现了什么样的问题。 　　 通过这种作法，你能够得到足够多的信息反馈。这时要搞清楚的是什么意见该听从什么意见可以不管，这十分重要。记住这一点：用户的期望比他们的观点要有价值得多。这两者有什么区别吗？比较这两句话的不同就可以明白了，一句是：“哦，我还以为这个按钮是给我一个搜索引擎呢，结果它是一个档案库”，还有一句是：“这个蓝色阴影背景真奇怪，我不喜欢。” 　　 一个好的设计人员能够通过网站界面消除用户的困惑，而不是屈从于那些品味和想法都极其低下、普通、大众化的观点。尽管在任何时候你也不可能取悦于每一个人，但是至少你得把你要表达的意思表述得足够清楚，能让他们推出相反意见进行讨论。 WWW.MDONG.ORG
2007/4/15	编辑 | 删除

回复:re:WEB设计理念
Lisa·粉 查看Lisa·粉 的博客 金钱 : 2201 Level : 0 发帖数 : 579 最后登陆 : 2007/8/11 注册时间 : 2007/3/15	信息 | 留言 引用 | 回复 丰富啊 ~~~~~ Lisa·粉的博客~~~~~涂鸦留言本~~~~~ 青岛搜艺招聘网~~~~~
2007/4/15	编辑 | 删除

7     [   1   ]     8