一個專業(yè)的產(chǎn)品著陸頁是怎么設(shè)計出來的呢？

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

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

任務(wù)

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

處理過程

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

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

著陸頁的設(shè)計

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

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

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

Ludmila Shevchenko 設(shè)計的插畫

Arthur Avakyan 設(shè)計的插畫

Denys Boldyriev 設(shè)計的插畫

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

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

全球互聯(lián)

連接地球

太空任務(wù)

連接世界

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

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

特色插畫

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

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

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

代幣銷售頁面

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

當前文章：一個專業(yè)的產(chǎn)品著陸頁是怎么設(shè)計出來的呢？
網(wǎng)頁URL：http://www.bm7419.com/news20/249120.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、虛擬主機、ChatGPT、手機網(wǎng)站建設(shè)、標簽優(yōu)化、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)