一個按鈕背後的故事

    1、一個按鈕背後的故事

接着上節關於前端常見的2種開發模式結尾，試着來理解看似一個平淡、簡潔、漂亮UI設計(UI Design)的按鈕背後的一些故事。。。。。。

一般狀況下，前端應該都熟知，用戶瀏覽一個網頁或者這裏一個按鈕站在用戶的角度來看一般是平面的（好像只存在x、y軸 以下）

 

 

但本質上是三維的（或者說存在x軸、y軸、z軸）主要取決於用戶看網頁的視角，比如生活中咱們看到三維建築的立體牆面站得越遠，越感受他是平面的，其實是三維的。

你或許會問？如何證實一個按鈕是三維的呢？請接着繼續往下看哈。。。

A.正常狀況下一般是這樣的（以下圖所示）效果請點擊，

 

B.將一個按鈕元素繞x軸旋轉45度後以下，效果請點擊

 

C.將一個按鈕元素繞x軸旋轉45度後,父級元素設置成 perspective 透視(眼睛看物體是呈現的方式近大遠小的效果)值爲100後以下 效果請點擊：

（標註：css3 perspective 屬性定義 3D 元素距視圖的距離，以像素計。該屬性容許您改變 3D 元素查看 3D 元素的視圖。

當爲父元素定義 perspective 屬性時，其子元素會得到透視效果，而不是元素自己。）

 

綜上ABC三點充分得出一個結論： 一個按鈕（或說用戶瀏覽的網頁按鈕）是立體的（或說是三維的)。 而不是平面（或說不是二維的）。

（標註：記得有一次一個生成的header網頁頭部明明positon屬性值設置絕對定位 fixed後（positon:fixed相對於瀏覽器窗口定位），拖動滾動條後和正常元素同樣不見了，感受fixed貌似失效了。

用三維座標知識點來理解  fixed仍然是生效的，只是父級元素body設置成 perspective:100; -webkit-perspective:100; /* Safari and Chrome */ 不在用戶的視野中了，因此感受fixed貌似失效了 。效果請點擊。）

那麼此時或許你會又拋出一個疑問，既然一個按鈕（或說用戶瀏覽的網頁按鈕）是立體的 （注：CSS著名層疊模型也能很好說明按鈕是立體的，這裏再也不贅述）。那麼究竟構成立體元素是什麼呢？請接着繼續往下看。。。

    2、將一個按鈕按PS圖層的概念來進行分層，經過面向對象編程思惟設計

 以上第一點說明一個按鈕是三維的（或者說立體的），經過可視化（可視化指眼睛可以看到的）那構成這個按鈕元素有哪些呢？

大概分析一下，得出通用的共性，簡單羅列大體以下：

1、一個按鈕存在寬高（就像一個盒子同樣）
2、存在描述這個按鈕功能的文本（如：登陸、狀態切換等）
3、有通用事件 （如點擊事件、鼠標滑過【移入、移除等效果】）
4、按鈕設計尺寸與網頁瀏覽尺寸的轉換計算
5、瀏覽按鈕適配效果
6、豐富多彩、多樣化的按鈕 
7、......

以下圖所示

 

經過以上大概就知道，——— 一個立體按鈕構成組成部分 。

而後將這些構成這個按鈕的組成部分，經過按照面向對象（抽象類、實現類）的編程思惟方式，可能設計以下：

這種設計模式實現UI組件最大的好處就是組件之間能夠自由組合、靈活而敏捷，具備很強的可遷移性 。缺點是起初開發速度較慢~。。。ps

   

做者：Avenstar

出處：http://www.javashuo.com/article/p-kperkbbe-mu.html

關於做者：專一於WEB前端開發、知識管理提升學習效率、執行效率

本文版權歸做者全部,轉載請標明原文連接

若是您以爲個人文章對您有用，請隨意打賞。

微信打賞

https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/