用户界面规划
用户界面规划概述
用户界面界说
用户界面(User Interface)泛指用户与体系之间进行交互所选用的方法、途径、内容、布局及结构的总称。它是体系和用户之间进行交互和信息沟通的媒介。
用户界面作用
- 用户界面作为信息体系软件的表示层构件,它们的根本作用是完结体系功用操控操作、数据输入/输出。
- 用户界面使得用户与体系之间完结人机交互,并将信息进行表达与展现。
用户界面类型
杰出界面应具有的特性
- 易用性:软件运用简略、操作便利。用户不用查阅协助就能了解界面功用,并能引导用户完结事务功用操作。
- 灵敏性:用户可定制界面风格、界面功用、界面信息。支撑用户灵敏运用功用。
- 安全性:可保证用户正确地运用体系,并保证数据安全操作。
- 艺术性:软件界面美观、可运用户爽心悦目。
用户界面规划
用户界面规划是指对信息体系的界面安排结构、界面布局、界面视觉、人机 交互等方面的全体规划。
用户界面规划方针:
用户界面不只需完结信息体系功用操作,还需使信息体系软件操作变得友好、舒适、简略、便利,一起运用户获得好的操作体会。
用户界面规划准则
1.用户能有用操控体系
- 界面应该操作简略,大多数操作从开端到履行不多于3次鼠标点击
- 供给灵敏的人机交互
- 允许交互被中止或吊销
- 允许有经验的用户以便利方法操作
- 允许用户对出现在屏幕上的方针直接操作
2.削减用户的记忆负担
- 界面规划应记忆曩昔的动作和成果需求
- 树立有意义的缺省
- 界说有意义的捷径
- 界面的布局应根据实际国际的直观展现
- 以不断发展的方法提示信息
3.坚持界面一致性
- 在运用系列内坚持一致性
- 运用户履行一个功用时,能够猜测将会发生什么
4.界面有用与美观
- 界面不只需有用,还应经过精心的布局、色彩、字体和空白来吸引用户
- 界面应该爽心悦目和契合用户预期心思
5.界面客户化与个性化
- 针对不同类型用户,能够进行功用裁剪与流程界说,使信息体系能完结客户化定制需求。
- 为用户供给个体偏好的界面风格和布局设置,给用户带来可控性和个性化体会。
用户界面规划标准
1.一致性标准
-
体系各个用户界面的风格、界面布局、界面的交互方法应坚持前后一致，遵从统一的规划标准。用户不需求太多训练就能够便利运用信息体系。
-
体系界面的色彩、文字、图标、图片、空间等视觉规划应坚持前后一致，并契合体系运用领域主题
2.准确性标准
- 运用与运用领域相符的界面风格，显现信息的含义应该非常明晰，避免给用户发生歧义。
- 显现有意义的犯错信息，而不是单纯的程序过错代码。
- 避免运用文本输入框来放置不行编辑的文字内容。
- 运用补白说明来辅助了解。
3.界面布局标准
- 在进行UI规划时需求充分考虑布局的合理化问题，遵从用户从上而下，从左至右浏览与操作习气。
- 避免将功用按键摆放过于涣散，以造成用户鼠标移动距离过长的弊端。
- 多做“减法”处理，将不常用的功用区块躲藏，以坚持界面的简洁，运用户专心于首要事务操作流程，有利于进步软件的易用性及可用性。
4.体系操作标准
- 在查询条件输入框内按回车应该自动触发查询操作。
- 在进行一些不行逆或许删去操作时应该有信息提示用户，并让用户承认是否持续操作，必要时应该把操作造成的成果也告知用户。
- 信息提示窗口的“承认”及“取消”按钮需求别离映射键盘按键“Enter和“ESC”
- 避免运用鼠标双击动作，不只会增加用户操作难度，还或许会引发用户误会，认为功用点击无效。
- 在表单录入时，需求把输入焦点定位到第一个输入项。用户经过Tab键能够在输入框或操作按钮间切换，并留意Tab的操作应该遵从从左向右、从上而下的次序。
5.体系呼应时刻标准
- 体系呼应时刻应该适中，呼应时刻过长，用户就会感到不安和沮丧，而呼应时刻过快也会影响到用户的操作节奏，并或许导致过错。
- 提交请求处理应在3秒内完结，窗口应立即给出处理成果信息。
- 提交请求处理在3秒以上完结，需在处理呼应窗口中显现进度条。
- 当一个长时刻的处理完结时，应给出一个完结消息显现。
用户界面规划内容
1.界面结构规划
界面结构规划是对用户界面体系的组成结构与操控联系进行规划。经过规划的界面结构图能够将体系一切的屏幕界面、表格和报表等组成元素联系起来，展现出体系的界面安排结构。在界面结构规划中，给出信息体系用户界面的层次结构联系和界面操控联系，然后将体系功用结构经过界面结构有用安排与出现出来。
2.界面交互规划
界面交互规划是对用户完结功用操作的交互过程进行规划。信息体系功用服务一般需求用户经过操作来完结。用户在功用操作中需求与体系界面进行交互才干完结功用处理。因而，在规划用户界面时，需求针对每个功用的履行，给出交互逻辑规划。
3.界面导航规划
一个信息体系一般有很多用户界面组成，这些界面需求有导航机制才干协助用户操作运用，否则用户将淹没在界面交互的杂乱链接联系中。在用户界面导航规划中，需求选用导航机制来协助用户定位，告知用户“从哪里来”、“现在在哪里”、“能够去哪”。
4.界面视觉规划
界面视觉规划是指在用户界面中经过运用恰当的视觉要素 (如色彩、文字、图片、空间) 满意用户功用需求和心思需求。一个出色的界面规划，必定是将这些要素做到了酣畅淋漓。
5.界面布局规划
界面布局规划是指对界面内各元素的方位安排与分布来出现内容。界面布局的方针是进步用户爱好、便利用户操作。用户界面中布局方法直接影响着运用者视觉和操作两方面的用户体会。
用户界面规划流程
Web体系GUI规划
Web全体页面结构界说
Web全体页面结构是指衔接Web体系一切页面的全体结构模型，它决定了体系 功用模块安排、页面导航路径、人机交互联系。
全体页面结构类型
1.线性结构
Web体系的页面交互选用次序流程时，页面之间结构便为线性结构。当页面交 互有分支时，线性结构则为带有挑选流的线性结构。
长处:页面之间相关结构简略，简略完结导航操控。
缺陷: 页面之间相关单一，完结较杂乱的人机交互需耗用更多时刻。
2.分层结构
当Web体系的页面结构除了在笔直方向上支撑操控流程外，还能够在水平方向 完结操控流程时，页面之间的这种结构便称为分层结构。
长处:页面之间相关结构较简略，经过水平相关分支简略完结快速导航。
缺陷: 若用户界面没有明晰的导航机制，或许会给用户带来更多寻径时刻。
3.网络结构
在Web体系中，页面之间除了上下左右有相关外，还有跨层衔接，则页面之间 的联系成为网络结构联系。
长处: 页面之间相关灵敏，经过互相相关简略完结快速导航。
缺陷:若用户界面没有明晰的导航机制，用户或许会迷失在网络迷宫。
页面布局规划
页面布局规划是指页面板块及元素的结构分布。页面布局的方针是规划页面 中各版块的内容出现、便利用户操作。
1.一栏式页面布局
长处: 1) 页面布局结构简略，用户视觉流明晰;2) 信息展现集中显现，用 户能够迅速找到页面中重点内容。
缺陷: 排版方法遭到局限，页面内容可承载的信息量小。
2.两栏式页面布局
两栏式页面布局是一种除页头和页脚外，将页面分为导航版块和信息展现版 块，并进一步细分为左窄右宽式、左宽右窄式。
长处:相比于一栏式布局，两栏式布局能够包容更多信息内容; 用户可经过导航版块链接选取，切换信息展现版块内容。
缺陷:排版方法遭到局限，页面不具备超大内容量出现和视觉冲击力。
3.三栏式页面布局
三栏式页面布局也将整个页面分为导航版块和信息展现版块，但它细分为两窄一宽式、两宽一窄式。
长处:相比于两栏式，三栏式页面布局能够尽量多地展现信息内容经过导航版块链接选取，能够切换信息展现版块内容。
缺陷:排版方法会造成页面上信息的拥堵，用户查找方针信息花费更多时刻，一起页面内容的可控性降低。
页面导航规划
当Web体系的页面结构和页面布局承认之后，规划人员便可开端进行页面导航 规划，其方针是运用户能够便利地拜访Web体系各个功用页面。在页面导航设 计中，需求界说Web体系的导航结构、导航机制和导航语义。
1.导航结构作用
导航结构作用便是告知用户拜访体系的页面链接结构，当时在哪个页面，如 何到达哪些其他页面。
2.导航结构类型
水平栏目导航
- 在页面头部区域版块中，选用水平栏目导航主菜单，完结功用页面一级导航。在一级菜单下，还能够扩展二级菜单。
- 水平栏目导航主菜单的区域长度受限，其一级导航菜单数目有限。
- 适用于事务简略，功用较少的信息体系。
笔直栏目导航
- 在页面的左边区域笔直给出主菜单栏目，它们完结功用页面一级导航，也可扩展二级导航。
- 笔直方法层级拓展性强，可支撑更多栏目数，但削减了信息展现版块宽度，易受客户端显现器影响。
- 适用于体系功用较多，需求频频切换功用页面的信息体系。
混合栏目导航
- 混合栏目导航一起在页面的顶部区域和左边区域给出栏目导航菜单。
- 混合栏目导航方法层级与栏目扩展性强，适用于功用模块多且杂乱度较高的信息体系。
页面内容导航
-
典型的页面内容导航方法有面包屑导航、超链导航、Tab标签导航等。
-
页面内容导航可供给更灵敏的页面导航方法，适用于页面功用较多、交互联系杂乱的人机交互。
3.导航机制
导航机制是指Web体系供给的页面导航元素及使能方法。
典型的页面导航元素有NavMenu导航菜单、Breadcrumb (面包屑) 导航链 接、Tab导航标签、超文本导航链接、导航面板等。
导航使能方法一般为用户在导航元素上触发的事件，如鼠标点击或便利按键操作。当事件出现后，依据导航元素相关的链接进行页面跳转。
NavMenu导航菜单
面包屑导航链接
Tab标签导航
4.导航语义
导航语义是指用户完结体系一个功用操作的页面导航流程。
例：在登录页面中，若用户忘掉暗码，能够经过“暗码找回”功用重置用户暗码。其“暗码找回”链接导航语义的流程为:
- “在登录页面中点取“暗码找回”链接
- 在暗码找回页面中输入用户账户和邮箱信息
- 体系发送重置暗码邮件
- 在邮件界面中点取重置页面链接
- 打开重置暗码页面
- 在重置暗码页面中输入新暗码和承认暗码
- 体系显现暗码修正成功操作页面”
页面输入规划
在Web体系中，数据输入是经过页面表单输入来完结的。页面表单是Web页面中一种用于安排数据输入到Web服务器的前端控件容器，它能够包含文本输入框、复选框、单选按钮、列表框、文件域、按钮等控件。
1.文本输入框
文本输入框是一种用于在表单中输入文本内容的控件。在文本输入框控件特色中，能够界说输入文本为固定长度的字符串，也可不约束文本长度。
- 文本输入框能够有单行文本输入框、暗码输入框、多行文本输入框，以及数字输入框等类型。
- 在文本框控件特色中，还可限制输入数据格式，这样输入数据能够进行格式校验检查。
- 在表单规划时，需求在文本输入框前，增加文本标签，用于提示用户输入什么数据内容。
2.复选框
复选框在表单中用于出现多个输入选项列表。用户能够在复选框中挑选多个选项，作为表单的输入数据。
- 当用户提交表单履行后，已挑选的复选框值被输入到体系进行处理。
- 在Web页面表单规划时，复选框标签依照必定次序放置。
- 每个特定的选项序列一般不超越20个复选项。
3.单选按钮 在表单中，单选按钮是一种用于输入单个选项值的控件。单选按钮出现一个完好的、互斥的选项列表，每个选项前都有一个小圆圈。
- 在Web表单规划时，单选按钮标签依照必定次序放置。
- 每个特定的选项序列运用不超越6个单选按钮。
4.列表框
列表框在表单中用于列表选项输入。在列表框中能够挑选单个选项或多个选项。运用列表数据输入，能够便利用户快速输入，并避免过错数据输入。
5.文件域
文件域在表单中用于文件上传输入。文件域控件允许用户从操作体系文件目录中选取文件上传。
在文件域控件特色中，能够限制上传文件类型或文件大小，以保证输入体系的文件有用性。
6.按钮
在表单中，按钮是一种用于发生事件，触发履行表单脚本程序的控件。它一般用于表单数据提交体系的输入处理。
- “提交”按钮的点击事件用于触发表单提交脚本程序履行，完结输入数据写入体系。
- “重置”按钮的点击事件用于触发铲除数据脚本程序履行，完结表单输入域数据的铲除处理。
7.表单输入数据校验
为了保证表单输入到信息体系中的数据是有用的，一般需求在页面表单中编写脚本程序，对输入数据进行校验检查。
页面输出规划
在任何信息体系中，成果数据输出都是信息体系应供给的根本功用。无论是在屏幕显现、报告打印、音视频出现，还是数据文件输出，它们均可为用户供给成果数据输出服务。
在Web体系中，页面数据输出有多种完结方法:
- 数据列表输出
- 数据报表输出
- 数据图形输出
- 数据文件输出
1.数据列表输出
在Web体系中，数据列表输出是一种最根本的页面输出完结方法，它能够将数据直接在页面中以列表方法输出。
-
Web数据列表输出具有结构简略、分隔明晰、易于用户快速扫描浏览并获取所需信息等特色。
-
在数据列表交互层面，Web数据列表能够为用户供给数据信息排序、搜索、筛选，以及相关事务功用处理等操作。
2.数据报表输出
数据报表也是一种以表格方法出现成果数据的输出方法，但它与数据列表相比，能够供给更杂乱的数据计算处理，其表格方法多样化，并可支撑打印或文档输出。在信息体系中，数据报表运用非常遍及，它们为用户供给各类数据计算成果信息，能够支撑事务办理与决议计划服务。
3.数据计算图输出
数据计算图输出是一种对用户直观的数据可视化出现方法。在页面输出数据时，能够采多种图形(饼图、直方图、条形图、曲线图、散点图、雷达图、面积图等) 方法给出数据计算信息。
- 在该页面输出信息中，首要选用饼图方法给出用户在7月份的话费消费构成数据。
- 经过该图展现信息，用户能够很简略地分分出话费的消费构成和各项的数据比例联系。
Web体系GUI规划事例
针对一个课程学习点评体系的教师用户子体系，规划课程班级的学生学习成绩办理、课程学习成果到达剖析，以及课程试卷剖析报告等功用Web界面。
在规划该子体系界面时，选用原型开发工具Axure RP别离对体系页面结构页面布局、页面导航、页面输入、页面输出等界面内容进行建模规划，然后为开发课程学习点评子体系界面给出规划蓝图与原型方案。
1.Web体系页面结构规划
2.Web体系页面布局规划
3.Web体系页面导航规划
4.Web体系页面输入规划
5.Web体系页面输出规划
6.Web体系页面完结成果
移动App软件GUI规划
移动App软件界说
移动App是指根据移动终端设备 (如智能手机、平板电脑、可穿戴设备等)的运用软件。移动App已广泛运用在信息体系中，成为用户遍及运用的运用软件。
移动App软件与桌面软件差异
移动App软件与传统的电脑软件有较大不同，它根据有限软硬件资源的移动终端运转，而且需求面临多种终端屏幕、多种终端操作体系、多种运用场景、无线通信网络、很多用户拜访的杂乱运用情况。
移动App软件界面规划挑战
- 规划一个习气多种屏幕尺度、不同像素分辨率、不同嵌入式硬核技术、不同操作体系环境的移动App运用界面具有必定难度。
- 充分利用移动终端传感器为用户界面供给很多灵敏交互是有难度的，而且在规划阶段进行处理会是一个挑战。
- 移动终端设备的运转资源 (CPU、内存) 是有限的，针对一个需求较多数据处理的App运用来说，规划一个快速运转的App用户男面具有较大挑战性。
- 移动运用商场正在快速改变。立异性和创造力使这个生态体系高度活泼。因而，移动App用户男面规划需求不断立异。
移动 App 软件界面规划准则
-
环境恰当准则——信息的表达需求契合真实国际场景、用户心思预期和运用习气等。
-
易取准则——移动 App 的体系信息内容与操作控件可视化展现，可降低用户的记忆负担。
-
美丽简约准则——为了让用户快速获取有用信息，能够选用简约规划准则。
-
人性化协助准则——恰当的信息提示，为用户供给导引协助。
-
用户可控准则——用户对体系的页面操作与运用自主可控，以用户为中心安排功自界面。
-
灵敏高效准则——支撑用户快速高效到达方针。
-
防错准则——恰当的风险提示能够避免用户过错操作，重要操作需求二次承认。
-
容错准则——用户可撤销、重做，恢复至原样。
-
体系状况可见准则——用户知道当时地点方位，可操作性和体系反馈均有视觉提示。
-
界面一致性准则——界面风格、视觉语言与反馈效果前后具有一致性。
全体界面结构
在移动 App 软件 GUI开发中，首要需求规划体系全体界面结构，将 App 各个界面依照必定结构（如思维导图）安排起来，让用户了解 App 功用界面结构。
<img src="https://www.6hu.cc/storage/2023/12/226968-gvv984.png" alt="image-20231214165329700” loading=”lazy”>
界面布局规划
移动 App 界面布局规划是指在 App 界面中对内容文字、表格、图形、图像、视频等元素进行版面排布规划。它需求对界面主题内容、界面信息展现方法、用户行为心思、用户功用操作灵活性等方面进行全体考虑。
- App 界面的内容版块布局一般选用笔直分布，从上到下依次进行摆放发动页、导引页、主页、内容页、设置页的布局有必定不同。
- 不同内容版块的界面内容需求以空隙进行区别（如 20p 距离）
- 若某些界面元素自身带有用果，能够有用区别不同内容，内容版块之间则无需空隙。
界面导航规划
界面导航是移动 App 用户界面中不行短少的组成部分，它们引导用户抵达方针界面。移动 App 用户界面导航首要有标签导航、宫格导航、列表导航、抽屉式导航、轮播导航等多种方法。
1.底部标签导航
底部标签导航坐落界面底部，选用文字加图标的方法展现，一般有 3 一 5 个标签。它合适在相关的几类中心功用模块中频频地切换运用。
-
长处：运用户清楚当时地点的进口方位；直接展现最重要进口的内容信息。
-
缺陷：标签不宜超越 5 个，否则简略涣散留意力增加用户挑选难度。标签图标会占用必定的显现面积。假如用户运用小屏幕手机，用户体会不是太好。
2.顶部 底部双标签导航
假如界面内容分类与维度较多，可选用顶部和底部结合的标签导航方法。例如，腾讯新闻和网易新闻这种新闻类 App ，选用了顶部导航 底部导航结构，且参加手势切换的操作，便利用户在高频的标签中快速切换，能带来更好地阅览体会。
- 长处：运用户清楚当时地点的进口方位；直接展现最重要进口的内容信息。
- 缺陷：最多 5 个标签。占用必定的高度，一般是图标加文字，假如用户运用小屏幕手机，用户体会不是太好。
3.舵式标签导航
当界面有处于同一层级的几大部分内容，一起又需求一个非常重要且频频操作的进口时，能够选用舵式标签导航。舵式标签导航能够看为底部标签式导航的一种变体。它在后者的基础上，强调了一个高频中心功用，而且放在中间。
- 长处：需求杰出重要且频频操作的进口。
- 缺陷：同标签导航，最多 5 个，功用进口过多时，该模式显得笨重不有用
4.宫格导航
宫格导航将首要进口全部聚合在页面内，让用户全体了解 App 的服务，然后挑选自己需求的服务。各个进口之间彼此独立，没有太多的交集，无法跳转互通。
- 长处：导航类目明晰，页面可包容多种类目，便利快速查找。
- 缺陷：信息独立，无法彼此通达；不能直接展现进口内容，只能点击进去才干获悉，简略构成更深的路径。
5.列表导航
列表导航首要用于等级不多，标题内容较长的进口。它一般用于二级界面，不会默认展现任何实质内容。这种导航结构明晰，易于了解，能够协助用户快速定位相应界面。
- 长处：层次展现明晰，可展现内容较长的标题，可展现标题的次级内容。
- 缺陷：同级过多时，简略发生疲劳；排版灵敏性不高，只能经过摆放次序、颜色来区别各进口重要程度。一屏承载不下，用户需求下拉才干操作。
6.抽屉式导航
抽屉式导航与常用主导航调配，作于次级导航。因为抽屉式导航的中心便是”藏”，躲藏低频操作的功用，如设置、关于、会员等功用，运用频率少，让中心功用愈加杰出。抽屉式菜单躲藏在当时界面后，只要侧面滑动或许点击进口就能将其拉出来，削减了主界面中导航控件的数量，让主界面愈加干净利落。
- 长处：节省界面展现空间；让用户留意力聚集到当时界面；扩展性好；不用担心小屏手机用户体会问题。
- 缺陷：不合适频频切换的运用。次级功用进口比较躲藏，用户不简略发现，一起次级功用需求二次点击，增加用户操作时刻。
7.轮播导航
轮播导航也是一种常见的导航方法，运用者能够向左或许向右滑动进行快速切换界面，比较合适界面层级较低的交互，简直不需求进一步的交互。
- 长处：一般不需求用户更多的点击操作，合适层级简略的运用，一个界面根本就能满意需求。
- 缺陷：不合适交互杂乱的 App 。
交互规划
在 App 运用中，交互是指用户与 App 运用之间发生的一系列操作与信息反馈。 App 运用交互规划是界说用户与 App 运用之间沟通的内容和结构，使之互相配合，共同到达某种目的。
1.移动 App 交互规划与运用交互规划差异
- 用户与界面交互方法不同
- 设备尺度不同
- 运用环境不同
- 网络环境不同
- 通知方法不同
- 根据方位服务的精密度不同
2.移动 App 交互流程规划
交互流程规划是对用户完结任务的交互点整理，并规划交互操作流程，以到达让用户顺畅地完结相关任务功用。
App 体系界面规划事例
针对一个课程学习点评体系，选用手机微信小程序 App 方法完结课程学生学习过程成绩检查、课程学习成果点评等服务功用。
在规划该 App 用户界面时，能够选用原型开发工具 Axure RP 别离对体系页面结构、页面布局、页面导航、页面交互等用户界面内容进行建模规划，然后为开发课程学习点评微信小程序 App 供给规划蓝图与原型方案。
1.App 体系页面结构规划
2.App 体系页面布局规划
3.App 体系页面导航规划
4.App 体系页面交互规划
5.App 体系页面完结成果
课堂作业与作业练习
单选题
1.在信息体系中，下面哪项不是用户界面功用?（C）
A.功用履行
B.状况检查
C.数据存取
D.输入/输出
2.下面哪项不在界面布局元素范围中? （B）
A.菜单
B.导航联系
C.按钮
D.列表
3.下面哪种页面结构合适电商Web体系? (C)
A.线性结构
B.分层结构
C.网络结构
D.以上均可
4.新闻类Web体系页面导航一般选用哪种方法? （D）
A.水平栏目导航
B.笔直栏目导航
C.混合栏目导航
D.页面内容导航
5.下面哪项不属于界面交互流程规划的过程? （C）
A.任务承认
B.场景整理
C.界面布局
D场景流程增加
二、判断题
1.信息体系的功用是经过用户与体系界面交互来完结的。（√）
2.人的视觉规则是以中心为重点向四周发散。 （ ⅹ ）
3.在具体界面规划前需求进行体系原型规划。（ √ ）
4.输入数据格式校验是经过履行检查程序来完结的。（ √ ）
5.页面的数据列表能够打印输出。 （ ⅹ ）
三、填空题
为削减用户记忆负担，在界面上能够给出场景导引、默认值、（历史信息出现）等提示。（或许填下拉列表值 / 便利方法 / 逐次推动的提示方法 ）
用户界面规划一般包含界面结构规划、界面交互规划、界面导航规划、界面视觉规划和（界面布局规划）。
Web页面导航首要有水平栏目导航、笔直栏目导航、混合栏目导航和（页面内容导航）。
在移动App页面布局规划中，需求对页面信息内容、页面主题内容、用户行为心思和（用户功用操作）进行全体考虑。
在手机App页面布局规划中，页面能够分为背景层、内容层、悬浮层和（弹出层）。
