(轉載)設計與風格
就是愛分享
在製作網頁時，一般都會思考目標使用者是誰、這個網頁主要是給誰看的。「思考使用者」這件事可說就是在選擇網站上所要公開的內容種類。也就是說，如果是給不特定多數的使用者看的，最優先考量的就是內容要單純、確實、好操作等特點。如果針對的對象是對流行時尚有興趣的女性，就要優先考量高級品味、令人印象深刻等特點。目標對象不同，網頁樣式也就隨之不同。千萬記住網頁對象可說是決定網站設計方向的舵手。整合主題、目的、瀏覽對象、需要的功能等，就等於是在進行設計了。

選擇網站建構技巧
想做出不同樣式的網頁，有時候就必須選擇網頁建構技巧。本書當中將樣式設計與製作技巧完全切割開來，因此並不說明各種技巧。但是，了解網站的用途和技巧的選擇大有相關。例如像流行時尚的網頁和以最新話題為主的網站，就會需要大量運用視覺效果，如提供影片等嶄新的表現方式。這時，Flash這類聲光效果豐富的內容(rich contents)就會比較適合。此外，要讓任何人都能方便瀏覽操作的公眾網站，則需要以XHTML或XML來建構所要提供的資訊。在進行網站製作時，至少在主題、使用者、建構技巧這三項上必須要選對。

不要陷入形式化的設計模式
確立好上述三項後，網站樣式就能分出屬於那種題材。公眾網站就會做得像公眾網站、企業網站就做得像企業網站。但是要特別注意，在實際製作網頁時，一直想著要做出該主題的典型樣式，反而容易造成忽略使用者的觀點，落入千篇一律的巢臼。

地方政府單位、教育相關網站的設計


公眾性高的網站，重視使用方便性
公眾性高的網站首重資訊的結構、連結的方便性，最後才來講究樣式。「連結的方便性」對使用者最重要，對連接使用者與網站的瀏覽器等瀏覽工具也很重要。這種網站在建構時要確認標準語法(例如XHML等)，要求該加的標籤(tag)是否都正確加上去了、是否有多餘的裝飾會影響使用者操作等。這些都做到了，再來強調清楚易懂，讓網站更平易近人。

必須要有連結性(access ability)的網站
地方市政府、教育相關單位必須要讓使用者能連結取得公共資訊服務，這樣的考量是很重要的。現在越來越多各級縣市政府開設網站來介紹市政建設，與接受民眾諮詢，因此特別重視網站連結性。

Design Samples
http://www.pref.niigata.lg.jp/
新瀉縣
要連結到災害資訊中心，與使用搜尋工具都非常簡單容易。

http://www.pref.kumamoto.jp/
熊本縣
最新消息放在中間，優先順位很清楚。

http://www.jpo.go.jp/indexj.htm
特許廳
提供了相當清楚的全區導覽。

醫療、生活資訊網站的設計


簡單、一目瞭然最重要
談到疾病或醫療等總讓人覺得高深困難，但我們可以透過設計讓網站看起來單純、簡易，以改變這樣的印象。網頁內容較為困難時，可以適時加入圖片，這樣不但有助於理解，還能緩和文字給人的壓迫感。內容越是困難，就越需要大量使用簡單的圖像，或清楚易懂的插圖來解說。

MEDINE
MEDINE(MEDIars on LINE)是醫療資訊搜尋網站中全球知名的資料庫，由美國National Library of Medicine管理，裡面可以查到世界70個國家出版的最新醫學期刊，包括文章與重點集結。雖然幾乎都是英文，但長久以來一直都吸引很多人來瀏覽查詢。

Design Samples
http://www.ihealth.co.jp/index.html
ihealth☆健康線上網站
插圖與裝飾讓畫面更平易近人。

http://us.pampers.com/globalsplash/languagejump.jsp
pampers.com
採用品牌顏色，讓畫面呈現一種值得信賴的感覺。

http://www.bbc.co.uk/health/
BBC Health
用動脈和靜脈的配色將資訊分組。

一般企業網站的設計


定型化的設計能有效傳遞資訊
多數的企業網站都運用相同架構的設計，一般都是在網站LOGO及全區導覽的標頭下方，依序放入與該企業產品相關的關鍵影像，和最新資訊的主題區塊。這樣的樣式讓企業類型網站的操作性具有一慣性，使用者也可說相當熟悉。因此，只要在關鍵影像或網站LOGO、導覽樣式的設計上呈現自己的風格，就能輕易和其他公司做出區隔。

