体验碎周报第 79 期(2022.1.17)

体验碎周报第 79 期(2022.1.17)

系统的知识来源于对碎片的整理和思考,为了更好地输出系统知识,记录本周我发现的体验设计和思考,为构建系统知识做准备。

体验亮点

喜马拉雅青少年模式弹窗日历

因为政策原因,各大 App 每天打开都会弹一次青少年模式,只有喜马拉雅花了点心思,会介绍一些当天的情况,类似历史上的今天。

来自 @三丰

iOS 开关控件点击区域扩大

在列表中的开关控件点击区域不仅只有控件本身,控件背景的列项区域也是可以点击的。点击区域扩大有助于降低操作精度提高命中率。

来自 @featherless

iOS 键盘也有类似的处理,根据当前输入内容,判断接下来要点击的按键,适当的扩大按键点击区域。

体验槽点

豆瓣动态互动按钮顺序不一致

在首页动态点赞在左,而到了动态详情页却是评论在左。不一致会导致用户习惯操作出错。

来自 @阿小小海

推荐阅读

Oculus VR 设计指南中文版

链接:https://fradser.notion.site/fradser/Oculus-VR-411a2bf02b134fd5bec4958eb3c5358b

Oculus 是 Meta(Facebook)旗下的 VR 制造商,其生产的 Quest 2 VR 头盔是目前销量最大的 VR 设备。设计指南包含视觉界面、画面渲染、人体运动、操作控制、舒适和易用性等内容,非常完备。

本指南由西瓜视频的设计师们共同翻译校对。

心理学博士对 IMOS 做了什么(播客)

链接:https://www.bilibili.com/video/BV1X44y1j7H6

IMOS 是智己汽车所采用的自研操作系统。这集播客是访谈 IMOS 背后的人因研究专家/心理学博士吴彬星。嘉宾首先澄清大众对心理学仅仅是性格测试和心理咨询的误解,心理学其实是研究人类如何加工信息的学科。接下来讲了很多汽车操作系统与手机 App 设计思路、原则和方法上的差别。

如何让自动算色提升你的工作效率

链接:https://mp.weixin.qq.com/s/2vWfS6H3G0pwKJ9cMvqYqw

本文首先对颜色的概念进行科普,然后提供一套算法,输入品牌色后计算得出对比度更佳的配色,提升作图选色的效率。

如何设计交互缺省页

链接:https://mp.weixin.qq.com/s/s7DIp5_ae9J1WIDXz7PcEw

以请求服务器是否成功为依据,缺省状态主要分两大类:

  1. 请求失败:网络环境原因 或 设备原因
  2. 请求成功:数据正常且为空 或 数据异常

本文对缺省页出现原因和分类、组成结构、视觉样式等有很好的总结。如果能把加载再补充进去,那这篇文章就完美了。

产品发现

麦当劳营养计算器

链接:https://www.mcdonalds.com.cn/nutrition_calculator

西式快餐经常被当做肥胖食品的代名词,麦当劳网站有个营养计算器来试图改变你的想法。该计算器提供麦当劳常规菜单中主要餐品的六种营养成分数据,包括能量、蛋白质、脂肪、碳水化合物、钠和钙。鼓励食客根据每天需要摄入的营养来安排点餐。

Locket Widget —— 在对方手机上展示你照片的 iOS 小组件

链接:https://apps.apple.com/cn/app/locket-widget/id1600525061

目前 App Store 美区 free 榜排名第一。如果你和朋友都安装了这个 App,可以将自己的照片推送到朋友的手机桌面上的 iOS 小组件里。为了让朋友更亲密,这个 App 最多只能添加 5 位好友。

https://mergeek.com/latest

来自 @HwangSSS

Mergeek —— 产品爱好者社区。

链接:https://mergeek.com/latest

Mergeek 致力于挖掘和发现全球范围内的优质产品和项目,推出每日产品情报、iOS 限免、安卓应用精选、生活极客方案和个性订阅功能,让更多的人认识并使用优秀产品。

多款国产在线协作白板

由于疫情影响,在线协作需求喷发。本周国外在线协作白板 Miro 融资 4 亿美元,估值达到 175 亿美元。超过 Figma 的 100 亿美元。难怪 Figma 要 大力推广 FigJam。

Miro 融资咨询:https://mp.weixin.qq.com/s/VE57xwdrZ_JN0XJOX60pEQ

国外这么火热的生意,国内肯定充满了很多致敬者,这里介绍几个:

企业微信 4.0 与 腾讯文档、腾讯会议打通

链接:https://mp.weixin.qq.com/s/r8a06vdYTd3YmDnwUbiumg

企业微信的使用体验槽点太多,比如:当一个员工早上来到公司,需要先扫码登录企业微信,再扫码登录腾讯文档,再扫码登录腾讯会议。

