首页

弹框关闭的七种交互方式

天宇 交互设计及用户体验

前言：日常设计工作中，我们设计师可能会面临以下设计问题：
  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
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
评论(0) 浏览(80)

画图标，我是认真的

天宇 图标设计文章及欣赏

对于 UI 设计师来说，图标设计的能力至关重要，也是提升感官体验的重要方向。对于一些初入行业的设计师，习惯下载图标素材应付项目需求，失去了动手能力培养的机会。甚至一些多年工作经验的老司机，依然还摆脱不了使用素材的习惯，稍微复杂一点的技法就会难以驾驭。

 

1. 切勿过度素材化

 

对于初入职场的设计师来说，偶尔运用素材可以理解，但是一定要学会拆解和分析，掌握还原设计的技巧和能力。

 

 

过度依赖素材容易导致思维固化，不愿意去创造，失去创新设计的能力；也容易导致眼高手低，有想法却实现不出来，极容易萌生放弃的念头；素材拼贴形式完成的设计，在规范性和细节性上面也是大打折扣的，导致设计作品不够精细化和规范性。

 

 

 

 

 

2. 刻意练习强化

 

我们需要通过刻意练习来提升图标设计的能力，根据一万小时定律，技法层面的提升都是通过反复磨练达到的。

 

 

 

 

 

 

3. 摆脱素材才能规范化

 

图标设计从素材习惯过度到设计动手其实很容易，但是从会画到画好之间看似简单却很难掌握。摆脱素材是图标设计规范化的关键，然后再统一风格和细节规范，掌握数字化关系也是需要我们反复研究的课题。

 

 

 

 

比如以这个天气图标来举例，相信很多同学都能画出来，但是有没有把控里面的数字关系就难说了。通过以下示意图我们可以看出来，大圆和小圆之间的比例关系是 4:3，而间距的关系也与圆形的大小有着数字关系。这些数字关系可以使得图标设计更加精细化，也能引导我们去探索设计背后量化的标准和关系。

 

 

 

 

 

 

4. 质感的层层强化

 

当我们绘制完图标的造型之后，运用合适的风格进行质感强化也是尤为重要的。这里我先运用其中的一个风格来完成，选择了磨砂玻璃质感的效果。为了质感和层级关系更加明显，这里单独对局部进行了光影强化和边界处理，看看以下步骤拆解图感受一下。

 

 

 

 

备注：运用的软件功能是背景模糊，Sketch 或者 Figma 等软件皆可实现。

 

 

 

5. 延展界面场景

 

为了进一步强化图标练习，延展了一个简单的界面场景，一个由宫格布局组合成的界面设计。为了填充所需的内容，先把之前的一些图标作品放进去占个位置。虽然都是质感一类的图标，但是由于透视、配色、风格和细节规范等不一致，整体还是存在一定的排斥感。

 

 

 

 

 

 

6. 根据界面环境重新调整

 

由于界面设计属于深色主题，之前练习的天气图标放入场景中显得过于突出，而且玻璃质感的通透性没有得到很好的发挥。于是根据界面环境对天气图标进行了重新调整，以深色关系调整了云朵部分，针对太阳的配色和尺寸比例也进行了调整，如以下效果图。

 

 

 

 

 

 

7. 延续风格补全设计

 

以调整后的天气图标作为风格规范，延续了其它业务场景的图标设计，在透视关系、细节规范、配色比例和光影效果等方面进行了直接延续。在光影方向上面选择了纵向区分，左边三个选择左上角打光，右边三个选择右上角打光。（当然也可以统一一个方向设置光影）

 

 

 

 

 

 

8. 统一性还是差异化

 

完成的整体设计视觉风格虽然比较统一，但是也有一些问题存在。图标之间缺少差异化，过度统一容易视觉疲劳，于是在统一性和差异化上面开始纠结了。

 

 

 

 

为了既保障图标设计表达的统一性，又能形成视觉感的差异化，做出了调整配色关系的决定。根据天气图标的配色关系延续出了其它色系，看看最终的效果如何。

 

 

 

 

 

 

你喜欢哪一版？

 

关于统一性和差异化因人而异，在朋友圈征集意见也是各有差异，那么你会喜欢哪一版呢？欢迎留言区一起互动交流。

 

 

 

 


