速度设计简介 (Intro to Speed Designing)

I’ve been an advocate of speed redesigning technique for a while. The idea is simple — decrease the hand-eye lag and make super quick decisions, seemingly without thinking. The logic behind it is that after you practice enough, you’ll actually be able to make the right choices automatically.

我提倡速度重新设计技术已有一段时间了。 这个想法很简单-减少手眼的时滞并做出超快速的决定，似乎没有考虑。 这样做的逻辑是，经过足够的练习，您实际上将能够自动做出正确的选择。

And even if you make a wrong one, you’ll have a result much quicker than you can then refine. Some have thought, that it was to undermine the proper UX process™ but in reality, it gave you a possibility to have something substantial to show before those meetings even start. And when the design process is currently becoming a lot faster and less cluttered, it can be a good addition to any skillset.

即使您输入了错误的结果 ，也将比随后的改进快得多。 有人认为这是在破坏适当的UX进程 ™，但实际上， 它使您有可能在会议开始之前就展示一些实质性内容 。 而且，当设计过程目前变得越来越快且变得混乱时，对于任何技能组来说，它都是很好的补充。

You can read more about the technique here:

您可以在此处阅读有关该技术的更多信息：

迷你案例研究：重新设计信号应用程序 (Mini Case-Study: Signal app redesign)

I’m in the middle of writing a chapter on Dark Mode for UI Design Styles right now, but the examples I chose to illustrate it (the Signal messenger app) had some other problems in them. Usually ones that are quite easy to fix.

我现在正在写一章有关UI设计样式的深色模式的文章，但是我选择说明的示例(Signal Messenger应用程序)中还有其他问题。 通常那些很容易修复。

Dark mode will only be a backdrop here, a mere illustration to show the thought process in the overall fix. Of course that redesign was completely unsolicited . Now when we have that out of the way let’s start.

黑暗模式在这里仅是一个背景，仅是说明整个修复过程中思维过程的图示。 当然，重新设计完全是不请自来的。 现在，当我们解决了这个问题时，让我们开始吧。

主画面 (The home screen)

Starting with the message list screen we first identify the left margin. It’s usually the easiest way to begin a visual redesign. Then to check proportions of objects I created a red circle the size of the profile picture.

从消息列表屏幕开始，我们首先确定左边距。 通常，这是开始视觉重新设计的最简单方法。 然后，为了检查对象的比例，我创建了一个红色的圆圈，该圆圈的大小与个人资料图片的大小相同。

As you can see in the middle screen not everything has the same alignment on the sides, and the icons are proportionally bigger than they should be.

如您在中间屏幕中看到的，并不是所有的东西在侧面都具有相同的对齐方式，并且图标成比例地大于其应有的大小。

Of course the margins don’t always have to be completely the same, but in this case it seems that it wasn’t a planned approach, but rather a front-end developer coded it this way.

当然，利润并不总是必须完全相同，但是在这种情况下，这似乎不是计划的方法，而是前端开发人员以这种方式进行了编码。

下一步：创意 (Next step: ideas)

After we create our little grid and define at least two spacing values it’s time to take a look at the navigation. It’s very likely that the new message button (currently: top-right) will be used pretty often. I moved it to the bottom right, where it’s easily accessible by the thumb.

创建小网格并定义至少两个间距值之后，就该看看导航了。 新消息按钮(当前：右上角)很有可能会经常使用。 我将其移至右下角，拇指可以轻松访问该位置。

Another idea, which can be a bit controversial was to make a more readable messages view. Of course that comes at a cost of seeing less messages on screen. In this case I’d suggest an option for a normal and “condensed” mode in the settings to cater to all the preferences.

另一个可能引起争议的想法是使消息视图更具可读性。 当然，这是以在屏幕上看到较少消息为代价的。 在这种情况下，我建议在设置中为普通和“浓缩”模式提供一个选项，以适应所有首选项。

故事吗 真？ ♂‍♂️ (Stories? Really? 🤦‍♂️)

“Stories” here are simply group-chats or open messages “to all my friends” that you can jump into from the top of the screen. That’s a bit “dribbbly” in the approach, and the case for it needs to be defended, but it’s another conversation starter.

这里的“故事”只是群聊或“发给所有朋友”的公开消息，您可以从屏幕顶部跳入。 这种方法有点“摇摇欲坠”，需要辩护，但这是另一个开始的话题。

Plus, it’s a lot easier to distinguish group chats from regular messages that way.

此外，以这种方式将群聊与常规消息区分开来要容易得多。

