前端通用性設計——按鈕，人雲亦雲篇
標題寫成這樣，其實和“性”沒半點關係，只是看到S&S在摳摳空間寫了篇關於前端通用按鈕的日誌，我給他回了個“寫得這麼不專業…”，嗯，現在我要來看看我有多少本事，比他寫得更專業。
前端中的通用設計，到底是幹嘛的？其中，至重要的一點，就是設計師為了偷懶，其次，才是堂而皇之為了項目。那麼，既然是為了偷懶，那就來看看怎麼樣才能高效率的偷懶吧。
原理當然是要明白的，一個正常的按鈕，從點擊之前到點擊之前，這一過程從視覺上，至少會給人三個比較明顯的變化：什麼變化都沒有—>按鈕上的顏色變了（有可能形狀也會變，反正變色和變形都是變，咋就不管這麼多了）—->形狀變得和最初的形態不一樣了。<—這是完成一個點擊的過程，同時也是一個按鈕從視覺上產生變化的過程，還是先直接看圖吧。
點擊按鈕的視覺變化過程
好吧，這只是按鈕點擊時的視覺變化上的原理，和我要說的偷懶的事情，貌似沒啥關係。不管有沒有關係，我只是想先引出這張圖。
現在仔細看看這張圖裡的三個按鈕有什麼特點吧。嗯，看完後覺得，這三個按鈕的最大特點就是，沒什麼特點…囧rz。撇去那些亂七八糟的不說，這三個按鈕，都是定寬（如果按鈕上的字超級多怎麼辦？）、定高、有邊框、背景都可以做x軸平鋪，其中，能被我們利用來偷懶的兩個要素就是定高和背景可以做X軸平鋪。但是，我在這裡要說明一個問題，往往一個項目中，並不是一套按鈕用到老的，一般情況下，是在一個流程中的按鈕，才會具有高度的通用性和重用性，當然，設計師在設計的時候，如果有充分考慮過策劃檔上的說明，應該也可以做到整 個項目，至少80%（我隨口說的，非確定的數值）的按鈕可以重用。
基於上面重要的兩點，定高和背景可以做X軸平鋪，以及“按鈕上字超級多怎麼辦”這個問題，切圖的時候，應該心中有底，知道怎麼切才能更好的偷懶了吧？定高的通用按鈕，要解決的問題就是字很多的時候，寬度不夠用怎麼辦。前面提到了一點，按鈕的背景可以做X軸平鋪，這可是很關鍵的一點呢，沒有它就沒法實現字超級多寬度也要超級寬的需求了。先來看看，最常規的切法是怎麼切的吧。
切出來的button
這圖上，我是把邊框也一塊切了，這樣子，可以少寫幾行CSS，但是圖片也多了點，變成3*3個了；不帶邊切的話，只需要上圖中中間的那部分，圖片也就是1*3，但是你需要在CSS裡為按鈕的邊框做定義，最後應該怎麼實現，還是得看你自己了。
到這裡，圖片加工就告一段落。現在需要做的事情，就是在CSS裡整理出一個可以往死裡重用的class，關於這個，不需要我多說了吧？
看到這裡，各位看官可明白為啥要做通用按鈕了麼？不明白？真的不明白？好吧，那我把秘密告訴你噢，其實，我只是要把寫各種不同按鈕的時間省出來，然後就可以幹愛幹的事了—_.—
最後做一下總結，通用性的物件，往往都會比一次性的物件實現起來要麻煩得多，因為要考慮的問題不是針對一個問題，而是一類問題，這樣子你就要考慮到物件會在什麼狀況什麼情境下使用；另外，在實現通用物件的時候，盡量使用簡單的html結構，這至少會給你帶來兩個明顯的好處：你只需要維護少量的CSS和html，程式員知道物件應該怎麼用，而不會頻繁的找你問題。
偷懶已經成了習慣，我連代碼都不貼了，哈哈…故事至此結束，晚安，各位