首页

弹框关闭的七种交互方式

清阳

前言:日常设计工作中,我们设计师可能会面临以下设计问题:
  1.  
    移动端弹框什么时候需要关闭按钮?什么时候不需要关闭按钮?
  2.  
    界面中间的确认取消警示弹框,是否需要在右上角添加“关闭”icon按钮?
  3.  
    手势关闭弹框需要注意什么?
  4.  
    iOS和安卓两端关闭弹框有什么区别?
  5.  
    点击弹框中的任务按钮,弹框是关闭还是不收起?
弹框关闭的七种交互方式
 
 
弹框关闭的七种交互方式
 
 
弹框关闭的七种交互方式
 
 
 
弹框关闭的七种交互方式
 
 
统一使用图标按钮,以icon“x”的形式,显示在底部弹框的右上角,用户通过点击“关闭icon”图标按钮来关闭弹框。
使用场景
当弹框中包含内容和功能操作时,应提供一个关闭icon“x”的图标按钮,以让用户能够主动关闭弹框并进行相应的操作。
何时不需要关闭按钮icon“x”?
1.操作型弹框,需要用户确认或选择操作项,不需要显示关闭按钮,需统一使用文字主按钮,以文本“取消”的按钮形式,显示在弹框面板底部,用户通过点击“取消”按钮来关闭弹框。例如当用户进行删除或提交操作时,弹出的确认框通常只需要“确定”和“取消”按钮,而不需要显示关闭按钮。
2.全局提示toast(自动关闭)。
3.功能入口类型弹框,为了保持界面简洁,不需要“关闭icon”,如智能文档编辑模式的底部悬浮工具栏。
4.警示或通知类型的弹框,不要关闭icon。
弹框关闭的七种交互方式
 
 
关闭按钮位置
关闭按钮需统一显示在弹框右上角。遵循iOS和Android系统规范、用户使用习惯、阅读习惯「Z字型」、避免误操作「关闭之前需要先确认信息和操作项」。
关闭按钮icon“x”何时需要展示在左上角?
页面级:当页面层级超过3级时,为了便于用户能快速回到一级页面,无需原路返回,可以将关闭按钮“x” 置于左上角,位于「返回」按钮右侧。
多语言和国际化用户习惯:特定语言和文化习惯,从右向左阅读顺序,遵循用户阅读习惯。例如台湾、日本等。
弹框关闭的七种交互方式
 
 
用户点击弹框外部区域,即遮罩层,可关闭弹框。
弹框关闭的七种交互方式
 
 
遮罩层不可点击场景
1、模态弹框,即“阻断式”,必须要用户确认弹框内操作。例如删除等需要用户确认的警示弹框。
2、弹框的内容区域,包含表单输入框等需要用户提交数据,为了防止误操作导致用户输入的数据丢失,遮罩层不可点击。
3、有前置限制条件,需要用户完成特定操作或满足特定条件才可关闭弹框。例如用户隐私协议场景,必须要用户主动勾选同意协议选项。
 
遮罩层展示逻辑
1、非模态弹框,不加遮罩层;模态弹框,加遮罩层;
2、遮罩层统一使用半透明黑色蒙层,色值和不透明度的数值由UI定义;
3、遮罩层可视高度,遵循移动端最小点击区域48dp*48dp高度的交互热区,保证用户可点击
 
遮罩层的覆盖范围
  1.  
    遮罩层需覆盖标题栏,需遵循iOS、Android、微信小程序平台规范。其中微信小程序端,遮罩层覆盖标题栏,但不可覆盖标题栏右侧胶囊按钮。
  2.  
    若是内嵌H5页面,因客观条件限制,则弹框之下的遮罩层无需覆盖标题栏。
  3.  
    以上提到模态弹框和非模态弹框两种弹框模式,要想更清晰理解两种模式弹框的关闭交互方式,需要理解两者之间的交互区别。‍‍
 
模态弹框和非模态弹框的交互区别
模态弹框‍‍‍‍‍‍‍‍‍‍‍‍:
用户只能操作弹框内的交互元素,弹框外部区域不可操作,需要加半透明遮罩层。例如底部操作型弹框。
非模态弹框‍‍‍‍‍‍‍‍‍‍‍
用户可以并行操作弹框内和弹框外部区域的交互元素,不要加半透明遮罩层。例如苹果地图App。
 
弹框关闭的七种交互方式
 
 
用户在底部弹框区域向下滑动手指,弹框会随之向下移动,当到达当前弹框高度的1/2位置后,会触发关闭交互,用户继续向下滑动松手则关闭弹框。
弹框关闭的七种交互方式
 
 
交互逻辑
1、支持下拉关闭的弹框,头部区域需统一展示水平条icon,样式由UI定义
2、交互热区:底部弹框全部区域
3、手势方向:手指只能向下移动
4、下拉触发关闭弹框阈值:当前底部弹框高度的1/2位置
 
使用场景
长内容类型弹框,需使用下拉关闭交互手势,关闭弹框
 
不可用下拉手势关闭弹框的场景
1、模态弹框,即“阻断式”,必须要用户确认弹框内操作。例如删除等需要用户确认的警示弹框。
2、弹框的内容区域,包含表单输入框等需要用户提交数据,为了防止误操作导致用户输入的数据丢失,不可下拉关闭弹框。
3、有前置限制条件,需要用户完成特定操作或满足特定条件才可关闭弹框。例如用户隐私协议场景,必须要用户主动勾选同意协议选项。
 
弹框关闭的七种交互方式
 
 
用户在屏幕上向下滑动(包括左下或右下滑动方向)至任意位置后松手释放,可关闭弹框;当用户手指下滑未松手,继续向上滑动到任意位置后松手释放,则可取消关闭弹框。
弹框关闭的七种交互方式
 
 
使用场景
仅图片大图模式场景使用。用户向下滑动屏幕,图片随之向下移动,松手后触发关闭图片查看器,关闭图片弹框
例如:手机相册
弹框关闭的七种交互方式
 
 
用户从弹框区域左边缘向右轻扫,即快速向右滑动后松手,则触发关闭弹框操作,关闭弹框。
弹框关闭的七种交互方式
 
 
不可从界面左边缘向右轻扫场景
1、模态弹框,即“阻断式”,必须要用户确认弹框内操作。例如删除等需要用户确认的警示弹框
2、弹框的内容区域,包含表单输入框等需要用户提交数据,为了防止误操作导致用户输入的数据丢失,不支持向右轻扫关闭弹框。
3、有前置限制条件,需要用户完成特定操作或满足特定条件才可关闭弹框。例如用户隐私协议场景,必须要用户主动勾选同意协议选项。
除以上场景外,均需要支持弹框左边缘向右轻扫手势关闭弹框,包括Android、iOS、小程序。
 
特殊场景
1、当同时存在页面向右滑和弹框向右轻扫手势时,在弹框区域向右轻扫,先关闭弹框,再次沿着屏幕左边缘向右滑动,则返回上级页面。
2、键盘展开场景,iOS端不支持左边缘向右轻扫收起键盘,遵循iOS平台规范。
弹框关闭的七种交互方式
 
 
对于安卓设备,用户可以使用设备上的物理返回按钮来关闭弹框。当用户按下返回按钮时,可关闭弹框。
交互用法
1、点击物理按键,需原路逐级返回,不允许跳级返回
2、模态弹框,遮罩层覆盖物理返回按键,不支持左边缘向右轻扫关闭弹框
3、安卓手机将系统导航方式切换到全面屏手势,则不存在物理返回按键
弹框关闭的七种交互方式
 
 
  1.  
    点击弹框中的功能按钮,通常需要立即执行并关闭弹框。一定是先执行再关闭弹框,而不是先关闭弹框再执行。用户执行某功能按钮后,遵循即时响应原则,系统必须要反馈用户在执行用户操作。
  2.  
    为什么点击执行功能按钮需要关闭弹框?因为弹框是否关闭,和用户目标有关。用户主动触发某操作唤起弹框,首先是有用户目标的,其次,用户通过点击弹框内某功能按钮,执行任务来实现用户目标。
  3.  
    此外,也存在点击执行功能按钮立即执行不关闭弹框的场景,比如开关选择器,但本质还是围绕当前用户目标来进行决策是否关闭弹框。
 
结语:任何设计都有它遵循的规律


作者:CNLILY
链接:https://www.zcool.com.cn/article/ZMTYxMTQzNg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

响应式布局-创造无缝的跨平台用户体验

清阳

响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
 
Current Time 0:00
/
Duration Time 0:07
 
Loaded: 0%
 
Progress: 0.00%
Playback Rate
1.00x
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验


作者:72度灰
链接:https://www.zcool.com.cn/article/ZMTYyMzcwOA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

响应式布局|打造跨平台无缝体验的设计利器

清阳

响应式布局|打造跨平台无缝体验的设计利器
 
 
一、介绍
1.1 发展历程
响应式布局起源于20世纪的建筑设计领域,最初用于描述建筑物根据环境变化自动调整的能力。随着互联网技术的发展,这一概念被引入到网页设计中,以解决传统固定布局在多样化设备上的局限性。自2010年以来,随着智能手机和平板电脑的普及,响应式布局逐渐成为网页设计的标准实践。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
  •  
    固定布局:内容在不同屏幕上的尺寸和布局保持不变。这种设计适用于桌面电脑,但在移动设备上显示效果不佳
  •  
    流式布局:将元素的宽度设置为百分比而不是固定像素值。这样可以使网页内容在不同屏幕尺寸下自动调整大小,但仍存在布局失控和内容挤压的问题。
  •  
    媒体查询:CSS3引入了媒体查询功能,允许开发人员根据设备的特性(如屏幕宽度、分辨率等)应用不同的CSS样式。这种技术使得网页可以根据设备的不同特性应用不同的布局和样式,为响应式设计奠定了基础
  •  
    响应式设计:综合利用了流式布局和媒体查询技术,使网页能够根据设备的尺寸和特性动态调整布局和样式,以适应各种屏幕大小和设备类型。这种方法提供了更一致、更灵活的用户体验,成为现代Web设计的主流趋势
  •  
    移动优先设计:随着移动设备用户数量的增加,设计师开始采用移动优先的设计理念,即首先为移动设备设计网页布局和样式,然后再逐步增强适应桌面设备。这种方法有助于确保网页在小屏幕上的可用性和性能
1.2 基本概念
1.2.1 基于网格布局
响应式 UI 基于网格布局。该网格可以确保不同布局之间的视觉一致性,同时可以灵活的适配多种宽度的设计。网格列的数量取决于断点系统。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
1.2.2 断点(根据宽度切换布局方式)
断点是响应式设计中的关键概念,它指的是屏幕宽度达到某个预设值时,布局会发生明显变化的点。通过设置断点,设计师可以为不同的屏幕尺寸定制不同的布局方案。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
1.2.3 主要应用于横向空间,同时适配PC + 平板 + 手机
传统页面布局策略通常遵循这样一种原则:即内容的多少决定了页面的滚动长度。而页面的水平宽度则往往被设定为一个固定值,以确保在不同设备和浏览器上展示时的一致性和稳定性。然而,随着移动设备的多样化和用户浏览习惯的变化,固定的页面宽度已无法满足所有场景的需求。在这种情况下,响应式布局应运而生,其核心思想是使页面的宽度能够根据不同设备的屏幕尺寸动态调整。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
二、实现方式
2.1 媒体查询
媒体查询是CSS3的一个特性,允许根据不同的设备特性(如屏幕宽度、分辨率等)应用不同的样式规则。通过媒体查询,设计师可以为不同的设备和视口尺寸定制不同的布局和样式。
优点
  •  
    灵活性高,可以针对不同的设备特性(如屏幕宽度、分辨率、设备方向等)应用不同的样式规则
  •  
    允许创建复杂的响应式逻辑,如在横屏模式下调整布局或针对特定设备优化样式
缺点
  •  
    可能导致CSS代码变得复杂和难以维护,特别是当有大量不同的设备和条件需要处理时
  •  
    需要对各种设备和屏幕尺寸有深入的了解,以确保兼容性和一致性