作者：黑马青年
链接：https://www.zcool.com.cn/article/ZMTQyOTA5Ng==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
评论(0) 浏览(73)

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

天宇 交互设计及用户体验

响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
响应式布局-创造无缝的跨平台用户体验
 
 
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
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
评论(0) 浏览(74)

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

天宇 交互设计及用户体验

响应式布局｜打造跨平台无缝体验的设计利器
 
 
 
一、介绍
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
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
评论(0) 浏览(74)

鼠标指针的秘密：提升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
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
评论(0) 浏览(86)

以用户为中心的交互设计思维

ui设计分享达人 用户研究

聊聊关于设计思维的内容，会从产品设计、体验设计、交互设计三个方面入手。
目前是第三篇，关于交互设计思维的内容。到这里设计思维的内容全部结束了。
感谢
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
 


作者：DesignLink
链接：https://www.zcool.com.cn/article/ZMTY0OTg1Mg==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
评论(0) 浏览(88)

AI重塑互联网，赋予技术温度与关怀

ui设计分享达人 设计管理与成长

关于AI出现对互联网革命的一些思考。
AI重塑互联网，赋予技术温度与关怀
 
 
AI重塑互联网，赋予技术温度与关怀
 
 
AI重塑互联网，赋予技术温度与关怀
 
 
AI重塑互联网，赋予技术温度与关怀
 
 
AI重塑互联网，赋予技术温度与关怀
 
 
AI重塑互联网，赋予技术温度与关怀
 
 
AI重塑互联网，赋予技术温度与关怀
 
 
AI重塑互联网，赋予技术温度与关怀
 
 
AI重塑互联网，赋予技术温度与关怀


作者：DesignLink
链接：https://www.zcool.com.cn/article/ZMTY1MDI1Mg==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
评论(0) 浏览(108)

AI创作工具的「可控性」与「用户体验」博弈

ui设计分享达人 设计管理与成长

这两年生成式ai爆发性增长并且重塑数字创作的工具生态。从文本生成、图像视频生成以及模型训练，可以说无法离开ai，ai的介入让创意生产变得前所未有的高效简单，但同时也带来了体验上的困境，例如我们在使用自动化生成便利的同时，还能保持对创作过程的深层控制？比如在进行文生图或者线稿转3D的流程中，我们如果要控制某个部分的设计表现，需要利用多个方法才能完成，仅仅通过提示词的修改并无法完成，这个矛盾在之前的SD等开源模型中非常明显；
AI创作工具的「可控性」与「用户体验」博弈
 
 
 
算法模型的开放让设计达到了无限的可能，但更多设计师却被迫在控制权和易用性之间做出了妥协，当重复一个流程无法生成满意的图象时，大多情况都是基于一个“不满意”的图像进行优化，我把这个理解为用户心理上的妥协；
AI创作工具的「可控性」与「用户体验」博弈
 
 
以节点式工作流工具ComfyUI为例，其通过可视化编程赋予用户对Stable Diffusion生成流程的精细控制权，允许自由组合模型、调节参数、插入预处理模块，成为专业创作者的首选工具。然而，这种高度自由的设计也带来了显著的认知负担：错综复杂的节点连线、晦涩的参数术语、缺乏引导的开放式画布，让0基础设计望而止步；数据显示，超过67%的新用户在首次使用ComfyUI时因“界面混乱”而放弃进一步探索（来源：ComfyUI社区调研）。这一现象揭示了生成式AI工具设计的核心矛盾——系统的灵活性与用户的心智模型之间如何实现平衡？
AI创作工具的「可控性」与「用户体验」博弈
 
 
一、核心问题与矛盾
1、设计师对“控制权”的需求本质
安全感需求：
用户希望理解生成过程（分布控制、seed数值、CFG），避免黑箱带来的不可预测性；
注：大多数AI工具（如Midjourney）像一台自动售货机——输入提示词，随机吐出一张图片。用户无法知晓AI为何生成一只三头六臂的猫，只能反复“抽卡”直到满意。
 
创造性需求：
通过精细化的控制实现独特的风格，例如分布提示，基于大模型训练出来的lora，不同lora模型融合后的混合模型，这些需要付出很大的学习成本和时间才能满足，我个人理解ai给设计师通往目标的过程中搭建了不同的道路，但设计师如果在没有导航的情况下要达到这个目标，中间可能会辗转反侧，也可能一条道路就能到达目的地；
AI创作工具的「可控性」与「用户体验」博弈
 
 
效率需求：
自动化设计（如MJ和国内其他一键生图的ai产品）可以降低设计的操作成本，但同时牺牲了可控性；
AI创作工具的「可控性」与「用户体验」博弈
 
 
2、comfyUI的设计矛盾
过度控制悖论：
ComfyUI试图打破黑箱，将AI拆解成可调节的“齿轮组”（如调节“采样器”改变画质、用“ControlNet”控制构图）。但当用户面对50多个参数和上百种节点时，反而因信息过载陷入“该调哪个参数？连错节点会爆炸吗？”的决策瘫痪。
AI创作工具的「可控性」与「用户体验」博弈
 
 
过高的配置要求：
comfyUI解决了MJ带来的黑箱效应，但同时也带来了物质上的门槛，设计师需要配备更高的配置或者使用第三方租用云电脑等才能运行，否则前者就会造成漫长的等待，后者则需要花费大量的财力，对于设计师而言反而是造成了时间上的负荷；
AI创作工具的「可控性」与「用户体验」博弈
 
 
功能维度：
节点系统支持无限组合，但缺乏对用户意图的主动理解，如自动推荐节点；
AI创作工具的「可控性」与「用户体验」博弈
 
 
认知维度：
参数暴露（如CFG Scale、Sampler）提供控制感，但引发“选择过载”实际使用过程中，如果是普通玩家，无法短时间内通过这些参数来控制结果，核心还是在于认知门槛过高；
AI创作工具的「可控性」与「用户体验」博弈
 
 
交互维度：
自由连接节点导致逻辑混乱（如错误连线无及时提示），增加调试成本。
AI创作工具的「可控性」与「用户体验」博弈
 
 
我把ControlNet的“负面条件”打乱连接到“正面clip文本框”上，而采样器的“负面条件”直接连接到“负面clip文本框”内，整个过程是不会出现任何报错提示，但是当运行调试的时候就会运行失败，提示ControlNet缺少负面条件，ControlNet（应用）缺少负面条件输出等问题，众所周知对于一些低配玩家，运行一次需要等很久，等到最后发现生产出来一个“报错”！！！
AI创作工具的「可控性」与「用户体验」博弈
 
 
二、对比分析：comfyUI和midjourney
AI创作工具的「可控性」与「用户体验」博弈
 
 
当设计师想生成“一只穿宇航服的柴犬”，Midjourney可能输出卡通风格或超现实照片，设计师只能通过追加提示词（如“3D、黏土”）逼近目标，不停的抽卡；
（实在不想用mj了，下面的图本地跑的，大概的意思一样就是不停的抽卡抽卡）
AI创作工具的「可控性」与「用户体验」博弈
，
在ComfyUI中，设计师可以强制指定：用FLUX模型生成基础图像，然后加载相关LoRA模型，在添加个视觉风格迁移的模型，添加宇航服，在添加个视觉风格模型，连接OpenPose节点调整柴犬姿势，最后用放大模型，放大画质；但我就想说：我只是想画只猫，为什么要弄这么复杂。。。
AI创作工具的「可控性」与「用户体验」博弈
 
 
关键结论：
ComfyUI的“高可控性”吸引专家设计师，但普通设计师或者0基础设计师因认知负荷大多放弃使用。Midjourney通过“限制控制权”降低门槛，但设计师可能因无法干预细节感到焦虑。
三、comfyui冲突点和机会点
为什么说这个呢，因为comfyui目前是趋势ai，核心的生成逻辑包括实际应用都已经大于mj了，所以接下来的内容也是围绕comfyui拆解的；
1、参数暴露vs认知负荷
问题：
ComfyUI将所有参数（如LoRA权重、VAE选择、采样器、各种模型加载器）暴露给用户，导致界面信息过载。
例如：
设计师需要同时调整“提示词权重”“采样器类型”“ControlNet强度”时，易混淆参数优先级，对于这个结果的影响，是采样器类型问题呢还是ControlNet的数值不对呢，最后我猜大多人过程都是一个个试一遍，最后哪个效果好用哪个；
思考点：
动态参数分组，根据生成的目标隐藏无关的参数，比如当输入完成“提示词”后，可以识别出输入的提示词类型，生成一个3d风格海报，那么基于这个提示词，就可以提前预判出跟3d风格海报相关的参数都可以隐藏；参数依赖的可视化，通过逻辑线的方式标记他们之间的关系，例如CFG与采样步数，通常来讲CFG数值越高生成的图越接近提示词，但是图像质量会下降，采样步数越高生成的图质量就越高，那么问题来了，当设计师调整CFG数值时，是不是可以标记或者提示设计师采样步数的变化，以此来达到最优解；
下方示例
AI创作工具的「可控性」与「用户体验」博弈
 
 
2、自由连接vs逻辑错误
问题：
节点可任意连接，但缺乏逻辑校验目前comfyUI中只是告诉设计师如果两个节点本身没有前后关系的情况下不可以连接（没有节点对应的收入口）另一种情况是两个节点在一个工作流中都能起到作用，但是节点是多功能化的，连线的时候可以正常连接，最后运行的时候就会出现某某节点不匹配。
例如：
设计师错误连接ControlNet预处理器与VAE节点，导致生成失败且无报错提示。
思考点：
实时逻辑校验，在设计师连线时提示冲突（如“该节点仅接受潜空间输入”）。
工作流自检模式，一键检测缺失节点（如缺少“提示词编码器”时提醒用户）。
AI创作工具的「可控性」与「用户体验」博弈
 
 
四、设计师心理与工具的“错位战争”
生成式AI工具的设计矛盾，本质上是人类认知模式与技术逻辑的冲突。以ComfyUI为例，其设计暴露了以下深层问题：
1、“技术透明化”的认知陷阱
ComfyUI将AI生成过程拆解为节点，试图通过“透明化”提升用户信任，但普通人并不需要（也无法理解）技术细节；不知道你们有没有，当我第一次看到“VAE解码器”“潜在空间降噪”等节点时，大脑会触发“意义建构焦虑”——“这些词和我想要的图片有什么关系？”
AI创作工具的「可控性」与「用户体验」博弈
 
 
2、控制权的“虚假承诺”
ComfyUI看似赋予用户完全控制权，但多数参数的实际影响难以预测（如CFG值从7到8可能导致画风突变）这类似于让设计师驾驶一辆方向盘与轮胎无机械连接的汽车，转动方向盘时，轮胎可能随机偏转。设计师误以为“控制节点=控制结果”，实则是“在黑暗中调整未知旋钮”；
AI创作工具的「可控性」与「用户体验」博弈
 
 
3. 技术极客与大众的“认知断层”
开源社区的理想：“人人可 Hack”的民主化工具；现实问题是开发者设计节点时默认用户理解SD原理（如Latent Space、扩散模型、euler_ancestralcai、dpmpp_2m），但普通用户只关心“如何让图片更逼真”；这种断层导致ComfyUI的文档充满技术术语，而非用户目标导向的指南（如“修复模糊人脸”对应哪些节点组合），这也是技术工具与用户体验的博弈；
AI创作工具的「可控性」与「用户体验」博弈
 
 
五、对于comfyUI的畅想
1、适配不同能力的设计师
专家模式：保留完整的节点和参数，让这类设计师自由编辑；
精简模式：隐藏底层参数，仅仅提供目标导向的选项；
自动化操作：根据提示词推荐采样器、cfg数值等组合，例如提示词是自然语言，那就匹配关于flux模型的专属采样器；
AI创作工具的「可控性」与「用户体验」博弈
 
 
2、智能节点推荐引擎
目标推荐：输入“生成赛博朋克城市”后，自动推荐“SDXL模型+ControlNet边缘检测+色调调整节点”；行为预测：分析历史工作流，推荐高频使用的节点组合（如“LoRA模型+分层提示词”）；
3、可解释性反馈面板
参数与结果的实时性：实时显示调整CFG值对图像细节、对比度的量化影响。节点的贡献度分析：生成后标记关键节点（如“ControlNet贡献度72%”），帮助用户理解流程。
六、总结：控制的幻觉与设计的谦卑
ComfyUI揭示了生成式AI时代的核心矛盾——技术的能力越强大，人类越需要承认自身认知的局限性。工具设计不应追求“上帝模式”，而需寻找“刚刚好的控制权”给用户“扳手”而非“零件库”：提供高层级调节维度（如“画面精细度”“风格偏离度”），隐藏底层技术参数，并不是每个设计师都是工程师的角色；大多设计师的角色只是维修工；拥抱“不完美的人性”：允许用户保留“我不知道为什么要调这个，但调了就有用”的玄学操作，而非强迫所有人成为AI工程师。重新定义“控制”：从“绝对掌控流程”转向“有效影响结果”，让AI的不可预测性成为创意催化剂而非焦虑来源。


