點(diǎn)擊 ▲ 三分設(shè) 關(guān)注，和 6 萬設(shè)計師一起學(xué)習(xí)進(jìn)步

譯客 2022 · 第 12 篇

目前，無論是手機(jī)端還是桌面端很多場景都會采用折疊式卡片的方式來放置信息。本文作者系統(tǒng)介紹了折疊式卡片的一些案例和使用場景，向我們展示了折疊式卡片的適用場景和在不同場景中的不同方式的折疊式卡片，這對于我們的設(shè)計是一盞指明燈。

大家好！我是 Roman。

首先來自我介紹一下，我是一名在線網(wǎng)站的老板同時也是一名 UI 設(shè)計師。我已經(jīng)為 Figma 制作 UI 工具包 3 年多了，在機(jī)緣巧合下我建立了 Setproduct.com 。我們制作該網(wǎng)站的目標(biāo)是幫助設(shè)計師更快地發(fā)布他們的產(chǎn)品，進(jìn)而能夠節(jié)省公司和自由職業(yè)者在設(shè)計上所需花費(fèi)的時間和金錢。

我從事平面設(shè)計師工作 20 多年了。在過去的幾年里，我每天都會查看數(shù)千個不同的組件、屏幕布局、應(yīng)用程序。我這樣做是因?yàn)槲矣幸粋€目標(biāo)——制作一本關(guān)于設(shè)計應(yīng)用及其組件、模板等的綜合性書籍。

好，現(xiàn)在我們進(jìn)入文章的內(nèi)容。我們在這里有很多小的 UI 細(xì)節(jié)，我們將在下文向您展示。

?? 什么是折疊式卡片？

折疊式卡片（也稱為擴(kuò)展面板）是垂直堆疊的選項(xiàng)列表，可以展開/折疊以顯示或隱藏其他相關(guān)內(nèi)容。

內(nèi)容

要點(diǎn)
容器的樣式
用戶體驗(yàn)與可用性
案例??/??

要點(diǎn)

狀態(tài)

折疊式卡片的默認(rèn)狀態(tài)如下：
?? 展開
?? 折疊
?? 懸停
?? 注視
?? 禁用

V 型圖標(biāo)的位置

單擊折疊式卡片后，“V 型”圖標(biāo)通過倒轉(zhuǎn)來表示狀態(tài)欄已成功展開。再次單擊時“V 型”圖標(biāo)會再次倒轉(zhuǎn)恢復(fù)到其初始位置。

您也可以使用這些符號代替“V 型”圖標(biāo)：

脫字號：^
箭頭：↑↓
加減號：+ / -

附加符號

在折疊式卡片的圖標(biāo)位于右側(cè)的情況下，可以使用附加符號來強(qiáng)調(diào)選項(xiàng)標(biāo)簽的含義，比如圖中“關(guān)鍵詞”用搜索的放大鏡標(biāo)識，方便用戶理解含義。但是我們需要注意，額外的標(biāo)注符號太多可能會使折疊式卡片顯得很臃腫。

您也可以使用不同的顏色來區(qū)分不同的選項(xiàng)：

容器的樣式

擴(kuò)展元素

如果使用需要多個折疊卡片的組合，我們需要突出顯示展開狀態(tài)。使用這種方式能夠幫助用戶了解打開了哪個折疊式卡片，通俗來說就是通過突出的顯示方式與便于與其他折疊式卡片區(qū)分。以下是如何對突出顯示進(jìn)行樣式化：

有高度/深度的陰影
背景填充
輪廓邊框

盡管帶高度的陰影在白色和淺灰色表面上看起來很棒，但用 8% 到 12% 的不透明度填充擴(kuò)展的背景是一個很好的補(bǔ)充，同時也適用于白色表面。如果效果不太好，還可以為下拉擴(kuò)展欄添加輪廓描邊。

封閉式折疊卡片

我們可以用一個稍微明顯的分隔符來劃分項(xiàng)目，這種方法將節(jié)省一些垂直部分的空間。

分離式折疊卡片

有時折疊式卡片可以被很大的空間隔開。如果不需要節(jié)省垂直方向空間的話，可以用這種方法試試。

折疊式卡片的可用性

標(biāo)題作為預(yù)知信息

標(biāo)題能夠在用戶展開標(biāo)簽之前告知用戶能看到的內(nèi)容。在折疊卡片后，還可以看到用戶自己的選項(xiàng)。