使用场景
  •  
    当需要为不同的设备或视口条件定制不同的布局和样式时
  •  
    当设计需要考虑多种设备特性,如屏幕方向变化或高分辨率显示时
 
2.2 百分比
百分比宽度可以使元素的尺寸相对于其父容器进行缩放,从而实现响应式布局。百分比布局让元素能够根据父容器的大小变化而自动调整宽度,保持布局的灵活性。
优点
  •  
    使得元素的大小能够相对于其父容器进行缩放,从而实现响应式效果
  •  
    简单易用,对于基础的响应式布局非常有效
缺点
  •  
    百分比布局可能在某些情况下不够精确,特别是在需要固定元素位置或大小时
  •  
    可能需要结合其他技术(如视口单位)来实现更精细的控制
  •  
    每个属性都使用百分比,会造成布局的复杂度较高
使用场景
  •  
    当需要元素大小根据父容器的大小变化而变化时,如流体网格布局
  •  
    对于简单的响应式调整,如改变容器的填充或边距
 
2.3 视口单位(vw/vh 和 vmin/vmax)
vw(视窗宽度单位)和vh(视窗高度单位)是基于视口大小的相对单位。使用这些单位,元素的尺寸可以与用户的视口大小同步变化,实现真正的响应式设计。
优点
  •  
    基于视口的单位提供了一种与设备视口大小直接相关的方法来设置元素的尺寸
  •  
    可以创建与视口大小成比例的布局,确保在不同设备上的视觉一致性
缺点
  •  
    对于需要非常精确控制元素尺寸的情况,视口单位可能不够灵活
  •  
    在某些复杂的布局中,过度依赖视口单位可能导致计算复杂和难以调试
使用场景
  •  
    当设计需要元素大小与视口大小成比例时,如全屏背景图像或响应式图片
  •  
    在需要考虑不同屏幕尺寸和分辨率的布局设计中
 
2.4 rem
rem(root em)单位是基于根元素(html元素)的字体大小的相对单位。通过设置根元素的字体大小,可以统一控制页面上所有使用rem单位的元素的尺寸,实现更好的响应性和可维护性。
优点
  •  
    rem单位基于根元素的字体大小,提供了一种一致性更强的方法来缩放元素
  •  
    有助于保持设计的一致性和可访问性,因为所有尺寸都与根字体大小相关联
缺点
  •  
    对于没有深入了解CSS的设计师或开发者来说,rem的计算可能有些复杂
  •  
    在某些情况下,rem可能导致布局的缩放不如预期,特别是在与百分比或其他单位混合使用时
使用场景
  •  
    当需要整个页面的尺寸和布局与根字体大小保持一致时
  •  
    在创建可伸缩的排版和需要保持一致性的设计中
 
三、布局的几种类型
3.1 基础布局
3.1.1 固定
对于固定宽度的元素,确保它们在所有设备上都保持一致的尺寸,适用于那些不需要随屏幕尺寸变化的元素
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
3.1.2 流式
流式宽度的元素可以根据父容器的尺寸变化而动态调整宽度,适用于需要随屏幕尺寸变化的元素。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
3.1.3 吸附(adhesion)
元素宽度是固定的,直到受到其他元素或断点的影响。参考产品:花瓣发现页
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
3.1.4 挤压
元素的宽度随着面板的出现而收缩
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
3.1.5 推出
推出宽度的元素在特定条件下会扩展到父容器之外,以显示额外的内容或功能。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
3.1.6 遮盖
遮盖宽度的元素会根据内容的需要动态调整宽度,如果内容超出父容器,将会遮盖相邻元素
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
3.2 混合布局
3.2.1 固定+流式
这种布局方式结合了占满和固定两种布局方式的特点。元素的宽度可以动态调整以占满屏幕空间,而高度则保持固定不变。这种布局方式适用于那些需要充分利用屏幕宽度,但高度固定不变的场景。参考产品:UI中国、知乎等
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
3.2.2 流式+吸附(典型的响应式布局)
等比+断点布局是指在不同屏幕尺寸下,元素的宽度和高度按照等比缩放,但在某些特定的屏幕尺寸下会触发断点,使得元素的布局方式发生改变。这种布局方式可以在不同屏幕尺寸下实现更加灵活和适应性更强的布局。参考产品:站酷首页。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
四、设计流程
4.1 确定常见的屏幕尺寸范围
通过对目标用户群体的设备使用情况进行研究,确定常见的屏幕尺寸范围,如小屏幕手机、中等屏幕平板和大屏幕桌面显示器。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
4.2 确定适配规则
4.2.1 间距宽度不变,缩放内容区域
为每个布局区间制定具体的布局策略,包括元素的排列方式、大小和位置。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
4.2.2 内容区域宽度不变,缩放两侧留白区域
为每个布局区间制定具体的布局策略,包括元素的排列方式、大小和位置。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
4.2.3 混合缩放,内容区域与两侧留白区域同时变化
为每个布局区间制定具体的布局策略,包括元素的排列方式、大小和位置。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
4.3 分解固定元素
4.3.1 区分固定元素与变化元素
确定页面中的哪些元素应该在不同屏幕尺寸下保持不变,哪些元素应该随屏幕尺寸变化而变化。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
4.3.2 确定页面中固定元素的尺寸
对于页面中的固定元素,如Logo、导航栏等,为这些元素设定在不同屏幕尺寸下的尺寸和位置,确保其在任何设备上都具有良好的可见性和功能性。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
4.4 确定卡片(模块)的布局变化规则
4.4.1 卡片位置变化
根据屏幕尺寸的变化,调整卡片的位置,使其在不同屏幕上都能合理布局。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
4.4.2 卡片布局变化
改变卡片的排列方式,如从水平排列变为垂直排列,以适应不同屏幕尺寸的布局需求。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
4.4.3 卡片数量变化
根据屏幕尺寸调整卡片的数量,例如在较小屏幕上减少卡片数量以简化内容,提高用户体验。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
4.5  文本拉伸规则
4.5.1 溢出省略
对于过长的文本内容,采用溢出省略的方式显示部分内容,并用省略号表示剩余内容,确保页面布局不被破坏。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
4.5.2 文本换行
根据屏幕尺寸调整文本的换行规则,使文本在不同屏幕尺寸下都能合理显示,避免布局被破坏。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
4.6 图片拉伸规则
4.6.1 居中裁剪
在保持图片比例的同时,对图片进行裁剪以适应不同屏幕尺寸,确保图片内容的重点区域始终可见。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
4.6.2 等比缩放
根据屏幕尺寸调整图片的大小,确保图片在不同屏幕尺寸下都能保持原始比例,避免变形或失真。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
五、可见性适配行为
5.1 固定的
对于固定可见的元素,确保它们在所有设备上都保持可见,以提供稳定的用户体验。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
5.2 可切换的
对于可切换的元素,根据屏幕尺寸和用户需求在显示和隐藏之间进行切换,以优化空间利用和用户体验。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
5.3 临时的
临时可见的元素在特定条件下才会显示,如当用户与页面交互时,可以临时显示额外的信息或操作选项。
响应式布局|打造跨平台无缝体验的设计利器
 
 
收藏
六、响应式模式
6.1 出现
出现模式指的是元素在用户滚动或触发某些动作时动态进入或退出视图的过程。
6.2 变形
变形模式描述元素如何根据用户交互或屏幕尺寸变化而改变形状、大小或布局。
6.3 分割
分割模式涉及将内容分割成多个部分,以适应不同的屏幕尺寸和布局需求。
6.4 重排
重排模式指的是元素在不同屏幕尺寸下重新排列,以优化空间利用和用户体验。
6.5 扩展
指的是元素或组件能够根据内容的多少或者用户的交互动作而增加额外的空间或者附加信息。这种模式常见于折叠面板、下拉菜单、模态窗口等交互元素。扩展模式的关键在于它提供了一种优雅的方式来处理额外的内容,而不是在所有时间里都将其展示出来,这样可以保持界面的整洁和减少不必要的干扰。
6.6 位移
涉及到元素在页面上的位置变化,以响应用户的交互或其他条件。这通常是为了重新组织页面布局,以便为新的内容腾出空间或者将用户的注意力引向特定的区域。位移可以是平滑的动画效果,也可以是简单的位置变动。需要谨慎使用,以确保用户不会被突然的布局变化所困扰。
 
七、结语
在进行产品设计时,我们经常会碰到包含多种元素的复杂设计单元,比如图文结合的布局,或者是更加多元的卡片、文本和图像的组合。面对这种复杂性,首要任务是将这些单元分解,审视并理解每个单独元素的适配需求。然后,我们需要综合考虑这些元素在尺寸、形态、数量以及排列上的变化,融合这些变化来制定一套综合的适配计划。这样的过程旨在保证不论是在何种设备或屏幕尺寸上,这些设计单元都能维持其原有的功能和视觉效果,进而为用户提供优质的体验。
虽然开发团队可能依赖于他们的经验或遵循既定的设计标准来执行适配任务,并不总是需要设计师提供详尽的适配指导,但设计师对适配原则的理解和掌握对于打造适用于所有用户设备的连贯体验至关重要。这种专业知识不仅能够提高设计工作的效率和产出的质量,还能促进与开发团队的有效合作,共同推动产品的成功开发。


作者:姚_Yale
链接:https://www.zcool.com.cn/work/ZNjgzNDY5MTY=.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

鼠标指针的秘密:提升PC端交互的小技巧

清阳

一、鼠标指针概述
1.1 鼠标指针的起源
鼠标指针最早出现在20世纪60年代的早期图形用户界面系统中,如Douglas Engelbart在斯坦福研究所开发的oN-Line系统。随着操作系统的发展,鼠标指针的样式也变得更加多样化,以适应不同的操作和反馈需求。
 
1.2 鼠标指针的定义
光标是一种视觉提示,它不仅向用户显示鼠标的位置,还向用户显示如何与特定元素进行交互,包括选择文本、单击、拖动或滚动等。了解哪些光标指示哪些类型的交互并适当地使用它们,可以使界面对用户更直观。
 
1.3 在用户体验中的作用
光标作为用户与计算机系统之间交互的主要视觉工具。在用户体验中起到一些关键作用,例如:直观的控制、视觉焦点、操作反馈、精确选择、交互提示、增强可访问性、减少错误等。
 
二、鼠标指针的基本功能
2.1 指向与选择
  •  
    鼠标指针最基本的功能之一是指向。用户可以通过移动鼠标来控制指针在屏幕上的位置,指向不同的界面元素,如按钮、链接、文本或图像。
  •  
    选择功能通常与指向结合使用。当用户将指针放在某个元素上并按下鼠标按钮时,就可以选择该元素。例如,在文本编辑器中,用户可以通过指向并点击来选择文本;
  •  
    在网页上,指向并点击链接可以打开新的页面。
 
2.2 点击与激活
  •  
    点击是用户与界面元素交互的常见动作。用户将鼠标指针移动到按钮或其他可激活的元素上,然后按下并释放鼠标按钮来执行点击操作。
  •  
    激活功能指的是通过点击来触发元素的事件或动作。例如,点击一个按钮可能会提交一个表单,点击一个菜单项可能会打开一个新窗口或执行特定的命令。
 
2.3 拖动与移动
  •  
    拖动功能允许用户通过按住鼠标按钮并移动鼠标来拖拽界面元素,如窗口、图标或选定的文本。
  •  
    移动功能是指通过拖动操作来重新定位元素。用户可以在桌面上移动窗口到不同的位置,或在文档中拖动文本或图像来改变它们的位置。
  •  
    拖放操作是拖动的扩展,用户可以将一个元素拖到另一个元素或区域来执行特定的功能,如将文件拖到文件夹图标中进行移动或复制。
 
