在開始分享前，先講個小插曲。///

當(dāng)產(chǎn)品需求下來時，我有時候會常常反問產(chǎn)品一句話，為什么要這么做，為什么要改？也許我這個做法看起來像是在抬杠或是找茬? ?其實(shí)并不是，我只是想聽聽產(chǎn)品這樣做依據(jù)，結(jié)合我自己對這兒的理解，我們互相討論，最終得出一個能說服雙方的方案。這也是對產(chǎn)品的一種負(fù)責(zé)的表現(xiàn)吧。///

那么你的設(shè)計(jì)有依據(jù)嗎？

引言：

設(shè)計(jì)中感性與理性

設(shè)計(jì)是感性的，有很多主觀情緒在里面，設(shè)計(jì)又是理性的，美的東西不會無緣無故的美，而丑的東西也不會沒有理由的丑。

哲學(xué)中的感性是指有感覺的，可以看到，摸到，聞到的，而理性是指精神上對感性的進(jìn)一步的認(rèn)識。

感性認(rèn)識是理性認(rèn)識的基礎(chǔ)，當(dāng)認(rèn)知從感性層面到理性層面時，設(shè)計(jì)做得有理可尋時，是一次質(zhì)的飛躍。

通俗的去解釋，在做設(shè)計(jì)時，對于自己的作品某一個版塊感覺非常舒服，而不知為何，只停留在感官上的舒適，這就是感性。如果對于自己的作品可以有理有據(jù)的去說明，某個元素導(dǎo)致了視覺上的平衡舒適，那么這就是理性。

這次分享會的目的就是想讓大家對用戶體驗(yàn)的設(shè)計(jì)從感性層面到理性層面的一個轉(zhuǎn)變，讓自己的設(shè)計(jì)真正的有依據(jù)所在，而不是沒有理由的純憑感覺去設(shè)計(jì)，美丑不是評判設(shè)計(jì)的唯一標(biāo)準(zhǔn)。///

一個設(shè)計(jì)者的成熟與青澀或許就在于感性到理性的轉(zhuǎn)變，下面我們來看兩個設(shè)計(jì)作品。

這兩個作品看上去大相徑庭，沒什么區(qū)別，但一個設(shè)計(jì)者成熟和青澀也許就從中體現(xiàn)

成熟的設(shè)計(jì)者喜歡用大面積的留白來襯托主體物，讓主體物更直觀，從而頁面更具有層次。而青澀的設(shè)計(jì)者則喜歡用大面積留白來滿足感性上的逼格，除此再無其他。///

當(dāng)然，理性的設(shè)計(jì)者并不是被規(guī)則捆綁的設(shè)計(jì)師，比如他們知道大紅色代表喜慶，所以在一些傳統(tǒng)節(jié)目的閃屏頁面時，他們會選擇大紅色而不是深灰色，而閃屏中具體有什么元素，各個元素要表達(dá)什么意義，就要感性的去思考。///

------ ? 下面呢我會從以下幾個案例來闡述為什么設(shè)計(jì)師為什么需要更理性的去做設(shè)計(jì)，或者說是真正做到感性與理性的結(jié)合，并且充滿依據(jù)。

在講案例前

首先我們還是講一下 什么是體驗(yàn)設(shè)計(jì)（理論）

體驗(yàn)設(shè)計(jì)是將消費(fèi)者（我們口中的用戶）參與融入設(shè)計(jì)中，在設(shè)計(jì)中把服務(wù)作為“舞臺”，產(chǎn)品作為“道具”，環(huán)境作為“布景”，力圖使用戶在商業(yè)活動過程中感受到美好的體驗(yàn)過程

體驗(yàn)設(shè)計(jì)的目的是在設(shè)計(jì)的產(chǎn)品或服務(wù)中融入更多人性化的東西,讓用戶能更方便的使用,更加的符合用戶的操作習(xí)慣。（來自百度）

那么換成今天的主題來講就是：做合理的設(shè)計(jì)，合理的做設(shè)計(jì)。也是在引言中提到的讓設(shè)計(jì)有理可尋。

