新版本的改動介紹

在9月底雙十一臨近的關(guān)口上，淘寶上線了 9.13 新版本，對首頁做出了巨大的改版，堪稱這 5 年來力度最大的改版幅度。

我們先來簡單看看新版本有哪些重要的改進(jìn)：

• 去掉了分類分頁器
• 頂部輪播圖下移，改成豎狀的
• 減少瓷片區(qū)的數(shù)量，進(jìn)行卡片化分離
• 刪除推薦商品瀑布流的分頁器
• 推薦商品卡片的類型調(diào)整
• 商品卡片不再直接跳轉(zhuǎn)詳情頁

如果只是通過視覺角度上來看，新改版必然是比過去的老版本 “清爽” 得多，畢竟精簡掉了大量的內(nèi)容。尤其是兩個分頁器組件，除了占空間外，實在找不出什么要去點擊的必要。

輪播圖從頂部撤離和瓷片區(qū)進(jìn)行合并，是一個比較有趣的設(shè)定，不僅廣告圖的面積減少，而且營銷推薦位全部集中到一起，使得模塊的劃分更集中。

現(xiàn)在的首頁從上到下的結(jié)構(gòu)即：

• 搜索欄
• 業(yè)務(wù)入口
• 營銷模塊
• 推薦瀑布流

如此化繁為簡的改造發(fā)生在淘寶APP身上，就像看一出浪子回頭的感人戲碼…

但不要這么容易被結(jié)構(gòu)上的改造欺騙，改版后的淘寶降低了模塊的數(shù)量，但只是把減少的元素在其它地方呈現(xiàn)。即這次改版的重點——推薦瀑布流。

細(xì)心的同學(xué)應(yīng)該都發(fā)現(xiàn)了，瀑布流卡片已經(jīng)出現(xiàn)在了第一屏的底部，即使不用上滾也可以看見卡片的頭部了。

并且瓷片區(qū)也采用了瀑布流式的雙列布局，通過瓷片區(qū)白色背景的襯托，這半截露出的圖片反而顯得越發(fā)顯眼，越能吸引我們控制不住自己去上滾一下康康推薦了什么東西。

當(dāng)我們開始瀏覽瀑布流的推薦內(nèi)容以后，淘寶夾帶的大量私貨就進(jìn)來了，我們來統(tǒng)計下總共有哪些類型：

實際的卡片類型，可能還不止我羅列出來的這些。這個本來是用來推薦商品的列表，已經(jīng)演化成一個聚合了算法推薦內(nèi)容的 “巴別塔”。

而其中最重要的商品卡片，甚至也不能直接點擊就跳轉(zhuǎn)到商品詳情頁中，而是添加了一個中轉(zhuǎn)頁面，進(jìn)一步根據(jù)算法推薦相關(guān)商品，能直接跳轉(zhuǎn)進(jìn)詳情頁的少數(shù)商品卡片，應(yīng)該是有做廣告投放的定向?qū)Я鳌?/span>

這樣改版后的目的，不難分析出目的是為了進(jìn)一步增加用戶 “逛淘寶” 的幾率和時間，讓本來打開應(yīng)用就搜索—購買—關(guān)閉一條龍的用戶，也會不自覺陷入信息流的海洋中去。

可能很多人會覺得，難道不應(yīng)該讓流程更短，購買步驟更容易，才符合優(yōu)秀交互設(shè)計的定義嘛？

下面我們就做一些具體的分析吧！

關(guān)于新設(shè)計的思考

對于一個商業(yè)應(yīng)用來講，交互不是為了無條件迎合用戶的，雖然無論是 UX 還是 UED 的概念里，都愛強調(diào)用戶至上論，體驗為王之類的。但是…

1. 商業(yè)訴求 > 用戶體驗

只有在用戶量高速擴張，商業(yè)目標(biāo)是需要用戶獲得良好體驗、口碑的情況下，用戶體驗的重要性才和大家在童話里了解的一致。更多的時候，是產(chǎn)品想喂用戶吃金坷垃時，我們要想辦法讓用戶心甘情愿的吃下去并快速成癮。

淘寶通過不同的方式獲取了大量用戶的數(shù)據(jù)，資料、喜好、購物傾向等等，在龐大的商品數(shù)支撐下，可以通過算法給你推薦無窮無盡的商品，總有你會感興趣的部分。

只要增加了信息流的曝光次數(shù)，不要讓用戶那么快完事，過早的陷入剁手的悔恨，抽起事后煙……

那么他們就會被這種簡單的產(chǎn)品形式俘獲，做多巴胺的奴隸。抖音是這樣的、微博是這樣的、知乎也是這樣的。為什么一個購物應(yīng)用不想著最快的方式促成交易，而是讓用戶在里面繞圈子，原因也只能有一個 —— 流量。

大家都知道雙十一將近，各家電商平臺作妖時間又到了。但這兩年的電商行業(yè)已經(jīng)發(fā)生了巨大的改變，那就是直播、短視頻帶貨形式帶來的變局。

這兩年，以抖音、快手為代表，興起的短視頻、直播帶貨風(fēng)潮，已經(jīng)成社會的熱門話題，薇婭沒事就在綜藝?yán)锖蛺鄱箓円黄饚ж?，李佳琦身體有恙上微博熱搜，羅永浩靠帶貨上演 “真還傳”……

本來，購物方式的多元化，對于大型平臺來講是非常有幫助的。無論是十幾年前就開始出現(xiàn)的社會化電商平臺、返利網(wǎng)、或值得買，都可以促進(jìn)電商行業(yè)的繁榮，促進(jìn)平臺和整個產(chǎn)業(yè)鏈的發(fā)展。

但是，直播、短視頻的興起和過去的這些行業(yè)全部不一樣，它們本身并不依附于電商平臺，但卻擁有海量的流量和用戶基數(shù)。而當(dāng)這樣的流量引擎在變現(xiàn)問題聚焦在電商時，直播和短視頻頭部平臺就有了和電商平臺們叫板的資格。

2. 直播電商規(guī)模，不算短視頻

