編輯導(dǎo)讀：書(shū)簽是很多產(chǎn)品都有的功能，尤其是閱讀產(chǎn)品，方便人們快速找到瀏覽過(guò)的收藏過(guò)的記錄，再次閱讀。本文作者圍繞書(shū)簽的設(shè)計(jì)展開(kāi)分析，希望對(duì)你有幫助。

這是一個(gè)個(gè)人項(xiàng)目，旨在根據(jù)用戶需求進(jìn)行用戶研究和解決方案。

這也是我第一次從頭開(kāi)始創(chuàng)建UI界面。

一、了解書(shū)簽

在我們的日常生活中有如此多的內(nèi)容流入，我們很難了解自己真正想要沉浸在什么內(nèi)容中，而有多種方法可以做到這一點(diǎn)。方法其中之一是及時(shí)保存，以便閑暇時(shí)查看或參考，我們稱之為“書(shū)簽”。

二、我所面臨的問(wèn)題？

Chrome中的書(shū)簽是最常見(jiàn)的方式，它可以很好地快速訪問(wèn)最常用的網(wǎng)站。但對(duì)于其余的，比如搜索你保存的東西，組織你的內(nèi)容，便成了一項(xiàng)非常繁瑣的任務(wù)（這只是在Chrome瀏覽器中）。

在Chrome瀏覽器的Google搜索頁(yè)中為網(wǎng)站添加書(shū)簽，在Instagram上保存dance reel（舞蹈卷軸），或在Pinterest和Behance上創(chuàng)建mood boards(情緒板)。不同的應(yīng)用程序，不同的內(nèi)容，不同的保存位置，導(dǎo)致了許多困惑，并使訪問(wèn)任何特定項(xiàng)目變得非常具有挑戰(zhàn)性。我想讓這個(gè)過(guò)程變得更簡(jiǎn)便，并開(kāi)始致力于創(chuàng)建一種能幫助人們?yōu)樗麄兏信d趣的項(xiàng)目添加書(shū)簽并快速訪問(wèn)它們的體驗(yàn)。

1. 驗(yàn)證和研究

毫無(wú)疑問(wèn)，這是我案例研究中最重要的部分，這幫助我弄清楚了我實(shí)際上應(yīng)該解決的問(wèn)題是只需要把我喜歡的東西放在我的產(chǎn)品中?；旧?，它向我展示了如何從零到成品！

誰(shuí)是現(xiàn)有的競(jìng)爭(zhēng)對(duì)手？

我收集了一些流行和不流行的應(yīng)用程序，并仔細(xì)研究它們，記下了我喜歡什么以及我面臨的問(wèn)題是什么。根據(jù)我認(rèn)為與用戶相關(guān)的指標(biāo)創(chuàng)建了一個(gè)分析表（該列表包括網(wǎng)絡(luò)和移動(dòng)應(yīng)用程序）：

（上圖介紹了不同的書(shū)簽使用方式及優(yōu)缺點(diǎn)）

不同書(shū)簽應(yīng)用的競(jìng)爭(zhēng)分析：

我面臨的主要問(wèn)題是如何標(biāo)記所有的書(shū)簽，因?yàn)檫@是區(qū)分所有已保存書(shū)簽的唯一方法。

然而，它們中的大多數(shù)都是針對(duì)閱讀而不是視覺(jué)效果而優(yōu)化的，這對(duì)我來(lái)說(shuō)并不令人滿意（因?yàn)樽鳛橐幻O(shè)計(jì)師，我是一個(gè)非常注重視覺(jué)效果的人）；此外，通過(guò)bookmarklet（一個(gè)簡(jiǎn)單的擴(kuò)展類型選項(xiàng)，只需單擊一下即可保存內(nèi)容，例如在Google Chrome中的書(shū)簽）在筆記本電腦/臺(tái)式機(jī)上保存內(nèi)容非常簡(jiǎn)單，但是在移動(dòng)端上保存是一個(gè)漫長(zhǎng)而乏味的過(guò)程。

這些參數(shù)基于我的個(gè)人需求和偏見(jiàn)，并作為向我的用戶提出一些問(wèn)題的起點(diǎn)。

用戶研究：

