設(shè)計(jì)不能為產(chǎn)品帶來(lái)良好體驗(yàn)?可能是你不懂心理學(xué)

編輯導(dǎo)語(yǔ)：想要做好UI設(shè)計(jì)，或許你需要掌握一些心理學(xué)知識(shí)。在這篇文章中，作者分享了五個(gè)心理學(xué)知識(shí)，并從背景定義、重點(diǎn)解析、設(shè)計(jì)運(yùn)用、詳細(xì)案例4個(gè)維度進(jìn)行了深度的解析，一起看看吧。

一、前言

本次內(nèi)容以表現(xiàn)層為主，我還是那句話，無(wú)論是定律還是原則最終都是為設(shè)計(jì)賦能，一是能夠?yàn)楫a(chǎn)品帶來(lái)良好的體驗(yàn)性，二是能夠體現(xiàn)設(shè)計(jì)師的價(jià)值，不同的定律原則所運(yùn)用的場(chǎng)景不同，它們之間也會(huì)穿插或者并列存在，文章內(nèi)的案例也是心理學(xué)中的一部分，應(yīng)用場(chǎng)景不止于此，希望大家能夠通過(guò)我的案例解析學(xué)習(xí)到這些原則定律的基本邏輯。

本次繼續(xù)分享5個(gè)心理學(xué)的知識(shí)，同樣從背景定義、重點(diǎn)解析、設(shè)計(jì)運(yùn)用、詳細(xì)案例4個(gè)維度進(jìn)行深度解析。

二、圖優(yōu)效應(yīng)

1. 什么是圖優(yōu)效應(yīng)

指圖片對(duì)用戶的記憶大于文字，用圖片代替語(yǔ)言，心理學(xué)上把這種現(xiàn)象稱為《圖優(yōu)效應(yīng)》，在記憶時(shí)，圖片的優(yōu)勢(shì)較大，心理學(xué)家通過(guò)分析得知因?yàn)橛洃浀暮脡娜�決于可提供大腦記憶選擇的數(shù)目，圖片和形象又能在人們觀看時(shí)被命名，也就是說(shuō)圖片是可以代替語(yǔ)言去幫助我們記憶。

舉個(gè)例子，在工作中我們與同事聊天是不是都會(huì)遇到聊了半天，發(fā)現(xiàn)兩個(gè)人聊的不是同一個(gè)事情，或者兩個(gè)人不在一個(gè)緯度上，特別是做設(shè)計(jì)的我們來(lái)說(shuō)經(jīng)常會(huì)遇到這種事情，這時(shí)候往往發(fā)一張圖片對(duì)方馬上就能get到這個(gè)事情的點(diǎn)，兩人也能站在同一個(gè)緯度上溝通。

設(shè)計(jì)師們肯定遇到過(guò)這樣的場(chǎng)景，在溝通一個(gè)需求的時(shí)候，業(yè)務(wù)方經(jīng)常會(huì)說(shuō)要一個(gè)什么樣什么樣的風(fēng)格，然而是雙方聊了半天發(fā)現(xiàn)都沒(méi)有結(jié)果，這時(shí)候給業(yè)務(wù)方發(fā)幾個(gè)案例讓他們選擇，把抽象的事情具象化很快就可以確定目標(biāo)，圖優(yōu)效應(yīng)不僅是能夠增加用戶記憶，很多時(shí)候同樣能夠代替語(yǔ)言來(lái)傳達(dá)信息。

2. 圖片記憶優(yōu)點(diǎn)

人的記憶分為圖像記憶、文字記憶、聲音記憶，而圖像記憶是最符合人的大腦運(yùn)作模式的記憶法，然后通過(guò)結(jié)合文字能夠很輕松的記憶某個(gè)事情或者某個(gè)畫(huà)面。

為什么說(shuō)符合人的大腦運(yùn)作方式，因?yàn)閳D像識(shí)別能力是與生俱來(lái)的，人類(lèi)在文字誕生之前的幾百上千萬(wàn)年里，一直通過(guò)圖像辨別事物，而文字的傳承只有幾千年跟人類(lèi)歷史比起來(lái)只是其中的一小段，而圖像結(jié)合文字能夠使記憶更輕松。

3. 他是怎么來(lái)的

1973年美國(guó)認(rèn)知心理學(xué)家斯坦丁做了一個(gè)關(guān)于記憶的實(shí)驗(yàn)，斯坦丁找了5名大學(xué)生，他們的智力水平大致相同。另外他還制作了10000張圖片，其中一半圖片為普通圖片，上面畫(huà)著一些事物的基本特征，就好像我們板著面孔照出來(lái)的一寸照片一樣;另外一半圖片是一些帶有生動(dòng)情節(jié)的圖片，就好比是我們的生活照。

斯坦丁要求他們每個(gè)人都同時(shí)記憶1000個(gè)單詞、1000張普通圖片和1000張有生動(dòng)情節(jié)的圖片。如單詞為"狗"，普通圖片為"一條狗"，有生動(dòng)情節(jié)的圖片為"一條嘴里含著煙斗的狗"。大學(xué)生們顯然對(duì)那些有生動(dòng)情節(jié)的圖片更感興趣。

兩天以后斯坦丁又找來(lái)了這5名大學(xué)生，讓他們觀看印有單詞的圖片、普通圖片和有生動(dòng)情節(jié)的圖片，共計(jì)5000張，其中包括兩天前他們看過(guò)的那3000張。這次的任務(wù)是要求他們指出哪些圖片是曾經(jīng)看過(guò)的。結(jié)果發(fā)現(xiàn)他們平均記住的生動(dòng)圖片為880張，普通圖片為770張，單詞為615個(gè)。

這說(shuō)明圖片比起單詞來(lái)容易記，而情節(jié)生動(dòng)的圖片就更容易記憶，心理學(xué)上把這種現(xiàn)象稱做"圖優(yōu)效應(yīng)"，即在記憶時(shí)，圖片的優(yōu)勢(shì)更大。

