Normal view

There are new articles available, click to refresh the page.
Before yesterdayStories by 李瑞东 on Medium

【读书笔记】UX for Business

最近看了一本名为 UX for Business 的书,这本书主要在讲设计师如何做有价值的事情。让我们跳出设计画板,在更高的层面理解日常工作。理解做什么,怎么做,怎么做到极致。但个人认为作者写得有些口语化,且不必要的内容重复过多。很多地方讲得比较浅,没有太多案例,推荐指数3颗星吧。

VDP 框架

作者强力推荐了 “VDP 框架” 来确保我们时刻在做正确、有效且对公司有价值的事情。

V for Value 价值

当你的设计同时满足了用户和公司的需求,你就在创造价值。

作者将用户需求分为两类,一类是效率类需求(Efficiency),另一类是娱乐类需求(Entertainment)。当设计师在面对效率优先的场景时,需要帮助用户用更少的时间、精力和钱来做事情,而不是更多。总的来说,就是让用户用更少的成本完成一件事。

举个例子:在烘培店里,如果一个新的烘培配方可以让烘培师用更少的鸡蛋做到和以前一样好吃,那么这就是一个好的配方设计。

聚焦能为用户/公司创造价值的地方:新增、购买、下载等流程。

D for Diagnosis 分析

指的是系统性地收集和分析问题,确保我们在做正确的事。作者在书中分享了做从设计分析到实施方案的思路。

1.了解背景

作者指出 UX 设计师的工作实际上是基于当前的信息和限制(如:业务指标、用户诉求、产品目标、、问题反馈、时间/资源限制等等)来产出解决方案来改进产品。

就像医生在看病时,会问病人有什么症状、有什么感觉、最近吃过什么、有没有对什么过敏等等,通过多种角度来下结论。

UX 设计师也要通过类似的方式来设计,想做出一个好的方案,就需要更多的信息。5W就是一个好的方法:

  • Who:用户是谁?他们的特征和需求是什么?
  • When:什么时候会有这个问题?
  • Where:在哪里会遇到这个问题?
  • What:能解决什么问题?
  • Why:为什么用户需要它?

2.发掘+分析问题

有时候我们收到一些产品体验的反馈,这可能只是一个问题的表象,仅仅解决它只是在打补丁,没有从根源性解决问题。

某个新功能的使用情况不理想,可能并非是该功能设计得不好,而是在上一层的漏斗出现问题。所以想要挖掘到深层次的根源问题,需要通过在多个问题之间来回推敲。

收集足够多的问题,为下一步做准备

3.找到问题共同点

将同类的问题归类好,利用前面的 5W 分析,比如将属于同一个 When 的问题归在一类,同一个 Who 的问题在另一类。

这种做法有时候会让我们不仅仅在做当前需求,还能帮助我们发掘到其他带改进的点。

4.规划改进问题

这一步就是将我们观察、收集到的信息转化为行动了。

前几步我们列出了问题的表象,并将其分类。这一步需要去思考什么引发了这一连串有关联性问题。比如一个页面的 Like 按钮点击量很少,但用户反馈中他们都很喜欢这里的内容,那我们就会假设是 Like 按钮做得不够明显,解决方案随之而来。

我们会进行不止一次的假设,按照可能性的高低来按顺序尝试解决方案。

5.验证结果

最后,将我们觉得可行的解决方案推进上线,基于效果决定是在当前解决方案下改进,还是换一个解决思路,甚至收集更多信息后再次进行设计。

P for Probability 可能性

利用 “可能性” 来优化设计,将价值最大化。作者通过分享了以下观点来阐述可能性在设计中的应用。

1.越靠前、越明显的内容具有更多的可能性。比如一组选项,第一个选项通常来说都是更大概率被选择的。所以,把重要的、能创造价值的内容做得更靠前和明显;

2.事情是线性发展的。你不能在完成第一件事之前完成第二件事,就好比我们在浏览一个导航的时候,如果我们找到了可能合适的跳转入口,我们就会直接点击,不会尝试去看后面的内容了;

3.用户在准备好做决定时才会去做决定。就好比电商场景,用户都会在足够了解产品之后,才决定是否购买,那么“购买”按钮通常就不会是页面上的第一个元素。

4.默认值能影响可能性。默认的值通常是最多人进行选择的,所以要思考怎么设计默认值才能提高用户使用效率,或者对公司有价值。

为内部系统做设计

为公司的内部系统有一个明显的特点:我们的用户不会流失。因为公司的雇员必须按照公司要求用某个系统完成工作,比如登记工作任务的工单系统、用于请假、报销的 OA 系统等等。

我们不需要考虑所谓的参与度、忠诚度,所以在用户价值/公司价值的取舍中,我们可以更多地倾向公司价值。

内部系统对效率的关注度会更高,因为不需要靠这个产品来赚钱。找到流程中的障碍并解决,是内部工具设计师的关键能力。

提升效率不光是对使用内部工具的员工有益,对公司的降低成本这种目标也是有价值的。高效率的工具可以让公司少雇佣一些雇员,帮助公司减少人力成本。作者甚至提到,如果内部工具能让小团队的生产效率提升得足够多,小公司也能和大公司竞争。

为商业化 SaaS 产品做设计

本书中提到一类产品属于 Sales-Driven 销售导向产品,对应到国内常用术语应该叫做商业化 SaaS 产品。

通常来说,做 SaaS 业务的公司通过卖这些获得收入:

  1. 席位:使用该产品的人数;
  2. 数据:使用服务的次数;
  3. 功能/模块:使用更强大功能的能力;

设计师需要清楚自己所负责的 SaaS 产品的收入来源,为公司所出售的服务进行设计。

共鸣片段

To improve conversion (i.e., get more people to finish your flow), think about everything you request from the user like a cost. Every question is a cost. Every minute is a cost

流程优化时,尝试将用户的每一步操作成本降到最低。鼠标移动、点击、鼠标滚轮、视线移动等等,都是操作成本。作者还提到一个观点,可以从最后一步开始优化,从后往前改进。因为在最后一步才导致转化失败会显得之前的努力都是徒劳。

UX is not what you do in Figma or a ticket in agile planning or the contrast of your button labels.
UX is a general process of designing things for humans.

我认为 UX 设计并不仅是 Figma 里一个个连接起来的页面,这只是表达清楚了页面/功能之间的跳转逻辑。UX 设计师是在为用户进行工作,需考虑到用户在流程中的使用所有体验,包括:

  • 浏览页面过程中的体验,比如信息层级设计,内容排版策略(例:恰当地设定文本换行规则);
  • 用户行为与系统交互中的体验,比如在进行增删改查时的功能引导、交互逻辑、操作反馈(例:校验表单的时机)、使用帮助、边缘场景闭环体验等;
  • 利用原生浏览器能力进行体验极致化,比如设置给 “版本号” 或 “错误代码” 的字段设置 user-select: all; 用户需要复制时,右键到文字区域就能自动全选该文本块,省去用鼠标框选的步骤;
  • 等等…

所以有时候做 “体验设计” 并不是在 Figma 里画图(这只是其中一种传达解决方案的形式),而是要提供一切能改进用户体验所需要的智慧结晶。

Design is a process, but not just a one-time process. We iterate!

设计是一个迭代过程,前面提到设计师是基于当前已知的信息和限制来提供解决方案。但世界上很多事情每天都在改变,产品目标会变,用户诉求会变,公司战略会变等等,所以每次迭代都是基于新的已知的信息进行改进。

Most importantly, what is the one thing the users should achieve on this page, if they only do one thing?

这句话提醒设计师,时刻将目标记在心头。当设计方案有陷入“既要又要”、“没有重点” 的困境时,拷问自己:在这个场景中,用户最重要的事情是什么?将最重要的事情做好。

sometimes the best design solutions require the designers and developers to do more work so users can do less.

这个深有同感,设计师和开发者费很大劲儿做出来的迭代,有时候只是帮助用户将使用流程更简化。

结语

第一次写读书笔记,改进的地方很多。但我会坚持阅读,纯粹觉得阅读能让我在这浮躁的社会,所谓的快节奏环境里慢下来。

探索 JPG 和 PNG 图片的压缩表现、算法与应用

前段时间做了些展示页,工作时需要给到切图给前端。以我的习惯,每次都会导出 PNG 并压缩后才交付给前端。有一天我突然想到:

为什么我每次切图时下意识都是会提供 PNG 格式给开发,而不是使用 JPG 格式的图片?这是什么时候开始的习惯?

回想起来应该是我刚刚进职场的时候,在一些设计文章里听过的说法:

  1. PNG 图片支持透明通道,适用场景比 JPG 要更加宽广,无脑 PNG 即可;
  2. PNG 图片支持 “无损压缩”,所以图像质量会比 JPG 好一些。

第一点毋庸置疑,但对于第二点我是有点怀疑的:PNG 图片的质量真的在任何时候都比 JPG 要高吗?并且更想知道所谓的 “无损压缩” 是什么,真有这么厉害的技术?所以我打算花点时间做下研究,顺便将研究结果分享给其他团队的设计师们。

这篇文章是一篇在团队月度分享会的记录,分享会内容主要是在回答这个问题:

JPG 和 PNG 分别适合储存什么类型的图片?

回答完这个问题后,我会简单介绍下 JPG 和 PNG 图片压缩机制。正是因为 JPG 和 PNG 这两种图片格式的压缩机制的不同才导致适合储存不同类型的图片。

以及扩展一下思路,会介绍一个我已经实际工作用过的方法:通过 CSS 的混合模式节省网页图片资源

一、图片压缩分析

分析方法

这次我用了三种类型的图片进行分析,都是我在实际设计工作中有可能导出成位图交付给前端开发的图片类型:

  1. 颜色丰富的 Banner 图:测试压缩算法在细节保持方面的表现
  2. 过渡柔和的背景图:测试压缩算法在处理低色彩复杂度时的表现
  3. 界面设计图:测试压缩对大色块、文字和边缘清晰度的影响

具体的分析过程:拿三个在设计工作中常用到的图片类型(相同尺寸、均无透明通道)进行压缩,以对比 JPG & PNG 图片在压缩前后的表现。分两个维度进行对比:图片体积图像质量

分析结果

一、图片体积对比

由上图对比可以比较直观的看到,前两个类型(颜色丰富的 Banner 图、过渡柔和的背景图)在图片体积上,JPG 格式图片的体积要比 PNG 格式的图片体积小得多。

通过这一轮对比,我们可以得出结论:

  1. 画面颜色丰富、颜色过渡比较细腻柔和的图片,JPG 图片的体积比 PNG 的更小;
  2. 画面颜色越丰富,JPG 图片越能节省空间;
  3. 颜色数量较少时,PNG 图片的体积比 JPG 图片的更小;
  4. PNG 图片在压缩后,色块、文字的边缘的质量会比 JPG 图片要好得多。

二、图像质量对比

对比一:颜色丰富的 Banner 图

这一轮我们会放大图片的局部,对比 JPG 和 PNG 图片在经过压缩后,图像质量的区别。

在颜色丰富的图像中,JPG 图片的颜色过渡质量比 PNG 好得多,即便是压缩过后也能保持柔和的过渡。反观 PNG 图片,则是出现了明显的色块。

在文字、边缘的展示方面,PNG 图片则比 JPG 图片好一些。PNG 图片保持了原本清晰、锐利的边缘,而 JPG 图片则在处理边缘时有些许杂色。

对比二:过渡柔和的背景图

这是一个令人意外的结果,在图像内容比较简单,仅仅只有一些色彩过渡的时候,JPG 和 PNG 图片的质量都很接近。只有在放大很多倍的时候才能看到 PNG 的图片过渡效果比 JPG 要差一些,还是出现了和前一种类型类似的色块现象。

为了探究得更深入些,我在这里用了一张暗色系且过渡柔和的背景图进行同样的压缩测试,这次的测试结果对比会明显很多。

在深色系且有柔和过渡的图片当中,JPG 图像的质量明显比 PNG 要高。如上图所示,PNG 图片的色块和噪点已经比较明显了,而 JPG 仍然保持较柔和的过渡。

对比三:界面设计图

在对比界面设计图时可以看到,PNG 格式的图片在处理色块边缘、文字边缘时都比 JPG 图片要好得多,边缘很清晰锐利,甚至和压缩前的原图没有什么分别。

三、总结

经过上述对三种不同类型图片的图片体积、画面质量对比后,我这里总结出了以下规律:

  1. JPG 格式适用于颜色丰富,过渡柔和,有丰富的颜色渐变和复杂的视觉元素的图片。比如网站 Banner、大场景、3D 渲染图、摄影图片等,此时用 JPG 图片可以得到体积小且颜色漂亮的图片;
  2. PNG 格式适用于颜色数量少,色块切割明显的图片。比如界面、扁平插画、Logo,带有文字的图片等,此时用 PNG 图片可以得到体积小,色彩准确且边缘清晰的图片。

二、图片压缩过程

这一章会探索 JPG & PNG 图片的压缩过程,这也是导致上文提到 JPG 和 PNG 压缩后图像差异的原因。

JPG 图片压缩过程

JPG 图片压缩过程主要有以下几步:

  1. 色彩空间转换(预处理)
  2. 下采样(有损压缩)
  3. 分块和离散余弦变换(预处理)
  4. 量化(有损压缩)
  5. 编码
  6. 存储

在整个压缩过程中会进行两次预处理和有损压缩,分别是第 1、2 步和第 3、4 步。其他步骤与图像质量之间的关系不大,所以我这里就只介绍这两次的预处理和压缩。

第一次预处理和压缩(色彩空间转换和下采样)

我们设计师平常接触到的 “RGB” 或 “CMYK” 色彩空间,一个字母代表一种颜色,比如 “RGB” 意味着 “红绿蓝”,“RGB” 的色值代表红色、蓝色、绿色分别占多少。

而压缩工具拿到 JPG 图片后,会先将图片转换为一个叫 “YCbCr” 的色彩空间。其中 “Y” 代表了这张图片的亮度信息,而 “Cb/Cr” 分别代表图片中蓝色和红色与亮度 “Y” 的差值。经过这种转换,可以针对性地保留更多的亮度信息,而减少色度信息。简单来说就是能够让人眼难以感知到的方式来减少图像中的色彩信息,减少图片文件体积。

色彩空间转换之后,会进行一个叫 “下采样” 的压缩动作。维持亮度信息的同时,统一处理每个 2x2 的像素区块的色度信息(比如在一个 2x2 区块内 4 个像素在色彩上会被统一处理,看起来拥有相同的色度,但明度是不同的)

第二次预处理和压缩(分块、离散余弦变换和量化)

分块、离散余弦变换指的是会将图像分成多个 8*8 像素的色块,然后将其从像素域转换成频率。转换成频率域的意思是能够让电脑分辨图像中的:

  1. 高频成分。颜色变化剧烈的部份,如色块、文字的边缘;
  2. 低频成分。颜色变化平缓的部份,如下图所示的黄色渐变。

而量化则是利用了人类视觉对于图像中的高频变化不是很敏感这一点,通过减少高频区域的数据量,同时在低频区域保持一定精度,让人感觉到图片仍然很清晰。

简单来说,就是压缩算法知道图像里哪些部分的色彩过渡比较缓和,哪些部分的色彩过渡是强烈的,然后对色彩过渡比较强烈的部份使用较高的压缩率。

结论

所以正如前面对比分析时看到的结果那样,JPG 图片对于色彩丰富的图片的压缩效果比较好,因为 JPG 的压缩算法会根据人眼的特点来优化图片的不同区域。

PNG 图片压缩过程

PNG 图片的的压缩过程主要有以下几步,其中只有前三步对图像画质有影响,这里只介绍前三步:

  1. 量化(有损压缩)
  2. 过滤器选择(预处理)
  3. DEFLATE 压缩(无损压缩)
  4. 合成输出

量化

第一步的量化是根据图像的需求选择合适的颜色类型和位深度,简单来说就是直接减少图片的颜色数量。这是最直接有效的压缩方式,同时也对图像质量损耗较大。

下图可以看到一个图像从 24 位(能储存 1677 万种颜色,又称真彩色)减少到 8 位色(能储存 256 种颜色,又称索引色)时,会出现色带现象 (Color Banding)

过滤器选择和 DEFLATE 压缩

这一步才是 PNG 图片的无损压缩。首先会先扫描 PNG 图片的每一行像素,然后以一种新的方式计算每个像素格子的颜色值。比如一个叫 “Sub” 的过滤器,每个像素值是通过当前像素值减去该像素左边像素值得到的;一个叫 “Average” 的过滤器,每个像素值是通过当前像素值减去当前像素左边和上方像素值的平均值得到的。

