DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 從設計角度分析來看 如何讓網站擁有更多回頭客?
從設計角度分析來看 如何讓網站擁有更多回頭客?
編輯:關於網頁技巧     

增加回頭客
無論是個人網站還是企業網站,讓別人知道你網站的存在是首要目標。 互聯網上有成千上萬做得很好的網站,他們都在和你爭奪網民的流量。所以為了這個目的,打開網站時最初幾秒留給用戶的印象,非常重要!如今的網頁設計界發生了許多有趣的變化,對頁面中網站的互動就是其中之一,靈活的圖片、CSS媒體查詢被用於創建更具適應性的布局,給用戶帶來更多的人性化的體驗。當你的浏覽器尺寸改變時,我們的網站也隨著而改變來適應用戶的顯示。

VIA: smashingmagazine
翻譯&編輯: 視覺捕手

Designing Memorable Websites: Showcase of Creative Designs 
我們也看到一些在按鈕導航、鏈接上日益普及的網站應用,:hover 和 :active/:focus-effects。還有一個重要的變革是,在我們的網站設計裡應用了嵌入字體。這讓設計師有更多發揮設計的空間,可以做出一個令人留戀的網站。

怎麼建設一個令人難忘的網站

1 在你的設計方案中,盡量使用優秀的復雜或者簡約的原創圖形,這可以使你在競爭中更具優勢。

2 可以嘗試一些非傳統的配色方案,在保證用戶體驗和文字可讀性前提下,使用各種或富有張力的顏色來吸引用戶。

3 在你想重點突出的地方使用原創和突出的文字清晰的表現你於別人的不同,不幸的是用戶不會浏覽你每一個頁面,所以留一定比例的警示性標語和有趣的總結來刺激和吸引你的用戶。

4 保持文章的原創性很重要,不用說,內容為王。但假如用戶沒有浏覽你的文章或者找到的你文章的來源,那他們可能會改變注意或離開你所謂的文章。

現在讓我們看看一些最近的例子、那些令人難忘的網站設計。

Zinguh Creativ
現代簡約 酷酷的綠色調

Designing Memorable Websites: Showcase of Creative Designs

大而粗狂的幻燈片式效果是Zinguh的特點,還有那令人難忘的翻頁圖標。這是一個幻燈片效果的典型案例,高質量的產品圖片貫穿其中,看起來很整齊也很時髦。 綠色導航和切換圖標看起來是獨一無二的組合,但是在可讀性上或許該改進一下。

United Pixelworkers
合成像素圖

Designing Memorable Websites: Showcase of Creative Designs

精細的像素圖是該網站的特點,把自己的名字嵌入背景紋理及前景圖像邊緣的結合,看起來很可愛和時髦,質感看起來很飽滿。另外信息展示得也很清晰,整個網站看起來很飽滿。 左側滑動菜單是一個很好的側邊導航的例子,他的存在並不妨礙右邊內容,不會顯得那麼多余和突兀。網站底部的顏色選擇面板和鏈接的用戶體驗也很好。

Outback Creative Studio
大幅原創插圖

Designing Memorable Websites: Showcase of Creative Designs 
以較大的豐富多彩原創圖片作為導航是Outback Creative Studio的特點。在這個設計中,各個圖片以塊狀的形式組合在一起。 Outback Creative Studio圍繞公雞重點做文章,她有白天和黑夜兩個主題設計。漸變橘黃和紫色的配色看上去不同尋常,使整個網站感覺很獨特。

Mike Kus
右對齊的LOGO且帶點互動效果

Designing Memorable Websites: Showcase of Creative Designs 
Mike Kus有一個抓你眼球的LOGO,圍繞LOGO的文字 “DEAD stands for “Dreaming Everyday About Design” 很容易被人記住。DEAD 在網站中這是個非常有特點的圖標並也為網站無形中增加了一句標語。網站明亮背景上顯得文字很明顯。顏色和圖片的使用都很不錯,告訴用戶每一個項目和項目是如何被建設的,頁面浏覽起來很流暢。


Wez Maynard

詭異的圖形

Designing Memorable Websites: Showcase of Creative Designs 
Wez Maynard用了一些詭異的圖形、富有創造性的布局和原創的文字使網站令人難忘。 整個網站右對齊,看起來很不尋常。側邊欄的綢緞背景和一些復古風格的插圖配合網站底部的藍色都看起來很有趣。另外網站的文字寫得很詭異,也是一個如何讓文字給用戶留下好印象的案例,是一個原創、獨特、有趣的網站。

Epic Web Agency
彩虹紋理+銹跡

Designing Memorable Websites: Showcase of Creative Designs 
網站陳舊的紋理、高對比度的顏色、斯巴達頭盔、看起來就像是一部史詩。排版中橘紅色的運用可以刺激用戶感官。頭部的LOGO用了多種色彩,有一點偏純色。首頁的對角線傳達出一種視覺張力。該作品非常不同尋常,因為很多類似的風格通常用在印刷品。 Epic Agency 用了大量的原創的圖形,讓整個網站視覺沖擊力十足。


Rourkery.com

優雅+深邃+自適應的布局

