「海平面」在網頁設計中,如何應用紋理?

當提到網頁設計,紋理的應用是未來的趨勢。極簡主義的方式已經一去不復返了——我們想要紋理

那種令人快樂的“小零碎”呈現在我們的網頁上,現在就想要它!

「海平面」在網頁設計中,如何應用紋理?

(海空設計微信公眾號:haiko_design)

紋理是一種簡單而有效的方式,可以為網站帶來深度感。通過紋理的應用,你可以掌控用戶在整個網站中的瀏覽順序,而且誰不喜歡偶爾的一些隨意性操作呢?另外,網站看起來會更好,更有效地傳達其信息,並通過紋理強化銷售信息。

首先,我們需要了解什麼是紋理。網頁設計中的紋理是巨大幅面的、不重複的圖像,給人一種你可以觸摸到的物理表面的錯覺。它們的應用可以通過關聯,產生特定的情緒,從而傳達有用的信息。

紋理是一種感官體驗。通常與圖案容易混淆,但紋理往往會更好地引發關注度,並將不同信息內容的區域分隔開來。另外,紋理看起來超級酷!

一定要考慮網頁轉化的問題

作為一名網頁設計師,你可能會問自己:“這樣應用看來很有藝術感嗎?”但要記住,我們的網站是屬於商業設計行為,不能光是好看就算完成。要常常提醒自己:“這樣的效果,會增加轉化率嗎?” 沒有比將網頁設計得可以把瀏覽者,轉換成消費者更好的感覺了,所以通過紋理使用,最終完美的目的,是要引導瀏覽者變成消費者。

紋理可以突出顯示網站組件,如標題、圖標和按鈕。它還可以吸引用戶採取行動。

讓我們來看看一些做得很好的網站:

紋理網頁,留空白空間

網頁上留白空間的處理,不是致命性的侵犯。這既不是浪費空間,也不是浪費金錢。如果你的客戶對這空白空間不以為然,他們可能患上某種囤積綜合症——但那是他們的事,不應該影響到你。所以在網頁設計上,請確保有一些空白空間!下圖是“我喜歡我的牙齒”的網頁,頁面上除了紋理牙齒圖外,其他基本上都是空白空間。

「海平面」在網頁設計中,如何應用紋理?

紋理是美麗的小或微妙的圖案數量的總和。但是,要在頁面上引導用戶,需要在內容區域之間進行一些區分。要清楚一點:“設計既是一種間隔行為,也是一種標記行為。”(海空設計微信公眾號:haiko_design)

更好地展示品牌

把紋理標誌放在純色紋理背景上,或者反過來,把純色標誌放在紋理背景上,這兩種方法都是強調公司名稱和吸引注意力的萬無一失的方法。有紋理的標誌也可以準確的重申公司是做什麼的,無需更多文字的表述。它還可以給網站帶來一些衝擊力,使網站更加令人難忘,並使其從競爭對手中脫穎而出。

「海平面」在網頁設計中,如何應用紋理?

在上圖網頁上,該公司把標誌置於有紋理的背景圖上,木質效果紋理不僅與公司的產品相符合,而且還體現了公司的專業性,帶著一點剋制感以及一點樂趣!對於建築/貿易類型的公司,特別適合應用混凝土和木材的紋理組合。

始終要考慮文字排版效果

保持清晰度。有一點需要記住的是,紋理會影響文本的易讀性。文本是傳達信息或進行銷售的主要方式之一,清楚這一點,非常重要。

如果你正在使用紋理,請明智地選擇字體、顏色和尺寸。在這些元素選擇時,要慎重,千萬別使網頁出現漫畫效果。

「海平面」在網頁設計中,如何應用紋理?

上圖網頁中,突出顯示了好的排版產生的影響力。要在排版設計上,下些功夫。

應用高質量紋理,能解決網頁加載慢的問題

通常情況下,由於紋理背景圖的應用,可能會使網頁加載慢。但高質量紋理就不會發生這種情況。這裡不是讓你選擇低分辨率紋理圖,來解決這個問題。顯然,低分辨率的紋理圖看起來過時,瀏覽者看到後,對網頁很快失去信心和興趣。而是當網頁必須應用紋理時,要重複複製同一圖案的紋理這樣操作,達到減少加載時間的目的。如果這種多次複製出來的紋理背景圖,看起來不是太明顯的話,你就成功解決了這個問題。

「海平面」在網頁設計中,如何應用紋理?

看看如上的網站,就是應用這種簡單但高分辨率的紋理,用於背景圖。

重申一下,對紋理使用要有節制。紋理是很有趣的,但是要有控地使用它。如果你不太清楚你的網站需要什麼,你可以在Photoshop中添加一個紋理,進行對比。通過這種方式,你能得到一些很好的、微妙的紋理,如下圖所示。(海空設計微信公眾號:haiko_design)

「海平面」在網頁設計中,如何應用紋理?

是的,紋理確實值得好好利用,但要按著以上列出的要點,加以注意,溫和對待!嘗試紋理並從中獲得樂趣,最重要的是,請記住:紋理的應用,最終是為了獲得高的轉化率。


分享到:


相關文章: