案例学AIGC+Photoshop UI设计课件 第6章 App 界面设计

第6章

App界面设计案例学AIGC+PhotoshopUI设计目录CONTENT6.1行业知识：App界面设计基础6.2实战案例：设计教育App启动页6.3实战案例：设计教育App首页6.4实战案例：设计教育App其他页面6.5拓展训练6.6AI辅助设计6.1.1App界面的组成状态栏位于界面最顶端，用于显示手机当前运营商、时间、信号和电量等信息。导航栏位置不固定，用于告知用户当前所处的页面，也提供切换到其他界面的功能。内容区域是界面占比面积最多的区域，用于放置该界面的主要内容。标签栏用于切换界面中的显示内容。App界面组成6.1.2App界面常见的类型启动页动页又称为闪屏页，是用户点击App图标后出现的第一个页面，出现时间通常只有5s。启动页根据呈现的内容又可以分为：①品牌宣传型，常用结构为Logo＋软件名称＋宣传语；②活动推广型，常用结构为插画（占70%面积）＋活动主题＋活动时间，或者只用全屏海报；③节日关怀型，常用结构为Logo＋节日插画。品牌宣传型活动推广型节日关怀型6.1.2App界面常见的类型引导页是用户第一次使用或更新App后，出现的由3~5页图片组成的界面，用于帮助用户快速了解App的主要价值、功能或更新的新增内容，起到引导作用。引导页根据呈现的内容可以分为功能介绍型、情感代入型和搞笑型。引导页首页又称为起始页，是用户开始正式使用App的第一页，主要用于展示App的主要内容，帮助用户了解App。首页功能介绍型引导页首页6.1.2App界面常见的类型个人中心页又称“我的”界面，是承载用户个人资料的界面，主要由用户头像和用户信息组成。个人中心页空白页是由于网络、信号等问题产生的错误提示页。注册/登录页是App的必备页面，用于注册或登录个人账户，以此成为App正式用户，使用App的主要功能。空白页注册/登录页个人中心页空白页注册/登录页6.1.3App界面设计要求明确传达主旨优秀的App界面首先要能够明确传达App的主旨，即App的主要功能。保证功能的合理性在进行App界面设计时，需要考虑App的使用特点，以保证App功能的合理性。清晰地展现信息层级App界面设计可根据内容的主次，将信息区分为不同的信息层级，当用户点击某层级信息时，将自动跳转到对应层级中，方便用户查看。具备美观性优秀的App界面不但内容要表达明确，而且要具备美观性，只有具有吸引力的App界面才能吸引更多人浏览和使用。||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||6.1.4App界面尺寸规范1．iOS操作系统尺寸规范iOS系统是由苹果公司开发的移动端操作系统，屏幕单位是ppi。尺寸通常以iPhone8P/SE/X/12/13为基准，以分辨率为“1080px×1920px”“1242px×2688px”“1125px×2436px”的尺寸来设计，其他型号的设计尺寸可依据通用尺寸向上或向下适配。iOS操作系统尺寸规范Android操作系统是一种基于Linux内核（不包含GNU组件）的自由及开放源代码的操作系统，主要应用于移动设备中，屏幕单位是dp。在设计Android屏幕尺寸时，通常采用“720px×1280px”和“1080px×1920px”的屏幕尺寸。6.1.4App界面尺寸规范2．Android操作系统设计规范6.1.4App界面尺寸规范3．Harmony操作系统尺寸规范Harmony（鸿蒙操作系统）操作系统是华为推出的一款面向全场景的分布式操作系统，它支持多种设备，包括手机、平板、智能穿戴、智慧屏、车机等。随着鸿蒙系统的不断发展，越来越多的开发者开始关注并投入到鸿蒙应用的开发中。屏幕单位是vp，vp与px的转换公式为vp=（px×160）/ppi。在设计Harmony界面时通常采用360vp×640vp（即720px×1280px）的尺寸进行制作。6.1.5界面标注的规范标注色在进行界面标注时，标注文字所用的颜色应该与所设计的界面颜色区分开来，必要时可通过描边的方式进行内容的区分。标注方式在进行界面标注时，要注意标注方式，整洁的标注不但视觉效果更加美观，而且便于程序员查找标注信息。在进行标注设计时，可将标注分为两部分，一部分用来标注整体内容，另一部分用来标注细节，这样更加便于他人识别。界面标注效果目录CONTENT6.1行业知识：App界面设计基础6.2实战案例：设计教育App启动页6.3实战案例：设计教育App首页6.4实战案例：设计教育App其他页面6.5拓展训练6.6AI辅助设计案例背景+操作要点运用椭圆工具、矩形工具制作图像。运用横排文字工具输入文字。运用时间轴制作动画。案例背景操作要点求知教育英才培训公司（简称“求知教育”）为了满足现代学习者随时随地可以进行学习的需求，决定紧跟时代步伐，打造一款集在线学习、互动交流、智能管理于一体的教育App，并先设计启动页，具体要求如下。（1）整体风格应简洁、大气，符合“教育”主题。（2）色彩搭配应舒适、合理，能提供较佳的学习体验。（3）突出求知教育的宣传语和标志。（4）为文字制作动画，提升启动页的吸引力。设计思路色彩风格字体规范界面内容布局动画创意选择简约、清新的风格，以较为清新的蓝色为主，搭配白色，营造丰富、有层次感却又和谐的色彩效果。选择“思源黑体CN”为App界面主要字体，方便用户识别。加粗处理标题及重要文字信息，或使用主色进行强调。可采用对称布局方式，整个效果和文字按照一条中轴线进行排列，整个效果直观，便于识别。采用动画的形式对“解答”图标添加动效，使整个启动页更具有动感，以提升吸引力。启动页原型图启动页参考效果6.2.1设计启动页背景在制作启动页背景时，先绘制丰富颜色的背景图，再绘制圆、圆角矩形提升背景的层次感，再绘制矩形将背景分为两个板块，方便后续放置界面内容。制作背景绘制正圆添加图层样式添加网格素材调整颜色绘制圆角矩形绘制圆角矩形2绘制底部形状6.2.2设计启动页内容启动页的内容主要包括文字、图形和标志。在添加内容时，先输入广告文字，再添加图形和图标，以提高美观度，最后制作跳转按钮。输入文字1创建剪贴蒙版输入文字2绘制正圆6.2.2设计启动页内容输入文字3添加素材输入底部文字输入文字46.2.3设计启动页动画为了让启动页更加有特色可添加动画，这里对“解答”图标制作移动效果，并通过依次展现素材和文字的方式，让整个启动页“动”起来。要实现这些效果需通过“时间轴”面板来完成。重命名图层调整第1帧内容选择时间轴6.2.3设计启动页动画复制并设置时间轴调整图标位置11调整图标位置26.2.3设计启动页动画复制并设置时间轴调整图标位置26.2.3设计启动页动画导出动画目录CONTENT6.1行业知识：App界面设计基础6.2实战案例：设计教育App启动页6.3实战案例：设计教育App首页6.4实战案例：设计教育App其他页面6.5拓展训练6.6AI辅助设计案例背景+操作要点运用魔棒工具抠取图像。输入文字并绘制图形。运用PxCook标注首页。案例背景操作要点求知教育App首页需全面地展现App特色，帮助用户了解其功能，引导用户使用，具体要求如下。（1）首页效果应简洁、大气，符合现代审美趋势。（2）色彩搭配应舒适、内容体现直观。（3）采用分栏布局方式，分别展示App的类目和教育方式，布局合理、清晰。设计思路色彩风格字体规范界面内容布局以蓝色为主，搭配黄色、橙色、绿色等颜色，营造丰富、有层次感的色彩效果。仍选择“思源黑体CN”为App界面主要字体，保持界面间的统一性。通过设置不同文字颜色体现重要文字信息，方便识别。主页可采用分栏布局方式，上方为状态栏和搜索栏，中间为Banner和列表，中下方为各个版块，底部为导航栏。首页原型图首页参考效果6.3.1设计状态栏和导航栏设计首页前，可使用参考线划分内容区域，便于后续制作。在制作时，因状态栏是手机自带显示区无需设计，直接使用提供素材占据位置即可，导航栏只需绘制图形和添加文字。标尺和尺寸效果添加搜索图标和文字绘制扫码图标添加状态栏绘制圆角矩形6.3.2设计内容区域内容区主要分为3个部分，顶部为Banner区域用于明确App定位为“AI智能题库”，其下方为App的功能分类列表，该分类列表主要通过图标的方式体现，在分类列表下方展示常用板块。抠取素材添加素材输入文字16.3.2设计内容区域添加投影图层样式2添加投影图层样式3复制与编辑圆角矩形添加投影样式1添加文字Banner区域效果6.3.2设计内容区域添加素材并输入文字绘制圆角矩形创建剪贴蒙版6.3.2设计内容区域输入文字2绘制圆角矩形并添加素材输入文字36.3.3设计标签栏设计标签栏时，可先绘制矩形用作底纹，然后在其上方添加标签按钮，并输入标签文字。绘制矩形添加图标输入文字6.3.4标注App首页界面完成首页的设计后，可使用PxCook进行标注，不仅标注出尺寸、文字、间距、颜色等内容，还应具备完整性和美观性。新建项目放大首页生成圆角矩形标注6.3.4标注App首页界面生成扫码图像的标注生成文字标注绘制间距标注距离标注标注文字标注“了解详情”按钮6.3.4标注App首页界面内容1版块的标注生成其余标注首页界面标注效果标注间距生成文字标注目录CONTENT6.1行业知识：App界面设计基础6.2实战案例：设计教育App启动页6.3实战案例：设计教育App首页6.4实战案例：设计教育App其他页面6.5拓展训练6.6AI辅助设计案例背景+操作要点运用橡皮檫工具擦除多余的图像。运用钢笔工具、矩形工具、直线工具、椭圆工具绘制形状。运用文字工具组输入文字信息。案例背景操作要点随着求知教育App首页的制作完成，该品牌准备开展后续的其他页面设计工作，包括登录页、个人中心页、视频播放页等，以更好地宣传品牌，具体要求如下。（1）采用与首页相同的风格，视觉效果美观。（2）界面布局直观且易于识别，能凸显页面表达的内容。设计思路色彩风格字体规范界面布局继续沿用首页的主色为蓝色，辅助色为白色，保持简约、清新的风格。延续选择“思源黑体CN”为App界面主要字体，新增“方正兰亭粗黑_GBK”字体方便用户识别。登录页可采用对称布局方式，上方为装饰图像，中间为登录部分按钮，下方为装饰形状，整个效果直观，方便用户快速登录；个人中心页可采用左对齐的方式，将人物形象、列表内容左对齐显示，方便查看；视频播放页采用对称布局方式，中间主要用于播放视频内容，其他部分则采用图标和文字的方式展示，甚至留白处理，更加方便用户识别。其他页面的原型图参考效果设计思路其他页面的原型图参考效果6.4.1设计登录页在设计登录页时，将沿用首页界面的色彩设计，并采用上图下文的方式展现内容，使整个界面效果简洁、美观。绘制形状复制与调整形状擦除形状绘制圆角矩形设置图层混合模式复制形状并修改颜色6.4.1设计登录页擦除形状绘制圆角矩形设置图层混合模式6.4.2设计个人中心页继续设计App个人中心页界面，在设计时，要将个人信息、图标和重要内容体现出来，便于用户查看交易信息，并在界面下方展现App系统设置信息，帮助用户设置个人信息。输入文字添加人物素材创建剪贴蒙版6.4.2设计个人中心页添加文字1添加文字2制作标签栏6.4.3设计视频播放页在设计视频播放页时，先制作蓝色的背景，再设计视频标签、按钮，突出视频标题，并添加视频播放窗口素材。制作背景绘制圆角矩形添加素材目录CONTENT6.1行业知识：App界面设计基础6.2实战案例：设计教育App启动页6.3实战案例：设计教育App首页6.4实战案例：设计教育App其他页面6.5拓展训练6.6AI辅助设计实训1设计读书App启动页实训要求:诚悦读书App准备制作与夏至有关的启动页，用于迎接夏至节气，效果要符合节气特点。要求尺寸为750像素×1624像素，以“荷花”为设计点，通过滤镜的处理，使效果更具质感。实训1设计读书App启动页操作思路:①打开素材②添加滤镜③添加文字和图标④制作动画读书App启动页实训2设计家居App首页实训要求:为梦想家家居App制作首页界面，其效果需符合家居主题，采用恰当的布局方式。尺寸为750像素×1624像素。视觉效果简约，通过商品图片、图标、文字形式的来展现首页内容。标注要具体、直观。实训2设计家居App首页操作思路:家居网App首页设计过程①绘制不同的形状②添加图片和图标③输入文字目录CONTENT6.1行业知识：App界面设计基础