網頁美學設計原則 下

2022-02-06 15:46:51 字數 4974 閱讀 5009

二:平面

設計編排構成原理

多**觀眾一方面從計算機螢幕上所呈現的視覺表徵得到資訊,做出反應;另一方面根據其美感經驗,從計算機螢幕上賞心悅目的視覺呈現,引起他的良好溝通情緒。乙個賞心悅目的視覺呈現有賴於

設計者的創意﹝idea﹞、表現技巧﹝technique﹞、編排﹝lay-out﹞能力。

目前許多國內

設計的計算機螢幕視覺呈現是依賴

設計者的感覺來處理,或者憑其多年的實務經驗來完成。但是「感覺」對想學習多**

設計的人是很難捉摸的,「經驗」更是殘酷的。因此將「美的原則」運用於平面

設計的編排與構成,形成「平面

設計編排構成原理」,可以幫忙初學者;甚至對

設計師而言,在其面臨缺乏「感覺」的時候,還能創作出具水準的作品。

﹝一﹞大小的對比

大小關係為造形要素中最受重視的一項,幾乎可以決定意象與調和的關係。大小差別少,給人的感覺較沈著溫和,大小的差別大,給人的感覺較鮮明,而且具有強力感。

﹝二﹞明暗的對比

陰與陽、正與反、晝與夜等等,如此類的對比語句,可使人感覺到日常生活中的明暗關係。初誕生的嬰兒,最初在視覺上只能分出明暗,而牛、狗等動物雖能簡單識別黑白,可是,對彩度或色相卻無法輕易識別,由此可知,明暗﹝黑和白﹞乃是色感中最基本的要素。

﹝三﹞粗細的對比

字型愈粗,愈富有男性的氣概。若代表時髦與女性,則通常以細字表現。細字如果份量增多,粗字就應該減少,這樣的搭配看起來比較明快。

﹝四﹞曲線和直線的對比

曲線很富有柔和感、緩和感;直線則富堅硬感、銳利感,極具男性氣概。自然界中,皆由這兩者適當混合。平常我們並不注意這種關係,可是,當曲線線或直線強調某形狀時,我們便有了深刻的印象,同時也產生相對應的情感。故我們常為加深曲線印象,就以一些直線來強調,也可以說,少量的直線會使曲線更引人注目。

﹝五﹞質感的對比

在一般人的日常生活中,也許很少聽到質感這句話,但是在美術方面,質感卻是很重要的造形要素。譬如鬆弛感、平滑感、濕潤感等等,皆是形容質感。故質感不僅只表現出情感,而且與這種情感融為一體。

我們觀察畫家的作品等,常會注意其色彩與圖面的構成,其實,質感才是決定作品風格的主要因素,雖然色彩或物件物會改變,可是,作為基礎的質感,是與一位畫家之本質有著密切的關係,是不易變更的。若是外行人就容易疏忽這一點,其實,這才是最重要的基礎要素,也是對情感最強烈的影響力。

﹝六﹞位置的對比

在畫面兩側放置某種物體,不但可以強調,同時也可產生對比。畫面的上下、左右和對角線上的四隅皆有潛在性的力點,而在此力點處配置**、大標題或標誌、記號等等,便可顯出隱藏的力量。因此在潛在的對立關係位置上,放置鮮明的造形要素,可顯出對比關係,並產生具有緊湊感的畫面。 ﹝七﹞主與從的對比

版面設計

也和舞台

設計一樣,主角和配角的關係很清楚時,觀眾的心理會安定下來。明確表示主從的手法是很正統的構成方法,會讓人產生安心感。如果兩者的關係模糊,會令人無所適從,相反地,主角過強就失去動感,變成庸俗畫面。

戲劇中的主角,人人一看便知。版面中若也能表現出何者為主角,會使讀者更加了解內容。所以要有主從關係是

設計配置的基本條件。

﹝八﹞動與靜的對比

乙個故事的開始都有開端、說明、轉變和結果。一座庭院中,也有假山、池水、草木、瀑布等等的配合。同樣的在

設計配置上也有激烈動態與文靜部份。

擴散或流動的形狀即為「動」。水平或垂直性強化的形狀則為「靜」。把這兩者配置於相對之處,而以「動」部份佔大面積。

「靜」部份佔小面積,並在周邊留出適當的留白以強調其獨立性。這樣的安排,一般用來配置於畫面四隅的重點。因此,「靜」部份雖只佔小面積,卻有很強的存在感。

﹝九﹞多種的對比

對比還有曲線與直線、垂直與水平、銳角與鈍角等種種不同的對比。如果再將前述的各種對比和這些要素加以組合搭配,即能製作富有變化的畫面。

