2015年4月2日 星期四

解讀 Material Design(本質設計) 引領的 UI 設計趨勢















Google I/O大會發佈了Android L並推出Material Design,重新統一了Google的設計語言,確立了未來Google的設計方向。那麼,什麼是Material Design?我簡單地將它翻譯成“本質設計”。顧名思義,這是一種考慮事物本質的設計,將電子螢幕裡的UI元素看成是一種不存在於現實世界的新的材質, 並賦予它物理特性。因此Material Design並不是去擬物化的設計。許多設計師把扁平化與擬物化對立起來,其實兩者並不是對立關係。但我更願意稱Google新的設計語言為抽象化。
無論是蘋果的設計語言,還是Google的設計語言,乃至於Windows的Modern UI 和Facebook的Paper設計語言,大方向都是一致的,而在細節上卻分道揚鑣。蘋果與Google幾乎壟斷了移動設備的操作系統,因此我們談談從新 發佈的Material Design中看看有哪些無線設備的設計趨勢。

1.紙的形態模擬







前言已提到Material Design並不是一種去擬物的設計,也不是一種強調擬物的設計。我們知道電子螢幕是完全平面化的,不像現實當中的物體是3D的, 。一本書裡每一頁紙之間的空間關係是很清楚的,但電子螢幕的所有物體都在一個平面上。雖然電子螢幕沒有空間感,但訊息內容是有空間層級的關係。而 Material Design的解決方式就是把現實世界中紙張的特性挪到電子螢幕裡,把訊息內容呈現在這個虛擬的紙上,紙(訊息內容)跟紙之間有上下層級關係,用投影模擬紙張的空間感。Material Design的投影並不是過去我們常用的使用圖片或者樣式代碼實現的投影,而是系統根據紙張層級所在位置實時渲染的,投影會隨着紙張的空間關係而改變大 小。
Google幾年前推行的Card設計就是模擬紙張物理形態的一種設計方式,但Material Design把它提升到了系統訊息架構層面的高度。
另外,iOS的模糊效果從本質上來說與Material Design的紙張設計要解決的問題是同樣的。通過模擬景深的效果來表達內容訊息的層級關係

2. 轉場動畫



過去我們的頁面只有X與Y軸,打開一個新的頁面則是生硬地直接跳轉到新的頁面,並沒有點出頁面的空間層級關係。而iOS 7與Material則強調 Z軸,即頁面之間的空間層級關係。iOS裡打開一個app,頁面將從你點擊的app圖標為中心點擴散出來,同樣的設計在Android L上也隨處可見。通過轉場動畫告訴我們,這個頁面從哪裡來,到哪裡去,在整個APP或者系統裡的空間位置是什麼。另外,不僅僅是頁面層級的動畫過渡,對象 操作也伴隨着動畫過渡,從動畫裡能感受到操作的過程變化。例如刪除時,垃圾桶圖標會有一個傾倒的動畫,或者通過指示條的旋轉告訴你刪除的過程。另一方面, 過渡動畫賦予了界面控件一種物理特性,在空間被拉伸、回彈時模仿了橡皮筋的物理特性。值得一提的是,在轉場動畫的設計上,Facebooke Paper的非常突出。

3.icon動畫


交互動畫在一些app裡已經大行其道,特別是Facebook Paper的動畫讓人印象深刻。在以後,交互動畫將成為標配,隨之而來,更多設計師把目標轉移到icon上來。icon主要分為入口功能和操作功能,操作 功能的icon在完成點擊操作之後,通常會轉為對應的另外一種形態。如“返回”與“MENU,”“選擇”與“未選擇”,“收藏”與“已收藏”“點讚”與“取消 點讚”的狀態之間切換。現在的設計裡,icon在兩種狀態之間的切換通常顯得生硬,icon動畫將使得點擊之後的反饋更佳強烈,並且讓界面活起來,性感起來。

4.大面積色塊action bar


Material Design設計語言讓人眼前一亮的除了豐富的交互動畫外,還有大面積使用了鮮艷的色塊。過去的Android讓人覺得冰冷科技感,讓人有一種距離感。而 新的設計採用了與過去相反的做法,在系統裡大面積使用色塊,用色塊來突出主要內容和標題,讓界面的主次感更佳突出,也讓原本灰黑色為主的界面擁有了時尚和 活力。色塊的顏色選擇多使用飽和度高、明度適中的顏色,整體擁有比較強烈的視覺衝擊,但並不會太刺眼。Action bar也同樣從過去的灰黑顏色改為彩色,並且讓狀態欄與之融為一體,這點與iOS 7的設計非常相似。

