設計直播專題！Dribbble 上爆火的漸變網(wǎng)頁設計是如何誕生的？

@N可可洛N、@爆炒地瓜????：我們這次的新欄目是設計流程相關的「設計直播」。看到優(yōu)秀的作品，我們總是好奇這些出彩成功的作品是如何一步一步誕生的。臨摹過很多作品，但是在做實際項目的時候，還是無從下手。所以希望通過和這些專業(yè)設計師的零距離訪談，來給大家呈現(xiàn)一個專業(yè)設計師在進行設計時的思考過程，一個設計從需求到實現(xiàn)的思考過程。 優(yōu)設會邀請國內(nèi)外優(yōu)秀的設計師分享他們真實的創(chuàng)作歷程。

△ Ludmila Shevchenko 的 Dribbble 頁面

??我們在第一期邀請了 Ludmila Shevchenko，個人主頁（https://dribbble.com/LudmilaShevchenko），她是 Dribbble 上的紅人（優(yōu)設訪談http://www.czdes.cn/uisdc-designer-interview-ludmila），關注者近7000人，目前就任于全球知名設計機構(gòu) Tubik（https://dribbble.com/Tubik），服務客戶包括 Opera（知名瀏覽器）、Echo、Ribbet 等。我們這次就請她為我們講解一下她是如何設計出來她的實際網(wǎng)頁案例 magic.co（瀏覽量高達150000）的。

△ magic.co

優(yōu)設：

用一句話介紹一下您的客戶背景。

Ludmila：

這一組設計的客戶是一個為用戶提供不同服務的機構(gòu)。

優(yōu)設：

前期如何與客戶溝通并獲取客戶想法？是否有一些常用的流程？

Ludmila：

在第一階段我們會充分接觸客戶并了解他們的需求。我們會請他們填寫一些關鍵信息，包括他們的核心業(yè)務、他們喜歡的方向和風格。

然后，我們會和客戶用 Skype 或其他形式進行交流，盡可能的找出問題并和他們建立起信任關系。我們相信這種信任關系對我們以后的工作有促進的作用。

優(yōu)設：

能否說下大概的構(gòu)思設計過程以及在實施設計過程中的思考，為什么如此設計，基于哪點考慮作出這樣的思考？

Ludmila：

我們的設計是為一所服務機構(gòu)而作，任務是為客戶設計創(chuàng)造一個獨一無二的、全新的服務愿景。這個網(wǎng)站在眾多網(wǎng)站中應該是脫穎而出的，對用戶來說是能夠被記住的。在初期，我們首先會確定結(jié)構(gòu)框架，一旦簡單的結(jié)構(gòu)框架被確定，我就開始從 UX 結(jié)構(gòu)進行設計。將每一個部分都作為新的頁面，那么這部分的信息就可以獲得用戶的額外關注。

△ magic.co 手繪稿

△ magic.co 手繪稿

?對我而言，即使是整體的結(jié)構(gòu)都沒有很多元素，第一步在紙上繪制草圖也會讓一切變得簡單。腦中想法和手部活動的即時聯(lián)系會激發(fā)新的創(chuàng)意和組合方式，在你畫第一個想法時，新的念頭就會出現(xiàn)。所以我認為以傳統(tǒng)的形式進行繪制，是激發(fā)靈感的最佳方式。在這個案例中，當了解了客戶想要吸引眼球的意愿，我就決定使用亮色系的漸變色，同時由于素材較少，我認為使用幾何造型，可能更容易營造出特立獨行的畫面。

之后，我會用 Sketch 繪制 UX。根據(jù)任務的不同，第一次向用戶展示手繪或者數(shù)字框架都是可行的。

△ magic.co 線框圖

?接下來，我開始設計 UI。在首頁只有公司的名稱、口號和引導箭頭，我的想法是應該設計創(chuàng)造一個明亮、吸引人的背景。?

?我開始創(chuàng)建元素的抽象組合，并確保它們之后可以進一步動態(tài)化。第一個方案是矩形和方形等尖銳的形狀組合而成，但我后來想到了圓形、曲線等柔和的形狀看起來會更友好。于是首先在紙上繪制了曲線的形狀，隨手繪制，并最終選擇流暢的、漂亮的、和諧的線條，混合到一個畫面中，在電腦中創(chuàng)建曲線時，應盡量使用盡可能少的錨點，同時檢查曲線在這些點上的平滑移動。

首頁也是用戶暢游于想象奧秘探尋之旅的源頭。最終我們還在這個頁面中加入了動效，讓頁面看起來更有活力。

?配色對我來說是一個有趣的過程。帶著愉悅的、有趣的心情，我開始探索漸變組合，希望它們的出現(xiàn)能夠幫助圖片變得生動一些。具體的描述顏色選擇的某些步驟并不容易，因為這是一個持續(xù)研究的創(chuàng)作過程。

