首页

智慧社区平台订单支付及退款结算规则设计

雪涛

编辑导语:如今随着科技的不断发展,人们日常的生活也开始变得智能化,智慧生态逐渐进入到各种领域,从买菜到小区物业等等,如今很多都变得更加智能方便;本文作者分享了关于智慧社区平台订单支付及退款结算规则设计,我们一起来了解一下。


笔者现就职于一家房产集团旗下科技公司,整体负责公司各产品线;公司主营智慧社区项目,在当地小有规模,智慧社区平台包括物业管理系统、社区电商平台、社区IOT系统、居家养老系统、社区政务系统、二手房交易平台等6大系统。

各系统后台独立,为了方便小区业主,让用户在同一个APP上能享受物业服务缴费、线上购物、扫码充电、会员缴费等等功能,需在用户端设计不同的支付结算方式。

本文主要分享社区电商系统、物业管理系统、社区IOT系统的订单支付及退款结算规则设计。

一、平台支付及结算业务需求分析

1. 物业管理系统支付结算需求

物业系统为SaaS模式,B/S架构,使用平台公有云服务器,单独数据库分区,使用角色为平台合作的付费物业企业,支付结算需求包括:

  • 物业费、车位管理费、电梯费等费项需根据后台账单生成支付订单,且用户支付后直接结算至物业企业帐户,不做分成;
  • 代收水电费需对接远程水电表设备,用户可在线预充费用,并随时查看余额,用户充值金额结算至物业企业帐户,并定期结算给当地水、电主管部门;
  • 业主报修工单支付费用需按照材料费、工时费区分账单,直接结算至物业企业帐户,且平台收取3%的服务费;
  • 物业结算金额需满足“T+1”到账,即次日(工作日)到账;
  • 所有订单支持后台手动操作退款。

2. 社区电商平台支付结算需求

社区电商模式以整合社区周边商家为社区居民提供便捷的O2O服务为主,入驻商家包括社区周边零售商和服务商。

零售服务场景主要是方便社区居民在线选购社区周边商品,提供线上下单,线下送货上门服务,基于之前的业务拓展,支持平台配送、快递物流、到店自提、商家送货上门4种配送方式,其中平台配送是整合物业服务人员进行社区周边的送货上门服务。

综合各种配送方式及业务场景,支付结算需满足以下需求:

  • 订单支付金额需”T+7″直接结算至商家帐户;
  • 支持单笔订单直接分润,分润结算方包括平台分润、代理商分润、物业分润、商家结算;
  • 部分商品支持7天无理由退货;
  • 已完成订单支持单个商品退货退款;
  • 平台配送费支付到平台帐户,并按月结算给配送人员;
  • 快递物流、商家送货上门的订单配送费直接结算到商家;
  • 到店自提不收取配送费;

预约服务场景主要满足社区居民在线预购社区周边服务,支付结算需满足以下需求:

  • 订单支付金额需在服务完成后“T+1”直接结算至商家帐户;
  • 支持单笔订单直接分润,分润结算方包括平台分润、代理商分润、物业分润、商家结算;
  • 用户在服务未开始前申请退款,可全额退款,上门后退款需扣除上门服务费;
  • 服务完成后不支持退款;
  • 服务单到期未预约服务时,自动全额退款给用户;

3. 社区IOT系统支付结算需求

社区IOT系统对接设备包括:社区一卡通、门禁、楼宇对讲、停车道闸、电动车充电桩等等;涉及到支付业务的有社区一卡通、电动车充电桩。

社区一卡通支付及结算需满足以下需求:

  • 一卡通需同时满足门禁卡、储值卡功能;
  • 可应用的支付场景包括:缴物业费、水电费、维修费等,社区内及周边购物消费刷卡,线上支付扣款;

电动车充电桩支付及结算需求:

  • 按照充电时间预付费,付费金额结算至平台;
  • 不满预订时间结束充电时,自动计算退款金额,原路退回;
  • 安装独立电表,电费由平台定时结算给物业;

4. 积分、优惠券、付费会员支付及结算需求

包括以下需求:

  • 以上各个支付场景,用户都可使用积分抵现,抵现金额由平台让利给商家及用户,随订单支付金额一同由平台结算给商家,实时核销;
  • 优惠券分为平台优惠券及店铺优惠券,统一由平台审核发放,可用于支付抵现;
  • 平台优惠券抵现金额由平台补贴,随订单支付金额一同结算给商家,实时核销;
  • 店铺优惠券抵现金额,直接由店铺让利优惠给用户,实时核销;
  • 用户可购买付费会员,享受会员特权;

二、结算规则设计及注意事项

由以上需求内容可以看出,各系统的结算场景、结算流程,包括结算对象都存在不一致,但C端支付入口在同一应用端,这就需要在后台针对不同的业务流程设置不同的结算规则。

笔者对标了国内多个提供聚合支付及分账服务的平台,综合考虑对接成本及费率,最终选择了某平台作为对接方。

结算规则设计及注意事项如下:

1. 物业缴费

  • 支付方式:线上-支付宝、线上-微信、线下-支付宝、线下-微信、现金、银行卡刷卡、一卡通;
  • 分账对象:物业企业(第三方支付平台扣除支付费率);
  • 分账方式:直接分账;
  • 账单生成:根据费项设置的规则在物业管理系统后台生成账单后,同步到业主APP;

  • 到账周期:T+1;
  • 退款方式:由物业系统后台手动操作单账单退款;

注意事项:为了保证客户资金安全及平台免责,由第三方支付机构与企业直接签约,且提供单独的对账后台,便于企业查账,线下支付则直接结算至企业银行卡账号,系统只做账单记录。

2. 电商购物(包括使用积分、优惠券结算)

  • 支付方式:线上-支付宝、线上-微信;
  • 分账对象:平台、代理商、物业、商家共4方分账;
  • 分账方式:资管平台分账;
  • 到账周期:订单完成日起T+7;
  • 账单结算及退款规则:平台配送方式包括快递物流、平台快送(类似美团骑士)、到店自提、商家送货上门,每种方式用户需支付的配送费不等,需分别计算,且需考虑用户使用积分、优惠券抵现及退款时是否选择全部商品退款等结算情景,总结分析订单状态及配送方式不同,共包含以下6种用例;

Case1:订单状态=待发货,配送方式=快递物流/商家送货上门

计算规则:

示例:

设置店铺抽成比例5%;
用户甲下单商品总额为30元,配送方式为快递物流,物流费5元,使用平台优惠券抵扣10元,积分抵扣1元,则下单后,用户需支付24元(24=30+5-10-1);商家收到结算总额为33.25元(33.25=(30+5)*(1-0.05));平台结算金额为-9.25元(-9.25=-10*0.95-1*0.95+24*0.05),负值,平台需结算给商家。发生退款后,用户可收到的退款总额为24元,+积分+优惠券;商家退款总额为33.25元;平台退款总额为-9.25元,负值,商家需退款给平台。

Case2:订单状态=待发货,配送方式=平台快送

计算规则:

示例:

设置店铺抽成比例5%;
用户甲下单商品总额为30元,配送方式为小慧快送,物流费5元,使用店铺优惠券抵扣10元,积分抵扣1元,则下单后,用户需支付24元(24=30+5-10-1);商家收到结算总额为19元(19=(30-10)*(1-0.05));平台收到的结算金额为5元(5=5-1+(20*0.05))元,正数,用户结算给平台。发生退款后,用户可收到的退款总额为24元,+积分+优惠券;商家退款总额为19元;平台退款总额为5元,正数,平台退款给用户。

Case3:订单状态=已完成,配送方式=快递物流/商家送货上门,退款商品=全部订单商品

计算规则:

示例:

设置店铺抽成比例5%;
用户甲下单商品总额为30元,配送方式为快递物流,物流费5元,使用平台优惠券抵扣10元,积分抵扣1元,则下单后,用户需支付24元(24=30+5-10-1);商家收到结算总额为33.25元(33.25=(30+5)*(1-0.05));平台结算金额为-9.25元(-9.25=-10*0.95-1*0.95+24*0.05),负值,平台需结算给商家。发生退款后,用户可收到的退款总额为19元(19=24-5),+积分+优惠券;商家退款总额为28.5元(28.5=33.25-5*0.95);平台退款总额为-9.5元(-9.5=-9.25-5*0.05),负值,商家需退款给平台。

Case4:订单状态=已完成,配送方式=平台快送,退款商品=全部订单商品

计算规则:

示例:

设置店铺抽成比例5%;
用户甲下单商品总额为30元,配送方式为小慧快送,物流费5元,使用店铺优惠券抵扣10元,积分抵扣1元,则下单后,用户需支付24元(24=30+5-10-1);商家收到结算总额为19元(19=(30-10)*(1-0.05));平台收到的结算金额为5元(5=5-1+(20*0.05)),正数,用户结算给平台。发生退款后,用户可收到的退款总额为19元(19=24-5),+积分+优惠券;商家退款总额为19元;平台需退款总额为0元(0=5-5)元,为零,平台无需退款。

Case5:订单状态=已完成,配送方式=快递物流/商家送货上门,退款商品=部分商品,部分商品总额/订单商品总额=α(保留三位小数)

计算规则:

示例:

设置店铺抽成比例5%;
用户甲下单商品总额为30元,配送方式为快递物流,物流费5元,使用平台优惠券抵扣10元,积分抵扣1元,则下单后,用户需支付24元(24=30+5-10-1);商家收到结算总额为33.25元(33.25=(30+5)*(1-0.05));平台结算金额为-9.25元(-9.25=-10*0.95-1*0.95+24*0.05),负值,平台需结算给商家。用户申请退款商品总额为20元,α=20/30=0.667,则用户可收到的退款总额为12.66元(12.66=20-1*0.667-10*0.667),退回积分667;商家退款总额为19元(19=20*0.95);平台退款总额为-6.34元(-10*0.667-1*0.667+20*0.05),负值,商家需退款给平台。

Case6:条件:订单状态=已完成,配送方式=平台快送,退款商品=部分商品,部分商品总额/订单商品总额=α(保留三位小数)

计算规则:

示例:

设置店铺抽成比例5%;用户甲下单商品总额为30元,配送方式为小慧快送,物流费5元,使用店铺优惠券抵扣10元,积分抵扣1元,则下单后:用户需支付24元(24=30+5-10-1);商家收到结算总额为19元(19=(30-10)*(1-0.05));平台收到的结算金额为5元(5=5-1+(20*0.05)),正数,用户结算给平台。用户申请退款商品总额为20元,α=20/30=0.667,则用户可收到的退款总额为12.66元(12.66=20-1*0.667-10*0.667),退回积分667;商家退款总额为12.66元(12.66=(20-10*0.667)*0.95);平台需退款总额为0元(0=-1*0.667+(20-10*0.667)*0.05),为零,平台无需退款。

3. 购买服务

  • 支付方式:线上-支付宝、线上-微信;
  • 分账对象:平台、代理商、物业、商家共4方分账;
  • 分账方式:资管平台分账;
  • 到账周期:服务完成日起T+1;
  • 账单结算及退款规则:用户下单成功后,支付金额预存在第三方支付机构的资管平台,服务商家按照订单完成服务后,资金由资管平台T+1结算至商家帐户。服务订单完成前可申请退款,完成后不支持退款。

4. 一卡通支付

  • 支付方式:线下刷卡支付;
  • 分账对像:物业或商家;
  • 分账方式:线下定期结算;
  • 注意事项:一卡通需在商务局完成备案,并且是定向使用金额,接受商务局监管。


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

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


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

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

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



包容格式:如何应对用户的多元输入需求?

雪涛

What 是什么

简介 :包容格式是一种用于文本输入的模式,使用这种模式后,可以让用户输入文本内容时不用关心格式或语法,从而轻松达到预期目标。


例子 :Google 搜索输入框



Why 为什么

用户操作界面时只是想完成某件事或某个操作,而不是考虑「正确」的格式或复杂的UI。计算机擅长弄清楚如何处理不同类型的输入。如果计算机无法正确处理多种类型或格式的文本内容,那么用户在输入内容时就会有明显的受阻感。


所以,让用户输入所需的任何内容,然后让计算机来处理结构或格式,才是一种比较理想的方法。这种模式可以极大地简化界面,并使其更容易被用户理解。

 相关资料:

https://zhuanlan.zhihu.com/p/343497540



When 什么时候使用

用户可能会输入不同类型、格式的文本内容,而我们希望用户可以不用太关心格式问题,同时希望界面保持简洁。很多时候,用户输入的数据可能类型、格式不一(例如存在空格、连字符、缩写或大写等等),如果提供不同的输入类型,那么界面就很可能不够简洁。这种模式可以很好地将数据类型有效处理。


使用条件:

  • 输入内容存在不同类型或格式;

  • 希望用户输入比较容易;

  • 希望界面简洁;



How 如何使用

核心思想:将界面设计问题转化为编程问题。


我们需要考虑用户可能输入的文本类型:

  • 简单的例子:只要求输入一个只有格式不同日期或时间;

  • 复杂的例子:搜索某些关键词,根据关键词获得不同的结果;


由于业务场景不同,每个应用程序使用此模式的方式可能不同。只要确保软件对各种输入格式的响应与用户期望的一致即可。因此建议与用户进行真机测试。



Example 案例

案例 1:东方财富股票搜索框

用户需求:将特定股票添加到个人关注列表。


东方财富的股票搜索框,用来帮助用户快速找到目标股票。该搜索框就使用了「包容格式」这一模式。用户既可以输入股票代码进行查询,也可以输入股票的名称进行查询。


案例 2:Gumroad 信用卡输入框

用户需求:输入信用卡号


很多产品都有输入信用卡号的场景,用户应该只要输入16位数字,而不需要明确这 16 位数字的格式。输入的内容中是否带有空格对结果不应该有任何影响。

gumroad 的信用卡号输入框允许用户随意输入他们的信用卡号。信用卡号字段接受空格作为分隔符(不包含空格也可以),然后这个输入框会立即将输入的卡号格式化。


案例 3:macOS 日历创建日程

用户需求:创建日程


我们会有很多方式来表示日期,例如周一、星期一、2021/06/20、6-14 等等。在 macOS 日历中创建日程时,用户可以输入各种格式的日期,输入框都会正常识别到该格式,并按照其日期创建日程。


更多案例

你可以在下方查看「包容格式」更多的案例:

https://airtable.com/shr9tuJY8zKxAIdfo/tblXEEC6HykKOL3Ef


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

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



文章来源:站酷   作者:Ant_Design

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

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



掌握这20条用户体验设计原则,助力设计成长!

seo达人


用户体验设计需要考虑很多不同的因素,例如为用户创造新体验时需要考虑哪些内容?哪些规则能区分产品的好坏?文章整理了20条用户体验设计原则,希望通过这份简洁易懂的合集能够让你对用户体验领域有一个初步的概览和了解。

 

1.以用户为中心 

这是最常被提及的用户体验设计基础,当涉及到产品设计决策时,提醒我们要学会使用同理心,而不是仅凭个人的想法或意见。

真正好的用户体验设计是为用户量身打造的,用户的意见、痛点、愿望、偏好和需求对产品来说至关重要,所以在项目初始阶段需要投入大量的时间和精力去了解用户。

图片

用户体验研究重点是了解用户,为接下来的产品设计做准备。以用户为中心的设计理念是设计师迎合用户的需求,区分了设计任何人都可以使用的产品和为目标用户设计的产品。

一款特定的产品需要面对不同的目标群体,前期研究中需要了解目标人群需要什么并在产品中反映出来,这是针对性很强的设计研究。

 

2.了解信息架构

可能很多人对信息架构的定义很模糊,这里举个例子来具象说明一下信息架构的含义。

例如在一款产品中,如果把所有内容都堆到一个列表或页面中,可能我们将无法使用这款产品,所以我们看到大多数的App和网站都包含很多的导航和页面结构,按照内容重要程度有序地来组织内容。

信息体系结构的最终目标是帮助用户理解他们在看什么,并帮助他们找到需要寻找的内容。

图片

信息架构在制作线框图或原型之前完成,因为它是产品的基础,有助于设计师考虑什么功能是最重要的,哪些是用户最需要的以及哪些次要内容可以隐藏起来等。

这种结构与产品的导航设计密切相关,有助于将用户引导到正确的位置。导航和信息架构都试图让用户以最少的认知努力来完成操作。

信息架构的设计不当会造成重大故障甚至可能危及整个产品。如果用户在使用产品时找不到任何想要的内容,点击任何元素都没有反应,会给用户带来很糟糕的使用体验。

 

3.考虑使用场景

没有场景,任何设计都很难生效。设计师在项目开始时会投入时间去了解用户面临的问题以及围绕这些问题的背景。

图片

这条原则有助于设计师考虑还有哪些因素会影响用户和产品,很多产品设计会为用户提供一些有助于消除使用摩擦的操作提示。

例如在设计表单时,会尽可能的添加输入提示,最大程度地减少用户出错的机会。

 

4.了解一致性及其重要性

保持一致性是用户体验设计的关键原则。拥有一致设计的产品可以更快地被新用户接受,因为用户不需要再次学习如何操作,他们会回忆起之前的操作习惯并将其作为指导,这也解释了为什么同类型的产品例如电商类App页面设计的很相似。

保持一致意味着在需要时可以重复使用某些UI组件,并在整个产品中保持一致的行为。例如当点击或悬停在按钮上面时,所以按钮的状态应该是一致的。

图片

从逻辑上讲,产品越大,这种一致性会变得越来越有挑战性,这促使许多设计团队创建自己的设计系统。一款产品的学习曲线越长越陡,放弃的用户就会越多,在市场营销中,这通常被称为销售漏斗中的漏洞。

 

5.给予用户适当的控制权

这条原则意味着用户希望能控制产品,无论是完成任务还是定制满足他们需求的内容。

在设计过程中一直试图给用户尽可能多的控制权,例如允许用户撤消操作、更改设置、自定义UI外观、创建快捷方式等。

图片

需要注意的是,当提供太多选项或用户太依赖于自己的选择时,用户可能会不知所措,造成所谓的选择悖论。所以在设计时要了解用户乐于掌控的余地,不能让用户感到使用压力。

 

6.把可用性放在首位

在整体上看,建立高标准的可用性是为用户做的最好的事情,有助于检查用户是否能够轻松地完成任务、产品是否正常运行以及是否完成工作。

图片

可用性的重要之处在于要理解可用性的灵活性和重要性。

 

7.了解用户测试

结合可用性的概念,我们还要进行用户测试,这是设计师对工作进行测试的方式,对新的产品来说至关重要。

当设计思想和理念被转化为有形的原型时,设计师要观察真实的用户是如何与之交互的,可以通过许多不同的方式例如简单的A/B测试到全面的审核测试等来实现。

图片

测试通常分几轮进行,团队在向原型添加更多细节之前验证每个步骤。随着测试结果的出现,设计也随之发生了变化。

如果发生更改,将会进行新一轮的测试,通过这个过程,设计团队可以改进他们的工作,直到达到可用性标准。

 

8.少即是多

在创造力和创造独特事物的渴望中,很多设计师很容易无意中弄乱产品界面甚至产品本身。

功能过多的产品可能会失去焦点并削弱吸引力。具有太多元素的页面会变得充满视觉冲击,但也会给用户带来负面体验,在设计时要学会克制并优先考虑真正关键的部分。

另外手机端的屏幕空间非常小,创建一个有效的布局,想出巧妙的方法来隐藏次要元素并创建一个令人愉悦的界面需要付出很大的努力和创造力。

 

9.视觉层次

视觉层次是向用户传达产品中元素重要性的方式。良好的层次结构有助于用户视线在界面上移动,并立即了解最重要的内容以及这些内容与其他部分的关系。

视觉层次结构与布局设计紧密相连,帮助用户消化所接触到的信息。

图片

创建层次结构从概念的草图开始,一直持续到完成设计。例如发送按钮通常会用绿色而是不红色,而次要按钮会显示为灰色或与背景混合,并显示“撤消”或“返回”。

 

10.了解用户的心智模型

为用户创建心智模型是尝试使用同理心的一种方式,是帮助设计师从用户的角度看待问题的工具。

图片

做到准确就是直观的产品,用户不需要投入精力就可以使用它,而错误的思维模型会导致一些问题,例如界面混乱、高昂的交互成本。

为了匹配用户的心智模型,可以采用多种不同类型的研究方法,常见的方法包括卡片分类、决策树、对用户行为的密切观察,或者使用大量的数据来建立关键用户的心理模型。

 

11.设计中的讲故事

讲故事的方式更加直观,利用图像、视频、动画和文本等元素让整个页面与用户对话。用户体验设计中的视觉叙事是为了唤起用户的情感,给用户留下持久的印象。

图片

想出一种可视化的方式来传达复杂的内容具有挑战性,但同时也是有益的,可以更好地接近用户并将其作为提高产品可学习性的方法。

 

12.不要直接跳到高保真原型上

高保真原型是设计项目的最终目标,但是直接使用原型软件不断添加各种页面细节是错误的操作。

图片

避免直接出高保真的主要原因是因为这样做的成本会更高。在没有任何用户研究和测试的情况下,一款产品无论具有多少的细节都有可能面临不符合用户使用的情况。

 

13.可访问性测试很重要

不仅要检查关键用户是否可以流畅地使用产品,还应该检查其他所有用户例如少数群体等是否都能够正常使用产品。

图片

事实上,残疾人和其他用户一样需要数字产品,但很多产品在设计时并没有考虑到这些群体,但这也提供了一个机会,为所有用户提供一个可以依赖的好产品。

 

14.熟悉并在用户体验设计中使用

我们知道为用户提供一致的设计有助于克服学习曲线,同时为用户提供熟悉的东西也有助于缩短学习曲线。

例如,大多数用户都会立即识别某些UI组件(汉堡菜单/单选按钮),这意味着他们会本能地知道这些组件代表什么意思或者如何操作。

图片

使用用户已经熟悉的东西并不一定会让产品的独特性消失,有经验的设计师会利用这种熟悉性来来创造一些独特的设计,同时也是直观的,不需要太多努力就可以使用。

设计一个完全不依赖熟悉度的产品可能是具有风险的行为,因为它很容易让那些不熟悉产品的用户超负荷,形成巨大的学习曲线,增加用户负担。

 

15.了解交付成果的力量

可交付成果是可以在整个团队中交付的内容,包括用户画像、心智模型、用户旅程以及线框图和原型等,是一种有形和具体的表现。

可交付成果是用户体验设计原则,可以帮助设计团队和其他利益相关者理解和交流概念。

图片

▲ 用户画像可以捕捉理想用户,并提供可以相关联的真实面孔,是一种指导设计的工具。用户旅程图帮助设计师了解用户完成任务需要的具体步骤,有助于确保这些步骤确实可以轻松执行,并且整个过程很流畅。

这些交付成果服务于关键功能,设计师需要在整个项目中都依赖它们,不断转换为用户可以与之交互的真实有形的设计。

 

16.专业的原型设计工具

用户体验设计的过程不是线性的,而是一个循环。无论创建什么样的产品,都需要专业的原型工具,将基本框架放在一起,然后添加可能需要的所有细节。

图片

从逻辑上讲,设计团队的具体需求会因团队而异,但一些关键功能例如团队协作、需求管理、交互设计和开发移交等,对于大多数团队来说是必要的。

 

17.精心管理产品需求

一切都从收集需求开始,然后慢慢创建关键列表。虽然简单地列出一个列表听起来很容易,但随着项目的进展,要保持列表的条理性确实是一个挑战。

图片

除了创建需求和检查需求之外,还有一个问题就是调整需求,需要从设计、技术和业务各个方面来处理各种需求,还要确保这些需求之间没有相互矛盾。

 

18.了解移动和网页产品之间的差异

网页端和移动端产品最明显的区别是屏幕尺寸,这意味着所有的视觉层次结构和信息架构都将从Web到App发生变化。

图片

移动端产品会有更多影响设计决策的因素,例如设备的操作系统、使用产品的环境等。了解移动端产品在导航设计、用户流程等关键方面的差异是至关重要的用户体验设计原则。

 

19.利用UX设计模式

几乎所有的产品都专注于设计模式,它们可靠、易于查找并通过减少设计时间来为项目增加实用性。

图片

▲ 当用户在谷歌搜索中输入的内容有问题时,谷歌会提供一个相关的搜索提示,辅助用户进行精确地搜索,解决用户使用不同方式在搜索栏中传达他们正在寻找的内容的问题。

 

20.使用合适的工具才能有效

拥有单一的内容来源可以为团队带来清晰性和高效性,如果线框和原型分散在多个渠道中,这种内容的集合就会变得很难达成。

图片

通过合适高效的工具能够避免产品在到达终点时遇到各种各样的可用性问题,防止产品细节没有表现出来或者被忽略。

 

最后

通过这份用户体验设计原则的合集希望能够让你对这个领域有一个大致的了解。

没有人知道用户体验设计在未来会引领我们走向哪里,不过我们可以确定,无论它带给我们什么,肯定都会很有趣

 

内容参考:justinmind.com/ux-design/principles


原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网》掌握这20条用户体验设计原则,助力设计成长!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小

助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

                                                            微信图片_20210513163802.png

 

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

 

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

让设计更有价值——设计流程指南

seo达人


随着设计团队规模扩大,人数快速增多,但每个人都带着自己以往工作经验和习惯,一些典型问题也相应显现:上手就干、主观设计、缺少方法、忽视跟进等等。所以我们撰写了「UI标准设计流程」,希望能为UI设计师提供对于设计支撑思路的共识,让设计更有价值。

 

图片

从接到需求到上线后跟踪,我们把流程拆分为五个节点:需求分析-交互设计-视觉设计-视觉规范-方案验证。

当然,在设计流程中我们只表达不同流程中的行为目的及标准,相关方法论我们会配套一份「设计师成长指南」,不久之后再与大家分享。

 

1.需求分析

我们在接到一个设计需求后,要做的第一步是进行分析并确定设计目标。

我们需要:了解背景、用户和竞品,能准确理解产品定位和需求目标,评估需求的合理性和准确性,并提供相应策略;甚至洞见机会点,通过设计对业务产生正向价值。

图片

 

背景分析

目的:背景分析是为了让我们在刚接触产品的时候,去洞察表面背后的东西。通过背景分析,能帮助我们快速切入产品,并根据已有信息去制定准确并具有说服力的设计策略。

行为:我们需要了解:产品的定位及价值是什么,它的现状如何,是否有既往的数据沉淀或经验总结。

 

用户分析

目的:对UI设计师而言,用户分析是为了让我们更好地了解产品,并拥有对整个产品的宏观思路。通过用户分析,能为我们的视觉设计提供方向,并为我们做出决策提供实际落点。

行为:我们通常需要了解:用户画像、用户需求、用户行为、用户路径等。

 

竞品分析

目的:竞品分析能够让我们获得行业内的优秀经验,减少我们的思维盲区,同时还为我们提供了一份可被量化的标准,使我们可以基于竞品去反推现有产品。

行为:UI设计师可以从竞品定位、主要功能、迭代动向、产品结构、页面布局、交互动效、视觉设计、优劣势对比这几个维度去进行竞品分析。

 

需求评估

目的:在了解以上的通用信息后,我们要对需求进行评估,去决定采用哪种方式、制定什么样的策略。

行为:我们接到的需求,通常可以分为三种:全新产品类、产品改版类、功能新增或优化类。

对不同类型的需求,我们都可以用5个问题去评估:

  1. 是否可被证伪?
  2. 目标是否明确?
  3. 投产比如何?
  4. 是否有更优解法?
  5. 是否有可预见风险?

基于以上问题,我们可以去协同交互、产品做相应调整和策略制定,甚至发现新的机会点并进行推动。

 

目标对齐

目的:设计为目标服务,所以我们要在设计开始前与需求方对齐目标,这也能为设计价值的佐证提供标准。

行为:设计目标通常有3种,我们可以从中去对需求目标转译:提升数据型、解决问题型、体验优化型、创新项目型。针对不同目标我们可以去制定不同的设计策略,并对策略的落地进行数据监测与分析,进行方案校正。

 

2.交互设计

在产品流程中,交互设计的作用在于,通过信息架构的组织去产出体验流畅的界面原型。

我们需要:充分理解整体流程与交互原型,基于设计原则去发现可优化的部分;同时能平衡产品、设计与开发的效益最大化,并驱动产品的体验提升。

图片

 

设计原则

目的:设计原则能为我们提供一个行之有效的设计向导或提示。熟知各类设计原则,能使我们在设计支撑时,拥有更丰厚的专业度和更敏锐的洞察力。

行为:我们需要去了解市面常见的Guildline如iOS、Material、UWP等,以及一些常用原则如菲兹定律、格式塔理论等等。

 

流程梳理

目的:流程的再梳理,可以帮助我们在视觉设计前,快速地理解和诊断流程逻辑。

行为:在流程再梳理的过程中,我们需要注意以下4个问题:

  1. 功能是否完整?
  2. 链路是否流畅?
  3. 步骤是否冗余?
  4. 是否易于理解?

基于以上问题,我们可以用自身的专业储备去推动流程的优化。

 

原型优化

目的:交互原型是需求内容的外在表现,通过原型优化,可以最大程度地避免视觉评审后的设计返工。

行为:在对交互原型优化的过程中,我们要重点注意以下4个问题:

  1. 架构是否符合目标
  2. 层级是否足够精简
  3. 信息是否传达准确
  4. 状态是否有所缺失

在视觉设计时,我们基于以上四点可以去同步优化原型,并根据经验去寻求体验和成本的最佳平衡。

 

3.视觉设计

视觉设计是产品与用户直接连接的媒介,优质而恰当的视觉设计,可以极大地提升产品吸引力。