4. 網(wǎng)頁(yè)中的應(yīng)用

在網(wǎng)頁(yè)設(shè)計(jì)中最主要的組成就是圖片和文字，在不同的產(chǎn)品中根據(jù)頁(yè)面的承載信息進(jìn)行圖文搭配信息效率傳達(dá)更加有效，在復(fù)雜的網(wǎng)頁(yè)中，用戶如果單通過(guò)文字找到一個(gè)目標(biāo)信息效率上會(huì)大大降低，但是在進(jìn)行圖文后展示不同的功能信息對(duì)于用戶來(lái)講能夠大大的提升效率，對(duì)于老用戶而言能夠通過(guò)大面積的圖片快速定位到目標(biāo)信息。

下面示例中的"騰訊云"和"京東云"官網(wǎng)中，以圖片為設(shè)計(jì)主體強(qiáng)調(diào)入口，在圖片中添加文案，使用圖文組合的方式提升用戶的篩選效應(yīng)，如果只是在諾大的網(wǎng)頁(yè)中放一些圖標(biāo)跟文字，用戶尋找起來(lái)時(shí)間非常漫長(zhǎng)，他們就利用了《圖優(yōu)效應(yīng)》的優(yōu)點(diǎn)，提升用戶使用效率。

圖優(yōu)效應(yīng)利用最多的應(yīng)該是國(guó)內(nèi)電商平臺(tái)，對(duì)用戶傳達(dá)信息主要是依賴商品圖片，當(dāng)用戶使用時(shí)往往會(huì)被一些好看的商品主圖所吸引，從而點(diǎn)擊進(jìn)行查看，試想一下如果打開(kāi)一個(gè)電商網(wǎng)站里面密密麻麻的全是文字，那么我們還有興趣去查看商品詳情嗎。

5. 移動(dòng)端中的應(yīng)用

由于屏幕尺寸的原因，移動(dòng)端展示空間較小，圖片使用頻率沒(méi)有網(wǎng)頁(yè)那么多，但是在移動(dòng)端更多的是以圖標(biāo)、插圖等方式來(lái)作為增加信息記憶點(diǎn)的手段。

一般在移動(dòng)端中能夠使用大面積圖片的產(chǎn)品除了上面講的電商產(chǎn)品，還有一些社交形式的產(chǎn)品如小紅書(shū)、快手等是以圖片為核心吸引用戶消費(fèi)的。

例如下面的"豐巢"存放快遞的場(chǎng)景，因?yàn)榭爝f柜會(huì)有很多尺寸，我們?cè)诰�上下單時(shí)往往是對(duì)柜子大小沒(méi)有概念，而豐巢這個(gè)頁(yè)面就非常好的利用插圖把大中小的柜子樣式在線上具像化，用戶進(jìn)到頁(yè)面后能夠有很直觀的認(rèn)知，在下面"社區(qū)產(chǎn)品"的首頁(yè)中也是利用明確的插圖來(lái)告知用戶功能的作用，用戶只需要看到圖片后就能夠理解，圖優(yōu)效應(yīng)雖然說(shuō)記憶效應(yīng)，但是在實(shí)際的產(chǎn)品設(shè)計(jì)中我們?cè)O(shè)計(jì)師可以靈活運(yùn)用，它不僅能夠強(qiáng)化記憶，同時(shí)也能夠提升用戶的篩選效率。

通過(guò)把信息具像化，以插圖的方式表達(dá)，對(duì)于新老用戶都能夠形成認(rèn)知習(xí)慣，不需要閱讀文字就能夠快速定位信息。

6. 需要避免的問(wèn)題

有正向就有反向，雖然在網(wǎng)頁(yè)和移動(dòng)端設(shè)計(jì)中圖片的優(yōu)勢(shì)很大，但是也有弊端，如果在設(shè)計(jì)時(shí)處理不好就會(huì)造成反面影響。

圖文和文字要具有聯(lián)動(dòng)性，如果圖片與文字內(nèi)容呼應(yīng)不上，便會(huì)造成用戶的猜疑之心，圖片是引導(dǎo)用戶進(jìn)行觀看信息的開(kāi)始，文字是解釋這個(gè)模塊的作用，因此在設(shè)計(jì)中要避免這個(gè)問(wèn)題。

例如下圖這種，這些配圖雖然跟文案有點(diǎn)關(guān)系，但是不夠直觀，單通過(guò)圖片無(wú)法聯(lián)想到該模塊的內(nèi)容想要表達(dá)什么，需要仔細(xì)閱讀文字才能夠理解，第三張頁(yè)面中的配圖也是不足以表達(dá)信息的，該內(nèi)容想要表達(dá)談?wù)撐鞣焦?jié)日，但是配圖是一個(gè)插圖人物在看書(shū)，看到圖片的時(shí)候無(wú)法聯(lián)想到西方節(jié)日。

圖片的清晰度在圖優(yōu)效應(yīng)中影響也是比較嚴(yán)重的，圖片目的是傳遞信息如果圖片都無(wú)法看清楚，那就會(huì)影響用戶信任，就以電商平臺(tái)為例子，商品圖片覺(jué)得商品的細(xì)節(jié)，如果不清晰就影響產(chǎn)品的真實(shí)性，特別是在網(wǎng)頁(yè)這種高分辨的顯示中，很大程度會(huì)影響傳遞效果。

圖片與色彩或者整個(gè)頁(yè)面的風(fēng)格關(guān)系緊密，如果圖片與文字使用疊加方式就要注意識(shí)別性，一旦發(fā)生重疊效果，那么圖片文字都會(huì)無(wú)法識(shí)別，如果是純色的背景圖就需要考慮是否與整個(gè)頁(yè)面的風(fēng)格保持一致，否則用戶在使用時(shí)就會(huì)跳脫產(chǎn)品。

7. 總結(jié)

