首页

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

ui设计分享达人

在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

ui设计分享达人

前言


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界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

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

ui设计分享达人

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



  • 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的细节变化·上

ui设计分享达人

拆解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:过去四年,我从未察觉到有设置铃声的功能。囧

前端学习与工作中常用网站推荐

seo达人

一.视频学习网站

1.慕课网(我的最爱,里面有很多免费的视频)



2.腾讯课堂 



。。。



当然还有很多其他的视频学习网站,但我觉得就这两个就够质够量了。



二.前端免费模板下载

1.html5tricks



有很多有趣的小程序



2.源码之家 



各类模板灰常之多,不过也有很多广告



3.代码家园



整个网站看起来舒服,广告很少



4.模板之家



广告较多



5.魔客吧



有些要money



6.站长之家



。。。



模板网站就推荐这些吧,差不多够用了。当然,我们下载这些模板的目的不是为了抄袭,而是为了参考学习。(手动滑稽:) )



三.图片图标logo素材

1.标志在线



免费设计logo



2.阿里巴巴矢量图标



图标特别多,而且基本上都是免费的



3.iconmonstr



免费图标下载



4.懒人图库



素材很多,不知道要不要钱



5.loading.io



看名字就知道是下什么的了吧



6.preloaders



进度条下载,有些要钱还是dollar,不过也有很多免费的



。。。



好吧,就这些。



四.其他

1.JS格式化



如果你的编辑器不支持格式化js代码的话可以试试



2.css代码兼容



css代码复制上去,自动会帮你生成兼容的css代码,是不是很厉害!不过兼容IE几我也不太清楚,你们自己去看看吧



3.配色



这是给你网站配色的,有兴趣的可以了解下



4.html、css、js压缩,js多文件合并



es6代码需先转es5再压缩,当然,也可以使用fis3构建压缩html,css,js;fis3还可以将图片转成webp格式(ios有兼容问题)



5.图片压缩



基本上是无损压缩,效果很不错



6.图片转换



转webp格式图片



7.雪碧图 (似乎访问不了了)



选中雪碧图中的图片,自动生成css代码。如:background: url('imgs/example.png') no-repeat -433px -51px;width: 33px;height: 33px;



8.html在线编辑工具



可以在线运行html代码



9.rgb,rgba,十六进制等颜色相互转换



10.HTML特殊字符编码对照表



11.改图宝



修改图片尺寸,生成二维码,生成印章,图片加水印...



。。。



 



最后,再推荐一些比较好的书



《css世界》、《ES6标准入门》阮一峰、《JavaScript权威指南》、《JavaScript高级程序设计》(红皮书)、《你不知道的JavaScript 上中下册》

————————————————


关于Costco,你可能不知道的10件事儿

资深UI设计者

8月27日,中国大陆第一家Costco在上海开业,因为人满为患,上午开业,下午就被迫暂停营业了……

Costco开业的第二天,为了保证购物体验,Costco开始实行了限流政策,将卖场人数控制在2000人以内……

上海市民们依旧热情未减,有人早上4点半就去Costco门口排队了,大多数人6点半就到了,因为限流,来晚就进不去了……

27日晚上,我发了一条朋友圈,附了一张在Costco照的,抱着一大包狗粮的照片:

大家都问我是怎么挤进去的。

其实这不是在上海的Costco,而是在美国的Costco。

今年1月,我带队去美国游学,专门去参访了Costco公司的总部。

Costco的高管Jay B.Smith负责接待了我们,他给我们分享了很多Costco的经营细节,都是不为外界所知的。

同时,他告诉我们Costco很快就会在中国上海开业了,我们也代表中国消费者采访了他许多问题,特别有收获。

所以,今天,我想把这些“关于Costco,你可能不知道的事情”整理出来,独家分享给你。

01 会员制,并不是Costco成功的关键原因

Costco最早开始推行会员制的时候,其实遭遇了巨大的失败。

人们当时是不接受,也不理解会员制度的,没有多少人来办会员,Costco差点就死掉了。

