設(shè)計(jì)是一個(gè)不斷發(fā)展和變革的領(lǐng)域，很多時(shí)候，看似熟悉的設(shè)計(jì)趨勢(shì)會(huì)在下一刻搖身一變，便可再次驚艷到你。靈活的創(chuàng)意和開放的想法，常常能夠使稀松平常的元素?fù)u身一變，化身為驚艷的設(shè)計(jì)作品。這種點(diǎn)鐵成金的成就感，大概也是許多設(shè)計(jì)師即使辛苦也會(huì)堅(jiān)持下去的原因所在吧？

今天，我們搜集了幾個(gè)Tubik Studio 內(nèi)的設(shè)計(jì)師作品，它們是不同業(yè)務(wù)目標(biāo)下的產(chǎn)物，這些UI設(shè)計(jì)作品從配色到動(dòng)效，無(wú)疑都是相當(dāng)驚艷的。今天，我們透過這些案例，來(lái)聊一下優(yōu)秀的UI視覺設(shè)計(jì)臺(tái)前幕后的事情。

1、凸顯特點(diǎn)：設(shè)計(jì)工作室的官網(wǎng)設(shè)計(jì)

形體和色彩，到底哪個(gè)在設(shè)計(jì)中更加富有表現(xiàn)力？這個(gè)問題可能沒有一個(gè)固定答案，這場(chǎng)在戰(zhàn)爭(zhēng)在設(shè)計(jì)領(lǐng)域當(dāng)中已經(jīng)持續(xù)多年，甚至?xí)恢背掷m(xù)下去。這個(gè)設(shè)計(jì)項(xiàng)目是為一個(gè)室內(nèi)設(shè)計(jì)工作室來(lái)設(shè)計(jì)官方網(wǎng)站，他們的主要業(yè)務(wù)是制作可視化的室內(nèi)設(shè)計(jì)渲染圖。他們熟知如何最大限度地借助設(shè)計(jì)工具來(lái)呈現(xiàn)室內(nèi)設(shè)計(jì)的效果，在接到需求之后，我們決定使用全屏背景結(jié)合他們最擅長(zhǎng)的3D建模，來(lái)展現(xiàn)高質(zhì)量的室內(nèi)設(shè)計(jì)能力和建模渲染效果。

富有層次感的排版布局，讓前后景的內(nèi)容各司其職，關(guān)鍵的內(nèi)容塊也可以很輕松地被掃視。每個(gè)區(qū)塊都有著醒目的標(biāo)題，能夠告知用戶內(nèi)容的屬性。頁(yè)面頂部的導(dǎo)航中呈現(xiàn)了品牌的LOGO，頁(yè)面中相關(guān)社交媒體鏈接也非常清晰醒目。在這個(gè)色彩豐富的頁(yè)面中，關(guān)鍵的CTA按鈕是需要借助對(duì)比色來(lái)凸顯，將用戶導(dǎo)向特定的功能和頁(yè)面。

數(shù)字建模所帶來(lái)的好處是更加沉浸式的場(chǎng)景，和更加易于處理的數(shù)字素材，這樣一來(lái)，設(shè)計(jì)師也更容易處理，加入更加有效的動(dòng)畫效果。在這個(gè)案例當(dāng)中，動(dòng)效設(shè)計(jì)師讓用戶在滾動(dòng)的過程中，看到條紋式的效果，使得頁(yè)面的層次感明顯，也暗示了這個(gè)設(shè)計(jì)工作室在視覺效果上的強(qiáng)大處理能力。此外，用戶可以借助頁(yè)面指示器快速切換頁(yè)面，這一點(diǎn)也確保了整個(gè)網(wǎng)站在功能上的便捷和完善性。

2、強(qiáng)化屬性：訂購(gòu)服務(wù)的網(wǎng)站頁(yè)面設(shè)計(jì)

對(duì)于出門旅行，絕大多數(shù)的用戶都抱有著不小的期待。但是旅行本身并不輕松，需要訂購(gòu)酒店，需要購(gòu)買機(jī)票和車票，租車，購(gòu)買門票，同時(shí)還旅行還意味著非常大量的活動(dòng)。而這次的概念設(shè)計(jì)，就是圍繞著預(yù)訂服務(wù)來(lái)展開的。同樣使用了3D建模來(lái)構(gòu)建視覺，諸多和日常出行相關(guān)的視覺元素占據(jù)了左側(cè)的頁(yè)面，而右側(cè)則是預(yù)訂需要填寫的表單內(nèi)容。整個(gè)頁(yè)面采用了更加富有活力的配色，降低用戶填寫表單時(shí)候的緊張情緒，清晰直觀的頁(yè)面布局，讓用戶無(wú)需四處摸索，可以直接開始交互。從標(biāo)題到表單的條目都保有良好的對(duì)比度，可以快速掃視閱讀，便于用戶填寫。