我们需要:基于分析确定视觉方向、定义设计语言,输出完整且高质量的视觉页面。

图片

 

设计情绪板

目的:设计情绪板可以为设计语言的构建提供可视化参考,也有助于我们前期快速与各方达成共识。

行为:我们通常基于分析,去确定设计关键词,并基于关键词去衍生映射物、建立图形情绪板,最终分析和确定设计方向。

 

设计语言

目的:设计语言是情绪板的具象表达,它将构建起用户对产品的视觉感知。

行为:在明确设计方向后,我们就要基于情绪版去定义设计语言,主要包括主视觉、色彩、字体、图标、图形、动效等。

 

典型页面

目的:典型页面是设计语言在场景中直观体现,这有助于我们制定设计规范,并为其他页面的设计提供参考。

行为:我们通常需要设计首页、频道页或其他具有示例作用的典型页面,在设计的过程中我们还需要同步去规范间距、卡片、视觉变量、图形应用等,以此为视觉规范夯实基础。

 

4.设计系统

在设计典型页面的同时,其背后其实已经对应了一套设计规范和组件,而我们基于此去整理并沉淀出设计系统,能极大地提升统一性和迭代效率。

我们需要:制定完整、清晰的基础规范,沉淀图标库、组件库等,并持续优化和更新,形成可持续沿用的产品设计系统。

图片

 

基础规范

目的:基础规范是设计语言的沉淀,也是视觉变量的基本粒子。它可以保证页面的基本统一,同时我们可以基于不同业务快速地拓展其他主题。

行为:在我司,一份基础规范的构成包括:色彩、字体、间距、布局、断点、层级、圆角、透明度、阴影。

 

图标库

目的:图标规范可以帮助其他成员快速、准确地进行图标拓展,而沉淀的图标库也可以极大地提升产出效率。

行为:基于具体需要,我们可以设定多套图标风格,规范其栅格、笔画、圆角等,并将已有的图标资产进行沉淀。同时我们也会去规范一些常见图形并沉淀,如空态插画、悬浮入口、徽章、商品等。

 

组件库 

目的:组件库是对常用控件进行设计规范、开发、封装的可被复用的集合,组件分而治之,可被自由组合,能保证设计品质、统一用户体验、提升产研效率。

行为:在我司,一套组件库通常包括:通用、布局、导航、数据录入、数据展示、反馈、其它。除通用原子组件外,我们也会对常用模块进行梳理,沉淀业务组件库。

 

5.落地跟踪

在设计完成之后,我们需要对设计方案进行评审、验收及数据跟踪,以保证设计方案的落地并跟进调整。

我们需要:运用合理策略以保证设计方案的高质量落地,对方案上线后的用户反馈进行有效跟进,运用多种方式验证目标,迭代产品。

图片

 

设计评审

目的:设计评审通常包含了交互与视觉,其目的在于审查设计方案中的可用性问题。

行为:在我司,视觉评审即终评,我们需要在视觉稿中标注出所有交互逻辑,并对潜在问题有预判,能与各方确认目标、分桶与数据埋点;同时我们要对开发实现有预判,能与研发确认实现细节。

 

设计验收

目的:设计验收是为了确保需求满足、体验流畅,并且设计细节能高质量落地。

行为:视觉设计师主要验收视觉细节的还原度,并且要在一定程度上对开发的适配、样式解法有预知,减少二次验收。同时需要保证验收有沉淀,利于后续跟进。

 

数据验证 

目的:数据验证除了分析分桶之外,也可以分析产品上线后的一些问题、并在迭代中修改。同时我们也可以总结设计经验、提升未来设计的准确率。

行为:我们通常基于设计策略,去对数据进行筛选与分析,以此衡量设计对于目标达成的增益度。对于有问题的,能反思并且修改;对于结果好的,能总结并且沉淀。

 

设计复盘 

目的:设计复盘以结果为导向,我们可以通过复盘对设计策略的价值进行总结验证,并去发现、优化流程中的不足之处。

行为:我们需要陈述设计目标和策略,对设计价值进行验证,并能总结过程中的亮点与不足,制定后续计划、沉淀相关经验。

 

以上是酷家乐UED「UI标准设计流程」的所有内容,虽然它主要针对UI设计师而设,但相信它也能帮助到交互、体验设计师们去拨开乱麻,更好地为业务目标服务。

后续我们会与大家继续分享与之配套的「设计师成长指南」,它将基于Design Thinking为大家带来更全面的专业知识帮助。

同时我们也会沉淀基于该流程的几个典型案例,包括C端、B端、以及工具端,会在未来陆续与大家分享。

 

原文链接:酷家乐用户体验设计(公众号)(公众号)

作者:不戳

转载请注明:学UI网》让设计更有价值——设计流程指南

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小

助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

                                                            微信图片_20210513163802.png

 

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

 

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

深度解析蚂蚁Ant Design的设计原则

雪涛



『 Ant Design是什么 』


众所周知蚂蚁集团的B端产品是一个庞大的系统,数量多且功能复杂,而且变动频繁,常常需要设计师和开发人员能快速做出工作上的配合。同时这类产品中有存在很多类似的页面以及组件,根据原子设计理论可以得到一些稳定且高复用性的内容。

随着这两年B端产品的逐渐白热化,越来越多的用户对更好的用户体验有了进一步的要求。带着这样的一个终极目标,蚂蚁集团体经过大量项目实践和总结,逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。通过组件化设计规范,降低冗余的生产成本,让设计者专注于更好的用户体验。



『 Ant Design设计原则是什么 』


针对B端产品反复出现的一些设计体验等问题, Ant Design 给出标准的设计原则,实现跨应用交互一致性的有效融合。依照这些原则使用 Ant Design 组件设计界面,既减少了不必要的认知成本,又能够提升设计的效率。考虑到需要适应各种定制化的业务场景,设计原则具有一定的灵活性,万变不离其宗,通过了解设计原则的构建逻辑,高效组织信息、帮助建立用户与界面的互动等原则性要求,可以衍生出更具场景特性的设计方案。


① Ant Design设计原则的由来

可以说 Ant design的设计规范摄取了《web界面设计》和《写给大家看的设计书》两本书中的精华原则,并做了理论之外最佳的设计实践。其十大设计原则反过来是对书本理论的补充,我在看书的过程结合『Ant Design 』能更好地理解那些原则的释义。每一个原则都用了大量通俗易懂的案例来补充说明,这也是为什么国内的企业一直以来都很喜欢使用这套组件的原因。


② Ant Design设计原则的适用范围

1. 我们先说说『Ant Design 』的适用范围:

稍微了解 Ant Design 的小伙伴都知道,本系统是针对B端后台系统,承载媒介是PC端的浏览器。使用的人员主要包括:用户体验设计师、交互设计师、UI设计师、前端程序员等。

2. 再说说 『 Ant Design 设计原则 』的适用范围:

顾名思义『 设计原则 』主要是针对设计师在创作页面时依照的标准。虽然『 Ant Design的设计原则 』是 Ant Design 系统的一部分,但是前文已经提到,此原则是摄取了《web界面设计》和《写给大家看的设计书》两本书中的精华,所以设计师可以把这些原则运用到任何的设计领域,并不要局限于企业后台系统的PC端产品。

为了方便大家理解,讲一个小故事。故事来自于《写给大家看的设计书》,作者有一年圣诞节收到一份礼物——一本关于植物的百科全书。作者翻阅之后,发现其中有一颗叫约书亚树的树,造型奇特,自己从未见过。于是决定出门转转,然而发现外面到处都是这种树。故事到这里就完了。

可能大家会想,这个故事要讲一个什么道理呢?简单来说就是,当你手中有个锤子,满世界都是钉子。当你了解到下面要讲的十个设计原则后,你会发现它们处处都适用。


③ Ant Design设计原则的内容

十大原则如下:

  • 亲密原则(Proximity)

  • 对齐原则 (Alignment)

  • 对比原则 (Contrast)

  • 重复原则 (Repetition)

  • 直截了当 (Make it Direct)

  • 简化交互 (Keep it Lightweight)

  • 足不出户 (Stay on the Page)

  • 提供邀请 (Provide Invitation)

  • 即时反应 (React Immediately)

  • 巧用过渡 (Use Transition)



『 如何运用Ant Design的设计原则 』


对于一个初级设计师而言,想要了解UI用户体验等知识,学习 Ant Design 的设计原则算是比较快能上道的,因为 Ant Design 是吸取了很多前辈的精华,提炼而成的系统。打个简单的比喻,对于设计师而言 Ant Design 就是设计师学习『 视觉规范 』,掌握『 设计原则 』最好的字典。

接下来我就给大家说说我是如何快速理解 Ant Design 的这10条设计原则并运用到工作当中。

Ant Design 定义了10条设计原则,根据『 席克定律 』选项太多不易记忆,于是我找到了这些设计原则的共通性,将其归为4类,也就是大家只需记住四类设计原则,在工作中适当延展即可。


① 视觉层级清晰

包含 Ant Design 的设计原则有:『 亲密原则 』『 对齐原则 』『 重复原则 』『 对比原则 』。

「视觉层级清晰」的重要性体现在 交互前 用户看到的内容结构是清晰明确的 。一个层级混乱的界面,任何信息的传达都是无效的。所以保证清晰的排版布局是人机交互前的基础。


1. 亲密

如果信息之间关联性越高,它们之间的距离就应该越接近,也越像一个视觉单元;反之,它们的距离就应该越远,也越像多个视觉单元。亲密性的根本目的是实现组织性,让用户对页面结构和信息层次一目了然。


1.1 纵向间距关系

  • 纵向间距:在 Ant Design 中,通过「小号间距」「中号间距」「大号间距」这三种规格来划分信息层次结构。这三种规格分别为:8px(小号间距)、16px(中号间距)、24px(大号间距)。


  • 增加元素:通过增加「分割线」来拉开层次。在这三种规格不适用的情况下,可以通过加减「基础间距」的倍数,或者增加元素来拉开信息层次。注:在 Ant Design 中,y = 8 + 8 * n。其中,n >= 0,y 是纵向间距,8 是「基础间距」。


1.2 横向间距关系

  • 组合排布:为了适用不同尺寸的屏幕,在横向采用栅格布局来排布组件,从而保证布局的灵活性。(注:栅格是另外一个模块的内容,这里不赘述。)


  • 复选框内:在一个组件内部,元素的横向间距也应该有所不同。


2. 对齐

正如「格式塔学派」中的连续律(Law of Continuity)所描述的,人类的视觉系统往往倾向于将看到对象的直线继续成为直线,曲线继续成为曲线。在界面设计中,将元素进行对齐,既符合用户的认知特性,也能引导视觉流向,让用户更流畅地接收信息。

格式塔学派(德语:Gestalttheorie):是心理学重要流派之一,兴起于 20 世纪初的德国,又称为完形心理学;主张人脑的运作原理是整体的,「整体不同于其部件的总和」。——摘自「维基百科」


2.1 文案类对齐

如果页面的字段或段落较短、较散时,需要确定一个统一的视觉起点。


  • 推荐使用:标题和正文左对齐,使用了一个视觉起点。

  • 不推荐使用:标题和正文使用了两个视觉起点,不推荐该种对齐方式,除非刻意强调两者区别。


2.2 表单类对齐

  • 冒号对齐:冒号对齐(右对齐)能让内容锁定在一定范围内,让用户眼球顺着冒号的视觉流,就能找到所有填写项,从而提高填写效率。


2.3 数字类对齐

为了快速对比数值大小,建议所有数值取相同有效位数,并且右对齐。


3. 对比

对比是增加视觉效果最有效方法之一,同时也能在不同元素之间建立一种有组织的层次结构,让用户快速识别关键信息。

注:要实现有效的对比,对比就必须强烈,切不可畏畏缩缩。


3.1 主次关系对比

为了让用户能在操作上(类似表单、弹出框等场景)快速做出判断, 来突出其中一项相对更重要或者更高频的操作。

注意:突出的方法,不局限于强化重点项,也可以是弱化其他项。


  • 需要区分主次场景:


  • 不需要区分主次的场景:「通过」和「驳回」都使用次按钮,系统保持中立。在一些需要用户慎重决策的场景中,系统应该保持中立,不能替用户或者诱导用户做出判断。


3.2 总分关系对比

  • 总分关系:通过调整排版、字体、大小等方式来突出层次感,区分总分关系,使得页面更具张力和节奏感。


3.3 状态关系对比

常见类型有「静态对比」、「动态对比」。


  • 静态对比示例:用不同颜色的点,来表明不同状态。


  • 动态对比:鼠标悬停时,该项和其他项呈现出明显不同的视觉效果,响应用户操作。通过改变颜色、增加辅助形状等方法来实现状态关系的对比,以便用户更好的区分信息。


4.重复

相同的元素在整个界面中不断重复,不仅可以有效降低用户的学习成本,也可以帮助用户识别出这些元素之间的关联性。


4.1 重复元素

重复元素可以是一条粗线、一种线框,某种相同的颜色、设计要素、设计风格,某种格式、空间关系等。


  • 线框重复:


  • 设计要素重复:


  • 文案格式重复:


② 交互操作高效

包含 Ant Design 的设计原则有:『 直截了当 』『 足不出户 』『 简化交互 』『 即时反应 』。

「交互操作高效」的重要性体现在 交互时 用户操作流畅、简单、用时短。如果仅仅只是解决高效的问题,却忽略用户能否理解流程如何操作,那这样的解决方案也是徒然。有的时候并不是解决实际时间的长短,而是用户的心理时间是否太长的问题,就像我们打游戏往往会觉得时间过的很快,但是在等待页面加载时却不耐烦。


1. 减少打断

能在这个页面解决的问题,就不要去其它页面解决,因为任何页面刷新和跳转都会引起变化盲视(Change Blindness),导致用户心流(Flow)被打断。频繁的页面刷新和跳转,就像在看戏时,演员说完一行台词就安排一次谢幕一样。

变化盲视(Change Blindness):指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物,眼球运动、地点的变化,或者是缺乏注意力等。——摘自《维基百科》

心流(Flow):也有别名以化境 (Zone) 表示,亦有人翻译为神驰状态,定义是一种将个人精神力完全投注在某种活动上的感觉;心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》


  • 气泡提示:对于操作的反馈是必要的,下文会提到,但是为了减少打断用户,轻量级的反馈气泡提示即可。


  • 输入覆盖层:鼠标「点击」图标触发;鼠标「点击」悬浮层以外的其他区块后,直接保存输入结果并退出。不用弹窗或跳转的形式编辑,只需要在触发图标附近弹出浮层即可,这样避免用户视动线的混乱,减少打断用户操作的心流。

2.缩短步骤

正如 Alan Cooper 所言:「需要在哪里输出,就要允许在哪里输入」。这就是直接操作的原理。eg:不要为了编辑内容而打开另一个页面,应该直接在上下文中实现编辑。


