【原創(chuàng)】用AXURE的動態(tài)面板實現(xiàn)TAB切換不同界面的效果 ---注冊登錄界面的設(shè)計和實現(xiàn)

作為一個在產(chǎn)品路上摸索的小白,記錄下自己的學(xué)習(xí)歷程僵腺。

希望這篇能幫到那些還在糾結(jié)動態(tài)面板/做TAB切換效果的同學(xué)們渗柿。

1.先設(shè)計好登錄界面和注冊界面:

2. 在注冊界面,選中“手機(jī)號”“密碼”“驗證碼”“注冊按鈕”這些文字、輸入框注冊控件隧出,點擊右鍵踏志,選擇“轉(zhuǎn)換為動態(tài)面板”

此時可見到一個半透明的動態(tài)面板出現(xiàn)在界面中,右鍵點擊該動態(tài)面板胀瞪,選擇“管理面板狀態(tài)”選項针余,會彈出如下彈窗:

3.選中“state 1”,右鍵點擊“state1”可以給state 1 動態(tài)面板起名凄诞,此處命名state 1 動態(tài)面板為“注冊界面”(動態(tài)面板“注冊界面”即是我們將見到的注冊界面)

?-> 然后點擊 ”+” 圖標(biāo)添加一個動態(tài)面板圆雁,此時可見多了一個動態(tài)面板叫 “state 2” 。選中state 2帆谍,右鍵點擊state 2進(jìn)行更名:“登錄界面”

4. 選中“登錄界面”伪朽,點擊“編輯”

圖標(biāo),此時進(jìn)入編輯動態(tài)面板“登錄界面”的界面(即在此處可以編輯登錄界面的內(nèi)容

(登錄界面包含:手機(jī)號文本汛蝙、密碼文本烈涮,手機(jī)號和密碼的輸入?yún)^(qū)域,以及登錄按鈕這些控件)

至此窖剑,界面布局基本完成坚洽。

在界面右下角可以管理剛剛創(chuàng)建的兩個動態(tài)面板:登錄界面,注冊界面西土。

現(xiàn)在讶舰,我們要實現(xiàn)一些交互功能:點擊“登錄”按鈕,界面跳轉(zhuǎn)到登錄界面需了,點擊“注冊”按鈕跳昼,界面跳轉(zhuǎn)到注冊界面。

6. 在主界面(非動態(tài)面板界面)中選擇“登錄”字樣 –> 點擊“鼠標(biāo)單擊時” -> 點擊“添加用例”

?? -> 選擇“設(shè)置面板狀態(tài)”-> 勾選“set(動態(tài)面板)status to 登錄界面”-> 將“選擇狀態(tài)”調(diào)至“登錄界面”

至此便實現(xiàn)了:在登錄界面點擊“登錄”二字時肋乍,界面顯示的是登錄界面庐舟。

同理,請按照同樣的方法實現(xiàn):點擊“注冊”字樣住拭,界面跳轉(zhuǎn)到注冊界面挪略。

至此历帚,TAB切換登錄/注冊界面的功能就做好了。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

PLUS: 實現(xiàn)點擊“登錄” 杠娱、“注冊”時挽牢,被鼠標(biāo)懸浮 / 點擊 / 選中 的文字有變色/下劃線等效果出現(xiàn)的功能:

1.選中主界面中的“注冊”, 在“交互樣式設(shè)置”中點擊“鼠標(biāo)懸吞螅”禽拔,選擇想要的字體突出效果,點確定室叉。 同理睹栖,依次還要設(shè)置“鼠標(biāo)按下”“選中”事件,設(shè)置想要的突出字體的效果茧痕。

2. 注意野来,“選中”事件需要多一步操作,指定哪個控件是當(dāng)前被選中的控件:

在主界面(非動態(tài)面板界面)中選擇“注冊”字樣 –> 點擊“鼠標(biāo)單擊時” -> 點擊“添加用例”

?? -> 選擇“設(shè)置選中”-> 勾選“當(dāng)前元件to True”

3. 重復(fù)第1~2個步驟踪旷,將“登錄”也進(jìn)行同樣的設(shè)置曼氛。

