设计思维

这些UI和UX趋势,在2019年最值得关注

雪涛

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


当你的产品短时间内无法使用时,如断网、跨平台无法分享等等。用户可能会因而产生挫败感,产生焦虑不爽的负面情绪。如何安抚用户情绪?如何拉近用户和平台的距离?如何改善或提高用户体验呢?本期案例,就分享一些有趣的小彩蛋、微交互,让你灵感爆棚!

往期回顾:

  1. 每月更新!10个记忆深刻的产品设计神细节!(1)》
  2. 《每月更新!10个记忆深刻的产品设计神细节!(2)》

文章目录

  1. 我见过最赞的招聘启事,来自程序员的别样浪漫
  2. 断网环境下,Google浏览器页面的小恐龙可以打游戏哟
  3. 「亲戚计算器」?原来小米还有这么有趣的功能设计
  4. 揉成一团的废纸,会让你联想到「删除」这个动作么?
  5. 支付宝的小无奈
  6. 优优教程网首页里藏着的可爱表情,你发现了几个?
  7. 2233娘真是贴心的小姐姐(*╹▽╹*)
  8. 让人意想不到的团队展示hover效果
  9. 时间走着滴答滴,iPhone的时钟藏着自己的小秘密
  10. 有道词典也卖萌,一句有温度的文案会有怎样的力量?

我见过最赞的招聘启事,来自程序员的别样浪漫

如果不是互联网从业者,大概你永远都不会发现百度主页的代码控制台(console)里藏着那条最浪漫的招聘启事。因为只有拥有开发网页习惯的人,才会在浏览喜欢的网站时按下F12 调出网页代码查看。所以这条百度针对程序员的招聘被写进网站首页代码的console里,可谓是绝对精准的招聘广告投放了。

据说这个彩蛋的设计并非百度的独创而是 Google 先使用过的「小心机」,可是由于无从考证,所以小编并不能确定是哪家公司有才华的程序员小哥哥想出了这个妙计(知道的大神麻烦留言告知哦)。

但不得不承认的是,很多时候我们都对程序员有太多刻板印象的误解。那些看起来「木讷无趣」的程序员们认真起来,真的可能是最浪漫的人呢。

断网环境下,Google浏览器页面的小恐龙可以打游戏哟

Google Chrome 是一款由 Google开发的 Web浏览工具,大气的界面设计、良好的使用体验以及强大的插件扩展功能,使其受到大量用户的喜爱。在完善产品功能的同时,Google 的设计师们也不忘花费一些「小心思」让产品更加有趣味性:在浏览器出现错误或无网的情况下(想试试么?断开Wi-Fi或者拔下网线看看),我们会看到这只可爱的像素小恐龙。

小恐龙出现时是静止的,但只要你按下键盘的左右键,这只小恐龙就会跑起来,而操控上下键它就能躲避路上的障碍物。当出错页面变成可爱的小游戏,原本焦虑不爽的负面情绪好像也就没那么严重了。一旦网络恢复,浏览器会自动刷新到你所要浏览的页面。真的是超贴心的设计了。

「亲戚计算器」?原来小米还有这么有趣的功能设计

小米计算器内置「亲戚计算器」的功能,各种复杂的亲戚关系帮你一键解决。老婆弟弟的妻子应该怎样称呼呢?相信很多人都有过类似的对亲戚关系产生疑问的困扰。

梳理亲戚关系有时候真让人头大,小米手机就很贴心的在系统里自带了「亲戚计算器」。将日常的复杂关系都罗列了出来,真是符合中国特色的计算器设计呢~

揉成一团的废纸,会让你联想到「删除」这个动作么?

「作文纸条」App对于每日信息与文章的推送有着自己独特的设计逻辑,如果推送内容用户当天未读,系统会将推送内容自动移到「废纸篓」里。为了让用户在浏览「废纸篓」内容时,明确感知到被删内容与正常内容的差别,躺在「废纸篓」里的信息视觉上模拟了揉皱纸团的形象。

如同我们在现实生活里,会将写作时不满意的内容从笔记本中撕掉,并揉成纸团丢进垃圾桶的行为一般。将用户熟悉的真实生活里的行为状态,移植到虚拟的交互设计里,会使用户与产品的交互过程更形象生动。

支付宝的小无奈

偶然在支付宝的芝麻信用里发现满700分,就可以免押金租用一些数码产品了。觉得很不错想分享这个信息给朋友,就点了一下转发微信好友,结果发现微信不让分享支付宝的信息。

本来分享受限的挫败感让人心情很不好,但当看到支付宝很无奈的提示文案「微信又不让分享了,整个人都不好了」,不愉快的心情立马被逗乐了。相较之前微信分享失败的一串链接,这样幽默的微文案提示真的可爱多了呢~

优优教程网首页里藏着的可爱表情,你发现了几个?

当初在制作优优网首页的时候,为了不让 hover状态(鼠标悬浮)过于无趣,分别在「灵感频道」「教程排行榜 」「软件排行榜」的 hover状态里设计了不同的3个小表情,而且设计者大有来头,正是人见人爱、花见花开的美丫姐。

她机灵的调整了图标状态后,从后台数据来看,这里的点击确实停驻时间长了一些,相信让用户会心一笑的同时,也拉近了用户和平台的距离感。不妨在你的下一个案例里也试试哟~

2233娘真是贴心的小姐姐(*╹▽╹*)

登录网站或应用在输入密码时,无论周围环境如何,我们总会潜意识里产生一丝不安全感。B站对于这个问题的处理方式显得十分可爱,在用户登录账号输入密码时背景里的2233娘会出现双手捂眼的小动画。整个输入密码的操作其实与其他应用可能并无差别,但因为有了这个蒙眼动作的心理暗示作用,用户会感到自己的隐私受到保护与尊重从而产生安全感。

让人意想不到的团队展示hover效果

drygital设计工作室的网站有着个性又炫酷的视觉与交互效果。团队展示界面的 hover效果,就让人意想不到眼前一亮:当鼠标的光标移到单个成员的半身像时,原本正襟危坐的照片会变成另一张,展示该成员个性或喜好的搞怪照片。

原照片展示了团队成员在工作中严谨专业的一面,而 hover效果呈现的图片则展示了成员们私下生活里幽默有趣、个性鲜明的另一面。这样的设计不仅突出了团队成员的个人特色展示,利于团队的归属感与凝聚力提升,也展现了团队的开放包容与活力创新。

时间走着滴答滴,iPhone的时钟藏着自己的小秘密

大家都知道 iOS系统的时钟桌面图标会始终显示当前时间,但很少有人关注过时钟图标里秒针的走动方式。在常规状态下,时钟图标的秒针会呈现扫秒式地转动;但当桌面图标处于长按状态的晃动效果时,小时钟的秒针会立马变为跳秒式滴答滴答地走动起来。

据说这个隐蔽的小细节设计是想表达向传统时钟的运行模式致敬的意思。机械钟秒变石英钟,你 get到了 iPhone时钟的小秘密了么?

有道词典也卖萌,一句有温度的文案会有怎样的力量?

似信息崩溃,或加载缓慢的问题,在产品实际使用中实在在所难免,一旦出现,用户的好情绪一定会受到影响。在这种时刻,一句生动而有温度的文案就是可以安抚用户情绪、改善使用体验的利器法宝。


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

 

产品设计师必备的模态体验知识

雪涛

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


很多设计师根据直觉进行产品设计。虽然大部分情况下是没问题的,但是已经证明了的通用标准可以更好的帮助你从逻辑上构建有理有据的UI解决方案,而不是仅仅依赖于你的直觉。


本文我们将探讨UI设计中的模态通用标准,讨论为什么仅有两种类型的原因,并且分析App和网站在将信息体系结构和用户信息流转换为直观的用户界面是如何失败的,本文将使用“Purrrfect”这个产品来讲解。


两种基本屏幕类型:模态屏幕、非模态屏幕


基本每个可视化窗口几乎都属于这两类中的一个。为了理解模态与非模态的区别,我们首先要定义模态屏幕。


什么是“模态屏幕”?

模态屏幕示例模态屏幕示例

模态屏幕有不同的形状和大小:

全屏模态视图(左1)

弹出窗口(左2)

气泡弹窗(左3)

灯箱弹窗(左4)

快讯/通知

...


模态屏幕和非模态屏幕这两种类型看起来似乎很好理解,它们都从属于App的主窗口。但是有一个重要的区别:


模态窗口

创建一个禁用主窗口的模式,模态窗口作为前面的子窗口使其保持可见。用户必须先与模态窗口进行交互才能返回父级应用程序。

 —— 维基百科


大多数模态屏幕,特别是在桌面应用上可以轻松识别,因为它们覆盖主窗口并且可见:主窗口背景遮罩的弹出窗,弹出菜单和弹出框对话框,灯箱弹框,警告等...


但是移动设备上的屏幕空间有限,这也是移动设备上的许多模态屏幕占据整个屏幕的原因。它们不再保持底层主窗口可见,所以很难将它与非模态屏幕区分开来:


Image title

iOS示例:移动设备上的模态屏幕


两者的主要区别在于屏幕的交互方式不同。虽然非模态屏幕允许用户简单地返回到父级屏幕,但是模态屏幕要求用户在返回主窗口之前完成操作(示例中为“保存”)或取消当前操作。


非模态屏幕最明显可视信息便是导航栏(示例中为标签栏)。即使在子级页面,非模态屏幕也允许用户在主导航来回跳转。另外模态屏幕要求用户在再次使用主导航之前必须关闭窗口(示例中为“Save ”或“ Cancel ”)。


