《UI界面设计》课件第五章 应用软件界面设计.pptx

UIDESIGN主编：殷辛、李茜

第一节了解应用软件界面设计第二节应用软件界面主要类型第三节应用软件界面面板设计第四节应用软件界面设计规范第五节应用软件界面设计风格UIDESIGN

一、应用软件界面设计概述Windows图形界面的出现标志着可视化界面时代的来临。由此，计算机用户不必通过专业的学习就可以根据图形、图像了解应用软件。软件界面设计逐渐成为用户与计算机之间交流的重要介质，在软件设计发展过程中越来越受重视。微课视频

一个美观的、友好的界面搭配亲切的文案，会给用户带来舒适的视觉体验，提升用户体验效果，使应用软件不再是冷冰冰的工具，而是带有情感的产品。

二、应用软件界面设计要点简洁、易用。操作通用性。风格一致。布局合理。操作灵活。人性化。良好的菜单设计。

第一节了解应用软件界面设计第二节应用软件界面主要类型第三节应用软件界面面板设计第四节应用软件界面设计规范第五节应用软件界面设计风格UIDESIGN

一、启动页面当用户打开一个应用软件等待程序启动时，可以使用一个欢迎画面来代替软件数字编程的加载，以提高用户对软件的好感。

二、引导页面优秀的应用软件的引导页面能够迅速吸引用户，使用户快速了解软件的价值和功能，起到良好的引导作用。引导页面主要有功能介绍型、情感带入型、趣味吸引型3种类型。

（一）功能介绍型功能介绍型引导页面是最基础的一种引导页面，在短时间内使用通俗易懂的文案与图形向用户呈现产品的基本功能信息。

（二）情感带入型情感带入型引导页面往往通过文案与图形相结合的形式形成形象化、生动化、立体化的界面，达到产品预热效果，引导用户去思考软件的价值。

（三）趣味吸引型趣味吸引型引导页面不仅会向用户传达应用软件的功能信息，而且会通过设计效果或动画效果，在传递信息的同时增强页面的趣味性，从而增加用户阅读量。

三、首页如图所示的MicrosoftStore首页界面设计，采用列表形式，在一个页面上展示同一级别的分类模块。模块由标题文案和图形、图像组成，方便用户点击操作，上下滑动鼠标可查看更多内容。

四、个人中心页面个人中心页面又称为“用户中心”，主要用于设置用户功能。现在主流应用软件的个人中心页面主要由头像、个人信息和内容模块组成，通常采用用户头像居中对齐或居左对齐的方式进行设计。

五、列表页面在使用软件进行搜索或点击分类查找后会出现结果页面。结果页面通常以列表的形式呈现，展示内容常为“图片或图标+名称+介绍”，最常见的是文件夹列表页面。

六、详情页面详情页面是应用软件给用户提供详细信息的页面，多用于电商类、阅读类、下载类应用软件。页面通常根据软件特性选择以文字为主或以图片为主，内容较丰富。

七、可输入页面在应用软件中，文本输入页面是必不可少的。这类页面要做到简便、易用。可输入页面须实时反馈用户输入字符位置，并明确显示输入信息。页面设计应多考虑输入框的宽度是否易于操作，字符大小是否合适，以及字符是否显示清晰。

第一节了解应用软件界面设计第二节应用软件界面主要类型第三节应用软件界面面板设计第四节应用软件界面设计规范第五节应用软件界面设计风格UIDESIGN

一、合理安排面板功能区域软件面板虽然在软件界面中只占据一小部分，但会影响用户对软件的整体评价。软件面板与软件其他界面一样，应遵循美观、易用原则，给用户带来舒适的交互体验。微课阅读

二、软件面板的设计原则简洁、有序。及时反馈。合理使用图形。合理使用色彩。合理使用缩放窗口。

第一节了解应用软件界面设计第二节应用软件界面主要类型第三节应用软件界面面板设计第四节应用软件界面设计规范第五节应用软件界面设计风格UIDESIGN

一、应用软件界面的屏幕显示（一）文字用语在应用软件界面设计中，文字用语尽量避免使用专业术语，文字内容不宜过多，一定要简洁明了，使用户了解界面信息。

（二）界面构图1.九宫格构图九宫格构图主要运用在以分类为主的一级界面中，起到功能分类的作用。在界面设计中，常根据水平方向和垂直方向划分所构成的辅助线进行界面布局。

2.圆心放射构图在界面设计中，圆心放射构图通常起到聚焦和凸显的作用。在强调核心功能时，可使用这种构图方法，以当前主要功能点为中心，将其他按钮或内容放射性布置。

3.三角形构图三角形本身具有稳定性，将三角形构图运用在文字与图标的版式设计中，可以让界面在视觉上保持平衡与稳定。

（三）界面版率在界面设计中，除了文字之外，通常都会加入图片或插图等直观内容。这些视觉要素所占面积与整体页面之间的比率就是界面版率。简单来说，界面版率就是界面中图片面积、文字面积所占的比例，会对页面的整体效果和其内容的易读性产生巨大的影响。

1.单色块填充