設(shè)計(jì)是一個(gè)不斷發(fā)展變化的領(lǐng)域。 很多時(shí)候，看似熟悉的設(shè)計(jì)趨勢會(huì)在下一刻發(fā)生變化，再次讓你大吃一驚。 靈活的創(chuàng)意和開放的思維，往往能將平凡的元素轉(zhuǎn)化為令人驚嘆的設(shè)計(jì)作品。 這種點(diǎn)鐵成金的成就感，大概就是很多設(shè)計(jì)師即使再努力也會(huì)堅(jiān)持下去的原因吧？

今天，我們收集了圖比克幾位設(shè)計(jì)師的作品。 它們是不同業(yè)務(wù)目標(biāo)的產(chǎn)物。 這些UI設(shè)計(jì)作品從配色到動(dòng)態(tài)效果，無疑都相當(dāng)驚艷。 今天，我們就通過這些案例，來聊一聊優(yōu)秀UI視覺設(shè)計(jì)背后的那些事。

1.突出特點(diǎn)

設(shè)計(jì)工作室官網(wǎng)設(shè)計(jì)

形狀或顏色，哪個(gè)在設(shè)計(jì)上更具表現(xiàn)力？ 這個(gè)問題可能沒有固定的答案。 這場設(shè)計(jì)領(lǐng)域的戰(zhàn)爭已經(jīng)進(jìn)行了很多年，甚至還會(huì)繼續(xù)下去。 本設(shè)計(jì)項(xiàng)目是為一家室內(nèi)設(shè)計(jì)工作室設(shè)計(jì)官網(wǎng)，其主要業(yè)務(wù)是制作視覺室內(nèi)設(shè)計(jì)效果圖。 他們熟悉如何使用設(shè)計(jì)工具來最大限度地發(fā)揮室內(nèi)設(shè)計(jì)的效果。 接到需求后，我們決定用全屏背景結(jié)合他們最擅長的3D建模來展現(xiàn)高品質(zhì)的室內(nèi)設(shè)計(jì)能力和建模渲染效果。

分層布局，讓前后內(nèi)容各司其職，重點(diǎn)內(nèi)容塊輕松掃一掃。 每個(gè)塊都有一個(gè)突出的標(biāo)題，告知用戶內(nèi)容的屬性。 頁面頂部的導(dǎo)航中展示了品牌標(biāo)識，頁面上的相關(guān)社交媒體鏈接也非常清晰醒目。 在這個(gè)彩色頁面中，關(guān)鍵的 CTA 按鈕需要借助對比色突出顯示，將用戶引導(dǎo)至特定功能和頁面。

數(shù)字建模的好處是更身臨其境的場景和更容易處理的數(shù)字材料。 通過這種方式，設(shè)計(jì)人員可以更輕松地處理和添加更有效的動(dòng)畫效果。 在這種情況下，動(dòng)效設(shè)計(jì)師讓用戶在滾動(dòng)過程中看到條紋效果，使得頁面的層次感明顯，這也暗示了設(shè)計(jì)工作室在視覺效果方面強(qiáng)大的處理能力。 此外，用戶可以借助頁面指示器快速切換頁面，這也保證了整個(gè)網(wǎng)站在功能上的便捷性和完備性。

2.強(qiáng)化屬性

用于訂購服務(wù)的網(wǎng)站頁面設(shè)計(jì)

對于出行，絕大多數(shù)用戶都抱有很高的期望。 但是旅行本身并不容易，需要訂酒店、買機(jī)票和汽車票、租車、買票，旅行也意味著很多活動(dòng)。 這次的概念設(shè)計(jì)圍繞著預(yù)訂服務(wù)展開。 3D 建模也用于構(gòu)建視覺。 左側(cè)頁面占據(jù)了很多與日常出行相關(guān)的視覺元素，右側(cè)則是預(yù)訂時(shí)需要填寫的表格內(nèi)容。 整個(gè)頁面采用了更加鮮艷的配色，減輕了用戶填寫表單時(shí)的緊張感。 清晰直觀的頁面布局允許用戶直接開始交互，而無需摸索。 從標(biāo)題到表格的條目，都有很好的對比，可以快速瀏覽閱讀，方便用戶填寫。