作者：爱吃猫的鱼___
链接：https://www.zcool.com.cn/article/ZMTY1MDQ2OA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
 
评论(0) 浏览(87)

产品设计如何利用心理学

ui设计分享达人 设计思维

产品设计的成功除了依赖设计方案和技术实现，还与用户的心理密切相关。用户心里决定了我们用怎样的设计策略解决问题。我们常认为人们做决策时是理性的，但其实用户行为经常是非理性，会受到情绪、习惯和社交环境的影响。了解这些心理学规律能帮助我们更好地的预测和引导用户行为，优化产品体验，提高用户的粘性、留存率和转化率，从而产品商业价值最大化。
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学


作者：DesignLink
链接：https://www.zcool.com.cn/article/ZMTY1MDk0MA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
评论(0) 浏览(89)

关于设计组件库，一些新思考

ui设计分享达人 设计管理与成长

关于设计组件库，我们有一些新思考
 
 
 
从网上搜索设计组件，我们能找到各种对外公开的设计组件库，同样还有不少或概括或详细的文章，手把手教你“如何搭建一个好的设计组件库”，但这些方法论很少探讨面对C端组件频繁增改、设计规范动态调整，如何高效赋能业务设计交付的相关内容，但这恰恰是搜索业务面临的关键问题。
 
搜索是一个“牵一发而动全身”的业务，每一个微小的设计细节都有可能影响各个业务的数据指标，一个“好的设计组件库”需要以一种潜移默化的方式让设计师掌握设计规范，完成合规的设计，从这个角度而言它应该比较
「好懂」
。
 
而作为服务于整个设计团队的公用设计组件库，面对每月数以万计的调用次数，它必须保障最基本的易用性，应该非常
「好用」
。
 
同时，面对频繁迭代，“好的设计组件”还需要保持最快的更新速度，为各个横向团队提供正确的样式，从这个角度来说它还要
「好维护」
。
 
因此，
「好懂、好用、好维护」
是搜索设计语境下，对一个“好的设计组件”的定义。
 
关于设计组件库，我们有一些新思考
 
 
 
接下来，我们将从这三个「好」入手，分享搜索设计组件库在升级过程中的一些思考，希望能和大家共同探讨。
 
关于设计组件库，我们有一些新思考
 
 
 
 
关于设计组件库，我们有一些新思考
 
 
 
“万丈高楼平地起”，我们先来说说如何从零开始构建一个既符合设计规范又易于理解的设计组件。
 
首先，在搭建组件时，我们可以考虑采用
多层嵌套
的方式，即组件(Component)内部嵌套变体(Instance)。这种方式不仅能省去组件搭建和修改过程中的重复操作，甚至还能在解绑组件时，通过选中内部的子组件图层进行解绑，大大简化了搭建和使用双方的操作流程。
 
在多层嵌套的思路下，我们可以进一步用
“底层灵活、上层收敛”
来指导组件的搭建。这意味着底层变体的形式足够多样，能够支持大部分的状态切换，而在上层组件搭建的过程中显性地加强规范的指引(如规范中不允许使用的样式不对外展示)，以降低超出规范设计的可能。
 
具体的搭建流程可以大致分为三步：
场景收集和分析、搭建基本变体组、拓展高阶变体组
。
 
我们将通过视频组件搭建的生动案例，具体介绍如何依据“底层灵活、上层收敛”原则来搭建组件库，使得组件本身既足够灵活，又能起到足够的约束作用。
 
关于设计组件库，我们有一些新思考
 
 
 
在着手搭建某类组件时，我们首先通过规范确认和场景遍历，广泛收集各类变体。随后，从我们能想到的所有维度出发，对这些变体进行细致定义。这样，我们就能得到一张详尽描述组件变体性质的表格。表格的第一列依次列出变体1、变体2、变体3等，而第一行则罗列出各种维度，如宽度、比例等。通过这种方法，我们可以将原本零散、杂乱的组件变体描述，系统地归纳整理成一张清晰明了的表格。
 
关于设计组件库，我们有一些新思考
 
 
 
表格通过不同维度来唯一确定一个变体，这些维度可大致分为两个特性和一个共性。共性指的是所有变体在这一维度上均保持一致，常见特性则涵盖了最常见的分类性质，如宽度、高度、数量和优先级等，而业务特性则与具体业务紧密相关。
 
在搭建组件时，我们可以遵循
「共性-常见特性-业务特性」
顺序，这样的顺序有助于降低理解成本，因为最符合心智的分类被置于外层，同时底层的组件又保持了足够的灵活性，便于切换各种变量。对于业务特性，我们可以根据实际情况灵活处理，既可以将其作为基本组件的延展，也可以不将其纳入组件范畴。
 
以视频组件为例，我们从表格中获取的信息如下：
 
  •  
    视频尺寸及其组合是最符合用户心智的变体选择；
  •  
    播放状态是所有变体的共有性质；
  •  
    自动播放情况与业务相关，但不一定需要在组件库中呈现；
  •  
    高阶组件仅涉及少部分尺寸的组件，应在完成基本组件搭建后再进行。
 
据此，我们可以轻松梳理出视频组件搭建流程的优先级：
 
  1.  
    播放状态作为共性，应首先搭建；
  2.  
    基本组件尺寸和组合是最符合用户心智的变体选择，应紧随其后；
  3.  
    高阶组件在完成基本组件搭建后再进行。
 
值得注意的是，“封面槽位”是“播放状态”中的一个图层。根据“底层灵活、上层收敛”的原则，我们将其插入到搭建播放状态之前。因此，视频组件的最终搭建流程为：
 
  1.  
    封面槽位；
  2.  
    播放状态；
  3.  
    基本组件尺寸和组合；
  4.  
    高阶组件。
 
关于设计组件库，我们有一些新思考
 
 
 
完成对视频组件搭建的分析，我们就可以有条不紊地开始搭建组件了。先搭建基本组件视频组件，再用基本组件搭建高阶组件。这一步骤虽然为大家所熟知，但仍需格外注意，如配置项的设置要力求合理，也可以融入设计规范和使用规范，同时还应将一些搭建过程中的零散组件集中收纳避免被调用。关于这些具体的注意事项，我们将在后续部分进行详细阐述。
 
至此我们完成了组件搭建的基本流程，一个达到及格线的视频组件就诞生了。据统计，优化后每次调用视频组件将节省至少10步的点击操作！
 
 
关于设计组件库，我们有一些新思考
 
 
 
完成了一个基本组件的搭建后，我们可以转换视角，从使用的角度来审视并检查这个组件。
 
我们期望，从插入组件变体、切换组件配置，再到最后的解绑组件，整个流程都能纵享丝滑且稳定可靠，确保业务设计师在使用过程中获得最佳体验。
 
关于设计组件库，我们有一些新思考
 
 
 
我们可以一步步来审视组件的使用过程。首先是插入组件，据观察，通常有三种方式，①在左侧的资产面板(Assets)中直接找到对应组件并插入；②通过查阅设计规范，锁定所需的变体后复制粘贴；③选中一个不需要的组件，通过右侧的“切换变体”面板(Swap instance)切换成所需的变体。很明显，在这个过程中依赖的是组件的精准搜索和快速定位。
 
关于设计组件库，我们有一些新思考
 
 
 
为了提升搜索精度，我们可以从组件命名入手，采用中、英、数字结合的方式，实现模糊匹配；也可以在发布时隐藏不希望被调用的组件，以减少无用的搜索结果。如果组件是采用前文提到的“多层嵌套”方式搭建的，我们可以添加“Preferred”子组件，这样在切换时会优先展示这些子组件，这个功能在切换图标时尤为实用。
 
