最近深度体验了多款银行 APP，发现优秀的 UI 交互设计真的能让使用体验直线飙升！今天就和大家分享那些让人惊艳的交互设计细节，原来银行软件也能这么 “懂人心”！

一、数据可视化：让金融数据会 “说话”

传统银行界面里，资产总览可能就是一串冷冰冰的数字，让人看完毫无波澜。但在一些采用先进交互设计的 APP 中，数据可视化彻底改变了这种局面。比如某银行 APP 的资产看板，运用动态折线图实时展示近 30 天的资金变动趋势，当收益上涨时，折线会以流畅的动画向上攀升，还搭配轻快的音效，直观又有趣；而当支出增多时，折线下滑的同时，图表区域会变成醒目的黄色预警色，提醒用户注意消费情况。

再比如理财产品对比界面，不再是密密麻麻的文字介绍和参数表格。设计师将不同产品的风险等级、预期收益、投资周期等关键信息，转化为雷达图、柱状图结合的形式。用户只需轻轻滑动屏幕，就能 360 度旋转雷达图，全方位对比各产品的优劣势，这种可视化交互让复杂的理财选择变得一目了然，就像有个专属理财顾问在身边为你讲解。二、人性化交互流程：告别繁琐操作

过去在银行 APP 转账，可能要经历选择转账类型、输入卡号、填写金额、核对信息等多个步骤，流程冗长且容易出错。而经过精心设计的交互流程则大不相同。某头部银行 APP 采用了 “智能转账” 交互模式，当用户点击转账按钮，系统会自动识别用户最近的转账对象和金额，将其展示在快捷转账列表中，用户只需一键点击，就能快速完成转账操作。如果是给新用户转账，在输入卡号时，系统会实时校验卡号有效性，并通过颜色变化提示用户输入是否正确，避免因输错卡号导致转账失败的尴尬。

在账户管理方面，下拉刷新的交互方式已经屡见不鲜，但有一款银行 APP 却玩出了新花样。当用户下拉刷新账户余额时，界面会出现一个可爱的小动画，比如一只小钱包 “咻” 地打开，金币 “哗啦” 掉落，同时余额数字以动态效果更新。这种充满趣味性的交互，让原本枯燥的刷新操作变得生动起来，给用户带来了愉悦的使用体验。

三、沉浸式用户体验：细节之处见真章

交互设计的魅力还体现在对用户情感的关注上。在一些银行 APP 的登录界面，除了常规的密码输入方式，还加入了指纹识别、面容 ID 等快捷登录方式，并且在用户选择这些方式时，会有柔和的光影效果和轻微的震动反馈，仿佛在和用户进行 “亲密互动”。当用户忘记密码时，找回密码的流程也不再是冷冰冰的提示，而是通过引导式的交互界面，一步一步带领用户完成身份验证和密码重置，整个过程就像在和一个贴心的客服人员对话。

这些优秀的 UI 交互设计案例，不仅让银行 APP 变得更加易用、有趣，也真正实现了从 “功能导向” 到 “用户体验导向” 的转变。希望未来能看到更多银行在交互设计上发力，为我们带来更出色的使用体验！大家在使用银行 APP 时，有没有遇到过哪些让你印象深刻的交互设计呢？欢迎在评论区分享！

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

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

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

出海产品面临着语言、文化和用户习惯的巨大差异，这对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语言中，带左右滑动方向的图片或者是左右滑动展开功能选项，应遵循与英文界面相反的镜像规则。

▲

汉语-左滑删除

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

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

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

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

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

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

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

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

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

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

二、静态邀请

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

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

1. 引导操作邀请

01 步骤引导

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

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

02 白板引导

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

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

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

2. 漫游探索邀请

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

最佳实践：

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

三、动态邀请

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

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

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

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

最佳实践

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

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

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

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

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

最佳实践

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

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

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

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

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

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

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

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

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

5. 邀请的优点

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

谢谢观看！

排序在B端和C端产品中都比较常见，随着用户对产品使用的易用性提高，排序在产品交互中也在变化。本文分享B端拖动排序的多种场景及交互，希望对你有所启发。

很久没有更新B端产品相关的文章了，近期工作项目中做了很多新需求，接触了更多业务，也学到了一些新的交互，后续将会根据我在实际工作项目中遇到的需求展开总结。

B端产品设计具有较高的业务属性，所以对于ui设计师而言也需要有较强的业务知识，在完全理解需求后，再针对业务场景、用户体验、交互、布局合理、易用性等多维度展开设计。

这一期主要分享关于B端产品中拖动排序功能。

排序在B端和C端产品中都比较常见，前期排序有通过点击上下箭头排序，但是这样的交互易用性较差，随着用户对产品使用的易用性提高，这种排序方式在产品交互中已经渐渐的被舍弃。

目前对于排序功能，使用更多的是通过拖动排序，通过选中数据后长按鼠标右键，上下拖动来完成数据的排序。

