设计师在进行设计时，标题常常会使用醒目、装饰性强、具有视觉冲击力的艺术字体，以便能快速吸引受众的注意。良好的标题字体能准确、快速的传达美感并表达设计的理念，本期推荐 28 款适合运用在标题的免费商用艺术字体。往期回顾：视觉设计师来收！

设计师在进行设计时，标题常常会使用醒目、装饰性强、具有视觉冲击力的艺术字体，以便能快速吸引受众的注意。良好的标题字体能准确、快速的传达美感并表达设计的理念，本期推荐 28 款适合运用在标题的免费商用艺术字体。

往期回顾：

视觉设计师来收！免费商用字体推荐：卡通体篇（13款已打包） 本期推荐的是免费商用的卡通体，此类字体非常适合运用在可爱活泼、轻松休闲的设计中，会有不俗的表现力，常常能达到“画龙点睛”的效果。

阅读文章 >

字形方正，结构均匀，重心线比中心线稍高，字面偏大，笔画纤细，转角处都加上了小圆角，给人以亲切感。

字体整体规整瘦长，看上去十分地清新雅致。字体笔划横平竖直，但并不锋利，作者给笔划末端所设计的圆角也让整款字体显得更加温润平和。

是一款细长形字体，笔画纤细，没有弧线，简约时尚，富有节奏与灵气，具有很强的设计感和现代感。

笔画修长、谦和、灵秀，撇和捺伸展流畅，模竖转折硬朗，工业设计感十足。偏傍部首做了像字标 LOGO 类似的变形，增加了变形的趣味。在简略了一些原字笔画的同时依然保持了很高的识别性。

结构上选用了略扁的形态，在字形细节里，适当的圆角设计，“口”字形部件右上角的竖线设计，以及撇捺笔画的曲直对比设计，这些崭新的形态以及组合，都让这款字体具备了更多的独创性。

由庞门正道以及字游空间创意工作室联合研发的免费商用字体。字形比较扁平、风格现代，字体方中带圆，简约时尚，设计的可塑性很强。

字形笔画粗犷有力，用宽扁型的字面构建出厚重的字体形态，笔画细节上的修饰既增强了字体的设计感，又让字体多了一些小小的精致感。

站酷高端黑的字形的长宽比采用了 10:7 的比例，字体趋于扁平，笔画简洁明朗，果断有力，字体形态表现出了独特的设计个性与创造性。

整体字形结构方正有力，同时遵循笔画横细竖粗原则，达到视觉上的和谐，字体末梢采用切角设计干净利落丰富了字的形式。

笔画清晰有力，棱角分明，字型饱满坚实、粗中有细，视觉上舒朗流畅、简洁优雅。

由设计师卢帅与集合众多学员、设计讲师一起设计完成的一款免费商用字体。字体笔触粗实，字形厚重有力，是一款非常刚性，设计感很强的标题字体。

由 字体设计 师胡晓波设计的 免费字体 ，笔势节奏鲜明，字体形态表现出独特的设计个性和创造性。

整体字形设计采用横细竖粗的设计风格，横线右端倾斜修饰，竖线右上角尖角修饰变形，整体视觉统一刚劲有力，结构严谨、规范、干净、整洁。

数黑体字型饱满、体态中正，布白极具现代韵律，落笔厚实而简练；数黑在“图形感”和“书写感”当中权衡得当，使其能够正常阅读的前提下也不乏辨识度；特殊的笔画处理能够在字里行间流露出醒目、时尚和先锋的视觉感受。

Tips：PS 或 AI 中找不到字体，请搜索名称「Alimama ShuHeiTi」即可。

呈现向右倾斜 8°的倾斜体，笔画横细竖粗，让字体整体和谐与平衡，并且在笔画适当部位进行倒角，来增加字体活力。还提取了传统书法中的笔锋之道，将藏锋、露锋，与现代设计手法相结合。

Tips：PS 或 AI 中找不到字体，请搜索名称「DOUYU Font」即可。

采用较大字面和粗壮的笔画来强化力量感。每个字体水平倾斜 8°的设计，赋予了字体极强的速度感，为了让字体倾斜后也能保持稳固，设计师将整体字身设定宽扁。而起笔和弯钩上独具匠心的尖角设计，不仅突显了设计的几何感，而且方便后期进行修改。

「优设标题黑」官网下载！ 「优设标题黑」请从优设官网下载，我们会将最新字体版本更新在此，大家记得收藏本页面。

阅读文章 >

作为「优设标题黑」的兄弟版，在保留力量感的基础上，将 8°倾斜去除，从斜体变为正体，减弱速度感，增加稳固的感受，同时将尖角改为圆角，让其更适用于温和的场景。

优设标题圆开放下载！优设网出品的第4套免费可商用字体 从「优设标题黑」发布至今已有两年多，在这款国民级字体发布后，优设马不停蹄，集结了团队的中坚设计师，继续发布了电商领域的宠儿「优设好身体」和另一个风格可爱的「优设字由棒棒体」。

阅读文章 >

笔触浑厚有力，笔画曲折有度，字形个性鲜明，刚柔并济，直角与圆角的错落搭配使得字体婉转有度，落落大方，给人以遒劲有力、端正凝练的感受。

字型偏瘦长重心提高，所有笔画使用直线，保留硬朗直来直去的稚气，学习了港台字型特征，使字体识别度高且具有复古、文艺感。

字体结构扁平，笔画非常粗厚，同时带有明显的尖角，字体表现出非常高的稳定性和强有力的视觉表现，非常适合用于 logo 设计、标题、海报和包装等场合。

字体具有典雅气质有非常有潮流感的风格化黑体作品，兼具了黑体的简洁和宋体的雅致特征， 整体字形方正，刚柔相济，优雅大方。

Tips：PS 或 AI 中找不到字体，请搜索名称「WDCH」即可。

站酷冠名的首款拥有家族字体（5 个字重）的公益字库。字形结合宋、黑二体的结构特点，将部分笔画转折处做圆角处理，方圆结合，厚重又不失灵动。

仓耳与墨是一款包含 5 个字重的家族字体，强调厚重与力量，具有醒目、有力和前卫的特点。

字体将篆刻的“刀意”融入其中，在笔形处理时模拟了类似篆刻的刀刻痕迹，同时为中和这种“尖锐”，在转折和“口”字结构上使用圆转角的处理方法，让整个字内方外圆。

Tips：PS 或 AI 中找不到字体，请搜索名称「TsangerYuMo」即可。

一款逆反差风格的创意字体。其笔画粗壮厚重，字型窄长，调性复古而不失现代感。

笔画硬朗，力量感十足，竖勾的勾省略，更有利于视觉传播。字型比例 1:1，笔画粗度为 150pt，更适用于画面标题。

字形偏扁，重心偏低。在保持字形辨识度的情况下，笔画尽可能的加粗，转折处改为圆角处理，极具有趣味性。

乐字蒙黑体是“乐字”制作的一款美术标题字。它的整体字形偏长，字面结构饱满，有稳重中具备力量感的同时笔画结构蕴含乐趣在其中，使其多了一些生动活泼。

欢迎关注作者的微信公众号：「艺海拾贝Design」

设计师在进行设计时，标题常常会使用醒目、装饰性强、具有视觉冲击力的艺术字体，以便能快速吸引受众的注意。良好的标题字体能准确、快速的传达美感并表达设计的理念，本期推荐 28 款适合运用在标题的免费商用艺术字体。往期回顾：视觉设计师来收！

设计师在进行设计时，标题常常会使用醒目、装饰性强、具有视觉冲击力的艺术字体，以便能快速吸引受众的注意。良好的标题字体能准确、快速的传达美感并表达设计的理念，本期推荐 28 款适合运用在标题的免费商用艺术字体。

往期回顾：

视觉设计师来收！免费商用字体推荐：卡通体篇（13款已打包） 本期推荐的是免费商用的卡通体，此类字体非常适合运用在可爱活泼、轻松休闲的设计中，会有不俗的表现力，常常能达到“画龙点睛”的效果。

阅读文章 >

字形方正，结构均匀，重心线比中心线稍高，字面偏大，笔画纤细，转角处都加上了小圆角，给人以亲切感。

字体整体规整瘦长，看上去十分地清新雅致。字体笔划横平竖直，但并不锋利，作者给笔划末端所设计的圆角也让整款字体显得更加温润平和。

是一款细长形字体，笔画纤细，没有弧线，简约时尚，富有节奏与灵气，具有很强的设计感和现代感。

笔画修长、谦和、灵秀，撇和捺伸展流畅，模竖转折硬朗，工业设计感十足。偏傍部首做了像字标 LOGO 类似的变形，增加了变形的趣味。在简略了一些原字笔画的同时依然保持了很高的识别性。

结构上选用了略扁的形态，在字形细节里，适当的圆角设计，“口”字形部件右上角的竖线设计，以及撇捺笔画的曲直对比设计，这些崭新的形态以及组合，都让这款字体具备了更多的独创性。

由庞门正道以及字游空间创意工作室联合研发的免费商用字体。字形比较扁平、风格现代，字体方中带圆，简约时尚，设计的可塑性很强。

字形笔画粗犷有力，用宽扁型的字面构建出厚重的字体形态，笔画细节上的修饰既增强了字体的设计感，又让字体多了一些小小的精致感。

站酷高端黑的字形的长宽比采用了 10:7 的比例，字体趋于扁平，笔画简洁明朗，果断有力，字体形态表现出了独特的设计个性与创造性。

整体字形结构方正有力，同时遵循笔画横细竖粗原则，达到视觉上的和谐，字体末梢采用切角设计干净利落丰富了字的形式。

笔画清晰有力，棱角分明，字型饱满坚实、粗中有细，视觉上舒朗流畅、简洁优雅。

由设计师卢帅与集合众多学员、设计讲师一起设计完成的一款免费商用字体。字体笔触粗实，字形厚重有力，是一款非常刚性，设计感很强的标题字体。

由 字体设计 师胡晓波设计的 免费字体 ，笔势节奏鲜明，字体形态表现出独特的设计个性和创造性。

整体字形设计采用横细竖粗的设计风格，横线右端倾斜修饰，竖线右上角尖角修饰变形，整体视觉统一刚劲有力，结构严谨、规范、干净、整洁。

数黑体字型饱满、体态中正，布白极具现代韵律，落笔厚实而简练；数黑在“图形感”和“书写感”当中权衡得当，使其能够正常阅读的前提下也不乏辨识度；特殊的笔画处理能够在字里行间流露出醒目、时尚和先锋的视觉感受。

Tips：PS 或 AI 中找不到字体，请搜索名称「Alimama ShuHeiTi」即可。

呈现向右倾斜 8°的倾斜体，笔画横细竖粗，让字体整体和谐与平衡，并且在笔画适当部位进行倒角，来增加字体活力。还提取了传统书法中的笔锋之道，将藏锋、露锋，与现代设计手法相结合。

Tips：PS 或 AI 中找不到字体，请搜索名称「DOUYU Font」即可。

采用较大字面和粗壮的笔画来强化力量感。每个字体水平倾斜 8°的设计，赋予了字体极强的速度感，为了让字体倾斜后也能保持稳固，设计师将整体字身设定宽扁。而起笔和弯钩上独具匠心的尖角设计，不仅突显了设计的几何感，而且方便后期进行修改。

「优设标题黑」官网下载！ 「优设标题黑」请从优设官网下载，我们会将最新字体版本更新在此，大家记得收藏本页面。

阅读文章 >

作为「优设标题黑」的兄弟版，在保留力量感的基础上，将 8°倾斜去除，从斜体变为正体，减弱速度感，增加稳固的感受，同时将尖角改为圆角，让其更适用于温和的场景。

优设标题圆开放下载！优设网出品的第4套免费可商用字体 从「优设标题黑」发布至今已有两年多，在这款国民级字体发布后，优设马不停蹄，集结了团队的中坚设计师，继续发布了电商领域的宠儿「优设好身体」和另一个风格可爱的「优设字由棒棒体」。

阅读文章 >

笔触浑厚有力，笔画曲折有度，字形个性鲜明，刚柔并济，直角与圆角的错落搭配使得字体婉转有度，落落大方，给人以遒劲有力、端正凝练的感受。

字型偏瘦长重心提高，所有笔画使用直线，保留硬朗直来直去的稚气，学习了港台字型特征，使字体识别度高且具有复古、文艺感。

字体结构扁平，笔画非常粗厚，同时带有明显的尖角，字体表现出非常高的稳定性和强有力的视觉表现，非常适合用于 logo 设计、标题、海报和包装等场合。

字体具有典雅气质有非常有潮流感的风格化黑体作品，兼具了黑体的简洁和宋体的雅致特征， 整体字形方正，刚柔相济，优雅大方。

Tips：PS 或 AI 中找不到字体，请搜索名称「WDCH」即可。

站酷冠名的首款拥有家族字体（5 个字重）的公益字库。字形结合宋、黑二体的结构特点，将部分笔画转折处做圆角处理，方圆结合，厚重又不失灵动。

仓耳与墨是一款包含 5 个字重的家族字体，强调厚重与力量，具有醒目、有力和前卫的特点。

字体将篆刻的“刀意”融入其中，在笔形处理时模拟了类似篆刻的刀刻痕迹，同时为中和这种“尖锐”，在转折和“口”字结构上使用圆转角的处理方法，让整个字内方外圆。

Tips：PS 或 AI 中找不到字体，请搜索名称「TsangerYuMo」即可。

一款逆反差风格的创意字体。其笔画粗壮厚重，字型窄长，调性复古而不失现代感。

笔画硬朗，力量感十足，竖勾的勾省略，更有利于视觉传播。字型比例 1:1，笔画粗度为 150pt，更适用于画面标题。

字形偏扁，重心偏低。在保持字形辨识度的情况下，笔画尽可能的加粗，转折处改为圆角处理，极具有趣味性。

乐字蒙黑体是“乐字”制作的一款美术标题字。它的整体字形偏长，字面结构饱满，有稳重中具备力量感的同时笔画结构蕴含乐趣在其中，使其多了一些生动活泼。

欢迎关注作者的微信公众号：「艺海拾贝Design」

对话框是一种重要的交互方式，主要用于完成信息传递。对话框很常见，但并不见得每一个设计师都可以百分百地弄明白对话框这个概念。这篇文章是对「对话框」的一个简单梳理和总结，希望可以解决大家心中的一些疑惑。

对话框是一种重要的交互方式，主要用于完成信息传递。对话框很常见，但并不见得每一个 设计师 都可以百分百地弄明白对话框这个概念。这篇文章是对「对话框」的一个简单梳理和总结，希望可以解决大家心中的一些疑惑。

更多交互方式：

6000字干货！3个优秀交互设计师应该具备的边界感 引言 售卖软件服务的公司，最理想的状态就是开发一套通用的解决方案或产品，而几乎不用接收任何定制化需求（定制化需求大多会被内化成通用产品的新功能）。

阅读文章 >

一、了解对话框 1. 对话框定义

对话框是叠加在应用主窗口上的弹出式的窗口。对话框以对话的方式让用户参与进来，在对话中它给出消息或要求输入。

当用户完成消息的阅读或者作出选择后，可以取消或者接受该对话框，之后，这个对话框便消失了，把应用的主窗口交还给用户。

关于对话框的概念，以下是百度百科的解释：

对话框越来越广泛地被应用于软件、网页、以及移动设备中。它可以保留用户当前进程的情况下，指引用户完成一个特定的操作 。

2. 对话框分类

按照对话框的交互方式，可将其分为「模态对话框」和「非模态对话框」。我们可以把他们看作是两个小家族，模态家族的人比较强硬，而非模态家族的人相对温柔一点。两个家族的主要区别：是否强制用户对其进行回应。

模态对话框：是位于浏览器的主页面核心区域，需要用户对它做出相应交互，模态才会消失。而对话框会因为自身的吸引程度、停留时间、信息量承载多少被划分为多种对话框类型进行区分，常见的对话框分别为：普通对话框、内嵌表单对话框、分步表单对话框、文件选择对话框、复杂信息展示对话框。

