首页

移动端搜索功能设计:3个阶段解析搜索流程设计要点

博博

移动端搜索功能设计:3个阶段解析搜索流程设计要点


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

移动端搜索功能设计:3个阶段解析搜索流程设计要点

人人都是产品经理 2017-01-04 18:08:02


这篇文章笔者想和大家聊一聊有关搜索功能的设计,搜索功能是每个内容型APP的核心,它的易用性决定了用户是否能从APP里快速找到自己想找的内容,那么决定搜索体验好坏的关键点又是什么呢?这里我总结了两点,“操作的易用性”和“结果的准确性”。看似简单的两点却有很多的学问,笔者把搜索的交互流程划分成三个关键阶段,“搜索前、搜索中及搜索后”,接下来将从这三个阶段逐一分析整个搜索流程中的相关设计。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

搜索入口——依据功能权重来判断入口的表现形式

在不同的APP或者不同的场景下搜索入口有着不同的表现形式,具体的表现形式取决于产品对搜索功能权重的定义,如果说在某一场景下搜索功能是用户常用的核心功能那么他在界面上所表现出来的权重就要高些,反之则低些。下图是常见的搜索功能的入口形式,他们的权重从左到右依次降低,笔者将对他们一一进行分析

移动端搜索功能设计:3个阶段解析搜索流程设计要点

方式一:如下图APP Store的搜索入口

如下图APP Store的搜索形式,搜索放在标签栏上作为一个独立的功能模块,它的功能层级是最高的。不管用户操作到哪里都可以随时进入搜索页面,这样的搜索入口通常用在搜索场景非常多的内容型APP上,方便用户在任何时候快速进入搜索页面。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

方式二:搜索框外漏在nav bar

如下图是京东app的搜索入口,它将搜索框外漏在nav bar上,这样的形式有着两个设计的关键点:

移动端搜索功能设计:3个阶段解析搜索流程设计要点

关键点一:搜索框外漏在顶部导航条上

搜索框直接外漏在导航条上是为了突显该功能,这一功能往往是用户在该页面非常核心的操作任务,类似天猫京东这类电商型app,通常情况下用户都是带着明确目的来购买东西的,那么他们采取的最快最直接的方式就是搜索。

关键点二:在向上滚动界面时,搜索框一直悬停在顶部

这样做的场景是这样的,在用户滚动页面寻找内容时,可能并不能找到自己想要的内容,搜索框一直悬停一是为了暗示用户可以进行搜索,二是为了让用户在想搜索时快速触发搜索

方式三:出现在NAV BAR下面,默认隐藏或显示

如下图是微信在聊天页面和通讯录页面的搜索入口,初始化状态时聊天页面的搜索框是不出现在用户的可视范围内的,当页面下滑时搜索框才出现,而在通讯录页面里搜索框是默认出现在用户的可视范围内的。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

分析:微信在最近联系人和通讯录上搜索框的默认状态不同,这很好地诠释了这两种场景下的搜索功能的权重。最近联系人页面上的搜索入口显得更加隐蔽,因为在这个页面下用户产生搜索的场景很少,把其隐藏简化了界面的元素,提升了界面的美观性。

方式四:通过点击icon触发搜索

如下图是淘票票的搜索的入口,通过点击右上角的搜索icon进入搜索页面:

移动端搜索功能设计:3个阶段解析搜索流程设计要点

分析:在界面权重上,这样的方式相对于以上三种方式来说显得较弱一点,因为在这样的场景下用户使用搜索的概率并不是很高,如果把搜索外漏就会占据更多的屏幕空间,破坏界面的权重等级和美观性。

总结:依据用户的需求场景,搜索入口放在不同的位置,如果说在该页面搜索是一个主要的功能,我们就应该去突显它,提升它在界面上的权重,反之则减轻它的权重。

搜索中间页——运营的重灾区,用户搜索行为的关键点

搜索中间页本来应该是一个轻量化的页面,用户在这里输入内容进行搜索即可。但随着运营需求的扩张,这个页面逐渐成为了一个运营重灾区,多了很多推荐的内容。笔者将从“输入框提示信息、搜索分类、搜索历史、搜索推荐、搜索输入、搜索建议”等方面分析一下这个页面的设计。

1. 输入框提示信息

搜索框内的提示信息通常是提示用户当下可以搜索什么样的内容,如下图bilibi的搜索提示,告诉用户可以进行“视频、番剧、UP主或者AV号”的搜索,这样的提示信息对用户也是一种良性的引导,给用户提供了一个心理预期,同时也对用户随意输入关键词造成无结果的伤害体验的可能进行了限制。例如一个房产APP,搜索框内提示输入楼盘或小区名,如果没有这样的提示有的用户可能就会去输入价格去筛选房源,这句提示语很好地降低了这样的风险。

但随着人们对APP使用的熟悉,用户在这里的认知负担基本消除,运营人员逐渐抢占了这块地方,这句话变成了内容的推荐或者产品的Slogan,这些推荐的内容可以是运营人员手动维护的也可以是依据用户的购买和行为习惯进行推荐的。如下图右边是淘宝的搜索提示,搜索框的文案变成了“红人最爱潮牌名服”,这就是运营人员在为特定内容进行导流。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

2. 搜索分类

在内容型APP中搜索时通常会对内容进行分类搜索,这是为了帮助用户更地找到相关内容,分类的操作可以发生在搜索前也可以发生在搜索后,如下图是“淘宝、微信、网易云音乐”搜索分类的方式,笔者将分别对他们进行分析。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

淘宝是将搜索分类前置,默认搜索宝贝,点击后弹出浮层进行切换。这样的方式存在一个明显的缺点就是由于该入口所占空间位置不显著,会导致用户感知太弱。 这样的方式通常用在用户大多数情况下只搜索某一分类的内容,如淘宝这样,用户大部分的搜索场景都是在寻找宝贝。

微信默认搜索所有内容,将分类通过通过三个很显著的入口放在搜索框下方,当点击某一分类时跳转到该分类的搜索界面,同时搜索框的文案以及搜索界面的内容发生相应变化,提示用户搜索范围被改变。这种方式通常用在这些分类搜索的场景都很常见时,它的缺点在于,从界面表现形式来看,这三个分类更像是三个功能的入口,他们与搜索框联系得不是很紧密,很多用户最开始使用时并不知道点击这些分类是进行搜索范围的限制。经测试3个从未使用过该功能的用户,他们都认为点击朋友圈后就是进入朋友圈,点击文章后就是显示所有文章。

网易云音乐是将搜索分类进行后置了,在下文关于搜索结果的展示我会分析它的优劣势。

3.搜索历史

搜索历史记住用户的足迹,方便用户快速向以前搜索过的内容进行转换。设计上我们需要注意的一点就是需要把搜索历史和搜索推荐区分开来,在位置上,尽量让搜索历史靠近搜索框(如下图),因为从认知心理学上来讲,越靠近搜索框的内容越能表示它是搜索历史。在表现形式上,搜索历史和搜索推荐尽量采用不同的表现形式。搜索历史伴随的交互操作有删除单条或者清空搜索历史

移动端搜索功能设计:3个阶段解析搜索流程设计要点

4. 搜索推荐

这里的搜索推荐通常有三种来源:

  1. 按照用户的搜索热度进行推荐;
  2. 运营手动配置;
  3. 按照搜索行为进行计算和推荐;

