案例：包装中心网页艺术设计

《案例：包装中心网页艺术设计》由会员分享，可在线阅读，更多相关《案例：包装中心网页艺术设计（67页珍藏版）》请在装配图网上搜索。

1、1 前言 “中国包装总公司包装设计专业中心”是中国包装总公司设在株洲工学院的专业技术中心。“中心”具有独立的法人，即，株洲包装设计技术专业中心，是全民所有制的经济性质。自1996年成立以来，该“中心”面向市场、面向社会、面向科学技术发展的最前沿，以包装工程技术为主攻方向，从事包装专业技术、环境艺术设计、计算机图形设计等方面的理论研究和应用研究，并通过技术开发、转让、咨询和相关技术服务，将研究成果投入实际应用而转化为生产力，创造了一定的社会效益和经济效益。与此同时，“中心”已形成有自己特色的研究、开发与经营的规模和特色，拥有自己的技术服务和产品销售市场，在国内外及相关行业树立了良好的信誉，特别是

2、在包装界已获得了较高的知名度。但由于种种原因，一直没有合适的网站，给专业中心对外推广自己带来一定的影响。1 前言3 资料分析4 草图5.深化6.定稿2.进度表3 资料分析 3.1色彩分析3.2版式分析3.3导航分析3.4视觉元素3 资料分析 3.1色彩分析3.1.1 大学网站3.1.2 门户网站3.1.3 设计网站 3.1.4 娱乐网站3.1.5 科研网站3.1.6 国外网站3.1.7 色彩方案非艺术院校非艺术院校：设计得好的大学网站色彩搭配很理性，色相上多为蓝 橙 绿等较活泼的颜色（山东大学采用蓝色，新疆大学采用橙黄色，安徽大学采用绿色）以蓝色为主色相是综合性大学是特色，蓝色体现一种沉着冷静

3、，并且整体布局简单，清晰.采用该校的标准色（清华大学采用紫色）艺术院校艺术院校：国内的大部分艺术院校网站风格上与其他高校相比也并没有特别突出，但在细节及构图上处理得具有艺术性。特点：色彩搭配多突出本学校的特征,沉着且充满活力。3 资料分析3.1.1 大学网站 3.1色彩分析山东大学网站：采用偏灰的蓝色，显得稳重而理性3 资料分析3.1.1 大学网站 3.1色彩分析新疆大学网站：采用橙黄色，符合地域特色3 资料分析3.1.1 大学网站 3.1色彩分析清华大学网站：采用其传统色紫色3 资料分析3.1.1 大学网站 3.1色彩分析四川美术学院：采用绿色，灰色做前景色，白色为背景色黑白灰层次分明，整体

4、搭配协调3 资料分析3.1.1 大学网站 3.1色彩分析3 资料分析3.1.1 大学网站 3.1色彩分析主色调变化太少，白色部分运用不醒目，对比色用得不合理，welcome几个字母太孤立，次要文字搭配不合适，装饰图像未经处理，色彩未经调和，不和谐，链接动态色无变化。包装设计专业中心：背景色：一般为无色系前景色：与logo颜色相近（网易，搜狐，TOM，21CN，上海热线）色块面积小，仅单一的纯色色块或横竖线条来分隔页面。明度较高。文字色：大体文字颜色：偏绿的蓝（21cn）深蓝（搜狐，新浪，QQ，TOM，中华，263）纯蓝（网易，雅虎）黑色（深圳之窗，多来米，碧海银沙）醒目文字颜色：红色 纯蓝3

5、资料分析 3.1色彩分析3.1.2 门户网站特点：在白色的背景色上使用高明度的前景色能使深色的文字和鲜艳的图片更加突出。网易：背景色为白色，前景色与LOGO相近，色块面积小明度高，文字主要用纯蓝和黑色。3 资料分析3.1.2 门户网站 3.1色彩分析TOM：背景色为白色，前景色与LOGO相近为绿色，色块面积小，文字主要用蓝色和黑色，少数文字用红色突出。3 资料分析3.1.2 门户网站 3.1色彩分析设计公司：色彩绚丽,视觉冲击力强，如深圳设计,柏林设计，正 邦设计。背景色常用大片的黑和灰。喜欢用绚丽个性的flash动画。设计网站：图片较多，底色也常用深色，使页面沉下去，突出图片个人网站：个人风

6、格突出，颜色取用随心所欲。3 资料分析3.1.3.设计网站 3.1色彩分析 特点：为了吸引浏览者往往视觉感强烈，对比鲜明柏林设计：色彩绚丽但不失沉稳。3 资料分析3.1.3.设计网站 3.1色彩分析正邦设计：视觉冲击力强3 资料分析3.1.3.设计网站 3.1色彩分析设计在线：色彩统一且能突出信息。3 资料分析3.1.3.设计网站 3.1色彩分析视觉中国：色彩醒目，使人印象深刻3 资料分析3.1.3.设计网站 3.1色彩分析游戏类：颜色根据不同游戏的风格来定，魔幻类游戏一般采用暗色带有金属质感的色调来渲染一种神秘，力量，诡异的氛围，（黑，金色，褐，暗红），而Q版类的游戏则采用明亮活泼的纯色居多

7、，整个界面颜色丰富，色调柔和。很多按钮为透明图标（魔兽世界，冒险岛）音乐：一般以比较柔和的淡雅的纯度较低的颜色，给人以愉悦亲切的感觉。音乐本来就是给人以享受的，柔和的颜色感觉舒服，给人以亲和力。flash：采用灰色作为底色，因为flash动画比较多，色彩多，用大片的灰色作为底色可以缓和界面的繁杂（闪客帝国）特点：颜色都较丰富，细节精致3 资料分析3.1.4 娱乐网站 3.1色彩分析魔兽世界：细节上的色彩处理精致，注重整体气氛的渲染。3 资料分析3.1.4 娱乐网站 3.1色彩分析闪客帝国：底色沉稳突出内容3 资料分析3.1.4 娱乐网站 3.1色彩分析 色彩采用理性，用各种色调的蓝，红，绿来体

8、现学术研究的严谨，不同研究方向的科研网站可能采取与该研究方向相匹配的色调，如广州环保科研学院就采用环保的专用色绿色，中国纺织科学院采用柔和的浅紫，符合纺织工艺的特色。3 资料分析3.1.5 科研网站 3.1色彩分析广州市环境保护科学研究所：使用绿色符合环保主题3 资料分析3.1.5 科研网站 3.1色彩分析颜色统一，色块大小差距大。对比强烈的颜色使用巧妙。文字小，颜色单一，使之成为版面装饰的一部分。风格变化多样，让人耳目一新。3 资料分析3.1.6 国外网站 3.1色彩分析3 资料分析3.1.6 国外网站 3.1色彩分析色彩对比强烈巧妙3 资料分析3.1.6 国外网站 3.1色彩分析色彩统一3

9、 资料分析3.1.6 国外网站 3.1色彩分析在同色相的基础上运用不同明度纯度的搭配 因为专业中心同时具有大学网站和设计网站的特点，所以我们的色彩方案要同时具有理性和艺术性，基于我们对各种类型的网站用色上的分析，我们拟出以下几种色彩方案：1）以蓝色为主色 专业中心网站属于株洲工学院网站一部分，现有的工学院网站的主色为蓝色，达成色彩上的统一，我们学校为工科院校，蓝色象征科技，体现一种庄重、严谨的理念，突出工科院校的特点。2）以青色为主色 青色既具有冷静的特性，又不失设计的活泼性，所谓青出于蓝而胜于蓝，其他大学采用蓝色的较多，采用青色能在众多大学网站中脱颖而出。3）以橙黄色为主色 使用名片的色相，

