项目三 移动端APP UI设计

HSUCLEARLogin账号密码UI设计HSUCLEARLogin账号密码项目三移动端APPUI设计目标TARGET教学目标通过本项目的学习让学生掌握移动端UI的设计规范与制作流程。目标TARGET知识目标了解什么是移动应用平台。熟悉移动设备的尺寸标准，能够区分它们的含义。掌握移动端UI设计规范，熟悉iOS系统和Android系统的差别。目标TARGET技能目标能够说出移动应用界面设计制作的流程。通过任务制作，掌握移动应用界面设计的规范。灵活使用Photoshop软件表现界面各元素的质感、纹理及细节。目标TARGET素质目标培养学生独立思考能力。加强中华优秀传统文化教育，引导学生坚定文化自信。

移动端APPUI设计不仅是视觉上的美化，更是用户体验、品牌价值和商业成功的关键驱动力。优秀的UI设计能够：提升用户满意度和留存率；增强品牌形象和市场竞争力；优化功能可用性和操作效率；推动技术创新和商业增长。因此，在移动端APP开发中，UI设计是不可忽视的核心环节，需要投入足够的资源和精力来打造卓越的用户体验。项目引入HSUCLEARLogin账号密码PART01相关知识相关知识1移动端UI设计常识2移动UI设计规范

移动应用平台可以简单理解为移动设备中的操作系统，是安装各种移动应用程序的一个载体，应用程序的运行与操作平台密不可分。目前市面上常见的操作系统有iOS系统、Android系统、Winphone系统、黑莓系统等，但是与UI设计师更为密切的是iOS系统和Android系统。移动端UI设计常识1移动应用平台iOS系统平台Android系统平台（1）社区交友

社区交友App，即通过互联网实现交际往来。常用的社交App有微信、QQ、新浪微博等。移动端UI设计常识2

APP的基本分类

QQ（左）微信（右）APPStore中的截图（2）影音娱乐App

影音娱乐App即用户通过互联网上的电影、电视、音乐MV及小视频进行娱乐放松的App。常用的影音娱乐App有抖音短视频、腾讯视频、网易云音乐等。移动端UI设计常识2

APP的基本分类抖音短视频（左）腾讯视频（右）APPStore中的截图（3）休闲娱乐

休闲娱乐App，即通过互联网进行找寻餐厅、购买影票以及制作美食等活动进行放松休闲。常用的休闲娱乐App有大众点评、猫眼电影、下厨房等。移动端UI设计常识2

APP的基本分类大众点评（左）猫眼电影（右）APPStore中的截图（4）生活服务

生活服务App，主要通过互联网为用户提供外卖订菜、求职招聘以及城市出行等相关服务。常用的生活服务App有饿了么、Boss直聘、摩拜单车等。移动端UI设计常识2

APP的基本分类饿了么（左）Boss直聘（右）APPStore中的截图（5）旅游出行

旅游出行App，即通过互联网为用户提供旅游度假的相关服务。常用的旅游出行App有途牛旅游、Airbnb爱彼迎、周末去哪儿等。移动端UI设计常识2

APP的基本分类途牛旅游（左）Airbnb爱彼迎（右）APPStore中的截图（6）电商平台

电商平台App，即通过互联网为用户提供网购、零售以及相关信息等服务。常用的电商App有淘宝网、京东、网易严选等。移动端UI设计常识2

APP的基本分类淘宝网（左）京东（右）AppStore中的截图（7）金融理财

金融理财APP，即通过互联网为用户的财务进行管理，以实现财务的保值、增值为目的。常用的金融理财APP有支付宝、京东金融、招商银行等。移动端UI设计常识2

APP的基本分类支付宝（左）招商银行（右）AppStore中的截图（8）健康医疗

健康医疗App，即通过互联网为用户提供运动健身、健康教育以及远程会诊等多种形式的健康医疗服务。常用的健康医疗App有悦动圈、轻加、微医等。移动端UI设计常识2

APP的基本分类悦动圈（左）微医（右）AppStore中的截图（9）学习教育

学习教育App，即通过互联网快速地为用户传播知识和学习方法。常用的学习教育App有智慧树、作业帮、腾讯课堂等。移动端UI设计常识2

