想必在职场中，总是会听到或者提及工作复盘一词，相信很多人在职场工作中也会用到复盘，当我们在完成一个项目时，如果要想形成一个完整的闭环，需要我们进行复盘，复盘能帮助我们快速梳理工作中出现的问题，从而吸取经验教训，有所成长。学会科学高效的复盘是职场人一项重要的能力。但很多人的复盘没有真正解决问题，只是为了复盘而复盘。

想必在职场中，总是会听到或者提及工作复盘一词，相信很多人在职场工作中也会用到复盘，当我们在完成一个项目时，如果要想形成一个完整的闭环，需要我们进行复盘，复盘能帮助我们快速梳理工作中出现的问题，从而吸取经验教训，有所成长。学会科学高效的复盘是职场人一项重要的能力。但很多人的复盘没有真正解决问题，只是为了复盘而复盘。怎样高效复盘呢，就让我们今天来聊聊复盘的知识吧。

记得柳传志讲过,“通过 复盘 总结经验教训、尤其是失败的事情，要认真，不给自己留任何情面的把这个事想清楚， 把事情想明白，然后就可以谋定而后动了。”

更多职场干货：

设计师的工作目标/OKR/全年规划怎么写？来看大厂高手的模板！ 相信不少同学最近已经开始做新一年的工作规划了，本文就来聊聊设计工作目标 / 全年规划应该怎么写，需要注意哪些问题。

阅读文章 >

一、复盘的定义 复盘原是围棋术语，是指对弈者下完一盘棋之后，重新在棋盘上把对弈过程摆一遍，通过复盘，棋手们可以回顾自己对弈的棋局，分析得失、 总结经验，从而优化自己的技术，提升棋力。由此延申至我们的生活中，我们可以理解为：复盘其实是对过去已经做过的事情做一次回忆思考，分析事物成功与失败的关键因素，对其经验和教训进行总结，从而指导我们在日后生活和工作中进行改进，复盘的核心价值在于“巩固成功因素和纠正错误因素。”

我们在工作所说的复盘是指运用科学的方法，对组织或个人以往的工作进行回顾，发现以往工作中的优点和不足，进而为未来的工作和计划做好准备。

复盘不同于一般的工作总结，具有以下三个特点：

结构化，复盘有固定的逻辑、程序或者框架 学习导向，需要对照目标、结果、差异原因、从中学到经验和教训 总结的基础上进行可能性探讨，即复盘需要分析、推演、找规律一系列过程 复盘的时间大致分为：第一小事及时复盘 ，第二大事阶段性复盘 ，第三项目结束全面复盘。

复盘的目的：有意识地从自己亲身经历的、过去的实践中进行总结分析，学到经验教训，达成能力的提升。

复盘的本质：是一个问题解决的过程，复盘考查当初是如何确定目标以及现在做成的结果之间的差异，并且根据差异从而分析原因，以寻求解决方案，并开展后续的行动。

二、复盘的方法和流程 复盘是一种以学习为导向的、结构化的工作总结，那什么是结构化的思维呢？简单而言，结构化整理输入的信息，就是说横向信息的模块化整理，而不是东一块西一块的信息拼凑复盘。目的是促进团队和个人从经验中学习，因此需要把学习的逻辑嵌入到整个复盘的过程中。

复盘一般而言分为四个步骤：1. 回顾目标 2. 评估结果 3. 分析原因 4. 总结经验

第一步、回顾目标：当初的目标或期望的结果是什么；

第二步、评估结果：对照原来设定的目标找出过程中的亮点和不足；

第三步、分析原因：事情做成功的关键原因和失败的根本原因，包括主观和客观两方面；

第四步、总结经验：包括体会、体验、反思、规律，以及接下来的行动计划。

第一步：回顾目标

在回顾目标的时候，我们需要问以下几个问题：

需求是如何从提出到立项的？（需求背景） 想要实现的目标和收益是什么？（业务目标） 最初的计划是怎样的？（执行计划） 预期的风险和应对措施是怎样的？（风险点&对策） 在实际操作过程中，大家可能会遇到以下问题：

没有目标，如果开始没有设定目标，就谈不上复盘。其实是目标不清 ，不清楚自己的目标或者前期目标定的比较笼统，没有衡量标准，这时可以使用 SMART 原则来明确目标（如下图）

第二步：评估结果

在回顾完当初的目标后，需要对照目标和结果，找出亮点和不足。同样，我们需要回答以下几个问题：

最初的目标和收益有没有实现？ 最初制定的计划，实际结果是怎么样的？ 与目标相比，哪些地方做的好？哪些地方未达到预期或有待改进？ 发生了哪些意料之外的事情？有何影响？ 通过问题，以客观事实层面回顾整个执行过程，将过程中存在各种问题进行整理总结，在下次遇到同样问题的时候可以迅速地响应并给出方案。评估结果的本质其实是发现问题的过程，问题是实际达成情况和计划目标之间的差距，如果是正向的，即目标超额完成，就萃取成功经验。如果结果是负向的，即没有达成目标，找到问题、分析原因、寻找解决之策。那么找到了问题，如何清晰、准确地表达出来呢？通常有句话”如果一个问题得到了正确的表达，可以说这个问题就已经解决了一半“。

第三步：分析原因

分析原因，是复盘中的核心环节。主要从成功的关键原因或失败的根本原因着手，包括主观和客观两方面。需要回答以下几个问题：

亮点的主观/客观原因有哪些？ 其中真正起关键成功因素是什么？ 不足的主观/客观原因有哪些？ 其中最重要的根本原因是什么？ 在实际分析问题的时候，我们经常像盲人摸象，不能全面的思考一个问题，如何才能保证我们找出的原因是全面的呢？这时就可以运用复盘时常用的工具，帮助我们进行结构化的思考：

分析问题的工具之“鱼骨图”，鱼骨图也被称为鱼刺图或石川图 ，是一种辅助分析决策工具，可以帮助我们对问题的原因进行归类、逻辑化、条理化。它看上去有些像鱼骨，将问题标在“鱼头”处。在鱼骨上长出鱼刺，按照产生问题的可能原因进行罗列出来，有助于说明各个原因是如何影响后果的。

鱼骨图一般是与分析问题的工具之“5W2H” 搭配使用。（如下图）

第四步：总结经验

总结经验则需要进行经验和规律提炼，沉淀可以复用的流程/方法/能力/工具，并制定行动计划。不能只是草草做记录或简单下结论。可以从以下问题入手来理清思路：

从过程中学到了什么新东西? 是否可以扩展到其他项目中？ 如果有人要进行类似的项目，我会给到什么建议? 接下来我们该做些什么，有哪些具体 todos? 要让复盘真正起到作用，就必须落实到具体的行动计划，并执行到位。只有将学到的经验教训付诸行动，转化为未来的的行动改进，才算完整的学习，提炼经验、行动或方案：

继续执行的 停止执行的 调整执行的 新增执行的 证明有效的方案固化 避免不良结果的方案的固化 复盘模版表

复盘的方法是结构化剖析以往工作的过程，快速复盘的具体操作 ：先填表，再细化。填表可以 对复盘过程有个整体的了解。填表的过程就是复盘的过程，回顾了目标，对结果进行分析，好在哪 问题在哪，成功与失败的原因，接下来怎么调整，一目了然。然后在表格的基础在再去细化、分析和提炼。

三、复盘的案例 个人/业务复盘框架

1. 目标回顾

SMART 法则（具体的，可衡量的，可实现的，有相关型的，有时限性的）

注意区分目的和手段

总的目标/对着项目流程图，写出每个工作环节的目标

2. 过程描述

可依据项目流程图，回忆每个环节的所做、所想。

注意点：1.按时间线梳理 2.真实客观 3.全面完整、细节丰富

3. 目标：结果对比

将原定目标和已经完成的结果两者进行对比

结果与目标的差距，就是需要分析的关键点。

4. 分析原因

重点找到分析的入手点，寻找造成结果的真正原因

从 与“ 预期不一致” 的地方入手

用“五个为什么 ” 来挖掘原因

5. 探寻规律

提高规律准确性的方法：

排除不可控因素 用因果总结规律 调整可控参数 6. 形成文档

定期查看-减少决策成本

反复验证-形成方法论

结语 复盘是落地践行成长思维的一个非常重要的能力，你的能力不是静止的，而是不断成长的；

持之以恒，养成复盘的习惯，把复盘作为流程的常规一部分，是提升组织管理能力最有效的方法，并非所有复盘都要非常正式，中小型项目和日常，都可以快速复盘，积累经验和时刻反思。

以成长为目标，不断积累知识库，把复盘的内容沉淀在统一的知识库内，经年累月，不断构筑高墙。

设计复盘也是设计沉淀，沉淀可持续、可复用、可提升工作效率的工作或方法，达到能力提升。

欢迎关注团队微信公众号：兆日 UCD

大家好，这里是和你们聊设计的花生~当我还沉浸于收集各种基于 ChatGPT 开发的 AI 效率神器时，OpenAI 竟然发布了 GPT-4。之前为大家介绍 ChatGPT 时就提到过它使用的是 GPT-3 的模型，而当时 OpenAI 的研发进度其实已经超过了 GPT-3，但是没想到 GPT-4 的发布会这么突然...

大家好，这里是和你们聊设计的花生~

