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

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@3xiPhone11Pro、Xs、X1125×2436375×812@3xiPhone8Plus、7Plus、6sPlus、6Plus1080×1920（1242×2208）414×736@3xiPhone8、7、6、6s750×1334375×667@2x知识库在物理分辨率不同的设备中，只要设备的逻辑分辨率相同，它们的显示效果就是相同的。物理分辨率屏幕的最佳分辨率，是屏幕固有的参数，不能调节逻辑分辨率为使同样尺寸的图像在不同物理分辨率的设备上都能正常显示而发明的参数倍率通俗一点讲就是指物理分辨率和逻辑分辨率之间的比例关系二、App界面设计规范（一）尺寸规范在设计界面时，设计师无须制作所有尺寸的设计图，只需要以750px×1334px为标准进行设计，让程序员将制作好的设计图进行适配，就可以使其完美地应用到不同型号的iPhone界面中。此外，界面中状态栏、导航栏和标签栏的尺寸也有一定规范。当倍率相同、设备分辨率不同时，它们的高度一般是固定的；当倍率不同时，它们的高度也会不同，如图所示。标签栏导航栏状态栏@3x1125px×2436px@2x750px×1334px132px132px147px40px88px98px二、App界面设计规范（一）尺寸规范2．Android系统的尺寸规范

Android系统不同屏幕密度对应的分辨率Android系统的开源性使其涉及的设备类型繁多，没有固定的尺寸参考。一般将屏幕密度由低到高大致分为为便于对Android系统设备进行管理ldpimdpihdpixhdpixxhdpixxxhdpi密度ldpimdpihdpixhdpixxhdpixxxhdpi分辨率/px240×320320×480480×800720×12801080×19202160×3840DPI/dpi120160240320480640像素比例（倍数）0.751.01.52.03.04.0二、App界面设计规范（一）尺寸规范同iOS系统一样，为Android系统的设备设计界面时也会以一种尺寸为标准，由程序员去适配不同的设备，通常这个尺寸会选用720px×1280px。为了在不同密度的屏幕上统一显示元素，Android系统的设计规范常以dp为单位。在App界面中状态栏高度为24dp导航栏高度为56dp标签栏高度为48dp但是，在设计时，需要将dp换算为px。它们之间的换算公式为dp×dpi/160=px。例如，当DPI为320dpi时，1dp×320dpi/160=2px。二、App界面设计规范（二）字体规范在iOS系统中，默认的官方中文字体是苹方，英文名为PingFangSC，专为中国用户打造。该字体有6种字重可供选择，如图所示。1．iOS系统的字体规范二、App界面设计规范（二）字体规范对于英文字体，官方提供了两种选择SanFrancisco（SF）无衬线字体（笔画粗细基本一致）SFProSFProPoundedSFMonoSFCompact适用于多种情况，灵活度高NewYork（NY）衬线字体（在笔画始末有额外的装饰）实现与SF字体的互补，适合大字号文字的显示二、App界面设计规范（二）字体规范在Android系统中，Roboto为首选字体，主要支持英文和类英文文字。2．Android系统的字体规范Roboto字体有6种字重用于匹配不同文本ThinLightRegularMediumBoldBlack二、App界面设计规范（二）字体规范Noto是Roboto字体未涵盖的所有语言的默认字体，其中NotoSansCJK（CJK指中文、日文和韩文）为国内常用的Android系统字体。2．Android系统的字体规范NotoSansCJK字体有7种字重可供选择ThinLightDemiLightRegularMediumBoldBlack知识库NotoSansCJK是由Google和Adobe联合开发的开源字体Adobe将其称为SourceHanSans（思源黑体）而Google将其称为NotoSansCJK，并纳入Noto字体家族二、App界面设计规范（三）图片规范不同的图片比例可以给人不同的视觉感受，因此它们应用的场景也有所区别。在App界面设计中常见的图片宽高比例16∶94∶32∶11∶1（1）16∶9根据人体工程学的研究，人类两眼的视野范围是一个宽高比例为16∶9的长方形。因此，该比例的图片可以给人开阔的视觉体验，是新闻资讯或视频播放类App的常用图片比例之一。二、App界面设计规范（三）图片规范（2）4∶34∶3是常用图片比例之一，通常作为界面的主体，或在文章中以插图的形式出现。（3）2∶12∶1是最接近电影荧幕的比例，可以给人带来观影般的视觉感受，常用于影音娱乐类App。（4）1∶11∶1的宽高比例可以使界面构图变得简单而规范，常用于商品、头像、特写、配图等展示模块。拓展阅读2019年8月9日，华为鸿蒙系统正式发布；2021年6月2日晚，华为正式发布了多款搭载HarmonyOS2的产品，这标志着中国科技的进步与崛起，也意味着我们有了自己的移动操作系统。相信在不久的将来，针对鸿蒙系统的设计规范和标准也将会出现。课堂小结（一）尺寸规范（二）字体规范（三）图片规范项目分析（一）设计需求本项目主要为商城类App设计首页、商品详情页和个人中心页。该商城类App中的商品以女性用品为主，且目标消费者大多为18岁以上、有购买能力的女性用户。在设计界面时，界面中需要充分展示商品，使消费者对商品有基本认知，还需要包含购买商品的基本功能，使消费者可以顺利下单。此外，App中不同界面的风格要统一，并且要符合消费者的消费心理和审美倾向，以吸引消费者浏览App。项目分析（二）设计思路根据设计需求，结合App的界面风格和面向群体，具体设计思路如下。首先，在界面中设计搜索栏、导航栏和商品分类区域，使消费者可以快速找到所需商品，并且在首页中设计Banner、“好评商品”和“大牌上新”等内容版块，营造销售氛围，提高消费者的购买欲望。其次，在商品详情页中，商品图片采用接近1∶1的宽高比例，使界面简洁、规范，并且更好地展示商品细节。此外，根据商品信息的重要程度，对其使用不同的字体大小、字重和文本颜色，使界面信息层次分明、突出重点。最后，在个人中心页中，延续首页和商品详情页的风格对界面进行设计。在该界面中除了必要的个人信息外，还应设计物流信息和订单信息等内容，使用户可以快速查看自己的订单，并能实时了解订单位置。项目分析（三）设计风格该App界面计划以粉色为主色调。粉色虽不像红色和橙色等色彩强烈的颜色一样，能够激起消费者的购买欲望，但其作为一种温柔、甜美的颜色，可以给人充满梦幻、恬静的感觉，使消费者在浏览App时能静下心来选择商品，留住消费者。此外，使用玫红色作为点缀色，可以更好地突出界面中的重要信息，并且同色系的点缀色在丰富界面色彩的同时，还可以保持界面风格统一。商城类App部分界面的最终效果如图所示。项目分析（三）设计风格该App界面计划以粉色为主色调。粉色虽不像红色和橙色等色彩强烈的颜色一样，能够激起消费者的购买欲望，但其作为一种温柔、甜美的颜色，可以给人充满梦幻、恬静的感觉，使消费者在浏览App时能静下心来选择商品，留住消费者。此外，使用玫红色作为点缀色，可以更好地突出界面中的重要信息，并且同色系的点缀色在丰富界面色彩的同时，还可以保持界面风格统一。商城类App部分界面的最终效果如图所示。项目分析（三）设计风格该App界面计划以粉色为主色调。粉色虽不像红色和橙色等色彩强烈的颜色一样，能够激起消费者的购买欲望，但其作为一种温柔、甜美的颜色，可以给人充满梦幻、恬静的感觉，使消费者在浏览App时能静下心来选择商品，留住消费者。此外，使用玫红色作为点缀色，可以更好地突出界面中的重要信息，并且同色系的点缀色在丰富界面色彩的同时，还可以保持界面风格统一。商城类App部分界面的最终效果如图所示。项目实施App界面最终效果可参考本书配套素材“素材与实例\项目八\源文件”文件夹中的“首页.psd”“商品详情页.psd”“个人中心页.psd”文件。本项目使用Photoshop软件制作App界面。制作界面时，我们将其分成3个部分讲解首先制作首页然后制作商品详情页最后制作个人中心页项目实施（一）制作首页制作首页

