Dribbble 上爆火的漸變網頁設計是如何誕生的？

04-30

看到優秀的作品，我們總是好奇這些出彩成功的作品是如何一步一步誕生的。臨摹過很多作品，但是在做實際項目的時候，還是無從下手。所以希望通過和這些專業設計師的零距離訪談，來給大家呈現一個專業設計師在進行設計時的思考過程，一個設計從需求到實現的思考過程。優設會邀請國內外優秀的設計師分享他們真實的創作歷程。

△ Ludmila Shevchenko 的 Dribbble 頁面

我們在第一期邀請了 Ludmila Shevchenko，她是 Dribbble 上的紅人。關注者近7000人，目前就任於全球知名設計機構 Tubik，服務客戶包括 Opera（知名瀏覽器）、Echo、Ribbet 等。我們這次就請她為我們講解一下她是如何設計出來她的實際網頁案例 http://magic.co（瀏覽量高達150000）的。

△ http://magic.co

優設：

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

Ludmila：

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

優設：

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

Ludmila：

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

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

優設：

能否說下大概的構思設計過程以及在實施設計過程中的思考，為什麼如此設計，基於哪點考慮作出這樣的思考？

Ludmila：

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

△ http://magic.co 手繪稿

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

之後，我會用 Sketch 繪製 UX。根據任務的不同，第一次向用戶展示手繪或者數字框架都是可行的。

△ http://magic.co 線框圖

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

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

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

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

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

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

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

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

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

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

△ http://magic.co 視覺稿

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

優設：

給客戶設計時的講解技巧，最終呈現的設計圖包含什麼內容？

Ludmila：

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

優設：

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

Ludmila：

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

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

優設：

小夥伴們都很好奇您的工作台是什麼樣子的呢？

Ludmila：

△ Ludmila 工作台

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

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