圖優(yōu)效應(yīng)雖然說(shuō)記憶效應(yīng)，但是在實(shí)際的產(chǎn)品設(shè)計(jì)中我們?cè)O(shè)計(jì)師可以靈活運(yùn)用，它不僅能夠強(qiáng)化記憶同時(shí)也能夠提升用戶的篩選效率和信息識(shí)別度，因此在進(jìn)行設(shè)計(jì)頁(yè)面時(shí)不僅要考慮它的優(yōu)點(diǎn)，也要避免它的缺點(diǎn)。

三、形式服從功能

1. 什么是形式服從功能

《形式服從功能》是一種根據(jù)用戶認(rèn)知而衍生的設(shè)計(jì)法則，一種是美感描述，把沒(méi)有感情的功能具象化，傳遞給用戶，另一種是美感規(guī)范，美感是基于功能而存在的，只有把功能表達(dá)清楚其次才能考慮美感。

2. 他是怎么來(lái)的

形式服從功能從石器時(shí)代就存在，當(dāng)?shù)谝话咽�斧的出現(xiàn)它的目的就是為了劈砍東西，為了能夠更好的使用，從而延伸出各式各樣的斧頭，目的都是為了能夠更好的利用。

真正普及是19世紀(jì)后期的工業(yè)時(shí)代，在這個(gè)階段設(shè)計(jì)上很大一種程度就是為了功能去考慮，它的核心是以功能實(shí)用為主，而不是傳統(tǒng)的以好看來(lái)確定物品的形式，真正提出這個(gè)概念的是在1896年第一批設(shè)計(jì)"摩天大樓"的建筑師之一的路易斯·沙利文，他在文章《從藝術(shù)角度考慮的高層辦公樓》中寫(xiě)道：

"無(wú)論是飛翔的鷹，還是開(kāi)放的蘋(píng)果花、勞苦的馱馬、快樂(lè)的天鵝、枝椏的橡樹(shù)、底部蜿蜒的溪流、飄動(dòng)的云朵，在所有奔騰的太陽(yáng)上，形成永遠(yuǎn)遵循功能，這就是規(guī)律。功能不變，形式不變……它是所有有機(jī)物和無(wú)機(jī)物，所有物質(zhì)和形而上學(xué)，所有人類(lèi)和所有超人，所有頭部和心臟的真實(shí)表現(xiàn)的普遍規(guī)律，靈魂，生命在其表達(dá)中是可識(shí)別的，形式永遠(yuǎn)遵循功能。 這是法律。"

什么功能，就比如椅子，它的作用是讓人做在上面，如果形式追隨功能而不是服從功能，那么椅子可能就會(huì)失去它原本的作用，看下圖中雖然椅子很美觀，但是卻失去了原本的作用，鋒利的棱角無(wú)法讓我們坐在上面。

3. 設(shè)計(jì)中的應(yīng)用

網(wǎng)易音樂(lè)大家都用過(guò)，它的核心功能是播放音樂(lè)，也是頻率最高的一個(gè)頁(yè)面，在這個(gè)頁(yè)面中網(wǎng)易云音樂(lè)使用了一張旋轉(zhuǎn)的唱片和留聲機(jī)唱針，并且會(huì)隨著播放暫停調(diào)整唱針位置，這一設(shè)計(jì)完全遵循了形式服從功能的原則，把舊時(shí)代的唱片通過(guò)設(shè)計(jì)運(yùn)用到互聯(lián)網(wǎng)產(chǎn)品中，也象征著對(duì)音樂(lè)的極致主球，用戶通過(guò)頁(yè)面就能夠看到唱片，無(wú)論時(shí)場(chǎng)景化設(shè)計(jì)還是用戶的沉浸式體驗(yàn)都做到了極致。

當(dāng)然形式服從功能有很多場(chǎng)景可以遇到，在ui設(shè)計(jì)中最常見(jiàn)的就是金剛區(qū)等重要入口的圖標(biāo)設(shè)計(jì)，在互聯(lián)網(wǎng)產(chǎn)品中最典型的就是大眾點(diǎn)評(píng)和自如租房，面對(duì)眾多功能入口通過(guò)具象化的圖標(biāo)進(jìn)行表示，特別是自如app對(duì)于很多初入職場(chǎng)的年輕人分不清各種房型、公寓、驛站等概念，而自如就在每個(gè)功能入口處通過(guò)小插圖的方式進(jìn)行表達(dá)，在具有美感的同時(shí)，很大程度降低了用戶理解成本。

還有一種工具形的產(chǎn)品場(chǎng)景，在我們點(diǎn)外賣(mài)過(guò)程中會(huì)在配送畫(huà)面看到具象化的騎手，這種情感化的表達(dá)方式也是遵循了形式服從功能的原則展示給用戶，另一種是打車(chē)場(chǎng)景已經(jīng)3dVR場(chǎng)景使用也是較多，比如滴滴打車(chē)頁(yè)面可以看到司機(jī)開(kāi)車(chē)的形象來(lái)接我們，比如得物得VR看鞋的功能……

形式服從功能我理解不止是功能也可以是業(yè)務(wù)，例如舉辦一些概念形的活動(dòng)的時(shí)候，就可以把主視覺(jué)通過(guò)具象化的形式進(jìn)行繪制，讓用戶最快的理解活動(dòng)的主題，也符合用戶的心理認(rèn)知。

4. 我的設(shè)計(jì)經(jīng)驗(yàn)

前幾年在京東做的醫(yī)療頁(yè)面，在其中就會(huì)出現(xiàn)各種疾病科室，很多疾病科室其實(shí)對(duì)于不經(jīng)�？床〉挠脩魜�(lái)講是陌生的，因此在設(shè)計(jì)科室和疾病入口時(shí)統(tǒng)一把它們具象化展示給用戶，降低用戶的理解成本，同時(shí)又能夠保證基本的美觀。

5. 總結(jié)

我的理解是我們?cè)谧鲈O(shè)計(jì)時(shí)一定要先考慮功能性，不要為了美感而損失產(chǎn)品原本的意義，另一方面形式服從功能是設(shè)計(jì)的基礎(chǔ)原則，但它也是一個(gè)基本的邏輯，它的使用方式不局限于此，我提到最多的話就是不管是心理學(xué)還是原理法則，都只是邏輯上的概念，我們?cè)谧鲈O(shè)計(jì)時(shí)可以通過(guò)這個(gè)基礎(chǔ)的邏輯去靈活運(yùn)用。

四、框架效應(yīng)

1. 什么是框架效應(yīng)

框架效應(yīng)屬于認(rèn)知偏差，用戶會(huì)根據(jù)產(chǎn)品的表達(dá)方式所受影響，而不是信息本身，框架效應(yīng)決定的不是說(shuō)什么，而是怎么說(shuō)。

根據(jù)理性決策理論(包括期望效用理論)，人們的決策應(yīng)該是描述不變的，也就是說(shuō)，呈現(xiàn)選項(xiàng)的方式不應(yīng)該影響選擇，當(dāng)一個(gè)問(wèn)題被呈現(xiàn)為收益時(shí)，人們往往會(huì)規(guī)避風(fēng)險(xiǎn)，而當(dāng)同樣的問(wèn)題被呈現(xiàn)為損失時(shí)，人們往往會(huì)冒險(xiǎn)，但是理論終究是忽略了人是情感動(dòng)物這個(gè)事情，同樣的事情通過(guò)不同的表達(dá)方式也會(huì)影響人們的決策。

我們可以把一句話或一段話看作一個(gè)框架，同一個(gè)問(wèn)題可以用兩種不同的話術(shù)來(lái)表達(dá)，也就是說(shuō)同一個(gè)問(wèn)題可以用兩個(gè)不同的框架來(lái)表達(dá)。

一段話中有積極因素或詞語(yǔ)，或者有受人喜歡的詞語(yǔ)，我們就說(shuō)它是積極框架。

一段話中有消極因素或詞語(yǔ)，或者有受人厭惡的詞語(yǔ)，我們就說(shuō)它是消極框架。

假如我們?nèi)ベ?gòu)買(mǎi)清潔劑，貨架上同樣品牌的清潔劑，一個(gè)上面寫(xiě)著清除90%的細(xì)菌，另一個(gè)寫(xiě)著讓10%的細(xì)菌存活，相信大多人都會(huì)選擇買(mǎi)清除90%，這兩種文案?jìng)鬟f的核心意思是相同的都是為來(lái)清除細(xì)菌，但是通過(guò)不同的話術(shù)信息進(jìn)行表達(dá)，我們所看到的感受也不同。

例如我們?nèi)コ�市買(mǎi)牛肉，兩個(gè)相同的牛肉擺放在一起，一個(gè)上面寫(xiě)著70%的瘦肉，另一寫(xiě)著30%肥肉那么相信大多人會(huì)選擇瘦肉，因?yàn)槿藗兏�喜歡瘦肉，而肥肉本身是被排斥的，所以人們會(huì)在"70%的瘦肉"這個(gè)框架里去思考。

2. 他是怎么來(lái)的

此效應(yīng)由兩位以色列心理學(xué)家尼爾·卡尼曼(Daniel Kahneman)和阿摩司·特沃斯基(Amos Tversky)于 1981 年提出，他們研究了相同信息的不同表達(dá)方式如何影響了人的決策，他們通過(guò)兩個(gè)案例驗(yàn)證了該效應(yīng)。

框架效應(yīng)存在的理論依據(jù)為前景理論、認(rèn)知理論、動(dòng)機(jī)理論：

前景理論論證了人們更容易受到損失可能的影響，并且影響程度大于收益(跟稟賦效應(yīng)類(lèi)似);

認(rèn)知理論則注重研究衡量得失的認(rèn)知過(guò)程;

動(dòng)機(jī)理論是一種愉悅壓力的結(jié)果，在恐懼和希望中會(huì)更加偏向恐懼，從恐懼中選擇希望，這3個(gè)理論形成框架效應(yīng)。

美國(guó)心理學(xué)家丹尼爾·卡尼曼做過(guò)的一個(gè)實(shí)驗(yàn)，假設(shè)為預(yù)防一種罕見(jiàn)疾病的爆發(fā)準(zhǔn)備，預(yù)計(jì)這種疾病會(huì)使600人死亡，現(xiàn)在有2種方案：

可以救活200人;

有三分之一可能救活600人，三分之二可能一個(gè)救不了。

根據(jù)調(diào)查顯示大多人更愿意選擇方案1，因?yàn)閷?duì)于人的情感而言，救人是一種收益，在框架效應(yīng)里屬于積極框架，人無(wú)法接受損失的風(fēng)險(xiǎn)。

另一種方案是：

400人會(huì)死亡;

三分之一的可能無(wú)人死亡，三分之二的可能是600人全部死亡。

調(diào)查結(jié)果顯示人們更傾向于方案2，因?yàn)樵?個(gè)方案中都屬于損失，人們不愿意接受損失，所以會(huì)選擇冒風(fēng)險(xiǎn)的方案2，其實(shí)2個(gè)調(diào)查都是同一個(gè)背景，這就是積極框架和消極框架所影響人的決策思考。

3. 設(shè)計(jì)中如何用

(1)提升轉(zhuǎn)化率

我們?cè)趺赐ㄟ^(guò)框架效應(yīng)提升轉(zhuǎn)化率從而賦予設(shè)計(jì)價(jià)值呢，這里舉個(gè)例子例如我們?cè)谧鲆粋�(gè)桌面端的衍生產(chǎn)品，這個(gè)產(chǎn)品的目的是為了學(xué)習(xí)，在這之前用戶都是通過(guò)網(wǎng)站進(jìn)行學(xué)習(xí)，我們需要引導(dǎo)用戶下載桌面端，那么如何引導(dǎo)才能提升這個(gè)下載的轉(zhuǎn)化率呢，我們就可以通過(guò)框架效應(yīng)去進(jìn)行賦能，正常下載軟件的時(shí)候都會(huì)有下載彈窗或者是安裝彈窗，以此作為二次確認(rèn)，身為設(shè)計(jì)師我們就可以在彈窗上做文章，像上面講的用戶更喜歡積極效應(yīng)，我們?cè)趶棿罢故镜脑捫g(shù)上加以引導(dǎo)，就可以提升用戶操作下一步的轉(zhuǎn)化，同時(shí)也能夠體現(xiàn)設(shè)計(jì)的價(jià)值。

同樣在移動(dòng)端也可以適用，例如我們需要用戶進(jìn)行APP版本更新，但是很多用戶不愿意去更新他們嫌麻煩，往往都是直接關(guān)閉更新提示，因?yàn)楦�新提示上�?nèi)容眾多并且用戶很難理解，常見(jiàn)的就是"提升了體驗(yàn)""優(yōu)化了幾項(xiàng)問(wèn)題"等等，試問(wèn)一下你看到會(huì)去更新嗎，那假如我們利用框架效應(yīng)在這個(gè)基礎(chǔ)上把它的文案變成正向的數(shù)據(jù)，是不是就可以促進(jìn)用戶的更新了呢。

在使用哈啰app時(shí)無(wú)意間看到一個(gè)非常適合框架效應(yīng)的例子，在哈啰首頁(yè)大家都知道目的是為了掃碼騎車(chē)，但在其他模塊會(huì)有一些商業(yè)化的入口和引流的入口，我們看下面這個(gè)圖中哈啰打車(chē)想在哈啰app中引流下載，他的打車(chē)宣傳語(yǔ)是"哈啰打車(chē)，省時(shí)又便宜"那這樣的文案太常見(jiàn)了，省了多長(zhǎng)時(shí)間?便宜了多長(zhǎng)時(shí)間?用戶都不清楚為什么要下載呢，如果把文案改成數(shù)據(jù)化形式，如哈啰打車(chē)，效率提升70%，每單節(jié)省10%，是不是更能激起下載欲望呢。

(2)作品集中的作用

框架效應(yīng)不止運(yùn)用到產(chǎn)品設(shè)計(jì)中，在我們平常的求職面試中也可以用到，這里有感而發(fā)，近期公司招實(shí)習(xí)生，但是我發(fā)現(xiàn)很多實(shí)習(xí)生的簡(jiǎn)歷或者作品集寫(xiě)了眾多內(nèi)容，并且在面對(duì)簡(jiǎn)歷時(shí)我完全看不到重點(diǎn)，比如很多人會(huì)寫(xiě)我會(huì)什么什么軟件，我會(huì)什么什么設(shè)計(jì)。

那么問(wèn)題來(lái)了，這么多軟件中你是都精通還是都不精通，這個(gè)我不清楚的，難道還要面試的過(guò)程中問(wèn)軟件基礎(chǔ)么，這個(gè)我覺(jué)得太浪費(fèi)時(shí)間了，明明可以在簡(jiǎn)歷中或者作品集里去避免這個(gè)問(wèn)題，我們可以在做簡(jiǎn)歷或者技能說(shuō)明的時(shí)候，可以在某一欄進(jìn)行突出表現(xiàn)，以此來(lái)告訴面試官你擅長(zhǎng)什么，并且面試官也會(huì)根據(jù)你擅長(zhǎng)的領(lǐng)域進(jìn)行問(wèn)你，當(dāng)問(wèn)到你其他領(lǐng)域的時(shí)候，你不會(huì)也情有可原，畢竟你提前告訴面試官你并不精通這個(gè)。

4. 總結(jié)

框架效應(yīng)應(yīng)用場(chǎng)景非常多，商品的售賣(mài)、日常的溝通、產(chǎn)品信息的表達(dá)等等，作為設(shè)計(jì)師我們要根據(jù)實(shí)際的場(chǎng)景去靈活運(yùn)用，我曾經(jīng)在京東，去做自驅(qū)需求溝通的時(shí)候往往就會(huì)碰壁無(wú)法推進(jìn)，后來(lái)就學(xué)會(huì)了一個(gè)技巧，不要說(shuō)你要獲得什么，而是先告訴他們能獲得什么，這樣他們會(huì)被這種積極框架效應(yīng)給束縛，之后在去講你需要什么，這樣需求推動(dòng)起來(lái)更加容易，這就是在溝通上運(yùn)用的框架效應(yīng)。

五、漸進(jìn)呈現(xiàn)

1. 什么是漸進(jìn)呈現(xiàn)

漸進(jìn)呈現(xiàn)是一種交互設(shè)計(jì)技術(shù)，它可以在多個(gè)屏幕上對(duì)信息和動(dòng)作進(jìn)行排序，給用戶提供引導(dǎo)作用，它遵循從抽象到具體將信息或者選擇項(xiàng)分為多個(gè)部分組成，以此來(lái)達(dá)到循序漸進(jìn)的過(guò)程。

官方定義是"將復(fù)雜且不常用的選項(xiàng)從主界面移動(dòng)到輔助界面中，讓更多重要的信息觸手可及"。

聽(tīng)起來(lái)比較復(fù)雜，其實(shí)很簡(jiǎn)單，就像我們小時(shí)候上學(xué)學(xué)習(xí)漢字，我們要從拼音字母的發(fā)音開(kāi)始學(xué)習(xí)，之后在學(xué)習(xí)字母組成的全拼，最后學(xué)習(xí)字的發(fā)音，組成詞匯、成語(yǔ)，最后我們就學(xué)習(xí)課本的閱讀理解等等，這一系列過(guò)程就是漸進(jìn)呈現(xiàn)在生活中的映射。

在比如說(shuō)一個(gè)從來(lái)沒(méi)有健身的人突然想去練腹肌，那他肯定是從基礎(chǔ)開(kāi)始練逐步把強(qiáng)度增加后才能達(dá)到最后練成腹肌的目標(biāo)。

2. 他是怎么來(lái)的