它存在的目的主要有两个:

  • 一是挖掘用户的潜在需求,让用户更快地找到想找的内容;
  • 二是作为运营位为特定的内容导流。

建议:

  • 不要漏出太多的推荐内容,毕竟它带有一些运营和广告性质,用户的接受度并不会很高
  • 在界面上让推荐内容和搜索历史有明显的区分,方便用户在形式上一眼就能区分出搜索历史和推荐内容
  • 尽量推荐一些对用户有真正价值的内容

5. 搜索输入

受移动端操控方式的限制,在输入内容时存在两个明显的痛点:“修改内容”和“输入速度”。

关于修改内容:当用户想更改语句中一部分文字时,将光标移动到想要更改的地方是一件很难的事,点击操作真的很令人发狂,通常情况下我宁愿重新输入。但是针对这一点搜狗输入法做了一个很人性的交互,当用户按住键盘左右滑动时就能移动光标(如下图)。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

关于输入速度:很早之前偶然间发现了UC浏览器在输入文字时的一个交互功能,如下图所示,当输入文字后,用户可以将搜索建议的词语直接加入到搜索框中然后继续输入文字。这样的需求场景在很常见,比如我想搜索“交互设计师的前景”,当我输入交互二字后就会有“交互设计”的搜索建议,点击搜索建议后面的箭头将这个词直接加入搜索框,然后就出现了“交互设计师的前景”的搜索建议,点击搜索建议后进入搜索结果的页面,这个过程中我少打了很多字,对我的搜索速度有很大的提升。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

6.搜索建议

当用户输入内容后,搜索框下面出现了众多的搜索建议,这些搜索建议是为了帮助用户快速向目标进行转化,如下图是京东的搜索建议,当我输入画框后,一系列画框的搜索建议就出来了,它还有一个亮点就是在此提供了细化筛选条件,画框后面紧跟了“长方形、实木、正方形”等关键的筛选条件,为用户省去了到结果页进行筛选的步骤。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

搜索结果——背后的逻辑决定了用户是否能找到准确的内容

搜索结果是搜索过程中最关键的点,结果的准确性确定了用户体验的好坏,笔者将从“搜索结果的形式、搜索结果的操作、搜索结果的分类、搜索结果的排序”等方面来对搜索结果进行分析。

1. 搜索结果的形式

搜索结果一般分为两种,一种是所见即所得,用户输入内容后出现在搜索框下面的搜索建议就是搜索结果,这种搜索通常出现在一些轻量化的APP中,因为搜索建议对应的就是唯一的搜索结果,如下图微信的搜索一样。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

第二种形式就是一个关键词对应了多个搜索建议,每个搜索建议又对应了多个搜索结果,当用户点击搜索后进入了一个专门的搜索结果页,如下图京东的搜索一样。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

2. 搜索结果的操作

依据用户的需求目的,在搜索结果的列表上我们可以外漏用户大部分情况下会采取的操作,比如说视频类网站,用户搜索到某一内容后,最常采取的操作就是播放,我们就可以把播放按钮外漏,缩短用户的操作路径(如下图爱奇艺的搜索结果页)

移动端搜索功能设计:3个阶段解析搜索流程设计要点

3. 搜索结果的分类

通常的分类方式是TAB切和卡片,以下是微信和网易云音乐的分类。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

这两种方式有各自的应用场景,TAB切主要应用在搜索结果有固定的几种分类,并且通常的情况下搜索结果都有很多的内容,如上图的网易云音乐,每一个分类都有很多的搜索结果,如果它采用卡片式的瀑布流布局,用户需要不停往下翻才能看到第二种分类的内容。卡片式主要运用在搜索结果的内容不多,如微信这样的情况,每一类结果并不是很多,卡片式的瀑布流布局能让用户快速定位到自己想要的内容,如果这里用TAB切就很尴尬了,因为每一类的内容都很少或者很多类里根本没有内容,这样的用户感受就不好了。

4. 搜索结果的排序

搜索结果的排序是一个比较复杂的工作,里面涉及了很多的算法逻辑,笔者对这块也不是很清楚,但是一般的垂直内容型APP并没有这么复杂的算法在里面,就是按照搜索的关键字去一一匹配。

如下图是说我在QQ阅读输入一个“男”字,然后就给我建议第一个字是“男”的所有可能的结果,当第一个字匹配完后就匹配第二个字,这样以此类推。他们的整体顺序就是按照匹配关键字的先后进行排列的,其实在排序中还牵涉了很多的算法,比如说它可能会掺杂一些“热度、人气、人为意图、语义”等因素的权重,这里不展开赘述了。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

以上就是笔者对搜索功能的介绍和思考,希望能对大家有所帮助。

本文由 @不知名设计师 原创发布于人人都是产品经理。未经许可,禁止转载。



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

博博

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

我是你们的学霸姐 2017-12-13 11:01:13

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

对于图标如何断线,如果是经验丰富的设计师,估计靠感觉做就可以了,但不是大神的我们怎么办呢?总得有点规律让我们参考参考吧,虽然有些规律不能全盘通用,但这次总结一定能给你带来帮助。

来,看下大纲:

1.先考虑在拼接处断线

2.平衡视觉复杂度

3.避免正中间处断线

4.尽量让图标一笔画完

1.先考虑在拼接处断线

如果你觉得此篇文章对你有作用,请收藏转发分享给你的朋友,把自己的收获写在评论区,小编会解答。

如果一个物体是由两个部分组成,当我们选择在拼接处断开:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

我会觉得两个部分还没组装好,是一种很自然的分开。

但如果是下面这样的:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

我会觉得它坏了,很不舒服。

我们做断线图标的时候也一样,可以先考虑在物体的拼接处断线,让断口看起来自然和谐!

举个例子:

下图是一个“我的”图标:UI设计学习群:583915450,领取100G学习资料,备注:资料领取

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

如果现在让我给它来做断线,我就先找到拼接处,分析如下:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

虽然例子有点血腥,但事实确实如此,拼接处就在头和身子连接的地方,所以尝试在这里断开:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

哎呦,我觉得还ok。

行,那再来个例子!

下图是个消息的图标:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

再来分析,它的外形是由一个矩形和一个三角形组成的:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

我们还是在拼接处断开,得到如下图:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

嗯,也还行!

所以一般来做断线图标,我就会先利用这一个规律看可不可行。

如果可行,就继续优化细节,如果不可行再尝试其他方法。

2.视觉复杂度要平衡

有时候,我们的图标不好将其拆解,这时候我们就可以尝试去考虑图标的视觉复杂度。

来个例子,下图是一个皇冠的图标:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

经过分析,我们可以得出,图标红色区域的复杂程度要比蓝色区域高:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

所以我选择在蓝色区域断口,来增加蓝色区域的复杂程度,达到平衡的效果:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

那如果在红色区域断开是什么样的呢,我们来分析对比一下:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

所以,通过对视觉上复杂程度的解析后发现,方案一会平衡协调很多!

再来个例子,下面是个通讯录图标:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

图标的左侧要比右侧复杂:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

如果我们选择在左侧断线,那左侧就会更复杂,这样两边的复杂度就会失调,所以我选择在右边断线:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

这样图标左右都有细节,视觉平衡多了!

3.避免正中间处断线

