视觉设计规范ppt.docx

视觉设计规范ppt.docx

《视觉设计规范ppt.docx》由会员分享，可在线阅读，更多相关《视觉设计规范ppt.docx（6页珍藏版）》请在冰豆网上搜索。

视觉设计规范ppt

竭诚为您提供优质文档/双击可除

视觉设计规范.ppt

　　篇一：

webui设计规范

　　内蒙古万德系统集成有限公司

　　webui设计（流程/界面）规范

　　目录

　　一：

ui设计基本概念与流程................................................................................................................................................................................................................-3-

　　1.1目的.........................................................................................................................................................................................................................................-3-

　　1.2范围..........................................................................................................................................................................................................................................-3-

　　1.3概述.........................................................................................................................................................................................................................................-3-二：

ui界面用户体验设计原则与规范................................................................................................................................................................................................-4-1：

应该遵循的基本原则...............................................................................................................................................................................................................-4-2：

页面外观规范...........................................................................................................................................................................................................................-4-②宽带页面...........................................................................................................................................................................................................................-5-③自适应...............................................................................................................................................................................................................................-5-④其他页面...........................................................................................................................................................................................................................-5-基本结构.................................................................................................................................................................................................................................-6-页面版式：

.............................................................................................................................................................................................................................-6-版块基本元素：

所谓基本元素就是将其中任意几块元素拼接起来形成所需网页版块。

..............................................................................................-6-版块组合形式.........................................................................................................................................................................................................................-7-3：

色彩规范...................................................................................................................................................................................................................................-8-4：

字体规范.................................................................................................................................................................................................................................-10-①文字格式..........................................................................................................................................................................................................................-10-②标题类.............................................................................................................................................................................................................................-12-

　　④功能类.............................................................................................................................................................................................................................-15-⑤注释类.............................................................................................................................................................................................................................-16-正文类...................................................................................................................................................................................................................................-16-5：

图片规范.................................................................................................................................................................................................................................-16-

　　主要图片...............................................................................................................................................................................................................................-16-图片规格...............................................................................................................................................................................................................................-17-6：

表单规范：

.............................................................................................................................................................................................................................-17-

　　①按纽...........................................................................................................................................................................................................................-17-②输入框.......................................................................................................................................................................................................................-17-③文本框.......................................................................................................................................................................................................................-18-④复选框.......................................................................................................................................................................................................................-18-⑤菜单...........................................................................................................................................................................................................................-18-

　　一：

ui设计基本概念与流程

　　1.1目的

　　规范公司ui设计流程，使ui设计师参与到产品设计整个环节中来，对产品的易用性进行全流程负责，使ui设计的流程规范化，保证ui设计流程的可操作性。

　　1.2范围

　　本文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、ui界面设计人员、界面评审人员和配置测试人员。

　　1.3概述

　　ui设计包括交互设计，用户研究，与界面设计三个部分。

基于这三部分的ui设计流程是从一个产品立项开始，ui设计师就应根据流程规范，参与需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段等环节，履行相应的岗位职责。

ui设计师应全面负责产品以用户体验为中心的ui设计，并根据客户（市场）要求不断提升产品可用性。

本规范明确规定了ui设计在各个环节的职责和要求，以保证每个环节的工作质量。

　　二：

ui界面用户体验设计原则与规范

　　1：

应该遵循的基本原则

　　无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。

2：

页面外观规范

　　①普通页面②宽带页面③自适应页面④其他页面

　　普通页面宽带页面

　　自适应页面其他页面

　　①普通页面

　　基本属性：

宽度750px┊背景白色#FFFFFF┊位置居中┊边距上5px；下20px；左0px；右0px适用范围：

系统首页正文页面等及其他非宽带产品线

　　②宽带页面

　　基本属性：

宽度900px┊背景白色#FFFFFF┊位置居中┊边距上5px；下20px；左0px；右0px适用范围：

宽带频道首页和各级页面不包括正文页，及其他宽带产品线

　　③自适应

　　基本属性：

宽度100%┊背景白色#FFFFFF┊位置居中┊边距上5px；下20px；左0px；右0px适用范围：

论坛聊天等页面

　　④其他页面

　　基本属性：

宽度500px┊背景白色#FFFFFF┊位置居中┊边距上5px；下20px；左0px；右0px适用范围：

提示报错页面

　　篇二：

ui设计（界面）规范

　　ui设计（流程/界面）规范

　　一：

ui设计基本概念与流程

　　1.1目的

　　规范公司ui设计流程，使ui设计师参与到产品设计整个环节中来，对产品的易用性进行全流程负责，使ui设计的流程规范化，保证ui设计流程的可操作性。

　　1.2范围

　　l界面设计

　　l此文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、ui界面设计人员、界面评审人员和配置测试人员。

　　1.3概述

