开始 · Content Guidelines
文案规范
我们都热衷于使用 Semi 创造用户喜欢的产品,而文案是产品与用户最直接的沟通方式,输出正确、一致的文案,是产品设计中不可或缺的一部分。

Voice and Tone

谁会使用我们的规范与原则?

任何从事面向用户沟通的角色都应该遵循声音和语调原则,如:产品经理、UX Writer、开发人员、设计师、营销人员、……几乎每个人。

Voice 和 Tone 的区别

Voice 传达的是品牌独特的观点、视角和认同的价值观,也就是产品的个性。可能面对的用户不同,但是我们的语气和个性是保持不变的。Tone 是品牌选择如何与用户沟通的方式,包括用词、交流方式和情绪态度。在不同的给定的场景中,我们的语调会有所不同。

Voice 声音

作为现代、轻量的设计系统,我们希望使用 Semi 打造的每一个产品,也都能用高效的表达为用户留下愉悦印象。基于此,我们设立了以下三个原则作为品牌声音:直接清晰、真实友好、乐于助人。
semi voice
直接清晰
为了帮助用户高效的完成任务,我们通常直接清晰、简明扼要地传达信息。
真实友好的
像人一样说话,富有同理心,与用户站在一起,帮助用户解决问题。
乐于助人
我们预测用户的真实需求,并在恰当的时候提供帮助与信息。

Tone 语调

我们的语调会根据不同情景而有调整,就像你在与亲密的朋友交谈或庆祝重要时刻时会改变语气一样。我们也会在引导用户完成新功能时,或者告诉他们某些操作不起作用时,亦或是当他们完成了一项任务时跟着调整语气。以下这个框架帮助我们为每种情况确定合适的语气:
中性的
用户在平台中大多数时候是希望快速完成日常工作,此时我们提供的文案是有信息价值,并且是有用的。
例:将图像添加到空白部分以开始构建您的网站。
庆祝的
在某些情况下,我们想要承认某人完成了一项复杂的活动或困难的任务。虽然我们不需要庆祝取得的成就,但我们应该认识到他们投入了时间和精力。根据努力程度,这些可能是简单的确认或更积极地承认他们完成了一些困难的事情。
例:
  • 轻微的庆祝,传递动作已完成:文件已上传
  • 程度较重的庆祝,适用于完成复杂的任务,给予用户成就感:恭喜!你已成为 AnyWeb 的一员。
同情的
当用户看到错误消息时,他们可能会感到沮丧,他们的目标是解决现在的问题,我们希望可以直接了当的展示问题,并告知解决方案(不建议用道歉 sorry 语气)。
例:URL 不可用。可联系站点管理员帮助解决。
有帮助的
有些人会希望在整个过程中得到逐步指导,而另一些人可能只是想尝试一下并自己学习。寻找给他们两种选择的方法。
例:准备好创建你的第一个网站了吗?跟随 3 步小妙招开始吧。
权威的
用于违反政策的情况;比如当用户在 平台上进行不可接受的行为时。
例:因违反政策,你的网站「每日咖啡新闻」已被删除。

书写原则

简洁清晰
只需要提供给用户必要的信息,省略多余的不必要的废话。
✅ 推荐用法❌ 不推荐用法
不知道如何使用吗?联系我们如何使用SOP 配置有问题?不用担心!您可以点击下面的图标与我们联系,我们的代理将帮助您解决问题。
像人一样说话
用最容易理解的最朴素的文字去展示你的信息,尽量避免使用过于复杂的或者难以理解的语言。
  • 避免使用代码语言
  • 像真人一样说话,避免行话
✅ 推荐用法❌ 不推荐用法
网页出错了,请稍后重试404 ERROR
视频加载中...Feed 流 Skeleton 加载中...
开门见山,直击重点
优先展示最重要的信息,尽量减少非高优信息的输入。
✅ 推荐用法❌ 不推荐用法
3 步创建工单创建你的工单需要经过 3 个步骤
文件已上传你已经成功上传了文件
保持一致
一致性能够让你的产品更加好理解,一个功能/动作如果用了多种表达方式,会对用户产生歧义。每次你恰当而一致地使用一个术语或短语时,它的含义都会得到加强。
  • 使用术语
    术语类型示例
    品牌名
    • ByteDance
    • Semi
    行业术语如,翻译行业
    MT = 机器翻译
    平台术语如,客服平台
    en=Ticket,zh=工单
  • 使用一致的名词和动词