主流的數(shù)據(jù)預(yù)測報告中，20年的直播電商規(guī)模都會達(dá)到萬億級別，直播電商的高速發(fā)展是沒法阻擋的大趨勢，它的發(fā)展會搶奪存量用戶的注意力，有大量的用戶購物逛商品，不在淘寶APP內(nèi)，而是通過其它平臺轉(zhuǎn)化，再進(jìn)來下單，或干脆在外部下單，這是絕對不能被容忍的。

所以淘寶不僅要緊跟趨勢，也要對抗外部的競爭，在今年加大對短視頻、直播的投入，也就順理成章。根據(jù)淘寶研究院的數(shù)據(jù)，過去三年直播帶貨的規(guī)模增長在 150% 以上，是全球增長最快的電商模式。

同時，雙十一的直播觀看用戶 18 年為 1793 萬人次，19 年為 4133 萬人次，同比增長 131%，對比 618 數(shù)據(jù)，毫無疑問今年肯定也會保持的增長。

并且前幾年淘寶雙十一喜歡玩的病毒式推廣活動成效已經(jīng)越來越差，再讓用戶去集福，首頁上增加一大堆煙花繚亂的游戲和活動，已經(jīng)不能再幫助雙十一獲得快速的增長了。

所以今年，淘寶在國慶前，上架了首頁新版本的設(shè)計，在應(yīng)用形態(tài)上押寶信息流的算法推薦機制。不僅要開始改變用戶使用淘寶的習(xí)慣，也在為后續(xù)的雙十一做預(yù)熱，相信屆時會有大量的直播內(nèi)容露出和短視頻推薦。

至于還有什么新花樣或殺手锏還沒秀出來，我們就拭目以待吧……

文章來源：優(yōu)設(shè)    作者：超人的電話亭

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

蘋果在2019年6月發(fā)布的iOS13中增加了“黑暗模式”，用戶打開“黑暗模式”后，應(yīng)用界面將會變?yōu)樯钌?，隨后Google Android 10的發(fā)布同樣搭載“黑暗模式”。為了適配系統(tǒng)，不少APP紛紛推出了深色模式。

使用OLED屏幕的設(shè)備，在純黑色下可以有效降低耗能，進(jìn)一步延長續(xù)航時間。除此之外，深色模式還可以有效解決OLED屏燒屏、費眼的問題。小摹對幾款常用APP的深色模式進(jìn)行了體驗，并為大家分享我的體驗感受。從這些案例中，或許我們可以找到深色模式流行的原因。

微 信

深色模式是一種可以降低視覺疲勞且有助于用戶專注的全新外觀。與傳統(tǒng)夜間模式最大的區(qū)別是，深色模式不僅保證了弱光環(huán)境下的體驗，在強光下仍具有可讀性。

雖然深色模式也被叫做暗黑模式，但并不代表要將底色變?yōu)榧兒?。如果使?00%的純黑底色，長時間閱讀時，反而會造成眼睛疲勞。微信的深色模式里，聊天背景及主頁面底色采用的就不是純黑，而是深灰色。

此外，純黑和純白的高對比度也會造成視覺疲勞，因此微信的深色模式中，使用了淺灰色作為字體顏色，既能保持清晰顯示，又降低了對比度，減輕了用戶的閱讀負(fù)擔(dān)。如果設(shè)置了聊天背景，聊天背景圖片也會自動調(diào)暗，便于閱讀。

雖然整體色彩加深，但微信在設(shè)計時仍保持著清晰的層次。比如置頂聊天窗口的灰色會比其他窗口稍淺，聊天消息的標(biāo)題和摘要也采用了明度不同的淺灰色來區(qū)分層級。除此之外，微信的彩色線型圖標(biāo)在黑色背景上也變得更具科技感，顏值提升了不少。

微信的深色模式除了可以幫助用戶緩解夜間視力疲勞外，在白天使用也幾乎沒有障礙，總體來說，體驗感覺較好。

Q Q

如果說微信的深色模式更加注重顏值，那么騰訊旗下的另一款社交工具QQ則更加注重用戶的深夜閱讀體驗。

首先，微信在切換深色模式時，需要重啟軟件后才能生效。QQ在切換夜間模式時，則采用了一個平滑的漸變過渡，讓用戶可以快速適應(yīng)場景切換。其次，為了減少夜間光線對人眼的刺激，QQ降低了信息與背景的對比度，對用戶頭像等圖片增加了遮罩，使其在弱光環(huán)境中看起來更加柔和。

當(dāng)用戶開啟夜間模式時，還會有一個設(shè)計彩蛋：部分圖標(biāo)會根據(jù)模式切換而改變。如消息圖標(biāo)會從笑臉切換為休息的狀態(tài)，這種具有趣味性的設(shè)計，也會拉近用戶與產(chǎn)品之間的距離。

豆 瓣

普通模式下的豆瓣APP背景色為純白色，白天看偶爾都覺得有些刺眼，更不用說睡前必刷豆瓣的用戶有多煎熬。在被用戶罵了一輪又一輪之后，豆瓣APP終于也推出了夜間模式。

豆瓣的夜間模式和微信一樣，同樣保留了五顏六色的圖標(biāo)。同時，豆瓣在設(shè)計時始終保證內(nèi)容有良好的對比度和清晰的視覺層級，保證了信息結(jié)構(gòu)的準(zhǔn)確傳達(dá)。

在配色方面，為了避免“死黑”讓整個界面太過死板，豆瓣在黑色中還混入了藍(lán)紫色，讓背景色看上去更加通透。底部導(dǎo)航等主要按鈕則使用了豆瓣的主色調(diào)綠色，在夜間模式下既能清晰展示，又不會顯得過于刺眼，同時也保證了在強光模式下可以正常瀏覽。

知 乎

