当前位置:首页 >> 综合

超全总结!C端交互设计的7种常见模式

超全总结!超全常C端交互设计的总结7种常见模式

前段时间有个产品童鞋 ,他刚加我微信就问了一大串问题。端的种

什么是交互模式(Pattern)?什么是模版(Template) ?这两个概念有什么区别?作为一个热心好学  、乐于助人的设计产品仔  ,我当然和他畅聊了一个多小时,模式顺便总结下聊天内容。超全常

你是总结不是也经常在生活工作中 ,碰到类似“行为模式、端的种设计模式、交互语言模式 、设计文档模版 、模式表格模版”等名词 。超全常但又搞不清它们有什么区别 ,总结搞懂了又有什么用?端的种别急,我们花几分钟 ,先来唠唠什么是模式 。

一 、什么是模式 ?

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

我们的生活中 ,就有许多模式的影子 。比如常见的商业模式、营销模式 、行为模式 、数学模式 、语言模式等 。

举个例子

简单说下行为模式,它分为了“习惯模式、消费模式 、学习模式”等等 。苦逼打工仔普遍的消费模式,一般是工作日花钱少,到了周末都爱到商场逛街和购物。但又有特例,我有个朋友就特别宅 ,他只喜欢在上班的时候,摸鱼逛淘宝下单  ,简直离谱~

二 、掌握模式有什么用?

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

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

听了还是有点懵?那可能需要了解下抽象思维。

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

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

什么是交互?我在之前有讲过 ,如何快速入门交互设计 ?简单来说,交互指的是在互联网领域中 ,人 、机之间的一系列互动过程。我还提炼了 3 种常见模式(简单反馈、数据操作、业务判断) ,比较粗糙凑合也能用 。

现在试着再系统总结下(MD 掏家底了,记得赞我。 。),我常用的 7 种 C 端交互模式,主要有:导航模式、搜索模式 、反馈模式 、输入模式 、编辑模式、分享模式、引导模式。

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

有人就问了 ,还有更多交互模式吗 ?确实可以有 ,等我有时间再编几个。 。话说回来,如果是一些特别复杂的业务规则 ,可能会涉及到 N 个交互模式的任意组合 。

1. 导航模式

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

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

超全总结!C端交互设计的7种常见模式

2. 搜索模式

搜索  ,是各大电商 APP 常见的交互模式。搜索模式允许用户输入关键词 ,然后系统返回搜索结果 。

超全总结!C端交互设计的7种常见模式

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

SELECT id, name, ageFROM usersWHERE age > 18

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

3. 反馈模式

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

超全总结!C端交互设计的7种常见模式

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

4. 输入模式

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

超全总结	!C端交互设计的7种常见模式

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

5. 编辑模式

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

超全总结!C端交互设计的7种常见模式

区别它们的一个方法是,交互流程涉及新数据创建 ,还是改旧数据。改数据的话,那就是编辑模式 。

6. 分享模式

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

超全总结!C端交互设计的7种常见模式

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

7. 引导模式

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

超全总结!C端交互设计的7种常见模式

那怎么分辨它们呢 ?以设计师视角来看,反馈模式需要用户触发 ,系统被动显示 。而要让用户特别关注的信息,那就是引导模式。

总结

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

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

模式运用在产品领域 ,就有了这 7 种交互模式 ,分别是“导航模式、搜索模式、反馈模式、输入模式、编辑模式 、分享模式、引导模式” 。如果学会了模式 ,那么无论生活还是工作,相信你一定能轻松应对  、事半功倍  。

作者:产品之外

焦点

超全总结!超全常C端交互设计的总结7种常见模式

前段时间有个产品童鞋 ,他刚加我微信就问了一大串问题。端的种

什么是交互模式(Pattern)?什么是模版(Template) ?这两个概念有什么区别?作为一个热心好学  、乐于助人的设计产品仔  ,我当然和他畅聊了一个多小时,模式顺便总结下聊天内容。超全常

你是总结不是也经常在生活工作中 ,碰到类似“行为模式、端的种设计模式、交互语言模式 、设计文档模版 、模式表格模版”等名词 。超全常但又搞不清它们有什么区别 ,总结搞懂了又有什么用?端的种别急,我们花几分钟 ,先来唠唠什么是模式 。

一 、什么是模式 ?

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

我们的生活中 ,就有许多模式的影子 。比如常见的商业模式、营销模式 、行为模式 、数学模式 、语言模式等 。

举个例子

简单说下行为模式,它分为了“习惯模式、消费模式 、学习模式”等等 。苦逼打工仔普遍的消费模式,一般是工作日花钱少,到了周末都爱到商场逛街和购物。但又有特例,我有个朋友就特别宅 ,他只喜欢在上班的时候,摸鱼逛淘宝下单  ,简直离谱~

二 、掌握模式有什么用?

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

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

听了还是有点懵?那可能需要了解下抽象思维。

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

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

什么是交互?我在之前有讲过 ,如何快速入门交互设计 ?简单来说,交互指的是在互联网领域中 ,人 、机之间的一系列互动过程。我还提炼了 3 种常见模式(简单反馈、数据操作、业务判断) ,比较粗糙凑合也能用 。

现在试着再系统总结下(MD 掏家底了,记得赞我。 。),我常用的 7 种 C 端交互模式,主要有:导航模式、搜索模式 、反馈模式 、输入模式 、编辑模式、分享模式、引导模式。

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

有人就问了 ,还有更多交互模式吗 ?确实可以有 ,等我有时间再编几个。 。话说回来,如果是一些特别复杂的业务规则 ,可能会涉及到 N 个交互模式的任意组合 。

1. 导航模式

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

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

超全总结!C端交互设计的7种常见模式

2. 搜索模式

搜索  ,是各大电商 APP 常见的交互模式。搜索模式允许用户输入关键词 ,然后系统返回搜索结果 。

超全总结!C端交互设计的7种常见模式

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

SELECT id, name, ageFROM usersWHERE age > 18

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

3. 反馈模式

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

超全总结!C端交互设计的7种常见模式

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

4. 输入模式

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

超全总结	!C端交互设计的7种常见模式

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

5. 编辑模式

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

超全总结!C端交互设计的7种常见模式

区别它们的一个方法是,交互流程涉及新数据创建 ,还是改旧数据。改数据的话,那就是编辑模式 。

6. 分享模式

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

超全总结!C端交互设计的7种常见模式

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

7. 引导模式

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

超全总结!C端交互设计的7种常见模式

那怎么分辨它们呢 ?以设计师视角来看,反馈模式需要用户触发 ,系统被动显示 。而要让用户特别关注的信息,那就是引导模式。

总结

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

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

模式运用在产品领域 ,就有了这 7 种交互模式 ,分别是“导航模式、搜索模式、反馈模式、输入模式、编辑模式 、分享模式、引导模式” 。如果学会了模式 ,那么无论生活还是工作,相信你一定能轻松应对  、事半功倍  。

作者:产品之外


{dede:include filename="menu.htm"/}