全區導覽的位置要放右邊
全區導覽一直以來總是被放在畫面左邊，現在有人開始反向操作，換到右邊來了。畫面左側在使用最小的瀏覽器時，由於能讓畫面左側的資訊完整呈現，一直以來都被視為是選單顯示的最佳位置。但顯示完整範圍的800×600像素顯示器，畫面右側幾乎不管出現資訊被切斷的情形，也許就是基於這樣的理由，他們覺得放在右邊(常用的捲軸都在右邊)會更好。另外，左側本來就有瀏覽器原有的操作功能，為了避免搞混，放在右邊才是更好的選擇。

Design Samples
http://www.lego.com/en-US/default.aspx
The Official Web Site of LEGO
關鍵影像下方有各個導覽詳細內容介紹。

http://canon.jp/
Canon
關鍵影像和小標題區分開，是很典型的樣式。

http://www.ford.com/
Ford Motor Company
這個設計樣式中導覽結構單純、且很有穩定感。

IT相關企業的網站設計


利用視覺元素轉變印象
提供IT服務或產品的網站，其中的內容大多都可分為針對法人與針對個人兩種。針對法人的網站，內容大多包含技術性等難度較高的資訊內容，及企業本身的公司資訊等。針對個人使用者的網站內容，則應該要稍微簡單易懂些。可是由於各個資訊的入口太多只有一個，所以要儘量用門檻較低的呈現方式，讓網站有自己的個性表情，打出企業的品牌印象。尤其如果能適當加入關建影像，會讓網站更具親和力。

表格設計已經過時了？
表格標籤本來是用來製作表格的，但是卻用網頁編排設計之用，但是這種情形聽說不久的將來就會消失，因為今後主要的網頁建構法，將是用CSS和XHTML來將資訊與樣式的定義分開。從重視資訊架構型態的網路架構來看，使用表格就好像是用麻將牌來蓋房子一樣，雖然沒有什麼做不到的，但就是沒什麼意義，因為別的方法更有效！看來，重新思考標籤本來用途的時期已經到來。

Design Samples
http://cybozu.co.jp/
Cybozu
一貫重視幽默的網站風格，已經昇華為品牌力量。

http://welcome.hp.com/country/jp/ja/cs/home.html
日本惠普株式會社
印表機和影像的質感完全統一。

http://www.siemens.com/entry/cc/en/
Siemens AG
該公司經營的產品項目雖多，卻不會給人繁雜的印象。

介紹產品的網站設計


重視樣式的高層次設計已成為主流
有特定主打商品的企業網站、或介紹新產品的商品活動網站，這類以傳達商品資訊為主要目的的網站，要求的重點不只要有資訊、還要有創意。商品能否讓瀏覽者印象深刻，決定了這個網站是否成功。在這種情況下，Web也被要求設計得要有CM或雜誌廣告等促銷活動的效果，所以這種網站的最優先課題就是保持視覺資訊的質感。不只要有質感愈高級愈好的產品照片，還要有不影響照片品質的文字設計。

Affordance
網站建構的技巧當中，對於滑鼠碰到選項按鈕時而引發的動作我們稱為Affordance。這是將研究生態心理學的James Jerome Gibson提出來的概念再重新給予詮釋的名詞。這個詞一般意指環境會影響人類的行為、行動的方向。下雨了就躲到石頭下，這種人類因自然現象發生的變化而採取的行動，才是原本Affordance的真意。

Design Samples
http://www.peugeot.co.jp/index.html
Peugeot Japan
網站風格統一為「和消費者談車」，相當簡單。

http://www.symantec.com/ja/jp/index.jsp
symantec
全部設定為企業形象的色彩，算是刺激性較強的設計。

http://www.fritzhansen.com/en/fritz-hansen.aspx
Fritz Hansen
整體的設計樣式，能讓人感受到產品的性能。

展出作品集的網站設計


做個讓作品看起來更具效果的網站
網站有時也會用來發表自己的照片或插圖、或是介紹創作者、製作公司的作品及工作。有的網站會用Flash將整個網站化成作品的展示間，有的則是以縮小的照片來陳列作品，方向可以有很多種。最近有些網站則是運用部落格的功能讓瀏覽者觀看之外，還能讓人閱讀文字內容。樣式種類雖然很多，但他們共通的特點就是主題性很強。製作東西本身的行為本來就需要有個主題，不然就無法進行下去。

部落格會對網站造成什麼改變？
現在大受歡迎的部落格不用軟體工具就能更新，其中又以管理容易、能及時提供新資訊給使用者的RSS技術最受矚目。RSS主要透過RSS READER軟體來將最新資訊提供給使用者，但是這個工具和技術其實有可能會改變網站的使用方式。過去，使用者都是從入口網站直接跳到其他網站，但有了RSS就可以直接跳到部落格。入門網站週邊的廣告可想而知，效益會越來越低，因此部落格可能會成為改變金錢流向的要素之一。