漸進(jìn)呈現(xiàn)是1980年代初存在的概念，該概念在 IBM 的 John M. Carroll 和 Mary Rosson 的實(shí)驗(yàn)室工作中引起了用戶界面專家的注意(Carroll 1983)，他們發(fā)現(xiàn)早期隱藏高級(jí)功能會(huì)導(dǎo)致以后使用它的成功率增加，被稱為"訓(xùn)練輪"(Carroll 1984)的方法是驗(yàn)證該概念的唯一參考文獻(xiàn)之一，但是這個(gè)概念I(lǐng)BM并沒(méi)有進(jìn)行實(shí)際的案例論證，因此具有很多爭(zhēng)議。

直到2006年Nielsen 引入了一種混合到漸進(jìn)式披露的方法，稱為"分階段呈現(xiàn)"，其特點(diǎn)是"向?qū)?(后退下一個(gè))交互概念，然而，與IBM團(tuán)隊(duì)的概念相似，在特定的環(huán)境會(huì)削弱漸進(jìn)呈現(xiàn)的效果，但是"分階段呈現(xiàn)"也剛好證明了在不同的場(chǎng)景中他的使用方法不同。

從歷史上論證結(jié)果看，漸進(jìn)呈現(xiàn)是一個(gè)偏向軟件可用性的概念，在軟件上應(yīng)用比在網(wǎng)頁(yè)中應(yīng)該更有效應(yīng)，這可能是為什么很少有基于網(wǎng)頁(yè)的漸進(jìn)呈現(xiàn)案例，在軟件中，交互是在對(duì)話和"固定狀態(tài)"交互之間，在 Web 上，由于超文本是一種非線性媒體，交互是混亂的、隨機(jī)的和動(dòng)態(tài)的，但是隨著現(xiàn)狀技術(shù)的發(fā)展，網(wǎng)頁(yè)的底層技術(shù)框架也升級(jí)了許多，很大程度上是可以做到仿軟件的交互效果。

可以讓用戶在接受復(fù)雜的信息前就能夠使用產(chǎn)品，簡(jiǎn)單點(diǎn)就是一下把所有信息給到用戶，用戶可能會(huì)因?yàn)楫a(chǎn)品太過(guò)復(fù)雜不去使用，先把簡(jiǎn)單的信息提供給用戶，讓用戶在使用上沒(méi)有困難，其次對(duì)于產(chǎn)品而言也能夠控制功能的數(shù)量。

3. 產(chǎn)品中的應(yīng)用

最核心的原則是要對(duì)功能劃分等級(jí)，確保剛接觸產(chǎn)品的用戶看到的是符合他目標(biāo)的功能，讓用戶注意力集中在重要的功能上。

4. 動(dòng)態(tài)設(shè)計(jì)中的運(yùn)用

漸進(jìn)呈現(xiàn)表面意思聽(tīng)起來(lái)就跟動(dòng)作相關(guān)，我們?cè)谧鯱I的時(shí)候往往都會(huì)涉及到動(dòng)效的處理，那就需要我們?nèi)プ⒁猱?dāng)動(dòng)效的內(nèi)容過(guò)多時(shí)，就要規(guī)范有序的進(jìn)行呈現(xiàn)，如果一個(gè)動(dòng)效一次性把所有內(nèi)容都呈現(xiàn)出來(lái)，那其實(shí)就有點(diǎn)像閃圖了。

除了頁(yè)面之間的跳轉(zhuǎn)動(dòng)效，還有一些UI中常用的微動(dòng)效，那么多元素，什么時(shí)間先展示什么，后展示什么都要提前規(guī)劃好，保證動(dòng)效的流程度。

tab動(dòng)效同樣需要注意，每個(gè)tab都處于同一層級(jí)，因此他們?cè)谧儞Q的過(guò)程也應(yīng)該保持同一個(gè)節(jié)奏。

小結(jié)：漸進(jìn)呈現(xiàn)在動(dòng)效中目的一是為了保證動(dòng)效效果，讓頁(yè)面更加流暢;二是增強(qiáng)用戶對(duì)功能的記憶點(diǎn)，統(tǒng)一秩序的動(dòng)效才能形成記憶效果。

5. 區(qū)分功能優(yōu)先級(jí)

在界面中的設(shè)計(jì)更重要的是讓用戶使用到核心功能，例如在app中很多產(chǎn)品的"個(gè)人 中心"頁(yè)通常會(huì)區(qū)分功能頁(yè)和內(nèi)容頁(yè)，用戶從首頁(yè)切換到"個(gè)人"的時(shí)候應(yīng)該看到哪個(gè)頁(yè)面呢，這個(gè)可以根據(jù)產(chǎn)品的功能優(yōu)先級(jí)來(lái)定義，例如下圖中馬蜂窩的個(gè)人頁(yè)，用戶切換后看到的是個(gè)人主態(tài)頁(yè)面，其次可以在主態(tài)里去使用其他功能，如設(shè)置、資料編輯等等，因?yàn)轳R蜂窩定位是內(nèi)容形產(chǎn)品，所以在個(gè)人頁(yè)里需要把內(nèi)容頁(yè)前置給用戶進(jìn)行使用。

在大眾點(diǎn)評(píng)產(chǎn)品上用戶切換至"我的"頁(yè)面中看到的是功能頁(yè)，其次可以在功能里進(jìn)入個(gè)人主頁(yè)，它與馬蜂窩不同的是，大眾點(diǎn)評(píng)核心功能是探店、下單等，與用戶目標(biāo)關(guān)聯(lián)性更強(qiáng)的是訂單、優(yōu)惠券、達(dá)人等級(jí)等功能，反而社交頁(yè)面它的用戶價(jià)值并沒(méi)有功能頁(yè)高。

6. 網(wǎng)頁(yè)中也能應(yīng)用