为什么要使用模态?

模态屏幕解决了一个简单的问题:用户容易分心,所以有时候必须让用户全神贯注的进行操作。单一的模态屏幕正是要求人集中在单一的任务上,然后再继续其他操作。


“模态通过阻止人们在完成任务或解除消息或视图之前做其他事情来创造焦点” 

—— Apple


什么时候应该使用模态?

模态屏幕的规则我们已经了然于胸,与非模态屏幕相比,它能达到的目的是什么,应该在什么样的情况下使用它呢?


试想一下,我们正在创造一个巧妙而新颖的App:“ Purrrfect ” , 一个小猫数据库,它允许用户上传,查看和评论可爱的猫咪GIF。

Image title

资料来源:https://giphy.com/gifs/tDgXAst2PhIYw


我们App(简化)用户流程如下图所示:用户打开App,进入几个可用选项卡之一(我们的小猫数据库),点击其中一只小猫(进入详细的单一小猫视图),然后点击评论部分(进入评论部分)。

Image title

Purrrfect用户流程


另外用户可以在每个阶段执行补充操作。例如他可以在小猫数据库页面中将另一只小猫添加到数据库中,又或者他可以在小猫详情页中编辑数据。


如何分辨模态与非模态,其实没有那么容易,这些只是我个人的经验总结:对自包含过程使用模态屏幕,对其他所有内容使用非模态屏幕。


“自包含过程”是指每个操作都有明确的起点和终点。此操作有明确的时间范围,将用户从一般用户流中移出,让他专注于操作,然后再将他带回到开始的位置。


“需要特定的用户任务,决策或确认的关键信息”

——Google


对于Purrrfect App来说,这意味着主要用户流不是模态的。但是特殊的限时操作,如添加小猫,编辑小猫和撰写评论都是模态的。

Image title

在用户返回主流程之前,可以取消或保存完成所有模态操作。因此模态屏幕使用取消和保存按钮(或其他类似操作)而不是后退按钮。如果您的后退按钮在非模态屏幕中触发保存操作,您可能需要考虑使用取消和保存按钮切换到模态屏幕。如果在模态屏幕中有两个不同的操作,例如取消和保存,则无意义(因为它们会触发相同的操作)您可能希望切换到非模态视图。在这种情况下,主导航(例如标签栏)也应保持在屏幕上可见。


让我们回到我们改变游戏规则的App,Purrrfect界面如下图所示:

Image title

Purrrfect用户界面


在实际情况中,模态和非模态屏幕之间的区别通常没那么明显。例如图像全屏页面在大多数应用中都是模态的,尽管它不是进程或对话框。在一些特殊情况下,模态屏幕可能会承载页面的焦点。如果我们的App屏幕中间是没有其他操作(如编辑或评论)的情况,我们可能使用模态(全屏视图)。但由于它允许用户更深入地进入信息架构并执行各种附加操作(显示注释,编辑  ......),因此它不再具有明确的终点,因此它是主流程的一部分,所以应该选择非模态视图。


设计师有责任了解清楚App的流程,评估某个操作是否应该单独展示,从而决定来模态是否有意义。如有疑问,请记住Apple的指导方针:


尽量减少模态的使用。通常人们更喜欢以非线性的方式与应用交互。只有在获得某人注意、任务必须完成或放弃,以继续使用应用或保存重要数据时,才考虑创建一个模态来连接上下层级。

——  Apple


虽然不需要严格区分模态和非模态,界面也可以完美展现。但是模态的概念深深植根于Apple,Google,Microsoft等企业的界面生态系统中,且用户已经形成了相应的期望值。


如果Apple时不时的违反自己的规则,那么Apple将不会是Apple。例如,新版App Store在“今日”标签中打开亮点作为模态屏幕,但仍然允许用户在屏幕底部导航到下一步(没有明确的终点)。这样用户就可以在模态屏幕内部更深入地导航到其他流程。从推荐以外的其他内容打开相同的App屏幕会导致屏幕显示为非模态屏幕。这将保留标签栏和后退操作(再次单击当前标签栏图标以转到其主屏幕)。

Image title

不一致的Apple UI


左边的不一致可以通过....来解决

A:...在非模态子屏幕中打开高亮显示,并带有后退按钮并保留标签栏

B:...一旦用户点击模态屏幕内的链接并继续在App的父级别上的非模态子屏幕操作,从而关闭模态屏幕。


如何使用模态?

现在我们对何时使用模态有了一个大致的了解。那么“我们如何进行设计?”这是目前唯一的问题。下面是对模态屏幕检查后得到的列表:


顶部导航栏始终显示关闭按钮(或“取消”/“丢弃”/“最小化”/ ...)。当用户迷路时,可以轻松关闭叠加层并导航回App的顶层。


iOS和Android上的取消按钮通常位于导航栏的左上角。Android更喜欢关闭/“x”图标,而iOS则喜欢“取消”文本,但是图标按钮在ios也很常见,经常使用ios设备的应该都知道。


一般情况下,iOS和Android上的保存按钮都位于导航栏的右上角。但是这种放置规则在大屏幕设备上是不可取的。所以在屏幕底部固定浮动或页面末端的内嵌是我个人推荐的放置位置。

Image title


多步模态

一旦模态对话框由多个步骤或子级页面组成,事情就会变得更加复杂。一般情况下,继续按钮显示在右上角。第二步不会打开新的模态屏幕,而是保留在当前模态屏幕,并在现有模态上覆盖非模态子屏幕。


当在屏幕底部放置主要操作(“保存”,“应用”或“继续”)时,模态第二步的右上区域释放了可选取消按钮的空间。虽然会从左到右跳转,但这种方案仍然比不能在子屏幕上直接关闭更好一些。

Image title


动画

截止目前,iOS和Android在模态的使用方面非常相似。但是动画方面并不是这样的。


iOS:动画在iOS中高度标准化。

非模态屏幕从右侧进入框架。标签栏在屏幕底部保持不变。顶部的导航栏也保持不变,但其内容在自定义转换中淡入淡出。此动画还为用于返回的边缘滑动手势提供了基础。


另一方面模态屏幕从框架的底部滑入并覆盖整个界面(新的顶部导航栏)。他们不使用边缘滑动手势,如果没有保存之类的重要操作,自定义下拉关闭手势可能会好一些。


Android: Android上的动画更加的丰富多样。

Google建议在Material Design指南中使用“有意义的过渡” 。Android本身并不区分动画是否为模态或者非模态。


总结

大部分设计师根据直觉来进行产品设计。有时候直觉的确很重要。但是更重要的是要我们需要了解一些通用标准,以便于在特定的时候选择更好的适应或者改变。


在我看来模态的概念是当今应用设计中最被忽视的UX原则之一。跨平台和Web本地混合应用并不能很好的使用模态的指南和规范。但是模态的基本规则你应该了解,以便在必要的时候适应或者改变它。


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

 

如何让你的设计更有商业价值

雪涛

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

今年互联网行业已步入了寒冬,整个行业大规模的裁员。美团、拉勾、阿里、京东等公司均不同程度的“缩招”与裁员,预计会持续到2020年。时代发展很迅速,社会很残酷,永远不要认为危机离自己很远而安心地一直停留在舒适圈,因为当时代抛弃你的时候,并不会和你打招呼。面对环境的波动,最好的方式就是保持危机感,面对变化接受变化,并不间断的学习。


——“在这个变幻莫测的时代,别只顾着低头拉车,更要抬头看路。”


文章一共分为三个部分,它们之间的关系是循序渐进,逐层深入,又相辅相成。所以大家读的时候,希望能够融会贯通。


第一部分:设计行业的发展趋势


我们正经历着巨大的商业模式变革与互联网转型,在这样的驱动下,设计师所承担扮演的角色也会发生变化。根据设计价值,设计师被划分为更靠近产品的UXD(User Experience)、以及在UXD基础上提升出与业务更密切的UGD(User Growth Design),最后就是更偏纯视觉的VD(Visual design)。那么在新的转型中,设计师应当如何去打造自身的价值呢?

本文主要探讨偏产品与业务方向的UXD与UGD。

Image title


一、设计与产品的关系


以前,设计师在团队里的位置会比较尴尬,因为没法验证自己对业务的推动是否产生了什么明确的价值。而大数据的来临,设计的价值变得显性化,作为与用户关系密切的设计师,善用好数据,可以发挥的作用其实很大。我们可以通过自己的设计思维与专业能力,为公司创造更大的价值,不单只是一个美观的输出。这就使得设计与产品业务关系越来越密切,是整个行业发展的必然趋势。


举一个设计以小成本提高业务的实例。这是我之前做的两个双11活动运营位的入口图。在改动前banner点击率大概是不到16%,改动后提高到了40%,不消耗任何其他人力、物力成本,就可以用设计让CTR翻倍。


设计目标:提高首页banner与入口图的点击通过率

现有问题:利益不突出、视觉点不够集中、缺少点击动机

改进方案:1、简化文案突出利益点;2、增加商品推荐提高命中率;3、用抢的动态按钮引导用户点击;4、用动态gif吸引用户。

Image title


二、找到自身价值的重要性


前几天帮一个朋友招设计,面完后朋友问我的意见。我说手活可以,执行也没问题。朋友打断我说,除了基本的专业技能外,是否还能为公司带来更进一步的价值。很遗憾,这位设计师因缺少或者没法证明自己有更高一层的价值,未满足职位要求,最终没有拿到offer。尽管我试着为她辩解说插画画的还是很漂亮的。PM回我一句,我们不是招插画,我们有更专业的插画师。