體驗(yàn)設(shè)計(jì)分成三個板塊（表現(xiàn)層、交互層、心理層）

在用戶體驗(yàn)設(shè)計(jì)中，這三個層級是隨時要考慮的，三者是相輔相成的，就好比，設(shè)計(jì)者做到美化界面是最基礎(chǔ)的要求，而美觀的界面本來就會讓用戶心理產(chǎn)生可靠與信賴，只是設(shè)計(jì)師需要不斷的調(diào)和美觀與易用之間的關(guān)系比例，關(guān)于美感是很主觀感性的，所以下面的例子主要是圍繞著交互層和心理層去講解。///

案例一

同樣的內(nèi)容，選擇不同的UI組件，會使得產(chǎn)品完全不同

我們先來看著兩張圖：

不管是產(chǎn)品經(jīng)理還是UI這是兩個很常見tag做法，這兩個UI模塊擺在大家面前，我們能清晰的感受到，左邊是一個segment控制下面內(nèi)容的UI，而右邊是一個所有內(nèi)容列表的集合頁，只不過通過tab聚類了而已。

當(dāng)我們看看到這兩種UI組件時我們能想到的是如果需要采用右邊的排版形式就必須要控制tag的字?jǐn)?shù)，然后右邊的tag占據(jù)了推薦貼的位置，導(dǎo)致推薦貼可能沒有左邊的那種展現(xiàn)形式更加醒目。但是相對的，右圖的優(yōu)勢在于，由于豎向排列的tag可以讓一個屏幕展示更多的選項(xiàng)，可以讓用戶更方便的定位內(nèi)容，///

比如外賣產(chǎn)品選擇用右邊的這種形式是因?yàn)榱η笠黄琳故靖嗟牟耍彝赓u產(chǎn)品的左側(cè)tag一般是一家店鋪的菜的品類，用戶下滑菜品配合點(diǎn)擊品類，點(diǎn)完即走。（類似京東淘寶電商類平臺也類似），更方便用戶垂直快速的找到自己想要的。///

但比如頭條，虎撲，新浪這種新聞類或者無限信息流的客戶端大多采用左邊這種形式，因?yàn)檫@類客戶端是需要用戶長時間沉浸的，比如用戶選中一個“推薦”的tag之后一般要沉浸的看很久，當(dāng)用戶沉浸在這個tag的內(nèi)容中時，我們就應(yīng)該突出內(nèi)容，那么這個時候顯然用右邊這種設(shè)計(jì)方式讓tag常駐屏幕右側(cè)是不合適的。

所以我們的中央天氣預(yù)報和樓下萬年歷的無限信息流的設(shè)計(jì)也是采用左邊的形式。///

案例二

根據(jù)產(chǎn)品內(nèi)容不斷優(yōu)化UI組件

這里用快手和全面K歌來做對比

大家會發(fā)現(xiàn)，其實(shí)這個頁面，快手和K歌承載的內(nèi)容都是消費(fèi)轉(zhuǎn)化，都希望用戶點(diǎn)擊進(jìn)去消費(fèi)內(nèi)容，但是兩款產(chǎn)品做了截然不同的UI風(fēng)格，原因是什么？

快手在這個頁面，其實(shí)承載的關(guān)鍵任務(wù)是：“迅速讓用戶找到感興趣的點(diǎn)”，它這么設(shè)計(jì)的本質(zhì)原因是因?yàn)樗慕貓D可以幫助用戶判斷內(nèi)容本身，比如第一張圖是一群小姐姐在唱歌，右邊是一個工人，然后第二排左邊是手機(jī)操作功能演示，右邊是一個手機(jī)推薦，大家可以很方便的通過圖片識別里面的內(nèi)容，用戶更沉浸更聚焦的去選自己喜歡的點(diǎn)擊進(jìn)入消費(fèi)就可以了。但是K歌的視頻截圖其實(shí)是不能識別里面內(nèi)容的，大家可以看到，第一張圖是一個妹子，第二場圖是一個妹子，第三張圖還是一個妹子，那用戶點(diǎn)擊進(jìn)去的動力在哪兒了？除了這個照片長相之外，更多的其實(shí)是文字決定的，是這個人唱的這首歌的歌曲名是不是我喜歡的，或者是這個演唱者的的歌手等級。