当我还沉浸于收集各种基于 ChatGPT 开发的 AI 效率神器时，OpenAI 竟然发布了 GPT-4。之前为大家介绍 ChatGPT 时就提到过它使用的是 GPT-3 的模型，而当时 OpenAI 的研发进度其实已经超过了 GPT-3，但是没想到 GPT-4 的发布会这么突然，一时间网上铺天盖地都是关于 GPT-4 的各种消息，看来真的是功能很强大，废话不多说，一起看看和 GPT-3 相比 GPT-4 有哪些进步吧~

往期回顾：

地表最强AI聊天机器人ChatGPT诞生！会给设计师带来哪些影响？ 大家好，这里是和你们聊设计的花生~ 前几天刚和大家聊过 AI 绘画工具 Midjourney 的 V4 模型，感叹它图像生成质量之高。

阅读文章 >

一、接受图片输入并识别内容 这次发布最令人激动的一点就是 GPT-4 支持多模态（接受图像和文本输入，发出文本输出），这意味着我们可以发送图片给 GPT-4，并指示它识别分析图片的内容，图片的类型可以是带有文字和照片的文件、图标或者屏幕截图。

虽然该功能目前仅供预览，没有开放给用户，但从官方论文和直播公布的案例来看，GPT-4 并不是简单地描述图片的内容，而是能够理解内容物之间的联系，并做出进一步的判断和动作，也就是说 GPT-4 理解图片能力与它理解文本的能力不相上下。比如下面的案例，将一张图片发送给 GPT-4 分析它的笑点，GPT-4 能非常准确地识别一张图片中的不同部分，理解它们之间的逻辑关系，并之指出笑点所在。

它也能识别出图片的不合理之处，或者推断出图片内容状态被改变时会发生什么事情。

GPT-4 还能像理解文本内容一样，理解图像内的文字并按照用户指示作出下一步的操作，比如分析论文内容然后总结提炼。OpenAI 在官方直播里还展示了一个神奇的案例 —— 利用 GPT-4 的识图功能，结合其强大的代码编写能力，将简单潦草的手绘网页线框草稿转换为代码，从而制作出一个真正的网页。

二、在专业和学术领域上表现的提升 OpenAI 官方在介绍 GPT-4 时着重强调的另一点是“在各种专业和学术基准上表现出人类水平的表现”，比如它通过了模拟律师考试，分数排名在所有应试者的前 10% 左右，相比之下 GPT-3.5 的得分则在倒数 10% 左右，且 GPT-4 在其他各种专业和学科模拟考试中也有不俗的表现。当时看到这个的我只觉得这不是“表现出”人类水平，而是“超过”大部分的人类水平了，之后估计会出现很多公司直接让 GPT-4 对接服务客户的情况，毕竟专业能力都是过关的。

OpenAI 的研发团队还进一步提升了 GPT 的英语能力，GPT-4 的英语翻译准确度为 85.5%，比 GPT-3.5 的 70.1% 高出 15%。而且在模拟测试中 GPT-4 在意大利语、德语、西班牙语、法语、日语、韩语、土耳其语、俄语等 24 种语言中的翻译表现都优于与其他大型语言模型的英语表现，包括拉脱维亚语、威尔士语和斯瓦希里语等低资源语言。

据 OpenAI 官网显示，在线免费语言学习平台多邻国 Duolingo 将把 GPT-4 融入自己的应用中，以推进产品的两个新功能：角色扮演（Role Play）和解释我的答案（Explain my Answer）。之前多邻国一直尝试通过脚本化的对话与学习者 "聊天"，其中包含了各种经典的场景，如点菜、第一次见面或买机票。而接入 GPT-4 后，多邻国将拥有在小众背景下与学习者 "沉浸式 "交谈的能力——比如就篮球或到达山顶的幸福感进行自由交谈。

三、可操控性增强 与之前 ChatGPT 固定的一种的语气和风格不同， GPT-4 的可操控性更强，可以扮演各种指定角色，以不同的言语行为风格与用户进行互动，比如给五年级的小学生当数学老师、做你的程序编写小助手，或者扮演一个莎士比亚式的海盗头子和你对话。

OpenAI 还通过多个介绍视频展现 GPT-4 的其他进步，比如在文字输入限制方面由 GPT-3.5 的 3000 字提升成 25000 字，之后针对同一话题或对象，用户和 ChatGPT 会有更宽更深的讨论空间；总结能力提升，可以用一句话总结一份论文，以及对比两篇文章并总结出他们之间的共同点；事实推理能力增强，可以理解税务法并帮人们报税；代码编写能力进一步增强，简单的代码已经无需人类辅助修改，复杂代码虽然不能一次成功，但出现的问题可以再次反馈给 GPT-4，它会自动根据上下文检查错误点并重写代码。

推特用户@Pietro Schirano 用 GPT-4 在 60 秒 内编写出经典游戏《Pong》，图片内容来源： https://twitter.com/skirano/status/1635736107949195278

推特用户@Jakebrowatzke 用 GPT-4 在几小时内做了一个 Chrome 插件，而他毫无编程基础，图片内容来源： https://twitter.com/jakebrowatzke/status/1635882037319008258

四、局限性 尽管 GPT-4 功能已经十分强大了，但它仍然存在着之前就有的局限性。比如 模型数据仍停留在 2021 年 9 月之前，对这个时间点之后发生的事情缺乏了解，并且也无法意识到自己的这种缺陷，因此无法吸取教训进行改进。

GPT-4 仍然不是完全可信赖。虽然对抗性训练让那 GPT-4 在事实性上比最 GPT-3.5 高出了 40%，但它还是会出现编造事实、推理错误的情况，特别是在需要理解上下文的情况下。对于 GPT-4 输出的内容最好进一步人工审核，或者在提供完整的上下文信息，或者避免出现需要让 GPT-4 联系上下文进行理解的情况。

GPT-4 在理解俗语上的表现与研究人员的期望还有很大差异，比如“teach an old dog new tricks”是一个英语俗语，字面意思是“教老狗玩新花样 ”，用来比喻人们很难或不可能教会别人新的技能或改变别人的习惯，尤其是当他们一成不变或长期以来一直以某种方式做事。当问 GPT-4 “Can you teach an old dog new tricks?”，它只能理解字面意思，从而给出错误回答“Yes, you can teach an old dog new tricks”。

GPT-4 还会忽略提问中的一些细节，导致给出错误的答案，需要人为指正；会像人类一样无法处理难题，比如它生成的代码会存在安全漏洞；还有会轻易相信用户主张的虚假信息，但是这一点已经改进不少，因为 Twitter 上有人拿之前戏弄 ChatGPT 的一个问题去测试 GPT-4，被 GPT-4 驳回了并且申明“我的目的是提供准确的信息”。

当然 OpenaAI 一直在致力于改进和完善这些缺陷，努力让训练更稳定安全，目前取得的成果包括提高了 GPT-4 拒绝合成危险化学品相关请求的能力、不响应敏感的请求（如医疗建议和自我伤害）等。

图片来源： https://twitter.com/DrJimFan/status/1636120223853199362

已经开通 ChatGPT Plus 的用户可以直接体验最新的 GPT-4 模型，GPT-4 的 API 也开放了等候名单，感兴趣的小伙伴可以申请。如果你有新版 Bing 的预先体验权，那么恭喜啦 ，GPT-4 在发布前 6 周就已经被置入到 Bing 中了。

最新消息称 GPT-5 会在今年年底前发布，让人十分期待会出现哪些更强大的功能。不过在此之前基于 GPT-4 开发的各种 AI 神器应该也够我们期待一波了。对于 GPT-4 和未来将出现的 GPT-5 你有哪些想法呢？欢迎在评论区分享。喜欢本期内容的话可以多多点赞收藏，之后会继续为大家推荐更多最新的 AI 资讯。

GPT-4 官方介绍： GPT-4 --- GPT-4 (openai.com) GPT-4 API 申请渠道： GPT-4 API waitlist --- GPT-4 API 候补名单 (openai.com)

参考资料：

https://mp.weixin.qq.com/s/kA7FBZsT6SIvwIkRwFS-xw https://weibo.com/5498125999/Mxnih6TXu https://www.youtube.com/watch?v=outcGtbnMuQ https://twitter.com/OpenAI/status/1635687373060317185 https://openai.com/research/gpt-4 推荐阅读：

设计师必看！6种ChatGPT实用使用指南 大家好，这里是和你们聊设计的花生~ 最近 ChatGPT 真的太火了，每天都会在网上刷到关于它的各种讨论，身边的同事也已经在用它处理一些文字工作，不知道大家有没有用起来呢？

阅读文章 >

腾讯平面设计实战！如何用AIGC提高200%的做图效率？ 一、AI 绘图背景与趋势 随着互联网行业发展和技术的进步，设计师也有越来越丰富的手段来应对多种类型的产品需求；比如说 3D 渲染、各种自定义的插件已经成为设计师的工作日常，在不断的提高大家的工作效率；包括最近火热的 AI 绘图，也时常出现在设计师的讨论话题当中。

阅读文章 >

编者按：这篇文章的作者 Edward Chechique 是一名从事复杂产品和设计系统方面的专家，撰写过大量的产品相关的文章。如今随着 ChatGPT 流行，他也开始借助 AI 来辅助设计。这次他梳理总结了自己编写提示词（prompt）的经验，运用 ChatGPT 辅助设计的一些经验，希望有此打算的同学从中获得启发。

编者按：这篇文章的作者 Edward Chechique 是一名从事复杂产品和设计系统方面的专家，撰写过大量的产品相关的文章。如今随着 ChatGPT 流行，他也开始借助 AI 来辅助设计。 这次他梳理总结了自己编写提示词（prompt）的经验 ，运用 ChatGPT 辅助设计的一些经验，希望有此打算的同学从中获得启发。