使用不同的名词,那么用户将不确定新词是否指的是同一事物。使用不同的动词,用户可能会不确定点击后是否会导致相同的结果。团队可梳理表意相同的名词或动词,选择其一即可。
中文English❌ 不推荐用法
You
抱歉Sorry对不起
账号Account帐号
登录Log in登陆、Login(仅用作名词)
退出登录Log out
新建Create创建
添加Add新增
删除Delete清除
移除Remove
启用Enable开启、开始使用
停用Disable暂停、停止使用
已启用Enabled
已停用Disabled
其他Other其它
时区Time zoneTimezone
EnglishEnglish(指系统语言)EN
中文中文(指系统语言)CN、Chinese
注册Create accountRegister、Sign up
链接URLLink
与用户平起平坐
  • 尽量避免使用请求和道歉的语气去和用户进行沟通,有且只有在非常严重的情况下使用 “对不起”或者类型的抱歉语言,例如用户的信息永久性地不可逆转地被系统删除了。在正常情况下,只需简单说明抱歉的原因以及可能的解决办法即可
✅ 推荐用法❌ 不推荐用法
点击“编辑”修改内容对不起,您无法编辑表单,因为您处于查看模式。我们道歉并要求您点击“编辑”按钮来修改表单
  • 同时,也避免用教育、指责和埋怨的语气去和用户沟通
✅ 推荐用法❌ 不推荐用法
我们无法识别你的密码。为了账号安全,接下来的 30 分钟内无法登录。您多次输入错误的密码,我们认为此活动是可疑的。在接下来的 30 分钟内,我们不会让您登录。
避免夸大其词
尽量避免使用绝对词,例如 “最好”, “绝对”, “总是” 等等。
✅ 推荐用法❌ 不推荐用法
Starling 将为你提供良好的用户体验对比其他的翻译平台,Starling 有最好的用户体验
国际化
  • 不要使用“海外”等词区分地区
✅ 推荐用法❌ 不推荐用法
发布地区
  • 中国区
  • 非中国区
发布地区
  • 中国区
  • 海外
具有包容性
包容性语言是指不含反映特定人群或群体的偏见、刻板印象或歧视性观点的词语、短语或语调的语言。
即使基于刻板印象的言论或行为不是基于有意识的偏见,它仍然可能是有害的,并对接收方造成伤害或感到不舒服。
年龄
不要使用描述年龄的词,如“年轻”、“老”等。
性别
不使用具有明显性别倾向的词代表群体,如 “fireman” 可改为 “firefighter” 。
其他
  • 不要使用黑名单或白名单
✅ 推荐用法❌ 不推荐用法
将 Key 添加为禁用名单将 Key 添加为黑名单
  • 考虑色盲群体
✅ 推荐用法❌ 不推荐用法
点击“接受”按钮点击绿色的接受按钮
  • 不使用感官动词,专注于任务的最终目标,而不是完成它的方法
✅ 推荐用法❌ 不推荐用法
了解更多查看更多

语法

1. 缩写

类型制度全称缩写
面积公制square meters
英制square feetsq ft
距离公制kilometerskm
英制milesmi
长度公制centimeterscm
metersm
英制inchesin
feetft
yardsyd
体积公制millilitersml
litresL
英制fluid ouncesfl oz
gallonsgal
重量公制gramsml
kilogramskg
英制ouncesoz
poundslb
存储容量-kilobytesKB
megabyteMB
gigabytesGB
terabytesTB
月份-JanuaryJan
FebruaryFeb
MarchMar
AprilApr
JuneJun
JulyJul
AugustAug
SeptemberSep
OctoberOct
NovemberNov
DecemberDec
星期-SundaySun
MondayMon
TuesdayTue
WednesdayWed
ThursdayThu
FridayFri
SaturdaySat
时间-weeksw
daysd
hoursh
minutesm
secondss
金额-thousandd
millionm
billionB

2. 首字母缩写词

  • 如果是带业务属性的缩写词首次运用在文本段落里时,可以在通过文本进行直接的说明
    • 例:Service Level Agreement (also known as SLA)
  • 如果是运用在组件内,那么可以通过组件的交互形式进行解释说明
    • 例:Starling 的机器翻译缩写