向下滾動(dòng)，用戶可以了解該服務(wù)的相對優(yōu)勢、特殊功能、相關(guān)優(yōu)勢等更多信息。 每條信息都圍繞一個(gè)主題進(jìn)行闡述，視覺元素設(shè)計(jì)得非常醒目，同時(shí)與整體風(fēng)格和調(diào)性保持高度一致。

3.創(chuàng)建圖層

庫布里克的作品網(wǎng)站

今年7月26日，全世界電影人都在慶祝著名導(dǎo)演庫布里克誕辰90周年。 作為庫布里克的粉絲，我們也為他的作品創(chuàng)建了一個(gè)比較優(yōu)雅的網(wǎng)站。 該網(wǎng)站展示了他的榮耀之路、他的生活以及他是如何開始創(chuàng)作的。 整個(gè)網(wǎng)站借助視覺設(shè)計(jì)來驅(qū)動(dòng)用戶持續(xù)瀏覽。 交互不僅在上下左右的布局上有層次感，在視覺上也有深度。 作為出品過如此多經(jīng)典作品的導(dǎo)演，我們選擇了對比強(qiáng)烈且經(jīng)典的紅黑三色作為整個(gè)網(wǎng)站的主色調(diào)，非常符合他獨(dú)特的定位和屬性。 單擊此處查看站點(diǎn)。

4.渲染氣氛

兒童保育服務(wù)的著陸頁設(shè)計(jì)

在尋找托兒所和兒童保育機(jī)構(gòu)時(shí)，所有的父母都希望為他們的孩子提供最好的服務(wù)，找一個(gè)能給他們最好的照顧的保姆。 此登錄頁面設(shè)計(jì)適用于名為 Kiddy 的托兒服務(wù)提供者。 Kiddy致力于為用戶提供服務(wù)周到的保姆，在這里聘請保姆絕對是小菜一碟。

為了讓整個(gè)頁面足夠可愛，獨(dú)特有趣的插畫起到了很大的作用，加上童趣十足的字體，讓整個(gè)頁面足夠有視覺感。 同時(shí)，柔和的配色方案在文本和背景之間提供了高對比度，使用戶只需一眼就可以輕松閱讀內(nèi)容。

整個(gè)頁面具有著陸頁應(yīng)有的所有組成部分：過去客戶的推薦，新用戶可以直接與頂級專業(yè)托管人員聯(lián)系，相關(guān)信息一應(yīng)俱全。 最重要的是，如果用戶想直接聘請保姆，甚至不用翻頁就可以直接溝通。

5.吸引注意力

VR虛擬聊天室服務(wù)網(wǎng)站設(shè)計(jì)

我們常常有逃避現(xiàn)實(shí)的沖動(dòng)。 還有什么比VR更身臨其境的體驗(yàn)?zāi)兀?這個(gè)瘋狂的想法催生了VR虛擬聊天室的概念，更瘋狂的是它還是基于Web平臺。 明亮而迷幻的配色方案，引人注目的 3D 圖形象征著現(xiàn)代技術(shù)。 為了更好的呈現(xiàn)，用戶可以直接在第一屏觀看，無需滾動(dòng)。 首頁提供相關(guān)虛擬聊天室的介紹和模板鏈接。 用戶甚至可以定期訂閱獲取不同的模板并進(jìn)行升級。

高飽和度的色彩和3D建模非常適合當(dāng)下虛擬現(xiàn)實(shí)給用戶帶來的體驗(yàn)，而極其搶眼的色彩所給人的不切實(shí)際的感覺，反而強(qiáng)調(diào)了虛擬聊天室的超現(xiàn)實(shí)特性。

6.制造比較

手工藝品市場的網(wǎng)站設(shè)計(jì)

如今，各種設(shè)計(jì)工作室甚至家庭制作的各種手工制品越來越受到追捧。 通過這樣的C2C平臺，每個(gè)人都可以提交自己的手工制品進(jìn)行銷售，買家可以獲得很多獨(dú)一無二的。 商品。 在為這個(gè)手工市場設(shè)計(jì)網(wǎng)頁時(shí)，主要使用網(wǎng)格系統(tǒng)來保證整個(gè)頁面布局看起來散亂，但實(shí)際上非常規(guī)整。 優(yōu)雅的布局和配色，在光影和動(dòng)效的加持下，層次豐富又不顯得雜亂，十分吸睛。

