UI设计培训

UI设计培训实习生吴超201205UI设计培训UI设计基本概念UI设计基本流程UI界面用户体验设计原则与规范总结一UI设计的基本概念UI设计基本概念UI即UserInterface(用户界面)的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计主要包括三个部分：交互设计，用户研究，界面设计。UI设计基本概念交互设计设计软件的操作流程，树状结构，软件的结构与操作规范等。用户研究测试交互设计的合理性以及图形设计的美观性。界面设计即图形设计，国内目前大部分UI工作者都是从事这个行业。也有人称之为美工，但实际上不是单纯意义上的美术工人，而是软件产品的产品外形设计师。二UI设计基本流程UI设计基本流程基于UI设计三部分的UI设计流程是从一个产品立项开始，主要分为六个阶段：基础调研，产品分析，交互设计（功能结构和交互流程设计），原型设计（信息架构和界面原型设计），详细设计（详细设计和伪代码编写），设计维护（研发跟踪和设计维护）。2020/3/138竞争产品分析领域调研产出物新产品开发任务产品定位用户分析产品概述功能需求规格整理产出物第一次Check是/否通过？概念模型分析功能结构图使用场景分析交互流程分析产出物第一次Check是/否通过？信息架构和界面原型要点说明产出物第一次Check是/否通过？详细设计设计和逻辑说明产出物第四次Check是/否通过？完成设计维护进入设计维护EndBASICRESEARCHPRODUCTANALYSEINTERACTIONDESIGNPROTOTYPEDESIGNDETAILEDDESIGNUSERUI设计基本流程UI设计基本流程第一阶段：基础调研2020/3/139竞争产品分析领域调研产出物新产品开发任务UI设计基本流程第二阶段：产品分析2020/3/1310产品定位用户分析产品概述功能需求规格整理产出物第一次Check是/否通过？UI设计基本流程第三阶段：交互设计（功能结构和交互流程设计）2020/3/1311概念模型分析功能结构图使用场景分析交互流程分析产出物第二次Check是/否通过？UI设计基本流程第四阶段：原型设计（信息架构和界面原型设计）2020/3/1312信息架构和界面原型要点说明产出物第三次Check是/否通过？UI设计基本流程第五阶段：详细设计（详细设计和伪代码编写）2020/3/1313详细设计设计和逻辑说明产出物第四次Check是/否通过?UI设计基本流程第六阶段：设计维护（研发跟踪和设计维护）2020/3/1314完成设计维护进入设计维护EndUI设计基本流程2020/3/1315交互设计视觉设计CSS/HTML编码生成产品原型（线框图）生成产品模型（效果图）生成产品DEMO（效果图）实现产品（最后阶段）UI设计基本流程一、生成产品原型Prototype（线框图)UI设计基本流程二、生成产品模型Mock-up（效果图）UI设计基本流程三、生成HTML/CSS页面Demo就是按照原型和模型用HTML(XHTML)/CSS/JavaScript等等前端技术实现出来，以便后端的开发工程师可以接手编码。三UI界面用户体验设计原则与规范UI界面用户体验设计原则与规范总体原则1.以用户为中心；2.清楚一致的设；3.拥有良好的直觉特征；4.较快的响应速度；5.简单且美观。UI界面用户体验设计原则与规范界面风格1.使用一致性；2.使用安排和流程；3.使用对齐和分组；4.使用强调和可视的提示；5.使用空格；6.警惕空洞和注意大小；7.考虑使用资源或预定义的布局网格。UI界面用户体验设计原则与规范使界面符合用户的使用习惯UI界面用户体验设计原则与规范Windows的可视提示1.可以单击凸起的项目；2.可以单击当鼠标从其上移过时突出显示的项目；3.不能单击下凹的项目；4.可以编辑具有白色背景和闪烁垂直条（光标）的项目；UI界面用户体验设计原则与规范Windows的可视提示5.不能编辑具有灰色背景的项目；6.灰色项目是被禁用的；6.可以拖动凸起的项目；UI界面用户体验设计原则与规范交互1.尽量提供对所有功能的键盘访问；2.尽量提供对所有功能的鼠标访问；3.确保具有明显后果的操作要求用户进行明确的选择；4.对于使有耗时的操作都给出反馈；5.确保单击和双击的一致性;UI界面用户体验设计原则与规范交互设计—Don'tmakemethinkUI界面用户体验设计原则与规范交互6.不要使用鼠标中键;7.保持分配的快捷键的一致性;8.将快捷键作为补充方式;9.避免水平滚动条。UI界面用户体验设计原则与规范程序1.简化默认配置；2.默认情况下，应用程序应该保持为最大化；3.实用程序应该在小屏幕范围内运行；4.使用“退出”命令终止程序。UI界面用户体验设计原则与规范窗体1.设计期间请注意窗体大小，尽量不要超过800*600；2.对话框窗体大小尽量不要超过640*460，留20给任务栏。并且高和宽（或W宽和高）的比应该大致保持为3:4（或4：3）。UI界面用户体验设计原则与规范布局和间距窗体控件布局和间距尽量保持与Windows标准一致。控件与窗体的上、下、左、右边距为7象素。右下角主命令按钮之间的间距为6象素，如果主命令按钮在右上角，之间的间距则为4象素。主命令按钮一般情况为75×21象素，如果按钮的文本很长，应该适当加宽按钮的宽度。（1）（2）（5）（3）（4）UI界面用户体验设计原则与规范UI界面用户体验设计原则与规范系统响应时间1.响应时间长度界面设计:0-10秒鼠标显示成为沙漏；10-18秒由微帮助来显示处理进度；18秒以上显示处理窗口，或显示进度条一个长时间的处理完成时应给予完成警告信息；UI界面用户体验设计原则与规范系统响应时间2.响应时间的易变性界面设计:用户感觉不到不考虑;用户稍微感觉到由微帮助提供易变性说明;容易性大而且时间绝对差别大显示易变性提示。UI界面用户体验设计原则与规范出错信息和警告1.信息以用户可以理解的术语描述；2.信息应提供如何从错误中恢复的建设性意见；3.信息应指出错误可能导致那些不量后果，以便用户检查是否出现了这些情况或帮助用户进行改正；UI界面用户体验设计原则与规范出错信息和警告4.信息应伴随着视觉上的提示，如特殊的图像、颜色或信息闪烁。5.信息不能带有判断色彩，即任何情况下不能指责用户UI界面用户体验设计原则与规范出错信息和警告6.让用户可以撤销动作;7.在执行具体的破坏性操作中要求用户确认。UI界面用户体验设计原则与规范控件1.尽量采用标准控件；2.将无效控件置为不可用；3.取消不必要滚动条。UI界面用户体验设计原则与规范命令按钮1.采用最小的宽度和标准的高度；2.针对国际化适当加宽按钮；3.将无效按钮置为不可用，以取消报错；4.总采用省略号来表示需要更多信息；UI界面用户体验设计原则与规范5.绝对不要指定双击行为；6.避免一组单选按钮中的选项个数超过8个。UI界面用户体验设计原则与规范菜单1.总用单个单词作为菜单标题；2.不要在菜单栏的文本间留有空隙；3.避免占多行的菜单栏；4.保持菜单稳定；UI界面用户体验设计原则与规范5.合理安排菜单项的顺序；6.将无效菜单为不可用来代替报错。UI界面用户体验设计原则与规范字体默认字体统一使用以下设置：Charset=GB2312_CHARSETName='宋体'Size=9Color=clWindowTextStyle=[]UI界面用户体验设计原则与规范字体1.尊重用户的字体选择；2.避免让人分心地字体；3.避免使用粗体和斜体；4.避免混合字体；UI界面用户体验设计原则与规范颜色1.使用系统颜色，尊重用户的颜色选择，避免使用固定颜色；2.根据内容而不是外观来选择系统颜色；3.不要用颜色作为传递消息的唯一方式。UI界面用户体验设计原则与规范各种细节1.不要发音和闪动；2.避免不必要的视频效果；3.用缩放功能提高文档可访问性；4.处理WM_DISPLAYCHANGE消息；5.基于光盘的程序的应该支持自动播放；6.支持用户。UI界面用户体验设计原则与规范符合用户习惯与预期总结UI的本意是用户界面，是英文User和Interface的缩写。从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系。界面设计要和用户研究紧密结合，是一个不断为最终用户设计满意视觉效果的过程。谢谢！！！