另一款社區(qū)APP知乎和豆瓣存在同樣的問題。知乎在設(shè)計夜間模式時，知乎采用了主色調(diào)藍(lán)色+深灰色的搭配，深藍(lán)和灰色作為背景，展示出的效果既有強烈的對比，又?jǐn)[脫了深色的壓抑感。

與豆瓣不同，知乎的文本顏色選擇了對比度更低的灰色，通過字重進(jìn)行區(qū)分。雖然這樣會讓整體頁面看起來比較和諧，但內(nèi)容變得不夠突出，無法在最短時間看清標(biāo)題，對于一個以內(nèi)容為主的社區(qū)來說，無疑會給用戶帶來不太好的體驗。

知乎在設(shè)計夜間模式時目標(biāo)應(yīng)該很明確，即只考慮用戶在夜間的使用，因此整體色調(diào)都很暗，在強光環(huán)境下無法正常瀏覽。

bilibili動畫

B站剛推出深色模式時收到了許多批評，字體和背景色對比不強，視頻封面仿佛蒙了一層霧，一刀切的暗化處理，導(dǎo)致用戶瀏覽體驗極差。

在最近一次更新中，B站終于對深色模式進(jìn)行了優(yōu)化，適度提亮了視頻封面和圖標(biāo)的亮度，將多彩型圖標(biāo)調(diào)整為了單線型圖標(biāo)，既統(tǒng)一了畫面風(fēng)格，又提升了界面閱讀體驗。

設(shè)計深色模式時，必須注意各頁面的配色及對比度都要盡可能地統(tǒng)一。在深色模式下點開B站創(chuàng)作中心或推薦服務(wù)中的版塊時，加載畫面仍然是白色，突然出現(xiàn)的強光無疑會對眼睛造成刺激，對于用戶來說體驗感也極差。

百度網(wǎng)盤

高飽和度的色彩會在深色背景上產(chǎn)生炫光的視覺效果，引發(fā)視覺疲勞。百度網(wǎng)盤的深色模式下，背景接近全黑，圖標(biāo)卻沒有太大的調(diào)整，給用戶帶來的閱讀體驗并不好。

同樣，由于背景顏色太深，導(dǎo)致百度網(wǎng)盤的文本和背景對比度太大，也存在難以閱讀的情況，對于誦讀困難癥患者來說，在閱讀時會感覺文字在旋轉(zhuǎn)、模糊。

在設(shè)計深色模式時，除了背景顏色盡量使用深灰色以外，還需要確保絕大部分區(qū)域保持深色，盡可能使用數(shù)量有限的色彩。把握好對比度和飽和度，才能設(shè)計出舒適的深色模式。

綜上所述，合理使用深色模式，可以降低屏幕亮度，不僅可以減少耗電量，還能減小對自己或他人眼睛的刺激。除此之外，深色模式對背景色、文字以及系統(tǒng)圖標(biāo)的顏色都進(jìn)行了優(yōu)化處理，可以提升閱讀舒適度。對于喜歡深色或黑色系的朋友來說，深色模式更是一種不同于普通模式的全新體驗。

除了APP，不少生產(chǎn)力工具也都采用了深色界面，比如PS、摹客等。以摹客為例，用戶在進(jìn)行設(shè)計時，深色界面不僅僅能降低眼睛疲勞度，還能突出你的設(shè)計內(nèi)容，打造沉浸式的設(shè)計體驗。

隨著蘋果“黑色模式”的推出，深色模式逐漸成為APP設(shè)計的流行趨勢。作為設(shè)計師，也一定要掌握APP深色模式的設(shè)計技巧。從上述APP設(shè)計案例中，我為大家總結(jié)了以下幾點建議以作參考：

1.避免使用純黑色；

2.避免使用高飽和度的顏色；

3.文本顏色選用高亮色，但不宜使用純白；

4.做好情感化設(shè)計；

5.注意結(jié)構(gòu)和層次感；

6.允許用戶自由切換深色模式和普通模式。

文章來源：UI中國  作者：摹客產(chǎn)品協(xié)作設(shè)計

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

所謂的“左右橫滑”交互英文名叫做“Horizontal Scrolling Lists”，最早可能起源于 Windows Phone 的橫向內(nèi)容滑動設(shè)計。用于在同一個頁面的 X 軸方向拓展內(nèi)容空間，“左右橫滑”的交互方式被廣泛應(yīng)用于各類 App 中。

橫向滑動要解決什么問題？

橫向滑動作為手勢交互的一個拓展，目的初衷是提升信息“內(nèi)容和操作”的拓展性。

1. “內(nèi)容”拓展性：

移動端的任何類型頁面內(nèi)容都可能無法在一個界面呈現(xiàn)完整，因此滑動去呈現(xiàn)更多的內(nèi)容，常見的當(dāng)然是縱向滑動。但它無法承載所有類型內(nèi)容呈現(xiàn)的問題，這個時候就需要橫向滑動來解決。

2. “操作”拓展性：

當(dāng)一個頁面的內(nèi)容已經(jīng)是固定完整的，這時候需要用戶進(jìn)行一些行為操作，如常見的下載、刪除、添加、管理…,而這些行為如果直接呈現(xiàn)在界面上必然導(dǎo)致混亂，因此需要配合一些橫向滑動激發(fā)這些行為，從而保證界面的流暢體驗。

目前橫向滑動的典型設(shè)計場景及利弊分析

橫向滑動從移動端手勢出現(xiàn)到現(xiàn)在十幾年的時間已經(jīng)有了非常典型的使用場景，接下來我們就來列舉一下有哪些常見的類型：以下從「清晰度、效果」兩個緯度進(jìn)行分解

1. 入口型橫滑切換（手機主頁app、各大電商入口、banner…）

解決內(nèi)容拓展問題

這類場景通常是用戶最熟悉的，不論從認(rèn)知清晰度、效果角度都是不錯的，主要原因是場景曝光度非常高、頻次非常高；比如Android\ios首頁橫滑切換app入口每天上百次的操作頻次；

2. 內(nèi)容型橫滑切換（微視、垂直電商、地圖）

解決內(nèi)容拓展問題

這類切換方式適合內(nèi)容相對聚焦和單一的產(chǎn)品，比如垂直類電商：wish、唯品會，所有內(nèi)容僅僅是通過類目來區(qū)分的產(chǎn)品；微視：內(nèi)容統(tǒng)一為小視頻…;百度地圖：橫滑查看更大范圍地圖…;由于內(nèi)容的高度統(tǒng)一和整合，因此切換難度低，但在認(rèn)知的初期會稍有一定的門檻，原因是大部分app都是縱向滑動feeds流，而且用戶記憶是海馬記憶，不會特別清楚記得app的操作，所以新打開app和新用戶會有一個認(rèn)知過程，但門檻不高。

3. 隱藏操作喚起

解決操作拓展問題（管理列表、IM列表、通訊錄list…）

解決操作問題

在所有類型中的橫滑，只有這種方式不是瀏覽型手勢而是操作型，通常這類功能隱藏在列表中，為了保證列表信息的有效性和美觀度，選擇隱藏操作功能，由于是低頻操作，所以初期需要用戶發(fā)現(xiàn)并成功使用該功能；不過目前很多l(xiāng)ist頁面都采用這種通用的交互手勢，因此用戶并不難發(fā)現(xiàn)。

4. 模塊內(nèi)容橫滑切換（餓了嗎\品質(zhì)優(yōu)選）

最復(fù)雜也是最容易出現(xiàn)問題的

解決內(nèi)容拓展問題

這是最容易出錯的一種場景，就是在整個界面中只有一個模塊采用橫向滑動，而其它內(nèi)容又是縱向feeds流滑動；由于移動端內(nèi)容的路徑多、入口多，因此用戶的核心操作流是：找入口——看信息——做任務(wù)；在這個過程中任何一個隱晦的、不常見的交互都很容易被用戶忽略，比如說：餓了么品質(zhì)優(yōu)選、唯品會二級類目、去哪兒旅游推薦…，這些案例其實是為了橫向空間拓展更多的內(nèi)容而做此選擇，但通常情況下隱藏內(nèi)容點擊率會驟降，很少有用戶耐心的橫滑瀏覽完成，因此設(shè)計師要嚴(yán)格把控數(shù)量以及內(nèi)容的質(zhì)量；在這里還有一種情況是很嚴(yán)重的，就是模塊級的橫滑內(nèi)容與縱向列表之間有疊加交互，就會導(dǎo)致用戶反復(fù)在2中操作中完成任務(wù)，這一點非常不建議使用此手勢，當(dāng)然以下案例并沒有這種情況。

橫向滑動的優(yōu)點

1. 幾乎能夠100%適配到所有設(shè)備，保持了一致性

2. 為二級信息提供了展示空間，并且不占用頁面空間。

比如在圖片畫廊里的圖片，橫向滑動可以讓用戶預(yù)覽內(nèi)容，可以劃過或者點擊查看。

3. 橫向滑動節(jié)約了縱向屏幕空間。

而不是將所有內(nèi)容都展示在一個很長的頁面?？v向布局讓所有的信息都成小塊展示。但是橫向滑動更加靈活?，F(xiàn)在，內(nèi)容可以在橫向和縱向兩個方向同時展示。

4. 橫向滑動可以讓用戶預(yù)知分類里的內(nèi)容，通過往一邊滑、向下滑，差不不同類別的內(nèi)容。

兩個維度讓用戶可以在同一個界面中看到更多的類別和選擇。

5. 橫向滑動的內(nèi)容需要保持高質(zhì)量和持續(xù)吸引力才能提升點擊轉(zhuǎn)化。

慎用左右橫滑設(shè)計？

1. 挑選合適的使用場景

單頁多維度的信息結(jié)構(gòu)是“左右橫滑”最適合的應(yīng)用場景。傳統(tǒng)的 List 適合縱向無限呈現(xiàn)單一屬性的內(nèi)容（比如朋友圈或知乎的回答），而對于 App 首頁等多種信息聚合的頁面，就適合橫向開拓內(nèi)容維度。

2. 顯眼并適宜的主題展示

3. 引導(dǎo)左右滑動（可見性）

4. 控制數(shù)量并避免極限情況

5. 低效率和錯誤的優(yōu)先級

設(shè)計師們都喜歡“左右橫滑”的設(shè)計，不僅因為信息密度大，頁面層次好梳理，更多也是因為操作方式“酷”。但有經(jīng)驗的設(shè)計師會盡可能拒絕“左右橫滑”，因為它的效率還是太低。而效率低，體現(xiàn)在兩個方面：

首先，就像上面說過的，更多的小白用戶對左右滑動的預(yù)期并不強，還是更加適應(yīng)縱向滑動的傳統(tǒng)交互方式。違反了“Don’t Make Me Think”的基本原則。

其次，縱向和橫向優(yōu)先級常常導(dǎo)致預(yù)期錯誤。以下圖 App Store 為例，所謂的內(nèi)容都是 App，泳道只是用不同的維度把 App 組織起來。

如果你要購買其中一個資源位，你要更高優(yōu)先級“泳道”中的第二屏位置，還是低優(yōu)先級“泳道”中的第一屏位置呢？

文章來源：優(yōu)設(shè)   作者：Jingwhale Design

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

個人中心作為app類的重要頁面，無論是交互設(shè)計師還是視覺設(shè)計師，都需要對個人中心的設(shè)計過程做到胸中有數(shù)，本文就“個人中心”版塊進(jìn)行分析與總結(jié)，一起進(jìn)步。

文章來源：站酷

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

手機UI中的交互是保持產(chǎn)品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋，認(rèn)知布局，增強體驗感和沉浸感。

手機UI中的交互是保持產(chǎn)品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋，認(rèn)知布局，增強體驗感和沉浸感。這里為大家整理了一些優(yōu)秀并富有創(chuàng)意的交互作品，為你的產(chǎn)品設(shè)計注入靈感。

--精美時尚的天氣??手機app--

--精美時尚的天氣??手機app--

--精美時尚的天氣??手機app--

--手機appUI設(shè)計--

 （以上圖片均來源于網(wǎng)絡(luò)）

 藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

  更多精彩文章：

       手機appUI界面設(shè)計賞析（一）

       手機appUI界面設(shè)計賞析（二）

       手機appUI界面設(shè)計賞析（三）

       手機appUI界面設(shè)計賞析（四）

       手機appUI界面設(shè)計賞析（五）

       手機appUI界面設(shè)計賞析（六）

       手機appUI界面設(shè)計賞析（七）

       手機appUI界面設(shè)計賞析（八）

      手機appUI界面設(shè)計賞析（九）

       手機appUI界面設(shè)計賞析（十）

     手機appUI界面設(shè)計賞析（十一）

網(wǎng)頁中超過95%以上的信息都是通過文字的形式呈現(xiàn)。 然而，頁面文字并非毫無章法的隨意呈現(xiàn)。事實上，更具可讀性、視覺效果以及獨特排版和布局的網(wǎng)頁文本設(shè)計，更能吸引用戶，提升用戶愉悅度。這也是為什么越來越多的設(shè)計師日益重視網(wǎng)頁排版設(shè)計的重要原因。

BS界面是基于瀏覽器的界面，隨著人們對于用戶體驗要求的不斷提高，BS界面的設(shè)計要求也越來越高，

接下來為大家分享一下我收集到的案例：

（以上圖片均來源于網(wǎng)絡(luò)）

  藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

  更多精彩文章：

       ui界面設(shè)計之網(wǎng)站設(shè)計案例欣賞(一)

       超贊的創(chuàng)意頁面排版設(shè)計，打造“視”不可擋的網(wǎng)頁設(shè)計

“個人主頁”是一個聽起來很熟悉，但又跟“個人中心”傻傻分不清楚的一個模塊，一般情況下處于APP底Tab的最右邊，通常喊它為“我的”。

這個界面看似沒什么挑戰(zhàn)可言，給設(shè)計師一種“不就是排排版的事兒嘛”的膨脹誤解，認(rèn)為完全在自己射程范圍內(nèi)，整個人都有點飄。

但最近發(fā)現(xiàn)，它并不像表面所呈現(xiàn)出的那么簡單，其實里面有很多小揪揪需要深挖和思考，所以千萬不能小瞧它。

好，廢話不多說，上才藝。

 個人主頁和個人中心的區(qū)別是？ 

講“個人主頁”前，先跟大家捋一下它倆的區(qū)別，避免混淆。首先，并沒有官方定義它們的名字，只是喊的人多了也就成了它們的名字了。

所以“個人主頁”也好、“個人中心”也罷，只是大家習(xí)慣性稱呼，為了合作過程中大家在同一個話語體系，提效而已。

要說它們倆的區(qū)別，其實還是有的。

 什么是個人中心？

個人中心，承載著自己賬號信息、設(shè)置管理、福利信息等功能的聚合地，主要用于個人信息的管理。

它常見于“工具類”產(chǎn)品中，如下：

對于“個人中心”，設(shè)計師要考慮的最核心是：如何解決“效率”問題。因此信息布局合理，視覺盡可能減少干擾，變得格外重要。

什么是個人主頁？

個人主頁，一般承載著用戶個人信息、個人影響力、生產(chǎn)的內(nèi)容等等，以此突顯自己魅力或定位。

常出現(xiàn)在內(nèi)容、社交、社區(qū)類產(chǎn)品中，比如以下產(chǎn)品：

當(dāng)然，還有一些產(chǎn)品，它既包含“個人中心”，也包含“個人主頁”，如下：

整體來看，“個人中心”偏向于個人信息的管理，更關(guān)注于“效率”；而“個人主頁”偏向于展示自我，關(guān)注點更“多元”，會復(fù)雜一些，下面會細(xì)講。搞明白了它們的區(qū)別之后，大家會發(fā)現(xiàn)“個人中心”相對更簡單一些。

所以，這次我們先聚焦聊聊“個人主頁”。

 設(shè)計“個人主頁”前思考什么？

在工作中，做任何需求都應(yīng)該有其目的或目標(biāo)，不然所有的忙碌都容易淪為資源的浪費。“個人主頁”也應(yīng)有其價值和使命。

像上一趴所說，“個人主頁”是為了讓用戶突顯或塑造自己的魅力，很像是一個人的“個人名片”。那么，用戶塑造個人魅力對產(chǎn)品有什么價值和收益呢？目標(biāo)是什么呢？

拿短視頻產(chǎn)品舉例：如果用戶能夠在“個人主頁”充分展現(xiàn)自己的才華和魅力，從而帶來了更多瀏覽者的“關(guān)注”，那他們就更有動力分享或生產(chǎn)優(yōu)質(zhì)內(nèi)容，進(jìn)而使產(chǎn)品內(nèi)容更加豐富；從而吸引更多新用戶的瀏覽、留存。

更多新用戶的加入、瀏覽、留存，讓內(nèi)容生產(chǎn)者有更多的漲粉空間，粉絲規(guī)模做起來之后再進(jìn)行商業(yè)化。

這樣對消費型用戶、內(nèi)容生產(chǎn)者、平臺方都有利，進(jìn)而處于良性循環(huán)。

這就是“個人主頁”背后的大概邏輯和目的。

 如何進(jìn)行“個人主頁”的設(shè)計？

了解完“個人主頁”存在的價值和目標(biāo)之后，那么，作為產(chǎn)品或設(shè)計師們需要幫助用戶解決幾個問題：1.樹立人設(shè)；2.輔助吸粉; 3.助力變現(xiàn)。

 1.樹立人設(shè) 

人為什么需要樹立人設(shè)？

樹立人設(shè)，本質(zhì)上是兩種目的：獲得認(rèn)可（提升關(guān)注/約X），獲得收入（提升變現(xiàn)能力）。

如何幫助用戶快速建立人設(shè)？

個人主頁里有幾個區(qū)域，影響著用戶建立人設(shè)：a.頭圖區(qū)；b.個人信息區(qū)；c.作品區(qū)；

a.頭圖區(qū)

頭圖，指的是“個人主頁”頂部的圖片區(qū)域。

為了讓瀏覽者進(jìn)入“個人主頁”快速了解作者，頭圖這種處理手法，是很多社交/社區(qū)/內(nèi)容類產(chǎn)品，“樹立人設(shè)”的標(biāo)配。

比如：社交類產(chǎn)品的頭圖，用戶要么放自己照片，要么放風(fēng)景；

大V、商家等角色的用戶，會把頭圖打造成自己品牌的招牌，輔助瀏覽者快速了解自己定位。

不過，頭圖尺寸占比要把控好。

尺寸大小會影響界面的“屏效比”和用戶“上傳門檻兒”，對產(chǎn)品核心數(shù)據(jù)也有著千絲萬縷的關(guān)系。

b.個人信息區(qū)

個人信息區(qū)，也是作者的基礎(chǔ)資料。

一般包含著：用戶的昵稱、賬號、簡介、標(biāo)簽、粉絲關(guān)注量、關(guān)系鏈等信息。這個區(qū)域設(shè)計時需要重點考慮“信息親密度”和“信息優(yōu)先級”。

信息親密度：指的是如何將更親近的信息，以信息組的形式傳遞，減少用戶認(rèn)知成本。

比如下圖，常見的社區(qū)或內(nèi)容類產(chǎn)品針對“個人信息區(qū)”的處理方式（同一顏色的色塊代表親密度更強的信息。）

同時，“信息組”與“信息組”之間也需要處理好親密度，比如“小紅書”和“instagram”的“好友關(guān)系鏈”與“關(guān)注按鈕”是放一起的，方便用戶快速作出“關(guān)注”決策。

c.作品區(qū)

作品區(qū)的重要性不用多說了，它是作者“樹立人設(shè)”的重要組成部分，也直接影響著瀏覽者是否愿意關(guān)注的關(guān)鍵因素。

“作品區(qū)”設(shè)計時，有2個重要因素需要考慮：“作品尺寸占比”、“作品信息外顯”。

1）作品尺寸占比:

比如下圖，同樣是短視頻產(chǎn)品，Before作品區(qū)一排僅1個作品，剪映2個作品，而抖音3個作品。

單從排版美丑來評價是不負(fù)責(zé)的，那么如何決策哪種處理手法“對”的呢？

這需要通過自己產(chǎn)品定位分析，以及通過不同布局方式進(jìn)行上線測試，重點觀測核心數(shù)據(jù)（用戶消費時長/作品消費個數(shù)/關(guān)注率等）的影響情況來決策。

2）作品信息外顯:

除了作品本身，它的“輔助信息”也是幫助用戶做決策的重要因素。

比如：“Before”除了對作品熱度信息（瀏覽量、評論量等）外顯以外，更強調(diào)和引導(dǎo)用戶進(jìn)行互動，如：收藏、分享、評論、充電；“剪映”根據(jù)產(chǎn)品屬性，更強調(diào)“使用數(shù)”和“作品的描述文案”；“抖音”作品僅外顯“點贊數(shù)‘，同時通過“置頂”和“剛剛看過”提升用戶決策效率。

以上可以看出，頭圖區(qū)、個人信息區(qū)、作品區(qū)，是讓瀏覽者快速且準(zhǔn)確的了解或關(guān)注內(nèi)容創(chuàng)作者重要組成部分，也是內(nèi)容創(chuàng)作者“樹立人設(shè)”的主要手段。

 2.輔助吸粉 

輔助吸粉，換句話說也是輔助用戶提升“關(guān)注率”。

不可否認(rèn)，清晰的編輯個人信息，產(chǎn)出優(yōu)質(zhì)的內(nèi)容，是用戶吸粉的根本，我們能做的只是“助攻”。

所以，在做此類“個人主頁”時，我們需要通過設(shè)計手段做個靠譜“奶媽”，有幾個維度可以嘗試：a.強化關(guān)注；b.沉淀粉絲。

a.強化關(guān)注

衡量粉絲多少，是通過用戶是否點擊“關(guān)注”了內(nèi)容創(chuàng)作者。

因此身為產(chǎn)品工作人員，在個人主頁設(shè)計時，除了其它信息呈現(xiàn)以外，在不影響頁面信息合理性的情況下，盡可能強化“關(guān)注”按鈕，引導(dǎo)用戶操作。

b.沉淀粉絲

有了粉絲之后，提升粉絲忠誠度和粘性，是每一個內(nèi)容生產(chǎn)者面臨的問題，也是工作人員們需要幫內(nèi)容創(chuàng)作者解決的。

左邊是“快手”，在個人主頁內(nèi)有粉絲群入口；右邊是“火山”，打造自己的“圈子”，粉絲們可以在里面發(fā)自己的動態(tài)，或進(jìn)行互動。

這么做是為了提升內(nèi)容創(chuàng)作者的粉絲粘性，給他們更大的空間去運營粉絲，培養(yǎng)感情，打造更忠誠的私域流量。

 3.助力變現(xiàn) 

除了樹立人設(shè)、輔助吸粉以外，助力他們變現(xiàn)，才能使他們長期扎根于此（留在自己平臺）。不然大V們會帶著自己圈到的粉絲，去別的地兒賺錢，給你的產(chǎn)品帶綠帽子。

拿知乎舉例，內(nèi)容創(chuàng)作者可以在個人主頁掛自己的商品櫥窗，給符合自己人設(shè)的商品帶貨。

也可以開通付費咨詢模塊，通過幫助用戶解答問題實現(xiàn)變現(xiàn)。

除此之外，還可以做付費Live課程。

再來看下像嗶哩嗶哩、抖音、火山、QQ音樂等平臺，在個人主頁都有輔助用戶變現(xiàn)的入口。

下面是“聲撩”，利用用戶聲音的優(yōu)勢去變現(xiàn)，比如：陪打游戲（軟妹子聲音讓王者峽谷的漢子們興奮）、睡前陪聊、睡前連麥等等。

如果你真的很富有，且不想讓妹子陪聊陪打游戲，就是單純的想砸禮物引起注意，右圖可以看出，有個入口是直接“送禮”。

這么做滿足土豪訴求（博取主播注意），滿足主播訴求（變現(xiàn)），滿足平臺訴求（抽成），何樂而不為。

同時，也越來越多了產(chǎn)品不僅解決C端用戶的變現(xiàn)訴求，同時解決B端用戶變現(xiàn)訴求。比如，抖音賦能商家，商家號的“個人主頁”可以自定義tab，默認(rèn)展示“商品”tab。

用戶不僅能在這里消費作品，還能通過作品建立的信任促進(jìn)購買行為。

再比如，instagram也提供B端用戶開店鋪功能。

以上，是關(guān)于“個人主頁”如何助力用戶變現(xiàn)的案例，其實玩法還有很多，這里僅提供一些思路，大家平常玩APP時可以多關(guān)注下。

   總結(jié)   

總的來說，“個人中心”與“個人主頁”最大的區(qū)別在于：“個人中心”主要是“給自己看的”，更注重使用效率。

“個人主頁”主要是“給他人看的”，更注重突顯自己魅力。在滿足使用效率的基礎(chǔ)上，需要通過產(chǎn)品設(shè)計手段幫助用戶“樹立人設(shè)”、“輔助吸粉”、“助力變現(xiàn)”，從而使用戶和平臺實現(xiàn)雙贏，打造一個更完善的生態(tài)。

以上，是“個人主頁”設(shè)計相關(guān)思考，希望對你們有所幫助。

文章來源：UI中國    作者：大牙

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

手機UI中的交互是保持產(chǎn)品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋，認(rèn)知布局，增強體驗感和沉浸感。

手機UI中的交互是保持產(chǎn)品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋，認(rèn)知布局，增強體驗感和沉浸感。這里為大家整理了一些優(yōu)秀并富有創(chuàng)意的交互作品，為你的產(chǎn)品設(shè)計注入靈感。

--手機appUI設(shè)計--

 藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

  更多精彩文章：

       手機appUI界面設(shè)計賞析（一）

       手機appUI界面設(shè)計賞析（二）

       手機appUI界面設(shè)計賞析（三）

       手機appUI界面設(shè)計賞析（四）

       手機appUI界面設(shè)計賞析（五）

       手機appUI界面設(shè)計賞析（六）

       手機appUI界面設(shè)計賞析（七）

       手機appUI界面設(shè)計賞析（八）

      手機appUI界面設(shè)計賞析（九）

可能很多人認(rèn)為搜索設(shè)計很簡單：在主頁頂部設(shè)計一個搜索框或者搜索圖標(biāo)，就可以完成操作。但搜索前、中、后的體驗大家有沒有仔細(xì)考慮過呢？

在搜索過程中需要展示什么？如何幫助用戶盡快找到他們想要的？搜索的體驗如何與其他體驗相聯(lián)系？這是很多設(shè)計師思維模糊的地方。

在本文中，將介紹搜索設(shè)計需要了解的內(nèi)容，以及在不同App和案例中的搜索體驗。 

一、搜索前的體驗

搜索是產(chǎn)品中不可或缺的一部分，無論打開哪個App, 我們都能很快找到搜索功能。搜索作為一個功能入口，簡單的呈現(xiàn)方式對用戶來說很重要。

搜索設(shè)計常見的形式有3種:

• 頂部搜索框

• 圖標(biāo)(放大鏡)搜索

• 底部搜索導(dǎo)航

從視覺和優(yōu)先程度來看，底部導(dǎo)航>搜索框>圖標(biāo)。那么每種形式的優(yōu)缺點是什么，又分別在什么時候使用呢？ 

1、頂部搜索框

搜索框通常位于App主頁的頂部，作為一個大的觸摸目標(biāo)，更容易被用戶發(fā)現(xiàn)和使用。搜索框的組成一般包括容器、預(yù)設(shè)文字、操作按鈕。

容器通常填充為白色或灰色，里面帶有預(yù)設(shè)好的產(chǎn)品文案。但是容器什么時候用白色，什么時候用淺灰色呢？這取決于App主頁的背景色。

設(shè)計準(zhǔn)則是始終將容器的顏色與頁面背景色相對比。拿谷歌地圖和微信讀書相比較，灰色背景下用白色的搜索框，反之亦然。

當(dāng)然也有例外，Airbnb在白色背景上就有一個白色的搜索框。為什么這樣設(shè)計呢？因為它的搜索框帶有陰影，能和背景作出區(qū)分，也是一種可行的設(shè)計方法。

預(yù)設(shè)文字的作用是提示用戶要搜索的內(nèi)容或搜索方向，告訴用戶可以從搜索中得到什么。在App Store中，預(yù)設(shè)文字告訴用戶可以搜索“游戲、應(yīng)用、故事等”，Messenger中的預(yù)設(shè)文字只有“搜索”，為用戶提供功能入口。

預(yù)設(shè)文字在內(nèi)容瀏覽類App中很常見——不僅可以展示擁有的內(nèi)容類別，還能結(jié)合搜索趨勢來積極地推廣熱門內(nèi)容。比如微信讀書的搜索框使用最近流行的書作為預(yù)設(shè)文字，以此提高內(nèi)容的曝光率，吸引用戶閱讀。

操作按鈕雖然與搜索相關(guān)，但擺放的位置不固定?？赡茉谒阉骺騼?nèi)部，也可能在搜索框兩側(cè)。哪些圖標(biāo)/文本按鈕對搜索有幫助呢？最常見的是搜索框中的語音輸入功能和二維碼圖標(biāo)。

