UI Design Basics: From Layout to Interaction, How to Create Truly Usable Interfaces

Have you ever encountered an interface where buttons are crammed together, colors are harsh, and you have no idea what happened after clicking? Novice designers often get caught up in visual impact, overlooking the most fundamental design principles—what users truly need are clear guidance and smooth operations. UI design is not art; it's a means to solve problems. If you're struggling with interfaces that "look good but don't work well," these 5 basics can help you avoid 80% of the pitfalls.

Layout: Put Information Priority on Screen

When users scan an interface, what do they see first? It depends on the layout. Good layout is not about uniform arrangement but guiding the eye rhythmically.

1. Establish Clear Visual Hierarchy

Differentiate primary and secondary elements through position, size, and contrast. Specific practices:

• Enlarge or place important content at the top: Put core action buttons (e.g., "Buy Now") in the upper-middle area of the page, where the eye naturally lands.
• Use whitespace to separate information: Don't crowd elements; leave at least 8px spacing so each module forms its own area.
• Reduce reading burden: Keep line length under 60 characters; separate paragraphs with labels or dividers instead of stacking text.

2. Follow the "Proximity Principle"

Group related functions together and separate unrelated ones with spacing. For example, place the search box next to filters, not mixed with ad slots. Users shouldn't have to wonder "why are these two things together."

Color and Contrast: Don't Strain the Eyes

Color directly affects mood and readability. Many interfaces fail not because they're ugly, but because they're hard to read.

1. Limit the Color Palette

Primary + secondary + accent, usually no more than 3 colors. When using colors:

• Primary color occupies 70%: Use low-saturation neutrals or brand colors for backgrounds and large blocks.
• Use accent color only for key actions: e.g., submit buttons, link text. No more than 2 highlighted areas per page.
• Avoid large areas of pure white and pure black: Pure black (#000) can cause glare on screens; use dark gray (#333) for text; soften white backgrounds with light gray (#f5f5f5) to reduce contrast.

2. Meet Accessibility Contrast Ratios

Per WCAG standards, body text must have a contrast ratio of at least 4.5:1 against the background, and large text at least 3:1. Use tools like Stark or WebAIM to check. If color-blind users can use it normally, your design passes.

Typography: Readability Over Aesthetics

90% of information in UI is conveyed through text. Font choice directly determines reading efficiency.

1. Font Size and Line Height

• Body text at least 14px (16px on mobile), titles 2-4 steps larger.
• Line height is 1.5x font size: for 16px font, line height 24px. Too tight or too loose affects skimming.
• Don't use decorative fonts for body text: Sans-serif is mainstream, e.g., Noto Sans, PingFang SC.

2. Control Font Weight

Use only Regular, Medium, and Bold. Light is too thin for mobile; ExtraBold should be used sparingly on titles, as overuse looks coarse.

Interaction Feedback: Every Click Deserves a Response

After an action, users need immediate feedback. An interface without feedback is like throwing a stone into the sea—anxiety-inducing.

1. Click Feedback

• Button state changes: hover color change, click shrink (or darken), disabled gray. Use micro-animations to signal.
• Loading states: Tasks exceeding 300ms must show a loading indicator (spinner or progress bar). Short tasks use Toast notifications.
• Error messages: Display them in real-time below input fields, not after submission. Use red and tell the user "Invalid email format," not just "Input invalid."

2. Action Confirmation

Risky actions (e.g., delete, submit order) require a second confirmation: popup with clear buttons ("Confirm Delete" instead of "OK"). Also provide an undo option, e.g., "Sent, you can undo" clickable within 5 seconds.

Consistency: Users Shouldn't Have to Relearn

Interaction logic should be consistent across the entire product (and even across products). Every exception adds confusion.

1. Visual Consistency

• Unified component styles: All buttons have the same corner radius; all icons share the same style (outline or filled, not mixed).
• Spacing system: Set a base unit (e.g., 4px or 8px); all paddings and margins are multiples of that unit.
• Semantic colors: Red always means error/warning; green means success. Don't change colors for aesthetics.

2. Interaction Consistency

• Back navigation: Use a top-left back arrow or right swipe gesture for full-screen pages consistently.
• Form behavior: After input, does clicking "Next" auto-advance, or is manual click required? Standardize across the site.

Master these basics, and your interface will shift from "good-looking but not useful" to "good-looking and functional." In real projects, many teams establish design guidelines or component libraries to ensure consistency. For example, Xiyue Company creates comprehensive specifications covering layout, color, typography, and interaction feedback for client UI design, ensuring the final interface passes user testing. If you're honing your design skills, consider running usability tests regularly—let real users perform core tasks, record where they get confused, then optimize using the basics in this article.

Design basics are the foundation; without them, even the flashiest ideas are castles in the air. Next time you work on an interface, ask yourself: Can users find the button they want within 3 seconds? Is there clear feedback after an action? If not, go back to basics and adjust.