像这样的案例比比皆是,在我看了近百份简历,面了不下十个设计师后,我觉得有必要跟大家分享一下设计师找到自身价值的重要性。而这个价值,不是我们觉得,而是要让企业觉得我们能带来他们需要的价值。


的确,很多招聘帖上会写:会插画、动效可以加分。但我们必须得明白,加分是满足必要条件之后才去考虑的。如果是去年,你也许会因为有这样的差异化优势而拿到一份还不错的offer,但是今年,10份简历中有8份都会插画,其中至少有3份以上画的还挺不错。所以这个优势就会被大大削弱。并且形势变了,公司更看重我们的设计能给产品的发展带来多大的价值。

Image title


第二部分:了解设计师的价值分层


设计师的价值可以分为以下三层:设计协同、设计推动业务增长、设计驱动产品。


第一层:设计协同


一个出色的执行者,能够在拿到需求后又完美地实现落地。简单地说就是手上功夫好。


做好这个阶段需要有优秀的专业能力,良好的沟通能力,并参与到产品的探索与构思中来。

Image title


第二层:推动业务增长


这个阶段的设计师,会比上一个阶段更能体现设计师的设计价值,并对产品产生一定的影响力。能在以用户为中心的基础上,推动业务的增长,所以这个阶段的设计也被称为UGD(User Growth Design)。


需要设计师具备用户洞见力,数据分析能力,从这两个维度出发,去熟悉业务、分析业务,从而推动业务。这个阶段的设计师,也是市场最需要并且很稀缺的。

Image title


第三层:设计驱动产品


这个阶段的设计师,在团队中的价值可以说是非常大了。从被动的需求接收方,转化为从战略层,能主动提出需求的一方。做到这一点的设计师是非常了不起的,也是我们UXD发展的终极方向。

Image title


第三部分:设计师需要具备的哪些思维?


一、从AARRR转化型漏斗,培养增长思维


设计师需要去深入探索产品本身,熟悉业务,熟悉用户。增长黑客里有一个“AARRR”流量转化漏斗型理论,就是根据不同阶段的用户参与行为的深度和类型,将我们的整个目标拆分概括为:acquisition(获取用户)、Activation(激发活跃)、Retention(提高留存)、Revenue(增加收入)、Referral(传播推荐)。在整个漏斗中,被导入的用户在每个环节都会出现部分流失,最后层层深入到达底层的,实现最终转化。

Image title


通过产品生命周期,设计师可以运用自己的设计思维和专业技能,将每一层的漏斗直径做到最大化,减少用户的流失,抵达下一层的用户就会更多,从而提高最终的转化。


二、运用GSA思维模型做设计


什么是GSA?

GSA分别代表的是:目标(G=Goal),策略(S=Strategy),行动(A=Action)

举一个通俗易懂的例子,比如我想减肥,这是我定的目标(G),然后我的策略(S)就是少吃多动,最后具体的做法(A)就是,不吃晚饭、每天运动2小时。

如何在具体项目中体现呢?下图,运用一个具体项目举例:

Image title


GSA的特点是“以终为始”,优势在于可以帮助我们快速聚焦到最能帮助我们达成目标、杠杆率(也就是投入产出比)最高的Action上。


三、培养数据思维,利用数据提升设计的价值


项目与需求上线后,设计师一定要去验证自己的设计是否有效地达成了目标。这个时候你就需要去看数据反馈。没有数据就就没有比较,没有比较就不能进步。


关于数据的用处有很多,举个例子,当两个人对各自的方案争执不休,分别觉得对方不好,但站在各自的逻辑上似乎都能说得通,那怎么办呢?分别做一个A/B测试,数据不会说谎,哪一个方案更有效,一目了然。


那么如何将数据结合到我们的设计中呢?首先在设计前,我们需要先定一个目标,而每一个目标就应有一项对应的数据指标。比如,提高了某一块的CTR(点击通过率),提高CVR(转化率),提高商品曝光、1/7/15/30日留存率等等。方便之后去验证自己的的action是否完成了自己的Goal。

Image title


拿到了数据之后,还需要分析数据。不管是有没有达到目标,都要去分析原因,进行复盘总结。复盘的好处是可以让我们在这一次项目中吸取有价值的经验--失败了就找失败的原因,方便以后避开同样的错误;成功了就分析成功的原因,并将成功的策略复制运用到今后的工作中,增加以后的成功率。如此,不管有没有成功,都能给我们带来最大化的价值。我们也会更加的接近用户、接近产品、接近业务。从而帮助我们进一步洞察用户、挖掘新的需求。

Image title


小结:


以上就是今天所要分享的全部内容。再带大家回顾一下,一共分为三部分:第一个是了解设计师的发展趋势,第二个是趋势下的设计师价值分层(设计协同、设计推动增长、设计驱动),第三个就是在价值分层的逐步递升中所需要培养的用户洞察力、GSA的策略、数据增长思维等。

最后提示一下大家,阅读的时候多融会贯通。另外,方法不是唯一的,要懂得去掌握方法的方法很重要。

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

 

产品体验报告 | 要深度分析,不要表面赏析

雪涛

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

能知道产品改进的工具,先上车吧!

某个时间我们下载了许多优秀的APP,定了伟大的目标“每天赏析一款优秀产品,学习前沿的交互和视觉风格,努力提高自己的审美和眼界,确保在工作中能迅速找到参考^_^…”


嗯,相信大家都有过类似的做法(不管你信不信,反正我信了)。自觉更新自己审美和眼界,值得表扬啊!(先给一颗糖吃)但是,时间一长你会发现 索 mei 然 luan 无 yi 味 si、没有突破,基本每个设计点都有共同的理论支撑,而且每次赏析只能停留在基本的交互体验和视觉风格上。


没有强大的数据支撑,不知道为什么这么做?只知道设计理论 却不知产品现状?只能看到“点” 却不知“面”的精彩?竞品的优劣势有哪些,我们应该如何改善?不知道?因为你没有做深度分析!


下面开始梳理我最近学习《产品体验报告》的一些心得,先上车吧,老铁!



一、什么是产品体验报告?


产品体验报告,是体验者在深入了解某个产品的商业模式、目标用户、使用场景、市场现状、产品功能、交互体验以及视觉风格,同时还包含了竞品主要功能的对标,是先有深度再到广度的分析报告,是全方位总结出来的图文报告。


这里的“体验者”可以是:运营、产品、交互、UI等产品相关人员,现在已经不局限于产品经理做报告了,因为行业需要多元化人才嘛,同时也为你跳槽、转岗、晋升打好基础嘛(重点是为涨薪带来机会)~


既然是一份图文报告,就必须具备可呈现、可阅读、可传承的相关条件,类似于我们的工作总结、项目复盘等,产品体验报告也有特定的输出框架和规范。



二、写这个有什么用?


· 一般利用产品体验报告来指导产品改进;


· 用于加深对目标产品和目标岗位的了解,深度体验相关产品是必备流程;


· 也可以用于新入职或应聘时,为了摸清自身产品以及竞品而进行的研究分析、面试时也能证明你对该产品做了充分准备;


· 当然也可以用来了解一些新生产品、感兴趣的产品,拓展产品思维、设计思维。

产品体验是一个常规的手段,也是一个必要的流程,只有随时随地做到对行业,市场,用户的了解,才能在关键时刻提出合适的解决方案。



三、前期准备


熟悉产品&体验产品


熟悉APP是做报告的基础,可以根据自己的经验、看法,去体验它,感受它的优劣势。正如前面所说,这个优劣势不光是停留在视觉、交互方面,还可以包括核心功能、特色功能等,甚至是战略层面的。每个人都是用户,所以不要怕判断错误,大胆去感受、去思考、去提意见,然后把你的想法记录下来,零零散散的笔记没事,后面再统一整理,第一感受是最真实的。


在记录想法时候,最好把你的理由罗列出来:哪里好、哪里还可以优化、我应该怎么做?这个记录好了,后面写报告的时候会很轻松。当然也不要闭门造车,尽量和身边的产品人员共同探讨,发掘他们对产品的看法,或许能收集到你遗漏的点。


如果是你参与设计的产品,那直接把你之前的设计思考和建议 复盘即可。



收集&整理资料


资料收集是一个比较繁琐的过程,需要多渠道去发掘信息,并把他们串联起来再分类,相信收集过后会对整个产品的战略层、范围层、结构层、框架层、表现层(用户体验五要素)有大致的了解,后面会根据这5个层面做产品解剖。


收集具体层面:需要了解APP的市场反馈:各端下载量、使用评论,以及这个APP有哪些竞品,这些竞品的相关数据又是怎样的。


如何获得数据?可以通过:手机应用市场、APP Annie、神策数据等数据网站来收集。很多自家产品还有内部研发的“数据观象台”,这些都能记录留存、转化、用户特征、行为、点击事件等重要数据,是产品报告中的有力证据。

收集宏观层面:可以直接通过公司官网、产品介绍、招聘网站、用研报告、运营报告等方式收集



分析资料


可以在写报告的时候同时进行。如果提前做好初步的资料分析,将会提高后面写报告的效率。



分析具体层面:


(1)根据用户的评论反馈初步判断,提炼关键信息点进行分类。同时可以查看竞品的用户评价,两者之间做对比,分析为什么会出现这些优势或差距;

