HKWebDesignBlog.com - a Web Design Blog of Hong Kong

2010 年的 30 個對Web 的預測

admin — Mon, 30 Nov 2009 18:28:02 +0000

這是 Seoptimise 的 Tad Chef 對 2010 年的 Web 所做的 30 個預測，包括 social media（社會媒體）, business（商務）, mobile（移動）, marketing（營銷）, search（搜索）, SEO, web design development（Web設計）,Blogging（博客）, software（軟件） 9 個方面。

社會媒體

與 Twitter 相關的集成與應用在2009大行其道，2010年這種潮流將繼續。
Tumblr 在 Twitter 的影子下繼續成長，當 Twitter 失寵，Tumblr 或將終成氣候。
最終，社會媒體將隻剩下幾個大玩家，Twitter，Facebook，以及誰？
社會新聞網絡（Digg，Reddit），書簽網絡（Delicious）將過時，事實上，它們已經輸給了 Twitter。
社會瀏覽網絡（StumbleUpon）已經死掉，2008年，這類網絡有10多家，現在基本已衰亡，這個趨勢會繼續。

商務

眾多用戶規模沒有達到一定程度的創業公司在燒完他們的錢之後死掉。
當風險投資越來越稀罕的時候，越來越多的公司需要靠收費免費結合的模式生存。
為了活下去，公司和品牌必須在2010年制定出社會媒體戰略。
2010年，隨著商業帳號以及數據訪問方面的收費，Twitter 將開始盈利。

移動

某些智能手機系統因市場不夠大而死掉。
蘋果將丟失市場份額，雖然 iPhone 將輝煌依舊，但他們不能隻靠一樣東西永遠輝煌。
感謝 Google，我們將可能看到免費手機和免費通話，Google 准備在真實的手機上實現 Google Voice 以及 VOIP 以實現真正的免費電話。

營銷

在線廣告領域將更加實際，隨著 Web 的成熟，人們越來越不容易被騙。
Web 上的廣告將被內容營銷替代。

搜索

實時搜索將變得很普遍。
為了在搜索廣告市場上保持領先，Google 和 Bing 將相互模彷。
搜索定制將實現完全個人化搜索。

SEO

SEO 將無處不在，BBC 也不例外。
很多 SEO 專家將轉為地下。
不管喜歡與否，我們會看到越來越多的 jQuery 彈窗。

Web Design Development

移動應用繼續繁榮，為移動設備優化頁面將變得很普遍。
HTML5 和 CSS3 會為 Web 設計師提供更多功能，但仍會向前兼容。
對 YouTube 的審查將引發一些開源視頻嵌入技術與運動。

博客

博客越來越被接受，並成為 Web 的老牌媒體。
短小而清新的Mini博客（Tumblr, Posterous 等）將在 Twitter 一類的微博客與傳統博客之間開花。
隨著寬帶的增長，視頻將獲得最大程度的重視。

軟件

雲計算與基於 Web 的軟件將成氣候。
Google Docs 將吸引更多微軟 Office 用戶。
Google Chrome OS 將至少在上網本上同微軟競爭。

No related posts.

GeoCities 與 Meme : 走了哥哥, 來了個妹妹

admin — Mon, 09 Nov 2009 14:20:36 +0000

GeoCities 與 Meme : 走了哥哥, 來了個妹妹

Yahoo關閉了多年的免費空間服務GeoCities, 並且開放Meme加入了社交網路的戰局, 為何Yahoo會結束掉GeoCities這個老大哥? 又為何開始Meme這個小妹妹? 真的是走了哥哥, 來了個妹妹…

GeoCities開始於1995年, 於1999年被Yahoo收購, 正式關閉於2009年10月26日, 以下是關閉的畫面 (當做紀念吧)… 當時幾乎每個搞網路的都有GeoCities空間

關閉後不再提供註冊, 原有的用戶可以持續使用, 但是鼓勵舊帳戶轉移成付費用戶…這段期間應該是讓GeoCities用戶逃命用的