而 DEFLATE 压缩,这里会用到的方式有很多,比如 LZ77 编码和哈夫曼编码,这里不展开说明了,简单来说就是对过滤过的数据以更优的方式编码,达到减少文件大小的目的。

结论

基于上文提到的过滤器,不难想象到这种无损压缩的方式对于颜色分明的图片 — 比如纯色图标,App 界面截图,扁平插画等 — 很有用,因为像素之间存在细微差异的地方不多,画面上都是大色块居多。

三、其他解决方案

前面提到了很多跟图像压缩相关的事情,这些都是与网页加载优化息息相关的。正好我前段时间做了一个需求,我让前端帮忙做了一件事来节省了大量的图片素材,也算是一次网页加载优化的小案例。

我的设计方案里需要用到八种主题色来作为对卡片的区分,然后我会给这八种主题色的卡片提供一个有简单渐变图像的背景图用以装饰画面,让其过渡不太生硬。设计稿如下图:

如果按常规的做法和给予上文的调研,我将要提供八张代表不同颜色主题且经过压缩的 JPG 图片给到前端。但是在实际工作中,我只提供了一张灰色的背景图,然后让前端帮忙用 CSS 的颜色叠加 “Screen” 方式来给这张灰色图片上色,达到的效果是与设计稿一模一样的。

下面这张图或许能直接地解释其原理,我先提供一个灰色的素材图,里面只有黑和白之间的明度变化,然后前端会写一个颜色块在这个图片上面,最后使用 CSS 属性 background-blend-mode: screen; 将这张灰色的图片和色块进行叠加,得到了与主题色对应的背景图。

最终我仅用一张素材图实现了原本需要八张素材图才能实现的效果,成就感满满!

总结

这次做的调研确实打破了我从业以来多年的错误观念,现在我清晰地知道了:

  1. JPG 和 PNG 适合储存的图像是不一样的;
  2. JPG 和 PNG 的压缩算法导致了图片在压缩后的表现不一样。

虽然这些跟设计技能无关,但也算是一种视野的开拓吧。

这次的分享会是从一个 UI 设计师的角度去探索的,实际上我在 SHEIN 的工作更多是以交互设计师的角色去完成的,我已经有计划在之后的文章中分享更多交互设计的案例,读者们敬请期待吧。

Sharing: 3D modeling & rendering flow on Figma

Sharing: 3D modeling & rendering flow in Figma

Background

Current situation

I have been working for the current company for half a year. I have a clear picture of the working pattern: We are a small design team, but each member has to be responsible for both the UI and UX design for many internal systems.

Some of the design requirements are not complex at all, but the stakeholders want to make the interface aesthetically beautiful and different from other internal systems. In contrast, other demand sides hope designers can provide a clear and understandable solution to tackle the complex interaction flow.

The previous one was much more difficult for me since I was interviewed for the senior UX designer position, and I had not expected to address these design requirements, which may have occurred considerable times.

So it is time-consuming to design a portal website or refine a running internal system since I have to try multiple design solutions to ensure it will be aesthetically beautiful and outstanding.

Ideation

I wonder if 3D pictures could be a great approach to suit this type of design requirements. So I researched external products from large firms, trying to know how they use 3D pictures in their SaaS products.

Screenshots of four different B-end products are shown, focusing on the application of 3D assets within these product interfaces. Each webpage design incorporates 3D elements of various styles to enhance visual appeal and user experience.

After collecting and investing in multiple products, I found the patterns:

  1. 3D pictures are most likely used in landing pages, login pages, portal pages, and the like;
  2. Admin panels and dashboards do not use 3D pictures frequently, but they would appear in entries, feedback, and background decoration.

Conclusion

Based on the pattern above, real working conditions, and small-sized tries, I summarized the first conclusion:

  1. 3D pictures are not frequently used on dashboard pages and system admin. However, using 3D pictures could improve the variety of pages. So it is not worth it to spend so much time on it.
  2. 3D pictures can effectively meet the expectations of demand sides when they want to make their dashboard and admin pages distinguish from other similar sites.

Difficulties

Since I don’t have skills in 3D design, and my working strength is too high to spend much time learning, modeling, and rendering delicate 3D pictures, I just simply searched 3D visual elements on the Internet and then applied them to my deliverable.

Initially, this approach was workable and can help me complete my work quickly. However, drawbacks are uncovered after multiple uses:

  1. Difficulties of matching business contexts. 3D pictures on the Internet support common scenarios well but can’t always precisely describe certain business scenarios.
  2. Lack of series of an element. Although we finally found a perfect 3D picture, it is hard to reach other similar elements from the same series, resulting in poor scalability.
  3. Risks of infringement. Using 3D pictures on the Internet might cause infringement, so applying it directly consists of potential risks.
  4. Inconsistent quality. Free elements are not guaranteed quality and sometimes fail to meet the standards of our design team.

Here, I draw the second conclusion:

Searching for 3D pictures on the Internet has limited effectiveness, so we can’t fully rely on this approach.

After drawing this conclusion, I feel horrible: does it mean that I should strive to learn skills in 3D design? My work strength doesn’t allow me to learn professional 3D software like Cinema 4D or Blender.

The logos of two professional 3D design software are displayed, with CINEMA 4D on the left and Blender on the right, emphasizing their importance in the 3D design field.

After thorough consideration, I think the core demand for me is not to learn 3D software, rather, I should have the ability to gain 3D pictures. Apart from that, the whole process should consist of these features that suit my workflow well:

  1. Quick render. Since it is not worth it to spend much time on it during my work time.
  2. Consistent style. Ensuring our design has great scalability.
  3. Great customizability. It means that I can fully control elements on 3D pictures, ensuring outputs highly represent the business requirements and contexts.

By chance, I know there is a plugin in Figma called “Vector to 3D”. By learning outputs published in the community, it seems that this plugin could meet the features above well, improving my work effectiveness and quality. So I asked my team leader if I could spend some time discovering this plugin and sharing my experiences with team members, and she approved.

Therefore, this post is to record my internal sharing: My experience of how to build 3D modeling & rendering flow in Figma that improves our design effectiveness and quality.

Work with Vector to 3D

Introducing the plugin

This is a paid plugin, we can search for and install it in the Figma community.

A screenshot of the Figma plugin ‘Vector to 3D’ interface shows how to search for and open the plugin page in the Figma community, with the right side displaying the plugin interface during the 3D conversion process.

The control panel is comprised of three parts: Global, Object, and Animation settings. Here I will simply introduce the interface of the first two parts, ensuring all readers learn what this plugin can make.

For the Global setting, we can adjust the cameras, and background on the “General” panel; apart from that, we can set the render quality and details on the following panel called “Render”; and then we can control lights on the next panel named “Light and Shadow”, this panel supports varies functions of lights, like the number, size, position, strength, color and so forth.

A layout settings screenshot of the Figma plugin ‘Vector to 3D’ shows global configuration options for the 3D scene, including modules for rendering quality, shadows, and lighting editor.

For the Object setting, we can make a 3D model by extruding, inflating, or revolving, and then increase the detail of the model by setting “Mesh Quality”. Moreover, this plugin also supports material settings, like roughness, metallic, transmission, and the like.

These features are more than sufficient to handle nearly all of my design tasks.

A screenshot of the configuration interface for individual objects within the Figma plugin ‘Vector to 3D’ displays options for adjusting specific parameters of the 3D object, such as material, color, and refractive index, along with material preset selection.

Make a template

In this part, I will introduce two functions of this plugin: Save Preset and Template Preset.

Saving preset allows us to memorize the current view, modeling, and material settings of the frame. We can reload all the settings by the next open, even sharing with friends.

A screenshot of the configuration saving and loading interface of the Figma plugin ‘Vector to 3D’ shows how to save the current configuration to a Figma layer and how to load preset configurations onto 3D objects.

Templating Preset is not only the masterpiece of connecting the plugin with Figma but also a key factor in effectively generating 3D pictures.

Once we built a template, the plugin would memorize all the raw object preset, next step, we can replace the raw object with anything else, and succeed the raw object preset to it.

This approach is highly convenient for us when producing 3D elements. We just have to create a template, and then we replace various shapes, finally, we can produce endless 3D elements that fit our actual needs well.

How it works: First, we need to set the frame as a component and make the replaceable element that we want to replace with a new one a child component. (In the following example, I set the square bottom as a replaceable element.)

A screenshot of converting elements into components in Figma shows a semi-circular element and a blue rectangle being converted into sub-components.

Second, we duplicate the whole component and tune settings in the plugin, then save it. (In the following example, I make a glass ball and a square bottom base with a metallic surface)

A screenshot of saving 3D configurations in Figma, with the left side showing a blue rectangle component with a pink semi-circle, and the right side showing a 3D sphere and rectangular base generated using the ‘Vector to 3D’ plugin.

Third, we need to create a bunch of shapes that are to replace the replaceable element, making them an individual component and ensuring their layer number, order, and name are the same as the replaceable element.

A screenshot of creating interchangeable elements in Figma displays multiple shapes (square, circle, star) as components.

Last, we can hold the keys “cmd” + “option”, drag a new shape component to replace the replaceable element, and then reload the model again. Now we can see the new shape is applied to the same presets.

A screenshot in Figma shows replacing component elements and reloading the model using Cmd + Option, with the left side showing the process of replacing a circular base with a rectangular base, and the right side displaying the circular base adopting the rectangular base’s style after the replacement.

Now we successfully made a template, we can produce endless 3D elements by creating and inserting new shapes.

Actual practice

Here, I will share a case that is already used multiple times in my daily workflow.

A screenshot shows a blue 3D glass-style icon library, including symbols such as code, star, trash can, like, share, chat bubble, download, dollar sign, lightning, heart, plus sign, and quotation marks.

In this template, the shape of icons and background are replaceable, generating endless pictures and fitting nearly all of my design tasks. So it can be a resource library, empowering other team members.

Meanwhile, I created a color pattern, which not only can be used to represent states like success, fail, warning, and the like but also can be applied to the system with different color themes, ensuring our outputs are highly scalability.

A screenshot shows a color palette icon library with 3D-style icons in red, green, and orange, including symbols such as an exclamation mark, bell, cross, t-shirt, star, directional arrow, checkmark, music note, heart, and play button.

Benefits

In the post above, we learned the interface of Vector to 3D, how to make a template, and how I use this flow in actual workflow.

We are familiar with the 3D design workflow in Figma. To conclude this post, I’d like to summarize the key advantages of this process.

1. Low learning costs

We can simply recognize that the plugin “Vector to 3D” is a lite version of 3D software, simplifying complex functions from traditional 3D software and keeping essential functions.

2. Full design process within Figma

This workflow allows us to produce great 3D elements that don’t have to leave Figma. Apart from that, we can simply tune colors in Figma, which doesn’t like the traditional workflow that always switches from software to software.

3. High scalability

One of the core features of Vector to 3D is that makes up models from vector shapes, by taking advantage of this, we can efficiently produce 3D pictures that effectively meet our needs and align well with business contexts.

4. Consistent styles

The plugin Vector to 3D can coordinate with the components of Figma, not only remembering global presets like lights and cameras; but also allowing replacements to succeed presets like materials and position from previous elements. By templating these presets, we can endlessly produce 3D pictures with the same style.

This workflow is not only successfully used in my daily work but also influences my colleagues. After this sharing, 50% of my team members purchased and used this plugin in their design tasks.

Solution for non-Figma users

If you or your team are not using Figma for work currently, or you are not a designer but just simply want to try the flow from SVG shapes to 3D models, you can visit the online version of Vector to 3D: https://www.meimu.design/vector-to-3d/


Sharing: 3D modeling & rendering flow on Figma was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.

分享会文稿:Figma 3D 设计流程分享

分享会文稿封面,标题为 “Figma 3D 设计流程分享”,背景为渐变深色,中心位置展示了两个带有闪电标志的六边形图标,其中左侧图标是平面设计,右侧图标是3D效果设计,表明了从2D到3D的设计转换。

一、背景

现状

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

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

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

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

想法

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

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

展示了四个不同 B 端产品的网页截图,聚焦于 3D 素材在这些产品界面中的应用。每个网页设计中都包含了不同风格的3D元素,用以提升界面的视觉效果和用户体验。

看了一圈下来,我得出了这样的规律:

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

结论

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

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

二、难点

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

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

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

所以我得出了一个结论:

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

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

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

展示了两款专业 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 社区搜索并安装。

Figma 插件 “Vector to 3D” 的界面截图,展示了如何在 Figma 社区中搜索并打开该插件的页面,右侧为插件的操作界面,正在进行 3D 转换操作。

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

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

Figma 插件 “Vector to 3D” 的界面布局设置截图,展示了 3D 场景的全局配置选项,包括渲染质量、光影和灯光编辑器等功能模块。

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

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

Figma 插件 “Vector to 3D” 中单个物体配置的界面截图,展示了对 3D 对象进行具体参数调整的选项,包括材质、颜色、折射率等设置,并显示了材质预设的选择。

制作模版

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

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

Figma 插件 “Vector to 3D” 的配置保存和读取界面截图,展示了如何保存当前配置到 Figma 图层中,以及如何读取预设配置应用到 3D 对象上。

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

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

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

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

在 Figma 中将元素转换为组件的界面截图,显示一个半圆形元素和蓝色矩形被转换为子组件。

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

在 Figma 中保存 3D 配置的界面截图,左侧是一个带有粉色半圆的蓝色矩形组件,右侧展示了使用插件 “Vector to 3D” 后生成的3D圆球和矩形底座。

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

在 Figma 中创建可替换元素的界面截图,展示了多个形状(正方形、圆形、星形)的组件。

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

在 Figma 中通过 Cmd + Option 替换组件元素并重新加载模型的界面截图,左侧显示将圆形底座与矩形底座替换的操作过程,右侧为替换后继承了矩形底座样式的圆形底座。

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

实际应用

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

展示了一个蓝色 3D 玻璃风格的图标库,图标包括代码、星星、垃圾桶、点赞、分享、聊天气泡、下载、美元符号、闪电、心形、加号和引号等不同的图形符号。

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

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

展示了一个色板图标库,图标包括红色、绿色和橙色的3D风格图标,符号包括感叹号、铃铛、叉号、T恤、星星、方向箭头、勾选、音乐符号、心形和播放按钮等不同的图形符号。

四、总结

上文介绍了 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/

Uplifting your design details with the Case-Sensitive Forms feature

The image features a graphic with a light blue and white gradient background. It includes the text “Uplifting your design details with Case-Sensitive Forms” in bold blue letters and the website “LRD.IM” in smaller text. A 3D letter ‘A’ in a blue, bubble-like design is positioned on the right side of the image.

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.

The image shows a settings panel in Figma focusing on typography settings. It highlights the “Case-Sensitive Forms” option, which is clearly marked in a dropdown menu under the “Details” tab. The “Case-Sensitive Forms” setting is encircled in red to emphasize its importance in the typography setup.

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.”

Comparative display of text alignment with and without Case-Sensitive Forms in Figma, showing punctuation marks adjusted to a higher position.

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.”

Visual comparison in Figma of oldstyle figures versus modern figures using Case-Sensitive Forms feature.

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.

Graphic displaying an international phone number ‘+1(425) 555–0100’ with normal and Case-Sensitive Forms formatting in Figma.

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.

Graphic displaying the date ‘2024–06–10 9:39 PM (GMT+8)’ with normal and Case-Sensitive Forms formatting in Figma.

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.

Graphic displaying the text ‘SIGN-UP NOW’ in all caps, with normal and Case-Sensitive Forms formatting in Figma.

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.

Graphic displaying East Asian typography ‘50条/页’ and ‘NHK | 日本放送协会’ with normal and Case-Sensitive Forms formatting in Figma.

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.

Graphic displaying masked sensitive information ‘***-**-1234’ with normal and Case-Sensitive Forms formatting in Figma.

6. Text face

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

Graphic displaying text faces ‘:D’ and ‘:-)’ with normal and Case-Sensitive Forms formatting in Figma.

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.
Screenshot of the Figma interface highlighting the Case-Sensitive Forms setting in the type settings panel. Step 1: Select the text layer indicated by a three dots icon. Step 2: Click on the ‘Details’ tab. Step 3: Enable the Case-Sensitive Forms option from a dropdown menu.

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.

Code snippet displayed in a dark theme editor with CSS properties: font-feature-settings: ‘case’; This is used to implement Case-Sensitive Forms for displaying a phone number.

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.

