這5個色彩高階技巧,能幫你創造更優質的網頁使用者體驗

2022-09-24 09:18:14 字數 2225 閱讀 2931

色彩幾乎是所有設計體系中不可忽略的組成部分,而在網頁設計中,色彩本身所發揮的作用並不單一,除了最基本的著色構成色彩搭配的作用之外,色彩能夠通過對比創造視覺焦點,構建資訊層次,影響使用者情緒,甚至引導訪客的行為。

所以,在玩轉配色本身之外,高階的色彩運用技巧還有很多。

1、通過比例變化創造視覺焦點

控制色彩的比例來創造視覺焦點是常見的色彩運用手法之一,控制色彩的比例實際主要是通過控制色彩所在元素的大小來達成效果的。比如viporte

這個**,當你上下滾動首頁的時候,每個部分都用超大的字型進行了裝飾,而每個字母都使用了漂亮的色彩進行填充。不同的文字使用了不同的色彩,並且搭配以相應的。每個頁面的焦點肯定是最中心的和字母,而焦點的形成和色彩的比例與運用脫不開關係。控制色彩的佔比,無論是多還是少,只要有明確的目的,總能形成吸引注意力的焦點。無論是我們常說的「萬花叢中一點綠」,還是極簡主義設計中大面積的留白,都是色彩比例控制下所構成視覺焦點的典型案例。

2、通過對比度吸引使用者注意

在設計過程中,使用色彩來控制對比度也是設計師頻繁使用的技巧之一。當設計的整體色調趨於柔和和平靜的時候,突然注入強對比的色彩,能夠瞬間抓住使用者的注意力。

而thinx 這個**在設計的時候就將對比度控制得很好。網頁主體的配色採用的是經典的黑白搭配,白色的背景搭配黑色的文字。而整體的設計感的**則主要源於排版和彩色的。**所採用的明顯經過精心的選擇和設計,紅色的底色、黑色的內衣和模特外露的細膩肌膚色在激烈的碰撞,漂亮而充滿**,大膽的色調搭配和素色的背景與文字形成了鮮明而強烈的對比,無論是經典的紅黑搭配,還是永恆的黑白配色,都足夠漂亮和吸引人。

thinx 這個案例我非常喜歡,並且經常會用到,因為它證明了設計師並不一定非得靠高飽和度的霓虹色來創造高對比度的配色。即使是兩種平衡的顏色,也能讓整個設計脫穎而出。

3、使用色彩創造ux模式

高度一致的配色方案能夠創造出視覺模式,而延伸到使用者體驗上,則會讓整個ux呈現出模式化的特徵。模式化的設計讓使用者更容易適應,使用者更容易摸索出規律,也更容易產生相匹配的預期,換句話說,ux模式能夠培養使用者習慣,同使用者產生深刻的關聯。程式設計客棧就像使用者習慣了某些特定的圖示之後,在其他地方看到這些圖示就知道它們的含義,明白該如何互動了。比如,小房子圖示會讓使用者想到首頁、主頁,而垃圾桶則會關聯上刪除的概念。色彩相對而言更加主觀,因為每個**和app都會採用自己的配色方案,不同的色彩代表不同的含義。

那我們就拿underbelly

這個產品展示頁作為示例吧。在underbelly

這個**中,所有可點選的元件都是藍色的,你在試用**幾www.cppcns.com秒鐘之後,能夠快速掌握這個ux模式,並且明白如何操作。這就是underbelly

通過色彩構建ux模式的方法。ux模式的優勢在於,它讓使用者更快地熟識你的產品。越容易識別,使用者的想法越少,產品的的使用也就更加順暢了。

4、使用色彩來建立層次當我們瀏覽網頁和各種介面的時候,資訊的層次感很大程度是借助視覺來營造的。使用色彩來創造視覺層次感就很順其自然了。

在skore 的產品頁面中,每乙個部分都有使用到綠色的元素。重複的綠色元素不僅建立出程式設計客棧可供使用者快速識別的模式,它也讓使用者能夠快速明白哪些因素更加重要。通常,我們解釋視覺層次的時候,會用不同大小、粗細的字型來闡述資訊層次和結構,但是不同強度的色彩,同樣可以實現層次的劃分。

在skore 這個案例當中,綠色和灰色的文字以及白色的背景之間有著良好的對比度,整個配色方案不依賴其他的強調色,以綠色為主。這種相對穩定的配色結構有助於讓每個部分都有層次地呈現出來。綠色不僅吸引使用者關注關鍵的元素,而且為不同的部分的內部提供層次結構。

5、充分利用色彩的相似性

除開其他的目的,設計師使用色彩或者調整色彩的目的,基本都是為了創造設計的一致性。invision 的年度總結頁面使用了從粉色到紫色的漸變,在頁面的下方,粉色和紫色同樣應用到了按鈕中,此外,在著陸頁當中,將對比度明顯的白色置於粉色+紫色的背景之上,確保資訊的清晰呈現。如果色彩每次都不一樣,那麼整個設計看起來就不是那麼令人難忘了。

另外乙個案例來自於 comotion。comotion 的工作室首頁採用了幾種不同的色彩,但是這些色彩的色調是非常接近的,從而建立出了一種和而不同的配色方案。在這個設計案例當中,幾個不同的色彩互為搭配,並不會太過於突出,但是又能夠恰到好處地進行強調,最終讓色彩足夠好看,有保持了使用者的參與度。

結語色彩能夠幫助dqefm設計師達成各種各樣的目的,靈活的運用能夠讓實現這一切。當你將上述的色彩使用技巧都合理的運用起來,可以靈活的創造視覺焦點,構造層次,打造真正有趣而有用的設計。

本文標題: 這5個色彩高階技巧,能幫你創造更優質的網頁使用者體驗

本文位址: /news/seo/77851.html

2023年,這5個資料科學專案能幫你找到工作

找個資料科學的工作不容易,不過我有個好主意能幫你找工作,這就是打造你自己的作品集,利用作品集展示你學到的技能,讓未來的老闆知道你有多大本事。你可以把這5個資料科學專案放到作品集裡,以此說明自己的能力 資料清洗 資料科學家往往要耗費高達80 的時間來清理新專案的資料,這是資料科學團隊最大的痛點。如果能...

5個移動設計技巧幫你吸引使用者

移動技術正在改變使用者的習慣,去年移動裝置的總量就要超過全球的人口數量了,到2017年預計平均每個人會有1.4部手機,但是移動並不是那麼簡單,它是完全不同的東西,需要特殊的方法。移動策略需要考慮響應式設計,以及跨平台的瀏覽體驗。下面這5個技巧可以讓你設計出吸引使用者的移動網頁。1.微程式設計客棧互動...

5怎麼選國外節點 外賣包裝怎麼選?這5個技巧要掌握

在這個重顏值的時代,消費者對於外賣包裝的訴求在逐漸提高,在餐品質量差異不大的前提下,那些包裝好的商品,更具市場競爭力,能加深消費者印象,激發顧客再次購買的慾望。外賣包裝怎麼選,選擇外賣包裝要注意什麼?今天,袋鼠君就來講講 外賣包裝的選擇。1 好的包裝應滿足這幾點 不易破損 不變形 不撒漏,特殊品類要...