Yahoo 可說是時運不濟, 在2000年泡沫前以美金35.7億收購了GeoCities (TechCrunch說是28.7億), 再加上後續的動作讓使用者非常不爽而陸續出走, 如果不是這些天災人禍, Yahoo應該原本有機會把GeoCities變成Facebook, 或者主導目前的Web 2.0架構, 但是就這樣搞砸了 … 真是可惜至極

根據ComScore的資料, GeoCities美國流量的不重覆拜訪者下跌24% (2008/4的15.1M 掉到 2009/4的11.5M)

但是這樣的Traffic真的低到必須關站嗎? 應該是商業模式不符目前需求加上許多更好的免費空間服務的競爭, 使得GeoCities不得不關閉, 而Blekko創辦人Rich Skrenta表示有意願接手也沒有如願, 大概Yahoo也不希望讓日後的GeoCities變成競爭者 … 所以GeoCities不是自然死亡, 而是被掐死的, Yahoo搞垮了GeoCities, 並且完全不給他生存的機會, 真是情何以堪?

根據DMOZ的dump資料, GeoCities還有8萬多個連結存在於DMOZ, 也就是說應該還有很多有品質的內容還存在GeoCities, 但是這些資料可能因用戶已經沒有維護(或死亡?), 就這樣將永遠消失 …

這個狀況跟我們的文章”No Space, No Liberty“說過的一樣: No Space, No Liberty, 就算有了space, 還是沒有liberty, privacy, 在Internet裡想要談liberty與privacy, 好像是很遙遠的事情…

在之前文章”SEO觀點 : 我們都是白老鼠“也提過, 整個網路上的遊戲規則就是: 免費提供的服務, 使用者沒有任何權利 … 就算因為使用者的內容而產生利潤, 使用者依然沒有任何權利 (當然你有逃命的權利)

Yahoo搞死了GeoCities這個老大哥之後, 青春美麗的Yahoo Meme 妹妹出場囉, 打算讓大家忘記所有的不愉快

這個Yahoo Meme以微網誌與社交網路的型態出現, 但是文字內容可以到達2000個字元, 還可以貼圖與影音資料

(資料來源: 聯合報)

Yahoo Meme能否持續保持青春? 還是會步上GeoCities的後塵? 網路上的大咖遊戲, 實在已經不是升斗小民所能理解的 …

No related posts.

Google 網路購物搜尋服務 (Google Commerce Search)

admin — Mon, 09 Nov 2009 14:14:40 +0000

Google在2009/11/4宣佈推出Google Commerce Search, 可以義譯為「網路購物搜尋服務」, 這個一般的搜尋有啥不同? 這個服務可以做到什麼地步呢?

也就是讓網購業者可以把產品資料上傳給Google,並且自己定義頁面及搜尋功能,藉以提高購物的達成率

Google的官方網站的功能展示如下….

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

也就是讓網購業者可以把產品資料上傳給Google,並且自己定義頁面及搜尋功能,藉以提高購物的達成率

根據Google的說法:

Visitors spend an average of just eight seconds before deciding whether or not to remain on a website, so having a good search tool is important for turning visitors into buyers.

消費者平均在8秒鐘就決定了停留與否, 因此讓消費者很快的找到產品就可以增加銷售

這些搜尋的功能可以由Google Store大略瞭解這個Google Commerce Search的樣貌

這個Google Commerce Search跟Google Customer Search有些類似, 不同的是Google Commerce Search必須由網站另外提供資料定義, 並且需額外付費每年五萬美金, 兩者都是由Google的Cloud Services來運作,

The pricing model for Google Commerce Search is based on the number of products/items (SKUs) in your data feed and the number of search queries entered on your site each year. Pricing starts at $50,000 per year.

每年五萬美金? 對於網購大站來說, 自己應該都有能力建立類似的搜尋, 對於網購小站來說, 根本付不起每年五萬美金

況且這個Google Commerce Search是當消費者到達該網購網站才開始運作, 如果一般搜尋無法把流量導過來, Google Commerce Search就無用武之地

但是如果Google Commerce Search除了原本的功能之外, 還能夠以商場型態集合所有產品, 並且利用這些資料來提高Google一般搜尋的垂直搜尋效能(也就是透過Google Search可以較快搜尋到使用Google Commerce Search的產品), 或是加入到Google Product Search中, 那麼整個狀況可能就又完全不同了, 但是目前似乎看不出來有這樣的描述

另外, 提供更精準的產品資料給Google還要付每年五萬美金? 應該這個服務後續還會有許多修正吧!

參考資料:
Google Launches Commerce Search for Retailers
Google Launches Commerce Search to Boost Your Conversion Rates
Google Commerce Search – a Critique
Google Commerce Search DataSheet

搜尋引擎排名教學 : Search Engine Optimization Teaching

免費下載高品質的向量圖 – Free Vector Graphic Download

admin — Mon, 28 Sep 2009 20:12:15 +0000

Free Vector Download 是一個提供高品質向量圖檔的下載網站。大部份的檔案格式是 .AI (Adobe Illustrator)，另外有一部份是 .PSD (Adobe Photoshop)、.CDR (Corel Draw) 或是 .EPS (Encapsulated PostScriptd)。

一進入網站的首頁就可以很清楚地看見最新發佈的向量圖，你也可以依照「Most Downloads (最多人下載)」以及「Most Popular (最熱門)」的排列順序瀏覽網站裡的向量圖。在網頁右邊的側欄裡則有向量圖的分類，可以依照需求尋找圖檔。

根據站長的說明，目前網站擁有 200 套以上的向量圖。每一套向量圖都可以免費地使用於個人或是商業用途。

不管是尋找靈感、自我學習；或是工作、學業上的需要，相信都可以在 Free Vector Download 找到合適且具有設計感的向量圖檔。

網址：http://www.freevectordownload.com/index.html

49個使用發光效果的精選網站設計

admin — Thu, 24 Sep 2009 18:17:49 +0000

在網站設計中使用發光效果是當下的一個流行趨勢，它常常可以為一個網站帶來一些有趣和漂亮的界面，想要添加一些炫光效果的設計師可以使用 Photoshop製作非常有趣的發光效果。儘管之前我們有展示過一些使用發光效果的網站，今天我們將展示更多的此類網站設計，從這些網站中你將會看到不同的實現方式和不同類型的效果。

365 Days of Astronomy

No related posts.

28個出色的網站設計

admin — Tue, 22 Sep 2009 17:44:11 +0000

這裡整理了28個出色的網站設計，希望能夠啟發你的設計靈感。這些網站中的大部分都比較新，所以或許他們將很可能給你下一個項目帶來一些創意或想法。希望你能喜歡。

1. Alexarts

Alex為他的網站使用了一個巨簡單但是很現代的界面。點擊任一部分，將會有個彈出窗口。

2. Pampaneo

Pampaneo 使用出色的圖片和插畫來講述一個故事

3. Juan Diego Velasco

Juan使用了單頁佈局，並為其使用了鮮艷的色彩。

4. Metalab

與某些很好的JavaScript一樣，Metalab Design有一個很簡潔而且易用的界面。

5. Serj

Serj 使用很棒的圖片以及一個簡單而有效的佈局。有的時候，簡單很重要

6. Peter Pearson

Peter也使用了一個簡潔的單頁面佈局和一些很酷的圖片效果。

7. Cactuar.in.the.Phailbucket

Cole在其設計中使用精彩的矢量插畫和很棒的色彩選擇。

8. Fred Maya

Fred在這個設計中側重於簡潔、色彩和可用性

9. Galvin Castleton

這個相冊網站使用了單頁面水平佈局以及出色的圖片。

10. Chris Jennings

易讀性也是一個關鍵

11. Guerra Creative

漂亮的圖片和易讀的內容

12. 84 Colors

在這個佈局裡面，Cristiana的思想出格了

13. Feed Stitch

Feed Stitch的網站很有趣、創意、超級創意！

14. We Bleed Design

We Bleed Design 是一個非常棒的單頁面網站，使用圖片創意，並使用動畫效果在各部分之間跳轉。

15. Motty

Mooty在網站頭部是用了很棒的插畫，內容提示也很棒。

16. Cerity

Jonathan的作品均提供了一個簡潔的界面。

17. Creative People

CreativePeople的頁面有很棒的圖片和有趣的佈局。

18. Brooklyn Fare

