案例研究：手機APP的UI設計流程

如下內容由Mockplus（http://www.mockplus.cn）團隊翻譯整理，僅供學習交流。

 

UI設計——不只僅是創造漂亮的圖像。

面臨的挑戰

我爲本身提供了一個絕佳的機會來訓練個人視覺設計技巧，並經過建立一個移動app用戶界面庫來學習其設計過程。UI庫也稱爲可視樣式或主題，是一種自定義的圖形界面元素包，應用於特定的應用程序或網站，爲用戶創造高雅的體驗。

個人設計過程：

有一點須要注意的是，這個項目是關注UI /視覺設計，而不包括用戶體驗設計; 例如用戶研究，可比評論，用戶行程映射，信息架構等。

App概念

問題定義

經過個人新應用程序可爲用戶解決他們在尋找課程和研討會中所遇到的困難。對於像我這種想要學習新東西的人來講，找到合適本身的課程仍是頗有難度的。

價值主張

通常來講，一個價值命題以陳述的形式出現，一般是第一個呈如今大衆面前的句子。它的主要目的是傳達客戶指望從產品中獲得的好處。

這相似於電梯推銷的場景——當你把你的app概念提煉成一個易於記憶、引人注目和可重複的短語時，即可在「用戶體驗戰略」一書中體會到JamieLevy的價值主張公式。

這是個爲客戶提供服務的平臺。

介紹下BetterMe ——「Yelp的課程和研討會。」

這是一個幫助多倫多夥伴以方便快捷的方式查找課程和研討會的APP。

用戶角色

線框

在我對用戶目標和行爲有了更好的理解後，我列出了這款app的一些關鍵功能，以建立低保真線框。

一、課程列表（按流行度，附近，即將推出，爲你推薦）

二、搜索（按類別，類型，價格範圍，地點，評分等）

三、即時消息（查詢）

四、用戶資料（遊戲化，學習列表）

以上是草圖

部分完成度的線框

可視化語言

語言由不一樣類型的單詞組成，卻能夠組合起來建立一條消息，視覺語言也與任何其餘語言同樣，其能夠分爲風格，距離感，應景度和趨勢。

我採訪了一些用戶並瞭解他們的需求，發現了app呈現出給人的情緒引導，從而進一步定義視覺語言。

面試問題：

一、你爲何要使用這個app？

二、什麼樣的情緒會使得這些需求獲得知足？

三、你如何經過視覺語言來傳達這種情緒？

設計初始工做表

情緒板

做爲設計師，咱們的目標是優化和加速進程。 Atomic Design的想法是容許用戶體驗設計師，UI設計師和前端開發人員並行工做而不是瀑布式的方式工做。

咱們如何設計一些視覺上的東西，在更早的階段呈現給用戶？

情緒板是設計過程當中視覺可交付成果之一。這是一個拼貼畫，一般由圖像，文本和物品組成，除了描述了頁面的實際佈局之外，還有咱們經過產品得到的感覺，。

我建立了兩個獨特的情緒板來呈現針對不一樣用戶羣體的感覺。一種是安靜，乾淨，簡潔的，適合學習和研究的目的; 然而第二種則是使人興奮的，年輕，快節奏的，傳達着激情和積極的情緒。

情緒板（左 - V1;右 - V2）

然而，對不少人來講，情緒板可能太抽象了，由於要設計一個情緒板如何表現爲有形的視覺設計元素是很困難的。

瓷磚式風格設計

瓷磚式風格是有形的視覺設計元素拼貼，如調色板，字體或按鈕樣式，這有助於經過具體的視覺語言與參與者交流溝通。它彌合了情緒板和線框之間的空白，在早期得到設計反饋是很是有用。

 

瓷磚式風格能夠幫助人們想象如何將各個元素融合在一塊兒。我採訪了15位朋友，讓其選擇本身喜歡的風格。結果，2/3的人更喜歡第一種視覺風格。如下是他們的回答：

「我喜歡第一個，由於在視覺上頗有吸引力，我會花更多的時間去發現和研究這款app。」

「第一種簡約，我喜歡圖標賽過圖片。」

「第二種風格更使人興奮，但這對於課程列表應用來講，有點過了。」

用戶界面和原型

「若是一張圖片值1000字，那麼一個原型就值1000次會議。」—— 在IDEO上的專家如是說。

在決定使用視覺風格以後，我將其應用於中保真度的線框，並進行了一些設計迭代。 而後，我建立了具備如下高保真用戶界面的交互式InVision原型：

UI——主頁面

 

風格指南

風格指南是一套創建和強化風格以提升溝通的標準。它統一設計標準，並對團隊協做力有這顯著影響。

深思

「風格來來去去。 好的設計是一種語言，而不是一種風格。」——MassimoVignelli

這個項目是由red書院的UI設計基金會提供的兼職項目。我花了兩個週末的時間來試驗和探索各類UI設計方法，以把個人應用——從概念到實際原型作得更好。

做者：Renee Lin

地址：https://blog.prototypr.io/ui-design-more-than-just-creating-pretty-images-cc1f46a7c81b