(2)竞品的行为数据我们基本看不到,是人家的产品机密,我们主要是自家产品的行为数据,竞品只是参考意义;

(3)最后可以从功能、交互、视觉、运营的维度思考如何解决问题并优化,把这些都记录下来。



分析宏观层面:


根据搜集来的产品的背景、新闻、研究报告等信息进行分析,提炼其中的重要观点,然后把这些观点按照“用户体验五要素”归类,把搜集来的观点和自己对产品的想法进行碰撞,记录思考过程。



推荐工具


为了便于共享、传播及图片处理,产品体验报告通常以PPT的形式记录,因此我比较推荐的排版工具有:office PPT、Keynote、Axure、Mockplus、Sketch、Ps、Ai。


注意:制作一份产品体验报告,你要面向的是企业高层、上级领导、面试官、产品团队的同事、客户等,所以需要结构清晰,排版精美、简洁,这样才会让人很有读下去的欲望,正如文章开头所说:可呈现、可阅读、可传承。特别是自己以设计师的身份拿出报告的时候,排版是否精美、信息主次区分是否明显,也是对自身专业性的一种考量(文章最后我会分享一些简单的模板供大家参考)



四、输出框架


讲到这里,准备工作就已经做的差不多了,现在我们开始规划写作思路。下面列举的是比较全面思路,可根据现状自定义框架(重点是产品分析那一步,绿筛那部分):


Image title


五、体验环境


Image title


六、产品背景


产品背景可以结合上面宏观层面收集来的资料加以描述,尽量保证描述的逻辑性,要让现状、痛点、价值、目标一目了然。不要记流水账、也不要复制粘贴。具体思路如下:

Image title


可按照发散到聚焦、聚焦再发散的逻辑描述:先介绍市场环境→当前环境造成什么问题→用户存在什么痛点→产品如何解决痛点→产品能达到什么目的→产品价值和未来的方向


为了更容易理解,下面拿Uber的一段产品背景做举例参考:


Image title



七、产品分析


1.战略层


产品定位:为“谁”提供什么样的服务,解决“谁”的什么需求;

产品类型:提供服务的产品属于哪个领域,具有什么样的产品属性;

Image title


功能特性:代表了一个产品核心情绪,可以从产品定位和主要功能中提炼出关键词。



Image title



目标用户&特征:大方向描述完后,现在开始对产品的主角(用户)进行细分,用户是谁、特征是什么、他有什么问题、使用场景是怎样的


用户信息可以通过用户调研、后台数据、产品数据、竞品数据、市场数据等渠道收集,在我前2篇文章中有讲到过,如果前期有做这些准备,可以提取相关信息写入报告:


《用户体验旅程图 | 概念&实操&模板》

《用户角色模型 | 拒绝“我认为”的设计》


Image title



用户需求&解决办法:需求可以从实际数据和用户反馈中提炼出来,有些运营团队会通过组建铁粉群、论坛、问卷调查等方式集中活跃的目标用户,在这里可以得到他们的诉求,当然最好的方法还是面对面做访谈。解决办法对应到需求,可以利用“KANO模型”归类,举例:


Image title


使用场景:通过“KANO模型”归纳了需求和解决办法,然后就要列举出用户使用产品的环境:


· 什么情况下使用产品?这个情况会不会导致情绪波动?


· 什么地方使用产品?


· 这些地方网络环境好不好?不好该怎么办?


· 定位有没有覆盖到?精不精准?不精准怎么办?


· 移动支付时账号内无零钱怎么办?


· 正在等车时,手机没电怎么办?



这个时候需要你保持一颗同理心,通过一个切入点把思维发散开,产品设计要考虑到极端情况,必须不停的问“为什么”。可以借助团队的力量一起完善,C端产品每个人都是用户。B端产品就需要身临其境去现场,或者实实在在找用户调研。


行业分析:这个分析完全是宏观层面的东西,一般通过政策、经济、社会、科技方面来发掘,行业新闻资料网上都能找的到,其次就是看你平时对行业的关注度了。当然一些数据平台也有直观的信息可以参考:


Image title


应用数据:通过对比竞品在应用市场的下载量可判断出自身产品的市场占有量。用户评论评星可以大致分析出产品口碑。迭代记录是个好东西,可以了解竞品的研发方向。阶段数据可以通过“友盟”等数据平台接入应用市场获取:


Image title



2.范围层


这里从产品提供的功能(服务)层面来分析,可以按以下2个维度区分,并描述他们带来的价值:


· 基础功能(必备的功能、解决问题的、代表产品属性的)

· 特色功能(核心且重要的、打破同质化寻找差异化的、提升用户满意度的)



3.结构层


可以通过:功能架构图、业务流程图、页面流程图去了解产品结构,并且能清晰的看到用户完成一个任务的路径,中间会发生什么,有多少步骤,然后把你的看法记录下来。


对于竞品我们可以边操作边记录,我建议一定要自己画一遍,流程图能帮助你梳理产品逻辑,画完之后可以分析其中的优缺点,对比之下你会一目了然(解剖主要功能即可,像注册/登录/绑定 这些常规功能你自己看着办~)


推荐工具:XMind、Axure



4.框架层


主要是对产品的重要界面进行分析,并总结出优劣势和整改意见,因为这些是整个产品的灵魂,例如:一级导航页、主要业务流程页、重要功能页、特色功能页以及用户最喜欢的页面。



5.表现层


表现层就是一个产品注入灵魂之后的肉体,既呈现层、UI设计。人的审美观会根据时间发生变化,所以这里是检验你平时有没有经常性把玩优秀APP、有没有关注设计趋势。有设计基础的当然可以尽情发挥,不是设计出生的可以对应以下几个维度做参考:


· 视觉舒适度


每个人都有评价设计的资格,当你在使用一款产品的时候是否被包装所吸引,一眼看上去辣不辣眼睛,这是产品最基本的脸面问题。


(1)颜色、布局、版式、微交互、精致度等,如果这些让你的情绪产生正面增长,那么恭喜你,你已经被产品的“本能层次设计”所吸引;


(2)如果情绪波动不大,说明还看得过去~(同质化很严重嘛)


(3)如果从视觉上让你感觉不舒适、皱眉头等负面情绪产生,那只能说明:还有优化的空间(够委婉了吧)



· 视觉和交互的一致性


比如:页面切换方式、反馈机制、加载刷新、空状态、功能性按钮的状态、图标风格、元素细节、设备适配、视觉语言等是否将一致性覆盖到整个产品


· 品牌感


品牌设计是最容易在视觉上打破产品同质化现象的方式,很多优秀的产品早已深入人心,比如:企鹅-QQ、熊掌-百度、猪脸-飞猪……


将这些形象元素融入到APP里面,创造属于自己的视觉效果,这是除功能以外寻找差异化的最佳方法。我举一个“飞猪”的栗子:

Image title


“飞猪”将一个Logo特征融入到搜索框、toast、图标、标签等地方,从而提升视觉的一致性和品牌感,这是一种思维灌输式的洗脑,将品牌映入人心



· 功能可见性


围绕“视觉服从于功能”的原则。UI设计要把握好功能的视觉权重,比如:功能优先级、入口层级、按钮层级、哪些可操作等,这些都需要通过设计让用户感知到


假设一个可点击的地方,但用户看不出来、没感知到,这就是功能可见性极弱,影响使用体验。


同时还要考虑到用户群体,如果是一款老年人、色盲者使用的产品,你的功能可见性又是怎样的呢?


总之,我们做一个设计或者评价设计之前,脑袋里都要过一遍用户使用场景。



八、竞品分析


基于战略层面收集到的数据,我们需要和竞品做宏观对比、具体对比,看看别人家产品是怎么做的,为什么受用户喜欢:


宏观对比:

Image title


具体对比:


· 功能差异化对比

Image title


· 视觉和交互对比


这里可以运用文章开头提到的“APP赏析”,站在UI设计和交互体验的角度做对比分析,罗列出双方的优劣势,并提出自己的建议。

另外,这么多资料没有模板嵌套 会影响工作效率,我简单整理了一些PPT,后面会把这些文件都分享出来。

Image title



九、假如我是产品经理


相信你做到这一步的时候,已经对产品了解的比较透彻了,在解剖过程中你肯定有很多疑问和自己的想法,没关系,大胆把他写出来,这能够检验你的分析成果。


假如你是产品经理或设计负责人,你会如何优化、把控产品呢?就从以下四个方面开始你的表演吧:


· 功能问题

· 交互体验

· 视觉风格

· 产品未来发展的设想



十、总结


(1)千万别急着动手,先收集相关资料和数据,认真分析并做记录;

(2)了解产品定位、用户群体和市场现状,知道产品为哪些人解决问题、设计机会在哪里?;

(3)找到用户诉求,参考竞品,结合产品现状给出合理建议;

(4)与竞品做对比,找到优缺点,设想改进方案。


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

 

思维方法篇:培养专业的设计思维

雪涛

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

“设计思维意识形态”强调亲身实践、坚持以用户为中心的方法解决问题,并达到设计创新,进而实现差异化、增强竞争力。这种 “亲身实践” 的、“以用户为中心” 的方法由 “设计思维过程” 决定。

设计思维发展史

很多人都有一个误解,认为设计思维才刚刚兴起。实际上,人们对设计思维的运用已有年头:纪念碑、桥梁、汽车、地铁系统等都是其产物。纵观历史,优秀的设计师早通过以人为本(human-centric)的创造性设计过程来缔造寓意深刻、富有感染力的设计方案。