Chart displaying high browser compatibility for CSS font-feature-settings, with most modern browsers showing extensive support for advanced typographic features.

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.

Graphic displaying the sentence ‘I bought apples (and oranges).’ in two styles: normal and with Case-Sensitive Forms in Figma.

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.
Display of various UI components using Case-Sensitive Forms in Figma, including Avatar icons with notification counts, Badge icons with user images, a pagination interface, and a letter counter showing ‘My website is LRD.IM’.

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

Display of various UI components in Figma without Case-Sensitive Forms: Avatar icons with notification counts, Badge icons with user images, a pagination interface, and a letter counter showing ‘My website is LRD.IM’.

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.

Lessons I learned after completing the Google UX Design Professional Certificate

The image is a presentation slide with a dark green background and white text. The text reads “Lessons I learned after completing the Google UX Design Professional Certificate.” The logo “LRD.IM” is also displayed.

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:

The image shows a dark green presentation slide with four text boxes labeled “New concepts,” “Listening and Reading Proficiency,” “Accessibility and equity,” and “Guidance for Job Hunting.” The text is in white and each box has a rounded edge.
  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

This is a wide banner-like image with a dark green background and the words “New concepts” in large, white text centered across the slide.

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.

This is a wide banner-like image with a dark green background and the words “Listening and Reading Proficiency” in large, white text centered across the slide.

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.

This is a wide banner-like image with a dark green background and the words “Accessibility and Equity” in large, white text centered across the slide.

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)

This is a wide banner-like image with a dark green background and the words “Guidance for Job Hunting” in large, white text centered across the slide.

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.

记录一次 AIGC Hackathon 参赛经历和收获

AIGC Hackathon 主题海报,由公司品牌设计师陶老师和 Stable Diffusion 的共同创作

公司在 5 月上旬的时候举办了一场 AIGC Hackathon 比赛,鼓励内部员工基于公司相关业务,利用 AI 技术进行创作,重塑生产力。

这么有意思的活动我当然也要掺一脚,在同事的怂恿和牵线之下,召集到了另一位设计师,以及一位研发大佬。所以加上我总共是 3 个人,2 个设计,1 个研发。但是严格来说应该是 1.5 个设计,1.5 个研发。因为我会参与到前端界面的实现,这也是我想参与这次活动的其中一个主要原因。

先放上我们开发的小工具的最终效果,其实是通过提前录入 SQL 语句规则,然后用自然语言询问 AI,让 AI 帮忙生成一个可用的 SQL 语句:

过程

想法

因为当前我们公司的业务是研发管理平台,所以我想到能通过 AI 帮助我们的主要是提高效率,减少出错,诸如此类的方向。

尤其是我在刚来到公司的时候有一段时间给我学习体验公司产品。中途就看到有个地方生成图表的话,可以选择各种筛选条件,也能用 SQL 来快速筛选,当时我就觉得如果用 SQL 来筛选会比手动一个个条件添加来的快,但我又不会写 SQL 语句,所以就想到一个主题:「输入自然语言,通过 AI 生成一段 SQL 语句」,产品名称就被定为「SQL-Helper」。

最开始我们讨论到有几种实现方式:

  • 产品原生:在公司的产品中搭建一个开发环境,在里面进行对话交互功能的设计和开发。
  • 外部网页:搭建一个网页,在网页里实现对话。
  • 谷歌插件(Popup):在浏览器右上角上添加一个 Popup 入口,点击后打开一个浏览器提供的容器,在上面进行对话交互。
  • 谷歌插件(嵌入网页):在公司的产品当中嵌入一个小卡片,在上面实现对话和配置等,会遮盖部分网页内容。
用树状图展示了三种实现方式的取舍选择方式的示意图。

最终选择了谷歌插件(嵌入网页)的方式,因为这样算是能比较融入到产品当中去,不需要来回切换网页这么麻烦,毕竟是一个对话的产品。而且 Popup 有一个致命问题是,如果鼠标点击到了网页的任何地方,Popup 就会收起,这种体验不适合用在聊天式的产品当中。而直接基于公司产品的开发环境中进行开发,这种做法成本比较大而且难以协作,毕竟团队中只有一个正经的研发。

团队合作

得益于大佬的用爱发电,他花了一个休息日的时间把架子搭起来了,技术栈是:

  • React
  • Ant Design Manifest V3(支持 Chrome 96)
  • Stylus 样式结构支持

最初搭建好的框架。是能够在网页中嵌入一个按钮,点击后打开一个弹窗:

最初搭建好的框架。图片展示了一个浏览器右下角有一个橙色的沙漏图标,点击后会打开一个出现在屏幕中央的弹窗。

这两个地方就是我们作品的主要载体。我们希望点击悬浮窗之后能打开一个聊天小窗口,能在里面填入 SQL 语句相关的 Key 和 Value,然后填入用户的 API Key,并实现与 AI 实时对话。

所以很快,在第一天的时候我们就有了一个大概的原型,中途通过每日下班前的简短碰面来一起决定增加/减少哪些内容。

最开始的原型。在 Figma 中进行的,由方框和简单文案组成的原型图。分为消息模块和配置模块,每个模块的原型图下方列举了一些必做的功能清单。

然后也确定了我们三人小组的分工:

  • 我:前期负责设计界面、实现静态界面。后期参与 Prompt 调试。
  • 另一个设计师:负责界面设计、图标设计、PPT 制作/包装。
  • 研发大佬:负责功能实现,比如表单提交,发送和接收消息,接口调试等。

然后我们就各司其职,我这边按照大佬给的流程,每天把自己做好的部分提交 Pull requests,并标记清楚完成了哪部分,哪部分的功能需要研发大佬来实现等等。

Github 仓库的 Pull requests 截图。展示了 SQL-Helper 仓库中部分 Pull requests 记录,并且用带有圆角的绿色方框高亮由我提交的部分 Pull requests。

整体的时间表如下图(只有五个工作日,时间紧迫。):

时间表截图。记录了三个成员在周一至周五各自的工作,完成的工作会用绿色打勾图标来标记。

一些细节

初试 Ant Design 的感受

平常在设计稿中使用基于 Ant Design 组件的经验有很多,但是自己亲自在代码里使用该组件还是第一次。

一个强烈的感受是,Ant Design 组件库确实很丰富,很多常用的组件都有封装好,主题色更改的功能也很强大。但是想要基于 Ant Design 组件库来做一些客制化的改动,实在是太费劲了(也可能是因为我太菜...)。

比如当时我想实现一个 TextArea 根据容器高度来自动填满高度的话,我的样式代码是如此之多:

在深色主题下 Visual Code 中的代码截图。展示了我使用大量重复的样式来让一个 TextArea 组件自适应高度。

另一个坑是我们的聊天窗口是嵌入到网站当中的,而且原本我们公司的产品也是基于 Ant Design 组件库搭建的,所以会出现很多样式的冲突。

比如我在自己的界面中使用了 Button 组件,而被嵌入的网站中如果也用了 Button 组件,那么样式将会被原本网页覆盖掉。

如果在这种情况下想要自定义样式,需要在 CSS 中通过多种手段来提升样式的优先级。这里是我比较频繁用到的两个提高优先级的方法:

  • 使用选择器提高 Class 的优先级
  • 使用 !important
在深色主题下 Visual Code 中的代码截图。展示了我使用选择器和 !important 的方法来提升所编写的 Class 层级。
CSS 选择器的优先级相关内容可以参考张鑫旭大神的名著《CSS选择器世界》,写得特别详细。

所以后面回想起来,我在改造 Ant Design 组件库花的时间还是太多了。这个组件库可能在做复杂后台的时候好用,但在做这种小应用,发挥创意的地方,我觉得还限制还是太多了。我觉得我们最开始应该选择使用有更高扩展性的组件库,比如前段时间看到的 Radix UI

从文档来看,Radix UI 会组件里面每个 DOM 都提前命名好相关的 ClassName,那么用户在想自定义样式的时候,就方便很多了。

Radix UI 组件库的截图。展示了 Alert Dialog 组件的代码,并且用带有圆角的绿色方框高亮了代码中的四处 className。

对比起 Ant Design,引用一个组件进来后,会生成巨多个没有打标记的 DOM。每个 DOM 的样式巨难选择,想要改组件内某个元素的样式,没有熟练的 CSS 选择器功夫还真搞不定。

但还是得具体试一试才知道 Radix UI 是不是真的好用,或许也会暗藏某些坑。或许我应该拿自己的个人网站来试一试 🤔。

改造弹窗:拖拽和操作

由于这是一个嵌入在网页当中的对话窗口,本着提高一个易用性的初心,我觉得需要对弹窗组件进行魔改,支持以下两种特点:

  • 支持拖拽:允许用户拖拽弹窗标题区域,改变弹窗的位置,以免挡住原本页面中的元素。
  • 移除遮罩:不展示弹窗背后的黑色遮罩,并且弹窗出现的时候,不影响用户操作原本的网页。

仅仅是改造弹窗这块,足足花了我一天。严重影响了我调试 Prompt 的时间,所以感觉很有必要把它记录下来,即便我的做法绝非最佳实践。

拖拽

拖拽这块我是用了一个名为 DragM 的开源库来实现了,因为看到示例里面效果很不错,所以直接用上了。效果确实也很不错,强烈推荐。

过程有点丢人,就不详细描述了。大概是我参照示例代码做到了弹窗能够实现拖拽,但弹窗的关闭按钮却失效了,后面还是得靠研发大佬来修复。

允许操作背景

这个特点的实现简直是噩梦。Ant Design 文档是提供了一个 API 是能够允许我们隐藏掉黑色的遮罩。

Ant Design Modal 组件的 API 截图。用带有圆角的绿色边框高亮 Ant Design Modal的 API。该 API 控制是否展示 Mask,默认是展示的。

但是这只是让我们看不见遮罩,打开弹窗时,原本页面的元素仍然是无法点击的。所以我试了一些方法,比如说将每一个疑似是遮罩的 DOM 设置为 display: none;,然而并不奏效。

最后生效的方法是用 CSS 选择器选中遮罩层,并将其调整为跟弹窗一样大。那么实际上遮罩还是存在的,但已经被修改为和弹窗一样大,并且叠在弹窗的后面,其实谁都感知不到这个透明遮罩的存在。

所以对于弹窗尺寸以外的部分,是没有被遮罩所覆盖的,自然能够正常响应鼠标操作。

这种做法无法适应弹窗高度会动态变化的情况,但我们这次设计的产品中,弹窗的宽高是固定的,所以即便做法比较不成熟,但确实是达到效果了。

结果

比赛最终有点遗憾,距离拿奖仅一步之遥。获得我们组目标奖项的是一个单人成组的高手。 很可惜的是我们就差一点点,因为最后颁奖的时候大佬也提到了我们的作品,说是如果能更好用一些,比如将生成的 SQL 语句自动填进输入框,或者自动应用然后直接生成图表,就有更大的机会获奖了🤦。

确实我们在演示的时候没有将这个这个产品最强大的功能发挥出来。因为本身产品也有些缺陷,限制了我们的演示范围。

最开始我们设想是演示的时候用自然语言多问几个问题,然后 AI 每次回复都很准确,凸显了自然语言生成 SQL 语句的便利性,而且还想演示输入了几个错别字,AI 仍然能够正确地识别我们的意图,回复正确的 SQL 语句。

但实际上我们最终的产品还是有一个明显的 BUG,在连续聊天时,消息队列不正常,AI有时候会回复我问的上上一个问题,而不是紧接着我的提问来进行回答。

这使得我们演示的时候只能问一个问题,简单带过,没有办法将自然语言带来的便捷性完全地展现出来,实属遗憾。

收获

虽然没能获奖,但参与这次公司内部的 AIGC Hackathon 比赛对我来说有三个特别重要的收获。

参赛经验

简单来说就是产品设计和功能开发的边界,需要根据演示需要来进行规划。

之前我在样式实现中花了太多时间(职业病🤦),比如输入框的聚焦效果,聊天气泡出现的动画,发送消息加载中的动画等等,而实际上在演示的时候,这些可能只展示了 1~2 秒,甚至更少。

因为这些内容大概率不会是评委所在意的东西,反而在过程中怎么调试 Prompt,调试过程中遇到什么挑战,怎么解决,怎么选择模型等等,显得团队很沉浸于与 AI 接口进行交互,通过这个项目积累了挺多经验,可能这些才是大佬们有兴趣了解的地方。

我应该早点完成产品界面还原,然后尽快投入到调试 Prompt 当中的。 如果之后再次参与类似的活动,我觉得我的所有工作都会围绕最后一天的演示来进行,其他东西能减就减。

首次参与代码 PR,并且与真正的研发同事合作

这次是我第一次将代码 PR 到其他成员的仓库当中,并且解决代码冲突,编写改动点,同步最新代码等等。这种团队协作的感觉,让作为设计师的我感觉很新鲜和奇妙。

而且各司其职,每个人都做出了超出自己以往经历的内容,然后每天短会同步下今天的进度、明天的工作内容。尤其是路演前一天晚上一起调试 Prompt,然后把最佳表现录屏,录屏中还出现了几次滑稽的意外...这种协作的经历让我感觉很充实,富有激情。

而且我每天都会遗留一两个事项给峰哥来解决,比如:

  • 我做完了一个表单填写框和提交按钮,我就告诉峰哥让他来做表单提交的功能;
  • 我做完了聊天气泡(由AI、用户、系统发出的消息)的三种样式,也是一样让峰哥来做相关的展示逻辑...

真正参与产品代码贡献对我来说是一直想去做的事情,因为我一直觉得如果能由做界面/交互设计的人,来亲手将其创作内容实现出来,是一件很酷的事情,也能够减少很多沟通成本。

参与到 AI 的浪潮之中

我最开始是在去年年底的时候,用 ChatGPT 来帮我解决我重构个人网站时的一些实现问题,中途因为好奇心驱使,也问了很多奇奇怪怪的问题。然后最近也在高频使用 ChatGPT,来作为我学习英语的助手。

而这次比赛不仅给了我一个机会去参与创造一个跟 AI 相关的产品(包括代码也有不少是 ChatGPT 参与的),还给了我推强大的动力去了解 AI 在商业中的场应用景。除了在比赛中看到其他参赛者的创意之外,现在还了解到比如 Atlassian 已经有相关的功能前瞻了。

从 Atlassian 在 5 月 4 日发布的股东信当中,也透露到该公司已经在用 AI 来来为客户提供服务了。

"Now that generative AI has reached consumer-grade maturity with LLMs, we can create magical new experiences for our customers."现在,随着大型语言模型(LLMs)带领生成型人工智能达到了消费级的成熟,我们可以为我们的客户创造魔术般的新体验。

除了 Atlassian,另一个互联网巨头:Shopify 也将 AI 能力应用到其产品当中。比如在商品详情页的编辑界面当中,我们可以输入几个关键字,让 AI 帮忙生成一段商品介绍的文本,还能够调整文本的风格。

Shopify 商品详情页 AI 功能截图。画面是一个卡片叠加在商家管理后台的商品详情页的富文本输入框上,该卡片左侧是一个纵向排列控件的配置面板,第一个是输入框,输入一些关于商品的关键字;第二个是调整文本风格的下拉菜单,第三个是额外的备注。然后右侧是由 AI 生成的文本,用淡紫色背景的文字来区分,并且提供赞和踩的反馈。卡片右下角是一个 Pointer 样式的鼠标指针,选停在保存按钮上方。

Shopify 将同样也是利用 LLM 来实现的生成文本能力,这被官方称为「Shopify Magic」。除了在商品详情页生成商品描述,也能在邮件当中根据活动类型或产品关键字生成邮件标题,或者在主题编辑器中根据要求来生成标题等等。

微软就不必多说了,也已经在 Microsoft 的办公软件上集成了很多 AI 功能。

代码仓库

这里放上我们产品的代码仓库吧,记录这段热血时光:

SQL-Helper · Github

最后,通过这次 AIGC Hackathon 活动,我真正参与到了产品的代码贡献,同时也看到了许多 AI 能力的应用场景。听说公司有产品在研究 AI 能力在业务中的应用,希望之后自己也有机会在商业项目上进行更多相关的实践吧!

近况