另外一個好的搜索體驗的關(guān)鍵是能從視覺上區(qū)分與搜索相關(guān)的圖標(biāo)。

2、搜索圖標(biāo)

如果一款產(chǎn)品希望用戶專注于瀏覽內(nèi)容，或者不需要頻繁使用搜索，可以采用圖標(biāo)的樣式將搜索入口放在頁面頂部。例如，在Medium上用戶通常是漫無目的地瀏覽內(nèi)容，而不是搜索特定的主題；Facebook上的用戶通常只想瀏覽朋友的帖子，很少搜索內(nèi)容。 

3、底部搜索導(dǎo)航

與前兩種形式相比，底部搜索導(dǎo)航離用戶距離最近，更容易作為接觸目標(biāo)也被賦予更多的特性。

UberEats通過主頁的排序和過濾，幫助用戶分類感興趣的餐廳，并將搜索作為底部導(dǎo)航的第二個標(biāo)簽，這樣用戶就能夠不斷看到和探索新餐廳。

Tiktok也將搜索入口放在第二導(dǎo)航中，完整的首頁有利于為瀏覽視頻的用戶提供沉浸式的體驗。

二、搜索頁內(nèi)容展示

當(dāng)用戶想搜索某個內(nèi)容，點擊搜索框之后該做什么呢？App應(yīng)該如何幫助用戶搜索？

