看看專業(yè)的設(shè)計(jì)師是怎樣進(jìn)行著陸頁設(shè)計(jì)的?
發(fā)布時(shí)間:2021-12-17 10:45 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175

對(duì)于著陸頁而言,有趣而吸引人和清晰直觀是同樣重要的屬性。今天的設(shè)計(jì)實(shí)戰(zhàn),將會(huì)為你展現(xiàn)的不僅僅是著陸頁本身的設(shè)計(jì),還有專業(yè)的著陸頁的設(shè)計(jì)流程,

以及實(shí)用的技巧,希望你會(huì)喜歡。

設(shè)計(jì)實(shí)戰(zhàn)!專業(yè)的設(shè)計(jì)師是怎樣進(jìn)行著陸頁設(shè)計(jì)的?


項(xiàng)目說明


為不同的服務(wù)設(shè)計(jì)著陸頁頁面。


預(yù)處理過程


客戶對(duì)于著陸頁的要求很明確,要求設(shè)計(jì)獨(dú)特,能夠傳達(dá)出全新的服務(wù)和愿景。希望整個(gè)著陸頁的設(shè)計(jì)能夠讓網(wǎng)站在同類產(chǎn)品中脫穎而出,對(duì)于用戶而言,有著顯著的差別。受此啟發(fā),設(shè)計(jì)師針對(duì)用戶和市場(chǎng)進(jìn)行了研究和探索,設(shè)計(jì)師決定巧用色彩和形狀作為設(shè)計(jì)的突破口,通過尋求不同的組合方式,來完成整個(gè)設(shè)計(jì)。


草稿和線框圖


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

設(shè)計(jì)實(shí)戰(zhàn)!專業(yè)的設(shè)計(jì)師是怎樣進(jìn)行著陸頁設(shè)計(jì)的?

設(shè)計(jì)實(shí)戰(zhàn)!專業(yè)的設(shè)計(jì)師是怎樣進(jìn)行著陸頁設(shè)計(jì)的?

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

設(shè)計(jì)實(shí)戰(zhàn)!專業(yè)的設(shè)計(jì)師是怎樣進(jìn)行著陸頁設(shè)計(jì)的?


UI設(shè)計(jì)


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

設(shè)計(jì)實(shí)戰(zhàn)!專業(yè)的設(shè)計(jì)師是怎樣進(jìn)行著陸頁設(shè)計(jì)的?

設(shè)計(jì)實(shí)戰(zhàn)!專業(yè)的設(shè)計(jì)師是怎樣進(jìn)行著陸頁設(shè)計(jì)的?

色彩的選取一直都是整個(gè)設(shè)計(jì)中最有趣的部分。由于是要?jiǎng)?chuàng)造出生動(dòng)而又具有視覺吸引力的設(shè)計(jì),設(shè)計(jì)師開始尋找漸變色的配色方案。想要專門強(qiáng)調(diào)特定的色彩并不容易,因?yàn)闈u變色通常是多種色彩共同構(gòu)成的,在具體的順序和搭配上有著多種變化,需要持續(xù)地嘗試和探索?傮w上而言,設(shè)計(jì)師是通過品牌和需求而確定了基礎(chǔ)的四種不同配色方案,再在其中挑選出對(duì)比度和協(xié)調(diào)度都比較高的組合。最終,她所選取出變化比較平穩(wěn)的漸變配色,將公司的名稱和 Slogan 置于漸變色塊的中間位置,控制對(duì)比度確?勺x性。

通過之前的探索,確定使用曲線波紋來構(gòu)建背景圖形。在這樣的項(xiàng)目當(dāng)中,通過色彩來主導(dǎo)設(shè)計(jì)是一件很有趣的事情,同樣也是極具挑戰(zhàn)性的任務(wù)。至于這個(gè)流程,按照 Ludmila 的說法,她是在單獨(dú)的頁面上進(jìn)行漸變色彩的組合,仔細(xì)調(diào)整漸變色的過渡。她將注意力集中在色彩本身的選取上,確保整體的配色是干凈且富有活力的。

設(shè)計(jì)實(shí)戰(zhàn)!專業(yè)的設(shè)計(jì)師是怎樣進(jìn)行著陸頁設(shè)計(jì)的?

隨后,將這些曲線波紋應(yīng)用到每一屏,盡量確保一致性和完整性。之后,為每一屏添加必須的 UI 元素。其中,CTA按鈕的色彩需要契合漸變色的位置和特點(diǎn),背景圖片元素則不用完全展示,借助半透明漸變陰影來營(yíng)造過渡效果,凸顯 CTA按鈕。

設(shè)計(jì)實(shí)戰(zhàn)!專業(yè)的設(shè)計(jì)師是怎樣進(jìn)行著陸頁設(shè)計(jì)的?

最后,添加動(dòng)畫效果,讓各種元素之間的互動(dòng)和聯(lián)系更加自然。這個(gè)環(huán)節(jié)需要團(tuán)隊(duì)中其他的設(shè)計(jì)師加入進(jìn)來,并且協(xié)同合作,完成整個(gè)設(shè)計(jì)。

設(shè)計(jì)實(shí)戰(zhàn)!專業(yè)的設(shè)計(jì)師是怎樣進(jìn)行著陸頁設(shè)計(jì)的?

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

在創(chuàng)建背景的曲線的時(shí)候,建議盡量少地使用定位點(diǎn),同時(shí)控制好曲線的平滑度。

設(shè)計(jì)實(shí)戰(zhàn)!專業(yè)的設(shè)計(jì)師是怎樣進(jìn)行著陸頁設(shè)計(jì)的?

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

設(shè)計(jì)實(shí)戰(zhàn)!專業(yè)的設(shè)計(jì)師是怎樣進(jìn)行著陸頁設(shè)計(jì)的?


零基礎(chǔ)教你做UI
我要自學(xué)網(wǎng)商城 ¥50 元
進(jìn)入購(gòu)買
文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國(guó)的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫 程序開發(fā) 網(wǎng)頁設(shè)計(jì) 會(huì)計(jì)課程 興趣成長(zhǎng) AIGC