在表現(xiàn)層，內(nèi)容、功能和美學(xué)匯集到一起來產(chǎn)生一個(gè)最終設(shè)計(jì)，完成其他四個(gè)層面的所有目標(biāo)，并同時(shí)滿足用戶的感官感受。
在框架層，我們主要解決放置的事情。表現(xiàn)層則要解決并彌補(bǔ)“產(chǎn)品框架層的邏輯排布”的感知呈現(xiàn)問題。通過關(guān)注視覺設(shè)計(jì)，我們決定信息設(shè)計(jì)的安排在視覺上應(yīng)該如何呈現(xiàn)。
我們的每一次經(jīng)歷最終是通過我們的感官器官來進(jìn)行的：
嗅覺和味覺：用戶體驗(yàn)設(shè)計(jì)師較少考慮的范疇。比較相關(guān)的例子：新車的氣味。
觸覺：通過振動(dòng)與用戶互動(dòng)。如果是實(shí)物，會(huì)包括外形、材質(zhì)、原料等。
聽覺：用來通知用戶，也可以讓產(chǎn)品更具個(gè)性。
視覺：把注意力集中在“運(yùn)作是否良好”，而不是“什么具有美感（受個(gè)人品味影響大）”上，即視覺設(shè)計(jì)對(duì)之前層面確定的目標(biāo)的支持效果如何，例如視覺設(shè)計(jì)可以傳達(dá)品牌形象。
評(píng)估一個(gè)產(chǎn)品視覺設(shè)計(jì)的簡(jiǎn)單方法之一，是提出這樣的問題：視線首先落在什么地方？哪個(gè)設(shè)計(jì)要素在第一時(shí)間吸引了用戶的注意力？它們是對(duì)于戰(zhàn)略目標(biāo)來講是很重要的東西嗎？用戶第一時(shí)間注意到的東西與他（或你）的目標(biāo)背道而馳嗎？
一般來說，人們視線的移動(dòng)方式遵循著相當(dāng)一致的模式。如果你的設(shè)計(jì)是成功的，用戶眼球的移動(dòng)軌跡的模式應(yīng)該有以下兩個(gè)重要的特點(diǎn)。
首先，它們遵循的是一條流暢的路徑。如果人們?cè)u(píng)論一個(gè)設(shè)計(jì)是忙碌或擁擠時(shí)，這表示這個(gè)設(shè)計(jì)沒能順利地引導(dǎo)他們?cè)陧撁嫔弦苿?dòng)。他們的眼睛在各種各樣的元素之間跳來跳去，所有元素都在試圖引起他們的注意。
其次，在不需要太多細(xì)節(jié)來嚇到用戶的前提下，它為用戶提供有效選擇的、某種可能的“引導(dǎo)”。這些引導(dǎo)應(yīng)該支持用戶試圖在此刻通過與產(chǎn)品交互去完成的某個(gè)目標(biāo)或任務(wù)，且不應(yīng)該分散用戶對(duì)那些“能完成目標(biāo)的信息或功能”的注意力。
對(duì)比（contrast）是用于吸引用戶注意的一個(gè)主要工具，把用戶的注意力吸引到界面中的關(guān)鍵部分，幫助用戶理解頁面導(dǎo)航元素之間的關(guān)系，傳達(dá)信息設(shè)計(jì)中的概念群組。如下圖，左上毫無重點(diǎn)，右上引導(dǎo)用戶視線方向，左下突出幾個(gè)重點(diǎn)，右下過度對(duì)比顯得雜亂。
在設(shè)計(jì)中保持一致性（uniformity）是另一個(gè)重要的組成部分。例如將視覺元素的大小保持一致的尺寸；基于柵格線（grid-based layout）的布局，基于柵格線的方法是通過使用母版來確保設(shè)計(jì)的一致性，各種布局都是按照這個(gè)模板來創(chuàng)建的。
內(nèi)部一致性的問題：在產(chǎn)品的不同地方反映了不同的設(shè)計(jì)方法
外部一致性的問題：這個(gè)產(chǎn)品沒有在同一個(gè)企業(yè)的其他產(chǎn)品中，反映出被使用的、相同的設(shè)計(jì)方法。
確定有可能在產(chǎn)品各種各樣的導(dǎo)航、界面和信息設(shè)計(jì)等不同環(huán)境中反復(fù)出現(xiàn)的設(shè)計(jì)元素，把它們獨(dú)立出來統(tǒng)一設(shè)計(jì)。不過在使用時(shí)也需要適應(yīng)環(huán)境而調(diào)整。
用一個(gè)統(tǒng)一的品牌識(shí)別形象強(qiáng)化呈現(xiàn)出來的產(chǎn)品的一致性。
核心的品牌色彩通常是一個(gè)配色方案（color palette），可以有效地向外界傳遞品牌識(shí)別。通常，更亮或更醒目的顏色可以用于前景色，更暗淡的色彩用于那些不需要跳出頁面的背景元素中。
排版（typography）（包括字體等）對(duì)品牌識(shí)別也很重要。注意不要使用非常相似又不完全一樣的風(fēng)格，只有在你需要傳達(dá)不同的信息時(shí)才使用不同的風(fēng)格。風(fēng)格之間要有足夠的對(duì)比才能在你需要的時(shí)候吸引到用戶的注意，但不要使用過于廣泛和多樣的風(fēng)格。
在視覺設(shè)計(jì)領(lǐng)域中對(duì)線框圖最直接的模擬是視覺模型（visual mock-up）或設(shè)計(jì)合成品（design comp）。合成的意思是綜合的。設(shè)計(jì)合成品就是從已定的組件中建立起來的、一個(gè)最終的可視化產(chǎn)品。這種合成物顯示了各個(gè)獨(dú)立的組件是如何結(jié)合到一起形成一個(gè)有機(jī)的整體的；或者，如果它們沒有組成一個(gè)整體，就說明某個(gè)地方破壞了它，同時(shí)表明這是一個(gè)任何解決辦法都必須要考慮到的約束條件。
線框圖的組件與設(shè)計(jì)合成品的組件之間一般是簡(jiǎn)單的一對(duì)一的相互關(guān)系。不過視覺設(shè)計(jì)也不一定要精確地按照線框圖來做，只要它考慮了相關(guān)的重要級(jí)別以及線框圖中各元素的組合關(guān)系。
相關(guān)工作都需要以文檔形式記錄下來，承載這些設(shè)計(jì)決策的權(quán)威性文檔是風(fēng)格指南（style guide）。這個(gè)匯總文檔確定了視覺設(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é)來幫助人們將來做出明智的決策。
——著作權(quán)歸原作者所有——