Once again — coming up with a quick idea like that can lead to some interesting discussions on the proper UX meeting. And it’s always easy to remove it and shrink the navbar.

再次提出一个类似这样的快速想法可以导致在适当的UX会议上进行一些有趣的讨论。 而且，将其删除并缩小导航栏总是很容易的。

讯息检视 (Message view)

The original message view was actually pretty good already, taking cues from iMessage and other, similar apps. I did however notice a weird alignment in the top part, and very highly condensed messages as the two main pain-points.

原来的消息视图实际上已经非常不错，可以从iMessage和其他类似的应用程序中获得提示。 但是，我确实注意到顶部有一个奇怪的对齐方式，并且高度浓缩的消息是两个主要的痛点。

Let’s take a look at that header.

让我们看一下标题。

The original back chevron is a bit too close to the left side compared to the phone icon on the right. I understand that native iOS enforces a special position for the back arrow, but if we’re already placing the phone icon at some distance from the right, then maybe it’s good to go all the way and make a custom navbar?

与右侧的电话图标相比，原始的后V形人字形过于靠近左侧。 我知道本机iOS会为后退箭头强制设置特殊位置，但是如果我们已经将电话图标放置在距右侧一定距离的位置，那么最好一直进行并自定义导航栏？

You know… with a proper alignment for the arrow? That top-left edge of the screen brings balance to the entire product going down along the left-side. (In the ltr reading countries, but the margins should be the same on both sides, so rtl would work the same way)

您知道吗……箭头是否正确对齐？ 屏幕的左上边缘为整个产品沿着左侧下降提供了平衡。 (在ltr阅读国家/地区，但双方的利润率应相同，因此rtl的工作方式相同)

So once again adding our safe-space arrows and all the elements in and using the left-spacing from the previous screen and half-of it to re-align those objects slightly.

因此，再次添加安全空间箭头和其中的所有元素，并使用上一个屏幕的左间距和其中的一半来稍微重新对齐这些对象。

While we’re at it I’m also changing the phone icon to make it just a tiny bit smaller.

在此过程中，我还更改了电话图标，使其尺寸缩小了一点。

通过明确说明，您可以拥有更好的想法。 (By bringing clarity you allow yourself to have better ideas.)

The first rule is to fix the grids, proportions, fonts and colors. Then you can add some decorative tweaks (like a gradient background) but those initial changes will allow you to see the app in a whole new light.

第一条规则是固定网格，比例，字体和颜色。 然后，您可以添加一些装饰性调整(例如渐变背景)，但这些初始更改将使您以全新的眼光看待该应用。

Your brain won’t have to process the bad alignment anymore so it can use all that power to come up with better UX ideas as well.

您的大脑不再需要处理错误的对齐方式，因此它也可以利用所有功能提出更好的UX想法。

快速设计→测试→修改。 (Design fast → test → modify.)

The goal of this approach is simple. Before your senior UXers can even find their stack of colorful post-its for the kickoff workshop, you already have a redesign to discuss on that meeting. And it’s not “just pretty pictures”.

这种方法的目标很简单。 在您的高级UX用户甚至无法为启动研讨会找到他们五颜六色的便利贴之前，您已经进行了重新设计，可以在该会议上进行讨论。 这不是“漂亮的图片”。

Making something look good gives you perspective to make it better on all the other planes of its existence too.

使事物看起来不错，也可以使您在存在的所有其他方面也使其变得更好。

Don’t forget to test your assumptions both on your colleagues and on the actual users. This approach doesn’t replace the right process. It just comes in before, because by working on autopilot you can actually come up with some great ideas.

不要忘了在同事和实际用户上检验您的假设。 这种方法不能替代正确的过程。 它只是出现在前面，因为通过自动驾驶工作，您实际上可以想到一些很棒的主意。

设计也应该很有趣。 (Design should be fun too.)

Now, set a timer to 90 minutes and go make something awesome!

现在，将计时器设置为90分钟，然后做点很棒的事情！

Design should be fun. Be playful and explore.

设计应该很有趣。 好玩，探索。

下一步是什么？ (What’s next?)

The upcoming Dark Mode chapter is a free supplement for the 📕 Designing User Interfaces book. You can get 50 pages for free here. You can also watch some of my 📺 YouTube tutorials on design, or check out my agency :-)

即将推出的“暗模式”一章是《 设计用户界面》一书的免费补充。 您可以在这里免费获得50页。 您也可以观看我的某些YouTube设计教程 ，或查看我的代理商 ：-)

If you haven’t already go follow UX Collective as well for more awesome design content daily!

如果您还没有去过UX Collective，那么请每天精彩的设计内容！