對(duì)于許多品牌和網(wǎng)站而言，著陸頁(yè)在營(yíng)銷上有著至關(guān)重要的作用。用戶打開(kāi)著陸頁(yè)之后，能夠通過(guò)它瞬間明白這個(gè)網(wǎng)站是做什么的，提供什么樣的產(chǎn)品，什么樣的服務(wù)，同時(shí)不會(huì)被其他的信息所分心。正是因?yàn)橹戫?yè)的獨(dú)特地位，它在品牌和內(nèi)容營(yíng)銷上的作用是難以忽視的。想要讓著陸頁(yè)運(yùn)轉(zhuǎn)正常，有足夠突出的轉(zhuǎn)化率，你需要基于目標(biāo)受眾來(lái)進(jìn)行設(shè)計(jì)。

但是，對(duì)于受眾廣泛、用戶類型多樣的網(wǎng)站平臺(tái)而言，又要如何設(shè)計(jì)著陸頁(yè)呢？今天的文章，我們就來(lái)看這樣的一個(gè)著陸頁(yè)設(shè)計(jì)案例。今天這個(gè)設(shè)計(jì)實(shí)戰(zhàn)的設(shè)計(jì)師是Ludmila Shevchenko 。

任務(wù)

設(shè)計(jì)著陸頁(yè)，頁(yè)面中需要搭配相應(yīng)的自定義數(shù)字插畫。

處理過(guò)程

提出需求的是英國(guó)公司 Collectively Intelligent Limited，他們旗下有一個(gè)名為 Colony 的線上數(shù)字協(xié)作平臺(tái)。這個(gè)平臺(tái)的創(chuàng)建，是旨在幫助全世界不同國(guó)家和地區(qū)的人民通過(guò)它來(lái)共同創(chuàng)建公司。在社區(qū)中，不同的用戶可以圍繞一個(gè)目標(biāo)進(jìn)行合作，協(xié)同創(chuàng)造，共同管控資金，分享項(xiàng)目收入，而在此過(guò)程中這些人甚至都不一定需要認(rèn)識(shí)對(duì)方，只需要目標(biāo)一致，通過(guò)平臺(tái)協(xié)同即可。

客戶提出單獨(dú)設(shè)計(jì)著陸頁(yè)的需求，希望這個(gè)著陸頁(yè)能夠以相對(duì)簡(jiǎn)單和平易近人的設(shè)計(jì)，傳達(dá)出他們的價(jià)值主張。Colony 是一個(gè)成熟的、復(fù)雜的產(chǎn)品，所以著陸頁(yè)的主要功能是幫助人們了解它是如何工作的，以及從中能夠得到什么好處。

著陸頁(yè)的設(shè)計(jì)

有些人會(huì)認(rèn)為，在著陸頁(yè)中盡可能多的包含產(chǎn)品細(xì)節(jié)，能夠吸引用戶。但是實(shí)際上，一個(gè)著陸頁(yè)不應(yīng)當(dāng)包含過(guò)量的信息，而應(yīng)該讓用戶注意到產(chǎn)品的核心價(jià)值，凸顯對(duì)用戶有利的信息。所以，在設(shè)計(jì)的時(shí)候，通常是采用相對(duì)簡(jiǎn)約明晰的視覺(jué)設(shè)計(jì)，通過(guò)幾個(gè)富有凝聚力的UI元素（比如CTA按鈕和表單）來(lái)呈現(xiàn)。

圍繞著核心特點(diǎn)來(lái)對(duì)著落頁(yè)進(jìn)行設(shè)計(jì)，設(shè)計(jì)師需要有層次地規(guī)劃整個(gè)布局，以及各個(gè)部分的優(yōu)先級(jí)。有效的視覺(jué)層次有利于用戶逐步獲取信息。

自定義的插畫常常會(huì)出現(xiàn)在著陸頁(yè)當(dāng)中，作為重要的UI組件幫助用戶理解產(chǎn)品的功能和概念。所以，在首圖的位置使用插畫是相當(dāng)普遍而有效的選擇。為了設(shè)計(jì)出更加有效的首圖插畫，Tubik團(tuán)隊(duì)中的 Arthur Avakyan 和 Denis Boldyriev 也參與到首圖插畫的頭腦風(fēng)暴和創(chuàng)意設(shè)計(jì)當(dāng)中來(lái)。設(shè)計(jì)師嘗試將地球上不同區(qū)域的用戶相互連接的概念來(lái)進(jìn)行設(shè)計(jì)。下面就是他們基于這一概念設(shè)計(jì)出來(lái)的插畫：