常规的编辑模式,界面都会跳出一个弹窗或者是一个页面跳转,无形之中用户走了更多的流程路径,如果能在当前页面就把编辑问题解决掉那就符合了 Ant Design 『 足不出户 』的设计原则。

  • 文字链/图标编辑:

状态一:在可编辑行附近出现文字链/图标;

状态二:鼠标点击「编辑」后,出现「输入框」、「确定」、「取消」表单元素,同时光标定位在「输入框」中。


  • 多字段行内编辑:编辑模式在不破坏整体性的前提下,可扩大空间,以便放下「输入框」等表单元素;其中,在 Table 中进行编辑模式切换时,需要保证每列的不跳动。


  • 拖放图片/文件:在早前很多产品在上传功能上,都是跳出弹窗再选择文件上传,现在基本都可以实现拖拽上传了。这样的设计大大提高了用户使用上传功能的效率。


  • 模糊搜索:系统根据用户所查询的关键词,智能匹配可能的结果。


  • 定时自动更新:新增的列表项「高亮」,持续几秒后恢复正常。不需要用户手动刷新,减少不冗余的操作。


3.避免回忆

人们在思考的时候,是需要依靠大脑神经元之间相互传递信号,而回忆是需要调用更多的的神经元传递信号,简单地说就是非常费脑子。


  • 搜索历史:搜索历史的功能,可以减少用户的回忆,使得整个体验更加轻松愉悦。


4.信息降噪

