Web开发和技术设计四

Web 开发与技术设计开发与技术设计第四讲第四讲 网站设计（三）网站设计（三）提纲 n定位你的网站主题和名称n网站的形象设计与CI 策划n网站的栏目和版块n网站的目录结构和链接结构n网站的整体风格与创意设计n版面布局与首页的设计n色彩的搭配n网页中的字体、插图处理、动画与广告n考虑不同的浏览器和分辨率 版面布局的过程 n构思构图（草案）。目的是将脑海里朦胧的想法具体化，变成可视可见的轮廓。n设计方案（粗略布局）。除了文本文字可以不必认真，以字符象征性地代替以外，其它所有的内容都要接近将来的网页效果。n量化描述（定案）。即把网页设计方案中的视觉元素的各项参数确定下来。构思构图（草案）n草图的目的是将脑海里朦胧的想法具体化，变成可视可见的轮廓。n草图也许是几条线、几个色块，但它是进一步深入细化的基础，决定着将来网页的基本面貌。n草图类似一个创意，它是连结艺术思想与作品制作的桥梁，网页设计的精髓正是在这时显露出来。n新建页面就象一张白纸，没有任何表格，框架和约定俗成的东西，你可以尽可能的发挥你的想象力，将你想到的景象画上去。你可以用一张白纸和一支铅笔，当然也可以用作图软件把你的最初创意画出来。构思构图（草案）用笔勾画网页的轮廓草图及布局安排。上图为北京希望电子出版社BHP网站网页设计草图之一构思构图（草案）n草图的构思、创意的产生往往来自于一些现有设计作品、图形图像素材的组合、改造和加工。n汲取成功作品中的一些视觉元素及其组合方式，加入自己的新元素形成新的组合（有些是素材本身规定了的），其思维方式是借鉴重组和逆向模仿。n借鉴重组是加进或减少组合的元素进行新的组合；n逆向模仿是对视觉元素的量(描述参数)进行改变，至于变化到什么程度，需要专业的眼光才能把握住。构思构图（草案）逆向模仿是利用反向思维来完成设计和创作的。把现有作品的视觉元素的性质加以改变、重组，与自己的素材结合而产生新的设计作品。比如原有作品的背景色是黑色的，你把它改成白色就会变成另外一个样子；再比如，某个网页的图像位置放在左边、文字在右边，你只要将图文左右倒置一下就与原作的布局有所不同。网页布局由各个元素（形态、位置、色彩、字体、疏密）组合而成的，各个元素均可被尺寸、角度等程度参数所描述。如果将其中的一个或多个视觉元素的描述参数加以改变，就可能实现新的设计作品。以灰色为底色的网页效果 以黑色为底色的网页效果设计方案（粗略布局）n首先将需要放置的功能模块安排到页面上，主要包含网站标志、主菜单、栏目条、广告位、搜索器、计数器等。必须突出重点，将网站标志、主菜单等最重要的模块放在最显眼最突出的位置，然后再考虑次要模块的排放。n各个功能模块的样式位置确定之后，需要认真研究文稿与图形图像的编排，按照平面设计的规律做出网页的基本样式。可以继续用画笔尺子创作，也可以运用Photoshop Illustrator Pagemaker 或者Frontpage 等软件在显示器上进行。量化描述（定案）n对网页外形尺寸的确定。一般计算机显示器的分辨率设置为800600，网页的横宽最好不要超出800 像素，网页的长度、高度可根据内容的需要而定。n确定设计方案上的所有图形图像的尺寸,其单位也是用像素pixels 表示。同时标明该图在网页中的相对位置。n各个字体字号的描述及其所在页面位置的参数。有些作为标题的文字其实已经作为图形图像对待了，这里的文字仅仅指文本的字体和由计算机程序产生的标题字，同时也应说明字体的HTML 的色彩数值。n各种色彩的数值的确定。除图形图像以外，设计方案中的标准色、底色、文字的颜色，都应该以RGB模式数值或HTML语言数值表示出来。n估算一下页面的大小。根据经验或参照类似的在线网页，概算一下将来的网页大约有多少个KB。一般每页上的图文KB 数加起来不要超出50KB，否则就会影响显示速度。版面布局的原则 n平衡 指画面的图像、文字的视觉分量在左右、上下几个方位基本相等，分布匀称，能达到安定、平稳的效果，过于平衡的画面难免有呆板的感觉，有时需要在局部打破平衡或对称。图为海尔网校早期版本的网页，其用色块的分布保持视觉平衡。版面布局的原则 n呼应 在不平衡的布局中的补救措施，使一种元素同时出现在不同的地方，形成视觉上的相互联系。如图的右侧用红色的字与左侧的红色相呼应。Adobe 公司的页面。红色的字在版式中起到全局呼应、平衡视觉、活跃画面的作用版面布局的原则 n对比 所谓对比，就是利用不同的色彩、形态、线条等视觉元素相互并置对比,造成画面的多种变化,达到丰富视觉的效果。形态对比:圆与方的对比版面布局的原则 n疏密 疏：是指画面中形式元素稀少甚至空白的部分；密：是指画面中形式元素繁多的部分。在网页设计中疏密就是空白的处理运用。十分具有视觉节奏感的版式设计，左侧上下两块空白对于调节画面节奏起到重要作用。版面布局的原则 太满、太密、太平均是任何版式设计的大忌，适当的疏密搭配可以使画面产生节奏感，体现出网站的格调与品位。图中左上方的密与右下方的疏形成一种视觉上的节奏感奥迪公司的网页以疏体设计为主，显得宽敞舒展，有一种宫廷的豪华气派，象牙灰也透着一种贵族味道。设计原则的几个补充n网页的白色背景太虚，则可以加些色块；n版面零散，可以用线条和符号串联；n左面文字过多，右面则可以插一张图片保持平衡。版面布局的样式 n“T”字型结构布局 所谓“T”字型结构，就是指页面顶部为主菜单，下方左侧为二级栏目条，右侧显示具体内容的布局。版面布局的样式 n“同”字型结构布局 在“T”字型结构的基础上，将右侧设为链接栏目条，屏幕中间显示具体内容的布局。版面布局的样式“T”字与“同”字布局的n优点是：页面结构清晰、左右对称呼应、主次分明，因而采用这两种布局的网页得到非常普遍的运用。n缺点是：太规矩、呆板，如果细节色彩上缺少变化调剂，很容易让人感到单调乏味。版面布局的样式n“国”（“口”）字型布局 国字型布局是在同字型布局基础上演化而来的，在保留同字型的同时，在页面的下方增加一横条状的菜单或广告。版面布局的样式“国”（“口”）字型布局的n优点是：充分利用版面，信息量大，与其它页面的链接多、切换方便；n缺点是：页面拥挤、四面封闭、令人感到憋气。原网易壁纸站栏目条设计得很含蓄，网页近似一个镜框版面布局的样式 n自由式（“POP”）布局 自由式布局打破了“T”字型、同字型、国字型布局的菜单框架结构，页面布局像一张宣传海报，以一张精美图片作为页面的设计中心，菜单栏目自由地摆放在页面上，常用于时尚类站点，比如奔驰汽车公司的网页和 ELLE.com 网站的网页。优点是：漂亮、吸引人；缺点就是：显示速度慢、文字信息量少。ELLE 是一个著名的品牌，在中国也可看到ELLE 时装和杂志。ELLE 产品具有轻松 浪漫的风格特点。网页设计也与 之一脉相承 作为一个时尚站点，美观、漂亮、赏心悦目是最重要的因素。因而ELLE 的网页设计自由而多变。版面布局的样式 n左右对称布局 顾名思义，采取左右分割屏幕的办法形成的对称布局。在左右部分内，自由安排文字、图像和链接。点击左边的链接时，在右边显示链接的内容。它的优点是：既活泼、自由，又可显示较多的文字、图像；缺点是：将两部分有机的结合比较困难，不适于信息、数据量巨大的网站。版面布局 的样式n“三”型布局。这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。苹果公司的主页突出其现代感，栏目菜单处理成玻璃质感，与下面的插图和谐一致。版面布局的技巧 n加强视觉效果n加强文案的可视度和可读性n统一感的视觉n新鲜和个性是布局的最高境界 首页的设计 “良好的开端是成功的一半”，在网站设计上也是如此，首页的设计是一个网站成功与否的关键。人们往往看到第一页就已经对你的站点有一个整体的感觉。是不是能够促使浏览者继续点击进入，是否能够吸引浏览者留在站点上，全凭首页设计的“功力”了。所以，首页的设计和制作是绝对要重视和花心思的。一般首页设计和制作占整个制作时间的40%。你宁可多花些时间在早期，以免出现全部做好以后再修改，那将是最浪费精力的事。首页的设计 n首页，又叫主页，是浏览者访问一个站点时看到的第一页。通过它的链接，进而浏览站点的其它网点。一般情况下，首页的名字叫做index.htm。n西方的出版界流传有这样一句话：“Cover sells book”意思是：封面卖书。n首页就好比是书的封面，首页的设计是一个网站能不能吸引人的关键，人们往往看到首页就已经对你的站点有一个整体的感觉，是不是能够促使浏览者继续点击进入，是否能够吸引浏览者留在站点上，全凭首页设计的水平了。首页的类型 n书籍封面式首页。有些大型网站往往有一个书籍封面式的首页，上面只有一个进入的链接，点击之后才进入到网站。这种首页设计精美，非常考究，给人以雍容大度的气派。首页的类型 n期刊杂志式的首页 与书籍封面式首页相似，但在首页上有站点全部内容的目录索引，图文并茂，看上去就像是期刊杂志的封面，既漂亮又使网站的主要内容一目了然，是一种值得推荐的形式。首页的类型 n报纸式的首页 许多电子商务网站、搜索引擎网站和新闻信息网站更加务实，为了速度和操作的简便，往往采用报纸式的首页设计，将栏目索引、功能模块、具体内容一并显示在首页，看上去就像一张报纸的头版一样。首页设计建议 为站点设计什么样的首页，要看具体情况而定。如果是艺术类的站点，或者可以确信内容独特，可以吸引浏览者进一步点击进入的站点，是可以设计一个书籍封面式的首页。如ELLE.com 具有很强的欣赏性，忠实的客户群，有必要以此来显示自己的特色和品位，否则的话，书籍封面式的首页并不会给你的站点带来什么好处。电子商务网站要的首先是上网浏览的速度、有价值的信息，如果客户等待几分钟只看到一幅画面，那么他是不会有耐心等待进入下一页的。首页设计建议一般的电子商务站点的首页需要设置这样一些功能模块和栏目：n网站名称及标志(logo)n会员注册(enroll)n产品目录(manufacture)n服务项目与条款(sever)n关于本站announcementn搜索器(search)n广告条(banner)n计数器(count)有些网站还开设新闻栏目(whats news)、信息咨询(consult)、免费电子邮箱(free E-mail)等等，至于各个首页选择哪些模块，与网站想要实现的功能有关。网页的色彩选择和搭配 网页的色彩选择和搭配是网页设计重点之一，用什么色彩才能最好的表达出网站的内涵？网页的色调、背景、文字、图标、边框、链接应该采用什么样的色彩，应该如何搭配，都是网页设计一开始就必须考虑的问题。色彩的运用在网页中的作用真是太重要了，有些网页看上去十分典雅、有品位，令人赏心悦目，但是页面结构却很简单、图象也不复杂，这主要是色彩运用得当。色彩的基本概念 自然界中的颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色，而其他所有颜色均属于彩色。任何一种彩色具有三个属性：n色相(Hue)：也叫色泽，是颜色的基本特征，反映颜色的基本面貌。n饱和度(Saturation)：也叫纯度，指颜色的纯洁程度。n明度(Brightness或Lightness或Luminousity)：也叫亮度，体现颜色的深浅。非彩色只有明度特征，没有色相和饱和度的区别。色彩的三原色 生活中我们所看到的颜色是光的吸收与反射而产生的，红、黄、蓝是三种最基本的颜色，又称三原色。原则上，所有的色彩都可以用这三种色彩调和而成。视频方式色彩的基本色与通常所说的基本色有所不同，电脑屏幕的色彩是由RGB（红、绿、蓝）三种色光所合成的，而我们可通过调整这三个基色就可以调校出其它的颜色，例如红色是(R：255,G：0，B：0)，十六进制的表示方法为(FF0000)。白色为（R：255，G：255，B：255），十六进制的表示法是(FFFFFF)。我们在网页编辑器里经常看到的描述语言“bgColor=#FFFFFF”就是指背景色为白色。电脑影像的色彩 电脑影像的色彩是经由位元（BIT）的计算和组合而来，单纯的黑白图像是最简单的色彩结构，在电脑上用到位元的资料，虽说只有黑色和白色，但仍能透过疏密的矩阵排列，将黑与白组合成近似视觉上的灰色调阶。色彩的三原色n灰阶（Grayscale）的影像共有256个阶调，看起来类似传统的黑白照片；除黑、白二色之外，尚有254种深浅的灰色，电脑必须以8位元的资料，显示这256种阶调。n全彩（Fullcolor）是指RGB三色光所能显示的所有颜色，每一色光以8位元表示，各有256种阶调，三色光交互增减，就能显示24BIT的1677万色（256*256*256=16,777，216），这个数值就是电脑所能表示的最高色彩，也就是通称的RGBTureColor。n8位元色是指具有256种阶调，或256种色彩的影像，而我们在常常见到GIF格式的图象文件就是带有256种色彩的图象文件。n若要把24位元的全彩图片转成256色的8位元，通常必须经过索引的步骤（Indexed），也就是在原本24位元的1677万色中，先建立颜色分布表（histogram），然后再找出最常用的256种颜色，定义出新的调色盘，最后再以新色盘的256色取代原图。每一位元色包含多少种颜色 n1位 2种颜色n2位 4种颜色n4位 16种颜色n8位 256种颜色n16位 65536种颜色n24位 1677万种颜色n32位 1677万种颜色和256级灰度值n36位 687亿种颜色和4096级灰度值显示模式 通常所称的标准VGA显示模式是8位显示模式，即在该模式下能显示256种颜色；而高彩色（Hi Color）显示是16位显示模式，能显示65536种颜色，也称64K色；还有一种真彩色（True Color）显示模式是24位显示模式，能显示1677万种颜色，也称16M色，这是现在一般PC机所能达到的最高颜色显示模式，在该模式下看到的真彩色图象的色彩已和高清晰度照片没什么差别了。色相 在图形图像处理软件Photoshop 的PickColour 取色器窗口，如果将取色条变成环形，首尾相接，色彩按“红、黄、绿、蓝、红”依次过度渐变，就可以得到一个色彩环。我们将色环中的色彩叫色相。色相能够给人以冷热感觉上的联想，蓝色、绿色给人的感觉是冰冷的，人们将它们称为冷色；红色、黄色给人的感觉是火热的，人们将它们称为暖色；黑、白、灰色属于中性偏冷色。色性n色彩的冷暖感觉叫做色性。色性是按冷暖感觉区分色相的一种方法，冷暖色的划分将颜色看作两大类型，有助于我们在网页的色调设计时注意色调基本倾向，便于把握网页的整体效果，达到和谐美观的目的。在通道（channels）的浮动窗口里逐一打开它各个色彩通道，每一种原色都呈现为不同的黑（灰）色，这里的黑（灰）色叫做色彩的明度。色彩与人的情绪 色彩与人的情绪 每种色彩在纯度、明度、大小、形状上略微变化就会产生不同的感觉网页色彩搭配的原则 n色彩的合理性。网页的色彩要漂亮，引人注目，同时，还要照顾到人的眼睛的生理特点，不要用大面积的高纯度色相，它容易使人的眼睛疲劳。n色彩的独特性。要有与众不同的色彩搭配，衬托出网站的个性，使得大家对你的印象深刻。n色彩的艺术性。色彩设计属于艺术形式的范畴，按照内容决定形式的原则，色彩应服务于网站的内容，和网站的气氛相适应。蓝色灰色常常用于工业高科技企业如奥迪公司的网页大量使用灰色显得十分高贵网页色彩搭配的技巧 n同类色的应用。同类色是由一种色彩呈现出的不同透明度或者饱和度(通俗地说就是将色彩变淡或加深)时而产生色彩系列。同类色的应用 由这样的色彩搭配出来的页面看起来统一和谐，有层次感，比较适合于技术性专业性站点。网页色彩搭配的技巧 n邻近色的应用。先选定一种色彩，然后选择它在色谱里相邻区域的颜色，如蓝色和绿色互为邻近色，黄色与橙色互为邻近色。邻近色搭配可以使整个页面色彩丰富但不花哨。邻近色的应用网页色彩 搭配的技巧n对比色的应用。原色、饱和度较高的色彩搭配使用即为对比色。各种色彩均可作为对比色使用，但应以一种颜色为主调，使它占有较大的面积，同时辅以对比色起到点缀丰富的作用。网页色彩搭配的技巧 n黑色和其他彩色。一般印刷品较少用大面积的黑色，而网页设计中以黑色为底的网站比较多见，尤其是一些艺术网站更多。在RGB 色彩模式中，黑色是透明的感觉，它很容易与其他高纯度的原色相协调，制作出新颖别致的网页图。网页中的字体 n常用的字体包括宋体、黑体、楷体、仿宋体，还有其它行书、隶书、魏碑等。n艺术字体的种类也很多，已经做成供计算机选择安装的汉字字体就有上百种之多。n计算机能不能显示某种字体，主要取决于字库里是否安装了这种字体。字号 n印刷品的字号是指字体物理尺寸的大小，计算机的字号指的是字体在显示器上的显示尺寸大小，网页字号大小直接关系到阅读效果和页面容量。n在word 汉字处理软件里，字号从初号、一号到八号，共有十六种之多。同时，字号还有一种以pt（磅）为单位的，从5 pt 到72 pt 共21 种之多。n在网页设计中，中文字体的字号以9pt、11pt 的字号最为常用，9pt 是公认的字号，绝大多数网页都用它。标题字字号 标题字字号大小建立在整体版面设计基础上，版面设计从文稿内容出发，排出传达意图的强弱层次，从传达信号秩序上区分出突出与克制、醒目与隐晦。在同一页面中，大字号则突出醒目，黑白对比鲜明，分量重，这样的处理一般用于标题和重点部分。同时一篇文稿文字可形成一块灰色，色调连贯性好，适宜长期阅读，可以看成是网页色彩搭配中的一部分。用作图形图像的字体 n由于一般计算机用户字库的字体太少，网页设计师想用字体在传达信息的同时又起到装饰作用，不得不使用其它的艺术字体，但必须将字体做成图形图像格式，尤其是用软件制作的金属字、立体字等等。这种字体主要用于网站名、广告、菜单、链接以及重要的文章标题。字体的感情色彩 n一般网页文字字体是稳定的，阅读要求识别轻松，浓淡适宜，而标题字部分则相当于广告性用字，如化妆品广告用字，它注重花哨、时尚、风范来渲染女性色彩，这种字体参与表现的尺度是无限的，那怕在识别中带有游戏性都是合理的，因为它只有瞬间的视觉传达。无论如何，网页字体必须积极参与信息的传达和内容表现，一旦影响了阅读流畅性就是错误的，因为它超越了网页的基本原则，妨碍了信息的传达，只在为艺术而艺术。网页中的动画n网页设计与书籍报刊版式设计的最大不同在于，网页的版式是可以运动变化的，网页中的插图可以像电视动画片一样真实生动，因而有人用“情景设计”来描绘将来的网页设计。n研究发现，无论人的视觉还是动物的视觉，总是最先注意到运动着的东西，在一个静止的网页中，如果有一处运动的图形图像，那么浏览者的注意力首先被它所吸引。n网页上可以置放动画也是网络技术一个明显的优势，往往一个小小的动画就能使整个网页生动活跃起来。n网页上置放动画应该少而精，一帧网页上一般放一幅动画为宜，二幅、三幅则相互影响，较难处理搭配，如果再多的话，整个网页便会令人眼花缭乱，反而干扰阅读。动画制作的工具 nGIF Animation。它的原理很像播放幻灯片，把画（编辑处理）好的几幅图片按顺序和时间间隔循环往复，就形成了最简单的动画。nAdobe Image Ready。能很轻松简便地制作GIF 动画，其原理制作效果都和GIF Animation 一样。nJava Applet。使用Java，程序设计人员可以创建生成能够调用图片和声音的多媒体应用小程序，从服务器下载到浏览器上，并可在用户端计算机上运行。nFlash。动画是矢量的；互动式的动画体积很小。网页动画设计 目前网上可看到的动画广告有些是文字的运动效果，无论是Flash 还是GIF Animation,都可以轻松地使文字运动起来，Flash 动画另外一个特点就是必须安装插件PLUG-IN，才能被浏览器所接受！当然这也避免了浏览器之间的差异，使之一视同仁。因此，一个网站采用了Flash 的文件后，必须在首页加以说明，最好为浏览者提供一个PLUG-IN 插件的下载。