UI设计规范两篇.doc

    第1条

　　用户界面设计流程/界面规范——用户界面设计的基本概念和流程1.1目的规范公司的用户界面设计流程，使用户界面设计人员能够参与产品设计的全过程，对产品可用性的全过程负责，规范用户界面设计流程，确保用户界面设计流程的可操作性。

　　1.2范围接口设计本文件用于接口设计。本文档的读者是项目管理人员、售前服务人员、用户界面设计人员、界面审核人员和配置测试人员。

　　1.3概述用户界面设计包括交互设计、用户研究和界面设计。

　　基于这三个部分的用户界面设计流程从产品项目启动开始，用户界面设计人员应根据流程规范，通过参与需求阶段、分析和设计阶段、研究和验证阶段、方案改进阶段、用户验证和反馈阶段等方式，履行相应的工作职责。

　　用户界面设计者应该全面负责以用户体验为中心的产品用户界面设计，并根据客户(市场)需求不断提高产品可用性。

　　本规范明确规定了各环节用户界面设计的职责和要求，以保证各环节的工作质量。

　　1.4基本介绍A、软件产品仍属于需求阶段的工业产品类别。

　　它仍然离不开3W考虑(谁、在哪里、为什么.)，即用户需求分析、使用环境和使用模式。

　　因此，在设计软件产品之前，我们应该弄清楚谁使用了用户的年龄、性别、爱好、收入、教育水平等。

　　在哪里使用它(在办公室/家庭/车间/公共场所)。

　　如何使用(鼠标、键盘/遥控器/触摸屏)。

　　上面的任何元素都会相应地改变结果。

　　此外，我们还必须了解处于需求阶段的类似竞争产品。

　　类似的产品比我们更早出现，我们必须比他做得更好才能有价值。

　　因此，仅仅从界面美学的角度来说，并没有一个客观的评价标准来判断好坏。

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

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

　　也就是计划的形成阶段。

　　我们设计了几套不同风格的界面供选择。

　　C、在调查和验证阶段，必须保证在相同的设计和生产水平上有多套款式，并且看不到明显的差异，以获得用户客观、真实的反馈。

　　在测试阶段开始之前，我们应该清楚地分析和描述测试的具体细节。

　　在研究阶段，我们需要从以下几个问题入手:用户对每套方案的第一印象；用户对每套方案的综合印象；用户对每组方案的单独评估；最爱的选择；选择第二喜欢的；和图形的标记。

　　结论出来后，请让所有用户说出最流行的方案的优缺点。

　　所有这些都需要用图形、直观和科学的方式来表达。

　　在方案的改进阶段，经过用户调查，我们得到了目标用户最喜欢的方案。

　　但是也要理解为什么用户喜欢它，以及他们有什么遗憾，这样我们才能进行下一次修改。

　　在这个时候，我们可以把我们的精力投入到一个计划中，使它细致而精致。

　　E、在用户认证阶段纠正方案后，我们可以将其推向市场。

　　但是设计还没有结束。

　　我们也需要用户的反馈，优秀的设计师应该在产品上市后去专柜。

　　零距离联系最终用户，了解用户使用时的真实感受。

　　为未来的升级积累经验和数据。

　　通过以上对设计过程的描述，我们可以清楚地发现用户界面设计是一个非常科学的推导公式。他拥有设计师对艺术的理解和感知，但这绝不仅仅代表设计师的个人绘画。

　　因此，我们一再强调，这个工作过程是一个设计过程。

　　用户界面设计没有艺术设计师。

　　2.用户界面设计流程2.1概述根据上述原则，分析公司产品的特点，制定符合软件产品(或项目)生命周期的用户界面设计流程。

　　在每个产品(或项目)的生命周期中，用户界面设计者应严格遵循流程，完成每个环节的职责，以确保流程的准确有效实施，从而提高产品的可用性和质量。