根据费茨法则(Fitts's Law)所描述的,如果用户鼠标移动距离越少、对象相对目标越大,那么用户越容易操作。通过运用上下文工具(即:放在内容中的操作工具),使内容和操作融合,从而简化交互,起到信息降噪的作用。

费茨法则 :到达目标的时间是到达目标的距离与目标大小的函数,具体:。其中:1.设备当前位置和目标位置的距离(D);2.目标的大小(W)。距离越长,所用时间越长;目标越大,所用时间越短。


  • 列表嵌入层:将列表为多层级时,隐藏弱层级列表内容,可以让用户更加直观地看到重要信息。当我在聚焦某一个列表模块的内容,鼠标悬浮即可展开。


  • 标签页:标签也换可以将信息内容进行分类,让用户更易理解。


  • 渐进式展现:用户在填写表单时,会根据当前录入的数据,展现下一项需要填写的内容,这样的展现方式可以屏蔽掉无关紧要的内容。


  • 悬停即现工具:鼠标悬停时,出现操作项。这样将不重要信息或者操作隐藏起来,不会干扰到用户浏览其他重要内容。


③ 系统反馈即时


包含 Ant Design 的设计原则有:『 简化交互 』『 巧用过渡 』『 即时反应 』。

「系统反馈及时」的重要性体现在 交互之后 立即给出反馈。就像「牛顿第三定律」所描述作用力和反作用一样,用户进行了操作或者内部数据发生了变化,系统就应该立即有一个对应的反馈,同时输入量级越大、重要性越高,那么反馈量级越大、重要性越高。


1.实时反馈

虽然反馈太多(准确的说,错误的反馈太多)是一个问题,但是反馈太少甚至没有反馈的系统,则让人感觉迟钝和笨拙,用户体验更差。

牛顿第三定律 :当两个物体互相作用时,彼此施加于对方的力,其大小相等、方向相反。——摘自《维基百科》


  • 实时预览:根据用户的输入,提供关于密码强度和有效性的实时反馈提示。


  • 文字链热区:当悬浮在 ID 所在的文字链单元格时,鼠标「指针」随即变为「手型」,单击即可跳转。


2.过渡反馈

人脑灰质(Gray Matter)会对动态的事物(eg:移动、形变、色变等)保持敏感。在界面中,适当的加入一些过渡效果,能让界面保持生动,同时也能增强用户和界面的沟通。

Adding: 新加入的信息元素应被告知如何使用,从页面转变的信息元素需被重新识别。

Receding:  与当前页无关的信息元素应采用适当方式移除。

Normal: 指那些从转场开始到结束都没有发生变化的信息元素。


  • 表格加载:网络不好或者表格数据过多,都有可能导致加载缓慢,这时有一个小动画可以缓解用户的焦虑感。


  • 富列表加载:用户在打开列表时,页面无法做到一次性加载所有的数据,同时有为了减少翻页的繁琐操作,就有了下拉自动加载的。


  • 页面加载:当用户访问的页面体量过大时,系统会通过给出倒计时或完成百分比,来缓解用户焦虑,并且给用户友好可控的感觉。


  • 滑入与滑出:可以有效构建虚拟空间。  


  • 折叠窗口:在视图切换时,有助于保持上下文,同时也能拓展虚拟空间。


  • 对象增加:在列表/表格中,新增了一个对象。


  • 对象删除:在列表/表格中,删除了一个对象。


  • 对象更改:在列表/表格中,更改了一个对象。

    • 状态一:用户更改了「详情」中的值;

    • 状态二:用户点击「保存」后,详情所在的网格出现「黄底」,表明该对象发生了更改;

    • 状态三:底色持续几秒后,恢复正常。


  • 对象呼出:点击页面中元素,呼出一个新对象。


3.结果反馈

用户常常会疑惑自己的操作是否成功了,哪怕是失败了也是需要系统反馈,这样才能安心进行下一步的操作。


  • 页面反馈结果:


  • 气泡反馈结果:


④ 用户自由可控


包含 Ant Design 的设计原则有:『 提供邀请 』『 足不出户 』『 即时反应 』。

「用户自由可控」的重要性体现在 交互前对下一步操作的预判;交互时 不论操作后的结果多严重都要允许用户自主决策;以及交互后 能否对自己的操作结果反悔。


1.未来预判

很多富交互模式(eg:「拖放」、「行内编辑」、「上下文工具」)都有一个共同问题,就是缺少易发现性。如果用户在操作前就能得到下一个交互层次的提醒和暗示,以表明在下一个界面可以做什么。  这样人机交互的过程往往更加自然、顺畅。



  • 点击刷新:对于设计师而言,最常见的例子要属花瓣了,我们时长会沉浸在我们浏览的瀑布流卡片中,如果系统强行刷新当前页面,用户很有可能迷失。邀请用户主动更新,既不会错过新的消息,又不会导致我们的心流被打断。


  • 未完成邀请:用户在当前页面无法完成登录操作,为了减少用户迷茫的焦虑感,系统告知用户点击“更改”链接,可以去向何处。


  • 悬停邀请:鼠标「悬停」时,出现「选择此模板」的按钮。


2.自主决策

虽然系统中缺少不了一些危险操作或者不可逆操作(eg:删除、重置、重装系统等),但是仍然要用户自主决定是否继续,我们能做的就是让用户再三确认。


  • 弹窗提示:虽然弹窗打断用户心流,但是对于重要的操作,这样是最保险的方式。


  • 删除知识库提示:是钉钉中,删除「知识库」这一重要内容,是不可逆的,系统需要用户谨慎操作。


3.准许反悔

如果说「自主决策」中提到的案例都是不可逆的,那「准许反悔」的后果严重性会弱一些,系统对用户的操作没有那么强的阻断性,所以要准许用户反悔的,


  • 删除撤销:用户点击「删除」后,直接操作;出现 Message 告知用户操作成功,并提供用户「撤销」的按钮;用户进行下一个操作或者 1 分钟内不进行任何操作, Message 消失,用户无法再「撤销」。



『 Ant Design的优点与缺点 』


① 优点


1.助初创团队快速产品快速上线

Ant Design在"幸福者示例中"写到“Ant Design 无法保证业务产品能否成功,但是能帮助业务产品『正确的成功』或者『正确的失败』。”

如果团队有一个产品idea,我们需要通过最少的资源开发此产品并投入到市场中,通过听取用户反馈,验证idea是否可行,快速迭代最终做出更完善的产品。但理想是美好的,但现实是骨感的,在前期研发的过程中通常会出现两个情况。创业团队没有足够的设计资源和时间,前几个版本的产品通常用户体验非常差,这种情况体验差有可能让用户放弃这款产品。创业团队没有好的方法论和协作模式,需要磨合,设计和开发进度一延再延,结果错过了风口,市场被竞品抢占,还没上线就倒闭了。

Ant Design提供了一套完整的界面实现方案,即有代码框架能直接拿来提高开发效率,每个界面组件都经过蚂蚁金服多个项目的考验,具备优秀的用户体验。用Ant Design来做0-1,能快速发布用户体验优秀的产品,听取用户反馈,快速迭代。


当然,创业是九死一生,市场和用户口味都充满了不确定性,谁也没有能力保证产品是否成功,但是只要你能高效的产出质量优秀的产品,不断试错,说不定以后就能成功。


2.减少设计和开发的不确定性。

用 Ant Design 就能高效的产出高质量的产品,减少设计和开发的不确定性。

因为我们公司就使用了 Ant Design 的系统,所以时常会与前端小伙伴沟通,以下都是他们在使用过程的感想。

Ant Design 提供的大量功能比较全面且UI风格统一的组件,能帮助开发者快速搭建通用场景下的应用界面。这大概是得益于蚂蚁金服业务线上极为广泛的应用场景,驱动了 Ant Design 团队通过对使用情况的观察汇总,整理出来了这么一个组件库。他们的经验积累如此之丰富,足以让这个库支持大部分其他前端开发者的需要。

其设计团队给出的设计规范相当详细且经得起推敲,令许多其他团队获益匪浅。


3.节省设计与开发的人力成本

我见过太多宣称自己在乎用户体验的公司,给用户的产品质量确实比较高,但是自己员工内部使用的系统和管理一团糟。种种不便让员工经常加班,情绪消极,这样的团队抄抄竞品达到行业标准体验还行。要想突破是不可能了,因为创新需要员工有充沛的精力和主动性,天天加班谁还有这精神。

用 Ant Design 系统提供的设计工具和组件框架能给设计师和开发者减少负担,能用更少的时间呈现给用户体验好的产品。这样带来的好处不仅仅是设计师和开发者觉得少加班成就感高而幸福,他们重新恢复活力和激情能做出更有创意和竞争力的产品,给公司带来更大的收益,这是一个三赢的结局。


② 缺点


1.无法根据业务场景定制组件,灵活度不够

一定有小伙伴会有这样的疑问,目前市面上有这么多的第三方设计规范,例如 Ant Design ,Element UI,有必要自己造轮子做一遍吗?

这里要视情况而定,如果公司产品是初创期,而且研发人手不足,那确实没有必要自己造轮子。反之在资源足够的情况下,是有必要设计团队重新做一套属于自己产品的规范组件库的,因为B端自身的业务性决定了市场上没有万能的设计规范,那些设计规范的组件并不能100%满足我们产品的需求。另外一方面使用封装好的第三方设计规范,在此基础上进行修改,效率很低,适配的复杂度和重新开发相差无几。


2.组件细节深入度不够,只能“将就”使用

对于比较普通的设计解决方案是可以的,但是 Ant Design 包含的组件细节仍有不足,毕竟 Ant Design 没必要投入过多的精力在组件细节深入度上,规范定义的越是精细,对于产品组件而言可延展性就越差,限制也会越多。而 Ant Design 只需要解决80%企业,80%的通用问题即可。


3.竞品同质化严重,视觉上无法脱颖而出

当市场大部分产品都在使用 Ant Design 设计系统时,产品的同质化就会很严重。为了避免这种情况发生,我们就有必要从设计语言、设计原则、设计组件三个部分开始,设计自己的规范。那些大厂的成熟的组件库该如何用呢?我认为应该把它当成一个字典,有不会的地方,可以去参考人家的成熟的解决方案。



『 总结 』


这篇文章简单的介绍了一下 Ant Design 是什么、 Ant Design 的设计原则是什么以及 Ant Design 的优缺点。当然也重点总结了一下,设计师如何运用 Ant Design 的设计原则,可以将这些原则分为四类:视觉层级清晰、交互操作高效、系统反馈及时、用户自由可控。希望大家通过这篇文章能够更深一步了解 Ant Design 的设计原则,并将其灵活运用到设计工作中。



参考文献:

《Ant Design 官网》

《设计心理学 1 》 [美] 唐纳德·A·诺曼 

《写给大家看的设计书》 美国罗宾·威廉姆斯(RobinWilliams)

《web界面设计》 Bill Scott    Theresa Neil

《维基百科》

《如何评价 Ant Design 这个项目(一个设计语言)?》 龙爪槐守望者



文章来源:站酷   作者:菜菜不甜 

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

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


JCD 驱动 - 复杂系统设计应对之道

雪涛

摘要

面对企业级产品,由于系统复杂度和业务领域的专业壁垒,用户、产品、业务、技术的理解和分析难度都远远高于C 端。特别是进入业务深水区,技术术语层出不穷,角色链路错综交织,场景越来越复杂,在理解和分析业务上设计师需要耗费的精力越来越多,设计师如何高效且深入的分析业务,直接影响到设计解决问题的深入度。基于蚂蚁金服CTO 线的业务土壤,我们不断尝试打磨,探索出以JCD 为核心的企业级产品设计思维,助力设计师在深耕业务上有章可循,有方法可用。



复杂系统的特点

做企业级产品 3 年多,刚从 C 端业务转过来时,最大感受是对业务理解起来很艰难。随着经验的增加,对 0 到 1 产品驾驭起来轻车熟路,可到业务深水区,还是感觉痛苦。技术术语层出不穷,用户角色多,一个用户身兼数个角色,系统之间的关联关系也很复杂,随着业务的深入设计师会感觉对产品逐渐失去掌控力。一个简单的芝麻信用分,需要 20-30 个中后台产品和各种角色一起协同支撑。然而复杂是守恒的,系统复杂性的总量是一个衡量,当前台的呈现更简单时,隐藏在幕后的复杂性就增加了。




我们面临系统的复杂性表现在三个方面:

  • 多角色,重协同。

  • 链路长、错综交杂。

  • 技术术语多,业务难理解。



但企业级产品会有一个主线,是从「事情」的角度出发,关注一件又一件事情被完成。企业场景下我们再把事情描述的具体一些,就是一个又一个的 Job 。设计师要做的就是通过设计,包括参与的角色、使用的工具以及协作方式等,让 Job 被高效完成。



JCD 设计思维应对复杂系统

我们先对比一下,从「用户」视角和从「Job」视角出发,关注的维度有哪些差异呢?从用户视角出发我们需要关注用户的个人痛点、情绪、兴趣、人种志(年龄、性别、收入)等信息,会更关注人,核心是为了满足用户的需求。在Job 视角下,需要关注 Job 的目的、参与角色、协作方式、工具等信息,而且 Job 对角色是有要求的,比如航空公司飞行员,按岗位要求,他需要不断提升自己业务能力,每年要去复训两次,学习新的技能和知识来满足岗位对飞行员这个角色的要求。



基于我们的业务土壤,以及出发视角,我们探索出一套适合企业级产品的设计思维,JCD(Job - Centered Design )以 Job 为中心,设计完成 Job 所需要的一切,包括角色、工具、协作关系等。以 Job 被高效完成为决策依据的设计思维。它是一套适用于企业级产品设计的发现问题、解决问题的方法论。



在 JCD 设计思维下,将设计流程分为四个阶段,发现、构思、呈现、度量。每个阶段下有不同的方法、产出、资产。Ant Design 在「呈现」阶段帮设计师大大提升了效能,设计师才有更多的精力投入到「发现」阶段去更深入去理解业务和角色。接下来重点分享一下在发现阶段的两个方法,角色分析和业务分析。





JCD 方法 - 角色分析

常用的 C 端的用户画像,如下图,会关注用户人口统计学的信息,如名字、性别、年龄、所在地、家庭情况、用户的习惯、爱好等信息,这些信息在复杂的企业级产品中是不需要去关注的。




企业级产品角色画像

在JCD 的视角下,我们企业级产品的角色画像应该关注的三个维度:角色概览、工作能力、工作内容。而工作内容是最核心需要关注的信息,包括了工作的描述、工作的痛点、需求和使用的工具。




一个角色往往需要完成多个Job,描述一个Job 包含:

  • 四要素:情景、角色、活动、目标。

  • 一个句式:在什么情景下,角色需要完成什么样的活动,来达成一个目的。

举个例子,在飞行前 1.5 小时(情景),角色(飞行员)需要去查看飞机情况(活动 A )、气象情况(活动 B ),来判断能否起飞(目标)。



为了给设计提供具体的依据,我们需要进一步纵向解构Job,来构建 1 个完整 Job 场景,设计师可以阶梯式对一个 Job 进行拆分,Job 下面有多个 Activity,Activity 下面有多个 Task 组成,Task 下面有不同的 Action,到这种颗粒度可影响到设计界面中的具体元素。




看一个具体案例,如何拆解一个 Job,首先用我们的上面的四要素和句式描述。Job:飞行前 1.5 小时,飞行员需要查看飞机情况、查看气象情况,来判断能否起飞。在飞行员这个角色的 Job 里包含了两个 Activity :1. 查看飞机情况;2. 查看气象情况。查看气象情况这个 Activity 下包含了三个 Task:1.查看起飞地天气;2.查看降落地天气;3.查看备降地天气。


每个 Task 下面会有不同的 Action。除了 Job 的纵向拆解,我们还需要关注每个 Job 场景下的需求、痛点、费力度、成就感。




以 Job 场景为核心,串连角色协作关系

做好一件复杂的事情,往往需要多个角色在多个工作场景中协同配合。我们会以Job 场景为核心,梳理角色之间的协作关系,建立全局视角。比如,在飞机起飞前,机组飞行员查看飞机和飞行信息、查看起降地天气等;同时乘务组空姐们为此次飞行做相应准备工作。准备完毕,机长会通知机组和乘务组开始登机。上飞机后机组需要检查驾驶舱情况,乘务组检查客舱情况,检查完毕,会一起协同机场地勤人员安排乘客登机。完成登机后,飞行员需要联系机场管制申请起飞........ 设计师可以通过Job 场景去串联角色之间的协作关系,如下图。



以上是「角色分析」的方法,是从 Job 出发洞察角色的工作需求以及协作模式,帮助设计师构建角色协同的全局观。



JCD 方法- 业务分析

业务分析的方法是借鉴面向实体的思路帮助设计师去深入分析复杂业务。企业级产品中会有各种技术术语、复杂的数据流转、业务逻辑等,我们需要一个系统的方法来分析和理解业务,为设计提供准确有深度的信息输入。我们的用户大部分是软件工程师,这个思路可以让设计师在理解和认知上对齐用户的心理模型。我们业务分析的有三个维度:

  • 产品定义

  • 实体建模

  • 业务逻辑

通过以上三个维度,从纵向和横向去深入和全面的理解业务。




首先,产品定义。

通过沟通交流、桌面研究的方法,去了解产品和用户相关信息,熟悉相关概念和技术背景、沉淀信息资料,来收集产品的信息,具体的产出有名词库、产品画布、产品的关系图、业务结构图、产品形态图等,这里不展开详述。

其次,实体建模。

实体建模是本次分享的重点,实体建模按照面向实体的思想分析业务,围绕实体进行问题和内容抽象和分析,聚焦于产品内实体和实体间的关系,以及实体的生命周期的分析。



我们先看什么是实体,参考领域建模(此处感谢幻星给实体的定义)给实体一个定义:实体是产品中客观存在,具有唯一标识的并可以相互区分的业务载体,通常包含属性和行为。

企业级产品系统的实体,很多情况下都是熟悉的字母,陌生的单词,在设计之前设计师如何去准确、系统的去分析实体。



举个例子,现实世界中,「机票」是一个实体,在产品里,可以把「机票订单」看成一个实体。围绕着机票订单,我们梳理出它的基本属性信息,以及它具有的所有状态和对应操作,设计师可以进一步把这些状态和操作梳理出一个「机票订单」这个实体从产生到消失整个生命周期经历的过程。这些分析可以作为后续任务流程和设计细节的信息输入。



一个实体不能构成一个产品,一个系统会有很多实体存在,我们需要进一步去梳理「机票订单」与系统中其他实体的联系。在下图的案例中,机票订单与机票是聚合 n:1 关系, 一张机票订单会包含多张机票,机票订单与收支明细是关联 1:n 的关系,一张机票订单会关联到多个收支明细,比如会有支付成功、退款等明细。




最后,业务逻辑。

以上是实体建模的过程,产品定义和实体建模都是对业务内容层进行理解和梳理。但是我们的业务除了内容外,还有很多复杂的业务规则、业务流程,我们也需要进行梳理和分析,这样设计师才能对业务有全面的理解。




所以我们需要把结合实体、业务规则、业务流程,进一步梳理业务逻辑。最终会得到一张业务逻辑图,不仅能够帮助设计师洞察到业务的本质,也能帮设计理解业务的全貌。




第二个方法业务分析,是通过面向对象分析思路去深入的理解业务,为设计提供更精准,更有逻辑的依据。



总结

回顾以上三部分内容,JCD 是什么?Job - Centered Design 是以 Job 为中心的设计思维。JCD 的定义:以 Job 为中心,设计完成 Job 所需要的一切,包括角色、工具、协作关系等。以 Job 被高效完成为决策依据的设计思维。它包含了原则、流程、方法&工具、产出&资产,上面重点分享了其中两个方法「角色分析」和「业务分析」。


文章来源:站酷   作者:Ant_Design 

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

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

AI 时代的设计

雪涛

这是5月参加阿里设计周“智能与计算”分论坛后的感想小结,因为论坛大部分在讲算法和实现方式,所以在这里我就其中的AI与设计相关部分做一些深入分享。undefined

我的思路大概分为三个部分:AI时代的来临;AI如何影响设计;未来的设计何去何从。

undefined

undefined

第一部分:聊聊AI时代来临,设计的世界发生了什么变化?

undefined每个时代的设计都有不同的定义,农业和工业时代的设计更多是指设计师通过手工制作的方式阐释自己对美感和艺术的理解。

undefined到了信息时代,设计除了要考虑美感,还要考虑是否实用和好用。设计的对象开始从真实世界转向数字世界,设计思想开始考虑以用户为中心的设计;设计方向也增加了很多领域,包括都多媒体艺术、游戏设计、网页设计、移动应用设计等。

undefined在人工智能时代下,AR设计、智能硬件逐渐发展,设计的改革更多考虑的是如何将真实世界和数字世界进行融合,如何在自己产品上更好地阐释艺术、美感和实用性。

第二部分,AI如何影响设计,设计因为人工智能而产生了哪些改变呢?

结合论坛的内容,我觉得从以上五个方面产生了较为深远的影响。

人工智能帮助设计师解决在创意过程中面临的一系列问题,将重复劳动变得自动化 ,节省设计师大量的时间,减轻设计师的工作量。

undefined数据驱动自动生成,取代人工建模,减少了设计的时间成本。通过组件标准化,来构建三维几何,然后geometry格式入库,最后由渲染引擎绘制。

undefined再比如,双11期间有1.7 亿个BANNER,都来自阿里的“鹿班”AI设计系统。设计数据—机器学习、训练模型—生成设计结果并评估。如果这些工作量由人工来完成,那么设计师真的就成了“没有感情的作图机器”了。

当今社会,随着产业智能的发展,在这个变革中,挑战不单单来自技术,也来自客户对智能数字体验的极致追求。这给开发人员和设计师都提出了全新的难题,在可视化领域,通过技术和设计两个角色更紧密的捆绑,产生了让人欣喜的化学反应。

从原始数据到图表并不是直接的,它需要经过交互的分析,得到指标结果,最终以可视化图表呈现,而呈现的视觉方式是多样化的。

这就是所谓的两种数据,三层讲述

第一步是原始数据的准确转译,工具需要数据对接能力,即对现状的讲述。

第二步是分析过程,从脚本模式跨入数据驱动,让数据的分析变得可知可信。

第三部是观点数据的表达,也就是创作强化,将结论以可视化的多样形式被表达。

这是根据地图的原始数据得到的多种可视化设计方案,同一份原始数据,却得到了不同的形式表达。

因为仅仅有准确的数据结论是不够的,因为数据需要更好地被讲述和表达,如果仅仅将数据呈现给用户,那么理解难度将会大大提高,而设计是为了让产品变得更加容易使被理解和使用

第二点,体现在建筑的三维可视。

首先,在二维地图选取建模范围,通过智能化的处理,根据数据构建初始的三维地图。

然后通过数据联动,将城市建筑虚拟还原。

整个过程从数月—> 数周—> 数天,时间大大缩短,人力成本减少,释放更多的精力去进行创意工作。

建筑三维化的应用:比如车道级地图。

相比于传统地图,车道级地图导航在信息精细度、定位准确性、动态信息丰富度上有大幅提升。

undefined车道级导航能清晰显示道路上的虚实标线、自己的车行驶在哪条车道上,还能在地图上看到车身摄像头和雷达检测到的周围车辆、锥桶、防撞桶等。

当设计对象从单个产品转变到用户的经历和当前环境时,设计师不能只考虑自己的产品体验,需要从大局出发,思考每个产品之间的联动,考虑不同场景下自己的产品如何服务用户以及如何与其他产品联动。产品设计从单体变成一块需要考虑兼容上下左右外部环境的拼图。

智能化的场景的改变对设计有哪些影响呢,我们来看这张图:设计的场景从有形—>无形、静态—>动态、永恒—>瞬间的转变。体验设计的趋势从GUI到TUI(实体交互),再到Radical Atoms,场景的改变对设计的影响维度不是单一的

undefined

设计场景在AI时代不仅局限于手机,还涉及到实时场景的设计情况。

比如谷歌的实时翻译、语音翻译。输入与输出是同步进行的,这就对设计提出了新的要求。

此外,还有语音智能VUI,彻底打破了以往的交互体验,改变了人和工具之间的互动关系,反向塑造着人类的认知方式和学习行为。下面来看一个小爱5.0案例:

undefined

对话是人与人之间交换信息的普遍方式,语音交互设计涉及系统学、语言学和心理学,因此它比 GUI的交互设计更加复杂。

undefined体验设计经历了PC时代、Mobile时代,现在进入IoT体验时代。设计的解决方案与技术的发展息息相关,设计和技术互相促进带来新的体验革命,设计师一直在探讨和实践在新技术环境下的新体验设计,并基于出行、医疗、社区、政务等行业持续挖掘服务聚合模式与场景体验的创新。

在新零售的场景下,购买和支付流程发生了改变,这就需要设计师重新思考消费者的心理地图。例如无人零售、Amazon Go、支付宝IOT支付等等。下面来看一下Amazon Go的案例:

undefined

如何让用户使用更便捷、体验更顺畅;要向用户提供什么样的服务,如何让用户注意到我们的产品,如何向他们传递企业的服务价值和特点,这是IOT新零售下需要设计深入研究的方面。

在云端实现企业产品的全区域管控,监控的设计视觉和交互又是不一样的,比如论坛上的案例:荷鲁斯之眼、全区域覆盖的云监控等等。

通过对多个实体空间中的数字设计探索,重新塑造人与空间的交互界面,提升人们对于空间的使用体验。下面举个例子:

AT&T discovery district是一个数字化的互动商业社区。

它从重新审视建筑本体开始。通过虚实和光影的变幻,营造出了实体空间体验,空间本体就是对话的那个界面。实体空间和数字内容的结合,构建出人与建筑之间新的交互界面。

广场的数字球体入口,人的位置和数量变动,球体内的灯光也会跟随变动。

undefined

人工智能促使了交叉学科的工种产生:数字体验设计师、创意工程师。这两种职业是做什么呢?面对正在到来的智能时代,体验设计师和创意工程师将共同面对“AI”这一全新的命题,在智慧工地、智慧教育、数字警务室、神经符号AI等应用中,提炼出智能感设计方法、利用图形技术能力自研产品并赋能业务。

数字世界中的设计师:横跨了艺术、文化、科学、商业多个学科;从传播学、心理学、应用科学和统计学进行用研,去解决用户遇到的问题。

它不仅涉及到需求分析和产品设计,还贯穿至产品运维、测试、发布、分析,从设计洞察中做出创新设计。

未来的设计师将融合人工智能和创意编程技术,在世界数智化的大潮中找到新的定位和新的机遇。

undefined

第三部分,在人工智能时代下,未来的设计会走向哪里?新时代的设计师怎样找准自己的定位呢?

人工智能的成熟对部分设计师来说简直是灾难性的打击,之前无论是通过技法还是数据分析才能完成的工作,人工智能一下子就可以完成,后续根本不需要这么多设计师来完成这些工作。那么设计师是否会被人工智能取代?我们先来看一张人类能力地图:

这张图中,海拔高度代表这项任务被计算机执行的难度,不断上涨的海平面代表计算机现在能做的事情。从图中可以看出,目前人工智能水平预警线距离代表艺术的山峰还很远。

人工智能没有人类的跨领域推理、抽象类比能力,也没有人类的主观能力如灵感、感觉和感受;更没有人类特有的灵魂、爱、意识、理想、意图、同理心、价值观、人生观等,这导致人工智能在未来很长一段时间内都无法很好理解人类的心理和行为是什么,在解决推理和情感问题时会不尽人意。

undefined设计除了解决问题外,还涉及对美的理解和创作,美感是对美的体会和感受,它是复杂的,包含了历史、文化、环境、情感等客观因素和主观因素,所以在不同的时代、阶级、民族和环境中,有着不同文化文化修养和个性特征的人对美的定义也不同。

人工智能依赖数据和经验解决问题,它能解决大部分智力可解决的问题,但解决不了需要情感和美感才能解决的问题。而设计的擅长领域,是人工智能不擅长的:跨领域推理、抽象能力、常识、审美、自我意识与情感。那么AI与设计的关系怎样的呢?

设计是为了解决问题。人工智能使机器代替人类实现认知、识别、分析、决策等功能,其本质是为了让机器帮助人类解决问题,也就是说,人工智能在一定程度上也是一种设计,它会创作出与人类思维模式类似的解决方案。所以AI与设计师是一种共生关系。因此设计师不用杞人忧天,担心自己被人工智能取代。

随着AI 技术的成熟,设计必定会发生新一轮的变化,在未来,更多领域和行业需要用到界面设计、人机交互等技能,各行各业的设计师需要掌握以上技能才能更好地服务当前业务。那么未来的设计将走向哪里呢?

undefined新一代的设计师是“与互联网共同成长的一代”,相信在未来几年里有更多的新晋设计师会掌握编程开发能力以及其他能力,综合素质会比目前的设计师更强,所以我们要保持终身学习,懂得如何将自己的能力和经验转换为优势,这样才能在设计道路上不被超越。

undefined那设计师可以从哪些方面来应对智能时代的机遇和挑战呢?

undefined每一代人都有被下一代人取代的风险,但有些很厉害的人就不容易被取代?因为他们在不断创造价值。无论在社会、行业还是在企业里,当具备一定的影响力后,他们能更容易积累人脉和资源,然后反哺自己的价值,就跟滚雪球一样,当雪球越大,他们越不容易被别人取代,设计师需要有这样的意识。

undefined设计师需要懂得更多领域的知识和技术才能拓宽自己的视野,这些领域包括但不局限于传感技术、网络技术、智能仿真技术、虚拟技术、生物技术、纳米技术等。因此科学与艺术是可以并且很有必要相通与交融的,设计师一定要学会跨界思考。人工智能时代下,数字世界和物理世界会逐渐融合,大到城市建设、公共服务、衣食住行和医疗;小到智能家居、穿戴式设备,这些机会将会留给已准备好的挑战者,所以设计师一定要拓宽自己的视野,不要把自己的目光局限在界面设计上。

undefined如果不想被人工智能领先,人类的设计应该是创新的(未成熟、未被发现规律的),包含更多元素的(更多复杂参数如历史、文化、环境、情感等),“设计”这个词语就涵盖了以上元素。人工智能在艺术设计上还远远达不到人类的水平,深耕艺术设计将会为设计师带来更多机会。

undefined在人工智能时代下,当产品基本都能满足永不需求时,能为产品带来活力和差异的除了自身的底层技术基础,更多的是艺术型设计师的理念和风格,以及自身的品牌。就像时尚品牌优衣库和Gucci,单件商品两者的品牌和设计所带来的的利润差距巨大,相信未来的人工智能产品也会面临类似的问题,设计师应该考虑如何为产品赋予更多价值,如何彰显用户的个性。

undefined既然AI是一个强大的工具,那么我们要思考如何运用它来创造更多的价值。AI能够快速便捷地获取大量信息,帮助设计师拓展自己的视野,不断更新自己的世界观,从新的视角看待问题和解决问题。除了快速获取信息外,设计师也应该考虑如何通过AI提高自己的工作效率,例如哪些纯劳动力工作交给AI去做效率会更高;哪些工作可以和AI一起协同完成更能激发创意。

undefined

最后,用一本科普书改编的话来结尾:一想到,还有95%的问题留给开发同学,我就放心了。

最后附上一张本文的脑图:

undefined


参考资料:

[1]阿里设计周.智能与计算.2021

[2]薛志荣.AI改变设计.2019

[3][美]詹姆斯·弗拉霍斯.智能语音时代.2019

[4][美]梅瑞狄斯·布鲁萨德.人工不智能.2018


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

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



文章来源:站酷   作者:西子zhulijuan 

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

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


7000+超详细智能产品深度解析:智能面板篇

雪涛

智能家居越来越普及,智能化的生活是由一个个智能设备组成,这次通过近距离体验智能面板,来研究一下它们是如何提升产品体验的。

7000+超详细智能产品深度解析:智能面板篇

前言

随着互联网的发展,生活智能化越来越普及,各类智能产品逐渐出现到人们面前,在体验的过程中,其实里面有很多细节需要深挖和思考。很多产品细节的背后都是为了提升用户操作效率、兼容用户使用场景、满足用户情感表达,以最终达到对用户体验的提升。作为智能产品的设计师只有充分了解市面上的智能产品,才能设计出更好的产品。

7000+超详细智能产品深度解析:智能面板篇

什么是智能面板

开关对于每个人都不陌生,它用来控制设备的状态,传统开关的数量和要控制的设备数量有关,设备越多,开关越多,为了简化人们的操作,智能面板孕育而出,它不仅可以操控家中单独的设备,还可以对一系列设备进行联动控制。

1. 使用场景

室内近场控制,满足用户家中近距离控制设备的场景。

2. 产品选择

Gira、ORVIBO、绿米

为什么选他们?

  • Gira 从事智能建筑系统技术有 100 多年的历史,算是做智能开关的先驱;
  • ORVIBO、绿米国内做智能开关相对成熟的品牌。

3. 研究方向

本文将从结构、色彩、手势操控方式、卡片形式、功能点这些方向展开分析。

7000+超详细智能产品深度解析:智能面板篇

设备基础信息

Gira g1

TFT 屏、KNX 协议、定价 8000 元起

KNX 属于欧洲总线技术,稳定性最好,需要从设计阶段介入,高门槛的技术要求让 KNX 难以实现全民普及。

ORVIBO 智能开关

多点触控电容屏、Wifi、蓝牙、Zigbee、定价 899 元

Wifi、蓝牙、Zigbee 属于无线通信技术,稳定性不如 KNX,但免布线,易扩展,利于全民普及。

Aqara 智能开关 S1 触摸屏

IPS 屏、zigbee 协议、定价 899 左右

通过以上分析,Gira 的人群定位是有全屋定制需求的高消费人群,其他两个品牌的人群定位是面向尝鲜体验的广大普通消费群体。

7000+超详细智能产品深度解析:智能面板篇

1. 功能点对比

通过功能列表中的对比发现,三个品牌的产品都通过场景联动设备执行来提高人们的操控体验,通过左右滑动来快速切换功能模块类型;

Gira 和 ORVIBO 支持快速返回首页、面板内排序;

ORVIBO 的个性化体验最好,它具有语音控制、设备自动添加、设备自动归类功能,这些差异点让它比其他两个产品更加智能。

7000+超详细智能产品深度解析:智能面板篇

Gira G1

以 Gira G1 为例,从结构、色彩、手势操控方式、卡片形式、功能点这些方向展开分析。

7000+超详细智能产品深度解析:智能面板篇

1. 首屏

界面整体用以黑白灰为主,搭配少量颜色,给人简洁干净的感觉;

思考:智能面板除了具有功能属性,还具有装饰属性,黑白灰为经典搭配,可以更好兼容各种家装风格,还可以更好的展现内容;少量的颜色用来强调正在运行的设备状态。

7000+超详细智能产品深度解析:智能面板篇

2. 辅助颜色

辅助色大方向上使用两对互补色,在色环上形成了一个矩形,通过调节亮度饱和度达到统一和谐多彩的效果。

7000+超详细智能产品深度解析:智能面板篇

3. 层级划分

主要分为 2 大层级:功能卡片列表、设置为第一层级,设备控制为第二层级;

对于 gira 这种全屋定制的产品,家中一般会有很多设备,功能卡片放置在第一层级的好处是,便于用户浏览锁定目标功能卡片。

7000+超详细智能产品深度解析:智能面板篇

4. 首页布局

区域 1 显示 KNX 协议类型,室内外温度,时间;这部分内容占比很小,说明这些内容用户不常用,但用户会偶尔还是会看一下;

区域 2 为房屋名称,返回上一级、返回首页、设置、展示形式切换,这一区域全局置顶显示,用户在多级操作后,可以很快速的返回到首页;

区域 3 显示设备、场景的数量,用户可以清楚的掌握家中设备场景的数量;

区域 4 为设备场景列表,用灰色背景来强调主操作区域。

一屏最多 6 个设备,通过左右滑动来展示更多设备

思考:为什么不是上下滑动,而是左右滑动

有 2 点猜测:

  • 左右滑动下面的点相当于页码,用户在找某个设备的时候可以方便记住某个设备在第几个点的页面里
  • 在设备控制界面中左右滑动快速切换其他设备,这样可以统一用户对于左右滑动切换的认知

7000+超详细智能产品深度解析:智能面板篇

5. 卡片展示

卡片内容从上到下依次为设备场景 icon、名称、状态及快捷操作;

用户可以通过 icon 快速锁定设备类型,通过名称确定目标设备,进行快速操作;

各功能模块独立划分,快捷操作区域可以很好的兼容不同设备的功能键。

7000+超详细智能产品深度解析:智能面板篇

6. 设备控制区域布局

操控界面划分为 2 部分,一部分为信息展示区,内容为设备名称、所属区域;

另一部分为控制区,这部分区域固定,可以让不同的设备控制看起来更统一;

大面积区域留给核心功能,辅助功能布局在四周,便于用户准确操控。

7000+超详细智能产品深度解析:智能面板篇

7. 手势

设备控制界面通过左右划动快速切换其他设备,不需要返回菜单界面。

7000+超详细智能产品深度解析:智能面板篇

8. 手势

手掌长按屏幕,可唤起提前设置好的开关功能,这时面板相当于简单的开关,可以很快速的关闭开启所在区域的灯。

Gira 这样做还原了开关的本质,当想要开启或关闭该房间内的灯时,就不需要到菜单界面找这个设备了。

7000+超详细智能产品深度解析:智能面板篇

9. 设备控制

灯操控界面用刻度形式表现,每一度为一个刻度,并且还可以通过中间的加减号进行精确到 1 个百分比的亮度微调,品牌方想为用户打造成清晰准确调控的形象;

但在实际使用场景中,我们不大会对灯进行这么精确的调节。

温控器

温控界面同样可以精确调节,每 0.5 摄氏度为一个刻度;

温控的精准调节,就比较贴近我们日常的使用习惯,温控器控制界面是没有开关的,因为目标人群家中多数是中央空调,随便就可以关闭,对于大户型的用户来说是不友好的。

右下角的定时按钮可以让设备在特定时间内以某一状态运行。

7000+超详细智能产品深度解析:智能面板篇

窗帘

窗帘的状态值与操控条左右排列,这样的排布好处是可以让操控条长度最大化,便于用户控制;

窗帘控制界面只分为有调角度的和没有角度的;

窗帘操控条竖直排列,向上滑到顶部为窗帘全开,滑到底部为全关;

窗帘的行程和角度都用百分比的形式展现。

7000+超详细智能产品深度解析:智能面板篇

设计设备控制界面的思考方向一般有 2 种:

1. 界面控制方式要和设备的实际运行方式一致

这种思考方向要考虑实际窗帘有左右运行和上下运行之分,上下划动的操控方式来控制左右运行的窗帘会有认知上的偏差;

百叶帘的角度有正向和反向转动之分,如果只按最后的遮光百分比来做,会造成设备兼容问题。

也就是说为了模拟真实的操控方式,需要设计出若干不同种类窗帘控制界面。

2. 界面控制方式与设备运行结果关联

这种思考方式不需要考虑窗帘的种类及开合方向,将所有种类的窗帘行程及角度归为开、关两种结果状态,

就像 Gira 这样,只需要做两套界面就可以兼容几乎全部的窗帘设备。

Gira 竖排控制条的优势

如果横向布局,那么左右滑动切换设备时,会触发控制条左右手势,造成误操作。

7000+超详细智能产品深度解析:智能面板篇

背景音乐

设备列表中背景音乐卡片的快捷按钮很特别,由静音、播放、下一曲组成,我们设计的时候一般会做成对称的:上一曲、播放、下一曲,Gira 并没有这么做,因为在背景音乐的使用中,一般有几种需要快速响应的场景:用户在家中发起临时谈话,需要暂时安静一下;不想听了;这首歌的风格不喜欢;

背景音乐操控界面功能和音乐应用差不多,唯一不一样的是,底部可以快速切换歌单,可以很快速切换不同音乐风格。

7000+超详细智能产品深度解析:智能面板篇

文件夹功能

随着设备、场景的增多,用户可以根据自己的喜好将设备或场景归类放置,便于快速定位功能卡片;

点击文件夹卡片,进入到显示着众多功能名称的文件夹界面,点文件夹,才能进入功能卡片列表,为什么要多一个文件夹查看的界面。

我们想象一下有这样一种场景:面板中有几十个功能卡片,用户想开启娱乐场景,这个场景好像在客厅文件夹或走廊文件夹里,于是去客厅文件夹快速翻看这里面有没有,再点进去操作。

Gira 这样做符合用户在功能卡片多的情况下快速选择的习惯。

7000+超详细智能产品深度解析:智能面板篇

排序功能

可以通过拖动来调节设备卡片在菜单中的位置,省去了去后台设置的步骤;

定时功能

定时列表用具象的时钟来体现开始运行时间,还用黑白来区分夜晚和白天,对于用户来说扫一眼图片就可以知道运行时间,这种体验很好。

7000+超详细智能产品深度解析:智能面板篇

ORVIBO Mix Pad

以 ORVIBO Mix Pad 为例,从结构、色彩、手势操控方式、卡片形式、功能点这些方向展开分析。

7000+超详细智能产品深度解析:智能面板篇

1. 首屏

整体运用深色色调,使用几何图案作为背景;

用白色体现基础信息,用色彩强调设备场景的状态及天气信息;

运用圆角元素,更加生活化。

7000+超详细智能产品深度解析:智能面板篇

2. 辅助颜色

颜色运用比较丰富,以蓝、橙两互补色为主,其他颜色分别为它们的邻近色;既能保持强对比,还能让颜色变得柔和。

7000+超详细智能产品深度解析:智能面板篇

3. 层级划分

主要分为 2 大层级:首屏、设备控制界面、场景列表、闹钟为第一层级;设备类型、设置为第二层级;

智能面板一般装在墙面,用户站立操作,用户不可能花太长时间来操控;

欧瑞博的人群为广大普通消费群体,家中的设备不会太多,设备控制界面层级前移,可以方便用户直达控制区,用完即走。

7000+超详细智能产品深度解析:智能面板篇

4. 首页布局

首页主要分为 2 个区域:

日期天气区

时间、日期、天气状况信息,可以满足用户日常出门关注的内容,并且在这个区域有多种表现形式供用户选择,既保持个性化还不失统一感。

快捷控制区

可以将常用的功能置顶在首页展示,最多设置 2 个,用户在首屏既能看到日期天气还可以控制设备,大大提升了屏幕的利用率和用户的操作效率。

这样做的好处:

当用户准备出门时,看了一眼面板上的天气,点一下关玄关灯,就可以直接出门了,不需要滑到灯的菜单界面找到玄关灯然后再关闭它,真的很方便。

底部有向上滑动提示,告诉用户下面还有重要内容。

7000+超详细智能产品深度解析:智能面板篇

5. 卡片展示

卡片内容左右排布,从左到右依次为 icon、名称及状态、快捷控制,这种排布的好处是可以缩小每个卡片的高度,从而提高屏幕利用率;

但有个问题就是,左右排布的方式,内容最多呈现 4 个文字,需要考虑这几个字能否清楚的定义该卡片功能。

7000+超详细智能产品深度解析:智能面板篇

6. 上滑手势

上滑可以查看全部功能卡片,给用户在手机上浏览信息的熟悉感;

在新的操控设备运用用户熟悉的交互方式可以降低用户的学习成本;

移动端上常见的手势对应结果有:左右滑——代表切换,向下滑——代表唤起相关功能设置,向上滑动——浏览更多信息。

7000+超详细智能产品深度解析:智能面板篇

7. 左右滑手势

用户在首屏左右滑动就可以切换不同功能模块,不需要返回上一级,在设备类型少的情况下,这种盲操会比较方便。

7000+超详细智能产品深度解析:智能面板篇

8. 下滑手势

下滑进入功能类型选择、系统设置界面,这一区域相当于导航,可以实现功能模块间的快速切换。

7000+超详细智能产品深度解析:智能面板篇

9. 手势问题

多种手势的组合可以在有限的屏幕内操作更加灵活,但手势太多会带来一些问题:

  • 误操作问题,在空调界面,左右切换设备时,容易触发空调温度操作;
  • 认知上的负担,在欧瑞博面板的逻辑定义里,首屏和控制界面属于同一层级,然而上滑手势只能在首屏操作,在设备控制界面上滑就无法使用,下滑手势却可以全局操作,这里面的逻辑会让用户混乱。

针对以上问题解决的方法可以是:

  • 改变空调左右滑动设置温度的操控方式;
  • 首屏和控制界面层级做区分,或简化手势。

7000+超详细智能产品深度解析:智能面板篇

10. 场景运行效果

场景卡片分为未激活、运行中、运行结束三种状态;

场景运行状态变化在卡片 icon 区域体现,既传达了运行的过程,又不会打扰到用户。

7000+超详细智能产品深度解析:智能面板篇

12. 卡片首页置顶

点击卡片列表最底部的编辑按钮,可以选择将某一功能卡片置顶到首屏,方便用户快捷操作。

7000+超详细智能产品深度解析:智能面板篇

13. 设备控制区域布局

将普通灯、场景、门窗等操控方式相近的设备进行了归类显示,并且和空调、色温灯、背景音乐等设备放置在同一层级;

从交互体验层讲:由于家里的普通灯、场景、门窗的操控方式简单统一、数量多,按照类别整合在一起便于查找控制;

从视觉层讲:设备操控界面布局形式多,会给用户造成整体视觉上的不统一,增加学习成本。

7000+超详细智能产品深度解析:智能面板篇

14. 设备控制

空调

空调控制界面,只能通过左右滑动以整数的形式来调节温度,开启中的时候,背景会有对应模式的色彩氛围效果,给用户更直观的感受;

底部只保留用户最常用的模式、风速、风向三个功能。

色温灯

色温灯界面默认为用户推荐 6 种不同场景下使用的色温选项,底部提供亮度调节功能,用户只需要去选择,大大缩短了用户的操作路径。

个性推荐在电商类产品中很常见,推荐机制基于对用户行为习惯的分析,需要强大的后台数据支持,智能家居这一块通过穷举用户生活中的设备使用场景、目的从而提炼出对应的功能选项可以大大提升产品使用体验。

7000+超详细智能产品深度解析:智能面板篇

窗帘

窗帘控制界面采用半写实风格,给用户更加直观感受,学习成本低,拖动窗帘区域就可以进行行程的控制,由于没有微调按钮和行程状态百分比,所以无法做到窗帘精准控制;

选择这种写实的设计风格,需要考虑设备控制界面布局、样式对新增窗帘类型的兼容性。

7000+超详细智能产品深度解析:智能面板篇

背景音乐

背景音乐默认界面只保留了当前播放音乐封面元素,更多复杂操作被隐藏到了下一级界面,用户在当前界面可以进行暂停、播放、收藏等简单操作;

在小屏幕中做设计时,有时候会在一个层级界面中堆砌许多功能按钮,使界面变的臃肿,一来容易让用户误操作,二来让用户找不到重点功能,操作效率低下;

我们在处理这些信息时应该结合使用场景,按用户的使用频率进行权重划分,将权重低的进行隐藏处理,突出核心功能,减轻用户操作负担。

智能家居厂商大多都是靠卖硬件赚钱,欧瑞博巧妙的运用会员机制结合背景音乐功能来售卖音乐服务(49 元一年),更加具有互联网商业思维。

7000+超详细智能产品深度解析:智能面板篇

15. 语音控制

在语音设置中,可以选择是否开启语音控制,系统默认 2 组唤醒词激活语音控制;

欧瑞博为用户提供了更便捷的语音控制功能——快捷口令,说出指令就可以快速执行,由于没有房间、设备名称的限定,这个功能只能实现面板内所有同类型设备的开或关,适用于小户型简单的场景。

7000+超详细智能产品深度解析:智能面板篇

16. 快速添加设备

传统上添加一台新设备需要:选择要添加的设备——选择网关——输入正确Wifi密码——进入设备配网流程——配网成功——设备名称设置,操作流程繁琐,中间稍微有些环节没有操作对,最后就无法成功添加设备,欧瑞博通过简化中间过程,成功解决了这一痛点。

7000+超详细智能产品深度解析:智能面板篇

17. 个性化设置

用户可以在面板中直接设置首屏的风格样式,系统一共有 3 种风格外和一个随机演示选项供用户选择,并且这三种风格的功能架构是一样的,只是对背景图、元素大小、布局做了设计区分。

7000+超详细智能产品深度解析:智能面板篇

AQARA S1

以 AQARA S1 为例,从结构、色彩、手势操控方式、卡片形式、功能点这些方向展开分析。

7000+超详细智能产品深度解析:智能面板篇

1. 首屏

整体使用黑色做背景,用白色体现基础信息,底部的色块元素貌似起装饰作用,和天气情况并没有联系;

首屏主要分为日期时间和环境状况 2 个区域,天气、温度、湿度、空气质量信息并行排列,个人认为用户对这 4 个信息的关注度是不一样的,看看我们手机上的天气 app 的信息排布就知道了,这样并列排布会让用户分不清主次。

7000+超详细智能产品深度解析:智能面板篇

2. 辅助颜色

颜色以蓝色及其邻近色为主,搭配少量的对比色,整体色调统一。

7000+超详细智能产品深度解析:智能面板篇

3. 层级划分

主要分为 2 大层级:首屏、设备控制界面、场景列表为第一层级;设置为第二层级;

形式和欧瑞博一致,都是为了让用户更便捷的操控;

但进入设置页面,设置主题类型的步数比欧瑞博的多一步,用户设置完成后还得一步步返回,这里可以将用户常用的“显示”内容上移一个层级,减少页面跳转次数;

AI 手势这种有特色的功能隐藏的太深,不便于用户的使用。

7000+超详细智能产品深度解析:智能面板篇

4. 左右滑手势

绿米同样运用左右滑动进行首屏、场景列表、设备间的快速切换,对于相同类型的窗帘设备,并没有整合成列表放置同一屏,而是另起一屏,设备多的时候就会存在操控效率低的问题。

7000+超详细智能产品深度解析:智能面板篇

5. 下滑手势

下滑进入系统设置界面,这个区域只有一个设置功能,有点浪费空间,索性就把设置下一级的功能选项移到下拉页面,还能提高用户的操作效率。

7000+超详细智能产品深度解析:智能面板篇

6. 场景运行效果

场景运行过程以进度条的形式在卡片底部体现,对用户的干扰小,并且只传递出开始到结束的过程,没有成功提示,这种逻辑是正确的,因为面板只是传达出了一个命令出去,具体什么时候传出、接收设备是否正常运行,这些信息面板是获取不到的。

7000+超详细智能产品深度解析:智能面板篇

7. 设备控制区域布局

场景列表与设备控制界面一个层级,温控器、调光灯运用半圆的元素作为控制区域,新颖的设计风格是绿米智能面板的特色;

仔细看,会发现设备控制界面不统一,相同功能的开关按钮,在不同的设备中位置却不一样,还有就是普通灯是偏写实的 3 路开关样式,其他界面却是抽象的圆环几何样式,不统一的界面会增加用户的学习成本。

7000+超详细智能产品深度解析:智能面板篇

8. 设备控制

空调

空调控制界面,通过上下滑动以整数的形式来调节温度,新颖的操控方式让用户加深对品牌的印象;

底部开关、模式、风速同级展示,这里存在几个问题:1、用户在设置空调时很容易误点关闭按钮;2、缺少常用的风向调节,功能缺失造成较差使用体验。

普通灯可以在 App 中设置 1、2、3 路开关样式,这种形式同样存在问题:一屏最多放三个开关,屏幕下方大片区域空置,利用率低。

7000+超详细智能产品深度解析:智能面板篇

窗帘

窗帘控制界面显示窗帘的名称及行程状态;窗帘的开、合,绿米给了 2 种方式:滑动控制、全开全关按钮;

增加暂停功能可以提升使用体验,因为用户在操控窗帘设备时,会以窗帘实际的运动行程为依据来决定窗帘需要开合到什么程度,而不是看界面上窗帘的位移,当用户觉着窗帘行程可以了,按暂停键就可以准确停留在用户想要的位置上。

7000+超详细智能产品深度解析:智能面板篇

调色灯

调色灯用户可以自定义或选择系统推荐的颜色;

为了涵盖大多数的用户偏好,调色灯的 4 个推荐色采用色环上差距大的颜色,并且根据用户使用场景筛选出常用的几种色调,排除了用户不常用的绿色、紫色、粉色。

7000+超详细智能产品深度解析:智能面板篇

9. 开机默认页设置

用户可以根据自己的使用偏好,将最常用的功能模块页面放到第一屏,这个功能在一定程度上可以提升操作效率,当设备多,还是需要切换很多屏。

用户使用面板分为:紧急情况、常用情况,紧急情况不一定常用,就像出门需要关灯;常用情况不一定紧急,例如看时间

绿米为了让用户便捷,给出默认页自定义功能,存在的问题是:如果用户把灯作为开机第一页,那么日常中看时间要翻页;日期时间作为第一页,开关灯需要翻页,都不是特别便捷。实际上可以做成像 Gira 那样,通过增加手势唤起快捷开关功能,首屏留给日期时间,既满足了日常需要,又能满足紧急需求。

总结

通过上述分析,我们得到了这些产品的共同点与差异点,以及背后的思考方式,了解共同点可以让我们弥补自己产品的不足,不被市场淘汰;学习它们差异化的思考方式可以帮助提升我们产品的竞争力。

作为一名合格的设计师,除了学习视觉技法和理论,还应该多玩、多看、多思考真实的线上产品,体验其核心操作流程,推敲和思考产品设计背后的原理和逻辑,才能不断提升体验设计思维。



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

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



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

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

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


超详细智能产品深度解析:交互动效篇

雪涛

智能产品的设计过程中,常常用到动效设计,那么动效设计用在哪些地方及对提升智能设备体验带来什么帮助,是这篇文章要讲的。

上期回顾:

流畅的操控感

通过大小、位置和透明度的变化,使得界面与界面之间、界面上元素的出现和消失都有关联,让用户和产品的交互过程更流畅,给用户更好的体验。请看以下案例:

1. Nest 温控器控制界面

超详细智能产品深度解析:交互动效篇

Nest 温控器从时钟转变到温控调节界面的过程中,时钟的指针向圆心收缩,周围的时间刻度生长并一起向中心收缩,指针收缩动效对应温控调节界面温度值的显现,时间刻度的生长收缩动效对应温度刻度的显现,由于元素之间进行有关联的变化,操控过程中会有丝滑流畅感。

2. Gira 窗帘设备

超详细智能产品深度解析:交互动效篇

当用户调节行程时,中间的控制点跟随手指实时运动,而进度条会有延时拖拽效果。为什么会是这样呢?原因是:用户在控制面板上的操作是需要由面板向窗帘设备发送指令的,也就是说面板上控制窗帘到窗帘设备运行中间会有一小段时间间隔,用户会有延迟感,所以 Gira 在控制窗帘行程的过程中,进度条为了与窗帘设备运行同步,加入延时效果,让用户感觉操控响应快的错觉。

3. Nest 新款温控器

超详细智能产品深度解析:交互动效篇

用户在滑动切换功能时,功能 icon 会按照先后顺序由大到小变化,由于连续性运动,每个元素运动都有衔接,会有流畅操控感受。

4. Nest 智能锁

超详细智能产品深度解析:交互动效篇

用户输入密码后至锁打开这段时间,数字依次向下消失,锁 icon 逐渐出现并且打开,体现出柔缓的感觉;实际上动效有时候可以弥补设备执行缓慢的不足,当设备需要长时间才能执行时,这段时间加入动效,动效运行时间和设备实际执行时间一致,用户就会觉得很顺畅;也可以让动效运行时间小于设备执行时间,这时用户会觉得操控反应更快。

直观明确,降低用户学习成本

通过动效能够帮助用户使用功能,对功能的方向、位置、唤出操作、路径等进行暗示和指导,方便用户在最短的时间内来学会操作产品的一些功能。请看以下案例:

1. Amazon Echo

超详细智能产品深度解析:交互动效篇

用户第一次设置好监控后,通过放射动效提示用户双击屏幕,通过上下扩张的箭头动效提示用户可以通过手指来进行监控画面的放大缩小。

2. Lenovo Smart Clock

超详细智能产品深度解析:交互动效篇

当设备第一次配好网重新开启后,通过遮罩、圆点大小位置运动搭配文字告诉用户长按屏幕可以控制什么功能。

超详细智能产品深度解析:交互动效篇

顶部弧形的上下变化,告知用户下拉可以控制什么功能。通过简单的元素既能起到提升用户的作用,还不打扰用户。

强调内容

通过动效给用户展示需要的内容及产品侧想让用户了解的内容,让用户更乐意更易于理解,强化功能感知。请看以下案例:

1. B&O 触控音箱

超详细智能产品深度解析:交互动效篇

双击音乐标题,进度条从左向右生长出现、操控点放大出现,既强调了进度条这个隐藏功能,还暗示用户可以拖动操控点从左向右拖动操作。

2. Google Nest Hub 调光灯界面

超详细智能产品深度解析:交互动效篇

用户从列表进入调光灯界面时,调光条灰底从左向右弧度生长,随后当前亮度条生长出现、亮度值出现,先暗示了用户可以从左向右弧度操作,后强调了当前设备状态。

3. Google Nest Hub 睡眠质量检测界面

超详细智能产品深度解析:交互动效篇

用户查看睡眠质量数据时,睡眠质量标题信息渐隐渐现,睡眠数据条、数字生长,让数据展示有主次之分,强调了用户想要看的内容据,更人性。

提升用户掌控感,让用户心中有数

产品设计里面有一个非常重要的原则:让用户有操纵感。这种操纵感不仅仅表现在对用户的操作有了反应、有了显示,还有一种方式是让用户知道当前产品运行的状态,是正在等待还是正在加载,还是正在下载或变化,那这种状态的告知也是增强用户操纵感的方式之一。请看以下案例:

1. LG 智能洗衣机

超详细智能产品深度解析:交互动效篇

当用户往洗衣机里加入衣物后,出现量杯倒入洗衣液的动画,告知用户当前洗衣机正在进行哪一个环节,我们分析一下这里加入动效的用意,首先,一般的洗衣机没有屏幕,有的话也就显示当前的功能选项,LG 的这款洗衣机是液晶屏,那么它的定位就是高端人群,通过融入动效,打造差异化,提升使用体验,加深用户对 LG 品牌的印象。

2. Lenovo Smart Clock 起床闹钟功能

超详细智能产品深度解析:交互动效篇

用户设置好起床时间后,系统会根据时间段自动进行背景颜色的过度,来模拟天色的变化,直观的告知用户当前的时间是白天还是晚上或是黄昏。

3. Orvibo 除湿界面

超详细智能产品深度解析:交互动效篇

设备进行除湿的过程中,面板上圆形元素进行旋转,伴随粒子扩散效果,模拟水分子消失的过程,直观形象的告诉用户现在正在做什么。

4. Lenovo Smart Clock 猫眼通话界面

超详细智能产品深度解析:交互动效篇

用户接通猫眼后,通话 icon 进行电播扩散动效,模拟声波扩散效果,准确的向用户告知当前通话中的状态。

5. Google Nest Hub 语音唤起

超详细智能产品深度解析:交互动效篇

当用户说话唤起语音控制时,原先的全屏画面收缩,响应用户的指令,四周留白,为通话内容提供展示空间,然后彩色点元素起伏变化,通话内容出现,告知用户已接收到指令;随后彩色点元素旋转加载,体现正在执行中。在语音控制的每一个环节都加入动效反馈,会让用户觉得他不是在和一个冰冷的机器讲话,富有人情味。

6. Orvibo 窗帘控制界面

超详细智能产品深度解析:交互动效篇

运用轻拟物效果和与实物一致的运动方式,用户可以直观的看到窗帘的行程位置与开合状况,大大的提升了产品易用性。

明确层级关系,提升用户理解效率

面对一款新的智能产品时,用户可能不知道怎么操作它,通过动效向用户交待页面内容之间的关系,让用户清楚的知道从哪里来,到哪里去,更易于理解从而可以快速上手使用。请看以下案例:

1. Nest 温控器设置界面

超详细智能产品深度解析:交互动效篇

温控器的设置模块通过左右滚动以便在有限的屏幕中展现,那么模块的下一级页面跳转做成像 App 那样左滑切入是无法明确层级内容的,此时需要一个与左右滑动不一样的动效来区分模块的切换,Nest 运用翻转效果,强化了层级感,清楚交待了页面翻转后面的内容与页面前的关系。

2. Google Nest Hub 设备控制界面

超详细智能产品深度解析:交互动效篇

用户从顶部导航中进入设备列表过程中,设备列表页面从右向左进入,暗示用户“当你想返回上一级,可以左滑离开哦”,用户上下滑动设备列表时,屏幕左边滑动条出现,更加明确了“左滑返回上一页”的功能;

超详细智能产品深度解析:交互动效篇

超详细智能产品深度解析:交互动效篇

当用户通过列表进入操控界面以及切换功能页时使用淡入淡出的效果,弱化它们之间的跳出感,来强调它们是一个层级的内容,从细微处可见 Google 的设计师在动效的使用、选择上非常克制,值得我们学习。

3. Google Nest Hub 日程提醒界面

超详细智能产品深度解析:交互动效篇

用户发出查看日程安排的命令时,日历界面从左到右进入,告诉用户这是一个新的页面,接着日期数字 21 进行大小位移变化,月份不做变化,为了强调这是 21 号的日程,2 条日程信息按照时间先后从下向上运动,交代了日程处理的优先级。Google 设计师将信息展现的每一步都让用户看的清楚明白。

品牌调性透传

在可用性良好的前提下,通过一致性、趣味性的动效设计和创新的交互方式为产品增加亮点,带来更惊喜的体验,传达产品的气质与态度。请看以下案例:

1. Google 多端运行动效

超详细智能产品深度解析:交互动效篇

超详细智能产品深度解析:交互动效篇

超详细智能产品深度解析:交互动效篇

在品牌塑造上,Google 已被证明做得极为成功,而且在视觉表现层面,Google 系产品具备着“一致性”和“连贯性”,这让 Google 获得了品牌识别上的利益。在不同设备的动效设计中,Google 都统一使用代表品牌的红、黄、蓝、绿颜色和几何图形,遵循化繁为简的设计准则,通过简洁贴近真实的运动方式,让产品更有人情味,让用户更加专注于内容。

2. 智能圆镜

超详细智能产品深度解析:交互动效篇

用户在靠近圆镜设备时,镜面中心人脸识别 icon 缩放,周围点元素波动扩散,吸引用户的同时,传达出科技感。

3. Apple HomePod 命令反馈界面

超详细智能产品深度解析:交互动效篇

当 HomePod 在执行一项指令时,顶部的屏幕会出现彩球融合翻转动画,多变朦胧的色彩可以唤起用户情绪,球体间的融合过程让产品生动有趣,让用户感受到品牌的人情味。

4. Apple Watch 洗手提示界面

超详细智能产品深度解析:交互动效篇

Apple Watch 洗手功能开启后,会有一个 20 秒的倒计时,倒计时以肥皂泡沫消失扩散的形式展现,很贴合当前洗手的情景,让原本一个普通的倒计时变得生动且有趣味性,用户更加乐意使用,强化了用户对品牌的感知。

5. 智能温控器

超详细智能产品深度解析:交互动效篇

这款温控器已经有一定年代了,当时那个年代,能用到温控器,那就很有科技感了,智能温控器还将流动的线条动效运用至透明背景上,向用户传达了超前的科技感,只要见了就会记住这款产品。

下面为大家整理了一份动效在产品中的应用场景以及设计思路:

超详细智能产品深度解析:交互动效篇

总结

实际上智能产品中的动效设计,并不是要向用户炫技,也不是做的越炫酷越好。动效是以解决问题为目的的一种手段。我们要去观察现有好产品的动效设计落地点及分析他们的小心思,从而运用至自己产品中,提升产品使用体验。


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

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



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

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

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


这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

雪涛

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

相比于去年发布的 macOS 11 和 iOS 14 的 WWCD 2020,今年的 WWDC 确实是显得变化没有那么大,在系统视觉层面上,macOS 12,iOS 15,iPadOS 15,watchOS 8 似乎并没有那么多「革命性」的改变。老实说视作为一次日常的产品功能迭代就好了。

不过,iOS 15 当中有不少颇为不错的新功能,比如实况文本(Live Text),功能更强的 Spotlight,全新的 Safari 浏览器,全新的安全机制,等等等等,这些功能足以为用户提供更好更安全的使用体验,但是另外一方面,有很多功能对于设计师和开发者这边有着巨大的影响。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

目前来看,Facetime 的多人通话的升级,共享当前界面和屏幕给他人的 Shareplay 很大程度是为了应对全球疫情之下,用户被封闭和隔离的使用场景,这些功能需要系统级的支持。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

而从照片中获取文本信息的实况文本功能、超强的聚焦搜索功能,还有新的相册自动生成回忆视频的功能,则和苹果自身在机器学习领域的挖掘息息相关,对于想要在这一领域有所建树的团队,可以参考这些内置的功能,如何用好神经网络的软硬件,可以参考相关的开发文档。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

关于 iOS 15 在我看来最值得聊且对于设计和运营有较大影响的部分,其实是全新的通知推送系统,以及 「专注模式」这一功能。在整个发布会结束之后,苹果的 HIG 页面当中,只有一小部分的内容随着新系统的发布而随之更新了,而这其中就包含信息推送和 「专注模式」的部分。

信息推送和当下用户日常内容和信息消费习惯紧密关联。越来越多的 APP 和越发频繁的信息推送给用户带来的信息压力已经成为一个广泛存在的问题,一直到今天,这个问题都没有一个足够完美的解决方案。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

针对注意力管理的问题,iOS 15 所给出的解决方案算是一个比较折衷且比较合理的处理机制。

1、视觉优化

在基础的信息推送内容的视觉设计上,iOS 15 针对通知栏的小卡片的排版视觉进行了优化,放大了 APP 图标并置于卡片的左侧,对于通讯类 APP 当中用户发送的信息,则采用了用户大头像 + APP 小图标 的组合形态,增加信息来源的辨识度,并以这种形式更清晰地告知用户,所收到的信息的来源,以及它的属性。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

iOS 15 还可以根据用户设置的时间表或者所处的模式,快速收集每天收到的的通知,构建成为一个较大的通知摘要大卡片,而摘要的内容呈现将会按优先级进行智能排序,位于顶部的卡片相关度最高。(所以 APP 通知推送会因为这种机制开始一轮新的内卷么?)

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

值得注意的是,新的推送摘要因为是按照优先级排列,所以各种 APP 当中优先级最高的通知将会被汇总到一起。

摘要信息的组织并不是借助单一算法来实现的,同样的,其中用到了机器学习的功能,借助神经网络芯片来更好地对信息进行针对性的筛选,并推送给用户,以图更好的体验。

2、通知管理层级的提升

在原本的 iOS 14 当中,对于单个 APP 的推送管理方式比较简单,除了「关闭」,就只能选择「隐式推送」,

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

在 iOS 15 当中,用户可以针对单个 APP 的推送进行更细致的选择和处理:

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

更多选项当中,可以选择让 APP 「静音一小时」或者「今天不再推送」以避免干扰。

整个 iOS 15 的通知处理的机制都是围绕着降低用户信息载荷的目标来进行的,除了管理层级的细化,专注模式更是之前 iOS 14 中「勿扰模式」的全面升级。

其中,为了对推送通知进行更加细致的处理,通知功能的类型也有了更为详细的分类,并且在 HIG 设计规范进行了更为详细的说明。相关详细内容在第四节。

3、围绕场景构建的专注模式

「专注模式」是为了应对信息过载的问题,并且试图改善推送通知影响用户注意力的情况,希望借此来帮助用户更加专注于进行中的任务。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

系统基于常见的几个使用场景,提供了「个人」「工作」「睡眠」三个场景,并且保留了之前的「勿扰」模式,单击底部「+」号还能添加更多模式,其中还包括「驾驶」和「游戏」等不同的预设场景模式。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

除了「勿扰」模式之外,其他模式下,用户可能会收到与这些场景相关的应用,而用户可以在 iOS 15 的系统智能推荐之下,快速增删当前模式下可以推送通知的 APP。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

在指定模式下,用户收到的推送通知的内容、类别都会高度相关,降低干扰性。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

同样的,为了搭配不同的专注模式,还可以基于模式设置特定的主屏和桌面小插件,成为当前模式下的信息和管理中心,更加方便地管理当下的任务,达到「专注」的目标。

而「专注模式」更为智能的一点,是系统会根据地理位置信息,有意识地提醒用户是否要切换模式:

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

同时,当用户将手机设为特定模式之后,绑定同一帐号的其他设备也会自动切换到同一专注模式之下,达到统一管理的目的:

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

当然,除了基于位置进行「专注模式」的切换之外,用户可以通过右上角下拉的「控制中心」对「专注模式」进行手工的切换管理。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

4、通知系统规范

而无论是新的通知系统还是「专注模式」,在信息管理的颗粒度上都比以往更加细致,这很大程度上是基于新的推送通知的类别管理,这一部分内容在 HIG 设计规范上已经得到更新,并且有着非常详细的说明。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

下面是关于推送通知章节更新的主要部分(考虑到篇幅,对部分非关键内容进行了精简)。

https://developer.apple.com/design/human-interface-guidelines/ios/system-capabilities/notifications

4.1、通知的管理

用户希望收到他们关心的事情的通知提醒,但并不总是喜欢被打扰。为了帮助用户管理整体体验,需要在发送任何通知提醒之前获得用户的许可;系统允许用户在「设置」>「通知」中更改,并调整推送提醒样式,可以预览,并且可以和 Siri 交互。用户还可以在「设置」>「专注」中让所有通知都静音(某些地区的政府警报除外)。

相关开发人员说明,请参阅 UserNotifications

4.2、帮助用户管理通知

在 iOS 15 及更高版本中,用户可以通过指定专注模式时间,设置专注模式下通知推送的具体行为,而进行细粒度的管理。专注模式可帮助用户在他们为睡眠、工作、阅读或驾驶等不同状态下,定义这一时间段内通知推送的具体行为。

用户可以筛选出哪些通知或者 APP 可以在特定专注模式下,被推送给用户。比如在工作专注模式下,用户可能希望收到来自同事、家人以及工作相关的 APP 推送的信息,用户可能还希望收到时效性较强的通知。

尽管专注模式下,可能会有一些通知被延迟推送给用户,但是通知信息在收到的时候即立刻发挥作用。

4.3、通知的类型

想要定制化地推送信息,那么你需要确保你的 APP 能够支持信息直接推送,就像电话或者短信样的通讯通知(communication notifications),而其他类型的弱时效性的推送则使用非通讯通知(noncommunication notifications) ,而想要支持通讯通知,你需要引入 SiriKit ,这也意味着用户可以使用 Siri 来进行自定义通知推送行为。具体的参阅INSendMessageIntentUNNotificationContentProviding

为了更好的方便用户针对推送通知进行管理,你需要对你的 APP 的推送通知的中断级别进行定义,不同级别的定义决定了通知何时推送,系统在不同状态下是否要推送,以及如何处理。目前,将推送通知的中断级别划分为4个等级:

  • 被动型通知。用户可以在闲暇时候查看的推送通知,比如周边餐厅推荐。
  • 活动型通知(默认状态)。用户可能希望了解这个信息何时能够推送,比如最喜欢的球队的最新比分。
  • 时间敏感型通知。需要用户立刻关注到的通知,比如账户安全相关的通知和快递通知。
  • 关键通知。直接影响到用户声明安全和需要立刻得知且优先级超高的公共通知,比如来自政府机构的安全通知,或者医疗保健类应用的推送。

具体的属性还可以参考下面的表单:

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

值得注意的是,这4个层级是逐渐递进的,因为后两种推送通知需要的优先级较高,所以最好获得用户的许可。

此外,在设计通知推送系统的时候,还有3个关键的注意事项:

  • 需要对每个通知的优先级和中断级别进行准确的判断,不要让非关键性的通知占用专注模式下的用户注意力,这样才能获得用户的信任。错误的优先级设置会导致用户对你的 APP 产生不信任感。
  • 仅将与此刻紧密相关的事件信息设置为被时间敏感型通知,这样的时效性才能对应得上它的优先级。具体可参阅 UNNotificationInterruptionLevel
  • 不要将营销类信息推送设置为时间敏感型通知。

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

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



文章来源:优设   作者:陈子木

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

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



日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档