① 何时使用模态对话框

在重要的警告时使用，避免出现严重问题、或修正已出现的问题。

例如：用户录入信息后未保存就要关闭时，弹出模态对话框提示用户保存。

在需要用户输入信息或进行某操作，才能继续当前流程的时候使用。

例如：在使用 Canva 资源网站时，点击“上传”会弹出模态化的登录/注册窗口，引导登录/注册后使用。

用来将复杂流程拆分成简单步骤。

例如：Teambition-分步骤的模态对话框式创建项目。

用来获取信息，该信息可大大减轻用户的后续操作/精力。

例如：在转账场景中，如果先复制一个账号，打开手机银行 APP（以招商银行或平安口袋银行为例），系统会通过模式对话框询问用户是否向这个账号转账，这样的设计做到了预判用户行为，节省用户后面的操作成本。

非模态对话框：与模态完全相反，它更加温和，不会强制打断用户正在进行的现有流程，对用户的干扰比较小。通常这类对话框只会在屏幕上短暂停留，几秒就会消失，也因此用户容易忽略它们的存在。因此非模态对话框不适合展示重要信息、不能承载大量文案，常见的类型有：通知提醒、全局提示、警告提示、气泡卡片、文字提示。

② 何时使用非模态对话框

在获取与当前流程不必要信息的时候使用。

例如：平安口袋银行和平安数字口袋采用气泡卡片展示更多功能或引导用户登录。

不打断重要流程中使用。

例如：在平安口袋银行 APP 中购买理财时，如果遇到疑问的话，不会弹出框提示让客户咨询投顾，而且采用气泡框形式提示，不打断用户购买。

简单来说，两者的优缺点见下表：

二、对话框常见应用场景 从前面讲到的定义来看，对话框最主要的目的是：传递信息。那么从目标导向的角度来看对话框，对话框要传递的信息的常见应用场景主要有以下五种：

1. 属性对话框

属性对话框是向用户呈现或让用户改变所选对象的属性或者设置。一般来说，在属性对话框中，用户可以修改当前的选择，也可以设置应用程序的全局属性。该对话框适用于非频繁操作和或仅需要设置一次的属性，属性对话框常见在一些设置、详情中。

例如：Windows 11 系统的设置界面，可设置系统的全局属性。

2. 功能对话框

功能对话框通常从菜单中打开，是最常见的模态对话框，只控制单一功能，如打印、文件上传/导入、插入对象或拼写检查。该对话框不仅允许用户启动一个动作，而且也允许用户设置动作的细节，属于模态对话框。

例如：浏览器的打印功能，会弹出模态化的打印窗口，用户可设置打印的细节。

例如：飞书的文档导入功能，使用模态化对话框，引导用户选择文件类型或进行批量导入操作。

3. 进度对话框

进度对话框是由应用程序启动的，而不是由用户请求而启动的。它们向用户表明当前应用正在忙于某些内部功能，其他功能的处理能力可能会降低。

每个进度对话框都应该向用户清晰地展现如下信息：

一个耗时的进程正在进行 现在一切正常 该进行还有多长时间才能完成 还有多少事情或项目没有做完 用户如何才能取消该操作，或重获控制权 例如：使用 Axure 软件导出 html 文件时的进度提示，既提醒用户当前 Axure 正在运行，又告知用户当前文件导出进度。

例如：使用 Sketch 软件导出文件时的进度提示

4. 通知对话框

通知对话框将一些重要信息报告给用户。来源可以是一些触发的事件，也可以是其他用户的通知。

常见的有通知中心对话框，处理完成某个操作的告知等等。

例如：花瓣的通知提醒

例如：脉脉的隐私政策阅读提示和汽车之家的开启通知提示，均采用模态对话框方式

5. 公告对话框

公告对话框，和进度对话框一样，由应用程序直接启动，不是由用户请求发起的。公告对话框有三种：错误、警告、确认。

这种对话框通常不会要求用户填写什么，只会询问你“真的要进行吗？”或者告诉你一件事情。所以在这种对话框上，一般只会有只有[取消]和[确认]，或者[OK]。

属性、功能、进度对话框，是用户主动请求的--它们为用户服务。但是，应用程序发起的公告对话框--它们为应用程序服务，常常会牺牲用户利益。由于公告对话框比较常见且常常牺牲用户利益，那么我们怎么把这些讨厌且无用的公告对话框直接铲除掉，换成更加友好、能给用户带来真正帮助的交互方式呢？接下来我们来一起看看怎么让公告对话框“名声鹊起”。

三、怎么让公告对话框“名声鹊起” 我们可以从应用本身和对话框本身着手提供友好的交互方式，减少公告对话框的出现频率。

1. 应用方面

解决用户错误的方法不是指责用户，让用户再认真一些，或者给他们更多的指导练习，而应该优化应用设计，让犯错变得困难。

① 让应用变“聪明”，减少用户犯错

使用有界控件。比如验证码输入框、数字键盘等

示例：登录蓝湖时的短信验证码输入框

示例：转账时输入金额的数字键盘，金额大小的位数提示；平安口袋银行的身份证号专属键盘

提高可见性，用户可自主纠错

示例：输错密码是一个很难避免的错误场景，语雀密码登录支持可见密码，一来是考虑安全问题，二来在用户输错的场景下可以打开眼睛，即可见密码，减少出现错误频率。

具备预判思维，在容易出错的地方提供更方便的功能

示例：在支付宝聊天窗输入一串数字，支付宝发现这个问题后，提供了识别后直接转账的功能，预判了用户的惯性，减少错误发生

Zoom 拉会前预设值在加入会议室的界面，提前选择是否在进入会议房间后“不自动连接语音”和“保持摄像头关闭”，有效避免忘记闭麦或者忘记关摄像头就直接加入了线上会议的意外尴尬

让操作可“复原”，提供撤销功能

在很多破坏性的操作都会二次进行提醒，让用户确认操作，比如说删除操作。在删除之前都会询问用户“你真的要删除吗？”想一想……你在看到这些提示的时候，是不是眼疾手快地按下那个「确认」按钮？

这种对话框在没有容错处理时，非常容易被我们这种无脑按「确认」的用户酿成大错。比如我“手贱”只是试试这个删除，然后就把某个表几千条辛苦写了一个月的数据删掉了，由此可见系统的容错处理有多么重要。

示例：Windows 系统在早期的时候，删除文件时会让用户进行二次确认，但这是完全没必要的，因为删除文件不是真正的删除，还会在回收站里面。

Mac 系统：在回收站删除文件将是永久性删除，此时的确认对话框才是对用户有用的。

2. 对话框设计 方面

从对话框本身的设计优化出发，我们可以对话框的使用场景和文案方面着手进行优化设计。

① 对话框使用场景

其实什么时候使用对话框、是否使用取决于你要给用户展示的信息是否重要。

例如你在手机上买了一张电影票，支付失败的结果如果用 toast 展示就会容易被用户忽视。那么等到用户到了电影院才发现自己购买失败，那么用户极有可能当场卸载你的产品。

模态弹框会打断用户当前操作流程，所以「使用对话框要克制」。总原则是：能在界面展示就不用弹框，能用非模态弹框的就不要用模态弹框。总之，重要的信息优先考虑使用对话框。

具体的使用原则有：

弹框使用尽量克制。 文字需要精简，使用行为召唤动词。 注意区分复杂任务和轻量任务，选择对应的弹框类型。 反馈要及时。 可使用引导帮助选择。 ② 清晰且友好的文案

如果非要使用对话框，那么请使用友好尊重用户的方式。当我们说到人与人之间的交流时，语言是重要的媒介，而用户与产品之间同样如此。

在设计过程中应始终努力设计出有效的提示性文案，但是, 一定是有比没有要好吗？个人认为也是不必要的，糟糕的提示性文案甚至会破坏产品中最好的用户体验。例如以下几种情况：

含糊不清 过于啰嗦 无意义，产生误导 无同理心 因此糟糕的提示文案设计会误导用户在产品中采取不必要的操作, 从而使他们感到生气和困惑，甚至可能会破坏品牌对用户的忠诚度，产生本末倒置的结果， 也给用户带来不佳体验。

所以，语言是使产品更加人性化的主要因素。产品的文案则充当了语言的角色，它可以使用户参与其中，影响他们的情绪，并把这种人机的功能性关系转化成人类的个人情感体验。而这种用户的情感体验才能够真正的彰显品牌个性，从而与其他产品区分开来。

错误提示设计三步法

尽可能准确地描述问题和哪里出错了，简明易懂。 提出建设性意见，解决问题，保持流程前进不中断。如果此时问题还不能解决，告诉用户可以做些什么来帮助他们，以及他们可以向谁求助。 不要责怪他们，礼貌的对待用户，在报错中加入情感。 总结 对话框可以成为帮助用户完成目标的有用助手，而不是让他们在每一步操守挫败的可怕绊脚石。通过保持对话框的可管理性，并且只有在他们的功能真的属于另一个房间的情况下才调用他们，你将很好地维持用户的工作流状态，保证他们会成功完成任务，并且满怀感激。

有人说它是全世界最牛逼的 APP，因为它的算法难度和春运期间访问量几乎是全球之最；但有人说它是全世界最垃圾的 APP，因为在使用这个产品的过程中，遇见很多奇葩、愤怒的体验。关于这两种说法，众说纷纭，本期设计大侦探，就来全面拆解铁路 12306APP，一起来看看这个产品到底是如何设计的，用户体验如何。往期拆解：上线...

有人说它是全世界最牛逼的 APP，因为它的算法难度和春运期间访问量几乎是全球之最；但有人说它是全世界最垃圾的 APP，因为在使用这个产品的过程中，遇见很多奇葩、愤怒的体验。关于这两种说法，众说纷纭，本期设计大侦探，就来全面拆解铁路 12306 APP，一起来看看这个产品到底是如何设计的，用户体验如何。

往期拆解：

上线即爆火！3600字完整拆解微信键盘的产品设计 微信键盘发布啦！

阅读文章 >

一、导读 1. 内容结构

全文 9700 字，分为六个部分，分别是导读、产品画像、出行服务、内容服务、思考总结和后记，你可以通过下面的思维导图对本文内容快速的了解。

2. 适合人群

第一类，UI/交互 设计师 ，可以跳出执行层，全方位体验 12306 的产品设计，多维度去思考和总结如何规避类似的陷阱；第二类，产品经理/运营，通过全面的产品设计拆解、体验反馈，获取产品设计参考；第三类，旅游及出行相关行业从业者，通过对 12306 的全面拆解，获取竞品设计参考。

3. 分析模型

第一个，增长模型。由戴夫·麦克卢尔提出，包含用户获取、用户激活、用户留存、获取收入、用户推荐，分别对应用户生命周期中的 5 个重要环节，主要用于拆分和分析产品的功能价值。

第二个，尼尔森十大可用性原则。尼尔森十大可用性原则是界面设计中最基础、最重要的设计原则，任何产品的设计，都可以通过这十个原则进行指导设计。尼尔森十大原则包括即系统可见性原则、环境贴切原则、撤销重做原则、一致性原则、防错原则、易取原则、灵活高效原则、易扫原则、容错原则、人性化帮助原则，通过这十大原则，可以对 12306 的产品设计体验进行全面的校验和侦查。

用超多案例，帮你掌握尼尔森十大可用性原则 尼尔森设计原则是人机交互学博士 Jakob Nielsen 于 1995 年发表的“十大可用性原则”。

阅读文章 >

第三个，设计心理学。包括常见的格式塔原理、费茨定律、巴甫洛夫反应、7±2 效应、席克定律等常见设计基础理论。

万字干货！15个著名的设计心理学原理和应用深度解析！ “除非有更好的选择，否则就遵从标准” 你是否有在听别人说某某原理法则时一脸懵 B 的时候？

阅读文章 >

二、产品画像 1. 产品介绍

铁路 12306 是中国铁路客户服务中心推出的官方手机购票应用软件，主要为全国各地的乘客提供火车票预定、机票预订、汽车票预订等购票业务，首个版本发布于 2012 年 10 月 16 日，根据易观千帆数据，截止到 2022 年 10 月，12306 月活跃用户人数 6,923.78 万。

2. 用户画像

铁路 12306 的用户群体主要以男性用户居多，占比 65.04%，女性占比 34.96%；从年龄分布看，以 24-30 岁的用户群体最多，占比 36.52%，31 到 35 岁的用户占比 24.23%，36 到 40 岁占比 20.27%，41 岁以及以上占比 10.30%；从用户消费能力看，中高消费者占比 33.48%，中等消费者占比 30.43%，高消费者占比 14.70%；从地域分布看，新一线城市用户最多，占比 27.93%，一线城市占比 19.93%，二线城市占比 19.00%，其中广州用户最多，其次为深圳、杭州和北京。

3. 信息结构

铁路 12306 的一级菜单包含首页、出行服务、订单、铁路会员和用户中心。「首页」主要为用户提供火车票、飞机票和汽车票的购买，其次还提供各种快捷功能入口和酒店预订等服务；「出行服务」主要为用户提供约车、酒店、订单等服务；「订单」是可查询和管理在 12306 的各种订单；「铁路会员」是 12306 的会员版块，提供车票兑换、会员活动等内容；用户中心提供个人资料管理、出行向导和常用功能等内容。

4. 重要迭代记录

根据七麦数据统计，铁路 12306 的 APP 首个版本发布于 2012 年 10 月 16 日，截止到 2023 年 1 月 12 日，APP 版本已经更新至 V5.6.3 版本，近一年版本更新次数为 5 次。

版本重要迭代记录

2021 年 9 月，发布 V5.4.0 版本，新增无障碍功能、老人及障碍人士购票更便捷，即爱心版；

5. 产品生命周期

作为中国铁路客户服务中心的官方购票平台，铁路 12306 距离首个版本发布时间已经过去 10 年。从易观千帆数据观察，截止到 2022 年 10 月，12306 月活跃用户人数 6,923.78 万，日均活跃人数 811.65 万。由于是国有企业运营，而且是垄断业务，12306 没有任何商业变现的压力，从产品发布时间和活跃用户人数看，目前处于产品生命周期的成熟期。

6. 竞争图谱

截止到 2022 年 10 月，易观千帆数据显示，铁路 12306APP 在苹果的 APP Store 应用市场 APP 总排名 71 位，旅游类排名第一，汽车火车船票预定类第一，月活跃用户人数几乎是其他 APP 的总和。

三、出行服务 作为 12306 最核心、最重要以及实现商业变现的服务，出行服务主要为用户提供火车票、飞机票的销售，其次还链接了众多第三方合作伙伴，为用户在出行的各种场景提供了便捷的服务。

1. 票务 「票务」是 12306 最核心的服务，主要为用户提供火车票、飞机票和汽车票的查询以及销售，其次 12306 还对三种产品进行了组合，推出了空铁联运、铁水联运这样的服务。

① 火车票

「火车票」就是为用户提供火车和动车的票务销售，用户输入出发站、终点站和时间以后，就可以进行查询，其次还支持对已购买的车票进行变更到站、改签和退票。

1）售票

售票页

当用户输入目标站点以后，就进入了售票页。在这个页面，可以看到当天列车的所有车次，包括直达、中转、出发时间和剩余票数。在底部，有一个菜单栏，包含了筛选、耗时最短、发时最早、显示票价和候补下单五个功能，这主要是帮助用户快速寻找符合自己需求的车次，比如出发车站、出发时间等。

体验陷阱

这个页面的操作体验不太友好，底部的菜单栏不仅没有实现全屏手机设备的兼容，而且几乎和背景的元素贴合在一起，不够醒目，如果用户不注意，根本无法发现底部竟然还有一排菜单栏帮助用户进行高效的检索。

订单页

在用户选择好车次以后，就进入订单页。用户需要选择座位的系别，包括硬座、软座、二等座、一等座、特等座等。

