高仿富途牛牛-組件化-界面美化

、概述

今天是組件化的第三篇文章了，前兩篇文章主要是以功能為主，分別講解了高仿富途牛牛-組件化(一)-支持頁簽拖拽、增刪、小工具和高仿富途牛牛-組件化(二)-磁力吸附，其中也不乏有一些小的bug，不過這些都不是問題。

之前的效果展示只是為了表達意思，界面是真的丑，標準的程序員審美，哈哈哈。今天這篇文章主要是對之前的程序進行了美化，并且進行了一些bug的修改。

效果美化是參照富途牛牛做的，雖然不是一模一樣，但是確實比之前的效果好了一些，喜歡的同學可以參考下。

文章最后會把描述顯示效果的qss文件貼上，希望可以幫到大家

二、效果展示

下面gif圖所示，錄制的時間比較長，大家可以仔細看下，交互效果完全是參照富途牛牛做的，如有問題，歡迎提出。感謝！！！

歡迎大家提出問題，交互、配色都可以

三、工具箱

工具箱是一個很重要的功能。我們的每一個獨立組件模板都擁有一個工具箱。

工具箱自身支持移動
組件模板移動時會聯動工具箱移動（工具箱和組件模板的相對位置不變）

下面我們來分析下工具箱是怎么做的

1、布局

首先，從界面布局上我們先來說下，工具箱從整體顏色劃分上，可以分為兩個部分：標題欄和客戶區窗口。

a、標題欄

標題欄我們是一個窗口的眼睛，通過標題欄的命名我們可以看到這個窗口是干什么的，例如展示圖中所示，交易、迷你報價、自選股、今日統計等等。

除此之外，標題欄還提供了一個很靈活的操作：移動窗口，我們可以通過鼠標按下標題欄來進行窗口拖拽

這里我們為了實現這個功能，重寫了QWidget的三個接口，實現內容都比較簡單，這里就不做說明了，有興趣的自行百度，網上一大堆。

virtual void mousePressEvent(QMouseEvent *) override;
virtual void mouseMoveEvent(QMouseEvent *) override;
virtual void mouseReleaseEvent(QMouseEvent *) override;

最后也是很重要的一點，那就是標題欄還支持關閉窗口，我們通過點擊標題欄上的關閉按鈕，可以關閉當前窗口。

對于工具箱來說，我們也可以通過點擊組件模板工具欄上的按鈕進行關閉

b、客戶區

一個窗口除過標題欄以為剩下的就是客戶區了，客戶端使我們展示展示數據的主要地方，展示效果中的工具箱里邊包含了很多工具按鈕，包括通用頁簽下的迷你報價、自選股、短線精靈，和港股頁簽下的迷你報價、交易、賬戶等等。

工具箱的客戶端我們這里是只有一個QTabWidget類，而通用和港股頁簽就是QTabWidget下的兩個頁簽。

每個頁簽里邊都是一個QListWidget，我給QListWidget設置了圖表展示模式，讓他有了一個鐘按鈕的顯示風格。

2、功能詳解

上邊我們主要分析了工具箱的一個組成部分，接下來我將會從更為詳細的代碼層面說明工具箱的實現過程，其中可能會包含一些qss樣式表，全部的樣式表將會在文章最后貼出

上邊已經提供到兩個頁簽里邊的工具按鈕都是包含在QListWidget控件中的，下面我直接貼出頁簽初始化的關鍵代碼

void ToolBoxDialog::InitializeTools(int start, int end, const QString & title)
{
	QListWidget * normalWidget = new QListWidget;

	normalWidget->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
	normalWidget->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);

	connect(normalWidget, &QListWidget::itemClicked, this, &ToolBoxDialog::ItemClicked);

	normalWidget->setDragEnabled(false);
	normalWidget->setViewMode(QListView::IconMode);
	normalWidget->setResizeMode(QListView::Adjust);
	normalWidget->setSpacing(3);

	for (int i = start; i < end; ++i)
	{
		normalWidget->addItem(createItem(toolNames[i], toolTypes[i]));
	}

	m_pTabWidget->addTab(normalWidget, title);
}

從上邊代碼可以看出，我們的列表使用了圖標(QListView::IconMode)顯示模式，并且設置了圖標項不可以拖拽。

最后我們使用一個循環構造了很多item，插入到了QListWidget控件中

樣式美化代碼如下，不了解Qss語法的可以參考qt qss這篇文章，我以前寫的，比較詳細。

QDialog#ToolBoxDialog QTabWidget::pane { border-top: 1px solid #2B3236; }
QDialog#ToolBoxDialog QTabWidget::tab-bar { top:1px;}
QDialog#ToolBoxDialog QTabBar::tab { background:#1D2224;border-bottom: 1 solid #2B3236; min-width: 20ex; padding: 4px; color:#919AA3; }
QDialog#ToolBoxDialog QTabBar::tab:selected {      border-bottom: 1 solid #FF9900; }
QDialog#ToolBoxDialog QTabBar::tab:hover {      border-bottom: 1 solid #FFB700; }
QDialog#ToolBoxDialog QTabBar::tab:!selected:!hover {      border-bottom: 1 solid #2B3236; }

QDialog#ToolBoxDialog QListView{border:0px solid blue;margin-top:12px;margin-left:12px;outline:none;}
QDialog#ToolBoxDialog QListView::item{padding-top:10px;border:1 solid transparent;}
QDialog#ToolBoxDialog QListView::item:hover{color:#FF9900;background:#6B7276;}

最后也是最重要的一點，item我們是怎么構造的

static QListWidgetItem * createItem(const QString & text, SubWindowNormalType type)
{
	QListWidgetItem * item = new QListWidgetItem;

	item->setSizeHint(QSize(72, 72));//設置項大小
	item->setFlags(item->flags() & ~Qt::ItemIsSelectable);//設置項不可以被選中
	item->setText(text);
	item->setData(UserType, type);
	item->setIcon(QPixmap("./image/mainWindow/tquant-btn_normal.png"));//設置圖標

	return item;
}

代碼比較簡單，但是需要特別注意，代碼中調用的每一個接口，都是必不可少的。

四、組件模板工具欄

關于工具欄的實現，我們可以參考高仿富途牛牛-組件化(一)-支持頁簽拖拽、增刪、小工具這篇文章，今天這篇文章我們只講解怎么美化，雖然美化效果沒有很明顯，我們還是湊合著看吧。

這里同樣也是使用了Qt的動態屬性功能，這真是Qt的一個很強大的能力，有了動態屬性，我們可以很容易的做出一些交互上比較復雜的效果。

鼠標hover時的文字顏色就是使用了動態屬性來實現。仔細看如下qss樣式表，當QLabel的Hovered屬性為true時（實際上QLabel并沒有達到hover，這里我們是模擬了hover行為），我們啟用了一種新的文字顏色。

TabButton#tab_Button:hover{border-bottom:1 solid #FFB700;}
TabButton#tab_Button[Selected=true]{border-bottom:1 solid #FF9900;color:#FF9900;}
TabButton#tab_Button QLabel[Hovered=true]{color:#FF9900;}
TabButton#tab_Button QLabel[SelectedColor=true]{color:#FF9900;}
TabButton#tab_Button QToolButton{border:0px;border-image:url(./image/common/titlebar_normal.png) 0 0 0 78;}
TabButton#tab_Button QToolButton:hover{border:0px;border-image:url(./image/common/titlebar_hover.png) 0 0 0 78;}

再看實現代碼，當我們的鼠標移入自定義的標簽頁按鈕時，給子控件（文本控件）設置了動態屬性，并刷新了界面。

void TabButton::enterEvent(QEvent * event)
{
	m_pTitle->setProperty("Hovered", "true");
	m_pTitle->style()->unpolish(m_pTitle);
	m_pTitle->style()->polish(m_pTitle);

	__super::enterEvent(event);
}

自定義的頁簽按鈕，本身是一個QWidget，他內部包含了QLabel文本和QToolButton關閉按鈕，為了讓QLabel還沒有hover的時候，我們給他制造一種hover假象，我們使用了動態屬性。

這個組件化demo中使用動態屬性的地方其實比較多，這里就不一一例舉出來了，說明一個，大家知道有這么會事，自己也學會使用即可

五、其他界面美化

講完工具箱和組件模板工具欄美化之后，其他界面的美化就比較簡單了。

剩下的就是subPanel和小窗口的美化，這里我重點說下小窗口的美化，有一個邊框顏色的改變這個地方。

當小窗口獲取焦點時，邊框是黃色的，失去焦點時邊框是灰色的