早在20世纪初夫妻档设计师 Charls 与 Ray Eames 在设计 “埃姆斯椅” 之前就坚持 “在做中学”,挖掘了椅子背后的大量需求和限制条件;这款椅子在70年后的今天,依然被投入生产制造。20世纪60年代,服装设计师 Jean Muir 有 一个很著名的设计策略 “常识论(’common sense’ approach)”,非常重视自己设计出来的衣服在别人眼里是什么样子。

这几位设计师都是当时的创新先驱,他们的设计方法论也被看做是早期的设计思维——深入了解用户的生活方式以及人们未被满足的需求。

纽约州商业部标识 “ I LOVE NY ” 的设计师 Milton Glaser 也对设计思维做了很好的阐释:

“ 我们一直都在思考,但并没有真正领悟(什么是用户真正需要的)……是关注(attention)这一行为本身让我们真正了解了用户的需求本质、对用户需求有了充分认识。”

尽管早期就有了用户为中心的设计产物,但设计在商界的地位并不高。往往事后才被人想起,也仅仅是一种提高美感的润色手段。所以很多公司根本就没有满足顾客的真实需求。因此,有些公司将设计师的角色从受限的的产品开发后端前置到了产品设计之初。以人为本的设计方法(human-centric approach)也让他们独树一帜:其设计产物不但满足了用户需求,也成功盈利。

大公司在落实以人为本前,需要一套标准化机制。设计思维(design thinking)就是一套用创造性设计流程解决传统商业问题的规范化框架。

20世纪 Roger Martin 和 IDEO 设计师 David Kelly & Tim Brown 共同提出了设计思维,将酝酿多年的设计方法和思想概括成了一个统一的说法。

设计思维是什么?——设计思维的定义

设计思维是一个流程化的意识形态(Design thinking is an ideology supported by an accompanying process.)。要彻底理解这一概念,先要弄清楚 “设计思维意识形态” 和 “设计思维过程” 。

定义:“设计思维意识形态”强调亲身实践、坚持以用户为中心的方法解决问题,并达到设计创新,进而实现差异化、增强竞争力。这种 “亲身实践” 的、“以用户为中心” 的方法由 “设计思维过程” 决定。设计思维过程有6个鲜明的环节,接下来会一一详述。

设计思维如何进行?——设计思维的过程

设计思维整体上遵循着

  1. 理解(understand)
  2. 探索(explore)
  3. 实现(materialize) 的环状流程。
  4. 具体可细分为6个阶段

(1)与用户产生共鸣(empathize)

与用户产生共鸣(即带着同理心去理解用户):开展用户调研,了解用户的行为、语言、思想、和感受。

假设你的目标是改善新用户的登机体验。那么在这一阶段你需要和真实的用户对话,观察他们做了什么、如何进行思考、以及想要什么,同时思考 “是什么激励着用户或阻碍着用户”、“用户在哪儿受到了挫折”。其目的是收集尽可能多的信息,力求与用户产生共鸣、真正理解他们。

(2)定义问题(define)

定义问题:根据调研结果,观察用户有哪些痛点(pain point)。明确用户需求后,罗列出优化点。

该阶段以上一阶段为基础,帮助我们进一步了解用户。还以登机体验为例,根据之前的调研结果,我们可以总结出乘客当前的体验概况,思考不同乘客之间是否存在相同痛点,找出乘客未被满足的需求。

(3)形成概念(ideate)

形成概念:针对用户未被满足的需求,脑暴一系列疯狂的想法和创意。参与者可以自由发挥、天马行空一番;这一阶段,点子的数量重于质量。

最好整个团队一起参与,简要描述下各个想法。然后成员之间观念互换,将好的点子相互融合、修正,形成一套全员认可的解决方案。

(4)绘制原型(prototype)

绘制原型:将概念方案制作成真实、可感触的原型。其目的是分辨方案中哪些内容有效,哪些无效。同时,依据原型的反馈信息权衡我们的解决方案应该更具影响力还是可行性。

如果你的任务是设计一个全新的登录注册页,绘出线框图,在团队内讨论、汇总建议。然后根据建议快速调整方案,换一组人进行再次讨论。

(5)测试(test)

测试:带着你的原型走进用户、获取用户的反馈。同时思考 “这个设计方案有没有解决用户痛点、满足用户需求?有没有让用户感觉更好、思路更清晰、任务执行更顺畅?”

邀请真实用户试体验产品原型,验证设计目标。乘客对登机体验的抱怨有没有减少?新做的登录注册页有没有增加用户的时间和金钱成本?为了实现最终的设计愿景,多测试几遍吧。

(6)实施(implement)

实施:将你的设计愿景开发上线,确保它能为最终用户带来生活品质的真正改善。

这是设计思维最重要的一环,也最容易被忽略。Don Norman 说过:“我们需要做更多的设计。” 设计思维不是变戏法,空有理论而不实践是没用的。同时记住 Milton Glaser 的教诲:“创新设计是最难的。”

因为 ‘创新’ 是一个动词,要花费很长的时间。我们要先在头脑里产生一个点子,然后将它实现。通常这是一个漫长且艰难的过程,但如果你掌握到了其中的真谛,你的工作就被赋予了价值和意义。

为什么要遵循设计思维?——设计思维的优势

为什么要学习和使用设计思维?其理由很多。通过归纳,我们发现设计思维的优势在于:

  1. 从用户数据着手,坚持以用户为中心;注重真实非虚拟的用户需求;并在真实的用户群中进行测试。
  2. 发挥集体专家的智慧,建立集体语言,尊重每位参与者的建议。
  3. 运用多种方法解决同一问题,鼓励创新。

Jakob Nielsen 告诉我们:“如果一个伟大的设计解决的是一个错误的问题,它必将失败。”

灵活性——设计思维可适时调整

初次接触设计思维,你会觉得它复杂深奥。但要告诉大家的是,设计思维的6个阶段不必生搬硬套,非按顺序操作。我们可以把它当作指导思想,在需要时运用即可。要学会做主厨,而不是打杂的厨子:产品设计流程就像烹饪食谱,完全可以根据实际情况稍作调整。

这6个阶段是可迭代、可循环的,与纯线型设计过程(详见图2)完全相反。在完成最初的原型后,我们常常会再次回到 “理解” 的前两个阶段,与用户进一步产生共鸣、深入定义问题。只有产出好的点子、绘制出完整的原型,你才能真正表达出你的设计理念,也能在设计之初就准确评估方案的有效性。

基于这一点,再次进行用户调研很有价值。在决策前理清:用户的哪些信息未被了解到,原型中的哪些用例未被调研到。

每一个阶段也皆可重复操作。我们常常会在其中一个环节里多次反复,达到这一阶段的目的再继续下一个阶段。

举例说明:由于不同的参与者背景不同、专长各异,“定义问题”时会产生很多解决方法。这一阶段需要全部参与者集思广益,花费的时间普遍较长。如果大家无法达成一致,就有必要多重复几次 “定义问题” 。每个阶段的产出都应当足够合理,以作为余下阶段的指导原则,同时不要偏离我们的关注点。

可扩展性——设计思维的“雄心壮志”

设计思维方便、无障碍的本质赋予了其很强的扩展性。过去那些不肯转变观念的公司,现在也有了自己的设计指导规范。设计思维不仅适用于传统的产品设计等领域,也适用于社会、环境和经济领域等的问题解决。

设计思维简单易懂,可被广泛应用;但如果“问题”定义得不准确,整个设计过程将会十分棘手。设计思维既可以用于优化小的功能点,如搜索功能;也可以用来制定重大变革性方案,如为教师设计职业发展阶梯,以留住更多教育人才。


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

 

如何理解产品的「核心功能」?

雪涛

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

产品的核心功能及其意义


王子吻醒了白雪公主后,将白雪公主带回了城堡,给了白雪公主应有的一切,白雪公主过得很开心,衣来伸手饭来张口,金银珠宝取之不尽用之不竭。这一切哪里来?王子给的,因为王子爱白雪公主。国王和王后也很爱白雪公主,那是因为他们爱王子。老百姓也很爱白雪公主,因为他们爱戴国王和王后,同时也喜爱王子。白雪公主的这一切财富、幸福、快乐都来自于王子对她的爱。王子为什么爱她,因为她的美貌。是因为白雪公主的美貌,致使王子吻她,白雪公主才醒了,不是因为性格,因为她当时是死的,王子不知道她的性格怎么样,所以白雪公主得到的这一切,都是因为她的美貌。所以白雪公主很在意自己的美貌,因为她的美貌,让她得到了这一切。但是人都是会逐渐老去的,所以白雪公主每天都会去保养自己的容貌,每天都会去照镜子,她担心这个世界上会有一个比她更美的人出现在王子面前,夺走她的一切,她很不安。直到有一天,她对镜子说:镜子啊镜子,谁是世界上最美的女人。


故事结束。


Image title


大家发现了吗,白雪公主成为了童话故事里的那个王后,那个用毒苹果的女人,现在你还会觉得王后坏么?好吧,我们今天要聊的不是这个,而是「白雪公主的美貌」,类比于「产品的核心功能」。


如果白雪公主的容颜衰老了,她就失去这一切了,即使她曾经得到过。就好像微信的核心功能是即时聊天,假设微信哪天不能即时通讯了,那它的价值就不存在了。所以它也害怕,害怕自己被其他产品取代,因为人是贪婪的,一件事物总有对其厌倦的时候,这也是为什么他们现在已经开始说自己要创造一个生态体系。以至于出现了小程序、小游戏、红包、扫码、支付、看一看、搜一搜等等。他们在维系这个产品给人的幻想,他们在持续性的创造这个幻想,来连接人与人之间的那一份羁绊,或者说情感。