APP的基本分类智慧树家长版（左）作业帮（右）AppStore中的截图（10）资讯阅读

资讯阅读App，即通过互联网在为用户在短时间内带来价值的信息或书籍内容。常用的旅游出行App有腾讯新闻、网易新闻、微信读书等。移动端UI设计常识2

APP的基本分类腾讯新闻（左）微信读书（右）AppStore中的截图iOS系统基础规范可以通过设计尺寸、界面结构、基本布局及字体规范4个方面进行详尽的剖析。移动UI设计规范1

iOS系统设计规范---设计尺寸及相关单位（1）iOS相关单位•PPI：像素密度，英文全称“PixelsPerinch”，简称“PPI”，是屏幕分辨率单位，表示的是每英寸所拥有的像素数量，如图3-13所示。屏幕密度越大，画面越细腻。因此，iPhone4比iPhone3GS屏幕尺寸虽然相同，但实际像素大了一倍，清晰度自然变高。PPI的计算公式（X、Y分别为横向、纵向的像素数）移动UI设计规范1

iOS系统设计规范---设计尺寸及相关单位•Asset:比例因子，英文全称“Asset”。标准分辨率显示器具有1：1像素密度（或@1x），其中一个像素等于一个点。高分辨率显示器具有更高的像素密度，比例因子为2.0或3.0（称为@2x和@3x）。因此，高分辨率显示器需要具有更多像素的图像。一个10px×10px的标准分辨率（@1x）图像，该图像的@2x版本为20px×20px，@3x版本为30px×30px移动UI设计规范1

iOS系统设计规范---设计尺寸及相关单位•逻辑像素和物理像素：逻辑像素，英文全称“LogicPoint”，单位“点”，即“pt”，是根据内容尺寸计算的单位。如iPhone4逻辑像素是480x320pt，但由于每个逻辑的点因为视网膜屏密度增加了1倍，所以一个点等于两个像素，因此iPhone4的物理像素是960x640px。iOS开发工程师和使用Sketch软件设计界面的UI设计师使用的单位都是pt。逻辑像素与物理像素的转换（2）iOS常见的设备尺寸。在进行界面设计稿时，为了一稿适配，都是以iPhone6/6s/7/8为基准。使用Photoshop就建750x1334px尺寸的画布，如果是使用Sketch就建立375x667pt。移动UI设计规范1

iOS系统设计规范---设计尺寸及相关单位iOS常见设备的尺寸iOS设计标准尺寸iOS界面主要由状态栏、导航栏、标签栏组成。移动UI设计规范1

iOS系统设计规范---iOS界面基本组成元素iOS手机端界面结构图iOS界面主要由状态栏、导航栏、标签栏组成。移动UI设计规范1

iOS系统设计规范---iOS界面基本组成元素iOS手机端界面结构图iOS界面主要由状态栏、导航栏、标签栏组成。移动UI设计规范1

iOS系统设计规范---iOS界面基本组成元素iOSiPad界面结构图iOS界面基本组成元素的详细解析：

（1）状态栏：状态栏用来呈现网络信号、时间、电量等信息，位于整个App界面的顶部，并始终固定在整个屏幕的上方，如图3-20所示。目前流行趋势的状态栏背景是透明的，并与界面风格设计融为一体。在屏幕分辨率为750像素*1624像素的情况下，高度为40像素。移动UI设计规范1

iOS系统设计规范---iOS界面基本组成元素状态栏iOS界面基本组成元素的详细解析：

（2）导航栏：导航栏通常位于状态栏的正下方，如图3-21红框标识所示。通常显示当前界面的名称，通常包含常用的功能或者页面的跳转按钮等。在屏幕分辨率为750像素*1624像素的情况下，高度为88像素。移动UI设计规范1

iOS系统设计规范---iOS界面基本组成元素导航栏iOS界面基本组成元素的详细解析：

（3）内容区域：在iOS系统中，在分辨率为750像素*1624像素的情况下，内容区域高度为1108像素。

（4）标签栏：标签栏又称菜单栏。通常位于界面的底部，如图3-22所示。标签栏上一般会有3～5个小图标，这些小图标通常包含两种状态，一是选中状态，二是未选中状态。让用户在不同的视图中进行快速切换。在屏幕分辨率为750像素*1624像素的情况下，高度为98像素。移动UI设计规范1

