前陣子我把之前去墾丁的照片整理了一下，無意之間，就把這張照片給向量化(Vectorize)了。
星期四, 2月 21, 2008
用「新增參考線」精準做出四合一照片
很多會使用Photoshop的人，知道如何增加參考線、鎖定參考線，卻不見得知道「新增參考線」可以讓妳依照輸入的「百分比(%)」或「畫素(px)」等不同的數字，幫助妳精準地分割出不同的區域，超方便的，一定要學學！
這個小小的教學，主要是透過參考線來幫助我們分割出四等份的區域、放入四個不同的圖片(iStockPhoto圖片)；有了參考線的幫忙，我們才能很快的拉出精確的區域。
點這裡進到教學的頁面。
星期三, 2月 20, 2008
Web 2.0 設計指南
底下的文章翻譯自web design from scratch的Web 2.0 how-to design guide，我覺得很有參考的價值，所以試著翻成中文，一方面自己可以學習，一方面也可以讓大家參考。
[文章開始]
在這個課程裡面，我要描述現在Web 2.0網站的各種視覺設計元素，並且解釋為什麼它們有效果(例如為什麼他們變得很常見)，也告訴你如何將這些元素在何時用在哪邊。這篇文章會延伸我另一篇Current Style的文章，並更深入的分析現在Web 2.0的設計風格。
事先聲明 (Disclaimer)
並不是所有的功能都在所有的情形之下都適用，總是會有一些例外，同時也會有一些不好的例子，它們都是被錯誤或過度的使用在不適合的網站設計上。
你不能以為把這些視覺的元素全用在一起了就會做出好網頁，這就好比你以為「拿了雞蛋、砂糖和麵粉就可以做出好吃的蛋糕了」的道理是一樣的。
從事網頁設計的工作，其實需要對很多事情都非常敏銳，所以好的網頁設計通常都是平衡了許多不同力量之後的一個成果。
WEB 2.0 (網路2.0) ?!
我在Current Style這篇文章中用「Web 2.0設計」來描述目前普遍流行的網頁設計。有很多人都用底下這些句子來描述「Web 2.0」：
- 一個網路經濟的再起
- 一個新層次的網站與服務之間的科技互動
- 一個源自於新型態的線上社群與社交網路
通往Web 2.0風格的捷徑
(Shortcut To Web 2.0 Style)
如果你還沒有自己Web 2.0設計風格的資源，TemplateMonster已經發表了他們Web 2.0的專區。當然，一個網路上購買的樣版頁面不可能總是完美的符合你的目標的；然而，一個為你特別設計過的網頁同樣也不能做出這樣的保證。有很多網站花不到一百元美金買這些樣版就能做出最新、最流行的設計了！而且TemplateMonster已經做這個服務好幾年了，所以我會建議你去看一看。
介紹 (Intoduction)
現在我將帶你們看看現今這股優秀網頁設計的特色，解構最重要的特徵，解釋為什麼每一個都能成為好好設計，並且讓你們知道如何用在你自己的網站上。
如果要我用一個字來歸納「Web 2.0」的設計，我會用「簡約」(simplicity)，那就是我們要開始的地方了。
我是個非常崇尚簡約的人，我認為它就是要表達在網頁設計的一個方法。今天乾淨的、顯眼的、優美的網頁設計都用少來傳遞多(deliver more with less)。
- 他們藉由較少而且精選過的視覺元素來指引網站使用者的目光，讓設計師的設計直接命中網站的目標。
- 他們用較少的文字卻說得更多，並且小心翼翼的選擇圖片來創造想要的感覺。
- 他們拒絕使用那些讓人不知道要從網站上做什麼的想法。
1.簡約 (Simplicity)
網頁設計比以前更單純多了，這是件好事！
2.0的設計指的是集中的(focused)、乾淨的(clean)、簡單的(simple)，但並不一定是說要把網站做成小小的，等一下會說明。
我相信簡約。不只全部的網站都要簡單，而且必要的功能愈簡單愈好。我曾寫過一篇文章是關於阿肯的刮鬍刀(Occam's Razor)，這是我常常在用的一個原則。用一個方法來做比喻：如果一個問題有兩個答案，那麼比較簡單的就是比較好的。這邊舉一些例子。底下有很多網站都有許多不必要的元素穿插其中，有的甚至還更誇張…但這樣會使它們更好嗎？
結果是你必須看這個內容，你發現自己和設計師設計的所有功能一起互動，而且你並不介意，因為它很簡單，讓你知道為什麼要到這個網站。
為什麼簡約是好的
(Why simplicity is good)
- 因為網站的存在都有它的目標，而且所有的網頁都有它的目的。
- 因為使用者的注意力有限。
- 因為這是設計師的職責，要讓使用者找到他們想要的東西(或是注意到網站想讓他們注意到的東西)。
- 因為螢幕上的東西會吸引他們的注意力。東西愈多，要注意的東西也就愈多，使用者可能不會注意到真正重要的東西。
- 因此我們需要讓某些溝通有效，需要減少混亂的東西。意思是我們要想辦法讓東西愈簡單愈好，也就是有井然有序，或者是簡約了。
(When&How To Make Your Designs Simple)
何時？
總是如此！
如何？
有兩個重要的方向可以成功的達成簡約的目的：
- 在不犧牲效率的前提之下，減少不必要的東西。
- 找出可以達到同樣目的的方法，但這方法卻能更簡單。
這邊舉一個設計不夠簡約的例子。耶克塞(Yaxay)的介面使用了很多的圖案，但大多都只是裝飾而已，有些是用來當做背景。相對的，只有少數的圖案是用來讓使用者找尋或取得資訊、和網站互動。
這個網站有好多的「東西」要去注意，而且只有少數的部份是用來當做真正的導覽列、內容、以及互動功能。
愛德華‧泰伏特(Edward Tufte)主導了這個網頁設計的資訊。他用「資料墨水」(data ink，可以傳達資訊的視覺元素)和「非資料墨水」(non-data ink，不能傳達資訊的視覺元素，僅僅是視覺本身而已。)來形容這個現象。泰伏特(Tufte)用一個方法來衡量設計的資訊(例如照片、圖案、表格等)效率，就是「資料墨水」和「非資料墨水」的比例。資料墨水的比例愈高，設計就愈有效率。
可是拿耶克塞來說，其實有很多都是我稱為「填充物」(busyness)的設計，例如很多的邊緣、色調的改變、色彩的變化、形狀、線條…等等，有很多的東西都得要去看，但有用的東西卻只有：
- 網站的識別圖案，以及
- 導覽列的按鈕(這邊看到的是art gallery)
在網頁設計上，我並不反對豐富、複雜或者是優美
(I'm Not Against Richness, Complexity Or Beauty In Web Design)
簡約意味著：
必要的時候，可以用任何的方法，即使用最多的圖案，為的都是要產生溝通的動作。當然，一般溝通的並不是指那些刻板的資料(hard data)，而是容易接收的資訊(soft information)。
- 刻板資料(hard data)：指的是事實，像新聞、股價、火車時刻、你銀行帳戶的金額…
- 容易接收的資訊(soft information)：包涵了溝通本身的性質，例如關於公司的第一印象、接受服務的感覺、或者是你覺得這個產品適不適合你，這都可能是非常重要的！
以底下的例子來說，艾力克斯‧杜可(Alex Dukal)的網站非常的豐富，而且有趣動人。它用了相當多的視覺技巧來吸引你的注意力，使你產生興趣，讓你對艾力克斯的作品產生溫暖的感覺。
不過，它也是很簡單的一個網站。因為它的畫面區域、「資料墨水」、「填充物」用的恰到好處。所以這並不是沒有理由的，它是井然有序而且豐富的。
不論如何，你都應該聰明的選擇使用的畫面區域以及「資料墨水」。從一開始就先把它拿來當作溝通的設計，然後再思考是否有更簡單的方式，如果有的話，就去做。
2.置中版面 Central Layout
(在Current Style裡有更多的介紹)基本上，現在大多數的網站在瀏覽器裡頭都是置中的版面。相對於以往，全螢幕、靠左、固定大小的版面也愈來愈少了。
為什麼版面置中是好的
(Why A Central Layout Is Good)
現在的「2.0」的風格是簡單、大方、直接的。網站如果很直接了當的放在正中間，感覺起來簡單、大方、直接多了！當然，也因為我們把圖案與內容排得更整齊，試著不把太多的東西同時丟給使用者去想，所以我們可以用更少的東西表達更多的資訊，能夠有多一點的自由產生多一點的空間，並且能將我們的內容填入很多的留白。
何時、如何利用版面置中的方法
(When&How To use A Central Layout)
我會認為，你應該要把你的網站版面置中，除非有很好的理由不讓你這麼做。例如你想在有限的空間裡發揮更多的創意，或想在畫面中盡可能取得更多的資訊(例如網路軟體工具)。
3.減少欄位 Fewer Columns
幾年前，分成三個主要欄位的網站是很常見的，四欄的也不會不常看到。今天，兩欄的網站更常見了，三欄是主流網站裡面最多的了。
為什麼欄位少一點比較好
(Why Using Fewer Columns Is Good)
少就是多。愈少的欄位感覺起來愈簡單、大方，而且比較直接，這樣我們溝通的訊息就愈清楚。
有一些網站的版面中間是用產品來支配的。因為我們不想把整個畫面都放滿東西，也不想一次就把所有的東西放在一塊，不需要這麼多欄位來放東西就是了：
- 37Signals總是在前面放上一個問題，然後再放上一個大大的答案。他們只用了兩個欄位。這是個很善用簡約的例子。它讓訊息說話，而且不讓任何東西擋住它！
- Apple則是另一個優美而簡約的例子。它的版面設計真的非常非常的好！每一次我體驗到Apple的簡約設計，就愈相信它的襌風是設計的典範。典型的Apple版面表達出某些人想直接問的問題：「到底我們的網站需要多少區塊、欄位、以及線條？」然後，他們就很大膽的把不必要的元素全部修掉，所以你得到的答案就是無法拒絕的乾淨，非常有效率的溝通。
(How To Choose Your Columns)
我建議不要使用超過三個欄位的設計，因為你應該不要用太多的東西，但還是有幾個例外的情形，所以這邊舉幾個仍然有效的例子：
- Derek Powazek的部落格網站用了三個欄位的樣式來做為他部落格的主要欄位設計，但在欄位下方則用了四個欄位。底下的區塊是混合選擇的一種方式，眾多的欄位強調了「選你想要的」感覺。
- Amazon(英國)左右兩邊各用了一個欄位，產品則放在中間額外的三個欄位。它有效是因為每個欄位的目的可以從它的設計看得很清楚；左邊是導覽，右邊是其它產品，中間的產品用了很多留白來區隔，所以不會被看不見。
- Popurls.com包括了很多混合點選的資訊，對照其它網站如digg和del.icio.us來說，它的快速連結仍然保持在三個主要的文字區塊之下，你可以快速瀏覽並選擇你想要的。
(And Here's A Site That Gets It Wrong...)
All Things Web2.0用了四個欄位：兩個邊欄、兩個中間欄位。下方的版面讓你不知道要看哪；所有的東西都看起來不怎麼重要，有可能是因為背景有點兒昏暗。比較一下剛才Amazon的網站，Amazon在頁面中可以做出區隔，這樣的設計讓你馬上就看出什麼區域有什麼東西，所以不會混淆。
4. 容易辨識的表頭 (Separate Top Sections)
意思是把網站上方的區域(網站識別圖案與導覽列)做得跟其它的區域不一樣。
當然，這並不是什麼新方法，但它的確是一個好主意，而且一直都這樣用著的。由於這方法一直都被大家使用，所以有些人可能會做過頭了。看看底下這六個範例裡頭有哪些乾淨的表頭(page-tops)，即使是縮圖也看得出來：
為什麼可以輕易辨識的表頭是好的
(Why Distinct Top Section Are Good)
上方區塊的表頭告訴著我們：「這裡就是頁面的起始處。」這滿明顯的，但感覺起來知道哪裡是開始的地方好像滿不錯的！網站或網頁的表頭常常會用一些大膽而穩重的陳述，這非常具有「2.0」的精神，因為我們喜歡穩重、簡單、大膽的態度。
這裡面有兩個頁是在頁面起始只有品牌而已(Protolize, MediconMedia)，有一個只有導覽列(Curve2 Design)，其它三個則是有品牌也有導覽列。
Curve2 Design的缺點，在我看來，是它的品牌識別放在導覽列後面。我比較喜歡導覽列明顯、清楚一些(例如Simple Bits)。
何時、如何辨識表頭
(When&How To Use A Distinct Top Section)
任何網站都應該把品牌與主導覽列做得非常明顯、大膽而且清楚。
所以大膽的把品牌識別圖案和導覽列放在網站上方乾淨的區塊是個好主意。總是把品牌識別圖案放在螢幕的最上方，而且最好也把導覽列放在它旁邊。
把網站畫面上方的區塊和網站其它內容明顯地區隔出來是件好事。最穩重的做法就是用大面積的色塊來區隔，不過還是有一些不同的做法。
這邊有兩個例子，他們畫面的上方都用色彩的區塊來做分隔，但他們可不是只用了一個顏色在上面而已：
而這邊只是把上面的地方簡單的做成粗大的樣子以和其它區域有所不同：
5.固定位置的色塊 (Solid Areas Of Screen Real-Estate)
看了這麼多可以清楚區隔的表頭，你會注意到這些網站穩重而清楚地定義了各種不同的固定區域；這些固定區域包涵了各種不同的形式：
- 導覽列(Navigation)
- 背景或畫布(Background/Canvas)
- 主要內容區域(Main Content Area)
- 其它有的沒的(Other Stuff)
- 標記或連結(Callouts/Cross-Links)
但是留白一樣能有相同的效果。如果你用強烈色彩的話，會有一個風險存在，就是它會吸引你的注意，同樣也會把你的注意力從別的地方給吸引過來。我認為把內容放在乾淨的白色空間上，可以製造出比較輕鬆的感覺，讓看的人比較自在：
6.簡單的導覽列 (Simple Nav)
導覽列是固定的－導覽列應該固定出現在整個網站的上方，像頁面的範本一樣，很明顯的讓人可以找到與使用。
- 2.0的設計使所有的導覽列都看起來是大的，粗的，乾淨的，而且清楚的。
- 「一整排的超連結」(Inline hyperlinks)是最典型的了，而且能夠清楚的和一般文字做區隔。
(Why Simple Navigation Is Better)
你需要很明顯就能辨別的導覽列，因為它能讓你知道各種不同的重要訊息：
- 你在哪裡
- 能去哪裡
- 能做什麼
- 將導覽列固定在內容之外的區塊
- 用顏色、色塊、形狀來區分出導覽列
- 把導覽列上的東西做得又大又粗
- 用清楚的文字讓導覽列的連結非常明確
(How To Keep Your Nav Simple)
只要記做一個重點：導覽列要和其它地方不一樣。記住這個原則，不論是透過位置、色彩或者乾淨的地方來做區隔都可以。一整排的起連結也應該要和其它內容的文字所有不同才是。
這邊有一篇文章是關於導覽列的。
即使一整排都是超連結的文字，但也應該要能看出和周圍其它文字的不同。看看底下這些小圖，你得在每一個小圖上面多看兩次，才能知道哪個是連結。(我個人而言，比較喜歡用藍字不加底線，當你用滑鼠移過去的時候就會變成紅字加上底線…)
7.大的品牌識別圖 (Bold Logos)
一個清楚，粗大，而且強烈的品牌圖案－裡頭涵括了態度、品味、與第一印象－透過一個大大的品牌識別圖案，我們就能感受到這些訊息。底下是幾個例子。注意他們都把這些品牌識別圖案做得很大，用一般2.0的原則排在一起。
為什麼
(Why)
明確而粗大的品牌識別圖案不斷地發出一個訊息：「這就是我們。」我們相信這是一個方法。
何時、如何
(When&How)
你可以參考我寫的Logo設計以及以文字為主的Logo。想一下子就告訴你如何能設計出好的品牌識別圖案是很難的，然而，簡單的說，你的品牌識別圖案應該是：
- 視覺上和主要的內容可以很協調的在一起，可以用在其它的用途，例如傳單或衣服上。
- 容易辨認與區隔的
- 一眼就可以看出你的品牌個性與特質
8. 更大的文字 (Bigger Text)
跟以往舊的網站比起來，很多的「2.0」網站都用很大的文字來設計。
如果你的網站上可以放少一點的東西，那麼你可以擁有的就是更多的空間。當你擁有多一點的空間時，你可以讓重要的東西看起來比其它東西要大一些。因為大的東西比小的東西還要明顯，不過這樣的效果在印刷設計、版面、頁面、頭條新聞上已經用很久了。
大的文字不但比較明顯，而且也更平易近人。如果字太小的話，不止看起來很難過，在陽光下也看不清楚，畢竟我們都坐在螢幕前面有一段小小的距離，而我們只是想從網頁裡頭找到一些有用的東西。如果你有好好思考想過這一點的話，還真的有很多人都是這樣子的。
何時、如何使用大的文字
(When&How To Use Big Text)
大的字體對多數人而言其實是比較有利的，所以這也是件好事。
當然，字體的大小是相對的。你不能把一個正常網站的一般字體給全都變成超大字體！這會讓網頁超過畫面所能顯示的範圍，而且這樣不但沒有作用，而且還更糟！
為了要用大一點的字，你必須先移除不需要的東西來製造出足夠乾淨的空間。另外，你也要有一個將字體放大的理由，所以這個要放大的字體必須要有意義而且有作用。你不能只是因為它要設計2.0的網站就把字莫名其妙的放大。
如果你需要把很多資訊放在同一個網頁上，而且相對來說它們都是同樣重要的，也許你可以讓它們全部都做成小字。
9.用粗體字介紹 (Bold Text Introductions)
在這些大型字體的樣式之中，很多網站的標題文字敘述都是粗體字的。
這些粗體字通常都被當做是網站的獨特賣點(USP,unique selling point)，主要商品(elevator pitch)，或者是重要訊息。一般來說，使用圖形表達的情形多於文字，理由是因為設計師想要掌控更多的視覺衝擊，特別是在一開始看到頁面的時候。
何時、如何使用粗體字的介紹
(When&How To Use A Bold Text Intro)
只有在你需要用粗體字來說一些話的時候才用這個方法。如果你沒有什麼話必須得用粗體字來說的話，這樣反而會更糟！也許你應該想一想你的網站或網頁是不是有什麼訊息必須得用粗體字來表達才是。
10.色彩強烈 (Strong Colours)
明亮、強烈的色彩總是吸引人們的注意力。善用他們來區分頁面不同的地方以強調重點。
當你的網站有一個簡單、條紋裝飾的設計時，可以用一些強烈的色彩來區分頁面中不同的功能區塊，讓別人注意到你想讓別人注意的東西。
- Treo Mobile用三種不同的強烈色彩區隔網站主要的三個區域。背景色讓它清楚的告訴你這不是主要的內容，又大又粗的標題字讓你很快就看出它的差異，所以你一下子就能決定自己想看的是什麼。
- Colorschemer用強烈、明亮、清爽的顏色來做區隔，並且把它們放在中性色調的背景上。
- Apple總是用色調(黑灰色的色調)來做出非常平衡的設計，豐富的效果與色彩都讓人很難不去注意到它。我個人認為它是目前網站中最棒的一個設計！在這個圖片裡面，較黑的地方和較強烈的色彩都是被用來強調重點項目。
(Colour Is Also A Great Medium For Communicating Brand Values)
- 以Real Meat為例，它的顏色並不是明亮的，但卻很強烈！有一部份的原因是因為它用了很多的綠色，它用綠色來溝通「品質」與「健康」的價值。
注意：這個網站的設計和它的影像並不協調。 - Gear For Girls只賣女性戶外服飾用品，柔軟的色彩增強了品牌的個性。
(Be Careful To Use Intense Colour On Or Around High-Value Features)
- Giddy Kippa：一個好的而且有效的網頁設計得和內容以外的強烈背景色彩妥協，因為強烈的背景色彩會吸引人的注意。
- Aurum3 NewTech也冒相同風險的效果，但它的背景顏色刷淡了一點，讓內容能夠被注意到。同樣的道理，又大又粗又佔版面的東西，都會把人的注意力從背景的強烈色彩中給吸引過來。
(Remember To Use Sparingly)
如果你想用強烈的色彩來吸引人的注意力，那麼只有在其它地方都沒有非常強烈的色彩時才有效果。如果每樣東西都吸引人的注意力，那麼眼睛會覺得混淆，網站將讓人覺得困惑與混亂。
11.介面質感豐富 (Rich Surfaces)
多數2.0風格的網站都有微妙的立體效果，非常謹慎地強調設計的質感。
我們都知道這些小巧的立體效果感覺起來還滿不錯的，但我們可能不知道為什麼會這麼覺得。模仿真實的表面效果(例如陰影、漸層、反射)都能幫助我們產生一種視覺的感觸，比較真實、實在，也更精緻。
他們可能喚起了我們在真實世界裡面的觸覺與美感，例如水滴、塑膠光澤，或者大理石地板。讓網站上的東西看起來像是獨立的實體，具有真實感，產生一種想要去觸碰的感覺，會吸引人的注意力。
何時、如何運用質感豐富的介面
(When&How To Use Rich Surfaces)
這裡的黃金定律是小心使用！而且不要用過頭了。
如同我在Tutorial on 3D effects所說的，你不要把所有的東西都用上這種效果。
讓所有立體的東西維持一致的光源是很重要的！雖然這可能會讓按鈕上的反光效果或其它立體效果看起來更複雜，但你仍然要讓整個介面的設計具有一致性。
立體效果能在頁面上製造出獨特的效果，前提是其它的部份得是相對的平面。避免試著讓你的設計全都變成像真實立體的感覺，因為：
- 你要花更多時間做出這個效果
- 這會讓整個網站變得很大(花更多時間下載資料)
- 你不必這麼做。立體效果要用到很多不同的圖案，不同的圖案應該是吸引人的重點，或者是用來強調「容易被接收的資訊」。全都做成立體的其實做過頭了。
12.漸層效果 (Gradients)
Web 2.0設計漸層的層次比阿爾卑斯山的山峰還要多。
為什麼漸層效果這麼好用
(Why Gradients Are So Useful)
漸層讓畫面不那麼的平淡。
- Alex Dukal：他們創造出非平面的插畫介面，做出不錯的效果，例如艾力克斯(Alex Dukal)的作品集。
- Aurum3 NewTech：漸層可以在更亮或更暗的色調之中淡化色彩，他們用漸層在這個網頁裡面製造出一種氣氛。
- Artypapers：利用背景的漸層創造出畫面的遠近感。由藍到白是一種常用的漸層色彩，製造出背景向水平線淡出的效果。
陰影、光暈，以及你在玻璃或塑膠按鈕上看到的反射亮光，也常打在漸層背景上看到。注意漸層通常在平坦的色彩或色調上最有效果。
- 在Curve2的首頁裡面，漸層用得很好，因為相鄰的色彩都是乾淨的灰或白。
漸層常被拿來加強網頁的基色(配合混合模式，例如在Photoshop中使用加亮顏色或覆蓋效果)，能創造出許多巧妙的色彩。
在這邊的例子上看來，亮綠色比深綠的基色要來得舒服而且友善。整體的效果很柔軟、豐富。
13.反射效果 (Reflections)
反射效果是最常用在漸層效果的樣式了，通常有兩種：
- 強光造成的亮面效果
- 亮面造成的反射效果
(Specular Highlights)
過去這幾年來，非常受到大家喜愛的效果有擬真的水滴、半透明的小圓珠，閃亮的玻璃質感按鈕等。我不知道這趨勢是從什麼時候開始的，但Apple肯定是裡面最有影響力的網站之一，例如他們像水一樣半透明的介面與質感。
底下是幾個例子。
- 典型Apple網站的玻璃亮面按鈕到現在都還在使用！它們都是利用按鈕的光源效果，加上內光暈、反光，做出玻璃質感的效果。
- 這些按鈕是從我最近一個重新設計的網站抓過來的畫面，它們都有一個很亮(從很強的白光上看起來)像黑色碳纖維的造型，從小圖示發出光芒的地方用對角斜線拉出一個漸層就做出類似的效果。
- 反光更銳利的玻璃質感。注意看看這些反光在圖形的邊緣是如何營造出圓形邊緣效果的。
- 類似的效果做成長方形就像徽章一樣。非水平的反光可以製造出多一點的動感。
- 這個反光按鈕是cafepress.com用的圓形反光效果，就像是用圓形一道光打在圓形的東西上面一樣。
- 這個web hosts Mediatemple的按鈕有更多的反光效果，但它的效果像是霧面玻璃的反光。
(That Shiny Table Effect)
最早又是從Apple開始的(我確定)。這真的是一個很棒的效果，到現在還是一樣受歡迎。過度的使用會很危險，現在有些設計師已經開始覺得看膩了。
記住，網頁設計師當然會比平常人更加注意這些東西，即使我們現在都不用這個效果了，但一般人看到還是會覺得這個效果很酷。
- 典型的Apple設計：灰色的反射倒影在白色基調的背景上淡出。
- 反射在彩色背景的倒影。
- 反射倒影在其中一邊淡出不見。
- 用誇張的角度與豐富的層次效果將倒影反射在物體上面。
14.可愛的小圖示 (Cute Icons)
小圖示在Web 2.0的設計之中扮演了很重要的角色。我們現在用的小圖示比以前更少了，但是卻更好而且代表更多意義。
小圖示如果可以很容易的就辨認出來，而且具有很清楚的意涵的話，它們會很有用處。可是在很多情形之下，簡單的文字反而更有效果。
過去這些小圖示有時候被過度的使用，好像每個連結或導覽列都一定得用小圖示似的。現在我們可以更廣泛地用清楚的文字來達到同樣的目的，不需要在一個面頁上用非常多的小圖示。
Web 2.0的設計師確實是會使用這些小圖示，不過他們只用在具有效益的地方，通常比較簡單、比較有空間的設計，不想要太過醒目，就可以用漂亮的小圖示來裝飾。底下的一些例子可以用來說明不同的情形。
乾淨簡單 (Simple and Clean)
造形花俏 (Cute and Quirly)
不一定得要做一個小出丘。
豐富的細節 (Richly Detailed)
麥金塔作業系統裡面就有許多非常有創意的小圖示，Enhanced Labs有更多的例子。
15.星芒圖案 (Star Flashes)
這些星芒圖案的標籤貼紙看起來好像就貼在網頁上一樣提醒你一些重要的事情。
這其實是跟低價商店學的促銷手法，也因為如此，很適用在一開始的Web 2.0網站，不過也很可能會讓網站看起來很低俗。它有很好的作用，但最好只用來吸引人的目光，提醒一些重要的訊息。
我建議一頁最多用一個這樣的圖案。
其它圖案看起來似乎是被過度使用的樣子，就順其自然了吧！
訂閱：
文章 (Atom)