浅谈网页设计

浅谈ByMargaret网页设计根本元素根本标准参考指南案例欣赏目录根本元素根本标准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一般设置〔1280x800、1366x768笔记本〕：1000px大屏设置〔分辨率大于1280x800〕：1200px案例：淘宝〔1000px〕，京东〔1210px〕，花瓣〔1407px〕根本标准2.文字&文本标准总体原那么：提高文字的辨识性和页面的易读性文字大小：建议使用12号+14号字体的混合搭配，13号也可酌情考虑，因为13号字体的不对称性，目前非主流。需突出的内容局部、新闻标题、栏目标题等多使用14号字体广告内容、辅助信息或介绍性文字等多使用12号字体防止大面积使用加粗字体特别注意：菜单尽量不使用12号加粗，这样会导致复杂的文字难以识别。多采用14号加粗根本标准2.文字&文本标准总体原那么：提高文字的辨识性和页面的易读性2．文字颜色：同一网站需要定出主文字颜色，特殊情况下可以有2种左右的辅助文字颜色一般情况下字体变化不要超过三种，假设有需要，可以尽量采用统一字体的不同字族。正文的文字颜色多采用深蓝色或深灰色。当使用其他颜色作为正文主色调时，平安起见可采用明度数值〔B〕不大于30%的颜色建议使用：根本标准2.文字&文本标准总体原那么：提高文字的辨识性和页面的易读性4.字体的选择中文字体：宋体，微软雅黑，幼圆英文字体：Arial(比例及字重〔weight〕和Helvetica极之相近;没有下划线贴边的问题；Q字没尾巴；字高整齐)根本标准2.文字&文本标准总体原那么：提高文字的辨识性和页面的易读性5．文字链接：文字链接形式不得超过3种颜色〔规定其中一种为主链接色〕。显性链接：大面积链接的网站，比方门户首页、内容列表页。多采取灰黑色、蓝色做全篇的链接色，默认时不显示下划线，光标经过时才显示下划线。隐性链接：对于混杂在页面文字中零散出现的文字链接，为了便于识别，默认时候可以出现下划线或使用辅助链接色，光标经过的时候，样式不变。根本标准2.文字&文本标准总体原那么：提高文字的辨识性和页面的易读性6．对齐网页设计中的〞对齐〞同传统的印刷排版中的对齐概念是一样的，并且同等重要。并不是说一切都应该在一条直线上，而是尽可能的保持一贯的整齐，不仅左对齐，也要尽量右对齐。首页上摘要无须空格。内容正文应该空两格。“豆腐块〞四周应该空留均匀适当的间隔根本标准3.模块化表现总体原那么：同一个网站采用的模块化表现应该是全部统一的。模块化的几类参考表现：单线

3-5个像素的圆角内边修饰根本标准4.页脚信息页脚信息按照从上到下的排列次序为:1、内部导航2、外部导航3、各类许可证、授权声明4、英文版权信息“Copyright©〞5、中文版权信息6、各类网络平安/工商证明/技术支持LOGO各链接间隔统一使用〞|〞建议采用12号字，禁止使用加粗字体根本标准5.搜索框设计标准文本框a.搜索框文本框的长度应适中，至少应提供显示10个中文字符的宽度b.搜索组件中使用的文本框必须为单行文本框c.高度不得低于18个像素帮助信息限定标签提示、标示性文字、热门关键词提示搜索按钮a.搜索按钮一般包含图标形式和文字形式两种b.使用图标形式时只能使用放大镜的图标，而不能采用其他元素。文字形式：搭配使用：图形形式：

根本标准6.广告设计标准禁止模仿任何windows标准控件，windows标准控件包括但不限于：鼠标指针、按钮以及窗口控制按钮等。不要使用按钮作长句广告参考指南1.网页根本版面设计类型一、骨骼型骨骼型是一种标准的理性的分割方法。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向通栏、双栏、三栏和四栏等。一般以竖向分栏为多。在图片和文字的编排上那么严格按照骨骼比例进行编排配置，给人以严谨、和谐、理性的美。骨骼经过相互混合后的版式，既理性、条理，又活泼而具弹性。参考指南1.网页根本版面设计类型二、满版型版面以图象充满整版，主要以图象为诉求，视觉传达直观而强烈。文字的配置压置在上下、左右或中部的图象上。满版型给人以大方、舒展的感觉，是商品广告常用的形式。参考指南1.网页根本版面设计类型三、上下分割型把整个版面分为上下两个局部，在上半部或下半部配置图片，另一局部那么配置文案。配置有图片的局部感性而有活力，而文案局部那么理性而静止。上下局部配置的图片可以是一幅或多幅。参考指南1.网页根本版面设计类型四、左右分割型把整个版面分割为左右两个局部，分别在左或右配置文案。当左右两局部形成强弱比照时，那么造成视觉心理的不平衡。这仅仅是视觉习惯上的问题，也自然不如上下分割的视觉流程自然。不过，倘假设将分割线虚化处理，或用文字进行左右重复或穿插，左右图文那么变得自然和谐。参考指南1.网页根本版面设计类型五、中轴型将图形做水平或垂直方向的排列，文案以上下或左右配置。水平排列的版面给人稳定、安静、和平与含蓄之感。垂直排列的版面给人强烈的动感。参考指南1.网页根本版面设计类型六、曲线型图片或文字在版面结构上作曲线的编排构成，产生节奏和韵律。参考指南1.网页根本版面设计类型七、倾斜型版面主体形象或多幅图版做倾斜编排，造成版面强烈的动感和不稳定因素，引人注目。参考指南1.网页根本版面设计类型八、对称型对称的版式给人稳定、庄重理性的感觉。对称有绝对对称和相对对称。一般多采用相对对称。以防止过于严谨。对称一般以相对对称居多。参考指南1.网页根本版面设计类型九、中心型重心有三种概念。1、直接以独立而轮廓清楚的形象占据版面中心。2、向心：视觉元素向版面中心聚拢的运动。3、离心：犹如将石子投入水中，产生一圈圈向外扩散的弧线运动。重心型版式产生视觉焦点，使强烈而突出。参考指南1.网页根本版面设计类型十、三角形在圆形、四方形、三角形等根本形态中，正三角形〔金字塔形〕是最具平安稳定因素的形态，而圆形和倒三角形那么给人以动感和不稳定感。参考指南1.网页根本版面设计类型十一、并置形将相同或不同的图片作大小相同而位置不同的重复排列。并置构成的版面有比较、说解的意味，给予原本复杂喧嚣的版面以次序、安静、调和与节奏感。参考指南1.网页根本版面设计类型十二、自由型自由行结构是无规律的、随意的编排构成，有活泼、轻快之感。参考指南2.网页配色色彩的三要素色相：明度：纯度：参考指南2.网页配色配色方法选出主色和辅助色根据网站功能、面向对象确定网站风格根据风格确定主色和辅助色改变主色和辅助色的明度和纯度，丰富色彩配合不同明度纯度的黑白灰作为补充色在小范围内选取与主色比照大的颜色作为强调色参考指南2.网页配色比照原那么色相比照〔主色与辅助色、强调色比照〕明暗比照面积比照参考指南2.网页配色比照调整比照恰当比照过强减弱比照增加隔膜别离元素比照过弱比照浑浊加大比照增加隔膜别离元素参考指南2.网页配色

根据主题选择蓝色调，页面整体清爽简洁。色

单色搭配

色彩丰富协调，橙色、黄色区块醒目不突兀色

类似色搭配参考指南2.网页配色参考指南2.网页配色