备 课
Lesson Preparation
_2013____2014_学年 第__学期
Academic Year Semester
课 程 名 称 UI设计
Course
教材名称版 UI设计
Textbook and Edition
授 课 班 级 2011面班
Class
教 师 姓 名
Teacher
审 核
Approver
填写说明
1备课书写教案适专职教师兼职教师兼课教师
2承担教学务教师需书写纸质版教案媒体教学需教学务繁重电子版教案格式必须纸质版格式教案书写应学期授课计划相符合
3备课程中环节素根实际授课容进行填写：
授课课题：（教学章节标题项目名称）
教学目标求：（教学目标般说应包含知识教学力发展思想教育三方面容教学求指识记理解简单应综合应等层次）
教学重点难点：教学重点达确定教学目必须着重讲解分析容教学难点学生接受情况言学生学理解理解困难方确定教学难点
教学方法：（讨启发演示辩讲练结合案例教学情境模拟等）
教学手段：（媒体教学录带挂图幻灯片等）
授课时间：第 周
课时累计：
教学程：（体现教学步骤包括时间分配教学容教学进程）
作业布置：（含思考题讨题）
课反思：（课反思教案实施效果追记课前印课笔手写）
4 备课审核教研室（项目中心）
授课课题
认识界面门—UI设计说课
教学
目标求
通章学学生解UI中国发展UI什
教学
重点难点
教学重点：掌握UI中国发展UI什
教学难点：掌握UI什
教学方法
案例教学
教学手段
媒体
授课时间
第 九 周
课时累计
2
教 学 程
教学步骤教学容
时间分配
导入新课
UIUser Interface(户界面)简称UI设计指软件机交互操作逻辑界面美观整体设计UI设计仅软件变性品味软件操作变舒适简单充分体现软件定位特点
第节 UI什
软件设计分两部分：编码设计UI设计
教学步骤教学容
时间分配
编码设计家熟悉 UI设计陌生词专门事网站媒体设计完全理解UI意思UI意户界面英文User interface缩写字面户界面2组成部分实际包括户界面间交互关系
飞速发展电子产品中界面设计工作点点重视起做界面设计美工称UI设计师UI工程师实软件界面设计工业产品中工业造型设计样产品重卖点电子产品拥美观界面会带舒适视觉享受拉商品距离商家创造卖点界面设计单纯美术绘画需定位者环境方式终户设计建立科学性艺术设计检验界面标准某项目开发组领导意见项目成员投票结果终端户感受界面设计户研究紧密结合断终户设计满意视觉效果程
第二节 UI设计师做什
中国UI设计需断成长设计领域eicodesignTigocn lkkui design Robin design等国知名设计机构已进入探索UI设计道路
UI设计工作容说分3方UI 研究3素决定 分研究工具研究界面关系研究
研究界面
图形设计师Graphic UI designer
国目前部分UI工作者事行业称美工实际单纯意义美术工软件产品产品外形设计师
设计师美术院校毕业中部分美术设计教育背景例工业外形设计装潢设计信息媒体设计等
研究界面关系
交互设计师interaction designer
图形界面产生前长期UI设计师指交互设计师交互设计师工作容设计软件操作流程树状结构软件结构操作规范（spec）等软件产品编码前需作交互设计确立交互模型交互规范
交互设计师般软件工程师背景居
研究
户测试研究工程师User experience engineer
产品保证质量需测试软件编码需测试然UI设计需测试测试编码没关系测试交互设计合理性图形设计美观性测试方法般采焦点组目标户问卷形式衡量UI设计合理性职位重果没职位UI设计坏设计师验者领导审美评判样会企业带严重风险性
户研究工程师般心理学文学背景较合适
综述UI设计师：软件图形设计师交互设计师户研究工程师
中交互设计师：
UI义户界面英文Userinterface缩写UI设计师指事软件机交互操作逻辑界面美观整体设计工作
工作容：
负责软件界面美术设计创意工作制作工作
根种相关软件户群提出构思新颖高度吸引力创意设计
页面进行优化户操作更趋性化
维护现应产品
收集分析户GUI需求
第三节 UI设计中国现状
目前国UI相陌生词便洛设计UI设计道路断探索客户户需求常招聘广告写着：招聘界面美工界面美术设计师等等表明国UI理解停留美术设计方面认UI工作描边画线缺乏户交互重性理解方面软件开发程中存重技术重应现象许商家认软件产品核心技术UI仅仅次辅助点员例遇表现出 UI设计真正价值体现UI设计发展必程物质产品手机行业例手机刚刚进入市场时候价格贵惊通话外没什功时导技术家精力放信号机时间寿命等方面产品造型合理性少关心事境迁技术已完全达户需求商家创造卖点提高争力非常重视产品外观设计外频频推出短信彩屏铉彩信摄头等等样产品美观性易易学性化等等成产品卖点软件产品物质产品发展相计算机硬件限制编码设计成软件开发代名词美观亲图形化界面合理易交互方式没充分重视实际时期软件作软件程序软件产品
现着计算机硬件飞速发展软件程序已适应户求软件产品激烈市场竞争中仅仅强功远远够足战胜强劲手幸运国高瞻远瞩民族企业已开始意识UI软件产品带巨卖点例金山公司影霸词霸毒霸网标重视UI开发位金山产品类软件产品中首屈指联想软件UI部门积极开展户研究性测试易美观相结合推出双模式电脑幸福系列等成功UI范例联想赢全球消费 PC第三称号等等等等实践证明商家产品美观易设计方面投入会产出投入产出功领先性开发投入
承认现阶段中国领域西方发达国家相差距赶超代肩负历史命软件产品领域象物质产品样存工艺材料限制软件产品核心问题提高软件UI设计师力减员差距中国UI发展首关键问题
目前国院校没设立相健全UI设计专业提高UI设计师力关键提供良学交流资源环境国已交流设计网站介绍工业设计面设计服装设计绘画艺术媒体flash等UI设计直没受应关注仅仅放数码设计者面网页设计栏目里仅资源培养优秀设计师够必须信息快捷资源丰富设计水流专业权威UI设计学交流方适应日益发展UI设计师需求
教学步骤教学容
时间分配
作业布置
课反思
授课课题
认识界面门
教学
目标求
界面概述
教学
重点难点
重点：解什UI什界面
难点：界面概述
教学方法
案例教学
教学手段
媒体
授课时间
第 九 周
课时累计
4
教 学 程
教学步骤教学容
时间分配
导入新课着硬件技术飞速发展计算速度存储容量成软件开发员担心问题户关心问题否较容易舒适软件换言着眼点软件易性美观易美观取决户界面UI优劣
课讲解UI基理设计属性期具体学UI设计技巧制作技术前UI设计整体解
什事UI呢？UI意户界面英文Userinterface缩写字面户界面2组成部分实际包括户界面间交互关系样分3方分：户研究交互设计界面设计
教学步骤教学容
时间分配
1户研究
户研究包含两方面：性工程学（usability Engineering）研究提高产品性系统设计更容易学记忆二通性工程学研究发掘户潜需求技术创新提供外条思路方法（consumer insight）
户研究跨学科专业涉性工程学类功效学心理学市场研究学教育学设计学等学科户研究技术站文学科角度研究产品站户角度介入产品开发设计中
户研究通户工作环境产品惯等研究产品开发前期够户产品功期设计外观方面求融入产品开发程中帮助企业完善产品设计者探索新产品概念
户需求反馈途径检验界面交互设计否合理重标准
2交互设计
部分指机间交互工程交互设计程序员做实程序员擅长编码善终户交互软件然功较齐全交互方面设计粗糙繁琐难学困难样软件聪明进步感愚弄羞辱许操作电脑软件岗失业样交互电脑成恐惧科技怪兽交互设计程序员工作中分离出单独成学科机交互设计目加强软件易易学易理解计算机真正成方便类服务工具
3界面设计
漫长软件发展中界面设计工作直没重视起做界面设计贬义称美工实软件界面设计工业产品中工业造型设计样产品重买点友美观界面会带舒适视觉享受拉电脑距离商家创造卖点界面设计单纯美术绘画需定位者环境方式终户设计纯粹科学性艺术设计检验界面标准某项目开发组领导意见项目成员投票结果终户感受界面设计户研究紧密结合断终户设计满意视觉效果程
什UI
[常识] UI行业常名词缩写定义
什 UI ：
UI意户界面英文User interface缩写
什 GUI
Graphics User Interface 图形户界面
时称WIMPWindowIconMenuPointing Device 窗口图标菜单指点设备
什 HUI
Handset User Interface 手持设备户界面
什WUI
Web User Interface 网页风格户界面
什户界面设计：
机器互动程（Human Machine Interaction）中层面说界面（interface）心理学意义分界面分感觉（视觉触觉听觉等）情感两层次户界面设计屏幕产品重组成部分界面设计复杂学科参工程认知心理学设计学语言学等扮演着重角色户界面设计三原：置界面户控制减少户记忆负担保持界面致性
教学步骤教学容
时间分配
作业布置
课反思
授课课题
认识界面门—界面设计原分类
教学
目标求
解掌握界面设计原分类
教学
重点难点
重点：掌握界面设计基原分类
难点：掌握界面设计基原熟练运设计中
教学方法
案例教学
教学手段
媒体
授课时间
第 九 周
课时累计
6
教 学 程
教学步骤教学容
时间分配
节课说UI艺术性设计原方面问题结构设计基础参目标群体心理模型务达成进行视觉设计包括色彩啊字体呀页面等视觉设计原点学定注意喽
1）界面清晰明尤导航明确允许户定制界面图：
简单界面设计音频软件3D软件界面参数较复杂窗口结构更需逻辑清晰设计思路时候呢科学性肯定远远艺术性 @ l x7 N N E0 r a2）减少短期记忆负担说计算机帮助记忆例IE进入界面址等机器记住3 e#
教学步骤教学容
时间分配
3）赖认知非记忆譬印图标记忆拉菜单列表中选择等符合业界惯
4）提供视觉线索界面吸引力图：
5）提供默认(default)撤消(undo)恢复(redo)等功方面学解做真正UI设计师功方面定掌握喔然啦学怕心实简单Just do it
6）提供界面快捷方式
7）量真实事物类电话印机等图标设计尊重户验惯 r F1 A7 @＇ A9
8）完美视觉清晰度条理清晰图片文字布局隐喻户猜
图
9）界面协调致手机界面钮摆放惯左键肯定右键否定容摆放
10）样功样图形表示
11）色彩容整体软件量超5色系（特殊需例外）似颜色表示似意思
二界面分类
界面界面互动程中作方式分操作界面显示界面两类
通常操作界面起控制作户通操作界面发出信息操作机器执行命令时通操作界面机器反馈信息作出反应动作操作界面包括：触控屏幕鼠标键盘操作手柄遥控器等
显示界面职信息显示户通显示界面监控机器指令执行状况时通显示解机器执行命令状况包括图文声光等释读素
般情况显示界面操作界面存操作界面机互动提供动作台显示界面机互动提供信息台两台构成机互动基环境
根界面户特征界面分网页户界面游戏户界面软件户界面等类样分类方式体现户中心核心理念整界面设计
教学步骤教学容
时间分配
程围绕户中心展开
作业布置
课反思
授课课题
认识界面门—设计界面通性分析
教学
目标求
进步认识界面解设计界面通性进行分析
教学
重点难点
重点：设计界面通性分析
难点：设计界面功情感环境通
教学方法
案例教学
教学手段
媒体
授课时间
第 九 周
课时累计
8
教 学 程
教学步骤教学容
时间分配
导入新课
着硬件技术飞速发展计算速度存储容量成软件开发员担心问题户关心问题否较容易舒适软件换言着眼点软件易性美观易美观取决户界面UI优劣
课讲解UI基理设计属性期具体学UI设计技巧制作技术前UI设计整体解
11 UI设计基介绍
众周知硬件软件环境软件没界面设计算成功软件部精巧技术户愿意优越性发挥价值作谈起涉技术着眼易美观户界面显越越重软件UI设计
教学步骤教学容
时间分配
UI意户界面(User Interface)概括成句话工具间界面界面实际体现生活中环节例学切菜时候刀手界面开车时候方盘啊仪表盘界面TV时候遥控器界面电脑时候更说UI分成两类：硬件界面软件界面教程涉皆软件界面学注意称特殊者狭义UI设计n ^
软件设计分两部分：编码设计UI设计编码设计相信学较熟悉UI设计许猫说较陌生连专门事网站媒体设计员理解UI含义前面说UI英文UserInterface缩写字面户界面两组成部分实际包括户界面交互关系样分3方分：户研究交互设计界面设计面学分描述
UI设计教程 12 设计界面通性简单分析
实呢界面划分功性界面情感性界面环境性界面界面分3类助考察设计界面诸素然啦设计界面划分完全绝喽三类界面涵义家会交差重叠学应该较理解譬宗教文化种环境性素带信仰更层肯定情感素嘿嘿然说环境情感性区分妨碍分类间存实质性差异面带着学分解三类界面 W _1 I E6 y7 ~7 W
学着急喔学循序渐进UI设计说理重喔
功性界面 o6 V M V F
功性界面实现性容呢件产品外环境面视觉传达作品存价值意义首先性性牵涉种功素分析实现功技术方法材料运方面分析思维作种更改思维存难理解吧学？嘿嘿果作种处理方式设计产品种产品会种特征性（譬民族性纯粹性）素中性化果产品商标难认出国公司产品然方面说明产品中存着性素全类做出样反应感觉判断力存国际性客观性特征
e Y7 |8 {8 Q v4 ＼
实呢功性界面建立符号学基础学知道什符号学？国际符号学会符号学样定义：符号关信号标志系统（PS通某种渠道传递信息系统呗）理研究然符号系统造符号系统特征广义说呢够代表事物东西符号字母数字仪式意识动作等复杂种符号系统语言喽设计功界面避免者明白功操作界面功性标志定鲜明重5 } ~ c1 T c k T }2
情感性界面8 y& M j D1 H( z3 _ I* Z5 `
family装饰赋予家居温馨副design work情动and so on实呢件产品者portiflio情产生鸣接受爱屋乌体现感情寄托呢件设计作品设计作品相魅力
现代icon设计发展直着领域开拓符号学日渐应广告学宗教学神话学民俗学等较领域譬国外符号学界符号学认识研究考察认识知觉认识程符号学问题时符号学分析利体感官进行交流music 服装等作符号系统加分析研究设计艺术提供宝贵鉴价值情感界面设计方法手段j X# K H G
环境性界面 V x4 z9 p9 + S x) b
说UI设计环境素相联系包括较例社会政治文化科技民族等等等等处外界环境中社会群体体基础环境性素般牌非受控难预见变化状态中
联系设计历史利艺术社会学观点认识时期设计潮流实呢18世纪时候西方批艺术家已注意艺术创造审美趣味深受理气候民族历史条件等环境素影响难理解抵学会国家民族作品面相径庭原喽记法国外较著名老外嘿嘿貌似学者说物质文明精神文明性质面貌取决种族环境时代三素理工艺美术运动学熟知包豪思现代义提起抖擞80年代反设计现代元化等等明显反应环境素设计影响 k } G# F) @
学玩游戏实呢游戏中界面设计典型环境性界面
实呢成功作品够完美三种界面结合作品爱设计学肯定听说著名卢浮宫扩建工程貌似贝聿铭设计功性处理相牛没屈形式损害功参观卢浮宫回古代新价值观重新审视欣赏尤三角形外
教学步骤教学容
时间分配
观符合心理期情感性界面处理极致嘿嘿里附图学搜索
作业布置
课反思
授课课题
界面—回性界面设计
教学
目标求
理解认知摩擦性两概念
教学
重点难点
重点：理解认知摩擦性两概念
难点：理解认知摩擦性两概念
教学方法
案例教学
教学手段
媒体
授课时间
第 十 周
课时累计
10
教 学 程
教学步骤教学容
时间分配
导入新课类认知水着问题变化变化程中遇阻力认知摩擦软件硬件断升级程中认知摩擦时刻存例面升级新版软件时通常需花段时间熟悉掌握升级带新功少者通段时间学正确实认知摩擦作祟
然少量认知摩擦提升认知力帮助提倡回性界面设计通种方法种认知摩擦控制定范围实际操作中做点容易设计微波炉界面时钮手更加适合眼睛手指信息更容易读取解决认知摩擦问题呢？
教学步骤教学容
时间分配
户设计性
性标准实施中心活动效界面设计尤 组性错手机图标设计中通图形明白意义需翻阅说明书性评估户界面否容易程度属性
般说性5属性组成
（1） 学性初次接触界面时户没验情况界面完成基务难易程度
（2） 效率户熟悉界面完成务速度
（3） 记忆性段时间没次界面户重新熟练操作难易程度
（4） 出错户界面少错误错误严重程度否够方便迅速觉察错误恢复
（5） 满意度户界面满意程度
实现性途径5方面
（1） 户实际工作设计
（2） 学会客户沟通
（3） 避免创新创新
（4） 努力建立效交互
（5） 实际工作测试界面
操作界面类型特征
操作界面分连续性连续性操作界面两类中连续性操作界面分三种情况：开关电灯开关等二连续性调整控制电视机频道钮三符号输入钮电脑键盘
连续性操作界面分两种情况定量调节控制作调节机器莫种状态收音机电台波段调谐钮二连续调节控制作断调节机器状态理想方运行方盘
教学步骤教学容
时间分配
作业布置
课反思
授课课题
界面
教学
目标求
通章学学生解UI设计案例展示欣赏分析
教学
重点难点
教学重点：掌握UI设计案例展示欣赏分析
教学难点：掌握UI设计案例展示欣赏分析
教学方法
案例教学
教学手段
媒体
授课时间
第 十 周
课时累计
12
教 学 程
教学步骤教学容
时间分配
导入新课
第节 图标
图标具明确指代含义计算机图形中桌面图标软件标识界面中图标功标识
教学步骤教学容
时间分配
图标分广义狭义两种：
广义
具指代意义图形符号具高度浓缩快捷传达信息便记忆特性应范围广软硬件网页社交场公场合例：男女厕标志种交通标志等
狭义
应计算机软件方面包括：程序标识数标识命令选择模式信号切换开关状态指示等
图标图片象代表文件程序网页命令图标助户快速执行命令开程序文件单击双击图标执行命令图标浏览器中快速展现容相扩展名文件具相图标
图标套标准属性格式通常尺寸图标含张相显示容图片张图片具尺寸发色数图标套相似图片张图片格式点说图标三维图标特性：含透明区域透明区域透出图标桌面背景结构图标实麦劳巨霸汉堡差
图标实际张格式图片集合体包含定透明区域计算机操作系统显示设备样性导致图标需种格式
象素分辨
操作系统显示图标时会定标准选择图标中适合前显示环境状态图果Windows98操作系统显示环境 800x600分辨率32位色深桌面图标图格式256色32x32象素果相显示环境Windows XP操作系统中图标图格式：真彩色（32位色深）32x32象素面Windows操作系统中标准图标格式：（单位：象素—颜色）
Windows 98 SEME2000
48 x 48 256 32 x 32 256 16 x 16 256
48 x 48 16 32 x 32 16 16 x 16 16
Windows XP
48 x 48 32bit 32 x 32 32bit 24 x 24 32bit * 16 x 16 32bit
48 x 48 256 32 x 32 256 24 x 24 256 * 16 x 16 256
48 x 48 16 32 x 32 16 24 x 24 16 * 16 x 16 16
* 种格式XP图标中必须
注意：Windows98200024 x 24格式图标兼容相关应软件中开含种图格式图标操作系统认效必须确保设计图标中少含列图格式获良显示效果果操作系统图标中找特定图格式总采接图格式显示48 x 48图标缩24 x 24象素然效果差
操作系统版
Windows 95 Windows 98 Windows ME Windows 2000
· 建议： 48x48 （ 256色 16色） 32x32 （ 256色 16色） 16x16 （ 256色 16色）
· 低： 32x32 （ 256色 16色） 16x16 （ 256色 16色）
Windows XP
· 建议： 48x48 （RGB A 256色 16色） 32x32 （RGB A 256色 16色） 24x24 （RGB A 256色 16色） 16x16 （RGB A 256色 16色）
·低： 32x32 （RGB A 256色 16色） 16x16 （RGB A 256色 16色）
·选： 128x128 （RGB A）
Windows Vista
· 建议： 256x256 （RGB A） 64x64 （RGB A） 48x48 （RGB A 256色 16色） 32x32 （RGB A 256色 16色） 24x24 （RGB A 256色 16色） 16x16 （RGB A 256色 16色）
· 低： 256x256 （RGB A） 48x48 （RGB A 256色） 32x32 （RGB A 256色） 16x16 （RGB A 256色）
· 选： 256x256 （ 256色 16色） 64x64 （ 256色 16色）
画面手机操作系统图标
学方面考虑：
1 造型
2 颜色
3 艺术性
4 创造性
5 统性
收集图标文件接分享
第二节 输入法设计
输入法指种符号输入计算机设备（手机）采编码方法汉字输入编码方法基采音形义特定键相联系根汉字进行组合完成汉字输入
中文热门输入法
搜狗拼音输入法：
搜狗拼音输入法2006年6月搜狐（SOHU）公司推出款Windows台汉字拼音输入法搜狗拼音输入法基搜索引擎技术特适合网民新代输入法产品户通互联网备份性化词库配置信息搜狗拼音输入法中国国现流汉字拼音输入法奉行永久免费原
QQ拼音输入法：
QQ拼音输入法腾讯公司开发种方便观输入法载种样皮肤改变身皮肤
学方面考虑：
1 造型
2 颜色
3 艺术性
4 创造性
5 统性
收集图标文件接分享
第三节 手机界面设计
学方面考虑：
1 造型
2 颜色
3 艺术性
4 创造性
5 统性
收集图标文件接分享
第四节 播放器
学方面考虑：
1 造型2 颜色3 艺术性4 创造性5 统性
收集图标文件接分享
第五节 系统界面
教学步骤教学容
时间分配
学方面考虑：
1 造型
2 颜色
3 艺术性
4 创造性
5 统性
收集图标文件接分享
作业布置
课反思
授课课题
界面整体设计
教学
目标求
界面设计重性设计原
教学
重点难点
重点：界面设计重性设计原
难点：掌握界面设计重性设计原进行界面设计
教学方法
案例教学
教学手段
媒体
授课时间
第 九 周
课时累计
14
教 学 程
教学步骤教学容
时间分配
提问导入户界面设计什重呢面带着家起解界面设计
户界面设计字面说 面户 户界面发展历低级高级程户界面软件系统中价值重越越高户假面设计仅美观实户界面机间交流沟通层面户界面设计中心产品达逾越设计
教学步骤教学容
时间分配
界面设计重性
界面户网页交互窗口户通界面想计算机输入信息进行控制查询操作网页通界面想户提供信息供阅读分析判断界面设计网页中占重位置
界面设计原
界面设计浏览者网络交流台网络中具特殊位置设计遵循定原首先简易性简易方便户解网页容次清楚安全指户出现危机选择时信息介入系统提示灵活性化指户轻松快捷
界面设计求
界面设计师浏览者浏览网页第印象设计风格整体页面相致颜色搭配符合视觉惯页面整体色调想协调中字体选择花哨选常字体
．什界面设计
界面设计满足专业化标准化需求软件界面进行美化优化规范化设计分支具体包括软件启动封面设计软件框架设计钮设计面板设计菜单设计标签设计图标设计滚动条状态栏设计安装程设计包装商品化图：直观钮设计
二．图形界面分类
着科技发展信息需求量断增图形界面越越样化细分化图形界面设计会特点图形界面分类：
l 软件户界面：软件种工具然软件交互性操作通软件界面进行软件界面设计仅美观易
l 网络界面：网络发展带网站界面设计繁荣着网络发展网站设计已初纯文字容发展现包含图视频动画等种媒体形式网站界面必须具独立性创意性网站界面设计中重户方便查找信息够感受方便操作带乐趣图咖啡网站页面
l 手机界面：着科技发展手机功越越强手机界面设计性化仅方便美观图
l 游戏界面：游戏软件界面制作通常较华丽题鲜明三维效果十分普遍游戏中物物品体视觉效果占十分重位
l 播放器界面：激烈市场竞争中软件产品仅强功远远够易性美观相结合适应户需创造出更高价值
教学步骤教学容
时间分配
作业布置
课反思
授课课题
界面整体设计 UI设计流程
教学
目标求
通章学学生解UI设计原流程
教学
重点难点
教学重点：掌握UI设计原流程
教学难点：掌握UI设计流程
教学方法
案例教学
教学手段
媒体
授课时间
第 十 周
课时累计
16
教 学 程
教学步骤教学容
时间分配
导入新课
第节 UI设计原
1简易性
界面简洁
UI设计图片
户便便解减少户发生错误选择性
教学步骤教学容
时间分配
2户语言
界面中反应户身语言游戏设计者语言
3记忆负担化
脑电脑设计界面时必须考虑类脑处理信息限度类短期记忆极稳定限24时存25遗忘率户说浏览信息记忆更容易
4致性
优秀界面具备特点界面结构必须清晰致风格必须游戏容相致
5清楚
视觉效果便理解
6户熟悉程度
户通已掌握知识界面应超出般常识
7户观点考虑
想户想做户做户总方法理解
通较两世界(真实虚拟)事物完成更设计：书籍竹简
8排列
序界面户轻松
9安全性
户作出选择选择逆户作出危险选择时信息介入系统提示
10灵活性
简单说户方便述互动重性局限单工具(包括鼠标键盘手柄)
11性化
高效率户满意度性化体现应具备专家级初级玩家系统户惯定制界面
保存设置
第二节 UI设计流程
确认目标户
洛UI设计程中需求设计角色会确定软件目标户获取终户直接户需求
户交互考虑目标户引起交互设计重点
例：科学户电脑入门户设计重点
采集目标户惯交互方式
类型目标户交互惯种惯交互方式源原针现实交互流程已软件工具交互流程
然基础通调研分析找户希达交互效果流程确认
提示引导户
软件户工具应该户操作控制软件软件响应户动作设定规
户交互结果反馈提示户结果反馈信息引导户进行户需步操作
致性原
设计目标致
软件中存组成部分（组件元素）组成部分间交互设计目标需致
例：果电脑操作初级户作目标户简化界面逻辑设计目标该目标需贯彻软件（软件包）整体局部
元素外观致
交互元素外观影响户交互效果（类）软件采致风格外观保持户焦点改进交互效果帮助遗憾确认元素外观致没特统衡量方法需目标户进行调查取反馈
交互行致
交互模型中类型元素户触发应行事件交互行需致
例：需户确认操作话框少包含确认放弃两钮
交互行致性原较极端理念相类型交互元素引起行事件相理念然部分情况正确确相反例子证明理念设计会更加简化户操作流程
性原
理解
软件
户户必须理解软件元素应功
果户理解需提供种非破坏性途径户通该元素操作理解应功
例：删操作元素户点击删操作钮提示户删操作者否确认删操作户更加详细理解该元素应功时取消该操作
达
户交互中心交互元素应户需功交互元素必须户控制
户诸键盘鼠标类交互设备通移动触发已交互元素达前见者交互交互元素
注意交互次数会影响达效果功深深隐藏（般说超4层）户达该元素率降低
达效果界面设计关复杂界面会影响达效果（参考简单导原）
控制
软件交互流程户控制
功执行流程户控制
果确实法提供控制目标户理解方式提示户
教学步骤教学容
时间分配
作业布置
课反思
授课课题
界面整体设计——导航栏钮设计点
教学
目标求
导航栏钮设计
教学
重点难点
重点：掌握导航栏钮设计点
难点：掌握导航栏钮设计点应
教学方法
案例教学
教学手段
媒体
授课时间
第 十 周
课时累计
18
教 学 程
教学步骤教学容
时间分配
导入：导航栏钮网页设计中常操作更加方便接解设计点
导航栏
导航栏果设计恰处会网页增色导航栏设计太花哨导航栏书籍功物件喧宾夺导航栏设计点：
l 导航栏目情况通常排横竖栏目超六考虑两排
教学步骤教学容
时间分配
l 造导航栏目情况排甚规排（排数者长度）商业设计者门户网站通常会频道设计时候需考虑横双排竖排会占太空间
l 通常容情况谓栏目站点包括导航具体容
l 双排导航未必挨起发挥想象排列
l 图片式导航较美观占空间较
l 目前网站中较栏目FLASH制作网站导航体积视觉效果强烈
l 容丰富站点考虑快捷导航框架快捷导航进入页面快速跳转外栏目更加方便操作
教学步骤教学容
时间分配
二 钮
钮设计求 越越高网页中钮设计点：
l 设计钮整体风格相协调太抢眼
l 单调页面花哨钮点缀
l 插图字搭配考虑字迹清楚色彩简单超4种
l 长钮框架分解应该量纤细否页面会显臃肿
作业布置
课反思
文档容仅供参考
文档香网(httpswwwxiangdangnet)户传
《香当网》用户分享的内容，不代表《香当网》观点或立场，请自行判断内容的真实性和可靠性！
该内容是文档的文本内容，更好的格式请下载文档
备 课
Lesson Preparation
_2013____2014_学年 第__学期
Academic Year Semester
课 程 名 称 UI设计
Course
教材名称版 UI设计
Textbook and Edition
授 课 班 级 2011面班
Class
教 师 姓 名
Teacher
审 核
Approver
填写说明
1备课书写教案适专职教师兼职教师兼课教师
2承担教学务教师需书写纸质版教案媒体教学需教学务繁重电子版教案格式必须纸质版格式教案书写应学期授课计划相符合
3备课程中环节素根实际授课容进行填写：
授课课题：（教学章节标题项目名称）
教学目标求：（教学目标般说应包含知识教学力发展思想教育三方面容教学求指识记理解简单应综合应等层次）
教学重点难点：教学重点达确定教学目必须着重讲解分析容教学难点学生接受情况言学生学理解理解困难方确定教学难点
教学方法：（讨启发演示辩讲练结合案例教学情境模拟等）
教学手段：（媒体教学录带挂图幻灯片等）
授课时间：第 周
课时累计：
教学程：（体现教学步骤包括时间分配教学容教学进程）
作业布置：（含思考题讨题）
课反思：（课反思教案实施效果追记课前印课笔手写）
4 备课审核教研室（项目中心）
授课课题
认识界面门—UI设计说课
教学
目标求
通章学学生解UI中国发展UI什
教学
重点难点
教学重点：掌握UI中国发展UI什
教学难点：掌握UI什
教学方法
案例教学
教学手段
媒体
授课时间
第 九 周
课时累计
2
教 学 程
教学步骤教学容
时间分配
导入新课
UIUser Interface(户界面)简称UI设计指软件机交互操作逻辑界面美观整体设计UI设计仅软件变性品味软件操作变舒适简单充分体现软件定位特点
第节 UI什
软件设计分两部分：编码设计UI设计
教学步骤教学容
时间分配
编码设计家熟悉 UI设计陌生词专门事网站媒体设计完全理解UI意思UI意户界面英文User interface缩写字面户界面2组成部分实际包括户界面间交互关系
飞速发展电子产品中界面设计工作点点重视起做界面设计美工称UI设计师UI工程师实软件界面设计工业产品中工业造型设计样产品重卖点电子产品拥美观界面会带舒适视觉享受拉商品距离商家创造卖点界面设计单纯美术绘画需定位者环境方式终户设计建立科学性艺术设计检验界面标准某项目开发组领导意见项目成员投票结果终端户感受界面设计户研究紧密结合断终户设计满意视觉效果程
第二节 UI设计师做什
中国UI设计需断成长设计领域eicodesignTigocn lkkui design Robin design等国知名设计机构已进入探索UI设计道路
UI设计工作容说分3方UI 研究3素决定 分研究工具研究界面关系研究
研究界面
图形设计师Graphic UI designer
国目前部分UI工作者事行业称美工实际单纯意义美术工软件产品产品外形设计师
设计师美术院校毕业中部分美术设计教育背景例工业外形设计装潢设计信息媒体设计等
研究界面关系
交互设计师interaction designer
图形界面产生前长期UI设计师指交互设计师交互设计师工作容设计软件操作流程树状结构软件结构操作规范（spec）等软件产品编码前需作交互设计确立交互模型交互规范
交互设计师般软件工程师背景居
研究
户测试研究工程师User experience engineer
产品保证质量需测试软件编码需测试然UI设计需测试测试编码没关系测试交互设计合理性图形设计美观性测试方法般采焦点组目标户问卷形式衡量UI设计合理性职位重果没职位UI设计坏设计师验者领导审美评判样会企业带严重风险性
户研究工程师般心理学文学背景较合适
综述UI设计师：软件图形设计师交互设计师户研究工程师
中交互设计师：
UI义户界面英文Userinterface缩写UI设计师指事软件机交互操作逻辑界面美观整体设计工作
工作容：
负责软件界面美术设计创意工作制作工作
根种相关软件户群提出构思新颖高度吸引力创意设计
页面进行优化户操作更趋性化
维护现应产品
收集分析户GUI需求
第三节 UI设计中国现状
目前国UI相陌生词便洛设计UI设计道路断探索客户户需求常招聘广告写着：招聘界面美工界面美术设计师等等表明国UI理解停留美术设计方面认UI工作描边画线缺乏户交互重性理解方面软件开发程中存重技术重应现象许商家认软件产品核心技术UI仅仅次辅助点员例遇表现出 UI设计真正价值体现UI设计发展必程物质产品手机行业例手机刚刚进入市场时候价格贵惊通话外没什功时导技术家精力放信号机时间寿命等方面产品造型合理性少关心事境迁技术已完全达户需求商家创造卖点提高争力非常重视产品外观设计外频频推出短信彩屏铉彩信摄头等等样产品美观性易易学性化等等成产品卖点软件产品物质产品发展相计算机硬件限制编码设计成软件开发代名词美观亲图形化界面合理易交互方式没充分重视实际时期软件作软件程序软件产品
现着计算机硬件飞速发展软件程序已适应户求软件产品激烈市场竞争中仅仅强功远远够足战胜强劲手幸运国高瞻远瞩民族企业已开始意识UI软件产品带巨卖点例金山公司影霸词霸毒霸网标重视UI开发位金山产品类软件产品中首屈指联想软件UI部门积极开展户研究性测试易美观相结合推出双模式电脑幸福系列等成功UI范例联想赢全球消费 PC第三称号等等等等实践证明商家产品美观易设计方面投入会产出投入产出功领先性开发投入
承认现阶段中国领域西方发达国家相差距赶超代肩负历史命软件产品领域象物质产品样存工艺材料限制软件产品核心问题提高软件UI设计师力减员差距中国UI发展首关键问题
目前国院校没设立相健全UI设计专业提高UI设计师力关键提供良学交流资源环境国已交流设计网站介绍工业设计面设计服装设计绘画艺术媒体flash等UI设计直没受应关注仅仅放数码设计者面网页设计栏目里仅资源培养优秀设计师够必须信息快捷资源丰富设计水流专业权威UI设计学交流方适应日益发展UI设计师需求
教学步骤教学容
时间分配
作业布置
课反思
授课课题
认识界面门
教学
目标求
界面概述
教学
重点难点
重点：解什UI什界面
难点：界面概述
教学方法
案例教学
教学手段
媒体
授课时间
第 九 周
课时累计
4
教 学 程
教学步骤教学容
时间分配
导入新课着硬件技术飞速发展计算速度存储容量成软件开发员担心问题户关心问题否较容易舒适软件换言着眼点软件易性美观易美观取决户界面UI优劣
课讲解UI基理设计属性期具体学UI设计技巧制作技术前UI设计整体解
什事UI呢？UI意户界面英文Userinterface缩写字面户界面2组成部分实际包括户界面间交互关系样分3方分：户研究交互设计界面设计
教学步骤教学容
时间分配
1户研究
户研究包含两方面：性工程学（usability Engineering）研究提高产品性系统设计更容易学记忆二通性工程学研究发掘户潜需求技术创新提供外条思路方法（consumer insight）
户研究跨学科专业涉性工程学类功效学心理学市场研究学教育学设计学等学科户研究技术站文学科角度研究产品站户角度介入产品开发设计中
户研究通户工作环境产品惯等研究产品开发前期够户产品功期设计外观方面求融入产品开发程中帮助企业完善产品设计者探索新产品概念
户需求反馈途径检验界面交互设计否合理重标准
2交互设计
部分指机间交互工程交互设计程序员做实程序员擅长编码善终户交互软件然功较齐全交互方面设计粗糙繁琐难学困难样软件聪明进步感愚弄羞辱许操作电脑软件岗失业样交互电脑成恐惧科技怪兽交互设计程序员工作中分离出单独成学科机交互设计目加强软件易易学易理解计算机真正成方便类服务工具
3界面设计
漫长软件发展中界面设计工作直没重视起做界面设计贬义称美工实软件界面设计工业产品中工业造型设计样产品重买点友美观界面会带舒适视觉享受拉电脑距离商家创造卖点界面设计单纯美术绘画需定位者环境方式终户设计纯粹科学性艺术设计检验界面标准某项目开发组领导意见项目成员投票结果终户感受界面设计户研究紧密结合断终户设计满意视觉效果程
什UI
[常识] UI行业常名词缩写定义
什 UI ：
UI意户界面英文User interface缩写
什 GUI
Graphics User Interface 图形户界面
时称WIMPWindowIconMenuPointing Device 窗口图标菜单指点设备
什 HUI
Handset User Interface 手持设备户界面
什WUI
Web User Interface 网页风格户界面
什户界面设计：
机器互动程（Human Machine Interaction）中层面说界面（interface）心理学意义分界面分感觉（视觉触觉听觉等）情感两层次户界面设计屏幕产品重组成部分界面设计复杂学科参工程认知心理学设计学语言学等扮演着重角色户界面设计三原：置界面户控制减少户记忆负担保持界面致性
教学步骤教学容
时间分配
作业布置
课反思
授课课题
认识界面门—界面设计原分类
教学
目标求
解掌握界面设计原分类
教学
重点难点
重点：掌握界面设计基原分类
难点：掌握界面设计基原熟练运设计中
教学方法
案例教学
教学手段
媒体
授课时间
第 九 周
课时累计
6
教 学 程
教学步骤教学容
时间分配
节课说UI艺术性设计原方面问题结构设计基础参目标群体心理模型务达成进行视觉设计包括色彩啊字体呀页面等视觉设计原点学定注意喽
1）界面清晰明尤导航明确允许户定制界面图：
简单界面设计音频软件3D软件界面参数较复杂窗口结构更需逻辑清晰设计思路时候呢科学性肯定远远艺术性 @ l x7 N N E0 r a2）减少短期记忆负担说计算机帮助记忆例IE进入界面址等机器记住3 e#
教学步骤教学容
时间分配
3）赖认知非记忆譬印图标记忆拉菜单列表中选择等符合业界惯
4）提供视觉线索界面吸引力图：
5）提供默认(default)撤消(undo)恢复(redo)等功方面学解做真正UI设计师功方面定掌握喔然啦学怕心实简单Just do it
6）提供界面快捷方式
7）量真实事物类电话印机等图标设计尊重户验惯 r F1 A7 @＇ A9
8）完美视觉清晰度条理清晰图片文字布局隐喻户猜
图
9）界面协调致手机界面钮摆放惯左键肯定右键否定容摆放
10）样功样图形表示
11）色彩容整体软件量超5色系（特殊需例外）似颜色表示似意思
二界面分类
界面界面互动程中作方式分操作界面显示界面两类
通常操作界面起控制作户通操作界面发出信息操作机器执行命令时通操作界面机器反馈信息作出反应动作操作界面包括：触控屏幕鼠标键盘操作手柄遥控器等
显示界面职信息显示户通显示界面监控机器指令执行状况时通显示解机器执行命令状况包括图文声光等释读素
般情况显示界面操作界面存操作界面机互动提供动作台显示界面机互动提供信息台两台构成机互动基环境
根界面户特征界面分网页户界面游戏户界面软件户界面等类样分类方式体现户中心核心理念整界面设计
教学步骤教学容
时间分配
程围绕户中心展开
作业布置
课反思
授课课题
认识界面门—设计界面通性分析
教学
目标求
进步认识界面解设计界面通性进行分析
教学
重点难点
重点：设计界面通性分析
难点：设计界面功情感环境通
教学方法
案例教学
教学手段
媒体
授课时间
第 九 周
课时累计
8
教 学 程
教学步骤教学容
时间分配
导入新课
着硬件技术飞速发展计算速度存储容量成软件开发员担心问题户关心问题否较容易舒适软件换言着眼点软件易性美观易美观取决户界面UI优劣
课讲解UI基理设计属性期具体学UI设计技巧制作技术前UI设计整体解
11 UI设计基介绍
众周知硬件软件环境软件没界面设计算成功软件部精巧技术户愿意优越性发挥价值作谈起涉技术着眼易美观户界面显越越重软件UI设计
教学步骤教学容
时间分配
UI意户界面(User Interface)概括成句话工具间界面界面实际体现生活中环节例学切菜时候刀手界面开车时候方盘啊仪表盘界面TV时候遥控器界面电脑时候更说UI分成两类：硬件界面软件界面教程涉皆软件界面学注意称特殊者狭义UI设计n ^
软件设计分两部分：编码设计UI设计编码设计相信学较熟悉UI设计许猫说较陌生连专门事网站媒体设计员理解UI含义前面说UI英文UserInterface缩写字面户界面两组成部分实际包括户界面交互关系样分3方分：户研究交互设计界面设计面学分描述
UI设计教程 12 设计界面通性简单分析
实呢界面划分功性界面情感性界面环境性界面界面分3类助考察设计界面诸素然啦设计界面划分完全绝喽三类界面涵义家会交差重叠学应该较理解譬宗教文化种环境性素带信仰更层肯定情感素嘿嘿然说环境情感性区分妨碍分类间存实质性差异面带着学分解三类界面 W _1 I E6 y7 ~7 W
学着急喔学循序渐进UI设计说理重喔
功性界面 o6 V M V F
功性界面实现性容呢件产品外环境面视觉传达作品存价值意义首先性性牵涉种功素分析实现功技术方法材料运方面分析思维作种更改思维存难理解吧学？嘿嘿果作种处理方式设计产品种产品会种特征性（譬民族性纯粹性）素中性化果产品商标难认出国公司产品然方面说明产品中存着性素全类做出样反应感觉判断力存国际性客观性特征
e Y7 |8 {8 Q v4 ＼
实呢功性界面建立符号学基础学知道什符号学？国际符号学会符号学样定义：符号关信号标志系统（PS通某种渠道传递信息系统呗）理研究然符号系统造符号系统特征广义说呢够代表事物东西符号字母数字仪式意识动作等复杂种符号系统语言喽设计功界面避免者明白功操作界面功性标志定鲜明重5 } ~ c1 T c k T }2
情感性界面8 y& M j D1 H( z3 _ I* Z5 `
family装饰赋予家居温馨副design work情动and so on实呢件产品者portiflio情产生鸣接受爱屋乌体现感情寄托呢件设计作品设计作品相魅力
现代icon设计发展直着领域开拓符号学日渐应广告学宗教学神话学民俗学等较领域譬国外符号学界符号学认识研究考察认识知觉认识程符号学问题时符号学分析利体感官进行交流music 服装等作符号系统加分析研究设计艺术提供宝贵鉴价值情感界面设计方法手段j X# K H G
环境性界面 V x4 z9 p9 + S x) b
说UI设计环境素相联系包括较例社会政治文化科技民族等等等等处外界环境中社会群体体基础环境性素般牌非受控难预见变化状态中
联系设计历史利艺术社会学观点认识时期设计潮流实呢18世纪时候西方批艺术家已注意艺术创造审美趣味深受理气候民族历史条件等环境素影响难理解抵学会国家民族作品面相径庭原喽记法国外较著名老外嘿嘿貌似学者说物质文明精神文明性质面貌取决种族环境时代三素理工艺美术运动学熟知包豪思现代义提起抖擞80年代反设计现代元化等等明显反应环境素设计影响 k } G# F) @
学玩游戏实呢游戏中界面设计典型环境性界面
实呢成功作品够完美三种界面结合作品爱设计学肯定听说著名卢浮宫扩建工程貌似贝聿铭设计功性处理相牛没屈形式损害功参观卢浮宫回古代新价值观重新审视欣赏尤三角形外
教学步骤教学容
时间分配
观符合心理期情感性界面处理极致嘿嘿里附图学搜索
作业布置
课反思
授课课题
界面—回性界面设计
教学
目标求
理解认知摩擦性两概念
教学
重点难点
重点：理解认知摩擦性两概念
难点：理解认知摩擦性两概念
教学方法
案例教学
教学手段
媒体
授课时间
第 十 周
课时累计
10
教 学 程
教学步骤教学容
时间分配
导入新课类认知水着问题变化变化程中遇阻力认知摩擦软件硬件断升级程中认知摩擦时刻存例面升级新版软件时通常需花段时间熟悉掌握升级带新功少者通段时间学正确实认知摩擦作祟
然少量认知摩擦提升认知力帮助提倡回性界面设计通种方法种认知摩擦控制定范围实际操作中做点容易设计微波炉界面时钮手更加适合眼睛手指信息更容易读取解决认知摩擦问题呢？
教学步骤教学容
时间分配
户设计性
性标准实施中心活动效界面设计尤 组性错手机图标设计中通图形明白意义需翻阅说明书性评估户界面否容易程度属性
般说性5属性组成
（1） 学性初次接触界面时户没验情况界面完成基务难易程度
（2） 效率户熟悉界面完成务速度
（3） 记忆性段时间没次界面户重新熟练操作难易程度
（4） 出错户界面少错误错误严重程度否够方便迅速觉察错误恢复
（5） 满意度户界面满意程度
实现性途径5方面
（1） 户实际工作设计
（2） 学会客户沟通
（3） 避免创新创新
（4） 努力建立效交互
（5） 实际工作测试界面
操作界面类型特征
操作界面分连续性连续性操作界面两类中连续性操作界面分三种情况：开关电灯开关等二连续性调整控制电视机频道钮三符号输入钮电脑键盘
连续性操作界面分两种情况定量调节控制作调节机器莫种状态收音机电台波段调谐钮二连续调节控制作断调节机器状态理想方运行方盘
教学步骤教学容
时间分配
作业布置
课反思
授课课题
界面
教学
目标求
通章学学生解UI设计案例展示欣赏分析
教学
重点难点
教学重点：掌握UI设计案例展示欣赏分析
教学难点：掌握UI设计案例展示欣赏分析
教学方法
案例教学
教学手段
媒体
授课时间
第 十 周
课时累计
12
教 学 程
教学步骤教学容
时间分配
导入新课
第节 图标
图标具明确指代含义计算机图形中桌面图标软件标识界面中图标功标识
教学步骤教学容
时间分配
图标分广义狭义两种：
广义
具指代意义图形符号具高度浓缩快捷传达信息便记忆特性应范围广软硬件网页社交场公场合例：男女厕标志种交通标志等
狭义
应计算机软件方面包括：程序标识数标识命令选择模式信号切换开关状态指示等
图标图片象代表文件程序网页命令图标助户快速执行命令开程序文件单击双击图标执行命令图标浏览器中快速展现容相扩展名文件具相图标
图标套标准属性格式通常尺寸图标含张相显示容图片张图片具尺寸发色数图标套相似图片张图片格式点说图标三维图标特性：含透明区域透明区域透出图标桌面背景结构图标实麦劳巨霸汉堡差
图标实际张格式图片集合体包含定透明区域计算机操作系统显示设备样性导致图标需种格式
象素分辨
操作系统显示图标时会定标准选择图标中适合前显示环境状态图果Windows98操作系统显示环境 800x600分辨率32位色深桌面图标图格式256色32x32象素果相显示环境Windows XP操作系统中图标图格式：真彩色（32位色深）32x32象素面Windows操作系统中标准图标格式：（单位：象素—颜色）
Windows 98 SEME2000
48 x 48 256 32 x 32 256 16 x 16 256
48 x 48 16 32 x 32 16 16 x 16 16
Windows XP
48 x 48 32bit 32 x 32 32bit 24 x 24 32bit * 16 x 16 32bit
48 x 48 256 32 x 32 256 24 x 24 256 * 16 x 16 256
48 x 48 16 32 x 32 16 24 x 24 16 * 16 x 16 16
* 种格式XP图标中必须
注意：Windows98200024 x 24格式图标兼容相关应软件中开含种图格式图标操作系统认效必须确保设计图标中少含列图格式获良显示效果果操作系统图标中找特定图格式总采接图格式显示48 x 48图标缩24 x 24象素然效果差
操作系统版
Windows 95 Windows 98 Windows ME Windows 2000
· 建议： 48x48 （ 256色 16色） 32x32 （ 256色 16色） 16x16 （ 256色 16色）
· 低： 32x32 （ 256色 16色） 16x16 （ 256色 16色）
Windows XP
· 建议： 48x48 （RGB A 256色 16色） 32x32 （RGB A 256色 16色） 24x24 （RGB A 256色 16色） 16x16 （RGB A 256色 16色）
·低： 32x32 （RGB A 256色 16色） 16x16 （RGB A 256色 16色）
·选： 128x128 （RGB A）
Windows Vista
· 建议： 256x256 （RGB A） 64x64 （RGB A） 48x48 （RGB A 256色 16色） 32x32 （RGB A 256色 16色） 24x24 （RGB A 256色 16色） 16x16 （RGB A 256色 16色）
· 低： 256x256 （RGB A） 48x48 （RGB A 256色） 32x32 （RGB A 256色） 16x16 （RGB A 256色）
· 选： 256x256 （ 256色 16色） 64x64 （ 256色 16色）
画面手机操作系统图标
学方面考虑：
1 造型
2 颜色
3 艺术性
4 创造性
5 统性
收集图标文件接分享
第二节 输入法设计
输入法指种符号输入计算机设备（手机）采编码方法汉字输入编码方法基采音形义特定键相联系根汉字进行组合完成汉字输入
中文热门输入法
搜狗拼音输入法：
搜狗拼音输入法2006年6月搜狐（SOHU）公司推出款Windows台汉字拼音输入法搜狗拼音输入法基搜索引擎技术特适合网民新代输入法产品户通互联网备份性化词库配置信息搜狗拼音输入法中国国现流汉字拼音输入法奉行永久免费原
QQ拼音输入法：
QQ拼音输入法腾讯公司开发种方便观输入法载种样皮肤改变身皮肤
学方面考虑：
1 造型
2 颜色
3 艺术性
4 创造性
5 统性
收集图标文件接分享
第三节 手机界面设计
学方面考虑：
1 造型
2 颜色
3 艺术性
4 创造性
5 统性
收集图标文件接分享
第四节 播放器
学方面考虑：
1 造型2 颜色3 艺术性4 创造性5 统性
收集图标文件接分享
第五节 系统界面
教学步骤教学容
时间分配
学方面考虑：
1 造型
2 颜色
3 艺术性
4 创造性
5 统性
收集图标文件接分享
作业布置
课反思
授课课题
界面整体设计
教学
目标求
界面设计重性设计原
教学
重点难点
重点：界面设计重性设计原
难点：掌握界面设计重性设计原进行界面设计
教学方法
案例教学
教学手段
媒体
授课时间
第 九 周
课时累计
14
教 学 程
教学步骤教学容
时间分配
提问导入户界面设计什重呢面带着家起解界面设计
户界面设计字面说 面户 户界面发展历低级高级程户界面软件系统中价值重越越高户假面设计仅美观实户界面机间交流沟通层面户界面设计中心产品达逾越设计
教学步骤教学容
时间分配
界面设计重性
界面户网页交互窗口户通界面想计算机输入信息进行控制查询操作网页通界面想户提供信息供阅读分析判断界面设计网页中占重位置
界面设计原
界面设计浏览者网络交流台网络中具特殊位置设计遵循定原首先简易性简易方便户解网页容次清楚安全指户出现危机选择时信息介入系统提示灵活性化指户轻松快捷
界面设计求
界面设计师浏览者浏览网页第印象设计风格整体页面相致颜色搭配符合视觉惯页面整体色调想协调中字体选择花哨选常字体
．什界面设计
界面设计满足专业化标准化需求软件界面进行美化优化规范化设计分支具体包括软件启动封面设计软件框架设计钮设计面板设计菜单设计标签设计图标设计滚动条状态栏设计安装程设计包装商品化图：直观钮设计
二．图形界面分类
着科技发展信息需求量断增图形界面越越样化细分化图形界面设计会特点图形界面分类：
l 软件户界面：软件种工具然软件交互性操作通软件界面进行软件界面设计仅美观易
l 网络界面：网络发展带网站界面设计繁荣着网络发展网站设计已初纯文字容发展现包含图视频动画等种媒体形式网站界面必须具独立性创意性网站界面设计中重户方便查找信息够感受方便操作带乐趣图咖啡网站页面
l 手机界面：着科技发展手机功越越强手机界面设计性化仅方便美观图
l 游戏界面：游戏软件界面制作通常较华丽题鲜明三维效果十分普遍游戏中物物品体视觉效果占十分重位
l 播放器界面：激烈市场竞争中软件产品仅强功远远够易性美观相结合适应户需创造出更高价值
教学步骤教学容
时间分配
作业布置
课反思
授课课题
界面整体设计 UI设计流程
教学
目标求
通章学学生解UI设计原流程
教学
重点难点
教学重点：掌握UI设计原流程
教学难点：掌握UI设计流程
教学方法
案例教学
教学手段
媒体
授课时间
第 十 周
课时累计
16
教 学 程
教学步骤教学容
时间分配
导入新课
第节 UI设计原
1简易性
界面简洁
UI设计图片
户便便解减少户发生错误选择性
教学步骤教学容
时间分配
2户语言
界面中反应户身语言游戏设计者语言
3记忆负担化
脑电脑设计界面时必须考虑类脑处理信息限度类短期记忆极稳定限24时存25遗忘率户说浏览信息记忆更容易
4致性
优秀界面具备特点界面结构必须清晰致风格必须游戏容相致
5清楚
视觉效果便理解
6户熟悉程度
户通已掌握知识界面应超出般常识
7户观点考虑
想户想做户做户总方法理解
通较两世界(真实虚拟)事物完成更设计：书籍竹简
8排列
序界面户轻松
9安全性
户作出选择选择逆户作出危险选择时信息介入系统提示
10灵活性
简单说户方便述互动重性局限单工具(包括鼠标键盘手柄)
11性化
高效率户满意度性化体现应具备专家级初级玩家系统户惯定制界面
保存设置
第二节 UI设计流程
确认目标户
洛UI设计程中需求设计角色会确定软件目标户获取终户直接户需求
户交互考虑目标户引起交互设计重点
例：科学户电脑入门户设计重点
采集目标户惯交互方式
类型目标户交互惯种惯交互方式源原针现实交互流程已软件工具交互流程
然基础通调研分析找户希达交互效果流程确认
提示引导户
软件户工具应该户操作控制软件软件响应户动作设定规
户交互结果反馈提示户结果反馈信息引导户进行户需步操作
致性原
设计目标致
软件中存组成部分（组件元素）组成部分间交互设计目标需致
例：果电脑操作初级户作目标户简化界面逻辑设计目标该目标需贯彻软件（软件包）整体局部
元素外观致
交互元素外观影响户交互效果（类）软件采致风格外观保持户焦点改进交互效果帮助遗憾确认元素外观致没特统衡量方法需目标户进行调查取反馈
交互行致
交互模型中类型元素户触发应行事件交互行需致
例：需户确认操作话框少包含确认放弃两钮
交互行致性原较极端理念相类型交互元素引起行事件相理念然部分情况正确确相反例子证明理念设计会更加简化户操作流程
性原
理解
软件
户户必须理解软件元素应功
果户理解需提供种非破坏性途径户通该元素操作理解应功
例：删操作元素户点击删操作钮提示户删操作者否确认删操作户更加详细理解该元素应功时取消该操作
达
户交互中心交互元素应户需功交互元素必须户控制
户诸键盘鼠标类交互设备通移动触发已交互元素达前见者交互交互元素
注意交互次数会影响达效果功深深隐藏（般说超4层）户达该元素率降低
达效果界面设计关复杂界面会影响达效果（参考简单导原）
控制
软件交互流程户控制
功执行流程户控制
果确实法提供控制目标户理解方式提示户
教学步骤教学容
时间分配
作业布置
课反思
授课课题
界面整体设计——导航栏钮设计点
教学
目标求
导航栏钮设计
教学
重点难点
重点：掌握导航栏钮设计点
难点：掌握导航栏钮设计点应
教学方法
案例教学
教学手段
媒体
授课时间
第 十 周
课时累计
18
教 学 程
教学步骤教学容
时间分配
导入：导航栏钮网页设计中常操作更加方便接解设计点
导航栏
导航栏果设计恰处会网页增色导航栏设计太花哨导航栏书籍功物件喧宾夺导航栏设计点：
l 导航栏目情况通常排横竖栏目超六考虑两排
教学步骤教学容
时间分配
l 造导航栏目情况排甚规排（排数者长度）商业设计者门户网站通常会频道设计时候需考虑横双排竖排会占太空间
l 通常容情况谓栏目站点包括导航具体容
l 双排导航未必挨起发挥想象排列
l 图片式导航较美观占空间较
l 目前网站中较栏目FLASH制作网站导航体积视觉效果强烈
l 容丰富站点考虑快捷导航框架快捷导航进入页面快速跳转外栏目更加方便操作
教学步骤教学容
时间分配
二 钮
钮设计求 越越高网页中钮设计点：
l 设计钮整体风格相协调太抢眼
l 单调页面花哨钮点缀
l 插图字搭配考虑字迹清楚色彩简单超4种
l 长钮框架分解应该量纤细否页面会显臃肿
作业布置
课反思
文档容仅供参考
文档香网(httpswwwxiangdangnet)户传
《香当网》用户分享的内容，不代表《香当网》观点或立场，请自行判断内容的真实性和可靠性！
该内容是文档的文本内容，更好的格式请下载文档