Design Samples
http://www.hi-res.net/
Hi-Res!
結構雖簡單，但是還是能讓人感覺到這是個作品集網站。

http://www.joshuadavis.com/
Joshua davis
呈現製作的介面(interface)。

流行時尚相關的網站


加入尖端的發想
要讓網頁呈現出流行感，就是不斷將發明的創意化為有形，表現方式往往都要著眼於未來性。這樣說來，好像流行時尚的網站就沒有樣式可言了，不過懷疑Web的既定常理，是不管什麼網站都是共通的。使用性、連結性、SEO等評量一個好網站的標準，都是因為使用者有這類的需求。在流行的領域所追求的是超越使用性、能刺激視覺與聽覺的要素。這種網站的企劃要展現出重視先進與自由的感受。

什麼是使用性？
方便使用的網站就稱為使用性好的網站，但使用性好不好還需要檢查操作步驟才知道。具代表性的評量方法為「專家評量(Heuristic evalutation)」以及「優使形測試(Usability Test)」兩種。前者是由學者專家評估，後者是由使用者實際使用過後寫下意見。沒有經過這些是無法定論使用性佳不佳的。所以這還真不是件簡單的事呢！

Design Samples
http://www.theapt.com/
The Apartment
強調理性和都會生活這樣的訴求。

http://nikerunning.nike.com/nikeos/p/nikeplus/language_tunnel/
Nike Free
商品的質感從照片和圖形之中就可感受到。

http://www.ikea.com/
IKEA
這個網站的發想是要顯現模特兒立體旋轉的空間。

食物相關的網站設計


傳達樂趣的顏色與形狀
以食物為主題的網站有食品業者、食譜網站等。即使是以資訊傳達為主的企業網站，也必須創造值得放心、很有樂趣的印象。這時可以大幅採用令人聯想到食物的顏色，以及讓人感覺很開心的插圖。這樣的樣式會受小細節影響，例如有的時候文字內容陳述很多，不如用簡單、但四個角落很穩的表現方法來呈現會更美，所以在處理時要儘量小心這些小細節的部份。

影像解析度
顯示器上看影像的最佳解析度為72~96 dpi。「dpi」是指一英吋內有幾個點的單位數。列印黑白影像或傳單只要144dpi，商業用的就要300dpi。有時候影像解析度很高，可是顯示器上顯示的大小可能較小；有時候即使只有72dpi，但是畫面大小高達1200像素，這樣還是可以列印出不錯的品質，所以不能光用看的來判斷解析度大小。

Design Samples
http://allrecipes.com/
All Resipes
畫面很平易近人，令人很安心。

http://www.marthastewart.com/
Matha Stewart Living
感覺這家餐廳有點知性，不喜歡和別人一樣。

http://www.betterhome.jp/index.php
Betterhome的料理教室
內容多但卻看起來很簡單，讓人感覺到行家在料理的世界裡自在遊走，游刃有餘。

design note
設計與品牌
企業或商品要用某種既定的圖形或顏色來表現，以擴大其圖形認知度，甚至要讓人們從該圖形輕鬆就能聯想到企業或商品。這一連串的行為就稱為「品牌戰略」。在品牌戰略中，Web或適合促銷的印刷媒體所被賦予的角色功能就很大。這些是除了商品本身以外，讓品牌直接讓客人看到的機會。當然這些成果一定得要能展現品牌印象才行。

那麼有方法能讓品牌反映在設計上嗎？有。不用說，基本上沿襲企業形象色彩或標誌即可。品牌戰略就是向企業形象這樣，先定下所有媒體都要呈現的元素，再來談及其他的。所以只要將這些元素反映出來，就可展現一貫的品牌印象。但如果以為這樣就可以放心的話，那又太早了些。Web網站的設計，有時候是很難如己願地呈現品牌印象的。即使是徹底遵照企業形象手冊來建構網站也一樣。原因就是樣式的持續時間不夠。也就是說，網站設計大幅更新，既定的印象也會隨之重新改變。

光是企業形象並不代表品牌印象。網頁設計整體給人的印象，有時是會超越企業形象等「零件」功能的。設計格式包含功能或品牌印象等看得見的要素，及需要操作的要素等所有要素。這在介面設計(interface design)用語中就稱為「外觀與感覺(look and feel)」。而這個外觀與感覺也是品牌印象。蘋果電腦從2000年到2006年，Web網站上的外觀與感覺都還沒改過。持續使用相同的設計及持續相同設計格式的開發，對品牌戰略而言實為重要。

