👇🏽 👨🏻‍🌾 🚌 没有设计师的产品设计 🤰🏽 💨 👩🏾‍🏭

我在KORUS Consulting CIS工作了3年，在此期间，我参与了19种B2B服务的设计。交互设计通常与Axure，InVision，Moqups，Framer（插入您喜欢的选项）相关联，但是我的工具是HTML，SCSS和AngularJs。我将告诉您保存HTML模板的通常做法是如何在成熟的布局历程中发展的，以及由一名艺术总监领导的一组排字机如何设计了与KORUS Consulting CIS产品的接口的交互，为期六年。

以及为什么它起作用。

艾伦·库珀（Alan Cooper）在“患者手中的精神病院”一章的“交互设计师来自何处”一书中写道，开发的任何参与者都容易找到必要的技能。设计可以由项目经理，分析师，技术撰稿人，营销人员，开发人员执行。最好由另一位专家（最好是设计师）来接管此功能。KORUS将此角色赋予了编码人员。但不是一次。

拒绝Photoshop

直到2019年，KORUS都没有设计师。直到2011年，再也没有人听说过“用户体验”这样的事情。作为一个自重的软件开发人员，该公司试图将产品快速推向市场，而分析师和开发人员则负责界面的外观和行为。主要是开发人员。

因此，当2011年一位具有设计师技能的编码器出现在公司中时，在开发之前就只允许他进入最后阶段。

一位针对KORUS专家的新手（阅读不寻常）遇到了一种典型的开发方案，即当主要功能已经实现时，他被允许移动像素和颜料。听起来像是开发后的设计。库珀先生在精神病医院对此进行了详细描述。 KORUS可以被认为是他的故事的教科书英雄。

Photoshop或其他图形编辑器很难进入此开发过程。从一开始，我们就更加依赖布局，因为它更易于编辑，尤其是在需求不断变化的情况下。您可以将布局交给开发人员。同时进行设计，排版和鼓舞人心的效率要高得多。使用这种方法，在任何编辑器中绘制都是不必要的中间链接，许多人可能会在2011年同意这一点。

拒绝使用设计工具有助于在完善的方案之上奠定新的轨道，并为正确设计接口开辟了很长的路要走。当开发时间有限时，PSD布局只是一个建议，布局更像是一组规则，转身而忘记不可见的情况更加困难。或根据您自己对便利的想法进行考虑。

该布局还允许您保存单个组件，以免下次浪费它们，并且带有这些组件的第一个HTML页面如下所示：

它成为AngularJs上未来套件存储库的第一个砖块。首先，将我们的电子文档管理服务（以下称为“快递”）的印刷表格和各个页面添加到其中。

随着存储库的增长和其中更多的布局，它被称为UIKIT和徽标上的小猫忍者：

2015年，我们公司将所有精力投入到与Sberbank的互动中，并出现了重新粉刷服务的问题。KORUS反复使用这样的事实，即部件和样式方面已经取得了成就：更改颜色足以匹配Beeline，Alfa Bank等的公司样式。由于这种经验，《信使》在短短一个小时内就完成了重新粉刷。

想象一下，如果设计师最初重新粉刷了图形布局，然后布局设计师更改了样式？两个任务-一种解决方案：已经在UIKIT中进行布局。

如何阻止他们做“坏事”？

令人惊讶的是，在最初的4年中，只有一位专家处理所有设计任务。UIKIT中的开发已保存，这节省了很多时间：设计人员设法尽早连接到开发并避免了糟糕的接口解决方案。

产品组合的扩展自然导致了新的版图设计师的出现。这允许鲸鱼忍者分配更多资源，并且布局变得更具交互性。相互链接HTML链接还不够，我们需要更多。使用了JQuery和AngularJs。实时原型主要由分析师评估。您可以单击所有状态，截取屏幕截图并将其粘贴到TK中。

“我们做了与BEM类似的事情，但没有做BEM，因此使所有项目的布局都统一了”

但是，如果布局设计师的一切都清晰明了，难道布局设计师可以仅以准则和自己丰富的排版排版经验来进行指导吗？布局设计师可以将界面组装为设计师，而不必等待有人告诉您将按钮放在何处。他们已经在工具栏中多次看到此按钮。设计师称这种模糊。 KORUS需要可以理解的生活案例，这就是“自然设计”。而且，如果您还记得一个生态系统的产品通常彼此相似，而唯一性只会损害它们，那么我的回答是肯定的。

UIKIT的出现加快了原型制作过程。在项目开始之前，使用可单击的布局演示进行预售，并与客户协调详细信息。最后，开发人员收到了有关接口行为的必要输入，以免在编码过程中直接自己提出接口。