点击此处播放微课分别制作制作首页时，我们将整个界面分成状态栏搜索栏导航栏Banner金刚区各内容版块标签栏知识库金刚区是界面的核心功能区域，聚集着大量功能图标，是各类子版块的入口。项目实施（二）制作商品详情页制作商品详情页时，首先将首页中的状态栏复制并原位粘贴到当前文档中；然后使用“圆角矩形工具”绘制一个圆角矩形，并将置入的素材剪贴到圆角矩形中制作商品图片；接着使用“圆角矩形工具”绘制各内容版块的背景，并使用“横排文字工具”在背景上制作各内容版块的文本信息；最后使用“矩形工具”、“圆角矩形工具”、“横排文字工具”和置入的素材在界面最下方制作底部的按钮。制作商品详情页

点击此处播放微课项目实施（三）制作个人中心页制作个人中心页时，首先将首页中的状态栏及其背景复制并原位粘贴到当前文档中，并调整背景的高度；然后使用“椭圆工具”、置入的素材、“横排文字工具”和“圆角矩形工具”制作用户信息，并使用“多边形工具”、“椭圆工具”和“路径查找器”功能绘制“设置”按钮；接着使用“圆角矩形工具”、置入的素材和“横排文字工具”制作界面中间的各内容版块；最后复制并原位粘贴首页中的标签栏，并将“首页”组中的“颜色叠加”图层样式拖到“我的”图标上。制作个人中心页

点击此处播放微课项目实训本实训要求利用本项目所学知识制作音乐类App的启动页和注册登录页，效果如图所示。App界面最终效果可参考本书配套素材“素材与实例\项目八\源文件”文件夹中的“启动页.psd”和“注册登录页.psd”文件。项目实训App界面以绿色为主色调，给人青春、宁静、焕发生机的感觉，使用户在App中可以更好地放松心情、享受音乐。在启动页中，大面积的绿色加上音乐插画和文案，可以给用户一种沉浸式的视觉体验，并向用户传达App的性质和风格