33岁想从头学做网页设计

by Harshita Arora

通过Harshita Arora

从头开始设计精美的移动应用 (Designing beautiful mobile apps from scratch)

I started learning graphic design when I was 13. I learned to design websites from online courses and used to play around with Photoshop and Affinity Designer all day. That experience taught me how to think like a designer.

我从13岁开始学习平面设计。我学会了从在线课程设计网站，并整天都在玩Photoshop和Affinity Designer。这段经历教会了我如何像设计师一样思考。

I’ve been designing and developing apps for almost a year now. I attended a program at MIT where I worked with a team to develop Universeaty. Two months ago, I started working on a new app, Crypto Price Tracker, which I launched recently on 28th January.

我已经设计和开发应用程序已有近一年了。我参加了麻省理工学院的一个计划，在那里我与一个团队合作开发了Universeat y。两个月前，我开始开发一个新应用Crypto Price Tracker ，该应用最近于1月28日启动。

In this post, I’ll share the step-by-step design process I follow along with examples of the app I worked on. This should help anyone who wants to learn or improve upon their digital design skills. Design is not all about knowing how to use design software, and this post won’t teach you how to use it. There’s hundreds of good quality tutorials online to learn. Design is also about understanding your product inside out, its features and functionality, and designing while keeping the end-user in mind. That’s what this post is meant to teach.

在这篇文章中，我将分享我遵循的分步设计过程以及我开发的应用程序的示例。这应该可以帮助任何想学习或提高其数字设计技能的人。设计并不仅仅意味着了解如何使用设计软件，并且本文不会教您如何使用它。在线有数百种高质量的教程供您学习。设计还涉及从内而外地了解您的产品，其特性和功能，以及在设计时要牢记最终用户。这就是该帖子的教学目的。

Design Process:

设计过程 ：

Create a user-flow diagram for each screen.
为每个屏幕创建一个用户流程图。
Create/draw wireframes.
创建/绘制线框。
Choose design patterns and colour palettes.
选择设计图案和调色板。
Create mock-ups.
创建模型。
Create an animated app prototype and ask people to test it and provide feedback.
创建一个动画应用原型，并要求人们对其进行测试并提供反馈。
Give final touch ups to the mock-ups to have the final screens all ready to begin coding.
对模型进行最终修饰，以使最终屏幕都准备好开始编码。

Let’s start!

开始吧！

用户流程图 (User-Flow Diagram)

The first step is to figure out the features you want in your app. Once you’ve got your ideas, design a user-flow diagram. A user-flow diagram is a very high level representation of a user’s journey through your app/website.

第一步是弄清楚您想要在应用程序中使用的功能。提出想法后，请设计一个用户流程图。用户流程图是用户通过您的应用程序/网站进行的旅程的非常高级的表示。

Usually, a user flow diagram is made up of 3 types of shapes.

通常，用户流程图由3种形状组成。

Rectangles are used to represent screens.
矩形用于表示屏幕。
Diamonds are used to represent decisions (For example, tapping the login button, swiping to the left, zooming in).
菱形用于表示决策(例如，点击登录按钮，向左滑动，放大)。
Arrows link up screens and decisions together.
箭头将屏幕和决策链接在一起。

User-flow diagrams are super helpful because they give a good logical idea of how the app would function.

用户流程图非常有用，因为它们为应用程序的运行方式提供了良好的逻辑思路。

Here’s a user-flow diagram I drew when I started out working on the design of my app.

这是我开始设计应用程序时绘制的用户流程图。

线框 (Wireframes)

Once you’ve completed the user-flow diagrams for each screen and designed user journeys, you’ll begin working on wireframing all the screens. Wireframes are essentially low-fidelity representations of how your app will look. Essentially a sketch or an outline of where images, labels, buttons, and stuff will go, with their layout and positioning. A rough sketch of how your app will work.

一旦完成了每个屏幕的用户流程图并设计了用户旅程，就将开始对所有屏幕进行线框化。线框本质上是应用程序外观的低保真度表示。本质上是图像，标签，按钮和其他东西的去向的草图或轮廓，以及它们的布局和位置。粗略地描述您的应用将如何工作。

