UI界面设计流程讲解

《UI界面设计流程讲解》由会员分享，可在线阅读，更多相关《UI界面设计流程讲解（68页珍藏版）》请在装配图网上搜索。

1、1会计学UI界面设计流程讲解界面设计流程讲解一、界面设计的概念一、界面设计的概念1、什么是界面设计？（难点）2、界面设计涉及的范围及学科3、界面设计的工作流程4、以用户为中心的界面设计原则(重点）参考书目：用户界面设计与制作交互设计UI进化论移动设备人机交互界面设计网络资料通过什么控制电视机？通过什么操作ATM机？ATM 机通过什么操作Photoshop程序？通过什么操作手机？一、界面设计的概念一、界面设计的概念1、什么是界面设计（UI）？界面UI即User Interface(用户界面)的简称。广义上来讲，UI界面是人与机器进行交互的操作平台，即用户与机器相互传递信息的媒介媒介。用户机器界面

2、一、界面设计的概念一、界面设计的概念一、什么是界面设计？界面设计即User Interface Design（用户界面设计）的简称，是指对软件的人机交互、操作逻辑、界面美观的整体设计。人机交互操作逻辑界面美观一、界面设计的概念一、界面设计的概念问题一：界面设计=版式设计？谓版式设计，就是在版面上，将有限的视觉元素进行有机的排列组合界面设计的内容包括：图形、文字、色彩、编排，使界面起到美化效果的作用。需要研究用户需求，研究目标用户。一、界面设计的概念一、界面设计的概念UI用户界面=+交互=版式考虑用户的心理需求，研究目标用户化的界面：n1.功能过于简单n2.登入没有体现按钮的特点，而不会单击n3

3、.密码输入框也没有做掩密处理，被盗号的风险系数增加一、界面设计的概念一、界面设计的概念三、界面设计涉及的范围及学科人机产品界面设计、移动设备界面设计、网页界面设计、软件界面设计界面设计是一种结合美学、计算机科学、心理学、行为学、人机工程学、信息学以及市场学等的综合性学科，强调人机环境三者作为一个系统进行总体设计。 一、界面设计的概念一、界面设计的概念四、界面设计的工作流程1）. 产品制作人，写产品计划书。 2）. 用户体验研究员，作调查分析。 3）. 信息建构师，设计产品架构。 4）. 交互设计师，作出互动流程。 5）. 视觉设计师，作出页面视觉设计。 6）. 前台工程师，前台开发。 7）.

4、后台工程师，后台开发。 8）. 用户体验研究员，做用户测试确保质量。一、界面设计的概念一、界面设计的概念一、界面设计的概念一、界面设计的概念线框原型、黑白原型稿线框原型、黑白原型稿一、界面设计的概念一、界面设计的概念产品原型产品原型一、界面设计的概念一、界面设计的概念界面设计界面设计n用到软件AXURE 或WORDn用户体验师:UE需要了解商业层面的内容，与PD配合，从商业价值的角度出发，对产品与用户交互方面的环节进行改良。挖掘用户的需求，对用户进行跟踪，调研，分析，做出相关的用户需求报告。心理学研究。nui 进行界面表现和美化，软件：PS/ AI/FLASH一、界面设计的概念一、界面设计的概

5、念五、以用户为中心的界面设计原则1）、一致性和必要的个性化2）、使用用户的语言3）、用户记忆负担最小化4）、用户界面的功能性5）、容易理解6）、清楚的报错信息7）、快捷方式的组合8）、连续性9）、方便退出10）、帮助系统一、界面设计的概念一、界面设计的概念1）、一致性和必要的个性化OFFICE OFFICE 软件风格一致软件风格一致 ，要有统一的字体字号、统一的色调、统一的提示用词、窗口在统一的位置、按钮也在窗口的相同的位置。目的是能够减少记忆量、减少出错概率而且能迅速积累目的是能够减少记忆量、减少出错概率而且能迅速积累操作经验。操作经验。个性化。在一致性下，适当突出该软件的个性化。在一致性下

6、，适当突出该软件的“个性化个性化”如如PPTPPT中不同于中不同于word word 有自己的动画效果有自己的动画效果一、界面设计的概念一、界面设计的概念2）、使用用户的语言界面中要注意使用用户的语言，而不是设计者的语言，最有效的方法：让数据说话，如询问用户、用户投票等。因此，用户使用系统的错误会降到最低。一、界面设计的概念一、界面设计的概念3）、用户记忆负担最小化浏览信息比记忆更容易，在设计时一定要考虑到减轻用户的记忆负担。一、界面设计的概念一、界面设计的概念4）、用户界面的功能性界面最基本的性能是具有功能性与使用性，通过界面设计，让用户明白功能操作，并将产品本身的信息更加顺畅的传递给使用者

7、，是功能界面存在的基础与价值用户界面一定要有基本的功能，设计者不能片面追求界面外观漂亮而导致华而不实。一、界面设计的概念一、界面设计的概念5）、容易理解大多数的用户都有丰富的生活经验，也就是使用各种工具或者玩具的经验。如果能够在界面设计中把这些积累的生活经验和界面视觉元素对应或这连接起来就会让用户更容易理解。如电子书界面，模拟翻书的设计可以很快让用户理解如何操作，并且给读者熟悉的阅读体验。者在CAD软件中每个常用工具都会有个相应的英文快捷键。直线工具：L(line)一、界面设计的概念一、界面设计的概念六、界面设计的常用软件Photoshop、Illustrator、Flash、3ds Max、

8、其他软件：Xara Xtreme绘制图标，是英国矢量图形软件公司Xara开发的老牌图像设计软件，被誉为“世界上速度最快的绘图软件”，用来绘图、处理图像、制作Web图形等。Axialis Icon Workshop是功能强大的、专门制作图标的编辑软件。一、界面设计的概念一、界面设计的概念6、界面设计的常用软件：Xara Xtreme一、界面设计的概念一、界面设计的概念6、界面设计的常用软件：Axialis Icon Workshop三、图标制作三、图标制作三、图标制作三、图标制作1、图标设计的意义1）、视觉设计的重要组成部分，用于提示与强调2）、使产品的功能具象化，更容易理解3）、使产品的人机界

9、面更具有吸引力，富含娱乐性4）、形成产品的统一特征，给用户以信赖感，便于功能的记忆5）、创造差异化、个性化的美，强化装饰性作用6）、图标设计是一种艺术创作、能提高产品的品味7）、图标设计的表现方式灵活自由、可以传达不同的产品理念8）、图标设计是在屏幕上展示产品的最佳方式三、图标制作三、图标制作1、图标设计的意义1）、视觉设计的重要组成部分，用于提示与强调2）、使产品的功能具象化，更容易理解三、图标制作三、图标制作1、图标设计的意义3）、使产品的人机界面更具有吸引力，富含娱乐性三、图标制作三、图标制作1、图标设计的意义6）、图标设计是一种艺术创作、能提高产品的品味三、图标制作三、图标制作1、图标

10、设计的意义6）、图标设计是一种艺术创作、能提高产品的品味三、图标制作三、图标制作1、图标设计的意义7）、图标设计的表现方式灵活自由、可以传达不同的产品理念三、图标制作三、图标制作1、图标设计的意义8）、图标设计是在屏幕上展示产品的最佳方式三、图标制作三、图标制作2、图标设计的原则1）、精美、直观、生动的图标三、图标制作三、图标制作2、图标设计的原则1）、精美、直观、生动的图标三、图标制作三、图标制作2、图标设计的原则2）、图标的唯一性准确、易识别、易理解三、图标制作三、图标制作2、图标设计的原则3）、系列图标风格统一、整体性强三、图标制作三、图标制作2、图标设计的原则4）、主题文化性三、图标制

11、作三、图标制作3、图标设计的规格图标文件的类型：.ico文件，图标文件大都是.ico格式图标的一般尺寸：16x16像素、32x32像素、48x48像素、64x64像素、96x96像素、256x256像素三、图标制作三、图标制作4、图标设计的流程1）、图标创意阶段看懂界面需求，对每个图标的定义要准确清楚。三、图标制作三、图标制作4、图标设计的流程2）、草图绘制阶段统一图标风格、统一透视三、图标制作三、图标制作4、图标设计的流程3）、草图渲染阶段一般使用Photoshop、Illustrator、Firework、Xara Xtreme pro等软件三、图标制作三、图标制作三、图标制作三、图标制作

12、谢谢！谢谢！一、界面设计的概念一、界面设计的概念1、什么是界面设计？（难点）2、界面设计涉及的范围及学科3、界面设计的工作流程4、以用户为中心的界面设计原则(重点）参考书目：用户界面设计与制作交互设计UI进化论移动设备人机交互界面设计网络资料一、界面设计的概念一、界面设计的概念界面设计界面设计一、界面设计的概念一、界面设计的概念2）、使用用户的语言界面中要注意使用用户的语言，而不是设计者的语言，最有效的方法：让数据说话，如询问用户、用户投票等。因此，用户使用系统的错误会降到最低。三、图标制作三、图标制作三、图标制作三、图标制作1、图标设计的意义1）、视觉设计的重要组成部分，用于提示与强调2）、使产品的功能具象化，更容易理解3）、使产品的人机界面更具有吸引力，富含娱乐性4）、形成产品的统一特征，给用户以信赖感，便于功能的记忆5）、创造差异化、个性化的美，强化装饰性作用6）、图标设计是一种艺术创作、能提高产品的品味7）、图标设计的表现方式灵活自由、可以传达不同的产品理念8）、图标设计是在屏幕上展示产品的最佳方式三、图标制作三、图标制作1、图标设计的意义7）、图标设计的表现方式灵活自由、可以传达不同的产品理念