张小龙在去年(2021)年底的员工大会上和团队说,“你们总说企业微信要和腾讯会议、腾讯文档打通,我觉得这事不用急,效率工具带不来创新。”

我本来以为今年企业微信体验优化没戏,没想到这周企业微信 4.0 更新后就和腾讯文档、腾讯会议打通了。正纳闷腾讯是不是开发效率太高了,不着急的事情也做好了。原来马化腾去年就开始牵头提议要做这个了。

Wordle —— 填字游戏

链接:https://www.powerlanguage.co.uk/wordle/

国外社交网络最近出现一堆红绿灰三色方块的动态,这是网页游戏 Wordle 的每日战绩,这是一款填字游戏游戏。少数派写了一篇介绍这款游戏相关的文章:https://sspai.com/post/70949

工具资源

Nodes —— 可视化生成实时 3D 图像

链接:https://nodes.io/

该工具允许使用任何 WebGL 框架,通过拖拽模块或编程的方式生成各种漂亮的实时 3D 图像。用来做可视化效果不错。

Supernova —— 设计系统管理工具

链接:https://www.supernova.io

该工具能集成设计系统的 Token、组件文档、素材等内容,便于同事查看。并且在 Figma 的源文件更新后,自动更新文档的内容。

表情包制作器 for Figma

链接:https://www.figma.com/community/file/1062636565008124001/表情包制作器

包含:120+ 身体、100+ 脸部、80+ 装饰物。

Diez — Design Token 框架

链接:https://diez.org/

Diez 是一个免费的开源开发人员工具包,用于管理代码库、本地平台和团队之间共享的视觉样式。包含三个功能:

  • 使用 TypeScript 编译 Design Token;
  • 把 Design Token 转换成 iOS、Android 和 Web 的代码;
  • 从 Figma、Sketch 等设计文件中提取 Design Token。

苹果发布 macOS 12 设计资源

链接:https://developer.apple.com/design/resources/#macos-apps

苹果在其界面指南网站发布 macOS 12 的界面套件、界面和图标模板。仅提供 Sketch 和 Adobe XD 格式(图标模板有 PS 格式)。很多网友都在苹果设计师的推特账户留言要求提供 Figma 格式,但苹果非常在乎保密,不接受 SaaS 设计工具。之前有曾在苹果工作的设计师在推特上表示,苹果的保密严格到跨部门设计源文件都不会分享,所以他不得已把其他部门的设计的界面截图重新临摹了一份源文件。

mental canvas —— 手绘 2D 转 3D

链接:https://mentalcanvas.com

该设计软件能绘制 3D 立体的手绘插画,而且还能给插画导出成演示动画。

中文使用教程:https://uiiiuiii.com/draw/1212455781.html

来自 @nishuang

526 个中国传统颜色-色谱

链接:https://www.figma.com/community/file/1063024145039495423

