惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

月光博客
月光博客
人人都是产品经理
人人都是产品经理
Hugging Face - Blog
Hugging Face - Blog
有赞技术团队
有赞技术团队
阮一峰的网络日志
阮一峰的网络日志
罗磊的独立博客
博客园_首页
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
大猫的无限游戏
大猫的无限游戏
博客园 - 司徒正美
S
SegmentFault 最新的问题
Jina AI
Jina AI
美团技术团队
酷 壳 – CoolShell
酷 壳 – CoolShell
小众软件
小众软件
WordPress大学
WordPress大学
爱范儿
爱范儿
博客园 - Franky
量子位
V
V2EX
Apple Machine Learning Research
Apple Machine Learning Research
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
雷峰网
雷峰网

少数派

派早报:Google 发布 Fitbit Air 等 - 少数派 「新人报到」確認需求,再開始 - 少数派 从 SOLO 独立开发者社区,我看到了越来越多开发者开始做自己的产品 - 少数派 我怎么管理那些"不常做,但总会忘"的生活事项 - 少数派 人形机器人量产元年,数据才是具身智能的“生死线” - 少数派 BuhoLaunchpad 高度还原 Mac 启动台:开发历程与思考 - 少数派 五年陪伴依然不舍,DIY 换壳后让罗技 MX Master 3 继续服役 - 少数派 新玩意 240|少数派的编辑们最近买了啥? - 少数派 一日一技|为什么你应该关闭 iOS 的键盘声音 - 少数派 我做了个插件和 Skills,一键提取任何网站的设计规范 Design.md - 少数派 住在三四线城市的你,该开始录播客了 - 少数派 甘南秘境,大白高国 - 少数派 AI的审美:谁让把我变成川内倫子 - 少数派 返工怎能不烦恼,打工人片单总有一部是你的「嘴替」 - 少数派 为了让「上厕所」更健康,我做了一个小工具 - 少数派 AI + Skill,能够让生成的文章去除 AI 味吗? - 少数派 新玩意|韶音OpenDots ONE 耳夹式耳机 - 少数派 《美满》| 在每一个春天的晚上相爱(362) - 少数派 新玩意|优篮子 PS01 MagSnap 磁吸支架 - 少数派 自我整合手记 | 我开始早睡了:用稳定规则,为自由托底 - 少数派 用龙虾(OpenClaw)两个多月,我最深的12个体会 - 少数派 听歌时间到,12 张你可能错过的 2025 华语乐坛好专辑 - 少数派 承诺能追吗 - 少数派 macOS 26启动台没了? 我做了个不一样的App启动器 - Keboard - 少数派 《四海为家的人》| INTJ对话INTJ(361) - 少数派 你发过的那些黑历史,是时候一次清干净了 - 少数派 新玩意:安安静静玩,越玩越专注:计客密码机 - 少数派 iPad 用户首次体验 Android 平板:vivo Pad6 Pro - 少数派 数据逻辑强 - 少数派 极北行+ | 一路向北,探访日本至北之地 | 001 - 少数派
从「引导」与「反馈」,谈谈交互体验 - 少数派
2021-06-26 · via 少数派

前言

大家好,我是老人,一名业余设计师。我喜欢把玩各种移动设备,尝试它们的交互体验。随着Windows11的发布,我萌发了写这篇文章的想法,将我日常中对移动设备交互的观察与思考,以闲谈的方式展示出来。

「引导」与「反馈」是我对交互设计的总结,前者告诉用户该怎么做,后者告诉用户做了什么。以此为前提,开始我们的闲谈。

引导

紧贴现实的逻辑

在现实生活中,每件物体的运作都遵循一定的「逻辑」,既不会凭空消失,也不会凭空出现。这些逻辑在交互设计中同样适用。以IOS为例:

•  当你划到任何页面底部时,继续滑动,页面会产生「弹力」拉伸的效果。这几乎成为了iOS的标志特点之一。

•  在iOS10及以前,下拉通知中心,会有「触底反弹」的效果,就像是一块玻璃砸在了桌面上,如下图:

iOS10 通知中心的“触底反弹”效果

当然,物理特性在UI中并不是越多越复杂越好。恰到好处的运用,能够引导用户理解软件的逻辑,从而更快的熟悉软件。这便是借现实生活中的经验,来降低用户的学习成本。

在降低学习成本上,「拟物风」设计是一个具象的例子,我们来看看一个抽象的例子:

每个元素的运动,都应符合逻辑

当用户快速的浏览一下这些动效,首先对左边的动效建立「逻辑感」:选中的选项,经过触碰转变成为新页面的标题栏,一气呵成,标题栏「从哪来到哪去」一目了然。

而右边的动效十分僵硬:旧页面左滑消失,新页面左滑出现,其间没有任何连接的纽带,也就没有「逻辑」可言。

同样的例子在iOS上也有所体现,只不过更抽象些:

iOS的“粘滞效果”

打造层次感

上方所写的「逻辑感」体现在动效上。那么,如何在静态的页面中体现「逻辑感」呢?你可以试试用阴影,渐变色来建立层次感,下方是一个直观的例子(以某宝为例):

左边的便是淘宝原版的页面

右边的页面能够让用户对层次,也就是主次关系一目了然,它告诉用户:嘿,下方的导航栏是最大的管理者!也就是最大的分类栏!如果你要切换不同的主界面,就请到这儿来吧!

而上方的导航栏,由于使用了颜色更淡,更不突出的阴影,成为了「次级」的导航栏。

这样用户一眼便知自己该怎么做。就像我正在写的文章需要条理分明,交互设计也不例外。

反馈

从一个按钮开始

一个简单的问题:当你按一个按钮时,是否希望按钮被「按下去」?

答:这是什么弱智问题?肯定是啊。

是的,正是这样一个「按下去」的体验,成为了交互设计中反馈系统的核心。但你可别大意了,就是这么基础的东西,还会有设计师给忘了呢!看看下面的例子:

其中有一个按钮非常调皮

•  Windows2000 的按钮十分经典,「按下去」的机械感完美体现了那个年代的风格。

•  iOS 的按钮依然是「按下去」,只是相较而言抽象不少。

•  Material Design 便成为了格格不入的那一个!按钮看上去不想被按下去,不安分的跳上来了!幸好,在最新的Material You 中,谷歌已经意识到问题并把这个设计改掉了。

即便是一个简单的按钮,也要遵循现实生活中的「基本逻辑」。

给予令人愉悦的体验

前面说过,「逻辑」于交互设计中十分重要,那是否要死扣这一点呢?不一定。在不同的场合中,我们可以对交互的逻辑进行微调,使其达到既悦眼,又实用的效果。

这次拿iOS开刷,看看下面的例子:

右边的音量条,可以不要搞出这么大动静吗?

试想:但你需要调节音量时,你希望音量条马上出现;但你不需要调节音量时,你希望音量条安静的消失,而不是在你眼皮子底下跳一下再走开。就像你要送走一个讨厌的人,你肯定不希望他在收拾行李时发出很大响声。

而近代iOS引入的音量条,不仅会在你眼皮子底下跳来跳去,还会「自动放大缩小」,成功将你的注意力从「工作内容」引到一个「音量条」。

在这个场合中,交互设计应该让用户注意力集中在屏幕内容,尽可能少地打扰用户。所有边缘提醒型服务,都应安静的进行。

不要被条条框框所束缚,作为创意工作者,尽所有可能去打造「令人愉悦的体验」。

你注意到了吗?

好的设计之所以用起来赏心悦目,正因为设计师们在这些细节上下了功夫;而那些我们称之为“反人类”的设计,正是由那些不符合「逻辑」的设计一点一滴累积出来的。

我相信图片相比文字更能加深读者的理解,所以在撰写这篇文章时,尽可能使用GIF直观,形象的表达,并辅以文字。它们是我用After Effects制作的,附上工作截图:

Ae+Ps,什么都能干