起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識APP分段控件功能如何用Axure畫出來
分段控件是指一組分段按鈕，點擊之后切換到相應(yīng)視圖。俗稱分段器、標(biāo)簽頁。
典型應(yīng)用場景
原型畫法(無交互)
分段控件通常由多個分段組成，每個分段由按鈕和圖標(biāo)組成。位于導(dǎo)航欄內(nèi)部或者下方。
（1）先畫第一個分段。從“默認(rèn)元件庫”拖動“矩形3”到工作區(qū)，修改尺寸為125*30，移動到導(dǎo)航欄下方。代表該分段處于選中狀態(tài)并顯示選中樣式。
（2）再畫第二個分段。從“默認(rèn)元件庫”拖動“矩形1”到工作區(qū)，修改尺寸為125*30，移動到第一個分段后面，代表該分段處于未選中狀態(tài)并顯示未選中樣式。
（3）再畫第三個分段。復(fù)制第二個分段，然后移動到后面。
（4）生成原型HTML并在瀏覽器中查看效果。
原型畫法(有交互)
分段控件的常見交互效果：
- 默認(rèn)展示第一個分段的選中樣式。
- 點擊任一分段，則該分段被選中且顯示選中樣式，同時顯示對應(yīng)的內(nèi)容。
- 同一時間，有且只有一個分段被選中且顯示選中樣式。
接下來詳細(xì)講解分段控件的交互如何畫出來。
（5）按照上述的方法，重新畫出三個分段。
（6）選中3個分段，然后在“屬性-交互樣式設(shè)置”中，點擊“選中”彈出框。
（7）設(shè)置選中的樣式：文本顏色為白色#00000，填充顏色為#A1A1A1。
（8）繼續(xù)選中這3個分段，設(shè)置選項組名稱為“分段”或者其他任意名稱。
（9）選中第一個分段，設(shè)置事件“鼠標(biāo)單擊時”，添加動作“選中”，組織動作“選擇當(dāng)前元件”。
（10）同理設(shè)置其他分段的交互事件，可以復(fù)制交互事件。
（11）選中第一個分段，勾選“選中”，這樣查看原型的時候默認(rèn)選中該分段并展示選中交互樣式。
（12）生成原型HTML并在瀏覽器中查看效果。
添加到APP功能庫
不同場景下的分段控件功能，內(nèi)容不一樣，樣式相對固定。
作者根據(jù)多年P(guān)M經(jīng)驗，總結(jié)出2種常用的“搜索”，添加到APP功能庫。
分段控件(按鈕)
分段控件(下劃線)
注意事項
建議結(jié)合標(biāo)簽欄的原型畫法進(jìn)行對比學(xué)習(xí)差異點和相同點。
- Android中類似的控件為固定選項卡以及滾動選項卡，可以左滑或右滑在不同的視圖之間進(jìn)行切換。
- iOS中也大量采用這種交互方式，在視圖之間可以左滑右滑切換視圖，用戶操作上更加地便捷。
分段控件可以使用文字按鈕或圖片按鈕，但是不建議在一個分段中混用。
提供源文件下載學(xué)習(xí)https://pan.baidu.com/s/1lOysRY59IOQN7Hhl7jrI3g
相關(guān)閱讀
#專欄作家#
浪子，公眾號：浪子畫原型。擅長于APP原型設(shè)計和產(chǎn)品架構(gòu)。
本文由 @浪子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Pexels ，基于 CC0 協(xié)議
添加到APP功能庫，在分段控件中屬性位置找不到“圖標(biāo)——使用縮略圖”的功能。
作者分享的很好呀，文章內(nèi)容雖然簡潔，但是很實用。這就是分段控件，建議你們有空diss作者不如好好練練你的axure，質(zhì)疑的人真搞笑。評論區(qū)有些人真的是鍵盤俠。
寫不出有水準(zhǔn)的內(nèi)容了嗎
歡迎你寫出好文章給大家學(xué)習(xí)哈。
讓大家能夠看懂并能夠快速學(xué)會，是我寫文章的宗旨。
水
這難道不叫tab嗎
也可以這樣叫，文章最上面寫了它的俗稱。
尊重別人的分享成果，評論真是·········
·········
– – 寫不出新東西了嗎???
歡迎你寫出更好的文章，供大家學(xué)習(xí)。
你管tab頁叫分段嗎？
這也能水一章……………………
覺得水，歡迎寫一篇diss哈，給人人都是產(chǎn)品經(jīng)理貢獻(xiàn)更好的內(nèi)容。