如何在點選Button後，消除Text框內的文字？
61 views
Skip to first unread message
ArdenWang
Aug 17, 2008, 3:17:54 AM8/17/08
to Axure RP交流論壇
各位好，我是剛開始嘗試使用Axure RP進行網站設計的新手。
我遇到一個設計上的問題，我做了一個會員登入元件，設定了「取消」及「確認送出」的功能。
現在我需要把「取消」這個功能Button附加變數，讓會員帳號＆密碼自動消除（類似重填）
請問要如何設定呢？
Example：
---------------------------------------
會員帳號：X...@XXX.XXX ←文字
會員密碼：XXXXXXXX ←文字
取消 確認送出
---------------------------------------
我遇到一個設計上的問題，我做了一個會員登入元件，設定了「取消」及「確認送出」的功能。
現在我需要把「取消」這個功能Button附加變數，讓會員帳號＆密碼自動消除（類似重填）
請問要如何設定呢？
Example：
---------------------------------------
會員帳號：X...@XXX.XXX ←文字
會員密碼：XXXXXXXX ←文字
取消 確認送出
---------------------------------------
zi li
Aug 17, 2008, 10:09:59 PM8/17/08
to axure-r...@googlegroups.com
很简单，就像PS里面的层，你再做一个新的页，里面只有空白的输入框，在原来的页面上点击取消后，进入到该页，从表面来看是原来输入框内的内容消息了，其实背后是跳转了一个页面，效果达到就可以了~~~
Axure的动态交互功能并不强，碰到这种情况，一定要想到类似PS里"层"的概念~~~
2008/8/17, ArdenWang <Arde...@gmail.com>:
Shunz
Aug 17, 2008, 11:03:46 PM8/17/08
to axure-r...@googlegroups.com
这个问题可以有多种解法：
方法一：就是zi li同学的这种解法，关键点在于：
A、事先设置一个Penal,设置两个state（内容一样，第一、二层中的帐号、密码Text Field都为空，默认显示第一层）；
B、为"取消"按钮设置一个Set Panel事件，当点击"取消"按钮时，切换到该Panel的第二层。
这样，当用户在第一层的Text Field中输入了数据，点击"取消"后，切换到第二层，自然会显示没有输入数据的状态，从而用障眼法的方式"模拟"达到ArdenWang同学的要求，为什么说"模拟"，因为这个方法还有个缺点，就是当用户继续在显示的第二层继续输入数据，此时再点击"取消"按钮，依然显示的是第二层的内容，Text Field中的数据还存在，如此就达不到预期的效果了。
所以，最好的解法是方法二：为Text Field设置label，然后点击按钮时，清空该label对应Text Field中的内容；当然这个方法要比方法一操作起来麻烦那么一点点。
具体步骤如下：
A、拖出两个Text Field，并设置label，例如帐号为ID，密码为Passwd；
B、再拖出个Button,添加OnClick事件；
C、勾选窗口中 Step2里面的"Set Variable and Widget value equal to Value"；
D、点击Step3中的蓝色链接，在弹出的窗口，第一个下拉框选"text on widget",第二个下拉框选"ID",第三个保持为"value",第四个保持为空；继续点击最后的加号按钮，并在新添加的第二个下拉框选"Passwd"，其他和上面一样；
E、Done,输出测试
简言之，只要求低保真度,原型设计速度要求更高、或对开发不熟，更熟悉PS层级概念的情况下，用方法一模拟就行了；反过来，更熟悉开发方式，对PS层级概念不熟、或要求更真实的操作效果，那用方法二是最好的选择；
方法一：就是zi li同学的这种解法，关键点在于：
A、事先设置一个Penal,设置两个state（内容一样，第一、二层中的帐号、密码Text Field都为空，默认显示第一层）；
B、为"取消"按钮设置一个Set Panel事件，当点击"取消"按钮时，切换到该Panel的第二层。
这样，当用户在第一层的Text Field中输入了数据，点击"取消"后，切换到第二层，自然会显示没有输入数据的状态，从而用障眼法的方式"模拟"达到ArdenWang同学的要求，为什么说"模拟"，因为这个方法还有个缺点，就是当用户继续在显示的第二层继续输入数据，此时再点击"取消"按钮，依然显示的是第二层的内容，Text Field中的数据还存在，如此就达不到预期的效果了。
所以，最好的解法是方法二：为Text Field设置label，然后点击按钮时，清空该label对应Text Field中的内容；当然这个方法要比方法一操作起来麻烦那么一点点。
具体步骤如下：
A、拖出两个Text Field，并设置label，例如帐号为ID，密码为Passwd；
B、再拖出个Button,添加OnClick事件；
C、勾选窗口中 Step2里面的"Set Variable and Widget value equal to Value"；
D、点击Step3中的蓝色链接，在弹出的窗口，第一个下拉框选"text on widget",第二个下拉框选"ID",第三个保持为"value",第四个保持为空；继续点击最后的加号按钮，并在新添加的第二个下拉框选"Passwd"，其他和上面一样；
E、Done,输出测试
简言之，只要求低保真度,原型设计速度要求更高、或对开发不熟，更熟悉PS层级概念的情况下，用方法一模拟就行了；反过来，更熟悉开发方式，对PS层级概念不熟、或要求更真实的操作效果，那用方法二是最好的选择；
2008/8/18 zi li <loyi...@gmail.com>
Shunz
Aug 17, 2008, 11:13:19 PM8/17/08
to axure-r...@googlegroups.com
zi li
Aug 18, 2008, 2:29:57 AM8/18/08
to axure-r...@googlegroups.com
注意到一个细节，想问一下ArdenWang
你说的要解决的这个问题，大家给出了很好的解决方法，也很感谢shunz让我又多学了一个方法
但是我还有一个疑问，请看你给出的原型：
Example：
---------------------------------------
會員帳號：X...@XXX.XXX ←文字
會員密碼：XXXXXXXX ←文字
取消 確認送出
---------------------------------------
很明显，你的"确定"与"取消"按钮的顺序与常态相比，是相反的，请问是无意中的安排还是故意的？如果是故意的，有什么道理？偶对这个非常感兴趣，还望解释一下，谢谢！
在08-8-18，Shunz <roc...@gmail.com> 写道：
ArdenWang
Aug 18, 2008, 5:24:03 AM8/18/08
to Axure RP交流論壇
先感謝各位的熱情交流，我又對Axure RP的功能有更進一步的認識了！
這樣也解決了我的問題，希望以後我也可以貢獻一些經驗。
回zi Li網友的部份：
因為我使用滑鼠時慣用右手，設計網站框架時，習慣性會把確認通過的功能項目置右，考慮到使用者的網站功能動線是由上而下＆由左而右，才會有這樣的設計，
原因非常單純，哈。
On 8月18日, 下午2時29分, "zi li" <loyi1...@gmail.com> wrote:
> 注意到一个细节，想问一下ArdenWang
> 你说的要解决的这个问题，大家给出了很好的解决方法，也很感谢shunz让我又多学了一个方法
> 但是我还有一个疑问，请看你给出的原型：
>
> Example：
> ---------------------------------------
> 會員帳號：X...@XXX.XXX ←文字
>
> 會員密碼：XXXXXXXX ←文字
>
> 取消 確認送出
> ---------------------------------------
>
> 很明显，你的"确定"与"取消"按钮的顺序与常态相比，是相反的，请问是无意中的安排还是故意的？如果是故意的，有什么道理？偶对这个非常感兴趣，还望解释一下，谢谢！
>
> 在08-8-18，Shunz <rock...@gmail.com> 写道：
>
>
>
> > 补上上述两种方法的源文件
>
> > 2008/8/18 Shunz <rock...@gmail.com>
這樣也解決了我的問題，希望以後我也可以貢獻一些經驗。
回zi Li網友的部份：
因為我使用滑鼠時慣用右手，設計網站框架時，習慣性會把確認通過的功能項目置右，考慮到使用者的網站功能動線是由上而下＆由左而右，才會有這樣的設計，
原因非常單純，哈。
On 8月18日, 下午2時29分, "zi li" <loyi1...@gmail.com> wrote:
> 注意到一个细节，想问一下ArdenWang
> 你说的要解决的这个问题，大家给出了很好的解决方法，也很感谢shunz让我又多学了一个方法
> 但是我还有一个疑问，请看你给出的原型：
>
> Example：
> ---------------------------------------
> 會員帳號：X...@XXX.XXX ←文字
>
> 會員密碼：XXXXXXXX ←文字
>
> 取消 確認送出
> ---------------------------------------
>
> 很明显，你的"确定"与"取消"按钮的顺序与常态相比，是相反的，请问是无意中的安排还是故意的？如果是故意的，有什么道理？偶对这个非常感兴趣，还望解释一下，谢谢！
>
>
>
>
> > 补上上述两种方法的源文件
>
> > 2008/8/18 Shunz <rock...@gmail.com>
>
> >> 这个问题可以有多种解法：
> >> 方法一：就是zi li同学的这种解法，关键点在于：
> >> A、事先设置一个Penal,设置两个state（内容一样，第一、二层中的帐号、密码Text Field都为空，默认显示第一层）；
> >> B、为"取消"按钮设置一个Set Panel事件，当点击"取消"按钮时，切换到该Panel的第二层。
>
> >> 这样，当用户在第一层的Text
> >> Field中输入了数据，点击"取消"后，切换到第二层，自然会显示没有输入数据的状态，从而用障眼法的方式"模拟"达到ArdenWang同学的要求，为什么说"模拟"，因为这个方法还有个缺点，就是当用户继续在显示的第二层继续输入数据，此时再点击"取消"按钮，依然显示的是第二层的内容，Text
> >> Field中的数据还存在，如此就达不到预期的效果了。
>
> >> 所以，最好的解法是方法二：为Text Field设置label，然后点击按钮时，清空该label对应Text
> >> Field中的内容；当然这个方法要比方法一操作起来麻烦那么一点点。
>
> >> 具体步骤如下：
> >> A、拖出两个Text Field，并设置label，例如帐号为ID，密码为Passwd；
> >> B、再拖出个Button,添加OnClick事件；
> >> C、勾选窗口中 Step2里面的"Set Variable and Widget value equal to Value"；
> >> D、点击Step3中的蓝色链接，在弹出的窗口，第一个下拉框选"text on
> >> widget",第二个下拉框选"ID",第三个保持为"value",第四个保持为空；继续点击最后的加号按钮，并在新添加的第二个下拉框选"Passwd"，其他和上面一样；
> >> E、Done,输出测试
>
> >> 简言之，只要求低保真度,原型设计速度要求更高、或对开发不熟，更熟悉PS层级概念的情况下，用方法一模拟就行了；反过来，更熟悉开发方式，对PS层级概念不熟、或要求更真实的操作效果，那用方法二是最好的选择；
>
> >> 2008/8/18 zi li <loyi1...@gmail.com>
> >> 这个问题可以有多种解法：
> >> 方法一：就是zi li同学的这种解法，关键点在于：
> >> A、事先设置一个Penal,设置两个state（内容一样，第一、二层中的帐号、密码Text Field都为空，默认显示第一层）；
> >> B、为"取消"按钮设置一个Set Panel事件，当点击"取消"按钮时，切换到该Panel的第二层。
>
> >> 这样，当用户在第一层的Text
> >> Field中输入了数据，点击"取消"后，切换到第二层，自然会显示没有输入数据的状态，从而用障眼法的方式"模拟"达到ArdenWang同学的要求，为什么说"模拟"，因为这个方法还有个缺点，就是当用户继续在显示的第二层继续输入数据，此时再点击"取消"按钮，依然显示的是第二层的内容，Text
> >> Field中的数据还存在，如此就达不到预期的效果了。
>
> >> 所以，最好的解法是方法二：为Text Field设置label，然后点击按钮时，清空该label对应Text
> >> Field中的内容；当然这个方法要比方法一操作起来麻烦那么一点点。
>
> >> 具体步骤如下：
> >> A、拖出两个Text Field，并设置label，例如帐号为ID，密码为Passwd；
> >> B、再拖出个Button,添加OnClick事件；
> >> C、勾选窗口中 Step2里面的"Set Variable and Widget value equal to Value"；
> >> D、点击Step3中的蓝色链接，在弹出的窗口，第一个下拉框选"text on
> >> widget",第二个下拉框选"ID",第三个保持为"value",第四个保持为空；继续点击最后的加号按钮，并在新添加的第二个下拉框选"Passwd"，其他和上面一样；
> >> E、Done,输出测试
>
> >> 简言之，只要求低保真度,原型设计速度要求更高、或对开发不熟，更熟悉PS层级概念的情况下，用方法一模拟就行了；反过来，更熟悉开发方式，对PS层级概念不熟、或要求更真实的操作效果，那用方法二是最好的选择；
>
>
> >>> 很简单，就像PS里面的层，你再做一个新的页，里面只有空白的输入框，在原来的页面上点击取消后，进入到该页，从表面来看是原来输入框内的内容消息了，其实背后是跳转了一个页面，效果达到就可以了~~~
> >>> Axure的动态交互功能并不强，碰到这种情况，一定要想到类似PS里"层"的概念~~~
>
> >>> 2008/8/17, ArdenWang <ArdenW...@gmail.com>:
> >>> 很简单，就像PS里面的层，你再做一个新的页，里面只有空白的输入框，在原来的页面上点击取消后，进入到该页，从表面来看是原来输入框内的内容消息了，其实背后是跳转了一个页面，效果达到就可以了~~~
> >>> Axure的动态交互功能并不强，碰到这种情况，一定要想到类似PS里"层"的概念~~~
>
Richard
Aug 18, 2008, 5:27:32 AM8/18/08
to Axure RP交流論壇
Shunz,
沒有比你解釋的更清楚的設計方式了! 很厲害呀! :)
我會把你的sample RP 上傳到檔案區.
感謝你的教學跟解答呀!
沒有比你解釋的更清楚的設計方式了! 很厲害呀! :)
我會把你的sample RP 上傳到檔案區.
感謝你的教學跟解答呀!
小木可
Aug 18, 2008, 5:42:12 AM8/18/08
to Axure RP交流論壇
我的作法是按下「取消」鈕後，reload current page
優點：簡單
缺點：頁面會閃一下
:)
優點：簡單
缺點：頁面會閃一下
:)
Richard
Aug 18, 2008, 5:49:04 AM8/18/08
to Axure RP交流論壇
小木可,
有創意! :) 我怎麼都沒想到用這種方式.
Zi Li,
你的解法也很不錯.
有創意! :) 我怎麼都沒想到用這種方式.
Zi Li,
你的解法也很不錯.
Shunz
Aug 18, 2008, 5:54:36 AM8/18/08
to axure-r...@googlegroups.com
Shunz
Aug 18, 2008, 6:14:02 AM8/18/08
to axure-r...@googlegroups.com
嗯，这招够邪，确实可以解决所提出的问题，充分利用了工具赋予的功能，学习小木可同学的探索态度。
P.S.表扬完了，继续挑个刺，此方式和Zi Li的方法一样，有点副作用，可能还有点严重：如果以此方式给客户演示时，页面闪烁可能会误导客户，让客户误认为最终效果也是这样哦。而且一般的页面除了登录框和密码框，还会有大量的元素，因此，页面上的元素越多，刷新一下的成本也就越高。
hoho，有点吹毛求疵了，总之，再次学习小木可同学另辟蹊径的创新思维方式。
P.S.表扬完了，继续挑个刺，此方式和Zi Li的方法一样，有点副作用，可能还有点严重：如果以此方式给客户演示时，页面闪烁可能会误导客户，让客户误认为最终效果也是这样哦。而且一般的页面除了登录框和密码框，还会有大量的元素，因此，页面上的元素越多，刷新一下的成本也就越高。
hoho，有点吹毛求疵了，总之，再次学习小木可同学另辟蹊径的创新思维方式。
2008/8/18 Richard <gric...@gmail.com>
Reply all
Reply to author
Forward
0 new messages