為了了解用戶的行為并驗(yàn)證我從對(duì)比分析中收集到的點(diǎn)是否與用戶相關(guān)，我首先提出了一個(gè)Google表單，得到了80多人的回答。

以下是我得到的統(tǒng)計(jì)數(shù)據(jù)：

• 大多數(shù)用戶將內(nèi)容算作”資源”（名單上的網(wǎng)站、軟件鏈接、GitHub鏈接）、文章、靈感（Instagram、Behance、Dribbble、Pinterest）和社交媒體內(nèi)容。
• 在用戶所面臨的問(wèn)題中，主要的問(wèn)題是如何在所有已保存的項(xiàng)目中搜索特定的一個(gè)并在應(yīng)用程序外分享列表，但由于它們擠在一起，在所有保存的內(nèi)容中沒(méi)有適當(dāng)?shù)拈g隔。
• 在我得到一些反饋后，我問(wèn)了一個(gè)重要的問(wèn)題

（上圖為根據(jù)“用戶多久返回查看一次保留的表單”所做的數(shù)據(jù)調(diào)查）

由于我想對(duì)調(diào)查結(jié)果進(jìn)行更深入的解釋，我根據(jù)他們對(duì)調(diào)查的回答，對(duì)7個(gè)人進(jìn)行了用戶訪談，這表明他們?cè)谌粘Ｉ钪惺菚?shū)簽的優(yōu)秀用戶。

下面我列出了一些他們所使用的書(shū)簽媒介，目前面臨的問(wèn)題，以及他們的愿望和需求。

來(lái)自我采訪的4位用戶的見(jiàn)解

沒(méi)有人真正對(duì)他們使用的現(xiàn)有解決方案而感到滿意。當(dāng)我與他們交談時(shí)，我了解了他們的問(wèn)題以及他們的愿望和需求。

問(wèn)題：

• “很難快速找到我保存的書(shū)簽，因?yàn)闆](méi)有給出適當(dāng)?shù)拿?，特別是當(dāng)有類似類型的內(nèi)容時(shí)更是如此，但我又不想浪費(fèi)時(shí)間編輯細(xì)節(jié)。
• “獲取已保存的內(nèi)容是一個(gè)非常漫長(zhǎng)的過(guò)程，因此我更喜歡從我最初找到它的地方搜索它，而不是去保存它的地方尋找它。
• “我保存了很多東西，但忘記了我收藏的東西，錯(cuò)過(guò)了很多可能重要的東西。

愿望：

• 在盡可能短的時(shí)間內(nèi)查找和保存書(shū)簽，幾乎毫不費(fèi)力
• 更喜歡視覺(jué)化的提示而不是文本提示，以及根據(jù)各種基礎(chǔ)（如添加日期等）對(duì)書(shū)簽進(jìn)行排序的選項(xiàng)
• 一個(gè)系統(tǒng)，其中書(shū)簽自動(dòng)分組或標(biāo)記，并將相關(guān)項(xiàng)目放在一起，以便于查看內(nèi)容
• 提醒他們保存的內(nèi)容，但不是以侵入性的方式

2. 實(shí)際問(wèn)題

我知道這個(gè)順序可能是錯(cuò)誤的，但是當(dāng)我開(kāi)始這個(gè)項(xiàng)目時(shí)，我非常興奮——我要制作一個(gè)書(shū)簽應(yīng)用程序，并且會(huì)有一些帶有圖像的東西，它會(huì)很漂亮。

做這項(xiàng)研究讓我了解了書(shū)簽的復(fù)雜性，以及我的用戶們。和他們交談很累，但也讓人大開(kāi)眼界。

一開(kāi)始我懷疑是否需要書(shū)簽產(chǎn)品，后來(lái)我意識(shí)到：更重要的是要有一個(gè)產(chǎn)品，它可以解決用戶面臨的幾乎所有問(wèn)題，這樣他們就可以輕松地添加書(shū)簽。

根據(jù)用戶的反饋，我開(kāi)始構(gòu)建我正在解決的問(wèn)題，并將其框定如下：

