如何用一行代碼實現網頁變灰效果？

天是 2020 年 4 月 4 日，星期六，清明節。

我們的國家經歷了非常慘痛的時刻，很多英雄在救助他人的路上倒下，更有很多烈士英雄保衛人民的安危遇難，今天全國下降半旗，北京時間 10 點全國默哀三分鐘，來致敬英雄們。同時今天一切公共娛樂活動也都會停止，包括直播、綜藝、影視、游戲等等。

我在這里也向全國抗擊新冠肺炎疫情斗爭犧牲的烈士和逝世的同胞表達深切的哀悼，向所有抗戰在疫情前線的工作和醫護人員致敬。我們每一個人的平安面前，都是英雄的人墻。

網站變灰

今天大家可以看到很多很多網站包括主頁和內容也都已經變成了灰色，比如百度、B 站、愛奇藝、CSDN 等等。

CSDN

愛奇藝

百度

大家可以看到全站的內容都變成灰色了，包括按鈕、圖片等等。這時候我們可能會好奇這是怎么做到的呢？

有人會以為所有的內容都統一換了一個 CSS 樣式，圖片也全換成灰色的了，按鈕等樣式也統一換成了灰色樣式。但你想想這個成本也太高了，而且萬一某個控件忘記加灰色樣式了豈不是太突兀了。

其實，解決方案很簡單，只需要幾行代碼就能搞定了。

實現

我們選擇一個網站，比如 B 站吧，打開瀏覽器開發者工具。

審查一下網頁的源代碼，我們可以發現在 html 的這個地方多了一個疑似的 class，叫做 gray，gray 中文即灰色。

變灰效果

其 CSS 內容為：

html.gray {    
  -webkit-filter: grayscale(.95);
}

我們將其取消，就能發現網站的顏色就能重新還原回來了。

還原效果

果然是這個樣式在起作用，而且是全局的效果，因為它是作用在了 html 這個節點之上的。

另外看看 CSDN，它也是用的這個 CSS 樣式，其內容為：

