close

泛泛而談界面視覺效果的一致性 - 網頁設計

http://webdesign.zoapcon.com

 

  原來的題目設想為界面視覺效果的統一性,但是“統一”這個詞似乎有點敏感,怕觸動萌點無數,而我也無意去設定一個什么什么的統一性來侃侃而談,極為專業而考究,且畢竟是一篇博客文章,怕斬首細胞無數,索性改為“一致”略為妥當。泛泛而談更是期望隨意的態度,到哪算哪。有失偏頗,也在情理之中,當情有可原。若起爭議,求同存異,全為拋磚引玉。

  何謂“一致”:趨向相同。亦謂沒有分歧。《易 系辭下》:“天下同歸而殊涂,一致而百慮。”達成一致可有不同方法,在視覺上亦可稱之為不同的表現和手段。當然更為重要的是達成一致的視覺表現需要有一個整體的主題框架,以及在此框架下的多個前提點。

  小學階段,知識貧乏而單一,造成任何科目的老師們慣用的一個哲學思想無不是:“世界上沒有兩片葉子是相同的。”這句話或許對或許不對,對的是,世界上真的沒有兩片葉子是完全一致的,不對的是一致的前提太過于狹隘。“完全一致”豈非狹隘?如果前提是葉子的顏色,那么所有黃色的葉子都是一致的。如果前提是葉子的形狀,那么所有巴掌樣的葉子都是一致的。如果前提是葉子的種類,那么所有楓樹的葉子都是一致的。甚至促成葉子一致的前提還有質感、季節、空間、掉落得速度等等等等諸如此類,而不能通過人的個人意志和感覺。

  將這些一致的前提點在不同情況下綜合、取舍,有助于我們去認定一個相同屬性的范圍,在界面的視覺表象上我們同樣可以借助這個一致性去認定同一范圍下的品牌效應,這個一定的范圍概念包括:同一公司下的結界面效果,同一屬性下的產品界面,不同版本的同一個軟件產品的界面??當然這個是引申開去的題外話。

  言歸正傳,在不同的主題框架下設定一致性的前提,是至關重要的,只有當物體的表象被設定了一個對應的前提,所謂的視覺一致性才得以成立。在具體設計過程中,就得事先提煉一個一致性的主題框架,在這個主題框架下去選擇必須囊括的一致性的前提點進行組合,以達到視覺效果一致性的設計和判斷等目的。

  以下為自己過往設計的一些界面,按照時間順序跨度一年有余,期望從一個設計時間線上去看待不同設計作品。個人認為, 通過界面組成元素和表現手段的拆分,盡管每一個設計的顏色各異,每一個設計對應的產品也有自己的特色,每一個設計的結構有所區別,但他們的視覺表現基本還是保持一致的。


(圖一 展示界面的合集)

  每一個設計都有不同的視覺表現,形、色、質相輔相成。每一個界面也有不同的組成元素,文字、組件、圖標交融交錯。每一個組成部分都有特定條件下的前提以促成他們在視覺表現上的一致性。本文的重點是對一致性的前提概念進行確立的探討。而不是去梳理作為一致性前提的每一個具體實在可觸碰的點,因為這是一個龐大的內容,必須細致的區分每一個主題框架下組成部分的一致性前提點,以及這些前提點在特定條件下的取舍與組合。以來對應特定產品系列的一致性概念。

  因此文中只就自身界面視覺設計中所能提取到的幾個前提點進行是否影響一致性以及重要程度的舉例描述:

  形的表象:

  界面的形具體分為外形,內形。外形側重界面的外在具體形狀。內形對界面的內容進行并列和分割。

  外形方面:每一個產品的主界面外形都是來源于軟件本身的特點,這個不能作為一個界面視覺一致性的重點參考。這個比較好理解,比如即時通信界面,不可否論他肯定有被改變的一天,但至少在目前看來長條形的豎形界面是給用戶的第一直觀感受。至于長條形的寬度和比例,將會作為一個參考要素影響到界面視覺效果的一致性。所以當相同屬性的界面在趨于同樣外形的同時,考慮到產品特點,也需要適當的顧及互相之間的外形感受。當然還有一些細節的處理方式也會在必要的時候造成界面視覺效果的一致性,比如外形的圓角弧度、界面邊框的厚度就是必須需要注意的細節

  內形方面:內形方面除了同屬性的界面他們因為功能的近似而產生的布局結構外,他們的并列方式、分割方式應該采取相應的一致性前提,比如線條的劃分、兩種色彩的劃分、質感的結構劃分、用戶意想的劃分??


(圖二 外形和內形的在舉例界面合集中的一致性體現)

  色彩的表現:

  色彩運用產生的感覺,豐富而多彩,是影響視覺一致性比較重要的前提點。

  前提點可以分為顏色絕對的一致,如色相、純度、明度的絕對一致或差別細小。退一步有單純的色相的一致,或者明度相同,相似色組合的色彩一致。如果不同產品產品之間考慮到某種似親非親的關系,他們的顏色組合還有相似色、三色組、全色相換等組合產生的色彩感覺一致性。

  在色彩具體的單個假面表現運用上也有一些色彩的一致性前提,比如單色的漸變手法,雙色的漸變手法,雙色的運用又有相似色,互補、分裂互補等調和方式。如此細節的考慮,可以使一致性在多個方面來影響目的,通過這些被經常稱作色彩感覺的感性事物來達到視覺效果一致性的目的,而不僅僅是只認定單一顏色相同才算是一致的狹義上的一致性,否則將直接造成設計想像的單一。


(圖三 相似色組合顏色方式在舉例界面合集中的一致性體現)


(圖四 顏色明度及雙色的漸變方式在舉例界面合集中的一致性體現)


arrow
arrow
    文章標籤
    網頁設計 web design
    全站熱搜

    inspirr 發表在 痞客邦 留言(0) 人氣()