　　第二，用户界面用户体验设计原则和规范1应该遵循的基本原则，无论是控件的使用、提示信息的措辞，还是color 、窗口的布局风格，都要遵循统一的标准并做到真正一致。

　　以这种方式获得的好处1使用户在使用时能够建立一个准确的心理模型。熟练使用一个界面后，切换到另一个界面可以很容易地推断出各种功能。句子理解也不需要苦心理解。2降低培训、支持成本。支持人员不会一个接一个地费力指导。

　　3 .给用户一个统一的感觉，没有混乱，愉快的心情，增加对项目组经验丰富的实践人员的支持，建立用户界面规范艺术家提供的配色方案，提供总体色图界面控制程序人员、用户经验人员提出一个合理的统一的控制库。

　　参考标准接口使用符合行业标准的标准控制功能。对于windows平台，请参考微软用户体验控制风格。它的风格可以在允许的范围内统一修改、音。可以参考其他软件高级操作来提取有用的功能供本项目使用。你不能盲目地跟随和漫无目的。

　　根据需要，设计了特殊的操作控制。标准是简化操作、以实现某个功能。界面实现者与艺术设计者讨论控件的可实现性。不执行这一步骤将导致对彼此工作的不满和不一致的混乱。

　　重复上述工作。

　　合理化文档用户界面标准的建立描述了上述规范，迫使界面设计者理解它，并且作为开发指南，SQA人员监控开发人员是否遵循它，并且及时警告开发人员。

　　2正确使用颜色，遵循对比度原则1统一颜色。根据软件类型和用户的工作环境选择合适的颜色，如安全软件。根据行业标准，黄色、绿色代表环保，蓝色代表时尚、紫色代表浪漫等。浅色可以让人舒服，深色不会让人觉得累等。2如果没有自己的系列接口，可以采用标准接口来减少这方面的考虑，实现与操作系统的统一。阅读系统标准色卡3色盲、弱用户，即使使用特殊颜色来指示关键或特殊的事物，也应使用特殊的指示器，quot4个配色方案，如强调数字和图标，也需要测试。通常由于显示、图形卡的问题，每台机器的色彩性能是不同的，应该严格测试。不同的机器应该进行颜色测试。遵循对比度原则，在浅色背景上使用深色文本，在深色背景上使用浅色文本，在白色背景上可以很容易地识别蓝色文本，但是在红色背景上不容易区分，因为红色和蓝色之间没有足够的对比度，并且蓝色和白色之间的对比度非常大。

　　除非在特殊场合，禁止使用强烈对比和令人作呕的颜色。

　　6在整个界面中尽可能少地使用不同颜色和类别的颜色表。具体标准参见《美术统计学术标准》。

　　色彩图表的构建对图案设计、包装设计中的艺术家起着标准的参考作用，对程序界面设计者设计控件、表单色彩匹配起着基于规则的作用。

　　3资源是一个丰富多彩的人机交互界面，需要精致的鼠标光标、图标和指示图片、底图等。

　　1还必须遵循统一的规则，包括建立上述颜色表，图标建立的步骤也应尽可能形成标准。参考itop的瞭望栏图标设计标准2，该标准具有标准图标风格设计、统一构图布局、统一色调、对比度、色标和图片风格3。底图应集成到底图中，使用浅色、低对比度和尽可能少的颜色。

　　4个图标、图像应该清晰地表达意思，遵循通用标准，或者用户的机器很容易与物体联系起来，绝对不允许画奇怪的图案。

　　鼠标光标的样式是统一的，应该尽可能使用系统标准来防止重复。例如，在一些软件中，手的形状可以在4分钟内不同。

　　4字体使用统一字体，字体标准的选择取决于操作系统的类型。

　　标准字体使用中文，“宋体”，标准MicrosoftSansSerif使用英文。隶书、草书等。不考虑特殊字体。在特殊情况下，图片可以用来替换它们，确保每个用户都能正常显示它们。

　　字体大小基于系统标准字体，如MSS字体8点，小字体9点)字体大小5 (10.5点)。