我們需要?jiǎng)?chuàng)建一個(gè)數(shù)據(jù)庫(kù)，用戶可以快捷地保存/添加書(shū)簽的各種內(nèi)容，包括最效率的保存方式（最少時(shí)間，簡(jiǎn)便的搜索）公開(kāi)他們保存但從未記得查看的內(nèi)容。我們會(huì)在移動(dòng)端解決這個(gè)需求（因?yàn)橛脩舸蠖鄶?shù)時(shí)間都是在移動(dòng)端查看，但并沒(méi)有多少產(chǎn)品可以在移動(dòng)端高效解決這個(gè)問(wèn)題）。

3. 功能標(biāo)準(zhǔn)

本問(wèn)題陳述主要涉及3個(gè)主要部分：

1）保存

目前，將任何外部應(yīng)用程序加入書(shū)簽的最常見(jiàn)方法是以下過(guò)程：

書(shū)簽應(yīng)用口袋顯示的案例

保存一個(gè)書(shū)簽是一個(gè)漫長(zhǎng)的過(guò)程！它在桌面上是如此之快，但在移動(dòng)設(shè)備上卻非常乏味。

• Google Chrome仍然具有在共享選項(xiàng)旁邊添加上次訪問(wèn)的應(yīng)用程序的功能，但這僅適用于應(yīng)用程序內(nèi)查看。在youtube，LinkedIn，Twitter等應(yīng)用程序中沒(méi)有相同的功能。由于我們保存了來(lái)自許多不同來(lái)源的項(xiàng)目，因此我們需要一個(gè)一體化的解決方案。
• 一種方法是添加手勢(shì)，例如引入一個(gè)新手勢(shì)，激活后將自動(dòng)保存要添加書(shū)簽的項(xiàng)目。這使得它只有1步！

2）搜索

許多用戶表達(dá)了對(duì)搜索的擔(dān)憂——有些人記住的是封面圖像，而有些人記住的是他們的標(biāo)題。在這兩種情況下，僅僅記住名字/圖像是不夠的，因?yàn)槲覀兊拇竽X是通過(guò)聯(lián)想工作的

假設(shè)你保存了一個(gè)你遇到的非常棒的作品集網(wǎng)站。但是當(dāng)你去搜索它的時(shí)候，你忘記了這個(gè)作品集的創(chuàng)造者是誰(shuí)；然而，你確實(shí)記得這是一個(gè)作品集，所以如果你搜索“作品集”，你可能會(huì)得到一些與這個(gè)詞相關(guān)的選項(xiàng)，從中你可以很容易地找到你想要的書(shū)簽。

這可以通過(guò)使用應(yīng)用中內(nèi)置的AI/ML模型來(lái)解決，這些模型可以對(duì)保存的內(nèi)容進(jìn)行排序/間隔，并根據(jù)可能與該內(nèi)容相關(guān)的一些基本關(guān)鍵字對(duì)其進(jìn)行組織。

想尋找?guī)в芯澜ㄖ鍒D的Behance項(xiàng)目嗎？只需鍵入建筑物或地方或Behance。繪圖黑客的視頻是什么？只需輸入繪圖或藝術(shù)。有一個(gè)有著驚人設(shè)計(jì)工作室的網(wǎng)站，我保存了，但忘記了它的名字。設(shè)計(jì)或工作室或網(wǎng)站。

我推薦這兩款真正推動(dòng)使用AI/ML進(jìn)行書(shū)簽的產(chǎn)品：mymind和 Stash.ai

• AI/ML模型最令人興奮的事情是它們可以適應(yīng)您的輸入和選擇。因此，如果UX關(guān)節(jié)對(duì)你來(lái)說(shuō)是一個(gè)靈感，那么AI模型可以學(xué)習(xí)它，并在你下次搜索”靈感”時(shí)顯示UX文章。這使得它真正個(gè)性化，并且隨著您使用產(chǎn)品的次數(shù)越多而更加強(qiáng)大。
• 有時(shí)，當(dāng)項(xiàng)目足夠重要時(shí)，用戶確實(shí)希望輸入一些詳細(xì)信息，這些詳細(xì)信息可能有助于他們以后記住和回憶它，因此將存在添加存在于所有書(shū)簽應(yīng)用程序中的標(biāo)簽的系統(tǒng)。

3）回憶

• 你來(lái)過(guò)這里。保存了一些東西并忘記了所有關(guān)于它的事情，這是有道理的，因?yàn)樗鼘?duì)你來(lái)說(shuō)不是很重要，但你有時(shí)確實(shí)希望你至少有一天可以瞥一眼它，因?yàn)樗鼘?lái)可能會(huì)被證明是有幫助的。
• 我引入了一個(gè)每日部分，該部分將顯示最近保存的，查看次數(shù)最多的內(nèi)容以及從未查看過(guò)的內(nèi)容。它將為用戶提供多樣性，并且還實(shí)現(xiàn)了不讓保存的項(xiàng)目浪費(fèi)的目的。
• 推送通知可用于將用戶帶到應(yīng)用程序，增加用戶參與度，以便進(jìn)一步提示他們?yōu)g覽內(nèi)容并直接或間接地被提醒。

我還為用戶提供了創(chuàng)建集合的選項(xiàng)，這將有助于他們創(chuàng)建可以在pp內(nèi)外共享的情緒板/組。遵循Pocket的模型，由于我引入了具有共享選項(xiàng)的集合，因此我提供了一個(gè)”發(fā)現(xiàn)”部分，用于托管該應(yīng)用程序的各種用戶的集合。

用戶流和信息架構(gòu)：

用戶界面和體驗(yàn)：

介紹：Laters！

一個(gè)充滿活力的現(xiàn)代移動(dòng)應(yīng)用程序，可以存儲(chǔ)您的所有書(shū)簽，以便您隨時(shí)重新訪問(wèn)它們。利用人工智能的強(qiáng)大功能，它可以幫助您找到您正在尋找的書(shū)簽，并引導(dǎo)您一路前進(jìn)。創(chuàng)建收藏集并與您的朋友或世界分享，并通過(guò)發(fā)現(xiàn)部分查看其他收藏。

儲(chǔ)蓄：

探索1：還記得我是如何想到使用手勢(shì)來(lái)保存書(shū)簽會(huì)如此簡(jiǎn)單嗎？只需一個(gè)操作，它就被保存了！但是，在與用戶交談時(shí)，我了解到，盡管理論上它可能非常容易，但并沒(méi)有多少用戶對(duì)手勢(shì)導(dǎo)航感到滿意。他們中的許多人都是習(xí)慣性的生物，不習(xí)慣上下左右滑動(dòng)。我便進(jìn)行了用戶研究，以了解其移動(dòng)導(dǎo)航的一般行為——他們是使用按鈕式導(dǎo)航還是滑動(dòng)手勢(shì)類型。

結(jié)果如何？贊成滑動(dòng)手勢(shì)，但卻不盡人意。

對(duì)98人的調(diào)查

為了代替結(jié)果，我決定添加一個(gè)手勢(shì)保存功能作為輔助選項(xiàng)，如果他們想使用它，請(qǐng)征得用戶的同意。一種方法是搖晃手機(jī)，但即使它很簡(jiǎn)單，用戶端也需要付出很多努力才能節(jié)省。

我通過(guò)從右下角滑動(dòng)來(lái)保存書(shū)簽。同樣，這不是一個(gè)非常理想的解決方案，也不適合按鈕類型的人，所以正常的收藏流程對(duì)他們來(lái)說(shuō)是這樣的。

探索2：如果不是手勢(shì)。另一種解決方案是在推送通知部分有一個(gè)永久性的應(yīng)用欄，只需單擊該欄，即可保存書(shū)簽。這些通知稱為持久通知，一旦在載入期間獲得用戶的許可，它們就會(huì)保留在那里。這是一個(gè)兩步驟的過(guò)程，可以適用于任何打開(kāi)的應(yīng)用程序，而不僅僅是Google Chrome，所以它是一個(gè)可行的解決方案，但我還沒(méi)有機(jī)會(huì)測(cè)試它，看看它對(duì)用戶來(lái)說(shuō)有多容易，所以它現(xiàn)在不是一個(gè)充實(shí)的解決方案。

保存后怎么辦？

現(xiàn)在，您的書(shū)簽已在應(yīng)用程序中，您還可以選擇添加標(biāo)簽并添加到集合中，如下面的流程所示。

此流程將在您點(diǎn)擊保存后出現(xiàn)，也就是說(shuō)，您可以選擇標(biāo)簽或集合，或者只需按X按鈕/按框外的任意位置即可使其消失。書(shū)簽將被保存并上升到保留在通知欄中，提醒用戶在應(yīng)用中查看它。

