您現在的位置是:電腦技術吧?>? 基礎知識 ??>??網頁顏色怎么改,如何設置網頁背景顏色??>??正文詳情

網頁顏色怎么改,如何設置網頁背景顏色

宮南蓮2019-11-20 17:41:45 人圍觀
簡介有顏色的在網頁設計中,思考當前的色彩景觀是非常有趣的。大多數網站或多或少都是一樣的,但色彩搭配是一個非常強大的工具。我不想解釋什么革命性的或特別的東西。但如果大多

在網頁設計中,對目前的網站配色(Landscape of color)認真琢磨一下還是非常有趣的。

大多數網站或多或少相同,但是顏色的設計搭配卻是一個非常給力的工具。

  我并不想嘗試去闡述一些具有革命性的東西或者是特別的發現。

但如果大部分網站都采用同樣的配色方案,那對顏色意味著什么呢?實際上,遠超出你的想象。

幻想一下整個世界的每一個網站都是非常漂亮和五彩繽紛的,但它同時也意味著千篇一律。

這就像你文章中每一個段落的粗體。

  因此,當配色方案比較柔和的時候,它允許有更多的機會。

  關注你想要的任何東西  許多網站都有一個基本的灰度配色方案-白色的背景和黑色的字體。

(網頁中)想讓你看到的部分會賦予顏色作為強調。

這就是為什么網頁不會充滿顏色它們使用在想讓你看到的按鈕,標題或者鏈接上面。

  使用Vibrant,例如,當你第一次登陸它們的主頁,主頁的背景和圖片是黑白的,網站標志,可點擊的按鈕和漢堡菜單是亮黃色,這些可以很快的(在灰度背景中)脫穎而出,吸引你的注意力。

  另一個例子是Takeit; 當你第一次登錄他們的主頁就看一個大大的藍色背景。

然而,其他的都是白色的。

最前面并且居中的大標題會讓你的注意力集中在中間。

同時,你的眼睛在很短的時間內就能注意尺寸較小但是仍然明顯的APP商城的按鈕。

你可以看到是顏色如何指引用戶的注意力的。

  創造個性  顏色是非常奇妙的,因為它可以設置一個網站或者品牌的語氣和情緒。

Beagle(很 遺憾,譯者訪問的時候,網站已經不在了)提供創建項目簡介的服務,他們的網站使用了較輕的茶色。

當你向下滾動他們的主頁時,你會看到棕色,炭色,綠色,甚 至粉紅色這樣一些愉快的色調。

世俗的色調(earthly tones)看起來專業和優雅,給人對于其所代表的公司(留下)一個非常好的印象。

  An Interesting Day 網站它特指在奧斯陸峽灣(Oslofjord)的一個小島上舉辦的一個不可思議的,為期一天的會議( a weird, one-day conference on a tiny island in the Oslofjord)。

當紅色的背景和紅色的字體在上面的是偶,你一定會有一種怪異的不同的感覺。

這不是我們每天看到的東西。

這看起來很好,但更重要的 是這種配色方案傳達了一種很明顯的怪異的(weird)個性。

  寫一個非常重要的聲明  通過顏色做一個聲明(statement)會很有趣。

但你必須保證這個顏色很顯眼并且能抓住用戶的注意力。

這很簡單的說~。

但對于語句來說也必須是 一個很好的顏色選擇。

你不能只是隨便選取了一種亮色,(反之)它的外觀和感覺必須對整個頁面來說具有意義和目的性。

舉個栗子,這是Gaga Symphony的登錄頁面。

當你登錄到他們的界面,你會被亮麗的粉紅色背景所包圍。

這不是你期待的交響曲。

相反,你覺得交響樂應該更優雅,你期待靜謐的色調。

但是,不是這一個,Gaga交響樂是充滿活力,有趣和創造性的。

因此,(其所使用的)桃紅色(hot pink)是有意義的。

  提供內聚(Cohesion)和流動(Flow)  顏色也可以指導用戶使用流式頁面。

在上面的Takeit的例子中,她比較溫和的準確指引了用戶的注意力。

顏色為了指導用戶,它可以變得敏感 (subtle)但不需要戲劇性(dramatic)或者過分夸大(over the top)。

尤其當各種顏色之間開始緊密結合時特別有效。

這基本就是品牌顏色工作的原理。

  看Marvel或者Dropbox。

他們APP的配色方案都使用了明顯的藍色,但是你看在它們圖形中的其他顏色,像綠色,橘黃色或者紅色,非常恰當的搭配在一起;這樣就讓他們變得有意義了。

  一個不同的例子是Innovation Project Canvas。

他們使用了綠色來指引用戶(操作)沿著他們的頁面滾動。

你不需要使用許多顏色來創建一個漂亮的流式頁面;僅僅使用一種顏色也可以做得更好。

Innovation Project Canvas僅僅使用他們的綠色就達到了極佳的參與指導用戶的效果。

  圖片中的顏色  一個關于顏色的有趣的小竅門是通過圖片去使用它。

