UI设计项目式教程 课件 第2章 马尾船政APP制作-移动UI的设计规范

UI设计项目式教程课程介绍案例分析设计流程实战练习项目2马尾船政APP制作——移动UI的设计规范UI设计项目式教程课程介绍案例分析设计流程实战练习现接到马尾船政项目，需对马尾船政进行APP制作，为确保APP设计严格遵循基础规范，设计师需以马尾船政品牌VI为核心，采用iOS与安卓设计规范，统一字号、间距、色彩层级，控件样式须完全适配多分辨率屏幕并标注清晰开发参数（DP/SP单位），所有图标与插图必须基于开源字体（如思源黑体、阿里巴巴普惠体）或原创设计，禁止商用版权风险；同时要求组件化构建可复用的设计系统（按钮、表单、导航栏等），交互逻辑需符合用户认知惯性（如右滑返回、底部导航优先）。马尾船政项目需求UI设计项目式教程课程介绍案例分析设计流程实战练习

针对iOS与Android两个平台，结合当前马尾船政项目实际对界面的尺寸规范、图标规范、字体规范等进行讲授，马尾船政项目部分尺寸规范展示如图所示。UI设计项目式教程课程介绍案例分析设计流程实战练习

为满足项目组的要求，特下发设计工作单，期望设计人员能够清晰了解每个环节的具体要求，确保UI设计制作的高效和质量。明确UI制作的各项要求。设计人员需根据工作单规定的时间节点，认真完成UI的设计和制作。工作单内容见表2-1，创建完成工作单后，接下来我们来学习一下各大规范。项目实施——马尾船政UI项目设计规范工作单UI设计项目式教程课程介绍案例分析设计流程实战练习表2-1马尾船政UI设计规范工作单项目名界面尺寸规范字体规范图标规范边距与间距内容布局微信小程序的设计规范马尾船政UI设计规范750px×1,334px或1,080px×1,920px苹方或思源黑体视具体情况而定24px或30px卡片式布局遵循小程序设计规范制作规范遵循UI设计基础原则遵循iOS或Android组件规范注意事项在UI设计中有着多种单位的存在，比如px,dp,sp,pt,ppi等，px是绝对单位，而其他的是相对单位，意思是说在众多手机屏幕中，px是不会跟着变化而变化的，而后者可以。所以在开发中，使用相对单位可以做不同分辨率的适配。UI设计项目式教程课程介绍案例分析设计流程实战练习

为了让iOS和Android两大平台的用户有一致的体验，也为了节省UI设计的成本和研发成本，iOS和Android均给出了对应的设计规范，即《iOS设计规范》和《MaterialDesign设计规范》。

作为UI设计师，工作中针对iOS平台，必须熟记常用界面的尺寸。首先截至iPhone17发布为止，在@2x倍率的前提下，在Photoshop中设计iPhone的APP时，所采用的尺寸参数如表2-2所示。iOS设计规范UI设计项目式教程课程介绍案例分析设计流程实战练习表2-2常见的iPhone尺寸参数设备型号英寸倍率像素密度（ppi）物理像素（px×px）逻辑像素（pt×pt）iPhone6/7/84.7@2x326750×1,3341334375×667IPhoneX/Xs/11Pro5.8@3x4581,125×1,4362436375×812iPhone12/12Pro/12Max6.1@3x4601,170×1,5322532390×844iPhone6P/7P/8P5.5@3x4011,242×1,2082208414×736IPhoneXR/116.1@3x326828×1,7921792414×896iPhoneXs/Max6.5@3x4581,242×1,6882688414×896iPhone12ProMax6.1@3x4581,284×1,7782778428×926UI设计项目式教程课程介绍案例分析设计流程实战练习