用户需要选择乘车人。添加乘车人的步骤比较简单，在输入用户的真实姓名、身份证号码和手机号码以后，即可添加成功。首次使用12306的用户需要进行身份核验，用户需要通过验证系统发送的核验信息才能添加成功。

细节侦查

「姓名」这里有一个非常友好的设计体验，那就是针对无法输入的生僻字、名字超过 30 个字符，以及外籍用户的极端情况都给出了详细的指导，针对用户可能出现的极端的情况给与及时的提示，这就是尼尔森十大原则中的容错原则，帮助用户从错误中恢复，将损失降到最低。

在「选择乘车人」的右边，还有一个「选择受让人」的功能。这个功能有很高的学习成本，会让用户摸不着头脑。我也是通过百度查询才了解到这是一个用户权益功能，它主要是指用户可以把平时购买火车票获得的积分转让给指定的用户，积分又可以抵消火车票款，从而实现抵扣。

选择好乘车人以后，用户可以进行选座，就进入了提交订单、支付费用的环节。

支付页

订单生成后，用户需要在付款限定时间内支付火车票费用，否则订单将会取消。其次在支付页，也向用户推荐相关的保险服务，比如铁路乘意险，又分为平安险、行运险和顺意险，主要为乘客提供意外伤害疾病身故等保险。

「购买返程」其实一个非常便捷的功能，但12306设计的层级太深了，而且没有加上一键返回首页或订单页的按钮，用户如果想退回到订单页或首页，需要不断点击返回，操作路径实在太长。

体验陷阱

底部菜单设计了三个按钮，违反了费茨定律的设计原则。用户在这个支付页的主要目标是支付费用，但是菜单栏的三个按钮权重设计得一样高，取消订单和购买返程这两个按钮，严重干扰了用户的选择，降低了操作效率。

支付成功页

当用户支付成功以后，「支付成功页」为用户提供餐饮预订、出行保险、酒店入住、网络约车等服务，非常便捷。不过内容的规划比较乱，体验稍差。

候补下单

「候补下单」是一个非常方便的功能，这个功能主要解决在当前车次没票的情况帮助乘客自动排队，如果有其他乘客退票，就自动抢票，非常贴心。这个功能也被誉为黄牛的终结者，帮助乘客自主排队。

2）变更到站

「变更到站」是指乘客可以更改目标站点，进入订单详情页后，点击「变更到站」按钮，点击底部的「立即变更到站」就可进入变更页面。在变更页面，乘客可以重新输入目标站点，然后再次进入车票售票页，选中需要变更的车次以后，进入订单页提交订单，变更成功。需要注意的是，变更到站只能办理一次。

体验陷阱

当用户点击「变更到站」的时候，如果不注意观察页面，根本感受不出原来需要在底部菜单栏进行操作，会让乘客陷入焦躁，不知道下一步从哪里进入。其次在变更到站页面，下半部分设计了很多快捷入口，比如车站大屏、约车、餐饮特产等，把用户的注意力分散了。这两个设计都严重了违反了费茨定律和席克定律，大大降低了用户的操作效率。

3）改签

「改签」是指用户可以更改出行的时间，改签的流程和「变更到站」相似，进入售票页后，选中需要变更的车次，进入订单页提交订单，改签成功。需要注意的是，车票改签只能办理一次，开车前 48 小时以上，退票费为票价 5%，24 小时至 48 小时之间为 10%，不足 24 小时为 20%。退票费最少 2 元起步。

4）退票

「退票」是指用户可以退掉已经购买的车票，退票流程比较简单，点击退票后，进入退票确认页，点击确认退票成功。需要注意是，距离开车前 8 天以上的不收退票费，其他的时段将会根据列车开车前的时间收取手续费，最高 20%。

迭代建议

在用户点击退票的时候，应该出现弹窗，再次提醒用户是否确认退票，这样能避免用户误操作。这就是尼尔森十大原则的容错原则，帮助用户从错误中恢复，将损失降到最低。

5）购票后

当乘客购买车票后，12306 的首页会加入一个行程的版块，向用户展示最近的行程详情，其次一级菜单栏「出行服务」内容也会同步更新。这个设计非常友好，直观醒目地告诉乘客最近的行程信息，通过外部触发避免乘客忘记行程。

行程页

这个页面从上至下包含四个部分，头部是乘客详细的车次信息，比如出发时间、经停站、天气等；中间是车票信息，包含检票口、座位号、车次和乘车二维码等信息；接下来按乘客出行前服务、车站/列车服务和到达服务三个场景为乘客推荐其他服务，比如餐饮预定、酒店预定等服务；底部是关于出发站、到达站的天气预报信息和优惠服务等信息。

细节侦查

行程页把乘客的出行拆分为 3 个场景，出行前服务（提供重点客户预约、我要选酒店、我要去车站、我要订餐饮和禁带物品规定）、车站/列车服务（提供临时身份证证明、遗失物品查找、我要订餐饮和站内导航）和到达服务（遗失物品查找、我要订酒店、接站约车、旅游景点预定、投诉建议和站内导航），这就是以场景为中心的设计——将设计工作的焦点从“定义系统的操作”转变到“描述什么人将使用该系统去完成什么任务”。

② 飞机票

「飞机票」就是为用户提供飞机的票务销售，用户需要输入出发站、终点站和出发时间，如果携带孩子或者婴儿，还需要单独勾选。飞机票同样支持改签和退票。

1）售票页

售票页的内容非常简单，在头部，用户可以左右滑动选择时间，页面内容以 Feed 流向用户展示详细的航班信息，其次还为用户提供了其他出行方案参考。底部设计了一个菜单栏，用户可以进行筛选设置，还可以根据价格高低和出发时间排序。

2）选择舱位

选中航班班次以后，进入到「选择舱位页」，在这个页面可以查看到航班的详细信息，比如航空公司、起飞时间、值机柜台等。用户需要选择舱位等级，比如经济舱、商务舱和头等舱，选中后，即可进入预订流程。

拓展阅读

为什么同一架飞机同一个经济舱飞机票价格不一样？这是因为一个飞机的不同舱位实际上是不同的产品，所以座位有不同的等级，故而价格有了出入。其次他们主要的区别包括但不限于退票改签的灵活程度、出票期限和目的地停留期限等等。

3）订单页

在订单页，可以查看到订单的详细信息，包括收费说明、退改说明等，在用户添加乘客以后，就可以提交订单。这里需要注意一下，如果乘客携带孩子或婴儿，需要添加儿童出行人。

体验陷阱

当乘客勾选了「携带儿童或婴儿」的选项以后，在订单页准备支付的时候，系统提示乘客需要返回添加儿童出行人信息。但却并没有告诉乘客如何添加，或直接给出对应的功能跳转链接，这让用户点击「返回添加」后却找不到功能入口。这就违反了尼尔森十大原则的防错原则，不仅在用户犯错之前没有给出提示，犯错了还不给与指导，真的非常糟糕。

③ 汽车票

「汽车票」为用户提供客车的票务销售，用户输入出发站、终点站和时间以后，就可进入售票页。汽车票的订单流程非常简单，在选中客车车次以后，添加乘客支付费用后，订单即可生成。

体验陷阱

用户在选择「达到地」搜索框输入地名时候，应该提供模糊搜索，比如输入湖南的地名，应该为用户提示相关联的车站。

④ 空铁联运

空铁联运，顾名思义就是把飞机和高铁这两个产品组合在一起销售，支持用户一站式购买“飞机+高铁”的联运行程，只需一次购票、一次支付。这个功能的使用场景主要是针对出发地和目的地没有直飞的航班情况下，为用户提供飞机+高铁的转运方案。这个功能对于乘客来说，支持一站式购买“飞机+高铁”车票，可以节省购票时间，非常友好。

⑤ 铁水联运

和空铁联运一样，这也是一个组合产品的销售，支持用户一站式购买“高铁+水运”的联运行程。使用场景、功能价值以及操作流程和空铁联运一样，我们就不必重复。

⑥ 雪具快运

12306 还推出了一个雪具快运的服务，为广大旅客提供多种个性化雪具寄送产品服务，还支持随车办理或上门办理寄送服务，目的是为用户打造滑雪的新体验。「雪具快运」的操作流程也比较简单，采用预约制，选中服务后，填写用户详细信息，支付成功后，订单生成。

⑦ 小结

作为 12306 最重要、最核心、最复杂的功能，从这个版块的内容拆解和实操体验来看，可以看出 12306 确实已经解决被誉为全世界最复杂的抢票算法逻辑（笔者通过实操测试，几乎都能买到票），特别是在春运这种会出现超过上亿用户抢票场景，真可谓非常不容易。不过从用户体验来看，非常一般，甚至有很多不合理的设计。

2. 出行 出行是 12360 结合了乘客在出行的场景中潜在产生的需求设计的服务，有结合车站商家的在线点餐，有结合当地地域特色的旅游服务，还有约车、保险、酒店等服务。这些服务，多数由第三方合作方提供。

① 餐厅特产

「餐厅特产」是一个为乘客提供在线点餐的服务，在乘客输入列车车次以后，就可以进行点餐，支持外卖配送至列车和到店自取两种形式。这个功能设计得很友好，不仅解决乘客在乘车前的就餐问题，为车站的商家引流，还可以增加平台的变现方式。

② 铁路游

「铁路游」是 12306 结合旅游出行的场景，为乘客推出的一项旅游服务，包含旅游专列、跟团游、周末游和自由行等。这个场景的链接其实非常好，但是版块目前设计得比较简单，内容也比较少。

③ 约车

「约车」是为乘客提供接送站、接送机、打车和租车的服务。这是一个强刚需的需求，用户在出行的前后都有用车服务。为乘客提供约车服务，不仅能增加变现方式，还能方便乘客出行。通过实操体验，约车主要由第三方合作方提供服务，比如曹操出行、T3 出行等公司，为乘客提供出租车、品质专车和商务车等车型。

④ 保险

保险分为乘意险和出行保险。铁路乘意险分为平安险、行运险和顺意险，主要为乘客提供意外伤害疾病身故等保险，在乘客购买铁路的订单页就会向乘客推荐，乘意险价格低，保障项目包含意外身故、伤残、医疗费用、住院津贴等。出行保险由第三方公司中国太平洋保险提供，主要为乘客提供出行安心保、空铁联运险和旅程预定取消险。

⑤  酒店

酒店这个版块的内容相对夯实，不仅有新客大礼包这样的用户权益，还有商旅专区、今夜甩卖、高端酒店这样的内容。甚至还设计了专门的酒店会员 VIP，包含普通会员、银卡会员、金卡会员、白金卡会员和黑金卡会员，相对其他版块而言，这个版块花了比较多的心思。

⑥ 铁路商城

铁路商城是 12360 以乡村振兴·帮扶推介为主题打造的一个商城，包含了帮扶专区、优选好物、兑换专区、今日特卖等内容，其次还支持企业集采，批量购买。

⑦ 小结

从这个版块，可以看出 12360 其实结合了用户吃穿住行的刚需场景设计了对应的服务，有自主运营也有完全依靠第三方提供。不过整体的用户体验比较差，事实上可以参考像顺丰速运、智联招聘这些 APP，通过内置小程序的形式来设计，完全可以把这些版块让第三方单独设计和维护，同时还能为用户带来更好的体验。

3. 会员 铁路畅行会员是中国铁路统一对外会员服务品牌，开通畅行会员不需要花钱，畅行会员主要是用于会员用户积累乘车积分、用积分兑换车票等，主要包含积分权益，兑换车票、无票候补和会员活动四大会员权益。这个页面设计得比较简陋，也没有太多价值的内容，可以看出 12306 在用户运营方面比较欠缺。

4. 订单 12306 的订单包含了火车票订单、餐饮订单、保险订单、酒店订单、空铁联运订单、计次定期票订单、约车订单、出站引导服务订单、铁路商城订单、汽车票订单、旅游订单和铁水联运订单多达 12 种订单，从这些订单类型可以看出 12306 的服务特别多。

体验陷阱

这个设计实在太糟糕，严重违反了 7±2 效应。琳琅满目，花枝招展，让用户在这个页面几乎迷失。更糟糕的是，当你有一个非常重要的待支付订单，这个页面竟然没有角标提醒，最终你会因为这个糟糕的设计打乱自己的行程计划。

四、内容服务 内容服务是帮助产品实现用户留存和运营的版块，不过从 12306 的内容设计来看，整个产品的运营手段比较少，所以我把 12306 现有设计的功能拆分为便捷功能和向导功能。

1. 便捷功能 以下这七个功能，对用户而言，是非常便捷、友好的功能，可以帮助用户在出行的旅途中获取很多帮助。

① 车站大屏

「车站大屏」是一个非常贴心的功能，通过这个功能，可以为用户提供车站的实时列车信息，非常方便。大屏详情页可以拆分为三块内容，左上角可以切换全国各地的火车站，头部还有搜索框，为用户提供车次的查询，主体内容是当前车站向西的车次信息，包含发车时间、候车室、检票口和候车状态等。

1）车次详情页

进入列车的「车次详情页」，可以查看当前车次的完整信息，比如检票状态、候车室、检票口和全程停靠站、停留信息。在这个页面，还提供了「关注列车」的功能（关注后并无关注数据，显得很鸡肋），以及直接预订当前车次的入口。

2）车站详情页

「车站详情页」就像一个站点的主页，为用户提供完整的车站信息查询。这个页面可以拆分为四块，头部可以切换其他站点，并提供当前车站的天气情况以及车站基础信息。金刚区位 8 个功能入口，包含车站车次、站内导航、重点旅游、餐饮服务、周边酒店等。中间是当前车站的起售时间和换乘时间，底部是车站附近周边的酒店精选。

迭代建议

这个页面把车站当做一个主体，聚合了一个车站完整的功能，其实挺有创意，但页面隐藏得很深，如果不去拆解，几乎很难发现，很是可惜。我认为完全可以提高权重，升级为一级栏目，代替会员，或者和出行栏目进行整合升级。

② 站内导航

「站内导航」提供目标车站的 LBS 导航，对于乘客来说，到达一个陌生的站点，需要清晰的指引，这是一个非常便捷、温馨的功能，能帮乘客解决很多问题。不过这里有一个莫名其妙的设计，那就是进入这个功能之前，系统提示请摇“8”字校准手机，事实上这里是一个加载动画，但是画面和内容却误导了用户，我甚至每次进入都傻乎乎的摇动手机。

③ 临时身份证

临时身份证是一个非常重要的功能，12306 现在支持 APP 在线申请，极大方便了乘客的出行。申请流程也比较简单，填写个人信息，验证审核通过后，就可以生成电子证照使用。每个人每个月有 3 次申请临时乘车身份证机会。

④ 遗失物品

这是一个非常贴心的功能，如果你在乘车的过程中不小心丢失物品，可以通过这个功能登记，输入你的详细信息就能登记成功。

⑤ 重点旅客

这也是一个非常贴心的功能，主要为老年人、残疾人服务，通过填入你的信息，列车会根据你的情况提供优先进站、协助乘降等服务。

⑥ 爱心版

爱心版就是长辈版，专门为中老年用户设计的版本，在用户中心切换后就可进入爱心版。整个版本设计得非常简洁，操作步骤也比较简单，对中老年用户比较友好。

⑦ 英文版

英文版在用户中心的设置点击语言即可切换，整体的版本设计得直接简洁，用户体验不错。

⑧ 小结

从这个版块可以看出，一个产品如果以用户为中心去设计，是可以为用户带来很大的便捷和愉悦体验。比如像临时身份证这样的功能，过往我们只能提前出发去车站排队办理，但如今 12306 已经把这样的痛点解决，为用户节省了大量的时间。

2. 向导功能 以下 8 个功能，虽然属于出行向导，不过体验下来，感觉用户体验比较差，很多功能完全无法弄懂它的设计目的是什么，显得非常鸡肋。

① 快捷退票