Designing Memorable Websites: Showcase of Creative Designs 
Rourkery.com好玩的排版和多彩的圖形使主題很鮮明、大氣和誇張。該站的聯系方式放在很容易被注意到的地方。LOGO和導航都很和諧的居中顯示在海波紋紋理的背景上。也有不好的地方,網站中的主標語的能見度過高於頭部的LOGO。展示了橘黃紅色如何運用在不同設計元素間,網站的布局和圖片也很好的被自適應,當用戶改變自己的浏覽器時,他們都可以處在最佳狀態。


Christina Ung Illustration 
加粗體+獨特的版式

Designing Memorable Websites: Showcase of Creative Designs 
Christina Ung Illustration 是一個關於版式的站,在混合著大寫小寫字母並夾雜著san-serif字體間,大膽采用了加粗的字體。或許所有的這些混一起在圖形前讓標題更具視覺感。LOGO,在側導航上顯得很干淨並引人注目,並在頁面的主要地方留了大量的空間可以放相關文字來得到更多關注。大屏幕下在不拖動鼠標情況下,內容可以很容易被看到。 粉色的線條分割看起來很鮮明,但恰到好處

JoshSullivan.me
有趣的站總令人印象深刻
Designing Memorable Websites: Showcase of Creative Designs

JoshSullivan.me 是只有一頁的網站卻給人留下較深印象的典范。 頭部較大的很古典的圖形非常獨特。背景也很有趣的混合紋理,顏色,幾何圖形和有些年代的圖像。整個網站沒有網站意義可點擊的地方,只有一些分享按鈕和電子郵件地址。網站的配色結合圖形看起來有點詭異,但這可以幫助用戶留下更深印象。有一個小建議,就是網站的鏈接可以再突出一點,以便讓用戶不會找不到她。網站中間的圖形可能有點令人無法忍受,但這取決於觀眾是誰。

Jake Przespo
有趣的圖像+合理的編排

Designing Memorable Websites: Showcase of Creative Designs 
網站中間的Jake Przespo設計組合很有想法,這樣的設計對讓用戶記住該網站很有幫助。網站導航在圖形下橫穿網站,紅色背景上的文字很明顯還有一點木刻的設計細節。簡潔背景上的字體和圖片和紅色配合讓網站看起來很簡潔。如果讓文字再大一點,或許可以增加網站的可讀性。

Cooper Graphic Design
夠大+奪目的頭部圖形
 

Designing Memorable Websites: Showcase of Creative Designs
 Cooper Graphic Design的配色方案引人入勝,棕色的圖形和藍綠色,非常奪目。KV的圖形和背景的對比讓網站的設計很干淨而且有視覺感。頂部的導航設計也很簡潔。KV的小圖形和背景結合不僅有視覺感,而且當你改變浏覽器大小時,會出現意想不到的效果哦!有一個用戶體驗的問題,網站底部的導航通常是內鏈而不是外鏈,在這個案例中,下面的導航看起來似乎是外鏈,可能會給用戶產生混淆。

 Brandon J. Schmidt Design & Photo
水彩畫

Designing Memorable Websites: Showcase of Creative Designs 
這個網站的水彩背景看起來非常獨特富有視覺感,特別是首頁的。黑,白和黃色的配色方案,簡約和現代,水彩畫古老的感覺令人有興趣。首頁的LOGO嵌入到內頁的背景裡,這樣處理可以給用戶留下較深的印象。

Water’s Edge Media
簡約的適合+花一樣的插畫

Designing Memorable Websites: Showcase of Creative Designs 
Water’s Edge Media簡約統一的設計風格,哪怕沒有網站中的插畫,都顯得各位耀眼。但是插畫可以幫助網站更容易給用戶留下印象。LOGO也非常漂亮和現代。作品用幻燈片式的JS效果展示,很精細特別是切換按鈕。總體而言,多一點不同的字體和大小會使設計更有趣。

Jordan Gray Creative
簡約的設計+左側導航

Designing Memorable Websites: Showcase of Creative Designs 
Jordan Gray Creative左側的導航和LOGO的排版幾乎無縫銜接。網站采用極簡的設計風格,都依賴作品區域的展示,帶來一些視覺感覺。一些細節的把握,圖標 和 文字與圖片的間隔讓網站看起來十分簡約。

Eight Hour Day Design & Illustration
用色大膽

Designing Memorable Websites: Showcase of Creative Designs 
eighthourday.com在KV使用了組合的圖形結合了豐富的顏色,整個頁面看起來顏色鮮艷,導航簡單清爽。盡管很簡單,但作為分隔導航和頭部的邊界線設計的圖案和陰影看起來很有效的起到了分隔作用。

It’s Not My Type
一個關於網頁字體排版的BLOG

Designing Memorable Websites: Showcase of Creative Designs 
It’s Not My Type把像粗serif字體等豐富的網站字體,廣泛的運用在各種元素裡。包括表單,日期,評論區域等網站的內容滾動條很棒,顏色紋理的運用很干淨,富有視覺感。

McKinney
簡單不是簡陋

