Material 3 Expressive 是 Google 设计系统有史以来经过最多调研的更新。在本视频中,Material Design 研究人员分享了设计背后的数据,以及有关用户对情感驱动型用户体验偏好的新见解。
Material 3 Expressive 源自研究,但不是通过将设计决策委托给数据来确定 41 种蓝色,而是通过涵盖研究、设计和工程的协作式调查来确定。早在 2022 年,我们的研究实习生就曾研究过用户对 Google 应用中 Material Design 的看法。在向同事提及初步发现后,团队开始了设计辩论:为什么所有这些应用看起来都如此相似?很无聊吗?您能否进一步强化这种感觉?
在过去三年里,我们探索了这一对话的意义,进行了数十轮设计和研究迭代,以寻找 Material Design 的下一步演变。通过数十项涉及数百种设计的独立研究,以及来自世界各地的数万名参与者,我们精心优化了这个既美观又易用的系统。
Material 3 富有表现力的设计原则植根于扎实的研究,并以长期以来的易用性最佳实践为基础。设计师可以充满信心地应用这些组件和原则,因为他们知道自己正在构建的是用户能够感同身受的内容。
研究 Material 3 Expressive
在设计团队构思初始概念并探索如何在各种 Google 产品中运用更具表现力的设计理念时,我们采用了多种方法开展了一系列研究,包括:
[null,null,["最后更新时间 (UTC):2025-07-27。"],[],[],null,["# Benefits of expressive design\n\nMaterial 3 Expressive has been shown to produce desirable and more accessible\nproducts, support a seamless cross-product experience, and increase team\nvelocity. Build a product your users will love.\n\nBetter, easier, emotional UX\n----------------------------\n\n**The research behind Google's bold new direction for design**\n\nMaterial 3 Expressive is the most researched update to Google's design system,\never. Here, Material Design researchers share the data behind the designs and\nnew insights into users' preference for emotion-driven UX.\n\nMaterial 3 Expressive was born out of research---not in the 41 shades of blue kind\nof way, which delegated design decisions to data---but in a collaborative inquiry\nspanning research, design, and engineering. Back in 2022, our research intern\nwas studying user sentiment toward Material Design in Google apps. After\nmentioning her initial findings to colleagues, a team-wide design debate began:\nWhy did all these apps look so similar? So boring? Wasn't there room to dial up\nthe feeling?\n\nOver the past three years, we've explored the implications of this conversation,\niterating through dozens of rounds of design and research to find the next\nevolution of Material Design. Through dozens of separate research studies with\nhundreds of designs, and tens of thousands of participants from around the\nworld, we've fine-tuned a system that's both beautiful and highly usable.\n\nMaterial 3 Expressive principles are [rooted in solid research](https://design.google/library/expressive-material-design-google-research) and are built\non long-standing usability best practices. Designers can confidently apply these\ncomponents and principles knowing they're building something that users can\nconnect with.\n\nResearching Material 3 Expressive\n---------------------------------\n\nAs the design team created initial concepts and explored how a more expressive\ndesign ethos could work across Google products, we embarked on a series of\nresearch studies using a variety of methods, including:\n\n- **Eye tracking:** Analyzing where users focused their attention.\n- **Surveys and focus groups:** Gauging emotional responses to different designs.\n- **Experiments:** Gathering sentiment and preferences.\n- **Usability:** Seeing how quickly participants could understand and use an interface.\n\nTo build a solid foundation, we started with research on individual components.\nSeveral examples:\n\n- We evaluated options for progress indicators, assessing which made waiting time feel faster while also looking like it belonged on a premium phone.\n- We studied how big a button can be, seeking improvements in tap time without overwhelming other items on the screen.\n- We ran several studies on the new floating toolbar, optimizing for designs perceived as modern, clean, and energetic as well as noticeable and usable.\n\nThrough this research, we took care to follow accessibility requirements and\nbest practices. In many cases, we chose to exceed existing standards for tap\ntarget size, color contrast, and other important aspects that can make\ninterfaces easier to use. This research helped us create the building blocks and\nguidelines needed for this new evolution of Material Design.\nMaterial Design research has found that expressive design is especially preferred by ages 18-24.\n\nBut top-level preference can only tell us so much. We wanted to dive into the\ndesign aspects that led to this preference.\n\nAt last year's Google I/O, we introduced a set of attributes that the Material\nDesign team uses to compare designs. Maybe you noticed that many of these were\nemotional words? \"Playful,\" \"energetic,\" \"creative,\" \"friendly,\" and \"positive\nvibe\" are some examples.\n\nAs we've been developing Material 3 Expressive, our researchers have worked with\ndesigners to iteratively test new screen designs against these attributes,\nhelping to optimize the designs for a desired emotional reaction. In addition,\nwe've sought to ensure that designs created with this new system are seen as\nmore modern and visually appealing.\nMaterial 3 Expressive designs were overwhelmingly rated higher for attributes such as \"energetic,\" \"emotive,\" \"positive vibe,\" \"creative,\" \"playful,\" and \"friendly.\"\n\nUser research findings\n----------------------\n\nResearch shows that Google users view their mobile devices and software\nexperiences as an extension of themselves and that there is a user expectation\nfor app experiences to reflect individual user preferences for style---color,\ntype, and contrast---and behaviors, such as prioritizing frequently used apps and\nactions. This demand is especially prevalent with younger generations' dynamic\ntastes and expectations.\n\nOn average, the more expressive design variants outperformed the baseline in\nterms of preference (\\~100% increase) and aesthetics (up to 170% increase).\n\nMake desirable and more accessible products\n-------------------------------------------\n\n\nAdd user-coveted features like personalization, expressive components, and new\ncolor algorithms.\n\nMake your product accessible-by-default using Material 3 Expressive styles and\ncomponents. \n\n\u003cbr /\u003e\n\nGet started\n-----------\n\nIt's time to move beyond \"clean\" and \"boring\" designs to create interfaces that\nconnect with people on an emotional level. Ready to try it out for yourself? We\nhave a few tips:\n\n- **Start experimenting:** Dive into the updated Material 3 Expressive design kit for Figma and start playing with the expressive design options.\n- **Try the tactics:** Explore using the Material 3 Expressive design tactics, while also tailoring your UI to support core user journeys.\n- **Be intentional and start from user need:** While there was broad appeal for vibrant, expressive design, a strong minority of users preferred calmer, less intense versions. Always start with what your users need. Understand their requirements and critical user journeys before determining the right choice of tactics and components.\n- **Prioritize functionality:** Don't compromise your product's core functionality for visual flourishes. No amount of emotion can compensate for a lack of clarity.\n- **Follow accessibility standards:** Adhere to established guidelines for color contrast, screen reader compatibility, navigation, and other best practices for accessibility.\n- **Iterate, iterate, iterate:** Use research to find the right balance between freshness and familiarity, playfulness, and professionalism. Our design scales can give you a head start. And don't forget to conduct usability research to verify that you haven't gone too far."]]