Mobile Development 13 min read

15 Essential UI Details Every Mobile App Designer Shouldn’t Miss

This article outlines fifteen often‑overlooked UI design details—from consistent icon styles and balanced icon sizing to proper use of shadows, color palettes, typography hierarchy, and layout principles—providing mobile app designers with practical guidelines to create visually coherent, user‑friendly interfaces.

网易UEDC
网易UEDC
网易UEDC
15 Essential UI Details Every Mobile App Designer Shouldn’t Miss

Visual Presentation Issues

01. Unified Icon Design Style

Icon design is a major component of app design. Styles include linear, filled, flat, hand‑drawn, and skeuomorphic icons. Whatever style is chosen, maintain consistency across the app; use the same style for the same module, e.g., consistent stroke width for linear icons.

Icon colors should also be consistent. If using different hues, ensure overall harmony and avoid excessive saturation or brightness differences that disrupt visual balance.

02. Visual Balance of Icon Sizes

When multiple icons appear on the same screen, maintain overall visual balance. Not all icons need identical dimensions; adjust sizes based on visual weight—e.g., a square may appear larger than a circle of the same size.

03. Optimize Dividers

Dividers separate information layers and serve decorative purposes. Choose lighter colors than text; avoid dark dividers unless required by specific product scenarios.

04. Proper Use of Shadow Color and Opacity

Shadows add depth to buttons, cards, etc. Adjust shadow color and opacity according to background: light backgrounds use lighter shadow colors with 10‑40% opacity; dark backgrounds use darker shadows with 20‑40% opacity. Shadows should enhance depth without compromising visual balance.

05. Avoid Over‑Decoration for Simplicity

Excessive design distracts users. Reduce unnecessary elements to let information stand out, resulting in a cleaner, more focused interface.

06. Consistent Image Proportions and Horizon Lines

When displaying multiple characters, keep image size ratios consistent and align eye lines to maintain visual balance.

07. Limit Color Count in an Interface

Ideally use about three colors per screen. More than three requires strong design skill; control color weight and use analogous or complementary schemes appropriately.

08. Reasonable Design Contrast

Contrast helps distinguish modules and enrich hierarchy. Use varying brightness within the same hue or different hues to create rhythm.

09. Improve Image Quality

High‑quality images enhance overall tone. Refine images through cropping, curve, and color adjustments to ensure visual consistency.

Information Transmission Issues

10. Clearly Convey Icon Meaning

Icons should supplement text, not replace it unless they can independently convey meaning to users.

11. Correct Button State Representation

Button design must accurately reflect state; avoid colors that mislead users about enabled/disabled status.

12. Proper Text Hierarchy

Handle large blocks of copy by using size, color, whitespace, and segmentation to create clear hierarchy and improve readability.

13. Rational Use of Lines and Color Blocks for Segmentation

Lines separate similar elements; color blocks separate different categories. Choose segmentation method based on information relationships.

14. Anticipate Maximum Information Presentation

Design layouts for the maximum amount of information, not the minimum, to avoid poor user experience when content expands.

15. Use Prompts to Boost Reading Efficiency

Employ numbers, letters, icons, or color blocks as prompts to help users locate information quickly.

Conceptual Expression Issues

18. Consistent Corner Radius

Maintain uniform corner radii across the same interface; avoid mixing rounded and sharp corners.

19. Design Elements Should Match User Psychology

Ensure design changes align with user habits; innovative interactions require research and testing.

20. Consistent Design Expression

Use uniform design for similar modules; unnecessary variation can increase cognitive load.

21. Don’t Transfer Web Habits to App Design

App design differs from web; adopt mobile‑centric interaction patterns.

22. Simplify Form Design

Group similar fields and use progressive disclosure to reduce perceived effort.

23. Use Illustrations in Empty Screens

Illustrations add emotional appeal and improve user experience on blank pages.

24. Fill Designs with Real Information

Use authentic data and images in mockups to present realistic solutions.

Conclusion

App design involves many subtle details; continuous reflection and adaptation are essential for creating modern, user‑friendly products.

mobile UIUXvisual designapp designicon designlayout principles
网易UEDC
Written by

网易UEDC

NetEase UEDC aims to become a knowledge sharing platform for design professionals, aggregating experience summaries and methodology research on user experience from numerous NetEase products, such as NetEase Cloud Music, Media, Youdao, Yanxuan, Data帆, Smart Enterprise, Lingxi, Yixin, Email, and Wenman. We adhere to the philosophy of "Passion, Innovation, Being with Users" to drive shared progress in the industry ecosystem.

0 followers
Reader feedback

How this landed with the community

Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.