驚艷的網(wǎng)頁(yè)設(shè)計(jì),讓你的網(wǎng)站迎在起跑線

2013-07-26    分類(lèi): 網(wǎng)站建設(shè)

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

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


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


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


3、強(qiáng)化屬性

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

4、渲染氛圍

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

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

5、營(yíng)造層次


今年 7 月 26 日,世界電影人都在慶賀著名導(dǎo)演庫(kù)布里克誕辰 90 周年,同樣身為庫(kù)布里克粉絲的我們,也為他制作了一個(gè)相對(duì)優(yōu)雅的作品網(wǎng)站。網(wǎng)站展現(xiàn)了他的榮耀之路,他的生活,以及他是如何進(jìn)行創(chuàng)作的。整個(gè)網(wǎng)站的設(shè)計(jì)都是借助視覺(jué)化的設(shè)計(jì)來(lái)驅(qū)動(dòng)用戶(hù)不斷瀏覽,交互不僅在上下左右布局上富有層次,而且在視覺(jué)縱深上做文章。作為一個(gè)產(chǎn)出過(guò)如此之多經(jīng)典作品的導(dǎo)演,我們選取了對(duì)比度強(qiáng)烈、經(jīng)典的紅黑白三色來(lái)作為整個(gè)網(wǎng)站的主要配色,這一點(diǎn)非常符合他獨(dú)特的定位和屬性。戳這里查看這個(gè)網(wǎng)站。


文章題目:驚艷的網(wǎng)頁(yè)設(shè)計(jì),讓你的網(wǎng)站迎在起跑線
文章來(lái)源:http://www.bm7419.com/news/13604.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App設(shè)計(jì)、網(wǎng)站改版自適應(yīng)網(wǎng)站、手機(jī)網(wǎng)站建設(shè)營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、微信小程序

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)

網(wǎng)站建設(shè)知識(shí)