用户动机，是每个设计师设计产品时必须考虑的问题。只有激发用户动机，才能进一步提高转化率。本篇文章中，作者从福格PAC动机来源模型入手，从3种动机来源介绍如何激发用户的动机。不妨来看一看，说不定有帮助哦。

交互设计( interaction design, IXD )，从字面上来说，交互即为相互作用相互影响，设计即为理解与传达。在互联网产品中，交互设计对用户体验产生很大的影响。本文将围绕交互设计进行分析，与你分享。

前面的文章我们分享了交互设计思维，这篇文章，我们来看看用户目标与交互目标。交互设计的核心，就是帮用户拆解这些目标并找到最优路径，让他们觉得“这事儿没那么难”。

编辑导语：很多产品在使用时，都会有“用户反馈”这一个设置，用户可以将自己的操作体验反馈给商家，但你真的了解“用户操作反馈”是怎样的一个机制吗？这篇文章详细讲解了“操作反馈”这一设置，一起来读一读吧。

背景

前几天使用自己产品的时候，点击作业列表想要查看作业详情，点击之后没有反应，然后又连续点击了好几下，过了几秒钟，界面开始连续跳转。后来才知道，因为用户量比较大，产品稍微会有一些卡顿，导致用户点击后，产品没有实时的反馈给用户，使得用户也变得不知所措。

那为什么会出现这种情况呢？主要原因就是没有用户操作反馈。一个好的产品需要根据用户不同的行为操作，实时给出反馈，告知用户当前状态或建议，消除用户因为不确定性带来的不安感和焦躁感。

可以将用户整个操作流程简化为：用户输入—平台反馈—结果反馈。可以看出反馈其实分为两种：过程反馈（平台反馈）和结果反馈。

可以看到无论Google公司推出的Material Design，还是苹果公司的iOS设计规范，都对用户过程反馈做了细致的设计规范。

国内也有很多体验很好的APP对于用户反馈方面也做的不错，例如QQ、飞书。

3. 页面

页面反馈，相较于弹窗会更重一些。一般也用于比较重要的操作流程的结果页面，例如淘宝买完东西的结果页面、饿了么下单完成后的结果页面。

4. 动画

动画的合理使用不仅可以告知当前状态，还会将用户带入当前场景，吸引用户注意力。例如，微博的点赞，会出现一个点赞的动画，让点赞变得更加有趣。

微信图书，点击进入书本详情时会出现一个打开书本的动画，让用户带入实际看书场景，增强沉浸感。

5. 音效

音效的反馈也比较常见，例如ios下载时，会有叮咚一声，声音的反馈不仅提升了用户体验，对于加强品牌认知也很有帮助。

三、总结

以上是我对于操作反馈的一些整理和复盘，其中也借鉴了一些大神的佳作，不到之处，希望和大家一起探讨交流。

在实际项目的运用中，也会根据实际的研发情况，逐步的去调整，不断地完善产品细节。

本文由 @小太阳不爱吃辣椒 原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自 Unsplash，基于 CC0 协议。

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

编辑导语：智能手机现在对于大家来说都并不陌生，而“陀螺仪”作为手机上的一种先进硬件，可以增强手机的使用感，本文作者介绍了一些运用陀螺仪让人身临其境的设计，让我们一起来看看吧！

iPhone率先将先进硬件（如陀螺仪、重力感应等传感器）引入手机，让智能手机的硬件参数和升级成为用户的重要选购参考，设计师们也会在设计时关注到硬件的应用和潜力挖掘。今天我们浅聊一下“陀螺仪”在增强交互体验、丰富交互反馈上的实际应用。

▲ 智能手机有丰富的硬件能力

一、陀螺仪是什么

在我们的自然交互场景中，视野的变化（如观察四周）和速度的感受（如拍打摇晃）是和五感非常紧密的体验。手机中的陀螺仪和加速度传感器就是这样的硬件，可以感知我们在使用设备时的角度、位置和速度变化。

▲ 陀螺仪可测量设备的方向和角速度

通过陀螺仪传感器，手机应用能感知用户设备的角度变化并触发相应的动作和交互，拓展平面屏幕空间，实现更加有空间操纵感的体验。比如，最常见的就是的手机横/竖屏自动切换、导航指路、手机摇一摇等功能。

▲ 手机横竖自动切换

▲ 地图方向感知

