什麽樣的網頁設計(jì)能更好的吸引用戶呢？

對于網頁浏覽者而言，趣味性的網站(zhàn)和(hé)清晰直觀是同樣重要的屬性。今天的設計(jì)實戰，将會(huì)為(wèi)你(nǐ)展現的不僅僅是網頁本身的設計(jì)，還(hái)有(yǒu)專業的着陸頁的設計(jì)流程，來(lái)自 Tubik 的設計(jì)師(shī) Ludmila Shevchenko 将會(huì)為(wèi)你(nǐ)展現着陸頁設計(jì)各個(gè)階段的具體(tǐ)操作(zuò)，以及實用的技(jì)巧，希望你(nǐ)會(huì)喜歡。

項目說明(míng)

為(wèi)不同的服務設計(jì)着陸頁頁面。

預處理(lǐ)過程

客戶對于着陸頁的要求很(hěn)明(míng)确，要求設計(jì)獨特，能夠傳達出全新的服務和(hé)遠景。希望整個(gè)着陸頁的設計(jì)能夠讓網站(zhàn)在同類産品中脫穎而出，對于用戶而言，有(yǒu)着顯著的差别。受此啓發，設計(jì)師(shī)針對用戶和(hé)市場(chǎng)進行(xíng)了研究和(hé)探索，設計(jì)師(shī)決定巧用色彩和(hé)形狀作(zuò)為(wèi)設計(jì)的突破口，通(tōng)過尋求不同的組合方式，來(lái)完成整個(gè)設計(jì)。

草稿和(hé)線框圖

整個(gè)工作(zuò)的起點是 UX線框圖。最開(kāi)始，設計(jì)師(shī)構建了幾個(gè)簡單的布局，每種布局都有(yǒu)着不同的側重點和(hé)優勢。我們将不同的構思和(hé)不同的部分構建成為(wèi)獨立的頁面，通(tōng)過分析和(hé)研究用戶的注意力會(huì)集中在哪些(xiē)信息上(shàng)。Ludmila 提到，由于整體(tǐ)結構并不包含很(hěn)多(duō)元素，繪制(zhì)草圖也不會(huì)太麻煩。将腦(nǎo)中構思借由手繪的方法來(lái)呈現，可(kě)以幫助設計(jì)師(shī)更好地琢磨和(hé)探索整個(gè)設計(jì)。

在紙上(shàng)繪制(zhì)草稿是一個(gè)不斷繪制(zhì)不斷思考又不斷修改和(hé)探索的過程，最終成型的設計(jì)方案會(huì)使用 Sketch 繪制(zhì)成 UX線框圖。基于任務需求，無論是手繪草稿的探索過程，還(hái)是基于不同需求而繪制(zhì)的線框圖，都可(kě)以向客戶展示。

UI設計(jì)

接下來(lái)是比較關鍵的 UI設計(jì)的過程了。由于頁面的第一部分，也就是首屏，隻包含有(yǒu)公司的名稱、Slogan 和(hé)引導用戶向下滾動浏覽的箭頭，所以我們認為(wèi)這個(gè)部分需要創造出一個(gè)色彩明(míng)亮、引人(rén)矚目的背景。設計(jì)師(shī)開(kāi)始試圖将不同的抽象元素排列組合起來(lái)，并且做(zuò)好讓這些(xiē)元素動畫(huà)化的準備。第一個(gè)變體(tǐ)是基于菱形元素和(hé)矩形元素來(lái)構建，這些(xiē)幾何圖形邊緣等距，加入漸變色彩，營造出豐富的層次感。不過，在探索過程中，設計(jì)師(shī)發現可(kě)能柔和(hé)的曲線元素會(huì)更加友(yǒu)好，一方面是視(shì)覺上(shàng)得(de)以友(yǒu)好度更高(gāo)，另一方面是它的寓意會(huì)更貼合産品。加入動效之後，整個(gè)頁面會(huì)顯得(de)更加生(shēng)動。

色彩的選取一直都是整個(gè)設計(jì)中最有(yǒu)趣的部分。由于是要創造出生(shēng)動而又具有(yǒu)視(shì)覺吸引力的設計(jì)，設計(jì)師(shī)開(kāi)始尋找漸變色的配色方案。想要專門(mén)強調特定的色彩并不容易，因為(wèi)漸變色通(tōng)常是多(duō)種色彩共同構成的，在具體(tǐ)的順序和(hé)搭配上(shàng)有(yǒu)着多(duō)種變化，需要持續地嘗試和(hé)探索。總體(tǐ)上(shàng)而言，設計(jì)師(shī)是通(tōng)過品牌和(hé)需求而确定了基礎的四種不同配色方案，再在其中挑選出對比度和(hé)協調度都比較高(gāo)的組合。最終，她所選取出變化比較平穩的漸變配色，将公司的名稱和(hé) Slogan 置于漸變色塊的中間(jiān)位置，控制(zhì)對比度确保可(kě)讀性。

通(tōng)過之前的探索，确定使用曲線波紋來(lái)構建背景圖形。在這樣的項目當中，通(tōng)過色彩來(lái)主導設計(jì)是一件很(hěn)有(yǒu)趣的事情，同樣也是極具挑戰性的任務。至于這個(gè)流程，按照 Ludmila 的說法，她是在單獨的頁面上(shàng)進行(xíng)漸變色彩的組合，仔細調整漸變色的過渡。她将注意力集中在色彩本身的選取上(shàng)，确保整體(tǐ)的配色是幹淨且富有(yǒu)活力的。

随後，将這些(xiē)曲線波紋應用到每一屏，盡量确保一緻性和(hé)完整性。之後，為(wèi)每一屏添加必須的 UI 元素。其中，CTA按鈕的色彩需要契合漸變色的位置和(hé)特點，背景圖片元素則不用完全展示，借助半透明(míng)漸變陰影(yǐng)來(lái)營造過渡效果，凸顯 CTA按鈕。

最後，添加動畫(huà)效果，讓各種元素之間(jiān)的互動和(hé)聯系更加自然。這個(gè)環節需要團隊中其他的設計(jì)師(shī)加入進來(lái)，并且協同合作(zuò)，完成整個(gè)設計(jì)。

在背景圖形上(shàng)，設計(jì)師(shī)嘗試了許多(duō)不同的色彩搭配方式，在這個(gè)階段，她嘗試了調整色彩、漸變的程度以及不透明(míng)度。在這個(gè)過程中，控制(zhì)布局中的對比度是至關重要的任務。

在創建背景的曲線的時(shí)候，建議盡量少(shǎo)地使用定位點，同時(shí)控制(zhì)好曲線的平滑度。

至于在控制(zhì)漸變色彩的時(shí)候，設計(jì)師(shī)特别注意到了冷熱色調的結合，從最終的結果來(lái)看，整體(tǐ)上(shàng)保持了暖色調，營造出明(míng)亮和(hé)輕快的氛圍，漸變的色彩主要采用了紅橙黃、紫紅粉和(hé)青藍(lán)漸變。此外，在每一塊色彩的邊緣都需要專門(mén)注意，避免過于強烈的對比，保持整體(tǐ)的微妙感。

廈門(mén)網站(zhàn)建設，網站(zhàn)優化，福建谷歌(gē)推廣，小(xiǎo)程序開(kāi)發，企業郵箱，微信推廣