iOS系统设计规范---iOS界面基本组成元素标签栏iOS界面基本组成元素的详细解析：

（5）工具栏。工具栏提供一系列让用户对当前视图内容进行操作的工具，工具栏的所有操作都是针对当前屏幕和视图的，通常用于二级页面。在工具栏中放置一些在当前情景下最常用的指令，能够极大地方便用户使用。在iOS系统中，工具栏位于屏幕底部，工具栏和标签栏在同一个视图中只能存在一个，在分辨率为750像素*1624像素的情况下，工具栏高度为88像素，通常工具栏上可以放置过滤、回复等选项。移动UI设计规范1

iOS系统设计规范---iOS界面基本组成元素（1）网格系统网格系统（GridSystems），又称为栅格系统，是利用一系列垂直和水平的参考线，将页面分割成若干个有规律的列或格子，再以这些格子为基准，进行页面布局设计的方式，能使布局规范、简洁、有秩序。移动UI设计规范1

iOS系统设计规范---iOS基本布局网格系统（2）组成元素网格系统由列、水槽以及边距3个元素组成。列是内容放置的区域。水槽是列与列之间的距离，有助于分离内容。边距是内容与屏幕左右边缘之间的距离。移动UI设计规范1

iOS系统设计规范---iOS基本布局组成元素（①列、②水槽、③边距）（3）网格运用•单元格：iOS的最小点击区域是44pt，即88px（@2x）。因此，在适用性方面，能被整除的偶数4和8作为iOS最小单元格比较合适。其中4px容易将页面切割细碎，所以比较推荐使用8px。移动UI设计规范1

iOS系统设计规范---iOS基本布局单元格（3）网格运用•列：列的数量有4、6、8、10、12、24这几种情况。其中4列通常在2等分的简洁页面时使用，6、12和24基本满足所有等分情况，然而24列将页面切割太碎，因此实际使用还是以12列和6列为主。移动UI设计规范1

iOS系统设计规范---iOS基本布局列的使用（3）网格运用•水槽：水槽、边距以及横向间距的宽度可以依照最小单元格8px为增量进行统一设置，如24、32、40。其中32px（16pt@2x）最为常用。移动UI设计规范1

iOS系统设计规范---iOS基本布局水槽（3）网格运用•边距：边距的宽度也可以与水槽有所区别。在iOS中以@2x为基准,常见的边距有20px、24px、30px、32px、40px以及50px。边距的选择应结合产品本身的气质，其中30px是最为舒适的边距，也是绝大多数APP首选的边距。移动UI设计规范1

iOS系统设计规范---iOS基本布局iOS中的设置及通用页面都采用了30px的边距（1）系统字体：iOS英文使用的是SanFrancisco(SF)字体，其中SF字体有SFUIText（文本模式）和SFUIDisplay（展示模式）两种尺寸。SFUIText适用与小于19pt的文字，SFUIDisplay适用于大于20pt的文字。中文使用的是苹方，共有6个字重。移动UI设计规范1

iOS系统设计规范---iOS文字规范iOS系统字体（2）字号大小：iOS设计时要注意字号的大小。一般为了区分标题和正文，字体大小差异至少保持在4像素(2pt@2x),正文的合适行间距在1.5～2倍之间。移动UI设计规范1

iOS系统设计规范---iOS文字规范iOS系统APP的字体建议（1）相关单位•DPI:网点密度，英文全称“DotPerinch”，简称“DPI”，是打印分辨率单位,表示每英寸打印的点。在移动设备上等同于PPI，表示的是每英寸所拥有的像素数量。通常PPI代表苹果手机，DPI代表安卓手机。移动UI设计规范2

Android系统设计规范---Android系统设计尺寸及相关单位

Android系统基础规范可以通过设计尺寸、界面结构、基本布局及字体规范4个方面进行详尽的剖析。DPI等同于PPI•独立密度像素与独立缩放像素：独立密度像素,英文全称“Density-independentpixels”，简称“dp”，是安卓设备上的基本单位，等同于苹果设备上的pt。Android开发工程师使用的单位是dp,所以UI设计师进行标注时应将px转化成dp,公式为dp*ppi/160=px。当设备的DPI值是320，通过公式可得出1dp=2px，如图2-23（类似iPhone6/7/8的高清屏）。移动UI设计规范2

