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

推荐订阅源

P
Proofpoint News Feed
C
CERT Recently Published Vulnerability Notes
O
OpenAI News
V
Vulnerabilities – Threatpost
C
Cybersecurity and Infrastructure Security Agency CISA
S
Schneier on Security
Latest news
Latest news
F
Full Disclosure
T
Tenable Blog
T
Troy Hunt's Blog
The Last Watchdog
The Last Watchdog
S
Secure Thoughts
L
LangChain Blog
有赞技术团队
有赞技术团队
Project Zero
Project Zero
Cloudbric
Cloudbric
爱范儿
爱范儿
GbyAI
GbyAI
C
CXSECURITY Database RSS Feed - CXSecurity.com
T
The Exploit Database - CXSecurity.com
S
Security @ Cisco Blogs
Hugging Face - Blog
Hugging Face - Blog
Recorded Future
Recorded Future
大猫的无限游戏
大猫的无限游戏
Last Week in AI
Last Week in AI
C
Cisco Blogs
WordPress大学
WordPress大学
Apple Machine Learning Research
Apple Machine Learning Research
小众软件
小众软件
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
V2EX - 技术
V2EX - 技术
Engineering at Meta
Engineering at Meta
Spread Privacy
Spread Privacy
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
Hacker News: Ask HN
Hacker News: Ask HN
Recent Commits to openclaw:main
Recent Commits to openclaw:main
Schneier on Security
Schneier on Security
T
Threat Research - Cisco Blogs
M
MIT News - Artificial intelligence
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
K
Kaspersky official blog
The Hacker News
The Hacker News
V
V2EX
F
Fortinet All Blogs
L
LINUX DO - 最新话题
Cisco Talos Blog
Cisco Talos Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
N
News | PayPal Newsroom
博客园 - 三生石上(FineUI控件)
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org

人人都是产品经理