自从我开始使用 AI 工具来提升设计效率之后，我开始自己研究如何撰写 prompt （别担心，我后面会详细解释 prompt 是什么）。

如何使用 prompt ，是发挥 ChatGPT 功用的要点。网上各种用户分享的 prompt 数量正在不断增加，大家都在互相分享自己 prompt 列表。这件事情本身很好，但是真正贴合自己需求和场景的 prompt 才是最重要的。

我换个方式来表达就是：为自己定制 prompt 就像给自己定制食谱并且自己烹饪，共享的 prompt 则更像网上分享自己做饭的攻略。别人的攻略可以为你提供做饭和营养的内在技巧和逻辑，但是你的真实情况和需求只有你自己最明白，了解这些技巧，你能做到贴合自己身体状况且足够美味的食物。

在这篇文章当中，我将会为你展现自己编写 prompt 并发挥创造力的技巧，不会单纯的堆一堆现有的 prompt。

设计师如何使用ChatGPT提升工作效率？25个案例告诉你！ 随着美国人工智能对话聊天机器人 ChatGPT 的发布，人类在人工智能领域又迈向一个新的台阶，最近笔者总在一些微信群里看到一些设计师提出的问题“ChatGPT 会代替设计师吗？

阅读文章 >

什么是 prompt？ Prompt 是用来引导人工智能生成结果的一系列提示词和简短陈述，输出的结果通常是图像、文本、视频乃至于代码。

对于 ChatGPT 而言，prompt 是用来生成就结果的引导语，而引导语可以是陈述句，可以是问题，也可以去是其他类型的请求。按照提示，ChatGPT 可以生成对应的回答。

假设你想做一款帮助年轻人管理薪水的 APP，然后需要编写对应的产品说明，那么你可以为 ChatGPT 提供以下 prompt：

「为一款新 APP 编写简短的产品说明，该 APP 可以通过追踪用户日常消费习惯、提供预算建议来帮助年轻人来管理工资收益。」

有了这个 prompt，ChatGPT 可以根据其中的信息生成产品描述，你提供的 prompt 越详细，生成的结果就越准确。以下是我生成的结果：

使用中文 prompt 生成的结果如下：

咨询信息型 prompt vs 执行任务 prompt ChatGPT 的 prompt 主要提供两种不同的功能：查询信息和执行任务，有效使用 ChatGPT 需要了解两者的差别。

你可以写一个 prompt 来查询资料。比如如何在 Figma 当中修改文本的颜色，它会一步一步指引你，不过请注意，ChatGPT 所提供的信息并非完全正确。

执行任务式的 prompt 可以引导 ChatGPT 来做一些特定的事情。比如可以要求 ChatGPT 来撰写一份邮件的草稿，告诉用户下一周需要续期订阅了。这样可以减少撰写邮件的时间。

需要注意的是，ChatGPT 即使 100% 理解每个提示，也没法每次都得出准确的答案。即便如此，对于产品设计师而言，它所提供的回复也相当具有参考价值，可以在不同的产品设计环节节省时间。

编写出色 prompt 的基本思路 当我们使用 ChatGPT 来编写 prompt 的时候，希望能够准确表述需求，获得结果，因此我们需要将提示写的足够清晰。

想象一下你正在和一位设计师合作，你描述了你对于新 APP 的构想，在此基础上在 Figma 当中创建界面设计。这个 APP 的功能是教用户如何做饭，那么你可以这么提供需求：

1、你能创建一个 APP 来教人做饭吗？ 2、你能创建一个 iOS 平台的 APP 来教人做饭吗？我们主要的用户是想学习烹饪的青少年。 3、你能创建一个 APP 来向用户解释如何做饭吗？我们重要的受众是想要学习烹饪的青少年，这个 APP 将会是一个 iOS 应用，食谱需要以文本的形式呈现，同时包含视频内容，并且列举出用户所需购买的食材。用户界面风格会比较简约。

这三个描述当中，第三个是最明确的，在此基础上设计师能够绘制出更加明确的界面。而这就和 prompt 类似，你给的指引和约束越明确，生成的结果就越准确。

很重要的一件事需要注意：ChatGPT 即使有出色的提示，也无法提供 100% 准确的结果，你将不得不手动调整，直到满意为止。

撰写 prompt 的案例和技巧 1、将 ChatGPT 视作专业人士 设计师应该利用 ChatGPT 的专业能力。

如果你只是想让 ChatGPT 做什么事情，或者想让它扮演特定的角色，那是最省心的。想象一下，你正在开发一个 APP，需要编写电子邮件模板，向用户说明信用卡订阅即将过期。

这个时候，你可以让 ChatGPT 充当 UX 文案编写器，让它生成相应的文本，在写 prompt 的时候，记得告知 ChatGPT 你想要的口吻和语气。

比如你可以这样写：「作为一名 UX 文案写手，给用户撰写一封电子邮件，告知他们信用卡订阅即将过期，需要他们进入 APP 的帐号重新提交订阅。语气需要是友好的，内容信息要足够丰富。」

2、使用 ChatGPT 创建表单 ChatGPT 可以帮你创建非常详尽的表单，比如你正在创建设计系统，需要 ChatGPT 为你提供设计系统中所有按钮的标注和参数，帮助你后续可以更好创建设计系统。

这个时候 prompt 可以这么写：「我是一名 UX 设计师，负责桌面端 APP 的设计系统的设计，这个 APP 当中包含主按钮、辅助按钮i、幽灵按钮三种按钮类型。能否给我一张表单，其中包含所有的按钮的标注信息？」

然后这是输出的结果：

3、使用 ChatGPT 做信息组织 作为产品设计师，你可能会经常使用特定的方法来组织大量的信息，比如为当前的项目创建出一套出色的组织架构，这个时候你可以充分利用 ChatGPT 本身的优势。下面是一个简单的范例：「请按照字母顺序来针对以下品牌进行排序，丰田、本田、大众、福特、雪佛兰、日产、宝马、梅赛德斯-奔驰、现代和起亚。」

4、使用 ChatGPT 塑造调性 你可以借助 ChatGPT 来控制调性和情绪，你可以在撰写 prompt 的时候让 ChatGPT 表达更加非正式一点，更加幽默，情绪更加乐观等。

ChatGPT 可以透过算法生成带有特定类型语气的文本。在这种风格约束之下，能够让你生成的内容有着一致的语言风格，比如在祝贺用户生日或者报错的时候，呈现不一样的情绪。当你需要 ChatGPT 呈现出幽默语气的时候，只需要在 prompt 上添加「请以幽默的语气书写」这类说明，即可。

在撰写 prompt 的时候，可以使用 友好、俏皮、专业、优雅、大胆、简约、怀旧、未来主义、自然和感性等词汇，来制造调性。

5、训练 AI 模型按照你的意愿行事 你可以通过编写一些特定的案例来训练 ChatGPT，这些案例可以辅助你生成特定类型的内容。

比如，当你想要为 404 错误页面编写报错信息的时候i，你可以向 ChatGPT 提供 3 个你想要的错误信息样式作为示例，可以要求它以相同的样式和风格，来生成新的报错信息。通过这种方式，ChatGPT 能够学习你的语气、风格和文本呈现方式。

示例：

请根据以下范例，为我的网站生成 404 页面报错信息。我的网站内容主要是面向冰激凌爱好者的数字杂志。

示例1：哎呀！您上传的文件似乎有问题，不过不用当心，只需要检查文件格式是否正确，再次上传即可。

示例2：哎呀！我们无法保存您提交的修改。请确保您的网络连接稳定，再重试。

示例3：哦嚯！您尝试访问的页面似乎不存在，请稍后尝试，或者联系我们的支持团队，寻求帮助。」

6、分步撰写 prompt 处理大量的内容和信息的时候，可以尝试分为多个步骤。

不要让 ChatGPT 根据 5 个范例来撰写一封电子邮件，而是告诉它这里有 5 封电子邮件，可以代表我的语言表达风格，让 ChatGPT 基于这些内容总结出风格，然后在下一个 prompt 当中，要求它根据之前梳理总结的特征，生成电子邮件。

这样一来，ChatGPT 可以总结出有效信息，而且能够相对准确地完成任务。如果一次给太多信息，ChatGPT 可能会不知所措，生成无效的信息。

7、询问多个结果 可以要求 ChatGPT 生成多个结果，并且可以对比多个结果，从中选择出最合适的那个。一般来说，让 ChatGPT 生成 3 - 5 个结果就够了。

通常，3 - 5 个结果就足以帮你确定大概符合的结果，如果你要求它生成 50 个结果，其中可能会有大量的重复。

示例：「请生成 3- 5 个独特且信息丰富的指引说明，向用户说明他们怎样才能联系上客服部门。」

8、Prompt 需要不断迭代 不要指望第一次编写的 prompt 就可以完美生成结果，你可能需要反复测试，不断调整你的约束词和表达方式，才能得到你想要的结果，持续调整你的 prompt ，直到最终获得你想要的输出结果。

获得 ChatGPT 的答案之后，不要简单地复制粘贴，你还可以调整、增删其中的关键词，这个时候获得的答案变体可能会更贴合你的需求。

将 ChatGPT 视作为你获得想法和灵感的工具，而不是直接获得解决方案的方法。

9、保存好成功的 prompt 如果你所编写的某个 prompt 生成了不错的结果，那么一定要记录和保存好它！下次你需要生成类似内容的时候，就可以再它的基础上修改，节省时间经历。