三:鼠标指针的多样性
3.1 箭头光标
介绍:箭头光标通常表现为一个箭头形状,指向屏幕的某个方向(通常是右上方),它允许用户通过鼠标或触摸板与屏幕上的元素进行交互。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    选择:
    箭头光标允许用户点击按钮、选择菜单项或激活链接。
  •  
    指向:
    它提供了指向屏幕上特定元素的功能,帮助用户直观地识别可交互区域。
  •  
    导航:
    在浏览网页或应用程序时,箭头光标帮助用户在界面中导航。
交互行为
  •  
    悬停:
    将箭头光标悬停在某个元素上可能会显示额外的信息,如工具提示或菜单;也可能会触发视觉变化,如颜色或大小改变
  •  
    点击:
    用户可以通过将箭头光标定位到目标上并点击鼠标左键来执行点击操作。
 
3.2 指针光标
介绍:指针光标是屏幕上的一个可见符号,通常随鼠标移动而变化位置,允许用户与计算机进行交互。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    选择:
    通过点击操作选择界面元素。
  •  
    指向:
    指示屏幕上的特定位置。
  •  
    激活:
    点击按钮或链接以触发事件。
  •  
    拖动:
    拖动窗口或对象到新位置。
交互行为
  •  
    悬停:
    将光标停留在某个元素上以查看状态变化或提示信息。
  •  
    点击:
    按下并释放鼠标按钮以选择或激活元素。
  •  
    双击:
    快速连续点击两次以执行默认命令,如打开文件或文件夹。
 
3.3 文本光标
介绍:文本光标是一个通常出现在文本字段中的垂直线条或竖条,指示用户可以在此位置插入文本。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    文本输入:
    允许用户在文本字段中输入字符。
  •  
    文本编辑:
    用户可以通过点击文本光标来定位文本中的特定位置,进行编辑或修改。
交互行为
  •  
    点击:
    用户可以将鼠标指针移动到文本光标上并点击,以在该位置插入或编辑文本。
  •  
    拖动:
    用户可以拖动文本光标来选择文本。
 
3.4 十字光标
介绍:十字光标通常表现为一个十字形或“+”形的指针,它允许用户进行非常精确的定位和选择。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    精确定位:
    十字光标帮助用户在屏幕上进行精确的点击或选择。
  •  
    细节操作:
    在需要处理图像、图表或其他细节元素时,十字光标提供了更好的控制。
交互行为
  •  
    点击:
    用户可以使用十字光标进行精确点击。
  •  
    拖动:
    在需要选择特定区域或绘制图形时,用户可以拖动十字光标。
 
3.5 不允许的光标
介绍:不允许/禁止光标通过特定的视觉样式(如带斜线的圆圈或箭头)来表示某个操作在当前上下文中是不被允许或禁止的。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    禁用指示:
    指示用户界面中的某些元素或操作目前不可用或被锁定。
  •  
    防止误操作:
    通过视觉提示防止用户尝试执行不可用的操作,从而避免可能的误操作或错误。
交互行为
  •  
    视觉反馈:
    当用户将鼠标移动到禁止操作的区域时,光标变化提供即时的视觉反馈。
  •  
    操作阻止:
    系统阻止用户执行任何无效的操作。
 
3.6 屏幕快照选择区域
介绍:屏幕快照选择区域光标允许用户通过拖动来定义一个区域,这个区域将被捕捉并保存为图像文件。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    精确定位:
    十字光标帮助用户在屏幕上进行精确的点击或选择。
  •  
    细节操作:
    在需要处理图像、图表或其他细节元素时,十字光标提供了更好的控制。
交互行为
  •  
    点击:
    用户可以使用十字光标进行精确点击。
  •  
    拖动:
    在需要选择特定区域或绘制图形时,用户可以拖动十字光标。
 
3.7 消失光标
介绍:指示在松开按钮时,所拖移的项目将消失。如果项目是
替身
,则不会删除其原件。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
 
3.8 拷贝光标
介绍:拷贝光标通常表现为一个箭头旁边带有“+”号或其他表示复制的符号,明确告诉用户当前操作将复制选中的项目。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    复制操作:
    允许用户通过拖动来复制文件、文件夹或其他界面元素。
  •  
    数据传输:
    在不同应用程序或同一应用程序的不同部分之间传输数据。
交互行为
  •  
    拖动复制:
    用户将鼠标指针放在可复制的元素上,按下鼠标按钮并拖动以复制该项目。
  •  
    释放完成:
    用户在目标位置释放鼠标按钮,完成复制操作。
 
3.9 替身光标
介绍:替身光标表明用户可以通过拖动操作创建原文件或文件夹的快捷方式,而不是移动原始项目。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    创建快捷方式:
    允许用户在不改变原始文件或文件夹位置的情况下,创建一个指向原始位置的链接。
  •  
    节省空间:
    替身不占用额外的空间,因为它只是一个指向原始文件的引用。
交互行为
  •  
    拖动:
    用户将鼠标指针放在文件或文件夹上,按下并拖动。
  •  
    创建替身:
    在拖动过程中不松开鼠标按钮,同时按下Option键(或根据系统提示的其他修饰键),光标将变为替身光标。
  •  
    放置:
    用户将文件或文件夹拖到所需位置并释放鼠标按钮,完成替身的创建。
 
3.10 帮助指针
介绍:帮助指针通常表现为一个问号(?)或带有问号的图标,表示用户将鼠标悬停在某个元素上时可以获取帮助或说明。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    提供信息:
    帮助指针可以向用户显示额外的说明或信息。
  •  
    辅助理解:
    帮助用户理解界面元素的功能或操作方式。
交互行为
  •  
    悬停显示:
    当用户的鼠标指针悬停在具有帮助功能的界面元素上时,光标样式可能会变化,同时显示帮助信息。
  •  
    点击获取:
    在某些情况下,用户可能需要点击带有帮助指针的元素以打开帮助文档或获取更多信息。
 
3.11 铅笔光标
介绍:铅笔光标是一种视觉提示,通常表现为一个铅笔形状的图标,用来告诉用户他们当前处于可以绘制或编辑文本的状态。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    文本输入:
    铅笔光标用于指示用户可以在文本字段中输入文字。
  •  
    文本编辑:
    在已有文本上移动铅笔光标,可以进行文字的选择、编辑或修改。
交互行为
  •  
    点击定位:
    用户可以在文本中的任何位置点击铅笔光标,以定位文本插入点。
  •  
    拖动选择:
    用户可以拖动铅笔光标来选择文本。
 
3.12 精密指针
介绍:精密指针是一种特殊的光标样式,它为用户提供了更精细的控制能力,特别是在需要精确定位或选择的应用程序中。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    精确定位:
    允许用户在需要高精度的界面元素上进行操作,如图形设计、图像编辑或表格数据输入。
  •  
    细致选择:
    在文本编辑或代码编辑中,精密指针可以帮助用户更准确地选择文本或代码段。
交互行为
  •  
    点击:
    用户可以使用精密指针进行精确点击。
  •  
    选择:
    用户可以轻松地选择小尺寸的界面元素或在紧密排列的元素之间进行选择。
 
3.13 单元格指针
介绍:单元格指针是一种特殊类型的光标,它在电子表格应用程序(如Microsoft Excel、Google Sheets等)中用于指示当前选中的单元格或用户可以输入数据的位置。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    单元格选择:
    允许用户通过点击来选择单个或多个单元格。
  •  
    内容编辑:
    指示用户可以在单元格中输入或编辑数据。
交互行为
  •  
    点击选择:
    用户可以通过点击来选择单元格,单元格指针随之移动到该单元格。
  •  
    拖动选择:
    用户可以拖动单元格指针来选择一个区域的单元格。
  •  
    输入编辑:
    用户可以在单元格指针所在的位置输入或编辑文本。
 
3.14 放大/缩小指针
介绍:放大/缩小指针通常表现为一个带有加号(+)或减号(-)的放大镜图标,用来指示用户当前正在进行放大或缩小的操作。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    放大内容:
    允许用户放大查看细节,例如地图、图片或文本。
  •  
    缩小内容:
    允许用户缩小以获得更广阔的视野。
交互行为
  •  
    点击放大/缩小:
    用户可以通过点击带有“+”或“-”符号的放大/缩小按钮来进行操作。
  •  
    拖动缩放:
    在一些应用中,用户可以通过拖动一个滑块或在触摸屏幕上用两个手指进行捏合操作来放大或缩小。
  •  
    滚轮缩放:
    使用鼠标滚轮或触控板的多点触控手势也可以实现放大或缩小。
 
3.15 移动&拖拽光标
介绍:移动光标是一种鼠标指针样式,通常表现为一个带有箭头的矩形或边框,表示用户可以通过拖动来移动某个元素或对象。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    元素移动:
    允许用户通过拖动操作来改变元素在界面上的位置。
  •  
    布局调整:
    用户可以通过移动光标来调整界面元素的布局。
交互行为
  •  
    点击并拖动:
    用户可以通过点击并拖动移动光标来移动元素。
  •  
    释放完成移动:
    用户释放鼠标按钮后,元素将停留在新位置。
 
3.16 抓取指针
介绍:抓取指针是一种鼠标指针样式,通常表现为一个张开的手或带有抓取图标的指针,表示用户可以通过拖动来抓取和移动元素。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    抓取元素:
    允许用户通过拖动操作来抓取界面上的元素。
  •  
    移动元素:
    在抓取元素后,用户可以将其移动到新的位置。
交互行为
  •  
    点击并拖动:
    用户可以通过点击并拖动抓取指针来抓取元素。
  •  
    释放完成移动:
    用户释放鼠标按钮后,元素将被放置在新位置。
 
3.17 载入光标
介绍:等待光标是一种特殊的光标样式,通常以一个旋转的图标、沙漏或进度条的形式出现,用来指示应用程序当前正在忙碌,正在等待某个操作完成或数据加载。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    指示忙碌状态:
    向用户明确表示应用程序正在忙碌,正在处理数据或执行任务。
  •  
    提供反馈:
    为用户提供即时的视觉反馈,告知他们操作正在进行中。
交互行为
  •  
    显示载入光标:
    当应用程序开始处理任务时,指针变为载入光标。
  •  
    隐藏载入光标:
    任务完成后,载入光标消失,恢复为正常指针样式。
 
3.18 滚动光标
介绍:滚动光标是一种用户界面元素,用来指示用户可以滚动查看的内容区域。它可以是滚动条上的滑块,也可以是鼠标滚轮或触控板的滚动手势。
鼠标指针的秘密:提升PC端交互的小技巧
 
 
功能
  •  
    内容浏览:
    允许用户浏览超出当前视图范围的内容。
  •  
    滚动内容:
    允许用户滚动查看内容,如网页、文档或图像。
交互行为
  •  
    拖动滚动:
    用户可以点击并拖动滚动条上的滑块来上下或左右滚动内容。
  •  
    滚轮滚动:
    使用鼠标滚轮或触控板的滚动手势可以快速滚动页面。
  •  
    自动滚动:
    在某些应用程序中,内容可以自动滚动,如在演示或某些游戏场景中。
 
四、鼠标指针的交互设计原则
4.1 一致性(Consistency)
  •  
    定义:一致性原则要求在整个应用程序或网站中,鼠标指针的行为和样式保持统一。这意味着相同的操作应产生相同的视觉反馈,相同的指针样式应表示相同的功能。
  •  
    应用:例如,如果标准箭头指针用于所有选择操作,那么用户就会学会预期这种指针样式,并知道何时可以进行选择。
 
4.2 反馈(Feedback)
  •  
    定义:反馈原则指的是系统应提供即时的视觉或听觉信号,以响应用户的操作。这有助于用户理解他们的操作是否成功,以及系统的状态。
  •  
    应用:例如,当用户将鼠标指针移动到按钮上时,按钮可能会改变颜色或显示阴影,以表明它是可点击的。
 
4.3 可见性(Visibility)
  •  
    定义:可见性原则确保鼠标指针在所有情况下都是可见的,以便用户始终知道他们当前的位置和可以进行的操作。
  •  
    应用:例如,当指针移动到特定元素上时,元素可能会高亮显示,或者指针可能会改变形状或大小,以提高其可见性。
 