4. 將主界面的“登錄”“注冊”捆綁成一組:

同時選中“登錄”“注冊”字樣 -> 在“設(shè)置選項組名稱中”給這個組起個名字,此時即可將這兩個詞捆綁令野。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末舀患,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子气破,更是在濱河造成了極大的恐慌聊浅,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,454評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件现使,死亡現(xiàn)場離奇詭異狗超,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)朴下,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評論 3 385
  • 文/潘曉璐 我一進(jìn)店門努咐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人殴胧,你說我怎么就攤上這事渗稍。” “怎么了团滥?”我有些...
    開封第一講書人閱讀 157,921評論 0 348
  • 文/不壞的土叔 我叫張陵竿屹,是天一觀的道長。 經(jīng)常有香客問我灸姊,道長拱燃,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,648評論 1 284
  • 正文 為了忘掉前任力惯,我火速辦了婚禮碗誉,結(jié)果婚禮上召嘶,老公的妹妹穿的比我還像新娘。我一直安慰自己哮缺,他們只是感情好弄跌,可當(dāng)我...
    茶點故事閱讀 65,770評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著尝苇,像睡著了一般铛只。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上糠溜,一...
    開封第一講書人閱讀 49,950評論 1 291
  • 那天淳玩,我揣著相機(jī)與錄音,去河邊找鬼非竿。 笑死蜕着,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的汽馋。 我是一名探鬼主播,決...
    沈念sama閱讀 39,090評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼圈盔,長吁一口氣:“原來是場噩夢啊……” “哼豹芯!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起驱敲,我...
    開封第一講書人閱讀 37,817評論 0 268
  • 序言:老撾萬榮一對情侶失蹤铁蹈,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后众眨,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體握牧,經(jīng)...
    沈念sama閱讀 44,275評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,592評論 2 327
  • 正文 我和宋清朗相戀三年娩梨,在試婚紗的時候發(fā)現(xiàn)自己被綠了沿腰。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,724評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡狈定,死狀恐怖颂龙,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情纽什,我是刑警寧澤措嵌,帶...
    沈念sama閱讀 34,409評論 4 333
  • 正文 年R本政府宣布,位于F島的核電站芦缰,受9級特大地震影響企巢,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜让蕾,卻給世界環(huán)境...
    茶點故事閱讀 40,052評論 3 316
  • 文/蒙蒙 一浪规、第九天 我趴在偏房一處隱蔽的房頂上張望或听。 院中可真熱鬧,春花似錦罗丰、人聲如沸神帅。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽找御。三九已至,卻和暖如春绍填,著一層夾襖步出監(jiān)牢的瞬間霎桅,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1 266
  • 我被黑心中介騙來泰國打工讨永, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留滔驶,地道東北人。 一個月前我還...
    沈念sama閱讀 46,503評論 2 361
  • 正文 我出身青樓卿闹,卻偏偏與公主長得像揭糕,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子锻霎,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,627評論 2 350

推薦閱讀更多精彩內(nèi)容

  • 效果分析 通過點擊右上角的圖標(biāo)切換掃碼著角、賬號登錄方式; 在掃碼登錄頁面旋恼,鼠標(biāo)移入吏口、移出二維碼時,二維碼平行移動冰更,并...
    第七周期閱讀 13,908評論 0 11
  • 這里我就用一個主界面和多層的動態(tài)面板內(nèi)嵌(只是鉆研和加深交互練習(xí)产徊,平常還是跳轉(zhuǎn)鏈接更方便)。演示一下關(guān)于QQ界面的...
    夏天灬閱讀 2,690評論 0 7
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,841評論 25 707
  • 函數(shù)總結(jié) onFinishInflate():這是一個回掉方法,當(dāng)應(yīng)用從xml布局文件加載該組件并利用它構(gòu)造界面之...
    牛牛的王大蝦閱讀 299評論 0 0
  • 中世紀(jì)的歐洲有一個小村落蜀细,相傳那里不僅景色迷人舟铜,而且美女如云。但是卻有個不成文的規(guī)定奠衔,出嫁前的少女深滚,必須戴著頭紗,...
    小魚_2530閱讀 251評論 0 0