10、便于中心形成一套形象色。3 资料分析3.1.7 色彩方案 3.1色彩分析3 资料分析3.2.1 3.2.1 框架框架3.2.2 3.2.2 首页内容量首页内容量3.2.3 3.2.3 视觉方向视觉方向3.2.4 3.2.4 底部结构底部结构3.2.5 3.2.5 版式分析小结版式分析小结3.2 版式分析 页面尺寸：800宽度的页面主要是为了照顾800*600分辨率的浏览器，但在1024分辨率下略显小气。1024宽度的页面显得大气饱满，但在800分辨率下影响内容表现不全。3 资料分析 3.2 版式分析3.2.1 3.2.1 框架框架框架数：单框架简洁，多数网站也是单框架；多框架略显零乱，不过在一

11、些特殊形式上使用会有更好的效果。3.2.1 3.2.1 框架框架3 资料分析 3.2 版式分析 首页内容量指的是一个页面所显示的信息多少。大型网站页面过长是一个大问题，将首页内容量控制在一定范围使信息结构清晰是非常重要的。蓝色理想，视觉中国便是页面过长的例子,而同是知名设计网站的设计在线就没有这个毛病。3.2.2 3.2.2 首页内容量首页内容量3 资料分析 3.2 版式分析一般网页为纵向，前面的内容较为重要。内容结合栏目归类，便于浏览者快速查阅资料。横向浏览较为特殊，一般用的很少，不太符合大众的浏览习惯。但有些网站大胆应用此排版方式，突破传统的排版规律，视觉上与众不同，给人一种耳目一新的视觉

12、观赏性，达到了创新的目的。3.2.3 3.2.3 视觉方向视觉方向3 资料分析 3.2 版式分析经常是一个形式简单的导航条和版权、联系等信息。3.2.4 3.2.4 底部结构底部结构3 资料分析 3.2 版式分析 大学网站和门户网站为了适合各方面人群浏览，一般用800宽度页面；设计类网站用1024宽度的较多。网站越大，内容量自然越多，页面过长是一个很大的问题，大多门户网站和大型的设计网站都会出现这个毛病。视觉方向的创新在很正式的网站中不会出现，毕竟人们是为了浏览信息的而不是为了探索新形式。设计公司的头部、主体和底部结构往往与众不同，也是为了页面的新颖性以吸引浏览者。科研网站注重学术性，版式很严

13、谨，结构简洁便于信息的浏览。作为设计中心的网站，主要针对的浏览者是与设计有关的人，他们大多使用1024分辨率的显示器，所以设计方案首选1024的页面宽度。框架数的选择因各方案异。首页内容量不宜多，控制在两个全屏内。视觉方向主要还是用纵向，也鼓励设计者提出创新方案。设计中心网站具有很强的设计性质，头部、主体、底部结构创新的重要性不可忽视。3.2.5 3.2.5 版式分析小结版式分析小结3 资料分析 3.2 版式分析3 资料分析 3.1色彩分析3.3.1 3.3.1 导航栏位置导航栏位置3.3.2 3.3.2 导航设计导航设计3.3.3 3.3.3 导航内容导航内容3.3.4 3.3.4 小结小结

14、 3.3 导航分析网页的导航栏位置定下来后，其网页的框架也就有了明确的方向 网页顶部横条 中分式横条居左式和居右式网页底部横条 3 资料分析 3.1色彩分析3.3.1 3.3.1 导航栏位置导航栏位置 3.1色彩分析 3.3 导航栏分析 3.1色彩分析 3.3 导航分析网页顶部横条网页顶部横条 一般为大型网站的用法，信息量较大（如：蓝色理想）3 资料分析 3.1色彩分析3.3.1 3.3.1 导航栏位置导航栏位置 3.1色彩分析 3.3 导航栏分析 3.1色彩分析 3.3 导航分析中分式横条中分式横条（处于 banner之下）居右：导航的左侧一般放置网站的形象如标志（超视觉网），有的甚至留空，

