體驗(yàn)設(shè)計(jì)中的排序問(wèn)題

你是否發(fā)現(xiàn)，微信訂閱號(hào)消息列表的排序不是完全按照時(shí)間倒序顯示，而是被打亂了，甚至可以看到數(shù)天前的文章被插入到今天的消息里面。

這是為什么呢？

每時(shí)每刻，我們都會(huì)接受大量信息的“轟炸”，除了一些默認(rèn)或常見(jiàn)的排序方式，越來(lái)越多的掌握大量用戶(hù)數(shù)據(jù)的公司會(huì)通過(guò)對(duì)用戶(hù)習(xí)慣，進(jìn)行默認(rèn)排序，提高用戶(hù)的閱讀效率。

這也是微信公眾號(hào)消息列表閱讀效率優(yōu)化的目的所在：即消息會(huì)根據(jù)用戶(hù)閱讀喜好，對(duì)其一定時(shí)間內(nèi)接收到的訂閱號(hào)內(nèi)容進(jìn)行排序上的優(yōu)化。

那在信息排序方面，除了時(shí)間排序之外，還有哪些常見(jiàn)的排序類(lèi)型？相對(duì)應(yīng)的，它們的使用場(chǎng)景、優(yōu)缺點(diǎn)又是什么？

接下來(lái)，我們?cè)敿?xì)介紹信息排序的相關(guān)知識(shí)點(diǎn)，大家系好安全帶，發(fā)車(chē)了……

一、排序的價(jià)值

通常意義，排序并不是頁(yè)面的核心組件和功能，因此設(shè)計(jì)師與產(chǎn)品的注意力很容易將其忽略。這就造成其帶來(lái)的體驗(yàn)與商業(yè)價(jià)值也并不明顯，被湮沒(méi)在產(chǎn)品中。但隨著數(shù)據(jù)的增加以及場(chǎng)景的聚焦，排序的價(jià)值就會(huì)慢慢凸顯。

通常情況下，排序有如下價(jià)值：

1. 提升信息查看效率

通常我們都會(huì)對(duì)頁(yè)面的布局、權(quán)重進(jìn)行細(xì)細(xì)構(gòu)思與體現(xiàn)，但是針對(duì)數(shù)據(jù)排序卻缺少相應(yīng)的關(guān)注與設(shè)計(jì)。如何將用戶(hù)關(guān)注的數(shù)據(jù)排列在海量數(shù)據(jù)最前方，快速推薦給用戶(hù)，避免用戶(hù)的翻找，提升用戶(hù)的閱讀及查閱效率，這才是排序功能真正的核心體驗(yàn)價(jià)值。

2. 圈住用戶(hù)，增加用戶(hù)的使用時(shí)長(zhǎng)

這類(lèi)的產(chǎn)品總會(huì)把用戶(hù)關(guān)注、感興趣的信息優(yōu)先推送給用戶(hù)，讓用戶(hù)在不知不覺(jué)沉浸其中，大量擠占用戶(hù)的時(shí)間，例如抖音的內(nèi)容算法。

3. 我不給你想看的，我只給我想讓你看的

這類(lèi)的產(chǎn)品，故意將用戶(hù)需要的信息掩藏在強(qiáng)推的信息里面，故意給用戶(hù)增加閱讀負(fù)擔(dān)，引導(dǎo)用戶(hù)查看被強(qiáng)推的信息，實(shí)現(xiàn)不（shi）可（ren）告（jie）人（zhi）的目的。如百度的競(jìng)價(jià)排名，就是“我不給你想看的，我只給我想讓你看的”。

二、排序的原則

排序是數(shù)據(jù)展示的邏輯層，無(wú)論數(shù)據(jù)的多寡，只有用戶(hù)關(guān)注的數(shù)據(jù)才是有效數(shù)據(jù)。在此基礎(chǔ)上，排序的原則可歸納為四點(diǎn)：高效、清晰、統(tǒng)一、美觀。

作為隱性的數(shù)據(jù)展現(xiàn)要素，兩個(gè)核心的原則是高效與清晰，在實(shí)現(xiàn)數(shù)據(jù)清晰展現(xiàn)的基礎(chǔ)上，滿(mǎn)足用戶(hù)對(duì)數(shù)據(jù)的深層次的需求。

統(tǒng)一與美觀則作為排序的輔助原則，體現(xiàn)了設(shè)計(jì)師最后的倔強(qiáng)，而不僅僅是數(shù)據(jù)的有效展示，還有設(shè)計(jì)師對(duì)用戶(hù)、場(chǎng)景的思考與情緒表達(dá)。

三、排序的類(lèi)型