4.4 适应性(Adaptability)
  •  
    定义:适应性原则指的是鼠标指针应能够适应不同的用户需求和上下文环境。这包括对不同屏幕尺寸、分辨率和用户偏好的适应。
  •  
    应用:例如,提供可调整的指针大小选项,以便视力不佳的用户可以更清楚地看到指针。或者在不同的操作系统或设备上使用适当的指针样式。
 
五、鼠标指针对用户体验影响
5.1 提升效率与准确性
  •  
    鼠标指针提供了一种直观的方式来快速导航和选择界面元素。通过精确的指向和点击,用户能够高效地完成任务,减少寻找和选择目标所需的时间。
  •  
    鼠标指针的变化可以即时反映用户的操作,如当用户将指针移动到链接上时,指针变成手形,这是一种即时的视觉反馈,告诉用户这是一个可点击的链接。
  •  
    清晰的指针状态变化可以减少用户在操作过程中的不确定性,帮助他们更好地理解界面的当前状态和预期行为,从而降低操作错误。
 
5.2 增强可访问性
  •  
    鼠标指针的设计考虑到了不同能力的用户。例如,可调整的指针大小和颜色对比度可以帮助视力不佳的用户更容易地看到和跟踪光标。
  •  
    辅助功能,如指针粘滞键或慢速指针移动,可以帮助运动障碍用户更准确地控制指针,确保所有用户都能有效地与界面交互。
 
5.3 个性化与品牌识别
  •  
    通过自定义鼠标指针的样式和动画,应用程序和网站可以增强其品牌识别度。独特的指针设计可以帮助用户在视觉上与品牌建立联系。
  •  
    个性化的指针样式可以提供更丰富的用户体验,让用户感觉界面更加贴心和专属。
 
六、技术实现与自定义
6.1 操作系统的鼠标指针设置
以mac系统为例:系统偏好设置 -> 辅助功能 -> 指针控制
鼠标指针的秘密:提升PC端交互的小技巧
 
 
  •  
    操作系统通常提供了一套预定义的鼠标指针方案,包括不同的指针形状和大小,以适应各种操作和视觉需求。
  •  
    用户可以通过控制面板或系统设置访问鼠标指针的配置选项。例如,在Windows中,用户可以打开“鼠标属性”对话框来更改指针速度、调整指针可见性(如指针大小和颜色),以及选择不同的指针方案。
  •  
    一些操作系统还提供了辅助功能,如指针的轨迹显示,帮助用户更清晰地追踪鼠标移动。
 
6.2 自定义指针样式与动画
  •  
    需要下载第三方应用程序完成自定义,例如:Steer Mouse;xGestures;Smooth Scroll;Catch Mouse等
  •  
    用户和设计师可以通过创建自定义指针样式来个性化他们的计算机或应用程序。这通常涉及选择或设计新的指针图像,并将其应用为鼠标指针。
  •  
    自定义指针样式可以包括独特的图形设计、颜色和主题,以匹配应用程序的品牌或用户的个性。
  •  
    动画指针可以提供更丰富的视觉反馈,例如,一个等待动画可以显示旋转的图标,以表明应用程序正在处理用户的操作。
 
6.3 编程控制指针行为
  •  
    开发者可以通过编程方式控制鼠标指针的行为,以增强应用程序的交互性。这包括改变指针的形状、位置、可见性,甚至创建自定义的指针效果。
  •  
    在Web开发中,CSS和JavaScript可以用于更改指针样式和行为。例如,cursor属性可以改变HTML元素上的指针图标,而JavaScript可以用于监听鼠标事件并动态更改指针样式。
  •  
    在桌面应用程序开发中,开发者可以使用相应的API来控制指针。例如,Windows API允许开发者设置自定义光标,而macOS的AppKit框架提供了设置光标的接口。
  •  
    编程还可以实现更高级的交互,如捕捉鼠标位置、响应鼠标事件,以及在特定条件下更改指针行为。
 
七、案例研究
7.1 成功的鼠标指针设计案例
 
Current Time 0:00
/
Duration Time 0:52
 
Loaded: 0%
 
Progress: 0.00%
Playback Rate
1.00x
 
 
7.2 鼠标指针设计中的常见问题
  •  
    不一致的指针样式:使用多种不同的指针样式可能会导致用户混淆,特别是如果指针变化与功能不匹配时。
  •  
    不明显的可交互元素:当指针移动到可交互元素上时,如果没有清晰的视觉反馈,用户可能不知道可以进行操作。
  •  
    指针尺寸不适当:指针太小或太大都可能影响用户体验,特别是在不同分辨率的屏幕上。
  •  
    缺乏视觉反馈:鼠标指针在悬停、点击或拖动时,如果没有适当的动画或变化,可能会让用户感到困惑。
  •  
    指针与界面元素间距不当:当用户点击按钮或其他元素时,如果指针位置与实际触发区域不一致,可能会导致误操作。
  •  
    指针样式与品牌形象不符:如果自定义指针样式与品牌的视觉形象不协调,可能会削弱品牌识别度。
  •  
    在不同操作系统或设备上的兼容性问题:设计的指针样式需要在不同的操作系统和设备上进行测试,以确保一致性和功能性。
  •  
    动画过度或不足:指针动画可能会吸引用户的注意力,但过度的动画可能会分散用户对主要内容的关注;不足的动画则可能无法提供足够的交互提示。
  •  
    指针行为与用户期望不符:用户对指针行为有一定的预期,如果指针的实际行为与这些预期不符,可能会导致用户感到困惑。
 
结语
鼠标指针的设计需要综合考虑功能性、美观性和用户体验。一个设计良好的鼠标指针不仅能够提升用户界面的整体质量和效率,还能够增强用户对产品或服务的满意度和忠诚度。希望通过本篇文章大家可以合理的利用各种鼠标指针类型。
 
附件文件如下:可根据需要自行下载。(用于在设计稿上标注,或与开发沟通)
鼠标指针的秘密:提升PC端交互的小技巧
 
 
 

作者:姚_Yale
链接:https://www.zcool.com.cn/article/ZMTYyNjY1Ng==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

用好「用户行为分析」让体验起飞

鹤鹤

用户行为分析-如何开始搭建
体验或交互设计知晓用户行为分析有什么用?
答:
我们所处的行业下,各类产品变得成熟精细,大家开始拼细节卷服务,市场竞争激烈。对于产品的各种优化改版也就开始变得谨慎,往往需要经过用户研究或是数据分析等工作来验证或决策,不再是由设计师或产品经理凭借过往经验办事或对标竞品照抄了,恰好用户行为分析就是用户洞察中具有代表性的一项;
 
体验或交互设计为什么要掌握这些呢?
答:
回归到用户体验相关设计,本身就是一项细致活儿,处处需要用户研究或数据洞察来辅助设计工作,了解其相关甚至熟悉搭建分析,从职能发展趋势来看,可能是迟早的事;
 
所以即使你目前用不上用户行为分析相关,也不要急着关掉文章,先简单了解一下吧,说不定你会有兴趣呢,说不定不久后刚好用上呢?
 
 
用户行为分析能干啥
用户行为分析是数据分析的一个重要领域,特别是在数字化服务行业中,主要目的是通过深入研究用户群体的流量动向以及操作行为特征等,来了解用户与产品间的关系、效果、趋势,以帮助我们优化产品设计、提升用户体验并驱动业务决策。
说人话就是:
监测用户在产品上做出了哪些行为、是否符合预期、有什么特征、问题在哪里,然后看看产品上需要做些什么调整或迎合用户的特征偏好来决策啥的。
 
用户行为分析有啥优势
具备一定的客观性与真实性
被动采集的行为数据有时候比用户口述反馈的信息要更真实有效,一方面更加直接,另一方面也少了些用户心理设防(霍桑效应);
用好「用户行为分析」让体验起飞【构建篇】
 
 
具备一定的代表性与准确性
由于是群体性的大数据,所以更有代表性,并且是即时的数据记录,不容易记混记错,准确性也更好;
用好「用户行为分析」让体验起飞【构建篇】
 
 
具备可持续性与可追溯性
通过数字化技术实现,可以伴随产品发展持续的采集数据,可以较为方便的调取过往数据进行比对追溯分析;
用好「用户行为分析」让体验起飞【构建篇】
 
 
具备一定的AI不可代替性
用户行为的背后依旧是人文心理等方面的内容分析或业务场景化决策,往往离不开人工的加持介入;
用好「用户行为分析」让体验起飞【构建篇】
 
 
实施构建的流程
以下是对用户行为分析的工作流图解,由于不同企业的诉求有差异,以下工作流仅代表大部分用作交流;
用好「用户行为分析」让体验起飞【构建篇】
 
 
 
关键节点拆解说明
此次主要聊聊基础的上手运用与注意事项,不涉及过深或难以理解的部分,如果说用户行为分析可以到达高等数学的程度,那么此次就讲讲加减乘除好了,师父领进门,修行靠个人,各位看客请上座!
用好「用户行为分析」让体验起飞【构建篇】
 
 
目标需求拆解
1、什么时候开始?
首先你的产品得有流量,然后得有一个关乎到用户行为的目标,例如想看看用户流量分布、了解功能使用频率、任务执行的漏斗关系、用户行为偏好、用户数据画像构建等,这个时候就可以考虑开始了,不然就可能南辕北辙费力不讨好。
用好「用户行为分析」让体验起飞【构建篇】
 
 
2、界定一个范围?
首先构建一套完善的用户行为分析系统并持续的维护与应用并不是一个轻松的事情,所以最好是针对性构建+多迭代,不要上来就想着做全盘搭建,表面的工作或问题往往可能只是浮冰,逐步的深入后问题会越来越多,个人深有体会!
用好「用户行为分析」让体验起飞【构建篇】
 
 
3、由上而下,找准路线?
通过业务目标向下拆解,一般上层目标无非是商业转化、用户活跃留存、任务通过率这些,向下拆解则是通过业务目标去锁定核心的业务场景或任务线路,这些核心的页面、场景或是任务线路,就是你前期可以界定的一个范围,后续的重点工作则是将核心功能的入口或路径穷举出来,避免数据对不上或找不到异常源头的情况。
在我的认知里,用户行为分析建设不是一锤子买卖,步伐走小一点,基础搭好一些,以后的迭代建设或维护也会轻松许多;
概括一下就是,不要追求全面,靠拢业务价值,关联上指标或者核心业务场景即可;
之前网上看到有大佬给了一个建设思路,这里搬来大家参考一下;
用好「用户行为分析」让体验起飞【构建篇】
 
 
带你认识不一样的埋点
数据埋点技术已经很成熟了,甚至有很多第三方的埋点+分析的服务,以及采集用户行为数据的不仅仅只有埋点技术方案,哪怕你做一个录屏技术都可以,只不过从数字化产品视角出发,埋点技术更有性价比,以及符合用户隐私权益,所以这里专门讲一下“埋点”这个老技术,熟悉的大佬们可以跳过埋点这部分。
1、埋点是什么
数字化应用大多有个特征,就是需要用户进行界面交互,有交互就有行为动作发生,而
数据埋点
就是将用户在
界面交互
时产生的
各种类型
监控日志
上报到产品后台去,这样业务团队就可以知道到用户在不同页面或业务场景下操作了什么,去往过哪些页面,当结合业务后台的订单等数据时,就可以还原出更加清晰的用户行为全貌。
 