　　所有控件都尝试使用统一大小的字体属性。除了特殊情况，如特殊提示信息、增强显示，ITop使用BCB。默认情况下，所有控件都使用parentfont，不能修改，这有利于统一调整。

　　系统大小字体属性更改的处理。

　　Windows系统具有设置大字体属性的桌面设置。许多界面设计者经常为此烦恼。如果设计中遵循了微软的标准，则使用相对大小作为控件的大小设置。当在大字体和小字体之间切换时，相对来说不会有什么特别的问题。

　　然而，使用点阵作为窗口设计单位通常很方便，这导致在改变大字体后布局混乱。

　　在这种情况下，我们应该做相应的处理1。编写程序自动调整大小。点阵值乘以相应的比例2。所有点阵都用作单位，忽略系统字体的调整。这可以减少调整大字体带来的麻烦。

　　这种方法主要用于BCB/德尔菲法，但不可避免的结果是与系统不统一。

　　5文本文本表达式提示信息、帮助文档文本表达式遵循以下准则1口语、礼貌、多用途您、请不要使用或使用不太专业的术语，停止使用逗号、句号和符号分号来表示措辞错误的单词2断句。如果提示信息较多，则应分段，3警告、信息、不正确使用相应的表达方式4使用统一的语言描述，如关闭功能按钮，可描述为退出、返回、关闭，则应统一规定。

　　根据用户的不同，使用合适的语气的话，比如特殊的软件，可以有很多专业的归属，用户对于孩子这种语气可以是亲切的，年长的用户应该是成熟稳定的。

　　设定要遵循的标准。

　　6STYLE控件风格，不要使用错误的控件，控件功能应该设计成与样式相同的控件，如果你没有能力设计一套控件，那么就使用标准控件，绝对不能不伦不类，杂乱无章，不要使用错误的控件，比如，用Button样式来做TTable功能，拿主菜单显示版权信息，统一类型的控件操作模式是一样的。例如，双击一个控件可以执行某些操作，而双击同一个控件不会反映任何内容。一个控件只执行一个功能。它不会重复使用。许多人喜欢在不同的情况下对不同的功能使用控件，以方便编写程序。这些增加了用户最初理解的难度，并且只有在用户熟悉之后才能理解。

　　例如，如果您更改红色选项，左侧的参数表示不同的设置，这可能是因为为了节省控制或编程量，只有熟练的用户才会使用它。在这种情况下，解决方案1是分组，使用双控件2并使用TABLE页面。对用户来说，明显的视觉变化总结为1.产品生产者，并编写产品计划。

　　2.调查和分析用户体验研究员。

　　3.信息构建器，设计产品架构。

　　4.互动设计师，打造互动流程。

　　5.可视化设计器和用户界面设计器进行页面可视化设计。

　　6.前台工程师，前台开发。

　　7.背景工程师，背景开发。

　　8.用户体验研究员，做用户测试以确保质量。

　　1.确认目标用户在软件设计过程中，需求设计角色将确定软件的目标用户，并获得最终用户和直接用户的需求。

　　用户交互应该考虑不同目标用户导致的交互设计重点的差异。

　　例如，科学用户的设计重点不同于计算机输入用户。

　　2.设计目标一致的软件通常有多个组件(组件、元素)。

　　不同组件之间的交互设计目标需要一致。

　　例如，如果将计算机操作的主要用户作为目标用户，将简化的接口逻辑作为设计目标，那么目标需要将软件(软件包)作为一个整体来实现，而不是作为一个部分来实现。

　　3.元素外观一致交互元素的外观通常会影响用户的交互效果。

　　同一个(类)软件采用一致的外观风格，这对于保持用户焦点和提高交互效果有很大帮助。

　　遗憾的是，没有特别统一的测量方法来确认元素的外观一致性。

　　因此，有必要调查目标用户并获得反馈。

