产品设计交互规范
产品设计交互规范
常州广传网络技术有限公司
编写：王英
2013年11月
目录
1概述
规范的制定采用UCD（以用户为中心的设计）方法，遵循ISO9241-11部分标准的要求。设计过程以用户的使用习惯和心理需求作为出发点，在认真研究并参考了国内外各种优秀设计的基础上，制定出了适合我集团应用服务产品的设计规范。此外，为保证规范具有良好的可用性和广泛的适用性，UE研究室对设计出的每个模式都进行了严格的用户测试，并对各组件采取了不同应用场景的测试。
该规范从产品交互的通用规则和具体组件的交互模式两个方面进行了规定。在每个组件规范中，给出了模式描述和扩展描述的规范描述，供不同的应用类型和使用场景选择、组合使用。
1.1规范的目的
●在产品开发过程中，给不同部门的相关人员提供统一的规范与指导，使沟通与合作顺利
有效地进行，以保证产品界面的最终规范化实现；
●从一点一滴入手解决公司产品的可用性问题：使操作更人性化，减轻用户的认知负担，
改善产品的用户体验，提升产品的市场竞争力；
●使产品在界面外观和操作行为上形成一致，加强公司产品的品牌化特征。
1.2规范适用的范围
广传项目部内的所有产品。
1.3规范适用的人群
参与产品设计的所有人员、前端开发人员及测试人员等。
注：从正式发文之日起属于新项目范畴的必须遵循此规范，对于已有项目进行重大版本升级的项目要遵循此规范。
2基本原则
以下原则主要用来说明此规范的指导思想与设计依据。简单描述如下，以供该文档的阅读者参考和使用。具体的原则描述请参见《界面设计指南》。
2.1一致性
●视觉一致：在同一产品内，所有的同类界面元素在相同的应用环境下，界面外观在视
觉上应该保持一致；否则，界面外观要予以区分；
●操作行为一致：类似场景的界面设计，其操作方式必须保持一致；当操作行为相同时
要保持视觉上的一致；当操作行为不同时，在视觉上就一定要有所区别；
●外观与使用者的预期一致：保持对象与其行为相符，保持不同作用的对象外观的不同；
视觉元素的外观及其操作结果，必须与用户的心理认知相符。
2.2简洁性
●减轻视觉负担：使用尽可能少的元素，不提供与当前任务无关的信息；
●简明的文字表述：文字表述必须简明扼要、清晰易懂，内涵丰富，并易于理解和记忆；
●操作简单：减少冗余的操作步骤。
2.3避免干扰和打断
●避免干扰：明确用户在特定界面中的首要任务和目标，尽可能避免该界面上的视觉噪
声和其它干扰。
●避免打断：让用户的操作连贯顺畅，避免使用模态对话框（弹出的独占焦点的对话框）
打断用户的工作。
2.4减轻用户记忆负担
●认知明确：产品中界面元素外观要明晰，易于辨别；产品的逻辑意义要合理，导航要
及时准确；
●系统智能化：提供默认值；帮助用户记住尽可能多的信息，最低限度地从用户那里索
取信息；
●合理的隐喻和习惯用法：使用用户熟悉的，符合使用习惯的隐喻，及通用的习惯用法，
为用户的任务提供直观易用的界面；
●有效的启示：提供具有明确引导性的启示来指导用户正确操作（启示：某对象用来说
明自身可以如何使用的外观属性）。
2.5及时有效的反馈
●操作反馈：对用户的每一步操作给出及时的反馈，告知用户成功做了某事；
●受范性反馈：界面对象的设计要在视觉上能提供即时响应鼠标操作行为的效果；
●系统状态反馈：系统需要用户等待或系统出现错误时，要及时让用户明白现状；
●选择合适的反馈形式：根据不同的情况，使用不同的反馈（如声音、触觉、语言、视
觉反馈或是它们的组合）。
2.6让用户放松心态，不怕犯错
●允许轻松的反向操作：在适当的时候，尽量提供撤销功能，使用户可以返回到上一步
操作并重新进行选择；
●让用户可以重新开始：提供“恢复初始设置”选项，让用户敢于尝试；
●避免输入错误：使用合适的选择控件（单选/多选/下拉列表/列表框等），提供最有代表
性的默认选项，以及相应的输入帮助，来方便用户准确输入信息；
●提供校验等功能：对用户的输入和选择等操作进行实时的判断，帮助用户及时更正错
误；
●避免埋怨：当用户犯错时，避免责怪和鲁莽地打断与关闭，要礼貌地指出错误所在，
并提供有用的恢复建议。
3交互通用规范
以下产品的交互设计通则，是所有的交互模式必须遵守的普遍规范，用以统一产品的交互行为。（此部分规范将随着组件模式的不断扩充，进行逐步添加和完善。）
3.1受范性指示
受范性是指鼠标指针移过可点击区域时可点击区域的视觉变化，用以说明该对象是可操作的以及何时可以进行操作。
●对象对鼠标指针或手势滑动移动的响应必须即时有效；
●响应形式必须明确清晰（如：鼠标移过按钮或手势滑动，按钮有被按下的效果）；
●受范性表现必须保持高度的一致：同等功能和操作的元素受范性必须相同（如：鼠标
指向链接文字时都做同样的变化）；
●在鼠标指针移或手势滑动时对象必须即时恢复原来状态；
●命令按钮也经常被显示为链接样式（文本+下划线），此时为了与普通的链接相区分，
必须提供非常明显的不同于链接的受范性指示。
3.2操作不可用状态
当用户在某些时候不能进行某些操作时，该命令按钮或命令文本（或其它的形式）在外观上应显示为不可用状态（如置灰），用来使界面稳定，使用户保持恒定和完整的思维模式，减少用户的认知负担。
●显示为不可用状态的按钮或文本必须保持与可用状态的位置、大小、形态保持一致，
仅色彩、灰度和立体效果等发生变化。
●操作不可用的情况主要包括：
菜单性质和导航性质的操作不可用时不能隐藏，应该显示为不可用状态，如下图所示：
图 3-1菜单操作不可用
工具栏按钮不可用时不能隐藏，应该显示为不可用状态，如下图所示：
图3-2 工具按钮不可用
当一个操作在用户进行了某行为（如填写或选择了某选项时）就变为可操作，则该操作不可用时不能隐藏，应该显示为不可用状态，如下图所示：
图 3-3操作命令不可用
注：具体不可用状态效果见视觉规范。
3.3有趣高于功能
产品必须充满了趣味性，必须充满了COOL，才能形成良好的传播和口碑；索然无趣的产品，最终由客户检验进而丢弃；
3.4功能高于交互
明确的功能满足明确的需求，用户不会在意炫酷的交互效果；关键是功能是否能满足客户的潜在需求；
3.5交互高于UI
设计的时候，首先追求便捷、快速的特点；然后要围绕具体的功能来实现UI，并不需要专门
设立一个功能。
3.6注意屏幕滚动
由于移动终端屏幕特性，尽可能减小单页面加载量，降低图片文件大小和数量，加快加载速度，方便用户体验。尽可能减少垂直方向滚动，尽可能不超过两屏。由于将导致非常恶劣的客户体验，尽可能禁止浏览器水平滚动操作。尽可以隐藏不必要的按纽，突出重点，减少用户的思考。
4组件规范
4.1表格
主要应用于大批量数据的展示、查看、维护等方面。基础表格是表格本身最原始的一些属性集合，针对表格在不同场景下的状况，在扩展设计中会一一罗列出来。
【设计意图】
?合理有效的组织数据信息；
?帮助用户快速、有效的查看表格数据；
?帮助用户快速、准确的完成对表格的操作；
【应用条件】
适用于批量数据的展示和维护；
【模式描述】
组成：表格标题+ 表格表头+ 表格行间隔线+ 表格行
如下图所示：
图 4-1 基础表格
应用规范：
●表格的标题：标题文字要与其它文字有所区别，如：加粗显示；标题文字内容以
“内容+操作”的形式描述，标题文字前需要有相应的标题图标，文字与图标之
间间隔一定的距离，如：一个半角空格；具体视觉效果参见《界面视觉规范》。
●表格的表头与表格主体在外观上要有区分；
●表格行间隔线：表格的主体内容用表格线区分；表格线的粗细要适中，如1px。【扩展描述】
根据应用场景的不同，可以对基础表格进行扩展；可以为表格增加数据筛选区、命令
按钮区、操作按钮区、表格主体区、翻页区、操作按钮区。整体效果如下图所示：
图 4-2 表格操作区分布
1）标题列排序：
●表格列标题可以排序时，表格的列标题要体现出当前排序状态，并要区分于其他
列标题显示，如：背景和图标高亮显示；
如下图所示：
图 4-3 标题列排序
●表格列标题进行切换时，原列标题恢复初始状态，切换到的列标题显示为排序状
态；
2）表格行选中操作：
●表格中的第一列，既可表示对行的选择如复选框；同时还可以用图标标示数据状
态；当两者都有时，显示复选框在上，图标被覆盖；
●在对表格行进行选中（点选行的任意位置即可选中）时，此行要高亮显示，同时
此行前复选框为选中状态，同时还可以进行多行选择；需要全选时，只需勾选列
标题中的复选框即可选中当前列表的全部行数据。
3）数据筛选区：
●当数据内容可以明确的按其状态、类别进行划分时，可以应用页签的形式来进行
设计；
●页签总宽度在表格宽度的75%之内为佳，超出此范围时，需应用其他设计形式如
下拉框显示的形式等；
如下图所示：
图 4-4 数据筛选区
●当前分类状态的的页签要高亮显示，要明显区别于其他页签；
●页签内的文字，需要简单明了，相同内容的文字省略；如上图中未处理（订单）、
处理中（订单）、处理完成（订单）；
●应用页签设计时，页签类别要划分明确合理；如按照数据状态或分类进行划分。
4）命令按钮区：
●针对整体页面进行操作或者对表格整体进行操作的按钮放置在此区域内；如：导
入、导出、新增等；
●按钮的其它细则参见《界面视觉规范》。
5）操作按钮区：
●对表格主体的数据进行操作的按钮放置在此区域。如：删除、发布、下架、上架、
审核等；
●当列表的数据超过一屏显示时，在列表上方也要显现操作按钮区，方便用户对列
表进行操作；如下图所示：
图 4-5 操作按钮区
6）翻页区：
●当列表中的数据量超过默认的数据显示条数时，应用翻页模式来处理多条数据的
显示；
●翻页在列表下方居中显示；
●翻页的详细功能和模式参见“翻页模式组件规范”。
7）单条数据操作区：
●对行数据进行操作的按钮要与操作按钮区的按钮视觉上要有所区分；
●尽量不要在此处安排太多的操作，太多的操作给使用者过多的判断负担。应考虑
其他的界面布局方式。
8）表格列标题区：
●当表格的数据列较多，屏幕显示已经达到最大限度，而这些数据列又必不可少时，
允许通过鼠标拖动的方式来对数据列的宽度进行改变；同时可以使用横向滚动
条；
●调整列宽度时，要在整体表格边线内进行，以免整体页面变形；
●数据项内容显示部分太长时，省略多余部分并加省略号；鼠标指针停靠时，全部
详细内容显示；
9）数据条目设置区：
●默认显示当前页面所能显示的最大数据条目数；如：10条/页；
●还要提供几个数值选项，供用户选择；如：20、30、50；
4.2单元格数据
4.2.1单元格数据展示
以单元格为单位的数据展示是指应用表格的单元格来描述每个数据对象的展示形式。
【设计意图】
?让用户更加清晰的浏览信息；
?方便查看选中单元格的信息。
【应用条件】
适用于多数据的查看、浏览和操作；
例如：如短信中的收信人、邮件中的收件人等。
【模式描述】
组成：如下图所示：
图 4-6 单元格数据展示
应用规范：
●鼠标经过或选中此类表格的单元格时，行或列的背景色高亮显示。
●此类单元格请支持按“Shift”键进行连续选定，整行整列选定时要有箭头图
标反馈给用户。
●此类单元格请支持按“Ctrl”键进行间断选定。
注意事项：
数据类表格是指表格所描述内容是由多个数据或一组对象（每个对象至少包含两个数据项）组成，对于展示某些信息的表格不属于数据类表格。
【扩展描述】
4.2.2通讯录
通讯录是以单元格数据展示形式为基础的，集添加删除修改等功能于一体的组件。
【设计意图】
?用户不会再输入通讯录信息之间分隔符，更不会出现由于分隔符输入不正确而导致的错误操作；
?为用户显示人名，而不显示地址，方便了查看，同时增加了自动匹配，查找，将新信息增加到通讯录和导出通讯录的功能。
【应用条件】
?适用于需要用户多次填写同类信息的地方。
如：竞价通中的“关键词管理”；日期格式中年份的展现方式；邮件、短信产品的收信人列表。
【模式描述】
组成：如下图所示：
图 4-7 通讯录1
应用规范：
a）通讯录中无此信息的高亮反馈
●通讯录中存在姓名时表格内只显示姓名；
●通讯录中没有姓名只有手机号码（或email地址）时则显示号码（或
email地址）；
●姓名、手机号码（或email地址）两者都无的单元格自动高亮反馈给
用户。
b）默认显示
默认显示表格的一个空行；如下图所示：
图 4-8 通讯录2
整行单元格数据被填满时，表格自动增加一行；如下图所示：
图 4-9 通讯录3
增加至3行时，出现滚动条；如下图：
图 4-10 通讯录4
c）自动匹配
支持手动输入，可以输入人名或地址；输入地址时自动匹配通讯录中对应的人
名；
d）快捷操作
为高级用户提供快捷操作,输入新人名或新地址时，可以将其添加到通讯录。如
下图：
图 4-11通讯录5
注意事项：
使用时遇到两个人同名时可以采用“姓名（号码）”的方式显示。
【扩展描述】
无
4.3信息列表
信息列表是显示单列信息集合的一种视图展示。
【设计意图】
?利于信息的展示，方便使用者检索信息；
?快速定位信息条目。
【应用条件】
?单列信息集合；
?索引类的信息列表；
例如：信息列表多应用于索引类的信息列表，如：新闻列表、目录等。
【模式描述】
组成：项目符号、列表行，如下图所示：
图 4-12 信息列表
应用规范：
●项目符号可以是固定的符号，也可以是具有意义的图标；
●项目符号如果是图标，图标必须与应用场景相符，尽量不使用无意义的仅为
装饰作用的视觉效果显著的图标作为项目符号；
●列表行的内容，可以为文字和图标，文字一般为简单的标题；
●列表行的文字内容应该简单易懂，能够明确的反应所要说明的信息。
●列表行内容如果折行，行距必须小于两个记录行之间的段距；
●由于信息列表多为展示信息的条目，因此信息列表的行间距要有一点留白，
不要给使用者造成视觉上的负担。
【扩展描述】
组成：列表标题、单选按钮、多选按钮、分隔线、翻页，如下图所示：
图 4-13 信息列表 2
应用规范：
●列表标题是对列表中的信息内容的概括性标题（标题的写法请参见“标题”
控件的描述）；
●单选按钮，多选按钮在需要时替换项目符号的位置；
●分隔线：在记录行太多时需要提供分隔线（请参见“分隔线”控件中的相关
描述）；
●翻页（请参见“翻页”组件中的相关描述）。
4.4编号和序号
4.4.1编号
用来标识某一个对象的唯一号码。一个编号就代表着一个对象。使用编号能够更好的帮助用户记忆和或管理对象。如下图所示：
图 4-14 编号示例
【设计意图】
?更好的方便用户记忆和管理对象；
?合理的使用编号，能方便用户更好的进行沟通；
【应用条件】
?需要用唯一号码来标识对象时；
?具有真实、合理、有效的意义；
例如：订单列表中订单的编号、酒店客房管理中客房的实际编号等等；
【模式描述】
应用规范：
●编号必需代表一个对象，不要让编号无意义的存在；
●如果用户更关注编号，也就是说编号对于用户是第一位的，则必须提供
编号。比如，酒店系统中对房号的关注就比人名要重要，所以编号的视
觉层次应该突出。如果用户不常使用编号而通常更关注别的属性；比如
人名、物品名等，可以默认不显示编号，当用户需要时能够查到编号。
【扩展描述】
产品设计部工作流程规范
产品设计部门工作规范及流程 一．产品部角色及责任 产品总监：负责产品部门业务，推进项目落地，配合公司战略，协调解决产品业务难题。 产品经理：负责做出产品规划和项目开发计划，提出产品建议书和项目建议书，对规划产品的需求分析、设计、开发和测试阶段性过程进行指导和监控，保证产品满足市场需要，获得良好的收益。 产品助理：作为产品经理的协助人员，在产品经理的工作智能之内，进行产品相关的市场调研、产品策划、部门沟通等相关工作。 UI设计师：负责界面的设计、编辑、美化等工作，提高用户体验。 二．部门职责 1.产品规划 产品部负责汇总公司高层及各个部门的需求及数据，结合产品、人群、业务特点，输出相应的产品策划文档。 2.产品研发管理（项目管理） 产品转开发后，产品经理需对其负责的产品（项目）负责，推动和跟进设计、开发、测试、运维、发布、运营等部门的工作，并统筹各个部门不同阶段介入配合，使得各个环节无缝对接。 3. 产品功能特性培训 产品部（产品经理）应按版本迭代对相关部门开展产品培训，培训内容需包括产品特性、产品新特性、产品使用方法等。
4. 日常运营督导 通过用户体验、数据反向推动运营部门的运营策略，如商店更新机制、推荐机制等。 三．工作规范 1.自律与自觉 上班时间禁止做与工作无关的事情，接外包干私活是公司红线！接到工作任务应快速响应，高质量推进和完成任务。工作空档期应利用工作时间进行技能学习，部门主管有义务安排可验收的学习任务。 2. 会议制度 发起会议前要求产品经理先梳理清楚问题或需求，产品经理与开发部或设计部会议交流的应该是提出产品要求，或讲解要求，而非在会议上一起发散性探讨需求。非需求评审会，要求在30 分钟内结束会议，无结论的会议更应提前结束，因此，要求产品经理提前将会议议题提前发给与会人，以便与会人做相应准备。 3. 工作汇报 产品汇报制度：周报、月报 汇报重点：部门流程建议、学习计划及总结、个人心得总结 项目汇报制度：周报、月报 汇报重点：项目进度、存在的问题、解决方案 4.其他 请按公司相关规章制度严格要求自己。
产品设计实例说明
産品設計流程實例說明 作者：陳文龍浩漢産品設計股份有限公司 設計開發流程： 由於一般的廠商普遍對於生産品質管制與研發技術相當地重視，加上資訊的快速流通，使得各家同類商品在性能與品質上的差異已逐漸地縮小，雖然工業設計的基本觀念是“Form Follows Function-造形即機能"，但面對市場商品的多元競爭壓力，工業設計更需從另外一些不同的角度去"將市場的競爭與需求轉換成産品的新造形，新趣味以提升具有吸引消費者的附加價值”-扮演著創造新價值的角色(Creating Value)正如臺灣在産品設計上的策略所強調的便是Inn value！ 一個新産品的在設計開發，大概可分爲三個階段即“問題概念化，概念視覺化，設計商品化”。 對企業而言在展開工作時，會將內部各機能別的單位與專業人員整合起來，委外設計時，企業外部的設計公司則會扮演其中某一環節的工作角色以發揮其功能，不論是在企業內進行或以外包的方式展開，各部門，組織間的溝通與相互的專業尊重，將會是執行的重點與關鍵，現以案例-電冰箱的設計流程來加以說明。 Concept Definition 問題概念化： 首先針對將要設計發展的産品作全盤性的瞭解，透過資訊收集與市場調查的方法，去探詢市場上同類産品的競爭態勢，銷售狀況及消費者使用的情形(包括的操作的習慣，使用後的抱怨點與對新功能潛在的需求)還有市面上的流行事物。在分析評估後得加上公司發展策略的考量，以企劃出新産品的整體“概念”！ 這樣的概念通常是以文字格式來作敍述，會將“市場定位”，“目標客層” ，“商品的訴求”，“性能的特色”與“售價定位”作定義式的條列描述 概念的形成的過程是需要資訊，經驗與轉換的能力，亦就是如何將資訊情報轉換産生市場上有意義的創意方向！通常我們會舉行Focus Group群體座談會，針對現有競爭的産品與及將推出市場的設計概念提案，與顧客直接面談，將消費者的需求作瞭解與澄清，並對設計方向提供建議與決策的依據！ 由於網路與資訊系統的快速發展，今天只要有心想去收集市場相關的資訊，對於所有的廠商與設計公司來說，機會成本與資訊的涵蓋面都會是相似地相同的！但由於組成的設計開發團隊，各有其企業文化及産品策略的背景;所形成決策的主管其專長，喜愛與品味也不會相同，再加上每一個設計開發團隊的創意活力不會相當，所以解讀推研出來的概念與方向必然不同！ 這個階段的工作不應該是由某一個部門完全來負責與執行，而不去與其他專業別進行溝通互動;因爲從創意管理的觀點來看，有時小小的相互觸動有可能會透過反饋的作用而擴大效益，轉化成突破性的機會！ 圖1：舉行市場調研，透過Focus Group群體座談會來收集消費者的資訊。
原型设计规范网页规范用户体验规范交互规范
原型设计规范网页规范用户体验规范 交互规范
用户体验产品规范V1.0 目录 1、概述 (4) 1.1规范目的 (4) 1.2规范人群 (5) 1.3规范范围 (5) 2、web架构 (5) 2.1 web社会化框架 (6) 2.1.1AFO方法 6 首要活动 (6) 识别社会化交互对象 (7) Feature（功能）- 选择核心功能集。 (8) 2.2 web信息架构 (9) 2.2.1 web架构 (10) 2.2.2 信息页面 (11) 2.2.2.1*用户视觉习惯 11 2.2.2.2*页面宽度 15 2.2.2.3*一致性 16 2.2.2.4*简洁性 17 2.2.2.5*清晰 18 2.2.2.6*当前状态 18 2.2.2.7导航 18 2.2.2.8平面版式 18 2.2.2.9栏目布局 24 2.2.2.10 栏目 (25) 2.2.2.11 分页 (25) 2.2.2.12 搜索 (26) 2.2.2.13 文字 (27) 2.2.2.14 图片 (29) 2.2.2.15 页脚信息 (32) 2.2.3界面内部交互
33 2.2. 3.1*用户的操作习惯 33 2.2. 3.2*用户行为自由可控 34 2.2. 3.3*容错性 34 2.2. 3.4*操作的灵活高效性 35 2.2. 3.5*操作提示 35 2.2. 3.6*各类弹框 37 2.2.4页面间交互 39 2.2.5任务交互（工具类） 40 2.3 web业务架构 (40) 2.4 web结构seo (41) 2.4.1逻辑结构 41 2.4.1.1逻辑结构的意义 41 2.4.1.2 逻辑结构规范 (42) 2.4.1.3 逻辑结构两个要点 (43) 2.4.1.4 逻辑结构图 (44) 2.4.2物理结构 46 2.4.2.1物理结构的意义 46 2.4.2.2物理结构的规范-扁平式 (46) 2.4.2.3 物理结构的规范-树形结构 (47)
交互设计发展史
交互设计发展史 交互设计发展概况 交互设计，又称互动设计，（英文Interaction Design, 缩写 IxD 或者 IaD),是定义、设计人造系统的行为的设计领域。人造物，即人工制成物品，例如，软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式(the 从用户角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力 于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的 心理和行为特点。同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。交 互设计还涉及到多个学科，以及和多交互设计交互设计借鉴了传统设计、可用性及工程 学科的理论和技术。它是一个具有独特方法和实践的综合体，而不只是部分的叠加，具有 一定的科学逻辑性。它也是一门工程学科，具有不同于其它科学和工程学科的方法 领域多背景人员的沟通。 1959年，美国学者B.Shackel提供了人机界面的第一篇文献《关于计算机控制台设计的人机工程学》 1960年，LikliderJCK首次提出“人际紧密共栖的概念，被视为人机界面的启蒙观点 1969年，召开了第一次人机系统国际大会，同年第一份专业杂志“国际人际研究（UMMS）”创刊。 奠基期（1970年-1979年） 从1970年到1973年出版了四本与计算机相关的人机工程学专著 1970年成立了两个HCI研究中心：一个是英国的Loughboough大学的HUSAT研究中心，另一个是美国Xerox公司的PaloAlto研究中心 发展期（1980年-1995年） 理论方面，从人机工程学独立出来，更加强调认知心理学以及行为学和社会学等 学科的理论指导 实践范畴方面，从人际界面拓延开来，强调计算机对于人的反馈交互作用。“人机界面”一词被“人机交互”所取代。HCI中的“I”，也由“Interface（界面/接口）”变成了“Interaction（交互）”。 提高期（1996年-）
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、调研验证阶段 几套风格必须保证在同等的设计制作水平上，不能明显看出差异，这样才能得到用户客观真实的反馈。 测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。 调研阶段需要从以下几个问题出发： 用户对各套方案的第一印象 用户对各套方案的综合印象 用户对各套方案的单独评价 选出最喜欢的 选出其次喜欢的 对各方案的色彩，文字，图形等分别打分。 结论出来以后请所有用户说出最受欢迎方案的优缺点。 所有这些都需要用图形表达出来，直观科学。
产品设计交互规范
产品设计交互规范 常州广传网络技术有限公司 编写：王英 2013年11月
目录
1概述 规范的制定采用UCD（以用户为中心的设计）方法，遵循ISO9241-11部分标准的要求。设计过程以用户的使用习惯和心理需求作为出发点，在认真研究并参考了国内外各种优秀设计的基础上，制定出了适合我集团应用服务产品的设计规范。此外，为保证规范具有良好的可用性和广泛的适用性，UE研究室对设计出的每个模式都进行了严格的用户测试，并对各组件采取了不同应用场景的测试。 该规范从产品交互的通用规则和具体组件的交互模式两个方面进行了规定。在每个组件规范中，给出了模式描述和扩展描述的规范描述，供不同的应用类型和使用场景选择、组合使用。 1.1规范的目的 ●在产品开发过程中，给不同部门的相关人员提供统一的规范与指导，使沟通与合作顺利 有效地进行，以保证产品界面的最终规范化实现； ●从一点一滴入手解决公司产品的可用性问题：使操作更人性化，减轻用户的认知负担， 改善产品的用户体验，提升产品的市场竞争力； ●使产品在界面外观和操作行为上形成一致，加强公司产品的品牌化特征。 1.2规范适用的范围 广传项目部内的所有产品。 1.3规范适用的人群 参与产品设计的所有人员、前端开发人员及测试人员等。 注：从正式发文之日起属于新项目范畴的必须遵循此规范，对于已有项目进行重大版本升级的项目要遵循此规范。
2基本原则 以下原则主要用来说明此规范的指导思想与设计依据。简单描述如下，以供该文档的阅读者参考和使用。具体的原则描述请参见《界面设计指南》。 2.1一致性 ●视觉一致：在同一产品内，所有的同类界面元素在相同的应用环境下，界面外观在视 觉上应该保持一致；否则，界面外观要予以区分； ●操作行为一致：类似场景的界面设计，其操作方式必须保持一致；当操作行为相同时 要保持视觉上的一致；当操作行为不同时，在视觉上就一定要有所区别； ●外观与使用者的预期一致：保持对象与其行为相符，保持不同作用的对象外观的不同； 视觉元素的外观及其操作结果，必须与用户的心理认知相符。 2.2简洁性 ●减轻视觉负担：使用尽可能少的元素，不提供与当前任务无关的信息； ●简明的文字表述：文字表述必须简明扼要、清晰易懂，内涵丰富，并易于理解和记忆； ●操作简单：减少冗余的操作步骤。 2.3避免干扰和打断 ●避免干扰：明确用户在特定界面中的首要任务和目标，尽可能避免该界面上的视觉噪 声和其它干扰。 ●避免打断：让用户的操作连贯顺畅，避免使用模态对话框（弹出的独占焦点的对话框） 打断用户的工作。 2.4减轻用户记忆负担 ●认知明确：产品中界面元素外观要明晰，易于辨别；产品的逻辑意义要合理，导航要 及时准确； ●系统智能化：提供默认值；帮助用户记住尽可能多的信息，最低限度地从用户那里索 取信息； ●合理的隐喻和习惯用法：使用用户熟悉的，符合使用习惯的隐喻，及通用的习惯用法， 为用户的任务提供直观易用的界面； ●有效的启示：提供具有明确引导性的启示来指导用户正确操作（启示：某对象用来说 明自身可以如何使用的外观属性）。 2.5及时有效的反馈
人机交互界面设计规范
人机交互界面设计规范 （讨论稿） Hygrand 上海华冠电子设备有限责任公司 Hygrand Electronic Equipment CO., LTD.Shanghai
1. 必须在编码之前完成，否则就成花架子了。 2. GUI规范不是一蹴而就，它和设计相互迭代，彼此补充，相互完善。 3. GUI规范的内容70％是通用原则，涉及产品图形控件的基本属性和构建的基本参数和原则，30％ 是与项目或产品特点相适应的内容，这部分内容就是在设计过程中迭代产生。 1.概述 <目的、适用项目、基本风格> 2.通用指导原则 2.1.易用性 理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。如按钮名称应该易懂，用词准确，要与同一界面上的其他按钮易于区分。 <补充易用性细则> 完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。 复选框和选项框要有默认选项，并支持Tab选择。 …… 2.2.规范性 通常界面设计按Windows界面的规范，即包含“菜单条、工具栏、状态栏、滚动条、右键快捷菜单”等的标准格式，界面遵循规范化的程度越高，则易用性相应的就越好。 <补充规范性细则> 工具栏的图标能直观的代表要完成的操作。 标签提示：字体为加重、宋体、黑色、无边框。 对齐方式：左对齐、一般文字、单个数字、日期等。 等待过程：在需等待时间较短(0-10秒)的情况下应将鼠标显示成为沙漏；当需10秒以上时，要显示进度条等。 菜单深度一般要求最多控制在三层以内。 ……
2.3.美观与协调性 界面应该适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力。 <补充美观与协调性细则> 父窗体或主窗体的中心位置应该在对角线焦点附近。 按钮的大小要与界面的大小和空间要协调。 …… 2.4.独特性 在框架符合以上规范的情况下，设计具有自己独特风格的界面尤为重要。尤其在商业软件流通中有着很好的迁移默化的广告效用。 <补充独特性细则> 安装界面上应有单位介绍或产品介绍，并有自己的图标。 登录界面上要有本产品的标志，同时包含公司图标。 …… 2.5.快捷方式 在菜单及按钮中使用快捷键可以让喜欢使用键盘的用户操作得更快一些，在Windows 及其应用软件中快捷键的使用大多是一致的。 <补充快捷方式细则> 文件操作：如打印、关闭相应的快捷键。 系统菜单：如工具、帮助等的快捷键。 …… 2.6.安全性 在界面上通过下列方式来控制出错几率，会大大减少系统因用户人为的错误引起的破坏。 <补充安全性性细则> 应当注意尽可能避免用户无意录入无效的数据。 采用相关控件限制用户输入值的种类。 ……
典型产品设计案例
1.德芙巧克力： 德芙巧克力是世界最大宠物食品和休闲食品制造商美国跨国食品公司玛氏（Mars）公司在中国推出的系列产品之一，1989年进入中国，1995年成为中国巧克力领导品牌，“牛奶香浓，丝般感受”成为经典广告语。包装主题设计理念：色彩主要以暖色调为主，围绕LOGO的是咖啡色丝带，呼应了其倡导的“丝般感受”口感，直观的表现了产品特点。德芙的所有产品包装均是在此基础上加以来设计的。 德芙包装分析： 第一、在包装图形上面德芙巧克力包装主要是写实的产品形象为主，以此给消费者一种信任感和美感。 第二、在色彩上面德芙巧克力仍然沿用巧克力行业的经典咖啡色，并根据不同的产品辅以不同的系列色彩，在上面的包装中，主要的辅助色彩是粉 红，浪漫的粉红营造一种温馨的感觉。 第三、在字体设计上，德芙巧克力采用了以曲线为主的设计方法，以此更接近消费人群（青年情侣）。 德芙的外包装基本上都以巧克力色为底色，直切对购买者的视觉进行诱惑，同时金色的德芙字体和封口镶边，突出了巧克力的华丽，丝绸飘动的背景衬托出了德芙巧克力所推崇的丝滑诱惑，让人一看到包装就有一尝为快的冲动。 包装风格定位偏向于感性设计，将德芙巧克力“牛奶香浓，丝般感受”那般诱人表现的淋漓尽至。 2．海尔冰箱： 海尔“水波纹”系列冰箱设计理念源自于波光粼粼的海面，纯白色面板，半透明磨砂立体纹路设计将面板装饰如银色海面一样，在阳光下十分绚丽，对于年轻时尚消费者比较有吸引力。 在细节方面，海尔冰箱同样采用了触摸式按键操作，而且消费者能够在 显示屏上清晰的了解。另外在能效方面，海尔冰箱容量大，耗电量小。 在冷冻方面，这款海尔冰箱主要采用了抽屉式设计，能够很好的避免各 冷冻室直接的串味现象。同时也提供目前最为主流的制冰室，为用户生活提 供了多种方便。海尔BCD-576WJV冰箱外观设计简洁大气，但是又比较突出时
产品定义与概念_交互设计
交互设计 目录 设计简介 简单定义 主要容 交互设计的实践及发展 相关信息 交互设计和界面设计 导致交互设计视觉结构混乱的两大因素 设计简介 交互设计[1](Interaction Design) 作为一门关注交互体验的新学科在二十世纪八十年代产生了，它由IDEO的一位创始人比尔?莫格里奇在1984年一次设计会议上提出，他一开始给它命名为“软面（Soft Face）”，由于这个名字容易让人想起和当时流行的玩具“椰菜娃娃（Cabbage Patch doll）”，他后来把它更名为“Interacti on Design”――交互设计。 从用户角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。交互设计还涉及到多个学科，以及和多领域多背景人员的沟通。 通过对产品的界面和行为进行交互设计，让产品和它的使用者之间建立一种有机关系，从而可以有效达到使用者的目标，这就是交互设计的目的 简单定义 交互设计的定义： 简单的说，交互设计是人工制品、环境和系统的行为，以及传达这种行为的外形元素的设计与定义。不像传统的设计学科主要关注形式，最近则是关注容和涵，而交互设计首先旨在规划和描述事物的行为方式，然后描述传达这种行为的最有效形式。 交互设计借鉴了传统设计、可用性及工程学科的理论和技术。它是一个具有独特方法和实践的综合体，而不只是部分的叠加。它也是一门工程学科，具有不同于其它
科学和工程学科的方法。 主要容 交互设计是一门特别关注以下容的学科： 1、定义与产品的行为和使用密切相关的产品形式。 2、预测产品的使用如何影响产品与用户的关系，以及用户对产品的理解。 3、探索产品、人和物质、文化、历史之间的对话。 交互设计从“目标导向”的角度解决产品设计： 1、要形成对人们希望的产品使用方式，以及人们为什么想用那个这种产品等问题的见解。 2、尊重用户及其目标。 3、对于产品特征与使用属性，要有一个完全的形态，而不能太简单。 4、展望未来，要看到产品可能的样子，它们并不必然就像当前这样。 在使用，软件，消费产品，各种服务的时候（实际上是在同它们交互），使用过程中的感觉就是一种交互体验。随着网络和新技术的发展，各种新产品和交互方式越来越多，人们也越来越重视对交互的体验。当大型计算机刚刚研制出来的时候，可能为当初的使用者本身就是该行业的专家，没有人去关注使用者的感觉；相反，一切都围绕机器的需要来组织，程序员通过打孔卡片来输入机器语言，输出结果也是机器语言，那个时候同计算机交互的重心是机器本身。当计算机系统的用户越来越由普通大众组成的时候，对交互体验的关注也越来越迫切了。 因此交互设计（InteractionDesign）作为一门关注交互体验的新学科在二十世纪八十年代产生了，它由IDEO的一位创始人比尔?莫格里奇在1984年一次设计会议上提出，他一开始给它命名为“软面（SoftFace）”，由于这个名字容易让人想起和当时流行的玩具“椰菜娃娃（CabbagePatchdoll）”，他后来把它更名为“InteractionD esign”――交互设计。 从用户角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。交互设计还涉及到多个学科，以及和多领域多背景人员的沟通。 通过对产品的界面和行为进行交互设计，让产品和它的使用者之间建立一种有机关系，从而可以有效达到使用者的目标，这就是交互设计的目的。 为什么要进行交互设计？
产品设计案例汇总
充电桩服务客户：国家电网 清洁能源和电动汽车的广泛应用，将改变人类发展的轨迹,低碳环保和可持续发展理念成为普遍价值标准,人类的生活状态趋于自然和谐. 两条正反弧线在空间中形成交错的两个面由此组成了正面外观富有张力和层次感的造型特征. 材质的对比增强了主体特征的视觉印象我们希望塑造一种理性的,稳定的形象虽然是设备却拥有经典的品质感. 考虑到夜间灯光直射对司机的干扰,我们选择了”间接光源”的方式自然漫射的灯光符合光效设计趋势. 西门子火灾探测器 服务客户：德国西门子 为德国西门子设计，考虑德国人具有的风格，习俗，将产品定位在简洁硬朗大气的设计风格，功能至上的设计理念。 造型方面，将声孔与警告灯巧妙结合，形成产品识别性，并与产品LOGO相互呼应，达到视觉平衡. 地铁自动票务系统 服务客户：三星 项目背景：
目前，国际化都市的地铁都拥有软硬件设施完备、手段先进的地铁售检票务系统设施。他们正在使用近年来新出现的各种先进技术手段进行此项目的开发。地铁售检票系统设施的自动、半自动售票机、查询机、检票机已在大多数国际化城市广泛使用，很大程度上节省人力物力资源，并达到了十分明显的经济效果。如国际化大都市法国巴黎、日本东京、中国香港等均早已全面采用该系统设施，并一致认同其先进性和适用性等技术性能。我国的地铁票务系统设施的开发和完善，属于初级阶段，目前大部分设备直接靠进口并需要购买相应的相关系统软件，不仅费用昂贵而且我们掌握不了技术；而此项目的自主开发设计迫在眉睫。尽快地学习发达国家的相关技术，为我国的地铁票务设施的全面铺开和完善是我们正要加紧做的一件大事。 目前国内的地铁票务系统设施完全靠进口和直接购买其相关软件系统，没有自己的研发能力和团队，我们迫切需要建立独立自主的AFC自动票务系统的工业设计研发团队。 项目目的： 通过系统的自主研发，突破国际的技术保护，掌握系统专业的AFC票务系统技术经验。更好的运用到后续项目的开发和实施，推广我们的技术研发成果。 项目效益： 1 北京地铁的AFC的自动票务系统将大大提高城市交通运转效率、方便市民、降低运营公司成本，使我们的轨道交通自动化技术达到了国际先进水平，增加我们的国际竞争能力和北京的国际形象。
交互设计还是工业设计——苹果公司设计师弗雷迪·安祖尔斯访谈
交互设计还是工业设计——苹果公司设计师弗雷迪·安祖尔斯访谈 ?Update:2010-04-23 ?采访：吴琼翻译整理：曹程、李馨 ?来源: 装饰杂志社 内容摘要 弗雷迪·安祖尔斯（Freddy Anzures）现在是苹果人机界面小组的设计师，参加过iPhone的设计，接受过各大媒体的采访。2009年10月中旬，弗雷迪应邀参加了清华大学美术学院举办的2009年北京交互设计国际会议，本刊借机对他作了一个访谈。他从卡耐基梅隆大学毕业，在匡威实习，在青蛙设计工作，目前又到了苹果公司，弗雷迪非常活跃，不断地探索新领域。从他机智的对答中，我们也可以看出他对交互设计以及设计本身的理解。 从工业设计到交互设计 弗雷迪是一个精力充沛、非常健谈的人，在北京参会的这两天日程很紧，他仍会抽空四处游览，深夜才归，继续整理讲稿，以致负责陪同的学生几欲罢工。他的健谈也让人敬佩，我们准备了不少问题，想让他谈谈从工业设计向交互设计转行的选择和经历，往往稍作提示，他便滔滔不绝，将从卡耐基梅隆大学，到匡威、青蛙设计，再到苹果公司的经历和盘托出，其中诸多细节，非常有趣。 装饰：你是学工业设计出身的，那么你认为工业设计和交互设计有什么关联？你喜欢交互设计还是只是毕业后机缘巧合开始从事这方面工作？ 弗雷迪：有众多从事不同种类设计的设计师，有从事工业设计的、平面设计的、交互设计的等，我们却习惯用“设计师”这一个词来统称。我认为，设计就是设计，不应该被分类。在学习工业设计时主要是制作产品，同时你也在与这些产品进行互动。打个比方，这个杯子（指采访现场的一个杯子），它就是靠这个把手来与人互动的，对吗？虽然这不是电子屏幕，但不管它是什么，某个工业产品也好，电脑也好，海报也好，这里要强调的是你得拥有一种与事物进行互动的敏锐力。我认为设计就是要有这种敏锐，因为所有设计都是交互设计。要回答有关我如何从工业设计跨入交互设计这个问题，也许我该先讲点我的过去。我在卡耐基梅隆大学读书时，主修工业设计，并在1999年获得工业设计学士学位。毕业后，我却不想从
绿色设计产品实例[1]
触动心灵的绿色 紧随科学研究和舆论领袖的脚步，设计师和产品生产者也在日益注重环保和可持续性。作为新锐设计力量的集中代表，Droog一直也关注着产品设计的人性化，并且不断通过主体性的设计延伸创意的触角。通过“触摸绿色”的设计主题，Droog着急众多年轻设计者从各个角度对于可持续的发展话题提供某些启发或灵感。事实上，所有设计者都在努力用全新的创造展现各种可能性。 那么，最完美的可持续性是怎样的？人们都知道这是一个复杂的概念，往往是这里做对了，可是却会对别的地方产生不良的影响。譬如生物汽油，看上去对环境很好，实质上却会对粮食供应产生破坏性影响。现在人们已经了解了这个问题的双重性，并且认识到在设计中情况也是如此。将一天办公室中废弃的纸张收集起来制作一件家具，会对环保又帮助么？至少将浪费降低到最低程度的想法是指导我们走向正确方向的第一步。 为“触摸绿色”献计献策的年轻设计者们都在用各自不同的方式诠释绿色的概念，包括通过外观改进可持续性存在的缺陷或者巧妙使用节能技术。而米那勒﹒马依达（Minale Maeda）的低燃点瓷，SMAQ的保温椅，克里斯蒂﹒梅因德马(Christien Meindertsma)的编制作品都向人们证明了工业生产并没有将手工制作彻底拒之门外。当然，还有更多贴近“绿色”的想法，一起看个研究吧。 折叠围栏 最好禁止使用塑料袋，这种看法是正确的。但是只要它们存在于人们的生活中，我们就不得不解决这个问题。像马丁﹒阿祖做的那样，吧废弃的材料编织折叠刀铁框架立做成一个折叠围栏。利用已使用过的材料可以制造出不同颜色、质地和透明度的产品。 作为与“荷兰现代设计代名词”Droog Design最早合作的设计师之一，德桥（Tejo Remy）以对废弃材料和原有旧物品的巧妙利用，重新设计让人耳目一新，印象深刻，并被看做Droog Design最具颠覆性和最近草根本色的设计师。他不满传统设计观念，以挑战当时主导性形式风格的姿态推出了“抽屉式”，在引起设计界骚动的同时，预示了一个充满乐趣与智慧的设计新时代即将到来。 在回忆艺术里，人们通过将房子里的物品与情景联系在一起，使得回忆狠容易的被唤醒。“抽屉柜—你不能扔掉自己的回忆”的灵感正来源于德乔对记忆所作的探索与应用。抽屉柜是一些旧抽屉的集合，将捡来的二手抽屉放在新的外壳中，以稍显凌乱的方式叠摞在一起，然后用亚麻绳捆绑在一起，使用者可以方便增减抽屉的数量。在他看来，由就抽屉组成的柜子成为记忆系统的一个隐喻。随意而偶然排列的状态，让人产生急切和执着的感觉。这样的设计不仅仅是废旧抽屉的重新利用，也提供了物品定制的独特和重要方式。德乔说，他并不想设计，只是即兴创作，当他找到这些抽屉时就接受了它们的状态，使用者可以按自己意思再上面做出增减。
交互设计的行为在产品设计中的应用
交互设计的行为分析在产品设计中的应用研究 赵震，吴晨，刘超 （河北联合大学，唐山063009） 摘要：简要介绍了交互设计的情况并同时阐述了其中行为分析的目的、方法、作用，论述了产品设计中引入行为分析方法的重要性，进而分析了行为分析在产品设计中的应用过程。提出了在产品设计过程中通过确定“角色”来分析人使用产品的行为特点和规律，并根据分析结果建立产品原型，再对产品的原型进行评估测试的产品设计过程。关键词：交互设计；行为分析；产品设计；原型设计中图分类号：TB472 文献标识码：A 文章编号：1001-3563（2012）06-0073-05 The Application Research for Behavioral Analysis of Interaction Design in Products Design ZHAO Zhen ，WU Chen ，LIU Chao （Hebei United University ，Tangshan 063009，China ） Abstract ：It briefly introduced the concept of interaction design.In addition,object,method and significance of behavioral analysis are illustrated.Besides,by expounding importance and detailed process of behavioral analysis in product designing,it proposed a product designing process that first identified behavioral characteristics and regularities of specific users,then by the results of which,built a product prototype,and evaluated and tested of the product prototype finalize the whole process. Key words ：interaction design ；behavioral analysis ；products design ；prototype design. 收稿日期：2011-08-30 基金项目：河北省教育厅基金项目（Z2010264） 作者简介：赵震（1973—），男，河北乐亭人，硕士，河北理工大学讲师，主要研究方向为工业设计及交互设计。 在日常生活中，经常会听到有人对新买的电磁炉、微波炉等电器因误操作而怨声载道，也时常看到很多人在ATM 机前因信用卡被意外吞掉而束手无策。类似的事情屡见不鲜，出现这些问题的原因是人们智商出了问题还是产品本身存在着缺陷？如果是智商问题，为何有如此之多的怨声？这说明产品在设计上还是存在着不足，没有很好地满足人们使用要求，以致人们在使用上造成误解，产生操作失误等情况。因为人对事物认知有先后主次之分，已形成行为方式的秩序关系。产品设计过程中如果没有深入分析人们在使用中的行为方式，势必造成人们在认知过程中的误解。笔者从用户的行为方式入手，分析人的行为特征和行为习惯，并根据行为方式分析的结果建立产品原型，通过原型评估测试产品合理性之后，完成方案的产品化。 1关于交互设计 随着技术的快速发展以及广泛应用，多点触摸、手势交互、语音输入、虚拟现实等技术逐渐走入寻常百姓的生活，同时也衍生了形式多样的产品。人们在享受产品新颖实用功能的同时，却又在忍受着眼花缭乱的操作界面给人们带来的困惑。相比传统产品比如电视、电话、洗衣机、收音机，直接、透明、易学、易记的操作形式，目前很多产品操作复杂、功能隐匿、操作上难学、难记。其原因在于人们在把高科技、新技术转化成产品的过程中，热衷于实现新颖的产品功能，却忽视了对人的关怀、理解，淡忘了人是产品的使用主体，产品给人们带来的应该是时尚、便捷、易用的使用体验，而不是面对着眼前“冰冷的产 赵震等交互设计的行为分析在产品设计中的应用研究 73
【精品报告】常用中后台交互设计控件使用场景与规范总结
常用中后台交互设计控件使用场景与规范总结 最近刚完成平台安畅云 2.0 的改版设计，平台模块很多，经常存在很多类似的页面和组件，若不制定统一的规范和控件，则会导致很多重复的工作，大大降低产品的设计效率； 同时，平台的一致性也得不到保障。 所以，我们视觉、交互、前端的小伙伴们针对我们踩过的坑，大家认真总结和提炼出一个 符合公司定位的设计规范，统一公司项目的前端 UI 设计，规避不必要的设计差异和实现 成本，实现设计和前端资源的效率最大化。 此设计规范主要分享了中后台常用设计组件的定义、组成、使用场景及注意事项。 字体 概述 字体是界面设计中最基本的构成元素之一，用户通过文字来理解内容和完成任务，合适的 字体将大大提升用户的阅读体验及工作效率。在安畅云项目的字体使用中，为了使页面的 视觉层次更加清晰，我们从以下三方面来使平台的字体符合易阅读和美观的要求。 合理的使用不同的字重、字号和颜色来强调界面中需要突出的信息； 尽量使用单种字体，使用多种字体会让界面看起来零散和杂乱无章； 遵循 WCAG 2.0 标准（标准详情见 https://https://www.360docs.net/doc/2619333334.html,/Translations/WCAG20- zh/#visual-audio-contrast），字体在使用时与背景颜色的对比值满足无障碍阅读的最 低标准。 字体使用建议 中文字体优先级：PingFang SC、Hiragino Sans GB 、Microsoft YaHei（平台使用字体）英文字体优先级：Helvetica Neue、Helvetica、Arial（平台使用字体）
字号使用建议 行高使用建议 行高也是影响用户阅读体验的重要因素之一，我们查阅资料得知西文的基本行高通常是字号的 1.2em 左右，而中文因为字符复杂，所以中文行高需要更大。现在公认1.5em 至1.8em 之间会有一个比较好的视觉阅读效果。 安畅云项目行高计算公式：行高值=字号 x 1.5，例如：12 号字体的行高为 18px，14 号字体的行高为 21px。
产品设计流程实例说明修订版
產品設計流程實例說明 Document number：PBGCG-0857-BTDO-0089-PTT1998
设计开发流程: 由於一般的厂商普遍对於生产品质管制与研发技术相当地重视,加上资讯的快速流通,使得各家同类商品在性能与品质上的差异已逐渐地缩小,虽然工业设计的基本观念是"Form Follows Function-造形即机能",但面对市场商品的多元竞争压力,工业设计更需从另外一些不同的角度去"将市场的竞争与需求转换成产品的新造形,新趣味以提昇具有吸引消费者的附加价值, "-扮演着创造新价值的角色(Creating value)正如台湾在产品设计上的策略所强调的便是Innovalue! 一个新产品的在设计开发,大概可分为三个阶段即"问题概念化,概念视觉化,设计商品化" 对企业而言在展开工作时,会将内部各机能别的单位与专业人员整合起来,委外设计时,企业外部的设计公司则会扮演其中某一环节的工作角色以发挥其功能,不论是在企业内进行或以外包的方式展开,各部门,组织间的沟通与相互的专业尊重,将会是执行的重点与关键,现以案例-电冰箱的设计流程来加以说明. Concept Definition 问题概念化:
首先针对将要设计发展的产品作全盘性的了解,透过资讯收集与市场调查的方法,去探询市场上同类产品的竞争态势,销售状况及消费者使用的情形(包括的操作的习惯,使用後的抱怨点与对新功能潜在的需求)还有市面上的流行事物.在分析评估後得加上公司发展策略的考量,以企划出新产品的整体"概念"! 这样的概念通常是以文字格式来作叙述,会将"市场定位","目标客层" ,"商品的诉求","性能的特色"与"售价定位"作定义式的条列描述! 概念的形成的过程是需要资讯,经验与转换的能力,亦就是如何将资讯情报转换产生市场上有意义的创意方向!通常我们会举行Focus Group群体座谈会,针对现有竞争的产品与及将推出市场的设计概念提案,与顾客直接面谈,将消费者的需求作了解与澄清,并对设计方向提供建议与决策的依据! 由於网路与资讯系统的快速发展,今天只要有心想去收集市场相关的信息,对於所有的厂商与设计公司来说,机会成本与资讯的涵盖面都会是相似地相同的!但由於组成的设计开发团队,各有其企业文化及产品策略的背景;所形成决策的主管其专长,喜爱与品味也不会相同,再加上每一个设计开发团队的创意活力不会相当,所以解读推研出来的概念与方向必然不同!
(产品管理)产品设计交互规范最全版
（产品管理）产品设计交互规范
产品设计交互规范 常州广传网络技术有限公司 编写：王英 2013年11月
目录目录2 1概述3 1.1规范的目的4 1.2规范适用的范围4 1.3规范适用的人群4 2基本原则5 2.1一致性5 2.2简洁性5 2.3避免干扰和打断5 2.4减轻用户记忆负担5 2.5及时有效的反馈5 2.6让用户放松心态，不怕犯错6 3产品交互通用规范7 3.1受范性指示7 3.2操作不可用状态7 4组件规范9 4.1表格9 4.2单元格数据14 4.2.1单元格数据展示14
4.2.2通讯录15 4.3信息列表17 4.4编号和序号19 4.4.1编号19 4.4.2序号20 4.5注册表单22 4.6联系方式28 4.7图片裁切32 4.7.1固定尺寸32 4.7.2自定义尺寸34 4.8翻页35 4.9日期输入39 4.9.1通过日历选择日期39 4.9.2年份跨度较大时的日期选择43 4.9.3等量条目分隔线45 4.10高级加密48 4.11进度条51 4.12图形化面包屑53 4.13星级评分54 4.14保留图标57 4.15弹出层59
4.1 5.1非独占焦点层59 4.1 5.2独占焦点层60 4.1 5.3局部独占焦点层62 4.16搜索63 4.16.1模糊搜索63 4.16.2精确搜索65 4.17数据添加68 4.17.1添加单个文件68 4.17.2添加多个文件69 4.17.3添加行73 4.18排序73 1概述 规范的制定采用UCD（以用户为中心的设计）方法，遵循ISO9241-11部分标准的要求。 设计过程以用户的使用习惯和心理需求作为出发点，在认真研究并参考了国内外各种优秀设计的基础上，制定出了适合我集团应用服务产品的设计规范。此外，为保证规范具有良好的可用性和广泛的适用性，UE研究室对设计出的每个模式都进行了严格的用户测试，并对各组件采取了不同应用场景的测试。 该规范从产品交互的通用规则和具体组件的交互模式两个方面进行了规定。在每个组件规范中，给出了模式描述和扩展描述的规范描述，供不同的应用类型和使用场景选择、组合使用。 1.1规范的目的
产品设计交互规范
产品设计交互规范 1407H 盛腾飞
目录 目录 2 1概述 (3) 1.1规范的目的 (4) 1.2规范适用的范围 (4) 1.3规范适用的人群 (4) 2基本原则 (5) 2.1一致性 (5) 2.2简洁性 (5) 2.3避免干扰和打断 (5) 2.4减轻用户记忆负担 (5) 2.5及时有效的反馈 (5) 2.6让用户放松心态，不怕犯错 (6) 3产品交互通用规范 (7) 3.1受范性指示 (7) 3.2操作不可用状态 (7) 4组件规范 (9) 4.1表格 (9) 4.2单元格数据 (14) 4.2.1单元格数据展示 (14) 4.2.2通讯录 (15) 4.3信息列表 (17) 4.4编号和序号 (19) 4.4.1编号 (19) 4.4.2序号 (20) 4.5注册表单 (22) 4.6联系方式 (28)
4.7图片裁切 (32) 4.7.1固定尺寸 (32) 4.7.2自定义尺寸 (34) 4.8翻页 (35) 4.9日期输入 (39) 4.9.1通过日历选择日期 (39) 4.9.2年份跨度较大时的日期选择 (43) 4.9.3等量条目分隔线 (45) 4.10高级加密 (48) 4.11进度条 (51) 4.12图形化面包屑 (53) 4.13星级评分 (54) 4.14保留图标 (57) 4.15弹出层 (59) 4.15.1非独占焦点层 (59) 4.15.2独占焦点层 (60) 4.15.3局部独占焦点层 (62) 4.16搜索 (63) 4.16.1模糊搜索 (63) 4.16.2精确搜索 (65) 4.17数据添加 (68) 4.17.1添加单个文件 (68) 4.17.2添加多个文件 (69) 4.17.3添加行 (73) 4.18排序 (73)
产品设计、产品运营、交互设计
产品设计、产品运营、交互设计 互联网同类产品竞争激烈，只有抓住用户的心才能持续走下去。产品要赢得用户的心，要从一些小的点来赢得用户。 第一部分：产品设计 这个部分，感受最深的是两个词：核心能力、口碑。这部分还着重提到了pony 对产品经理素质、开发人员心态的期望。 核心能力 任何产品都有核心功能，能帮助到用户，解决用户某一方面的需求，如节省时间、解决问题，提升效率等等。 很多产品经理对核心能力的关注不够，不是说完全没有关注，而是没有关注到度。核心能力不仅仅是功能上也，也包括性能上的。对于技术出身的产品经理，特别是做后台出来的，对于性能的关注，如果自己有能力、有信心做到对核心能力的关注，肯定会渴望将速度、后台做到极限。现在很多产品都没做好，一抓问题一大堆。如，前阵子网页速度优化，好多东西可以优化，一下提速好多，之前不知道都做什么去了。之前用户忍受了很久，同时浪费时间、浪费我们的资源。不抓，都没人理，很说部过去。要在性能方面放入更多精力。 谈到核心的能力，首先要有技术突破点。如做影音的时候，不是要做人家有我也有的东西。以前公司做的你有我有的东西，总是排在第二第三，虽然也有机会，但缺乏第一次出来亮相失去用户的认同感。 第一要关注你的产品的硬指标，在设计和开发的时候要考虑到外部会将对它与竞争对手做评测。如播放能力，占用内存。qq影音的核心性能和速度直接超越暴风影音。这样就能看到用户很多的好评和口碑。所以之后如果qq影音不出大问题，发展的势头将会很好。 硬指标评测cpu占用、高清加速，当时也有很多发展方向，如网络播放啊、交流啊、分享啊，也是思路。现在都砍掉，就是要做播放器，是用户的需求，纯用户需求不需要多少钱的。高清的，并不是很多人需要的，但是是高端用户的需求（这个后面口碑创造会再提到）。只有硬指标满足了，用户说，我这个破机器，暴风影音不能放，qq影音能放。这句话说出来，这样口碑就出来了。用户知道你行，差异化出来了。口碑要有差异性。 核心能力要做到极致。要多想如何通过技术实现差异化，人家做不到，或者通过半年一年才能追上来。 比如，用户总评论qq的时候说用 qq的理由是传文件快，可以建群。于是这些就是我们的优势，那我们就要将优势发挥到极致。我们需要更加深入的去想，要想到要不要做传输速度、中转啊。离线传文件在邮件体现就是一个中转站，超大文件，也不难，就是要去做。产品部门很快的去做，去测试。用户用的量也不一定大，但几个月用一次，口碑就来了。用户会说，我要传大文件，找了半天