二十世紀的美國名建築師法蘭克萊特﹝Frank Lloyd Wright﹞曾說:「蓋房子之前,我一定要先了解是誰要住在裡面,也要了解地基和週遭的情況。」
第一:先分析可能對你的網頁有興趣的觀眾
一般平面印刷形式的資訊沒有超連接,沒有聲音,沒有動畫,也沒有網際網路資源,而多媒體網頁卻擁有這些功能。同時多媒體網頁也會像電視機一般,呈現生動的視覺效果,它的使用者又比電視機觀眾多了對內容選擇的主控權。因此設計多媒體網頁時,首先要考慮的事就是分析它的觀眾。以下幾個問題可以幫設計師做觀眾分析時的參考:
- 網頁的觀眾存在嗎?全球資訊網的使用人數與通訊量成長非常迅速,將來有一天,全球資訊網很有可能成為全球第一大媒體,超越電視、雜誌、
書籍、報紙等。既使現在你的聽眾並不存在,你還是有設置全球資訊網的網站的價值。
- 網頁的觀眾的類別是什麼?他們是電腦玩家或技術專家?他們是學術界人士?他們是企業界人士?他們是藝術家?他們是網際網路愛好者?他們是街頭上的一般大眾?
- 網頁的觀眾期待什麼?他們為什麼會訪問你的網頁?假如他們到訪你的網頁,你有什麼東西會使他們產生興趣而留下來?
- 網頁的觀眾喜歡什麼?他們很嚴肅,比較喜歡讀文章嗎?他們喜歡聲音與動畫嗎?
- 網頁的觀眾知道什麼?他們對於全球資訊網的熟悉程度如何呢?他們對於你的主題的認識程度如何呢?
每一類型的多媒體網頁都可能有不同的觀眾或使用者。傳統的傳播媒體因其內容獨特,早已有了忠實的擁護者,像書迷們會讀書和雜誌,影迷們會看電影,而樂迷們則會買
CD 和卡帶來聽。在許多情況下,多媒體網頁也吸引許多和傳統媒體相同的使用者,然而,多媒體網頁卻能透過新的互動方式,走出傳統媒體的侷限,為讀者提供更深更豐富的內涵。
一般多媒體網頁的設計方向,若不是指向單一特殊類型的觀眾或使用者,就是朝向廣大的觀眾。這兩種觀眾都有著非常不同的特質和偏好。因此,網頁在設計上要能滿足他們特別的需要。多媒體網頁的觀眾可能是生意上往來的客戶、公司的員工、或者是教育計劃案裡的學生等。當我們為這些觀眾服務時,務必要能使其感到滿意。
多媒體網頁的觀眾或使用者不僅透過網路使用網站上所提供的資訊,有時還能協助網站的設計和測試。或許除了生產之外,目標觀眾或使用者的意見幾乎在多媒體網頁的每一步發展過程中都要參考。在網頁雛形發展的階段中,測試潛在觀眾或使用者對網頁的反應,都能夠協助設計者規劃下一個版本的設計,甚至為市場測試提供有價值的回應。
第二:確定多媒體網頁的設計目標
所有設計可能都是來自於簡單的想法。好比設計一個城市的旅遊導覽,可以地圖、文字解說、影片、手冊、或以上綜合的方式來呈現內容。若將每個可能的設計具體化,則須從很多不同的方面來考慮嘗試,如特性、目的、資訊結構等。例如設計一個旅遊指南要考慮的就包括了使用的目的、如何使用、形式為何等重點。當然,多媒體產品計畫的具體化也是由許多的點子和創意而來。一個好的創意來自於大家的通力合作,結合大家的想法,而這就需要彼此間的腦力激盪。大家在腦力激盪中可以無所限制,天馬行空的創意。
設計目標應包含一個多媒體產品企畫的目的和訊息。一個好的設計小組不會 草率的決定一個設計,一定會從很多的設計模型中千挑萬選,找到最適當的一個。一個真正好的設計是不會引起人注意的,因為最好的產品在呈現及使用過程中順利而不失誤,因而使用者自然而然專注於內容而不會注意到設計的好壞。因此,好的設計應包含以下特性:
- 力求單純化。由於多媒體產品的內容和介面共同創造互動的關係,介面和互動的形式除了力求清楚,更要求簡單。若介面提供太多的選擇和太複雜的使用方法會讓使用者困惑,然後漸漸不想使用了。
- 設計一致性。多媒體產品中介面設計要有一致性,讓使用者很容易學習並建立對作品的信任感。
- 要有參與性。多媒體產品應該邀請使用者加入,創造互動的關係,也就是讓他們與產品內容對話。
- 內容有深度。要確定我們的多媒體產品能讓使用者比以往的傳統媒體,探索到更多的東西。
- 娛樂性適當。多媒體產品應該提供適當的娛樂性,並依內容的性質,觀眾的性質來決定娛樂的方式。
- 價格合理化。價格合理化有賴於完整的市場調查。不同市場區隔的觀眾願意花在購買產品的金額都不盡相同,因此訂定一個合理,而且一般使用者負擔得起的價格是很重要的。
全球資訊網網頁最擅長完成下列三個目標:
﹝一﹞讓閱聽人熟悉你的名字、產品、服務與點子。
﹝二﹞向眾多的潛在閱聽人發表你的文字、影像與其他各種電子資料。
﹝三﹞讓閱聽人對世界性的公司、機關組織,產生近在身旁的親切感。
以下是一些值得您參考的點子,想想出版網頁的目標是什麼?
- 推銷產品
- 提供服務
- 提供廣告空間
- 募集資金
- 介紹自己的公司
- 改變公司形象
- 創造網路社區
- 陳述一個故事
- 調查顧客意見
- 展現自己寫程式的能力
- 展現自己的設計能力
- 為課堂交作業
- 完成一個工作計劃
- 呈現個人履歷表
- 呈現個人作品
- 教別人某種技巧
|
- 讓別人了解自己
- 讓別人了解公司
- 告知公司工作計畫
- 提供工作機會
- 提供產品服務
- 娛樂觀眾
- 研究一個主題
- 出版個人觀點
- 收集電子郵件
- 提供資訊給其他媒體
- 實驗新的傳播科技
- 為了進入二十一世紀
- 結識他人
- 變成有錢人
- 變成名人
|
第三:分析使用者可能使用的瀏覽器
由於觀眾使用各種不同的瀏覽器,以及瀏覽器的功能不斷更新,對於網頁設計者是一大挑戰。有些資訊在某一種瀏覽器上呈現很好,卻在另一個瀏覽器上的呈現卻看起來很奇怪。有些觀眾甚至還在使用只能閱讀文字的瀏覽器呢。有很多新的動態網頁技術看來很炫,但對一般使用者來說是件痛苦的事,因為這些動態效果為使它們的電腦當機。
第四:分析使用者可能使用的電腦運作平台
除了瀏覽器不同之外,觀眾使用的電腦運作平台也不儘相同。電腦螢幕的解析度各有不同,所使用的螢幕字型也不相同。有的電腦能支援聲音、電影,甚至有關虛擬實境的檔案。在個人電腦上看的網頁跟在麥金塔電腦上看到的網頁就是不同。許多人的電腦螢幕還設定在
640x480 的解析度上。尤其是小型記事本越來越普遍, 640x480 的解析度依然會是主流。
第五:分析使用者可能使用的網路頻寬
當全球資訊網變得越普遍,越多人使用數據機獲取資訊。從數據機下載網頁的傳輸速度比乙太網路慢,要花費較多時間,因此有些人不喜歡下載圖形。常常使用數據機的人對大的檔案如:全頁圖檔、聲音、動態影像和虛擬實境的檔案都會儘量避免下載。
第六:尊重智慧財產權
有人認為網際網路上所有的圖檔和文字檔是沒有版權的,這是完全錯誤的想法。雖然目前既存的出版法比網際網路的誕生還要早,很難將現有的術語應用到
WWW 上;不過還是有很多雖然針對紙上出版的法律實際上也適用於網路的出版。最近幾年,法官已開始密切注意網路的版權問題。如果一定要使用別人的資料,需特別謹慎。以下一些建議,希望您在使用別人的資料時能夠注意到:
- 在 WWW 上找到的資料不一定都是公開免費的;
- 使用他人的資料前,最好先取得他人的同意;
- 不要使用他人已註冊的資料,如米老鼠等;
- 即使你在使用他人的資料時,並沒有從中得利,也不代表你的行為是合法。
在特定環境下適當地使用是被允許的,例如:為教育的目的、寫報告、做研究、批評或發表評論等。還有所引用的資料的本質和數量也是判斷是否違反著作權的考量因素。一般來說,引用陳述事實的資料比引用創作本身較不會引起著作權的麻煩。最好的解決之道是儘量自己創作所需的資料。
一般來說,網頁的版權宣告是都是置於首頁結尾的地方。
第七:要準備隨時更新資訊
創造一個網站最有挑戰性的部份是需要經常更新網站的內容,尤其是一些隨著時間必需更新的資訊。為了告訴讀者有關資訊的時效性,通常我們會在網頁上註明最後更新資訊的時間,並且註明負責資訊更新的負責人姓名與電子郵件地址,以方便讀者與其連絡。
第八:要重視觀眾的評價
要了解讀者對某一個網頁的評價是件不容易的事。有人會認為要做一些修改,有人會認為它所提供的內容很有價值,有人會僅僅說很好。因此通常會透過電子郵件收集讀者的意見,做為網頁改進的參考。一般來說,電子郵件〝Mailto:〞的指令會置於首頁的最後面。更進一步的方法就是如以下範例,直接在瀏覽器上要求讀者留下意見。
第一:整體版面的呈現方式
原則上,一個多媒體網頁頁面的配置,能夠加強設計者所欲表達的概念與目的。頁面上的每一個元素,都會影響讀者對頁面上其他元素的解讀,在看一個頁面時,我們應該把整個組合看做是一個統一的整體,而非許多小單位的集合。
在進行版面配置時,要注意版面的平衡與空間的留白,設計者應該根據圖像與背景的關係、對比的關係、類似的原理、以及比例的關係,將整個空間以最有效的方式加以分配、組織。以下是設計者要注意的問題:
- 版面留白量。設計者可以很容易地改變背景顏色,因此,當我們提到「空白」時,所指的就是背景顏色,或是所謂圖像與背景的關係的背景部分。在一個頁面的組合中,留白的部分和被置於其上的元素同樣重要。就像樂章中的休止符,讓聽者能據知對音樂達成理解與鑑賞一樣,留白的空間讓頁面有了格式,因此,千萬不要忽略留白的重要性。在早期的
HTML 版本中,要隨心所欲地安排版面配置還很困難,由於在處理行列與對齊上的技術困難,使得版面常常陷入一種不平衡的局面。你必須考慮到所有的留白,這並不是說你得填滿所有的空白,而是,你必須把這些留白也一起納入考慮,達成頁面的平衡。
- 視覺平衡的考量。在安排頁面上的諸元素時,你應該考慮每個元素之間的視覺比重,這個比重可以由物件的大小、亮度﹝深色物件比淺色物件重﹞、以及紋路或內文的密度。視覺對比也很重要,如果加以有效地運用,對比可以很快地抓住讀者的注意力。但是如果元素之間的對比過大,則容易造成反效果,使整體失去和諧與平衡。另外,視覺上的諧調和對比一樣重要,你必須考慮物件之間大小比例的關係,將每一個元素對其他元素作相對的評估,比如說,一個很大的物件如果跟一個小物件放在一起,它會顯得更大,而影響到整體的平衡。
有許多方法可以達成平衡,其中最簡單的就是那種規規矩矩或是對稱的版面,比如說左右兩半或是上下部分彼此相似,甚至有些設計者把頁面上的每個元素向中央對齊。在某些情況下,這種設計方式可以有不錯的效果,但是通常內文的易讀性就會大大地降低。一般而言,一個對稱式的平衡是屬於靜態的,而無法引導讀者的目光去搜尋頁面上的其他元素。另外還有一種平衡的方式則是非制式且不對稱的。
一個不對稱的頁面結構必須藉由技巧性地安排不同視覺比重的各種元素來達 成。例如,一段很長的文字就可以用一個深色的圖形來平衡,一系列的小元素可以用一個大的元素來平衡。其變化的可能性是有很多的。一個不對稱的平衡頁面
有時是經由設計者的天賦巧思所設計出來的,有時則是經過仔細的計算。初學者可藉由格線的輔助來設計頁面的平衡。一個不對稱或是非制式的組合方式可以使
頁面在視覺上顯得較生動活潑。
一般而言,一個頁面會出現不平衡的情況,若不是因為技術上的限制,就是 因為設計者缺乏慨念。目前軟體的技術已能符合大部分格式設計的要求,因此很快地,設計者就必須為失敗的設計負起全責。有時候設計者的意圖是要製造出一
種讓人感到不安、不穩定的感覺,這時一個不平衡的頁面也許就可以適當地傳達出這種概念或感覺,但如果這種不平衡不是出於故意的安排,那麼,這樣一個頁
面會讓你的網站功效大打折扣。
- 網頁設計前後的一致性。一般而言,你不會只設計一頁網頁,而是將許多頁面以一個主題為中心相互連結起來,因此,在開始設計時,你必須將整個網站的方案做全盤考量。由於超媒體的便利性,我們都習慣只需用滑鼠輕輕一點,就能從某一頁跳到另一頁,而在這種情形下,視覺上的改變可能會讓讀者認為我們已從一個網站跳到另一個網站,通常我們當然不希望讀者在我們的網站中,從一頁跳到另一頁時產生這種錯覺。因此,你就得在你的頁面之間建立一個統一性,例如使用一個固定的標題圖示、一種特別的版面安排、或是一組特定的色系。記住,在考慮如何讓你的頁面具有一致性時,對這一致性做一點點的變化,會使你的網站更具有視覺趣味,並且使讀者更有興趣去瀏覽它。有時你也許會想要對你的頁面設計作變化,讓它不那麼枯燥無聊,有時你也可能想要建立一個版面規格讓每一頁的內容配置都能保有一致性。
- 紙上設計與網頁設計的比較。在設計多媒體網頁時,我們應記住的是,電腦的螢幕通常是寬大於高,這使得我們很難同時在電腦上和紙上作設計,幾年前,有人預言一個無紙的時代即將來臨,但到了今日,看起來我們的用紙量比過去有過之而無不及,無論電腦多麼方便,人們還是習慣把網頁列印出來看,如果你是以水平而非垂直的方向在擴展你的網頁,那就會有些列印上的問題。有些瀏覽器會在列印前先把頁面重新安排過,但是通常這也會破壞所有有趣的頁面設計。因此,你必須了解,有些材料最好是以垂直的格式來表現,這樣比較便於列印。
- 使用設計參考格線。在設計版面時,利用格線來安置物件的位置是一個蠻不錯的建議。格線就像是隱形的路標,有助於在網站的頁面中建立組織化的單元。許多的桌面排版軟體中都附有標線以便於物件的對齊,有些編寫網頁的工具也會提供這類的工具,但一般的文書編輯器則沒有。在這種情況下,你可以為你的頁面畫一個草圖,一但你決定了所依據的格線,你就可以用這個架構去對齊你的圖像與文字,讓你的頁面達到平衡。HTML
的分割頁框的功能,則可以讓你在頁面上定義出不同的區塊,這使你只需更新有改變的元素即可,而不用每次都重新修改一整頁。
有些人可能會覺得使用格線會讓畫面的整體設計變得單調無趣,但其實如果運用得當的話,並不會如此。一但你建立了網頁的架構,你就可以在這個格線架構下衍生出許多種安排物件的方式,並且每頁之間在元素排列上的變化是非常重要的。一個元素可以佔據一個或兩個、甚至更多個區域,文字也可以放在一塊本來被拿來放圖像的區塊,你可以為一個網站準備兩個或以上的格線,然後依照每一頁的內容做不同的應用,通常當一個網站中使用多個格線模式時,是為了要在頁面轉換之間,創造出視覺上的韻律感。
- 視覺焦點的安排。在完成了一個頁面的編寫之後,用瀏覽器開啟它,往後站一步來看。不要讀內文的文字,把你的眼睛閉上幾秒鐘,然後打開,看著你的網頁。頁面上的哪個部分最吸引你的眼光?你目光的下一個目標又是哪裡?試著去追溯你的眼睛瀏覽整個頁面的軌跡。作為一個設計者,也許你會有些偏見,所以你可以找別人來幫你看看你的焦點與瀏覽路徑是否適當。如果你的焦點在顏色對比、大小、密度或是色值上太過強勢,那麼讀者的目光就會很難從上面移開,而其他的部份就會被認為是不重要的。但如果頁面上的所有元素看起來都差不多,那們讀者就很容易被搞糊塗,不知道該從哪裡看起,也不知道下一步要看哪一項。無論如何,不管設計者是否是有意識地考慮到讀者的目光,你都要記得,目光瀏覽的路徑,也會影響到讀者對這個網頁的滿意度與閱讀經驗。
| 整體版面設計要領 |
|
﹝一﹞標題的呈現方式
-
標題宜以包括圖像及文字的綜合設計表現之。
-
台灣地區使用者喜歡色彩較豐富的標題。
-
標題宜居於版面中間位置,並以長方形方式呈現。
-
標題宜突顯於背景之上。
﹝二﹞版面的留白的呈現方式
-
版面留白量以 50% 為宜。
-
背景色彩純度過高會造成版面空白量感覺消失。
﹝三﹞連結點的呈現方式
-
橫列式較長的文字連結點以單欄位,向左對齊的呈現方式為宜。
-
橫列式較短的文字連結點以雙欄位,位置居中的呈現方式為宜;文字則向左對齊為宜。
-
直列式的圖文連結點,它們之間距宜加寬,以利區分。
-
連結點之前用小圖像或小色球以指引強調連結的功能,能方便讀者搜尋。
﹝四﹞重要資訊呈現方式
-
重要資訊應置於標題之後,首頁連結點或內文之前。
-
重要資訊可以配合運用置於前端明顯的位置或突出的圖像以強調之。
-
重要資訊可以運用不同顏色區塊以強調之。
﹝五﹞訊息的連貫性
-
保持固定的版式,求取統一感,方便讀者閱讀與搜尋。
|
第二:配合網頁主題的顏色
在設計一個網頁時,你應該對所有顏色的使用做一個全盤的考慮,而不是只 注重個別元素的配色。你應該把背景顏色、每個元素的色彩、內文的顏色、以及超連結選項的顏色﹝包括已連結及未連結過的項目﹞都納入考慮。你應該建立起
一個統一的基本色調架構,並且依據此架構來決定每一項元素的配色。
色彩對於加強你的網頁內容是很重要的,一般而言,我們建立一個網站的目 的就是要讓大家來讀它的內容,而大部分的網路使用者都是很快地在網頁與網頁之間點選跳接,不會仔細地每頁都看,這時候,如果你能有效地運用色彩的配置,那麼,無論你的內文是否真的吸引了它們,你都能吸引讀者對你的網頁多看一眼。
- 色彩過多與不及皆不好。我們生活在一個資訊爆炸的時代,為了避免負荷超載,我們通常會根據自己的標準,從許多垃圾信件中挑出有用的資訊。廣告商們早就知道要擅用顏色的效能來吸引人們的注意力並且去讀它們的文案,公司們也知道如何利用色彩來增加文件﹝從年度報表到公開發表簡報﹞的易讀性。
如果網路上的所有網頁都像過去好幾年間一樣,只有文字而沒有色彩,那麼我們就很難去分辨這一頁和那一頁有何不同。一個只有黑白兩色,而且在文字的大小和圖形上都了無變化的網頁,會讓讀者不得不停下來讀一讀它的內文,然後才能決定這是不是一個有用的資訊。一個只有純文字的文件是有一些優點,它很明顯地會佔用較少的磁碟空間、因此也能增加網路傳輸的速度,讀者的閱讀也不會被圖像所干擾,而能把焦點都集中在內文上;不使用圖形也會使你的內容更加精簡。但是完全不使用顏色也有一些危險,人們通常期望一個
WWW 網站能夠圖文並茂,這對於讀者是否會停留在這個網站並且仔細地閱讀它的內容是個決定性的因素,就算是一小點的顏色,對一個以純文字為主的網頁,都能大大地增加它的可讀性。
太多的顏色比顏色不足還糟糕,許多設計學生在顏色的使用上有一種趨勢,就像剛引進其他的如字型技術一般的圖形技術時的情形一樣,當一個學生發現了電腦可以一次將二十個不同的字體放在同一頁上面時,他們就會興奮地試驗各種做法,直到有一天他們自己發現了電腦的這種容納性並不能讓設計的效果變得更好為止。同樣的原則也試用在繪圖軟體會是網頁設計上。由於無法把繽紛的背景放在網頁上,許多人因此致力於盡可能將更多的色彩組合在一起,背景顏色也應注意和內文及圖形相互協調、搭配。
- 使用限量的色塊。選擇一個色系,這其中可以包含和諧色與對比色,但要限制你用在網頁上的顏色數量。要確保每一種元素要能夠共同創造出一種色調的統一,有一種辦法是選擇在色盤中屬於同範圍的顏色。
- 掌控複雜的色塊。有許多的網站會為了某些理由而使用很多種顏色,在這種情形下,調和主色和其他顏色之間的關係就非常重要。就像前面所說過的,有一種評量你的用色的方式就是往後站一點,然後從一段距離以外來看這個畫面,哪一個顏色首先映入你的眼簾?這些所使用的顏色會讓你有任何緊張或是視覺矛盾的感覺嗎?所有的顏色使否得到同樣的注意?在圖形或背景中使用五彩繽紛的色彩,通常會破壞掉和諧的感覺,一系列使用了很多種色彩的寫實影像就應該由某些共同的顏色來把它們串聯起來。
- 注意顏色的對比。在考慮要用什麼顏色、以及把這個顏色放在那裡時,你應該要注意到這個顏色對它周圍的色塊以及與它重疊的元素有什麼影響,有些網頁設計者在使用一個背景顏色或圖形前,並沒有仔細地考慮過它與內文和圖像的關係,大致上而言,背景顏色應該要盡量打淡一點,不要讓所有的目光都集中到它身上而使得網頁的內容黯然失色,在文字和背景圖案間也要有適當的對比,這樣文字才能具有易讀性。
在背景和前景之間的適當對比可以藉由將深色與淺色元素之間的差異值最大化來達成。在考慮到對比時,色彩的反差也是很重要的。如果將整個頁面轉換成灰階模式,有許多紅紅綠綠的色彩將會變成同樣的顏色而無法分辨,雖然在彩色頁面上他們看起來具有很高的反差,但對許多色盲的人來說,他們並無法分辨這兩種顏色,所以,當你在設計中使用這些顏色時,也要考慮到這個問題。
- 注意色彩的變化。為了有助於瀏覽者了解網頁的內容與主題事件,有效地對網頁作變化是很重要的。如果特別以某些變化來標示某些項目,那麼瀏覽者就很容易抓到整個網頁的主題。報紙也常常利用標題的字型與字體的變化,來標示出每篇報導的相對重要性。變化可以被有效地應用在文字及圖像上,例如,Netscape
的瀏覽器就將超連結文字的字型做了預設的變化,並且標示出已連結與未連結的項目。這個瀏覽氣的設計者事實上就是以實際應用為考量,讓人們可以分辨出接下來要點選什麼,他們將圖像設計的原則應用到超連結選項之重要性的處理上。
超聯結選項並不是網頁上唯一需要被標示出來的項目。你也許會想要將你的標題做不同於文字的處理,並且把主要的圖像和附加的圖像區分開來。
- 網頁顏色要系統化。當你在設計網頁時,你必須要了解︰人們大部分都是從首頁開始看,雖然這並非絕對。因此,通常在最高層的網頁,也就是被視為首頁的那一頁,就必須包含了對這個網站內容、主題的整體概述,這一頁必須在設計上具有吸引力,並且包含能表達你的意圖的重要資訊。一般來說,放在越上面的東西越重要,所以,在設計時要注意,讓你的頁面內容資訊顯得比頁首豐富。
雖然大部分的人都會從首頁開始看,你最好還是不要完全依據這個假設來設計網頁。很多人都會把一些自己覺得有趣的網站的網址寄給朋友,而這些網址並不一定是指向你的首頁。一個普遍的錯誤是,你常常會放上一個「回上頁」或「回主畫面」的按鈕,但其實瀏覽者也許並沒有看過你的網站結構中的前一頁。
| 背景顏色設計要領 |
|
﹝一﹞背景與主體的關係
- 背景與主體明度對比為 3:1 到 5:1 之間為宜。
﹝二﹞背景的色彩
- 淡色系列的背景有助於整體和諧。
﹝三﹞背景的材質機能
- 淡色材質背景為佳,能與主題分離之淺色標誌或文字背景亦可。
|
第三:適合內容的圖像設計
用在網頁上的圖像應該要支援並能夠增強 HTML 文件的內容,在設計圖像時必須考慮很多事情,包括技術上的限制到美學上的考量。技術上的限制雖然都已漸漸地獲得解決,但是仍然不可忽視;而關於圖像與用及設計的美學問題,則不會有太大的改變,我們今天所討論的這些原則,將一直適用於大多數的應用實例中。
- 具備美術修養。當一個藝術家在為多媒體設計圖像時,有許多小花招。如果要設計一個成功的圖像,則必須要體認到一點︰電腦不會替你創造藝術。一件好的藝術作品必須出自藝術家的藝術天賦與不斷的練習。當然,這並不是說如果你不是一個藝術家,你就沒有辦法創造出一個好的圖像。
- 具備鑑賞的眼光。要做出成功的圖像,有一個很重要的技巧是要有一雙具批判性的眼光。如果你能夠客觀地評量你的作品並且發現它的缺點,那麼你就能夠改進它。如果你相信你的作品只是〝還不錯〞,那麼它就還有一點點變得更好的可能。許多藝術家一直不斷地在尋求自身藝術造詣的更上層樓,而為了要訓練自己具有批判性的眼光,最好的方式就是常常接收他人對自己作品的回饋。有了多年來為學生作品打分數的經驗後,我發現其他人對同一作品會有不同於我的觀點的解釋,甚至常常有些人會指出我完全沒注意到的部分,而這個部分一但被我注意到,我也就能產生另一種不同的觀點。
當你向他人尋求對你的作品的忠告時,你必須要能夠不帶防衛地接受那些具建設性的批評。想想看別人所說的話,然後自己在心中衡量一下,要不就是回絕這個建議,要不就是改變你的圖像來改正有問題的部分。如果你回絕這個建議,那麼你也要能夠合理地解釋為什麼這不是一個好建議。「因為我想要這樣子做」並不是一個好理由。去找到一個願意提出誠實並有意的評語的人是很重要的,像「我喜歡」這樣的評語並不能幫助你把作品做得更好,請對方說說這個圖像在效用上的優缺點會是個不錯的方式。
- 熟練的繪圖技巧。光是想著要改進你的技巧,並且具有批判的眼光是不夠的,你將會發現若想要創作出成功的圖像,藝術技巧是絕對必要的。你可以依循某些規則或訣竅來學習發展這些技巧。雖然我們在網路上可以看到許多經過處理的影像,但是大部分的時候我們也必須具備實際繪圖的能力,手跟眼之間的協調、以及將眼睛所見的立體物體轉換成電腦上的平面圖像所需的視覺轉換能力,都需要許多年的訓練與經驗才能做得好。我所能提出的最好的建議是,你可以隨身帶著一本素描簿,並且在任何時候畫下你所見的事物,這樣不久你就能夠自然且隨意地表達你所想表達的東西。要有創意地處理影像也需要技巧,你必須考慮顏色、整體設計、對比、色值、符號意涵、以及許多其他的因素。要用
PHOTOSHOP 把兩個影像放在一起,然後製造出一個圖像放在你的網頁上,這看起來很容易,但你必須注意,如果你在設計一個圖像時,將它獨立於整體網頁的設計考量之外,那麼你的網頁可能會顯得雜亂無章而使得效果有所打折。
- 圖像性質前後一致。你的網頁上的每一個圖像都與彼此有著緊密的關聯,所以,當它們被合置在一個網頁上時,你不能對它們作各自獨立的處理,因此,發展一套圖像的規則並且確實地應用在圖像的創造上就非常重要了。例如,你可以藉由在每一個圖像上加一道
3 個像素寬的邊框,並且讓每一個圖像保持 1" X 1" 的大小,讓圖像間擁有一個共同的特質。當你建立起一套規則並實際地運用到你的網頁圖像上時,人們也許並不會注意到,但是,如果你的圖像大小不一,有的有邊框、有的沒有,那麼人們就很容易注意到,而使你的網頁不那麼吸引人。
- 陰影表現方式一致。當你在一個圖形或文字上使用陰影時,這通常表現出一種深度的錯覺;當你在文字下方加上陰影,會使得那文字似乎栩栩地躍然於紙上,這陰影用於圖像時,它也會讓讀者覺得這影像比較逼近自己。並不是所有時候都必須使用陰影,你應該小心並有創意地用它。在使用陰影效果時,你應該了解到,有陰影就表示有一個潛在的光源,比如說,你的物件有一個下方
4 個像素、右方 5 個像素的陰影,那麼看的人就會有意識或無意識地認定在相反方向的地方有一個光源。一個常見的錯誤是,在某個物體的某一邊製造出陰影,卻又在同一頁或同一個影像上的相反的那一邊也製造出陰影,這樣的錯誤會導致視覺混淆,而讓人無法確定光源到底來自哪個方向。
- 圖像大小有統一性。當處理成對出現或一系列的圖像時,你應該注意讓所有的圖像保持統一的規格,如果這些圖像都是以同樣的比例製作的,那麼這倒不是難事,但是如果這些圖形有的是水平的、有的是垂直的,那麼要把它們統一起來就有些難度了。如果可能的話,就把垂直和水平的影像分別集中在一起,並且統一它們的規格。如果你把垂直和水平的影像放在同一個區塊中,那麼就重新調整它們的大小,讓其中一個向度保持一樣的尺寸,這將有助於建立統一感。由於我們一般都習慣使用固定的行間距,所以,調整影像讓它在同一向度上具有一樣的長度,將有助於維持整齊的行列。當一個影像以水平方向向其他影像對齊時,就調整影像使它的高度相等,而垂直方向的對齊,則有賴於影像寬度的一致。
- 圖像排列有秩序。在一個有許多圖像的網頁上,即使每個圖像都有一致的規格,仍然有可能因為缺乏有創意地排列,而顯得凌亂隨便。如果你事先為你的網頁建立了格線,那麼只要將你的圖像依格線對齊,就能夠強制產生一個架構。不管你是否使用格線,你都必須有意識地決定如何安排這些圖像的位置,不要被
HTML 的技術限制住你對圖像編排的控制。
- 模仿其它媒體表現方式。有些時候藝術家們會模仿其他的媒體來創作圖像,比如說,我們都已習慣看到圖像後方出現陰影,而未曾質疑在電腦的影像上是不可能像現實世界中一樣出現陰影的。作為一個藝術家,他常常會去模擬或是借用某種媒材的視覺特性,並把它轉換到另一種媒材上面。在某些情況中,它的意圖是要在平面上製造出三度空間的幻覺,有許多技巧可以製造出這種三度空間的效果︰
- 線條透視畫法﹝將線條延伸聚集在無限遠的一點上﹞
- 將兩個影像輪廓重疊﹝在上者看起來比較近﹞
- 色彩透視畫法﹝較遠的物體具有較淺的顏色、且較不精細﹞
- 大小關係﹝大的物體看起來比較近﹞
- 做立體模型/做陰影/做漸層﹝將物體件加上立體效果﹞
- 以方向性燈光製造陰影﹝強調物體到表面的距離﹞
- 在平面上的位置﹝上面的物體看起來比較遠﹞
- 粗線條﹝看起來向前方前進﹞
- 色彩﹝亮/暖色系看起來向前方前進,暗/冷色系則看起來像在後退﹞
當第一次看到某些模擬手法時,我們常常會覺得驚訝或是新鮮。例如,在網頁上看到一個木質的邊框沒什麼了不起,可是從電腦螢幕上看到一個金屬材質的註冊標誌,就很少見了。當你仿照其他的媒體而創造出圖像,就有可能引起瀏覽者的好奇心,因而繼續瀏覽你的網頁。
- 謹慎使用濾鏡效果。雖然有創意的濾鏡效果能夠加強網站的視覺效果,但是有許多處理的方式都已經被過度使用而變成陳腔濫調了。例如,頁尾捲起的效果,在一開始被引進時,就被大量地引用,不管這樣的效果有沒有意義或是它和頁面的內容圖片有沒有關係。當你發現一種新的濾鏡效果時,要小心,這樣的處理方式可能會被誤用或是過度使用,而使的原來的本意大打折扣。因此使用濾鏡時,要謹慎並且要有選擇性,試著避免直接使用它的預設值,並且盡量將多種濾鏡組合使用,以創造出不能被歸類為某一種濾鏡效果的圖形。
- 謹慎使用動畫效果。動畫效果對你的網頁可以說是既能載舟,也能覆舟,所以你必須仔細考慮何時?以及為何要使用動畫,在許多例子中,動畫是被用來標示你的畫面上的一些新鮮有趣的東西,有時動畫則可以增加資訊的負載量,製造出某一種氣氛、或是配合支援網頁的內容。要記住,在大部分的情況中,動畫都會使得下載的速度變慢,而讓連線必須一直處於開啟狀態。
如果你創造了一個動畫,請仔細的想想看這個動畫會與網頁上的其他元素會產生怎樣的互動?它會對讀者的感受與所要傳達的資訊有幫助嗎?動畫的動作跟色彩或是其中元素的安排一樣重要。如果你打算要放進一個動畫,那就讓它值得觀賞者花費那些下載的時間,並且讓你的動畫變動的動作看起來盡可能地順暢。
| 圖像設計要領 |
|
﹝一﹞圖像的主體
- 清晰可見,去除不必要雜訊。
﹝二﹞圖像的意義
- 簡單明瞭。
﹝三﹞圖像內文字的本身
- 清楚容易視認。
﹝四﹞圖像內文字的裝飾
- 沒有過分花俏裝飾,造成文字辨識不易。
|
第四:色彩的意義與選擇
你在為網頁設計圖形時,應該特別注意色彩的選擇。如同前面所提到的,網頁上的影像並不能獨立於其他元件單獨運作。因此在對圖形加入色彩之前,你應該首先考慮網頁的整體色彩架構。
在網頁中使用色彩的原因應當如下:
- 區分項目
- 統一元件
- 喚起情緒反應
- 提高視覺反應
- 將觀念符號化
- 打破傳統
- 吸引注意力
在影像中的色彩,會受到周圍色彩的影響。例如,當紅色置於綠色附近,綠色會被增強。經過細心組合與安置的色彩可以讓個別的顏色在視覺上彼此影響。互補的色彩有彼此機動配合的作用。對比的色彩,會令人產生一種緊張或興奮的感覺。調和色彩,也就是在色彩輪盤上彼此靠近的顏色,會產生一種和諧與穩定的感覺。最好在你的影像上,選定一定範圍的色彩,而不要運用如彩虹般眾多的的色彩。
- 色彩與情緒。德國的理論家,詩人與小說家哥德,曾經研究色彩對於觀察者的感官與心理的效應。他相信當一個人觀看色彩時,會建構出一複雜組合的心理經驗,並認為色彩可以激發記憶與期待。雖然他的想法不被當時的科學界所接受,不過現在我們卻發現他的研究具有實質的內容。雖然在不同文化之間,對於色彩的效應並不存在著所謂普遍的認知,我們依然可以肯定西方對於色彩在心靈上的效應所做的觀察。譬如:
- 紅色,橘色與黃色具有激勵效應,快樂的,熱情的特質。
- 藍色與綠色具有安撫與鎮定的效應,憂鬱的特質。
- 紫色具有神秘與不安的特質。
已經有研究顯示,色彩甚至能影響觀察者的新陳代謝與對他們所處的環境的感受。有報導說,在藍色的房間內感覺較冷,而在黃色的房間內感覺較暖和。有人認為,在紅色範圍內的色調有助組織復原,然而藍色與綠色會減少荷爾蒙的活動。
- 色彩與象徵。在不同的文化中,色彩具有相當不同的象徵意義。當為網際網路設計圖形使用色彩時,須注意某些色彩被認為具有強烈的象徵或宗教意義。在西方文化中,白色象徵純潔;當使用疊加色彩系統時,它是所有色彩的組合。然而,在某些亞洲文化中,白色象徵死亡。黑色,沒有光線時,普遍地象徵夜晚;但是在某些文化中,也意指死亡,危險和邪惡。黃色經常讓人聯想到陽光,但是在世界上乾熱的地區,太陽被認為有害。黃色有時讓人聯想到黃金與富有,但是在某些文化中,也已被認為哀悼的色彩。紅色象徵熱情與愛情,但是在某些文化中,意指低俗與怪異。因為對色彩的聯想缺乏普遍的象徵意義,使得很難認定全球的人如何詮釋你所選擇的色彩。
- 色彩與冷暖。如同前面所提到的,色彩被使用來對於你的圖形創造一種三度空間的感覺。暖色系,﹝黃色,紅色和橘色﹞,在構圖中呈現往前跳躍。冷色系,﹝藍色和綠色﹞,似乎產生後退的感覺。經由選擇能幫助區分背景與前景的色彩,將對你有利。選擇色彩使得背景變成明亮的黃色或橘色且使得前景物體變成藍色或綠色,是一項常見的錯誤。假如你把焦點放在個別的色彩上,影像可能會集中在一起,但是當往後站立,當色彩似乎與設計者想要建立的空間關係相矛盾時,你會注意到有視覺的緊張與混淆。
- 有效的色彩與繪圖。當設計圖像時,應考慮整個網站,而不僅僅是為了個別的部分。你要考慮這個圖像如何與你在其他地方所做的東西有一致性呢?假如你僅僅為了吸引觀眾的注意,而使用一個圖像,並且在視覺上與觀念上,對於內容沒有任何關係,也許最好不要使用這個圖像。設計圖像最重要的事情是,避免不必要的圖像或是那些會貶抑你的觀念的圖像。例如,沒有必要為一個容易經由文字傳達意念的事物,去創造圖像,除非這個圖像能超越僅用文字的表達方式。總之,當設計超文件網頁時,圖像可以是用來傳達你的觀念的有效的方式。但是,一定要注意整合圖像,文字與其相關內容,以創造一個整體性的網頁是重要的一件事。
| 色彩使用要領 |
﹝一﹞純色的使用
- 同版面不宜超過三種純色。
﹝二﹞整體色彩的表現
- 要做到和諧並能達到視覺平衡。
﹝三﹞色彩的對比
- 不同類資訊之間避免使用類似色調,以致區隔不明顯。
﹝四﹞機能性色彩區塊的應用
- 運用小色球或色塊能造成集群化的效果,以協助視覺搜尋。
|
第四:文字的運用
論是在哪一種版面配置中,文字都同時扮演了內文與網頁上的圖像元素這 兩種角色,前面對色彩、圖像對齊等規則的建議,同時也都適用於文字。
- 文字為設計基本元素。在一開始學習版面設計時,你最好不要拿有意涵的內文來用在你的版面上,你可試著把文字看做編織紋路,因為在討論網頁設計與排版時,文字的實際內容並不重要。當然,對一個網頁設計來說,經過校對而沒有任何文法或錯字的文字內容是很基本必須的。為了將文字當作一個設計元素來討論,我們要注意文字區塊的形狀與版面安排方式上面。
- 水平與垂直排列。無論你是否在網頁中運用了隱藏的格線,你都應該將文字區塊的邊緣跟你的圖形邊框或是網頁上的其他元素對齊。當然有時也會有效果不錯的穿插著的文字,但它必須跟其他元素達到良好的平衡,讓人覺得那是經過特意設計的,而不是一個設計錯誤。HTML
語法中的表格功能,讓網頁設計者更能夠隨意地控制文字的置中或對齊,而注意頁面的規格與文字區塊的寬度之間的關係,也是很重要的。
- 字型的運用要有統一性。要有效地使用字型與字體,設立一個規則並切實地遵守。例如,所有的英文書名都使用斜體字,所有的副標題字體都設為四級的大小,諸如此類的用法。這能讓觀眾從文字體裁的式樣,快速地了解網頁的文字內容。
- 標題字的運用。如果你用標題或是較大字體的格式來作為對某一頁的快速導覽,那麼觀眾通常就能很快地找到他們要的資訊。HTML
提供了從〈Hl〉到〈H6〉的旗標,來控制字體的大小,從一號到六號,其中一號代表最大的字體。所有的瀏覽器都支援這組旗標,不過實際上的字體大小多少會有些出入。另一種製作標題的方式就是用〈FONT
SIZE = 4〉•••〈/ FONT〉這組旗標,來設定字體的大小。這種方式在沒有分段符號的情況下較具彈性,而你也可以用它來改變某一行的字體大小。
- 反鋸齒狀與鋸齒狀的文字。既然我們所做的是用在螢幕上的設計,那就難免會受到螢幕解析度的限制,在大部分的個人電腦以及麥金塔的標準解析度螢幕上,我們都可以清楚地以肉眼看出組成文字的像素,﹝尤其是有稜有角的字,如
W﹞,這對大標題以及斜體字的使用來說,是一個頗大的困擾。一般來說,這對 SGIs 及 SUN 的工作站螢幕則不是問題,因為他們有較高的解析度。有時你也許會使用反鋸齒文字﹝即無鋸齒線﹞,在這種情況下,你必須創造出一個包含這項文字的圖形,當然,這是一種妥協,你想要增加你的字型品質,就得要花費較多的下載時間。
- 可讀性的問題。雖然我們已有許多種方式可以控制格式,但在字型變化的能力上則仍有待努力。由於平台之間相容性的問題,使得我們只能使用平台間某些共同的字型。雖然使用者能設定瀏覽器的預設字型,但是選擇並不多。基本的選擇就是非比例﹝即所有的字元都具有一樣的字元空間﹞,以及比例字型。後者較容易閱讀,但前者在行列的設計上有比較好的效果。﹝PRE﹞這個旗標除了注意到文字中的空白鍵以外,它也是以一種非比例的方式排列。
- 文章與字型的整合。 ﹝FONTFASE="
"﹞的旗標讓網頁設計者得以直接指定字型,雖然這讓網頁能夠以一種比較有創造性的方式處理格式,但是當所指定的字型只在某些平台上受到支援時,它就常常會變成無效的設定。這種規格挑戰了
WWW 的跨平台原 理,它也為下一代的 WWW 對字型之支援的發展鋪路。
- 英文大寫字體的運用。在打字機的年代,我們對文字的格式並沒有什麼選擇性,當我們想要讓某些文字看起來格外醒目時,我們通常會用大寫來打每一個字母。
在聊天室或是電子郵件裡,當你全部使用大寫時,不但太過粗魯,而且全部大寫的字也會讓人不易閱讀。我們通常依照一個字的形狀來辨識它,而很少會一個字母一個字母地去拼出〝the〞這個字,我們很快速地認出這個字並繼續閱讀下面的文字。當全部使用大寫時,每個字看起來就會變成一樣的形狀,只是長度不同罷了,這會讓文字的可讀性大大地降低。
- 瀏覽器與文字。人們就像一個瀏覽器,我們掃視過許多畫面,但是只對其中很小的部分加以注意。當我們在網頁之間移動時,不太可能在每個地方都停下來逐字逐句地讀,閱讀電腦螢幕上的文字要比閱讀紙上的文字困難得多,這是因為眼睛容易緊繃著,而且電腦螢幕的位置也會造成影響。
一般來說,要閱讀一個以文字為主的網站是不太容易的,因為人們通常並不想花費太多的時間在閱讀一個網站的文件上,因此,保持訊息的簡明,並控制文字的量是很重要的。對網頁作適當的格式化安排,讓它可以被印出來並且讓人們能夠不必經由電腦閱讀它。如果你有許多文字資訊,那麼把它們拆成幾頁,用目錄或大綱的形式讓使用者可以依照自己的進度依序閱讀。一般原則是,一個網頁的長度最好不要超過螢幕高度的三倍。
- 運用小字塊。將一大塊的文字分割成幾個較容易控制的小區塊也是不錯的方式,使用分隔符號、圖形,或是在段與段之間加以分隔,能夠讓人在視覺上稍作休息,再繼續讀下一段文字。一段簡短的文字是要比一大塊沒有間斷的文字要容易閱讀得多。
- 文字與互動設計。文字可以以多種形式來增進互動性,除了超連結功能外,也可以讓觀眾自己輸入資訊,而有不同的體驗。
| 文字運用要領 |
﹝一﹞每一行文字的長度
- 最好 25 到 35 個中文字﹝50 到 70 個英文字母﹞
﹝二﹞行距與字距
- 行距與字距已由軟體內定。設計者能以段落與段落間空行,及首行縮排方式以輔助閱讀。
﹝三﹞字體大小
- 標題以 H1 到 H3 為佳,內文 font size = 3 到 4 級為佳。
﹝四﹞同版面的字型
- 三種字型以內。
﹝五﹞文字的顏色
- 三種顏色以內。
﹝六﹞已選過的文字
- 在顏色上要能與未選過之文字連結點辨別,也要與背景區分。
﹝七﹞內文的排列
- 向左對齊並與左邊界保持適當距離。可以善用表格填入文字以達此
效果。
﹝八﹞表格或清單內的字
- 運用相同字型與字體大小,以利辨別。
|
| 自我測驗 |
- 網頁設計與編排原則選擇一個你喜歡的網站,加以分析並列初期優缺點。
|
 |
《台灣美術史》
|
|