通常这些埋点会分为
“页面访问(PV、UV)、区块曝光(区域、时长)、按钮操作(动作、状态)”
三大类型,并
携带交互元素和操作者的各类特征信息参数
,便于我们知晓更多的场景细节与用户情况,例如知晓这个【免费试用】按钮是对应了那个产品?点击的用户是否已开通这个产品?这个用户是否为付费用户?是否个人还是商家类型?用户从那个渠道进来的等,而且这些植入在产品代码中的埋点可以不间断持续的采集和配套产品迭代进行维护,可以帮助业务团队获取大量有效数据用作业务分析决策。
用好「用户行为分析」让体验起飞【构建篇】
 
 
2、什么时候派上用场
这些数据埋点主要是为业务目标的洞察分析服务,也就是说业务目标中需要采集用户行为数据时,埋点就要派上用场了,相比传统的业务日志,埋点可以收集到更加全面的界面交互的行为数据,能够简易的还原出一套线上用户的使用情景,而不仅限于一些业务后台就能统计出的转化率或基础数据等;
用好「用户行为分析」让体验起飞【构建篇】
 
 
并且埋点数据可以与业务数据分开存储运维,这意味着埋点数据可以更迅速的根据设定的指标公式统计出期望的数据或视图,并且不会干扰业务访问的性能质量,因此产品迭代后的新老数据对比、营销活动的效果评估、用户行为的特征偏好识别等,数据埋点都以可以派上用场的。
 
3、怎么提埋点需求?
首先埋点需求没有固定的文档格式,其次不同埋点服务平台的要求也有差异,就移动端来讲,很多服务商已经支持可视化埋点、全埋点、无埋点服务,可以实现自动识别交互元素并进行埋点操作,大大减少了开发工作量,那么再聊回埋点需求怎么提。
 
核心结论就是由上而下,通过业务目标或核心指标进行拆解,然后关联到核心的任务流程上,对于一个页面或一套流程没有必要进行全篇埋点,技巧我概括为以下几点;
用好「用户行为分析」让体验起飞【构建篇】
 
 
埋点需求的主要内容基本包含以下,根据业务或埋点平台的差异,可以自行调整;
用好「用户行为分析」让体验起飞【构建篇】
 
 
4、业务扩参怎么一回事儿
扩参即扩展参数,指在当前用户界面中可以请求到的业务数据,并将这些业务数据绑定到埋点日志中一并上报给埋点数据后台,通常为一些用户属性参数、业务属性参数、设备属性参数、网络环境参数,这样我们就可以通过这些额外的参数进行数据分析或是过滤,举个典型案例;
用好「用户行为分析」让体验起飞【构建篇】
 
 
 
数据治理是做什么
为什么要治理?
简单说就是提升数据质量与准确性,在庞大的一套数据中,我们需要弄清楚数据之间的映射关系,即不同的数据参数代表了什么元素什么动作什么含义,数据是否有缺漏或冗余、报错漏报乱报、是否有无效的脏数据(例如内部的测试数据或脚本爬虫等带来的数据),如果我们不去将这些数据进行治理,则统计出的数据指标特征或趋势都将不可靠,无法被商业应用。
简单讲就是元数据没治理准确,得到的数据指标也就失去了实用价值。
用好「用户行为分析」让体验起飞【构建篇】
 
 
怎么去治理?
本质是查缺补漏将无效的数据过滤掉或纠错
,再把数据涵义映射成具体的指标或描述,用作进一步的指标计算与分析,如果数据又多又杂,你会发觉这一步要你老命,例如埋点就需要逐个查询原始埋点的位置、触发条件、埋点用途、埋点含义甚至与关联业务数据的关系校对等。
不过还好,
一般来讲这些工作都是数据建模(BI)相关人员去负责的
作为应用层的我们,更多的是能够根据业务目标提出埋点需求、提出指标与数据报表需求,以及通过数据核算或查看数据趋势等手段找出异常让 BI 修复
,所以这里就不展开埋点数据治理的方法了。
 
数据维护不易
就埋点监控用户行为的方式来讲,除了平时的治理与报表问题修复,每次迭代改版还要做好相关埋点信息的管理与维护更新,保证不出错,不影响关联指标,甚至是线上用户偏好的推荐算法等应用,特别是数据规模越来越大后,又密切关联着业务决策时,数据更不容出错,且要求准确。
 
三大分析内容产出
1、内容产出的先后
在用户行为分析内容构建的过程中,除非是有特定场景特定诉求,通常个人认为都是先出指标、再完善行为链路、再逐步丰满用户画像的一个过程,原因如下;
  1.  
    通常先接到的都是一些核心指标,例如转化率、留存率、活跃度等,同时这些指标也是上层最先关注到的;
  2.  
    接着就是完善不同场景或任务路径相关,帮助洞察微观视角下的体验障碍或用户偏好等,产出流量统计、流程漏斗等,起到业务体验的洞察改善决策作用;
  3.  
    用户画像的数据本身就没那么好收集,并且是一个逐步完善和被业务决策应用的过程,所以一开始不会直接奔着用户画像构建开始;
 
2、基础指标构建
所谓指标可以理解成是产品某项业务的成绩,例如我是卖包子的,那么我的指标大概率就是每天卖出去多少包子、利润有多少、哪款包子销量高,根据这些信息我就可以知道我平时应该准备多少包子、哪些品类的包子需要多做一些、我靠卖包子能赚多少钱。
用好「用户行为分析」让体验起飞【构建篇】
 
 
指标构建的原理
实际上指标的构建逻辑可以很简单,例如A占B的百分比、ABC的总和、连续多天A占B的变化等,很多加减乘除的算法就能搞定,主要是能拿到真实数据,不然我怀疑你在做烂账......
 
常见指标:
用好「用户行为分析」让体验起飞【构建篇】
 
 
3、行为链路分析
用户行为路径是一种数字化的旅行地图,相比较传统服务的旅行地图,场景会更纯粹、意图更准确、数据采集更便捷,主要作用有以下几点;
  •  
    分析用户在产品中的活动范围或页面路径的关系,可以帮助了解用户活跃分布,流量走向等情况;
  •  
    识别在任务或流程漏斗中的卡点或跳失情况,帮助优化流程体验或提升转化率等指标;
  •  
    通过用户的互动方式或路径特征来进行用户分类或偏好分析预测等,用于内容推荐算法或精准营销;
 
这些行为我们可以大致分为浏览、消费、互动三大类,根据不同的业务类型,可以选择性采集和分析相关数据,例如电商产品就比较关注用户的浏览与消费行为,常见的有商品浏览、添加购物车到下单;
而社交应用就更关注用户的互动行为,如不同类型的内容访问、评论点赞、关注收藏分享等;
这些数据最终可能由可视化的数据报表呈现出来,以便于业务团队快捷的找到数据问题或特征,如常见的漏斗图、桑基图、雷达图、树状图、散点图、决策树等;
用好「用户行为分析」让体验起飞【构建篇】
 
 
小话题延展
最近在UXRen的一场分享会中,听罗浩讲了体验营销的话题,虽然是关于用户研究在职能岗位上挖掘新的商业能力的内容,但是其中有一段是关于如何在旅行地图中挖掘新的营销触点,有一些体会,这里结合用户行为链路分析简单聊一下;
背景与问题:
产品功能与业务增多,引流渠道多样化,不同渠道流量的撬动关键是什么,核心场景具备哪些能力,哪些渠道的流量能吃掉,这些流量所处的触点或场景能支持什么,用户意图是什么,产品能力能满足什么,产品发展可以支持哪些?如何分流或匹配各类流量的意图,并提供路径分发,这些用户流量数据有何趋势或特征,是否能与场景或触点进行根因分析,是否沉淀行为或偏好模型?
行为路径的重点:
在于观察不同触点下的客户意图,展开业务所能触及的部分或新的机会,并匹配合适的关键路径,以提升转化或用户粘性等,然后做数据回归分析,抓取有效的用户特征信息,并应用到产品的内容推荐或外部引流投放信息优化上。
流程过程:
触点展开与机会洞察,触点场景——意图识别——结果匹配(关键路径)——(根因回归)画像更新——算法推荐——广告优化
这一套下来,是不是感觉有点儿似成相识?后来一想这不就是一套用户增长的设计思路嘛。
这一套下来,是不是感觉有点儿似成相识?后来一想这不就是一套用户增长的设计思路嘛。
 
 
4、用户数据画像
主要是帮助了解和理解用户,使得我们可以划分用户群体和识别偏好特征,最终以提供精准营销或是洞察用户诉求来迭代改善产品。
其中偏好特征我们还可以根据业务属性细分为兴趣偏好、行为偏好、消费偏好等,并为不同偏好特征的群体提供个性化的内容服务,例如常见的内容标签标记,通过识别用户常看内容的标签,来推荐类似的标签的内容或是有潜在兴趣的标签内容来抓住用户的兴趣。
用好「用户行为分析」让体验起飞【构建篇】
 
 
 
常见画像指标构建
这些指标会通过用户行为、设备信息、个人资料的完善来逐步获取,主要可以了解到用户的地域分布、年龄与性别分布、设备与活跃度情况,相应的数据在业务后台基本上都能够获取到,只需要将某个时间分区的数据拉出来,经过Excel之类的软件把数据加工一下,就能够获取到相关数据视图。
如果将多个数据指标结合起来分析,便可以获取一些复合型数据指标,例如哪些年龄段的用户群体消费能力更强、活跃度更高、不同教育背景的兴趣爱好是否有一定的关联性等等;
用好「用户行为分析」让体验起飞【构建篇】
 
 
进阶画像指标构建
进阶的数据画像会完善更多的用户特征信息,便于业务团队找到用户群体的特征,做进一步的精细化运营或内容推荐,常见的画像指标如下;
此外就是在收集用户数据的过程中,保证用户隐私安全、合法性和安全性。
此外就是在收集用户数据的过程中,保证用户隐私安全、合法性和安全性。
 
用户分层模型应用
当我们采集到一定的用户数据后,就可以在数据画像的构建阶段进一步完成用户分层工作,这一步是为了将用户分类,因为不同用户群的目的是有差异的,例如闲逛、精准采购、参与活动的等等,以提供差异化的服务做精准营销、识别用户群体特征做业务策略决策、或是优化产品体验相关,不过当你的用户规模尚小,运营模式简单,你也不用迫切去进行用户分层相关,因为收益不大。
那么通常都有哪些用户分层模型呢?其实你并不陌生,一些给你列举了一些;
用好「用户行为分析」让体验起飞【构建篇】
 
 
分析结论到应用
相信你也发现了,用户行为分析的构建与产出并不只是行为链路的数据,同时会包揽很多其他的有价值的指标与数据,所以不要被用户行为四个字迷惑,或许你此刻正需要构建相关数据。
 
当你准备构建或整理用户行为分析前,记得目标或问题先行,针对性采集数据或建设指标,在你有了相对准确或清晰易懂的数据后,那些数据报表或图表根本难不倒你,说白了无非是将纯纯的一堆数据换了形式展示,如果你数据可视化的形式与应用不够了解,你可以看看AntV官网的介绍说明了解一下,其实你也不用每个都研究个遍,实用的就那么几个,酷炫是要代价的,报表搭建平台支不支持、Excel支不支持、时间精力够不够研发给你整,都是问题~
 
 
此篇最后!
你可能疑问没有完整的教程手把手教你啊,其实不然,构建的前提、流程、要点、建设方向均在此篇中交代过,当你按照这套流程框架去做,基本上不会有啥大问题,一般来讲这些内容也够用,至于选用哪些数据埋点平台、数据分析平台、报表搭建平台、视自家公司情况而定吧。
也不要担心在数据报表搭建或分析的过程中,你搞不定,是不是你执行先不说,多问问百度或平台客服总能解决,如果就是觉得很难上手,那么大概率是工具你不熟,或者工具不好用。
 
 


作者:泡泡_PAO
链接:https://www.zcool.com.cn/article/ZMTYyOTMxNg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

WechatIMG27.jpg

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

 

不错,这些设计让我开眼啦!

清阳

有时候创意就体现在很细节的局部,不一定是多么惊人的想法,只要一个细微的差异,就能拿捏用户的情绪。一些简单的设计处理,只要让用户多看几眼,就能实现设计目的。
 
本期黑马哥继续为大家分享一些不错的设计案例,希望这些设计思路可以给你开眼,带给你更多创作灵感。
不错,这些设计让我开眼啦!
 
 
 
 
一、情感化的打卡设计
通过线上打卡已经成为众多业务方向的选择,在便利性的同时也方便管理与追溯。为了提高用户的打卡参与度,产品设计师也在不断挖掘更有趣、体验更好的解决方案。
 
