图形图像处理（Photoshop CC 2019） 课件 项目5 制作手机界面-App设计

本章简介：项目5制作手机界面——App设计界面是App设计中最重要的部分之一，将最终呈现给用户。App界面设计是涉及版面布局、颜色搭配等的综合性工作。通过本项目的学习，读者可以对App界面设计有基本的认识，并掌握制作App常用界面的规范和方法。学习引导相关知识：了解App设计的基础知识1.App的概念App是“Application”的缩写，一般指智能手机的第三方应用程序。部分App界面如图5-1所示。用户主要从应用商店下载App，比较常用的应用商店有AppStore、华为应用市场等。应用程序的运行与操作系统密不可分，目前市场上主要的智能手机操作系统有苹果公司的iOS和谷歌公司的Android系统。对UI设计师而言，要进行App界面设计工作，需要学习这两大操作系统的界面设计知识。2.App的设计流程App设计可以按照分析调研、交互设计、交互自查、界面设计、界面测试、设计验证的步骤进行。相关知识：了解App设计基础3.App的分类常用App的类别包括社区交友、影音娱乐、休闲娱乐、生活服务、旅游出行、电商平台、金融理财、健康医疗、学习教育、资讯阅读等。相关知识：了解App设计基础任务5.1制作时尚娱乐App的引导界面任务引入设计理念任务知识任务实施扩展实践5.1.1任务引入本任务要求为一个时尚娱乐App设计制作最新一期杂志的引导界面，要求体现出本期杂志的主题，画面简约、清新。5.1.2设计理念该界面整体色调淡雅，展示文艺风格；使用人物照片素材突出了杂志主题，能更好地吸引用户；简洁的文字起到丰富画面的效果。5.1.3任务知识：“色阶”命令、“阴影/高光”命令、“色彩平衡”命令1.“色阶”命令打开一张图片。选择“图像>调整>色阶”命令，或按Ctrl+L组合键，弹出“色阶”对话框。根据需要在对话框中进行设置。单击“确定”按钮，可改变图像色阶。2．“阴影/高光”命令打开一张图像。选择“图像>调整>阴影/高光”命令，弹出“阴影/高光”对话框，在其中勾选“显示更多选项”复选框，选项的设置如图所示。单击“确定”按钮，可调整图像阴影/高光。5.1.3任务知识：“色阶”命令、“阴影/高光”命令、“色彩平衡”命令3．“色彩平衡”命令选择“图像>调整>色彩平衡”命令，或按Ctrl+B组合键，弹出“色彩平衡”对话框，根据需要在对话框中进行设置，如图所示，单击“确定”按钮，可调整图像颜色。5.1.3任务知识：“色阶”命令、“阴影/高光”命令、“色彩平衡”命令5.1.4任务实施5.1.5扩展实践：制作摩托车App的闪屏界面使用“色彩平衡”命令修正偏色的照片，使用图层混合模式和“不透明度”参数制作图片的叠加效果。任务5.2制作旅游App的登录界面任务引入设计理念任务知识任务实施扩展实践5.2.1任务引入本任务要求为一家涵盖UI设计、Logo设计、VI设计和App设计业务的设计公司制作一款旅游App的登录界面。5.2.2设计理念该界面的整体颜色以白色和蓝色为主，给人以科技感和现代感；主体元素为手机登录状态图片，配合整体的设计风格，令人印象深刻。5.2.3任务知识：绘图工具1．矩形工具选择矩形工具，或反复按Shift+U组合键切换至矩形工具，其属性栏如图所示。2．椭圆工具选择椭圆工具，或反复按Shift+U组合键切换至椭圆工具，其属性栏如图所示。5.2.3任务知识：绘图工具3．圆角矩形工具选择圆角矩形工具，或反复按Shift+U组合键切换至圆角矩形工具，其属性栏如图所示。5.2.3任务知识：绘图工具5.2.4任务实施5.2.5扩展实践：制作旅游App的主界面使用移动工具移动素材图片，使用横排文字工具添加宣传文字，使用矩形工具和椭圆工具绘制装饰图形。任务5.3项目演练——制作运动鞋App的销售界面任务引入设计理念5.3.1任务引入某家服饰类公司的产品包括各式男女装、运动鞋、童装等。本任务要求为该公司准备推出的一系列新款运动鞋制作App的销售界面，要求设计能给人清新感和活力感，促进新产品的销售。5.3.2