激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

純粹的CSS3標(biāo)簽

標(biāo)簽

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Tab UI靈感

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

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

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

我希望這篇文章能夠提供一些靈感，設(shè)計(jì)思路和免費(fèi)插件，讓您開始構(gòu)建自己的選項(xiàng)卡式小部件。

設(shè)計(jì)適合您網(wǎng)站的標(biāo)簽可能需要一段時間。 但是，如果您遵循這些技術(shù)，您將擁有更清晰的布局，并為最終用戶帶來根本改善的體驗(yàn)。

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定