dell perch330_重建Perch UI-而不是通常的重新设计

dell perch330

We launched Perch CMS at the end of May 2009. Quite a lot has happened on the web since then, and Perch is still the choice of thousands of web designers building sites for their clients.

我们于2009年5月底启动了Perch CMS 。自那时以来，网络上发生了很多事情，而Perch仍然是成千上万为他们的客户构建网站的Web设计师的选择。

The web has changed a lot and so has Perch. We now have a companion product for larger sites in Perch Runway, and have just launched a full-scale e-commerce system for the products – Perch Shop. With the Shop launch out of the way we are turning our thoughts to what’s next, and part of that is our first full-scale UI rebuild.

网络发生了很大变化，Perch也发生了变化。 现在，我们在Perch跑道上有针对较大站点的配套产品，并且刚刚启动了针对该产品的全面电子商务系统– Perch Shop 。 随着Shop的发布，我们将思想转向了下一步，其中一部分是我们第一次全面的UI重建。

There are significant challenges in developing the Perch UI, and I thought that the process might be interesting to document. So this will be the first in a series of posts as I do this work. In this first post I’ll explain some of the issues we face, for those of you not familiar with Perch.

开发Perch UI面临着巨大的挑战，我认为该过程可能很有趣。 因此，这将是我从事这项工作的系列文章中的第一篇。 在第一篇文章中，我将为不熟悉Perch的您解释我们面临的一些问题。

当前的Perch用户界面 (The current Perch UI)

The very first version of Perch was a very simple content editor, there wasn’t a lot to think about. It was also launched in 2009 – pre-responsive design, and before we imagined anyone would want to edit CMS content on a phone.

Perch的第一个版本是一个非常简单的内容编辑器，没什么可考虑的。 它也是在2009年推出的–响应前设计，在我们以为没有人想在手机上编辑CMS内容之前。

By the time we launched Perch 2, responsive design was more of a thing and we made some basic changes to make the admin UI reasonably responsive. However, from a business perspective, we were not being asked for a responsive control panel, there were other places we needed to invest time.

在我们启动Perch 2时，响应式设计已经成为一件大事，并且我们进行了一些基本更改以使admin UI具有合理的响应性。 但是，从业务角度来看，没有要求我们提供响应快速的控制面板，我们还有其他地方需要花费时间。

Possibly more of an issue than responsiveness has simply been that Perch as a system is outgrowing the original UI. Launching something like Shop, means that the interface has to cope with far more complexity than we ever imagined. We have large data tables for reports, complex forms, and the need for the easy display and navigation around large datasets.

可能比响应能力更重要的问题是，Perch作为一个系统正在超越原始UI。 启动诸如Shop之类的工具意味着接口必须应对比我们想象的要复杂得多的工作。 我们有用于报表，复杂表格的大型数据表，并且需要在大型数据集周围轻松显示和导航。

Making changes to something that thousands of people use every day is daunting. While the Perch UI is getting long in the tooth it does work very well. We only rarely have reports of browser bugs; we don’t have issues of janky scrolling or other front-end weirdness. We need to be sure that by making one thing better, we don’t inadvertently make other things worse!

对成千上万的人每天使用的东西进行更改令人生畏。 虽然Perch用户界面越来越长，但它的工作原理非常好。 我们很少有关于浏览器错误的报告。 我们没有麻烦的滚动或其他前端怪异的问题。 我们需要确保通过使一件事情变得更好，我们不会无意中使其他事情变得更糟！

重建目标 (Aims of the rebuild )

The core aim of the rebuild is to make the content editing experience on mobile a first class citizen. We now know that many people do want to update their CMS, post to the blog and create products for their Shop right from their smartphone. We also want to rebuild the Control Panel based on what Perch is now – a fully fledged CMS – rather than continue to tweak a design that was developed for a much simpler system.

重建的核心目的是使移动端的内容编辑体验成为一流的公民。 现在我们知道，很多人确实希望通过智能手机更新CMS ，发布到博客并为其商店创建产品。 我们还希望基于Perch现在的功能（完全成熟的CMS）来重建控制面板，而不是继续调整针对更简单的系统开发的设计。

It is also a good change for us to reassess any front-end technology decisions, and also to create a pattern library for the Perch UI. This will be an asset useful for us internally but also for anyone developing add-ons for Perch.

对我们来说，重新评估任何前端技术决策，并为Perch UI创建模式库也是一个不错的变化。 这对于我们内部而言将是一项有用的资产，对于任何为Perch开发附件的人也将是有用的。

Every decision we make has to take into account a lot of things, Perch is quite a different beast to a regular website project or even a hosted SaaS application. Here are just some of the things that impact every decision we make.

我们做出的每个决定都必须考虑到很多因素，对于常规的网站项目甚至是托管的SaaS应用程序，Perch都是完全不同的野兽。 以下只是一些影响我们做出的每项决定的因素。

我们的顾客。 他们的顾客。 (Our customers. Their customers.)

Our customers are typically the web designers and developers who build websites for their clients. In most cases they are the ones making the technology decision.

