平面设计项目实战 项目八 商城类App界面设计.pptx

平面设计项目实战BUSINESS目录contents绘画类书籍封面设计玫瑰花茶包装设计旅游画册设计奶茶促销广告设计商城类App界面设计家居商城网页界面设计教育机构VI设计房地产海报设计0306010705020408项目八商城类App界面设计项目导读点击跳过情景App界面设计主要是指为运行在手机系统上的应用程序进行界面设计。它的美观程度和规范程度会直接影响应用程序的视觉效果和交互体验。项目导读点击跳过情景设计师要想设计出既美观又规范的界面不但要具备良好的审美能力，还要了解App界面设计的相关知识。项目导读本项目以商城类App界面为例，介绍App界面设计的相关知识，以及使用Photoshop2021软件制作App界面的方法。点击跳过情景学习目标【知识目标】了解App的基本界面。了解App界面设计规范。掌握App界面的制作方法和技巧。【能力目标】能够根据设计需求分析App界面的设计思路，确定设计风格。能够使用Photoshop2021软件制作App界面。【素质目标】养成周到细致、全面系统的思维方式。增强探索意识，提升钻研精神。项目导航一、App的基本界面二、App界面设计规范项目分析项目实施项目实训优秀作品赏析一、App的基本界面一、App的基本界面由于其内容和功能的不同，这些界面的设计要求也有所区别，下面将简单进行介绍。一、App的基本界面（一）开屏页开屏页是用户启动App后看到的第一个界面。一、App的基本界面（一）开屏页1．启动页启动页是App每次冷启动（已启动还未在后台运行的App）过程中展示给用户的一个静态过渡画面，如图所示。它可以缓解用户等待打开App时产生的焦虑情绪。启动页的显示时长受App启动时长影响，当程序准备完毕后，启动页就会消失，并进入下一个界面。因此，启动页的信息要尽量简练，避免包含太多文字或字符，不要添加广告及干扰用户使用和浏览的元素。一、App的基本界面（一）开屏页2．闪屏页闪屏页是App启动时的一个过渡画面（可以是静态图片，也可以是动画），如图所示。它的展示时间是可控的，且拥有一定的交互功能（如用户点击图像可跳转到对应的承载页；点击“跳过”按钮可进入下一个界面等），常用于活动推广和商业上的广告宣传，通常在启动页之后显示。一、App的基本界面（一）开屏页3．引导页引导页是用户第一次安装App或App更新后，首次启动时显示的多个界面，如图所示。一、App的基本界面（一）开屏页3．引导页它主要用于介绍App的核心功能、用法、使用场景或新增功能等。引导页对首次使用App的用户来说如同使用指南一般，可以让新用户在1分钟内了解和掌握产品的核心功能，但是同时也会增加用户进入App的时间，从而导致用户失去耐心，降低对App的好感度。因此，引导页的页数最好控制在3～5页，每页的关键文案不超过9个字，并提供“跳过”按钮。状态栏一、App的基本界面导航栏（二）首页Banner首页是App关键内容的汇总界面。用户在首页可通过点击按钮或图标等进入对应的界面。内容区域标签栏一、App的基本界面（三）注册登录页注册登录页是App的必要界面之一，是用户注册和登录账号的界面。该界面比较简洁。一、App的基本界面（四）商品详情页商品详情页是App中展示商品详细信息的界面。需要注意的是，该界面内容较多，通常一屏内无法完全显示，设计时可适当调整界面高度。一、App的基本界面（五）播放页一、App的基本界面（六）个人中心页个人中心页（“我的”界面）是供用户查看和设置个人信息的界面。课堂小结（一）开屏页（二）首页（三）注册登录页（四）商品详情页（五）播放页（六）个人中心页二、App界面设计规范二、App界面设计规范App界面的显示需要基于现有的设备和技术，因此不同系统、不同尺寸的设备对App界面设计有不同的要求。二、App界面设计规范（一）尺寸规范App界面的尺寸规范是基于不同系统的设备尺寸决定的。1．iOS系统的尺寸规范iOS系统的主流设备分辨率设备名称物理分辨率/px逻辑分辨率/pt倍率iPhone12、13、12Pro、13Pro1170×2532390×844@3xiPhone11Pro、Xs、X1125×2436375×812@3xiPhone8Plus、7Plus、6sPlus、6Plus1080×1920（1242×2208）414×736@3xiPhone8、7、6、6s750×1334375×667@2x知识库在物理分辨率不同的设备中，只要设备的逻辑分辨率相同，它们的显示效果就是相同的。二、App界面设计规范（一）尺寸规范132px状态栏在设计界面时，设计师无须制作所有尺寸的设计图，只需要以750px×1334px为标准进行设计，让程序员将制作好的设计图进行适配，就可以使