用戶體驗(yàn)的要素:表現(xiàn)層

七、表現(xiàn)層:感知設(shè)計(jì)

在表現(xiàn)層怔锌,內(nèi)容寥粹、功能和美學(xué)匯集到一起來(lái)產(chǎn)生一個(gè)最終設(shè)計(jì),完成其他四個(gè)層面的所有目標(biāo)埃元,并同時(shí)滿足用戶的感官感受涝涤。

1.表現(xiàn)層定義

在框架層,我們主要解決放置的事情岛杀。表現(xiàn)層則要解決并彌補(bǔ)“產(chǎn)品框架層的邏輯排布”的感知呈現(xiàn)問(wèn)題阔拳。通過(guò)關(guān)注視覺(jué)設(shè)計(jì),我們決定信息設(shè)計(jì)的安排在視覺(jué)上應(yīng)該如何呈現(xiàn)类嗤。

2.合理設(shè)計(jì)感知

我們的每一次經(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á)品牌形象斯撮。

3.忠于眼睛

評(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)的信息或功能”的注意力漓藕。

4.對(duì)比和一致性

對(duì)比(contrast)是用于吸引用戶注意的一個(gè)主要工具,把用戶的注意力吸引到界面中的關(guān)鍵部分挟裂,幫助用戶理解頁(yè)面導(dǎo)航元素之間的關(guān)系享钞,傳達(dá)信息設(shè)計(jì)中的概念群組。如下圖诀蓉,左上毫無(wú)重點(diǎn)栗竖,右上引導(dǎo)用戶視線方向,左下突出幾個(gè)重點(diǎn)交排,右下過(guò)度對(duì)比顯得雜亂划滋。

對(duì)比

在設(shè)計(jì)中保持一致性(uniformity)是另一個(gè)重要的組成部分。例如將視覺(jué)元素的大小保持一致的尺寸埃篓;基于柵格線(grid-based layout)的布局处坪,基于柵格線的方法是通過(guò)使用母版來(lái)確保設(shè)計(jì)的一致性,各種布局都是按照這個(gè)模板來(lái)創(chuàng)建的架专。

一致性

5.內(nèi)部和外部的一致性

內(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)品的一致性。

6.配色方案和排版

核心的品牌色彩通常是一個(gè)配色方案(color palette)锡移,可以有效地向外界傳遞品牌識(shí)別呕童。通常,更亮或更醒目的顏色可以用于前景色淆珊,更暗淡的色彩用于那些不需要跳出頁(yè)面的背景元素中夺饲。

排版(typography)(包括字體等)對(duì)品牌識(shí)別也很重要。注意不要使用非常相似又不完全一樣的風(fēng)格,只有在你需要傳達(dá)不同的信息時(shí)才使用不同的風(fēng)格往声。風(fēng)格之間要有足夠的對(duì)比才能在你需要的時(shí)候吸引到用戶的注意擂找,但不要使用過(guò)于廣泛和多樣的風(fēng)格。

7.設(shè)計(jì)合成品和風(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)歸原作者所有——

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末寞埠,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子焊夸,更是在濱河造成了極大的恐慌仁连,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,123評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件阱穗,死亡現(xiàn)場(chǎng)離奇詭異饭冬,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)揪阶,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評(píng)論 2 384
  • 文/潘曉璐 我一進(jìn)店門(mén)昌抠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人遣钳,你說(shuō)我怎么就攤上這事。” “怎么了蕴茴?”我有些...
    開(kāi)封第一講書(shū)人閱讀 156,723評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵劝评,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我倦淀,道長(zhǎng)蒋畜,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,357評(píng)論 1 283
  • 正文 為了忘掉前任撞叽,我火速辦了婚禮姻成,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘愿棋。我一直安慰自己科展,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,412評(píng)論 5 384
  • 文/花漫 我一把揭開(kāi)白布糠雨。 她就那樣靜靜地躺著才睹,像睡著了一般。 火紅的嫁衣襯著肌膚如雪甘邀。 梳的紋絲不亂的頭發(fā)上琅攘,一...
    開(kāi)封第一講書(shū)人閱讀 49,760評(píng)論 1 289
  • 那天,我揣著相機(jī)與錄音松邪,去河邊找鬼坞琴。 笑死,一個(gè)胖子當(dāng)著我的面吹牛逗抑,可吹牛的內(nèi)容都是我干的剧辐。 我是一名探鬼主播,決...
    沈念sama閱讀 38,904評(píng)論 3 405
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼锋八,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼浙于!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起挟纱,我...
    開(kāi)封第一講書(shū)人閱讀 37,672評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤羞酗,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后紊服,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體檀轨,經(jīng)...
    沈念sama閱讀 44,118評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,456評(píng)論 2 325
  • 正文 我和宋清朗相戀三年欺嗤,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了参萄。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,599評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡煎饼,死狀恐怖讹挎,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤筒溃,帶...
    沈念sama閱讀 34,264評(píng)論 4 328
  • 正文 年R本政府宣布马篮,位于F島的核電站,受9級(jí)特大地震影響怜奖,放射性物質(zhì)發(fā)生泄漏浑测。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,857評(píng)論 3 312
  • 文/蒙蒙 一歪玲、第九天 我趴在偏房一處隱蔽的房頂上張望迁央。 院中可真熱鬧,春花似錦滥崩、人聲如沸岖圈。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,731評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)幅狮。三九已至,卻和暖如春株灸,著一層夾襖步出監(jiān)牢的瞬間崇摄,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,956評(píng)論 1 264
  • 我被黑心中介騙來(lái)泰國(guó)打工慌烧, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留逐抑,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,286評(píng)論 2 360
  • 正文 我出身青樓屹蚊,卻偏偏與公主長(zhǎng)得像厕氨,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子汹粤,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,465評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容