﹝十﹞起與受

版面全體的空間因為各種力的關係,而產生動態,進而支配空間。產生動態的形狀和接受這種動態的另一形狀,互相配合著,使空間變化更生動。

我們要建造假山庭園時很注重流水的出口,因為流水的出口是動感的出發點,整個庭園都會因它而被影響。談到版面構成,原理也一樣,起點和受點會彼此呼應、協調。兩者的距離愈大,效果愈顯著,而且可以利用畫面的兩端,不過起點和受點要特別注意平衡,必須有適當的強弱變化才好,若有一方太軟弱無力就不能引起共鳴。

﹝十一﹞圖與地

明暗逆轉時,圖與地的關係就會互相變換。一般印刷物都是白紙印點字,白紙稱為地,黑字稱圖。相反的,有時會在黑紙上印上反白字的效果,此時黑底為地,白字則為圖,這是黑白轉換的現象。

﹝十二﹞平衡

走路踢到大石頭時,身體會因失去平衡而跌倒,此時很自然地會迅速伸出乙隻手或腳,以便維持身體平衡。根據這種自然原理,如果我們改變一件好的原作品的各部份的位置,再與原作品比較分析,就能很容易理解平衡感的構成原理。

﹝十三﹞對稱

以一點為起點,向左右同時展開的形態,稱為左右對稱形,英文名為 symmetry。應用對稱的原理即可發展出漩渦形等等複雜狀態。

日常生活中,常見的對稱事物確實不少,例如:佛像的配置或日本神社中神殿的配置等等。對稱會顯出高格調、風格化的意象。

﹝十四﹞強調

同一格調的版面中,在不影響格調的條件下,加進適當的變化,就會產生強調的效果。強調打破了版面的單調感,使版面變得有朝氣、生動而富於變化。例如:版面皆為文字編排,看起來索然無味,如果加上插圖或**,就如一顆石子丟進平靜的水面,產生一波一波的漣漪。

﹝十五﹞比例

希臘美術的特色為「**比」,在

設計建築物的長度、寬度、高度和柱子的型式、位置時,如果能參照「**比」來處理,就能產生希臘特有的建築風格,也能產生穩重和適度緊張的視覺效果。長度比、寬度比、面積比等等比例,能與其它造形要素產生同樣的功能,表現極佳的意象,因此,使用適當的比例,是很重要的。

﹝十六﹞韻律感

具有共通印象的形狀,反覆排列時,就會產生韻律感。不一定要用同一形狀的東西,只要具有強烈印象就可以了。三次四次的出現就能產生輕鬆的韻律感。有時候,只反覆使用二次具有特徵的形狀,就會產生韻律感。

﹝十七﹞左右的重心 在人的感覺上,左右有微妙的相差。因為右下角有一處吸引力特別強的地方。考慮左右平衡時,如何處理這個地方就成為關鍵性問題。

人的視覺對從右上到左下的流向較為自然。編排文字時,將右下角空著來編排標題與插畫,就會產生一種很自然的流向。如果把它逆轉就會失去平衡而顯得不自然。這種左右方向的平衡感,可能是和人們慣用右手有點關係吧!

﹝十八﹞向心與擴散

﹝十九﹞jump 率

在版面設計

上,必須根據內容來決定標題的大小。標題和本文大小的比率就稱為 jump 率。jump 率越大,版面越活潑;jump 率越小,版面格調越高。依照這種尺度來衡量,就很容易判斷版面的效果。標題與本文本號決定後,還要考慮雙方的比例關係,如何進一步來調整,也是相當大的學問。

﹝二十﹞統一與調和

如果過份強調對比關係,空間預留太多或加上太多造形要素時,容易使畫面產生混亂。要調和這種現象,最好加上一些共通的造形要素,使畫面產生共通的格調,具有整體統一與調和的感覺。 反覆使用同形的事物,能使版面產生調合感。若把同形的事物配置在一起,便能產生連續的感覺。兩者相互配合運用,能創造出統一與調和的效果。

﹝二一﹞導線

依眼睛所視或物體所指的方向,使版面產生導引路線,稱為導線。

設計家在製作構圖時,常利用導線使整體畫面更引人注目。

﹝二二﹞形態的意象

一般的編排形式,皆以四角型﹝角版﹞為標準形,其它的各種形式都屬於變形。角版的四角皆成直角,給人很規律,表情少的感覺,其它的變形則呈現形形色色的表情。譬如成為銳角的三角形有銳利、鮮明感;近於圓形的形狀,有溫和、柔弱之感。 相同的曲線,也有不同的表情,例如規規矩矩和用儀器畫出來的圓,有硬質感,可是徒手畫出來的圓就有柔和的圓形曲線之美。