　　7.可用性原则7.1理解为了让软件被用户使用，用户必须能够理解对应于软件每个元素的功能。

　　如果用户不能理解，则有必要提供一种非破坏性的方式，以便用户能够通过元素的操作来理解其相应的功能。

　　例如，删除操作元素。

　　用户可以点击删除操作按钮，提示用户如何删除操作或是否确认删除操作。用户可以更详细地理解与元素对应的功能，同时取消操作。

　　7.2可以得出用户是交互的中心，并且交互元素对应于用户所需的功能。

　　因此，交互元素必须是用户可控制的。

　　用户可以使用键盘、鼠标等交互设备来移动和触发现有的交互元素，以到达以前不可见或不交互的其他交互元素。

　　应该注意的是，交互的数量将影响可实现的结果。

　　当一个函数被深度隐藏时(通常超过4层)，用户到达元素的概率大大降低。

　　可以达到的效果也与界面设计有关。

　　界面太复杂会影响可达到的结果。

　　(参考简单的指导原则)引用[第一阶段分析]

　　1、用户需求分析2、用户交互场景分析3、竞争产品分析这两者可以说是互补的。

　　对于更正式的项目，必须对用户的需求进行分析。

　　用户界面需求是一个重要的组成部分。

　　如果用户界面设计原则是所有用户界面设计的起点，那么用户界面需求就是这个设计的起点。

　　好的用户界面设计是基于对用户的深刻理解。

　　因此，对用户交互场景的分析非常重要。

　　对于大多数项目团队来说，他们可能没有时间和精力去真正调查用户现有的交互、并进行完美的交互模型调查，但是用户界面设计者在分析我是用户时需要什么时必须从用户的角度考虑。

　　竞争产品可以上市，并被用户界面设计师所知。他们必须有自己的优势。

　　这就是所谓三个人必须有我的老师。

　　每个设计师的想法都有其局限性。看别人的设计有绕过课堂的优势。

　　当然，有时可以参考的不一定是有竞争力的产品。

　　[二期设计]采用面向场景、面向事件和面向对象的设计方法。

　　用户界面设计侧重于交互，因此有必要设计终端用户的交互场景。

　　软件是一种交互式产品。用户所做的是响应软件事件并触发内置在软件中的事件。

　　因此，有必要为事件设计。

　　当前程序开发的主流是面向对象的设计。

　　面向对象设计能有效体现面向场景和面向事件的特点。

　　交互对象、数据对象、事件(交互事件和异常)和动作[三期开发)四要素的设计最终通过用户交互案例图(解释用户和系统之间的联系)、用户交互流程图(解释交互和事件之间的联系)和交互功能设计图(解释功能和交互之间的对应关系)获得用户界面设计产品。

　　[第四阶段验证]正如在用户界面交互设计原则的讨论中提到的，用户界面产品的验证主要从以下几个方面开始

　　1、功能性优于用户界面设计，不能与需求不一致。

　　2、实用性内部测试的用户界面设计最重要的一点是实用性。

　　3、用户焦点小组用户界面设计卓越性的重要衡量标准。

　　最后，我想提几个其他问题。

　　现在人们通常认为交互设计和最终的用户界面效果设计可以完全分开。

　　这就像说需求可以完全从设计中分离出来，这是不可能的。

　　从最近的工作中可以得出一个结论，一个完整和标准化的过程是一个项目成败的关键。

　　对于用户界面设计的工作流程，我认为可以按照“市场分析-用户分析-架构-原型-界面-输出-完善”的主线来制定，用户界面设计师应该参与到每一个环节。

　　1.产品定位和市场分析大多由新产品研发部门和市场需求部门完成，但用户界面设计人员应了解产品的市场定位、产品定义、客户群、运营模式等。

　　2.对用户来说，研究和分析这个过程非常重要。设计师应该找到合适的方法来完成这个过程。

　　您可以收集相关数据来分析目标用户的使用特征、情感、习惯、心、需求等。，并提出用户研究报告和可用性设计建议。