为了更好地使用它，我在 Glide 当中创建了一个 APP 来辅助我跟踪所有的 prompt，方便我快速访问。

简单总结一下 对于希望使用使用 AI 工具来提高生产力的设计师而言，编写有效的 Prompt 是至关重要的。了解两种类型的 prompt ，掌握好细节和情绪，通过迭代生成有效的结果，这些技巧可以帮助你更快获得有效的结果。

请记住，即使有出色的 prompt，ChatGPT 也没法提供 100% 的准确结果，你依然需要复制下来做2次编辑。创建完美的 prompt 就像创建完美的食谱，你需要控制好对的配比，最终的美食也需要通过摆盘调整，才能完美呈现。

经常看到读者私信说想看组件相关的文章，诚然，认识和了解组件很重要，但只是了解组件、会用组件是否就能做出好的设计？我想以某知名打车软件活动页为例，展开聊聊。更多组件干货：超多知识点！

经常看到读者私信说想看组件相关的文章，诚然，认识和了解组件很重要，但只是了解组件、会用组件是否就能做出好的设计？我想以某知名打车软件活动页为例，展开聊聊。

更多组件干货：

超多知识点！UI设计师必会的组件库构建指南！ 前言 在设计系统中，大家最熟悉、最常用的应该就是设计组件了，它包括文字、图标、按钮、输入框、表单...等一系列构成界面的小元素，而这些小元素的结合体就是笔者要讲的组件库。

阅读文章 >

这是一个在打车过程中投放的运营活动。

点开这个页面的第一感受是，没有明确的吸引点，结构和文案都略显混乱。通过在 App 内寻找到了一些相似结构的 H5，我猜测这应该是运营或 设计师 拿现成的活动设计组件拼接的 H5。

组件明明是为了更好地完成方案而设计的，为什么通过组件搭建的设计方案却远“不及格”？我们先来聊聊这个页面的待优化点和改进建议，再谈谈组件与设计方案之间的关系。

一、活动页分析 老生常谈，先从设计前必聊的用户、场景、产品目标聊起。以使用活动页时的体验判断，这个活动的目标用户是上下班打车族，场景是上下班打车过程中尤其是等待司机接驾的时间空档，产品目标很可能是通过首个免费无门槛的 2 元优惠券吸引用户，引导用户看到并购买通勤优惠套餐，通过套餐提升留存，让用户养成上下班在此 app 上打车的习惯。在这个背景下，我们重新审视这个活动页，会发现几个问题：

上图所示的问题可以通过以下的设计思想解决：

1. 关注首屏

「首屏线」这个概念虽然不曾出现在交互书籍里，却是实际工作中需要格外关注的设计点。「首屏」是指用户无需滚动就可看到的屏幕范围，每个公司对首屏线的划定各不相同（取决于软件的用户实际使用的手机型号分布），但现在基本都以 390x844 或其倍数划分首屏。可以看到该活动页对首屏内容的把控，将付费套餐的购买行动放在了首屏外。上面说到，活动的目标猜测是通过购买通勤礼包提升打车留存，把这样重要的操作放在了首屏外对目标来说实在不是一件好事。

2. 交互一致性

虽说首屏线很重要，但用户也不是一定不会往下滑，前提是首屏的内容要让用户产生往下滑的动力。但是很遗憾，这个页面因为两种优惠券的领取交互不一致，让用户丧失了这个动力。在首屏能完整看到的优惠券中，优惠券的领取方式是在优惠券的右侧，所以用户下意识地会认为第二个优惠券的领取也是在右侧，既然如此首屏以下也就没有值得用户往下滑动的重要信息了。

其实只要做好一致性，就可以让用户产生往下滑的动力，达到活动目标。

3. 特殊设计增加吸引力

前面提到页面中第一张免费无门槛优惠券是活动的吸引点，直接影响了用户参与度，作为活动中至关重要的第一步，加上它确实与另外两个付费套餐有所不同，因此，在设计的时候，我们可以通过一些特殊化设计来吸引用户的注意力。

特殊化的设计有许多种表现形式，上图与活动图结合的方式仅作为其中一种表现形式供参考，非唯一确定性答案，但总体的设计思路是一致的，即通过设计特殊样式来增加吸引力。

4. 根据实际使用情况设计主操作

先说一个视觉问题，活动页的底色、优惠券和领取按钮都用的相同或相近的颜色，导致在页面滑动过程中，「去打车」这个悬浮操作经常和活动页内容融为一体，辨识度低，虽说是视觉问题，但若视觉影响到了交互体验，交互设计师有责任给出意见。

这里还有另一个讨论，「去打车」是否需要作为页面主操作固定悬浮在页面底部。上文提到活动页是在打车过程中投放的，那么用户在“已打车”的情况下，打车诉求不强烈，无需固定悬浮来强引导。

退一步说，如果我们投放的场景不可控，无法提前判断用户的状态是在打车中或未打车，那么仅考虑当前页面的话，优惠券的行动分为了「领取」和「使用/打车」，无论对用户还是平台来说，「领优惠券」这个行为最终导向的都是「打车」，而多一步操作会带来多一层的用户流失，更简单有效的做法可以是把领券和打车的行为结合起来，一些电商平台的优惠券就有运用到这一思想。

当然，将领券与用券的操作结合并不适合所有的活动目标。打车属于门槛较高的付费行为，如果活动不追求打车转化率，允许用户先领券，后打车，那么将「领券」和「打车」分开也是可行的。但「领券」与「打车」依然在因果和先后上存在强联系，因此，我们可以通过状态变化或动画效果来建立这个行动联系。

5. 建立准确的预期

我在刚开始看到这个付费套餐的时候，不理解「¥30」是什么意思，于是点开了「...」。

点开后发现 30 块钱只有 4 张 4 元优惠券，开始疑惑这个活动是要用户花 30 块钱买 4 张 4 块钱的优惠券吗？这似乎吸引不到用户啊。后来经朋友提醒才发现这个优惠券详情的面板是可滑动的。这些困惑暴露了这个套餐设计的几个问题：付费价格和优惠价格模糊、没有明确优惠券数量和具体数额、详情面板没有给到可滑动的预期。

首先说说前两个问题，归结下来就是没有给用户建立这是一个「套餐」的预期：

套餐与单张券采用了一样的设计形式，使得用户没办法通过视觉直观地接收到「多张优惠券」的信息，我们可以对比一下其他「套餐」感设计得比较好的例子：

对比可以发现，上图中的套餐都明确了券面额、券数量与购买价格，有的套餐还会标识优惠额度。当设计方案中明确了上述关键信息，「套餐」的设计感就会建立起来，有时候甚至根本不需要套餐详情面板来做进一步的解释。

如果有什么不可抗力需要设计套餐详情面板，在高度合适的情况下，建议将所有的优惠券直接展示完整，或者通过露出半张券的方式告诉用户下面还有内容，可以继续往下滑动。

上述内容是该活动页比较明显的几个问题及解决思路，除了这些问题外，还有许多小问题，比如头图想表达的是通勤路段，用中文表达了我的公寓，却用英文表达了“Office”；全页面充斥着许多无效且重复的信息，无效信息例如“加量神券”，重复信息例如家庭地址与公司地址，若是作为这 1 张券+2 个套餐的通用限定条件，可以考虑放在头部仅出现一次作为说明，无需在每个套餐中重复提及（活动规则同理）...作为头部打车软件，方案中出现这么多问题实在令人匪夷所思，但这是组件的设计师的错吗？

二、设计组件与设计方案 组件库的搭建通常是分时段、分人、在各自具体的需求背景下添加和补充，或者是同一个人在完全脱离具体需求背景的情况下搭建的。

这样设计出来的组件单独出现的时候都是合格的，然而交互是在具体需求背景下，服务特定的目标人群，解决具体的问题，满足当下的产品目标，这几个变量决定了我们很难找到两个完全一样的需求，因此也很难通过同一套组件拼接出完美的设计方案。拿单个组件应用时为例，在具体使用时，使用者有时甚至会为了满足组件“完整度”需要造词填充一些没有价值的信息。

这样的组件单独出现时，虽然没有达到“完美”但也能接受，但是页面如果全都由这样不合格的设计拼接而成，后果自然就是产出不专业的方案。

讲到这里应该也能看出来，单纯地做好组件并不能做好设计方案。组件拼接思路是由小到大，交互思考过程是由大到小，我们反复地说做设计前要做好调研，要做好分析，要先确认好框架...交互的价值除了抽象方法外也体现在具体问题的深度思考和设计原则的因地制宜上。而出现这样子用专业的方式产出不专业的方案的原因，除了可能是 H5 生产者缺少具体需求具体分析的思考能力外，更有可能是设计环境所致。不知从何时开始，设计开始陷入一个怪圈，产出抽象模型比解决具体问题“厉害”，做出一个系统比做好一个需求“厉害”，所以具体问题需要为抽象模型让步，实际的需求需要为理想的系统让步。再加上被急促的需求周期、悬浮的产品目标和组件至上的原则所禁锢，为了“符合规范”不敢做组件之外的创新尝试，为了“赶周期”只能用现有的开发能力，为了“虽然没有根据但可以先试”的目标阉割思考。或许，多一些细节，多一些自由，多一些时间，多一些表达空间，设计更能迸发价值。

欢迎关注作者微信公众号：「白话说交互」