根据中国色谱网站( http://zhongguose.com)制作的 Figma 颜色样式,可发布为团队组件库进行调用。

第五届 SEE Conf 2022 PPT & 视频

链接:https://www.yuque.com/seeconf/2022/keynote

每一届支付宝体验科技大会的 PPT 和视频都会公布在旗下语雀知识库里。

相关资讯

ONES 收购为知笔记,全面升级企业知识库产品

链接:https://mp.weixin.qq.com/s/GRKoh0M0PeacXV1lvB-uRw

为知笔记是 2011 年创办的国产笔记软件,比 2015 年创办的 Evernote 还早。ONES 版图真广,之前还收购了团队协作工具 Tower。

2021 最佳可视化作品清单

链接:https://www.maartenlambrechts.com/2021/12/29/the-list-of-2021-visualization-lists.html

Maarten Lambrechts 是国外的可视化设计师,每年都会整理一份最佳可视化作品清单。网站中还有过去 2015 至 2020 年的最佳可视化作品清单。

来自 @nishuang

2021 awwwards 最佳网站正在投票评选中

链接:https://annual.awwwards.com

awwwards 为了表彰世界上最优秀的网页设计师和开发人员,每年年底都会进行一次年度最佳网站评选。参与评选的网站设计感都不错,可以看看。

Notion 将于 3 月 2 日举办在线会议

链接:https://blockbyblock.notion.com

在这次会议上 Notion 将发布新功能,探讨接下来的发展路线,并且邀请嘉宾分享他们使用 Notion 提高效率和团队协作的故事。

拼多多“砍一刀”项目失宠:内部绩效打分被评为最低档

过去,广告投放、砍一刀和手机预装被视为拼多多拉新的 “三驾马车”。然而在 2021 年上半年,拼多多 “砍一刀” 项目在 “271” 绩效打分中,被评为最低档 “1”。换言之,拼多多认为靠 “砍一刀” 拉新不那么有效了。此外,让用户去多多果园浇水施肥,下几十单便宜小商品最后换到一箱柚子的运营玩法,也不那么有效了。

别急着高兴,我非常担心拼多多因此去发明更神奇的新玩法。

砍价永远差一刀?拼多多法庭上回复:小数点后有 6 位

链接:http://news.cjn.cn/bsy/gnxw_19788/202201/t3906813.htm

上海律师刘宇航当时参加了拼多多的“砍价免费拿”活动,领取了一张“超级免单卡”,但邀请多人砍价后,始终差“0.9%”。为何次次第一名却总是无法砍价成功?觉得平台数据不真实后,刘宇航以拼多多在提供网络服务时涉嫌违背诚实信用原则,使用虚假数据隐瞒规则已构成欺诈为由,向法院递交了起诉材料。

拼多多在法庭上表示,因页面显示百分比位数有限,所以他们把一个至少小数点后有 6 位数以上的百分比,省略显示为 0.9%,砍价页面显示的 0.9% 不是 0.9%,而是 0.9996427%。

当法庭问为什么不在页面显示完整百分比时,拼多多称是因为显示屏有限,而且这个数是除不尽的所以做了省略。

针对此事,拼多多回应称,“砍价免费领”活动真实有效,本期共有 1200 余款商品参加,已累计送出 709 万件商品。对于该律师邀请多人砍价但砍价进度条未发生变化,拼多多法务部高级总监唐江荣解释称:“因为部分免费砍的商品金额较大,拉少量用户砍掉的金额不足以让百分比变化,会让消费者以为砍价没有变化。”

QQ 内嵌虚幻 4 游戏引擎,iOS 版安装包达到 879MB

链接:https://www.zhihu.com/question/510686648

虚幻4引擎是由 Epic Games 公司推出的一款游戏开发引擎,相比其他引擎,虚幻引擎不仅高效、全能,还能直接预览开发效果,赋予了开发商更强的能力。

手机 QQ 为何加入虚幻 4引擎?官方称,手机 QQ 就是在 App 内嵌一个 3D 渲染交互的功能,只不过 UE4(即虚幻4)的渲染效果好一些,内容开发工具链完善一些,有源码改造便利一些,因此采用了 UE4 而已,这样就不需要自己再手动去开发 3D 的一系列功能。

值得一提的是,此前有网友发现手机 QQ 在开启厘米秀后,便会加载虚幻引擎库,也就是说厘米秀需要 3D 渲染功能,而虚幻引擎官方的回答,似乎也证实了这一说法。

微信朋友圈更新折叠规则

以前单条折叠,当前页面展开。现在改成当一个人连续发布多条广告时折叠成 1 条,在新页面显示全部被折叠的多条。

淘宝正在测试短视频模式的商品详情页

淘宝从短视频交互找到灵感,新做了一种详情页模式,上下切换商品,商品的具体信息通过分段选择器或者模态展示。

Microsoft Defender 重新设计版本正在内测

Microsoft Defender 是 Windows 10/Windows 11 附带的杀毒安全工具,经过微软 Fluent Design 风格重新设计后的版本正在内测。可以从图片中看到 Microsoft Defender 不仅支持 Windows 还支持 安卓和 iOS。

迪士尼动画设计师演示动画电影制作过程

迪士尼动画设计师 Jonah Sidhom 在推特公布一段《魔法满屋》(Encanto)的设计过程。可以看到先用一些简单的方块在 3D 软件中简单模拟场景组成,然后再 2D 软件中绘制角色草图,再拍摄自己的动作给角色的姿态做参考,最后再制作精细的角色和场景。
视频链接:https://www.bilibili.com/video/BV1gq4y1y7qM/

工信部回应轻微摇动APP跳广告:加强监督

近日,有网友在人民网“领导留言板”称,工信部发布对于手机软件的开屏广告进行治理,但是有些软件还是没照做,进入软件后有开屏广告,并且有些软件开屏广告还有摇一摇进入,如果你手机没拿稳,轻微的摇晃了一下,它就会进入开屏广告。

工信部对此回应,已组织召开专题会议,要求涉及的主要互联网企业落实主体责任,优化参数设置,合理设置开屏信息跳转方式,切实尊重用户真实意愿,保障用户合法权益。下一步,工信部将继续加强监督,强化提升用户感知,为广大群众营造更安全、更健康、更干净的APP应用环境。

思考碎片

拖放指示器的现实隐喻来源

为什么drag and drop(拖放)控件是几条横线或两排圆点我的猜测是这样:人类发现纹路可以增加摩擦力,于是在电池盖后面用横线或两排圆点的纹路作为推拉的支点,最终 UI 设计中的拖放也沿用了这个外形隐喻。

体验碎周报第 79 期(2022.1.17)

https://www.ftium4.com/ux-weekly-79.html

作者

龙爪槐守望者

发布于

2022-01-17

更新于

2022-01-16

许可协议

评论