有朋友会说了,那有些图标没有拼接处,复杂程度也都一样,比如下面这种:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

怎么办呢?

很简单,这种图标只要尽量避免在正中间断线就ok,因为正中间断线显得过于呆板:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

其它地方都可以尝试,例如左上角、左上角、右上角、右下角等等。

4.尽量让图标一笔画完

这也是一个很重要的知识点:如果可以的话尽量让图标外轮廓一笔画完,如下图:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

其实很多时候,只要我们能从拼接处断线,基本都是可以一笔画完的,所以大家注意一下就好了。

当然,如果实在不能一笔画下来,也不必勉强,因为强扭的瓜不好看!

总结

这四个知识点就是目前为止菜心所整理的关于断线图标的规律,个人经验,供大家参考。

不过提醒大家,这些方法难免会有少数不适用的时候,遇到不适用的情况,千万不要因为规则而被困住,多多尝试,敢于不同,也许可以找到更合适的解决方案。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


超实用!UI设计图标欣赏,绝对激发你的灵感

博博

超实用!UI设计图标欣赏,绝对激发你的灵感

我是你们的学霸姐 2017-08-17 20:13:23

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

身为一名Ui设计师的你是否会有灵感枯竭的时候呢,下面本学霸会向大家分享一组简约却不简单的图标设计作品,希望大家在看完后能够激发自己无穷的灵感哦~

超实用!UI设计图标欣赏,绝对激发你的灵感

有需要的小伙伴可以加群661690541一起学习,还有免费资料等你领取哟~

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计中的布尔运算由浅及深,深入解析,图标瞬间高大上!

博博

UI设计中的布尔运算由浅及深,深入解析,图标瞬间高大上!

UI设计栈 2018-03-26 19:24:14

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

平时我们提到的布尔运算其实就是AI路径查找器(pathfinder),通过路径【加】【减】运算绘制出各种各样的形状,是成为一名优秀的UI设计师必备的技能之一。

对于初学者来说,刚开始可能模糊不清,确实不容易理解,下面栈长奉上最全的布尔运算深入解析教程,希望对迷途中的UI设计小白有所帮助。

UI设计中的布尔运算由浅及深,深入解析,图标瞬间高大上!

图片来源于网络

UI设计中的布尔运算由浅及深,深入解析,图标瞬间高大上!

图片来源于网络

UI设计中的布尔运算由浅及深,深入解析,图标瞬间高大上!

图片来源于网络

UI设计中的布尔运算由浅及深,深入解析,图标瞬间高大上!


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


UI设计规范

博博


惹不起的设计师 2017-02-20 15:03:14

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


UI设计抛开视觉设计不谈,更多的是尺寸、适配等一些问题。这些问题往往是初学者比较难以理解的问题。更多的应用于简化开发过程、使多个产品拥有一致的体验,是落到实处的东西。由于负责各个产品线的产品经理并非同一人,如果此时设计师们又是渗透到各个产品组中,那么产品之间的体验就根本让用户感觉不出是一个部门设计开发出来的。规范是大型项目必须的,可以简化开发成本、减少各个部门之间的沟通成本。

这是你苦苦追寻的UI设计规范,赶快收藏!

这是你苦苦追寻的UI设计规范,赶快收藏!

这是你苦苦追寻的UI设计规范,赶快收藏!

这是你苦苦追寻的UI设计规范,赶快收藏!

这是你苦苦追寻的UI设计规范,赶快收藏!

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


2018年UI设计趋势概览

博博

2018年UI设计趋势概览

嗨兔科技 2018-06-11 10:41:59

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


互联网产品的用户界面设计趋势是根据用户的不同需求而不断变化的。在仔细分析了过去几年用户界面设计的趋势和创新之后,我们可以发现其背后的一些规律,2018年UI界面设计的趋势如下。

2018年UI设计趋势概览

渐变色

在过去的几年里,越来越多的设计师在设计作品时采用了色彩渐变的方法,今年的流体渐变更是风靡全球。即使你只选择了一种颜色,也可以在色彩渐变和不同图片的帮助下,营造出出丰富的层次结构感,绘制出一幅令人赏心悦目的画面。因此,色彩渐变的流行之风不仅在席卷了2017年整年,还将会在2018年继续流行下去。

2018年UI设计趋势概览

icon由线转面、刻画细节

现在的ios12中,采用了面性图标,未选中和选中状态只有颜色上的区分,并且图标更加圆润。目前很多用户界面已经给页面底部标签栏的icon加上微动效底部标签栏icon不仅有微动效,十分有意思,符合当下95后00后的用户心态。同时细节的设计带给用户的感受也会上一个档次。

2018年UI设计趋势概览

透明度+重叠

字体、图形以及颜色的重叠,不仅可以使界面看上去更加醒目鲜明,还可以营造出一种空间感。 相同元素的重叠,再辅以阴影,也会使整个APP界面的设计产生更多的奇妙感,牢牢抓住用户眼球,给他们留下深刻印象。因此,用户体验设计中,不同元素的重叠将会成为2018年的趋势。

2018年UI设计趋势概览

卡片+投影相结合

ios12中采用了大圆角卡片设计,它不再像过去MD中的小圆角那样呆板,大圆角让设计更加轻快大气。相信大家已经看到了很多卡片都使用了投影这一手法,轻微的、似有似无的投影,不会被用户立即察觉,但是会给设计增加深度,形成层叠的关系,更加醒目,可以更好的抓住用户的注意力。

2018年UI设计趋势概览

插画风格

插画风格运用的越来越广泛,适用于app当中的启动页、缺省页、banner图、专题头图、弹窗插画、icon等等,UI界面有各式各样的插画风格——如手绘风格、简约风格、MBE风格、剪纸风格和孟菲斯风格等。这些插画风格的使用不仅使APP更加有趣和与众不同,同时也赋予了用户界面个性,这就在界面设计层出不穷的当下能够给用户留下更为深刻的印象。

2018年UI设计趋势概览

较强的颜色或字体大小对比

强烈的颜色或字体对比也可以帮助设计师设计出优秀的用户界面来吸引用户的注意。例如,添加不同样式、类型、大小的字体,也可以传递层次和空间的感觉。而不同类型和风格的配色也会形成鲜明的对比,使整个设计更加丰富多彩和引人注目。

2018年UI设计趋势概览

3D效果正流行

今年C4D大热,相信大家已经感受到了,今年双十一很多商家都使用了3D效果,有的还加上了动效,可以让你全方位、多角度、更加真实的观察商品。目前还不会C4D的设计师们,为了提升你的竞争力,有必要学起来了,毕竟技多不压身。

2018年UI设计趋势概览

交互动效

给APP的图标、字体、照片和按钮添加动画或交互总是对用户有着积极的影响,因为它能带用户更多愉快的体验。它的几点特性:快速且流畅、恰到好处的反馈、提升操作感受、提供良好的视觉效果。所以这一趋势在2018年还将继续流行下去。

2018年UI设计趋势概览

动态视频

一般小视频使用在启动页多用于第一次打开app的场景,对用户的代入感较强再如由动态图片转变成动态视频,图片中有少量的动态元素,仿佛赋予图片生命,比较唯美和贴近现实。手机banner设计上也会采用动态视频进行展现,方便360度的查看商品,刺激你剁手的欲望。