二、让体验增强的应用场景

1. 越出静态视图边界

通常背景氛围图片的展示区域最多只有屏幕宽度，但是结合陀螺仪的角度感知，通过视差变化可以将视图延展到原先被限制的空间之外，给用户更多的视觉信息，形成类3D的空间效果。淘宝人生的套装展示页中，当转动手机时背景图和人物模型也会跟随变化，让人物及服装的展示更加生动和有冲击力。

▲淘宝人生套装展示

当将多帧图片匹配视角变化时，甚至能带来裸眼3D的效果。

▲类裸眼3D效果

根据陀螺仪旋转视角，静态图片可以不仅仅固定在单一位置上，还可以升级为交互性内容，模拟现实空间里物品的抛、弹、跳，让信息交互更有惊喜感，让用户身临其境更有控制欲，不知不觉反复把玩。

▲ 好好住徽章动态交互

很多应用中，陀螺仪承载了其核心的能力，给用户带来突破屏幕的360度的全景体验。比如在星图类APP中，跟随陀螺仪的变化，可以将浪漫的星空变得可识别和触手可及。

▲ 星空APP–即时星图体验

2. 让游戏更具操纵感

陀螺仪在体感类手游游中可以说是标配，几乎所有需要感知三维空间变化的游戏都需要用到它。尤其是赛车、飞机或者体育类游戏，对角色控制和视角变化有高精准度要求。通过调整手机姿势、上下左右摆动，模拟真实空间的操控性反馈，增强了游戏空间的3D体感，用户跟随视角变化在游戏里上下翻飞，有强烈的代入感和沉浸感。

▲ 狂野飙车的镜头视角变化

▲ 和平精英体感操作

VR体感游戏中的陀螺仪跟随用户肢体的动作，实现虚拟空间物品距离和空间视角的变化。

▲ AR体感游戏

3. 现实空间的互动交互

除了可以操控平面元素，在我们使用3D AR交互功能时，陀螺仪也可以增强与现实空间交互的真实感。和现实世界的自然交互一样，当相机靠近被跟踪的3D模型时，3D形象需按比例放大，并跟随相机的视角调整3D模型的展示视角。

▲ 3D应用

▲ AR跟随并触发功能

而且，在有多维空间切换诉求的场景中，可以通过监测手机的角度变化，在2D/3D两种空间中快速轻便切换。比如高德地图的步行导航，当用户抬起手机能迅速进入AR导航模式，轻松获得3D实景指引，让用户想迷路都难。

▲抬起唤醒AR导航

▲放下恢复平面导航

▲高德地图唤醒AR实景导航

在智能玩具中也会用到陀螺仪，例如Smart Car教育机器人。在它的手势控制手表上就装有陀螺仪，可以根据手势控制机器人移动。

▲ 陀螺仪体感控制

陀螺仪还能植入其他生活用品中，比如在这款潮人喜爱的LED鞋中，它跟随你脚步的速度和角度，展示炫目的灯光颜色和模式，让你成为人群的焦点。

▲ 发光的鞋子通过陀螺仪

4. 让视听一体身临其境

陀螺仪除了可以带来视觉和体感上的空间感和操纵感，在音频上也能实现更真实极致的环绕声体验。比如，AirPods Pro内置的陀螺仪和加速度传感器会对佩戴者的头部进行追踪，即使你的位置变化也能使环绕音效保持在固定位置，让环境音会根据人的移动而移动，创造沉浸式的声音体验。

▲ Airpods环绕声定位

Airpods的空间音频能力，也可以应用到界面交互上。通过把头部角度变化映射到图片视角变化，形成视差效果，转动头部就能看到更多内容。

▲ Airpods跟随示例

三、更多可能

除了陀螺仪，移动设备还有很多丰富的传感器硬件能力，如压力传感器、光学传感器、震动传感器、NFC等，各种令人印象深刻的交互表达中都有它们的身影。例如，zenly的bump功能通过近场互动快速添加好友和查看信息，字体设计网站通过屏幕多指触控可以让设计更自由和可控。

▲zenly近场互动

▲多指触屏设计字体

在体验设计中，我们可以在合适的场景使用硬件能力集成更丰富的功能，创造更加匹配自然行为和有创意的交互和反馈，为用户带来更多直接有趣的体验~

作者：能操纵空间的；

原文链接：https://mp.weixin.qq.com/s/qAz5WK9zQ7JPhgpBqmgorw