「快捷退票」这个功能的设计，让人摸不着头脑。从操作流程看，首先需要输入用户的详细信息，包括姓名、身份证号码和手机，其次需要进行人脸核验，到了第三步还需要选择车票的日期车次，在最后的退票操作页面，用户点击退款后，没有和用户再次确认就直接退票。整个流程体验下来，非常糟糕。

体验陷阱

这个功能和订单页的退票感受不出来有何区别？如果用户要退款，不如直接去订单页进行退票，操作步骤简单，一目了然。其次不支持自动导入用户的购票信息实在太不方便，需要通过选择车票购买日期和车次，这个设计实在让人生气和愤怒（我在体验的过程中到了第三步只能退回到订单页把购票日期和车次截图下来，又再次重复前面两个步骤才到这个步骤）。

② 联系方式

这也是一个看不懂的功能，进入页面后，需要用户输入乘客的详细信息，但是这个乘客信息和用户在购买车票时候需要添加到乘客信息有什么不同？更糟糕的是，当你把自己的电话号码、身份证信息填入后，系统会显示核验成功，然而当你再一次进入，页面内容还是和之前并无区别，你不知道自己是不是还要重新输一次？

③ 时刻表

「时刻表」主要为乘客提供查询列班车次的出发时间和到站信息，但这个功能「车站大屏」几乎已经包含了，这个功能显得意义不大。

④ 查票价

这个功能非常鸡肋，因为在火车票的售票详情页就可以清晰直观地查询到列车票价信息，相反在这个页面，根本无法看到价格，因为价格的字体大小只有 20px，乘客几乎很难注意到。

⑤ 查代售点

这个功能主要为用户提供全国各地火车票代售点的查询，不过在互联网技术发展到今天，火车票代售点越来越少了。从 12306 采集的信息来看，部分代售点缺少电话等关键信息，对用户来说，比较鸡肋。

⑥ 起售时间

这个功能为用户提供各车站每日的起售时间，属于一个低频功能，可以解决乘客某些极端场景的需求。不过在我体验下来，比如通过此功能查询 1 月 29 日的车票，显示北京站起售时间为 10:00，但是在火车售票版块，我也可以直接购买 1 月 29 日的车票，这让我比较疑惑这个功能的价值在哪里。

⑦ 正晚点

「正晚点」同样是一个鸡肋功能，而且还需要输入准确的车次才能进行查询，车站大屏已经完美可以取代这个功能。

⑧ 列车状态

「列车状态」比正晚点都还鸡肋，让人愤怒，因为你需要输入正确的出发地、到达地和出发时间，对了，还有正确的车次才能进行查询，这样的操作成本比下载 12360APP 都还麻烦。

⑨ 小结

从这个部分的内容拆解和操作体验来看，12360 的产品设计得不够细致和贴心，很多功能就像是硬生生塞进去一样，滥竽充数。其次从他们的产品迭代记录次数可以看出，近 1 年更新时间只有 5 次，也许每一次都是在做加法，没有想过做减法，所以导致这部分的功能显得鸡肋而且有很大缺陷。

五、思考总结 通过对铁路 12306 的全面拆解，接下来我将从内容层、功能层、体验层和视觉层进行总结。

1. 内容层

12306 整个产品的内容设计，用一句话总结，可以归纳为——心有余力而不足。可以看到12306围绕乘客购票、出行的潜在需求场景都设计了对应的服务，比如酒店、约车、点餐、商城等，甚至还有空铁联运、铁水联运这种多场景的组合售票方式，不过在实际的版块内容打造中，则显得比较空洞，体验一般。这个产品，可以说几乎没有创新点，这主要也是由于它是由国有企业设计运营，背景极其复杂，设计目标也飘忽不定。

2. 功能层

在 2015 年之前，铁路 12360 承担了被誉为历史上人口迁移最大的春运的抢票工作，那时候一票难求，春运去 12360 就像是一场噩梦。不过在经过多年的升级和优化以后，目前 12360 的购票效率非常高，经过笔者多次的测试和调研，目前通过 12360 购票已经不再是难事。而且还设计了候补抢票这样的功能，帮助用户解决买票痛点，可谓非常贴心、友好。

3. 体验层

铁路 12306 的用户体验，非常一般，我在这次的 产品拆解 中至少侦查出了 20 条体验陷阱，这些陷阱都会给用户带来极其糟糕和愤怒的体验。比如让我像个傻瓜摇动手机的站内导航载入页，这完全就是把用户当成傻子一样看待，其次还有一堆数不清的鸡肋功能，对用户的操作体验造成了严重的干扰。我甚至认为爱心版和英文版比标准版使用起来更愉悦，更能减少我的焦虑。

4. 视觉层

作为一个 UI 设计师，在拆解 12306 的产品过程中，我对整个产品的设计感到绝望。首先，没有做到统一性，整个产品毫无设计规范，比如卡片的圆角、品牌色、版块间距根本不统一，这样的视觉体验一眼望去就非常糟糕；其次，图标、活动图、橱窗图以及详情页的设计毫无美感，满满的山寨 APP 风格，特别是订单页的 ICON，花花绿绿、琳琅满目，连最基础的统一都没有做到。

六、后记 作为一款国民级用户 APP，铁路 12306 仿佛陪伴了 80、90 后的青春。还记得 10 年前老家是黑龙江和河北的大学室友，每年春运开启之前就为了回家的火车票犯愁，不仅要去遥远的火车站排队，很多时候还可能空手而回，那便是最初对 12306 的记忆。

如今十年过去了，12306 解决了亿万人的出行抢票需求，让我们在春运的路上，可以轻松购买一张回家的票。但下一个十年，我更希望 12360 的产品团队，可以重视用户体验设计，让我们不再掉入那些体验陷阱。

参考文献：

易观千帆-铁路 12360APP 数据分析 七麦数据-铁路 12360APP 数据分析 中国铁路 12306 官网 尼尔森十大原则 《设计的陷阱：用户体验设计案例透析》- 乔纳森·沙利亚特 欢迎关注作者微信公众号：「设计大侦探」

更多设计规范的相关教程：案例实操！从零开始教你构建产品颜色规范前言 这一次的北农商银行的项目，是在企业版手机银行 App 上加入企业 OA 的功能。阅读文章 > 一、如何「理解」交互规范说起设计规范，大家应该都不陌生，一个成熟的设计规范对 产品设计、研发开发、用户使用 都有着重要的指导作用：产品设计：保障...

更多 设计规范 的相关教程：

案例实操！从零开始教你构建产品颜色规范 前言 这一次的北农商银行的项目，是在企业版手机银行 App 上加入企业 OA 的功能。

阅读文章 >

一、如何「理解」交互规范 说起设计规范，大家应该都不陌生，一个成熟的设计规范对 产品设计、研发开发、用户使用 都有着重要的指导作用：

产品设计：保障产品内不同模块的设计一致性，同时提高不同 设计师 间的设计、协作效率

研发开发：通过定义的标准规范，提高流程、组件的复用率，提高整体开发效率

用户使用：让用户能够在产品全局感受到统一且完整的体验，降低使用成本和学习难度

而一个完整的设计规范一般分成「视觉」「交互」两个部分合并组成，在全局原则的指导下，侧重不同的维度和内容分别展开规范的定义，最后再合到一起形成一份完整的设计规范。

从用户体验要素来看，视觉主要是在「表现层」「框架层」进行规范的统一，主要包括：形、色、字、构、质、动 六个层面。

而交互角度相对抽象，主要针对于产品的「结构层」「框架层」入手，定义统一的交互规范，指导页面、流程搭建和组件使用规则。包括：全局原则、页面布局、通用流程、标准组件、文案规范。

整体维度呈“从抽象到具体的总分关系”，不仅对产品的各个维度都有具体的交互指导，而且不仅能保证长期使用，避免重复返工；同时也便于囊括后续的迭代内容。而这些内容，就是我们通常定义的交互规范，也是交互参与定义设计规范的发力点。

有了对于基本认识和搭建框架之后，我们来详细聊聊如何定义交互规范具体内容。

二、不同阶段应该定义哪些交互规范？ 产品有不同发展阶段，设计规范同样也有，不同阶段下的产品目标和规范需要覆盖的内容都不尽相同。我们要既要避免做多，保证投入产出比最大化；同时也要构建一个合理的规范迭代思路。

产品探索初期：

该阶段的产品核心目标是「验证产品或商业模型」，业务需求都是小步快跑、频繁迭代。产品处于从 0 到 1 的野蛮生长状态，存在着“先满足功能，再优化体验”的情况，导致该阶段的产品体验往往不太过关。

搭建目的：通过定义原则，梳理关键页面和流程，搭建基本的规范框架。既让团队对产品有统一的设计价值观和认知判断；从页面到流程，又能对应设计参照标准；同时业务可以在规定的框架下发展，不仅让产品体验的根基牢固，而且不会限制功能设计自由。

搭建范围：「全局原则」「页面布局」「通用流程」

产品稳定发展期：

该阶段的产品基本形态已稳定，也形成了初步的模型结构。后续迭代是在现有结构的基础上，进行增加或优化功能。虽然探索期定义了产品原则、布局和流程，但探索期产品的自由生长，会导致不少设计细节不一致，从而影响了产品整体的体验和效率。

搭建目的：通过回溯整理过往设计，沉淀优化成完整的交互规范。再根据规范统一产品体验，进一步优化流程和效率， 让整个产品体验达到相对稳定的状态。

搭建范围：「全局原则」「页面布局」「通用流程」「标准组件」「文案规范」

三、如何「定义」交互规范 1. 定义交互规范的原则

与行业通用的设计规范（如 TDesign、AntDesign）“大而全”“通用”的特质不同，一般团队内构建的设计规范都是源于某一个产品或业务，主要的特点是“专精”。专注于「业务」本身，主要是「团队内成员使用」，追求的是投入产出比最大化。

基于此背景，当我们在定义「交互规范」时，有三点原则：

原则一：保持规范的业务性。设计规范既要贴合业务场景归纳完整，同时又要避免凭空定义脱离实际。故我们定义时要代入业务规划，尽量富有前瞻性，这样定义的规范不仅能覆盖当前需要，同时后续也能更好地迭代。

原则二：保持规范的专注性。有的放矢，明确内容优先级，避免盲目追求大而全和形式主义。对于优先级高（覆盖面广、复用率高）的关键内容重点描述；优先级低（逻辑简单、认知一致）的内容可简要描述，避免事无巨细降低效率。

原则三：保持规范的生长性。设计规范不是一成不变，而是跟随业务发展不断迭代完善的，所以需要阶段性的回顾规范。遇到规范未能覆盖或无法指导设计的地方，及时修订同步团队，避免墨守成规，固步自封。

最后，还有一点建议：在定义规范时，可以站在前人肩膀，适度参考行业设计规范，能复用用的直接参考，具有业务特性的再集合业务综合考虑，使整个规范制定效率更高，科学性、指导性更强。

在找到自己当前所属的产品阶段、明确要建立哪些设计规范后，具体应该如何进行落地执行呢？建议从以下 4 个步骤入手。

2. 第一步：定义规范分类

如上文中提到，一个完整的交互规范分为：「全局原则」「页面布局」「通用流程」「标准组件」「文案规范」五个维度，但每个维度具体含有哪些内容，都是不一样的。仍然需要根据实际业务需要去定义，这样才能尽量保证没有遗漏，也更好为下一环节评估工作量。

通用的做法有两种：

方式一：整理业务场景下不同的页面、流程等，并进行抽象合并。「全局原则」「页面框架」和「通用流程」具有强业务导向，可以采用此方式。

以「页面布局」为例，就需要将关键页面按统一颗粒度收集（按层级或按场景等）。

方式二：参考行业通用规范的定义，先罗列完整，再根据产品实际业务需要进行增删改。

「标准组件」「文案规范」已经在行业内有了不少科学的目录和沉淀，可以采用此方式，例如下图组件的梳理。

最后可产出如下图的规范分类和具体内容。（可以列的不是很全，后续补充具体部分内容时持续维护这张表。）

3. 第二步：确定分工排期

有了具体内容作为依据，便可以根据此进行排期分工。

分工原则：推荐按规范分类进行分工，一个大的分类由一人负责，保证专注性。同时团队交互最好都能参与，保证后续对规范更好的沿用。

排期原则：「定义规范」和「输出需求」两者经常要并行处理，此时提高效率，控制投入产出比就很重要了，我们需要明确优先级，先做什么后做什么。有 3 个思路可以综合参考：

并行的思路：在定义完「全局原则」后，剩下的页面、流程、组件、文案都可考虑并行定义，彼此之间没有明确的依赖项。 迭代的思路：近期有迭代的版本，如：即将改版的模块、反馈较多体验较差的模块，其中涉及到的页面框架、组件可优先定义。 复用的思路：某些典型页面、典型流程、典型组件涉及面广，许多需求的设计都将借鉴参考，亦可优先抽象定义。

4. 第三步：统一撰写原则

设计规范是由不同的设计师一起合作完成，所以我们尽量在一开始，就需要统一规范的撰写和展现形式。以此提高后续合并的效率，同时又能保证其阅读体验，让其它使用者能够更好遵循。对此，我们定义了几个关键原则：

目录完整：高效检索，快速让使用者找到需要的内容。

原则清晰：抽象的内容往往含有许多概念和原则，需要让使用者先理解再参考，才能保证后续使用正确、举一反三

多图少字：没有人喜欢看字，图片更容易吸收

搭配案例：让使用者更好的代入场景，理解和使用规范。

5. 第四步：定义具体规范 ★

前面铺垫了许多流程性的内容，就像我们日常输出设计需求一样，大家或多或少在工作中都有遇到过。接下来，将重点聊聊，我们具体的内容应该如何定义。依然分成 5 个环节一一讲解。

① 全局原则

目标：明确影响整站各个模块、各个页面设计的原则和规范，指导我们后续各种规范的定义和设计。

而全局原则也分两种，设计原则和业务原则两种。

设计原则：每个完整的设计规范都需要包含的内容，如：设计价值观、设计准则。看似相对务虚的东西，实则影响后续整个设计方向。这个部分需要和产品经理、视觉同学结合产品的定位和发展共同提炼。具体定义方式可参考：

你为什么需要设计原则？ https://zhuanlan.zhihu.com/p/246430795

业务原则：源自实际业务本身产生的问题，行业内没有标准定义。需要具体问题具体分析，推导出具体目标，最后再统一制定规范解决业务问题。

举一个实际的例子便于理解：全局 Z 轴定义

明确问题： 整站层级高度没有统一定义，导致不同控件间相互遮挡，没有统一规则。需要定义全局 Z 轴规范，统一不同场景、页面、组件的高度。

梳理借鉴： 统一梳理相关场景、页面、组件，明确需要定义的范围。再查找行业规范，有无参考借鉴。（如 Z 轴定义，可参考 Material Design）

定义规范： 最后通过最具代表性的场景进行展示

全局原则没有维度高低之分，例如可能全局涉及到的「右键菜单」也能被定义成全局原则。不必盲从行业交互规范内庞大且抽象的原则。只要能够实际解决你业务的需要，能够覆盖整站各个部分，都可以纳为全局原则。

② 页面框架

目标：梳理整站所有关键页面，整理抽象成相对固定的 框架布局&功能分区 让后续设计新页面时能遵循规律、找到参考。

页面框架的搭建一般由四个步骤组成：

第一步，收集页面：根据早期定义的规范分类，收集展示所有相同层级的页面。这些在定义规范分类时，应该已收集完成。

第二步，框架布局：提取共性，搭建框架和布局，明确页面大的区域划分和结构。（TDesign 布局详细指南）

第三步，功能分区：基于框架布局，细化区域内具体的业务功能属性，如：导航区、操作区等。这部分是页面框架内最接地气最具指导性的内容，同时也是最难定义的。主要原因如下：

定义太细，担心缺乏前瞻性限制后续设计： 定义越细灵活度就低，后续改动和限制性就越高。为避免这种问题，推荐在定义关键页面时，按输出设计稿的思路：整理「信息架构」→定义「功能分区」，这样后续拓展性和前瞻性更高