太久没发博客了,记录下我最近的状态吧。应该没有人想知道,但若干年后的我可能会想知道。

  1. 近沉迷于学习英文,所以会导致网站、博客的更新会比之前慢一些。
  2. 发现英文还挺有意思的,但在学生时代是看见英文就想睡觉。以前的我应该是比较喜欢数学和历史。
  3. 小目标是今年内能出一篇全英文的博客。全程用英文书写,然后在发布之前先给 ChatGPT 帮忙检查和润色一下。
  4. 个人网站 LRD.IM 正在开发支持切换语言至「英语」的功能。
  5. 有一个前端相关的分享会正在准备进行,是面向部门内产品、本地化运营和设计同事的。
  6. 在手机上开通了 ChatGPT Plus。直观感受是 GPT-4 的回答比 GPT-3.5 靠谱很多很多,应该会持续订阅。
  7. 正在尝试一种新的作息,再多体会一段时间后,可能也会在博客上记录。

【译文】无障碍设计:三个 Jira 图标的故事

By: 李瑞东
1 April 2023 at 22:30
导读:Atlassian UX 团队的设计师 Hannah McKenzie 分享了一个优化图标的小案例。主要目的是使图标对色盲人士也具有良好的可访问性。
Photo by Harry Quan on Unsplash

小细节会产生巨大的影响

你知道世界上有很多种不同类型的色盲吗?在澳洲,有大约 50 万人生活在某种程度的色盲当中。在美国,这个数字接近 1200 万。而在全世界,估计有 3 亿人生活在某种程度的色盲当中,网上的一些资料显示,这个数字甚至接近 3.5 亿。

其中红绿色盲占据了大多数,他们难以区分红色和绿色。

现在 Jira 的 Pull request 的图标是通过用灰色、绿色和红色来区分 Open, Merged, Declined 这三种状态。

原本的图标,灰色代表 Open,绿色代表 Merged,红色代表 Declined。

红绿色盲人士看到的图标就像这样:

在 Jira 的软件项目管理看板当中,这些图标很小,并且与每个缺陷中其他小元素一起出现。比如故事点、负责人头像和缺陷 ID。

这是一个 Jira iOS app 项目看板的例子。其中 Pull request 图标用红色圆圈高亮起来作为示意。

虽然图标很小,但这些图标确实在传达有用的信息。

在 2021 年末,我开始进行优化开发状态图标的工作,并让色盲用户可以访问它们。它开始于一则我在无障碍团队 Slack 频道里的消息:

“我们最近有改进 Jira pull request 图标计划吗?现在这些图标是完全相同的,只能通过颜色来区分。”
Photo by GeoJango Maps on Unsplash

在 2022 年初,几位设计师和研发在 Slack 的讨论中尝试了一个粗略的方案:

设计师开始尝试多种概念,产生了更多的方案:

在几个发散性的讨论和设计环节之后,全新的,具有可访问性的 Pull request 图标诞生了!

虽然这些图标仍然由灰色、绿色和红色来分别代表 Open, Merged 和 Declined,但同时,使用了打勾代表 Merged,打叉代表 Declined。而且 Merged 的图标用线条连接在一起(表示合并到分支),Declined 的图标线条则没有与任何东西连接。

这段经历教会了我…

  • 即使过程很棘手,但也请坚持下去。如果你面向的是比较复杂的产品,或者在大型的机构中,你需要主动去在不同团队去联系到合适的同事;
  • 一些看起来很小的设计往往会涉及到很多不同的人。通常是很多件小事(就像在这个案例当中,有许多交流和发散性会议)汇聚成一件大事,以最终呈现在用户面前;
  • 设计一个支持无障碍的产品对很多人来说是至关重要的,小细节真的很重要。每个人都会受益,包括自认为是并非残障群体的的人士。比如电话和电动牙刷,最开始就是为残障人士而设计的。

Atlassian 里几位没有色盲的设计师和工程师对于新设计图标的看法:

“我不是色盲的,但这些图标让我一眼就能看懂。”
“这简直是宝藏。原本同样的图标,不同的颜色让我感到疑惑。我经常想,这是对应着什么分支状态?这是一个非常惊人的优化。”

所以这篇文章用来提醒大家关注细节 — — 即便是小细节也会产生巨大的影响。

Photo by Balázs Kétyi on Unsplash

探索让新用户更容易上手的产品设计策略

By: 李瑞东
26 March 2023 at 02:11
封面图。深蓝色背景,中间有经过模糊处理的蓝紫色渐变,背景有宽松的网格纹理。标题是探索让新用户更易上手的产品设计策略。

背景

今年二月底入职了新公司,主要产品是企业级研发管理 SaaS 软件。这家公司的新员工在参与产品迭代之前需要进行相关的学习和培训:

  • 第一、二周先自己学习使用公司的软件和行业名词,并模拟成销售的角色来参与一次产品演示和场景化配置的考核;
  • 第三周基于自己感兴趣的主题来分析竞品和自身产品的某项特点,并作一次分享会;
  • 第四周才正式开始参与产品设计,进入到迭代当中。

我是比较认同现在这一家公司的入职流程的。毕竟 SaaS 软件是会有点学习成本,自己先把各种功能、场景、配置和行业相关名词学会了之后才能更顺畅地合作。

就在我刚开始学习使用公司软件的时候,会感到有些吃力。比如:

  1. 功能/流程配置。比如我想要做某项配置,但因找不到入口导致无法配置,或被某些逻辑限制导致结果与预期不符时,需要去到帮助文档里搜索相关概念,然后再对照文档里面写的步骤来实现;
  2. 名词释义。有些行业内的名词我之前没接触过,或者不能够直接根据字面意思理解的时候,我需要去文档或者维基百科上查找相关的释义、使用场景和最佳实践。比如「故事点」、「用户故事」、「史诗」等;
  3. 系统概念理解。我需要通过查阅文档、询问导师和自己反复尝试来去了解软件系统内的一些运行机制,比如说多种层级的权限,或者一个叫「池子」的概念…

所以在第三周的分享中我选择了主题是关于产品设计中如何帮助新用户上手使用软件。正好自己也看看其他做的好的产品是怎么做的,之前这方面的实践比较少。

概念学习

橘色的胖猫面对电脑屏幕,该插图由 Midjourney 生成。

在实际进入竞品里体验之前,我先去网上学习点跟帮助系统相关的概念。我通过 NNGroup 的文章了解到帮助会分为两大类:

预防性帮助 (Proactive Help) 指的是系统在用户遇到问题之前提供帮助。常见的方式包括: Onboarding、新功能提示、上下文帮助(Contextual Help) 和向导等。

针对性帮助 (Reactive Help) 指的通过文档、视频、课程等资源来回答和解决用户的具体问题。或者为想要成为专家用户的人提供详细的文档和资源。

而「预防性帮助」,又能分为两种类型:

主动呈现 (Push Revelation): 不考虑用户的任务而提供帮助内容。强调主动提供帮助信息而不考虑用户当前行为。这种方式会可能打断用户进行中的任务并引起用户的不适,需谨慎使用。

被动揭示 (Pull Revelation):与用户当前行为相关的帮助。侧重于与用户当前正在进行的动作、行为和活动等有紧密关联。提供有助于用户完成当前任务的相关建议和信息。

经过梳理后,这些概念的关系图像大概是这样:

帮助概念的关系图。
NNGroup 了解预防性帮助和针对性帮助的概念

接下来就从上述的多个手段中选取几个,结合 Jira、Asana 和 Notion 的做法来做一些观察和分析,并尝试总结出在它们身上能学到什么。

对三个调研对象:Jira、Asana、Notion 的介绍。

新用户旅程

新用户旅程 (Onboarding) 设计有助于引导用户使用产品,让用户发现产品的核心价值,进而推动用户留存、转化和推荐。

我分别体验了 Jira, Asana, Notion 的 Onboarding,发现这三者的流程大致相似,但基于软件本身的功能不同而有些许差异。值得一提的是,他们都做得很细致

流程

走查了三款软件的 Onboarding 流程,并以粗颗粒度来划分步骤。

对 Jira、Asana、Notion 这三个竞品的 Onboarding 流程梳理。都有同样的五个步骤:账号注册、收集信息、创建入门项目、邀请成员、进入主界面。

其中与比较关键的是第二步:

第二步:收集信息。收集用户的角色、工作职能、主要任务、团队规模等信息。用于获取用户的标签,以便后续进行精细化运营。同时影响到后续的配置、预设的数据和界面内提供帮助的程度。

第二步里收集到的信息会影响到创建入门项目、邀请成员和进入系统后的主界面。比如在 Notion 中如果提供了「个人使用」作为用途,则流程中不会出现「邀请成员」的模块。

千人千面

值得一提的是,Onboarding 流程中收集的用户信息,可以为后续的系统预设和默认配置提供参考。

比如在 Jira 中,系统会根据用户填写的团队类型和主要工作类型等因素,推荐对应的模板。如果用于管理软件开发团队,则推荐用敏捷项目模板;如果是管理业务团队,则推荐用项目管理模板。并引导用户使用模板创建第一个入门项目。

Jira 根据团队类型来推荐模板的案例。左侧的截图是当用户选择了 “I am new to Jira” 和 “I am setting up Jira for my software teams” 时,下一步创建项目会推荐使用 Scrum 的模板;而右侧的截图是当用户选择了 “I am new to Jira” 和 “I am setting up Jira for my business teams” 时,下一步创建项目会推荐使用 Project management 的模板。

并且根据用户对 Jira 和敏捷方法论熟练度,决定是否在用户首次进入主界面时提供向导。如果是新手,在进入主界面时会询问是否需要跟随向导了解界面和功能;如果是有经验者,则没有向导提示。

Jira 根据熟练度决定是否出现功能向导的案例。左侧的截图是当用户选择了 “I am new to Jira” 和 “My team is new to agile methodologies” 后,进入主界面会出现向导提示;右侧的截图是当用户选择了 “I am experienced with Jira” 和 “My team is experienced with agile methodologies” 后,进入主界面没有出现向导提示。

再比如在 Asana 新用户旅程中,如果用户选择角色是「高管」,系统内新手引导卡片内的称谓和步骤,都会与「团队成员」的角色不同。

高管的引导卡片添加了「开始成为一名管理人员」的文案,而初始配置的步骤包含「创建报告」和「创建一对一会谈项目」等;而团队成员的引导卡片则是「填写个人资料」、「下载 App」和「查看第三方集成」。

Asana 根据角色定制新手引导的称谓和步骤的案例。左侧的截图是当用户角色选择了高管时,出现相应的称谓和步骤,如添加项目团队和创建一对一会议的项目等;右侧的截图是当用户角色是团队成员时,出现相应步骤,如继续设置项目和下载 App 等。

或者当用户的角色是「经理」,仪表盘卡片也会与「自由职业者」不同。经理的默认仪表盘中有一个卡片是「我指派的任务」,而自由职业者则没有。

Asana 根据角色定制新手引导的称谓和步骤的案例。左侧的截图是当用户角色是经理时,默认仪表盘出现我指派的任务卡片;右侧的截图是当用户角色是自由职业者时,默认仪表盘隐藏我指派的任务卡片。

Notion 也会根据用户选择的工作类型,在邮件中更改相应的称谓。

Notion 根据工作类型定制邮件称谓的案例。左侧的截图是当用户工作类型是销售时,邮件标题是:Notion for sales teams;右侧的截图是当用户角色是工程师时,邮件标题是:Notion for engineering teams。

我们能学到什么

橘色的胖猫面对电脑屏幕,该插图由 Midjourney 生成。

💡 定制个性化的用户旅程。不同的用户有不同的需求和期望,为了更好地满足用户,我们可以根据收集到的信息来提供更符合其所处情境的预设、引导流程和配置等。

💡 合理利用向导来帮助用户上手软件。向导能帮助用户熟悉界面 UI 和功能,但要避免阻碍用户使用软件。所以需要根据用户对软件熟悉程度来决定是否提供向导,并保留跳过的方式。

上下文帮助

本文的最开始提到预防性帮助有两种方式,第一种是主动呈现 (Push Revelations),比如一进入页面就出现的新功能提示,或者界面操作向导等。

两个 Push Revelations 的案例。左侧是飞书在改版后,首次进入主界面会用模态弹窗来推送更新通知;右侧是蓝湖在首次进入主界面时会用气泡卡片来主动引导使用演示项目。

而这里重点介绍的是另一种:被动揭示 (Pull Revelations)。而「被动揭示」有一种做法叫做上下文帮助 (Contextual Help)。这是指根据用户参与的特定活动,展示与此相关的帮助信息。强调要与用户当下的活动密切相关,而不是统一的推送。而具体的做法有很多种,比如:工具提示、向导、输入框提示、内嵌帮助中心等。

使用案例

Jira 的筛选器界面,在用户没有创建过筛选器时,会出现内嵌的帮助中心,呈现与筛选器相关的帮助;而当用户当前已存在筛选器,打算继续创建时,则会默认隐藏内嵌的帮助中心,用户可以手动点击右上角的问号图标打开。

Jira 使用上下文帮助的案例。在 Custom filters 页面中,如果当前列表内无筛选器时,主动弹出帮助中心;如果当前列表已有筛选器时,隐藏帮助内容,只能在右上角帮助中心触发。

相似地,Asana 的 Task 列表中,用户对任务进行多选后,也会在操作栏出现与之相关的工具提示。

Asana 使用上下文帮助的案例。在多选任务时,底部的工具栏出现紫色气泡样式的帮助提示,介绍更新截止时间的方法。

同时也可以看看其他 SaaS 软件的做法,不必局限于竞品。因为这种设计理念是通用的,都是为了帮助用户更好地上手,为用户持续提供价值。比如 Slack 也在这方面下了很多功夫。

Slack 使用上下文帮助的案例。左侧是 Slack 消息列表里滚动距离超过某个值的时候,出现建议使用搜索功能的工具提示;右侧是当侧栏被隐藏时,也会出现一个控制工具栏出现/隐藏的快捷键工具提示。

我们能学到什么

橘色的胖猫面对电脑屏幕,该插图由 Midjourney 生成。

💡 帮助内容保持简洁。使帮助的内容简短并有效,并且在用户要求之前不要呈现过多细节或复杂的内容。

💡 易用且不干扰。上下文帮助可能会干扰已经熟悉界面或者不需要帮助的用户使用。所以在呈现帮助内容时,确保使用轻量的样式,并且允许用户跳过帮助。

💡 使帮助内容可以在其他地方访问。用户可能看到过一些帮助提示,但当时他们忽略了或者忘记了,这在复杂的软件里很常见。所以仍然需要提供其他方式来使用户获取到帮助内容。

模板

模板中心

用户使用 SaaS 软件通常是带着现实情境过来的,比如希望进来做任务追踪,或者是进行多项目的管理和进度追踪等。

所以我观察到这几款应用的模板生态还是比较丰富的,覆盖了多种场景。完善的模板能够帮助用户快速上手,减少学习和操作成本。

Jira 的模板中心以业务为基础,更多地关注具体的业务流程、管理流程和功能的实现。适用于企业内部、管理领域软件行业。并且有详细的模板使用说明和相关模板。

Jira 的模板中心,由前后两张英文界面的截图组成。前一张截图是使用 Scrum 模板的一些提示,正文以展开/收起的方式来展示;后一张是模板中心的首页截图,其中左侧是分类栏,右侧是模板。

Asana 的模板按照团队内不同职能部门来划分,侧重于流程优化。并且有详细的模板使用说明。

Asana 的模板中心,由前后两张繁体中文界面的截图组成。前一张截图是日常站立会议范本的模板详情和使用说明;后一张是范本库的首页,以网格的形式展示多个模板类型。

Notion 的模板中心按照专业领域和个人兴趣分类。适用于个人、自由职业者和信息分享平台等。并且允许用户上传自己做的模板并进行收费,既能够满足用户的个性化需求,又能够为 Notion 和整个社区提供更多的价值和机遇。

Notion 的模板中心,由前后两张英文界面的截图组成。前一张截图是 Task architect 的模板详情页,后一张截图是 Notion 模板中心的首页截图,其中左侧是分类栏,右侧是 Notion Pick 分类下的模板。

本地化

值得一提的是,Notion 和 Asana 的模板中心做了比较细致的本地化处理,切换语言后会呈现更符合用户所在地区的分类和模板。

Notion 针对地区提供不同的模板中心首页示例,由两张截图组成。左侧是日语界面,右侧是英语页面,其中日语界面下,展示的是日语相关的模板分类和模板;而英语界面下,展示的是英语相关的模板分类和模板。
Asana 针对地区提供不同的模板顺序示例,由三张工程分类的模板截图组成。左侧是繁体中文界面,第一个模板是产品蓝图,第二个是日常站会;中间的截图是日语界面,第一个模板是每日站会,第二个是冲刺回顾;右侧的截图是英语界面;右侧的截图是英语界面,第一个模板是缺陷修复,第二个是产品蓝图。

