首頁?>?知識?資訊?>?建設(shè)網(wǎng)站的產(chǎn)品著陸頁設(shè)計?>?正文

建設(shè)網(wǎng)站的產(chǎn)品著陸頁設(shè)計

2018/3/5 0:00:00 · 稿源:傳誠信

網(wǎng)站著陸頁的設(shè)計

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

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

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

Ludmila Shevchenko 設(shè)計的插畫

Arthur Avakyan 設(shè)計的插畫

Denys Boldyriev 設(shè)計的插畫

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

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

全球互聯(lián)

連接地球

太空任務(wù)

連接世界

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

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

特色插畫

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

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

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


北京傳誠信,行業(yè)領(lǐng)先網(wǎng)站建設(shè)公司,14年專注企業(yè)網(wǎng)站一站式服務(wù),已為眾多企業(yè)公司提供網(wǎng)站建設(shè),網(wǎng)站設(shè)計,網(wǎng)站制作,手機網(wǎng)站開發(fā),模板建站等服務(wù)。高端定制網(wǎng)站建設(shè)領(lǐng)軍品牌--傳誠信值得信賴!

  • 相關(guān)推薦
  • 大家在看
熱文
  • 熱門
  • 最新
客戶服務(wù)
咨詢熱線

010-62199213

24小時咨詢熱線

139-1050-5354