一、背景

现状

在新公司工作快半年了，我对这里的工作模式已经有清晰的了解了。这里的设计师不多，但每个人要负责多个内部系统的 UI 和交互设计。

有些需求方的系统本身业务不复杂，都是简单的增删查改，但希望自己的系统能够与众不同，让人产生眼前一亮的感觉；而有些系统里的功能交互逻辑比较复杂，不同状态、不同情况比较多，希望设计师出一个交互方案能够让功能简单易用。

按这几个月的工作情况来看，第一种情况对我来说比较棘手。因为我当时面试的岗位是交互设计师，所以心理上和能力上都没有预期是要接触这样的需求的，而现实是这种需求的占比还不少。

所以我在遇到这种要为某个系统进行门户网站的设计，或者将内部系统打造得光鲜亮丽的需求的时候，我会耗费比较多时间，以及进行很多的尝试。

想法

于是我就在想：需求方们都希望自己的系统能在一众的高度规范化和模版化的系统中脱颖而出，那么使用 3D 素材会不会是一个比较好的解决方案？

有了这个想法之后，我调研了下网上其他大公司的对外产品，看看他们在 B 端产品中的 3D 素材使用情况。

看了一圈下来，我得出了这样的规律：

1. 3D 视觉素材在展示型页面用的较多。如官网首页，门户首页，登陆页等页面；
2. 在后台界面中使用较少。但也会用在功能入口、状态反馈、背景装饰等场景。

结论

基于这个规律、现实工作中的情况以及小范围的尝试之后，我得出了这样的结论：

1. 3D 素材在 B 端后台的场景使用的频率不高。恰当使用可以提升画面的丰富程度。但不必在此花太多时间。
2. 如果遇到需求方要求该项目需要与那种高度模版化的后台有明显区别的时候，使用 3D 素材确实是能满足需求方期待的。

二、难点

由于我没有 3D 设计的能力，同时公司的需求密集程度也似乎不允许我们专门花时间为一些日常需求来渲染 3D 视觉图，所以在最开始我是通过在素材网站上面搜寻 3D 素材，然后直接应用在工作当中。

这个方法最开始很好用，我可以快速地完成需求，但用久了之后发现短板也很明显。

1. 难以贴近公司业务。网络素材难以贴合公司内部的业务场景。大部份情况下只能找到通用素材，无法满足具体需求。
2. 缺乏系列素材。即使找到一个合适的素材，但要找到同系列的其他类型素材犹如大海捞针。
3. 侵权风险。网上找到的素材可能涉及版权问题，直接使用存在风险。
4. 质量参差不齐。高质量的素材通常需要付费，免费的素材质量参差不齐，难以满足设计内部标准。

所以我得出了一个结论：

仅靠找素材的方式对我们帮助有限，不能完全依靠这种方法。

如果不能仅依靠找素材的话，这意味着我需要有 3D 设计的能力？

当初我得出这个结论的时候，心里感到一丝的恐慌：现在的工作强度，还哪有时间学习复杂的 Cinema 4D 或者 Blender 之类的专业 3D 设计软件啊！

然后我再往深处想了想，其实我需要的不是 3D 设计的能力，而是需要有获得 3D 素材的能力！意思是我不一定得会用这种专业的 3D 软件，但我要有办法获得想要的 3D 视觉素材，并且这个过程必须具备以下特点才能满足我的实际工作情境：

1. 出图耗时短。因为实际工作中就是不值得在这方面投入过多时间。
2. 风格高度统一。才能保证扩展性，以及系统风格的统一性，而这正正是通过找素材的方式没法做到的。
3. 可定制程度高。指的是我要有办法定制 3D 素材里面的图像和元素，这样做才能确保产出物贴近实际业务，那用起来才有意义。

在想到这些东西的时候，刚好我了解到有一个叫做 Vector to 3D 的插件，似乎能够满足到以上三点需求，来提升我的工作效率和质量。于是我向领导提出这个设想，她也支持我去探索这个新工具。

这篇文章是公司内部分享会的文稿，记录着我当时探索出来的经验：如何利用 Vector to 3D 插件在 Figma 建立 3D 设计流程来提升我们的设计效率和质量。

三、通过 Vector to 3D 进行工作

插件介绍

这是一款付费插件，可以在 Figma 社区搜索并安装。

这款插件的 3D 能力分为两部分，全局配置项和当前物体配置项。接下来我将通过介绍这个插件的界面来简单介绍下这款插件。

对于全局配置项，我们可以在 “常规” 面板里配置视角和背景等参数、“渲染” 面板可以配置渲染质量、“光影” 面板可以配置灯光相关参数，如灯光数量 / 大小 / 位置 / 强度和颜色等。

对于单个物体配置项，我们可以通过 “厚度” 或 “旋转” 等的方式建立模型，并使用 “细分品质” 提升模型的质量。值得注意的是，这个软件是通过将矢量图形挤压或旋转生成出 3D 模型的，不能像传统 3D 软件那样有多种建模方式（比如克隆、布尔运算或雕刻等）。

除此之外，该插件还支持配置材质参数，如粗糙度、金属度、折射率等。这些简单材质足以应对绝大部分的 B 端场景了。

制作模版

这一小节会介绍两个该插件的功能，保存配置和模版化。

保存配置允许我们将当前画框内的视角参数、建模参数和材质参数等记录到该画框当中。下次打开编辑，或者分享给其他人打开的时候可以读取之前的配置，一键将矢量图形变成之前保存好参数的 3D 场景。