作为上班族和家长们会用到一些打卡软件来辅助完成工作或者学习等,平时我也会经常使用钉钉给小孩进行课业打卡。在完成打卡后“我的成果”展示设计中,打卡标记的设计中嵌入系列 IP 形象或者图形,通过情感化的设计提升了成果展示的趣味性,更能激发小朋友参与打卡的热度。
不错,这些设计让我开眼啦!
 
 
 
 
二、底部标签栏的二级导航设计
底部标签栏更便于用户操作频繁切换的功能,通常 3~5 个为最佳,如果遇到超过极限值时就需要在交互形式上面思考解决方案。
 
在洋葱学园 APP 中,体验到一个底部标签栏带有二级导航的设计方案,很好的解决了超过极限值的情况。在二级导航设计中强化了字体和添加了图片背景区分状态,以差异化的视觉表现吸引用户关注度,以此增加二级导航的操作率。
不错,这些设计让我开眼啦!
 
 
 
 
三、图标设计的背景化运用
图标在产品中主要分为功能性和修饰性,对产品的操作体验和感官体验都起到了非常重要的作用,图标的运用也被深挖到各种业务场景中。
 
在哔哩哔哩任务中心栏目中,展示红包、奖励、积分、奖品的设计中,除了量化的数字结合以外,在各自数据背景中还添加了图标设计。相较于单纯的数据展示而言,图标背景化的运用不仅提升了设计的感官度,也助力了业务属性的差异化。
不错,这些设计让我开眼啦!
 
 
 
 
四、品牌化的弹窗设计
弹窗设计在图形创意、视觉表现和造型等方面都有更多发挥空间,为了提升转化率和降低阻力设计带来的负面情绪,提升弹窗设计的体验感也是至关重要的。
 
在使用我爱我家 APP 时,发现新版本的弹窗设计造型结合品牌和业务性质进行设计,区别于常规造型的弹窗表达。品牌化的探索可以强化用户对产品的品牌记忆度,深化用户粘性。
不错,这些设计让我开眼啦!
 
 
 
 
五、色彩丰富的卡片式设计
卡片式设计是近些年非常流行的 UI 趋势之一,卡片式设计无论在视觉表现力还是造型层面都呈现出了众多案例,简单的形式被赋予了各式各样的表达。
 
最近发现了一个色彩丰富的卡片式设计案例,相较于常规的白色卡片而言,嘀嗒出行的设计中给带有描边的卡片添加了局部突出部位作为背景。在色彩渐变的强化中,不仅使得卡片结构化,也体现出了青春活泼的感官氛围。
不错,这些设计让我开眼啦!
 
 
 
 
六、动态 IP 强化功能关注度
品牌 IP 在产品设计中的运用已经逐步普及,提升情感化设计的同时,也是助力品牌化的关键。
 
在掌上生活 APP 设计中,为了突出“服务大厅”入口的曝光度,采用动态 IP 来强化该功能的关注度。动态化的小招喵更有吸引力,强化功能的同时也让用户感受到轻松愉悦,提升了产品设计的情感化体验值。
不错,这些设计让我开眼啦!
 
 
不错,这些设计让我开眼啦!
 
 
 
 
七、情感化的用户反馈设计
用户反馈是提高忠诚度和采集数据的关键,为了提高用户反馈的意愿度,从情感化设计或者互动性等方面都在不断探索。
 
通过饿了么订餐之后,当配送员完成送达时,会弹窗提示用户是否已收到商品。通过表情化的图标配合文案设计,情绪化的表达使得反馈更清晰,更能提升用户的反馈意愿。
不错,这些设计让我开眼啦!
 
 
 
 
八、人性化的导向设计
地图软件的出现改变了大家的出行方式,再也不会担心迷路,可以尽情地走南闯北。随着产品体验的不断升级,地图软件也越来越人性化,带给用户优质的导航体验。
 
对于驾驶的用户来说,如果使用高德地图提前开始导航会进行人性化的导向,方便导航时间预估得更加精准。点击“我已上车”即可开始导航,让导航体验变得更加人性化。
不错,这些设计让我开眼啦!
 
 
 
 
九、动态头像设置
为了提升预设内容的体验度,针对一些默认的内容也在逐步走向情感化设计的方向,可以让用户感受到更加真实的操作体验。
 
针对头像设置也从默认的灰色人物剪影演变为个性化的 IP 形象、人偶、真实人物形象等,为了提升互动性,也在提供动态化的解决方案。比如豆包 APP 在给豆包设置头像时,设计了不同性别的动态头像,使得头像表达更加生动形象。
不错,这些设计让我开眼啦!
 
 
 
 
十、个性化的界面设计
产品设计的风格越来越多样化,为了体现差异化的体验,个性化的界面设计也是层出不穷。
 
最近在点餐时体验到一个设计风格非常个性化的小程序,名字叫:WHAT TO EAT。区别于别的点餐类产品,该产品设计风格以线性插画风结合,非常有个性化。不仅强化了自身品牌感,也深化了用户的记忆点。
不错,这些设计让我开眼啦!
 
 
 
 
小结
优秀的设计细节可以帮助我们打开禁锢的思维,创作出更优秀的设计方案。描述的观点属于个人经验总结,不足之处我们继续努力改进。
 
本文由 @黑马青年 原创发布。未经许可,禁止转载。


作者:黑马青年
链接:https://www.zcool.com.cn/article/ZMTY0MDAyNA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

洞察用户心声:解锁用户习惯,让产品成为用户的贴心小助手

鹤鹤

例如,Windows和Mac操作系统的用户在面对不同的软件关闭方式时,会因为习惯的差异而感到不适应。这种不适应性揭示了改变用户习惯需要付出学习成本,而这种成本的高低也直接影响用户对产品的接受程度。

发现了10个非常棒的UI动效案例

清阳

动效在 UI 场景中的运用已经非常普遍,带给用户的体验升级也是很直观的。无论是一个图标动效到界面间的转场动效,还是聊天场景中的表情动效等,都证明了动效已经是无处不在。

 

最近黑马哥在体验产品的过程中,发现了很多优秀的动效案例,今天选择其中的 10 个和大家一起交流学习,希望能够带给大家一些灵感启发。

 

 

 

 

01. 动效,让点赞与众不同

 

动态表情为社交场景带来更活跃的体验,使得交流过程变得更加趣味性。一个动态的表情不仅活跃了氛围,也使得通过简单的一个符号代表了千言万语。

 

最近在使用钉钉 APP 进行聊天的过程中,发现输入框的大拇指图标在长按的时候结合了动效的变化,对话场景中出现的大拇指表情会随着长按而增大。结合动效和长按手势,为点赞的图标增加了不一样的趣味性,带给用户不一样的社交体验。

 

 

 

 

02. 动态提醒,增强消息的关注度

 

各类通知/消息在产品中随处可见,红点提示刚出现的时候还引起了用户强迫症,短时间内也增强了消息的阅读率。随着红点效应逐渐淡化,未读消息的点击率逐渐降低,大家都在尝试更多提高关注度的形式。

 

支付宝在消息模块的服务提醒中,采用了动态形式提高关注度。当用户点击消息进入界面时,小铃铛图标会左右晃动,以此来吸引用户的目光,达到增加关注度的目的。

 

 

 

 

03. 图标动效,让你脱颖而出

 

在金刚区众多的业务模块中,想要突出重点模块的关注度,采用动态图标是比较常用的方式。采用动静结合的形式,会让动态表达得到突出。

 

比如 Keep App 将活动挑战图标动效化,在不改变配色规则和图标设计规范前提下,依然可以达到突出主题的作用。

 

 

 

 

04. 博人眼球的动态悬浮广告

 

在不破坏产品结构的前提下,融入广告的做法中,悬浮层广告是较为明显的形式。通常是静态异形和动态异形较多,而动态的关注度相对更强一些。

 

比如 Keep App 将活动的折扣信息以悬浮层的形式表达,既不会占用太多空间(随着滑动会隐藏显示),又能吸引用户的关注度。如果用户觉得影响操作,也可以直接关闭,就不会反复提醒而形成干扰。

 

 

 

 

05. 内容模块结合动效替换突出存在感

 

在一些内容量比较多的产品中,比如电商产品,很多内容模块都是百花齐放。都想要突出自己模块的存在感,带来更好的流量引入。而动效的结合也是不错的选择,但是需要考虑动效的干扰度。

 

当当 App 在突出今日抢购栏目时,为了不影响临近板块的干扰度,利用动效转场来替换展示的商品信息。缩放替换商品时的动效既能达到差异化,也不会破坏整体的结构,算是一举两得的设计解决方案。

 

 

 

 

06. 微弱的动效也能呈现有温度的设计

 

有时候在进行产品设计的时候,动效带来的关注度并不是需要很强的表现力,一些微弱的动效依然可以提升产品体验,带给用户更有温度的设计。

 

自如 App 整体的设计都是做得非常不错的,在“我的”板块头部区域,结合背景插画视觉感也是非常不错。插画中部分元素的微动效增强了生活气息和真实感,让用户感受到这是一款有温度的产品,提升用户的好感度。

 

 

 

 

07. 动态感十足的底部标签栏

 

图标动效运用到底部标签栏十分普遍,在这个频繁切换的操作中,动态的形式可以带来更强的趣味性和关注度。

 

优酷 App 底部标签栏采用多种颜色变化转场,结合路径动效带来动感十足的体验。首页图标还结合了刷新的功能,方便用户进行内容的刷新,增强用户体验感。

 

 

 

 

08. 拓展功能的动态指引设计

 

针对一些功能体量较大的产品,会经常结合一些隐藏式设计,拓展出更多功能操作。通常默认为展开状态,在滑动浏览内容时隐藏,通过动效吸引点击展开,不会造成主内容的干扰。

 

比如平安口袋银行底部标签栏上方的拓展功能区,动态形式的展开与隐藏方便用户浏览主页内容。个别内容采用动态设计(点我抽奖),突出其点击欲望。动态设计不仅提高了功能的曝光度,也能引导用户操作,将繁琐的操作变得更便利。

 

 

 

 

09. 结合动态 IP 的下拉刷新

 

针对下拉刷新这一常规操作,设计形式也是丰富多样。结合 IP 形象进行动态演变完成刷新动作,被很多产品设计师所采纳。

 

美团外卖就将品牌 IP 形象结合得恰到好处,下拉刷新时两只耳朵摇摆非常俏皮可爱,松开后 IP 形象露出,还配合眨眼睛等可爱的表情动效。情感化设计结合动态表现,拉近与用户之间的亲和力,带给用户更人性化的使用体验。

 

 

 

 

10. 图标动效带动局部功能的关注度

 

对于一些局部功能或者模块占比较小的栏目,为了提高曝光度,获得用户的关注度,动态的形式是比较常用的方法。通常会在图标部分、文字部分、装饰元素部分等进行动效设计,带来的效果也是显而易见。

 

比如 QQ 音乐在“我的”模块中,将活动中心、会员中心、每日签到的图标采用动态设计形式,虽然几个模块占比较小,但是依然能够获得用户的关注度。

 

 

 

 

小结

 

动效表达在产品设计中的应用越发普及,不仅可以强化功能的关注度,也能带给用户感官体验上的升级。优秀案例的积累和分析,有助于我们掌握更多的表现形式,灵活的运用到项目设计中。

 

 

作者:黑马青年(vx: heimaux)

本文由 @黑马青年 原创发布。未经许可,禁止转载。



作者:黑马青年
链接:https://www.zcool.com.cn/article/ZMTMzMTI5Mg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

54个绝妙UI/UX设计秘诀:让你的设计脱颖而出!

清阳