15、引起浏览者的视觉偏向。居中：均衡两端对齐，靠中对齐。居左：右侧留空（如妙想互联视觉设计论坛）网站搜索部分网站的登录。3 资料分析 3.1色彩分析3.3.1 3.3.1 导航栏位置导航栏位置 3.1色彩分析 3.3 导航栏分析 3.1色彩分析 3.3 导航分析居左式和居右式居左式和居右式 右边：国内公司网站和国外网站常用靠右边，比较新颖。左边：便于查找3 资料分析 3.1色彩分析3.3.1 3.3.1 导航栏位置导航栏位置 3.1色彩分析 3.3 导航栏分析 3.1色彩分析 3.3 导航分析网页底部横条网页底部横条 网页大于一屏时，底部横条导航可以方便地使浏览者到达不同的页面加入网站的次要链接，

16、丰富网站内容。3 资料分析 3.1色彩分析3.3.1 3.3.1 导航栏位置导航栏位置 3.1色彩分析 3.3 导航栏分析 3.1色彩分析 3.3 导航分析其他其他3 资料分析 3.1色彩分析3.3.1 3.3.1 导航栏位置导航栏位置中间：处在网页中间的导航栏比较少（集美大学）此类打破常规，用得比较灵活，多般用于个人主页或引导页面上。3.1色彩分析 3.3 导航栏分析 3.1色彩分析 3.3 导航分析形式 分隔元素 颜色 排版 导航特效 3 资料分析 3.1色彩分析3.3.2 3.3.2 导航设计导航设计 3.1色彩分析 3.3 导航栏分析 3.1色彩分析 3.3 导航分析形式形式纯文字：普

17、遍的网站都采取了文字形式导航。大小：字号大小一般比内容栏的文字稍大。字体：宋体众多图片：此类导航相对纯文字的较美观，但有个不足点就是影响了浏览速度。flash动画：娱乐性和个人网站的导航条多般使用FLASH动画。3 资料分析 3.1色彩分析3.3.2 3.3.2 导航设计导航设计 3.1色彩分析 3.3 导航栏分析 3.1色彩分析 3.3 导航分析分隔元素分隔元素 3 资料分析 3.1色彩分析3.3.2 3.3.2 导航设计导航设计无任何元素特殊文字、符号图标 3.1色彩分析 3.1色彩分析 3.3 导航栏分析 3.1色彩分析 3.3 导航分析颜色颜色 3 资料分析 3.1色彩分析3.3.2

18、3.3.2 导航设计导航设计导航条是整个网站中的一部分，颜色要融入整个网站的设计（而不是孤立的装饰效果）3.1色彩分析 3.1色彩分析 3.3 导航栏分析 3.1色彩分析 3.3 导航分析排版排版 3 资料分析 3.1色彩分析3.3.2 3.3.2 导航设计导航设计横向：纵向：3.1色彩分析 3.1色彩分析 3.3 导航栏分析 3.1色彩分析 3.3 导航分析导航特效 CSS样式静态：下横线：缩放：颜色切换：flash动画特效：吸引深浏览者并进一步加深浏览者的记忆，但对于一部分浏览器不兼容、不易于搜索引擎3 资料分析 3.1色彩分析3.3.2 3.3.2 导航设计导航设计 3.1色彩分析 3.

19、1色彩分析 3.3 导航栏分析 3.1色彩分析 3.3 导航分析大学网站大学网站3 资料分析 3.1色彩分析3.3.3 3.3.3 导航内容导航内容 3.1色彩分析 3.1色彩分析 3.3 导航栏分析 3.1色彩分析 3.3 导航分析综合网站综合网站3 资料分析 3.1色彩分析3.3.3 3.3.3 导航内容导航内容 3.1色彩分析 3.1色彩分析 3.3 导航栏分析 3.1色彩分析 3.3 导航分析设计网站设计网站3 资料分析 3.1色彩分析3.3.3 3.3.3 导航内容导航内容 3.1色彩分析 3.1色彩分析 3.3 导航栏分析 3.1色彩分析 3.3 导航分析公司网站公司网站3 资料分