那Costco是如何起死回生的呢?

它做了一个关键的改变:给高级会员2%的消费返点,每年的返点额度最高可以达到500美元。

高级会员每年的年费是120美元,一个家庭每个月只要在Costco消费500美元,一年下来,这120美元的会员费就可以返点回来了。

而如果你每个月消费500美元以上,你甚至还可以赚到额外的钱。

对于一个中产大家庭来说,平时需要购买食品、日用品、衣服等生活用品,偶尔还需要购买电子产品或者其它大件,每个月500美元的消费也不算太高。

加上Costco的商品物美价廉,本身就比别的渠道有价格优势,只要每个月消费500美元以上,省了会员费不说,还可以获得额外的返点,何乐而不为呢?

就这样,Costco迅速获得了第一批会员。

这些会员办了卡之后,既买到了物美价廉的商品,又拿到了额外的返点,同时还享受到了Costco把顾客宠上天的服务。

因此第二年的续费率高达96%,Costco也越做越成功。

02 Costco最不愿意做的事情就是扩张

Costco每年在全球范围内只扩张25家门店,相对来说,扩张速度算是比较慢的。

因为Costco最不愿意做的事情就是扩张。

为什么啊?

Jay B.Smith告诉我们:扩张,是最好的让客户失望的方法。

扩张太快,非常容易带来用户体验的下降,这是我们最不愿意看到的事情。

因此,对于扩张这件事,Costco一直是非常谨慎的。

03 25%自营商品+75%品牌商品

Costco的商品中,有25%是自有品牌的商品(比如它著名的自有健康品牌科克兰Kirkland Signature),剩下的75%是其他品牌的商品。

为什么这么分配呢?

因为它要用25%的自营品牌,来倒逼其他75%的品牌降价。

Costco有经营自己品牌的能力,因此它就有底气跟大品牌说:“你要是不降价,那我就用自己的品牌做了。”

这就导致了大品牌愿意降价来给Costco供货,Costco也因此能给用户提供比别的渠道便宜得多的商品。

一开始,很多大品牌是不愿意和Costco合作的,因为它们其他的零售店要保留高利润。

但是当Costco越做越大,越来越多的大品牌愿意来costco了,比如劳力士,比如爱马仕。

04 Costco一开始其实是面向中小企业的

很多人觉得Costco就像是沃尔玛旗下的山姆会员店;但其实,Costco一开始更像麦德龙。

Costco最初本来是打算做中小企业生意的,大包装仓储商品直接卖给企业,而不是卖给个人消费者。

但是因为覆盖面太小,Costco差点死掉。

之后Costco才转型,决定面向个人消费者。

05 Costco为什么非常重视肉类商品?

Costco为什么非常重视肉类商品?

因为肉类商品是非常有粘性的。

Jay B.Smith告诉我们:消费者非常喜欢Costco的肉类,肉类商品会吸引消费者一而再、再而三地来Costco购买。

不像可口可乐、薯片这种标准化商品,肉是非常差异化的商品,你在不同地方买到的肉,质量肯定是不一样的。

你只要把肉类这种差异化的商品做到极好,就会积累消费者的信任,增加消费者的粘性。

所以,Costco非常重视肉类商品的质量。

06 Costco为什么可以把东西卖这么便宜?

很多人都觉得,Costco可以把东西卖这么便宜,是因为它靠会员费赚钱。

但是靠会员费赚钱,只能说Costco有把东西卖便宜的动力。

那它把东西卖便宜的能力从何而来呢?

第一点,是因为它的包装很大。包装越大,就能卖得越便宜。

第二点,是因为它的品类很少。

沃尔玛有13万SKU(品种),而Costco只有4000个。

因为品类少,单个品类的销量就可以做到极高,Costco就拥有了很强的与供应商议价的能力。

第三点,是因为它很多商品是自营,可以自己控价。

比如,Costco有自己的养鸡厂,它砍掉了所有中间环节,最终一只能够喂饱全家的烤鸡,只卖4.99美元。