5.FAB 按鈕(Fixed Action Button)

08
在Google的宣傳片裡,最引人注目的新玩意,就是這個淘氣的圓形小按鈕了。 從宣傳片裡來看,這個按鈕的功能並不侷限於“新建”“播放”“收藏”“更多”等功能。它於整體界面的配色形成比較大的反差,因此會讓這個按鈕在界麵裡顯得 非常耀眼,從這樣的設計來看,這個按鈕所背負的任務將會是整個界面的主要操作。雖然有點類似與Path裡的“+”按鈕,但由於iOS系統本身並沒有這樣的 設計,這將會成為最區別於iOS的一種交互設計,對交互設計師和產品經理來說都可能會成為一種挑戰。

6.無邊框按鈕

10
在iOS 7的設計裡,我們已經看到了這樣的影子。最典型的便是“返回”按鈕只有箭頭和文案,去掉了原本的按鈕質感。Material Design的action bar也同樣採用了這樣的設計,直接用icon來表達按鈕功能。尤其是Material的鍵盤設計風格,最早對鍵盤風格進行極簡設計的是微軟的 Windows Phone,Android和iOS相繼跟進。而這次Material走得更極端,把鍵盤的按鈕邊框全部去掉,只保留了英文字母的按鈕。我們不能說這樣的 設計一定是好的,這樣的設計可能讓用戶對點擊的精準度無法更快地判斷,缺乏安全感。好處是在屏幕不大的手機上,去掉邊框的擁擠感會給字母更大的空間。
另外,無邊框按鈕的設計也體現在提示框的按鈕上。如何讓無邊框的按鈕區別於內容文字,這需要設計師除了考慮配色外,還需要考慮按鈕出現的場景,對設計師的在應用場景的解讀上也是一個挑戰。
11

7.聚焦大圖

一張與屏幕等寬,豎方向佔據半個屏幕左右的大圖,去掉action bar,只保留返回按鈕的設計,在一兩年前十分流行的summly應用上就已經非常受到歡迎。後續也有一些應用跟進這樣的設計(例如淘寶),但並沒有大面積流 行起來。Material Design很大膽地使用了這樣的設計。在Google的引導下,這樣的設計風格將很有可能風靡起來。

2014年10月17日 星期五

設計師一致驚呼Adobe新功能

 設計師普遍擁有非蘋果不用的Apple情結早已不是秘密,但設計軟體翹楚Adobe日前卻選擇和微軟攜手合作,在年度大會上公佈了軟硬整合後可能達到的互動體感新境界,文字太難懂無所謂,影片讓你瞬間體會讓設計師瘋狂的神奇!


▲ 動態影片播放中的馬,也可以隨手更換位置!


▲ 輕輕一灑,色彩便在不同裝置間流動



▲ 然後再隨手一抹,簡直就神!完整影片:




2014年5月7日 星期三

RESPONSIVE WEB DESIGN 簡單介紹與優缺點

這一兩年中最夯的網頁設計不外乎就是 Responsive Web Design 了,中文譯名為回應式網頁設計(Responsive Web Design, RWD),又稱自適應、響應式網頁設計, 會有這麼多不同的中文名稱,是因為Responsive Web Design在目前算是較新網頁技術,雖然在國外已非常風行, 但華文市場仍未有一個貼切的中文名稱,只能以直譯名詞代之。,就字面上意思來說就是當一個網頁在不同的解析度下,會呈現不同的介面,也就是在不同的介面上適應。會這麼熱門的原因是,這幾年來隨著 Smart Phone、Tablet 等行動裝置開始興起之後,有許多人都開始使用行動裝置來閱讀網頁。而傳統的網頁只有為傳統PC 做設計的動作,在行動裝置上並不能呈現最好的效果,所以就有了 Responsive Web Design 這個網頁設計新名詞。
什麼是 Responsive Web Design?
簡單來說,就是讓一個網頁在 PC、Mobile 上都可以有好的瀏覽效果,而這個我們就稱為 Responsive Web Design。
如以下的例子,我們用 Smashing Magazine 的網站來做示範:
傳統 PC 瀏覽器顯示
如下圖,如果是解析度較大如 1920*1080 的解析度,會有 4 欄來豐富網頁版面,增強效果。


