-
众所期待的Web3,目前也只是个轮廓
设计动态 2022-12-07现有的互联网,好多人都玩腻了。即便是5G,最多也就是能用来刷刷直播和视频、打打游戏,或者在社交网站上唇枪舌剑一番,玩法终归有限。人们对新一代互联网的期待,也愈发浓烈。这不,舆论开始热炒Web3了。 关于Web3,这个新一代互联网的蓝图,讲到耳根都起茧了的设想就人们对Web3的关注和热议体现了人们对新一代互联网的期待,可是许多评价很高的元宇宙项目,UI设计却不太好。然而现实骨感,却否认不了新一代互联网已经到来的事实,只是目前,它还只有个轮廓。
现有的互联网,好多人都玩腻了。即便是5G,最多也就是能用来刷刷直播和视频、打打游戏,或者在社交网站上唇枪舌剑一番,玩法终归有限。人们对新一代互联网的期待,也愈发浓烈。这不,舆论开始热炒Web3了。
关于Web3,这个新一代互联网的蓝图,讲到耳根都起茧了的设想就是《头号玩家》,在这部电影中,人们可以戴上VR眼镜,瞬间就像进入另一个平行宇宙。但VR发展至今,能满足的体验感还是十分有限。许多吹得很高的元宇宙项目,UI设计还不如动画系应届生的毕业设计来得感人。
好多元宇宙项目的设计体验,连这个都不如
现实骨感,却否认不了新一代互联网已经到来的事实,只是目前,它还只有个轮廓。
一、轮廓 互联网的历史并不久远,我们目前高频使用的版本,其实才是第二个世代,也就是“Web2.0”。
Web2.0最突出的特征就是可读可写,具有了一定的互动属性。它诞生的标志是2004年Facebook的成立。
相较于“Web1.0”只能读取信息的单向发布模式,Web2.0将信息发布的主体拓展到了所有用户。举例来说,门户网站是Web1.0的代表,而微博、公众号、在线问答百科则是Web2.0的典例。
Web2.0的核心理念是“人是灵魂”,它鼓励每个用户去创造、去记录,尤其到了短视频时代,更是让每个人都成为了生活的导演。但对于持续演进的互联网而言,这还不够,更新一代的Web3.0(通常写作“Web3”)呼之欲出。
Web1.0主打“可读性”,Web2.0强调“可写性”,Web3在此基础上又增加“可拥有”的标志性属性。
从Web1.0到Web3,区别一目了然
如何能保证“可拥有”呢?好比我用动画软件设计了一张图像,仅仅上传到现有的互联网(Web2.0),是无法保证我独一无二的所有权的。因为这张图很容易被别人截图、保存,即便我加了签名,维护自己所有权的工作量也会十分巨大。
但在Web3中,这个问题可以得到很好地解决。因为Web3技术支持用区块链技术对这张图进行加密,这样,我所拥有的这张图是独一无二的。而且,所有权本身就意味着可交易性,既然它是独一无二的,是属于我的,我也可以出手转让,因为这份转让也是唯一的。
而在Web2.0中,还要设法证明自己手里的是真品,而不是复制品。可以这么说,相对于Web2.0主张“人是灵魂”,Web3在强调“人是主体”。什么叫主体?就是可以拥有,也可以处置自己的所属物。
Web3还有一项愿景,就是“去中心化”。我们在现实生活中,很容易理解这个词的含义。比如我有个背包,那肯定无论到哪里这个包都是我的,并且都是可以使用的。不可能这个包在公司就可以背,到商场就用不了了。
但在Web2.0中,我们的许多数字资产常常都是依附于平台的。我在A平台购买的数字专辑,到了B平台肯定就不能听。但Web3将会是去中心化的,所属物只属于人本身,而不再依附于某个平台。
这么分析下来,似乎Web3的概念还是很模糊。的确,关于这个领域,目前各国各大企业的探索都各有侧重,本来也没有多么清晰的定义。但即便只有这么粗的轮廓,都已经形成了不小的风口。
二、风口 Web3有多火呢,连周星驰都要跨界参与了。10月18日晚,周星驰注册了一个Instagram号,并发布了第一条动态:“招Web3人才。人才要求:熟悉Web3、有项目管理经验、有头脑又宅心仁厚。”
而据虎嗅报道,周星驰早在2021年下半年就已经在研究NFT(不可互换的代币)了。等下,不是讲Web3吗,跟NFT有什么关系呢?其实,这个关系很简单,NFT就是Web3在当下最主要的应用场景。
周星驰对Web3,看重的正是其“可拥有”的属性,在一次访谈中,他曾多次强调“版权”和“IP”这些词汇。可以推测,他希望自己过去的IP在Web3中也能产生艺术影响力和商业价值。
这几年,明星艺人参与Web3的案例并不少见。周杰伦发表了18年前创作的一首未发布歌曲《纽约地铁》,电影《楚门的世界》主演金·凯瑞发布了NFT画作《太阳雨》,美国著名说唱歌手“盆栽”The Weekend还宣布要举办世界首场“加密巡演”。
《太阳雨》,十分震撼
对于这些艺人的粉丝而言,在Web3中追星,不只意味着欣赏、购买收藏偶像的NFT作品,还能产生更加直接的互动。因为NFT背后的金融纽带,能让创作者和收藏者之间共享一致的目标,甚至产生一对一的交流。可以说,Web3将有望重新定义粉丝经济。
Web3还在塑造新的音乐创作分发机制。2019年,一家叫作Audius的音乐共享平台成立。Audius运用区块链技术,让各方都参与到音乐创作、存储和分发的过程中,除了10%的网络运营费用外,剩余90%均归音乐人所有,而在传统平台中,音乐人只能收入12%左右。
随着越来越多女性加入到Web3项目中,数字时尚领域也前所未有地活跃了起来。2021年,女性艺术家NFT项目推出了首批1000件PFP(图片证明)令牌,上线10小时即宣告售罄。虚拟皮肤、虚拟化妆品等产品,凭借在现实世界中难有的视觉观感,而日渐热销。
Web3世界中,多彩的女性形象。/World of Woman
在设备方面,也有厂商展开了探索。10月24日,欧洲奢侈品手机品牌VERTU发布了旗下全球首款Web3手机“METAVERTU”。
METAVERTU支持一键进入Web3模式,这种模式下,用户可以使用内置的v-shot(版权相机、能一键生成NFT)、v-box(10TB分布式存储)、v-talk(隐私通信功能)、v-alue(加密货币钱包)等功能。
当然,价格也不便宜,最低都要3600美元(约合25000元人民币)。别看价格贵,刚上架没多久就售罄了。
这也足以见得,Web3确实是炙手可热。
三、未至 近两年,Web3的投资行情火热。麦肯锡最新数据显示,2021年全年Web3风险投资总额为324亿美元;而2022年上半年,风投对Web3的投资就已经超过了180亿美元。可以预见,2022年全年的风投总额势必会大幅度超过2021年。
在应用上,这两年和Web3有关的APP数量也在迅猛增加。根据数据研究机构Apptopia的报告,2022年可供下载的Web3应用程序数量的增长速度,几乎是2021年的5倍。年初至今,可供下载的应用程序增长了88%,并且还在快速增长中。
Web3的世界,正在构筑中
Web3的火热背后,不仅有资本的加持,也离不开政府的推动。目前,印度公务员考试已经涉及了Web3和NFT,其大型金融机构也在积极推动这一技术发展,比如印度银行推出2000万美元的Web3基金。
即使在民间层面,NFT游戏在印度也有很高的国民度。根据Finder针对26个国家43312人的最新调查,NFT游戏在印度最受欢迎,高达34%的受访者玩过。
另据虎嗅报道,日本政府也高度重视Web3领域,日本首相岸田文雄认为这是可以引领日本经济增长的互联网的下一代技术浪潮。
中国香港特区政府已经公开表示,决心竞争全球虚拟资产中心和全球Web3中心。
不过,由于Web3的发展尚处在早期,目前来看,还有许多漏洞要补。就拿Web3最为强调的安全属性为例,今年愚人节,周杰伦在Instagram上发文称,他被电话告知自己此前获赠的无聊猿游艇俱乐部#3738 NFT被偷了,他以为是愚人节的玩笑,没想到是真的没了。
周杰伦被盗的NFT藏品
这套NFT在当时的价值高达人民币320万元,能买30套鹤岗的房子。
当然,黑客给Web3造成的损失,远不止这320万元。
今年3月,世界上规模最大、最受追捧的区块链游戏Axie Infinity被曝遭到了黑客入侵,价值为6.25亿美元的虚拟货币被盗。被盗事件还造成相应虚拟货币币值骤降,带来了更多的经济损失。
要知道,这些损失的虚拟货币,可是很多家庭散尽家财投入其中才积累的财富,很多人就等着多玩几把,多赢点币来赚生活费。一夜之间,又家徒四壁了。
除了黑客造成的资产风险之外,还需防范Web3藏品带来的洗钱犯罪问题。
人民日报曾发表评论称,目前国内对于NFT的法律性质、交易方式、监督主体、监督方式等尚未明确,NFT存在炒作、洗钱和金融产品化等风险,对于NFT投资应该保持谨慎态度,警惕“击鼓传花”式的金融骗局。
比特币的币值已经算稳健了,都如同过山车一般
像Axie Infinity好歹是正规游戏,还有一些似是而非的Web3项目,本质上就是庞氏骗局,一旦入局,只能等着被割。
Web3还是一片新生的土地,这里有生机,也有杂草,还有凛冽的寒风、虎视眈眈的猛兽。确实有不少言论觉得Web3就是彻头彻尾的骗局,这种观点在Web2.0诞生时也有过。当时许多人觉得,Web2.0不过就是个毫无意义的行销炒作口号。
今天再回头看,Web2.0带来的革新,是显而易见的。也许不久的将来,Web3也会如此。
参考资料:
[1] 周星驰进军Web3,需要走几步|虎嗅
[2] VERTU发布全球首款Web3手机,背后隐藏了这些讯息|36氪
[3] 音乐圈押注Web3:一场游戏一场梦|新音乐产业观察
[4] Web3.0时代的音乐产业?恐怕还是一句空谈|钛媒体
[5] Web3正在重新定义粉丝的意义|nftnow
[6] 女性在Web3世界不是隐形人|JingDaily
[7] 全球最火NFT游戏一夜之间遭劫:玩家6.25亿美元打了水漂|品玩
[8] Web3,互联网新造神“机器”|每经头条
[9] 印度Web3“大跃进”|虎嗅
作者:土卫六;本文来自新周刊APP
原标题:别再尬吹web3,听得耳根都起茧了
来源公众号:锐见Neweekly (ID:app-neweekly),有态度、有温度、有速度、有深度
本文由人人都是产品经理合作媒体 @新周刊 授权发布,未经许可,禁止转载。
题图来自Unsplash,基于CC0协议
该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。
给作者打赏,鼓励TA抓紧创作!
{{{path> 赞赏
-
被捧上C位的视频号,还要让电商低调多久?
设计动态 2022-12-07十二月,无疑是电商人最繁忙的月份之一。 双十一刚刚结束,马上迎来“前有双十二,中有圣诞元旦,后有年货节”的日子……虽比不上618、双11的大促气息,但紧密的节奏还是让身为某服装品牌电商负责人的Lillico快喘不上气。 在这其中,她最关注的是从哪个平台可以拉到电商平台再开局?视频号有何过人之处?这篇文章以近期电商趋势平台——视频号为案例,发掘视频号做电商的优势与缺陷,拆解视频号电商运营的难点,推荐对电商运营和视频号感兴趣的童鞋阅读。
十二月,无疑是电商人最繁忙的月份之一。
双十一刚刚结束,马上迎来“前有双十二,中有圣诞元旦,后有年货节”的日子……虽比不上618、双11的大促气息,但紧密的节奏还是让身为某服装品牌电商负责人的Lillico快喘不上气。
在这其中,她最关注的是从哪个平台可以拉到新用户,“淘系流量接近封顶,抖音快手靠主播发挥,视频号算是少数潜力赛道了。”Lillico对 壹娱观察 说道。
今年初,由她运营的品牌入驻视频号,陆续参与过平台的618和双11大促, 虽然没有过千万的亮眼成绩,但仍然触达到一些之前未涉及到的新鲜顾客群。 对于腾讯而言,视频号已经成为其商业化的重要增量市场。
11月16日,腾讯发布Q3财报,提到视频号直播服务及音乐付费会员服务的收入增加。腾讯董事会主席兼首席执行官马化腾也表示:“我们在视频号中推出信息流广告,在国际游戏发行上取得突破,并通过降本增效措施,重新聚焦核心业务,有效控制成本增长。”虽然腾讯没有公布视频号相关的具体数据,但据QuestMobile数据,截止到2022年6月,视频号的活跃用户规模达8.13亿,位列短视频赛道第一。
此外,火星文化创始人李浩对外更是直接预测视频号2023年GMV有望达到4000亿的量级。视频号从2020年初上线测试,到如今已经过去了近3年,其中电商业务承担着主要的商业化份额,然而在经历过多个618和双11之后,视频号依然没有涌现出头部主播和出圈直播间,市场仍旧在这些重要“节日”里,直接忽略它的姓名, 相比较抖音靠一两年的时间搅动淘宝的危机感,到现在还默默之中的视频号,真的有那么大的期待值吗?
01 低调低调再低调 低调,是Lillico对于视频号电商最深刻的印象之一。 这一点首先反映在电商直播的入口上。 用户需要点击“直播”选择“更多”的二级页,才能看到购物直播间。
除此之外,“视频号推荐页面的信息流也会随机出现带货直播间,经过我们测试,每10条短视频中会随机出现1-2个直播间,频率并不够突出”,Lillico对 壹娱观察 补充道,“虽然视频号推出了开播提醒、提前预约这类功能,但对于我们而言最有效的还是靠社群宣传,吸引私域用户观看,不能像淘抖快一样走公域宣传的路子”。
微信截图
低调同样反映在视频号对外界的公开宣传口径。 今年11天猫京东首次没有公布具体数据战报,但相继提到“稳中向好”“再创佳绩”这类稳定军心的词汇,或者是将商家数量、订单量的增长比例作为总结。反观视频号,既没有公开数据战报,也没有披露站内商家和服务商的发展情况。
Lillico证实了这个现象:“几乎是两眼一抹黑, 除了跟熟悉的同行或视频号小二打探情况,我们都很难知道自己店铺位于怎样的水平。有时候即使小二给了战报,也会再三强调尽量不要对外透露。 ”
据悉,她所负责的品牌双11期间累计销售额接近百万元。对于她而言,销售额不是最关键的,更重要的在于挖掘40-50的三四线城市新顾客,她们不熟悉传统电商平台,却是微信资深用户,能够更快接受视频号的交易场景。
虽然水面看似静悄悄,但水面之下仍然有暗潮涌动。 据Tech星球报道,雅诗兰黛今年双11当天销售额突破800万,当天视频号成交额为75万,观看量达4万多人。护肤品牌魔介视频号总销售额1384万,IQOO双11总销售额突破800万。服务商爱逛旗下视频号双11总交易额达5.3亿,直播同比增长800%,累计订单量138万,成交超百万的达人为125个,成交超百万的商家有91个。然而,这些亮眼的数据鲜少出现在公众视野中。
某视频号服务商Alex向 壹娱观察 透露,官方这种低调的举动是为了制衡头部,希望营造公平竞争的局面,避免达人和品牌向头部服务商集聚,从而出现一家独大的局面。对于视频号而言,这种情况或许能实现平台所希望的低调行事, 但就从业者而言,闷声赚钱的风格也促使他们很少将视频号作为主要发力平台,进而影响到品牌团队搭建。
Lillico直言,虽然自己看好视频号的拉新潜力,但公司显然更看重销售额,因此并没有组建单独的视频号团队,而是号召门店直接开播。
无形中,这在一定程度上影响到头部博主在视频号的运营策略。 以抖音粉丝量过亿博主“疯狂小杨哥”为例,早在2021年3月就已入驻视频号,同步分发视频,此后还建立了“小杨臻选”矩阵视频号,授权分发直播间带货切片。
今年10月15日,“疯狂小杨哥”背后的团队曾在视频号进行过一场试播,但之后一直没有直播带货动作。与此同时,视频号也在积极招募各平台博主入驻,并给予流量券激励。
但值得一提的是,视频号与公众号一样,主页不显示粉丝数量,公众无法获知视频号头部博主信息,这对于品牌筛选合作达人带来了不便。Lillico表示,因为没有公开可参考的博主粉丝量,所以团队很少考虑博主合作带货,而是多选择品牌自播的形式。
02 私域优势不突出,“灰产链”阻碍专业度 如果说视频号选择低调是希望闷声赚钱,那么从另一个角度来看, 这也是视频号的私域属性紧密相关。 今年7月,视频号推出了“视频号小店”功能,以此替代“微信小商店”在视频号的应用。此后在10月底,视频号针对非品牌商家收紧第三方小程序的使用权限,加强对非品牌商家的系统性管理。
从本质来看,这两项功能都与视频号“购物车”相关,也是视频号对于建立站内闭环的渴望。早在视频号之前,抖音、快手都有过相似断外链的举动。不过,“切断”外链这个动作虽然轻松,但如何不影响站内情况,则是另一道难题。
微信截图
以快手电商为例,今年双11之前,快手宣布恢复全面开放淘宝、京东的商品链接直达功能,至于恢复多久,仍然有待观察。有媒体报道,快手切断外链后,站内商品SKU减少,影响了转化率和客单价的提升。
在快手第二季度财报中,快手电商GMV增速为31.5%,相比去年同期快手电商GMV超100%的增速,今年的增速明显放缓。可能是预测到切断外链的连锁反应,再加上此时的江湖地位并不稳固,视频号仅切断了非品牌商家的第三方小程序外链,更鼓励品牌商家在入驻时同步提交在天猫、京东等第三方平台的经营截图,可加速官方审核。
由此可以看出, 即使拥有引以为傲的私域优势,视频号也不得不向更强势的传统电商平台妥协。 如果再对比隔壁抖音、快手的电商化进程,视频号纵然拥有更多用户也未必形成旗鼓相当的优势。 不仅是私域闭环尚未完全搭建,视频号在投流玩法上也与抖音、快手存在一定的差距。
据悉,今年上半年,视频号引入流量券机制,博主或服务商可以通过完成官方指定目标获得流量券,为其短视频或直播间投流。
视频号北极星计划
同时,视频号引入了私域换公域的模式,即“商家每引导一个私域用户进直播间,平台将至少会激励一个公域用户给商家”,这意味着视频号鼓励商家以私域运营为核心。 由于流量券暂不支持从官方渠道买卖,平台激励成为了少数获取流量券的形式,因而也出现了一条灰产链。
据新播场报道,有MCN通过邀请达人入驻获取流量券之后,情愿自掏腰包为入驻达人提供现金形式的激励,从而将视频号官方奖励的价值更高的流量券转手出售。据了解,视频号流量券需求量很大,顾客大多是卖货商家。这条灰产链从今年4月开始萌芽,直至11月22日视频号制定新规才得以被约束, 这也让从业者感慨“视频号团队专业度不够”。
03 是“发育”还是“亮相” 2020年上线之初,视频号曾有一个梦幻般的开局,不少错过抖音、快手风口的内容创作者闻讯赶来,希望能重现微信公众号当年的奇迹,但由于产品功能不健全,视频号逐渐显现出退潮趋势。之后,视频号的演唱会计划一度刷屏朋友圈,让创作者重新看到希望,但离商业化仍然有一段距离。
今年世界杯开赛之时,有一众大V感慨视频号乃至整个腾讯系都没能拿下世界杯版权,错过这个全民关注的流量话题。
但即使能拿下版权,对于视频号又能产生多少影响呢? 归根结底,视频号仍然缺少创作者的原创独家内容 ,就像抖音有“疯狂小杨哥”,快手有“辛巴”,B站有“罗翔”一样,视频号的根源在于缺乏原生内容生态。
即便有演唱会、体育赛事、新闻事件等能够引起全民讨论的内容,视频号仍然是站在朋友圈、微信群聊等微信生态的肩膀上借力,无法自给自足。这也间接影响到视频号电商的发展。显然,视频号电商走的并非淘宝、京东传统货架电商的模式,而是倾向于抖音、快手的短视频电商路数。
然而内容生态的缺乏,导致视频号迟迟没有出现代表性的博主。 无论是疯狂小杨哥、东方甄选等这些的市场化头部主播,还是遥望等一线MCN机构,都用开账号的表态,来认可视频号的潜力,但谁都没有为其长久驻足,开启专业化运营,可见大众对于视频号的流量之困,不止于此。
在品牌自播这条路上,视频号也未健全完善的供应链 ,在黑猫投诉上,曾出现过顾客表示视频号后台无人回复的情况。“低调”是把双刃剑,一方面可以隐匿其锋芒,在暗中“发育”一波,另一方面也会影响公众对其的关注度,在培养用户心智上有所欠缺。站在“发育”和“亮相”天平两端的视频号,留给它做抉择的时间已经不多了。
*本文的Lillico、Alex皆为匿名。
作者: 壹叔团队
来源公众号:壹娱观察(ID:yiyuguancha),泛娱乐产业的望远镜和声呐。
本文由人人都是产品经理合作媒体 @壹娱观察 授权发布。未经许可,禁止转载。
题图来自 Unsplash,基于CC0协议。
该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。
给作者打赏,鼓励TA抓紧创作!
{{{path> 赞赏
-
涨价、转型和被围剿,SHEIN能打出逆风局吗?
设计动态 2022-12-07“我希望SHEIN衣服的价格最好不要因为TikTok而涨价。”2020年5月,一位美国加州女孩在社交平台上留下了这样的一句话。 彼时,SHEIN已经在北美和欧洲掀起廉价快时尚浪潮,价格便宜、款式多、上新快,是SHEIN的一往无前大杀器,而SHEIN在TikTo随着互联网大厂们纷纷瞄准出海赛道,原先占有一定优势的SHEIN,现在则需要接受来自多方的挑战,这也驱使着SHEIN开启转型之路,比如试水会员制,等等。那么SHEIN是否可以在跨境电商赛道上始终保持优势地位?本篇文章里,作者针对SHEIN的发展进行了解读,一起来看。
“我希望SHEIN衣服的价格最好不要因为TikTok而涨价。”2020年5月,一位美国加州女孩在社交平台上留下了这样的一句话。
彼时,SHEIN已经在北美和欧洲掀起廉价快时尚浪潮,价格便宜、款式多、上新快,是SHEIN的一往无前大杀器,而SHEIN在TikTok等社交媒体上的广告,则帮助SHEIN极速扩张。
2020年8月,SHEIN完成E轮融资,估值达150亿美元。而到2022年4月SHEIN的F轮融资时,SHEIN的估值已经突破1000亿美元。截至目前,SHEIN已经是全球第三大独角兽公司,仅次于字节跳动和SpaceX。
但两年前那位加州女孩在社交平台的留言一语成谶,近一年,海外社交媒体上对SHEIN逐渐涨价的抱怨越来越多。“哪款卖得好,哪款就涨价。”众多海外消费者发现了SHEIN的这种涨价规律。
上市前的盈利压力、多项固定成本的上涨以及ESG(环境、社会和公司治理)争议,都迫使SHEIN不得不涨价。但SHEIN涨价后的产品价格,和ZARA等快时尚品牌以及亚马逊等电商平台的产品价格相差无几,不再具备价格优势。
更为雪上加霜的是,来自阿里、拼多多和抖音集团的出海产品,正在全方位围剿SHEIN。其中,拼多多跨境电商平台Temu的凶猛打法,使得SHEIN不得不加快了沉淀消费者的步伐。
「新熵」独家获悉,SHEIN于近期开始在美国本土试水会员制,推出了“SHEIN CLUB”,用户每季度花费6.99美元,可享受10万余件商品的专属95折优惠以及其他折扣。 SHEIN在其他国家和地区暂未推出会员制,但预测未来也会逐渐推出。
如今的SHEIN,似乎走上了淘宝当年的老路,即平台转型升级的同时,遭遇了下沉市场守卫战。SHEIN稍不留意,其盘踞的海外下沉市场就会失守。
一、SHEIN全面涨价,从爆款开始 SHEIN在各国的涨价,存在一定的通胀因素。2022年以来,全球多数货币对美元汇率都在下降,且贬值幅度多超过人民币,所以SHEIN的常规涨价属于正常现象。但问题是,即便在美国,消费者也感觉到SHEIN在涨价。
10月下旬,有一位美国消费者在社交媒体抱怨道:“这个(爆款T恤)快卖光了,并且SHEIN给它涨价了。”在国内外社交媒体上,众多消费者不约而同地总结出了SHEIN的涨价规律,即哪款商品销量变高,哪款商品就会持续涨价。多位加拿大消费者表示,近一年在SHEIN上看中的商品,一个月内价格涨了1.5-3倍不等。可以确定,SHEIN的涨价,实际上高于全球通胀水平。
消费者在社交媒体抱怨SHEIN涨价
除了涨价,SHEIN还逐步减少了用户优惠和福利。「新熵」从美国消费者处获悉,以前的定期优惠,新老用户不限,但如今只有新用户可以享受。SHEIN以往周日下单无门槛包邮,但如今需要满9.9美元才能包邮。退货期限也有所缩短,从45天缩减为35天。
在其他国家,也有消费者表示包邮门槛变高、退货周期缩短,甚至有新加坡消费者表示,如今SHEIN退货每件需扣除3美元运费,对消费者的吸引力大大减少。种种迹象表明,SHEIN加快了提高利润率的步伐。
调研数据显示,2021年SHEIN的净利率在6%左右。国盛证券2021年11月的报告则称,SHEIN的净利率为5%-10%。而服装行业巨头的净利率普遍在10%以上,Zara母公司Inditex2021财年净利率约为11.7%,优衣库母公司迅销集团2022财年净利率约为12.37%,耐克2022财年净利率约为12.9%。 综合来看,SHEIN的利润率处于行业较低水平。
对于SHEIN来说,过低的净利率意味着其盈利能力存疑、抗风险能力差。更重要的是,2021年SHEIN的增速已经放缓,从2020年250%的增长急速下降到60%,即将见顶。在谋求上市的背景下,SHEIN持续低下的利润率,很难满足资本市场的要求。
另一方面,生产、仓储、物流、广告等成本的持续走高,以及ESG方面争议的倒逼,也使得SHEIN不得不涨价。
在生产侧,SHEIN对供应商的极端压榨,已经令许多供应商放弃了和SHEIN的合作。有SHEIN前供应商告诉「新熵」:“每件衣服,SHEIN只让工厂赚1-3块钱。如果哪款销量不好,需要商家自己消化库存,厂家们只能把卖不掉的衣服转内销,放到国内电商平台售卖。但是由于服装偏欧美风,很多款式国内根本卖不掉,厂家只能自己承担亏损。这样的话,有的厂家总的算下来是亏损的,所以就不再合作,及时止损。”
据了解,现在多是经验少、订单少的厂子愿意做SHEIN的订单。SHEIN在供应商中的口碑变差了,对其议价能力也注定造成影响。随着今年以来,SHEIN在均价和利润更高的男装、童装等领域重点招商,并且也开始做中高端线,传导到供应端,供应商的利润空间也会变大,这注定会拔高SHEIN的采购成本。
此外,SHEIN的拍摄成本也是难以优化的一项生产成本。SHEIN每天上新数千个SKU,但是每款的库存都很少,单个SKU的库存多在100件以内,非爆款不补单。但是每一款都要拍图、且多采用酬劳更高的外国模特拍摄。常规的电商平台,存在多家店铺公用一套图片的情况,平摊下来,每款服装的拍摄成本极低。而SHEIN陷入了凭借大量且快速的上新取胜,拍摄方面的边际成本却居高不下的境地。
SHEIN每天大量上新,拍摄成本难以降低
值得注意的是,由于极致压缩供应商利润,导致许多商品质量差、退货率高,也拉高了SHEIN的仓储成本。
而在物流方面,SHEIN则面临着愈加收束的物流政策。根据一项国际协议,从中国向美国邮寄小包裹的成本远低于其他国家,甚至和美国国内物流成本相差无几,且美国不对价值低于800美元的货物征收进口关税。
在其他许多国家,也有类似的规定。跨境物流的极低费用,也是SHEIN能将低价做到极致的重要因素。但是2022年美国出台了新法案,一旦法案推行,SHEIN将失去免税待遇。已经有不少加拿大消费者表示,在SHEIN上购物经常被加税,而加税后的SHEIN商品,其价格优势大大减少。
SHEIN的广告成本也持续高走。2021年,SHEIN营收约157亿美元,关于营销占比,业内人士普遍推测在10%-20%之间。随着TikTok在全球范围内走红,TikTok逐渐成为SHEIN重要的广告渠道之一,根据VidIQ的数据,SHEIN在TikTok上的参与率为4%,远高于行业平均水平的1.45%。
据报道,SHEIN每天在TikTok上投入10万美元的广告费,除了广告内容,博主的测评视频也是SHEIN的隐形广告。但随着抖音集团的出海电商TikTok Shop和Fanno的成熟,TikTok注定难以成为SHEIN成长的肥田。
而ESG方面的争议,也倒逼SHEIN不得不提高生产成本。 海外消费者对SHEIN的ESG批判中,环境污染、服装安全、劳工保障和设计抄袭依旧是最为尖锐的几个问题。
近两年,在国外社交媒体上,越来越多的时尚博主和消费者开始推崇可持续服装品牌,即服装多使用可降解或可循环使用的面料,以减少环境负担。而快时尚品牌多采用廉价的聚酯纤维面料,服装寿命短,还诱导消费者快速更新衣柜,会造成大量难以被自然快速降解的服装垃圾,所以频繁遭到环保主义消费者的批判。
批判SHEIN环保及劳工保障问题的帖子(翻译仅供参考)
基于相关争议,知名快时尚品牌都付出了一定资源和精力去应对和改善。例如,ZARA、优衣库越来越多地使用可降解面料和节能减排型制造工艺,还使用更为环保的纸质包装。优衣库的店内广播甚至会特意强调品牌在环境友好方面作出的成绩,以提高用户好感度。
但目前SHEIN在环保和服装安全方面仍不成熟。不仅许多服装质量差、被指是一次性服装,还被曝光多起安全问题。2021年,SHEIN的部分儿童服装因违反美国联邦可燃性标准被召回;儿童及孕妇的服装配饰,还被加拿大等国发现含铅量超标。
瑞士的Public Eye组织于2021年实地探访了SHEIN在广州番禺的代工厂后,发现代工厂内仍存在超时劳作、火灾隐患、碳排放不透明等问题。2022年年初,SHEIN发布的可持续性和社会影响报告中,也承认在近700家受审计的供应商中,83%的供应商存在“重大风险”。
不过,SHEIN承诺未来使用更可持续的纺织品,并披露其温室气体排放量。也有供应商透露,SHEIN今年提高了供应商门槛,有助于减少ESG相关争议。但选用高质量的供应商和可持续的面料,也注定伴随着更高的生产成本。
有关抄袭方面的争议,实际上是快时尚品牌共同的难题,但SHEIN却尤为突出。「新熵」总结发现,SHEIN的服装款式灵感主要来自独立设计师、原创品牌、设计师网站和奢侈品牌,因此版权纠纷不断。但SHEIN每年要保持上架十几万SKU、且紧跟潮流,原创问题几乎无解。而加大原创设计的每一步,都需要付出不少的设计成本。
多个海外设计师控诉SHEIN抄袭了自己的设计
有快时尚品牌代工厂负责人告诉「新熵」,“SHEIN挣的其实就是压榨供应链的钱,如果SHEIN真的想解决ESG问题,其实需要和生产标准、劳工权益更完善、生产工艺更高的大型代工厂合作,但其生产成本会骤升,售价也会逼近ZARA和优衣库的水平。”但这样一来,SHEIN便彻底失去了其低价优势。
SHEIN接下来的主要任务,无疑是在成本、利润率和完善ESG之间找到平衡点。目前来看,SHEIN试图通过推出中高端子品牌和完善电商生态以达到平衡。
二、转型升级在即,严防死守新对手 近两年,SHEIN推出了十余个子品牌,包括年轻快时尚ROMWE、高端服装MOTF、欧美快时尚EMERYROSE、韩系服装Dazy、运动时尚GLOWMODE、内衣品牌Luvlette、彩妆品牌SHEGLAM、鞋履品牌CUCCOO、宠物品牌PETSIN等等。
目前SHEIN官网有11个子品牌
其中,MOTF、Dazy等中高端品牌,获得了对服装品质有要求的消费者的青睐。更高溢价的服装,是SHEIN解决盈利能力弱的最佳途径,还能为SHEIN吸引高消费能力群体,因此,SHEIN未来逐步转型升级几乎是必然。
虽然SHEIN已经到了转型升级的临界点,但新的跨境势力的涌入,让SHEIN不得不做好防守的准备,包括但不限于Temu,抖音集团的TikTok Shopping、Fanno、IfYooou,阿里巴巴的Allylikes、Lazada、Miravia等跨境电商。
目前来看,今年9月刚刚上线的Temu,对SHEIN的威胁最大,因为Temu延续了拼多多所擅长的主攻下沉市场的基因,靠着极致低价和允许退款不退货等极致售后服务,迅速席卷美国。
如今的SHEIN,其处境和十年前的淘宝很相似,即走向中高端市场的地基已经打好,但如何在转型升级的同时避免下沉市场被对手吃掉成了最大难题。
淘宝没能打好下沉市场守卫战,以至于拼多多短短几年内迅速崛起。但对于SHEIN来说,在出海电商的下沉市场守卫战之中,绝不能输,因为SHEIN本身是独立站,不邀请商家入驻,自身承担了所有风险。虽然SHEIN今年在巴西试水了平台模式,引进独立商家和品牌,但对于深耕供应链多年的SHEIN来说,独立站是其以往探索出的跨境下沉电商最优解,无法轻易放弃。
SHEIN最初做独立站,本质是因为在低价低质商品中,品牌不具备太大的意义。SHEIN砍掉中间商,将工厂的货统一贴上自己的牌子,就能自己吃掉所有利润、并保持低价优势。但随着跨境电商内卷升级,SHEIN也开始叫苦不迭,最明显的表现是,许多供应商表示SHEIN开始勒令供应商不许和Temu合作。而以往,SHEIN并不干涉供应商和其他平台的合作。
Temu并非独立站,而是电商平台,商家可自行申请入驻。「新熵」了解到,Temu商家仅需上传商品并发货即可,无需聘用跨境客服,客服由平台负责。Temu目前0佣金、0保证金,允许个人商家入驻,入驻门槛极低。面对Temu的懒人式开店流程,以及掌握自主权的诱惑,许多厂家心中的天平已经开始向Temu倾斜,SHEIN若持续要求商家“二选一”,恐对自身不利。
目前Temu上最畅销的商品品类是童装、玩具和小商品,虽然Temu尚未和SHEIN构成直接竞争,但随着SHEIN也正在向全品类发力,两者成为劲敌只是时间早晚的问题。所以SHEIN未来必定会加快平台化,引进大量多元化的商家,提高竞争力。
Temu上畅销的商品
SHEIN商品涨价后,与之不匹配的是,商品质量并没有提升,让消费者渐生不满。恰逢Temu上线,消费者便流向了Temu。“最近一直在Temu买东西,SHEIN再涨价我就不买了。”“SHEIN不包邮我就转投Temu的怀抱”,不少海外消费者在社交平台留下了类似的话语。
有消费者表示开始转向使用Temu
面对Temu的来势汹汹,SHEIN在完成平台化转型前,加快了提高用户粘性的步伐。 提高下沉市场消费者粘性的方法主要有三种:一是打价格战;二是推行会员制福利;三是完善生态。
对于急需提高利润空间的SHEIN来说,直接打价格战没有太多的操作空间,更何况Tume的部分供应商曾经是SHEIN的供应商,盲目打价格战,对SHEIN十分不利。而会员制福利和完善生态则有可能在保证利润率的同时,对消费者造成优惠错觉,促使其高频消费。
以往,淘宝为了提高用户粘性,推出了一项可称为“全家桶式优惠福利”的会员产品,即88VIP。截至2022年6月,88VIP会员数已达到2500万,人均年消费达57000元,可见会员制优惠对用户粘性和客单价的刺激作用。
而SHEIN近期在美国本土推出会员制产品“SHEINCLUB”,无疑和88VIP异曲同工。但仅仅一个会员制,还远不足以对抗Temu们,毕竟拼多多也十分擅长以会员制提高用户粘性,Temu需要在下沉市场打造出具有绝对优势的护城河,即像88VIP一样,背后拥有对手难以复刻的消费生态。
SHEIN近期在美国推出二手交易平台SHEIN exchange,可被看作是打造消费生态的第一步。这个平台对SHEIN的作用,犹如闲鱼之于淘宝,当消费者对不满意的商品的去处有了心理预期,就能够反向促进消费。二是顺应美国人的消费习惯,因为很多美国人会将不要的衣物送到线下二手店,存在二手交易基础。顺便,SHEIN exchange也能为SHEIN减少一些环保方面的争议,一举三得。
此外,SHEIN今年开始在巴塞罗那、大阪等海外城市还开设了快闪店。有日本消费者告诉「新熵」,SHEIN的快闪店无法直接购买商品,试穿后如果想买可以扫码,在线上下单购买。SHEIN的快闪店,无疑起到了广告、消费唤醒、加强品牌形象的作用,进一步完善了消费生态。
但随着跨境电商市场的饱和,一个更为棘手的情况出现在大家眼前,即在多巨头势力对抗中,跨境电商的多项成本都被拉高。
三、SHEIN也要“开源节流”了 多巨头在跨境电商的红海里激烈对抗,最终结果必然是供应商话语权和议价权提升、广告投放和优惠力度陷入无休止的“军备竞赛”。
9月上线之初,Temu的投放预算就达到了10亿元,而SHEIN如今每月的营销费用也在10亿元左右,两者的广告投放渠道也高度重合,主要是搜索引擎和社交媒体。随着两者的用户基本盘愈加重合,两者在营销方面的投入必然会持续走高。而优惠竞争、低价竞争又十分考验各自的烧钱能力和供应链压价能力。 多重压力下,SHEIN不得不谋求开源节流。
SHEIN的“开源”,即需要开拓更多的市场,争取更多的消费者。「新熵」盘点发现,目前全球224个国家和地区中,SHEIN已经在174个国家和地区上线,除了一些局势不平稳的国家、人口极少的小国以及极度贫穷的国家,就仅有人口超十亿的中国和印度SHEIN并未开展业务。
SHEIN并不是没有在印度上线过,而是于2020年被印度政府封杀并下架。放眼全球,SHEIN可开垦的市场几乎只剩下中国。
关于SHEIN为什么不在中国上线,原因很明显,因为SHEIN在跨境电商中如鱼得水,本身挣的是“资源差”“信息差”的钱,但在国内,便不再具备这样的资源差,更何况,SHEIN的众多供应商,本身就会通过国内电商平台清库存,导致阿里巴巴、拼多多等电商平台上存在很多SHEIN同源、同款商品。而在国内快时尚消费市场,优衣库、ZARA、UR都很成熟,SHEIN也不具备质量和设计优势,所以以往SHEIN并不具备登陆中国的条件。
但随着SHEIN展露中高端化、平台化趋势,便具备了在中国市场上线的基础。 而Dazy这样符合亚洲女性审美的子品牌的出现,也为SHEIN进军中国市场铺好了路。可以预见,SHEIN如若进军国内市场,也会以Dazy、MOTF、GLOWMODE等售价较高、质量更好的中高端子品牌为主。即便SHEIN在中国市场难以达到国外的热度,但对其销售增长仍会有所助益。
Dazy、MOTF、GLOWMODE的产品价格较高、质量更好
在“节流”方面,SHEIN的主要动作,是在人工成本更便宜的国内省份和海外国家拓展供应链。在以往,SHEIN的供应商多聚集在产业带发达广东、江苏、浙江等地,但随着拼多多、抖音集团等巨头势力也在这些地方扎根,供应链的产能和性价比都将不比从前。
目前,SHEIN已经逐渐在福建、山东、湖北、江西等省份开辟供应链,不再依赖单一产地;二是SHEIN也开始准备在海外国家兴建供应链,有消息称SHEIN已经和巴西两家工厂签署了保密协议。也有业内人士表示,如果国内其他巨头拉高了供应链成本,SHEIN未来也有可能将在快时尚代工厂产业同样发达的东南亚国家开拓供应链。
随着SHEIN风靡全球,跨境电商和独立站的生意,已经进入了卷生卷死的紧要关头,基本每一个可能存在商机的像素点,都被一方势力填满。 当SHEIN推出品牌矩阵,Temu也推出了品牌战略,计划打造100个出海品牌;当SHEIN走向中高端化,阿里巴巴也推出中高端电商平台Miravia对垒。
而Cider、Revolve、Fashion Nova、Boohoo等国内外电商独立站也都找准了各自的细分定位,俘获了忠实的客群,期待成长为下一个SHEIN。
而对于先吃到“螃蟹”的SHEIN来说,跨境电商的前半场是顺风局,肆意航行,满载而归;后半场则是逆风局,在盈利压力和竞争对手围剿压力下,SHEIN的高速增长神话很难再续写,而在平台化和中高端化进程中,则需要SHEIN持续地劈风斩浪。
作者:于松叶 ;编辑:月见
原文标题:涨价、转型和被围剿,SHEIN难打逆风局?
来源公众号:新熵(ID:baoliaohui),洞察商业变量,探寻商业本质。
本文由人人都是产品经理合作媒体 @新熵 授权发布于人人都是产品经理,未经作者许可,禁止转载。
题图来自 Unsplash,基于 CC0协议。
该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。
给作者打赏,鼓励TA抓紧创作!
{{{path> 赞赏
-
15000字深度解析!银行金融APP的适老化设计指南
UI交互 2022-12-07引言任月月:据调查,中国人口老龄化程度在全球已处于中上水平。2022 年《政府工作报告》提出:“积极应对人口老龄化,优化城乡养老服务供给,推动老龄事业和产业高质量发展”。应对人口老龄化已上升为国家战略。引言
任月月:据调查,中国人口老龄化程度在全球已处于中上水平。2022 年《政府工作报告》提出:“积极应对人口老龄化,优化城乡养老服务供给,推动老龄事业和产业高质量发展”。应对人口老龄化已上升为国家战略。
其实早在 2020 年 11 月国务院办公厅就印发了《关于切实解决老年人运用智能技术困难的实施方案》。2021 年 4 月工业和信息化部办公厅发布了《关于进一步抓好互联网应用适老化及无障碍改造专项行动实施工作的通知》。该通知针对互联网网站、移动互联网应用(APP)制定了改造标准规范。
目前很多头部大厂都已经按照要求完成了应用的适老化改造,并且分享了很多改造经验。可以说,适老化是今后应用发展的一个大趋势。笔者最近的工作也涉及到了相关改造设计,所以针对这个主题,做了一些学习探索。看了各类文章,结合 N 家银行 APP 的 适老化设计 场景体验和自己项目实践的思考,在这里与大家分享。希望可以给到大家一些启发。
最新的银发族研究报告:
如何做好适老化设计?来看阿里出品的研究报告! 阿里云、零点有数与上海交通大学设计学院三方联合在 U Design Week 中发布了《银发族数字化产品适老化研究蓝皮书》(以下简称“蓝皮书”)。
阅读文章 >
一、什么是适老化设计 1. 适老化设计的定义
百度百科上是这么定义的,适老化设计是指在住宅中,或在商场、医院、学校等公共建筑中充分考虑到老年人的身体机能及行动特点做出相应的设计,包括实现无障碍设计,引入急救系统等,以满足已经进入老年生活或以后将进入老年生活的人群的生活及出行需求。
互联网时代,我们的应用在设计的过程中,同样也需要考虑老年用户的特征与需求。移动互联网的发展给我们带来了巨大的便利,特别是在疫情时期,很多事情实现了线上办理。但与此同时,也暴露出了很多问题,很多老年人被丰富的互联网世界拒之门外,比如不会使用健康码出行受阻、不会线上转账仍需跑银行办理业务、不会线上挂号只能线下排队等等。大家可以想想,自己身边的长辈是不是经常会出现上述类似的问题。我们在“嘲笑”他们落伍的时候,更应当反思,这个社会有没有为他们考虑。作为 设计师 ,能够为他们做些什么?
2. 无障碍设计
无障碍设计常与适老化设计一起出现,无障碍设计不止适老化设计,是针对所有人的设计,要包容所有人。可以说是一种通用性、包容性设计。
通用性设计:强调设计所有的系统和产品,使每个人都能使用,无论他们的年龄或能力。 包容性设计:好的设计应该满足尽可能多的使用者的需求。
例如:苹果系统的设计,他贴心的考虑到了行动、视力、听力和认知障碍人士的各类需求,并为其设计,让他们也能轻松的使用苹果的产品。
在研究适老化设计的过程中,我发现一些适老化设计的规则和无障碍设计有着互通点。可以说适老化其实是信息无障碍的一部分,而信息无障碍的一些设计手法可以解决适老化中的部分问题。所以在此简单的聊一聊两者的关系,以更好的辅助大家对后文的理解。
二、为什么要进行适老化设计 1. 用户群体
人口老龄化已成为全球普遍现象,但中国人口老龄化规模大、程度深、速度快。
据局部抽查统计概算,全国 45 岁人口比例已达到 38%,如果按此比例计算,全国 45 岁以上人口数量已达 5.09 亿。另外,根据中国互联网络信息中心(cnnic)在京发布第 49 次《中国互联网络发展状况统计报告》显示,截至 2021 年 12 月,我国 60 岁及以上老年网民规模达 1.19 亿,互联网普及率达 43.2%。
个人认为,互联网的适老化设计除了对 60 岁及以上老年网民友好,对于 50 岁左右的银发人群也同样有益。所以在这里,我将用户群体拓宽到了 50 岁及以上的银发人群。
小说明: 根据观察身边的年长用户,50 出头其实就已经存在看不清、搞不懂、不敢用、不会用等问题了,而且他们非常喜欢适老版本,也会主动要求帮忙把各类 app 调整成适老版本。所以在这里将用户群体进行了拓宽。
根据 QuestMobile 数据显示,2022 年 8 月,银发用户月活跃用户规模达 2.97 亿,同比增长 12.5%,月人均使用时长 121.6 小时,同比增长 8.6%,增速明显高于全网平均水平。
而且,国家在不断地向老年群体普及互联网,对于金融产品,银发人群具有很大的消费潜力,具有“有钱有闲”的市场优势。
那么面对如此庞大且不断增长的用户群体,我们的设计势必要为其考虑,才能更通用。
2. 人文关怀
老年人等弱势群体,从生活到日常娱乐,他们对于产品的体验会和我们存在一定的差异。随着年龄的增长,老年用户会出现视力、听力、触觉、认知理解等能力的下降。且在心理上会对新鲜事物有一定的恐惧和抗拒,容易出现情绪挫败。一旦使用受阻,便会感到无助和沮丧,不愿意继续使用。
另外,互联网信息的繁杂、经常出现的网络诈骗案例,也给老年用户带来了不安全感。他们会因为担心,不小心点了不该点击的链接,造成自己的资金损失。在工业和信息化部办公厅发布的适老化标准中也指出在适老化界面中需要保证产品的安全性,限制广告插件及诱导类按键。
为了给老年用户带去更好、更安全的产品体验,让他们跟上时代的步伐,我们的设计应当为其考虑。为他们,也是为未来的我们。
3. 不止为老年人
虽说适老化设计,只是无障碍设计的一部分,但是我们的设计,最终有可能所有人都会受益。
在某些特定的情况下,所有人都可能是“老年人”或“残疾人”
提到“老年人”或“残疾人”,我们会想到以下几种场景:
视觉障碍:看不清、失明 听觉障碍:听不清、耳聋 行动障碍:坐着轮椅 认知障碍:不理解内容的含义 对于以上几种场景,是只有“老年人”或“残疾人”才会碰到吗?当然不是。在某些情况下,我们也会碰到。这里就要提到一个概念:“情境性障碍(Situational Limitation)”,是指我们任何一个人,都会在某个场景下出现临时性的障碍。
比如在一些银行服务中,情境性障碍的场景案例有:
视觉障碍:在户外场景,我们使用手机银行,可能会出现文字看不清的情况; 听觉障碍:在嘈杂环境中,我们会听不清一些语音播报; 行动障碍:手上提着东西,想使用手机银行进行线下付款,可能会误点到别的功能上去; 认知障碍:银行新上线了一个功能,我们之前从来没有碰到过,会出现短暂的认知障碍。 也许我们设计的初衷是为老年人进行无障碍设计,但其实在很多时候,因为外部环境,我们也会出现短暂的情境性障碍,所以为他们设计,也是为我们自己设计。
4. 银行用户需求
网上银行 app 行业近年来收获了大量的用户增长,于此同时,也出现了各类声音,这些声音反应了用户的各类需求。据统计网上银行 APP,41 岁及以上用户仅占比 12.8%。对于年长网银 APP 用户对保险服务的需求更高,同时也更为偏好风险较高的股票交易。虽然现阶段他们在银行金融业的渗透率较低,但是随着更多的老年用户接触互联网金融,预计活跃渗透率将会进一步提升。
对于这群如此有消费潜力的用户,现实中,有很大一部分老年用户对网上银行服务存在不了解、不敢用、不会用等痛点。
场景小故事:以下案例来自身边长辈
① 银行卡办理与认证
场景:银行很多业务已实现半自动化,需要手机配合操作完成业务。
问题:辛辛苦苦跑一趟银行,但因手机使用不熟练,不知道怎么操作,银行员工又忙没能详细指导(代劳),导致业务无法顺利办理,只能第二天再跑一趟。
② 线上转账
场景:从柜面转账到 ATM 机转账,再到现在的手机转账,完全不同的转账方式,接受起来很慢,操作不熟练,不敢放心使用。
问题:年长用户,对于网络陌生,内心保持不信任。宁愿跑银行也不敢、不会在手机银行进行转账操作,或者就让子女代劳,完全没有享受到互联网带来的便捷。
根据网易 UEDC 调研,老年群体手机银行操作体验痛点和对手机银行的期望如下:
如何将这群用户服务好,是当下很多网上银行 app 需要思考的问题。
另外,在很多行业中,中老年人因为拥有丰富的经验在岗位上会更具优势,对于企业银行用户来讲,处于关键角色的用户例如财务,工作年限长、经验足是优势。那么企业银行面向企业的设计,如何提升中老年用户的使用体验也同样值得考虑。
三、老年用户的特征与需求 想要更好地为老年用户做设计,我们就需要详细了解老年用户的特征与需求。从前文的使用现状中,我们可以将老年用户的需求分为生理需求和服务需求。
生理需求:看不清、难操作、怕出错(容易挫败)、不理解、听不清
服务需求:不了解、找不到、不会用、不敢用
这两类需求的来源还要从老年用户的特征入手去解析。
1. 老年用户之困——视觉障碍
随着年龄的增长,老年用户视觉的敏感度、明暗感觉、空间感、色彩感都会有所下降。而且老年用户患有眼部疾病的概率会有所增加。60 岁以上的老年人中,视觉器官老化导致视力减退者为 47.9%,其中绝大多数是远视。
常见的问题有:字小看不清、感觉字的颜色淡看不清、难以识别蓝紫色为代表的冷色调颜色、动态视觉感知弱等。
2. 老年用户之困——听觉障碍
根据听力学的研究,男性约从 45 岁以后开始出现听力衰退,女性稍晚,随着人类寿命的延长,老龄人口的增多,老年人耳聋的发病率也有所增加。
常见的问题有:听不到、听不清、觉得语速过快等。
3. 老年用户之困——行动障碍
老年人的行动以及各项操作会随着年龄的增长而变得缓慢、不协调。而且老年人的手指会偏大,细胞水分减少,皮肤皱纹加深,会使得触屏灵敏度大大降低。动作精准度的下降使得老年人无法准确的完成手势操作。
常见的问题有:不会复杂的手势操作、容易误触、点击困难、无法长时间连续操作等。
4. 老年用户之困——认知障碍
人的认知能力也会随着年龄的增长而下降。老年人会出现反应慢、判断力下降、学习能力退化的情况。在这种情况下,老年用户接触互联网的心理障碍就更加剧了。
常见的问题有:难接受新应用、难分辨信息真伪、不理解图标/图片的意思、容易挫败更容易接受熟悉的东西等。
四、银行金融产品适老化设计应当如何入手 针对以上老年用户的需求,银行金融产品的适老化设计应当如何入手。接下来我们结合《移动互联网应用(APP)适老化通用设计规范》中的内容(以下简称《规范》)和现有的各类产品适老化设计现状一起学习下如何进行适老化设计。
《规范》适用范围为:各企业在提供适老化服务时的内嵌适老版界面、单独的适老版 APP。
主要包括 5 大点技术要求:可感知性、可操作性、可理解性、兼容性以及安全性。
1. 适老版入口设计 ① 内嵌适老版界面
企业将适老版界面内嵌在原先的 APP 中,提供入口供用户切换。这种方案目前市面上使用较多,入口通常放置在设置中。对于银行金融产品,经调研,不少都遵循 all in mobile 的设计理念,要求根据不同的场景可以快速随时切换,所以除了设置中,还会在其他位置放置切换入口,方便用户切换。
常见切换入口名称
工商银行:幸福生活版;中国银行:岁月长情版;光大银行:简爱版;甘肃银行:颐年版;支付宝:长辈模式;招商银行/网商银行:长辈版;中国农业银行/平安口袋银行:大字版;宁波银行/云闪付:关爱版等等
对于切换入口的名称,每款应用都有自己的特色,整体来看,大字、长辈版是使用频次最高的,通俗易懂,其他类型的名称虽然有特色,但是与其他应用不同,不符合用户通用认知,在一定程度上会给年长用户造成理解障碍。
常见切换入口位置
对于内嵌版本的切换入口通常有以下三种:
一级页面顶部的“版本切换”按钮 一级页面下拉加号内的“版本切换” 我的页面-设置-“版本切换”
这三种形式根据应用的功能层级,开启适老模式需要进行 1~3 次点击,常见点击路径如下:
「首页」—版本切换图标—「适老版」 「首页」—版本切换图标—「版本选择」—点击选中—「适老版」 「首页」—加下拉—版本切换图标—「适老版」 「首页」—加下拉—版本切换图标—「版本选择」—点击选中—「适老版」 「个人中心」—设置按钮—「设置」—版本切换—「适老版」 「个人中心」—设置按钮—「设置」—版本切换—「介绍页」—开启确认—「适老版」 「个人中心」—设置按钮—「设置」—版本切换—「版本选择」—点击选中—「适老版」 特色切换过渡页面设计
中国农业银行:设置页面直接外置各种版本,直观且丰富了设置页面
工商银行:在版本切换页面详细介绍了各个版本的特色
支付宝:独立页面介绍适老版
对于开启适老模式,是否需要设置过渡页面,个人认为需要,因为具有图文介绍的过渡页面,虽然在一定程度增长了用户切换路径,但是给了用户切换的心里预期。而且对于模式的切换一般是低频操作,适当给用户一些“阻力”可以避免误操作。
② 单独的适老版 APP
企业也可以根据自身情况选择开发单独的适老版 APP,目前市面上以酷狗、UC、百度地图/新闻、腾讯地图/新闻、新浪微博等为代表开发了单独的适老版 APP。用户在应用商店搜索“大字版”“关怀版”等关键词即可下载。(目前暂无银行金融产品上线单独适老版的 APP)
经体验,一般开发了单独的适老版 APP,在普通版本 APP 中便不会设置大字版切换模式,仅提供字号设置功能和下载适老版 APP 引导页。
2. 可感知性 该技术要求主要解决老年用户的视觉障碍、听觉障碍及认知障碍。规范如下:
① 字型大小调整
文字的类型
根据调研,同样文字大小的情况下,非衬线体比衬线体结构更加清晰。所以《规范》中建议使用非衬线体,以减少不必要的视觉干扰,保证易读性。另外采用可以提高字重方法,使文本轮廓更加清晰。
中文字体例如思源黑体、微软雅黑等都是比较厚重的,不建议使用宋体、楷体等衬线体。
英文字体,特别是对于数据的展示,为了让数据更醒目直观,可以选择非衬线类厚重的字体。例如:我们部门为了在设计中更好的展示数据信息,提取常用字符设计了非衬线类的“兆日金融体”。
文字的大小
《规范》中建议适老版界面及单独的适老版 APP 中的主要文字信息不小于 18 dp/pt。Ant Design 设计语言中讲到关于计算最小字体的方法,基于年长用户阅读距离(43 cm)以及最佳阅读角度(0.75)计算并换算得到建议最小字号为 16dp/pt。那么我们到底按照哪个规范来呢?
笔者觉得,这两个规范没有对错,大家根据自己页面设计或适配的情况来确定就可以了。对于年长用户来讲,不同的人视觉感官度也不一样,我们在设计允许、布局整洁的限度下,字体肯定是越大越好。例如下图是我在做适老版过程中制定的缩放系数规范,为了保证部分复杂页面布局不错乱,将主要文字最小字号定义为 16dp/pt。
当然以上的规范不一定可以适合所有人,毕竟随着用户的年龄增长,视觉障碍会加深。我们还可以更加人性化一点,比如让用户在大字模式下可以继续根据需求调节字号大小、听文字消息。例如:iOS 系统中在辅助功能里可以设置更大字体、粗体文本(《规范》建议应用字型大小可随系统设置调整,或内部具备字体大小设置选项);微信可以开启听文字消息。
文字的适配规则
针对文字放大后,极值情况下的适配,主要有省略和换行两种方式,需避免文本、元素被剪裁。
界面元素及容器需要跟随文字放大而等比例系数放大
同一容器内的元素横向间距保持固定,纵向间距可按照比例系数适配
② 行间距
《规范》建议段落内文字的行距至少为 1.3 倍,且段落间距至少比行距大 1.3 倍,同时兼顾移动应用适用场景和显示效果。
根据调研测试:标题行间距为 1.3 倍,文字行间距为 1.5-1.8 倍,视觉效果最舒适。数值仅供参考,具体大家还要融合自己的设计去确定。
③ 对比度
为了解决年长用户因为文字、图像颜色淡而看不清的问题,在设计的过程中我们需要使用强对比度的颜色。《规范》建议文本/文本图像呈现方式、图标等元素间的对比度至少为 4.5:1(字号大于 18 dp/pt 时文本及文本图像对比度至少为 3:1)。
这一标准源自 WCAG 标准,其中的颜色对比度的无障碍标准包括比度最低标准(AA 级)和对比度增强标准(AAA 级)。
对比度(AA 级):文本的视觉呈现以及文本图像至少 7:1 的对比度;大号文本(字重为 Bold 时大于 18px,字重为 Regular 时大于 24px)以及大文本图像至少有 4.5:1 的对比度。 对比度(AAA 级):文本的视觉呈现以及文本图像至少要有 4.5:1 的对比度;大号文本(字重为 Bold 时大于 18px,字重为 Regular 时大于 24px)以及大文本图像至少有 3:1 的对比度。
小贴士:
Web Content Accessibility Guideline(Web 内容无障碍指南)是业界公认的指导标准,简称 WCAG 标准。其目标是为满足国际个人、组织和政府需求的 Web 内容可访问性提供单一共享标准。2018 年 6 月发布了 2.1 版本,并成为 W3C 推荐标准。WCAG 2.2 草案于 2022 年 9 月完成。
简单来说,就是要求我们在设计适老化界面的过程中,文本颜色需要按照标准加深,与背景色拉开差距以保证年长用户可以清晰识别。为了保证达到这一标准,我们可以使用色彩对比工具去进行测试:
工具一: https://webaim.org/resources/contrastchecker/
工具二: https://www.wenjiangs.com/wp-content/uploads/2017/06/contrast-ratio/
工具三: https://m2.material.io/resources/color/
工具四: https://contrast-grid.eightshapes.com
④ 颜色用途
颜色是界面设计最重要的元素之一,设计师经常通过不同颜色表达去传达一些信息,例如成功、失败等等。但是在无障碍设计中,颜色不应当作为传达信息、表明动作、提示响应等区分视觉元素的唯一手段。因为随着年龄的增长,我们对颜色识别感知会变弱,所以使用颜色代表特定意义的时候,需要有另外一种区分方案。例如:
使用下划线表示链接,或使用粗体突出显示文本 图标和文本结合使用传达成功或失败的信息 使用线条粗细、纹理或图案区分图标样式 使用不同的图案传达信息等等
对于颜色的使用,我们还需要注意以下几点:
颜色多样:页面中应使用区别较大的丰富色彩,可借鉴真实存在的物体,保持认知一致。
可适当加深颜色以提高颜色的对比度
重要元素避免使用蓝色和紫色:由于老年人的晶状体变黄、变浑浊,会选择性的吸收蓝光,从而导致老年人对蓝色的鉴别能力比红、绿色的鉴别能力下降的更明显。对于这一点,还是要看各个品牌的主题调性,如果无法避免使用蓝色和紫色,那么就提高饱和度以加强识别性。
⑤ 验证码
对于移动应用中的非文本验证码(例如拼图类、选图类、旋转类等验证方式),年长用户容易产生认知障碍,不理解验证的方式;也可能会产生行动障碍,无法准确对齐验证码。所以对于验证码我们应当做如下处理:
图片文本类验证码应当清晰易懂,并提供放大查看的操作; 非文本类验证码应当简单易操作,或者提供可被不同类型感官(视觉、听觉等)接受的替代或引导表现形式。
⑥ 图标设计
对于页面中的图标,在适老化的过程中我们通常是按照适配比例去放大原来的图标尺寸。除了单纯的放大,在项目允许定制化设计的时候,我们还需要注意尽量采用通用、年长用户易理解的形式去设计图标。另外建议搭配文字描述,方便用户更清晰更快速理解。
例如平安口袋银行的大字版,图标都一定程度上进行了拟物化处理,并且都配有通俗易懂的文字解释“电话”“去这里”,能够让年长用户轻松领会含义。
3. 可操作性 ① 组件焦点(热区)大小
由于年长用户细胞水分减少,手指偏大,在使用触屏的过程中灵敏度较低。所以对于常规组件的焦点,他们操作起来可能会很难完成操作目标。所以我们在放大文字、图标等控件的同时,对于可点击的组件焦点(热区)也需要同步放大。
《规范》建议适老版界面中的主要组件可点击焦点区域尺寸不小于 60 × 60dp/pt,其他页面下的主要组件可点击焦点区域尺寸不小于 44 × 44dp/pt;单独的适老版 APP 中首页主要组件可点击焦点区域尺寸不小于 48 × 48dp/pt,其他页面下的主要组件可点击焦点区域尺寸不小于 44 × 44dp/pt。对于规范中的内容,具体我们可以这样做:
在需要点击操作的元素(<44pt)周围添加 12pt 的反馈热区; 大于等于 44pt 的元素,且有清晰边界的元素,热区保持与元素大小一致即可; 如果多个元素指向同一个操作结果,可使用组合连接在一起的热区; 当元素处于某个组件容器内,最大热区不要超过容器本身; 如果整个容器指向同一个结果,应当以整个容器作为按压区域,而不是某个图标或文字; 元素较多的情况下,操作热区应平分元素间的间距。「有明显边框元素」和「没有明显边界元」素拥挤时,优先保证「没有明显边界元素」的热区; 特殊的小尺寸元素,可以考虑拓展热区,甚至覆盖其他元素,以保证最少 44*44pt 热区;
小贴士: 菲兹定律:任意一点移动到目标中心位置所需要的时间,与目标距离正相关、与目标大小负相关。 所以根据菲兹定律,为了提高年长用户的操作效率,界面中放大需要用户操作的元素,可便于用户快速精准触达。
用一篇超全面的文章,帮你读懂经典的费茨定律 费茨定律由心理学家 Paul Fitts 提出,用来预测从任意一点到目标中心位置所需时间与该点到目标的距离和大小有关,距离越大时间越长,目标越大时间越短。
阅读文章 >
② 手势操作
触摸屏时代,有着各种各样创新的手势操作和交互;但是对于年长用户由于行动和认知障碍,这些创新比较难学习理解并流畅操作。所以在移动应用中,应对用户进行手势导航或者操作的结果提供反馈提示;避免需 3 个或以上手指才能完成的复杂手势操作。对于点击、上下滑动、左右滑动、放大缩小这四类交互年长用户的接受度更高。
这四种交互,操作比较简单;且对应到界面上的屏幕空间,用户更容易理解。
现在很多应用中创新,有长按侧滑进入左侧空间、长按下拉进入二楼等交互;这类交互对于年长用户来讲其实非常不容易理解且不便操作。笔者之前教过家里长辈这类操作,想告诉他们这类“便捷创新”的功能,但是发现他们重复三四次才能完成操作,且过一段时间就会忘掉,依旧会选择一步一步点击到达目标页面。
综上,对于适老化版本的手势操作我们需要注意以下几点:
使用简单的手势操作:单指优于多指、单击优于双击(多次点击)、单一的手势优于组合手势; 不要加入需要力道触发的手势,例如长按下拉,年长用户把控不好力度很容易把这个手势变成了单击; 有一定学习成本的手势,应当给出引导教学; 给手势操作及时反馈,避免用户觉得没有触发到而多次点击。 ③ 充足操作/反馈时间
在移动应用中,如果限时不是活动的必要部分或关键要素,且不会导致用户发生法律承诺或财务交易,则应为用户的操作留下充足时间,在用户操作完毕前界面不发生变化。
年长用户对于一些动态信息的感知度比较低,所以如果页面中出现一些提示信息,我们可以采用以下方案让提示更友好:
适当延长时间,避免用户还没读清内容就消失了,例如 toast 显示持续时间可以由 3s 延长到 5s; 采用其他类型的提示给用户足够的阅读时间,将短暂停留的内容,调整为常显内容,由用户自行操作确认关闭,例如将 toast 改成弹窗; 利用震动等其他感官提醒优化提示,例如消息推送的震动及消息提示音、警告场景下的长震动;
我们在拉长交互时间的同时,还需要注意避免跨屏任务,因为年长用户在进行多个输入或操作的任务上会表现出明显的障碍。在任务的过程中,我们需要给出足够的解释说明,引导帮助年长用户完成多任务操作。
④ 浮窗
在移动应用中,若内容产生新窗口(包含但不限于弹窗),应设置易于用户关闭窗口的按钮。关闭按钮只可在左上、右上、中央底部,且最小点击响应区域不能小于 44×44dp/pt。
对于这条《规范》,我们可以拆分成以下几点来理解落地:
超出 7 秒长时间停留的页面(弹窗),需要提供关闭机制; 关闭机制可以是关闭按钮、返回按钮、跳过按钮或者功能文字操作按钮等一切可以立即退出当前页面的操作; 对于这些关闭机制的点击热区不能小于 44×44dp/pt。
⑤ 提供更便捷的录入方式
年长用户对于表单录入类的操作,总是有很大的心理/操作负担,碰到这类页面常常是不愿意操作,让别人代劳。例如银行的转账页面,大部分都需要录入付款信息、收款信息、转账金额等一系列内容。如果让用户每一项都手动输入,不但效率低而且很容易出错。我们可以做些什么,去减轻用户录入负担呢?
提供有限的选项和默认项
在页面中我们需要适当精简页面以减轻用户心理负担,只提供需要的选项,或者在需要的时候出现对应选项。 另外在有限的选项中,还可以提供高频选项作为默认选项,减少用户操作
简单理解,提供的选项越少,用户越容易选择,提供默认选项>提供有限选项>提供多种选项。
选择代替输入
选择类的交互方式比输入类更便捷,可以避免繁琐的打字过程,很多年长用户打字都不是很顺畅,甚至是使用手写录入文字。所以对于一些固定项的内容,使用选择类的交互可以很大程度提升操作效率。
识别录入代替输入
对于一些比较大段,需要仔细核对的内容,使用拍照扫描、复制粘贴识别、二维码识别录入等方式更不易出错;例如付方账号的录入。
自动数据带入
具有前后逻辑关联的表单数据,可以提供填写某个数据自动带入其他内容的联动交互,减少用户输入/选择操作;例如录入收款卡号后、自动识别带入收款银行;
常用项历史记录
提供历史记录功能,记录近期操作过的选项,方便用户快速复用再次操作;例如常用收款人的记录,点击后自动带入收款人信息,无需重复操作录入。
⑥ 缩短操作路径
年长用户经常会出现“我在哪”“我要怎么做”“接下来我要做什么”等困扰;面对这样的困扰,我们可以做如下交互优化:
精简功能,缩短重点功能操作路径,避免信息层级过深,要让用户快速触达;
拆分任务步骤,防止信息过载,减少每屏信息密度;对于跨屏的长任务,提供操作进度引导,告知用户所处位置进度,做到流程明确。
减少非必要操作,或允许跳过不必要的步骤;
4. 可理解性 ① 提示引导机制
《规范》建议在用户安装移动应用时,应为适老化设置、老年人常用功能提供显著的引导提示。也就是我们常说的功能引导机制。
对于内嵌的适老版界面,前文中也有提到常见入口位置,市面上大多数的适老版切换位置都比较隐蔽,且未按照规范给予显著切换提示,还有很大的优化空间。
经调研分析多个 app 产品,适老化设置我们可以从以下几点着手优化设计:
初次下载 app 或适老版上线的时候,提供功能开启引导或功能上新提示,告知用户有该功能、功能的入口、如何操作开启;
开启前提前告知用户,适老版是什么,开启后界面会有怎样的变化,给用户心理预期;
进入适老版本后引导提示用户如何回到标准版本,避免用户不想使用适老版而找不到出口;
退出适老版需要二次确认关闭,防止长着用户误触。例如云闪付为简单的弹窗提示,招商银行使用了半弹窗,还告诉用户如何重新开启长辈版,既起到了二次确认的作用也做了提示引导;
在“设置”中提供“适老版”入口,且用户可以通过搜索“长辈版”、“亲情版”、“关爱版”、“关怀版”等关键词直达功能;
常用功能的提示引导我们可以从以下几点着手优化设计:
提供功能指示引导或说明 设置帮助中心,提供纯文字教程、图文教程或视频教程,方便用户查找。还可以将教程以浮窗的形式展示在具体功能页面中,让用户可以边看边操作。 设置客服中心(智能客服、电话客服),运营/客服人员专项跟进,随时为年长用户提供帮助。 界面设计中,对于需要点击操作的设置行为指引,引导用户完成点击。例如在按钮文案中加入行为动作,结果导向的内容;还可以对于一些卡片式的点击区域加上按钮引导。
② 语音功能
在适老版中融入语音功能可以很好的辅助年长用户进行一些录入操作和信息获取,因为很多年长用户文化程度不高,不会使用输入法,大多选择手写输入的方式。但是手写输入效率比较低,而且如果写的字不清晰会识别错误。我们可以从以下几个角度融入语音功能:
使用 AI 技术,提供语音输入功能,目前市面上不少银行应用都设置了语音操作的功能,而且将这个作为重点易触达的功能展示在了关键位置。例如工商银行的语音操作;
功能操作过程中,提供实时智能语音助手或人工客服;也可以结合语音导读功能进行同屏解说引导用户操作;
提供结果状态下语音播报或声音反馈提示,在操作正确或错误时给予对应的正向、警示提示音;
融入智能读屏功能。
融入语音功能的时候,考虑到年长用户的听觉障碍,我们还需要注意以下几点
适当增大音量:老年人听觉平均感知音量在 67.5~75.3 分贝之间; 降低语速,提供慢速、正常、快速等语速供用户自己选择,更清晰有效的获取语音信息; 优化收音机制,去除杂音,提升录入识别成功率; 支持方言,可智能识别方言或有一定纠错机制。 ③ 通俗易懂的文字
由于年长用户触网时间短,受教育程度不同,可能对互联网常用的一些词汇存在认知障碍。所以我们在设计的时候需要对一些互联网词汇进行口语化表达,采用用户易理解的文案。
同时对于一些提示性的文案,需要表达清晰,在文案上要具有一定的引导性,例如,用户输入账号缺少 1 位的时候,应当提示:请输入 xx 位账号,而不是仅仅提示,输入错误,让用户自己去找哪里错了。
④ I 模型-精简的布局
目前市面上大多数首页都承载了很多内容,但是这种布局对于年长用户来讲不利于集中视线聚焦功能。所以在适老版建议采用 I 模型的布局模式,聚焦内容,减少用户视线主焦点的转化,这样更便于年长用户阅读与理解。一般来讲,我们需要控制用户的视觉主焦点转化不超过 2 次。
⑤ 使用具体的内容、真实形象
在制作活动 banner 场景中,采用具象的图片会比插画类型的图形更容易向年长用户传达信息,而且会给年长用户传递出真实感从而提升对产品的信任度。例如中国银行在适老版的设计中采用了大量的真人场景配图,非常的直观易理解。
5. 兼容性 辅助技术
移动应用程序不应禁止或限制终端厂商已适配好的辅助设备(如读屏软件等)的接入与使用。在辅助工具开启时,移动应用内容中所有功能性组件均能正常工作:按钮可正常访问;输入框能正常进行输入;多媒体能正常播放;在页面局部更新后,移动应用内容中新增的功能性组件也应能正常工作。
这一点更多的是从开发技术角度制定的规范,要求软件开发的过程中做好适配,保证适老版使用各类辅助技术的时候能够正常运行。我们设计师能做的就是在设计验收的过程中,考虑到这个层面,并将一些辅助功能的接入与使用纳入设计验收。
6. 安全性 ① 拒绝引导性内容
现在很多应用有着各种各样的广告、推销、诱导下载链接等,而年长用户容易受骗,所以在适老版中严禁出现推销广告等内容。《规范》中限制如下:
广告插件及诱导类按键限制 禁止广告插件。适老版界面、单独的适老版 APP 中严禁出现广告内容及插件,也不能随机出现广告或临时性的广告弹窗。 禁止诱导类按键。移动应用程序中无诱导下载、诱导付款等诱导式按键。 对于银行金融产品来讲,涉及到资金安全,筛选重要功能、安全的产品提供给年长用户就显得尤为重要。例如工行适老版的投资理财和专属存款,仅放了适合年长用户的产品。
② 给用户信任感,保障老年用户个人信息安全
移动应用程序进行个人信息处理时应遵循最小必要原则,即处理个人信息应当有明确、合理的目的,并应当限于实现处理目的的最小范围,不得进行与处理目的无关的个人信息处理,以保障老年用户个人信息安全。
同时我们在设计呈现的时候,可以加入一些安全、保障类的表达来提升产品整体的可信度,增强年长用户对产品的信任感,从而敢用。例如:
加入安全中心、安全保障、信任背书等元素,打消年长用户疑虑; 对关键信息进行脱敏展示,降低年长用户对数据泄露的担心; 在各个环节增加安全信息提示,加强安全认证,多重保障让年长用户安心; 增加防骗、反欺诈模块,增强年长用户防骗意识
章节小结
以上,我们结合《规范》里逐条规则和实际案例拆分讲解了如何去实际落地适老化设计。在这里借用阿里对适老化设计建议的关键词提炼,总结本章重点内容:
字号≥18dp/pt——清晰的字型、足够大的文字、舒适的行间距 强烈好于柔和——符合无障碍标准的对比度、可识别的颜色 具象好于抽象——优先使用写实图片 行动好于描述——使用表示行为的“动词短语”会更容易理解 熟悉好于新鲜——使用符合认知的设计和流程、易理解的图标、通俗易懂的文案 色彩好于图形——使用丰富的色彩,加强年长用户记忆与理解 点击好于滑动——简单的手势操作、容易点击的热区 点击好于输入——提供更便捷的录入方式 多模态好于单模态——语音功能的融入 接下来我们一起看一下目前市面上的一些银行金融产品适老化版本的体验测评分析。
五、银行金融产品适老化案例分析 1. 工商银行
名称:幸福生活版
slogan:超大字体,设计极简;语音助手,交互升级;专属理财,乐享收益;亲情账户,传递关爱。
入口:五个一级页面下拉加号内的版本切换;我的页面-设置-切换长辈版(幸福生活版)
出口:一级页面拉加号内的版本切换;我的页面-设置-切换标准版。
体验分析:
入口和出口位置及交互一致,贴合用户心智,符合操作习惯; 一级页面布局精简,层级清晰,重点功能突出。语音操作放在了最重要的位置,方便年长用户操作 页面内的功能都经过了筛选,只放出了年长用户常用功能。对于网点服务还有专门的适老网点推荐 功能子页面也做了适老化的定制,从视觉到交互,都适配了年长用户需求。 除了个别不是很重要的标签文字比较小,工行整体的适老化都做的不错 推荐指数:☆☆☆☆☆
2. 招商银行
名称:长辈版
入口:我的页面-设置-长辈版
出口:首页-下拉到底部-回标准版
体验分析:
入口较隐蔽,开启无提示直接开启 首页是常用功能、点击客服直接进入“小招客服”,页面精简,重点突出; 功能子页面仅做了简单的文字、控件放大; 点击“回标准版”出现的半弹窗提示,防止误操作,起到二次确认的作用,同时告知用户重新开启的入口 推荐指数:☆☆☆
3. 中国银行
名称:岁悦长情版
slogan:风格简约,大字展示,为年长客户甄选产品和服务
入口:首页-版本;我的-设置-版本切换
出口:我的-切换标准版
体验分析:
入口的设计视觉效果很好,非常直观。 出口太过明显,且没有二次确认,对于年长用户如果误触了回到标准版,可能找不到入口 首次切换至岁悦长情版,有功能引导 一级页面功能和布局做了精简,但是二三级子页面未做适配。 整体设计风格符合年长用户审美,给用户温馨的感觉。 推荐指数:☆☆☆
4. 中国农业银行
名称:大字版
slogan:超大字体,功能精简;语音助手,一键客服
入口:首页-版本;乡村振兴-版本;我的-更多下拉-版本;设置-版本切换
出口:首页-版本;我的-更多下拉-版本;设置-版本切换
体验分析:
多个入口,且入口的设计样式很有特色;出口与入口的路径相同。 布局清晰,功能做了筛选精简,一级页面仅保留常用功能。 重点功能子页面进行了布局和交互的适老化适配。 整体的视觉还原和谐度很好,大字版的用色也针对年长用户的生理特征进行了加深处理。 推荐指数:☆☆☆☆☆
5. 宁波银行
名称:关爱版
slogan:超大字体,精简功能;贴心服务,便捷易用
入口:首页-加号下拉-版本切换;我的-版本切换;
出口:首页-加号下拉-版本切换;
体验分析:
页面极简,取消了底部的 tab 栏,首页视觉表达符合年长用户需求; 语音功能使用了悬浮的按钮,且伴随收起交互,这点对年长用户不是很友好,不容易点击使用; 重点功能子页面仅做了少量适配,大部分控件与普通版一样; 推荐指数:☆☆☆
6. 平安口袋银行
名称:大字版
slogan:平安在手,儿女无忧;字体更大,简洁易懂
入口:首页-加号下拉-版本切换;我的-版本切换;
出口:首页-版本切换;我的-版本切换;我的-设置-版本切换
体验分析:
页面结构清晰,重点功能突出,精选的功能都是与年长用户相关的,比如防骗宝典、平安老人意外险等等; 图标设计更具象,更易读懂理解; 二三级子页面均做了视觉适配,适配呈现效果体验感很好; 各类业务场景都做到了告知、引导和反馈。 推荐指数:☆☆☆☆☆
7. 云闪付
名称:关爱版
slogan:字体大,图标大,使用更简单
入口:首页-版本切换;我的-设置-切换至关爱版
出口:首页-版本切换
体验分析
布局和功能都做了精简; 退出关爱版有二次确认,避免了误操作; 各功能的子页面未做大字适配。 推荐指数:☆☆☆
8. 江苏银行
名称:融享幸福版
slogan:字体更大 简洁清晰 一键帮助 安全无忧
入口:首页-版本切换;
出口:首页-版本切换;
体验分析
入口与出口一致,标识明显; 页面布局精简,功能内容贴合年长用户的需求,特别是一键帮模块里的内容都是实际解决年长用户需求的功能; 语音介绍功能,是其他产品没有的,开启后可以点击进行语音播报讲解,很大程度解决了年长用户看不懂、不会用的痛点; “反欺诈指南”、“日历模式”都贴合年长用户需求,暖心且有特色; 推荐指数:☆☆☆☆☆
总结 这篇文章很长,感谢大家耐心读到了最后。其实刚开始准备这篇文章的时候,只是想基于自己的工作内容做一个复盘。但是在书写总结的过程中,我查找阅读了大量的资料,感受到了无障碍、适老化设计的暖心人文关怀,就觉得很有必要仔细的写一写。特别是这句话“手机字体越来越大,音量越来越大,子女的陪伴却越来越少。子女知识想用一部手机联系到老人,却没有想过,他们也想用手机,去联系今天的世界。”狠狠的触动了我。
所以如果能让更多的设计师关注到这个群体、能够向更多的设计师传达适老化设计的一些知识点,这篇文章就发挥了它的价值。
其实整体来看,目前整个互联网的产品适老化才刚刚开始并不是很完善,企业也可能因为成本、资源等问题无法实际落地推动适老化设计。但是随着时间的推移,一定会有更多的产品关注并落地实施适老化(在我写这篇文章的过程中,有好几家银行产品对适老化的版本做了多次迭代优化,最终编辑排版的时候,又更新了一些案例。所以说适老化是大趋势,头部产品都已经开始注重这部分人群的体验了)希望通过这篇文章给设计师们一点启发。就算大家目前所做的产品,没有适老化设计的需求,里面的一些知识点融入基础产品的设计,也是适用的,能给用户带去更好的用户体验。
再次感谢大家的阅读,希望通过设计的力量,帮助年长用户更好的融入并享受数字化生活。
参考文章:
为了帮助大家更好的理解本文,以下为书写过程中阅读参考的一些文章和报告,可供进一步深入学习。
《QuestMobile2022 银发经济洞察报告》 《中国互联网络发展状况统计报告》 《QuestMobile 银发人群洞察报告》 《QuestMobile 金融支付报告》 《工业和信息化部办公厅关于进一步抓好互联网应用适老化及无障碍改造专项行动实施工作的通知》 《腾讯出品!手机银行适老化设计探索(附超多干货)》 《如何做好产品的适老化和无障碍设计?来看腾讯的实战案例!》 《小程序适老化设计指南》 《超全面!「无障碍设计」指南》 《适老化设计——让产品充满温度》 《百度大字版精细系统的适老化设计研究实践》 《一篇就够!实际场景落地适老化设计》 《色彩无障碍指南: 如何让色盲用户获取色彩信息》 《银发族数字化产品适老化研究蓝皮书》 《优设 9 图-如何做好适老化设计》
-
这8个卡片设计方法,你还真不一定知道!
UI交互 2022-12-07卡片设计在 UI 中有非常多的优势,相关的文章我已经写过几篇了,结合往期文章可以更系统地学习卡片设计规范:新人设计师来收!卡片式设计基础入门指南(附超多案例)很多人对 APP 中的卡片设计习以为常,但对于卡片设计流行的原因、优点,以及如何做好卡片设计却可能不甚了解。阅读文章 > 做好这4个细节,帮你快速提升...卡片设计在 UI 中有非常多的优势,相关的文章我已经写过几篇了,结合往期文章可以更系统地学习卡片设计规范:
新人设计师来收!卡片式设计基础入门指南(附超多案例) 很多人对 APP 中的卡片设计习以为常,但对于卡片设计流行的原因、优点,以及如何做好卡片设计却可能不甚了解。
阅读文章 >
做好这4个细节,帮你快速提升卡片设计效果! Hi,我是彩云。
阅读文章 >
在做卡片设计时什么才是最重要的?这篇文章中我将会分享 8 个最关键的细节。在这之前,我们一起来对 UI 中的卡片设计基础做一个梳理,总结下一般在哪些场景适合用卡片设计。
卡片是 UI 中的一个组件元素,能够创建清晰的视觉单元,让信息更具逻辑性。它通常包含:标题、描述、图片、按钮或者链接。
基础卡片
一、一般在哪些场景使用卡片设计? 产品目录页面:大型电商网站诸如亚马逊、阿里、沃尔玛和 eBay 都使用了卡片设计做产品呈现。通常,一个产品卡片构成包括产品图片、标题、价格、折扣和行动按钮,可以通过点击这个行动按钮查看商品详情页面。
Amazon (top) and Alibaba (bottom)
eBay (top) and Walmart (bottom)
内容网站:新闻文章、社交媒体平台会使用卡片组件这种比较聚焦的设计去呈现每个内容,这样用户可以快速扫描,阅读内容。
Behance (top) and Dribbble (bottom)
CNN (top) and BBC (bottom)
仪表盘界面:仪表盘是一个非常好的例子,在其中能够很容易体现卡片设计的优势,它能把相关的信息在界面上组织到一起,帮助用户更容易的比较和分析数据信息。
Mixpanel (top) and Dribbble (bottom)
收集网站:浏览和探索大量的设计作品是一种有趣和吸引人的体验,就像 Pinterest,Unsplash 基于卡片布局,用大图封面的形式能够抓住用户的眼睛。这就是为什么在网页和手机体验中使用卡片浏览变得如此流行的原因。
Pinterest (top) and Unsplash (bottom)
协作工具:卡片是很灵活的组件,它可以将不同类型的信息和子元素组合在一起。例如,Figma、Miro、Framer 都用了卡片形式展示项目和文件。卡片设计干净、易于互动、实用,可以很容易地进行文件相关操作。
Figma and Miro
二、最佳实践 讲卡片设计的文章相信已经很多了,但我想在这篇文章中着重讲一些容易被忽略的 设计细节 。我希望这些点可以帮你进一步优化卡片设计。
1. 注意在卡片和背景之间设计合适的对比度
为了从背景中更好的区分卡片,你可以给卡片增加一个外描边或者加一个浅浅的投影。
彩云注:这里原作者放的例子我觉得没有特别好,但是她提到的这个细节确实是需要注意的,背景和卡片之间的颜色对比不要太小,不管是改颜色还是加描边或者投影,都是为了加大这种对比。
比如下面彩云随便找的一个很优秀的卡片设计,就是用的多彩色加大了卡片与背景的对比,使得信息清晰可见。
2. 努力维护好字体大小,避免使用太小的字号
内容可读性由所选字体和字体大小决定。下面的例子中可以看出,两个卡片设计在样式上都差不多,但因为字体大小选的对,整个卡片在视觉上变得更平衡,对人眼来说更好,所以右边的卡片更容易识别。
关于字号选择有一些经验可以分享给你,帮助你优化视觉层次。(彩云注:这里提到的尺寸应该多指 PC 端)
标题,使用的字号会在 20px-96px 或者更大,取决于卡片的尺寸和具体内容 副标题,字号会使用小于主标题 2px-10px,这样可以比较容易区分 正文,字号最少 16px。在某些情况下,如果你使用某些本身字符就比较大的字体,则可以适当减少字号。例如,在谷歌规范( https://material.io/design/typography/the-type-system.html#applying-the-type-scale )中,两个正文文本的大小分别定义为 14px 和 16px 按钮,它的字号不可以比正文的字号小。当需要展示多个选项时,对于主要按钮需要用到更突出的字体样式(加粗 Semi-bold/Bold),次级按钮使用略弱的字体样式(一般 Regular/Medium) 尝试限制字体大小的数量,可以使用字体缩放插件,Figma 中的插件 Type scale( https://www.figma.com/community/plugin/739825414752646970/Typescales )或 Web tool for defining a type scale( https://type-scale.com ) 3. 对留白创建一个间距体系
留白是 UI 各元素之间的空白区域,它们将创建视觉组,保持视觉层级。如果你想避免设计混乱,需要确保做好一致性,你需要定义好间距体系,这对开发来说也会非常有效,减少代码量,还原的更好。
关于间距系统我也有一些经验
选择一个基础单位,并用它来作为 UI 元素间距的倍数值。一般来说,基础单位是 4px(0.25rem)。不建议使用奇数比如 5px,这是因为设备中会有 1.5x 的 DPI,这个留白的缩放值会变成 7.5px 会导致像素模糊 通过使用基础单位作为增量或乘法来定义间距值,减少间距值的数量,会让 UI 更简洁,例如它用来定义 Tailwind( https://tailwindcss.com/docs/customizing-spacing )这个产品留白规范 Figma 进阶用法,修改“大移动”(具体设置方法见官方帮助文档 https://help.figma.com/hc/en-us/articles/4404575206295-Set-small-and-big-nudge-values ),从默认的 10px 改到 8px,这将会让你每次移动元素可以保持 8px 的数值(这是基础单位的 2x),只需要按住 shift+方向键即可。这会非常省时间 4. 尽可能设计与内容布局相似的加载状态
加载状态匹配即将加载的真实内容会减少用户对于加载内容的不确定性心态。下面的例子,你可以在右边看一个正确加载效果的设计,会更加符合用户的心理预期。
一组加载状态的效果对比
Figma and Vimeo
5. 定义一个卡片的固定高度
在实际项目中,你需要设计一个卡片元素,假定一个卡片是一行内容,另一个卡片是有 4 行文本内容。最好的解决方案是设计一个固定高度的卡片,在内容较少的卡片上使用留白,而在内容较多的卡片上使用文字截断。(彩云注:这样卡片在效果上更加一致。)
6. 使用网格作为卡片设计的基础规范
网格作为卡片的布局基础,有助于统一地安排内容,这就是为什么当涉及到卡片设计时它们是如此有用。当你需要时,可以使用网格将卡片的宽度扩展到需要的网格列数量,通常这样做,你可以找到一个合适的卡片宽度。当设计一个响应式布局时,应该为每个断点设计一个网格,设计相应的卡片大小。
(彩云注:可能有些人不大理解断点的意思,它指的是从 PC 切换到平板,然后再切换手机,屏幕大小在变化,布局也会做相应的改变)
(1) PC (2) 平板(3) 手机
你可以在这 2 个网站学习到更多关于响应式设计的规范 Material Guidelines or Intuit Design System.
当你在设计基于卡片,响应式布局时,你需要问自己几个问题:
卡片内容在所有断点之间看起来一致吗?(台式机、平板电脑、手机) 间距值是否一致? 交互合理吗?它们会影响卡片的大小和卡片之间的间距吗? 长标题有考虑吗?它们会如何影响卡片的内容? 一些 Figma 设计卡片布局的建议:
为卡片定义约束 constraints( https://help.figma.com/hc/en-us/articles/360039957734-Apply-constraints-to-define-how-layers-resize ),以确定当你调整它们的大小时,布局中的卡片应该如何响应 为卡片应用 auto-layout( https://help.figma.com/hc/en-us/articles/5731482952599-Using-auto-layout ),使它自动调整大小根据里面的项目。在 Figma 上有教程( https://www.figma.com/best-practices/everything-you-need-to-know-about-layout-grids/additional-tips/#using-constraints-with-layout-grids ) 创建一个 8px 的网格可以让你在设计中精确地排列和调整 8px 增量单元的元素大小 7. 创建不同内容的卡片设计
如果你事先知道卡片可能有不同长度的内容,请确保在设计中涵盖这种情况。在不同内容转换过程中将帮助开发以正确的方式为卡片做好还原,避免破坏内容对齐。
8. 为更好的用户体验定义卡片交互
UI 交互是用户通过触摸屏、鼠标或键盘设备与 UI 元素交互时发生的操作,状态是在特定用户的交互中出现的视觉反馈。
与许多其他 UI 元素(按钮、文本字段、下拉菜单等)一样,卡片的状态应该取决于使用上下文和定义的交互。对于特定的交互,卡片应该根据状态设置样式。最常见的卡片状态列表:
默认:卡片处于正常状态,无任何用户交互 悬停:当用户将鼠标光标(指针)放在卡片上时 激活:如果卡片是可点击的,用户按下鼠标主按钮点击它,卡片的样式应该改变,以显示组件是激活的。这与按钮被按下的状态相同 聚焦:当使用键盘或语音等输入法时,卡片会高亮显示。通常在网页上这种状态是用蓝色的,但你可以选择你自己的品牌色,只要确保颜色与背景颜色至少 3:1 的对比度 选择:卡片被选择时的状态拖动:用户拖拽卡片时的状态 总结 卡片是 UI 中的常见组件,你可以在大多数网站和移动应用中找到它,它实在是太流行且实用了,所以一定要掌握好卡片设计并进行大量的练习。通过这些知识点的学习,我们可以使它们在视觉上更有吸引力,更有效,更容易访问。
欢迎关注作者的微信公众号:「彩云译设计」
-
第一波!2022年12月精选实用设计干货合集
UI交互 2022-12-07大家好,这是 12 月的第 1 波设计干货合集!这次的干货合集应该相当符合视觉和平面设计师的需求,有每日更新灵感素材的设计师干货日报,有两款各有特色的配色工具,有免费的3D字体小样,也有开源免费的高品质图标,有风格现代简约但是质感十足的免费背景素材,还有新的人工智能绘图工具。当然,在此之前记得看看往期干货中有没有...大家好,这是 12 月的第 1 波设计干货合集!这次的 干货合集 应该相当符合视觉和平面设计师的需求,有每日更新灵感素材的设计师干货日报,有两款各有特色的 配色工具 ,有免费的3D字体小样,也有开源免费的高品质图标,有风格现代简约但是质感十足的免费背景素材,还有新的人工智能绘图工具。
当然,在此之前记得看看往期干货中有没有你感兴趣的素材:
第五波!2022年11月精选实用设计干货合集 大家好,这是 11 月的第 5 波设计干货合集!
阅读文章 >
下面我们具体看看这一期的干货:
1、免费高素质简约现代弥散背景 https://vackground.com/product/liquid-wave-modern-mesh-backgrounds
高素质的背景素材能够极大地提成整个页面的格调,而这套免费的背景素材就可以做到这一点,整体的风格非常现代,而且带有弥散渐变的光影,视觉效果拉满。这组免费背景总体有 40 张,包含有 ai 和 jpg 两种格式,有需要的同学赶紧下载。
2、为品牌精心适配的配色工具 https://draftss.com/color-palette-for-branding
这个名为 Colorss 2 的配色工具和其他配色工具略有不同,它会根据情绪、感知和氛围来制定配色方案,这些情绪具体有什么特征,适合什么定位的品牌使用,会给人什么样的感受,都会搭配相应的说明,方便设计师使用。而且 Colorss 还会制定配色方案的延伸和变种,方便在复杂的使用场合灵活使用,可以说相当良心了。
3、图案快速预览配色工具 https://more.graphics/variants
某个配色方案确定之后,整体的效果到底好不好?最简单的方法,就是找个图案直接套用看看效果。这个服务就是专门干这个事儿的,内置了3个图案专门用来查看各种配色的实际对比度和视觉效果,你也可以自己上传图案来测试效果,并且也可以自定义配色方案来查看效果。
4、超帅的立体 3D 字体 Font Z https://fontz.design/
FontZ 提供的 3D 字体几乎适用于所有的设计项目,这些预先设计好样式的字体可以非常轻松地使用,而且支持的软件类型也相当丰富,从 PS Sketch 到 Figma Blender,虽然整套字体是收费的,但是提供免费的 Demo。
5、每日更新的设计师干货日报 https://designerdailyreport.com/
这个名为设计师日报的浏览器插件,会提供每日精选内容,从精选的图片、免费的字体、品牌设计、优秀设计师作品集到令人惊叹的网站、作品以及 Instagram 灵感等,不一而足,想让灵感和素材触手可及的同学可以装上这个插件获取灵感吧。
6 、免费开源的高素质图标 https://circumicons.com/
这是一个面向设计师和开发者的开源图标库,这套图标库总计有 285 个不同但是足够日常使用的图标,这些图标特别适合使用 React、Vue、Svelte 等现代开发框架的地方,无论你是设计师还是开发者,都可以轻松驾驭和使用这些图标。
7、人工智能绘图平台 AISEO ART https://art.aiseo.ai/
AISEO Art 同样是一个基于人工智能的文字转图片的服务,它的人工智能算法按照分类进行过细致的训练,你可以在输入文本描述之前,先选择你要生成的图片的分类,它生成的结果会更贴合需求。此外,AISEO Art 还新上线了模板功能,喜欢尝试的同学可以上手看看。
-
大厂案例实战!京东微信购物2022年改版深度解读
UI交互 2022-12-07今年以来,京东购物小程序围绕“一键发现 万物好店”的产品心智,从消费链路的上游提升可逛性出发进行了一系列产品&营销设计升级。1.0 致力于打造更契合微信域的用户体验;2.0 尝试以一种有趣的姿态留住偶发闲逛用户。2.0 近期已陆续上线,借此机会和大家分享一下整个改版过程及思路。今年以来,京东购物小程序围绕“一键发现 万物好店”的产品心智,从消费链路的上游提升可逛性出发进行了一系列产品&营销设计升级。1.0 致力于打造更契合微信域的用户体验;2.0 尝试以一种有趣的姿态留住偶发闲逛用户。2.0 近期已陆续上线,借此机会和大家分享一下整个改版过程及思路。
往期改版:
让购物简单快乐!京东 APP 11.0 深度解读:视觉篇 在 APP11.0 深度解读系列的第一篇文章中,剖析了基于生态进行体系化大改版的解读与思考,本文将聚焦于视觉设计,阐明我们对此版本的设计主张与思路,在各个场景是如何外化以辅助达成改版目标的。
阅读文章 >
一、变化与契机 过去,京购小程序更多是京东 APP 在微信域的分身,在货品、产品设计及营销层面与京东 APP 没有任何差别。现在,小程序已由散点式孤岛向全域营销转变,成为京东在微信域流量及交易的主阵地。与此同时,我们面向的用户也更加多元偶发,他们购物需求模糊,以闲逛、消磨时间为主,偏好居家日用、⻝品生鲜等高频高耗商品。在微信域差异化货品及算法的加持下,前端设计急需打破现状,进行体验差异化升级,塑造微信域专属心智。
二、改版思路 基于人货场差异化洞察,改版思路围绕“知心省心开心”的用户需求体系,从被动支持、到主动引领、再到互动交流,阶梯式构建用户对京购小程序的结构化认知。
1. 知心 打造契合微信域的用户体验
首页作为小程序的门面担当,即是用户心智承接的核心阵地,也是内容分发的主要场景。故 1.0 为用户打造“知心”的消费体验,我们先从首页切入。在此过程中我们也面临着渠道、人群、品牌等多重挑战。
基于数据/用户/竞品等专业洞察,以结构化思维解构分析,由里及表从框架、内容、动线、品牌 4 个方向升级应对以上挑战。
框架承载能力升级
针对框架的升级,将从广度和深度来个维度来进行拆解,为每一个闲逛场景,重塑更具包容性体验框架。
广度上,面向不断扩展的多元化电商内容结合设计趋势跟随及偶发用户特性,将旧版楼层堆叠严重的货架型框架,通过内容精简使 feeds 移入首屏让用户快速进入逛的状态。
深度上,将旧版单一扁平框架拓展成一个更具探索性的立体框架,以应对日益增多的渠道特色需求。通过摇一摇融入社交心智高效分发内容、向左打造私域化阵地、向右建设专属活动日历、下拉则用娱乐化承接偶发用户,让用户更好的发现内容。
feeds 内容表达能力升级
双列流设计弱化了推荐 feeds 不同内容的个性表达,基于前期大量的设计探索,我们从「触达表现心智」3 个层面系统化构建更具精细化的内容表达模型,提升内容触达效率的同时丰富内容形式。
动线多元化升级
在浏览前中后场景下深挖偶发用户痛点,结合用户行为及心理进行多元化营销动线设计,吸引持续浏览和点击。
品牌心智升级
在完成首页整体体验架构设计后,我们也围绕着京东品牌继承、差异化货品调性打造、大促特色营销氛围改造 3 个维度进行了京购小程序品牌心智升级。
① 京东品牌继承与重塑
微信生态环境下,京购小程序在继承京东品牌调性的基础上,通过兼顾场域特色,打造更聚焦、包容、多元的品牌记忆点,重塑京东微信域专属视觉体系。提炼高效、丰富、亲和的设计关键词,并定义品质简洁、亲和舒适、轻透明快的视觉基调,从色彩、 图形 、质感、动效 4 个维度进行设计映射。
匹配微信域五大机会品类货品特性
挖掘微信域 5 大机会品类特性,从色彩精细化传达、情绪性语义意向来布控场域类目主色调,塑造微信域差异化类目专属心智。
有渠道特色的大促营销场建设
在京东大促主题背景下,微信域将协同主站的节奏爆点、核心玩法、权益结算、尖货爆品内容。在此基础上,制定预热期抢跑营销节点,实现对大促整体节奏上的补位增长,在场景期通过限时营销部署对抗品类期的销售疲软的差异化营销策略。结合微信域用户动机及特点,我们进行了有渠道特色的差异化营销场设计。
为统一大促期间用户感知,我们在品牌、颜色及风格调性上,同步了主站的大促营销心智,打造递进式大促首页基调。并基于小程序日常“低价”的营销策略,预热期采用颜色降噪设计让用户更聚焦信息为大促造势。品类专场期配合微信红点通知,在开⻔红及 bigday 同步 app 视觉氛围,唤醒承接微信的京东老用户。
与此同时,为了更好的承接微信域用户,围绕“承接场效、优惠透传、视觉减负、营销感知”等设计策略,打造具有微信域特色的大促营销场设计,并不断尝试和校验试跑出最适合小程序的体验设计方案,激发用户“逛”的兴趣。
最后为助力业务提升用户行为转化,针对微信域组件&动效等前端设计模块,持续进行 ABtest 测试,并基于数据反馈沉淀高转化设计策略。
2. 省心 ① 为用户带来“省心又省钱”的购物体验
我们的用户是典型省钱不省生活的一群人,不管是消费体验还是货品供应,我们都希望做到省心又省钱。
消费链路升级:购物全流程用户需求识别与满足
过去京购小程序侧重“搜索转化”的单一路径。为了给用户带去省心的消费体验,新版以购前明确购物需求、购中快速决策转化、购后获取专属服务的体验定位进行消费链路升级。
购前:向消费链路上游延伸
购前针对用户的模糊需求,在完善搜索功能的同时利用热点话题、微信域尖货榜单、延展推荐等内容升级搜索流程,向消费链路上游延伸,承接用户闲逛探索需求。
购中:快速决策转化
购中基于信息减负、路径缩短、社交辅助等设计策略,构建短商详、购物车分享、短链结算等新型产品形态来提升用户决策转化效率。
购后:打造更具专属感的服务体验
购后以用户分层,围绕不同场景、不同用户身份的内容&权益渗透设计,打造更具专属感的服务体验。
微信域特色频道:一段从认知到相知的旅程
京购小程序通过重运营、强干预的方式试验跑出微信域的心智单品和类目,从“单品、品类、品牌”维度孵化“10 元店、单单返、大牌微力”等特色营销 IP。在此背景下,设计侧围绕从认知到相知的过程,进一步助推差异化货品占领用户心智。
认知:记住我的样子
为快速穿透用户心智形成记忆认知的目的,设计上围绕“频道定位、品质凸显、微信专属”等关键词,着重刻画逛购动线中“无需计算的直降、邀友享低价的特权”,并通过品类调性,联动头图、商卡打造沉浸式的品类营销动线,匹配用户类目心智,立足于为用户带来“有品质最省钱”的购物体验。
除日常运营外,频道每月定期联动品类和品牌打造营销 Bigday,以 “超 V 单品日、超级返、大牌 V 力”进行全新升级。为进一步穿透用户心智,团队内部头脑风暴反复推敲,以“心智连贯性、设计延展性”为原则,选取“V”作为微信域系列 IP 的超级符号,并根据应用场景特征设定符号延展原则,在首页、频道、黄流等购物全链路布局有效发声点,形成统一的、多方位的营销声浪。
相知:记住我的好
受微信去中心化特色影响,用户在微信的购物行为更加偶发、快捷,为加速用户行为转化,基于“短链”的设计思维,结合“爱达法则+上瘾模型”,搭建了积木式的 “IDA 后链路互动增长策略”提升流量 ROI。即从资源入口进入,通过区分不同生命周期的用户设计覆盖首页、频道、黄流等全链路权益营销动线,让对的人,在对的地点,获得最适合 TA 的权益,将“省心”贯彻到底。
用“精准权益、互动裂变、私域沉淀”三位一体的积木式短链互动模型,赋能京东微信域广告后链路,充分串联及发挥公众号、视频号等微信域非中心化的业务能力,并最终沉淀到京东购物小程序做整体交易,拉长及放大用户价值。
与此同时,为加速用户行为转化,融合心理学认知偏差等定律,对模型进行“复刻”和“升级”。在微信域特色频道和营销玩法中孵化“复访、裂变、转化”等短链玩法,助力业务增长。
3. 开心 更精准的匹配用户泛娱乐、泛社交兴趣
随着用户消费场景的多元化,内容对整个消费行为产生了多维影响,作为传统电商平台如何从单一的理性货架导购到丰富的感性内容引导,从单一的满足商品刚需到增加情感因素和人文关怀?1.0 通过差异化体验升级拉近与微信消费者的距离,2.0 我们依然选择从用户视角出发,将小程序二楼作为创新试验田,尝试用更内容化娱乐化的方式与用户建立联系;我们想要京东不再那么“一本正经”,而是以一种有趣的姿态让用户在娱乐中完成购物初体验。
依托于微信小程序二楼开放能力,区别于常规浏览动线,我们以逆向思维在页面顶部开拓一个能与用户深度交流的二楼娱乐阵地。通过首页娱乐任意门引发用户好奇心自发下拉,进入我们精心设计的神秘好玩世界;再以视频化&游戏化&社交化等好玩有趣的内容,并搭配微信即时打款,锁定用户进入后的黄金 5 秒注意力,循序渐进的通过传统电商权益牵引用户进入电商流程,从而链接小程序新消费场景。
触达:传递娱乐属性,强化好玩有趣心智
在霸屏下拉入口的设计中,秉承意向性及情绪化表达的设计原则,基于泛娱乐化关键词映射,打破京购小程序平稳的主流色系,用高饱和反差对比色形成视觉冲击;以轻拟物风深入构建元素细节呈现,尽可能塑造元素中的空间、体积、光源等复杂的物理表现,增加界面的质感厚度和纵深感,整体炫彩动感,使二楼好玩基调拉满,给用户焕然一新的直观感受。
吸引:突破认知壁垒,贴近用户真实生活
契合内容表达的设计风格探索
小程序二楼如何突破认知壁垒吸引用户停留,我们进行了前瞻性的泛娱乐化内容探索。在内容呈现上,短视频以更加轻松直观的表达和更广泛的用户接受度来吸引用户持续停留;小游戏以反套路低门槛易上手的魔性玩法来获得用户投入精力增加粘性;社交互动以抓住目标用户正能量相亲相爱的特质来刺激用户病毒式传播。
1.0 我们建立起的审美是一种对秩序、精致美的追求,2.0 需要更多元化的审美打乱设计的秩序,以一种更为感性的设计方式来传递调性,贴近偶发用户真实生活;我们根据内容特色尝试利用“新丑风”、土味暴力美学风、美女封面老头乐等设计风格让视觉表现陷入“百家争鸣”的局面。
激励设计呼应现实场景,激发用户体验爽感
激励机制作为吸引用户的有效手段,尝试用虚拟设计映射实体的手法来与现实场景呼应,拉满体验爽感从而建立与用户的情感共鸣,让小程序二楼走出一条“别样花路”。
把生活中的记忆通过夸张的动效方式加入到激励设计的体验链路中,通过动效设计来引导用户情绪,强化喜悦感知;最终经过反复调试,现金设计复刻了 Money 扑面而来的惊喜动效。
有了现金动效的打样,红包的动效设计也就顺利很多。
转化:牵引用户软着陆电商环境
当用户被吸引后,在此阶段使用简单直接的传统电商权益逐步牵引用户进入电商流程;至此通过整套动线,让这些偶发闲逛用户发现好玩有趣不一样的京东。
写在最后 在微信生态环境下京购小程序汇聚了形形色色的用户,他们可能是忙忙碌碌的打工人、有钱有闲的小镇青年、岁月静好的大爷大妈…;他们带着独特的生活气息来到这,很有幸为他们呈现不一样的京东;希望每一个来到京购小程序的用户都可以感受到知心、省心和开心。
欢迎关注「JellyDesign」的小程序:
-
这8个卡片设计方法,你还真不一定知道!
UI交互 2022-12-07卡片设计在 UI 中有非常多的优势,相关的文章我已经写过几篇了,结合往期文章可以更系统地学习卡片设计规范:新人设计师来收!卡片式设计基础入门指南(附超多案例)很多人对 APP 中的卡片设计习以为常,但对于卡片设计流行的原因、优点,以及如何做好卡片设计却可能不甚了解。阅读文章 > 做好这4个细节,帮你快速提升...卡片设计在 UI 中有非常多的优势,相关的文章我已经写过几篇了,结合往期文章可以更系统地学习卡片设计规范:
新人设计师来收!卡片式设计基础入门指南(附超多案例) 很多人对 APP 中的卡片设计习以为常,但对于卡片设计流行的原因、优点,以及如何做好卡片设计却可能不甚了解。
阅读文章 >
做好这4个细节,帮你快速提升卡片设计效果! Hi,我是彩云。
阅读文章 >
在做卡片设计时什么才是最重要的?这篇文章中我将会分享 8 个最关键的细节。在这之前,我们一起来对 UI 中的卡片设计基础做一个梳理,总结下一般在哪些场景适合用卡片设计。
卡片是 UI 中的一个组件元素,能够创建清晰的视觉单元,让信息更具逻辑性。它通常包含:标题、描述、图片、按钮或者链接。
基础卡片
一、一般在哪些场景使用卡片设计? 产品目录页面:大型电商网站诸如亚马逊、阿里、沃尔玛和 eBay 都使用了卡片设计做产品呈现。通常,一个产品卡片构成包括产品图片、标题、价格、折扣和行动按钮,可以通过点击这个行动按钮查看商品详情页面。
Amazon (top) and Alibaba (bottom)
eBay (top) and Walmart (bottom)
内容网站:新闻文章、社交媒体平台会使用卡片组件这种比较聚焦的设计去呈现每个内容,这样用户可以快速扫描,阅读内容。
Behance (top) and Dribbble (bottom)
CNN (top) and BBC (bottom)
仪表盘界面:仪表盘是一个非常好的例子,在其中能够很容易体现卡片设计的优势,它能把相关的信息在界面上组织到一起,帮助用户更容易的比较和分析数据信息。
Mixpanel (top) and Dribbble (bottom)
收集网站:浏览和探索大量的设计作品是一种有趣和吸引人的体验,就像 Pinterest,Unsplash 基于卡片布局,用大图封面的形式能够抓住用户的眼睛。这就是为什么在网页和手机体验中使用卡片浏览变得如此流行的原因。
Pinterest (top) and Unsplash (bottom)
协作工具:卡片是很灵活的组件,它可以将不同类型的信息和子元素组合在一起。例如,Figma、Miro、Framer 都用了卡片形式展示项目和文件。卡片设计干净、易于互动、实用,可以很容易地进行文件相关操作。
Figma and Miro
二、最佳实践 讲卡片设计的文章相信已经很多了,但我想在这篇文章中着重讲一些容易被忽略的 设计细节 。我希望这些点可以帮你进一步优化卡片设计。
1. 注意在卡片和背景之间设计合适的对比度
为了从背景中更好的区分卡片,你可以给卡片增加一个外描边或者加一个浅浅的投影。
彩云注:这里原作者放的例子我觉得没有特别好,但是她提到的这个细节确实是需要注意的,背景和卡片之间的颜色对比不要太小,不管是改颜色还是加描边或者投影,都是为了加大这种对比。
比如下面彩云随便找的一个很优秀的卡片设计,就是用的多彩色加大了卡片与背景的对比,使得信息清晰可见。
2. 努力维护好字体大小,避免使用太小的字号
内容可读性由所选字体和字体大小决定。下面的例子中可以看出,两个卡片设计在样式上都差不多,但因为字体大小选的对,整个卡片在视觉上变得更平衡,对人眼来说更好,所以右边的卡片更容易识别。
关于字号选择有一些经验可以分享给你,帮助你优化视觉层次。(彩云注:这里提到的尺寸应该多指 PC 端)
标题,使用的字号会在 20px-96px 或者更大,取决于卡片的尺寸和具体内容 副标题,字号会使用小于主标题 2px-10px,这样可以比较容易区分 正文,字号最少 16px。在某些情况下,如果你使用某些本身字符就比较大的字体,则可以适当减少字号。例如,在谷歌规范( https://material.io/design/typography/the-type-system.html#applying-the-type-scale )中,两个正文文本的大小分别定义为 14px 和 16px 按钮,它的字号不可以比正文的字号小。当需要展示多个选项时,对于主要按钮需要用到更突出的字体样式(加粗 Semi-bold/Bold),次级按钮使用略弱的字体样式(一般 Regular/Medium) 尝试限制字体大小的数量,可以使用字体缩放插件,Figma 中的插件 Type scale( https://www.figma.com/community/plugin/739825414752646970/Typescales )或 Web tool for defining a type scale( https://type-scale.com ) 3. 对留白创建一个间距体系
留白是 UI 各元素之间的空白区域,它们将创建视觉组,保持视觉层级。如果你想避免设计混乱,需要确保做好一致性,你需要定义好间距体系,这对开发来说也会非常有效,减少代码量,还原的更好。
关于间距系统我也有一些经验
选择一个基础单位,并用它来作为 UI 元素间距的倍数值。一般来说,基础单位是 4px(0.25rem)。不建议使用奇数比如 5px,这是因为设备中会有 1.5x 的 DPI,这个留白的缩放值会变成 7.5px 会导致像素模糊 通过使用基础单位作为增量或乘法来定义间距值,减少间距值的数量,会让 UI 更简洁,例如它用来定义 Tailwind( https://tailwindcss.com/docs/customizing-spacing )这个产品留白规范 Figma 进阶用法,修改“大移动”(具体设置方法见官方帮助文档 https://help.figma.com/hc/en-us/articles/4404575206295-Set-small-and-big-nudge-values ),从默认的 10px 改到 8px,这将会让你每次移动元素可以保持 8px 的数值(这是基础单位的 2x),只需要按住 shift+方向键即可。这会非常省时间 4. 尽可能设计与内容布局相似的加载状态
加载状态匹配即将加载的真实内容会减少用户对于加载内容的不确定性心态。下面的例子,你可以在右边看一个正确加载效果的设计,会更加符合用户的心理预期。
一组加载状态的效果对比
Figma and Vimeo
5. 定义一个卡片的固定高度
在实际项目中,你需要设计一个卡片元素,假定一个卡片是一行内容,另一个卡片是有 4 行文本内容。最好的解决方案是设计一个固定高度的卡片,在内容较少的卡片上使用留白,而在内容较多的卡片上使用文字截断。(彩云注:这样卡片在效果上更加一致。)
6. 使用网格作为卡片设计的基础规范
网格作为卡片的布局基础,有助于统一地安排内容,这就是为什么当涉及到卡片设计时它们是如此有用。当你需要时,可以使用网格将卡片的宽度扩展到需要的网格列数量,通常这样做,你可以找到一个合适的卡片宽度。当设计一个响应式布局时,应该为每个断点设计一个网格,设计相应的卡片大小。
(彩云注:可能有些人不大理解断点的意思,它指的是从 PC 切换到平板,然后再切换手机,屏幕大小在变化,布局也会做相应的改变)
(1) PC (2) 平板(3) 手机
你可以在这 2 个网站学习到更多关于响应式设计的规范 Material Guidelines or Intuit Design System.
当你在设计基于卡片,响应式布局时,你需要问自己几个问题:
卡片内容在所有断点之间看起来一致吗?(台式机、平板电脑、手机) 间距值是否一致? 交互合理吗?它们会影响卡片的大小和卡片之间的间距吗? 长标题有考虑吗?它们会如何影响卡片的内容? 一些 Figma 设计卡片布局的建议:
为卡片定义约束 constraints( https://help.figma.com/hc/en-us/articles/360039957734-Apply-constraints-to-define-how-layers-resize ),以确定当你调整它们的大小时,布局中的卡片应该如何响应 为卡片应用 auto-layout( https://help.figma.com/hc/en-us/articles/5731482952599-Using-auto-layout ),使它自动调整大小根据里面的项目。在 Figma 上有教程( https://www.figma.com/best-practices/everything-you-need-to-know-about-layout-grids/additional-tips/#using-constraints-with-layout-grids ) 创建一个 8px 的网格可以让你在设计中精确地排列和调整 8px 增量单元的元素大小 7. 创建不同内容的卡片设计
如果你事先知道卡片可能有不同长度的内容,请确保在设计中涵盖这种情况。在不同内容转换过程中将帮助开发以正确的方式为卡片做好还原,避免破坏内容对齐。
8. 为更好的用户体验定义卡片交互
UI 交互是用户通过触摸屏、鼠标或键盘设备与 UI 元素交互时发生的操作,状态是在特定用户的交互中出现的视觉反馈。
与许多其他 UI 元素(按钮、文本字段、下拉菜单等)一样,卡片的状态应该取决于使用上下文和定义的交互。对于特定的交互,卡片应该根据状态设置样式。最常见的卡片状态列表:
默认:卡片处于正常状态,无任何用户交互 悬停:当用户将鼠标光标(指针)放在卡片上时 激活:如果卡片是可点击的,用户按下鼠标主按钮点击它,卡片的样式应该改变,以显示组件是激活的。这与按钮被按下的状态相同 聚焦:当使用键盘或语音等输入法时,卡片会高亮显示。通常在网页上这种状态是用蓝色的,但你可以选择你自己的品牌色,只要确保颜色与背景颜色至少 3:1 的对比度 选择:卡片被选择时的状态拖动:用户拖拽卡片时的状态 总结 卡片是 UI 中的常见组件,你可以在大多数网站和移动应用中找到它,它实在是太流行且实用了,所以一定要掌握好卡片设计并进行大量的练习。通过这些知识点的学习,我们可以使它们在视觉上更有吸引力,更有效,更容易访问。
欢迎关注作者的微信公众号:「彩云译设计」
-
第一波!2022年12月精选实用设计干货合集
UI交互 2022-12-07大家好,这是 12 月的第 1 波设计干货合集!这次的干货合集应该相当符合视觉和平面设计师的需求,有每日更新灵感素材的设计师干货日报,有两款各有特色的配色工具,有免费的3D字体小样,也有开源免费的高品质图标,有风格现代简约但是质感十足的免费背景素材,还有新的人工智能绘图工具。当然,在此之前记得看看往期干货中有没有...大家好,这是 12 月的第 1 波设计干货合集!这次的 干货合集 应该相当符合视觉和平面设计师的需求,有每日更新灵感素材的设计师干货日报,有两款各有特色的 配色工具 ,有免费的3D字体小样,也有开源免费的高品质图标,有风格现代简约但是质感十足的免费背景素材,还有新的人工智能绘图工具。
当然,在此之前记得看看往期干货中有没有你感兴趣的素材:
第五波!2022年11月精选实用设计干货合集 大家好,这是 11 月的第 5 波设计干货合集!
阅读文章 >
下面我们具体看看这一期的干货:
1、免费高素质简约现代弥散背景 https://vackground.com/product/liquid-wave-modern-mesh-backgrounds
高素质的背景素材能够极大地提成整个页面的格调,而这套免费的背景素材就可以做到这一点,整体的风格非常现代,而且带有弥散渐变的光影,视觉效果拉满。这组免费背景总体有 40 张,包含有 ai 和 jpg 两种格式,有需要的同学赶紧下载。
2、为品牌精心适配的配色工具 https://draftss.com/color-palette-for-branding
这个名为 Colorss 2 的配色工具和其他配色工具略有不同,它会根据情绪、感知和氛围来制定配色方案,这些情绪具体有什么特征,适合什么定位的品牌使用,会给人什么样的感受,都会搭配相应的说明,方便设计师使用。而且 Colorss 还会制定配色方案的延伸和变种,方便在复杂的使用场合灵活使用,可以说相当良心了。
3、图案快速预览配色工具 https://more.graphics/variants
某个配色方案确定之后,整体的效果到底好不好?最简单的方法,就是找个图案直接套用看看效果。这个服务就是专门干这个事儿的,内置了3个图案专门用来查看各种配色的实际对比度和视觉效果,你也可以自己上传图案来测试效果,并且也可以自定义配色方案来查看效果。
4、超帅的立体 3D 字体 Font Z https://fontz.design/
FontZ 提供的 3D 字体几乎适用于所有的设计项目,这些预先设计好样式的字体可以非常轻松地使用,而且支持的软件类型也相当丰富,从 PS Sketch 到 Figma Blender,虽然整套字体是收费的,但是提供免费的 Demo。
5、每日更新的设计师干货日报 https://designerdailyreport.com/
这个名为设计师日报的浏览器插件,会提供每日精选内容,从精选的图片、免费的字体、品牌设计、优秀设计师作品集到令人惊叹的网站、作品以及 Instagram 灵感等,不一而足,想让灵感和素材触手可及的同学可以装上这个插件获取灵感吧。
6 、免费开源的高素质图标 https://circumicons.com/
这是一个面向设计师和开发者的开源图标库,这套图标库总计有 285 个不同但是足够日常使用的图标,这些图标特别适合使用 React、Vue、Svelte 等现代开发框架的地方,无论你是设计师还是开发者,都可以轻松驾驭和使用这些图标。
7、人工智能绘图平台 AISEO ART https://art.aiseo.ai/
AISEO Art 同样是一个基于人工智能的文字转图片的服务,它的人工智能算法按照分类进行过细致的训练,你可以在输入文本描述之前,先选择你要生成的图片的分类,它生成的结果会更贴合需求。此外,AISEO Art 还新上线了模板功能,喜欢尝试的同学可以上手看看。