acronyms
  • 所有字母进行大写
✅ 推荐用法❌ 不推荐用法
Create a new SLACreate a new sla
  • 特殊场景:当作为拓展词展示时,用小写字母做展示
✅ 推荐用法❌ 不推荐用法
"image 12.png" failed to upload"image 12.PNG" failed to upload

3. 主动语气 vs. 被动语气

  • 主动语气强调谁或什么在做这个动作
  • 被动语气强调被操作的物体
在大多数情况下,我们推荐使用主动语气,因为主动语气让语义更清晰,减少复杂性,而且主动语气听上去比被动语气更像日常对话。当是谁做的这个操作不是很重要时,或者被动语气比主动语气听起来更自然一些时我们也可以使用被动语气(比如像publish或assign这些动词,以及discount这些名词)。
✅ 推荐用法❌ 不推荐用法
Eric uploaded a video.The video was uploaded by Eric.
After you've added a product, click Save.After the product has been added, Save must be clicked.
✅ 推荐用法❌ 不推荐用法
Anyweb has published your website.Your website was published.
We have removed our LIVE video due to a policy violation.Your LIVE video was removed due to a policy violation.

4. 冠词

在标题和文案中,是否使用冠词(“the”,“a”,“an”)要视情况而定。情况分为所要表达的信息是否是对话性的,亦或是动作指向性(call-to-action)的。在按钮和标签中要避免使用冠词。
对话性信息
对于对话性更强的部分,比如 Home cards,marketing copy,和空状态,使用冠词。这会让语言听起来更平易近人,并且帮助用户理解首次遇见的复杂概念。
✅ 推荐用法❌ 不推荐用法
Start building your website by adding a text element to a blank section.Start building your website by adding text element to blank section.
动作指向性
在按钮,有动作指向性的对话标题,以及菜单标题处,你可以删除冠词。
✅ 推荐用法❌ 不推荐用法
Add menu itemAdd a menu item
Upload video?Upload a video?

5. 大小写

Sentence case
1. 大多数情况,平台中的内容都是用 Sentence Case 的方式,比如一段文字、一句话、标题、UI 元素中(按钮名、标签、菜单等)
✅ 推荐用法❌ 不推荐用法
Create projectCreate a Project
2. 以数字开头的句子,首字母不需要大写
✅ 推荐用法❌ 不推荐用法
2 results found2 Results found
3. 斜线后一个字母需要大写
✅ 推荐用法❌ 不推荐用法
Country/RegionCountry/region
Turn on the On/Off toggle.Turn on the On/off toggle.
Title Case
通常情况下,当提及专有名词时,使用 Title Case 的方式是合理的。
1. 专有名词,比如术语、品牌名、平台名、功能名、商标等须单词首字母大写
✅ 推荐用法❌ 不推荐用法
Do you want to return Yves Saint Laurent lipstick?Do you want to return Yves saint laurent lipstick?
  • 当人名前后跟随工作职位、称号时,须单词首字母大写,如 UX Writer, Jackie、Headmaster Li 等
2. 其他情况
  • 专有名词在界面中的任何位置都需要首字母大写
  • a,an、介词如 on,to,in,up,down,of,for等、and,but,or,not,yet等除非在句段首字母,其他任何时候均不需要大写
  • 对于连字符连接的多个单词,每个实词的首字母都大写,虚词首字母小写,如 Starling-in-Context
  • 对于以.xlsx为后缀的文件名称,英文中统一使用 下划线 分隔每个单词,大小写采取 Title Case 规则,如 Salary_Data_Repair_Template.xlsx
  • 括号里的英文如果是完整句子,则首字母大写;如非完整句子,则首字母小写

6. 缩略式