一、拖动排序的多种组件和交互

在B端产品中，我目前接触的拖动排序的组件包含以下两个大类：

1. 一级目录常规排序（非树结构）
2. 树组件多层级排序

对于分类2【树组件多层级排序】又包含两个小类：

1. 同层级排序（横线高亮显示即将放的位置）
2. 跨层级排序

对于小分类【跨层级排序】又可以细分为四个场景：

1. 父级未展开时：拖动到父级、父级整行高亮
2. 父级未展开时：拖动长按停留在父级时，父级自动展开子级
3. 父级已展开时：拖动到子级时，父级整行高亮，拖动到的位置出现高亮横线
4. 父级已展开时：拖动到子级文件夹时，父级不需要高亮，子级文件夹目录整行高亮（子级已展开和未展开的交互与父级同理）

二、拖动排序场景和交互实操

上面已经总结了排序的组件和场景，下面我们就一起来看看不同组件在不同场景下的具体交互，通过实际项目设计详细介绍拖动排序的功能。

1. 一级目录常规排序（非树结构）

数据默认展示类似列表数据一样，平铺左对齐排版，当拖动排序时，鼠标移动到需要排序的数据行，长按鼠标右键并拖动数据上下移动，被拖动的数据原位置置灰（也可以直接消失）。

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

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

查看详情 >

同时，被拖动的数据跟着鼠标走，移动到其它位置时，在将要放下的位置出现蓝色高亮分割线（还可以做到所有数据实时变化位置效果）这样能让用户更加直观地看到数据位置的变化。

此类需求一般是针对一级数据排序，数据结构比较简单，没有文件夹多级树状结构，下面列举几个工作中遇到的需求场景，以及分享几个其它产品中遇到的交互，便于大家理解。

由于B端产品具保密性，所以下面分享的截图非工作实际数据，大家只要明白需求场景和交互即可。

需求场景1：产品业务中有很多的表单，表单中的字段顺序在不同企业中不同，应该如何设计呢？

在设计时，可以将表单所有的字段罗列出来，然后用户通过自定义排序字段即可，这里的交互就可以直接采用上下拖动排序。

需求场景2：飞书中有多个应用，对于每个用户而言，自己所关注的应用不同，优先级不同，该如何设计？

同理，飞书也是对用户个人的应该设计了拖动排序功能，可以根据自己关注的应该排序应该的位置，从而更快的找到自己常用的应用，提高工作效率。

无论是对于列表数据还是卡片数据的排序都可以采用这种拖动排序的交互。

2. 树组件多层级排序

（1）同层级排序（横线高亮显示即将放的位置）

树组件同层级排序默认展示和拖动时效果与一级目录常规排序一致。

（2）跨层级排序

父级未展开时：拖动到父级、父级整行高亮

如下图，当需要把文件夹【数据名称显示004】放在【数据名称显示003】文件夹中，鼠标拖动数据放在【数据名称显示003】时，【数据名称显示003】整行会出现蓝色高亮，表示被拖动的数据即将放在该文件夹内。

父级未展开时：拖动长按停留在父级时，父级自动展开子级。

如下图，按照上面的步骤拖动时，当鼠标一直停留在【数据名称显示003】的位置时，该文件夹会自动展开二级目录，这是一个拖动排序比较友好的交互，可以让用户再次看到该目录下的数据结构，并快速一次性选择需要放的位置。

父级已展开时：拖动到子级时，父级整行高亮，拖动到的位置出现高亮横线。

如下图，在上图基础上，当鼠标继续拖动数据，想要放在二级目录中时，数据一级目录同样会显示高亮，告诉用户当前数据的层级关系。

同时，二级数据中会出现蓝色高亮分割线，标识被拖动的数据即将放的位置，这样就能清晰的知道被拖动的数据将放在那个目录的那个位置。

父级已展开时：拖动到子级文件夹时，父级不需要高亮，子级文件夹目录整行高亮（子级已展开和未展开的交互与父级同理）。

当需要将数据拖动到二级文件夹内时，只需要高亮二级文件夹即可。

关于树组件多层级排序的使用场景和交互比较复杂，上面我根据不同场景分别列出了交互展示方式，下面再根据实际业务需求列举案例说明，因为此场景主要是针对交互和显示，所以我就直接拿动图展示，便于大家理解。

在互联网领域中，人机之间的互动过程就是交互。交互也有一些可预测的、重复出现的规律，作者总结了其中常见的七种C端交互模式，可以提高大家的工作效率，分享给大家。

前段时间有个产品童鞋，他刚加我就问了一大串问题。

什么是模式（Pattern）？什么是模版（Template）？这两个概念有什么区别？

作为一个热心好学、乐于助人的产品仔，我当然和他畅聊了一个多小时，顺便总结下聊天内容。

你是不是也经常在生活工作中，碰到类似“行为模式、设计模式、语言模式、文档模版、表格模版”等名词。