所以基于這種跟深層次的邏輯，k歌和快手兩款產(chǎn)品的這個頁面都是為了促進(jìn)消費(fèi)轉(zhuǎn)化，但是UI長相上完全不同。///

同理，我們的卡點(diǎn)視頻即將上線，和K歌一樣，滿屏的妹子并不能讓用戶及時的找到自己想要的目標(biāo)內(nèi)容，所以在優(yōu)化首頁UI時，我們將文字從視頻分離出來，加重文字權(quán)重，讓用戶在使用工具型app時更能及時的找到他想要的消費(fèi)內(nèi)容。

這里也是一波廣告，歡迎大家掃碼下載。

上面兩個案例都是圍繞著交互層來講的，下面這個案例將圍繞著用戶心理層去做剖析///

案例三

警示框、toast與對象內(nèi)嵌給用戶心理暗示和區(qū)別

首先我們來看看同一個產(chǎn)品微信在ios端與And端的“反饋提示”區(qū)別

首先，在微信客戶端中，用戶選擇，發(fā)送圖片是一個高頻次操作，并且也是朋友圈，對話的主要功能之一

微信IOS版，當(dāng)用戶選擇了9張時，再次選擇第10張，用警示框做強(qiáng)阻斷提示，用戶需要點(diǎn)擊警示框中的按鈕操作。這個過程加強(qiáng)了用戶的記憶和操作成本，有了之前的強(qiáng)提示，用戶下次選擇超過9張有印象，避免用戶再次犯錯，從而提高用戶的使用效率。

微信Android版，當(dāng)用戶選擇了9張時，再次選擇第10張，給出較輕量級的Toast，這個過程是在降低用戶犯錯的成本，方便用戶繼續(xù)操作。相較于IOS版本，沒有給用戶強(qiáng)提示，用戶犯錯成本低，不能加深用戶記憶，無強(qiáng)烈感知，不能避免下次犯錯

從整個平臺特性，生態(tài)圈來講，IOS用戶相較于Android用戶來說，質(zhì)量更高。所以對IOS用戶進(jìn)行足夠強(qiáng)烈的用戶教育，可以降低用戶犯錯次數(shù)與概率，提高用戶使用效率。而Android用戶相較IOS用戶，用戶質(zhì)量參差不齊，如果采用相同的強(qiáng)提示，可能會適得其反，引發(fā)用戶的抗拒與不理解。

所以說，高頻次，主要功能的交互操作行為，在用戶操作錯誤的情況下，給予用戶的反饋可以是阻斷式，強(qiáng)烈提示，目的是加深用戶記憶，避免用戶再次犯錯，從而提高用戶使用效率，加強(qiáng)用戶產(chǎn)品粘性

這種方法要區(qū)分用戶屬性，并不適應(yīng)于全部用戶（主體用戶群體年齡，文化水平等），對一部分用戶來說這強(qiáng)烈警示的系統(tǒng)反饋會提高用戶的犯錯成本，學(xué)習(xí)使用成本///

下面我用登錄賬號密碼不匹配為例，來淺析背后的用戶心理邏輯

用戶使用App進(jìn)行登錄時，當(dāng)賬號密碼不匹配，會出現(xiàn)錯誤提示。目前市面上的提示有三種。分別為警示框、toast和對象內(nèi)嵌

首先說下使用場景，登錄賬號屬于超低頻的操作。現(xiàn)在app都將退出賬號的路徑做的比較深，以此減少用戶退出賬號。這樣的好處是可以讓用戶更方便的體驗(yàn)產(chǎn)品，增加產(chǎn)品的使用時長和使用深度

· 警示框

警示框?yàn)樽钄嗍讲僮鳎瑢儆趶?qiáng)提示。告知用戶賬號密碼不匹配，用戶需要點(diǎn)擊警示框上的按鈕才能重新輸入賬號或密碼

微信、QQ、Instagram在登錄賬號密碼不匹配時，使用的都是警示框。需要用戶點(diǎn)擊警示框按鈕才可以再次輸入，強(qiáng)制性操作

