在表現(xiàn)層怔锌,內(nèi)容寥粹、功能和美學(xué)匯集到一起來(lái)產(chǎn)生一個(gè)最終設(shè)計(jì),完成其他四個(gè)層面的所有目標(biāo)埃元,并同時(shí)滿足用戶的感官感受涝涤。
在框架層,我們主要解決放置的事情岛杀。表現(xiàn)層則要解決并彌補(bǔ)“產(chǎn)品框架層的邏輯排布”的感知呈現(xiàn)問(wèn)題阔拳。通過(guò)關(guān)注視覺(jué)設(shè)計(jì),我們決定信息設(shè)計(jì)的安排在視覺(jué)上應(yīng)該如何呈現(xiàn)类嗤。
我們的每一次經(jīng)歷最終是通過(guò)我們的感官器官來(lái)進(jìn)行的:
嗅覺(jué)和味覺(jué):用戶體驗(yàn)設(shè)計(jì)師較少考慮的范疇糊肠。比較相關(guān)的例子:新車(chē)的氣味。
觸覺(jué):通過(guò)振動(dòng)與用戶互動(dòng)遗锣。如果是實(shí)物货裹,會(huì)包括外形、材質(zhì)精偿、原料等弧圆。
聽(tīng)覺(jué):用來(lái)通知用戶,也可以讓產(chǎn)品更具個(gè)性笔咽。
視覺(jué):把注意力集中在“運(yùn)作是否良好”搔预,而不是“什么具有美感(受個(gè)人品味影響大)”上,即視覺(jué)設(shè)計(jì)對(duì)之前層面確定的目標(biāo)的支持效果如何叶组,例如視覺(jué)設(shè)計(jì)可以傳達(dá)品牌形象斯撮。
評(píng)估一個(gè)產(chǎn)品視覺(jué)設(shè)計(jì)的簡(jiǎn)單方法之一,是提出這樣的問(wèn)題:視線首先落在什么地方扶叉?哪個(gè)設(shè)計(jì)要素在第一時(shí)間吸引了用戶的注意力?它們是對(duì)于戰(zhàn)略目標(biāo)來(lái)講是很重要的東西嗎帕膜?用戶第一時(shí)間注意到的東西與他(或你)的目標(biāo)背道而馳嗎枣氧?
一般來(lái)說(shuō),人們視線的移動(dòng)方式遵循著相當(dāng)一致的模式垮刹。如果你的設(shè)計(jì)是成功的达吞,用戶眼球的移動(dòng)軌跡的模式應(yīng)該有以下兩個(gè)重要的特點(diǎn)。
首先荒典,它們遵循的是一條流暢的路徑酪劫。如果人們?cè)u(píng)論一個(gè)設(shè)計(jì)是忙碌或擁擠時(shí)吞鸭,這表示這個(gè)設(shè)計(jì)沒(méi)能順利地引導(dǎo)他們?cè)陧?yè)面上移動(dòng)。他們的眼睛在各種各樣的元素之間跳來(lái)跳去覆糟,所有元素都在試圖引起他們的注意刻剥。
其次,在不需要太多細(xì)節(jié)來(lái)嚇到用戶的前提下滩字,它為用戶提供有效選擇的造虏、某種可能的“引導(dǎo)”。這些引導(dǎo)應(yīng)該支持用戶試圖在此刻通過(guò)與產(chǎn)品交互去完成的某個(gè)目標(biāo)或任務(wù)麦箍,且不應(yīng)該分散用戶對(duì)那些“能完成目標(biāo)的信息或功能”的注意力漓藕。
對(duì)比(contrast)是用于吸引用戶注意的一個(gè)主要工具,把用戶的注意力吸引到界面中的關(guān)鍵部分挟裂,幫助用戶理解頁(yè)面導(dǎo)航元素之間的關(guān)系享钞,傳達(dá)信息設(shè)計(jì)中的概念群組。如下圖诀蓉,左上毫無(wú)重點(diǎn)栗竖,右上引導(dǎo)用戶視線方向,左下突出幾個(gè)重點(diǎn)交排,右下過(guò)度對(duì)比顯得雜亂划滋。
在設(shè)計(jì)中保持一致性(uniformity)是另一個(gè)重要的組成部分。例如將視覺(jué)元素的大小保持一致的尺寸埃篓;基于柵格線(grid-based layout)的布局处坪,基于柵格線的方法是通過(guò)使用母版來(lái)確保設(shè)計(jì)的一致性,各種布局都是按照這個(gè)模板來(lái)創(chuàng)建的架专。
內(nèi)部一致性的問(wèn)題:在產(chǎn)品的不同地方反映了不同的設(shè)計(jì)方法
外部一致性的問(wèn)題:這個(gè)產(chǎn)品沒(méi)有在同一個(gè)企業(yè)的其他產(chǎn)品中同窘,反映出被使用的、相同的設(shè)計(jì)方法部脚。
確定有可能在產(chǎn)品各種各樣的導(dǎo)航想邦、界面和信息設(shè)計(jì)等不同環(huán)境中反復(fù)出現(xiàn)的設(shè)計(jì)元素,把它們獨(dú)立出來(lái)統(tǒng)一設(shè)計(jì)委刘。不過(guò)在使用時(shí)也需要適應(yīng)環(huán)境而調(diào)整丧没。
用一個(gè)統(tǒng)一的品牌識(shí)別形象強(qiáng)化呈現(xiàn)出來(lái)的產(chǎn)品的一致性。
核心的品牌色彩通常是一個(gè)配色方案(color palette)锡移,可以有效地向外界傳遞品牌識(shí)別呕童。通常,更亮或更醒目的顏色可以用于前景色淆珊,更暗淡的色彩用于那些不需要跳出頁(yè)面的背景元素中夺饲。
排版(typography)(包括字體等)對(duì)品牌識(shí)別也很重要。注意不要使用非常相似又不完全一樣的風(fēng)格,只有在你需要傳達(dá)不同的信息時(shí)才使用不同的風(fēng)格往声。風(fēng)格之間要有足夠的對(duì)比才能在你需要的時(shí)候吸引到用戶的注意擂找,但不要使用過(guò)于廣泛和多樣的風(fēng)格。
在視覺(jué)設(shè)計(jì)領(lǐng)域中對(duì)線框圖最直接的模擬是視覺(jué)模型(visual mock-up)或設(shè)計(jì)合成品(design comp)浩销。合成的意思是綜合的贯涎。設(shè)計(jì)合成品就是從已定的組件中建立起來(lái)的、一個(gè)最終的可視化產(chǎn)品撼嗓。這種合成物顯示了各個(gè)獨(dú)立的組件是如何結(jié)合到一起形成一個(gè)有機(jī)的整體的柬采;或者,如果它們沒(méi)有組成一個(gè)整體且警,就說(shuō)明某個(gè)地方破壞了它粉捻,同時(shí)表明這是一個(gè)任何解決辦法都必須要考慮到的約束條件。
線框圖的組件與設(shè)計(jì)合成品的組件之間一般是簡(jiǎn)單的一對(duì)一的相互關(guān)系斑芜。不過(guò)視覺(jué)設(shè)計(jì)也不一定要精確地按照線框圖來(lái)做肩刃,只要它考慮了相關(guān)的重要級(jí)別以及線框圖中各元素的組合關(guān)系。
相關(guān)工作都需要以文檔形式記錄下來(lái)杏头,承載這些設(shè)計(jì)決策的權(quán)威性文檔是風(fēng)格指南(style guide)盈包。這個(gè)匯總文檔確定了視覺(jué)設(shè)計(jì)的每個(gè)方面,從最大到最小的范圍內(nèi)的所有元素醇王。影響到產(chǎn)品的每一個(gè)局部的全局標(biāo)準(zhǔn)(比如設(shè)計(jì)柵格呢燥、配色方案、字體標(biāo)準(zhǔn)寓娩、標(biāo)志應(yīng)用指南等)通常是風(fēng)格指南中的第一部分叛氨。風(fēng)格指南還要包括某一個(gè)模塊或網(wǎng)站功能的具體標(biāo)準(zhǔn)。風(fēng)格指南的總體目標(biāo)是提供足夠的細(xì)節(jié)來(lái)幫助人們將來(lái)做出明智的決策棘伴。
——著作權(quán)歸原作者所有——