网页交互设计组件 第1篇
该UI组件库还拥有丰富的组件资源，主要是基本组件、导航组件和数据输入组件。这三类UI组件库中包含的组件风格整洁、标准化、逻辑合理、使用方便。UI组件库中的所有元素和结构都是一致的，设计师可以使用它们来构建一个更和谐和统一的视觉用户界面，并为用户呈现一个更简单和直观的界面。
高质量的UI组件库在促进设计过程中起着重要的作用，可以有效地提高工作效率。当设计师使用UI组件库时，它可以直接拖动同样的设计需求 即时设计资源广场中丰富的UI组件库。这不仅节省了重复的设计工作，而且提高了沟通效率。特别是在设计团队处理多个项目时，使用组件集有助于保持界面一致性，节省设计成本，实现高效合作
网页交互设计组件 第2篇
弹窗中左右功能按钮的次序排布，用户的惯性认知为：左后退，右行进。
相关的研究论据：
通常，我们在产品中会为了达成某种指标，需要在界面上引导用户去完成我们希望其完成的操作。且这类操作是可以达成某种目的的，我们把这类操作称为「召唤行为」，该按钮成为召唤按钮，又称CTA（Call To Action），即从元素的角度引导用户完成任务，提升产品转化率。
还需要配合不同弹窗类型的标题文案/说明文案意向以及使用场景，来进行召唤按钮的设计，总结如下。
网页交互设计组件 第3篇
Actionbar功能框可以看成是Dialog对话框的一种延伸设计，两者都是模态弹窗，用户必须进行回应，否则弹窗不会消失，用户无法继续其它操作。Actoinbar比Dialog拥有更多的功能按钮，提供给用户更多的功能选择。
▲Actionbar功能框注意点
网页交互设计组件 第4篇
对话框必须保证具备一条以上可以快速撤退的出口（警报对话框除外），并且明显、稳固可靠，便于用户在特殊场景快速撤离，需要注意：
a、对话框常用的关闭形式：
·“关闭”按钮，可以在弹窗内部/外部；
·“返回”按钮，一般在弹窗内部；
b、系统警报类型对话框会在设备或应用要求用户当即决策才能进行后续运行的时候出现，此时用户需要优先执行当前操作，或者使用物理按钮后撤；
c、其他常见对话框中，即便行动按钮中包含类似“取消”、“关闭”等选项时，也需要额外设置关闭按钮，便于用户在无需耗费认知&决策成本下，可以快速后撤；
网页交互设计组件 第5篇
最近在做智慧电视项目时，产品经理提出在播放器页面，做一个“非会员用户可以体验视频高清晰度“的需求，主要目的是为了引导用户体验高清晰，提升用户的会员充值率。这里就通过解析如何通过组件设计解决这个问题；
首先我们结合业务规则有以下两点
（1）：该视频内容资源是付费试看还是免费
（2）：高清晰度体验时间，单次内容高清晰度体验时间，累计高清晰度体验总时间
考虑到用户在全屏播放器，需要尽量少的对用户观影降低干扰，所以在设计时，利用提示框的组件，针对不同场景状态，对组件进行设计优化。
用户观看付费影片，因为试看提示，通过操作按钮键，所以高清晰度体验的提示，通过提示文案来引导，避免按键操作冲突，组件设计如下图；
在体验过程中，播放器单次高清晰度体验时间会有状态变化，即正在体验-将要结束-已结束，组件设计如下图：
累计体验总时间结束后，再次进入到播放器，组件设计变为提示用户该片有高清晰度，组件设计如下图：
用户观看免费影片，因为片源免费，没有其他场景下的按键冲突，所以高清晰度体验的提示，通过提示“文案+按钮”来引导，组件设计如下图；
体验过程中，播放器单次高清晰度体验时间也有状态变化，即正在体验-已结束，组件设计如下图：
网页交互设计组件 第6篇
▲Snackbar提示对话框的要素组成
▲Snackbar提示对话框注意点
▲Snackbar与Toast特点对比
网页交互设计组件 第7篇
标题是对话框向用户传达其目的、作用的核心手段，使用时需与行动按钮配合呼应。有以下几个注意点：
a、标题需要尽可能简短、清晰，可以是陈述或问题；
b、避免使用道歉（“抱歉打扰了”）、警告（“警告！”）或含糊不清（“你确定吗？”）等文案；
c、尽量在属性对话框中使用名词，在功能对话框的标题中使用动词；
*属性对话框：向用户呈现或让用户改变所选对象的属性或者设置，主要具备说明、呈现的作用；
*功能对话框：为用户提供功能操作的弹窗，需要询问用户的决策来执行下一步操作。
网页交互设计组件 第8篇
我们去商店购买东西使用支付宝支付的过程中，可以通过扫描商家二维码，进行转账交易，转账支付的流程主要包括输入数额，选择支付方式，确认支付；因为每个流程中的组件都十分复杂，我们仅拿其中一个流程，对用户操作过程中涉及的组件进行拆解说明；输入金额和添加备注流程：页面的组件主要是用户信息文本，输入框、备注组件、键盘控件，弹框组件；这个流程包括2个行为事件，4个大的业务场景；
行为事件一：用户在商店通过扫码商家二维码，分别两次给商家转账20000和100000元的金额，
业务场景1：用户没有输入任何金额
业务场景2：用户转账输入的金额没有超过限制
业务场景3：用户转账输入的金额超过最大限制
业务场景123主要应用金额输入框组件，输入框组件根据用户操作行为，会有不一样的设计，用户没有任何操作，输入框内有默认文案提示“输入付款金额”，用户输入金额后，计算单位超过‘百’，数字金额上方会有单位提示，同时显示删除按钮，支持删除，重新输入，业务场景2中根据金额输入范围定义了产品业务规则，再细分出三种场景，不同范围内的金额，可以对应的组件设计方案解决确认转账确认问题；
（2）当输入金额范围在50000-99999，在当前页面使用模态弹框组件，进行转账确认（3）当输入金额范围在100000-999999，进入新页面，重新输入框内输入转账金额，进行确认，若两次金额不一致，出现弹窗提示用户操作。
当输入的金额超过限制后，弹框组件配合进行超限的toast提示。
通过拆解行为事件1，我们细分出了3个业务场景，通过运用输入框、键盘、和toast弹窗，它们相互关联解决了输入金额产生的各种问题；
无金额输入时，输入框能给予用户提示，这是比较常见的输入框组件设计，预置提示文本；
输入金额未超出限制，输入框中会带入计量单位，这就是组件设计的细微之处，转账金额是一个关联自己财产的行为操作，应当是需要谨慎的，所以计量单位也是在用户输入过程中出现，给用户一个提示，没有任何打断操作的意思，出现的时机很适合，再加上输入的文本数字已经足够醒目，能够提示用户输入有足够的准确度，如果没有加入这个字段，确实也不影响用户操作，但这种双重衡量的方式，潜意识里会让自己输入的更放心，不怕自己有误差；这就是组件设计给用户带来的惊喜感。
金额超出限制后，通过组件toast提示“付款金额超限”，第一提示框组件很好的限制键盘的数字输入，避免用户无效输入，第二toast提示框的触发时机设计，这里的方案是当输入金额超百万，按数字键盘的时候就会给予提示，而不是等用户输入完之后，再去按确认键的时候，弹出来提示金额超限。
网页交互设计组件 第9篇
首先来看对话框，对话框是一种模态窗口。在解决模态之前，将禁用对 UI 其余部分的访问。所有模态表面在设计上都是中断的——它们的目的是让用户专注于所有出现在其表面之上的内容。
对于对话框的设计，有三点核心设计原则，分别是：专注聚焦、直接的、有帮助。专注：即将用户注意力集中，以确保他们的内容得到解决；直接的：对话应该直接传达信息并致力于完成任务，因此他必须是简单直接的；有帮助：对话框应出现以响应用户任务或操作，并带有相关或上下文信息，简洁有效。
一个完整的对话框一般由以下5个部分组成，其中，标题、行动按钮是两个基础必备元素，辅助内容、关闭控件、粗布蒙层是非必要元素。
▲对话框要素组成
网页交互设计组件 第10篇
Toast提示条是一种非模态弹窗，它弹出一个小信息，作为提醒或消息反馈来用，一般用来显示操作结果，或者应用状态的改变。
▲Snackbar提示条组成要素
▲Toast提示条注意点
▲Toast提示条案例