UI设计 —创意表达与实践教学课件1
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
以用户为中心的设计与开发流程
【外包公司产品开发流程】
外包公司的开发流程包括沟通、评估、策划、UE规划、视觉、开发、测试、验收、上线、 运营、分析、升级。
外包流程
【网站推出发流程】
网站推出流程包括试生产、启动会议、设计模板、内容装配、商务工具集成、渠道优化目标、 审核和批准、站点推出。
网站推出流程
【UI 设计的分类】
第一部分：网页界面、手持移动设备界面（系统界面、独立APP应用界面）
应用程序界面设计
手机系统界面设计
网页界面设计
第二部分：平板电脑、电脑系统、应用软件界面、游戏界面及车载导航设备界面
iPad平板电脑界面设计
iMac苹果操作系统界面设计
车载导航界面设计
游戏界面设计
第三部分：智能家居界面、可穿戴设备界面及家电类微型液晶屏界面
Android系统底部的导航交互
2、设计规范、平台特性越来越受重视 对于实现与找到适配用户学习新的操作规范与平台范式是有成本方面的考虑，因此 大的厂商在设计交互动态效果时都遵循现有的平台的设计范式，所谓独创或者自创 的交互效果未必能达到理想的状态。
3、微交互中更多使用动态效果 过于华丽的动画，会导致用户等待的时间延长，经常出现容易引起用户的反感与厌 恶。合乎逻辑的动画、微交互形式将作为新的平台规范。如下拉刷新、Float Label 等很难察觉的动效将会更流行。
第二部分：网页设计中的UI设计 1、手机APP不一定会有对应的全功能的网页 手机版的应用开发一定是功能最齐全、最强大的。因为手机可以用 发通知的方式与用户贴近，让用户收到更丰富全面的信息资源。 HTML5 页面作为分享页面展示、导流的重要入口，会优先保留内 容的展示和消费、二次分享的功能，也会满足最基础的应用功能。
滴滴出行微信版界面设计
2、已有大量用户的桌面端网站，将不会轻易改版
对于一个具备大量用户的网站的改版设计，将会从成Βιβλιοθήκη Baidu与收益之间比例关系进行权衡。 通常情况下如果网站做视觉效果的调整，主要从品牌扩展、皮肤美化等因素进行修改； 如果网站从功能层面出发，将会从手机版、平面触摸版的设计出发，然后延伸到桌面 端来进行界面的改良设计。
VD：Visual Design（视觉设计） CD：Content Design（文案设计） UIC：User Interface Code（界面编码开发） UR：User Research（用户研究）——竞品分析，可用性测试和评估 PM：Product Manager（产品经理）——决策产品方向、架构与需求 BI：Business Intelligence（市场分析） WIMP：Window/Icon/Menu/Pointing Device（窗口/图标/菜单/指点设备）
类型一：以客户需求为导向的企业 这类企业就是行内俗称的外包公司，主要以满足客户需求来承接业务，设计师需 要在此过程中不断的修改设计方案与沟通设计想法。虽然这类设计公司经常加班 熬夜，并且设计师的待遇相对偏低，但对于新人能接触到各类设计项目，为自己 囤积作品与累积项目经验。
类型二：以用户为中心的企业 这类企业的主要业务就是研发自己的产品，并且产品是直接面向用户，通常公司 会在用户体验方面投入较多的精力与资金，擅长挖掘用户需求与竞品分析。以不 断优化的高品质UI来吸引用户群的青睐，针对目标用户进行开发与设计。
手机界面中浮动面板与微交互设计应用
4、视觉设计会影响APP界面的交互/内容的设计 精美的插画、摄影图像、有趣味的游戏设计等都 会更多的影响到APP界面的交互设计与内容设计。 APP界面设计的版面编排、字体选择，图像质感、 元素搭配等都直接影响APP本身的品质感。
手机APP界面中图形图像的应用
5、“智能通知”将会成为新的APP主界面 Apple Watch等智能手表的核心价值体现在“智能通知”，尤其在手机应用中很多的
2、软件配置 98%的UI设计师会使用平面位图软件 Photoshop，85%的UI设计师会使用 平面矢量软件Illustrator，30%的UI设 计师会使用网页设计软件。在UI设计行 业里，基础软件只能进入岗位，从事简 单基础的设计工作，其他拓展类的软件 可以对岗位能力的提升与就业面上有更 多的选择权。
【 UI设计师的职业规划】
1、设计师的能力和性格对职业发展的影响 • 设计师的眼界 优秀的UI设计师是需要积累和沉淀，需要靠平时点滴的积累。 • 设计师的沟通能力 倾听：客户、项目组其他成员的意见，收集信息，倾听客户的内心需求及对产品的期望和愿景。 提问：挖掘客户深层次的需求，或确定客户表达不清楚的地方。 解决：用设计师专业的眼光和素养，评估各类可行性，将客户的意见和各方面信息总结出目前最 优解决方案，变成草案，再次和客户确认，用邮件确认，留下文字信息。 • 设计师的技术表现 手绘草稿能力和软件操作能力，效果图的效率与质量，产品演示DEMO等决定视觉 表现因素。 • 设计师的整合能力 能将手头的资源素材整合起来，用最好的方式给客户展示出来。
主流设计软件的使用率
【 UI设计师必备技能】
1、手绘能力 在开展设计项目时，设计前期 手绘草图能力是不可缺少的。 手绘能力从某种程度上能反映 出该设计师的美术功底，同时 对职业的提升与发展都有一定 程度上的影响。
手绘UI草图模型
2、熟练操作绘图软件 UI设计师最常用的绘图软件就是Photoshop和Illustrator，必须掌握该位图软件 与矢量软件的核心使用功能及运用技法。 • 位图概念、像素与分辨率、图像格式、色彩管理、透视原理、光影效果及其 他基本操作设置。 • Photoshop中钢笔工具路径绘图、选区、曲线调整的技巧。 • Photoshop中图形样式、常用滤镜、6类混合模式的运用。 • Photoshop中快速蒙版、剪切蒙版、图层蒙版和矢量蒙版的运用。 • Photoshop中通道与颜色处理的运用技巧。 • Photoshop中多种抠像方法。 • Photoshop与Illustrator协同路径作业。 • Illustrator中矢量图形绘制、路径的编辑、网格渐变的高级用法。
APP，“智能通知”的推动方式成为与用户在不启动APP的状态下最直接的沟通渠道。未 来“智能通知”不再以小广告或者类似Widget的形式出现，可以更接近手机屏幕大小，按 用需求出现，具备较为完整的界面功能，让用户在不打开一个APP应用下，可以享受到 APP提供的全部功能。
智能手表及手机“智能通知”界面设计
2014年中旬从国内大型招 聘网站前程无忧、智联招聘和 中华英才网获取对UI设计师岗 位的基本生存状态信息数据。 据不完全统计全国已有UI设计 师30万余人，其中70%为网页 UI设计师，20%为手持设备UI 设计师 ，10%为其他UI设计师。
UI设计师分类比例
【未来UI设计新领域】
未来UI设计的领域主要体现在全息投影交互技术、可穿戴设备、图像加强技术、远程 控制、3D打印机、运动感应技术、多功能眼镜技术、智能手表、人体穿戴医疗设备及 无人驾驶汽车等领域。
2、VR的设计工具将开始出现 2016 年随着 Oculus Rift 的正式发布，VR 进入了商用化的元年。VR 带来的身临其境 感显然会带来新的信息展现和交互方式，这些都不是目前的平面设计软件所能满足的， 但目前进行VR也没有除了直接搞代码之外的设计方式，未来几年将有所改观。
Oculus Rift 虚拟VR设备
可穿戴设备界面设计
智能家居操作界面设计
家用咖啡机操作界面设计
第四部分：医疗及各种数码机床等自动化控制界面、微型嵌入式设备界面
医疗用具的界面设计
第五部分：卡拉OK点歌、远程会议监控、虚拟现实等界面
远程虚拟设备界面设计
初识UI设计行业
【UI 行业现状】
目前，UI设计行业正在全球软件业兴起，属于高新技术设计产业。虽然国内在人机交 互领域比国外晚十几年，但近十年，随着APP开发成本降低，个人创业及中小型IT企 业在国内遍地开花，导致了UI设计人才的需求井喷。此外国内众多IT企业（如百度、 腾讯、Yahoo、中国移动、联想、网易、盛大、淘宝等）均成立专业的UI设计部门， 高级UI专业人才稀缺，人才资源争夺很激烈，薪资也很可观。
3、理解需求文档与文档整理 在开始一个项目时，UI设计师需要在目录下建立6个文件文档，并具有严格的整 理规范，才能保证团队小组成员共享资源时节约时间，提高效率。
文档整理规范
• 参考图片：该文件夹放很多设计灵感，如色彩布局参考或竞品参考等； • 纹理素材：该文件夹放一些作画过程中用到的贴图嵌入图，或者一些额外控件等； • 需求资料：该文件夹放客户的需求文档，给的参考和客户提供的产品图片，或者是 产品经理提供的文案、线框图、流程、低保真模型等； • 效果图：该文件夹放画的设计样稿、飞机稿、最终定稿、小DEMO、设计理念等； • 源文件：该文件夹放所有可修改的源文件； • 切片：该文件夹放开发用的切片和UI 规范，以及一切文字色值、坐标等。
初识UI设计
【什么是UI】
UI即User Interface（用户界面）的简称。UI设计是指对软件的人机交互、操作逻辑、 界面视觉美观的整体设计。它的工作主要包括界面的视觉设计、界面的交互设计、界 面与用户体验3个部分。
【UI 设计常用名词及缩写】
UI：User Interface（用户界面） GUI：Graphical User Interface（图形用户界面） HUI：Handset User Interface（手持设备用户界面） WUI：Web User Interface（网页用户界面） IA：Information Architecture（信息架构） UX：User Experience（用户体验） IxD: Interaction Design（人机交互） UCD：User Centered Design（以用户为中心的设计） UPA：Usability Professionals Association（可用性专业协会）
3D全息投影
可穿戴设备
Magic Cube奇幻投影键盘
3D打印技术
个人健康顾问设备
【UI 设计的发展趋势】
第一部分：移动应用中的UI设计 1、各平台 (Android/iOS/HTML5/Web) 的标准设计语言接近一致 部分原生控件上只存在风格上的差异，对用户无显著影响。桌面常见的交互形式也将更多 影响移动端，要支持 iPad Pro 这样的生产级设备，iOS/Android 会为了兼容桌面场景作 出优化。
第三部分：设计工具的UI设计 1、UI原型工具出现设计标准 实现UI的交互与视觉界面设计，需要借助专业的UI设计工具来实现。一款好的原型设计 工具将主导未来新平台的设计标准，它应该具备以下优秀的功能：与静态界面设计紧密 结合；移动终端的界面方便制作响应式设计；操作简单易懂；拓展性强，能实现较为复 杂的交互效果。
【企业体制与文化环境对UI设计工作的影响】
在现实工作中，设计师往往抱怨不能按照自己的设计思想去完成设计方案，会受 到企业各种条件的制约与影响。其实这样的困惑在与初入行业的年轻UI设计师们 对企业体制与文化环境的了解太少，这些都将直接影响到UI设计师的设计作品是 否能得到企业的重用。通过大量毕业生的就业的情况反馈，企业从事的行业与公 司的类型会对从事的UI设计岗位的设计师工作产生重要的影响。因此，总结主要 有以下几种类型的公司：
2、职业的发展维度 UI设计师进入职场后，职业生涯的发展可以分为横向发展和纵向发展的设计师。他们需 要掌握的技能和发展的岗位分别是视觉设计、交互设计、用户体验、代码编程、项目管理。
UI设计师的五大主要岗位
UI设计工作流程
【自主软件产品开发流程】
常见软件产品的开发流程包括产品需求分析、功能定义、交互原型、程序技术预研、 效果图绘制、开发、测试、发布上线、运营、迭代开发。
初识UI设计师
【UI设计师所需装备】
1、硬件配置 从事设计行业工作的UI设计师，软件与硬件都是息息相关的。设计工具的完备是从事 这个行业的基础条件。工作电脑的配置需达到以下配置：PC机的配置为CPU为4核以 上、内存8GB以上、显卡内存2GB以上、SSD固态硬盘；Windows 7以上系统， Adobe CC等软件已经不再支持XP系统，当然有苹果一体机或MAC Pro更好。
【外包公司产品开发流程】
外包公司的开发流程包括沟通、评估、策划、UE规划、视觉、开发、测试、验收、上线、 运营、分析、升级。
外包流程
【网站推出发流程】
网站推出流程包括试生产、启动会议、设计模板、内容装配、商务工具集成、渠道优化目标、 审核和批准、站点推出。
网站推出流程
【UI 设计的分类】
第一部分：网页界面、手持移动设备界面（系统界面、独立APP应用界面）
应用程序界面设计
手机系统界面设计
网页界面设计
第二部分：平板电脑、电脑系统、应用软件界面、游戏界面及车载导航设备界面
iPad平板电脑界面设计
iMac苹果操作系统界面设计
车载导航界面设计
游戏界面设计
第三部分：智能家居界面、可穿戴设备界面及家电类微型液晶屏界面
Android系统底部的导航交互
2、设计规范、平台特性越来越受重视 对于实现与找到适配用户学习新的操作规范与平台范式是有成本方面的考虑，因此 大的厂商在设计交互动态效果时都遵循现有的平台的设计范式，所谓独创或者自创 的交互效果未必能达到理想的状态。
3、微交互中更多使用动态效果 过于华丽的动画，会导致用户等待的时间延长，经常出现容易引起用户的反感与厌 恶。合乎逻辑的动画、微交互形式将作为新的平台规范。如下拉刷新、Float Label 等很难察觉的动效将会更流行。
第二部分：网页设计中的UI设计 1、手机APP不一定会有对应的全功能的网页 手机版的应用开发一定是功能最齐全、最强大的。因为手机可以用 发通知的方式与用户贴近，让用户收到更丰富全面的信息资源。 HTML5 页面作为分享页面展示、导流的重要入口，会优先保留内 容的展示和消费、二次分享的功能，也会满足最基础的应用功能。
滴滴出行微信版界面设计
2、已有大量用户的桌面端网站，将不会轻易改版
对于一个具备大量用户的网站的改版设计，将会从成Βιβλιοθήκη Baidu与收益之间比例关系进行权衡。 通常情况下如果网站做视觉效果的调整，主要从品牌扩展、皮肤美化等因素进行修改； 如果网站从功能层面出发，将会从手机版、平面触摸版的设计出发，然后延伸到桌面 端来进行界面的改良设计。
VD：Visual Design（视觉设计） CD：Content Design（文案设计） UIC：User Interface Code（界面编码开发） UR：User Research（用户研究）——竞品分析，可用性测试和评估 PM：Product Manager（产品经理）——决策产品方向、架构与需求 BI：Business Intelligence（市场分析） WIMP：Window/Icon/Menu/Pointing Device（窗口/图标/菜单/指点设备）
类型一：以客户需求为导向的企业 这类企业就是行内俗称的外包公司，主要以满足客户需求来承接业务，设计师需 要在此过程中不断的修改设计方案与沟通设计想法。虽然这类设计公司经常加班 熬夜，并且设计师的待遇相对偏低，但对于新人能接触到各类设计项目，为自己 囤积作品与累积项目经验。
类型二：以用户为中心的企业 这类企业的主要业务就是研发自己的产品，并且产品是直接面向用户，通常公司 会在用户体验方面投入较多的精力与资金，擅长挖掘用户需求与竞品分析。以不 断优化的高品质UI来吸引用户群的青睐，针对目标用户进行开发与设计。
手机界面中浮动面板与微交互设计应用
4、视觉设计会影响APP界面的交互/内容的设计 精美的插画、摄影图像、有趣味的游戏设计等都 会更多的影响到APP界面的交互设计与内容设计。 APP界面设计的版面编排、字体选择，图像质感、 元素搭配等都直接影响APP本身的品质感。
手机APP界面中图形图像的应用
5、“智能通知”将会成为新的APP主界面 Apple Watch等智能手表的核心价值体现在“智能通知”，尤其在手机应用中很多的
2、软件配置 98%的UI设计师会使用平面位图软件 Photoshop，85%的UI设计师会使用 平面矢量软件Illustrator，30%的UI设 计师会使用网页设计软件。在UI设计行 业里，基础软件只能进入岗位，从事简 单基础的设计工作，其他拓展类的软件 可以对岗位能力的提升与就业面上有更 多的选择权。
【 UI设计师的职业规划】
1、设计师的能力和性格对职业发展的影响 • 设计师的眼界 优秀的UI设计师是需要积累和沉淀，需要靠平时点滴的积累。 • 设计师的沟通能力 倾听：客户、项目组其他成员的意见，收集信息，倾听客户的内心需求及对产品的期望和愿景。 提问：挖掘客户深层次的需求，或确定客户表达不清楚的地方。 解决：用设计师专业的眼光和素养，评估各类可行性，将客户的意见和各方面信息总结出目前最 优解决方案，变成草案，再次和客户确认，用邮件确认，留下文字信息。 • 设计师的技术表现 手绘草稿能力和软件操作能力，效果图的效率与质量，产品演示DEMO等决定视觉 表现因素。 • 设计师的整合能力 能将手头的资源素材整合起来，用最好的方式给客户展示出来。
主流设计软件的使用率
【 UI设计师必备技能】
1、手绘能力 在开展设计项目时，设计前期 手绘草图能力是不可缺少的。 手绘能力从某种程度上能反映 出该设计师的美术功底，同时 对职业的提升与发展都有一定 程度上的影响。
手绘UI草图模型
2、熟练操作绘图软件 UI设计师最常用的绘图软件就是Photoshop和Illustrator，必须掌握该位图软件 与矢量软件的核心使用功能及运用技法。 • 位图概念、像素与分辨率、图像格式、色彩管理、透视原理、光影效果及其 他基本操作设置。 • Photoshop中钢笔工具路径绘图、选区、曲线调整的技巧。 • Photoshop中图形样式、常用滤镜、6类混合模式的运用。 • Photoshop中快速蒙版、剪切蒙版、图层蒙版和矢量蒙版的运用。 • Photoshop中通道与颜色处理的运用技巧。 • Photoshop中多种抠像方法。 • Photoshop与Illustrator协同路径作业。 • Illustrator中矢量图形绘制、路径的编辑、网格渐变的高级用法。
APP，“智能通知”的推动方式成为与用户在不启动APP的状态下最直接的沟通渠道。未 来“智能通知”不再以小广告或者类似Widget的形式出现，可以更接近手机屏幕大小，按 用需求出现，具备较为完整的界面功能，让用户在不打开一个APP应用下，可以享受到 APP提供的全部功能。
智能手表及手机“智能通知”界面设计
2014年中旬从国内大型招 聘网站前程无忧、智联招聘和 中华英才网获取对UI设计师岗 位的基本生存状态信息数据。 据不完全统计全国已有UI设计 师30万余人，其中70%为网页 UI设计师，20%为手持设备UI 设计师 ，10%为其他UI设计师。
UI设计师分类比例
【未来UI设计新领域】
未来UI设计的领域主要体现在全息投影交互技术、可穿戴设备、图像加强技术、远程 控制、3D打印机、运动感应技术、多功能眼镜技术、智能手表、人体穿戴医疗设备及 无人驾驶汽车等领域。
2、VR的设计工具将开始出现 2016 年随着 Oculus Rift 的正式发布，VR 进入了商用化的元年。VR 带来的身临其境 感显然会带来新的信息展现和交互方式，这些都不是目前的平面设计软件所能满足的， 但目前进行VR也没有除了直接搞代码之外的设计方式，未来几年将有所改观。
Oculus Rift 虚拟VR设备
可穿戴设备界面设计
智能家居操作界面设计
家用咖啡机操作界面设计
第四部分：医疗及各种数码机床等自动化控制界面、微型嵌入式设备界面
医疗用具的界面设计
第五部分：卡拉OK点歌、远程会议监控、虚拟现实等界面
远程虚拟设备界面设计
初识UI设计行业
【UI 行业现状】
目前，UI设计行业正在全球软件业兴起，属于高新技术设计产业。虽然国内在人机交 互领域比国外晚十几年，但近十年，随着APP开发成本降低，个人创业及中小型IT企 业在国内遍地开花，导致了UI设计人才的需求井喷。此外国内众多IT企业（如百度、 腾讯、Yahoo、中国移动、联想、网易、盛大、淘宝等）均成立专业的UI设计部门， 高级UI专业人才稀缺，人才资源争夺很激烈，薪资也很可观。
3、理解需求文档与文档整理 在开始一个项目时，UI设计师需要在目录下建立6个文件文档，并具有严格的整 理规范，才能保证团队小组成员共享资源时节约时间，提高效率。
文档整理规范
• 参考图片：该文件夹放很多设计灵感，如色彩布局参考或竞品参考等； • 纹理素材：该文件夹放一些作画过程中用到的贴图嵌入图，或者一些额外控件等； • 需求资料：该文件夹放客户的需求文档，给的参考和客户提供的产品图片，或者是 产品经理提供的文案、线框图、流程、低保真模型等； • 效果图：该文件夹放画的设计样稿、飞机稿、最终定稿、小DEMO、设计理念等； • 源文件：该文件夹放所有可修改的源文件； • 切片：该文件夹放开发用的切片和UI 规范，以及一切文字色值、坐标等。
初识UI设计
【什么是UI】
UI即User Interface（用户界面）的简称。UI设计是指对软件的人机交互、操作逻辑、 界面视觉美观的整体设计。它的工作主要包括界面的视觉设计、界面的交互设计、界 面与用户体验3个部分。
【UI 设计常用名词及缩写】
UI：User Interface（用户界面） GUI：Graphical User Interface（图形用户界面） HUI：Handset User Interface（手持设备用户界面） WUI：Web User Interface（网页用户界面） IA：Information Architecture（信息架构） UX：User Experience（用户体验） IxD: Interaction Design（人机交互） UCD：User Centered Design（以用户为中心的设计） UPA：Usability Professionals Association（可用性专业协会）
3D全息投影
可穿戴设备
Magic Cube奇幻投影键盘
3D打印技术
个人健康顾问设备
【UI 设计的发展趋势】
第一部分：移动应用中的UI设计 1、各平台 (Android/iOS/HTML5/Web) 的标准设计语言接近一致 部分原生控件上只存在风格上的差异，对用户无显著影响。桌面常见的交互形式也将更多 影响移动端，要支持 iPad Pro 这样的生产级设备，iOS/Android 会为了兼容桌面场景作 出优化。
第三部分：设计工具的UI设计 1、UI原型工具出现设计标准 实现UI的交互与视觉界面设计，需要借助专业的UI设计工具来实现。一款好的原型设计 工具将主导未来新平台的设计标准，它应该具备以下优秀的功能：与静态界面设计紧密 结合；移动终端的界面方便制作响应式设计；操作简单易懂；拓展性强，能实现较为复 杂的交互效果。
【企业体制与文化环境对UI设计工作的影响】
在现实工作中，设计师往往抱怨不能按照自己的设计思想去完成设计方案，会受 到企业各种条件的制约与影响。其实这样的困惑在与初入行业的年轻UI设计师们 对企业体制与文化环境的了解太少，这些都将直接影响到UI设计师的设计作品是 否能得到企业的重用。通过大量毕业生的就业的情况反馈，企业从事的行业与公 司的类型会对从事的UI设计岗位的设计师工作产生重要的影响。因此，总结主要 有以下几种类型的公司：
2、职业的发展维度 UI设计师进入职场后，职业生涯的发展可以分为横向发展和纵向发展的设计师。他们需 要掌握的技能和发展的岗位分别是视觉设计、交互设计、用户体验、代码编程、项目管理。
UI设计师的五大主要岗位
UI设计工作流程
【自主软件产品开发流程】
常见软件产品的开发流程包括产品需求分析、功能定义、交互原型、程序技术预研、 效果图绘制、开发、测试、发布上线、运营、迭代开发。
初识UI设计师
【UI设计师所需装备】
1、硬件配置 从事设计行业工作的UI设计师，软件与硬件都是息息相关的。设计工具的完备是从事 这个行业的基础条件。工作电脑的配置需达到以下配置：PC机的配置为CPU为4核以 上、内存8GB以上、显卡内存2GB以上、SSD固态硬盘；Windows 7以上系统， Adobe CC等软件已经不再支持XP系统，当然有苹果一体机或MAC Pro更好。