高二机工社UI设计项目教程课件学习单元4项目2：iOS系统手机APP界面设计

学习单元4——移动应用界面设计. UI设计项目教程 单元概述 基于Android系统可扩展性的特点，当今各大Android系统手机品牌都有自己的手机主题设计，同时也会在社会上征集具有创意的主题，给自己的品牌注入新鲜的血液，如魅族手机的以“为梦想设计”为主题的手机主题设计。本学习单元中的项目1设定了一个场景，带着读者从需求入手，基于用户的定位，确定手机主题风格，最终确定设计方案。项目2则主要介绍在iOS系统规范的基础上，进行该系统的APP移动界面设计与制作。通过Android系统手机界面和iOS系统手机APP界面的设计制作流程的学习，使读者熟悉移动应用界面设计的流程和设计规范，并对移动应用界面设计形成整体的概念。 学习目标 1．能够说出移动应用界面设计制作的流程 2．通过项目制作，掌握移动应用界面设计的规范 3．灵活使用Photoshop软件表现界面各元素的质感、纹理及细节 iOS系统手机APP界面设计 项目2. TWO 项目描述 一款好的APP应当应用功能齐全，融合复杂的信息内容，追求良好的用户体验。APP有自 己的特点和气质，它的许多特点不同于图标和移动UI设计。它的多种特性包括：虚拟键盘、 目录导航、功能操作、自上而下的操作、减少输入、多点触控手势以及按钮面积等。本项目结 合iOS系统手机特点，根据用户应用定位，力求设计出符合用户交互和情感体验的一款APP。 UI设计项目教程 任务1：即时通信APP“红包”页面界面设计 1．分析线框图 本任务为某一个即时通信APP中的红包功能页面，并从中选取了其中一页交互稿进行视觉化设计。 2．确定风格 该即时通信APP的风格为简约风格，色调统一。基于“红包”的特定属性，色调方面选取了红黄两色作为主色，搭配白色及浅灰色作为辅助色，给人一种喜庆的感觉。 UI设计项目教程 任务1：即时通信APP“红包”页面界面设计 页面元素绘制 UI设计项目教程 任务1：即时通信APP“红包”页面界面设计 最终效果 UI设计项目教程 必备知识 什么是设计规范 设计规范是指视觉设计师对色彩、控件样式、布局排版、字体等制定的一系列规范，用来指导之后的设计工作，确保视觉风格的一致性，控制设计质量，提高设计效率。 设计规范为谁服务 第一，为技术服务。完整的设计规范能让技术人员准确地还原设计样式。 第二，为设计师和设计团队服务。当设计团队成员需要了解产品现状时可以参考设计规范，否则将不断地重复介绍相关的要求，影响工作的效率。 第三，为品牌服务。各个设计的元素必须严格遵循规范，这样才能给用户传达统一的品牌形象，从而潜移默化地进行品牌渗透。 UI设计项目教程 必备知识 设计规范的好处 第一，可以控制设计的质量，可以让UI界面展现的形式统一，规范视觉元素的运用。用户在浏览时就会感到流畅、舒适。 第二，提高设计效率。有了统一的规范，就可以将所有的页面整理出一套规则，在遵循规则的情况下进行设计，页面的设计也会变得更简单方便。设计规范是指视觉设计师对色彩、控件样式、布局排版、字体等制定的一系列规范，用来指导之后的设计工作，确保视觉风格的一致性，控制设计质量，提高设计效率。 UI设计项目教程 必备知识 iOS设计规范 UI设计项目教程 必备知识 苹果官方UI设计界面 苹果官方UI设计规范中有几种设计说明。例如，有返回按钮的标题和含有搜索条的标题，在设计时都会有所区别，包括标题栏内的文字字号、颜色等；在Tab切换的设计说明中，明确展示了每一个Tab切换的规范，包括选中状态和未选中状态的字号、颜色等；底部导航的ICON的大小，底部导航ICON的文字的字号等也有明确规定；设计规范中也展示了一些常用控件的基础设计，如弹出框、键盘、List等。 UI设计项目教程 必备知识 IOS系统图标规范 在苹果手机的主屏幕上看到的图标，如果是Retina屏，它的图标大小是114×114 像素（圆角半径为18像素）。 在苹果的APP商城中，APP图标的大小是1024×1024像素，圆角半径为160像素。 8种ICON的使用规范 App商城（Retina）：1024×1024px（圆角半径为160px）。 App商城（普通屏）：512×512px（圆角半径为80px）。 主屏幕（Retina）：114×114px（圆角半径为18px）。 主屏幕（普通屏）：57×57px（圆角半径为9px）。 设置页面（Retina）：58×58px（圆角半径为10px）。 设置页面（普通屏）：29×29px（圆角半径为5px）。 搜索结果（Retina）：100×100px（圆角半径为16px）。 搜索结果（普通屏）：50×50px（圆角半径为8px）。 值得注意的是，从iOS7开始，苹果的各个应用图标变成了更为复