新書推薦：
《
法国小史
》
售價：NT$
499.0
《
五凉王国的七张面孔
》
售價：NT$
359.0
《
掌控生活，从掌控时间开始
》
售價：NT$
250.0
《
物理光学漫步——衍射计算理论及应用研究故事
》
售價：NT$
874.0
《
人类起源简史：破译700万年人类进化的密码
》
售價：NT$
354.0
《
古典与现代 ： 民国大学的潮与岸
》
售價：NT$
406.0
《
浮华梦醒：民国实业家的创业之路
》
售價：NT$
291.0
《
财之道丛书·后资本主义生活：财富的意义、经济的未来与货币的时间理论
》
售價：NT$
354.0
|
| 編輯推薦： |
|
《移动软件UI设计（高等职业教育新形态项目化教材）》采用项目案例编写模式，针对目前的智能手机UI设计所涉及的相关知识和技术技能进行知识讲解和案例制作过程的演示，使读者在深刻理解UI设计相关知识的基础上，牢固掌握各种控件、图标和界面的制作技术，又将精益求精、严谨创新、树立正确的设计观等思政元素融入案例与教学中，做到无痕融入。
|
| 內容簡介： |
|
以职教改革新形态教材为特色，科学严谨、深入浅出形式多样的手册和融媒体编写方法，全面系统地讲述了UI设计过程、原理和方法，详细介绍了常用UI元素以及界面设计思路和制作过程，重点讲解了当前热门的手机App设计，帮助读者在较短的时间内掌握UI界面设计的具体流程、内容和技巧。
|
| 關於作者： |
|
苏州信息职业技术学院多媒体动漫系主任，副教授。中国大学慕课公开课“UI设计”课讲了8轮，2022年获江苏省教学大赛一等奖，获得过正保教育杯it教育工程就业技能大赛优秀指导教师称号。
|
| 目錄：
|
第1部分 UI基础设计
项目1 UI基础与规范
任务1 什么是UI设计
一、UI设计概述
二、UI设计的分类
三、UI设计的发展趋势
任务2 UI设计的常用工具和工作流程
一、UI设计的常用工具
二、UI设计的流程
任务3 UI设计的原则和规范
一、UI设计的原则
二、UI设计的规范
三、设计规范分析
项目2 UI设计常用控件
任务1 控制元素制作
一、各类常用控制器
二、控制元素案例制作
任务2 筛选器制作
一、各类常用筛选器
二、筛选器案例制作
任务3 表单控件制作
一、各类常用表单控件
二、表单控件案例制作
任务4 按钮制作
一、按钮规范
二、国潮艺术
三、按钮案例制作
任务5 其他控件制作
一、模态浮层
二、非模态浮层
三、其他控件之模态浮层案例制作
项目3 图标设计
任务1 图标设计的准备
一、图标的含义
二、图标的分类
三、图标的设计原则
四、图标的设计创意
五、图标的设计要点
六、图标的设计规范
任务2 线性化图标设计
一、线性化风格图标的特征
二、线性化风格图标的分类
三、线性化风格图标的绘画准备
四、 两种常用线性化图标的绘画技法
五、线性化图标案例制作
任务3 扁平化图标设计
一、什么是扁平化风格
二、扁平化风格的特征
三、扁平化风格的四种类型
四、扁平化图标案例制作
任务4 拟物化图标设计
一、拟物化风格的特征
二、拟物化风格与扁平化风格的比较
三、拟物化风格图标的设计分析
四、拟物化风格图标的绘画技法
五、拟物化图标案例制作
第二部分 UI创意设计
项目4 “寅虎”手机主题界面设计
任务1 “寅虎”手机主题界面设计的准备
一、手机主题UI界面设计概要
二、“寅虎”主题界面设计思路
任务2 “寅虎”主题形象和壁纸制作
一、“寅虎”主题形象设计
二、手机壁纸设计
三、“寅虎”主题形象制作
四、手机壁纸制作
任务3 时钟天气Widget制作
一、Widget的含义
二、时钟天气Widget的结构组成
三、时钟天气Widget制作
任务4 “计算器”图标设计与制作
一、通用背板设计
二、图标内容设计
三、“计算器”图标制作
任务5 安卓系统界面布局
一、界面组成
二、操作要点
三、安卓系统界面布局操作
任务6 鸿蒙系统界面布局
一、界面特点
二、操作要点
三、鸿蒙系统界面布局操作
项目5 实用型APP ——“四时”天气界面设计
任务1 “四时”天气APP产品定位和界面设计
一、认识实用型APP
二、几款天气APP比较
三、“四时”天气APP的产品定位
四、“四时”天气APP的界面规范
任务2 “四时”天气APP图标设计
一、“四时”天气APP的小图标种类
二、“四时”天气APP图标案例制作
任务3 “四时”天气APP闪屏设计
一、闪屏的作用
二、闪屏的常见类型
三、 闪屏的设计手法
四、“四时”天气APP闪屏页面的实现
五、“四时”天气APP闪屏案例制作
任务4 “四时”天气APP主页面设计
一、主页面的功能
二、 “四时” 天气APP主页面的组成
三、“四时”天气APP主页面案例制作
任务5 “四时”天气APP近5日天气页面设计
一、“四时”天气APP近5日天气页面的组成元素
二、“四时”天气APP近5日天气页面制作
项目6 新闻类APP ——“悦”新闻界面设计
任务1 “悦”新闻APP产品定位和界面设计
一、认识新闻类APP
二、“悦”新闻APP的产品定位
三、 “悦”新闻APP的界面设计
任务2 “悦”新闻APP首页设计
一、新闻类APP首页排版
二、“悦”新闻APP首页案例制作
任务3 “悦”新闻APP详情页设计
一、“悦”新闻APP详情页的布局
二、“悦”新闻APP详情页案例制作
任务4 “悦”新闻APP登录页面设计
一、 注册登录方式
二、 登录页面设计要点
三、登录页面常用风格
四、“悦”新闻APP登录页面布局
五、“悦”新闻APP登录页面案例制作
任务5 “悦”新闻APP我的页面设计
一、什么是我的页面
二、我的页面设计原则
三、我的页面设计风格
四、“悦”新闻APP我的页面布局
五、“悦”新闻APP我的页面案例制作
项目7 社交类APP ——“轻说”界面设计
任务1 “轻说”APP产品定位和界面设计
一、社交类APP的功能
二、社交类APP的种类
三、社交类APP的设计风格
四、社交类APP赏析——以“微信”“QQ”和“抖音”为例
五、“轻说”APP的产品定位
六、“轻说”APP的界面规范
任务2 “轻说”APP图标与启动页界面设计
一、社交类APP启动页界面的类型
二、 “轻说”APP图标与启动页界面设计
三、“轻说”APP图标与启动页界面案例制作
任务3 “轻说”APP个人中心界面设计
一、社交类APP个人中心界面的功能
二、“轻说” APP个人中心界面的组成
三、“轻说”APP个人中心界面案例制作
任务4 “轻说”APP圈聊界面设计
一、社交类APP聊天界面的组成元素
二、“轻说”APP圈聊界面案例制作
任务5 “轻说”APP通讯录界面设计
一、社交类APP通讯录界面的组成元素
二、“轻说”APP通讯录界面案例制作
任务6 “轻说”APP圈子界面设计
一、社交类APP朋友圈界面的功能
二、“轻说”APP圈子界面案例制作
参考文献
|
| 內容試閱：
|
随着互联网 时代的到来，人工智能技术深入人们工作生活的各个领域，人们每天都在面对各种各样的智能终端设备，移动终端更成为了不可或缺的存在。UI设计是指与软件的人机互动，包括了交互、操作、美观等整体设计，是用户面对一款应用程序的门户。用户从界面开始接触软件，再通过界面上的各类功能器件完成对软件功能的认可，所以，UI设计逐渐成为一款应用程序是不是能赢得更多用户的关键因素之一。UI设计师也已成为各大企业和公司不可或缺的一员，职业发展机会也越来越多。
本书采用项目案例编写模式，针对目前的智能手机UI设计所涉及的相关知识和技术技能进行知识讲解和案例制作过程的演示，使读者在深刻理解UI设计相关知识的基础上，牢固掌握各种控件、图标和界面的制作技术，又将精益求精、严谨创新、树立正确的设计观等思政元素融入案例与教学中，做到无痕融入。
本书编写特点如下：
（1）产教研结合，结合企业真实案例编写项目内容。多方走访企业，利用校企合作工作室平台，将真实案例编入其中，突出实用性、实践性；并在中国大学慕课网站上持续进行授课，含有全部配套资源和视频，并不断研究更新最新资源，可作为线上线上混合式教学使用，也可配合教学作为课后补充。
（2）技艺德融合，多重性载体保障全面发展，项目融思政教育、艺术培养、技术训练于一体化，将文化传承、规范严谨、精益求精、勇于创新等的思政元素融入学习任务中，实施讲授、实践等方法，有效实施课程思政，打造明德育人课堂，既育人育才，又提升艺术修养，有利于读者全面发展。
（3）多级化任务，呈现形式符合认知规律，本书分为基础设计和创意设计两个部分。第1部分主要介绍UI设计的基础与规范、控制元素设计与图标设计；第二部分主要以“寅虎”手机主题界面设计、“四时”天气APP界面设计、“悦”新闻APP界面设计、“轻说”社交APP界面设计四个项目全面介绍智能手机UI设计的应用界面相关知识和技术技能。设计多级化子任务，让读者在完成逐层递进的子任务过程中，获得成就感。
本书提供39段操作视频，请在书中二维码处扫码学习。为方便教学，提供配套的电子课件、教学设计、课程标准、案例素材、源文件等。另外，本书与中国大学慕课中《移动软件UI设计》课程（https://www.icourse163.org/course/SZIUT-1206678819）配套进行，欢迎广大读者参与课程在线学习，团队成员实时在线互动与指导。
任务2 UI设计的常用工具和工作流程
任务目标 知识目标 了解UI设计的常用工具
掌握UI设计的工作流程
技能目标 能够使用UI设计的基本工具
能够掌握UI设计的基本流程
能够进行设计需求分析
价值目标 培养对UI设计行业的兴趣与爱好
培养认真严谨、精益求精的职业精神
提升对UI设计的鉴赏能力
建议课时 理论1课时
课前准备 查找UI设计工作流程的相关资料
评价方法 线上测试、课后作业检测、教师评价、学生互评等
?相关知识
一、UI设计的常用工具
在进行UI 设计时，设计人员常常会使用一些设计工具，常用的设计工具有Photoshop，Illustrator、After?Effects、Axure?RP等。
1.Photoshop
Photoshop简称“PS”，是UI设计、环艺设计、平面设计、网页设计等行业的常用工具，具有使用方便、功能强大的特点，可以高效地对图片进行处理与制作。使用Photoshop不仅能够制作静态的UI界面，还能够制作简单的动效，如按纽点击动效、登录交互动效、表情包动效等。图1-2-1所示为使用Photoshop制作APP界面的效果。
图1-2-1 使用Photoshop制作APP?面的效果
2.Illustrator
Illustrator简称“AI”，是一款由Adobe公司开发的矢量图工具，具有矢量动画设计、界面设计、网站制作和网页动画制作等多种功能。Illustrator作为一款矢量绘图工具，广泛应用于广告设计、网页制作、插图绘制、UI 设计等诸多领域。设计人员在进行UI设计时常常会将Illustrator与Photoshop结合使用。图1-2-2所示为使用Illustrator制作UI界面的效果。
图1-2-2 使用Illustrator制作UI界面的效果
3.After Effects
After?Effects简称“AE”，是Adobe公司推出的-款图形视频处理软件，具有视频处理、动画制作、多层剪辑等多种功能。UI设计人员常使用After?Effects制作产品界面中的动态图形和动画特效，使整个界面更有特色，更能吸引用户的注意力。图1-2-3所示为使用After?Effects制作UI动效的效果。
图1-2-3 使用After?Effects制作UI动效的效果
4.Axure RP
Axure?RP是一款专业的原型图设计工具，主要用于制作UI设计中用到的原型图、线框图和流程图。Axure?RP适合从小型App界面到大型网页界面的原型图绘制，尤其是在绘制网页界面原型图上具有很大优势，深受UI设计人员、交互设计人员的喜爱。图1-2-4所示为使用Axure?RP绘制原型图的效果。
图1-2-4 使用Axure RP绘制原型图的效果
原型图除了使用Axure RP以外，还有很多工具可以使用，例如：墨刀、Sketch等。
二、UI设计的流程
在进行UI设计时，设计人员需要先分析设计需求，然后根据需求明确视觉定位，再进行界面的原型图和效果图绘制，最后对完成的界面进行标注和切图，这样得到的界面效果才更符合企业需求。下面对UI设计的流程进行介绍。
1. 分析设计需求
在UI设计开始之前，设计人员需要先分析设计需求，整理思路，然后才能有针对性地开展设计。分析设计需求可以从以下3个方面入手。
（1）市场需求：市场需求包括市场背景、市场定位、现有产品数据、产品的运营与盈利方式等。
（2）用户需求：产品最终是要为人服务的，因此用户需求的分析必不可少。用户需求分析可从两个方向出发，第1个是用户的显性需求，即用户的可视化特征，如用户的年龄、性别、职业、地域、兴趣爱好等；第二个是用户的隐性需求，即用户的内在特征，如用户的使用场景、用户对产品的需求、用户的情感等。
（3）产品需求：产品需求是产品的组成部分，也是产品最终要达到的目的。在这一阶段设计人员需要确定产品的功能与内容，即产品中有哪些界面、每个界面中有哪些内容、哪些界面是重点设计部分、选择哪种产品系统等。在这一阶段，设计人员也可以将自己设计的产品与同类产品进行对比分析，以明确产品的需求与优势。
2. 明确视觉定位
设计需求分析完成后，即可对UI设计的内容进行视觉定位，一般可从色彩与字体的选择、设计风格、界面布局和构图3个方面进行考虑。
（1）色彩与字体的选择。界面中的色彩不仅会影响整个界面的效果，还会影响用户使用产品的情绪。一般来说，界面中的主题色彩应采用品牌色，因为品牌色已深入人心，可以加深产品在用户心中的印象。另外，界面中的字体选择也同样重要，字体可以直接影响界面风格，设计人员可根据产品属性和品牌特点选择合适的字体。
（2）设计风格。不同的界面有不同的设计风格，UI 设计的风格与产品属性是相辅相成的，设计人员可依据产品属性与需求来选择合适的设计风格，这样更有利于提升产品的视觉效果。
（3）界面布局和构图。界面布局和构图是在有限的空间内，将界面元素按照产品的需求和风格进行排列组合。界面布局和构图是UI设计中不可或缺的一部分，决定了产品界面最终的视觉形象，对产品的品牌也有着重要的影响。
图1-2-5所示为“美团”App的启动页界面，图1-2-6所示为“京东”App的启动页界面。从色彩上来看，这两个界面的主题色彩都选择了品牌色，即美团的黄色和京东的红色；从设计风格上来看，这两个界面的风格都比较精简、直白；从界面布局和构图上来看，这两个界面都是将主要信息放置在中心位置处，保持了视觉上的平衡感。总体来说，这两个界面的视觉定位都非常清晰、准确，让用户一目了然。
图1-2-5 “美团”App的启动页界面 图1-2-6 “京东”App的启动页界面
3. 制定设计规范
基于需求分析和设计研究的结果，UI设计师会制定一套设计规范，如图1-2-7所示，这些规范包括色彩方案、字体选择、布局排版、按钮设计、图标样式等。设计规范旨在确保整个产品的视觉风格和用户体验的一致性。
图1-2-7 制定设计规范
4.绘制原型图
原型图是设计人员对产品的最初设想，主要是对产品内容和结构进行粗略的布局。明确设计规范后，设计人员即可进行原型图的绘制。在绘制原型图前需要对产品界面的文案、图片、音效、交互、动效、视频等进行明确，确定每一个界面中的内容与布局，如果要求不高，也可以找一些相关的图进行替代，重点还是将想表达的思路阐述清楚。在原型图绘制过程中需要和后期程序员积极沟通，例如界面场景动效如何构思展示、技术上能否实现等，这样才能够确保后续工作顺利完成。在这个阶段，UI设计师会根据设计规范，创建产品的原型。原型可以是手绘的草?，如图1-2-8所示，也可以是专?软件制作的低保真原型图，如图1-2-9所示。这些原型将用于讨论和验证设计的可行性。
图1-2-8 手绘原型图
图1-2-9 低保真原型图
5.绘制效果图
完成原型图的绘制后，设计人员即可搜集需要使用的素材并进行UI设计。素材搜集主要包括图片、视频和音效的搜集，以及文字类信息的搜集等。UI设计多使用Photoshop或Illustrator等绘图软件来完成，设计人员可先根据原型图的要求绘制主要形状，再按照设计要求添加或绘制素材，进行界面的制作。在设计时要注意界面的适用性、规范性、易操作性、统一性和层级性。
6.标注与切图
界面的效果图绘制完成后，为了保证后期程序员在开发产品时能够准确、高效地还原界
面，设计人员需要对设计出来的界面进行精确的尺寸标注与切图。合适、精准的标注与切图可以最大限度地还原设计图，起到事半功倍的效果。一般来说，设计人员都会使用一些专业的标注工具来提高工作效率，如MarkMan、PxCook等工具，而进行切图则可直接使用Photoshop。图1-2-10所示为使用PxCook对设计图进行标注的效果。
图1-2-10 PxCook对设计图进行标注
7.测试与完善
通过观察用户的操作行为和用户的反馈，UI设计师可以发现潜在的设计问题，并及时进行修正，根据用户测试的结果，UI设计师会对设计方案进行修订和完善。这可能包括调整布局、优化图标改进交互等。修订后的方案将再次进行用户测试，直到达到满意的用户体验为止。
8.产品发布
在完成所有的测试和完善之后，产品将准备进行最终的发布。在这个阶段，UI设计师需要确保产品的设计在所有平台上都能呈现出最佳的视觉效果和用户体验。
以上就是UI设计的整个工作流程。要注意的是，这个流程不是线性的，也就是说，不同阶段之间可能会有反复的过程。此外，在这个过程中，UI设计师需要与项目团队的其他成员（如产品经理、开发人员等)保持密切沟通和协作，以确保产品的顺利开发与发布。
?任务拓展
1.完成以下测试题：
（1）UI设计的常用软件是什么？它们适用的领域分别是什么？
（2）UI设计的流程有哪些？
（3）UI设计的流程是否是线性的？为什么？
2.请你挑选一款APP，进行用户需求分析。
分析思路：
以微信APP为例：
根据公开信息和分析，微信的用户主要集中在以下几类人群：
（1）年轻人：年轻人是微信用户中比例最高的人群，包括中学生和大学生等。年轻人思想活跃，接受新事物较快，微信的社交功能和新颖的沟通方式正符合他们的需求。
（2）白领：白领是微信的主要用户群体之一，他们使用微信进行工作交流，关注公众大号，获取行业信息等。微信提供的跨平台、便捷的沟通方式以及丰富的社交功能，为白领们提供了极大的便利。
（3）商务人士：微信的商业功能和高效便捷的沟通方式，使得商务人士成为微信的重要用户群体。他们使用微信进行业务交流、商业合作等，微信也为他们提供了丰富的商业资源。
（4）学生：学生是微信的主要用户群体之一，他们使用微信进行社交、学习、获取信息等。微信为学生提供了一个广泛的社交平台，同时也为他们提供了丰富的信息和知识资源。
（5）其他：其他类型的用户也可以加入微信，包括自由职业者、老年人等。他们使用微信进行沟通和交流，同时也享受微信提供的各种便捷服务。
综上所述，微信的用户主要集中在年轻人、白领、商务人士、学生和其他类型用户。微信凭借其便捷的沟通方式、丰富的社交功能和广泛的信息资源，吸引了不同群体的用户，成为人们日常生活中不可或缺的社交工具。
微信的用户需求主要体现在以下几个方面：
（1）用户沟通需求：微信最开始出现就是以解决人们沟通需求为主，尤其是熟人之间的沟通。微信的语音聊天功能让用户录入信息的方式更加简洁，符合移动互联网时代的特征。微信支持跨通信平台、跨操作系统平台，让使用不同平台的用户沟通成本降低。
（2）信息分享需求：微信4.0版本加入了朋友圈这个重量级功能，满足了用户之间一对多的熟人沟通需求。同时，微信也支持查看附近的人、摇一摇、漂流瓶等陌生人社交功能，满足了用户基于陌生人交往的需求。
（3）社交网络需求：微信的社交网络需求也是非常重要的。朋友圈、公众号、微信群等社交网络功能满足了用户对社交网络的需求，让用户能够更好地建立和维护自己的社交网络。
（4）支付转账需求：微信支付功能为用户提供方便快捷的支付和转账服务，满足用户的金融需求。
（5）隐私保护需求：微信用户还希望保障数据的安全，防止个人信息泄露和其他安全问题。
|
|
購物車/收銀台(
0
) | 在線留言板
| 付款方式
| 聯絡我們
| 運費計算
| 幫助中心 |
加入書簽
HOME
新書上架
