加载中

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.

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.

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.

我从 13 岁时开始学习平面设计。通过网上教程慢慢学会了设计网站,并习惯于每天使用 Photoshop 和 Affinity Designer 软件。这些经历教会了我如何像设计师一样思考。

我坚持设计和开发应用将近有一年时间。我参加了麻省理工学院的一个项目,是与一个团队合作开发 Universeaty。两个月前,我开始研究一个新的 Crypto Price Tracker 应用,并于最近(1月28日)将其发布。

在这篇文章中,我将分享该应用示例一步一步的设计过程。这应该有助于那些想要学习并提高他们的数字化设计技巧的人。这篇文章不会教你如何使用设计软件,因为设计并不只是了解如何使用设计软件就够了,而且网上也有数以百计的优质在线学习教程。我认为设计是关于如何理解你的产品,特点和功能的过程,同时设计需要保持始终从用户的角度着手。这就是这篇文章的意义所在。

Design Process:

  1. Create a user-flow diagram for each screen.

  2. Create/draw wireframes.

  3. Choose design patterns and colour palettes.

  4. Create mock-ups.

  5. Create an animated app prototype and ask people to test it and provide feedback.

  6. Give final touch ups to the mock-ups to have the final screens all ready to begin coding.

Let’s start!

设计过程:

  1. 为各个用户展示界面创建一个用户流程图。

  2. 创建/绘制线框。

  3. 选择设计图案和调色板。

  4. 创建模型。

  5. 创建一个动画应用程序原型,并要求体验人群对其进行测试并提供反馈。

  6. 给模型做最后的调整,在最后的界面准备好后开始编码。

开始吧!

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.

  • 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.

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.

线框图

完成每个屏幕的用户流程图和用户流程设计后,你将开始制作所有屏幕的线框图。 线框本质上是粗略的,表现你的应用程序的外观。 本质上是一个用户将会浏览到的草图或轮廓图像,标签,按钮和素材,和它们的布局和定位。是一张你的应用将如何工作的粗略草图。

我使用 UI Stencils 的排版模板来绘制线框。 它大大节省了时间,并提供了一个很好的画布来绘制和做记录。

这是一个线框示例。

绘制线框后,你可以使用名为 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.

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.

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


设计模式和颜色调色板

这是我最喜爱的部分,它就像逛街(window-shopping)一样,大量的设计模式和颜色调色板可供选择。我选择了我所喜欢的,并试验他们(的效果)。

找设计模式的最佳平台是 Mobile Patterns 和 Pttrns 。要找好的颜色调色板就去 Color Hunt 吧。

实体模型

这是你最终使用设计软件的时候。设计意义上的实体模型是对你的设计的高保真的表达。这几乎就像你未来打开这个应用程序,并从它那里得到一些截图一样。它应该看起来很现实,很像真正的那样。

有用于创建实体模型的设计软件和工具。我使用 Affinity designer 。IOS 最常用的工具是 Sketch 。

这有些早期为我的 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.

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.


我用各种颜色调色板做了更多的实验。


我与我的朋友分享了最初的模型,以获得他们的反馈。很多人似乎都喜欢黄金渐变和黑色方案。

我愿意接受他们的反馈并尝试新的建议!当你与他们交谈时,你会发现用户的奇妙想法,而不是疯狂地翻阅 Dribbble 或 Behance 网站素材。

所以我重新设计了模型并删除了背景图,因为生成项目是一个技术上耗时的过程,同时也降低了可读性。这是我重新设计的模型的样子。

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.

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


我对颜色方案、标签栏上的图标和整体布局都非常满意。我继续按照相同的设计指南设计了其余的屏幕方案。这是一个漫长而有趣的过程!

等我所有的屏幕界面都准备好了,我就在 Adobe XD 上制作了一个原型,并请几个朋友进行试用并给出反馈。

经过最后的调整,我最后的设计看起来像这样:

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

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.

“Design is not just what it looks like and feels like. Design is how it works” 
-Steve Jobs

在所有的界面完成后,我将它们导入 Xcode 并开始编写应用程序。

就这些了!我希望这篇文章能够帮助你开始学习应用程序设计,或者帮助你成为更好的设计师。如果你喜欢我的 APP ,你可以在下载。

我将以我最喜欢的关于设计的名言结束本文。

“设计并非外观怎样,感觉如何。设计是(解决)它是怎样工作的。”- 史蒂夫·乔布斯 

返回顶部
顶部