一、一個按鈕背後的故事

接著上節關於前端常見的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貌似失效了 。效果請點選。）

那麼此時或許你會又丟擲一個疑問，

    二、將一個按鈕按PS圖層的概念來進行分層，通過面向物件程式設計思維設計

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

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

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

如下圖所示

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

然後將這些構成這個按鈕的組成部分，通過按照面向物件（抽象類、實現類）的程式設計思維方式，可能設計如下：

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

作者：Avenstar

出處：https://www.cnblogs.com/zjf-1992/p/10201587.html

關於作者：專注於WEB前端開發、知識管理提高學習效率、執行效率

本文版權歸作者所有,轉載請標明原文連結

如果您覺得我的文章對您有用，請隨意打賞。

微信打賞

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