在實(shí)現(xiàn)排序核心體驗(yàn)價(jià)值的基礎(chǔ)上，以用戶(hù)是否需要操作，排序大致上可分為兩大類(lèi)主動(dòng)排序與被動(dòng)排序。所謂的主動(dòng)排序就是用戶(hù)可以根據(jù)自己的意愿來(lái)調(diào)整展示數(shù)據(jù)的順序，微調(diào)或整體改變數(shù)據(jù)的展示規(guī)則，已達(dá)到快速找到并查閱的目的。相應(yīng)的，被動(dòng)排序就是不需要用戶(hù)操作，數(shù)據(jù)默認(rèn)呈現(xiàn)給用戶(hù)的順序規(guī)則。

通常情況下，二者并不完全割裂，被動(dòng)排序常常作為頁(yè)面加載后的排序方式，而后，用戶(hù)在被動(dòng)排序的基礎(chǔ)上進(jìn)行調(diào)整。如to B類(lèi)產(chǎn)品CRM的一些頁(yè)面，加載后通常采用時(shí)間倒序的被動(dòng)排序規(guī)則，用戶(hù)在其加載的數(shù)據(jù)基礎(chǔ)上，在進(jìn)行相應(yīng)的主動(dòng)排序。

常見(jiàn)的被動(dòng)排序規(guī)則有時(shí)間正序/倒序、字母順序、筆畫(huà)順序、用戶(hù)喜好、翻閱記錄等等。隨著算法的逐漸普及以及排序算法的發(fā)展，根據(jù)用戶(hù)喜好與翻閱記錄越來(lái)越成為排默認(rèn)排序的首選。

但從設(shè)計(jì)層面，默認(rèn)排序的實(shí)現(xiàn)設(shè)計(jì)師是無(wú)能為力，只能根據(jù)統(tǒng)計(jì)結(jié)果設(shè)定相應(yīng)的規(guī)則，設(shè)計(jì)技巧很難有用武之地。因此，我們?cè)诒疚母嗟奶接懼鲃?dòng)排序的方式的優(yōu)缺點(diǎn)。

下面就簡(jiǎn)單分析一下，幾種常見(jiàn)的主動(dòng)排序方式的優(yōu)缺點(diǎn)：

1. 拖動(dòng)排序

拖動(dòng)排序是指通過(guò)手指或鼠標(biāo)長(zhǎng)按，觸發(fā)拖動(dòng)操作，然后將目標(biāo)數(shù)據(jù)調(diào)整到相應(yīng)的位置。

如在SAP Fiori設(shè)計(jì)規(guī)范指南Tree的應(yīng)用中，就定義了拖動(dòng)排序的交互方式。

如圖：

優(yōu)點(diǎn)：

操作靈活，可滿(mǎn)足多形式的排序要求；

操作便捷高效，兼容性強(qiáng)，特別是少量數(shù)據(jù)時(shí)；

可視化操作，所見(jiàn)即所得。

缺點(diǎn)：

長(zhǎng)表格的中，如果排序跨度較大，就比較困難，特別是PC端的跨頁(yè)面拖動(dòng)；

實(shí)現(xiàn)效果的調(diào)校需要絲滑動(dòng)效的加持。

2. 指定排序

指定排序即為每一項(xiàng)數(shù)據(jù)置頂相應(yīng)的順序編號(hào)，實(shí)現(xiàn)流動(dòng)性的排序功能實(shí)現(xiàn)。如在金蝶云的單據(jù)錄入中，有些環(huán)節(jié)對(duì)單據(jù)體的順序有嚴(yán)格的要求，希望調(diào)整單據(jù)體分錄的順序。用戶(hù)需要在自定義行號(hào)中輸入所處的編號(hào)，可實(shí)現(xiàn)以及自定義行號(hào)的升序排列。

同樣，在to G產(chǎn)品中，線上會(huì)議需要將與會(huì)領(lǐng)導(dǎo)按照一定的順序進(jìn)行排序，那么填寫(xiě)順序編號(hào)就是比較經(jīng)濟(jì)和兼容性的實(shí)現(xiàn)方案。

優(yōu)點(diǎn)：

排序穩(wěn)定，指定順序的數(shù)據(jù)不會(huì)受到其他因素的影響；

操作簡(jiǎn)便，直接輸入想要的順序數(shù)字進(jìn)行排序，特別是對(duì)長(zhǎng)列表比較友好，如跨頁(yè)面排序。

缺點(diǎn)：

大量數(shù)據(jù)時(shí)，有可能涉及到兩種排序規(guī)則，實(shí)現(xiàn)關(guān)鍵數(shù)據(jù)的指定排序，剩余數(shù)據(jù)另外一種排序規(guī)則；

當(dāng)需要在以及完成排序的數(shù)據(jù)中插入數(shù)據(jù)時(shí)，交互上就稍顯復(fù)雜需要考慮數(shù)據(jù)的替換與插入后的后續(xù)數(shù)據(jù)的編號(hào)問(wèn)題；

如果臨時(shí)插入了權(quán)重較低的內(nèi)容，操作成本較大。

3. 逐步排序

