OpenAI's GPT‑4 Image 2 shifts from a mere visual inspiration tool to a production‑ready system that can handle text, layout, multi‑size adaptation and variant generation, threatening repetitive design tasks across branding, UI, e‑commerce and game concepts while leaving high‑level creative strategy untouched.
This article explains the concept of AI design "Skills", how they are structured, their origins, step‑by‑step creation process, practical usage examples, and the visual quality differences between AI generated with and without these Skills.
This article walks through the complete process of transforming a basic black button into a premium‑looking, animated VIP component using CSS gradients, keyframe animations, hover interactions, performance optimizations, and configurable variables, while also explaining the design thinking behind such “out‑of‑the‑box” requests.
This article showcases five recent mobile app design examples—including HeyTea’s transparent ingredient visualization, Xianyu’s retention overlay, QQ Music’s AI-driven playlist explanations, Alipay’s location-based homepage, and Ele.me’s urgency-driven promotions—highlighting how thoughtful UI/UX strategies boost user efficiency, brand perception, and engagement.
This article reviews five recent mobile app UI/UX case studies—Kuaishou's festive card collection, NetEase Cloud Music's similar-song recommendation, Baidu's AI‑driven pinch‑to‑summarize, Zhixing's clipboard‑based hotel search, and Xiaohongshu's New Year chat feature—highlighting design tactics that boost visual appeal, user engagement, and conversion.
This article showcases five recent mobile app design cases—from Spotify's hidden snake game to TooGoodToGo's dynamic pricing icons—highlighting how playful interactions, personalized visuals, and subtle motion effects can boost user engagement and create memorable experiences.
This article shares six recent mobile app design case studies—from brand‑animation search bars to carbon‑conversion visualizations—highlighting how thoughtful UI/UX choices can strengthen brand memory, simplify user flows, and enhance overall product experience.
This article showcases six recent UI/UX case studies—from Dazhong Dianping’s coupon‑tear verification to Taobao’s Saving Week animation—highlighting how thoughtful interaction design and visual storytelling can boost user confirmation, efficiency, immersion, and conversion across mobile applications.
This article details how Industrial and Commercial Bank of China (ICBC) created a cross‑channel, enterprise‑grade frontend component library and management platform to standardize UI design, boost development efficiency, and enhance user experience across mobile, PC, and smart‑terminal banking applications.
This article details the design, engineering, and user‑experience innovations behind a lightweight, AI‑enabled self‑service kiosk that streamlines on‑site health examinations, reduces costs, and earned the 2021 IAI International Creative Award.
This guide walks designers through the purpose and types of design reviews, essential preparation steps, effective presentation techniques, and strategies for handling feedback, helping you deliver clear, persuasive design proposals and improve collaboration with stakeholders.
This article showcases five practical UI/UX case studies—from Meituan's gamified review panel to Xianyu's emotion‑driven rating templates, Tencent Video's storyline effects, Didi's proximity vehicle animation, and SF Express's shipping template—highlighting how thoughtful design boosts user engagement and service quality.
This comprehensive guide explains navigation design fundamentals, system classifications, and component choices, helping designers build clear, user‑friendly interfaces that guide users efficiently through digital products while avoiding common pitfalls.
This article explains how Baidu Search’s design system was restructured using scenario‑driven thinking, detailing the challenges of asset redundancy and inconsistency, the three‑phase overhaul (unify, engineer, tool), and the resulting improvements in asset clarity, maintainability, and consumption efficiency.
This article reviews the evolution of Chinese SLG mobile games, analyzes the underlying coordinate and path sand‑table types, examines map‑element visual and interaction design, explores the semantics of march markers, and discusses the recent strategic‑map iteration aimed at balancing player experience and information overload.
This article explores the fundamentals of form design, covering form types, element breakdown, layout options, label alignment, and validation techniques to create efficient, user‑centric interfaces that balance usability with business requirements.
This guide explores the principles, types, feedback mechanisms, and best practices of filter components in B2B product design, illustrating how precise and fuzzy search, dropdowns, matrix, tab, and combined filters can improve data discovery while addressing usability trade‑offs.
This article explains how well‑structured interaction documents—targeted at designers, front‑end and product teams—enhance collaboration efficiency by clarifying purpose, applying a clear hierarchy, focusing on essential details, and using practical tools such as user task flow diagrams.
This article analyzes eight practical UI/UX case studies—from empathetic map navigation and smarter text input to privacy‑focused designs, motion‑enhanced feedback, IP interaction, and streamlined flows—showing how thoughtful design can dramatically improve user satisfaction across mobile apps.
This article explores the purpose, styles, mobile considerations, placement, types, and design recommendations for breadcrumb navigation, highlighting its usability benefits, SEO impact, and when it should be applied in complex web interfaces.
This case study details how Haokan Video’s PC site was transformed with a responsive 24‑column grid, streamlined navigation, visual‑noise reduction, and feed‑style content loading, resulting in higher content exposure, improved click‑through rates, and stable user retention after a month‑long AB test.
This article walks through the redesign of a travel app's loading animation, explaining why an upgrade was needed, analyzing industry examples, defining design directions, presenting graphic and IP loading concepts, and sharing the final polished solutions that enhance fun, recognizability, and brand alignment.
This article provides an in-depth overview of web and mobile navigation design, categorizing navigation types such as full‑screen, top, side, bottom, and mixed, and detailing their advantages, disadvantages, design principles, and practical examples to help designers create effective, user‑friendly interfaces.
This article explains what onboarding (new‑user guide) design is, when it should be applied, its business value, and details nine common design patterns—such as splash pages, animated guides, overlay masks, step‑by‑step flows, tutorial, pop‑ups, bubbles, summon guides, and preset tasks—plus practical advice on selecting the right pattern for different user scenarios.
This article discusses principles for designing effective forms, including minimizing user input, providing real-time feedback, and choosing optimal layouts like vertical, horizontal, or floating structures to enhance user experience.
The article introduces the Fin Line Height Fix Tool, an open‑source solution from NetEase’s Dolphin team that resolves visual fidelity problems caused by inconsistent font heights between design tools and implementation, offering Figma and Sketch plugins plus iOS, Android, and React Native code to ensure pixel‑level line‑height consistency and streamline designer‑developer collaboration.
This article explains what the iOS Human Interface Guidelines and Google Material Design are, why they are essential for designers, and provides a practical roadmap for studying their design philosophy, basic rules, and component libraries across mobile platforms.
This case study details how the Smart Travel app’s route‑list page was completely re‑designed—introducing a unified list, new tab interactions, visual noise reduction, and card redesign—to boost comparison efficiency, improve user guidance, and achieve higher conversion rates comparable to train and flight listings.
The article details Tianxing Financial’s ten‑month design overhaul, outlining how a unified design system and component library were built to harmonize five business modules, streamline UI consistency, improve brand perception, and boost development efficiency across the financial app ecosystem.
This article breaks down comment‑section design into three dimensions—product type, comment‑viewing experience, and interaction mechanics—and offers nine practical considerations, covering comment categories, display formats, sorting methods, navigation patterns, gesture controls, input guidance, and feedback strategies.
This article explains how design tokens serve as a platform‑agnostic bridge between design tools and front‑end code, improving collaboration, reducing visual‑to‑code errors, and enabling automated, consistent UI implementation across products.
This article examines the challenges of managing diverse product lines within a one‑stop R&D platform, outlines the design‑driven solutions such as UI standardization, modular architecture, and a customizable workbench, and shares the resulting 61% increase in active users and future improvement plans.
This case study details the design of the Digital Palace Museum WeChat mini‑program, covering its cultural goals, simplified visual language, clear content categorisation, immersive and warm UI for all ages, AI‑driven voice assistance, AR navigation, and real‑time crowd‑flow features.
This case study analyzes how layered entry points, rights‑driven and game‑driven user segmentation, loading and experience optimizations, and unified UI components can transform high‑traffic project entrances into sustainable, engaging traffic with measurable retention improvements.
This article explores practical guidelines for B‑end table design, covering optimal row height and column width, flexible horizontal space, efficient scanning techniques, and concise presentation strategies to create tables that are dense enough for information yet easy to read and interact with.
This article analyzes WeChat game red‑envelope cover design, explaining its purpose for brands and players, detailing case studies such as King of Glory and Peace Elite × Tesla, and outlining practical design methods like role‑switching, storytelling, theme focus, and multimedia formats to create compelling, engaging experiences.
The article reviews the eight dominant web design trends of 2021—including 3D graphics, parallax animation, custom illustrations, minimalist layouts, abstract shapes, bold gradients, digital product showcases, and embedded video—explaining how each enhances user engagement in a post‑pandemic digital landscape.
This article explores the features and benefits of ConstraintLayout in Android, including its flexibility, performance improvements, and practical usage examples for creating complex layouts efficiently.
This article explores the cultural, linguistic, visual, and behavioral nuances of the Indian market—covering language preferences, numeric formats, festival symbolism, color psychology, and popular media styles—to help designers create more effective financial app experiences for Indian users.
This article shares a UI designer’s comprehensive guide to B‑side form design, covering basic, step‑by‑step, and advanced forms, essential components such as titles, labels, placeholders, inputs, validation, button placement, layout strategies, field width scaling, and research‑backed label positioning to improve usability and efficiency.
The article details how 58.com’s annual Spring recruitment campaign was strategically designed with a two‑phase timeline, unified interaction framework, and immersive storytelling to drive new user acquisition, sustained activation, and significant traffic growth during the post‑holiday hiring surge.
This article details the evolution of JD’s Linglong intelligent page design platform, covering its origins, component‑based visual editor, multi‑platform capabilities, modular architecture, and diverse application scenarios such as activity pages, interactive marketing, mini‑programs, and store fronts.
This case study details how Baidu's Lemon Aimei platform tackled the booming medical aesthetic market by creating a trustworthy, high‑quality service and a distinctive visual system—using youthful, beautiful, and safe keywords, unified design language, and strategic online/offline branding—to boost brand reputation and user engagement.
This article examines how e‑commerce channel brands can be strengthened through consistent design, unified development processes, strategic brand touchpoints, and a balance between commonality and diversity, highlighting the challenges of fragmented teams and the need for long‑term, resource‑focused brand building.
This article details the design process behind a unified branding and UI system for an interactive marketing platform, covering project background, brand core, logo creation, visual language, atomic design methodology, component hierarchy, and the resulting product guidelines.
This article explains what a design system is, outlines its key advantages such as unified design, reduced design debt, and improved efficiency, describes its core components like visual language and component libraries, and showcases best‑practice examples from Google, Ant Design, and Shopify.
This article explores Baidu Baike's visual redesign of festival entries, detailing how traditional Chinese painting techniques, emotional storytelling, cultural motifs, and a unified visual identity were applied across PC and mobile platforms to enhance brand perception and user engagement.
This article explores the rise of design systems, their historical roots in component‑based development, the cost of design debt, practical examples of savings, common misconceptions, visual‑coding for dark mode, and how they enable faster prototyping, iteration, and cross‑team collaboration in modern frontend engineering.
This article analyzes how different app types influence comment area design, covering the purpose of comments, user motivations, entry placement options, linear versus tree structures, and sorting mechanisms based on time, likes, or replies to create engaging user experiences.
This case study details how the internal collaboration platform "Meishi" at 58 Group was redesigned through user research, data analysis, visual branding, and service touchpoint upgrades, resulting in improved efficiency, stronger brand perception, and a sustainable experience iteration framework for over 20,000 employees.
This article explores the challenges of adapting web interfaces for foldable smartphones, reviews current devices, explains why responsive design is the core solution, outlines nine fundamental principles, highlights common pitfalls, and envisions future interaction possibilities for developers.
This guide shares practical color‑selection strategies for app design, covering primary brand colors, harmonious palettes, complementary and split‑complementary schemes, gradient usage, and accessibility considerations to help designers create visually appealing and user‑friendly interfaces.
This article reviews five common dashboard chart types—bar, bar‑horizontal, pie, line, and area—explaining their ideal use cases, key characteristics, and design tips to help B‑end designers choose the most effective visualization for their data.
This article explores how graphic design principles such as contrast, repetition, alignment, and proximity can be applied to empty states in mobile apps, turning them into effective brand communication tools that guide users, improve perception, and boost conversion.
This article walks through the end‑to‑end design of an RPA platform, covering competitive analysis of leading tools, product IP visualisation, UI/UX decisions, workflow publishing improvements, role‑based information architecture, and future AI‑driven enhancements, while highlighting operational risks and business models.
This article explains the four core graphic design principles—contrast, repetition, alignment, and proximity—and shows how applying them to financial product interfaces improves readability, influences price perception, builds trust, and guides user behavior through thoughtful visual hierarchy and currency presentation.
This case study details Suning Reading's strategic redesign, covering brand positioning, logo evolution, color and typography systems, iconography, and the UI redesign of key pages such as the launch screen, bookshelf, and reading view, illustrating how thoughtful design can differentiate a mature e‑book product.
The article outlines a product‑focused case study that uses the What‑Why‑How framework to identify pain points on 58 Rental’s homepage, redesigns key entry points such as urgent‑task, content‑discovery, fast‑search, and activity doors, and reports measurable improvements in user conversion and satisfaction.
This article chronicles the design process behind 58同镇’s icon set, detailing research, concept development, visual experimentation, and brand integration to create rural‑appealing, aesthetically superior icons for a nationwide Chinese market.
The article explores how everyday filter mechanisms—like library searches, supermarket aisles, and mobile app interfaces—help users make faster decisions, explains three main filter designs (inline, drawer, list), showcases real‑world examples, and offers practical guidelines for creating simple, efficient filter UI.
The article explains why design is crucial for front‑end developers, outlines common pitfalls of development without design, and offers practical principles and scientific approaches that engineers can adopt to improve UI/UX and create more user‑friendly products.
The article likens the blockchain boom to the 19th‑century American gold rush, highlighting speculative hype, the need for universal standards, and the challenges of making crypto wallets user‑friendly and mobile‑accessible to achieve mass adoption.
This article explores the unique challenges of building B‑end configuration tools for mobile products, offering practical design guidelines such as timely preview, WYSIWYG interfaces, strong feedback loops, and content‑balancing strategies to enhance control and user experience across both backend and mobile fronts.
This guide outlines practical methods for junior designers to identify design problems, progress through copying, semi‑creation, and original work, cultivate motivation, practice deliberately, gather inspiration, develop comprehensive skills, and adopt product‑thinking to continuously improve their design capabilities.
Over the past year, I independently led the design of NetEase’s new reading app “Snail Reading,” covering brand research, visual identity, UI/UX, motion design, and design guidelines, sharing the process, principles, and insights that helped the product achieve multiple awards and a cohesive brand experience.
This article presents a comprehensive case study on redesigning an e‑commerce backend workbench, detailing how designers redefined commercial value, conducted agile user research, set product goals for buyer and seller interfaces, and applied systematic interaction, visual, and motion design to create a productized solution.
This article explores the benefits, challenges, and practical methods of applying component‑based design to question banks and exam assembly modules in online education, offering insights on reuse, consistency, requirement analysis, and solution strategies for scalable, flexible UI development.
This article examines how enterprise procurement sites differ from consumer e‑commerce platforms, outlines user research, defines clear design goals, and presents navigation, information architecture, and conversion tactics that make NetEase Yanxuan’s B2B portal efficient and brand‑consistent.
Vivo’s X20 guide helps developers adapt apps to its new 18:9 full‑screen display by addressing five typical problems—black borders, UI stretching, OpenGL rendering offsets, mismatched navigation‑bar colors, and fixed‑position layouts—and suggests testing with 1440×720 or 2160×1080 emulator resolutions.
This guide shares practical communication techniques for designers, covering trust‑building, handling unclear requirements, effective design reporting, managing stakeholder doubts, improving fidelity, and adapting to different colleague personalities, all aimed at smoothing workflow and enhancing product outcomes.
This article details how a design team tackled a one‑month launch deadline for the “Hi Travel Medal Cloud Diamond” product, outlining project initiation, rapid parallel design, goal decomposition, interaction and visual design, usability testing, data‑driven adjustments, and post‑launch insights.
Using a shopping‑mall metaphor, the article outlines essential tech‑team roles—CTO, database, backend and frontend engineers, and UI/UX designers—explaining their responsibilities, recommended tools, and how founders without a technical background can effectively assemble and manage a development team.
This article walks through a comprehensive redesign of the Twitter Android app, covering user flow mapping, navigation patterns, material‑design guidelines, FAB interactions, animation choices, tablet layout adaptations, and visual consistency to create an intuitive, brand‑aligned mobile experience.
Programmers can boost their design abilities by regularly studying inspiring sites, allocating as much time to design as coding, emulating strong visuals, coding directly in the browser, mastering CSS and front‑end frameworks, using quality icons and images, iterating relentlessly, prioritizing usability, typography, feedback, and simple, whitespace‑rich layouts.
Splash screens in Android apps, especially in many Chinese releases, waste startup time, disrupt users’ task focus, consume unnecessary resources, and replace better branding options, so modern hardware and design guidelines recommend eliminating them to improve speed, flow, and overall user experience.
The article explores three core design semi‑principles—priority, consistency, and feel—explaining how they guide designers and product managers to allocate interface resources, maintain predictability, and create positive user emotions that can determine product success.