定义太粗，无法定义出明确的功能分区，担心缺乏实际指导意义： 同一区域有些页面展示操作，有些展示导航。从规范角度好像不应该，但实际套在各个业务内却又合理。当遇到这种无法达成一致的情况时，建议就不定义具体的“功能分区”，避免因为盲目追求统一而限制实际设计。而可以采用“穷举举例”的方式，将该布局下可承载的内容均展示出来，既可以起到参考意义，又能供后续沿用达到统一的效果。

第四步，加入案例：将刚刚定义的布局框架与功能分区，与实际案例完整结合，便于后续理解和沿用。

③ 通用流程

目标：梳理整站所有流程，对那些可复用的流程进行整理、抽象、封装。让后续设计师和研发能够直接沿用。

“可复用的流程”是指：在多个场景下，不改变其原有业务逻辑的情况下能够“既插既用”。例如：登录注册流程、扫码关注流程、分享流程等等。往往一个通用流程中，不同的步骤亦可以打散，重新拼装成不同的流程，以适配具体的场景使用。

下面就举一个具体的例子：注册流程。一般完整的注册流程如下，通过不同的入口触发后进入，通过一定步骤后注册成功。

当业务有了进一步需求，需要通过插件快捷登录时，步骤便可以重新组合，再适配具体的场景。

对于设计师要做的，就是识别具体的通用流程有哪些，并将其给「步骤化」串联起来。当有新的需求来的时候，判断能直接复用，还是需要重新组装，亦或是新增步骤。

而这样拼装的思维，恰好对应了研发搭建流程时的思路。通用流程对于他们就是将不同的步骤进行组合起来。当遇到不同场景时，再以搭积木的方式进行拼装。

而具体的搭建步骤也是由两个步骤组成：1.第一步，收集流程；2.第二步，抽象步骤。具体方式上面已提到，就不过多赘述。

④ 标准组件

目标：将产品内使用过的组件整理成“标准组件”，统一定义规则，让后续设计和研发时能直接调取组件，提高设计和研发效率。

其实行业中已经有很多通用组件，可以快速调用。但由于不同业务的复杂度不一样，也会生成自己独特的业务定制组件。同时，产品持续在迭代，也很难能抽出时间单独定义组件。故基于这个背景，结合“需求设计流程”和“组件整理流程”，有两种高效定义标准组件的方式。

方式一：调用行业通用组件

第一步，业务设计确定基本逻辑。

第二步，挑选行业通用组件，增加业务规则。（一般开发在搭建产品初期时，便会选择一家行业组件进行使用，而组件也仅能在这家提供的组件中挑选）

第三步，视觉根据全局视觉原则，设计新的样式。

第四步，将交互规则、视觉样式合并，统一成标准组件。基础规则直接引用行业组件已定义的内容，场景规则按需补充。

方式二：业务定制组件

第一步，进行正常的业务设计。交互根据需求搭建原型，视觉设计具体样式。

第二步，判断组件是否通用，是否可复用到其它场景。例如：分享对话框，不同的内容分享都能够用得到，像这种就是可抽象成标准组件的典型案例。

第三步，定义标准组件规范。简单的组件展示具体样式即可，团队内设计师基本认知一致，无需重新学习。而复杂的组件为保证后续的正确复用，建议包括以下内容：

1）更新日志：因为组件是变动最多的规范，需要明确具体的版本和改动点

2）组件定义：简要介绍用途和使用规则，如对话框定义：必须是用户主动触发时才出现、主要使用在二次确认场景需用户确认后才消失等。

3）组件结构：介绍组件构成、功能分区、分区定义，详细展示不同分区内具体信息和对应规则。

4）使用场景：详细区分多种场景下不同的使用方式，明确给予使用指导

5）设计方案：备选，如果比较复杂的组件且涉及到流程中的关键环节，建议可以考虑复制一个完整的设计方案嵌入其中，便于团队成员理解沿用。

第四步，跟研发沟通，封装成标准组件。这一步是非常关键也是重要的一步，这将大大提高我们后续的组件复用率，降低重复性走查的耗时。推荐使用 CoDesign-设计规范功能点击体验 CoDesign 小程序，上传「组件库」后能够按目录自动生成规范文档，同时将自动标注和切图，大大提高研发开发标准组件的效率。

⑤ 文案规范

目标：将产品内各个场景内文案进行整理，帮助业务更准确表达意图，让设计师更好沿用，同时让用户感受到一致的产品风格。

文案就像“产品对用户说的话”，不同的人说话方式可能并不一样，没有绝对的对错。但清晰明了的语言表述，让用户更容易理解；符合产品气质的语气，能拉近产品与用户的距离；统一的文案描述，又能让用户在整站一致的语境下体验产品。

需要定义的内容，包括但不限于以下 3 个部分：

语言： 语言是指我们通过什么样的规则来组合文字，让它形成一种惯用的表达方式。例如语句简洁明了，不过度修饰，避免重复描述，使用简洁清晰的语序，帮助用户快速理解；例如用词精准易懂，使用简单、易于用户理解的词汇，避免使用专业术语，或过于口语化的表述。单纯说规则可能太虚了，在实际定义规范时，还要如下图所示，加上实际案例示意避免误解。

语气： 语气是可以体现产品气质和风格，定义时要结合全局原则内的设计价值观，明确产品性格后才能更好的定义出符合产品的语气风格。同一种语境下不同风格的文案就有明显差异。如网络异常时：

俏皮的文案可能是：网络开小差，请稍等一下 而正经的文案可能是：网络异常，稍后重试。

书写规则： 主要包括常用词汇的书写方式，例如「日期简写方式」「英文大小写方式」「使用全角标点符号」等。以及易错的词汇短语示意，例如「账号还是帐号」、「登陆还是登录」等。这是团队设计师最容易沿用遵循的，也是接地气的部分。

具体使用指南： 以上「语言」「语气」「书写规则」3 个部分，是构成全局文案的基础规范。如果有充足时间的团队，可以考虑再结合实际业务，分别定义不同场景和组件下具体的使用指南。如下图：

最后再附上各个行业内定义文案规范例子，供大家参考：

B 端产品文案指南： https://www.yuque.com/linyecx/dragon AntDesign 文案规范： https://ant.design/docs/spec/copywriting-cn Clarity Design 文案规范： https://design.teambition.com/doc/introduction 国家标点符号用法： http://www.moe.gov.cn/ewebeditor 四、如何「推进」交互规范 定义完交互规范，后续将考虑如何将其顺利的推进落地。本文罗列几个推进时重点需要注意的事项。

1. 团队评审，达成一致

规范的定义不是一个人的事情，而是一个团队事情，它将关系到每个后续每个人的设计产出。所以在制定规范期间，应该定期在团队中进行设计评审。这不仅是评审设计好坏的过程，更是让团队达成一致、大家更深入了解如何使用规范的过程。

注意，参与评审的人不止是设计师，当然也包括具体的业务开发，很多时候我们会得到新的思路和启发。

2. 善用工具，沉淀规范

规范搭建的过程中，有很多痛点：组件库需要多人参与维护和创建，容易造成冲突内容丢失；同时沉淀规范文档时，需要图片逐一复制、粘贴到文档内，更新时又要重复一遍这样的操作。而这些问题，使用 CoDesign 设计规范功能，就可以有效的解决提高效率。

首先组件库支持多人同时维护，差量更新；其次组件库上传后，可以自动生成/更新规范文档，避免反复编写文档，整体提效；最后当组件库有新版本时，会自动提醒团队内其他成员进行更新，保障团队设计一致性。

3. 运用规范，指导设计

搭建规范的过程其实也是整体设计走查的过程，我们会发现有些设计可能有体验问题，或不符合规范。每当这个时候，我们就需要对这些设计进行标记。在规范定义完成之后，迭代排期优化线上的设计。

而在实际设计使用过程中，可能又会发现规范无法满足的地方，此时又可以展开新一轮的提炼和总结，再反哺规范，形成正向循环促使设计和规范不断完善。

五、写在最后 在前言的时候就有提到「交互规范」只是整体规范中的一部分，最终是需要与视觉合并成一份统一的设计规范，指导后续具体的设计。具体的合并方式，在定义的章节内已有提到，就不再赘述。

最后，我一直认为好的设计规范是提高设计效率，引导设计方向，而不是因为设计规范而局限了具体业务的设计，如果这样，还不如不去定义。

欢迎关注作者「腾讯CDC体验设计」的微信公众号：

更多设计规范的相关教程：案例实操！从零开始教你构建产品颜色规范前言 这一次的北农商银行的项目，是在企业版手机银行 App 上加入企业 OA 的功能。阅读文章 > 一、如何「理解」交互规范说起设计规范，大家应该都不陌生，一个成熟的设计规范对 产品设计、研发开发、用户使用 都有着重要的指导作用：产品设计：保障...

更多 设计规范 的相关教程：

案例实操！从零开始教你构建产品颜色规范 前言 这一次的北农商银行的项目，是在企业版手机银行 App 上加入企业 OA 的功能。

阅读文章 >

一、如何「理解」交互规范 说起设计规范，大家应该都不陌生，一个成熟的设计规范对 产品设计、研发开发、用户使用 都有着重要的指导作用：

产品设计：保障产品内不同模块的设计一致性，同时提高不同 设计师 间的设计、协作效率

研发开发：通过定义的标准规范，提高流程、组件的复用率，提高整体开发效率

用户使用：让用户能够在产品全局感受到统一且完整的体验，降低使用成本和学习难度

而一个完整的设计规范一般分成「视觉」「交互」两个部分合并组成，在全局原则的指导下，侧重不同的维度和内容分别展开规范的定义，最后再合到一起形成一份完整的设计规范。

从用户体验要素来看，视觉主要是在「表现层」「框架层」进行规范的统一，主要包括：形、色、字、构、质、动 六个层面。

而交互角度相对抽象，主要针对于产品的「结构层」「框架层」入手，定义统一的交互规范，指导页面、流程搭建和组件使用规则。包括：全局原则、页面布局、通用流程、标准组件、文案规范。

整体维度呈“从抽象到具体的总分关系”，不仅对产品的各个维度都有具体的交互指导，而且不仅能保证长期使用，避免重复返工；同时也便于囊括后续的迭代内容。而这些内容，就是我们通常定义的交互规范，也是交互参与定义设计规范的发力点。

有了对于基本认识和搭建框架之后，我们来详细聊聊如何定义交互规范具体内容。

二、不同阶段应该定义哪些交互规范？ 产品有不同发展阶段，设计规范同样也有，不同阶段下的产品目标和规范需要覆盖的内容都不尽相同。我们要既要避免做多，保证投入产出比最大化；同时也要构建一个合理的规范迭代思路。

产品探索初期：

该阶段的产品核心目标是「验证产品或商业模型」，业务需求都是小步快跑、频繁迭代。产品处于从 0 到 1 的野蛮生长状态，存在着“先满足功能，再优化体验”的情况，导致该阶段的产品体验往往不太过关。

搭建目的：通过定义原则，梳理关键页面和流程，搭建基本的规范框架。既让团队对产品有统一的设计价值观和认知判断；从页面到流程，又能对应设计参照标准；同时业务可以在规定的框架下发展，不仅让产品体验的根基牢固，而且不会限制功能设计自由。

搭建范围：「全局原则」「页面布局」「通用流程」

产品稳定发展期：

该阶段的产品基本形态已稳定，也形成了初步的模型结构。后续迭代是在现有结构的基础上，进行增加或优化功能。虽然探索期定义了产品原则、布局和流程，但探索期产品的自由生长，会导致不少设计细节不一致，从而影响了产品整体的体验和效率。

搭建目的：通过回溯整理过往设计，沉淀优化成完整的交互规范。再根据规范统一产品体验，进一步优化流程和效率， 让整个产品体验达到相对稳定的状态。

搭建范围：「全局原则」「页面布局」「通用流程」「标准组件」「文案规范」

三、如何「定义」交互规范 1. 定义交互规范的原则

与行业通用的设计规范（如 TDesign、AntDesign）“大而全”“通用”的特质不同，一般团队内构建的设计规范都是源于某一个产品或业务，主要的特点是“专精”。专注于「业务」本身，主要是「团队内成员使用」，追求的是投入产出比最大化。

基于此背景，当我们在定义「交互规范」时，有三点原则：

原则一：保持规范的业务性。设计规范既要贴合业务场景归纳完整，同时又要避免凭空定义脱离实际。故我们定义时要代入业务规划，尽量富有前瞻性，这样定义的规范不仅能覆盖当前需要，同时后续也能更好地迭代。

原则二：保持规范的专注性。有的放矢，明确内容优先级，避免盲目追求大而全和形式主义。对于优先级高（覆盖面广、复用率高）的关键内容重点描述；优先级低（逻辑简单、认知一致）的内容可简要描述，避免事无巨细降低效率。

原则三：保持规范的生长性。设计规范不是一成不变，而是跟随业务发展不断迭代完善的，所以需要阶段性的回顾规范。遇到规范未能覆盖或无法指导设计的地方，及时修订同步团队，避免墨守成规，固步自封。

最后，还有一点建议：在定义规范时，可以站在前人肩膀，适度参考行业设计规范，能复用用的直接参考，具有业务特性的再集合业务综合考虑，使整个规范制定效率更高，科学性、指导性更强。

在找到自己当前所属的产品阶段、明确要建立哪些设计规范后，具体应该如何进行落地执行呢？建议从以下 4 个步骤入手。

2. 第一步：定义规范分类

如上文中提到，一个完整的交互规范分为：「全局原则」「页面布局」「通用流程」「标准组件」「文案规范」五个维度，但每个维度具体含有哪些内容，都是不一样的。仍然需要根据实际业务需要去定义，这样才能尽量保证没有遗漏，也更好为下一环节评估工作量。

通用的做法有两种：

方式一：整理业务场景下不同的页面、流程等，并进行抽象合并。「全局原则」「页面框架」和「通用流程」具有强业务导向，可以采用此方式。

以「页面布局」为例，就需要将关键页面按统一颗粒度收集（按层级或按场景等）。

方式二：参考行业通用规范的定义，先罗列完整，再根据产品实际业务需要进行增删改。

「标准组件」「文案规范」已经在行业内有了不少科学的目录和沉淀，可以采用此方式，例如下图组件的梳理。

最后可产出如下图的规范分类和具体内容。（可以列的不是很全，后续补充具体部分内容时持续维护这张表。）

3. 第二步：确定分工排期

有了具体内容作为依据，便可以根据此进行排期分工。

分工原则：推荐按规范分类进行分工，一个大的分类由一人负责，保证专注性。同时团队交互最好都能参与，保证后续对规范更好的沿用。

排期原则：「定义规范」和「输出需求」两者经常要并行处理，此时提高效率，控制投入产出比就很重要了，我们需要明确优先级，先做什么后做什么。有 3 个思路可以综合参考：

并行的思路：在定义完「全局原则」后，剩下的页面、流程、组件、文案都可考虑并行定义，彼此之间没有明确的依赖项。 迭代的思路：近期有迭代的版本，如：即将改版的模块、反馈较多体验较差的模块，其中涉及到的页面框架、组件可优先定义。 复用的思路：某些典型页面、典型流程、典型组件涉及面广，许多需求的设计都将借鉴参考，亦可优先抽象定义。

4. 第三步：统一撰写原则

设计规范是由不同的设计师一起合作完成，所以我们尽量在一开始，就需要统一规范的撰写和展现形式。以此提高后续合并的效率，同时又能保证其阅读体验，让其它使用者能够更好遵循。对此，我们定义了几个关键原则：

目录完整：高效检索，快速让使用者找到需要的内容。

原则清晰：抽象的内容往往含有许多概念和原则，需要让使用者先理解再参考，才能保证后续使用正确、举一反三

多图少字：没有人喜欢看字，图片更容易吸收

搭配案例：让使用者更好的代入场景，理解和使用规范。

5. 第四步：定义具体规范 ★