一只烤鸡4.99美元,35人民币,这在美国是极其便宜的。很多用户因为买到这么便宜又量大,味道还不错的烤鸡,简直幸福感爆棚。

07 Costco目前是全美最大的红酒厂商

还有一点你可能不知道,Costco目前是全美最大的红酒厂商。

因为Costco卖出的红酒量实在太大。

但是它并不卖很多种类,它只卖几款最畅销的红酒。

08 Costco其实还做金融生意

在美国,对很多人来说,Costco的会员卡同时也是银行卡。

Costco和Citibank(花旗银行)合作,发行了一种联名卡。

既可以作为Costco的会员卡,也可以当做信用卡使用,在Costco消费可以享受2%的返现。

这也就意味着,Costco其实同时也在做金融生意,帮助信用卡的发行方来发行信用卡,同时来分享信用卡的刷卡收益,这可能也是Costco一个非常重要的收入来源。

在中国,平安银行也和Costco发行了一种联名信用卡,会员费可以减100元,同时在Costco消费可以获得最高1%的返现,白金卡每年最高返现1440元。

09 Costco的周转率极高

像Costco这种零售企业,想要赚钱的一个特别重要的方法,就是提高周转率。

Costco的周转率非常高,是11.8,接近12。

什么意思?

Costco用一笔钱进货之后,一个月之内就能把货物卖出去。

这也就意味着,同一笔钱,Costco一年可以周转12次。

我们来算一笔简单的账。

假如一个货物放在一个普通超市,三个月才卖出去,那么用来进货的这笔钱,一年只能周转4次。

很多人都知道,Costco的利润率最高不超过14%。我们假设它的利润率是10%。

那么1块钱的进货款,在普通超市,一年周转4次,就只能赚4毛钱。

而Costco一年周转12次,就能赚1块2。

所以,周转速度越快,零售企业的利润就越大。

在Costco有一句名言,叫做,降低成本最好的办法,就是提高销售。

什么意思呢?

如果想要降低成本,就要提高每天的出货量,这样周转率就会非常高;周转率变得非常高,资金成本就会变得非常便宜。

所以,真正的成本,是资金成本。如果你理解了这件事儿,你就会理解到底什么是Costco。

10 Costco在中国会做电商吗?

Jay B.Smith告诉我们Costco马上就要在中国开店了。

我们当时问他:Costco会打算在中国做电商吗?

Jay B.Smith很谦虚地回答说:电商其实是我们一直不擅长的事,美国有一些企业做得特别好,比如亚马逊,我们要向它学习。

但是,我们还是希望专注于做自己擅长的事。Costco所擅长的,是在线下做供应链管理。

所以,Costco知道自己所长,也知道自己所短。

目前来看,就算Costco在中国要做电商,它也会把主要的精力放在线下,把线下的服务做到。

最后的话

最后,附上Jay B.Smith给我们分享的一组数据(截至2019年1月):

  1. Costco在全球共有736家门店,其中:美国516家,加拿大94家,墨西哥36家,英国28家,日本25家,韩国13家,中国台湾地区13家,澳大利亚8家,西班牙2家,冰岛1家;
  2. 拥有9270万持卡会员;
  3. 年营业额:1310亿美元;
  4. 会员续费率:90%;
  5. 全球拥有24万名员工 。

Costco是全球第二大零售商,第一是沃尔玛。

它是把零售效率做到的典型案例,是每一个零售企业学习的标杆。

参访完Costco,我自己是非常震撼的。它能够获得今天的成功,很大程度上,要归功于它死磕自己、为用户谋利的精神,以及它强大的供应链管理能力。

在中国,也有很多向Costco学习的企业,比如小米,比如拼多多。

最后,依然祝福Costco,希望它能够在中国,越走越远。

文章来源:人人都是产品经理

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

ui设计分享达人

篇首语:


随着互联网时代的发展,尤其近几年进入“互联网寒冬期”以及失去人口红利之后,企业对各个岗位要求都变得“非常”严格。对于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界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

el-table + el-form实现可编辑表格字段验证