淺色的背景給了網(wǎng)站很好的空間感，讓圖片自然而然的具有了抓人眼球的特點(diǎn)。 相對多樣的文字、顏色和風(fēng)格，讓整個(gè)網(wǎng)站顯得豐富而不單調(diào)。 頁腳使用黑色背景圖片，主要內(nèi)容以外的其他信息和鏈接都存放在這里，方便用戶獲取內(nèi)容。

7.打破規(guī)則

網(wǎng)站建設(shè)服務(wù)公司的網(wǎng)站設(shè)計(jì)

誰說提供網(wǎng)站建設(shè)和開發(fā)的公司，官網(wǎng)就一定要看起來簡單、中性、乏味？ 當(dāng)然不是！

這家專注于 Ruby on Rails 開發(fā)的公司，在設(shè)計(jì)上非常直觀。 建模做出來的gem是Ruby on Rails的代表，與公司常用的開發(fā)語言有著明顯的聯(lián)系。 公司社交媒體帳戶的鏈接標(biāo)記在第一個(gè)屏幕的底部。 即使也是CTA按鈕，主要按鈕使用對比強(qiáng)烈的實(shí)心底座，而次要按鈕則使用幽靈按鈕。

在向下滾動(dòng)的過程中，用戶將在信息圖的內(nèi)容塊中了解團(tuán)隊(duì)使用的技術(shù)、公司的相關(guān)信息、服務(wù)的客戶群以及聯(lián)系團(tuán)隊(duì)的快速提交表單。 內(nèi)容清晰、密集、目的明確，用戶在這樣的網(wǎng)站中絕不會(huì)感到困惑。

8.身臨其境的體驗(yàn)

在線百科知識網(wǎng)站

本網(wǎng)站致力于幫助您了解宇宙和太陽系，在這里您可以探索行星和太空。 在黑暗的宇宙背景下，可以看到木星表面清晰的地貌形成的線條。 極度視覺化的UI設(shè)計(jì)和動(dòng)效加持下的交互，讓用戶不再需要枯燥的閱讀，而是在不斷的閱讀瀏覽和交互中，更多地了解頭頂?shù)奶炜蘸秃诎抵羞b遠(yuǎn)的宇宙。 整個(gè)網(wǎng)站的背景色與宇宙的黑色一致，帶來相對沉浸的體驗(yàn)。 流暢的動(dòng)畫效果，讓用戶在瀏覽時(shí)有種穿越太空的感覺。

9.現(xiàn)在的節(jié)奏

音樂應(yīng)用程序的著陸頁

如何通過UI呈現(xiàn)節(jié)奏感？ 這是為流行音樂應(yīng)用程序設(shè)計(jì)登錄頁面時(shí)想到的第一個(gè)問題。 設(shè)計(jì)師通過鮮明抽象的圖形構(gòu)建動(dòng)畫，通過富有節(jié)奏感的動(dòng)畫呈現(xiàn)出獨(dú)特的節(jié)奏感和韻律感，從而達(dá)到情感和情感的表達(dá)。 頁面不需要很多文字，一個(gè)醒目的標(biāo)題就足夠了，下一步就是引導(dǎo)用戶注意CTA按鈕。 相反，大量的文字會(huì)影響用戶的注意力，所以才有了這種頁面設(shè)計(jì)。

結(jié)語

趨勢總是在變化。 順勢而為，需要根據(jù)需要靈活表達(dá)，更有效。 視覺、色彩、情感，所有因素都需要考慮，布局、色彩、交互、動(dòng)態(tài)效果缺一不可。 . 實(shí)現(xiàn)明確的設(shè)計(jì)目標(biāo)，服務(wù)于用戶和客戶，兼顧視覺和功能，順應(yīng)潮流而不盲目跟風(fēng)，才會(huì)創(chuàng)造出好的設(shè)計(jì)。