Ludmila Shevchenko 設(shè)計(jì)的插畫

Arthur Avakyan 設(shè)計(jì)的插畫

Denys Boldyriev 設(shè)計(jì)的插畫

設(shè)計(jì)師們拿出了不同風(fēng)格的插畫，它們?cè)谥黝}上和整個(gè)UI保持一致，營(yíng)造出友好、平易近人的氛圍，同時(shí)也讓人對(duì)整個(gè)公司形象產(chǎn)生足夠的好感。插畫中展示出 Colony 是如何幫助世界各地的用戶溝通、交流、達(dá)成目標(biāo)的。

客戶在視覺(jué)上更加傾向于淺色背景和流暢的輪廓，因?yàn)檫@更加貼合他們的商業(yè)定位。考慮到客戶的方向選擇，Ludmila 還基于客戶的選擇繪制了一系列的變體。

全球互聯(lián)

連接地球

太空任務(wù)

連接世界

再次將4個(gè)不同的設(shè)計(jì)提交給客戶的時(shí)候，他們傾向于讓第三副圖和第四副圖的概念結(jié)合到一起。

在進(jìn)行調(diào)整之后，我們得到了最終的版本。第三副圖當(dāng)中的UI元素和第三副圖的插畫充分地融合到了一起，而配色則采用了集中明亮但是并不富有侵略性的色彩，粉紅、黃色、綠松石色以及紫色。

特色插畫

接下來(lái)，就是為了展示不同的功能而設(shè)計(jì)自定義插畫。這些插畫也會(huì)使用和首圖插畫一致的配色方案。這些插畫是為了簡(jiǎn)明地展示產(chǎn)品功能而存在，以便用戶可以快速理解產(chǎn)品的功能和本質(zhì)。此外，插畫還會(huì)搭配一些微文案，來(lái)幫助用戶了解這些功能的特點(diǎn)。而這個(gè)時(shí)候，還需要文案設(shè)計(jì)師參與進(jìn)來(lái)。

正如你所看到的，所有的插畫都使用了大量的留白和微妙的元素來(lái)凸顯產(chǎn)品的復(fù)雜性。由于插畫中的色彩看起來(lái)非常的具有親和力，這使得插畫顯得非常的友好、富有吸引力。

為了讓整個(gè)界面看起來(lái)足夠一致，設(shè)計(jì)師還為制作了產(chǎn)品故事插畫，它闡述了人們?yōu)楹涡枰@個(gè)產(chǎn)品。故事是吸引潛在客戶關(guān)注的好辦法，漂亮的自定義插畫讓它足以給用戶留下好印象。

代幣銷售頁(yè)面

Colony 有它獨(dú)特的網(wǎng)絡(luò)體系和金融體系。為了擁有足夠的所有權(quán)，用戶需要通過(guò)工作來(lái)獲取更多的代幣，獲取的代幣越多，用戶能夠通過(guò)Colony 的網(wǎng)絡(luò)獲得更多的權(quán)限。為了吸引用戶的興趣，并告知他們代幣的銷售開(kāi)始，客戶要求我們?cè)O(shè)計(jì)一個(gè)特殊的倒計(jì)時(shí)頁(yè)面。

【2018年設(shè)計(jì)趨勢(shì)，一個(gè)都不要錯(cuò)過(guò)】

1. 《2018年，這10個(gè)LOGO設(shè)計(jì)趨勢(shì)值得你關(guān)注》
2. 《超全面總結(jié)！2017年UI設(shè)計(jì)領(lǐng)域流行過(guò)這21個(gè)設(shè)計(jì)趨勢(shì)》
3. 《掌握這12個(gè)移動(dòng)端UX設(shè)計(jì)趨勢(shì)，你就掌控了2018年》
4. 《這款獨(dú)特的紫色，是為你指引2018年設(shè)計(jì)方向的年度潘通色》

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

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

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

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