一款产品无到有，产品经理需要做些什么？
编辑导语：动效，是页面的灵魂，也能让用户有更好的体验。作为设计师，我们如何将动效设计得更有简洁有趣呢？本篇文章中，作者分享了5种动效格式的优缺点。感兴趣的小伙伴不妨来看看。
动效设计，可以提升界面的趣味性和引导性，让用户浏览过程中不会太枯燥，获得更好的体验。
最近做的金山知了（后面改名为金山知识库）官网，头图元素加入了缓动效果，第一眼挺新颖的。
金山协作新年许愿活动，许愿按钮加入了运动的形象，更能吸引用户点击。
不过，输出动图和开发对接的过程中，我也遇到过一些问题：导出的动图模糊、资源太大、开发不支持动图格式等等，当时也是想尽办法地解决。
这次我总结了几种常用的动图格式，也提及我输出动图过程遇到的问题和解决方法，以及我们设计师该如何选择合适的动图格式。
刚开始接触动效，我最先了解到的 PNG 序列帧，就是输出动图的每一帧图片，然后交付开发，按帧播放图片实现。
比如这个加载动画，我的练习作品，导出序列帧资源很大，所以我平时基本不用这种格式。
导出方法：
AE 输出选择 PNG 序列，如果要导出透明背景，通道选择 RGB+Alpha。
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 是一个用于 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 是基于 PNG 格式的位图动画格式图片，文件后缀依然是.png，可以在浏览器中预览动画。
金山协作的表情包使用的也是这种格式动图。
和 GIF 对比，它的优势在于动图边缘光滑，不会有锯齿和颗粒感。
导出方法：
AE 导出 PNG 序列，将所有图片拖进 iSparta，勾选 APNG 输出。
SVGA 是由 YY 团队开发出来的一种跨平台的开源动画格式，同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式，常用于直播礼物场景，适合炫酷的礼物动效。
因为礼物效果比较复杂，一般是用 png 序列，一张图一帧地制作动画，输出 SVGA 文件。
它只会生成一个 svga 后缀文件，代码和位图元素都被集成在了一起，但是 Lottie 会生成两个文件：json 代码文件+img 文件夹。
支持 AE 自带基础动画：位移、缩放、不透明度等，但是不支持图层渐变（Lottie 支持渐变）和 AE 自带及外部插件的效果控件特效，所以 UI 动效 Lottie 比较通用，不容易出错。
讲了那么多动效落地方案，那么在实际工作中我们该如何选择使用呢？
以上就是我的业务动效落地经验总结，大家有需要这些导出插件的可以找我。
作者：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语言中，带左右滑动方向的图片或者是左右滑动展开功能选项，应遵循与英文界面相反的镜像规则。
▲
汉语-左滑删除
以上就是从小语种文字、图标、颜色、图案、交互手势等方面总结的出海产品设计干货，希望能让你有所收获~
本文由人人都是产品经理作者【Clippp】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
用户体验是一个老生常谈的话题。在进行 UI & UX 设计时，我们经常会忽略一些细节，虽然我们并没有觉得有什么问题，但往往会极大地影响用户的体验，从而影响整个产品。作者在本文中提出了 6 条提升用户体验的微技巧，一起来学习吧！
在设计高效、易读和漂亮的 UI 界面时，只需要小的改动就能让你的设计眼前一亮。在这篇文章中，我为你带来了另一些容易付诸实践的 UI 和 UX 微技巧。这些技巧只需很小的改动就可以帮助你提升用户体验。让我们开始吧！
如果你有一个设计项目，可以让你在颜色选择方面有比较多的自由，不要总是倾向于用彩虹般的颜色来进行设计。
如果你走的是彩虹路线，你很快就会发现很多内容看起来都不匹配。简单地使用一个基础色，然后将该颜色的色调和明暗进行变化并应用，可以令你的设计更加协调和一致，并且看起来更专业，而不需要那些闪亮的彩虹和需要色彩理论学位。
UI 可以是干净的、极简的和直截了当的，这毋庸置疑。但不能以牺牲用户体验为代价。对于像选项菜单这样简单的东西，要确保用户只需快速浏览一下，就能够找到选择的项目。
你不需要在这里追究更多细节。简洁的粗体就足够让用户轻松的分辨出他们选中的目标，而且他们的输入已经得到反馈。
当涉及到长篇文字内容时，你可能会倾向于使用灰色的中间色调，这可能没什么问题。但如果你同时使用更轻字重的字体，就会发现这影响了这段内容在任何尺寸屏幕上的可读性。
不要让用户因为这种原因退出页面。可以通过将文字的颜色加深来简单地解决这个问题，让每个人都更加易读。对于较轻字重的字体，只需将其颜色加深几个级别，就能显著的改善其可读性。
你希望用户的眼睛每次都能快速、有效地注意到页面上最重要的元素，并将认知的努力降到最低。通过使用视觉层级原则，如字体大小、字重、颜色和布局，仅举几例，你可以通过这些技巧轻松地把最重要的元素放在突出位置。遵循这些原则有助于改善用户的体验，并有助于引导用户以更直接、准确地方式使用产品。
在用户进行操作之前，特别是点击某些 CTA 按钮之前，要确保他们不会被蒙在鼓里，知道接下来会发生什么。在执行操作之前，始终让用户清楚地了解他们在点击突出显示的 CTA 按钮时可以期待些什么。改善每一步的用户体验，不要让他们在旅程中任何一个触点产生疑问。
CTA 按钮在页面中哪怕不是最重要的部分，也是最重要的之一，让它在页面中突出出来!
不要让用户将它与页面上其他类型的元素（例如通知或标签）混淆。它需要很容易地被分辨出来，而这可以通过简单地为 CTA 设置单独一种颜色就做到。当然，你可以在尺寸、形状等方面做更多的细节，但只要为你的 CTA 保留一种颜色，仅此一点就可以减少大部分问题。
我希望通过这几条简短的小贴士，你能意识到对你的设计进行小的调整也能带来完全不一样的用户体验。
译者：吴鹏飞；授权获取：吴鹏飞；审核指导：王翎旭；
本文由@三分设 翻译发布于人人都是产品经理，未经许可，禁止转载。
题图来自 Unsplash，基于 CC0 协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
关于“管理模式下是否需要确认按钮”这一问题，作者结合自己最近的一次设计方案复盘，从三个维度展开分析，希望对你有所启发。
需求：在课程章节页面，老师希望可以对章节、单元编辑名称和调整顺序。
设计问题：
最开始想到的就是放在章节单元后，增加更多 icon，用户点击更多进行章节单元的编辑删除，拖拽直接调整排序。可是这种设计方式让章节看起来复杂很多，而且老师使用频率很低，一般只有在学期刚开始，备课时设置，后期几乎不再会进行调整。
为了降低页面复杂度，我把编辑排序放在统一入口，点击后，再进行操作。我给这个入口命名为管理。点击管理，进入到管理模式，调整章节、单元的名称和层级结构。
实时保存就是用户的每一步操作都会立即生效。比如一些标题的编辑，鼠标hover上去会展示输入框，光标消失即保存成功。或者知乎编辑文章时，也会告诉你保存中。
实时保存相较于确认保存少一步操作路径，每一步操作立即生效同步更新，相对来说效率较高。由于人们总是会忘记收尾工作，实时保存也避免了让用户承担忘记点击确认按钮而使数据丢失的风险。
实时保存也有缺点，比如当用户想要反悔撤销的话，就会比较困难。一般会根据具体需求搭配撤销按钮、历史版本等方式，给用户一个反悔撤销的机会。
用户进行的一系列操作，都不会立即生效，而需点击确认（保存等）按钮后，所有操作才会生效。比如飞书管理后台对于会议室预约规则的设置。默认是查看模式，修改字段进入编辑模式，展示取消、保存按钮，点击保存更新修改，取消则回到编辑前的状态。
这种方式的好处是，减少用户修改过程的心理压力。用户在修改过程中可以随意调整，内容不会被同步，修改好后点击确认按钮统一保存，内容同步。
为什么用户在编辑时会有心理压力？重点就在于同步给谁，以及同步的内容是什么。
内容修改后只同步给自己。
例如微信标签管理，进入管理模式后，对于标签的排序，删除都实时保存更新，没有确认按钮。标签修改后的结果只会同步给自己，而自己在管理标签的过程已经知道了修改结果，如果增加确认按钮倒显得较为繁琐。
内容修改后会同步给其他用户。
例如飞书管理后台对于会议室预约规则的设置，设置结果会影响其他用户预约会议室，比如能不能约、几点能约，所以同步设置结果就必须要谨慎一些。而多一步确认（保存）按钮可以帮用户再次确认自己的操作行为，让同步结果更谨慎。
以上可以总结为，如果内容修改后只同步给自己，则实时保持更便捷。如果内容修改后会同步给其他用户，则需考虑增加确认按钮让操作行为更谨慎。具体还需考虑内容本身。
如果内容对其他用户影响不大，也可以使用实时更新。
比如飞书管理后台对于会议室名称的修改，修改后，光标移开即保存成功。会议室名称对于用户来说只有信息的传递，没有功能上的制约，甚至也不影响用户行为目标。可以思考下，当用户想约会议室时，什么会影响用户决策？比如位置-用户会考虑距离是否合适、或者状态-是否当前被占用等，但会议室名称几乎不会影响用户预约决策。所以内容对用户影响较小，使用实时更新。
编辑者对于内容的重视程度。
比如知乎内容发布后，二次编辑，需点击保存更新才会同步给其他人。创作者写文章耗费了自己的时间成本，好的内容可以帮创作者带来流量和价值感，所以创作者会更重视文章内容的完整性。而实时同步编辑过程所展示的内容是不完整的，会影响读者阅读内容的感受。所以点击保存更新，统一同步内容可以避免这些问题的发生。
回到自己的产品上，老师对于章节的管理操作会同步给学生，调整结果会影响学生查看章节结构。作为学生，主要任务是完成章节或者单元下的学习活动。所以调整的内容并不影响学生完成学习任务，按照我们所总结的规则，内容对于同步者影响不大，可以使用实时更新。
再来看编辑者对于内容的重视程度。老师会在学期前开始备课，管理层级结构属于备课环节，教学内容一般都是固定的，所以后期调整层级结构的频率很低。操作行为低频且优先级不高，内容固定，对于老师来说，重视程度一般。所以也可采用实时更新。
由于老师编辑章节或单元已有保存按钮，如果管理模式还存在保存操作的话，对于编辑功能来说需 2 次保存才算是真的保存，理解成本过高。选择实时保存方式更合适。
根据以上 3 点，我的方案选择实时保存，实时更新。
以上是我对于工作内容中关于管理模式的复盘思考，最终设计方案的产出还是需要结合自己产品的业务，在体验和功能的权衡之下做出最合理的设计。
关于第三部分排序放在下次在写….
本文由 @阿青 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
大部分产品中都含有一些引导帮助的功能，这些功能有什么作用呢？对于设计者来说，应该秉持怎样的初心来设计呢？目前，引导帮助功能又有哪些常见的分类呢？带着这些问题，我们一起走进这篇文章，看看作者为我们的分享。推荐相关人员阅读与学习。
前几天眼睛不太舒服，去医院做了一个检查（视疲劳导致）。
因为要走商保，所以需要使用社保卡，之前我记得社保结算都需要去人工窗口，我刚过去就被一个穿着红马褂的大妈拦住说自助机也可以用社保，要我扫她胸前挂的码（可以快速到达电子社保二维码界面），扫完她就开始帮我点击操作。
她觉得我应该不会操作，所以让我看一遍，其实这个操作并不难，只是因为我不知道自助机上可以用，自助机周围也没引导操作流程。而且她这种方式让很多年纪大的人和外地过来看病的觉得你是个骗子，后面好几个人都还是去了窗口。
在B端产品中也有很多类似问题，用户不知道有这个功能、也不知道这个功能怎么使用，特别是一些数据类产品，专业性比较强。产品、技术都认为用户和他们一样都懂，实际上并不是，这个时候你需要提供一些邀请，引导用户进行使用。
邀请就是引导用户进行操作前的提醒和暗示，通常包括实时的提示信息和预期功能，以表明在当前界面或下个界面可以做什么，这是成功的交互式界面关键所在。
例如：飞书-我的空间，当鼠标停留在可编辑区域上时，就会实时地显示邀请（复选框），这个例子的缺点是鼠标如果不处于相应区域上，就不会显示邀请。
另一种方案是任何时候都显示邀请，例如：石墨文档-我的桌面，复选框一直显示。
静态邀请就是通过直接在页面上给出交互提示，可以让用户随时看到期望的界面功能。
静态邀请主要有两种模式：引导操作邀请、漫游探索邀请。
01 步骤引导
例如：华为云HECS服务器产品就给出1、2、3操作步骤
引导操作会占据页面较大的空间，同时也会吸引用户的眼球。所以在设计时需要思考一下，你希望引导用户执行什么操作，用户是否可以多次查看，这样有利于设计出明晰的页面和信息层。
02 白板引导
另一种引导操作邀请叫白板式引导。
意思很明确：现在只有一个空白页面，需要引导用户创建内容。
利用空白区域“变废为宝”，如何对该区域应有的功能给出提示，是诱导用户创建内容（填补空白）的有效方式。
与引导操作邀请关系密切的是漫游探索邀请。假设你重新设计了某个页面并添加了一组全新的功能，怎样才能保证用户恰当地使用新页面，同时发现新添加的功能呢？漫游邀请是向用户介绍新功能最好的方法。
最佳实践：
静态邀请适合提示用户当前界面中包含什么功能。然而，许多调查试验表明，用户经常不会阅读指导说明性的文字。而在用户交互过程中，在他们需要的时候提供邀请则是一种不错的方式。动态邀请就是在用户交互过程中的某个点上吸引用户，并引导他们继续下一步操作。
吸引用户的一种方式是通过鼠标悬停来显示邀请
例如：飞书消息列表鼠标移入后， 背景变化的同时会有一个“勾”图标来吸引用户，鼠标移入上去后提示可以点击完成，点击后消息移除列表。
最佳实践
唐纳德·诺曼将这个术语引入到设计领域。最经典的例子是门把手，门把手的预期功能是可以抓握、扭转或按压。屏幕元素可感知的预期功能没有物理属性，不过，由于习惯、术语、图形及一致性等原因，用户能够在某种程度上感觉到他们可以操作这些元素。
例如：第一张图飞书文档sheet页“加号”图标与第二张图“三个点”图标，就是一种预期功能邀请。用户没触发之前就能猜到触发后会是什么效果。
预期功能邀请之所以有效，是因为利用人们已知的习惯与认知引入交互，从而让用户顺利完成一连串操作。
最佳实践
设计邀请时怎么才能猜测用户的想法，也是一项重要挑战。如果用户下一步可能会执行多种操作，而事实上又不可能准确判断用户想法，那么面临的困难就会比想象的大很多。
在google sketchup （ 3D）绘图工具中，当鼠标点击某个点后，进行第二个点连接时，会有多种可能性，这个时候系统也不确定用户会怎样连接，但会给出对应的提示，比如：端点、中点、背面、侧面等点位来辅助用户进行连接。
例如：这种工作流场景个人觉得也算是一种，点击“加号”右侧会滑出面板，给出你可以添加的动作。
这种在交互期间以可见方式向用户表明系统推断出的用户想法被称为推论邀请。
图片类型的更多邀请，例如：站酷相关推荐
文字更多邀请，例如：QQ邮箱右侧最近联系人
精心设计的应用能够通过邀请体现出各自的细微差别，无论是静态还是动态，都是引导用户顺利进入下一个交互层次的有效方法。
谢谢观看！
作者：夜莺YEAH；公众号：夜莺B端UX设计
本文由 @夜莺YEAH 原创发布于人人都是产品经理，未经作者许可，禁止转载
题图来自 Unsplash，基于 CC0 协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
在视频播放器中，合理的手势交互设计可以帮助用户提升操作上的便捷性，从而实现更快捷的触达。那么如果想在已有的手势交互上实现设计升级，产品或设计一侧可以怎么做？本篇文章里，作者针对手势交互优化一事进行了解读，一起来看。
视频播放器中承载着极其丰富的内容画面和播控功能，尤其是在寸土寸金的移动端视频播放器中，为使内容更沉浸消费，需尽可能克制界面中的功能元素/入口直接外露。基于此种场景下，合理的手势设计不但可为界面“减负”，还可帮助用户更快捷触达功能、提升操控便捷性。
视频场景中目前已有部分的常规单向手势已被用户广泛接受并形成习惯认知，如「单击 →暂停」、「双击→点赞」、「长按→快进」、「横滑→导航」、「纵滑→切视频」、「双指捏合→缩放视窗」等通用手势。
那么如何在保留用户对于常规通用手势认知的基础上，进一步对视频场景中的手势交互进行扩容升级？这也是我们接下来在手势进阶交互上的重点探索方向。
本次针对百度APP中的视频播放器场景，为提升手势操控效率，我们试图将常规的基础通用手势进行打散重组、并结合实践案例梳理出「组合手势」设计模型，以探索如何在视频场景中构建便捷高效的进阶手势体验设计。
「组合手势」是基于常规手势的组合扩展，其通常由两种或两种以上的常规基础手势所构成，若组合方式及使用场景得当，可助力用户更便捷的触达功能。
以前述的视频场景常规手势为例，其触发机制一般可分为两个阶段：step1交互信号→step2执行任务，即用户通过某一基础手势发出交互信号，系统收到信号确认后便可立即执行任务，但整个过程是线性的，手势扩展性十分有限且难以满足视频场景对于手势扩容的诉求。
于是我们在现有常规手势两阶段触发机制的基础上，尝试引入「意图识别」环节，并梳理出「组合手势」的设计模型，以探索不同基础手势相互组合后的扩展可行性。
「组合手势」触发一般可分为三个阶段：step1交互信号→step2意图识别→step3执行任务，前两阶段均可由对应的基础分支手势构成并进行组合搭配、以寻求最高效的手势组合触发路径。
由于「组合手势」并不像常规手势那样早已被系统定义为可供直接调用的接口，因此，其差异化创新具有较大设计灵活度，尤其需根据具体的使用场景进行综合考量。
百度APP视频场景早期的播控功能较少，如“视频下载”等个别特色功能入口一般都融合于基础菜单之中。
随着后续视频场景的功能建设日渐完善，我们便在基础菜单面板中拓展了一行视频菜单，专门用于承载视频场景特有的播控功能。但当前播控功能已达10余项，菜单面板弹出后还需左滑才可露出后面的功能入口，因此也常收到用户反馈找不到常用功能、菜单面板功能排布无章且触发成本高。
通过对竞品进行调研，我们发现竞品均有使用长按手势作为切入口以触发相关播控功能、并归纳出“视频播控触发”目前主流的三种长按交互选型， 分别为：长按触发独立播控面板、长按触发浮层播控选项、长按触发特定播控功能。
1）长按手势交互扩容
针对目前视频播控菜单存在的问题，经过和业务对上述三种长按交互选型方案进行综合考量，最终决定聚焦于以方案“选型B”的「长按触发浮层播控选项」作为设计切入点。我们意图将部分高频播控功能从基础菜单中拿出进行前置，并探索一套更便捷的触发机制，以此对视频场景中的播控菜单进行设计升级。
但随之而来的难点是我们目前播放器中的长按手势已被“快进”功能占据，用户对此功能的使用频率高、并已形成较深的操控认知，若直接下线“快进”功能则会对用户使用习惯产生较大影响，尤其是视频场景的重度用户。
那么如何在兼容用户已有长按操作习惯的基础上再拓展“快捷菜单”呢？是否有可能将“快进”和“快捷菜单”进行融合？这也是本次项目对于便捷手势体验的重要设计探索点。
基于此，我们决定尝试使用「组合手势」设计模型来对视频播放器中的长按手势进行重新定义，通过「长按+滑选」的机制触发快捷菜单功能项，以缩短视频常用功能路径。对应到设计模型的三个阶段分别为：
2）容错性兼容
在设定「长按+滑选」组合手势的同时，考虑到兼容主流的长按习惯、以及对于滑选手势需要有一定的适应过程，我们同时也支持点选的操作模式，即用户长按后若未产生滑选行为便松手，则松手后依然可通过点选的方式触发对应播控功能项。
3）易用性打磨
差异化的创新设计形式在前期总会面临质疑和挑战，本次项目也不例外。我们担心用户能否接受并认知「长按+滑选」组合手势的操作形式，于是在DEMO开发完成后便进行了一次小范围内的定性可用性测试，以预期在上线前可先收集一波体验问题进行快速打磨优化。
我们根据测试目标、用户类别、测试前序准备及测试步骤等环节提前拟好必要的测试脚本，并邀请了10+名不同年龄段的目标用户进行访谈测试。
测试访谈的过程中，被测用户在进行1至2次尝试操作之后，均可掌握如何使用「长按+滑选」的组合手势，这也为我们增添了不少信心。
同时，我们通过观察用户操作行为及用户主动反馈，发现仍有部分易用性细节可进一步打磨优化。
① 扩展触发热区
考虑到单手握持手机的使用场景，可尽可能扩大定义长按手势的触发热区，屏幕中除顶/底bar框架区以及本身就自带长按事件的按钮入口之外，其它大面积区域热区均可支持长按触发快捷菜单，以降低触发难度、提升易用性。
② 支持跟手触发
长按后浮出的快捷功能项，其浮出位置支持跟随手指的纵向触发位置而浮出，可减少手指在屏幕上的位移距离、操控更便捷。
③ 实时提示及响应反馈
灵活判断当前手势触控状态（如滑入选择 / 松手触发），在界面中即时给出相对应的引导提示或振感反馈，以帮助用户快速适应新的手势触发机制。
以AB实验对本次设计方案进行定量测试验证：
小流量实验上线后，经过近半个月的观察，大盘指标稳定、播放完成率等满意度指标稳步提升。
「实验组」长按快捷菜单中的功能使用率相对「对照组」均有大幅提升，说明用户对部分高频功能的确有很强的快捷触发诉求。
「实验组」的“快进”虽多了一步触发步长，实验前期“快进”使用率不及「对照组」，但随着用户对于「长按+滑选」手势整体的使用占比持续走高，通过滑选触发“快进”的操作习惯也快速被培养起来，对于用户来说，长按快捷菜单带来的整体收益是大于折损的。
随着长按快捷菜单的上线推全，长按手势的渗透率也持续走高，用户逐渐对视频场景更多的播控功能有了长按触发的诉求，于是我们对长按菜单进行了二期的设计升级，在长按浮层最右侧新增“更多”快捷入口以承接视频场景所有的播控功能，用户通过长按后的可选播控项增多，播控功能整体的使用量得到进一步提升。
手势交互是用户在现实世界行为的映射，无论是基础手势还是组合类高级手势，都须符合用户认知习惯、并融入具体的使用场景中进行设计。
以「组合手势」设计模型为指导基础、并结合具体的项目实践，我们进一步对视频播放器中更多功能场景进行了便捷手势的设计扩容探索。
“小窗播放”旨在退出当前视频落地页、并可将当前视频切换成以悬浮视窗的形式进行延续消费。
基于用户的此种操控意图，我们以“右滑返回手势”发出交互信号而触发浮出小窗入口，随后系统根据用户“纵向拖拽手势”的行为来判断其是否有激活小窗的意图，若有短距上滑拖拽行为，松手释放即可快捷激活视频小窗，以提升观看体验的连续性。
“双指拖拽手势”可拖拽并清屏视窗画面，以此手势发出交互信号，若在“双指拖拽手势”基础上有识别到“双指扩张手势”行为，则松手释放即可快捷激活“满屏播放”，以满足更沉浸视频浏览体验。
便捷手势的设计出发点是为提升操控效率、缩减功能触发路径，从而使视频内容更沉浸消费。希望本次基于视频播放器场景的手势体验设计实践能给大家带来帮助和启发，后续我们也将持续深耕视频领域、并进一步探索更贴合用户使用场景的手势交互体验。
作者：百度APP用户体验
来源公众号：百度MEUX（ID：baidumeux），百度移动生态用户体验设计中心，负责百度移动生态体系的用户/商业产品的全链路体验设计。
本文由人人都是产品经理合作媒体 @百度MEUX 授权发布，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
按钮是产品中十分常见的交互元素之一，好的按钮设计可以很大程度地提升用户体验。那么，怎么打造出符合用户需求、深受用户喜爱的优秀按钮？这篇文章里，作者对按钮UX设计进行了拆解分析，一起来看一下。
在数字产品中，按钮是最常用的交互元素之一。一个好的按钮设计可以提高用户体验和产品的使用率。
本文将探讨一些关于按钮UX设计的方法，包括明确按钮功能、选择合适的颜色、确定按钮大小、添加标签和描述、考虑交互方式、测试和优化等。
通过综合考虑这些因素，我们可以打造出符合用户需求的优秀按钮，提升产品的用户体验和竞争力。
按钮是一种用户界面元素，用于触发特定的操作或行为。
它可以是文本、图像或交互式元素，通常位于页面的底部或顶部，以便于用户快速访问。
根据不同的用途和设计风格，按钮可以分为多种类型和分类，例如：
以上仅是一些常见的按钮类型和分类，实际上还有很多其他的类型和分类。在设计按钮时，需要根据具体的场景和目的选择合适的类型和分类，并结合用户体验和产品需求进行优化。
按钮的位置和大小对于用户体验和产品可用性非常重要。一般来说，按钮应该位于用户视线的中心位置，以便于用户快速访问。同时，按钮的大小也应该适中，不要过大或过小，以免影响用户的操作。
在实际设计中，可以通过以下几种方式来确定按钮的位置和大小：
除了位置和大小之外，按钮的布局方式和排版规则也非常重要。合理的布局方式和排版规则可以提高用户的使用体验和产品的可用性。以下是一些常见的按钮布局方式和排版规则：
按钮的颜色对于用户体验和产品可用性非常重要。一般来说，按钮的颜色应该与产品的品牌色或主题色相匹配，以便于用户识别和记忆。同时，按钮的颜色也应该具有明显的对比度，以便于用户在不同的背景下快速找到目标按钮。
以下是一些常见的按钮颜色选择原则：
除了颜色之外，按钮的样式设计也是非常重要的。合理的样式设计可以提高用户的使用体验和产品的可用性。
以下是一些常见的按钮样式设计要点：
按钮文字的设计对于用户体验和产品可用性非常重要。一般来说，按钮文字应该简洁明了、易于理解和记忆，同时要符合产品的品牌形象和主题风格。
以下是一些常见的按钮文字设计原则：
除了文字之外，按钮标签也是非常重要的。合理的标签设计可以提高用户的使用体验和产品的可用性。
以下是一些常见的按钮标签设计要点：
按钮的交互设计对于用户体验和产品可用性非常重要。合理的点击效果和反馈机制可以提高用户的使用体验和产品的可用性。
以下是一些常见的按钮点击效果和反馈机制：
除了点击效果之外，按钮的动画效果和过渡效果也可以提高用户的使用体验和产品的可用性。
以下是一些常见的按钮动画效果和过渡效果：
按钮的测试和优化对于提高产品的用户体验和可用性非常重要。合理的测试和优化策略可以发现并解决产品中存在的问题，提高产品的品质和用户满意度。
以下是一些常见的按钮测试方法和流程：
除了测试之外，按钮优化也是提高产品用户体验和可用性的重要手段。以下是一些常见的按钮优化策略和技巧：
按钮UX设计对于提高产品的用户体验和可用性非常重要。合理的按钮设计可以增加用户的参与度、趣味性和便利性，从而提高用户对产品的满意度和忠诚度。
在进行按钮UX设计时，需要考虑按钮的位置、大小、颜色、样式、功能、反馈机制等多个方面，以确保产品能够满足用户的需求和期望。同时，还需要进行测试和优化，发现并解决产品中存在的问题，提高产品的品质和用户满意度。因此，按钮UX设计对于现代产品开发和用户体验设计都具有重要的意义和必要性。
本文由 @MO鱼山寨 原创发布于人人都是产品经理，未经许可，禁止转载
题图来自 Unsplash，基于 CC0 协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
将大东西进行拆解为小的东西，逐步解决问题，解决了小问题，大问题也解决了，在产品设计中也是一样。在面临圆角直角的选择时，我们来看看作者如何做选择
在当今数字化时代，UI设计已成为创造引人入胜的用户体验的关键要素。一个成功的UI设计不仅需要技术知识，还需要对细微之处的深刻理解。本文将探讨两种基础但极为重要的图形元素：圆角和直角。它们如何影响用户的感知和互动，如何在设计中恰到好处地应用它们，以及它们在实际案例中的运用。
在介绍“圆角与直角”前，先给大家分享一个心理效应“bouba/kiki效应。”
这个效应最早由德国心理学家沃尔夫冈·科勒在1929年提出。
最早在1929年沃尔夫冈·科勒做了一个实验，该实验展示了两种形式，并询问读者哪种形状被称为“takete”，哪种形状被称为“maluma”。尽管没有明确说明，科勒暗示人们强烈倾向于将锯齿状形状与“takete”配对，将圆形形状与“maluma”配对。
在2001年的另一组实验中拉马钱德兰和 爱德华·哈伯德使用“kiki”和“bouba”这两个词重复了科勒的实验，询问美国大学本科生和印度讲泰米尔语的人，“这些形状中哪个是bouba，哪个是kiki？” 在两组中，95% 到 98% 的人选择弯曲的形状为“bouba”，锯齿状的形状为“kiki”，这表明人类大脑以某种方式一致地将抽象含义附加到形状和声音上。
这个效应主要讲述的是“人脑如何以一致的方式将抽象含义附加到视觉形状和语音上”
那么我们不妨扩展一下，把这这种效应延展到角色上就拿我们最熟悉的“喜羊羊与灰太狼”举例，我们只听名字“羊”和“狼”就可以潜意识的认为“喜羊羊”就相当于“bouba”、“灰太狼”相当于“kiki”，“羊族”一听就是温和的族群，而“狼族”就是较为凶猛的族群。那么我们可以再回顾一下，“可可爱爱的卡通人物”大部分就是以圆形为基础“小黄人、葫芦娃、维尼熊、大头儿子等”，“超级大反派”更多是以“直角”为主“女巫、蛇精、吸血鬼”，这就是“将抽象含义附加到视觉形状和语音上”。
如果听完这些你还是不懂，那么最简单的例子一个堪比吴彦祖的帅哥叫“文轩没有大脑袋”，那当你见到他时一定会去观察这个人到底有没有“大脑袋”
那么回归正题，我们将“圆角与直角”代入这种思考方式并将其进行UI思考，就可以大致了解“圆角与直角”大致的特性
1）定义
2）特性
1）定义
2）特性
那么回想一下“bouba/kiki效应”，今后在设计中当我们看到某个产品大量的使用“直角/圆角”我们就可以分辨这个产品的大致风格，同样字体搭配也是相似的效果，通过不同的banner可以大致看出运营活动的大致目的。
在实际的使用场景中，我们就从最常见的“按钮、卡片”两个场景来举例分析“圆角、直角”的作用。
我们首先具体聚焦在UI设计中对于“按钮”这一元素的圆角和直角的使用：
1）圆角按钮
2）直角按钮
那么这里我们会有一个疑问，那就是“移动设备适应性”，这里我们可能会想到“直角按钮”的面积看起来要比“圆角按钮”的触控面积更大，那为什么“圆角按钮”更易于触控呢？
我们从两个方面来解答
1）触控面积
2）视觉感知与触控体验
通过这两方面，我们是不是又能联想到“bouba/kiki效应”，介于“圆角本身的属性”我们会更容易去点击他。
对于卡片我们还是先对比，在进行详细的分析。
1）圆角卡片
2）直角卡片
这里更要值得注意的一点是视觉效果方面的“圆角对于用户的视觉效果要强于直角”，巴罗神经学研究所对角落进行的科学研究发现，“角落的感知显着性随角落的角度呈线性变化。锐角比浅角产生更强的虚幻显着性”，这里角越尖，看起来就越亮。角落越亮，就越难看。
通过上述对比我们可以得到一个结论“圆角比直角更亲和”，那么可以接着推论“圆角卡片更容易使用户接受卡片内信息”这是因为圆角向内指向矩形的中心。这会将焦点放在矩形内的内容上。当两个矩形彼此相邻时，还可以轻松查看哪条边属于哪个矩形。尖角向外，从而减少对矩形内部内容的关注。当两个矩形彼此相邻时，它们还使得很难判断两条边属于哪个矩形。这是因为每个矩形边都是一条直线。圆角矩形的边是独特的，因为线条朝着它所属的矩形弯曲。
那么对于“直角、圆角”的使用我们以“CONFIRMED、汽水音乐”这两个产品来分析看一下这两个产品对于“直角、圆角”的应用。
CONFIRMED（Adidas旗下网站，这里懂球鞋的朋友我们可以把它理解为Nike的SNKRS）
作为Adidas旗下产品发售平台，CONFIRMED更多的是发售一些潮流类的服饰最近有“Y-3、CLOT、FEAR OF GOD”等一些潮流服饰，这个应用程序旨在为Adidas的高需求和限量产品提供一个更加公平和直接的购买渠道，通常涵盖了品牌与设计师和艺术家的合作款，以及特别版的运动鞋。
那么我们从“产品定位、用户群体、主要功能流程”来分析一下
1）产品定位
2）用户群体
3）主要功能流程
这里我们先从“CONFIRMED”卡片元素分析（本文只讲述的直角卡片的用途，不过多讲述App功能）
每款产品可以在一个直角卡片中展示，其中包括产品图片、名称和一些基本信息。这里在App的“首页、发售信息、会员权益”这三个模块最为突出，这种布局有助于用户快速浏览和识别不同的产品
4）功能展示
这里“CONFIRMED”不同的卡片可以承载不同的功能，如显示即将发售的产品、已经发售的产品、品牌故事等，帮助用户快速定位他们感兴趣的内容。这里使用通过卡片元素的方式来详细展示产品，会使整个产品的调性保持一致，大卡片的元素传递给观众的浏览体验会更直观的感受产品（这里会发现一个很有趣的细节，貌似好的国外、跨境电商的App都会采用这些大的直角卡片）
接下来我们就讲述关于“CONFIRMED”按钮元素使用的分析：
5）突出的功能
直角按钮通常用于突出最重要的操作，例如“购买”、“注册抽签”或“查看详情”。这些按钮因其鲜明的边界和直接的设计而容易被用户注意到。
6）风格统一
使用直角按钮可以与应用中其他直角设计元素（如卡片）保持视觉一致性，为用户提供一致且简洁的视觉体验。
7）视觉引导
这些按钮通常配有“CONFIRMED”的颜色（蓝色），用于引导用户的注意力，帮助他们快速识别应用程序中的不同功能。
这里我们可以看到“直角卡片”“直角按钮”在 CONFIRMED 应用中的应用可能主要体现在其用户界面的设计上，通过清晰、有序的布局和直观的用户交互，提升用户的体验。
提到“汽水音乐”大家都不陌生，前段是时间各大“rapper、流行歌手”发歌都在汽水，这个App是可以和抖音联动的，所以播放音乐的模式没有采用大家常见的“点歌、切歌”操作，而是换成随机曲子和“抖音”向下滑动切换一样，这样既新颖又能容易使用户养成操作习惯，不至于一下子新的交互方式无法适应。那么我们同样从“产品定位、用户群体、主要功能来分析”
1）产品定位
2）用户群体
3）主要功能流程
那么我们从卡片开始分析，卡片主要应用在“歌曲、专辑”、“播放列表”、“歌单推荐”、“音乐盲盒”
那么他们起到的作用分别是
“圆角按钮”对于“汽水音乐”的作用有：
其实通过对比，我们会发现“圆角”在社交、音乐等偏娱乐方向采用的更加多，因为这些产品属性需要“产品与用户”、“用户与用户”之间拉近距离，圆角不仅更容易我们的眼睛处理，而且还使信息更容易处理，圆角很有吸引力。那么“直角”就偏向专业领域、正式的场合以及一些小众的产品。
了解并应用这些元素的特性，不仅能够提升设计的美观性，还能够在更深层次上与用户产生共鸣。作为UI设计师，深入理解圆角和直角的影响，将使我们能够更精确地传达我们想要表达的信息，在了解简单的形状如何影响感知后，我们就可以有目的地进行设计，将每一个微小的视觉元素加在一起，形成用户潜意识中感知的一致、独特的品牌个性。
本文由 @文轩没有大脑袋 原创发布于人人都是产品经理，未经授权，禁止转载
题图来自Unsplash，基于CC0协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
排序在B端和C端产品中都比较常见，随着用户对产品使用的易用性提高，排序在产品交互中也在变化。本文分享B端拖动排序的多种场景及交互，希望对你有所启发。
很久没有更新B端产品相关的文章了，近期工作项目中做了很多新需求，接触了更多业务，也学到了一些新的交互，后续将会根据我在实际工作项目中遇到的需求展开总结。
B端产品设计具有较高的业务属性，所以对于ui设计师而言也需要有较强的业务知识，在完全理解需求后，再针对业务场景、用户体验、交互、布局合理、易用性等多维度展开设计。
这一期主要分享关于B端产品中拖动排序功能。
排序在B端和C端产品中都比较常见，前期排序有通过点击上下箭头排序，但是这样的交互易用性较差，随着用户对产品使用的易用性提高，这种排序方式在产品交互中已经渐渐的被舍弃。
目前对于排序功能，使用更多的是通过拖动排序，通过选中数据后长按鼠标右键，上下拖动来完成数据的排序。
在B端产品中，我目前接触的拖动排序的组件包含以下两个大类：
对于分类2【树组件多层级排序】又包含两个小类：
对于小分类【跨层级排序】又可以细分为四个场景：
上面已经总结了排序的组件和场景，下面我们就一起来看看不同组件在不同场景下的具体交互，通过实际项目设计详细介绍拖动排序的功能。
数据默认展示类似列表数据一样，平铺左对齐排版，当拖动排序时，鼠标移动到需要排序的数据行，长按鼠标右键并拖动数据上下移动，被拖动的数据原位置置灰（也可以直接消失）。
同时，被拖动的数据跟着鼠标走，移动到其它位置时，在将要放下的位置出现蓝色高亮分割线（还可以做到所有数据实时变化位置效果）这样能让用户更加直观地看到数据位置的变化。
此类需求一般是针对一级数据排序，数据结构比较简单，没有文件夹多级树状结构，下面列举几个工作中遇到的需求场景，以及分享几个其它产品中遇到的交互，便于大家理解。
由于B端产品具保密性，所以下面分享的截图非工作实际数据，大家只要明白需求场景和交互即可。
需求场景1：产品业务中有很多的表单，表单中的字段顺序在不同企业中不同，应该如何设计呢？
在设计时，可以将表单所有的字段罗列出来，然后用户通过自定义排序字段即可，这里的交互就可以直接采用上下拖动排序。
需求场景2：飞书中有多个应用，对于每个用户而言，自己所关注的应用不同，优先级不同，该如何设计？
同理，飞书也是对用户个人的应该设计了拖动排序功能，可以根据自己关注的应该排序应该的位置，从而更快的找到自己常用的应用，提高工作效率。
无论是对于列表数据还是卡片数据的排序都可以采用这种拖动排序的交互。
（1）同层级排序（横线高亮显示即将放的位置）
树组件同层级排序默认展示和拖动时效果与一级目录常规排序一致。
（2）跨层级排序
父级未展开时：拖动到父级、父级整行高亮
如下图，当需要把文件夹【数据名称显示004】放在【数据名称显示003】文件夹中，鼠标拖动数据放在【数据名称显示003】时，【数据名称显示003】整行会出现蓝色高亮，表示被拖动的数据即将放在该文件夹内。
父级未展开时：拖动长按停留在父级时，父级自动展开子级。
如下图，按照上面的步骤拖动时，当鼠标一直停留在【数据名称显示003】的位置时，该文件夹会自动展开二级目录，这是一个拖动排序比较友好的交互，可以让用户再次看到该目录下的数据结构，并快速一次性选择需要放的位置。
父级已展开时：拖动到子级时，父级整行高亮，拖动到的位置出现高亮横线。
如下图，在上图基础上，当鼠标继续拖动数据，想要放在二级目录中时，数据一级目录同样会显示高亮，告诉用户当前数据的层级关系。
同时，二级数据中会出现蓝色高亮分割线，标识被拖动的数据即将放的位置，这样就能清晰的知道被拖动的数据将放在那个目录的那个位置。
父级已展开时：拖动到子级文件夹时，父级不需要高亮，子级文件夹目录整行高亮（子级已展开和未展开的交互与父级同理）。
当需要将数据拖动到二级文件夹内时，只需要高亮二级文件夹即可。
关于树组件多层级排序的使用场景和交互比较复杂，上面我根据不同场景分别列出了交互展示方式，下面再根据实际业务需求列举案例说明，因为此场景主要是针对交互和显示，所以我就直接拿动图展示，便于大家理解。
本文由 @设计小余 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于 CC0 协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
交互规范有效地规定了产品如何与用户进行交互的规则和标准，这篇文章里，作者便梳理了B端产品的交互规范，一起来看看，或许会对产品经理、产品开发人员、交互设计师等人群有所帮助。
从业B端产品7年+，大大小小公司对交互规范有着不同的要求，但是万变不离其宗，交互总有其底层规范要求，那么接下来跟大家详细说明一下交互规范细则，超级详细的交互规范来啦！
WHAT：交互规范是什么？
产品交互规范，也称为界面交互规范或用户界面规范，是一套规定产品如何与用户进行交互的规则和标准。它包括设计元素的布局、动作反馈，以及对产品的使用流程和功能逻辑等各个方面的设定和控制。
交互规范重点在于人机交互的友好性和流畅性，用起来顺手且符合商业目的就是交互规范最好的诠释。
WHY：目的及意义
WHO：适合哪些读者
产品经理，产品开发人员，交互设计师，产品UI设计人员。
分成两个层面：系统级和产品级。
1）系统级色彩体系可参考蚂蚁的交互组件https://ant.design/docs/spec/colors-cn，蚂蚁组件对整体交互规范有着细致且顺滑的操作演示。假设公司内部有专门的设计部门，可以设计部门整体定义公司色系以及字体等等。
2）产品级色彩体系进一步去突出产品本身色彩调性以及功能属性。
1）品牌色的应用
品牌色体现产品以及品牌特色，加深使用者对品牌的印象。比如支付宝系列操作均是蓝色为主，微信主色调为绿色和白色，抖音是黑色系。
2）功能色
功能色代表了明确的信息以及状态，比如错误提示，失败提醒，成功提示等等。在一套产品体系下，功能色尽量保持一致，比如新增，删除等功能按钮色彩需要跟主题色保持一致。
公司重要对外宣传系统以及内部主系统均使用品牌色，突出公司特色；
另外一个页面尽量不要超过3种颜色，并且是在同一标准色彩体系内，尽量不要自己去色彩库随意选取色彩。
字体是体系化界面设计中最基本的构成之一。
在中后台视觉体系中定义字体系统，我们建议从下面四个方面着手考虑：主字体，字阶与行高，字重，字体颜色。
为了保证在多数常用显示器上的用户阅读效率最佳，根据电脑显示器距离舒适度以及用户观感舒适度，确认导航为16px，标题为16px，正文为14px，说明为12px。
字阶是指不同尺寸的字体。行高就是一行字的高度，包装在字体外的边框盒子的高度。
建议的主要字体为 14，与之对应的行高为 22。其余的字阶的选择可根据具体情况进行自由的定义。建议在一个系统设计中，字阶的选择尽量控制在 3-5 种之间，就跟衣服搭配一样，颜色不要过多，简洁舒适为宜，字体字号在一个区间范围内。
字重为字体的粗细程度，建议用 regular 以及 medium 的两种字体重量。
黑色为主，正文建议选用 #333333到#666666 之间的颜色。注释类的文字建议选用#999999。
文案类最好为左对齐，数字类最好为右对齐，表单类间距建议8px，文字右对齐，结尾没有冒号。
市面上比较主流的为这四种按钮，主按钮，线性按钮，次按钮和纯文字按钮。具体使用规则和使用场景如何呢？我们应该从哪些方面下手去设计按钮？下面给大家一一进行解答。
主按钮为主要的按钮。引导用户进行点击操作，一个按钮区域最多使用一个主按钮。
场景应用：可应用于确认、新增、保存等等，你想引导用户做何操作，就可以把视觉焦点集中在哪个按钮上。比如退款操作时，商家本质希望用户不退款，主按钮为返回或是再想想的按钮。
需要注意的是不要在同一个表单中使用多个主按钮，1-2个即可，次按钮或是线性按钮多于5个时可以向上折叠收起。
线性按钮&次按钮两种按钮均可点击，但是功能均弱于主按钮。如果希望引导用户进行点击，可以选择线性按钮；若希望用户尽可能少点击或是不点击可以选择次按钮。
场景应用：一般在大表单页面批量导入，下载均为次按钮或是线性按钮。
纯文字按钮就是有颜色的文字按钮，可进行点击。
场景应用：一般应用于表单中大面积需要点击的操作，比如查看，删除，编辑等等，对表单中每一行进行的操作。
谨慎按钮用于特殊情况下防止误操作的按钮。
场景应用：一般应用于删除/付款/退款/修改权限/移除等危险操作，大部分都需要再次确认才可以。
前面介绍了那么多种按钮以及应用场景，那么按钮应该如何进行排列，需要遵循何种规则呢？
1）阅读习惯
大家可以闭着眼睛想一下，正常我们阅读的习惯是从左到右，从上到下，表单信息阅读完毕后需要进行操作，最好都放在右上方。
2）相关性原则
让相关的操作按钮更相近，比如上一步和下一步，保存和取消，增删改查，让这些兄弟按钮距离挨得更近一些。
导航是B端系统的地图索引，帮助用户可以顺利到达目的地。导航对于B端产品交互而言，是系统之眼，一方面清晰展示系统结构，另一方面帮助用户快速找到他们想要的信息。好的导航清晰操作顺滑，差的导航会让用户没有二次进入的想法，所以好的导航是系统成功的一半。
市面上主流的导航交互为全局导航和页内导航，好的导航如何进行设计，我们需要选取哪种导航模式？继续一起探索吧。
1）侧边竖向导航
使用规则：
需要特别注意竖向导航的排列顺序，较为复杂的企业级系统从上到下一般依次为：
优点：
缺点：
层级入口较多时，用户下钻纵深体验稍差。
2）顶部横向导航
使用规则：
优点：
缺点：
1）面包屑
面包屑帮助定位菜单以及返回菜单，可以显示当前页面的路径，是比较常用的导航方式。
使用规则：
显示当前页面路径，方便用户进行返回操作，最好大于等于3个层级进行使用；
2）Tab
使用规则：
较常应用于显示页面不同内容构成，比如人力详情页显示Tab栏为基础信息、公司任职信息、奖惩信息等等。
3）步骤条
使用规则：
较常应用于一步步按照某种提示去完成任务，任务有明确的先后顺序；步骤一般为1-5步。
产品交互规范的内容模块还是较多的，希望这篇文章对你的产品交互能力有所提升！另外交互规范是产品架构的基础的地基，具体楼房盖成什么样还需要用心去思考以及借助公司内部UI和UE的力量。
本文由 @月亮漫谈 原创发布于人人都是产品经理。未经许可，禁止转载。
题图来自 Unsplash，基于 CC0 协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
蓝蓝设计的小编 http://www.lanlanwork.com
