選項(xiàng)卡，就是用多個(gè)頁簽來切換展示不同的功能頁面，通過點(diǎn)擊相應(yīng)頁簽來切換相應(yīng)選項(xiàng)卡頁面的效果，相信大家在繪制原型中常常會遇到，并不陌生。但是如何優(yōu)化選項(xiàng)卡的展示效果？以及如果選項(xiàng)卡過多，如何做到像真正系統(tǒng)或APP中一樣可手動(dòng)滾動(dòng)頁簽，做到效果美觀、高保真？

這就是我下面要分享給大家的內(nèi)容啦：

首先為大家回顧傳統(tǒng)選項(xiàng)卡的制作過程，再展示可滾動(dòng)頁簽的選項(xiàng)卡制作過程。

一、最常見的傳統(tǒng)選項(xiàng)卡

最常見的選項(xiàng)卡，一般有三四個(gè)頁簽，分別對應(yīng)各自頁面，通過鼠標(biāo)點(diǎn)擊頁簽，來切換到相應(yīng)的頁面。

幾個(gè)關(guān)鍵步驟如下：

1. 準(zhǔn)備元素

準(zhǔn)備幾個(gè)矩形（作為頁簽）和一個(gè)動(dòng)態(tài)面板（狀態(tài)數(shù)與矩形數(shù)相同）。

2. 設(shè)置選項(xiàng)組

全選所有矩形，在鼠標(biāo)右鍵的“設(shè)置選項(xiàng)組”菜單中或頁面右側(cè)屬性欄中鍵入選項(xiàng)組名稱。設(shè)置為同一個(gè)選項(xiàng)組的元素，一次只能選中一個(gè)。

3. 為頁簽設(shè)置“鼠標(biāo)單擊時(shí)”事件

單獨(dú)為每個(gè)矩形設(shè)置鼠標(biāo)單擊時(shí)事件：

①選中當(dāng)前元件；②設(shè)置動(dòng)態(tài)面板的狀態(tài)為對應(yīng)的狀態(tài)頁（設(shè)好一個(gè)矩形的事件后可直接將事件復(fù)制到其他矩形上，再進(jìn)行事件微調(diào)）。

4. 優(yōu)化樣式

為動(dòng)態(tài)面板中每個(gè)狀態(tài)下添加一些示意文字作為區(qū)分。

至此預(yù)覽原型，已經(jīng)達(dá)到了點(diǎn)擊選項(xiàng)卡頁簽切換選項(xiàng)卡的效果。為了樣式更美觀，全選所有頁簽矩形，為其添加選中效果（添加懸停和按下效果后原型會更生動(dòng)）；為動(dòng)態(tài)面板添加邊框，并為其切換添加過渡效果。

5. 預(yù)覽效果

二、可滾動(dòng)頁簽的選項(xiàng)卡

當(dāng)頁簽的個(gè)數(shù)過多時(shí)（如10個(gè)），可能頁面樣式不允許我們把所有頁簽都平鋪開展示，這時(shí)需要將后面的頁簽隱藏，需要點(diǎn)擊時(shí)再讓其展示。

由于頁簽處需要做出滾動(dòng)效果，故在上述步驟中的頁簽選中效果和事件需要做出一些變化。

幾個(gè)關(guān)鍵步驟如下：

1. 微調(diào)樣式并新增元素

修改上面為頁簽設(shè)置的選中效果，主要是把邊框樣式去掉了。取而代之的是增加了一個(gè)小矩形藍(lán)條，與頁簽同寬，高度3px，默認(rèn)先擺放在第一個(gè)頁簽的下邊框處對齊。

這個(gè)小藍(lán)條是為了之后在進(jìn)行頁簽的滾動(dòng)時(shí)，達(dá)到同步滑動(dòng)至所選頁簽的效果。

2. 創(chuàng)建移動(dòng)面板

將動(dòng)態(tài)面板的狀態(tài)增加為10個(gè)，并將選項(xiàng)卡的頁簽增加為10個(gè)。

全選所有頁簽和小藍(lán)條，右鍵點(diǎn)擊“轉(zhuǎn)換為動(dòng)態(tài)面板”，將該動(dòng)態(tài)面板命名為“移動(dòng)面板”，并選擇“自動(dòng)調(diào)整為內(nèi)容尺寸”。

此時(shí)“移動(dòng)面板”內(nèi)部包含10個(gè)頁簽和1個(gè)小藍(lán)條：

3. 創(chuàng)建外部面板