　　这部分工作也可以在团队的配合下完成。

　　当时间和项目需求允许时，可以制定真实的用户分析。

　　3.架构设计这涉及大量的界面交互和流程设计。根据可用性分析结果，制定交互模式、操作和跳转流程、结构、布局、信息等元素。

　　4.原型设计我认为这应该是一个小的阶段标志。所有以前的工作都应该从设计的角度来实施。根据进度和成本，样机可以控制在“手绘-图形-Flash-视频”的质量范围内。

　　原型的本质更像一个演示。它不需要具备所有的功能，但应该体现设计对象的基本特征。

　　5.界面设计如果你喜欢图形界面设计，这里是你最喜欢的部分。

　　然而，你必须结合循环讨论的分析结果来设计你的工作，否则你的工作很难令人信服。

　　色调、风格、界面、窗口、图标、皮肤表情是这个链接的关键。

　　6.作为设计者的界面输出，在这部分工作中是与开发者合作完成相关的界面组合。

　　7.改进工作此链接由多个部门共同参与，包括可用性周期研究、用户体验反馈、测试反馈。

　　同时，用户界面人员也应该提出一些可行的改进建议。

　　许多设计师做他们不喜欢改变的事情，这是一个大禁忌。

　　上述过程可能在许多部门的参与下完成。对于用户界面设计者来说，与团队合作并发挥他们应有的作用是非常重要的。

　　合格的用户界面设计者应该能够完成整个用户界面过程，而不仅仅是图形界面设计。

　　第二部分:新浪的产品设计指南(包括用户界面规范)总结在以下模块中。

　　设计规范介绍了什么是产品设计部门的设计规范——人机交互界面设计规范适用于网络产品线的人机交互界面设计说明书。

　　通过以用户为中心的设计方向，根据新浪产品的特点制定了一套规范，以提升用户体验。控制产品设置为.并在每个模块中介绍。

　　设计规范介绍了什么是产品设计部门的设计规范——人机交互界面设计规范适用于网络产品线的人机交互界面设计说明书。

　　通过以用户为中心的设计方向，根据新浪产品的特点制定一套规范，达到改善用户体验、控制产品设计质量、提高设计效率的目的。

　　阅读设计规范设计规范手册的人员适合界面设计人员、用户体验设计人员、前台技术工程师、出版支持人员和操作编辑参考。

　　设计理念是简单的心和简单的形式。通过精心简单的设计，先进的技术得以传达，为用户提供方便简单的使用体验。设计指南设计规范逻辑设计作为内容服务。用户被引导使用，例如，谷歌雅虎搜索结果页面通过视觉表达根据逻辑关系。字体的颜色大小突出了重要性。采用模块化设计的可扩展性，降低了修改和再开发的成本。

　　例如，奥运会项目左、右模块大小的统一可以轻松编辑，修改内容的位置可以随时统一，修改不能超过统一标准。个性化内容应该有统一风格的继承。例如，无论每个渠道如何追求个性，都离不开新浪的整体风格，除了继承和延续隶属关系的情况。病例数应以百分比表示。本地化应该考虑用户的文化背景和习惯，从而在设计中实现本地化。

　　谷歌等体现人文关怀的搜索文本连接是红色的，还有中国传统节日的标志。

　　这个设计没有模仿英国电台。应立足中国特色，体现中国之美，遵循视觉设计原则。页面外观页面类型①普通页面②宽带页面③自适应页面④其他页面类型描述①普通页面的基本属性宽度750px┊ ┍背景白色FFFFFF┊ ┍位置中心┍边距5px；低20px。；左侧0px。；右0px应用范围新浪主页频道主页频道二级频道各级文本页面等非宽带产品线②宽带页面基本属性宽度900px┊ ┐背景白色FFFFFF┊ ┐位置中心┐边距5px；低20px。；左侧0px。；Right 0px应用范围宽带频道的主页和各级页面不包括文本页面和其他宽带产品线③自适应基本属性宽度100 ┐背景白色FFFFFF┊ ┐位置中心5px保证金；低20px。；左侧0px。；右0px应用范围页面如论坛聊天直播等页面④其他页面基本属性宽度500px┊ ┍背景白色FFFFFF┊ ┍位置中心┍边距5px；低20px。；左侧0px。；右侧0px应用范围提示错误报告页面指南属性中的宽度、位置、边距是不可变的数据。

