首页

当负责人和组内设计师过稿子的时候,都在想些什么?

seo达人



今天依旧是篇实战小分享,就是简单和大家分享下我最近和组内小朋友们的过稿日常。每次过稿子前我都深深在心中铭记3条准则:别刷存在感、别装13、别下手太重。这里和大家分享下我的心路历程,希望能对大家过稿有亿点点帮助。

 

1.不想看需求文档

通常拿到设计师投喂的需求设计稿后,第一时间非常抵触去看需求文档。不用找其他借口,不看需求文档纯粹就是因为懒。不过很神奇的发现,站在陌生的第三视角反而比沉浸在需求文档里更容易发现一些问题。(绝不是为我的懒找借口)

 

举个例子:

之前做海外版的需求,看到设计师有一个列表页面设计成这样的,我反复看了几遍都没明白这个“5 times(5次)”放在爱心按钮下是啥意思。

图片

直到对稿子的时候,设计师拿出了原型,上面对这个“5次”的解释赫然写着“访问次数”:

图片

图片

可能现在大家和我一样站在第三视角都会觉得这样的布局不合理,也不清楚“5次”的意思,但是在完整的需求文档面前很多时候疑问后面直接有解释的时候,我们就容易沉浸到产品给的信息设计中,忘记以一个陌生用户的视角来重新审视信息的设计了,也就是通常意义上的信息理解免疫

如果我们按照新的思路重新捋一下:这个访问次数应该和什么信息群放在一起更合理?

于是我们决定把字段信息都放在左侧,做一个三分段的信息布局:依次是名字、性别、访问次数、最后是访问时间。同时在访问时间字段上增加信息的补充辅助用户理解含义。整体对比如下图:

图片

 

2.交互细节好像不够合理

其实很多团队是没有专门来做界面细节交互的设计师的,就算有title是交互的设计师承载的任务大部分也都是原型绘制和无止尽的PPT产出。所以界面里涉及的一些权责模糊的交互细节大任就落到ui的头上,但这往往也是设计师们容易考虑不周全的地方。

 

举个例子:

我们这期的设计改版中涉及到一个礼物面板,设计师已经做了很多的基础优化(转线为面、空间排布及信息降噪)

图片

但这位积极的童鞋不止于此仍然还想做点创新的东西出来,ta参考了下之前look的交互,又做了一个直接竖滑动的交互设计:

图片

(左图为look直播的礼物面板交互)

 

这个交互方式比原始的轮播点横滑看上去要高大上与创新很多,but市面上不太有直播类的产品用到这种看上去very good的交互方式(除了look),那么这到底是为什么呢?

图片

仔细观察我们就可以发现使用了直接竖滑的look对礼物的种类进行了详细的分类(常用、热门、玩法、特权、星座等),且每个分类下的礼物滑动基本不会超过2行(大部分控制在一屏内)。

而对于我们现在要设计的礼物面板tab分类的方式并不是以礼物种类为维度的,所以所有礼物都被放到了一个tab下(数量很多),竖滑动没有轮播点的情况下用户很难定位到某个具体的礼物,而轮播点横滑就可以很好的对用户带来操作记忆,比如哪个礼物放在第几页大哥滑动几次就可以找到了。

而当设计改动极有可能影响到大哥送礼物的时候,以营收kpi当头的项目组是万万不敢轻举妄动的。

 

3.用户理解成本好像还可以降低

很多设计师设计的图标、布局都已经非常nice了,在设计质量上是没有任何问题的,但老实说设计这东西没有最好只有更好,除了好看我们需要更关注设计本身传达给用户的理解成本,成本越低体验的障碍就越小,这样带来的点击与转化也越多,这是一个即使不量化数据也相对合理的一个体验假设。

 

举个例子:

很多铁汁可能都做过会员、贵族之类的权益中心,通常这个聚合页的常规排布中段就是一大坨展示权益的图标和文案说明。

因为是权益等级大家的配色估计都会用的比较炫丽,这里我们展示的是一个贵族中心的权益图标,按照产品大大的指示,ta想要那种尊贵的黑金质感,所以我们的设计师就做了如下的设计:

图片

整体黑金质感已经符合产品的预期,也符合基本的设计质量要求,但如果要很严格的细究的话仍然有可以变得更好的方式,所以看到这个设计方案的时候我在想2个事情:

  1. 整体的亮点视重应该放在权益展示部分还是操作区呢?
  2. 图标氛围亮和暗2种代表着解锁与未解锁的概念用户能否一眼就get到?
  3. 现在一屏完整展示9个权益图标,但是实际上所有的权益图标超过了9个,这样的设计是否会影响信息的曝光(因为用户不知道底下还有更多了)?

于是,我们又做了下设计优化,如下:

图片

按钮增加了动效和光带,大家可以自行脑补。

以上就是我们过稿的设计日常,很符合猪厂“专业偏执”的特点。

 

原文地址:Nana的设计锦囊(公众号)

作者:柒爷

转载请注明:学UI网》当负责人和组内设计师过稿子的时候,都在想些什么?

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷   作者:陈皮Celia 

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

数据好体验就好吗?

资深UI设计者

很多同学面试时候都会被问到产品数据,用户体验等问题,这篇文章将讲解产品数据中面试官最为在意那几个指标,以及用户体验的考核方法。*本次话题我会分为上、中、下两篇文章,此文关于产品数据哪些值得我们看,如果这篇文章能帮助到你,还请点赞、分享我会抓紧你分享下一篇怎么体验度量的方法文章。



                                       


1 为什么大厂面试都会问数据


a 数据衡量你的项目是否真实

现在ui市场竞争激烈,选人也很苛刻,面试官判断一个人是否可以入职大厂的第一个指标就是真实,而数据类的问题往往是划分这个人做的项目是否真实的一个重要指标。

因为只有真实的项目才会有数据的提现,自由发挥的项目往往是答不上来有关数据的问题。

所以在大厂面试中都会或多或少的提问数据相关问题,这也是很多同学能进入大厂的一条重要分水岭。


b 录取后给你定什么职位

设计师群体偏感性,单单的看设计作品很难和其他竞争者拉开差距,所以需要理性的数据思维拉开与其他设计师的差距增添自己竞争力的附加值,另外一点通过产品数据的表述可以更有力的证明自己设计方案是最好的方案,方便后期给予定位高级、资深还是专家岗位。


2 数据在项目中的作用

设计师在做多个设计方案对比的时候会遇到这样的提问,现有的设计方案是最适合用户的吗?究竟哪个版本是更好的?为什么是这个版比较好?有的人拿产品埋点数据来评判,有的人用用户反馈来评判,也有的人则坦言需要靠老板的建议来进行评估。


a 数据是一个衡量好坏的一个指标

数据是衡量一个产品甚至一个功能最为科学的办法,他在不同的开发场景中都起到很重要的作用。比如:


·在设计开始前,数据可用于发现问题、分析问题。从数据角度了解用户诉求,发现产品存在的问题,为产品设计优化提供启发和突破口。

·设计过程中,数据可用于帮助决策。通过历史数据论证各个方案的优劣和有效性,再择优。

·设计评审中,数据可提升设计方案说服力。通过理性数据分析,获得团队内部成员、产品/业务方对方案的认可。

·设计上线后,数据可用于量化用户体验价值。通过采集上线前后的数据变化,判断设计目标的实现程度。

大家有没有发现在我陈述的过程中,一直在说数据分析,那这个数据分析是怎么来的来呢?

其实数据分析就像是一个个监控产品数据波动的摄像头,实时监控着数据的波动。以下是我整理关于数据埋点的理论知识,让大家对数据埋点这个概念有个清楚认知。



b 数据对设计师的三个意义

很多人会认为数据是产品经理、运营的工作,其实不然数据对设计师也是设计师的工作,我把数据对设计师的意义归纳为三点:

undefined


1)为设计提案做依据

产品设计者可以由产品经理,UX,UI担当,那需求不能自己凭空出现的,是由相关人员需找出来了,数据就好比一个放大镜,它可以通过线上的数据波动来找寻目前存在的问题即需求。其实这就好比设计师的思维又产品思维转换成数据驱动思维。比如


1、产品初期,没有产品、没有相关的后台数据,那我们要做一个什么样子的产品,就这一个需求。做什么样子的产品可以通过了解大众用户、了解大众市场的数据分析报告得出一个结论,明确我们要做什么样子的产品,这就是数据对设计师的第一个价值做设计提案的依据。比如以下这些场景都需要数据做依据进行设计提案。


2)验证方案是否解决用户需求

判断这个设计方案是否解决用户需求:

2、在多个设计上线后,产品设计、运营方案与产品研发的三方对设计师输出的方案存在分歧点。

也可以通过后台的数据反馈来筛选出哪个方案最符合产品目标(即北极星指标),在多个设计方案中最好的设计解决方案。


3)晋升中衡量设计价值的指标

当然也有一些公司,做为后期晋升,评判设计价值的一种方法。

比如怎么证明自己的设计方案和其他同事相比,设计方案就好呢?通过数据对比,说明自己输出的设计方案价值远高于其他同事,以此证明自己的价值。



3 数据常用于哪里

其实在我们的工作中有很多设计方法可以辅助我们设计更好的设计方案,比如用户调研,竞品分析,产品测试等。这些方法都是通过对用户数据的反馈和整理来判断去发掘方案里面的问题、验证最终方案是用户是否满意。


用户调研:可以把字拆解开来看就两个字面意思,调查:反映客观事实。研究:分析客观事实

主要的形式是用户调研和用户访谈,直接出过这篇文章,有兴趣的朋友可以查阅。

传送门地址:http://www.woshipm.com/pd/4745810.html


竞品分析:确定几款市场上竞争产品,然后通过对产品功能、产品定位,信息架构、颜色、布局、风格等元素的分析,找不同点,再通过数据对比确定产品方案的一种办法。

(因为不同职位做竞品分析的目的,角度和方法都不相同,这里我就不一一讲解了,如果大家有需要后期我会考虑开一篇怎么做竞品分析的文章)下图是制作竞品分析的常规流程。


产品测试:这种方法是用处最广的一种方法,可用性测试是指让一群具有代表性的用户按照指令对产品进行典型操作,同时观察员在一旁观察、记录。

比如我们发现首页Banner的点击率很低,这时候我们就要想办法「通过设计」来提升Banner的点击率,是Banner的大小问题?还是轮播图切换的速度问题?还是图片样式的问题?

但是设计师没办法直接确定他到底是什么问题,所以就需要拿出不同方案给用户测试,看看哪个方案更容易促进他点击。

常用的测试办法有很多这里我就讲三个方法:一个是可用性测试、一个是灰度测试、一个是A/B test测试。


可用性测试:通常在产品开发之前使用,模拟真实的使用场景让用户体验,目的是使用最小的成本来输出正确的设计方案,避免全部做出来以后在进行调试修改。

灰度测试:是指产品开发通过后,将测试的版本发布到真实的线上环境中去,收集用户的反馈。

A/B test 测试:是指产品测试通过并发布之后,同一个功能将使用人群分为两个部分,一部分人使用a方案一部分使用b方案,对比数据波动。





数据的纬度有很多,首先咱们先来看看产品的数据都从哪里来的。通常情况下设计师可以直接找运营人员、产品经理、设计负责人在公司服务器日志里面调取产品埋点数据;或者项目结束后,项目负责人会发产品复盘邮件,数据考核邮件指标等信息,产品埋点数据也会在复盘邮件中体现。


除了以上两点数据来源,还有CNZZ网站分析、百度统计、goodle anlytics可以查询到相关数据。


1 数据可以分为「三个层面」

产品中的每一项数据其实都代表产品的一个纬度的数指都有其意义,如果想用比较简单的方法记住这些有用的数据不妨试一试以下这个办法:


我们可以把数据分为三个层面进行记忆,即用户数据 (描述用户人群的);行为数据 (描述用户使用方式的);业务数据 (描述产品营收的)。



2 用户数据的「四个维度」

用户数据 (描述用户人群的)主要意思就是描述使用产品的这个人群的。这里有四个比较有价值的概念需要大家了解分别是存量、新增用户、用户留存、渠道来源这四种。


a 访问量

访问量也有人称其为活跃用户数、用户存量,其实都是一个意思。简单理解就是指一个人来到网站,然后浏览了一些内容之后离开网站的过程(这个过程也会被称为访问),既在特定的统计周期内,再次访问产品的用户称为访问量。有三个专业名词—DAU/WAU/MAU(日活/周活/月活):每天有多少用户来用产品,每周有多少用户来用产品,每个月大概有多少用户来用产品,这是判断产品规模的最基本的指标。方便产品和设计人员了解产品的每日用户情况,了解产品的用户变化趋势。


DAU(日活):某个自然日内访问产品的用户,算该日一次日活(统计结果去重统计);

WAU(周活):某个自然周内成功访问产品的用户(统计结果去重统计),这个指标是为了查看用户的类型结构,如轻度用户、中度用户、重度用户等;

