UI設(shè)計不僅僅是創(chuàng)建精美的圖像。

挑戰(zhàn)

我給自己一個很好的機會來培養(yǎng)我的視覺設(shè)計技能，并通過創(chuàng)建一個移動應(yīng)用程序用戶界面庫來學(xué)習(xí)設(shè)計過程。 UI庫（也稱為視覺樣式或主題）是自定義圖形界面元素包，應(yīng)用于特定應(yīng)用程序或網(wǎng)站以為用戶創(chuàng)建優(yōu)雅體驗。

我的設(shè)計過程：

需要注意的一點是，該項目側(cè)重于UI /視覺設(shè)計，而非用戶體驗設(shè)計;例如，用戶研究，可比評論，用戶旅行映射，信息架構(gòu)等。

應(yīng)用概念

問題定義

通過我的新應(yīng)用程序，我可以解決他們在尋找課程和研討會時遇到的困難。對于像我這樣想要學(xué)習(xí)新知識的人來說，為他們找到合適的課程仍然非常困難。

價值主張

一般而言，價值主張以陳述的形式出現(xiàn)，通常是向公眾呈現(xiàn)的第一句話。其主要目的是傳達客戶對產(chǎn)品的期望。

這類似于電梯銷售情景——當(dāng)您將應(yīng)用程序概念細化為令人難忘，引人注目且可重復(fù)的短語時，您可以在“用戶體驗策略”一書中體驗JamieLevy。價值主張公式。

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

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

這是一款應(yīng)用程序，可以幫助多倫多合作伙伴快速輕松地找到課程和研討會。

用戶角色

線框

在我更好地了解用戶目標和行為后，我列出了應(yīng)用程序的一些關(guān)鍵功能，以創(chuàng)建低保真線框。

課程列表（按人氣，附近，即將推出，推薦給你）

搜索（按類別，類型，價格范圍，位置，評級等）

即時通訊（查詢）

用戶個人資料（游戲化，學(xué)習(xí)列表）

以上是草圖

部分完成的線框

視覺語言

該語言由不同類型的單詞組成，但可以組合以創(chuàng)建消息。視覺語言與任何其他語言相同，可分為風(fēng)格，距離，響應(yīng)和趨勢。

我采訪了一些用戶并了解他們的需求，并發(fā)現(xiàn)該應(yīng)用程序提供了情感指導(dǎo)以進一步定義視覺語言。

面試問題：

你為什么要用這個應(yīng)用程序？

什么樣的情緒會使這些需求得到滿足？

你如何通過視覺語言傳達這種情感？

設(shè)計初始工作表

情緒板

作為設(shè)計師，我們的目標是優(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è)計

圖塊樣式是視覺設(shè)計元素的有形集合，例如調(diào)色板，字體或按鈕樣式，有助于通過特定的視覺語言與參與者進行交流。它填補了情緒板和線框之間的空白，并且在早期獲得設(shè)計反饋非常有用。

瓷磚風(fēng)格有助于人們想象如何將元素融合在一起。我采訪了15位朋友并要求他們選擇他們喜歡的風(fēng)格。結(jié)果，2/3的人喜歡第一種視覺風(fēng)格。以下是他們的答案：

“我喜歡第一個，因為它具有視覺吸引力，我將花更多的時間來發(fā)現(xiàn)和研究這個應(yīng)用程序。 ”的

“第一種簡潔，我喜歡的圖標比圖片更好。 ”的

“第二種風(fēng)格更令人興奮，但對于課程列表應(yīng)用來說有點太多了。 ”的

用戶界面和原型

“如果一張圖片價值1000字，那么原型將值1000次會議。 ”的—— IDEO的專家說。

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

UI——主頁

風(fēng)格指南

風(fēng)格指南是建立和加強風(fēng)格以改善溝通的一套標準。它統(tǒng)一了設(shè)計標準，對團隊合作產(chǎn)生了重大影響。

深思熟慮

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

該項目是由紅色學(xué)院的UI設(shè)計基金會提供的兼職項目。我花了兩個周末試驗和探索各種UI設(shè)計方法來制作我的應(yīng)用程序——從概念到實際原型更好。

作者：林黛蕾

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

本文由@Mockplus團隊翻譯為原始版本，未經(jīng)許可不得復(fù)制。

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

« 網(wǎng)站優(yōu)化的一些問題分析 | 想讓頁面更具可讀性嗎？你必須好好利用F風(fēng)格的布局 »