超詳細(xì)，設(shè)計系統(tǒng)顏色規(guī)范的建立過程

源：設(shè)計達(dá)人
www.shejidaren.com
愛設(shè)計，愛分享

研究背景

本文基于目前兩大設(shè)計體系：安卓端的谷歌設(shè)計規(guī)范和iOS人機(jī)交互指南對顏色的定義和規(guī)范，參考了部分 Ant Design 的色板生成原理，為大家?guī)怼该浊fAPP」設(shè)計系統(tǒng)顏色規(guī)范的建立過程。

色彩理論

1. 起源

對于現(xiàn)代色彩的理解，我們要?dú)w功于一個人：牛頓。牛頓闡明了動量和角動量守恒的原理，提出牛頓運(yùn)動定律，給世界帶來了秩序的同時，也通過對三棱鏡將白光發(fā)散成可見光譜的觀察，發(fā)展出了顏色理論。

牛頓注意到，當(dāng)你通過棱鏡發(fā)出白光時，光會被分裂成彩色漸變。不僅如此，你還可以將顏色重新組合起來再回到白色，這在當(dāng)時是一個非常全新的事物。要知道在這個實驗之前，混合顏色是一種普遍的禁忌和對自然的冒犯。

△ 牛頓的光學(xué)圖之一

牛頓的彩虹是一個完美的漸變，他把它進(jìn)行了排序。并且把它分成了七種顏色：紅色，橙色，黃色，綠色，藍(lán)色，青色，紫色。

△ boute的色圈

2. 發(fā)展

同時，牛頓也發(fā)明了色輪，完整揭示了隱藏在自然中的秩序，就像音樂中的音節(jié)一樣，且由偉大的藝術(shù)家歌德完善了色彩理論。對，就是那個寫了《少年維特之煩惱》的歌德。

眾所周知，歌德是一個偉大的詩人、小說家、戲劇家和杰出的思想家。但是卻很少有人知道，他還是一個科學(xué)研究者，而且涉獵的學(xué)科很多。他從事研究的有動植物形態(tài)學(xué)、解剖學(xué)、顏色學(xué)、光學(xué)、礦物學(xué)、地質(zhì)學(xué)等，并在個別領(lǐng)域里取得了令人稱道的成就。歌德同時也是一個著名的畫家。他系統(tǒng)地將顏色描述為「暖色」或者「冷色」，這種冷暖概念組成了現(xiàn)代色彩的一部分。早期的人們可能認(rèn)為藍(lán)色是一種暖色，也許因為它是火焰中最熱的那個部分。

后來我們有了蒙塞爾的球體，包豪斯的學(xué)者也詳細(xì)闡述了色輪，并且形成色調(diào)，色相，對比度等各種色彩的屬性。然后出現(xiàn)了現(xiàn)代數(shù)字顯示器的發(fā)明，這種技術(shù)讓色彩產(chǎn)生了無數(shù)種可能性，更多現(xiàn)代科技的色彩模型，可以讓我們更細(xì)致地感知色彩。

色彩概念

1. HSL

HSL色彩模式是工業(yè)界的一種顏色標(biāo)準(zhǔn)，是通過對色相（Hue）、飽和度（Saturation）、明度（Lightness）三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色，這個標(biāo)準(zhǔn)幾乎包括了人類視力所能感知的所有顏色，是迄今運(yùn)用最廣的顏色系統(tǒng)之一。

2. HSV

HSV又稱HSB，是基于人眼的，設(shè)計軟件中常見的色彩模式。

在HSB模式中，H（hues）表示色相，在0~360°的標(biāo)準(zhǔn)色環(huán)上，按照角度值標(biāo)識。比如紅是0°、橙色是30°等；S（saturation）表示飽和度，是指顏色的強(qiáng)度或純度。飽和度表示色相中彩色成分所占的比例，用從0%（灰色）~100%（完全飽和）的百分比來度量。B（brightness）表示亮度，通常是從0（黑）~100%（白）的百分比來度量的，在色立面中從上至下逐漸遞減，上邊線為100%，下邊線為0% 。

HSV模型通常用于計算機(jī)圖形應(yīng)用中，色相表示為圓環(huán)；可以使用一個獨(dú)立的三角形來表示飽和度和明度，三角形的垂直軸指示飽和度，而水平軸表示明度。在這種方式下，選擇顏色可以首先在圓環(huán)中選擇色相，再從三角形中選擇想要的飽和度和明度。

△ HSL和HSV都是圓柱形幾何形狀

如果我們繪制色調(diào)，亮度，而不是飽和度，那么分別得出的是雙錐體和錐體，而不是圓筒。