2018年UI设计趋势概览

VR/AR/VUI是未来的大趋势

众所周知,现在VR(虚拟现实)和AR(增强现实)VUI(语音交互设计)大火,它们的核心都是计算机视觉和听觉。VR目前在娱乐领域被使用,而AR将会真正影响我们的工作和生活,多用于多媒体、市场营销、教育等方面。VUI在医疗和户外活动方面会发挥出前所未有的用户超级体验。

2018年UI设计趋势概览

我们为创造者和变革者而生,我们帮助企业制定用户体验策略,为用户创造精彩的数字体验,并通过品牌设计与用户建立情感的连接,用设计驱动商业策略的成功。

2018年UI设计趋势概览


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




UI设计如何选择界面布局样式?

博博

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

一起学设计 2018-03-15 17:32:59

什么是界面布局样式?

界面布局样式是指用于区分信息内容,层次的板式设计的具体方式。

总结和了解目前常用的界面布局样式,可以让设计师快速决策,选择合适的设计方式。

界面布局样式有哪些?

UI设计如何选择界面布局样式?

一.卡

利用「卡」设计界面,对应的是现在流行的「卡片式设计」,比如:APP Store 的 Today 页面。

大海将从以下 3 点描述卡片设计的优势:

  • 灵活性

  • 信息区分

  • 操作性和趣味性

灵活性

示例如下,分别是 Instagram,知乎,微博的首页。

UI设计如何选择界面布局样式?

Instagram 的「推荐用户」模块,知乎的「知乎书店」模块,微博的「问答」模块,都利用了可以横向滑动的卡片设计,打破了订阅流信息垂直展示的限制,从而展示更多的信息。

信息区分—信息类型

示例如下,分别是天猫,严选,微信读书的个人中心截图。

UI设计如何选择界面布局样式?

这三个「个人中心」的设计,都利用卡片设计,对不同类型的信息进行了区分和归整。

  • 天猫:第一张卡片式用户个人信息,以及用户自己收藏的内容和足迹数据;第二张卡片都是订单数据;第三张卡片是运营卡片,用于专门的大型活动的内容展示;

  • 考拉:第一张卡片是用户个人信息,以及用户自己收藏的内容和足迹数据;第二张卡片都是订单数据;第三张卡片是用户相关的其他信息;第四张卡片是卡拉提供的服务。

  • 微信读书:第一张卡片是用户个人信息;第二张卡片是用户账户的基本数据;第三张卡片是用户自己生成的相关内容;

信息区分—时间

示例如下,分别是 APP Store,微信公众号,微博的截图。

UI设计如何选择界面布局样式?

这三个设计,都把复杂的内容信息,用卡片设计的形式,按照时间维度进行了整理和排序。

操作性和趣味性

示例如下,分别是支付宝,ZUO,探探的截图。

UI设计如何选择界面布局样式?

  • 卡片是一种模拟物理世界的设计形式,拥有可操作隐喻,可以被覆盖、堆叠、移动、划去。

  • 支付宝卡包:模仿物理世界真实的银行卡设计,利用用户已有的银行卡查看习惯,让用户快速理解和查看已绑定的银行卡

  • ZUO:「ZUO」是一款小众的,有趣新鲜创意的内容分享产品。主打追寻更美好的可能,产品设计别具特色。左滑卡片可以切换内容的设计,让产品体验更加灵动有趣。

  • 探探:一款陌生人社交软件,广告主打:左滑不喜欢,右滑喜欢的体验,凸显自己在同类型软件中的体验差异化,用户的感受更加新鲜有趣。

卡片设计的反例

自从 iOS 11 之后,卡片设计的趋势就被推向了高潮。设计网站上有很多卡片式设计作品出现。

卡片设计经常会呈现出比较好的视觉效果,但是卡片设计用的不好,会导致浪费空间,降低效率。

示例如下:是大海从 dribbble 上找来的设计,通讯录的设计利用了卡片设计。

当用户需要寻找联系人时,呈「Z字型」阅读曲线,远没有微信通讯录的「直线型」阅读效率高。

UI设计如何选择界面布局样式?

二.线

「线」指的是 APP 设计中最常见的「分割线」,在分割线当中可以分为两类:

UI设计如何选择界面布局样式?

贯穿式

「贯穿式」是指,线长度贯穿屏幕,左右边距为零。贯穿式分割线可以让被分割的信息的独立性变强。

示例如下:分别是豆瓣的首页,网易云音乐的动态截图。

UI设计如何选择界面布局样式?

两者的共同点是,每一块信息的内容较多,关联性弱。需要用贯穿式分割性,让每一个信息内容,更加独立。

内嵌式

「内嵌式」是指,线的左右边距留有空隙。内嵌式分割线,可以有助于信息阅读的流畅性。

示例如下:分别是 APP Store 今日主题的列表页,36Kr 的个人中心页面。

UI设计如何选择界面布局样式?

贯穿式和内嵌式经常是同时使用的,如下图:网易严选的填写订单页面

UI设计如何选择界面布局样式?

图中列表「商品合计」「运费」是相对关联性较强的,因此这两者之间用了内嵌式分割线。「我要开发票」和它们之间是相对独立的,因此使用贯穿式分割线。

分割线设计的反例

分割线设计是界面当中最常用的元素,大海看了这么多APP,截了这么多图,都没有发现界面中一根线都没有使用的产品。

分割线设计要注意是否应该使用,以及使用时线的颜色,粗细。

下图中:知乎的「个人中心」,来源于网络的日历设计。

UI设计如何选择界面布局样式?

知乎:线的颜色用的过重,导致当看到这个页面时,会感受到满眼都是线。改进方法有两种:把线改细,改淡;把列表文字改重。总结下来就是拉开文字和线的对比。

日历:日期本身的排版已经把信息区分的比较明显,此时不需要使用分割线。假设 「亲密」 「对比」 「重复」 足以让信息得到区分,不使用分割线,可以让你的设计,更加透气简洁。

三.间距

利用「间距」设计界面,对应的是现在流行的「无框设计」,不用分割线,纯粹用间距实现信息的排版。

大海将从以下 2 点描述其适用性:

  • 图片为主

  • 内容少且有规律

图片为主

示例如下:分别是 Instagram,爱彼迎,红板报的界面截图。这些页面中,均以图片为主。图片本身的边缘具备分隔作用。

UI设计如何选择界面布局样式?

内容少且有规律

示例 1:爱彼迎的「故事页面」和「搜索结果页」,两者都只有 2 中信息板式。内容少且有规律。

UI设计如何选择界面布局样式?

示例 2:轻芒的「分类页」和「类别首页」,分类页只有一种板式,并横向排版展示。类别首页只有一屏信息。

UI设计如何选择界面布局样式?

总结:卡,线,间距都是页面当中基础元素,希望本篇文章可以帮助设计师掌握和了解这 3 个基础元素的适用性。在设计执行中,更加风驰电掣,如沐春风。


UI设计师如何有效的跨团队、多角色沟通?

博博

UI设计师如何有效的跨团队、多角色沟通?

一起学设计 2018-03-19 17:55:35

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

作为设计方接口人,我近期参与了某产品新版本的交互设计及开发跟进工作。该项目的产品规划、设计、开发、运营由京深两地四方多个团队合作进行。结合自身项目经历,现将我对跨团队多角色沟通的感悟与经验加以总结,希望对大家有所帮助。有效沟通是提升工作效率的基础,尤其是鹅厂这种业务涉及多地、对外多有合作的大型公司,进行跨团队的、多角色转换的沟通是工作常态。跨团队合作项目通常需要我们在团队内部、异地leader、内外部合作伙伴、第三方外包等多种角色间灵活调整沟通方式,运用有效的沟通手段,以确保沟通效果。

背景

有效沟通是提升工作效率的基础,尤其是鹅厂这种业务涉及多地、对外多有合作的大型公司,进行跨团队的、多角色转换的沟通是工作常态。跨团队合作项目通常需要我们在团队内部、异地leader、内外部合作伙伴、第三方外包等多种角色间灵活调整沟通方式,运用有效的沟通手段,以确保沟通效果。

索引

UI设计师如何有效的跨团队、多角色沟通?

本文将从有效沟通的心理建设、角色分析、流程搭建+工具沉淀三个层次展开。

心理建设

有效沟通的两点认识

为“传”而“达”

沟通是信息的有效传达。“传”是手段,要求沟通时需阐明观点;“达”是目的,指明沟通旨在使人通达理解。沟通中出现的自说自话、固执己见,通常是偏执于“传”,而忽视了“达”。需要明确的是,所有的沟通,都应该以接收方更好的理解接受为目的,而不是自顾自的滔滔不绝。

减少损耗

信息传达的过程伴随着信息的损耗。因此,在沟通的各个环节都需注意减少损耗,提升触达率。一方面,要理清自己的表达重点和思路,减少信息的输出损耗;另一方面,要从接受方关注点出发,提升对接受者的信息触达;此外,还要灵活切换沟通方式、正确处理意见分歧等,尽量减少信息在传递途中的折损。

UI设计师如何有效的跨团队、多角色沟通?

跨团队多角色沟通的基本态度

跨团队——秉持中立合作的态度

  • 中立——团队不同,诉求不同,秉持中立的沟通态度,不要因个人偏向导致无意义消耗。

  • 合作——以同理心赢得各方的信任,避免抵触情绪的产生,营造良好的沟通氛围。

  • 产品目标导向——对有争议的问题点,应综合权衡用户体验、产品目标和开发成本,以产品目标为第一要义。

多角色——认清各方关注点的差异

  • 理解各方差异化的核心诉求——对不同团队角色的沟通中应有不同的侧重点,灵活的转换角色,做有针对性的输出表达。

  • 对内交流——以产品目标为导向,保证内部一致;对上汇报——重点明确,避免流水帐;对外沟通——目标明确,内部一致,有针对性的沟通,避免互相拆台或鸡同鸭讲。

角色分析

项目组成员角色模型

项目伊始,在融入团队的过程中,应注意理清项目组内的不同角色,明确汇报对象,做好任务分工,理清利益关系,协调各方诉求。

(具体项目组角色模型可能涉密,略)

各角色核心诉求及沟通侧重点模型

不同角色的核心诉求不同,也因此在对不同角色沟通时也应该有所侧重,以本项目为例:京深两地四方的所有成员,可大致划分为如下七种角色。

UI设计师如何有效的跨团队、多角色沟通?

UI设计师如何有效的跨团队、多角色沟通?

各角色核心诉求及沟通侧重点小结

团队角色 核心诉求 沟通侧重点
leader 把控项目进度、确保项目实现 进度同步、资源申请、问题确认
设计负责人 推进项目进行,落实产品功能 进度同步、问题评审、资源协调
视觉 确保视觉呈现 视觉反馈、问题评审
技术支持 提供技术支持和监督 寻求技术支持、评估开发成本
产品经理 推动项目进行、维护运营侧利益 功能确认、开发协调、运营活动落实
前端 降低前端成本、减少反复 跟进前端进度、帮助协调资源
后端 规避后端风险、降低开发成本 前端实现确认、开发问题跟进与协调

流程搭建

有效沟通流程模型

在有效沟通流程模型中,我按筹备、执行、跟进三个阶段,绘制出体验地图,将沟通中的关键节点按行为、心理、情绪、方法、工具五个纬度拆分,梳理各节点需注意的问题,以及相应的有效沟通方法和工具。(详情请点击查看大图)

UI设计师如何有效的跨团队、多角色沟通?

UI设计师如何有效的跨团队、多角色沟通?

筹备阶段——明确目的,同步信息

  • 明确沟通目的。无论是同步邮件、电话会议还是IM群聊,都需要在发起前明确目的,列好问题清单,带着目的沟通。如:多方电话会议前,应事先知会各方会议主旨,准备会议提纲并在会议开始时向各方阐明,为会议提供清晰的行进框架。

  • 提前同步信息。信息同步是沟通的前提。依据沟通目的准备沟通所需的文档,根据需要提前同步,尽量减少因信息不对称带来的时间浪费。明确易读的设计输出、正式沟通前与各方单独的预沟通、提前邮件同步告知等,都是有效信息同步的手段。

执行阶段——抓大放小、促成共识

  • 对待争议,抓大放小,避免僵局。评估争议点时,先不要基于反驳避免情绪化表达,适当发问:为什么做?为什么不做?不做之后有什么后果?理智全面的做出评判。给问题点评定优先级,抓大放小,集中精力推进主功能,高成本、低优先级的细节问题放到最后统一处理,避免陷入“就是要改”vs“就是不改”的无谓消耗。根据需要及时协调第三方资源进场,寻求技术支持或资深leader的建议,避免沟通僵局的出现。

  • 促成共识。无结果的沟通是无效的沟通,有效沟通应促使各方达成共识。无论是待协调、暂搁置还是需改进,都需要有一个结论明确、责任人明确、截止时间明确的沟通结论,并依此执行跟进。

跟进阶段——同步落实,自我反思

  • 进度同步,问题落实。沟通过后及时同步沟通结论,设计交付、前端交付等阶段性时间节点,需以正式的项目邮件,及时周知项目相关人员。对于已解决的问题,及时跟进验收;暂时搁置的问题,做好记录,明确时间节点和责任人;需更多资源介入的问题,及时对上反馈,申请资源解决。

  • 自我反思与补齐。每次沟通都是一次查漏补缺的过程,每次沟通后花时间反思一下本次沟通中自己在设计说明中有哪些疏忽、表述上有何不足、相关知识上有那些欠缺,以此为鉴及时调整、补齐疏漏。

工具沉淀

开发故事卡

说明:明确易读的设计说明文档

功能:产品设计说明、开发指导手册、阶段性交付走查依据

使用场景:跨团队沟通中,便于开发人员准确的理解设计意图;适合外部合作时模块化开发与阶段性交付,便于交付及走查。

使用要点:

  • 根据信息构架拆分产品模块,分别设立索引,提供产品概览,串联各功能详情页。

  • 在索引和详情页之间由超链接跳转,方便快速定位。

  • 按照功能点拆分详情页,提出功能需求,明确验收标准,说明页面细节。

  • 各页面统一编号与视觉源文件一一对应,方便快速查找。

UI设计师如何有效的跨团队、多角色沟通?

需求管理文档

说明:需求及反馈问题的规范化管理模板

功能:需求变动及问题反馈的管理模板、开发发跟进的沟通文档

使用场景:开发跟进阶段,实时记录变动的需求及反馈的问题点;设计侧定期反馈给开发人员的规范化输出文档。

使用要点:

  • 明确问题及目标效果,排定优先级依此解决。

  • 明确负责人和时间节点,保证落实。

  • 做好文档更新维护及信息同步。

  • 按阶段统一反馈调整,节约开发时间。

UI设计师如何有效的跨团队、多角色沟通?

关注点推进模型

说明:不同项目阶段明确核心关注点的虚拟模型

功能:辅助聚焦当下关注点,避免陷入不合时宜的细节或宏观问题

使用场景:从宏观到微观的产品设计过程中,帮助梳理各个阶段需沟通的核心问题,沟通时陷入细节或反复争论时的自查工具。

使用要点:

  • 做好关注点的的逐步推进:探讨信息构架时就不要在交互样式上反复拉锯;讨论交互方式时就不要过度关注视觉细节。

  • 不过早陷入细节。优秀产品的细节固然需打磨,但从0到1实现一款产品的过程中,将有限的资源和排期消耗在不合时宜的细节权衡上,得不偿失。

  • 同样,若因执行时的设计挑战需调整产品上层,也需主题限定问题范围,不要因宏观问题上的反复而影响执行效率。

UI设计师如何有效的跨团队、多角色沟通?

优先级评估模型

说明:不同项目阶段评估需求优先级的KANO衍生模型

功能:借助KANO模型分析思路,对需求优先级提供排定依据

使用场景:设计阶段样式取舍、开发跟进阶段需求调整的先后顺序、应对分歧如何抓大放小,都可以借助优先级评估模型辅助评估。

使用要点:

  • 不同项目阶段,不同沟通对象对同一需求优先级的评定标准不同,因此应注意根据项目阶段和沟通对象灵活调整。

  • 不同产品在用户体验与产品目标取舍上有所区别。一般而言,2C产品更注重用户体验,而2B产品则可能更注重实现产品目标,因此应注意具体产品具体分析。

UI设计师如何有效的跨团队、多角色沟通?

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


产品经理分析产品积分体系

博博

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


积分的作用在整个产品的过程中主要是希望是围绕着拉新、留存、促活去做的,配合着主打新功能等等根据产品的差异而差异化。从用户为出发点,将积分可以分为两大块:一块是获取、一块是消耗。

从用户角度出发,了解关于产品积分体系的事

首先,就积分而言,是用户通过完成某些任务或手段来进行对应积分点的获取,再通过相关的手段进行消耗的一个过程。

从用户角度出发,了解关于产品积分体系的事

所以从用户为出发点,将积分可以分为两大块:一块是获取;一块是消耗。

下面针对两点分开来说:

一、获取(主要是获取的方式和对应的规则)

获取方式,大类可根据用户完成对应任务类型分为:

1. 新手任务类(这是一个帮助用户熟悉产品同时激励用户使用产品的过程)

  • 绑定手机;
  • 绑定邮箱;
  • 上传头像;
  • 首次消费/发文/分享等等对应产品核心功能的首次使用;
  • 完善个人信息。

根据产品核心功能和侧重点的不同而不同,一定要区别哪些信息内容是我们想从用户处获取的核心,哪一些并不是很重要。不要人云亦云,不要有“别的产品有了所以我也要有”的思想,思考一下为什么你要需要这个任务。可以多参照其他积分体系完善的对它们进行整理归类,之后结合自身产品特性再去做自己的。

2. 日常任务类

  • 签到(这几乎是最基础最常见的);
  • 对应产品核心功能的使用相关的任务。

3. 运营活动类

  • 节日相关类;
  • 产品特定日期相关类(周年等等)。

这个具体需要配合运营相关人员的推广活动等等进行部署调整,但是一定要做好部门间的对接工作。因为活动对应分配的积分比例等等影响很深远,一定要思考好本次活动预计需要分发出去多少积分,达到怎样的活动效果?对积分整体有什么影响?存在那些可能出现的问题和漏洞?怎么去防止薅羊毛党?等等。

4. 特定激励用户类

这类主要是,例如:生日,或者和用户建立联系的特定日期(例如:几周年等等)。

5. 均衡刺激积分的流通

这类主要放在消耗中讲,主要是抽奖类把积分当作一类奖品进行兑换。

以上算是大致讲了积分的获取,要领就是结合产品结合情景去进行设置。对于初次设计的人来说,就是先要找到经典体系完整的有相关性参考价值的产品的积分体系,进行总结整理思考,然后再进行自己的设计,而且尽量多看多整理几家。

二、消耗

消耗的话根据产品的自身属性的不同,表现形式差异性比较大所以我的列举不一定人人都适用,仅供参考。但是本质都是一样的,都是进行积分的消耗。

1. 兑换商品

  • 虚拟商品;
  • 现实商品。

兑换的手段可以是纯积分兑换,可以是积分+现实货币。对于兑换商品的选择也是很重要,如果兑换给出的商品都让用户提不起来兴趣,那么无疑是失败的。好比二次元类搞活动积分兑洗洁精就跑的很偏了,所以选品也很重要。

虚拟产品的兑换最好是围绕着核心功能or下一步主打的功能来比较好,再或者说积分体系和会员体系是相辅相成的,可以在兑换商品,这里加入兑换会员增强之间的联系。会员体系是另外一大块了在这里就不说了。

2. 抽奖

抽奖是最好的进行积分流动的手段,如果用户只是一味的累积积分,无论是产品所提供的虚拟商品,还是现实商品都不和他心意提供另一个出口给用户。或者前两者门槛过高或需要现实货币,用户不愿花费,抽奖都是一种低花费积分小概率抽中商品,利于积分生态的流动的措施。

具体的抽奖形式就很多了什么刮刮奖啊大转盘啊,记得要控制好概率分配噢。

三、注意点

(1)对于整个积分体系上面都是细节,在实际操作中第一步,要确定的是在公司的战略上,愿意每年投入多少钱在里面,或者对于已经盈利的公司,是拿出盈利里的多少百分比来进行用户的一个回馈。

同时,在投入时,希望得到的反馈效果是怎样的,都要制定好。这个可以根据数据后期的变化再进行调整,但是一定要有这样一个概念。去估计整体的量,在这个预算下进行后期的设计,同时在后期设计完成后,在进行计算在极端情况下(两个极端)和预期情况下,和公司整体战略偏差是否在可接受范围,如果不在那么再进行调整。

(2)积分体系可以看作是产品内部的货币体系,所以要注意积分膨胀和积分紧缩的问题,要是积分的价值尽量保持在一个波动不大可控的范围内。无论是膨胀还是紧缩,都会影响产品和用户给产品带来不好的影响。请重点关注膨胀,因为多数会出现的情况时设计不当积分超发

(3)做好相关数据的管理实时反馈,用户的领取积分数据,消耗积分数据等等,细节数据需要自己去扣清楚都是有价值的数据。后台相关页面设计到位,及时将数据反馈给相关人员进行沟通。

(4)做好风控体系,别让羊毛党毁了整个体系。

(5)不要让你的积分体系一成不变,在固定的体系下,要用不同的活动内容和兑换商品的推成出新,让用户感觉到新鲜感。如果什么都不变化不抓着节奏走,那么用户会失去兴趣。具体要和运营等等相关人员进行讨论。

(6)积分的规则一定要完善没有漏洞,不论是给出的任务还是消耗的过程一定不要有歧义,一定要仔细!!!!!!这点很重要!!!!

(7)积分体系的任务应该是对用户的留存,活跃和新增起到帮助作用的。所以不可能兼顾到所有的注册用户,一定要分清楚主次,谁是主要服务对象,服务的目的是什么等等。

好久没有写过文章了,逻辑有不顺畅,内容有错误的地方欢迎大家指出,互相学习,谢谢阅读。

本文由 @judyyyy 原创发布于人人都是产品经理。未经许可,禁止转载

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


为何如今的产品总给人千人一面的感觉?

博博

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

编者按:这篇来自产品设计师 Eugen Eşanu 的文章解开了我长久以来的一个疑惑,其中的思考和经验值得我们共勉。结尾的 One more thing 是我额外补充的内容和一点想法,和当下产品设计的困境相关,也是试图补完这篇文章,希望能给你一点帮助。

为何如今的产品总给人千人一面的感觉?

当你在寻找一个能够满足你需求的应用的时候,会不会因为太多相似的产品而无从选择?当你想要在两个甚至更多相似的产品中进行选择,一切都显得那么困难。而唯一能够进行快速区分的因素似乎是设计,但是紧接着会发现连设计都是那么相似。

为什么市场上所有的应用看起来都长的同一副面孔呢?

在回答这个问题之前,我想简单澄清一些事情。为了创造出能够解决需求的产品,通常需要采用以人为本的方法来进行设计,但是事实上,那种状态太过于理想,几乎没人能够真正做到。

以人为本的设计方法,确实能够极富创造性地解决问题。当采用这种方法来为目标用户进行设计,最终能够得到了一个为这些用户量身定制的解决方案。但是,这种设计方法需要设计者具备无与伦比的同理心来真正站在目标用户的角度来思考问题,由此获得大量的想法和灵感,建立一大堆可能有效的原型,同目标用户分享你正在做的事情,验证你的感受和想法,最终将你的创新的解决方案推向世界。但是这是理想的状况。

那么为什么世界上那么多伟大的公司,依然无法真正采用这样的方法成就真正优秀的产品呢?因为几乎所有的产品身上都有一种病毒,它的名字叫做特征蔓延。

为何如今的产品总给人千人一面的感觉?

产品开发流行病:特征蔓延

特征蔓延的英文名叫做 Feature creep,它的主要症状就是不断向产品中添加功能。

现如今,绝大多数的产品,无论是物理实体还是存在于手机中的各色 APP,几乎全都面对着激烈的竞争。

激烈的竞争使得每个人都面临着压力,产品所属的企业中,从领导到产品经理再到最底层的开发者和设计师,所有人都面对着来自对手和潜在对手的压力。

这种竞争压力基本上是源自于三个方面:价格,功能和质量。非常不幸的是,绝大多数时候,这三者的压力从前到后是依次递减的。价格竞争的压力通常是最大也是最直接的,然后才是功能和产品质量,至于这个顺序意味着什么,就不赘述了。

同时,产品上线的速度和顺序也很重要。谁是进入市场第一人,这个是必须争一下的。

这样一来,想要尽快杀入市场的产品,在很大程度上是伴随着「偷工减料」的。没有足够的时间来对产品进行足够多的迭代,没有办法把系统调整到最优,没有办法把硬件缺陷都找出来,没有办法把软件中每一个 Bug 都尽量找出来,甚至绝大多数企业的领导都抱有「没事,我们随后再把问题找出来解决掉。」从电脑到汽车,从 Windows 到 iOS,从来都是如此。

没有什么 Bug 是一个补丁解决不了的,如果不行,多打几个。——Windows开发团队

为何如今的产品总给人千人一面的感觉?

当然,能够通过后期补丁解决的问题终究是少数。实际市场上绝大多数的产品确实随着补丁和修改逐步提升了,但是绝大多数仍然没有解决用户的问题。

对于特征蔓延这种病症,早在1976年就已经被发现,并且在产品设计圈当中有着非常广泛的认知。对于这种产品病有一个非常学术的描述:

特征蔓延是指一产品(如APP)的软件机能持续膨胀或增加的情形。产品基本机能以外的扩充机能,会使产品比原始设计要更复杂。长时间来看,额外或不需要的机能慢慢的进入系统中,使系统超出原来设定的目标。

假设我们拥有一个非常强大的产品团队,设计师拥有足够的同理心,开发和测试也非常靠谱,他们使用以人为中心的设计方法,探索了所有用户使用场景,并且遵循产品流程认真设计仔细测试,最终输出了一个用户想要购买的优质产品。假设这个问世的产品在各个层面上都是完美的:拥有直观的界面,良好的感觉和优秀的视觉,贴合用户的体验等等。它只有一个使命,那就是以有意义的方式满足人们的需求,让人们能够更好地生活,产品因此而走向成功。谁都想来一个。(就像解决了信号问题的 iPhone 4)

非常不幸的是,产品上市之后,各种各样的影响因素开始出现,情况开始向着并不理想的方向发展。

  • 现有的用户非常喜欢这款产品,但是他们想要更多的功能,各种各样的功能,包括带孩子。
  • 竞争对手开始推出新款,并且具备一些全新的、我们的产品所不具备的功能。从公司领导到用户都开始催我们的团队增加新功能。
  • 客户对于产品总体上是满意,但是买的人多了之后,市场趋于饱和,销售额不可避免的下降了。是时候添加新的或者创新的功能来促使用户更新或购买新版本了。

特征蔓延就是这样出现的,产品在现有的功能上不断增加更多的功能。各种各样的理由会促使产品不得不增加功能,各种各样。然后产品开始膨胀,臃肿,直到用户实在不太想用或者彻底没法用。

而在如今的市场和商业竞争中,特征蔓延并不是唯一的绝症。

为何如今的产品总给人千人一面的感觉?

竞争驱动式设计的泥潭

哈佛大学教授 Youngme Moon 认为,产品和竞品之间的攀比对抗是让产品陷入千篇一律的境地的主要原因。通常,企业为了提升产品的市场份额,会让自家产品拥有对手一样的功能,来确保竞争力。对手的团队协同软件的售价是20美元?没事,我们开发个功能一样强大的,定价15美元好了。他们的移动端的 APP 只需要加1美元就能获得?那我们的移动端版本直接免费和桌面端绑定好了。

当产品陷入和对手刺刀见红的局面之时,两败俱伤的结果就不远了。试图逐个功能和对手竞争,必然会陷入同质化的竞争,很难让用户真正爱上其中的某个产品。

这种就是竞争驱动型设计。令人遗憾的是,即使产品的第一版是以用户为中心设计出来的优质产品,在竞争驱动下诞生的后续产品,就很难赢得用户的真心了。

很多时候如果你想创造真正卓越的产品,你不得不花费更多的时间。而即使你创造出来这样的产品,在市场上也不一定能在销售排行榜上杀入前三,屈居第四是很正常的事情。那么你还愿意这么做么?

我们都听说过先发优势,但是你真的知道获得先发优势,将会付出什么样的代价么?

为何如今的产品总给人千人一面的感觉?

用1年写一册畅销书,还是花5年成就一本经典?

