<menu id="2q246"><menu id="2q246"></menu></menu><menu id="2q246"><menu id="2q246"></menu></menu>
<menu id="2q246"><strong id="2q246"></strong></menu>
<menu id="2q246"></menu><menu id="2q246"><menu id="2q246"></menu></menu>
<nav id="2q246"></nav>
  • <input id="2q246"><menu id="2q246"></menu></input>
    <tt id="2q246"><tt id="2q246"></tt></tt>
  • 您當前位置:圖趣網(Tuquu) >> 網頁設計教程 >> 設計理論 >> 瀏覽設計教程

    體驗設計中的排序問題

    你是否發現,微信訂閱號消息列表的排序不是完全按照時間倒序顯示,而是被打亂了,甚至可以看到數天前的文章被插入到今天的消息里面。

    這是為什么呢?

    每時每刻,我們都會接受大量信息的“轟炸”,除了一些默認或常見的排序方式,越來越多的掌握大量用戶數據的公司會通過對用戶習慣,進行默認排序,提高用戶的閱讀效率。

    這也是微信公眾號消息列表閱讀效率優化的目的所在:即消息會根據用戶閱讀喜好,對其一定時間內接收到的訂閱號內容進行排序上的優化。

    那在信息排序方面,除了時間排序之外,還有哪些常見的排序類型?相對應的,它們的使用場景、優缺點又是什么?

    接下來,我們詳細介紹信息排序的相關知識點,大家系好安全帶,發車了……

    一、排序的價值

    通常意義,排序并不是頁面的核心組件和功能,因此設計師與產品的注意力很容易將其忽略。這就造成其帶來的體驗與商業價值也并不明顯,被湮沒在產品中。但隨著數據的增加以及場景的聚焦,排序的價值就會慢慢凸顯。

    通常情況下,排序有如下價值:

    1. 提升信息查看效率

    通常我們都會對頁面的布局、權重進行細細構思與體現,但是針對數據排序卻缺少相應的關注與設計。如何將用戶關注的數據排列在海量數據最前方,快速推薦給用戶,避免用戶的翻找,提升用戶的閱讀及查閱效率,這才是排序功能真正的核心體驗價值。

    2. 圈住用戶,增加用戶的使用時長

    這類的產品總會把用戶關注、感興趣的信息優先推送給用戶,讓用戶在不知不覺沉浸其中,大量擠占用戶的時間,例如抖音的內容算法。

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

    這類的產品,故意將用戶需要的信息掩藏在強推的信息里面,故意給用戶增加閱讀負擔,引導用戶查看被強推的信息,實現不(shi)可(ren)告(jie)人(zhi)的目的。如百度的競價排名,就是“我不給你想看的,我只給我想讓你看的”。

    二、排序的原則

    排序是數據展示的邏輯層,無論數據的多寡,只有用戶關注的數據才是有效數據。在此基礎上,排序的原則可歸納為四點:高效、清晰、統一、美觀。

    作為隱性的數據展現要素,兩個核心的原則是高效與清晰,在實現數據清晰展現的基礎上,滿足用戶對數據的深層次的需求。

    統一與美觀則作為排序的輔助原則,體現了設計師最后的倔強,而不僅僅是數據的有效展示,還有設計師對用戶、場景的思考與情緒表達。

    三、排序的類型

    在實現排序核心體驗價值的基礎上,以用戶是否需要操作,排序大致上可分為兩大類主動排序與被動排序。所謂的主動排序就是用戶可以根據自己的意愿來調整展示數據的順序,微調或整體改變數據的展示規則,已達到快速找到并查閱的目的。相應的,被動排序就是不需要用戶操作,數據默認呈現給用戶的順序規則。

    通常情況下,二者并不完全割裂,被動排序常常作為頁面加載后的排序方式,而后,用戶在被動排序的基礎上進行調整。如to B類產品CRM的一些頁面,加載后通常采用時間倒序的被動排序規則,用戶在其加載的數據基礎上,在進行相應的主動排序。

    常見的被動排序規則有時間正序/倒序、字母順序、筆畫順序、用戶喜好、翻閱記錄等等。隨著算法的逐漸普及以及排序算法的發展,根據用戶喜好與翻閱記錄越來越成為排默認排序的首選。

    但從設計層面,默認排序的實現設計師是無能為力,只能根據統計結果設定相應的規則,設計技巧很難有用武之地。因此,我們在本文更多的探討主動排序的方式的優缺點。

    下面就簡單分析一下,幾種常見的主動排序方式的優缺點:

    1. 拖動排序

    拖動排序是指通過手指或鼠標長按,觸發拖動操作,然后將目標數據調整到相應的位置。

    如在SAP Fiori設計規范指南Tree的應用中,就定義了拖動排序的交互方式。

    如圖:

    優點:

    操作靈活,可滿足多形式的排序要求;

    操作便捷高效,兼容性強,特別是少量數據時;

    可視化操作,所見即所得。

    缺點:

    長表格的中,如果排序跨度較大,就比較困難,特別是PC端的跨頁面拖動;

    實現效果的調校需要絲滑動效的加持。

    2. 指定排序

    指定排序即為每一項數據置頂相應的順序編號,實現流動性的排序功能實現。如在金蝶云的單據錄入中,有些環節對單據體的順序有嚴格的要求,希望調整單據體分錄的順序。用戶需要在自定義行號中輸入所處的編號,可實現以及自定義行號的升序排列。

    同樣,在to G產品中,線上會議需要將與會領導按照一定的順序進行排序,那么填寫順序編號就是比較經濟和兼容性的實現方案。

    優點:

    排序穩定,指定順序的數據不會受到其他因素的影響;

    操作簡便,直接輸入想要的順序數字進行排序,特別是對長列表比較友好,如跨頁面排序。

    缺點:

    大量數據時,有可能涉及到兩種排序規則,實現關鍵數據的指定排序,剩余數據另外一種排序規則;

    當需要在以及完成排序的數據中插入數據時,交互上就稍顯復雜需要考慮數據的替換與插入后的后續數據的編號問題;

    如果臨時插入了權重較低的內容,操作成本較大。

    3. 逐步排序

    這種排序方式設計師會比較熟悉,在sketch與figma中,常常會用到將某個圖層進行連續調整已達到相互疊加的效果,滿足視覺要求。

    逐步排序比較適合頁面中數據的微調,操作較為精細。

    如在一些產品的屬性配置中,一般情況下數量有限,但有時候需要對屬性的順序進行微調,往往會采用這種精細度較高的交互方式。

    優點:

    符合用戶心智;

    操作穩定性高,不會出現錯誤排序;

    操作精細、適用于微調。

    缺點:

    不適合長距離的數據移動排序。

    如果數據調整到的目的地比較遠,一次點擊很難完成目標,所以需要頻繁的操作,同時隨著數據的位置移動,鼠標位置也要相應的微調,然后進行下一次的移動操作,因此需要不斷重復“點擊-移動-點擊”的操作。

    4. 置頂/置底排序

    這種排序方式設計師也會比較熟悉,在sketch與figma中,常常會用到將某個圖層進行置頂、置底操作。用戶可以對選中的數據,一鍵顯示在最頂部或最底部。

    優點:

    如果需要將某一內容優先展示,操作很方便。

    缺點:

    批量數據的排序就比較復雜;

    如果僅僅是數據的排序,而不是單純的將某一內容優先展示,操作起來就會比較復雜。

    5. 條件排序

    條件排序即通過設置某種規則,實現需求數據的整體排序,在某種意義上來說,條件排序的規則也可以作為被動排序的排序規則。除了之前提到時間正序/倒序、字母順序、筆畫順序規則外,常見的還有電腦桌面的文件排序規則,如文件名稱、文件類型、創建時間,數據的升序與降序,如距離的正序等。

    優點:

    適合數據的整體排序,一鍵完成;

    使用范圍比較廣,可以是數據類型,也可以用戶的查看頻率,如閱讀數量等;

    可以實現多條件的交叉排序。

    缺點:

    不能指定某個數據的特異化顯示。

    6. 其他

    除此之外,也存在一些類似排序的交互方式,例如跨組織架構的人員的移動、跨文件結構的文件的調整,通常會采用拖動或移動到的方式進行調整,他們的排序是對所處結構的“排序”調整。

    從嚴格意義上來說,這種移動并不是排序,而是所屬結構的變更。但在組織結構的調整中,如果允許節點之下子節點的拖動排序,就可以看作是組織結構的排序。

    排序是交互組件、交互規范中的小透明,常常被湮沒在下拉選擇等組件中。同時,排序后的交互與視覺效果并沒有明顯的差異,僅對展示的內容屬性有關。

    相較于用戶,設計師對展示內容的屬性的關注度遠沒有用戶高,這就造成設計師對實時數據展示的忽略。

    數據并僅僅是數據,如果不滿足用戶的需求將毫無價值。

    因此,數據的呈現規則以及交互方式,需要設計師根據用戶的需求,提供妥善的解決方案。


    [教程作者:佚名]
    免責聲明:本站文章系圖趣網整理發布,如需轉載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業用途!
    本文地址:http://www.iamyunfeng.com/Tutorial/di4209.html
    下一篇:沒有了
    網頁UI - 原子設計理論(上)
    沒有了
    圖趣網微信
    建議反饋
    ×
    挺进h孕妇的孕肚视频
    <menu id="2q246"><menu id="2q246"></menu></menu><menu id="2q246"><menu id="2q246"></menu></menu>
    <menu id="2q246"><strong id="2q246"></strong></menu>
    <menu id="2q246"></menu><menu id="2q246"><menu id="2q246"></menu></menu>
    <nav id="2q246"></nav>
  • <input id="2q246"><menu id="2q246"></menu></input>
    <tt id="2q246"><tt id="2q246"></tt></tt>