中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

一、什么是折疊式卡片？

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

二、要點

1. 狀態(tài)

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

2. V 型圖標的位置

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

您也可以使用這些符號代替“V 型”圖標：

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

3. 附加符號

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

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

三、容器的樣式

1. 擴展元素

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

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

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

2. 封閉式折疊卡片

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

3. 分離式折疊卡片

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

四、折疊式卡片的可用性

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

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

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

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

3. 幫助文本

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

五、移動試圖模式

1. 全局觸控

使用全局觸控的折疊標簽是最常見的做法。即使用戶不點擊下拉箭頭，點擊選項欄同樣可以展開擴展框。

2. 側(cè)邊菜單

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

3. 過濾器

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

六、桌面視圖的模式

1. 側(cè)面菜單

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

2. 過濾器

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

相關(guān)鏈接

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

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

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

Material-X 手風琴 (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

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

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

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