前面铺垫了许多流程性的内容，就像我们日常输出设计需求一样，大家或多或少在工作中都有遇到过。接下来，将重点聊聊，我们具体的内容应该如何定义。依然分成 5 个环节一一讲解。

① 全局原则

目标：明确影响整站各个模块、各个页面设计的原则和规范，指导我们后续各种规范的定义和设计。

而全局原则也分两种，设计原则和业务原则两种。

设计原则：每个完整的设计规范都需要包含的内容，如：设计价值观、设计准则。看似相对务虚的东西，实则影响后续整个设计方向。这个部分需要和产品经理、视觉同学结合产品的定位和发展共同提炼。具体定义方式可参考：

你为什么需要设计原则？ https://zhuanlan.zhihu.com/p/246430795

业务原则：源自实际业务本身产生的问题，行业内没有标准定义。需要具体问题具体分析，推导出具体目标，最后再统一制定规范解决业务问题。

举一个实际的例子便于理解：全局 Z 轴定义

明确问题： 整站层级高度没有统一定义，导致不同控件间相互遮挡，没有统一规则。需要定义全局 Z 轴规范，统一不同场景、页面、组件的高度。

梳理借鉴： 统一梳理相关场景、页面、组件，明确需要定义的范围。再查找行业规范，有无参考借鉴。（如 Z 轴定义，可参考 Material Design）

定义规范： 最后通过最具代表性的场景进行展示

全局原则没有维度高低之分，例如可能全局涉及到的「右键菜单」也能被定义成全局原则。不必盲从行业交互规范内庞大且抽象的原则。只要能够实际解决你业务的需要，能够覆盖整站各个部分，都可以纳为全局原则。

② 页面框架

目标：梳理整站所有关键页面，整理抽象成相对固定的 框架布局&功能分区 让后续设计新页面时能遵循规律、找到参考。

页面框架的搭建一般由四个步骤组成：

第一步，收集页面：根据早期定义的规范分类，收集展示所有相同层级的页面。这些在定义规范分类时，应该已收集完成。

第二步，框架布局：提取共性，搭建框架和布局，明确页面大的区域划分和结构。（TDesign 布局详细指南）

第三步，功能分区：基于框架布局，细化区域内具体的业务功能属性，如：导航区、操作区等。这部分是页面框架内最接地气最具指导性的内容，同时也是最难定义的。主要原因如下：

定义太细，担心缺乏前瞻性限制后续设计： 定义越细灵活度就低，后续改动和限制性就越高。为避免这种问题，推荐在定义关键页面时，按输出设计稿的思路：整理「信息架构」→定义「功能分区」，这样后续拓展性和前瞻性更高

定义太粗，无法定义出明确的功能分区，担心缺乏实际指导意义： 同一区域有些页面展示操作，有些展示导航。从规范角度好像不应该，但实际套在各个业务内却又合理。当遇到这种无法达成一致的情况时，建议就不定义具体的“功能分区”，避免因为盲目追求统一而限制实际设计。而可以采用“穷举举例”的方式，将该布局下可承载的内容均展示出来，既可以起到参考意义，又能供后续沿用达到统一的效果。

第四步，加入案例：将刚刚定义的布局框架与功能分区，与实际案例完整结合，便于后续理解和沿用。

③ 通用流程

目标：梳理整站所有流程，对那些可复用的流程进行整理、抽象、封装。让后续设计师和研发能够直接沿用。

“可复用的流程”是指：在多个场景下，不改变其原有业务逻辑的情况下能够“既插既用”。例如：登录注册流程、扫码关注流程、分享流程等等。往往一个通用流程中，不同的步骤亦可以打散，重新拼装成不同的流程，以适配具体的场景使用。

下面就举一个具体的例子：注册流程。一般完整的注册流程如下，通过不同的入口触发后进入，通过一定步骤后注册成功。

当业务有了进一步需求，需要通过插件快捷登录时，步骤便可以重新组合，再适配具体的场景。

对于设计师要做的，就是识别具体的通用流程有哪些，并将其给「步骤化」串联起来。当有新的需求来的时候，判断能直接复用，还是需要重新组装，亦或是新增步骤。

而这样拼装的思维，恰好对应了研发搭建流程时的思路。通用流程对于他们就是将不同的步骤进行组合起来。当遇到不同场景时，再以搭积木的方式进行拼装。

而具体的搭建步骤也是由两个步骤组成：1.第一步，收集流程；2.第二步，抽象步骤。具体方式上面已提到，就不过多赘述。

④ 标准组件

目标：将产品内使用过的组件整理成“标准组件”，统一定义规则，让后续设计和研发时能直接调取组件，提高设计和研发效率。

其实行业中已经有很多通用组件，可以快速调用。但由于不同业务的复杂度不一样，也会生成自己独特的业务定制组件。同时，产品持续在迭代，也很难能抽出时间单独定义组件。故基于这个背景，结合“需求设计流程”和“组件整理流程”，有两种高效定义标准组件的方式。

方式一：调用行业通用组件

第一步，业务设计确定基本逻辑。

第二步，挑选行业通用组件，增加业务规则。（一般开发在搭建产品初期时，便会选择一家行业组件进行使用，而组件也仅能在这家提供的组件中挑选）

第三步，视觉根据全局视觉原则，设计新的样式。

第四步，将交互规则、视觉样式合并，统一成标准组件。基础规则直接引用行业组件已定义的内容，场景规则按需补充。

方式二：业务定制组件

第一步，进行正常的业务设计。交互根据需求搭建原型，视觉设计具体样式。

第二步，判断组件是否通用，是否可复用到其它场景。例如：分享对话框，不同的内容分享都能够用得到，像这种就是可抽象成标准组件的典型案例。

第三步，定义标准组件规范。简单的组件展示具体样式即可，团队内设计师基本认知一致，无需重新学习。而复杂的组件为保证后续的正确复用，建议包括以下内容：

1）更新日志：因为组件是变动最多的规范，需要明确具体的版本和改动点

2）组件定义：简要介绍用途和使用规则，如对话框定义：必须是用户主动触发时才出现、主要使用在二次确认场景需用户确认后才消失等。

3）组件结构：介绍组件构成、功能分区、分区定义，详细展示不同分区内具体信息和对应规则。

4）使用场景：详细区分多种场景下不同的使用方式，明确给予使用指导

5）设计方案：备选，如果比较复杂的组件且涉及到流程中的关键环节，建议可以考虑复制一个完整的设计方案嵌入其中，便于团队成员理解沿用。

第四步，跟研发沟通，封装成标准组件。这一步是非常关键也是重要的一步，这将大大提高我们后续的组件复用率，降低重复性走查的耗时。推荐使用 CoDesign-设计规范功能点击体验 CoDesign 小程序，上传「组件库」后能够按目录自动生成规范文档，同时将自动标注和切图，大大提高研发开发标准组件的效率。

⑤ 文案规范

目标：将产品内各个场景内文案进行整理，帮助业务更准确表达意图，让设计师更好沿用，同时让用户感受到一致的产品风格。

文案就像“产品对用户说的话”，不同的人说话方式可能并不一样，没有绝对的对错。但清晰明了的语言表述，让用户更容易理解；符合产品气质的语气，能拉近产品与用户的距离；统一的文案描述，又能让用户在整站一致的语境下体验产品。

需要定义的内容，包括但不限于以下 3 个部分：

语言： 语言是指我们通过什么样的规则来组合文字，让它形成一种惯用的表达方式。例如语句简洁明了，不过度修饰，避免重复描述，使用简洁清晰的语序，帮助用户快速理解；例如用词精准易懂，使用简单、易于用户理解的词汇，避免使用专业术语，或过于口语化的表述。单纯说规则可能太虚了，在实际定义规范时，还要如下图所示，加上实际案例示意避免误解。

语气： 语气是可以体现产品气质和风格，定义时要结合全局原则内的设计价值观，明确产品性格后才能更好的定义出符合产品的语气风格。同一种语境下不同风格的文案就有明显差异。如网络异常时：

俏皮的文案可能是：网络开小差，请稍等一下 而正经的文案可能是：网络异常，稍后重试。

书写规则： 主要包括常用词汇的书写方式，例如「日期简写方式」「英文大小写方式」「使用全角标点符号」等。以及易错的词汇短语示意，例如「账号还是帐号」、「登陆还是登录」等。这是团队设计师最容易沿用遵循的，也是接地气的部分。

具体使用指南： 以上「语言」「语气」「书写规则」3 个部分，是构成全局文案的基础规范。如果有充足时间的团队，可以考虑再结合实际业务，分别定义不同场景和组件下具体的使用指南。如下图：

最后再附上各个行业内定义文案规范例子，供大家参考：

B 端产品文案指南： https://www.yuque.com/linyecx/dragon AntDesign 文案规范： https://ant.design/docs/spec/copywriting-cn Clarity Design 文案规范： https://design.teambition.com/doc/introduction 国家标点符号用法： http://www.moe.gov.cn/ewebeditor 四、如何「推进」交互规范 定义完交互规范，后续将考虑如何将其顺利的推进落地。本文罗列几个推进时重点需要注意的事项。

1. 团队评审，达成一致

规范的定义不是一个人的事情，而是一个团队事情，它将关系到每个后续每个人的设计产出。所以在制定规范期间，应该定期在团队中进行设计评审。这不仅是评审设计好坏的过程，更是让团队达成一致、大家更深入了解如何使用规范的过程。

注意，参与评审的人不止是设计师，当然也包括具体的业务开发，很多时候我们会得到新的思路和启发。

2. 善用工具，沉淀规范

规范搭建的过程中，有很多痛点：组件库需要多人参与维护和创建，容易造成冲突内容丢失；同时沉淀规范文档时，需要图片逐一复制、粘贴到文档内，更新时又要重复一遍这样的操作。而这些问题，使用 CoDesign 设计规范功能，就可以有效的解决提高效率。

首先组件库支持多人同时维护，差量更新；其次组件库上传后，可以自动生成/更新规范文档，避免反复编写文档，整体提效；最后当组件库有新版本时，会自动提醒团队内其他成员进行更新，保障团队设计一致性。

3. 运用规范，指导设计

搭建规范的过程其实也是整体设计走查的过程，我们会发现有些设计可能有体验问题，或不符合规范。每当这个时候，我们就需要对这些设计进行标记。在规范定义完成之后，迭代排期优化线上的设计。

而在实际设计使用过程中，可能又会发现规范无法满足的地方，此时又可以展开新一轮的提炼和总结，再反哺规范，形成正向循环促使设计和规范不断完善。

五、写在最后 在前言的时候就有提到「交互规范」只是整体规范中的一部分，最终是需要与视觉合并成一份统一的设计规范，指导后续具体的设计。具体的合并方式，在定义的章节内已有提到，就不再赘述。

最后，我一直认为好的设计规范是提高设计效率，引导设计方向，而不是因为设计规范而局限了具体业务的设计，如果这样，还不如不去定义。

欢迎关注作者「腾讯CDC体验设计」的微信公众号：

有人说它是全世界最牛逼的 APP，因为它的算法难度和春运期间访问量几乎是全球之最；但有人说它是全世界最垃圾的 APP，因为在使用这个产品的过程中，遇见很多奇葩、愤怒的体验。关于这两种说法，众说纷纭，本期设计大侦探，就来全面拆解铁路 12306APP，一起来看看这个产品到底是如何设计的，用户体验如何。往期拆解：上线...

有人说它是全世界最牛逼的 APP，因为它的算法难度和春运期间访问量几乎是全球之最；但有人说它是全世界最垃圾的 APP，因为在使用这个产品的过程中，遇见很多奇葩、愤怒的体验。关于这两种说法，众说纷纭，本期设计大侦探，就来全面拆解铁路 12306 APP，一起来看看这个产品到底是如何设计的，用户体验如何。

往期拆解：

上线即爆火！3600字完整拆解微信键盘的产品设计 微信键盘发布啦！

阅读文章 >

一、导读 1. 内容结构

全文 9700 字，分为六个部分，分别是导读、产品画像、出行服务、内容服务、思考总结和后记，你可以通过下面的思维导图对本文内容快速的了解。

2. 适合人群

第一类，UI/交互 设计师 ，可以跳出执行层，全方位体验 12306 的产品设计，多维度去思考和总结如何规避类似的陷阱；第二类，产品经理/运营，通过全面的产品设计拆解、体验反馈，获取产品设计参考；第三类，旅游及出行相关行业从业者，通过对 12306 的全面拆解，获取竞品设计参考。

3. 分析模型

第一个，增长模型。由戴夫·麦克卢尔提出，包含用户获取、用户激活、用户留存、获取收入、用户推荐，分别对应用户生命周期中的 5 个重要环节，主要用于拆分和分析产品的功能价值。

第二个，尼尔森十大可用性原则。尼尔森十大可用性原则是界面设计中最基础、最重要的设计原则，任何产品的设计，都可以通过这十个原则进行指导设计。尼尔森十大原则包括即系统可见性原则、环境贴切原则、撤销重做原则、一致性原则、防错原则、易取原则、灵活高效原则、易扫原则、容错原则、人性化帮助原则，通过这十大原则，可以对 12306 的产品设计体验进行全面的校验和侦查。

用超多案例，帮你掌握尼尔森十大可用性原则 尼尔森设计原则是人机交互学博士 Jakob Nielsen 于 1995 年发表的“十大可用性原则”。

阅读文章 >

第三个，设计心理学。包括常见的格式塔原理、费茨定律、巴甫洛夫反应、7±2 效应、席克定律等常见设计基础理论。

万字干货！15个著名的设计心理学原理和应用深度解析！ “除非有更好的选择，否则就遵从标准” 你是否有在听别人说某某原理法则时一脸懵 B 的时候？

阅读文章 >

二、产品画像 1. 产品介绍

铁路 12306 是中国铁路客户服务中心推出的官方手机购票应用软件，主要为全国各地的乘客提供火车票预定、机票预订、汽车票预订等购票业务，首个版本发布于 2012 年 10 月 16 日，根据易观千帆数据，截止到 2022 年 10 月，12306 月活跃用户人数 6,923.78 万。

2. 用户画像

铁路 12306 的用户群体主要以男性用户居多，占比 65.04%，女性占比 34.96%；从年龄分布看，以 24-30 岁的用户群体最多，占比 36.52%，31 到 35 岁的用户占比 24.23%，36 到 40 岁占比 20.27%，41 岁以及以上占比 10.30%；从用户消费能力看，中高消费者占比 33.48%，中等消费者占比 30.43%，高消费者占比 14.70%；从地域分布看，新一线城市用户最多，占比 27.93%，一线城市占比 19.93%，二线城市占比 19.00%，其中广州用户最多，其次为深圳、杭州和北京。

3. 信息结构

铁路 12306 的一级菜单包含首页、出行服务、订单、铁路会员和用户中心。「首页」主要为用户提供火车票、飞机票和汽车票的购买，其次还提供各种快捷功能入口和酒店预订等服务；「出行服务」主要为用户提供约车、酒店、订单等服务；「订单」是可查询和管理在 12306 的各种订单；「铁路会员」是 12306 的会员版块，提供车票兑换、会员活动等内容；用户中心提供个人资料管理、出行向导和常用功能等内容。

4. 重要迭代记录

根据七麦数据统计，铁路 12306 的 APP 首个版本发布于 2012 年 10 月 16 日，截止到 2023 年 1 月 12 日，APP 版本已经更新至 V5.6.3 版本，近一年版本更新次数为 5 次。

版本重要迭代记录

2021 年 9 月，发布 V5.4.0 版本，新增无障碍功能、老人及障碍人士购票更便捷，即爱心版；

5. 产品生命周期

作为中国铁路客户服务中心的官方购票平台，铁路 12306 距离首个版本发布时间已经过去 10 年。从易观千帆数据观察，截止到 2022 年 10 月，12306 月活跃用户人数 6,923.78 万，日均活跃人数 811.65 万。由于是国有企业运营，而且是垄断业务，12306 没有任何商业变现的压力，从产品发布时间和活跃用户人数看，目前处于产品生命周期的成熟期。

