按鈕設計
利用出色css3新屬性，我們可以建立一些令人驚奇的優雅和時尚的按鈕樣式，而不必像影象那樣虛張聲勢，並且可以為較舊的瀏覽器提供完全合適的後備樣式。 您可能想直接在css中建立按鈕，或者可能想要使用自己選擇的布局工具，但是仔細考慮按鈕設計在上下文中的生活很重要。
**別人的按鈕很好，可以節省時間，但是花一點時間來更詳細地了解（或別人的）按鈕的設計和組成也沒有什麼害處。 他們是如何設計的？ 它們適合介面/上下文/品牌嗎？ 有機會創造獨特的東西嗎？ 我的按鈕夠顯眼嗎？ 我需要主按鈕，副按鈕，**按鈕嗎？ 它們之間是否有足夠的區別？ 它們看起來光滑嗎？ （為什麼不，我們每個人都想設計看起來很酷的東西，對嗎？！）。
這是我在設計按鈕時經常想到的十件事。 我不會分享有關如何在photoshop中使用圖層效果的想法，而是分享一些簡單的常規設計原則，這些原則對於優化按鈕和其他ui的設計大有幫助。
重要的是您的按鈕必須與它們的上下文樣式相匹配。 這可能意味著要適合調色盤，圖形樣式或從某種形式的品牌指南或徽標中搶占先機。 也許有一些突出的形狀，紋理或設計樣式可供您選擇。 徽標可能具有圓形的外觀，您可以在按鈕中或其他可能的號召性用語中進行選擇。
從上方繼續，稍等片刻，然後再開啟「 ui elements psd」。 容易找到漸變色，陰影，斜角等，但花點時間思考一下，不僅是匹配品牌的正確選擇，還是按鈕所在的介面以及是否需要過分「扣子」的選擇都是正確的選擇。
例如，在應用程式內和在移動裝置上，按鈕可能需要感覺特別像按鈕，但是在**上，可能仍有空間可以對按鈕或號召性用語進行一些不同的操作。
從上面繼續，如果您的設計中還有很多其他圓角ui元素，請考慮使用圓形末端的按鈕或其他形狀的更改。 這可以給您帶來額外的對比，從而確保您的重要行動呼籲具有他們可能需要的突出地位。
如果您正在尋求作業系統啟發的樣式，或者正在使用預設計的元素psd，則您的ui元素很可能主要是圓角矩形。 考慮減少對那些可以減輕「鈕扣」感的元素的修飾程度。
例如，定製選擇選單，分段控制項，自定義選單觸發器可能都具有相同的圓角形狀，但是使用較少的陰影，邊框，斜角，漸變或其他效果可以幫助減少其豐富度，進而提公升按鈕樣式。
我們在那裡看到的大多數按鈕上都有某種形式的邊框或筆觸。 寬鬆地說，如果您的按鈕比它所位於的背景暗，則使用常規按鈕顏色的深色筆觸。 如果相反，則選擇背景顏色較深的筆觸。 如果您堅持使用前者，並在較暗的背景上使用它，我會發現它會使按鈕邊緣有些「髒」。 使用後者也可以使按鈕真正彈出。 在處理網頁設計中的筆觸/邊框時，我認為這是一般設計原則。
多年來，我一直宣誓效法「影子法」。 「陰影定律」規定，當元素比其背景淺時，陰影效果最好。 如果元素比其背景暗，則應非常巧妙地使用陰影。 類似於顏色匹配的筆觸和邊框，我非常認為這是適用於所有ui元素的通用設計原則。
除了可以使您的按鈕與相似的ui元素進一步區分的另乙個小細節之外，使用簡單的圖示元素（例如箭頭）還可以使使用者產生一定的操作感，並且對使用者單擊時會發生的情況有所保留 。
例如，在按鈕上的文字後面緊緊指向的箭頭可能會給使用者帶來前進或離開頁面的感覺。 向下的箭頭可能表明某些內容將在下面逐步披露，或者可能會開啟某種選單。
如果您正在設計乙個介面，其中始終顯示許多動作和功能，那麼通過建立主要，次要，第三種以及可能更多的樣式來用按鈕建立某種視覺語言可能很重要。
考慮為主要按鈕保留最強和最粗體的顏色，並在降低重要性時逐漸減少強度或飽和度。 除了顏色和陰影外，還應考慮減小大小，空格，文字大小和修飾級別，以進一步減輕非主要按鈕的視覺重量。
的確，這確實是不費吹灰之力，但是在設計過程的最後往往會考慮這一點。 始終通過按鈕所需的核心狀態進行工作，以確保它們在上下文中為使用者提供足夠的反饋。 當使用者通過按鈕的各種狀態使用按鈕時，他們可能會對按鈕在現實世界中的工作方式有乙個心理模型。 一些帶有陰影，邊框和漸變之類的簡單css調整可以為使用者提供一些簡單的反饋，並給人以驚喜的感覺！
重複使用或依靠預先設計的樣式和ui元素沒有任何危害，它們顯然可以節省大量時間。 甚至可能有人完全按照畫素的要求精心製作了您想要的東西，並且免費提供了它。 但是，我認為對正在建立的內容以及未來的設計決策背後的設計過程和craft.io進行更深入的了解不會有任何危害。
翻譯自:按鈕設計
提公升按鈕設計體驗的三大設計原則
按鈕對於ui新手就是乙個簡單的長方形矩形，設計時會忽略按鈕設計要注意的細節，甚至標註時候遺漏一些需要標註的引數，導致開發產生偏差，視覺還原度不好。按鈕在表面看的屬性從遠到近是顏色 形狀 字型，但是真正的按鈕屬性並不止這麼簡單的這三個屬性。這裡我以標註乙個mdtrxp簡單按鈕為例，分析下按鈕應考慮的屬...
button按鈕常用樣式設計
button按鈕常用樣式設計 一 按鈕 二 按鈕巢狀 ok三 新增物件 新增物件 按鈕的擴大 按鈕上加字 按鈕字 按鈕上加圖 按鈕上移動物件 移動物件 按鈕上加水平線 按鈕中的分組框 分組框halo 按鈕中的框架 瀏覽器不支援嵌入式框架，或被配置為不顯示 嵌入式框架。按鈕中的flash 按鈕中的 3...
設計體驗 按鈕上的內容
最近 ucdchiwww.cppcns.comna 以 注意介面上的文字 為主題寫了一系列的文章，使我在介面文字上的使用受益匪淺。之後，我對按鈕上的內容的表現也做了一些總結與分析，與大家分享並希望得到指正。很多人主張區別鏈結與按鈕。這裡，思域有一篇 關於滑鼠點選物件 哪些應該是按鈕，哪些應該是鏈結的...