Mobile 手機上顯示
顯示的方式只有顯示主要內容區了。

















上面兩個顯示不同,但是卻是同一份 HTML 網頁,使用 CSS Media Query 做調整,就是 Responsive Web Design。
如果這個網站沒有做 Responsive Web Design,那他的顯示方法會和傳統 PC 一樣,造成 User 還要把網頁拉大才能閱讀。
為什麼要做 Responsive Web Design?
Responsive Web Design 在目前算是很新的一項設計,在台灣知道的人並不算太多,學校也沒有教。而做 Responsive Web Design 最大的目的是:
  • 因為越來越多人要用手機、平板來瀏覽網頁。
是的,Responsive Web Design 就是因為這樣而生的,為了要讓 手機、平板 的 User 有更好的體驗。
Responsive Web Design 的優缺點
優點:
  • 開發成本比 Native App 低因為 Responsive Web Design 通常可以直接用 Media Query 直接寫搭配行動裝置的 CSS ,與 Native App 的成本比較下來較低。
  • 不需要重寫 HTMLResponsive Web Design 不需要再重寫另一份 HTML ,直接使用 CSS 屬性來對不同裝置做調整即可。
  • 可以同時針對許多不同裝置分別調整通常做 都是利用 CSS3 的 Media Queries 方法來實現,而你可以使用這項 CSS 來對許多裝置做設計,不論是螢幕小到不行的入門款 Smart Phone、螢幕大的 Galaxy Note、解析度超高的 iPad、輕巧的 Google Nexus 7 都可以做 Responsive Web Design 。
缺點:
  • 載入速度的問題
    因為是使用同一份的 HTML & CSS ,所以不管 User 在手機上或者在 PC 上,要瀏覽的網頁都是同一份網頁,當然速度也是會一樣。但是手機上做 Responsive Web Design 會把頁面做到非常簡單,但也只是把元素隱藏,事實上載入速度並不會變快。
  • 在 Mobile 上,要再花心思做設計
    很顯然的在手機上 User 的瀏覽是與在傳統 PC 上是完全不一樣的,所以如果要有一個好的 Mobile User Experience 的話,你就必須針對 Mobile 這塊去下功夫看怎樣的動線閱讀流程才是最好的。
為了讓傳統 PC 的 1280*768 ~ 1920*768 和 Mobile 的 480*320 都有最好的顯示效果,Responsive Web Design 是個很好的解決方案。通常,Responsive Web Design 有這三項重點必須注意:
  • 有彈性、可適應不同裝置的網頁版面
  • 有彈性、可適應不同裝置的圖片、多媒體尺寸
  • 使用 CSS3 Media Queries

Responsive Web Design 的實作方式
由於 Responsive Web Design 實作的方式有幾種,所以這篇文章我們先來整理一下,往後的文章再詳細介紹使用方法。

CSS Grid System 與 CSS Fluid Grid System 網頁版面
Grid 這個字有「格」的意思,沒錯,Gird System 就是把網頁變成有規則性大小的格子,我們以 Bootstrap 的 Grid System 來看,總共有 12 種欄寬,從大到小都有。我們就可以直接使用 Grid 網格系統,能讓開發過程變得很快。


 至於 Fluid Grid System 就是把原本用像素去定義的寬度變成使用比例(百分比)的方式去呈現。比如說原本一個 Sidebar 要 width : 240px ,現在就可以改寫成  width : 20% 。這點,可以讓 Responsive Web Design 比較方便。
CSS Image max-width (Flexible image)調整圖片
這個很常用。在傳統 PC 上,我們的圖片像素通常都遠大於在 Mobile 上的最大解析度,所以如果沒有做任何調整,在看圖片上的體驗會比較差,簡單來說就是圖片會爆出瀏覽區域。而 CSS 中的 max-width 提供了解決方案,這個屬性能夠讓原本一個假設 700px 的圖片,在手機中顯示剛剛好占滿手機的寬度,而高度就隨著寬度做等比例縮小。
img {
    height: auto;
    max-width: 100%;
}
如果你想看加上這段的效果,你可以在閱讀本站文章的時候,把瀏覽器的寬度縮小(縮到寬度比圖片小),你就會發現圖片會變得越來越小。而沒有加上這句的話,則不會一起變小,而是超出瀏覽器。
由於圖片 Load 還是使用同一張圖片,所以會有效能差的問題,雖然的問題在國外有人提出解決方案,不過這個比較複雜就不提了,可自行搜尋。

