UI設(shè)計，不僅僅是創(chuàng)造漂亮的圖像。

面臨的挑戰(zhàn)

我為自己提供了一個絕佳的機會來訓(xùn)練我的視覺設(shè)計技巧，并通過創(chuàng)建一個移動app用戶界面庫來學(xué)習(xí)其設(shè)計過程。UI庫也稱為可視樣式或主題，是一種自定義的圖形界面元素包，應(yīng)用于特定的應(yīng)用程序或網(wǎng)站，為用戶創(chuàng)造高雅的體驗。

我的設(shè)計過程：

有一點需要注意的是，這個項目是關(guān)注UI /視覺設(shè)計，而不包括用戶體驗設(shè)計; 例如用戶研究，可比評論，用戶行程映射，信息架構(gòu)等。

App概念

問題定義

通過我的新應(yīng)用程序可為用戶解決他們在尋找課程和研討會中所遇到的困難。對于像我這種想要學(xué)習(xí)新東西的人來說，找到合適自己的課程還是很有難度的。

價值主張

一般來說，一個價值命題以陳述的形式出現(xiàn)，通常是第一個呈現(xiàn)在大眾面前的句子。它的主要目的是傳達客戶期望從產(chǎn)品中得到的好處。

這類似于電梯推銷的場景——當(dāng)你把你的app概念提煉成一個易于記憶、引人注目和可重復(fù)的短語時，便可在“用戶體驗戰(zhàn)略”一書中體會到JamieLevy的價值主張公式。

這是個為客戶提供服務(wù)的平臺。

介紹下BetterMe ——“Yelp的課程和研討會。”

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

用戶角色

線框

在我對用戶目標(biāo)和行為有了更好的理解后，我列出了這款app的一些關(guān)鍵功能，以創(chuàng)建低保真線框。

1. 課程列表（按流行度，附近，即將推出，為你推薦）
2. 搜索（按類別，類型，價格范圍，地點，評分等）
3. 即時消息（查詢）
4. 用戶資料（游戲化，學(xué)習(xí)列表）

以上是草圖

部分完成度的線框

可視化語言

語言由不同類型的單詞組成，卻可以組合起來創(chuàng)建一條消息，視覺語言也與任何其他語言一樣，其可以分為風(fēng)格，距離感，應(yīng)景度和趨勢。

我采訪了一些用戶并了解他們的需求，發(fā)現(xiàn)了app呈現(xiàn)出給人的情緒引導(dǎo)，從而進一步定義視覺語言。

面試問題：

• 你為什么要使用這個app？
• 什么樣的情緒會使得這些需求得到滿足？
• 你如何通過視覺語言來傳達這種情緒？

設(shè)計初始工作表

情緒板

作為設(shè)計師，我們的目標(biāo)是優(yōu)化和加速進程。 Atomic Design的想法是允許用戶體驗設(shè)計師，UI設(shè)計師和前端開發(fā)人員并行工作而不是瀑布式的方式工作。

我們?nèi)绾卧O(shè)計一些視覺上的東西，在更早的階段呈現(xiàn)給用戶？

情緒板是設(shè)計過程中視覺可交付成果之一。這是一個拼貼畫，通常由圖像，文本和物品組成，除了描述了頁面的實際布局以外，還有我們通過產(chǎn)品獲得的感受，。

我創(chuàng)建了兩個獨特的情緒板來呈現(xiàn)針對不同用戶群體的感受。一種是安靜，干凈，簡潔的，適合學(xué)習(xí)和研究的目的; 然而第二種則是令人興奮的，年輕，快節(jié)奏的，傳達著激情和積極的情緒。

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

然而，對很多人來說，情緒板可能太抽象了，因為要設(shè)計一個情緒板如何表現(xiàn)為有形的視覺設(shè)計元素是很困難的。

瓷磚式風(fēng)格設(shè)計

瓷磚式風(fēng)格是有形的視覺設(shè)計元素拼貼，如調(diào)色板，字體或按鈕樣式，這有助于通過具體的視覺語言與參與者交流溝通。它彌合了情緒板和線框之間的空白，在早期獲得設(shè)計反饋是非常有用。

瓷磚式風(fēng)格可以幫助人們想象如何將各個元素融合在一起。我采訪了15位朋友，讓其選擇自己喜歡的風(fēng)格。結(jié)果，2/3的人更喜歡第一種視覺風(fēng)格。以下是他們的回答：

“我喜歡第一個，因為在視覺上很有吸引力，我會花更多的時間去發(fā)現(xiàn)和研究這款app?！?/p>

“第一種簡約，我喜歡圖標(biāo)勝過圖片?！?/p>

“第二種風(fēng)格更令人興奮，但這對于課程列表應(yīng)用來說，有點過了?！?/p>

用戶界面和原型

“如果一張圖片值1000字，那么一個原型就值1000次會議?！薄?在IDEO上的專家如是說。

在決定使用視覺風(fēng)格之后，我將其應(yīng)用于中保真度的線框，并進行了一些設(shè)計迭代。 然后，我創(chuàng)建了具有以下高保真用戶界面的交互式InVision原型：

UI——主頁面

風(fēng)格指南

風(fēng)格指南是一套建立和強化風(fēng)格以提高溝通的標(biāo)準(zhǔn)。它統(tǒng)一設(shè)計標(biāo)準(zhǔn)，并對團隊協(xié)作力有這顯著影響。

深思

“風(fēng)格來來去去。 好的設(shè)計是一種語言，而不是一種風(fēng)格。”——MassimoVignelli

這個項目是由red書院的UI設(shè)計基金會提供的兼職項目。我花了兩個周末的時間來試驗和探索各種UI設(shè)計方法，以把我的應(yīng)用——從概念到實際原型做得更好。
作者：Renee Lin

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

本文由@Mockplus團隊翻譯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自PEXELS，基于CC0協(xié)議