为什么你的产品找不到差异化?90%的失败都卡在第一步上(下) – 人人都是产品经理, 3年从30万到1300万用户、获2200万美元融资,这个AI教育产品用“抽卡”破解了获客难题 – 人人都是产品经理, 园区招商系统怎么做才能真正帮到去化?我加了这一个功能,推广链接转发400次阅读过万 – 人人都是产品经理, AI大事件:OpenAI发完网络安全模型又搞药物研发,小鹏汽车要抓”DeepSeek时刻” – 人人都是产品经理, 电商不是卖货,是一场更残酷的产品经理实战 – 人人都是产品经理, 没想到,活动营销又回来了! – 人人都是产品经理, 为何All-in海外KOC:一场关于AI时代窗口期的豪赌 – 人人都是产品经理, 重新理解企业的内部协作 – 人人都是产品经理, 苹果的 AI 战略到底是什么? – 人人都是产品经理, 医疗智能体·第2讲——合规护城河:等保、PIPL与HIPAA的架构实战 – 人人都是产品经理, 向量知识库五步法:从“答非所问”到“精准回复” – 人人都是产品经理, 鸿蒙PC三方库构建总指挥HPKBUILD(sha)库为例 – 人人都是产品经理, 何时该用LLM?AI产品经理的LLM设计指南 – 人人都是产品经理, 医疗信息领域的需求方、决策方、准入方以及关注点(二) – 人人都是产品经理, 即梦涨价:一场被误读的「傲慢」 – 人人都是产品经理, 面试AI PM必答题:Hermes和OpenClaw的区别,如何讲清楚业务价值 – 人人都是产品经理, AI的下一张船票:世界模型——AI产品经理必须理解的技术拐点 – 人人都是产品经理, 小红书做GEO,怎么让AI信你?记住这 3 个重要信息 – 人人都是产品经理, 5 家印度 AI 初创公司,看看印度 AI 再做什么 – 人人都是产品经理, AI项目跨团队协作:产品技术业务如何不打架 – 人人都是产品经理, Agentic Workflow(智能体工作流):让AI从”答案生成器”变成”数字员工” – 人人都是产品经理, lycium_plusplus 项目全景解读:OpenHarmony 三方库构建的“大管家” – 人人都是产品经理, 从爆单救火到前置履约:两套预采策略,把生鲜大促履约效率拉满 – 人人都是产品经理, 什么时候该补货?我用一轮数据做了一个决定 – 人人都是产品经理, 从“机械兜底”到“动态分流”:AI客服重复进线治理的4大底层逻辑 – 人人都是产品经理, 抖音拼效率,红书拼洞察 – 人人都是产品经理, 全民狂欢与退潮——为什么龙虾这波热潮冷却得如此之快? – 人人都是产品经理, Stripe押注!MPP重塑全球支付 – 人人都是产品经理, 小红书GEO:AI引用你的内容,不是因为你对,而是因为你看起来可信 – 人人都是产品经理, 前百度副总裁押注办公Agent,日韩付费爆发,Manus迎来强劲对手 – 人人都是产品经理, 企事业单位数字化的业务供需本质 – 人人都是产品经理, 医疗智能体·第1讲——医疗信息化重构:从“辅助软件”到“自主智能体”的范式转移 – 人人都是产品经理, 粉丝量就是空气!!! – 人人都是产品经理, 用户说“薯片碎了”,机器回“要买吗?”:意图识别的翻车与破局 – 人人都是产品经理, RAG召回准确率从75到90 我做对了这三件事 – 人人都是产品经理, AI大事件:Anthropic改收费、OpenAI发安全版、手术机器人纳入医保、阿里发布”秒悟” – 人人都是产品经理, Chrome 推出 Skills 新功能,Agent 重塑上网方式 – 人人都是产品经理, GitHub前创始人拿了a16z的1700万美元,做Agent时代的Git – 人人都是产品经理 拷贝或克隆其他 Flutter OH 项目到本地后无法运行 – 人人都是产品经理, 优惠券设计:优惠券创建 – 人人都是产品经理, 不用死磕文档!AI 助手 1 小时搞定飞书 CLI 安装 + 配置 + 知识库 – 人人都是产品经理, 用小龙虾做竞品分析报告:从2天到20分钟,我是怎么做到的 – 人人都是产品经理 用小龙虾做市场分析报告:搞懂这3个公式,市场规模不再靠猜 – 人人都是产品经理, 你早就在做 Harness 工程,只是不知道它叫这个名字 – 人人都是产品经理, Think Long就够?你可能想多了! – 人人都是产品经理, 货代SRM实战:供应商准入怎么做,才能让资源池不是通讯录而是可交付网络? – 人人都是产品经理, 如何做好用户调研?详解基本技巧 – 人人都是产品经理, 木鸟、途家、美团对打,平台春天行动开“卷” – 人人都是产品经理, 入职才发现公司不靠谱?小红书从业者求职避坑指南 – 人人都是产品经理, 美国 AI 三巨头联手封堵,中国 AI 突围之路在何方 – 人人都是产品经理, 小红书,放在需求对面的镜子 – 人人都是产品经理, AI 会带来大规模失业吗? – 人人都是产品经理, 从出单到补货前,我第一次犹豫:该不该放大? – 人人都是产品经理, Flutter 三方库鸿蒙化适配:5 种高效检查方式,快速判断是否需要适配 – 人人都是产品经理, 从做产品进阶拿结果:医美机构产品经理转岗科室运营经理 – 人人都是产品经理, 阿里HappyHorse,一场关于“Token经济”的阳谋 – 人人都是产品经理, To B AI:客户留存落地的观察与思考 – 人人都是产品经理, AI产品的“生命线”——数据采集、标注、清洗的产品化设计 – 人人都是产品经理, 谈谈AI Agent(二):当“孩子”能自己“体验世界”时,你该学什么? – 人人都是产品经理, UI/UX设计师的3层能力进阶,前两层让你活下来,第三层…才是真正的分水岭 – 人人都是产品经理, 2分钟 → 30秒,效率提升75%:B端产品经理如何用「规则枷锁」驯服AI幻觉? – 人人都是产品经理, 还没来得及学OpenClaw,来了个更猛的:Hermes Agent – 人人都是产品经理, AI日报:宇树机器人跑出10m/s刷新世界纪录 – 人人都是产品经理, 一文说透基金互金如何用情绪价值引导用户决策做转化 – 人人都是产品经理, 当浏览器开始替你”看”网页:AI 浏览器正在亲手拆掉它脚下的那张网 – 人人都是产品经理, 0代码,一天时间我Vibe Coding了个网站 – 人人都是产品经理, Hermes 和 OpenClaw 之争,Agent 的能力应该“装上去”还是“长出来”? – 人人都是产品经理 视频生成的“桌子”,字节Seedance 2掀完,阿里快乐马掀 – 人人都是产品经理, 从听不懂到完全信任:我的 Codex 深度产品体验 – 人人都是产品经理, 当虚拟偶像有了北京户口,与真人偶像还有什么区别? – 人人都是产品经理, 会说,远远比会做更重要 —— 对 SBTI 爆火现象的五层观察 – 人人都是产品经理, AI产品经理必看:当“搭环境”比“选模型”更重要,你的认知还在2024年吗? – 人人都是产品经理, 2026年AI产品商业化核心逻辑:从功能demo到规模化营收的3个必破卡点 – 人人都是产品经理, 京东围绕供应链,卷起裤腿下场的那些事儿 – 人人都是产品经理, SBTI一夜刷屏:它赢在了“太会说人话” – 人人都是产品经理, 折扣零售的真相:不是便宜,而是价值感! – 人人都是产品经理, 和甲方吵了一架,最后加钱做了——我学到的ToB产品经理生存法则 – 人人都是产品经理, 和几位小红书操盘手聊了8小时,干货全在这 – 人人都是产品经理, 智谱GLM-5.1登场,开源模型首超Opus4.6!!! – 人人都是产品经理 Anthropic收入凭什么反超OpenAI,终于有人把这事说清楚了 – 人人都是产品经理, 史上最有故事感的技术报告——Claude最强模型Mythos 7个极其精彩的细节 – 人人都是产品经理, 模型不是壁垒,Harness 也不是 – 人人都是产品经理, 抖音本地生活业务思考21 – 人人都是产品经理, Superpowers:145k Star的AI编码框架,到底是什么来头? Superpowers:145k Star的AI编码框架,到底是什么来头? – 人人都是产品经理, OpenAI 的路走错了,Anthropic Harness 解法启示:模型需要实践专科生 – 人人都是产品经理, 画原型图的前一步:设计站点地图 – 人人都是产品经理, 给 DeepSeek 的最后一封催更信 – 人人都是产品经理, 手把手教你用 Claude Code 搭建 AI 营销团队:5 个 Agent、12 项技能,独立完成研究、写作、设计全流程 – 人人都是产品经理, 你以为大模型在学语言?不,它在重新发明语言学 – 人人都是产品经理 所谓Skill,不过是AI时代的工业垃圾 – 人人都是产品经理, 聊一聊内容传播的几个方法 – 人人都是产品经理, 当平台开始吃掉生态:从 OpenClaw 被封杀,读懂 Anthropic 的这盘棋 – 人人都是产品经理, 你装了 10 个 AI 插件,Obsidian 还是一个文件夹 – 人人都是产品经理 关于AI智能体架构演进的系统性思考:从单体试水到多体协同的重构 – 人人都是产品经理, 当“人”变成Skill,我们又该何去何从? – 人人都是产品经理 Mythos 事件:前沿 AI 治理的意外实验 – 人人都是产品经理, 货代CRM:信用与风险管理怎么做,才能把坏账风险拦在放货之前? – 人人都是产品经理, 从HR收集自拍照到员工自助录入——我见证了园区人脸识别从”不可用”到”真好用”的全过程 – 人人都是产品经理 千问闯关AI混沌期:阿里画靶,吴嘉张弓,马云射箭? – 人人都是产品经理,
费茨定律 | 设计师需要知道的设计原则!
大漠飞鹰CYSJ · 2024-11-27 · via 人人都是产品经理

