案例学AIGC+Photoshop UI设计（微课版）课件 第7、8章 软件界面设计；综合案例：“宛木居”UI 设计项目

第7章

软件界面设计案例学AIGC+PhotoshopUI设计（微课版）目录CONTENT7.1行业知识：软件界面设计基础7.2实战案例：设计数据分析软件启动页7.3实战案例：设计数据分析软件着陆页7.4实战案例：设计数据分析软件其他页面7.5拓展训练7.6AI辅助设计7.1.1软件界面的组成软件界面组成导航栏导航栏可为用户提供切换到其他界面的功能，使用户明确页面位置和层级。常见的导航模式有左侧导航和顶部导航，当导航项目或者软件超过5个页面时，常使用左侧导航，这是因为左侧导航通常可以折叠，节省界面空间，而顶部导航是始终可见的。命令区域命令区域可为用户提供快速使用软件、登录、消息提示等功能，可以配合导航进行使用，通常放置在界面的顶部或底部。内容区域用于展示该界面的主要内容，根据不同内容可使用不同的界面布局方式。7.1.2软件界面常见的类型启动页启动页是用户激活软件后首先呈现的界面，其主要作用是在软件初始化过中为用户提供视觉反馈。由于启动过程可能需要一定时间，因此，该页面的设计往往追求简洁与高识别度，以便在短暂的时间内给用户留下深刻印象。启动页7.1.2软件界面常见的类型着陆页着陆页又被称为主页，是用户正式进入软件后首先浏览的页面。此页面设计的重点在于直观展示软件的核心功能和用户可能感兴趣的内容，从而引导用户进一步探索软件。着陆页7.1.2软件界面常见的类型聚合页聚合页是一个将多种内容或数据集中展示，便于用户快速浏览和选择的界面，其作用类似于列表页。根据内容的不同，设计人员可灵活采用网格或列表等排版方式，以提高信息的可读性和可访问性。聚合页7.1.2软件界面常见的类型内页属于二级页面，即从着陆页进一步链接到的页面。这些页面可能提供更多详细信息、产品说明、购买选项等。内页当用户从聚合页中或是内页中选择特定内容后，将被引导至详情信息页。单页通常用于收集用户数据，如账户创建、偏好设置或用户反馈等。在设计表单页时，应确保界面友好、直观，并采取措施保护用户数据的安全。详情信息页表单页详情信息页目录CONTENT7.1行业知识：软件界面设计基础7.2实战案例：设计数据分析软件启动页7.3实战案例：设计数据分析软件着陆页7.4实战案例：设计数据分析软件其他页面7.5拓展训练7.6AI辅助设计案例背景+操作要点运用“曲线”命令调整颜色。运用橡皮檫工具擦除图像局部，用椭圆工具绘制形状。运用“图层蒙版”命令，调整显示区域。运用“添加杂色”滤镜，添加杂色。案例背景操作要点某互联网公司为了更好地统计与分析公司销售数据，准备设计一款名称为“数据分析平台”的数据分析的软件，现在需要设计该软件的启动页，具体要求如下。（1）整体风格应简洁、大气，色彩搭配简单、舒适，符合互联网公司的审美定位。（2）尺寸为1920像素×1080像素，分辨率为72像素/英寸。（3）界面布局应合理、清晰，能直观凸显内容。设计思路色彩风格字体规范内容布局使用简约、清新的风格，以蓝色为主，搭配白色，营造丰富、有层次感却又和谐的色彩效果。选择“思源黑体CN”为主要字体，方便用户识别。采用中心布局的方式，在科技感背景的基础上，输入文字，直观地体现启动页信息。软件启动页的原型图设计思路软件启动页参考效果7.2.1设计启动页背景在制作启动页背景时，可在提供的背景图素材中添加光源，调整背景图素材的颜色，并添加杂色，提升背景质感。过渡背景添加其他光源添加光源7.2.1设计启动页背景调整曲线制作背景绘制不同大小的圆完成背景的制作添加杂色7.2.2设计启动页内容输入文字后，通过图层样式为主要文字制作立体效果，使其更加突出。设置斜面和浮雕设计渐变叠加参数设置光晕7.2.2设计启动页内容查看文字效果输入其他文字修改图层样式目录CONTENT7.1行业知识：软件界面设计基础7.2实战案例：设计数据分析软件启动页7.3实战案例：设计数据分析软件着陆页7.4实战案例：设计数据分析软件其他页面7.5拓展训练7.6AI辅助设计案例背景+操作要点运用矩形工具、椭圆工具、直线工具、三角形工具绘制形状。运用海绵工具增加饱和度。案例背景操作要点为能直观展示软件的类目和基本信息，需要继续为某互联网公司开发的数据分析软件设计着陆页，具体要求如下。（1）界面风格以简洁为主，能直观展示各信息。（2）色彩搭配舒适，界面布局整齐有序。（3）尺寸为1920像素×1080像素，分辨率为72像素/英寸。设计思路界面组成与布局色彩和风格字体规范采用卡片型的布局方式直观展现内容，最上方为命令区用于展示软件名称和基本按钮，中间为信息展示区，左侧为列表用于分类展示数据类目。界面的定位为数据分析，为了便于区分可选择深蓝色为主色调，搭配粉色、红色、紫色、黄色、绿色等进行点缀，划分界面层次.为了便于用户识别，选择“思源黑体”作为软件界面主要字体。着陆页组成与布局设计思路着陆页参考效果色彩搭配7.3.1设计命令区01新建大小为“1920像素×1080像素”，分辨率为“72像素/英寸”，颜色模式为“RGB颜色”，名称为“数据分析软件着陆页”的文件。0204选择“横排文字工具”，输入文字，在工具属性栏中设置“字体”为“思源黑体CN”，调整文字的颜色、位置和大小。将前景色设置为“#edf5fb”，填充前景色到“背景”图层。03选择“矩形工具”，设置“填充”为“#162aa9”，在图像左上角绘制大小为“300像素×100像素”的矩形，然后在矩形的右侧绘制“填充”为“#224ec9”，大小为“1620像素×100像素”的矩形。05打开“数据分析软件着陆页图标汇总.psd”素材文件，将其中的创建、退出、人物图标拖曳到文字的左侧，调整大小和位置，7.3.2设计导航栏内容区位于导航栏的右侧，主要展示数据内容，如数据汇总、待处理订单、逾期情况、业务员成绩排行等。在设计时可先使用矩形进行分割，然后进行各个模块的制作。制作数据汇总栏绘制矩形绘制直线7.3.2设计导航栏输入文字1绘制椭圆并添加图标7.3.2设计导航栏绘制直线绘制数据条7.3.2设计导航栏制作待处理订单版块输入文字2绘制三角形组合矩形框7.3.2设计导航栏输入业务员成绩排行版块文字业务员成绩排行版块制作逾期情况版块7.3.2设计导航栏着陆页效果目录CONTENT7.1行业知识：软件界面设计基础7.2实战案例：设计数据分析软件启动页7.3实战案例：设计数据分析软件着陆页7.4实战案例：设计数据分析软件其他页面7.5拓展训练7.6AI辅助设计案例背景+操作要点运用矩形工具、直线工具绘制图形，使用文字工具输入文字。运用波纹、油画滤镜提升图像视觉效果。案例背景操作要点某互联网公司准备在着陆页的基础上设计其他页面，如内页、详情信息页、表单页等，具体要求如下。（1）各界面设计风格与着陆页的风格统一。（2）色彩鲜明，每个部分能直观体现内容。（3）尺寸为1920像素×1080像素，分辨率为72像素/英寸。设计思路色彩风格字体规范。界面内容布局选择简约、清新的风格，以深蓝色为主，搭配紫色、绿色和黄色等颜色，并在此基础上适当进行明度和纯度变化，营造丰富、有层次感却又和谐的色彩效果。选择“思源黑体CN”为软件主要字体，方便用户识别。采用卡片型的布局方式，分区域展示内容，图7-41所示为这些页面的组成与布局。其他页面的组成与布局设计思路数据分析软件内页效果设计思路数据分析软件详情信息页效果设计思路数据分析软件表单页效果7.4.1设计内页在设计内页时，将沿用着陆页的色彩搭配，并通过图表的方式展示内容。设计命令区绘制左侧版块并绘制分割线添加图表7.4.1设计内页输入文字完成制作7.4.2设计详情信息页详情信息页主要分为3个部分，即类目、项目销售报表文字和图表。在设计时可使用矩形工具分割各部分内容，然后采用图文结合的方式对各个部分进行制作。完成命令区的制作绘制另一个椭圆并创建蒙版添加图标绘制椭圆并创建蒙版7.4.2设计详情信息页制作其他模块制作其他模块制作其他模块7.4.2设计详情信息页详情信息页的制作7.4.3设计表单页表单页在设计时可展示注册账号的流程，在左侧展示注册会员的相关信息，如姓名、邮箱、地址、学历等，在右侧通过添加图片的方式美化页面，使整个效果更简洁、美观。复制并修改内容1输入文字7.4.3设计表单页复制并修改内容2添加素材并创建剪贴蒙版7.4.3设计表单页设置波纹滤镜查看效果设置油画滤镜7.4.3设计表单页调整图像颜色目录CONTENT7.1行业知识：软件界面设计基础7.2实战案例：设计数据分析软件启动页7.3实战案例：设计数据分析软件着陆页7.4实战案例：设计数据分析软件其他页面7.5拓展训练7.6AI辅助设计实训1设计办公软件启动页实训要求:某互联网公司准备更新研发的办公软件并重新设计启动页，要求效果简洁、美观，通过文字的方式提示软件启动。尺寸为1920像素×1080像素，分辨率为72像素/英寸。实训1设计办公软件启动页操作思路:办公软件启动页设计过程①制作背景②添加素材和文字实训2设计办公软件内页实训要求:重新设计启动页，需继续设计互联网公司的办公软件内页，以直观地体现销售简报、今日提醒、产品动态、团队贡献等内容。尺寸为1920像素×1080像素，分辨率为72像素/英寸。效果简洁、美观，布局直观合理。实训2设计办公软件内页操作思路:办公软件内页设计过程①绘制不同大小的矩形②添加图标、图表和logo③输入文字目录CONTENT7.1行业知识：软件界面设计基础7.2实战案例：设计数据分析软件启动页7.3实战案例：设计数据分析软件着陆页7.4实战案例：设计数据分析软件其他页面7.5拓展训练7.6AI辅助设计TreeMind树图快速生成公司发展时间线图TreeMind树图是新一代的AI人工智能思维导图软件，它提供了智能思维导图制作工具和丰富的模板，支持包括脑图、逻辑图、树形图、鱼骨图、组织架构图、时间轴（即时间线）等多种专业格式。例如，使用TreeMind树图生成软件界面中的公司发展时间线图。TreeMind树图快速生成公司发展时间线图ProcessOn生成图书管理系统原型图ProcessOn是一款在线作图工具和社交网络平台，专注于垂直专业领域。它支持多种图形的绘制，如思维导图、流程图、UML、网络拓扑图、组织结构图、原型图和时间轴等。用户可以直接在浏览器中进行编辑，无需安装软件，从而实现便捷协作。除此之外，ProcessOn还支持实时协作，能多人同时编辑同一文档，极大提升团队协作效率。同时，还提供版本管理功能，方便用户查看和恢复历史版本，防止误操作。此外，用户还可以导入和导出Visio、PDF、Word等多种文件格式，实现与其他工具的数据交换。例如，使用ProcessOn生成图书管理系统原型图。ProcessOn生成图书管理系统原型图感谢观看THANKYOU案例学AIGC+PhotoshopUI设计（微课版）第8章