6. 竞争图谱

截止到 2022 年 10 月，易观千帆数据显示，铁路 12306APP 在苹果的 APP Store 应用市场 APP 总排名 71 位，旅游类排名第一，汽车火车船票预定类第一，月活跃用户人数几乎是其他 APP 的总和。

三、出行服务 作为 12306 最核心、最重要以及实现商业变现的服务，出行服务主要为用户提供火车票、飞机票的销售，其次还链接了众多第三方合作伙伴，为用户在出行的各种场景提供了便捷的服务。

1. 票务 「票务」是 12306 最核心的服务，主要为用户提供火车票、飞机票和汽车票的查询以及销售，其次 12306 还对三种产品进行了组合，推出了空铁联运、铁水联运这样的服务。

① 火车票

「火车票」就是为用户提供火车和动车的票务销售，用户输入出发站、终点站和时间以后，就可以进行查询，其次还支持对已购买的车票进行变更到站、改签和退票。

1）售票

售票页

当用户输入目标站点以后，就进入了售票页。在这个页面，可以看到当天列车的所有车次，包括直达、中转、出发时间和剩余票数。在底部，有一个菜单栏，包含了筛选、耗时最短、发时最早、显示票价和候补下单五个功能，这主要是帮助用户快速寻找符合自己需求的车次，比如出发车站、出发时间等。

体验陷阱

这个页面的操作体验不太友好，底部的菜单栏不仅没有实现全屏手机设备的兼容，而且几乎和背景的元素贴合在一起，不够醒目，如果用户不注意，根本无法发现底部竟然还有一排菜单栏帮助用户进行高效的检索。

订单页

在用户选择好车次以后，就进入订单页。用户需要选择座位的系别，包括硬座、软座、二等座、一等座、特等座等。

用户需要选择乘车人。添加乘车人的步骤比较简单，在输入用户的真实姓名、身份证号码和手机号码以后，即可添加成功。首次使用12306的用户需要进行身份核验，用户需要通过验证系统发送的核验信息才能添加成功。

细节侦查

「姓名」这里有一个非常友好的设计体验，那就是针对无法输入的生僻字、名字超过 30 个字符，以及外籍用户的极端情况都给出了详细的指导，针对用户可能出现的极端的情况给与及时的提示，这就是尼尔森十大原则中的容错原则，帮助用户从错误中恢复，将损失降到最低。

在「选择乘车人」的右边，还有一个「选择受让人」的功能。这个功能有很高的学习成本，会让用户摸不着头脑。我也是通过百度查询才了解到这是一个用户权益功能，它主要是指用户可以把平时购买火车票获得的积分转让给指定的用户，积分又可以抵消火车票款，从而实现抵扣。

选择好乘车人以后，用户可以进行选座，就进入了提交订单、支付费用的环节。

支付页

订单生成后，用户需要在付款限定时间内支付火车票费用，否则订单将会取消。其次在支付页，也向用户推荐相关的保险服务，比如铁路乘意险，又分为平安险、行运险和顺意险，主要为乘客提供意外伤害疾病身故等保险。

「购买返程」其实一个非常便捷的功能，但12306设计的层级太深了，而且没有加上一键返回首页或订单页的按钮，用户如果想退回到订单页或首页，需要不断点击返回，操作路径实在太长。

体验陷阱

底部菜单设计了三个按钮，违反了费茨定律的设计原则。用户在这个支付页的主要目标是支付费用，但是菜单栏的三个按钮权重设计得一样高，取消订单和购买返程这两个按钮，严重干扰了用户的选择，降低了操作效率。

支付成功页

当用户支付成功以后，「支付成功页」为用户提供餐饮预订、出行保险、酒店入住、网络约车等服务，非常便捷。不过内容的规划比较乱，体验稍差。

候补下单

「候补下单」是一个非常方便的功能，这个功能主要解决在当前车次没票的情况帮助乘客自动排队，如果有其他乘客退票，就自动抢票，非常贴心。这个功能也被誉为黄牛的终结者，帮助乘客自主排队。

2）变更到站

「变更到站」是指乘客可以更改目标站点，进入订单详情页后，点击「变更到站」按钮，点击底部的「立即变更到站」就可进入变更页面。在变更页面，乘客可以重新输入目标站点，然后再次进入车票售票页，选中需要变更的车次以后，进入订单页提交订单，变更成功。需要注意的是，变更到站只能办理一次。

体验陷阱

当用户点击「变更到站」的时候，如果不注意观察页面，根本感受不出原来需要在底部菜单栏进行操作，会让乘客陷入焦躁，不知道下一步从哪里进入。其次在变更到站页面，下半部分设计了很多快捷入口，比如车站大屏、约车、餐饮特产等，把用户的注意力分散了。这两个设计都严重了违反了费茨定律和席克定律，大大降低了用户的操作效率。

3）改签

「改签」是指用户可以更改出行的时间，改签的流程和「变更到站」相似，进入售票页后，选中需要变更的车次，进入订单页提交订单，改签成功。需要注意的是，车票改签只能办理一次，开车前 48 小时以上，退票费为票价 5%，24 小时至 48 小时之间为 10%，不足 24 小时为 20%。退票费最少 2 元起步。

4）退票

「退票」是指用户可以退掉已经购买的车票，退票流程比较简单，点击退票后，进入退票确认页，点击确认退票成功。需要注意是，距离开车前 8 天以上的不收退票费，其他的时段将会根据列车开车前的时间收取手续费，最高 20%。

迭代建议

在用户点击退票的时候，应该出现弹窗，再次提醒用户是否确认退票，这样能避免用户误操作。这就是尼尔森十大原则的容错原则，帮助用户从错误中恢复，将损失降到最低。

5）购票后

当乘客购买车票后，12306 的首页会加入一个行程的版块，向用户展示最近的行程详情，其次一级菜单栏「出行服务」内容也会同步更新。这个设计非常友好，直观醒目地告诉乘客最近的行程信息，通过外部触发避免乘客忘记行程。

行程页

这个页面从上至下包含四个部分，头部是乘客详细的车次信息，比如出发时间、经停站、天气等；中间是车票信息，包含检票口、座位号、车次和乘车二维码等信息；接下来按乘客出行前服务、车站/列车服务和到达服务三个场景为乘客推荐其他服务，比如餐饮预定、酒店预定等服务；底部是关于出发站、到达站的天气预报信息和优惠服务等信息。

细节侦查

行程页把乘客的出行拆分为 3 个场景，出行前服务（提供重点客户预约、我要选酒店、我要去车站、我要订餐饮和禁带物品规定）、车站/列车服务（提供临时身份证证明、遗失物品查找、我要订餐饮和站内导航）和到达服务（遗失物品查找、我要订酒店、接站约车、旅游景点预定、投诉建议和站内导航），这就是以场景为中心的设计——将设计工作的焦点从“定义系统的操作”转变到“描述什么人将使用该系统去完成什么任务”。

② 飞机票

「飞机票」就是为用户提供飞机的票务销售，用户需要输入出发站、终点站和出发时间，如果携带孩子或者婴儿，还需要单独勾选。飞机票同样支持改签和退票。

1）售票页

售票页的内容非常简单，在头部，用户可以左右滑动选择时间，页面内容以 Feed 流向用户展示详细的航班信息，其次还为用户提供了其他出行方案参考。底部设计了一个菜单栏，用户可以进行筛选设置，还可以根据价格高低和出发时间排序。

2）选择舱位

选中航班班次以后，进入到「选择舱位页」，在这个页面可以查看到航班的详细信息，比如航空公司、起飞时间、值机柜台等。用户需要选择舱位等级，比如经济舱、商务舱和头等舱，选中后，即可进入预订流程。

拓展阅读

为什么同一架飞机同一个经济舱飞机票价格不一样？这是因为一个飞机的不同舱位实际上是不同的产品，所以座位有不同的等级，故而价格有了出入。其次他们主要的区别包括但不限于退票改签的灵活程度、出票期限和目的地停留期限等等。

3）订单页

在订单页，可以查看到订单的详细信息，包括收费说明、退改说明等，在用户添加乘客以后，就可以提交订单。这里需要注意一下，如果乘客携带孩子或婴儿，需要添加儿童出行人。

体验陷阱

当乘客勾选了「携带儿童或婴儿」的选项以后，在订单页准备支付的时候，系统提示乘客需要返回添加儿童出行人信息。但却并没有告诉乘客如何添加，或直接给出对应的功能跳转链接，这让用户点击「返回添加」后却找不到功能入口。这就违反了尼尔森十大原则的防错原则，不仅在用户犯错之前没有给出提示，犯错了还不给与指导，真的非常糟糕。

③ 汽车票

「汽车票」为用户提供客车的票务销售，用户输入出发站、终点站和时间以后，就可进入售票页。汽车票的订单流程非常简单，在选中客车车次以后，添加乘客支付费用后，订单即可生成。

体验陷阱

用户在选择「达到地」搜索框输入地名时候，应该提供模糊搜索，比如输入湖南的地名，应该为用户提示相关联的车站。

④ 空铁联运

空铁联运，顾名思义就是把飞机和高铁这两个产品组合在一起销售，支持用户一站式购买“飞机+高铁”的联运行程，只需一次购票、一次支付。这个功能的使用场景主要是针对出发地和目的地没有直飞的航班情况下，为用户提供飞机+高铁的转运方案。这个功能对于乘客来说，支持一站式购买“飞机+高铁”车票，可以节省购票时间，非常友好。

⑤ 铁水联运

和空铁联运一样，这也是一个组合产品的销售，支持用户一站式购买“高铁+水运”的联运行程。使用场景、功能价值以及操作流程和空铁联运一样，我们就不必重复。

⑥ 雪具快运

12306 还推出了一个雪具快运的服务，为广大旅客提供多种个性化雪具寄送产品服务，还支持随车办理或上门办理寄送服务，目的是为用户打造滑雪的新体验。「雪具快运」的操作流程也比较简单，采用预约制，选中服务后，填写用户详细信息，支付成功后，订单生成。

⑦ 小结

作为 12306 最重要、最核心、最复杂的功能，从这个版块的内容拆解和实操体验来看，可以看出 12306 确实已经解决被誉为全世界最复杂的抢票算法逻辑（笔者通过实操测试，几乎都能买到票），特别是在春运这种会出现超过上亿用户抢票场景，真可谓非常不容易。不过从用户体验来看，非常一般，甚至有很多不合理的设计。

2. 出行 出行是 12360 结合了乘客在出行的场景中潜在产生的需求设计的服务，有结合车站商家的在线点餐，有结合当地地域特色的旅游服务，还有约车、保险、酒店等服务。这些服务，多数由第三方合作方提供。

① 餐厅特产

「餐厅特产」是一个为乘客提供在线点餐的服务，在乘客输入列车车次以后，就可以进行点餐，支持外卖配送至列车和到店自取两种形式。这个功能设计得很友好，不仅解决乘客在乘车前的就餐问题，为车站的商家引流，还可以增加平台的变现方式。

② 铁路游

「铁路游」是 12306 结合旅游出行的场景，为乘客推出的一项旅游服务，包含旅游专列、跟团游、周末游和自由行等。这个场景的链接其实非常好，但是版块目前设计得比较简单，内容也比较少。

③ 约车

「约车」是为乘客提供接送站、接送机、打车和租车的服务。这是一个强刚需的需求，用户在出行的前后都有用车服务。为乘客提供约车服务，不仅能增加变现方式，还能方便乘客出行。通过实操体验，约车主要由第三方合作方提供服务，比如曹操出行、T3 出行等公司，为乘客提供出租车、品质专车和商务车等车型。

④ 保险

保险分为乘意险和出行保险。铁路乘意险分为平安险、行运险和顺意险，主要为乘客提供意外伤害疾病身故等保险，在乘客购买铁路的订单页就会向乘客推荐，乘意险价格低，保障项目包含意外身故、伤残、医疗费用、住院津贴等。出行保险由第三方公司中国太平洋保险提供，主要为乘客提供出行安心保、空铁联运险和旅程预定取消险。

⑤  酒店

酒店这个版块的内容相对夯实，不仅有新客大礼包这样的用户权益，还有商旅专区、今夜甩卖、高端酒店这样的内容。甚至还设计了专门的酒店会员 VIP，包含普通会员、银卡会员、金卡会员、白金卡会员和黑金卡会员，相对其他版块而言，这个版块花了比较多的心思。

⑥ 铁路商城

铁路商城是 12360 以乡村振兴·帮扶推介为主题打造的一个商城，包含了帮扶专区、优选好物、兑换专区、今日特卖等内容，其次还支持企业集采，批量购买。

⑦ 小结

从这个版块，可以看出 12360 其实结合了用户吃穿住行的刚需场景设计了对应的服务，有自主运营也有完全依靠第三方提供。不过整体的用户体验比较差，事实上可以参考像顺丰速运、智联招聘这些 APP，通过内置小程序的形式来设计，完全可以把这些版块让第三方单独设计和维护，同时还能为用户带来更好的体验。

3. 会员 铁路畅行会员是中国铁路统一对外会员服务品牌，开通畅行会员不需要花钱，畅行会员主要是用于会员用户积累乘车积分、用积分兑换车票等，主要包含积分权益，兑换车票、无票候补和会员活动四大会员权益。这个页面设计得比较简陋，也没有太多价值的内容，可以看出 12306 在用户运营方面比较欠缺。

4. 订单 12306 的订单包含了火车票订单、餐饮订单、保险订单、酒店订单、空铁联运订单、计次定期票订单、约车订单、出站引导服务订单、铁路商城订单、汽车票订单、旅游订单和铁水联运订单多达 12 种订单，从这些订单类型可以看出 12306 的服务特别多。

体验陷阱

这个设计实在太糟糕，严重违反了 7±2 效应。琳琅满目，花枝招展，让用户在这个页面几乎迷失。更糟糕的是，当你有一个非常重要的待支付订单，这个页面竟然没有角标提醒，最终你会因为这个糟糕的设计打乱自己的行程计划。

四、内容服务 内容服务是帮助产品实现用户留存和运营的版块，不过从 12306 的内容设计来看，整个产品的运营手段比较少，所以我把 12306 现有设计的功能拆分为便捷功能和向导功能。

1. 便捷功能 以下这七个功能，对用户而言，是非常便捷、友好的功能，可以帮助用户在出行的旅途中获取很多帮助。

① 车站大屏

「车站大屏」是一个非常贴心的功能，通过这个功能，可以为用户提供车站的实时列车信息，非常方便。大屏详情页可以拆分为三块内容，左上角可以切换全国各地的火车站，头部还有搜索框，为用户提供车次的查询，主体内容是当前车站向西的车次信息，包含发车时间、候车室、检票口和候车状态等。

1）车次详情页

进入列车的「车次详情页」，可以查看当前车次的完整信息，比如检票状态、候车室、检票口和全程停靠站、停留信息。在这个页面，还提供了「关注列车」的功能（关注后并无关注数据，显得很鸡肋），以及直接预订当前车次的入口。

2）车站详情页

「车站详情页」就像一个站点的主页，为用户提供完整的车站信息查询。这个页面可以拆分为四块，头部可以切换其他站点，并提供当前车站的天气情况以及车站基础信息。金刚区位 8 个功能入口，包含车站车次、站内导航、重点旅游、餐饮服务、周边酒店等。中间是当前车站的起售时间和换乘时间，底部是车站附近周边的酒店精选。

迭代建议

这个页面把车站当做一个主体，聚合了一个车站完整的功能，其实挺有创意，但页面隐藏得很深，如果不去拆解，几乎很难发现，很是可惜。我认为完全可以提高权重，升级为一级栏目，代替会员，或者和出行栏目进行整合升级。

② 站内导航