CSS3 Media Queries

再來就是 CSS3 Media Query 的部分了,Media  Queries算是在 Responsive Web Design 中最容易被提起也最重要的一個部分。使用 Media Queries ,能夠讓某塊區域在 PC 上是顯示的,而在 Mobile 中是隱藏的。而這個判斷機制通常我們是使用瀏覽的寬度來做判斷,像 Mobile 的寬度大約 3、400左右,而傳統 PC 的寬度解析大概都是 1366 以上,利用這個差異就可以寫出符合不同寬度的 Media Queries 來。
// 在 PC 上的顯示
.box {
    width: 500px;
}
// Media Query ,也就是當寬度 < 767 px 時將載入下面這段 CSS :
@media (max-width: 767px) {
    .box {
        width: 100%;
    }
}

小結

Responsive Web Design 是一個不難的一項技能,事實上這個只要多練習,你就可以發現 Responsive Web Design 其實是一個很有趣的東西,他可以隨著寬度而有不同的顯示方式。如果你也是一個 html & css Designer ,我想學習 Responsive Web Design 是非常划算又容易的,因為它具有能跨不同裝置的一個很大的優點。





2014年3月2日 星期日

Google 推出「Web Designer」,針對 HTML5 廣告設計好工具



Web Designer 網址:http://www.google.com/webdesigner/
Google今天正式推出了Web Designer的公測版,一個為網頁設計人員打造的HTML5網站和廣告的設計工具。Web Designer適用Mac和Windows系統。
有了Web Designer,設計人員可以建立互動式的單頁面網站和動畫。目前Web Designer 的一些功能只適用於製作網路廣告,不過Google 表示這些工具在未來還能派上其它用場。
雖然Web Designer 的核心功能在於它是一個視覺化的工具。不過設計人員也可以利用JavaScript 和CSS 來對創建的網站進行微調。事實上,Web Designer 允許用戶在一個內置編輯器​​中來操控所有的程式,同時讓你在裝置上任何瀏覽器上預覽你所創作網站或廣告。

Web Designer 還附有所有你可能已熟悉的視覺化設計工具,其中有一些Google 專門為網頁設計人員開發的有意思的工具,包括一個可供自由繪圖的工具筆以及製作動畫的時間軸。此外,Web Designer 還允許使用者使用CSS3 來創作3D 內容。
在動畫創建方面,Web Designer 一個主要的功能在於它有兩個動畫創建模式,一個是分場景創建動畫的Quick 模式,另一個是允許設計者控制頁面上任何細節的Advanced 模式。

以下為Web Designer使用介紹影片

Google Web Designer Demo


2013年9月2日 星期一

全新 Photoshop CC 取代 CS,功能大改良





Adobe 近來真是動作很多呢,除了之前釋出 Lightroom 5 Beta 讓大家免費試玩之外,剛剛更發佈了全新的Photoshop Creative Cloud (Photoshop CC) 取代已經出到第六代的 Creative Suite (CS),而且是只提供給 Creative Cloud 訂閱者使用,換言之,除了不會有 CS7 之外,整個軟件更與 Adobe 的雲端系統連結起來,以後也會以每月訂閱費代替一次過購買軟件,衍生出來的結果有很多,例如解決翻版問題、不用頻頻更新、入門費用較低之類。就這個改變,看來外界一般反應都不錯。(更新︰外界反應頗有爭議)
與之相應,今次 Photoshop CC 更一次過推出大量改良,大家不妨留意留意,以下是部份重點改良︰

1) 全新的智慧型銳利化
簡介︰「全新的智慧型銳利化是目前最進階的銳利化技術。該技術會分析影像,將清晰度最大化並同時將雜訊和光暈最小化,此外您還可以藉其進行微調,以取得外觀自然的高品質結果。」影片介紹︰

2) 智慧型增加取樣
簡介︰「將低解析度的影像放大,使其擁有優質的印刷效果,或從尺寸較大的影像開始作業,將其擴大成海報或廣告看板的大小。新的增加取樣功能可保留細節和清晰度,而不會產生雜訊。」