本文由 @淘宝设计 授权发布于人人都是产品经理。未经许可，禁止转载。

题图来自 Unsplash，基于CC0协议

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

编辑导语：动效，是页面的灵魂，也能让用户有更好的体验。作为设计师，我们如何将动效设计得更有简洁有趣呢？本篇文章中，作者分享了5种动效格式的优缺点。感兴趣的小伙伴不妨来看看。

动效设计，可以提升界面的趣味性和引导性，让用户浏览过程中不会太枯燥，获得更好的体验。

最近做的金山知了（后面改名为金山知识库）官网，头图元素加入了缓动效果，第一眼挺新颖的。

金山协作新年许愿活动，许愿按钮加入了运动的形象，更能吸引用户点击。

不过，输出动图和开发对接的过程中，我也遇到过一些问题：导出的动图模糊、资源太大、开发不支持动图格式等等，当时也是想尽办法地解决。

这次我总结了几种常用的动图格式，也提及我输出动图过程遇到的问题和解决方法，以及我们设计师该如何选择合适的动图格式。

• 序列帧
• GIF
• Lottie
• APNG
• SVGA

一、序列帧

刚开始接触动效，我最先了解到的 PNG 序列帧，就是输出动图的每一帧图片，然后交付开发，按帧播放图片实现。

比如这个加载动画，我的练习作品，导出序列帧资源很大，所以我平时基本不用这种格式。

导出方法：

AE 输出选择 PNG 序列，如果要导出透明背景，通道选择 RGB+Alpha。

二、GIF

GIF 支持安卓、iOS、网页，可以说也是比较常用的格式之一。

界面设计中的小元素可以使用这个格式，比如运营按钮动画、点赞图标动画等，资源不会太大。

像我之前负责的新年许愿活动，因为是从 0 到 1 的产品，开发还没有支持 Lottie，所以许愿按钮动画输出 GIF 给开发实现，压缩后资源 300KB。

虽然动图放大周围有锯齿，但是在手机上是看不到的。

导出方法：

1. AE 导出 MOV 格式，再用 PS 转换成 GIF。（注意：可能是因为动画时间太长、文件太大，导出经常失败，所以我很少用这种方式)

2. AE 安装 Gifgun 插件，直接导出。

3. AE 导出 PNG 序列，将所有图片拖进 iSparta，勾选 GIF 输出。（注意：如果导出 GIF 图片有问题，需要勾选压缩质量，填写小于 100 的值就可以解决了）

如果 GIF 文件太大，可以使用无损压缩软件：PPDuck。

三、Lottie

Lottie 是一个用于 Android、iOS、Web、Windows 的动画库，用于解析使用 bodymovin 导出为 json 文件的 AE 动画。

动画通过代码实现，是矢量的。

动画库资源会增加安装包的大小，客户端会有推动成本。

不过 WPS Office 有在使用，资源大小和稳定性目前来说是可以的。

不支持 AE 效果器直接添加的效果，比如高斯模糊、内发光、投影。

支持用图片导入 AE 做出的动效，比如金山知识库官网的头图，就是使用 Lottie 方式实现，资源小，动图也很清晰。

支持颜色渐变，但是导出 json 容易出问题。比如之前设计的会员卡片动效，渐变颜色导出后变成了黑白渐变。

这时候只需要将所有渐变图层名称按顺序改为 Gradient fill 1、Gradient fill 2、…，就可以解决了。

导出方法：

AE 安装 bodymovin 插件，直接导出。（注意：要选择保存路径，导出按钮才能点击。点击设置图标，选择 Standard 和 Demo，才能导出 json 文件和 demo 预览效果）

四、APNG

APNG 是基于 PNG 格式的位图动画格式图片，文件后缀依然是.png，可以在浏览器中预览动画。

金山协作的表情包使用的也是这种格式动图。

和 GIF 对比，它的优势在于动图边缘光滑，不会有锯齿和颗粒感。

导出方法：

AE 导出 PNG 序列，将所有图片拖进 iSparta，勾选 APNG 输出。

五、SVGA

SVGA 是由 YY 团队开发出来的一种跨平台的开源动画格式，同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式，常用于直播礼物场景，适合炫酷的礼物动效。

因为礼物效果比较复杂，一般是用 png 序列，一张图一帧地制作动画，输出 SVGA 文件。