对于习惯边查阅设计规范边使用组件的设计师，我们增加了更多实际使用的正误案例，这些案例直观展示了组件变体的正确选择和使用方式，进一步降低了规范的理解成本，有效辅助设计决策。同时，我们专门维护了一个固定区域，用于平铺展示所有组件变体。为了确保能够轻松点选，我们将变体放在最外层展示(即不在任何Frame、Group或Section中)。这样能让设计师一目了然地看到所有变体，从而快速选择所需的组件。
 
关于设计组件库，我们有一些新思考
 
 
 
在组件配置阶段，有三项注意点能让组件更加易用，即“重视组件的可视化效果、设置高效易用的配置项、贴心地保存修改”。
 
关于设计组件库，我们有一些新思考
 
 
 
考虑到C端组件的多样性和用户的使用习惯，我们应避免使用过于复杂的分组方式。相反，应更注重组件的样式展示，并尽量简化组件的层级结构。这样，设计师在使用时能够更直观地看到组件的外观，而无需深入复杂的层级去查找。
 
另外值得注意的是，Figma会默认用组件集合中最左上角的组件生成预览样式，因此应当把视觉上最有代表性的变体放在左上角，这个效果在切换变体(Swap instance)时很重要，因为目前在该面板中没法查看组件细节，只能靠缩略图和名称来推测是哪个组件。
 
关于设计组件库，我们有一些新思考
 
 
 
其次对于配置项的设置也大有讲究，业界有组件库为了实现C2D2C，从源头上将设计组件和前端组件的配置项打平，这是不错的思路，但有可能会提升设计侧的理解成本。针对搜索业务的特殊语境，我们还是选择了从「规范理解」角度去设置组件的配置项，将所有允许自定义的配置尽可能外露，并清晰地说明修改限制，如字数限定、选项个数等，这样能够在使用的过程中强化业务设计师对规范的掌握。
 
另一个常常被忽视的关键点是选项和配置的排序问题。为了提高浏览和选择的效率，建议对选项和选项之间，以及外层的不同配置项，都按照一定的逻辑顺序进行排序。
 
关于设计组件库，我们有一些新思考
 
 
 
最后一点，我们称之为
“贴心地保存修改”
机制，这个针对的是文字修改的场景。
 
在实际操作中，使用一个组件可能需要对多个配置项进行修改。有时在修改完文字内容后再去调整其他配置时，已修改的文字会被重置。这时文本属性(text property)的设置就显得尤为重要，它能够记忆并保存修改过的文字内容，从而免于重复输入。
 
还有一些情况是，某个组件变体实际上并没有与某个值相对应的组件(尽管Figma机制允许选择该值)，用户切换后就会发现组件完全变了，只能撤回。为了避免这类情况，建议使用另外的标记来表明组件某个设置项是不可切换的。
 
关于设计组件库，我们有一些新思考
 
 
 
 
关于设计组件库，我们有一些新思考
 
 
 
完成了组件的搭建和检查，接下来让我们聚焦于组件的日常维护。
 
这一环节可以从两个维度展开，一是依托中台的日常数据监控进行维护，二是通过团队内部的紧密协同机制来保障。后者更多侧重协作流程和机制上的建设，在本文中我们不做更多展开，重点讨论前者。
 
数据监控的方式主要依托Figma中的组件数据看板(查看路径：View libraries-Analytics)，看板中展示了各个组件的调用数和解绑数数据，这些数据不直接反映组件的优劣，但如果我们观测到某个组件解绑率偏高，我们会考虑直接把它
作为模板
而不是创建成组件。
 
关于设计组件库，我们有一些新思考
 
 
 
 
总结
 
以上是百度搜索设计团队在设计组件库升级过程中的心得分享，包括搜索业务对于“好的设计组件”的诉求，以及一些搭建和优化组件的实用思路，核心是探讨如何从组件库建设的角度入手，成功助力团队提升设计资产消费效率。
 
关于设计组件库，我们有一些新思考
 
 
 
 


作者：百度MEUX
链接：https://www.zcool.com.cn/article/ZMTY1MTYwOA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
 
评论(0) 浏览(81)

分类

日历

链接

个人资料

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

存档