火星網(wǎng)校
一個項目從靈感風格稿到實際UI設(shè)計案例過程分享
發(fā)布時間：2023-12-28 14:36:19 瀏覽量：189次
今天為大家介紹兩個設(shè)計項目的ui風格稿的設(shè)計，兩個項目同為賓夕法尼亞大學沃頓商學院新推出的項目，兩個項目分別命名為：LevelUp和StepUp。LevelUp的目標是幫助科學家研究如何幫助學生取得更好的成績。而StepUp的目標是幫助科學家研究如何幫助人們養(yǎng)成持久運動的好習慣。
第一個項目：LevelUp
項目開始后，我們遵循這樣的設(shè)計流程：為了了解用戶和產(chǎn)品的目標，采訪了團隊關(guān)于學生的人口統(tǒng)計數(shù)據(jù)，回顧了團隊的早期原型，使用他們的測試版產(chǎn)品熟悉平臺。前期調(diào)查完后，開始設(shè)計。
設(shè)計風格方案一
方案一的品牌和設(shè)計靈感示例
在第一種風格設(shè)計中，我希望用戶將品牌定位為：聰明，精通技術(shù)和酷炫。我想向?qū)W生傳達這個產(chǎn)品不是他們必須使用的蹩腳工具，而是一個很酷，有趣的程序。這個風格的靈感來自Playstation和Spotify等品牌。設(shè)計主題是漸變，冷色調(diào)和重疊形狀的混合。
為了更好的展示每種風格，我從思想情緒板和風格原型開始。然后設(shè)計一個歡迎界面，讓團隊能夠直觀的感受到這種風格。此初始設(shè)計使用隨機形狀，冷色漸變和高對比度文本。
風格一的歡迎界面設(shè)計
設(shè)計風格方案二
方案二的品牌和設(shè)計靈感示例
第二種風格的定位是：熱情，樂觀和友好。我希望它清楚地表明該平臺易于使用，有用且有認同感。靈感來自迪士尼和海灘等體驗，設(shè)計元素包括熱帶色彩和俏皮插圖。
上圖展示了靈感情緒板和樣式圖塊元素，然后上圖的元素轉(zhuǎn)化為下圖的歡迎界面。
設(shè)計風格方案三
方案三的品牌和設(shè)計靈感示例
對于第三種風格的定位，則是專注于干凈，俏皮和古怪。這個風格傳達了 “LevelUp對于學生來說是新的東西，它很有趣且易于使用?！?品牌靈感包括任天堂和Aeropostale（美國校園流行的服飾品牌）。使用的設(shè)計元素是襯線字體，鮮艷的顏色和俏皮的圖案。
您可以在下面的示例歡迎屏幕中看到這些樣式元素。
最后選中的方案
很多設(shè)計師都有這樣的經(jīng)驗，認真設(shè)計了幾種方案，提案后領(lǐng)導從每個方案里挑出了幾個優(yōu)點，然后希望您把幾個優(yōu)點綜合一下變成新的最終方案。
這個方案大體也是如此，在與客戶進一步討論后，確定了LevelUp應(yīng)該看起來很酷，但仍然需要讓學生感覺像是一種學術(shù)工具。它不應(yīng)該太友好或愚蠢，應(yīng)該有一些有趣的元素混合在一起。
對于最終的風格，我們選擇了藍色，灰色和綠色的配色方案。排版結(jié)合了襯線字體和非襯線字體。重疊的圓圈和充滿活力的插圖為設(shè)計增添了活力和趣味性。
一旦設(shè)計方向達成一致，后續(xù)就是在代碼中實現(xiàn)我們的新風格。下圖是LevelUp的其他頁面設(shè)計。
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)站的移動主頁。
設(shè)計風格方案一
第一個風格方案的目標是傳達信心，高能量和可信賴性。主要的配色方案是海軍藍，灰色和白色，給人一種權(quán)威的感覺，以明亮的藍綠色和海泡綠色為重點，增添能量。它結(jié)合了襯線字體和非襯線字體，以強調(diào)專業(yè)性和友好性。身穿運動裝備的一名微笑女性的圖片給人1以平易近人和志趣相投的感覺。這個圖片還配上俏皮的風格圖標，進一步營造出一種能量和樂趣。
設(shè)計風格方案二
這種風格在排版和布局方面跟方案一類似，但更多的是“以技術(shù)和科學為動力”的氛圍。為此，我們結(jié)合了明亮的漸變，以及原子符號的圖示。
設(shè)計風格方案三
第三種設(shè)計方案直接被用戶采納。它結(jié)合了客戶喜愛的第二種選擇的“科學背景”的感覺。它不是使用冷色調(diào)，而是采用了更友好的黃色和橙色。客戶喜歡這種設(shè)計。
一旦移動端的主頁設(shè)計最終被確定，我們?yōu)榫W(wǎng)站設(shè)計并構(gòu)建了幾個額外的響應(yīng)頁面，并為該程序設(shè)計了一個額外的桌面端網(wǎng)頁。
熱門課程推薦
熱門資訊
-
1. 10個免費學習UI設(shè)計的網(wǎng)站 提升你的設(shè)計能力
怎樣可以提升你的UI設(shè)計能力!第一個:站酷站酷想必是設(shè)計師都知道的一個網(wǎng)站,里面不止有UI設(shè)計的資源,還有其他設(shè)計的,不如:平面設(shè)計、網(wǎng)頁設(shè)計、字體...
-
2. iPhone6的UI設(shè)計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設(shè)計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設(shè)計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
3. 移動端UI設(shè)計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設(shè)計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設(shè)計的基本知識
-
4. 12個絕佳的UI設(shè)計網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設(shè)計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設(shè)計師的...
-
5. 移動端列表頁和表單頁設(shè)計秘訣:讓你的APP點擊率翻倍
在移動端設(shè)計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設(shè)計能夠讓用戶輕松地獲取信息并產(chǎn)生點擊欲望,從而提高點擊率。本文將為你...
-
6. 史上最全，平面設(shè)計UI設(shè)計必備的77個國內(nèi)外素材、設(shè)計資源網(wǎng)站
ui設(shè)計社區(qū),大神太多了。3、behance: https://www.behance.net/ ,著名設(shè)計... 對于品牌設(shè)計師來說,除了圖案素材收集之外,還有一個很重要的,就是設(shè)計故...
-
7. 推薦10本適合UI設(shè)計師看的書籍，輕松掌握技能!
對于想要提高自己的設(shè)計能力和創(chuàng)造力的小白和UI設(shè)計師來說,這本書是一個很好的選擇。4.《設(shè)計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
8. 設(shè)計中的色彩心理學:淺析中西方色彩的歷史演變與設(shè)計應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計應(yīng)用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設(shè)計中的重要性以及新興技...
-
9. 武漢UI設(shè)計培訓班費用怎么樣？想學UI設(shè)計要多少錢？
想了解武漢UI設(shè)計培訓班的費用是多少嗎？不知道學UI設(shè)計要花多少錢？不妨看看這篇文章，了解UI設(shè)計培訓班的學費價格以及學習內(nèi)容。
-
10. 零基礎(chǔ)學UI設(shè)計要多久？培訓完能拿多少工資？
探索零基礎(chǔ)UI設(shè)計培訓的時長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
最新文章
