1、创意web页面设计构想,保朗坤,www.mjcy.cc 客服热线：400-625-9669,目录,Web概念网页与网站网站CI形象版面布局 用户体验页面设计必看的13条定律,www.mjcy.cc 客服热线：400-625-9669,Web概念,什么是web？Web有什么特点？Web的发展（进化）？,www.mjcy.cc 客服热线：400-625-9669,Web概念,web本意是蜘蛛网和网的意思。现广泛译作网络、互联网等技术领域。表现为三种形式，即超文本（hypertext）、超媒体（hypermedia）、超文本传输协议（HTTP）等。 对于普通的用户来说，web仅仅只是一种环境互联网的
2、使用环境、氛围、内容等；而对于网站制作、设计者来说，它是一系列技术的复合总称(包括网站的前台布局、后台程序、美工、数据库领域等等的技术概括性的总称)。,www.mjcy.cc 客服热线：400-625-9669,Web概念,一、超文本（hypertext）一种全局性的信息结构，它将文档中的不同部分通过关键字建立链接，使信息得以用交互方式搜索。它是超级文本的简称。二、超媒体（hypermedia）超媒体是超文本（hypertext）和多媒体在信息浏览环境下的结合。它是超级媒体的简称。用户不仅能从一个文本跳到另一个文本，而且可以激活一段声音，显示一个图形，甚至可以播放一段动画。Internet采用
3、超文本和超媒体的信息组织方式，将信息的链接扩展到整个Internet上。Web就是一种超文本信息系统，Web的一个主要的概念就是超文本连接，它使得文本不再象一本书一样是固定的线性的。而是可以从一个位置跳到另外的位置。可以从中获取更多的信息。可以转到别的主题上。想要了解某一个主题的内容只要在这个主题上点一下，就可以跳转到包含这一主题的文档上。正是这种多连接性把它称为Web。三、超文本传输协议（HTTP）Hypertext Transfer Protocol超文本在互联网上的传输协议。,www.mjcy.cc 客服热线：400-625-9669,Web概念,Web的特点一、Web是图形化的和易于导
4、航的 二、Web与平台无关二、Web与平台无关四、Web 是动态的五、Web是交互的,www.mjcy.cc 客服热线：400-625-9669,Web概念,Web的演变Web 1.0: 任何人可以交易Web 2.0: 任何人可以参与Web 3.0: 任何人可以创新,www.mjcy.cc 客服热线：400-625-9669,网页与网站,什么是网页？什么是网站？,www.mjcy.cc 客服热线：400-625-9669,网页与网站,什么是网页？ 一个网页是存储在某与互联网相连计算机中的一个文件，通过网址（URL）来识别和存取。网页的分类： 通常网页文件以htm 、html、asp、aspx
5、、PHP、JSP等为扩展名。不同的扩展名分别代表不同类型的网页文件。按表现形式的不同又可分为：静态网页和动态网页。,www.mjcy.cc 客服热线：400-625-9669,网页与网站,静态网页：指网页显示后（或显示期间），浏览器与服务器不再发生信息的交互。无法做进行查询、留言、聊天、电子商务等操作，并不是不动的网页，如FLASH动画。动态网页：指浏览器端和服务器端可以进行信息交流的网页，即服务器可以根据浏览者的请求做出相应动作和回复。常见的动态网页类型有ASP、ASPX、PHP和CGI等等，其中以ASP动态网页技术较成熟且易学。,www.mjcy.cc 客服热线：400-625-9669,
6、网页与网站,什么是网站？ 网站是互联网上一块固定的面向全世界发布消息的地方。它由域名（即网站地址）和网站空间构成。 可以将网站喻为一个摊位或地盘。如果一个企业上了互联网，表示进入了世界上最大的市场，此时也只不过是一个看客；而如果企业建立了自已的网站，它就在市场中拥有了一个“摊位”，可以宣传和展示自已产品。 那么网页与网站有什么关系呢？,www.mjcy.cc 客服热线：400-625-9669,网页与网站,网站与网页的关系 网站是网页、图片等文件的集合体，是网页通过超级链接的形式组成的。,网站的逻辑结构 1服务器部分包括计算机硬件、操作系统、 WWW程序、电子邮件程序等。 2网络接入部分和网络
7、安全系统包括 路由 器、调制设备和网络安全系统 。 3数据存贮部分和中间件数据存贮存系统要 有海量存贮能力，高速搜索能力，有效的数据采 集、制作和发布能力。中间件介于服务器系统和 数据存贮系统之间。 4研发和维护部分 此部分贯穿于网站从建立 到消亡的全过程，需要专人负责。,www.mjcy.cc 客服热线：400-625-9669,网站CI形象,CI（Corporate Identity）形象指通过视觉来统一企业或个人的形象,（1）网站标志（logo）的设计（2）设计网站的标准色彩（3）设计网站的标准字体,www.mjcy.cc 客服热线：400-625-9669,网站CI形象,（1）网站标志
8、（logo） LOGO是徽标或者商标的英文说法，起到对徽标拥有公司的识别和推广的作用，通过形象的logo可以让消费者记住公司主体和品牌文化。LOGO的国际标准规范为了便于INTERNET上信息的传播，一个统一的国际标准是需要的。实际上已经有了这样的一整套标准。其中关于网站的LOGO，目前有三种规格：1. 88*31这是互联网上最普遍的LOGO规格。2. 120*60 这种规格用于一般大小的LOGO。3. 120*90 这种规格用于大型LOGO。4. 200*70 这种规格LOGO也已经出现。,www.mjcy.cc 客服热线：400-625-9669,网站CI形象,（2）设计网站的标准色彩,色
9、彩是网站给浏览者的第一印象，不同的色彩搭配会产生不同的效果，并可能影响到访问者情绪。标准色彩：能体现网站形象和延伸内涵的色彩。设计网站的标准色彩的原则：1、一般不宜超过3种色彩。2、可以运用到网站的标志、标题、主菜单、图片和主色块上。,www.mjcy.cc 客服热线：400-625-9669,网站CI形象,色彩的选择与含义：（基本色）红色：代表热情、奔放、喜悦、庆典黑色：代表严肃、夜晚、沉着、恐怖； 黄色：代表高贵、富有 白色：代表纯洁、简单 蓝色：代表天空、清爽 绿色：代表植物、生命、生机 灰色：代表阴暗、消极 紫色：代表浪漫、爱情 棕色：代表土地 色彩本身是无任何含义，有的话也只是人赋予
10、它的。但色彩确实可以在不知不觉间影响人的心理，左右人的情绪，所以就有人给各种色彩都加上特定的含义。,www.mjcy.cc 客服热线：400-625-9669,网站CI形象,网页色彩搭配不同主题的网站所应用的色彩是不同的。对于网页设计者来说，色彩的心理作用尤其重要。例如：绿色可以使人产生优雅、舒适的气氛，黄绿色有青春、旺盛的视觉意境，而黑色则含有幽静、阴森的意境。通常的选择是：重要内容的文字用非彩色（黑色），边框、背 景、图片用彩色。,www.mjcy.cc 客服热线：400-625-9669,网站CI形象,网页色彩搭配的原理：注意色彩的鲜明性（引人注目）注意色彩的独特性（使印象深刻）注意色彩
11、的合适性（色彩与内容气氛协调）注意色彩的联想性。（色彩与网页内涵关联）,www.mjcy.cc 客服热线：400-625-9669,网站CI形象,网页色彩搭配技巧 1.用一种色彩 指先选定一种色彩，然后调整透明度或者饱和度，产生新的色彩。这样的页面色彩统一，有层次感。 2.用两种色彩 选定一种色彩，然后选择它的对比色。 3.用一个色系 就是用一个感觉的色彩，例如，淡蓝、淡黄、淡绿或黄、淡黄、棕黄等。 4.用黑色和一种彩色,www.mjcy.cc 客服热线：400-625-9669,网站CI形象,网页色彩搭配注意点1、不要将所有颜色都用到，尽量控制在3种色彩以内。背景色不要太过复杂，以免减慢网页
12、打开的速度，建议主页的色彩运用应体现在站点标志、导航栏、按钮、边框，非正文文字上。2、背景和前文的对比要尽量大，绝对不要用花纹繁复的图案作背景。3 .色彩的搭配考虑不是单纯的颜色运用，还要考虑诸多因素， 如：社会背景、心理需求、访问者类别等等。,www.mjcy.cc 客服热线：400-625-9669,网站CI形象,设计网站的标准色彩的注意事项：网站的性质网站的访客对比度是否合适色彩是否统一 我们在设计网站时，需要尽量在页面中使用看上去比较淡雅、 简洁的色彩； 比如背景尽量少用灰暗、 深沉的色彩（除非特殊需要），并且根页面的主题来选择主色调！,www.mjcy.cc 客服热线：400-625
13、-9669,网站CI形象,（3）设计网站的标准字体标准字体：一般网页默认的字体是中文“宋体”和英文”Times New Roman“。若需要体现“与众不同”和特有的风格，可选择特别的字体。网站的标准字体的设计原则：1. 不要使用超过3种以上的字体（包括在网页的统一界面中）。2. 文字的颜色要注意与整体协调一致。3. 标题以H1H3字号为佳。4. 要注意：使用非默认字体时，最好采用图片的形式。因为浏览者的计算机中可以没有安装特别字体。,www.mjcy.cc 客服热线：400-625-9669,版面布局,版面布局基本规：平衡、对比、疏密度、比例、凝视、图片说明,（1）“T”型布局（2）“国”型布
14、局（3）POP布局（4）对比性布局（5）拐角型布局（6）标题正文型布局 （7）左右框架型布局（8）上下框架型布局（9）综合框架型布局 （10）封面型布局（11）Flash型（12）变化型,www.mjcy.cc 客服热线：400-625-9669,版面布局,（1）“T”型布局 这种布局形式， 一般指页面顶部为横条（网站标志+广告条），下方为多列的结构，如最简单的是左半部分为主菜单，右半部分显示内容。优点：页面结构清晰，主次分明，强调次序，给人稳重、可信缺点：规矩呆板，如果细节和色彩搭配上不注意，很容易让人“看之无味”。http:/ 客服热线：400-625-9669,版面布局,（2） “国”型
15、布局 也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的最多的一种结构类型。优点：充分利用版面，版面充实，信息量大。缺点：页面拥挤，不够灵活。http:/,www.mjcy.cc 客服热线：400-625-9669,版面布局,（3）POP布局 POP引自广告语，就是指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心，在适当位置放置主菜单。 优点： 讲究平衡和有韵律，能达到强调、动感、高注目性
16、的效果，漂亮吸引人； 缺点： 速度慢。http:/ 客服热线：400-625-9669,版面布局,（4）对比性布局 这种布局形式，利用色彩、色调等技巧来表现，在内容上也可以涉及古与今、新与旧、贫与富等的对比。优 点： 视觉冲击力强； 缺 点： 将两部分有机的结合比较困难，一般用于设计型网站。http:/,www.mjcy.cc 客服热线：400-625-9669,版面布局,（5）拐角型布局 往往上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接 http:/ 客服热线：400-625
17、-9669,版面布局,（6）标题正文型布局 这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。 http:/ 客服热线：400-625-9669,版面布局,（7）左右框架型布局 这是一种左右分别为两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标志，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。http:/www.modelcraft.ae,www.mjcy.cc 客服热线：400-625-9669,版面布局,（8）上下框架型布局 与上面类似，区别仅仅在于是一种上下分为两
18、页的框架。http:/ 客服热线：400-625-9669,版面布局,（9）综合框架型布局 上面两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。http:/http:/ 客服热线：400-625-9669,版面布局,（10）封面型布局 这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。http:/ http:/ 客服热线：400-625-9669,
19、版面布局,（11）Flash型 其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。http:/ 客服热线：400-625-9669,版面布局,（11）变化型 即上面几种类型的结合与变化，比如在视觉上很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。http:/ 客服热线：400-625-9669,用户体验,从3个方面来改善用户体验1、页面设计2、交互设计3、视觉设计,www.mjcy.cc 客服热线：400-625-9669,用
20、户体验,页面设计需要遵循的几个原则少即是多：做得越多越不好，我们需要经常告诫自己，是不是做得太多了？用户价值不会因为是统一了（大而全）而体现的，而是每一个单项是否能真正赢得用户的喜爱。“简单”的核心在于，做好最核心的10个，放弃其它的90个。技术人员总希望将每个需要的不需要的功能都铺在面板上让用户看到。而好的产品总是让用户看不到技术的存在。,www.mjcy.cc 客服热线：400-625-9669,用户体验,页面设计需要遵循的几个原则兼容性浏览器的兼容性，如QQMail一直是兼容多种浏览器IE内核类FirefoxChromeSafariOpera,www.mjcy.cc 客服热线：400-6
21、25-9669,用户体验,页面设计需要遵循的几个原则无所不用其极优秀的技术实现+优秀的网页体验=优秀的网站尽可能的提升访问速度大气的设计满足用户个性化需求,www.mjcy.cc 客服热线：400-625-9669,用户体验,交互设计理念把自己想象成一个迟钝、挑剔、易怒的傻瓜来浏览网页擅长体会和学习业界优秀交互案例键盘少敲一下，鼠标易于点选，鼠标少移一段，操作形成定势照顾用户习惯如何把新功能引入,www.mjcy.cc 客服热线：400-625-9669,用户体验,视觉设计：大气成熟，干净整洁，工具化 简洁为主，不多用一张图片，内容清晰简单，而不是越多越好。规范与统一文字使用要规范，语法，大小
22、，颜色，大小写都需要注意 能用一个词表达的，不用一句话。能用一句话表达清楚的，不用两句话 每个概念都只有唯一一种表达。能用一种字体颜色的，不多用一种颜色 能用一种字体大小的，不多用一种大小维持统一 就算字体和行间距等小细节都应该关注到重点突出 每个页面（板块）只有一块视觉重点。并且，突出重点，不让用户去找。防止不恰当的低龄化 “成熟”源自合理的设计，“低龄”源自不合常理的设计。,www.mjcy.cc 客服热线：400-625-9669,用户体验,不恰当的低龄化,www.mjcy.cc 客服热线：400-625-9669,页面设计必看的13条定律,1. 250定律拉德认为：每一位顾客身后，大体
23、有250名亲朋好友。假如您赢得了一位顾客的好感，就意味着赢得了250个人的好感；反之，假如你得罪了一名顾客， 也就意味着得罪了250 名顾客。 在你的网站访客中，一个访客可能可以带来一群访客，任何网站都有起步和发展的过程，这个过程中此定律尤其重要。,www.mjcy.cc 客服热线：400-625-9669,页面设计必看的13条定律,2. 达维多定律达维多认为，一个企业要想在市场上总是占据主导地位，那么就要做到第一个开发出新产品，又第一个淘汰自己的老产品。 国内网站跟风太严重，比如前段时间的格子网，乞讨网，博客网，一个成功了，大家一拥而上。但实际效果是，第一个出名的往往最成功，所以在网站的定位
24、上，要 动自己的脑筋，不是去捡人家剩下的客户。同理，买人家出售的数据来建站效果是很糟糕的。,www.mjcy.cc 客服热线：400-625-9669,页面设计必看的13条定律,3. 木桶定律木桶定律是指，一只木桶能装多少水，完全取决于它最短的那块木板。这就是说任何一个组织都可能面临的一个共同问题，即构成组织的各个部分往往决定了 整个组织的水平。注重审阅自己的网站，是速度最糟糕？美工最糟糕？宣传最糟糕？你首先要做的，不是改进你最强的，而应该是你最薄弱的。,www.mjcy.cc 客服热线：400-625-9669,页面设计必看的13条定律,4. 马太效应新约中有这样一个故事，一个国王远行前，交
25、给三个仆人每人一锭银子，吩咐他们：“你们去做生意，等我回来时，再来见我。”国王回来时，第一个仆 人说：“主人，你交给我们的一锭银子，我已赚了10锭。”于是国王奖励他10座城邑。第二个仆人报告说：“主人，你给我的一锭银子，我已赚了5锭。” 于是国王例奖励了他5座城邑。第三个仆人报告说：“主人，你给我的一锭银子，我一直包在手巾里存着，我怕丢失，一直没有拿出来。”于是国王命令将第三个仆 人的一锭银子也赐给第一个仆人，并且说：“凡是少的，就连他所有的也要夺过来。凡是多的，还要给他，叫他多多益善。”这就是马太效应。 在同类网站中，马太效应是很明显的。一个出名的社区，比一个新建的社区，更轻易吸引到新客户。
26、启示是，假如你无法把网站做大，那么你要做专。作专之后再做 大就更轻易。,www.mjcy.cc 客服热线：400-625-9669,页面设计必看的13条定律,5. 手表定理手表定理是指一个人有一只表时，可以知道现在是几点钟，而当他同时拥有两只表时却无法确定。一个网站，你只需要关注你特定的用户群需求。不要在意不相干人的看法。,www.mjcy.cc 客服热线：400-625-9669,页面设计必看的13条定律,6. 不值得定律不值得定律：不值得做的事情，就不值得做好 不要过度seo，假如你不是想只做垃圾站。不要把时间浪费在美化再美化页面，优化再优化程序，在你网站能盈利后，这些事情可以交给技术人员
27、完成。,www.mjcy.cc 客服热线：400-625-9669,页面设计必看的13条定律,7. 彼得原理劳伦斯。彼得认为：在各种组织中，由于习惯于对在某个等级上称职的人员进行晋升提拔，因而雇员总是趋向于晋升到其不称职的地位。不要轻易改变自己网站的定位。如博客网想变门户，盛大想做娱乐，大家拭目以待吧。,www.mjcy.cc 客服热线：400-625-9669,页面设计必看的13条定律,8. 零和游戏原理当你看到两位对弈者时，你就可以说他们正在玩“零和游戏”。因为在大多数情况下， 总会有一个赢，一个输，假如我们把获胜计算为得1分，而输棋为-1分，那么，这两人得分之和就是：1 （-1）=0 不
28、要把目光一直盯在你的竞争网站上，不要花太多时间抢它的访客。我们把这些时间用来寻找互补的合作网站，挖掘新访客。,www.mjcy.cc 客服热线：400-625-9669,页面设计必看的13条定律,9. 华盛顿合作规律华盛顿合作规律说的是：一个人敷衍了事，两个人互相推诿，三个人则永无成事之日。假如你看准一个方向，你自己干，缺人手就招。不要轻易找同伴一起搞网站，否则你会发现，日子似乎越过越快了，事情越做越慢了。,www.mjcy.cc 客服热线：400-625-9669,页面设计必看的13条定律,10. 邦尼人力定律一个人一分钟可以挖一个洞，六十个人一秒种却挖不了一个洞。合作是一个问题，如何合作也
29、是一个问题。你需要有计划。,www.mjcy.cc 客服热线：400-625-9669,页面设计必看的13条定律,11. 牛蛙效应把一只牛蛙放在开水锅里，牛蛙会很快跳出来；但当你把它放在冷水里，它不会跳出来，然后慢慢加热，起初牛蛙出于懒惰，不会有什么动作，当水温高到它 无法忍受的时候，想出来，但已经没有了力气。 假如你是soho，注重关注你的财务。不要等到没钱了再想怎么挣，你会发现那时候挣钱更难。,www.mjcy.cc 客服热线：400-625-9669,页面设计必看的13条定律,12. 蘑菇治理蘑菇治理是许多组织对待初出茅庐者的一种治理方法，初学者被置于阴暗的角落（不受重视的部门，或打杂跑腿的工作），浇上一头大粪（无故的批评、指责、代人受过），任其自生自灭（得不到必要的指导和提携）。做网站究竟要遭遇这样的阶段，搜索引擎不理你，友情链接找不到，访客不上门。这是磨练。,www.mjcy.cc 客服热线：400-625-9669,页面设计必看的13条定律,13. 奥卡姆剃刀定律如无必要，勿增实体。把网站做得简单，再简单，简单到非常实用，而不是花俏。google的首页为什么比雅虎好？,www.mjcy.cc 客服热线：400-625-9669,谢谢,www.mjcy.cc 客服热线：400-625-9669,