以写书来举例也许更加直观。当你决定写一本关于设计的书,然后登上畅销榜,名利双收,好像挺不错的。如果它的内容是之前没人写过的,并且确实比较有市场,在内容上稍加打磨,几个月后引爆设计圈似乎不是太大的问题。事实上,它上架之后,和自己的预期相差不远,挺好。不过,不知道为什么,1年之后,热点消退,这本书也没什么人买了。

换一个做法,写书的过程中可能需要勒紧裤腰带过日子,花上5年时间仔细揣摩,写一本拥有持续价值的书,然后在之后的100年时间当中,成为设计圈中每个设计师的必读书。写书的过程中,你需要专门地进行研究,仔细地调整内容,对于每个细节都精雕细琢,花费更多的时间,让这本书有对抗时间的价值。

从长远来看,只看眼前、偷工减料的公司会自然而然过时,然后被人们所忘记。浪潮过后,谁在裸泳一目了然。

为什么总忍不住添加新的功能?

和对手的对比,总能看到自家产品的缺陷,然后补完缺陷,这有什么不对么?似乎没问题,但是这种思维方式并不会打造更好的产品。更好的策略是:

专注于自家真正擅长的领域,并继续深挖自己的长处。在自己的优势领域,集中自己的研发能力,并作为营销重点。这样才能让自己的产品从平庸走向卓越,真正能在惨烈的红海中脱颖而出。用更少更精锐的功能来成就自己,而不是在成堆的功能中与对手同归于尽。

还记得一代的 Google Pixel Phone 么?他们的营销口号是「有耳机插孔的手机」,对标的正是取消耳机插孔的 iPhone ,而这个文案正是嘲讽 iPhone 的设计太过愚蠢。令人惊讶的是,随后的 Google Pixel 2 也跟着取消了耳机插孔。现在还有谁记得 Google Pixel 系列呢?

为何如今的产品总给人千人一面的感觉?

是聚焦长处,还是忙于跟随?

伟大的设计需要脱离苟且的竞争和来自客户的压力。开始专注于你认为重要的事情,以及你目光所及的远方。在你最优秀的地方,集中精力。你必须确保你的产品是一致且连贯的。这意味着领导层需要足够睿智,也足够坚定,这样才能抵挡来自用户和市场部门不断增加产品功能的各种需求。

成就最好的产品,设计者要屏蔽来自竞争对手的声音,专注于用户真实的深层需求。

不要觉得我的话是凭空而来的。Amazon 的 CEO 兼创始人 Jeff Bezos 也提到过类似的方法,被称为「客户迷恋」。在他看来,将所有精力集中在客户的需求上,而不是竞争。重点在于三个简单的问题上:「客户需要的是什么?」「他们的需求如何才能满足」「我们可以做什么来提高客户服务和价值?」Bezos 还认为,专注于客户才是首要目标,其他的问题会迎刃而解的。如果你一开始就被市场竞争吸引了注意力,很难作出真正对的决策。产品质量通常只关乎客户和解决真实的需求。

One more thing

想要从激烈的竞争中抽身出来, 创造真正独特的产品,是许多产品设计师的愿望。但是这真的不是一句话说得清楚的事情,真实的情况比我们想象中还要复杂。

竞争驱动型的设计确实是一个很难绕过的问题,驱动产品的不仅仅是领导和客户的声音,深陷市场竞争,许多时候确实身不由己。

采用以用户为中心的设计的设计流程,还绕不开一个常见的因素:最佳实践。经过前人验证、时间打磨、用户习惯之后所获得的最佳实践,是设计师和产品在很多时候必须依托的东西。比如我们如今所看到的许多表单的设计策略和汉堡菜单的使用。用户和市场已经「塑造」出了许多最优的设计策略,设计师通常会直接拿来使用,而我们感到「千人一面」的 UI设计当中,确实有各种最佳实践所「作出的贡献」。

为何如今的产品总给人千人一面的感觉?

包括我们现在正在不断探索的动效设计,虽然力图在视觉和体验上有所创新,但是早在近百年前,迪士尼的动画设计师们已经总结出一套人性化动画设计的策略,实际上我们今天许多优秀的动效设计,依然是围绕着这一套「最佳实践」来进行设计和重设计的。

为何如今的产品总给人千人一面的感觉?

违反「最佳实践」的特立独行的设计并非不可,只不过它通常需要遵循「每次仅只能打破一个规则」的原则。在用户已经被市场培养出大量习惯的前提之下,大量采用反直觉、反习惯的设计,只会让产品死的更快。

那么是不是就没有办法了呢?当然不是。新鲜有趣的、独树一帜的设计并非没有办法设计,设计师需要在最佳实践以外的部分寻求改变,探索可能性,甚至等待契机。不同的设计趋势、元素、技法、排版布局、配色、动效进行多样化的组合,依然可以创造出让人眼前一亮的设计。但是这还不够。

为何如今的产品总给人千人一面的感觉?

早在上世纪30年代的时候,包豪斯设计学院的先哲们就已经提出过「形式追随功能」的设计箴言。这句话强调的是设计的科学性,便捷性和经济效益,而不再是围绕着装饰性和简单的形式感来进行设计。在今天这个用户体验至上、以用户为中心的设计趋势之下,UI 和视觉所代表的「形式」所追随的「功能」应该是用户的真实需求。而在这个语境下试图创新,或者恰如其分地融入一些贴合场景和目标的艺术元素,也许是个不错的突破口。

正如同在上一篇文章《熟知用户行为的这7个层面,你的设计才会走进人心》中所说的,客户买钻头的时候,需要的并非钻头而是洞,同样的,用户下载一款阅读APP 的时候,他的真实需要并非是阅读器,他需要的是内容,是信息,是满足他求知欲的文章,或者填补碎片时间的有趣的故事。

为何如今的产品总给人千人一面的感觉?

内容为王这句话早就已经不是口号了。围绕着内容做设计已经成为了诸如 Medium 和 Twtter 这样的企业的新策略,而国内的许多一线企业也开始拥有自己的「首席内容官」。让设计追随内容,让真正吸引用户的东西来撬动产品,拉升体量,才是正途。

设计和内容的结合方式多种多样,根据内容所需要的语境来搭配相应的设计是目前已知的最常见的做法。根据内容本身所具备的故事性和环境特征,视觉化地表达,让 UI 和视觉服务于内容,是许多成功的设计所验证过的技巧。

比如下面的 voyage-electrique这个网站,借助 C4D 构建的 3D 可交互式的场景来呈现电力系统的运作,清新可爱的画风和令人愉悦的音乐让原本沉闷的主题显得颇为有趣,让人心生好感的设计,使得相关的信息更容易被用户接受。流程化的信息呈现方式隐约具备了故事性的表达,即使你并不懂法语也会流连忘返,在点击和探索中多停留一会儿。语言苍白,不如点进去看看。

为何如今的产品总给人千人一面的感觉?

最后需要注意一个问题:人类先天就是喜新厌旧的生物,再新鲜有趣的东西,在获得之后都会快速地适应(适应性认知偏差),并不再感到新鲜。在内容和设计策略上,适时地注入新鲜的内容(不违反基本设计规则和产品方向的前提下),是维持活跃度而必须做的事情。

原文作者 : Eugen Eşanu

译者/编辑 : 陈子木

译文地址:https://www.uisdc.com/design-product-like-everyone-else

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档