網(wǎng)頁設(shè)計：【干貨】9種方式，讓你的網(wǎng)頁脫穎而出

在這個時刻上網(wǎng)的時代，如何用網(wǎng)頁來吸引流量成為了各大公司頭疼的問題。一個設(shè)計感十足的網(wǎng)頁，往往更容易讓人駐足。但怎樣的網(wǎng)頁才能更加吸引人呢？讓我們一起來看看。

形體和色彩，到底哪個在設(shè)計中更加富有表現(xiàn)力？這個問題可能沒有一個固定答案，這場在戰(zhàn)爭在設(shè)計領(lǐng)域當中已經(jīng)持續(xù)多年，甚至?xí)恢背掷m(xù)下去。這個設(shè)計項目是為一個室內(nèi)設(shè)計工作室來設(shè)計官方網(wǎng)站，他們的主要業(yè)務(wù)是制作可視化的室內(nèi)設(shè)計渲染圖。他們熟知如何最大限度地借助設(shè)計工具來呈現(xiàn)室內(nèi)設(shè)計的效果，在接到需求之后，我們決定使用全屏背景結(jié)合他們最擅長的3D建模，來展現(xiàn)高質(zhì)量的室內(nèi)設(shè)計能力和建模渲染效果。

富有層次感的排版布局，讓前后景的內(nèi)容各司其職，關(guān)鍵的內(nèi)容塊也可以很輕松地被掃視。每個區(qū)塊都有著醒目的標題，能夠告知用戶內(nèi)容的屬性。頁面頂部的導(dǎo)航中呈現(xiàn)了品牌的LOGO，頁面中相關(guān)社交媒體鏈接也非常清晰醒目。在這個色彩豐富的頁面中，關(guān)鍵的CTA按鈕是需要借助對比色來凸顯，將用戶導(dǎo)向特定的功能和頁面。

數(shù)字建模所帶來的好處是更加沉浸式的場景，和更加易于處理的數(shù)字素材，這樣一來，設(shè)計師也更容易處理，加入更加有效的動畫效果。在這個案例當中，動效設(shè)計師讓用戶在滾動的過程中，看到條紋式的效果，使得頁面的層次感明顯，也暗示了這個設(shè)計工作室在視覺效果上的強大處理能力。此外，用戶可以借助頁面指示器快速切換頁面，這一點也確保了整個網(wǎng)站在功能上的便捷和完善性。

對于出門旅行，絕大多數(shù)的用戶都抱有著不小的期待。但是旅行本身并不輕松，需要訂購酒店，需要購買機票和車票，租車，購買門票，同時旅行還意味著非常大量的活動。而這次的概念設(shè)計，就是圍繞著預(yù)訂服務(wù)來展開的。同樣使用了3D建模來構(gòu)建視覺，諸多和日常出行相關(guān)的視覺元素占據(jù)了左側(cè)的頁面，而右側(cè)則是預(yù)訂需要填寫的表單內(nèi)容。整個頁面采用了更加富有活力的配色，降低用戶填寫表單時候的緊張情緒，清晰直觀的頁面布局，讓用戶無需四處摸索，可以直接開始交互。從標題到表單的條目都保有良好的對比度，可以快速掃視閱讀，便于用戶填寫。

向下滾動，用戶可以了解這項服務(wù)的相關(guān)優(yōu)勢，特殊的功能，相關(guān)福利，以及更多的信息。每個信息都緊密圍繞著一個主題來予以闡述，視覺化的元素被設(shè)計得非常吸睛，同時，和整體在風(fēng)格調(diào)性上也保持著高度的一致。今年 7 月 26 日，世界電影人都在慶賀著名導(dǎo)演庫布里克誕辰90周年，同樣身為庫布里克粉絲的我們，也為他制作了一個相對優(yōu)雅的作品網(wǎng)站。網(wǎng)站展現(xiàn)了他的榮耀之路，他的生活，以及他是如何進行創(chuàng)作的。整個網(wǎng)站的設(shè)計都是借助視覺化的設(shè)計來驅(qū)動用戶不斷瀏覽，交互不僅在上下左右布局上富有層次，而且在視覺縱深上做文章。作為一個產(chǎn)出過如此之多經(jīng)典作品的導(dǎo)演，我們選取了對比度強烈、經(jīng)典的紅黑白三色來作為整個網(wǎng)站的主要配色，這一點非常符合他獨特的定位和屬性。戳這里查看這個網(wǎng)站。