--- 節錄自"WEB LAYOUT 設計的美學" 旗標出版股份有限公司 ---
閱讀全文...
標籤： 0 意見 | | edit post
(轉載)配色概念
就是愛分享
Web設計所需顏色的概念可大致分為三種。一是根據Johannes Itten(1888 ~ 1968)提出的色彩學來理解色彩的性質。色彩學談的是相異顏色間調和的情形，以及顏色面積會影響看起來的感覺等現象。不管是影像處理、編修或從事繪畫等和顏色相關的人，至今都很重視其中的理論，可說是設計的基本概念。不過，色彩學的內容只針對印刷顏色、油墨、畫具顏色。像Web這樣顯示在顯示器上的作品，還需要了解顏色在顯示器或電腦上會如何呈現相同顏色這樣的媒體特性才行。

不可不知的色彩顯示媒體特性
媒體特色與顏色，是第二個必備的概念。顯示器是以讓紅、綠、藍三種光線的點出現不同強弱的光來呈現顏色的媒體。這和雜誌或海報這種經由油墨或塗料反射光的機制完全不同。因此，了解「光的顏色」到了人的眼睛會變成什麼就變得很重要了。此外，除了顯示器、電腦、瀏覽器、與影像編輯軟體等對顏色的解釋方式，也會影響顏色呈現出來的效果。再補充一點，網頁安全色(Web Safe Color)也算是顯示媒體特性的一種。

顏色也會影響操作性
第三個要了解的概念是，將Web網站做為提供資訊或服務的介面時，所需了解之「操作與顏色之間的關係」。我們以車站等公共場所中，讓人群移動更順暢的標誌系統為例，一個空間當中，標示為廁所或出口等的標誌都使用相同顏色。走到一半顏色突然改變的話，看的人很快就會找不到目標。

顏色也是一種符號，可用來突顯畫面上最重要的資訊。此外，還可讓使用者了解操作順序、優先順序或操作後的處理狀況等。也就是說，顏色的使用會大大改變Web使用的便利性。

關於色彩的兩三事


了解色彩表現的限制和特性，適當使用顏色。
網頁安全色(Web Safe Color)是指相異瀏覽器均可呈現的216個顏色。這是考量到要讓使用者在不同的操作環境下得到一樣的資訊，所以在顏色上也訂好標準以防問題發生。網頁安全色是為了顏色重現性低的操作環境而設計的，但由於現在使用者的配備環境都明顯提升了，所以無需考慮那麼多，但大部份的製作工具還是備有類似的配色功能。

Flash與顏色
Flash和JPEG同樣可呈現24位元的色彩效果。而透明或漸層效果必需要在24位元色彩中才得以呈現。由於Flash的色彩引擎使用了獨家技術，所以不論使用哪種瀏覽器，都能保證一定的品質。因此，如果我們希望網頁有好的功能或效果，或希望要有好的色彩表現，都可以選擇使用Flash。

Design Samples
http://www.dexigner.com/
DEXIGNER Design Portal
關鍵顏色使用7色色環。可閱讀的部分採用較低的彩度，對眼睛較無負擔。

http://www.cmykmag.com/site.cfm?CFID=540993&CFTOKEN=34835363
CMYK Magazine
呈現印刷的CMYK基本顏色。在顯示器上看的話，CMYK是相當醒目的顏色。

善用色票


色票提供更多配色方法
色票是由油墨製作公司或顏色研究單位製作用來展現顏色效果的道具。主要用途是讓使用者看看在電腦上設定的顏色到印刷時會呈現出什麼感覺。粉彩的high tone、固體、金屬等顏色、以及各國傳統的顏色也都包含在其中。顏色可以有無限的組合，對經驗不足的人來說，要從零開始找到適合使用的顏色很困難。現在有了可以確認Web用色的色票做參考，讓佩色、用色更方便。

關於設定顏色的幾個方法
在製作影像或網頁的工具中，一般主要都是使用RGB(color slider)來設定顏色。只要用光的三原色紅、藍、綠的色域各自調和即可。對於了解RGB特性的使用者可能很好用，但是只要各設定值一變，顏色就會大不相同，不易尋找搭配的顏色。要搭配顏色，最好使用可在同一色相調整亮度與彩度的HSB(HSL)。依據不同使用目的，使用不同的選色方法，設計出來的效果也會有所不同。

Design Samples
http://www.also-online.com/
ALSO Online
使用色票中冷色系設計而成的網站。

配色的概念