Android系统设计规范---Android系统设计尺寸及相关单位dp与px的转换•独立缩放像素，英文全称“Scale-independentPixel”，简称“sp”，是Android设备上的字体单位。Android平台允许用户自定义文字大小（小、正常、大、超大等等），当文字尺寸是“正常”状态时，1sp=1dp，如图2-XX。而当文字尺寸是“大”或“超大”时，1sp>1dp。UI设计师进行Android界面的设计时，标记字体的单位选用sp。移动UI设计规范2

Android系统设计规范---Android系统设计尺寸及相关单位sp等同于dp（2）Android系统设计尺寸Android常见的设备尺寸。在进行界面设计稿时，如果想要一稿适配iOS，那就使用Photoshop新建720像素*1280像素尺寸的画布。如果根据MaterialDesign新规范单独设计Android，那就使用Photoshop新建1080像素*1920像素尺寸的画布。移动UI设计规范2

Android系统设计规范---Android系统设计尺寸及相关单位Android常见的设备尺寸(上)

Android设计标准尺寸（下）iOS界面主要由状态栏、导航栏、顶部应用栏组成。移动UI设计规范2

Android系统设计规范---Android系统设计尺寸及相关单位Android界面结构以下为Android界面基本组成元素的详细解析：Android系统的界面基本组成元素和iOS相似，但仍会有一些区别。（1）状态栏：在Android系统中，状态栏通常位于界面的顶部，具有通知的功能，当应用程序有新的通知，向下滑动即可打开查看通知或进行一些常用的设置。通常状态栏的高度为25像素。（2）顶部应用栏：在Android系统中，顶部应用栏通常位于状态栏下方，高度为48像素左右。（3）标签栏：在Android系统中，标签栏通常位于标题栏下方，高度为36像素左右。一般最多为5项。（4）底部导航栏。在Android系统中，底部导航栏通常位于状态栏下方，和iOS系统中的标签栏类似，一般高度为48像素左右，一般最多为5项。移动UI设计规范2

Android系统设计规范---Android系统设计尺寸及相关单位•单元格：Android的最小点击区域是48dp，因此能被整除的偶数4和8作为Android最小单元格比较合适。移动UI设计规范2

Android系统设计规范---Android基本布局所有组件都与移动设备的8dp网格对齐移动设备的8dp网格图标、排版和组件中的某些元素可以与4dp网格对齐。移动UI设计规范2

Android系统设计规范---Android基本布局与4dp网格对齐•列：列的数量在手机设备上推荐4列，平板电脑上推荐8列。列的数量，手机设备（左）平板电脑（右）水槽：水槽和边距的宽度在手机设备上推荐16dp，平板电脑上推荐24dp。移动UI设计规范2

Android系统设计规范---Android基本布局手机设备、平板电脑水槽和边距的宽度边距：边距的宽度可以和水槽统一，也可以根据产品和水槽不同。当Android中边距的宽度和水槽不同时，其宽度的设置具体可以参考iOS布局中边距的宽度。移动UI设计规范2

Android系统设计规范---Android基本布局边距的宽度（1）系统字体Android英文使用的是Roboto字体，共有6个字重。中文使用的是思源黑体，又称为“SourceHanSans”或“Noto”，共有7个字重。移动UI设计规范2

Android系统设计规范---Android字体规范思源黑体（2）字号大小Android设计时要注意字号的大小。Android各元素以720像素*1280像素为基准设计，可以与iOS对应，其常见的字号大小：24像素、26像素、28像素、30像素、32像素、34像素，36像素等，最小字号为20像素。移动UI设计规范2

Android系统设计规范---Android字体规范Android系统APP的字体建议HSUCLEARLogin账号密码PART02任务实操任务实操1iOS系统旅游类App登录页制作

2iOS系统计算器APP界面的制作3Android系统手机锁屏界面制作

设计并制作注册登录页，注册登录页作为UI设计中的常用页面之一，具有进入产品、深度关联品的作用。注册登录页是电商类、社交类等功能丰富型App的必要页面。通过本任务的学习，让读者掌握制作iOS系统旅游类App登录页的制作技巧。效果图如图所示。任务1-1iOS系统旅游类App登录