所有的父母在尋找托兒所和托管機構(gòu)的時候，都希望他們的孩子獲得最好的服務(wù)，找到能夠給予孩子無微不至關(guān)懷的保姆。這個著陸頁的設(shè)計是為名為 Kiddy 這個托兒服務(wù)提供機構(gòu)所設(shè)計的著陸頁。Kiddy 致力于為用戶提供服務(wù)良好的保姆，在這里雇傭保姆絕對稱得上是小菜一碟。

為了讓整個頁面足夠可愛，風(fēng)格獨特有趣的插畫發(fā)揮了極大的作用，搭配性格富有童趣的字體，讓整個頁面足夠視覺化。與此同時，柔和的配色方案之下，文本和背景之間的對比度非常高，用戶只需要掃視就可以輕松讀取內(nèi)容。

我們很多時候會有脫離現(xiàn)實的沖動，還有什么比VR 更具有沉浸式的體驗?zāi)兀窟@個瘋狂的想法催生出了VR虛擬聊天室的概念，更瘋狂的是它還是基于Web平臺來實現(xiàn)。明亮而帶有迷幻特征的配色，引人矚目的3D圖形象征著現(xiàn)代技術(shù)。為了更好地演示，用戶可以直接在第一屏觀看，而無需滾動頁面。主頁提供了相關(guān)虛擬聊天室的介紹和模板鏈接，用戶甚至可以訂閱而定期獲取不同的模板，進行升級。

如今各種設(shè)計工作室甚至家庭制作的各種手工制品正在受到越來越多的追捧，通過這樣的一個C2C平臺，大家可以將自己的手作提交上來銷售，買家借此可以獲得很多獨一無二的商品。在給這個手作市場設(shè)計網(wǎng)頁的時候，主要借助了柵格系統(tǒng)來確保整個頁面布局看起來錯落，但實際非常規(guī)律。優(yōu)雅的布局和配色，在陰影和動效的加持之下，看起來層次豐富，又不顯得混亂，非常引人矚目。

誰說一個提供網(wǎng)站建設(shè)和開發(fā)的企業(yè)，官網(wǎng)就一定是要看起來簡單、中性且無聊的？當然不是！

這個專注于 Ruby on Rails 開發(fā)的公司，就設(shè)計的非常視覺化。通過建模制作出來的寶石是 Ruby on Rails 的代表，這和公司常用的開發(fā)語言有了清晰的關(guān)聯(lián)，首屏底部標識出了公司相關(guān)的社交媒體帳號的鏈接，即使同樣是CTA按鈕，主要的按鈕采用的是強對比的實底，而次要的則選用的是幽靈按鈕。向下滾動的過程中，用戶會在信息圖式的內(nèi)容塊中了解到團隊所采用的技術(shù)，公司的相關(guān)信息，服務(wù)的客戶群，以及聯(lián)系該團隊的快速提交表單。內(nèi)容清晰，疏密有致，目的明確，用戶在這樣的網(wǎng)站中永遠不會感到迷惑。

如何通過UI來呈現(xiàn)出韻律感？這是在給時尚的音樂APP設(shè)計著陸頁的時候，最先想到的問題。設(shè)計師通過明亮而抽象的圖形來構(gòu)建動畫，通過韻律感十足的動畫來呈現(xiàn)獨特的節(jié)奏感和韻律感，從而實現(xiàn)情感和情緒的表達。頁面不需要大量的文本，一個醒目的大標題就夠了，接下來就是將用戶的注意力引導(dǎo)到CTA按鈕上，相反大量的文本會影響用戶的注意力，所以，就有了這個頁面的設(shè)計。

結(jié)語

不同時期都會有不一樣的審美，我們需要做到的就是將知識掌握的更牢固，趨勢一直在變化，跟隨趨勢的時候，需要靈活地根據(jù)需求，進行更為有效的表達，視覺，色彩，情感，所有的因素都需要考慮到，排版布局，色彩，交互，動效，缺一不可。向著清晰的設(shè)計目標前進，服務(wù)于用戶和客戶，兼顧視覺和功能，緊隨趨勢又不盲從，這樣才會創(chuàng)造好的設(shè)計。