MAU(月活):某个自然月内成功访问产品的用户(统计结果去重统计),这个指标一般用来衡量被服务的用户粘性以及服务的衰退周期。



*这里补充一个知识点-去重统计:统计结果是按照设备去重统计,如同一个设备多次访问后台只记一个活跃用户。



b *新增用户

新增用户是一个企业很看中的数据,特别是在业务的起步阶段,这个指标尤为重要;这个代表公司的潜力。比如拼多多这家公司一年比一年亏损多,但股价却越来越高,主要原因就是资本市场看好拼多多用户的增速,按照统计跨度不同分为日新增(DNU)、周新增(WNU)、月新增(MNU)。


*在新增用户里面还有一个“用户流失率”的概念需要大家了解。流失率指那些曾经使用过产品或服务,由于各种原因不再使用产品或服务的用户,用户流失率=某段时间内不再启动应用的用户/某段时间内总计的用户量。

产品阶段不同,重心也会从拉新转移到留存,对于一个成熟的产品和饱和的市场而言,获取一个新用户的成本可能是留住一个老用户的数倍,流失率的降低也意味着营收的增加,在这种条件下,流失率的价值是显而易见的。


提到新增用户就一定要说《增长黑客》,这本书里边提到一句话非常精炼的概括了“增长”的概念:以数据驱动营销,以迭代验证策略。通过这句话应该就可以感知整本书的中心思想就是“数据”和“实验”,即AARRR(海盗模型)模型。通过阐述了一个用户生命周期的各个阶段——获客、激活、留存、变现、推荐和召回,实现用户增长的产品目标。



*a-ha moment:a-ha moment也叫Aha时刻中文翻译过来就是尖叫时刻,是增长的一个概念词汇,是指用户通过某个特定行为(产品内的功能体验)得到了很爽的体验,用户可以快速且准确的认识到产品的价值。例如很多知识付费类产品,都会让新用户完整的体验视频看课的流程并且感知到课程的价值,很可能变成产品的新增用户。


c *用户留存

上线的产品怎么反映用户的状况是不是健康呢?最好的指标就是留存率。即在某一统计时段内的新增用户数中再经过一段时间后仍使用产品的的用户比例(留存率=留存用户/新增用户*100%)。留存率又分为次日留存率,次周留存率,次月留存率等


以上三个指标的数据越好能反映用户愿意留下来,才能说明他们对产品的服务满意,满意才能养成惯性,持续消费,例如产品改版后,次月留存率提升了,且其他变量没有变化时,说明用户粘性是上升的设计改版成功。所以这三个指标是产品体验最直观的数据。



1)次日留存率,常用来衡量用户粘性。

通过日留存率的数值来判断一个 App 的质量,通常这个数字如果达到了 40% 就表示产品非常优秀了,比如可以结合产品的新用户注册的转化路径来分析用户的流失原因,通过不断的修改和调整来降低用户流失,提升次日留存率。


2)次周留存率(7日留存率),用于判断产生的忠实用户数。

通过周留存率来判断一个用户的忠诚度,比如在一周的时间段里,用户通常会经历一个完整的使用和体验周期,如果在第七日用户还在使用产品,就可以定义该用户为忠诚度较高的用户了。


3)次月留存(30日留存率),用于衡量版本迭代的效果。

通常 App 的迭代周期为 2 - 4 周一个版本,一个版本的更新,或多或少的影响用户的体验总成用户流失,所以通过比较月留存率能够判断出每个版本更新是否对用户有影响,衡量版本迭代的效果。


d 流量获取(渠道来源)

根据字面意思来讲就是描述用户路径,来指的是这些人变成用户之前,都来自哪里;知道用户从哪里来才能知道在哪个渠道做推广会更有效,一般和用户留存的数据搭配使用。


3 「行为数据」的五个纬度

关于行为数据是数据中的一个重点知识,此次主要讲解次数/频率、点击率、转化率、用户停留时长、跳出率、退出率这个五个纬度。



a 页面访问次数(pv)和人数(uv)

这两个指标能够了解用户的使用行为,衡量页面入口的设计和与其他入口的设计相比是吸引用户的注意力的核心指标。


·页面访问次数(PV ;PageViews的缩写)用于判断该活动/页面/功能被用户查看的次数,即页面浏览量;

·页面访问人数(UV;Unique Visitor的缩写)用于判断有多少个用户查看过该活动/页面/功能,即访问深度,也就是指用户的访问深度(总产品流程的体验完成度)。





b 点击率(CTR)

点击率(人均点击次数)是指网站页面上某一内容被点击的次数与被显示次数之比,即点击次数占展示次数的百分比。通过人均点击次数可以判断交互/视觉的设计要求是否足够引人注目,也可以用于衡量该功能对用户而言是否为强需求。通过下面这个案例让大家了解一下用法,比如7月7日10万人点击了“确定”按钮,其中一共点击了12万次,那么点击率(人均点击次数)为12/10=1.2次。


*点击率中也常常会结合pv和uv的数据使用,即PV点击率=点击次数/页面访问次数(PV);UV点击率=点击人数/页面访问人数(UV)




c *转化率

转化率即达到产品某个目标的访问量除以总的访问量,或达成目标的访客数占总访客的比例,即转化率=转化次数/访问次数。简单理解转化率是把用户分为“只逛不买”的用户,还有“逛了 就买”的用户,还有“逛了买买买”的用户。


为什么说转化率很重要,因为转化率常常是项目中企业最为看重的一个数据,毕竟转化率高了公司收益也就提高了,而且转化率的提升也常常是解释设计方案最好的支点,比如:在国外的养老计算器中,用户需要输入相关的字段后查看计算结果详情,最后得出计算结果,在这个流程中用户的转化率很低(在结果详情中会有金融产品)。但是如果把结果前置,比如新方案把输入字段,结果详情和计算结构都放在一个页面展示,就会提高用户的购买决策,大大提高转化率。


这里有一个思维方法即漏斗分析法,大家需要了解:

漏斗分析最常用的是转化率和流失率两个互补性指标。用一个简单的例子来说明,假如有100人访问某电商网站,有30人点击注册,有10人注册成功。这个过程共有三步,第一步到第二步的转化率为30 %,流失率为70%,第二步到第三步转化率为33%,流失率67%;整个过程的转化率为10%,流失率为90%。 该模型就是经典的漏斗分析模型。



d 用户停留时长

这个指用户在产品中的停留的时长,即所有用户session的时长总和/session数量。也有产品通过用户停留时长去衡量页面吸引度、判断用户粘性和依赖度,举个例子,抖音的页面内容吸引度就很强用户粘性就很高,用户的停留时间也很长。回想一下,是不是每次刷抖音,很快一个小时就过去了。这里的商业逻辑是,用户停留的时间越长,在产品中用户付费的可能性就会越大。



总结一句话:停留时间越长,用户粘性越强。当然也有反面场景,比如登录注册的表单填写,停留时间越长,说明体验越差。


e 跳出率(BR)

跳出率指该用户来到网站后,没有进行操作就直接离开的比例,即访问了一个页面就离开的访问量与所产生总访问量的百分比,跳出率等于访问一个页面后离开网站的次数/总访问量*100%。


这里有一个容易混淆的概念即跳出率和退出率。其实这两个数据都是用于衡量页面的内容质量或交互质量的一个指标。比如当用户进入 app后,只访问了一个页面就离开了,跳出率和退出率越低说明流量质量越好,用户对产品的内容越感兴趣。



4「业务数据」的四个纬度

接下来我们来看看三层数据中的最后一层概念——业务员数据,即和财务相关的数据知识。


a 总量

GMV (Gross Merchandise Volume),这个词太常见了;大公司在发布财报、销售额、成交量的时候,这个数每次必提。*值得注意的是GMV=销售额+取消订单金额+拒收订单金额+退货订单金额,包含付款和未付款两部分。


b 人均

ARPU(Average Revenue Per User,每用户平均收入),光总数高还不行,我们还要关心平均每个用户的贡献是否够多,是否在增长,所以就要关注人均的指标。它是 App 成功的指标,是用户忠诚度的反应,是预测用户增长的工具。


c 付费率

整个产品业务也要有一个健康度的指标来衡量,付费率就是这个衡量指标。到底有多少比例用户是付费用户,这就是付费率。我们通常会把付费率和ARPU值放在一起分析。一般该产品的付费率越高,这说明用户对该产品的认可度越高。







1 数据也许会骗人

数据并不会骗人,而是人看的数据不同,造成结论不同。在使用数据之前我们要认清楚以下三点偷换概念、只看单一纬度、数据不是万能的。


a 偷换概念

今年7月美国总统特朗普举了一个案例,我记忆犹新。在一个电视采访节目中他说“美国的死亡率低于欧洲的水平”他的算法是所有新冠死亡人数除以所有确诊人数得出右侧数据。



其实他就是偷换了一个概念,在医学上有两个指标去衡量死亡率,一个是病死率一个是死亡率。


当然两者在算法上是不同的,如果看病死率的话,美国的确低于中国,但是如果按照死亡率的结果看的话,美国是远高于其他国家,中国是美国相比一百五分之一,这结果是恰恰相反的。


这里就是一个偷换概念的例子,虽然病死率和死亡率都能反应生病的人数,但是病死率考虑的是救治能力。死亡率不仅考验救治能力,还考验着控制传播的救治能力。


b 只看单一纬度数据是表象的

如果单从一方面看数据是没有意义的,没有其他数据参照,挖掘不出数据的真正价值。

比如:我们在讨论一个产品是否成功时候,往往会看一个最突出的纬度数据,比如这个产品有2亿的日活,这个平台有5000万的产量。

也显然这种只盯着用户数量和产品规模的产品的做法是不对的,他并不能真实的反应一个产品是否成功,假如一个产品的日活是2亿但是愿意付费的用户不到1w,这个平台虽然有5000w的产量,但是用户的平均停留时长很短,很显然这并不是一个很高兴的事情,因为可以从侧面保暴露出产品的质量可能存在问题,导致用户付费意愿不高,停留时间较短。


c 数据有局限性

我们要搞清楚这样一个认知,数据虽然可以最为直观的反应产品的健康程度,但是数据绝对不是万能的,他只是衡量产品的用户体验的工具,就好比我之前写的问的用户调研的文章只是一种工具也存在其局限性,数据只能告诉waht,但是不能告诉why,而这个why是设计师做方案选择的关键所在。


2 数据应该怎么用

数据本身并不会欺骗人,他就真实存反应产品的表现,只是很多人用错了使方法或者认知出现了偏差,如果想把产品数据的价值利用率达到最大化,建议每次做数据分析时候从以下三点使用数据:


a寻找关键数据目标

为了避免偷换概念的情况出现,除了我们要理解数据概念之外,更重要的是寻找出关键的数据目标。

以上讲了这么多数据名称,但是大家需要注意的是并不是每个产品都要看这些数据的,不同的产品需要看的数据侧重点不同,就比如qq音乐看的是日活跃用户、淘宝看的是销售额、王者荣耀看的用户平均付费额度(appu),新浪新闻客户端看的是网站访问数量(uv)。


1)用户生成内容(UGC)类数据指标

UGC(User Generated Content)指用户原创内容,从进入web2.0时代后UGC第一次被论坛/社区应用,到今天,互联网产品或多或少都带有一点UGC属性。这些产品主要有抖音、知乎、人人都是产品经理、站酷等。

评价这类产品往往会从发表文章、用户点赞、订阅、评论、分享、打赏等几个数据指标进行评判产品是否健康。


2)电商类要看gmv

GMV(全称Gross Merchandise Volume),即商品交易总额 [1] ,是成交总额(一定时间段内)的意思。这个实际指的是拍下订单金额、包含付款和未付款的部分。


休息一下

听了脑袋大了同学不用担心,我特别绘制了下面这个表格,保存截图慢慢看就好了。


b 找好参照物A&B test 测试方法

多数产品在进行数据分析的时候,最常用的方法就是A&B test 测试法。(上面讲到了A&B test 测试发)


1)案例一

很多时候我们看数据不能看一个纬度,要看两个或者多个纬度,才能筛选中自己需要的结果方案。

比如这个案例在探究“与用户强相关的 BI 品类楼层,商品展示普通利益点和带券利益点,哪个更优?a方案展示普通的利益点,如“销量过万、好评率99%、满199减100”。b方案只展示带券利益点的文案,如“满199减100,领券”。

最后看的数据是A方案的点击率高,b方案的曝光点击率更高(由于方案 B 中可领券和点击跳转商详,可能有部分点击为领券导致,故方案 B 点击更高但点击转化偏低)。

如果单独看点击率或者转化率很难做出选择,但是只要两个数据综合看,就很容易得出B方案(带券利益点)能带来更高的曝光点击,引入订单表现更优的结论。



2)案例二

在做A&B test 测试时,是需要保持单一变量测试,现实生活中,很难做到单一变量测试,所以数据很多时候都需要进行分析探讨,才会有价值。

