2-3 一目了然-可见性原则

技能补强一目了然——可见性原则汇报人：xxx时间：202601任务说明任务说明技能补强你有没有发现，有些看似简单的网页反而更能获得用户的青睐和广泛的好评。这正是可见性原则在网页设计中的关键作用体现——它通过清晰、及时的反馈帮助用户更好地理解系统的当前状态。可见性原则（VisibilityPrinciple）要求每一个用户操作都能得到明确的响应，页面上的信息层级清晰，能确保用户可以轻松掌握当前所处的位置和操作的反馈。这不仅是网页设计的基础，也是在实际应用中提升用户体验的核心要素。接下来详细剖析可见性原则的具体应用与其对用户体验的深远影响。知识准备02关于可见性原则知识准备(1)可见性原则要求系统向用户提供及时的反馈，使用户清楚地了解系统当前的状态。简而言之，用户的每一个操作都应该有明确的响应，系统的状态变化应该直观地呈现，避免让用户感到迷茫，因此网页设计至少要符合以下4个规定。让用户知道系统在做什么让用户知道系统做了什么让用户知道自己处于系统的什么位置让用户知道自己在做什么关于可见性原则知识准备（2）生活中的可见性原则：“可见性原则”在日常生活中的应用相当广泛，我们举几个实际生活中的例子：电梯楼层指示灯：电梯中的楼层指示灯通过显示当前楼层，用户随时可以知道电梯到达哪个楼层，避免不必要的焦虑。通过清晰的反馈，乘客了解电梯的运行状态。手机电量提示：智能手机通过顶部电池图标显示电量，在低电量时弹出警告。这让用户能提前做好准备，如充电或关闭不必要的应用。交通信号灯：信号灯通过灯光的变化，向司机和行人传递明确的交通信息。这是一种典型的可见性原则，帮助人们及时了解何时该停、走或等待。任务实现03任务实现01可见性原则在实践任务中的体现在前三个任务中，我们设计一个“社团管理”网页，其中有一些设计元素符合我们现在所讨论的可见性原则，例如：（1）导航栏：导航栏效果如图，包含“社团简介”“社团部门”“志愿者活动”等选项，每个选项都有明确的链接页面，便于用户能够快速找到相关内容。这个设计符合可见性原则，因为它帮助用户明确可以访问哪些页面。（2）进度条：侧边栏中的志愿者招募进度使用<progress>标签来显示不同活动的进度，且数值越大，颜色越深。这是一种直观的反馈，能够让用户清楚地看到每个活动的进展，这非常符合可见性原则，因为通过可视化的元素展示了信息状态。（3）表单反馈，亟需升级：当前网页的表单部分缺乏即时反馈，用户提交信息后，页面没有告知提交结果，容易让用户感到困惑。建议添加提交后的确认提示框，或者在表单下方加入实时验证功能，让用户一目了然地知道哪些字段填写正确，哪些需要修改。我们可以利用AI编程助手（如“通义灵码”）生成相应的CSS代码，让表单输入框在没有内容或者填入格式有误的时候出现颜色反馈（通常为红色）或文字提示。如左右两图所示：任务实现02可见性原则的业内最佳实践在网页设计中，许多优秀平台都很好地遵循了可见性原则，通过清晰的视觉反馈（如图2-3-5所示）和明确的状态提示来提升用户体验。接下来将结合具体网页案例，分析这些平台在不同功能和页面中是如何应用可见性原则的（1）淘宝购物车状态反馈：淘宝用户将商品加入购物车时，系统立即显示购物车图标上的数字变化，同时伴有商品添加成功的提示，通常还带有动画效果。这种反馈可以让用户清楚地知道操作已成功执行，而不会产生“是否操作成功”的疑惑。如图中的反馈运用了可见性原则，让用户能立即确认自己的操作得到了系统的响应。任务实现（2）淘宝订单进度反馈：淘宝的订单详情页面直观地展示了订单的处理流程：从“等待付款”到“等待发货”“已发货”“交易成功”“交易关闭”等，如图所示，每一个步骤都有清晰的标识和状态说明，关于如何实现支付功能，我们将在模块8的技能补强中进行讲解和实践。发货之后，通过物流跟踪的实时信息，用户能够轻松地知道商品当前的位置和预计送达时间，消除不必要的担忧。（3）微信、QQ的消息状态提示：微信在消息发送过程中提供了多个状态反馈，比如图2-3-9、图2-3-10和图2-3-12中的“上传中”“你撤回了一条消息”以及“已发送”等。通过这些反馈，用户能够实时了解消息的传送情况，特别是在网络不佳的情况下，微信会显示一个红色的感叹号提示消息发送失败。这种即时的反馈非常符合可见性原则，使用户能够清楚地了解系统状态，并知道如何处理可能出现的问题。思考与练习一、填空题1.在HTML5中，使用<metacharset="（）">来指定字符编码，以确保网页能够正确显示多种语言的字符。2.（）标签通常用于定义网页的导航区域，它能帮助用户快速找到网站的主要内容。3.（）标签用于定义文档中的一个区域，通常是一个主题部分。4.（）标签可以用来表示任务的进度，显示一个可视化的进度条，例如志愿者时长录入的进度。5.在HTML5表单中，<inputtype="（）">允许用户选择文件进行上传。二、判断题1.HTML5文档类型声明<!DOCTYPEhtml>可确保浏览器以标准模式渲染页面。（）2.<footer>标签用来定义网页的主要内容区域。（）3.required属性用于声明某个表单输入框为必填项。（）4.<progress>标签用于表示任务的进度，通常使用value和max属性来指定当前进度和最大值。（）5.<figure>标签为图片等提供容器，并通过<figcaption>提供文字说明。（）三、选择题1.HTML5文档类型声明的正确形式是：（

）A.<!DOCTYPEhtml5> B.<!DOCTYPEhtml> C.<!DOCTYPEHTML5> D.<!DOCTYPEhtml5.1>2.以下哪一个标签用于定义网页的头部区域，通常包含标题、导航菜单等内容？（

）A.<footer> B.<main> C.<header> D.<section>3.在HTML5中，哪个标签用于表示可以展开的内容块？（

）A.<details> B.<article> C.<nav> D.<section>4.使用

<mark>标签时，通常是为了：（

）A.使文本突出显示

B.创建进度条

C.显示图片

D.提供链接跳转5.在HTML5表单中，<inputtype="email">的作用是：（

）A.验证输入的电子邮件格式

B.提供电子邮件链接

C.输入电话号码

D.输入搜索关键词请同学们注意

：填空题的考查重点为深入理解HTML5语义化标签的规范用法及其字符编码设置；判断题的核心在于分析HTML5标签功能与属性的核心特性；选择题的关键则是判别标签的实际应用场景及标准化语法。