敏捷开发创始人

by Simon McCade

西蒙·麦卡德(Simon McCade)

开发人员和技术创始人如何将他们的想法转化为UI设计 (How developers and tech founders can turn their ideas into UI design)

Discover how to turn a great idea for a product or service into a beautiful UI design for a web or mobile app with this simplified guide for tech startups.

通过本面向技术创业公司的简化指南，探索如何将产品或服务的好主意变成用于Web或移动应用程序的精美UI设计。

Turning brilliant ideas into beautifully designed user interfaces for web and mobile apps is time-consuming. It is an often difficult task for developers and tech founders to undertake.

将出色的想法转化为设计精美的Web和移动应用程序用户界面非常耗时。对于开发人员和技术创始人而言，这通常是一项艰巨的任务。

It might seem like it should be a straightforward process after the ‘Eureka!’ moment. The reality is that a lack of design experience in even the most technical of engineers can prevent an app from performing at the top of its game — at least as far as users are concerned.

在“尤里卡！”之后，这似乎应该是一个简单的过程。时刻。现实情况是，即使是技术最熟练的工程师也缺乏设计经验，这可能会阻止应用程序在其游戏的最高端运行-至少就用户而言。

At this stage, I’m going to assume you’ve conducted some user research. Or at the very least, spoken to potential customers to test your assumptions. That way you’ll be much better positioned to turn your ideas into the actual design.

在这个阶段，我将假设您已经进行了一些用户研究。或至少与潜在客户交流以检验您的假设。这样，您将可以更好地将自己的想法转化为实际设计。

This simplified guide breaks the process down into logical steps for those who just can’t afford the time to get their heads around all the complexities of UI and UX design.

这份简化的指南将这些过程分解为逻辑步骤，对于那些不能花时间来解决UI和UX设计的所有复杂问题的人。

从UI设计的角度来看，手头有什么问题？ (What is the problem at hand from a UI design point-of-view?)

The starting point is always to not only define the problem you’re trying to solve but to understand it from your customers’ perspectives. There will, of course, be many perspectives in your target audience.

始终不仅要定义您要解决的问题，还要从客户的角度来理解它。当然，目标受众会有很多观点。

A founder’s vision can only work if it is designed in such a way that customers can actually use it. This depends heavily on their ability to articulate the idea to the right people with the right set of skills.

创始人的愿景只有以客户可以实际使用的方式进行设计，才能发挥作用 。这在很大程度上取决于他们向具有适当技能的适当人员表达想法的能力。

It may sound simple, but the real issue is typically in the lack of design expertise at tech startups. It can be a poor use of crucial resources to step onto a steep learning curve at such an early stage of the product’s development. The first problem you have to solve is how to solve the problems your customers are facing in the quickest, smartest and most efficient ways.

这听起来很简单，但真正的问题通常是技术初创公司缺乏设计专业知识。在产品开发的早期阶段，关键资源的不良使用可能会使其步入陡峭的学习曲线。您要解决的第一个问题是如何以最快，最聪明和最有效的方式解决客户所面临的问题。

Once you’ve done that, you can work on how to turn those ideas into genuinely useful UI designs

完成此操作后，您就可以研究如何将这些想法转变为真正有用的UI设计

…the first issue you have to solve is how to address the problems your customers are facing in the quickest, smartest and most efficient ways…

…您要解决的第一个问题是如何以最快，最聪明和最有效的方式解决客户所面临的问题…

为您的应用程序开发一个简单的设计过程 (Develop a simple design process for your app)

The crux of it lies in forming a straightforward process for the UI design of your app — here are the steps I always recommend:

问题的关键在于为应用程序的UI设计形成一个简单的过程-这是我一直建议的步骤：

Create a user-flow diagram
创建用户流程图
Research different design patterns and styles
研究不同的设计模式和样式
Create wireframes
创建线框
Create mock-ups
创建模型

创建用户流程图 (Create a user-flow diagram)

Start by taking a top-level view of the ways in which users might interact with your app.

首先概述用户与您的应用进行交互的方式。

How might they achieve the specific goals they have? What are the potential paths they might take to realize them? Can you easily visualize all of the possible user journeys within your app in a user-flow diagram?

他们如何实现自己的特定目标？他们可能会采取哪些潜在的途径？您可以在用户流程图中轻松直观地查看应用程序中所有可能的用户旅程吗？

