很多人對APP中的卡片設(shè)計習(xí)以為常，但對于卡片設(shè)計流行的原因，優(yōu)點，以及如何做好卡片設(shè)計卻可能不甚了解。關(guān)于這些問題，彩云之前也寫過一篇非常受歡迎的卡片設(shè)計經(jīng)驗原創(chuàng)文章《想做好卡片設(shè)計，原來要注意這么多細(xì)節(jié)》，文章中講了非常多的卡片設(shè)計實用技巧。今天這篇國外大佬寫的文章，算是從為什么這樣做的角度來分析卡片設(shè)計，一起來學(xué)習(xí)吧。

從Instagram和Facebook這樣的社交媒體應(yīng)用到亞馬遜這樣的電商平臺，卡片設(shè)計似乎是無處不在的，這些大廠廣泛應(yīng)用使得卡片設(shè)計很快流行了起來。

作為一個信息容器，卡片能承載包括文本、富媒體、按鈕等所有UI元素?；谶@些內(nèi)容，卡片設(shè)計可以根據(jù)不同的設(shè)備和屏幕調(diào)整其大小，平衡界面視覺和用戶體驗。

什么是卡片設(shè)計？

卡片是一個UI組件，包含了某一個內(nèi)容的信息和操作?？ㄆ梢园鞣N元素，但它們都應(yīng)該屬于同一個主題。

這樣做的目的是為了避免冗長的文字，并呈現(xiàn)更多的內(nèi)容。即使從設(shè)計的角度來看，用戶可能不熟悉卡片的概念，但他們馬上就知道如何使用它們，因為它們與實體卡片是一樣的。（彩云注：這個就是用戶心理學(xué)中隱喻的運用）

為什么它會如此流行？

卡片之所以流行，是因為它們能更好的把控內(nèi)容。卡片是模塊化的，所以不同的內(nèi)容可以堆疊在一起，而不需要注意它們的差異。

卡片通過強(qiáng)制內(nèi)容適應(yīng)卡片邊界和卡片布局上的限制來聚焦內(nèi)容。設(shè)計師喜歡通過卡片混排大量內(nèi)容，而無需擔(dān)心設(shè)計會變得雜亂無章。

卡片可以將內(nèi)容分解成易于理解的小塊，以便用戶與之互動。通過給內(nèi)容一個容器，卡片向用戶表明內(nèi)容是真實和感性的。

卡片 UI 設(shè)計流行的原因還有很多：

• 直觀：卡片在界面中看起來與現(xiàn)實世界中的卡片相同，它們對用戶來說似乎很常見。在卡片成為移動和網(wǎng)絡(luò)應(yīng)用中的流行元素之前，它們在現(xiàn)實生活中無處不在：名片、棒球卡、便簽?？ㄆ砹艘环N有益的視覺類比，它允許我們的大腦直觀地將卡片與其所代表的內(nèi)容聯(lián)系起來，就像在現(xiàn)實生活中一樣。

  
  

• 易于閱讀：卡片不占用太多空間，并敦促設(shè)計師優(yōu)先考慮其內(nèi)容。不同的是，每張卡片都變成了易于閱讀的內(nèi)容?？ㄆ層脩舾菀渍业剿麄兏信d趣的內(nèi)容。

  
  

• 有吸引力且對用戶更友好：基于卡片的設(shè)計通常非常依賴視覺效果（尤其是圖片）；就信息架構(gòu)而言，視覺層次會更加清晰。使用圖片有助于使基于卡片的設(shè)計比不在卡片中排列的相同內(nèi)容對用戶更具吸引力。

  
  

• 有利于響應(yīng)式設(shè)計：卡片是矩形的，可以平滑地調(diào)整大小，以適應(yīng)不同屏幕的水平和垂直正面，這意味著用戶可以在所有設(shè)備上獲得統(tǒng)一的體驗。

  
  

• 便于分享：卡片可以鼓勵用戶在社交媒體上分享內(nèi)容，因為它允許用戶只分享特定的內(nèi)容，而不是整個頁面。

  
  

什么時候應(yīng)用卡片設(shè)計？

這通常是當(dāng)你有:

• 基于搜索的界面:  卡片能通過模塊的內(nèi)容快速顯示合適的內(nèi)容，這使得用戶可以深入了解自己的興趣。基于卡片的設(shè)計是一種非常適合呈現(xiàn)這類內(nèi)容的方式。

• 
  

• 信息瀏覽：當(dāng)用戶瀏覽信息時，卡片的兼容性更好。

• 
  

• 任務(wù)管理：當(dāng)可以將流程中的單個任務(wù)作為卡片進(jìn)行說明時， 可以輕松組織卡片以獲取任務(wù)列表。任務(wù)管理應(yīng)用在使用卡片式界面為用戶創(chuàng)建儀表板方面做得很好，其中每張卡片代表一個單獨的任務(wù)。

• 
  

• 類似項目：卡片最適合于異構(gòu)項目的集合（當(dāng)并非所有內(nèi)容都是相同的基本類型時）。

• 
  

• 可視化分析:  儀表板通常在同一頁上同時顯示各種內(nèi)容樣本。在這種情況下，卡片類比可以幫助在不同物品之間創(chuàng)造出更明顯的差異，其中每張卡片可以適應(yīng)不同的角色。

卡片解構(gòu)

卡片的布局可以不同，以支持它們包含的內(nèi)容類別。下面的組件通常可以在多種卡片樣式中找到。

(1)富媒體: 卡片可以包含縮略圖，以顯示圖片，插圖，頭像，Logo，圖標(biāo)或圖形。

(2) 標(biāo)題: 標(biāo)題文本可以包含相冊或文章的名稱或標(biāo)題。

(3) 描述: 支持文本，如文章摘要或簡短的描述。

(4) 行動按鈕: 卡片可以包含用于操作的按鈕。

(5) 副標(biāo)題: 副標(biāo)題文本可以包含詳細(xì)介紹，如文章的署名或標(biāo)記的位置。

