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

4 評(píng)論 11080 瀏覽 19 收藏 7 分鐘

單選是由多個(gè)單選項(xiàng)組成的選擇控件,獲取用戶針對(duì)某個(gè)事情的唯一結(jié)果。

常用場(chǎng)景有“微信APP-我-個(gè)人信息-設(shè)置性別”、“iOS設(shè)置-通知-顯示預(yù)覽”等。

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

單選功能通常包含標(biāo)題和多個(gè)單選項(xiàng),每個(gè)單選項(xiàng)由選項(xiàng)名稱和單選按鈕。

(1)先畫(huà)標(biāo)題。從默認(rèn)元件庫(kù)拖動(dòng)“文本標(biāo)簽”到工作區(qū),或者直接把“頁(yè)面名稱”作為標(biāo)題。

(2)再畫(huà)選項(xiàng)名稱。從默認(rèn)元件庫(kù)拖動(dòng)“矩形1”到工作區(qū),修改尺寸為375*40px,雙擊輸入文字“選項(xiàng)名稱”,設(shè)置左填充為15px這樣展示效果更妥當(dāng)。

(3)再畫(huà)單選按鈕。從默認(rèn)元件庫(kù)拖動(dòng)“文本標(biāo)簽”到“選項(xiàng)名稱”的右邊,雙擊輸入“√”,修改尺寸為40*40px,設(shè)置對(duì)齊方式為左右居中和垂直居中。

(4)復(fù)制單選名稱2份,依次排列。

(5)生成原型HTML并在瀏覽器中查看效果。

原型畫(huà)法(有交互)

單選功能的常見(jiàn)交互效果:點(diǎn)擊任一單選按鈕自動(dòng)變?yōu)檫x中狀態(tài),同時(shí)其他單選按鈕變成未選中狀態(tài)。選中狀態(tài)和未選中狀態(tài)的樣式是不一樣的。

(6)繼承上面的“無(wú)交互”步驟,從第四步開(kāi)始繼續(xù)畫(huà)“有交互”。設(shè)置按鈕的未選中狀態(tài),設(shè)置文本顏色為白色。

(7)設(shè)置按鈕的選中狀態(tài),點(diǎn)擊“交互樣式-選中”,選中字體顏色設(shè)置為#333333。

(8)設(shè)置按鈕為選項(xiàng)組。選擇按鈕設(shè)置選項(xiàng)組名稱為“單選”或者其他名稱,這樣代表該組的按鈕同時(shí)只能有一個(gè)選中狀態(tài)。

(9)選中標(biāo)題和按鈕,然后右鍵點(diǎn)擊“組合”,然后命名為“單選項(xiàng)”。

(10)設(shè)置單選項(xiàng)的交互。點(diǎn)擊該組合,設(shè)置“鼠標(biāo)單擊時(shí)”事件,添加動(dòng)作“選中”,組織動(dòng)作“當(dāng)前元件”。

(11)復(fù)制單選項(xiàng)2份,依次排列。

(12)選中第一個(gè)按鈕,打勾選中,這樣生成原型之后默認(rèn)選中它。

(13)生成原型HTML并在瀏覽器中查看效果。

添加到APP功能庫(kù)

不同場(chǎng)景下的單選功能,標(biāo)題不一樣,樣式相對(duì)固定。

根據(jù)多年P(guān)M經(jīng)驗(yàn),總結(jié)出3種常用的“單選”,添加到APP功能庫(kù)。

單選(打勾)

單選(主流)

單選(傳統(tǒng))

注意事項(xiàng)

單選功能同一時(shí)間只有一個(gè)選中狀態(tài)。

單選功能可以設(shè)計(jì)多種樣式,另外選擇器也可充當(dāng)單選功能。

相關(guān)閱讀

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

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

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

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

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

#專(zhuān)欄作家#

浪子,公眾號(hào):langzisay,人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。業(yè)務(wù)型PM。

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 謝謝作者,教程很詳細(xì),可以學(xué)到很多

    來(lái)自廣東 回復(fù)
  2. 請(qǐng)問(wèn)選項(xiàng)名稱跟單選按鈕的尺寸為什么是修改成那個(gè)尺寸呢?

    回復(fù)
    1. 建議這個(gè)尺寸,可以不遵循的。
      但是他們的高度肯定都要保持一樣。

      回復(fù)