“战线使他们更容易。UIKIT部分使我做对了。”

与AngularJs的交互性

正是这种工作方案在UIKIT出现后才出现在KORUS中：需求的出现，在技术要求中被正式化，版图设计人员立即在Web原型中体现了它。
仍然需要从Internet的深处获取一些框架，在绿色标签下重新粉刷它，并在产品中实现它，以使不仅按钮和标头对于所有服务都统一。

除了框架的控件外，UIKIT还补充了一组图标，小部件，自己的开发和样式。

如果有一个页面布局任务类似于我们服务中的内容，那么我们就完成了，将内容更改为需求，并且包装器和逻辑保持不变。可以配置页面之间的转换，所有按钮和字段都是可单击的，我们可以显示验证，模式窗口，文件上传成功。我们可以使用整个角色模型来表示从正面到负面场景从头到尾的整个用户路径。

统一的界面

重复使用界面的预先设计部分在2015年并不是什么新鲜事。甚至十年前，网络工作室中的布局设计师也因此优化了流程，以免每次都重新排版相同的元素。我们没有发现银河系，但这仅仅是开始。

显然，我们向UIKIT添加布局的次数越多，覆盖现有案例的可能性就越大，并且可以将其进一步应用于新项目。

需要新的用户注册布局吗？我们已经有了它：我们根据业务需求对其进行调整，花费不超过几个小时的时间，现在-注册已准备好转移给开发人员，但可以使用另一项服务。

需要带有公司数据的表格吗？我们在批量服务中的优势：CRTL + C CTRL +V。

对于布局团队而言，最有吸引力的是制服样式。准则就是这样，它指示我们界面的原子元素应该是什么样的。修复这些组件的样式并仅在万不得已时更改它似乎是合理的。无论我们在UIKIT引入多少新产品布局，组件中的样式都集中在一处。为了满足项目本身的需求，有一个单独的产品CSS，您可以在其中自定义一些内容。

在准则，优化和我们自己的经验的影响下，我们始终可以：

输入，按钮，下拉菜单；
桌子，侧面，菜单，工具栏；
表格，时间表，模态窗口；
处理某种贷款申请或创建付款文件的整个流程。

由此，已经可以组装完整的接口，并且由于有了AngularJs，在布局上可以实现生产的交互性，这在客户中非常受欢迎。

秘密地说，我会在UIKIT上为客户进行几次演示，因为在演示之前我们有一个测试台。

工作回路

时间的流逝，UIKIT的思想启发者和创造者成为艺术总监，项目越来越多。谁将继续这项伟大的工作-使用已经开发的功能设计HTML接口？布局设计师，当然。

要说布局设计师对于与分析师紧密合作并通过可用性独立思考的前景感到非常高兴，这是一个小技巧。仍然，每个人（我？）都习惯于这样一个事实，即布局设计师是一位专家，他会从设计师那里收到一个布局，然后将其裁剪并转换为网页。交互设计增加了机械工作的特殊性，但尚未研究。但是，有一位不断修改我们的工作并提出正确做事建议的人在场，我们得到了帮助。而且他不仅提示，还提到了权威资料，以便我们也阅读它们并减少错误。艺术总监不断指出Fitts的一些定律，然后是商务写作的规则，然后是格式化文本，强调元素……我们拒绝了，但吸收了信息。

今天我们可以并排放置两个绿色按钮-明天我们不这样做，因为我们知道：具有目标操作的按钮应该每页一个。

今天，所有输入都固定在相同的宽度，明天我们将使TIN字段完全适合内容。因此，用户可以更好地阅读期望从他那里获得数据的时间。

该过程开始进行。布局设计师根据分析师的业务需求来收集界面，与美术指导协调他们的决定，然后进行开发。

我们成长为设计师，学会了决策，在独立性的熏陶下扩大了任务范围，而这些任务不需要艺术总监的全神贯注。

在该管道中的某个地方出现了GitLab，它是布局的回顾，它使用js改进了可视化。

如果版图设计师面临艰巨的非标准任务，那么美术总监将与他们联系并帮助提出解决方案。当时他本人设计了新产品的概念。
我们提供了2-3个选项以帮助我们理解该问题，他选择了一个选项并表示如何进行改进。有时候，他只是简单地说“好”，而我们很高兴得知我们已达到目标。但是，有时我们没有足够的反馈来了解我们的解决方案对用户的便利性和可理解性，甚至对美术指导者是否明确。怀疑使我们一次又一次尝试以几种方式解释需求。