　　ui设计包括交互设计，用户研究，与界面设计三个部分。

基于这三部分的ui设计流程是从一个产品立项开始，ui设计师就应根据流程规范，参与需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段等环节，履行相应的岗位职责。

ui设计师应全面负责产品以用户体验为中心的ui设计，并根据客户（市场）要求不断提升产品可用性。

本规范明确规定了ui设计在各个环节的职责和要求，以保证每个环节的工作质量。

　　1.4基本介绍

　　a、需求阶段

　　软件产品依然属于工业产品的范畴。

依然离不开3w的考虑（who,where,why.）也就是使用者，使用环境，使用方式的需求分析。

所以在设计一个软件产品之前我们应该明确什么人用（用户的年龄，性别，爱好，收入，教育程度等）。

什么地方用（在办公室/家庭/厂房车间/公共场所）。

如何用（鼠标键盘/遥控器/触摸屏）。

上面的任何一个元素改变结果都会有相

　　应的改变。

　　除此之外在需求阶段同类竞争产品也是我们必须了解的。

同类产品比我们提前问世，我们要比他作的更好才有存在的价值。

那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。

我们只能说哪个更合适，更合适于我们的最终用户的就是最好的。

　　b、分析设计阶段

　　通过分析上面的需求，我们进入设计阶段。

也就是方案形成阶段。

我们设计出几套不同风格的界面用于被选。

　　c、调研验证阶段

　　几套风格必须保证在同等的设计制作水平上，不能明显看出差异，这样才能得到用户客观真实的反馈。

　　测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。

　　调研阶段需要从以下几个问题出发：

　　用户对各套方案的第一印象

　　用户对各套方案的综合印象

　　用户对各套方案的单独评价

　　选出最喜欢的

　　选出其次喜欢的

　　对各方案的色彩，文字，图形等分别打分。

　　结论出来以后请所有用户说出最受欢迎方案的优缺点。

　　所有这些都需要用图形表达出来，直观科学。

　　d、方案改进阶段

　　经过用户调研，我们得到目标用户最喜欢的方案。

而且了解到用户为什么喜欢，还有什么遗憾等，这样我们就可以进行下一步修改了。

这时候我们可以把精力投入到一个方案上，将方案做到细致精美。

　　e、用户验证阶段

　　改正以后的方案，我们可以将他推向市场。

但是设计并没有结束。

我们还需要用户反馈，好的设计师应该在产品上市以后去站柜台。

零距离接触最终用户，看看用户真正使用时的感想。

为以后的升级版本积累经验资料。

　　经过上面设计过程的描述，大家可以清楚的发现，界面ui设计是一个非常科学的推导公式，他有设计师对艺术的理解感悟，但绝对不是仅仅表　　

现设计师个人的绘画。

所以我们一再强调这个工作过程是设计过程。

ui界面设计不存在美工。

　　2.ui设计流程

　　2.1概述

　　根据上述原则，分析公司产品的特点，制定符合软件产品（或项目）生命周期的ui设计流程。

每个产品（或项目）的生命周期中，ui设计师应该严格按照流程，完成每个环节的职责，确保流程准确有效的得到执行，从而提高产品的可用性，提升产品质量。

　　二：

ui界面用户体验设计原则与规范

　　1：

应该遵循的基本原则

　　无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。

　　这样得到的好处：

　　1：

使用户使用起来能够建立起精确的心里模型，使用熟练了一个界面后，切换到另外一个界面能够很轻松的推测出各种功能，语句理解也不需要费神理解

　　2：

降低培训、支持成本，支持人员不会行费力逐个指导。

　　3：

给用户统一感觉，不觉得混乱，心情愉快，支持度增加

　　做法：

　　项目组有经验人士，确立ui规范：

　　美工提供色调配色方案，提供整体配色表

　　界面控制程序人员、用户体验人员提出合理统一使用的控件库。

参考标准界面使用规范：

控件功能遵循行业标准，windows平台参见《microsoft用户体验》

　　控件样式在允许的范围内可以统一修改其样式、色调

　　参考其他软件先进操作，提取对本项目有用的功能，以使用，绝对不能盲从，漫无目的。

根据需要，设计特殊操作控件，准则为：

简化操作、达到一定功能目的

　　界面实施人员与美工商榷控件可实现性,（如不实行此步骤，将会导致各自对对方工作不满意，也会产生不一致的混乱）。

重复叠代上述工作。

　　建立合理化文档《ui标准》描述上述规范，

　　强行界面设计者理解之，并作为开发准则，

　　sqa人员进行监控开发人员是否遵循，及时告诫开发人员。

　　2：

（color）颜色使用恰当，遵循对比原则：

　　1：

统一色调，针对软件类型以及用户工作环境选择恰当色调：

　　如：

安全软件，根据工业标准，可以选取黄色，