类似于白雪公主的美貌得到了一切,而产品的核心功能带来了用户。


我说这个故事的目的是:不管是商业竞争,还是产品设计,其实都是一个道理,就是我们应该围绕产品的这个核心功能去做文章,去拓展商业价值。


也许你平时看到很多文章,都在告诉你要注意产品的核心功能,你知道了核心功能的概念,但是不知道具体意思,其实还是不理解。所以我通过这个故事告诉大家,帮大家理清什么是「核心功能」以及它的意义。


为什么我们要了解并摸清产品的「核心功能」?因为只有在这个基础上,我们才能正确做到拆解需求发现核心功能并对其进行设计,这就是我们所说的需求拆解与功能设计。


判断产品核心功能的价值


产品的核心功能是由产品的定位决定,产品的定位是由产品的市场决定。那么要分析某一个核心功能的价值,须得从产品的市场着手分析。一般而言,产品市场可以归纳为以下三类:a.现有市场、b.细分市场、c.未来市场。


a.现有市场


现有市场,其实就是目前常见且已盈利的模式,这类模式已存在于如今的市场上,并被许多产品借鉴、供奉着。如各类互联网产品,电商、社交、音乐等,都有一定的模式在遵循着。针对现有市场的产品,对竞品的了解似乎已经成为当下产品人的必走路径,竞品在做什么,都做了什么,以及做到了什么程度,再结合自己产品的定位以及核心竞争力来斟酌某一个功能的去留及方向。正所谓知己知彼,百战不殆。


值得一提的是,竞品分析的产出物并不是抄袭,而是更多的挖掘与纠正自己产品在下一步的需求,竞品不可以做的不代表自己产品不可以做,同理,竞品做的好的地方我们也不能轻易跟风,每一个产品之所以能够存活下去,都是因为有自己的核心竞争力。这段话我之前在其他文章里写过,没什么指导意义,就是纠正部分人对于「竞品分析」的错误看法。


成功的,比如网易云音乐的评论功能,早期他们就是通过这个功能从其他平台挖来了不少用户(评论是之一,当然还有歌单,UGC 内容分布渠道)。这些用户在听歌的同时会沉浸在音乐的氛围里,期待找到志同道合的人,宣泄内心感性的情绪。(不得不说现在的人其实都挺矫情的~嘻嘻)


Image title


失败的,比如各类骑行产品,这类产品其实是借鉴了国外的模式,但各位也看到,基于国情及人民文化普及程度的区别,国内市场骑行类产品现在很难发展起来,至少目前我身边已经有很多人想要退款某类单车服务的押金都很难了。


b.细分市场


其实就是将现有市场细分化。从用户群体分析,每一个细分市场都是具有类似需求倾向的消费者构成的群体。比如社交这一个分类,微信出现后,随之出现的各类「交友」软件,如雨后春笋般崛起。其中大部分产品的功能模式都非常单一,着重突出核心点,但碍于市场价值的可供性太低,以至于能真正崛起的产品却寥寥无几。


原因就在于,本来市场就已经细分化,在细分化的市场里做出属于自己的产品特性,需要考虑的因素有以下三类:

  • 差异化,该功能具不具备个性化,能不能在区别于其他产品的同时提升用户体验;
  • 强需求,也就是所谓的刚需;
  • 技术支持,例如产品的技术壁垒;


c.未来市场


这点类似于目前比较火的人工智能,市场盈利期没有到,尚处于摸索阶段,但也许会在未来创造出巨大的价值。这里就不展开讨论了吧,因为在正常领域里,一般人达不到这样的高度,所以讨论意义不大。


实践出真知


其实现在的很多产品都有一个问题,就是初期急忙上线新功能,后期发现效果不好,甚至到了无人去用的地步,但还是会把它挂着,不愿去掉。回头看目前比较成功的产品,哪一款是有这样的功能存在的?所以在工作中,我们要坚持以下三个原则:a.砍掉残缺功能、b.不要提用户去思考、c.帮助用户聚焦;


a.砍掉残缺功能


可能很多产品已经存在上述的那种情况,那么如何来删除那些不必要的功能呢?


首先大家第一个想到的是「删除那些功能,那我之前的工作不是全白做了么?既浪费时间,又浪费精力,成本都收不回来了」。


没错,这么理解也是对的,但也不是全对。因为在迭代的过程中总会有一些自己没办法预知的情况,也许你之前的功能做得不好,但是不代表白做,可能在这个过程中积累了一些经验,知道之后遇到这些类似的情况如何去处理。这个成本算是智商税吧,这算是前期产品没有规划好,导致后期发生这种情况的一个代价。


所以有人会因为这块成本原因,选择不去删除这些功能。说实话,这样不仅会导致产品后期在精力上持续不必要的输出而导致产品烂尾,还会影响用户的体验。所以在砍功能时,应该问问自己「为什么要留着它」,而不是「为什么要去掉它」。(好好想想这句话。)


Image title


b.不要替用户去思考


说到这里,大家可能又会想问「你怎么知道用户想不想要这个功能呢?」


一般来说,我们会通过数据来分析这些功能是否有存在的必要。同时从多角度去切入思考,比如前期的用户模型、需求分析、可用性测试等等,但是千万不要去猜测用户想不想要这个功能。因为人一旦陷入「求全心理」的状态中,设计者就会担心自己漏掉了什么需求,而不是去解决问题。


所以我们要倾听用户的意见,但绝不能盲从。


c.帮助用户聚焦


相信有人会反驳「那难道没有完成一个功能前,我就完全不能去做其他功能了吗?」

不是的,我上面也提到了,只要不影响用户使用产品的核心功能,适当的加一些子功能是没什么的,好比上面「微信」的例子。


产品的主要功能能够满足用户的话,他们就不会太去在意你的改变。所以无论是删除某些子功能或改进某些功能,都不要轻易的打扰用户。


如何做到这点?

  • 确定用户想要达到的目的,并排定优先级;
  • 找到能够完全满足优先级最高用户需求的解决方案;
  • 确定用户在使用产品过程中最常见的干扰源,并将解决这些问题的功能按难易程度排出优先级;


比如;

  • 微信的例子,用户主要目的是社交,「游戏」和「购物」只是当中的消遣功能,之所以放在发现的子功能中,是因为它们对主流用户来说并不重要;
  • 同样的,因为大部分用户的目的是社交,但是不排除少部分人会去使用这些子功能,所以要做到不能打扰主流用户的同时,满足部分用户的需求;
  • 用户在使用产品的主要功能时,我们要看到子功能是否影响用户的使用,然后找出当中最阻碍用户使用产品功能的干扰源,并把它解决。


小结


以上,我通过三个大点阐述了「核心功能」是什么、它的意义以及价值,工作中如何对核心功能做处理。


最后说一点,在接需求的同时,各位是否有想过这个需求背后的目的?如果有,那么是否有再进一步分析这个目的与核心功能的关系?大部分人做到了第一点却忘记了第二点。


各位谨记:产品人/设计师的思维,就是用户看到界面时的样子。

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


用户体验旅程图 | 概念&实操&模板

雪涛

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

让产品(服务)团队了解用户使用过程中的看、想、听、做,让他们能够从用户角度去考虑产品、设计产品。

什么是用户体验旅程图?


概念&作用


从用户角度出发,以叙述故事的方式描述用户使用产品或接受服务的体验情况,以可视化图形的方式展示,从中发现用户在整个使用过程中的痛点和满意点,最后提炼出产品或服务中的优化点、设计的机会点。同时让产品(服务)团队了解用户使用过程中的看、想、听、做,让他们能够从用户角度去考虑产品、设计产品。这个过程的产出物即为用户体验旅程图。









由什么构成?


这里分为功能定义前和功能定义后;

定义前即为:准备规划做的功能、进入用研阶段时;

定义后:已经上线的功能、需要优化的功能。

Image title

如何做?


1、创建用户角色模型(用户画像)


既然旅程图是梳理用户使用产品上的体验问题,那么我们需要以用户的真实情况为基准,这样会使旅程图更真实。


这里可以通过前期的用户研究,比如:访谈记录、行为研究、调查问卷、意见反馈等方法,获得大量真实有效的用户数据。


然后对产品的主要目标用户进行分类,并为每个用户创建角色模型(包含基本信息、诉求、期望、痛点),每个角色将对应不同的用户体验地图。


Image title




2、开始制作旅程图


这里就以功能定义前为场景,因为用户画像和使用行为是单独知识体系,后面会单独产出一篇关于用户画像的,敬请期待哦!


(1)为了便大家理解,我在这里列举一个生活中都经历过的小栗子。



开始:起床

目标:到达公司


我们先回想一下今天早上起床的过程。把这段场景分成下面几个阶段:


一级行为:


Image title


起点和终点并不代表结束,要联想到相关的场景,比如:到到达公司后,还有没有有可能解决上班相关的问题?


Image title


(2)在真实做项目过程中,大家在这一步可能会写出不同颗粒度的故事,需要设计师或产品经理把控场景大小。这段场景可以再往下梳理一层颗粒度更小一点的场景,比如起床就可以再细分为:


二级行为:


Image title


剩下的场景模块都可以继续这样细化并归类。


Image title


