《UI界面设计》教案


    



    教 案

    课程名称:UI界面设计
    授课教师:








    制订时间:

    UI界面设计


    第章 UI综述

    课 题:UI综述
    授课教师:
    教学目标:通章学学生解UI中国发展UI什
    教学重点:掌握UI中国发展UI什
    教学难点:掌握UI什
    教学准备:课参考图形
    教学方法:讲授讨案例分析
    教 材:
    教学时间:8课时
    教学容:UI中国发展UI什



    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设计流程
    授课教师:汪永吉
    教学目标:通章学学生解UI设计原流程
    教学重点:掌握UI设计原流程
    教学难点:掌握UI设计流程
    教学准备:课参考图形
    教学方法:讲授讨案例分析
    教 材:
    教学时间:8课时
    教学容:UI设计原流程

    第节 UI设计原

      1简易性
      界面简洁
      
    UI设计图片
    户便便解减少户发生错误选择性
      2户语言
      界面中反应户身语言游戏设计者语言
      3记忆负担化
      脑电脑设计界面时必须考虑类脑处理信息限度类短期记忆极稳定限24时存25遗忘率户说浏览信息记忆更容易
      4致性
      优秀界面具备特点界面结构必须清晰致风格必须游戏容相致
      5清楚
      视觉效果便理解
      6户熟悉程度
      户通已掌握知识界面应超出般常识
      7户观点考虑
      想户想做户做户总方法理解
      通较两世界(真实虚拟)事物完成更设计:书籍竹简
      8排列
      序界面户轻松
      9安全性
      户作出选择选择逆户作出危险选择时信息介入系统提示
      10灵活性
      简单说户方便述互动重性局限单工具(包括鼠标键盘手柄)
      11性化
      高效率户满意度性化体现应具备专家级初级玩家系统户惯定制界面
      保存设置

    第二节 UI设计流程

    确认目标户
      洛UI设计程中需求设计角色会确定软件目标户获取终户直接户需求
      户交互考虑目标户引起交互设计重点
      例:科学户电脑入门户设计重点
    采集目标户惯交互方式
      类型目标户交互惯种惯交互方式源原针现实交互流程已软件工具交互流程
      然基础通调研分析找户希达交互效果流程确认
    提示引导户
      软件户工具应该户操作控制软件软件响应户动作设定规
      户交互结果反馈提示户结果反馈信息引导户进行户需步操作
    致性原
      设计目标致
      软件中存组成部分(组件元素)组成部分间交互设计目标需致
      例:果电脑操作初级户作目标户简化界面逻辑设计目标该目标需贯彻软件(软件包)整体局部
      元素外观致
      交互元素外观影响户交互效果(类)软件采致风格外观保持户焦点改进交互效果帮助遗憾确认元素外观致没特统衡量方法需目标户进行调查取反馈
      交互行致
      交互模型中类型元素户触发应行事件交互行需致
      例:需户确认操作话框少包含确认放弃两钮
      交互行致性原较极端理念相类型交互元素引起行事件相理念然部分情况正确确相反例子证明理念设计会更加简化户操作流程
    性原
      理解
      软件
      
    户户必须理解软件元素应功
      果户理解需提供种非破坏性途径户通该元素操作理解应功
      例:删操作元素户点击删操作钮提示户删操作者否确认删操作户更加详细理解该元素应功时取消该操作
      达
      户交互中心交互元素应户需功交互元素必须户控制
      户诸键盘鼠标类交互设备通移动触发已交互元素达前见者交互交互元素
      注意交互次数会影响达效果功深深隐藏(般说超4层)户达该元素率降低
      达效果界面设计关复杂界面会影响达效果(参考简单导原)
      控制
       软件交互流程户控制
      功执行流程户控制
      果确实法提供控制目标户理解方式提示户





    第三章 案例展示欣赏分析
    课 题:UI设计案例展示欣赏分析
    授课教师:汪永吉
    教学目标:通章学学生解UI设计案例展示欣赏分析
    教学重点:掌握UI设计案例展示欣赏分析
    教学难点:掌握UI设计案例展示欣赏分析
    教学准备:课参考图形
    教学方法:讲授讨案例分析
    教 材:
    教学时间:8课时
    教学容:UI设计图标输入法播放器界面

    第节 图标

    图标具明确指代含义计算机图形中桌面图标软件标识界面中图标功标识
    图标分广义狭义两种:

    广义
    具指代意义图形符号具高度浓缩快捷传达信息便记忆特性应范围广软硬件网页社交场公场合例:男女厕标志种交通标志等





    狭义
      应计算机软件方面包括:程序标识数标识命令选择模式信号切换开关状态指示等
      图标图片象代表文件程序网页命令图标助户快速执行命令开程序文件单击双击图标执行命令图标浏览器中快速展现容相扩展名文件具相图标
      图标套标准属性格式通常尺寸图标含张相显示容图片张图片具尺寸发色数图标套相似图片张图片格式点说图标三维图标特性:含透明区域透明区域透出图标桌面背景结构图标实麦劳巨霸汉堡差
      图标实际张格式图片集合体包含定透明区域计算机操作系统显示设备样性导致图标需种格式

    象素分辨
    操作系统显示图标时会定标准选择图标中适合前显示环境状态图果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 统性
    收集图标文件接分享






    第四章 UI界面分析设计
    课 题:UI界面设计分析
    授课教师:汪永吉
    教学目标:通章学学生解UI界面设计分析
    教学重点:掌握UI界面设计分析
    教学难点:掌握UI界面设计分析
    教学准备:课参考图形
    教学方法:讲授讨案例分析
    教 材:
    教学时间:16课时
    教学容:

    第节 题
    第二节 素
    第三节 分析
    第四节 制作整合
    第五节 成形
    第六节 验证


    第五章 创作
    课 题:UI界面设计创作
    授课教师:
    教学目标:通章学学生解UI界面设计创作
    教学重点:掌握UI界面设计创作
    教学难点:掌握UI界面设计创作
    教学准备:课参考图形
    教学方法:讲授讨案例分析
    教 材:
    教学时间:24课时
    教学容:

    创作















    文档香网(httpswwwxiangdangnet)户传

    《香当网》用户分享的内容,不代表《香当网》观点或立场,请自行判断内容的真实性和可靠性!
    该内容是文档的文本内容,更好的格式请下载文档

    下载文档到电脑,查找使用更方便

    文档的实际排版效果,会与网站的显示效果略有不同!!

    需要 5 香币 [ 分享文档获得香币 ]

    下载文档

    相关文档

    UI界面设计服务委托合同范本

    本合同由以下当事人订立,并于 ______年____月 ____日签订:甲方:_______________乙方:_______________依据《中华人民共和国合同法》的规定,合同双方就甲方...

    3年前   
    558    0

    9.ai ei ui(教案)

    9 ɑi ei ui【教学目标】 1. 正确认读复韵母 ɑi、ei、ui 和它们的四声,读准音,认清形。2. 正确拼读声母和 ɑi、ei、ui 组成的音节。了解复韵母的标调规则。能在四线格中正...

    5年前   
    4616    0

    ui设计教案18个课时

    备 课 本Lesson Preparation _2013__--__2014_学年 第_一_学期Academic Year - Semester 课 程 名 称 ...

    2年前   
    458    0

    代码和界面设计

    摘   要 随着现代计算机科学的发展,网络已经越来越普及,如今网络已经成为每个人生活的一部分,同时网络也提供了一种很好的信息交换平台,而个人主页是一个可以在网络上展示个人信息的方便手...

    2年前   
    496    0

    用户界面设计报告

       用户界面设计报告 来自:http://www.chinaspis.com 作者:林锐 电子工业出版社出版发行 { 项目名称 } 用户界面设计报告 文件状态: [√] ...

    15年前   
    14574    0

    《ai ei ui》教学设计

    《ai ei ui》教学设计《ai ei ui》教学设计1   【教学目标】   1、学会3个复韵母ai ei ui 。   2、能正确认读音节,会读拼音词。   3、会读复韵母...

    2年前   
    528    0

    《ai ei ui》教学反思

    《ai ei ui》教学反思《ai ei ui》教学反思1   《ai ei ui》是拼音教学中学习复韵母的第一课,但同学大多在幼儿园时都已学过,所以我在本课的设计中,除了让同学读准音,订正...

    2年前   
    370    0

    UI设计合同样本

    北京XXX有限公司技术服务暨委托UI设计合同本合同由以下当事人订立,并于 年 月 日签订: 甲方:上海XXX有限公司 ...

    3年前   
    873    0

    10.ai、ei、ui2

    10.ai、ei、ui2  第二课时  教学目的:  1.学习声母与ai、ei、ui组成的音节,能准确地拼读音节。  2.能正确地书写由声母和ai、ei、ui组成的音节。  3.读好小儿歌。 ...

    6个月前   
    142    0

    UI设计师的具体职责

    UI设计师的具体职责职责:1、负责公司产品、移动APP产品的美术创意与UI界面设计;2、负责APP整体风格、视觉效果、用户操作体验策划及设计;3、把握设计趋势并提出创新性的设计思路;4、熟悉用...

    2年前   
    376    0

    产品经理与UI设计师的对话

    一位产品经理与交互设计师的对话【转载】(2010-09-18 09:15:54) 转载标签: 产品经理交互设计师用户体验it分类: 产品经理 在一个互联网公司的工作流程中,产品经理(主要指偏向...

    9年前   
    532    0

    UI设计师的基本职责

    UI设计师的基本职责职责:1.负责公司软件的风格设计、涉及App端、Web端等,把控总体风格效果;2.负责UI交互设计,参与产品原型设计,提高软件使用体验;3.输出高保真设计图,配合前端高还原...

    2年前   
    463    0

    基于客户体验的APP界面设计研究

    摘要:文章通过用户体验的现状来研究APP的设计,对导航APP的现状,用户体验的重要性,为主流用户设计APP几个方面来谈该APP对用户体验的理解,APP 界面设计问题,从用户体验视角出发,研究了...

    8个月前   
    202    0

    网站界面设计中十二种基本版面类型

    网站界面设计中十二种基本版面类型一、骨骼型 骨骼型是一种规范的理性的分割方法。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向通栏、双栏、三栏和四栏等。一般以竖向分栏为多。在图片和文字的编排上 则...

    9年前   
    660    0

    静态网页界面设计毕业论文

     毕 业 论 文(设计) 题 目 泾县蜂产品网站界面的设计与制作 指导老师 专业班级 ...

    5年前   
    1278    0

    基于STM32多功能播放器的应用界面设计

    基于STM32多功能播放器的应用界面设计中文题目摘 要随着全球经济的不断增长和移动通信技术的不断发展,数字媒体设备也不断的在进步发展。人们可以使用他们的智能手机来更好地丰富他们的生活。手机应...

    2年前   
    444    0

    UI设计具体工作职责5篇

    UI设计具体工作职责5篇1、根据产品需求,对产品的整体美术风格、交互设计、界面结构、操作流程等做出设计;2、负责项目中各种交互界面、图标、LOGO、按钮等相关元素的设计与制作;3、能积极与开发...

    2年前   
    376    0

    关于UI设计你需要自问的12个问题

    UI 设计的魅力在于,你不仅需要适当的技巧,更要理解用户与程序的关系。一个有效的用户界面关注的是用户目标的实现,包括视觉元素与功能操作在内的所有东西都需要完整一致。为了实现这个目标,你需要问自...

    11年前   
    590    0

    2015UI设计师个人年度总结

    2015UI设计师个人年度总结  时间一晃而过,转眼间试用期已接近尾声。这是我人生中弥足珍贵的经历,也给我留下了精彩而美好的回忆。在这段时间里各位同事和领导给予了我足够的宽容、支持和帮助,请看...

    8年前   
    473    0

    软件UI工程师的基本职责

    软件UI工程师的基本职责职责:1.负责行业软件平台产品、项目以及相关移动类产品的视觉设计2.参与产品前期界面研究、竞品及设计流行趋势分析3.能输出高质量的UI设计,保持产品的视觉统一性,项目上...

    2年前   
    423    0

    文档贡献者

    文***品

    贡献于2023-10-22

    下载需要 5 香币 [香币充值 ]
    亲,您也可以通过 分享原创文档 来获得香币奖励!
    下载文档

    该用户的其他文档