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.

我以關于設計的我最喜歡的報價之一結束了這篇文章。