Designing Memorable Websites: Showcase of Creative Designs 
McKinney是一個簡單強調圖形沒有用紋理的網站,但是有一些圓 三角類似的幾何圖形紅,灰和黑的配色方案看起來也很明顯。有一個很有趣的是 如果幻燈片切換面板是可拖動,那麼加更多的鼠標懸停效果可以讓網站更有活力,交互感更好。網站各個頁面的設計統一性和顏色運用也值得一提。

Shaping the Page
頑皮的折紙動畫

Designing Memorable Websites: Showcase of Creative Designs
使用了明亮的透氣的顏色作為這個有趣的網站的背景色彩方案,配合活潑的手工折紙的插畫網站富有視覺感。藍色紋理背景和頁面底部的社交網絡內容讓網站魅力十足。頁面右對齊,當然把插圖移到左邊可以平衡整個網站的內容

Broken Pencils, Inc.
鉛筆插畫

Designing Memorable Websites: Showcase of Creative Designs 
Broken Pencils的LOGO很突出很有視覺感,盡管導航被獨立分開分布在頂部和底部,但看起來並不多余,簡約而不簡單,並且底部導航采用了不同的顏色。當鼠標經過服務頁面時產生的顏色轉變緩慢的效果令網站出彩,所有的圖形都很簡潔現代,最突出的設計師,素描插畫,保持了素描的主題。

Who is Leon
有趣的交互

Designing Memorable Websites: Showcase of Creative Designs 
網站背景的動畫應該是用戶進入Who is Leon第一察覺到的,不懂的背景結合可滾動的內容,包含一些模糊的圖形在一起給人一種移動的快感。頁面上的很多元素運用實際上是一種互動的交流方式。網頁裡單色的作品截圖會隨著鼠標移動而變成彩色,結合著一些突出的導航按鈕的運用,這種效果似乎很流行,網站采用了一些不同的字體,視覺互動感很好。

David Paul Seymour
怪獸來了

Designing Memorable Websites: Showcase of Creative Designs
這是一個基於插畫作為設計表現的網站,花花綠綠的插畫占據了網站主要視覺區域,很有趣。導航設計成雲朵插畫形式,讓用戶很想去點。這和早前的沒有互動效果版本相反。會有浪費資源的感覺,加一些貼合主題動畫效果,可以適時的增添網站的用戶體驗和樂趣。有一個要提的是網站沒有網址前的小圖標,加一個網站小圖標很方便簡單,但可以加深用戶的印象突出LOGO,讓網站有更完美的體驗。

Creativepayne 
獨特的配圖

Designing Memorable Websites: Showcase of Creative Designs 
Creativepayne有一點用圖片說話的感覺,混合著各種樣式復古的風格,並采用了棕褐色的配色方案。右上角寫著ESTIMATES get yours TODAY的按鈕有點不太突顯,如果一些設計元素可以再突出一點或許可以平衡整個網站和她的配圖。

Chicago Interhoods
互動地圖

Designing Memorable Websites: Showcase of Creative Designs 
Chicago Interhoods是一個設計和信息完美結合的網站案例,橘色,奶油色和藍色的配色方案很突出,正中央的LOGO結合頂部藍色的導航,整個設計看起來干淨,背景的地圖也帶互動效果,是個很好用視覺來表現信息的方式。

AdPacks Classy Sites & Classy Ads
老式的設計風格

Designing Memorable Websites: Showcase of Creative Designs 
AdPacks.com Classy Sites & Classy Ads有很老式的配圖,字體和紋理。很好的視覺表現吧這些混合在一起,吸引用戶來體驗。這種視覺表現容易挖掘一些潛在的用戶讓他們知道你賣的是什麼產品,聯系的按鈕清晰的排列在每個區域的下面。

Min Tran’s Journal
漂亮的字體+不尋常的紋理

Designing Memorable Websites: Showcase of Creative Designs 
Min Tran’s Journal導航用了綢緞的質感,柔軟的顏色看起來很舒服。字體的設計很獨特吸引人。下面兩個並排的欄目一樣寬,看起來干淨整潔,給人第一感覺很獨特。

Solid Pink Studios
較粗的對角線色塊

Designing Memorable Websites: Showcase of Creative Designs 
Solid Pink Studios如他名字一樣使用了粉色系,這是一個完全意外的設計方向。網站中矢量的巖石巨人插圖看起來很認真的樣子。 斜條紋和裡面的文字很好的融合,結合不同的屏幕會給用戶帶來不同的感受。如果用戶使用的是小屏幕,網站中的BLOG將被鏈接切斷幾乎被隱藏。總的來說,對角線色塊是一個有趣的和令人難忘的表達內容非常適合的設計。最後,我們吹毛求疵的覺得網址前的網站圖標的顏色很詭異,使用了綠色而不是粉色。

總結
要設計一個令人難忘的網站,你的設計元素要特別吸引人,要一個良好結構並賦有創意的背景圖,一些動畫效果運用,再加上明顯的字體可以更突出你想表達的。只要有更多的人關注你的網站你的設計,你就能得到更多的生意的機會。

VIA: smashingmagazine
翻譯&編輯: 視覺捕手
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved