2015年6月1日 星期一

2015 年十大網頁設計趨勢

網頁設計師與作家 Amber Leigh Turner 於 The Next Web 發文,整理了 2015 年網頁設計十大趨勢,幫助你快速進入狀況。


1. 捲動網頁取代點擊

01
單一網頁愈來愈長已是很普遍的做法,尤其是在行動裝置普及的時代,首頁通常不置連結,改將所有內容放在單一頁面,讓低頭族「滑上癮」。因為比起在一堆連結中跳轉,必須不斷重新等待新的頁面載入,資訊通通放在一頁的形式更容易瀏覽。而且不再只是首頁「變長」,其實「about」或描述產品的網頁,都能採取捲到底的方式,比如蘋果 iPhone 6 的呈現,就很符合長網頁的趨勢,把所有規格與功能全部放在單一網頁內,並且增添了一些精緻的動畫元素,抓住網友捲動全程的注意力。

2. 運用敘事與互動製造驚喜

02

精彩的內容是決定網站優劣的關鍵因素,如果善於以說故事的方式呈現內容,更是大加分。西雅圖 Space Needle 網站,運用數位敘事與設計,生動的述說了 Space Needle 的背景故事。同時也運用 2015 的另一個顯著趨勢:互動,帶給網友宛如親臨實境的獨特體驗。在網頁設計中交互使用互動與動畫,而且運用得當,能夠製造驚喜,讓觀者留下深刻印象,瀏覽 Impossible Bureau 時,一邊滑動捲軸、一邊滑過不同元素,會有各種令你驚奇萬分的互動感。
03

3. 背景爭奪戰:大張背景圖 vs. 大型色塊

03
前幾年,一定看過不少大型圖片作為背景、文字浮於其上的設計,這是網友打開網站首先映入眼簾的部分,覺得膩了、想要「非主流」一下嗎?那就逆勢而行。有些新網站就選擇抽除背景圖片,只留下巨大的色塊與文字。抽的好處除了特別突出之外,也有助於改善載入速度。在一片大型背景圖片的網站中,The New Wave 優雅的設計值得參考。

4. 去除非必要的元素,簡化再簡化

04
有個設計理論是這麼說的,所有非必要元素全部都被清除之後,設計才大功告成。2015 年可能會是設計師大舉實踐這個理論的年份。前面所提的 New Wave Company 與 Rareview Digital Agemcy 網站都屬「去除大型背景圖片」的模範。後者更將背景顏色、複雜的版式通通掃光。過度設計、過多影像、過多色彩的網站充斥,極端簡潔的設計反倒顯得特別。

5. 固定寬度置中版型

05
過去幾年大部分網站多把「banding」或寬度(width)設為 100%,影像與區塊隨著瀏覽器視域而變化。在更之前,設計師傾向設定固定寬度,並將圖像置中在頁面。這種固定寬度的趨勢以現代化的面貌,出現復興的跡象,有些網站選擇設定「最大寬度」,讓內容在瀏覽器中置中。Michele Mazzucco的網站就是一個例子,你發現什麼玄機了嗎?縮小瀏覽器時,含有主要內容的色塊占滿螢幕,放大時卻有留白。

6. 專業高品質、獨一無二的攝影

06
為求方便也為減省成本,圖庫影像還是很多設計師的選擇。不過最近竄起的新網站,寧可多花一點錢請專業攝影師拍攝高品質、獨一無二而且完全按照網站目的需求定製的影像,不僅能夠切實展現網站品味,還能避免與其他網站「撞衫」。Grain and Mother 的網站圖片是幾個人坐在餐桌前,彷彿開心地正在談論什麼事情,他們不是什麼臨演,而是 Grain and Mother 的創辦人與員工。如果點進其「about」頁面,美麗且專業的影像肯定會奪走你的注意力,美妙的辦公空間都是真的!
about

7. 手機選單移植回網站

07
08
目前大部分網站還是比較重視桌面版,無法完美過渡到手機與平板裝置。不過響應式設計(RWD)興起,協助設計師順利讓網站順應裝置,無論何種螢幕都能有最佳瀏覽體驗。在這樣的趨勢下,我們開始看到本來在手機上流行的元素,反倒移植回桌電上。比如 24 Ways 與 Rawnet 都有如同 app 與響應式的選單,儘管是在桌電觀看,卻像是在用手機瀏覽。這兩個網站一改傳統水平選單的形式,而是像手機版網頁常見的直式 flyout/sideout 選單。

8. 主選單藏起來!

08
有些網站則把選單藏起來,唯有網友點擊或懸停在某個元素上,才會開啟選單,儘量維持畫面整潔、強調功能性。這個同樣源自手機螢幕特性的設計,或許也將成為 2015 年的趨勢。看看 Brian Hoff Design新網站,右上側置放漢堡圖示,由於使用者已很習慣在手機上看到這種代表選單的象徵,因此並不會無所適從。

9. 超級大的字型(typography)

09
前面所提的示例網站,絕大多數都有個相同的特徵:巨大的文字標題。2015 年這樣的流行將會繼續,而且可能有愈長愈大的現象,就像在地面上看到一架即將降落的飛機,那麼大。Tiny Giant網站超大標題直衝眼簾,要忽略也難。眾聲喧嘩的時代,就是要比別人更大聲,才有被看見的機會,標題字型,在 2015 年會繼續放大。

10. 不受環境優劣影響的瀏覽體驗

本文提到的網頁設計趨勢,多數都出自為網站「瘦身」,加快手機或平板,以及頻寬不足環境的載入速度。網站設計師與開發者愈來愈重視網站「重量」以及使用者與其互動的形式。如何在行動裝置中、不同頻寬環境下營造同樣良好的體驗,也是 2015 年益發重要的問題。相信今年我們會有更多更順暢的網站,不會載到一半就喊咔。
另外數位行銷諮詢網站 Econsultancy 作者 Christopher Ratcliff 根據自己的觀察,並且訪問了 Dan Barker 與 Chris Lake 兩位行銷專家,也統整出 17 項 2015 年網頁趨勢,同樣相當值得參考。以下節選出與 The Next Web 沒有重複的觀點:
1. 視差滾動:Wordpress 等網頁製作平台提供視差捲動的模板,因此我們可以期待未來出現更多高度創新、以敘事為主體的網頁。
2. 卡片設計:前幾年類似 Pinterest 的卡片瀑布流今年可能會捲土重來,這種重視影像的設計非常符合「TL;DR(太長沒讀)」的網路族群,也非常適於呈現在行動裝置與響應式設計。
cola可口可樂 AHH
3. 物質設計(material design):擬真設計與扁平設計的交叉點,Google 去年推出的 material design,今年預計也將大為風行。
InboxInbox
4. 幽靈按鈕(ghost button):按鈕透明化,僅以能夠識別的超細邊框,包裹無襯線字型。一方面減少按鈕與背景的突兀感,一方面依然有清楚的指向。
5. 動態設計(motion design):比如不斷捲動,不會直接出現圖片,而是先有色塊才有圖片開展。或者數據長條圖「動起來」。
SNMcYrW
6. 模組捲動(modular scrolling):一般我們是捲動整個網頁,但捲動個別欄位也是沒問題的。
7. 色彩漸變:選擇一個色彩作為主體,配以許多深淺不同的相同色系。
8. 固定的導航欄:無論你捲動到哪個位置,導航欄永遠固定在最上方,方便使用者在各種頁面中切換,用處較為複雜的大型網站如 Facebook 就會使用這種設計。
9. 行動第一,但非行動唯一:畢竟還是有一大票人工作倚賴桌上型電腦維生,比如正在看本文的網頁設計師們,對吧~

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 中。