標(biāo)注作為預(yù)知信息

標(biāo)注是另一種顯示折疊式卡片已選項(xiàng)數(shù)目的方式。

幫助文本

幫助文本對于折疊狀態(tài)的選項(xiàng)有一定的解釋作用，可以幫助用戶更好的理解該選項(xiàng)代表的意思。這種方式更適用于手機(jī)端 app。

移動試圖模式

全局觸控

使用全局觸控的折疊標(biāo)簽是最常見的做法。即使用戶不點(diǎn)擊下拉箭頭，點(diǎn)擊選項(xiàng)欄同樣可以展開擴(kuò)展框。

側(cè)邊菜單

可以將折疊式標(biāo)簽集成到導(dǎo)航抽屜中來打開擴(kuò)展欄。

過濾器

使用側(cè)邊欄和折疊式卡片是過濾器、屬性等選擇的最常見模式。

桌面視圖的模式

側(cè)面菜單

與移動端的界面類似，您可以為儀表板、桌面應(yīng)用程序等設(shè)計側(cè)邊折疊卡片式導(dǎo)航。

過濾器

根據(jù)界面布局的結(jié)構(gòu)特征，折疊式卡片（例如過濾器）可以放置在左側(cè)或右側(cè)。

相關(guān)鏈接

折疊式卡片組件（代碼）：

https://chakra-ui.com/docs/disclosure/accordion

折疊式卡片作為擴(kuò)展面板（代碼）：https://angular.setproduct.com/components/layout/accordion/examples

Material-X 手風(fēng)琴 (Figma)：

https://www.figma.com/file/bBEef35QRWh4sWrbKlME40/Material-X-Preview-v5?node-id=1089%3A52740

希望本文章對您有幫助！

— The End —

原文標(biāo)題：Designing Accordions: Best practices

文章來源：Prototypr

原創(chuàng)作者：Roman Kamushken

原文鏈接：https://blog.prototypr.io/designing-the-accordion-best-practices-3c1bd54bf26e

翻譯作者：平文凱

授權(quán)獲取：吳鵬飛

審核校對：王翎旭

文章編輯：章欣怡

該譯文并非完整原文，內(nèi)容已做部分調(diào)整。如在閱讀過程中發(fā)現(xiàn)錯誤與疏漏之處，歡迎不吝指出。如需轉(zhuǎn)載，請注明來自 三分設(shè)

本文已獲得作者正式授權(quán)，截圖如下：

熱門文章推薦

譯客專欄 2022 · 第 10 篇

虛擬校園產(chǎn)品的用戶體驗(yàn)升級
OOUX一個面向?qū)ο蟮捏w驗(yàn)設(shè)計思維
2022 年 UXUI 設(shè)計趨勢
欺騙、迷惑、拖延...五宗罪：用戶體驗(yàn)的陰暗模式
設(shè)計師們應(yīng)該多玩電子游戲，游戲化設(shè)計背后的極致體驗(yàn)
為數(shù)字項(xiàng)目制定用戶體驗(yàn)策略的 6 個實(shí)用工具！
符號學(xué)分析導(dǎo)論，圖標(biāo)構(gòu)建的 3 大要素
在校的學(xué)弟學(xué)妹們，想要進(jìn)大廠實(shí)習(xí)，請務(wù)必提前準(zhǔn)備！
Google 最新的設(shè)計語言 MATERIAL YOU 來了，7 年以來最大更新
解密設(shè)計系統(tǒng)的 11 大優(yōu)點(diǎn)，終于可以說服你的管理層

我們一起聊設(shè)計

三分設(shè)·微信讀者群/城市群

歡迎添加 ?? 星標(biāo)，獲取每日好文推薦，每天早上 8 點(diǎn)，準(zhǔn)時充電。加入設(shè)計微信交流群 三分設(shè)讀者 5 群，期待與更多優(yōu)秀用戶體驗(yàn)設(shè)計師一起成長，添加益達(dá) 微信號【 Lil_Bug 】or【 Red-boy2020】，備注【 三分設(shè)讀者 】加入讀者群！

分享設(shè)計心得，定期直播，零距離連麥，答疑解惑

↓↓↓點(diǎn)開『閱讀原文』，歡迎你的加入星球

折疊式卡片的實(shí)踐案例（文末附組件）

點(diǎn)擊 ▲ 三分設(shè) 關(guān)注，和 6 萬設(shè)計師一起學(xué)習(xí)進(jìn)步