视觉设计指南Word文档格式.docx

1、强化整体布局。版面布局与色彩使用需协调一致，相互关联。5）视觉层次通过理解不同任务对用户的重要程度而为这些任务建立一个视觉层级。一个重要的任务应该使用特别的视觉标记。可以用相对位置，颜色对比和图形大小来区分。6）清晰的品牌定位牌特性为：打折信息、交友互动。7）人性化使用合理的设计，提高用户的效率，提升用户体验感。2页面结构标准的页面分为三部分：Header、Body、Footer。网站绝大部分页面应使用统一的Header与Footer。Body部分在版面分割上可分为三种形式：单一结构；左右结构；三栏结构。形式的选择应根据信息表达的需要决定。原则上，一个页面的版面安排，能够加强所需要表达的概念与

2、目的。在看一个页面时，应该把整个组合看做是一个统一的整体。在进行页面配置时，应注意版面的平衡与留白空间的处理。应该根据图像与背景的关系、对比的关系、类似的原理、以及比例的关系，将整个页面空间以最有效的方式加以分配、组织。 一个系列的页面在构成形式上应该保持一致。体现常用功能的视觉元素，在不同的页面应尽量放置在相同的位置。3页面尺寸与间距标准3.1普通页面尺寸1）使用绝对尺寸定义页面宽度时，为980px。2）当页面需要放置的内容过多，或者内容不可预知，可以使用100%页面宽度。例如BOSS管理后台相关页面。使用100%宽度时请注意：尺寸不能超过层框架的尺寸，且左右留10px以上的空白。3）应考虑

3、1024x768分辨率下的效果是否美观和谐。4）页面居中显示。5）Header与Footer上下与浏览器边框的距离为10px。6）Body与Header、Footer的间距为12px。7）栏与栏之间的距离为10px。Body区域内容的间距不受此限，但应考虑整体性。3.2邮件页面尺寸邮件页面宽度为 680px。3.3活动页面活动页面宽度根据设计效果而定，但最大尺寸不要超过980px; 4HeaderHeader是最能树立网站统一形象的区域，必须遵循一致性原则。Header必须包含网站LOGO。注意以下几种Header的不同使用范围。4.1基本Header基本Header包含元素：1）LOGO 1

4、80pxX50px2）用户登录信息（如果用户已经登录）3）网站信息导航4）网站域名基本Header提供网站主要功能的入口，帮助用户快速跳转到相应页面，提高操作效率。主要用在首页，折扣列表及其他已有搜索入口的页面。但不包括一下情况：1）注册和登录页面2）首页页面以及分频道页面4.2简化Header 01简化Header01将“网站信息导航”替换为用户个人信息，避免用户分散注意力，让他可以专心完成既定的目标。用于1）会员中心2）商户中心3）功能操作页面4）认证流程5）登录页面可以个性化设计5Footer每个页面都必须包含Footer。Footer包含内容首页Footer1）导航信息2）网络安全举报

5、中心连接及网络安全警示3）版权信息子页面footer2）版权信息 三级页面footer1） 版权信息6文字6.1字体与大小1） 中文标题：宋体，14px，粗体；2） 中文正文：宋体，12px，正常体；3） 英文标题：Arial，14px，粗体；4） 英文正文：Arial，11px，正常体。5） 数字：Arial，12px，正常体。特殊字体须用图片代替。示意图：6.2行距1）列表行距23px，文字大小14px。2）所有正文行距为 18px。6.3文字颜色一个页面内的字体颜色控制在3种以内。文字颜色应与页面整体颜色协调，同时与背景明显区分。 如无特别需要，文字颜色应为 #444444次要文字颜色：