用戶界面的基礎不僅是給網站添加一些顏色而已。

隨著登錄頁面上照片背景和大產品圖片使用的興起,去使用合成的圖片為你的設計帶來色彩也是一個不錯的主意。

  CartoDB 是一個能夠讓你將地理位置數據可視化的APP。

(CartoDB是一個開源的允許你在web上存儲和虛擬化地理數據的工具,這個數據庫通過靈活方式讓開發 者更容易的創建地圖和設計自己的應用。

)有什么最好的方法可以炫耀它們的服務有多好而不是炫耀他們的地圖有多美嗎?那就是他們的主頁。

這是一個機智的方式 去為他們的的產品說話,同時為他們的頁面增加視覺興趣和色彩。

  說到產品為它們自己說話,ETQ讓 他們的鞋子大大勝過了他們的UI。

這個網站風格非常簡潔,以最低限度去延伸他們的配色方案。

他們把重點放在他們的產品上。

盡管他們不是所有的鞋子都像例子 中的一樣富有色彩,但是要讓他們的鞋子成為其設計中最大的顏色板塊,仍然有一段很長的路要走。

ETO真正的讓鞋子脫穎而出。

  誰需要顏色呢?  有趣的是看到網站沒有顏色。

有時候你不需要它(顏色)。

網站沒有紅色,綠色或者藍色也仍舊可以很華麗。

灰度配色方案可以為品牌創建必要的外觀和感覺以及發表聲明。

  Visual Soldiers確實很好,沒有顏色,就像Tomasz Wysockis portfolio。

這兩個網站有同樣的優雅。

因為整體缺乏色彩,所以他們反而抓住了你的注意力。

你想在一個CTA(引起用戶動作)或是一個鏈接中找到一些輕微的藍色或者綠色 的提示,但是這里沒有。

顏色的缺乏是這兩個網站品牌的一部分。

就算僅有黑和白兩種顏色,他們看起來也同樣的時髦和美觀。

  結論  就像你所看到的,顏色是非常強大的。

如果你能讓顏色做一個設計,它可以做到許多事情。

顏色可以通過流和重要的聲明指引用戶的眼睛,幫助指導用戶。

顏色充滿個性,也可以十分有趣。

對我而言,我認為顏色,或缺乏(色彩),賦予了設計生命。

  So have fun with it.

版權聲明:本文由 宮南蓮 整理編輯。

原標題:網頁設計顏色,網頁顏色

轉載注明出處:http://www.dn9ww09s.icu/basics/13833.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • ofo,ofo現在怎么樣了

    ofo,ofo現在怎么樣了 相關圖片ofo共享近日,有不少ofo用戶反映,對ofo一元金礦活動感到好奇。那么ofo的一元金礦怎么玩呢?現在,超人軟件編輯就為大家介紹一下iPhone版ofo的1元押金活動。希ofo資源...

  • 局域網文件共享軟件哪個好,網絡共享什么軟件好

    局域網文件共享軟件哪個好,網絡共享什么軟件好 相關圖片局域網共享軟件推薦局域網是在某一地區由許多計算機連接起來的一組計算機。局域網的優點之一是網絡狀態穩定、快速。一些協同辦公、文件傳輸等操作在局域網環境下表現較好。那...

  • 什么的視覺效果,視覺效果好

    什么的視覺效果,視覺效果好 相關圖片視覺效果的沖擊這個例子說明了用閃光燈制作飛雪的視覺效果方法。教程的效果是只要鵝毛一樣的雪落下來,這是相當現實的。在本例中,使用一個簡單的as來復制雪花并控制它們的移動...

  • 美團打車內置導航,美團找不到打車功能了

    美團打車內置導航,美團找不到打車功能了 相關圖片美團打車怎么幫別人叫車最近,METUN APP推出的出租車功能意味著未來,你可以乘坐出租車到湄潭。那美團的出租車在哪里?現在,超人軟件編輯也想介紹一下METIAN的iPhone版本的美團打車...

  • 魔獸世界隨身app,魔獸世界隨身助手

    魔獸世界隨身app,魔獸世界隨身助手 相關圖片魔獸世界的app魔獸世界是一個非常實用的游戲輔助工具。最近,有很多小伙伴認為下載后無法使用該應用程序。如果魔獸世界的便攜應用無法安裝,我們該怎么辦?現在,超人軟件編輯...

  • ins元素,ins元素什么意思

    ins元素,ins元素什么意思 相關圖片ins風定義表示插入到文檔中的文本的文本指定此元素在Internet Expo中插入到文檔中的文本ins標簽...

  • ofo小黃車,ofo小黃車押金

    ofo小黃車,ofo小黃車押金 相關圖片ofo小黃車怎么退余額想必打開軟件后,你會發現ofo推出的國慶卡活動。那么ofo國慶卡有什么用呢?如何獲得ofo國慶卡?現在,超人軟件編輯也要介紹ofo小黃車客服...

  • 打造世界葡萄酒,打造葡萄酒黨建

    打造世界葡萄酒,打造葡萄酒黨建 相關圖片打造世界酒桶不產酒了看上去精致漂亮的酒瓶其實制作起來很簡單。它可以很容易地與煙花在幾個步驟首先,使用形狀工具畫出相應的形狀。通過這些形狀的組合,我們可以得到一個瓶...

  • 閃電盒子靠譜嗎,閃電查詢可靠嗎

    閃電盒子靠譜嗎,閃電查詢可靠嗎 相關圖片閃電盒子正規嗎閃電降價是一款非常不錯的生活購物軟件。在這個軟件里,你可以找到各種各樣的產品。那么閃電降價靠譜嗎?現在,超人軟件編輯想介紹閃電降價的真相,希望您不要...

  • dreamweaver,dreamweaver使用

    dreamweaver,dreamweaver使用 相關圖片dream wear軟件步驟1:Apache配置站點。一。如果我們在E/www目錄中創建一個測試站點,我們首先在www目錄中創建一個測試目錄。2現在我們打開Apache配置文件,首先添weaver...

