製作Gmail式按鈕

阮一峰發表於2009-03-01
原文網址 : https://www.ruanyifeng.com/blog/2009/03/creating_gmail-like_buttons.html
AI

一個月前，Gmail重新設計了所有按鈕。

原來的按鈕是這樣的。

製作Gmail式按鈕

製作Gmail式按鈕

新設計的按鈕是這樣的。

製作Gmail式按鈕

事實上，不僅是Gmail，Google公司很多其他專案都在使用後一種風格的按鈕。

比如 Google Site。

製作Gmail式按鈕

再比如Picasa。

製作Gmail式按鈕

這種按鈕設計最大的特點，就是完全不使用背景圖片，是純粹的HTML+CSS。同時，它也不使用任何表單元素，目的是在不同瀏覽器下，爭取視覺效果的最大統一。

Google的工程師、設計者Douglas Bowman最近寫了篇文章，介紹了設計思路。但是，他最後沒有給出程式碼，只是說：

To see the final code we ended up using in Gmail and Reader, you'll have to reverse engineer the button code in one of those products.

如果你想看我們在Gmail和Google Reader中使用的最終程式碼，你必須自己對按鈕程式碼進行反向工程。

我對這個很有興趣，昨天晚上就真的去做反向工程了。由於Gmail的CSS檔案都是被壓縮過的，簡直無法讀，不過好在按鈕部分還沒有被壓縮，因此還算順利，就把程式碼提取出來了。

下面我就來介紹，如何製作Gmail式的按鈕。使用的全部都是Gmail中的實際程式碼。

請先看我製作的一個範例頁面。

製作Gmail式按鈕

第一步，按鈕的HTML程式碼如下：

<div class="goog-imageless-button goog-inline-block">
　　<div class="goog-inline-block goog-imageless-button-outer-box">
　　　　<div class="goog-inline-block goog-imageless-button-inner-box">
　　　　　　<div class="goog-imageless-button-pos">
　　　　　　　　<div class="goog-imageless-button-top-shadow"> </div>
　　　　　　　　<div class="goog-imageless-button-content">Button</div>
　　　　　　</div>
　　　　</div>
　　</div>
</div>

每個按鈕都是一個四層的盒狀結構，共包含6個div區塊。

第二步，將button.css檔案加入樣式表。

@import url("button.css");

這個時候，按鈕就應該可以正常顯示了。

第三步，做一些修飾工作。

你可以根據按鈕的不同情況，為前面HTML程式碼中第1個div區塊，新增相應的class。

i. 如果一個按鈕是主按鈕，那麼新增"goog-imageless-button-primary"。

ii. 如果一個按鈕不允許使用者使用，那麼新增"goog-imageless-button-disabled"。

iii. 如果好幾個按鈕組成一個"按鈕組"，就像範例中的Example 3，那麼最左邊的按鈕新增"goog-imageless-button-collapse-right"，最右邊的按鈕新增"goog-imageless-button-collapse-left"，中間的按鈕則是同時新增這兩個class。

iv. 如果一個按鈕保持選中狀態，那麼新增"goog-imageless-button-checked"。

第四步，用Javascript加入動作程式碼。我使用的庫是jQuery。

i. 加入滑鼠懸停效果。

　　$(".goog-imageless-button").hover(
　　　　function(){
　　　　　　if(!$(this).hasClass("goog-imageless-button-disabled")){
　　　　　　　　$(this).addClass("goog-imageless-button-hover");
　　　　　　}
　　　　},
　　　　function(){
　　　　　　if(!$(this).hasClass("goog-imageless-button-disabled")){
　　　　　　　　$(this).removeClass("goog-imageless-button-hover");
　　　　　　}
　　　　}
　　);

ii. 加入滑鼠點選的效果。

　　$(".goog-imageless-button").mousedown(
　　　　function(){
　　　　　　if(!$(this).hasClass("goog-imageless-button-disabled")){
　　　　　　　　$(this).addClass("goog-imageless-button-checked");
　　　　　　}
　　　　}
　　 ).mouseup(
　　　　function(){
　　　　　　if(!$(this).hasClass("goog-imageless-button-disabled")){
　　　　　　　　$(this).removeClass("goog-imageless-button-checked");
　　　　　　}
　　　　}
　　 );

iii. 加入focus和blur事件的程式碼。

$(".goog-imageless-button").focus(function(){$(this).addClass("goog-imageless-button-focused")});

$(".goog-imageless-button").blur(function(){$(this).removeClass("goog-imageless-button-focused")});

到了這一步，就算基本完成了。以後只要再針對按鈕的click或submit事件，寫入相應程式碼與伺服器端互動，就可以了。

最後，說一點我的看法。

雖然這種按鈕的視覺效果比較理想，有很多設計上的優點，但是侷限性也很大。一方面，它需要大量的冗餘程式碼，與語義網的原則相違背；另一方面，它太依賴Javascript和桌面環境，一旦使用者使用移動裝置或不支援Javascript的瀏覽器上網，那麼整張網頁的就完全失效了。所以，除非你開發的是針對桌面瀏覽器的網際網路應用程式，否則還是不要使用上面的設計方法，而是用Douglas Bowman提供的一種比較簡化的形式（需要背景圖片）。

（完）

相關文章