这样我们的主线场景就有两个层级:一级行为和二级行为,场景从左至右形成一个时间线。

但是,真实的用户场景不会按照你所画的顺利进行,情况会变得复杂、多变(交互设计师要考虑到异常情况和特殊场景的发生),这个时候我们可以借助流程图的方式连接我们的场景:


Image title


(3)拆分场景

此时,我们需要在刚刚梳理的每个二级行为下面停留,继续细化二级行为,从中获取更多的信息。


体验设计就是需要不断地问“为什么”、不断发掘潜在需求。


参与人员会围绕这个行为场景写出很多细节来。我们可以按照以下几个维度对细节进行归类:


Image title


其中情绪曲线可以通过固定的问题获得,也可以通过用户想法、用户的痛点结合主观判断。

在这个过程中,先限制时间,让大家按照自己的想法写出来,每条思考写在一张卡片上,相互不干扰,然后每个人阐述自己的卡片内容,让参与者了解大致的信息


注意:要以完整的流程为中心,一定要广度优先,而非深度,比如起床这个故事里面,找衣服、穿衣服这类场景在这个阶段我们无须关注,不要过早的沉浸到细节中。


Image title





完成上述步骤后,你将得到一份重要的节点清单,下面需要对重要的节点进行分类,以便在绘制旅程图时更加的方便。比较常用的做法是将所有关键节点写在便利中并黏在墙上,然后将同类别的关键节点集中在一起,并为每个类别贴上分类标签。分类完成后,对核心的节点进行筛选,移除掉重复、没有价值的内容。



(4)接下来,我们可以根据问题点的数量来衡量每个节点的情绪水平了。一般可以用积极、平静、消极这三种情绪来表达用户的使用感受。这一步做完,我们一眼就可以看出痛点在哪个环节上了。



(5)针对痛点,讨论可行的解决方案

先根据自己的经验,对标竞品,设想一些解决方案,然后组织产品、设计、leader再进行一次脑暴(核心人员即可,人多会导致丧失方向),让大家一起进入旅程图,以用户的角度再走一遍流程。在这个过程中,如果发现旅程图中有偏差和遗漏的地方,大家就可以一起修改、补充、审核。



总结并通过可视化模板记录:






Image title


最后,结合体验地图行为的情绪曲线、设计的机会点,梳理优先级:


a.对情绪的最高触点,思考还有没有优化的空间,能否将它继续优化做到;

b.对情绪的触点,思考是否能将其他触点较高的地方,分担一部分功能(次要功能)到触点,来均衡体验情感;

c.可以对标竞品,看看别人是怎么解决问题的,寻找适合自己产品现阶段的解决办法。


补充:

大家发现没有?参与人员在写想法的时候,就是头脑风暴的过程,抓住机会,通过一些开放式、引导式的提问来刺激大家脑暴出更多的内容(有利于产品经理和交互设计师获取灵感)比如:

Image title





总结:







Image title


另外,功能或痛点的解决优先级可以通过四象限法则归类,与旅程图同时交付,

做到:用户、场景、行为、问题、解决办法、解决时间一目了然


Image title

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

用户角色模型 | 拒绝“我认为”的设计

雪涛

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

一、什么是用户角色模型(用户画像)?


概念&作用


用户角色模型是真实用户的虚拟代表,通过一系列的真实数据分析,得出的目标用户模型。模型通过抽象来代表复杂的现象,好的模型强调结构的显著关系,弱化不太重要的细枝末节。我们要了解:用户与用户,用户与期望,用户与环境,以及用户与产品之间的关系并且将其视觉化


这里的视觉化可理解为:海量的数据标签(标签化、数据可视化)。比如我们要统计每个用户的行为特征,细分到人口基本属性、社会属性、生活习惯、消费行为等信息,抽象出各个具体的标签,赋予名字、照片、一些人口统计学要素、场景描述等,最终形成一个人物原型(personas)


创建用户角色模型的好处


· 与利益相关者、产品团队在研发中抛开个人喜好,聚集在用户动机和行为上,了解用户深层次动机与心理;

(抛开个人喜好:产品团队容易将自己的目标、动机、技巧代入产品设计中,这就是设计者心理模型)


· 避免设计陷阱,让产品设计更聚焦,防止走偏,避免把过多的心思花在其他边缘性功能上

(更聚焦、防止走偏:有人物模型为基准,团队就能清晰的对功能进行优先级排序,以核心功能、解决用户诉求的功能为主,可避免把注意力放在非核心且次要的功能点上。)


· 有助于为营销活动、组织架构、客户支持、战略规划及设计决策 提供有价值的信息。



由什么构成?


Image title


显性画像:用户群体的基本信息描述,如目标用户的年龄、性别、职业、地域分布、兴趣爱好等信息,一般通过客服人员线上交流、用户账号数据、常关注的内容做判断,间接获取数据;


隐性画像:用户群体深层次的特征描述,如使用产品的目的、解决什么问题、偏好、诉求、场景、愿景、使用频率等。主要以问卷、访谈、意见反馈等方式直接获得数据。


说到底,用户画像就是先对逐个有代表性的用户进行特征描述,然后对共性特征进行提炼、分类,最终将用户标签化、数据可视化。

Image title


二、用户画像构建的基本流程


用户角色模型不是拿来既用、用完即丢的,而是建立在系统的调研分析、真实的数据统计之上得出的有力结论。


这里要考虑用户画像的优先级,画像一般会存在多个(多个用户),通常一个用户只能有一个,不能为拥有三个以上画像的用户设计产品,容易产生需求冲突,要分清楚哪些是核心用户(既目标用户、产品的支撑者),哪些是非核心用户,所以我们的设计目标就是维护、培养、促成核心用户。


同时要以适合产品团队和项目需求为出发点,用户画像不是一成不变的,而是根据现实情况同步更新,现在我们进行四步画像构成法: 


Image title


1、确定分析维度


用户角色模型是针对特定产品或特定功能的,所以人物角色的分类一般是根据用户的目标(用户需求)、行为和观点(行为倾向)进行。


举例:

目标?什么原因促使你使用该产品?解决你什么问题?

观点?产品中最喜欢的功能?为什么喜欢?是否达到了你的预期?

行为?你最近一次使用产品做了什么?用了多久?


下面以2个维度做参考:

Image title


2、基础数据收集


数据是有力证据,是构建用户画像的核心依据,在基础数据收集方面,可以先列举出构建用户画像所需要的基础数据。


具体的思路如下:

Image title

上面列举的数据纬度相对比较多,在构建用户画像过程中可根据需求进行筛选。


这些数据有三个来源:相关文献资料和研究报告、产品数据后台、问卷调研和用户访谈,可以按照以下维度区分:

Image title

(这里涉及到用户研究中重要的环节:用户访谈、数据收集,将归纳为单独的知识点于下篇文章分享,期待有你~)


3、分析建模

通过以上收集方式并成功采集后,下面开始对不同的角色进行分类(通常采集多个用户做参考,如单个用户可直接将其标签化,然后套入完整模型中)


(1)先确定好产品属性,按照用户角色进行分类,比如外卖APP有:商家、消费者、骑手 三种角色,图例:

Image title


(2)然后将角色内的用户身上观察到的一些显著的行为列出不同的几组行为变量,例如:对产品的积极性、热情度、学习能力、熟练程度、消费观等


(3)将访谈对象和行为变量对应起来

这里就以电商产品为例,将用户个性(行为变量)做成一个区间轴,再把访谈对象放到区间轴上面对应起来,不需要那么,标出相对位置即可


注意:行为变量有两种情况

· 一种是连续性,比如使用频率的描述是:经常到从不

· 另一种则是非连续性,比如使用的平台:移动端、PC端


对这两种情况,大家要视情况而定,图例:


Image title


(4)找出重要的行为模式

把对象映射完后,寻找在变量轴上的对象群。如果一组对象聚集在6~8个不同的变量上,这很可能代表一种显著地行为模式,而这个模式是构角色模型的基础,图例:


Image title



三、画像呈现

找出行为模式后,画像呈现即从显性画像、隐性画像、场景和需求等方面,给用户打标签,并且增加一点描述性语言(描述人物行为和痛点,而不是描述解决方案),图例:

Image title


四、总结


(1)确定分析维度:当前产品处于什么阶段?需要什么信息?

(2)基础数据收集:对目标用户进行访谈,收集相关数据

(3)分析行为模式:将访谈对象和行为变量对应、找出重要的行为模式

(4)整理并呈现画像:描述特征和行为,创建人物故事


聊到这里可能有人会问:


Q:用户模型做出来会不会有人看?它是不是设计者虚构出来的套路?

A:用户角色模型是设计者通过用户访谈和观察得出来的真实用户行为,是有真实数据为依据的,所以不进行大量的用户调研,不为用户建模,不去创建用户模型,只知道意淫需求,说着“我认为该怎么怎么做”,都是一本正经地耍流氓。用户研究、用户模型是我们做好产品的基础和风向标。


Q:用户角色模型到底什么时候开始做?

A:先确定目标用户 → 对目标用户进行访谈 → 访谈后再建立用于模型

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


按钮设计,看这篇文章就够了!

雪涛

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

按钮在UI设计中是一种常用的UI控件,在界面中作为主要的行动点,引导用户进行相应的操作,它在用户和产品的交互中承担着重要的作用。


按钮设计看似简单,但是如果想要更好的交互体验,引导用户进行相应的操作,提升产品的转化率这仍是我们需要研究的问题。下面小编将从按钮功能类型和设计要点两个方面进行分析。