其中 Asana 的模板顺序,「每日站会」在日语和英语中,分别是首位和末位。为此我也有去了解过美国和日本的文化差异,试图去解释为何 Asana 要这么做,这是调研出来的差异:

  1. 文化倾向。日本强调集体主义,注重团队合作和群体利益;美国强调个人自由,注重个人的成就和个人的价值。
  2. 协作模式。日本注重面对面的交流和沟通。在组织中强调员工之间的默契和团队合作精神;而美国更加弹性化,注重个人的私人时间和团队协作效率的平衡,支持远程协作。
  3. 企业文化。日本注重团队合作、持久性和精益求精,对个人规范和职业素养的要求高;美国注重灵活性和创新,注重持续快速发展和快速创造价值。

这些未必是 Asana 做这种本地化差异的理由。但是能反映出来,日本和美国这两个国家在霍夫斯泰德文化维度来看,是有明显差异的。如果之后工作中我有相关的设计机会,也会多多尝试基于两个国家文化差异,而作出不同的设计策略。

我们能学到什么

橘色的胖猫面对电脑屏幕,该插图由 Midjourney 生成。

💡 模板丰富实用。模板对于 SaaS 软件的用户来说是非常重要的,它可以帮助用户快速上手并减少学习成本,并且加深客户对产品定位的印象。

💡 帮助新用户上手。不同 SaaS 软件的模板中心存在一定的差异,它们通常会按照业务场景、职能部门、专业领域和个人兴趣等各种标准进行分类。

💡 关注本地化策略。设计模板时需要考虑到不同地区、不同文化和不同工作习惯的用户的需求和习惯,并且根据实际需要进行调整和优化,以便更好地适应当地市场,吸引更多潜在客户。

帮助中心

产品文档

产品功能文档或开发者文档,是 SaaS 软件帮助中心的标配。我也有去看不同产品的功能文档,看看他们为了帮助用户更好地理解和使用,做了哪方面的努力。

比如 Asana 会标记截图中的行动点,然后在旁边写上相关的步骤操作。标记行动点是用户更容易发现目标,而分步描述则让文字更加简洁易懂。

Asana 的四张帮助文档截图。由两张在中间的清晰截图和两张在边缘的逐渐淡化截图组成。其中在中间靠右的截图里,用绿色方框高亮帮助文档里用有序列表来做步骤的做法。

值得一提的是,Asana 不仅仅提供产品功能文档,还按场景分类,提供多个工作流程的配置方式(最佳实践),比如会议、日历和计划等。试图去引导用户按照 Asana 所推荐的方式来去使用该软件。

Asana 的最佳实践页面截图,由前后两张繁体中文界面的截图组成。其中前一张展示了如何在 Asana 中建立日程的相关步骤和做法;后一张则是最佳实践的页面截图,左侧是类型,右侧是网格排列的关于该类型的最佳实践。

其他资源

调研中发现现在的帮助中心内容丰富,除了常见和必要的产品功能文档/开发者文档之外,还有其他很多提供帮助的资源。比如视频讲解、视频课程、实践案例、社区、博客、公开课等。

Jira 通过社区来加强与用户之间的联系,比如:处理用户反馈、新功能发布的通告和邀请客户参与一些试验性的功能等等。社区内也会常驻社区领袖来响应用户的反馈。

Jira 的社区界面截图,由前后两张英文界面的截图组成。前一张展示了在用户提问的详情页里,有社区领袖来回答用户的问题;后一张是 Jira 社区界面的截图,展示了 Jira 分类下的帖子。

Notion Academy 提供了详尽的视频课程,由浅入深。比如从基础的界面功能、团队管理,到使用数据库和人力资源场景下的大型团队空间配置等。

Notion Academy 的界面截图,由前后两张英文界面的截图组成。前一张展示了 Using data 课程下的课程列表;后一张是 Notion Academy 的主界面截图,左侧是帮助内容的列表,右侧是具体的帮助内容,其中用绿色方框高亮了课程难度由低到高排序的策略,并用紫色方框高亮了最佳实践课程的分类。

Jira 和 Asan 都会比较积极地举办线上公开课 (Webinars)。通过这种方式来提高品牌知名度、建立专业的形象,保持和用户交流,并最终促进销售。

Jira 和 Asana 的 webinar 界面,由前后两张英文界面组成。前一张展示了 Asana 的 webinar 主界面,标题是 “Join a live training webinar”,下方展示了两个 webinar;后一张是 Jira 的 webinar 界面,标题是 “Webinars”,下方展示了两个 webinar。

值得一提的是,我观察到海外的产品,对于视频课程除了直接把视频传上去之外,还能够多做几件事情来提升视频课程的阅读体验,并且在国际化场景更加友好。

  1. 支持 CC 字幕。帮助非视频语言母语的用户更好地理解视频内容,同时也能为听力障碍和不方便使用扬声器/耳机的用户提供便利。
  2. 支持时间轴目录。帮助用户快速了解视频的主要内容,并找到自己需要的信息。与图文教程相比,视频获取信息的效率比较低,但这种做法能弥补缺陷,提高用户的学习效率。
  3. 支持文字稿。帮助用户更好地跟进视频的内容,也方便他们在需要时快速查找相关的信息。并且同样能为听力障碍和不方便使用扬声器/耳机的用户提供便利。
  4. 加入互动元素。提供与视频课程相关的调查、实时聊天室或小测试,能够促进学习效果并增加兴趣和参与度,提升课程质量。
三个平铺的 Asana Academy 内视频课程的英文界面截图。左侧是 Asana 教学视频中打开了 CC 字幕的选择语言菜单,并用绿色方框高亮;中间是 Asana 教学视频中打开了文字稿界面的菜单,并用绿色方框高亮;右侧的是用绿色方框高亮 Asana 教学视频下方的时间轴目录。
两个平铺的英文界面截图。左侧是 Jira webinar 详情页的截图,该截图内中间是视频内容,视频周围被多个模块所包围,按顺时针分别是:Slides、Surey、Banner、Resource list、Q&A,用橙色方框高亮了 Survey 和 Q&A 模块;右侧是 Asana Academy 内视频课程的截图,左侧是课程目录,右侧是课程内容,其中用了橙色方框高亮课程的互动模块。

我们能学到什么

橘色的胖猫面对电脑屏幕,该插图由 Midjourney 生成。

💡 细致易用的用户文档。用户使用文档的场景是明确需要帮助,或者希望成为专家用户,了解产品设计背后的概念。所以文档需要足够的细致、具体和易用。比如像 Asana 帮助文档中提供了步骤图,或者 Asana 线上公开课中为视频提供了段落拆分。

💡 丰富的资源和帮助方式。不同人在解决问题和接收帮助方面都有着自己的特点和偏好。所以需要提供多样化的帮助资源,比如:文档、视频、案例拆解、线上公开课等,持续提供影响力。

💡 强调最佳实践。Jira 的帮助中心里有许多关于敏捷开发概念、实践的文章。Asana 的实践案例也在频繁加入自身对工作流的理解。在帮助中心中强调最佳实践能够帮助用户更好地使用软件和理解背后的理念。

💡 增进用户的参与感。帮助系统可以支持互动和社区功能。比如评论、分享、点赞等。为了进一步提升用户的参与度,还会支持社区、公开课等。

结语

以上就是我对公司几款竞品帮助中心调研后,总结出来能够帮助新用户上手的产品设计。整体感受是「帮助系统」这一块可以做得很大,又能做得很细。

往大了做:包含基础的文档、功能引导;进阶的课程、模板和大学,以及上升到行业影响力的线上公开课、线下 Events 和职业认证。

往细了做:Onboarding 流程规划、上下文帮助的设计、文档/视频课程的细节,模板的本地化方案等等。

所以说越做设计越感到自己个人力量的渺小,世界太大了… 但不管怎样,来到新公司我的目的是取百家之所长,扩展下之前没怎么接触到的领域。

碎碎念

文中部分名词(如:Proactive help, Reactive help, Push revelations, Push revelations…)由于我没有在中文设计圈内找到合适的翻译,于是便自己琢磨着做出了翻译,本身自己不是想「造概念」的,但总得有个名字吧。如果读者有其他更好的翻译方案欢迎交流。

另外这是我第一次尝试用到人工智能来参与博客的创作。使用到了 ChatGPT 3.5 来帮我做资料搜集、文本润色&修正、名词释义和总结提炼。比如文中「我们能学到什么」里面的小标题,有部分是我发一段文字后,ChatGPT 帮我总结的,或者我理解了很久的 Pull revelations 和 Contextual helps 的关系,也是 ChatGPT 帮我梳理的。

另外也用到了 Midjourney 来生成这篇文章的封面图背景,以及「我们能学到什么」的配图。

这两个工具的强大不必过多介绍了,只是中途一件有件小事值得记录一下。起因是我想查找 Reactive Helps 相关的内容,就去阅读了 NNGroup 上面相关的文章,以及询问 ChatGPT。令人惊讶的是 ChatGPT 给了和 NNGroup 相反的理解…

参考文档

用 Next.js 重构个人网站 (二):核心和通用模块

By: 李瑞东
19 March 2023 at 11:12
封面图:Maxime Bourgeois

一部分我会记录下在重构 LRD.IM 项目中,部分核心或比较通用功能的实现过程,以及一些我花了点巧思来设计的地方。

数据源和循环遍历

我的网站中常常会有字段是能在多个地方复用的,比如作品的标题、描述等信息。

作品集首页字段应用的示意。应用在首页、作品详情页、head 标签、复制链接时的拼接。

这些字段会在多个页面中使用,当文案调整时也需要同步改动,影响到所有相关的地方。所以为了达到「一改全改」的效果,改进网站迭代的效率,这里我会用到数据源和循环遍历来做(以前还真就手动一个个来改的)。

数据源
数据源像是一个专门存储数据的库,里面记载了某个模块会被用到的字段名称及其对应的值。这里面本身没有功能、交互和样式,就像一个仓库。作用就是给到具体的页面或者组件来调用。

循环遍历
有了数据源之后会需要将其逐个安放进统一的容器里面。容器的样式是一致的,布局和适配也通过 CSS 来统一处理好,只是里面的文本、配图、跳转链接等这些属于数据源的内容有差异,所以这里会用到map()来遍历数据,将数据逐一安放进容器里。

功能实现

构建数据源
举个例子,「作品」页面包含了好几个字段:

  1. 公司名称
  2. 公司 LOGO 图片链接
  3. 公司官网网址
  4. 公司相关作品
  5. 作品名称
  6. 作品描述
  7. 作品缩略图链接
  8. 作品跳转链接

这其中「公司」和「作品」是一对多的关系,一个公司可以对应有多个作品。所以这里据源的结构是:

const ProjectItemData = [
{
name: "公司名称",
img: "公司 LOGO 图片链接",
url: "公司官网网址",
projects: [
{
title: "作品名称",
desc: "作品描述",
img: "作品缩略图链接",
url: "作品跳转链接",
},
],
},
];
export default ProjectItemData;

应用在实际页面中

数据源在我的网站里有两种使用方式:直接引用数据源里的某一个字段,或者通过遍历循环来填充进容器里面。

直接引用字段
比如作品详情页里面的 <head> 标签,需要将作品标题,siteMetadata 里的一个字段拼接,我会直接将他们引用到页面当中。

// 导入数据:
import siteMetadata from "/data/siteMetadata";
import ProjectItemData from "/data/ProjectItemData";

// 使用数据:
const title = ProjectItemData[2].projects[0].title; // 指定获取某个字段
<title>{title} - {siteMetadata.title}</title> // 应用在页面中

// 输出:
// <title>SHOPLINE App 组件库构建 - 李瑞东 LRD.IM</title>

循环遍历,将内容逐一填进容器
LRD.IM 的首页会列出我之前任职公司时的实际项目,实际上这就可以将一组数据按顺序地填入设定好样式和交互的容器当中。

我使用 Array.prototype.map() 来实现这个循环遍历。

import ProjectItemData from "/data/ProjectItemData";  //导入数据源
<>
{ProjectItemData.map((company) => ( //查找数据源中的一级数据
<div>
<Image src={company.img} /> //公司 LOGO 图片
<Link href={company.url}> {company.name} </Link> //公司名称,点击跳转到公司官网网址
</div>
<div>
{company.projects.map((project) => ( //查找数据源中的二级数据
<Link href={project.url}> //作品跳转链接
<Image src={project.img} /> //作品缩略图
<h3>{project.title}</h3> //作品名称
<p>{project.desc}</p> // 作品描述
</Link>
))}
</div>
))}
</>

影响范围

数据源循环遍历这个做法频繁出现在重构后的个人网站里。除了上面提到的首页作品列表,还有比如网站的 Header 导航栏、作品详情页平铺图片的模块、以及 What’s New 页面的内容等等。

map 遍历用在Header 导航栏、作品详情页平铺图片的模块、以及 What’s New 页面的内容的示意图

如果后续某一个模块的内容需要增删改,我只要修改数据源里面的内容,操作完之后在具体页面中检查一遍就可以了。再也不用在编辑器里打开数十个 html 文件逐个修改了。也不用在一堆代码高亮后的标签内寻找内容了。

一个模块或组件对应一个数据源,然后数据也和页面分离,👍🏻。

不得不接受的局限性

这个看似完美的功能实际上也会有一个令我有点难受局限性。前文提到一句话:

有了数据源之后会需要将其逐个安放进统一的容器里面…

这种按部就班,放进「统一的容器」里的做法会丧失灵活性,比如在:一组容器里面我想要特意给某一个容器添加样式,或者某个字段的值是字符串,我想给里面的某个词语设定一个样式。这似乎不容易办到。

具体来说,在我前年写的一篇「Apple 官网里三个令我惊叹的中文排版细节」里,我学会了给标题或重要文本的最后一个词语和标点设置一个不换行的样式white-space: nowrap;来防止出现孤字,这是需要在 HTML 内对单独每一句话来设定的样式。

重构前避免出现孤字的做法

而通过数据源来填充文本内容,我似乎没法进行这样的操作了。所以重构后的网站,一些地方可能会出现无法避免的孤字。

后续我会继续关注这个问题,尝试找到低成本的解决办法。这并非毫无希望,起码最近有了解到 React Wrap Balancer 这个组件似乎能改善孤字的现象,后续我会继续跟进。有新进展也会在博客里更新。

React Wrap Balancer 的效果预览动图。
当前的解决方案:关键内容/复用较少的内容会写在 JSX 中,而不使用数据源,给到最大的灵活性。而像大标题或副标题,则是使用了 word-break: keep-all; 的方式减少孤字出现的可能性(参考此处)。其他更细的情况无处理。

深色模式

重构前的 LRD.IM,网页的深色和浅色模式是只会跟随用户系统设置的,而这次做到的效果是:

  1. 默认颜色主题跟随用户系统设置;
  2. 允许有一个按钮来切换深色或浅色模式;
  3. 手动更改过颜色主题后,访问网站内其他页面也会受到影响;
  4. 页面加载、跳转时没有背景色闪烁。

深色模式在 Next.js 和 Tailwind CSS 结合使用的时候会变得无比简单。

功能实现

功能上我是跟着 Danilo Leal 博客里的这篇文章,一步一步实现适配到深色模式的。主要是使用了 next-themes 提供的能力。没什么难度和卡点。

样式支持

标题是 Tailwind CSS 3.2 的配图,使用科技风格的蓝紫色渐变作为背景,图片来自 Tailwind CSS 官方。
图片来自 Tailwind CSS

使用 Tailwind CSS 之后,设计深色模式的样式也变得简单很多了。只要在类名前加上dark:,比如这样:text-neutral-800 dark:text-neutral-100,dark:后面的内容就是当切换成深色模式后的样式。

而且在与媒体查询、:hover、:active 等效果配合使用时候,也可以直接叠加,不需要在 CSS 内过多的声明或嵌套。

比如一个按钮的背景色,在不同的颜色主题和状态(默认或 :hover)下色值会不同。同时我也希望在移动端设备尺寸下,不要有 :hover 改变背景色的效果。那么类名大概会是这样:

<Button
className="
bg-neutral-100 //浅色模式时,按钮的默认背景色
dark:bg-neutral-900 //深色模式时,按钮的默认背景色
sm:hover:bg-neutral-200 //视窗宽度是移动端以上时,:hover 状态的背景色
dark:sm:hover:bg-neutral-800 //深色模式且视窗宽度是移动端以上时,:hover 状态的背景色
">...
</Button>

