當(dāng)前位置：首頁(yè) >UI設(shè)計(jì) >網(wǎng)頁(yè)設(shè)計(jì)中的選項(xiàng)卡式小部件:UI示例和免費(fèi)插件

網(wǎng)頁(yè)設(shè)計(jì)中的選項(xiàng)卡式小部件:UI示例和免費(fèi)插件

發(fā)布時(shí)間：2024-04-08 18:57:07 瀏覽量：202次

某些布局與制表符合作得很好。您可以在頁(yè)面上顯示/隱藏內(nèi)容，如問(wèn)答部分或通過(guò)Ajax加載動(dòng)態(tài)內(nèi)容。

麻煩的是將標(biāo)簽添加到一個(gè)工作正常并易于設(shè)置的頁(yè)面中。

如果您想在設(shè)計(jì)中添加自定義選項(xiàng)卡，本文將對(duì)您有所幫助。我已經(jīng)策劃了大量實(shí)例以及免費(fèi)插件，以幫助您使用選項(xiàng)卡式小部件設(shè)置殺手級(jí)界面。

選項(xiàng)卡式UI設(shè)計(jì)理念

讓我們先看一些實(shí)際的例子來(lái)展示你可以用標(biāo)簽做些什么。

這些示例全部托管在CodePen上，因此您可以實(shí)際編輯，分叉和克隆您的項(xiàng)目。

首先是由CodePen的共同創(chuàng)始人Chris Coyier開(kāi)發(fā)的一個(gè)片段。

這顯示了如何設(shè)計(jì)實(shí)際上看起來(lái)像標(biāo)簽并且很好地融入頁(yè)面的標(biāo)簽。

這是我總是向想要?jiǎng)?chuàng)建多標(biāo)簽小部件的人推薦的一種設(shè)計(jì)趨勢(shì)。確保選定的選項(xiàng)卡自然融入頁(yè)面背景的其余部分。

在這個(gè)例子中，您會(huì)注意到所選標(biāo)簽的背景全部為白色，并且沒(méi)有頂部邊框。這就是你應(yīng)該做的混合。

同樣，此代碼段也遵循類似的設(shè)計(jì)，但重點(diǎn)關(guān)注標(biāo)簽下方的內(nèi)容。

每當(dāng)您選擇一個(gè)標(biāo)簽時(shí)，文本會(huì)自動(dòng)變?yōu)榇煮w，標(biāo)簽會(huì)出現(xiàn)在其他標(biāo)簽的“頂部”。

這表示一個(gè)視覺(jué)層次結(jié)構(gòu)，這在UI / UX設(shè)計(jì)中是一個(gè)大問(wèn)題。這是我絕對(duì)推薦的大標(biāo)簽小部件。

您還可以提高標(biāo)簽的高度，同時(shí)增加字體重量的任何標(biāo)簽尺寸。例如，這段代碼不使用標(biāo)簽，但它確實(shí)增加了標(biāo)簽的高度以及其位置與其他標(biāo)簽的位置。

我也很喜歡這里的顏色選擇。

他們吸引注意力，并融入布局。盡管這只是一個(gè)演示，但我認(rèn)為這是一個(gè)可以在真實(shí)網(wǎng)站上運(yùn)行的可用示例。

現(xiàn)在，您可以嘗試一種其他風(fēng)格的垂直方向標(biāo)簽。它們位于小部件的左側(cè)或右側(cè)，它們的工作方式完全相同，只是設(shè)計(jì)稍有不同。

CodePen中的這個(gè)例子提供了一個(gè)方便的帶有垂直標(biāo)簽的CSS參考界面。

它使用非常少的jQuery，非常適合非JS編碼器。但為了在您自己的頁(yè)面中實(shí)現(xiàn)這一點(diǎn)，您必須對(duì)設(shè)計(jì)進(jìn)行一些更改。

如果你堅(jiān)決反對(duì)JS的標(biāo)簽，你也可以嘗試純粹的CSS解決方案。這里有很多，這里有四個(gè)很好的例子：

純粹的CSS3標(biāo)簽

標(biāo)簽

響應(yīng)式CSS選項(xiàng)卡

純粹的CSS選項(xiàng)卡

如果你使用JS驅(qū)動(dòng)的標(biāo)簽，你仍然擁有更多的控制權(quán)。這就是為什么我經(jīng)常用腳本角度來(lái)覆蓋制表符，并推薦使用JS驅(qū)動(dòng)的制表符插件。

在我們進(jìn)入免費(fèi)插件之前，我想介紹更多的設(shè)計(jì)主題：響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。

