手把手教你設計一款APP的UI（案例分析）

挑戰

我曾經設計了一個移動APP的UI，裡面集合各種有關UI設計作品的風格、主題，有各種高逼格的圖片，提供給特定的網站和APP供用戶學習，因為自己對作品要求很高，也因此鍛煉了我的視覺設計的能力。

我的設計過程：

有一點要說明的是：這個項目裡面只關注UI設計，而不包含除此之外的其他UX設計。比如用戶研究、對比檢驗、用戶旅程地圖的繪製、信息架構等等。

APP定位

痛點分析

用戶想要學一些新的東西的時候，往往找不到合適的課程，要麼找不到合適的平台。我設計的這個APP就誰為了解決這個問題的。

產品定位

通常一個APP的定位都是以文案的形式展示出來，要讓用戶在第一次接觸到產品的時候就知道是產品的作用。因此文案表達的內容一定要清晰明了，最好用一些好記的、吸引人注意力的。

我用了一句話介紹BetterMe這個APP：yeah，幫你找到最好的課程和培訓班！

這款軟體是為了幫Toronto的用戶方便地找到適合他們的課程和培訓班。

用戶畫像

建立用戶畫像是很有必要的，根據用戶的特點，包括需求、目的、行為特徵等等建立用戶畫像，用戶畫像包含的信息越詳細，對產品的設計越有幫助。

線框圖

在對用戶的行為和目標有了很好的了解之後，我就把一些APP裡面需要的關鍵信息用線框圖畫出來。主要包含以下內容：

1、課程列表（按照熱度、附近、即將上線等因素排列）

2、搜索（按照類型、價格、位置、比例等進行排列）

3、實時消息（試驗項目）

4、用戶資料（趣味性、購買的課程）

線框圖

視覺語言

語言是由詞語組成的，而這些不同種類的詞語的組合可以傳達不同的信息。同理，視覺語言可以由顏色、空間、形狀、動作等元素組成。

為了更好地找到APP的定位，我和一部分用戶進行1V1的溝通，了解他們的需求和期望。

溝通過程中提到的問題有：

1、為什麼使用這款APP？

2、什麼風格能夠更好地滿足用戶需求？

3、你是怎麼通過視覺語言完成情緒交流的？（顏色、空間、形狀、動作）

初始化設計工作表

情緒板

作為一個設計師，需要不斷調整設計的過程使設計更高效。因此，不論是UX設計師、UI設計師還是前端開發都要使用並行模型替代瀑布模型。

以前我們是如何傳達視覺設計作品效果的呢？

情緒板在設計的過程中發揮了重要作用。情緒板通常由圖片、文字、主題組成，是除了頁面板式之外用來傳達設計者包含在其中的感情的媒介。

下圖是我創作的兩種不同類型的情緒板，對應不同的用戶組使用。左邊的風格安靜、乾淨、小巧，對應的用戶分類為學習型和研究型的。右邊的是年輕活力型的，富於變化，傳達的是激情和積極的情緒。

然而，情緒板對大多數人來說都太抽象了，而且想要用情緒板表達和用有形的視覺設計元素一樣的效果，也是一個難點。

模塊化示意圖

模塊化是示意圖是有形的視覺設計元素的拼貼，比如色板、字體、按鍵風格等等，與情緒板相比，它用一種更具體的視覺語言和用戶溝通。在設計的早期階段，模塊化示意圖是獲取用戶反饋很有用的一種方式。

模塊化示意圖能給用戶形象化地展示每一個視覺設計元素組合在一起的效果。我在15個朋友中做了調查，讓他們選出最喜歡的風格，發現2/3的人更喜歡第一種風格。以下是他們的一些原話：

我喜歡第一種風格，因為我覺得這種風格視覺效果更好，我會花更多的時間把玩這款APP

我喜歡第一種簡約風，相比於圖片，我更喜歡圖標

第二種風格看起來更刺激，但是對於一個課程清單類的APP來說似乎有點過了。

UI&原型設計

如果一張照片能傳達1000字的信息，那麼一個原型設計能夠表達1000場會議承載的信息——IDEO。

我先根據用戶的需求確定視覺風格，畫中等級的線框圖，並且迭代少許的設計元素，然後用InVision建立互動式設計原型，並作出成型的UI。

InVision（動圖太大，放個示意圖）

設計規範

設計規範是指一些列的設計標準，相當於一個索引，是為了迭代一致性和設計開發高效性。

關於設計規範，構建 Style Guide 並不是一件簡單的事，尤其對於目前快節奏的行業氛圍，從前期就開始沉澱設計內容會耗費很多的精力。

因此，往往很多公司和團隊都是到了一定的產品階段才開始注重 Style Guide 沉澱，這時的工作重心更偏業務和體驗優化，迭代也更多遵循已有的樣式，規範的重要性才得以體現。

反思

本文用一個實例簡單說明我的UI設計思路，實際情況可能千變萬化，我想用一句話來結束這篇文章：

設計的風格在不斷變化。好的設計是一種語言，而不是風格。——Massimo Vignelli。

文章來源：https://blog.prototypr.io/

文章作者：Renee Lin