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

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

《视觉设计指南Word文档格式.docx》由会员分享，可在线阅读，更多相关《视觉设计指南Word文档格式.docx（13页珍藏版）》请在冰点文库上搜索。

强化整体布局。

版面布局与色彩使用需协调一致，相互关联。

5）视觉层次

通过理解不同任务对用户的重要程度而为这些任务建立一个视觉层级。

一个重要的任务应该使用特别的视觉标记。

可以用相对位置，颜色对比和图形大小来区分。

6）清晰的品牌定位

牌特性为：

打折信息、交友互动。

7）人性化

使用合理的设计，提高用户的效率，提升用户体验感。

2页面结构

标准的页面分为三部分：

Header、Body、Footer。

网站绝大部分页面应使用统一的Header与Footer。

Body部分在版面分割上可分为三种形式：

单一结构；

左右结构；

三栏结构。

形式的选择应根据信息表达的需要决定。

原则上，一个页面的版面安排，能够加强所需要表达的概念与目的。

在看一个页面时，应该把整个组合看做是一个统一的整体。

在进行页面配置时，应注意版面的平衡与留白空间的处理。

应该根据图像与背景的关系、对比的关系、类似的原理、以及比例的关系，将整个页面空间以最有效的方式加以分配、组织。

一个系列的页面在构成形式上应该保持一致。

体现常用功能的视觉元素，在不同的页面应尽量放置在相同的位置。

\

3页面尺寸与间距标准

3.1普通页面尺寸

1）使用绝对尺寸定义页面宽度时，为980px。

2）当页面需要放置的内容过多，或者内容不可预知，可以使用100%页面宽度。

例如BOSS管理后台相关页面。

使用100%宽度时请注意：

尺寸不能超过层框架的尺寸，且左右留10px以上的空白。

3）应考虑1024x768分辨率下的效果是否美观和谐。

4）页面居中显示。

5）Header与Footer上下与浏览器边框的距离为10px。

6）Body与Header、Footer的间距为12px。

7）栏与栏之间的距离为10px。

Body区域内容的间距不受此限，但应考虑整体性。

3.2邮件页面尺寸

邮件页面宽度为680px。

3.3活动页面

活动页面宽度根据设计效果而定，但最大尺寸不要超过980px;

4Header

Header是最能树立网站统一形象的区域，必须遵循一致性原则。

Header必须包含网站LOGO。

注意以下几种Header的不同使用范围。

4.1基本Header

基本Header包含元素：

1）LOGO180pxX50px

2）用户登录信息（如果用户已经登录）

3）网站信息导航

4）网站域名

基本Header提供网站主要功能的入口，帮助用户快速跳转到相应页面，提高操作效率。

主要用在首页，折扣列表及其他已有搜索入口的页面。

但不包括一下情况：

1）注册和登录页面

2）首页页面以及分频道页面

4.2简化Header01

简化Header01将“网站信息导航”替换为用户个人信息，避免用户分散注意力，让他可以专心完成既定的目标。

用于

1）会员中心

2）商户中心

3）功能操作页面

4）认证流程

5）登录页面

可以个性化设计

5Footer

每个页面都必须包含Footer。

Footer包含内容

首页Footer

1）导航信息

2）网络安全举报中心连接及网络安全警示

3）版权信息

子页面footer

2）版权信息

三级页面footer

1）版权信息

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

次要文字颜色：

#666666

突出提示要色：

#FF6600

次要补充说明颜色：

#999999

6.4链接文本

列表链接文本

link:

#444444

hover:

#FF6600

visited:

#666666

特定情况可以使用其它颜色的链接，但网站绝大部分功能性链接都应是默认样式。

如：

特殊超链接文本

ink:

#06F

#666666

#06F

7色彩

色彩给人的印象迅速、深刻、持久。

色彩在视觉上容易使网站形象增强感染力，能强有力地吸引用户的注意力。

7.1标准色

待定，以视觉设计师首页效果而定

7.2同类色的选用

7.3色彩使用说明

同一页面上应只有一种主色调。

使用的色彩不宜超过3种。

色彩是能够传达信息的。

同时，色彩会对人的感情产生作用。

所使用的色彩应与传达的信息具有相关性。

例如，喜庆的节日，一般会选用暖色调。

注意灰色的使用。

灰色能够缓冲鲜艳的色彩的冲击，缓减视觉疲劳。

7.4其他色彩的使用

因为不可避免的会使用到其他的色彩。

色彩的选用应与整个网站的色调协调统一，不可任意使用。

7.5广告文字的色彩

广告上文字的色彩最多不超过3种。

8图标（icon）

如需使用图标，应配以相应文字，以免表达不清。

图标不应过大。

建议尺寸为：

120x120px；

100x100px；

64x64px；

32x32px；

16x16px。

一个系列的图标尺寸必须一样。

特殊情况下可以有所区别，但不应差异太大。

保持整体性。

图标的含义应与传达的信息有一定联系。

网站的图标风格须保持一致。

9按钮（button）

9.1系统按钮的使用

在涉及到表单提交的流程尽量使用系统默认按钮，以便用户识别。

系统按钮上的文字只能使用以下两种尺寸：

12px；

14px。

9.2图片按钮的使用

为了突出显示，或者与页面整体协调一致，需要使用图片按钮。

1）按钮的高度应尽量不超过35px。

2）按钮的背景不应干扰文字。

背景与文字的颜色应有明显区别。

3）图片按钮风格可以根据实际情况有所变化。

但必须与网站整体风格协调一致。

同一系列页面的按钮样式应保持一致。

4）无任何链接不要做成按钮样式。

5）超链接不可做成按钮。

9.3系统按钮的样式定义

系统按钮一般不建议定义CSS样式。

除非页面风格需要，而且在不影响用户识别的情况下，可以改变系统按钮的外观。

10图片

10.1图片处理

相同的产品里的图片风格应该一致。

例如阴影的方向，厚度，模糊度等都应该统一。

图片非常容易吸引视觉焦点，所以要注意图片应与页面整体效果协调。

10.2动画

一屏之内不应有2处以上的动画闪动。

10.3图片格式选择

色彩单纯的图片适合用GIF格式，比如图形按钮，图标等；

色彩丰富的图片适合用JPG格式，比如照片等。

11表单

11.1间距与对齐方式

行与行之间间距相同。

说明文字应使用中文全角冒号。

纵向标题项右对齐，内容项左对齐。

11.2字体

title：

宋体14px粗体

内容：

宋体12px正常体

11.3文本输入框

通常情况文本输入框为不带任何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

间距：

文字距离边框5px

2）单独页面错误提示

13广告

13.1广告风格

1）色彩亮丽，时尚。

注意用色与页面风格协调；

2）避免过于卡通；

3）标题突出，醒目，容易辨别；

4）注意细节。

13.2广告尺寸与文件规格

待定