-
万字干货!微信读书产品设计策略推导
UI交互 2022-04-25全文11250字,拆解页面80个,3大理论设计模型,100多个产品设计细节,通过对【微信读书】的设计策略推导,为你提供一份读书类APP产品解题宝典! ...全文11250字,拆解页面80个,3大理论设计模型,100多个产品设计细节,通过对【 微信 读书】的设计策略推导,为你提供一份读书类APP产品解题宝典!
序言 1. 适合人群 UI/交互设计师
跳出执行层的思维,从产品设计策略推导过程中提升产品设计分析能力;
产品经理/运营
通过全面完善的产品设计策略推导、交互演示,获取读书类产品的设计参考;
读书类产品从业者
通过全面的产品设计策略推导、用户需求分析,获取 竞品分析 参考;
2. 推导目标 通过对「 微信读书 」V6.2.2 APP 产品设计的拆解和策略推导,去思考总结一款读书类的 APP 应该如何设计,如何才能发展成一款用户习惯类产品,为相关的产品设计从业者提供一份产品设计策略参考,从而降低产品的失败率。
3. 推导步骤 第一步:产品拆解
通过全面的设计拆解,深究「微信读书」的产品设计细节。
第二步:策略推导
结合增长模型、上瘾模型、社会心理学进行设计策略推导,分析「微信读书」为什么这么做。
第三步:总结思考
通过用户需求、动机、习惯分析,对「微信读书」的设计策略进行验证,从而输出产品设计参考。
4. 分析模型 增长模型
由戴夫·麦克卢尔提出,包含用户获取、用户激活、用户留存、获取收入、用户推荐,分别对应用户生命周期中的 5 个重要环节,主要用于分析产品的功能价值。
上瘾模型
由尼尔·法埃尔提出,通过对上千种习惯类产品的调研,总结出一款产品如果要让用户习惯、上瘾,可以按照触发、行动、多变的酬赏和投入四个步骤去设计,主要用于分析产品的功能价值和推导产品的策略设计。
万字读书笔记!产品设计宝典《上瘾》全面解读!(上) 为什么人们每天都会刷朋友圈、刷抖音,而且一刷就是几个小时,根本停不下来?
阅读文章 >
万字读书笔记!产品设计宝典《上瘾》全面解读(下) 《上瘾》这本书从大量的实验案例调研中,总结出那些让用户上瘾的产品设计原则,最后提炼出了一个让用户上瘾的模型,读完以后,真的恍然大悟,原来习惯类的产品需要这么设计。
阅读文章 >
社会心理学
主要结合西奥迪尼的社会心理学《影响力》六大说服力原则——互惠、承诺和一致、社会认同、喜好、权威和稀缺,去推导产品设计的用户心理设计,主要用于推导产品的策略设计。
用户需要什么样的读书 APP? 据艾瑞咨询 2020 年发布的《中国数字阅读产品营销洞察报告》,数字阅读行业市场规模突破 200 亿,数字阅读用户规模突破 4 亿,如今市场上的读书类 APP 也数不胜数,但是用户为什么要读书,需要什么样的读书产品,读书类产品的设计到底面临什么难点,我将结合尼尔·法埃尔的上瘾模型以及 B.J.福格的行为认知学进行剖析和总结。
如何提高设计转化?先学会经典的「福格模型」 日常工作中我们经常要考虑如何吸引用户转化。
阅读文章 >
1. 用户为什么要读书? 痛点分析
阅读前
门槛高:读书需要时间,还要动脑筋去思考去理解,本身不是一件容易的事情,所以喜爱并能坚持的阅读的人很少。
时间少:人们现在的生活节奏实在太匆忙了,从早晨到晚上,几乎都有做不完的工作,到了周末,又要陪伴家人或和朋友聚会,能静下心读书的时间实在太少。
阅读中
找书难:读书很重要,大部分人都能明白,但在有限的时间里不知道看什么书,看了又有什么作用,似乎和当下的工作、生活状态联系不上来。
难以坚持:读书需要日复一日的坚持,一本再薄的书,最少也要花 3-5 个小时才能阅读完,而且如果只是零散的阅读,根本无法建立有效的知识体系,过了几日就彻底忘记。
阅读后
可感知价值不高:用户读的书太少,太过零散,所以对图书的可感知价值不高,读完以后也说不出获得了什么。
难以学以致用:大部分人读书没有方法,没有系统化阅读,读完就忘记,所以无法学以致用。
用户动机
行为设计学的发明人美国斯坦福教授 B.J.福格,把用户的动机主要分为三类,第一种,追求快乐,逃避痛苦;第二种,追求希望,逃避恐惧;第三种,追求认同,逃避排斥。
读书对大多数人来说,是一件枯燥乏味、耗费脑力、难以坚持的事情,所以大部分用户之所以读书,更多是为了追求希望。用户要追求什么希望呢?这是因为随着信息科技的高速发展,职场的压力越来越大,对人才的要求已经越来越高,这个时代需要更专业、更全面的人才,读书成了最好、最公平、最便宜的方式。所以这是用户选择读书的真正动机。
期待酬赏
酬赏也就是奖励,用户通过读书,可以获得什么奖励?这是用户选择读书的目的。
社交酬赏
通过读书,提升知识技能后,获取朋友、同行、领导的认可,在工作生活中也能把知识运用起来。
自我酬赏
通过读书,丰富了自己的精神世界,自己感到满足、开心、快乐。
2. 用户对读书产品的需求 时间需求
移动互联网时代,用户的时间已经被切割成碎片,难以聚焦到某个集中的时间段进行阅读,更多是在等待客户会议结束的办公室里,在出差的高铁上,在加班回家睡前半个小时这样碎片化的时间进行阅读。
设备需求
必须是随时随地可阅读的手机 APP,多数用户已经没有耐心和时间通过笔记本或纸质书籍进行阅读了,即便 kindle 做得再好,用户在高铁啃着面包,带着 kindle 外出读书的场景已经一去不复返了。
书籍需求
书籍要齐全,多数用户是因为朋友推荐某本书,或因工作需求才会下载某个读书 APP,有目标性的阅读。
体验需求
产品的用户体验要友好,读书界面排版要规整,阅读不费劲,如果有小惊喜,那就更棒了。
金钱需求
多数用户并不排斥付费,甚至有很多人还有购买实体书阅读的习惯,对电子阅读的方式,更希望是物美价廉的价格。
精神需求
用户开始坚持读书后,除了书籍能给自身的帮助,还渴望获得更多的精神需求,比如对书籍的评论或观点获得认同,甚至希望能给外界留下自己爱读书、积极奋进的形象等等。
3. 读书类 APP 的设计难点 书籍版权
首先你得拥有海量的书籍版权,如果你花了 100 元的广告费吸引了一个新用户在你的 APP 无法找到心仪的书籍,那么这个用户大概率就会失去了。书籍的版权成为读书类 APP 的最低门槛。
用户时间
对于读书类 APP,产品用户数的增长和数量不能成为评估产品是否成功的唯一标准。即便你有 2 亿用户,如果用户每周平均读书时间低于 10 分钟,那么这个产品也难以达到预期中的价值。如何鼓励用户读书,如何增加用户读书时间,才是产品增长的最大难点。
用户习惯
读书的本质是一个习惯行为,如果用户无法坚持,三天打鱼两天撒网,那么这样的用户也无法称为活跃用户、习惯用户,所以读书类 APP 最终的目标是建立用户读书习惯,让用户每天、每周坚持阅读。谁能让用户习惯自己,谁就能成为行业最后的胜者。
4. 小结 综上所述,大部分用户读书的真正动机是希望提升技能、学习新知识,从而在职场、生活中能够获取更多的认同,从而提升自己的核心竞争力。用户对读书产品真正的需求是便捷,在有限的时间里随时随地进行阅读。而读书类 APP 设计的本质和难点就是如何让用户习惯使用自己的产品进行阅读,这是一个抢夺用户习惯的赛道。
微信读书设计策略推导 1. 产品画像 产品介绍
「微信读书」是一款成长在微信土壤的阅读类 APP,以阅读+社交的设计理念,对读书类产品进行了颠覆式设计,不仅可以为用户提供电子书籍阅读、实体书籍购买,用户还可以发布读书想法、撰写读书笔记,志在为用户打造一个以书交友的平台——让阅读不再孤单。
产品生命周期
诞生于 2015 年的「微信读书」,目前已进入产品生命周期的成熟期。根据官方 2019 年中旬公布的资料,微信读书用户数已经超过 2.1 亿(到如今保守估计最少 3 亿);而根据易观千帆 2021 年 4 月份的数据统计,月活跃用户人数已超过 2000 万。处于成熟期的产品,主要聚焦于用户的留存和变现,其次在功能和界面设计方面都已趋于稳定,更侧重于追求极致的用户体验。
用户画像
综合百度指数、易观千帆等第三方平台统计数据,微信读书用户人群普遍学历较高,以大学生、上班族、自由职业者为主,年龄较轻(20-35),生活在一线,主要分布在北上广深这一类一线大城市,喜欢在午间与睡前阅读。
用户评价
截止到 2022 年 4 月 15 日,微信读书在 APP Store 评分为 4.9 分,阅读类书籍排行第 3。微信读书结合社交的理念,对读书类产品进行了颠覆式设计,虽然褒贬不一,但用户对微信读书的评价相对较高。
迭代历程
截止到 2022 年 4 月 15 日,从含着金钥匙华丽诞生到现在,微信读书在过去 6 年多时间,从初期的阅读+社交初步试探,到要为用户讲一个好故事,最后到今天的让阅读不再孤单,已经进行了大大小小数百次迭代,最新的版本为 V6.2.2。
2015 年 8 月 28 日正式发布 V1.0 版本,以阅读+社交理念初步探索;
2017 年 5 月升级到 V2.0 版本,可查看公众号文章,支持有声读书;
2018 年 9 月升级到 V3.0 版本,推出微信读书无限卡会员服务;
2019 年 6 月进行 V4.0 升级,slogan 升级为看一个好故事,让阅读简单一点;
2020 年 8 月升级到 V5.0 版本,支持在产品购买实体书;
2021 年 10 月升级到 V6.0 版本,slogan 再次升级——让阅读不再孤单。
产品拆解
对「微信读书」的功能信息架构、核心页面进行全面的拆解,然后把功能按照增长模型划分为三大类,分别是「读书服务」、「营销工具」和「会员服务」,为策略推导做最后的准备。
小结
通过对产品画像的整理,我们了解了微信读书的基础信息,作为腾讯系设计开发的产品,有天生的成长优势,依托微信强大的用户基数和巨大的流量,这是一个含着金钥匙出生的富二代。而通过快 7 年时间的发展,它的用户数和活跃用户数应该是读书类 APP 产品的前列(由于没有真实数据的考证,只能结合已公布的数据进行判断)。
2. 读书服务 阅读
功能价值
「阅读」是微信读书 APP 的首页,根据用户兴趣和好友在读推荐相关的书籍和书单,形成千人千面的信息流,降低用户找书的时间成本,快速激活变现;其次通过多变性的设计,让用户保持对产品的新鲜感,极大提升用户留存率和产品满意度。
策略推导
1)头部展示用户「本周阅读数据看板」和「最近在读书籍」,直观醒目,又能让用户聚焦读书。
2)根据用户兴趣推荐相关的书籍和书单,利用多变性的信息流,带给用户新鲜感,对用户留存有极大帮助;推荐好友在读书籍,利用从众心理,激发用户读书欲望。
3)页面头部下拉后进入二楼,不仅节省排版空间,更能向客户快速传播促销服务,激活用户。
书城
功能价值
「书城」是为用户提供找书、选书阅读的图书馆,包含了国内外众多知识领域的专业著作,比如经济理财、社会文化、历史文学等常见分类,其次还有男生小说、女生小说两大年轻用户喜欢的种类。「书城」是实现用户激活、留存和变现的重要方式。
策略推导
①书城首页
1)用户可输入关键词对目标书籍进行快速检索(滚屏播放热门书籍),快速实现用户激活。
2)向用户展示书城分类,「男生小说」和「女生小说」是利润产品,位置最靠前;「听书」是战略计划,为微信听书引流,形成闭环;「书单」为图书增加了功能和场景,减少读书的枯燥度,也降低了找书的时间成本;「榜单」根据热度划分,激发用户读书兴趣;「免费书」属于互惠促销,快速激活用户。
3)利用神秘的多变性,根据用户在读、读过的书为用户推荐感兴趣的书籍;在右上角还设置了「摇一摇」的功能,用户每点击一次,推荐不同的书籍,帮助用户快速获取”猎物”,开始读书。
4)图书根据上新时间、热度、价值划分为「新书速览」、「排行榜」、「热门推荐」、「重磅好书」,激发用户兴趣,降低找书成本。
5)书单根据时间、功能划分为三类,分别是「每周书单」,「今日书单」,「专题书单」;「每周书单」包含了每周最受关注、每周搜索人数最多、每周评论人数最多图书;「今日书单」筛选了用户创建的热门书单;「专题书单」是针对某一个专题生成的图书合集;书单的目的是引导用户快速阅读,实现激活变现。
② 图书详情页
1)右上角分别为「听书」、「在读人数」、「分享」和「更多」。「听书」为机器阅读,体验虽差,但可满足不同人群的用户习惯;「在读人数」加入了社交属性,用户可查看在读朋友人数、本书阅读用户,可对朋友的阅读、想法进行查看、点赞;「分享」和微信全面链接,用户可把读书状态同步到微信状态,打造完美的外部触发,传播引流;「更多」里面,加入私密阅读,充分尊重用户隐私权。
2)根据用户评分和图书热度,生成了「微信读书推荐值」,激发用户兴趣;其次通过「精彩点评」和「热门划线」,增强信任状,为用户选书做出参考。
⑷通过全面完整的「图书详情页」介绍,持续增强信任状,打消用户顾虑;在底部可查看作者、出版社其他图书,关联了相关书籍,书单,实现阅读的小闭环。
书架
功能价值
「书架」就像收藏夹,用户在阅读的时候,可以把图书加入到书架,方便阅读。「书架」可查看最近更新书籍、在读书籍、已读书籍、未读书籍,支持用户对图书进行分类,还可以创建书单分享。「书架」就是用户对产品的内容投入,可以有效帮助产品实现用户激活,培养用户习惯。
策略推导
① 书架页
1)头部为「搜索」和「添加」,搜索框滚屏播放最新热门书籍;点击「添加」后,支持从电脑、icloud、微信导入书籍。
2)TAB栏包含「默认」、「更新」、「进度」、「购买」和「分类」,满足用户可根据不同的维度查看读书进度。
3)「书单」和「书架」为同一权重,主要是鼓励用户创建书单,为平台创造优质内容;用户可对书籍进行分类、移除、下载等,有效对图书进行管理。
② 书单页
1)用户可创建自己的书单,也可以搜索别人的书单;
2)官方根据用户创建的书单,精心筛选,解决用户找书难的痛点;
3)用户可对书单评论、收藏,给书单创建者赐予社交酬赏,形成闭环,从而创建更优质的内容。
读书
功能价值
「读书」是指用户选定书籍以后开始进入阅读。「读书」加入了腾讯土壤的社交基因,提供了丰富多样的功能,如想法、划线、个性字体、个性背景,在读书的同时可以和书友一起讨论交流。「读书」是培养用户习惯,让用户对产品上瘾,实现用户留存的重要方式。
策略推导
① 读书页
⑴用户进入阅读,「未加入书架」会进行强提醒,避免用户再次寻找;用户可把图书加入「购物车」,除了开通无限会员卡阅读,还支持电子图书、纸质图书购买,快速变现;利用羊群效应,展示朋友在读人数和阅读总用户数;「分享」支持同步到微信个人状态,微信看一看,引流推广;点击「更多」,系统提供了自动阅读、下载到本地阅读等方式,还提供了私密阅读、隐藏想法等充分尊重用户自主权的功能。
⑵用户可根据自己习惯切换到「听书模式」;可快速进入图书关联的「小圈子」,和书友进行交流分享;鼓励用户输入「想法」,和书友交流学习。
⑶点击可查看图书「目录」,快速跳转;提供「笔记」和「划线」功能,帮助用户记录,同时也增加用户投入;可自由拖动读书进度,切换「自动阅读」模式;提供多种读书背景,支持会员使用特殊皮肤,诱发变现;用户可自由调节字体类型,字号,边距,行距,还提供多种字体效果,支持会员使用特殊字体,诱发变现。
⑷当前页面用户发表的想法可快去查看,用户可进行评论、点赞、转推;用户对图书进行划线后,可对划线进行评论、点赞、分享。
② 尾页
图书读完后,关联对应的「小圈子」,形成小闭环,目的是利用社交酬赏,抢夺用户时间,把用户留在微信读书;为用户推荐相似书籍,引导用户继续阅读,开始下一个读书闭环。
③ 结束页
⑴标记完结,自动生成海报,利用社交酬赏,引导用户分享传播。
⑵系统展示精选读书笔记,激发用户对图书撰写高质量读书笔记获取点赞、转推。
小圈子
功能价值
「小圈子」是一个为书友提供交流学习的社区,用户可以加入不同主题的小圈子(官方创建),发表想法,点赞评论分享。「小圈子」可以帮助产品实现用户留存,提高用户活跃度。
策略推导
⑴根据不同的主题,官方创建不同的兴趣圈子,用户可根据兴趣加入,可以发布想法,点赞评论,获取社交酬赏,提升用户活跃度。
⑵用户在发表想法的时候,可以关联官方创建的主题,形成话题,丰富圈子内容,反向吸引用户,打造优质、健康的社区氛围。
朋友的想法
功能价值
「朋友的想法」继承了微信朋友圈的基因,好友在看书所发表的想法会同步更新,朋友之间可进行转推、评论、点赞,获取社交酬赏,有效提高用户活跃度。
策略推导
为了节省用户时间,丰富产品内容,提高使用频率,用户的读书想法默认同步至想法圈;用户发表的想法自动关联书籍,好友可直接进入阅读,降低使用成本。
笔记
功能价值
「笔记」就是用户对产品的数据资料投入,当用户在阅读一本书的时候,会做大量的笔记,随着笔记越来越多,用户对产品的依赖度就越来越大,从而彻底习惯产品,变为忠实用户。
优化建议
从当前版本来看,笔记的功能还略显单薄,还未能充分吸引住用户产生更多的投入。
小结
从读书服务这个板块来观察,微信读书的产品设计理念就是把读书和社交充分结合,利用微信土壤无与伦比的优势,全面连接微信生态,把读书这件略显枯燥乏味的行为,打造成一个可随时交流沟通、以书交友的平台。
3. 营销服务 每日一答
玩法规则
「每日一答」有两种玩法,第一种是用户每天可以进行回答挑战,连续答对 12 道题目后可参与「瓜分无限卡」、「书币」的机会,答错则丧失机会,但可以通过「复活卡道具」或分享给好友请求帮忙获取复活机会;第二种是「问答 PK 比赛」,采用赛季制,持续时间为两个月,用户可邀请好友或随机对战,胜利者可赢取积分,赛季结束后根据积分决胜出总冠军,最终给与玩家不同的奖励。
功能价值
「每日一答」从 APP 直接跳转到微信,不仅操作体验方便,更能结合微信生态引流传播,打造全民学习答题的读书活动。其次通过丰富多变的游戏化方式,保持对用户的新鲜感,形成读书-娱乐的小闭环,抢夺用户时间,提高用户留存率,增强用户满意度、忠诚度,是培养用户对产品形成习惯的重要方式。
策略推导
⑴「积分」的玩法非常丰富,不仅可以「抽奖」,「兑换无限卡」、「道具卡」还可以直接兑换书籍,为用户提供了多变性的猎物酬赏。
⑵进入「每日一答」,用户可选择「瓜分读书天数」(以读书时间为诱)或「书币」(以钱为诱)两种形式的问答;「排行榜」分为好友排行和全网排行,通过排名机制,以社交酬赏为诱,吸引用户积极参与问答,从而提高用户习惯度,成为忠实粉丝。
⑶利用稀缺性,用户每天只有1次机会回答机会,但如果回答错误,可通过使用「续命卡」或邀请朋友解答的两种形式进行复活;用户闯关失败后,用户还可通过「书币购买」、「看广告复活」、「邀请朋友」玩游戏复活,通过这样多变、丰富、游戏化的答题形式,彻底让用户主动分享传播,拉新引流。
⑷「问答PK」的设计非常创新,有别于很多答题竞猜的的单机游戏模式,微信读书采用了体育比赛的赛季制度,让用户像踢比赛一样参与,每个赛季时间为2个月,通过PK,决胜出赛季总冠军,刺激又好玩,让用户彻底上瘾。
免费领书
功能价值
用户可通过分享领取图书,也可以通过阅读 5 分钟并加入书架后领取,这对未付费用户的激活和新用户的引流有很大的帮助。
策略推导
根据用户读书记录、兴趣推荐,激发用户兴趣;用户阅读 5 分钟加入书架也可赠送,有效促进未付费、未形成习惯的用户激活;多变性的设计,每天能领取的图书都不一样,给用户始终保持神秘感。
无限会员日
功能价值
每周一为「无限会员日」(无限会员就是微信读书的 VIP 会员),用户可进行免费抽奖,并为自己最想要的「会员权益」投票。这是新用户激活、老用户留存的好方法。通过「抽奖」、「会员权益」吸引新用户购买无限卡,其次给与老用户充分的自主权,让他们来参与产品设计,极大提高用户的活跃度和忠诚度。
策略推导
充分利用稀缺性,每周 1 次,每次也只能抽奖 1 次;结合游戏化风格设计,模拟真实的老虎机交互效果,生动又有趣;通过调研,调动粉丝的产品设计参与度,满足用户真实需求。
翻一翻
玩法规则
每周一期,每期 9 本赠书,每周二中午更新,普通用户可翻 3 张卡,每张卡可领取一本赠书,无限卡会员可翻 6 张卡。
功能价值
「翻一翻」是促进用户激活的有效方式,通过游戏化风格的设计,每周精选 9 本书籍赠送给用户,吸引用户开始阅读,培养读书习惯。
策略推导
充分利用了互惠原理、稀缺和多变性的酬赏,激发用户兴趣,培养用户习惯。
组队抽取无限卡
玩法规则
每周一期,每周六更新,用户需要邀请 4 个好友才有资格参与;组队成功后,每周六中午 12 点公布中奖信息。
功能价值
「组队抽奖」是一个纯分享邀请的引流传播形式,利用「终身无限卡」为诱饵,激发用户组队抽奖,其次抽奖规则门槛也高,有效避免用户利用规则漏洞重复参与。
策略推导
充分利用互惠原理,人人皆可组团,团长更能额外获得多一次机会,从而充分调动了团长拉新引流的积极性。
组队读书
玩法规则
三人成队,一起读书,以「无限卡」、「抽奖」为诱,21 天为一个积分周期,根据每期的最终积分读书小队还可以晋升等级,兑换更丰富的奖品。
功能价值
「组队读书」是促进用户激活、留存的重要方式,以组队读书的形式,用户不仅可相互监督,还极大提高了活跃度。
策略推导
⑴利用独具创意的设计方式,把一个人读书变成了三个人一起读书,极大提高用户活跃度和忠诚度;
⑵每周发布不同的共读任务,以21天为周期的比赛机制,通过奖品酬赏,让小组成员之间自发相互监督,有效激活未付费用户,彻底培养用户读书习惯。
联名卡
玩法规则
每周精选 6 本好书,每周四更新,用户分享至微信好友或朋友圈集齐 2 个赞可获得 2 天无限卡,每期最多可得 12 天无限卡。
功能价值
「联名卡」是鼓励用户分享传播的有效方式,通过分享集赞的方式,可兑换相应的无限卡天数,进一步激活用户变现。
策略推导
颜值超高的海报设计搭配传神的文案,让用户更主动参与传播,形成人际型触发,老用户带新用户,无限增长。
邀请微信朋友
玩法规则
用户邀请朋友和 30 天未阅读用户阅读可以获得 3 天无限卡,成功邀请多人奖励可累积。
功能价值
「邀请朋友」是鼓励用户拉新和唤醒活跃度极低的用户一个方式,用户行动成本低,酬赏不高,但可以有效激活用户传播。
策略推导
自动生成了用户读书时长和读完书籍,通过这样有趣而又取巧的设计,利用社交酬赏,激发用户主动邀请好友,双向倒逼,一举两得。
阅读时长
功能价值
根据用户每周的阅读时间,为用户生成当周的读书时长统计,用户还可以按月、按年的时间查询历史读书时长。这个功能对用户的留存有极大的帮助,是提高用户满意度和忠诚度的重要方式。
策略推导
⑴右上角点击分享后,可以分享给好友,可以生成当周的读书海报,可以设置为「微信状态」,从而帮助用户获取社交认同,引流推广。
⑵为用户提供全面直观的数据分析,用户可按天、周、月查看读书分析,还可查看「年度读书报告」,像一部留声机,储存着用户的读书回忆;底部展示本周读书的详细记录,包括「读过的书」、「阅读字数」、「留下的笔记」,通过如此直观具象的设计,让用户尖叫。
⑶设置了「阅读奖励」,拆分成不同的阅读小任务,培养用户的读书习惯,从而进一步寻找机会激活变现。
小结
通过对营销服务的全面分析推导,我们发现,微信读书真是沿袭了腾讯系的产品设计套路,把用户彻底研究透了。充分利用了互惠、稀缺、社会认同、多变性酬赏等营销模型,让用户主动分享、主动学习、主动参与,最终培养用户形成使用产品的习惯,成为产品的忠实粉丝。
4. 会员服务 个人主页
功能价值
「个人主页」是用户对好友展示的落地页,它记录了用户在微信读书的全部投入,包含了「读书时长」、「粉丝数」、「获得的赞」、「收获的勋章」、「创建的书单」、「发表的想法」的等。用户不仅可以查看自己的读书历程,还可以生成海报向朋友分享,满足了用户的炫耀心理,从而激发用户更加努力读书,彻底养成习惯。
策略推导
⑴利用炫耀心理,详细展示了用户的「读书时长」、「收到的赞」、「粉丝数」和「勋章」,让用户可第一时间感知,诱发传播分享。
⑵「书架」和「读完的书籍」只对关注的好友开放,充分尊重用户的隐私权,保证了读书的私密性,这也解释了为什么当有新用户关注的时候,需要用户确认。
读书排行榜
功能价值
「读书排行榜是」据用户每周读书时长自动生成的,目的是通过好友之间的排名,利用用户的攀比心理,激发用户读书,提高用户读书时间,培养用户习惯。
策略推导
利用赠券效应,「读书时长」可兑换阅读福利;通过排名,利用攀比心理,激发用户增长阅读时间;右上角可生成读书排行榜海报,传播引流。
勋章
功能价值
微信读书的勋章体系非常丰富,包含了「连续阅读」、「阅读时长」、「阅读天数」、「阅读书籍」、「读完书籍」、「收到的赞」和「想法」发布七大类型,充分激发用户读书兴趣,留存用户,培养用户习惯。
策略推导
⑴「勋章」体系分类非常有创意,根据时间的维度有「连续阅读」、「阅读时长」、「阅读天数」,这是对用户阅读时间的酬赏;根据阅读书籍数量有「阅读书籍」、「读完书籍」,这是对用户阅览群书的酬赏;根据想法和点赞,又有「收到的赞」和「想法发布」,这是对用户的内容投入进行酬赏。通过如此多维度的设计,多变性的酬赏,从而提高用户新鲜度、活跃度和忠诚度。
⑵点击右上角的分享,可分享给好友,还可同步微信状态,生成勋章海报,拉新引流。
消息
功能价值
「消息」是产品的外部触发,当用户收到评论、点赞时候,会第一时间通知用户;其次用户之间可以通过「私信」在线沟通,建立好友关系,增加用户的关系投入,从而培养用户对产品的使用习惯。
关键发现
在「私信」的对话窗口,点击「推送」图标,不仅可以把「书架」的书籍推送给好友,还可以通过「书城」搜索直接发送,这个功能充分结合了用户场景设计,体验非常棒。
小结
通过这个篇章的分析,我们可以感受出微信读书团队对用户读书这件事的理解已经不是传统意义的读书了。他们努力的不只是为用户提供超过上百万的书籍阅读,而是努力在把阅读彻底变成了一种生活习惯,你不仅可以查看每周的读书时长分析,甚至还可以查看两年前的读书记录和报告,这不就是一部记录成长的时光机吗?我的天啊,我感觉自己从忠实粉丝变成脑残粉了。
5. 策略总结 多变的酬赏
微信读书设计团队已经把多变性的设计玩得炉火纯青了,无论是为用户推荐书籍,还是阅读这件本身比较严谨的事情,都能给用户随时保持新鲜感和神秘性。用户的读书行为,已经不是一个纯粹的阅读,而是以书交友、以知识分享为乐。
便捷的阅读
只是一个阅读页,微信读书也设计了无数个细节。不仅可以帮助用户做笔记、划线,还可以切换听书,查看或分享想法,甚至连读书的字体、背景都支持个性化定制,把阅读这件小事做到极致。
高频的触发
通过丰富的营销玩法、分享机制,在微信的生态,触发用户阅读的方法有上百种。你能想象当你看见你的同事微信状态显示正在阅读《增长黑客》的时候,你不思考接下来如何制定一个读书计划吗?
用户高投入
用户的高投入将会彻底提高用户对产品的忠诚度,因为用户在读书过程中会产生很多数据资料,比如划线、笔记、想法,甚至阅读时间、读完记录等,你能让一个在微信读书拥有 18 枚勋章、阅读时长超过 1000 小时的用户变成你的读书用户吗?比登天都难!
写在最后的话 写完整篇分析的时候恰逢第 27 个世界读书日,在《人民日报》等官方媒体都在号召全民读书的时候,作为一个需要每天输入大量知识并反复输出的创业者,我很庆幸,能通过读书 APP 让自己坚持每天阅读。而通过对微信读书的设计策略全面推导,我认为,微信读书真的是一款非常棒的读书类 APP,他们的产品设计策略不仅直击用户痛点,还进行了颠覆性的创新设计,不是给用户一辆跑得更快的马车,而是一辆可以加速到 400 码的法拉利!
附录参考 1. 参考书籍
《增长黑客》-肖恩·埃利斯/摩根·布朗 《影响力》-罗伯特·西奥迪尼 《上瘾》-尼尔·法埃尔 《福格行为模型》-B.J.福格
2. 参考文章
微信读书的终局:社群化-niko 微信读书产品设计中的心理学-原住民 让阅读不再孤独:微信读书产品体验报告-fantasy 艾瑞咨询-2020 年中国数字阅读产品营销洞察报告
从三大模型入手,拆解微信读书的11种营销玩法设计 「微信读书」是一款基于微信关系链的阅读类 APP,以阅读+社交的设计理念,对读书类产品进行了颠覆式设计,旨在为用户打造一个以书交友的平台——让阅读不再孤单。
阅读文章 >
超过5000字的产品笔记,揭秘微信读书是如何让人上瘾的! 二手最近迷上了微信读书,上下班的地铁上,吃饭中,甚至是去个洗手间都要打开微信读书看一会,曾经用来漫无目的刷微博、刷新闻的零碎时间,现在慢慢的都被微信读书占据了。
阅读文章 >
欢迎关注作者微信公众号:「以琳设计ElimDesign」
-
万字干货!微信读书产品设计策略推导
UI交互 2022-04-25全文11250字,拆解页面80个,3大理论设计模型,100多个产品设计细节,通过对【微信读书】的设计策略推导,为你提供一份读书类APP产品解题宝典! ...全文11250字,拆解页面80个,3大理论设计模型,100多个产品设计细节,通过对【 微信 读书】的设计策略推导,为你提供一份读书类APP产品解题宝典!
序言 1. 适合人群 UI/交互设计师
跳出执行层的思维,从产品设计策略推导过程中提升产品设计分析能力;
产品经理/运营
通过全面完善的产品设计策略推导、交互演示,获取读书类产品的设计参考;
读书类产品从业者
通过全面的产品设计策略推导、用户需求分析,获取 竞品分析 参考;
2. 推导目标 通过对「 微信读书 」V6.2.2 APP 产品设计的拆解和策略推导,去思考总结一款读书类的 APP 应该如何设计,如何才能发展成一款用户习惯类产品,为相关的产品设计从业者提供一份产品设计策略参考,从而降低产品的失败率。
3. 推导步骤 第一步:产品拆解
通过全面的设计拆解,深究「微信读书」的产品设计细节。
第二步:策略推导
结合增长模型、上瘾模型、社会心理学进行设计策略推导,分析「微信读书」为什么这么做。
第三步:总结思考
通过用户需求、动机、习惯分析,对「微信读书」的设计策略进行验证,从而输出产品设计参考。
4. 分析模型 增长模型
由戴夫·麦克卢尔提出,包含用户获取、用户激活、用户留存、获取收入、用户推荐,分别对应用户生命周期中的 5 个重要环节,主要用于分析产品的功能价值。
上瘾模型
由尼尔·法埃尔提出,通过对上千种习惯类产品的调研,总结出一款产品如果要让用户习惯、上瘾,可以按照触发、行动、多变的酬赏和投入四个步骤去设计,主要用于分析产品的功能价值和推导产品的策略设计。
万字读书笔记!产品设计宝典《上瘾》全面解读!(上) 为什么人们每天都会刷朋友圈、刷抖音,而且一刷就是几个小时,根本停不下来?
阅读文章 >
万字读书笔记!产品设计宝典《上瘾》全面解读(下) 《上瘾》这本书从大量的实验案例调研中,总结出那些让用户上瘾的产品设计原则,最后提炼出了一个让用户上瘾的模型,读完以后,真的恍然大悟,原来习惯类的产品需要这么设计。
阅读文章 >
社会心理学
主要结合西奥迪尼的社会心理学《影响力》六大说服力原则——互惠、承诺和一致、社会认同、喜好、权威和稀缺,去推导产品设计的用户心理设计,主要用于推导产品的策略设计。
用户需要什么样的读书 APP? 据艾瑞咨询 2020 年发布的《中国数字阅读产品营销洞察报告》,数字阅读行业市场规模突破 200 亿,数字阅读用户规模突破 4 亿,如今市场上的读书类 APP 也数不胜数,但是用户为什么要读书,需要什么样的读书产品,读书类产品的设计到底面临什么难点,我将结合尼尔·法埃尔的上瘾模型以及 B.J.福格的行为认知学进行剖析和总结。
如何提高设计转化?先学会经典的「福格模型」 日常工作中我们经常要考虑如何吸引用户转化。
阅读文章 >
1. 用户为什么要读书? 痛点分析
阅读前
门槛高:读书需要时间,还要动脑筋去思考去理解,本身不是一件容易的事情,所以喜爱并能坚持的阅读的人很少。
时间少:人们现在的生活节奏实在太匆忙了,从早晨到晚上,几乎都有做不完的工作,到了周末,又要陪伴家人或和朋友聚会,能静下心读书的时间实在太少。
阅读中
找书难:读书很重要,大部分人都能明白,但在有限的时间里不知道看什么书,看了又有什么作用,似乎和当下的工作、生活状态联系不上来。
难以坚持:读书需要日复一日的坚持,一本再薄的书,最少也要花 3-5 个小时才能阅读完,而且如果只是零散的阅读,根本无法建立有效的知识体系,过了几日就彻底忘记。
阅读后
可感知价值不高:用户读的书太少,太过零散,所以对图书的可感知价值不高,读完以后也说不出获得了什么。
难以学以致用:大部分人读书没有方法,没有系统化阅读,读完就忘记,所以无法学以致用。
用户动机
行为设计学的发明人美国斯坦福教授 B.J.福格,把用户的动机主要分为三类,第一种,追求快乐,逃避痛苦;第二种,追求希望,逃避恐惧;第三种,追求认同,逃避排斥。
读书对大多数人来说,是一件枯燥乏味、耗费脑力、难以坚持的事情,所以大部分用户之所以读书,更多是为了追求希望。用户要追求什么希望呢?这是因为随着信息科技的高速发展,职场的压力越来越大,对人才的要求已经越来越高,这个时代需要更专业、更全面的人才,读书成了最好、最公平、最便宜的方式。所以这是用户选择读书的真正动机。
期待酬赏
酬赏也就是奖励,用户通过读书,可以获得什么奖励?这是用户选择读书的目的。
社交酬赏
通过读书,提升知识技能后,获取朋友、同行、领导的认可,在工作生活中也能把知识运用起来。
自我酬赏
通过读书,丰富了自己的精神世界,自己感到满足、开心、快乐。
2. 用户对读书产品的需求 时间需求
移动互联网时代,用户的时间已经被切割成碎片,难以聚焦到某个集中的时间段进行阅读,更多是在等待客户会议结束的办公室里,在出差的高铁上,在加班回家睡前半个小时这样碎片化的时间进行阅读。
设备需求
必须是随时随地可阅读的手机 APP,多数用户已经没有耐心和时间通过笔记本或纸质书籍进行阅读了,即便 kindle 做得再好,用户在高铁啃着面包,带着 kindle 外出读书的场景已经一去不复返了。
书籍需求
书籍要齐全,多数用户是因为朋友推荐某本书,或因工作需求才会下载某个读书 APP,有目标性的阅读。
体验需求
产品的用户体验要友好,读书界面排版要规整,阅读不费劲,如果有小惊喜,那就更棒了。
金钱需求
多数用户并不排斥付费,甚至有很多人还有购买实体书阅读的习惯,对电子阅读的方式,更希望是物美价廉的价格。
精神需求
用户开始坚持读书后,除了书籍能给自身的帮助,还渴望获得更多的精神需求,比如对书籍的评论或观点获得认同,甚至希望能给外界留下自己爱读书、积极奋进的形象等等。
3. 读书类 APP 的设计难点 书籍版权
首先你得拥有海量的书籍版权,如果你花了 100 元的广告费吸引了一个新用户在你的 APP 无法找到心仪的书籍,那么这个用户大概率就会失去了。书籍的版权成为读书类 APP 的最低门槛。
用户时间
对于读书类 APP,产品用户数的增长和数量不能成为评估产品是否成功的唯一标准。即便你有 2 亿用户,如果用户每周平均读书时间低于 10 分钟,那么这个产品也难以达到预期中的价值。如何鼓励用户读书,如何增加用户读书时间,才是产品增长的最大难点。
用户习惯
读书的本质是一个习惯行为,如果用户无法坚持,三天打鱼两天撒网,那么这样的用户也无法称为活跃用户、习惯用户,所以读书类 APP 最终的目标是建立用户读书习惯,让用户每天、每周坚持阅读。谁能让用户习惯自己,谁就能成为行业最后的胜者。
4. 小结 综上所述,大部分用户读书的真正动机是希望提升技能、学习新知识,从而在职场、生活中能够获取更多的认同,从而提升自己的核心竞争力。用户对读书产品真正的需求是便捷,在有限的时间里随时随地进行阅读。而读书类 APP 设计的本质和难点就是如何让用户习惯使用自己的产品进行阅读,这是一个抢夺用户习惯的赛道。
微信读书设计策略推导 1. 产品画像 产品介绍
「微信读书」是一款成长在微信土壤的阅读类 APP,以阅读+社交的设计理念,对读书类产品进行了颠覆式设计,不仅可以为用户提供电子书籍阅读、实体书籍购买,用户还可以发布读书想法、撰写读书笔记,志在为用户打造一个以书交友的平台——让阅读不再孤单。
产品生命周期
诞生于 2015 年的「微信读书」,目前已进入产品生命周期的成熟期。根据官方 2019 年中旬公布的资料,微信读书用户数已经超过 2.1 亿(到如今保守估计最少 3 亿);而根据易观千帆 2021 年 4 月份的数据统计,月活跃用户人数已超过 2000 万。处于成熟期的产品,主要聚焦于用户的留存和变现,其次在功能和界面设计方面都已趋于稳定,更侧重于追求极致的用户体验。
用户画像
综合百度指数、易观千帆等第三方平台统计数据,微信读书用户人群普遍学历较高,以大学生、上班族、自由职业者为主,年龄较轻(20-35),生活在一线,主要分布在北上广深这一类一线大城市,喜欢在午间与睡前阅读。
用户评价
截止到 2022 年 4 月 15 日,微信读书在 APP Store 评分为 4.9 分,阅读类书籍排行第 3。微信读书结合社交的理念,对读书类产品进行了颠覆式设计,虽然褒贬不一,但用户对微信读书的评价相对较高。
迭代历程
截止到 2022 年 4 月 15 日,从含着金钥匙华丽诞生到现在,微信读书在过去 6 年多时间,从初期的阅读+社交初步试探,到要为用户讲一个好故事,最后到今天的让阅读不再孤单,已经进行了大大小小数百次迭代,最新的版本为 V6.2.2。
2015 年 8 月 28 日正式发布 V1.0 版本,以阅读+社交理念初步探索;
2017 年 5 月升级到 V2.0 版本,可查看公众号文章,支持有声读书;
2018 年 9 月升级到 V3.0 版本,推出微信读书无限卡会员服务;
2019 年 6 月进行 V4.0 升级,slogan 升级为看一个好故事,让阅读简单一点;
2020 年 8 月升级到 V5.0 版本,支持在产品购买实体书;
2021 年 10 月升级到 V6.0 版本,slogan 再次升级——让阅读不再孤单。
产品拆解
对「微信读书」的功能信息架构、核心页面进行全面的拆解,然后把功能按照增长模型划分为三大类,分别是「读书服务」、「营销工具」和「会员服务」,为策略推导做最后的准备。
小结
通过对产品画像的整理,我们了解了微信读书的基础信息,作为腾讯系设计开发的产品,有天生的成长优势,依托微信强大的用户基数和巨大的流量,这是一个含着金钥匙出生的富二代。而通过快 7 年时间的发展,它的用户数和活跃用户数应该是读书类 APP 产品的前列(由于没有真实数据的考证,只能结合已公布的数据进行判断)。
2. 读书服务 阅读
功能价值
「阅读」是微信读书 APP 的首页,根据用户兴趣和好友在读推荐相关的书籍和书单,形成千人千面的信息流,降低用户找书的时间成本,快速激活变现;其次通过多变性的设计,让用户保持对产品的新鲜感,极大提升用户留存率和产品满意度。
策略推导
1)头部展示用户「本周阅读数据看板」和「最近在读书籍」,直观醒目,又能让用户聚焦读书。
2)根据用户兴趣推荐相关的书籍和书单,利用多变性的信息流,带给用户新鲜感,对用户留存有极大帮助;推荐好友在读书籍,利用从众心理,激发用户读书欲望。
3)页面头部下拉后进入二楼,不仅节省排版空间,更能向客户快速传播促销服务,激活用户。
书城
功能价值
「书城」是为用户提供找书、选书阅读的图书馆,包含了国内外众多知识领域的专业著作,比如经济理财、社会文化、历史文学等常见分类,其次还有男生小说、女生小说两大年轻用户喜欢的种类。「书城」是实现用户激活、留存和变现的重要方式。
策略推导
①书城首页
1)用户可输入关键词对目标书籍进行快速检索(滚屏播放热门书籍),快速实现用户激活。
2)向用户展示书城分类,「男生小说」和「女生小说」是利润产品,位置最靠前;「听书」是战略计划,为微信听书引流,形成闭环;「书单」为图书增加了功能和场景,减少读书的枯燥度,也降低了找书的时间成本;「榜单」根据热度划分,激发用户读书兴趣;「免费书」属于互惠促销,快速激活用户。
3)利用神秘的多变性,根据用户在读、读过的书为用户推荐感兴趣的书籍;在右上角还设置了「摇一摇」的功能,用户每点击一次,推荐不同的书籍,帮助用户快速获取”猎物”,开始读书。
4)图书根据上新时间、热度、价值划分为「新书速览」、「排行榜」、「热门推荐」、「重磅好书」,激发用户兴趣,降低找书成本。
5)书单根据时间、功能划分为三类,分别是「每周书单」,「今日书单」,「专题书单」;「每周书单」包含了每周最受关注、每周搜索人数最多、每周评论人数最多图书;「今日书单」筛选了用户创建的热门书单;「专题书单」是针对某一个专题生成的图书合集;书单的目的是引导用户快速阅读,实现激活变现。
② 图书详情页
1)右上角分别为「听书」、「在读人数」、「分享」和「更多」。「听书」为机器阅读,体验虽差,但可满足不同人群的用户习惯;「在读人数」加入了社交属性,用户可查看在读朋友人数、本书阅读用户,可对朋友的阅读、想法进行查看、点赞;「分享」和微信全面链接,用户可把读书状态同步到微信状态,打造完美的外部触发,传播引流;「更多」里面,加入私密阅读,充分尊重用户隐私权。
2)根据用户评分和图书热度,生成了「微信读书推荐值」,激发用户兴趣;其次通过「精彩点评」和「热门划线」,增强信任状,为用户选书做出参考。
⑷通过全面完整的「图书详情页」介绍,持续增强信任状,打消用户顾虑;在底部可查看作者、出版社其他图书,关联了相关书籍,书单,实现阅读的小闭环。
书架
功能价值
「书架」就像收藏夹,用户在阅读的时候,可以把图书加入到书架,方便阅读。「书架」可查看最近更新书籍、在读书籍、已读书籍、未读书籍,支持用户对图书进行分类,还可以创建书单分享。「书架」就是用户对产品的内容投入,可以有效帮助产品实现用户激活,培养用户习惯。
策略推导
① 书架页
1)头部为「搜索」和「添加」,搜索框滚屏播放最新热门书籍;点击「添加」后,支持从电脑、icloud、微信导入书籍。
2)TAB栏包含「默认」、「更新」、「进度」、「购买」和「分类」,满足用户可根据不同的维度查看读书进度。
3)「书单」和「书架」为同一权重,主要是鼓励用户创建书单,为平台创造优质内容;用户可对书籍进行分类、移除、下载等,有效对图书进行管理。
② 书单页
1)用户可创建自己的书单,也可以搜索别人的书单;
2)官方根据用户创建的书单,精心筛选,解决用户找书难的痛点;
3)用户可对书单评论、收藏,给书单创建者赐予社交酬赏,形成闭环,从而创建更优质的内容。
读书
功能价值
「读书」是指用户选定书籍以后开始进入阅读。「读书」加入了腾讯土壤的社交基因,提供了丰富多样的功能,如想法、划线、个性字体、个性背景,在读书的同时可以和书友一起讨论交流。「读书」是培养用户习惯,让用户对产品上瘾,实现用户留存的重要方式。
策略推导
① 读书页
⑴用户进入阅读,「未加入书架」会进行强提醒,避免用户再次寻找;用户可把图书加入「购物车」,除了开通无限会员卡阅读,还支持电子图书、纸质图书购买,快速变现;利用羊群效应,展示朋友在读人数和阅读总用户数;「分享」支持同步到微信个人状态,微信看一看,引流推广;点击「更多」,系统提供了自动阅读、下载到本地阅读等方式,还提供了私密阅读、隐藏想法等充分尊重用户自主权的功能。
⑵用户可根据自己习惯切换到「听书模式」;可快速进入图书关联的「小圈子」,和书友进行交流分享;鼓励用户输入「想法」,和书友交流学习。
⑶点击可查看图书「目录」,快速跳转;提供「笔记」和「划线」功能,帮助用户记录,同时也增加用户投入;可自由拖动读书进度,切换「自动阅读」模式;提供多种读书背景,支持会员使用特殊皮肤,诱发变现;用户可自由调节字体类型,字号,边距,行距,还提供多种字体效果,支持会员使用特殊字体,诱发变现。
⑷当前页面用户发表的想法可快去查看,用户可进行评论、点赞、转推;用户对图书进行划线后,可对划线进行评论、点赞、分享。
② 尾页
图书读完后,关联对应的「小圈子」,形成小闭环,目的是利用社交酬赏,抢夺用户时间,把用户留在微信读书;为用户推荐相似书籍,引导用户继续阅读,开始下一个读书闭环。
③ 结束页
⑴标记完结,自动生成海报,利用社交酬赏,引导用户分享传播。
⑵系统展示精选读书笔记,激发用户对图书撰写高质量读书笔记获取点赞、转推。
小圈子
功能价值
「小圈子」是一个为书友提供交流学习的社区,用户可以加入不同主题的小圈子(官方创建),发表想法,点赞评论分享。「小圈子」可以帮助产品实现用户留存,提高用户活跃度。
策略推导
⑴根据不同的主题,官方创建不同的兴趣圈子,用户可根据兴趣加入,可以发布想法,点赞评论,获取社交酬赏,提升用户活跃度。
⑵用户在发表想法的时候,可以关联官方创建的主题,形成话题,丰富圈子内容,反向吸引用户,打造优质、健康的社区氛围。
朋友的想法
功能价值
「朋友的想法」继承了微信朋友圈的基因,好友在看书所发表的想法会同步更新,朋友之间可进行转推、评论、点赞,获取社交酬赏,有效提高用户活跃度。
策略推导
为了节省用户时间,丰富产品内容,提高使用频率,用户的读书想法默认同步至想法圈;用户发表的想法自动关联书籍,好友可直接进入阅读,降低使用成本。
笔记
功能价值
「笔记」就是用户对产品的数据资料投入,当用户在阅读一本书的时候,会做大量的笔记,随着笔记越来越多,用户对产品的依赖度就越来越大,从而彻底习惯产品,变为忠实用户。
优化建议
从当前版本来看,笔记的功能还略显单薄,还未能充分吸引住用户产生更多的投入。
小结
从读书服务这个板块来观察,微信读书的产品设计理念就是把读书和社交充分结合,利用微信土壤无与伦比的优势,全面连接微信生态,把读书这件略显枯燥乏味的行为,打造成一个可随时交流沟通、以书交友的平台。
3. 营销服务 每日一答
玩法规则
「每日一答」有两种玩法,第一种是用户每天可以进行回答挑战,连续答对 12 道题目后可参与「瓜分无限卡」、「书币」的机会,答错则丧失机会,但可以通过「复活卡道具」或分享给好友请求帮忙获取复活机会;第二种是「问答 PK 比赛」,采用赛季制,持续时间为两个月,用户可邀请好友或随机对战,胜利者可赢取积分,赛季结束后根据积分决胜出总冠军,最终给与玩家不同的奖励。
功能价值
「每日一答」从 APP 直接跳转到微信,不仅操作体验方便,更能结合微信生态引流传播,打造全民学习答题的读书活动。其次通过丰富多变的游戏化方式,保持对用户的新鲜感,形成读书-娱乐的小闭环,抢夺用户时间,提高用户留存率,增强用户满意度、忠诚度,是培养用户对产品形成习惯的重要方式。
策略推导
⑴「积分」的玩法非常丰富,不仅可以「抽奖」,「兑换无限卡」、「道具卡」还可以直接兑换书籍,为用户提供了多变性的猎物酬赏。
⑵进入「每日一答」,用户可选择「瓜分读书天数」(以读书时间为诱)或「书币」(以钱为诱)两种形式的问答;「排行榜」分为好友排行和全网排行,通过排名机制,以社交酬赏为诱,吸引用户积极参与问答,从而提高用户习惯度,成为忠实粉丝。
⑶利用稀缺性,用户每天只有1次机会回答机会,但如果回答错误,可通过使用「续命卡」或邀请朋友解答的两种形式进行复活;用户闯关失败后,用户还可通过「书币购买」、「看广告复活」、「邀请朋友」玩游戏复活,通过这样多变、丰富、游戏化的答题形式,彻底让用户主动分享传播,拉新引流。
⑷「问答PK」的设计非常创新,有别于很多答题竞猜的的单机游戏模式,微信读书采用了体育比赛的赛季制度,让用户像踢比赛一样参与,每个赛季时间为2个月,通过PK,决胜出赛季总冠军,刺激又好玩,让用户彻底上瘾。
免费领书
功能价值
用户可通过分享领取图书,也可以通过阅读 5 分钟并加入书架后领取,这对未付费用户的激活和新用户的引流有很大的帮助。
策略推导
根据用户读书记录、兴趣推荐,激发用户兴趣;用户阅读 5 分钟加入书架也可赠送,有效促进未付费、未形成习惯的用户激活;多变性的设计,每天能领取的图书都不一样,给用户始终保持神秘感。
无限会员日
功能价值
每周一为「无限会员日」(无限会员就是微信读书的 VIP 会员),用户可进行免费抽奖,并为自己最想要的「会员权益」投票。这是新用户激活、老用户留存的好方法。通过「抽奖」、「会员权益」吸引新用户购买无限卡,其次给与老用户充分的自主权,让他们来参与产品设计,极大提高用户的活跃度和忠诚度。
策略推导
充分利用稀缺性,每周 1 次,每次也只能抽奖 1 次;结合游戏化风格设计,模拟真实的老虎机交互效果,生动又有趣;通过调研,调动粉丝的产品设计参与度,满足用户真实需求。
翻一翻
玩法规则
每周一期,每期 9 本赠书,每周二中午更新,普通用户可翻 3 张卡,每张卡可领取一本赠书,无限卡会员可翻 6 张卡。
功能价值
「翻一翻」是促进用户激活的有效方式,通过游戏化风格的设计,每周精选 9 本书籍赠送给用户,吸引用户开始阅读,培养读书习惯。
策略推导
充分利用了互惠原理、稀缺和多变性的酬赏,激发用户兴趣,培养用户习惯。
组队抽取无限卡
玩法规则
每周一期,每周六更新,用户需要邀请 4 个好友才有资格参与;组队成功后,每周六中午 12 点公布中奖信息。
功能价值
「组队抽奖」是一个纯分享邀请的引流传播形式,利用「终身无限卡」为诱饵,激发用户组队抽奖,其次抽奖规则门槛也高,有效避免用户利用规则漏洞重复参与。
策略推导
充分利用互惠原理,人人皆可组团,团长更能额外获得多一次机会,从而充分调动了团长拉新引流的积极性。
组队读书
玩法规则
三人成队,一起读书,以「无限卡」、「抽奖」为诱,21 天为一个积分周期,根据每期的最终积分读书小队还可以晋升等级,兑换更丰富的奖品。
功能价值
「组队读书」是促进用户激活、留存的重要方式,以组队读书的形式,用户不仅可相互监督,还极大提高了活跃度。
策略推导
⑴利用独具创意的设计方式,把一个人读书变成了三个人一起读书,极大提高用户活跃度和忠诚度;
⑵每周发布不同的共读任务,以21天为周期的比赛机制,通过奖品酬赏,让小组成员之间自发相互监督,有效激活未付费用户,彻底培养用户读书习惯。
联名卡
玩法规则
每周精选 6 本好书,每周四更新,用户分享至微信好友或朋友圈集齐 2 个赞可获得 2 天无限卡,每期最多可得 12 天无限卡。
功能价值
「联名卡」是鼓励用户分享传播的有效方式,通过分享集赞的方式,可兑换相应的无限卡天数,进一步激活用户变现。
策略推导
颜值超高的海报设计搭配传神的文案,让用户更主动参与传播,形成人际型触发,老用户带新用户,无限增长。
邀请微信朋友
玩法规则
用户邀请朋友和 30 天未阅读用户阅读可以获得 3 天无限卡,成功邀请多人奖励可累积。
功能价值
「邀请朋友」是鼓励用户拉新和唤醒活跃度极低的用户一个方式,用户行动成本低,酬赏不高,但可以有效激活用户传播。
策略推导
自动生成了用户读书时长和读完书籍,通过这样有趣而又取巧的设计,利用社交酬赏,激发用户主动邀请好友,双向倒逼,一举两得。
阅读时长
功能价值
根据用户每周的阅读时间,为用户生成当周的读书时长统计,用户还可以按月、按年的时间查询历史读书时长。这个功能对用户的留存有极大的帮助,是提高用户满意度和忠诚度的重要方式。
策略推导
⑴右上角点击分享后,可以分享给好友,可以生成当周的读书海报,可以设置为「微信状态」,从而帮助用户获取社交认同,引流推广。
⑵为用户提供全面直观的数据分析,用户可按天、周、月查看读书分析,还可查看「年度读书报告」,像一部留声机,储存着用户的读书回忆;底部展示本周读书的详细记录,包括「读过的书」、「阅读字数」、「留下的笔记」,通过如此直观具象的设计,让用户尖叫。
⑶设置了「阅读奖励」,拆分成不同的阅读小任务,培养用户的读书习惯,从而进一步寻找机会激活变现。
小结
通过对营销服务的全面分析推导,我们发现,微信读书真是沿袭了腾讯系的产品设计套路,把用户彻底研究透了。充分利用了互惠、稀缺、社会认同、多变性酬赏等营销模型,让用户主动分享、主动学习、主动参与,最终培养用户形成使用产品的习惯,成为产品的忠实粉丝。
4. 会员服务 个人主页
功能价值
「个人主页」是用户对好友展示的落地页,它记录了用户在微信读书的全部投入,包含了「读书时长」、「粉丝数」、「获得的赞」、「收获的勋章」、「创建的书单」、「发表的想法」的等。用户不仅可以查看自己的读书历程,还可以生成海报向朋友分享,满足了用户的炫耀心理,从而激发用户更加努力读书,彻底养成习惯。
策略推导
⑴利用炫耀心理,详细展示了用户的「读书时长」、「收到的赞」、「粉丝数」和「勋章」,让用户可第一时间感知,诱发传播分享。
⑵「书架」和「读完的书籍」只对关注的好友开放,充分尊重用户的隐私权,保证了读书的私密性,这也解释了为什么当有新用户关注的时候,需要用户确认。
读书排行榜
功能价值
「读书排行榜是」据用户每周读书时长自动生成的,目的是通过好友之间的排名,利用用户的攀比心理,激发用户读书,提高用户读书时间,培养用户习惯。
策略推导
利用赠券效应,「读书时长」可兑换阅读福利;通过排名,利用攀比心理,激发用户增长阅读时间;右上角可生成读书排行榜海报,传播引流。
勋章
功能价值
微信读书的勋章体系非常丰富,包含了「连续阅读」、「阅读时长」、「阅读天数」、「阅读书籍」、「读完书籍」、「收到的赞」和「想法」发布七大类型,充分激发用户读书兴趣,留存用户,培养用户习惯。
策略推导
⑴「勋章」体系分类非常有创意,根据时间的维度有「连续阅读」、「阅读时长」、「阅读天数」,这是对用户阅读时间的酬赏;根据阅读书籍数量有「阅读书籍」、「读完书籍」,这是对用户阅览群书的酬赏;根据想法和点赞,又有「收到的赞」和「想法发布」,这是对用户的内容投入进行酬赏。通过如此多维度的设计,多变性的酬赏,从而提高用户新鲜度、活跃度和忠诚度。
⑵点击右上角的分享,可分享给好友,还可同步微信状态,生成勋章海报,拉新引流。
消息
功能价值
「消息」是产品的外部触发,当用户收到评论、点赞时候,会第一时间通知用户;其次用户之间可以通过「私信」在线沟通,建立好友关系,增加用户的关系投入,从而培养用户对产品的使用习惯。
关键发现
在「私信」的对话窗口,点击「推送」图标,不仅可以把「书架」的书籍推送给好友,还可以通过「书城」搜索直接发送,这个功能充分结合了用户场景设计,体验非常棒。
小结
通过这个篇章的分析,我们可以感受出微信读书团队对用户读书这件事的理解已经不是传统意义的读书了。他们努力的不只是为用户提供超过上百万的书籍阅读,而是努力在把阅读彻底变成了一种生活习惯,你不仅可以查看每周的读书时长分析,甚至还可以查看两年前的读书记录和报告,这不就是一部记录成长的时光机吗?我的天啊,我感觉自己从忠实粉丝变成脑残粉了。
5. 策略总结 多变的酬赏
微信读书设计团队已经把多变性的设计玩得炉火纯青了,无论是为用户推荐书籍,还是阅读这件本身比较严谨的事情,都能给用户随时保持新鲜感和神秘性。用户的读书行为,已经不是一个纯粹的阅读,而是以书交友、以知识分享为乐。
便捷的阅读
只是一个阅读页,微信读书也设计了无数个细节。不仅可以帮助用户做笔记、划线,还可以切换听书,查看或分享想法,甚至连读书的字体、背景都支持个性化定制,把阅读这件小事做到极致。
高频的触发
通过丰富的营销玩法、分享机制,在微信的生态,触发用户阅读的方法有上百种。你能想象当你看见你的同事微信状态显示正在阅读《增长黑客》的时候,你不思考接下来如何制定一个读书计划吗?
用户高投入
用户的高投入将会彻底提高用户对产品的忠诚度,因为用户在读书过程中会产生很多数据资料,比如划线、笔记、想法,甚至阅读时间、读完记录等,你能让一个在微信读书拥有 18 枚勋章、阅读时长超过 1000 小时的用户变成你的读书用户吗?比登天都难!
写在最后的话 写完整篇分析的时候恰逢第 27 个世界读书日,在《人民日报》等官方媒体都在号召全民读书的时候,作为一个需要每天输入大量知识并反复输出的创业者,我很庆幸,能通过读书 APP 让自己坚持每天阅读。而通过对微信读书的设计策略全面推导,我认为,微信读书真的是一款非常棒的读书类 APP,他们的产品设计策略不仅直击用户痛点,还进行了颠覆性的创新设计,不是给用户一辆跑得更快的马车,而是一辆可以加速到 400 码的法拉利!
附录参考 1. 参考书籍
《增长黑客》-肖恩·埃利斯/摩根·布朗 《影响力》-罗伯特·西奥迪尼 《上瘾》-尼尔·法埃尔 《福格行为模型》-B.J.福格
2. 参考文章
微信读书的终局:社群化-niko 微信读书产品设计中的心理学-原住民 让阅读不再孤独:微信读书产品体验报告-fantasy 艾瑞咨询-2020 年中国数字阅读产品营销洞察报告
从三大模型入手,拆解微信读书的11种营销玩法设计 「微信读书」是一款基于微信关系链的阅读类 APP,以阅读+社交的设计理念,对读书类产品进行了颠覆式设计,旨在为用户打造一个以书交友的平台——让阅读不再孤单。
阅读文章 >
超过5000字的产品笔记,揭秘微信读书是如何让人上瘾的! 二手最近迷上了微信读书,上下班的地铁上,吃饭中,甚至是去个洗手间都要打开微信读书看一会,曾经用来漫无目的刷微博、刷新闻的零碎时间,现在慢慢的都被微信读书占据了。
阅读文章 >
欢迎关注作者微信公众号:「以琳设计ElimDesign」
-
从用户专注维度,我总结了B端产品的三种页面类型
UI交互 2022-04-25前言 在 B 端产品当中,我们经常看到五花八门的设计页面,很多人会质疑自己,这是 B 端产品的页面么? 感觉品牌调性不太符合,B 端产...前言 在 B 端产品当中,我们经常看到五花八门的设计页面,很多人会质疑自己,这是 B 端产品的页面么?
感觉品牌调性不太符合,B 端产品往往传达给用户的都是严肃、刻板,但是在同一个产品当中,同样会存在这样的差异。
在浏览各大设计系统时,我们经常听到 B 端页面的具体归类,通常都会分为:表单页、列表页、详情页、结果页、工作台 等等…,但是除了这些维度进行划分之外,我们还可以从另一个角度去看待 B 端的具体页面。
那今天就是我们要讲的,按照用户的专注维度去划分的三种 B 端产品的页面类型:“过渡页面、沉浸页面、配置页面”
其实在我划分页面类型的本质上,是在对用户的不同姿态所去使用的专注度的思考。因为我们用户最终的使用姿态也就导致了,页面需要进行细致的分类。
过渡页面 为什么工作台总是五颜六色?花花绿绿?
为什么我明明想要的是表格、表单,你却给我看这个花花绿绿的页面?
为什么我不建议打工人的居住位置选择在公司附近?
其实都可以通过过渡页面/场景进行解答。过渡页面,在设计中也就是用户不需要非常专注于某一个具体的页面。而用户在这些页面当中主要起到过渡的作用,也就是用户可以通过这些页面去寻找到他想要的内容。
比如工作台/首页,它本质其实就是分发,也就是说在 C 端产品它分发的是用户流量,而在 B 端产品它分发的是产品功能。因此你会发现 B 端产品的工作台都是以各种各样花里胡哨的功能入口来展开的,即使是相应的图表,折线图,但通常情况下这些数据可以通过图表进入到对应的页面当中。因此它的本质都是提供给用户进入系统功能的入口。而花里胡哨则是通过颜色的区分,能够让他明确的知道我究竟要去到哪,要用什么功能?
比如现在你打开 Sketch/Figma,它的页面当中总是花花绿绿。其实在它看来,这个页面就不是一个严肃,需要去沉浸的页面,而更多是让你找到你想要的信息内容。
其实过渡页面的本质就是如同我们上班工作,每天都需要有一个通勤时间,比如 15 分钟、30 分钟,来去缓冲工作与生活,通过这样的方式来进行切换自己的工作状态,能够让你知道在哪些地方我需要格外专注、在哪些地方我们稍微放松。
沉浸页面 沉浸页面,顾名思义就是让用户更为投入的页面,我们再以 Figma 为例。
你会发现 Figma 在首页当中,它的设计风格是非常跳跃、夸张的,而到了沉浸式场景当中,他的设计风格就是克制、聚焦。
这究竟是为什么?其实这个和我们 B 端产品有着异曲同工的地方。在 B 端产品当中,你会发现,表单、表格,我们在设计这些页面的时候,考虑的不是如何设计其颜色、样式,想的更多就是在用户不被干扰的前提下,能够更加合理、高效展示这些信息。而这些页面在设计的时候其实就是一个沉浸页面,考虑的是从统一的页面布局,相同的交互形式,来对用户进行教育。
这也是为什么你看 Sketch、Photoshop、Figma。这类相同类型的工具型软件,都拥有着相类似的信息布局方式,而我们再去做其他的 B 端系统时也会借鉴他们的布局方式。
配置页面 配置页面,也就是用户对于前台应用的相应配置,在 B 端系统当中就是我们常说的管理后台系统。
在管理后台的设计当中,考虑的就不是如何布局、如何进行颜色突出,我们更多应该去思考如何降低用户的使用成本。常见的处理方式会有几类:可视化配置、帮助体系的建立、专业门槛的降低、产品模版的建立。这里就不展开讲了,里面会涉及到较多的细节。在接触到的任意 B 端系统的管理后台,都需要做到上面几点才能够算是一个合格的 B 端管理后台。
比如在飞书的字段配置页面里面,你会发现就是如此。采取可视化的配置策略能够让你知道管理后台的配置结果,在前端系统的页面里面究竟应该如何展示。
最后聊聊 其实,最后你会发现,我们在文章里聊的其实并不是页面类型,而是你的用户它的使用究竟有哪些场景。虽然大家都在说 B 端,但 B 端产品本身就是一个复杂的结合体,它有着不同的页面、不同的,因此在设计上,我们更要格外小心。
如何做好B端产品的信息设计?我总结了3个原则! 最近在 12306 网站购票时,弹窗中展示了大段的文字信息,我只是匆匆扫了两眼就果断关闭了,实在没有耐心逐字读完。
阅读文章 >
欢迎关注作者的微信公众号: CE青年Youthce
-
从用户专注维度,我总结了B端产品的三种页面类型
UI交互 2022-04-25前言 在 B 端产品当中,我们经常看到五花八门的设计页面,很多人会质疑自己,这是 B 端产品的页面么? 感觉品牌调性不太符合,B 端产...前言 在 B 端产品当中,我们经常看到五花八门的设计页面,很多人会质疑自己,这是 B 端产品的页面么?
感觉品牌调性不太符合,B 端产品往往传达给用户的都是严肃、刻板,但是在同一个产品当中,同样会存在这样的差异。
在浏览各大设计系统时,我们经常听到 B 端页面的具体归类,通常都会分为:表单页、列表页、详情页、结果页、工作台 等等…,但是除了这些维度进行划分之外,我们还可以从另一个角度去看待 B 端的具体页面。
那今天就是我们要讲的,按照用户的专注维度去划分的三种 B 端产品的页面类型:“过渡页面、沉浸页面、配置页面”
其实在我划分页面类型的本质上,是在对用户的不同姿态所去使用的专注度的思考。因为我们用户最终的使用姿态也就导致了,页面需要进行细致的分类。
过渡页面 为什么工作台总是五颜六色?花花绿绿?
为什么我明明想要的是表格、表单,你却给我看这个花花绿绿的页面?
为什么我不建议打工人的居住位置选择在公司附近?
其实都可以通过过渡页面/场景进行解答。过渡页面,在设计中也就是用户不需要非常专注于某一个具体的页面。而用户在这些页面当中主要起到过渡的作用,也就是用户可以通过这些页面去寻找到他想要的内容。
比如工作台/首页,它本质其实就是分发,也就是说在 C 端产品它分发的是用户流量,而在 B 端产品它分发的是产品功能。因此你会发现 B 端产品的工作台都是以各种各样花里胡哨的功能入口来展开的,即使是相应的图表,折线图,但通常情况下这些数据可以通过图表进入到对应的页面当中。因此它的本质都是提供给用户进入系统功能的入口。而花里胡哨则是通过颜色的区分,能够让他明确的知道我究竟要去到哪,要用什么功能?
比如现在你打开 Sketch/Figma,它的页面当中总是花花绿绿。其实在它看来,这个页面就不是一个严肃,需要去沉浸的页面,而更多是让你找到你想要的信息内容。
其实过渡页面的本质就是如同我们上班工作,每天都需要有一个通勤时间,比如 15 分钟、30 分钟,来去缓冲工作与生活,通过这样的方式来进行切换自己的工作状态,能够让你知道在哪些地方我需要格外专注、在哪些地方我们稍微放松。
沉浸页面 沉浸页面,顾名思义就是让用户更为投入的页面,我们再以 Figma 为例。
你会发现 Figma 在首页当中,它的设计风格是非常跳跃、夸张的,而到了沉浸式场景当中,他的设计风格就是克制、聚焦。
这究竟是为什么?其实这个和我们 B 端产品有着异曲同工的地方。在 B 端产品当中,你会发现,表单、表格,我们在设计这些页面的时候,考虑的不是如何设计其颜色、样式,想的更多就是在用户不被干扰的前提下,能够更加合理、高效展示这些信息。而这些页面在设计的时候其实就是一个沉浸页面,考虑的是从统一的页面布局,相同的交互形式,来对用户进行教育。
这也是为什么你看 Sketch、Photoshop、Figma。这类相同类型的工具型软件,都拥有着相类似的信息布局方式,而我们再去做其他的 B 端系统时也会借鉴他们的布局方式。
配置页面 配置页面,也就是用户对于前台应用的相应配置,在 B 端系统当中就是我们常说的管理后台系统。
在管理后台的设计当中,考虑的就不是如何布局、如何进行颜色突出,我们更多应该去思考如何降低用户的使用成本。常见的处理方式会有几类:可视化配置、帮助体系的建立、专业门槛的降低、产品模版的建立。这里就不展开讲了,里面会涉及到较多的细节。在接触到的任意 B 端系统的管理后台,都需要做到上面几点才能够算是一个合格的 B 端管理后台。
比如在飞书的字段配置页面里面,你会发现就是如此。采取可视化的配置策略能够让你知道管理后台的配置结果,在前端系统的页面里面究竟应该如何展示。
最后聊聊 其实,最后你会发现,我们在文章里聊的其实并不是页面类型,而是你的用户它的使用究竟有哪些场景。虽然大家都在说 B 端,但 B 端产品本身就是一个复杂的结合体,它有着不同的页面、不同的,因此在设计上,我们更要格外小心。
如何做好B端产品的信息设计?我总结了3个原则! 最近在 12306 网站购票时,弹窗中展示了大段的文字信息,我只是匆匆扫了两眼就果断关闭了,实在没有耐心逐字读完。
阅读文章 >
欢迎关注作者的微信公众号: CE青年Youthce
-
有案例有方法!帮你完全掌握热门的极光风设计趋势
UI交互 2022-04-25作为设计师都会时刻关注设计趋势,以 UI 设计来说每年都会出现很多相关的趋势总结,基本是结合预测和实际相结合的。趋势可以让我们把控设计的方向,带给用户更好...作为设计师都会时刻关注 设计趋势 ,以 UI 设计来说每年都会出现很多相关的趋势总结,基本是结合预测和实际相结合的。趋势可以让我们把控设计的方向,带给用户更好的感官体验。
最近黑马哥结合落地产品所呈现出来的设计趋势,进行了这方面的探索,今天以其中之一的趋势-极光风和大家先聊一聊。
极光风趋势的来源 极光(Aurora),是一种绚丽多彩的等离子体(发光)现象,在夜间出现灿烂美丽的光辉。在南极被称为南极光,在北极被称为北极光,视为自然界中最漂亮的奇观之一。(来源于百度百科)
这样的自然奇观被摄影师捕捉到静态的影像中,设计师再结合这样的影像作品,视觉化之后出现在了一些设计作品中。在 2021 年被广泛运用,形成一种流行的视觉风格。在众多的互联网产品设计中,也经常运用这种类似极光的视觉影像风格,称之为 Aurora UI。
在产品设计底层需求获得满足之后,感光体验的提升被重视,视觉感的强化对 UI 设计师来说至关重要。基于不改变本身的结构层,在背景层和装饰性元素上面发挥,使得 Aurora UI 得到了发挥的空间。
富有创意的 极光风 在背景层和装饰性元素上面发挥得淋漓尽致,助推了其成为 UI 设计趋势 的关键,下面就让我们一起来看看落地产品中的 Aurora UI。
UI 场景中的极光风设计 由于在众多落地产品中被广泛运用,形成了近些年影响 UI 设计趋势的风格。极光风和弥散光在表现形式上类似,也有设计师将该风格归类为弥散光,下面就看一下具体的运用场景。
弥散光设计!网易阿里大厂都在用的刷屏级新设计风 这阵子不是有一种设计流行风悄悄刮了起来嘛!
阅读文章 >
1. 强化导航栏设计的视觉感
如果想要强化顶部导航栏的视觉感,通常是利用品牌色作为背景颜色,这样也会显得顶部比重较大。通过白色或者浅灰色作为背景属于比较弱化的处理方式,而极光风的处理形式处于轻重之间的理想状态。不仅可以丰富视觉表现力,也能使得整体风格更加年轻化。
2. 强化个人中心顶部视觉区域
随着互联网用户年轻化的趋势,在配色上面逐步趋近于年轻化,众多产品在个人中心界面的设计上面亦是如此。利用极光风效果呈现出的设计比较符合年轻化的趋势,可以是同色系的饱和度变化,也可以是不同色相的相互融合。利用低饱和度高明度的配色原则,使得整体的视觉感更加轻量化,视觉效果清新自然且通透力更强。
也有基于品牌色结合极光风进行融合,相对单色来说效果更加丰富自然,使得背景的变化更加多样。
3. 丰富背景设计的视觉感
除了在顶部区域进行运用以外,也有一些产品会在背景层面进行强化,相较于白色或者浅灰色的背景来说色彩感更丰富。运用到整个界面背景层相对比较少,在局部背景层上的运用比较多些,可以强化局部模块的视觉感。
4. 点缀弹窗设计局部
极光风的设计表现也会出现在一些局部功能的细节处,比如运用到弹窗的色彩处理中,作为背景局部或者插画部分等的衬托。带来的视觉感更加亲和自然,也不会过度干扰其他元素的呈现。
5. 强化卡片式设计局部
卡片式设计也是近些年运用比较多的设计趋势之一,基本是以白色卡片居多,具有整合信息的好处。在卡片的边缘位置强化色彩,可以使得卡片色彩更加丰富,也有一些电商产品是起到与商品形成色彩呼应的作用。
6. 突出搜索设计的差异化
搜索框的设计在大部分的认知里面都是白色或者浅灰色,也有一些是带有边框的形式,利用低饱和度高明度的配色原则来进行设计,带来的效果更加年轻化。也是一种差异化设计的尝试,打破常规的设计认知。也可以举一反三,在一些按钮或者标签设计中运用。
7. 分类标签的装饰设计
这是一个装饰性的设计尝试,在突出模块分类的当前状态时,通常都会通过装饰元素来进一步强化。可以通过字体粗细、颜色深浅、字体大小和装饰元素来强化,装饰元素除了线段和一些图形元素以外,极光风的背景元素也是一种不错的表现手法。
8. 图标设计中的运用
运用到图标设计中通常是出现在质感类图标,辅助强化图标的色彩感和层次感。有时候无法通过常规的渐变形式达到要求,就可以尝试运用极光风的处理技巧,将颜色通过模糊和剪切蒙版的形式融入到图标中,可以使得图标色彩丰富和强化光影变化。
9. 深色卡片色彩强化
以上案例属于在浅色或者白色的环境中运用,在深色主题中依然会用到极光风进行设计强化。在界面背景和卡片背景中运用,效果也是非常不错的,可以给深色的卡片一些色彩感和丰富度。
10. 作品包装中的背景强化
除了在 UI 设计场景中运用以外,最近发现在设计师作品包装中的运用也是非常普遍,用于背景层的渲染带来的视觉体验度也是非常不错的。在作品包装环节中作为背景运用和局部装饰,也有在封面设计中重点运用,使得作品集紧贴设计趋势,提高作品的打开率。
11. 其他场景中的应用普及
在 UI 场景还有很多运用场景,这里仅为抛砖引玉,无论是作为背景强化还是元素装饰,都能带给用户更加年轻化的感官体验。
除了在 UI 场景中呈现以外,极光风的设计也会出现在更多其它场景中。在 Banner 设计、海报设计、专题页设计等视觉设计层面也是运用广泛,是一个影响范围比较广的设计趋势之一。
实现极光风设计的方法 通过一些线上的案例欣赏和分析,相信大家对于极光风在 UI 场景中运用都有一定的了解,在项目设计中也能轻松尝试。这一类风格从技法实现的角度来说并不难,关键因素在于控制好配色原理,下面就为大家总结几种实现的方法。
方法 01:利用不透明度渐变融合
不透明度渐变在设计中的运用比较普遍,利用的是不透明度从 100%-0% 之间形成渐变,让色彩逐渐消失或者淡化。
画一个圆形,选择径向渐变,渐变两端的颜色选择同一个色相。然后设置中间颜色不透明度为 100%,另一个颜色不透明度设置为 0%,这里颜色适合选择低饱和度的范围。同样的方法反复绘制几个不同颜色的圆形进行组合,即可完成极光风背景设计。
方法 02:利用模糊度变化融合
这个方法是结合了形状和模糊设置(高斯模糊等),绘制几个大小不等的圆形进行排版组合,然后选择所有圆形一起进行模糊设置。形状的绘制上面最好是有大小差异,排版错落有致,这样形成的效果比较富有变化。
在颜色的选择上面需要根据背景的强化程度选择,低饱和度的颜色融合性更高,适合作为弱化性质的背景使用。
方法 03:利用背景模糊融合
背景模糊在 Sketch、Figma 等设计软件中有该功能,是一个影响设计趋势较为常用的功能,特别是在实现玻璃质感和一些质感图标上面非常实用。
在背景层绘制图形,颜色和形状均可自由发挥,然后再绘制一个形状作为调节层,调节层是用于控制模糊效果的。在调节层的形状上面设置一个带有透明度的颜色(必须要带有透明度),然后再设置背景模糊,背景模糊数值的大小决定模糊的程度,不透明度的大小决定整体效果的亮度。
方法 04:利用图片模糊融合
以上的方法都需要进行配色处理,如果色感方面比较薄弱的设计师,也可以挑选一些不错的图片来实现极光风效果。
挑选一张色彩符合要求的图片,然后在 Photoshop 等设计软件中执行高斯模糊,半径值的多少决定了模糊之后的自然度。我们在选择图片的过程中除了整张图片进行操作以外,也可以截取其中的一部分,也许会带来意想不到的效果。
除了这几个方法以外还有更多不一样的实现方法,大家可以根据自己的探索选择最适合自己的方法。根据使用软件的差别选择最简单的形式,根据想要实现的效果选择最灵活的方法,这样才能便于后期的反复调整。
极光风案例实战
小结 研究落地产品的设计细节和视觉趋势,将有助于提高我们对于当前有效设计趋势的把控,而不仅仅只是停留在概念化的预测阶段,而是行之有效的真实案例。
极光风是近些年运用在落地产品中的 UI 设计趋势之一,通过大量案例验证之后的有效方法,希望大家能够掌握并灵活运用到项目设计中。落地产品的 UI 设计趋势还有很多,本次分享的仅为抛砖引玉,后续将和大家探讨更多的有效设计趋势,辅助提高我们的设计能力。
2021 年,UI设计师最值得跟进的新趋势「极光风」 编者按:如果你有关注设计趋势,那么你一定会知道新拟物化和玻璃拟物化这两种近年被提出的设计风格,而最初提出它们的,就是著名的设计师 Michal Malewicz,他如今俨然已经是设计圈内的趋势观察家。
阅读文章 >
欢迎关注作者的微信公众号:「黑马家族」
-
效率翻倍!24 个腾讯高手的私藏设计工具
UI交互 2022-04-25工欲善其事,必先利其器。好的工具可以有效的激发设计师的灵感、提升设计师的效率。我们准备做一个设计效率工具系列,整个系列将好的设计工具贯穿到完整的设计流程中...工欲善其事,必先利其器。好的工具可以有效的激发设计师的灵感、提升 设计师 的效率。我们准备做一个设计 效率工具 系列,整个系列将好的设计工具贯穿到完整的设计流程中,并结合日常我们使用的情况向大家做推荐。通常的设计流程分为日常的积累、研究分析、设计创作、测试评估、对外宣传这几个环节。此篇为综述篇,之后的篇章会针对不同环节进行深入的陈述。
日常积累 设计师日常除了应对当下的需求,每天可以拿出一定时间保持学习的习惯。不仅可以让我们紧跟最近的设计趋势、设计潮流、设计方法,也可以让我们潜移默化中得到提升。
Panda| 全而美的设计订阅平台
Panda 帮助设计师不错过每天的设计灵感和资讯,包括新的设计方法理念、流行潮流、也有一些新产品推出。我们可以把 Panda 替换 Chrome 主页,每次打开浏览器页面都可以随时看到最新的设计资讯。一些英文的订阅也可以用 chrome 浏览器的翻译功能可以粗略查看。
地址: https://app.usepanda.com/#
Topys| 创意内容平台
全球顶尖创意内容平台,作为中国成立最早、最受欢迎的创意垂直网站,以 “Open Your Mind” 为宗旨,始终专注在全球创意、艺术、灵感、人文领域寻找最有质感的声音。
地址: https://www.topys.cn
Voicer|分享生活和设计的美学
我们总在生活中与「一瞬间的感动」相遇。Voicer 的理念即是发现这「感动」, 将它传递给更多热爱生活的人们。内容包括创意内容品牌、在线杂志等。致力于分享生活和设计之美。
地址: https://www.voicer.me
Design better|优质设计读物网站
涵盖设计商业思维、产品设计原则、设计系统等关于推动设计团队前进的实践读物,同时提供 PDF 和有声格式。
地址: https://www.designbetter.co
研究分析 设计师在调研过程会研究用户、记录用户的行为和需求,会使用一些高效的记录工具。同时繁多的调研的信息需要汇总整理,协作整理,这里会推荐一些记录和整理的工具给大家。
Noted|录音笔记好工具
Noted 是一款将录音和笔记相机相结合的软件。我们做访谈用户或做会议纪要的时候,经常错过记录的内容,如果通过一些软件录音的话,后期回听需要比较多时间成本。Noted 可以在记录笔记的同时记录输入文字的时间点所对应的录音,输入的每个字的时间点都会对应到。当内容没记录下来时可以随时跳到对应时间的录音进行回听,方便在漫长的录音文件中快速检索。
地址: https://www.notedapp.io/
MarginNote|文献收集箱
重塑学习方式的阅读笔记工具,更加高效阅读书籍和学习,可以在阅读时摘录笔记,制作学习卡,提取关键词,根据笔记生成思维导图,梳理知识框架。非常适合阅读专业书籍,阅读论文以及复习。
地址: https://www.marginnote.com/chinese/home
GoodNotes|手写笔记
一款功能强大的手写笔记软件,拥有多种笔记封面和纸张模板可以选择,支持自定义模板,可以简单处理图片,可以导入 pdf、ppt 等文稿并做标记,也适合做电子手账。
地址: https://www.goodnotes.com/zh-cn
腾讯文档|在线协作
调研阶段方便多人一起搜集资料和汇总,多人同时在线编辑,内容实时同步。随时随地高效协作,轻松创作。
地址: https://docs.qq.com/home
Xmind|思维导图
功能强大的思维导图软件,极简设计,流畅体验,多种结构图风格选择,方便资料的汇集和思路的整理。
地址: https://www.xmind.cn
设计创作 当设计目标确定时,接下来进行具体的创意设计。设计师除了通过脑暴进行发散方案以外,一些高效的设计工具可以让我们事半功倍。
1. 灵感搜集 Collect UI| 界面灵感
UI 设计灵感库,基于 dribbble 平台精心挑选优质内容,提高效率便捷,为设计师提供专项更好的灵感。同时支持邮件订阅推送。(需要梯子)
地址: https://collectui.com
Adobe Color| 配色灵感
Adobe color 不仅从各个维度解决了我们的配色需求,同时也提供找图需求。其中包含 9 种智能调色模式可以选择。拾取主题色、拾取图片中的渐变色、协助工具可以合理帮助检查不同颜色的对比、探索 behance 趋势。
地址: https://color.adobe.com/zh/create
Useanimations| 图标动效灵感
图标动态效果库,当绘制的图标需要一些巧妙的微动态效果时可以参考。
地址: https://useanimations.com/index.html
2. 灵感搜集 FigmaEX| 插件可视化
当插件特别多时候,FigmaEX 极大的改善了 Figma 中使用插件的体验,将插件可视化。可以进行展开,同时显示插件的名称与图标。可以通过拖拽调整插件的顺序,调节高度。
地址: https://moonvy.com/figmaEX/
Autoflow| 流程图插件
输出交互设计稿的时候,方便快捷的在不同画板之间连线,提升输出效率。
地址: https://www.figma.com/community/plugin/733902567457592893/Autoflow
Skewdat| 倾斜插件
这是一个非常简单实用的 Figma 插件,它可以帮你将任何形状元素倾斜过来。
地址: https://www.figma.com/c/plugin/741472919529947576/SkewDat?ref=prototyprio
Undraw| 插画素材
最棒最全的插画库,支持快速搜索,一键调整颜色。
地址: https://undraw.co/illustrations
Magic Eraser|轻松移除杂物
一款免费的在线服务,它通过 AI 自动去除图片中不需要的部分,只需要上传图片,等待几秒钟即可。用鼠标把不要的部分划掉,松开鼠标就会闪几下,被划掉的部分就消失了,比如去水印之类的小东西,如果用 PS 的图章,估计要十来分钟,而用 Magic Eraser 就几秒钟,简单易用,推荐使用。
地址: https://www.magiceraser.io
3秒无痕修图!在线黑科技修图神器 Magic Eraser 大家好,我是和你们聊设计的花生~ 抠图和修图是每个设计师都必须花时间处理的日常工作,它们虽然难度不高,但需要处理的频次不低,所以很多时候我们都会借助智能工具来处理。
阅读文章 >
3. 设计验证 Checklist Design| 设计清单
设计输出后可以通过这个清单去做最后的检查。网站列举了一些通用场景(页面、元素、流程、主题、品牌)下的基本设计要素。可以检查你的设计在这些场景下是否符合规范。样式、颜色、命名、易用性等是否合适。
地址: https://www.checklist.design/?ref=prototyprio
测试评估 Hawkeye| 眼动追踪工具
一般的眼动跟踪设备比较昂贵,使用繁琐。这个名为鹰眼的眼动追踪 APP,可以通过手机前置摄像头捕捉用户在使用产品时的视觉动向。
地址: https://www.usehawkeye.com/?ref=prototyprio
2. 评估还原 CoDesign| 腾讯自研设计协作平台
覆盖产品经理、设计师、工程师协作需求。设计交付更轻松,有效管理和使用设计资产。
地址: https://codesign.qq.com/
Pixel Eye| 高效视觉还原
在项目上线前设计师都会对最终的产品实现效果进行走查,以保证设计还原的准确性,体验的流畅性。这是一款视觉还原工具,帮助前端工程师在页面重构阶段就能快速发现开发稿与视觉稿的差异,实时对比、实时修改,减少工程师与设计师的沟通成本,提升整体开发效率。
Pixel Eye 暂未对外开放,敬请期待。
对外宣传 1. 效果展示 Mockup World
样机 的类型全面而且免费,综合质量很高。
地址: https://www.mockupworld.co
ls.graphics
素材非常优质精美,有免费和付费的资源。
地址: https://www.ls.graphics/#UI
2. 在线作品集制作 Portfoliobox
针对设计师或者创意人员的作品展示工具,可以直接在网页浏览器中搭建属于你的作品展示平台。
地址: https://www.portfoliobox.net/cn/
结语 此综述篇大家有了比较整体的了解,在设计流程中每个环节介绍了一些比较好用的工具,后续的设计工具系列文章会针对某一环节进行更深入的探索。
这 4 款工具,让设计师工作效率提升 200%! 大家好,我是和你们聊设计的花生~ 作为一个每天都在全网疯狂搜集各种设计神器并推荐给大家的人,我经常会遇到这样一些工具——作为设计师的我们不会经常用到,但是要急用的时候又不太好找。
阅读文章 >
这 5 款工具,让设计师工作效率提升 200%!(二) 大家好我是花生~之前向大家推荐了可以有效提高设计师办公效率的神器,收到很多小伙伴反馈说非常有帮助。
阅读文章 >
欢迎关注作者微信公众号:「腾讯ISUX」
-
效率翻倍!24 个腾讯高手的私藏设计工具
UI交互 2022-04-25工欲善其事,必先利其器。好的工具可以有效的激发设计师的灵感、提升设计师的效率。我们准备做一个设计效率工具系列,整个系列将好的设计工具贯穿到完整的设计流程中...工欲善其事,必先利其器。好的工具可以有效的激发设计师的灵感、提升 设计师 的效率。我们准备做一个设计 效率工具 系列,整个系列将好的设计工具贯穿到完整的设计流程中,并结合日常我们使用的情况向大家做推荐。通常的设计流程分为日常的积累、研究分析、设计创作、测试评估、对外宣传这几个环节。此篇为综述篇,之后的篇章会针对不同环节进行深入的陈述。
日常积累 设计师日常除了应对当下的需求,每天可以拿出一定时间保持学习的习惯。不仅可以让我们紧跟最近的设计趋势、设计潮流、设计方法,也可以让我们潜移默化中得到提升。
Panda| 全而美的设计订阅平台
Panda 帮助设计师不错过每天的设计灵感和资讯,包括新的设计方法理念、流行潮流、也有一些新产品推出。我们可以把 Panda 替换 Chrome 主页,每次打开浏览器页面都可以随时看到最新的设计资讯。一些英文的订阅也可以用 chrome 浏览器的翻译功能可以粗略查看。
地址: https://app.usepanda.com/#
Topys| 创意内容平台
全球顶尖创意内容平台,作为中国成立最早、最受欢迎的创意垂直网站,以 “Open Your Mind” 为宗旨,始终专注在全球创意、艺术、灵感、人文领域寻找最有质感的声音。
地址: https://www.topys.cn
Voicer|分享生活和设计的美学
我们总在生活中与「一瞬间的感动」相遇。Voicer 的理念即是发现这「感动」, 将它传递给更多热爱生活的人们。内容包括创意内容品牌、在线杂志等。致力于分享生活和设计之美。
地址: https://www.voicer.me
Design better|优质设计读物网站
涵盖设计商业思维、产品设计原则、设计系统等关于推动设计团队前进的实践读物,同时提供 PDF 和有声格式。
地址: https://www.designbetter.co
研究分析 设计师在调研过程会研究用户、记录用户的行为和需求,会使用一些高效的记录工具。同时繁多的调研的信息需要汇总整理,协作整理,这里会推荐一些记录和整理的工具给大家。
Noted|录音笔记好工具
Noted 是一款将录音和笔记相机相结合的软件。我们做访谈用户或做会议纪要的时候,经常错过记录的内容,如果通过一些软件录音的话,后期回听需要比较多时间成本。Noted 可以在记录笔记的同时记录输入文字的时间点所对应的录音,输入的每个字的时间点都会对应到。当内容没记录下来时可以随时跳到对应时间的录音进行回听,方便在漫长的录音文件中快速检索。
地址: https://www.notedapp.io/
MarginNote|文献收集箱
重塑学习方式的阅读笔记工具,更加高效阅读书籍和学习,可以在阅读时摘录笔记,制作学习卡,提取关键词,根据笔记生成思维导图,梳理知识框架。非常适合阅读专业书籍,阅读论文以及复习。
地址: https://www.marginnote.com/chinese/home
GoodNotes|手写笔记
一款功能强大的手写笔记软件,拥有多种笔记封面和纸张模板可以选择,支持自定义模板,可以简单处理图片,可以导入 pdf、ppt 等文稿并做标记,也适合做电子手账。
地址: https://www.goodnotes.com/zh-cn
腾讯文档|在线协作
调研阶段方便多人一起搜集资料和汇总,多人同时在线编辑,内容实时同步。随时随地高效协作,轻松创作。
地址: https://docs.qq.com/home
Xmind|思维导图
功能强大的思维导图软件,极简设计,流畅体验,多种结构图风格选择,方便资料的汇集和思路的整理。
地址: https://www.xmind.cn
设计创作 当设计目标确定时,接下来进行具体的创意设计。设计师除了通过脑暴进行发散方案以外,一些高效的设计工具可以让我们事半功倍。
1. 灵感搜集 Collect UI| 界面灵感
UI 设计灵感库,基于 dribbble 平台精心挑选优质内容,提高效率便捷,为设计师提供专项更好的灵感。同时支持邮件订阅推送。(需要梯子)
地址: https://collectui.com
Adobe Color| 配色灵感
Adobe color 不仅从各个维度解决了我们的配色需求,同时也提供找图需求。其中包含 9 种智能调色模式可以选择。拾取主题色、拾取图片中的渐变色、协助工具可以合理帮助检查不同颜色的对比、探索 behance 趋势。
地址: https://color.adobe.com/zh/create
Useanimations| 图标动效灵感
图标动态效果库,当绘制的图标需要一些巧妙的微动态效果时可以参考。
地址: https://useanimations.com/index.html
2. 灵感搜集 FigmaEX| 插件可视化
当插件特别多时候,FigmaEX 极大的改善了 Figma 中使用插件的体验,将插件可视化。可以进行展开,同时显示插件的名称与图标。可以通过拖拽调整插件的顺序,调节高度。
地址: https://moonvy.com/figmaEX/
Autoflow| 流程图插件
输出交互设计稿的时候,方便快捷的在不同画板之间连线,提升输出效率。
地址: https://www.figma.com/community/plugin/733902567457592893/Autoflow
Skewdat| 倾斜插件
这是一个非常简单实用的 Figma 插件,它可以帮你将任何形状元素倾斜过来。
地址: https://www.figma.com/c/plugin/741472919529947576/SkewDat?ref=prototyprio
Undraw| 插画素材
最棒最全的插画库,支持快速搜索,一键调整颜色。
地址: https://undraw.co/illustrations
Magic Eraser|轻松移除杂物
一款免费的在线服务,它通过 AI 自动去除图片中不需要的部分,只需要上传图片,等待几秒钟即可。用鼠标把不要的部分划掉,松开鼠标就会闪几下,被划掉的部分就消失了,比如去水印之类的小东西,如果用 PS 的图章,估计要十来分钟,而用 Magic Eraser 就几秒钟,简单易用,推荐使用。
地址: https://www.magiceraser.io
3秒无痕修图!在线黑科技修图神器 Magic Eraser 大家好,我是和你们聊设计的花生~ 抠图和修图是每个设计师都必须花时间处理的日常工作,它们虽然难度不高,但需要处理的频次不低,所以很多时候我们都会借助智能工具来处理。
阅读文章 >
3. 设计验证 Checklist Design| 设计清单
设计输出后可以通过这个清单去做最后的检查。网站列举了一些通用场景(页面、元素、流程、主题、品牌)下的基本设计要素。可以检查你的设计在这些场景下是否符合规范。样式、颜色、命名、易用性等是否合适。
地址: https://www.checklist.design/?ref=prototyprio
测试评估 Hawkeye| 眼动追踪工具
一般的眼动跟踪设备比较昂贵,使用繁琐。这个名为鹰眼的眼动追踪 APP,可以通过手机前置摄像头捕捉用户在使用产品时的视觉动向。
地址: https://www.usehawkeye.com/?ref=prototyprio
2. 评估还原 CoDesign| 腾讯自研设计协作平台
覆盖产品经理、设计师、工程师协作需求。设计交付更轻松,有效管理和使用设计资产。
地址: https://codesign.qq.com/
Pixel Eye| 高效视觉还原
在项目上线前设计师都会对最终的产品实现效果进行走查,以保证设计还原的准确性,体验的流畅性。这是一款视觉还原工具,帮助前端工程师在页面重构阶段就能快速发现开发稿与视觉稿的差异,实时对比、实时修改,减少工程师与设计师的沟通成本,提升整体开发效率。
Pixel Eye 暂未对外开放,敬请期待。
对外宣传 1. 效果展示 Mockup World
样机 的类型全面而且免费,综合质量很高。
地址: https://www.mockupworld.co
ls.graphics
素材非常优质精美,有免费和付费的资源。
地址: https://www.ls.graphics/#UI
2. 在线作品集制作 Portfoliobox
针对设计师或者创意人员的作品展示工具,可以直接在网页浏览器中搭建属于你的作品展示平台。
地址: https://www.portfoliobox.net/cn/
结语 此综述篇大家有了比较整体的了解,在设计流程中每个环节介绍了一些比较好用的工具,后续的设计工具系列文章会针对某一环节进行更深入的探索。
这 4 款工具,让设计师工作效率提升 200%! 大家好,我是和你们聊设计的花生~ 作为一个每天都在全网疯狂搜集各种设计神器并推荐给大家的人,我经常会遇到这样一些工具——作为设计师的我们不会经常用到,但是要急用的时候又不太好找。
阅读文章 >
这 5 款工具,让设计师工作效率提升 200%!(二) 大家好我是花生~之前向大家推荐了可以有效提高设计师办公效率的神器,收到很多小伙伴反馈说非常有帮助。
阅读文章 >
欢迎关注作者微信公众号:「腾讯ISUX」
-
有案例有方法!帮你完全掌握热门的极光风设计趋势
UI交互 2022-04-25作为设计师都会时刻关注设计趋势,以 UI 设计来说每年都会出现很多相关的趋势总结,基本是结合预测和实际相结合的。趋势可以让我们把控设计的方向,带给用户更好...作为设计师都会时刻关注 设计趋势 ,以 UI 设计来说每年都会出现很多相关的趋势总结,基本是结合预测和实际相结合的。趋势可以让我们把控设计的方向,带给用户更好的感官体验。
最近黑马哥结合落地产品所呈现出来的设计趋势,进行了这方面的探索,今天以其中之一的趋势-极光风和大家先聊一聊。
极光风趋势的来源 极光(Aurora),是一种绚丽多彩的等离子体(发光)现象,在夜间出现灿烂美丽的光辉。在南极被称为南极光,在北极被称为北极光,视为自然界中最漂亮的奇观之一。(来源于百度百科)
这样的自然奇观被摄影师捕捉到静态的影像中,设计师再结合这样的影像作品,视觉化之后出现在了一些设计作品中。在 2021 年被广泛运用,形成一种流行的视觉风格。在众多的互联网产品设计中,也经常运用这种类似极光的视觉影像风格,称之为 Aurora UI。
在产品设计底层需求获得满足之后,感光体验的提升被重视,视觉感的强化对 UI 设计师来说至关重要。基于不改变本身的结构层,在背景层和装饰性元素上面发挥,使得 Aurora UI 得到了发挥的空间。
富有创意的 极光风 在背景层和装饰性元素上面发挥得淋漓尽致,助推了其成为 UI 设计趋势 的关键,下面就让我们一起来看看落地产品中的 Aurora UI。
UI 场景中的极光风设计 由于在众多落地产品中被广泛运用,形成了近些年影响 UI 设计趋势的风格。极光风和弥散光在表现形式上类似,也有设计师将该风格归类为弥散光,下面就看一下具体的运用场景。
弥散光设计!网易阿里大厂都在用的刷屏级新设计风 这阵子不是有一种设计流行风悄悄刮了起来嘛!
阅读文章 >
1. 强化导航栏设计的视觉感
如果想要强化顶部导航栏的视觉感,通常是利用品牌色作为背景颜色,这样也会显得顶部比重较大。通过白色或者浅灰色作为背景属于比较弱化的处理方式,而极光风的处理形式处于轻重之间的理想状态。不仅可以丰富视觉表现力,也能使得整体风格更加年轻化。
2. 强化个人中心顶部视觉区域
随着互联网用户年轻化的趋势,在配色上面逐步趋近于年轻化,众多产品在个人中心界面的设计上面亦是如此。利用极光风效果呈现出的设计比较符合年轻化的趋势,可以是同色系的饱和度变化,也可以是不同色相的相互融合。利用低饱和度高明度的配色原则,使得整体的视觉感更加轻量化,视觉效果清新自然且通透力更强。
也有基于品牌色结合极光风进行融合,相对单色来说效果更加丰富自然,使得背景的变化更加多样。
3. 丰富背景设计的视觉感
除了在顶部区域进行运用以外,也有一些产品会在背景层面进行强化,相较于白色或者浅灰色的背景来说色彩感更丰富。运用到整个界面背景层相对比较少,在局部背景层上的运用比较多些,可以强化局部模块的视觉感。
4. 点缀弹窗设计局部
极光风的设计表现也会出现在一些局部功能的细节处,比如运用到弹窗的色彩处理中,作为背景局部或者插画部分等的衬托。带来的视觉感更加亲和自然,也不会过度干扰其他元素的呈现。
5. 强化卡片式设计局部
卡片式设计也是近些年运用比较多的设计趋势之一,基本是以白色卡片居多,具有整合信息的好处。在卡片的边缘位置强化色彩,可以使得卡片色彩更加丰富,也有一些电商产品是起到与商品形成色彩呼应的作用。
6. 突出搜索设计的差异化
搜索框的设计在大部分的认知里面都是白色或者浅灰色,也有一些是带有边框的形式,利用低饱和度高明度的配色原则来进行设计,带来的效果更加年轻化。也是一种差异化设计的尝试,打破常规的设计认知。也可以举一反三,在一些按钮或者标签设计中运用。
7. 分类标签的装饰设计
这是一个装饰性的设计尝试,在突出模块分类的当前状态时,通常都会通过装饰元素来进一步强化。可以通过字体粗细、颜色深浅、字体大小和装饰元素来强化,装饰元素除了线段和一些图形元素以外,极光风的背景元素也是一种不错的表现手法。
8. 图标设计中的运用
运用到图标设计中通常是出现在质感类图标,辅助强化图标的色彩感和层次感。有时候无法通过常规的渐变形式达到要求,就可以尝试运用极光风的处理技巧,将颜色通过模糊和剪切蒙版的形式融入到图标中,可以使得图标色彩丰富和强化光影变化。
9. 深色卡片色彩强化
以上案例属于在浅色或者白色的环境中运用,在深色主题中依然会用到极光风进行设计强化。在界面背景和卡片背景中运用,效果也是非常不错的,可以给深色的卡片一些色彩感和丰富度。
10. 作品包装中的背景强化
除了在 UI 设计场景中运用以外,最近发现在设计师作品包装中的运用也是非常普遍,用于背景层的渲染带来的视觉体验度也是非常不错的。在作品包装环节中作为背景运用和局部装饰,也有在封面设计中重点运用,使得作品集紧贴设计趋势,提高作品的打开率。
11. 其他场景中的应用普及
在 UI 场景还有很多运用场景,这里仅为抛砖引玉,无论是作为背景强化还是元素装饰,都能带给用户更加年轻化的感官体验。
除了在 UI 场景中呈现以外,极光风的设计也会出现在更多其它场景中。在 Banner 设计、海报设计、专题页设计等视觉设计层面也是运用广泛,是一个影响范围比较广的设计趋势之一。
实现极光风设计的方法 通过一些线上的案例欣赏和分析,相信大家对于极光风在 UI 场景中运用都有一定的了解,在项目设计中也能轻松尝试。这一类风格从技法实现的角度来说并不难,关键因素在于控制好配色原理,下面就为大家总结几种实现的方法。
方法 01:利用不透明度渐变融合
不透明度渐变在设计中的运用比较普遍,利用的是不透明度从 100%-0% 之间形成渐变,让色彩逐渐消失或者淡化。
画一个圆形,选择径向渐变,渐变两端的颜色选择同一个色相。然后设置中间颜色不透明度为 100%,另一个颜色不透明度设置为 0%,这里颜色适合选择低饱和度的范围。同样的方法反复绘制几个不同颜色的圆形进行组合,即可完成极光风背景设计。
方法 02:利用模糊度变化融合
这个方法是结合了形状和模糊设置(高斯模糊等),绘制几个大小不等的圆形进行排版组合,然后选择所有圆形一起进行模糊设置。形状的绘制上面最好是有大小差异,排版错落有致,这样形成的效果比较富有变化。
在颜色的选择上面需要根据背景的强化程度选择,低饱和度的颜色融合性更高,适合作为弱化性质的背景使用。
方法 03:利用背景模糊融合
背景模糊在 Sketch、Figma 等设计软件中有该功能,是一个影响设计趋势较为常用的功能,特别是在实现玻璃质感和一些质感图标上面非常实用。
在背景层绘制图形,颜色和形状均可自由发挥,然后再绘制一个形状作为调节层,调节层是用于控制模糊效果的。在调节层的形状上面设置一个带有透明度的颜色(必须要带有透明度),然后再设置背景模糊,背景模糊数值的大小决定模糊的程度,不透明度的大小决定整体效果的亮度。
方法 04:利用图片模糊融合
以上的方法都需要进行配色处理,如果色感方面比较薄弱的设计师,也可以挑选一些不错的图片来实现极光风效果。
挑选一张色彩符合要求的图片,然后在 Photoshop 等设计软件中执行高斯模糊,半径值的多少决定了模糊之后的自然度。我们在选择图片的过程中除了整张图片进行操作以外,也可以截取其中的一部分,也许会带来意想不到的效果。
除了这几个方法以外还有更多不一样的实现方法,大家可以根据自己的探索选择最适合自己的方法。根据使用软件的差别选择最简单的形式,根据想要实现的效果选择最灵活的方法,这样才能便于后期的反复调整。
极光风案例实战
小结 研究落地产品的设计细节和视觉趋势,将有助于提高我们对于当前有效设计趋势的把控,而不仅仅只是停留在概念化的预测阶段,而是行之有效的真实案例。
极光风是近些年运用在落地产品中的 UI 设计趋势之一,通过大量案例验证之后的有效方法,希望大家能够掌握并灵活运用到项目设计中。落地产品的 UI 设计趋势还有很多,本次分享的仅为抛砖引玉,后续将和大家探讨更多的有效设计趋势,辅助提高我们的设计能力。
2021 年,UI设计师最值得跟进的新趋势「极光风」 编者按:如果你有关注设计趋势,那么你一定会知道新拟物化和玻璃拟物化这两种近年被提出的设计风格,而最初提出它们的,就是著名的设计师 Michal Malewicz,他如今俨然已经是设计圈内的趋势观察家。
阅读文章 >
欢迎关注作者的微信公众号:「黑马家族」
-
不限次数!快收藏在线免费抠图神器「Hama」
UI交互 2022-04-24Hama 如同上次介绍的「Magic Eraser」,让用户上传图片、将画面中不想要的部分抹除,因为这类服务都是使用人工智能 AI 加上机器学习方式训练出...Hama 如同上次介绍的「Magic Eraser」,让用户上传图片、将画面中不想要的部分抹除,因为这类服务都是使用人工智能 AI 加上机器学习方式训练出更强大的程序辨识能力,会分析标示人物或物品,移除后将附近的颜色补充进来,就会使去除后的相片画面很自然,而且这项服务完全免费,使用者只要打开网站、无须注册就能使用。
3秒无痕修图!在线黑科技修图神器 Magic Eraser 大家好,我是和你们聊设计的花生~ 抠图和修图是每个设计师都必须花时间处理的日常工作,它们虽然难度不高,但需要处理的频次不低,所以很多时候我们都会借助智能工具来处理。
阅读文章 >
Hama 目前支持上传任何尺寸大小的原始图片,不过下载时会将处理后的图片大小限制为 720px,依照网站说明他们正在准备付费 Pro 版本,未来需要付费才能下载高分辨率的图片成果,但好处是没有限制单一图片编辑次数。如果在去除时无法获得较好的效果,不妨重复进行几次,让机器重新辨识效果会更理想(也取决于用户本身图片的复杂性)。
Hama 网站链接: https://www.hama.app/en
使用教学
开启 Hama 网站将图片拖曳到网页的虚线方框就能开始使用,Hama 不会将任何图片储存于服务器。
接着会看到简易编辑器,使用者需要做的就是从下方调整橡皮擦的粗细,然后标记出想要清除的范围,顺带一提,这张操作范例使用的图片来自 Pixabay,它是一个收录超过 30 万张相片的免费图库。
图库两连发!有三十万可商用图片的Pixabay+图片搜索引擎 今天这篇源自之前合集里推荐过的一个图库站,最近实际深入使用后,发现它确实是个极佳的图片素材库,不但提供了大量且可以免费使用的照片、向量图和艺术插图,而且都可以自由下载使用,包含商业用途,无须署名。
阅读文章 >
举例来说,我想把相片中的 Gogoro 机车移除,就以橡皮擦标示出特定范围,点选下方「Erase」清除。
接着 Hama 就会开始分析计算要清除的人物或物品,同时补上可能的背景颜色或样式,看起来就像是变魔术一样直接让 Gogoro 从照片消失(除了没有描绘到的阴影部分)。
如果想比较一下原图和去除后的图片差异,点选右上角「Original」切换原图和处理后的图片。
一张图片有无限制的编辑次数,若是觉得看起来没有很完美,可进行多次编辑,为了让编辑的流程更快、更顺畅,建议将右上角「Auto」切换为开启状态,就能在每次标示范围后让 Hama 自动分析处理,不用重复点击 Erase 清除按钮。
完成编辑后点选右上角「Download」即可下载、保存编辑后的图片。
值得一试的三个理由:
1. Hama 让用户上传图片、将画面中不想要的部分抹除
2. 支持上传任何尺寸的原始图片,不过下载时图片大小限制为 720px
3. 不会将图片储存于服务器,可反复进行多次清除没有次数限制
又一个抠图神器!完全免费无需注册超好用! 当前图片去背工具都设计得相当简单易用,只要将图片上传,就能以机器自动辨识主体和背景范围,快速将背景移除,转为透明背景或是套用特定颜色,像是之前介绍过的 FocoClipping、Designify、BackgroundCut、AI Background Remover 等等去背服务都有类
阅读文章 >