當(dāng)前位置: 首頁(yè) > 設(shè)計(jì)資訊 > 理論文摘 > 正文

泛泛而談界面視覺效果的一致性

2010-02-03 10223 0

  原來(lái)的題目設(shè)想為界面視覺效果的統(tǒng)一性,但是“統(tǒng)一”這個(gè)詞似乎有點(diǎn)敏感,怕觸動(dòng)萌點(diǎn)無(wú)數(shù),而我也無(wú)意去設(shè)定一個(gè)什么什么的統(tǒng)一性來(lái)侃侃而談,極為專業(yè)而考究,且畢竟是一篇博客文章,怕斬首細(xì)胞無(wú)數(shù),索性改為“一致”略為妥當(dāng)。泛泛而談更是期望隨意的態(tài)度,到哪算哪。有失偏頗,也在情理之中,當(dāng)情有可原。若起爭(zhēng)議,求同存異,全為拋磚引玉。

  何謂“一致”:趨向相同。亦謂沒有分歧?!兑?系辭下》:“天下同歸而殊涂,一致而百慮?!边_(dá)成一致可有不同方法,在視覺上亦可稱之為不同的表現(xiàn)和手段。當(dāng)然更為重要的是達(dá)成一致的視覺表現(xiàn)需要有一個(gè)整體的主題框架,以及在此框架下的多個(gè)前提點(diǎn)。

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

  將這些一致的前提點(diǎn)在不同情況下綜合、取舍,有助于我們?nèi)フJ(rèn)定一個(gè)相同屬性的范圍,在界面的視覺表象上我們同樣可以借助這個(gè)一致性去認(rèn)定同一范圍下的品牌效應(yīng),這個(gè)一定的范圍概念包括:同一公司下的結(jié)界面效果,同一屬性下的產(chǎn)品界面,不同版本的同一個(gè)軟件產(chǎn)品的界面⋯⋯當(dāng)然這個(gè)是引申開去的題外話。

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

  以下為自己過往設(shè)計(jì)的一些界面,按照時(shí)間順序跨度一年有余,期望從一個(gè)設(shè)計(jì)時(shí)間線上去看待不同設(shè)計(jì)作品。個(gè)人認(rèn)為, 通過界面組成元素和表現(xiàn)手段的拆分,盡管每一個(gè)設(shè)計(jì)的顏色各異,每一個(gè)設(shè)計(jì)對(duì)應(yīng)的產(chǎn)品也有自己的特色,每一個(gè)設(shè)計(jì)的結(jié)構(gòu)有所區(qū)別,但他們的視覺表現(xiàn)基本還是保持一致的。

[Page: ]


(圖一 展示界面的合集)

  每一個(gè)設(shè)計(jì)都有不同的視覺表現(xiàn),形、色、質(zhì)相輔相成。每一個(gè)界面也有不同的組成元素,文字、組件、圖標(biāo)交融交錯(cuò)。每一個(gè)組成部分都有特定條件下的前提以促成他們?cè)谝曈X表現(xiàn)上的一致性。本文的重點(diǎn)是對(duì)一致性的前提概念進(jìn)行確立的探討。而不是去梳理作為一致性前提的每一個(gè)具體實(shí)在可觸碰的點(diǎn),因?yàn)檫@是一個(gè)龐大的內(nèi)容,必須細(xì)致的區(qū)分每一個(gè)主題框架下組成部分的一致性前提點(diǎn),以及這些前提點(diǎn)在特定條件下的取舍與組合。以來(lái)對(duì)應(yīng)特定產(chǎn)品系列的一致性概念。

[Page: ]

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

 

形的表象:

  界面的形具體分為外形,內(nèi)形。外形側(cè)重界面的外在具體形狀。內(nèi)形對(duì)界面的內(nèi)容進(jìn)行并列和分割。

  外形方面:每一個(gè)產(chǎn)品的主界面外形都是來(lái)源于軟件本身的特點(diǎn),這個(gè)不能作為一個(gè)界面視覺一致性的重點(diǎn)參考。這個(gè)比較好理解,比如即時(shí)通信界面,不可否論他肯定有被改變的一天,但至少在目前看來(lái)長(zhǎng)條形的豎形界面是給用戶的第一直觀感受。至于長(zhǎng)條形的寬度和比例,將會(huì)作為一個(gè)參考要素影響到界面視覺效果的一致性。所以當(dāng)相同屬性的界面在趨于同樣外形的同時(shí),考慮到產(chǎn)品特點(diǎn),也需要適當(dāng)?shù)念櫦盎ハ嘀g的外形感受。當(dāng)然還有一些細(xì)節(jié)的處理方式也會(huì)在必要的時(shí)候造成界面視覺效果的一致性,比如外形的圓角弧度、界面邊框的厚度就是必須需要注意的細(xì)節(jié)

  內(nèi)形方面:內(nèi)形方面除了同屬性的界面他們因?yàn)楣δ艿慕贫a(chǎn)生的布局結(jié)構(gòu)外,他們的并列方式、分割方式應(yīng)該采取相應(yīng)的一致性前提,比如線條的劃分、兩種色彩的劃分、質(zhì)感的結(jié)構(gòu)劃分、用戶意想的劃分⋯⋯


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

 

[Page: ]

