《Photoshop CC UI设计案例教程》课件 第3章 App界面设计

本章介绍：界面设计是UI设计中重要的部分之一，界面会直接呈现给用户，因此界面设计是涉及版面布局、颜色搭配等内容的综合性工作。本章对App界面设计的基础知识、App界面的设计规范、App常用的界面类型以及App界面的绘制方法进行系统讲解与演练，同时增设AI扩展案例，用妙多AI等AI工具，探索AI工具在App界面快速布局、组件批量优化中的应用逻辑。通过本章的学习，读者可以对App界面设计有基本的认识，并能掌握App常用界面的设计规范和绘制方法。第3章App界面设计熟悉App界面设计的基础知识掌握App界面的设计规范掌握App常用的界面类型知识目标掌握App界面设计思路掌握绘制App引导页的方法掌握绘制App闪屏页的方法掌握绘制App首页的方法掌握绘制App详情页的方法掌握绘制App个人中心页的方法掌握绘制App注册登录页的方法掌握利用AI工具辅助制作App界面的方法能力目标培养良好的App界面设计习惯培养对App界面的审美能力培养App界面设计的创意能力培养判断AI生成的内容是否真实、合理的能力素质目标App的概念App界面设计的流程App界面设计的原则3.1 App界面设计的基础知识应用软件（App是Application，App），一般指智能手机的第三方应用软件。用户主要从应用商店下载App，比较常用的应用商店有华为应用市场、苹果的AppStore等。3.1.1 App的概念App界面设计的流程包括分析调研、资料收集、交互设计、交互自查、界面设计、测试验证等环节。3.1.2 App界面设计的流程1.分析调研App界面设计需基于品牌的调性、产品的定位进行，不同应用领域的App，其设计风格会有所区别。3.1.2 App界面设计的流程马蜂窝途牛旅游携程旅行2.资料收集根据初步确定的设计方向和界面风格，进行App界面相关的资料收集以及整理，为接下来的交互设计做准备。3.交互设计交互设计是对整个App设计进行初步构思和流程制定的环节。一般需要进行纸面原型设计、架构设计、流程图设计、线框图设计等具体工作。3.1.2 App界面设计的流程4.交互自查交互设计完成之后，进行交互自查，这是整个App设计流程中非常重要的一个环节，可以在执行界面设计之前检查出是否有遗漏、缺失等细节问题。3.1.2 App界面设计的流程交互设计自查表5.界面设计原型图审查通过之后，就可以进入界面的视觉设计环节了，这个环节的设计图就是产品最终呈现给用户的界面。界面设计要求设计规范，图片、文字内容真实，并运用墨刀、Principle等软件制作成可交互的高保真原型，以便后续测试界面时使用。3.1.2 App界面设计的流程6.测试验证测试验证是最后一个环节，是为App进行优化的重要支撑。测试验证是指让具有代表性的用户进行典型操作，设计人员和开发人员在此环节共同观察、记录，可以对设计的细节进行相关的调整。3.1.2 App界面设计的流程App测试验证1.iOS系统界面设计原则（1）清晰。在整个系统界面中，文字在各种尺寸的屏幕上都要清晰易读，图标精确而清晰，装饰精巧且恰当，令用户更易理解功能。可利用负空间、颜色、字体、图形等界面元素巧妙地突出重要内容，并传达交互性，通过负空间、颜色、字体、图形等界面元素设计后，巧妙地突出重要内容。3.1.3 App界面设计的原则（2）遵从。流畅的动画和清晰美观的界面可以帮助用户理解内容并与之互动，同时不干扰用户的使用。内容一般填满整个屏幕，而半透明和模糊效果通常暗示有更多内容。最低限度地使用边框、渐变和阴影可使界面轻盈，同时确保内容明显。3.1.3 App界面设计的原则（3）深度。独特的视觉层级和真实的动画效果可以表现层次结构，赋予界面活力，并促进用户理解。令用户通过触摸和探索发现程序的功能，不仅会使用户提高兴趣，更方便用户了解功能，还能使用户关注到额外的内容。在浏览内容时，层级的过渡可提供深度感。3.1.3 App界面设计的原则2.Android的MaterialDesign的界面设计原则（1）材质隐喻。MaterialDesign的灵感来自物理世界的事物及其纹理，包括它们如何反射光线和投射阴影等。它对材料表面进行了重新构想，加入了纸张和墨水的特性。3.1.3 App界面设计的原则（2）大胆夸张。MaterialDesign以印刷设计方法中的排版、网格、空间、比例、颜色和图像为指导，来创造视觉层次、视觉意义以及视觉焦点，使用户沉浸其中。（3）动效表意。MaterialDesign通过微妙的反馈和平滑的过渡使动效保持连续性。当元素出现在屏幕上时，它们在环境中转换和重组，相互作用并产生新的变化。3.1.3 App界面设计的原则（4）灵活。MaterialDesign旨在实现品牌表达。它与自定义代码库集成，允许无缝实现组件、插件和设计元素。（5）跨平台。MaterialDesign使用包括Android、iOS、Flutter和Web的共享组件跨平台管理。3.1.3 App界面设计的原则App的设计规范分为iOS设计规范和Android设计规范两部分。3.2 App界面的设计规范iOS系统界面的设计规范Android系统界面的设计规范1.iOS单位及尺寸（1）相关单位。•PPI：像素密度（PixelsPerInch，PPI）是屏幕分辨率单位，表示的是每英寸所拥有的像素数量，其中x，y分别为横向、纵向的像素数。PPI越大，画面越细腻。3.2.1 iOS系统界面的设计规范PPI的计算公式•Asset：比例因子。标准分辨率显示器的比例因子为1.0，用@1x表示。高分辨率显示器具有更高的PPI，比例因子为2.0或3.0，图3-16分别用@2x和@3x表示。对于一个10px×10px的标准分辨率（@1x）图像，其@2x版本为20px×20px、@3x版本为30px×30px。高分辨率显示器显示的图像需要有更多像素。3.2.1 iOS系统界面的设计规范10px×10px

