锤子前端

Now vibe coding, so learning hammer FE ?

Search: #UX

  2. 锤子前端

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

    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
    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.

    CSSUX

  3. 锤子前端

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

    《设计高性能表单：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
    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设计表单设计前端开发Web可用性交互设计用户研究

  4. 锤子前端

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

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

    https://www.a11y-collective.com/blog/modal-vs-dialog/
    The A11Y Collective
    When to Use Modal vs Dialog Components
    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文章

  5. 锤子前端

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

    #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
    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文章

  6. 锤子前端

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

    #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
    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

  10. 锤子前端

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

    #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
    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文章

  14. 锤子前端

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

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

    文章UXCSSReact

  15. 锤子前端

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

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

    文章UX

  16. 锤子前端

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

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

    UX文章

  17. 锤子前端

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

    #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
    Medium
    7 Simple Button Design Tips That Make a Big Impact
    7 Simple Button Design Tips That Make a Big Impact
    While you are working on a UI/UX design project, I have developed a set of practical tips for designing a clickable button that helps me…

    UX文章