I use printed templates from UI Stencils for drawing the wireframes. It saves time and gives a nice canvas to draw on and make notes.

我使用UI模具中的打印模板来绘制线框。它可以节省时间，并提供漂亮的画布来进行绘制和做笔记。

Here’s an example wireframe.

这是线框示例。

After sketching the wireframes, you can use an app called Pop and take a pic of all your drawings using the app and have a prototype by linking up all the screens through buttons.

绘制线框后，您可以使用一个名为Pop的应用程序，并使用该应用程序拍摄所有图纸的图片，并通过按钮将所有屏幕链接起来来获得原型。

设计图案和调色板 (Design Patterns and Colour Palettes)

This is my favourite part. It’s like window-shopping. Lots of design patterns and colour palettes to choose from. I go about picking the ones I like and experimenting with them.

这是我最喜欢的部分。这就像逛街。许多设计模式和调色板可供选择。我开始挑选自己喜欢的人并进行实验。

The best platforms to find design patterns are Mobile Patterns and Pttrns. And to find good colour palettes, go to Color Hunt.

查找设计模式的最佳平台是Mobile Patterns和Pttrns 。要找到合适的调色板，请转到“ 色彩搜索” 。

样机 (Mock-ups)

This is when you finally move on to using design software. A mock-up in the design sense is a high-fidelity representation of your design. It’s almost like you went into this app in the future and you took some screenshots from it. It should look realistic and pretty much like the real thing.

这是您最后继续使用设计软件的时候。设计意义上的模型是您设计的高保真度表示。几乎就像您将来要使用此应用程序并从中获取了一些屏幕截图一样。它看起来应该很真实，非常像真实的东西。

There are design software and tools for creating mock-ups. I use Affinity designer. The most commonly used tool for iOS design is Sketch.

有用于创建模型的设计软件和工具。我使用Affinity Designer。 iOS设计最常用的工具是Sketch 。

Here’s an example of some of the early designs of my app.

这是我的应用程序早期设计的一个例子。

I experimented more with various colour palettes.

我尝试了各种调色板。

I shared the initial mockups with my friends for their feedback. A lot of people seemed to like the gold gradient and black scheme.

我与朋友分享了最初的模型，以征询他们的意见。很多人似乎都喜欢金色渐变和黑色方案。

Be willing to take feedback and experiment with new suggestions! You’ll find amazing ideas come from your users when you talk to them, not when you frantically scroll through Dribbble or Behance.

愿意接受反馈并尝试新的建议！与用户交谈时，您会发现令人惊奇的想法来自用户，而不是疯狂地滚动Dribbble或Behance。

So I redesigned the mock-up and removed the background graphs because generating them was a technically time-consuming process and they reduced readability. This is what the redesigned mock-up looked like.

因此，我重新设计了模型并删除了背景图，因为生成背景图在技术上非常耗时，并且降低了可读性。这就是重新设计的模型的样子。

I was pretty satisfied with the colour scheme, icons on the tab bar, and overall layout. I went ahead and designed the rest of the screens following the same design guidelines. It was a long, but surely fun process!

我对配色方案，标签栏上的图标和整体布局感到非常满意。我继续按照相同的设计准则设计了其余的屏幕。这是一个漫长而有趣的过程！

Once all of my screens were ready, I put together a prototype in Adobe XD and asked a few friends to experiment and give feedback.

准备好所有屏幕后，我在Adobe XD中组装了一个原型，并请几个朋友进行实验并提供反馈。

After final touches and such, this is what my final design looks like.

经过最后的接触后，这就是我的最终设计。

After all the screens were completed, I imported them into Xcode and began coding the app.

完成所有屏幕后，我将它们导入Xcode并开始对应用程序进行编码。

That’s it! I hope this post will help you get started with app design or help you become a better designer. And if you like my app, you can download it here.

而已！希望这篇文章能帮助您开始进行应用设计或帮助您成为更好的设计师。如果您喜欢我的应用程序，则可以在此处下载。

I’m ending the post with one of my favourite quotes about design.

我以关于设计的我最喜欢的报价之一结束了这篇文章。