html {    
  -webkit-filter: grayscale(100%);    
	-moz-filter: grayscale(100%);    
  -ms-filter: grayscale(100%);    
	-o-filter: grayscale(100%);    
  filter: grayscale(100%);    
	filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

這個實現看起來兼容性會更好一些。

因此我們可以確定，通過一個全局的 CSS 樣式就能將整個網站變成灰色效果。

分析

那么這里我們就來詳細了解一下這究竟是一個什么樣的 CSS 樣式。

這個樣式名叫做 filter，搜下 MDN 的官方介紹，其鏈接為：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter。

官方介紹內容如下：

filter CSS 屬性將模糊或顏色偏移等圖形效果應用于元素。濾鏡通常用于調整圖像，背景和邊框的渲染。
CSS 標準里包含了一些已實現預定義效果的函數。你也可以參考一個 SVG 濾鏡，通過一個 URL 鏈接到 SVG 濾鏡元素 (SVG filter element[1])。

其實就是一個濾鏡的意思。

官方有一個 Demo，可以看下效果，如圖所示。

Demo

比如這里通過 filter 樣式改變了圖片、顏色、模糊、對比度等等信息。

其所有用法示例如下：

/* URL to SVG filter */
filter: url("filters.svg#filter-id");
/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
/* Multiple filters */
filter: contrast(175%) brightness(3%);
/* Global values */
filter: inherit;
filter: initial;
filter: unset;

各個用法介紹大家可以參考官方的文檔說明：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

比如這里如果我們可以使用 blur 設置高斯模糊，用法如下：

filter: blur(radius)

給圖像設置高斯模糊。radius 一值設定高斯函數的標準差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果沒有設定值，則默認是 0；這個參數可設置絕對像素值，但不接受百分比值。

可以達成這樣的效果：

效果

再說回剛才的灰色圖像，這里其實就是設置了 grayscale，其用法如下：

filter: grayscale(percent)

將圖像轉換為灰度圖像。值定義轉換的比例。percent 值為 100% 則完全轉為灰度圖像，值為 0% 圖像無變化。值在 0% 到 100% 之間，則是效果的線性乘子。若未設置，值默認是 0。另外除了傳遞百分比，還可以傳遞浮點數，效果是一樣的。

如：

filter: grayscale(1)filter: grayscale(100%)

都可以將節點轉化為 100% 的灰度模式。

所以一切到這里就清楚了，如果我們想要把全站變成灰色，再考慮到各瀏覽器兼容寫法，可以參考下 CSDN 的寫法：

.gray {
  -webkit-filter: grayscale(100%);    
	-moz-filter: grayscale(100%);    
  -ms-filter: grayscale(100%);    
	-o-filter: grayscale(100%);    
  filter: grayscale(100%);    
	filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

這樣想要變灰的節點只需要加上 gray 這個 class 就好了，比如加到 html 節點上就可以全站變灰了。

最后呢，看一下瀏覽器對 filter 這個樣式的兼容性怎樣，如圖所示：

兼容性

這里我們看到，這里除了 IE，其他的 PC、手機端的瀏覽器都支持了，Firefox 的 PC、安卓端還單獨對 SVG 圖像加了支持，可以放心使用。

總結

本篇文章簡單介紹了一下今天觀察到的網站變灰的實現，也學習了 filter 的更詳細的用法，希望有幫助。

References

[1] SVG filter element: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter

家好，從本系列專題起，筆者將給大家聊聊關于設計方面的一些常識，你也許會很奇怪的問，前端工程師有必要了解設計相關的常識嗎？那我的答案就是十分有必要。因為我們這個工作崗位做的產品直接面向使用用戶，因此用戶直觀的感受決定著產品的好與壞，其中設計的展現就是給用戶的第一印象。為了保證產品的質量，你就避免不了和相關工作崗位的人直接溝通，比如產品經理，設計師，后端工程師等等。

為了更好還原設計師做的設計效果，設計師會不厭其煩的和你溝通，因為這也是他付出心血完成的作品，希望你能夠認真對待盡可能百分之百的還原。在溝通的過程中，如果你不懂設計師的設計語言（設計常用語），這樣你們的溝通成本會很高，甚至因為誤解，造成各種的不愉快，為了解決此問題，前端工程師們還是有必要了解一些設計常識，本系列專題筆者將帶著大家從色彩常識開始了解，本篇文章我將給大家介紹下什么是色彩的三屬性以及其在CSS中的應用。

色彩三屬性簡介

在網頁設計中，用到的設計素材主要有印刷品、拍攝的照片、掃描的圖片、網上搜索的素材。若要讓這些素材保持一致的色調，我們就必須要了解下組成這些素材的三要素：“色相”、“飽和度”、“明度”。

以前我也是聽設計師們給我經常嘮叨這些專業名詞，我也是似懂非懂的，只是從字面意思簡單理解，從沒有想過深入理解以及背后的原理和應用，從而造成了不必要的溝通成本。為了避免大家少走彎路，今天我特意把相關的基礎知識進行了梳理分享給大家。

1、色相

“色相”(或稱作色調)指的是紅色、藍色等各種顏色。“色相環”則是把各種顏色以環狀方式進行排列。這樣做的好處，除了直觀方便，其實還有對應的應用規則，由于文章篇幅有限，在稍后的專題文章里會有介紹，色環對設計工作者來說十分重要，是設計師常用的設計工具。

2、飽和度

“飽和度”指的是顏色的飽和程度。從字面上來說，你可以這么理解，比如你吃某一樣東西吃多了就會有飽腹感，換成色彩，就是用某種色很濃厚，會顯得這個色彩很飽滿。在拿個例子來說，比如同樣是紅色，但紅豆的紅色暗沉，這時候這種紅色則稱為“飽和度低”的紅色。飽和度是影響色彩的重要屬性，完全沒有飽和度的顏色稱為“無彩色”，這就是我們熟知的“黑、白、灰”。這些“無彩色”的一個重要功能就是與其它色彩保持平衡的重要作用，這是為啥大部分網頁選擇這些“無彩色”作為網頁背景的重要原因。

3、明度

“明度”（或稱作亮度）指的是顏色的明亮程度。原色的色相不同，明度也有所不同，如紅色的明度較低，而綠色的明度較高，雖然都是原色，但是明度的差距比較大，我們在使用的時候需要特別注意。此外我們需要注意，“無彩色”只有明度數值。

好了，接下來我們看看業界還用哪些模式來表示色彩。色彩三要素的概念，在RGB色彩模式(RGB色彩模式是工業界的一種顏色標準，是通過對紅(R)、綠(G)、藍(B)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色)或CMYK色彩模式(印刷四色模式是彩色印刷時采用的一種套色模式，利用色料的三原色混色原理，加上黑色油墨，共計四種顏色混合疊加，形成所謂“全彩印刷”。)中都能正常使用。而今天我們所說是HSB（Hue：色相、Saturation：飽和度、Brightness：明度）色彩模式能通過直接調整”色相“、”飽和度“、”明度“ 來調整顏色。

關于三屬性的相關圖示

為了讓大家直觀理解這三屬性，我做了相關的圖片，輔助大家進行理解。

1、如下圖所示，把飽和度最高的幾種顏色排列成色環，雖然他們的飽和度相同，但是按照色相不同，明度也會不同：

2、在色相、飽和度保持不變的情況下，我們來分別調整以下顏色的明亮，如下圖所示（明度從100%按照20%的數值逐漸遞減到20% ）：

注：不論任何顏色，只要明度降到最低都會變成黑色，而不同“無彩色”之間只有明度上的差異。

3、在 MAC 電腦中，具備可以直接編輯 HSB 顏色的調色板，能讓我們更容易的了解色相、飽和度和明度之間的關系，如下圖所示：

4、為了加深大家對色相環的理解，筆者做了一個小視頻，希望對大家有所幫助：

在 CSS 中應用色彩三要素—— HSL

說了這么多知識，我們如何在前段中進行應用呢？在 css3 中引入了一個表示色彩的新方法，例如 hsl(45,75%,50%)，類似我們今天講的色彩三要素，HSL顏色的寫法在現代瀏覽器中完全支持，你完全不用擔心，以前我們常用的十六進制表示方法 background-color：#21439c，或 rgb(10%,10%,50%) 這兩種方法，今天關于 HSL 這種新的寫法以還是值得你關注的：

從十六進制顏色轉換成 RGB 顏色很容易，但是轉換成 HSL 則不是這么容易
HSL不會提供很大的色域，它與十六進制和RGB顏色的范圍相同。

你也許會問例如 hsl(45,75%,50%) 這個括號里，三個數值代表什么意思，其實就是分別對應我剛才講過的色彩三屬性：色相、飽和度、明度。

首先我們來看下圖這個色相環，每種色相都是有其對應的度數值：

我們在來看hsl(45,75%,50%) 這里的第一個屬性，45其實就是表示這個色環45度對應的位置，就是黃色這個范圍；75% 就是這個黃色對應的飽和程度，50%表示的就是對應的顏色明度，為了讓大家對飽和度這個值的理解，對 hsl(45,X%,50%) 這個寫法在保證明色相、明度數值一樣的情況下，調整飽和度的值，你將會看到如下的效果：

接下來我們在看一個例子，在保持色相、飽和度數值不變的情況下，我們來調整明度，例如 hsl(90,100%,x%)，你會看到如下效果：

在 CSS 實際場景中的運用

既然在 CSS3 中我們中能夠運用類似 hsl(45,75%,50%) 這種方式來表示色彩的三要素，但是我們為什么要使用這方式，而不用我們習慣的RGB寫法或十六進制寫法表示顏色呢？下面是我舉例幾個應用場景：

1、網頁背景色還能在“亮”些嗎？

有時候客戶或老板，向你提出要求：“你的網頁背景色太暗，能否在亮些呢?“, 如果你使用的是 RGB 或十六進制表示顏色，如果要現場給他們調整來確認的話，估計有點麻煩。但是如果你是使用的 HSL 來表示顏色，那就恭喜你，你能很方便的現場進行調整，直到他們滿意為止，比如下面這個例子，老板說道：“你能不能讓橙色背景更亮些呢？“

原先我們的背景顏色是這么寫的：

然后我們就按照要求，調整最后一個明度屬性即可，是不是很簡單呢？

2、制作一個現代感十足的單選按鈕：

如下圖所示，我們要制作一個鏡像漸變的警示選擇按鈕，效果如下圖：

這里我們主要用到了徑向漸變的屬性（radial-gradient）和 hsla 這個相結合，代碼如下：

如果你不喜歡紅色，你可以很方便的進行調整為藍色，示例如下：

小節

今天的內容就分享到這里，希望你能喜歡此文章的內容，關于顏色這三屬性我做下簡單的總結，色相指的是“紅色”等顏色，飽和度指的是顏色的飽和程度，明度是顏色的明亮程度。接下來我們又學習了，這些屬性在 CSS 中的應用，如果你的項目不考慮 IE8 及以下版本的 IE 瀏覽器，你可以放心使用，用起來會很方便許多，調整顏色 So easy！

文：https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112
作者：Tess Gadd
翻譯：水手哥（公眾號ID:shuishouge_design）

按鈕在UI界面設計中是不可或缺的元素之一，這篇文章我們將介紹不同類型的按鈕包括按鈕的狀態和交互。我們介紹的都是日常界面中使用的普通按鈕，并不包括單選按鈕、選項卡、復選框等其他類型的按鈕。

按鈕的不同分類如下：

動作按鈕
常用按鈕樣式
按鈕的顏色和形狀
按鈕狀態和反饋
標簽按鈕
觸摸屏按鈕
按鈕的位置
系統按鈕
總結

動作按鈕

我們將分析按鈕的層次結構和它們通信的語言。雖然有些按鈕通熟易懂，但按鈕操作不取決于它們的外觀，而是取決于用戶的行為。

1_1.行為召喚（CTA / C2A）

在設計中行為召喚按鈕通常會提示用戶注冊/立即購買等。在產品設計中如果強烈建議用戶應該做的事情應該使用CTA按鈕。

行為召喚按鈕

對于CTA按鈕，我喜歡使用圓形按鈕，這樣會更引人注目。

1_2.主要操作按鈕

雖然CTA按鈕和主按鈕看起來相同，但我喜歡將它們分開。主按鈕應該是一個強大的視覺指示器，可以幫助用戶完成他們的旅程。主按鈕應該在用戶可能想要“下一步”、“完成”、“開始”等的情況下使用。

主要操作按鈕

對于主要操作，我喜歡使用實心按鈕。

1_3.次要操作按鈕

從“返回”的輔助按鈕到“下一步”的主按鈕，或從“編輯”的輔助按鈕到“保存”的主按鈕。輔助按鈕是我們為用戶提供的主要操作的備選方案。

主按鈕旁邊的輔助按鈕的兩種設計

我更傾向于使用線性按鈕或文本鏈接作為輔助按鈕。

1_4.三級按鈕

三級按鈕通常用于其他操作，可能暫時不是用戶想要做的事情。比如“添加朋友”、“掃一掃”、“編輯”或“刪除”之類的內容，前提是它們不是主要操作。

不同形式的三級按鈕

一般來說，人們會使用較小或較不突出的按鈕樣式。

常用按鈕樣式

下面我們將介紹常見的按鈕樣式，不同風格的按鈕樣式和他們的使用技巧。

2_1.實心按鈕

實心按鈕是帶有實心填充的按鈕。

一個實心按鈕

2_2.線性和幽靈按鈕

線性按鈕和實心按鈕正好相反，一個沒有填充的按鈕 – 只是一個輪廓。雖然經常互換使用，但我更喜歡將線性按鈕視為淺色（在白底下按鈕的輪廓和文本顏色深一點更明顯），將幽靈按鈕視為深色（在黑底下按鈕的輪廓和文本顏色淺一點更明顯）。

線性按鈕（左）和幽靈按鈕（右）

2_3.圓形按鈕

圓形按鈕其邊緣設置為最大圓角半徑。

圓形按鈕

2_4.FAB（懸浮按鈕）

懸浮按鈕是一種巧妙的設計模式，Google Material Design中更加受歡迎。雖然它們可能看起來像一個圖標按鈕，但實際上它們用在屏幕上的主要操作按鈕。

一個懸浮按鈕

如果您想了解有關FAB的更多信息，我建議您在Material Design的網站上查看( https://material.io/design/components/buttons-floating-action-button.html )

2_5.文字鏈接

文本鏈接是一種非常簡單的按鈕類型。有幾種不同的方式可以表明它是一個鏈接。它可以是顏色/下劃線/鏈接的文本，甚至就是文本本身（例如“閱讀更多”）。

文本鏈接的不同樣式

在顏色方面，大多數網站使用藍色，因為它是最容易識別的。為什么文本鏈接的顏色會使用藍色？它一直追溯到是萬維網的發明者，在他選擇顏色時發現藍色很酷的一種顏色，即使是色盲的人通常也能看到它。

2_6.帶圖標的標簽按鈕

圖標按鈕越來越受歡迎，一些按鈕仍然需要一個標簽來確保按鈕的語意明了。

帶圖標的標簽按鈕

處理圖標和標簽時最棘手的事情是弄清楚字體組合的圖標有多大。

方法1：讓圖標的大小對齊字體的頂線。

方法2：讓圖標的大小對齊字體的行高。需要注意的是確保圖標和字體的組合視覺均衡。

2_7.圖標按鈕

圖標按鈕沒有標簽，只是一個圖標。因為它們沒有標簽，所以它們在界面中節省了大量空間。圖標按鈕還可以將其他圖標按鈕一起排列在它們的小空間中。

圖標按鈕具有不同的風格

如果你在為計算機認知度較低的人群設計產品時，我建議使用帶標簽的按鈕 – 尤其是那些很抽象的語意。

2_8.帶圖標的文本鏈接

某些文本鏈接可能帶有圖標。這些通常不會在正文中使用。

各種帶圖標的文本鏈接

按鈕的顏色和形狀

在設計按鈕時，需要考慮以下幾個不同的元素。

3_1.顏色

在設計產品時，你應該要考慮有視覺障礙的人。為確保每個人都可以訪問你的顏色，你可以使用在線對比度檢查器。我使用的是那個。( https://accessible-colors.com/ )

不同顏色的按鈕

另外，在選擇顏色時應該考慮色彩心理學。紅色按鈕多用于刪除，黃色按鈕多用于警示等。

“刪除”、“警告”、“保存”和“更多”按鈕

3_2.邊界半徑

邊界半徑為按鈕提供了很多個性化設計。具有更圓半徑的按鈕看起來更有趣。

不同邊界半徑設置的按鈕

3_3.投影

按鈕上的投影使按鈕更加自然引人注意。陰影也可用于指示不同的狀態。 ( https://material.io/design/environment/elevation.html#depicting-elevation )

Material Design通過使按鈕在懸停狀態下來達到這個效果。

不同陰影設置的按鈕

3_4.標簽樣式

標簽樣式歸結為字體以及閱讀的容易程度。選擇字體時，請確保它清晰可辨。

不同標簽樣式的按鈕

以下是一些簡單的方法可以讓字體清晰易讀：

* 選擇大寫的標簽或大標題。（Material Design使用過帶有大寫標簽的按鈕。）

* 確保標簽顏色與按鈕填充對比較為突出。您可以使用( http://accessible-colors.com/ ) 查看。始終確保您的顏色符合AAA要求。

* 選擇字體時，請確保字體清晰。

3_5.垂直內間距

按鈕的大小對界面的可訪問性起著很大的作用。大多數沒有經驗的設計師會說“按鈕的高度應該是36像素”。如果你是為產品系統的設計按鈕。你應該采用所用字體的行高，并在其中添加一定單位的內間距。例如：“我的按鈕標簽的行高為20px，垂直內間距為8px”。

不同垂直內間距的按鈕

為什么會這樣設定呢？這里有兩個原因：

1）有視覺障礙的人可能會增大瀏覽器中的字體，因此他們需要更改字體大小而不會將按鈕高度定死。

2）這也是開發人員創建按鈕的方式-他們在DIV容器中添加內間距，而不是固定高度。

3_6.水平內間距

有兩種方法可以接近水平內間距。

第一個方法：

使按鈕寬度與網格對齊。這是保持所有按鈕長度一致的好方法。但是它限制了你可以使用的字體數量。

寬度由網格決定的按鈕

第二個方法：

兩側有固定內間距。我通常還會定按鈕最小寬度，雖然避免了很窄的按鈕，但是最小寬度按鈕可容納的不同字段會讓按鈕看上去不是很均勻。

寬度由內間距和標簽長度決定的按鈕

按鈕狀態和反饋

按鈕狀態讓用戶知道他們是否可以點擊、已經點擊或已成功點擊。按鈕還可以有重疊的狀態。例如可以同時是“點擊”和“懸停”狀態。

4_1.點擊和禁用狀態

點擊狀態就是鼠標可以點擊按下按鈕的狀態，當然如果用戶沒有完成必要的步驟，按鈕可以被禁用。例如用戶沒有輸入他們的姓名和電子郵件地址，他們就不能提交他們的詳細信息。

點擊和禁用按鈕

4_2.懸停和懸停離開（鼠標懸停和鼠標懸停離開）

在PC端按鈕應具有不同的狀態，讓用戶知道它是可點擊的。通常“懸停”狀態和“懸停離開”狀態相反，但也不一定。你應該有效的區分讓用戶感知鼠標懸停在某個按鈕上。

懸停演示按鈕

平板電腦和移動設備上永遠不會出現懸停狀態，因為你的手指無法“懸停”。如果您正在為應用程序進行設計，請不要擔心此狀態。

4_3.焦點

焦點狀態可能會讓用戶困惑。如果你的用戶專注度較差，他們可能需要使用選項卡式導航。用戶將點擊“選項卡”在網站上移動，從一個導航鏈接移動到下一個。這意味著按鈕需要有一個“焦點”狀態才能顯示它是“可點擊的或尚未點擊”。

默認的焦點狀態是藍色“發光”，幸運的是，我們生活在一個可以自定義按鈕狀態的時代。大多數設計師對懸停和焦點狀態使用相同的視覺提示。

兩個不同“焦點”狀態的例子

4_4.按下

按下狀態是當用戶的光標或手指“按住”按鈕時的狀態。當用戶將手指或光標“釋放”在按鈕上時，該按鈕會指示為“已點擊”。

“按下”狀態的按鈕

4_5.點擊

按鈕需要“點擊”狀態以向用戶指示它已被點擊。

“點擊”狀態的按鈕

按鈕標簽

按鈕標簽的訣竅是一致性。我們在產品設計前期需要制定按鈕標簽的規范，以避免以后花更多時間去改變你所有的按鈕標簽。

5_1.動詞的用法

大多數按鈕都包含指示按鈕將執行什么操作，例如“保存”、“發布”、“編輯”。雖然“back”和“next”不是動詞，但在接口上下文中，它們的工作方式似乎相同。我喜歡在編寫按鈕標簽時使用“動詞” “名詞”結構，這會讓操作更具規定性，例如“保存文章”等，而不是“保存”。

5_2.案例

你還應該決定使用哪種字體大小寫。以下是我使用的一些規范：

所有大寫字母，例如“NEXT SECTION”，我把它們用于更專業的平臺。Material Design使用所有大寫字母的按鈕。

標題框，例如“Next Section”，我傾向于避免使用標題大小寫，因為它不像句子大小寫那樣容易閱讀。就語調而言，我認為它介于“專業”和“會話”之間。

句子大小寫，例如“Next section”，我把它們用于更“友好”或“對話”的平臺。它更像是一句話，正常我們一句話結束會加一個句號，但是為了設計的美感，請不要加一個句號。

小寫，例如“next section”，小寫按鈕標簽使用頻率較低。

5_3.一致性

為按鈕編寫標簽時，請確保一致性。以下是一些我在項目使用的指導原則：

選擇字數：每個按鈕一個、兩個或多個字

選擇大小寫：句子大小寫，或大寫，或標題大小寫，或小寫

標簽結構：如“動詞” “名詞”，或“動詞”等。

觸摸屏按鈕

桌面按鈕大小調整（單擊）

因為桌面上的光標比觸摸屏上的手指小，所以您可以將按鈕縮小很多。

觸摸屏按鈕尺寸（點擊）

麻省理工學院觸摸實驗室的研究表明，人在使用觸摸屏時手指部分是8-10毫米，如果你想避免用戶手指觸摸錯誤，最小目標尺寸需要10毫米或更大。如上所述-我需要較大的按鈕。

那么，你應該做多大尺寸的按鈕呢？專家們說的是：

Material Design建議接觸目標應為48dp x 48dp，不同接觸點之間距為8dp。

雖然我找不到關于iOS設計系統目標尺寸的任何文檔，但一般的理解是，它的最小目標尺寸是44 x 44磅。

如果您在設計大小尺寸方面遇到困難，我強烈推薦Zac Dickerson關于易用性的故事。

按鈕位置

如果你非要放置2個按鈕，主按鈕應放在哪一側？

主要和次要按鈕的兩種不同立場

選項A顯示左側為主按鈕。它可能是用戶首先想要看到的，所以先顯示它。

選項B顯示右側為主按鈕。我們希望用戶首先看到輔助按鈕，方便他們繼續完成他們的旅程。右側的按鈕也表示繼續。

系統按鈕

這里會介紹一些很酷的設計原則和系統。我喜歡Material Design System的按鈕，因為他們的原理是經過深思熟慮的。

Material Design System的按鈕

Material Design 按鈕圖片

Material Design中介紹了按鈕的操作，以及按鈕如何與系統中的其他組件交互。我喜歡用戶在觸摸屏上使用按鈕的交互方式。

查看按鈕部分：

https://material.io/design/components/buttons.html

懸浮按鈕在這里查看：

https://material.io/design/components/buttons-floating-action-button.html

總結

如果沒有按鈕，你就不能真正構建界面；我們應該更多的關注它們。了解按鈕在界面中是如何設計的？怎樣正確的使用按鈕并為你的用戶提供最佳的體驗？

在線咨詢

上一篇：設置div高度等于動態寬度
下一篇：js和css基礎知識總結

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商