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.
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.
网易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.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.