實現方式如下，這里我重寫了窗口獲取焦點和失去焦點的接口，并且進行設置了Qt內置的動態屬性，然后在qss中對屬性進行了樣式配置

代碼如下

//獲取焦點時
void SmallWidget::focusInEvent(QFocusEvent * event)
{
	setProperty("SelectedWidget", "true");

	style()->unpolish(this);
	style()->polish(this);

	__super::focusInEvent(event);
}
//失去焦點時
void SmallWidget::focusOutEvent(QFocusEvent * event)
{
	setProperty("SelectedWidget", "false");

	style()->unpolish(this);
	style()->polish(this);

	__super::focusOutEvent(event);
}

qss樣式如下

QWidget#small_widget_title
{
	border-bottom:1 solid #2B5470;background:#292F33;
}
QWidget#SmallWidget
{
	border:1 solid #474F57;background:#1D2224;
}
QWidget#SmallWidget[SelectedWidget=true]
{
	border:2 solid #FFE100;
}

是不是很簡單，哈哈哈哈。

最后我貼出完整的qss樣式表，為了顯示更多內容，這里我把多余的換行符都去掉了。

QDialog{	border:1px solid #7b8187}
QWidget{	background:#28323f;color:#DDDDDD;}

QWidget#small_widget_title{	border-bottom:1 solid #2B5470;background:#292F33;}
QWidget#SmallWidget{	border:1 solid #474F57;background:#1D2224;}
QWidget#SmallWidget[SelectedWidget=true]{	border:2 solid #FFE100;}
QWidget#DragToolBar{	background:#1D2224;border-bottom:1 solid #2B3236;}
QWidget#ToolBoxTitle{	border-bottom:1 solid #2B5470;background:#292F33;}
QWidget#ToolBoxDialog{	background:#28323F;border:1 solid #474F57;}

TabButton#tab_Button:hover{border-bottom:1 solid #FFB700;}
TabButton#tab_Button[Selected=true]{border-bottom:1 solid #FF9900;color:#FF9900;}
TabButton#tab_Button QLabel[Hovered=true]{color:#FF9900;}
TabButton#tab_Button QLabel[SelectedColor=true]{color:#FF9900;}
TabButton#tab_Button QToolButton{border:0px;border-image:url(./image/common/titlebar_normal.png) 0 0 0 78;}
TabButton#tab_Button QToolButton:hover{border:0px;border-image:url(./image/common/titlebar_hover.png) 0 0 0 78;}

QDialog#ToolBoxDialog QTabWidget::pane { border-top: 1px solid #2B3236; }
QDialog#ToolBoxDialog QTabWidget::tab-bar { top:1px;}
QDialog#ToolBoxDialog QTabBar::tab { background:#1D2224;border-bottom: 1 solid #2B3236; min-width: 20ex; padding: 4px; color:#919AA3; }
QDialog#ToolBoxDialog QTabBar::tab:selected {      border-bottom: 1 solid #FF9900; }
QDialog#ToolBoxDialog QTabBar::tab:hover {      border-bottom: 1 solid #FFB700; }
QDialog#ToolBoxDialog QTabBar::tab:!selected:!hover {      border-bottom: 1 solid #2B3236; }

QDialog#ToolBoxDialog QListView{border:0px solid blue;margin-top:12px;margin-left:12px;outline:none;}
QDialog#ToolBoxDialog QListView::item{padding-top:10px;border:1 solid transparent;}
QDialog#ToolBoxDialog QListView::item:hover{color:#FF9900;background:#6B7276;}

六、使用qss文件

設置外部qss文件的流程如下：

找到qss文件
加載qss文件
通過QApplication::setStyleSheet設置樣式表

這樣是一種比較冷通的設置方式，一旦qss文件比較大，會出現這句代碼卡頓的情況。如果想要更好的性能，qss建議還是分開來寫，至于怎么合理的拆分qss文件，可以根據自己的需求來拆分

點擊領取Qt學習資料+視頻教程~「鏈接」

這里提供我之前使用過的兩種方式

控件級別，每個控件對應一個qss文件
功能級別，一個功能模塊一個qss文件

拆分的好處我就不多說了，誰用誰知道！！！

話不多說，直接上代碼了。

言

本文是筆者寫CSS時常用的套路。不論效果再怎么華麗，萬變不離其宗。

之前發的CSS技巧大部分都是依照本文的套路來寫的。

有人問我為什么我能想出這么多的動畫？筆者閱番百部，對常用的動畫技巧了如指掌，同樣那些酷炫的網站只要細心觀察，也會給筆者帶來很多設計上的靈感。

一言以蔽之：只有多欣賞動畫，才能寫出好的動畫。

01、交錯動畫

有時候，我們需要給多個元素添加同一個動畫，播放后，不難發現它們會一起運動，一起結束，這樣就會顯得很平淡無奇。

那么如何將動畫變得稍微有趣一點呢？很簡單，既然它們都是同一時刻開始運動的，那么讓它們不在同一時刻運動不就可以了嗎。如何讓它們不在同一時刻運動呢？注意到CSS動畫有延遲（delay）這一屬性。舉個栗子，比如有十個元素播放十個動畫，將第二個元素的動畫播放時間設定為比第一個元素晚0.5秒（也就是將延遲設為0.5秒），其他元素以此類推，這樣它們就會錯開來，形成一種獨特的視覺效果。

這就是所謂的交錯動畫：通過設置不同的延遲時間，達到動畫交錯播放的效果。

本demo地址：

https://codepen.io/alphardex/pen/XWWWBmQ

02、用JS分割文本

還有一種經常用到的玩法：用JS將句子或單詞分割成字母，并給每個字母加上不同延時的動畫，同樣也很華麗

本demo地址：

https://codepen.io/alphardex/full/KKwvKGY

一般我們都是從第一個元素開始交錯的。但如果要從中間元素開始交錯的話，就要給當前元素的延時各加上一個值，這個值就是中間元素的下標到當前元素的下標的距離（也就是下標之差的絕對值）與步長的乘積，即：delay + Math.abs(i - middle) * step，其中中間元素的下標middle = letters.filter(e => e !== "").length / 2

本demo地址：

https://codepen.io/alphardex/full/eYYMYXJ

所有有交錯特性的動畫都在這兒

https://codepen.io/alphardex/pens/tags/?selected_tag=staggered

03、隨機粒子動畫

說到隨機性，我們可以實現一種更瘋狂的效果：給幾百個粒子添加交錯動畫，并且交錯時間隨機，位置大小也都是隨機。如此一來我們就能用純CSS模擬出下雪的效果。

又到了白色相簿的季節呢~為什么你寫CSS這么熟練啊？

本demo地址：

https://codepen.io/alphardex/full/dyPorwJ

04、偽類

HTML元素的狀態是可以動態變化的。舉個栗子，當你的鼠標懸浮到一個按鈕上時，按鈕就會變成“懸浮”狀態，這時我們就可以利用偽類:hover來選中這一狀態的按鈕，并對其樣式進行改變。

:hover是筆者最最常用的一個偽類。還有一個很常用的偽類是:nth-child，用于選中元素的某一個子元素。其他的類似:focus、:focus-within等也有一定的使用。

本demo地址：

https://codepen.io/alphardex/pen/pooYKVa

所有:hover的動畫都在這兒

https://codepen.io/alphardex/pens/tags/?selected_tag=hover

05、絕對定位實現多重邊框

誰規定按鈕只能有一套邊框的？利用絕對定位和padding，我們可以給按鈕做出3套大小不一的邊框來，這樣效果更炫了有木有！

本demo地址：

https://codepen.io/alphardex/full/ZEYXomW

06、偽元素

簡而言之，偽元素就是在原先的元素基礎上插入一個額外的元素，而且這個元素不充當HTML的標簽，這樣就能保持HTML結構的整潔。

什么情況下用偽元素呢？比如實現一根條子劃過文本的動畫，在這個動畫中每個文本都有屬于自己的一根條子，那么我們就可以用偽元素為每個文本生成一個條子，而無需特地在HTML標簽中加入條子的div（當然，如果條子數量超過了2個，還是用div吧）

本demo地址：

https://codepen.io/alphardex/pen/jOEOEzZ

07、overflow障眼法

之前有做過閃光按鈕的效果：鼠標懸浮按鈕上時一道光從左到右劃過去。

筆者就用漸變來模擬那道光，通過transform: translateX()將其平移至右邊。

但這樣明顯不對啊，這光為啥能被看見呢？不應該把它給“擋”起來嗎？

于是乎，給按鈕加上overflow: hidden，光在按鈕外的位置時就被隱藏起來了。

這就是障眼法的力量:)

本demo地址：

https://codepen.io/alphardex/pen/eYYzXBZ

更多障眼法可以看看這個作品，一次性看個夠XD

https://codepen.io/alphardex/pen/VwwVLdM

08、兄弟選擇符定制表單元素

提示：這里最好將input作為label的子元素，這樣用戶點擊label時就能傳到input上默認的input太丑怎么辦？那就把它先抹掉，用appearance: none或opacity: 0都可以。

然后，利用兄弟選擇符~來定制和input相鄰的所有元素（+號也行，只不過只能選中最近的元素），例如可以用偽元素生成一個新的方框代替原先的input，利用偽類:checked和動畫來表示它被勾選后的狀態，本質上還是障眼法哦~

本demo地址：

https://codepen.io/alphardex/full/rNNPQwa

善用某些CSS特性，也可以為你的作品增色不少哦。

09、transform

PS里的自由變換，各種CSS動畫都離不開它。它也可以進行3D變換。

例子就不舉了，因為幾乎我所有的動畫都用到了它。

10、border-radius

為盒子添加圓角，經常用來美化按鈕等組件。

如果設定為50%則是圓形，也很常用。

11、不規則的曲邊形狀

調整多個頂點的border-radius可以做出不規則的曲邊形狀

本demo地址：

https://codepen.io/alphardex/full/abbWOPR

12、box-shadow

為盒子添加陰影，增加盒子的立體感，如果多層疊加的話會使陰影更加絲滑。

本demo地址：

https://codepen.io/alphardex/full/QWwwwpp

13、遮罩

如果給box-shadow的擴張半徑設定足夠大的值，可以用它來遮住背景，而無需額外的div元素。

本demo地址：

https://codepen.io/alphardex/full/BaaKvVZ

14、內發光

注意到box-shadow還有個inset，用于盒子內部發光。

利用這個特性我們可以在盒子內部的某個范圍內設定顏色，做出一個新月形。

再加點動畫和濾鏡效果，“猩紅之月”閃亮登場！

本demo地址：

https://codepen.io/alphardex/full/eYmGEGp

15、text-shadow

文本陰影，本質上和box-shadow相同，只不過是相對于文本而言，常用于文本發光，也可通過多層疊加來制作霓虹文本和偽3D文本等效果。

16、發光文本

本demo地址：

https://codepen.io/alphardex/full/Exxodoq

17、霓虹文本

本demo地址：

https://codepen.io/alphardex/full/rNNwmZz

18、偽3D文本

本demo地址：

https://codepen.io/alphardex/full/QWWavvx

19、background-clip:text

能將背景裁剪成文字的前景色，常用來和color: transparent配合生成漸變文本

本demo地址：

https://codepen.io/alphardex/full/QWwveZG

20、gradient

漸變可以作為背景圖片的一種，具有很強的色彩效果，甚至可以用來模擬光

21、linear-gradient

線性漸變是筆者最常用的漸變：

這個作品用到了HTML的dialog標簽，漸變背景，動畫以及overflow障眼法，細心的你看出來了嗎:)

