首页

巧用动效解决问题

鹤鹤

Image title

动效在用户界面中的应用是当今引起人们高度关注和争论的话题。虽然有很多人觉得动效是一个不必要的功能,他会使用户界面过载并使其变得更加复杂,但大多数用户都认为动效是交互体验不可或缺的一部分。设计人员和开发人员研究了越来越复杂的方法,使动画看起来令人愉快,并且能够解决现代应用程序和网站的问题。


为什么用户如此热爱动效?大多数情况下,因为动效支持实际和真实交互的本质,它创造了与人们在现实生活中物理对象交互时所具有的感受和感知水平。这种感觉可以提高用户的积极性,因为用户感觉越自然,处理应用程序或网站所需的精力就越少,工作方式也就越清晰。让用户满意,没有任何秘密,满足和愉悦是鼓励人们再次使用该产品的最重要的事情。


就像界面中的所有内容以及与之交互的过程一样,动效必须是一个功能元素,而不仅仅是装饰。在规划围绕数字产品的用户旅程时考虑运动元素,设计师应该在决定将其应用于布局或过渡之前,深入分析其提高产品的可用性,实用性和可取性的潜力。用户界面中的动效需要经过深思熟虑的思考,并且始终需要有一个明确的目标。在交互过程中使用它的优点和实用性必须是显而易见的并且要大于可能存在的缺点。动效应该成为锦上添花,而不是美中不足。


Image title



定义问题


使用动效不仅具有吸引力,也是揭示可能存在问题的最佳方法之一。它可以在设计过程的任何一个阶段进行:


用户调查会让你知道目标用户是谁,他们的年龄,偏好,技术水平,使用产品的环境和条件,以及来自用户方面的许多其他因素会影响用户体验;


营销研究将洞察现有产品的强弱面,形成用户忠诚度的方法,这是界定USP解决特定用户问题的良好依据,也是产品呈现和表现原始方式的良好基础;


UX线框图阶段可以考虑交互,布局和转场的逻辑,并得到可以通过动效增强目的的第一个假设;


原型设计阶段将揭示与屏幕实时交互的新方式;


UI设计阶段将为产品方案和系统提供复杂的视觉展示,为应用程序或网站应用动效提供新的视角;


用户测试将揭示动效元素的方案是否正确,它们的好处是否真的大于可能存在的缺点。


Image title


在每个阶段,如果设计师设定的目标是揭示用户可能遇到的大或小问题,那么动效以及任何其他设计元素都可以扮演问题解决者的角色。


让我们回顾一下可以通过界面动效解决的一些典型问题。



问题:我想知道行动已经完成


这是可以通过在UI中应用动效细节轻松快速解决的问题之一。通过清晰的运动并结合微交互,为用户创建快速反馈,使得导航变得简单直观,同时也变得更加。动效按钮、切换键、切换开关和其他交互元素在几秒钟内通知用户,激活快速视觉感知的所有潜力。


Image title

开关控制动画

Image title

汉堡菜单动画

Image title

汉堡按钮互动

Image title

标签栏交互

Image title

添加按钮交互

Image title

橡胶指示器


问题:我想知道行动正在进行中


当用户与数字产品交互时,他们想知道每一步都发生了什么。让用户等待将会导致用户流失。但是,当用户得到反馈时,等待就不会那么烦人了。所以,这方面应该在设计中着重考虑,通过界面动效来减少等待感有很多种方法。这是“拉动-刷新”发挥作用最大效果的最佳时机。

Image title

拉动刷新

Image title

预载

Image title

拉动刷新

Image title

拉下 - 沙漏

Image title

拉下 - 太空船


问题:我看不到进展,也不明白需要多长时间


通常仅仅让用户知道该过程正在进行是不够的。他们想要的还有很多:看看进展的速度和所需要的时间。此时,界面动效就是一个很好的帮手。加载条和进度条,动效时间轴和其他动态元素等等,都可以一石二鸟:


1、它们能够让用户明确当前进度状态


2、它们可以成为消除互动过程中等待的负面情绪的一种娱乐元素


3、它们可以成为一个病毒性的功能,用户希望与其他人分享,并吸引更多的用户来使用产品

Image title

时间线应用程序的GIF

Image title

动态滚动的GIF


问题:我不想让我的屏幕弄得一团糟


在界面设计中考虑这一点至关重要。如果屏幕或页面的信息看起来乱七八糟,这些信息没有经过明确的梳理编组,那么用户需要付出额外的努力来了解它的工作原理以及可以找到所需信息的位置。


在绝大多数情况下,用户希望拥有能够简化和改善他们生活的应用程序和网站,甚至可能会为他们做一些工作,而不是在交互上花费更多的精力和时间。动效在增强与各种数据模块和部分交互方面是一种很好的方法,即使是在高度数据饱和和复杂的界面中,也能够使所有内容清晰明了。

Image title

Image title

Image title

Image title



问题:我想先看看关键的事情


视觉层次和清晰的导航一直是设计人员创造交互式数字产品的一大关注点。用户应根据其目标和条件,立即关注交互的关键要素。界面中的动效元素为这方面提供了强大的支持力,使布局中重要元素的视觉标记更快、更清晰。

Image title


Image title



问题:我想要感受自然的互动


这是大多数用户无法形容的问题,但对用户体验有着很大的影响。如果用户说“我不确定出了什么问题,但肯定有问题”,试着考虑让动效更加自然。界面中的动效可以创造出令人愉快的错觉,接近与物理对象的自然交互,这通常不需要太多的认知过程。例如,如果拉动物体,按下它,移出标签,动作应该感觉自然。用户无法看到设计师完成这项复杂工作的难度,他们会认为这是理所当然的,而让他们感到舒适的事实,将是对设计解决方案的最大赞誉。

Image title

Image title

Image title


这种问题同样存在与WEB界面中。在滚动网页时,布局元素的平滑移动可以显著增强用户体验,并且创建一个整体流畅交互的感觉,而不是几个单独的页面。总之,这是令人愉快并且有吸引力的,这些情绪是留住用户的一个很好的因素。


Image title

Image title

Image title

Image title



问题:屏幕/页面很无聊


在谈论界面时,人们常常把功能性和可用性作为关键或者有时甚至是唯一需要考虑的因素前置到前面。这是正确的,也是合乎逻辑的,但是不能否定这样一个事实,那就是人们不仅仅受逻辑驱动。情感和审美满意度等因素对用户体验的影响也很大。一方面,实用性和可用性与情感和美学之间的巧妙平衡可以给用户带来友好的产品。动效在界面设计上是一个很好的助推器。它可以勾勒出色彩和渐变的美,将生活气息融入到布局中,使运动充满活力,反之亦然,通过运动和原始过渡增强用户界面元素的力量。

Image title

Image title

Image title

Image title

Image title

因此,毫无疑问,用户界面中的动效在解决各种交互问题方面具有巨大的潜力。尽管如此,即使是添加到UI中的最细微的动作也需要经过深思熟虑的考虑,不仅要分析优点,还分析可能存在的缺点。动效应该帮助用户,这是它在界面中的主要目标。

转自-ui

如何在Google Play商店中使你的应用获得推荐

鹤鹤

在Play商店中获取Android应用程序可能看起来是一项具有挑战性的任务。请遵循以下策略,以最大限度地提高应用获得推荐的机会。

在Play商店中获取Android应用程序可能看起来是一项具有挑战性的任务。请遵循以下策略,以最大限度地提高应用获得推荐的机会。


如果您希望自己的应用成功,那么在Google Play商店中展示就是重要的一步。


但是,目前 Google Play Store 中有超过250万个应用程序和超过1,300个应用程序加入列表,大多数用户注意到的应用程序竞争越来越激烈。


在谷歌Play商店的Android应用总数exeeds 250万为2018年11月,按照AppBrain。



即使您排除了低质量的应用程序,仍然有超过220万个应用程序可供竞争,以便在Play商店中展示您的应用程序。


但是,有一些方法可以帮助您的应用获得推荐。

Google Play商店提供了众多候选名单,包括编辑选择 / 员工精选 / 精选等令人垂涎的广告 ,可以策划应用并吸引用户注意力。


如果你的应用在其中一个列表中,就可以在全球范围内提供更多下载、更多用户和更多粉丝。


虽然Google没有为应用程序设置特定标准,但仍有一些策略可用于增加应用程序在Google Play Store中展示的机会。



为什么Google会列出精选应用?


Google发布精选应用列表主要有两个原因:增加可发现性和识别出色的工作。


首先,Google Play的列表可以帮助用户轻松发现优秀的应用。随着Play商店中数百万个应用程序的推出,用户很难确定哪个应用程序能够最好地满足他们的要求。


通过在特色列表中添加应用程序,Google向用户保证其可提供可用性,功能和安全性。


其次,Google Play的列表表彰了开发人员的出色工作。


对于Android开发人员而言,没有什么比看着他或她的工作在数百万其他应用程序中迷失更令人沮丧的了。特色列表和类别支持为Google Play商店提供优质且实用的Android应用的开发者。


特色应用列表对Android用户和开发人员同样有用。



为何在Google Play商店中要出现重要推荐?


除了获得自豪感并提高应用程序的在线声誉外,在Play商店中推荐您的应用程序还有很多好处。


其中一些好处包括:

  • 增强应用可视性

  • 更多的应用下载量

  • 增加收入

  • 高品质,敬业的用户

  • 更轻松的应用推广


例如,根据SensorTower,接收编辑选择徽章可以将应用下载量从4倍增加到高达24,000倍。

上图显示了接收编辑选择徽章如何直接影响应用程序下载的次数。


有这么多潜在的好处,值得为您的应用提供最佳机会,以便在Google Play商店中展示。



Google Play商店有3个关键列表


Google Play发布了3个主要应用列表:热门,新手和策划。这些列表中的每一个还包含几个子类别。


在“热门”名单包括 4 个分类:

  • 热门免费:历史上的免费应用程序

  • 热门付费:有史以来的付费应用

  • Top Grossing:推动收入最高的应用和游戏

  • 趋势应用:过去24小时内安装率较高的应用


在“新建”列表中包括 2 个分类:

  • 热门新免费:自发布之日起不到30天的的免费应用程序

  • 热门新付费:自发布之日起不到30天的的付费应用程序


在谷歌团队精心整理中包括 4 个名单:

  • 特色:新推出的应用程序

  • 员工精选:经常更新的员工选择的应用列表

  • 编辑推荐:最佳Android应用的所有时间

  • 顶尖开发:将最好的应用程序开发人员留在Play商店


有这么多的列表,有很多机会优化您的应用程序,以增加其中一个推荐的机会。



11种方式让您的应用程序在Google Play商店中推出


您应该采取11个关键步骤来提高应用在Google Play商店中展示的机会:


  1. 分析其他精选应用

  2. 改善用户界面(UI)和用户体验(UX)

  3. 优化功能和效率

  4. 针对Android进行优化

  5. 利用Google技术

  6. 专注于应用商店优化

  7. 本地化您的应用

  8. 推广您的应用

  9. 与有影响力的人合作

  10. 收集评分和评论

  11. 更新您的应用



      1. 分析其他特色应用


在Google Play商店列表中展示的第一步是研究已经推出的应用。


在Play商店做一些研究,选择一些带有Editors'Pick和Top Developer等标签的应用程序,并将它们安装在您自己的Android手机上。


然后,分析应用程序,注意它们的共同特征。特别是,检查应用程序的设计,功能以及使其在类别中的类似应用程序中脱颖而出的所有内容。您将发现相似之处并更好地了解它们在Play商店中的特色。


最后,将这些应用程序中的内容实施到您自己的应用程序中,以提高您的应用程序获得Google Play商店推介的机会。


      2. 使您应用程序的UI与UX达到一个最出色的状态


如果你深入分析一些有史以来最好的Android应用程序,你会发现它们都有一个共同点:无缝的用户界面和出色的用户体验。


成功的应用程序专注于维护高质量的用户界面,并在所有移动设备和平板电脑设备上提供独特互动且一致的体验。


据Google称,所有Android应用都应在其用户界面中实施Material Design指南。如果您未能实施这些指南,请不要有将您的应用程序选为编辑推荐的想法。


