UX | 锤子前端

#UX

Fri, 30 Oct 2026 07:37:25 GMT

#UX

子菜单需要一个三角形
https://x.com/a1x45h/status/2115805964725367180?a=gwiH1zIFoji-uGHK9A0&s=19

Bookmark this ⬇️

Submenus need a safe triangle.

When you move from a menu item to its submenu, you rarely go straight across. You cut diagonally, and that path crosses the items below. A bad imp…

CSS 技巧：防止布局在滚动条出现时横向跳动

Fri, 30 Oct 2026 01:36:44 GMT

CSS 技巧：防止布局在滚动条出现时横向跳动。
#CSS #UX

html {
  scrollbar-gutter: stable;
}

https://x.com/denicmarko/status/2115765989883433445?a=o3joFmAEkpM1zSiEQ0k&s=19

X (formerly Twitter)

Marko Denic (@denicmarko) on X

CSS tip: stop your layout from jumping sideways when the scrollbar appears.

html {
scrollbar-gutter: stable;
}

The browser reserves space for the scrollbar ahead of time, so nothing shifts.

《设计高性能表单：5个基于研究的UX原则》

Thu, 26 Mar 2026 00:03:13 GMT

《设计高性能表单：5个基于研究的UX原则》

标签：#UX设计 #表单设计 #前端开发 #Web可用性 #交互设计 #用户研究

总结：

本文基于Baymard Institute等权威机构的可用性研究，提出了5个提升表单性能的核心UX原则：精简字段数量、采用单列布局、明确标注必填与选填字段、实施正确的即时验证时机，以及优化移动端输入体验。这些原则能有效降低用户放弃率（约26%用户因表单复杂而放弃），提升完成效率与满意度，是构建高转化率表单的设计基石。

文章要点：

- 精简字段数量：平均电商结账流程包含11.3个字段，但高性能网站仅需6-8个即可完成交易。多余的字段会增加认知负担，约26%的用户因表单复杂而放弃购买。建议移除或折叠可选字段，除非确有必要

- 单列布局更友好：多列布局在静态设计稿中看起来美观，但可用性测试表明用户容易误读字段顺序。人眼不会自然地"之字形"扫描多列表单，单列布局提升可读性，支持自然阅读习惯，在桌面和移动端都表现可靠

- 明确标注必填与选填字段：不要假设用户能推断哪些字段是必填的。研究显示，近三分之一用户在仅标注选填字段时会遗漏必填项。可靠的做法是统一标注所有字段状态（"必填"或"选填"），标签应紧邻字段标签放置

- 即时验证的时机很重要：正确实施的即时验证可提升表单成功率约22%，缩短完成时间40%以上，提高用户满意度30%以上。但不要在每输入一个字符时就验证（会增加认知负荷），建议在失焦时或字段完成后验证。错误提示应具体说明问题及修正方法，验证指示器应紧邻字段显示

- 优化移动端输入体验：避免将电话号码等输入拆分为多个字段，这会提高错误率和完成时间。确保触发合适的键盘类型（数字键盘用于卡号、邮箱键盘用于邮箱输入）。启用自动填充功能，Google研究显示这可减少30%以上的完成时间。允许粘贴完整值，不要阻止粘贴操作

文章URL：

https://designmybit.com/designing-high-performance-forms-5-research-backed-ux-principles/

The UX Bit

Designing high-performance forms: 5 research-backed UX principles - The UX Bit

Forms often cause more abandonment than any other UI component.

UX research quantifies this: many checkout flows require 11‑13 fields, though studies show only 6‑8 are necessary when well optimised.

Here are five principles grounded in peer‑reviewed…

#UX #文章模态框和非模态框，这两者的区别以及如何使用？

Fri, 24 Oct 2025 10:25:11 GMT

#UX #文章模态框和非模态框，这两者的区别以及如何使用？

https://www.a11y-collective.com/blog/modal-vs-dialog/

The A11Y Collective

When to Use Modal vs Dialog Components

Confused about modal vs dialog components? Discover implementation patterns, accessibility guidelines, and best practices for creating user-friendly interfaces.

#UX #文章主要介绍了ARIA属性在无障碍网络应用中的关键作用，特别是aria-selected、aria-pressed、aria-current和aria-checked这四个容易混淆的属性

Fri, 24 Oct 2025 10:20:15 GMT

#UX #文章主要介绍了ARIA属性在无障碍网络应用中的关键作用，特别是aria-selected、aria-pressed、aria-current和aria-checked这四个容易混淆的属性。文章详细解释了每个属性的用途、适用场景、常见值以及最佳实践，同时指出了开发者在使用这些属性时常见的错误，并强调了正确使用ARIA属性对于确保辅助技术准确传达界面状态的重要性。

https://www.tpgi.com/what-state-aria-in/

TPGi — a Vispero company

What State ARIA In? - TPGi — a Vispero company

This article explains how to use ARIA to indicate the difference between selected, pressed, current, and checked states of elements.

#UX 为初学者提供了关于ARIA（Accessible Rich Internet Applications）的全面指南，旨在帮助开发者更好地理解和使用ARIA来提升网页的无障碍性

Wed, 18 Jun 2025 00:57:12 GMT

#UX 为初学者提供了关于ARIA（Accessible Rich Internet Applications）的全面指南，旨在帮助开发者更好地理解和使用ARIA来提升网页的无障碍性。

https://www.smashingmagazine.com/2025/06/what-i-wish-someone-told-me-aria/

Smashing Magazine

What I Wish Someone Told Me When I Was Getting Into ARIA — Smashing Magazine

[Accessible Rich Internet Applications (ARIA)](https://www.w3.org/WAI/standards-guidelines/aria/) is an inevitability when working on web accessibility. That said, it’s everyone’s first time learning about ARIA at some point.

#UX 一些小细节参考网站

Tue, 17 Jun 2025 12:58:09 GMT

#UX 一些小细节参考网站

https://builtformars.com/ux-bites

Built for Mars

1,400+ Examples of Exceptional UX

Discover the best library of UX examples that showcase ideas, tricks, experiments and nudges. Convert better and churn less by copying the pros.

#UX Laws of UX

Wed, 12 Mar 2025 01:24:31 GMT

#UX Laws of UX

https://lawsofux.com/

Laws of UX

Home | Laws of UX

Laws of UX is a collection of best practices that designers can consider when building user interfaces.

#UX 影响用户体验的106 个认知偏见和原则

Wed, 12 Mar 2025 00:59:02 GMT

#UX 影响用户体验的106 个认知偏见和原则

https://growth.design/psychology

growth.design

🧠 106 Cognitive Biases & Principles That Affect Your UX | Growth.Design

A complete list of cognitive biases and design principles. Tons of product examples, tips and checklists to improve your user experience.

#UX #文章 CSS 中的各种颜色格式，包括 hex（十六进制）、RGB、HSL、LCH 等，并探讨了它们的使用场景、优缺点以及现代 CSS 中颜色格式的最新发展

Tue, 11 Mar 2025 13:53:52 GMT

#UX #文章 CSS 中的各种颜色格式，包括 hex（十六进制）、RGB、HSL、LCH 等，并探讨了它们的使用场景、优缺点以及现代 CSS 中颜色格式的最新发展。 https://www.joshwcomeau.com/css/color-formats/

Joshwcomeau

Color Formats in CSS - hex, rgb, hsl, lab • Josh W. Comeau

CSS gives us so many options when it comes to expressing color—we can use hex codes, rgb, hsl, and more. Which option should we choose? This turns out to be a surprisingly important decision! In this article, we'll take a tour of color formats in CSS, and…

#UX #文章色彩空间的介绍

Tue, 11 Mar 2025 13:51:43 GMT

#UX #文章色彩空间的介绍

https://ericportis.com/posts/2024/okay-color-spaces/

Ericportis

Okay, Color Spaces — ericportis.com

#UX 设计实践

Tue, 11 Mar 2025 13:24:36 GMT

#UX 设计实践

https://goodpractices.design/

Design good practices

Design guidelines following good practices that you can apply to product design, from components to design systems.

#UX #文章产品设计的本质

Tue, 11 Mar 2025 13:21:48 GMT

#UX #文章产品设计的本质

https://jamiemill.com/blog/elements-of-product-design/

#文章 #UX #CSS 「CSS 文本使用 text-wrap:balance 进行平衡」对于长段落还有新特性里面的「CSS text-wrap: pretty」，如果在 #React 项目中需求一种兼容性更好的方案，可以参考「React Wrap Balancer」

Wed, 11 Dec 2024 15:04:18 GMT

#文章 #UX #CSS 「CSS 文本使用 text-wrap:balance 进行平衡」对于长段落还有新特性里面的「CSS text-wrap: pretty」，如果在 #React 项目中需求一种兼容性更好的方案，可以参考「React Wrap Balancer」。

Ishadeed

CSS Text balancing with text-wrap:balance

A look at text wrap balancing in CSS

#文章 #UX 「如何选择正确的定性研究方法」关于如何选择正确的定性研究方法的指导，包括何时进行定性研究、不同的数据收集方法以及如何根据研究目标选择合适的方法

Wed, 11 Dec 2024 10:00:06 GMT

#文章 #UX 「如何选择正确的定性研究方法」关于如何选择正确的定性研究方法的指导，包括何时进行定性研究、不同的数据收集方法以及如何根据研究目标选择合适的方法。研究深度和严谨性的重要性，定义研究声明和目标，区分生成性与评估性研究，并提供了一个UX研究方法的速查表，以帮助读者在时间紧迫时快速参考。

#UX #文章「战略性用户体验 UX 研究的重要性」基于用户研究来改进产品而不是运气和想象

Wed, 11 Dec 2024 09:54:21 GMT

#UX #文章「战略性用户体验 UX 研究的重要性」基于用户研究来改进产品而不是运气和想象。另外还有一篇辩证讨论「为什么“任何人都可以进行用户研究”的想法是一个糟糕的想法」用户研究和调研也是一门学问，需要根据实际探讨。

Medium

Strategic UX research doesn’t need fancy tools

How to align your startup around what matters to your users

#UX #文章 7个简单的按钮设计技巧，以提升UI/UX设计项目中按钮的点击率和用户体验

Thu, 07 Nov 2024 14:35:16 GMT

#UX #文章 7个简单的按钮设计技巧，以提升UI/UX设计项目中按钮的点击率和用户体验。这些技巧包括：
1. 避免按钮文本换行；
2. 不使用禁用按钮（分情况）；
3. 使用动作动词作为按钮标签；
4. 保持按钮对齐；
5. 使用标准且一致的按钮布局；
6. 突出主要操作按钮；
7. 避免在同一按钮中使用两个图标。

https://medium.com/design-bootcamp/7-simple-button-design-tips-that-make-a-big-impact-3cefcdc2d9a2