综合案例：“宛木居”

UI设计项目案例学AIGC+PhotoshopUI设计（微课版）目录CONTENT8.1“宛木居”官网界面设计8.2“宛木居”App界面设计8.3“宛木居”软件界面设计官网首页界面需包含企业标志、导航、宣传Banner、企业介绍、小区介绍、二手房介绍、页尾等信息。界面整体风格统一，配色和谐，视觉效果大气，版块划分清晰，文字易识别。尺寸为1920像素×4430像素，分辨率均为72像素/英寸。8.1.1设计官网首页设计要求：8.1.1设计官网首页设计思路：首页界面以青绿色为主色，在设计时首先设计企业标志并添加企业名称，绘制导航背景，然后输入导航文字01绘制Banner时，先绘制矩形并添加房屋相关素材，调整不透明度，使图片与矩形融合，输入文字，并在文字下方制作输入框、左右调整图标和地图图标。02输入版块标题文字并在两侧绘制装饰线。在文字下方绘制不同形状的图形，在左侧图形上方添加图片素材，在右侧输入“为你为家”文字内容，然后在下方以“图标+文字”的形式，制作查看详情图标。03复制版块标题文字到下方，并修改版块名称和文字内容，添加小区相关图片素材，并输入文字说明，为文字绘制背景并在左右两侧绘制左右图标。04绘制矩形并添加二手房相关图片，在图片的上方和下方分别输入文字内容。05添加楼盘图片，适当擦除图片顶部，使其与界面融入的更加自然。06在底部绘制页尾背景形状，添加标志、图标、联系方式等页尾内容。078.1.1设计官网首页设计思路：官网首页参考效果8.1.2设计官网内页||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||详细分类展示二手房的各类房产信息，便于用户快速查找。界面高度不限，宽度为1920像素，分辨率72像素/英寸。设计要求：8.1.2设计官网内页设计思路：内页界面以继续沿用青绿为主色，并以灰色进行搭配，在设计时首先制作导航内容，注意“二手房”文字比其他文字要大。添加前面制作的图标并修改颜色突出显示，在右侧输入文字，并在文字下方制作输入框和搜索图标。绘制浅灰色的矩形，在上方输入位置、房型、朝向、楼层、标签等文字内容，并绘制矩形框。使用矩形和直线划分内容，输入文字内容，并在左侧添加房屋图片。绘制矩形并添加二手房相关图片，在图片的上方和下方分别输入文字内容，这些内容可直接在首页中复制。采用与制作首页页尾相同的方法制作内页页尾内容官网内页效果8.1.3设计官网登录页设计要求：页面效果简洁，同时提供便捷的注册与登录功能。各部分内容布局合理，突出显示重要的内容。尺寸为1920像素×1080像素，分辨率均为72像素/英寸。8.1.3设计官网登录页设计思路：添加背景图片，在其上方输入文字并在右侧绘制按钮。绘制矩形和椭圆，将椭圆制作成渐显效果并添加企业标志，在右侧制作登录窗口，在“登录”文字和重要文字下方绘制矩形。官网登录页效果8.1.4切片与输出网页设计要求：对网页进行切片，完整展现网页。输出切片内容，并保存到单独的文件中。8.1.4切片与输出网页设计思路：切片与输出网页效果在切片时，可根据不同的版块进行切片，并命名切片后的内容，方便后期调用。导出HTML文件和图像文件，方便使用。目录CONTENT8.1“宛木居”官网界面设计8.2“宛木居”App界面设计8.3“宛木居”软件界面设计8.2.1设计App启动页设计要求：色彩明亮且具有视觉吸引力，能够凸显冬至节日氛围。选择与冬至相关的素材，如饺子、羊肉汤等，表达节日主题。尺寸为1125像素×2436像素，分辨率均为72像素/英寸。8.2.1设计App启动页设计思路：新建文件，添加背景、饺子、冬至文字图素材、Logo素材。在碗下方绘制阴影。在左上角输入文字内容。②实际应用效果①启动页效果8.2.2设计启动页动效为雪花和文字添加闪动效果。导出GIF格式的文件。设计要求设计要求：8.2.2设计启动页动效新建图像文件，并将制作完的启动页所有图层拖曳到新建的文件中。栅格化所有图层，将背景所有图层合成为一个完整的图层，然后分别合成文字对应的图层，并进行重命名，方便后期制作动画。0102打开“时间轴”面板，隐藏除背景和冬至图层外的其他图层，复制所选帧，显示除“人间小团圆”图层外的其他图层。使用相同的方法复制8个所选帧，并设置动画显示的帧内容。03调整各个帧的显示时间，其中前6个帧的时间为“0.5秒”，后两个帧的时间为“1秒”。04导出GIF格式文件。设计思路：8.2.3设计App图标设计要求：采用面性图标风格，效果要简洁、美观。图标需具有高度的辨识度和记忆点，直观地体现图标所表达的内容。图标分辨率为300像素/英寸，矢量图形。0103028.2.3设计App图标设计思路：绘制带渐变效果的圆。使用三角形工具、矩形工具绘制二手房图标。使用相同的方法，制作新房、精品公寓、短租、优惠、附件房源、找小区、个人房源等图标App图标参考效果8.2.4设计App首页设计要求：整体风格应简洁、大气，符合现代审美趋势。界面布局应合理、清晰，色彩搭配应舒适、内容体现直观。整个首页分为Banner、功能类目、二手房推荐3个部分。尺寸为1125像素×2436像素，分辨率为72像素/英寸。8.2.4设计App首页04绘制矩形并添加图片，完成后在其上方和下方输入文字。06添加标签栏图标，然后在其下方输入文字。02在Banner中输入文字内容，并在文字下方绘制5个圆，调整圆的大小和位置。03使用直线工具绘制分割线，并添加前面绘制的图标，调整大小和位置。05绘制矩形，并添加投影图层样式。01绘制椭圆并添加插画素材，添加状态栏素材和矢量素材，调整大小和位置，绘制搜索框和在框内外添加文字。设计思路：8.2.4设计App首页设计思路：App首页效果②实际应用效果①首页效果8.2.5设计App发现页设计要求：发现页的设计风格与首页统一，整体风格简洁、美观。界面布局分为房屋展示、目的地推荐、热门好房3个部分，以图片展示为主。尺寸为1125像素×2436像素，分辨率为72像素/英寸。8.2.5设计App发现页设计思路：界面布局添加状态栏素材，在其下方绘制搜索框和搜索按钮，并输入文字。矩形图蒙绘制矩形，添加图片，创建剪贴蒙版用作Banner。图标文编绘制矩形和标签栏图标，然后在其下方输入文字。App发现页效果②实际应用效果①发现页效果8.2.6设计个人中心页设计要求：采用灰色为主色，搭配绿色，整体风格统一、美观。尺寸为1125像素×2436像素，分辨率为72像素/英寸。界面分为个人信息展示、我的订单、功能区3个部分，需按照类目进行设计。8.2.6设计个人中心页使用钢笔工具绘制形状，并添加图片创建剪贴蒙版，添加状态栏素材。在形状的中间位置绘制圆并添加图片创建剪贴蒙版，在右侧绘制按钮，并输入文字内容。在下方绘制矩形，并使用圆角矩形工具、文本工具制作我的订单版块内容。制作功能区图标，并输入文字内容。绘制矩形和标签栏图标，然后在其下方输入文字。②实际应用效果①发现页效果App个人中心页效果设计思路：8.2.7标注App界面使用PxCook标注App界面。标注效果要具备完整性和美观性。0102设计要求：8.2.7标注App界面01启动PxCook，将“App界面.psd”素材文件拖曳到PxCook页面中，放大图像。02使用智能标注，设置标注操作，使用生成尺寸标注生产首页标注。03使用生成文本样式标注功能生成文字标注，注意修改文字标志的颜色为绿色。04使用相同的方法，生成其他页面的标注。05将生成后的标注进行导出操作。设计思路：8.2.7标注App界面设计思路：标注App界面参考效果目录CONTENT8.1“宛木居”官网界面设计8.2“宛木居”App界面设计8.3“宛木居”软件界面设计8.3.1设计软件启动页设计要求：效果简洁、美观，通过文字的方式提示软件启动。1尺寸为1920像素×1080像素，分辨率为72像素/英寸。3其背景要与企业的定位相符，展示企业理念和软件的主要功能。28.3.1设计软件启动页设计思路：