项目二 智慧医疗APP界面制作.pptxVIP

教学PPTUI体验设计实战上海交通大学出版社

项目二智慧医疗APP界面制作

2.1任务一智慧医疗APP首页制作1.APP的界面组成从APP产品整体架构来说界面主要由启动图标、加载页、引导页、首页及内容页。

启动图标加载页引导页首页内容页

2.1任务一智慧医疗APP首页制作标签栏banner导航栏金刚区状态栏2.APP首页面基本组成APP首页面基本组成元素包括：状态栏、导航栏、banner、金刚区、标签栏，如右图所示：

2.1任务一智慧医疗APP首页制作APP的界面设计规范目前主流的iOS设备主要有iPhoneSE（4英寸）、iPhone6s/7/8（4.7英寸）、iPhone6s/7/8Plus（5.5英寸）、iPhoneX（5.8英寸），它们都采用了Retina视网膜屏幕，其中iPhone6s/7/8Plus和iPhoneX采用的是3倍率的分辨率，其他都是采用的2倍率的分辨率，无论是栏高度还是应用图标，设计师提供给开发人员的切片大小，前者始终是后者的1.5倍。（1）IOS的尺寸规范

2.1任务一智慧医疗APP首页制作APP的界面设计规范Android设备有很多不同尺寸的屏幕，根据屏幕的像素密度不同，可由小到大划分为ldpi(低密度)、mdpi(中密度)、hdpi(高密度)、xhdpi(超高密度)、xxhdpi(超超高密度)和xxxhdpi(超超超高密度)几种密度类型。实际上，750*1334px的@3X的切图资源正好是Androidxxhdpi（1080*1920px）的切图资源，所以通常设计师可以做IOS版本的设计稿，然后适配安卓，前提是需要和安卓工程师沟通。（2）Android的尺寸规范

2.1任务一智慧医疗APP首页制作APP的界面设计规范iOS系统中，默认的英文和数字使用的是SanFrancisco（SF）字体，中文使用的是苹方。安卓系统中，英文字体为robot字体，中文采用的是思源黑体。通常，在一款APP中字号范围一般在20-36之间（@2x）,当然iOS11中出现了大标题的设计，字号还是要根据产品属性酌情设定。工作提示：一般上下级内容的字号相差以2-4像素为宜，通常设置为偶数。（3）字体规范

Photoshop主要用于平面设计、网页设计、绘画、数码照片处理等方面。Illustrator广泛应用于印刷出版、专业插画、多媒体图像处理和互联网页面制作等。AxureRP主要负责UI设计过程中，应用软件或Web网站的线框图、流程图、原型及规格说明文档等的设计与制作。AfterEffects常用于视频特技的设计和制作。在UI设计中可以完成动效制作。XD主要负责UI设计2.1任务一智慧医疗APP首页制作

XD工作区基础知识2.1任务一智慧医疗APP首页制作A.主页B.了解C.画板预设D.最近打开的文件

XD的操作界面2.1任务一智慧医疗APP首页制作

【任务实施】根据项目主题要求，在开始制作“智慧医疗”APP首页面之前我们会明确该产品的主题色，设计风格等。本项目中采用蓝色为主色调，因为蓝色传递给用户的情感是平静、理智、博爱，同时又具有科技感，符合项目的整体基调。2.1任务一智慧医疗APP首页制作

03网格式布局01列表式布局05瀑布流式布局04卡片式布局02标签式布局06混合式布局移动端常见的几种页面布局2.2任务二智慧医疗APP个人中心页面制作

列表式布局特点：以列表的形式展示具体内容，内容从上向下排列，并且能够根据数据的长度自适应显示，导航之间的跳转要回到初始点。优点：1、列表纵向长度没有限制，上下滑动可以查看无限内容，层次展示清晰;2、视觉流线从上向下，浏览体验快捷，在视觉上整齐美观，用户接受度很高;3、可展示内容较长的菜单或拥有次级文字内容的标题。不足：1、导航之间的跳转要回到初始点2、同级内容过多时，用户浏览容易产生疲劳3、排版灵活性不是很高4、页面重点内容不突出，只能通过排列顺序、颜2.2任务二智慧医疗APP个人中心页面制作

标签式布局特点：导航一直存在，具有选中状态，可快速切换到另一个导航。优点：1、减少界面跳转的层级

2、分类位置固定

3、清楚当前所在的入口位置

3、轻松在各入口间频繁跳转且不会迷失方向

4、直接展现最重要入口的内容信息不足：可放的内容并不多，一般只能有3-5个标签。2.2任务二智慧医疗APP个人中心页面制作

网格式布局特点：布局方式是我们目前最常见的一种，也是符合用户习惯和黄金比例的设计方式，布局比较稳定为一行三列式布局。优点：1、清晰展现各入口；2、容易记住各入口位置，方便快速查找；3、引导性