6、#666666突出提示要色：#FF6600次要补充说明颜色：#9999996.4链接文本列表链接文本link: #444444hover: # FF6600visited: #666666特定情况可以使用其它颜色的链接，但网站绝大部分功能性链接都应是默认样式。 如：特殊超链接文本ink: # 06F # 666666 #06F7色彩色彩给人的印象迅速、深刻、持久。色彩在视觉上容易使网站形象增强感染力，能强有力地吸引用户的注意力。7.1标准色待定，以视觉设计师首页效果而定7.2同类色的选用7.3色彩使用说明同一页面上应只有一种主色调。使用的色彩不宜超过3种。色彩是能够传达信息的。同时，色彩会对人

7、的感情产生作用。所使用的色彩应与传达的信息具有相关性。例如，喜庆的节日，一般会选用暖色调。注意灰色的使用。灰色能够缓冲鲜艳的色彩的冲击，缓减视觉疲劳。7.4其他色彩的使用因为不可避免的会使用到其他的色彩。色彩的选用应与整个网站的色调协调统一，不可任意使用。7.5广告文字的色彩广告上文字的色彩最多不超过3种。8图标（icon）如需使用图标，应配以相应文字，以免表达不清。图标不应过大。建议尺寸为：120x120px；100x100px；64x64px；32x32px； 16x16px。一个系列的图标尺寸必须一样。特殊情况下可以有所区别，但不应差异太大。保持整体性。图标的含义应与传达的信息有一定联系

8、。网站的图标风格须保持一致。9按钮（button）9.1系统按钮的使用在涉及到表单提交的流程尽量使用系统默认按钮，以便用户识别。系统按钮上的文字只能使用以下两种尺寸：12px；14px。9.2图片按钮的使用为了突出显示，或者与页面整体协调一致，需要使用图片按钮。1） 按钮的高度应尽量不超过35px。2） 按钮的背景不应干扰文字。背景与文字的颜色应有明显区别。3） 图片按钮风格可以根据实际情况有所变化。但必须与网站整体风格协调一致。 同一系列页面的按钮样式应保持一致。4） 无任何链接不要做成按钮样式。5）超链接不可做成按钮。9.3系统按钮的样式定义系统按钮一般不建议定义CSS样式。除非页面风格需

9、要，而且在不影响用户识别的情况下，可以改变系统按钮的外观。10图片10.1图片处理相同的产品里的图片风格应该一致。例如阴影的方向，厚度，模糊度等都应该统一。图片非常容易吸引视觉焦点，所以要注意图片应与页面整体效果协调。10.2动画一屏之内不应有2处以上的动画闪动。10.3图片格式选择色彩单纯的图片适合用GIF格式，比如图形按钮，图标等；色彩丰富的图片适合用JPG格式，比如照片等。11表单11.1间距与对齐方式行与行之间间距相同。说明文字应使用中文全角冒号。纵向标题项右对齐，内容项左对齐。11.2字体title：宋体14px 粗体内容：宋体 12px 正常体11.3文本输入框通常情况文本输入框为

10、不带任何CSS样式的标准状态。广告活动页面可以使用自定义的样式。应注意页面的整体协调。12错误信息页面12.1错误信息页面的必要性与注意事项1）当错误发生时提供及时的帮助。2）帮助用户恢复和改正错误。3）要给出发生错误的原因，并告诉用户解决办法。4）错误信息应简单明了，使用用户容易理解的语言阐述。5）尽量在用户提交信息之前检查错误并提示错误。6）错误页面应保持一致的结构。7）提升用户体验，提高网站满意度和品牌形象。12.2错误信息文字样式1）错误信息标题：宋体，14px，#FF0000，粗体；2）错误信息正文：宋体，12px，#FF0000；3）解决办法：宋体，12px，#333333；12.3错误信息图标样式1）相同性质的错误信息使用一致的图标；2）图标尺寸最大不超过120x120px；12.4当前页面错误即时提示与单独页面错误提示1）即时错误提示背景色：# fff2e9边框色：# ff6600文字颜色：#333333间距：文字距离边框 5px2）单独页面错误提示13广告13.1广告风格1）色彩亮丽，时尚。注意用色与页面风格协调；2）避免过于卡通；3）标题突出，醒目，容易辨别；4）注意细节。13.2广告尺寸与文件规格待定