跨瀏覽器、陰影、圓角、可縮放的按鈕

此篇文章最近更新時間為2010-06-07 07:31:38 目前共有16篇留言

關於作者 - JosephJ

任職於 Faria。喜好戶外運動、2008 年 5 月完成「跑步環島」。對於新技術跟程式碼有著強烈的偏執狂。

元件化的概念!

最近花了很多時間,實作了未來所有網頁可共用的按鈕元件。很棒的一點是:產品部門也都同意往一致性、共用去規劃網頁。我們的終極目標都是:有朝一日可以「做新頁面、完全不用寫額外的 CSS 或切圖 」。這種元件化的概念必須要在公司初期就能夠導入,等到人多了、產品複雜了,到時要改變就會相對地困難。


陰影與圓角

Button Design Sample UED (User Experience Department、使用者經驗部門)所做出的第一份共用 Guideline 是每個頁面上幾乎都有的按鈕元件。每種按鈕的定位很清楚,不過另我頭大的是,每一種按鈕都有圓角與陰影... 在像是 Firefox、Google Chrome、Safari 等標準瀏覽器,都有 box-shadow 與 border-radius 這兩種 CSS 屬性可用、單一標籤就可以做完所有事情。

令人憎恨的 Internet Explorer

但,問題再度發生在令人頭疼的 Internet Explorer 上,一直到 8 都還沒有實作 box-shadow 與 border-radius。由於目前市場主流還是使用 IE 7 或 8,所以要求產品設計部門不能有這兩種效果也說不過去... 只能硬著頭皮做啦 XD

實作結果

所以我先暫時不管效能(HTML 與 CSS 的程式碼數量)的問題,先把我自己認為最棒的按鈕給實作出來,達到了以下的目標。

  • IE6 以外的主流瀏覽器都一致。
  • 整顆按鈕都可以點。
  • 有 link, hover, active, disabled 等效果 (IE 9 以前非 a 標籤需要 JavaScript 支援)。
  • 放大縮小(只縮放文字)不會破圖。
  • 背景顏色不同不需要重切。
  • 雖然樣式不太一樣,但 IE6 仍可以使用。

以下是幾個瀏覽器的截圖:

ie6 ie7 chrome ff3

這樣的結果,產品設計部門是很滿意的,因所有要求都達到了(連不需要管的 IE 6 也處理得很好)。但,身為一個龜毛的前端工程師,這樣的結果實在是令人很不滿意啊!!原因為何,看看下面的程式碼就知道了...

爆炸的 HTML Markup

下面還解說了,我每個標籤的用途為何。

<span class="miii-button">  
    <span class="miii-button-content miii-button-miii-button-core">  
        <span class="first-child">  
            <span class="text">  
                <span class="icon"></span>Lorem Ipsum is simply 
            </span>  
            <input type="submit" value="Lorem Ipsum is simply " disabled>  
        </span>  
        <span class="t"><span></span></span>  
        <span class="m"><span></span></span>  
        <span class="b"><span></span></span>  
    </span> 
</span>
  1. 最外層
    • 只有 .miii-button,因為按鈕有多種類型,需要有一種最通用的,再套用到其他的類型。
  2. 第二層
    • 第一個是 .miii-button-content
    • 第二個是按鈕類別 .miii-button-[type]: 不同的按鈕類別
    • 第三個是按鈕狀態 .miii-button-[state] : active, hover, disabled(IE 會以 JavaScript 產生,其他瀏覽器不處理)
    • 第四個也是按鈕狀態,但加上了按鈕類別 .miii-button-[type]-[state] (IE 會以 JavaScript 產生,其他瀏覽器不處理)
  3. 第三層
    • .text : 放置使用者會看到的文字與圖示
    • .icon : 保留給圖片放置的地方(單獨一個 Tag 比較好做 CSS Sprite)
    • a 或 input : 看不到,但是是使用者實際會點選的( Opacity = 100% )
    • span.t : 上層圓角及陰影
    • span.m : 中層圓角及陰影
    • span.b : 下層圓角及陰影

目前共有 7 種樣式,未經壓縮的 CSS 檔案大小為驚人的 9246 bytes

PHP Helpers

為了方便快速產生複雜的結構,所以也另外包了一個 Helper 方便快速產生

$button = button(array(
    "button" => "core",
    "name"   => "method",
    "value"  => "post",
    "label"  => "Input Button",
    "class"  => "save-button",
));

$button = button(array(
    "button" => "core",
    "href"   => "http://tw.yahoo.com",
    "label"  => "Link Button",
    "class"  => "yahoo-link",
));

如此一來,未來按鈕結構有變動就不需要一個個頁面去改了,其實還不錯!


有更好的解法嗎?

大家可以玩玩看:看看範例

見微知著,從小小的一顆 Button 就可以知道圓角及陰影的設計會帶來的問題,其他的共用元件(例如背景或 Div Module)的問題可能會更大,一是從程式面來解決,想看看讀到此篇的前端高手有沒有更好的解法?一是從設計面來解決,如果眾家好手都沒有一個很好的解法時,就必須跟產品設計溝通實作面的困難。

We are open to hear your advice!



Comments

  1. UniC Solution 2010-09-10 18:38:34
    請用 Sexy Buttons , 感謝你的分享
    我帶了一年的前後端開發團隊,對你的觀點都感到非常認同, 希望以後有機會繼續交流

    http://code.google.com/p/sexybuttons/

    Henry
  2. 裕波 2010-06-26 02:48:35
    to:Terry

    因为使用的是滑动门原理,这是必然的,但是如果避免这种情况,可以延长这个背景的长度。
    其实在一般情况下,使用合理的长度就ok了,一个按钮的长度不可能是无限的宽。
  3. Terry 2010-06-25 13:03:34
    範例似乎在文字過長的時候會變成兩個按鈕
  4. 裕波 2010-06-24 17:11:39
    我在这里等Hope
  5. 裕波 2010-06-24 13:00:02
    Hope,在吗?

    上次你谈到了魔鬼往往在细节里。
    那如果照你这样说,在web设计中,就没有渐进式、过渡式的概念了?

    设计师是否可以考虑过渡式与渐进式的设计呢?
  6. Awoo~ 2010-06-13 11:04:10
    h:

    太棒了~~
    看起來是個很不錯的解法 :D
    來實作看看有沒有問題!
  7. 裕波 2010-06-12 00:23:50
    to Hope

    我还真听到有设计师有这样说过。或者说他们只是为了跟风,因为现在有很多网站都是圆角的,所以他们也设计成圆角的。

    嗯,你的解释非常的到位,如果每一个设计师都像你这样去思考的话,我想世界也就很美好了!
  8. Hope 2010-06-11 23:43:01
    To 裕波 :

    的确需要考虑成本的问题来衡量要不要满足所有的需求。但如果网站传达的概念和使用的氛围是透过圆、圆角,这样的概念来表达,而IE又是目前大多用户使用的浏览器,那么这个网站要传达的氛围就只能让少数的人感受到了 :)

    圆角、直角的设计只是几个pixel的差别,但魔鬼往往在细节里。或许视觉设计师透过圆角想要表达的是软性、是较有情感的诉求,或是较活泼的氛围。这和直角展现简约、利落、理性,带给人的感受会有所不同。


    假使今天问视觉设计师说为什么要使用圆角,他回答你:我觉得这样比较漂亮。

    那就把他拖出去斩了 :P
  9. Hope 2010-06-11 23:39:48
    To Awoo :

    是的,用这些效果假使没有利基点和背后的精神,都只会沦为个人审美的主观意见。例如像苹果的网站也是采用圆角的设计,带给人的视觉感受是和雅虎不同的。不过的确如果开发网站花了80%的时间在解决这个问题上才能达到规格上的要求,那的确是本末倒置。如果是这样就要应该和视觉设计师和网站企划人员一起坐下来讨论其他较为可行的方式,针对效能、无障碍设计、日后的维护性妥协,彼此都多为对方想一步。或许多于产品经理来说他设定的网站目标族群比较不需要无障碍设技,那么就可以日后再针对无障碍设计去修正,一样是80 20 法则。
  10. h 2010-06-11 14:15:56
    awoo 有玩過下面這個東西嗎???

    http://fetchak.com/ie-css3/
  11. 裕波 2010-06-09 23:07:11
    to Hope

    整体视觉计划,正如Awoo所说的,有时候也需要考虑成本问题,是否对ie浏览进行规划直角的整体视觉计划,而对于其他浏览器使用圆角的整体视觉计划呢?
  12. Awoo~ 2010-06-08 10:44:55
    Hope:

    你剛好點到一個我沒注意到的點
    「整體視覺規劃」:其實我也很需要了解要用這些效果的理由才是
    目前的環境(大部分是 IE),實作圓角跟陰影花的工實在很多
    所以看到像 Yahoo! 美國首頁是完全沒有陰影的、保留少數幾個圓角
    要做所有人都可以使用的介面、其實視覺規劃也必須去跟現實情況妥協才是
  13. Awoo~ 2010-06-08 10:27:00
    Tsung:

    用程式產生圖片按鈕可能會有的問題:
    1. 沒辦法做文字縮放 => 無障礙的妥協
    2. 不支援 No Image => 無障礙的妥協
    3. 多國語系的問題 => 維護性的妥協
    4. 即時產生的圖檔放在 Local Host、而非 CDN 上 => 效能的妥協
    5. input image 做送出會造成表單送出處理不易 => 開發上的妥協

    把單一圖片當背景可能會有的問題:
    1. 字型縮放造成的破版 => 無障礙的妥協
    2. 沒辦法因應字數不一或背景色的不同處理 => 維護性的妥協

    妥協是 okay 的,就要看哪些妥協是產品與開發都可以接受的
  14. Hope 2010-06-08 00:21:43
    To 裕波 :

    没来由的使用圆角按钮或许是没有必要,但圆角有时候是整体视觉计划的一部分,不只是为了"漂亮"而已 :)

    Anyway, Joseph did a good job !
  15. Tsung 2010-06-08 00:15:03
    既然是未來全部都共用的, 就應該要用最簡單的方法解決.
    為何不將圓角、陰影 整個直接做成圖片?
    然後那圖片, 由程式產生, 一樣可以維持一致性, 上面想擺什麼文字, 想要直接用程式生出來, 或當背景圖用(於 HTML 寫), 都可以輕鬆達成.
  16. 裕波 2010-06-07 21:34:01
    设计师真的有能力的话,而不是靠圆角吸引住用户。。那怕没有圆角,也一样漂亮
暱稱: 必填。
Email: 非必填。若填寫為不公開欄位,僅供站長參考聯繫。
內容: 必填。限 255 個字元以內。
驗證碼:
送出

Facebook Comment