模版化则是该插件与 Figma 原生功能联动的完美范例，也是高效产出 3D 素材的关键因素。

先说效果：插件会将当前物体的配置项（如厚度、位置、材质等）记录，然后用户可以将任意元素与该物体替换，并继承该物体的配置项。

这个能力极大便利了模版化生产素材。我们只要做好一个模版，然后无限替换元素，就可以生产出适用于各种业务场景的素材了。

方法很也简单，我们需要将画框设为组件，想要替换的元素也要作为这个画框组件内的子组件。（下面的例子中，我将圆球的底座作为可替换元素）

将这个画框组件拖一个出来，在插件中设定好 3D 配置并保存。

然后做出其他可供替换的元素，确保图层的数量、排序、命名与画框内的替换元素一致

最后我们在左侧面板中按住 Cmd + Option 将其他替换元素与画框内的替换元素进行替换，然后在插件中重新加载一遍模型，我们能看到新的形状也应用上原有替换素材的参数。

这时，我们的模版已经制作成功了，后续只要无限制作替换素材，就可以获得无限的视觉素材。

实际应用

这里分享一个我在工作中实际应用的例子。我制作了一个生成蓝色 3D 玻璃风格图标的模版。

这个模版中，图标和背景面板的形状均可以替换，由此可以生产出很多种变化，适应不同的业务场景。所以也可以积累成为素材库，供团队的其他成员使用。

同时，我也建立了一个色板，可以用于表达一些状态（成功、失败、警告等），或者用在不同颜色主题风格的系统内。这样我们的模版能产生更多的变化，适用到更多的场景中。

四、总结

上文介绍了 Vector to 3D 的界面使用、如何制作模版以及分享了我在实际工作中应用的例子，我们现在已经掌握了在 Figma 中进行 3D 设计的流程。文章的最后总结一下做这件事的优点。

1.学习成本低

可以将 Vector to 3D 理解为是一个简化版的 3D 软件，移除了像传统 3D 软件比如 Cinema 4D、Blender 里面的很多复杂功能，仅保留基础能力。

2.Figma 内完成全流程

用这套工作流程可以使设计师不离开 Figma 工作环境就能生产出不错的 3D 素材，并且出图后也能在 Figma 内进行简单调色。不需要像传统 3D 工作流程那样在不同软件里的来回导出导入。

3.可定制程度高

Vector to 3D 的特点是基于矢量图形生成 3D 模型，所以我们能轻松生产出业务相关的元素，使得视觉素材能高度贴近业务场景。

4.风格高度统一

Vector to 3D 能够与 Figma 组件能力联动。可以将灯光、摄像机等全局参数记忆在组件中，替换子组件也能继承原本的材质、位置参数。同时能够将这些参数模版化，无限产出相同风格的视觉素材。

这套工作流除了在我自己的实际工作中有成功应用，也成功影响到了团队中的其他设计师。在这次分享会过后，团队中有50%成员已经用在需求中使用该插件来生成视觉素材了。

五、非 Figma 工作流

最后看到这里的朋友如果当前团队没有在用 Figma 作为工作软件，或者并非 UI/UX 设计师也想试试通过 SVG 图形制作 3D 模型的过程，这里我贴 Vector to 3D 的网页版连接：https://www.meimu.design/vector-to-3d/

A curious discovery

When my workflow had fully transformed from Sketch to Figma, I found there was an option “Case-Sensitive Forms” placed in several typeface setting panels. The appearance of the font might change slightly and occasionally when I enable this setting.

I was interested in this setting option, then I tried to find out concepts and related knowledge about the term “Case-Sensitive Forms.”

In this post, I will explain what Case-Sensitive Forms are, when should we implement this feature to uplift our design with several practices, and how to use it in our workflow.

Features

The “Case-Sensitive Forms” is a feature of OpenType features, which are like hidden compartments in fonts that allow us to change how fonts look and behave. When we use this feature, the font will:

1. Shift some punctuation marks up to a higher position;
2. Change oldstyle figures to modern figures.

Feature 1: Shifting some punctuation marks up to a higher position

In general, punctuation marks are vertically centered with lowercase characters, which is known as “x-height.”

However, when using the Case-Sensitive Forms feature, some punctuation marks are aligned with the height of uppercase characters, which we call “Cap height.”

Feature 2: Changing oldstyle figures to modern figures

Some fonts use oldstyle figures by default to add visual attraction. It is often used in traditional publications like books and newspapers since this font has a rhythmic beauty with varied heights.

When using the Case-Sensitive Forms feature, fonts will be directly changed to modern figures, also known as “lining figures.”

Realistic practices

Inspiring by the feature 1, shifting some punctuation marks up to a higher position, it is well-suited for compositions that mix uppercase characters, figures, and CJK characters.

Here is a list of compositions that might be visually improved by using the Case-Sensitive Forms feature.

1. International phone number

Because figure glyphs are as high as uppercase characters, the use of Case-Sensitive Forms is ideal for displaying phone numbers that include area codes.

2. Date and time

Similarly, date and time is also well-suited for using the Case-Sensitive Forms feature since they are typically consisted of figures and marks.

3. All caps text

To make titles or other important information visually prominent, we often capitalize the text, which is also ideal for using the Case-Sensitive Forms feature.

4. East Asian typography

East Asian typography looks like a square, meaning the visual height of Chinese, Japanese, Korean, and Vietnamese characters is similar to the “X” letter’s cap height.

Therefore, the Case-Sensitive Forms feature are also fitting for the East Asian typography scenario, ensuring marks are vertically aligned with the characters.