20、析 3.1色彩分析3.3.3 3.3.3 导航内容导航内容 3.1色彩分析 3.1色彩分析 3.3 导航栏分析 3.1色彩分析 3.3 导航分析 从上诉各类网站的导航条内容可以看出，导航的内容和本身网站的性质是直接相关的，但具体内容还要根据浏览者做细部的改善。根据中心性质及上所分析，信息量不是很大，其导航条设计为中分式横条较好；因为网页内容不多，文件自然小些，所以在形式方面可采用图片切换；导航的颜色可根据网页的整体偏向。导航内容的提议：首页 中心简介 新闻资讯 科研成果 服务范围 设计书架 因为以后的可扩充性，我们还建议加入常见疑难 联系我们（其他设计网站）友情连接等类似内容。3 资料分析 3

21、.1色彩分析3.3.4 3.3.4 小结小结 3.1色彩分析 3.1色彩分析 3.3 导航栏分析 3.1色彩分析 3.3 导航分析3 资料分析 3.4 视觉元素3.4.1 3.4.1 背景背景 3.4.2 3.4.2 图标图标 3.4.3 3.4.3 图像图像3.4.4 3.4.4 动态影像动态影像 3.4.5 3.4.5 字体字体 3.4.6 3.4.6 按钮链接按钮链接3.4.7 3.4.7 表格表格3.4.8 3.4.8 文本文本3.4.9 3.4.9 小结小结背景图案：不少网站使用图案背景，比起直接填充背景色更丰富 （中国设计在线）3 资料分析3.4.1 背景 3.1色彩分析3 资料分

22、析 3.4 视觉元素背景图像：使网页更美观，但图片一般较大下载速度较慢3 资料分析3.4.1 背景 3.1色彩分析3 资料分析 3.4 视觉元素形式上小而精巧起到强调标题 引导视向 平衡视觉的作用3 资料分析3.4.2 图标 3.1色彩分析3 资料分析 3.4 视觉元素功能：主题性图像，针对单个栏目针对全页面3 资料分析3.4.2 图像 3.1色彩分析3 资料分析 3.4 视觉元素修饰性图像3 资料分析3.4.3 图标 3.1色彩分析3 资料分析 3.4 视觉元素功能：主题性 修饰性形式：鼠标事件 自播放3 资料分析3.44 动态影像 3.1色彩分析3 资料分析 3.4 视觉元素使用不超过三种

23、字体，文本汉字用宋体，英文用Arial 3 资料分析3.4.5 字体 3.1色彩分析3 资料分析 3.4 视觉元素动态样式：变色、下划线、缩放、位移、附加图形、变换、特殊静态样式：无变化，几乎没有网站使用 3 资料分析3.4.6 按钮链接 3.1色彩分析3 资料分析 3.4 视觉元素边框：粗细1-2px表格特效：当鼠标经过时变换背景色或强调边框3 资料分析3.4.7 表格 3.1色彩分析3 资料分析 3.4 视觉元素字号大小：普遍使用12px(9pt,小五号字)行距：15-18px3 资料分析3.4.8 文本 3.1色彩分析3 资料分析 3.4 视觉元素网页下载速度是关键，使用背景图案下载快。

24、图标运用要达到三个目的：强调标题，引导视向，平衡视觉。既要有针对全页面的高质量主题性图像，也要有针对栏目的主题性图像，图像色调保持一致，使页面丰富而统一。修饰性图像重要但不必要。用一些小巧的动态影像，最好的建议是与图标结合起来。使用不超过三种字体，汉字文本用宋体、英文用Arial。按扭链接样式：在以下动态样式中由各设计方案的风格来选择：变色、下划线、缩放、位移、附加图形、变换、特殊表格也是视各设计方案而定文本的字号大小普遍使用12px（9pt，小五号字）；行距一般在15-18px；一般情况不使用动画文本。3 资料分析3.4.9 小结 3.1色彩分析3 资料分析 3.4 视觉元素演讲完毕，谢谢观看！