随着美国人工智能对话聊天机器人 ChatGPT 的发布，人类在人工智能领域又迈向一个新的台阶，最近笔者总在一些微信群里看到一些设计师提出的问题“ChatGPT 会代替设计师吗？ChatGPT 能为设计师做什么？”，今天这篇文章来自国外自由设计师 Thalion，他用真实的案例向大家阐述了 UX 设计师如何使用 C...

随着美国人工智能对话聊天机器人 ChatGPT 的发布，人类在人工智能领域又迈向一个新的台阶，最近笔者总在一些微信群里看到一些设计师提出的问题“ChatGPT 会代替设计师吗？ ChatGPT 能为设计师做什么？”，今天这篇文章来自国外自由设计师 Thalion，他用真实的案例向大家阐述了 UX 设计师 如何使用 ChatGPT 提升工作效率，或许能够给你的工作带来一些灵感。

更多AI相关的干货：

AI绘画进阶必看！9种 Midjourney 常用后缀参数 大家好，这里是和你们聊设计的花生~ 最近 AI 绘画真的越来越火了啦，开始有越来越多的设计师将 Midjourney 用到自己的设计工作流中，让它们生成各种设计灵感或素材。

阅读文章 >

以下是今天的正文：

与其无休止地讨论“人工智能会取代设计师”，不如专注于一些实用的东西。

事实上，当前的人工智能解决方案（如 ChatGPT），可能会为我们的日常任务提供强大的帮助。这个工具能支持的领域可能会让你感到惊讶。在这篇文章中，你将看到许多实用的例子。我很确定，很快，你会发现使用 ChatGPT 能让你的设计工作事半功倍。 我们开始吧！

1. 为网站或模块生成文本 使用“lorem ipsum”非常容易，但设计仍然感觉很假。让设计可视化呈现的最好方式是向客户展示一些示例。

AI 工具可能会生成不错的文本内容示例：

2. 优化已创建的文本 如果你觉得文本内容不太合适，可以要求 ChatGPT 对其进行优化。

请注意，优化是有限的，一开始文本内容可能看起来非常通用。

3. 获取页面布局或线框的想法 快到交付日期了？感觉思路卡住了？要释放创造力并产生新的想法，请使用 AI 获取特定线框图布局的描述。

一些结果似乎出人意料地好。

4. 为特定 APP 或网站找到合适的可用性测试方法 正确选择可用性测试方法可以极大地优化产品。请随时让 ChatGPT 推荐一些方法。

5. 优化设计工作流程的想法 如果你像我一样，喜欢学习新事物并提高技能，AI 工具可能会建议你探索工作流程的新方法，如为工程师传达 figma 设计文件的最佳方式。

6. 找到最佳的学习工具 设计行业日益变化。新的技术可能性为各种工具带来了机会。询问哪些工具用于特定的设计目的（如 AR 或 VR），通过聊天的方式能够获得几个解决方案。

7. 找到最佳的设计资源 找到设计系统套件或 UI 套件等高质量资源对于 ChatGPT 来说非常容易。

有趣的是，当我在寻找 Figma 的智能设计系统时，AI 列举了一些很好的例子，包括我为设计师创建的资源——Prime Design System。

8. 寻找学习设计知识的地方 学习设计几乎是产品设计师经常做的事。AI 对于寻找新的平台来源以掌握特定领域方面非常有帮助：

9. 找出一种向团队成员解释复杂设计术语的方法 我们往往对我们每天使用的术语非常有偏见。同理心地图、用户旅程、SUS、CTA 等都是 AI 可能很容易解释的术语。

得益于此，你的队友和你将与特定的设计术语保持一致的认知。

10. 向非技术人员解释设计术语 有时你必须向客户解释上述条款。虽然团队成员通常是懂类似术语的技术人员，但在这种情况下，你必须让它变得更简单。

你甚至可以举一个极其简单的例子：

11. 搜索设计趋势 包括我在内的一些设计师会花时间来分析来年的设计趋势。

然而，只需几秒钟，你就可以获得未来几个月最热门的领域，这是很好的灵感来源。

12. 获取设计汇报的想法 向客户或团队准备设计汇报时不知所措？ChatGPT 能为你提供一些想法，并帮助你优化内容。

13. 找到组织会议的技巧 假如你想更好地为设计讨论会做准备。AI 会给你一些建议。列出的问题越具体，你获得的优化提示就越精确。

14. 生成用户流程示例 如果你需要一些灵感，或者只是需要验证你是否预测了用户旅程或流程中的所有步骤。可以让 AI 准备步骤列表，能够获得不错的效果。

15. 获得优化体验的想法 一旦你获得了用户流程，总会有一个模块需要优化。ChatGPT 不仅可以帮你优化用户旅程，还能提供让你惊喜的建议。

16. 获得错误消息的文本 相信没有人喜欢写错误消息，这就是为什么你可以让 AI 为你做这件事。你只需写下“为特定情景写一个错误消息”就可以了。

17. 根据特定的语音语调优化文本 如果你认为生成的文本非常通用或不符合解决方案的指南，可以建议 ChatGPT 更改语音语调。

18. 撰写产品简介 通过强大的 AI 建议，编写产品描述可能会变得容易得多。

如果你需要包含一些特定元素，请写下所有要求并见证这一神奇的现象是如何发生的：

19. 获取 Dribble 配图的想法 如果你对一个概念没有想法，或者想发布一些和之前不太一样的东西，AI 可以帮助你。

20. 翻译文本内容 对于多语言应用程序，最好测试一下该版本用其他语言是否适配。因为一些语句可能会出现不够简短、无法放入按钮的问题。

ChatGPT 可以轻松搞定特定 UI 元素的翻译。

21. 编写设计系统文档 这个例子的想法灵感来自 Chris Lüders 写的文章。我没想到会从 AI 中得到这样的东西。

提供具体要求和表格并准确描述，它们将生成一个高质量的文档示例！ 你甚至可以获得代码示例。

22. 搜索自由职业者信息来源 如果你正在找工作，而当前没有足够多的信息来源，ChatGPT 将帮助你找到新的工作机会。

23. 获取自由职业者工作机会的技巧 一旦你有可能获得自由职业者的工作，是时候获得一些技巧来抓住这个机会了。用 AI 提供的建议激励自己。

24. 获取用于设计研究的真实数据 即使用谷歌，获取一些用于设计研究的数据也可能非常耗时。现在，ChatGPT 可能会为你搜索大量信息来源，并在几秒钟内生成结果。

25. 问问 AI 它能帮你做什么 最后，你可以问问 chatGPT，它能帮你做什么。我直接从工具中获得了这篇文章的一些灵感。

总结 通过这些例子相信你获得了很多灵感，了解到真正的 AI 如何帮助你完成日常任务。有些例子可能感觉很常见或普通，但其他例子，比如设计系统文档示例，令人感到震撼！

ChatGPT 需要不断训练，因为像每个 AI 工具一样，它在不断地学习并改进结果。

感谢你的阅读！

参考 https://www.thalion.pro/post/chatgpt-for-ui-ux-design-25-examples

一、项目背景更多B端出海经验：B端产品如何做好移动化设计？我总结了这篇实战经验！在移动互联网的高速发展的今天，我们如何才能让 B 端产品在移动化时能更好的满足用户诉求与期望呢？

一、项目背景

更多B端出海经验：

B端产品如何做好移动化设计？我总结了这篇实战经验！ 在移动互联网的高速发展的今天，我们如何才能让 B 端产品在移动化时能更好的满足用户诉求与期望呢？

阅读文章 >

二、JDL 国际业务情况

1. 覆盖国家和地区

目前 JDL 国际物流业务已覆盖美国、荷兰、英国、智利、日本、澳洲、中国香港等 220 多个国家和地区，涉及的语言有中文、英文、印尼语、泰语、马来语、日语等，为多国提供专业的仓运配物流软件+自动化仓储规划+物流运营经验结合的一体化供应链方案。

2. 具有包容性的国际化产品

跨国业务的需求量增多，促使我们需要一个具有「国际化」 产品来服务于不同国家的用户，而国际化的主要需求特点就是——包容性。

三、国际化特点

喜好差异：在不同的文化与生活背景下，左右着人们的喜好。例如不同颜色在不同国家所代表的意义也完全不同，在中国的文化背景里，红色代表着吉祥喜庆。新年等节日元素中，大家都会使用红色，而不是蓝色，绿色。

行为差异：文化受到多方因素的影响，例如地理、经济、社会政治等因素，不同文化背景下成长的人，养成不同的行为习惯，例如国内的阅读习惯是从左向右，但穆斯林国家是从右向左。

喜好差异与行为差异，都是会影响视觉界面的重要因素，例子还有很多，内容如下：

1. 喜好差异

基于不同的文化背景，色彩所代表的意义与情绪感受会有所不同。了解色彩禁忌，规避文化冲突的风险。

中国香港地区：白、黑、灰色不大受欢迎，红、黄和鲜艳的色彩则很受欢迎。

日本：喜爱红、白、蓝、橙、黄等色，禁忌黑白相间色、绿色、深灰色。

泰国：喜爱红、黄色，禁忌褐色。

马来西亚：伊斯兰教区喜爱绿色……

文化背景不同，宗教信仰的差异，会表现在一些禁忌上，这里简单的说一下图案的使用，界面设计时要结合国家特性使用图案，特别要避免使用一些禁忌图形。

在图标运用中，视觉 设计师 经常使用日常中熟悉的元素。然而不同的国家有不同的文化理解与不同的形状。

国际页面上使用的照片、插图尽量避免人物肤色单一，避免带来一些敏感性问题，不使用真实环境中的肤色也是一样不错的方案。