5. Sensitive information

When displaying sensitive information on digital interfaces, such as Social Security Number(SSNs), bank account numbers, and phone numbers, we often use asterisks (*) or dots (•) to partially obscure it. In that case, the Case-Sensitive Forms feature is highly suitable.

6. Text face

A rare scenario that may be ideal for using the Case-Sensitive Forms feature is text faces, such as “:D” and “:-)”

How to use

1. Supported typefaces

Only typefaces that support the OpenType feature of Case-Sensitive Forms can enable this feature.

It means that not ALL typefaces support this feature, even if we implement this setting in design tools or through coding. I’ve simply made a list to clarify which typefaces support it and which not.

Typefaces that support the Case-Sensitive Forms feature:

1. DIN Pro;
2. Inter;
3. San Francisco (fonts for Apple platforms);
4. Inria Sans;
5. Warnock Pro…

Typefaces that DO NOT support the Case-Sensitive Forms feature:

1. Arial;
2. Helvetica;
3. Noto Sans;
4. Roboto;
5. Source Sans;
6. Segoe UI…

In other words, the Case-Sensitive Forms feature only works on Apple devices if we use the system default font on our website.

2. Figma

Follow these steps to implement the Case-Sensitive Forms feature in Figma. Select a text layer, then:

1. Open the “Type settings” panel;
2. Switch to the “Details” tab;
3. Check the “Case-sensitive forms” option.

3. CSS

To use the Case-Sensitive Forms feature on the website, we just need to simply add font-feature-settings: ‘case’; to the element that we want to implement this feature.

The CSS Compatibility of this style is quite good. Again, we need to ensure the typefaces support the Case-Sensitive Forms feature; otherwise there will be no changes.

Set as default?

We’ve discussed many scenarios and advantages of using the Case-Sensitive Forms feature. So should we set it as the default style?

My answer is NO.

Although it can uplift visual details with numbers and capital text, it is quite awful when used with lowercase letters, which are more commonly used on our website.

However, we can safely implement the Case-Sensitive Forms feature in some components that always consist of numbers, marks, and capital letters. Here is the list of UI components:

1. Avatar;
2. Badge;
3. Pagination (Image viewer, Swiper and the likes);
4. Letter counter.

For comparison, let’s see the most common solution in which the Case-Sensitive Forms feature is not implemented on digital interfaces.

Recently, my team has been redesigning our mobile component library. I’ve suggested using the Case-Sensitive Forms feature on the components listed above. Let’s see the outcomes in the future.

References

1. Feature: case — Case sensitive Forms
2. 高级排版功能：Case-Sensitive Forms 是什么？

Uplifting your design details with the Case-Sensitive Forms feature was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.

Recently, I heard that Coursera has a UX design course developed by Google’s design team. This course covers the entire design process and teaches us how to present our portfolio, prepare interviews, and the like.

It is necessary to enroll in this course even though it is designed primarily for beginners and fresh graduates. It would enhance my English skills on one hand, and deepen my understanding of Western design practices and culture on the other. Since the term “UX design” is called out by Western designers and I am eager to compare Western design cultures with those I’ve experienced in China.

So I enrolled in this online course, trying to spare my time on it. Such as during lunch and dinner breaks on weekdays, or parts of the weekend. I completed the whole certificate within two months. And now I’d like to write down what I learned from this course:

1. Introducing concepts I had never heard of. Despite my 5+ yoe in a wide range of companies, from startups to large corporations in China, those new concepts opened up a lot of room for me to explore.
2. Enhancing my listening and reading skills. The course covers plenty of video and reading materials that include industry jargon that translators cannot provide. Moreover, certain phrases and sentence structures are repeatedly used throughout the course. I think my reading skills and speed are slightly improved.
3. Pointing out concepts like accessibility and equity early throughout the course. I used to think only seasoned designers or well-developed products consider these aspects, however, they are mentioned early on and repeatedly. These concepts resonated with me and will truly influence my work.
4. Elaborating comprehensive and detailed guidance for designers to prepare their portfolios, resumes, and interviews. They not only tell us what content should be included in our portfolios, but also how to prepare for interviews at different stages. I resonated with these instructions as well, since I did think those details over when looking for a new job.

Table of content

• New concepts
• Listening and Reading Proficiency
• Accessibility and Equity
• Guidance for Job Hunting

New concepts

I have consistently tried to think about and expand design boundaries through different aspects, which requires a breadth of knowledge. Here, I will share several new concepts along with my personal understanding.

Affinity diagram

This is a method of synthesizing that organizes data into groups with common themes or relationships. It can be used in different stages of the design process, such as during brainstorming or after collecting users feedback. The example below focuses on the latter.

After collecting a batch of user feedback, the design team condense each piece of feedback into a single sentence and write it on sticky notes. Then we post them up on a whiteboard or digital tools like Figma. Then the design team look for sticky notes that reference similar ideas, issues, or functionality and collaboratively organizes them into clusters representing different themes.

When I first learned about this approach in the course, I realized that this approach is similar to another method called “Card sorting” that was included in an article I translated earlier named [English to Chinese Translation] How we rebuilt Shopify’s developer docs. Both methods involve clustering sticky notes, naming these groups and summarizing the themes or relationships.

However, card sorting is implemented by external participants and aims to uncover users’ mental models to improve information architecture; Whereas affinity diagramming organizes a large amount of raw data to show the team which problems users are most concerned about and consider high priority.

* This concept is mentioned in Module 3 of Course 4 (Conduct UX Research and Test Early Concepts — Module 3 — Gather, organize, and reflect on data)