实际上,遵循Google设定的Material Design标准是在Play商店中推出应用程序的首要前提条件。


      3. 优化应用程序的功能和效率


无论您的Android应用程序设计有多么出色,如果它无法满足Google设置的功能和用户交互质量标准,它将永远不会进入编辑选择列表中。


在将最终的.APK文件上传到Google Play商店之前,请确保您已针对Android应用商品质量指南进行了测试。这些指南为开发人员提供了改善整体用户体验的最佳实践。他们还提供了一个应用程序有资格获得Play商店特色部分所需的线索。


遵循这些准则,特别是核心应用程序质量指南,将帮助您优化新构建的Android应用程序的功能和效率,确保您提供尽可能最佳的用户体验。


      4. 让你的Android应用程序更加友好


要在Play商店编辑眼中使用Android应用,您必须尽可能使其与Android兼容。


如果您的应用最初是为iOS开发的,请确保:


  • 关注Google的启动核对表

  • 支持高分辨率显示器

  • 包含默认的Android按钮

  • 适用于各种类型的设备,包括平板电脑

  • 支持和即将推出的Android版本

  • 是一个量身定制的Native应用程序,仅适用于Android(或至少适用于Android)

  • 文件大小限制在100MB以下


        5.  利用的Google技术

每年,Google都会在其年度I / O开发者大会上为开发人员介绍一些产品和技术。 


Google奖励使用其技术构建的应用,例如Firebase,Flutter和Google上的Action。 


如果您成为这些技术的早期采用者,您的应用程序在Play商店中获得推荐的机会肯定会有所改善。 

        6.注意App Store优化


大多数人都熟悉搜索引擎优化(SEO),其中涉及针对搜索引擎结果优化网站。 
同样,应用商店优化(ASO)是指优化移动应用以在Google Play商店和Apple App Store等应用商店中排名更高的流程。 


要提高Play商店中移动应用的可见性,请注意以下因素: 


  • 图标:确保您的应用图标足够引人注目以吸引用户的注意力。 
  • 标题:使用相关的关键字词组优化您的应用标题。 
  • 描述:保持您的应用程序的描述简短,甜美,简单。确保它清楚地告诉用户您的应用是什么以及他们应该使用的原因。 
  • 关键词:具有高搜索量和低竞争力的目标关键词。 
  • 屏幕截图:上传您应用的一些高质量屏幕截图,如果可能,创建并上传15-30秒的视频,以便用户更熟悉您应用的功能。 


例如,免费的照片编辑应用程序 Pixlr 上传了几个高分辨率的描述性截图,以清楚地向用户显示应用程序的内容。该应用程序的发布者甚至添加了一个1分钟的介绍性视频,以进一步向用户显示他们可以使用该应用程序做些什么。 



正如您在上面的图片中看到的,Pixlr有效地使用字幕清楚地告诉用户应用程序的功能和用处。 

        7. 将您的应用程序本地化


全球有超过20亿活跃的Android用户,以尽可能多的语言提供您的应用程序,在Play商店中推出您的应用程序也起着至关重要的作用。 


将您的应用本地化为多种语言始终是明智的决定,可以帮助您提高应用在Google Play商店中展示的机会。 


当您尝试让全球各地的用户都能访问您的Android应用时,请务必查看Google自己提供的本地化检查清单。 

        8. 有效的推广您的应用程序

除了优化Google Play商店的应用外,还应尽可能在各种社交网络和技术平台上宣传您的应用。 


投入时间和精力进行推广不仅可以帮助您获得更多的应用下载,还可以提高您的应用在网络上的可信度。吸引用户更有可能引起Google Play商店的注意,他们可能会将其列入推荐列表中。 


要宣传您的移动应用,您应该: 


  • 为应用创建有效的目标网页 
  • 使用AdWords宣传您的应用 
  • 在Facebook和Twitter等社交媒体平台上推广您的应用 
  • 在Android Authority和Android Central等受信任的技术出版物上发布您的应用评论 
  • 发布新闻稿以获得具有高域权限的媒体的媒体报道 


这些促销活动将为您的应用提供最佳成功机会。 

        9. 与影响者建立关系
与行业中的影响者保持健康、持久的关系也是让您的应用在Play商店中展示的关键。 
Android开发人员应通过以下方式与影响者建立关系: 
  • 通过LinkedIn与Google Play商店经理和编辑联系 
  • 与您的区域移动解决方案领先联系 
  • 联系已经有特色的开发人员和团队 
培养强大的专业网络可以提高您在拥挤行业中的知名度。 

      10.保持您的高评级和高评价 

用户体验和用户满意度始终是Google的首要任务。在确定是否推荐应用时,Google Play商店编辑团队会考虑这些相同的因素。 


如果您彻底分析Play商店,您会发现超过50%的精选应用的评分为4.5或更高。 



因此,如果您真的想要推荐自己的应用,请确保它至少有50,000次下载和4.5级评分。

要获得大量下载并提高应用评级,您应该: 
  • 提供出色的用户体验 
  • 让您的应用程序免费获取 
  • 尽可能多地营销你的应用程序 
  • 激励用户审核您的应用 
  • 激励用户进行推荐 
  • 投资高质量,引人入胜的内容 
  • 利用influencer和社区外展 
  • 在社交媒体上主持赠品 
  • 在电子邮件签名中为您的应用添加墨迹 
遵循这些提示可以吸引用户,生成评论,并最终提高您的应用登陆特色列表的机会。 

      11.保持您的应用程序不断更新 

Google和用户都喜欢经常更新的应用。 
这并不意味着您每天都需要为应用添加全新功能。相反,您应该跟踪用户面临的应用程序问题,并通过定期更新提供解决方案。 
不要忘记在圣诞节,感恩节和新年等特殊场合更新您的申请。这是您的应用得到关注的最佳时机,因为Play商店的编辑可能会在特殊场合策划季节性应用列表。 


应用开发者应努力成为Google Play商店的精选内容 
通过遵循这些最佳做法,您可以增加在Google Play商店的精选部分中确保信誉良好的推荐机会。 

最重要的是,Android应该优先提供无缝的用户体验,引人入胜的用户界面和引人注目的营销,以在Google Play上取得成功。


转自-站酷


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

设计师的角度分析产品改版-高德地图_10.0.3

鹤鹤

前言


Hello~各位酷友,之前高德地图做了一次蛮大的改版,于是这周我就抽空给大家带来这个系列的第二篇改版分析。还没有看过第一篇的也欢迎去看看。废话不多说,直接进入正题。还是一样,阅读时长大约15分钟,泡杯咖啡,进入专注状态就往下吧。



一、改版概述


对比版本号:9.1.0(旧)→  10.0.3(新)

测试机型:iPhone7

高德这次更新距离上一次已经有一个多月的时间了,版本号也有了一个大的跨越,给我一种憋大招的感觉。以下,我会从这四个方面进行说明:

(1)首页框架

(2)背板内容

(3)常用出行方式选择

(4)发现页


跟之前一样,还是主要说明有改动的部分,以框架层和视觉层为主要切入点,带一小部分产品功能上的分析。



二、首页框架


这次改版用到了一个新的控件,底部上拉式背板(不知道这个控件有没有更正式的名称,暂且这么叫它),有的设计师朋友可能在一些概念性作品里见过类似的控件,这次高德使用它说明了这个控件是落地的。

这个控件之所以受欢迎有以下原因:

首先,它的操作符合我们的手势操作规律及拟物原则,交互方式一目了然。平时没事就这样滑上滑下都是一个爽点。

其次,它可以设计出不同高度的固定状态,如下图就有三种。这样能地节省页面空间,承载大量的隐形内容,同时区分不同内容的优先级。


另外,这次改版还加入了常见的底部标签栏,配合背板,对首页的内容框架布局进行了一个规整,具体我们看一看下面这张图:


(1)红色:原来顶部的搜索栏调整到了默认状态的底部背板上。搜索栏放在底部的方式在目前还是比较大胆的设计,但对于地图应用而言却非常适合。首先搜索栏肯定是整个应用交互最频繁的控件,放在底部很大程度上提高了用户点击的便捷性,特别对于单手握持的用户。


(2)紫色:原来底部的附近按钮改成了便签栏的第二个标签。即发现页。这个改变节省了大量的页面空间,旧版做成底部通栏按钮层级确实过高了,同时天气温度的标识也比较鸡肋。


(3)黄色:原来最难点击的图标按钮改成了现在最易点击的“我的”标签,提高了这个入口的辨识度。


(4)绿色:旧版首页分散的悬浮按钮统一到了右边,同时样式都改成了圆形的底板。略微降低了路线按钮的层级。这里有一个层级区分的设计小细节,下方常用的定位与路线按钮会比上方消息与地图类别按钮大10pt。


(5)灰色:原来右边的一些悬浮小工具按钮及快捷地址设置按钮都从首页去除,移动到了底部背板的隐形内容里。这样一来地图的显示区域也随之增加了,被移走的按钮会在后文提到。


小结:总体而言,首页的这次大改,主要是把交互区域都调整到屏幕的右下方。我猜测目的应该是考虑到了很多用户使用地图应用时是单手握持,处于边走边看的状态,增加用户的交互效率。另外,标签栏的使用也增加了入口的辨识度。在视觉感受上,新版首页会比旧版更简洁、清晰,同时具有结构性。


三、背板内容


接下来要说的就是背板上的内容,首先我们还是从内容布局上分析一下。


(1)搜索栏,在前面已经提到过


(2)工具箱,工具箱在这次改版中也是一个主要的更新点。在旧版中,工具箱的层级是很弱的,在我的页面里的二屏才能找到。这次移动到主页的背板中,显然也是提高了它的触达率。


同时,原工具箱中的工具较少。在新版中,工具箱中加入了很多的新功能,我数了数,新版比旧版多了16个功能。排列上使用了归类式的图片列表。在这里也有一个设计上的小细节,顶部我的工具的图标样式与下方的图标样式是有区分的,顶部图标统一加上了圆形彩色底托进行反白,突出了顶部图标的层级。具体参看下图:


另外,工具箱调整到首页以及加入的很多新功能会跟下面要讲的另一点更新有关。


(3)常用地点

即旧版的地点悬浮图标改成了现在的列表式按钮


(4)新手引导教程

点进去就是引导页,通过动效插画的形式向用户说明了本次更新的几大要点。


小结:如同上文所说,背板的使用是本次更新的主要承载区,综合考虑了手势交互、内容布局、内容优先级等因素,非常值得我们进行学习与参考。


 四、常用出行方式选择


在更新后首次打开应用时,有一段引导动画,主要告诉用户选择常用的出行方式,分别是公交与驾车。因为动画较长无法上传,有兴趣的朋友可以自己去看看,引导动画也是近期比较火的一种设计方式。

而选择不同的出行方式后,地图样式与工具箱的默认推荐工具也会有区别。

可以看到,选择公交后,地图里会主要突出公交站的图标,并弱化其它图标,让用户明确的知道哪里有公交站。


小结:让用户选择常用出行方式充分考虑了用户的出行场景,让用户主动选择出行方式进行用户划分,并据此提供更精准的服务内容。可以看出,在相对成熟的产品中,功能上的创新是一部分,但是能将已有的内容更贴切地服务于用户也能创造出很大的价值,并且能让产品更具备竞争力。


五、发现页


周边推荐时地图应用最能收获价值的内容板块,在这次更新中,发现页面不仅是入口做了调整,二级页面里的内容也有一定改变。两版的顶部区域内容是一样的,都是一个搜索框加宫格式分类入口。区别在于下方的瀑布流内容帖子。旧版使用了两个分段控件进行了更详细的分类,但新版做了减法,把所有的选择器都去掉了,同时也去掉了商户评分以及营业时间信息,仅保留了距离位置信息。另外使用了卡片区分不同商户内容。


小结:简化页面的好处在于有效地提高了浏览效率。而且仔细思考一下就会发现旧版的两个分段选择控件确实略显多余。顶部的宫格式分类入口就足以满足用户的搜索需求,做过多的分类反而会让用户困扰。但我个人认为评分信息还是可以保留的,毕竟是推荐内容,能给用户提供很大的参考价值。


六、总结