開(kāi)始講的論證問(wèn)題說(shuō)過(guò)，網(wǎng)頁(yè)中不建議使用，但是在設(shè)計(jì)內(nèi)雖然不太能使用，但在商業(yè)化價(jià)值上是能夠運(yùn)用到漸進(jìn)呈現(xiàn)的，例如我們?cè)跒g覽新聞網(wǎng)站或者一些商品網(wǎng)站時(shí)，通常都會(huì)添加翻頁(yè)功能，因?yàn)樵诰W(wǎng)頁(yè)很少做feed流，那么就可以在首屏的幾個(gè)模塊內(nèi)添加廣告，以此來(lái)達(dá)到商業(yè)化目的，但是這種做法會(huì)影響用戶體驗(yàn)。

7. 總結(jié)

漸進(jìn)呈現(xiàn)更多時(shí)偏向于交互策略方向的方法，他既有好處也有壞處，好處是可以幫助用戶按照他們的預(yù)期來(lái)進(jìn)行使用產(chǎn)品，強(qiáng)化用戶粘性，減少認(rèn)知負(fù)載，提升用戶使用效率，壞處是如果我們的策略與用戶目標(biāo)不匹配那可能會(huì)流失用戶，其次是會(huì)限制用戶看到內(nèi)容，因此要求產(chǎn)品策略與用戶目標(biāo)的匹配精準(zhǔn)度要非常高。

六、共同命運(yùn)原則

1. 什么是共同命運(yùn)原則

人在看到相同軌跡并以相同速度移動(dòng)的對(duì)象時(shí)會(huì)將對(duì)象視為一個(gè)組，這是一種心理現(xiàn)象，屬于格式塔原則之一�！兑曈X(jué)傳播》的作者保羅·馬丁·萊斯特(Paul M. Lester)給此原則這樣的解釋：「人們會(huì)在心里將指向天空的 5 根手指看作一個(gè)組，因?yàn)樗鼈兌贾赶蛞粋�(gè)方向。當(dāng)有根手指指向反方向時(shí)會(huì)形成對(duì)立，從而使人們不能夠?qū)⒛歉�手指視作整體中的一部分。」

簡(jiǎn)單理解就是用戶看到多個(gè)點(diǎn)同時(shí)變換的時(shí)候，會(huì)把他們認(rèn)定為一個(gè)組織。

共同命運(yùn)的原則對(duì)于我們了解我們周?chē)�的事物如何相互關(guān)聯(lián)或不相互關(guān)聯(lián)至關(guān)重要，我們?cè)谏�活的幾乎每一個(gè)方面都使用這一原則的機(jī)制，而不僅僅是在我們對(duì)設(shè)計(jì)的享受和辨別中。

假如我們?cè)陂_(kāi)車(chē)，當(dāng)在路上行駛時(shí)，看到同向行駛的周?chē)�汽�?chē)時(shí)，在反向道路行駛的司機(jī)看到的時(shí)候同向行駛的所有汽車(chē)其實(shí)就是一個(gè)組，因?yàn)槎荚诔�向一個(gè)方向行駛。

共同命運(yùn)原則對(duì)于我們了解周?chē)�事物之間的關(guān)系至關(guān)重要，我們?cè)谏�活的各個(gè)方面都使用這個(gè)原則，甚至沒(méi)有注意到它。

2. 他是怎么來(lái)的

此共同命運(yùn)原則是格式塔六大原則中的第四個(gè)，由心理學(xué)家馬克斯·韋特海默(Max Wertheimer)、科特·考夫卡(Kurt Koffka)和沃爾夫?qū)�·苛�?Wolfgang Kohler)提出。保羅·馬丁·萊斯特(Paul M. Lester)在《視覺(jué)傳播》中提到：「人們會(huì)在心里將指向天空的 5 根手指看作一個(gè)組，因?yàn)樗鼈兌贾赶蛞粋�(gè)方向。當(dāng)有根手指指向反方向時(shí)會(huì)形成對(duì)立，從而使人們不能夠?qū)⒛歉�手指視作整體中的一部分�！�

3. 產(chǎn)品中的應(yīng)用

其實(shí)格式塔原則本身在設(shè)計(jì)中就經(jīng)常見(jiàn)到，共同命運(yùn)原則作為格式塔原則的其中一部分，無(wú)論在網(wǎng)頁(yè)中還是移動(dòng)端中我們都經(jīng)�？吹�，人們對(duì)"動(dòng)作"中的物體是極其敏感的，我們可以利用這個(gè)一點(diǎn)結(jié)合共同命運(yùn)原則的概念幫助我們做到更好的體驗(yàn)設(shè)計(jì)。

(1)網(wǎng)站下拉導(dǎo)航

我們經(jīng)常在網(wǎng)頁(yè)中看到的下拉菜單導(dǎo)航等功能就是采用共同命運(yùn)原則，例如下圖中的站酷首頁(yè)，我們?cè)诓僮黜敳肯吕瓡r(shí)會(huì)展開(kāi)二級(jí)導(dǎo)航入口，二級(jí)導(dǎo)航入口進(jìn)入到我們的可視區(qū)域時(shí)，他們是以一個(gè)組的形式出現(xiàn)，這個(gè)就是共同命運(yùn)原則的關(guān)聯(lián)性，假設(shè)我們?cè)诰W(wǎng)速過(guò)慢的情況打開(kāi)網(wǎng)站進(jìn)行導(dǎo)航操作時(shí)，這些二級(jí)導(dǎo)航會(huì)以單個(gè)形式出現(xiàn)在可視范圍，那么整體的體驗(yàn)性就非常差，這就是違背了共同命運(yùn)原則的定論。

再比如說(shuō)一些網(wǎng)站會(huì)在導(dǎo)航處添加css動(dòng)效，當(dāng)hover一級(jí)導(dǎo)航時(shí)二級(jí)導(dǎo)航內(nèi)容并不會(huì)一次全部出來(lái)，而是通過(guò)動(dòng)效方式有序的出現(xiàn)，這個(gè)其實(shí)也是遵循了共同命運(yùn)原則，通過(guò)動(dòng)效的方式告知用戶這是一個(gè)組，與網(wǎng)絡(luò)波動(dòng)情況不同的是，網(wǎng)絡(luò)波動(dòng)雖然也是一個(gè)一個(gè)出現(xiàn)，但是出現(xiàn)的時(shí)機(jī)并沒(méi)有達(dá)到統(tǒng)一，所以體驗(yàn)會(huì)略差。