Digital literacy

This concept refers to an individual’s ability to gather, communicate, and create content using digital products and the internet. For example, senior adults or those living in areas with poor internet infrastructure may find it difficult to understand interfaces and functionalities, they are considered to have lower digital literacy.

In contrast, young people, especially those working in the information technology industries, are typically familiar with new software and concepts, and can quickly adapt to them.

This course does not dig deeply into this concept, rather, it emphasizes the importance of understanding our users. If our product targets a broad range of users, it is good to consider the needs of users with lower digital literacy. Moreover, this factor should also be considered when recruiting participants for usability tests.

* This concept is mentioned in Module 2 of Course 1 (Foundations of User Experience (UX) Design — Module 2 — Get to know the user)

Deceptive pattern

This concept refers to a group of UX methods that trick users into doing or buying something they wouldn’t otherwise have done or bought.

In the course, instructors clearly point out that this is an unethical and not a good practice. Businesses may lose their clients’ respect and trust once clients realize that they have fallen into deceptive patterns. I will share a few interesting examples that the course provided.

1. Confirmshaming: Making users feel ashamed of their decision. For example, a subscribe button on a news website usually reads “Subscribe now / No thanks”. BBut if the service provider wants to manipulate readers’ emotions, the text might be changed to: “Subscribe now / No, I don’t care about things around me.”
2. Urgency: Pushing users to make a decision within a limited time. For example, an e-commerce website might give you a coupon that is only available for 24 hours, prompting you to purchase items without a thoughtful consideration. The course doesn’t judge these marketing strategies or promotions; instead, it suggests that we should avoid putting pressure on users. As designers, we should try our best to balance business promotions and avoid manipulating users’ emotions.
3. Scarcity: Making users very aware of the limited number of items. For example, a popup or attractive advertisement stating “Only 5 items left in stock.” The course suggests that designers should concentrate on helping users to understand products better, rather than using designs to encourage impulsive buying.

It is really interesting that these deceptive patterns are so common in the Chinese e-commerce industry that it might seem unusual if those strategies were to disappear.

This seems to reflect cultural differences between China and the West. In China, core team members, such as designers, product managers, and operators, collaboratively discuss how to induce and prompt users to make a hasty decision. Also, we regularly hold reflections to discuss and share insights on how to deeply incite users’ motivation.

In 2018, I landed my first job as a UI designer at an e-commerce company. One of my main tasks is designing promotions, such as “claim your vouchers”, “flash sales ending in N hours”, and creating illustrations of red pockets and flying coins, and the like. I didn’t really like these approaches at that time, so I eventually turned to the B2B and SaaS industry, focusing more on UX design.

Although I am not fond of these types of designs, these seem to really help companies grow and generate income. We could stabilize our employment only if our company were earning profits. Perhaps that is an inextricable cycle: obviously, deceptive patterns are unethical and bad as they are inducing and annoying our users, but we must continuously implement these approaches and think about how to make them more effective.

* This concept is mentioned in Module 3 of Course 3 (Build Wireframes and Low-Fidelity Prototypes — Module 3 — Understand ethical and inclusive design)

Biases

The course thoroughly explains a concept called “implicit bias”. It refers to the collection of attitudes and stereotypes associated, influencing our understanding of and decisions for a specific group of people.

For example, imagine you’re designing an app to help parents buy childcare. To personalize your onboarding process, you start by displaying bold text saying, “Welcome, moms. We’re here to help you…”

This is an example of implicit bias, since it excludes every other type of caregiver, like grandparents, guardians, dads and others.

In addition, here are some interesting biases the course introduced:

1. Confirmation bias. Refers to the tendency to find evidence that supports people’s assumptions when gathering and analyzing information.
2. Friendliness bias. Refers to the tendency to give more desirable answers or positive comments in order to please interviewers. This usually occurs in usability tests, where participants may not share their honest feedback because they are afraid that real answers or negative comments might offend interviewers and be considered unfriendly.
3. False-consensus bias. Refers to the tendency that people tend to believe that their personal views or behaviors are more widely accepted than they actually are, and consider others’ opinions to be minor or marginal. For example, an optimist might think that most people around the world are optimistic; or designers can easily understand iconographies and illustrations they created, they might assume other users might easily to understand too.

I was shocked when I was learning this part. I strongly resonated with these biases which I had never perceived before. After all, the course lets us be aware of these biases and provides approaches to help us avoid falling into these pitfalls.

* This concept is mentioned in Module 3 of Course 3 (Build Wireframes and Low-Fidelity Prototypes — Module 3 — Understand ethical and inclusive design)

I listed some concepts above that I had barely encountered in my workspace. Becoming a UX designer appears to require a broad range of knowledge, such as design, the humanities, psychology, and sociology. I am now interested in psychology after completing this course.

Listening and Reading Proficiency

There are plenty of listening and reading materials involved in the course. Typically, each video lesson is accompanied by an article. If there are additional knowledge points, a single video might be accompanied by two or three articles.

Most instructors in the course speak with American accents. They also speak slowly and clearly, which makes me comfortable and usually allows me to understand without opening closed caption. Sometimes, I need to rewind a few seconds when they are speaking long sentences with many clauses or introducing new concepts, and I will open closed captions if I am still confused.

It is worth pointing out that the course contains lots of industry jargon, and I resonated with this because I used similar approaches or processes in my workspace by using Chinese. As a learner, I created a spreadsheet to record expressions that might be useful, such as:

1. Above the fold, the content on a web page that doesn’t require scrolling to experience;
2. Deliverable, final products like mockups or documents that can be handed over to clients or developers to bring designs to life.
3. Digital real estate, space within the digital interface where designers can arrange visual elements;
4. Firm parameters, refer to rigid design boundaries or limitations like time, project resources, and budget.

I think it is valuable to collect this industry jargon because it is authentically expressed, which can’t be translated by common translation tools. This will be helpful for me to read design articles and write blogs in English.

Accessibility and Equity

Accessibility

The course introduces several assistive technologies, such as color modification, voice control, switch devices, and screen readers, which can help people with different types of disabilities to use our products easily.

Instructors also point out that even people who don’t have disabilities, or who do not perceive themselves as having disabilities might benefit from these assistive technologies. The course suggests that we think these factors over throughout the entire design process. For instance:

1. Supporting color modification. Features that increase the contrast of colors on a screen, like high-contrast mode or dark mode;
2. Supporting voice control. Allows users to navigate and interact with the elements on their devices using only their voice. They also mention a concept called “Voice User Interface (VUI)”;
3. Supporting switch devices. This is a one-button device that functions as an alternative to conventional input methods such as the keyboard, mouse, and touch, allowing users to complete common tasks like browsing webpages and typing text;
4. Supporting screen readers. Allows users with vision impairment to perceive the content. The course suggests that we write alternative text to images, add appropriate aria labels to interactive elements like buttons, and consider the focus order of elements.

Here is a website that demonstrates the color modification feature: HubSpot.com

On the top navigation of this website, it provides a switch for us to toggle a high-contrast mode. Moreover, it also supports reduced motion effects — if I enable the reduced motion setting on my device, this website will minimize motion effects as much as possible.

Equity

The course also introduces a concept called “equity-focused design.”

Instructors clearly define the difference between “equality” and “equity”:

1. Equality: Providing the same amount of opportunity and support, everyone receives the same thing;
2. Equity: Providing different amount of opportunity and support according to individual circumstances, ensuring everyone can achieve the same outcomes.

The course also points out that equity-focused design means considering all races, genders, and abilities, especially focusing on groups that have been historically underrepresented or ignored when building products.

They use a survey question as an example: when gathering participants’ demographic information like gender, it is not enough to provide three options: “Male”, “Female” and “Other”. To make our design more inclusive and equitable, we should offer additional choices, including “Male”, “Female”, “Gender-nonconforming”, “nonbinary” and a blank field. The latter provides non-conventional gender options, uplifting those who might be marginalized in conventional surveys. This approach also aims to balance the opportunities for all groups to express themselves, ensuring their voices are treated fairly and heard.

In this lesson, I clearly faced a culture gap from the West. In fact, I don’t really like to dig into this concept deeply, mainly because I can’t determine whether this approach is right. Sometimes I think it is unnecessarily complicated, but at other times, I recognize that there are people with non-traditional genders around us who may truly be eager to be treated fairly.

When I was learning this lesson, I realized that there was an opportunity to incorporate accessibility features into the project I was recently working on. I will write a new post if this project lands successfully.

* This concept is mentioned in Module 2 of Course 1 (Foundations of User Experience (UX) Design — Module 2 — Get to know the user)

Guidance for Job Hunting

In the final course, instructors teach us how to lay out a portfolio and what content should be included. They also inform us the process of interviews and how to thoroughly prepare for interviews.

The guidance they mentioned is for the Western workplace, which may not seamlessly fit in the Chinese workplace. For example:

1. They point out that designers should have a personal website and case studies regularly. However, Chinese designers prefer to publish their case studies on public platforms like ZCOOL and UI.CN;
2. They also teach us how to build our digital presence and network through LinkedIn. However, these approaches are not common in the Chinese job market, where the most popular methods are directly submitting resumes and getting recommendations through acquaintances.
3. They inform us how to handle panel interviews. I have interviewed with a wide range of companies, from startups to corporations, and never encountered panel interviews, which means that the panel interview is not popular in this industry.

I was deeply impressed by how they elaborated on the preparation and important considerations during the interview process. For example:

1. Research the main business of the company you interview for beforehand, and clearly understand why you are a good fit for the company;
2. Prepare answers to common interview questions beforehand, such as a personal introduction, your strengths, and descriptions of your case studies;
3. We should learn how to answer difficult questions using the STAR method, and prepare well before starting an interview;
4. Adapt the focus and questions according to the interviewer’s role to show you are a professional;
5. During the interview process, you might be asked to complete a task. Therefore, we should practice the ability to think aloud and clearly define questions, since interviewers might pose vague questions on purpose.

I resonated with the approaches and tricks mentioned in the course that I had previously used, which gave me a strong feeling that I was on the right track.

Additionally, the course also provides detailed instructions on how to pursue freelance design work. For instance:

1. Clearly identify your target audience and understand why they should choose your service;
2. Know your competitors, identifying what they can’t provide but you can;
3. Promote your service and build word-of-mouth by attending online and in-person events, and getting recommended through acquaintances;
4. Calculate the business expenses, set fair prices for your services, and make financial projections — estimate what your finances will look like in the first month, the first 6 months, and the first year.

* This concept is mentioned in Module 3 of Course 7 (Design a User Experience for Social Good & Prepare for Jobs — Module 3)

To sum it up

Well, above are lessons I’ve learned from the Google UX Design Professional Certificate on Coursera over the past two months. I think that this is an interesting course, although not all content can be applied in my daily work, I’ve also learned the thinking processes and workplace cultures of designers in another part of the world.