HSL 和 HSV 都是一種將 RGB色彩模型中的點(diǎn)在圓柱體中的表示法，以便更接近與人類視覺感知顏色制作屬性的方式對齊。在這些模型中，每個色調(diào)的顏色排列在徑向切片中，圍繞中性色的中心軸，其范圍從底部的黑色到頂部的白色。這兩種表示法試圖做到比 RGB 基于的幾何結(jié)構(gòu)更加直觀。

△ RGB基礎(chǔ)原理模型

今天，幾乎每種計算器，顏色選擇器，以及 Web應(yīng)用程序都使用 HSL 或者 HSV，至少作為一種選擇。并且大多數(shù)的 Web前端框架都存在預(yù)打包的開源顏色選擇器。在CSS 3規(guī)范中允許網(wǎng)頁制作者為他們的網(wǎng)頁直接與 HSL坐標(biāo)制定顏色。

使用HSV（HSB）的應(yīng)用：

Apple Mac OS X系統(tǒng)顏色選擇器（有一個H/S顏色碟和一個V滑塊）
Adobe圖形應(yīng)用程序（Illustrator，Photoshop等等）

使用HSL的應(yīng)用：

CSS3規(guī)定
Microsoft Windows系統(tǒng)顏色選擇器（包括Microsoft Paint）

設(shè)計系統(tǒng)色彩

1. Material Design Colors

一致且有意義：顏色有助于表達(dá)層次結(jié)構(gòu)，建立品牌形象，賦予意義，并指示元素狀態(tài)。對每個組件的顏色應(yīng)用都有做參考。整個UI用色的精髓，可在 material 工具中體現(xiàn)的淋漓盡致。

顏色用法

谷歌規(guī)范中顏色的使用主要對兩個部分進(jìn)行了定義，一個是主色，一個是輔助色。配色靈感來自大膽的色調(diào)與柔和的環(huán)境、深度的陰影、明亮的高光并存。我們可以在大量頁面中清晰地感知到此顏色的使用手法。

主色：強(qiáng)調(diào)色。應(yīng)用程序的屏幕和顯示組件最頻繁的顏色。要在元素之間創(chuàng)造對比度，可以使用較淺或較深色調(diào)的主色。較淺和較深的色調(diào)之間的對比度有助于區(qū)分不同的表面，例如區(qū)分狀態(tài)欄和工具欄。

輔助色：則是用來強(qiáng)調(diào)UI中關(guān)鍵部分的顏色。輔助色可以是和主色互補(bǔ)的，也可以是和主色類似的，但它不應(yīng)該只是簡單的對主色進(jìn)行加深或變淺。輔助色應(yīng)該和它周圍的元素形成對比，并作為強(qiáng)調(diào)，且應(yīng)謹(jǐn)慎使用。

△ 主要和輔助調(diào)色板示例

使用原則：

層次清晰：最重要的元素最突出。顏色可表示哪些元素是交互式的，它們與其他元素的關(guān)系以及它們的突出程度。
清晰易讀：文本和重要元素（如圖標(biāo)）出現(xiàn)在彩色背景上時，應(yīng)符合所有屏幕和設(shè)備類型的易讀性標(biāo)準(zhǔn)。
張力表現(xiàn)：通過在令人難忘的時刻展示品牌色彩來強(qiáng)化您的品牌風(fēng)格，從而強(qiáng)化產(chǎn)品的品牌。

△ 一些案例

調(diào)色板生成器

這些調(diào)色板最初由 Material Design 于2014年創(chuàng)建，由可以和諧協(xié)作的顏色組成，可用于開發(fā)您的品牌調(diào)色板。

調(diào)色工具

選擇配色方案：你可以自定義應(yīng)用的調(diào)色板，以適配你的品牌顏色。或者，你可以使用 Material Design 的調(diào)色板創(chuàng)建一個全新的配色方案。

使用顏色工具創(chuàng)建調(diào)色板，并在應(yīng)用中使用。確保應(yīng)用的顏色滿足無障礙標(biāo)準(zhǔn)，且元素之間有充分的對比度，

Material Theme Editor UI編輯器

在2018年5月份的 Google I/O 大會上，Google 設(shè)計團(tuán)隊一款叫做 Material Theme Editor 工具，可以幫助設(shè)計師輕松且快速創(chuàng)建符合自身品牌又符合 Material Design 風(fēng)格的應(yīng)用。

安裝插件后，在 Plugins — Material — Open Theme Editor 中打開。Material 組件庫：

2. iOS Colors

顏色定義

iOS人機(jī)規(guī)范顏色定義如下，為了便于對比，我將RGB格式的色塊都轉(zhuǎn)化為HSB，可以清楚地觀察到它的特點(diǎn)：