费茨定律是设计方法中常用的一种定律之一,不光是产品设计,在日常生活中也有不少应用。这篇文章,作者从定律本身到案例,为我们详细分享了定律的使用和经验,供大家参考。

设计师在体验过形形色色的产品后,是否这样问过自己:

  • 为什么按钮越大、越容易点击?
  • 为什么主按钮与辅助按钮样式不一致?
  • 为什么相互关联的按钮需要相互靠近摆放?
  • 为什么有些按钮要放在角落?

针对这些问题,我们可以先举一个简单的例子。

下图中,右侧蓝色块代表需触达的目标,直线代表用户到达目标之间的距离。很明显,目标与手指的大小相差无几,在目标较小、距离较远的情况下,误操作的概率很高,用户只有放缓速度、集中精力才能精准触达目标,这也意味着用户需要花费更多的成本才能完成操作。

站在用户角度,设计师可以换种方式思考,是不是将目标放大、或缩短用户与目标之间的距离就可以解决这个问题。在特殊场景中,如果目标不允许被放大、也不可以改变相互之间的距离,那就退而求其次,只要扩大目标的触控热区,也是一种减少用户误操作的有效方式。

现在回到上述问题,其实这些都可以用人机交互中一个非常重要的法则「费茨定律」来解释。接下来我们将从费茨定律的概率、定义以及界面中的应用等几方面深入了解。