It’s critically important to keep things as simple as possible by reducing any clutter and removing any unnecessary steps. A bird’s-eye view of this can really help to inform your UI design from the outset.

至关重要的是，通过减少混乱和消除不必要的步骤来使事情尽可能简单。鸟瞰可以真正帮助您从一开始就了解UI设计。

Some of the tools I like to use are the flow chart templates by Miro, Milanote and Whimsical. You can easily shape the journeys by understanding the three typical shapes you will find in flow charts:

我喜欢使用的一些工具是Miro ， Milanote和Whimsical的流程图模板。您可以通过了解流程图中的三种典型形状轻松地塑造旅程：

Rectangles: Used to represent different screens within the app
矩形：用于代表应用内的不同屏幕
Diamonds: Used to represent decisions the user will make within the app
菱形：用于表示用户将在应用程序中做出的决策
Arrows: Used to display the connections between the screens and the decisions
箭头：用于显示屏幕和决策之间的联系

This image illustrates a user-flow diagram for the pre-design phase of an app. You can explore other common user journeys and filter through a wide range of screenshots from iOS, Android and Web apps here at Page Flows.

此图像说明了应用程序的预设计阶段的用户流程图。您可以在Page Flows上探索其他常见的用户旅程，并过滤来自iOS，Android和Web应用程序的各种屏幕截图。

研究不同的设计模式和样式 (Research different design patterns and styles)

Planning makes the implementation easier. I always break tasks down into smaller, more manageable parts to be able to achieve my design goals for apps.

规划使实施更容易。我总是将任务分解为更小，更易于管理的部分，以实现应用程序的设计目标。

Creative instincts will come into play here for UI designers with years of experience under their belts, but it’s easy for founders and developers to fall into the trap of calling upon their daily routines to inform these decisions, such as taking too much influence from the apps they simply use on a regular basis.

具有多年经验的UI设计师将在这里发挥创造性的直觉，但是对于创始人和开发人员而言，很容易陷入陷阱，要求他们的日常工作来告知这些决定，例如从应用程序中获取过多影响他们只是定期使用。

…break tasks down into smaller, more manageable parts…

…将任务分解为更小，更易于管理的部分…

It’s important to see this as more of a starting point on your research journey. Use the insights to research different UI design patterns in different industries, such as forms, menus, and tables. Draw upon the insights to not just replicate what works for your audience, but to improve upon it to make your app as good as it can be.

重要的是，将其视为您研究旅程的起点。使用这些见解来研究不同行业的不同UI设计模式，例如表单，菜单和表格。利用这些见解，不仅可以复制对您的受众有用的内容，还可以对其进行改进以使您的应用程序尽可能地出色。

A great source of information about this is UI Patterns. It’s a brilliant resource for getting familiar with the most commonly used design patterns, including how and when to employ them.

UI模式是有关此方面的重要信息。这是熟悉最常用的设计模式(包括如何以及何时使用它们)的绝妙资源。

Once you have gleaned a deeper understanding of which components you might need to include in your own app, check out sites like Behance and Dribbble for more inspiration. You might want to take what you see on Dribbble with a pinch of salt, though. Much of what you see on there is conceptual as opposed to the finished product when it comes to real applications.

一旦您对可能需要在自己的应用程序中包含哪些组件有了更深入的了解，请访问Behance和Dribbble等网站以获得更多启发。不过，您可能想要一点点盐就可以在Dribbble上看到。在实际应用中，您所看到的大部分都是概念性的，而不是成品。

Here are some more great resources for screenshots for popular apps with industry-leading designs:

以下是一些具有业界领先设计的流行应用的屏幕快照的更多有用资源：

UX Screenshots
UX屏幕截图
Laudable Apps
可赞的应用
Mobbin Design
动车设计
Pttrns
点数
Mobile Patterns
移动模式

These are fantastic sources of visual inspiration for the design of new web and mobile apps.

这些都是设计新的Web和移动应用程序的绝佳视觉灵感来源。

创建您的线框 (Create your wireframes)

Now, here’s where we can start getting creative. Wireframes are a crucial part of the design process, so they shouldn’t ever be skipped.

现在，在这里我们可以开始发挥创意。线框是设计过程中的关键部分，因此不应跳过它们。

If you are familiar with a prototyping tool, that’s the preferred option for helping you achieve the best design for your app. If that’s a whole new world for you, then you might want to go old school and revert back to the classic pen and paper. The time it takes to get used to the new tools will only slow you down, so don’t be afraid to go retro.