Brooklyn Fare的網站是“公司網站如何脫穎而出”的很好的例子。

19. Tierra Virtual

agency的網站使用了一個動畫頭部，很有現代的感覺。

20. Merixusa

可愛的插畫 — 他們的作品的創意展示

21. Food, Inc

使用漂亮圖片的簡單和簡潔網站

22. Inicio

使用了很漂亮的色彩

23. CCSI

CCSI使用簡介的圖片和漂亮的滾動文本效果來吸引讀者進來。

24. Loodo

該網站將大量的內容和小空間融合在一起 — 看起來很容易! 他同時也製作了一個可愛的、創意的導航部分。

25. Guifx

華麗並不總能表達你的觀點，有的時候，簡單和好用就是成功的關鍵

26. Vyniknite

所有網站不可能看起來是一樣的。簡單到一個獨特的頭部可以產生很大的不同。

27. two24studios

很棒的紋理、排版和導航

28. Illusiv

很有創意的界面

結語

我希望你可以在這裡找到某些靈感。我知道我找到了～！如果你有發現很好的中文網站設計，請回復本文，多謝。

關於原作者：

Sean Geng是一個來自美國賓西法尼亞州匹茲堡的一個自由職業網頁設計師。喜歡創意和獨特的設計。可以在這裡查看他的作品集here。

No related posts.

2010年網頁設計流行趨勢 - 2

admin — Sat, 19 Sep 2009 06:10:42 +0000

2010年海外Web設計趨勢的第二部分，著重講解了反 Box 式佈局，單頁佈局，多欄佈局，巨型插圖設計，更多留白，社會網絡元素，講解式導航菜單，以及動態 Tabs 等設計風格。

例如: 1、反 Box 佈局
曾有一篇文章，講到反 Box 佈局。所謂反 Box 佈局，就是不再拘泥與傳統的 Box 佈局模型，而是採用一種更有創意的的佈局，然而需要指出，這種創意佈局需要非常注意易用性問題，一種新的創意佈局需要時間去慢慢成熟。

http://hipsterist.com/
http://www.getlondonreading.co.uk/Home/
http://www.colourpixel.com/
http://nikolamircic.com/archive/sms/
http://theautumnfilm.com/red-white-sale/us.html

2、單頁佈局

單頁佈局是使用一個單一的頁面展示站點的全部內容，這並不意味著站點內容少，這個頁可能很複雜，包含了大量圖形和動畫效果，加載的時間也會有些長。比如，用戶點擊導航菜單後，該欄目下的新內容會在舊內容處通過漸入漸出，滑入滑出等動畫效果顯示出來，而頁面其它部分始終保持不變。（白宮的最新網站的首頁就有這個意思 - 譯者）

http://www.arcinspirations.com/kobe/
http://www.taptaptap.com/#groceries
http://fishmarketing.net/
http://www.teamviget.com/

3、多欄佈局

多欄佈局（大於3欄）通常比較複雜，但通過適當設計，會對訪問者帶來更好的訪問體驗。最近幾年，Web 內容爆炸，用戶停留在一個網站的時間越來越少，就要求 Web 設計者盡可能有效地展示數據，既要讓訪問者多停留，又要讓他們更容易發現他們希望看到的內容。

多欄設計一般用於雜誌佈局或展示型佈局站點，一般使用網格佈局技術實現。多欄佈局一般使用概述/細節式結構，首先用多欄展示概述式內容，然後進入詳細內容的展示。Mozilla Labs 就是一個很好的例子。

http://labs.mozilla.com/
http://www.thedarlingtree.com/

4、巨型插圖式與多變背景設計

象巨型字體主導當前 Web 設計一樣，巨型插圖風格設計似乎也正流行起來，巨型插圖可以和巨型字體的結合使用，帶來更吸引人，更生動的效果。
另外，設計師們越來越喜歡使用那些色彩鮮艷的圖形提供背景，包含各種風格，抽像畫，剪貼畫，剪貼簿，裝飾畫，懷舊，水彩，有機紋理以及照片背景等。

http://www.mailchimp.com/power_features/
http://www.webdesignerdepot.com/

5、更多留白