我们的客户通常是为客户构建网站的Web设计人员和开发人员。 在大多数情况下，他们是技术决策者。

In Perch and Perch Runway we have a first-class system for truly managing web content in a structured way. It turns out that a CMS decision quite often has nothing to do with the content management abilities of the platform. Instead a CMS will be selected on the availability of certain plugins, if it will fit into an existing workflow, if it looks easy or fun to build with. Think about it, how often do the actual content management features of a CMS get mentioned in CMS recommendations?

在Perch和Perch Runway中，我们拥有一流的系统，可以以结构化的方式真正管理Web内容。 事实证明， CMS的决策通常与平台的内容管理能力无关。 取而代之的是，如果某个CMS适合现有的工作流程，并且构建起来看起来很容易或很有趣，则将选择CMS的可用性。 考虑一下， CMS建议中多久提及一次CMS的实际内容管理功能？

We have to appeal to our customers, however we also care deeply about the experience of their customers. Clients, content editors, people who have to use the CMS every day. Ultimately the fact that end clients love using Perch is often why a web designer will continue to choose our software, happy clients make for a peaceful life as a web designer or agency! And as people who write for the web, we want to make creating content an enjoyable or at least non-stressful thing.

我们必须吸引客户，但是我们也非常关注客户的体验。 客户，内容编辑，每天必须使用CMS的人员 。 最终，最终客户喜欢使用Perch的事实通常是为什么Web设计师会继续选择我们的软件，而幸福的客户则使Web设计师或代理人过上和平的生活！ 作为为网络写作的人们，我们希望使创作内容成为一件令人愉快或至少没有压力的事情。

Any work we do has to appeal to a web designer who is assessing whether they want to use Perch, but also meet our goals of providing an excellent content editing experience for the end user.

我们所做的任何工作都必须吸引正在评估他们是否要使用Perch的Web设计师，同时还要满足我们为最终用户提供出色的内容编辑体验的目标。

可靠，快速且易于访问的软件，通过“良好演示” (Solid, fast and accessible software over “good demo”)

It is a frustrating fact of our life that the work we do to develop true structured content management, to make Perch really really fast, to make it even work at all on many of the hosting environments we encounter, to ensure it is accessible will never win us kudos across social media. This kind of work, you only know it is working, because you hear nothing.

我们生活中一个令人沮丧的事实是，我们为开发真正的结构化内容管理，使Perch真正地变得非常快，使其甚至在我们遇到的许多托管环境中都可以工作而做的工作，以确保它永远不会被访问。在社交媒体上赢得我们的荣誉。 这种工作，您只会知道它正在工作，因为您什么也听不到。

We could throw time into shiny features that make for good demo, that might get us some tweets or the praise of our peers. They might get us a few more customers, drawn in by the new shiny, however we won’t ever prioritise the shiny over speed, accessibility or common sense in day to day use by content editors. That’s just not how we roll.

我们可以花一些时间在一些闪亮的功能上，这些功能可以使您获得良好的演示效果，从而获得一些推文或同行的好评。 他们可能会通过新的Shiny吸引我们更多的客户，但是在内容编辑者日常使用中，我们永远不会将Shiny放在优先于速度，可访问性或常识上。 那不是我们滚动的方式。

渐进式增强是这里的工作方式 (Progressive Enhancement is how things are done around here)

The Perch Control Panel is progressively enhanced. Almost all functionality of Perch is available even if you completely disable JavaScript, or if JavaScript fails to load.

Perch控制面板逐渐增强。 即使完全禁用JavaScript或无法加载JavaScript，Perch的几乎所有功能都可用。

I believe that progressive enhancement is the best way to ensure that the Control Panel is available to everyone, no matter how limited the device they are using is. This approach has served us well, we have anecdotal evidence of a customer who suddenly realised that their client had someone who would be using a screenreader when working with the CMS. We’d not tested the UI with a screenreader but our careful approach meant that it just worked. It’s amazing how many things “just work” when you develop with care.

我认为，渐进增强功能是确保“控制面板”对所有人可用的最佳方法，无论他们使用的设备有多有限。 这种方法对我们非常有用，我们有一个客户的轶事证据，该客户突然意识到他们的客户中有人在与CMS一起工作时会使用屏幕阅读器。 我们没有使用屏幕阅读器来测试UI，但是我们谨慎的方法意味着它可以正常工作。 当您谨慎地进行开发时，令人惊讶的是有多少事情“有效”。

That said, careful use of JavaScript obviously enhances the experience for most users and can be used to improve accessibility. However our approach means that we can’t simply throw ourselves wholesale into one of the popular frameworks – even if that might save us a lot of time initially.

也就是说，认真使用JavaScript显然可以提高大多数用户的使用体验，并且可以用来改善可访问性。 但是，我们的方法意味着我们不能简单地将自己投入大量流行的框架之一中，即使最初可以为我们节省大量时间。

技术挑战 (Technical Challenges)

in addition to the different types of customers we cater for and the fact we are a tiny team and so need to prioritise what we do, there are certain facts about Perch that create challenges in the UI.