本demo地址：

https://codepen.io/alphardex/full/eYYxzBm

22、radial-gradient

徑向漸變筆者沒怎么用過，上面例子中Snow的背景就是一個徑向漸變。

https://codepen.io/alphardex/full/dyPorwJ

23、conic-gradient

圓錐漸變可以用于制作扇形，因此配合CSS變量筆者制作了一個度量計，也用到了偽元素障眼法。

本demo地址：

https://codepen.io/alphardex/full/BaydVvQ

24、filter

PS里的濾鏡，玩過的都懂，blur最常用

25、backdrop-filter

對背景應用濾鏡，產生毛玻璃的效果。

本demo地址：

https://codepen.io/alphardex/full/pooQMVp

26、mix-blend-mode

PS里的混合模式，常用于文本在背景下的特殊效果。

以下利用濾色模式（screen）實現文本視頻蒙版效果。

本demo地址：

https://codepen.io/alphardex/full/wvvLYpV

27、clip-path

PS里的裁切，可以制作各種不規則形狀。如果和動畫結合也會相當有意思。

本demo地址：

https://codepen.io/alphardex/full/ZEEBRrq

28、-webkit-box-reflect

投影效果，不怎么常用，適合立體感強的作品。

本demo地址：

https://codepen.io/alphardex/full/ExaZgxp