微信、QQ、Instagram沒有第三方登錄，且都為社交軟件，在同一個設(shè)備多個賬戶頻繁切換登錄的用戶較少，大部分用戶只有或常用一個賬號，所以賬號密碼安全非常重要，QQ和微信也做了大量的安全措施去幫助用戶進(jìn)行賬號密碼管理，所以在賬號密碼不匹配時用警示框強(qiáng)烈提示用戶是很有必要的

· Toast

Toast為短暫的提示性組件，當(dāng)用戶點(diǎn)擊登錄時，提交給系統(tǒng)，系統(tǒng)發(fā)現(xiàn)賬號密碼不匹配，通過Toast提示告知用戶，一般停留1-2s，之后消失。屬于輕量級提示

京東、UC瀏覽器、蝦米均存在多個登錄選項(xiàng)或第三方登錄，用戶賬號切換，多個賬號的可能性相較更多，使用Toast在提示用戶錯誤反饋的同時也方便用戶去其他操作

· 對象內(nèi)嵌

當(dāng)用戶點(diǎn)擊登錄時，提交給系統(tǒng)，發(fā)現(xiàn)賬號密碼不匹配，系統(tǒng)通過在界面中內(nèi)嵌文字提示告知用戶，此提示一般提示為帶警惕性顏色（紅色）的醒目文字。屬于更輕量級提示。

Chrome瀏覽器、百度網(wǎng)盤在登錄賬號密碼不匹配時，使用的都是對象內(nèi)嵌的方式。通過界面中的文字反饋?zhàn)層脩糁赖卿浭〉脑颉Ｓ脩艨梢岳^續(xù)在輸入框里填寫。

對象內(nèi)嵌強(qiáng)烈程度更低，對用戶的干擾更弱同時拓展性更好，可以在界面內(nèi)添加大量的信息。

對象內(nèi)嵌適用于信息小布局簡單的界面。例如Chrome瀏覽器、百度網(wǎng)盤的登錄界面為信息小布局，較為簡單。信息量大的布局復(fù)雜的界面不適合使用對象內(nèi)嵌，如果使用對象內(nèi)嵌的話，提示更弱化，不利于用戶發(fā)現(xiàn)反而使原本界面變得更復(fù)雜了。///

以上三個提示類型強(qiáng)烈程度分別為：警示框 > toast > 對象內(nèi)嵌

如果整個產(chǎn)品考慮更深的是產(chǎn)品邏輯與防錯，可以選擇強(qiáng)制性的警示框。

有的設(shè)計(jì)者/產(chǎn)品經(jīng)理覺得警示框太強(qiáng)制了。為什么還要用戶去點(diǎn)擊一下，才能再輸入呢。就喜歡采取toast而導(dǎo)致整個產(chǎn)品很多都是toast，過多的toast，用戶習(xí)慣之后很容易忽略掉toast的提示語，未起到真正的防錯和提示，有時候適度顯得更重要。

而對象內(nèi)嵌，則更為輕量。而且擴(kuò)展性強(qiáng)，可以承載更多的信息。對于需要考慮拓展性和免打擾用戶來說是不錯的設(shè)計(jì)選擇。///

最后總結(jié)一下

這次分享主要是通過幾個案例來剖析了用戶體驗(yàn)設(shè)計(jì)中的一些基礎(chǔ)規(guī)律。

設(shè)計(jì)師都會經(jīng)歷一個感性到理性的轉(zhuǎn)變，在理性的基礎(chǔ)上發(fā)揮自己感性的創(chuàng)意，讓設(shè)計(jì)有據(jù)可循，文章中沒有過多的專業(yè)術(shù)語，把復(fù)雜的東西寫簡單，就像做設(shè)計(jì)把簡單的東西做到有道理。

其實(shí)設(shè)計(jì)中或許沒有標(biāo)準(zhǔn)正確的方案，而是你是否有了自我的設(shè)計(jì)觀，然后根據(jù)你的設(shè)計(jì)觀去定義設(shè)計(jì)。///

最后的最后給個彩蛋吧，分享一首緩解氛圍的歌。