如果您熟悉原型制作工具，那么它是帮助您实现应用最佳设计的首选。如果这对您来说是一个全新的世界，那么您可能想去守旧派并回到经典的笔和纸上。习惯新工具所花费的时间只会减慢您的速度，因此不要害怕过时。

Wireframes are a crucial part of the design process, so they shouldn’t ever be skipped.

线框是设计过程中的关键部分，因此不应跳过它们。

Have a look at SneakPeekIt for a large range of device templates that you can print off to use for your sketches. They are a completely free way to get the inspiration you need to get your designs off the ground.

看看SneakPeekIt中的大量设备模板，您可以将其打印出来以用于草图。它们是一种完全免费的方式，可以获取您需要的灵感，从而使您的设计起步。

Be sure to check out Balsamiq, Whimsical and OmniGraffle, too. For more variety in terms of the pre-build components, you need to make a start on the hierarchical structure of your web or mobile app.

一定还要检查Balsamiq ， Whimsical和OmniGraffle 。要使预构建组件具有更多多样性，您需要从Web或移动应用程序的层次结构开始。

Your first UI may well come from an amalgamation of a few different design templates from these sites. Checking them all out in depth will only stand you in good stead for optimizing your in-app experience.

您的第一个UI很可能来自这些站点中几个不同的设计模板的合并。深入检查所有内容只会帮助您优化应用内体验。

If you’re an engineer or tech founder in the early stages of design, don’t be tempted by the urge to skip wireframing. You need to fully comprehend every angle of the app’s user journeys by visualizing them before it’s too late to change them further down the line.

如果您是设计初期的工程师或技术创始人，请不要被跳过线框图的冲动所吸引。您需要通过可视化应用程序来全面了解应用程序用户旅程的各个角度，以免为时过早更改它们。

创建您的网络或移动应用程序的模型 (Create mock-ups of your web or mobile app)

Once the hierarchy is in place and the structure of each screen is defined, you can move onto software like Figma or Sketch to design your product. Figma is a cloud-based UI design tool that’s built for teams which are ideal for bringing wireframes to life at this stage of the process.

设置好层次结构并定义每个屏幕的结构后，您就可以使用Figma或Sketch等软件来设计产品。 Figma是基于云的UI设计工具，专为团队而打造，是在此阶段的阶段使线框栩栩如生的理想选择。

Initial design mock-ups will help you more effectively realize your vision and give your app the look and feel of a real product. It should be able to be used as a true reference point for developers when it comes to building the app. Don’t be concerned about spending a tad more time on this stage — the greater the detail, the better.

初始设计模型将帮助您更有效地实现愿景，并为您的应用程序提供真实产品的外观。在构建应用程序时，它应该可以用作开发人员的真正参考点。不必担心在此阶段花费更多时间-细节越多越好。

您还在为UI设计苦苦挣扎吗？ (Are you still struggling with your UI design?)

If you feel like you have done all you can with your idea and you need help turning it into real UI design, you might want to call upon an app designer to help you.

如果您觉得自己的想法已尽力而为，并且需要帮助将其转变为真实的UI设计，则可能需要寻求应用程序设计师的帮助。

Rather than plowing on through it and risking mistakes, I can apply my decade of experience in design to carry out the robust process required to put your idea in front of real people.

我可以运用自己十年的设计经验，而不是花时间去冒险，也可以冒险出错，以执行将您的想法展现在真实人面前所需的强大过程。

If you would like a consultation on your project, whether it is the full design of your web or mobile app or ongoing UX design support, I’d love to provide my expertise and integrate with your development team to realize the best end-product possible.

如果您想就您的项目进行咨询，无论是您的Web或移动应用程序的完整设计还是正在进行的UX设计支持，我都希望提供我的专业知识，并与您的开发团队集成以实现最佳的最终产品。

Need additional advice? Request my FREE Cheatsheet which includes ‘47 Actionable UX Hacks to Fix Your App’.

需要其他建议吗？索取我的免费备忘单，其中包括“ 47个可行的UX黑客来修复您的应用程序 ”。

Thanks for taking the time to read this article. If you found it helpful, please let me know. ???

感谢您抽出宝贵的时间阅读本文。如果您觉得有帮助，请告诉我。 ???

If you’d like to read more, check out my blog for regular updates.

如果您想了解更多信息，请查看我的博客以获取定期更新。

This article was originally published at www.simonmccade.com.

本文最初发布在www.simonmccade.com上。