界面设计(UI)软件ui设计2.2-第二章课件.ppt

《界面设计(UI)软件ui设计2.2-第二章课件.ppt》由会员分享，可在线阅读，更多相关《界面设计(UI)软件ui设计2.2-第二章课件.ppt（26页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、UI即User Interface(用户界面)的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。什么是UI设计好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。UI设计从工作内容上分3个方向研究界面；研究人与界面的关系；研究人。研究界面图形设计师Graphic UI designer 软件产品的产品外形设计师，这些设计师大多是美术院校毕业的，其中大部分是有美术设计教育背景，例如工业外形设计，装潢设计，信息多媒体设计等。研究人与界面的关系交互设计师，interaction designer 在图形界面产生之前，长期以来U

2、I设计师就是指交互设计师。交互设计师的工作内容就是设计软件的操作流程，树状结构，软件的结构与操作规范（spec）等。一个软件产品在编码之前需要作的就是交互设计，并且确立交互模型，交互规范。交互设计师一般都是软件工程师背景居多。研究人 用户测试/研究工程师User experience engineer 任何的产品为了保证质量都需要测试，软件的编码需要测试，自然UI设计也需要被测试。这个测试和编码没有任何关系，主要是测试交互设计的合理性以及图形设 计的美观性。测试方法一般都是采用焦点小组，用目标用户问卷的形式来衡量UI设计的合理性。这个职位很重要，如果没有这个职位，UI设计的好坏只能凭借设 计师

3、的经验或者领导的审美来评判，这样就会给企业带来严重的风险性。用户研究工程师一般是心理学人文学背景比较合适。ui设计国内现状 目前在国内UI还是一个相对陌生的词，在国内对UI的理解还停留在美术设计方面，认为UI的工作只是描边画线，缺乏对用户交互的重要性的理解；另一方面在软件开发过程中还存在重技术 而不重应用的现象。许多商家认为软件产品的核心是技术，而UI仅仅是次要的辅助，这点在人员的比例与待遇上可以表现出来。UI即用户界面设计行业刚刚在全球软件业兴起，属于高薪技术设计产业，与国外在同步发展水平。其次国内外众多大型IT企业(例如：百度、腾讯、Yahoo、中国移动、Nokia、联想、网易、微软、盛大

4、、淘宝等众多企业)均已成立专业的UI设计部门，但专业人才稀缺，人才资源争夺激烈。瑭锦Tanjurd表示UI就业市场供不应求。我国UI市场尚在萌芽阶段，人才缺口巨大，目前，中国市场上的手机、软件、网站等产品，同质化程度非常高，过去企业在设计产品的时候，主要是在功能、质量或者产品外观上和竞争对手有所区别，而现在随着技术的进步和市场的发展，越来越多的企业意识到用户体验的重要性了，而这种用户体验的提升则主要依赖于UID的劳动。移动UI设计的五条原则 以用户为中心，考虑产品的使用环境 用户总是按照他们自己的方法理解和使用移动端，所以从用户的观点考虑，想用户所想，做用户所做成了设计师们的设计考量标准之一。

5、第二：合理的用户指引 由于手机界面本身的承载能力有限，加上每一款产品功能都会有不同程度的更新和完善，第三：扁平化设计之不一定扁平个人而言，采用什么样的设计风格，是由产品本身的目标以及要解决的问题来决定的，美与丑、操作难易并不完全决定了一个产品的成败。有一个非常的经典案例是赶集网产品总监布棉老师在一次讲课提到的美国最火的分类网站Craigslist，如果从扁平化的角度来看，真的是丑爆了。该网站上没有图片（最新版加上了一个地图），只有密密麻麻的文字，但虽然看上去颇为乏味，可是却是美国人最喜欢的网站之一。第四：动态数据可视化 数据可视化设计是将枯燥繁琐的列表和文字转换为直观的饼图、扇形图、折线型、柱

6、状图等丰富直观的设计元素，提高用户体验。而且现今数据可视化不只是静态展现数据，用户希望通过互动及时获取数据流，若以动态效果来呈现，能多维度呈现给用户实时信息，同时能与用户形成互动，提高数据表现的趣味性。动态数据可视化将更加强调数据转译实时更新的图形，以及动态的图形化表达。第五：多彩色风格的设计 多彩撞色更多的表现于多种纯色块的使用，就是很简单的纯颜色，只需要注意多彩配色的方式，就能得到很好的视觉效果。多彩色拼接的设计风格，一屏式的页面排版布局，总体来说是时尚大气简洁的设计.2023/6/4 16UE/UIUE/UI设计流程设计流程产品分析 产品定位从软件提供者的角度分析产品推出的意义和重点关注

7、的方面，实际考量、丰满决策层的idea，明确列出产品定位，通过讨论修缮取得决策层的认可；用户分析结合竞争产品的分析资料，采用定性分析的方法，获得对产品目标用户在概念层面的认识；产品概述以软件提供的身份，以最简短的文字，向用户介绍产品，突出产品对用户的价值。避免功能点的简单罗列，而应该在归纳总结的基础上突出重点；功能需求规格整理在归纳关键功能的基础上，结合竞争产品规格整理的领域认识，从逻辑上梳理需求规格列表，重在逻辑关系清楚、组织和层级关系清晰。划定项目（设计和研发）范围；产出物：用户分析文档和产品概述、功能规格列表产品定位用户分析产品概述功能需求规格整理产出物第一次Check是/否通过？202

8、3/6/4 17UE/UIUE/UI设计流程设计流程 第三阶段：交互设计（功能结构和交互流程设计）产品概念模型分析 从产品功能逻辑入手，结合对常见软件的经验积累和竞争产品的认识，加上对用户的理解，为产品设计一个尽量接近用户对产品运行方式理解的概念模型，成为产品设计的基础框架；功能结构图 在产品概念模型的基础上丰富交互组件，并理顺交互组件之间的结构关系；使用场景分析 模拟典型用户执行关键功能达到其目标的使用场景；交互流程分析 模拟在上述概念模型和功能结构决定的产品框架之中，支持使用场景的关键操作过程（即鼠标点击步骤和屏幕引导路径）；产出物：产品设计文档的交互设计部分概念模型分析功能结构图使用场景

9、分析交互流程分析产出物第一次Check是/否通过？2023/6/4 18UE/UIUE/UI设计流程设计流程 第四阶段：原型设计（信息架构和界面原型设计）信息架构和界面原型设计设计产品界面中应该包含的控件数量和类型、控件之间的逻辑和组织关系，以支持用户对控件或控件组所代表的功能的理解，对用户操作的明确引导；所有界面设计成为一套完整的可模拟的产品原型；设计要点说明对界面设计的重点添加说明，帮助涉众对设计的理解；产出物：产品设计文档的原型设计部分信息架构和界面原型要点说明产出物第一次Check是/否通过？2023/6/4 19UE/UIUE/UI设计流程设计流程 第五阶段：详细设计（详细设计和伪代

10、码编写）详细设计完善设计细节、交互文本和信息设计（Message box）；设计和逻辑说明对界面控件/控件组/窗口的属性和行为进行标准化定义，梳理完整的交互逻辑，用状态迁移图或伪代码形式表示；产出物：产品设计文档的详细设计部分第六阶段：设计维护（研发跟踪和设计维护）语言文档整理设计通过评审之后，把产品中所有的交互文本整理成excel文档，预备研发工作；研发跟踪维护进入研发阶段后负责为研发工程师解释设计方案、问题修改、文档完善、Bug跟踪等；产出物：产品语言文档，设计调整维护详细设计设计和逻辑说明产出物第四次Check是/否通过？完成设计维护进入设计维护End2023/6/4 20UE/UIUE

11、/UI设计流程设计流程第一阶段：基础调研 竞争产品分析寻找市场上的竞争产品，挑选3-5款进行解剖分析。整理竞争产品的功能规格；并分析规格代表的需求，需求背后的用户和用户目标；分析竞争产品的功能结构和交互设计，从产品设计的角度解释其优点、缺点及其原因，成为我们产品设计的第一手参考资料。领域调研结合上述分析基础和资料，纵观领域竞争格局、市场状况，利用网络论坛、关键字搜索等手段获得更多用户反馈、观点、前瞻性需求。产出物：相应的对比分析文档和领域调研报告竞争产品分析领域调研产出物新产品开发任务2023/6/4 21UE/UIUE/UI设计流程设计流程需求 需求 功能定义 功能定义 交互设计 交互设计

12、视觉设计 视觉设计 DEMO DEMOUI设计（交互/视觉/编码）实现 实现PM OR TEAMLEADER软件工程师2023/6/4 22UE/UIUE/UI设计流程设计流程交互设计 交互设计视觉设计 视觉设计CSS/HTML CSS/HTML编码 编码生成产品原型（线框图）生成产品原型（线框图）生成产品模型（效果图）生成产品模型（效果图）生成产品 生成产品DEMO DEMO（效果图）（效果图）实现产品（最后阶段）实现产品（最后阶段）2023/6/4 23UE/UIUE/UI设计流程设计流程一、生成产品原型 一、生成产品原型Prototype Prototype（线框图）（线框图）原型就是用

13、来让人改的。它存在的 原型就是用来让人改的。它存在的价值就体现在被修改了几次，被更 价值就体现在被修改了几次，被更新了几次，以及它的下一步被少改 新了几次，以及它的下一步被少改了几次。了几次。2023/6/4 24UE/UIUE/UI设计流程设计流程二、生成产品模型 二、生成产品模型Mock-up Mock-up（效果图）（效果图）在原型被大家接受之后，就该关心 在原型被大家接受之后，就该关心产品长得好不好看了。产品长得好不好看了。我们以 我们以“模型 模型”这个词来统称该步骤的交付 这个词来统称该步骤的交付物。和原型相比，它关注于产品的 物。和原型相比，它关注于产品的视觉设计，包括色彩、风格

14、、图标、视觉设计，包括色彩、风格、图标、插图等等。插图等等。2023/6/4 25UE/UIUE/UI设计流程设计流程三、生成 三、生成HTML/CSS HTML/CSS页面 页面Demo Demo就是按照原型和模型用 就是按照原型和模型用HTML(XHTML)/CSS/JavaScript HTML(XHTML)/CSS/JavaScript等等 等等前端技术实现出来，以便后端的开 前端技术实现出来，以便后端的开发工程师可以接手编码。发工程师可以接手编码。到此 到此UI UI部分基本完成，不知道大家对 部分基本完成，不知道大家对此流程有什么看法。不足之外还请大 此流程有什么看法。不足之外还请

15、大家纠正。一起讨论，把 家纠正。一起讨论，把UI UI工作流程做 工作流程做好。好。当然，如有条件，最好能参于下前期 当然，如有条件，最好能参于下前期调研，为能更好的理解用户需求，提 调研，为能更好的理解用户需求，提升用户体验。升用户体验。2023/6/4 26 这个流程不是一个快速开发的流程，虽然在用户分析中投机取巧节省了一点时间，但是在交互设计阶段需要消耗相当的努力和创造激情，当然还有时间和成本。在急于看到成果和关心“成本”的队伍中，很容易被一笔带过或敷衍了事，很多人习惯以看到界面设计框线图作为设计成果的标志，呵呵，画框线图其实是很简单的。缺少慎重的交互分析基础的框线图，很容易浮于形式而缺少内涵。