2. 行为差异

不同国家的阅读顺序不一样，界面中文字排布要特别符合当地人的阅读习惯，很多中东国家的语言阅读习惯是从右向左的（RTL）。

从左到右（Left-to-Right 以下简称 LTR），如汉语、英语、韩语、日语；

从右到左（Right-to-Left 以下简称 RTL），如阿拉伯语、波斯语、乌尔都语等。

中国的地址通常是按照“国家-省-市-地区-道路-小区-楼房-楼层-房间号”的顺序，是由大到小的顺序书写，英美国家的地址恰恰相反，是由小到大的书写方式。

例如：#20A, 2345 Belmont Avenue, Durham, NC，27700

其中#代表公寓号，2345 Belmont Avenue 代表街道号，Durham 是城市，NC 是州，27700 是邮编，一般在网上邮编、城市和州都有分出来让你分别填写，如果没有的话就按上面的内容填写。

不同国家的时间展示方式不同，会影响用户的理解成本，如果使用错误的话会导致不必要的错误发生。

如果涉及到多国家使用同一套样式，电话号码部分不建议用“空格”区分位数。但为了提高用户体验，在页面落地时可以，按照每个国家习惯格式展示。

RMB 并不是国际通用的人民币缩写，而是由 ISO 4217 定义的 CNY。同样的，为了避免出现其他标准上或理解上的错误，建议统一使用 ISO 标准。

四、B 端国际化设计策略

在了解了上方的这些国际化差异特点后，如何应用到具体的国际化项目？我们可以从表现层、行为层、业务层三个角度去思考。

1. 表现层

（图片来源于，阿里云官网中国站/海外站 https://www.aliyun.com/?utm_content=se_1013083955 ）

例如，阿里在中国站与国际站页面，采用了完全两种视觉风格。

国内版色彩清亮并使用 3D 元素+动效元素，而国际版更多的会选用稳重深沉的颜色，比如灰、深蓝、黑色等，图片选用上，多为一些重色、扁平的图片，可以起到感观刺激的作用。

京东印尼 logo 设计：京东 Logo 在国内和其他国际站点都是用的小狗，在做印尼的 logo 设计时，避开使用狗的元素，改成了小马，充分表达了对本地文化的尊重。

（伊斯兰教规定禁止把狗当作宠物养在家中，也不允许把狗当做儿童的玩伴，因为会对儿童的健康不利，也不允许让狗与人有密切的接触。）

空状态设计：在空状态上，在考虑到色彩禁忌、优化屏效，以及国际简洁的风格，缩小了图形尺寸，采用线性叠加小面积填充色的样式；

人物插画：如果插画中需体现人物，可以在性别、种族、发色、肤色上提供多种组合方案。

图片中的文字，是不跟随语言切换改变的，会造成语言内容不统一，对用户体验影响很大。

一般来说，尽可能避免图片上使用文字，如需要，图片上的文字建议采用分层展示，也就是可以在不替换图片的情况下，通过简单替换字符串即可满足需求（在特别为某个国家设计的情况下，可以做在图片中）

2. 行为层

在 B 端表单页中，国际的地址填写与国内地址存在差异，且需注意填写顺序，国家后地址为倒序填写。

亚洲国家日期一般为年/月/日；

欧洲国家、英联邦国家或拉丁语国家，日期一般为日/月/年；如果是美国系国家，一般为月/日/年。

需要我们在进行设计的时候，务必了解用户当地使用情况，保障阅读习惯的一致性。

根据用户选择的国家不同，展示对应的电话格式。需要增加国家编码的选择器，一般会使用「前置选择器+输入框」复合型输入框组件，也可根据情况在选择器里增加国旗辅助判断。

LTR(左至右)为常规阅读方式，这里需要重点注意 RTL(右至左)适布局。通常情况下，对齐关系、排列顺序等均需要进行相反处理，包括 icon、箭头方向也需要进行翻转镜像。主要操作按钮也要从右侧调整至左侧。

3. 业务层

若工作台前期未考虑语言适配，后期直接适配多语言会出现哪些问题？在多语言 UI 界面中最容易出现的问题之一，就是语言适配时文案占位面积不可控。

以京东国际物流文案为例，做了多语言占位面积测试，来了解语言翻译后的效果，可以发现拉丁字母的国家文案长度是众多语言中最长的，基本在中文的 2.5 倍以上。

在做 国际化设计 时，可以考虑以英文版做基础产出，并防止后期加入其它长度大于英文的语言，可以预留 50%的长度；也可以汉字为参考，预留 200%~300%长度产出，都可较好避免占位面积出现的显示问题。

针对国际 UI 进行组件化，并建立规范，能大幅度提高设计效率、一致性和复用性，也便于其他同学快速了解国际组件的差异性。

文化背景不同、审美观念不同等，造成了当前国内外存在不同的视觉衡量标准，两种标准其实不分好坏，相信在全球化的浪潮下，中西方文化会相互影响、相互促进，国内外的视觉风格会逐渐趋同、审美边界越来越小，但又有着各自国家的特性，彰显不同的美。

欢迎关注「京东设计中心JDC」的微信公众号：

一、项目背景更多B端出海经验：B端产品如何做好移动化设计？我总结了这篇实战经验！在移动互联网的高速发展的今天，我们如何才能让 B 端产品在移动化时能更好的满足用户诉求与期望呢？

一、项目背景

更多B端出海经验：

B端产品如何做好移动化设计？我总结了这篇实战经验！ 在移动互联网的高速发展的今天，我们如何才能让 B 端产品在移动化时能更好的满足用户诉求与期望呢？

阅读文章 >

二、JDL 国际业务情况

1. 覆盖国家和地区

目前 JDL 国际物流业务已覆盖美国、荷兰、英国、智利、日本、澳洲、中国香港等 220 多个国家和地区，涉及的语言有中文、英文、印尼语、泰语、马来语、日语等，为多国提供专业的仓运配物流软件+自动化仓储规划+物流运营经验结合的一体化供应链方案。

2. 具有包容性的国际化产品

跨国业务的需求量增多，促使我们需要一个具有「国际化」 产品来服务于不同国家的用户，而国际化的主要需求特点就是——包容性。

三、国际化特点

喜好差异：在不同的文化与生活背景下，左右着人们的喜好。例如不同颜色在不同国家所代表的意义也完全不同，在中国的文化背景里，红色代表着吉祥喜庆。新年等节日元素中，大家都会使用红色，而不是蓝色，绿色。

行为差异：文化受到多方因素的影响，例如地理、经济、社会政治等因素，不同文化背景下成长的人，养成不同的行为习惯，例如国内的阅读习惯是从左向右，但穆斯林国家是从右向左。

喜好差异与行为差异，都是会影响视觉界面的重要因素，例子还有很多，内容如下：

1. 喜好差异

基于不同的文化背景，色彩所代表的意义与情绪感受会有所不同。了解色彩禁忌，规避文化冲突的风险。

中国香港地区：白、黑、灰色不大受欢迎，红、黄和鲜艳的色彩则很受欢迎。

日本：喜爱红、白、蓝、橙、黄等色，禁忌黑白相间色、绿色、深灰色。

泰国：喜爱红、黄色，禁忌褐色。

马来西亚：伊斯兰教区喜爱绿色……

文化背景不同，宗教信仰的差异，会表现在一些禁忌上，这里简单的说一下图案的使用，界面设计时要结合国家特性使用图案，特别要避免使用一些禁忌图形。

在图标运用中，视觉 设计师 经常使用日常中熟悉的元素。然而不同的国家有不同的文化理解与不同的形状。

国际页面上使用的照片、插图尽量避免人物肤色单一，避免带来一些敏感性问题，不使用真实环境中的肤色也是一样不错的方案。

2. 行为差异

不同国家的阅读顺序不一样，界面中文字排布要特别符合当地人的阅读习惯，很多中东国家的语言阅读习惯是从右向左的（RTL）。

从左到右（Left-to-Right 以下简称 LTR），如汉语、英语、韩语、日语；

从右到左（Right-to-Left 以下简称 RTL），如阿拉伯语、波斯语、乌尔都语等。

中国的地址通常是按照“国家-省-市-地区-道路-小区-楼房-楼层-房间号”的顺序，是由大到小的顺序书写，英美国家的地址恰恰相反，是由小到大的书写方式。

例如：#20A, 2345 Belmont Avenue, Durham, NC，27700

其中#代表公寓号，2345 Belmont Avenue 代表街道号，Durham 是城市，NC 是州，27700 是邮编，一般在网上邮编、城市和州都有分出来让你分别填写，如果没有的话就按上面的内容填写。

不同国家的时间展示方式不同，会影响用户的理解成本，如果使用错误的话会导致不必要的错误发生。

如果涉及到多国家使用同一套样式，电话号码部分不建议用“空格”区分位数。但为了提高用户体验，在页面落地时可以，按照每个国家习惯格式展示。

RMB 并不是国际通用的人民币缩写，而是由 ISO 4217 定义的 CNY。同样的，为了避免出现其他标准上或理解上的错误，建议统一使用 ISO 标准。

四、B 端国际化设计策略

在了解了上方的这些国际化差异特点后，如何应用到具体的国际化项目？我们可以从表现层、行为层、业务层三个角度去思考。

1. 表现层

（图片来源于，阿里云官网中国站/海外站 https://www.aliyun.com/?utm_content=se_1013083955 ）

例如，阿里在中国站与国际站页面，采用了完全两种视觉风格。