针对不同的设备，界面中的框架尺寸也不同，如表2-3所示，部分示意图如图2-2所示。举例说明，表2-3中设备iPhone6的导航栏高度为44pt，则在@2x倍率下，在Photoshop中设置的高度为88px（44×2=88）；设备iPhone11Pro的导航栏高度为44pt，则在@3x倍率下，在Photoshop中设置的高度为132px（44×3=132）。iOS界面的框架尺寸UI设计项目式教程课程介绍案例分析设计流程实战练习表2-3iPhone设备中的框架尺寸设备型号英寸倍率像素密度（ppi）物理像素（pxxpx）逻辑像素（ptxpt）iPhone6/6s/7/84.7@2x326750x1334375x667iPhone6plus/7plus/8plus5.5@3x4011080x1920414x736iPhoneX/XS/11pro5.4@3x4581125x2436375x812iPhoneXR/XSmax/11promax6.1@2x326828x1792414x896iPhone12/12pro/13/13pro/146.7@3x4761170x2532390x844iPhone12promax/13promax/14plus6.7@3x4581284x2778428x926iPhone14pro/15/15pro6.1@3x4601179x2556393x852iPhone14promax/15promax6.7@3x4601290x2796430x932iPhone166.3@3x4602556x1179393x852iPhone176.3@3x4602622x1206393x852UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

本次马尾船政UI关于界面尺寸甲方并无详细要求，不同分辨率的控件规格也不一样，在常见机型的框架尺寸中同一张UI略微有所不同，下图为马尾船政项目在常见机型的框架尺寸示意图中的UI展示，在设计同一张界面时按照1,125px×1,436px和1,184px×1,778px的两种尺寸进行制作时，顶部状态栏和导航栏统一为132px44pt，底部安全区域为102px34pt,图标所在的按钮栏为147px49pt，如图所示。马尾船政项目iOS版本界面尺寸UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

每个APP都包含多种图标，有APPStore图标、应用图标和设置图标等，这些图标也遵循一定的尺寸规范。iPhone设备中常见的图标尺寸如表2-4所示，示意图如图所示。iOS界面的图标尺寸UI设计项目式教程课程介绍案例分析设计流程实战练习表2-4iPhone设备中常见的图标尺寸设备型号APPStore（px×px）系统设置图标（px×px）主屏幕（px×px）Spotlight搜索（px×px）标签栏（pt×pt）工具类和导航栏（px×px）iPhone6/7/8（@2x）1,024×1,024102458×58114×11458×5875×7544×44IPhone6P/7/8（@3x）1,024×1,024102487×87114×11487×8775×7566×66iPhone111,024×1,024102458×58120×12080×8069×6950×50iPhone11Pro1,024×1,024102487×87180×180120×12069×6975×75IPhoneXR（@2x）1,024×1,024102458×58120×12080×8069×6950×50iPhone6P/6SP/7P/8P（@3x）1,024×1,024102487×87180×180120×12069×6975×75iPhoneX/XS/xsmax（@3x）1,024×1,024102487×87180×180120×12069×6975×75UI设计项目式教程课程介绍案例分析设计流程实战练习

一般地，在设计图标时按照1,024px×1,024px的尺寸进行制作，在后期使用时再对图标进行等比例缩放。在马尾船政项目中对应的UI展示如图所示,在APPStore中为1,024px×1,024px,在iPhone主屏幕中为114px×114px，在搜索/设置中为58px×58px，在iPhone搜索/设置中为29px×29px。马尾船政项目iOS版本图标UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

字体是设计的关键，在iOS平台下推荐系统默认的英文字体“SanFrancisco(SF)”，中文字体则推荐使用“苹方（PingFangSC）”，如图所示。设计师可以在规格选框里变换使用相应的标准规格字体，但不要使用字体倾斜等功能。iOS字体规范UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

此外，由于文字在APP程序中出现的位置不同，因此也有不同的字体大小可以参考。特别说明的是，字号的大小是根据APP项目整体需求来选择的，并非固定，但字号无论如何选择都应该为偶数。根据工作经验，常见字号与应用场景对比如表2-5所示。iPhone设备中常见的图标尺寸UI设计项目式教程课程介绍案例分析设计流程实战练习级别字号（px）建议行距（px）应用场景说明重要

3642用于少数重要标题如导航标题、分类名称3040用于较为重要的文字或操作按钮如首页模块名称、价格等一般

2838用于大多数文字如文字段落2636用于大多数文字如小标题、模块描述等较弱

2434用于辅助性文字如次要的副标语等2232用于辅助性文字如次要的备注信息等表2-5iPhone设备中常见的图标尺寸UI设计项目式教程课程介绍案例分析设计流程实战练习

工作中，针对Android平台下的移动设备，UI设计师可以使用720px×1,280px作为基准设计尺寸，也可以使用1,080px×1,920px作为基准设计尺寸。前者适用于一套设计稿同时适配Android和iOS的情况，后者适用于单独为Android平台进行设计的情况。Android平台的界面尺寸如表2-6所示。Android设计规范UI设计项目式教程课程介绍案例分析设计流程实战练习表2-6Android平台的界面尺寸密度名称（密度值）名称dp转换px密度比倍率设计尺寸（px×px）hdpi（240dpi）高密度1dp=1.5px1.5@1.5x480×800xhdpi（360dpi）超高密度1dp=2px2@2x720×1,280xxhdpi（480dpi）超超高密度1dp=3px3@3x1,080×1,920xxxhdpi（640dpi）超超超高密度1dp=4px4@4x1,560×1,440UI设计项目式教程课程介绍案例分析设计流程实战练习

由于目前Android平台的主流机型已经达到1,080p的级别，因此这里以1,080px×1,920px规格输出设计稿（三倍图），页面框架各区域的尺寸规格如图所示。UI设计项目式教程课程介绍案例分析设计流程实战练习

在进行设计时，也可以使用720px×1,280px作为基准设计尺寸，适用于一套设计稿同时适配Android和iOS的情况，马尾船政UI项目使用iOS或者Android的通用界面尺寸皆可，如图所示为720px×1,280px基准设计尺寸效果。马尾船政项目Android版本界面尺寸UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

图标尺寸

Android平台的移动设备中常见的图标尺寸如表2-7所示。Android图标尺寸与字体规范表2-7Android平台的移动设备中常见的图标尺寸图标类型mdpi（160dpi）hdpi（240dpi）xhdpi（320dpi）xxhdpi（480dpi）xxxhdp（640dpi）应用图标（px×px）48×4872×7296×96144×144192×192系统图标（px×px）24×2436×3648×4872×72196×196UI设计项目式教程课程介绍案例分析设计流程实战练习

字体规范

Android平台使用的字体与iOS平台不同，中文字体选择“思源黑体”，该字体是Adobe与Google联合推出的一款开源字体，如图2-9所示；而英文字体应选择“Rotobo”。UI设计项目式教程课程介绍案例分析设计流程实战练习

在APP的多个页面设计中，页面元素的边距和间距有着举足轻重的作用。统一的边距与间距能够规范整个页面版式，使页面简洁美观。

边距

页面全局边距

页面全局边距是指页面内容到屏幕边缘的距离。整个APP项目使用统一的边距来进行规范，以达到视觉效果统一的目的。在实际应用中，不同的APP可以采用不同的边距，常用的页面全局边距有32px、30px、24px和20px等，如图所示。其他设计规范UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

一般地，页面全局边距最小为20px，如果小于20px则容易在视觉浏览上给用户带来拥挤的感觉。根据工作经验，24px和30px是非常舒服的距离，也是绝大多数应用的首选边距，所以马尾船政项目也选用24px和30px皆可,如图所示。马尾船政项目的页面全局边距UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

卡片式布局是常见的布局方式，卡片和卡片之间的距离设置需要根据界面的风格和卡片承载信息量来界定。图2-13为微信“我的”页面的卡片间距。如果是电商类APP，卡片间距会设置为16px或20px，以承载更多购物信息。总之，卡片间距最小不低于16px，工作中根据需要可以设置为20px、24px、30px和40px等。卡片间距UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

格式塔邻近性原则认为:单个元素之间的相对距离会影响用户感知它是否已组织在一起，互相靠近的元素看起来属于一组，而那些距离较远的则自动划分为另一组。

在UI设计中一定要重视格式塔邻近性原则的运用，如在图所示的界面中，标题与副标题之间，以及文章与文章之间的距离有明显差异。内容间距UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

如果使用卡片式布局，马尾船政卡片边距同样可以选择20px、24px、30px和40px等其中一种，这边以24px为例子，如图2-15所示。

同理在马尾船政项目中就算是卡片式设计也要遵循格式塔邻近性原则的运用，如图所示。马尾船政项目的间距UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

这里仅介绍APP设计中最常用的两种内容布局——列表式布局与卡片式布局。至于其他由设计师自行设计的内容布局不在这里讲述。

1.列表式布局

列表式布局方式的特点在于能够在有限的屏幕内显示多条信息，用户通过上下滑动屏幕可以获得更多信息，如图所示。采用列表式布局时需要注意列表高度，一般舒适体验的最小高度为80px，最大高度根据产品内容多少而定。内容布局UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习2.卡片式布局

卡片式布局的特点在于每张卡片的内容和形式都相互独立，可以在同一个页面中出现不同的卡片，承载不同的内容，如图所示。

一般地，采用卡片式布局的卡片本身是白色，而卡片与卡片之间的颜色为浅灰色或其他颜色，这样可以使得卡片之间有一定的层次划分。内容布局UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

在基于微信小程序轻快的特点，拟定了小程序界面设计指南和建议。

1.友好礼貌

为了避免用户在微信中使用小程序服务时，注意力被周围复杂环境干扰，小程序在设计时应该注意减少无关的设计元素对用户目标的干扰，礼貌地向用户展示程序提供的服务，友好地引导用户进行操作。

2.清晰明确

一旦用户进入我们的小程序页面，我们就有责任和义务清晰明确地告知用户身在何处、又可以往何处去，确保用户在页面中游刃有余地穿梭而不迷路，这样才能为用户提供安全且愉悦的使用体验。微信小程序的设计规范UI设计项目式教程课程介绍案例分析设计流程实战练习

导航是确保用户在网页中浏览跳转时不迷路的最关键因素。导航需要告诉用户，当前在哪，可以去哪，如何回去等问题。微信在小程序内现不提供统一导航栏样式，开发者可根据需要自行设计小程序首页和次级页面界面导航。建议所有的次级页面左上角提供返回上一级页面操作。

小程序的所有页面，包括小程序内嵌网页和插件，微信都会在其右上角放置官方小程序菜单，样式如图所示。开发者不可对其内容自定义，但可选择深浅两种基本配色以适应页面设计风格。小程序菜单UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

小程序页面的导航应尽量简单。建议开发者设计的自有导航样式与微信官方小程序菜单样式保持一定差异，以便区分，如图所示。UI设计项目式教程课程介绍案例分析设计流程实战练习

开发者可为小程序页面添加标签分页（Tab）导航。标签分页栏可固定在页面顶部或者底部，便于用户在不同的分页间做切换。标签数量不得少于2个，最多不得超过5个，为确保点击区域，建议标签数量不超过4项。一个页面也不应出现一组以上的标签分页栏。

其中小程序首页可选择微信提供的原生底部标签分页样式，该样式仅供小程序首页使用。开发时可自定义图标样式、标签文案以及文案颜色等，具体设置项如图2-23底部导航所示尺寸等参考。小程序导航UI设计项目式教程课程介绍案例分析设计流程实战练习UI设计项目式教程课程介绍案例分析设计流程实战练习

微信内字体的使用与所运行的系统字体保持一致，常用字号为22、17、15、14、12（pt），使用场景具体如图所示。UI设计项目式教程课程介绍案例分析设计流程实战练习

文字用色如图所示。UI设计项目式教程课程介绍案例分析设计流程实战练习

微信内色板的使用如图所示。UI设计项目式教程课程介绍案例分析设计流程实战练习

微信小程序不同列表标注如图所示。UI设计项目式教程课程介绍案例分析设计流程实战练习

微信小程序不同列表间距如图所示。UI设计项目式教程课程介绍案例分析设计流程实战练习

微信小程序TitleBar按钮以及视频、录音、地理位置展示规则如图所示。UI设计项目式教程课程介绍案例分