在我看来,这种做法比传统的 CSS 做法更直观,不用专门语义化一个颜色,或者在冗长的 CSS 里维护两套主题色。所以得益于使用了 Tailwind CSS,我在写样式的时候效率提升了很多。

使用外部组件/图标库

这里可以记录一个我做成了响应式适配的组件:Header。在宽度足够时会将各页面入口平铺展示;而在移动端尺寸下,会收起在一个按钮中,点击后展开一个菜单,在里面提供页面和功能的入口。

拖动右侧手柄,缩小容器宽度来查看 Header 组件的适配的效果。默认是按钮平铺展示,容器宽度小到一定程度后将按钮收在汉堡包菜单中,点击图标出现相应的按钮。

组件

实际上我是通过媒体查询视窗宽度来实现的响应式适配。Header 操作区会分成两部分,一部分是平铺的按钮,另一部分是菜单功能。即:

  1. 当视窗宽度 > 移动端尺寸时,菜单功能的按钮被隐藏;
  2. 而视窗宽度 ≤ 移动端尺寸时,平铺的按钮被隐藏。
<>
<div className="hidden sm:block"> // 平铺的按钮,视窗宽度 > 移动端尺寸时出现
<Link>作品</Link>
<Link>博客</Link>
<Link>关于我</Link>
</div>
<div className="sm:hidden"> // Headless UI 的菜单组件,视窗宽度 ≤ 移动端尺寸时出现
<Menu> ... </Menu>
</div>
</>

至于展开的菜单,我是用了 Headless UI 的 Menu 组件来实现的(经过轻微改造),这里面内置了展开收起的动画,以及无障碍访问相关的特点。组件挺好使的,而且文档也很完善,提供了很多功能和描述。

Headless UI 的 Menu 组件界面截图

重构后博客文章里的目录,我也是用类似的方法来做响应式适配的。这部分的内容在下一篇文章中呈现。

图标

虽然说在工作上我做过不少图标,也负责过图标库的管理和迭代。但在这次重构 LRD.IM 的项目中,我没有自己去设计图标,用的都是外部资源。

因为在我看来图标只要能辅助表达出意思就行了,没有必要在这上面花太多功夫。把时间和精力放在其他更有意义的地方。

网站中我主要依赖外部的图标库 React-Icons。里面包含了很多主流图标库的内容,比如:Ant Design、Boostrape、Remix 等等。

React-Icons 网站界面截图

而我主要使用了 Ionicons 5 系列的图标,比较符合设计风格。用起来很简单快捷:

import { IoLink, IoList } from "react-icons/io5"; // 加载图标库

<IoLink /> //直接使用图标
<IoList className="text-xl" /> //为图标添加样式
使用框架来构建网站的好处是:能够很方便地用上各种插件和库。这是在旧版网站里不敢想象的事情。

The Joy of React 课程的收获

上一篇文章中提到在项目后期我参加了 The Joy of React 课程,在系统地学习了一些 React 的知识后对代码做了些改进,比如对图片展示组件的改进。

设计图片组件

在我的作品详情页面中,「图片」是一个会被频繁用到的媒体。而图片的呈现又有多种方式。

用三张截图分别展示图片组件的多种变量。从上至下分别是图片尺寸、图片描述、长图滚动和图片放大。

上图中能看到,我的图片组件会有六个属性允许配置或填写。

  1. src:填入图片的路径(必须)
  2. alt 文本
  3. 图片尺寸:大 / 小
  4. 图片滚动:允许 / 禁止
  5. 点击放大:允许 / 禁止
  6. 图片描述:内容 / 为空

而其中这几种属性可以互相组合,比如:

  1. 大尺寸图片 + 允许滚动 + 禁止点击放大 + 有图片描述
  2. 小尺寸图片 + 禁止滚动 + 允许点击放大 + 无图片描述
  3. 小尺寸图片 + 允许滚动 + 禁止点击放大 + 无图片描述

所以我在设计的图片组件时,开放了这些属性,允许在页面中自由配置某一张图片的样式和功能。同时将常被用到的属性会被设定为默认值,尽量减少在页面中的代码量。得出这样的一个 API:

export default function ProjectImage({ src, alt, size, scroll, zoom, children }) {
return (
<>
<figure className={scroll === true ? "scroll" : ""}> //scroll 为 true 则添加允许图片滚动的样式
<div className={`${size === "small" ? "max-w-2xl" : ""}`}> //scroll 为 small 则添加限制图片容器宽度的样式
{zoom === false ? ( //zoom 被设置为 false 时,使用不能点击放大的图片组件
<Image
src={src} //读取外部填写的图片路径
alt={alt} //读取外部填写的图片 alt 文本
/>
) : (<Zoom //zoom 被设置为 true (默认值)时,使用允许点击放大的图片组件
src={src}
alt={alt}
></Zoom>
)}
</div>
</figure>
{children && <figcaption>{children}</figcaption>} //children 非空时,将其渲染出来
</>
);
}

同时又存在着一个互斥关系,比如:允许滚动的图片,禁止点击放大;禁止滚动的图片,允许点击放大。(因为当下我用到的图片放大组件对长图片的支持并没有很完美),补充相应代码:

export default function ProjectImage({ src, alt, size, scroll, zoom, children
}) {
zoom = !scroll;
return (
<>...</>
);
}

最后在页面中使用该组件时,只需要填上必填的src,如果有其他尺寸或滚动上的属性配置,也传递进去就好了。

//默认:大尺寸图片 + 禁止滚动 + 允许点击放大 + 无图片描述
<ProjectImage src="01.png" />

//配置为:大尺寸图片 + 允许滚动 + 禁止点击放大 + 有图片描述
<ProjectImage src="02.png" scroll={true}>
一个文本示例。
</ProjectImage>

//配置为:小尺寸图片 + 禁止滚动 + 允许点击放大 + 有图片描述
<ProjectImage src="03.png" size="small">
另一个文本示例。
</ProjectImage>

可以对比一下在使用组件前后,源文件的对比。代码可读性提高了许多,同时也更方便管理和迭代了。

后如果我想有什么调整或者新功能,只要改动组件就好,再也不用在编辑器里打开数十个 html 文件逐个修改了。也不用在一堆代码高亮后的标签内寻找内容了。

用两张在代码编辑器里的截图展示使用组件前后,源文件代码量的对比。左侧是使用前,用红框标记代码量,一共 43 行代码;右侧是使用后,用绿框标记代码量,一共是 11 行代码。

图片组件比较常用,后面也会根据具体用途的变动和个人能力的长进来不断优化。

预告

下一篇文章将会介绍我是如何使用 mdx-bundler 来重构整个博客功能模块,包括 mdx-remark 插件、内容生成方式、目录组件、RSS 生成等内容。以及我为了增强阅读体验所做的工作。敬请期待吧~(自说自话 🙄)

本文于 2023 年 03 月 12 日首发于 LRD.IM

用 Next.js 重构个人网站 (一):概述

By: 李瑞东
14 March 2023 at 22:03
封面图:Maxime Bourgeois

我的个人网站从 2017 年底(大四上学期的期末)进行 “研发”,2018 年初部署运行,现在已经过去了 5 年。中途经过大大小小近 300 次迭代和内容更新。

从原本只是用来放置我做 Side Project 成果的内容,到后来变成我对外展示的窗口,用来展示我在实际工作中的项目,以及设计博客和翻译的文章等。LRD.IM 的页面布局、风格样式、内容、功能等等随着我的设计生涯发展有着很大变化。

个人网站的发展过程图

互联网档案馆 Internet Archive 保留了 2019 年之后的存档。之后每一次改版我也会在该网站留下存档。不知 5 年后又会是啥样呢。🤔

唯一不变的是,它仍然是用纯粹的 HTML + CSS + JavaScript 来实现的。访问我的网站就像是打开一个文件夹,浏览器只是将我的 html 打开而已。

网站内部没有组件,没有数据源。改动一个公用的地方,如页面顶部导航栏或博客的文章添加一个模块时,我需要在编辑器里打开数十个 html 文件逐个修改。

自己一直有想着改造一波,但自己当前的水平,想做出一个现代化的个人网站还差很多。所以这个计划也就一直搁置,自己日常中最多是观察下其他优秀的个人网站及其实现方式,储备点灵感。

直到两个动机和一个条件的出现,我觉得是时候了。

动机和条件

动机:迭代频率

最开始我的博客页面只是一个列表,点击里面的文章都会跳转到 Medium 平台里面。后面我觉得这样做体验巨差,原因:

  • 自己创作的内容全部都放在别的平台上面去了。这是一个令我太不舒服的感受。我的想法是可以放到其他平台内,获取一点点流量和 SEO 的优势,但自己的站点是最优先的;
  • Medium 需要科学上网才能较好访问。读者的体验未必会好,从稳定性上考虑也不利于长期发展;
  • Medium 一直没有进步。感觉这几年这个平台在原地踏步,或者甚至是下坡路。这是我作为长期用户的主观感受。

所以后面我将 Medium 的文章导出成 HTML 文件(平台的功能),作出相应的调整后贴回自己的网站上面,这样文章就能又回到自己那儿了。

但这个转换的过程并不简单,Medium 导出的 HTML 是带有他们的一些标签和样式的,当时我是将每一篇文章的 HTML 都筛掉没用的内容,然后 CSS 里编写了一套自己的格式文本的样式,使其适应网站的设计风格。由于步骤太多我甚至还将做法记录了下来,发布文章之前任何一步有纰漏都会出问题。

Github 中我对 Medium 导出文章的处理方法

这套混乱的秩序维持了至少一年半,这期间我的每一篇文章都经过这样的处理。包括后面添加的「目录功能」、「博客功能区」等有新增或调整代码的时候,我都要在每一篇文章(40+ 篇)的对应位置里增删改。

这种手动、机械式、重复的工作不仅导致迭代网站的时间成本极高,也很容易出错

比如某篇博客的功能区,本身应该所有页面的这块内容都应该长得一样,只是日期不同,但就是因为我将数十个 html 文件逐个修改的时候出现了纰漏,导致某些页面的样式异常。

博客功能区异常和正常的对比
我将某段代码复制到该页面时可能某个地方出现了疏漏,就出现了样式异常。
这次重构我抛弃了 HTML,改成了用 MDX 来支持我的博客内容。之后的文章会介绍到我是如何用 mdx-bundler 来重构整个博客功能模块。以及我为了提升阅读体验所做的工作。

动机:体验问题

我对网站里面有一个非常刺眼的体验问题一直耿耿于怀。

暗色主题下刷新页面会出现闪烁
原本的做法下,亮/暗主题色的切换功能是写在 JS 文件里面。而用户在跳转页面时会重新加载一次文件,偶尔会出现令人难以接受的闪烁。

留意页面切换时的背景色闪烁问题。

我也带着这个问题咨询了前端工程师朋友,他认为如果将网站做成 SPA,应该就能解决这个问题。

单页应用(英语:single-page application,缩写SPA)是一种网络应用程序或网站的模型,它通过动态重写当前页面来与用户交互,而非传统的从服务器重新加载整个新页面。 — — 维基百科

而且对于主题色,其实最好是能给用户手动来切换,并且记录上次更改后的结果。但这个功能要做在静态网站上,而且想到有代码更改的话又得将数十个 html 文件逐个修改,实在是没有研究的动力了。

条件:离职之后

2022 年 11 月我从欢聚离职,回到老家,暂时离开城市和朋友圈。有充足的时间给我去学习这方面的知识,以及去做相关的实践。

技术栈

这次的重构我的个人网站并不是一时兴起,平常自己也会了解相关的资讯。既然选择了行动,就已经做好跳出舒适圈的准备,接触一些以往从没有实践过的内容。

Next.js

整个 2022 年,通过 Next.js 构建的网站挤满了我的推特信息流。时不时都会看到有些设计师/开发者在推特上发布自己的个人网站。也发现许多充满设计感的网站都是通过 Next.js 来做的,比如 LinearPipeFeyFrame.io 等。

设计的较好的网站截图示意

在一众先驱者的引导之下,我也去了解了下相关介绍,甚至还看了点 Next.js 初学者教程,里面大部分内容我大部分都能够 Get 到。感觉上手难度不大,又有这么多大佬级的网站做背书,于是乎,就是你了 — — Next.js!

Tailwind CSS

我选择使用 Tailwind CSS 的原因主要有两个:

第一个是这个网站做得很好看,包括它给出来的 Template,这让我有了进一步了解的兴趣;

第二个原因是这确实有效解决了在迭代原网站时让我烦恼的地方:

  1. 我基本上再也不用绞尽脑汁去想某一个元素的类名(还得是英文的,时间久了想不起来哪个样式用在哪);
  2. 在实际写代码的过程中也不用经常在页面和 CSS 文件中来回切换了。现在写反馈效果、媒体查询、深色样式时很方便;
  3. 最关键:我再也不用维护一个 2,000+ 行的层叠样式表了!重构后的 CSS 文件轻量了很多,因为都写进网页和组件中了。
使用 TailwindCSS 前后的代码量对比

Mdx-bundler

之前将 Medium 文章迁移过来的时候,就发现了 HTML 的做法只适合有富文本编辑器的平台。而像我这样式的多数在代码编辑器里面书写的话,可能 Markdown 更合适。

然后我是在 Tailwind CSS 的 Protocol 模版介绍当中了解到原来 MDX 是可以让 Markdown 和 Next.js 联动起来,然后也在 Josh 介绍自己的博客时。也有介绍到相关内容,于是就选择了 mdx-bundler 来实现我的博客模块。

Protocol 和 Josh 博客的截图

MDX 允许我们安装各种插件来增强博客的能力。比如支持到 Github Markdown 语法的插件 remark-gfm 和代码高亮插件 Rehype Pretty Code 等。

remark-gfm 和 Rehype Pretty Code 的截图

而且还能嵌入自己编写的 React 组件,这是让人感到惊奇的能力。这意味着我的博客文章可以不仅是图文、视频和 iframe 了,还能有一些互动元素,有很大的想象空间。

过程概述

由于我属于边做边学,所以整个重构的过程并非从头到尾一次性完成的。而是一个螺旋式上升的过程。

路线图:核心功能(设定通用布局和主要的样式、数据源和遍历、mdx-bundler 渲染博客文章) -> 填充内容(填充列表所需的文本、配图、URL等数据、用 Markdown 重写博客文章,并填入元数据、填充作品详情的内容) -> 带着过程中遇到的卡点和问题,在课程或其他开发者博客中学习理论知识 -> 将理论知识运运动到实际网站开发当中,解决问题和优化代码。
插图素材来自 egghead.io

第一步:核心功能

当时先完成核心或通用的功能部分(遇到难搞的功能先记录并跳过),然后将原站点的所有内容填充进去。
这时确保网站在本地环境中基本能正常跳转和响应点击,深色模式和响应式等适配工作需要完整做好,因为这方面是相对简单的工作。具体来说:

  1. 先学会 Tailwind CSS 和 Next.js 的配合使用,设定好通用的布局和主要样式。以及调试主要页面之间的路由跳转;
  2. 开始构建主要页面,学会运用数据源和循环遍历来呈现页面内容(完整的内容先不填充,确保循环能跑通,数据能正常获取);
  3. 尝试使用 mdx-bundler 来读取博客列表和渲染 Markdown 文章。这个模块特别重要,当时花了不少时间。

第二步:内容填充

这时会带着早些时候记录下来的问题和卡点,去耐心查阅并参考尝试其他开发者博客里面他们的实现方案,同时也进入 The Joy of React 课程当中系统地学习一遍 React 的基础内容。具体来说:

  1. 填充所有数据源和遍历中用到的内容,如某个字段的文本、配图的 URL 等;
  2. mdx-bundler 跑通之后,我用 Markdown 重写了所有的博客文章,并且每篇文章都填入相应的元数据;
  3. 填充所有作品详情页里的内容。

第三步:填坑优化

有了知识储备之后,最后再回头把原有的一些卡点和问题填补上,或者优化下原本的代码。甚至会改良下组件的命名、文件夹结构等等,这些会参考到其他开发者他们所总结出来的的最佳实践。

  1. 带着过程中遇到的卡点和问题,在其他开发者博客或课程中学习理论知识;
  2. 解决之前的卡点和问题,完成所有功能,以及边缘场景的处理;
  3. 看看原有代码有没有哪些地方可以改良;
  4. 重复「学习→解决→改良」步骤,直到网站达到了我认为能够部署的标准。

解决问题的方法

做一个网站实属不容易。尤其像我一样在自己的能力之外,选择用框架来实现,过程更加是绝非一帆风顺。不止跳出了舒适圈,甚至还跳进了「痛苦圈」。

技术方面的指引我不敢乱写,倒是可以分享下在这次重构的过程中,我用到的几个解决问题的方法:

搜索引擎和编程社区

一些广泛的问题我会找 Google 来帮忙,比如我想看看别人是怎么做亮/暗模式切换的,我会搜索类似 “next.js darkmode switch”,搜索结果中可能会出现一些开发者的博客、Stack Overflow 或 Github Issue 中提出相似问题的人,这些内容是我可以拿来参考的。

搜索+实践的示意图

ChatGPT

在去年 12 月 ChatGPT 横空出世,当时有看到很多推文有展示它的神奇功力。我甚至觉得它很多的回答比人来回答还要好,很清晰和有条理,让人感到意外。

我也利用上这股强大的力量,用 ChatGPT 来解决一些具体的问题。比如现在博客文章里面的目录,会查找页面内所有的H2 H3标签并生成为一个列表,这就是我向 ChatGPT 提出我的需求之后,它来帮我写出来的。

ChatGPT 帮我实现博客文章目录功能的回答

另外我也会让 ChatGPT 帮忙解释某段代码的意思或作用。我从搜索引擎或编程社区里获得的一些解决方案,有时候某些语句自己没看懂的时候,会需要 ChatGPT 来帮忙解释一下,好让我针对自己网站的特点作出些许改造,或者了解报错原因和解决方法。

Joy of React

即便 ChatGPT 能解决部分具体的问题,但也不是万能的。实际开发中有些特别具体的问题,始终还是要靠自己。我对 JavaScript 掌握的程度是属于半滴水(半桶水都算不上),对 React 以及里面的 JSX 语法更是完全没了解过。

简单的内容靠查阅文档 + 观察规律可以学会,比如我通过看其他人的案例,我大概知道了每个组件里面都要有一个export、return()里面只能有一个子标签、JSX 里面有一个特殊的标签是<> ... </>等等...

但稍微再具体一点的问题,比如根据某个条件来更改样式,或者甚至想直接做一个需要传递参数来改变展示方式的组件,这些特别个性化的内容想要光靠搜索引擎和 ChatGPT,效率太低了。很可能搜半天还是一头雾水,浪费光阴。

刚好在今年 1 月 24 日,前端大佬 Josh W. Comeau 发布了 The Joy of React 的教程,这是一份面向初学者的 React 教程。在里面我能系统地学到一些 React 相关的知识,或者课程中会用到的 JavaScript 的基础等。

Joy of React 课程介绍页
The Joy of React 的课程封面

这门课程对我的网站重构项目起了很大的帮助,学习后我弄清楚了一些 React 的运行规则,也确实做出了一些实用的组件,改进了页面的代码质量。之前一直卡住的、很具体的问题也在学习之后得到了解决。

这份 $50 左右的课程干货满满,作者也很用心地安排了每个章节会有互动性的练习,也会附带一些视频解说(有 CC 字幕和视频摘要)。后续我可能会出一篇文章来回顾下我在这个课程内学到的内容,记录下这段激情澎湃的青葱岁月。

请教专业人士

好吧,如果有些问题确实难搞,自己用尽所有的方法都没法解决,同时也在这个问题上耗费了很长时间的时候,我会咨询一些前端工程师朋友。

工作几年我一直和前端工程师的关系都也还行,所以有时候问到些问题他们也乐意帮我解答(还因为我的问题在他们眼里其实非常基础…)。

除了现实中认识的朋友以外,其实也可以咨询网络上的一些开发者。如果一个开发者将他的经验分享出来后,其他人使用过程中遇到问题,大部分都乐意帮忙解决的。

联系两位站长后帮忙解决问题的邮件

未完待续…

这一篇文章记录了重构我的个人网站 LRD.IM 时的经历,计划后面会有多几篇文章来记录具体我做到某个模块时的一些过程,或者说重构之后一些我认为比较有意思的改良等等,算是给这次重构计划一个交代。

本文于 2023 年 02 月 21 日首发于 LRD.IM

网页布局设计和适配(分享会文稿)

By: 李瑞东
31 October 2022 at 21:30
前言:公司前段时间新来了不少交互设计师, Leader 邀请我做一次网页布局相关的分享会,来帮助以往比较少界面设计经验的交互设计师能够更好地完成设计方案产出和交付。现在我将文稿记录在这里。

布局是处理内容和视窗或容器的关系。通过创建清晰的视觉模式来帮助建立层次结构并传达重要的内容。通过这次分享,你将会了解到:

(这份文稿可能比较长,读者不妨挑取感兴趣的内容查看即可✌️)

布局方式

固定布局

以一个固定的宽度来布局,视窗宽度变化不会改变内容的展示方式。可以理解为“不做适配”。一般在复杂的网页后台会使用这种布局方式,因为适配一个复杂后台成本较高,就会用成本最低的固定布局。

流式布局

通过设置元素所占比例来使内容适应视窗。与固定布局的明显区别是这时内容已经能根据宽度来调整适配,以更好地展示内容。这种布局典型的代表作便是我们常说到的 “栅格系统”。

响应式布局

响应式布局其实就是我们平常所说的 “适配”。页面的布局和元素会随着浏览器视窗的变化而重新排列。实现上会利用流式布局和断点适配等做法,将一套代码适用在所有屏幕分辨率。

响应式布局下,页面内的元素需要能够调整大小和重新排列,所以在专注于内容(如新闻、博客)而不是功能的网站(如 SaaS)上实施响应式设计通常更容易。复杂的数据或交互可能很难在拥有高度的灵活的同时保持清晰性和功能性。

一股清流是咱们的竞品 Shopify,将复杂的电商独立站后台也做到了响应式布局。这一点哪怕是 JIRA、Salesforce 等其他国外大公司的应用也没做到的,所以 Shopify 在设计上有很多值得我们学习的地方。

自适应布局

特点是会为不同类型的设备而专门做一套设计,实现上会用多套代码来适应多种设备。通常会由服务端来根据设备类型而选择要展示的页面布局。

比如 SheIn 官网的链接是 https://us.shein.com,用手机设备访问该链接时,会被重定向至 https://m.shein.com/us,以展示专门针对手机端用户的网页。

这个做法在 C 端网站上使用比较多,因为使用场景不同,电脑端和移动端的产品运营策略会有明显不同,设计上的侧重点、功能都会有较大差异。除了电商网站以外,常见的比如新闻资讯、视频直播等产品也会这样做。

区分响应式布局和自适应布局的方法

比较简单的方法是在打开网页后改变手动改变浏览器宽度:

  • 响应式布局:页面布局会实时做出适当的调整以确保内容完整展示;
  • 自适应布局:页面没有适应到浏览器宽度,需要重新加载页面后才会更新布局。

当然也有些站点比较注重用户体验,自适应、响应式布局均有实现。所以这类网页可以确保在任何设备和任何尺寸的视窗下都能较好地展示内容。

SHOPLINE 主站的经典布局方式

在实际工作中不难发现有几种布局方式是特别常用的,而且也会有既定的一套适配方法,这一节内容是对此的相关描述。

基础布局

基础的将内容平铺出来,注意有三种宽度做法,对应不同的场景。

满宽度:承载更多同层级的信息
这种布局拥有最多的宽度,所以适合在信息量较大(表头或筛选操作较多)的宽列表和复杂表格中使用。

中等宽度:综合型页面
最常用的做法,适用于综合型页面,比如复杂程度适中的表格、概览页、详情页等。

窄宽度:专注单个任务
页面本身的内容较简洁时,如简单报表和表单,会用到该布局。用户可以专注于单个任务之中。

主次布局:突出重点任务

这种布局常用在后台里复杂/内容较多的编辑页面中,其特点是分成主要和次要的两列,能够突出重点任务

将重点任务或必填项放在主要的列,而次要/低频/非必填/摘要等内容则放在次要的列里面。

注释布局:快速导航到特定模块

将内容分为多个不同的模块,模块之间的关系并非环环相扣或很密切。所以这种布局便于用户快速定位到某个特定的模块,并且能承载一部分的描述文本,会常用在设置页面当中。

编辑布局:预览

用于有实时预览需求的编辑场景,左列进行的改动会实时反馈在右列预览界面中。

响应式布局的适配思路

Figma 中的画板宽度是固定的,而实际情况中浏览器的视窗会随用户拖动而改变,我们在做响应式适配时可以参考以下 3 种思路。

掌握适配思路的重要性:
适配思路提供了足够多的方法设计方法,帮助设计师应对各种无法被枚举的场景。

思路一:调整大小

动态调整 UI 元素的大小使其适应容器或视窗。常用在图片、步骤条或其他系统控件当中。

实现方式1
宽度缩放。即高度不变,只是元素的宽度作弹性变化,此时内容可能会被裁剪,或者挤压同一行的其他元素。常用在输入框、进度条、下拉菜单等系统控件中。

实现方式2
等比缩放,或按某个比例缩放元素,常用在图片或视频播放器等媒体元素上。

TIPS: 图片、视频适应容器时,会有三种适配方式:

  • Cover:内容等比缩放填满容器四条边,可能会裁剪部分;
  • Contain:内容等比缩放以填满容器的宽或高,可能会露出部分背景;
  • Scale-down:在原图和 Contain 之间取一个尺寸更小的结果。

思路二:重新放置

更改 UI 元素的位置和放置方式,以换取更大的横向空间用于内容的展示。

实现方式1
将排列规则设置为内容放不下而自动换行。

实现方式2
另一种方式则是通过设置断点进行布局更改。

思路三:隐藏元素

基于屏幕空间来显示或隐藏 UI 元素。将原本在同一行内的元素折叠收起,通过一些交互动作来获取完整信息(如点击、Hover、快捷键等)。

实现方式1
在内容超出容器时,折叠在视窗外的内容。通常用在内容数量或所占宽度不固定时的一种适配方式。

实现方式2
视窗宽度到达某个断点时折叠。在这种方式下内容宽度不会影响是否折叠,所以适合用在内容固定的场景。判断到出最佳断点时机后才触发折叠。

交付布局适配方案

在实际网页中还原响应式布局的适配时,前端会用到的主要是两种方式:

  • 给内容设定相应的适配方式,会用到 Flex 布局
  • 通过断点来改变布局,则是用到媒体查询

这里不会从前端角度展开来说这两种方式的特点,而是会介绍在做设计时如何交付布局适配方案。

交付内容适配方案

内容适配通常指的是在一些卡片或容器里面的内容、文本、控件等的适配方式。实践中我会专门在旁边加一个画板用来描述内容的适配方式。通常是先写容器的适配,再写文本的适配,因为通常文本总是会被容器所包裹着。

顺便再列举一些我常用的内容适配方式吧。由于我们业务的特点是需要支持国际化适配,所以很多地方都是需要用到内容宽度,而不是固定宽度。

交付断点适配方案

断点适配指的是我想在视窗宽度小于多少或大于多少时,布局作出怎样的变化。如果基础的设计稿是用 1920 宽度的画板来完成,那么我会在标注在视窗宽度小于某个值时时,希望页面的布局会如何变化。

这一部分是偏向标注一些较大的布局改动。比如卡片的列数、一行的内容个数等等,这些适配是需要前端利用媒体查询来做屏幕断点适配的。

新的适配方式

容器查询(Container Queries)能够让我们实现基于容器尺寸的响应式适配。

开始写这篇文稿时是九月初,那时候这个规则仍然在测试中。而刚好现在从 Chrome 106、Safari 16 开始,已经正式支持了。所以咱们有必要去了解容器查询的能力以及去畅享潜在的使用场景。

什么是容器查询

以往我们用媒体查询来实现自适应布局。让 CSS 探测浏览器的视窗宽度,大于或少于某个像素时作出相应的样式变化。

而容器查询允许我们探测一个容器的尺寸(比如某个卡片宽度、导航栏宽度等),基于此来做样式变化。

畅想适用场景

小型布局
容器查询的特点使得容器在做样式的自适应适配时可以更准确和灵活。比如在多列布局时,针对某一列的宽度来做更多的适配动作。

文本适配
由于可以探测容器或元素的宽度,或许在展示指标的时候能派上用场,即根据容器的不同宽度来调整字体大小、字重等。

这种事情在以往可能会需要用到 JavaScript 或其他方式实现,现在纯靠 CSS 就能实现了。

尤其是现在有了容器查询后,由于样式变化是基于原本的模块,而不是浏览器视窗的,我们或许甚至可以抽离出来,将这种适配方式做成组件化,会更灵活。

内嵌 iframe
iframe 嵌进网页之后,视窗宽度其实指的是 iframe 容器的宽度,而不是常规的浏览器宽度。如果此时 iframe 内的页面沿用常规的断点尺寸,那么效果会产生些许偏差。

因为 iframe 容器 始终是会比浏览器宽度要小。就好比 iframe 内网页断点设置是小于 1200px 时布局变更,那么实际上会在浏览器视窗比 1200px 大的时候,就已经发生了布局变更。

这时如果利用上容器查询的特点,或许就能确保布局变化始终在预期之内,不会受到 iframe 容器本身宽度而干扰。

总结

撰写这份文稿之前也有采访过几位交互设计师,针对他们的痛点也专门准备了相应的内容,希望能对他们有帮助。

都说分享会的最大受益人是分享者本人,确实这次在整理相关知识的过程中也有不少新的收获,对我来说在探索自适应和响应式布局的区别、尝试抽象归纳出尽可能多的适配方法、容器查询等等这些内容的时候我也有收获到不少东西。

参考

App 表单校验时机探索

By: 李瑞东
17 August 2022 at 14:14

动机

在我接手 App 这波需求迭代的时候,发现一个很常见的问题却没有在设计规范里提到过(其实原本也没啥设计规范…)。那就是:表单的校验时机。

工作中我发现每个保存到数据库的表单都会有至少一个校验规则,最常见的是字数,其他的有类似格式(邮箱、数量)、上下限(价格、库存数)等。而表单的校验时机通常是在三种方式内选择:

  1. 输入中校验;
  2. 失焦后校验;
  3. 提交时校验。

由于接手时并没有规范或者指引帮助我如何判断使用哪种,工期紧张也没有足够时间去探索,我只能拍脑袋地大部分都采取了「失焦后校验」的方法。

后面我发现这其中的差异还是挺耐人寻味的,有必要探索三者之间的各自优劣势和适用场景,于是乎就有了这篇文章。

三种校验时机的差异

输入中校验

效果:输入过程中(即文本有更改时)校验并反馈报错文案。
优点:实时反馈,出错后立即提示。
缺点:容易误判。即未完成输入就提示出错。

适用场景:
1. 纯前端能满足校验需求时;
2. 校验规则较严苛时,如一个表单多条校验规则,或中途某个错误字符直接影响到表单提交时。

修正错误的成本:低
在手机的的「键盘控件」内重新键入内容即可完成修正。

失焦后校验

效果:失去焦点后校验并反馈报错文案。
优点:输入过程中无干扰,在输入完成后再反馈报错文案。
缺点:失焦后才知道结果,修正成本高。

适用场景:
1. 纯前端能满足校验需求时;
2. 用户对输入框内容格式有预期时,如邮箱、手机号等。

修正错误的成本:高 ★★
需要先「失焦」,再回到原本的输入框「重新聚焦」,并通过「键盘控件」修正。

提交时检验

效果:提交表单时校验并反馈报错文案,通常会伴随着使用 Toast 提示。
优点:后端校验时,不影响性能&体验。
缺点:报错反馈很不及时。

适用场景:
1. 大部分需要后端校验的表单。

修正错误的成本:较高 ★★★
需要先「提交表单」,再「找到」出错的的输入框,并「重新聚焦」原本的输入框,通过「键盘控件」修正。

至此,上面列出了三种校验方式的各自优劣势,对比后不难得出结论。

结论

推荐优先使用「输入中校验」的规则。

原因:
1. 反馈最及时;
2. 修正错误的成本最低;
3. 对研发工作量和 App 性能无影响(前端校验时)。

理论支撑:

“理想情况下,所有验证都应该是内联的…”
“…在字段完成后立即修复错误对用户的交互成本最低…”
—— 来自 Nielsen Norman Group 的《如何反馈表单中的错误:10 条设计指南

通过这次的对比,我决定了之后都将「输入中校验」作为主要的校验方式,当然这种方式也有一些不适用的场景,此时就需要换一种校验方式。举例一些常见的不适合用「输入中校验」的表单:

  1. 容易误判的表单,如校验邮箱、电话、网址的格式时;
  2. 设置了数量下限时,如公司业务里的 B2B 商品设置了起批量时;
  3. 需要后端校验时,如需查重或对比数量上下限时。

其他感悟

对需要后端检验的表单态度

因为涉及到后端检验,意味着需要网络,那就会出现加载中/超时/加载失败/加载成功 的情况,所以这种表单一般是失焦后或提交时检验,这对输入体验会相对友好一些。

但也有例外,比如 Twitter 账号在重命名时,就使用的是输入中校验。可能是因为 Twitter 用户量庞大,特别容易重名。提交后检验反而效率更低。

输入前的体验设计

常言道好的体验设计能减少用户出错,在表单输入之前,实际上我们也可以用多种方式明示暗示文本框的填写规则。

一、输入框长度

输入框长度能过暗示文本框的预期填入内容。比如在填地址和邮编时,通常地址我们会预留比较宽的输入框给用户填写,而邮编则可以相应缩减,因为这两个类型的字段,预期填写的文本长度是有明显不同的。

参考资料:整齐划一?不如错落有致。| Ant Design 4.0 系列分享

二、实时字数显示

在输入框旁边实时展示当前字数和上限是也是比较常见的做法。
优点:避免出错;让用户对表单的规则有一个预期。
缺点:页面出现过多此类提示会使页面臃肿,反而会增加视觉&认知负荷。

所以我对这个做法的态度是:每个表单都会有文字输入的上限,超过上限时也一定会禁止提交、出现提示。但是否将字数提示常驻展示,取决于「用户对长度是否有预期」。

比如在一些备注、描述、说明等大段文字里,用户可能会输入到大段文本,但又对这些输入框的上限没有预期,那我这里判断到是需要出现实时字数提示的。而像比如填写姓名、添加标签这种,字数上限只是一个兜底的判断逻辑,不需要特意暴露出来。

另外可以根据存量数据来决定是否展示实时字数提示。比如让后端同事帮忙导出在数据库里的数据,能知道用户在这个输入框里一般会填写多少个字,如果大部分情况都是接近字数上限的,意味着用户在这个输入框会输入较多的文本,此时就需要展示当前字数上限,甚至或者调整校验规则。这是我在上一家公司(千聊)里做过的事情。

三、占位符(Placeholder)

无论是 NNGROUP 还是 Shopify UX,都对占位符文本持有比较谨慎的态度,甚至会用到 Harmful、Avoid 等贬义词。他们主要批判的是用占位符代替标签的做法,我们在使用时避免这种用法就好了。

实际上占位符和标签共同使用时没什么毛病,占位符确实能起到一定的补充作用,用来提示要输入内容的类型和名称,只是不要用来展示重要内容和代替掉标签就好了。合理使用也是减少用户出错的方式之一。

四、常驻帮助文本(Help text)

帮助文本可以视为占位符的进阶版,具体效果在输入框附近常驻一段简短、必要的说明内容,帮助商家了解输入框所要求的格式,或输入后的内容会怎么处理。甚至还可以链接到 FAQ,有丰富的用法。

一条原则

在文本有上限的输入框里,我们会面临一个选择是:超过字数后是否允许输入?

我在这里的建议是允许继续输入,同时会出现报错的反馈,告知规则。因为翻查了很多 UX 资料,都建议在设计中要避免「打断了用户行为」。下面放出两种方法的优劣对比,各位看官理性抉择:

超上限后允许继续输入
效果:输入的文本超过该文本框校验规则上限时,出现报错反馈,同时也可以继续输入文本。
优点:反馈及时,原因清晰。
缺点:🤔…

到达上限后禁止输入
效果:输入的文本到达该文本框校验规则的上限时,禁止输入更多的文字了。
优点:🤔…
缺点:没有反馈,不知道错误原因。

这么看下来,就体验而言是「超出上限后允许继续输入」要好很多。而且这种方法还照顾到一个场景是:允许用户在输入中发现超出长度后,把当前的单词输入完整后再去删减其他内容。

当然毫无疑问,到达上限后直接不允许输入是对设计和研发来说最省力的做法。这种做法下不用反馈,也就不需要做反馈时机的决策、反馈的文案及多语言、文本的适配、反馈后的布局适配…

我有一段经历是项目工期巨紧张,规范也没相关的指引。当时有很多比制定文本输入规则还重要的事情需要处理,于是乎我就都一拍脑袋用了「达上限后禁止输入」的方法。

后面与其他方式对比发现这种做法应该是体验比较差的做法了。像现在我把规范做法加进 App 设计的指引里面之后,就大多数情况下都会使用「允许继续输入,在输入中反馈」的方式实现。

结语

以上内容就是目前来说我对文本框校验规则的一些认识,包含了各种校验时机的对比,输入前的体验设计,以及不打断用户操作的原则。

这次的总结是我挺久之前就想干的事情了,因为平常工作中一直遇到这种问题,也没有一个明确的设计指引能够参考,现在自己写下来这篇笔记之后,之后的设计方案会考虑得更周全,说服力也更强了(希望是吧)…

同时再浅挖一个坑:之后要探索下表单提交按钮相关知识,比如说什么时候要禁用按钮,什么时候是允许点击但报错等等,这个应该还要复杂一点…

参考资料

【译文】如何冲破设计系统的界限

By: 李瑞东
12 August 2022 at 22:46
原文:How to push the limits of a design system · Shopify UX
作者:José Torre
译者:李瑞东
翻译小帮手:李泽嘉 @urcharles7(公司的交互 Intern)

为了跟上需求,设计系统需要不断发展。讽刺的是,设计系统的进化似乎有点像先有鸡还是先有蛋的问题。

如果不知道产品业务需要什么,专门负责设计系统迭代的团队就无法进一步发展。另一方面,大多数业务设计团队只在系统的现有规范和组件内完成工作,这不利于进一步推动系统的发展。这样看上去像是僵住了,大家都在停滞不前。

我们 Polaris 团队(译者注:Polaris 是 Shopify 的设计系统)想打破这种僵局,所以采取了行动……

跨越鸿沟

为了防止 Polaris 变得失去创造力,我们必须更接近产品。因此,我们开始了一项名为 PolarisLab 的计划。在几周的时间里,围绕一个特定的主题,与产品团队发起并参与了一系列工作坊和会议。目标很简单,就是要设计系统团队与产品团队紧密合作,以便:

  1. 帮助团队找到解决问题的最佳方案;
  2. 找到设计系统不断发展迭代的方法。

我们的首先聚焦在 Layout 组件上。因为我们开始注意到越来越多的页面似乎不是专门为解决一个问题设计的。相反,页面的设计来自设定好的多个模板之中(以页面布局组件的形式)。这些模板是相当通用的,但并不总是解决一个单一问题的最佳方案。

Layout 组件中有六种选项

过度使用这样的模板可能会使页面看起来在视觉上一致,但会让用户感觉到没有重点和枯燥乏味。

刻板地遵循设计系统提供的模板,使得会出现让内容来适应页面布局,而不是内容主导布局。这使得浏览一个页面变得困难,需要用户花费大量的精力去弄清楚需要的内容在哪里,以及下一步该做什么。

我们还注意到,由于我们的 Layout 组件过于死板,导致团队经常脱离 Polaris 来做一些细微的布局调整,这就导致了代码层面工作量的增加。

我们已经明确了想要解决问题的,甚至已经有了行动的代号,但我们缺少最重要的部分——团队。

寻找团队

我们希望找到那些有兴趣与我们的团队合作改进 Layout 的团队,而且是热衷于发展 Polaris 设计系统的团队。幸运的是,公司里有很多这类型团队。

我们联系到了 7 个不同的团队,在了解到他们的问题空间和最近的工作排期后,我们决定与做 B2B 客户业务的团队合作,因为他们满足了所有条件:

  1. 能够有效地解决问题 ✅
  2. 该案例有可能对其他团队产生影响和启发 ✅
  3. 能够在紧迫的截止日期前交付 ✅
  4. 对开始工作超级兴奋 ✅

不久后我们明确了项目的目标,并开始了合作。我们设定的工作流程并不复杂:

第一步:了解问题

第二步:发散和探索

第三步:收拢和校准

第四步:重复第二步和第三步,直到满意为止

第五步:推进实现方案!

了解问题

通过一系列的 Workshop 及相关活动,我们对这个问题有了更好的了解。

我们首先要求团队做一个现状收集。简单地把一系列的截图和设计放在 FigJam 上,然后让我们去了解业务设计师当时遇到问题,以及他们做的解决方案。

我们都发现了这个 B2B 客户页面大多是聚合了企业客户有关的所有内容,但它在帮助商家快速了解这个特定客户方面做得并不出色。内容缺乏清晰的层次,所以最终效果不理想。

为了开始了解这个问题,并更好地了解页面里什么最重要。我们写下了这个页面里用户所有可能想要完成的工作。然后我们反复调整排序,以确定优先级和重要程度。这是我们最终得出的的结论:

  1. 观察购买行为;
  2. 手动为客户下订单;
  3. 快速访问到地点和联系人;
  4. 评估不同地点之间的销售情况;
  5. 针对不同地区更改服务条款;
  6. 查看操作日志。

通过小组讨论后,我们都认可了这个优先级排序。然后我们又尝试代入商家的身份去假设他们的目的,以确保我们目标一致,达成共识。然后投票选出了一个最接近目标的假设,那就是:

“如果显示的信息集中在一个页面上,商家将能够更方便地完成任务。我们可以通过完成一项特定任务所花费的时间来衡量。”

商家在页面中要完成的工作

上述这些工作并不意味着产生实际的可交付的方案,而是让每个人都能够:

  1. 更了解业务背景,让每个人都在对这个案例有相同的认识;
  2. 开始对内容进行更细致的的优先级排序。因为我们不能仅通过移动元素来实现更有目的性的布局。我们需要从信息层开始,并在此基础上进行构建。

为了让大家更进一步,接下来是用草图来构思问题可能的解决方案。这里的目标不一定是找到解决方案,而是为今后的探索定下了基调。

来自 Workshop 的草稿图

我们鼓励每个人参与到 Workshop 的同事都尝试去画点草图,不管你是工程师还是设计师。有些人在 Figma 上画,但大多数人只是抓起一张纸和一支笔,一旦完成,就拍张照片,然后贴进 FigJam。

通过让同事们自由地画草图,不受设计工具或 Figma 组件库的限制,我们更有可能创造性地解决这个问题,而不一定要遵循预先存在的模板。

在画了一会儿草图后,每个人都分享了他们的想法,我们发现了一些有趣的事情。在画草图的时候,人们开始把客户在页面里可能想要完成的工作作为一个整体来考虑,而不是把注意力放在个别内容上,然后按照模板把它们组合在一起。

这是一个好的开始,因为商家会体验到整个页面,我们就应该这样去做设计。

在每个人分享之后,我们讨论并投票选出了最有希望的想法,这将是后续工作的基础。

发散和收拢

由于大部分探索是设计先行的,我们后续还通过几次包含一名产品经理和几名工程师的 Workshop 来协调和讨论。我们在会议前花了一些时间完善方案,拿到会议上讨论并一起看看有没有可以做得更好的地方。

一些简单的布局尝试

Workshop 之后,设计师们根据讨论的结果继续细化方案。我们想跳出设计系统的界限,但最终解决方案必须符合 Polaris 风格,这是一个很难去达到平衡的事情。对于我们引入的任何新元素,我们必须再三斟酌,要了解它是否能融入 Shopify 里面,并且可以复用到其他团队里。

当我们探索信息的不同组织方式时,我们意识到拥有一个完善的 Grid 设计基础准则是相当重要的,它可以确保不同页面之间有一定程度的一致性,即使信息的组织方式不同。

我们不仅是把页面作为一个整体来看,为了建立层次结构,我们还必须深入去找到更好地利用颜色、空间和文字排版的方法。我们通过有策略地运用颜色,突破字体规范探索更大的字号,来给最重要的元素增加了视觉权重。使它们与其他元素形成鲜明对比,并吸引人们的眼球。

我们还减少了页面中卡片的数量,更多地依靠空间来分组和分离信息。

随着我们的方案逐渐成熟,我们开始与产品和研发部门讨论方案。最终我们经过讨论和方案对齐后,找到了一个多方都认可的解决方案。

Company 页面改版的前后对比

通过重新设计,我们使商家能够更轻易地快速了解一个 B2B 客户。

与其简单的在网页上堆砌信息,指望着商家费尽力气去获取想要的信息,我们干脆重新梳理了一遍网页的内容。我们强调重要的信息,弱化只需要低频获取的信息。最终,让获取重要的事情变得简单,同时保留获取其他所有信息的触点。

作出妥协

然而方案的推进并没有那么美好。我在开始时提到过 Deadline 迫在眉睫,我们只能将解决方案分步交付。

Company 页面的 MVP 版本和理想中的方案

在推行某个方案时,很少有不需要做出一些妥协的,特别是当 Deadline 很紧迫时。这是产品开发过程中很常见的现象,但这并不意味着要在设计质量上做出妥协。

而为了能够做到这一点,你需要了解技术的限制是什么及其原因。

这正是 B2B 团队所做的。例如,在页面中引入新的数据指标和数据洞察是很难的,但他们没有放弃这个想法,而是争取引入任何可以实现的东西,因为他们知道这对商家来说是非常有用的,可以在未来迭代和改进它。

创建可扩展的解决方案

与此同时,我们已经开始在 Polaris 团队中探索新的 Layout 设计准则。在整个协作过程中,我们了解到我们的原本布局组件限制太多,所以我们构建了一个 Grid 布局组件,让我们更容易地构建自定义布局,同时不会脱离设计系统。

团队想要创新,但设计时需要有一定的规则来约束,有时候甚至要依据设计系统已提供的模板。

这次合作让我看到,我们并不缺乏创新的动力和能力,缺乏的是一个目标。当你不知道该做成什么样子时,通常都会呆在舒适圈内,这是会让人上瘾的。

让系统团队积极探索新方式和与他们合作,能够得到新的做法。但这只是一次性的,不可扩展的。所以我们需要找到方法将这种做法纳入到设计系统中,让其他业务和团队的设计师也能复用。

Grid 布局组件是处理「设计创新」和「遵循规范」之间平衡的的一个很好的例子 — — 能够让设计师在 Polaris 内创新。

适应不同断点的 Grid 布局组件

从技术上讲,团队可以不用 Polaris 来实现任何东西,但这导致了不一致性、不规范的体验设计和许多冗余的代码。这使系统更难维护、更新和扩展。

Polaris 是一个工具。我们利用它来发挥我们的优势,但我们不能忘记维护和发展它。就好比如果一把刀变钝了,你不需要去买一把新的,而是要把它磨利。

这次合作很有趣,同时也很有影响力。因为我们在产品和系统上做了改进。

我们不仅一起发布了一个新的布局,而且我们还确立了从整体上改进设计系统的方法。看到这项工作被刊登在 Shopify Editions 上是特别荣幸的。我真想快点看到 B2B 业务实现完整的设计方案之后的效果,以及其他团队使用我们建立的 Grid 布局组件。

如何开始?

如果像 B2B 团队一样,你想推动你的设计系统向前发展,我可以推荐两种方法中的一种。

选项 A:与设计系统团队合作

如果你正在研究一个问题,希望能突破原有的界限,并看到影响整个产品的设计模式的可能性,请考虑与你的设计系统团队联系。

设计系统团队会想要极力避免出现单一的解决方案,但他们很可能倾向于如何让设计系统更好用。特别是这件事对整个公司内的其他团队有可能存在的好处时。

为了证明这一点,我可以告诉你,我已经与另一个团队合作去解决另一个问题。我希望像这样的合作越来越多,因为这种合作确实能给产品和团队带来很多好处。

可惜的是,我知道一个设计团队未必能和所有人合作。但这不应该阻止你创新,还有另一种方法…

选项 B:动员你的团队

其实在与产品团队合作时,我们设计系统团队的主要工作是启发和支持。

这也是我分享这个研究案例的原因。向你展示我们做了什么,我们是如何做的,以及为什么这样做。希望这能启发你,同时也给出了一些可以复用的方法。

要记住的关键一点是,在孤岛上创新真的很难,所以寻找与你有同样热情的合作伙伴。如果你需要快速尝试,不妨用我创建的模板去实际尝试一下前文描述到的 Workshop。

Figma Community 中获取 Workshop 模板

当你完成后,别忘了为设计系统「赋能」噢!

❌
❌