国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

分段控件是指一組分段按鈕，點(diǎn)擊之后切換到相應(yīng)視圖。俗稱分段器、標(biāo)簽頁(yè)。

典型應(yīng)用場(chǎng)景

原型畫法(無(wú)交互)

分段控件通常由多個(gè)分段組成，每個(gè)分段由按鈕和圖標(biāo)組成。位于導(dǎo)航欄內(nèi)部或者下方。

（1）先畫第一個(gè)分段。從“默認(rèn)元件庫(kù)”拖動(dòng)“矩形3”到工作區(qū)，修改尺寸為125*30，移動(dòng)到導(dǎo)航欄下方。代表該分段處于選中狀態(tài)并顯示選中樣式。

（2）再畫第二個(gè)分段。從“默認(rèn)元件庫(kù)”拖動(dòng)“矩形1”到工作區(qū)，修改尺寸為125*30，移動(dòng)到第一個(gè)分段后面，代表該分段處于未選中狀態(tài)并顯示未選中樣式。

（3）再畫第三個(gè)分段。復(fù)制第二個(gè)分段，然后移動(dòng)到后面。

（4）生成原型HTML并在瀏覽器中查看效果。

原型畫法(有交互)

分段控件的常見交互效果：

• 默認(rèn)展示第一個(gè)分段的選中樣式。
• 點(diǎn)擊任一分段，則該分段被選中且顯示選中樣式，同時(shí)顯示對(duì)應(yīng)的內(nèi)容。
• 同一時(shí)間，有且只有一個(gè)分段被選中且顯示選中樣式。

接下來(lái)詳細(xì)講解分段控件的交互如何畫出來(lái)。

（5）按照上述的方法，重新畫出三個(gè)分段。

（6）選中3個(gè)分段，然后在“屬性-交互樣式設(shè)置”中，點(diǎn)擊“選中”彈出框。

（7）設(shè)置選中的樣式：文本顏色為白色#00000，填充顏色為#A1A1A1。

（8）繼續(xù)選中這3個(gè)分段，設(shè)置選項(xiàng)組名稱為“分段”或者其他任意名稱。

（9）選中第一個(gè)分段，設(shè)置事件“鼠標(biāo)單擊時(shí)”，添加動(dòng)作“選中”，組織動(dòng)作“選擇當(dāng)前元件”。

（10）同理設(shè)置其他分段的交互事件，可以復(fù)制交互事件。

（11）選中第一個(gè)分段，勾選“選中”，這樣查看原型的時(shí)候默認(rèn)選中該分段并展示選中交互樣式。

（12）生成原型HTML并在瀏覽器中查看效果。

添加到APP功能庫(kù)

不同場(chǎng)景下的分段控件功能，內(nèi)容不一樣，樣式相對(duì)固定。

作者根據(jù)多年P(guān)M經(jīng)驗(yàn)，總結(jié)出2種常用的“搜索”，添加到APP功能庫(kù)。

分段控件(按鈕)

分段控件(下劃線)

注意事項(xiàng)

建議結(jié)合標(biāo)簽欄的原型畫法進(jìn)行對(duì)比學(xué)習(xí)差異點(diǎn)和相同點(diǎn)。

• Android中類似的控件為固定選項(xiàng)卡以及滾動(dòng)選項(xiàng)卡，可以左滑或右滑在不同的視圖之間進(jìn)行切換。
• iOS中也大量采用這種交互方式，在視圖之間可以左滑右滑切換視圖，用戶操作上更加地便捷。

分段控件可以使用文字按鈕或圖片按鈕，但是不建議在一個(gè)分段中混用。

提供源文件下載學(xué)習(xí)https://pan.baidu.com/s/1lOysRY59IOQN7Hhl7jrI3g

相關(guān)閱讀

APP工具欄如何用Axure畫出來(lái)

APP單選功能如何用Axure畫出來(lái)

APP開關(guān)功能怎么用Axure畫出來(lái)

APP九宮格如何用Axure畫出來(lái)

APP上導(dǎo)航如何用Axure畫出來(lái)

APP下導(dǎo)航如何通過(guò)Axure畫出來(lái)

常見的列表頁(yè)如何用Axure畫出來(lái)

#專欄作家#

浪子，公眾號(hào)：浪子畫原型。擅長(zhǎng)于APP原型設(shè)計(jì)和產(chǎn)品架構(gòu)。

本文由 @浪子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Pexels ，基于 CC0 協(xié)議