了解顏色就會知道如何恰當用色
顯示器看到的Web網站基本上是光的三原色(RGB)。這個三原色可以呈現出光的波長所含的12個主要的顏色。由紅到紫的12色所組成的圓就稱為「色相環」。R(紅)和G(綠)混合就會成為中間色黃色(二次色)，黃色再和紅色相混，就會形成中間的橘色(三次色)，色相環有著這樣的三色關係。而兩個相鄰的顏色有著類似自然界顏色那樣調和關係的，則稱為類似色。補色則是指位於色相環斜對角上，對比最強的顏色。「三角形配色」意指色相環上，構成三角形的顏色關係，是種很有色彩張力效果的顏色搭配。這個色相環產生的三相就是配色的基礎。

Johannes Itten
Johannes Itten是瑞士的造型專家，德國包浩斯(Bauhaus)藝術造型學院早期的院長，他因將顏色置換成12環的圖，讓色彩學自成一家而聲名大噪。他提出顏色有互補關係，且配色會因不同亮度或彩度，而給人不同印象之顏色性質理論，讓原本以繪畫為主的色彩探求領域也延伸到家具或建築等所有的商品上。至今對於利用顏色提高商品價值的現代產品設計仍有很大的影響。

Design Samples
http://www.r-sumai.jp/
R-System株式會社
將相同色相、不同色調的顏色一起搭配使用的例子。

http://www.ebis.ne.jp/
廣告效果測試系統「AD EBIS」
明度低的幾個不同色相的顏色，以灰色來做整合。

配色時要考慮顏色性質


不同配色方式，呈現出不同的顏色印象與效果
顏色給人的印象，會隨使用者操作環境或使用方法等條件而異。就像我們可能認為同個顏色、不同色調應該很好搭配才是，但也會因使用方法不對，而出現跌破眼鏡的效果。沒有實際用用看，是很難掌握會呈現什麼顏色效果的。配色之所以比想像中還難掌握，就是因為不了解顏色的特性與本質所致。本章介紹的顏色對比性質，是根據印刷品或圖畫等情況提出的見解，但以光來顯示顏色的Web媒體上同樣也適用。

Point1：一樣是橘色，背景為紅色時，橘色就會看起來比較黃；以黃色為背景時，橘色看起來就會比較紅。這是因為中心顏色受背景顏色影響之心理補色之故。所謂心理補色是指一直看著相同顏色時，眼睛就會自然看到互補色。紅色的互補色是綠色而言，綠色就會加在橘色上而看起來比較黃。就算是相同顏色，也會因為背景色之不同，給人的印象也會有所不同。

Point2：受到背景色等周圍附近鮮豔顏色的影響，顏色會看起來比實際顏色還暗；被較暗的顏色包圍時，顏色就會看起來很鮮豔。

Point3：本例為顏色的對比。被暗的顏色包圍時，顏色看起來比較亮；被亮的顏色包圍時，顏色看起來比較暗。背景為黑色的網頁上，淡灰色的文字看起來不容易閱覽，背景為白色時，由於看起來比實際還暗，因此看起來很清楚，也很輕鬆。當顏色為彩色時也是一樣的情況。

面積對比：面積不同，看起來感覺也不同
即使是相同顏色，面積大看起來就比較亮，面積小看起來就比較暗(明度變低)。在處理Web網頁中背景色這樣大範圍的用色時，如不降低彩度，就會看起來比想像中還亮。另外，文字等小範圍內使用的顏色即使很鮮豔，也會因為面積小而看起來沒那麼亮。

膨脹：讓面積看起來會變大的顏色搭配
明亮的暖色系，尤其是對比色強的配色會讓面積看起來比較大。中間為橘色的圖對比較強，看起來會比藍色的圖還要大。有時設計還會因配色效果的關係，而需要再稍微調整大小。尤其是文字大小也會因標題和背景色的關係，而看起來不一樣。

冷色系和暖色系
暖色的圖形看起來比冷色的圖形還要近。從這個特性我們可以想到，只用暖色系的配色架構會對使用者造成壓迫感。因此在想要呈現畫面深度時，也可以使用暖色系的顏色。

彩度和明度的不同
彩度和明度都被視為是「顏色的亮度」，所以兩者很容易搞混。明度高的顏色對光的反射率也高。明亮的顏色反射率大，暗的顏色反射率小。明度高的顏色在畫面上只是看起來比較突出而已。另一方面，彩度高的顏色會吸引收掉所有其他成分，只反射自己的顏色，彩度低的顏色則會讓周圍的顏色進行反射(襯托其他顏色)。也就是說，彩度高的顏色彼此之間不容易取得平衡，彩度低的顏色則會影響配色時的銳利度。

Design Samples
http://adam1.szinhaz.org/
Adam1
明度和彩度都低，配色很容易。攝影作品集等就很適合使用此種方式。

http://www.jrobertscott.com/
J. Robert Schott
背景、文字、網站LOGO都統一為無色彩。無色彩當中黑色是最強烈的顏色。