当你为你的项目创建有效的,可访问的,漂亮的ui时,只需要最小的调整来帮助快速改善你的设计。 努力创造。在这篇简短且易于理解的指南中,我收集了一些容易放置的内容。在实践中,这些小技巧可以毫不费力地帮助你改善你的设计,还有用户体验。

希望你喜欢!

1·让你的元素出现更多

 

用微妙的边界定义。

使用多重阴影或非常微妙的边界(只是一个阴影比你的实际影子)周围的某些元素可以使这些元素出现

更清晰,更清晰,帮助你避免那些看起来泥泞的阴影。

 

 

2.减少字母间距

 

标题给一个更好的光学范围。减少长格式正文的字母间距?这是一个大大的“不”。但对于标题……我要说“是”!

你的标题很可能会比他们的标题更大,更重。相比于正文,字母之间的间距有时会出现视觉上更大,这并不是你想要的。减少字母间距,只是少量,可以使你的标题视觉平衡,更易于阅读,通常更赏心悦目。

 

 

3.图表一致性

 

为了一致性,确保你的图标具有相同的视觉风格。确保它们拥有相同的视觉风格;同样的重量,要么填满,要么秒变了。不要混搭。

 

 

4.页面可以用一种字体

 

只使用一种字体就很好。在设计时,使用单一字体是绝对没问题的,这样做实际上可以帮你产生更强、更持久的结果。忽略“总是使用两种字体”最小值的人群。使用以下组合重量,大小和颜色,你仍然可以产生完美的可接受的结果。虽然只有一个单独的字体。

 

 

5.适当的留白

 

留白是UI设计朋友。大胆的使用。适度的留白,即使是少量的白色物质,但要使用得当。能让你的设计透气,而且看起来更光亮。

 

 

6.20pt的文字

 

创建长篇内容?给20 pt试试。对于长形式的内容(即微博文章,项目描述等等),试着这样做20pt(甚至更多一点)为你的文本字号。当然,这取决于所选择的字体,但大多数流行的字体在20pt时效果得很好,并带来更好的阅读体验当你的用户面对一堵文字墙的时候。18pt太过时了。

 

 

7.字号集比例

 

使用字体比例定义一个适合的字体大小集。使用字体比例可以帮助您轻松、实用地定义一组字体大小。顾名思义,Type Scale基于一个比例因子(比如1.25)工作的。从一个基本字体大小(18px)和乘(或除)它与缩放因子得到的字体大小要么更高(即;H₁,H₂等),或较低层次(即;标题、按钮等)字体比例将帮助你产生看起来和谐的文本字号集。因为他们的大小根据设定的固定比例增加和减少。

 

 

8.界面颜色定义

 

选择一个基本颜色,然后使用色彩和色调增加均匀性。你猜怎么着?你不必总是用大量的颜色填充你的设计。如果项目允许,简单地使用一个有限的调色板选择一个基地颜色,然后使用你选择的颜色的色调和阴影可以增加一致性以最简单的方式来改变你的设计。

 

 

9.登陆用户体验

 

改善用户登录的体验。记住拇指规则。允许用户在任何时候跳过您的移动应用程序上线序列,并且放置跳过链接在拇指容易触及的位置。只是一个简单的调整,可以为你的用户提供更好的体验……

记住,拇指仍然是主宰!

 

 

 

10.阴影来自一个光源

 

你的影子来自其中一个光源对吧?确保你的影子总是来自一个光源。这是一个简单的错误,但它可以让你的设计看起来更抛光且统一。记住,我们不是生活在一个拥有一千个太阳的国度里。

 

 

 

11.建立字体集合

 

使用更好的字体组合,效率会很很快。当你想要提高你的字体组合技巧的时候,当面对1000个字体选择,只是去寻找对应的自己集合,效率会快很多。

 

 

 

12.提高你的对比

 

文字和图像与一个微妙的覆盖。根据文本可能放置在图像上方的位置,您可以选择尝试,并测试完整的图像覆盖,或更微妙的(从下到上,或从上到下)渐变叠加,以实现两者之间的简单对比。为了在你的文本之间形成良好的对比,不要太复杂的内容和图片。

 

 

13.使用居中排列文字要有节制

 

太多就会导致用户体验不合格。尽量只在标题和小段落中使用中心文字。对于几乎所有其他内容,保持文本左对齐。你的用户会感谢你的你。

 

 

14.多字重

 

当选择一个多用途的文字,尽量找一个大量权重。你搜索的字体有很多选择吗?重量、风格?如果你打算在你的一些项目中使用它,请尝试并确保它是这样做的。只有一种重量或样式。不行的。如果可以的话,我建议你避开这些。当然也有例外,某些项目会要求“只有一种风格”

更精致的字体,但对于绝大多数项目,你想要的字体再多一点就能…嗯…选择。即使你决定只使用两种或三种重量或风格,希望你在设计过程的后期需要更多的空间。

 

 

 

15.浅色背景不要文本过亮

 

想要创造更容易理解的界面,对吧?把你的文字调暗在光亮的背景上。在浅色背景下工作时,不要让你的文本太亮。

 

 

16.纯黑色文字未必是好

 

当涉及到长形式的内容时,某些常规的粗细字体仍然可以看。但太重了,在屏幕上会很僵硬。你可以很容易地解决这个问题,选择一些像深灰色(即#4F4F4F)的基调,把文字往下写,让眼睛更容易看。

 

 

17.通过色彩对比度作区分

总是通过icon最突出的内容。你认为这是常识,对吗?我并不觉得。通过使用色彩对比度做区分,尺寸和标签,确保尽可能突出。如果可以的话,不要总是只依赖图标。如果可以使用文本标签,那就使用它们,让用户更好地理解。

 

 

18.字体越小,行高越大

 

当你的字体变小时,请增加行高,以达到更好的通用性。这同样适用于当你的字体大小增加。简单地降低行高。

 

 

19.“Il1”测试文字可读性

 

使用x-height来测试字体的可读性。基本上,x-height是一个小写字母' x '相对于大写字母高度 (T)的相同字体。如果你的字体有一个大的x高,通常有助于更好地阅读,特别是在使用长形式的正文文本。另一种确定字体可读性,并缩小范围的方法如果你有一些无法选择的字体,可以做这个测试,比较来自特定字体的三个字符:大写字母I,小写的L和数字1。

 

 

 

20.突出实用动作

 

当设计一个在应用程序内部使用的菜单时,确保提供最多经常使用的动作(例如:上传图像,添加文件等)最突出的屏幕上。

 

 

 

21.颜色-从你的图像中选择

 

颜色-从你的图像中选择,会给你的产品带来生命。简单地从你的产品图片中选择颜色,然后应用各种色调。你选择的颜色阴影到你的背景,文字,图标或更多,可以添加。你的设计具有丰富的视觉趣味和个性。

 

 

22.不同字体,不同行高

 

基于字体的x坐标,设置您的线高度。不同x高的字体需要不同的行高测量,实现文本行之间的正确分隔。即使你可能有两种字体相同的字体大小(即:18px)它们的x的高度可以有很大的不同,这在选择正确的线的种类起着很大的作用高度来实现。

 

 

23.突出最重要元素的方式

 

突出最重要的元素。通过使用字体大小,权重,颜色和布局的组合,可以很轻松的突出UI中最重要的元素。只是很简单,但微妙的调整,让用户体验更好一点。

 

 

24.错误下额外的视觉辅助

 

操作错误的时候,添加一个额外的视觉辅助。在用户刚刚采取的操作附近添加一个错误消息可以是简单的形式,但很有帮助,当他们填写任何形式的表格时额外的视觉辅助。

 

 

25.移动端热区创建

 

尝试在移动端创建慷慨的热区。当为移动设备设计时,尝试创建足够大的可点击区域,是好的。对于只包含文本的按钮和链接来说,这是很有挑战性的,尽可能使用带有标签的图标。

以下是iOS和Android的最小推荐点击区域:

44 x 44pt用于iOS

48x48dp用于Android

 

 

26.短标题上尽量使用全大写

 

在短标题上尽量使用全大写。如果你想在标题上使用全大写,请确保它们在任何时候都很短。有可能,最好是一行。将它们用于较长的文本是不好的。和之前的技巧一样,在标题中添加少量的字母间距。能让他们呼吸顺畅,而且视觉效果更好。

 

 

27.保持文字与图像的对比度

 

在轻文本和图像之间,保持可接受的对比度。一定要确保浅色的文字在浅色的背景下是清晰的。简单地应用一个稍微不透明的背景在你的文本后面将保持这些元素之间的对比度很好。

 

 

28.英文标题字体推荐

 

看看这些很棒的字体,用在标题非常好的。发现他们真的很适合标题,设计感很强。(我没有推广费用,请放心用)

 

 

29.英文长文本字体推荐

 

看看这些很棒的字体,用于长文本是非常好的,强烈推荐使用。(我仍然没有任何推广费)。

 

 

30.让垂直节奏恰到好处

 

标题和正文。当你想实现一个好的垂直节奏,以及一个强大的视觉之间,需要对文本元素排版、间距作设计。我见过许多设计,最常见的是在文章列表中,它们已经被应用标题的上下空白相等,这样就失去了这种联系在它下面有正文。在这种情况下,我总是会给我的标题更多的顶部边距,而在底部,标题和下面的内容之间的连接是更强,有良好的垂直节奏,视觉层次保留在所有的文章之间。

 

 

31.使用具有信息性的提示符

 

对于下载指标,试着去做尽可能提供信息。对于用户,尝试使具有信息性的下载指示符对用户很友好。你可以通过使用颜色来实现这一点,用百分数来显示当前进度,一个简单的图标,让他们可以在任何地方取消下载时间。

 

 

 

32.保持标题相对简洁

 

如果你能保持标题简短,简洁……“想做就做”。

如果可以,如果合适的话,保持标题简短,时髦,切中要点。而不是“这是你的风格,你的方式”,简单地使用像这样的“你的风格。你的方式。”人们会浏览,保持这些标题简短有力有助于他们更快地消化中的信息。

记住,这种方式可能会让人感觉很突然,你需要考虑一下你所从事的项目类型,以及目标受众来决定方法是合适的,相对于更标准的格式。

 

 

33.选择合适的字体

 

正确的设计“声音”。在项目中处理文本时,选择正确的字体将影响就像你说话的声音一样。要大声,要柔和,要友好,要正式,要有趣。每一种字体都有自己独特的声音,关键在于找到合适的字体你正在做的项目的声音。当你刚接触字体时,这似乎是一项艰巨的任务,所以不要害怕从类似的项目中获得灵感,并从这些项目中汲取灵感它们有助于影响你的决定,并提高你的理解什么是合适的。

 

 

 

34.行长度的平衡点

 

你的正文,并提高可读性处理正文文本,并试图找到合适的行长度可能有点平衡。对于一个单独的列页面,45到75个字符被普遍认为是满意的行长度,而行长度为66个字符(包括字母和空格)被发现是最佳位置。当然,字体大小和行高在决定可读性时也起着重要作用,但是对于行长,保持在45到75个字符之间,就会更好了。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

35.幽灵文字提升用户体验

 

偶尔使用纯装饰的幽灵文字也可以,但要保留阅读的问题。屏幕上的大部分文本内容应该坚持可用性最佳的做法是没有问题的。但有时,希望添加纯出于装饰目的的文本,我们不希望所有的设计都落入乏味。如果没有元素会以任何方式影响用户体验,那么出于装饰的原因,插入奇怪的元素是可以的。



 

 

36.界面元素保证快速区分

 

使用户界面中的元素彼此区分。按钮、通知,ui中两个独立但重要的元素。如果可以的话,总是试着确保你的用户能够快速地将它们区分开来,轻松扫描您的网站或应用程序。按钮,在大多数情况下,将优先,所以确保他们是最突出的。项目在屏幕上,并很容易区分其他元素。

 

 

37.投影的玩儿法

 

只是一些细微的阴影,你所需要的。我们都喜欢阴影,对吧?它们可以作为微妙又很强大的视觉线索,在您的设计中使用要适度。现实世界中的阴影,在大多数情况下几乎是不可察觉的,而且所以你应该在ui中模仿这种行为。放下沉重和黑暗的阴影并降低不透明度,以实现一些的东西更微妙和栩栩如生。

 



38.全大写文本

使用全部大写?选择适合的字体,能够达到光学清晰度。在你的设计中适度使用“全部大写”是很好的。选择一个合适的字体与行高和较重的字重,使用户的光学清晰度。

 

 

39.让面包屑脱颖而出

让面包屑脱颖而出,易于为用户解释。面包屑无处不在,经常用于内容丰富的网站,通过最小的调整,你可以确保用户能够快速定位他们在一个网站上的位置以及他们可能需要去的其他地方。如果用户已经通过使用跳转到网站的某个深度,这一点尤其有用。

 

 

40.尝试用高饱和颜色

 

使用高度饱和的颜色?试一试用浅色调来缓和气氛或者阴凉处。高度饱和的颜色(明亮的蓝色、红色、绿色等)可以让网站看起来很棒,但是当过度使用时,它们会使使用者的眼睛疲劳,主要是在使用的时候的文字内容。尽可能使用时要适度,并尽量与柔和的颜色搭配颜色或色调变化)的饱和颜色,以避免可怕的眼睛疲劳。使用这种方法还可以直接注意到饱和的色彩和使最重要的内容前面和中心,与更柔和的颜色采取较少突出角色,让用户的眼睛休息一下。记住,在选择颜色时,可读性和可访问性应该是最优先的。

 

 

 

