平面设计项目实战08商城类App界面设计.pptxVIP

BUSINESS平面设计项目实战

目录contents01房地产海报设计02奶茶促销广告设计03玫瑰花茶包装设计04教育机构VI设计05绘画类书籍封面设计06旅游画册设计07家居商城网页界面设计08商城类App界面设计

项目八商城类App界面设计

项目导读App界面设计主要是指为运行在手机系统上的应用程序进行界面设计。它的美观程度和规范程度会直接影响应用程序的视觉效果和交互体验。点击跳过情景

项目导读设计师要想设计出既美观又规范的界面不但要具备良好的审美能力，还要了解App界面设计的相关知识。点击跳过情景

项目导读本项目以商城类App界面为例，介绍App界面设计的相关知识，以及使用Photoshop2021软件制作App界面的方法。点击跳过情景

学习目标【知识目标】了解App的基本界面。了解App界面设计规范。掌握App界面的制作方法和技巧。【能力目标】能够根据设计需求分析App界面的设计思路，确定设计风格。能够使用Photoshop2021软件制作App界面。【素质目标】养成周到细致、全面系统的思维方式。增强探索意识，提升钻研精神。

项目导航一、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的基本界面（二）首页首页是App关键内容的汇总界面。用户在首页可通过点击按钮或图标等进入对应的界面。首页状态栏导航栏Banner内容区域标签栏导航栏内容区域Banner状态栏标签栏

一、App的基本界面（三）注册登录页注册登录页是App的必要界面之一，是用户注册和登录账号的界面。该界面比较简洁。注册登录页账号密码输入框第三方登录图标按钮

一、App的基本界面（四）商品详情页商品详情页是App中展示商品详细信息的界面。需要注意的是，该界面内容较多，通常一屏内无法完全显示，设计时可适当调整界面高度。商品详情页商品图片名称价格商品介绍详情图

一、App的基本界面（五）播放页播放页根据播放内容的不同音乐播放页视频播放页音频播放页

一、App的基本界面（六）个人中心页个人中心页（“我的”界面）是供用户查看和设置个人信息的界面。个人中心页我的订单收藏优惠券意见反馈与用户相关的信息

课堂小结（一）开屏页（二）首页（三）注册登录页（四）商品详情页（五）播放页（六）个人中心页

二、App界面设计规范

二、App界面设计规范App界面的显示需要基于现有的设备和技术，因此不同系统、不同尺寸的设备对App界面设计有不同的要求。目前，市场上最热门的操作系统iOS系统Android系统界面尺寸规范字体规范图片规范

二、App界面设计规范App界面的尺寸规范是基于不同系统的设备尺寸决定的。（一）尺寸规范1．iOS系统的尺寸规范iOS系统的主流设备分辨率设备名称物理分辨率/px逻辑分辨率/pt倍率iPhone12、13、12Pro、13Pro1170×2532390×844@3xi