I strongly recommend designers reading this post consider to enrolling in the Google UX Design Professional Certificate, by doing this, you might probably gain new insights. The course costs $49 monthly, which is not expensive. It is likely to complete the entire course over two or three months if you have a full-time job.

Things worked as I expected, and I will start my next project in the second half of the year.

Lessons I learned after completing the Google UX Design Professional Certificate was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.

最近了解到 Coursera 这个平台里面有一个 Google 设计团队出品的的 UX 设计课程，课程里会介绍完整的 UX 设计过程，并且教我们怎么写作品集和准备面试之类的。

即便这是一门面向初学者或应届生的课程，我觉得也有必要参加这个课程看看。一方面能锻炼下自己刚闭关修炼出来的的英语能力，更重要的是还能了解下西方职场的设计流程和设计文化（毕竟 “UX 设计” 这个概念是西方人创造出来的），我一直想对比看看老外的设计文化和自己这几年在国内职场的感受有没有什么异同。

于是就报名参加了这个网课，都是抽时间来学习的。比如工作日吃午饭和吃晚饭那段时间，或者周末的部份时间等等。总共花了 2 个月完成了所有课程。写这篇文章的目的也是记录下结课之后的感受：

1. 里面提到的一些概念我没有听说过。即便我工作了 5 年，在小公司和大集团都呆过，里面有些概念仍然给了我很大的探索空间；
2. 英文听力、阅读能力锻炼。里面有大量的视频和阅读材料，用词应该就是比较地道的行业术语，这些是翻译软件不能提供的。而且里面的材料都会不断重复一些短语或句型。我觉得我的阅读能力和速度是有所提升的；
3. “无障碍” 和 “公平” 的概念被很早提及并贯穿全课程。我一直以为只有比较成熟的设计师或产品才会考虑到这些，但这些概念在课程中很早就被提及了，而且是反复提及。这触动了我，并真正地影响到了我的工作；
4. 提供了全面且周到的指引帮助设计师准备作品集/简历/面试。这方面内容他们写得很细，告诉我们作品集里应该包含哪些，针对不同面试阶段所做的准备等。里面写到的东西我很有共鸣，因为我在找工作的时候也会去思考这些细节。

新的概念

工作这几年，我一直会尝试从更多不同的维度来思考和扩展原有的设计边界，做到这点需要有比较宽广的知识面。这里分享下我在课程里了解到的一些新概念，以及我的理解。

Affinity diagram 亲和图

这是一种组织数据的方法。从不同的反馈和数据中整理出他们的相似之处和关系。亲和图可以用在不同的设计阶段，比如在头脑风暴中，或者收集到用户反馈后，这里以后者为例子。

具体做法是在收集好一批用户反馈后，将每一个原始反馈浓缩成一句话，写在便利贴上并将它们都贴在白板上（当然，也可以用在线工具如 Figma 完成）。然后团队成员一起看这些内容，将提到相似概念/问题/需求的便利贴放在一起，并给这一堆便利贴起个名字概括他们的共同点。

根据分组结果，我们可以总结出一些趋势、痛点，了解到我们需要解决的问题也为后续的洞察报告提供了依据。

最开始在课程里了解到这个方法的时候，我突然想起来这与我两年前翻译的文章：【译文】我们如何重建 Shopify 的开发者文档 里提到的 “卡片分类法” 很像，都是将相似的卡片堆成一组，给该组命名，然后得出结论。

但卡片分类法里面 “分类” 的动作是由团队外部的人参与的，并且用于揭示用户的心智模型并为解决网站信息架构问题提供指引；而亲和图则是通过组织大量原始数据，告诉团队有哪些问题是用户关心的，亟待解决的问题。

*该概念在第四门课程的第三个模块中提及 (Conduct UX Research and Test Early Concepts — Module 3 — Gather, organize, and reflect on data)

Digital literacy 数字素养

这个概念大意是指人们对于数字产品、网络来获取信息、交流和创造内容的能力。比如一些年长的人、生活在网络没那么普及的环境中的人，他们对于使用电子设备和互联网就会有些障碍，理解功能和界面也会感到困难。而年轻人，特别是互联网行业的从业者则对这些就比较熟悉，各种新软件、新概念都能很快上手。

课程中对这个概念并没有展开太多，主要是提醒我们作为设计师，要了解到我们的用户是谁。如果是一个面向较宽广的用户群体，最好考虑也到对电子设备和互联网没那么熟悉的人。包括在做可用性测试时，招募的参与者最好也考虑到这个因素。

*该概念在第一门课程的第二个模块中提及 (Foundations of User Experience (UX) Design — Module 2 — Get to know the user)

Deceptive pattern 欺诈性设计模式

指的是一种设计方法：通过设计去诱导用户去做一些本来不想做的事情，或购买本来不想买的东西。

在课程中，明确指出这是不道德的事情，不是好的做法。一旦用户认为自己陷入了欺诈性设计模式当中，公司将会失去用户的尊重和信任。课程中列举了一些例子，我可以拿几个有意思的的分享出来。

1. Confirmshaming (羞辱性确认): 让用户对自己作出的决定感到愧疚。比如一个新闻网站的订阅按钮，文案里原本可以写 “立即订阅 / 不了，谢谢”，但为了操纵用户的情绪，文案写上 “立即订阅 / 不了，我不关心身边的事情”。
2. Urgency (急迫性): 引诱用户在 “有限的时间内” 作出决定。比如电商网站里给你送了一张仅限当天使用的优惠券，促使你赶紧付钱消费。课程里指出并重点不是限时促销这件事情，而是在这过程中给用户增加了消费的压力。作为设计师，我们应该在曝光公司的促销活动的情况下，尽量避免操纵用户情绪。
3. Scarcity (稀缺性): 使用户感受到这件商品非常稀缺。比如一个弹窗推送或明显的广告写着 “商品仅剩 5 件”。课程中建议设计师聚焦于怎么帮助用户更好地了解该产品，而不是利用设计促使他们进行冲动型消费。

