做到这三点挑战，产品经理只会不断升值
编辑导语：很多产品在使用时，都会有“用户反馈”这一个设置，用户可以将自己的操作体验反馈给商家，但你真的了解“用户操作反馈”是怎样的一个机制吗？这篇文章详细讲解了“操作反馈”这一设置，一起来读一读吧。
前几天使用自己产品的时候，点击作业列表想要查看作业详情，点击之后没有反应，然后又连续点击了好几下，过了几秒钟，界面开始连续跳转。后来才知道，因为用户量比较大，产品稍微会有一些卡顿，导致用户点击后，产品没有实时的反馈给用户，使得用户也变得不知所措。
那为什么会出现这种情况呢？主要原因就是没有用户操作反馈。一个好的产品需要根据用户不同的行为操作，实时给出反馈，告知用户当前状态或建议，消除用户因为不确定性带来的不安感和焦躁感。
可以将用户整个操作流程简化为：用户输入—平台反馈—结果反馈。可以看出反馈其实分为两种：过程反馈（平台反馈）和结果反馈。
可以看到无论Google公司推出的Material Design，还是苹果公司的iOS设计规范，都对用户过程反馈做了细致的设计规范。
国内也有很多体验很好的APP对于用户反馈方面也做的不错，例如QQ、飞书。
当然也有很多的产品并没有做很细致的反馈设计，操作反馈作为交互设计中一个很细小的部分不会影响用户正常使用产品，但是会提升用户使用产品的体验。好的用户体验在B端对于用户来说不仅降低了学习成本，也提升了工作效率。那么如何来设计操作反馈呢？
当用户触发界面时，也就是人机交互时，界面给出的变化，这是过程反馈。
当触发结果页面不能及时告知用户时，例如点击操作区域需要跳转新页面，或者需要展示弹窗等这一类都需要经过一段时间才可以让用户看到结果的场景，需要考虑给触发反馈。
那什么时候不需要给触发反馈呢？例如点击收藏，收藏的icon会变成填充样式，用户可以实时的感受到触发结果，即不需要再给用户触发反馈。
过程反馈的方式主要分为三种。
（1）视觉反馈
用户操作界面之后，界面通过视觉的变化对用户进行反馈，比如：颜色、形状、动画等。
对于iOS系统，以及一些体验较好的应用程序分析得出主要使用场景包含：列表、宫格、操作Icon、按钮（控件）。
场景是根据样式的不同进行分类的。
a. 列表
样式：当用户点击时给列表一个灰度的背景色，让用户知道自己已经点击了触发区域。也告知用户在当前背景色块上，点击任何地方都是可以触发的。
b. 宫格
样式：当用户点击时给宫格一个灰度的遮罩，或者是一个灰度的背景色。
c. 操作Icon
样式：当用户点击时，Icon降低透明度。
d. 控件
只根据控件样式来进行举例说明，例如actionsheet，在样式上可以根据列表样式做统一规范。
Button样式：当用户点击时，按钮变色，如果是次级描边按钮，也可以增加填充的色块。
e. 步进器
样式：给点击区域一个背景色。
f. 键盘
样式：在点击时，会给一个填充的背景色、或者进行反色处理。
（2）触觉反馈
（3） 听觉反馈
用户操作界面后，界面通过声音对用户进行反馈。
iOS设置手机铃声时，选择不同的铃声时，会自动播放铃声。
过程反馈设计规范可根据产品界面的不同元素制定反馈样式。这本身是一件比较细致的工作，可能花费较大的工作量，所以在实际工作中也可根据产品功能的优先级，安排迭代顺序。
当系统对用户的操作，或因用户的行为导致的变化结果，给出的反馈就是结果反馈。
由于结果反馈的文章讲解特别多，这里就不再过多赘述，简单的总结一些常用的结果反馈方式。
结果反馈方式可分为4种样式：
弹窗分为模态弹窗和非模态弹窗。
模态弹窗会打断用户当前操作流程，也是一种强提示，用户必须和弹窗进行交互，才能进行之后的操作。
非模态弹窗一般出现2-3秒之后，自动消失，不会对用户造成干扰，属于轻量级提示。
例如当新建表单时，点击提交按钮，toast提示提交成功，这就是使用了非模态弹窗对用户的操作进行了轻量级反馈。
若删除文件时，一般会弹出一个对话框，让用户再次确认删除后的一些影响，是否删除？这就是使用了模态弹窗对用户的操作进行的强反馈。
一般用做表单的校验，让用户知道自己所填写项的状态，例如输入内容是否合理，该如何填写等提示。
页面反馈，相较于弹窗会更重一些。一般也用于比较重要的操作流程的结果页面，例如淘宝买完东西的结果页面、饿了么下单完成后的结果页面。
动画的合理使用不仅可以告知当前状态，还会将用户带入当前场景，吸引用户注意力。例如，微博的点赞，会出现一个点赞的动画，让点赞变得更加有趣。
微信图书，点击进入书本详情时会出现一个打开书本的动画，让用户带入实际看书场景，增强沉浸感。
音效的反馈也比较常见，例如ios下载时，会有叮咚一声，声音的反馈不仅提升了用户体验，对于加强品牌认知也很有帮助。
以上是我对于操作反馈的一些整理和复盘，其中也借鉴了一些大神的佳作，不到之处，希望和大家一起探讨交流。
在实际项目的运用中，也会根据实际的研发情况，逐步的去调整，不断地完善产品细节。
本文由 @小太阳不爱吃辣椒 原创发布于人人都是产品经理，未经许可，禁止转载。
题图来自 Unsplash，基于 CC0 协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
编辑导语：自适应设计指能使界面自适应显示在不同大小终端设备上的设计方式及技术。而内容自适应则需要对用户行为进行预判进而改变设计内容，本文作者将对自适应设计在内容上的应用进行分享，值得阅读学习。
我们一般说的自适应设计，多半指的是界面自适应，即为不同的终端设计不同的界面布局与操作流程。而内容自适应，是一种根据用户标签与操作行为预判用户目标所需页面内容的方式，他的优点是既能预测交互意图，实现信息量的智能输出，同时也能满足不同交互需求，改变界面样式，达到降低人机交互负荷的目的。
以下，是道乐UED团队 基于查阅的资料以及行业的积累，带来的一篇关于内容自适应的分享。
目录：
目前自适应界面在内容上的呈现大致包括两种类型：
顾名思义，就是根据用户当下的操作，实时判断用户所需，从而调整不同的信息展示与布局，他的优势在于能尽量减少页面上与用户目标不相关信息的展示，从而提升用户操作的效率与准确度
通过用户标签与过往数据的分析，调整页面内容的展示数量与优先级，仅展示用户感兴趣或可能感兴趣的内容，从而提高用户在使用产品中的转化率。
总的来说，内容自适应更趋向于对用户行为轨迹的纵向思考，将“用户寻找信息”的被动服务模式转化为“信息寻找用户”主动服务模式。满足差异化的用户需求，提升企业系统的用户体验和人性化服务水平。
（1）搜索
① Google搜索
自适应设计在搜索上的应用意味着针对每个用户的每一次搜索，都会产生一个定制的界面，该界面将自身塑造成所显示的信息。请看以下示例：如何根据不同的用例更改搜索结果页面。
最近，Google搜索的设计重点是在用户点击搜索结果之前传递信息。为此，Google采用了一种称为自适应设计的方法。
Google搜索适应用户需求的第一种方法是重新安排导航以适应结果。
Google有362,880种独特的方式来排列导航，以适应搜索查询。然而，自适应设计的最大例子是搜索结果本身的布局。结果页面是完全模块化的：根据搜索结果，不同的元素出现在不同的配置中。
例如，音乐家Lizzo的搜索结果集中在媒体上：一组模块以本机格式显示视频，图片和歌曲。还显示最近的新闻，推文和即将举行的活动，以及指向Lizzo在YouTube、Twitter、Facebook、Instagram和SoundCloud上的个人资料链接。直到页面底部，我们才能看到看起来像传统搜索结果的元素。
另一方面，以色列特拉维夫市的搜索结果为旅行者提供优先信息。图片、地图、当地天气以及与旅行有关的问题（“特拉维夫对游客安全吗？”、“特拉维夫以什么闻名？”）优先于传统搜索结果。模块促进了特拉维夫的活动以及对附近其他城市的推荐。搜索结果页上可能会出现数千个不同的模块，从简单的布局驱动模块到完全独立的应用程序。
例如，“aapl”的搜索结果页上，股票代码模块显示了当前价格和交互式历史价格图。
通过自适应设计，所有有关内容、格式和顺序的决策都是由算法决定的。设计人员的作用不再是创建明确的外部布局。
如今，尖端产品的设计者，以及未来日常产品的设计者，正在就生成这些布局的规则做出决策。
② 淘宝搜索
淘宝搜索结果页，当用户往下滑动查看更多时，系统判断你根据当前搜索页没有找到想要的内容，则根据不同物品展示物品的更细分的筛选，如啤酒会c展示“德国进口啤、国产精酿、比利时精酿”，方便用户找到目标物品。
③ OTA平台PC端（去哪儿、携程等）
携程/去哪儿pc端中，Tab前置条件是国内/国际，在选择国内机票时，默认单程。在选择“国际/港澳台机票”时，则默认机票往返。
这样的功能设置是基于对用户需求的深入研究得出的，主要有以下几个原因：
基于以上充分的原因，这个自适应功能设计就得以开发并成功提高用户的使用效率。
（2）根据用户静态标签优化结果
静态标签：用户主动提供的数据, 指用户不变的基础信息，多为用户固定数据，如姓名、性别、年龄、身高、体重、职业、地区、设备信息、来源渠道等。
定位地区：大众点评——切换城市
大众点评的这个功能经常被拿出来说，当你到另一个城市，通过获取定位申请，判断你是来这座城市旅游的场景，从而页面展示中入口就改成了跟旅游相关，这其实也有点内容自适应的意思，通过用户不同的操作展示不同的内容。
历史自适应主要集中在特定领域的个性化界面定制和推荐等方面。针对不同用户呈现不同界面，根据用户的类型、任务特点、喜好等提供不同的界面样式。
（1）根据用户动态/预测标签算法推荐定制内容
预测标签：平台介入的数据，指根据用户在平台内的行为数据对用户未来行为或喜好进行预测；是设计千人千面和运营策略的关键；比如某电商平台，根据用户A“月均消费5单，且有数额过万的运动商品”的购物数据，平台会给用户A打“高频、品质敏感性、运动”的标签，后期会更多推荐高品质运动商品及相关运动品牌活动的精准推送。
用户标签是构成用户画像的核心因素，是将用户在平台内所产生的行为数据，分析提炼后生成具有差异性特征的形容词。即用户通过平台，在什么时间什么场景下做了什么行为，平台将用户所有行为数据提炼出来形成支撑业务实现的可视化信息。
① 用户生产内容（UGC）
互联网上的许多站点开始广泛使用用户生成内容的方式提供服务，许多图片、视频、博客、播客、论坛、评论、社交、Wiki、问答、新闻、研究类的网站都使用了这种方式。
② 电商平台
这种平台一般会随着用户的使用，网站会积累及不断修正及展示最贴近用户喜好的产品，从而进行推荐。功能上适应了用户的喜好，会大大增加用户的粘性。
③ APP Store 应用页面大变动：不同用户可看到不同功能与内容
自定义产品页功能让开发者可以面向不同用户展示 App 的不同功能，产品页优化功能则让开发者们能够测试不同的截屏、预览视频，甚至 App 图标。
苹果指出，得益于 App Store Connect 详实且注重隐私的分析，开发者可以了解自己用户的偏好，从而决定产品页的展示内容。
④ SoulAPP创始人：Sou了APP功能符合不同场景的用户需求
SoulAPP多种匹配机制,功能符合不同场景的客户需求。Soul利用AI大数据，依照性格、兴趣等因素,划分用户。通过这种精准的方式分类用户,以便用户之间能够更高效地建立连接。第一次注册SoulAPP，用户需要通过系统的一些答题测试,以便于生成符合自己的性格报告。接着就是通过上述数据采集，划分专属圈子，这里就是大家经常说的“星球“，这些都是基于SoulAPP的AI功能。
自适应界面同样有一些“小缺点”，违背了一些众所周知的可用性原则：
内容自适应的核心在于，基于用户过往的操作以及行为路径的分析，提前预判用户下一步需要的内容，从而让用户能更便捷的使用产品。但是在金融产品的设计中比较特殊，往往用户在使用产品的一个核心需求是安全感，产品安全、资产安全、操作安全等都是用户着重关注的点，所以如果一味的进行内容自适应设计，会让用户产生“信息泄露”的担忧，从而失去对该产品的信任。
基于以上内容自适应的分析以及金融产品设计的特殊性，我们来看看有哪些可以运用到金融产品的设计中来。
（1）金融应用的[截图]功能
截图功能可以根据用户场景与用户目标两个维度进行分析。截图操作的发生几乎会发生在用户使用金融应用的各个场景，比如浏览金融产品、查看产品详情、查看持仓资产、收益等等，而不同的场景用户的目标也有所不同，我们可以根据用户不同的操作目标，为用户提供自适应的内容来方便用户的操作。
截图常见的用户目标大致分为两类：报错与分享。我们可以为这两个用户目标做一些内容上设计。
报错一般会关联产品的在线客服功能，那么我们在用户截图操作发生后，提供在线客服的入口，同时分析报错自身的用户行为，如可能是针对页面的哪个点或者哪个区域报错，那我们可以针对这一点再提供编辑截图的功能等等。
如此根据用户目标拆解用户行为，设计对应的功能来满足用户操作，从而减少用户的操作路径。
分享可根据用户场景设计不同的内容，如：
（2）金融应用的[内容管理]功能
买衣服的时候，绝大多数人在意的是是否合身，对于数字产品，同样是如此。在一个金融应用的内容管理功能当中，会推送大量的内容给用户，绝大多数的用户几乎没有时间来掌控所有的信息，导致部分对用户有用的信息被忽略，这样意味着内容的可定制化是极其重要的。
内容的可定制化体现在不同用户的分层上，基于分层，我们可以为相同类型用户推送内容。如持有私募基金的用户，我们可能会更多为其推送关于此类产品的信息以及高端用户的优惠、活动、资产报告等信息。
（3） 金融应用的[搜索]功能
金融产品的搜索，除了具备一般应用该有的内容，如最近搜索、热门搜索、搜索排行榜等，也需要基于产品特性来思考还有哪些可以展示的内容。
根据用户行为与数据分析，一般搜索的关键词为基金名称或者基金代码，而搜索的目的是查看该产品的信息以及收益情况，那么基于此类目的，我们可以当用户输入基金名称后，展示该基金最近的净值走势等内容，这样用户就可以提前了解部分基金信息，可以提前做一个判断，需不需要进入搜索结果页进一步的了解。
除了提前展示该基金部分产品信息以外，我们也可以展示相类似基金，防止用户因提前获知产品部分信息而带来的流失率，当用户不满意该只基金的近期表现，我们可以为其提供表现良好的基金供其选择，从而提高产品的转化率。
通过对自适应设计在内容上的应用探究，我们对内容自适应的设计手法及应用场景有了初步的理解，也会继续的探究并运用到实际的工作中来，希望这些思考能为大家带来一些帮助。
作者：道乐UED全体成员
原文链接：https://www.ui.cn/detail/610302.html
本文由 @道乐科技设计中心 授权发布于人人都是产品经理。未经许可，禁止转载。
题图来自Unsplash，基于CC0协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
编辑导语：智能手机现在对于大家来说都并不陌生，而“陀螺仪”作为手机上的一种先进硬件，可以增强手机的使用感，本文作者介绍了一些运用陀螺仪让人身临其境的设计，让我们一起来看看吧！
iPhone率先将先进硬件（如陀螺仪、重力感应等传感器）引入手机，让智能手机的硬件参数和升级成为用户的重要选购参考，设计师们也会在设计时关注到硬件的应用和潜力挖掘。今天我们浅聊一下“陀螺仪”在增强交互体验、丰富交互反馈上的实际应用。
▲ 智能手机有丰富的硬件能力
在我们的自然交互场景中，视野的变化（如观察四周）和速度的感受（如拍打摇晃）是和五感非常紧密的体验。手机中的陀螺仪和加速度传感器就是这样的硬件，可以感知我们在使用设备时的角度、位置和速度变化。
▲ 陀螺仪可测量设备的方向和角速度
通过陀螺仪传感器，手机应用能感知用户设备的角度变化并触发相应的动作和交互，拓展平面屏幕空间，实现更加有空间操纵感的体验。比如，最常见的就是的手机横/竖屏自动切换、导航指路、手机摇一摇等功能。
▲ 手机横竖自动切换
▲ 地图方向感知
通常背景氛围图片的展示区域最多只有屏幕宽度，但是结合陀螺仪的角度感知，通过视差变化可以将视图延展到原先被限制的空间之外，给用户更多的视觉信息，形成类3D的空间效果。淘宝人生的套装展示页中，当转动手机时背景图和人物模型也会跟随变化，让人物及服装的展示更加生动和有冲击力。
▲淘宝人生套装展示
当将多帧图片匹配视角变化时，甚至能带来裸眼3D的效果。
▲类裸眼3D效果
根据陀螺仪旋转视角，静态图片可以不仅仅固定在单一位置上，还可以升级为交互性内容，模拟现实空间里物品的抛、弹、跳，让信息交互更有惊喜感，让用户身临其境更有控制欲，不知不觉反复把玩。
▲ 好好住徽章动态交互
很多应用中，陀螺仪承载了其核心的能力，给用户带来突破屏幕的360度的全景体验。比如在星图类APP中，跟随陀螺仪的变化，可以将浪漫的星空变得可识别和触手可及。
▲ 星空APP–即时星图体验
陀螺仪在体感类手游游中可以说是标配，几乎所有需要感知三维空间变化的游戏都需要用到它。尤其是赛车、飞机或者体育类游戏，对角色控制和视角变化有高精准度要求。通过调整手机姿势、上下左右摆动，模拟真实空间的操控性反馈，增强了游戏空间的3D体感，用户跟随视角变化在游戏里上下翻飞，有强烈的代入感和沉浸感。
▲ 狂野飙车的镜头视角变化
▲ 和平精英体感操作
VR体感游戏中的陀螺仪跟随用户肢体的动作，实现虚拟空间物品距离和空间视角的变化。
▲ AR体感游戏
除了可以操控平面元素，在我们使用3D AR交互功能时，陀螺仪也可以增强与现实空间交互的真实感。和现实世界的自然交互一样，当相机靠近被跟踪的3D模型时，3D形象需按比例放大，并跟随相机的视角调整3D模型的展示视角。
▲ 3D应用
▲ AR跟随并触发功能
而且，在有多维空间切换诉求的场景中，可以通过监测手机的角度变化，在2D/3D两种空间中快速轻便切换。比如高德地图的步行导航，当用户抬起手机能迅速进入AR导航模式，轻松获得3D实景指引，让用户想迷路都难。
▲抬起唤醒AR导航
▲放下恢复平面导航
▲高德地图唤醒AR实景导航
在智能玩具中也会用到陀螺仪，例如Smart Car教育机器人。在它的手势控制手表上就装有陀螺仪，可以根据手势控制机器人移动。
▲ 陀螺仪体感控制
陀螺仪还能植入其他生活用品中，比如在这款潮人喜爱的LED鞋中，它跟随你脚步的速度和角度，展示炫目的灯光颜色和模式，让你成为人群的焦点。
▲ 发光的鞋子通过陀螺仪
陀螺仪除了可以带来视觉和体感上的空间感和操纵感，在音频上也能实现更真实极致的环绕声体验。比如，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
编辑导语：交互设计本质上就是设计产品的使用方式的过程，“如何才能做出合理的B端交互决策”是很多人都在思考的问题。在这篇文章里，作者聚焦具体的实战场景，分享了一些自己做B端交互设计的经验，一起看看吧。
这阵子想了想关于交互知识的分享，还是应该要拓展成一整个系列的内容，包含各类组件、控件和行为的解析。
基于我的分享习惯，我会尽量避免使用太过理论还是空泛的方式进行讲解，而是聚焦具体的实战场景，帮助大家理解如何做出合理的交互决策。
交互设计本质上就是设计产品的使用方式的过程，账号怎么填写，表单怎么导出，数据怎么筛选，列表怎么排序等等……针对每个功能的使用方式，都可以花很长的时间去考虑其合理性。一个项目的交互，就是这个项目所有功能使用方式的总和。
那设计师如何开始项目的交互设计？直接进入细节，开始跟着原型制定输入框的状态，下拉菜单的展开逻辑吗？
这样肯定是不行的，项目的交互内容又多又杂，设计师会很快陷入这些细枝末节中疲于奔命。头疼医头脚疼医脚，容易造成项目细节缺乏统一性，前后矛盾，体验割裂。
所以，理解项目交互设计的正确思路，就要知道在项目中有哪些交互内容，它们对应的层级和设计对象是什么。
在这里，我把需要设计的交互对象拆分成4个种类，它们从大到小依次为：
我们先围绕在全局框架这个类型进行解释，什么是项目的主要模块排版和布局，以及为什么全局框架可以决定产品的主要使用依据和步骤。
比如大家都用过 Adobe 的软件，应该会有个感觉，就是熟悉了其中一款后用下一个，立马就能上手，完成一些最基本的操作。而如果不是 Adobe 系列的软件，用起来感觉就感觉非常别扭，往往要从头开始学起，比如对标 PS 的 Affinity Photo、Pixelmator。
为什么会出现这样的反差？就是因为 Adobe 尽可能统一了自己生态内的软件全局框架，操作方式，让全家桶用户可以用最快的方法适应不同的软件。
包括顶部的属性栏，左侧的工具栏，中间的标签栏、创作区域，右侧的不同工作窗口排列形式。
除了主要界面的布局框架外，还包含一些二级窗口的框架结构也是统一和固定的。比如打开 PS 内的首选项设置和属性设置窗口，和其它几个软件的属性设置窗口几乎一致。
而在 Affinity 中，软件首选项设置就没有使用左侧导航，而是类似 Mac 通用设置的快速入口分层模式，用惯了 Adobe 再换这个就会有股说不出的别扭。
可能有同学有疑问，Photoshop 并不是只有这几种窗口，其它窗口不就样式和上面这类不一样嘛？那是因为窗口的框架肯定是要考虑功能和场景的，即使使用了多种窗口类型，那也是有规律的应用在操作方式相近的场景中。
再回想一下 PhotoShop 的基本操作流程，就是在创建文件以后，通过左侧工具添加图层元素到中间画布区域进行排版，再在右侧属性栏中调节画布对象的图层顺序、属性。
PhotoShop 作为平面领域中的独角兽，直接影响了绝大多数同类设计软件的框架结构和布局方法。因为绝大多数设计师学习设计的入门软件都是 PS，想要让用户更快上手自己的软件，那就应该顺着他们已经习惯的方式来。
所以，从 Sketch 开始，它的框架和操作流程都和 PhotoShop 高度相似，再之后的 Adobe XD、Figma、即时设计等，都应用了几乎相同的全局框架，所以你只要掌握其中一个就能立马熟悉其它软件的使用。
而当实际功能和 UI 设计软件高度相似的其它几个 “办公应用” 结构框架不同时，上手就变得异常的困难和别扭。比如 Axure、Keynote、PowerPoint，先学了设计软件再去学这几个软件的同学一定深有感触。
而其它行业的软件，如果没有一个具备绝对主导性的产品作为标杆，那么每家公司的产品框架就各不相同。比如 3D 建模软件中的 C4D、Blender、犀牛，视频剪辑工具中的 Pr、Finalcut、达芬奇，你就是熟练掌握其中一款，对专业术语和必要功能逻辑了如指掌，也需要通过基本教学才能掌握其它同类软件。
这就是框架带来的作用，它是软件使用方式和操作流程的主要依据，其它细节的交互和操作都是附着于全局框架下的子集内容。之所以交互设计要从全局框架开始，原因就是设计师要：
先确定产品整体操作的方式，再去考虑按钮和表单那些细节的处理。
虽然前面举例的都是软件案例，但只要仔细留意，你们就会发现网页端管理系统的操作框架和一般软件别无二致。只不过相比较五花八门的专业软件来说，B 端管理系统的操作框架模式经过了长期的演化形成了固定的几种套路。所以网上找到的管理界面案例，看起来只是围绕几个固定的布局翻来覆去的改颜色和图标。
虽然它们看起来都很像，但依旧包含很多交互细节是需要设计师留意和制定的，不是简单照搬就能设计出符合项目需要的全局框架。
所以，交互的全局框架到底怎么设计？
它不是一个个体，而是一个由多个组件、页面类型、适配方式组成的合集概念。想要有效制定，就需要先了解合集中包含的要素有哪些，以及它们的基本特点。
在全局框架的范畴中，包含的组件模块类型可以分成两个大类，全局组件和浮层元素。
全局组件是指在项目多数页面中都会存在并进行交互的组件，功能往往和当前页面没有直接联系，比如路径跳转、色彩切换、快捷操作等。
而包含的浮层元素，本质上也是全局组件，只是它们的共性是不会默认展示，需要被特定条件触发才能被感知。比如断网提示、删除确认、侧边抽屉等都是全局化的浮层要素，也是需要在前期做好规划的内容。
下面就针对这个两种类型的组件一一展开解释。
（1）全局组件
a. 导航栏
导航栏不仅仅是 B 端管理系统，也是网站设计中最重要的组件。优秀的导航栏可以清晰的展示项目的页面层级结构，帮助用户高效的访问目标页面。全局框架制定的一步，就是根据项目的具体情况，选择合适的导航类型。
导航栏主要使用上方、左侧、混合型三种布局形式：
确定导航栏的类型，还需要确定导航的操作逻辑，包含几级菜单，默认、展开、选中、关闭的交互。
b. 顶部栏
除了导航外，另一个基本必备的组件，就是顶部栏，除了放最基础的用户和设置选项外，它的角色定位要根据需求决定，最常见的包含下方几种：
当然，以上几种情况并不是绝对的。设计师需要根据项目的实际需求出发，去梳理项目包含哪些全局控件或操作，然后再决定如何分配到导航或者顶部菜单上，而不是先定义菜单的类型再往里面填内容和字段。
c. 页面标签栏
页面标签栏是一个类似浏览器标签栏的组件，用来展示和关闭当前项目内打开的页面。
标签栏的使用在远古时期的 B 端项目应用非常普遍，因为已经入土的 IE 浏览在那个年代是没有页面标签功能的，导致开启多个页面的切换非常麻烦。
随着浏览器标签的普及，它已经不适用于多数 B 端项目，但依旧有一小部分项目是需要结合它的优势才可以更好的提升操作效率。
在一些需要持续打开和来回切换页面的项目，如客服系统、财务审核、合同审批，因为打开新页面仅仅需要加载内容区域而不是全局，没有新建窗口后的空白页面加载过程，就能带来更好的体验。
d. 内容模块
内容模块是用来容纳和显示页面相关内容的模块，这是个被很多人忽略的组件类型，包含模块标题栏和操作区域。
一个成熟的 B 端项目会统一制定内容模块的组件结构，保证大量页面和模块之间样式的统一性。比如下面的模块案例。
如果只是简单做个标题再统一间距参数，那么这个组件也就没必要在这里提了，因为这仅仅是设计问题而不是交互问题。内容模块的制定是为了尽可能考虑各种内容场景，并进行统一处理。
例如要应用一级分页标签、多层级分页标签、操作按钮、内容折叠等。考虑的越全，后面处理起来越工整，否则就像下方淘宝卖家端千牛的案例一样，损害用户的体验和操作效率。
内容模块是很难在初期一口气全部定完，不仅需要产品经理前期给出详尽的需求和产品原型，还依赖设计师自身的经验判断。
所以，它的制定流程是在前期先根据掌握的信息制定出最初的版本，然后在完成后续的页面中逐渐进行补充、优化并替换。
作者：酸梅干超人；
本文由 @超人的电话亭 原创发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash ，基于 CC0 协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
B端设计规范如何正确搭建，好的设计规范对设计有什么帮助呢？设计夹老师在这篇文章中围绕清晰、高效、友好、可控四个关键设计原则，带你一步步建立起设计规范，推荐各位设计er和对交互产品、B端产品设计感兴趣的童鞋阅读。
Halo，这里是设计夹，今天为大家分享的是「B端设计」。B端设计离不开设计规范这个话题，而做好设计规范是一个庞大复杂工程，很多人对这些处于一知半解状态。在这个系列文章里通过结合平时的项目案例来谈谈自己对B端设计规范的一些理解，希望可以带来一些启发。
本篇先谈谈设计规范制作的指导思想–设计原则，后续文章再展开讲一下常见各种组件的设计规范。
设计规范作为B端设计中非常重要的一环，它的作用主要体现在以下三个方面：
在日常工作中，当项目组收到一个新的需求时，如果已经具备了成熟的设计规范体系，其工作效率往往会得到很好的提升。最后上线的页面不用走查还原度。以下是具体工作流程：
通过前面内容我们知道了设计规范对于产品设计意义重大，那么制定设计规范制定依据又是什么呢？这里就要引出设计原则这个话题，设计原则是设计规范的总纲领，所有的设计规范都应当以设计原则为基准。设计原则主要包含以下内容：
接下来就围绕设计原则清晰、高效、友好、可控这四个方面展开讲解。
清晰原则主要从视觉角度让界面信息传达合理，提高用户信息获取效率。主要包含对比，亲密，对齐，重复四个方面。
1.对比
对比是指界面中为了区分信息层级，强化元素对比度，使用的很常见的一种手段。例如，下图中利用大色块按钮与线框按钮形成对比来凸显关键按钮；通过对文字字号加大，字体加粗，颜色加深来与弱文案形成对比，凸显关键文字信息。
2.亲密
如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。
3.对齐
在界面设计中，将元素进行对齐，既符合了用户的认知特点(我们往往倾向使知觉对象的直线延续还是直线，曲线延续还是曲线)，也能引导用户视觉流，让用户更流畅地接收信息。
4.重复
重复是指相同的元素在项目中重复引用，作用是可以有效降低用户的学习成本，同时提高这些元素之间的关联性。
高效原则体现在便捷、轻量、简化、一致几个方面，目的是通过合理的方式让产品操作更加便捷；交互体验与内容更加轻量和简化；以及产品风格保持一致。下面结合常见案例说明如何应用这一原则。
1.合理利用拖拽–便捷、轻量
在涉及到诸如上传文件，排序，滑动输入，搭建等需求时，合理采用拖拽交互往往可以打造更加便捷用户体验。
2.尽量减少不必要的跳转–便捷、轻量
用户操作过程尽量减少跳转，以实现交互减步长，从而使用户操作更高效轻量。例如能用原位操作就不考虑展开收起；能用展开收起就不用气泡…依次类推(优先级从高到低：原位＞展开收起＞气泡＞弹窗＞抽屉＞新页面)
3.放大点击热区–便捷
放大可点击按钮热区，相对于较小点击热区，具备更丝滑操作体验。
4.悬停即现–轻量
利用悬停即现，避免信息过于重复啰嗦，简化页面提高阅读体验。
5.折叠次要功能–简化
页面功能按钮过多时，可将次要按钮收纳到一起，点击时再展开，外面只展示高频操作或重要按钮，保证页面内容简洁。
6.统一样式–一致
一致性是指在不同页面中相同操作应保持一致视觉与交互样式，可有降低用户学习成本与企业开发成本。
友好原则应贯穿用户操作前，操作中及操作后三个阶段，给予用户及时反馈与帮助。
1.操作前
在用户操作前给到合适的引导与帮助，有效减少用户迷茫感。
2.操作中
通过交互效果及页面样式让用户可以清晰感知到自己当前操作。
3.操作后
利用界面中元素变化清晰直观展示当前的状态。
可控主要体现在自由和导航两个方面。
1.自由
自由即指用户可以自由完成一些操作，例如回退，撤销，终止等。
2.导航
导航是指用户随时知晓当前所在位置，而且可以利用导航随意到达目标页面。
通过本篇内容我们大概知道了制作设计规范主要方向，那么具体到每个组件上，我们该如何去设计呢？后续篇章将细分聊聊如何去设计「B端常见组件」。
专栏作家
作者：Clippp，每周精选设计文章，专注分享关于产品、交互、UI视觉上的设计思考。
本文原创发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自 Unsplash，基于CC0协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
编辑导读：人是视觉动物，相比于文字，人们更容易被图片吸引。而如何在界面设计中运用好图片，给用户更好的视觉体验，本文作者有自己的想法，一起来看看吧。
在UI设计中，配图的好坏将直接影响着界面的品质及用户的视觉体验。纵观如今高质量的界面设计，具有设计感的配图不仅是吸引用户的重要元素，能比原本平淡无奇的文字界面更让人产生点击欲望，还能体现出设计师的品味、以及相关方面的专业性。
在这个快节奏的时代，相比文字，图像的传达效率会更快、更高、更有助于用户轻松理解及记忆。配图用的好，往往能起到决定画面基调、流程引导、视觉平衡等关键作用，所以，在同等样式的布局下，因图片的使用及处理方式的不同，界面的品质也会存在较大的差异。本篇文章将介绍一些在UI设计中配图的基础知识，帮助大家在图片列表、背景处理、图文混排、头图等相关界面设计无从下手时提供灵感，在选择图片、后续处理时如何做到有规律可循带来一些思路。
在文字出现之前，人们都是靠看到的图像来理解信息内容，即便后来文字能表达出很丰富的内容，图示也不可少，试想一下，当别人拿着密密麻麻的数据给你看时，能看的头皮发麻，你更希望有一张清晰的图表，但并不能说明别人的数据不清晰。所以，图像相比文字能更具说服力、更容易传达信息，使读者产生共鸣、震撼内心，让人看了一目了然，能直观的与人产生互动。
当说到UI设计中的图片非常重要时，并不是说文字就一定比图片弱，好的文字也能带给我们无限的遐想，只能说在更大的概率上图片和文字哪个更吸引人，所以我更倾向于观赏图片，然后感受到带来的美好。但是，如果非要问我选择哪一个时，我只能说“只有小孩子才做选择题，我（设计师）全都要”，图片可以表达出丰富的内容，再用文字言简意赅，是一个非常完美的组合。
图片有多种格式，如JPG、GIF、PNG、TIFF、RAW、BMP、WEBP…等，在UI设计中，最常用的无非JPG、GIF、PNG三种。
JPG：目前为止使用最多的图片格式，兼容各大操作系统浏览器及编辑软件，非常方便被打开和处理，但不能显示透明底，压缩后会失去一部分原始信息。
PNG：如需编辑，PNG应该算是所有图片格式中的最佳选择，支持无损压缩及透明底，但针对需要高保真的复杂图片，压缩后的文件较大，且有少数的浏览器不支持。
GIF：动效图片，支持透明底及无损压缩，通常由视频格式的内容转换而来，但对色彩有非常严格的要求，数量最多不超过256种，相比前面两种，GIF格式的文件更大。
在移动端UI设计中，我归纳了最常用的几个图片比例，分别是1:1、3:2、4:3、16:9四种，这些比例都是源于最早的胶片摄影及现代相机的传感器演变而来。当我们不知如何选择比例时，首先需清楚的了解界面图片的应用场景、来源用户以及图片比例背后的缘由，否则将很难把控，下面将针对这几个比例作具体分析。
1）1:1 比例
因为相机结构的原因，早期最传统的120胶片画幅就是正方形（6*6cm），即1：1的比例，此比例更容易的将构图规整，使其最大程度的突出照片主体。
在如今的电商APP中，商品图片绝大多数都遵循了1：1的比例，不管横向还是纵向都能将信息进行完整化的展示，且方便多场景、页面的适配。另外，用户头像也都使用了这一比例。
2）3:2比例
起初135胶卷的比例就是3：2，主要是因相机取景框的大小而决定。在移动端，这一比例使用也比较广泛，例如新闻、旅游类型产品，在拍照之后无需裁剪等处理，直接上传使用，非常方便。
3）4:3比例
随着摄影的发展，小/微型相机出现而诞生4：3比例，且移动设备发展迅速，在非专业摄影的情况下，手机能很大程度上代替单反并成为主流拍照设备，目前市场上主流手机的拍摄尺寸基本都为4：3比例。相比3：2的图片，4：3图片占比更大，能最大化显示图片以突出重点信息。
4）16:9比例
根据人体工程学的研究，人眼视野范围的比例约为16：9的长方形，所以电视、显示器及投影范围的设计都是基于这个黄金比例。
线上产品不用多说，影视类型的产品均采用16：9的尺寸，例如爱奇艺、优酷、腾讯视频等，到目前为止，这个比例在设定上还没出现过问题。
在上述4个尺寸中，最容易混淆的是3：2和4：3，如果不清楚如何选择，请根据产品目标定位，看看到底是以内容为主导还是图片为主导。例如：资讯类型产品很注重标题文案，即会使用上文下图、左文右图的版式，选择3：2作为封面，以降低图片的视觉重量；旅游、租房类产品，则可使用4：3的图片，以传达更多信息。这种选择方式虽然不是绝对，但当我们陷入两难的困境时，可作为参考依据帮助快速决策。
1）单图布局
全屏：具有很强的视觉冲击力，非常适合用于传播行业属性及品牌调性。单图全屏布局处理灵活，可整体突出、局部特写或加纯色不透明度纹理/遮罩，对图片细节、构图等有较高的质量要求，一般用于登录、启动引导、产品介绍背景等页面。
卡片：以单张图片作为视觉引导，宽高不固定，但占据界面大部分区域及重要位置，主要突出产品调性和成为吸引用户的流量入口，促使用户与其产生交互行为。常用于产品详情页头图、推荐页、专题入口等。
2）图文列表
在图文列表界面，很多时候，我们都在想一个问题，到底是选择左图右文、左文右图还是上图下文？所以我们首先要明白F式（从上到下、从左到右）浏览布局，这也跟人眼的浏览习惯相吻合，然后确定图、文信息内容的权重，根据优先级将重要的信息放在关键位置。
单列组合
左文右图：以文字为主、图片为辅，主要强调文字信息，且图片与标题的关联性不是很大，能减少减少图片对文字的干扰，对图片的质量要求不高，很多新闻、资讯类产品都是选用这种方式布局。
左图右文：在图片内容优先于文本内容的情况下，采用左图右文的方式，更强调以图片直观的传达内容、吸引用户的视线，对图片的质量要求高于左文右图，一般是电商、旅游类产品的最佳之选。
上图下文：一行只显示一张图片，大多采用横图，同屏一般不超过两个内容，用户需要从图片中获取大量信息，对图片的质量要求很高，大多有专门的人员审核，以完成对图片的品质的把控。这种方式很占用界面的纵向空间，部分租房类、艺术类产品会选用此种方式。
双列组合
并排：相同高度的比例控制，是较为经典图文布局，相比单列，同屏可展示更多的图片内容且空间利用率更高，能同时向用户传达更多信息。
错位：图片高度自适应（瀑布流），在限制宽度的条件下，高度自由发挥，让图片得到更多的舒展，利用率更高。双列错位的排版方式增加了版式的趣味性，可缓解用户在长时间浏览下的视觉疲劳，需要注意的是宽高比例不要太大、成跳跃式的变化，否则可能导致视觉混乱，且低高度的图片信息很容易被忽略。
3）多图组合
规则：3张或以上的规则的图片组合很常见，主要用图片列表来引导用户查看更多，通常利用单排左右滑动或九宫格的方式呈现。例如旅游、租房、影视类产品，包括手机相册、社交圈子等。
不规则：多图不规则比例并不常见，因移动端设备可视宽度有限，容易导致混乱的错觉。艺术、拼图类产品看到的居多，另外，部分社交类产品为了展示不同远近距离的层级关系也会用到这种排版方式。
图片常见的手势操为：滑动、点击、双指缩放，除此之外，还有很多针对所有元素都可以操作的交互手势，这里就不多说了，下面单独对图片手势作出介绍。
1）滑动
上下滑动：通常在图文列表或单张图片内容超过一屏的情况下，通过上下滑动查看更多信息。
左右滑动：为了拓展更多内容，多用于相同等级的图片列表或大图切换，在页面列表中会将无法同时展示的图片呈现一部分或以数量作为提示，引导用户探索以发现更多。
2）点击/长按
单击：单击可查看图片，从缩略图到详情或大图的切换操作；
双击：针对图片本身进行某些操作，比如喜欢、点赞等，另外，部分图片通过双击进行一定比例的放大缩小。
长按：调出图片的部分属性信息、下载图片等进行下一步操作。
3）双指缩放
当我们需要查看图片的某些局部信息或细节时，就会使用双指（开合）缩放的交互手势。
因图片的色彩变化不规则，为了保证图片上层文字的可读性，通常会在文字区域加一个纯色遮罩，也可设置不透明度的渐变效果，使遮罩跟图片的过渡更加协调，提升视觉美观度。
毛玻璃效果通常出现在应用的2、3级页面，对应用性能会有一定的消耗，一般使用封面图片进行大幅度的高斯模糊作为背景使用，可在上层加上一定透明度的蒙层配合使用，透明度数值根据不同的图片色彩及使用场景适当的调整。毛玻璃效果既能满足文字内容的清晰呈现，又能提供场景氛围并提升界面的品质感与神秘感，我们最熟悉的当属音乐播放页面的背景模糊效果了。
对于自营平台，内容较为固定的商品页面，可将商品抠图后自定义背景，让界面的整体设计风格可控，延展性更高。不适配平台类型应用，因为会让商家产生较高的运营成本。
图片圆角值设定，能体现出不同的产品属性及气质。例如：直角比较硬朗，给人高冷、力量的感觉，小圆角传达出安全、专业的属性，而大圆角显得活泼、可爱，更有亲和力。
图片出界常用于运营设计，例如图片轮播、胶囊banner、专题页等，另外，经抠图处理过的图片也可用在商品详情页顶部图示。这种效果能有效避免呆板，营造出画面氛围，制造出更强烈的视觉冲击力。
UI设计中，任何一个设计思路、想法及效果样式都是为产品而服务，图片也不例外，需要根据不同的场景进行合理搭配，好的配图更能与用户产生共鸣。
配图必须要明确主体，一眼就能看出核心内容，且不可以炫技或好看为主，否则会被多余的元素、效果影响主体视觉导致没有重点。但确定好一张图片的风格及色系后，后续也要保持统一。
图片以实用性为准，如果一味的追求漂亮、好看，最终可能形色各异造成视觉的不统一，严重影响用户体验。设计师在选图时需要对风格精准把控或后续稍加处理，以形成统一的视觉。
常见的控制方向有图片类型（位图/插画/形状）、视角（平视/仰视/俯视）、商品背景（简约/复杂/纯色）、呈现区域（堆积/局部/特写）、构图（中心/水平线/对称/对角线…）等。另外，还有很多抽象的方式但并不是绝对的，我们都可以尝试从不同的角度去调整，力求让所有图片达到最佳视觉效果。
因人的天性即向往美好、品质（非物质化）生活，固品质感的配图更容易吸引用户的注意力，让人想要拥有的感觉，如果色彩不够饱满，不管风格是多么统一，也达不到良好的用户体验。在选好图片后，可对色相、饱和度、亮度稍加调整，以确保色彩饱满、丰富。
有时候做设计为了方便，整个界面的图片直接复用同一张，即便设计的再好，也可能隐藏着不易察觉的瑕疵。需要说明的是，一个成熟且专业的设计师，首先要对自己负责，然后才是设计，即便是初稿，在即将呈现给大家或汇报前，一定要给出上线后最真实的效果，这样方便他人贴合实际给出一些方向性的建议，帮助自己更好的决策。经处理过的实际配图能体现整体效果，方便找出图片以外的设计缺陷，例如版式、字体大小、层级关系等问题。
静态图片常用的无非PNG、JPG这两种格式，文件较大的图片会影响打开页面或刷新时的速度，本地图片更会增加应用包的大小。从设计稿中导出图片时需要控制文件大小，如无特别（超大图）情况，切勿主动降低图片质量后再导出，否则会影响界面整体的视觉美观度。
这里推荐一个线上无损智能压缩神器：https://tinypng.com，仅限PNG、JPG、WEBP格式的图片。
△上图可以看出，图片在压缩了76%后，由1.4MB变成了332KB，肉眼很难看出（查看大图）质量上的损失。
切图不像以前那么麻烦，同一张图片需要手动导出多套规范，现在只需在软件（或安装插件）标记好切图，上传到类似蓝湖、摹客等第三方线上应用，分享给团队成员即可各自下载web、Android、iOS对应的多套规范制图。
设计师在设计过程中，一定要按照规范的最大极限保留原图，以iOS系统@1x规范设计稿为例，如果图片的宽度是100px，那么导入软件中的图片宽度至少要在300以上，然后再进行缩小（PS中需转为智能对象），如果低于300px，开发在导出@3x的图片就会失真，可能会因损失像素而出现模糊的情况。
文章中所介绍的图片使用方法及处理技巧，并非最好、唯一的答案，但在你没有更好的方法之前，多多少少能从中得到启发。UI中图片设计的本质在于自身的专业能力，然后用自己的视觉产出和设计手段去吸引、打动用户，从而为产品带来利益，也能体现出设计价值。
不得不承认，人们很多时候都是通过视觉表象决定是否需要深入了解、拥有某一件事/物，设计师就是在做视觉表象的表达，如果图片用的好，不仅能让你的设计更加出彩，还有一定几率转化用户，形成商业价值。
大漠飞鹰；公众号：能量眼球，人人都是产品经理专栏作家。致力于产品需求的驱动、产品体验的挖掘，利用设计的手段为受众用户带来更好的体验，即好看、好用。
本文原创发布于人人都是产品经理，未经许可，禁止转载
题图来自Unsplash，基于 CC0 协议
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
编辑导语：动效，是页面的灵魂，也能让用户有更好的体验。作为设计师，我们如何将动效设计得更有简洁有趣呢？本篇文章中，作者分享了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
编辑导读：我们经常会收到各种弹窗，它们的目的主要是为回应用户或让用户回应，是用户与产品间对话的一种方式。但是，弹窗也不是多多益善。如何弹、什么时候弹？这些都是有章法的。本文作者总结梳理了一套弹窗设计原则，一起来看看吧。
产品经理：我觉得这里要加个弹窗，你去设计吧。
设计师：emmm…
弹窗到底该不该加？怎么加？用什么形态展示？真正的作用是什么？这些真的是产品经理说了算吗？
好的产品通常会在恰当的时间、合适的位置给出合理的反馈，弹窗也是必不可少的反馈方式，不反馈、反馈不及时或反馈不合理都会带来不好的使用体验，甚至误导用户，从而导致用户流失。
很多时候，产品经理会从商业角度、公司业务、资源限制等方面考虑问题，但这些未必是用户所需要的，设计师不应该完全按照产品需求做设计，否则就成了只会照搬产品原型的“美工”。需要做的是从用户角度出发，把产品需求转化成设计目标，只有经过反复的推敲、认真分析，最终才能打磨出服务于用户的弹窗设计，所以弹窗该不该加、如何加就成了设计师不可推卸的责任和使命。
本篇文章将围绕着弹窗类型、使用场景、转化率及常见问题为侧重点，将自己对弹窗的理解、设计经验分享给大家，帮助大家对弹窗组件有更清晰的认识，为后续避坑设计出更好的弹窗做准备。
当我们与应用产生主动或被动交互时，页面上层会弹出容器，将可承载的文本、按钮、选项、标签或表单等任一内容与之组合，就可以用来传递信息、状态反馈、引导用户等操作，这就是弹窗。
弹窗的目的主要是为回应用户或让用户回应，是用户与产品间对话的一种方式，在线上各种场景中都有可能碰到，相当于产品的线上小助理。不同类型的弹窗其作用不同，但最终都是为了满足跟用户之间的友好交流。
弹窗组件的样式很多，如浮层、对话框、下拉菜单、toast等，且iOS、Android官方平台也都根据自身的规范对组件进行命名，不管如何称呼，其常见的弹窗组件绝大多数都是由以下元素组成：
用户在完成任务的过程中，界面会出现弹窗打断用户的操作行为，用户必须通过主动点击才可以进行下一步操作，这即是模态弹窗。
模态弹窗通常能较好的获取用户的视觉焦点，并通过承载的内容、按钮主次层级来引导用户完成他们的需求，这也会根据用户、产品侧重点的不同，弹出样式也有所不同，常见的模态弹窗有对话框、动作栏、浮层…等。
1.1 对话框Dialog/Alert
对话框是很常见的弹窗，主要在打断用户后并提供选项操作，对用户的干扰较大，通常会配备1~3个操作按钮，而且会把用户最期待的或产品最期待用户操作的按钮突出显示。
对话框类型的弹窗主要分为主动、被动两种触发类型，主动弹窗：信息的二次确认、输入内容、前置条件选择、风险警示等；被动弹窗：版本更新、运营宣传、消息通知、系统功能授权等。
1.2 动作栏Actionbar
动作栏是通过用户主动操作后弹出的内容信息，基本都是从底部弹出，屏幕占用比例根据内容量的多少比较随意，从小区域、半屏、再到全屏随处可见。
动作栏相比对话框则能承载更多、更丰富的功能信息，在用户清晰感知当前操作及反馈的情况下，比跳转到新的页面更有安全感。
1.3 浮层Popover/Popup
浮层是指用户操作某个功能/内容后，会在附近出现一个带有视觉引导性质的弹窗，最常见的浮层就是下拉菜单/弹窗等，浮动于顶层窗口并指向触发操作的位置。
例如很多社交娱乐类型的应用右上角有一个“+”入口，里面会放置部分常用功能。部分浮层底部没有设置不透明度的蒙层，为了与页面信息更好的区分，会给浮层容器加上投影，避免与底部信息混淆。
相比模态弹窗，非模态弹窗属较为轻量，触发后以一种非阻碍的的方式呈现，不会打断用户的当前操作，主要是给予用户即时反馈，让用户清楚应用当前的交互后状态。非模态弹窗不强制用户操作，根据反馈信息的重要程度及意愿，可在一定的时间内自动消失，也可等待用户操作后消失，常见的有以下几种：
2.1 提示框Toast/Hud
用于反馈用户操作成功、警告、错误等当前状态信息，可能出现在任何位置（底部/中间/顶部），在呈现样式上，相同等级的模块统一位置、风格即可，无需用户有任何操作，出现2s左右自动消失。
Toast只有纯文字提示，例如格式错误、刷新成功、删除成功等；Hud会使用文字+图标样式，例如添加到购物车、关注成功等。
2.2 提示对话框Snackbar
Snackbar早期只是Android系统的一种弹窗控件，后在iOS、Web前端都会使用到，可以看作是toast的加强版。一般只出现在屏幕底部，存在的时间比toast长，提供0~1个操作入口，可自动消失，也可与用户产生交互后消失或者跳转至其他页面。
Snackbar反馈的重要程度强于toast，例如，某个应用今天有重要提醒，同时又不想影响用户的其他操作，会在用户首次进入时弹出提醒，并提供关闭操作入口，等待用户通过手动关闭（部分自动关闭），加强用户记忆。
2.3 通知Notice
最有代表性的就是消息通知、系统推送，在设备未锁屏的情况下，通常从顶部弹出，停留几秒后自动消失，锁屏后，不同设备弹出的位置也有所不同。Notice的前提是需要在应用设置中打开消息通知开关，具备应用外推送功能的，需在设备系统设置中开启通知权限。
2.4 透明指示层HUD
HUD是一种在透明元素上通过填充、反馈用户当前交互操作的指示层，实时生效，例如视频类产品中的调整音量、亮度、控制进度条等。
当我们对弹窗体系有了一定了解后，就需要清楚什么场景需要设计弹窗？用什么类型的弹窗？
产品最终都是服务于用户，如果仅凭自己的主观意见乱加一通，整的花里胡哨，弹窗就成了干扰元素，很大程度上会影响用户体验。什么样的场景适合什么类型的弹窗，我们可以从以下几点来说明。
风险警示：当用户的某种操作可能存在风险，为避免操作失误，会弹出对话框打断用户，并给予一定的风险提示引起用户的注意，让其有足够的时间确认是否真的需要进行下一步操作，如：删除、放弃福利机会、退出登录等，会弹出对话框提示操作后可能引起的后果。
前置条件：部分任务在流程中设有一定的前置条件，需要满足条件才能进入下一步操作，通常这种情况会根据内容量的多少、重要程度以对话框或动作栏的样式弹出，例如下单时选择优惠券、支付方式。
任务关键节点：用户在满足任务的基本条件后，需要操作一个关键步骤才能成功，则会弹出对话框让用户完成最后一步操作，例如提交订单、表单、输入支付密码等。
这类弹窗主要从产品角度出发，不会过于在乎用户是否需要、会不会反感，都会引导或强制用户操作。
例如产品发布新版本，会强制用户更新，否则将无法使用。还有各大电商APP，在进入首页时会弹出一堆红包、优惠券，刻意将取消/关闭入口弱化，给用户返回造成一定的难度，利用突出的视觉、动态效果突出主题增加吸引力，以达到转化用户的目的。
二次确认也是一种打断用户的操作行为，但跟上面纯粹的打断用户相比其作用更大，主要是在用户已做好选择的情况下再次弹出确认，以免操作结果造成用户认知上的偏差。虽然从用户体验角度出发，用最少的操作、最简单的流程满足用户所需是产品追求的目标之一，但通过权和利弊之后，二次确认的出现实属迫不得已的折中方案，它能够起到给用户多一次思考避免误操作、同样的含义换种方式表达、重要的内容加深二次记忆等作用。
二次确认使用得当，可以避免用户、产品的潜在风险，但若是从主观角度一味的滥用，就成了对用户的恶意干扰、影响使用体验，导致出现因多步骤操作增加任务完成难度、降低转化率、损害产品形象等问题，所以需要从业务（用户侧、产品侧）实际角度出发，两相其害（加-影响使用体验；不加-造成一定损失）取其轻的考虑是否需要增加二次确认弹窗。
当用户的某个操作可能带来不可逆转、错误严重程度较高时，例如：放弃仅有一次机会的较好福利、手机系统还原、应用账号注销等，系统都会给予二次确认，降低用户认知偏差后，以确保用户是经过多次思考才做出的决定，即便后续给用户造成损失也不会过于降罪产品，产品也算是“问心无愧”了。
常见于用户操作之后的状态反馈，即便用户没有注意到，也不会造成较大的损失、或结果已经注定，相对来说成本较低，大部分出现在任务过程中的提示（可重复）和结果反馈，以确保用户知晓当前所处状态。
非模态弹窗toas样式居多，例如加载中、操作成功、刷新结果、清除缓存等，可出现在其他类型的弹窗之后或同时存在。
优秀的弹窗需要从视觉、交互两方面思考，视觉上简洁、易懂，交互上可操作且可控。
视觉层面：首先需要做到的是易懂，这时候就非常注重文案清晰程度及按钮层级关系了，弹出的信息需能直击要害，用户看了能一目了然才是关键；其次，弹窗属于一种干扰信息的存在，设计必须简洁，在弹出时需要考虑是否会过度影响（影响是一定会有的、且看如何降低）用户的其他操作。假想我们正在玩游戏、突然来了电话全屏幕覆盖（传统来电），自己会以最快的速度挂掉电话，回到游戏中后发现自己已领“盒饭”，即便来电是多么的理所当然，但心里必定是非常不痛快的，那么，如果来电以弹窗的形式且占据屏幕很小区域（如今的来电方式）是不是就给了用户足够反应时间及缓冲时间呢？
交互层面：弹出的内容及操作入口需清晰可操作，虽然有时基于业务需求，产品更希望用户能进行下一步操作而并非回到上一步，即便如此，我们也只能通过弱化次要操作以突出主要操作，用户有来去自由的权利，如果弱化至用户看不清、甚至找不到的程度，即便提供了次要操作入口，也会存在反面作用；另外需注意用户对产品的可控性，不管产品如何期望用户进入下一步转化，但不能强制，一定要给用户提供回去的路（强制版本更新除外），否则，任性的用户可能会直接结束应用，甚至因产品过于霸道直接卸载。
首先，设计师应该理解产品需求，分别从用户侧（能给用户带来什么？满足什么样的需求？避免什么损失?…）、产品侧（能给产品带来什么？产品如何期望？是否合理？能得到什么样的结果？…）分析为什么要加弹窗，然后将分析的结果转化为设计目标，以确保弹窗根据不同的需求，在恰当的时间、适合的样式合理的呈现给用户。
其次，在得到设计目标后，同样需要从设计侧、技术侧思考弹窗组件的一致性。从设计角度，团队所有成员需要对该组件有清晰且统一的认知，了解组件的使用场景，以确保不会错用、滥用，如果增加或更换新人设计师，很容易学习和上手，提升效率；站在技术角度，一致性的常用弹窗组件，便于开发做组件封装后续复用，减少不必要的重复工作，大大提高开发效率。
在UI设计中，组件的设计思路基本相通，旨在满足产品的实用性、视觉的统一性，主要围绕着以下几点进行：
设计弹窗时需要注意信息的主次层级关系，优先传达用户想要的或产品想要让用户知道的，以确保重要的信息在第一时间传达给用户。
弹窗需要根据实际的场景合理使用，不能为了简洁而过分删减内容、更不能画蛇添足。例如一些偏向于操作状态、系统报告类的提示可以使用简单的反馈，而可能造成用户损失的提醒就需要刻意打断用户，给予更明确的提示甚至二次确认。
△ 例如删除内容就需要使用模态弹窗明确提醒用户，如果用非模态很可能被用户忽略从而带来不可逆的损失。
因弹窗本身承载内容有一定的局限性，固文案一定要简洁且精确，能用一句话说清楚的就不要过于啰嗦，不仅容器的空间有限且用户的耐性也有限，需要在有限的空间、有效的时间内清晰的表达出核心内容。
针对运营弹窗，如果弹出的时间不对或过于频繁，可能会造成用户反感，所以需要把握好弹出时机及频率。
例如用户有一张未使用的优惠券，如果用户每次进入应用都看到弹出提醒，确实又没有购买商品的意愿，总是被弹窗打断真的就很烦，那么可以将提醒弹窗设置为每日首次进入应用时提示、每累计进入应用5次后提示、即将到期提示或者用户有购买意愿且优惠券支持改品类时提示等，总之，需要控制在大部分用户的可接受范围内。
本篇文章主要系统的分析了弹窗组件分类及使用场景，总结的虽然不是很全面，但能让很多新手设计师清楚认知弹出组件的定义及用法。另外，弹窗不管如何设计，都需要有一个不断优化的过程，要根据产品的实际情况不断思考与打磨，通过脑暴或已知问题作出更好的改善。
能清楚认知、理解、使用弹窗组件是一个成熟UI设计师必备的条件，当然，并不能以此定义设计师是否优秀，在此基础上，还需通过持续的学习探索，挖掘出更多技巧，不断提高自身的专业能力。
大漠飞鹰；人人都是产品经理专栏作家。致力于产品需求的驱动、产品体验的挖掘，利用设计的手段为受众用户带来更好的体验，即好看、好用。
本文原创发布于人人都是产品经理，未经许可，禁止转载
题图来自Unsplash，基于 CC0 协议
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
2025年，UI/UX设计领域正迎来一系列令人兴奋的创新趋势。从更具沉浸感的3D元素到人性化的分区设计，从动态排版到模糊与颗粒效果的巧妙运用，再到生物识别技术的普及和可穿戴设备的深度适配，这些趋势不仅让界面更加美观，更提升了用户体验和情感共鸣。本文将深入探讨这些前沿设计趋势，为设计师和产品团队提供灵感和方向，帮助他们打造出更具吸引力和实用性的数字产品。
2025 年，数字设计领域会有很多新机会，这都得靠创新来推动。设计师们现在越来越大胆，敢打破传统套路，设计出的东西不仅要实用，还得有吸引力，能真正打动人。
比如，会有更多 3D 元素加入设计里，让用户感觉更真实、更沉浸；还有很多设计会把 “方便用户” 和 “拉近人际距离” 放在首位，不再只追求技术炫酷，而是更关注用户的实际需求和情感感受。
那么我们来看一下有哪些趋势~
你有没有过这样的体验？打开一个 APP，信息像 “乱炖” 一样堆在一起，找半天找不到重点。
2025 年的设计师学会了 “断舍离”
就像日式便当盒把饭菜分成不同格子，现在设计师也把网页或 APP 界面分成多个 “小格子”，每个格子放不同功能或内容（比如数据、图片、文字）。
好处：信息更清晰，用户一眼就能看出重点，而且设计师可以灵活排列，让页面既整齐又好看。
比如有的网站用这种格子展示不同模块，重要内容更突出，干扰少。
分区设计技巧：格子的大小、间距、边框都有讲究！重要内容的格子更大、边框更粗，次要信息的格子更 “低调”，就像妈妈给你装便当，爱吃的菜永远摆在最显眼的位置。
图片网站链接：https://selestial.co/
以前网页里的 3D 图像是 “摆件”，现在它们会 “互动” 了！
3D 效果不是新鲜事，但现在更厉害：能互动、能沉浸！
比如网页里的物体可以 360 度旋转，虚拟试穿衣服、查看产品细节，甚至结合 AR/VR 让你感觉身临其境。
现在手机和浏览器性能更强了，3D 元素加载更快，甚至能在低配设备上流畅运行，设计师可以大胆用毛茸茸的 3D 图标、会 “呼吸” 的动态按钮（比如按钮按下时像真的被按下去一样凹陷）。
好处：画面更立体、有趣，用户体验像在真实世界互动，不再是死板的图片和文字。
图片网站链接：https://kevinhilgendorf.com/
图片网站链接：https://labs.chaingpt.org/
字体不再老老实实不动，而是会 “跳舞”：大小变化、颜色渐变、跟着用户操作移动，甚至根据内容情绪调整动画（比如错误提示字体变红闪烁，成功提示变绿飘动）。
好处：吸引注意力，传递品牌个性，比如让标题动起来，用户一眼就被抓住。
文字不再是 “死板的符号”，而是会 “表演” 的演员，我们可以做一些交互创意方面的案例假设
案例1：一个新闻网站的标题 “今日热点”，当你滚动页面时，“热点” 两个字会像火苗一样跳动，吸引你点击；电商网站的 “限时折扣” 按钮，文字会从左到右 “跑马灯” 式滚动，仿佛在喊 “快看我！”。
案例2：社交媒体 APP 的评论区，当有人给你发 “生日快乐”，“生日快乐” 这几个字会飘出彩色 confetti（纸屑），还会放大缩小；如果收到一条提醒 “网络连接失败”，文字会变成红色，轻微抖动，像在着急地告诉你 “出问题啦”。
案例3：未来的动态字体甚至能根据你的输入语气自动调整！比如你在聊天框里输入 “气死我了！”，发送后文字会变成红色，扭曲变形，模拟 “愤怒” 的情绪；输入 “哈哈哈哈哈”，文字会笑着上下弹跳，自带喜感。
图片网站链接：https://wodniack.dev/
图片网站链接：https://romaingranai.xyz/
背景不再是纯色或简单渐变，而是加了 “滤镜”：有的模糊像柔光，有的带颗粒感像老照片，让界面更有层次和温度。
好处：不抢主内容的风头，却能增加细腻的质感，让用户觉得界面更精致、有 “呼吸感”。
想象一下：你的屏幕不再是冰冷的玻璃，而是像磨砂质感的灯罩，透着柔和的光 ——
例如：一个阅读 APP 的背景，不是纯灰色，而是带点模糊的浅灰，像隔着一层薄雾，文字浮在上面更突出，眼睛看久了也不累；
短视频 APP 的点赞按钮背后，有淡淡的颗粒感，像老电影胶片，点击时还会有轻微的 “沙沙” 声，复古又治愈。
例如：有些网站的光标变成了半透明的小圆圈，移动时会在背景留下淡淡的拖影，像在雪地上踩出脚印；
购物车图标点击时，周围会升起细小的颗粒，像撒了一把金粉，让操作更有 “仪式感”。
现代人看腻了 “完美到反光” 的数字界面，这种带点 “不完美” 的质感，反而让人感觉亲切，像摸到了真实的纸张或布料。
图片网站链接：https://breadzine.com/
以前的暗色模式是 “纯黑配白字”，刺眼又冰冷，现在设计师给它加了 “柔光滤镜”：
不是纯黑背景配白字那种刺眼的暗模式，而是柔和的 “低对比度暗调”：比如深灰配浅灰，带点淡淡光影，像傍晚的光线一样舒服。
好处：保护眼睛，减少视觉疲劳，还营造出高级、安静的氛围，比传统暗模式更温馨。
颜色更温柔：比如微信的暗色模式，背景不是纯黑，而是深海军蓝，文字是浅灰色，图标带一点淡金色光泽，晚上刷手机像在暖黄色的台灯下看书，不刺眼还很高级。
场景化设计：一个助眠 APP 的低光模式，界面会模拟 “月光效果”，背景有淡淡的云层阴影，按钮像夜空中的星星一样微微闪烁，配合白噪音，让你还没开始冥想就先放松下来。
保护眼睛更贴心：低对比度设计减少视觉疲劳，尤其适合长时间用手机的上班族、学生党，再也不用担心晚上刷手机 “亮瞎眼”。
图片网站链接：https://www.chromatique.studio/
图片网站链接：https://dribbble.com/shots/24281290-Kenn-Food-Processor-Landing-Page
图片网站链接：https://silverdrive.nl/
你有没有被 APP或网站 的 “谜之提示” 搞懵过？比如 “操作异常，请重试”—— 到底哪里异常？现在设计师开始 “说人话” 了
按钮上的字、提示信息、错误提醒…… 这些细节文字越来越重要。比如 “提交” 改成 “确认发布”，错误提示写 “网络好像断了，点击重试” 而不是冷冰冰的 “错误 404”。
好处：让用户知道该做什么，减少操作困惑，就像有个小助手在旁边轻声指导。
按钮文案更具体：以前 “提交” 按钮，现在改成 “确认并发布动态”，你一下就知道点了之后会发生什么；购物车的 “结算” 按钮变成 “去支付（含 3 件商品）”，清楚告诉你当前购物车数量。
错误提示会 “安慰人”：当你登录密码输错，不再是 “密码错误”，而是 “密码好像不对哦，是不是字母大小写搞错了？试试找回密码吧～”，带点 emoji 和亲切感，让你不烦躁。
空状态会 “引导”：比如一个笔记 APP 的空白页，不再是冷冰冰的 “暂无笔记”，而是画着一个小台灯，配文 “点击新建笔记，开始记录今天的小确幸吧～”，鼓励你行动起来。
图片网站链接：https://clickup.com/
图片网站链接：https://www.headspace.com/
不用记复杂密码了！指纹、人脸、语音识别越来越普及，甚至未来可能用眼动或神经信号验证。比如手机刷脸解锁、支付时扫指纹，又快又安全。
好处：再也不怕忘记密码，登录像 “本能反应” 一样自然。
你还记得自己设过多少个密码吗？邮箱、银行、社交软件……2025 年，你只需要 “露个脸”
“扫个指纹”：
生活场景：早上上班，刷脸打开公司门禁；午休用指纹支付买咖啡；晚上回家，虹膜识别解锁手机，全程不用输密码。甚至连银行 APP 转账，看一眼摄像头就能确认身份，安全又快捷。
默默验证更省心：有些 APP 会 “偷偷” 验证你 —— 比如你常用手机的手势是右手拇指解锁，系统会记录你的握持姿势，当检测到左手拿手机且指纹不符时，自动触发安全提醒，不用你手动操作，安全藏在细节里。
特殊场景：比如戴着手套不方便指纹解锁？未来的可穿戴设备可能支持 “静脉识别”，通过血管纹路确认身份，下雨天、运动时也能轻松解锁。
图片网站链接：https://dribbble.com/shots/23201694-Face-id
智能手表不再是 “缩小版手机”，而是更懂你的 “贴身伙伴”：
智能手表、VR 眼镜、健康手环等设备的设计越来越难：屏幕小，怎么让用户操作方便？
比如用手势滑动、语音命令，甚至靠眨眼控制；还要考虑戴着舒服（轻、贴合手腕）、续航久、适应各种场景（运动时防水，强光下看得清）。
小屏幕大讲究：比如一个运动手表，跑步时屏幕自动切换成 “极简模式”，只显示配速、心率、里程，字体超大，你 glancing（扫一眼）就能看清；当你停下来休息，屏幕会慢慢显示更详细的数据，像个贴心教练。
交互方式创新：VR 眼镜不再靠手柄操作，你眨眨眼就能切换菜单，点点头就能确认；智能手环检测到你睡眠不好，早上会震动提醒 “昨晚睡眠质量一般，今天记得多喝水哦”，还会同步调整手机的屏幕亮度，帮你缓解疲劳。
场景化适配：比如滑雪专用智能眼镜，强光下自动调暗镜片，检测到你加速滑行时，界面只显示速度和路线，避免分心；潜水手表接触到水时，自动锁定屏幕防止误触，浮出水面后又恢复正常。
图片网站链接：https://inspect-ar.com/en/
图片网站链接：https://dribbble.com/shots/18628321-Fitness-Smart-Watch-UI
界面不再只追求好看，还要让用户用得爽、有情感共鸣：分区清晰、3D 互动、动态字体吸引眼球，模糊背景和低光模式让眼睛舒服；UX 写作和生物识别减少操作麻烦，可穿戴设备更懂用户的使用场景。
本文由人人都是产品经理作者【南设】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。
题图来自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
蓝蓝设计的小编 http://www.lanlanwork.com