這是近年來最值得期待，也是最有意義的 Web 設計風潮，設計師們在頁面留白方面越來越慷慨。（這也是我非常欣賞的一種風格，只可惜在我們國內，仍有大量的客戶認為滿噹噹的頁面說明你的公司實力雄厚 - 譯者。）

http://signup.createsend.com/signup.aspx
http://www.wilsonminer.com/posts/

6、”社會”網絡元素

任何人都喜歡流量與認可，在 Web 設計中加入社會網絡元素，可以鼓勵你的訪問者參與進來。（不過在 Web 2.0 日漸式微的今天，也許滿頁花裡胡哨的社會網絡元素正逐漸變得讓人厭煩 - 譯者）

http://www.komodomedia.com/
http://www.psdtuts.com/
http://www.peakflowdesign.com/wordpress/essential-wordpress-toolkit-for-creating-new-themes/

7、解釋風格的導航

傳統的水平導航條，一般是一些標題連接或圖標鏈接，用戶很難從這些短短的信息中真正知道這些導航所代表的內容，解釋性導航會在欄目導航菜單上提供進一步解釋內容，讓用戶更好地理解這些欄目代表的內容。

http://www.davidhellmann.com/

這類導航一般使用更容易表達內容的大圖標，加解釋性文字，鼠標 Hover 效果也必不可少。

8、動態 Tabs

這類設計一般在頁面加載時，將多個 Tab 中的內容一次性加載，通過 Javascript 或 CSS 效果，實現鼠標指向某個 Tab 時，該 Tab 中的內容立即顯現。（微軟官方站近一年來一直是這個設計風格的代表。- 譯者）

http://expressionengine.com/
http://www.komodomedia.com/
http://www.apple.com/trailers/paramount/eagleeye/
http://www.forgetfoo.com/

原文出處：smashingmagazine
翻譯文章來自：68design.net

原文的範例圖片還包含有網站的連接，如需直接參考網站，請到原文處點選連接！

2009年網頁設計流行趨勢(下)

2010年網頁設計流行趨勢 - 1

admin — Wed, 16 Sep 2009 14:12:46 +0000

我們這些網站設計者都是善變的。我們樂於嘗試不同的事。我們樂於觀察人們如何與我們的的作品進行交互。我們樂於嘗試用特別設計方法，這些方法有可能成為主流並變成標準、優秀的設計方法。

因此，新的設計方法不斷湧現，越來越多的設計者注意它們並運用這些方法技巧，新的趨勢也就自然出現。

在過去的幾個月裡，我們已經分析了眾多的網頁設計，觀察了新的趨勢，權衡了眾多設計決策與代碼解決方案。在這篇文章裡，我們展示了2009年網頁設計的趨勢：新的發展，新的設計元素，新圖形技巧方法。

首先看一下我們這幾個月確認、發現與觀察到的主要趨勢。在這一概述裡，你會發現每個趨勢與很多精美案例，這些案例能夠讓你在新項目中激發靈感。

Letterpress 文字凹凸

Rich user interfaces 華麗的用戶界面

PNG transparency png 透明

Big typography 大文字排版

Font replacement (sIFR, etc.) 新字體

Modal boxes 對話框

Media blocks 多媒體播放模塊

The magazine look 雜誌化的視效

Carousels (slideshows) 滑動展示(滑動門)

Introduction blocks 介紹模塊

現在開始仔細瞭解以上這些趨勢。

1. Letterpress字體凹凸效果

2. Rich User Interfaces

用戶界面在現今網站與網頁應用上以已經變得更精美與更實用。在過去的幾年裡，應用方面的用戶體驗已顯著提升。這促使高級、敏感的用戶界面已經與桌面應用程序具備了巨大的相似性。
Ajax與flash已被廣泛使用，用來實現用戶動態的交互，它們已被期望成為更高級、尖端、專業的解決方案。

Both examples are evidence that designers of Web applications are paying significantly more attention to the way in which functionality is presented and are trying to improve the user experience with more interactive and responsive solutions.

3. PNG transparency PNG透明效果

