【信息设计】设计模式指南：学习指南

This article lists some of our content that provides specific guidelines on designing a variety of interface patterns, from toggle switches to navigations tabs.

If you’re new to designing interfaces, check out the 10 usability heuristics for user-interface design, which are foundational principles for interaction design. From there, use the resources below for guidance on designing specific interface patterns.

A Note on Interface Guidelines

After a couple of years, are these guidelines still valid? These usability guidelines are dependent mostly on human behavior, which changes slowly, and a lot less on the specifics of a given technology, which can change quickly. As you adopt the following guidelines in your own work, consider the core user behaviors and usability principles at play (not just the technology). Don’t throw out old findings because of their age.

Input Controls

This section covers input elements like checkboxes, toggle switches, input steppers, and more.

Number	Link	Format	Description
1	Checkboxes vs. Radio Buttons	Article	12 guidelines for when to use a checkboxes and radio button
2	Toggle-Switch Guidelines	Article	Related elements and 4 guidelines for use
3	Checkboxes vs. Switches in Forms	Video	Guidelines for when to use checkboxes and switches in forms
4	Design Guidelines for Input Steppers	Article	Benefits and drawbacks of input steppers along with 8 design guidelines
5	Date-Input Form Fields: UX Design Guidelines	Article	Date-input patterns and 7 design guidelines
6	Split Buttons: Definition	Article	7 tips for designing split buttons
7	Input Controls for Parameters: Balancing Exploration and Precision with Sliders, Knobs, and Matrices	Article	Guidelines for designing specialized, application-specific input controls
8	A Checklist for Designing Mobile Input Fields	Article	14 guidelines for designing mobile input fields
9	Easier Input on Mobile Devices	Video	Design recommendations for input fields on mobile

Forms and Wizards

These resources provide guidelines for designing effective web forms and wizards.

Number	Link	Format	Description
10	Website Forms Usability: Top 10 Recommendations	Article	Well-established but frequently ignored UX design guidelines for web forms
11	How to Report Errors in Forms: 10 Design Guidelines	Article	10 guidelines to help users recover from errors in forms
12	Wizards: Definition and Design Recommendations	Article	Guidelines for designing usable wizards

Tooltips, Dialogs, Instructional Overlay

In this section, we provide resources on tooltips, modal and nonmodal dialogs, popups, and instructional overlays.

Number	Link	Format	Description
13	Tooltip Guidelines	Article	Guidelines and recommendations for using tooltips on desktop sites
14	Tooltips in the User Interface	Video
15	Modal & Nonmodal Dialogs: When (& When Not) to Use Them	Article	Disadvantages and guidelines for using modal dialogs
16	UI Modes and Modals	Video	Modes and modals: definitions and when they may be appropriate
17	Popups: 10 Problematic Trends and Alternatives	Article	Factors to consider when using popups and realistic alternatives
18	Popup Problems	Video
19	Bottom Sheets: Definition and UX Guidelines	Article	Guidelines for designing bottom sheet overlays that offer contextual details or controls
20	Instructional Overlays and Coach Marks for Mobile Apps	Article	Tips for designing helpful and noticeable instructional overlays
21	Mobile-App Onboarding: An Analysis of Components and Techniques	Article	Guidelines for designing and implementing various types of mobile-app onboarding
22	3 Design Considerations for Effective Mobile-App Permission Requests	Article	Considerations and recommendations for designing dialogs that request mobile-app permissions

Icons and Indicators

This section lists resources relevant to icons and other visual indicators such as progress indicators.

Number	Link	Format	Description
23	Icon Classification: Resemblance, Reference, and Arbitrary Icons	Article	3 categories of icons and considerations for designing them
24	Icon Usability	Article	UX guidelines to ensure that your users recognize your icons and know what they mean
25	Tips for Icon Usability	Video
26	Accordion Icons: Which Signifiers Work Best?	Article	Research findings and 3 recommendations for using accordion icons
27	Visual Indicators to Differentiate Items in a List	Article	Recommendations for using visual indicators to attract attention to certain list elements
28	Progress Indicators Make a Slow System Less Insufferable.	Article	Recommendations for communicating system status
29	Mask Interaction Delays with Progress Indicators	Video	Recommendations for communicating system status
30	Skeleton Screens 101	Article	Skeleton screens: definition and benefits of using one

These resources are specific to designing menus like drop downs and mega menus.

Number	Link	Format	Description
31	Menu Design: Checklist of 15 UX Guidelines to Help Users	Article	Guidelines for designing effective menus
32	Navigation Menus – 5 Tips to Make Them Visible	Video	5 design guidelines to increase the visibility of navigation menus
33	Mega Menus Work Well for Site Navigation	Article	Guidelines for designing large navigation menus
34	Dropdowns: Design Guidelines	Article	Use cases and 8 guidelines for dropdowns
35	Listboxes vs. Dropdown Lists	Article	Advantages, disadvantages, and tips for using listboxes and dropdown lists
36	Contextual Menus: Delivering Relevant Tools for Tasks	Article	10 tips for designing effective contextual menus
37	Expandable Menus: Pull-Down, Square, or Pie?	Article	Design considerations for expandable menus