比如我们在首页流量分发场景中做了A,B两个视觉设计方案,a方式是所有的品类展示使用魔方圆形坑位,b方式是方形坑位。想探究方圆形坑位和方形坑位,哪个更能吸引用户点击?


最终A方案(圆形)用户点击数据为4.87%,B方案(方形)的用户点击数据为15.85%,那么,从这个A&B test 测试法的结果中就可以推导出B方案(方形)更好吗?

事实可能并不是,大家仔细观察不难发现,两个方案除了品类的背景造型不同之外,品类的种类也不同,文案的描述也不同,没有做到保持单一变量的测试环境,所以B方案(方形)更能吸用用户的点击这个结论是不成立。可能成立的是方形的展示面积比圆形的展示面积要大,可以更好的曝光产品的特点,而且促进B方案(方形)更吸引用户进行点击。

c 采用多次定性+定量验证

我们得到了数据其实可以采用多次定性+定量验证这种方式来验证我们方案是否解决了用户需求,是否完成项目目标。

定性可以采用用户访谈、眼动测试、可用性测试等方式去发现问题(需求)的多样性和严重程度。定量的方式有用户问卷、站内行为分析、A&B test 测试等方式,验证这个问题的发生概率。


比如我们可以通过五次定性质、三次定量的方式,通过数据反馈把结果更加靠近真实。


3 了解双面数据(虚荣数据)

什么是双面数据呢,其实也就是那些看上去很好,却不能给这个产品带来丝毫价值的数据,需要对比着看才能了解数据的价值。


a 点击率(CTR)

比如一个用户在有些资源位连续点击或者因为一些利益性的活动补贴引发的点击量变化这类场景在用户人数总量不变的情况下,单独位置的点击量增加,必然会导致其他部分的点击量降低,其实是0和博弈,增加这个功能的点击量是片面的。



b 访客数(UV)

计算访客数只是一场毫无意义的人气比赛,其实访客数可以分为三个类型即曝光UV、点击UV、意向UV,单纯地看这三个uv是没有意义的,除非能让用户做对产品有利的事。比如,在推出活动时,有多少用户能转化购买?只有知道了这个数字,这个用数据数才是有价值的。


·曝光UV即曝光在视野内的访客数,例如我们在淘宝搜索某个产品进入了搜索的feed列表页,当我在这个列表场景停留2-3秒的时候,我没有购买任何产品的情况下,数据就会判定我为一次曝光UV。


·点击UV即有点击行为的访客数,还是以淘宝做为例子,现在我在feed流列表页面里搜索产品,其中有一件是我比较中意的产品,我点击了产品进入到这个产品的详情页,在我没有购买任何产品的情况下,我发生了点击行为,数据就会算我是一个点击uv。


·意向UV即进入意向页面的用户数,其实这个和点击uv有点像,比如我在淘宝搜索完我想买的产品a,有去京东搜索了一下,那京东就会判定我为一个想要购买产品a的意向uv,这个意向uv只可以判断出我们对a产品是否感兴趣,并不能判断出我真正想要购买。


c 停留时间

用停留时间数据来统计用户参与度或活跃度,他并不能说明什么问题。比如,客户在某个全是文字内容页面上停留了很长时间,有可能是看不清楚或者是文字理解难度影响了用户的阅读时间,所以说产品效率、体验这两个关键指标本身就和停留时间相矛盾。


d 下载量

尽管有时会影响你在应用商店中的排名,但下载量本身并不带来价值;还需要参照的是:用户下载后的激活量、账号创建量以及用户在产品中的各个场景的跟踪。


e 退出率(ER)

很多人会有一个误区,认为退出率高是不好的一项数据,但是大家要明白并不是所有的场景跳出率越低越好,举个例子:我们通过漏斗数据发现用户操作路径太长,把好几个步骤的路径缩减到一步操作,最后看到用户退出率就减少了。



最后大家要清楚

数据是用于支撑设计师的某项设计决策和方法,但数据无法代替设计的直觉,更无法代替深入的用户研究、我们要学会利用数据指标,找出问题所在,通过设计方案改变用户行为,因为数据最终目标在于价值的体现:有效获取用户,创造营收。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷  作者:斜杠7湿兄

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


5个设计小技巧,越早会越好

seo达人


平时很喜欢一些干净的设计,让人感觉很舒服,阅读内容也清晰,很多设计师在设计时,经常细节过多,会显得累赘,有时候设计也需要用到英文,但只专注到了字体选择,却忽略了英文其他细节,今天和大家分享下,如何让你的设计更加利索干净!

 

 1.调整行间距 

行间距大家都知道,但是具体如何设定值很多人不知道,一般我常用规则是 +4 ,比如文字大小是12PX,那么行间距就是16,以此类推文字是14,那么行间距就是18。

▲ 上图是之前设计的一套规范的字行间距规则,供大家参考。

 

除了+4的规律你也可以运用黄金比例,文字大小X1.414,文字大小X1.616(1.414和1.616是黄金值)取四舍五入,得出以下字体间距规则。

 

很多人要问,我如何判断界面里面用多大的行间距呢?道理很简单,就是看你们内容,如果你们app内容需要很丰富,你可以行间距小一些让屏幕展示更多内容,可以运用+4的原则,目前淘宝天猫是这个原则,如果你页面内容更加留白大一些阅读舒服一些,可以运用黄金比例的行间距,比如新闻阅读软件,需要大量留白来调整呼吸感!

▲ Yahoo News因为文字内容信息比较多,所以需要页面信息量丰富,所以在行间距上用的类似固定+4的原则,让页面看起来更加清爽。

 

▲ 相反Airbnb页面节奏大家感觉更舒服一些,因为它整体的行间距比较大,留白比较舒服,给人很优雅,清爽的感觉,他们在很多设计细节上都没有遵循iOS规范,而去打破重组,比如列表高度,列表的图标大小等。

 

 2.调整字间距 

除了行间距,字间距同样很重要,特别是英文页面时候,同样的内容,字间距,和行间距不合适,看起来界面就会相差很多,有的看着很舒服,有的看起来说不出来哪里不对。

▲ 这2个页面,左边:  (字母和字母的字间距: 0 ,行间距:20);右边: (字母和字母的字间距: 0.2 ,行间距:22)

上面左边的页面字母和字母之前距离非常的紧密,句子和句子之间的行间距也很近,导致阅读起来很密集,不够舒服,相反右边通过加大行间距和字间距,使得内容没有那么满,字母和字母之间的间距,行与行之间的间隔,使得整个设计节奏得到了一些舒缓!

需要注意的是:不要给太大的字间距,有时候过大也会让读者不舒服。

 

 3.减少线 

▲ 同样一个结构,Airbnb对于商品单元处理就比ebay看起来要干净清爽一些,原因在于ebay上面线条太多,可能和他们整体视觉语言有关,线多了就没有纯色看着清爽干净。

 

▲ 再看亚马逊的设计,以及韩国29cm对于细节的处理,29cm去除一切线条,让设计更加清爽利索,而亚马逊线条很多,虽然很好的起到的信息分割作业,但是就不够清爽利落。

 

▲ 同样一个设计,上面的采用线条的处理,下面的采用去掉线条用色块来处理,哪个看起来更加干净,当然是下面的!

 

所以在一个设计里面减少线条,或者让线条最少化,是让UI设计看起来干净的一种很重要的方法,通过间距来分割信息,加强内容和内容之间的间距,这样做,用户也是可以很清晰的区分信息层级

需要注意的是:优先保证内容清晰,如果有些地方一定要用到线条,一定要使用它。

▲ 在Facebook新版本视觉风格中,很明显发现去线条的设计技法,左侧是改版前,右侧是改版后,很明显facebook减少了线的运用。

 

▲ 去掉线条后整个设计并没有影响层级,相反更加清晰。

 

 4.留白 

▲ 页面放松和呼吸感在UI中非常重要,在左侧的设计中,元素之间的距离特别小,都挤在一个空间里面,非常的满。

 

右边的界面,很好的运用了版式,和空间感,有足够的空间让元素之间去呼吸让用户感觉舒服。

▲ 这个案例里面,左边的内容很密集,留白虽然有,但是不明显,右边运用了大的灰色留白来区分信息的内容,所以右侧看起来更加舒适。

 

▲ Facebook的卡片设计同样也是采用粗的间距来作为信息的区分,让页面看起来更加的层次分明,利索干净。

 

▲ 同样左侧的页面虽然运用了去线,每个内容和内容直接的间距留白有了,但是信息密集不清晰,右侧的就很清晰,通过头像作为纽带来区分信息,让每行的内容更加清晰可见。

 

 5运用卡片 

▲ 在清晰度层面,使用卡片是帮助内容信息反馈的很好一种视觉形式,同时也让信息更加明确哪块是哪块。

 

▲ 卡片化设计在移动端让设计更加干净利落,是经常运用到的设计点。

 

 总结 

今天分享的几个小技巧点,其实是我们每天做设计中遇见的,需要灵活的多学多用,同时我们每天看到的一些好的设计,记得去留意分析,为什么别的设计好,别人设计看起来那么干净,毕加索说过:好的设计师借鉴,伟大的设计师偷。

  • 1.加强行间距,+4原则或黄金比例
  • 2.加大字间距: 0.1或0.2勿过大
  • 3.减少线条,如非得已使用线
  • 4.合理留白,拉开信息层级
  • 5.运用卡片,更好整合信息

 

原文地址:我们的设计日记(公众号)

作者:sky


转载请注明:学UI网》5个设计小技巧,越早会越好

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷   作者:陈皮Celia 

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

交互手势全解析之位移类手势

seo达人



通过本文,学会根据需求设计合适的位移类手势,能够判断手势的体验问题并提出相应解决方案,并与开发同学高效沟通确保落地。

 

前言

一年前更新了文章《交互手势的容错性和逻辑性》之后,有很多读者朋友询问是否能够做一个详细的讲解交互手势的系列文章,讲解每个手势的不同之处、应用场景以及在工作中如何使用。

我非常理解这些读者的痛点,因为我在日常的工作中,也经常遇到一些难题。比如同样是滑动,但是些许参数的变化就会导致体验的天差地别,应该如何进行选择。再比如与开发同学沟通过程中如何准确描述自己想要的效果,让最后的结果不至于与自己的预期不一致。

这些难题也促使我大量思考,大量体验各种产品的手势操作,希望能够从中总结出规律,让手势的设计与落地能够有理有据。现在经过一段时间的积累,我认为我在这方面可以讲一些能够帮助大家的内容了。不足之处,希望大家指正。

今天给大家带来专栏的第一篇《交互手势全解析之位移类手势》。

 

1 位移类手势的描述维度

手势作为图形界面与用户之间沟通的方式之一,在便携电子设备上大量应用。与实体按键相比,它有着纯粹的简洁性和无尽的创造性,手指的个数变化、不同变量的组合能够创造出无数的操控方式。

位移类手势是指代那些通过手指接触屏幕后的位置变化从而操控电子设备的手势,本篇文章主要讲解单指操作的位移类手势,多指的位移类手势(如捏合)将放到后续文章中讲解。

一谈到位移类手势,大部分设计师的脑海中可能会浮现出拖拽、甩动和轻扫这三个术语。然而,当我们想仔细谈论他们三者之间的区别时,大部分设计师可能无法准确地描述。为了能够准确描述三者的区别,我们在这里引入三个维度的概念,它们分别是控制方式稳定化效果、以及阈值类型,这三者的不同的变化组合可以创造不同的位移类手势,拖拽、甩动和轻扫之间的区别也是这三个维度影响的。当我们在讨论不同位移类手势之间的区别时,不如说是在讨论这三个维度之间的区别。比如常见的轻扫手势,因为这三个维度的变化就会产生不同的变种,而且不同变种在体验上也存在很大差别,若不分场景随意使用,很容易就影响用户体验。那接下来我们首先了解一下这三个维度。

 

1.1 控制方式

第一个维度是控制方式,它分为绝对控制相对控制,也可以通俗的表达为跟手不跟手,区别如下。

绝对控制/跟手:施加控制的一方(后文简称施控物)的某个属性变化与被施加控制的一方(后文简称受控物)的某个属性变化是对应的

相对控制/不跟手:施控物的某个属性变化与受控物的某个属性变化不是对应的

比如在网易云音乐的播放页(下图左),左右滑动黑胶时,手指是施控物,黑胶是受控物,手指的横向位置变化和黑胶的横向位置变化是对应的,即绝对控制。上滑调出评论页时(下图右),评论页的位置和手指的位置没有对应关系,手指的上滑仅仅控制评论页是否出现,即相对控制。

与相对控制相比,绝对控制允许用户去操控受控物的属性变化过程,因此给予了用户更强的掌控感。比如在微信读书阅读页边缘右滑,手指的横向位置与书籍封面的变化过程对应,模拟现实生活中慢慢合上书的感觉,如下图。

但是在有些场景,为了避免混乱,属性变化过程是不适合被用户绝对控制的,此时我们应采取相对控制的方案。比如 iOS 的相机中,左右滑动切换拍摄模式,由于前后不同模式之间的页面框架变化较大,切换时会有过多元素的属性变化,如果使用绝对控制就会导致切换拖沓且混乱,使用相对控制就能避免这个问题。

 

1.2 稳定化效果

1.2.1 定义

当我们使用手势控制某个受控物时,由于手势的某个属性(如手指位移)达到阈值,进而导致受控物的某个属性稳定在了特定状态的效果被称为「稳定化效果」,或者也可以称为「吸附」。

稳定化效果能够保持界面的视觉秩序,避免过多的中间状态导致界面的杂乱,进而帮助用户聚焦信息。

是否有稳定化效果是区别轻扫与另外两个手势即甩动和拖拽的重要维度,当某个位移类手势有稳定化效果,我们就将其称作轻扫

以滑动切换抖音视频为例,当手指上滑的位移距离和释放速度其中的某一项属性达到阈值后,下一条视频会往上移动到一个固定的位置然后进入稳定状态,而不会出现停留在不完整的中间状态,如下图所示。

在 iOS 端的微信消息页左滑某条消息后会出现更多操作按钮,按钮会在手指滑动的距离达到阈值并松开后稳定在一个固定的大小,而不会停在类似下图左所示的混乱的中间状态。

在多内容选择的场景中,如果滑动与选中是绑定的话,一般需要使用稳定化效果。例如在 iOS 相机里选择滤镜时,滑动滤镜选项不但能够控制滤镜选项的位置,并且会自动选中一个位于中间位置的滤镜,位置的稳定化避免了被选中选项的不明确。

如果滑动与选中是分开的,比如美图秀秀的滤镜选项需要先滑动后选中,这种情况下稳定化效果不是必要的。

 

1.2.2 与效率的关系

不同的稳定化规则带给用户的体验差异是非常大的,最明显的差异是在效率方面。我们使用稳定化效果的强弱来理解,稳定化效果越强,单次滑动能够切换的选项个数越少,效率越低。稳定化效果越弱,单次滑动能够切换的选项个数越多,效率越高。

比如在比较常见的 banner 切换功能中(下图左),无论手指位移和释放速度的值有多高,banner 只能切换并稳定到下一个,不能够一次切换多个 banner。而在网易云音乐的首页排行榜中,一次滑动能够切换多个内容卡片。因此,我们可以说前者的稳定化效果比后者强。

拖拽和甩动虽然没有稳定化效果,但是也存在效率的高低。我们可以将其与轻扫放在一起做对比,如下图所示,拖拽、稳定化效果强的轻扫、稳定化效果弱的轻扫、甩动它们切换效率依次增加。

那么我们决定添加稳定化效果后,如何选择强弱程度呢?选择没有绝对的对错,整体来说主要考虑两点,业务诉求和用户诉求。例如在常见的 banner 切换中,banner  的总数量一般不会很多,业务的诉求是希望尽可能曝光每一个 banner ,使感兴趣的用户进行消费,因此这里比较适合做稳定化效果强的轻扫。在云音乐的排行榜案例里,不同用户感兴趣的榜单是不同的,稳定化效果弱的轻扫可以方便用户单次滑动切换多个,快速切换到自己感兴趣的榜单的大概位置。

百度 App 的表情面板原本是左右轻扫浏览表情,在一次改版中改为了上下甩动浏览。主要目的之一就是为了提高浏览效率、降低非首屏表情的曝光难度。

微信视频号的改版是一个典型的案例,旧版的微信视频号的视频流并不是类似抖音那样的全屏化形式和轻扫手势(下图右),而是占据屏幕尺寸三分之一到二分之一之间的卡片形式(下图左),并且使用甩动而非轻扫。视频号问世初期优质内容匮乏,社交推荐算法不完善,贸然模仿抖音式的全屏化形式和轻扫手势的话,会导致用户浏览到劣质视频时负面感受被增强且切换效率变低,反之卡片形式加甩动手势给予了用户更自由的选择空间,提高了用户的切换效率,降低了负面体验。等到如今时机成熟,再从卡片形式和甩动手势换成全屏化形式和轻扫手势就势在必行了。

在某些场景,用户需要先通过高效的方式选择特定区域的内容,然后进入聚焦状态进行内容浏览和慢速的切换,此时我们需要设计两种切换效率不同的手势应对前后场景的变化。如下图,在 iOS 的照片 App 中,先使用切换效率较高的甩动进行粗略切换找到目标图片大概位置,点击进入大图模式时使用切换效率较低的轻扫进行精确切换查看。

 

1.2.3 触发时机

触发稳定化的时机可以分为释放前和释放后,不同的时机带给用户的体验也不同。释放前稳定化指的是用户使用手指滑动屏幕时,手指位移达到阈值后,手指无需离开屏幕,稳定化即可被触发。如下图左,iOS 的相机滑动切换滤镜使用的就是释放前稳定化。释放后稳定化指的是用户使用手指滑动屏幕时,手指位移或释放速度达到阈值后,手指必须离开屏幕,稳定化才能被触发。如下图右,常见的 banner 切换。

释放前稳定化可以避免拖沓,增加切换效率,但是缺点是无法反悔回退且缺乏掌控感。反之,释放后稳定可以反悔回退,掌控感强,但是缺点是比释放前稳定化拖沓了一些。

 

1.3 阈值类型

阈值是能够触发变化的最小值。比如当水的温度达到 100 度时就开始变成水蒸气,100 度就是一个阈值,温度是阈值类型。在手指与屏幕的交互中,手指在屏幕上的某个停留时间、位移、释放速度、点击次数等都可以成为一个阈值类型,达到相应阈值后就可以触发相应的变化,常见的变化有受控物的位置、大小、不透明度等,理论上变化可以是任意的。

在位移类手势中,通常会用到的阈值类型有手指位移释放速度,手指位移是用户在手指触摸屏幕时的位置与之后某个时间手指位于屏幕的位置之间的距离,释放速度是用户的手指在屏幕表面进行位移后离开屏幕那一瞬间的速度。

市面上的 App 暂时不存在仅通过释放速度判定而与手指位移无关的阈值判定方式,因为其不太符合常识。因此我们在设计位移类手势时,能够选择的阈值判定方式常见的有两种:

  • ① 判定手指位移和释放速度满足任意一个即可;
  • ② 仅判定手指位移。

当我们设计手势时,就需要考虑两者的区别。由于 ① 比 ② 增加了释放速度带来的额外移动距离,因此 ① 的主要优点是高效。但是由于我们无法预判释放速度带给受控物的移动距离长短,所以相对应的缺点就是易误操作和不精确。②就恰恰相反,由于不存在释放速度造成的不确定因素,它的优点是不易误操作和精确,缺点是低效。

甩动和拖拽之间的区别就在于阈值判定方式,甩动是 ① ,拖拽是 ② 。如下图,当在微信消息列表找相应的消息时,用户的诉求就是能够快速找到特定消息的位置,对特定消息的出现在屏幕的位置也没有特定要求,只要能够被手指点击到即可,因此选用甩动较为合适,但是对于调节音量、亮度这一类的操作,滑动的范围有限,因此用户对效率没有太高的要求,但是对于滑块位置的精确度有要求,因此选用拖拽是更为恰当的。

再举一个反例,在 Steam 移动端横滑首页的泳道卡片时(下图左),使用的手势是拖拽而不是甩动,浏览起来特别低效。更适合的做法应为甩动,会更符合此场景下的快速浏览的诉求,如下图右的豆瓣。

对于轻扫来说,使用哪种阈值判定方式有多种情况(如下图所示)。在本文中,根据阈值类型、稳定化效果以及控制方式的不同我将把轻扫分为 A-E 共 5 类(A-E的命名方式仅存在于本文章,因此在向其他人传达时,尽量使用在后文我介绍的手势描述而不是类别名称,以便于对方理解。)。后续会为大家仔细举例讲解,大家现在仅了解一下即可。

当我们在刷抖音视频时使用的手势就是轻扫,是否滑动到下一条视频进行播放的判定方式是① 判定手指位移和释放速度满足任意一个即可,对应的手势类别是上面表格中的轻扫A。如下图所示,在刷抖音时,如果使用判定手指位移的方式,我们可以将手指在垂直方向位移大于半个屏幕高度的距离,从而切换到下一个视频。如果使用判定释放速度的方式,我们可以移动任意的垂直距离但是手指离开屏幕时保留一个速度从而切换到下一个视频。大部分情况下用户都会使用判定释放速度的方式,因为既省力又便捷。

如果将阈值判定方式改为 ②仅判定手指位移,对应的手势类别是上面表格中的轻扫 B,并且位移的阈值设置得比较大的话,给用户带来的负面体验可能将是非常大的。比如下图中打开美图秀秀的短视频评论浮层后,想要下滑收起时,App 仅判定手指位移,而且这个位移阈值设置得比较大,对于希望通过快速滑动一小段距离收起浮层的用户来说体验很差。即使由于开发资源有限我们只能做到仅判定手指位移,我们也可以通过减少手指位移的阈值来降低负面体验。

但是某些场景下,②仅判定手指位移是更加合适的。比如想要在微信中下拉打开小程序选择页,就只能通过手指位移达到一个特定的阈值才能够触发,无论怎么用力滑动去增加释放速度都无法打开小程序选择页。这样处理的原因是在微信消息列表页,上下滑动浏览微信消息是一个高频操作,如果释放速度也能作为打开小程序页面的阈值的话,用户可能就极易在下滑消息列表时误操作,无意间打开小程序选择页。

因此,对于位移类手势,选用哪种阈值判断方式要依据用户使用场景和诉求,不能想当然地设计。

 

2 常见位移类手势解析

了解完三个基础维度后,我们再将其进行组合,从特定手势的角度更全面地理解它们的差异和使用场景。三个维度的排列组合能够生成十余种位移类手势,我列举出了常见的 7 类,如下图所示,这 7 类基本涵盖了 95% 以上的场景,我将一一举例说明。由于施控物控制受控物改变的属性一般都为位置,因此接下来在描述下面手势的定义时我都以受控物的位置变化进行举例。

 

2.1 拖拽

2.1.1 定义

使用手指在受控物位置按下后,操控受控物沿着某个方向移动,无论释放时手指是否仍有速度,受控物都会立即停止移动。(下图的动态演示由 Principle 制作,观看会有些不太直观,大家可以在文章结尾处下载 Principle 源文件后导入到手机里体验,源文件包含文章提到的所有位移类手势)

 

2.1.2 特点

精确度高但效率低。由于阈值类型仅判定手指位移且没有稳定化效果,拖拽适用于对操作精度要求高,对效率要求低的功能。

 

2.1.3 案例

在 iOS 设置中调节亮度时,在有限范围内,手指左右拖拽可以控制亮度变化。

 

2.2甩动

2.2.1定义

使用手指在受控物位置按下后,操控受控物沿着某个方向移动。若释放时手指仍有速度,受控物将移动一段距离后才慢慢停止,移动的距离与释放速度呈正相关。若释放时手指速度为 0 ,则受控物立即停止移动。

 

2.2.2 特点

精确度低但效率高。由于阈值类型判定释放速度和手指位移,甩动适用于需要快速浏览较多内容的场景,如滚动浏览列表。

 

2.2.3 案例

在微信的消息列表页,使用甩动手势控制列表上下移动,若释放时仍有速度,列表将仍移动一段距离后才慢慢停止。

 

2.3 轻扫 A

2.3.1 定义

使用手指在受控物位置按下后,操控受控物沿着某个方向移动。若释放时的速度和手指位移有任意一个达到阈值,受控物将稳定在一个新位置。若释放速度和手指位移没有任何一个达到阈值,受控物将回到原位置。

 

2.3.2 特点

由于轻扫拥有稳定化效果,因此它能够保持界面的视觉秩序,避免过多的中间状态导致界面的杂乱,进而帮助用户聚焦信息。接下来讲解的其他轻扫类型都有这一特性,就不一一赘述了。轻扫 A 与接下来要讲解的轻扫 B-E 的最大不同之处在于轻扫 A 的阈值类型为「释放速度和手指位移」,这让轻扫 A 与轻扫 B-E 有两点不同,一是轻扫 A 可以通过释放速度的快慢去控制内容的切换数量的多少,更加高效,二是轻扫 A 可以通过用手指在屏幕滑动很短的距离但离开屏幕时保留一个速度来切换内容,因此更加省力。

 

2.3.3 案例

在刷抖音时,如果使用判定手指位移的方式,我们可以将手指在垂直方向移动大概半个屏幕高度的距离,从而切换到下一个视频。如果使用判定释放速度的方式,我们可以移动任意的垂直距离并且手指离开屏幕时保留一个速度从而切换到下一个视频。

 

2.4 轻扫 B

2.4.1 定义

使用手指在受控物位置按下后,操控受控物沿着某个方向移动。若释放时手指位移达到阈值,受控物将稳定在一个新位置。若释放时手指位移没有达到阈值,受控物将回到原位置。

 

2.4.2 特点