冷色系和暖色系性質不同，需視情況來使用


聰明用色，讓影像和文字資訊更清晰
藍色或綠色等冷色系可以用來呈現畫面深度，而紅色或橘色等暖色系則適合用於平面的表現。尤其是藍色和紅色的對比，可以強調出深淺遠近的感覺。在藍色背景上加上紅色的影像就會產生心理補色，而讓紅色的周圍看起來好像灰色，這種圖形配色的架構相當有名。此外，如果一張照片想要讓人感覺到深淺遠近的效果時，可以加上藍色漸層的模式來強調立體感，這也是一種方法。

色彩給人的印象
藍色代表信賴感、綠色代表安全感、紫色代表很有靈性…，顏色給人的印象各不相同。現在坊間有很多教人以想要的印象為關鍵字，進行配色的書籍，您不妨將這些書當成決定設計方向的指導手冊。然而「水能載舟，亦能覆舟」，這樣既有的色彩印像有可能成為瞬間縮小配色可能性的兩面刃。執色彩理論牛耳的Johannes Itten就警告說，用色過度制式化，可能會抹煞顏色的本質。

Design Samples
http://www.infusion.com/
infusion
背景為冷色系，內容部分看起來好像往前突出。

用關鍵字找出所需配色


將關鍵字轉換為顏色的秘訣
在流行時尚業界，像「清爽」這類抽象關鍵字可搭配的具體顏色其實都是規範好了的。尤其是一年春、夏、秋、冬的流行顏色，都是由1963年成立的國際流行色委員會，每兩年召開一次的會議中由各國協調決定的。日本流行色協會亦為該會議之一員，會配合國內民情或過去發生的情況等提出日本自己的流行色。各單位所訂的流行色，會左右該年關鍵字所引導出的顏色印象。不過一般而言，顏色會分為三群，冷色系代表冷酷、冷靜，暖色系代表溫暖、充滿活力，中性色系代表中性、少有主張的，這些都是既定的、自然感受到的印象。

Point1：彩度低的冷色系是一般商務網站慣用的配色。因為主動提供參考的內容很多，因此適合讓人沉靜下來，或感覺有深度的冷色系。另外，低彩度也有助於烘扥其他顏色，每天都更新照片或影像的新聞網站等亦適用。

Point2：用色以清爽、彩度高的配色為主，搭配上以白色為基調的底色，這樣的設計很適合國家行政單位、各縣市政府網站之用。彩度高又鮮豔的顏色可以給人容易親近、產品容易使用的感覺，而這個概念一樣也適用於公家機構。要注意的重點是，顏色不要用太多種，選出要用的幾種就好了。

Point3：Outdoor & fishing Nature(自然、運動類) http://www.naturum.co.jp/
本例是以天空、海、山等自然界的顏色來展現自然或運動等主題。另外也可加上充滿活力的暖色系，以呈現戶外的感覺。大地的綠色在螢幕上看起來會太刺眼，因此要記得，如果用色面積大時，要儘量壓低彩度。

花蕊、嫩芽、可愛
時尚的領域流行表示花蕊、嫩芽概念的顏色。以明度不同的粉紅色為主的顏色，和淡灰色或綠色等重點顏色很搭。商品設計業界的表現主要是以呈現膚色為主，但由於Web上較難呈現這樣的效果，因此改用能穩定顯示的粉紅色，就比較沒有問題。

高齡者、生活
以綠色或象牙色等明度不同的顏色來呈現高齡者、生活概念。尤其是高齡者常患的「白內障」症狀會讓看到的東西偏黃色，顏色的感受方式和一般人不太相同。因此在設計時希望不要過度依賴顏色，而是改用對比方式讓使用者接收資訊。

設計、創造
無色彩和中性色為主的設計很適合公家單位的配色。無色彩不管對任何顏色親和力都高，又能襯托其他顏色，因此很適合使用在介紹設計、或本身就充滿色彩的網站。此外，中性色的紫色則有獨立性、創造性的感覺。

Web網頁上顏色的角色
代表某抽象概念的關鍵字的流行色會反映在流行服裝業界上，而汽車等工業設計也會在商品上呈現這樣的顏色流行趨勢。看得到、摸得到的實體商品，其顏色會受到形狀或環境之影響而有微妙差異。然而在Web上由於看起來觸感和質感都一樣，我們並無法期待顏色本身還能帶出什麼附加效果。在Web上，有的顏色所扮演的角色應該先重視像道路交通號誌似的功能性，才來追求新的附加價值。當然，我們可以透過顏色、移動性、功能等網站整體的架構來提高網站附加價值。但在此之前，網頁用色的基本原則，就是要讓畫面更易讀、更好用才是。