「站内导航」提供目标车站的 LBS 导航，对于乘客来说，到达一个陌生的站点，需要清晰的指引，这是一个非常便捷、温馨的功能，能帮乘客解决很多问题。不过这里有一个莫名其妙的设计，那就是进入这个功能之前，系统提示请摇“8”字校准手机，事实上这里是一个加载动画，但是画面和内容却误导了用户，我甚至每次进入都傻乎乎的摇动手机。

③ 临时身份证

临时身份证是一个非常重要的功能，12306 现在支持 APP 在线申请，极大方便了乘客的出行。申请流程也比较简单，填写个人信息，验证审核通过后，就可以生成电子证照使用。每个人每个月有 3 次申请临时乘车身份证机会。

④ 遗失物品

这是一个非常贴心的功能，如果你在乘车的过程中不小心丢失物品，可以通过这个功能登记，输入你的详细信息就能登记成功。

⑤ 重点旅客

这也是一个非常贴心的功能，主要为老年人、残疾人服务，通过填入你的信息，列车会根据你的情况提供优先进站、协助乘降等服务。

⑥ 爱心版

爱心版就是长辈版，专门为中老年用户设计的版本，在用户中心切换后就可进入爱心版。整个版本设计得非常简洁，操作步骤也比较简单，对中老年用户比较友好。

⑦ 英文版

英文版在用户中心的设置点击语言即可切换，整体的版本设计得直接简洁，用户体验不错。

⑧ 小结

从这个版块可以看出，一个产品如果以用户为中心去设计，是可以为用户带来很大的便捷和愉悦体验。比如像临时身份证这样的功能，过往我们只能提前出发去车站排队办理，但如今 12306 已经把这样的痛点解决，为用户节省了大量的时间。

2. 向导功能 以下 8 个功能，虽然属于出行向导，不过体验下来，感觉用户体验比较差，很多功能完全无法弄懂它的设计目的是什么，显得非常鸡肋。

① 快捷退票

「快捷退票」这个功能的设计，让人摸不着头脑。从操作流程看，首先需要输入用户的详细信息，包括姓名、身份证号码和手机，其次需要进行人脸核验，到了第三步还需要选择车票的日期车次，在最后的退票操作页面，用户点击退款后，没有和用户再次确认就直接退票。整个流程体验下来，非常糟糕。

体验陷阱

这个功能和订单页的退票感受不出来有何区别？如果用户要退款，不如直接去订单页进行退票，操作步骤简单，一目了然。其次不支持自动导入用户的购票信息实在太不方便，需要通过选择车票购买日期和车次，这个设计实在让人生气和愤怒（我在体验的过程中到了第三步只能退回到订单页把购票日期和车次截图下来，又再次重复前面两个步骤才到这个步骤）。

② 联系方式

这也是一个看不懂的功能，进入页面后，需要用户输入乘客的详细信息，但是这个乘客信息和用户在购买车票时候需要添加到乘客信息有什么不同？更糟糕的是，当你把自己的电话号码、身份证信息填入后，系统会显示核验成功，然而当你再一次进入，页面内容还是和之前并无区别，你不知道自己是不是还要重新输一次？

③ 时刻表

「时刻表」主要为乘客提供查询列班车次的出发时间和到站信息，但这个功能「车站大屏」几乎已经包含了，这个功能显得意义不大。

④ 查票价

这个功能非常鸡肋，因为在火车票的售票详情页就可以清晰直观地查询到列车票价信息，相反在这个页面，根本无法看到价格，因为价格的字体大小只有 20px，乘客几乎很难注意到。

⑤ 查代售点

这个功能主要为用户提供全国各地火车票代售点的查询，不过在互联网技术发展到今天，火车票代售点越来越少了。从 12306 采集的信息来看，部分代售点缺少电话等关键信息，对用户来说，比较鸡肋。

⑥ 起售时间

这个功能为用户提供各车站每日的起售时间，属于一个低频功能，可以解决乘客某些极端场景的需求。不过在我体验下来，比如通过此功能查询 1 月 29 日的车票，显示北京站起售时间为 10:00，但是在火车售票版块，我也可以直接购买 1 月 29 日的车票，这让我比较疑惑这个功能的价值在哪里。

⑦ 正晚点

「正晚点」同样是一个鸡肋功能，而且还需要输入准确的车次才能进行查询，车站大屏已经完美可以取代这个功能。

⑧ 列车状态

「列车状态」比正晚点都还鸡肋，让人愤怒，因为你需要输入正确的出发地、到达地和出发时间，对了，还有正确的车次才能进行查询，这样的操作成本比下载 12360APP 都还麻烦。

⑨ 小结

从这个部分的内容拆解和操作体验来看，12360 的产品设计得不够细致和贴心，很多功能就像是硬生生塞进去一样，滥竽充数。其次从他们的产品迭代记录次数可以看出，近 1 年更新时间只有 5 次，也许每一次都是在做加法，没有想过做减法，所以导致这部分的功能显得鸡肋而且有很大缺陷。

五、思考总结 通过对铁路 12306 的全面拆解，接下来我将从内容层、功能层、体验层和视觉层进行总结。

1. 内容层

12306 整个产品的内容设计，用一句话总结，可以归纳为——心有余力而不足。可以看到12306围绕乘客购票、出行的潜在需求场景都设计了对应的服务，比如酒店、约车、点餐、商城等，甚至还有空铁联运、铁水联运这种多场景的组合售票方式，不过在实际的版块内容打造中，则显得比较空洞，体验一般。这个产品，可以说几乎没有创新点，这主要也是由于它是由国有企业设计运营，背景极其复杂，设计目标也飘忽不定。

2. 功能层

在 2015 年之前，铁路 12360 承担了被誉为历史上人口迁移最大的春运的抢票工作，那时候一票难求，春运去 12360 就像是一场噩梦。不过在经过多年的升级和优化以后，目前 12360 的购票效率非常高，经过笔者多次的测试和调研，目前通过 12360 购票已经不再是难事。而且还设计了候补抢票这样的功能，帮助用户解决买票痛点，可谓非常贴心、友好。

3. 体验层

铁路 12306 的用户体验，非常一般，我在这次的 产品拆解 中至少侦查出了 20 条体验陷阱，这些陷阱都会给用户带来极其糟糕和愤怒的体验。比如让我像个傻瓜摇动手机的站内导航载入页，这完全就是把用户当成傻子一样看待，其次还有一堆数不清的鸡肋功能，对用户的操作体验造成了严重的干扰。我甚至认为爱心版和英文版比标准版使用起来更愉悦，更能减少我的焦虑。

4. 视觉层

作为一个 UI 设计师，在拆解 12306 的产品过程中，我对整个产品的设计感到绝望。首先，没有做到统一性，整个产品毫无设计规范，比如卡片的圆角、品牌色、版块间距根本不统一，这样的视觉体验一眼望去就非常糟糕；其次，图标、活动图、橱窗图以及详情页的设计毫无美感，满满的山寨 APP 风格，特别是订单页的 ICON，花花绿绿、琳琅满目，连最基础的统一都没有做到。

六、后记 作为一款国民级用户 APP，铁路 12306 仿佛陪伴了 80、90 后的青春。还记得 10 年前老家是黑龙江和河北的大学室友，每年春运开启之前就为了回家的火车票犯愁，不仅要去遥远的火车站排队，很多时候还可能空手而回，那便是最初对 12306 的记忆。

如今十年过去了，12306 解决了亿万人的出行抢票需求，让我们在春运的路上，可以轻松购买一张回家的票。但下一个十年，我更希望 12360 的产品团队，可以重视用户体验设计，让我们不再掉入那些体验陷阱。

参考文献：

易观千帆-铁路 12360APP 数据分析 七麦数据-铁路 12360APP 数据分析 中国铁路 12306 官网 尼尔森十大原则 《设计的陷阱：用户体验设计案例透析》- 乔纳森·沙利亚特 欢迎关注作者微信公众号：「设计大侦探」

本期推荐的是免费商用的卡通体，此类字体非常适合运用在可爱活泼、轻松休闲的设计中，会有不俗的表现力，常常能达到“画龙点睛”的效果。往期回顾：视觉设计师来收！免费商用字体推荐：圆体篇（12款已打包）圆体给予人圆润亲切的感觉，显得温润柔和、新颖活泼。

本期推荐的是免费商用的卡通体，此类字体非常适合运用在可爱活泼、轻松休闲的设计中，会有不俗的表现力，常常能达到“画龙点睛”的效果。

往期回顾：

视觉设计师来收！免费商用字体推荐：圆体篇（12款已打包） 圆体给予人圆润亲切的感觉，显得温润柔和、新颖活泼。

阅读文章 >

整个字形向上倾斜，给人一种积极向上的感觉，而且横折和竖折的笔画都有弧线，没那么死板，无论是笔画结构，还是笔画粗细，都是灵活的，是一例轻松快乐风格的字体。

字形笔画去除了折笔的弧形，换之以平直的笔画，竖弯钩转为竖折，同时弱化了钩笔画，省去了许多笔画末尾的小尾巴，显得更加直白可爱。整体形态采用了镂空的制作技巧，增强了字体的立体感。

字体设计灵感来源于千图网 IP 千小兔的形象，将可爱的千小兔融入 字体设计 中，尽显年轻、活力与俏皮。适用于各类可爱、少女风的海报和店招场景。

笔画粗细对比强烈，字形活泼，以拙为巧，趣味十足，充满童趣，让人觉得轻松愉悦。

所有笔画以“圆润”为主，保留少量飞白，具有手写的韵味。

在字形上淡化了棱角，笔画中间呈弧形外拓，将转弯的折角用平滑的曲线代替，部分笔画有规律的加粗，再结合圆润平滑的笔画，显得可爱个性，憨态可掬，轻松惬意。

字体组合结构松散，重心不稳，字形偏长，起笔收笔锋利且粗细对比明显，笔画笨拙微带曲线感，具有诙谐幽默的效果。图片

小可奶酪体字体笔画比较简单，都是中间宽两头窄的固定样式，笔画比较圆润，在转折处一笔形成的弧度，突出了手写感和趣味性。

横竖笔画略带波浪，不完全平直，尽显俏皮可爱。字体笔画粗细排布均一合理，小字可读性较高。

字体线条粗细适中，笔画随性，结构肆意洒脱，具有很好的识别性。

猫啃什锦黑是一款可爱的马克笔手绘风格字体，其笔画活泼有趣萌萌哒，特别适合做可爱类、母婴类等海报的标题字体。

仓耳非白是一款粗细对比明显、风格强烈、拥有 5 个字重的家族字体，结构方整，笔形简洁、利落，带有明显区别于其他字体的风格。

Tips：如果安装后在 PS 或 AI 中找不到字体的话，请搜索「TsangerFeiBai」即可。

字形结构灵活，选用粗细对比夸张的笔画，使字体更具视觉冲击力，搞怪的字型结构和出乎意料的空间调整让字体多了几分调皮可爱之气。笔画错落有致，打破了许多固有的排列模式，营造出天真烂漫的感受。

欢迎关注作者的微信公众号：「艺海拾贝Design」

最近不少同学在筹备作品集，而很多缺乏项目经验的毕业生，不知道怎么选择虚拟项目。我看了这么多份作品集，发现很多设计新人的虚拟项目容易出现的三种问题。如果你也要做虚拟项目，那么可以借这篇文章反思一下，自己有没有相关问题。

最近不少同学在筹备作品集，而很多缺乏项目经验的毕业生，不知道怎么选择虚拟项目。

我看了这么多份作品集，发现很多设计新人的虚拟项目容易出现的三种问题。

如果你也要做虚拟项目，那么可以借这篇文章反思一下，自己有没有相关问题。

更多虚拟项目干货：

作品集没案例？看高手如何在3天内搞定一个虚拟项目！ 现在找实习越来越难，很多设计新人都苦于没有项目案例放作品集。

阅读文章 >

一、天马行空，不接地气 尤其是直接把学校的课题搬到作品集上时，很容易出现这样的项目：

AR 互动游戏 节水公益 APP 图书馆服务设计 这三个项目，你可能觉得挺好的呀，看起来不但有创意，还很有价值。

可问题是，咱们是为了找工作而做的作品集，你确定自己能找到 AR 游戏、公益 APP、服务设计的工作吗？

如果真的能力很强，这些项目做得特别好，那倒也不是问题。

但是对于大部分人来说，设计能力一般般，又要挑战这种高难度项目的话……

我只能劝一句：请接点底气吧！

AR 这个领域确实是未来趋势，但目前产业并不成熟，能赚到钱的公司很少，能提供的岗位就更少了。

这种岗位有限的热门领域，很多设计师会有兴趣尝试，竞争就更激烈了。

你想试试不是不行，但得掂量一下自己的水平够不够得着。

公益产品就更小众了，不赚钱的东西，基本只有政府或大厂会玩一玩。

大厂是什么门槛，这个不用多说。

再看政府这边，项目会外包给什么公司？公司会分给 设计师 多少钱？你自己思考一下……

最后那个服务设计，虽然网上喊的声音很大，但是你去招聘网站搜一下关键词就知道行情了。

二、不懂业务，用爱发电 很多人在构思 C 端虚拟项目时，就简单的往自己想要的产品去想，完全不考虑业务和可实现性，最后弄出一个根本不合时宜的项目。

例如做一个宠物 app，上来就把社区、商城……宏大版图加上去。

但凡对行业和竞品了解一点，都知道现在做社交和电商有多难。毕竟已经有那么多成熟的产品了，为什么用户要来你这里？

连这种基本问题都没有任何想法，还设计什么产品？

如果你觉得，设计师只要考虑设计问题，不需要理解业务，那就大错特错了。

如果你是纯 UI/视觉，确实只要把图画好就行。

但如果是想做 UX/交互，就不可以对业务一无所知，因为你的方案，确实是能影响到业务的指标的。

如果虚拟项目的业务模式完全不切实际，那么就没办法做出合理的设计方案，即便设计能力再强，最终的结果也会很糟糕。

所以，如果你想做 C 端的虚拟项目，一定要把行业情况弄清楚，把市场上的竞品当作真正的竞争对手，这样才可能做出合理的方案。

如果是 B 端项目，这方面的问题就小很多，但是还是难免下面的这种问题。

三、闭门造车，自以为是 有些虚拟项目方向选得不错，但是不认真做调研，导致后面越设计越偏，方案看起来问题一大堆。

不要以为虚拟项目就不用做调研分析了，虚拟项目比真实项目更需要做调研分析！

为啥？因为真实项目通常是领导、同事们已经调研分析过很多遍了的，交到你手上时，很多信息已经有了，你该做什么已经很清楚了。

但是虚拟项目没人帮你，自己什么信息都没有，还不做调研不做分析，这跟闭门造车有什么区别？

例如我之前看到有好几个学生的虚拟项目是校园二手货平台，这个确实是刚需，算是合理的项目方向。

但还是很容易出现这样的问题：

照着闲鱼抄，也不管校园内的二手货交易有何特点。这样能体现出什么能力呢？招聘方会觉得你只会抄作业，一点设计想法都没有。 首页做得完全不像是二手货交易平台，还以为是学术交流网站。这个问题显然是闭门造车又思路不清晰造成的结果，不管是做竞品分析、用户访谈还是用户测试，都有希望尽早发现并解决。 把线下集市、二手货交易柜、上门收货都计划好了，盘子铺得特别大。但凡是研究过行业和竞品，都应该想得到为什么别家很少有这么做的。 所以，千万别以为虚拟项目就是自己想怎么做就怎么做，正是因为项目是虚拟的，所以反而更需要小心求证。

总结一下 建议先做职业规划，再选择虚拟项目。讲直白一点，就是根据招聘岗位来准备作品集，免得好不容易做完一个项目，发现根本找不到相关岗位的招聘。

即便是虚拟项目，也要把产品的定位和业务模式想清楚，要符合当下的市场环境，不能光凭喜好选项目。

最后，虚拟项目更需要做调研，因为自己本来就对行业不了解，如果还不积极收集信息，那么很容易偏离十万八千里。

欢迎关注作者的微信公众号：「体验进阶」