　　属性中的背景白色是一个常见的颜色值。对于特殊的个性化频道，可以根据特殊要求改变颜色或使用背景图。

　　背景色应遵循选择颜色的原则，少用高饱和度的颜色，以减少用户的视觉疲劳。

　　背景图片遵循尽可能选择可重复使用的图片的原则，以减少页面文件的数量。

　　如果遇到整体页面笔画效果，请参考图例01。

　　页面结构基本结构①标准头②内容区③标准尾标准头分为新浪主页标准头\新闻中心标准头\频道主页标准头\频道二级标准头\文本页面标准头\产品页面标准头具体样式见标准头规范标准尾分为新浪主页标准尾\\ 常见标准尾具体样式见标准尾规范导航分为频道导航\二级导航\专题导航专题地图\三级导航\具体导航样式请参考导航规范、内容布局、格式结构类型、横幅广告和具体样式。 请参考广告规范结构应用①新浪主页②新闻频道③公共频道④频道级别2 ⑤特殊页面⑥级别3页面⑧文本页面⑧产品页面标准标题类型分类①新浪主页标准标题②新闻中心标准标题③频道主页标准标题④频道级别2标准标题⑤文本页面标准标题⑥产品页面标准标题类型描述①新浪主页标准标题组件 新浪标志┐产品功能区┐整体网站导航应用范围新浪主页②新闻中心标准标题基本属性产品功能区┐整体网站导航┐广告区应用范围新闻中心③频道主页标准标题基本属性产品功能区┐整体网站导航┐广告区应用范围各频道主页④频道二级标准标题基本属性频道标志┐产品功能区应用范围各频道主页⑤正文 页面标准标题基本属性文本导航┐搜索功能应用范围频道双极性III和特殊页面标准尾部类型分类①主页标准尾部②通用标准尾部类型描述①主页标准尾部基本属性相关导航┐版权信息┐相关许可证号应用范围新浪主页②通用标准尾部基本属性本频道信息┐相关导航┐版权信息应用范围频道双极性III和 专题页面文本页面导航类型分类①频道导航②二级导航③专题导航专题地图④三级导航⑤导航指向类型描述①频道导航组件频道LOGO┊ ┐功能导航┐主导航位置区域┐二级导航位置区域应用范围新闻中心、频道主页和产品页面可使用②二级导航组件二级导航应用范围所有频道二级可使用③专题导航组件专题地图┐导航应用范围专题页面。 您可以根据需要添加和删除主题导航④三级导航组件指向导航应用范围iii页面⑤文本导航基本属性通道LOGO┊ ┐指向导航应用范围文本页面布局结构部分基本元素部分组合形式部分元素到8PX同名部分元素之间的距离为6PX(例如eedistance in EEC is 6ec distance is 8pxh 2 equal format is 6px)ABC部分AF部分DC部分EEC部分CFC部分 FA章节光盘格式CEE格式H1横幅格式H2等分试样格式H3等分试样格式H4等分试样格式HN等分试样格式模块类型标题类型①焦点图②标题区域③A类模块④B类模块⑤C类模块类型描述除非另有说明，否则以下插图如下。 所示距离包括模块边框线①焦点图②首页区域④模块内容⑤图片列表以及图片和文本的混合排列⑥段落关系⑦段落格式文本规格样式类库①文本格式②连接样式③项目符号注释所有文本设计都基于以下样式组合①文本格式12号文本格式字号12px┊ ┐字体Arial┊ ┐线