有意思的是这几种 “欺诈性设计模式” 在咱们国内电商环境中太常见了，以至于没有这些反而感觉不正常。

看起来这是国内外文化的差异的一种体现。在国内的环境中丝毫不会避讳这些东西，反而设计、产品、运营都会一起构思怎么做才能更好地 “诱导” 用户做某些事情。甚至还会在内部复盘、分享，看看过程中有哪些地方可以继续改进。

2018 年，我的第一份工作是在面向消费者的电商公司里做 UI 设计师，经常要在界面上做出 “领取优惠券”、“秒杀价剩余 N 小时” 和礼包、金币满天飞的插画等设计，正正是因为自己不喜欢做这种设计，之后才转向了更注重 UX设计的做 B 端、SaaS 行业。

虽然自己本身是一点都不喜欢这种设计方式，但这似乎能实打实地帮助到公司获取收入。公司有一份好的收入，大家的工作才能稳定。似乎陷入了一个无法走出的循环 —— 明知道这种设计方式是不对的，是有诱导性质且给用户带来烦扰的，但又不得不继续做，并想办法做得更好。

*该概念在第三门课程的第三个模块中提及 (Build Wireframes and Low-Fidelity Prototypes — Module 3 — Understand ethical and inclusive design)

Biases 偏见

课程里着重介绍了一个叫做 “隐性偏见 (implicit bias)” 的概念。“隐性偏见” 指的是我们潜意识里有一种态度或偏见，影响了我们对某一群体的理解或决定。

比如一个餐厅老板收到两份简历，求职者 A 是一个二十多岁的毕业生，没有餐饮行业经验；而求职者 B 则是一个 50 多岁的人，有 30 多年餐饮行业经验。但最终老板选择了求职者 A，因为他认为年轻人的体力更好，做事情会比 50 多岁的人要快。这就是一个 “隐性偏见” 的例子。

课程中还介绍了其他几种偏见，这里也分享一些我觉得有意思的：

1. Confirmation bias (确认偏见)。指的是人们在收集信息和分析信息的过程中，倾向于寻找支持自己想法的证据。甚至尝试以更贴近自己预想结果的方式来解释数据；
2. Friendliness bias (友善偏见)。指的是为了令其他人满意，受访者更倾向于做出访问者希望得到的答案或者做出积极评价。通常发生在可用性测试当中，受访者觉得说出真实答案或负面情绪的答案会被认为冒犯和不友善，不将自己的真正想法说出来；
3. False-consensus bias (错误共识偏见)。指的是人们倾向于认为自己的观点或行为比实际情况更广泛地被认同，并且觉得其他人的观点或意见是被少数人接受的。比如一个人很乐观主义，就会认为世界上大多数人都是乐观主义；设计师能够很轻松地理解自己设计出来的图标、图像含义，就会认为其他用户也能轻易理解。

学到这里的时候我似乎被当头一棒，我似乎对里面提到的不少偏见都有共鸣，并且自己从来没意识到有这么一回事。总的来说，课程希望我们认识这些偏见，然后提供方法教我们怎么避免这些偏见。

以上列举了几个我在课程里了解到在日常工作中不怎么接触到的概念。可以看出来做一名 UX 设计师似乎得有宽广的知识背景，比如设计、人文、心理、社会学等等。通过这门课程，我觉得我对心理学产生了一些兴趣。

* 该概念在第三门课程的第三个模块中提及 (Build Wireframes and Low-Fidelity Prototypes — Module 3 — Understand ethical and inclusive design)

听力、阅读能力

课程里面的听力和阅读材料实在是太多了，基本上是一节视频课程，搭配一篇的阅读，如果有其他可以衍生出来的知识点，甚至会多篇阅读。

里面绝大多数老师都是美式口音，语速有刻意地减慢，我听着很舒适，绝大部分情况下不用看字幕。只是到了一些包含大量从句的长句子或新概念时可能会需要倒退一下多听几遍，再听不懂就会开字幕来看。

值得一提的是，里面有大量的行业术语，有很多我在国内日常工作中的用到的设计方法/流程等，这里都有出现到。作为学习者，我自己有做一个表格，把值得记录下来的表达方式都记下来，比如：

1. Above the fold 指的是在首屏（不用滚动）就能看到的内容；
2. Deliverable 设计的交付物；
3. Digital real estate 大概是指视窗范围或可供设计师发挥的空间尺寸；
4. Firm parameters 指一些设计过程中的限制，如时间，项目资源和预算等…

我觉得积累这种行业词汇有一个宝贵之处是，它的表达很地道，用通用的翻译软件是做不到的。这对我阅读设计经验文章，或者自己用英文写设计博客很有帮助。

无障碍和公平

无障碍

课程中介绍了几种辅助技术 (Assistive Technology)，如颜色模式、语音控制、Switch 设备和屏幕阅读器等帮助身体有障碍的人们更好地使用我们的产品。课程强调即便是健全人，或者认为自己是健全人的群体，也有可能会用到这些辅助技术。课程建议我们在设计的全流程都考虑这些因素。具体的做法，比如：