3) Camera Raw 8 和圖層支援
簡介︰「你可將 Camera Raw 所做的編輯以濾鏡方式套用到 Photoshop 內的任何圖層或檔案,然後再隨心所欲地加以美化。藉由新的 Adobe® Camera Raw 8,您可以更精確地修改影像、修正透視扭曲的現象,並建立暈映效果。」影片介紹︰

4) 相機防手震
簡介︰「挽救你以為因為相機震動而失敗的相片。不論模糊是由於慢速快門或長焦距而造成,相機防手震 (Camera Shake Reduction) 都能分析其曲線以回復清晰度。」影片介紹︰

5) 可編輯的圓角矩形
簡介︰「現在你可以調整形狀的大小、進行編輯,然後再重新編輯,而且這些作業在形狀建立之前或之後都可進行。你甚至可以在圓角矩形中編輯個別的圓角半徑。如果形狀將用於網路,可從檔案轉存 CSS 資料以節省時間。」

6) 改良的 3D 繪圖
簡介︰「現在當你在 3D 物件和紋理對應上進行繪圖時,即時預覽的速度最高可加快 100 倍,互動效果也更好。有了強大的 Photoshop 繪圖引擎,任何的 3D 模型都看起來栩栩如生。」影片介紹︰
還有其他新功能如下︰
7) 多重形狀和路徑選擇
透過同時選取多個路徑、形狀和向量圖遮色片,不需按多次滑鼠即可完成更多作業。即使在擁有許多路徑的多圖層文件中,也可以使用新的濾鏡模式,直接在畫布上鎖定路徑 (及任何圖層)。
8) 擴充的智慧型物件支援
有了新智慧型物件支援,你就可以套用非破壞性的模糊效果庫 (Apply Blur Gallery) 和液化效果。即使對影像或視訊加入模糊效果或進行推擠、拉扯、縮攏或者膨脹,原始檔案仍能保持完整。即使在儲存檔案之後,您仍可隨時編輯或是移除效果。
9) 改善的文字樣式
有了文字樣式,你便可以將格式設定儲存為預設集,然後只需按一下滑鼠即可套用。你甚至可以定義能套用到所有 Photoshop 文件的文字樣式。
10) CSS 屬性複製
現在,你可透過 Photoshop 針對特定的設計元素產生 CSS 程式碼,然後輕鬆將程式碼複製並貼至網頁編輯器,即可獲得您要的結果。
11) 條件動作
你可藉由條件動作,以「自動導航」的方式進行例常的處理工作。這些命令會使用 if/then 陳述式,根據你所設定的規則自動選擇不同的動作。
12) 改良的 3D 場景面板
3D 場景 (3D Scene) 面板可使 2D 到 3D 編輯的轉變更為順暢;此面板具備許多您已熟知的圖層面板選項,例如複製、範例、群組和刪除等。
13) 工作流程省時妙方
現在你可在執行常見工作時節省很多時間,因為眾多像您這樣的使用者要求我們提供實用的小功能,其中包括將圖層拖曳到標籤文件、使用新的輔助按鍵更輕鬆地建立路徑、使用空格鍵移動路徑、在 PNG 格式中加入 ICC 描述檔等等。
14) 改良的 3D 效果
陰影和反射能成就您的 3D 圖稿,也能使其一蹋塗地,而更高品質的即時預覽則有助於加快製作絕妙作品的速度。此外,你還可以輕鬆建立更優質的光暈效果、場景照明,以及凹凸和紋理的光源等。
15) 從網頁檔案讀入顏色
直接從 HTML、CSS 或 SVG 檔案讀入色票,以激發靈感或是輕鬆搭配現有網頁內容的色彩配置。
16) 用於文字的系統消除鋸齒
使用與 Mac 或 Windows® 系統非常接近的消除鋸齒選項,取得文字外觀的真實預覽。
17) 改良的最小和最大濾鏡
使用功能更為強大的最小和最大濾鏡建立更精確的遮色片和選取範圍,新款濾鏡現在包含保留方度及圓度的選項。

每項詳細更新,大家可以按此瀏覽官方網站了解。至於收費方面,你可以選擇以每月 HKD 388 訂閱 Adobe CC,以使用所有 CC 軟件 (六月開始),或是以每月 HKD 148 只訂閱 Photoshop CC,可以按此了解更多。
---------------------------------------------
出處

2013年8月4日 星期日

你從未瞭解過的 z-index

以前在使用 z-index 的時候,心中隱約自以為是的認為就單純 z-order,不就是個絕對數值,就值越小深度越往下。實際上在實作的時候常常不如預期,不過使用試誤法還是可以解決,只是一直沒有瞭解原理有點不踏實,但慢慢已經發現這件事情沒有想像中的這麼簡單。
最近剛好讀到一篇文章,覺得解釋得不錯,所以就來翻譯一下這篇文。
大部分的人都沒有真正的理解 z-index 是如何運作。z-index 並不複雜,但如果你從未花時間去讀 spec ,那麼你肯定有些你完全沒有意識到的關鍵點。不相信的話來看看你有沒有辦法解這個問題:

問題

底下這個 Sample 裡面包含了三個 div ,每一個 div 中包含一個 span ,並且分別給予三個 span 紅、藍、綠三個顏色。每個 span 都是 absolute position,並且第一個紅色 span 額外設定了 z-index=1。
好的,那麼現在有一個挑戰是想辦法把紅色的 span 放到最下面,並且符合以下規則:
  • 不能更動 HTML
  • 不能對任何 element 新增或是改變 z-index
  • 不能新增或改變任何 element 的 position
有興趣挑戰的話可以按一下上面的 Edit on Codepen 嘗試看看。如果你成功的解決這個問題,那代表你應該可以跳過以下文章了 :) 提醒:不要按下面的 CSS 不然你就會直接看到解答了。

解答

方法是將第一個 div ( red span 的爸爸) 設定一個小於 1 的 opacity。
1
2
3
div:first-child {
    opacity: .99;
}
如果你不懂 first-child 的話,其實你也可以直接在第一個 div 上給 inline style: stye="opacity:0.99″。 但我想不懂 first-child 的話應該不會來看這篇文章才對。 如果你正想破頭不知道為什麼,而且無法相信 opacity 會影響 element 的深度的話,嗯,你並不孤獨,我第一次遇到這個問題的時候也一樣的驚訝。 希望以下內容能夠幫助釐清這個問題與解答。

疊放順序 (Stacking Order)

Z-index 看起來似乎非常簡單:具有較高 z-index 的 element 會疊放在具有較低 z-index 的 element 上。但實際上不是的。z-index 的一部分問題就在於它看起來很簡單以至於大部份的開發者不會花時間去研讀這些規則。 疊放順序指的是 HTML document 中的每一個 element 可以被放在其他 element 的前面或是後面。而決定這個順序的規則很明確的寫在 spec 中。但如同前面所述,大部分的開發者並不會去看 spec 來完整的了解這個規則。 對於沒有指定 z-index 與 position 的 element 來說,基本上疊放順序就相等於在 HTML 中出現的順序 (好吧,其實也沒那麼單純,但如果你沒有使用小於零的 margin 的話,這應該還是基本上成立)。 當把 position 放進來考慮的時候,那麼所有具有 position 屬性的 element 會被堆放在沒有 position 屬性的 element 上 (這裡說的沒有 position 屬性,正確地來說應該是沒有明確指定而是預設的 static position value)。 最後,牽涉到 z-index 後,這順序的決定就會變得有點難處理了。首先 z-index 只對具有非 static position value 的 element 有效,也就是說 element 上必須是 relative 或是 absolute position,那設定在這 element 上的 z-index 才會有作用。再來是 z-index 的設定會創造疊放群組(stacking context),於是看似簡單的規則就因為這個 stacking context 而變得複雜了。

疊放群組 (Stacking Contexts)

疊放群組 (stacking contexts) 指的是一組具有相同父元素的 elements 具有相同的疊放順序 (stacking order) 。能夠真正理解 z-index 以及疊放順序 (stacking order) 如何運作的真正關鍵是充分的了解 疊放群組 (stacking contexts) 。 每一個疊放群組 (stacking contexts) 會有一個單一的 DOM element 做為根元素。當一個元素構成一個新的疊放群組 (stacking contexts)的時候,所有該元素的所有子元素都會被歸類在在疊放順序(stacking order)中的同一個位置。也就是說如果一個元素被包含在一個相對疊放順序較低的 stack context 中,那麼即使你設定它的 z-index 為一千萬也沒有辦法再讓它出現在其他具有較高疊放順序(stacking order) 的疊放群組 (stacking contexts) 上面。 以下三種情況會產生新的 疊放群組 (stacking contexts)
  • 當一個 element 是文件的根節點的時候 (也就是 <html>)
  • 當一個 element 有非 static value 的 position 屬性以及非 auto 的 z-index 屬性
  • 當一個 element 具有小於 1 的 opacity
前兩個合理並且一般開發者應該都懂 (即使不知道它們叫什麼)。 但第三個 (opacity) 就幾乎從來沒有在 W3C Spec 以外的地方被提起過。

決定元素的疊放順序 (Stacking Order)

事實上,決定全域的所有元素在一個頁面中(包含邊框、背景、以及文字節點等等)的疊放順序 (Stacking Order) 是極度的複雜並且遠超過本文所要討論的範疇。(有興趣的話還是建議參考 spec) 但一個基本的了解在大多數情況下還是可以幫助讓 CSS 的開發是比較符合規範的。

疊放群組 (stacking contexts)中的疊放順序 (Stacking Order)

以下所示是基本規則,這邊直接使用對應的 CSS 設定來解釋,但有一點需要注意的是因為 transform 會導致不同的 z-order,但這邊並未包含 transform 之後的規則。
這邊有一點有趣的是具有負值的 z-index 元素會排序在疊放順序中較底的位置,因此這使得這樣的元素有可能會被自己的 parent 蓋住。關於這部分可以參考這個由 Nicolas Gallagher 所提供的很棒的範例。

全域的疊放順序 (Stacking Order)

對於疊放群組 (Stacking Context) 以及單一群組中的疊放順序有了比較具體地瞭解之後,對於全域的順序的理解就沒有這麼難了。 要避免被 z-index 困住的關鍵在於能夠標注出疊放群組的所在元素。當你對一個元素設定了上千萬的 z-index 但它的順序還是不受任何影響的話,那麼看看它的子節點或是父節點看看是不是其中一個構成了新的疊放群組 (Stacking Context)。如果有的話,那上千萬的 z-index 是不會有任何幫助的。

總結

回到原始的問題,以下是對應的 HTML 原始碼並標注上對應的疊放順序 (stacking order)
123456789
<div><!-- 1 -->
<span class="red"><!-- 6 --></span>
</div>
<div><!-- 2 -->
<span class="green"><!-- 4 --><span>
</div>
<div><!-- 3 -->
<span class="blue"><!-- 5 --></span>
</div>
在解法中我們對第一個 div 設定了 opacity 小於 “1″ 之後,疊放順序 (stacking order) 就變成了
123456789
<div><!-- 1 -->
<span class="red"><!-- 1.1 --></span>
</div>
<div><!-- 2 -->
<span class="green"><!-- 4 --><span>
</div>
<div><!-- 3 -->
<span class="blue"><!-- 5 --></span>
</div>

1.1 指的是一個新的疊放群組 (Stacking Context)形成,於是 red span 被歸類在同一個 order 中。


2013年6月6日 星期四

正在變平的世界


這兩年科技圈開始緩緩吹起一股「平面風」,從 Facebook、Google 到 Apple,大家紛紛把 Logo、網站、App,甚至是 OS 的使用者介面越改越平。雖然聽起來有點不可思議,但這一波風潮主要帶頭的似乎是微軟,他們在 2012 年推出的 Windows Phone 8 率先採用了完全平面化的設計。
接著在去年的全面 UI 大改版中,Google 也跟上了這個潮流:



近期,Facebook 也把 Logo 以及網站上的許多 Icons 平面化了:





最後連 Scott Forstall 走後,改由 Jony Ive 主導的 iOS,也傳出將在 7.0 版推出時大幅度的平面化:




當然 3D 立體、擬物或是平面,圓角或是方框,各自都有它們的擁護者。但不同的風格的確會讓使用者有不同的使用感受,當平面變得現代、時尚,立體就有可能會讓使用者感到比較傳統、復古。因此我鼓勵大家有空多欣賞別人的設計,感受不同設計給你的不同體驗,才能在做自己的產品時,選擇最適合你品牌精神的設計風格。
以上出處
----------------------------------------------------------------------------------------
在apple 帶領這麼多年擬真風格設計,也漸漸被平面風格取代了,趨式設計是有一定的流行走向,就像使用者的喜好是一樣,一但喜歡的風格久了,就會想換口味,另一種風格就會冒出而迎領潮流,現在當紅炸子雞 就是 很 "平"的風格.