用戶點擊搜索框時會彈出一個頁面，我們將其定義為“搜索頁”。搜索頁的目的是讓用戶做好搜索的準(zhǔn)備，對要尋找的內(nèi)容進(jìn)行提示，拓寬用戶對要搜索的內(nèi)容的看法。

彈出的搜索頁幫助產(chǎn)品完成兩個主要任務(wù)：

• 利用視覺和交互告訴用戶已經(jīng)做好搜索的準(zhǔn)備；

• 通過頁面上的內(nèi)容提醒用戶他們正在尋找的東西，或者為他們提供可能感興趣的東西。 

1、視覺和交互——做好搜索的準(zhǔn)備

當(dāng)我們有一個特定的搜索目標(biāo)時，我們的注意力就會完全放在搜索框(或搜索圖標(biāo))上，如果突然被引導(dǎo)到一個新的頁面，可能會帶來零碎的體驗。

所以要把“搜索前”到“搜索頁”的轉(zhuǎn)換做得更自然，讓用戶感覺仍然在同一個頁面上操作一樣。點擊Facebook的搜索圖標(biāo)，圖標(biāo)通過平滑的動效擴展成一個搜索框。

無論搜索在什么位置，顯示搜索框的不同狀態(tài)很重要，告訴用戶“已經(jīng)準(zhǔn)備好進(jìn)行搜索”。以領(lǐng)英為例，分析一下從搜索前到搜索頁面發(fā)生了哪些變化：

• 從搜索中返回的方法：取消。這對所有的搜索體驗都是必要的，可以使用取消或者返回圖標(biāo)。

• 搜索框改變了填充色。搜索框從灰色變?yōu)榘咨?，反映?dāng)前搜索操作處于焦點狀態(tài)。

• 只留下必要的圖標(biāo)。二維碼能幫助搜索所以仍然保留，而左邊的個人資料圖標(biāo)和搜索圖標(biāo)都會消失。

• 彈出光標(biāo)來鼓勵用戶輸入文字。

在某些App中，搜索框在“搜索前”和“搜索頁”中的位置可能不相同，這樣做的目的是在兩種體驗之間進(jìn)行平滑的過渡。Google的搜索框向上滑動來展示搜索內(nèi)容，保證過渡動效的流暢性。

有些搜索體驗不可能讓用戶停留在同一頁面上。Airbnb的搜索需要一系列的引導(dǎo)將用戶轉(zhuǎn)移到一個全屏的流程中。

關(guān)鍵的地方在于，搜索頁面在屏幕中間彈出，鍵盤向上滑動，用戶可以通過無縫的交互從“搜索前”平滑過渡到“搜索中”。 

2、內(nèi)容——提示搜索的信息

歷史記錄可以幫助用戶進(jìn)行有針對性的搜索，因為過去的興趣是當(dāng)前興趣的有力指標(biāo)。但是只顯示歷史搜索記錄會將用戶的注意力集中到過去的搜索上，而不是保持搜索的狀態(tài)。所以除了顯示搜索記錄外，顯示推薦內(nèi)容能拓寬用戶對潛在事物的興趣。

關(guān)鍵點1：“沒有內(nèi)容可推薦”

當(dāng)一款產(chǎn)品的功能主要是為了讓用戶完成某個特定的任務(wù)或達(dá)到某個目標(biāo)，那么它可能就沒有動機去推廣任何內(nèi)容。這類產(chǎn)品只會顯示最近的搜索記錄，比如Notion是一個筆記應(yīng)用，只負(fù)責(zé)存儲用戶的筆記，因此只顯示過去的搜索記錄來幫助用戶進(jìn)行搜索。

關(guān)鍵點2：“在搜索前推廣內(nèi)容”

有的產(chǎn)品通過將各種內(nèi)容提供給用戶查看和探索，為用戶實現(xiàn)某個目標(biāo)。谷歌地圖的搜索框下面有熱門的標(biāo)簽，用戶很可能會從標(biāo)簽中找到他們感興趣的類別。用戶點擊搜索框后，谷歌就會假設(shè)用戶有特定的去處，只專注于幫助他們到達(dá)想去的地方。

關(guān)鍵點3：“平衡內(nèi)容推薦和歷史搜索”

主頁上的推薦內(nèi)容可能很容易被忽略(因為它可能與用戶的操作無關(guān))，但是搜索頁上的熱門推薦很少會被忽視。因為用戶是帶著目標(biāo)主動進(jìn)入搜索頁，所以不會省略頁面上的任何信息。