29、web animations

雖然這并不是一個CSS特性，但是它經常用于完成那些CSS所做不到的事情。

那么何時用它呢？當CSS動畫中有屬性無法從CSS中獲取時，自然就會使用到它了。

30、跟蹤鼠標的位置

目前CSS還尚未有獲取鼠標位置的API，因此考慮用JS來進行。

通過查閱相關的DOM API，發現在監聽鼠標事件的API中，可通過e.clientX和e.clientY來獲得鼠標當前的位置。

既然能夠獲取鼠標的位置，那么跟蹤鼠標的位置也就不是什么難事了：通過監聽mouseenter和mouseleave事件，來獲取鼠標出入一個元素時的位置，并用此坐標來當作鼠標的位移距離，監聽mousemove事件，來獲取鼠標在元素上移動時的位置，同樣地用此坐標來當作鼠標的位移距離，這樣一個跟蹤鼠標的效果就實現了。

本demo地址：

https://codepen.io/alphardex/full/OJPmQGz

31、彩蛋

將交錯動畫和偽類偽元素結合起來寫出來的慎重勇者風格的菜單

本demo地址：

https://codepen.io/alphardex/full/ExavZdV

為一名UI設計師，PC端設計也是我們的主要工作職責，尤其在中后臺設計、官網設計、網站設計中，我們要熟知所有的web UI組件，今天給大家總結了關于web端UI組件，希望可以幫到你。

一、什么是UI組件

UI 設計組件（UI KIT），直譯過來就是用戶界面成套元件，是界面設計常用控件或元件，「組」是設計元素的組合方式，「件」由不同的元件組成。

二、組件的優勢

1、保證一致性 Consistency
與現實生活一致：與現實生活的流程、邏輯保持一致，遵循用戶習慣的語言和概念；在界面中一致：所有的元素和結構需保持一致，比如：設計樣式、圖標和文本、元素的位置等。

2、反饋用戶 Feedback
控制反饋：通過界面樣式和交互動效讓用戶可以清晰的感知自己的操作；頁面反饋：操作后，通過頁面元素的變化清晰地展現當前狀態。

3、提高效率，減少成本 Efficiency
簡化流程：設計簡潔直觀的操作流程；清晰明確：語言表達清晰且表意明確，讓用戶快速理解進而作出決策；幫助用戶識別：界面簡單直白，讓用戶快速識別而非回憶，減少用戶記憶負擔。

二、組件詳解

1、布局 Layout

A. 頂部-側邊布局-通欄布局，多用于應用型的網站

B. 側邊欄布局，采用側邊欄的頁面，多用于展示類網站

2、導航菜單 NavMenu

導航可以解決用戶在訪問頁面時：在哪里，去哪里，怎樣去的問題。一般導航分為“側邊欄導航”和“頂部導航”2 種類型。

選擇合適的導航可以讓用戶在產品的使用過程中非常流暢，相反若是不合適就會引起用戶操作不適（方向不明確），以下是「側欄導航」和「頂部導航」的區別。

A. 側邊欄導航
可將導航欄固定在左側，提高導航可見性，方便頁面之間切換；頂部可放置常用工具，如搜索條、幫助按鈕、通知按鈕等。適用于中后臺的管理型、工具型網站。

B. 頂部導航

順應了從上至下的正常瀏覽順序，方便瀏覽信息；頂部寬度限制了導航的數量和文本長度。

3、面包屑 Breadcrumb

面包屑，顯示當前頁面在系統層級結構中的位置，并能向上返回，提供一個有層次的導航結構, 并標明當前位置。

用法指南：

A. 當系統擁有超過兩級以上的層級結構時；B. 當需要告知用戶『你在哪里』時；C. 當需要向上導航的功能時。

4、按鈕 Button

按鈕用于開始一個即時操作。

用法指南：
標記了一個操作命令，響應用戶點擊行為，觸發相應的業務邏輯。

在設計中，基本有以下四種按鈕類型：

主要按鈕：用于主行動點，一個操作區域只能有一個主按鈕。

默認按鈕：用于沒有主次之分的一組行動點。

線性按鈕：常用于添加操作。

鏈接按鈕：用于次要或外鏈的行動點。

以及四種狀態屬性與上面配合使用。

危險：刪除/移動/修改權限等危險操作，一般需要二次確認。

幽靈：用于背景色比較復雜的地方，常用在首頁/產品頁等展示場景。

禁用：行動點不可用的時候，一般需要文案解釋。

加載中：用于異步操作等待反饋的時候，也可以避免多次提交。

5、下拉菜單 Dropdown

將動作或菜單折疊到下拉菜單中。

用法指南：

當頁面上的操作命令過多時，用此組件可以收納操作元素。點擊或移入觸點，會出現一個下拉菜單。可在列表中進行選擇，并執行相應的命令。

6、標簽頁 Tabs

選項卡切換組件，常用于平級區域大塊內容的的收納和展現。

基礎樣式

選項卡樣式

卡片式

7、分頁 Pagination

當數據量過多時，使用分頁分解數據。

8、單選框 Radio

在一組備選項中進行單選

9、復選框 Checkbox

一組備選項中進行多選

10、輸入框

通過鼠標或鍵盤輸入內容，是最基礎的表單域的包裝。

11、計數器/數字輸入框 InputNumber

通過鼠標或鍵盤，輸入范圍內的數值。

12、選擇器 Select
當選項過多時，使用下拉菜單展示并選擇內容。

13、級聯選擇器 Cascader
當一個數據集合有清晰的層級結構時，可通過級聯選擇器逐級查看并選擇。

用法指南：

A. 需要從一組相關聯的數據集合進行選擇，例如省市區，公司層級，事物分類等。B. 從一個較大的數據集合中進行選擇時，用多級分類進行分隔，方便選擇。C. 比起 Select 組件，可以在同一個浮層中完成選擇，有較好的體驗。

14、日期選擇器 DatePicker

用于選擇或輸入日期

15、時間選擇器 TimePicker

輸入或選擇日期的控件，當用戶需要輸入一個日期，可以點擊標準輸入框，彈出日期面板進行選擇。

16、日期時間選擇器 DateTimePicker

在同一個選擇器里選擇日期和時間

17、顏色選擇器 ColorPicker

用于顏色選擇

18、開關 Switch

表示兩種相互對立的狀態間的切換，多用于觸發「開/關」。

19、滑塊 Slider

通過拖動滑塊在一個固定區間內進行選擇

20、上傳 Upload

通過點擊或者拖拽上傳文件

用法指南：

A. 上傳是將信息（網頁、文字、圖片、視頻等）通過網頁或者上傳工具發布到遠程服務器上的過程。

B. 當需要上傳一個或一些文件時。

C. 當需要展現上傳的進度時。

D. 當需要使用拖拽交互時。

21、評分 Rate

評分組件

22、穿梭框 Transfer

雙欄穿梭選擇框。

用法指南：

A. 需要在多個可選項中進行多選時。B. 比起 Select 和 TreeSelect，穿梭框占據更大的空間，可以展示可選項的更多信息。
穿梭選擇框用直觀的方式在兩欄中移動元素，完成選擇行為。

23、表單 Form

由輸入框、選擇器、單選框、多選框等控件組成，用以收集、校驗、提交數據

用法指南：

A. 用于創建一個實體或收集信息。B. 需要對輸入的數據類型進行校驗時。

24、表格 Table

用于展示多條結構類似的數據，可對數據進行排序、篩選、對比或其他自定義操作。

25、標簽 Tag

進行標記和分類

26、進度條 Progress

用于展示操作進度，告知用戶當前狀態和預期。

用法指南：

在操作需要較長時間才能完成時，為用戶顯示該操作的當前進度和狀態。

27、樹選擇 TreeSelect

樹型選擇控件，用清晰的層級結構展示信息，可展開或折疊。

28、頁頭 PageHeader

頁頭位于頁容器中，頁容器頂部，起到了內容概覽和引導頁級操作的作用，包括由面包屑、標題、頁面內容簡介、頁面級操作等、頁面級導航組成。

29、標記/徽標數 Badge

出現在按鈕、圖標旁的數字或狀態標記

用法指南：

一般出現在通知圖標或頭像的右上角，用于顯示需要處理的消息條數，通過醒目視覺形式吸引用戶處理。

30、頭像 Avatar

用圖標、圖片或者字符的形式展示用戶或事物信息。

31、折疊面板 Collapse

可以折疊/展開的內容區域。

32、步驟條 Steps

引導用戶按照流程完成任務的分步導航條，可根據實際應用場景設定步驟，步驟不得少于 2 步。

33、警告提示 Alert

警告提示，展現需要關注的信息。

用法指南：

A. 當某個頁面需要向用戶顯示警告的信息時。B. 非浮層的靜態展現形式，始終展現，不會自動消失，用戶可以點擊關閉。

34、加載 Loading

加載數據時顯示動效

35、加載中 Spin

用于頁面和區塊的加載中狀態。

用法指南：

頁面局部處于等待異步數據或正在渲染過程時，合適的加載動效會有效緩解用戶的焦慮。

36、骨架圖 Spin

在需要等待加載內容的位置提供一個占位圖形組合。

用法指南：

A. 網絡較慢，需要長時間等待加載處理的情況下。B. 圖文信息內容較多的列表/卡片中。C. 只在第一次加載數據的時候使用。D. 可以被 Spin 完全代替，但是在可用的場景下可以比 Spin 提供更好的視覺效果和用戶體驗。

37、消息提示 Message

常用于主動操作后的反饋提示。與 Notification 的區別是后者更多用于系統級通知的被動提醒。

38、彈框 Messagebox

模擬系統的消息提示框而實現的一套模態對話框組件，用于消息提示、確認消息和提交內容。

39、通知 Notification

懸浮出現在頁面角落，顯示全局的通知提醒消息。

40、對話框 Dialog

在保留當前頁面狀態的情況下，告知用戶并承載相關操作。

41、文字提示 Tooltip

常用于展示鼠標 hover 時的提示信息。

42、氣泡卡片/彈出框 Popver

點擊/鼠標移入元素，彈出氣泡式的卡片浮層。

43、氣泡確認框 Popconfirm

點擊元素，彈出氣泡式的確認框。

44、卡片 Card

將信息聚合在卡片容器中展示。

45、走馬燈 Carousel

在有限空間內，循環播放同一類型的圖片、文字等內容

46、時間軸 Timeline

可視化地呈現時間流信息。

47、分割線 Divider

區隔內容的分割線

48、日歷 Calendar

按照日歷形式展示數據的容器。

49、陳述列表 Descriptions

成組展示多個只讀字段。常見于詳情頁的信息展示。

50、回到頂部 Backtop

返回頁面頂部的操作按鈕

用法指南：

A. 當頁面內容區域比較長時；

B. 當用戶需要頻繁返回頂部查看相關內容時。

51、結果 Result

用于反饋一系列操作任務的處理結果。

52、抽屜 Drawer

屏幕邊緣滑出的浮層面板。

抽屜從父窗體邊緣滑入，覆蓋住部分父窗體內容。用戶在抽屜內操作時不必離開當前任務，操作完成后，可以平滑地回到到原任務。

53、空狀態 Empty

空狀態時的展示占位圖，當目前沒有數據時，用于顯式的用戶提示。

54、列表 list

最基礎的列表展示，可承載文字、列表、圖片、段落，常用于后臺數據展示頁面

寫在最后

工欲善其事,必先利其器，充分了解每個組件所具備的功能和設計用法，能讓你的設計效率提升，看完這篇文章，希望你可以在設計網站、中后后臺界面時，不會再被各種各樣錯綜繁雜的組件弄得暈頭轉向，可以幫助你更好的選擇所需要的組件。

請私信我回復“666”，為嚴哥打Call~，還有更多驚喜哦~

.............................................................

UI嚴選—越努力，越幸運

在線咨詢

上一篇：你不可不知的HTML優化技巧，還不抓緊時間收藏
下一篇：HTML表格行技巧大揭秘：如何高效使用標簽提升網頁布局

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

高仿富途牛牛-組件化-界面美化

、概述

二、效果展示

三、工具箱

1、布局

a、標題欄

b、客戶區

2、功能詳解

四、組件模板工具欄

五、其他界面美化

六、使用qss文件

言

01、交錯動畫

02、用JS分割文本

03、隨機粒子動畫

04、偽類

05、絕對定位實現多重邊框

06、偽元素

07、overflow障眼法

08、兄弟選擇符定制表單元素

09、transform

10、border-radius

11、不規則的曲邊形狀

12、box-shadow

13、遮罩

14、內發光

15、text-shadow

16、發光文本

17、霓虹文本

18、偽3D文本

19、background-clip:text

20、gradient

21、linear-gradient

22、radial-gradient

23、conic-gradient

24、filter

25、backdrop-filter

26、mix-blend-mode

27、clip-path

28、-webkit-box-reflect

29、web animations

30、跟蹤鼠標的位置

31、彩蛋

B. 頂部導航

您的項目需求