項目說(shuō)明

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

預處理過(guò)程

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

草稿和線(xiàn)框圖

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

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

UI設計

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

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

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

總體上而言，設計師是通過(guò)品牌和需求而確定了基礎的四種不同配色方案，再在其中挑選出對比度和協(xié)調度都比較高的組合。最終，她所選取出變化比較平穩的漸變配色，將公司的名稱(chēng)和 Slogan 置于漸變色塊的中間位置，控制對比度確保可讀性。

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

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

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

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

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

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

更多設計技巧

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

  
  

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

  
  

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

  
  

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

http://ezekroy.com/wangzhansheji/3351.html 干貨：第一眼很關(guān)鍵！網(wǎng)頁(yè)設計如何吸引眼球！