(6) 圖標(biāo): 卡片可以包含操作圖標(biāo)。

設(shè)計技巧

有一些小的技巧可以快速提高卡片設(shè)計細(xì)節(jié)。

1. 使用相關(guān)主題的圖片

圖片是卡片設(shè)計的主角，你需要一個高級的圖片來吸引用戶對每張卡片的注意。不僅是圖像，卡片還可以包含插圖、帶有淺色背景框的圖標(biāo)或任何其他類型的富媒體，但需要與內(nèi)容主題相關(guān)。 

2. 增加視覺層次

卡片內(nèi)的層次結(jié)構(gòu)有助于引導(dǎo)用戶對重要信息的閱讀。將主要內(nèi)容放在卡片的頂部，并使用排版來強(qiáng)化主要內(nèi)容。使用空白和對比來分隔需要更多視覺分隔的內(nèi)容區(qū)域。（彩云注：視覺層級對于信息表達(dá)至關(guān)重要?。?nbsp;

3. 限制內(nèi)容長度

一張卡片應(yīng)該只包含重要的信息，并提出一個相關(guān)的觀點，以獲取額外的細(xì)節(jié)，而不是完整的細(xì)節(jié)本身。當(dāng)我們試圖在一張卡片中放入太多內(nèi)容時，卡片可能會變得很冗長，并失去與卡片類比的實際聯(lián)系，因為它不再像一張卡片了。 

4. 避免嵌入鏈接

不要包含內(nèi)聯(lián)鏈接，卡片應(yīng)該自己鏈接。嵌入文字鏈接會讓用戶誤操作。 

5. 區(qū)分操作主次

包含不同操作的卡片應(yīng)該在視覺上形成對比。在下面的例子中，我通過使用一種較輕的色調(diào)而不是主要的按鈕風(fēng)格來降低后續(xù)操作的視覺強(qiáng)度。 

6. 去掉分割線

對于新手設(shè)計師來說，用分割線來區(qū)分內(nèi)容是一種常見的方式，以此定義不同的組。這些邊框會造成不必要的視覺干擾，從而影響內(nèi)容。

如何做到視覺上更美觀？

APP中的卡片并不是純粹的擬物概念，但通常情況下，使用一致的類比和物理原理能幫助用戶理解界面并分析內(nèi)容中的視覺層次。在卡片的情況下，你可以做幾件事:

1. 使用圓角

在形態(tài)上與真實世界的卡片進(jìn)行視覺對比。圓角更有效，因為它們讓我們的眼睛容易跟隨視覺動線，“因為它更適合頭部和眼睛的自然運動”。 

2. 增加一個輕微的外邊框或者投影

增加一條淡淡的描邊框或者增加一個淡淡的投影都是很好的做法。陰影在界面中創(chuàng)造了一個層次，這有助于我們區(qū)分UI元素。

然而，在設(shè)計中添加陰影并不像聽起來那么簡單。有時候設(shè)計師會過分強(qiáng)化投影效果，讓原本看起來不錯的設(shè)計看起來很廉價。避免使用純黑色的陰影。

3.注意字體和留白

重要的是要讓每一張卡片都能被人看到、閱讀和理解。在每個塊周圍添加大量的空白，讓用戶有時間處理并進(jìn)行視覺重置，有精力看完一張卡再到下一張。

選擇簡單和基本的字體，因為基本的排版最大限度地提高了可讀性，并有助于瀏覽。

一些優(yōu)秀卡片設(shè)計的例子

讓我們看看一些真實項目中的卡片設(shè)計案例：

信息流中的卡片設(shè)計

保持信息流卡片簡單是很重要的。它們應(yīng)該有一個一致的、重復(fù)的結(jié)構(gòu)，但是使用不同的圖片和字體大小來代表卡片中最重要的和最不重要的元素，以使讀卡片的人更容易理解它們。 

由Diseno Constructivo和Webpixels設(shè)計

他們突出特色圖片和標(biāo)題作為最突出的元素，這能幫助用戶決定文章或發(fā)布的內(nèi)容是否適合他們。

電商卡片設(shè)計

產(chǎn)品卡片是一個很重要的東西，它可以幫助你將訪問者轉(zhuǎn)化為客戶。一張優(yōu)秀的產(chǎn)品卡片應(yīng)該能夠吸引人們的注意，激發(fā)人們獲得產(chǎn)品的欲望，激勵人們購買，并在搜索結(jié)果中得到高效推廣。 

由Webpixels設(shè)計

產(chǎn)品的名稱應(yīng)該放在最顯眼的地方，這樣參觀者就會立刻明白他來對地方了。一個好的配圖能告訴顧客勝過千言萬語，所以你需要一個高質(zhì)量的產(chǎn)品配圖來設(shè)計完美的產(chǎn)品卡片。

如果產(chǎn)品有特價，不僅要在價格欄中注明促銷價格，還要注明常規(guī)價格，以及客戶可以節(jié)省多少錢。

個人中心卡片設(shè)計

簡介卡已經(jīng)成為一個應(yīng)用或網(wǎng)站中的功能模板。隨著個人品牌變得比以往任何時候都重要，卡片設(shè)計在這里也能發(fā)揮重要作用。 

由Neelesh Chaudhary設(shè)計

就像每一張卡片一樣，配置文件卡片也是一個UI組件，它包含了對它所代表的內(nèi)容至關(guān)重要的信息。為了達(dá)到你的目標(biāo)，你要向其他人推銷你自己。

確保只包括必要的信息(例如，照片，名字，職業(yè))，讓你的“關(guān)于”頁面有剩余的細(xì)節(jié)來完善你的個人資料。

儀表盤卡片設(shè)計

儀表板的設(shè)計可以有很大的不同。但是所有的儀表盤都是用卡片做的。根據(jù)儀表板的類型，每張卡片可能包括概要信息、通知、快速鏈接或?qū)Ш皆O(shè)計元素、關(guān)鍵數(shù)據(jù)、圖表和數(shù)據(jù)表。確保你為每個元素使用了正確類型的卡片。 

