站点分类及解析课件.ppt

站点分类及解析,一、 新闻、搜索 二、 女性、男性、儿童、时尚、生活、体育 三、 IT、政府、财经、医疗、旅游、短信 四、 娱乐、游戏、节庆、通知 五、 企业、电子商务 六、 文学、教育、艺术 七、 电子邮局、社区、论坛、留言、电子报 八、 个人主页 九、 门户站点,一 新闻、搜索,1. 新闻类站点 新闻网页设计和报纸排版的感觉很类似。新闻类站点受传统媒体的影响，当页面排版感觉类似报纸时，便会让绝大部分浏览者感到亲切，很容易习惯和接受。新浪、163等的页面几乎没有空隙地排满了信息，如图1所示。,图1 新浪新闻和pcweek网络报纸,2. 搜索页面 门户类、搜索引擎类站点对搜索的页面有较高的要求，应尽量采用开放式的框架结构，色彩没有太多要求。不过要注意搜索框等CSS设置，以小的环节达到美化页面的效果，同时确立页面风格。 值得一提的是简单的Google网站(见图2)，该站点的精彩之处是它的标志。根据不同节庆、事件，Google拥有多套标志更换，如图3所示。,图2 Google搜索,图3 Google的Logo,二、女性、男性、儿童、时尚、生活、体育,1. 女性、男性站点 女性站点在网络上占很重要的地位。女性网民几乎达到上网人数的45左右。女性站点的内容包括了内容较多，从美容、化装、时尚、服装、健美、医疗、饮食、旅游到儿童、文学、教育、生活等等。女性关注的事物不仅仅跟女性有关，和生活也密切相关，这类站点信息面可以铺得很大，网站可以做得很大。,针对女性站点，设计可柔美、高雅、时尚感强，采用曲线的框架结构，插图的选取宜唯美、俏皮，色彩可以以纯度低的色相系为主，或高雅的流行色为主等。摆放一些可爱的页面小饰物，女孩子们会很喜欢。为了尽可能地出“新”出“奇”，风格设计可以走时尚路线。注意流行色的搭配，框架大胆一些。例如，she做得就非常好(见图4)。,图4 she,2. 儿童类、卡通类站点 儿童类站点以色彩鲜亮、活泼为主(见图5)，网页可以采用无骨架的设计，这样更自由一些。卡通类站点的颜色则没有限制，根据内容框架也可以理智一些或感性一些。网站均可以选择全Flash来制作，这样更显特色。,图5 迪斯尼英文网站,3. 时尚类、生活类站点 时尚类站点最主要的是要表现时尚感，而生活类站点要体现生活气息。 色彩上，时尚类站点要注意流行色彩，如灰、黑、棕、米色等；生活类站点则要温和一些，选用一些淡雅的颜色，如蓝、紫、米色等。 插图的选用：时尚类站点选择时尚类的图片，以及有速度感和张力感的插图；生活类站点要选择一些和生活相关、贴近生活的图片。 这两类站点都需要注意细节的地方，运用细节调节页面氛围，渲染页面气息，如图6、图7所示。,图6 esprit,图7 vidal sassoon,4. 体育新闻类、运动产品类站点 体育新闻类站点和纯新闻类站点有相同之处。国内外各类体育比赛报道、体育明星新闻以及赛场风云等每日信息量也很大。与纯新闻类站点不同的是，体育类站点更突出时代感、运动精神以及紧迫感。竞技精神一定要在标志、页面中强烈突出。,运动产品类的网站页面设计要有时尚感，因为体育运动也是当今很时尚的活动。页面设计要轻松有张力，色彩应多元化，插图可以随意一些，这些应根据产品的消费倾向去选取。框架设计可根据信息要求确定。页面的张力感可以用运动产品的摄影图片来巧妙地实现。读者也可以借鉴著名品牌nike、adidas的网站设计(见图8和图9)。,图8 nikefootball,图9 adidas,三 IT、政府、财经、医疗、旅游、短信,1. IT资讯类站点 数码感、时代感、互动感是IT给人们的感觉。IT咨询类站点在职能上类似于新闻类站点，但是注意气氛不要太拥挤。色彩可以选择清爽的蓝色、绿色，灰色，黄色等，如图10所示。,图10 tiendapc,2. 政府站点 政府类网站讲究庄重的气氛和地区的特色，应根据具体政府网特色选择适当的颜色，不能一概而论。框架设计上应尽可能地选择三栏式结构，这种开放式的结构显得大气，很适合政府类网，如图11所示。,图11 滨海政府网的第二、三版首页,3. 财经站点 财经网站页面气氛应属于较紧张的感觉，选择以暖色为主的配色，会有助于缓解紧张和压力。框架设计应根据信息空间的大小而定，大站则可以选择分栏式结构，小一些的站可以选择区域排版，如图12所示。,图12 大鹏证券,4. 医疗站点 绿色、蓝色等素雅的颜色很适合医疗类的网站，而大红大黄给人的感觉过于兴奋，不适宜在医疗类的站点上使用。医疗健康网站的插图应选择较为舒适的图片，不要制造紧张感，如果有动画，节拍要放慢。,5. 旅游站点 一想到旅游，很容易让人联想到天空、大地、海洋等，绿色、黄色、蓝色都很适合旅游类站点。旅游类站点的插图很容易选择，名胜古迹、风土人情等各种图片拿到页面上都会给人带来憧憬。页面设计要轻松，条理清晰，不要给人嘈杂的感觉。,6. 短信站点 韩国的短信类网站设计都相当出色(见图13)，我们可以借鉴一下，多利用像素风格或是金属感觉，动态图片多一些，色彩随意，Sms.163的粉红色就很成功。,图13 韩国的短信站点,四 娱乐、游戏、节庆、通知,1. 娱乐类、游戏类站点 娱乐类站点浏览者的视线通常被那些明星的各类新闻所吸引，这类站点最突出的不是时尚感，而是娱乐圈的纷乱的味道，以及音乐的感觉和电影的感觉，还有就是互动感。这类感觉很容易达到，插图选用明星照片、电影海报、CD Cover，自然就可以达到想要的感觉。,色彩选择艳丽一些的即可。娱乐网站图片较多，图片设计和字体排版设计显得尤为重要，把握不准时可以参考一下港台设计的一些娱乐网站。另外，加一点动态效果，感觉会很好，如图14所示。 游戏类站点可以选择金属、像素风格，也可添加游戏主角作为插图。黑色背景能增加神秘感和科幻感，这种页面效果一定很精彩。,图14 now.hk,2. 庆典页面 中国人注重节日庆典，每当春节、劳动节、国庆节、母亲节、父亲节时，都会要求设计相应的庆典页面。设计这些页面要抓住民族特色，并根据节日的特点来设计，设计的时候要考虑到如何烘托好节日气氛，并选择合适的插图和背景，如图15所示。 对于网站周年庆之类纪念日，可根据各自的信息类型来设计庆典页面，或者采用弹出式窗口，或者添加一个欢迎界面等。,图15 21cn贺年,3. 通知页面 针对紧急通知，经常采用以下三种方式来设计页面： (1) 利用弹出式窗口。由于很多人不太注意，所以效果不是很好。 (2) 利用横幅广告条。与小窗口相比，其效果能好一些。可设计成动态效果，也可以采用跳跃性的色彩和吸引人的广告用语。 (3) 在页面的某个位置打小广告、发新闻或者利用滚动文字。这些方式可能不够显眼，可根据通知的重要性来选择合适的方式。,五 企业、电子商务,1. 企业类站点 企业类站点(见图16)在网络上占很大比例，但是往往宣传力度不够，大部分网站的访问量都很低。根据各自的特点，有针对性地进行一些宣传是有必要的。,图16 金山电线电缆股份有限公司,设计企业站点，应该注意以下事项： (1) 根据企业类型选择合适的插图和风格定位。 (2) 根据客户要求和访问者需求选择信息。 (3) 针对企业的形象，最好运用CI色系，搭配合适风格的页面设计。 (4) 若信息量少，可尽量选用字号大的文字。 (5) 如果有英文版，应该有针对英文版的设计方案。针对两种语言的不同特点，设计页面也不尽相同。,(6) 如果大型企业站点中包含很多行业信息，最好采取开放式框架，这可以给人以亲切的感觉，对企业形象也很有帮助。所以要选择清爽的颜色，尽量不要含有个人色彩。,2. 微型企业站点 一部分小型企业只需要有一个宣传性的网站(见图17)，网站中栏目较少，信息量也很少，页面比较空，这时最需要注意的是页面框架和页面背景。页面框架可以采用通栏，尽量做得细致，以刻画企业形象，给浏览者树立良好的感觉。另外，可以根据具体情况选择一些时代感、科技感强的插图。,图17 信息量小的企业站点,3. 电子商务类站点 电子商务类站点，尤其是在线买卖商务站点(见图18)，应该多注意一些细节问题。,图18 gap,六 文学、教育、艺术,1. 文学、教育类站点 文学、教育类的网站应加强功能性设计。这类站点中主要是文字类信息(见图19)，而且在线阅读量很大，加强易用性，会给浏览者亲切舒适的感觉。网页的色彩要柔和，不要伤眼睛，尽力选择白为底色，配黑色的字体颜色；网页主色调应根据具体情况来定，插图则选择大气自然的图片，页面干净整洁很重要(见图20)。,图19 bookzone,图20 榕树下,2. 常规型艺术类站点 艺术站点常规与否主要表现在框架设计上。 常规的艺术类网站在页面格局上多选择分栏式或区域排版式的框架设计(见图21)。这样的站点适合艺术类信息网站。浏览这部分信息的人对美感要求较高，所以这类网站的页面设计应注意细节修饰，给人精致的感觉。,图21 neue galerie (new york),3. 非常规型艺术类站点 非常规的艺术类网站在页面格局上选择无骨架设计的结构(见图22)。这样的站点风格自由、怪异、新颖,让信息内容决定页面设计，不过如果图片量多，应注意考虑下载速度等。,图22 zoorex,七 电子邮局、社区、论坛、留言、电子报,1. 电子邮局 国内电子邮局类站点的设计都十分简陋(见图23)。电子邮局页面设计应特别注意图标、按钮等小细节物件的设计，充分利用这些小物件确立页面风格。,图23 hotmail,2. 社区 网络社区不等同于论坛，社区中包含的内容较多。 社区页面设计和社区的程序设计密不可分，设计受到程序的影响。具体设计时，应根据社区的具体性质来确定页面设计的颜色、框架。图24的卡哆家族是一个页面设计较为新颖的社区，值得学习借鉴。,图24 kaduo,3. 论坛配色 现在网络中到处都是VBB代码的论坛(见图25)。这类论坛的框架风格一样，可以修改的是论坛的表格配色、图片背景、超级链接的颜色等，最重要的是，还可以修改论坛图标，如图26所示。,图25 VBB论坛,值得一提的是，ultrashock讨论区(ultrashock/)是最酷的VBB(见图28)，论坛页面和Flash框架感觉完全融合在一起，感觉很棒。,图26 论坛图标,图27 refresh.newthread,图28 ultrashock,4. 留言本风格 对于留言本的风格，可以多学习借鉴日本的留言本(见图29)。日本的留言本都很有特点，而且很精致、漂亮。可以在日本雅虎上搜索一下提供免费程序的站点，查找留言本即可。如果有技术支持的站点设计，论坛、留言本、社区均应该与页面设计统一风格。现在使用Flash制作的留言本等互动程序也逐渐多起来，如图30所示。,图29 bbs,图30 bimbern留言本,5. 电子报 电子报可以当作报纸来设计。如Pchome活动专刊(见图31)选择了带有pop海报的风格设计，给人一种海报的感觉。“阿贵专刊”(见图32)则美术设计强一些，更符合网络新媒体的形式味道。图33中的“精彩购物”偏向传统报纸的感觉。应根据电子报内容的不同来设计合适的报纸风格，不要千篇一律。,图31 PChome活动专刊,图32 阿贵电子报,图33 精彩购物,6. 聊天室 国内的聊天室绝大部分还属于HTML的形式，这种聊天室的版式设计大致雷同，主要注意按钮设计、图标绘制等方面即可(见图34)。另外，程序设计师要开放更多的功能，为网民服务。,图34 普通聊天室的按钮,现在国外已经有了很多Flash风格的聊天室(见图35)，你可以自己选择卡通角色，并且任意走动到某个角落，采用虚拟现实的方法“搭讪”、“问好”和“聊天”。有兴趣或有技术条件的设计者可以尝试一下Flash风格的聊天室设计。,图35 Flash聊天室,八 个 人 主 页,1. 内容丰富型 内容比较丰富的个人站点可以选择大气的骨架设计，开放式的结构，外加较柔和的配色(见图36)。具体情况根据信息内容而定。由于是个人主页，设计可以大胆一些，除去条条框框，尽可能体现特色。一部分大型的个人站点，已经走向商业化发展之路。无论怎样，个人站点必须保证网站特色，网站才能持久发展下去。,图36 andy杂志,2. 内容适中型 根据自己的能力储备信息，欲速则不达。在没有大容量信息储备时，页面设计可以不要太过大气，可选择区域排版的骨架设计(见图37)。当站点发展到一定时候，改版即可。信息储备不够，而又选择大容量的骨架设计时，页面会显得过于空洞。,图37 Fox-design,3. 内容简练型 内容简练型站点，也就是所谓的个人主页“小站”。小站的内容单一，信息量小，设计也更容易，色彩、框架和页面风格只要和谐舒适，均可以根据自己喜好来定，如图38所示。 如果是设计师的个人作品站点，通常设计含量会较高一些，如图39所示。,图38 aranzi会场实况,(a),图39 rokedsign,(b)图39 rokedsign,九 门 户 站 点,门户站点应该是所有站点中设计起来最困难的类型了。这类站点的规划庞大，涉及方面较广，包含内容较多，设计要求受到多方面的影响。,设计出一个好的门户站点确实不容易，国内的搜狐、新浪等站点从页面设计上看均十分简洁。早期Chinaren、中文热讯等都设计得不错。网络设计圈“繁衍生长”过快，好的设计不断涌现，而门户站点的设计却没有太多变化。不管怎么说，易用性是入门站点首先要考虑的问题。页面风格的某一点相似性和统一的识别功能必须贯彻于各频道设计过程的始终(见图40)。,图40 msn,互联网信息类别较多，本案例归类的网站类型并不完整。读者应根据具体信息内容来决定页面设计。有一些设计师可以决定的事情比较容易把握，而一些商业类型的站点要考虑来自各个方面的制约，页面设计就可能较难进行，如门户站点。相对来说，个人主页无论是色彩还是结构就十分自由了。,