案例学AIGC+Photoshop UI设计课件 第7章 软件界面设计

第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、网络拓扑图、组织结构图、原型图和时间轴等。用户可以直接在浏览器中