由Simmmple設(shè)計

儀表盤卡設(shè)計允許用戶決定他們想要關(guān)注哪些數(shù)據(jù)。易于理解的UI，允許用戶精確地控制哪些數(shù)據(jù)需要在儀表板的前端做好。

只包括最相關(guān)的信息，為用戶使用方便。當(dāng)你的數(shù)據(jù)集在一起看更容易理解時，找到在一張卡片上顯示它們的方法。但是要小心，不要讓用戶感到困惑。

日常計劃卡片設(shè)計

看板任務(wù)卡似乎是一件非常簡單的事情——拿一張便簽，寫下你需要做什么，然后把它貼在墻上。這些卡片必須包含需要行動的單位數(shù)量。它們還可能包含各種各樣的其他信息，清楚地傳達(dá)了必須做什么。 

由Neelesh Chaudhary設(shè)計

卡片上包含的信息包括任務(wù)的名稱和重要的細(xì)節(jié)，如任務(wù)的類型和誰擁有它。看板卡放在狀態(tài)類別下。最基本的狀態(tài)類別是“計劃要做”、“正在進(jìn)行中”和“完成”，但是狀態(tài)可能因項目而異。

卡片結(jié)構(gòu)最適用于添加或刪除任務(wù)這樣的小改變，而不是改變像你的總體目標(biāo)這樣的大想法。

總結(jié)

有幾種方法可以使卡片設(shè)計更加有效。通過最初定義和觀察卡片，我們可以更好地了解跨行業(yè)的這種設(shè)計模式。這也讓我們能夠推測用戶希望在這些卡片上采取什么行動?？ㄆ谔峁┰S多不同種類內(nèi)容摘要的環(huán)境中尤其有效，而不是簡單地作為內(nèi)容列表的現(xiàn)代替代品。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

編輯導(dǎo)讀：在很多設(shè)計中，選擇錄入類組件的理解和使用都比較模棱兩可，很多其他產(chǎn)品在實際應(yīng)用中往往也不夠規(guī)范，使產(chǎn)品體驗的一致性受到影響。本文將具體探究下這幾種組件的特性和適用場景，與你分享。

一、前言

不久前在進(jìn)行一個Web端HRM系統(tǒng)的需求設(shè)計，場景是對于從企業(yè)離職的員工，HR可以根據(jù)員工能力和表現(xiàn)選擇是否將其設(shè)置為優(yōu)秀離職人才，對于優(yōu)秀離職人才將進(jìn)行定期關(guān)懷，以便后續(xù)重新返聘的可能。在設(shè)計過程中，對于設(shè)置優(yōu)秀離職人才這個交互，感覺使用單選框、多選框、開關(guān)都能達(dá)到目的，究竟哪一種組件才是最合理的選擇呢？

這個問題讓我回想起之前在很多設(shè)計中對于這幾種選擇錄入類組件的理解和使用都比較模棱兩可，很多其他產(chǎn)品在實際應(yīng)用中往往也不夠規(guī)范，使產(chǎn)品體驗的一致性受到影響。本文將具體探究下這幾種組件的特性和適用場景：

二、單選框（Radio）和多選框（Checkbox）

1. 來源

1）單選框

單選框一般被認(rèn)為來源于收音機(jī)(Radio)上的物理按鈕，當(dāng)一個按鈕被按下時，另一個按鈕將會被彈起，使得永遠(yuǎn)只有一個按鈕處于被按下的狀態(tài)。

這種說法可能也不夠嚴(yán)謹(jǐn)，因為收音機(jī)上的按鈕在被按下后，不僅呈現(xiàn)出了“按下”的狀態(tài)，同時也會立馬觸發(fā)收音機(jī)的廣播，即立即生效。實際上絕大多數(shù)UI界面中無論單選框還是多選框一般都是僅作為錄入，觸發(fā)生效往往需要配合“提交”操作來進(jìn)行。

2）多選框

多選框來源于生活中常見的各種多項選擇場景，如飯店菜單、考試多選題等。多選框一般也是作為內(nèi)容錄入的組件，一般在進(jìn)行選擇后同樣需要配合后續(xù)的“提交”動作，就像選擇菜品后下單，選擇答案后交卷，這種“選擇類”場景多用在表單或者表格中。

多選框還有另一種“設(shè)置類”場景，這種場景下多選框用于啟用某種模式、應(yīng)用某項設(shè)置，與開關(guān)（Switch）非常類似，這也使得多選框在實際產(chǎn)品中的應(yīng)用要比單選框復(fù)雜得多，后文將詳細(xì)闡述多選框與開關(guān)的使用區(qū)別。

2. 簡單定義及外觀樣式

1）單選框

可以概括為從最少兩個或兩個以上的互斥關(guān)系選項之中選擇一項的組件，外觀樣式通常由“圓形外框+文字標(biāo)簽”組成，選中時圓形外框樣式發(fā)生改變表明選中狀態(tài)。

2）多選框

可以概括為從多個并列關(guān)系的選項中選擇多個的組件，多選框最少可以一個都不選。外觀樣式通常由“圓形或方形外框+文字標(biāo)簽”組成，選中時一般在外框中出現(xiàn)√表明選中狀態(tài)。與單選框相比多選框還有一種特殊的“半選中狀態(tài)”（half-selected）,一般出現(xiàn)在表格（Table）或者樹選擇（Tree select）中。

3. 交互細(xì)節(jié)

1）觸發(fā)區(qū)域

單選框和多選框本身外框尺寸都比較小，因此需要將觸發(fā)區(qū)域增大至整個標(biāo)簽范圍，方便用戶點擊

2）排版

單選框和多選框在B端各類表單中應(yīng)用較多，在頁面空間允許的范圍內(nèi)，最好將選項縱向?qū)R排列，方便用戶直觀比較，需要橫向排布時，選項間應(yīng)該設(shè)置清晰明顯的間隔。