它只会生成一个 svga 后缀文件，代码和位图元素都被集成在了一起，但是 Lottie 会生成两个文件：json 代码文件+img 文件夹。

支持 AE 自带基础动画：位移、缩放、不透明度等，但是不支持图层渐变（Lottie 支持渐变）和 AE 自带及外部插件的效果控件特效，所以 UI 动效 Lottie 比较通用，不容易出错。

六、总结

讲了那么多动效落地方案，那么在实际工作中我们该如何选择使用呢？

1. 资源大小对比

2. 质量对比

3. 使用场景对比

• Lottie：基本适合所有 UI 动图，比如图标动效、加载动效、插图动效、运营按钮动效等，优先使用
• GIF：移动端小元素动图可以使用，比如点赞动效（大尺寸透明背景动图不建议使用，锯齿严重）
• APNG：表情包、小元素动图（比 GIF 质量好）
• SVGA：直播礼物炫酷动效
• 序列帧：资源太大，不建议使用

以上就是我的业务动效落地经验总结，大家有需要这些导出插件的可以找我。

作者：ALEI；公众号：ALEI的设计思考

原文链接：https://www.uisdc.com/motion-design

本文由@ ALEI 授权发布于人人都是产品经理，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议

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

出海产品面临着语言、文化和用户习惯的巨大差异，这对UI设计师提出了更高的要求。本文为出海产品的UI设计提供了全面的干货指南，从文字、图标、色彩、图案到交互手势等多个角度，详细拆解了设计师在面对小语种和不同文化背景时需要注意的关键点。

随着TikTok的海外关注度和影响力逐渐扩展、小红书在海外友人的媒体圈炙手可热，国内的互联网市场逐渐趋于饱和，互联网产品纷纷向东南亚、非洲、拉丁美洲、欧洲扩展商业版图，这也为UI设计师创造了新的机遇。

对于出海产品而言，UI设计师需要有基础的语言文化了解，在此基础上去进行设计才能真正满足海外用户的需求，本文主要从UI的文字、图标、色彩等几个角度来拆解设计师在设计海外项目时需要注意的关键点，避免因为文化习俗差异而影响产品的易用性。

目录：

1.小语种文字：超长文本的处理规则、镜像语言、小语种适配检视技巧

2.图标：需要镜像的典型图标、不需要镜像的典型图标、图标特例

3.颜色

4.图案：禁忌图标、禁忌手势、禁忌物品、禁忌动物

5.交互手势

一、小语种文字

① 超长文本的处理规则

当在某些语种下出现界面用语超长显示不完整的情况，应按照如下优先级进行处理：

（1）精简界面用语

在保证可理解的前提下，考虑对该语言的翻译进一步精简，采用其他较短的近义词或者精简表达，如“save number”在界面用语超长时应精简为“save”。

（2）动态布局

当控件周围没有其他控件冲突时，控件可根据界面用语长度动态扩展，如按钮。

（3）缩小文字

将文本逐级缩小，建议最小缩小到18sp/dp。

⚠️并列的层级关系，文本超长时所有文字需要同时缩小字号

（4）多行显示

在设计中文时，提前考虑预留小语种换行空间，⚠️按音节换行。

（5）跑马灯

避免同意界面使用过多的跑马灯，1-3个为宜。过多的跑马灯会分散用户注意力，界面显示混乱。跑马灯占用系统资源，影响性能，过多的跑马灯可能会导致卡顿。

（6）打点截断

显示不下到文字截断显示并在末尾增加“…”

截断的使用场景：

A.用户自定义内容，如文件名，相册名

B.某处显示空间有限，但可以在本层级/上一层级/下一层级查看到全量内容。

② 镜像语言

阿拉伯、波斯语、乌尔都语、希伯来语等语言的书写都是从右向左书写，和当今世界主流语言（如英语）从左向右书写的方向相反。

一款产品无到有，产品经理需要做些什么？

在一个产品从无到有的过程中，要做好产品经理这个角色实在是不容易，除了大家都知道的写需求、写需求、写需求，要做的事多着呢。产品经理不是你眼中的只会找你麻烦，提要求..

查看详情 >

受文字书写方向的影响，阿拉伯语言的用户对于左右逻辑的认知和英文等LTR （left to right)完全相反，比如习惯将右侧作为开始，左侧作为结束。

