前言:尋找寫作靈感?中文期刊網用心挑選的網頁界面設計的留白應用,希望能為您的閱讀和創作帶來靈感,歡迎大家閱讀并分享。
摘要:網頁的核心功能是傳遞信息,網頁界面設計成功的留白對信息傳達效果的優化具有重要的影響。該文分析網頁界面設計的留白應用,以期為設計者更好地掌握并運用留白設計提供理論借鑒和實踐依據。
關鍵詞:留白網頁設計界面設計
從字面意義看,留白即留下空白。正如宗白華所說:“生動之氣韻籠罩萬物,而空靈無跡;故在畫中為空虛與流動。中國畫最重空白處??瞻滋幉⒎钦婵?,乃靈氣往來生命流動之處。且空而后能簡,簡而練,則理趣橫溢,而脫略形跡。”[1]從藝術視角解讀,留白是具有主觀目的性的“以無相表達意象”的有意而為,是藝術創作過程中講求“言有盡而意無窮”的一種構圖方法和設計手段。
一、留白在網頁界面設計中的類別演化
1.中國畫。留白在中國畫尤其是傳統意義上的中國繪畫作品中,最擅長刻畫與塑造“無畫處皆成妙境”的氣韻意境。留白以宋代馬遠的《寒江獨釣圖》最具藝術代表性。畫家在畫面中用寥寥數筆突顯大幅空白之中的幾許墨色,虛實相望、淡泊空靈,精巧地渲染出“一葉扁舟,獨釣蓑笠翁;幾道鱗紋,滿幅皆活水”的悠然安閑意境。由此畫境可以看出,留白不等于無意義,其可被理解為一種空[2]??债a生于有形之外的空間中,它雖無形,但并不代表“什么都沒有”或“零能量”[3]。中國畫中的成功留白處理,在藝術欣賞層面,側重于留給觀者想象的空間,筆雖未到而意已至,使觀者產生無限的回味與遐思妙想;在審美格調層面,著意于以玄妙莫測的氣韻意境,折射出文人畫者內心世界的自然高遠與靜謐安然;在精神氣質層面,著力于以空靈雅韻、虛實融匯的超然境界,映射出中國傳統文化幾千年來積淀發展而形成的兼容并蓄、和合共生的價值觀。
2.平面設計。隨著時代的發展,留白逐步從傳統繪畫形式延伸到其他藝術領域,平面設計即可被視為從傳統繪畫演化而來的二維藝術表現形式。為了吸引受眾的注意,設計者需要充分關注并為之付出精心設計創意的主動思考。在設計作品中,大面積的空白可以使畫面的主體更加突出、集中、醒目,將信息準確地傳達給受眾,滿足瞬時的傳達與交流的需要[4]。留白作為蘊含豐富內涵的鮮明獨特的設計語言,在設計作品中行之有效且大放異彩。設計者要合理運用通過留白塑造的視覺動向順序和視覺心理感受,突出作品中的主體元素而簡化其他元素,形成令人矚目的視覺格調和情感輻射,以此增強設計作品的視覺傳達效果和藝術感染力,提升設計作品的藝術品位。
3.網頁設計。借助計算機等多媒體信息技術發展起來的網頁設計,是平面設計在不同傳播媒介和藝術載體上的演進。留白在網頁設計中的構造形式,除了具備平面設計范疇的形式美法則的共性特征,還有作為新生藝術形式的獨特造型特點和先進設計語言。在網頁設計中,留白并不只是在一定區域內留出白色,而是可以擴展至色彩、圖像圖形、紋理符號等諸多構成元素,其存在于主體元素之外且處于隱匿狀態;是在設計區域內減少或去除網頁組成元素及其裝飾效果,使該區域內呈現出主觀考量下的空白未使用狀態;是一種經過綜合的虛實、有無處理的頁面空間表現,是平衡吸引視線的“有”和“無”的結構元素;是在主體空間之外刻意營造的負空間,能劃分出主體形象以外的區域,凸顯設計的“呼吸感”和空間感。
二、留白在網頁界面設計中的特征
1.平衡布局。留白主要通過頁面空間的網格化管理實現對頁面元素的虛實疏密管理,以產生網頁視覺傳達的節奏感、對稱感和平衡感。在具體設計時,設計者應借助空白載體對界面元素(包括圖形、文字、色彩及系統輔助符號)進行有效對比、調和并合理布局空間,化解因為信息繁多而造成的空間壓迫感,讓瀏覽者能夠在透氣的氛圍中輕松、愉悅地獲取,產生在不平衡中尋求平衡的藝術效果[5]。設計者要充分考慮網頁媒介的全系感官效應,區分圖形、色彩、文字模塊等元素形成的視覺體感的輕重,以對應頁面主體元素和從屬元素不同的視覺節奏與效應。在大比重的留白下,網頁界面視覺焦點效應更加突出且能保持界面組成元素的本體結構特征,更容易使受眾放慢瀏覽節奏以接收更多的信息。網頁界面布局的平衡會彰顯信息傳遞和留白的作用守恒關系,設計者需要仔細推敲重點信息和裝飾元素的組織從屬關系,營造適合大眾的,具有舒適性、可讀性和視覺審美價值的空間平衡效果。
2.突出主題。網頁界面設計必須緊緊圍繞網頁信息傳遞的主題,滿足人們對界面清晰易懂的需求。界面主體形象本身在形狀、大小和色彩分類上就具有視覺傳達優勢,在其周圍輔以一定的留白,可有效減少其他非主體元素對瀏覽者視線的干擾。設計者通過強化主體的突出性、各類裝飾性手法的應用和功能性空間的塑造,充分發揮留白的邊際襯托效應,會使網頁主題得到清晰準確的表達。減少頁面色彩的數量或使用低飽和度、低明度的色彩,可以使頁面色彩整體更加和諧,并使主題信息形象的色彩更加引人注目。留白設計可以在瞬間完成對受眾注意的吸引,讓受眾的視線容易被吸引并集中到界面主體形象之上,帶動受眾按照已有的設計層次有效注意信息,使受眾在迅速、準確接受信息傳遞的同時獲得舒適美觀的視覺色彩享受,激發受眾深層次瀏覽網頁的興趣。
3.提升體驗。留白是網頁界面設計具有“生命呼吸”特質和情感空間氛圍的藝術處理手段,充滿人性化特征和豐富的感情色彩,可以強化網頁界面設計的空間層次感和“呼吸感”,消解不同元素視覺疊加產生的無序感和壓迫感,增強網頁的可讀性、易讀性、便捷性和舒適性,帶動受眾注意并指引其瀏覽閱讀順序,實現對頁面信息的快速、準確傳遞。設計者要充分利用網頁界面色彩的強大視覺沖擊力和豐富情感,借用局部或偏于整體的留白襯托主體色彩的視覺吸引力,突出界面主體色彩的心理聯想引導作用和審美情感喚起優勢。簡潔、清新、明了的網頁界面設計可以顯著優化受眾的用戶體驗,設計者應著重分析受眾對于網頁信息的獲取方向以確立界面設計主題,充分考慮網頁功能和受眾需求之間的平衡點。借助留白可以實現網格化、邊框化的頁面元素分級分層處理,使之圍繞網頁主題形成受眾視覺專注中心,以完成對網頁信息的高效傳遞。因此可以說,留白設計是確立網頁界面設計價值內核的功能性、實用性選擇。
三、留白在網頁界面設計中的應用手法
1.黑白虛實。網頁界面設計中的黑白虛實對應著頁面中的實體元素和留白空間。在網頁界面設計中,設計者要由整體至局部盡量減少雜亂因素的干擾,合理分析頁面組成元素的黑白比例關系,靈活運用形式美法則,通過頁面中點、線、面元素的穿插,精心構思頁面本身或元素間的留白比例,以形成黑白呼應、相互映襯、虛實分明、富有節奏的頁面虛實空間劃分效果。網頁設計中的虛是為強調實,虛主要體現為網頁界面組成元素以外的空白部分、大面積的單色(低純度、低明度)范圍以及頁面底色中包含重復規則形狀的背景色等。依據網頁界面設計中實體元素的重要程度不同,其視覺留白的比重亦不相同,主題元素與板塊周圍的留白比重較小,裝飾較少,背景色單一;反之則向另一面發展。設計者在營造網頁界面的虛實關系時,要充分考慮元素的大小比例、顏色的強弱明暗、圖形的清晰模糊等需要調和的內容,從而形成虛實相生的視覺傳達效果和藝術審美品位。
2.疏密多少。網頁界面構成元素要充分圍繞主體確定布局結構,設計者要反復推敲元素間的疏密關系,然后確立相對清晰的受眾瀏覽順序和視覺導向。設計者應遵循“疏能跑馬、密不透風”的留白技巧,對畫面元素施以打散與組合的藝術處理,做到繁而不亂、密而不結、層次分明、關系明確,實現疏密動靜結合,使網頁界面簡而不空。在元素構成方面,設計者要遵循“少即是多”的組成原則,控制元素(包括文字、圖片、色彩)的種類和數量,注重元素的細節和布置的規整,營造有序、和諧、交互的情感空間。在網頁界面設計中,設計者可以通過版式的編排建立界面不同維度的空間關系,提高信息傳達的效率[6]。設計者要注意降低文字板塊的疏密程度對于受眾閱讀的影響,特別要著重考慮字間距和行間距,依據不同的文字屬性確定不同的留白、間距,還應根據不同板塊信息傳達元素的數量和輕重確定留白疏密的程度,使界面的各個組成部分體現出整體結構上的空間感、品質感和節奏感,以形成良好的界面美化效果。
3.輕重加減。網頁界面設計中留白的輕重程度不同。頁面中大比重的留白主要適用于網站的形象頁(歡迎頁)、橫幅部分以及頁面中的單體廣告信息等,適合塑造概念化、氣質化、品牌化的主題形象;小比重的留白,具有背景(色)簡單實用、頁面裝飾少或沒有裝飾的構成特點,容易營造雅致文藝的高端設計感。輕度留白會融合重度留白的優勢,而且不易受頁面主體形象屬性的影響,也容易擺脫頁面元素的相似性的束縛。設計者要為受眾留出視知覺預留空間,明確受眾接受視覺傳達信息的效果與信息容量并無直接關系。因此,設計者可以先用實體元素做加法,預先構建頁面的信息組成架構,再以空間留白為手段做減法,減除不必要、無間歇的元素,以避免受眾產生視覺疲勞,達到匯聚視線、凸顯主題的目的,引導受眾按留白構建的輕重主次移動視線,瀏覽并接收信息。要想完成布局簡約、結構層次清晰的網頁界面設計,設計者就要盡量采用直觀、實用的網格化布局設計,對頁面元素進行歸類優化,提煉元素特征,同時減去重復描述信息的元素,堅決剔除易使界面產生混亂的不必要的裝飾元素,充分降低頁面噪音,從而形成簡潔、易用、優質的瀏覽交互和信息傳遞界面。留白在網頁界面設計中頗具“舍得”意味。留白需要舍棄,但留白不是無謂的放棄,正所謂“保持一空,其用無窮”。留白是網頁界面設計過程中對界面元素的組合、調整和優化,也是網頁設計者對受眾行為的尊重和審美情感的成全。
參考文獻:
[1]周文杰.游戲、審美與精神家園[J].哲學研究,2011(9):115-118.
[2]湯文莉,胡易容.符號學視域下廣告中的留白研究[J].包裝工程,2019,40(20):57-62.
[3]王雙全,陳玲令.設計中白與空的物自性應用研究[J].包裝工程,2017,38(16):214-216.
[4]吳海燕.知白守黑——論平面設計中的白色設計[D].西安:西安美術學院,2010:12.
[5]宋朝陽.現代平面設計中的留白藝術[J].包裝工程,2016,37(22):221-224.
[6]倪家亮,劉冰.“留白”理念在網頁設計中的映射[J].藝術與設計(理論),2015,2(11):36-38.
作者:祝曉銘 王艷平 單位:.山東理工大學淄博第十七中學