个人网站备案可以做项目网站,vi设计找哪家公司,企业宣传网站公司,建设部网站投诉核查企业名单当用户点击或触发浏览页面的某个操作#xff0c;有很多web交互方式#xff0c;可以大致分为弹窗、抽屉、跳转新页面三种web交互方式。虽然这三种web交互方式看起来没什么不同#xff0c;但实际上弹窗、抽屉、跳转新页面对交互体验有蛮大的影响。
这需要UI\UX设计师针对不同…当用户点击或触发浏览页面的某个操作有很多web交互方式可以大致分为弹窗、抽屉、跳转新页面三种web交互方式。虽然这三种web交互方式看起来没什么不同但实际上弹窗、抽屉、跳转新页面对交互体验有蛮大的影响。
这需要UI\UX设计师针对不同的使用场景合理使用三种web交互方式让用户有统一的交互体验。三种web交互方式都有各自的优势和劣势下面Pixso设计师整理了三种web交互方式的适用项目和适用场景希望对你有所启发。
1. 弹窗
1.1 定义
弹窗是一种模态对话框用于提醒或解决某个任务。
1.2 表现形式
一般是在蒙版上置顶一个窗口窗口中有一个主体及关闭按钮。
1.3 优劣势 优势在当前页面上的衍生操作之前内容不会丢失用户可以完成弹窗后继续之前的操作。 劣势弹窗页面一般较小承载信息量较少只适合简单指令。
1.4 适用场景 简单内容的展示没有过多的复杂操作例如外卖应用的修改配送地址。 需要连续性处理信息的场景例如批量修改信息。 辅助说明对当前页面内容的快速扩充例如放大查看缩略图。
1.5 总结
弹窗多处理内容较少相对独立的页面在不丢失信息焦点的情况下可以快速返回上级适合处理一次性的操作内容。值得注意的是一般弹窗上不可再增加弹窗在弹出弹窗后背景页面不可继续操作确认和关闭按钮明确避免打开弹窗无法关闭的情况。
例如在Pixso资源库中就有当下十分流行的超大弹窗的设计可以自适应页面宽高在不丢失当前页面内容的情况下呈现更多的信息量。 设计系统组件
2. 抽屉
2.1 定义
从屏幕边缘划出的浮层面板。
2.2 表现形式
当父级导航无法给出更加详细的指令时可以呼出抽屉面板展示详细指令。
2.3 优劣势 优势在不离开当前页面的前提下完成操作对当前的操作无影响可以随时呼出也可以对视隐藏页面视觉干净清爽不杂乱。 劣势如遇到长时间呼出的抽屉会导致信息集中一侧视觉焦点过于边缘。需要做好提示不然容易被用户忽略或遗漏。
2.4 适用场景 适用于简洁的页面将更多操作和内容隐藏起来当用户有需要的时候可以随时呼出。 没有复杂操作情况下展示信息量较多的内容例如新增用户的信息处理。 在不丢失信息焦点的前提下连续性的处理信息例如批量修改信息。 在页面预览附加内容例如活动详情、游戏规则等信息。
2.5 总结
抽屉是一种深入当前操作的交互模式对于逻辑较复杂的页面可以化繁为简让页面看着更加简洁配上明确的指引可以提升用户体验。也可以利用抽屉做批量化处理提升操作效率。
例如今年流行的抽屉式侧边栏默认侧边栏效果只显示图标触碰后显示对应内容。 侧边栏/导航
诸如此类的样式在Pixso资源库里还有很多点开上图就可以看到也可以选择直接在Pixso里编辑。Pixso是一款集合了策划、原型、设计、交互、代码、交付为一体的协作设计工具。可以轻松绘制原型、一体化解决UI/UX协作还可以节约大量重复工作时间、满足UX设计师高保真交互需求在需求调研协作、低代码交付等方面也十分出色同时还兼容主流文件格式。最重要的是Pixso是一款全中文的软件学习成本低、上手快是搭建网站、UI设计的福音。 3. 页面跳转
3.1 定义
页面跳转是指当用户操作后刷新当前页面展示新页面内容。
3.2 表现形式
页面跳转的方式有直接跳转、左右跳转和上下跳转这需要UI/UX设计师针对不同的页面内容设计出如何用户心理预期的过渡形式。
3.3 优缺势 优势不影响用户的视觉注意力更加顺畅的衔接到下个页面体验感保持一致。 劣势跳转页面之后无法保留之前的内容。
3.4 适用场景 页面内容没有关联性相对独立的内容例如外部链接。 当前页面内容过多单个页面无法独立展示需要跳转至其他页面继续展示例如tab页切换。 偏流程性的功能页面前后操作存在关联和影响例如下单—支付。 用户具有明确目的性的操作当前页有利于锁定用户注意力例如APP中的我的主页。
3.5 总结
页面跳转是一种非常常见的交互模式实现难度和维护成本都很低应用范围很广。需要注意的是不要过度使用页面跳转在页面逻辑流畅的情况下适当使用跳转即可。还有就是在新页面中保留返回上级页面的按钮让用户可以浏览完新页面后可以回到之前的页面。
弹窗、抽屉、页面跳转都是很常见的交互模式日常使用中应用的也较多对于UI/UX设计师来说需要做到逻辑顺畅、应用合理、体验统一都会提升用户体验。随着流行趋势的不断进步越来越多的交互模式也应运而生。