为了支持RTL语言和用户习惯特点，在UI设计中，需要在文本，界面布局，手势操作和动画，图标等交互元素中满足RTL的特殊要求。

③ 小语种适配检视技巧

（1）字串显示——检视语言：西班牙语（拉丁美洲）

（2）大字体显示——检视语言：西班牙语（拉丁美洲）

二、图标

① 需要镜像的典型图标

（1）后退，前进

（2）显示前进方向的图标，如：骑车 发送 进度条。

▲ 阿拉伯语-显示前进方向

（3）右侧具有滑块的音量图标应当镜像，滑块应从右向左显示，如：音量调节。

▲ 阿拉伯语-音量调节

（4）表达含有文本含义的图标，如：对话框、书写、备忘录。

▲ 阿拉伯语-文本含义图标

② 不需要镜像的典型图标

（1）虽然时间的线性表示在RTL中被镜像，但圆形时间方向不是。对于RTL需要，时钟仍然是顺时针转动，时钟图标或带有箭头指向顺时针图标的刷新图标不应该镜像。

▲ 阿拉伯语-带有时间含义的图标

（2）国际标准的图标不需要镜像，如蓝牙。

（3）拟物图标不需要镜像，如SIM卡。

 (4) 斜线不需要镜像 ，如静音图标。

▲ 阿拉伯语-特殊免镜像图标

③ 图标特例

(1)亮度图标需要镜像：英文习惯认为左边暗，右边亮；阿拉伯语习惯认为左亮，右边暗。

(2)阿拉伯语有自己的问号❓

(3)阿拉伯语am.pm的位置要移动到时间左侧

三、色彩

1.中东市场：绿色为主、火红与黄色慎用。绿色象征吉祥，但叙利亚视黄色为不祥之兆，伊朗不喜爱蓝色。

2.非洲市场：禁忌多样。黑色普遍被认为不祥，红色在乍得、尼日利亚等国也不受欢迎。

3.欧洲市场：白色神圣，黄色慎用。

四、图案

禁忌手势

禁忌物品

禁忌动物

五、交互式手势

RTL语言中，带左右滑动方向的图片或者是左右滑动展开功能选项，应遵循与英文界面相反的镜像规则。

▲

汉语-左滑删除

以上就是从小语种文字、图标、颜色、图案、交互手势等方面总结的出海产品设计干货，希望能让你有所收获~

用户体验是一个老生常谈的话题。在进行 UI & UX 设计时，我们经常会忽略一些细节，虽然我们并没有觉得有什么问题，但往往会极大地影响用户的体验，从而影响整个产品。作者在本文中提出了 6 条提升用户体验的微技巧，一起来学习吧！

在设计高效、易读和漂亮的 UI 界面时，只需要小的改动就能让你的设计眼前一亮。在这篇文章中，我为你带来了另一些容易付诸实践的 UI 和 UX 微技巧。这些技巧只需很小的改动就可以帮助你提升用户体验。让我们开始吧！

一、通过色彩让设计更一致

如果你有一个设计项目，可以让你在颜色选择方面有比较多的自由，不要总是倾向于用彩虹般的颜色来进行设计。

如果你走的是彩虹路线，你很快就会发现很多内容看起来都不匹配。简单地使用一个基础色，然后将该颜色的色调和明暗进行变化并应用，可以令你的设计更加协调和一致，并且看起来更专业，而不需要那些闪亮的彩虹和需要色彩理论学位。

二、突出选中目标吸引用户注意

UI 可以是干净的、极简的和直截了当的，这毋庸置疑。但不能以牺牲用户体验为代价。对于像选项菜单这样简单的东西，要确保用户只需快速浏览一下，就能够找到选择的项目。

你不需要在这里追究更多细节。简洁的粗体就足够让用户轻松的分辨出他们选中的目标，而且他们的输入已经得到反馈。

三、加深轻字重文字 提升可读性

当涉及到长篇文字内容时，你可能会倾向于使用灰色的中间色调，这可能没什么问题。但如果你同时使用更轻字重的字体，就会发现这影响了这段内容在任何尺寸屏幕上的可读性。

不要让用户因为这种原因退出页面。可以通过将文字的颜色加深来简单地解决这个问题，让每个人都更加易读。对于较轻字重的字体，只需将其颜色加深几个级别，就能显著的改善其可读性。

四、明确元素优先级