3）單選框的容錯機(jī)制

單選框在選擇過后一定要有一個選中項，因此就不能恢復(fù)至“空狀態(tài)”。在比較典型的社交場景中，一些涉及隱私的信息比如婚姻狀態(tài)選擇，可以給用戶提供諸如“保密”“不展示”之類的選項，防止用戶在選擇之后無法回退。

4. 單選框、多選框和下拉選擇（Select）的使用辨析

對比單選框、多選框和下拉選擇的外觀樣式不難發(fā)現(xiàn)，它們之間最重要的區(qū)別在于信息傳達(dá)效率和包容度的不同。

1）單選框和多選框的特點

單選框和多選框的所有選項信息都是直接暴露出來，如果選項過多將占用較多界面空間并且影響用戶的閱讀效率和界面整體規(guī)整度，信息包容度低但信息傳達(dá)直觀高效；

2）下拉選擇的特點

下拉選擇則是收在下拉菜單里，只有選擇值是用戶一眼能看到的，信息包容度高，節(jié)省空間，與其他輸入類組件并用時能保持整體界面的規(guī)整度，但每次都得點開再進(jìn)行選擇也犧牲了一定的信息傳達(dá)效率和操作便利性。

3）適用單選框和多選框的場景

因此，單選框和多選框更適用于選項數(shù)量較少（一般不超過5個），有一定界面編排空間，且用戶需要直觀看到不同選項內(nèi)容并進(jìn)行比較選擇的場景，如選擇會員購買方案。

4）適用下拉選擇的場景

相反，下拉選擇更適用于選項數(shù)量較多，表單配置復(fù)雜、包含各類不同樣式組件或界面空間不足，且用戶對于被隱藏的選項內(nèi)容有一定預(yù)期的場景，比如選擇省份。同時下拉器擴(kuò)展性更高，下拉菜單可以進(jìn)行多種類型的變體設(shè)計，滿足不同業(yè)務(wù)場景的需求。

三、開關(guān)（Switch）

1. 來源

開關(guān)（Switch）這個組件就是模仿現(xiàn)實生活中的開關(guān)而設(shè)計的，現(xiàn)實生活中燈的開關(guān)一按，燈馬上就亮了，因此開關(guān)有一個最大的特征：即時性。這在Ant Design設(shè)計系統(tǒng)的全局規(guī)則中也給出了注釋：“當(dāng)用戶切換「開關(guān)」按鈕將直接觸發(fā)狀態(tài)改變“，因此不同于單選框和多選框這種錄入型組件，開關(guān)同時兼?zhèn)滗浫牒陀|發(fā)兩種屬性。

2. 簡單定義及樣式

開關(guān)是一種特殊的選擇組件，只能從“開啟/關(guān)閉”兩種狀態(tài)選擇其一，并且選擇的結(jié)果會立即生效，通常點擊后頁面或者開關(guān)本身會有加載效果，或者點擊后給出反饋，告知用戶操作已生效。

3. 開關(guān)和多選框的使用辨析

上面提到復(fù)選框也經(jīng)常作為開啟某種模式或者應(yīng)用某類設(shè)置使用，在這種場景下它與開關(guān)的邏輯十分相似，讓人容易混淆。對于這兩種組件的使用區(qū)別當(dāng)前已有很多討論，說法各異，這里根據(jù)我自己的探究和經(jīng)驗，從以下幾點闡述下自己的看法：

1）開關(guān)的即時性

開關(guān)的即時性決定了當(dāng)開關(guān)與需要提交的表單一起出現(xiàn)時會存在矛盾，因此在表單中進(jìn)行狀態(tài)選擇時，盡量選擇單選框、多選框，避免使用開關(guān)。

2）開關(guān)更適合控制一組設(shè)置嗎

蘋果官方人機(jī)界面指南中指出“開關(guān)比復(fù)選框具有更多的視覺權(quán)重，因此當(dāng)它控制的功能比復(fù)選框通常更多時，它看起來更好。例如，您可以使用開關(guān)讓人們打開或關(guān)閉一組設(shè)置”，然而在復(fù)選框的設(shè)計指南中又舉了用復(fù)選框控制一組設(shè)置的例子。

再來看一個飛書的例子，飛書管理后臺中使用了開關(guān)來控制一組設(shè)置的開啟，而在飛書客戶端的設(shè)置里用的都是復(fù)選框。

對于這個問題，個人認(rèn)為蘋果官方人機(jī)指南所說的因為開關(guān)比復(fù)選框具有更多視覺權(quán)重，所以更適合用來控制一組設(shè)置的說法并不準(zhǔn)確，復(fù)選框本身也具有明顯的選中和非選中狀態(tài)，盡管開關(guān)組件自身大小以及在視覺效果上可進(jìn)行設(shè)計的空間都更大，但是好像并不足以成為決定性的因素。

同時因為開關(guān)的即時性，如果是在需要提交的表單或者模態(tài)彈窗中用開關(guān)控制一組設(shè)置，反而是多選框更合適。

3）從組件的來源分析

從組件的來源及發(fā)展歷史來看，勾選的交互是基于PC鍵鼠操作設(shè)計的，單選框和多選框組件本身尺寸較小，因而觸發(fā)區(qū)域會擴(kuò)大至整體標(biāo)簽區(qū)域，方便鼠標(biāo)點擊；而開關(guān)是誕生于移動設(shè)備觸控交互的組件，在移動端界面本身配置就比較簡化，這時候配合開關(guān)自身相對較大的觸發(fā)區(qū)域，用手指點擊起來非常方便順暢。

而在PC端，因為屏幕尺寸更大，同時很多B端系統(tǒng)配置項多、界面布局相較移動端要復(fù)雜很多，這時候要把鼠標(biāo)移至開關(guān)熱區(qū)去點擊，反而沒有勾選框來得方便，這種操作體驗在一個縱列中有多個連續(xù)的開關(guān)時尤為明顯。