色彩的表現(xiàn):

  色彩運(yùn)用產(chǎn)生的感覺,豐富而多彩,是影響視覺一致性比較重要的前提點(diǎn)。

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

  在色彩具體的單個(gè)假面表現(xiàn)運(yùn)用上也有一些色彩的一致性前提,比如單色的漸變手法,雙色的漸變手法,雙色的運(yùn)用又有相似色,互補(bǔ)、分裂互補(bǔ)等調(diào)和方式。如此細(xì)節(jié)的考慮,可以使一致性在多個(gè)方面來(lái)影響目的,通過這些被經(jīng)常稱作色彩感覺的感性事物來(lái)達(dá)到視覺效果一致性的目的,而不僅僅是只認(rèn)定單一顏色相同才算是一致的狹義上的一致性,否則將直接造成設(shè)計(jì)想像的單一。


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


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

 

[Page: ]

界面的厚度和質(zhì)感的一致:

  界面的厚度是影響界面視覺效果一致性的另外一個(gè)重要前提點(diǎn)。因?yàn)樵斐山缑娴暮穸然臼且驗(yàn)橘|(zhì)感表現(xiàn)的原因造成的,所以兩者放在一起來(lái)闡述說明。

  界面的厚度是造成界面效果給用戶視覺沉重感的一個(gè)原因,當(dāng)然也能經(jīng)常聽到顏色明度的高度也能造成頁(yè)面的沉重感的觀點(diǎn)。雖然事物的明度聯(lián)系自然界的真實(shí)物體,以及人的心理感受,應(yīng)該有一定的道理,但是明度低的顏色也卻可以通過質(zhì)感的表現(xiàn)來(lái)化解沉重感。所以對(duì)應(yīng)自然界的物體,厚對(duì)比薄,界面的厚度來(lái)的影響會(huì)更加直接。所以他們是直接影響視覺效果一致性的一個(gè)前提。


(圖四 界面頭部側(cè)面弧度體現(xiàn)的界面厚度)

  而界面的厚度很多情況下是通過質(zhì)感來(lái)完成表現(xiàn)。如弧度的表現(xiàn),真實(shí)物體的模仿、光影強(qiáng)弱的再現(xiàn)等等。質(zhì)感很大成都上直接決定視覺風(fēng)格的走向,他在一致性的前提點(diǎn)里重要度極高。但同樣在包含在主體框架的指引下,比如:水晶質(zhì)感、平板質(zhì)感、木紋質(zhì)感在同一產(chǎn)品的不同版本框架下,設(shè)計(jì)延續(xù)的一致性顯然是不甚理想的。但如果這些質(zhì)感效果在同一產(chǎn)品的個(gè)性皮膚框架下,他們都可被看作是一致的。


(圖五 界面質(zhì)感相對(duì)平板的一致性體現(xiàn))

 

[Page: ]

組件細(xì)節(jié)的表現(xiàn):

  關(guān)于組件統(tǒng)一表現(xiàn)的觀點(diǎn),很多人已經(jīng)非常認(rèn)同了,事實(shí)上大家也是這樣在做的,比如QQ2009后制定的視覺規(guī)范,已經(jīng)直接影響了一些產(chǎn)品的組件設(shè)計(jì)。對(duì)各個(gè)組件在視覺上的表現(xiàn)做了必要規(guī)范。但是在組件以外,或者其他視覺元素的細(xì)節(jié)表現(xiàn)上可以套用同樣的設(shè)計(jì)手段,在相同屬性的界面下選用同一種方式去表現(xiàn),從而達(dá)到影響整體的界面視覺效果的一致性。這一類的表現(xiàn)有很多,隨意從展示界面的可視部分舉幾個(gè)例子:


(圖六 進(jìn)度條的幾種表現(xiàn)方式:?jiǎn)紊?,雙色,多彩等等)


(圖七 列表的幾種表現(xiàn)方式:整體單色,雙色間隔,單色間隔)


(圖八 Tab的表現(xiàn))

  在界面表現(xiàn)中,如此到達(dá)界面效果一致性的前提點(diǎn)還有很多,這里的舉例只是開一個(gè)頭表達(dá)觀點(diǎn),舉例的效果也僅僅是從自身的界面中提取出來(lái)的其中一種特定表現(xiàn)。一致性的視覺表現(xiàn)也并不是將我們最終所能獲取到位的前提點(diǎn)全部滿足,而是根據(jù)界面系列的不同屬性,對(duì)所有一致性的前提點(diǎn)根據(jù)屬性來(lái)抽取組合,達(dá)成主題下的界面視覺效果一致性,這才是重點(diǎn)。

  在很多人看來(lái),設(shè)計(jì)是感性的,但是設(shè)計(jì)更多的存在于理性之中。諸如此文的一致性概念,偏重的是將界面視覺元素的分析和歸納,以及轉(zhuǎn)變看待界面視覺一致性的觀念和態(tài)度。不斷嘗試和總結(jié)歷程的變化,轉(zhuǎn)變?yōu)槊鎸?duì)設(shè)計(jì)的潛意識(shí),不論我們?cè)趨⒖?、設(shè)計(jì)、評(píng)審,都采用近似的標(biāo)準(zhǔn)。而不是每個(gè)人自我意識(shí)的評(píng)價(jià),設(shè)計(jì)會(huì)變得思路順暢和立意鮮明。


115
評(píng)論區(qū)(0)
正在加載評(píng)論...