圖像設計(Graphic Design)的製作門檻高，需要兼具創意和製作技巧。不過在Web上除了從頭自己製作圖像之外，也可以將既有的影像直接放在網頁上。前者需要技術，後者則需要編修能力。尤其是近年來網頁設計者有豐富的圖庫可以運用，因此，取而代之的是圖像選擇與編修的能力就很重要。所以不會製作圖像沒關係，有優異的編修能力就行了。
圖像傳達抽象內容
能夠傳達服務內容氛圍的影像處理法
圖像和文字一樣都是視覺資訊的一種。其中以拍下某一瞬間的影像更能賦予網頁主題具體的印象。圖像比起需要慢慢細讀的文字，更能及時傳達內容概要，所以在進行處理時不是只要把有主題性的影像排在一起就好，而要讓影像具有抓住瀏覽者的眼與心的特質。在Web上主要是將影像與影像互相結合以強調意境，或是將影像適當裁切，以傳達某件事實或概念。
剪裁可以將焦點放在不同的主題上
「剪裁」是指重新定義影像的顯示範圍。全身影像可以改成大頭照、位於畫面旁邊的人可以移到中間等，讓我們可以只取得所需部分。這樣的加工動作不只是在修正影像，也有改變影像主題的作用。
著作權
圖庫是在製作時間與經費有限時的好幫手，您可以買圖庫光碟，或是從網路下載來使用。由於很多圖庫光碟都沒有著作權，沒有使用期間、次數、目的地限制，買了就可以自由使用。但也因取得容易，如果當競爭者的網站也使用到相同的圖片，那可就糗大了！！而要解決這樣的問題，您可以簽訂有著作權管理的圖像獨占使用合約。採用這種方式時，每幅影像的使用都要依照使用目的、區域、期間、大小等付費。這種合約條款複雜，比較不方便，但比起大費周章地自己拍攝，倒不失為一個值得考慮的選項。
Design Samples
http://www.billyharveymusic.com/
Billy Harvey Music
故意使用不很精緻的半身照，自己動手貼貼黏黏的感覺憑添一些去趣味。
http://www.au.kddi.com/au_design_project/index.html
KDDI au：au design project
呈現出由近而遠的深度的商品影像，架構頗有創意。
http://www.imperialhotel.co.jp/j/
東京帝國飯店
優雅的主題LOGO搭配上相得益彰的美圖影像。
商品影像的有效呈現方法
圖片的位置與大小
跟實體商店的商品陳列一樣，以商品介紹為主的網站商店等給人的印象，也受到商品影像的影響。商品的呈現方式會大大地影響集客量，所以除了單純排列各個產品影像外，還需要再花些心思。建議可以努力的方向有三種，包括在影像外框上做有特色的加工、在影像的背景加上顏色或漸層效果，以及將數張影像合成為一個影像等。這三種手法都是在拍完後的影像上後置處理加上去的，所以一般與攝影無關的製作公司也做得到。
向攝影名家學習
各個時代都有當代的優秀攝影家，我們也要對這些影響現代廣告表現方式甚鉅的名家多家接觸。例如攝影作品故事性濃厚的Elliott Erwitt、以固定的美學意識控制攝影對象的Bruce Weber、建立時尚攝影風格基礎的Pennlrvin，以及Robert Mapplethorpe等人的作品，至今仍給世人莫大的驚奇。
Design Samples
http://www.asahibeer.co.jp/hon-nama/
Asahi本生
層疊的設計架構和影像的風格有種統一感
http://www.barberosgerby.com/
Barber Osgerby
拍攝物體的構圖好像圖畫一樣，很有趣。
文字與圖形
在圖像中加入文字
企業品牌網站中，很多會使用傳達企業印象的關鍵影像。一般而言，關鍵影像都會搭配文字標題，也就是結合文字與圖像。文字放的位置不能放在影響圖像畫面的地方，要找個和圖像取得平衡的位置。如果找不到，就要進行影像的加工處理，安排出一個能放文字的地方。此外，為了要和影像取得平衡，在選擇影像時，就要選擇能安排文字進去的圖片，或是剪裁圖像來調整圖像要素(主要指拍攝對象)的位置。
JPEG中容易掉落的陷阱
顯示器的顯示效果各不相同。即使使用相同的作業系統，不同的顯示器顯示出來的影像也會不一樣。尤其以紅色、橘色、黃色等暖色系的顏色差異更大，其中對比強烈的暗色系暖色調，顏色差異更是大到以為看到的是不同的網站。若我們使用Flash的話，則因顯示器不同而產生的色差狀況比較不嚴重，但若使用的是JPEG格式，則產生色彩偏移的情況會比較多。一般說來，在網頁中使用JPEG格式的情況比GIF格式多，但若不注意配色的話，結果可能是難以愈想的。
Design Samples
http://www.subaru.com/
SUBARU All-Wheel Drive
大膽的文字配置，更襯托出圖像有強有弱的效果。
http://www.sum41.com/
sum41
文字風格和手繪風格的文字搭配在一起，很具相乘效果。
提高設計性的去背影像
使用的地方及其效果
影像去背是在雜誌設計上常見的技巧。包含背景的影像形狀通常是四角形，所以當幾張影像排在一起後的畫面，看起來就像是疊箱子似地會出現很多直線，實在不太好看。如果影像都已去背，則在設計上就可以自由運用。此外，影像的背景可能會有和所要設計網頁無關的雜物，所以必須將背景去掉。去掉影像上無關緊要的資訊，並讓編排設計時更好運用，而這正是去背景最大的兩個好處。
製作去背影像
一般做法都是以Photoshop來進行去背作業。先用筆刷做出遮色片(Mask)，再用向量工具在要去背的拍攝對象周圍畫出路徑，再予以分離。外面也有些業者專門負責幫人做去背路徑。用Photoshop則可以用簡單設定輕鬆完成去背工作；如果是高解析度影像需要去背去得很完美，也可以去買Photoshop專門的外掛程式來用。例如Corel公司的knockOut 2這軟體就是去背高手，不管是水滴還是頭髮都可以輕鬆地完成去背工作。
Design Samples
http://www.scope.ne.jp/
scope(スコープ) - インテリア家具・雑貨のオンラインショップ
徹底去背的影像用於商品介紹上，感覺很乾淨、清爽
http://jp.sun.com/
Sun Microsystems
Linktext配上去背影像當小圖示，網頁內容一目瞭然
由數張影像合成的影像
確定傳達的主題，選擇合適的種類
用圖像、文字、顏色來傳達網站內容或印象的關鍵影像，可以用影像或圖形加以合成來製作。合成手法大致可分兩種，一種是將數張影像重疊；另一種是將數張影像並排。前者可以用圖層的方式表現豐富的顏色，給人耳目一新的印象，但是由於使用影像素材數較多，製作時要更精緻細膩，所以難度較高；後者的類型則是在正正方方形狀下呈現出一種知性的氛圍，讓照片上的訊息更容易傳達給瀏覽者。
影像與隱喻(metaphor)
沒有隱喻的功能，影像就不可能乘載訊息。以顏色為例，人們常以青色代表冷靜、紅色代表熱情。以圓形為例，圓形代表圓融、方形代表知性，這些都是一種隱喻。設計者常常要做從言語的印象畫出圖形的訓練。但是，在正式設計時，就要注意不要侷限於毫無新意的隱喻。常說的俗語、諺語、歇後語等老生常談的東西已經算是「死喻」。設計者要多培養生動、且能獲得眾人共鳴的隱喻能力才好。
Design Samples
http://www.microsoft.com/en/us/default.aspx
Microsoft
雖然影像不大，單靠顏色和架構還是傳達了訊息和架構。
http://www.diesel.com/
diesel
影像呈現的力道和LOGO設計的質感難分上下、平分秋色，產生一種力感。
將文字資訊轉換成視覺資訊
便於資訊搜尋的網頁設計
Web網頁上使用的影像不只是裝飾，更被視為幫助理解文字的重要視覺資訊。尤其是現在的Web使用者幾乎都只瀏覽自己需要的資訊。因此影像可成為幫助使用者找到所需資訊的指引，也可以增加網頁易讀的效果。只要想想，如果有一點空間時間，你會看全是文字的雜誌，還是適度放些照片的雜誌？答案不就很明白了嗎？
國外的圖庫
照片是製作Web時不可或缺的要素。尤其是要表現人物或生活各面向的印象時，會需要使用國外拍到的照片。例如想使用人物表情的照片，但由於國人的表情太容易突顯個人特色，而不適合使用；又例如想使用商業街道的照片，可是又想找張一般人不知道在哪裡拍的照片時，就會需要用到國外的圖庫。在此介紹兩家您不可不知的國外圖庫廠商「Getty Images」和「Photodisc」。尤其在Getty Images收購了Photonica公司後，現在更提供了許多色彩感覺獨特、和國內風情大異其趣的照片。
Design Samples
http://dma.ucla.edu/
UCLA Design | Media Arts
快拍照片在傳達媒體藝術的氛圍的同時，也傳達了訊息。
http://www.nttchiba.com/
NTT 東日本 千葉分行
用有趣的圖片介紹網頁內容，讓網頁更活潑。
使用插圖的網頁設計
插圖會影響意境的傳達，該如何選擇？
網頁設計要使用人物時，插圖會比照片更好用。如果是照片的話，人物的五官、服裝、表情等都必須與設計主題一致才行。且攝影時很難控制和攝影無關的其他條件，而且還要花成本。而插圖就是這種情況下的替代方案。此外，有個性的插圖還可有效地突顯所要表現的主題。不管是「萌」系卡通漫畫人物的表現手法、或是具藝術氣息的簡約手繪風格等，都可以讓人從插圖中推想網站內容，也是一種不同的設計手法。
日本的圖畫文字(pictogram)
以前日本的識字率並不高，所以就有一種以圖畫文字傳達的「南部文盲曆」，岩手縣很流行製作這種文盲農民曆。在那個時代，常常用12支來表示日期或時間，所以常用動物的插圖來表現。驅邪避兇的日子就用鬼在哭的圖案來表現，朔日(農曆的初一為朔日，這一天整晚均看不到月亮)則用把東西藏起來的圖案來表現，非常有趣。
Design Samples
http://www.hybridworks.jp/
HYBRIDWORKS
精緻的插圖呈現精緻的風格，成為網站最吸引人的招牌。
http://www.themeatrix.com/
The Meatrix
老少咸宜，任誰看了都會露出會心一笑。
http://www.manneken.co.jp/index.html
Manneken比利時插畫
網站的介面和插圖風格相契。
以圖表方式傳達數據資訊
用心設計圖表以清楚傳達資訊
能夠視覺傳達數值差異大小的圖就是圖表。圖表的種類很多，例如各項資料獨立的直條圖、直條中又有各項資料的堆疊直條圖、資料明細很清楚的圓形圖、數據變化一目瞭然的曲線圖，也可以並用曲線和直條圖。想顯示的數值方式不同，可選擇的圖形也不同。數據的正確性當然很重要，但是能有助呈現效果的方法，或以不同顏色顯示不同資料等配色方式，也要懂得善加運用才好。
設計與畫草圖
很多專家都投入於將數據依時變化的情形，予於視覺化的資訊圖形領域上。這些專家們首先要做的就是用鉛筆在紙上打草稿。在必須思考圖與數據關聯性時，必須先直接用手將想法畫在紙上，還沒思考整理好的東西，先不要用電腦操作為宜。
內容參考網站：
Apple’s Tipping Point：Macs for the Masses(Nixlog)
http://www.nixing.com/apple/sketches.php
Design Samples
https://www.blogger.com/start
Blogger
一看就知道要怎麼做，充分發揮「圖解」的精神。
http://jvsc.jst.go.jp/earth/guide/
地球導覽
數量以箭號的大小粗細來表現，所以不看數字也能理解其中的關係。
http://www.mitsue.co.jp/product/
Mitsue-Links
將公司服務的特色以雷達圖呈現，令人印象深刻。
流程圖
有助清楚說明處理程序的內容
能將整段文句的內容用圖來表現，資訊會更容易理解，瀏覽者也會對內容更有興趣。對Web而言，「是否清楚易懂」幾乎可左右Web本身的價值。說明性質的內容最好可以儘量清楚、短時間內就能了解為宜。流程圖能夠因應這樣需求，最好能夠多加運用。這樣的方式對於分成好幾個項目的服務內容、辦理手續的方法、產品優點等都很能發揮優點。
以圖代文
流程圖除了可以用來整理所要公開的資訊內容，也可以直接用來製作Web網頁。您可以用類似組織圖的流程圖的方式來製作。登入成功時與登入失敗時的面如果用圖形來表示，網站的架構看起來就會更簡單。本流程圖的格式也可用於中小規模的網站建議，建議大家都能精通這種作法。
內容參考網站：
資訊建築(information architecture)、互動設計(Interaction design)用的視覺詞彙
http://www.concentinc.jp/ja/visvocab
Design Samples
http://jp.sun.com/solutions/infra/software/webinfra/
Sun Microsystems
不管使用者是否具專業知識，都能感受到複雜產品的優點。
粗糙的背景呈現真實觸感
低真實性(low-fidelity)設計的重點
用Flash設計圖像配置自由度高的網站時，可以讓效果帶點粗糙、隨性的氣氛。如果要表現觸感，可以設定為低真實性(low-fidelity)，再做出有點髒髒的、不乾淨的感覺即可。不過這樣的表現方式只是一種效果而已，所以要適度運用，不要讓想傳達的資訊被效果吃掉了。另外，要表現「髒」也要善加控制，不要讓人覺得看起來很不舒服才好。
Point：自由配置組成要素有一點要注意，就是組成要素要能在畫面上形成一個三角形。將醒目顯眼的要素先安排做為三角形的頂點，注意不要某邊重、某邊輕，之後再放上其他要素。就算進行位置的微幅調整，也要注意這三者要保持平衡，這樣整個畫面會比較容易安排。
肌理(材質)
在知覺心理學中，肌理比覆蓋物品表面那層皮的定義還更深、更廣，例如樹木就是山的肌理、山又是山岳地帶的肌理。推到最後，整個土地就是地球的肌理。肌理似乎有著左右構造物順序的力量。而在設計上，也要認為肌理的概念，善加利用一小部分對整體的影響力量。
Design Samples
http://www.richapplefool.com/
Richapplefool
有墊布(mat)感的畫降低網頁的數位感
http://www.fmm.jp/
馬莉亞傳教士法蘭西斯可傳道會
不整齊、好像用手撕過的紙，讓主題更能傳達溫暖與溫和感。
使用小圖示讓內容更容易清楚呈現
以充分表現功能或內容的小圖示建構一個好用、順手的網站
Web網站用的小圖示可分為「表示操作後發生結果」與「表示內容種類」兩種。小圖示可表示登入、列印、寄信、開啟新視窗、連結到外部網站、確認購物卡等等。資料則可分為需要密碼的資料、聲音、動畫、文字、PDF等。FLASH比HTML格式的Web網頁操作方法變化更多，使用FLASH建構的網頁，會有更多使用小圖示的機會。
什麼是小圖示(icon)
在電腦的世界當中，圖像或繪畫符號等小圖示肩負著請使用者進行某些操作的使命。然而，小圖示的意義並不只如此。ICON這個詞原本是指宗教崇拜的偶像或聖像，後來成為一種象徵的意義。也就是說，任何人共通的感覺以圖像呈現的東西都統稱為「圖示」，意思頗深。
Design Samples
http://www.a-blog.jp/
a-blog
左邊選項的部分加上表示選項內容的小圖示，馬上就能看出內容不同。
http://www.whatdoiknow.org/
What Do I Know
本例全區導覽的小圖示配置得不著痕跡但又效果十足。
http://www.city.nagoya.jp/
名古屋市
各選項都有顯示內容為何的小圖示，讓人一目瞭然。
design note
傳達設計與照片
廣告宣傳等傳達設計上，照片往往是最重要的要素。不只是因為模特兒或風景引人注目，照片還有清楚傳達主題的「資訊」功能。瀏覽者看到照片傳達的訊息覺得很有興趣，再被附屬的文字資訊吸引。像這樣想讓消費者對特定主題有興趣的企業或團體所辦的活動，英文就稱為「campaign」，中文譯為「活動」。
說到最有名的「活動」，1994年起開始進行至今的「Got Milk」牛奶促銷活動可說是當仁不讓。這個活動的做法是拍下各界名人在嘴上留下牛奶鬍鬚的照片，登在上大做廣告，另外也做成高畫質的海報，展現名人個性的各個背景與牛奶鬍鬚的對比煞是有趣。直到現在還是有很多明星繼續代言這樣的平面廣告。這個活動可說是美國廣告界的名作，但是應要注意的還是視覺效果的品質。
臉上沾到牛奶雖是個讓人印象深刻的樣子，但若照片拍下的人物表情、選擇的背景情況、照明等沒有配合，還是很難傳達產品訊息。這個例子充分說明了視覺表現的力量。在Web上常常只將照片視為網頁素材而已，然而高品質的照片卻有可能是最有利的武器。同時也希望能有更多免費提供的照片可供使用。
--- 節錄自"WEB LAYOUT 設計的美學" 旗標出版股份有限公司 ---
閱讀全文...
電腦上可取得的資訊主要都是文字。文字是有形體的語言，所以本身已有其樣式(style)。當網站設計中用到文字時，文字的樣式就變得很重要。對網頁這樣以文字為重要資訊的媒體而言，字型並非只是裝飾而已，它最重要的使命就是傳達資訊內容，並要讓品質較低的顯示器也能清楚呈現。不了解這一點，就很難有效運用文字樣式。
字型、行距、字距、文字大小、文字顏色等相關設定都是樣式。一點小小的設定，就能時而展現歡樂的氣氛、時而呈現流行感。不過對一般網頁而言，最應優先處理的是「可讀性」。
一目瞭然的開頭
網頁標題適用的文字樣式
網頁標題的字體都會比較大，所以用的字型要像招牌一樣工整一點、穩一點。電腦分中、日文的全形字以及英數、符號的半形字兩種。在設計標題文字時就要注意這其中之不同，思考全形和半形字如何搭配。此外，中、日文字型和西歐字型不同，能否搭配得宜會影響標題效果。
設計性高的西歐字型
網頁設計上，光是標準西歐字型就非常好用了。如果您還是希望標題字再更有個姓一點，這時您可以買一些對設計很有用的西歐字型，而其中又以migre Font公司的字型以深具個性而聞名。此外，FontFont公司的字型產品、LucasFonts、T26等公司也很值得向各位推薦。至於你要問我哪種字型一定非有不可，那就是Linotype系列了。
Design Sample
http://www.kokuyo.co.jp/
KOKUYO
文字和上下保持夠寬的距離，看起來相當醒目。
http://www.inwei.jp/
廣方圓
從要素之間的間距、配色、設計架構等都要有其特色。
標題和內文的配置要注意不要頭重腳輕或腳重頭輕
掌握躍動率，就掌握了設計質感
在設計當中，影響文字可讀性的並非大小或粗細等單個文字樣式設定。對人而言，東西看起來如何，本來就是要有相對比較的對象才能決定。例如，小標字體雖小，但是和內文之間只要有足夠的間距，看起來還是醒目。運用這種相對比較對象的不同，感受隨即不同的特點，就能讓設計樣式更豐富多變。
何謂躍動率？
指內文字體大小、小標字體大小或是字體高度不同。內文字體大小12pt配小標字體大小16pt的躍動率很低。如果是內文字體12pt配小標字體26pt，躍動率就會很高。可見面積大的印刷品比較適合較高的躍動率，進而產生較好的對比效果。尤其是報紙的運動版更是需要有較高的躍動率。躍動率高除了給人強烈的印象外，也可以讓人便於從標題當中找到所要的內容。躍動率的概念不只可用於文字，也可用於圖片或視覺要素。
Design Sample
http://www.frogdesign.com/
Frog design
躍動率低，可是小標題字體夠粗、間距夠寬，整體設計不會造成瀏覽的負擔。
內文部份要能輕鬆瀏覽
配色和間距設定都要設定好
網頁中功能操作與文字內容常常會並列在一起。在追求網頁易讀性的同時，還要配合網頁目的來營造出包括設計風格等在內的整體樣式。尤其是提供新聞、生活資訊的網頁更要注意可讀性。設計重點在於配色要讓文字內容明顯，以及內文區塊和其他要素之間的距離，要設定得恰到好處。換句話說，最大的課題就是要讓文字與其他要素分清楚。
將視線集中於內文
如果想要強調內文部份與導覽部分間的反差對比，首先可以運用配色的技巧。內文部份的顏色如果想要設為黑色或深灰色，與背景成對比，以求畫面可讀性的話，附近的網頁組成要素的彩度就不宜太高，這樣可以避免搶過內文或畫面混亂的情形。如果再如之前所述在導覽部分與內文部份設定足夠的間距，畫面看起來就會更清爽。
文字安排要有足夠的空間
以下是要在800×600像素標準顯示器顯示時，設定三欄式樣式之各欄寬幅大小的標準數值。中間的文字資訊空間如果有左右兩欄的兩倍，瀏覽起來會比較沒有負擔。標準設定一般都是中間內文字體設為12pt(px)，每一行32個字左右，這樣會比較好看。
網站設計的死角
中文報紙都是由上到下，由右而左的編排方式，從讀者的視線移動方式我們可以推斷右上、左下的空間會形成死角。因為讀者看報會先從右上看起、看到中間再看到左下角。那麼網站又是如何呢？這就要看標題和導覽的位置而定了。在顯示範圍中，只要有一個醒目的標題，這個標題對角線上的空間就會相對地變得比較不醒目。如果設計的樣式是將導覽部分放在左邊，右下角就會形成死角；相反的，導覽部分安排在畫面上方，下面的內容再採兩欄的方式，就比較不會形成死角。
Design Sample
http://jvsc.jst.go.jp/universe/luna/
Japan Science and Technology Corporation! Return to the moon
以文字要素的易讀性為優先，採簡單的兩欄式設計。
網站LOGO設計樣式豐富多變
用堆積木的方式，架構重心很穩的網站
網站LOGO就像網站的招牌一樣，具有很大的存在意義。很多企業網站乾脆就用他們公司的LOGO來當網站LOGO，但有時也會碰到需要有網站本身標誌的情形，所以大致了解LOGO製作的秘訣還是很重要的。首先要注意的就是，幾乎所有用的徒刑都不出圓形、三角形、四角形這三種。對於這點，喜歡用圓形文字等做小圖的人要特別注意了。如何讓LOGO整體能穩穩地「頂天立地」，才是設計者該考量的重點。
「長體」和「平體」
在一定的空間範圍內，如果文字數多，就要把字體調窄調長，這種手法稱為「長體」，其祕訣就是將字型調得稍微窄一點，但是又不會太明顯。如果調得太窄，字體看起來太長，就會破壞字體本身的形式。如果是由上而下讀來，字體會看起來比較長。將字型調寬的這種技巧稱為「平體」。由左而右讀起來時，文字上方的空間較大，文字下方也會比較穩的感覺。
Design Sample
http://www.mediathatmattersfest.org/mtm04/
MEDIA THAT MATTERS 4
LOGO字型很穩，下方再加一行平體的副標題，感覺就很協調。
http://www.aromatiqueltd.com/
Aromatique
手寫字型和裝飾影像搭配得很協調，畫面感覺很乾淨。
有效運用各種字型效果
突顯大標題或小標題的基本技巧
改變文字樣式以呈現出文章重要性是大家都很熟悉的設計方式。現在我們再進一步將不同字體大小的字放在一起。為了讓人對內容的印象更為深刻，我們可加強大標題或小標題的質感。看看我們週遭的書籍或商品包裝，您一定不難發現很多商品名稱都是不同字型的組合。只要慎選合於網頁主題的字型，再注意大小設定，就可以呈現出文字的萬種風情。
全形字型呈現的風格差異
Gothic字型呈現的風格是簡單而又現代。它有個特點就是雖然字小，還是很容易辦認得，因此常用於內文或導覽標籤、圖片說明等。字體調粗時看起來就會很有力度，要強調的部分也會很清楚，調細時又給人中性的感受，不管和什麼網頁組成要素一起用，都很協調。比平面媒體更重機能性的Web網站上常常都會使用Gothic字型。
明體的字型在筆劃的結尾做了些像鬍子一樣的裝飾。正式且具知性的這種字型適合用於公文、報導等，例如平面媒體中就常使用這種字型。不過這種字型有個缺點，就是字體小一點時不易辦識，使用時要特別注意大小。另外，這種字型也不適合用在網站導覽文字。
西歐字型呈現的風格差異
Sans-serif字型相當於日文字型中的Gothic，由於沒有裝飾看起來很清爽，任何內容文字都可使用。
Serif字型相當於明體，和明體一樣給人正襟危坐的感覺。另外，明體古典的感覺也跟具現代感的serif系列字型不同。這種字型在英文報紙上很常見。
Script是指手寫字型。取自筆記書寫方式，又給人很正式的感覺，另外還有草寫的字型。
Design Sample
http://www.nttdata.co.jp/
NTT DATA-At the Forfront
分別使用了日文字型和西歐字型，感覺和印刷品一樣很有質感。
http://www.aoyagisikkiten.co.jp/
青柳漆器店
網站LOGO的手寫字型，和稍微拉長的標題明體搭配得可說是天衣無縫。
內容文字直寫
中文和英文直書的呈現法
在網路上有時候也需要表現中文情懷。而在進行這種網頁設計時，就會需要直書方式來呈現內容。電腦的世界一般都是以橫書為主，工具列的文字編排功能也是以橫書為設計基準，因此，除了改變方向外，也會需要做細微的調整，甚至還可以用適合直書的字型。了解了這些，就可以做出精緻、和影像相當協調的網頁設計。
不同的基準線設定
在電腦中輸入文字時都會有基準線來對齊文字，沒有特別設定的話那就是位於文字下方。這是根據西歐文字的特色而做的設定，只是中文也得套用一樣的設定。在直書時，如果完全不做任何調整，基準線會在文字左邊，整個文字看起來就會像是重心往左傾。如果直書的文字當中有英文或符號，基準線就會不同，這點要特別注意，看是要調整設定，或是將整段文字設定成對齊中間直線(置中對齊)。
英文的直書方式
如果是點綴性質的話，文字部分在畫面左邊時就由下而上，在畫面右邊時則是由上到下，這樣看起來比較自然。
Design Sample
http://www.busho-aichi.jp/japanese/index.html
武將的故鄉─愛知
扁長的內文和字型讓人想起古早的日本報紙。
清單選項方式的選單架構
有效運用設計空間的選單配置
畫面兩邊縱向的分區導覽，採列出數項連結文字(link text)的清單選項方式。清單的形式就是一條一條列出來，清單的區塊由標題、項目符號（如●◇★等）或數字、以及每項的文字三個要素所組成。只要依設計目的，調整這些要素的位置關係或邊距，就能有效運用設計空間。
三角形項目符號清單
標題的第一個字和三角形項目符號置左對齊。標題下方行距設為文字大小的1.5倍，三角形符號的大小要以標題首字的橫向中央位置為準。項目符號和文字之間要空一個字大小的空間。
圓形項目符號清單
如果是圓形項目符號，與項目文字之間的距離就可以比三角形項目符號和文字之間的距離窄一點。
Design Sample
http://www.hayonstudio.com/home.php
Hayon studio
上下都取很大的間距，感覺很簡單、無壓迫感。
http://www.intel.co.jp/
Intel
不同的選單用不同的項目符號，讓整體設計的外觀和感覺都很統一。
導覽的標籤和字型
兼顧網站樣式和操作簡易度的字型
Web的導覽也可以使用文字表示。導覽用的文字我們稱之為標籤(label)，標籤設計會影響到網站整體的設計質感。導覽按鈕(Navigation button)上的標籤位置稍微有點移動、或按鈕整體樣式和標籤樣式不協調等，都會降低網站設計的品質。此外，字型也會大大影響標籤醒目與否。在設計時要避開不易瀏覽、不醒目的表現方式。
標籤字小時
網路上可讀之最小文字大小為10pt，若要以此為導覽標籤文字時，那麼用對比色較強的Gothic字型比較不會受其影響。相反的，如果對比色不明顯，又使用明體字型，就會造成瀏覽上的負擔，也不好操作。
一般的標籤
若使用12pt大小的設定，則不管是使用Gothic、或明體都可以一目暸然。10pt的粗體Gothic還是很難讀，12pt的話就好讀多了。
適用明體的按鈕樣式
使用漸層或纖細的中間色時，就很適合使用明體。這時文字可以設大一點，以避免不易瀏覽的問題，並給人知性的印象。使用漸層的按鈕顏色較與眾不同，也能給人清爽的印象。
字型的種類
可以設定文字樣式的字型資料大致分為TrueType、NewCID和OpenType三種。TrueType是Windows系統用的字型，一般而言電腦中都會內建。NewCID則是專業人士使用的字型，多用於設計工作。而OpenType的使用者也有越來越多的趨勢。本來使用者需要配合作業系統購買的字型，可是OpenType在Windows、Mac兩種系統通用，並能安裝在伺服器上，不管在哪種作業系統環境下都可使用，因此漸受歡迎。
Design Sample
http://www.locksoflove.org/
Locks of Love
標籤文字和網站可愛的風格搭配得宜到好處。
http://www.uogashi-meicha.co.jp/
日文和英文並列，具知性美。
http://www.amazon.com/
Amazon
這裡用的字型很細，但卻不妨礙閱讀。
圖像與說明文字
有助理解圖片的設計要素
平面媒體上每個圖片一定都有其說明文字(caption)，以助瀏覽者了解該圖內容。雖然其屬輔助性質，但現在已經有越來越多使用者，會先透過圖片和其說明文字大致掌握訊息內容，再來閱讀內文以補充所需資訊。因為Web的設計空間有限，因此安排說明文字位置和採用的方法，都需要用點心思來設計。此外，像Flash這類設計自由度高的軟體，可以讓人做出和印刷品並無二致的說明文字設計，您不妨試試。
Web與Unicode
在做印刷品時，常需要自己造字(這些情況幾乎都是發生在人名上)，或是購買字型來使用。可是在網路上人名的顯示卻很容易發生問題，例如SMAP的「草彅剛」等就是很好的例子。由於這樣的字一般的文字碼無法顯示，所以常常都會用假名表示。可是，現在這個問題已獲得解決，因為Unicode這種字碼可以顯示全世界的文字。
Design Sample
http://www.manneken.co.jp/menu/stand.html
Manneken比利時鬆餅
包圍住文字的元件其大小關係保持絕佳的平衡。
http://www.toraya-group.co.jp/
虎屋株式會社
說明文字的位置關係呈現一種平面設計的協調。
http://jvsc.jst.go.jp/earth/guide/
地球導覽
箭號的樣式等說明文字以外的網頁元件雖然小，但是看得很清楚。
種類眾多的表格樣式
表格的樣式種類
一件事情可分成好幾項的這種資訊，很適合用表格的方式呈現。表格名稱或分類條件可分別寫在行或列的儲存格上，再以顏色或框線來區別。這個樣式非常簡單，可是儲存格內各項對齊等需要注意的地方很多。這種樣式如果都是直線，看起來會很沒意思，所以不管是有色儲存格，或是表格中的內容都需要取足夠的間距，不要讓畫面看起來擠在一起。
XHTML和表格
現在製作Web網站的標準程式語言是XHTML。使用XHTML時，由於裝飾性的要素並不包含在標籤碼(tag code)裡，而要用CSS來指定。HTML將複雜的設計全部用table標籤來做，但是XHTML則是禁止在表格以外的部分使用table功能，而是先用標籤做出表格，再以CSS設定顏色或文字的位置。
Design Sample
http://www.thebodyshop.com.tw/
THE BODYSHOP
表格的設定讓商品看起來很美觀。
http://hmv.com/hmvweb/home.do
HMV UK
清楚區別開每一行，讓資訊更清楚易懂也更優美。
魅力無比的文字設計
運用文字獨特的外形，架構出整個畫面的方法
以字型的外型或位置配置引人注意的設計我們稱之為字型藝術(typography)。本來這個字的意思是包含文字本身的設計，但廣義而言，文字為主的設計樣式也可算在字型藝術的範疇。文字比圓形或方形等圖形要素的外形更複雜，且文字當中又有其意義，相當適合用來做知性的表現。不過，光是排列文字是無法表現出什麼風格出來的。因此我們就從「深度的表現方式」切入，說明如何用文字來做設計。
文字藝術
電腦問世之後，字型的表現更多樣了，但在此之前就有很多將文字外形提升到藝術層次的作品。尤其是20世紀前半的作品到現在仍很具影響力。俄羅斯結構主義藝術家Aleksandr Rodchenko以像建築物一樣，從紙面上立起的字型藝術給圖像設計界嶄新的衝擊。另外Bauhaus的Paul Klee也以TYPEFACE為主要結構的油彩畫，將文字的可能性更推廣了一步。這兩位都是大家需要認識的藝術家。
Design Sample
http://www.toraya-group.co.jp/history/his02_001_02.html
虎屋株式會社
嚴謹的格線架構讓僅有導覽部分的網頁設計很有力。
http://www.adametrope.com/
Adam et Rope
故意將設計放斜，讓四四方方的格線設計展現獨特的個性。
如何讓文字資訊的顏色和設計保持融洽的關係
對文字資訊而言，灰色比黑色更具功能性
有人說灰色是人類唯一不覺得刺激的顏色。內文字型顏色使用灰色最大的好處，就是較不易引起讀者眼睛疲勞吧！另外，對比的強弱也會影響可讀性。強烈的對比很醒目，清楚易讀；較弱的對比則較不醒目，不易閱讀。黑色很適合用來提供文字資訊之用，但和其他顏色仍差很多，也可能讓讀者眼睛疲累。所以在這裡，我們就來介紹如何發揮並利用灰色的優點。
Point1：在背景色明度高、彩度低的版本，可以加強文字的對比以讓整體有強弱變化。背景色、文字顏色的對比色若都很高，則整個畫面會感覺好像沒有整理好、很複雜的感覺。
Point2：中間灰色文字呈現的感覺。眼睛不易疲累的灰色最適合用來顯示文字。文字大小設為14pt，比黑色但設為12pt還更容易瀏覽。另外，以灰色為內文，以黑色的標題時，標題自然會更為明顯。
Point3：內文文字如為10pt，顏色設為黑色，行距空大一點，就會很清楚易懂。字體很小又使用灰色的話，文章整體看起來就會好像是配角一樣，這點要多加注意。
冷色系的配色與內文顏色
青色或綠色等冷色系的顏色會讓人覺得很遠、很深。背景為冷色系時內文就很適合用灰色。灰色也是讓人感到距離較遠、深度較深的顏色，所以背景和內文就會呈現一定的距離感，而這樣的距離感會讓設計很有一體感、很穩的感覺。和內文為黑色字型的版本相比，更為一目暸然。
暖色系的配色與內文顏色
背景顏色為暖色系時，內文顏色就很適合搭配用黑色字型。如果搭配灰色，看起來會很像被吸到裡面去，感覺很不協調。這時要用和暖色系一樣用很明顯的黑色，才會感覺平衡。
灰階70%是最易閱讀的文字顏色
物體存在的知覺是靠該物體及其背景亮度之差來識別。關於亮度的差或對比的區別能力，60歲的人只有20多歲的人的一半左右，所以不管哪個網站都需要很小心考量文字內容的可讀性。
亮度差在顯示器上就會變成是明度的差，所以可說文字和背景色的對比越高，便越適於所有人來瀏覽。亮度差最大的顏色搭配是文字為原色的綠(G)色、背景為黑色。這個灰度的差為了配合Web設計的目的將其轉為灰階，並將文字顏色與背景顏色反轉後，文字就變成70%的灰色。所以背景為白色的網頁搭配70%的灰色是最適合瀏覽的。
Design Sample
http://en.red-dot.org/
Red dot design
灰階設定在50%到60%的網站，灰階顏色差異不大，很易於瀏覽。
http://www.illums.co.jp/about/
ILLUMS Japan
內文部份為灰階50%、10pt的明體。整個架構看起來很舒適、很高雅。
http://www.misawa.co.jp/otikaku/index.html
MISAWA
灰階80%、亮度差恰到好處，易於閱讀。
design note
Web與字型
字型不光只是用來讀而已，還可以用形狀來表現。字體較粗的字型比字體較細的字型更醒目，感覺也較有份量。字型設計在電腦成為設計工具的90年代初期開始發展，有越來越多設計者投入數位字型的製作，字型可能的呈現方式更受到矚目。其中Neville Brody更是將字型可能性大為拓展的一位設計師，他追求的文字設計是不只要能讀，還要能讓人眼光久久不忍離去。在Neville Brody出現後，日本甚至還出現一種只有漫畫台詞的海報，只有字型樣式的表現方式蔚為流行。
然而，時序進入2000年，隨著資訊流通型態的Web網站和手機使用率增加，文字和文字表現開始被切割，原因也許是因為網路還可以有聲音、動作等過去平面影像所沒有的要素可以運用，所以很多人就朝著那些方向挑戰去了。於是，文字資訊的功能就只重視資訊取得的效率性和易讀性而已。過去有好幾度說要開發在HTML也可自由使用各種字型的技術，可是似乎又沒有使用明體(正式)或Gothic(休閒)以外字型的需求。重視字型的設計性而將部份標題影像化的做法又有很多人覺得不方便。不過，現在已經有一種可以讓文字兼具使用便利性與設計性的技術－sIFR(或是Scalable Inman Flash Replacement)問世了，樣式與功能再也不是魚與熊掌不可兼得的難題了。
--- 節錄自"WEB LAYOUT 設計的美學" 旗標出版股份有限公司 ---
閱讀全文...
網頁的基本結構可大致分為三類，一是跳到各小項目首頁的全區導覽列(global navigation)，二是在各個小項目中移動的區域導覽列(local navigation)，三是各個小項目中的文字、圖案等內容。這些全部清楚區分後，再依各個區塊設計不同的樣式，就完成了最基本的架構。
介紹完基本畫面結構之後，就要設計網頁的內部組成要素，我們稱之為「標誌系統設計」。將網頁中各種按鈕、清單、標籤的樣式，以及字體與擺放的位置，做統一的設計，是掌握網站設計的基礎，如此才能讓整個網站的設計愈有整體感。
在設計網頁時，從整體版面的結構規劃，到細部組成的製作與排列，都有許多重要的技巧。只要牢記這些原則，並時時注意細節與整體的一致性，就能設計出好的網頁版面。
倒L字型的版面設計類型
所有網站都適用的設計基本型
導覽的部分位於畫面上方以及左方，將資訊有效地索引化的這種形式，是最多人採用的設計基本型。由於這種方式可以容納很多連結按鈕，因此很適合用於設計滑鼠按鈕次數少的網站，只要將設計性的重點運用在網站LOGO、全區導覽、或是左邊的導覽部分，就可以拉大和其他網站的差距。此外，這種設計的L字型大小設定，也會影響到網站的樣式。
標準倒L字型：倒L字型的畫面結構是將網站整體共用的全區導覽放在上方，從全區導覽選擇之各選單的子導覽放在畫面的左邊，子導覽和內容會隨網頁更動。這種類型適合提供分類項目多、內容豐富的網站。
分類項目少、實體內容較少的網站適合的類型：從首頁點選全區導覽時會出現各個小項目的這種選單類型，就很適合分類項目少或實體內容較少的網站。左邊這欄出現的是展開資訊各層內容的導覽。
另外，在同一個階層內的導覽則安排放在實體內容的上方。如果要提供的資訊內容較少，也可以將網站整個資訊用此結構來呈現於畫面上。
更簡單的倒L字型：直向導覽的結構，一次所能列出的選單比橫向導覽的更多。例如流行服飾用品等網站，提供的就是一個商品項目的網站。而整體選項較少的網站，就可以將選項統一在畫面左右兩邊，這種導覽方式使用起來會比較方便。
小心!!不要塞太多資訊
像入口網站等專門提供資訊的網站，就要儘量減少使用者一層層找到資料的點擊次數。減少點擊次數一般認為是可以透過導覽或網站設計來解決的。
此外，一般企業的網站則會希望一次提供的資訊少一點，改成讓瀏覽者一層一層地找到自己所需的資訊。因此，設計的主流也從「資訊量大型」慢慢變成「資訊量少型」。在思考設計架構時，希望可以先考慮到如上的現狀，再決定是否要採用倒L字型這種可以加入很多介紹內容的樣式。
Design Sample
http://www.fmworld.net/fmv/
富士通FMWORLD.NET
全區導覽和分類導覽的關係一目了然的樣式。
http://cweb.canon.jp/co-profile/company/index.html
Canon網站
網站LOGO和分類瀏覽列都有的標準型。
上方選單型的版面設計類型
公司網站最常見的瀏覽架構
上方選單型適合可將資訊單純地依項目分類的網站。所有的網頁共同使用的選單稱為全區導覽(Global Navigation)。首頁只有全區導覽，可以將操作性能最簡化，而各網頁的首頁則是安排用以連結到各小項目的子選單(區域導覽：Local Navigation)。這種方式充分考量到顯示器可顯示的範圍。全區導覽顯示出提供哪些資訊，並利用關鍵影像(key visual)打造企業的形象，這樣的網站設計方式可加深瀏覽者對企業的印象。
Above-the-fold(可顯示範圍)
指網站的目標顯示器(target monitor)一次可顯示的最大範圍。這本來是報紙或標題呈現方式的用詞。報紙在送到家家戶戶時一般都是折成四分之一大小，重要的頭版消息的排版，都要安排得讓讀者很快就能看到標題或掌握其中內容。而這個折成四折的一面就是above-the-fold。不管是報紙或網站，版面編排或設計都要注意，讓閱覽者在閱覽的瞬間，就能掌握到最重要的資訊。
Design Sample
http://nagafuji.jp/
長藤寬和設計室
讓版面呈現「破格」的效果，故意要讓讀者大吃一驚。
善用格線系統
所有版面設計都可運用的基本技巧
「格線系統」(grid system)是用來調整本文區和圖片位置的基本排版技巧。除了處理文字外，也可以運用於安排圖像素材的平面結構，可說是設計技巧的「王道」。基本的做法是在整個畫面上拉出導引線，沿著線安排各個素材，但格線的基準值會影響到畫面整體的平衡感，因此開始設計前必須要先訂出這個基準，而如果設計的是網站，基準則是網站LOGO的大小。
拿掉格線吧!
格線系統可以讓網頁設計的各個要項正確對齊，整體印象讓人感覺次序井然，然而這樣也可能會陷入單調、無趣的窼臼。所以會用格線法進行設計後，也要學習不拘泥於格線，以做出更具豐富變化的設計。
Design Sample
http://www.folietto.at/
folietto
一看即知是直向拉出格線的設計法，整個格線架構相當嚴謹。
http://www.cci.co.jp/
Cyber Communication
這種做法是將格線直接運用在網頁當中。
http://www.aiga.org/
AIGA Design Forum
這種格線架構讓網站LOGO的設計更為醒目。
快速分割版面設計空間
以黃金分割為基準，漂亮地進行空間分配
「黃金分割」是指建築物、繪畫等，在造型上進行空間分配時，常常用來做為基準的矩形比例，在我們日常生活中常用運用到黃金分割比的矩形做設計，如撲克牌、名片等。這個比例聽說是人類視覺認知覺得最美的形狀。做網頁設計時如果您用格線系統來進行畫面分割，就可以使用此比例來設定基準網格的大小，以便讓畫面看起來更具整體感。就算只是畫面中的某個部分採用這個比率，也能夠讓您的設計呈現出極佳的均衡感，可說是極佳的矩形比例。
1:1.618
憑直覺做設計就不用網格嗎?
街頭的海報等的廣告媒體中，有些看來好像只是將這些插圖隨意安排而已。這種憑直覺的設計樣式，是不是和使用網格的設計手法不同？其實不然。這些乍看之下毫無章法的設計，有不少都還是有其格線架構的。並不是使用網格，成品看起來就一定會很網格風。網格並非完成一板一眼、方方正正的設計的方程式，而是讓人有所依據的工具。
Design Sample
http://www.wedgwood.jp/
Wedgwood官方網站
以直向長方形為基準，用網格架構出整個畫面的實例。
http://www.design-museum.de/vitra/
Vitra Design Museum
畫面中有些部分分為矩形、有些非矩形，視覺上看起來比較開闊。
http://www.pdk.pl/index_f.html
Powszechny Dom Dredytowy we Wroc_awiu S.A.
中間的主要畫面雖然是相同比例的矩形，可是卻故意放斜的，感覺趣味橫生。
碎形(fractal)網頁設計
避免畫面雜亂的設計原則
「碎形(fractal)」是指局部的結構與整體的結構很相似的意思。網頁設計方法中也有一種方式是讓區塊的形狀與整體相同，或是同時使用幾個相似的形狀，以讓畫面呈現規則性。例如，全區導覽等五個主要的功能構成的畫面中，全區導覽的選擇有五個，分類導覽的選擇也有五個。這樣的做法主要的訴求是畫面簡單，易懂。採用這種法則，可以做出相當簡單的網頁設計。
讓瀏覽者印象深刻
網站很重視好用、易懂等功能性，但企業的網站還得同時顧及企業的品牌訴求、發揮廣告媒體的功能。電視廣告等媒體都是以讓觀眾記得廣告內容為第一目的，所以網站也是一樣，採取的樣式也要讓人印象深刻。又要顧及搜尋的便利性、Web標準，又要顧及可用性，真的很辛苦的工作，但希望大家身為設計者，還是能找到網路設計表現的新出口。
Design Sample
http://hochouki.com/
日本助聽器工業會
用了很多矩形讓整體感覺很方正。
http://www.dankimo.com/
男用和服協會
中間Flash部分的功能有三個，選單群也只有三個，感覺很有律動感。
將整理好的資料反映在版面設計上
將資料群組化再運用版面設計進行連結
當文字、圖像，以及導覽等內容資訊集中在一個畫面時，要將各個內容材料一體化，就必須要用位置關係或顏色來做連結，利用位置關係將素材予於群組化，就要善用邊界的效果，而邊界寬窄的安排所造成的客觀視覺感受，正是設計師要培養的能力。在設定邊界有困難、或在有限的範圍內，必須區分操作性等功能時，則可用配色來進行相關連結設定。
安排的位置不同，相關的程度也不同
安排的位置與關聯性的印象有關。如果每個地方的邊界都一樣，就會給人「統一」的印象，有的地方邊界較寬，那會像是分成兩組或三組；如果邊界很大，佔各項要素的二分之一左右，就會給人「擴散」的印象。而「擴散」會給人各內容並無相關的印象。
安排的位置和顏色在關聯性尚有何不同
安排的位置再加上顏色後，變化就更多了。「統一」中再用顏色加以區分的話，就可以給人「條件相同，但內容有所不同」的印象。分成兩組或三組的話，顏色則有表現優先順序的意思，在「擴散」當中，則讓人感覺在眾多不同的項目當中仍具有相關性。
您真的知道嗎?
位置相近的圖，比位置較遠的圖看起來更有相關性。您一定會覺得這種事是基本常識，不用說也知道。可是世界上卻有很多設計根本就沒有想到這些基本的事情。實際上越是覺得理所當然的事情，就越難以有形或無形的方式表現出來。認知科學當中，把腦中所想的事情以有形的方式表現出來，或是告訴他人，就稱為「外化」。任何感覺如果不能外化，就無以判斷真假。整天都埋頭苦幹的設計師們，更要特別注意這點。
Design Sample
http://www.epicurious.com/
epicurious
右邊的設計看起來像全區導覽的延長，可以看出操作上的相關性。
http://www.misawa.co.jp/
MISAWA
這個網站不是用位置來呈現相關性，而是用其他方法來表現不同的屬性。
http://tec.taiko.co.jp/
大興物產WEB目錄
只以配色來區分內容屬性，以畫面的整體感為重。
容易一眼找出所需資訊的設計
魔術數字7與設計
「魔術數字7加減2(MAGICAL NUMBER OF SEVEN PLUS MINUS 2)」是1956年George A.Miller發表的心理學法則，點明人一次能處理的資訊數上限。「人一次能掌握的事情約為7個」。這個法則應用在日常生活上很多地方，例如，報紙一個版面除了廣告的地方外，會登的報導大約是7個，而電氣化產品的操作性能大約是7項。而這點也可以運用在網站上。
內容架構上要去蕪存菁
如果網站內容分區多於7個時，就算整個畫面可以容納得下，還是會有缺點，就是很難一眼就找到要找的主題內容。不只如此，也無法讓閱覽者很快看出這個網站的主題為何。尤其像是要建立公司品牌這種目標越是明確的網站，內容結構就要越單純。
培養「比」的感覺
所有設計中，構成設計本身的各項主題要素之間要安排在什麼位置、要設定多大多小等，都要與周圍主題要素相比較來決定。簡單來說，在一個小的圖的旁邊放個更小的圖，原本的那個圖就變成比較大的圖了。在設計的世界裡並沒有絕對的單位，總是會隨與周圍事物的關係而產生新的狀態。掌握住「大的東西」為什麼看起來比較大、「小的東西」為什麼看起來比較小的這種「比」的概念，在設計上是非常重要的。
Design Sample
http://gap.co.jp/
GAP Japan
善用LOGO標誌的知名度，將架構盡可能地簡化
畫面有秩序，瀏覽更容易
各組成要素位置關係的統一及其效果
在公共設施或醫院這樣的建築物中，都有讓人潮往來更順暢的「標誌系統設計」，這些設計除了要統一樣式外，就連放置的高度或大小等也都會予於統一。具有一定操作性的網站設計也一樣，確定好設計要素的配置可以降低操作的困難。設計的秩序不只會影響使用性，也會影響美觀。定出組成要素的位置關係，在網站設計而言可說是相當基本的一個概念。
閱讀引導標誌的統一
閱讀引導標誌的設計室最容易統一的。要統一時，不只要注意形狀要統一，還有閱讀引導標誌和文字之間邊界的比例也要遵守法則，這樣才會協調。
按鈕樣式
在「執行」或「送出」這些操作按鈕的樣式已經統一的網站，表示「上一頁」、「下一頁」等表示移動的操作按鈕上用像圖一樣的小標誌或小圖樣(icon)，就可以讓整個設計看起來層次提升很多。按鈕的顏色要和連結文字(link text)的顏色統一，讓顏色也有表現相關性的功能。
緊急出口的設計
緊急出口的標誌是一個人急著跑向一個出口。其實這個標誌是世界統一的，設計者是日本設計師太田幸夫。聽說綠色和白色的配色，是因為人在吸入煙時，會將這樣的顏色看成黃色，所以設計者才做這樣的顏色安排。
Design Sample
http://www.dsp.co.jp/
Digital Scape
整個網站都用統一的箭號標誌
http://www.k10k.net/
Kaliber10000
按鈕和小圖示的樣式都有固定規格，設計水準相當高。
http://download.com/
Download.com
可以點選的文字字型都予以統一
有效配置方塊或文字
運用網格設計完成畫面結構
要讓設計樣式不會鬆散，可以從文字、圖片到細節部份，都運用網格法來配置。雖然實際在進行時，主要只是在畫面上設定導引線而已，不過，該對齊的地方是否好好對齊，卻是這種設計能否成功的關鍵。因此在進行設計時，最重要的就是兼顧細部的調整和畫面整體的協調性。所以在設計時要時而近看、時而遠看自己設計的感覺。
無表格設計(No table design)
要在網路上顯示複雜的表格時常會用「設計表格」(Layout table)的手法，可是這個方法卻有讓HTML程式碼(source)複雜化的缺點。於是，後來的人就用CSS來控制各組成要素的位置，而這種流派就稱為「無表格設計」(No table design)。採用這個方法，強調的就是能夠因應Web標準技術。
Design Sample
http://8011web.com/
8011web.com
此網頁中以左邊長條狀為基準來切割畫面空間。
http://www.alistapart.com/
A List Apart
網站LOGO影響整個畫面的空間劃分。
運用留白技巧的設計法
如何運用留白
所謂留白，是為了讓想要強調的影像等要素有更佳的呈現效果，而在其周圍留下空白空間。有人會認為網站的目的是提供資訊，留白等於就是「浪費空間」；可是這樣的設計效果具有相當清楚分明的感覺，所以在此還是想將這種手法當成一種設計技巧來介紹。像LOGO或商品影像這樣，想與其他部分或樣式做區別時，這種方法就相當好用，而且就像使用大量展示面積的家具用品展示店給人的高級感一樣，留白的空間也會給人一種很有型的感覺。(留白不一定是白色的，而是指一塊空白的區域。)
畫面上方留多點空間的重點
瀏覽器的發展日新月異，近年來更是很多人關注的焦點。分頁式瀏覽器(Tab Browser)讓使用者不用新開瀏覽器，在同一個瀏覽器中就可以開很多個不同的頁次來瀏覽網頁，很方便。各個網站可用自己設計的按鈕來操作，可是有時候碰到上方選單型設計時，常常就會不小心按到瀏覽器的按鈕，尤其是網站的按鈕和瀏覽器的按鈕接近時更是如此。所以希望讀者們在設計時，可以留個10像素左右的距離為宜。
Design Sample
http://amana.jp/
Amana
大小設定較小的網站LOGO也可透過留白的效果而看起來醒目。
http://swanq.co.jp/
swanq
此為影像直向貫穿畫面的結構，資訊內容變化的地方，也因為有留白而讓畫面轉換感覺起來更自然。
http://www.ckr.se/
CLAESSON KOIVISTO RUNE
這個設計實例特別強調網站LOGO，樣式簡單且高雅的LOGO可強調出高級感。
內容豐富的網站設計重視緊湊感
善用液態設計(liquid design)的網站設計法
入門網站等資訊量多的網站，就要運用左右寬度可調整的液態設計(liquid design)。用這種手法完成的網站效果有兩種，一種是顯示畫面大小變更時，整個設計整體畫面給人的印象不變；另一種則是縮小時覺得很擠，放大時又變得畫面很閒散。產生這種區別的重點就在於標題所設的邊界大小。要讓顯示範圍變更時設計也不會亂掉的祕訣，就在於這個部分的處理。
Point1：顯示畫面大小變更，但設計感仍舊不變的網站大多是因為在網站LOGO下方設定了距離較大的邊界。只要執行這樣的設定，就能免於在顯示畫面縮小時，整個設計得擠成一團的窘況了。
Point2：各區塊不用方框框住。各區塊標題用顏色長條(在此為灰色)，區塊間就自然可以區隔開來。也因此，各個區塊項目沒有必要畫框線。看得到框線反而會讓人覺得整個畫面都是線，而給人複雜、俗套的印象。
Point3：搜尋的部分有支撐標題部份的功能。這個地方與畫面中央的內容部分不同，要用線框住以強調與左側設計之間的左右對稱性，這樣看起來結構就會很緊湊。
液態設計的基本重點
畫面左右安排寬度大小固定的導覽要素、字體設定成與中間本文部分相對應的大小，這也是很多人愛用的手法，優點是，在設定顯示完整畫面時一次可顯示的資訊量增加，可以慢慢閱覽。一般而言較少使用在首頁的設計，而會常用在一次要提供完整資訊的情況(如新聞)上。
瀏覽器也有工具列
Web網頁設計的最大寬度，一般是由顯示器的大小來決定的，不過也不要忘了瀏覽器也有工具列。工具列是畫面左邊出現的書籤(bookmark)或顯示已瀏覽網頁的功能，現在還有即時通訊的RSS顯示功能，所以有不少人會將工具列開著不關掉。在這種情況下，解析度為1280像素的17吋標準顯示器，可設計的最大寬幅也會只剩970像素而已。
Design Sample
http://www.gettyimages.com/creativeimages?country=usa
getty image
將網站LOGO儘量設小一點，以和其他部分產生足夠的間距。
http://www.goo.ne.jp/
goo新聞
長條廣告外的空間，讓瀏覽者面對那麼多資訊可以喘口氣。
以影像為中心之設計架構
中心構成
如果設計的網頁是要以視覺方式來傳達某機關單位或品牌的印象，就要夠靈活、夠有創意才能勝任。如果能夠掌握這種網站的設計類型，就能確實降低設計上的困難。在設計時首先要先決定，是要讓影像充滿整個畫面，還是要讓色塊包圍住影像，還好之後再來決定整體的結構。如果想要展現影像的精美，可以採前者；如果想要展現影像處理的效果，則可採後者。
塞尚的畫面結構哲學
南法艾克斯安普羅旺斯的畫家，保羅塞尚(Paul Czanne)對二十世紀的美術影響甚鉅，他認為三維的大自然界的物體都可以利用球體、圓柱、圓錐的三種方式入畫。想必是他不斷想要設計難以在平面上展現的光與影而得到的結論吧。將事情過度簡單化的確很危險，但對於畫面結構有自己的一套想法，對版面設計而言卻是相當重要。
Design Sample
http://asia.swarovski.com/taiwan/
Swarovski Crystal
商品的硬度和設計樣式的發想有著共通點。
http://www.stylewars.com/
Style Wars
本例以繪畫的手法，充分揮灑影像設計的能力，水準相當高。
分段式的設計類型
用區塊標出網頁重點
平面印刷品中，分段式版面編排方式，可以避免換行時未出現過多空白的情形。在網頁上，這種方式可以盡量減少視線大幅移動，有助充分運用空間。網頁和雜誌等不同，畫面出現的文字量較難控制，所以可以先做一個基本段落區塊，確定好瀏覽者視線集中的重點，再加入其他內容，這樣就會具有平衡感。
網頁分成兩欄
將網頁畫面分成兩欄，左邊的導覽部分全部設為靠右對齊，讓畫面看起來像是文字都向中間的分隔線對齊。用這種「左邊區塊向右對齊」的方法，文字內容很多的網站看起來也會很穩。
由上而下分割網頁空間
網頁的分段式設計基本上都是由左往右排，不過也可以由上而下排。這個結構是將網頁空間分成主題、圖片式全區導覽和文字三大部分，每一部分的內容都少少的，看起來不會塞在一起。
網頁設計的重心
報紙的重心在於發行報社名稱以及各版的重要標題，而網頁也是一樣，網站LOGO和周圍是網頁看起來穩不穩、是否有頭重腳輕、腳重頭輕問題的關鍵。所以網頁設計時就要在網頁上方的頁緣和網站LOGO設定足夠的間距，在瀏覽器的介面和網站LOGO間留白，以集中瀏覽者的視線。
考慮到Web標準相容性的設計方式
考慮網頁資訊結構的畫面架構
現在所謂的網頁設計標準，是指套用CSS樣式的XHTML語法而言。XHTML是從包含樣式與資訊定義的HTML語法中抽出樣式設定的部份，因此光靠XHTML是無法完成網頁設計的。分離樣式與結構，是為了便於設計與維護網頁，因此學會實用性的Web標準網頁設計技巧，實為當務之急。
內容架構的基本
在XHTML語法中，一頁裏可設定的最上層標題h1只有一個。h1主要是用於網頁ID的標籤，而下層資訊則是每一則都用h2來設定。
混用
在Web標準普及之前，網站設計主要都是用table標籤來做表格設計。然而這個手法不只會讓標籤流於繁雜，而且不易標明優先順序等內容結構。雖然如此，要讓能將XHTML和CSS分別解譯處理的瀏覽器正常顯示出網頁內容，還是有很多地方要用到table(表格)，所以就有人採取大致分割網頁設計空間時就用table，要做細部設計時就用CSS來控制的這種方法。這種方法就稱為「混用」以與其他方式區別。
Design Sample
http://9rules.com/
9rules Network
各個區塊的資訊整理情形會反映在樣式上。
http://mightygoods.com/
mightygoods
內容結構包括導覽的部分都很層次井然。
沿用首頁的風格
導覽設計(navigation design)也要沿用首頁的特色
如果網站設計是要傳達品牌印象的話，就要讓網站整體有一致性。像企業品牌這樣大的主題，就要讓瀏覽者從一點點小印象中慢慢堆疊出一個完整的印象，所以不管是影像或顏色都要沿著相同的主題來選擇。就網站而言，呈現效果的一致性也會連帶影響操作使用上的一致性。尤其是包含操作性在內的設計，其整體感在介面設計的領域中更被稱為「look and feel」而備受設計者重視。
不一定從首頁瀏覽起
網站要看起來很有主題首尾一致的效果，就必須要使用者是從首頁連結進來才行。使用者能按照網站設計者、資訊提供者所想，使用網站所設的導覽來逛逛這個網站的話，才會起「Look and Feel」之效果。可是，由於近年來搜尋系統的功能提升，使用者很多都不是從首頁點進網站，對這樣的使用者而言，網站的整體感或氣氛就很難感受得到。網站設計的效果有時也得要看使用者使用方式而定，希望設計者們都能先有這個概念。
Design Sample
http://www.h-kotobuki.co.jp/about/
壽屋商務飯店
導覽設計與使用的影像統一，呈現出高雅的感覺。
http://dma.ucla.edu/info/index.php
UCLA Design Media Arts
矩形擷取部分關鍵影像，與首頁風格一脈相承。
http://www.g-gravity.com/
G-gravity
用有光澤的背景呈現出令人驚艷質感，而此質感也是整個網站的共同特色。
design note
依重力概念而行
設計領域中，稱設計物的上方與下方為「天地」。做平面設計的人一般也都是說「天地」而不說「上下」。多數的設計者都能顧名思義，注意到上面代表的是「天」，下面代表的是「地」。尤其是在固定的顯示範圍內，天地的感覺就顯得相當重要。要把紙面想成是個自然環境，設計時要依重力法則來構思。
舉例來說，好看、好懂的這種設計樣式，我們會說「設計流暢」。這個「流暢」就是指畫面上風順暢地吹拂而去的感覺。一般而言，風都是和地面平行的，所以要有天和地，也才能達到「流暢」的效果。畫面上方比較空，畫面下方則要多些份量，所要呈現的東西就安排在下方，各項主體之間要有適當的距離讓空氣流通。每個設計者所說、所想的某個顏色或某個形狀可能都不一樣，但是「天地」之間的重力法則形成畫面骨架這點卻是不變。
除了上、下、左、右這樣的位置法則之外，大小、重量也會自然地呈現輕重的效果。所以大的東西放在畫面下方比較自然，而畫面上方如果是一些小東西的集合，看起來會很有整體感。在有個大圖形的畫面結構中，如果可以在附近放幾個小一點的圖形以讓大圖形與小圖形平衡，整個畫面看起來就會很穩。這種設計技巧其實正反映了自然環境的重力法則。
重量和大小會隨配色而改變，且條件越多，就越難讓樣式統一。不過不管是怎麼樣的設計，「天地」的概念一定都會是設計者的重要依據。
--- 節錄自"WEB LAYOUT 設計的美學" 旗標出版股份有限公司 ---
閱讀全文...
多數傳統網頁執行的主要問題點在於網頁的回應時間過長，使用者按下網頁上的超連結或是按鍵之後，往往要等待數秒鐘，甚至10幾秒才能夠看到網頁回傳的處理結果，更糟的是使用者有可能需要執行多次的重新整理才能看到所需要的答案，這種考驗使用者耐心的Click and Wait式的操作感覺，因為無法像視窗應用程式一樣提供敏捷的操作反應，是造成Ajax風格的網頁興起的主要推手。
新一代的Ajax(Asynchronous Javascript and XML)網頁開發技術是一種Rich Client網頁解決方案，Ajax網頁會善用用戶端網頁的Javascript技術，透過XmlHttp傳輸協定和網際網路上的伺服器進行溝通，再使用XML技術解析伺服器傳回的執行結果，最後再利用DHTML、DOM(Document Object Model)，和CSS(Cascading Style Sheet)等技術將伺服器傳回的結果顯示到網頁上供使用者檢視，是一種結合用戶端和伺服器的技術，其優點是可以只更新網頁的部份內容，減少使用者等待的時間，提升使用者的工作效率，同時也可以降低網頁對伺服器頻寬的需求，是一個頗為優良的解決方案。
傳統的網頁單純依靠HTTP協定進行用戶端和伺服器之間的運作，用戶端發出需求，然後等待伺服器傳回處理結果，取得伺服器執行結果後再更新整個網頁顯示的內容，其架構如圖：
Ajax網頁的架構和傳統的網頁不同地方在於在用戶端執行的網頁可以透過Javascript搭配XmlHttp協定，以不引發網頁PostBack的方式發出需求，呼叫伺服器上的XML Web Service服務或是網頁提供的功能，再以較有效率的方式更新網頁的部份內容，降低使用者對等待的不耐，提升使用者對網頁操作的感覺，其架構如圖：
體驗Ajax風格的網頁
PageFlakes.com
www.bing.com/maps
Maps.Google.com
Maps.Yahoo.com
DeepEarth(Silverlight網頁)
Google Suggest
G-Mail
Amazon Diamond Search
開發Ajax風格的網頁
‧Hard Code
Javascript + DHTML + DOM + CSS + XmlHttp + XML
Javascript
類似C語言語法，可以用來控制HTML元素，改變網頁顯示的內容或樣式，或是透過XmlHttp通訊協定呼叫網頁或XML Web Service服務提供的功能。
DHTML(Dynamic HTML)、DOM(Document Object Model)和CSS(Cascading Style Sheet)
利用Javascript控制網頁中的物件顯示的資料和效果的技術稱為DHTML。網頁定義的文件模型(DOM)負責將網頁中的物件建構成物件階層，協助網頁執行尋找物件的動作，以便更新物件的內容或樣式，而CSS樣式則是用來定義網頁中物件的樣式之語法。
XmlHttp(Extensible Markup Language Hypertext Transfer Protocol)
支援使用HTTP通訊協定在網際網路傳輸XML、HTML和二進位資料的通訊協定，可以利用網頁中的Javascript語法啟動執行傳送需求給伺服器的動作。XML(Extensible Markup Language)文件處理
XML是一種可以允許自訂的可擴充標示語言，Ajax網頁必須有能力處理伺服器傳回的XML文件，並從自伺服器取得XML文件中取出所需要的結果，再利用Javascript、DOM和CSS技術更新部分網頁顯示的內容或效果。
‧Client Script Callback技術
‧ASP.NET 2.0或更高版本的做法，使用ClientScriptManager類別和ICallbackEventHandler介面
‧Microsoft ASP.NET Ajax Extension + Ajax Control Toolkit
製作Ajax風格網頁的缺點
‧偵錯不易
‧易出錯Weak type
善用http://www.w3schools.com
‧維護不易
‧必須在不同的瀏覽器上進行測試
‧安全性 - IE瀏覽器必須可以進行Active Scripting
‧沒有Framework
閱讀全文...
「雲端運算」近幾年被炒得火紅，最大的推手應該歸功於Google。Google新發表之Linux-based作業系統Chrome，就是首套內含「雲端運算」概念的作業系統。而所謂的「雲端運算」，可以從「網路運算」談到「分散式運算」(Distributed Computing)和「網格運算」(Grid Computing)；知名分析公司Gartner將「雲端運算」區分為「雲端服務」(Cloud Computing Services)與「雲端科技」(Cloud Computing Technologies)兩大類；商業周刊第1146期(2009.11.9)對雲端運算的產業還作了一個上中下的三層分類：上層的「軟體服務」(software as a service，SaaS)、中層的「平台服務」(platform as a service，PaaS)、底層的「設備服務」(infrastructure as a service，IaaS)。
發展歷史
2007年10月，Google與IBM開始在美國大學校園，包括卡內基美隆大學、麻省理工學院、史丹佛大學、加州大學柏克萊分校及馬里蘭大學等，推廣「雲端運算」的計畫，這項計劃希望能降低「分散式運算」技術在學術研究方面的成本，並為這些大學提供相關的軟硬體設備及技術支援（包括數百台個人電腦及BladeCenter與System x伺服器，這些運算平台將提供1600個處理器，支援包括Linux、Xen、Hadoop等開放原始碼平台）。而學生則可以透過網路開發各項以大規模運算為基礎的研究計畫。
2008年1月30日，Google宣佈在台灣啟動「雲端運算學術計畫」，將與台灣的台大、交大等學校合作，將這種先進的大規模、快速運算技術推廣到校園。
2008年7月29日， 雅虎、惠普和英特爾宣布一項涵蓋美國、德國和新加坡的聯合研究計劃，推出「雲端運算」研究測試床，推進「雲端運算」。該計劃要與合作夥伴建立6個資料中心作為研究試驗平台，每個資料中心配置1400個至4000個處理器。這些合作夥伴包括新加坡資訊通訊發展管理局、德國卡爾斯魯厄大學Steinbuch運算中心、 美國伊利諾大學香賓分校、英特爾研究院、惠普實驗室和雅虎。」。
2008年8月3日，美國專利商標局網站資訊顯示，戴爾正在申請「雲端運算」(Cloud Computing)商標，此舉旨在加強對這一未來可能重塑技術架構的術語的控制權。戴爾在申請檔案中稱，「雲端運算」是「在資料中心和巨型規模的運算環境中，為他人提供電腦硬體定製製造」。
雲端運算不是技術，它是概念
所謂「雲端」的「雲」即為我們最常使用的網際網路（Internet），「端」則指使用者端 （Client）或泛指使用者運用網路服務來完成事情的方式。最終目標是沒有軟體的安裝，所有的資源都來自於雲端，使用者端只需一個連上「雲端」的設備與簡單的介面（例如瀏覽器）即可。所以「雲端運算」本身並不代表任何一項資訊科技的技術，它是一種電腦運算的概念，而一種概念就會有許多不同的方式去實踐，這個時候才會有不同的技術衍伸出來。
雲端運算（Cloud Computing）從本質上來看，他是一種分散式運算（Distributed Computing）的新運用，其最基本的概念，是透過網際網路將龐大的運算處理程序（Process），自動分拆成無數個較小的子程序（Sub process），再交由多部伺服器（Multi- Server）所組成的龐大系統，透過搜尋與運算分析之後，再將處理結果回傳給使用者端。透過這項技術，網路服務提供者（Service Provider）可以在數秒之內，處理數以千萬計甚至億計的資訊，達到和「超級電腦」同樣強大效能的網路服務。
換言之，當大家努力去實現這樣的一個概念時，就促成了網際網路的蓬勃發展，因為網路本身就是在強調不同電腦之間的溝通以及合作，於是在各項基礎設施包括頻寬、通訊標準、電腦運算能力以及運算架構都逐漸發展成熟之後，提供給開發者或是一般使用者的網路服務(Web Service)便開始出現，這些網路服務提供給使用者簡單的介面來存取一些資源。當然一開始的時候，企業提供出來的，都是一些相當陽春的網路服務。
這些網路服務繼續發展下去，時至今日出現了像Google、Yahoo!、Amazon等等網路巨獸，這些大公司有能力去購買數以萬計的伺服器，並且把這些電腦串起來，成為一個龐大的運算資源，而龐大的運算資源自然就意味著更為多樣化和以前無法提供的新服務。所有的人現在可以在網路上不同的地方，利用各大企業開放出來的運算資源，進行資料的運算或是提供服務給使用者，於是就在這樣的情況之下，「雲端運算」被提了出來。因為現在無論是一般的使用者或是開發者，都透過網路來取得資料或是進行資料運算，自己本地端的運算資源雖然有限，還是可以透過網路進行複雜的運算，結果資料就像是從天上的雲端掉下來一樣，所以很多人會將網際網路表示成一朵雲的圖示，例如下圖：
「分散式運算」與「網格運算」
而「雲端運算」的概念其本質大抵承襲自「分散式運算」(Distributed Computing)以及「網格運算」(Grid Computing)。
所謂「分散式運算」，顧名思義，就是將大型工作區分成小塊後，分別交由眾多電腦各自進行運算再彙整結果，以完成單一電腦無力勝任的工作。也就是說讓一些不同的電腦同時去幫你做事情、進行運算，所以有兩台電腦也好、十萬台電腦也好，只要有超過一台電腦，而且讓他們可以互相溝通，一起同時幫你做事情，這就是分散式運算。
而「網格運算」則是「分散式運算」加以延伸的一支，所謂「網格」指的是以公開的基準處理分散各處的資料。其主要特點放在異質系統之間運算資源的整合，簡單來說，在於將各種不同平台、不同架構、不同等級的電腦彼此之間可以透過通訊標準來互相溝通，分享彼此的運算資源。在網際網路還沒有今天這麼發達之前，企業採用「網格運算」，很大的原因是為了讓組織內部IT資源達到更良好的使用率。
由此觀之，「雲端運算」與「網格運算」並沒有顯著的不同。的確，兩者都是分散式運算的延伸，唯獨「網格運算」著眼於整合眾多異構平台，而「雲端運算」則強調在本地端資源有限的情況下，利用網路取得遠方的運算資源。
「雲端服務」與「雲端科技」
問題來了，若說只要是透過網路線接上「雲端」並利用遠端資源就可以稱做「雲端運算」，那麼透過Gmail收發信件與利用BitTorrent之類的P2P技術取得資料，豈不都可算是「雲端運算」？但是這兩者在本質上有著明顯的不同，究竟何者才能真正稱得上是「雲端運算」呢？
在「電腦世界」(Computer World)一篇標題為「雲端運算的過度混淆」( Cloud computing hype spurs confusion) 的文章中，引述了知名分析公司Gartner的分類方式，將「雲端運算」區分為兩大類，分別為「雲端服務」(Cloud Computing Services)與「雲端科技」(Cloud Computing Technologies)。
Gartner指出，「雲端服務」專注在於透過一個瀏覽器，藉由網路連線從遠端來存取、來操作、來服務，例如Salesforce.com的CRM工具，或是提供使用者安裝和使用各種不同作業系統的Amazon EC2服務。這類型可以視為「軟體即服務」(SaaS, Software as a Service)概念的後繼，使用者完全不必去擔心成長的問題，遠端自然會幫你將該需要的伺服器或資料庫都準備好，使用者只要放心的把東西丟到網路上、丟往遠端的服務商即可。也充份善用了網際網路的便利性，讓使用者可以安全的將所有資料都存在遠端的一或多個伺服機裡，到哪裡都可以使用，服務商也可隨時作升級或更動，同時又巧妙的將龐大運算的問題丟給「雲端」解決，於是讓一隻手機或一個沒有運算能力的GPS也都可以上網進行很多奇奇怪怪的事。
而「雲端科技」則是著眼於利用虛擬化以及自動化等技術來創造和普及電腦中的各種運算資源。Gartner認為，這種類型可以視為傳統資料中心(Data Center)的延伸，內部系統採用多台電腦一同運算、儲存、相互備援，且不需要經由第三方提供外部資源便可套用在整個公司的內部系統上。譬如可以將基因圖譜定序、DNA解碼等拆成好多來演算，又譬如Skype與 BitTorrent以點對點(P2P)來共同組成單一系統。
所以說，根據Gartner的定義，Google所謂的「雲端運算」，包含「iGoogle」、「Google Calendar」等，雖然也有運用到「雲端科技」的部分，但是大抵上其模式則是屬於「雲端服務」的範疇。
當然，「雲端運算」的威力不僅僅是提供使用者更妥善的服務而已，對企業而言，「雲端運算」能夠有效的降低成本與風險。由於「雲端服務」不需要將程式安裝在用戶的電腦中，對服務商而言，降低了商業程式邏輯被破解的風險。此外，過去常見到台灣公司必須先將在本地收集的資料傳回美國，經過美國工程師處理後再傳回台灣作業的情況，如此一來則需耗費大量的網路傳輸費用以及時間。利用「雲端運算」，位在世界各地的開發人員便能夠透過同一套平台更即時且密切的合作。
拿下這朵雲，就是下個科技霸主！
上級戰場——軟體服務（software as a service，SaaS）
打破以往大廠壟斷的局面， 所有人都可以在上面自由揮灑創意， 提供各式各樣的軟體服務。
競爭者：世界各地的軟體開發者
中間戰場——平台服務（platform as a service，PaaS）
打造程式開發平台與作業系統平台，讓開發人員可以透過網路撰寫程式與服務，一般消費者也可以在上面執行程式。
競爭者：Google、微軟、蘋果、Yahoo!
底層戰場——設備服務（infrastructure as a service，IaaS）
將基礎設備（如IT系統、資料庫等）整合起來，像旅館一樣，分隔成不同的房間供企業租用。
競爭者：IBM、戴爾、昇陽、 惠普、亞馬遜
以下分別說明目前正進行雲端運算計畫的國際大廠現況如下：
Google
在美國網路搜尋市場占有率第一名的 Google，其實很早就將這概念應用在自家提供的服務上，諸如Gmail、YouTube、Google Docs、Google Talk、Google Calendar、Google Gadget等，Google 於2007年10月與 IBM 合資超過 1,500 萬美元，建立 Google 101 大型資料運算中心，並在 2008 年將雲端運算定為未來的發展策略，而這點，可從Google為進軍通訊產業而推出的G-phone看出點端倪。因此從 Google 大舉佈局雲端應用下，相信在加強「端」連到「雲」的入口和架構完整的商業模式後，是很有機會在未來市場繼續保持領先地位。
IBM
主推Blue Cloud「藍雲計劃」的主要切入點不在於如何提供消費端各種服務，他更專注的是如何提供雲端運算所需擁有的硬體設備與管理軟體，允許企業將運算任務分成 不同組件，分別調至最有效率的電腦系統執行，解決企業尖鋒、離鋒時間的系統負荷量問題。同時結合網路巨人 Google 以成為雲端運算中的要角，並著手在全球數個城市建立雲計算中心。
Microsoft
微軟在雲端的策略則是「Software + Service」。預計推出的新作業系統「Azure」，將結合Live Mesh開發新功能，並整合各種Live Services；Azure另一項用途，是能讓軟體開發者所撰寫的程式直接在微軟資料中心上線，不需靠公司裡的伺服器；Azure就像是微軟線上服務的 地基，扎穩微軟邁向雲端之路。
Yahoo
Yahoo將開源雲端運算框架Hadoop，應用在自家搜尋服務的兩千台伺服器上，來處理超過5 Petabytes的網頁內容，建立整個網際網路的網頁索引資料。此外，Yahoo的雲端產品定位為Consumer Cloud Computing，提供Yahoo! Live、Yahoo! oneConnect、NewsGlobe，等線上訊息服務。而即將正式開放的Yahoo Application Platform，則是提供開發者線上撰寫和執行程式的開放平台。
Amazon
Amazon 的 Web Services，透過虛擬化的技術，Amazon EC2搭配 Amazon S3 儲存服務，提供各種不同規格的虛擬主機和儲存空間，使軟體開發者能快速地在上面安裝或執行所需的服務，用完了就結束完全沒有負擔，由於費用低廉，吸引了很 多開發人員使用。而且你只要負擔所使用的時間與資源即可，在成本效益的投資上，這樣的服務相當吸引人。
參考來源：
雲端運算 Cloud Computing 的概念與應用
閱讀全文...
總部設在美國賓州Newtown Square創建於1969年的「專案管理學會」(PMI，Project Management Institute)，對推動專案管理知識體系之建立及針對各不同產業特性發展其特有的專案管理方法上一直不遺餘力。為使「專案管理」所包含的各廣泛知識領域能有效整合，並使其能組織化、分工化、結構化、國際化、標準化及專精化，乃邀集各相關專家學者經數年的努力，於1984年首次編撰完成「專案管理知識體系導讀指南」（PMBOK，A Guide to the Project Management Body of Knowledge），並在歷十餘年不斷地研修及持續地改進後，PMBOK已被公認為專案管理的全球標準，且所有專案經理為促使專案卓越而需獲得具有基礎實務的高標準，目前最新版是第四版。
PMBOK內詳細說明專案管理所依循的五大程序群組 (Process Groups) 和九大知識體系領域 ( Knowledge Areas)各定義。
其中五大專案管理程序群組為：
起始程序 (Initiating Processes) – 授權開始一個專案或進入專案的下一個階段。
規劃程序 (Planning Processes) – 定義及琢磨目的並選擇最佳行動做法以達到專案的所要滿足的目的。
執行程序 (Executing Processes) – 協調人員及其它資源來實行專案計劃 (project plan)。
控制程序 (Controlling Processes) – 由定期監督及量測專案進度來鑑別與專案計劃的差異，必要時採取矯正行動，以確保達成專案目的。
結案程序 (Closing Processes) – 正式化一個專案或其階段的接受，使其有條理地結束。
這五大程序群組不僅適用於一整個專案，且適用於一個專案中的每一個階段。
九大專案管理知識體系領域為：
專案整合管理 (Project Integration Management) – 確保專案中不同的要素相互協調配合，含專案計劃書發展 (Project Plan Development)、專案計劃執行 (Project Plan Execution)、及整體變更控制 (Overall Change Control)。
專案範疇管理 (Project Scope Management) – 確保專案包含所有及僅含有所需的工作項目以成功達成專案目的，含起始 (Initiation)、範疇規劃 (Scope Planning)、範疇定義 (Scope Definition)、範疇確認 (Scope Verification)、及範疇變更控制 (Scope Change Control)。
專案時間管理 (Project Time Management) – 確保專案如期完成，含活動定義 (Activity Definition)、活動排序 (Activity Sequencing)、活動期程估計 (Activity Duration Estimating)、時程發展 (Schedule Development)、及時程控制 (Schedule Control)。
專案成本管理 (Project Cost Management) – 確保專案如核准的預算完成，含資源規劃 (Resource Planning)、成本預估 (Cost Estimating)、預算編列 (Cost Budgeting)、及成本控制 (Cost Control)。
專案品質管理 (Project Quality Management) – 確保專案能滿足需求，含品質規劃 (Quality Planning)、品質保證 (Quality Assurance)、及品質管制 (Quality Control)。
專案人力資源管理 (Project Human Resource Management) – 最有效地運用與專案有關的人員，含組織規劃 (Organizational Planning)、人員獲得 (Staff Acquisition)、及團隊發展 (Team Development)。
專案溝通管理 (Project Communications Management) – 確保專案能適時及適當地產生、蒐集、散佈、儲存、及最終處置專案資訊，含溝通規劃 (Communications Planning)、資訊發佈 (Information Distribution)、績效報告 (Performance Reporting)、及結案作業 (Administrative Closure)。
專案風險管理 (Project Risk Management) – 敘述專案風險的界定、分析、及回應的程序，含風險管理規劃 (Risk Management Planning)、風險界定 (Risk Identification)、定性風險分析 (Qualitative Risk Analysis)、定量風險分析 (Quantitative Risk Analysis)、風險回應規劃 (Risk Response Planning)、及風險監控 (Risk Monitoring and Control)。
專案採購管理 (Project Procurement Management) – 敘述執行自組織外取得商品及服務的程序，含採購規劃 (Procurement Planning)、邀商規劃 (Solicitation Planning)、邀商作業 (Solicitation)、商源評選 (Source Selection)、合約管理 (Contract Administration)、及合約終結 (Contract Closeout)。
閱讀全文...
