关于该设计的文章已成千上万，并记录了许多网络研讨会，但是新手专业人员会关心同样的合理问题：“那么我到底应该怎么做？！” 在本材料中，我将使用一个真实的示例逐步说明创建一个旨在解决业务问题的设计项目需要执行哪些操作。
目前，我从事物流领域的初创公司的开发，最近的主要任务（除了测试每周发布的内容之外）是创建公司网站。 为了不偏离主题，我将选择运输部门，或更确切地说，选择高级出租车服务的地点。
设计过程
互联网上可能的设计过程有很多变体，因此我将重点介绍我自己使用的经典版本：
- 沉浸在任务中
- 研究成果
- 通过脚本思考
- 建立框架
- 视觉风格搜索
- 版面设计
在开始之前，我想指出设计过程不是严格的动作序列。 您可能必须多次返回上一阶段，或者某些阶段甚至会相互混合。
以所描述的过程为指导，但不要成为其人质。
1）沉浸在任务中或企业如何赚钱
首先要做的就是弄清楚客户的业务是如何赚钱的。 出租车从每次运输中获得佣金，因此设计应指导用户创建订单。
我立刻想到了在站点的第一个屏幕上放置出租车订单的想法。 因此，该站点将不仅是一个信息门户，而且还将是一个完善的服务。
如您所见，尝试弄清客户的业务，就会想到一些想法。 立即修复它们，否则您将忘记。 考虑网站的结构时，它们对您将非常有用。 在当前项目中，我们正在使用Confluence。 对于小型项目，我会选择Apple Notes或类似的东西。等一下 我们经常从现场订购出租车吗？ 也许我们不需要将重点放在在线出租车订单上，而是在下载应用程序上？ 嗯，好问题。 让我们将我们的想法记录下来，然后继续研究业务。
了解业务的最佳方法是与客户联系。 除了节省大量时间之外，您还可以使客户参与工作过程，这表明最终结果不是瞬时灵感的结果，而是正确的视觉风格和业务逻辑的结合。
阶段摘要：
您必须清楚地了解客户的业务是如何赚钱的，以及应该带领用户采取什么关键行动。 在我们的案例中，任务是说服访问者下载应用程序。2）竞争对手的分析研究
这个阶段最容易从研究竞争对手开始，然后将机制相似的服务连接起来。
让我们考虑订购出租车的技巧。 首先，我们有一个人想从一个地方搬到另一个地方。 其次，我们有一个愿意完成此任务的驾驶员。 哪些服务以类似的逻辑工作？
我想到了AirBnB，一个人想租房子，另一个人准备租房子。 或自由职业者资源，例如UpWork，客户需要做一些工作，而客户需要承包商。
当然，您需要研究直接竞争对手的站点：Gett，Yandex.Taxi，CityMobil，InDriver，当然还有Wheely。
查看这些站点时，请尝试注意相似和不同的细节。 例如，Wheelly通过将SMS发送到电话号码来随时随地下载应用程序，而Yandex.Taxi则可以直接从站点下订单。
我连续第二个项目遇到的另一个细节。 正如我们所说，我们有两种类型的用户-乘客和驾驶员。 这两个角色都需要一个单独的页面，因为他们的参与将通过不同的渠道进行。 在这种情况下，谁应该提供主页？ 还是值得选育一个繁殖者？
在分析了流行的服务之后，我注意到了一个细节。 几乎所有机制相似的公司都将主页提供给那些付款的用户。
也就是说，AirBnB对于旅行者来说是最主要的，而房主页面则隐藏在菜单中（客人支付服务费）。 Qlean，Wheley，UpWork和许多其他服务使用相同的策略，因此，在我们的项目中，我将重点关注它。 也就是说，我将为乘客（支付服务的人）提供主页，并在菜单中添加“成为驾驶员”页面。
在此阶段，我将开始研究在研究结束时哪些实体使用竞争对手的站点来选择适合您业务类型的最佳结构。 以下是Wheely网站上的实体：下载应用程序，关于驾驶员，汽车，保险，下载应用程序，评论。
通过这种方式分析了几个站点之后，您将开始更好地了解客户领域并选择适合您项目的实体。
例如，关于新车的故事更适合高端市场，而提供经济舱的服务则更好地保持对汽车质量的关注，而只关注价格优惠。 在商务舱出租车中，价格并不重要，因此不应公开显示。 想象一下，当百万富翁使用您的服务时，优惠的价格会是多么奇怪。
阶段摘要：
您分析了5种以上的类似服务，并写下了竞争对手使用的实体。 理想情况下，您应该仔细研究每项服务中的关键场景，以将好主意与引起困难的主意分开。3）考虑方案或创建客户旅程图
设计人员应该考虑脚本而不是屏幕。 拥有多少个屏幕无关紧要，对于用户使用您的服务来解决他们的问题有多方便无关紧要。
从逻辑上讲，在一个屏幕上完成所有操作似乎更方便，但设计人员知道，将长格式分成几个步骤会更好。 设计中没有基本规则；一切始终取决于任务。
在我的实践中，我使用“客户旅程图”来思考各种情况。 我已经在
《设计时报》的电报频道中描述了他工作的精髓：
CJM是一个表，其垂直（列）是用户必须达到目标的步骤。 例如，在航空公司网站上购买机票时，表格中的列将类似于以下内容：网站，填写表格（从何处，何处，何人和何时），寻找合适的航班，查看详细信息，付款。
水平（线）如下：
用户目标
在这种情况下，用户的目标不是全局目标（购买机票），而是在此阶段的本地目标，例如，填写表格或选择合适的航班。
关键动作
根据目标，可以确定关键操作。 在填写表格的阶段，这将转到所选参数的航班清单。
心情
在这里，您需要确定用户在每个阶段的感受，并尝试避免不满或困惑。 如果连续几个阶段出现负面情绪，则用户很可能不会继续使用该服务。
可能的问题
您应该仔细考虑的极其重要的一步。 它可能包括由于疏忽和误解接口而引起的错误。
解决方案
这个阶段与上一个阶段密切相关。 对于每个问题，您需要找到1-2个解决方案。 通常，在确定可能的问题之后，解决方案将变得显而易见。 这就是CJM在界面设计方面提供极大帮助的原因。
许多人认为只有经验才能决定项目的成功，因此他们低估了过程的重要性。 使用CJM有助于通过周到的操作序列减少经验的缺乏。
编写CJM非常耗时，但是请记住，这也是一种设计。 也许这比我们在图形编辑器中所做的设计还要多。最后一部分非常重要。 刚开始的设计师总是忽略分析阶段，而是立即开始绘制。 一开始我做了同样的事情，但是，当我开始使用所描述的过程之后，我的项目变得更加周到。
在这种情况下，方案将很小（网站→应用程序），但是即使在该方案上，用户也可能会遇到问题。
例如，它可能不表示对您的服务的信任（添加评论，保修？），网站的外观看起来不佳（更改外观样式？），SMS代码不会出现（您是否重新发送，添加在线支持？），...
阶段摘要：
您需要了解用户的方式可能会出现什么问题，并提出避免这些问题的几种解决方案。4）创建框架
框架是围绕其构建界面元素的结构。 例如，在Gmail邮件服务中，有一个顶部搜索栏，一个左侧菜单和一个右侧部分用于电子邮件。 这样的结构就是框架。
之所以存在设计者，是因为没有通用框架。 每个服务都需要自己的服务。 当然，有顶层设计规则，但是经过更深入的了解后，您需要提出自己的解决方案，否则用户将无法以最佳方式解决其问题。 就像踩着你的手。 有运动，但是如果您使用双腿，则效果不明显。
就站点而言，框架是在研究阶段由书面实体组装而成的顺序块。 如果您的业务是独特的，则必须提出自己的想法，但是，正如实践所示，大多数公司都有几个直接的竞争对手，他们的经验可以被采用。
***
访问者到达网站后会做什么？ 如果他熟悉该服务，那么他将立即进行注册或输入。 如果不是这样，那么对他来说翻遍整个主页以寻找逻辑上和情感上的确认将很有趣。 为了使用户在研究整个页面时不会丢失应用程序下载表格，最好在下面进行复制。
让我们回想一下Wheely网站的结构：下载应用程序，关于驾驶员，汽车，保险，下载应用程序，评论。
如您所见，在页面的开始和结束处，重复了关键操作，以便浏览所有块的站点访问者不会离开。 这条规则适用于所有人。
必须根据我们项目的类型来选择站点的主要区域。 商务舱出租车订单服务需要显示其状态和与常规服务的区别。 Wheely使用西装上的驾驶员照片和一系列功能（例如在雨中遇见雨伞）来进行此操作。 如果您的服务没有其他功能，则可以使用竞争对手的结构。 但通常，直接竞争对手会出现需要强调的任何功能。
假设您的服务仅雇用女性司机。 在这种情况下，您需要使用照片进行显示，并说明为什么女孩的驾驶员是最佳选择的原因（通常由客户提供内容）。
对名人的评论和流行媒体出版物的链接将永远不会阻止此类服务。 这增加了信任度，这在Internet时代非常重要。
为了更加清晰，请使用该应用程序的屏幕快照及其主要功能描述来演示一个块。 不要期望他会受到密切关注，但是他的存在会增加自信。
要确定所需的站点结构，只需写出竞争对手使用的所有实体并选择最适合您的业务的实体，然后将它们稍作更改即可完成您的任务。
在某个领域获得胜任力后，您将不必每次都经历此阶段，您将能够使用自己的成就并定期保持其重要性。 这就是为什么设计师和工作室专注于任何领域都是有利可图的。
阶段摘要：
您必须了解将使用什么实体（块）以及使用什么顺序。 如果将其以草图的形式装在纸上或文本文档中会更好。5）视觉风格搜索
我编写了有关此阶段的单独
材料 ，其主要思想如下：
要了解的主要是视觉样式必须与品牌信息相匹配。 这是您工作的主要标准。 样式可以是时尚，无聊，未来派或其他任何样式，根本不重要。 重要的是他唤醒必要的情绪。
商务类出租车服务网站应该引起什么情感？ 他应该表现出高水平的优质和优质服务，这是合乎逻辑的。 有几种方法可以实现此目的。
首先是色彩。 如果您查看高级品牌，它们主要使用黑色或金色。 这不是教条，特别是因为我们的主要竞争对手Wheely已经使用黑色。 因此，要脱颖而出，您需要选择其他东西。 例如，添加其他颜色（金色，黄色？）或选择红色作为主要颜色。 一个意外的解决方案，但它可能会起作用。 例如，维珍大西洋航空使用红色，尽管它提供企业级服务。
第二个是图像。 进入站点，您会立即看到动作-打开黑色梅赛德斯的车门，由此站点可以吸引访问者必要的情绪。
第三是信息图表。 有时，设计人员会采用最初出现的图标，而不考虑他们携带的视觉信息。 查看Google提供哪些图标自定义选项。 您可以在此处自定义图标的样式并选择最合适的图标。 可以在flaticon.com上查看各种样式。 您可以试验的主要参数是颜色或黑白，泛色或轮廓，是否舍入。
阶段摘要：
您必须确定项目应携带的消息，并为其选择颜色，图像样式，图标（或不使用它们）和字体。6）布局设计
确定结构和视觉样式后，您可以继续进行屏幕的设计。 没什么可说的，尤其是在简单的网站上。 您只需要将您的想法变为现实即可。
如果您正在使用大型服务，则应从主脚本中的屏幕开始。 在上面，您可以确定样式，结构并向客户进行首次演示。 对于该站点，您需要从主页开始并在其上计算样式，然后将其缩放到其他页面。
通常，我是手工制作网站的初稿，只有在确定结构后，我才去图形编辑器（我在Figma上已经六个月了）。 拍摄1-2个屏幕后，我暂停一下，然后尝试查找缺陷。 因此，我前进到页脚，之后我仍然可以进行一些迭代来改善站点。
阶段摘要：
必要布局的设计已准备就绪，并已进行了多次迭代的改进。***
在本文中，我展示了创建简单设计项目的过程。 初学者可以安全地将其用作模板，并根据需要和喜好对其进行修改。
所描述的过程最适合客户工作，因为在杂货店中它会略有不同。
而不是结论
要了解的主要问题是，没有任何材料可以代替实践。 刚开始应用在工作中获得的知识，就可以指望取得进展。
他们都是从零开始，并且逐年提高自己的技能。 这是非常简单，但同时也是在任何领域都取得显著成果的基础。
从战略上看待您的职业，让每个工作日都朝着实现职业目标迈出新一步。