png 透明效果，雖然ie6不支持，但是過去幾年裡，似乎已經被廣泛使用。很顯然，設計者證嘗試更好的融合背景圖片與內容，並期望實現印刷媒體、雜誌常見的效果。在很多案例中，半透明背景讓重要的設計元素，例如標題公告等能更加突出。有時也會用在彈出窗口上（如jquery的對話框效果)

4. HUGE Typography 大字體

2009難免大號字體排版依然流行，設計公司、個人展示、產品網站、在線服務等都將使用號字體排版來傳達它們網站最重要的信息。

5. Font Replacement

因為設計者越來越關注文字排版，所以他們也更加關注設計稿與網站的字體。經典的字體像Helvetica、Arial、 Georgia與Verdana無疑還是占主導地位，但是我們也觀察到一些字體取代傳統字體的趨勢（例sifr)。

6. Modal Boxes (Lightboxes) 模態化窗口

（對話框一般分為兩種類型：模態類型（modal）與非模態類型（modeless）。所謂模態對話框，就是指除非採取有效的關閉手段，用戶的鼠標焦點或者輸入光標將一直停留在其上的對話框。非模態對話框則不會強制此種特性，用戶可以在當前對話框以及其他窗口間進行切換。）

模態化窗口（對話框）基本上算是第二代的彈出窗口。它作為傳統js彈出窗口的用戶友好型替代服務，讓用戶能夠把注意力集中到網站最重要的區域。模態化窗口同時也被用戶行為（例如註冊登錄）觸發。

7. Media Blocks 多媒體內容模塊

隨著寬帶互聯網接入，用戶能夠承受並瀏覽比幾年前更豐富的內容。於此同時，設計者也抓住這個機會通過更具吸引力與記憶效果的途徑去呈現內容。因此，這就難怪很多產品網站用多媒體內容來達到宣傳的目的。這些元素的主要優勢是他們能夠有效的傳達內容並讓用戶能容易消化信息。

8. The Magazine Look 雜誌化的版面設計

博客設計中的一個有趣的進步是它適應各種傳統（印刷）媒體中常見的技術。文章頁面的排版，字體的使用，插圖與文字的對齊往往也適合用傳統技術去印刷。基於柵格化的設計正被普遍採用並用作概要介紹、產品頁面與大的博客。這種情況很少出現在公司網站與在線購物網站

9. Carousels (Slideshows) 圖片滑動輪播(中文網站應該已經很普遍了)

酷炫flash xml動態相冊
 6個國外免費的flash xml動態相冊下載
 javascript仿flash效果柔滑相冊左右滾動、透明漸變(小圖預覽、箭頭控制)
Flash CS3 as3.0三維效果多圖片滾動預覽組件
 Flash+php相冊 Imagevue 1.7
>>更多flash圖片輪播源碼

10. Introduction Blocks介紹區域

頁面左上角是網站的最重要的區域，因為這是訪問者注意力的關鍵位置。所以在網站的這個位置花心思去展示最重要的信息，確保讀者能迅速獲取信息。

Stay tuned!保持住，不要換台

This article covers only 10 of the over 25 trends we』ve identified over the last months. The second part will be published next week. We』ll cover new layouts, new visual approaches and new design elements. Please stay tuned.

這篇文章只涵蓋了過去幾個月我們總結出的25個流行趨勢中的10種，第二部分將在下周發佈，期待中…..

2010年網頁設計流行趨勢 - 2

完整、專業的線上調色工具 – Color Scheme Designer

admin — Sun, 13 Sep 2009 12:30:53 +0000

雖然我不是專業的視覺設計人員，但是我能想像「配色」的工作在這個領域裡所佔的地位是多麼的重要。因為人類的眼睛對顏色是敏感的，不同的顏色會讓人產生不同的心理感受（也就是視覺），所以在一個視覺設計的作品當中，顏色的搭配是可以傳答出各種不同的訊息給欣賞的人們。

就拿網頁設計來說，網頁配色的好壞能影響造訪者對這個網頁的觀感，甚至還能起到是否願意留下來繼續瀏覽網頁的關鍵作用。但是在成千上萬的顏色裡，如何選出合適的搭配並不是一件簡單的事。就好像畫家會在調色盤上面嘗試各種顏色的組合，在電腦世界裡，也有所謂的調色、配色工具幫助視覺設計人員完成配色的工作。

