萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 40個優秀的關於我們頁面網頁設計案例(下)

40個優秀的關於我們頁面網頁設計案例(下)

   溝通是一件重要的事情,這也使得聯系我們頁面的設計是整個項目中無法忽視,也無法含糊的部分。因為它不僅是要給用戶一個交代,而且作為網站的自留地,對於團隊自己而言,也必須給出一個“足夠漂亮”的交代。設計手法,展現方式,風格走向,這些東西都是頁面設計需要注意的地方,但是尤其重要的是,關於我們頁面 中“我們”是最重要的元素。有的團隊喜歡“官方”一點,有的喜歡個性一點,也有的團隊喜歡幽默的呈現手法,也不乏一些手藝高超的設計團隊在這個頁面當中再炫一下技術和設計手法。但是無論如何,關於我們頁面 設計是一件重要的事情,有時候讓自己高興,甚至會重過讓客戶高興。

  扯遠了,來看看接下來的20個案例吧。

  40個優秀的關於我們頁面網頁設計案例(上)

  21、介紹一下業務

40個優秀的關於我們頁面網頁設計案例(下) 三聯

  在關於我們 頁面當中介紹自己並不稀奇,不過除此之外可以做的還有很多,比如介紹一下自家的業務,展示一下自家的品牌,吸引用戶來聊聊也是很不錯的手段。Hello Monday 的關於我們 頁面就是這麼做的。

  22、視頻背景

22.-Moodboard-662x331

  在網站裡面添加視頻背景已經是一種非常流行的手段了,而作為電影制作工作室而存在的Moodboard 在關於我們頁面中使用視頻背景不僅符合他們團隊的工作性質,而且讓整個關於我們頁面更加鮮活了。

  23、使用柵格布局

23.-Urban-Influence-662x585

  要設計結構化的頁面,柵格總是你最好的朋友。Urban Influence 的關於我們頁面使用柵格來組織整個頁面的信息,需要展示的內容,讓用戶輸入的部分,裝飾性的部分和展示用的地圖,都界限分明地分布在頁面上。

  24、讓界面更加友好

24.-Deda-662x361

  如果讓界面更加友好,設計師要做的工作並不少。清晰而易讀的界面設計是最基本的,信息要能夠清晰的傳遞出來,沒有侵略性的配色,讓人感到熟悉、親切的呈現方式,易於操作的交互方式,這都是設計師要做好的地方。

  25、分步引導

25.-Simple-as-Milk-662x872

  取得聯系包含著一系列的操作,如果將整個交互過程分割成為若干步驟,一步一步引導用戶來操作,加入動效和微交互,這絕對是一種不一樣的體驗。

  26、增加聯系人快捷方式

26.-White-Frontier-662x365

  團隊中負責不同部分的負責人通常不一樣,用戶打開聯系我們頁面通常有著明確的目標,如何將FAQ部分加入其中,並且添加特定的聯系人的聯系方式,讓用戶可以更加直接地同不同的負責人進行溝通。

  27、同網站其他部分整合到一起

27.-Robby-Leonardi-662x306

  Robby Leonardi 的網站似乎被設計成一個扁平風的電腦游戲,當你浏覽頁面的時候,會隨著主角去不同的頁面,做不同的事情,而去關於我們頁面也是其中的一個“場景”。這是一種整合頁面的方式,值得學習。

  28、團隊合影

28.-Online-Department-662x329

  許多網站背後都是一整個開發和設計團隊在運作,用團隊成員合影作為關於我們頁面的背景圖也是非常合理且有個性的做法。

  29、使用留白

29.-Beta-Tataki-662x323

  通常留白能強化整個頁面的空間感和結構感,而Beta Tataki 在關於我們頁面就放置了一個設計感十足了電話,通過留白強化了聯系方式等內容的存在感。

  30、活用字體排版

30.-Pauline-Osmont-662x616

  精心設計的字體排版不僅具有裝飾性,還可以承載一定的內容。Pauline Osmont 的聯系我們頁面使用了黑色、銀色和金色來構建吸引人的字體排版主視覺設計。當你向下滾動頁面的時候,能看到易於閱讀排版到位的表單。

  31、親手展示

31.-Mark-Jaworski-662x389

  這也是近幾年比較常見的一種內容展現方式,設計師親手舉起展板來展示設計作品。如果用在聯系我們頁面中,這種設計師手法也是相當的應景呢。就像Mark Jaworkski 的這個頁面,設計師的技能、介紹還有留言用的表單都整齊地展示在這塊被平舉的白板上。

  32、列舉社交媒體聯系方式

32.-Retro-Portfolio-662x599

  現在哪個網站沒幾個社交媒體帳號呢?在關於我們的頁面當中將自家網站的各個社交媒體的鏈接都貼出來,對於許多用戶來說反而更加便於聯系。

  33、借用傳統的溝通方式

33.-Lionways-662x342

  復古的樣式是不錯的選擇,但是使用傳統的聯系方式來設計,似乎更加走心也更有意思。Lionway 的聯系我們頁面就設計成了明信片的形式,還有一些固定的信息干脆就列舉在一個打印賬單上。

  34、俏皮的文案

34.-Snask-662x325

  文案的設計也是聯系我們頁面中重要的部分,親切、幽默的文案設計會讓用戶感到親近,但是同樣的,俏皮的、機智的文案也一樣會讓用戶難忘。

  35、展現個性

35.-Resn-662x312

  設計工作室 Resn 的聯系我們頁面設計絕對是這組案例中最有個性的頁面之一,充滿80年代風情的設計元素,和帶著動物頭套的團隊成員圖片組成了頁面的主體。

  36、運用信息圖

36.-Quicksprout-662x686

  信息圖是近幾年一直處於上升階段的設計手法,如果有合適的展示內容,在關於我們頁面中使用信息圖也是相當不錯的選擇。Quicksprout 的關於我們頁面就使用了信息圖來呈現內容,清晰易讀,而且准確到位。

  37、動畫和卡通

37.-Melonfree-662x394

  在聯系我們頁面中使用卡通和動漫式的形象來呈現設計師和設計團隊是相當常見也相當有效的手段,Melonfree 的關於我們頁面就將設計師和開發者的卡通形象擺了出來。

  38、使用半透明的圖形

38.-Indofolio-662x316

  人的眼睛總會有意識地去識別想要石碑的內容,所以即使的半透明的元素加載在一起,也不會特別嚴重地影響閱讀體驗。Indofolio 的頁面設就充分運用半透明的元素,將核心的聯系方式放在半透明的矩形上,透過圖形用戶依然能看到背景的細節,但是又不會看不清關鍵的聯系方式。

  39、手繪效果

39.-Mario-Petrone-662x532

  手繪的聯系我們頁面,尤其是那些畫的還相當養眼的頁面,總能讓用戶感受到設計者的貼心。Mario Petrone 的這個頁面設計就相當的俏皮有趣。

  40、僅用一個下拉框

40.-Spokes-Pedicabs-662x350

  Spokes Pedicabs 的聯系我們頁面其實談不上一個完整的頁面,而用一個下拉框代替,當你點擊導航了中的鏈接,會出現這個醒目的橙色下拉框。

copyright © 萬盛學電腦網 all rights reserved