40個網(wǎng)頁設(shè)計優(yōu)秀案例
40個網(wǎng)頁設(shè)計優(yōu)秀案例
關(guān)于我們的頁面設(shè)計并不難,但是要設(shè)計一個完美的版本并不容易。它通常取決于你的出發(fā)點,是要個性化的設(shè)計,還是品牌化的運作?是提供自己聯(lián)系方式,還是獲取用戶的聯(lián)系方式?下面的優(yōu)秀案例會告訴你,優(yōu)秀的關(guān)于我們頁面要如何設(shè)計。
1、友好的界面
友好的聯(lián)系人界面總會讓人感到親切的,如果它還具備一些功能性,并且易于閱讀,用戶會感覺更加舒適的!癢hat can we help you with”則可以引導(dǎo)用戶去點擊“加入我們”“聘用我們”以及參與郵件訂閱。
2、展示全球各地辦公室
Tool 的關(guān)于我們頁面中,設(shè)計師用醒目的字體標注出團隊在洛杉磯、紐約和法國的辦公室的地址和聯(lián)系方式,點開關(guān)于我們頁面的用戶不就是想知道這些信息么?正確的聯(lián)系方式,簡單直接的設(shè)計,就是這么做的。
3、簡化溝通流程
Productiong Location的聯(lián)系我們頁面同樣采用了大膽而視覺化的頁面設(shè)計,但是和其他的同類頁面不同的是,它簡化了溝通流程,把用戶可能會關(guān)注的內(nèi)容和需要溝通的具體部分都劃分了一下,讓不同需求的用戶直接被引導(dǎo)到特定的頁面和部分,從而達成簡化和分流的目的。
4、頭像和個性化的信息
放上設(shè)計師和團隊成員的圖片,讓用戶認識你。最關(guān)鍵的并不是你的頭像夠不夠漂亮,而是要讓用戶知道這個漂亮的網(wǎng)站背后是一位和你我一樣真實而平凡的設(shè)計師,是他或者她努力設(shè)計之后的成果。頭像可以讓頁面更加個性化,也能讓它更加真實而親近。
5、鼓勵用戶溝通
關(guān)于我們頁面的核心設(shè)計目的通常是溝通,而Hello Innovation 的頁面設(shè)計則充分貫徹這一思路:試圖鼓勵用戶主動同網(wǎng)站進行溝通。用親切而富有親和力的設(shè)計,留下聯(lián)系方式,從文案到留下郵箱的地址都在鼓勵用戶。聊一句,能有多難呢?
6、用圖片來傳遞隱喻
設(shè)計博物館中收藏了許多設(shè)計相關(guān)的藏品,而關(guān)于我們頁面中的這個電話不僅是網(wǎng)站的藏品,而且作為一個重要的隱喻來向用戶傳遞“溝通”的意象,這也算得上是一種設(shè)計上的“雙關(guān)”了。
7、創(chuàng)造令人難忘的設(shè)計
古怪的設(shè)計和有趣的文案總能讓人難忘,每天海量的信息攝入讓人們只會記住最突出的那些。不過,古怪的設(shè)計不一定適合任何品牌任何網(wǎng)站,但是對于那些古靈精怪的網(wǎng)站而言,那些獨樹一幟的腦洞總能起到作用。
8、表現(xiàn)品牌的性格
對于網(wǎng)站而言,在關(guān)于我們頁面中將自家的品牌性格呈現(xiàn)出來自然是合理合適的。Boone Selections 就是這樣優(yōu)雅又專業(yè)地將品牌配色和相關(guān)設(shè)計元素融入關(guān)于我們頁面的。作為一個專業(yè)的葡萄酒進口公司,Boone Selections 的關(guān)于我們頁面用獨特的排版和滾動式的頁面設(shè)計,營造出獨有的品牌氣息。
9、展示聯(lián)絡(luò)方式
This Also 的關(guān)于我們頁面設(shè)計可謂是可靠而到位了,頁面地圖標注出了公司地點也就算了,當你向下滾動頁面的時候,還能看到詳細地址的說明、沿線地鐵的乘坐方式、溝通的電子郵件地址、電話,等等等等,不一而足。
10、給個提示
網(wǎng)站 Deux Huit Huit 的關(guān)于我們頁面并沒有提供傳統(tǒng)意義上的溝通方式,而是設(shè)計成了一個直觀而簡單的對話框。頂上“Say hello ”的對話框非常直接地提示用戶,只要輸入內(nèi)容,網(wǎng)站的開發(fā)者就能看到了。
11、標明開門/工作時間
對于諸如餐廳、博物館、商店等有具體營業(yè)時間的機構(gòu)的官方網(wǎng)站,在關(guān)于我們頁面當中標注店鋪開門的時間、接受電話咨詢的時間,可以讓用戶更加有效地接受服務(wù)。
12、使用醒目的字體
Panache 的關(guān)于我們頁面中標題字體采用了非常醒目的“Travaillons Ensemble”,這種字體更為輕巧,雖然獨特但是具有極高的識別度。
13、使用大膽的配色方案
經(jīng)典的黑白黃的配色方案被運用到Sponge 的關(guān)于我們頁面當中,這種強對比的配色結(jié)合細致的細節(jié)刻畫,讓整個頁面看起來銳利又富有質(zhì)感。設(shè)計師將明亮的色彩運用到最關(guān)鍵的信息上,讓用戶更容易注意到它們。
14、采用形象化的插畫
插畫總能以更加視覺化的方式來吸引用戶的注意力,尤其是當插畫足夠風(fēng)格化、個性化的時候。Legwork Studio 的關(guān)于我們頁面中,加入了狼頭人插畫,配合手寫字體,營造出了一種個性化的氛圍。
15、使用簡約的圖形
Giampiero Bodini 的關(guān)于我們頁面并沒有使用復(fù)雜的設(shè)計技巧,而是在素描的繁復(fù)背景上,放上一個簡單的矩形,將聯(lián)系方式與相關(guān)信息置于其中。繁復(fù)和簡單,手繪和圖形,形成了鮮明的對比。
16、借助表單來溝通
溝通是相互,你可以發(fā)信息給網(wǎng)站,也可以留下聯(lián)系方式,讓網(wǎng)站的運營者給你發(fā)信息。QED Group 直接在聯(lián)系我們頁面中留下一個表單,你可以通過這個表單留下聯(lián)系方式。
17、使用單色配色
簡單優(yōu)雅和易讀是 Joseph A Avoue 的網(wǎng)站聯(lián)系我們頁面的設(shè)計風(fēng)格,沒有華麗的設(shè)計,也沒有花哨的功能,一個纖細的環(huán),中間是最基本的聯(lián)系信息,就是這么直接。
18、幽默
幽默的設(shè)計師不會放過任何一個搞怪的機會,Bio-Bak 的設(shè)計師即使是在聯(lián)系我們頁面當中也會嘩眾取寵一把。涂鴉字體和俏皮的文案讓人忍俊不禁,你能夠從每一個細節(jié)感受到這個設(shè)計師的幽默細胞。
19、填寫表單
Anakin 的關(guān)于我們頁面同樣是讓用戶填寫聯(lián)系信息,不過在表單的設(shè)計上更加獨特,并沒有專門的表單,而是使用占位符提示用戶各個位置需要填寫的內(nèi)容,貼心、直覺,也非常走心。
20、個性化的辦公地點展示
和第二個案例類似,CPB集團在全球各地都有辦公室,但是在設(shè)計的樣式上也更加獨特,各地辦公室的內(nèi)容和個性化的背景融為一體,信息得到了整合,展現(xiàn)方式也個性十足。
21、介紹一下業(yè)務(wù)
在關(guān)于我們頁面當中介紹自己并不稀奇,不過除此之外可以做的還有很多,比如介紹一下自家的業(yè)務(wù),展示一下自家的品牌,吸引用戶來聊聊也是很不錯的手段。Hello Monday 的關(guān)于我們頁面就是這么做的。
22、視頻背景
在網(wǎng)站里面添加視頻背景已經(jīng)是一種非常流行的手段了,而作為電影制作工作室而存在的Moodboard 在關(guān)于我們頁面中使用視頻背景不僅符合他們團隊的工作性質(zhì),而且讓整個關(guān)于我們頁面更加鮮活了。
23、使用柵格布局
要設(shè)計結(jié)構(gòu)化的頁面,柵格總是你最好的朋友。Urban Influence 的關(guān)于我們頁面使用柵格來組織整個頁面的信息,需要展示的內(nèi)容,讓用戶輸入的部分,裝飾性的部分和展示用的地圖,都界限分明地分布在頁面上。
24、讓界面更加友好
如果讓界面更加友好,設(shè)計師要做的工作并不少。清晰而易讀的界面設(shè)計是最基本的,信息要能夠清晰的傳遞出來,沒有侵略性的配色,讓人感到熟悉、親切的呈現(xiàn)方式,易于操作的交互方式,這都是設(shè)計師要做好的地方。
25、分步引導(dǎo)
取得聯(lián)系包含著一系列的操作,如果將整個交互過程分割成為若干步驟,一步一步引導(dǎo)用戶來操作,加入動效和微交互,這絕對是一種不一樣的'體驗。
26、增加聯(lián)系人快捷方式
團隊中負責(zé)不同部分的負責(zé)人通常不一樣,用戶打開聯(lián)系我們頁面通常有著明確的目標,如何將FAQ部分加入其中,并且添加特定的聯(lián)系人的聯(lián)系方式,讓用戶可以更加直接地同不同的負責(zé)人進行溝通。
27、同網(wǎng)站其他部分整合到一起
Robby Leonardi 的網(wǎng)站似乎被設(shè)計成一個扁平風(fēng)的電腦游戲,當你瀏覽頁面的時候,會隨著主角去不同的頁面,做不同的事情,而去關(guān)于我們頁面也是其中的一個“場景”。這是一種整合頁面的方式,值得學(xué)習(xí)。
28、團隊合影
許多網(wǎng)站背后都是一整個開發(fā)和設(shè)計團隊在運作,用團隊成員合影作為關(guān)于我們頁面的背景圖也是非常合理且有個性的做法。
29、使用留白
通常留白能強化整個頁面的空間感和結(jié)構(gòu)感,而Beta Tataki 在關(guān)于我們頁面就放置了一個設(shè)計感十足了電話,通過留白強化了聯(lián)系方式等內(nèi)容的存在感。
30、活用字體排版
精心設(shè)計的字體排版不僅具有裝飾性,還可以承載一定的內(nèi)容。Pauline Osmont 的聯(lián)系我們頁面使用了黑色、銀色和金色來構(gòu)建吸引人的字體排版主視覺設(shè)計。當你向下滾動頁面的時候,能看到易于閱讀排版到位的表單。
31、親手展示
這也是近幾年比較常見的一種內(nèi)容展現(xiàn)方式,設(shè)計師親手舉起展板來展示設(shè)計作品。如果用在聯(lián)系我們頁面中,這種設(shè)計師手法也是相當?shù)膽?yīng)景呢。就像Mark Jaworkski 的這個頁面,設(shè)計師的技能、介紹還有留言用的表單都整齊地展示在這塊被平舉的白板上。
32、列舉社交媒體聯(lián)系方式
現(xiàn)在哪個網(wǎng)站沒幾個社交媒體帳號呢?在關(guān)于我們的頁面當中將自家網(wǎng)站的各個社交媒體的鏈接都貼出來,對于許多用戶來說反而更加便于聯(lián)系。
33、借用傳統(tǒng)的溝通方式
復(fù)古的樣式是不錯的選擇,但是使用傳統(tǒng)的聯(lián)系方式來設(shè)計,似乎更加走心也更有意思。Lionway 的聯(lián)系我們頁面就設(shè)計成了明信片的形式,還有一些固定的信息干脆就列舉在一個打印賬單上。
34、俏皮的文案
文案的設(shè)計也是聯(lián)系我們頁面中重要的部分,親切、幽默的文案設(shè)計會讓用戶感到親近,但是同樣的,俏皮的、機智的文案也一樣會讓用戶難忘。
35、展現(xiàn)個性
設(shè)計工作室 Resn 的聯(lián)系我們頁面設(shè)計絕對是這組案例中最有個性的頁面之一,充滿80年代風(fēng)情的設(shè)計元素,和帶著動物頭套的團隊成員圖片組成了頁面的主體。
36、運用信息圖
信息圖是近幾年一直處于上升階段的設(shè)計手法,如果有合適的展示內(nèi)容,在關(guān)于我們頁面中使用信息圖也是相當不錯的選擇。Quicksprout 的關(guān)于我們頁面就使用了信息圖來呈現(xiàn)內(nèi)容,清晰易讀,而且準確到位。
37、動畫和卡通
在聯(lián)系我們頁面中使用卡通和動漫式的形象來呈現(xiàn)設(shè)計師和設(shè)計團隊是相當常見也相當有效的手段,Melonfree 的關(guān)于我們頁面就將設(shè)計師和開發(fā)者的卡通形象擺了出來。
38、使用半透明的圖形
人的眼睛總會有意識地去識別想要石碑的內(nèi)容,所以即使的半透明的元素加載在一起,也不會特別嚴重地影響閱讀體驗。Indofolio 的頁面設(shè)就充分運用半透明的元素,將核心的聯(lián)系方式放在半透明的矩形上,透過圖形用戶依然能看到背景的細節(jié),但是又不會看不清關(guān)鍵的聯(lián)系方式。
39、手繪效果
手繪的聯(lián)系我們頁面,尤其是那些畫的還相當養(yǎng)眼的頁面,總能讓用戶感受到設(shè)計者的貼心。Mario Petrone 的這個頁面設(shè)計就相當?shù)那纹び腥ぁ?/p>
40、僅用一個下拉框
Spokes Pedicabs 的聯(lián)系我們頁面其實談不上一個完整的頁面,而用一個下拉框代替,當你點擊導(dǎo)航了中的鏈接,會出現(xiàn)這個醒目的橙色下拉框。
網(wǎng)頁設(shè)計色系案例分析
橙色又稱之為橙黃或者是橘色,它的穿透力僅次于紅色,色感較紅色更暖。在網(wǎng)頁設(shè)計中橙色是十分活潑的色彩,給人以華貴而溫暖、興奮而熱烈、歡樂與活力的感覺,也是令人振奮的顏色。
橙色在網(wǎng)頁中的使用范圍非常廣泛,可以通過變換色調(diào)營造出不同分氣氛,不僅僅能表現(xiàn)出青春活力,也能達到一個穩(wěn)重的效果。橙色的波長居于紅和黃之間,具有健康、富有活力、勇敢自由等象征意義,為了讓大家對橙色有更好的理解,下面分別對不同類型網(wǎng)頁進行分析。
一.食品飲食類網(wǎng)頁設(shè)計案例分析
推薦案例:橙色+黃色+深橙色
整個頁面以橙色為主,通過不同明度和純度的“黃”進行調(diào)和,頁面非常融洽而不顯單調(diào)。很好的突出了的圖片,食品圖片色調(diào)也是相近的,故不會非常的突兀。而利用白色將網(wǎng)頁分層,有層次感。
二.娛樂類網(wǎng)頁案例分析
推薦案例:深橙色+土黃色+黃色
整個頁面是利用深橙和淺黃色的搭配來展現(xiàn)的,使頁面看起來更加的溫暖,深色的鋪墊,黃色的文字,達到一種突出而不突兀的視覺效果,賦予了網(wǎng)站生命力。
三.電子商務(wù)網(wǎng)站案例分析
推薦案例:橙色+卡其色+綠色
這一個案例使用的顏色相對較多,而橙色的導(dǎo)航輔佐明度較高的卡其色,不會顯得非常凌亂,反而更加有特色,很活潑。加上利用一些綠色的按鈕來點綴頁面,頁面就顯得不那么單調(diào),有萬橙之中一點綠的視覺效果。
四.科技發(fā)展機構(gòu)網(wǎng)站案例分析
頁面用的色彩相對較雜,但讓人感覺亂中有序。大家可以注意到,頁面都是采用深紅色作為文字,而橙色出現(xiàn)在紅色文字的附近,例如頂部的橙底紅字,大標題紅色小標題橙色,這些元素就使頁面亂中有序。
總結(jié):橙色運用的非常多,調(diào)整飽和度、純度都可以達到非常好的視覺效果,當然在視覺沖擊力的同時,可適當采用少許對比色調(diào)和緩和于視覺,從而削弱視覺的疲勞度。
版權(quán)聲明:本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容, 請發(fā)送郵件至 yyfangchan@163.com (舉報時請帶上具體的網(wǎng)址) 舉報,一經(jīng)查實,本站將立刻刪除