右鍵“移動(dòng)面板”，將該動(dòng)態(tài)面板再轉(zhuǎn)換為動(dòng)態(tài)面板，并命名為“外部面板”，不勾選“自動(dòng)調(diào)整為內(nèi)容尺寸”，將尺寸調(diào)整為和下方動(dòng)態(tài)面板同寬。

此時(shí)“外部面板”內(nèi)部包含“移動(dòng)面板”：

4. 設(shè)置“小藍(lán)條”移動(dòng)的關(guān)鍵事件

（1）選中第一個(gè)選項(xiàng)卡頁簽，雙擊打開其鼠標(biāo)單擊時(shí)事件窗口

在左側(cè)找到“移動(dòng)”，在右側(cè)輸入框中輸入“小藍(lán)條”（之前已經(jīng)將小矩形命名為“小藍(lán)條”），在下方勾選“小藍(lán)條”。

（2）在下方的移動(dòng)下拉框處選擇“絕對位置”，點(diǎn)擊x坐標(biāo)的“fx”標(biāo)識，打開編輯值窗口

在上面的變量或函數(shù)輸入?yún)^(qū)域中，輸入值為[[This.x]]。y坐標(biāo)與x坐標(biāo)同理設(shè)置，輸入值為[[This.y+This.height-3]]。在下方的動(dòng)畫下拉框處選擇“線性”，250毫秒。

上述設(shè)置的含義為：點(diǎn)擊某個(gè)頁簽時(shí)，移動(dòng)小藍(lán)條到絕對位置：x坐標(biāo)=該頁簽的x坐標(biāo)；y坐標(biāo)=該頁簽的y坐標(biāo)+該頁簽的高度-3。

這里減3是因?yàn)樾∷{(lán)條的高度為3px，為了后期通用也可以通過局部變量獲取小藍(lán)條的高度，替換這里的“3”。

5. 設(shè)置“移動(dòng)面板”自動(dòng)水平移動(dòng)的關(guān)鍵事件

（1）接下來需要做的就是當(dāng)點(diǎn)擊頁簽時(shí)，跟隨所點(diǎn)擊的頁簽自動(dòng)水平左右移動(dòng)“移動(dòng)面板”，達(dá)到可以來回切換10個(gè)頁簽的效果

通過分析可知，這里頁簽?zāi)J(rèn)展示的是5個(gè)，則：

①我們讓其點(diǎn)擊第1、2、3個(gè)頁簽時(shí)，“移動(dòng)面板”的位置在當(dāng)前位置，即坐標(biāo)為(0,0)；

②當(dāng)點(diǎn)擊第4、5、6、7、8個(gè)頁簽時(shí)，“移動(dòng)面板”的位置往左移動(dòng)一個(gè)頁簽寬度的距離（通過局部變量，獲取當(dāng)前頁簽的寬度為[[This.width]]），即坐標(biāo)分別為(-[[This.width]],0),(-[[This.width]]*2,0),(-[[This.width]]*3,0),(-[[This.width]]*4,0),(-[[This.width]]*5,0)

③當(dāng)點(diǎn)擊第9、10個(gè)頁簽時(shí)，“移動(dòng)面板”保持在(-[[This.width]]*5,0)。按上述規(guī)則為每個(gè)頁簽添加鼠標(biāo)點(diǎn)擊事件，移動(dòng)“移動(dòng)面板”。

（2）至此，可滾動(dòng)的多頁簽選項(xiàng)卡就基本完成啦，預(yù)覽一下效果：

可以發(fā)現(xiàn)點(diǎn)擊每個(gè)頁簽時(shí)，都可以保證所點(diǎn)擊頁簽的前后幾個(gè)頁簽都能一起展示，方便美觀。

下面是我在APP原型中應(yīng)用上述方法做的一個(gè)搜索首頁，下方的文檔選項(xiàng)卡可以鼠標(biāo)拖動(dòng)上滑加載，還可以點(diǎn)擊右側(cè)的小“+”號進(jìn)行頁簽的增刪。（具體增刪效果未做全，僅示意使用）

歡迎大家交流！

原型獲?。涸椭邪ㄉ厦娴诙K制作的可滾動(dòng)頁簽的選項(xiàng)卡，和一個(gè)類似的實(shí)例。

鏈接：https://pan.baidu.com/s/1XmlWetRfLHd-PZxaw_oK1Q
提取碼：3cwk

作者：醉貓，軟件設(shè)計(jì)師，3年系統(tǒng)、產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn)，曾參與多個(gè)系統(tǒng)、產(chǎn)品的設(shè)計(jì)開發(fā)工作。

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