激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

一個項目從靈感風格稿到實際UI設計案例過程分享

發(fā)布時間：2023-12-28 14:36:19 瀏覽量：185次

今天為大家介紹兩個設計項目的ui風格稿的設計，兩個項目同為賓夕法尼亞大學沃頓商學院新推出的項目，兩個項目分別命名為：LevelUp和StepUp。LevelUp的目標是幫助科學家研究如何幫助學生取得更好的成績。而StepUp的目標是幫助科學家研究如何幫助人們養(yǎng)成持久運動的好習慣。

第一個項目：LevelUp

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

設計風格方案一

方案一的品牌和設計靈感示例

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

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

風格一的歡迎界面設計

設計風格方案二

方案二的品牌和設計靈感示例

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

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

設計風格方案三

方案三的品牌和設計靈感示例

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

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

最后選中的方案

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

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

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

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

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

第二個項目：StepUp

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

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

設計風格方案一

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

設計風格方案二

這種風格在排版和布局方面跟方案一類似，但更多的是“以技術(shù)和科學為動力”的氛圍。為此，我們結(jié)合了明亮的漸變，以及原子符號的圖示。

設計風格方案三

第三種設計方案直接被用戶采納。它結(jié)合了客戶喜愛的第二種選擇的“科學背景”的感覺。它不是使用冷色調(diào)，而是采用了更友好的黃色和橙色?？蛻粝矚g這種設計。

一旦移動端的主頁設計最終被確定，我們?yōu)榫W(wǎng)站設計并構(gòu)建了幾個額外的響應頁面，并為該程序設計了一個額外的桌面端網(wǎng)頁。

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學您好！

您已成功報名0元試學活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定