使用原則

使用顏色來進(jìn)行明智有效地溝通，對于重要信息的表現(xiàn)，顏色有非常重要的作用。比如說用戶警示的紅色。

在 app 中使用互補(bǔ)色。app中使用的顏色需要協(xié)調(diào)一致，不會互相沖突和干擾。選擇合適的顏色。

選擇一種顏色來表示功能的可交互性，并且區(qū)分可點(diǎn)擊和不可點(diǎn)擊不同狀態(tài)的顏色使用。

在 Note 中，可交互的元素是黃色的。在 Calendar 中，可交互的元素是紅色的。如果你定義了一種關(guān)鍵色用于傳遞可交互性，那么你要保證其它顏色不會與之沖突。比如在 app 中我們也通常用藍(lán)色來代表可跳轉(zhuǎn)。

考慮無障礙設(shè)計：關(guān)注色弱或者色盲用戶的顏色體驗，并且同時也要注意色彩之間的對比度。

在多種光線條件下測試你的 App 顏色：在不同的環(huán)境之下，app中呈現(xiàn)的顏色會受到外界光線的影響，所以要考慮你的 app 的多種使用場景，選擇舒適的，不會產(chǎn)生閱讀干擾的顏色來使用。

使用足夠的顏色對比度：在 App 中，過低的對比度會讓內(nèi)容難以閱讀。比如，圖標(biāo)和文本可能會和背景相融合。網(wǎng)上有顏色對比度計算器能夠幫助你精確的分析 App 中的顏色對比度，以確保它符合最佳標(biāo)準(zhǔn)。請確保你的 App 對比度至少達(dá)到4 : 5 : 1 ，但是7 : 1更好，因為它更符合嚴(yán)格的功能標(biāo)準(zhǔn)。

3. Ant Design Colors

1.0 Ant Design 色板

有意義的色彩：對顏色部分進(jìn)行了簡要的說明。

色彩在界面設(shè)計中的使用應(yīng)同時具備品牌識別性以及界面設(shè)計功能性。色彩是相當(dāng)感性的東西，設(shè)計中對色彩的運(yùn)用首要應(yīng)考慮到品牌層面的表達(dá)，另外很重要的一點(diǎn)是色彩的運(yùn)用應(yīng)達(dá)到信息傳遞，動作指引，交互反饋，或是強(qiáng)化和凸現(xiàn)某一個元素的目的。任何顏色的選取和使用應(yīng)該是有意義的。

Ant Design Colors：提供了一套調(diào)色板，并介紹了每種顏色的含義，色板由9種基本色彩組成，每種基本色又衍生出九宮格色板，在此基礎(chǔ)上還可以通過黑白疊加的方式實現(xiàn)色彩明暗的效果。

色彩與交互：提供了色彩在交互時的使用指南。顏色選擇上運(yùn)用了 tint and black 系統(tǒng)，通過顏色的不同階級來表現(xiàn)不同狀態(tài)。

△ tint/shade 色彩系統(tǒng)算法

選取一個主色作為5號色，將主色與純白色（#fff）混合，主色與純白色之間分成100份，20/40/60/80的位置分別分割，得到4/3/2/1號色。

將主色與純黑色（#000）混合，主色與純黑色之間分成100份，20/40/60/80的位置分別分割，得到6/7/8/9號色。

通過以上方式得到一條完整漸變色板。

色彩換算工具：

2.0 Ant Design 色板

使用原則：實用

不僅應(yīng)考慮品牌的識別性，還需達(dá)到信息傳遞、操作指引、交互反饋，或是強(qiáng)化和凸顯某一個元素的目的?；诓僮飨到y(tǒng)更注重高效、清晰等特點(diǎn)，Ant Design 的用色上更偏向?qū)嵱帽憬荨Ｔ谶x擇色彩時有以下三個注意點(diǎn)：

意義明確：色彩應(yīng)與產(chǎn)品定位相匹配，且符合用戶心理認(rèn)知；定義了品牌色，中性色以及功能色。

層次分明：為重要行動點(diǎn)或關(guān)鍵信息定義一個主色，并建立視覺連續(xù)性。

足夠?qū)Ρ榷龋鹤袷?WCAG 2.0 的標(biāo)準(zhǔn)，保證足夠的對比度，讓色彩更容易被視障（色盲）用戶識別。在由淺至深的色板里， 6格色彩單元格普遍滿足 WCAG 2.0的 4.5 : 1 最小對比度（AA 級），我們將其定義為色板的默認(rèn)品牌色。