4）我的觀點

依據(jù)開關(guān)的即時生效特性，開關(guān)更適合用在不需要提交操作的頁面中，用來控制功能或設(shè)置的開啟/關(guān)閉，在需要提交操作的表單或者彈窗中，建議使用多選框。

開關(guān)和勾選框都可以用來控制一組設(shè)置的開啟/關(guān)閉，使用開關(guān)進(jìn)行控制時，最好將它控制的下屬組件都設(shè)置為立即生效，這取決于設(shè)置本身對于系統(tǒng)的影響，如果設(shè)置對于系統(tǒng)重要功能影響較大，則建議改用多選框去控制，讓用戶多一步“提交”操作進(jìn)行確認(rèn)，提升容錯性。

四、總結(jié)

回到開頭設(shè)置優(yōu)秀離職人才場景中的組件問題，這個需求流程涉及到的不只是在離職人員的編輯彈窗中操作，還涉及到在離職人員表格中的狀態(tài)展示和設(shè)置優(yōu)秀人才的單獨操作。首先彈窗中的編輯操作是需要提交的，用開關(guān)比較矛盾；單選框和多選框在彈窗中都可以適用，但考慮還需要在離職人員表格中的狀態(tài)展示和單獨編輯，為了保持整體的交互一致性，最后選用了單選框。

總的來說，這幾種選擇錄入類組件在B端系統(tǒng)中應(yīng)用非常廣泛，可能正是因為太司空見慣了，所以容易忽略它們細(xì)節(jié)上的特性和區(qū)別。盡管有時候這些組件的使用問題并不會對用戶體驗產(chǎn)生決定性的影響，但對細(xì)節(jié)的探究正是設(shè)計師嚴(yán)謹(jǐn)?shù)墓ぷ鲬B(tài)度和工匠精神的體現(xiàn)，只有秉持著這種對細(xì)節(jié)的打磨和追求才能不斷提升產(chǎn)品的用戶體驗。

另外雖然文中做了一些各個組件的特性和適用總結(jié)，但可能在不同產(chǎn)品和系統(tǒng)中情況會更加復(fù)雜，需要設(shè)計師根據(jù)實際情況靈活處理。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

一個優(yōu)秀的設(shè)計不僅要解決正確的問題，同時也是給用戶創(chuàng)造積極的情感。在過去，實體產(chǎn)品可以通過人類的五感來創(chuàng)造情感體驗，但對于如今的數(shù)字化產(chǎn)品來說，這似乎很難達(dá)到，因為只是在屏幕上進(jìn)行枯燥的交互來獲取服務(wù)。

所以，數(shù)字化產(chǎn)品設(shè)計師們需要更深入的理解每種類型的情感，以及創(chuàng)造它們的心理學(xué)原則。

根據(jù)唐.諾曼（Don Norman）的研究，人們對一個物體產(chǎn)生情感有三個層次：本能、行為和反思。

• 本能層: “用戶想要的感覺是什么”

• 行為層: “用戶想要做什么”

• 反思層: “用戶想成為什么樣的人”

在第一層，用戶將通過視覺和與產(chǎn)品的交互設(shè)計中產(chǎn)生情緒。因此，這是UI設(shè)計師擅長發(fā)揮的地方。除了美學(xué)和基本的平面設(shè)計原則外，下面是我在工作中經(jīng)常應(yīng)用到設(shè)計中的心理學(xué)原則。

格式塔原理

相似律

人類的眼睛傾向于將相似的元素連接成一個組，而大腦會認(rèn)為這些元素都有相同的目的。 

因此，在設(shè)計具有相同功能和內(nèi)容的界面元素時，就應(yīng)該要保持一致性。（彩云注：這也是為什么要保持一致性的理論解釋）

應(yīng)用場景: 導(dǎo)航、控件、卡片、banner、內(nèi)容、分頁

連續(xù)律

人眼會將連續(xù)的元素視為一組。這一定律與對稱性和相似性非常相關(guān)，通過在一個序列上設(shè)計相似和重復(fù)的元素，我們可以將用戶的視線引導(dǎo)到我們想要的方向，它能使得閱讀信息更加連貫和清晰。

一點點的切割是在暗示用戶，這里還有更多的內(nèi)容等待你去查看。

應(yīng)用場景: 菜單、列表、排序、輪播、服務(wù)進(jìn)度

封閉律

當(dāng)看到一幅不完整的圖像時，大腦會依賴之前的經(jīng)驗進(jìn)行填充。 

這是圖形和logo設(shè)計中常用的規(guī)則，但是在產(chǎn)品設(shè)計中，我們也經(jīng)常把它用在圖標(biāo)和Loading設(shè)計中。

應(yīng)用: 圖標(biāo)、loading、數(shù)據(jù)可視化

相近律

這是UI設(shè)計中的一個基本規(guī)則，因為人眼會將任何相鄰元素視為一個組。 

在設(shè)計的時候，我非常注重使用間距來將元素組合在一起。我通常使用大空間來分隔大內(nèi)容組，然后使用小空間來分隔大內(nèi)容組中的小內(nèi)容組。

應(yīng)用場景: 導(dǎo)航、控件、卡片、banner、內(nèi)容、分頁

對稱律

我們的大腦喜歡看到對稱和平衡的東西。它是所有設(shè)計領(lǐng)域中使用最頻繁、最安全的法則。它幫助我們創(chuàng)造一種穩(wěn)定和秩序的感覺。 

當(dāng)設(shè)計需要簡單和諧可視化的產(chǎn)品時，我經(jīng)常使用對稱律。當(dāng)用戶需要關(guān)注重要的事情時，它也能讓他們感到更舒服。缺點是，如果過度使用，產(chǎn)品會變得乏味和單調(diào)。通常，我用標(biāo)題或CTA按鈕來更好地強(qiáng)調(diào)和號召行動，打破畫面的單調(diào)格局。（彩云注：CTA是call to action的縮寫，中文通常翻譯為行為號召?？梢岳斫鉃橐龑?dǎo)用戶點擊的行為都算是行為號召）

應(yīng)用場景:控件，banner，強(qiáng)調(diào)內(nèi)容，產(chǎn)品顯示，清單，導(dǎo)航。

背景分割

這個定律是關(guān)于人眼傾向于注意脫離背景或組合的事物。 

我使用這個規(guī)則引導(dǎo)用戶的眼睛看到重要信息。它通常是一個卡片設(shè)計與一個輕投影在背景之上的層。此外，構(gòu)建整體也是應(yīng)用這一規(guī)則的一種方式。

應(yīng)用場景：卡片、內(nèi)容、列表、服務(wù)、摘要

共同命運法則

在同一方向上移動的元素被認(rèn)為比固定的元素或在另一個方向上移動的元素更相關(guān)。這個規(guī)則應(yīng)用幫助我們建立組和狀態(tài)之間的關(guān)系。 

在制作動畫時，我經(jīng)常更明確地使用這個規(guī)則。然而，我們?nèi)匀豢梢赃m用于許多不同的因素。

應(yīng)用場景：導(dǎo)航/下拉菜單，折疊，手風(fēng)琴，工具提示，產(chǎn)品滑塊，視差滾動和指示器。

2. 焦點原則

當(dāng)我們看東西時，我們的眼睛傾向于首先關(guān)注最突出的元素。理解這種行為將幫助我們在設(shè)計中創(chuàng)建一個“錨點”，從而推動用戶查看我們的場景之后的內(nèi)容。

應(yīng)用場景:內(nèi)容、落地頁、價格、產(chǎn)品頁、banner 

3. 雷斯多夫效應(yīng)

（彩云注：維基百科解釋為指個人對學(xué)習(xí)材料或所見所聞的資訊，容易記住最特殊的部分的現(xiàn)象。例如：有一些參考書將重要的資料，以不同顏色或特殊的字體標(biāo)示出來，就是利用雷斯多夫效應(yīng)來加深讀者的印象。）

這也被稱為隔離效應(yīng)，它表明人們傾向于注意并記住與其他部分不同的部分。這條規(guī)則很容易與焦點定律混淆。不同的是，應(yīng)用此規(guī)則的元素通常是獨立的，沒有為用戶導(dǎo)航更多信息的額外功能。 

應(yīng)用場景：定價表、促銷banner、不同會員介紹 

4. 本能反應(yīng)

基于現(xiàn)實世界打造的視覺體驗。比如，當(dāng)我們看一個視頻，每個高潮笑話時都有旁白跟著一起笑時，我們會更容易發(fā)笑（彩云注：想想《快樂大本營》）。用戶會喜歡我們的設(shè)計，如果它讓他們感覺良好和舒適。

（彩云注：這個理論的意思是說盡可能讓用戶產(chǎn)生沉浸感，把產(chǎn)品用到真實的環(huán)境上，比如大家平時使用的手機(jī)樣機(jī)，把設(shè)計的界面放到這些樣機(jī)中就能夠給人直觀的感受到應(yīng)用后的效果，也是這個理論的運用）。 

應(yīng)用場景：產(chǎn)品配圖、插圖、攝影 

5. 色彩心理學(xué)

有很多研究表明顏色對我們的潛意識有特別的影響。對顏色的看法也因性別、宗教和文化而異。這張彩色心理學(xué)海報就足夠了（彩云注：感興趣的可以自行翻譯研究下）。

此外，我們不要忘記從早期到現(xiàn)在一直在廣泛使用的顏色，這些顏色的使用更符合用戶習(xí)慣：

紅色：錯誤

綠色：成功

藍(lán)色：進(jìn)行中

黃色：警告

6. 形狀心理學(xué)

就像顏色一樣，人類的潛意識對不同的形狀也有不同的反應(yīng)。例如:

圓形、橢圓形：傳遞積極的信息，通常與社區(qū)或關(guān)系有關(guān)。

方形和三角形：帶有強(qiáng)烈的信息，通常與力量和穩(wěn)定聯(lián)系在一起。

豎線：代表強(qiáng)度、力量或攻擊性。

橫線：表示平靜、相等、安靜。

7. 雙碼理論

這一理論解釋了人類需要視覺和語言信息來盡可能快地處理信息。此外，人類是視覺動物，我們的大腦處理圖像的速度是處理文本的6萬倍。為了最大化設(shè)計的有效性，我們不應(yīng)該去掉解釋性的文字。

（彩云注：根據(jù)這個理論，在做作品集時，就應(yīng)該盡可能的多用視覺化語言，文字作為輔助，對于視覺設(shè)計師來說，能用圖表達(dá)的就盡量減少文字的比重。） 

 一個很明顯的例子就是導(dǎo)航欄。大多數(shù)新的應(yīng)用或具有復(fù)雜功能的應(yīng)用都同時設(shè)計了圖標(biāo)和文字標(biāo)簽。 

8. 并行設(shè)計

人類的眼睛傾向于看到平行因素比其他因素更相關(guān)。我經(jīng)常使用這一原則對同一屏幕內(nèi)的兩組不同內(nèi)容進(jìn)行分類。最容易看到的例子可能是Facebook messenger界面，當(dāng)帖子并排排列時，消息是平行的。 

9. 共同區(qū)域

這一原則類似于格式塔原則中的相似定律，但它并不是完全相似。共同區(qū)域原則是通過我們使用分隔線、形狀或顏色的方式創(chuàng)建的。 

如果一個界面需要用戶滾動更多來查看內(nèi)容，我們應(yīng)該有一些方法來更清楚地劃分它，而不僅僅是使用間距。

應(yīng)用場景：列表清單、信息流

10.掃描圖形

根據(jù)NNGroup UXPin等組織或團(tuán)體的各種研究，兩種最常用的掃描模式是“F”和“Z”。

• F的使用最為廣泛，尤其是對于內(nèi)容量大的網(wǎng)站。

• Z用于不太注重文本的網(wǎng)站，通常強(qiáng)調(diào)在最后的號召行動。

一旦我們理解了如何使用這些模式，我們就可以選擇布局并有效地安排元素來實現(xiàn)我們的設(shè)計目標(biāo)。 

總結(jié)

第一印象是最令人難忘的，積極的體驗可以在用戶和產(chǎn)品之間創(chuàng)造持久的關(guān)系。如果能讓用戶在一開始就喜歡上我們的設(shè)計，就能為我們的產(chǎn)品創(chuàng)造了一個很好的優(yōu)勢。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

什么是視覺層次

視覺層次不僅僅包含文字有關(guān)，它還包含我們的圖片，視頻按鈕以及文字以外的視覺元素。所以當(dāng)你設(shè)計一個網(wǎng)頁時候，除了網(wǎng)站整體的顏色，排版，圖片也能夠影響視覺層次。那么如何讓設(shè)計的層次更清晰，常用方法有哪些，今天我們一起來聊聊關(guān)于設(shè)計層次，希望可以幫助到你。

運用尺寸大小建立層次

▲如上圖插畫的比重很大，在設(shè)計這種大的元素時，你的每個元素比例和細(xì)節(jié)處理都被同時放大了，我們可以看見這副插畫四周還運用了很多元素，讓頁面達(dá)到平衡，同時這個畫面和旁邊的文字場景也很好融合在一起。一個好的設(shè)計一定是通過視覺手段讓用戶理解信息更加準(zhǔn)確，在看完頁面文字和圖片后，很自然的引導(dǎo)到底部的按鈕，這才能算是一個很引人注目的設(shè)計。

運用色彩建立層次

運用文字大小字重建立層次

運用視覺重量建立層次

▲設(shè)計師熟悉的medium官方App設(shè)計，在正文閱讀時，同樣采用不同的視覺重點來突出重要信息，比如左邊通過字重以及文字背景綠色底色和正文對比，非常醒目。右側(cè)通過淺綠色作為背景強(qiáng)調(diào)突出。

▲同樣在一些重要位置，Medium也是運用視覺重量處理，如左圖通過頂部提示條提示可以通過語音播放，在右側(cè)付費文章通過行動按鈕引導(dǎo)用戶升級付費。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

Vue中的基本動畫實現(xiàn)

直接一點，基本動畫的步驟

1. 在需要加動畫的地方，加入transition

<transition> <P v-if="isNum">我是一只小小鳥</P> </transition>  


    

        1
    

    

        2
    

    

        3
    

在style中寫vue已定義好的類名

 進(jìn)入前和結(jié)束后的狀態(tài)
    .v-enter,.v-leave-to{ opacity: 0; transform: translateX(80px); } 進(jìn)入和離開的動畫時間段
    .v-enter-active,.v-leave-active{ transition: all 0.5S ease }  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

這樣就已經(jīng)完成了基本動畫了，上完整代碼

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../node_modules/vue/dist/vue.min.js"></script> <style> 進(jìn)入前和結(jié)束后的狀態(tài) .v-enter,.v-leave-to{ opacity: 0; transform: translateX(80px); } 進(jìn)入和離開的動畫時間段 .v-enter-active,.v-leave-active{ transition: all 0.5S ease } </style> </head> <body> <div id="box"> <button @click="tags">顯示/隱藏</button> <transition> <P v-if="isNum">我是一只小小鳥</P> </transition> </div> <script> new Vue({ el:'#box', data:{ isNum :true }, methods: { tags(){ this.isNum=!this.isNum; } }, }) </script> </body> </html>  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

    

        43
    

    

        44
    

    

        45
    

    

        46
    

    

        47
    

    

        48
    

    

        49
    

    

        50
    

動畫類名的重定義

只需要在transition標(biāo)簽上添加一個name屬性，然后把類名中v改成你定義的類名就可以了

<transition name='my'> <P v-if="isNum">我是一只小小鳥</P> </transition>  


    

        1
    

    

        2
    

    

        3
    

 進(jìn)入前和結(jié)束后的狀態(tài)
    .my-enter,.my-leave-to{ opacity: 0; transform: translateX(80px); } 進(jìn)入和離開的動畫時間段
    .my-enter-active,.my-leave-active{ transition: all 0.5S ease }  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

使用第三方的動畫庫

第三方的動畫庫有很多
Animate、Anicollection、Cssshake、Animatable、Hover、Animations、JXAnimate、Spinkit、Velocity動畫、AlloyStick骨骼動畫引擎、Rocket、Cssynth、Stylie、Dynamicsjs、Anijs、Animsition、Parallax、Wow、Bouncejs、Easie、Greensock

我就選擇其中一個庫做示范其他都一樣

1. 在使用第三方庫之前，需要在，你要做動畫的標(biāo)簽上加個基本類
   animated，這個基本類是根據(jù)每個庫不一樣而定的，
   我們要用Animated，所以需要加

<transition name='my'> <P v-if="isNum" class="animated">我是一只小小鳥</P> </transition>  


    

        1
    

    

        2
    

    

        3
    

接著就是引入第三方庫，你們可以下載。
我比較懶，我就直接npm下載了。

npm install animate.css --save  


    

        1
    

然后引入文件

<link rel="stylesheet" href="../node_modules/animated/lib/Animated.js">  


    

        1
    

寫上類名，就行了，，提示，千萬別下錯文件，不然動畫也無法實現(xiàn)

 <!-- 進(jìn)入用lightSpeedIn    離開用 lightSpeedOut --> <transition enter-active-class="lightSpeedIn" leave-active-class ="lightSpeedOut"> <P v-if="isNum" class="animated">我是一只小小鳥</P> </transition>  


    

        1
    

    

        2
    

    

        3
    




     

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：csdn

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

<p style="box-sizing:border-box;margin-top:0px;margin-bottom:1rem;font-size:16px;font-variant-ligatures:no-common-ligatures;white-space:normal;background-color:#FFFFFF;text-align:justify;color:rgba(0, 0, 0, 0.84);font-family:&quot;letter-spacing:0.1px;">
    <strong style="box-sizing:border-box;font-size:14px;font-family:微軟雅黑, Arial, Helvetica, sans-serif;color:#323232;"><b style="box-sizing:border-box;widows:1;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="font-family:&quot;font-size:14px;background-color:#FFFFFF;white-space:normal;widows:1;line-111111111111111111111:20px;color:#3e3e3e;box-sizing:border-box !important;"><strong style="box-sizing:border-box;font-family:微軟雅黑, Arial, Helvetica, sans-serif;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><i style="box-sizing:border-box;"><a href="http://sillybuy.com/blog/admin" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;">藍(lán)藍(lán)設(shè)計</a>(&nbsp;<a href="http://sillybuy.com/" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#0C386E;transition:all 0.5s ease 0s;vertical-align:baseline;background-position:0px -60px;padding:0px;margin:0px;text-indent:34px;">sillybuy.com&nbsp;</a>)是一家專注而深入的<a href="http://sillybuy.com/index.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">界面設(shè)計公司</a>，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、<a href="http://sillybuy.com/bs.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">BS界面設(shè)計&nbsp;</a>、&nbsp;<a href="http://sillybuy.com/csjm.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">cs界面設(shè)計&nbsp;</a>、&nbsp;<a href="http://sillybuy.com/scjm.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">ipad界面設(shè)計</a><a href="http://sillybuy.com/csjm.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">&nbsp;</a>、&nbsp;<a href="http://sillybuy.com/baozhuang.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">包裝設(shè)計&nbsp;</a>、&nbsp;<a href="http://sillybuy.com/icon.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">圖標(biāo)定制&nbsp;</a>、&nbsp;<a href="http://sillybuy.com/yhty.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">用戶體驗 、交互設(shè)計、&nbsp;</a><a href="http://sillybuy.com/web.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">網(wǎng)站建設(shè)</a><a href="http://sillybuy.com/WEB.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">&nbsp;</a>、<a href="http://sillybuy.com/xz.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">平面設(shè)計服務(wù)</a></i></b></b></b></b></b></b></strong></b></strong></b></strong></b></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></b></strong> 
</p>

<div>
    <strong style="box-sizing:border-box;font-size:14px;font-family:微軟雅黑, Arial, Helvetica, sans-serif;color:#323232;"><b style="box-sizing:border-box;widows:1;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="font-family:&quot;font-size:14px;background-color:#FFFFFF;white-space:normal;widows:1;line-111111111111111111111:20px;color:#3e3e3e;box-sizing:border-box !important;"><strong style="box-sizing:border-box;font-family:微軟雅黑, Arial, Helvetica, sans-serif;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"> </b></b></b></b></b></b></strong></b></strong></b></strong></b></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></b></strong> 
</div>

效果：

HTML：

 


    


        


            


            

        

        


            

                <div class="sel01"> 
            

        

    

    


        


            


            

        

        


            

                <select v-model="selectClassEnd" @change="selectClass($event)"> 
            

        

    

    


        


            


            

        

        


            

                <option value="NONE">未選擇</option> 
            

        

    

    


        


            


            

        

        


            

                <option v-for="(options,id) in selectClassData" :key="id" :value="options.id"> 
            

        

    

    


        


            


            

        

        


            

                {{options.title}}
            

        

    

    


        


            


            

        

        


            

                </option> 
            

        

    

    


        


            


            

        

        


            

                </select> 
            

        

    

    


        


            


            

        

        


            

                </div> 
            

        

    

CSS：

 


    


        


            


            

        

        


            

                .sel01{display:inline-block;position:relative;z-index:2;font-size:1.6rem;height:3.6rem;line-height:3.6rem;width:8rem;flex:1;background:#fff;box-sizing:border-box;border-radius:.5rem;}
            

        

    

    


        


            


            

        

        


            

                .sel01:before{content:"";position:absolute;width:0;height:0;border:.5rem solid transparent;
            

        

    

    


        


            


            

        

        


            

                border-top-color:#e92f26;top:50%;right:1rem;cursor:pointer;z-index:-2;margin-top:-0.25rem;}
            

        

    

    


        


            


            

        

        


            

                .sel01 select{width:100%;border:none;height:3.6rem;background:transparent;background-image:none;-webkit-appearance:none;-moz-appearance:none;vertical-align:top;padding-left:1rem;}
            

        

    

    


        


            


            

        

        


            

                .sel01 select:focus{outline:none;}
            

        

    

JS：

 


    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                name:"Name",
            

        

    

    


        


            


            

        

        


            

                data(){
            

        

    

    


        


            


            

        

        


            

                return{
            

        

    

    


        


            


            

        

        


            

                selectClassData:[ //類別選擇數(shù)據(jù)或者從后臺獲取數(shù)據(jù) 
            

        

    

    


        


            


            

        

        


            

                {id:1,title:"科普類"},
            

        

    

    


        


            


            

        

        


            

                {id:2,title:"親子類"},
            

        

    

    


        


            


            

        

        


            

                {id:3,title:"制作類"},
            

        

    

    


        


            


            

        

        


            

                {id:4,title:"創(chuàng)意類"}
            

        

    

    


        


            


            

        

        


            

                ],
            

        

    

    


        


            


            

        

        


            

                selectClassEnd:"NONE",//類別默認(rèn)選擇 
            

        

    

    


        


            


            

        

        


            

                select_class_id:"",//類別id提交報名需要 
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                methods:{
            

        

    

    


        


            


            

        

        


            

                //類別選中 
            

        

    

    


        


            


            

        

        


            

                selectClass(event){
            

        

    

    


        


            


            

        

        


            

                this.select_class_id = event.target.value; //獲取option對應(yīng)的value值 select_class_id是后臺約定的提交數(shù)據(jù)的名稱 
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


                

                    


                

                

                      
                

            

        

    

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)