20px×20px

30px×30px•逻辑像素（LogicPoint）和物理像素（PhysicalPixel）：逻辑像素单位为pt，是根据内容尺寸计算的单位。iOS开发工程师和使用Sketch设计界面的UI设计师使用的单位是pt。物理像素单位为px，是按照像素格计算的单位，表示移动设备的实际像素。3.2.1iOS系统界面的设计规范逻辑像素与物理像素的转换（2）设备尺寸。在进行界面设计时，为了适配大部分尺寸，推荐以iPhone14Pro/15/15Pro/16或iPhone16Pro为基准。3.2.1 iOS系统界面的设计规范iOS常见的设备尺寸2.iOS界面结构iOS界面主要由状态栏、导航栏、安全设计区、标签栏/工具栏组成，全面屏上市后，还多了主页指示条。3.2.1 iOS系统界面的设计规范iOS界面结构3.iOS布局（1）网格系统。网格系统（GridSystem），又称为栅格系统，是利用一系列垂直和水平的参考线，将页面分割成若干个有规律的列或格子，再以这些列或格子为基准，进行页面布局设计的方式，其能使布局规范、简洁、有秩序。3.2.1 iOS系统界面的设计规范（2）网格系统的组成元素。网格系统由列、水槽以及边距3个元素组成。列是放置内容的区域。水槽是列与列之间的距离。边距是内容与屏幕左右边缘之间的距离。。3.2.1 iOS系统界面的设计规范（3）网格的运用。•单元格：iOS的最小点击区域的尺寸是44pt×44pt，即88px（@2x）。因此，在适用性方面，能被44和88整除的偶数4和8作为iOS最小单元格比较合适。其中4px容易将页面切割细碎，所以比较推荐使用8px。3.2.1 iOS系统界面的设计规范•列：列的数量有4、6、8、10、12、24这几种。其中4列通常在2等分的简洁界面中使用，6列、12列和24列基本满足所有等分情况，然而24列将界面切割得较碎。因此实际使用时还是以6列和12列为主。8列和10列可根据实际情况自行选用。3.2.1 iOS系统界面的设计规范•水槽：水槽、边距以及横向间距的宽度可以依照最小单元格8px为增量进行统一设置，如24px、32px、40px。其中32px（16pt@2x）最为常用。3.2.1 iOS系统界面的设计规范•边距：边距的宽度可以与水槽的宽度有所区别，在iOS中以@2x为基准，常见的边距有20px、24px、30px、32px、40px以及50px。边距的选择应结合产品本身的气质，其中30px是最为舒适的边距，也是绝大多数App首选的边距。3.2.1 iOS系统界面的设计规范4.iOS字体（1）系统字体。旧金山（SFPro）字体是非衬线字体。该字体具有9种字重、4种宽窄版本和圆润款设计，可根据字号自动优化字形细节，使屏幕文字清晰易读。3.2.1 iOS系统界面的设计规范旧金山字体纽约字体：纽约（NewYork）字体是衬线字体，旨在补充旧金山字体。小于20pt的文字使用小号，20到35pt之间的文字使用中号，36到53pt之间的文字使用大号，54pt或更大的文字使用特大号。3.2.1 iOS系统界面的设计规范纽约字体苹方字体：在iOS中，中文使用的是苹方字体，该字体共有6种字重（字体的粗细）。3.2.1 iOS系统界面的设计规范苹方字体（2）字号大小。进行iOS界面设计时要注意字号大小，如图3-31所示。苹果官网的建议全部是针对英文字体而言的，中文字体需要UI设计师灵活运用这些建议，并根据最终呈现效果的实用性和美观度进行调整。3.2.1 iOS系统界面的设计规范苹方字体1.Android设计尺寸及单位（1）相关单位。• DPI：网点密度（Dot Per Inch，DPI）是输出分辨率的单位，表示每英寸输出的点数。其在移动设备上等同于PPI，表示的是每英寸所拥有的像素数量。通常PPI适用于苹果手机，DPI适用于Android手机。3.2.2 Android界面的设计规范• 独立密度像素（Densty-independentPixel）：独立密度像素（单位为dp）是Android设备的基本单位，等同于苹果设备的pt。Android开发工程师使用的单位是dp，所以UI设计师进行标注时应将px转化成dp，公式为dp×ppi/160=px。3.2.2 Android界面的设计规范独立缩放像素（Scale-independentPixel）：独立缩放像素（单位为sp）是Android设备的字体单位。Android平台允许用户自定义文字大小（小、正常、大、超大等），当文字大小是“正常”时，1sp等于1dp。3.2.2 Android界面的设计规范（2）设备尺寸。在进行界面设计时，如果想要适配iOS，可以用Photoshop新建720px×1280px或720px×1600px尺寸的画布。如果根据MaterialDesign新规范单独设计Android界面，就使用Photoshop新建1080px×1920px或1080px×2400px尺寸的画布。无论是哪种需求，使用Sketch或Figma新建360dp×640dp或360dp×800dp尺寸的画布即可。3.2.2 Android界面的设计规范2.Android界面结构Android界面主要由状态栏、顶部应用栏、安全设计区、底部应用栏、虚拟导航栏组成。顶部应用栏分为小顶部应用栏、中顶部应用栏、大顶部应用栏。3.2.2 Android界面的设计规范3.Android布局在iOS设计规范中，我们已经剖析了网格系统及其组成元素，因此在Android布局中不赘述，直接进行Android中网格的布局。•单元格：Android的最小点击区域的尺寸是48dp×48dp，因此能被48整除的偶数4和8作为Android最小单元格比较合适。3.2.2 Android界面的设计规范所有组件都与Android设备的8dp网格对齐。图标、文字和组件中的某些元素可以与4dp网格对齐。3.2.2 Android界面的设计规范•列：列的数量在手机设备上推荐为4列，在平板电脑上推荐为8列。3.2.2 Android界面的设计规范手机设备平板电脑•水槽：水槽和边距的宽度在手机设备上推荐为16dp，在平板电脑上推荐为24dp。3.2.2 Android界面的设计规范•边距：边距的宽度可以和水槽统一，也可以根据产品的设计要求和水槽不同。当Android中边距的宽度和水槽不同时，其宽度的具体设置可以参考iOS布局中边距的宽度。3.2.2 Android界面的设计规范4.Android字体（1）系统字体。Android中英文使用的是Roboto字体，共有6个字重。中文使用的是思源黑体，又称为“SourceHanSans”或“Noto”，共有7个字重。3.2.2 Android界面的设计规范（2）字体大小。进行Android界面设计时要注意字号的大小。3.2.2 Android界面的设计规范Android各元素以720×1280px为基准设计，可与iOS对应，Android中常见的字号大小为24px、26px、28px、30px、32px、34px、36px等，最小字号为20px。3.2.2 Android界面的设计规范Android对应界面iOS对应界面界面设计是产品用户体验里非常重要的一环。在App中，常用的界面类型有引导页、闪屏页、首页、详情页、个人中心页以及注册登录页。3.3 App常用的界面类型引导页闪屏页首页详情页个人中心页注册登录页引导页是用户在第一次打开App时或经过更新后打开App时看到的一组图片，通常由3～5页组成。1.功能说明型功能说明型引导页是引导页中最基础的一种，主要对产品的新功能进行展示，常用于App重大版本的更新。3.3.1 引导页高德地图App的功能说明型引导页2.产品推广型产品推广型引导页可表现App的价值，让用户更了解这款App的理念。其多采用与企业形象和产品风格一致的生动化、形象化的设计形式，让用户看到精美的画面。3.3.1 引导页京东App的产品推广型引导页闪屏页又称为“启动页”，是用户点击App图标后，预先加载的一张图片。1.品牌推广型品牌推广型闪屏页是为表现产品品牌而设定的，基本采用“产品logo+产品名称+宣传语”的简洁化设计形式。3.3.2 闪屏页知乎酷狗音乐有道翻译官2.活动广告型活动广告型闪屏页是为推广活动或广告而设定的，通常将推广的内容直接设计在闪屏页内，多采用插画和海报的设计形式，常用暖色营造热闹的氛围。3.3.2 闪屏页首页又称为“起始页”，是用户使用App时的第一页。1.列表型列表型首页在页面上将同级别的模块进行分类展示，常用于以数据展示、文字阅读等为主的App。其采用单一的设计形式，方便用户浏览内容。3.3.3 首页2.网格型网格型首页在页面上将重要的功能以矩形模块的形式进行展示，常用于工具类App。其采用统一矩形模块的设计形式，刺激用户点击模块。3.3.3 首页天天P图Word墨刀3.卡片型卡片型首页在页面上将图片、文字、控件放置于同一张卡片中，再将卡片进行分类展示，常用于数据展示、文字阅读、工具使用等类型的App。3.3.3 首页知乎App微信读书有道翻译官4.综合型综合型首页是由搜索栏、Banner、金刚区、瓷片区以及标签栏等组成的页面，运用范围较广，常用于电商类、教育类、旅游类等App。其采用丰富的设计形式，能满足用户的需求。3.3.3 首页苏宁易购途牛旅游饿了么详情页是展示App产品详细信息，使用户产生消费的页面，具有展示产品、转化流量的作用。详情页内容较丰富，以图文信息为主。3.3.4 详情页京东途牛旅游

36氪个人中心页是展示个人信息的页面，主要由头像和信息内容组成，具有功能集合、信息集合的作用，其有时也会以“抽屉打开”的形式出现。3.3.5 个人中心页淘宝闲鱼网易云音乐注册登录页是电商类、社交类等功能丰富型App的必要页面，具有进入产品、深度关联的作用。注册登录页设计直观简洁，并且提供第三方账号登录，国内常见的第三方账号有微博、微信、QQ等。3.3.6 注册登录页考拉海购智联招聘

36氪3.4 课堂案例——制作畅游旅游App界面课堂案例——制作畅游旅游App引导页课堂案例——制作畅游旅游App闪屏页课堂案例——制作畅游旅游App首页课堂案例——制作畅游旅游App酒店详情页课堂案例——制作畅游旅游App个人中心页课堂案例——制作畅游旅游App登录页3.4.1 课堂案例——制作畅游旅游App引导页使用“置入嵌入对象”命令置入图像和图标，使用“渐变叠加”命令添加效果，使用“横排文字”工具输入文字。效果图3.4.2 课堂案例——制作畅游旅游App闪屏页使用“置入嵌入对象”命令置入图像。效果图3.4.3 课堂案例——制作畅游旅游App首页使用“矩形”工具和“椭圆”工具绘制形状，使用“置入嵌入对象”命令置入图片和图标，使用“创建剪贴蒙版”命令调整图片显示区域，使用“渐变叠加”命令添加效果，使用“属性”控制面板制作弥散投影，使用“横排文字”工具输入文字。效果图3.4.4