色彩對比值校驗工具(https://contrast-ratio.com/#%23454545-on-%23fff)

算法升級

1.0的算法有個弊端，大自然中并沒有純白或者純黑的物體，所以顏色過渡不自然?；诖嘶A(chǔ)，并且和谷歌規(guī)范保持一致，選擇一個主色，在保持1.0的算法基礎(chǔ)上，再加入貝塞爾曲線。結(jié)合了色彩加白、加黑、加深，貝塞爾曲線，以及針對冷暖色的不同旋轉(zhuǎn)角度，得出2.0色板生成算法。使用者指定主色（和谷歌規(guī)范操作一致），便可導(dǎo)出一條完整的漸變色板。

3.0 Ant Design 色板

基于2.0版本的算法，過于復(fù)雜，且迭代算法也比較難更新，所以3.0的色板重新從輕量明確簡單的角度出發(fā)，重新調(diào)整算法。相對于第二版，增加了幾種主色，整個色板的飽和度更高，不再使用貝塞爾曲線。也更容易和開發(fā)團(tuán)隊溝通。

使用了HSV模型：此版本沒有繼續(xù)使用與某個淺色/深色值進(jìn)行混合的形式獲取漸變色板，而是直接用HSV模型的值進(jìn)行遞減/遞增得到完整漸變色板。

色彩體系：系統(tǒng)級色彩體系同樣源于「自然」的設(shè)計價值觀。設(shè)計師通過對自然場景的抽象捕捉，結(jié)合螞蟻的技術(shù)基因，形成了特有的12色。進(jìn)一步又通過大量的觀察，捕捉不同色彩在自然光下的變化規(guī)律，借助美術(shù)中素描的思路，對12個顏色進(jìn)行了衍生。在中性色板的定義上，則是平衡了可讀性、美感以及可用性得出的。

產(chǎn)品級色彩體系：同樣在品牌色，功能色和中性色進(jìn)行拓展和定義。

基礎(chǔ)色板：共計120個顏色，包含12個主色以及衍生色。

最后將 Ant Design 3個色板迭代的顏色整合在了一起，對比一下還是非常明顯的。很直觀的看出來算法之下顏色的變化之美。

4. kitchen 工具

一款為設(shè)計者提升工作效率的 Sketch 工具集。提供了各大官方精選色板庫，并且可輕松管理屬于你的色板庫。

介紹和下載地址：https://www.uisdc.com/sketch-plugin-kitchen

MIZ Colors

根據(jù)米莊多年來的品牌定位，以及目前米莊的擴(kuò)展業(yè)務(wù)需求，我們對米莊產(chǎn)品使用中的顏色進(jìn)行重新定義?；谖覀儺a(chǎn)品的關(guān)鍵詞：金融科技，安全可靠，專業(yè)智能，結(jié)合色彩工程學(xué)，賦予和諧的美感色彩。

1. 主色

顏色是有意義的。色彩的表達(dá)，需要符合用戶心理認(rèn)知。它包含兩個層面，第一個是品牌識別性，傳遞米莊品牌價值。最直觀的展示公司文化，以及 app 的特性。品牌色是體現(xiàn)產(chǎn)品特性和傳播理念最直觀的視覺元素之一。前期我們對關(guān)鍵詞進(jìn)行拆分，并且對每一個關(guān)鍵詞配對適合的顏色進(jìn)行性格心理解析，產(chǎn)出品牌色以及對應(yīng)的輔助色系。顏色規(guī)范中使用HSB（HSV）——通過色相/飽和度/亮度三要素來表達(dá)顏色。

目前的主色，也是我們米莊的品牌色。

HSB=20 100 100

2. 輔助色

我們不僅需要品牌色來傳遞品牌價值，我們還需要輔助色來組成我們產(chǎn)品體系的顏色搭配，實現(xiàn)不同功能點(diǎn)的視覺呈現(xiàn)。輔助色還起到中和品牌色的作用，根據(jù)不同的業(yè)務(wù)需求，結(jié)合不同的場景來呈現(xiàn)最佳視覺效果，減少用戶對于主色的視覺疲勞。對于輔助色的選擇，我們選取了類似色、互補(bǔ)色、中性色三種輔助色系。

同類色

同類色搭配原則：色環(huán)上相差15度之內(nèi)的色彩，非常舒適，色彩過渡自然，溫和，給予用戶安心，信任的心理預(yù)期。

并且于品牌色的色相冷暖性質(zhì)一致，和諧統(tǒng)一。

對比色和互補(bǔ)色

24色相環(huán)上相距120度到180度之間的兩種顏色。品牌色為暖色系，暖色系會產(chǎn)生熱情、明亮、活潑溫暖等感覺，而互補(bǔ)色是冷色系，冷色系會中和過度的暖色情緒，從而令人心情從洋溢回歸至平靜。漸而平穩(wěn)，安詳，天空之境之靜謐。所以我們也將紅色的對比色，以及黃色的互補(bǔ)色，來形成冷色調(diào)互補(bǔ)。輔助色紅色色相為H=5，取對比色綠色，相應(yīng)色相H為（H+120）；以及輔助色黃色的對比色藍(lán)色，H為215（H+18）。獲得以下兩個冷色調(diào)的輔助色：

校正輔助色

校正的原則一：色相差值不能超過15

近似色的選取，保證色相不超過15，保持統(tǒng)一的視覺體驗。

校正的原則二：盡量保持感官明度一致

可以從上圖看出，盡管保持了相同的飽和度和明度，色相不一致會導(dǎo)致在視覺上有不一樣的感官體驗。綠色的發(fā)光度比較亮，以及藍(lán)色就稍微偏暗一些。所以需要調(diào)整明度和飽和度，保持視覺感官一致性和相似的舒適程度。

中性色做輔助色

中性色作為輔助色，也是調(diào)和顏色視覺的一種。它本身不帶情感色彩，可中和其他任何顏色，自然界中沒有純黑或者純白的顏色，所以將純黑色降了純度，使之符合感覺舒適程度。中性色也常用于字體的使用，并且以不透明度的形式落地。

3. 調(diào)色板

確定好主色和輔助色后，我們需要建立調(diào)色板來拓展不同場景下的顏色運(yùn)用。既符合品牌傳遞，也需要通過不同顏色層級，來展示界面設(shè)計的功能性，進(jìn)行信息傳遞，動作指引，交互反饋，或是強(qiáng)化和突顯界面元素。同時，也通過顏色層級的變化，對產(chǎn)品交互層面做出改變。

同色系的明度、純度取值

既能體現(xiàn)我們的品牌形象，也能保持頁面的統(tǒng)一性。我們通過在顏色上面增加白色，或者增加黑色，來改變它的明度和飽和度，形成同色系的調(diào)色板。在色彩系統(tǒng)里，這種操作方式也叫做 Tints and shades 系統(tǒng)。tints 是指加入白色，減淡的意思；而 shade 是指加入黑色，加深的意思。

Tints and shades系統(tǒng)

為此，我們在 sketch 里根據(jù) tint 和 shade 系統(tǒng)的算法，將算法可視化，在 sketch 中建立了這個系統(tǒng)，方便每個顏色都在統(tǒng)一的規(guī)則里形成衍生色。從而形成不同顏色的調(diào)色條。

依照上圖，我們可以發(fā)現(xiàn)：

品牌色值點(diǎn)以左的線段，飽和度S以S0/5遞減，明度B以（100-B0）/5遞增；
品牌色值點(diǎn)以右的線段，飽和度S以（100-S0）/5遞增，明度B以B0/5遞減。

帶入我們的品牌色值HSB（20,100,100），可以得出我們想要的orange01（20,100,90），orange03（20,40,100），orange04（20,10,100）。

最后，結(jié)合 Ant Design2.0 中的計算工具校對，此 sketch 色板生成模版有效。

最終我們形成完整的調(diào)色板：

4. 色彩應(yīng)用

在色彩使用上，依據(jù)不同場景，我們也從以下三個方面，定義了米莊基礎(chǔ)用色。

品牌色

品牌色是體現(xiàn)產(chǎn)品特性和傳播理念最直觀的視覺元素之一。

功能色

主要應(yīng)用于消息通知、反饋提醒、表單校驗這類場景中的成功、出錯、失敗、提醒、鏈接等狀態(tài)。

中性色

關(guān)鍵內(nèi)容的襯托和功能的引導(dǎo)，主要體現(xiàn)在導(dǎo)航框架、背景底色、描邊，或次級操作等。

sketch色板

5. 使用規(guī)范

色彩識別

遵守 WCAG 2.0 的標(biāo)準(zhǔn)，保證足夠的對比度，讓色彩更容易被視障（色盲）用戶識別。

層次結(jié)構(gòu)

層次結(jié)構(gòu)是指根據(jù)重要性級別來組織內(nèi)容。顏色可以表達(dá)出一些內(nèi)容相對與其他內(nèi)容的重要性。

（參考校對工具：https://contrast-ratio.com/#%23454545-on-%23fff）

意義清晰

顏色可以用來表達(dá)屏幕中不同元素的含義。需注意使用中符合用戶認(rèn)知心理預(yù)期，減少歧義的產(chǎn)生。

上線復(fù)盤

1. 命名

如何正確命名顏色？使用顏色屬性和數(shù)字組合來表示，方便修改和更換。

2. 替換

讓開發(fā)將線上的所有顏色都發(fā)一遍，然后畫出色塊，再對照目前調(diào)色板的顏色進(jìn)行調(diào)整和修改。整體 app 更加輕量化以及溝通更順暢。

如何使用

作為一名現(xiàn)代社會中的設(shè)計師，我們的工作很多時候就是說服你的老板，你選擇的顏色是正確的。你可以準(zhǔn)備一個40頁的 ppt 來準(zhǔn)確的闡述計算邏輯。在這個陌生的數(shù)字化環(huán)境中，智能和科技讓一切都變得有可能，可預(yù)測，可驗證。

但是同時，也請大家保持對色彩的警惕。不要被工具所愚弄。我們能描述1700多萬種色彩，但這并不能代表什么。色彩的本質(zhì)是什么？目前還有很多群落在沒有色彩定義環(huán)境中生存著。色彩之所以有意義，是因為我們賦予了它意義。

當(dāng)下次，在眼睛離開電腦手機(jī)的時候，請花點(diǎn)時間留意你身邊的綠植，留意遠(yuǎn)處云朵的色彩，留意旅途中海洋的顏色，留意清晨的露珠和晚霞落日。然后問問自己，你看到了什么？

△ 圖片來源：https://dribbble.com/google

附件資源

總結(jié)回顧大綱：

作者：酒夏

原文：https://www.yuque.com/jiuxia/qek0el/ggh7ss

、認(rèn)識BOM模型

BOM：瀏覽器對象模型（Browser Object Model）

BOM提供了獨(dú)立于內(nèi)容的、可以與瀏覽器窗口進(jìn)行互動的對象結(jié)構(gòu)

BOM可實現(xiàn)功能

彈出新的瀏覽器窗口

移動、關(guān)閉瀏覽器窗口以及調(diào)整窗口的大小

頁面的前進(jìn)、后退

二、window中常用的屬性和方法

window對象的常用屬性

window.屬性名="屬性值"

屬性名稱說明

history 有關(guān)客戶訪問過的URL的信息

location 有關(guān)當(dāng)前 URL 的信息

示例

window.location.href="http://www.ynhxzy.cn" ;

history.back() 瀏覽器中的后退

history.forward() 瀏覽器中前進(jìn)

常用方法

方法名稱說明

prompt( )顯示可提示用戶輸入的對話框

alert( )顯示帶有一個提示信息和一個確定按鈕的警示框

confirm( )顯示一個帶有提示信息、確定和取消按鈕的對話框

close( )關(guān)閉瀏覽器窗口

open( )打開一個新的瀏覽器窗口，加載給定 URL 所指定的文檔

setTimeout( )在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達(dá)式

setInterval( )按照指定的周期（以毫秒計）來調(diào)用函數(shù)或表達(dá)式

注：

confirm()與alert ()、 prompt()區(qū)別

alert( )：一個參數(shù)，僅顯示警告對話框的消息，無返回值，不能對腳本產(chǎn)生任何改變

prompt( )：兩個參數(shù)，輸入對話框，用來提示用戶輸入一些信息，單擊“取消”按鈕則返回null，單擊“確定”按鈕則返回用戶輸入的值，常用于收集用戶關(guān)于特定問題而反饋的信息

confirm( )：一個參數(shù)，確認(rèn)對話框，顯示提示對話框的消息、“確定”按鈕和“取消”按鈕，單擊“確定”按鈕返回true，單擊“取消”按鈕返回false，因此與if-else語句搭配使用

三、Document對象的常用方法

名稱說明

getElementById()返回對擁有指定id的第一個對象的引用，對象的id唯一

getElementsByName()返回帶有指定名稱的對象的集合，相同name屬性

getElementsByTagName()返回帶有指定標(biāo)簽名的對象的集合，相同元素

write()向文檔寫文本、HTML表達(dá)式或JavaScript代碼

四、javaScript內(nèi)置對象

Array：用于在單獨(dú)的變量名中存儲一系列的值

String：用于支持對字符串的處理

Math：用于執(zhí)行常用的數(shù)學(xué)任務(wù)，它包含了若干個數(shù)字常量和函數(shù)

Date：用于操作日期和時間

示例1：點(diǎn)擊按鈕變換相應(yīng)顏色

<!DOCTYPE html>

<head>

<title>點(diǎn)擊按鈕切換顏色</title>

</head>

<style>

.container{

width: 500px;

margin: 50px auto;

}

</style>

<body>

<p>本次選擇的顏色是：<span id="color"></span></p>

</form>

</div>

</body>

function selColor(){

// 創(chuàng)建顏色值對象

var colorArray=new Array("紅色","黃色","藍(lán)色","綠色","橙色","青色","紫色");

var colorValue=new Array("red","yellow","blue","green","orange","cyan","purple");

// 獲取隨機(jī)數(shù)用來做數(shù)組下標(biāo)

var num=Math.ceil(Math.random()*7)-1;

//替換span標(biāo)簽里的內(nèi)容，同時設(shè)置css樣式

document.getElementById("color").innerText=colorArray[num];

// js動態(tài)改變html元素css樣式

document.getElementById("color").style.color=colorValue[num];

document.getElementById("color").style.fontWeight="700";

}

</script>

</html>

宙是由什么構(gòu)成的？我們可能會立即想到是原子或者更小的夸克和電子。的確，這些物質(zhì)結(jié)合在一起就會形成你、我、地球、恒星…… 但事實上，我們所熟悉的這些普通物質(zhì)僅僅只占據(jù)了宇宙的5%。那其余的95%是什么？其中約27%的東西被我們成為暗物質(zhì)，我們雖然無法觀測到它們，但可以通過它們所施加的引力來推斷它們的存在；剩余的68%是神秘的暗能量——它導(dǎo)致了宇宙的加速膨脹。

這樣的一個圖景，是由一個叫ΛCDM的宇宙學(xué)標(biāo)準(zhǔn)模型所描述的（Λ是宇宙學(xué)常數(shù)，CDM代表冷暗物質(zhì)）。這個模型是由過去幾十年所收集的大量數(shù)據(jù)所支撐的，從宇宙微波背景（CMB）到更加”局域“的觀測。后者包括超新星爆炸、星系團(tuán)以及暗物質(zhì)在遙遠(yuǎn)星系上留下的引力畸變，它們可被用于追溯宇宙歷史上近幾個時代的宇宙膨脹，時間跨度約為90億年。

通過歐洲航空局（ESA）的XMM-牛頓衛(wèi)星觀測到的大量遙遠(yuǎn)的活躍星系，一組天文學(xué)家發(fā)現(xiàn)，宇宙早期的膨脹可能比宇宙學(xué)標(biāo)準(zhǔn)模型預(yù)測的要多。在新的研究中，他們發(fā)現(xiàn)類星體或許可以拓寬觀測的時間跨度，這將天文學(xué)家對宇宙膨脹的測量推回到120億年前。

○ 類星體的藝術(shù)渲染圖。| 圖片來源：ESA–C. Carreau

類星體是一類非常明亮的活動星系核（AGN），在它們的核心是一個活躍的超大質(zhì)量黑洞，以非常快的速度吞噬周圍的物質(zhì)，釋放出跨越了整個電磁波譜的明亮光芒。當(dāng)物質(zhì)落在黑洞上時，它會形成一個輻射可見光和紫外光的旋轉(zhuǎn)圓盤；接著，這些釋放出的光會加熱周圍的電子，從而產(chǎn)生X射線。

三年前，研究人員Guido Risaliti和Elisabeta Lusso意識到，一個著名用于描述類星體的紫外線和X射線之間的亮度關(guān)系，可以用來計算一個天文學(xué)上非常棘手的問題——類星體的距離，從而可進(jìn)一步被用來探索宇宙的膨脹歷史。有一些天體的性質(zhì)，能使我們能夠測量它們的距離，這些天體被稱之為“標(biāo)準(zhǔn)燭光”。

○ 類星體可以被當(dāng)做標(biāo)準(zhǔn)燭光。| 圖片來源：NASA/ESA/Hubble

其中最值得提到的一類天體是Ia型超新星，它由白矮星在吸收了來自伴星的物質(zhì)后的壯觀消亡構(gòu)成，會產(chǎn)生亮度可預(yù)測的劇烈爆炸，從而使得天文學(xué)家能夠確定其距離。上世紀(jì)90年代末對這些超新星的觀測，揭示了宇宙在過去幾十億年間的加速膨脹。

Elisabeta解釋說：“使用類星體作為標(biāo)準(zhǔn)燭光有很大的潛力，因為與Ia型超新星相比，我們可以從更遠(yuǎn)的距離觀測到它們，因此可以用它們來探測宇宙史上的更早時期?！?/p>

現(xiàn)在，有了大量的類星體樣本之后，天文學(xué)家已經(jīng)能將他們的想法付諸實踐，而由此產(chǎn)生的結(jié)果非常有趣。

通過挖掘XMM-牛頓衛(wèi)星檔案中的數(shù)據(jù)，他們收集到了7000多個類星體的X射線數(shù)據(jù)，然后他們將這些數(shù)據(jù)與來自地面的斯隆數(shù)字巡天（SDSS）的紫外線觀測結(jié)合起來。他們還使用了一組由XMM-牛頓衛(wèi)星在2017年專門對非常遙遠(yuǎn)的類星體進(jìn)行觀測時所獲取的新數(shù)據(jù)，觀測到了它們在宇宙只有大約20億年時候的樣子。最后，他們還用其他天文臺觀測到的少量更遠(yuǎn)的類星體和一些相對較近的類星體對數(shù)據(jù)進(jìn)行了補(bǔ)充。

Risaliti說：“如此龐大的樣本足以使我們能夠細(xì)致地研究類星體輻射出的X射線和紫外線之間的關(guān)系，極大地改進(jìn)了我們估算其距離的技術(shù)?！?/p>

XMM-牛頓衛(wèi)星對遙遠(yuǎn)類星體進(jìn)行的新觀測獲得了非常出色的結(jié)果，他們甚至發(fā)現(xiàn)了兩種不同類型的類星體：70%的類星體會在低能的X射線波段釋放出明亮的光芒，而剩下的30%則釋放出少量高能的X射線。為了開展進(jìn)一步分析，他們只保留了較早的一組光源，那組光源中的X射線與紫外輻射的關(guān)系更加清晰。

歐洲航天局的科學(xué)家Norbert Schartel說：“能在離我們?nèi)绱诉b遠(yuǎn)的光源中分辨出如此細(xì)微的細(xì)節(jié)，是非常了不起的。這些光源的光在抵達(dá)我們之前已經(jīng)傳播了上百億年了?！?/p>

