首頁 > 網頁教程 > 設計分享 > 9款視覺效果驚艷的網頁設計案例賞析

江苏十一选五开奖结果今天:9款視覺效果驚艷的網頁設計案例賞析

時間:2018-09-30    來源:優設網

江苏十一选五开奖公告 www.ervgn.com 譯者 : 優設網陳子木 

作者 : Tubik Studio 

閱讀本文需 9 分鐘

設計是一個不斷發展和變革的領域,很多時候,看似熟悉的設計趨勢會在下一刻搖身一變,便可再次驚艷到你。靈活的創意和開放的想法,常常能夠使稀松平常的元素搖身一變,化身為驚艷的設計作品。這種點鐵成金的成就感,大概也是許多設計師即使辛苦也會堅持下去的原因所在吧?

今天,我們搜集了幾個Tubik Studio 內的設計師作品,它們是不同業務目標下的產物,這些UI設計作品從配色到動效,無疑都是相當驚艷的。今天,我們透過這些案例,來聊一下優秀的UI視覺設計臺前幕后的事情。

1、凸顯特點:設計工作室的官網設計

形體和色彩,到底哪個在設計中更加富有表現力?這個問題可能沒有一個固定答案,這場在戰爭在設計領域當中已經持續多年,甚至會一直持續下去。這個設計項目是為一個室內設計工作室來設計官方網站,他們的主要業務是制作可視化的室內設計渲染圖。他們熟知如何最大限度地借助設計工具來呈現室內設計的效果,在接到需求之后,我們決定使用全屏背景結合他們最擅長的3D建模,來展現高質量的室內設計能力和建模渲染效果。

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

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

2、強化屬性:訂購服務的網站頁面設計

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

向下滾動,用戶可以了解這項服務的相關優勢,特殊的功能,相關福利,以及更多的信息。每個信息快都緊密圍繞著一個主題來予以闡述,視覺化的元素被設計得非常吸睛,同時,和整體在風格調性上也保持著高度的一致。

3、營造層次:庫布里克的作品網站

今年 7 月 26 日,世界電影人都在慶賀著名導演庫布里克誕辰 90 周年,同樣身為庫布里克粉絲的我們,也為他制作了一個相對優雅的作品網站。網站展現了他的榮耀之路,他的生活,以及他是如何進行創作的。整個網站的設計都是借助視覺化的設計來驅動用戶不斷瀏覽,交互不僅在上下左右布局上富有層次,而且在視覺縱深上做文章。作為一個產出過如此之多經典作品的導演,我們選取了對比度強烈、經典的紅黑白三色來作為整個網站的主要配色,這一點非常符合他獨特的定位和屬性。戳這里查看這個網站。

4、渲染氛圍:托兒服務的著陸頁設計

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

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

整個頁面包含了一個著陸頁應有的所有組件:有過去客戶的推薦內容,新用戶可以和頂級、專業的托管人員直接連線溝通,相關的信息一應俱全。最重要的是,用戶如果想直接雇傭保姆,甚至不需要翻頁,進入頁面就可以直接溝通。

相關推薦
CSS酷站網頁水平條經典設計欣賞
歐美CSS酷站網頁背景設計之光影特效賞析
酷站欣賞之歐美棕色調網站設計案例賞析
如何基于心理學設計的目的來制作受用戶歡迎的網頁
二十款網頁圖文混排設計樣式欣賞
黑色的藝術:三十款暗黑色調的歐美CSS酷站欣賞
35套精美絢麗的創意酷站設計欣賞
網頁設計的文字色彩與可讀性分析
如何掌握網頁廣告字體設計的技巧
40款超個性粗糙紙張紋理風格的CSS酷站欣賞
15款富有創意的的html電子名片設計欣賞
國外49款創意型404錯誤網頁欣賞(附演示網址)
手繪風格的15款超級漂亮網站欣賞
網易頻道頁面的改版過程分享
網頁設計師必備的13款國外CSS酷站參考畫廊
多款韓國絢麗風格的游戲網站界面設計欣賞
網頁設計中的構圖技巧分享
網頁設計的幾何圓之美
網頁交互設計的一些理解
網頁設計中上一頁和下一頁的用戶體驗分析
黃金分割布局在網頁設計中的應用
簡單而又不單調的網頁視覺設計技巧
讓用戶感覺很糟糕的網頁設計之十大原因
淘寶網新年改版之網頁寬度最佳尺寸淺析
圓形元素在網頁設計中如何應用的25個案例
如何學習才能成長為一名更好的設計師?
淘寶案例分析之商城頁面的用戶體驗
85個優秀的超大字體網頁設計欣賞
用實例理解網頁設計的80/20規則
尋找應用服務或程序類網站的設計規律
10個國外網頁設計領域最具影響力的人物
30個出色的網頁設計色彩搭配案例欣賞
10個優秀的網頁設計教程與素材博客
網站專題設計的一些細節經驗分享
21個值得收藏的轉換PSD為HTML的教程
25個精美絕倫的Photoshop網頁設計及詳細教程

精彩推薦

熱門教程