什麼(me)樣(yàng)的網頁設計能(néng)更好(hǎo)的吸引用戶呢？
對(duì)于網頁浏覽者而言，趣味性的網站和清晰直觀是同樣(yàng)重要的屬性。今天的設計實戰，將(jiāng)會爲你展現的不僅僅是網頁本身的設計，還(hái)有專業的著(zhe)陸頁的設計流程，來自 Tubik 的設計師 Ludmila Shevchenko 將(jiāng)會爲你展現著(zhe)陸頁設計各個階段的具體操作，以及實用的技巧，希望你會喜歡。
項目說明
爲不同的服務設計著(zhe)陸頁頁面(miàn)。
預處理過(guò)程
客戶對(duì)于著(zhe)陸頁的要求很明确，要求設計獨特，能(néng)夠傳達出全新的服務和遠景。希望整個著(zhe)陸頁的設計能(néng)夠讓網站在同類産品中脫穎而出，對(duì)于用戶而言，有著(zhe)顯著的差别。受此啓發(fā)，設計師針對(duì)用戶和市場進(jìn)行了研究和探索，設計師決定巧用色彩和形狀作爲設計的突破口，通過(guò)尋求不同的組合方式，來完成(chéng)整個設計。
草稿和線框圖
整個工作的起(qǐ)點是 UX線框圖。最開(kāi)始，設計師構建了幾個簡單的布局，每種(zhǒng)布局都(dōu)有著(zhe)不同的側重點和優勢。我們將(jiāng)不同的構思和不同的部分構建成(chéng)爲獨立的頁面(miàn)，通過(guò)分析和研究用戶的注意力會集中在哪些信息上。Ludmila 提到，由于整體結構并不包含很多元素，繪制草圖也不會太麻煩。將(jiāng)腦中構思借由手繪的方法來呈現，可以幫助設計師更好(hǎo)地琢磨和探索整個設計。
在紙上繪制草稿是一個不斷繪制不斷思考又不斷修改和探索的過(guò)程，最終成(chéng)型的設計方案會使用 Sketch 繪制成(chéng) UX線框圖。基于任務需求，無論是手繪草稿的探索過(guò)程，還(hái)是基于不同需求而繪制的線框圖，都(dōu)可以向(xiàng)客戶展示。
UI設計
接下來是比較關鍵的 UI設計的過(guò)程了。由于頁面(miàn)的第一部分，也就是首屏，隻包含有公司的名稱、Slogan 和引導用戶向(xiàng)下滾動浏覽的箭頭，所以我們認爲這(zhè)個部分需要創造出一個色彩明亮、引人矚目的背景。設計師開(kāi)始試圖將(jiāng)不同的抽象元素排列組合起(qǐ)來，并且做好(hǎo)讓這(zhè)些元素動畫化的準備。第一個變體是基于菱形元素和矩形元素來構建，這(zhè)些幾何圖形邊緣等距，加入漸變色彩，營造出豐富的層次感。不過(guò)，在探索過(guò)程中，設計師發(fā)現可能(néng)柔和的曲線元素會更加友好(hǎo)，一方面(miàn)是視覺上得以友好(hǎo)度更高，另一方面(miàn)是它的寓意會更貼合産品。加入動效之後(hòu)，整個頁面(miàn)會顯得更加生動。
色彩的選取一直都(dōu)是整個設計中最有趣的部分。由于是要創造出生動而又具有視覺吸引力的設計，設計師開(kāi)始尋找漸變色的配色方案。想要專門強調特定的色彩并不容易，因爲漸變色通常是多種(zhǒng)色彩共同構成(chéng)的，在具體的順序和搭配上有著(zhe)多種(zhǒng)變化，需要持續地嘗試和探索。總體上而言，設計師是通過(guò)品牌和需求而确定了基礎的四種(zhǒng)不同配色方案，再在其中挑選出對(duì)比度和協調度都(dōu)比較高的組合。最終，她所選取出變化比較平穩的漸變配色，將(jiāng)公司的名稱和 Slogan 置于漸變色塊的中間位置，控制對(duì)比度确保可讀性。
通過(guò)之前的探索，确定使用曲線波紋來構建背景圖形。在這(zhè)樣(yàng)的項目當中，通過(guò)色彩來主導設計是一件很有趣的事(shì)情，同樣(yàng)也是極具挑戰性的任務。至于這(zhè)個流程，按照 Ludmila 的說法，她是在單獨的頁面(miàn)上進(jìn)行漸變色彩的組合，仔細調整漸變色的過(guò)渡。她將(jiāng)注意力集中在色彩本身的選取上，确保整體的配色是幹淨且富有活力的。
随後(hòu)，將(jiāng)這(zhè)些曲線波紋應用到每一屏，盡量确保一緻性和完整性。之後(hòu)，爲每一屏添加必須的 UI 元素。其中，CTA按鈕的色彩需要契合漸變色的位置和特點，背景圖片元素則不用完全展示，借助半透明漸變陰影來營造過(guò)渡效果，凸顯 CTA按鈕。
最後(hòu)，添加動畫效果，讓各種(zhǒng)元素之間的互動和聯系更加自然。這(zhè)個環節需要團隊中其他的設計師加入進(jìn)來，并且協同合作，完成(chéng)整個設計。
在背景圖形上，設計師嘗試了許多不同的色彩搭配方式，在這(zhè)個階段，她嘗試了調整色彩、漸變的程度以及不透明度。在這(zhè)個過(guò)程中，控制布局中的對(duì)比度是至關重要的任務。
在創建背景的曲線的時候，建議盡量少地使用定位點，同時控制好(hǎo)曲線的平滑度。
至于在控制漸變色彩的時候，設計師特别注意到了冷熱色調的結合，從最終的結果來看，整體上保持了暖色調，營造出明亮和輕快的氛圍，漸變的色彩主要采用了紅橙黃、紫紅粉和青藍漸變。此外，在每一塊色彩的邊緣都(dōu)需要專門注意，避免過(guò)于強烈的對(duì)比，保持整體的微妙感。
