摘要:評論已經(jīng)作為內(nèi)容型產(chǎn)品的一個基礎功能,那么評論功能中經(jīng)常使用的字數(shù)限制妓局,評論內(nèi)容清除功能是如何通過原型實現(xiàn)呢总放?本文就實現(xiàn)這些功能交互的效果來為大家分享設計的思路與方法。
準備元件跟磨,繪制線框圖
首先需要準備一個矩形框间聊、多行文本框、文本標簽及矩形按鈕抵拘,并為這些元件命名哎榴。(養(yǎng)成命名的好習慣,將有助于交互動作的配置及元件的快速查找)隱藏多行文本框的邊框僵蛛,默認隱藏矩形按鈕尚蝌,矩形按鈕內(nèi)輸入文字“清除”。假設我們限制評論內(nèi)容為100字以內(nèi)充尉,則文本標簽中輸入100/100飘言,前面的100為剩余字數(shù),后面的100為字數(shù)限制驼侠。
交互動作設置
為多行文本框設置文本改變事件,交互設置方法如下:
1)如果文本內(nèi)容為空倒源,則隱藏“一鍵清除”按鈕
2)如果文本內(nèi)容不為空苛预,則顯示“一鍵清除”按鈕
3)通過插入函數(shù)[[This.text.substr(0,100)]]來實現(xiàn)對文本字數(shù)限制的要求,即限制在0~100字之間笋熬;通過插入函數(shù)[[100-This.text.length]]/100實現(xiàn)對文本內(nèi)容的限制功能热某,this.text.length用于監(jiān)測文本的字數(shù)
交互設置如下圖所示:
接著,需要監(jiān)測文本框的焦點,我們?yōu)槲谋究蛟O置獲取焦點和失去焦點事件
獲取焦點:如果文本框不為空昔馋,則顯示“一鍵清除”按鈕
失去焦點:如果文本框為空筹吐,則隱藏“一鍵清除”按鈕
交互設置如下圖所示:
最后,我們在為“一鍵清除”按鈕秘遏,設置鼠標單擊事件丘薛,點擊按鈕時,文本框內(nèi)容為空垄提,交互動作配置如下圖所示:
至此一個帶有字數(shù)限制的評論功能原型已經(jīng)完成榔袋,需要源文件的同學可以在評論區(qū)留言。如果覺得我的分享對你有幫助铡俐,不妨給個贊賞凰兑,不打賞也沒關系,你的關注也是我持續(xù)分享的動力审丘。
如果你對Axure或原型設計有興趣吏够,希望系統(tǒng)性地學習Axure知識,掌握更多Axure使用技巧滩报;或者希望通過臨摹交互案例锅知,進一步提升高保交互設計能力。請點擊下方關注按鈕脓钾,查看更多連載作品售睹。