Color Scheme Designer 是一個免費的線上調色工具，而且不需註冊就能使用。它主要是以色環的方式讓使用者選擇顏色，然後再加上六種不同的配色方案，讓使用者可以很容易地調出令人賞心悅目的配色。另外它還能讓使用者預覽將配色套用在網頁上的效果，以及匯出 HTML 色碼、Photoshop 色票檔、隨機配色、色盲模擬等功能。

網站：http://colorschemedesigner.com/

Color Scheme Designer 的六種配色方案：

Monochromatic（單色配色）：以單一顏色做為基礎色，再以飽合度、亮度變化出其它搭配的色。因為是屬於同一個色系，所以這種配色法較能調配出舒適的色彩感受。
Complementary（互補色配色）：以主色以及在色環對面的補色調出對比效果明顯的配色。
Triad（三分色配色）：以一個主色以及在色環對面的兩個補色組成較為柔合的對比效果。
Tetrad（四分色配色）：以兩個主色以及在色環對面的兩個補色營造出一種強烈的視覺效果。
Analogic（類似色配色）：以一個主色以及在它兩旁等距的兩個補色調配出給人優雅、簡潔的色彩感覺。
Accented Analogic（互補類似色配色）：以三個類似色為基礎，再加上色環對面的一個對比色構成一種既不失優雅又能強調重點的有效配色法。

Color Scheme Designer 使用介紹：

選擇配色方案：在左上角選擇一個配色方案，依照所選方案的不同，在色環上會有不同數量的圓點，我們可以利用滑鼠拖動圓點改變它們在色環的位置。在色環右邊會即時呈現配色的預覽圖，在預覽圖的下面有「Light page example（明亮）」以及「Dark page example（暗沉）」可以讓我們「模擬」網頁套用這個配色之後所產生的效果 ▼

預覽網頁配色：在網頁裡面點一下可以交換補色（如果有兩個以上的補色）▼

調整配色：在色環上選好色調之後，我們可以在「Adjust Scheme」調整顏色的「亮度」和「飽合度」，或是利用「Preset」下拉選單選擇一個預設值，像是「Max Contrast」為最高對比的配色；「Pastel」則是粉色配色等 ▼

顏色列表：在「Color List」會列出目前配色的所有顏色加上對應的 HTML 色碼 ▼

匯出色票：右上角的「Export」功能表可以讓我們將目前的配色匯出成各種格式的色碼表，其中包括 Photoshop 的 ACO 色票檔和 GIMP 的 GPL 色票檔 ▼

五個為你的設計添加光影效果的簡單技巧

Peter 仔 — Wed, 09 Sep 2009 19:50:21 +0000

現實生活中無時無處不存在著光照和陰影。你看到的每樣東西都是通過光影反射形成它的形象。視覺上，光影幫助我們辨別事物，認知他們的材質、尺度和透視。

所以如果要讓我們的網頁設計更加自然、有動感且真實直觀，正確理解光影效果就變得非常重要。以下是助你更好利用光影的五個技巧，好好運用它們，能讓你的設計更加精緻，從眾多的頁面中脫穎而出。

光照與陰影的原理快速剖析

下圖中，光源來自左方。高光是光照最強的部分，陰影位於距離光源最遠的地方。光影的存在幫助我們感知有關物體表面材質的大量信息。

不過你可能要問，這和網頁設計有什麼關係？

如果你打算創造豐富、有質感的界面和網站，光影能助你一臂之力。如同許多傳統藝術家們在繪畫上對光照的運用，你也可以利用光照給你的設計以深度和視覺趣味。

1、使用光源

應該說利用光照時瞭解光源在那裡是最為重要的基本問題。光源位置決定了高光和陰影的位置（不過在網頁設計中你能打破這些規則）。在Photoshop中，你可以利用圖層樣式中的「全局光照」保證你創造的所有光影效果的光源都在一個位置。

控制好光源位置能夠為你的頁面設計創造獨特氣氛（即使僅僅是一個簡單的線性或徑向漸變也能達到效果）。光影效果還能引導視覺中心的轉移。

