敏捷開發創始人

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上。