整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文中我們對CSS超炫加載動畫設計、實現與實例進行了講解與說明，通過學習可知使用CSS提供的animation屬性及偽元素等可以實現精美的CSS動畫效果的設計與開發。本文我們將繼續介紹CSS在Web頁面元素設計中的應用。
純CSS實現開關元素設計
本例我們使用CSS完成開關的設計，主要要求是在點擊開關時開關標識顏色需要改變，另外需要體現出元素點擊前與點擊后的動態變化與立體效果。本例最終設計呈現效果描述如下圖所示：
開關按鈕實現效果展示
要實現如上圖所示的開關按鈕效果，需要針對元素改變鼠標點擊前后的CSS樣式，因為只使用CSS實現，我們選擇本身具有點擊屬性的INPUT元素。因此還需要考慮對INPUT元素外觀進行設置，其設置也主要是依托于CSS選擇器及相關屬性的設置。
CSS選擇器及屬性設置
另一方面本例中出現的開關標志，主要使用第三方字體庫提供的圖標實現，因此需要對font相關屬性及CSS外部link方法有所學習掌握。本例所使用字體如下所示：
字體圖標
在明確基本思路之后，我們可以使用submine進行代碼編寫，主要編寫步驟如下：
1、鏈接字體樣式
本例使用如上圖所示提供的on圖標，即Font Awesome圖標字體庫和CSS框架，因此需要外部鏈接或者下載相應CSS文件，這里我們選擇外部鏈接，通過使用CSS提供的link，實現代碼如下：
字體鏈接
鏈接完成之后我們在設置字體時可直接使用FontAwesome字體，其中on圖標對應的編碼為f011。
2、定義頁面內容
本例頁面內容主要使用input元素checkbox屬性進行按鈕設置。因此頁面內容部分定義如下所示：
頁面主體部分
3、定義checkbox樣式
在完成頁面元素添加之后就需要對頁面元素進行CSS樣式的設置，本例通過元素加type屬性作為選擇器，選擇指定元素并進行樣式設置。代碼如下：
checkbox屬性設置
checkbox屬性設置描述如上圖所示，設置效果如下：
checkbox屬性效果
4、input添加checked、after等樣式
為進一步實現點擊效果切換及圖標按鈕的效果，需要對check狀態及after偽元素進行CSS樣式的設置。其中after為元素主要用于在上圖中添加on開關圖標。實現代碼描述如下：
after偽元素選擇器及樣式設置
after偽元素選擇器及樣式設置如上圖所示，主要完成content內容即on圖標設置，字體選擇、字體顏色及字體大小設置，設置完成預覽效果如下：
after為元素設置效果
要實現點擊效果就需要在點擊之后對input元素樣式進行設置，因此我們使用checked作為選擇器對該狀態下input樣式進行設置。設置代碼如下所示：
checked狀態CSS設置
checked狀態CSS設置如上圖所示，我們只對box-shadow陰影進行設置，通過陰影變化實現按鈕動態效果。
5、點擊之后on圖標顏色變化
點擊之后on圖標顏色變化主要通過對input[type="checkbox"]:checked，進一步使用after偽元素定義字體顏色實現。實現代碼如下所示：
on圖標（字體）顏色改變
通過使用該選擇器，會在input點擊之后，on字體顏色變為紅色。以上給出了input按鈕效果實現的基本思路與部分核心實現代碼。如需完整案例代碼請關注并私信作者。
本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可在評論區回復。更多程序設計相關教程及實例分享，期待大家關注與閱讀！
一天，領導丟過來個需求，要求改一下頁面上的一個按鈕。我想了想，按鈕簡單啊，很快就畫好發過去了，沒想到被領導打回來說不行!
我看著自己做的按鈕，一臉茫然，這個按鈕飽滿誘人還亮晶晶的，怎么就不行了呢?
是不是初入職場的你也遇到過類似的問題呢，今天我就針對UI設計中按鈕設計指南進行簡單說明，希望能幫助到大家。
一、按鈕的設計要點
1.1、按鈕的設計尺寸
根據 iOS 和 Android 給出的建議，在界面設計中，按鈕尺寸至少高于 5.5 毫米(36 pt)，否則用戶點擊時會較為困難;iOS 提出的44 pt，Android 提出 48/56 pt，都是用于特定場景下，具體情況還需具體分析;
按鈕尺寸一般有2種設計形式：
(1)按鈕長度固定，文字長度變化
(2)按鈕長度根據文字長短而變化，這種情況文字距離按鈕上下左右邊距一般成一定比例關系
1.2、按鈕的形狀樣式
(1)按鈕形狀：按鈕設計時，需要根據產品屬性和界面風格設計合適的形式，按鈕形狀主要有直角、小圓角、全圓角三種樣式。
直角按鈕：直角具有嚴謹、力量、高端的特點。適用于金融類、奢侈品類產品中，給人嚴謹安全、高端的感覺，符合產品調性。例如京東金融
小圓角按鈕：小圓角具有穩定、中性的感覺。適用于用戶跨度較大的常規類產品中，例如微信、滴滴。
全圓角按鈕：全圓角具有活潑、年輕、安全的特點。適用于兒童類、年輕化、娛樂類、購物類的產品中，具有親和力，拉近與用戶之間的距離。例如淘寶、京東、愛奇藝。
(2)按鈕樣式：按鈕樣式主要分為面形、線性、文字加圖標、文字按鈕等，視覺優先級：面性>線性>文字
1.3按鈕的狀態變化
在界面設計中需要考慮按鈕不同狀態的設計，從而提高用戶操作流暢度。移動端常用的按鈕可以分為正常狀態、按壓狀態、禁用狀態三種。
其中，正常狀態展示的是APP的主色;按壓狀態在正常態的基礎上疊加15%不透明度的黑色#000000蒙版;禁用狀態是設置灰色或者將正常狀態設置45%不透明度。
通過上圖的對比可以發現，都是不可點擊，純灰色按鈕更像是禁止且不會被可用的狀態。而使用品牌色，降低不透明度，可加強用戶對該產品按鈕的認知。且暗示用戶該按鈕滿足條件即可被點擊，所以個人覺得第二種方案會更合理。
另外，根據現在網絡速度的發達，按壓狀態慢慢被忽略。
1.4提供恰當的反饋
當用戶點擊按鈕時，UI設計中按鈕設計指南https://www.aaa-cg.com.cn/ui/2564.html?gpf他們希望界面有恰當的反饋。如果沒有任何反饋，用戶會以為系統沒有收到他們的操作，然后就會重復多次點擊。這種行為常常導致多個不必要的操作。
1.5多個按鈕位置擺放
從產品需求來說，要根據具體頁面的業務需求而定，比如設計一個彈窗的關閉按鈕，如果不希望用戶太快的關閉彈窗，最好放在相對邊緣的角落;如果希望用戶閱讀完內容后關閉，則應放置在內容結尾處，方便關閉。
總的來說，按鈕的位置要根據具體的需求來擺放，這里記住一點，根據用戶右手操作習慣，一般最重要的按鈕會放在最右邊，提高操作效率。
二、按鈕功能類型及使用
按鈕的功能類型往往決定了一個按鈕的設計方式是需要強調還是需要弱化;文案是需要強引導，還是直接闡述功能;按鈕上放不放圖標等。按鈕根據功能的不同，可以分為不同的類型，主要有行為召喚按鈕、懸浮按鈕、命令按鈕、開關按鈕等。
2.1.行為召喚按鈕
行為召喚(CTA)按鈕:通過設計誘導或激勵用戶點擊， 從而提高產品的轉化率。例如立即購買、訂閱關注、利益誘導等。
(1)誘導購買
當行為召喚的目的是誘導購買時，按鈕的設計從顏色、形狀、樣式上都需要突出。讓用戶進來第一眼就能知道該按鈕的用途。如下圖所示：
以餓了么為例，該按鈕的顏色采用綠色色塊，同時加入購物箱的元素，配上小紅點，能夠清晰的給用戶傳遞出可點擊部分有去結算、購物箱。另外加入價格誘導，讓你可直觀看到優惠了多少錢，促使你進一步操作。
以淘寶詳情為例，該按鈕是一個組合按鈕，由加入購物車和立即購買以及店鋪、客服、收藏組成，不管從顏色、形狀、樣式都能夠讓我們快速地注意到。
(2)訂閱關注
當行為召喚的目的是訂閱關注時，在設計時根據產品目的判斷是誘導用戶訂閱關注重要，還是讓用戶閱讀內容重要，來設計按鈕大小、樣式等，如下圖所示：
當訂閱關注重要時，按鈕的設計需要強化處理，當內容重要時，按鈕的設計需要弱化處理。
以大眾點評和圖蟲為例，大眾點評的頁面是以訂閱關注為主，所以按鈕加了描邊樣式，而圖蟲很明顯是以內容為主的界面，在設計時直接弱化了按鈕形式，讓按鈕和整個界面相融合，另外按鈕設計的原則是讓其看上去像按鈕，因此當按鈕只是文字時可以加圖標進行引導，也可以加入淺色背景進行突出。
2.2懸浮按鈕
懸按鈕浮是 Android 應用中最常見的一個控件。不過隨著Android和iOS規范的不斷融合，在iOS中也經常會看到各種各樣的懸浮按鈕。懸浮按鈕經常采用顯眼的顏色或加投影的方式來設計，以吸引用戶的注意力。如下圖所示：
以豆瓣和騰訊視頻為例，懸浮按鈕在頁面的右下角出現，和界面結合很容易看出是創建內容的意思。
2.3.命令按鈕
命令按鈕指該按鈕具有明確的指令，多出現在彈框中，一般分為一個文字命令或2個文字命令。其要求是文字語義要明確，同時根據用戶的操作習慣，一般遵循"左回退右行進"的設計原則。如下圖所示：
左圖是京東金融退出的確認頁面，將確定按鈕做了視覺突出，右圖是同程旅游訂單返回頁面，需要注意的是，這里將繼續預訂做了視覺突出并放在右側，跟我們平時習慣的左回退，右行進操作相反，我想這是因為這里的業務目標是想讓用戶繼續下單。
2.4.開關按鈕
開關按鈕也是我們很常見的一個組件。表示兩種相互對立的狀態間的切換，多用于表示功能的開啟和關閉。當按鈕開啟后可能還會帶來其他的相應操作。開關按鈕最常見的就是手機設置中，但是也有很多APP將其用到界面中使用。如下圖所示：
以同程旅游和驢媽媽為例，它們在提交訂單頁面時都采用了開關按鈕，這種開關按鈕還可以做點擊展開的操作來增加更多的功能內容。
三、總結
一、按鈕的設計要點：尺寸、形狀樣式、狀態變化、恰當的反饋、多個按鈕位置擺放
二、按鈕的功能類型：召喚按鈕、懸浮按鈕、命令按鈕、開關按鈕
好了，以上就是今天分享的內容，因此，您現在已經了解了與UI設計師的工作相關的主要技能。如果您想了解更多信息，請留言給我，我會給大家解答。
站和移動用戶應用程序設計范圍內的UI工具包是一組設計元素，例如：按鈕，導航欄，字段框，下拉菜單，復選框，單選按鈕，列布局，圖標，等等，通常采用分層PSD格式（Adobe Photoshop）。UI套件成為用戶界面設計人員在網站和移動應用程序上工作的主要彈藥。UI工具包可以節省時間，并為項目提供新的參考。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