轻扫 B 与轻扫 A 相比唯一的区别是阈值类型减少了释放速度的判定方式,这提高了触发切换的难度,使操作成本变高,但是在某些场景下,这也降低了误操作的概率。如下拉刷新等。

 

2.4.3 案例

比如想要在微信中下拉打开小程序选择页,就只能通过手指位移达到一个特定的阈值才能够触发,无论怎么用力滑动去增加释放速度都无法打开小程序选择页,这样处理的原因是在消息列表页上下滑动浏览消息是一个高频操作,如果释放速度也能作为打开小程序页面的阈值判定方式,用户可能就极易在下滑消息列表时误操作,无意间打开小程序页面。

因此,当页面已存在一个滑动操作的情况下,还存在另外一个方向相同的滑动操作且仅会在边界情况下才能触发时,为了避免误操作,会将后者的手势设计为轻扫 B 。

上文提到,轻扫 A 的阈值类型为判定「释放速度和手指位移」,轻扫 B 的阈值类型为仅判定「手指位移」,由于前者的实现成本比后者高,导致本应适合做成轻扫 A 的功能有时只能妥协做成轻扫 B ,比如之前提到过的美图秀秀的短视频评论浮层案例,但我们也可以通过减少手指位移的阈值来降低负面体验,后文会讲解如何与开发同学沟通。

 

2.5 轻扫 C

2.5.1 定义

使用手指在受控物位置按下后,操控受控物沿着某个方向移动,但是受控物并不随着手指的控制而同步移动,仅当释放时手指位移达到阈值时,受控物才开始移动并稳定在一个新位置。若释放时手指位移没有达到阈值,受控物位置则一直保持不变。

 

2.5.2 特点

上文讲到过释放后稳定化和相对控制的缺点,释放后稳定化比较拖沓,相对控制让用户缺乏掌控感。两者如果应用到了同一个手势(即轻扫 C ),就会导致用户在滑动屏幕时得不到任何反馈,用户会疑惑是否因为自己操作不当或是设备出现故障。只有当用户手指离开屏幕后才会发现触发了操作,整体的交互流程给用户一种滞后与延迟的感觉。

因此轻扫 C 与其他类别的轻扫相比存在劣势,但是它也存在很多的 App 的 H5 页面中,我的猜测是由于 H5 对于判定释放速度和绝对控制这两个维度与客户端相比难度大很多,因此只能退而求其次选择轻扫 C 这个较差的方案,实际上在同样的应用场景中用轻扫 A 替换轻扫 C 可以带来更好的体验。

 

2.5.3 案例

下图左是 QQ 的个性装扮的 H5 页面,卡片的切换使用的就是轻扫 C ,如果能够优化为轻扫 A 体验会更好,比如下图右的音街首页卡片的设计。

 

2.6 轻扫 D

2.6.1 定义

使用手指在受控物位置按下后,操控受控物沿着某个方向移动,但是手指位移达到阈值前受控物并不随着手指的移动而移动。若手指位移达到阈值,无需手指释放,受控物将开始移动并稳定在一个新位置。若手指位移没有达到阈值,无论是否释放,受控物位置则一直保持不变。

 

2.6.2 特点

相对控制的方式降低了用户的掌控感,释放前稳定化减少了操作的拖沓感。使用此手势的场景是在多个对象之间切换时,我们不希望用户过于自由地操控对象之间的属性变化过程,并且牺牲掌控感从而增加单次的切换效率。

 

2.6.3 案例

比如 iOS 的相机中,左右滑动切换拍摄模式时,由于前后不同模式之间的页面框架变化较大,切换时会有不同元素的属性变化,如果使用绝对控制和释放后稳定化就会导致切换混乱且拖沓,使用相对控制和释放前稳定化就能避免这个问题。

 

2.7 轻扫E

2.7.1 特殊说明

上文我们讲到,通过轻扫手势 A-D 对受控物的绝对/相对控制都是存在于稳定化前,受控物一旦稳定化,就脱离了手指的控制,需要手指离开屏幕后再次接触屏幕开始下一次控制。

轻扫E的不同之处在于它可以在受控物稳定化后,仍然控制受控物朝着下一个节点稳定化,在每个节点之间切换时能够明显感觉到分段感,如下图案例所示。

由于轻扫E相对于轻扫 A-D 的特殊性,控制方式中的绝对控制和相对控制无法覆盖这个特殊现象,因此我们使用「多段相对控制」来命名轻扫E的这种特殊的控制方式。

 

2.7.2 定义

使用手指在受控物位置按下后,操控受控物沿着某个方向移动,若手指位移达到阈值,无需手指释放,受控物就稳定在了一个新位置,但是此时手指还是仍然可以操控受控物继续移动的,并且继续移动过程中如果手指位移达到阈值将会到达下一个稳定化状态。

 

2.7.3 特点

轻扫 E 适用于需要在多个对象之间快速切换和确认的场景,它的使用感觉很接近拖拽。如下图所示,我们可以这样理解,当被切换的对象数量接近于无穷大同时每个对象之间的距离接近无穷小时,轻扫 E 就可以视为拖拽。

 

2.7.4 案例

iOS相机人像模式切换打光方式、微信的通讯录滑动字母索引导航,它们都使用轻扫 E 来满足多个对象之间快速切换和确认的需求。

 

3 实战案例

了解完上述的维度和常用手势后,我们在脑中就可以形成一个思考框架。当我们要针对一个功能设计位移类手势时,就可以从阈值类型、稳定化效果以及控制方式这三个维度思考。接下来我用一个我参与过的实际项目作为案例给大家讲解一下思考过程。

本案例是网易云音乐陌生人版一起听中的一个功能,一起听的双方在听歌过程中会收到彼此共同信息,比如听歌口味相似度、是否同城、都喜欢哪些歌手等,目的是为了增加可玩性和互动性、降低退出率,鼓励用户互相了解、提高一起听过程中的社交体验。

为了营造仪式感和避免信息过载,共同信息的展示方式设计为了一次只能看一条,进入浮层后默认展示最新的一条,可以通过滑动查看上一条。因此为了避免出现两条同时占据展示区域的混乱状态(如下图左),我们为其添加了释放后稳定化效果(如下图右),同时为了方便用户可以快速浏览旧的共同信息,这里使用的稳定化效果是较弱的,用户可以通过滑动一次切换多个共同信息。

由于需要满足用户快速浏览旧的共同信息的诉求,阈值类型选用了「判定手指位移和释放速度满足任意一个即可」,用户可以通过控制释放速度进而控制信息的切换数量。控制方式则选择了掌控感强的绝对控制。最后的结果如下图所示。综合三个维度进行归类,此手势为稳定化效果较弱的轻扫 A 。

 

4 手势角度的处理

位移类手势的方向一般为上下或左右,但并不是一定要完全垂直或水平才能够触发手势。当上下滑动和左右滑动同时存在于一个页面时,默认会有一个容错角度,比如上滑时手指滑动方向只要左右偏移不超过 45° 都会被判定为上滑,如下图所示。

但是有时开发同学出现失误,导致容错角度没有均分,例如下图中触发上滑和下滑的角度极小,导致用户在上下滑动时非常容易误操作为左滑和右滑。

云音乐也曾有过类似的遗留问题,iOS 端的播放页上滑调出评论页极易误操作为左右滑动黑胶切歌(如下图 A ,现已修复),安卓端的账号侧边栏上滑浏览极易误操作为左滑收起侧边栏(如下图 B )。

因此,在验收阶段,除了上述的三个维度外,角度的容错性检查也是重要的一环。因此在验收时间充裕的情况下,最好要切换不同的手持方式分别体验一次,因为有些问题只有在特定的手持方式下才能够被发现。

客户端的角度判定方式实际上是一个比较复杂的过程,上述的内容是简化的版本。后续将延展为一篇独立文章给大家仔细聊一聊。

 

5 客户端的差异

上文讲到,基础的三个维度即阈值类型、稳定化效果和控制方式决定了手势的类别,是设计阶段一定要定义清楚的。但是除此之外,设计一个手势需要定义的细节非常多。比如受控物的移动是否有速度曲线?手指位移与受控物之间的位移的比率是多少呢?这些都是开发阶段不得不面对的。幸运的是,安卓和 iOS 有系统封装好的一套系统组件可以调用,操作系统自行解决了刚才讲到的细节问题,但是 H5 框架下是无法调用系统组件的,手势的各种细节都需要前端开发人员自己编写,难度较大,大部分情况只能实现一些比较简陋的效果,这也是为什么在很多 H5 框架下的界面滑动的体验比较差的原因。

 

6 高效沟通

由于信息不对称,与开发的沟通过程中,很容易出现理解偏差。比较常见的错误有:将甩动误解为轻扫 A ,将轻扫 A 误解为轻扫 B 或甩动。如果造成效果达不到预期的情况,很多设计师不知道如何让开发同学修改,只能说“这个手势不丝滑,优化一下”,开发同学也是一头雾水,不知道往哪个方向优化。如果我们能够直接说出“阈值判定方式现在只有手指的位移,需要释放时的速度也能够触发跳转;这个位移的阈值太高了,滑动时很难触发跳转,需要把阈值改为 16pt ”类似这样准确的描述,就能够大大降低沟通成本,顺利验收。为了避免沟通出现问题,下面我将日常经验总结出现希望能够帮助到大家。

首先,一旦涉及到位移类手势,除了必要的文字描述外(可参考上述的手势定义的描述),最好给开发体验 demo 或者其他 App 上类似的效果,否则很容易产生理解偏差。各种 App 上的类似效果大家可以用本文的每个手势的案例给开发同学展示,但是 App 可能会更新,案例可能在未来某个时间就找不到了,所以我用 Principle 做了一个简易的基础 demo 集合(如下图,源文件在文章末尾下载),和我上述介绍的手势是对应的,大家可以拿着这个 demo 给开发同学演示大概的效果,也可以在这个 demo 源文件修改。

下载链接: https://pan.baidu.com/s/1iaFrcFwzC58TG3L17bjC_Q  密码: asto。

拖拽和甩动由于需要定义的细节参数都被操作系统提前封装好了,一般不需要我们给到额外的标注。但是对于轻扫,我们需要将细节定义清晰,下面将详细讲解。

 

6.1 阈值类型

上文讲到,阈值类型一般有两种:

  • ① 判定手指位移和释放速度满足任意一个即可
  • ② 仅判定手指位移

①的开发成本高于②。

如果我们选用轻扫的阈值类型是①,开发同学编写代码需要两个参数的阈值,分别是手指位移和释放速度。手指位移阈值一般默认为受控物的1/2,例如下图的全屏短视频和 Banner 。

当然我们也可以自定义一个阈值,比如 100pt 、受控物高度的 1/6 等,没有特别的需要的话使用默认值即可而且也不用给开发同学特殊说明,但是如果有特殊需要想要修改默认值,就要告知开发同学你自定义的手指位移阈值。对于释放速度阈值,通常默认就非常的小,几乎是大于 0 即可触发,一般情况下使用默认值即可。

在本应该选用①的场景中,如果由于技术成本原因不得不选用②,需要注意的是由于缺少了释放速度的判定,手指位移的阈值我们需要设置得小一些方便用户触发,否则就会出现上文中美图秀秀浮层的那样的体验问题。经过我的实验,手指位移阈值一般定为 16pt 是比较适中的,既不会太容易误操作也不会难以触发。

 

6.2 稳定化效果

轻扫是一定存在稳定化效果的,关键在于告知开发是释放前稳定化还是释放后稳定化。从开发的角度讲,系统会监测用户的行为,用户在使用滑动时会有按下(down)、移动(move)、抬起(up)三个行为,释放前稳定化是在移动阶段判断阈值并触发操作、释放后稳定化是在抬起后判断阈值并触发操作,开发成本几乎没有区别。

上文提到过稳定化效果强弱的概念。稳定化效果越强,单次滑动能够切换的选项个数越少,效率越低。稳定化效果越弱,单次滑动能够切换的选项个数越多,效率越高。首先,我们需要确定单次滑动允许切换多个还是只允许切换一个,如果允许切换多个,开发同学会设定一个控制切换难度的系数,而只允许切换一个的话就不存在这个系数。通常我们也不需要修改这个默认系数,但如果想让操作更加难或容易触发,可以告知开发同学修改这个系数。

 

6.3 控制方式

绝对控制比相对控制的开发成本高,如果开发资源并不是很紧张,需要绝对控制的场景就不要退而求其次使用相对控制。涉及到轻扫手势一定要告知开发同学控制方式,否则很可能被视为相对控制处理。

 

7 手势排查

通过本文的学习,我们不但可以在开发工作进行前与开发同学高效沟通,保证开发工作的顺利进行,也可以对自家移动端产品的现有手势进行逐一排查发现问题点进行记录,并且找到合适解决方案,然后用准确的语言描述给开发同学。下图是我在进行手势排查后输出的表格,挑选出一些有代表性的案例给大家作参考,开发同学可以通过它快速明确问题,理解解决方案。

 

结语

本篇文章的归纳总结是通过日常积累和思考得来,希望能够帮助大家在设计与沟通层面解决实际问题,如果有任何疏漏和不严谨的地方,希望大家能够指出,后续的更新会将专栏不断完善,交互手势系列暂定的后续更新计划如下。

基础篇:

  • ①位移类手势(本篇文章)
  • ②点击类手势
  • ③其他类手势

进阶篇:

  • ④交互手势的特性

超越篇:

  • ⑤设计创新型手势

有兴趣的小伙伴可以持续关注哦~

文章提到的 Principle 格式的手势 demo 下载链接: https://pan.baidu.com/s/1iaFrcFwzC58TG3L17bjC_Q  密码: asto。

 

参考书籍:

《交互设计语言:与万物对话的艺术》 作者: 罗涛

《交互设计精髓 4》作者:[美] 艾伦·库伯 / [美] 罗伯特·莱曼 / [美] 戴维·克罗宁 / [美] 克里斯托弗·诺埃塞尔

 

参考文章:

百度APP「表情面板」体验升级

微信视频号为什么没有采用全屏沉浸式交互

 

参考网站:

iOS Human Interface Guidelines

 

原文地址:站酷

作者:Ballen成明

转载请注明:学UI网》交互手势全解析之位移类手势

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷   作者:陈皮Celia 

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


B端设计师如何挖掘自己的设计价值

seo达人



B端产品会有一个非常明显的特征,那就是行业与行业之间的壁垒非常大,能通晓两三个行业已经很厉害了。但你是一个设计师,可能会遇到各种复杂的业务场景,很多行业术语你可能都不精通,就算学习了也不一定能非常懂,所以在做设计的时候还是会懵。这个时候就需要设计师有强大的抽象创意能力了。

a

01.前言

B 端产品简称TOB(to Business)产品,使用对象一般为企业客户或组织。B 端产品帮助企业或组织通过协同办公,解决某类管理问题,承担着为企业或组织提升效率、降低成本、控制风险从而提高企业收入,减少企业内部损耗的重要职责。B 端产品的工作是合理实现企业需求,提高产品核心竞争力,并提升市场价值。

图片

B端产品会有一个非常明显的特征,那就是行业与行业之间的壁垒非常大,能通晓两三个行业已经很厉害了。但你是一个设计师,可能会遇到各种复杂的业务场景,很多行业术语你可能都不精通,就算学习了也不一定能非常懂,所以在做设计的时候还是会懵。

这个时候就需要设计师有强大的抽象创意能力了,你做过的业务越多,你脑海中积累的业务模型就越多,如果你善于记录,那么在遇到这种情况的时候,你可以快速的通过调用业务模型来解决,看能不能满足业务方的需求,如果能满足,就可以继续完善和优化,凡是审批流,就必定有列表、详情页、查询、新增编辑还有就是各种审批状态对应的操作,诸如撤回、加签之类的,用通用的业务模型解决不同的问题,用抽象的思维能力概括业务的实际需求,就可以战无不胜了。

 

02.定位好自己的角色

一个B端设计师最应该具备的核心能力是什么?那就是解决问题的能力,以及理解业务和处理业务的能力。很多设计师成为了一个“项目推动型”设计师,并没有搞清楚自己的角色和该角色应该具备的责任、技能和价值。

作为一个B端设计师来说,需要很快的认识到自身的角色和其所具备的责任、技能和能创造的价值。需要搞清楚如何体现自身的价值以及增加自身价值的方向。

先来看一个产品的设计流程图

图片

流程图里可以看出来,在整个产品流程中,设计师是跨团队+全链路参与的角色,在每个环节都有可挖掘和贡献的价值点。

 

03.如何挖掘设计价值

B端产品重业务、重交互、轻视觉,业务必然比C端复杂、非人性,需要设计师对相关行业有一定的理解,需要用户跨过学习门槛,才能使用系统提高工作效率。接下来会根据具体案例,来阐述一下设计师可以赋能业务的点。

 

· 对思维的培养

大部分设计师拿到需求之后,直接会在需求文档的基础上进行设计,在与产品的配合中属于被执行者,被动的接收产品的需求,按照原型输出设计稿,这会使 B 端的设计变得无趣,也体现不出你的价值。

图片

设计师要学会转被动为主动,才能很好的发挥设计价值。本身设计与产品的配合就是相互成就的,大家的目标都是一致的。面对B端复杂的业务需求,在和产品思维对焦时,需要设计师思维前置,辩证的去思考产品方向,帮助产品梳理需求,从需求背景出发,收集用户、需求方的反馈,综合考虑根本要解决的问题是什么,再去想如何产出设计方案,不要只被动的承接需求。平衡当前资源实现业务方要求的功能,让用户体验易用性,从而提高业务效率。

 

· 从解决问题入手

B端设计师的核心竞争力就是解决问题的能力,需要快速理解业务和处理业务的能力,这样才能更好的创造更多的价值。

图片

后台系统的搭建离不开一套强大的、统一的UI设计规范。规范是设计视觉统一的基础也是配合技术团队高效产出一致体验所必不可少的工具。说到规范就得提一下组件了,组件的产生是为了避免我们重复的造轮子,并且对控件细节进行了把控。市面上虽然有已经成熟的组件,但是和自身的业务特点并不一定贴合,就需要我们基于 B 端产品特性和自身业务特点,以灵活性、复用性、全面性的设计原则来进行设计,例如我们就对头部筛选项的自定义设置,在纵向间距关系和横向间距关系上指出信息之间的距离和关联性之间的关系,更能灵活的选取我们想要的状态进行搭配,复用全局的使用。提升了研发团队的效率也解决了视觉一致性的细节问题,节约时间去做更有意义的事情。

图片

 

· 设计赋能业务

单纯的支持业务需求是每个设计师的本质工作,那我们怎么能把价值赋能到业务上呢,这就回归到文章开始说的设计思维的转变,对思维的培养就是对需求的深挖,对问题的收集和思考,那么再进一步就要行动起来,主动进行用户调研,挖掘需求的突破点,找到更好的解决方案和更有价值的驱动点。那么我们在对不同项目赋能时也可采取此种方法进行思考,拆解任务跟进落地,提供规范与组件支撑,采集此流程中带来的价值,在项目结束后进行复盘总结,逐渐沉淀累积自身能力,逐步搭建自身的方法论在验证中成长。

图片

 

· 项目复盘

一个设计师想要成长,一定是在一个不断回顾和思考及归纳分析中成长起来的,多去沉淀积累总结不好的经验,输出自己的一套方法论,查缺补漏提升自身的设计能力,避免低效率的重复工作。复盘是设计师自我提升的非常有效的方式。不仅为了自己,还可以提升自己对团队的价值,多去做知识分享,锻炼自己的表达力和控场能力。

图片

 

04.总结

不管 B 端还是 C 端,设计的价值在于通过视觉表现的方式去助力公司、助力产品实现用户的需求、帮助用户解决问题。B 端产品相对而言,场景、功能、业务流程、信息架构要比 C 端更复杂,面对的异常情况也比较多,所以 B 端在设计风格上尽量做到简洁,B 端产品实用性大于美观性,在每一个功能的设计都需要你去思考很多方面:用户易用、信息层级、未来扩展,你都要做出取舍,而对于每个模块都需要你思考、结合用户场景。所以想要做好 B 端设计,一定要去了解业务,了解用户需求。设计独有的用户体验思维+业务理解能力,可推导出产品的可发力点,抓住并完善这些发力点,也从中体现了设计的价值。

图片

 

原文地址: 58UXD(公众号)

作者:环铁艺术家

转载请注明:学UI网》B端设计师如何挖掘自己的设计价值

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷   作者:陈皮Celia 

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


如何做好适老化设计?

资深UI设计者

如何做好适老化设计?支付宝设计师送你9个实用锦囊!

如何做好适老化设计?支付宝设计师送你9个实用锦囊!

如何做好适老化设计?支付宝设计师送你9个实用锦囊!

如何做好适老化设计?支付宝设计师送你9个实用锦囊!

如何做好适老化设计?支付宝设计师送你9个实用锦囊!

如何做好适老化设计?支付宝设计师送你9个实用锦囊!

如何做好适老化设计?支付宝设计师送你9个实用锦囊!

如何做好适老化设计?支付宝设计师送你9个实用锦囊!

如何做好适老化设计?支付宝设计师送你9个实用锦囊!

如何做好适老化设计?支付宝设计师送你9个实用锦囊!

如何做好适老化设计?支付宝设计师送你9个实用锦囊!


如何做好适老化设计?支付宝设计师送你9个实用锦囊!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:优设  作者:Alipay


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



掌握这五个方法,帮你提升智能产品体验

资深UI设计者

场景细分

随着各大智能厂商对用户行为数据的收集积累,拆分提炼出了不同场景下用户的特定需求,相比以前的大而全臃肿的功能界面,现在的功能、信息更加精确,产品将不同场景下的解决方案为用户提前准备好,用户只需要简单的选择就好,更加人性便捷。

1. B&O 音箱歌曲模糊切换界面

掌握这五个方法,帮你提升智能产品体验

B&O 音箱面向的人群是音乐发烧友,他们对音乐有独到的理解,为了为用户提供便捷合乎口味的音乐,B&O 将歌曲类型与颜色情感相结合,分别是:黄色代表愉快的歌曲、红色代表激情的歌曲、紫色代表忧郁的歌曲、蓝色代表轻松的歌曲。用户只需要选择颜色就可以播放相应风格的音乐,给用户浓烈的感性艺术气息。

掌握这五个方法,帮你提升智能产品体验

并且 B&O 将音乐播放场景做了细分:只收听自己收藏的歌曲、收听与自己品味相似的歌曲、随便听听;这三个场景下的需求通过三层圆环来满足:点击外环区域播放全网歌曲、点击中环区域播放与用户收藏相似的歌曲、点击内环区域播放用户收藏的歌曲。这种感性的操作方式省去了搜索歌曲的过程,极大的提高了便捷性。

2. 三星智能冰箱 2.0 系统

掌握这五个方法,帮你提升智能产品体验

我们先了解一下三星智能冰箱 1.0 的系统是什么样的,首页包含时间、天气显示、音乐播放、购物清单、备忘录、相册、留言板、设备控制,用户在冰箱面板上什么都能做,整体感觉是一个臃肿的功能集合。

掌握这五个方法,帮你提升智能产品体验

在 2.0 中,三星将用户使用场景做了以下的细分:烹饪模式、日常模式、娱乐休闲模式、家庭管理模式;在烹饪场景下,为用户展现菜谱,用户可以专注的去研究饭菜制作方法;在日常场景下,为用户提供日历、照片墙、留言板、日程等日常生活相关信息;娱乐场景下,用户可以在厨房一边忙碌一边听音乐,还可以查看社交消息,所有的功能都是围绕娱乐休闲;家庭管理场景下,全职妈妈可以一边做着饭,一边看着监控屏幕上儿童房孩子的情况及全屋的安防情况,也可以控制家中的设备。

场景细分可以有重点的为用户提供他们真正需要的服务,让用户感受到产品带来的贴心感。

3. Orvibo 灯光照明场景

掌握这五个方法,帮你提升智能产品体验

Orvibo 根据用户使用灯光的习惯,按照用户对于光线的需求程度,将灯光使用场景分为:夜晚光线昏暗需要明亮的光照、白天光线充足不需要灯光、休闲时需要柔和些的光线、阅读需要不刺眼但明亮的光线、起夜时微弱的轮廓照明即可。为用户提供每种场景下的照明方案,准确快速的满足用户不同的需求。

4. 小米 TV 端空调控制界面

掌握这五个方法,帮你提升智能产品体验

小米根据用户对于空调各个功能的操作频率,罗列出核心功能:开关、温度调节、冷热模式,界面中只体现这几种种信息,将低频功能隐藏起来,为视觉降噪,突出核心功能,提升了用户操控效率。

5. WOM 天气展示模块

掌握这五个方法,帮你提升智能产品体验

针对那些上班中不方便看手机、穿好衣服正要出门、旅游到达当地酒店需要看一眼天气状况的场景,WOM 提供了简洁直观的设计方案,产品显示区域只保留 4 种常见天气类型,高亮的天气 icon 代表当前的天气状况,当天气将要发生变化时,相应的天气 icon 会闪烁。

掌握这五个方法,帮你提升智能产品体验

此外,通过利用颜色来传达不同的温度,蓝色代表 0℃,白色代表10℃,黄色代表20℃,红色代表30℃,在不需要手机的情况下为用户提供了丰富的展现形式。

6. 三星电子画框

掌握这五个方法,帮你提升智能产品体验

随着手机的普及,家庭对于电视的需求已不完全是为了收看节目,往往一个礼拜也看不了几回。三星基于这种情况为了延续电子屏幕的销量,赋予了电视装饰属性,演变为纯展示的电子画框,用户可以选择各种风格的肖像或风景图片进行轮播展示,扮演艺术装饰画的角色,从而满足用户日常家庭装饰需求。

直观明确的表现方式

在设计中融入图片,将操作、状态可视化,这些具象的形式可以让用户快速理解并操作,让我们看看各大智能产品厂商是如何实施的:

1. Nest 温控器安装界面

掌握这五个方法,帮你提升智能产品体验

大多数智能设备买回家后,需要用户自己安装,有的甚至牵扯到线路问题,Nest 温控器安装界面采用与实物一致的模型元素,让用户有参照依据;通过零部件的运动告诉用户安装顺序;通过放大细节,告诉用户应该选哪一个部件及如何链接。让用户有更好的参与感、成就感,还可以降低公司的人力安装成本、客服成本。

2. 小米智能家居电视

掌握这五个方法,帮你提升智能产品体验

小米智能家居电视背景运用实物图片,给用户营造家庭的氛围,设备卡片 icon 运用半写实风格,和实际产品一一对应,便于用户快速查找设备;卡片底部体现设备状态,精简的卡片信息使得设备的状态更容易被用户感知到。

3. 三星、苹果智能家居系统首页

掌握这五个方法,帮你提升智能产品体验

三星、苹果都运用图片作为系统的背景,可以很好的和用户拉近距离,通过白色或磨砂卡片与背景做区分,三星的设备 icon 采用多彩渐变风格,和它趋于年轻化、时尚个性的品牌战略方向保持一致。

4. Whirlpool 洗衣机、烤箱、冰箱模式选择界面

掌握这五个方法,帮你提升智能产品体验

由于洗衣机、烤箱、冰箱的运行模式和用户想要洗的衣物类型、材质、烹饪的食物类型、储藏的食物类型有强关联,Whirlpool 运用图片作为模式背景,将功能和物品类型结合,用户可以直观感性的理解和区分各个功能,从而快速做出选择。

5. Orvibo MixPad

掌握这五个方法,帮你提升智能产品体验

Orvibo 在大屏智能面板的设计上大量使用图片元素,不仅可以区分各个功能模块,还增添了内容的丰富性,要知道智能面板的首屏和设备控制列表页功能是不一样的,它是用来承接并向用户展示房间内各个信息的,房间图片作为背景烘托出家的氛围,每个房间页面的左上角显示屋内温度、湿度、当前开启的设备类型及数量,很直观的向用户展示屋内信息。

掌握这五个方法,帮你提升智能产品体验

每个场景都用具体的图片作为卡片背景,可以让用户预想到每个场景对应的运行效果。有的场景卡片中体现所属房间信息,告诉用户该场景只联动运行特定区域的设备。

运用图片会有以下问题:1、找到能体现各个特定功能的图片增加了人力成本;2、图片的多样性容易打破画面的整体统一感。所以要结合公司的现状克制的运用图片。

6. Amazon 智能家居系统

掌握这五个方法,帮你提升智能产品体验

Amazon 的监控设备卡片背景外显了房间内的监控画面,用户在设备列表界面就可以直观的看到监控区域的信息,强调了用户关注的内容,缩短了操作步长。

7. Lenovo Smart Clock 备忘提醒时间设置界面

掌握这五个方法,帮你提升智能产品体验

通常,我们设置时间时,系统会给我弹出时间选择控件,需要我们上下滑动设置;Lenovo Smart Clock 的做法是将时、分的设置具象成了时钟实际运行的圆形轨迹,与用户对于时间的认知保持一致,很贴心的设计,这种方式非常值得我们学习。

8. Google Nest Hub 定时界面

掌握这五个方法,帮你提升智能产品体验

Google Nest Hub 将传统的定时列表具象成了一个个正在倒计时的时钟,用户可以更直观的看到每个定时的状态。点击某个定时卡片可以快速的进行暂停或删除操作。

9. 小米空气净化器界面

掌握这五个方法,帮你提升智能产品体验

小米空气净化器界面,每一档空气质量值都对应不同的颜色,并且将颜色延续到了其他操控按钮,让用户对当前空气质量有更强的感知;净化器被关闭时,显示区域、控制区域置灰,明确告知用户设备状态及可操作区域。

10. 三星 SmartThings 设备连接查看界面

掌握这五个方法,帮你提升智能产品体验

房屋面积大,会有很多的设备与多个网关连接,家中与网关连接的智能设备有时候会连接中断,具体哪个设备与哪个网关中断了不容易被查清。三星 SmartThings 将设备与网关的连接情况可视化,可以向用户直观的反映出哪个设备连接出了问题。

运用手势控制

通过利用不同形式的手势操控,让用户和产品的交互过程更新颖更便捷。要注意的是虽然手势不需要操控物理按键,但手势操控的形式要建立在用户已有认知习惯之上,请看以下案例:

1. LG 手机系统控制界面

掌握这五个方法,帮你提升智能产品体验

最左边的图为行程信息截屏操作,目前截图方式有几个按键一起按下的,也有手机背面敲击三下的,这些都需要与设备接触,接触交互的过程就需要花费用户更多的时间,LG 通过双手捏合截图的形式体现现实中“抓取”的语义,用户使用起来顺其自然,瞬间就可以完成截图的目标。

中间的图为应用快速切换操作,用户只需要对着屏幕做挥手动作,就可以切换至下一个应用,这个隔空操控的手势核心使用场景是:当你正在厨房,手上沾着面粉或其他东西时,需要操控手机又不想弄脏手机,那么隔空操作就可以解决这一痛点。

最右边的图为多媒体音量调节,只需要作出旋钮的动作,就可以实现音量的控制,是不是觉着很 Cool。这种新的控制形式可以让用户加深对产品的印象。

2. Google Nest Hub 音乐播放控制界面

掌握这五个方法,帮你提升智能产品体验

在 Google Nest Hub 的音乐播放界面,当你想开启或暂停音乐播放,只需要手掌隔空朝着屏幕方向做按压动作,就可以快速触发相应功能,这种方式让用户会感觉很爽,自己就像有了魔力。

3. Google Nest Hub 闹钟控制界面

掌握这五个方法,帮你提升智能产品体验

早上闹钟响起时,需要用户选择关闭闹钟还是稍后提醒,常见的情景是,用户睁开眼伸手去点击某个选项,会干扰想要接着睡的用户。Google Nest Hub 在此处增加了隔空操控手势,用户如果想关闭闹钟,只需要闭着眼,手掌朝着屏幕一挥手,就可以搞定了,有没有被宠爱的感觉。

4. HomePod 音乐投射功能

掌握这五个方法,帮你提升智能产品体验

苹果用户如果想将手机上正在听的歌曲通过 HomePod 播放,只需要将手机靠近 HomePod,就可以轻松完成音乐投射,整个过程就像将一个容器的内容倒入到另一个容器内,既充满趣味性又大大简化了音乐播放设备切换的过程。

提供个性化、多样化的选择

通过设计语言为用户提供更多的视觉风格,甚至开放编辑权限让用户更自由的制定自己喜欢的形式,这些都可以满足用户的个性化需求及专属感,请看以下案例:

1. Sony HUIS 遥控器

掌握这五个方法,帮你提升智能产品体验

Sony HUIS 遥控器为用户提供了最大限度的自主编辑权,用户可以从后台设定每个按键的形式及功能,也可以在屏幕中设置户型图,方便控制对应的设备。

掌握这五个方法,帮你提升智能产品体验

甚至可以绘制只有自己理解的专属图案,大大提升了专属感。

2. 三星智能冰箱屏保

掌握这五个方法,帮你提升智能产品体验

用户具有喜新厌旧的心理,三星智能冰箱为用户提供了丰富的屏保:有没有任何信息展示的抽象几何艺术画风格、有配合温度展示的春夏秋冬风格、有简洁素雅的时间显示风格、还有照片背景墙风格;兼顾了用户日常装饰和功能的需求。

3. Lenovo Smart Clock

掌握这五个方法,帮你提升智能产品体验

Lenovo Smart Clock 对于时钟屏保为用户提供了不同的风格,涵盖了大多数的人群风格喜好:活泼跳跃、实用直观、极简现代、抽象艺术、纯文字、纯数字等

掌握这五个方法,帮你提升智能产品体验

甚至在同一种风格中再细分为多种色彩搭配方案供用户选择。可以说想尽办法来满足用户的个性化需求。

统一的设计语言及操控逻辑

这里的统一设计语言有两个方面:一、同一个功能在不同的智能设备上布局要一致;二、同一类设备在 APP 中的功能布局要一致;操控逻辑统一指的是:产品中设备的操控方式要和用户对实际设备的认知一致。一致性可以降低学习成本,提升更稳定的操控体验。请看以下案例:

1. 温控器多端控制界面

掌握这五个方法,帮你提升智能产品体验

Nest 温控器及 ecobee 温控器在设备上的设计语言和 App 上的保持一致,方便用户在多端设备上的无缝操控体验。移动端与智能设备界面唯一不同的是,移动端,同一层级上展示的功能入口更多,适合更复杂的操作。

2. Orvibo 移动端设置界面

掌握这五个方法,帮你提升智能产品体验

在移动端设置智能面板功能按键的界面中,Orvibo 将按键列表做成与实物一致的样式,便于用户快速找到对应的按键进行设置,这是提升智能家居一致体验常见的方式。

3. 三星 SmartThings 功能卡片

掌握这五个方法,帮你提升智能产品体验

在智能家居 App 中,由于功能种类繁多、内容不确定等因素,承载它们的卡片在布局设计上面临很大挑战,需要兼容各种功能、还要保证卡片的整体一致性及合理的屏效比。

在 SmartThings 智能家居控制系统中,三星对功能卡片进行了统一的部署,卡片左上角为功能名称,左下角为状态信息,右下角区域为操控区,并且还考虑了只有功能控制没有状态、只有信息没有功能控制情况下卡片的拓展形式,充分保证了操控的一致体验。

4. Google Nest Hub 调光灯控制界面

掌握这五个方法,帮你提升智能产品体验

在调光灯的操作逻辑里有这么个问题:是将亮度值调至 0%关闭灯光,还是需要一个单独的开关按钮。看看 Google 是怎么做的,它将调光区域与灯的开关做了区分,也就是说亮度通过调光区域操作最低为 1%,需要通过开关按钮进行关闭;这样做的好处是操作逻辑明确,并且当用户在 80%亮度下关闭灯光,下次开启时还是 80%的亮度,更加人性。

总结

目前网上各平台的智能产品界面有很多,然而大多都是不落地的概念稿,里面的设计稿由于没有具体场景及需求的约束,大多都无法解决公司实际项目中的问题,经常浏览仅能提升个人审美。只有平时通过对各行业实际落地产品的搜集积累和分析,才能发现它们在提升产品体验道路上的共通点、差异点,从而为公司提供真正有价值的设计方案。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:优设  作者:Aaron杜斌 



分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



f

从垃圾桶到“多入口”,谈谈B端设计思考

seo达人


好的设计,都不会是“无缘无故”,它一定是从满足某种实际需求而出发,向更高级的目标前进。作者从垃圾桶的设计开始,将思绪延展到界面的功能入口,带大家一起思考一些B端的设计逻辑。

 

最近在一次大扫除当中,不小心把厨房里的垃圾桶给摔坏了,于是乎想在网上选购一个合适的垃圾桶,而回顾了垃圾桶的选购经历,或许它是一个很好的例子,让大家了解 多入口 的设计思考。

首先,究竟厨房需要是什么样的垃圾桶?我陷入了嘀咕,因为我自己也不太明白,于是我在淘宝上看到了许多不同类型的垃圾桶

把它们总结了一下,基本上可以分为两类:直筒式、脚踏式:

图片

 

直筒式:

采取顶部开放的结构,使用者可以直接将垃圾扔到桶里。如果不够有趣?你还可以将垃圾桶看作“篮筐”进行投篮。

直筒式顶部开放的结构,确实能够给我们扔垃圾带来不少便利,但同时也会暴露一些问题,就是蚊虫

因为 厨房里的垃圾桶会有很多 餐厨垃圾,也因此会滋生很多蚊虫,特别是在一些剩下的水果核上,会留下很多蚊虫。

 

脚踏式:

顶部为盖板,当需要扔垃圾时,使用者需要用脚踏住盖板,并将其抬起。这种方式就能够避免厨房餐厨垃圾所滋生出来的蚊虫

但问题又来了,在做菜时,扔垃圾通常十分频繁,每一次都需要脚踏显然效率太低。

那能否既能脚踏又能随手就扔呢?

面对这一问题,我发现了一个新式垃圾桶:

图片

它在为用户设计时,考虑到了两种不同的模式,因而将两种入口进行巧妙的融合。

通过顶部面板的开关,可以将垃圾桶设定为开启或者关闭,能够让垃圾桶在你想要的时候保持开启的状态,这样就能满足在一小段时间内的频繁扔垃圾的需求。同时又能提供脚踏的形式,将垃圾桶盖完整抬起,这样的垃圾桶既可以脚踏也可以直接扔。