?在剛開始，我的想法是總體保持溫暖、積極的視覺感受，使用冷熱色彩對比和陰影的效果，打造有沖擊力的畫面，讓整體看上去是創(chuàng)新的、明快的、有活力的。因此我選擇了黃/橙/紅、粉/紅/紫和青/靛/藍色三種搭配，這樣豐富的配色才能夠達到我想要的活力效果。

?我會單獨性的探索每一個漸變色，通過考量這些顏色過渡的是否平滑，還是中間會有第三種顏色添加，這樣我才會把注意力集中在顏色本色，以確保他們是純粹的、充滿活力的，之后我會嘗試將不同的漸變組合放置于形狀上，在這個步驟中會進行一些調(diào)整，包括色彩、漸變和透明度。時刻注意對比度，觀察是否需要調(diào)高或調(diào)低對比度。

在一種配色方案中創(chuàng)建多個漸變，我會嘗試更改主色調(diào)的陰影，增加或減少其飽和度和不透明度， 這樣就產(chǎn)生了最亮的顏色組合和流暢的漸變。 完全不同的色彩漸變相鄰，我會檢查邊緣是否有吸引人的感覺，以便頁面看起來不會太反差。

?我根據(jù)特定的調(diào)色板得到了4個方案，其中我選擇了一組我認為對比性和完整性較好的配色。最終的選擇是一組平穩(wěn)的漸變組合，既保持了公司的名稱和口號的可讀性，同時在網(wǎng)頁的兩端又有較強的色彩對比度，有極強的視覺沖擊力。

我們展示給客戶方形和菱形的方案時，客戶就表示會傾向選擇黃紅紫色漸變，因為這能帶來積極的氛圍和溫暖的視覺感受。

其他頁面中，波浪繼續(xù)出現(xiàn)，它們是對首頁抽象結(jié)構(gòu)的的進一步設計，CTA 按鈕（用戶行為號召按鈕）支持波浪和漸變，我們在頁面中需要增加圖片素材和文案信息。通過透明陰影的幫助，我們可以看到背景的照片，周圍的漸變既能夠加強畫面的視覺效果，又能夠讓信息和 CAT 按鈕顯現(xiàn)。

△ magic.co 視覺稿

?最后，我們添加了動畫效果，以顯示所有元素的交互設計和表現(xiàn)實時視圖。這是團隊合作的一個很好案例，動畫的添加讓畫面變得更加靈動。

優(yōu)設：

給客戶設計時的講解技巧，最終呈現(xiàn)的設計圖包含什么內(nèi)容？

Ludmila：

在與客戶的溝通交流過程中，我們遵循規(guī)則逐步展示工作，把以上主要的設計點加以強調(diào)和描述。

優(yōu)設：

能否為我們分享下您是如何有效提升自己的設計能力？有什么值得推薦的好書或者效率工具么？

Ludmila：

首先，您應該培養(yǎng)自己的品味，關注所有領域的設計實例，不僅關注移動設備、網(wǎng)頁設計師和公司企業(yè)，還需要關注平面設計、建筑、攝影和藝術(shù)等領域的影響力。 通過這種方式，你將永遠知道現(xiàn)在的流行方向和設計趨勢。 接下來，在工作閑暇之余你可以挑戰(zhàn)自己完成一些小任務。 創(chuàng)造概念性設計，解決當前的主題，這樣你就能夠提升一些基本的設計能力，例如排版、構(gòu)圖、配色，這也是一種自我發(fā)展和工作過程改進。

我最喜歡的書籍之一是約瑟夫阿爾伯斯的《色彩交互學》，你可以在其中找到色彩研究、原理以及使用色彩創(chuàng)作的心理感受。

優(yōu)設：

小伙伴們都很好奇您的工作臺是什么樣子的呢？

Ludmila：

△ Ludmila 工作臺

?這是我在 Tubik Studio 工作區(qū)的照片。 我使用 Retina 5K 顯示器搭配 iMac 27。 桌面上總是擺放著我的素描本，以便勾畫出我想到的每一個想法。 我喜歡在工作時聽音樂，這就是為什么有耳機。 為了獲得靈感，窗口放置著我?guī)啄昵袄L制的一張抽象畫，蘭花、大自然總是激勵著我，桌子上的書，是關于50年代和60年代的裝飾藝術(shù)。 此外，還有一些不錯的小物件，如貓頭鷹雕像和明信片，這些都能讓我在工作中保持愉悅的心情。

感謝設計師 Ludmila Shevchenko 給優(yōu)設小伙伴們帶來的這次精彩分享，讓我們看到了一個作品背后最真實的一面。?喜歡的朋友可以訪問 Ludmila Shevchenko 主頁哦（https://dribbble.com/LudmilaShevchenko）。

「設計師專訪，了解大牛都是如何開展設計的」

• 《優(yōu)設專訪！優(yōu)設×追波人氣第一名的設計大神Mike》
• 《優(yōu)設專訪！對話波蘭獨立設計師Ruslan》
• 《優(yōu)設專訪！對話「用色驚艷」的人氣設計師Ludmila》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內(nèi)人氣最高的設計網(wǎng)址導航，設計師必備： http://hao.uisdc.com