以上就是高德地图本次更新的主要内容。在这次更新中,我认为最值得我们学习的就是它整个改版逻辑是非常清晰的。从用户场景出发,考虑到用户的操作手势以及内容优先级,具体落实到了页面的布局。大家也可以从页面布局再反向思考到它的改版目的。多重复几遍就能更清晰地理解这次改版的核心。

转自-站酷

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

福格行为模型:让用户行动起来

鹤鹤

你还在做个单纯的画图仔吗?



  • A设计师接到需求,第一时间打开花瓣,不管三七二十一就是画图,沉浸在自我世界里无法自拔,后面和需求方一对接,发现完全没有理解需求方的意思,陷入无止境的改稿。

  • B设计师接到需求,先看看竞品截图下来拖到ps/sketch里面,抄抄这块抄抄那块,拼凑在一起,感觉很完美!然后交给产品就好交差了。

上面2种情况,B设计师会比A设计师好一点,但这样久而久之,完全处于被动的状态,失去了思考的能力,一边偷着懒一边抱怨着设计没有话语权;时间久了工作2-4年还是个碌碌无为的却有着“经验+”设计师,看着别的朋友已经在别的行业赚的盆满钵满,摸着自己头发开始怀疑人生,纠结自己是不是不适合设计,是不是该换行了,或者有的只是为了满足温饱的工资坚持着重复的工作。


  • 但其实想说如果不停留在表面的设计,你会发现设计真的很好玩,很有趣,涉及很宽很广,虽然自己现在也懂得很少,但每多看一个知识点,每多思考一些,觉得自己无比的充实!!!

  • 本文主要是围绕BJ fogg行为模型对用户行为的一些思考,运用到实际的工作中,让你的设计更加有理有据,更有说服力!!建议阅读10-15分钟~



生活中的行为问题


为什么很多人看到商场打折就会忍不住剁手?为什么那么多人痴迷于抖音?为什么女生很喜欢追泡沫剧?为什么很多人很喜欢发朋友圈?为什么到情人节买花的一大堆?....


再例如工作中:用户期望借助你的产品实现怎样的目的?用户为什么会购买你的的产品?用户基于什么理由去关注你的产品内容?用户为什么看了你的界面就没有下文了?用户是基于什么会再次回到你的产品?

这个模型可以很好的解释人所发生每一个行为,行为=动机+能力+触点


BJ Fogg’s behavior model


  • 这个模型是以耶鲁大学教师 Fogg2009 年发表的一篇论文为中心,总结了如何从设计上提高转化率,其关键是Motivation-Ability-Trigger(动机-能力-触发),三要素缺一不可;

  • 任何一个行为的发生,都需要满足以上三个要素——人们需要有产生行为的动机、要有发生行为的能力,以及正好有一个合适的触发点。


  • 也就是说你如果想要用户发生某种行为,你必须给到用户足够的动机,并且让用户有能力去做到,而且有一种能触发用户行动的触发器来提醒


  • 根据这个原理马上可以解释:为什么很多人看到商场打折就会忍不住剁手?首先这个人有购物需要的动机,并且具备支付购物的能力,看到商城打折感觉很便宜这是触发点,最终触发人购物的行为。



已知:行为=动机+能力+触发;所以想要用户发生行为就要从这3个方面去入手


01、动机


  • 我们常说洞察用户需求,挖掘用户痛点,其实就是在寻找用户动机!


  • 做一件事的动机是什么呢?

    • 满足这几点:愉悦感(Pleasure)、期待(Hope)、归属感(Acceptance)

    • A不断买口红,因为不同口红可以最短时间能让自己瞬间变得美美哒,看着美美的自己忍不住的开心愉悦,还会期待新上架的口红色号,收集满满的口红让A很有归属感。

    • B不停刷抖音,生活无趣艰难,看着各种有趣好玩的视频就能获取快乐,上下一滑乐趣无限,期待别人更新更好玩有趣的视频,自己也可以发视频获得别人的赞和喜欢。

    • C经常看偶像剧,生活中平坦无趣,看着超甜欧巴满足自己所有的浪漫幻想,期待幻想自己也能成为剧中的女主角,沉迷其中,或者是觉得剧中人设是自己向往的期待,努力所要变成的样子。


  • 说到动机一定还要了解美国著名社会心理学家亚伯拉罕·马斯洛提出来马斯洛需求层次(Maslow's Hierarchy of Needs);总共有5个层次,每一层都有相对应不同的需求,且只要某一层次的需要相对满足了,就会向高一层次发展,追求更高一层次的需要就成为驱使行为的动力。相应的,获得基本满足的需要就不再是一股激励力量。

  • 现在经济的发展普遍人都满足了基本的需求,开始有更高层次的需求;所以更需要上面3层成长性需求:情感和归属的需要、尊重的需要、自我实现的需要;

  • 挖掘用户的动机也就先了解目标用户人群的不同阶段需要,寻找其内在动机和外在动机,以下是在用户体验中应用,提升用户黏度的案例:

  • A:例如你是腾讯的VIP会员,你就可以比别人更早看到你心心念每天追【小欢喜】;——满足了用户觉得自己别人更有优越感,享受到更尊贵的服务

  • B:例如你的设计作品上了站酷首推,受到大家的一致点赞好评,你会更有动力监督自己发作品和学习;——让用户充满信心,获得平台的认可倍感成就

  • C:例如你在扇贝里背单词坚持了100天,在朋友圈晒打卡记录炫耀,塑造自己渴望成为的群体的对象;——满足用户成为自己渴望坚持不懈认真学习的人

02、能力


  • 有足够的动机之后,还必须要用户有能力来完成

  • 能力指人本身的能力(例如设计师很熟练使用ps、sketch、ae;年轻人普遍比老人更会用智能机器...);但有些能力不够的(例如老人、小孩、能力障碍者,以及有需求的新手)这个时候就需要降低门槛或者提高用户能力,因为是人性的弱点就是懒呀,就算有这个能力但是动机没那么强就不会引发行为了

  • a 降低门槛

  • 降低门槛也是降低用户成本(时间、金钱、精力...),让用户发生行为变得很容易;因为这个用户成本越低,越能引发用户行为时间,体力、脑力支出,社会舆论以及生活习惯...

  • 例如刷抖音,只需要上下滑动,双击屏幕即可点赞,沉浸式体验不干扰用户,可以让用户最简单的操作就可以获得无限的乐趣

  • 例如微信朋友圈点赞,总会存在一些用户没有东西发朋友圈,只想着看看朋友圈,随手点个赞,还会很有参与感

  • 例如常说的用户体验的三个要素:『不要让我等,不要让我烦,不要让我思考』。其本质就是降低用户成本,让用户发生行为变得很容易

  • 举个反面例子,拨打10086的人越来越少了,太麻烦了,记得以前拨打10086听一大堆废话按0才能人工服务,充个值还要跑营业厅


  • b 提高用户能力

  • 想要提高用户的能力,那就得有利益相关了

  • 例如:淘宝商家后台一开始是很不好用的,但是还是有很多商家入驻,为什么?因为要赚钱要赚钱呀!

  • 再例如:ps很容易学会吗?至少没有美图秀秀容易,但是设计师就不用学ps了吗?不会,设计师都会ps,当然也可以用sketch替代ps,但是设计师就要去学不同的设计技能软件



03、触发


  • 有动机并且有能力,触发才能有价值,用户的行为=动机+能力+触发;根据不同动机和不同能力来说用户的触发点也会不一样

  • 人们的行为并不完全是自己主动选择的,而是在社会情境和个人因素的双重作用下产生的。

  • 不同动机不同能力的用户需要不一样的刺激

  • 场景刺激:适合高动机的人

  • 高动机高能力的人只需一个促发点即可。低门槛吸引力高的活动,我们只需要将参与的按钮做的醒目再醒目。例如很多活动会把按钮做的很有点击的欲望

  • 高动机低能力则需要引导,例如APP大改版时,产品的新手引导;例如游戏刚注册都会有逐步学习阶段,都是从简单到难;


  • 利益刺激:适合低动机、高能力的人

  • 这种用户需要更多的事件来激发他们做某件事的动机;例如我本来没想点外卖的,朋友分享了一个饿了么红包给我,我点击领取了红包,心想这红包不能浪费呀,最终还是点个外卖,“红包”链接就是触发器,让我最终点了外卖。


  • 场景+利益刺激:适合低动机、高能力的人

  • 对于利益刺激没那么直接没那么诱惑的时候,可以场景和利益一起更强烈的刺激,例如饿了么的超级会员充值促销活动给人的感官意识是:充会员可以加送无门槛红包给你,超级划算超级便宜快来买我呀!



根据BJ fogg行为模型用户分类


  • 工作中根据用户不同的动机和能力可以分为4大类,并且制定不同的体验设计策略


  • 1.有动机有能力用户

  • 这类用户简直是真爱,不需要怎么管的,一些核心种子用户也是从这里产生的,一些新的功能可以让他们来测试。这类用户可以没那么需要关注,不需要太有个性的需求,适当提升其体验就行。


  • 2.有能力没动机用户

  • 这类用户需要激发动机,结合马斯洛需求层次找出用户不同阶段的需求,改变他的意识;内在动机是比较难挖掘发现的,如果感兴趣可以移步心理学类的书籍;外在动机送奖励,例如饿了么会有每天满20元送奖励金,分享出去有红包领取,每日签到送红包;还有滴滴打车初期送补贴。


  • 3.有动机没能力

  • 降低门槛,提高能力,同时要帮助和鼓励。这块就很需要建立用户心理模型,优化用户体验,精简用户操作步骤;例如微信男女老少都会用的产品。


  • 4.没动机,没能力

  • 这类用户可以直接放弃,投入产出比太低,需要降维,使其能力降到匹配意愿的层级。比如典型的微信朋友圈,总有那么些人不发朋友圈,不聊天,写评论也不知道写啥,但是他有夸奖别人的意愿,给他点个赞功能就行。






a、要有足够的动机。——即你的产品能满足用户什么层次的需求

b、要让用户有能力完成。——即你的产品是否能让目标用户觉得好用、还想用

c、恰如其好的外部触发。——即你的产品是否在用户刚好需要的时候出现并刺激到用户感官

这三步每一步都是息息相关的,设计师不但需要设计出刺激用户感官的场景界面,更需要设计出契合用户心智一用就会的产品,更需要明白了解目标用户不同层次的需求


为什么要强调设计师有更多思考,主要也是觉得互联网更新特别快,UI设计师从曾经炙手可热的职位,变成很多设计师难就业,很多公司却招不到人的状态;因为更新太快以至于大家都会处于不断焦虑迷茫的状态。于是要求更多技术傍身,UI设计师要会插画要会交互要会用研要会动效要会C4D...很多人觉得插画热赶紧去学插画,动效热门赶紧去学动效...但是好像缺少了什么??


在【破茧成蝶2】里面我看到更好的答案

里面说到互联网下半场的新角色:产品设计师。提出思维是1,技能是0,意思是对于产品设计师来说思维是最重要的,而其他的技能要素是1后面的无数个0,随着经验累计0会越来越多,你的个人价值也越来越大,但是如果没有前面那个1后面再多0也于事无补。

转自-站酷

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

iOS 13 隐秘的细节②:原生APP的细节变化·上

鹤鹤

拆解iOS 13原生APP的细节变化,及其“影响”。

undefined


0.前言

在上一篇《iOS 13全局组件》中,主要讲述了新版系统中的分段控件、Switch、Sheet弹窗、Context Menu等组件的细化及影响。

从这篇开始,开始讲述iOS 13原生APP的设计细节,以及对设计师的影响。


开始前,依旧先明确下文中用到的机型和系统版本:

设备1:iPhone 7,iOS 12.4

设备2:iPhone X,iOS 12.2

设备3:iPhone 6S,iOS 13 Developer beta 6


-


下面开始原生APP的相关内容:




2.1 计时器

iPhone的计时器是个特别好用的功能。

日常生活中,类似“小睡一会”、“蒸煮东西”、“女友敷面膜”这些场景都能用到计时器。过去4年,我平均每天使用8次以上计时器。


虽然iPhone的计时器已经非常好用,但在某些场景下,尚有不足:

比如,设置一个80分钟的计时,中途看时间,虽然屏幕上显示还剩28分钟。但却无法直观掌握计时的进度(百分比)。有时睡迷糊了,忘了最初设置的总时长,导致不清楚睡了多长时间...

在iOS 13新版计时器中,Apple做了一些调整,很好的解决了上述问题:


变化1:新增圆形的进度条,如下图:

进度条可以方便用户掌握计时进度。


变化2:新增“到点”的时间(几点几分):

用户不用自己换算,就能知道计时结束的具体时间是几点几分。


变化3:铃声入口位置下移:

一般而言,用户在使用计时器时,通常的操作是:第一步:选择时长、第二步:点击开始。

并不会出现调整铃声这步操作,可以说,过去铃声放在中间的布局就很鸡肋。要么碍事、要么被忽略...

PS:过去四年,我从未察觉到有设置铃声的功能。囧

如何用“全链路思维”让设计更加符合需求方的预期

鹤鹤

篇首语:


随着互联网时代的发展,尤其近几年进入“互联网寒冬期”以及失去人口红利之后,企业对各个岗位要求都变得“非常”严格。对于UI设计而言,把作品做的非常牛X,显然已经无法满足市场需求和用人需求了。


前期的铁三角“产品经理、交互设计师、UI设计师”很有可能结合变成是“交互视觉二合一”甚至是“产品交互视觉三合一”的状态。在一些企业你会发现有一些岗位上的缺失。出现这种情况最大的原因是,很多公司会把一些职能进行合并用来节省成本。现在仍然有大多数的公司并没有交互设计师的岗位,但是交互设计的职能不代表没有,而是被产品经理或者视觉设计师兼任了。


说到这里大家可能会说,大企业资金雄厚,不缺少任何职能岗位。是的,没有错,但例如“华泰证券”,“浦东发展银行”等,不再是UI设计而是用户体验设计师了。那么作为UI设计师、运营设计师、品牌设计师(以上统称为视觉设计)的我们,该如何顺应时代发展,更加符合当下的市场规律,成为一名优秀的用户体验设计师呢?


当我们拿到需求方(产品或运营)的设计需求时,不再是盲目的直接找参考、找素材开始了,而是用产品思维模式,理解“产品目标”、锁定“目标用户”、切身体会“用户场景”、遵循“用户行为习惯”等的方式,充分理解需求方所提出的设计需求,进而设计出更加符合需求方心理预期的设计作品。


因为与需求方“同频”思考才会设计出符合需求的设计,难道不是么?


本文目的:本文引入“全链路思维”模式,帮助视觉设计师提升思维高度,通过“分析需求”、“拆解需求”、“竞品分析”等三个纬度思考,并将这些分析结果转化为设计方案。


正文


一、全链路思维


最近所谓“全链路思维”的话题很火,但事实上,全链路早就不是什么新鲜的概念了,而且也并非什么岗位头衔(和全栈、什么都能干不是同一概念),更接近于一种设计思维与方法。


近几年,设计的发展趋势从UED(以用户为中心)变成UGD(以用户为中心,以业务增长为导向,不以结果导向的KPI都是耍流氓),对设计的价值考核也越来越清晰,同时对于设计师的能力体现要求更高。行业上升发展趋势要求设计师更懂行业(掌握行业间的差异)、更懂用户(洞察用户的需求)、更懂数据(善于分析业务数据)、更懂增长(投入产出比)。


在需求阶段,我们比较传统的一种流程,是被动从产品经理处接受已被加工为具体方案的需求,对需求产生的背景并没有什么深刻的接触和理解。而在进行全链路设计的业务场景中,需求方不会直接给你一个加工好的答案,甚至他们自己都没想清楚问题出在哪里、应该如何解决,而更多是带着一个提升某业务指标的原始诉求或一堆零散的原始用户反馈来找你;至于怎么从中引导对方发现问题、分析问题、归纳机会点、输出能帮助达到商业目标的产品设计方案、甚至协调推动落地,都需要设计师作为 Owner 去思考和负责。


“全链路”这个词应该是2016年从阿里出来的,对于“全链路”思维的理解,行内有不同的理解方式,笔者结合工作总结出以下几种方法:

需求分析 > 拆解需求 > 分析竞品 > 确立设计方案



二、用户体验


对于用户体验的理解,根据思考维度的不同其结果往往是众说纷纭,由于各个职能岗位之间工作侧重点以及专业度的不同,沟通起来是有成本的,只有用户为中心的“用户体验”思维才是各个职能岗位之间的唯一沟通《通用语》。例如:当产品向设计传达产品需求时,产品无法用视觉角度去阐述产品,设计也无法用视觉专业知识向产品解释设计理念,你只能用“用户体验”思维去解释你的设计方案。当然,如果对业务场景非常了解,两相结合,沟通起来效果更佳。


那么什么是用户体验,唯一的核心只有一个,那就是“解决问题”

解决用户具体某个需求点,让用户使用起来更佳容易,并且给用户留下深刻的印象(转化率)


解决了用户某个问题点并印象深刻,用户才觉得用着舒服。注意,这里的舒服指的是“舒爽”而非“酸爽”哦~。说到这里不得不再次提及老生常谈的,用户体验5要素:

表现层 > 框架层 > 结构层 > 范围层 > 战略层


那么以架构层与结构层为例

(一)、架构层:页面布局(各类控件及信息摆放),页面布局的核心点在于:恰好


当一个功能恰好出现在,用户期望出现的位置上,即符合了“用户的心理预期”,也符合了“用户行为习惯”,那么用户用着是否“舒爽”?所谓,以用户为中心指的就是,迎合用户的行为习惯及心理预期,让用户感到恰好、舒爽,同时感到被照顾、呵护的感觉:你好懂我~

大家都知道,一个页面最佳视域为:左上、右上、左下、右下,左上最佳,右下最次。功能类控件(如:评论,点赞,发布,分享)在一段信息区域的右侧,不是说右侧不好么,这是因为为了符合人体工程学,右侧好点击原理(左撇子除外)。


(二)、结构层:信息架构 (信息层级梳理及页面流),核心点在于:瘦身


结构层相对于架构层较为抽象,我们可以将他理解为“链接”。架构层是针对单页面结构设计,而结构层是将单页面链接在一起,从而形成了系统。

拿app举例:架构层决定了点击页面图标和按钮后页面跳转到哪一页。通过删除、组织,隐藏和转移,将复杂的结构变的简化,也是提高用户体验的手段。例如QQ5.0的升级,通过汉堡导航及tab标签将功能整合,似的应用在感觉上苗条了很多。


以阿里巴巴(1688) APP 8.0为例:


(三)、怎么做好页面布局及信息层级梳理:核心在于准确理解产品需求


也许大家都遇到过这样的情况:当产品经理看到你的设计方案时,突然找到你并且要求你,“这里放大,那里缩小,哦不,你给我放大的同时缩小,这个颜色我要五彩斑斓的黑,哦不,我的意思是@#¥%”


遇到这样的情况,设计师要无条件的遵循么?产品经理对于视觉有自己的审美,当他发出需求时脑子里已经有了2-3个设计方案,只是他不会做,设计方案没有符合他的心理预期(以至于指手画脚)。甚至他的审美经过这么多年优秀作品都熏陶,不会比任何一个设计差,只是他无法用设计专业知识去指导你罢了。


这个时候设计师该怎么做?出现这种情况只有这几种可能:没有同频思考、没有准确领悟产品目标(意图),进而对信息架构、信息层级理解有误、没有把重点信息清晰体现、功能类控件,没有做好有效的视觉引导。以上统称为:需求理解错了。


说到需求理解,据一个简单的例子:假如有个用户说:“我想吃蛋糕”,那么注意了,如果真的给用户蛋糕,那就完蛋了。首先分析用户为什么要吃蛋糕:就喜欢吃蛋糕?喜欢吃甜的点心(别的甜点能否替代)?还是说只是单纯的饿了,不知道该吃什么,只是突然想到了蛋糕,那么可否用其他我能提供的什么东西去替代?


所以,这个用户的需求不一定就是蛋糕,蛋糕只能是诉求,解决温饱的诉求而已,但不一定是需求,他的需求是,解决温饱的食物而已,如果不多问一句,不就产生了“放大的同时缩小,五次斑斓的黑”么?因为对需求的理解错误,没有准确的理解产品目标,才导致设计方案才会出现错误,难道不是这样的么?



二、需求分析


有人会问:“视觉设计师还需要像产品经理那样做需求分析么?”,正如上文中提到,要与产品经理保持“同频思考”,还要准确的理解产品需求。不需要做,但并不代表不会或者不去思考。因为需求分析是“全链路思维”模式的前提。那么对于视觉设计师而言,不需要像产品经理那种专业度,只需要思考以下几点即可:


(1)为什么要做这个需求(业务目标)

思考:业务方为什么要提出这个需求,为了提升转化率、用户留存、曝光/流?、点击率、访问率、注册率,也就是业务方的核心目的是什么。


(2)产品期望得到什么结果(产品目标)

思考:产品为了达到业务目标,采取的策略是什么,通过什么功能实现的。产品的核心功能及交互流程是什么。


(3)谁来使用这个功能(目标用户)

思考:此业务目标是针对哪些人群的,这些人群有什么共同的特点,和行为习惯。


(4)他们为什么要使用这个功能(用户需求)

思考:这些人群有哪些共同的需求点,产品目标是否满足这类人群的核心需求,解决了哪些痛点。这些人群期望怎样的结果。设计师该如何引导用户,理解产品目标。


(5)他们在什么情况下使用这个功能(用户场景)

思考:在这样的业务目标下,用户在什么场景使用该功能,为什么使用,会不会有反感,如果我是用户,我的感受是什么。


其实,业务目标和用户的需求是矛盾的。比如,业务方希望提升注册率,但对于用户而言,注册与否并不敏感,或者根本不想走一遍繁琐的注册流程。这时产品就需要在特定的场景下,在某个功能流程中恰好出现注册功能,让用户不得不注册,因为用户不注册就得不到他刚好想要的服务或体验。这个时候设计师要考虑的是,通过设计营造一种喜悦的氛围,不让用户感到反感。因此设计师的核心价值在于,如何平衡业务目标和用户需求之间的矛盾,做出有效视觉引导。




三、拆解需求


拆解需求指的是,当设计师分析需求方的需求后,将需求拆解成其对应的视觉解决方案。上文中提到,需求分析不需要达到产品经理的专业度,但“拆解需求”必须达到专家级程度。因为这部分是需求分析后,如何理解需求方的需求(业务目标、产品目标)的关键所在。这时,我们视觉设计师要思考一下几点:


1、信息层级

(1)信息层级的分类(在明确需求后要对信息进行划分及拆解)

(a)用户能否在最短的时间阅读到信息、

(b)哪些信息是属于业务流程范围的、

(c)哪些信息是产品想要突出表现的、

(d)哪些信息看似不重要但没有还不行、

(e)信息描述前后是否统一,会不会给用户带来困惑


(2)信息层级的权重

在明确主要信息归类后,通过视觉上的,黑、白、灰,把层级表达清楚。明确信息权重,权重高的是否优先展示,有没有误导用户。


2、功能层级

(1)功能优先级权重划分(在明确功能后要对功能进行分类及拆解)

(a)哪些功能优先级最高,哪些是属于主业务流程及功能流程、哪些功能是子功能、

(b)哪些功能产品经理并不想突出,但用户却需要的、

(c)同一个页面,同一功能多次出现,产品经理的目的是什么、

(d)产品不同时期,功能的视觉变现是否有差异、


(2)交互层逻辑是否贴合用户场景

在明确业务目标与产品目标后,设计师要反复验证交互逻辑是否合理,逻辑是否符合该用户场景。


(3)交互体验是否流畅

在明确目标用户与使用场景后,把自己融入到使用场景中,反复验证交互流程。看是否符合业务目标与产品目标,同时看交互流程是否流畅,有没有给自己带来障碍。


(4)用户操作是否便捷

如果自己是用户,操作是否符合用户行为习惯,有没有恰好出现在该出现的位置上,视觉展示是否引导合理,视觉引导有没有给用户带来误区。


3、页面布局

在明确目标用户与使用场景后,把自己模拟成目标用户,思考页面布局是否符合用户行为习惯和心理预期。主流程下的控件是否在视觉上有点击欲望,会不会反感。(用户体验中已有详细说明)


4、状态的查缺补漏

各类交互状态,如,图标点击后的状态(移动端、pc端)、hover 状态(pc端)、非主业务流程下的功能提示(如:错误提示、缺省提示)。这些产品经理往往会忽略掉,或者文档里也会给出过,要注意观察及时查缺补漏。


5、视觉的有效引导

在准确的理解产品需求,做到“同频思考”后,分析信层级和功能优先级及权重划分,将这些在视觉设计的过程中做有效的引导,并时刻查缺补漏。这个时候对于哪些信息和功能需要突出,哪些信息和功能需要弱化,在头脑里有个清晰的认知和思路。让信息和功能恰好出现在用户期望的位置上,并且解决产品目标为目的,也就是上文中提到的用户体验的核心点,解

决问题。


值得注意的是:

视觉设计师是对产品方案的进一步完善,以用户为中心的用户体验思想,用视觉引导的方式引导用户实现产品目标的,而非只会照着原型图毫无思想的画图。同时要让用户无论在视觉上还是体验上,都能感受到“舒爽”而非“酸爽”。


产品经理给出的原型,重心在业务逻辑,因此,为了提升用户体验、避免给用户带来误区和障碍,设计师要以产品思维(产品思维和业务思维是不一样的)在业务及产品目标、主功能逻辑不变的情况下,重新划分信息层级、做好页面布局,做好视觉引导。



四、竞品分析


通过需求分析(理解需求)、和拆解需求(明确设计目标)后,在正式进入视觉设计之前,视觉设计师们通常要先找一波资料(找参考),如果只是这样,那么仅仅是寻找视觉表现手法而已(什么风格、什么颜色)。本文中所提到的竞品分析,不是产品竞品分析也不是交互竞品分析,而是为了视觉设计而准备的视觉竞品分析。基于“全链路”思维模式下通常需要考虑一下几点:


(1)我们的方案和竞品的区别在哪里,为什么不同。

跟竞品之间的区别很重要,因为每个产品业务目标与产品目标,以及产品处于的阶段都是不一样的,即便看着很类似也不可以盲目参考。


例如:产品阶段的不同,对于“搜索”功能的要求是不一样的,产品初期由于信息量不够,搜索不出太多的内容。属于没有还不行,有了还不能太明显,不能误导用户去搜索,而是要用分类功能。因此,即使产品经理给出了“”搜索”功能,在视觉上也要弱化变现。但你如果参考了成熟期的产品,可想而知你设计出的“搜索”会是什么样的了吧。


(2)竞品是怎么做的,优点在哪里,解决了哪些问题,他们为什么这么做

我们要找到与本产品业务目标与产品目标基本一致的竞品去对比,切勿只是原型基本类似就以为目标一致。因此,先要看这个竞品都解决了哪些问题。


(3)什么是我们可以借鉴的,是否可以改进

在确定目标基本一致后,要分析哪些可以借鉴,能不能比他做的更好,如果只是抄袭,那就没有意思了。


(4)那么设计该如何表达,比竞品做的更好

经过上述分析,在这个阶段对于视觉设计师而言,设计方案基本在脑子里已经成型了。这时对于什么风格、什么颜色,才基本符合产品预期。在结合需求拆解的方式,拿出可行的设计方案。


转自-站酷

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

如何通过竞品分析来解决问题

鹤鹤



1.竞品分析的定义


从专业的角度来讲,竞品分析是通过系统的分析方法去全面了解市场上位于前列的竞争对手的产品,能够让设计师快速了解自家产品所处的位置,从而来针对性的改进自身产品的一个方法。简而言之,就是要站在巨人的肩膀上去思考,以竞品分析的形式去学习其他优秀的产品,从而解决自身产品所存在的问题。



2.为什么要去做竞品分析


做一件事情之前一定要思考做这件事的价值和意义,只有你明白其重要和必要性,你才会知道该怎样去做这件事情,而不是一提起竞品分析就找一大堆专业框架和术语然后去填内容,这样虽然产出了很多,但是关键性的内容点其实还是不清楚。


说直白点,你需要通过这篇竞品分析去解决你工作或者创作中遇到的什么问题,带着疑惑和目的去分析在我看来是更有效率的。因此特分为以下几种情况:



因此我们要学会根据自己的不同需求,去制定不同的竞品分析方案,让分析的内容更聚焦。作为UI设计师来讲,通过竞品分析为自己的设计方案提供科学的理论依据,为自己赢得话语权,能够更好地科学产出内容。



3. 如何寻找竞品:


竞品的选择非常重要,如果找到错误的竞品,那么你所分析的一切结论可能都引向了一个错误的方向。从而让自己的努力都白费。那么怎样才能找到合适的竞品呢?分为以下三类情况


A.核心服务与目标用户相同的产品(直接竞品):


这一点是广大设计师都能想到的范畴,也称为直接竞品。即提供的核心服务、市场目标方向、客户群体等与我们的产品基本一致,产品功能和用户需求相似度极高的产品 。往往是通过业务关键词就能直接搜索到的竞品,比如音乐类产品,那么直接在应用商店,或者通过专业网站(易观千帆等)搜索关键词“音乐”即可搜索出排行前列的竞品。



B.目标人群不同,但功能模块和服务接近的产品(间接竞品):


这类竞品可以找起来并不那么直接,可以通过对应功能去逆推拥有此功能的产品,并进行相关搜索。


如果想不到,可以通过“人人都是产品经理” “36氪“等关于产品资讯的网站进行查询,甚至可以通过百度指数来进行发散思维,看一下跟你关键功能相接近的都有哪些。比如你研究外卖产品,除去饿了么和美团等直接竞品,你还可以在分析用户下单和购买流程中,去分析淘宝和京东等购物产品,也能得到一定的帮助。



C.目标人群和服务都不同,但交互或者视觉有可以参考的产品(关联竞品):


这里所选择的产品,定位和领域可以都完全不同,但是你要从这款产品中得到启发,从而让你的产品能够拥有其他竞品不同的特点或者功能模块。有一个很典型也熟知的的案例,就是卫龙辣条的设计案例,在卫龙推出之前,可以说是没人会想到辣条会和高端扯上关系,但是卫龙就是借鉴与其领域完全不同的苹果设计去做,从而在包装上独树一帜,从而吸引人们注意取得成功。因此通过不同领域跨行业的产品有时候也可以找到不错的思维方向。



4.如何进行商业分析:


进行商业分析,这里只提及到三个基本选项:商业背景、产品盈利模式以及用户人群。通过这三个基本要素,你能对所研究的竞品有一个大概的了解。当然深入了解还需要其他平台(官网网站、36Kr等)来查阅更多的相关性资料,下列是对QQ音乐商业背景的简要分析。




5. 如何进行交互分析:


我们在做交互分析时,我们需要进行必要的两点分析:用户路径和交互维度。


用户路径:指用户从某个开始行为事件直到结束事件的行为路径,即用户在使用某个功能的完整流程称之为用户路径。我们需要去观察和体验在这一个完整路径中涉及到的页面、动效、视觉到底是怎样的。就拿登录页来说,我们看看排行前列的竞品是怎么做的。通过相应的体验和对比分析,我们就可以找出这其中符合我们产品性质的最优解,从而提高我们的登录注册效率。



交互维度:交互维度和用户路径有所区别。这一层需要弄清楚产品的核心路径,从而能够更好的解析产品各个层面的逻辑关系,这就需要我们以用户的角度去逐个体验,整体联系,随后记录下来。使用过程中我们也要去观察APP中的交互小细节,怎样分享的,怎样展示的,比如音乐软件进行截屏后和点击喜欢按钮后的反馈是怎样的。




6. 如何进行视觉设计:


在进行视觉分析时,有一点需要注意,如果你需要详细分析某一模块,请用手机尺寸截图后拿到设计软件中进行测量,不要光靠眼睛观察,很多时候的小细节我们只有在手动测量后才能感受到,比如控件的尺寸大小,间距的大小,以及颜色的取值,都需要精准测量后才能得出靠谱的结论。


怎样进行视觉分析呢,我比较推荐从一个app 视觉语言最基本的五个维度去分析,即“形色字构质”



最近以音乐APP进行了一次竞品分析,以QQ音乐APP来举例进行分析(当然竞品分析并不能只分析一个,而应该根据你需要的功能找多个竞品进行对比分析,才能看到更多的维度,这里只拿一个举例):




6.1 图形元素的分析


首先我们以形进行分析,形即图形元素,具体来讲即LOGO和图标。LOGO的更新在2018年10月以后已完成更新。新版的主要图标整理归纳如下:



可以看到整体的图标色调更加清新,造型设计更加圆润,未选中状态的线形图标则采用4px的描边,粗线形描边让整体界面风格显得更加稳重的同时对用户的干扰也较小。新版的图标界面让界面保持稳重的同时又富有活力。



6.2 色彩体系的分析


其次则是对色这一类别进行分析,颜色其实是对于品牌调性有很大的影响,比如一想起QQ音乐就知道主色是绿,一想起网易云音乐就知道主色是红,对用户的记忆点更深刻。通过截屏测量进行分析,得出整体的颜色如下(由于手机屏幕的色差原因,不可避免会有些许误差)


从局部来看,分析颜色最重要的一点就是能够弄清楚一个页面中哪些元素用的是同一种颜色,观察成熟的产品是怎样用颜色(和字重)去区分层级关系的。



可以看到,用主色和三种辅色即可区分界面的整个层级关系,由此思考我们在制作自己的界面时也避免用太多的颜色,造成界面太过花哨。(颜色的具体色值可能有些许误差,更重要的是看颜色层级关系)



6.3 字体体系的分析


接下来是字的分析,字即字体体系,可具体到字体和字号。设计中字体一般来讲是苹方,字号则根据设计师的定义来进行相应的规范。通过页面的测量分析,可以拿到其具体的字号大小层级分析。(以下定义基于750的设计尺寸)



对于单个界面的分析,个人觉得要带有思考的眼光去看待,比如在首页中字号其实分配过多,像“更多”这种按钮就不应该再分一个字号,字号太多整体就显得有一点点乱了。虽然大厂的设计能在一定程度上给予我们参考,但并不是说他的每一个设计都是正确的,我们要学会用审视的眼光去看待出现在身边的设计。



6.4 界面构成分析


界面构成即界面的元素大小以及他们的布局,例如有时候我们不知道一个标准的搜索框的长宽具体多少才是合适的,这就需要我们去分析其他成熟的商业产品,通过测量来知道具体的数值,从而督促自己进行正确的设计。这里选取了一个默认的首页进行分析。



将一个页面用右边的形式进行原型化,去掉干扰可以把结构看得更清楚。间距之类的也可以通过软件进行测量。可以看到QQ9.0版本的去线化设计,利用大间距来区分各个模块,去掉了其他的干扰元素,整体的界面模块看起来非常整洁轻盈以及富有呼吸感。统一的圆角化设计也让整体设计符合流行趋势,显得更活泼。



6.5 质感与风格分析


关于界面的质感则是不同于扁平化的一个设计,即有的页面在你看来细节会更丰富,层级会更深。界面质感通过渐变,叠加,透明度等不同方式来呈现,比如在QQ音乐中的会员界面卡片,则体现了微质感:



上方的会员卡片就加入了渐变和图案叠加的方式来为卡片增加质感,让整个界面显得更精致。当然,叠加的图案都是与内容相关的,不能为了叠加而叠加。包括下方的权益图标,也采用了渐变的方式来让整个图标显得更精致和有质感。我们再处理质感的时候也可以用这种方式来进行。


以上通过“形色字构质”来分析是属于单个分析,相当于去拆解一个成熟产品中的每一个细节点,从而去学习和吸收。我们还要学会进行对比分析。把单独某一个功能模块拎出来,通过不同类型的对比从而归纳出这一类的设计方法和样式,进而总结相应规律。


比如某一天你需要设计一个歌单列表,你此时就需要分析所有TOP排行的歌单列表,看看分别都有什么,从而总结归纳出结构来,再进行分类。



通过分析提炼,形成以下结论并进行相应的概念风格展示设计:



这样,我们最后制作出来的方案才能涵盖比较全的解决方案,从而能够更好的助力设计产出。上图的产出可能稍显简陋,但只是做一个简单的示例,真正的产出应该更加有细节和落地,也要结合自己的工作需求做相应调整。



7.关注竞品的版本迭代和用户评价:



关注版本更迭,阅读竞品版本更新的详细说明,你可以从中得出版解决了什么问题,提升了哪些体验,添加了哪些功能,融合了什么流行的设计趋势。产品迭代就是团队通过用户需求对某个产品不断完善的一个过程。迭代对于一个产品来说是至关重要的,一个产品如果不想被对手超越,就必须不断的对版本进行更新迭代。


除了关注具体的内容,你还可以观察版本更新的提示信息,例如夸克浏览器在每次更新时总会用富有趣味的文案来打动你,从而让你更加情愿去更新,提升新版的使用率。


用户评价则更不用说,产品的最终服务对象就是用户,用户评价的重要性自然不言而言。不过我们要客观辩证地去看待用户的评价,吸收好的建议,屏蔽无脑的意见,从而能够正确地迭代版本。用户评价的查看可以使用App Store或者用户评价网站(https://appbot.co/)去查询。



总结


以上的篇幅较长,看下来可能会有一些累,那么此篇文章提及到的点在这里回顾一次:


1.竞品分析的定义-站在巨人的肩膀上去学习;

2.为什么做-基于自己的目的去进行对应的竞品分析,分析的最终目的是解决自己在设计过程中遇到的问题;

3.竞品分析分为三个层面:视觉分析、交互分析以及商业分析;

4.怎样进行商业分析(商业背景、盈利模式、用户人群);

5.怎样进行交互分析 (用户路径、核心路径、交互细节);

6.怎样进行视觉分析 (从“形色字构质”五个维度去分析以及如何对比分析应用);

7.竞品的迭代和用户评价的重要性。


自己有一个小习惯,看完每一篇文章,总会告诉自己一定要在脑海里回顾一遍,思考一下这一篇文章到底有什么观点是自己之前没有想到的,哪怕只有一点是没触及到的知识盲区,那么这篇文章之于自己就是有意义的。所以希望大家看完能有些许收获那便是最好的了。


写这篇文章的目的是给自己的竞品练习做一个总结,以输出倒逼输入是一种比较有效的学习方法。但基于自己的水平有限,在某些分析的地方仍然存在不足和疏漏之处,希望大家谅解并及时交流。感谢大家看到这里,希望大家每天都进步~


转自:站酷-进击的M 

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


如何更好的使用弹窗?

鹤鹤

弹窗在设计中运用的非常广泛,基本上每个应用都会涉及到。恰好这段时间我也在整理公司设计组件这一块,所以就想总结分享一下


设计师都会使用弹窗,但对于弹窗背后的分类及运用可能还不是特别了解,在写这篇文章之前,我查看了很多应用及资料,所以下面会有大量的案例,相信大家看完可以对弹窗的认识更明确,做设计规范的时候也能有自己的想法。


现在的弹窗分为两种,一种是模态弹窗(重提示),一种是非模态弹窗(轻提示)。

常见的模态弹窗:Dialog/Alert、Actionbar、Popover/Popup

常见的非模态弹窗:Toast/Hud、Tips、Snackbar、



Dialog/Alert  对话框

对话框是我们常用的弹窗,安卓开发语言是Dialog,iOS开发语言Alert,它通常出现在页面的中间,对话框/警示框的类别非常多,对用户的干扰比较大。前面之所以说模态弹窗是一种重提示,是因为它需要用户主动触发选择才可以继续当前的操作。


① 信息-选择确定

特点:这类弹窗通常是一些系统功能的授权、版本更新、消息通知、重要提示等,通常只有1~3个主按钮,只需要用户进行简单的选择。


下图举例分析:

iOS询问是否删除APP,就属于重要提示弹窗,它一般会用在像删除、确认提交...一些比较重要的功能操作中。

小红书的这个是否允许使用网络弹窗,大家一定在许多APP中都见过,这属于一个系统自带的授权弹窗。

马蜂窝与天猫的消息提醒弹窗,一个属于初次使用APP时,系统自带的弹窗,一个属于使用后期APP为了推送消息,主动提示你开启消息通知。

有钱花和爱奇艺的版本升级弹窗,都属于偏运营类的弹窗,这一类的弹窗通常会弱化暂不升级的按钮,突出升级主按钮。




② 信息-输入勾选

特点:这类弹窗通常是输入一些比较少的信息或者勾选信息,常用于备注输入、规格选择、分组选择等,通常只有确定和取消两个按钮。


下图举例分析:

微博对于已关注人的分组及备注,都属于信息输入及勾选类弹窗,操作通常都比较简单。




③ 信息-传达展示

特点:这类弹窗通常是一些广告、红包优惠、节日活动等一些运营类弹窗,主要是吸引用户点击及参加活动,这类运营弹窗通常会设计的比较吸引人,造型各异,会突出领取、查看等大按钮,弱化关闭按钮。


下图举例分析:

拼多多和饿了么这类的红包优惠弹窗,就不多说了,大家都懂,它们最主要的目的就是吸引用户点击,提升购买率。

美团的变黄送好礼弹窗,属于一次比较大的品牌升级,它主要目的是让用户更好的了解并接受品牌色升级。整体的元素及动效设计都非常清晰,视觉感很强。

支付宝的这个猜世界杯赢蚂蚁积分的弹窗,属于活动弹窗,它的整体设计非常贴合主题。




Actionbar操作栏

Actionbar主要分为Action Views和Action Sheets。它们通常是由底部弹出,它的操作及信息会比对话框类型的弹窗更多更复杂。这种当前页面的下拉弹窗好处就是,可以让用户清楚的感知当前的操作,比跳转到新页面更加有安全感。还有一个特殊的抽屉式弹窗也顺便说一下。


① Action Views操作视图

特点:这类视图弹窗通常占屏比较多,以文字、图标等形式展示各种功能,也可以说这类的弹窗是一个小型的页面。它一般从底部弹出,不太强调归属,大多出现在购买、支付、分享等场景。


下图举例分析:

百度网盘的这个+号扩展弹窗比较特殊,它也可以说是浮层,占满整个屏幕,它最吸引人的还是它的小动效。

京东购买时的弹窗和支付宝付款时的弹窗,都是比较典型的,在各种电商产品及付款页面用的非常多。

转转这个的键盘与输入为一体的弹窗,设计的非常人性化,让用户一次就可以输入多个价格。大大提高了用户的操作效率。

网易云音乐的分享弹窗就是典型的以文字与图标来展示功能的。

微信读书的底部阅读设置弹窗,比较特殊,为了使用户沉浸阅读,它是比较隐藏的,而且非常轻量化。


undefined



② Action Sheets 操作列表

特点:操作列表相对于操作视图,它更单一。主要是以文字展示功能按钮,重要敏感的功能操作一般会用主题颜色或红色显示,主要运用在一些日常控件、功能选择、删除、保存等场景。


下图举例分析:

Keep的选择日期,属于iOS原生控件,非常常见。

淘宝的选择地址弹窗,整个展示的非常清晰全面,而且用户每选择一项,就会有相应的显示。

支付宝和天猫超市的两种列表弹窗,就不多说了,简单的功能选择都会采用这种。




③ 抽屉式弹窗

特点:这种抽屉式弹窗一般从左右两边弹出,经常运用在一些导航扩展和目录展示中,它能承载比较多的信息,基本上都是用来放一些不太常用的功能。


下图举例分析:

微信读书及一些其他阅读类产品,由于目录很长,而且一般是从上到下浏览的,所以基本都采用了这种抽屉式弹窗。

小红书的这个抽屉式弹窗,以图标和文字的形式展示了一些不是很常用的功能,为我的页面节约了不少空间。




Popover/Popup 浮层

Popover是ios的开发语言,popup是安卓的开发语言,浮层是指,用户点击某个功能后浮出一个临时气泡对其作出补充,它通常会伴随着半透明的遮罩或者投影衬底,用户需要点击功能区域操作,或者点击空白处取消,才能进入下一步操作。它与上面操作栏的最大区别就在于,它更强调归属,可以出现在页面的任何地方,而操作栏一般只出现在底部,不强调归属。


① 指向浮层

特点:这类的浮层一般伴随有小三角指向,强调归属。气泡里面的功能通常以单一的文字或文字与图标结合的形式来展示,主要运用在顶部加号补充、复制、分享转发等场景。


下图举例分析:

支付宝和美团的顶部加号补充浮层,展示形式是差不多的,只是UI样式不一样,一个是白色气泡黑色半透明遮罩,一个是深灰色气泡。

微信读书和微信的选择文字气泡,在文字复制中很常见,通常会与其他转发收藏小功能一起出现。




② 导航筛选浮层

特点:所谓导航筛选,自然是与导航分不开的,再加上浮层是比较强调归属的,所以它通常会与导航连在一起,一般出现在顶部。


下图举例分析:

美团的导航筛选,因为选项及开关很多,所以它的底部会有两个主按钮,一个完成,一个重置。

饿了么的这个只有一个功能选项,所以它一般是直接选择就收起浮层了。




③ 引导浮层

特点:引导浮层的作用就是引导用户更好的使用产品及交互,降低用户的学习成本。它通常会出现在用户首次进入APP的时候,一般只会出现一次,点击空白位置或我知道了浮层就会消失。


下图举例分析:

QQ音乐与微医的引导浮层都是用户首次进入应用时,给出的功能搬家提醒浮层。





Toast/Hud 提示框

Hud是ios的控件名词,Toast是安卓的控件名词,它们都属于一种轻提示,给予用户及时反馈,让用户知道自己当前所处的状态。

Hud一般只出现在屏幕的中央,以毛玻璃的样式表现,内容展示比较富丰富。

Toast可以出现在屏幕任意位置,通常以黑色半透明的小框来表现,内容一般是纯文字提示或者文字与图标结合提示。


① 状态提示

特点:状态提示的Toast,它们一般都是反馈用户当前操作的状态,只出现1到2秒就会自动消失,场景一般是关注成功、密码错误、音量提示、静音、清除缓存等。


下图举例分析:

移动的属于操作遇阻提示。

京东的属于操作成功反馈。

iOS的音量控制属于毛玻璃Hud。

微信的清除缓存属于正在操作状态。




② 按键提示

特点:按键Toast提示与状态提示不同,它们一般自动出现或者点击触发才会出现,用于对功能点的补充说明,让用户对功能有更深的了解。


下图举例分析:

蚂蚁森林里点击树木就会出现相关信息,当然它也会自动出现,点击其他区域也会自动消失。 

知乎的消息标签不仅有小红点提示,还会在上方自动出现数字提示。




Snackbar

Snackbar是Android中的一个控件。它一般会在超时自动关闭或者在屏幕上滑动关闭,它没有Toast那么轻量,设置出现的时间会比Toast长,而且可以点击按钮进行交互。


下图举例分析:

UC浏览器的Snackbar,是在提示用户上滑,来查看更多内容,它需要滑动或者超时才能关闭。

京东的Snackbar,是在为用户推荐商品,提示用户点击箭头来查看喜欢的商品,它比UC浏览器多了一个关闭的按钮。




Tips提示

Tips与Snackbar最主要的区别就是:Tips它是内嵌在页面上的,而Snackbar则是浮在页面上的。Tips一般要让用户主动触发关闭按钮或点击进入下级页面才会消失,一般用于需要用户感知到的通知信息,或者植入广告。


下图举例分析:

百度网盘在下载视频时,就会出现一个Tips的提示,让用户观看广告来得到加速下载。这种提示虽说是广告,但它抓住了用户的场景及心理,观看广告的几率大大提升。

爱奇艺的Tips提示就属于重要通知提示了,提示用户VIP即将到期,续费可优惠,它们都有一个主按钮及关闭按钮,需要用户主动触发提示才会消失。


undefined



规范总结

目前的弹窗样式非常多,你能想到的,你想不到的基本都可以技术实现。但这同时也带来一个问题,那就是“不规范”。以上提到的弹窗种类,你只需要选择符合你产品要求的几个类型,最好不要在一个产品中运用多个同种类型的弹窗,否则后期会很难规范及组件化,当然运营广告类弹窗可以另当别论。

转自:站酷

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


拆解「开关」背后的设计细节

鹤鹤






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


小小开关中的大学问



一.生活中的反面案例


故事要从我搬到新出租屋开始讲起。半年前搬到新的出租屋后,房间里配置的洗衣机也比之前的大了一倍,而且操作区上分布着的密密麻麻的文字和按钮让洗衣机看起来更高级了,然而这种对它的好感并没有持续多久。在我第一次使用它时,我将衣物放进洗衣机后,选择好时间和洗涤方式,按下了启动按钮(如下图右侧白色按钮)。



按下后洗衣机发出了“滴”的一声,在我的认知里它应该是开始工作了,但是10秒过后没有任何抽水声和洗衣服的声音。我疑惑地想:“是不是刚才并没有成功启动?”,于是再次按下了启动按钮,又是“滴”的一声,但是这次我等了 1 分钟没有任何反应。之后的十分钟里,我与这台匪夷所思的机器“交涉”多次才理解了它的运行方式。这台洗衣机启动后需要等待大概十几秒才开始运行,但是在我按下启动按钮后我得不到任何反馈或者提示来告诉我洗衣机已经开始工作了,所以疑惑的我又按下了一次启动按钮,然而令人崩溃的是这台洗衣机的启动和暂停按钮是一体的,我第二次按下实际是进行了暂停操作,从而导致我第二次的困惑。


如果你是这台洗衣机的设计师,你会怎么解决上述的问题呢?


可能你的心中已经有了答案,在回答之前我们先试着探究问题的本质。


人们不管是使用日常物品还是与机器进行交互,都会面对两个阶段的问题。一个是「执行」,一个是「评估」。执行时用户需要理解如何操作,操作后可能会有什么结果。评估时用户需要知道具体发生了什么。作为设计师我们要通过合理的手段帮助用户解决这些问题,保证交互的可用性和流畅性。


通常我们会使用「意符」在用户执行前告知用户如何理解、如何操作、操作后会有什么结果。在评估前通过「反馈」告知用户结果是什么。


对于意符的定义,在《设计心理学 1-日常的设计》一书中,作者唐纳德·诺曼做出了这样的解释:


人们需要某种方式了解他们将要使用的产品或服务,某些标识表明的用途,会发生什么,有什么样的替代方案。人们寻找蛛丝马迹,寻找任何可以帮助他们应对和理解的符号。任何可能标识出有意义的信息的符号非常重要。设计师需要提供这些线索。人们所需要的和设计师必须提供的,就是意符。除此之外,优良的设计要求对产品的目的、结构和设备的操作与使用者进行良好的交代。那就是意符的作用。


简而言之,意符就是在用户使用前,机器为了让用户更好地理解和使用它而做出的提示。而反馈就更好理解了,机器在我们操作后做出的反应就是反馈,没有反应同样也是一种反馈。


下图展示了机器与用户如何进行交互。一个合理的设计可以让用户快速顺畅地进行 1234 四个步骤进而完成任务,而糟糕的设计会让用户不断重复这个流程。之所以会出现糟糕的设计,就是因为在步骤 1 和 3 没有进行合理的意符提示和反馈提示让用户摸不着头脑,进而导致用户根据自己的猜测和过往经验来进行操作,最后得到非预期的结果。



回到文章开始时的洗衣机开关问题,因为开始和暂停按钮是一体的,在没有任何意符和反馈的情况下我按下这个按钮时我并不知道我启动的是开始操作还是暂停操作。


我们可以就这个问题列出以下解决方案:

    1.增加文字提示,如启动时在显示屏上显示“已启动”,暂停时显示“已暂停”;

    2.增加语音提示,启动开关后使用语音告知用户“已启动”或“已暂停”。


当然解决方案有很多,每个人都可以根据场景想出不同的解决方案。


与现实机器的开关类似,在 UI 设计中我们如果进行开关设计也需要遵循相应的设计原则。


一个合理的开关设计主体包含的意符分别有两种:

    1.表示当前状态;

    2.表示操作后的状态。

主体之外我们还可以添加辅助提示更加清晰地传达意符和反馈。


接下来将介绍一些常见的开关类型和辅助提示类型,最后总结出体验优质的开关设计方法。



二.开关类型


1.icon


在 UI 设计中最常见的开关可能就是 icon 了,即由单一的 icon 通过颜色或图形的变化来表示开或关的状态。因为交互设计从古到今并没有统一的严格标准,所以到底是将开关 icon 的样式设计为「当前状态样式」还是设计为「按下之后的状态样式」并没有一个约定俗成的规则。然而,对比而言如今各类 App 设计中常见的且体验比较好的方案还是将开关样式设计为当前状态样式。如下图iPhone自带相机的实况照片开关icon就是显示当前状态。



然而,并不是说将开关样式设计为当前状态样式做法普遍且体验更好就可以这样做了,有些开关的设计因为使用广泛,已经在用户的心智中扎根,我们如果强行改变反而适得其反导致体验变差。最典型的就是视频和音乐的播放暂停开关,他们表示的就是操作后的状态而不是当前状态,如下图。



因此,大部分应用的开关类 icon 都是混用当前状态和操作后状态的,如下图哔哩哔哩的视频播放界面,播放暂停开关 icon 表示的是操作后状态,弹幕开关表示的是当前状态,而视频锁开关 icon 又变成了表示操作后状态了。



是否统一倒不是关键,关键是我们是否能够让用户理解相应的意符和反馈,目标是让用户在操作开关前能够知道当前状态是什么,操作开关后当前状态是什么。


举一个反例,下图中的美颜相机的夜拍模式开关就没有直观表现出当前是开还是关,这种有歧义的设计可能让新手用户手足无措,可能本来未开启的功能让用户误以为已开启,导致拍出来的照片不符合用户预期。


由此我们可以看出,单一的 icon 开关如果没有其他的辅助提示会造成意符和反馈的缺失,进而形成较大的歧义性,用户会在疑惑中按照自己固有的心理模型和过往经验进行判断,体验因此降低。



2.主体与开关分离(分离式)


上一部分举了美颜相机的反例,其意符和反馈不明产生的歧义问题导致了用户的困惑,但使用「主体与开关分离」(后文一致简称为“分离式”)的开关设计可以解决这个问题,它在意符和反馈层面都给予了用户提示,可视性很强,完全解决了开关状态无法被用户感知的问题。分离式开关指的是,主体不再充当开关,只当做开关的名称或icon,另外制作一个开关传达意符和反馈,解决了当前状态与操作后状态混淆的问题,其通常的样式如下图。



如下图,Faceu激萌不同于美颜相机设计方式就是将主体与开关分离,很清晰地传达了当前开关状态。



大部分App的设置页面使用的开关都是主体与开关分离的方式,如下图。



显而易见,分离式开关直观展示了当前状态,在消除歧义方面优于 icon 开关,但同时缺点也很明显,它占用了过多页面空间并美感欠佳。




3.名称变化


名称变化指的是开关依赖于其名称的变化告知用户开关的当前状态和操作,常见的类型如下:



部分 App 会将开关的名称变化的方式统一,但也有部分 App 会将这两类进行混用,即一个是表示当前状态,一个是表示操作。


下图为部分 App 的名称开关,我们可以将上图的开关名称类型的序号对号入座。



表示操作的按钮文字具有一定引导性,用户容易感知和触发,反之,表示状态的按钮文字由于不具有引导性,如果用户没有对这类按钮形成使用习惯甚至难以意识到它是可点击的,因此我们可以利用其特性进行逆向应用引导用户的行为。比如在直播App中,我们希望引导用户关注主播,又试图避免用户关注后又取关主播。我们就可以将“关注”制作为表示操作,文案写为“关注主播”(属于1.开启...)。将“取消关注”制作为表示当前状态,文案写为“已关注”(属于7.已开启...)。前后的颜色进行区分,“关注主播”的按钮制作得对比度强,吸引力大,“已关注”做得弱一些,让用户误以为不可点击,如下图的斗鱼直播。



然而,名称变化的开关由于语言的模糊性,仍然造成了部分歧义。我们可以发现很多App的名称变化开关设计中,都会在操作后加入其它提示来消除歧义(如:toast 提示),有些App则并未加入,因此在后文中会着重介绍辅助提示的优点和使用方法。



小结


icon、分离式、名称变化,如果按照消除歧义的优劣排列的话,大概是 分离式>名称变化>icon。


那这样的话是不是应该把开关都换成分离式呢?当然不是,分离式虽然在意符和反馈的层面很充分地消除了歧义,但是其也有明显的缺点,分离出的开关会占用部分空间,可能会影响美观,因此我们需要根据需求和页面结构选择最适合的开关类型。


那名称变化和 icon 类的开关如何消除歧义呢,我们可以通过添加下面介绍的辅助提示来解决。



三.辅助提示


1.环境暗示


环境暗示指的是用户在操作开关前,开关以外的区域给予用户的提示,这些提示本身存在于交互流程中并不是我们刻意加入的,用户根据这些提示可以判断当前状态以及按下开关后的状态。


例如在观看视频时,当用户去按下视频播放按钮前,用户会通过当前图像静止与无声音这个环境暗示明白当前状态是可能是视频未播放,所以应该按下播放按钮让视频播放。


再比如得到 App 的夜间模式,用户可以通过当前界面的样式判断当前是否已经开启了夜间模式,如下图。



看下图,如果没有环境暗示,你能分清得到的夜间模式的开关哪个当前状态是夜间哪个当前状态是日间吗?



因此,环境暗示的优势是我们不需要进行另外设计其他的意符和反馈告知用户当前状态,环境给予的暗示已经足够直观。



2.模态/非模态提示


当用户按下开关后模态和非模态提示可以在反馈层面告知用户,让用户知道自己是触发了开启还是关闭。


常见的模态提示控件是「警告框(Alerts)」,非模态提示控件是「提示框(Toast)」,前者提示强度大,使用在一些危险、重要的反馈中,后者则使用在一些轻量的提示中。


介绍 icon 开关的部分我们提到了美颜相机的夜拍模式的 icon 开关状态难以区分,但美图秀秀在这里使用了顶部的非模态提示在反馈层面告知用户当前状态,很好地解决了这个问题,如下图。



拉勾网的设置中,隐藏简历为危险操作,用户极有可能由于开关名称的歧义或由于疏忽触发开关导致简历被隐藏从而错过工作机会,因此此处设计了一个形式为警告框的模态提示来告知用户当前状态以及潜在风险。




3.辅助文案


辅助文案指的是在主体(主体可能是开关名称、icon 或二者皆有之)之外另外放置一些文案信息来充当意符和反馈。下图案例就是高德地图的下车提示的开关,开关的主体是名称,但是下面的一行辅助文案很清晰地传达了当前的开关是什么状态。




4.其他辅助提示


并不是所有提示都需要让用户看见,我们可以给予用户其他感官的信号告知用户当前开关的状态。


在现实生活中,我们会通过钥匙在锁中扭动发出的声音判断锁是否被打开,通过触摸感受摩托车是否继续震动判断其是否已经熄火。


同样,在 UI 设计中,我们也仍然可以使用听觉和触觉来消除开关的歧义。一个比较优秀的案例是高德地图,当用户打开下车提示之后,会出现语音提示“已开启下车提醒”,它充分考虑到身处户外的用户可能并不能很方便地获取屏幕上的视觉信息,因此使用语音的形式提示用户。



小结


辅助提示很好地补充了开关在消除歧义上的不足,但我们需要合理使用否则就会产生不必要的视觉噪声。如下图,试想音乐的暂停播放开关如果加入的 toast 提示会怎么样呢?由于我们已经可以通过“手机是否发出声音”这个环境暗示获知当前的开关状态,如果再加入 toast 提示必然会出现不必要的视觉噪声。




4.总结


介绍完开关类型和辅助提示后,我们如何将其应用到我们的产品中,设计出无歧义或低歧义的开关呢?


如果我们选择的开关类型已经足够的消除歧义,如分离式,我们就不太需要额外地增加辅助提示了。但是如果使用容易造成歧义的开关,我们可以按照(开关类型+辅助提示 1 +辅助提示 2 +......)的公式进行设计,即一种辅助提示不足够消除歧义,可以使用多种一起。


举个上文的例子,高德地图的下车提醒开关的设计就是「名称变化开关+辅助文案+语音提示」 的组合。


然而,任何设计都不是完美的,很多地方都需要我们做出妥协,虽然我们可以选择合适的开关类型和辅助提示解决歧义问题,但随之而来就可能出现其他问题。如分离式开关消除歧义效果很好,但是占用空间且不美观,模态和非模态提示给予用户的反馈比较强,但是可能打扰到用户。


综合上文提到的三款相机软件作为案例,如下图,我们可以发现在消除歧义的过程中避免不了对用户造成的干扰或页面美观度的降低。我们很难去评判Faceu激萌、美颜相机和美图秀秀哪个设计得更好,它们只是在易用性和美观性之间找到了它们所认为的平衡点。具体如何设计,还是要具体问题具体分析。



那么我们应该如何进行取舍呢,在这里我们要考虑另外的因素。我们可以从以下角度分析,使用频率、用户人群、潜在风险等。


使用频率:使用频率越高,用户对操作的熟悉度越高,歧义对用户造成的理解与记忆成本就降低了,设计可以偏向低干扰和美观度,反之使用频率越低,歧义对用户造成的理解与记忆成本升高,设计就应该偏向于易理解。


用户人群:不同的用户人群的风格偏好、认知能力是不一样的。例如,我们要设计一款目标用户为年轻人的相机产品,设计风格简约,此时我们比较偏向的设计方案可能就类似美颜相机。反之,如果我们的目标用户是中老年人,就要偏向于易用而牺牲美观度,方案转而偏向美图秀秀或 Faceu 激萌。


潜在风险:开关的切换如果会导致潜在风险,设计就应该偏向于易理解,且需要使用模态提示告知用户风险。例如用户如果关闭了推送通知开关,会导致接收不到实时重要的信息通知,此时不仅要使用易识别的开关类型,还需要添加模态提示告知用户风险。


我们可以将这些考虑角度放到雷达图,如下图所示,最终形成的面积越大我们越应该将按钮制作得易理解、易使用,反之我们可以偏向于将开关制作得更美观牺牲一些易用性。考虑到一些特殊产品的特殊用户属性,我们可以在下图中增加其他考虑角度,其并不是一成不变的。



以上是本次对开关设计的思考,看似小小的一个开关,包含的学问却不胜枚举。作为一个互联网产品设计从业者,一定要善于感受生活,用设计师细腻的内心去打量、洞察身边的一切事物,发现美与不足,思考改进方法,并在这个过程中逐渐提升自我的价值。

转自:站酷-Ballen贝林 


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


让用户多走一步,让产品前进一大步

鹤鹤

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



在产品交互设计中,

有些交互逻辑会“故意”让选择用户多走一步,


而短短的一小步,却会迸发出更多的价值!

(在不影响用户体验情况下)


而这次,我在体验这些产品当中,获取的一些思考分享给大家。

我们就来聊聊有哪些是多让我们做一步而让产品更加升华的一些APP吧!



文中涉及到的理论包括:


尼尔森十大可用性原则

第五原则-防错原则(Error prevention)

第六原则-易取原则(Recognition rather than recall)

第七原则-灵活原则(Flexibility and efficiency of use)

我们常能听到以上的十大原则之中的著名设计理论,

但可能还是不太清晰是什么意思


而这篇文章将会实际分析

涉及到的原则知识我将会在案例中分析讲解~



--------------------------------------我是分割线------------------------------------


以下是实例分析:



1-1 . 灵活原则(Flexibility and efficiency of use)

「中级用户的数量远高于初级和高级用户数。为大多数用户设计,

不要低估,也不可轻视,保持灵活。」



实例A:网易云歌曲收藏功能和淘宝收藏功能对比

(收藏后选择歌单方便一步)




在网易云的歌曲收藏功能里,点击收藏需要再次选择你想放入的歌单才能收藏成功。相比于淘宝的点击收藏立马收藏成功,这样的做法明显是网易云多了一步,而个人观点分析这样做的是因为(网易云重度用户):


1.功能性来说:

歌单是早期网易云诞生的重要和特色功能


2.行为路径来说:

减少用户后期创建新歌单过程中 还要去重新收集歌曲,从而更容易定位快速创建自己的个人歌单

(歌单做分类 同时网易云歌单作为分享也占很大一部分)


总结来说:网易云是一个主打评论和歌单的音乐社区软件,先选择歌单多一步步骤,让用户后面听自己的歌单更为清晰的知道分类,也同时活跃于创建歌单的乐趣当中,让用户停留的时间越长,产品也就得到了一部份价值,从而增加了用户的粘性。这样就是“多一步”的特别之处。


实例B:爱彼迎的注册信息多步界面操作

(表单信息更便利一步)



爱彼迎在用户注册信息的时候,会把收集的资料分多次进行输入。

这样的设计解决了用户面对长篇表单填写的心理压力,同时告知余下的页面数,让用户心理存在预期考虑。


将复杂的表单分成若干步,并引导用户如何操作,并提示余下操作的步骤。一个这样的举动,不光是分段优化了表单的填写步骤的一小步,同时让新用户更轻松注册,提升了用户的注册转化率的一大步。


实例C:小红书淘宝等大部分app的隐藏退出功能
(隐藏退出更深一步)


目前近几年大部分应用的退出账号功能是做的比较隐藏(点击设置icon-最下方才能退出)
相比于早些年app在个人中心里最下方直接会出现退出登录
近年来隐藏二级或三级页面下的做法是在太普遍
而大概分析了如下App的的做法

(小红书)


小红书个人中心界面设置除去顶部个人信息展示

另外就是侧重笔记功能-收藏功能-赞过功能

因为这三个功能方便了用户能快速找到自己的收藏从而阅读或者自己发布,而设置功能仅用一个icon去代表,而整体布局就摒弃了传统的功能设置列表那样,更突出了产品功能侧重点,也迎合了产品的业务发展。


(淘宝)


淘宝的个人中心页面就十分大体量了 里面涵盖了诸多产品功能 一个很完备的生态系统 ,隐藏在二级的功能设置顺应了产品的向上的全面发展轨迹,设置功能(退出等)就属于一个超低频率的触发事件了。节约了界面的展示成本。

而存在较为直接展示退出账号的App吗?


答案肯定是有的~


(qq安全中心-Appstore)


此类应用首先功能比较单一,
就先拿qq安全中心来说,它是属于一个账户保护监管的应用,而为什么不把设置隐藏在更深的页面呢?
如图所示就大概看的出来,产品功能较为单一,再去添加一个设置功能二级入口就显得冗余了,且对于用户拥有多个账户 退出切换功能就比较重要了。


 Appstore也是如此 垂直于App的应用商店,在个人设置上功能较少,也是较为直观的放在底部。


存在的一些个人认为可调整的app

(印象笔记)



印象笔记的退出登录其实比较迷了 在个人中心界面放的犹为突出,而底部的现在同步功能我觉得在同类笔记中是较为重要。而这样本末倒置了,就是一个大的谜了。




--------------------------------------我是分割线------------------------------------




1.2 . 防错原则(Error prevention)

「比出现错误信息提示更好的是更用心的设计防止这类问题发生。在用户选择动作发生之前,就要防止用户容易混淆或者错误的选择」


实例A:银行类(信用卡)app的重复验证功能

(增加双重验证一步)


拿招商银行推出的掌上生活App来说,在用户每次重新打开的同时都需要重新验证身份(各类平台存在 Face ID 手势密码 登录密码等),而你在付款或者交易的过程中,需要再次密码验证, 这样每次都多一步交互动作,其实都是为了更加安全的保障用户的个人财产,同时也突出了产品的安全性和可靠性。


那为啥QQ 微信每次不这样呢?(常用设备环境下)

微信qq虽然也有锁定功能,但考虑用户使用打开频率较高,所以只在支付层面上保护验证密码。
 

实例B:微信的侧滑删除功能对比淘宝侧滑删除宝贝功能

(增加确认删除一步)



微信聊天列表的滑动删除在一次点击后会继续显示“确认删除”按钮,其实也是二次保障让用户有一个心理预期,效果其实和大部分APP弹窗显示删除一样。


而淘宝收藏列表的商品侧滑删除点击就立马删除,由于没有提示“确认字样”,对于很少用该功能的用户来说,会带来一种不符合预期的想法。


当然淘宝和微信区分做法认为考虑的是 :

淘宝:让用户能够快速删除该商品,不需要造成不必要的二次确认,浪费时间。

微信:删除的是聊天记录,是不可逆的操作,聊天记录对用户价值比较大,而淘宝的商品是可以继续收藏回来,就比重来看的话,两个删除操作其实大有不同。



实例C:优酷等视频类App 4G网络下播放提示

(增加提示一步)



在大部分视频App中,当在无WIFI环境下的4g网络连接下,播放视频过程中会显示当前视频为流量播放单中,是否继续使用流量播放下去,这样一个小提示,避免了用户因为WiFi断开导致产生大量流量费用。



--------------------------------------我是分割线------------------------------------




1.3 .易取原则(Recognition rather than recall)

「尽量减少用户对操作目标的记忆负荷,动作和选项都应该是可见的。用户不必记住一个页面到另一个页面的信息。系统的使用说明应该是可见的或者是容易获取的。这也说了交互的一部分,比如填完表单,下一步应该生成表单,而不是下一步就是完成。」


实例A:淘宝人生账单

(增加表单全部展示一步)



在最近新出的淘宝人生账单中,会展示出自己消费的数据,

并在分享之前再次确认信息的完整度。这里为什么要需要最后展示一步呢?


而 同等逻辑下网易云音乐2018年度报告,

没在最后展示所有分析数据,我们是否质疑没做到很优秀呢?


(网易云音乐2018年度报告)


其实不然,首先网易云音乐的报告长度很长,放在最后面会导致长图分享,没有单页面展示效果好,也照顾到了大量数据长图表单分享的复杂性。


1.并且我们目前大部分年轻人分享某个页面的时候, 惯用的操作是立马截图,

而网易云音乐做到了每个页面都放置了当前的二维码 从而做到识别二维码快速分享,

也能让用户快速打开自己的年度报告。


2.心理层面深度分析下:部分数据的内容,其实用户不太想分享,如果网易云做了最后的长图分享,其实会让部分用户不愿意分享自己的某些不想让别人知道的私密歌曲或其他。造成多余的用户操作(裁切或者隐藏)给部分用户带来不便。



淘宝人生账单案例

展示完表单数据,下一步生成对应表单,让用户有意识性的能再次确认内容,从而分享转发,而不是盲目的完成,造成用户的上一页查看产生困扰。


而网易云音乐

的做法,由于数据的复杂性和多样性,聪明的以现在的用户操作行为和心理研究等,每页嵌入二维码,做到了更发散思维的方法拓展。



更多一步实例:Youtobe视频开头广告

(增加5秒跳过广告一步)


youtobe的广告是业内运营的比较好的例子,他的好在于,在一段30秒的广告当中,让用户可以选择5秒后跳过此广告,但为什么要让用户不看完广告就可以跳过呢?这不就让广告没有价值了?


其实不然,youtobe也分析了用户的等待广告行为,在投放youtobe的30秒广告当中,5秒的广告,会让用户会更有耐心看完,因为时间短,用户愿意等待,而不是用户去上个洗手间,去冰箱拿个汽水之类的行为,用户会更加专注于5秒的广告当中,而广告投放商们,他们会更加把5秒的视频内容做的更加突出重点,短短5秒就呈现出该广告的优势所在,从而用户会激发点击欲望,从而达到商业价值。这里的产品增加跳过广告一步,其实蕴含的价值,推广远比完整30秒的广告更加优秀。



--------------------------------------我是分割线------------------------------------



总结:


以上的诸多“多一步”,其实是产品思维的多一步分析。

促使我们在设计界面和产品功能架构上,

更加了解各类App设计布局的深层次逻辑思考。


设计优化的不光是视觉,更是产品思维的层层剖析。
在参考的过程中,不要盲目的抄袭模仿布局架构,边做边思考。

从而形成自己对产品的理解。

转自:站酷-tronyoung


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

日历

链接

个人资料

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

存档