﹝二三﹞水平線

黃昏時,水平線和夕陽融合在一起,黎明時,燦爛的朝陽由水平線上公升起。水平線給人穩定和平靜的感受,無論事物的開始或結束,水平線總是固定的表達靜止的時刻。

﹝二四﹞垂直線

垂直線的活動感,正好和水平線相反,垂直線表示向上伸展的活動力,具有堅硬和理智的意象,使版面顯得冷靜又鮮明。如果不合理的強調垂直性,就會變得冷漠僵硬,使人難以接近。 將垂直線和水平線作對比的處理,可以使兩者的性質更生動,不但使畫面產生緊湊感,也能避免冷漠僵硬的情況產生,相互截長補短,使版面更完備。

﹝二五﹞陽晝、陰晝

從黑暗的洞窟內,看外面明亮景象時,洞窟內的人物,總是只用輪廓表現,而外面的景色就需小心描畫了。這就是同時把握日常的情況及異常的明暗,顯出不可思議的空間。

正常的明暗狀態,叫做「陽晝」,相反的情況是「陰晝」。構成版面時,使用這種陽晝和陰晝的明暗關係,可以描畫出日常感覺不同的新意象。

﹝二六﹞留白量

速度很快的說話方式適合夜間新聞的播報,但不適合做典禮的司儀,原因是每一句話當中,空白量太少。談到版面

設計時空白量的問題也很重要,即使同一張**,同樣的句子也會因空白量就很難表現確實的形象。無論排版的平衡感有多好,文章有多美,讀者一看版面的空白量就已給它打好分數了。

﹝二七﹞版面率在設計

用紙上,本文所使用的排版面積稱為版面,而版面和整頁面積的比例稱為版面率。空白的多寡對版面的印象,有決定性的影響。如果空白部份加多,就會使格調提高,且穩定版面;空白較少,就會使人產生活潑的感覺。若

設計資訊量很豐富的雜誌版面時,採用較多的空白,顯然就不適合。

﹝二八﹞螢幕上字的大小

多**影像通常是在計算機影像顯示器﹝monitor﹞或在電視機上呈現。

根據分析,為了視覺的舒適感,呈現在計算機影像顯示器上最小且清晰的中文字型應為 16 pixels﹝w﹞×16 pixels﹝h﹞點陣字型的細明體。至於呈現在電視機上最小且清晰的中文字型應為 36 pixels﹝w﹞×36 pixels﹝h﹞的點陣字型,這是因為電視機需要從較遠的距離**的緣故。從閱讀習慣來看,為了配合人們橫向閱讀中文的最佳狀態是,一列最好不要超過 35 個字。

根據觀賞者的前述需求,多**計算機影像顯示器的解析度最好設定為 640 pixels﹝w﹞×480 pixels﹝h﹞。一般電視機的解析度上下的方向固定為 512 條掃瞄線。兩者和一般印刷品的解析度﹝350dpi﹞相比較,小了很多。

一般來說,在進行多**視覺傳達

設計之前,首要決定的就是螢幕上字的大小的運用標準,此與一般平面

設計的過程不盡相同。

網頁美學設計原則 上

一 美的原則 什麼是美呢?美的事物應該具備什麼條件呢?我們根據人類美感的共通性可以定出十個美的原則 連續 漸變 對稱 對比 比例 平衡 調和 律動 統 一 完整。在討論美的原則之前,必須先了解 單位形 的意義。單位形是在相同或相似的形象組合中最基本的單位元素。單位形可以單獨重複排列,或組成 單位形組...

設計原則之美學習筆記 設計原則

乙個類只負責完成乙個職責或者功能。不要設計大而全的類,要設計粒度小 功能單一的類。單一職責原則是為了實現 高內聚 低耦合,提高 的復用性 可讀性 可維護性。不同的應用場景 不同階段的需求背景 不同的業務層面,對同乙個類的職責是否單一,可能會有不同的判定結果。實際上,一些側面的判斷指標更具有指導意義和...

網頁設計原則

這些觀點都是我自己總結得到來的,暫沒有參考其它的意見 網頁設計原則遵循 分塊清晰 塊與塊之間配色或間距分明 同一型別塊樣式相同 不同型別塊樣式不同 背景採用暗色調 前景採用亮色調。因為 的編碼語言採用html,而html是乙個流模式語言,不同於winform的定位式介面,雖然設計起來要複雜很多,但細...