一、按钮功能类型


按钮的功能类型往往决定了一个按钮的设计方式,是需要强调还是需要弱化;文案是需要强引导,还是直接阐述功能;按钮上是放图标还是不放图标等。按钮根据功能的不同,可以分为不同的类型,主要有行为召唤按钮、表格按钮、标签按钮、命令按钮、悬浮按钮、开关按钮这六大类型。


1.行为召唤按钮


行为召唤(CTA)按钮其目的是诱使用户采取某些操作, 从而提高产品的转行率。简单来说就是通过设计诱导或激励用户点击按钮,例如立即购买、订阅关注、利益诱导、文字诱导等。


1)诱导购买


当行为召唤的目的是诱导购买时,按钮的设计不管从颜色、形状、样式都需要突出。让按钮看上去可点击,让用户进来第一眼就能知道该按钮的用途。如下图所示:

Image title



以美团外卖为例,该按钮的颜色采用黑黄对比、形状采用具有亲和力的圆角,在样式上加入投影同时加入送餐员的元素,配上小红点,能够清晰的给用户传递出可点击部分有去结算、送餐员。另外加入价格诱导,让你可直观看到优惠了多少钱,促使你进一步操作。


以淘宝详情为例,该按钮是一个组合按钮,由加入购物车和马上抢以及店铺、客服、收藏等组成,作为行为召唤按钮我们可以明确的看到,不管从颜色、形状、样式都能够让我们快速注意到。


2)订阅关注


当行为召唤的目的是订阅关注时,其重要程度相比诱导购买低很多,但是在设计时我们仍然需要考虑一个问题,这个问题可直接决定该按钮大小、样式等,这个问题就是需要根据产品目的判断是诱导用户订阅关注重要还是让用户阅读内容重要。如下图所示:

Image title



当内容重要时,按钮的设计需要弱化处理,以优酷视频的发现页和星球页为例,这两个页面很明显是以内容为主的界面,在设计时直接弱化了按钮形式,让按钮和整个界面相融合,但是按钮设计的原则是让其看上去像按钮,因此当按钮只是文字时可以加图标进行引导比如优酷视频发现页,也可以加入弱底纹进行引导还能让界面看上去整洁,比如优酷视频星球页面。

Image title


当订阅关注重要时,按钮的设计需要强化处理,以橘子娱乐和土豆视频为例,橘子娱乐采用粗描边渐变按钮,同时加入图标进行引导,具有较强的视觉引导作用,很容易唤起用户的关注。土豆视频采用黄色填充加图标引导,在视觉上和产品内容形成强烈对比,明显的以关注为主的界面。


3)利益诱导


当行为召唤的目的是利益诱导时,该按钮设计根据重要程度较高,因此在设计时可以考虑颜色、形状、加入图标、诱导文字等设计方法。如下图所示:

Image title



以大众点评为例,其领奖按钮明显比赚积分的层级高,因此为了突出领奖按钮采用了色块设计的样式,同时赚积分按钮采用描边设计进行弱化处理。


以腾讯doki为例,其打榜页面冲榜的重要层级较高,因此在设计时不仅采用了色块、加入动效图标、同时还加入了诱导文字,让按钮更明显同时诱导用户点击,其他去浏览按钮则采用描边样式弱化处理。


4)文字诱导


文字诱导简单来说就是通过文字,诱导用户进行下一步操作,多用于空页面、活动页面中,因此在设计时采用简单的色块填充即可,如果该页面为活动页面也可增加渐变或投影样式,让按钮更有空间感,进而突出按钮。如下图所示:

Image title



以得到为例,当你还没有学习计划时,它会对你进行提示“开始制定学习计划”,同时其按钮采用重要程度较高的色块+投影的方式,诱导用户点击。


以大众点评为例,当你还没有攻略时,它会对你进行提示“我也要创建攻略”,同时其按钮采用渐变填充的方式,诱导用户点击。


2.悬浮按钮


悬按钮浮是 Android 应用中最常见的一个控件。不过随着Android和iOS规范的不断融合,在iOS中也经常会看到各种各样的悬浮按钮。在设计上悬浮按钮应该采用显眼的颜色,以抓住用户的注意力。同时它应该是积极正向的交互,比如创建、分享、探索等,同时并不是所有页面都需要加悬浮按钮。如下图所示:

Image title


以UC浏览器为例,悬浮按钮在订阅页面的右下角出现,将按钮和界面结合很容易看出创建内容的意思,同时点击按钮还可呼出图文、视频等操作图标。


3.标签按钮


标签按钮往往呈多个出现,多使用在二级导航或条件筛选下面;以及表单页面作为切换条件选中。因此在设计样式上有选中状态和默认状态,同时其重要程度较低,在设计时不能喧宾夺主,需要弱化处理。如下图所示:

Image title

以支付宝为例,它主要用在投保的表单页面,其主要目的就是一个切换条件,重要程度远不及我要投保按钮,因此在设计时默认用的描边处理;选中采用淡淡的色块。


以转转为例,它主要用在导航下方,其主要目的也是切换条件,用户主要操作是看下方筛选出的内容,因此在设计时也进行弱化处理。


4.表格按钮


表格按钮也就是由一个白色网格加文字组成的按钮,从视觉上看和页面融为一体,特别不突出。因此多用在个人中心中不太重要信息或者不想让用户操作的退出登录界面中。如下图所示:

Image title

以爱奇艺为例,在我的界面中,关于我们和退出登录都是用的表格按钮,由于关于我们是不太重要信息,退出登录又是不想让用户操作的内容,因此采用表格按钮最为合适。


5.命令按钮


命令按钮也就是该按钮具有明确的指令,多出现在弹框中,通常会有一个文字或2个文字出现的情况。其要求是文字语义要明确,尽量不要用确定、好的、要等词汇,同时根据用户右手操作习惯居多,因此将重要的按钮放在右侧。如下图所示:

Image title



以京东金融为例,左图是京东金融退出的二次确认页面,右图是我调整文字之后的页面。我们说到文字需要表意明确,因此将确定换成退出后表意更加直白,降低用户理解度。


6.开关按钮


开关按钮也是我们很常见的一个组件。表示两种相互对立的状态间的切换,多用于表示功能的开启和关闭。当按钮开启后可能还会带来其他的相应操作。开关按钮最常见的就是手机设置中,但是也有很多APP将其用到界面中使用。如下图所示:

Image title



以美团外卖和小猪短租为例,它们在提交订单页面时都采用了开关按钮,同时在小猪短租中,当按钮打开底部会将“您可再入住完成10天内补全信息”进行展开显示,提示用户去填写。这种点击展开的操作还可增加更多的功能相关内容。



二、按钮设计要点


1.根据产品为按钮选择适合的形状


在按钮设计时,需要根据整个界面风格设计合适的按钮,按钮样式主要有直角、小圆角、全圆角三种样式。

Image title

直角的含义:严谨、力量、高端。适用于金融类、奢品类产品中,让产品给人严谨安全、高端的感觉。例如寺库。


半圆角的含义:活泼、年轻、安全。适用于儿童类、年轻化、娱乐类、购物类的产品中,提升亲和力,拉近用户的距离。例如土豆。


小圆角的含义:稳定、中性。适用于用户跨度较大的常规类产品中,例如微信。


Image title

以寺库、微信、土豆为例,寺库是品类电商,因此在设计时需要提现高端,因此在按钮设计时采用直角设计。而微信的用户群体上到七八十岁,下到几岁其年龄范围广,因此采用稳重的小圆角较为稳妥。土豆短视频其用户群体较为年轻活泼,因此采用全圆角较为适合。


2.使用合适的状态


在部分界面设计中需要考虑按钮的不同状态的设计,从而提高用户操作流畅度。移动端完整的系统按钮可以分为正常状态、按压状态、禁用状态。

Image title

其中,正常状态和加载状态展示的是APP的主色;按压状态在正常态的基础上叠加不透明度15%的黑色#000;禁用状态是设置灰色或者将正常态设置不透明度45%,该状态适用于提交界面中使用,比如登陆注册、转账等。如下图所示:

Image title

以京东金融为例,当未输入转账金额时,按钮禁用为灰色,当输入金额时按钮为正常状态。不过随着互联网的发展,宽带速度不断的提高,按压状态慢慢被抛弃,他存在的意义不像以前网络不发达的时候,点击还需要时间反应。


3.提供恰当的反馈


当用户点击按钮时,他们希望界面可以给些恰当的反馈。如果没有任何反馈,用户会以为系统没有收到他们的操作,然后就会重复点击。这种行为常常导致多个不必要的操作。如下图所示:

Image title



以土豆短视频为例,当点击关注时为了避免用户点击没有反应的情况,可在按钮上添加加载状态,当关注成功后图标状态改为禁用状态,同时文字变为已关注。



总结


按钮设计看似简单,但是如果想要更好的交互体验,引导用户进行相应的操作,提升产品的转化率这仍是我们需要研究的问题。本篇主要将从按钮功能类型和设计要点两个方面进行归纳总结。


按钮功能类型:主要有行为召唤按钮、表格按钮、标签按钮、命令按钮、悬浮按钮、开关按钮这六大类型。在使用我们需要根据对应的功能和重要程度选择适合的设计。


按钮设计要点:主要有根据产品为按钮选择适合的形状;使用适合的状态;提供恰当的反馈这三大注意要点。

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

 

教你用「认知超载」提升用户体验!

雪涛

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

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档