Design Samples
http://www.vodafone.com/index.VF.html
Vodafone
展現出企業形象色彩，是網頁必備的重要功能。

善用漸層效果


用數種顏色營造出一種質感
漸層可說是讓Web呈現質感的唯一方法。3D動畫就是利用模擬環境的光或打光等，讓物體看起來很立體以呈現質感。Web用圖也常以漸層來製作光或影效果，讓設計產生遠近深淺感，使網頁呈現更佳的效果。由於Web是以光來呈現色彩，和印刷品不同，因此在做漸層效果時，如能掌握RGB的特性，就能達到很好的顏色設定效果。好好控制光的混色，重現光影效果吧！

配色關鍵為HSB，調色則要用RGB
電腦上調整顏色的方法有RGB、CMYK、HSB等種類。要對色相設定不同明度或彩度，以呈現微妙顏色的這種配色作業，最適合用HSB。如果想要調色，就要用RGB。顯示器上的光就相當於紙上的顏料。您可以用RGB調整，看光怎麼樣最能清晰結合。建議您可以先將三原色彼此相混，做出12色的色相環。這個動作可以訓練您對光的敏感度。

Design Samples
http://thesims2.ea.com/
The Sims2.com
這個配色方式讓網站呈現3D電玩的感覺。

http://www.apple.com/quicktime/
Apple Quick Time
這個漸層效果呈現一種電影院黑漆漆的感覺。

利用配色讓畫面看起來更簡單


以藍色為基調的配色實例
灰色可以讓鮮豔華麗的色彩趨於沉靜，讓畫面整體呈現統一感，可說是相當方便使用的顏色。使用灰色的重點在於，只能搭配一、兩個有色彩的顏色，因為灰色會受到附近色彩的影響而看起來有點糊糊的。因此，為了有效呈現整體感，只好搭配單色。選擇一個色相之後，接下來再選類似色，並調整不同的色調來用即可。不刺眼、沒有太強烈特色主張的灰色，在Web上也扮演著重要的角色。

關於原色
三原色相混會變成白色，這就稱為「加法混色」；三原色相混會變成黑色，就稱為「減法混色」。將白色視為加、將黑色視為減，這樣哪個顏色要用哪個方法就會很好記。但是「原色」的英文為Primary Color。一般人看到「原」就以為應該是「original」，但代表「原始」、「根本」含意的英文應該是「Primal」才是。另外，很多的鳥類、有袋目的動物，及人類女性都覺得光除了三原色外，還有一個黃色，也就是四原色。

Design Samples
http://www.vancouverplayhouse.com/
PLAYHOUSE
深灰與白色的高度對比中，再加上黃色的重點文字，讓畫面保持著一種平衡感。

http://www.apple.com/
Apple.com
導覽設計用灰色來統一，避免視覺上顏色的衝突。

http://www.muthesius-kunsthochschule.de/de/
Muthesius Kunsthochschule
深灰色的內文比黑色看起來沉靜、易讀。

配色以三色為限


Web網站的配色最好只用三色
使用三種顏色的3-color-design網站已經快要另成流派了，這種配色方法從Web的角色來思考非常合情合理。Web主要的用途就是要將資訊傳達給非特定的使用者。有的使用者的閱覽方式不依靠視覺，有的人則是要黑白列印出來閱讀才行。事實上，對於Web而言，用不同顏色來做資訊整理沒有什麼意義。當然配色華麗以求各個部分明顯區別，或是觀照使用者閱覽上的感覺也很重要，所以要讓網站適合所有人都來瀏覽，才需要採用這項建議。

顏色的名稱
橘色或黃色這樣主要色相，與萊姆綠色、米色等中間色都有顏色名稱。各國顏色名稱數都不同，日本工業規格則是規定了168色的顏色名稱。日本人平均能分辨的既有顏色數，據說有400色左右。在嚴格要求顯示器顏色顯示效果的現代，人類能接受的範圍卻意外地小。

Design Samples
http://www.albertocerriteno.com/
Alberto Cerrite
以略為帶黃色的灰色為基調，讓整體不至於看起來太暗。

http://www.adaptivepath.com/
Adaptive Path
這裡用的是在顯示器上，最不會造成眼睛負擔的綠色三色樣式。

左右網站操作簡易性的配色方式