缩略式是一些单词的缩写,比如: what's, where's, we'll, we're, you'll, you're, they're, doesn't, didn't, isn't, aren't or can't。我们使用缩略式是为了营造一个轻松且人性化的语调。
  • 缩略式是推荐使用的,因为他们为让内容更具对话性
  • 不要使用不正式的缩略式,比如: ain't, y'all
  • 不要使用一些不太常见的缩略式,比如: would've, could've, it'll
  • 在缩略“is”, “does”, “has”, “was”时要注意,因为它们的缩略式和所有格(如“John's shirt”)比较类似,会使得这些信息可读性降低。举个例子👇
✅ 推荐用法❌ 不推荐用法
maxattacks is currently livestreamingmaxattacks's currently livestreaming
  • 在一些敏感或者严肃的信息上,比如出错信息或账户被封信息,尽量避免使用缩略式,而是把信息的清晰度和对事态的尊重度放在首位
✅ 推荐用法❌ 不推荐用法
Can't, don't, it's cannot, do not, it is
  • You can’t have products with negative weights
  • Your products don’t have weights
  • You’re all set up
  • This product doesn’t require shipping
  • The customer name shouldn’t contain numbers
  • It’s a good time to plan your Black Friday sale
  • An error occurred and your changes couldn’t be saved
  • I’m Kit, your digital marketing assistant
  • This transfer hasn’t been received
  • You haven’t connected your account
  • You’ve exceeded 10 password attempts
  • That’ll make sure you are all set up
  • It would’ve been possible if you’d installed the latest updates
  • The set up was not complete, but this’ll do
  • There’re 10 products in this collection
  • Your product mustn’t be more than 20kgs
  • This product needn’t be shipped
  • There are 3 visitors who’ve viewed this product
  • It’d be a good idea to place an ad this weekend

7. 表情

避免使用 emoji,选择用 icon 代替;如必须使用,可放在句段结尾。

8. 日期与时间

统一规范
  • 使用 24 小时制表示时刻,如 07:00,21:00,不使用 am、pm
日期
例:Jan 1, 2018,2018–01–01
  • 如果空间足够,将日期写全。如:March 12, 020
  • 如果空间有限,可缩写月份。如:Mar 12, 2020
  • 使用短线–(Option和-)连接年月日,不使用 / ,如:en:03/01/2022; zh:2022-03-01
  • 月份缩写均采用三位字母,如:Jan、Feb、Mar、Apr;
  • 当不用于表示某个日期时,月份不能缩写。如:Registered at Septemter
  • 避免使用数字缩写表示日期,如:“first”,“1st”, “23rd”
  • 一个模块只能用一种时间格式
  • 日历开始的时间为周一,这是世界范围大部分的习俗
时间戳
按照以下示例使用一致的时间戳格式。

少于 1 分钟Just now
1–60 分钟13 minutes ago
今天10:30
昨天Yesterday at 10:30
最近 7 天Friday at 10:30
7天–1年Aug 14 at 10:30 08–14 10:30
超过 1 年Aug 14, 2016 at 10:30 2016–08–14 10:30
时间范围
原则上波浪号“~”和 一字线连接号“-”都可表示范围。由于时间中已有“-” 为表区分,统一使用“~”。
例:2020-02-06 ~ 2020-02-08
时长
时间维度中文格式英文格式
秒级5 秒5sec / 5s
分级20 分 5 秒20min 5sec / 20m 5s
小时级23 时 5 分 5 秒23hrs 8min 5sec / 23h 8m 5s
天级3 天3 days
周级1 周1 week
月级3 月3 months
年级1 年1 year
  • 若计时放在句子中间展示(如 banner 横幅),采用显示出具体时间单位的形式
  • 如果倒计时单位超过 24 小时,展示天时分,如「2 天 1 时 50 分」
  • 如果时长最大到天,展示时分,如「1 时 50 分」
  • 如果时长最大到分,展示分,如「50 分」

9. 拉丁缩写

避免使用拉丁语缩写,因为这些缩写并不是所有人都能理解。
✅ 推荐用法❌ 不推荐用法
for example, such ase.g.
that isi.e.
Add sounds, effects, stickers and more.Add sounds, effects, stickers, etc.

10. 列表

  • 使用列表可以增加信息的可读性。如果列表内是完整语句,需要使用正确的标点符号。尽量保证列表内容小于等于六条。如果列表内容大于六条,试试分成多个列表
  • 为了让你的列表更加本地化,以介绍性的语句开始,并以冒号“:”结尾。尽量避免重复词组,如果一些词与所有列表内容都有关系,试着把它放入介绍语句
✅ 推荐用法❌ 不推荐用法
Your viewers can find your videos from the following source:
  • For You
  • Following
  • Discover
Your viewers can find your videos from
  • For You feed
  • Following feed
  • Discover
  • 写列表内容时,使用平行语句。举个例子,如果你在描述一些行为且以动词开始时,确保其他列表内容也保持同样的句式
✅ 推荐用法❌ 不推荐用法
You can make these changes from your profile:
  • Edit your bio
  • Add a nickname
  • Change your username
You can make these changes from your profile:
  • Edit your bio
  • Nickname: Edit or add
  • You can change your username
  • 列表内容保持首单词首字母大写
  • 不要让在列表内容结尾使用任何标点符号,把每条列表内容当作独立的信息
无序列表
当列表内容相关,但和顺序和优先级无关时,使用无序列表。列表中句子首字母大写,无需句号。
✅ 推荐用法❌ 不推荐用法
Use Pear Payments to:
  • Avoid the hassle of setting up a third-party payment gateway
  • Track your payout schedule from the Pear admin
  • Minimize lost sales from chargebacks
Use Pear payments to
  • avoid the hassle of setting up a gateway,
  • track pending payout schedule,
  • minimize lost sales from chargebacks. And eliminate PCI fees
有序列表
当列表内容和顺序和优先级有关时,使用有序列表。列表中句子首字母大写,无需句号。
✅ 推荐用法❌ 不推荐用法
To add a new user macro:
  1. Go to "Settings"
  2. Choose "Create a user macro"
  3. Enter the macro details
To add a new user macro:
  • Go to "Settings"
  • Choose "Create a user macro"
  • Enter the macro details

11. 下拉菜单

菜单信息给用户一组横向的操作信息。菜单信息的顺序是根据逻辑来的,比如最常用的操作。这些操作信息尽量追随“动词+名词”的样式,如果上下文信息足够,也可以只使用“动词”。
✅ 推荐用法❌ 不推荐用法
  • Rename
  • Edit
  • HTML
  • Duplicate
  • File name changes
  • editing options
  • HTML
  • Duplicate this order so that you can make edits, updates, or changes

12. 数字

通用规则
  • 如果数字为四位数及更多时,使用逗号隔开
    • 例:$2,353.56,5,345 MB
  • 会有一些特殊场景下的数字不需要用逗号进行分隔
    • 例:
      • 地址:3515 Montgomery St
      • 页数:page 1294
      • 年份:2022
      • 分辨率:1920 x 1080
  • 数字和单位之间需要有空格
    • 例:5,345 MB,7 lb
货币
  • 运用在正式场合(例如交易明细,订单详情)时,展示完整的货币格式,建议默认使用该展示形式
✅ 推荐用法❌ 不推荐用法
recommendednot recommended
  • 如果有必要的话,可以展示货币的 ISO 代码以做区分
    • 例:$12.00 CAD,$12.00 USD
电话号码
  • 使用括号去展示区号
    • 例:(000) 000-0000
数字范围
  • 用横杠去分隔数字范围,且横杠的前和后不用加空格
✅ 推荐用法❌ 不推荐用法
2:00 pm-3:00 pm2:00 pm - 3:00 pm
Jan 15-Jan 31Jan 15-31
10-100 lb10 - 100lb
Jan 1-15Jan 1 - 15
4-5 days4 - 5 days

13. 标点符号

和号
除了专有名词(比如 Abercrombie & Fitch )外,不要使用 “&”,用 “and” 代替 “&” 的使用。
✅ 推荐用法❌ 不推荐用法
Sun and moonSun & moon
撇号
  • 使用撇号去代替省略的字母和数字:
    • 省略的数字:'40s
    • 省略的字母:don't, isn't shouldn't
    • 动词的缩写:it's, you're, they're
  • 使用撇号去组成所属关系:
    • 单数名词后加上 's,哪怕名词最后一个字母以 s 做结尾:bus's, computer's
    • 那些最后一个字母不是 s 结尾的复数名词加上 's:women's, men's
    • 最后一个字母是 s 结尾的复数名词只加上撇好,不需要 s:boxes', bottles'
冒号
  • 尽量避免在句子里使用冒号,如果要使用的话,冒号后的首个单词首字母不需要大写展示,除非是专业术语
  • 使用冒号去引入列表
✅ 推荐用法❌ 不推荐用法
Pay attention to the following rules:
  • Add a space between character and number
  • Don't use semicolons
Pay attention to the following rules.
  • Add a space between character and number
  • Don't use semicolons
逗号
  • 如果一句话里有使用了多个逗号,可以将这个句子拆分成多个较短的句子
  • 使用牛津逗号(oxford comma),也称系列逗号(serial comma),会在列举内容中 “and” 或 “or” 之前的最后一个逗号
✅ 推荐用法❌ 不推荐用法
The study shows that the patients enjoyed reading, sleeping, and cooking.The study shows that the patients enjoyed reading, sleeping and cooking.
  • 不要使用逗号去分隔项目符号或编号的列表项
✅ 推荐用法❌ 不推荐用法
Pay attention to the following rules:
  • Add a space between character and number
  • Don't use semicolons
Pay attention to the following rules:
  • Add a space between character and number,
  • Don't use semicolons
破折号和连字符
  • 使用破折号去展示数字范围,且数字前后不带空格
✅ 推荐用法❌ 不推荐用法
23–5223 – 52
Jan.14 – Feb.23Jan.14–Feb.23
  • 当两个形容起需要组合在一起去描述后续的名词时,使用连字符
✅ 推荐用法❌ 不推荐用法
Start your 14-day trial.Start your 14 day trial.
We’re looking for a dog-friendly hotel.We’re looking for a dog friendly hotel.
  • 对于一些通用的组合单词,不需要使用连字符,具体是否需要连字符,可参考字典:
    • Notebook
    • Bookstore
    • Fireman
    • Superman
  • 使用连字符将前缀进行连接
✅ 推荐用法❌ 不推荐用法
Do you want a self-serve or a full-serve gas station?Do you want a self serve or a full serve gas station?
省略号
  • 当一个动作正在过程中时,使用省略号
    • 例:uploading...
  • 当部分组件在有限宽度下无法展示所有文案时,使用省略号做截断
感叹号
尽量避免使用感叹号,除非真的是非常令人兴奋的事情。如果要使用的话,使用一个感叹号即可。
句号
  • 一个段落里有多个句子的话,在每个句子最后使用句号,且句号后加一个空格
  • 以下场景不要用句号:
    • 按钮
    • 一句话的Toast
    • 占位符
    • 标题
    • 通知
    • 导航栏菜单
    • tooltip
    • radio
    • checkbox
问号
  • 当不知道问题的答案时,可以展示问题(和问号)
    • 例: Forget password?
  • 如果是非问句时,不使用问号
    • 例:Reset password
引号
  • 使用引号去引用定义的名词,用引号去表明用户输入的信息,例如标题和文件名称
✅ 推荐用法❌ 不推荐用法
Delete "john@example.com"?Delete john@example?
"image 3234.png" failed to uploadimage 3234 failed to upload
To remove this item, click "Delete".To remove this item, click "Delete."
分号
不要使用分号 ,尝试将一句话拆分成多个较短的句子。
斜线
  • 当有足够空间时,使用 “or” 代替斜线展示,如果空间不够时,可以使用斜线
  • 斜线后一个字母需要大写
✅ 推荐用法❌ 不推荐用法
Single/PluralSingle/plural

14. 代词

  • 在大多数情况下,使用第二人称(“you”)来和用户交流
    • 例:When's your birthday?
  • 避免使用第一人称(“I”或“my”),因为使用这样的代词会让用户困惑你在指的是谁,当然一些法律条款除外
  • 避免一些没有必要的代词(除非这些代词会影响信息的语气)
✅ 推荐用法❌ 不推荐用法
Edit profileEdit my profile

15. 前缀

前缀被用来添加在一个单词前面变为新的单词;通过添加前缀,你可以用来增强或者改变一个单词的含义;
避免在标题、段落、标签等使用含有前缀的单词,需要拼写出单词的全部字母,从而在本地化过程中最小化理解困难。
✅ 推荐用法❌ 不推荐用法
instantly generatedinsta-generated / instantiated
如果因为空间限制的原因,或者是作为功能名称在产品内被经常使用,可以使用前缀用法,如“auto-generated”,不是“automatically generated”。

16. UI 元素

当文案指代产品中其他的 UI 元素时,需要加粗该文案。
例:Remove from Saved
不建议在表达UI元素时使用(“”)的方式,除非没有办法使用加粗效果。

参考文献

© 2021 - 2022 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED