浅谈网页设计.pptx

浅谈By Margaret网页设计2024/5/22 周三1基本元素基本规范参考指南案例欣赏目 录2024/5/22 周三2基本元素2024/5/22 周三3基本规范1.网页基本宽度有效可视区域（单位：Px）屏幕一二三800600102476812801024IE6.0779（+21）432（+168）1003（+21）600（+168）1259（+21）856（+168）IE7.0779（+21）452（+148）1003（+21）620（+148）1259（+21）876（+148）Firefox2.0783(+17)417(+183)1007(+17)585(+183)1263(+17)841(+183)Opera9.0781(+19)461(+139)1005(+19)629(+139)1261(+19)885(+139)保守设置（1024x768台式电脑&平板电脑）：960px一般设置（1280 x800、1366x768笔记本）：1000px大屏设置（分辨率大于1280 x800）：1200px案例：淘宝（1000px），京东（1210px），花瓣（1407px）2024/5/22 周三4基本规范2.文字&文本规范总体原则：提高文字的辨识性和页面的易读性1.文字大小：建议使用12号+14号字体的混合搭配，13号也可酌情考虑，因为13号字体的不对称性，目前非主流。需突出的内容部分、新闻标题、栏目标题等多使用14号字体1.广告内容、辅助信息或介绍性文字等多使用12号字体2.避免大面积使用加粗字体特别注意：菜单尽量不使用12号加粗，这样会导致复杂的文字难以辨认。多采用14号加粗2024/5/22 周三5基本规范2.文字&文本规范总体原则：提高文字的辨识性和页面的易读性2文字颜色：同一网站需要定出主文字颜色，特殊情况下可以有2种左右的辅助文字颜色 一般情况下字体变化不要超过三种，若有需要，可以尽量采用统一字体的不同字族。正文的文字颜色多采用深蓝色或深灰色。当使用其他颜色作为正文主色调时，安全起见可采用明度数值（B）不大于30%的颜色建议使用：2024/5/22 周三6基本规范2.文字&文本规范总体原则：提高文字的辨识性和页面的易读性4.字体的选择中文字体：宋体，微软雅黑，幼圆英文字体：Arial(比例及字重（weight）和Helvetica极之相近;没有下划线贴边的问题；Q字没尾巴；字高整齐)2024/5/22 周三7基本规范2.文字&文本规范总体原则：提高文字的辨识性和页面的易读性5文字链接：文字链接形式不得超过3种颜色（规定其中一种为主链接色）。显性链接：大面积链接的网站，比如门户首页、内容列表页。多采取灰黑色、蓝色做全篇的链接色，默认时不显示下划线，光标经过时才显示下划线。隐性链接：对于混杂在页面文字中零散出现的文字链接，为了便于识别，默认时候可以出现下划线或使用辅助链接色，光标经过的时候，样式不变。2024/5/22 周三8基本规范2.文字&文本规范总体原则：提高文字的辨识性和页面的易读性6 对齐网页设计中的”对齐”同传统的印刷排版中的对齐概念是一样的，并且同等重要。并不是说一切都应该在一条直线上，而是尽可能的保持一贯的整齐，不仅左对齐，也要尽量右对齐。首页上摘要无须空格。内容正文应该空两格。“豆腐块”四周应该空留均匀适当的间隔2024/5/22 周三9基本规范3.模块化表现总体原则：同一个网站采用的模块化表现应该是全部统一的。模块化的几类参考表现：单线 3-5个像素的圆角 内边修饰2024/5/22 周三10基本规范4.页脚信息 页脚信息按照从上到下的排列次序为:1、内部导航 2、外部导航 3、各类许可证、授权声明 4、英文版权信息“Copyright”5、中文版权信息 6、各类网络安全/工商证明/技术支持 LOGO 各链接间隔统一使用”|”建议采用12号字，禁止使用加粗字体2024/5/22 周三11基本规范5.搜索框设计规范文本框a.搜索框文本框的长度应适中，至少应提供显示10个中文字符的宽度b.搜索组件中使用的文本框必须为单行文本框c.高度不得低于18个像素帮助信息限定标签提示、标示性文字、热门关键词提示搜索按钮a.搜索按钮一般包含图标形式和文字形式两种b.使用图标形式时只能使用放大镜的图标，而不能采用其他元素。文字形式：搭配使用：图形形式：2024/5/22 周三12基本规范6.广告设计规范禁止模仿任何windows标准控件，windows标准控件包括但不限于：鼠标指针、按钮以及窗口控制按钮等。不要使用按钮作长句广告2024/5/22 周三13参考指南1.网页基本版面设计类型一、骨骼型 骨骼型是一种规范的理性的分割方法。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向通栏、双栏、三栏和四栏等。一般以竖向分栏为多。在图片和文字的编排上 则严格按照骨骼比例进行编排配置，给人以严谨、和谐、理性的美。骨骼经过相互混合后的版式，既理性、条理，又活泼而具弹性。2024/5/22 周三14参考指南1.网页基本版面设计类型二、满版型 版面以图象充满整版，主要以图象为诉求，视觉传达直观而强烈。文字的配置压置在上下、左右或中部的图象上。满版型给人以大方、舒展的感觉，是商品广告常用的形式。2024/5/22 周三15参考指南1.网页基本版面设计类型三、上下分割型 把整个版面分为上下两个部分，在上半部或下半部配置图片，另一部分则配置文案。配置有图片的部分感性而有活力，而文案部分则理性而静止。上下部分配置的图片可以是一幅或多幅。2024/5/22 周三16参考指南1.网页基本版面设计类型四、左右分割型 把整个版面分割为左右两个部分，分别在左或右配置文案。当左右两部分形成强弱对比时，则造成视觉心理的不平衡。这仅仅是视觉习惯上的问题，也自然不如上下分割的视觉流程自然。不过，倘若将分割线虚化处理，或用文字进行左右重复或穿插，左右图文则变得自然和谐。2024/5/22 周三17参考指南1.网页基本版面设计类型五、中轴型 将图形做水平或垂直方向的排列，文案以上下或左右配置。水平排列的版面给人稳定、安静、和平与含蓄之感。垂直排列的版面给人强烈的动感。2024/5/22 周三18参考指南1.网页基本版面设计类型六、曲线型 图片或文字在版面结构上作曲线的编排构成，产生节奏和韵律。2024/5/22 周三19参考指南1.网页基本版面设计类型七、倾斜型 版面主体形象或多幅图版做倾斜编排，造成版面强烈的动感和不稳定因素，引人注目。2024/5/22 周三20参考指南1.网页基本版面设计类型八、对称型 对称的版式给人稳定、庄重理性的感觉。对称有绝对对称和相对对称。一般多采用相对对称。以避免过于严谨。对称一般以相对对称居多。2024/5/22 周三21参考指南1.网页基本版面设计类型九、中心型 重心有三种概念。1、直接以独立而轮廓分明的形象占据版面中心。2、向心：视觉元素向版面中心聚拢的运动。3、离心：犹如将石子投入水中，产生一圈圈向外扩散的弧线运动。重心型版式产生视觉焦点，使强烈而突出。2024/5/22 周三22参考指南1.网页基本版面设计类型十、三角形 在圆形、四方形、三角形等基本形态中，正三角形（金字塔形）是最具安全稳定因素的形态，而圆形和倒三角形则给人以动感和不稳定感。2024/5/22 周三23参考指南1.网页基本版面设计类型十一、并置形 将相同或不同的图片作大小相同而位置不同的重复排列。并置构成的版面有比较、说解的意味，给予原本复杂喧嚣的版面以次序、安静、调和与节奏感。2024/5/22 周三24参考指南1.网页基本版面设计类型十二、自由型 自由行结构是无规律的、随意的编排构成，有活泼、轻快之感。2024/5/22 周三25参考指南2.网页配色色彩的三要素色相：明度：纯度：2024/5/22 周三26参考指南2.网页配色配色方法选出主色和辅助色根据网站功能、面向对象确定网站格调根据格调确定主色和辅助色改变主色和辅助色的明度和纯度，丰富色彩配合不同明度纯度的黑白灰作为补充色在小范围内选取与主色对比大的颜色作为强调色2024/5/22 周三27参考指南2.网页配色对比原则色相对比（主色与辅助色、强调色对比）明暗对比面积对比2024/5/22 周三28参考指南2.网页配色对比调整对比恰当对比过强减弱对比增加隔阂分离元素对比过弱对比浑浊加大对比增加隔阂分离元素2024/5/22 周三29参考指南2.网页配色根据主题选择蓝色调，页面整体清爽简洁。色色单色搭配2024/5/22 周三30色彩丰富协调，橙色、黄色区块醒目不突兀色色类似色搭配参考指南2.网页配色2024/5/22 周三31参考指南2.网页配色色彩丰富，色相对比强烈；橙色、黄色区块醒目补色搭配2024/5/22 周三32参考指南2.网页配色以红色为主色调的暖色能够增加食欲，在绿色的搭配下使中间的产品更加突出分裂补色搭配2024/5/22 周三33参考指南2.网页配色原色搭配2024/5/22 周三34参考指南3.网页风格1.版面式2.大幅图片3.Web2.04.Metro&扁平化5.个性化2024/5/22 周三35案例分析http:/ 周三36谢 谢！浅谈By 邱爽网页设计2024/5/22 周三37