在進(jìn)行 UI 設(shè)計(jì)的時(shí)候，很多小技巧能夠恰到好處地提升界面的設(shè)計(jì)視覺效果、用戶體驗(yàn)。

那些讓我們看了一眼就能過目不忘的產(chǎn)品，并非一定就是行業(yè)中靠前的翹楚，吸引我們的只是一個(gè)小小的細(xì)節(jié)，如何將這些優(yōu)秀細(xì)節(jié)亮點(diǎn)融入自己的產(chǎn)品并符合調(diào)性，需要長(zhǎng)期日積月累。好的產(chǎn)品從來都不缺少美，只要我們多留意，這些美好的瞬間就會(huì)找到我們，為留下忠實(shí)的用戶打下基礎(chǔ)。

上期回顧：

「騰訊動(dòng)漫」幫你記憶上次登錄方式

1. 產(chǎn)品體驗(yàn)：

在騰訊動(dòng)漫我的頁面點(diǎn)擊登錄，跳轉(zhuǎn)登錄頁面后，會(huì)提示上一次登錄方式，供快速選擇直接登錄。

2. 設(shè)計(jì)思考：

隨著互聯(lián)網(wǎng)大潮的到來，每個(gè)用戶的智能手機(jī)里應(yīng)該都裝有至少幾十個(gè)APP應(yīng)用，為了使用戶更方便快速的登錄體驗(yàn)產(chǎn)品，大部分應(yīng)用都提供了第三方賬號(hào)登錄，比如QQ、微信、支付寶、微博、Apple...賬號(hào)等。由于不同的登錄方式用戶數(shù)據(jù)往往并不互通，會(huì)給用戶帶來不便，在登錄時(shí)也無法確定「我以前是用什么登錄的」這樣的困惑。騰訊動(dòng)漫在登錄界面，增加了上次登錄方式的提醒，以供選擇，讓用戶快速記憶，并且使用跟上次相同的登錄方式無需再次授權(quán)，直接登錄成功，簡(jiǎn)化二次登錄的操作流程。這一提示不僅減少在登錄頁面思考的時(shí)間，更提升了用戶登錄的成功幾率，減少使用障礙，增加留存率。

「網(wǎng)易云音樂」不一樣的歌詞分享

1. 產(chǎn)品體驗(yàn)：

在網(wǎng)易云音樂的歌詞頁面，長(zhǎng)按自己喜歡的歌詞，即可選中，當(dāng)前頁面所有歌詞都變?yōu)榭蛇x擇狀態(tài)，選中自己喜歡的歌詞，可復(fù)制對(duì)應(yīng)的歌詞、查看歌詞圖片/視頻操作。

2. 設(shè)計(jì)思考：

在聽到一首好聽的歌曲，特別是喜歡的部分歌詞，我們就會(huì)情不自禁的想要分享給其他人或者發(fā)個(gè)朋友圈記錄生活，這時(shí)就需要狂敲鍵盤，或許因?yàn)楦柙~過長(zhǎng)會(huì)浪費(fèi)我們大量的時(shí)間，產(chǎn)生的放棄的念頭。在網(wǎng)易云音樂的歌詞頁面，長(zhǎng)按歌詞，選中自己喜歡的部分，就可以通過復(fù)制操作，免去了我們敲鍵盤打字的痛苦，直接粘貼轉(zhuǎn)發(fā)給朋友或者發(fā)布朋友圈。歌詞的選擇性復(fù)制，輕松的一鍵生成，非常便捷，解決了因文字輸入帶給的用戶惰性，一定程度上減少了用戶的操作時(shí)間，細(xì)節(jié)的處理也巧妙的提升了用戶對(duì)產(chǎn)品的好感，增強(qiáng)信任度。

「搜狗輸入法」洞察人心的AI朋友圈助手

1. 產(chǎn)品體驗(yàn)：

• 使用搜狗輸入法在微信發(fā)布朋友圈進(jìn)行文本編輯時(shí)，可以使用「靈感語錄」推薦的語句直接發(fā)布；
• 選擇「AI幫你寫」，在文本框輸入關(guān)鍵詞，AI助手會(huì)根據(jù)關(guān)鍵詞匹配對(duì)應(yīng)的語句，可直接發(fā)布朋友圈。

2. 設(shè)計(jì)思考：

微信朋友圈不僅是在記錄我們的美好生活，同時(shí)也是在維持親朋間的存在感與親近感，比如：每天早上的心靈雞湯、買來新衣服或好吃的曬圖炫耀、心情的即時(shí)變化...等，不管是處于何種原因，不能否認(rèn)的是，朋友圈與我們的生活已經(jīng)息息相關(guān)。同時(shí)也出現(xiàn)了一個(gè)問題，不是每一個(gè)人的文案能力都特別強(qiáng)、語言語言組織能力都很好，對(duì)于比較文藝、又希望得到他人認(rèn)可而頻繁發(fā)布朋友圈的人，總有詞窮的時(shí)候。

搜狗輸入法非常人性化的解決了這一問題，推出朋友圈專屬功能「AI朋友圈助手」板塊，在編朋友圈文本信息時(shí)，展示在鍵盤的上方?？梢栽凇胳`感語錄」中選擇自己喜歡的語句，直接發(fā)布。如果沒有找到合適的，選擇「AI」幫你寫，輸入關(guān)鍵詞，AI助手會(huì)根據(jù)關(guān)鍵詞匹配對(duì)應(yīng)的語句，通過換一句操作，去尋找更多合適的語句編輯發(fā)布。

有了「AI朋友圈助手」功能，再也不用擔(dān)心自己詞窮而想文案了。里面土味情話、搞笑段子等多種風(fēng)格語錄和季節(jié)性限定語錄，讓你無論什么節(jié)日、什么環(huán)境都有適合的文案可以發(fā)。大多數(shù)人發(fā)朋友圈的目的是為了讓更多的人看到，不僅能炫耀自己的文采，也有可能讓她/她看到更加優(yōu)秀的你。讓喜歡追求面子心理的人，因它帶來一種榮耀和心理上的滿足感。

「每日優(yōu)鮮」若隱若現(xiàn)的會(huì)員誘惑

1. 產(chǎn)品體驗(yàn)：

在每日優(yōu)鮮「我的」頁面會(huì)員版塊，只能看到大標(biāo)題和開通會(huì)員按鈕，點(diǎn)擊任一區(qū)域下拉，即可出現(xiàn)隱藏的 5大會(huì)員權(quán)益，松開后內(nèi)容自動(dòng)上移覆蓋還原。

2. 設(shè)計(jì)思考：

在眾多的應(yīng)用中，類似「我的」這樣的一級(jí)頁面，對(duì)于頁面空間資源的占用率都會(huì)盡量達(dá)到最優(yōu)，重要的信息全面展示，次級(jí)信息提供入口。每日優(yōu)鮮的會(huì)員功能，通過點(diǎn)擊任一區(qū)域下拉，即可展示5大會(huì)員權(quán)益，松手后內(nèi)容自動(dòng)上移覆蓋還原?？此坪苄〉慕换ゼ?xì)節(jié)，但抓住了用戶的心里，直接展示出來可能會(huì)被忽略，通過滑動(dòng)的動(dòng)效交互可以引起用戶的注意。

在正常情況下，關(guān)于看到收費(fèi)開通會(huì)員類似的信息，大部分用戶都不會(huì)去主動(dòng)點(diǎn)擊。當(dāng)用戶優(yōu)先看到會(huì)員權(quán)益，強(qiáng)調(diào)了開通會(huì)員后的各種福利和特權(quán)，激起好奇心與貪便宜心理，吸引用戶參與，勾起開通會(huì)員的欲望，從而達(dá)到引導(dǎo)的目的，做到了既不占用頁面空間，又額外給用戶提前展示了應(yīng)該在入口里面的內(nèi)容。能輕松看到的不一定感興趣，正所謂「若隱若現(xiàn)才是誘惑」。另外也減少了不必要的頁面跳轉(zhuǎn)，降低操作成本，提升用戶體驗(yàn)。

「京東」隨心所欲的商品列表樣式

1. 產(chǎn)品體驗(yàn)：

進(jìn)入京東APP的商品列表，可根據(jù)自己的瀏覽喜好，隨時(shí)調(diào)整切換縱向列表或?qū)m格（兩列）列表樣式。

2. 設(shè)計(jì)思考：

對(duì)于會(huì)網(wǎng)購的用戶來說，幾乎沒有網(wǎng)購應(yīng)用小白，根據(jù)長(zhǎng)期的視覺瀏覽習(xí)慣積累，目前所見過的APP商品列表的主流樣式為縱向/宮格列表，大部分用戶基本都可以接受。因人而異，這兩種樣式各有利弊，就專家級(jí)主流用戶來說，還是比較注重細(xì)節(jié)的，都有自己比較喜歡、滿意的視覺風(fēng)格，如果當(dāng)前APP應(yīng)用沒有達(dá)到這類用戶的心理預(yù)期，極有可能會(huì)導(dǎo)致用戶流失。雖然這類主流用戶較少，但是二八原則告訴我們：一個(gè)應(yīng)用的80%收入來源都是來自這20%的主流用戶。

京東APP在這一塊就很好規(guī)避掉了這個(gè)問題，進(jìn)入商品列表，可根據(jù)自己的瀏覽喜好，隨時(shí)調(diào)整縱向列表或?qū)m格（兩列）列表樣式，不管用戶傾向于哪種瀏覽方式，都可以隨時(shí)切換，方便靈活。另外專家級(jí)主流用戶一旦心儀某個(gè)APP應(yīng)用，基本不會(huì)隨意卸載更換，忠誠(chéng)度極高。京東商品列表切換樣式的這一小細(xì)節(jié)，不僅避免了用戶流失，還提升了產(chǎn)品的易用性，在一定上也增加了用戶的忠誠(chéng)度。

「支付寶」便捷的小程序切換

1. 產(chǎn)品體驗(yàn)：

在支付寶小程序里，長(zhǎng)按右上角的關(guān)閉按鈕，會(huì)彈出最近使用過的8個(gè)小程序，單擊可快速切換至其他小程序。

2. 設(shè)計(jì)思考：

隨著消費(fèi)互聯(lián)網(wǎng)時(shí)代的格局逐漸清晰，大型互聯(lián)網(wǎng)平臺(tái)為了進(jìn)一步提升自身的資源整合能力和服務(wù)能力，需要向各個(gè)領(lǐng)域進(jìn)行垂直發(fā)展，小程序則是一個(gè)重要的方式和手段。目前大部分用戶也都集中這些一線的互聯(lián)網(wǎng)平臺(tái)中，小程序的免下載、輕量化備受用戶的青睞，因而支持小程序開發(fā)的公司也一直在為用戶提供更方便快捷的服務(wù)而不停的探索。

在支付寶小程序里長(zhǎng)按右上角關(guān)閉按鈕，就會(huì)彈出最近使用過的小程序，根據(jù)使用時(shí)間先后依次排列，點(diǎn)擊可快速切換，免去了用戶關(guān)閉當(dāng)前小程序后再重新進(jìn)入其他小程序的常規(guī)麻煩操作。退出切換對(duì)用戶來說，屬于一次使用中斷，即「開始~結(jié)束、再次開始~結(jié)束...」，但通過長(zhǎng)按關(guān)閉按鈕切換，具有連貫性「開始~~~結(jié)束」，更有利于用戶沉浸式的使用，避免用于因使用中斷而離開，一定程度上能十分討巧地挽留用戶繼續(xù)使用。有時(shí)候換一種思考方式做產(chǎn)品，也許能得到不一樣的結(jié)果。

「酷狗音樂」直播導(dǎo)航自定義排序功能

1. 產(chǎn)品體驗(yàn)：

酷狗音樂直播模塊頂部導(dǎo)航欄，點(diǎn)擊下拉展開分類，長(zhǎng)按類型名稱拖動(dòng)可進(jìn)行自定義排序。

2. 設(shè)計(jì)思考：

較為主流的音樂和直播平臺(tái)，通常會(huì)有較大的信息密度，因此對(duì)內(nèi)容的分區(qū)就顯得十分重要。不同用戶對(duì)內(nèi)容的喜好不盡相同，所以頁面標(biāo)準(zhǔn)化的分區(qū)列表排序在真實(shí)的使用場(chǎng)景里并不能為所有用戶提供最佳體驗(yàn)?？峁芬魳穼⒅辈ツK頂部導(dǎo)分類設(shè)計(jì)成用戶可自定義的模式，點(diǎn)擊下拉箭頭會(huì)出現(xiàn)分類列表，長(zhǎng)按類別名稱直接拖動(dòng)到想要調(diào)整的位置就可以自己排列類別的先后順序了。簡(jiǎn)單的拖拽動(dòng)作直接且易操作，提示信息也給用戶的操作提供了清晰的引導(dǎo)，靈活的自定義機(jī)制，給用戶帶來便捷性的同時(shí)也感受到更具情感價(jià)值的定制體驗(yàn)。用戶每次進(jìn)入都能快速的找到自己想要的內(nèi)容，提高效率、用戶粘性及活躍度，強(qiáng)化了產(chǎn)品在用戶心中的認(rèn)知度。

「悅跑圈」首頁右上角的動(dòng)態(tài)簽到提醒

1. 產(chǎn)品體驗(yàn)：

• 進(jìn)入悅跑圈首頁，右上角會(huì)有日歷/列表圖標(biāo)，以動(dòng)效的形式來回切換吸引我們觸發(fā)簽到；
• 完成簽到后，回到首頁，右上角只顯示一個(gè)列表圖標(biāo)，并且在圖標(biāo)里增加了對(duì)勾的標(biāo)記。

2. 設(shè)計(jì)思考：

簽到功能如今在眾多的應(yīng)用中基本是最常見的功能了，主要通過連續(xù)簽到來獎(jiǎng)勵(lì)用戶，給予一定簽到禮物作為回報(bào)來增加用戶的粘性及使用頻率。不過在視覺交互上大同小異，基本通過簽到入口進(jìn)入，簽到完成收到獎(jiǎng)勵(lì)就算結(jié)束了，沒有深挖細(xì)節(jié)之道，轉(zhuǎn)化率也隨之降低。

悅跑圈通過雙圖標(biāo)+動(dòng)效的視覺引導(dǎo)方式吸引用戶去簽到，相比靜態(tài)簽到入口，動(dòng)態(tài)比靜態(tài)更加吸引眼球，增加視覺關(guān)注度，具有更強(qiáng)的視覺沖擊力，也體現(xiàn)了趣味化的表達(dá)，更好的引導(dǎo)用戶操作，另外動(dòng)效也能增添產(chǎn)品的溫度，提高用戶的簽到完成度。在簽到完成后，右上角只顯示一個(gè)列表圖標(biāo)并且增加了對(duì)勾的標(biāo)記，有區(qū)別于未簽到圖標(biāo)，是為了更好的提示用戶已簽到完成，避免因忘記是否簽到而再次點(diǎn)擊進(jìn)入的無效操作，為用戶節(jié)省時(shí)間使其體驗(yàn)更多其他功能。

「騰訊QQ、微信」底部聊天框不一樣的工具欄

1. 產(chǎn)品體驗(yàn)：

• QQ底部欄：語音/圖片/拍照/紅包/表情/延展，5個(gè)置頂常用功能+23個(gè)延展隱藏功能；
• 微信底部欄：語音/表情/延展，2個(gè)置頂常用功能+11個(gè)延展隱藏功能。

2. 設(shè)計(jì)思考：

在社交產(chǎn)品中，微信和QQ一直占領(lǐng)著第一和第二的位置，獨(dú)領(lǐng)風(fēng)騷，雖然同樣是即時(shí)通訊產(chǎn)品，微信與QQ的底部輸入欄為什么會(huì)有如此大的差別呢？

在QQ宣傳語「每一天樂·在·溝·通」中，強(qiáng)調(diào)溝通的同時(shí)還突出了樂的重要性。QQ 用戶群體較年輕，而且社交群體多樣化，因此發(fā)表情圖片，語音功能變聲，相機(jī)濾鏡表情，紅包有不同功能增加溝通時(shí)的互動(dòng)性，在滿足基礎(chǔ)的溝通交流上還要滿足年輕人對(duì)于新鮮事物的探索。根據(jù)使用人群的不同，功能的表達(dá)方式上也有明顯的不同，QQ 功能更是「放」，直接展示功能吸引用戶使用，這樣的底部功能在變化上更符合年輕化的氣質(zhì)。

微信主要作為熟人社交，在溝通的過程中比較注重溝通的效率和專注度，目標(biāo)和主題都是較為明確的。微信所面對(duì)的，特別是中老年人用戶，學(xué)習(xí)成本不能過高，所以不適合有太多的內(nèi)容，避免給用戶到來困擾或誤操作，需要調(diào)性更穩(wěn)，懂得克制。在表達(dá)方式上更懂得「收」，弱化次級(jí)功能，強(qiáng)化主要功能。

其實(shí)在設(shè)計(jì)中，并沒有絕對(duì)的標(biāo)準(zhǔn)，我們?cè)谠O(shè)計(jì)同類產(chǎn)品時(shí)，參考或者借鑒需要適度，并非優(yōu)秀的視覺表現(xiàn)就一定適合自己的產(chǎn)品。重要的是，我們有沒有主動(dòng)去了解其背后的邏輯、面對(duì)的用戶人群以及公司的產(chǎn)品戰(zhàn)略，思考是否適合當(dāng)前產(chǎn)品的調(diào)性，而非僅僅視覺上的表現(xiàn)。

「優(yōu)酷」高效的浮窗設(shè)計(jì)

1. 產(chǎn)品體驗(yàn)：

在優(yōu)酷的視頻播放頁面，可以將當(dāng)前正在播放的視頻調(diào)整為浮窗播放，使用其他功能時(shí)，視頻播放不受影響；

2. 設(shè)計(jì)思考：

在這個(gè)信息大爆炸的時(shí)代，很多正在發(fā)生或者即將發(fā)生的重要信息都會(huì)通過各種渠道給廣大用戶呈現(xiàn)出來，視頻也不例外。我們?cè)诳匆曨l的同時(shí)，也在看該視頻其他方面信息的延展，比如吃瓜群眾不同見解的評(píng)論，或者為了節(jié)省時(shí)間提前找好下一個(gè)視頻。這時(shí)候就面臨一個(gè)很大的問題，在看其他信息時(shí)需要暫停當(dāng)前視頻來避免錯(cuò)過精彩時(shí)刻，在找其他視頻的時(shí)候需要退出當(dāng)前視頻，尤其是對(duì)于沒有開通VIP的用戶，近乎100秒的廣告就足以讓導(dǎo)致放棄再次觀看，這時(shí)候，如果某個(gè)產(chǎn)品能節(jié)省用戶的時(shí)間，無疑就占得了先機(jī)。

使用優(yōu)酷App觀看視頻時(shí)，可以點(diǎn)擊對(duì)應(yīng)圖標(biāo)，將當(dāng)前正在播放的視頻調(diào)整為浮窗播放，這樣瀏覽其他內(nèi)容時(shí)絲毫不影響當(dāng)前視頻的播放。浮窗位置任意拖動(dòng)，會(huì)自動(dòng)吸附在屏幕的兩側(cè)，可隨時(shí)關(guān)閉。點(diǎn)擊浮窗可再次回到該視頻的播放詳情頁面，減少了用戶的很多操作步驟，節(jié)省時(shí)間成本，同時(shí)還避免了用戶因需要重新播放而放棄的可能性，延長(zhǎng)用戶的使用時(shí)長(zhǎng)而增加用戶的粘性，讓產(chǎn)品進(jìn)一步得到用戶的認(rèn)可。

「高德地圖」組隊(duì)開車 | 邊開邊聊

1. 產(chǎn)品體驗(yàn)：

• 自駕使用高德地圖，設(shè)置好起止位置后，選擇組隊(duì)出行，可隨時(shí)查看自己與隊(duì)友之間的距離；
• 在組隊(duì)駕駛過程中，可隨時(shí)與隊(duì)友語音對(duì)話，方便交流，單條語音消息不超能過30秒。

2. 設(shè)計(jì)思考：

提到高德地圖，相信咱們每一個(gè)人都不會(huì)陌生，日常用來導(dǎo)航，也可以用來打車，一次呼叫多種車型，非常方便。高德背靠阿里，服務(wù)功能十分強(qiáng)大，更新路況信息很快，是屬于市區(qū)/外導(dǎo)航最好的選擇。縱然如此，也從未停滯，一直在致力于給用戶提供更好的服務(wù)而不懈的努力。

高德地圖推出「組隊(duì)」模式，可以在設(shè)置好導(dǎo)航路線之后，選擇「組隊(duì)」選項(xiàng)創(chuàng)建新隊(duì)伍或直接輸入他人分享的口令加入隊(duì)伍，這樣可以讓春節(jié)組隊(duì)回家或者自駕出游時(shí)，在多人組隊(duì)的情況下為用戶提供實(shí)質(zhì)性的便捷，在地圖上可以看到導(dǎo)航圖中其他同行隊(duì)友的行車狀況。在10.55.1版本更新后，更是上線了語音消息對(duì)話功能，方便交流，當(dāng)有同伴走錯(cuò)路時(shí)，可及時(shí)提醒和溝通，避免自駕過程中有人掉隊(duì)的情況發(fā)生。

「淘寶」讓人欲罷不能的購物車滿減、領(lǐng)券提醒

1. 產(chǎn)品體驗(yàn)：

在淘寶將自己喜歡的商品添加到購物車，去購物車結(jié)算，可以通過增加商品達(dá)到滿減條件即可減掉對(duì)應(yīng)的金額，同時(shí)還能領(lǐng)取店鋪優(yōu)惠券，與跨店滿減同時(shí)享受雙重優(yōu)惠。

2. 設(shè)計(jì)思考：

淘寶作為當(dāng)前最為主流的電商平臺(tái)，在用戶心理方面的研究可謂是下足了功夫，每當(dāng)我們可能要放棄購買時(shí)，就會(huì)來一劑猛藥，防不勝防，即使我們離開了，它也有本事把我們給弄回來。

購物車是決定用戶轉(zhuǎn)化的關(guān)鍵位置，淘寶首先根據(jù)大部分用戶的占小便宜心理，通過滿減讓利的方式去吸引消費(fèi)者，減掉的數(shù)額越高，就越能引起用戶的注意力和購買欲望，然后通過店內(nèi)優(yōu)惠券再次引爆用戶感性消費(fèi)的欲望。當(dāng)雙重優(yōu)惠聚集在一起，這種占小便宜心理就會(huì)升級(jí)為貪婪，不僅能提升轉(zhuǎn)化，還有可能促使用戶挑選更多商品以達(dá)到滿減優(yōu)惠的條件，不管商品是否為己所需。待成功下單后，還會(huì)讓用戶有種占了便宜的感覺，增強(qiáng)了粘性，也給用戶帶來了心理上的滿足感。

本期產(chǎn)品細(xì)節(jié)分享結(jié)束，我們下期再見。

歡迎關(guān)注作者微信公眾號(hào)：「能量眼球」