我们的领导人对此有自己的看法。他说，这种方式使我们思考。每个人都以自己的方式评估过程。我以为我在节省自己和他的时间。就像，让我一次向您展示三个选择，以免走路三遍。对我来说，对火炮进行了A / B / C测试。

当然，尽管我们学到了很多东西（只是看看这位布局设计师是如何引用设计书的）。

如您所知，在此过程中，没有详细考虑UX和UX分析的地方。虽然用这样的工具会进行测试和测试。使用了艺术总监在原型制作阶段最初放入布局中的内容。利益相关者，经理和分析师已经发明并描述了所有新功能。不是编码员。这是一个负号，因为我们不能总是最终得出结论，解释为什么企业已经发明的解决方案不适合。

在输出中，排字员从分析师那里收到了Confluence的一些描述-例如：

:
:
: « »
« » checkbox .
tooltip .

甚至在大教堂的正方形上使用了非人格化的动作来显示该页面上元素的位置和目的。

有时，我们会收到来自分析师的任务，措辞如下：

尽管UIKIT进入了公司的工具栈，但没有UX分析，除了艺术总监的遗言之外，没有做出任何界面决定的重要理由。但是，我们通往完美互动的道路仍在继续。

随着时间的流逝，我们能够找到一种通用语言并划分界面质量和可用性的责任范围。

总的来说，创建产品布局的整个过程如下所示：

- , UIKIT. , , , ;
, . , -, , . ;
布局设计师采用了新项目的边界并对其进行了补充，将其置于更详细的技术任务之下。如果起初客户希望一步一步完成应用程序的填写，然后分两步完成，则布局设计人员可以轻松地实现这一点。将来，布局可能会发生变化，以至于无法识别，并且从原始版本开始，只有样式原则上不会发生变化。所有这些都是与美术指导逐步讨论的。在第一阶段，将原型从两天分配到几周，然后开发可以持续数年。在这样的项目中，我们的经理有时会“重新突袭”重新设计，以补偿增加的关键功能，并以新的方式重新考虑界面。

UIKIT团队花了两年时间才完成此过程。

视觉演示

在所有阶段，都可以使用该布局向客户和团队进行演示。这是UIKIT的最大优势之一。

对于客户而言，有什么比跟随链接并自己单击布局并查看界面的行为更方便和理解的？他可以评估和更正文本，然后将其投入生产。有时由客户组成的布局改变了任务的想法，他可以理解他的想法是不可行的并且同意改变。如果用言语确定他可以轻松将包含150个字段的调查表放到界面中，那么在布局中，他清楚地看到需要改进。最重要的是，将此配置文件丢到UIKIT中很便宜。

一个小例子：

首先无可争辩的最终要求：

在过程中看到的妥协：

可能有人会注意到Axure，Figma和Marvel具有我描述的所有UIKIT优势...但是其中一些在技术选择阶段不存在，而其他人则被拒绝作为设计和布局之间的额外纽带。
UIKIT不仅提供了组装原型的机会，还提供了组装成成品的产品界面的机会，然后该界面就可以投入使用。

公司认可

到2020年，UIKIT拥有38个现有项目的模型，其中13个正在开发中。这是四年的丰富经验，您可以从艺术总监到测试人员找到上千种不同专家的解决方案。它们都遵循css和页面构建的一般规则。

随着时间的流逝，我们需要连接新的插件，为UIKIT组织几个展位（我们内部用于当前开发，外部用于固定版本，将要开发），添加样式的版本控制，开始将样式包导入到工件和联系中，然后使用npm包将媒体文件传输到CDN。然后我们切换到SASS。一个看似普通的布局网站集通过部署，团队更新和对未来改进的积极讨论，变成了一个成熟的项目。就是说，我们的项目起初只是帮助快速进行原型制作，后来变成了具有固有流程的成熟产品。

UIKIT受到客户，分析师，开发人员的喜欢，然后测试人员也对此表示赞赏。

一天，我收到客户开发团队提出的一个具有里程碑意义的问题：

“鲸鱼的布局是什么时候？它们比要求要方便得多。”

对我来说，作为一名布局设计师，这句话很受宠若惊。但最好不要这样做，请阅读要求。

在这一重要时刻，UIKIT团队固执己见，甚至在同事中也认可了该工具。该项目的商业价值为零，这意味着其开发完全取决于排字工人。除了当前的任务，他们继续优化工作。我喜欢看看我们的忍者套装多年来增长了多少，虽然实力不亚于现代人偶，但得益于精巧的版面设计，并超越了它。

我的下一个故事将是关于使用UIKIT进行设计的技术细节，关于我们的电路一旦寿命过长，以及我们将采取什么步骤进行开发。

没有设计师的产品设计