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开始，苹果的各个应用图标变成了更为复杂而精简的图形，“圆角半径”的概念就没有了。也就是说，图标的圆角不再是一个简单几何图形的圆角半径，而是一条弧线。UI设计项目教程必备知识文字规范iOS系统字体的历史演变过程如下：iOS9：英文字体为HelveticaNeue。iOS9：中文字体为冬青黑。iOS10：英文字体为SanFrancisco。

iOS10：中文字体为苹方体。iOS系统的字体规范如下：设计稿标准文字：文字选用“苹方体（PingFangSCLight）”。标题可加粗，选用“苹方粗体”。文字搭配：一般用4和6的差额梯度搭配，例如，正文为26px，标题为30px；标题为30px，正文为22px。详情页标题文字与详情文字间距：间距为8的倍数，如24px、32px、40px等。行间距设定：行间距与字号比例为1.5。对齐原则：段落文字采用“两端对齐左对齐”，首行严禁出现标点符号。字体大小：顶部操作栏文字大小：34～38px。标题文字大小：28～34px。正文文字大小：26～30px。辅助性文字大小：0～24px。TabBar文字大小：22px。UI设计项目教程任务拓展设计要求

参考图4-116所示的iOS界面原型图，设计一款具有中国风的iOS界面。界面的尺寸、图标、文字要符合iOS界面设计规范要求。UI设计项目教程项目拓展

移