UI界面設(shè)計(jì)

從風(fēng)格靈感到ui設(shè)計(jì)方案的案例分享

7913

今天為大家介紹兩個(gè)設(shè)計(jì)項(xiàng)目的ui風(fēng)格稿的設(shè)計(jì)，兩個(gè)項(xiàng)目同為賓夕法尼亞大學(xué)沃頓商學(xué)院新推出的項(xiàng)目，兩個(gè)項(xiàng)目分別命名為：LevelUp和StepUp。LevelUp的目標(biāo)是幫助科學(xué)家研究如何幫助學(xué)生取得更好的成績(jī)。而StepUp的目標(biāo)是幫助科學(xué)家研究如何幫助人們養(yǎng)成持久運(yùn)動(dòng)的好習(xí)慣。

第一個(gè)項(xiàng)目：LevelUp

項(xiàng)目開始后，我們遵循這樣的設(shè)計(jì)流程：為了了解用戶和產(chǎn)品的目標(biāo)，采訪了團(tuán)隊(duì)關(guān)于學(xué)生的人口統(tǒng)計(jì)數(shù)據(jù)，回顧了團(tuán)隊(duì)的早期原型，使用他們的測(cè)試版產(chǎn)品熟悉平臺(tái)。前期調(diào)查完后，開始設(shè)計(jì)。

設(shè)計(jì)風(fēng)格方案一

方案一的品牌和設(shè)計(jì)靈感示例

在第一種風(fēng)格設(shè)計(jì)中，我希望用戶將品牌定位為：聰明，精通技術(shù)和酷炫。我想向?qū)W生傳達(dá)這個(gè)產(chǎn)品不是他們必須使用的蹩腳工具，而是一個(gè)很酷，有趣的程序。這個(gè)風(fēng)格的靈感來自Playstation和Spotify等品牌。設(shè)計(jì)主題是漸變，冷色調(diào)和重疊形狀的混合。

為了更好的展示每種風(fēng)格，我從思想情緒板和風(fēng)格原型開始。然后設(shè)計(jì)一個(gè)歡迎界面，讓團(tuán)隊(duì)能夠直觀的感受到這種風(fēng)格。此初始設(shè)計(jì)使用隨機(jī)形狀，冷色漸變和高對(duì)比度文本。

風(fēng)格一的歡迎界面設(shè)計(jì)

設(shè)計(jì)風(fēng)格方案二

方案二的品牌和設(shè)計(jì)靈感示例

第二種風(fēng)格的定位是：熱情，樂觀和友好。我希望它清楚地表明該平臺(tái)易于使用，有用且有認(rèn)同感。靈感來自迪士尼和海灘等體驗(yàn)，設(shè)計(jì)元素包括熱帶色彩和俏皮插圖。

上圖展示了靈感情緒板和樣式圖塊元素，然后上圖的元素轉(zhuǎn)化為下圖的歡迎界面。

設(shè)計(jì)風(fēng)格方案三

方案三的品牌和設(shè)計(jì)靈感示例

對(duì)于第三種風(fēng)格的定位，則是專注于干凈，俏皮和古怪。這個(gè)風(fēng)格傳達(dá)了 “LevelUp對(duì)于學(xué)生來說是新的東西，它很有趣且易于使用?！?品牌靈感包括任天堂和Aeropostale（美國校園流行的服飾品牌）。使用的設(shè)計(jì)元素是襯線字體，鮮艷的顏色和俏皮的圖案。

您可以在下面的示例歡迎屏幕中看到這些樣式元素。

最后選中的方案

很多設(shè)計(jì)師都有這樣的經(jīng)驗(yàn)，認(rèn)真設(shè)計(jì)了幾種方案，提案后領(lǐng)導(dǎo)從每個(gè)方案里挑出了幾個(gè)優(yōu)點(diǎn)，然后希望您把幾個(gè)優(yōu)點(diǎn)綜合一下變成新的最終方案。

這個(gè)方案大體也是如此，在與客戶進(jìn)一步討論后，確定了LevelUp應(yīng)該看起來很酷，但仍然需要讓學(xué)生感覺像是一種學(xué)術(shù)工具。它不應(yīng)該太友好或愚蠢，應(yīng)該有一些有趣的元素混合在一起。

對(duì)于最終的風(fēng)格，我們選擇了藍(lán)色，灰色和綠色的配色方案。排版結(jié)合了襯線字體和非襯線字體。重疊的圓圈和充滿活力的插圖為設(shè)計(jì)增添了活力和趣味性。

一旦設(shè)計(jì)方向達(dá)成一致，后續(xù)就是在代碼中實(shí)現(xiàn)我們的新風(fēng)格。下圖是LevelUp的其他頁面設(shè)計(jì)。

Tatiana Bischak為該項(xiàng)目創(chuàng)作了一系列可愛的插圖和圖標(biāo)。

第二個(gè)項(xiàng)目：StepUp

與LevelUp一樣，StepUp也是行為科學(xué)家研究幫助人們的平臺(tái)。項(xiàng)目背景：BCFG與24 Hour Fitness合作創(chuàng)建了StepUp，24 Hour Fitness是美國最大的健身房之一。StepUp的目標(biāo)是了解什么將有助于人們改善他們的運(yùn)動(dòng)習(xí)慣。

StepUp比LevelUp更早發(fā)布，在風(fēng)格研究上探索時(shí)間更好。所以，我們采用了移動(dòng)優(yōu)先的方法，創(chuàng)建了三個(gè)不同版本的網(wǎng)站的移動(dòng)主頁。

設(shè)計(jì)風(fēng)格方案一

第一個(gè)風(fēng)格方案的目標(biāo)是傳達(dá)信心，高能量和可信賴性。主要的配色方案是海軍藍(lán)，灰色和白色，給人一種權(quán)威的感覺，以明亮的藍(lán)綠色和海泡綠色為重點(diǎn)，增添能量。它結(jié)合了襯線字體和非襯線字體，以強(qiáng)調(diào)專業(yè)性和友好性。身穿運(yùn)動(dòng)裝備的一名微笑女性的圖片給人1以平易近人和志趣相投的感覺。這個(gè)圖片還配上俏皮的風(fēng)格圖標(biāo)，進(jìn)一步營(yíng)造出一種能量和樂趣。