1. 支持多种色彩模式。如亮色/暗色模式，支持增强对比度和减弱透明度等效果；
2. 提供语音控制支持。允许用户通过声音来导航和与界面上的元素交互。另外，里面提到有个概念叫做 “VUI”；
3. 支持一种叫做 “Switch” 的设备。这是一种代替键盘、鼠标或手指等常见输入方式的设备，通常只有一个按钮。用户就是通过一个按钮来实现浏览网页、输入文字等日常操作的；
4. 支持屏幕阅读器。确保人们可以在看不见屏幕的情况下也能获取到主要内容。课程建议我们给图片添加替代文字，或者给按钮等控件加上合适的标签，并且留意元素的聚焦顺序。

这里分享一个在这方面有所体现的网站：HubSpot.com

这个网站提供了强对比的色彩模式，在顶部导航栏里有开关可以切换。同时也支持减弱动画的效果，如果我的设备在系统设置里设置了减弱动画，这个网站的大部份动效都会被移除。

公平

课程中介绍了一个概念叫做 “以公平为中心的设计” (equity-focused design)，并厘清了 “平等” 和 “公平” 这两个概念：

• 平等是每个人都有相同的机会和支持，即每个人都拿到了同样的东西；
• 公平是根据每个人不同的情况而提供不同的机会和支持，最终大家都能有相同的结果。

课程中指明，面向 “公平” 的设计，需要考虑到所有种族、性别、能力，特别是一些曾经被忽视和排除的群体。

他们以一个问卷问题作为例子：在收集受试者的性别信息时，如果只提供三个选项：“男”、“女” 和 “其他” 是不够的。如果想要更包容和公平我们应该提供：“男”、“女”、“非常规性别”、“非二元性别” 和 “请填写”。后者通过提供非传统性别选项和自定义选项，关注到了那些可能在传统问卷调查中被边缘化的群体。试图平衡不同群体间的表达机会，确保他们的声音被平等对待和听见。

从这门课程里我正面感受到了来自西方文化差异。实际上我不是很想太深入学这里面的门道，主要是我没法判断他们这种做法到底是对还是错，我有时候会认为这是在闲着没事干，有时候又认为我们身边确实也会有这种非传统性别的人，他们或许真的需要被 “平等对待”。

学到这里时，刚好公司的工作中有机会可以让我在设计中加入对无障碍的考量，我便抓紧机会在公司实施了一番。如果我的计划落地成功，我也会在这里分享出来的。

*该概念在第一门课程的第二个模块中提及 (Foundations of User Experience (UX) Design — Module 2 — Get to know the user)

求职指引

最后一课老师教授了我们怎么做作品集、一份作品集里要包含哪些东西、面试的流程、怎么准备面试等。

课程里讲述的都是西方世界的职场规则，有些未必在国内职场适用，比如：

1. 比如他会提到设计师应该有一个自己的个人网站，里面需要及时更新自己的作品。但在国内大家似乎更喜欢将作品传上平台提高曝光度，比如站酷和 UI 中国；
2. 他会教我们怎么建立自己在互联网上的形象并通过 LinkedIn 去做 Networking。但似乎在国内的职场上没有这一步，身边的人多数都是直接在网站上投简历，或者有少量的人是熟人内推进去的；
3. 里面有教我们怎么应对小组面试。我这几年在国内面试了大大小小公司，没试过有小组面试的情况，说明小组面试在我们的行业内不是特别流行。

印象比较深的是在课程里他提到了对于面试的准备，以及面试过程中的注意事项。课程里说得真的挺细的，比如：

1. 面试前要了解好公司所做的业务，清楚自己为什么适合去那家公司；
2. 提前准备好一些常用的问题，比如个人介绍、个人优势以及介绍设计案例等；
3. 学会用 STAR 法则回答困难的问题，在面试前提前练习好；
4. 根据面试官身份来改变面试的侧重点和要提问的问题，需要体现出自身的专业性；
5. 面试时可能会有现场测试题。所以我们要练习好将自己的想法说出来的能力，也要有界定清楚问题的能力（因为有时候面试官特意给出很模糊的问题）

有时候刚看看到课程里提到的方法和技巧，正好是我有用过的，我会感到有共鸣，觉得自己的方向是对的。

另外，课程里还有教我们如果想走自由职业，要遵循怎么样的步骤。写得还比较详细，我这里列举几点：

1. 明确目标用户是哪些群体，他们为什么要选择自己的服务；
2. 了解自己的竞争对手，看看有没有东西是他们提供不了而自己是可以的；
3. 通过参加线上推广、线下活动、熟人推荐等方式推销自己的服务和建立口碑；
4. 计算开支，合理定价，并且制定财务计划 —— 构思第一个月、第六个月或第一年自己的财物状况是怎样的。

*该内容在第七门课程的第三个模块中提及 (Design a User Experience for Social Good & Prepare for Jobs — Module 3)

总结

以上就是我这两个月以来在 Coursera 平台里学习 Google UX 课程的一些收获。我觉得还是挺有意思的一门课程，即便不是所有内容都能在日常工作中应用，但至少知道在地球里的另一个世界，那边的设计师他们的思考习惯、职场文化是怎样的。

我很推荐看到这里的设计师们去这门课程 Google UX Design Professional Certificate 里瞧瞧，相信大部份人都是有收获的。收费不是很贵，是按月来收费。每个月 49 美刀，工作党每天抽点时间来看，一般 2～3 个月都能完成了。

事情按照预期发展，五一假期结束了这门课程，下半年又可以开始捣鼓另一件事情了。