網絡上的例子
Campaign Monitor 使用發散光源，創造出一種日出效果。

Icebrrg 利用光照使頁面潛入水下。

Mike Precious 使用了不止一個光源，增加了視覺趣味，而且各處都使用的是桌面檯燈的光照效果。

Deaxon 在logo後有一個微弱的光源，使頁面的焦點集中在了logo上。

2、漸變

現實世界中，沒有什麼事物總是平坦色調。光影附著在一切事物上。利用漸變是創造深度和真實性的好方法。

運用漸變的關鍵是不要做得太過了。在Photoshop裡繪製漸變時，請在圖層樣式裡做漸變疊加，這樣能保證你的漸變的可編輯性，而且隨著圖層的縮放，漸變也能跟著無損地縮放。

網絡上的例子
nclud 的網站使用微弱但有效的漸變，用以區分和組織內容。

一眼看去，CSS Ninjas 似乎使用的是平直顏色。不過其實每個色彩區域都有微弱的漸變，創造出迷人的材質效果。

3、高光

高光能平衡陰影，應該位於物體靠近光源的邊緣。高光大部分時候都被忽視了，因為如果用得好的話，你幾乎感覺不到它的存在。不過並不是所有情景都適合高光的存在，一個細微的高光就能造成物體表面拋光度的巨大不同。高光越「尖銳」，物體表面的光澤感就越強。

要鑒賞高光，我們需要放大這些細節。做高光設計的時候，把你的設計稿放大一倍以上是個好辦法，因為按原始比例顯示的時候，你可能都沒法弄清自己在搗鼓些什麼。

網絡上的例子
Icon Dock 和 Newism 都在頁面上邊緣使用了半透明的白色製造高光效果。雖然很不起眼，但是卻為設計提供了強烈的光澤感。

蘋果公司的網站大家應該都很熟悉。不過你大概沒有注意到導航菜單底部的細微高光。正是這一高光，給與菜單以凸出感。

4、基本陰影

同漸變一樣，投影也被網頁設計師們廣泛運用。當正確使用時，投影的確能為設計增加視覺深度和質感。關鍵還是不要做的過度或者濫用。

陰影深度取決於光照方向和強度，以及物體和投影面的距離。光照越強，陰影越銳利越暗；光照越弱，投影也就越弱。

網絡上的例子
網絡上關於投影的例子實在太多了。

LinkedIn 在邊欄底部添加了極為細微的投影，創造出深度感。

Google — 可能是互聯網上最難設計的頁面了 — 仍然在搜索頁上使用了細微的投影。

5、高級陰影

要賦予物體立體感，除了簡單的投影，你還有很多選擇。長陰影能極大地改變頁面中物體的空間關係。
下面的例子中，同樣的可樂罐，被賦予不同的陰影和暗部之後，整個空間位置就顯得完全不一樣了。

網絡上的例子
Emotions by Mike 聰明地運用了陰影（以及光照），硬是把平面頁面轉換成了一個地板。

Superkix 使用投影，讓運動鞋漂浮於頁面之上。當你縮放頁面時，投影還能移動，就像光源也在轉移一樣。

Sofa 在純白背景上，通過極佳的光影運用，生生造出了一個地板。

更多資源

以下內容為英文：

‧[urlhttp://www.photoshopcafe.com/tutorials/cast_shadow/cast_shadow.htm]Photoshop Cafe[/url]
在Photoshop中創建光影的教程
‧Advanced Shadow Techniques在Photoshop處理陰影
‧PSDtop Blog
理解投影
‧Peachpit
在Photoshop處理光影
‧Aviva
創建真實陰影
‧PSDtuts
用光影賦予文字以生命
‧Build Internet
光照與陰影：Photoshop中的高級漸變
‧PSDtuts
用簡便製作光影效果… 以及一個咖啡杯！

另外推薦實例集：35個極佳運用光影效果的網站（英文）

關於作者：

Rob Morris是在日本工作的澳大利亞設計師。作為自由設計師，他的別名是 Digitalmash，客戶遍及世界各地。你可以在 Twitter上關注他的冒險。

No related posts.