熱門類別

通過在最近搜索頁上將各種美食放在首位，UberEats和Doordash這類送餐App就可以引導(dǎo)用戶嘗試更多的餐廳。

熱門話題

展示熱門話題能為用戶創(chuàng)造一種社區(qū)感，會讓用戶覺得他們與更大的社會保持聯(lián)系。Quora是很大的問答平臺，它不僅顯示推薦的話題，還顯示了關(guān)注者的數(shù)量?？吹竭@一點，用戶會想：“如果一個話題有13萬追隨者，那一定很好！我也想成為其中的一員?！?

熱門新聞

新聞類搜索具有很強的時效性，用戶很清楚明天的內(nèi)容將不同于今天的內(nèi)容。所以有些App會對新聞或熱搜進(jìn)行實時排名，向用戶展示最熱門的資訊。

Reddit展示了當(dāng)前的趨勢，讓用戶了解的內(nèi)容，Robinhood每小時都會更新華爾街關(guān)于股市的文章，這樣用戶就可以做出及時和明智的財務(wù)選擇。

搜索推薦

通過算法，很多App都能從用戶過去的興趣中推斷用戶的喜好，然后不斷推送相似的內(nèi)容，比如淘寶的相似商品推薦。

同樣的策略也可以應(yīng)用于搜索頁。小紅書作為一款流行App，搜索頁顯示根據(jù)用戶口味定制的推薦；Twitter的“For you”標(biāo)簽根據(jù)過去的搜索展示的相關(guān)內(nèi)容。顯示更多與用戶相關(guān)的內(nèi)容可以拉近與產(chǎn)品的距離，用戶也會花更多的時間使用產(chǎn)品。

搜索細(xì)分

Medium的搜索做得很聰明，它將搜索頁面細(xì)分為兩個步驟：先點擊搜索框來瀏覽不同的主題，再次點擊會顯示光標(biāo)和搜索記錄。通過這種分解體驗，用戶在搜索時獲得了更多的信息量和更簡潔的體驗。

總結(jié)

以上是關(guān)于搜索前和搜索頁的體驗設(shè)計。產(chǎn)品的搜索體驗受到多方面的影響：自身目的、內(nèi)容種類、受眾類型。希望這篇文章能夠讓你了解搜索體驗的可能性，為搜索設(shè)計帶來更清晰的方向。

文章來源：站酷      作者：Clippp

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)