从零开始设计一个漂亮的移动 APP 已翻译 100%

oschina 投递于 2018/01/31 16:11 (共 8 段, 翻译完成于 02-06)
阅读 5937
收藏 92
6
加载中

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.

已有 1 人翻译此段
我来翻译

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!

已有 2 人翻译此段
我来翻译

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.


已有 1 人翻译此段
我来翻译

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.

已有 2 人翻译此段
我来翻译

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.


已有 2 人翻译此段
我来翻译

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.


已有 1 人翻译此段
我来翻译

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.


已有 1 人翻译此段
我来翻译

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

已有 1 人翻译此段
我来翻译
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
加载中

评论(7)

akjarjash
akjarjash
咳咳 1+1 = 2 会了吗?
哈哈
好吧,现在让我们做一道微积分题目
方小葱
方小葱
中分阴阳色~那么问题来了?我的目光焦点应该落在哪里???总是有些自称"设计师艺术家革命导师"的人连基本的常识都不懂~做出一些反人类的东西出来~然后自我感觉良好~
百通达
百通达
太牛了。
朱元勋
朱元勋

引用来自“Edita”的评论

感谢分享,推荐一款好用的原型工具-国产Mockplus,上手快,操作便捷。
团队协作很好
朱元勋
朱元勋
mark
ElvisSu
ElvisSu
大赞,谢谢卤煮
Edita
Edita
感谢分享,推荐一款好用的原型工具-国产Mockplus,上手快,操作便捷。
返回顶部
顶部