一、了解费茨定律

1. 费茨定律的基本概念

1954年,美国空军人类工程学部门主任保罗·费茨(Paul M. Fitts)在对人们操作过程中的运动特征、时间、范围以及准确性进行研究得出:从任意一点到达目标中心位置所需时间与目标的大小和之间的距离有关,即距离越大时间越长、目标越大时间越短。

如下图,看看我们从伸手至拿到咖啡杯的整个过程,杯子的大小、与手之间的距离到底是一个什么样的关系。

▽杯子大小相同、与手之间的距离不同,那么距离越短、花费的时间就越短

▽杯子大小不同、与手之间的距离相同,那么杯子越大、花费的时间就越短

2. 费茨定律公式

在人类工程学中,费茨定律预测了指点设备「移动到目标区域所需的时间」是「设备位置与目标位置的距离」和「目标区域大小」的函数,其数学公式为:T=a+blog2(D/W+1) 。

  • T:移动到目标区域所需的时间;
  • D:指点设备位置与目标之间位置的距离;
  • W:目标区域大小;
  • a、b:为常量,指点设备的物理特性。

如果单从数学公式来看,很多童鞋可能还有些懵,这里先不做专业细致的数学研究,只需记住要点,时间T与距离D成正比、与目标区域W成反比,即:相互之间的距离越短、目标区域越大,所需要的时间就越短。

当然,任何事物都有一定上限,并非目标区域无限大、距离无限近,凡事都有一个度,这就需要我们结合其他原则以及从反复实践中得到最佳结果。

3. 生活中的案例

汽车上的油门和刹车是一个用来诠释费茨定律的经典案例,虽这两个部件同等重要,但从安全角度来讲,刹车的重要性要远远高于油门,错用刹车可能是车祸,而错用油门往往是惨剧、悲剧,扯远了……

油门踏板和刹车踏板的距离很近(D小),并且刹车踏板要比油门踏板大很多(W大),发生紧急情况时,驾驶员可以用最短的时间(T小)把脚从油门踏板移到刹车踏板上,从而达到快速且精准制动的目的。

二、费茨定律的核心切入点

1.以距离为切入点

1)负面操作的距离设定

当我们设计界面和交互时,有时候为了挽留用户、提高转化,会刻意制造操作难度。比如“取消订单”,货拉拉就采用了费茨定律的负面操作,减小目标区域大小并加大与目标之间的距离,将“取消订单”按钮设计得小而隐蔽。

然而,即使如此,仍难以完全避免特殊场景的产生,如用户误操作或等待时间过长等需要取消订单的情况。为了方便有取消订单意愿的用户快速操作,滴滴打车在设计时就缩短了“呼叫车辆”与“取消订单”之间的距离。

2)满足操作习惯的距离设定

在PC端中,右键菜单的设计就是一个很好的例子,用户点击鼠标的位置是明确的起始点,在就近位置弹出菜单可以大大降低目标与起始位置的距离。此外,主流移动端规范中,iOS与Material Design的气泡弹窗菜单也采用了类似的设计,这在许多APP中也很常见。通过借鉴这些设计思路,我们可以更好地优化产品界面和交互,提高用户体验。

另外,在一些功能设计中,有时候我们面临一些具有联动关系的功能场景。这些场景通常非常具体,但具体的案例并不多见。当一个页面功能繁多时,我们往往无法确切知道用户想要做什么。例如,用户点开电商历史订单页面时,可能会想要查看物流、订单号、评价、复购或联系售后等。由于可选择性太多,我们很难确定用户的真实意图。

对于手机这样的小屏设备,拇指最常操作的区域是屏幕右侧中下部。因此,将主要功能操作放在这个区域可以减少操作距离。通过这样的设计策略,我们不仅可以提高用户体验和满意度,还能增强产品的灵活性和易用性。

当一个页面功能繁多时,我们需梳理功能优先级和操作频次数据,优先级高、频次高的操作应结合当前设备的操作习惯,以提升用户操作效率。

以淘宝订单详情页为例,其页面信息丰富,且不同订单状态涉及的功能展示各不相同,但无论页面如何滑动,总有几个关键操作被固定在底部并居右排列。对于那些次要操作放在左侧「更多」里面,以气泡弹窗的形式打开,尽可能的使关键操作符合当前设备的操作习惯。

2. 以尺寸为切入点

1)加大按钮尺寸

对于功能单一、页面内容简单的页面,放大按钮尺寸是一种有效的设计策略。它不仅能丰富页面内容,使其看起来更加饱满,还能提高用户点击按钮的准确性和便利性,进而提升用户体验。这种设计方法尤其适用于那些需要用户快速作出决策的场景,例如Keep的运动页面。

2)加大操作热区

为了平衡视觉关系,我们不能简单地放大所有操作按钮。但可以在保持元素视觉大小不变的情况下,扩大触发操作的范围,即增加热区面积。这样可以提高用户操作的准确性和便利性,进一步提升用户体验。例如,登录时勾选用户服务协议、选择支付方式等。

三、界面中的运用

1. 底部按钮——缩短手指的移动距离

随着智能手机的屏幕越来越大,拇指热区的位置也在发生变化,这使得单手操作左上角的返回按钮变得越来越困难。尤其在iPhone Plus和iPhone X等大屏手机上,这个返回按钮的位置显得有些尴尬。在资讯类应用中,用户需要频繁切换文章,如果返回按钮在左上角,操作难度会增加。

以百度APP详情页为例,将返回按钮放在了底部左下角,通过结合拇指热区,我们可以发现左下角的区域是单手可以轻松到达的。将返回按钮放在底部左下角,可以大大节省用户操作时间,提高用户体验。因此,在设计界面时,应该充分考虑拇指热区的位置和用户的使用习惯,合理布局按钮和功能。

面对顶部返回键单手操作不便和底部返回键容易遗忘的问题,其实还有一些便捷的操作,iOS用户可以按住左侧屏幕边缘向右滑动实现返回上一步操作,而安卓用户则可以使用自带的虚拟返回键。

2. 来电显示-不同场景的区别对待

在iOS系统中,来电提示在锁屏和苏醒状态下的接听方式有所不同。

在锁屏状态下,用户手机的使用场景存在不确定性,为了避免误操作,设计时需要增加操作距离、延长操作时间。因此,采用滑动接听的方式可以有效地增加操作距离,降低误操作的可能性。

而在苏醒状态下,用户已经在使用手机,此时采用滑动操作的距离过长,不够便捷。因此,设计为按钮的样式,用户可以快速点击接听或拒绝来电,从而提高操作效率。这种设计考虑充分运用了费茨定律,为用户提供了更加舒适、便捷的操作体验。

3. 朋友圈编辑-边缘无限大

「边缘目标无限大」的设计理念在移动端的应用中得到了充分体现。以朋友圈编辑为例,删除照片的操作不再需要手动点击删除按钮,只需将照片拖拽到屏幕底部即可完成删除。