而在我们设计B端产品时,同样会有 “多入口”的情况。

比如在 纷享销客 的设计当中,新建客户有着两个不同的入口:

 

入口一:首页 – 客户及商机管理 – 客户 – 新建

这是新建客户最为常规的入口,它就类似垃圾桶的直筒式。通过表格页操作的新建,让用户进行表单的填写,进而新增客户。

图片

 

入口二:首页 – 新建 – 客户

这是 纷享销客 的一个特别设计,它在导航菜单处设置一个全局的新建入口,当用户在系统的任意页面,都可以进行新建。

大家可以跟我一起思考一下,我们如果是一个销售人员,在我的工作当中,会去经常新建客户、跟进记录等,那通过一个全局的新建入口,能帮助我们更快的进行操作。这便是纷享销客的第二个新建入口。

图片

 

我再给大家举一个简单例子,同样我们在纷享销客当中,表格当中的筛选同样也是有着两个不同的入口:常规筛选与表头筛选(大家可以看我B端设计指南筛选的文章):

常规筛选:

用于表格当中一般和许多操作并排放置,算是一个较为基础的入口

表头筛选:

点击过后同样也是进入到筛选弹窗,但不同的是,表头筛选点击过后,会将表格的值带入到筛选当中,来实现筛选+选值这样的两步操作。

而为什么会有两种不同的入口,我们回过头来想想,就像我文章开头说到的垃圾桶一样,两种不同的入口,其实是为了方便我在某一个场景下进行使用(比如垃圾桶的 持续丢垃圾与开关垃圾桶盖;纷享销客  新建操作当中的 常规新建与快捷新建;)

而它不正是因为用户在不同的场景需求下,所设计的形式不同。

在B端产品当中,不同场景的需求其实经常存在,但为什么没有暴露出来?

其实是因为用户在B端产品当中,本身用户就是处于弱势群体,他们都是服从于上级的安排,而设计师不会分析,就会选择最平庸的方式去处理需求。我们往往需要基于场景去思考问题,而场景如何理解?

之后有机会再和大家展开聊聊~

 

原文链接:CE青年(公众号)

作者:CE青年


转载请注明:学UI网》从垃圾桶到“多入口”,谈谈B端设计思考

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷   作者:陈皮Celia 

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


围绕应用生命周期的编排设计

ui设计分享达人

什么是围绕应用生命周期的编排设计

围绕应用生命周期的编排设计是一种企业级技术产品设计策略。

它的核心是要解决设计师很难上手企业级技术产品,且更加难以找到体验设计机会点的问题。我们是一群工作在企业级技术产品领域里的设计师,同时也是掘金者,这篇分享即是我们在企业级技术产品领域里探索的一些方法总结。

 


当设计遇上技术

工作现状

在我们日常工作中,和技术产品 PD 聊需求是一件非常痛苦的事情,他们讲的每一个字都认识,但是组合起来就不知道是干什么的了,因此设计师也很难去想象用户是怎么在用这些功能。

因此相较于 C 端产品来说,B 端的技术产品目前还处于基本可用的状态,更谈不上什么体验了。

 

分析原因

究其原因,我们总结有三点:

① 这些产品大多数都是由技术来主导,功能优先

② 设计在整个流程中都处于非常被动的状态

③ 设计与技术之间存在一定的专业壁垒,技术往往比较抽象难以理解

同时,我们的用户并不是客户,用户不能根据自己的意愿喜好选择产品。用户隐藏在企业内部,设计师日常中很难接触到真实用户。另一方面,用户的技术专业背景与设计师的专业存在鸿沟,这使得设计师对用户需求的理解也不够深,所以说在这种环境隔离和语境不通的状态下,设计师其实难以和用户构建同理心。

 

能做的事

在这种狭小的设计发挥空间里,我们能做什么呢?

其实我们设计师有明显的优点:

比较擅长找规律找方法,有破局意识,从而能够发现设计的机会点。


 

企业级技术产品设计探索

发现规律

所以我们回过头看一下之前做过的这些产品和功能,从它们的作用对象、出现时间、用户目标、用户行为这四个维度对他们进行归纳和总结。

我们发现这些产品具有很强的阶段性,通过不同的产品来支撑各个阶段下的用户目标。用户通过产品的功能来实现各种编排动作,例如对应用本身代码的编排、对应用依赖的底层资源的编排,从而支撑用户应用的生命周期。

因此企业级技术产品具有以下四个特点:

  • 阶段性

  • 驱动性

  • 流程性

  • 抽象性


提出策略-围绕应用生命周期的编排设计

首先我们要针对这四个特性进行一轮判断,了解这个产品的场景,场景下对应的角色,每个角色执行的是单线还是多线任务流,以及任务流是由哪些功能支撑。经过这层判断之后再定位具体问题:

① 每个阶段的目标是什么

② 阶段下每个角色各自的小目标又是什么

③ 任务要对应用还是应用相关的内容进行编排

④ 产品的功能是如何实现的


当找到这些问题的答案以后,我们就可以对产品的上下游场景进行编排,明确各阶段的侧重以及上下游场景的限制条件;对角色进行权限分配以及协作触点的确定;将任务流从起点到过程再到结果进行梳理;以及最后通过对底层技术的理解,合理编排产品信息架构和界面内容。

为了能够更加高效的完成以上信息的收集和处理,我们沉淀了 CMTD 四个小工具。

 

策略详解

C 是 Collaboration,协同场景,主要回答四个问题:When、What、Who、Where。

① When:用以明确产品所处阶段以及上下游阶段,以全链路的视角看用户的完整使用场景,因为产品往往可能只是解决用户部分场景的问题

② What:定义当前场景的阶段目标以及要做的事情

③ Who:当前阶段的事情由哪些角色参与

④ Where:这些角色在线上或线下是如何配合协作的

例如我们要做一个技术产品,通过 Collaboration,我们知道它覆盖了发布阶段、日常运维阶段,目的是把经过测试的应用发布上线并进行日常维护,主要是运维人员配合研发人员和发布经理完成线上的问题排查和线下配置文档的交接,我们就能比较清楚的知道我们要做的是一个运维平台。

 

M 是 multi-role,多角色,主要用以分析产品是由哪些角色共同协同驱动的。

与 C 端产品不同的是,我们除了对核心角色的自然人属性进行洞察,还要定义清楚该角色的目标有哪些,目标对应的任务流以及支撑的功能和权限。并且企业级技术产品往往都不是一个角色就能完全执行完成,所以该角色的上下游角色也要摸清之间的协作触点在哪里。

多角色的信息我们可以通过在客户现场或者用户访谈来收集,并沉淀为用户角色库。

基于收集来的用户信息,来定义我们产品的角色:

 

T 是 Task flow,任务流。任务流一定是基于一个用户角色的某个目标,来定义任务的起点-过程-结果。

起点就是界面上用户的操作入口,过程需要包含触发操作、自操作、条件判断以及是否有协作角色参与进来,在结果处除了提供结果反馈还要提供下一任务的去向入口,帮助用户把流程串联起来。

任务流可以借助现有流程的走查或按照 T 模型来梳理任务流信息,从而帮助我们更好的定义一条用户的任务流是如何执行的。

例如我们要做的运维平台的产品,核心角色是运维,他其中的一个目标是为应用创建工作空间。按照 T 模型,我们可以很方便的将这条任务流定义出来。

 

D 是 deep ,深化。主要从两个维度展开:技术架构和逻辑原理。这是两个在做技术产品的过程中经常会接触到的两个概念。

在分析技术架构时,我们可以重点关注两个点:看由哪些功能模块构成,这些功能之间的静态结构,是包含关系还是依赖关系。分析逻辑原理,一是了解这些功能产生的实例,是一对一的关系还是一对多的关系,信息或流量在这些功能模块之间如何流转。通过这些分析,我们可以把掌握的功能特征和逻辑规律。

举例来说,运维平台的核心角色运维人员需要为应用创建工作空间,按照梳理出的任务流,用户需要经过3次跳转7步完成,那这个是否还有优化空间呢?

我们可以从 Deep 深化的角度入手,看这条任务流是由哪几块功能支撑的。例如工作空间内包含网络和安全组,安全组内包含负载均衡和虚拟机。就像我们了解汽车的制动装置,看到装置内包含气室,气室内包含活塞体、密封垫,密封垫连接在推杆上。

再从逻辑原理图入口,了解流量会先按照工作空间进行隔离,从工作空间走专有网络还是经典网络,网络将流量分发到安全组,安全组里的负载均衡会负责调配流量到虚拟机。他们之间层层递进互相依赖。就像汽油从油箱到达制动装置,在发动机里和空气一起被压缩燃烧后能量转化转送到动力装置一样。

通过上面的分析我们了解到这几个功能其实是紧密关联的,用户没有必要分散到不同的地方进行添加和创建,完全可以借助流程表单和抽屉把他们串联在一起。

因此我们找到优化体验的机会点,把之前需要三次跳转7步完成的任务流,优化到1个入口5步完成。

 


总结回顾

企业级技术产品有四个特性:阶段性、驱动性、流程性、抽象性。通过 C、M、T、D 四个小工具来帮助我们收集和归纳信息,实现对上下游场景的编排、角色的定义、任务流的编排以及界面的编排。



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷  作者:Ant_Design

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


B端产品布局设计规范

ui设计分享达人

一、布局原则:古登堡、尼尔森

二、结合B端产品和页面分析

三、大厂布局设计规范分析

四、总结

一、布局原则

布局设计在设计的每个领域都有涉及,这里说的不是设计中的布局四原则:亲密、对齐、重复、对比(专业术语:格式塔原则),这是平面设计中常用的布局方式,我的理解就是排版。但B端的布局设计是不同的,每个企业或者产品的设计规范有各自不同的依据。

B端页面布局最常用的原则我见过有两种:古登堡原则和尼尔森F型视觉模型。下面是网上找的图:

(1-侵权提删:古登堡原则)

古登堡原则:阅读引力是从上到下,从左到右,呈现Z字形移动,而起点和终点会作为重点视觉记忆区,中间过程会轻扫作为次要视觉记忆区。左上和右下是用户会比较容易关注和注意到的地方。

 

(2-侵权提删:尼尔森F模型)

尼尔森F模型:我们在第一次观看页面时,视线会呈 F的形状关注页面。先从顶部开始从左到右水平移动,目光再下移开始从左到右观察但是长度会相对短些,以较短的长度向下扫视,形成一个 F形状。

这两个原则都是从用户视觉角度分析,在按需带入产品页面设计的。没法单纯的说哪个对哪个错,或者说哪个更好。因为要结合产品属性、信息结构、及用户心理等因素。

二、结合产品和页面属性分析

我们公司产品的列表页面是参考古登堡原则制定的布局设计规范。这是一个运维产品(我们通常称为SaaS:软件即服务)-列表页面的模板,可以看到大部分内容被表格占据,且表格中的内容是相似的。通过与腾讯蓝鲸团队的沟通,最终确定这种布局的页面用户视角浏览流程是“Z”型的。

主要操作按钮在左侧的第一视角区,通常以“新建”等主要按钮为主、“导出”或“批量操作”等次要按钮为辅一同摆放。因为列表通常是某个任务的罗列,会把新建的入口也放在一起,一是为了方便用户快速找到新建任务入口,二是为了让信息结构更聚拢。强休息区放搜索框。在不同场景下,按钮和搜索框位置要视需求确定位置。在我们公司的大部分产品场景下,按钮是在左侧。最终落脚点是在操作字段(表头属性,技术角度称为字段)。

 

弹窗的布局也是类似的,很容易可以判断出标题和确定、取消按钮是两个视角落脚点。

 

当然不是所有页面都遵循古登堡原则,像下面的表单页面就是使用F模型。因为最主要信息标题都在左侧,且信息流是集中往下走,并不分散也不需要横向跨度很大。所以使用尼尔森F模型就可以支持布局走势。

 

三、大厂布局设计规范

这里以腾讯Magic Box VUE组件库和阿里AntDesign来分析我个人的理解:

 

这是从antdesign官网找到的信息复杂度和相关性模型,选用相应的信息呈现方式,选用合理的布局方案来承载详情页的内容。这应该是阿里内部自己建立的布局规范,既不符合古登堡原则,也不适应尼尔森F模型。但从地下不同页面内容的分布来看,我觉得是把这两种模型结合了。请看下图:

 

古登堡原则注重左上角和右下角的内容。尼尔森F模型是只注重左侧内容,这种布局方式通常是信息量比较大时用的比较多。我们把页面的内容拆开看就可以分析出,每个模块也是可以分成不同模型的结合。

 

腾讯Magic Box的布局规范就是前面我们公司用的是一样的,就不多分析了。

四、总结

通常:信息流页面使用尼尔森F模型。需要用户操作页面的则常常把古登堡和F模型结合使用,具体使用哪种看两个:1、用户在页面的常用操作是什么,2、你想或者说是产品想传递给用户的信息是什么。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:站酷  作者:lq934731638

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



日历

链接

个人资料

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

存档