This list of resources covers a variety of general navigation controls like breadcrumbs, links, and footers.

Number	Link	Format	Description
38	Breadcrumbs: 11 Design Guidelines for Desktop and Mobile.	Article	Insight on presenting breadcrumbs
39	Guidelines for Visualizing Links	Article	Established guidelines for communicating web links
40	Back-to-Top Button Design Guidelines	Article	UX guidelines for back-to-top links that help users navigate long pages
41	In-Page Links for Content Navigation	Article	Guidelines on in-page links vs. accordions and tabs during content navigation
42	Accordions on Desktop: When and How to Use.	Article	Definition of accordions and when to use them on desktop
43	Accordions: 5 Scenarios to Avoid	Video	Definition of accordions and when to use them on desktop
44	Accordions on Mobile	Article	Definition of accordions and when to use them on mobile
45	Accordions on Mobile	Video	Definition of accordions and when to use them on mobile
46	Tabs, Used Right	Article	12 design guidelines for tab controls
47	Footers 101: Design Patterns and When to Use Each	Article	Common footer components and recommendations on when to use each
48	Mobile Subnavigation	Article	Design recommendations for mobile subnavigation elements
48	Local Navigation Is a Valuable Orientation and Wayfinding Aid	Article	Guidance for designing effective local navigation
49	Infinite Scrolling: When to Use It, When to Avoid it	Article	When to use infinite scrolling vs. pagination vs. a Load more button
50	3 Alternatives to Infinite Scrolling	Video
51	Vertical Navigation	Video	Insights on showing navigation menu options in a vertical-list format

This list of resources covers in-page navigation controls like scrolljacking and table of contents.

Number	Link	Format	Description
52	Scrolljacking 101	Article	Scrolljacking: definition and best practices
53	Scroll Fading 101	Article	Scroll fading: definition and best practices
54	Table of Contents: The Ultimate Design Guide	Article	Table of contents: placement and styling guidelines
55	Table of Contents on Mobile	Video	Guidelines on designing table of contents on mobile

Search

In this list, we provide guidelines for visualizing and communicating search components.

Number	Link	Format	Description
56	Search: Visible and Simple	Article	Foundational search design principles
57	Site Search Suggestions	Article	Tips for designing the search feature on your site
58	Designing Search Suggestions	Video	Tips for designing the search feature on your site
59	3 Guidelines for Search Engine “No Results” Pages	Article	Tips for turning zero search results into an opportunity for content discovery
60	The Magnifying-Glass Icon in Search Design: Pros and Cons	Article	11 recommendations for designing with the magnifying-glass icon
61	Intranet-Search Essentials	Article	11 design practices on intranet-search and how to assess its success
62	Enriched Site-Searc3h Suggestions: Rarely Used	Article	Common implementation issues with enriched search suggestions

Errors

This list of resources covers a variety of guidelines around error messaging and how to design interfaces to prevent users from making errors.

Number	Link	Format	Description
63	Error-Message Guidelines	Article	Guidelines for designing error messages that are visible, respect users and provide constructive communication
64	An Error Messages Scoring Rubric	Article
65	Hostile Patterns in Error Messages	Article	Guidelines to avoid overly aggressive error prevention and recovery
66	Error Handling on Mobil Devices: Showing Alerts	Video	Pitfalls of using alert dialogs to signal errors on mobile devices
67	Confirmation Dialogs Can Prevent User Errors - If Note Overused	Article	8 recommendations for using confirmation dialogs to prevent user errors

Privacy and Ethics

This list of resources covers a variety of guidelines around design interfaces that follow ethical practices and respect user privacy.

Number	Link	Format	Description
68	Cookie Permissions 101	Article	Guidelines for designing cookie permission overlays that respect user privacy and are user friendly
69	Passwordless Accounts: One-Time Passwords (OTPs) and Passkeys	Article	Password developments making login and registration easier and quicker
70	Passwordless Accounts	Video
71	Deceptive Patterns in UX: How to Recognize and Avoid Them	Article	Deceptive patterns: definition and how to avoid them

热门内容

今日:

总体:

最近浏览：

热门内容

今日:

总体:

最近浏览：

【信息设计】设计模式指南：学习指南

category

In This Article:

A Note on Interface Guidelines

Input Controls

Forms and Wizards

Tooltips, Dialogs, Instructional Overlay

Icons and Indicators

Menu Design

Site Navigation Elements

In-Page Navigation

Search

Errors

Privacy and Ethics

Tags

最新内容

Tags