高二机工社UI设计项目教程课件学习单元5项目2：企业后台管理系统界面设计

学习单元5——计算机软件界面设计. UI设计项目教程 单元概述 计算机客户端UI是非常重要的人机互动用户界面。由于计算机端和移动端在显示方面有很大的差别，所以在UI设计的过程中，需要注意区分不同客户端的设计规范的差异。本单元通过两个具体的计算机端软件UI设计的例子，展示了计算机端软件UI设计流程、设计规范及软件使用，通过本单元的学习，读者能够对计算机端UI设计有一定的了解和掌握。 学习目标 1．通过项目制作，掌握计算机端UI制作的流程和设计规范 2．通过项目制作，学习网页界面设计制作规范 3．通过案例学习Web产品的制作规范应用 企业后台管理系统界面设计 项目2. TWO 项目描述 本项目主要任务是帮助客户设计企业后台管理系统界面，企业后台管理系统不仅要满足大部分的日常管理工作，如经营活动、员工管理、日程安排和工单等，还要通过分析账目中的数据，找出问题并改善经营，有效提高企业的利润。 UI设计项目教程 任务1：设计前期准备 一款软件产品包含了战略层、范围层、结构层、框架层、表现层。而作为UI设计师，表现层是其工作的主要内容，这里说的“表现层”是指视觉设计层面。 在界面的视觉设计中包含5个视觉要素：色彩、文字、图标、图片、空间。 UI设计项目教程 任务1：设计前期准备 我国的Ant Design、Element等公司的产品已经实现了端到端的体验一致，把交互、前端和视觉的事情一并解决了，是值得学习的典范，这些优秀的设计规范都包含以下几个特点： 灵活（Flexible）；  可拓展（Expansive）；  系统的（Systematic）；  标准的（Standard）。 UI设计项目教程 任务1：设计前期准备 菜单和功能分析 首先，对Web页面的层级进行梳理，包括底层、内容层、导航层、菜单层、插件层和弹窗层。搭好基础框架后，所有的控件组件都会在这个框架内搭建。搭好框架，除了方便设计师自己去清晰地理解系统，也有助于与前端开发高效交流，例如，在做模态弹窗时，如果没和开发端交流好，只说弹窗写在了菜单操作的位置，就有可能出现问题。 UI设计项目教程 任务1：设计前期准备 菜单和功能分析 分析好Web页面架构所需要的层级后，开始为系统设计实用的菜单和关键信息位置。首先需要了解企业的需求，需要系统包含什么功能，如财务账单电子化查看、每日销售数据查看、报表查看、员工信息查看等；在销售数据中又需要突出哪些重点信息，如新增会员人数、用户量、订单与用户比例等。 UI设计项目教程 任务1：设计前期准备 布局设计 初步确定好布局内容 UI设计项目教程 必备知识 网页界面设计常识 1.常用字体简介 中文字体种类大致分为：宋体、黑体、仿宋、楷体、其它（变体字） 。西文字体种类大致分为：无衬线体、罗马正体或衬线体、意大利斜体、手写体、黑字体（哥特体）。 2.字体使用规则　在Windows系统中，常用字体有微软雅黑、黑体、宋体等，最小字号推荐使用12px，正文字号推荐使用14px，标题字号推荐使用18px、20px、24px、28px、32px等，尽可能使用偶数。行间距一般为字号的1.5～1.8倍。在Mac OS系统中，常用中文字体有苹方体、思源黑体、华文细黑等，英文字体有Helvetica、SanFrancisco 等。 3.运用字体库实现图标　在管理系统的一些内部功能页面中，运用创新的图标并不是那么多，借字体库就能实现简单对应的图标功能。前端开发人员也可调用字体库实现图标展示。例如，常见的字体库fontawesome就能提供可缩放的矢量图标，可以使用CSS所提供的所有特性对它们进行更改，包括大小、颜色、阴影或者其它任何支持的效果。 UI设计项目教程 任务2：　主界面功能模块设计 1．统计数据表制作 UI设计项目教程 任务2：　主界面功能模块设计 2．绘制用户分析的饼图 UI设计项目教程 任务2：　主界面功能模块设计 展示整个系统完整布局和首页界面 UI设计项目教程 必备知识 设计规范：适用于Web产品线的人机交互界面设计的指导手册。贯穿以用户为中心的设计指导方向，根据Web产品的特点制定出的一套规范，以达到提升用户体验、控制产品设计质量、提高设计效率的目的。 1．规范的意义 （1）统一识别　设计规范能使页面相同属性单元相对统一，防止混乱，甚至出现严重错误，避免用户在浏览时理解困难，减少用户的使用难度。 （2）节约资源　除了活动推广等个性页面外，设计其他页面时使用本规范标准能极大地减少设计时间，达到节约资源的目的。 （3）重复利用　相同属性单元、页面新建时可以执行此标准，有利于阅读和信息传达，减少对主体信息传达的干扰。 （4）上手简单