熱評文章

  • 為什么無法連接app,app無法連接

    為什么無法連接app,app無法連接 相關圖片app store無法打開魔獸世界便攜應用是魔獸世界游戲輔助工具,相信很多小伙伴都在使用它。然而,最近,許多人報告說,他們無法連接到網絡后,下載和安裝。那么,如果魔獸世界的應...

  • 安卓圓角加陰影,圓角

    安卓圓角加陰影,圓角 相關圖片excel圖表邊框變圓角陰影在CSS中有很多方法可以實現圓角、陰影和透明度。傳統的方法比較復雜,使用CSS3更加方便。雖然現在各種瀏覽器對CSS3的支持不是很好,但CSS3在不久的將來會很圓...

  • 閱讀軟件哪個最好,手機閱讀軟件哪個好用

    閱讀軟件哪個最好,手機閱讀軟件哪個好用 相關圖片手機閱讀軟件哪個好讀書是學習和日常休閑的好選擇。隨著手機的普及和閱讀軟件的出現,人們的閱讀越來越廣泛。安卓平臺上有這么多閱讀軟件,哪一個更適合使用?第一讀者:http...

  • flash插件,安卓flash插件

    flash插件,安卓flash插件 相關圖片手機flash插件怎么用今天,我打開瀏覽器瀏覽校園網站和博客,卻有這樣一張照片。頁面中的SWF文件被難看的人臉圖片所取代,頁面左上角有這樣一個提示,shockwave flash崩潰了瀏覽器fl...

  • 黃油相機模板用不了,黃油相機模板

    黃油相機模板用不了,黃油相機模板 相關圖片黃油相機收藏模板黃油相機是一款非常藝術的圖像美化軟件。最近,許多黃油相機的用戶報告說,他們不知道如何使用黃油相機模板。接下來,超人軟件編輯將介紹如何在iPhone版的butt...

  • 簡單動畫制作,演示動畫制作

    簡單動畫制作,演示動畫制作 相關圖片flash動畫制作教程簡單我們必須承認煙花是強大和方便的。這些天的學習讓我覺得我以前學到的知識只是皮毛齒輪圖是由FW自己的動畫組件構成的。很粗糙。但能做到這一點令人欣慰。至...

  • 手機dvd播放器,dvd播放器軟件排行榜

    手機dvd播放器,dvd播放器軟件排行榜 相關圖片高清dvd播放器排名在光碟普及的時代,大多數電腦都需要安裝DVD播放機。雖然現在沒有什么用處,但一些歌迷在聽歌曲時更喜歡用DVD播放機播放實體專輯。那么,哪個DVD播放機更好呢?...

  • win7怎樣調節屏幕亮度,windows7怎么調節屏幕亮度

    win7怎樣調節屏幕亮度,windows7怎么調節屏幕亮度 相關圖片win7調節亮度功能消失對大多數人來說,除了手機,電腦是最常見的電子設備。在使用電腦的過程中,電腦屏幕太亮或太暗,會造成視覺疲勞。調整電腦屏幕亮度的操作顯然不如手機方便...

  • HTML元素,html5元素

    HTML元素,html5元素 相關圖片html行內元素有哪些定義表示定義列表注釋定義列表。注意:此元素在Internet Explorer 3.0及更高版本的HTML中可用,在Internet Explorer 4.0及html列表元素...

  • 臺式電腦怎么恢復出廠設置,win7怎么恢復出廠設置

    臺式電腦怎么恢復出廠設置,win7怎么恢復出廠設置 相關圖片筆記本電腦怎么重裝系統我相信你們在用了一段時間后一定會想換臺新電腦的。那么如何在轉售前將電腦恢復到出廠設置?現在,超人軟件編輯也想為大家介紹一下如何重新安裝系統,...

關注微信

变脸官网查询