seo达人

表格输入信息很常见,因此表格的验证也很必要,el-form提供了输入框验证.可以和表格结合起来用,使用效果
 
 
HTML:
<div class="table_box">
  <el-button type="primary" class="submit_btn" @click="addTable">添加</el-button> <!-- 如果不想展示错误提示信息,可以加上show-message参数 --> <el-form :model="productRuleForm" ref="productRuleForm" :rules="productRuleForm.rules" :show-message="false">
    <el-table
      :data="productRuleForm.tableData" border
      style="width: 100%">
      <el-table-column
        prop="date" label="日期" width="180">
        <template slot-scope="scope"> <!-- prop的规则: 在普通的form表单中是一个对象,prop是对象的属性. 表格是由多个对象组成的数组,在写prop是需要根据索引给值.这里的tableData就相当于对象的属性 !-->
        <!-- rules也要单独给 --> <el-form-item :prop="'tableData.' + scope.$index + '.date'"
            :rules='productRuleForm.rules.date'>
            <el-date-picker
              v-model="scope.row.date" value-format="yyyy-MM-dd" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        prop="name" label="姓名" width="180">
        <template slot-scope="scope">
          <el-form-item
            :prop="'tableData.' + scope.$index + '.name'" :rules='productRuleForm.rules.name'>
            <el-input v-model="scope.row.name"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        prop="phone" label="电话">
        <template slot-scope="scope">
          <el-form-item
            :prop="'tableData.' + scope.$index + '.phone'" :rules='productRuleForm.rules.phone'>
            <el-input v-model="scope.row.phone"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        prop="address" label="地址">
        <template slot-scope="scope">
          <el-form-item
            :prop="'tableData.' + scope.$index + '.address'" :rules='productRuleForm.rules.address'>
            <el-input v-model="scope.row.address"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
  <el-button type="primary" class="submit_btn" @click="submit">提交</el-button>
</div>

 


        

 

js:

data () { return {
      productRuleForm: {
        tableData: [{
          date: '',
          name: '',
          phone: '',
          address: '' }],
        rules: {
          date: [{ required: true, message: '请选择日期', trigger: 'change' }],
          name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
          phone: [{ required: true, message: '请输入电话号码', trigger: 'blur' }],
          address: [{ required: true, message: '请输入地址', trigger: 'blur' }]
        }
      }
    }
  },
 methods: { // 添加一行  addTable () { this.productRuleForm.tableData.push({
        date: '',
        name: '',
        phone: '',
        address: '' })
    }, // 提交数据  submit () { this.$refs['productRuleForm'].validate((valid) => { if (valid) {

        }
      })
    } 
            

}

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

原型该画到什么程度?

资深UI设计者

原型的不同阶段,含义和作用也各不相同,更加认清了原型在工作中的用途,希望对各位也有所帮助~

不知你有没有这样的经历:为了不让原型看起来丑,会纠结各种细节处理(间距、大小),结果造成工作周期延长,精力损失;为了让原型接近于真实效果,会思考各种精致布局,结果leader来一句‘你现在做这么好看干嘛,这个功能都没确定好’....在各种阶段画出了不合适的原型。


所以今天想聊聊‘交互原型’这一话题,也算是对自己成长的一个总结和沉淀。


文章目录:

·原型的不同阶段

·原型与用户体验的5个层面

·原型产出的原则

Image title




Part1:原型的不同阶段


其实我觉得画原型和做设计的理念是一样的:没有好坏,只有是否合适~

当产品经理/交互设计师没认清当前的需求阶段时,无论你画的好不好看,都会出现一些糟糕的现象:一开始就注重细节处理、在原型需要重点输出时,又忽略功能与逻辑上的思考、在功能未确定时追求精致页面效果...


下面是我对‘原型’的理解,所绘制用于表示不同阶段下的需求特征。

Image title




01.想法阶段:


在产品需求的初始阶段,功能概念都比较模糊,大部分想法都停留在脑海和口述上(工作中典型的场景,如团队风暴、需求讨论、会议评审)。需要我们不停地理清概念想法,验证需求的合理性、目标是否正确。


所以这个阶段的强调是:产品雏形 - 将我们的想法、概念需求可视化出来,并加以讨论验证。因此,最合适的方式就是用‘草图’表达,快速产出快速修改,能即时看见产品的雏形。

Image title


常用‘草图’勾勒产品雏形,除了可以表达想法、探索方向外,好处还在于:

a. 能提升你快速思考、验证假设、优化设计流程的能力。

b. 能展示你思考问题的过程(设计思维),体现专业能力。

Image title



02.修改阶段: 


这阶段的产品目标和方向较为清晰,接下来需要优化原有的概念想法,为产品创建一个信息架构、梳理功能逻辑等工作,方便在需求评审会、团队讨论中推动产品功能的进展。 


该阶段强调:理清目标 - 根据用户诉求、业务目标、运营需要等不同目标点,逐步梳理出原型上需要展示哪些功能内容(界面布局、信息取舍)。

Image title


所以对产品经理/交互设计师来说,只需产出一个大体上看得明白、能理清产品功能的‘中保真原型’即可。方便即时修改,向产品定型/高保真原型过渡。

Image title



03.确定阶段:


到了这个阶段,产品需求的功能布局、信息设计已全部确定,这时一份全面、严谨的‘高保真原型’就尤为重要。


一方面可以为视觉同事的UI输出、开发的落地实现等提供依据。另一方面在各种工作场景中,高保真原型都能发挥很大的作用,如交互评审、领导过稿、A/Btest、demo演示等等。

Image title


这一阶段强调:细节核对 - 因为关系着UI输出、界面实现等工作,所以需要注意各种交互细节,以防出现设计、流程上的漏洞。


有2个核对纬度上的检查:


a. 规范对齐


若团队内部有设计规范时,一定要对齐字体大小、颜色、布局、间距等视觉元素。且能复用已有样式就尽量复用,避免出现“一个功能,两种样式”的情况,如图:

Image title


b. 交互走查


高保真原型输出后,需要根据交互自查表,一一梳理原型说明是否存在漏洞,以防出现异常流程和内容状态。Image title


另外,当你想要获得用户反馈、测试你的想法是否为业务/用户创造价值时,尽量使用高保真原型。原因在于:能够产生真实的操作效果、给用户带来‘身临其境’的浏览体验。

Image title

最后总结一下,不同阶段的原型用途:


·草图:快速表达想法、验证需求、展示思考过程。

·中保真原型:梳理大体产品框架,继续优化功能。

·高保真原型:为UI输出与开发实现提供依据、测试用户反馈、制作交互demo、向领导过稿等等。

Image title





Part2:原型和用户体验5个层面


另外我还发现,结合‘用户体验5个层面’来看不同阶段的原型,两者是多么地吻合、有理有据。


01.战略层和范围层 - 草图


产品想要做什么?如何去满足战略目标?在构思把目标和需求转变成功能和内容时,用草图的方式是极为合适的:快速表达、即时验证,能让概念想法马上‘可视化’出来。

Image title



02.结构层 - 中保真原型


想法表达后,需要为产品构思一个具体的框架结构,根据业务目标和用户诉求,不断地修改产品功能、信息设计,慢慢完成产品的定型。所以这时候只需产出一个大体上看得懂、方便修改的中保真原型即可。

Image title



03.框架层 - 高保真原型


这是原型设计的最后阶段,产品关系已理清、功能内容已确定。这阶段注重原型的界面细节处理,如梳理异常流程、信息的不同状态、是否对齐规范等等,以便后期的界面实现,所以一份高保真原型就尤为重要了。

Image title



04.表现层 - UI效果图


原型确定后,接下就是UI优化阶段了,这时候产品的最终效果也就出来了。产品的下次功能迭代,也是根据此UI效果图的基础上进行原型优化、修改。

Image title





Part3:交互原型的原则


最后简单说下,原型产出的几个原则:‘使用灰色图’和‘复用已有样式’,避免在今后工作上踩坑:


01.使用灰色图


原型就要有原型的样子,大面积的彩色布局,很容易让人觉得这是UI效果图(视觉同事可不背这个锅),尤其是在交互评审会上,这种细节更应该注意。



02. 复用已有样式


这个上面已经说了,能复用样式就复用,避免出现“一个功能 两种样式”的情况,否则和视觉、开发同事对接原型时,会造成一定的理解干扰。



总结:

以上对交互原型的一些见解,若有描述得不当请多指教,下面是总结文件(转发截图给我可领取)。

Image title


文章来源:UI中国

element ui在table中放入input且实现验证

seo达人

<template>

  <div class="app-container" style="overflow: auto;">

    <el-table

      :data="list"

      size="small"

      element-loading-text="Loading"

      border

      highlight-current-row

    >

      <el-table-column label="会员账号">

        <template slot-scope="scope">

          <el-form :model="scope.row" :rules="rules">

            <el-form-item prop="login">

              <el-input v-show="true" v-model="scope.row.login" placeholder="请输入会员账号"/>

            </el-form-item>

          </el-form>

        </template>

      </el-table-column>

      <el-table-column label="真实姓名">

        <template slot-scope="scope">

          <el-form :model="scope.row" :rules="rules">

            <el-form-item prop="real_name">

              <el-input v-show="true" v-model="scope.row.real_name" placeholder="请输入真实姓名"/>

            </el-form-item>

          </el-form>

        </template>

      </el-table-column>

      <el-table-column label="会员昵称">

        <template slot-scope="scope">

          <el-form :model="scope.row" :rules="rules">

            <el-form-item prop="nickname">

              <el-input v-show="true" v-model="scope.row.nickname" placeholder="请输入会员昵称"/>

            </el-form-item>

          </el-form>

        </template>

      </el-table-column>

      <el-table-column label="会员手机">

        <template slot-scope="scope">

          <el-form :model="scope.row" :rules="rules">

            <el-form-item prop="mobile">

              <el-input v-show="true" v-model="scope.row.mobile" placeholder="请输入手机号码"/>

            </el-form-item>

          </el-form>

        </template>

      </el-table-column>

      <el-table-column label="操作">

        <template slot-scope="scope">

          <el-form ref="scope.row" :model="scope.row">

            <el-form-item>

              <el-button @click="handleSubmit(scope.$index,scope.row)">重试</el-button>

            </el-form-item>

          </el-form>

        </template>

      </el-table-column>

    </el-table>

  </div>

</template>

<script>

import { retry } from '@/api/table'

import { validateName } from '@/utils/validate'

import { validateMobile } from '@/utils/validate'

 

export default {

  data() {

    // validator

    const validateNameInput = (rule, value, callback) => {

      if (!value) {

        return callback(new Error('此项必填!'))

      } else {

        callback()

      }

    }

    const validateMobileInput = (rule, value, callback) => {

      if (!value) {

        return callback(new Error('手机号码必填!'))

      } else if (!validateMobile(value)) {

        return callback(new Error('请填写正确的手机号码格式!'))

      } else {

        callback()

      }

    }

 

    return {

      list: [],

      // input框失焦校验

      rules: {

        nickname: [{ validator: validateNameInput, trigger: 'blur' }],

        real_name: [{ validator: validateNameInput, trigger: 'blur' }],

        mobile: [{ validator: validateMobileInput, trigger: 'blur' }],

        login: [{ validator: validateNameInput, trigger: 'blur' }]

      }

    }

  },

  created() {

    this.fetchData()

  },

  methods: {

    fetchData() {

      const errorData = JSON.parse(this.$route.query.errorData)

      this.list = JSON.parse(errorData)

    },

    handleSubmit(index, row) {

      // 提交校验

      if (validateName(row.login) && validateName(row.real_name) && validateName(row.nickname) && validateMobile(row.mobile)) {

       //数据提交和错误catch

    }

  }

}

</script>

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

日历

链接

个人资料

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

存档