(2)引導(dǎo)用戶

共同命運(yùn)原則另一個(gè)使用場(chǎng)景是通過(guò)引導(dǎo)用戶達(dá)成目標(biāo)，如果兩個(gè)對(duì)象指向相同的方向，則方向線在布局中占主導(dǎo)地位，因此如果一個(gè)項(xiàng)目正在移動(dòng)或指向相同的方向，我們可以將所需的消息放在目標(biāo)點(diǎn)，這種方法在網(wǎng)站設(shè)計(jì)中也經(jīng)常用到。

可以看下面例子，我們可以看到一個(gè)管道工用他的扳手指著管道公司的電話號(hào)碼，通過(guò)扳手引導(dǎo)用戶閱讀電話，扳手與電話存在一條視覺(jué)水平線，這個(gè)區(qū)域就是一個(gè)引導(dǎo)組。

包括下面的網(wǎng)站也是同樣的道理，通過(guò)模特的視覺(jué)觀看方向引導(dǎo)用戶觀看標(biāo)題。

(3)移動(dòng)端的應(yīng)用

在移動(dòng)端跳轉(zhuǎn)頁(yè)面時(shí)，經(jīng)常會(huì)出有骨架屏出現(xiàn)，一方面骨架屏是為了緩解用戶焦慮，另一方面則是為了讓下一級(jí)頁(yè)面更完整的展現(xiàn)給用戶，讓用戶看到的是一個(gè)整體，如果一些產(chǎn)品不加骨架屏就會(huì)出現(xiàn)頁(yè)面中每個(gè)模塊都會(huì)單獨(dú)加載出來(lái)毫無(wú)順序，無(wú)法向用戶傳達(dá)同組的關(guān)系。

還有一種常見(jiàn)的是頂部tab切換，目前市場(chǎng)上打多app都采用頂部導(dǎo)航，以此來(lái)承載更多的功能，那么在滑動(dòng)tab時(shí)下面的內(nèi)容通常都會(huì)向統(tǒng)一的方向進(jìn)行移動(dòng)，通過(guò)頁(yè)面移動(dòng)動(dòng)效告知用戶這些內(nèi)容是同組關(guān)系。

4. 我是怎么做的

今年初的時(shí)候?yàn)楣�司web c工具形產(chǎn)品做過(guò)一個(gè)優(yōu)化，產(chǎn)品主要針對(duì)的是技術(shù)類(lèi)用戶，其中就有一個(gè)功能是通過(guò)網(wǎng)站練習(xí)寫(xiě)代碼的功能，我們都知道工作中技術(shù)同學(xué)一般都是使用桌面端的軟件去完成工作，那么在做網(wǎng)站仿桌面軟件時(shí)就要保證用戶的操作習(xí)慣。

我們當(dāng)時(shí)遇見(jiàn)一個(gè)問(wèn)題，很多用戶反饋說(shuō)我們的刷題工具其中一個(gè)功能流程度不好(技術(shù)類(lèi)用戶比較嚴(yán)謹(jǐn))，這個(gè)功能呢對(duì)于我們來(lái)講其實(shí)經(jīng)常見(jiàn)，他類(lèi)似于下拉菜單功能，只不過(guò)在技術(shù)刷題場(chǎng)景他是一個(gè)《自動(dòng)補(bǔ)全》的功能，即用戶在編輯器里輸入代碼的前幾個(gè)字母就能夠聯(lián)想出與該字母所匹配的選項(xiàng)，但是當(dāng)時(shí)我們的補(bǔ)全功能很久沒(méi)有優(yōu)化過(guò)，樣式上比較老舊，交互上也不合理。

雖然功能簡(jiǎn)單但是在優(yōu)化的時(shí)候也用到了很多難點(diǎn)，當(dāng)時(shí)的優(yōu)化流程首先是調(diào)研了不同技術(shù)崗位所使用的開(kāi)發(fā)軟件，我自己體驗(yàn)一遍后選擇出流暢度最高的產(chǎn)品，以此做仿生。

為什么要放到共同命運(yùn)原則說(shuō)呢，因?yàn)槠渲杏袀�(gè)問(wèn)題是自動(dòng)補(bǔ)全功能聯(lián)想的代碼條數(shù)并不是成組出現(xiàn)，而是一行一行出現(xiàn)，這樣的問(wèn)題就會(huì)造成用戶在使用過(guò)程中的效率，另一方面就是無(wú)法向用戶傳達(dá)組的概念。

因此在優(yōu)化完視覺(jué)方面后，也對(duì)齊交互進(jìn)行優(yōu)化。

5. 總結(jié)

共同命運(yùn)原則在設(shè)計(jì)中屬于基礎(chǔ)原則，基本在做任何產(chǎn)品時(shí)都會(huì)使用，而且是無(wú)法避免的，如果不使用那就會(huì)出現(xiàn)體驗(yàn)問(wèn)題，他的目的是為了讓用戶更好的閱讀信息、理解信息，我們?cè)搅私庠瓌t，越能做出好的體驗(yàn)產(chǎn)品。

來(lái)源: 網(wǎng)絡(luò)

以上是關(guān)于網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)信息，以供大家查看了解。想要了解更多網(wǎng)頁(yè)設(shè)計(jì)信息，第一時(shí)間了解網(wǎng)頁(yè)設(shè)計(jì)相關(guān)資訊，敬請(qǐng)關(guān)注唯學(xué)網(wǎng)網(wǎng)頁(yè)設(shè)計(jì)欄目，如有任何疑問(wèn)也可在線留言，小編會(huì)為您在第一時(shí)間解答!