国内版色彩清亮并使用 3D 元素+动效元素，而国际版更多的会选用稳重深沉的颜色，比如灰、深蓝、黑色等，图片选用上，多为一些重色、扁平的图片，可以起到感观刺激的作用。

京东印尼 logo 设计：京东 Logo 在国内和其他国际站点都是用的小狗，在做印尼的 logo 设计时，避开使用狗的元素，改成了小马，充分表达了对本地文化的尊重。

（伊斯兰教规定禁止把狗当作宠物养在家中，也不允许把狗当做儿童的玩伴，因为会对儿童的健康不利，也不允许让狗与人有密切的接触。）

空状态设计：在空状态上，在考虑到色彩禁忌、优化屏效，以及国际简洁的风格，缩小了图形尺寸，采用线性叠加小面积填充色的样式；

人物插画：如果插画中需体现人物，可以在性别、种族、发色、肤色上提供多种组合方案。

图片中的文字，是不跟随语言切换改变的，会造成语言内容不统一，对用户体验影响很大。

一般来说，尽可能避免图片上使用文字，如需要，图片上的文字建议采用分层展示，也就是可以在不替换图片的情况下，通过简单替换字符串即可满足需求（在特别为某个国家设计的情况下，可以做在图片中）

2. 行为层

在 B 端表单页中，国际的地址填写与国内地址存在差异，且需注意填写顺序，国家后地址为倒序填写。

亚洲国家日期一般为年/月/日；

欧洲国家、英联邦国家或拉丁语国家，日期一般为日/月/年；如果是美国系国家，一般为月/日/年。

需要我们在进行设计的时候，务必了解用户当地使用情况，保障阅读习惯的一致性。

根据用户选择的国家不同，展示对应的电话格式。需要增加国家编码的选择器，一般会使用「前置选择器+输入框」复合型输入框组件，也可根据情况在选择器里增加国旗辅助判断。

LTR(左至右)为常规阅读方式，这里需要重点注意 RTL(右至左)适布局。通常情况下，对齐关系、排列顺序等均需要进行相反处理，包括 icon、箭头方向也需要进行翻转镜像。主要操作按钮也要从右侧调整至左侧。

3. 业务层

若工作台前期未考虑语言适配，后期直接适配多语言会出现哪些问题？在多语言 UI 界面中最容易出现的问题之一，就是语言适配时文案占位面积不可控。

以京东国际物流文案为例，做了多语言占位面积测试，来了解语言翻译后的效果，可以发现拉丁字母的国家文案长度是众多语言中最长的，基本在中文的 2.5 倍以上。

在做 国际化设计 时，可以考虑以英文版做基础产出，并防止后期加入其它长度大于英文的语言，可以预留 50%的长度；也可以汉字为参考，预留 200%~300%长度产出，都可较好避免占位面积出现的显示问题。

针对国际 UI 进行组件化，并建立规范，能大幅度提高设计效率、一致性和复用性，也便于其他同学快速了解国际组件的差异性。

文化背景不同、审美观念不同等，造成了当前国内外存在不同的视觉衡量标准，两种标准其实不分好坏，相信在全球化的浪潮下，中西方文化会相互影响、相互促进，国内外的视觉风格会逐渐趋同、审美边界越来越小，但又有着各自国家的特性，彰显不同的美。

欢迎关注「京东设计中心JDC」的微信公众号：

随着美国人工智能对话聊天机器人 ChatGPT 的发布，人类在人工智能领域又迈向一个新的台阶，最近笔者总在一些微信群里看到一些设计师提出的问题“ChatGPT 会代替设计师吗？ChatGPT 能为设计师做什么？”，今天这篇文章来自国外自由设计师 Thalion，他用真实的案例向大家阐述了 UX 设计师如何使用 C...

随着美国人工智能对话聊天机器人 ChatGPT 的发布，人类在人工智能领域又迈向一个新的台阶，最近笔者总在一些微信群里看到一些设计师提出的问题“ChatGPT 会代替设计师吗？ ChatGPT 能为设计师做什么？”，今天这篇文章来自国外自由设计师 Thalion，他用真实的案例向大家阐述了 UX 设计师 如何使用 ChatGPT 提升工作效率，或许能够给你的工作带来一些灵感。

更多AI相关的干货：

AI绘画进阶必看！9种 Midjourney 常用后缀参数 大家好，这里是和你们聊设计的花生~ 最近 AI 绘画真的越来越火了啦，开始有越来越多的设计师将 Midjourney 用到自己的设计工作流中，让它们生成各种设计灵感或素材。

阅读文章 >

以下是今天的正文：

与其无休止地讨论“人工智能会取代设计师”，不如专注于一些实用的东西。

事实上，当前的人工智能解决方案（如 ChatGPT），可能会为我们的日常任务提供强大的帮助。这个工具能支持的领域可能会让你感到惊讶。在这篇文章中，你将看到许多实用的例子。我很确定，很快，你会发现使用 ChatGPT 能让你的设计工作事半功倍。 我们开始吧！

1. 为网站或模块生成文本 使用“lorem ipsum”非常容易，但设计仍然感觉很假。让设计可视化呈现的最好方式是向客户展示一些示例。

AI 工具可能会生成不错的文本内容示例：

2. 优化已创建的文本 如果你觉得文本内容不太合适，可以要求 ChatGPT 对其进行优化。

请注意，优化是有限的，一开始文本内容可能看起来非常通用。

3. 获取页面布局或线框的想法 快到交付日期了？感觉思路卡住了？要释放创造力并产生新的想法，请使用 AI 获取特定线框图布局的描述。

一些结果似乎出人意料地好。

4. 为特定 APP 或网站找到合适的可用性测试方法 正确选择可用性测试方法可以极大地优化产品。请随时让 ChatGPT 推荐一些方法。

5. 优化设计工作流程的想法 如果你像我一样，喜欢学习新事物并提高技能，AI 工具可能会建议你探索工作流程的新方法，如为工程师传达 figma 设计文件的最佳方式。

6. 找到最佳的学习工具 设计行业日益变化。新的技术可能性为各种工具带来了机会。询问哪些工具用于特定的设计目的（如 AR 或 VR），通过聊天的方式能够获得几个解决方案。

7. 找到最佳的设计资源 找到设计系统套件或 UI 套件等高质量资源对于 ChatGPT 来说非常容易。

有趣的是，当我在寻找 Figma 的智能设计系统时，AI 列举了一些很好的例子，包括我为设计师创建的资源——Prime Design System。

8. 寻找学习设计知识的地方 学习设计几乎是产品设计师经常做的事。AI 对于寻找新的平台来源以掌握特定领域方面非常有帮助：

9. 找出一种向团队成员解释复杂设计术语的方法 我们往往对我们每天使用的术语非常有偏见。同理心地图、用户旅程、SUS、CTA 等都是 AI 可能很容易解释的术语。

得益于此，你的队友和你将与特定的设计术语保持一致的认知。

10. 向非技术人员解释设计术语 有时你必须向客户解释上述条款。虽然团队成员通常是懂类似术语的技术人员，但在这种情况下，你必须让它变得更简单。

你甚至可以举一个极其简单的例子：

11. 搜索设计趋势 包括我在内的一些设计师会花时间来分析来年的设计趋势。

然而，只需几秒钟，你就可以获得未来几个月最热门的领域，这是很好的灵感来源。

12. 获取设计汇报的想法 向客户或团队准备设计汇报时不知所措？ChatGPT 能为你提供一些想法，并帮助你优化内容。

13. 找到组织会议的技巧 假如你想更好地为设计讨论会做准备。AI 会给你一些建议。列出的问题越具体，你获得的优化提示就越精确。

14. 生成用户流程示例 如果你需要一些灵感，或者只是需要验证你是否预测了用户旅程或流程中的所有步骤。可以让 AI 准备步骤列表，能够获得不错的效果。

15. 获得优化体验的想法 一旦你获得了用户流程，总会有一个模块需要优化。ChatGPT 不仅可以帮你优化用户旅程，还能提供让你惊喜的建议。

16. 获得错误消息的文本 相信没有人喜欢写错误消息，这就是为什么你可以让 AI 为你做这件事。你只需写下“为特定情景写一个错误消息”就可以了。

17. 根据特定的语音语调优化文本 如果你认为生成的文本非常通用或不符合解决方案的指南，可以建议 ChatGPT 更改语音语调。

18. 撰写产品简介 通过强大的 AI 建议，编写产品描述可能会变得容易得多。

如果你需要包含一些特定元素，请写下所有要求并见证这一神奇的现象是如何发生的：

19. 获取 Dribble 配图的想法 如果你对一个概念没有想法，或者想发布一些和之前不太一样的东西，AI 可以帮助你。

20. 翻译文本内容 对于多语言应用程序，最好测试一下该版本用其他语言是否适配。因为一些语句可能会出现不够简短、无法放入按钮的问题。

ChatGPT 可以轻松搞定特定 UI 元素的翻译。

21. 编写设计系统文档 这个例子的想法灵感来自 Chris Lüders 写的文章。我没想到会从 AI 中得到这样的东西。

提供具体要求和表格并准确描述，它们将生成一个高质量的文档示例！ 你甚至可以获得代码示例。

22. 搜索自由职业者信息来源 如果你正在找工作，而当前没有足够多的信息来源，ChatGPT 将帮助你找到新的工作机会。

23. 获取自由职业者工作机会的技巧 一旦你有可能获得自由职业者的工作，是时候获得一些技巧来抓住这个机会了。用 AI 提供的建议激励自己。

