編輯導(dǎo)語：折疊式卡片設(shè)計(jì)在日常生活中十分常見，但在設(shè)計(jì)上，它所要考慮的細(xì)節(jié)有很多。如何在UI上兼顧界面美觀與用戶體驗(yàn)，設(shè)計(jì)出優(yōu)秀的折疊式卡片？本篇文章里，作者結(jié)合實(shí)際案例進(jìn)行了設(shè)計(jì)總結(jié)，一起來看看吧。

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

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

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

一、什么是折疊式卡片？

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

二、要點(diǎn)

1. 狀態(tài)

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

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

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

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

• 脫字號(hào)：^
• 箭頭：↑↓
• 加減號(hào)：+ / –

3. 附加符號(hào)

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

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

三、容器的樣式

1. 擴(kuò)展元素

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

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

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

2. 封閉式折疊卡片

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

3. 分離式折疊卡片

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

四、折疊式卡片的可用性

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

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

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

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

3. 幫助文本

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

五、移動(dòng)試圖模式

1. 全局觸控

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

2. 側(cè)邊菜單

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

3. 過濾器

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

六、桌面視圖的模式

1. 側(cè)面菜單

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

2. 過濾器

根據(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

該譯文并非完整原文，內(nèi)容已做部分調(diào)整。

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

原文作者：Roman Kamushken

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

譯者：平文凱；微信公眾號(hào)：三分設(shè)（ID：SFun-Share）；用戶體驗(yàn)設(shè)計(jì)師成長社區(qū)

本文由@三分設(shè) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

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