書(shū)簽：

保存的書(shū)簽首先是圖像，圖像是從保存書(shū)簽的網(wǎng)站中提取的。在用戶研究期間，用戶說(shuō)他們也記住了許多網(wǎng)站圖標(biāo)的項(xiàng)目，所以我也顯示了書(shū)簽所屬的圖標(biāo)，這也是一個(gè)不錯(cuò)的關(guān)聯(lián)工具。

由于我們提供了支持AI的搜索功能，該功能具有略高的學(xué)習(xí)曲線，因此指導(dǎo)用戶的一種方法是提供有用的小指令，幫助他們輸入更有效的搜索詳細(xì)信息。

添加新注釋：

收集：

制作系列是為了讓您創(chuàng)建個(gè)性化的情緒板并分享它們！共享是通過(guò)使您的集合成為私有/公共的機(jī)制來(lái)完成的。此書(shū)簽應(yīng)用程序是一個(gè)非常個(gè)性化的產(chǎn)品，因此默認(rèn)情況下，您的所有集合都是私有的。您必須將其公開(kāi)，才能在發(fā)現(xiàn)源上可見(jiàn)。

創(chuàng)建一個(gè)新書(shū)簽集合

向收藏添加書(shū)簽

發(fā)現(xiàn)：

擁有發(fā)現(xiàn)部分的想法來(lái)自Instagram的指南功能。我覺(jué)得這是展示策劃內(nèi)容的好方法，但只對(duì)那些在他們的頁(yè)面上發(fā)布非常具體的，與主題相關(guān)的東西的人有用，而大多數(shù)Instagram用戶的情況并非如此。它可能在Instagram上并不受歡迎，但在書(shū)簽應(yīng)用程序上會(huì)非常有用，因?yàn)槿绻脩暨M(jìn)行收藏，可以提示用戶在”發(fā)現(xiàn)”部分發(fā)帖，以便與志同道合的人互動(dòng)。

為什么人們會(huì)去發(fā)現(xiàn)部分而不是谷歌？答案是策劃的內(nèi)容。你在網(wǎng)上得到的選項(xiàng)太多了，以至于它變得令人困惑，你不知道該信任誰(shuí)。但在這里，有很多人公開(kāi)了他們的收藏，因?yàn)樗麄兿嘈胚@可能會(huì)幫助他人，你會(huì)發(fā)現(xiàn)這些東西是非常原始和真實(shí)的。

這是我對(duì)書(shū)簽體驗(yàn)的看法，希望你覺(jué)得它很有趣！

當(dāng)然，有一些（許多）東西我本可以添加或更好地工作，但那是以后的事了。

缺點(diǎn)和未來(lái)計(jì)劃：

• 創(chuàng)建整個(gè)入職體驗(yàn)，因?yàn)檫@個(gè)依賴于AI/ML的應(yīng)用程序確實(shí)有一點(diǎn)學(xué)習(xí)曲線，所以最好給用戶一個(gè)演練，以便他們可以輕松掌握它。
• 與移動(dòng)應(yīng)用程序無(wú)縫協(xié)作的桌面應(yīng)用程序和插件，可輕松添加書(shū)簽和集中查看
• 對(duì)手勢(shì)導(dǎo)航進(jìn)行了更好的研究
• 接觸到更廣泛的用戶，因?yàn)槲抑荒芡ㄟ^(guò)我的遠(yuǎn)近朋友和同事收集信息，因此我可以使用特定的書(shū)簽應(yīng)用程序更好地了解用戶。
• 在創(chuàng)建應(yīng)用程序后進(jìn)行了可用性測(cè)試，以驗(yàn)證我是否已達(dá)到基礎(chǔ)或錯(cuò)過(guò)了
• 花了一點(diǎn)時(shí)間開(kāi)發(fā)品牌部分（感謝Flaticons在應(yīng)用程序上飛濺的小插圖）

原文作者：Satabdi Srichandan

原文鏈接：https://bootcamp.uxdesign.cc/bookmarking-but-its-actually-useful-12a65c49034a

譯者：王姝丫-Sylvie

本文由人人都是產(chǎn)品經(jīng)理團(tuán)隊(duì)實(shí)習(xí)生 @王姝丫-Sylvie 翻譯發(fā)布，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議