按鈕對於ui新手就是乙個簡單的長方形矩形，設計時會忽略按鈕設計要注意的細節，甚至標註時候遺漏一些需要標註的引數，導致開發產生偏差，視覺還原度不好。
按鈕在表面看的屬性從遠到近是顏色、形狀、字型，但是真正的按鈕屬性並不止這麼簡單的這三個屬性。
這裡我以標註乙個mdtrxp簡單按鈕為例，分析下按鈕應考慮的屬性。
由此可以推斷出按鈕的有六大屬性：顏色／形www.cppcns.com狀／字型／大小／投影／留白。
無論是幾個網際網路巨頭的設計規範，以及最近新出的谷歌規範，能看到關於元件部分，第乙個元件設計的就是按鈕。
在做標註時，我們經常就會忽略乙個最重要的使用規則，按鈕中的內間距，還有按鈕外間距，這決定了按鈕跟其他元素的合理距離。
在原子理論裡ui元件最基礎的元素從原子開始的。
按鈕就是最簡單的原子，通過按鈕的可繼承屬性（按鈕高度，按鈕圓角，按鈕文字字型大小等屬性）。為了排版布局的整齊和一致，其他原子（輸入框、單選多選框、搜尋條等）也會繼承這些屬性，因此按鈕在設計語言的元件設計中占有舉足輕重的地位。
因此當我們在設計語言中定義按鈕時，一定要思考這六大屬性，它不單純影響自己的呈現，還影響了其他原子的屬性。
了解按鈕設計的這六大屬性，我們就能設計好按鈕了麼？
當然沒這麼簡單，我歸納了三大設計原則，遵循設計原則，才能保證按鈕真正實現它的商業價值和使用者價值。
ui介面中如果需要使用者理解設計越長可用性就越差。設計必須在考慮把介面做得酷炫前，讓使用者知道按鈕是「可點選的」。
因此按鈕至少要考慮從形、色、字上建立識別為可點選的按鈕。
多種形狀按鈕 **dribble
形，按鈕遵循多數使用者習慣需要有個形狀，判別為可點選區域。歸納上面的例子，按鈕一般有以下幾種常見形狀。
以上各種形狀都可以運用到按鈕上，當然其他不一樣的形狀。
變形按鈕 **dribble
例如圓角矩形基礎上做適當的變化，按鈕屬性還是可識別的。
色，常見的app按鈕根據品牌主題色有著不同色彩。
漸變按鈕 **dribble
我們能發現除了單色填充按鈕顏色之外，還有漸變色填充按鈕的做法，這種方式也是能突出按鈕和引導使用者去點選。
字，作為按鈕的資訊引導，必須存在文字或圖形符號引導使用者互動，否則就不是按鈕。
文案會提示使用者如果點選他們獲得什麼收益，文案必須迅速吸引使用者的注意力並引導他們正確行動。
無論是什麼顏色什麼形狀的按鈕，必須有關鍵文字描述或者圖示解釋，就無法構成按鈕元素。
按鈕目的就是觸發點選，缺少點選語句引導，使用者根本理解不了這形狀是做什麼。
點選按鈕，一般會進行下一步、程式設計客棧確定、以及完成等等恰當的反饋，按鈕必須有反饋，不然使用者不知道互動成不成功，使用者總是期待得到反饋的。
在網上公開的各種設計語言中都能清晰，按鈕除了預設按鈕，還會有懸停狀態／點選狀態／不可點狀態的多種互動形式。
我們設計按鈕時不能只設計一種狀態，在交付給研發前要把常見的幾種互動都設計好。
多種功能按鈕 **dribble
分析現在常見的app設計，目前按鈕mdtrxp的點選後互動的反饋場景最常見的有以下幾種：
如果點選按鈕後無任何反饋，這就不是按鈕應該是資訊框，可互動是按鈕的設計原則之一。
按鈕的重要性體現在按www.cppcns.com鈕文字引導／按鈕大小／按鈕周圍留白以及按鈕所處的位置，按鈕數量的控制。
按鈕要設計合理，才能有良好的引導性，使用者才能正確明白按鈕的操作功能。
如果按鈕文字表達不清晰，使用者會誤解。
乙個引人注目的引導性按鈕通常足夠大，可快速找到，但又不能太大，以免影響干擾內容閱讀。
根據格塔式原理，親密性高低不同的元件，根據留白不同產生不同的關聯性。文案跟按鈕之間的間距適當縮小，能讓使用者明白他們之間關聯，讓按鈕區別與其他元件。
不論是網頁還是app，按鈕一般處在資訊正下方，或資訊右下方便於使用者的右手操作原則。
（1）如果按鈕過多，不分主次，使用者就會疑惑不知道如何操作
注意避免同飽和不同顏色的按鈕出現，乙個用填充顏色（重），乙個描邊顏色跟隨主要按鈕顏色（輕）。
（2）如果按鈕場景有特殊情況，就需要設計合適場景的按鈕
按鈕的操作是不可逆的操作應該賦予更多的視覺重量，使用者可能並不明白危害性而下意識操作，或者誤點了操作。
按鈕在不同背景下呈現情況不同，因此要考慮淺色按鈕樣式。
按鈕用色也要經過多場景的考驗，不是單純定乙個主色解決所有場景。
同樣存在不同使用場景中，按鈕要設計多種尺寸以適應不同的場景需求，小、中、大、特大等等。
設計趨勢隨時在變，按鈕的風格也時刻在變化，唯一不變的就是按鈕的六大屬性以及作者為大家總結的三大設計原則。
按鈕的設計是ui設計規範中最簡單的一環，但是同時也是最重要的一環。
希望各位大家在工作中學會鞏固自己的知識，以小見大，在追求不同的設計風格趨勢的同時，別忘了ui設計最基礎的基本功之一：保持風格的統一性，從乙個簡單的按鈕設計開始。
凌凌，***：我們的設計日記，前阿里資深視覺設計師，關注設計成長規劃和tob／c的產品設計
本文標題: 提公升按鈕設計體驗的三大設計原則
本文位址:
按鈕設計 成功的按鈕設計原則
按鈕設計 利用出色css3新屬性，我們可以建立一些令人驚奇的優雅和時尚的按鈕樣式，而不必像影象那樣虛張聲勢，並且可以為較舊的瀏覽器提供完全合適的後備樣式。您可能想直接在css中建立按鈕，或者可能想要使用自己選擇的布局工具，但是仔細考慮按鈕設計在上下文中的生活很重要。別人的按鈕很好，可以節省時間，但是...
設計體驗 按鈕上的內容
最近 ucdchiwww.cppcns.comna 以 注意介面上的文字 為主題寫了一系列的文章，使我在介面文字上的使用受益匪淺。之後，我對按鈕上的內容的表現也做了一些總結與分析，與大家分享並希望得到指正。很多人主張區別鏈結與按鈕。這裡，思域有一篇 關於滑鼠點選物件 哪些應該是按鈕，哪些應該是鏈結的...
設計模式 6大設計原則
目錄 1 單一職責原則 2 黎克特制替換原則 3 依賴倒轉原則 4 介面隔離原則 5 迪公尺特法則 6 開閉原則 7 合成 聚合復用原則 single responsibility principle 應該有且僅有乙個原因引起類的變更。乙個介面包含了兩個或多個職責，而且這兩個或多個職責的變化不相互影...