24. 获取用于设计研究的真实数据 即使用谷歌，获取一些用于设计研究的数据也可能非常耗时。现在，ChatGPT 可能会为你搜索大量信息来源，并在几秒钟内生成结果。

25. 问问 AI 它能帮你做什么 最后，你可以问问 chatGPT，它能帮你做什么。我直接从工具中获得了这篇文章的一些灵感。

总结 通过这些例子相信你获得了很多灵感，了解到真正的 AI 如何帮助你完成日常任务。有些例子可能感觉很常见或普通，但其他例子，比如设计系统文档示例，令人感到震撼！

ChatGPT 需要不断训练，因为像每个 AI 工具一样，它在不断地学习并改进结果。

感谢你的阅读！

参考 https://www.thalion.pro/post/chatgpt-for-ui-ux-design-25-examples

经常看到读者私信说想看组件相关的文章，诚然，认识和了解组件很重要，但只是了解组件、会用组件是否就能做出好的设计？我想以某知名打车软件活动页为例，展开聊聊。更多组件干货：超多知识点！

经常看到读者私信说想看组件相关的文章，诚然，认识和了解组件很重要，但只是了解组件、会用组件是否就能做出好的设计？我想以某知名打车软件活动页为例，展开聊聊。

更多组件干货：

超多知识点！UI设计师必会的组件库构建指南！ 前言 在设计系统中，大家最熟悉、最常用的应该就是设计组件了，它包括文字、图标、按钮、输入框、表单...等一系列构成界面的小元素，而这些小元素的结合体就是笔者要讲的组件库。

阅读文章 >

这是一个在打车过程中投放的运营活动。

点开这个页面的第一感受是，没有明确的吸引点，结构和文案都略显混乱。通过在 App 内寻找到了一些相似结构的 H5，我猜测这应该是运营或 设计师 拿现成的活动设计组件拼接的 H5。

组件明明是为了更好地完成方案而设计的，为什么通过组件搭建的设计方案却远“不及格”？我们先来聊聊这个页面的待优化点和改进建议，再谈谈组件与设计方案之间的关系。

一、活动页分析 老生常谈，先从设计前必聊的用户、场景、产品目标聊起。以使用活动页时的体验判断，这个活动的目标用户是上下班打车族，场景是上下班打车过程中尤其是等待司机接驾的时间空档，产品目标很可能是通过首个免费无门槛的 2 元优惠券吸引用户，引导用户看到并购买通勤优惠套餐，通过套餐提升留存，让用户养成上下班在此 app 上打车的习惯。在这个背景下，我们重新审视这个活动页，会发现几个问题：

上图所示的问题可以通过以下的设计思想解决：

1. 关注首屏

「首屏线」这个概念虽然不曾出现在交互书籍里，却是实际工作中需要格外关注的设计点。「首屏」是指用户无需滚动就可看到的屏幕范围，每个公司对首屏线的划定各不相同（取决于软件的用户实际使用的手机型号分布），但现在基本都以 390x844 或其倍数划分首屏。可以看到该活动页对首屏内容的把控，将付费套餐的购买行动放在了首屏外。上面说到，活动的目标猜测是通过购买通勤礼包提升打车留存，把这样重要的操作放在了首屏外对目标来说实在不是一件好事。

2. 交互一致性

虽说首屏线很重要，但用户也不是一定不会往下滑，前提是首屏的内容要让用户产生往下滑的动力。但是很遗憾，这个页面因为两种优惠券的领取交互不一致，让用户丧失了这个动力。在首屏能完整看到的优惠券中，优惠券的领取方式是在优惠券的右侧，所以用户下意识地会认为第二个优惠券的领取也是在右侧，既然如此首屏以下也就没有值得用户往下滑动的重要信息了。

其实只要做好一致性，就可以让用户产生往下滑的动力，达到活动目标。

3. 特殊设计增加吸引力

前面提到页面中第一张免费无门槛优惠券是活动的吸引点，直接影响了用户参与度，作为活动中至关重要的第一步，加上它确实与另外两个付费套餐有所不同，因此，在设计的时候，我们可以通过一些特殊化设计来吸引用户的注意力。

特殊化的设计有许多种表现形式，上图与活动图结合的方式仅作为其中一种表现形式供参考，非唯一确定性答案，但总体的设计思路是一致的，即通过设计特殊样式来增加吸引力。

4. 根据实际使用情况设计主操作

先说一个视觉问题，活动页的底色、优惠券和领取按钮都用的相同或相近的颜色，导致在页面滑动过程中，「去打车」这个悬浮操作经常和活动页内容融为一体，辨识度低，虽说是视觉问题，但若视觉影响到了交互体验，交互设计师有责任给出意见。

这里还有另一个讨论，「去打车」是否需要作为页面主操作固定悬浮在页面底部。上文提到活动页是在打车过程中投放的，那么用户在“已打车”的情况下，打车诉求不强烈，无需固定悬浮来强引导。

退一步说，如果我们投放的场景不可控，无法提前判断用户的状态是在打车中或未打车，那么仅考虑当前页面的话，优惠券的行动分为了「领取」和「使用/打车」，无论对用户还是平台来说，「领优惠券」这个行为最终导向的都是「打车」，而多一步操作会带来多一层的用户流失，更简单有效的做法可以是把领券和打车的行为结合起来，一些电商平台的优惠券就有运用到这一思想。

当然，将领券与用券的操作结合并不适合所有的活动目标。打车属于门槛较高的付费行为，如果活动不追求打车转化率，允许用户先领券，后打车，那么将「领券」和「打车」分开也是可行的。但「领券」与「打车」依然在因果和先后上存在强联系，因此，我们可以通过状态变化或动画效果来建立这个行动联系。

5. 建立准确的预期

我在刚开始看到这个付费套餐的时候，不理解「¥30」是什么意思，于是点开了「...」。

点开后发现 30 块钱只有 4 张 4 元优惠券，开始疑惑这个活动是要用户花 30 块钱买 4 张 4 块钱的优惠券吗？这似乎吸引不到用户啊。后来经朋友提醒才发现这个优惠券详情的面板是可滑动的。这些困惑暴露了这个套餐设计的几个问题：付费价格和优惠价格模糊、没有明确优惠券数量和具体数额、详情面板没有给到可滑动的预期。

首先说说前两个问题，归结下来就是没有给用户建立这是一个「套餐」的预期：

套餐与单张券采用了一样的设计形式，使得用户没办法通过视觉直观地接收到「多张优惠券」的信息，我们可以对比一下其他「套餐」感设计得比较好的例子：

对比可以发现，上图中的套餐都明确了券面额、券数量与购买价格，有的套餐还会标识优惠额度。当设计方案中明确了上述关键信息，「套餐」的设计感就会建立起来，有时候甚至根本不需要套餐详情面板来做进一步的解释。

如果有什么不可抗力需要设计套餐详情面板，在高度合适的情况下，建议将所有的优惠券直接展示完整，或者通过露出半张券的方式告诉用户下面还有内容，可以继续往下滑动。

上述内容是该活动页比较明显的几个问题及解决思路，除了这些问题外，还有许多小问题，比如头图想表达的是通勤路段，用中文表达了我的公寓，却用英文表达了“Office”；全页面充斥着许多无效且重复的信息，无效信息例如“加量神券”，重复信息例如家庭地址与公司地址，若是作为这 1 张券+2 个套餐的通用限定条件，可以考虑放在头部仅出现一次作为说明，无需在每个套餐中重复提及（活动规则同理）...作为头部打车软件，方案中出现这么多问题实在令人匪夷所思，但这是组件的设计师的错吗？

二、设计组件与设计方案 组件库的搭建通常是分时段、分人、在各自具体的需求背景下添加和补充，或者是同一个人在完全脱离具体需求背景的情况下搭建的。

这样设计出来的组件单独出现的时候都是合格的，然而交互是在具体需求背景下，服务特定的目标人群，解决具体的问题，满足当下的产品目标，这几个变量决定了我们很难找到两个完全一样的需求，因此也很难通过同一套组件拼接出完美的设计方案。拿单个组件应用时为例，在具体使用时，使用者有时甚至会为了满足组件“完整度”需要造词填充一些没有价值的信息。

这样的组件单独出现时，虽然没有达到“完美”但也能接受，但是页面如果全都由这样不合格的设计拼接而成，后果自然就是产出不专业的方案。

讲到这里应该也能看出来，单纯地做好组件并不能做好设计方案。组件拼接思路是由小到大，交互思考过程是由大到小，我们反复地说做设计前要做好调研，要做好分析，要先确认好框架...交互的价值除了抽象方法外也体现在具体问题的深度思考和设计原则的因地制宜上。而出现这样子用专业的方式产出不专业的方案的原因，除了可能是 H5 生产者缺少具体需求具体分析的思考能力外，更有可能是设计环境所致。不知从何时开始，设计开始陷入一个怪圈，产出抽象模型比解决具体问题“厉害”，做出一个系统比做好一个需求“厉害”，所以具体问题需要为抽象模型让步，实际的需求需要为理想的系统让步。再加上被急促的需求周期、悬浮的产品目标和组件至上的原则所禁锢，为了“符合规范”不敢做组件之外的创新尝试，为了“赶周期”只能用现有的开发能力，为了“虽然没有根据但可以先试”的目标阉割思考。或许，多一些细节，多一些自由，多一些时间，多一些表达空间，设计更能迸发价值。

欢迎关注作者微信公众号：「白话说交互」