你希望用户的眼睛每次都能快速、有效地注意到页面上最重要的元素，并将认知的努力降到最低。通过使用视觉层级原则，如字体大小、字重、颜色和布局，仅举几例，你可以通过这些技巧轻松地把最重要的元素放在突出位置。遵循这些原则有助于改善用户的体验，并有助于引导用户以更直接、准确地方式使用产品。

五、不要让用户猜测

在用户进行操作之前，特别是点击某些 CTA 按钮之前，要确保他们不会被蒙在鼓里，知道接下来会发生什么。在执行操作之前，始终让用户清楚地了解他们在点击突出显示的 CTA 按钮时可以期待些什么。改善每一步的用户体验，不要让他们在旅程中任何一个触点产生疑问。

六、为CTA按钮单独设定一种颜色

CTA 按钮在页面中哪怕不是最重要的部分，也是最重要的之一，让它在页面中突出出来!

不要让用户将它与页面上其他类型的元素（例如通知或标签）混淆。它需要很容易地被分辨出来，而这可以通过简单地为 CTA 设置单独一种颜色就做到。当然，你可以在尺寸、形状等方面做更多的细节，但只要为你的 CTA 保留一种颜色，仅此一点就可以减少大部分问题。

我希望通过这几条简短的小贴士，你能意识到对你的设计进行小的调整也能带来完全不一样的用户体验。

关于“管理模式下是否需要确认按钮”这一问题，作者结合自己最近的一次设计方案复盘，从三个维度展开分析，希望对你有所启发。

背景

需求：在课程章节页面，老师希望可以对章节、单元编辑名称和调整顺序。

设计问题：

1. 操作功能入口放在哪里？
2. 是实时保存同步，还是点击确认按钮保存同步？
3. 树结构下的排序如何设计？

一、操作功能入口放在哪里？

最开始想到的就是放在章节单元后，增加更多 icon，用户点击更多进行章节单元的编辑删除，拖拽直接调整排序。可是这种设计方式让章节看起来复杂很多，而且老师使用频率很低，一般只有在学期刚开始，备课时设置，后期几乎不再会进行调整。

为了降低页面复杂度，我把编辑排序放在统一入口，点击后，再进行操作。我给这个入口命名为管理。点击管理，进入到管理模式，调整章节、单元的名称和层级结构。

二、是实时保存同步，还是点击确认按钮保存同步？

1. 实时保存

实时保存就是用户的每一步操作都会立即生效。比如一些标题的编辑，鼠标hover上去会展示输入框，光标消失即保存成功。或者知乎编辑文章时，也会告诉你保存中。

实时保存相较于确认保存少一步操作路径，每一步操作立即生效同步更新，相对来说效率较高。由于人们总是会忘记收尾工作，实时保存也避免了让用户承担忘记点击确认按钮而使数据丢失的风险。

实时保存也有缺点，比如当用户想要反悔撤销的话，就会比较困难。一般会根据具体需求搭配撤销按钮、历史版本等方式，给用户一个反悔撤销的机会。

2. 确认按钮保存

用户进行的一系列操作，都不会立即生效，而需点击确认（保存等）按钮后，所有操作才会生效。比如飞书管理后台对于会议室预约规则的设置。默认是查看模式，修改字段进入编辑模式，展示取消、保存按钮，点击保存更新修改，取消则回到编辑前的状态。

这种方式的好处是，减少用户修改过程的心理压力。用户在修改过程中可以随意调整，内容不会被同步，修改好后点击确认按钮统一保存，内容同步。

为什么用户在编辑时会有心理压力？重点就在于同步给谁，以及同步的内容是什么。

3. 用户

内容修改后只同步给自己。

例如微信标签管理，进入管理模式后，对于标签的排序，删除都实时保存更新，没有确认按钮。标签修改后的结果只会同步给自己，而自己在管理标签的过程已经知道了修改结果，如果增加确认按钮倒显得较为繁琐。

内容修改后会同步给其他用户。

例如飞书管理后台对于会议室预约规则的设置，设置结果会影响其他用户预约会议室，比如能不能约、几点能约，所以同步设置结果就必须要谨慎一些。而多一步确认（保存）按钮可以帮用户再次确认自己的操作行为，让同步结果更谨慎。

以上可以总结为，如果内容修改后只同步给自己，则实时保持更便捷。如果内容修改后会同步给其他用户，则需考虑增加确认按钮让操作行为更谨慎。具体还需考虑内容本身。

4. 内容

如果内容对其他用户影响不大，也可以使用实时更新。

比如飞书管理后台对于会议室名称的修改，修改后，光标移开即保存成功。会议室名称对于用户来说只有信息的传递，没有功能上的制约，甚至也不影响用户行为目标。可以思考下，当用户想约会议室时，什么会影响用户决策？比如位置-用户会考虑距离是否合适、或者状态-是否当前被占用等，但会议室名称几乎不会影响用户预约决策。所以内容对用户影响较小，使用实时更新。

编辑者对于内容的重视程度。

比如知乎内容发布后，二次编辑，需点击保存更新才会同步给其他人。创作者写文章耗费了自己的时间成本，好的内容可以帮创作者带来流量和价值感，所以创作者会更重视文章内容的完整性。而实时同步编辑过程所展示的内容是不完整的，会影响读者阅读内容的感受。所以点击保存更新，统一同步内容可以避免这些问题的发生。

三、我的方案

回到自己的产品上，老师对于章节的管理操作会同步给学生，调整结果会影响学生查看章节结构。作为学生，主要任务是完成章节或者单元下的学习活动。所以调整的内容并不影响学生完成学习任务，按照我们所总结的规则，内容对于同步者影响不大，可以使用实时更新。

再来看编辑者对于内容的重视程度。老师会在学期前开始备课，管理层级结构属于备课环节，教学内容一般都是固定的，所以后期调整层级结构的频率很低。操作行为低频且优先级不高，内容固定，对于老师来说，重视程度一般。所以也可采用实时更新。

由于老师编辑章节或单元已有保存按钮，如果管理模式还存在保存操作的话，对于编辑功能来说需 2 次保存才算是真的保存，理解成本过高。选择实时保存方式更合适。

根据以上 3 点，我的方案选择实时保存，实时更新。

最后

以上是我对于工作内容中关于管理模式的复盘思考，最终设计方案的产出还是需要结合自己产品的业务，在体验和功能的权衡之下做出最合理的设计。

关于第三部分排序放在下次在写….

大部分产品中都含有一些引导帮助的功能，这些功能有什么作用呢？对于设计者来说，应该秉持怎样的初心来设计呢？目前，引导帮助功能又有哪些常见的分类呢？带着这些问题，我们一起走进这篇文章，看看作者为我们的分享。推荐相关人员阅读与学习。

一、用户怎么知道此功能的使用方式？

前几天眼睛不太舒服，去医院做了一个检查（视疲劳导致）。

因为要走商保，所以需要使用社保卡，之前我记得社保结算都需要去人工窗口，我刚过去就被一个穿着红马褂的大妈拦住说自助机也可以用社保，要我扫她胸前挂的码（可以快速到达电子社保二维码界面），扫完她就开始帮我点击操作。

她觉得我应该不会操作，所以让我看一遍，其实这个操作并不难，只是因为我不知道自助机上可以用，自助机周围也没引导操作流程。而且她这种方式让很多年纪大的人和外地过来看病的觉得你是个骗子，后面好几个人都还是去了窗口。

在B端产品中也有很多类似问题，用户不知道有这个功能、也不知道这个功能怎么使用，特别是一些数据类产品，专业性比较强。产品、技术都认为用户和他们一样都懂，实际上并不是，这个时候你需要提供一些邀请，引导用户进行使用。

邀请就是引导用户进行操作前的提醒和暗示，通常包括实时的提示信息和预期功能，以表明在当前界面或下个界面可以做什么，这是成功的交互式界面关键所在。

例如：飞书-我的空间，当鼠标停留在可编辑区域上时，就会实时地显示邀请（复选框），这个例子的缺点是鼠标如果不处于相应区域上，就不会显示邀请。

另一种方案是任何时候都显示邀请，例如：石墨文档-我的桌面，复选框一直显示。

二、静态邀请

静态邀请就是通过直接在页面上给出交互提示，可以让用户随时看到期望的界面功能。

静态邀请主要有两种模式：引导操作邀请、漫游探索邀请。

1. 引导操作邀请

01 步骤引导

例如：华为云HECS服务器产品就给出1、2、3操作步骤

引导操作会占据页面较大的空间，同时也会吸引用户的眼球。所以在设计时需要思考一下，你希望引导用户执行什么操作，用户是否可以多次查看，这样有利于设计出明晰的页面和信息层。

02 白板引导

另一种引导操作邀请叫白板式引导。

意思很明确：现在只有一个空白页面，需要引导用户创建内容。

利用空白区域“变废为宝”，如何对该区域应有的功能给出提示，是诱导用户创建内容（填补空白）的有效方式。

2. 漫游探索邀请

与引导操作邀请关系密切的是漫游探索邀请。假设你重新设计了某个页面并添加了一组全新的功能，怎样才能保证用户恰当地使用新页面，同时发现新添加的功能呢？漫游邀请是向用户介绍新功能最好的方法。

最佳实践：

1. 漫游功能用户可能不想用，所以需要有可选功能，也就是可以跳过或关闭；
2. 漫游功能不是“创可贴”不要乱用，只有针对精心设计的界面使用才能发挥价值；
3. 设计漫游的关键在于保持简单，让它容易开始也容易停止。漫游应该只是页面本身的一个演示。脱离页面的“教程”式漫游很难起到作用。

三、动态邀请

静态邀请适合提示用户当前界面中包含什么功能。然而，许多调查试验表明，用户经常不会阅读指导说明性的文字。而在用户交互过程中，在他们需要的时候提供邀请则是一种不错的方式。动态邀请就是在用户交互过程中的某个点上吸引用户，并引导他们继续下一步操作。

1. 悬停邀请：在鼠标悬停期间发出邀请

吸引用户的一种方式是通过鼠标悬停来显示邀请

例如：飞书消息列表鼠标移入后， 背景变化的同时会有一个“勾”图标来吸引用户，鼠标移入上去后提示可以点击完成，点击后消息移除列表。

最佳实践

• 当操作没有内容重要，而且希望界面整洁时，使用悬停邀请。
• 在实现悬停邀请时，可以通过改变光标、改变背景和显示提示条共同配合表明所邀请的操作。
• 在交互的不同阶段，尽量点缀一些用户熟悉的元素，通过熟悉的概念引出新概念有助于用户快速理解新功能。最常见的元素是按钮、链接、下拉箭头和众所周知的图标。
• 通过距离表明邀请操作的目标对象。

2. 预期功能邀请：使用熟悉的事物引出新事物

唐纳德·诺曼将这个术语引入到设计领域。最经典的例子是门把手，门把手的预期功能是可以抓握、扭转或按压。屏幕元素可感知的预期功能没有物理属性，不过，由于习惯、术语、图形及一致性等原因，用户能够在某种程度上感觉到他们可以操作这些元素。

例如：第一张图飞书文档sheet页“加号”图标与第二张图“三个点”图标，就是一种预期功能邀请。用户没触发之前就能猜到触发后会是什么效果。

预期功能邀请之所以有效，是因为利用人们已知的习惯与认知引入交互，从而让用户顺利完成一连串操作。

最佳实践

• 通过人们习以为常、司空见惯的概念来引出新的、不熟悉的交互方式。
• 使用可感知的预期功能来给出邀请提示(例如，用向下的箭头表示可以打开下拉菜单，而用向上的箭头表示可以关闭菜单)
• 把邀请安排在适当的上下文中，特别是要靠近交互的主体。

3. 推论邀请：用于交互期间

设计邀请时怎么才能猜测用户的想法，也是一项重要挑战。如果用户下一步可能会执行多种操作，而事实上又不可能准确判断用户想法，那么面临的困难就会比想象的大很多。

在google sketchup （ 3D）绘图工具中，当鼠标点击某个点后，进行第二个点连接时，会有多种可能性，这个时候系统也不确定用户会怎样连接，但会给出对应的提示，比如：端点、中点、背面、侧面等点位来辅助用户进行连接。

例如：这种工作流场景个人觉得也算是一种，点击“加号”右侧会滑出面板，给出你可以添加的动作。

这种在交互期间以可见方式向用户表明系统推断出的用户想法被称为推论邀请。

4. 更多内容邀请：用于邀请用户查看更多内容

图片类型的更多邀请，例如：站酷相关推荐

文字更多邀请，例如：QQ邮箱右侧最近联系人

5. 邀请的优点

精心设计的应用能够通过邀请体现出各自的细微差别，无论是静态还是动态，都是引导用户顺利进入下一个交互层次的有效方法。

谢谢观看！