如果你可以設(shè)計(jì)你的標(biāo)簽以充分響應(yīng)，那么你有一個(gè)可用的小部件，可以在任何設(shè)備上運(yùn)行。以Andy Fitzsimon創(chuàng)建的這個(gè)片段為例。

它具有一個(gè)美麗的儀表板用戶界面，整個(gè)事情是完全響應(yīng)。只需調(diào)整瀏覽器窗口的大小即可了解它的工作原理。

智能手機(jī)用戶將有一個(gè)滑動(dòng)菜單，而不是一個(gè)標(biāo)簽式小部件，但行為非常相似。這是在小屏幕上處理標(biāo)簽的最佳方式。

所有這些演示都提供了關(guān)于如何為自己的網(wǎng)站構(gòu)建標(biāo)簽的指南，但請(qǐng)記住它們只是指南。

您可以隨時(shí)測(cè)試不同的用戶界面/用戶體驗(yàn)技術(shù)，讓您的受眾受益并了解他們?nèi)绾卧诓煌牟季种泄ぷ鳌?/p>

免費(fèi)的標(biāo)簽頁(yè)UI插件

為了讓您開(kāi)始構(gòu)建選項(xiàng)卡，我在此列出了一些我最喜歡的插件。

這些都是完全免費(fèi)的，并在GitHub上開(kāi)源，因此您可以將它們用于您喜歡的任何項(xiàng)目。這些提供了一個(gè)更簡(jiǎn)單的方式來(lái)創(chuàng)建制表符，而不是從頭開(kāi)始編碼，更不用說(shuō)還有很多種類可供選擇。

SmartTab插件基于jQuery構(gòu)建，非常易于使用。這也是自定義UI風(fēng)格與任何網(wǎng)站匹配的最佳選擇之一。

你可以在主頁(yè)上找到屏幕截圖，還有一個(gè)演示頁(yè)面，你可以查看。

這是另一個(gè)名為Easy Tabs的超靈活jQuery插件。它的構(gòu)建是輕量級(jí)的，易于與任何框架或樣式表一起使用，它只需要更多的樣式來(lái)看起來(lái)不錯(cuò)。

查看演示的主頁(yè)以及代碼片段和直接下載鏈接。

我喜歡Tabbed Content的一點(diǎn)是你可以在jQuery或Zepto之上運(yùn)行它。它很容易成為品種和定制的最佳插件。

作為默認(rèn)風(fēng)格，它是相當(dāng)平淡的，但對(duì)開(kāi)發(fā)人員來(lái)說(shuō)是一個(gè)很好的選擇。

如果你曾經(jīng)使用Skeleton框架并且喜歡它，那么你會(huì)非常喜歡由Nathan Cahill創(chuàng)建的這些標(biāo)簽。

它們很好地融入極簡(jiǎn)主義風(fēng)格，它們的表現(xiàn)完全符合您對(duì)標(biāo)簽元素的期望。迄今為止我見(jiàn)過(guò)的最酷的功能。

在類似的話題上，如果你是一個(gè)大的React開(kāi)發(fā)人員，那么請(qǐng)查看這些React.js選項(xiàng)卡。這是一個(gè)非常簡(jiǎn)單的插件，可以添加到您的前端，并且完全符合典型的React語(yǔ)法。

網(wǎng)絡(luò)上的可訪問(wèn)性正在迅速成為網(wǎng)頁(yè)設(shè)計(jì)的常態(tài)。這就是為什么我強(qiáng)烈推薦這些標(biāo)簽為WAI為重點(diǎn)的設(shè)計(jì)師。

你可以挖掘他們的網(wǎng)站來(lái)了解更多，但它很難閱讀。

請(qǐng)放心，此易用插件符合WAI-ARIA規(guī)范，因此您可以為訪問(wèn)者提供最容易訪問(wèn)的選項(xiàng)卡。

Tab UI靈感

尋找更多的想法來(lái)幫助你設(shè)計(jì)真棒標(biāo)簽？

那么，我做了這個(gè)簡(jiǎn)短的UI畫(huà)廊，以鼓勵(lì)所有設(shè)計(jì)移動(dòng)應(yīng)用程序或網(wǎng)站的標(biāo)簽小部件的設(shè)計(jì)師。這些設(shè)計(jì)具有垂直和水平標(biāo)簽，簡(jiǎn)約設(shè)計(jì)，圖標(biāo)，幾乎所有的各種樣式。

看看這些模型，看看你是否可以為自己的標(biāo)簽小部件收集一些簡(jiǎn)潔的想法。