利用對比關係，讓導覽更一目暸然
要讓畫面上可以點選的地方看得很清楚，可以使用ROLLOVER的效果。一般都採用讓滑鼠滑過和遠離時採用不同色相的顏色，但是運用色彩的明度差呈現對比，也是頗具效果的方法。使用者的視力情況各不相同，有的人可能會將設定的顏色看成別的顏色也不一定。如果碰上這種情況，想光靠顏色來清楚顯示操作情況是很難達到效果的。用RGB來顯示顏色時，明度的調整會比色相的選擇，更能讓人看清楚各個個體的顏色。按鈕動作(Button action)、與畫面閱覽後的顏色變化，可以用調整明度等配色技巧，來讓網站更易操作與閱覽。

高齡者與配色
公共建築物中標誌的設計，往往都會考量到高齡者視覺上的感受。最明顯的例子就是白內障會導致老人眼前所見都有點黃黃的。這種情況下，以黑色為背景之藍色字體，或是黃色的設計等，就會不容易看清楚，因此，在設計時都要考量到如果在網站現在的設計蒙上一層黃色時，會產生什麼變化。

Design Samples
http://www.adobe.com/
Adobe
連結文字與一般文字的明度不同。

http://www.leapfrog.com/en/shop.html
LEAP FROG
採用色相相同、明度不同的配色，讓畫面兼具美觀與使用簡易性。

和風配色法


使用日本傳統的配色
採用的直向標題，以和風為主題的照片素材等，都可以表現日本味道。但是最能明確讓人感覺到「日本」的，就要靠顏色了。日本傳統色很多，市面上也有賣介紹顏色名稱和顏色設定的色樣。取材自自然界的花草、石頭、作物等的日本傳統顏色，其色彩變化也很多，非常適合用以表現日本的文化或四季。再加上條紋或格子等日本特有小圖案，即時是時尚的畫面架構也能呈現出日本的印象。

其他國家的傳統顏色
除了日本傳統色外，其他如法國、中國的傳統顏色也很值得參考。尤其是法國的顏色和日本一樣，很多都是來自自然界花朵或石頭等的要素。亞洲圈中有些傳統色是可以轉而代表宗教或思想的，光是根據色樣來使用顏色，就能呈現各國給人的既有印象，這點真是不可思議。

Design Samples
http://www.edo-tokyo-museum.or.jp/
江戶東京博物館
造型和配色都呈現出高格調的日本氛圍。

http://www.nakaya.co.jp/
淺草中屋
如果不是對祭典氣氛顏色印象十分深刻，很難表現出這樣的主題。

design note
製作Web網頁也會出現「顏色統一的問題」
色彩管理是指在運用數位技術的過程中追求顏色表現的統一性，這在進行印刷工作時更是一件大事。數位創作會用到掃描器、顯示器、印表機等各種顯示顏色的數位工具，可是顯示出來的顏色卻會因為印表機用不同的墨水、顯示器的光不同、以及呈現顯示器或掃描器機種構造不同，造成無法呈現相同的顏色。因此印刷作業上都會以軟體做為中間媒體，透過色彩管理系統來解決問題。

在Web上也是一樣，瀏覽用的顯示器或影像編輯工具不同，呈現出的顏色也會有所差異。最常出問題的就是畫面在Windows和在Mac上出現的顏色不一樣。這是因為支援兩種作業系統的顯示器，出廠時預設的模式不同所致。就瀏覽Web而言，Windows的使用者較多，所以如果是用Mac來製作網頁時，可以將顯示器的設定調整為和Windows的標準設定一樣，盡量讓製作和操作瀏覽的環境一樣，再來進行作業。

另外影像製作工具間顏色不同，也是一個問題。用Photoshop製作的資料用Fireworks打開來看，顏色變得不一樣。這是因為這兩者之間使用的顏色表現方法不同之故。Photoshop標準使用的是Adobe RGB，而Fireworks等一般工具則是以合於Web用的影像標準sRGB為主流。可是，sRGB在綠色或黃色的表現上卻比Adobe RGB略遜一籌，因此用Photoshop製作的檔案(尤其是植物影像)使用其他軟體開啟時，色彩就顯得沒有強弱變化。這就是工具間會產生的色差問題。因此建議，在製作網頁的過程中，使用的工具品牌最好能全程統一，以便讓想要的效果如預期中呈現。

--- 節錄自"WEB LAYOUT 設計的美學" 旗標出版股份有限公司 ---
閱讀全文...
標籤： 0 意見 | | edit post
(轉載)圖像版面設計概念
就是愛分享
圖像設計(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 設計的美學" 旗標出版股份有限公司 ---
閱讀全文...
標籤： 0 意見 | | edit post
(轉載)文字設計概念
就是愛分享
電腦上可取得的資訊主要都是文字。文字是有形體的語言，所以本身已有其樣式(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 設計的美學" 旗標出版股份有限公司 ---
閱讀全文...
標籤： 0 意見 | | edit post