向下滾動(dòng)，用戶可以了解這項(xiàng)服務(wù)的相關(guān)優(yōu)勢(shì)，特殊的功能，相關(guān)福利，以及更多的信息。每個(gè)信息快都緊密圍繞著一個(gè)主題來(lái)予以闡述，視覺化的元素被設(shè)計(jì)得非常吸睛，同時(shí)，和整體在風(fēng)格調(diào)性上也保持著高度的一致。

3、營(yíng)造層次：庫(kù)布里克的作品網(wǎng)站

今年 7 月 26 日，世界電影人都在慶賀著名導(dǎo)演庫(kù)布里克誕辰 90 周年，同樣身為庫(kù)布里克粉絲的我們，也為他制作了一個(gè)相對(duì)優(yōu)雅的作品網(wǎng)站。網(wǎng)站展現(xiàn)了他的榮耀之路，他的生活，以及他是如何進(jìn)行創(chuàng)作的。整個(gè)網(wǎng)站的設(shè)計(jì)都是借助視覺化的設(shè)計(jì)來(lái)驅(qū)動(dòng)用戶不斷瀏覽，交互不僅在上下左右布局上富有層次，而且在視覺縱深上做文章。作為一個(gè)產(chǎn)出過如此之多經(jīng)典作品的導(dǎo)演，我們選取了對(duì)比度強(qiáng)烈、經(jīng)典的紅黑白三色來(lái)作為整個(gè)網(wǎng)站的主要配色，這一點(diǎn)非常符合他獨(dú)特的定位和屬性。戳這里查看這個(gè)網(wǎng)站。

4、渲染氛圍：托兒服務(wù)的著陸頁(yè)設(shè)計(jì)

所有的父母在尋找托兒所和托管機(jī)構(gòu)的時(shí)候，都希望他們的孩子獲得最好的服務(wù)，能夠找到能夠給予孩子無(wú)微不至關(guān)懷的保姆。這個(gè)著陸頁(yè)的設(shè)計(jì)是為名為 Kiddy 這個(gè)托兒服務(wù)提供機(jī)構(gòu)所設(shè)計(jì)的著陸頁(yè)。Kiddy 致力于為用戶提供服務(wù)良好的保姆，在這里雇傭保姆絕對(duì)稱得上是小菜一碟。

為了讓整個(gè)頁(yè)面足夠可愛，風(fēng)格獨(dú)特有趣的插畫發(fā)揮了極大的作用，搭配性格富有童趣的字體，讓整個(gè)頁(yè)面足夠視覺化。與此同時(shí)，柔和的配色方案之下，文本和背景之間的對(duì)比度非常高，用戶只需要掃視就可以輕松讀取內(nèi)容。

整個(gè)頁(yè)面包含了一個(gè)著陸頁(yè)應(yīng)有的所有組件：有過去客戶的推薦內(nèi)容，新用戶可以和頂級(jí)、專業(yè)的托管人員直接連線溝通，相關(guān)的信息一應(yīng)俱全。最重要的是，用戶如果想直接雇傭保姆，甚至不需要翻頁(yè)，進(jìn)入頁(yè)面就可以直接溝通。

5、引人注意：VR虛擬聊天室服務(wù)的網(wǎng)站設(shè)計(jì)

我們很多時(shí)候會(huì)有脫離現(xiàn)實(shí)的沖動(dòng)，還有什么比VR 更具有沉浸式的體驗(yàn)?zāi)?？這個(gè)瘋狂的想法催生出了VR虛擬聊天室的概念，更瘋狂的是它還是基于Web平臺(tái)來(lái)實(shí)現(xiàn)。明亮而帶有迷幻特征的配色，引人矚目的3D圖形象征著現(xiàn)代技術(shù)。為了更好地演示，用戶可以直接在第一屏觀看，而無(wú)需滾動(dòng)頁(yè)面。主頁(yè)提供了相關(guān)虛擬聊天室的介紹和模板鏈接，用戶甚至可以訂閱而定期獲取不同的模板，進(jìn)行升級(jí)。

高飽和度的色彩和3D建模非常貼合目前虛擬現(xiàn)實(shí)給用戶帶來(lái)的體驗(yàn)，而極端醒目的色彩所給人的不真實(shí)感，相反更加強(qiáng)調(diào)了虛擬聊天室超越現(xiàn)實(shí)的特征。

6、制造對(duì)比：為手作市場(chǎng)進(jìn)行網(wǎng)站設(shè)計(jì)