这种设计简化了操作流程,使用户在删除图片时更加轻松自如,不再需要小心翼翼地点击。不仅提高了用户体验,也充分展示了「边缘目标无限大」的优势。

4. 手势操作-提高用户操作效率

在安卓和iOS两大操作系统中,长按和侧滑编辑功能在列表页的编辑状态中发挥着重要作用。用户通过长按或侧滑列表,对应的操作将出现在离手指最近的位置,可以快速地激活操作按钮,大大提升了操作效率。

5. 表单设计-距离最后一项字段最近

在表单设计中,按钮的位置是一个重要的考量因素。当表单信息较少时,将按钮设计在最后一个字段下方是一个不错的选择。这是因为用户在填写表单时,通常会按照从上往下的顺序进行。当用户填写到最后一个字段时,鼠标位置刚好位于表单底部附近,此时将按钮设计在附近可以减少用户移动鼠标的时间,提高操作效率。

然而,如果表单信息较多,将按钮设计在下方可能会导致用户在填写一半时找不到按钮,或者需要花费更多时间来操作。在这种情况下,将按钮设计在浏览器下方并固定住,可以确保按钮始终出现在用户的视线范围内,方便用户快速找到并点击。

此外,我们还需要考虑单手使用手机的情况。超过50%的用户习惯使用大拇指进行交互,因此在设计移动端表单按钮时,除了考虑用户填写顺序和“屏幕热区”外,还需要注意按钮的大小。为了方便用户单手操作,我们应该将按钮设计在“屏幕热区”,并在不影响美观的前提下适当增大按钮的大小。

6.隐藏不常用按钮-降低视觉干扰

在设计时,对于不经常使用的按钮或希望增加操作难度的场景,可以考虑将按钮放置在较远的位置或进行隐藏设计。这样可以提高用户操作的门槛,减少不必要的误操作。京东的订单列表就是一个很好的例子,他们将不常用的按钮放在“更多”里面,既方便了后期的功能拓展,也避免了低频操作对用户造成视觉干扰,降低了用户的识别难度。

7.关机-特殊操作的逆向设计

在交UI设计中,反向思考、逆向使用费茨定律的例子屡见不鲜。当不希望用户过于方便地操作时,我们可以采用这种思维方式,增加用户的操作难度。

例如,iOS的关机操作需要用户进行“滑动来关机”,这一设计延长了关机操作时间,提醒用户此操作为不可逆,需谨慎操作。

此外,商业广告中的关闭按钮被设计得很小,且点击区域也和用户习惯相悖,这也是反向使用费茨定律的案例。虽然这些设计可能会影响用户体验,但在商业价值面前,它们仍然被广泛使用。因此,在设计中需要权衡用户体验和商业价值,尽可能避免出现影响用户体验的设计。

四、结语

在设计的道路上,我们会遇到许多“法则”和规律,它们像路标一样指引着我们前进。然而,随着时间的推移,就会逐渐意识到,这些“法则”实际上在塑造我们的思维模式和思考方向。它们更像是一把钥匙,打开了我们脑中的创意宝库。

对于费茨定律,我们不应局限于数学的框架,而应将其视为一种启示,激发我们的设计灵感。以开放的心态去理解它,我们能够打开一个全新的设计世界,更好地满足用户的需求和期望。

提升用户操作效率是设计的核心目标之一,但在实际操作中很容易被忽视。我们应该始终牢记这一目标,通过运用费茨定律等设计原理,创造出直观、高效的用户界面。

以上是笔者对费茨定律在设计中的一些基本认识和心得,虽然所涉及的工作领域有限,但相信这些观点对于从事设计的同行们会有所启发。如果您对费茨定律感兴趣,或者想要深入了解其在实际设计中的应用,欢迎与我交流讨论。

专栏作家

大漠飞鹰;公众号:能量眼球,人人都是产品经理专栏作家。致力于产品需求的驱动、产品体验的挖掘,利用设计的手段为受众用户带来更好的体验,即好看、好用。

本文原创发布于人人都是产品经理,未经许可,禁止转载。

题图来自 Unsplash,基于 CC0 协议。

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。