干貨：第一眼很關(guān)鍵！網(wǎng)頁設(shè)計如何吸引眼球！

項目說明

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

預(yù)處理過程

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

草稿和線框圖

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

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

UI設(shè)計

接下來是比較關(guān)鍵的 UI設(shè)計的過程了。由于頁面的第一部分，也就是首屏，只包含有公司的名稱、Slogan 和引導(dǎo)用戶向下滾動瀏覽的箭頭，所以我們認(rèn)為這個部分需要創(chuàng)造出一個色彩明亮、引人矚目的背景。設(shè)計師開始試圖將不同的抽象元素排列組合起來，并且做好讓這些元素動畫化的準(zhǔn)備。

第一個變體是基于菱形元素和矩形元素來構(gòu)建，這些幾何圖形邊緣等距，加入漸變色彩，營造出豐富的層次感。不過，在探索過程中，設(shè)計師發(fā)現(xiàn)可能柔和的曲線元素會更加友好，一方面是視覺上得以友好度更高，另一方面是它的寓意會更貼合產(chǎn)品。加入動效之后，整個頁面會顯得更加生動。

色彩的選取一直都是整個設(shè)計中最有趣的部分。由于是要創(chuàng)造出生動而又具有視覺吸引力的設(shè)計，設(shè)計師開始尋找漸變色的配色方案。想要專門強(qiáng)調(diào)特定的色彩并不容易，因為漸變色通常是多種色彩共同構(gòu)成的，在具體的順序和搭配上有著多種變化，需要持續(xù)地嘗試和探索。

總體上而言，設(shè)計師是通過品牌和需求而確定了基礎(chǔ)的四種不同配色方案，再在其中挑選出對比度和協(xié)調(diào)度都比較高的組合。最終，她所選取出變化比較平穩(wěn)的漸變配色，將公司的名稱和 Slogan 置于漸變色塊的中間位置，控制對比度確?？勺x性。

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

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

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

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

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

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

更多設(shè)計技巧

首先，需要培養(yǎng)自己的品味，注意各個領(lǐng)域的設(shè)計實例，而不限于移動端UI、網(wǎng)頁和企業(yè)品牌設(shè)計，還要從平面設(shè)計、建筑、攝影和藝術(shù)等多領(lǐng)域獲得靈感。通過廣泛的涉獵，會讓你知道現(xiàn)如今整個大趨勢是怎樣的，什么樣的設(shè)計更加時尚，更加貼合主流。

在工作之余一定要自己多做一些項目，這些小項目可以是創(chuàng)建概念設(shè)計，也可以是解決一些當(dāng)前的問題。

總有一些技能能夠提升，有些技能可以打磨，比如排版，比如構(gòu)圖，有意識地在工作中提升和鉆研這些技能。

想推薦一本非常不錯的配色書《Interaction of Color》，作者是 Josef albers，書中講述了許多關(guān)于色彩的研究、原理以及創(chuàng)建色彩的技巧。

新聞名稱：干貨：第一眼很關(guān)鍵！網(wǎng)頁設(shè)計如何吸引眼球！
轉(zhuǎn)載來源：http://bm7419.com/news/121403.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、企業(yè)建站、網(wǎng)站設(shè)計公司、軟件開發(fā)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站維護(hù)

廣告

聲明：本網(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)