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

△ Ludmila Shevchenko 的 Dribbble 頁面

??我們?cè)诘谝黄谘?qǐng)了 Ludmila Shevchenko，個(gè)人主頁（https://dribbble.com/LudmilaShevchenko），她是 Dribbble 上的紅人（優(yōu)設(shè)訪談http://www.hx168888.com/uisdc-designer-interview-ludmila），關(guān)注者近7000人，目前就任于全球知名設(shè)計(jì)機(jī)構(gòu) Tubik（https://dribbble.com/Tubik），服務(wù)客戶包括 Opera（知名瀏覽器）、Echo、Ribbet 等。我們這次就請(qǐng)她為我們講解一下她是如何設(shè)計(jì)出來她的實(shí)際網(wǎng)頁案例 magic.co（瀏覽量高達(dá)150000）的。

△ magic.co

優(yōu)設(shè)：

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

Ludmila：

這一組設(shè)計(jì)的客戶是一個(gè)為用戶提供不同服務(wù)的機(jī)構(gòu)。

優(yōu)設(shè)：

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

Ludmila：

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

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

優(yōu)設(shè)：

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

Ludmila：

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

△ magic.co 手繪稿

△ magic.co 手繪稿

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

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

△ magic.co 線框圖

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

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

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

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

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

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

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

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

我們展示給客戶方形和菱形的方案時(shí)，客戶就表示會(huì)傾向選擇黃紅紫色漸變，因?yàn)檫@能帶來積極的氛圍和溫暖的視覺感受。

其他頁面中，波浪繼續(xù)出現(xiàn)，它們是對(duì)首頁抽象結(jié)構(gòu)的的進(jìn)一步設(shè)計(jì)，CTA 按鈕（用戶行為號(hào)召按鈕）支持波浪和漸變，我們?cè)陧撁嬷行枰黾訄D片素材和文案信息。通過透明陰影的幫助，我們可以看到背景的照片，周圍的漸變既能夠加強(qiáng)畫面的視覺效果，又能夠讓信息和 CAT 按鈕顯現(xiàn)。

△ magic.co 視覺稿

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

優(yōu)設(shè)：

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

Ludmila：

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

優(yōu)設(shè)：

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

Ludmila：

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

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

優(yōu)設(shè)：

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

Ludmila：

△ Ludmila 工作臺(tái)

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

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

「設(shè)計(jì)師專訪，了解大牛都是如何開展設(shè)計(jì)的」

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

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

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

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