摘要：評論已經(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使用技巧滩报；或者希望通過臨摹交互案例锅知，進一步提升高保交互設計能力。請點擊下方關注按鈕脓钾，查看更多連載作品售睹。
