This article explains how modern UI designers extend their role beyond mobile apps to include PC, VR/AR, automotive systems, and interactive art, illustrating the design process through real project cases that show background research, high‑fidelity mockups, and user‑experience strategies.
This article explains the concept of information accessibility, why it matters for a cleaning‑staff app, the specific barriers faced by older workers, and the design solutions—including optimal font size, adjustable text, color contrast, clear icons, simplified information, and multimodal feedback—that were implemented to create a more inclusive user experience.
This article explains why a design system is essential, outlines the Shufang case study, and details practical steps—tool selection, color palette, base styles, icon library, componentization, global rules, and brand language—to create a scalable, consistent UI framework.
This article walks readers through recreating the original Python alien‑invasion game, then details a step‑by‑step overhaul that adds a polished UI, scalable monster mechanics, multiple maps, and an in‑game shop, complete with code snippets and visual examples.
This article analyzes 2021 design trends for the Meiyou app, covering bright saturated colors, large rounded cards, light gradients, frosted‑glass effects, warm icon palettes, 3D graphics, data visualization, privacy‑focused features, intelligent interactions, and a life‑like emotional tone.
This article reports an eye‑tracking study conducted on a short‑video app to uncover users' visual strategies, evaluate the impact of title and recommendation layout variations, and identify subtle usability issues that traditional methods miss, providing data‑driven guidance for product design decisions.
This article walks through the complete process of creating a high‑impact visual dashboard for large‑screen displays using FineReport, covering tool selection, data preparation, report creation, design, visual polishing, and adding dynamic effects.
Although many developers criticize Tkinter and PyQt5 for producing unattractive interfaces, this article explains that functionality is prioritized over aesthetics, draws parallels between PyQt5 widgets and web HTML/CSS/JS components, and offers practical tips—design prototypes, leveraging QSS, and using widget properties—to dramatically improve Python desktop GUI appearance.
This article explores the rapid rise of commercial VR in the post‑COVID era, explains XR concepts, outlines the unique challenges of mobile VR interfaces for real‑estate tours, and details a design overhaul that improves aesthetics, flexibility, and immersive user experience.
This guide outlines a comprehensive UI standard design process—from requirement analysis and interaction design to visual design, design system creation, and implementation tracking—providing UI, interaction, and experience designers with structured steps, evaluation criteria, and best‑practice principles to deliver business‑driven, high‑quality products.
This article explains the concept of UI design codification, why it matters in modern cloud‑based development, outlines the essential elements and workflow, and details the Unflow DSL—including its SEE‑DO‑REACT pattern, atomic‑design decomposition, and Flex‑based layout system—while providing concrete code examples and repository links.
This article walks you through creating impressive big‑screen visual dashboards using FineReport, covering tool selection, data preparation, decision‑report setup, dataset creation, layout design, visual polishing, dynamic effects, and final preview to help you deliver compelling data visualizations efficiently.
This article explains the purpose of dark mode, outlines design principles such as layer hierarchy, color contrast, saturation, text opacity, and state representation, and distinguishes dark mode from night mode, providing practical guidelines for creating accessible and visually appealing dark‑theme interfaces.
This article chronicles Susan Kare’s journey from a sculptor to Apple’s pioneering visual designer, detailing her interview, the hand‑drawn pixel‑icon process, the creation of iconic fonts like Chicago, and the lasting impact of her work on modern user interfaces.
This article explores the challenges of displaying negative or "less‑is‑better" metrics with progress bars, examines real‑world examples such as remaining storage, countdowns, and expense tracking, and proposes UI patterns like inverted bars, gauges, segmented steps, and clear textual cues to improve user understanding.
This article outlines essential watchOS app design guidelines, covering three core principles—lightweight interactions, holistic hardware‑software integration, and personal communication—along with gestures, haptic feedback, cross‑device interaction, layout, typography, color, UI components, and notification strategies to help designers create effective wearable experiences.
This article explores why highlighting key information matters, outlines four main goals, presents five practical design methods such as layout, contrast, radiation effect, visual guidance and prompts, and offers validation techniques like 5‑second tests, click tests, A/B testing and eye‑tracking to ensure effectiveness.
This article surveys the 2021 UI/UX design trends—including Glassmorphism, 3D elements, Dark Mode, real‑photo integration, and Colorless UI—explaining their origins, key characteristics, and why designers should consider adopting them to create richer, more engaging digital experiences.
Microsoft’s Windows 10 Dev Build 21343 introduced new Fluent Design System icons for File Explorer, but users criticized the mismatched look because the Explorer UI itself wasn’t updated, leading to a stark contrast with other operating systems that integrate their icon sets more cohesively.
This article outlines four practical dimensions—goal orientation, refinement, consistency, and innovation—that designers can self‑assess to increase the likelihood of their work being approved, offering concrete methods and visual examples for each.
This guide walks UI designers through a three‑stage workflow—pre‑design preparation, in‑process creation, and post‑design delivery—offering practical steps, checklists, and visual references to help newcomers produce efficient, user‑focused designs.
This article explains the architecture and design of Deepin's desktop operating system, covering its core components, programming languages, desktop environment layers, display manager, session daemons, UI services, bundled applications, and the rationale behind building a custom desktop environment for better user experience.
A detailed case study shows how clarifying user scenarios, simplifying page modules, and enhancing visual hierarchy on a used‑car valuation result page increased high‑quality leads by over 50% and doubled daily revenue.
This article explains practical visual design principles—gravity, reading direction, visual tension, whitespace, and balance—showing how each influences user perception and offering concrete examples that designers can immediately apply to improve UI experiences.
This case study explores how Tianxing Bank’s virtual banking app redesigns financial digit presentation and input through custom typography, a gesture‑based SmartSlider, and behavior‑driven design principles, achieving enhanced usability, visual harmony, and recognition across mobile platforms.
This article outlines the full workflow of a game art team, covering its organizational structure, each phase of game development from project initiation to post‑launch, and the detailed art production steps—including style definition, 2D and 3D creation, UI animation, special effects, asset integration, testing, and launch.
This article examines the evolution of interface design tools, compares Photoshop, Sketch, and Figma, and explains how Figma’s browser‑based, cloud‑native collaboration, component system, and community resources are reshaping UI design workflows for individuals and teams.
This guide explains how Tencent’s car‑embedded mini‑programs address the unique constraints of in‑vehicle infotainment by outlining experience highlights, design principles, interaction rules, visual standards, implementation steps, and future outlook for creating safe, efficient, and user‑friendly automotive interfaces.
This case study details how JD.com’s ranking page for the 618 promotion leveraged data‑driven navigation, visual redesign, pixel‑perfect front‑end techniques, and component‑based development to boost click‑through rates, conversion, and overall GMV while outlining future optimization directions.
This article draws analogies between ear‑phone amplifiers and front‑end development, exploring how hardware amplification concepts can illuminate UI and interaction design, reviewing Apple’s UI evolution, core animation, and the imgcook platform for intelligent, variable UI generation.
In this in‑depth interview, senior designer Liang Yulong shares his five‑stage design career, contrasts blockchain UI with traditional finance, explains the visual shift from crypto to fast‑play games, and offers advice on cross‑industry growth, skill development, and recommended reading.
This case study details the redesign of a membership center, covering project background, user‑driven design thinking, visual language upgrades, reusable component development, and the resulting improvements in user experience, decision efficiency, and paid conversion rates.
Marking the 25th anniversary of its August 24, 1995 launch, Windows 95 is revisited through a Microsoft video, podcast interviews, and a rundown of its groundbreaking features—such as the Start menu, plug‑and‑play hardware support, and the first bundled Internet Explorer—highlighting its lasting impact on modern Windows designs.
This article explores how plot‑driven narrative techniques—both static and dynamic—enhance UI visual design, addressing challenges such as missing timelines and logical flow, and proposes visual‑guidance methods, montage, symbolic timelines, narrative fields, and varied presentation forms to create more engaging user experiences.
Four A/B experiments conducted for a 618 sales event reveal that overall horizontal scrolling, coupon‑based benefits, top‑left tags, and square slots each outperform their alternatives in click‑through rates and order generation, offering actionable design guidance for e‑commerce platforms.
This article explains how web fonts are rendered, why the same design draft can show different typefaces on Windows and macOS, and provides practical guidance on using the CSS font-family property, including handling of common fonts and Emoji symbols to achieve consistent, cross‑platform typography.
The article summarizes Nintendo’s UI Crunch conference, detailing the company’s design environment, mindset, production methods, and social responsibilities, and shows how its “entertainment brain” and user‑first approach shape game UI/UX and family‑focused features like the Switch Guardian system.
The article recounts a recent Emacs‑devel mailing‑list debate where developers, including Richard Stallman, discuss updating Emacs' user interface and overall appeal to compete with modern editors like VS Code and Vim.
This article explores the essential distinctions between B‑end and C‑end product design, highlights current B‑end design trends and the need for emotional design, and provides a detailed breakdown of navigation, filtering, list, table, and form components for enterprise interfaces.
This article explains how to set accurate font line heights in Sketch for mobile UI design, presenting single‑line and multi‑line formulas, practical examples, testing results, and verification steps to ensure consistent visual alignment across iOS, Android, and front‑end implementations.
This article details Trip.com’s comprehensive Dark Theme implementation across iOS, Android, and React Native, covering design principles, color mapping, illustration adjustments, platform‑specific adaptation techniques, code examples, and tooling that together reduced development effort while enhancing user experience and brand image.
This article explains the concept of microinteractions, outlines their four essential components—trigger, rules, feedback, and loop/pattern—provides design guidelines for each, and illustrates the ideas with practical case studies from BaseUI, Meitu XiuXiu, and Snapseed, highlighting how thoughtful micro‑interaction design enhances user experience.
This guide outlines four key design principles—clear framework, reasonable presentation, efficient interaction, and real‑time feedback—to reduce user effort, prevent errors, and improve overall form experience across digital products.
The classic Miller’s 7±2 principle, which states that short‑term memory can hold about seven items, offers practical guidelines for UI designers: limit choices, group information hierarchically, chunk long data, and streamline navigation to improve app usability and reduce user error.
This article explores how subtle UI design choices—such as streamlined handling of disabled cellular network permissions and context‑aware modal dialogs—can break the homogeneity of mobile apps and significantly improve overall user experience.
This guide explains why UI design specifications are essential for product consistency, outlines the benefits for designers, developers, and newcomers, and provides a step‑by‑step process—from defining design principles and base guidelines to creating component libraries and iterating the system over time.
This article walks through the UI design process of the Liulishuo® children’s English app, covering user personas, core app functions, visual design goals such as efficient browsing, child‑friendly aesthetics, a structured design system, multi‑device adaptation, and component‑library collaboration to deliver a cohesive, engaging experience for both parents and kids.
Continuity editing rules, originally devised for early 20th‑century cinema, guide smooth transitions between shots, and this article explores how those principles—content, motion, position, and time continuity—inform and improve UI design, from global navigation to animation guidelines in iOS and Material Design.
This article explains the F‑shaped reading pattern discovered through eye‑tracking studies, shows how it influences users' visual flow on web and app interfaces, and offers practical UI design tips—like emphasizing visual focal points and using motion—to guide attention effectively.
Learn how to efficiently build a minimalist mood board by extracting keywords, gathering visual assets, and generating a final visual guide, a process especially useful for fast‑turnaround banner and popup designs.
This article curates a concise list of five influential design books, offering brief reviews and key takeaways to help beginners and career‑switchers understand UI principles, design psychology, and practical design thinking.
This article explores how subtle divider lines—full‑width, single‑edge, and floating—organize complex mobile app layouts, improve visual hierarchy, and enhance browsing efficiency, offering practical examples and guidelines for designers and developers.
This article explains how a simple 1px rectangular icon can be evolved through six different styling techniques—adjusting strokes, corners, colors, and backgrounds—to suit various UI contexts such as finance apps, system tools, and mobile interfaces.
This article examines how users compare and switch between multiple apps of the same type—such as video, social, and real‑estate platforms—highlighting the impact of consistent UI patterns, reading modes, and filter designs on user comfort, cognitive load, and overall retention.
This article explains the concept, advantages, proper techniques, typical use cases, characteristics, and drawbacks of card‑based UI design, illustrating how it adds visual hierarchy and flexibility while also noting when list‑style interfaces may be more appropriate.
This article explores how visual designers can understand interaction drafts, maintain information hierarchy, and thoughtfully adjust layouts across operation‑type and platform‑type pages, using real‑world examples to illustrate best practices and common pitfalls in UI design collaboration.
This article examines how the Koala Shopping app’s homepage live‑streaming module balances the host’s presence with product displays, using selective carousel rotation and static framing to create clear visual cues and a cohesive user experience.
This article showcases three thoughtful UI design techniques used in Ctrip's flight ticket pages—highlighting how tomorrow's tickets are prioritized at night, price trends replace traditional calendars, and a dynamic bottom filter bar enhances both selection clarity and immersive browsing.
This article examines Taobao’s homepage recommendation system, comparing the full‑page browsing mode that displays a continuous stream of items with the section‑focused mode that groups products into distinct blocks, highlighting their design principles, user experience implications, and underlying recommendation strategies.
This article shares five practical techniques for optimizing car photographs—choosing the right vehicle type, adjusting highlights and shadows, recoloring, perspective layout, and motion effects—to seamlessly integrate automotive visuals into UI and marketing pages, enhancing overall design quality.
This article explores how applying constraint‑driven design, rooted in Don Norman's psychology, can reshape financial numeric input controls by limiting data ranges, minimizing UI interference, supporting integer habits, and enabling rapid adjustments, ultimately improving efficiency and reducing errors.
This article details the background, challenges, and step‑by‑step solution for standardizing UI across Youzan Retail’s iOS and Android apps, covering designer and developer perspectives, the creation of a shared style library, component architecture, resource management, delivery outcomes, pitfalls, and future automation plans.
This article traces the career of Yu Bo, from his early doubts at the Chinese Academy of Sciences to leading Ant Financial’s Experience Technology team, highlighting his open‑source contributions, his views on frontend value, and the management principles that drive today’s enterprise‑grade UI ecosystems.
This article explores essential navigation design principles, various navigation patterns such as top menus, sidebars, breadcrumbs, tabs, pagination, steps, and dropdowns, and demonstrates their application through a case study of Suning Logistics' Tianyan platform, offering practical guidance for creating coherent, user‑friendly web interfaces.
This tutorial explains the concept of visual texture, breaks down its essential elements such as overall lighting, subtle gradients, and fine details, and walks you through an eight‑step case study using Photoshop to produce a polished, high‑quality design that feels rich and tactile.
This article explores the fundamentals of navigation bar design for mobile apps, covering component structure, why traditional bars need redefinition for financial products, layout rules for left/right actions and titles, and guidelines for fixed top bars to improve usability while maintaining visual consistency.
This guide compiles a curated collection of essential front‑end development tools, asset libraries, and community sites—including bookmark managers, placeholder image generators, code‑beautifiers, free image sources, UI design resources, and popular forums—to help developers streamline workflows and discover valuable online resources.
This article examines how basic text‑field controls evolve into specialized, secure, and range‑limited input components for financial products, highlighting the interplay with keyboards, the distinction between general and constrained inputs, and design patterns such as default values, plus/minus steppers, and gesture‑based interactions.
This article explores the advantages and challenges of dark mode UI, offering practical guidelines on text color, spacing, typography, icon design, button states, dividers, color usage, visual hierarchy, and whitespace to create refined and readable dark‑theme applications.
This article explains the concept of modular design, outlines its efficiency, innovation, and consistency benefits, showcases real-world examples from manufacturing to construction, and demonstrates how modular thinking can be applied to interaction flows, page frameworks, content, and visual elements in digital product design.
This article explains why color selection feels uncomfortable when done arbitrarily, outlines a goal‑driven strategy for choosing primary and secondary hues, compares industry‑specific color objectives, demonstrates the impact of simplified color hierarchies and contrast schemes through real‑world UI case studies, and reveals how gradients, subtle shadows and fine details create a premium sense of quality in digital products.
This article explains visual hierarchy, its role in distinguishing primary and secondary elements, and outlines five practical techniques—size, color, elements, whitespace, and grouping—supported by real‑world app examples to help designers create clearer, more engaging interfaces.
Sketch2Code leverages Microsoft’s custom vision model, OCR, and Azure services to automatically convert hand‑drawn UI mockups into functional HTML code, detailing its workflow—from image upload and element prediction to layout generation and final HTML output—plus links to the repository and demo site.
This article explains the concept of UI metaphor design, categorizes common visual, auditory, and haptic metaphors, and outlines four design approaches—conceptual, feature‑based, structural, and behavioral—providing concrete examples and illustrations to inspire effective interface design.
The article details how Youzan’s frontend team created the Zent React component library—defining a unified design philosophy, strict code standards, a CLI‑driven workflow, Jest/Enzyme testing, and disciplined maintenance practices—to replace duplicated code, support diverse business needs, and foster open‑source collaboration.
This article shares fifteen practical UI design principles for card‑based games, covering art style selection, player‑targeted aesthetics, consistency with game lore, leveraging known IPs, creating distinctive visuals, simplifying interfaces, ensuring usability on mobile, and enhancing overall player experience.
The article examines how preemptive or predictive UI designs—often called "dark mode"—can overwhelm users with hidden choices, and proposes transparent "light mode" strategies that restore trust, give control, and help users make better decisions without sacrificing convenience.
This article explains how to design standardized, maintainable backend system prototypes using Axure, covering framework layout, dynamic panel setup, responsive functions, multi‑level menus, component libraries, and practical tips for efficient UI design and reuse across projects.
This article provides comprehensive iPhone X UI design guidelines, covering screen dimensions, safe‑area layout, status‑bar adjustments, home‑indicator considerations, color gamut updates, Face ID integration, custom keyboard rules, larger navigation bars, and resources for designers and developers.
This article explains the fundamentals of UI design, covering its definition, key components, and the distinct approaches for game interfaces and mobile applications, highlighting how visual appeal and functional interaction together create effective user experiences.
This article examines how NetEase Pay’s product positioning shapes its design system, analyzes competing payment apps, outlines key visual keywords, and showcases iterative UI solutions—including icon unification and card‑based game branding—to create a cohesive, user‑friendly mobile payment experience.
This article walks designers through a practical “Cross Method” that classifies product‑detail page elements into four importance‑must‑show quadrants, enabling clear information hierarchy, reducing endless revisions, and producing a visually coherent final design.
This article explores how thoughtful microcopy—tiny UI text elements—can turn empty screens into engaging, personality‑rich experiences by aligning visual design, brand voice, and user emotions, offering practical guidelines and examples for product designers.
This article presents ten practical guidelines—ranging from preserving the original query to offering alternative suggestions for empty results—to help designers and product managers create more effective, user‑friendly search result pages that boost engagement and conversion.
This article explains why visual hierarchy is crucial in interface design, outlines four key dimensions—size, spacing, content form, and color—and demonstrates their application through real‑world case studies that improve user focus and reduce cognitive load.
This article outlines a step‑by‑step approach—from context mapping and requirement scenario analysis to UI architecture, low‑ and high‑fidelity design, and early software trials—to systematically improve software usability and ensure a user‑centered product.
This article examines less‑common mobile overlay patterns—half‑screen pages, ActionSheets, BottomSheets, and Popovers—explaining their use cases, design advantages, and best‑practice tips for iOS and Android applications.
With roughly one in 12 men and one in 200 women affected by color vision deficiency, this guide explains what color blindness is, why inclusive design matters, and offers five practical strategies—using symbols, limiting colors, adding textures, ensuring contrast, and avoiding problematic color combos—to create more accessible web and app experiences.
This article explores how contrast and analogous color combinations, illustrated through outfits from the Japanese drama “Proof of the Goodness of Simplicity – Proofreader Girl Kono Etsuko,” can inform visual and UI design, offering practical proportion guidelines and inspiring a positive, detail‑focused mindset for designers.
This article explains how well‑crafted design specifications improve multi‑designer collaboration, reduce development redundancy, and preserve brand identity across product iterations, while also highlighting common pitfalls and offering a step‑by‑step guide to building an effective design system for newcomers.
This article explores why user avatars are essential for quick identification and memory, examines the pros and cons of circular designs, offers practical ways to encourage users to update their photos, and provides guidelines for optimal avatar size, position, and visual hierarchy in UI.
This article explores how fundamental psychological principles—such as compulsion, conformity, visual illusion, and facial attraction—shape user experience design, illustrating each concept with real-world examples and visual cues to help designers create more engaging, trustworthy, and intuitive interfaces.
This article explains how to select the appropriate communication method—indicators, validations, or notifications—by examining their purposes, urgency, and required user actions, helping designers provide clear, contextual feedback that enhances user experience across interfaces.
This article explains Android Wear's communication APIs, health data handling, notification integration, UI adaptation for round and rectangular watches, and performance tips, providing developers with practical guidance to build efficient and user‑friendly Wear apps.
This article examines why many error dialogs frustrate users, outlines Apple’s human‑interface guidelines for clear notifications, critiques real‑world examples from Windows Phone, Google Chrome and Twitter, and distills three essential principles for designing useful, user‑friendly error messages.
As H5 pages grow richer on both mobile and PC, loading times increase, but engaging loading animations can inform users of progress, turn waiting into a pleasant experience, and reduce abandonment rates.
This article demystifies the many design titles—UX, UI, visual, interaction, product, and user‑research designers—explaining their core responsibilities, typical deliverables, essential tools, and how they differ across industries, helping readers navigate the confusing landscape of modern design roles.
This article explains that UI design requires only basic drawing skills as a tool for visual research, compares UI with related fields like comics, game art, and film, and outlines essential sketching fundamentals—structure, perspective, color, and composition—that boost efficiency and creativity.
This article explores how designers creatively repurpose everyday shadows to enhance visual hierarchy, depth, and user experience in user interfaces, illustrating the concept through a series of striking examples that demonstrate practical techniques and design principles.
This article outlines comprehensive iOS design best practices, covering content‑centric development, enhancing functional experience, improving visual clarity, using layout to prioritize content, optimizing launch experience, crafting onboarding and modal scenarios, and refining interaction feedback, branding, icons, and standard UI element usage.