在瀏覽了這些數(shù)據(jù)后，他們將類星體的樣本縮小到了1600個，天文學(xué)家們得到了最好的觀測結(jié)果，從而能夠更可靠的估算這些類星體的距離，并用于探索宇宙的膨脹。

Lusso說：“當(dāng)把跨越了近120億年宇宙歷史的類星體樣本，與只覆蓋了過去80億年左右的Ia型超新星的局域樣本結(jié)合起來時，我們在重疊的時代中發(fā)現(xiàn)了相似的結(jié)果?！?/p>

○ 圖中顯示了天體（青色符號代表Ia型超新星；黃色、紅色和藍(lán)色符號代表類星體）距離的測量值，可以被用來研究宇宙的膨脹歷史。| 圖片來源：G. Risaliti & E. Lusso

“然而，對于更早期的宇宙階段，我們只能通過類星體來探測。結(jié)果發(fā)現(xiàn)我們觀測到的宇宙演化與我們根據(jù)標(biāo)準(zhǔn)宇宙模型所作出的預(yù)測之間存在差異。”

在類星體的幫助下，天文學(xué)家得以研究宇宙的這段在過去未能被充分探索的歷史時期，并揭示了宇宙學(xué)標(biāo)準(zhǔn)模型中可能存在問題，這意味著我們或許需要額外的參數(shù)來調(diào)和數(shù)據(jù)與理論之間的關(guān)系。

Risaliti說：“一個可能的解決方案是假設(shè)存在一種不斷演化的暗能量，這種暗能量的密度會隨著時間的推移而增加。”

另外，這個特殊的模型還將緩解另一個讓宇宙學(xué)家苦思冥想的問題，那就是哈勃常數(shù)！這個問題來源于從局域宇宙（基于超新星數(shù)據(jù)）估算出的哈勃常數(shù)與從星系團(tuán)（基于普朗克對CMB的觀測）所推測出的哈勃常數(shù)存在差異。（可進(jìn)一步閱讀：《宇宙學(xué)危機(jī)：無法統(tǒng)一的哈勃常數(shù)》）

Risaliti補(bǔ)充說：“這個模型非常有趣，因為它可能同時解決兩個難題，只是目前還沒有定論，在我們能夠解決這個宇宙難題之前，我們必須仔細(xì)研究更多的模型。”

研究人員希望在未來能觀測到更多的類星體，進(jìn)一步地完善他們的結(jié)果。此外，計劃于2022年發(fā)射的歐幾里得衛(wèi)星，將會在發(fā)射之后探索過去100億年的宇宙膨脹，并且研究暗能量的性質(zhì)。屆時，它將有望給我們帶來更多的線索。

參考來源：

https://phys.org/news/2019-01-galaxies-physics-cosmic-expansion.html

https://www.nature.com/articles/s41550-018-0657-z

在線咨詢

上一篇：JavaScript學(xué)習(xí)路線
下一篇：小學(xué)生追星“掃碼添加明星QQ”被騙90余萬元提供洗

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

超詳細(xì)，設(shè)計系統(tǒng)顏色規(guī)范的建立過程

您的項目需求

超詳細(xì)，設(shè)計系統(tǒng)顏色規(guī)范的建立過程