如今各種設(shè)計(jì)工作室甚至家庭制作的各種手工制品正在受到越來(lái)越多的追捧，通過這樣的一個(gè)C2C平臺(tái)，大家可以將自己的手作提交上來(lái)銷售，買家借此可以獲得很多獨(dú)一無(wú)二的商品。在給這個(gè)手作市場(chǎng)設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候，主要借助了柵格系統(tǒng)來(lái)確保整個(gè)頁(yè)面布局看起來(lái)錯(cuò)落，但實(shí)際非常規(guī)律。優(yōu)雅的布局和配色，在陰影和動(dòng)效的加持之下，看起來(lái)層次豐富，又不顯得混亂，非常引人矚目。

淺色的背景賦予網(wǎng)站以良好的空間感，這使得圖片天然具備了抓人視線的特質(zhì)，相對(duì)多樣的文本、色彩和樣式，讓整個(gè)網(wǎng)站顯得豐富而不單調(diào)。頁(yè)腳采用了黑色的背景圖片，主要內(nèi)容以外的其他信息和鏈接都被收納在這里，方便用戶獲取內(nèi)容。

7、打破常規(guī)：建站服務(wù)公司的網(wǎng)站設(shè)計(jì)

誰(shuí)說一個(gè)提供網(wǎng)站建設(shè)和開發(fā)的企業(yè)，官網(wǎng)就一定是要看起來(lái)簡(jiǎn)單、中性且無(wú)聊的？當(dāng)然不是！

這個(gè)專注于 Ruby on Rails 開發(fā)的公司，就設(shè)計(jì)的非常視覺化。通過建模制作出來(lái)的寶石是 Ruby on Rails 的代表，這和公司常用的開發(fā)語(yǔ)言有了清晰的關(guān)聯(lián)，首屏底部標(biāo)識(shí)出了公司相關(guān)的社交媒體帳號(hào)的鏈接，即使同樣是CTA按鈕，主要的按鈕采用的是強(qiáng)對(duì)比的實(shí)底，而次要的則選用的是幽靈按鈕。

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

8、沉浸體驗(yàn)：在線百科知識(shí)網(wǎng)站

這個(gè)網(wǎng)站致力于幫你幫你了解宇宙和太陽(yáng)系相關(guān)的知識(shí)，你在這里能夠針對(duì)行星和宇宙空間進(jìn)行探索。在宇宙黑暗的背景之下，你可以看到木星表面清晰的地貌所構(gòu)成的紋路，極度視覺化的UI設(shè)計(jì)和動(dòng)效加持下的交互，讓用戶不再需要枯燥的閱讀，而是在不斷的瀏覽和交互中，逐步了解頭頂?shù)奶炜蘸秃诎抵械拿爝h(yuǎn)宇宙。整個(gè)網(wǎng)站的底色和宇宙的黑色保持著一致，帶來(lái)了相對(duì)沉浸的體驗(yàn)，流暢的動(dòng)畫下，用戶在瀏覽的時(shí)候會(huì)感到仿佛在太空中傲游一般的體驗(yàn)。

9、呈現(xiàn)韻律：音樂APP的著陸頁(yè)

如何通過UI來(lái)呈現(xiàn)出韻律感？這是在給時(shí)尚的音樂APP設(shè)計(jì)著陸頁(yè)的時(shí)候，最先想到的問題。設(shè)計(jì)師通過明亮而抽象的圖形來(lái)構(gòu)建動(dòng)畫，通過韻律感十足的動(dòng)畫來(lái)呈現(xiàn)獨(dú)特的節(jié)奏感和韻律感，從而實(shí)現(xiàn)情感和情緒的表達(dá)。頁(yè)面不需要大量的文本，一個(gè)醒目的大標(biāo)題就夠了，接下來(lái)就是將用戶的注意力引導(dǎo)到CTA按鈕上，相反大量的文本會(huì)影響用戶的注意力，所以，就有了這個(gè)頁(yè)面的設(shè)計(jì)。

結(jié)語(yǔ)

趨勢(shì)一直在變化，跟隨趨勢(shì)的時(shí)候，需要靈活地根據(jù)需求，進(jìn)行更為有效的表達(dá)，視覺，色彩，情感，所有的因素都需要考慮到，排版布局，色彩，交互，動(dòng)效，缺一不可。向著清晰的設(shè)計(jì)目標(biāo)前進(jìn)，服務(wù)于用戶和客戶，兼顧視覺和功能，緊隨趨勢(shì)又不盲從，這樣才會(huì)創(chuàng)造好的設(shè)計(jì)。

-----------------

譯者 : 優(yōu)設(shè)網(wǎng)陳子木 

作者 : Tubik Studio