41.图表不要叛逆的使用

 

在ui中使用已建立的图标,为了避免给用户造成混淆。在你的设计中添加图标时,试着选择一个有代表性的已建立的图标。不要选择一个能传达正确含义和功能的图标否则会引起困惑,成为用户的认知障碍。不要在这些图标上过于叛逆。

 

 

 

42.接近原则

 

在众多经过尝试和测试的设计原则中,这里有一个是帮助您为用户生成更清晰的ui的关键。接近只是确保相关设计元素放置在一起的过程,表明彼此之间的关系,这有助于加快用户的认知。

 

 

 

43.文本网格

4pt基线网格+ 8pt网格=单一网格。当使用类型时,8点网格旁边使用4点基线

可以为你的设计带来更和谐的垂直节奏。您需要对齐您的类型到基线网格4,使用的行高值为4的倍数(16、20、24、28等)

为什么4?我发现在过去使用特定的文本大小时,按8的倍数缩放是不太合适。

 

 

 

44.文本建议行高比例

减少标题上的行高是很好的。与长形式的主体文本不同,它需要足够的行高,以便折行易读。标题的推荐行高通常约为1至1.3倍。

 

 

45.颜色选择

 

选颜色有困难计划吗?在颜色上进行类比论。类似的颜色,也被称为相邻或相邻的色调,是其中之一最和谐的配色方案,可以大大帮助你,如果你有很难挑选出搭配得很好的颜色。由三原色、二原色和三原色组成的一组相邻的色调帮助您创建一个简单的,颜色方案快速。当你需要快速将颜色调和到混合中时,可以使用类似的方法。

 

 

46.提高信噪比

 

在你的设计中尽量提高信噪比。你可以在你的设计中通过最大化信号来实现清晰和可用性最小化噪声,从而产生高信噪比。您可以通过确保提供相关信息(信号)来实现这一点有效,不相关的信息(噪声)被减少或完全删除。事情更加清晰。提高你的信噪比。

 

 

47.图像文字达到强对比

 

我想用更非正式的方式说话。语气吗?尝试所有小写字母。使用较重的字体和大写会显得有点正式和夸张。试着选择全小写和较轻的字体。在处理特定项目时,使用类似全小写的拷贝可以呈现更非正式的、可接触的信息。记住要在图像之间使用某种颜色叠加与文字达到较强的对比。

 

 

48.使用重量、大小和颜色来表示类型中的层次结构

 

当使用类型时,元素不需要尖叫“看看我!”一直如此但他们确实需要一个平衡的等级制度。只需通过重量、大小和颜色进行细微的调整就可以实现这一点。这样做可以让用户扫描并找到必要的元素,避免在过程中产生任何混淆。

 

 

49.浅色文字加深色?

 

养肥了,字体大小为最佳易读性。当设置暗色文字与浅色背景,选择一个更轻的粗细。但是…反过来说:浅色文字>深色背景。最好是看一下增加一点字体重量,特别是对于长表单副本。以最佳的易读性为目标,避免让用户的眼睛疲劳。

 

 

 

50. 用你的字体选择创造正确的情感回应

 

试着为你要呈现的内容选择合适的字体。用户是精明的,有一种直观的感觉,当内容与他们交谈当它不是。正确的字体选择是至关重要的,使您的内容讲给他们直率和情感的水平。

 

 

51.大写字母+字母间距=更好的易读性

 

你是否使用全大写的短行文本?嗯…这是一个好主意,增加这些字母之间的间距,以达到更好的用户的易读性。这样做使单词更容易阅读和处理,因为字母更多彼此区分。字母之间的间距只要稍微增加一点就可以。

 

 

52.错误告知

 

打开这些错误消息,您的表格有帮助。在使用表单时,请尝试并确保错误消息得到解释。出了什么问题,如何补救。总是让用户了解情况,即使是像常规一样常见的事情的形式。让这些错误消息有用,不要让您的用户蒙昧。

 

 

 

53.告知用户正在发生什么

 

试着向用户保证在加载过程中会发生一些的事情你的应用程序。显示应用程序元素的框架可以帮助你快速沟通布局和确保用户正在发生一些事情。系统状态可见性是一个重要的原则要遵循,并允许用户知道发生了什么。不要让用户从一开始玩猜谜游戏。

 

 

 

54.不可逆的操作强提醒

 

告诉用户将要做什么如果他们应用了某个动作。在应用特定的操作之前,总是尝试并详细地告知用户可以有结果。这尤其适用于具有不可逆转后果的行为,如删除某些东西。让用户知道将要发生什么,并在此之前要求他们进行确认。他们就会按下那个标有“删除”的红色大按钮。

 

 

 

参考文献《UI & UX Micro Tips - The Ultimate Collection》

 



作者:DesignLink
链接:https://www.zcool.com.cn/article/ZMTI1NjIyMA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

大厂搜索哪家强?这些交互设计值得你收藏学习!

清阳

大体上分为两类:彩蛋流和体验流

搜索的本质是什么?无疑是内容的召回和信息的推荐。

可随着时代的发展和行业公司的内卷,不少公司除了持续优化搜索结果与推荐外,在搜索的体验和彩蛋上也是下了不少功夫,从而进一步加强自有产品的竞争力与用户黏性。因此今天就来盘点一些,那有意思的大厂搜索交互。

大体上分为两类:彩蛋流和体验流

A.彩蛋流

注重提升搜索过程中的趣味程度,以增加用户的好感度与产品印象/口碑。行业代表:谷歌浏览器、百度浏览器

 

1.谷歌浏览器

 

可以说是搜索彩蛋的先行者,内置了很多搜索关键词的有趣彩蛋,如娱乐角色:搜索【灭霸】,页面右边会打响指,相关字段会被’毁灭‘掉

 

 

搜索【马里奥兄弟】,右边也有游戏里一样的点击彩蛋

 

 

还有各种有意思的搜索结果比如搜:is google down(谷歌关闭了吗),搜索结果优先显示:NO

 

 

再如搜索《银河系漫游指南》的一句话:the answer to life, the universe, and everything。此时搜索结果页会自动计算成42。貌似也只有读过《银河系漫游指南》的人才能明白其中的奥秘。听说是生命、宇宙与万事万物的终极解答。

 

而且在日常的节日、活动、热点运营上,谷歌也从不缺席。都会在搜索框上用【插画、动效】等形式承载各种活动入口、吸引用户参与,可以已经形成一个稳定、具有品牌感的企业文化了。

 

如各种复活节、开学季、母亲节动效。而且更多有趣、创意的设计案例,可上:有蛋案例 youdananli.com 近千个行业/大厂里的创意案例、上百个知识模型、设计方法。

 

 

 

 

 

 

2.百度浏览器

 

百度在搜索彩蛋里下的的功夫也不少,最著名的应该是搜索【黑洞】时,页面上会出现黑洞的吸入特效。

 

 

 

 

而且和谷歌相同,在其他的搜索关键词上,百度也是埋下了不少彩蛋,比如:搜索【翻转】,页面会左右翻过来

 

 

 

 

搜索【跳跃】,页面会在上下跳动

 

 

 

 

搜索【失重】,页面上的字会飘起来‍

 

 

 

 

 

而在【活动运营】上,百度也是很有心地进行着创新设计,力求给用户一种眼前一亮的感觉。比如每年的愚人节,搜索结果页上都有‘调戏’用户的创意设计,各种轻松调皮的画风 给不少用户带来了新鲜感和趣味性。

 

 

 

 

 

 

 

还有在【活动入口】的设计上也是特别有想法:在某年的圣诞节上,百度创新性地将活动入口’嵌套‘在结果页卡片中间,用活动里的ip形象-雪人「抬着」结果页卡片和在上面「滚动」

 

 

 

 

 

 

 

用这种充满创意+应景的的入口设计与引导方式,最大限度地降低漏斗,吸引让更多用户参与该活动。另外,百度搜索框上面的运营活动入口,也和谷歌有异曲同工之妙。

 

 

 

 

而且更多有趣、创意的设计案例,可上:有蛋案例 youdananli.com 近千个行业/大厂里的创意案例、上百个知识模型、设计方法。

 

 

B.体验流

 

注重提升搜索过程中的交互体验,以增加用户的操作效率与产品易用性

 

代表:苹果产品、夸克浏览器

 

 

1.Apple/苹果产品

 

·iPhone

 

iPhone的【桌面搜索】除了能查询手机上的各种信息、文件,它还自带了【汇率转换和计算器】。在搜索框输入【数学公式、汇率转换】时会自动计算对应的结果。无需用户额外打开计算器、浏览器,大大减少操作链路。

 

 

 

 

在iOS的原生键盘里,可以根据输入词检测+搜索对应的手机号码:当你输入 【打+我或通讯录好友+电话】时,键盘上会自动显示自己或好友的电话号码,点击号码就能自动粘贴在输入框中。

 

 

 

 

用户无需前往通讯录就能轻松「获知+想起」谁谁的电话号码,大大提升操作体验与效率

 

·Mac

 

在Mac电脑的工具栏上搜索相关帮助时,系统会直接把该结果所对应的页面位置调取出来并悬浮展示。用户可以直观地该结果在哪里,并减少寻找的操作路径,免去多余操作

 

 

 

 

在Mac电脑的‘系统偏好设置’里搜索帮助,在结果列表上会以聚光灯的形式展示各个结果入口。选择具体某个结果时,该入口的聚光灯会更清晰些,特别容易找到搜索结果。

 

 

 

 

2.夸克浏览器

 

夸克浏览器除了传统的「点击搜索框」唤出输入栏外,在屏幕任意位置下滑手势同样可以唤出搜索框。

 

 

 

 

降低「需要往上手指移动,才能点击搜索框」的操作成本,让用户更快、更精准地触达搜索。

 

而且在输入网址或英文等字段时,搜索框下方会出现一个滑块区。点击就会变成长条的滑块,拖拽滑块即可改变光标位置。

 

 

 

 

而且更多有趣、创意的设计案例,可上:有蛋案例 youdananli.com 近千个行业/大厂里的创意案例、上百个知识模型、设计方法。

 

让用户更方便地将光标快速移动到想要的位置中,以便更快地搜索信息,大大降低操作成本。而且夸克还会前置搜索结果, 比如在搜索框中输入“某城市+天气”的关键词,上方就会以卡片的形式显示该地区最近一周的天气。

 

用户无需触发搜索、进入结果页才能看到想要查询的信息。

 

 



作者:和出此严
链接:https://www.zcool.com.cn/article/ZMTQ4Mzc2OA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档