但又搞不清它们有什么区别，搞懂了又有什么用？

别急，我们花几分钟，先来唠唠什么是模式。

一、什么是模式？

可预测、重复出现的现象或规律，通过归纳总结，就变成了某一种模式。

我们的生活中，就有许多模式的影子。

比如常见的商业模式、营销模式、行为模式、数学模式、语言模式等。

举个例子：

简单说下行为模式，它分为了“习惯模式、消费模式、学习模式”等等。

苦逼打工仔普遍的消费模式，一般是工作日花钱少，到了周末都爱到商场逛街和购物。

但又有特例，我有个朋友就特别宅，他只喜欢在上班的时候，摸鱼逛淘宝下单，简直离谱~

做交互设计10年，我为何转岗到产品经理？

真正转岗之后，我发现很多工作还是超出了自己的想象。产品经理的工作确实比较杂。理论上，产品经理的工作包括了产品的方方面面，从市场研究、用户调研、数据分析...

查看详情 >

掌握模式，有什么用？

当你掌握了模式的概念，并尝试在生活中使用，相信你一定能感受到这 7 个好处。

1. 信息压缩：把信息精简成特定的模式，记忆传播更容易了，教给别人更是轻轻松松；
2. 知识萃取：通过学习模式，掌握系统化的知识，就像搭乐高拼积木，简单易懂、一学就会、举一反三；
3. 简化问题：用模式来解决问题，意味着它不再是一团乱麻，成为了可分割的部分，原来苦恼的事，现在轻松搞定；
4. 识别规律：当你摸清了模式的现象规律，就像旅游带着地图，走到哪里都不慌；
5. 提高效率：把模式进行泛化使用，可以大大提高你的工作产出，盖章可比画图快太多了；
6. 组合创新：试着把你学会的各种模式，打乱排序、重新组合，说不定会拼出一些新玩意；
7. 预测未来：搞懂了特定领域的模式，意味着你熟知并能运用自如，自然而然学会了推演未来。

二、C 端交互设计的 7 种常见模式

我们试着再举个例子，加深下对模式的理解，顺便学学交互设计。

什么是交互？

简单来说，交互指的是在互联网领域中，人、机之间的一系列互动过程。

我还提炼了 3 种常见模式（简单反馈、数据操作、业务判断），比较粗糙凑合也能用。

现在试着再系统总结下，我常用的 7 种 C 端交互模式，主要有：导航模式、搜索模式、反馈模式、输入模式、编辑模式、分享模式、引导模式。

学完就能用，赶紧卷起来~

有人就问了，还有更多交互模式吗？

确实可以有，等我有时间再编几个。。

话说回来，如果是一些特别复杂的业务规则，可能会涉及到 N 个交互模式的任意组合。

1. 导航模式

常见的导航模式有按钮组合、标签菜单、宫格布局、列表视图等。

导航模式的主要作用是，告知用户当前在网站的位置，以及接下来到哪些页面，这有点像地图 APP。

上面这张图中，包含了几种导航组件呢？

2. 搜索模式

搜索，是各大电商 APP 常见的交互模式。

搜索模式允许用户输入关键词，然后系统返回搜索结果。

打个比方，这有点像在 Navicat 中写了一段 SQL 查询。

SELECT id, name, age
FROM users
WHERE age > 18

这段 SQL 的作用是，查询大于 18 岁的用户信息，包含序号、名称、年龄。

3. 反馈模式

常见的反馈模式组件，涉及了对话框、吐司提示、气泡提示等。

反馈模式用的比较多的场景是，告知用户一些信息或提示，比如“输入密码错了、展示订单取消的注意事项”等。

4. 输入模式

输入模式主要用于新数据创建，例如淘宝下单时，你新增了一个收货地址。

打开美团叫个外卖，整个订单创建流程，也是输入模式。

5. 编辑模式

有很多人可能会把输入模式和编辑模式搞混。

区别它们的一个方法是，交互流程涉及新数据创建，还是改旧数据。

改数据的话，那就是编辑模式。

6. 分享模式

我们在看到一些干货文章，或好用的小程序想要转发给朋友，那就要用到分享模式。

分享模式可以很简单，也可以往复杂了做，看产品阶段去实现。

7. 引导模式

引导模式和反馈模式有点像，都是展示特定的内容。

那怎么分辨它们呢？

以设计师视角来看，反馈模式需要用户触发，系统被动显示。

而要让用户特别关注的信息，那就是引导模式。

三、总结

模式，即抽象的规律。——好夕雷

说了这么多概念和例子，你是不是对模式的认知更清晰了呢？

模式运用在产品领域，就有了这 7 种交互模式，分别是“导航模式、搜索模式、反馈模式、输入模式、编辑模式、分享模式、引导模式”。

如果学会了模式，那么无论生活还是工作，相信你一定能轻松应对、事半功倍。