這種排序方式設(shè)計(jì)師會(huì)比較熟悉，在sketch與figma中，常常會(huì)用到將某個(gè)圖層進(jìn)行連續(xù)調(diào)整已達(dá)到相互疊加的效果，滿(mǎn)足視覺(jué)要求。

逐步排序比較適合頁(yè)面中數(shù)據(jù)的微調(diào)，操作較為精細(xì)。

如在一些產(chǎn)品的屬性配置中，一般情況下數(shù)量有限，但有時(shí)候需要對(duì)屬性的順序進(jìn)行微調(diào)，往往會(huì)采用這種精細(xì)度較高的交互方式。

優(yōu)點(diǎn)：

符合用戶(hù)心智；

操作穩(wěn)定性高，不會(huì)出現(xiàn)錯(cuò)誤排序；

操作精細(xì)、適用于微調(diào)。

缺點(diǎn)：

不適合長(zhǎng)距離的數(shù)據(jù)移動(dòng)排序。

如果數(shù)據(jù)調(diào)整到的目的地比較遠(yuǎn)，一次點(diǎn)擊很難完成目標(biāo)，所以需要頻繁的操作，同時(shí)隨著數(shù)據(jù)的位置移動(dòng)，鼠標(biāo)位置也要相應(yīng)的微調(diào)，然后進(jìn)行下一次的移動(dòng)操作，因此需要不斷重復(fù)“點(diǎn)擊-移動(dòng)-點(diǎn)擊”的操作。

4. 置頂/置底排序

這種排序方式設(shè)計(jì)師也會(huì)比較熟悉，在sketch與figma中，常常會(huì)用到將某個(gè)圖層進(jìn)行置頂、置底操作。用戶(hù)可以對(duì)選中的數(shù)據(jù)，一鍵顯示在最頂部或最底部。

優(yōu)點(diǎn)：

如果需要將某一內(nèi)容優(yōu)先展示，操作很方便。

缺點(diǎn)：

批量數(shù)據(jù)的排序就比較復(fù)雜；

如果僅僅是數(shù)據(jù)的排序，而不是單純的將某一內(nèi)容優(yōu)先展示，操作起來(lái)就會(huì)比較復(fù)雜。

5. 條件排序

條件排序即通過(guò)設(shè)置某種規(guī)則，實(shí)現(xiàn)需求數(shù)據(jù)的整體排序，在某種意義上來(lái)說(shuō)，條件排序的規(guī)則也可以作為被動(dòng)排序的排序規(guī)則。除了之前提到時(shí)間正序/倒序、字母順序、筆畫(huà)順序規(guī)則外，常見(jiàn)的還有電腦桌面的文件排序規(guī)則，如文件名稱(chēng)、文件類(lèi)型、創(chuàng)建時(shí)間，數(shù)據(jù)的升序與降序，如距離的正序等。

優(yōu)點(diǎn)：

適合數(shù)據(jù)的整體排序，一鍵完成；

使用范圍比較廣，可以是數(shù)據(jù)類(lèi)型，也可以用戶(hù)的查看頻率，如閱讀數(shù)量等；

可以實(shí)現(xiàn)多條件的交叉排序。

缺點(diǎn)：

不能指定某個(gè)數(shù)據(jù)的特異化顯示。

6. 其他

除此之外，也存在一些類(lèi)似排序的交互方式，例如跨組織架構(gòu)的人員的移動(dòng)、跨文件結(jié)構(gòu)的文件的調(diào)整，通常會(huì)采用拖動(dòng)或移動(dòng)到的方式進(jìn)行調(diào)整，他們的排序是對(duì)所處結(jié)構(gòu)的“排序”調(diào)整。

從嚴(yán)格意義上來(lái)說(shuō)，這種移動(dòng)并不是排序，而是所屬結(jié)構(gòu)的變更。但在組織結(jié)構(gòu)的調(diào)整中，如果允許節(jié)點(diǎn)之下子節(jié)點(diǎn)的拖動(dòng)排序，就可以看作是組織結(jié)構(gòu)的排序。

排序是交互組件、交互規(guī)范中的小透明，常常被湮沒(méi)在下拉選擇等組件中。同時(shí)，排序后的交互與視覺(jué)效果并沒(méi)有明顯的差異，僅對(duì)展示的內(nèi)容屬性有關(guān)。

相較于用戶(hù)，設(shè)計(jì)師對(duì)展示內(nèi)容的屬性的關(guān)注度遠(yuǎn)沒(méi)有用戶(hù)高，這就造成設(shè)計(jì)師對(duì)實(shí)時(shí)數(shù)據(jù)展示的忽略。

數(shù)據(jù)并僅僅是數(shù)據(jù)，如果不滿(mǎn)足用戶(hù)的需求將毫無(wú)價(jià)值。

因此，數(shù)據(jù)的呈現(xiàn)規(guī)則以及交互方式，需要設(shè)計(jì)師根據(jù)用戶(hù)的需求，提供妥善的解決方案。