除了我们迎合的不同类型的客户以及我们是一个很小的团队，因此需要优先考虑我们要做的事情之外，还有一些有关Perch的事实，这些事实在UI中造成了挑战。

我们不知道Perch在哪里运行 (We have no idea where Perch is running)

Perch is self-hosted. Our customers download the software and install it on their web hosting. This web hosting is often terrible and places huge limitations in terms of what we can reasonably expect to be on the server. Oversold shared web hosting is also often incredibly slow. This can make the whole experience of using our software slow and laggy – before we even do anything.

鲈鱼是自托管的。 我们的客户下载该软件并将其安装在其虚拟主机上。 这种虚拟主机通常很糟糕，并且就我们可以合理预期的服务器上的服务器设置了巨大的限制。 超卖的共享虚拟主机通常也非常慢。 这甚至会使我们在进行任何操作之前，就缓慢而缓慢地使用软件。

In addition to poor hosting we are also at the mercy of how Perch is deployed. We often see in support people who have managed to fail to upload bits of the software – that might include a JavaScript file or anything else. We try and be as robust as possible to limit breakage should that occur.

除了不良的托管服务，我们还受制于Perch的部署方式。 在支持人员中，我们经常看到那些未能成功上载软件位的人-其中可能包括JavaScript文件或其他内容。 我们会尽力而为，以限制发生破损的情况。

我们不知道任何单独的安装是什么样的 (We have no idea what any individual install looks like)

In Perch the templates you create for your content, which are often then used for output, also become the schema and therefore create the admin UI. This means that we have no idea what any individual edit form a user might have looks like! An edit form could be anything from a single large text field with a WYSIWYG editor, to a complex form capturing granular structured data via many different field types.

在Perch中，您为内容创建的模板（通常随后用于输出）也成为架构，因此创建了管理UI。 这意味着我们不知道用户可能会有什么样的个人编辑形式！ 编辑表单可以是任何形式，从使用WYSIWYG编辑器的单个大文本字段到通过许多不同字段类型捕获粒度结构化数据的复杂表单。

The Control Panel may have a large number of our add-ons installed, or none. The developer may also have disabled chunks of functionality for content editors – giving them a more streamlined editing experience, but again we don’t know what any individual site has chosen to do.

控制面板可能安装了很多我们的附加组件，或者没有。 开发人员可能还禁用了内容编辑器的大部分功能，从而为他们提供了更简化的编辑体验，但是同样，我们也不知道任何单个站点选择做什么。

一切都必须与API一起使用 (Everything has to also work with the API)

Perch has an API, so the work we do on the Control Panel also has to work well in our official add-ons – from the MailChimp App to our full e-commerce system Perch Shop. It also needs to be simple for anyone who has developed an add-on using the API to update existing applications.

Perch有一个API ，因此我们在控制面板上所做的工作也必须在我们的官方插件中正常工作-从MailChimp App到我们完整的电子商务系统Perch Shop。 对于使用API开发了用于更新现有应用程序的附加组件的用户来说，它也应该很简单。

Ideally the new work should make it easier for add-on developers to see how they can use our UI elements to create add-ons that feel fully part of Perch.

理想情况下，新工作应该使附加组件开发人员更容易看到他们如何使用我们的UI元素来创建完全属于Perch的附加组件。

Perch用户界面已翻译 (The Perch UI is translated)

We have people using Perch all over the world and the Control Panel can be translated by way of a simple approach of a text file of strings. This means that we see Perch in Japanese, in Hebrew and in languages with incredibly long words such as German. The UI has to cope with all of these.

我们在世界各地都有使用Perch的人员，并且可以通过简单的字符串文本文件方式来翻译“控制面板”。 这意味着我们可以用日语，希伯来语以及诸如德语之类的长单词来观察鲈鱼。 用户界面必须应对所有这些问题。

启用UI自定义 (Enabling UI Customisation)

We currently allow people to change simple things about the interface – adding a client logo, changing the main colours and turning off the Perch branding. We’d like to enable more of this as people enjoy being able to make the CMS their own – or brand it up for each individual project.

当前，我们允许人们更改有关界面的简单内容-添加客户徽标，更改主要颜色并关闭Perch品牌。 当人们喜欢自己制作CMS或为每个单独的项目建立品牌时，我们希望启用更多功能。

下一步 (Next steps)

I have explained some of the things I’m currently thinking about as we move into actually doing this work. I mentioned that one of our aims with this redesign was to create a pattern library for the Perch UI. In my next post I’ll talk about that process, why we think it is important and the technology we decided to use.

在我们实际进行这项工作时，我已经解释了我目前正在考虑的一些事情。 我提到过，我们进行重新设计的目的之一是为Perch UI创建一个模式库。 在我的下一篇文章中，我将讨论该过程，为什么我们认为它很重要以及我们决定使用的技术。

翻译自: https://rachelandrew.co.uk/archives/2016/05/03/rebuilding-the-perch-ui-not-your-usual-redesign/

dell perch330