Axure中實現(xiàn)手寫簽名功能(非JS注入)
電子簽名需求期望方案靈活易用,便于設(shè)計師和產(chǎn)品經(jīng)理發(fā)揮創(chuàng)意與自定義,但當(dāng)前多數(shù)依賴 JS 和 Canvas 的方案形成技術(shù)鴻溝,阻礙了這一目標實現(xiàn)。如何在滿足功能的同時降低技術(shù)門檻,成為電子簽名方案亟待解決的矛盾,而基于 SVG 的方案或許是破局關(guān)鍵。
目前網(wǎng)絡(luò)上絕大多數(shù)電子簽名方案,都依賴于直接注入 JavaScript 腳本并調(diào)用 Canvas 元素來實現(xiàn)。這種方式雖然功能強大靈活,但對于不具備編程背景的設(shè)計師和產(chǎn)品經(jīng)理而言,若要調(diào)整樣式、交互或擴展功能,幾乎無從下手。這使得本應(yīng)靈活易用的簽名組件,變成了一道技術(shù)鴻溝,嚴重限制了設(shè)計創(chuàng)意和產(chǎn)品自定義的發(fā)揮空間。
簽字,是承諾的終極形態(tài),是終結(jié)與開啟的分界,是秩序與責(zé)任的鐵證。
一簽一諾,重若千鈞。
預(yù)覽
預(yù)覽地址:https://usrsky.axshare.com/#id=w2dd4f&g=1
可以看出,筆跡書寫非常流暢,全程毫無卡頓與延遲,真實還原紙上書寫的跟手感。線條過渡自然柔和,無生硬尖銳之感,整體視覺效果舒適優(yōu)雅。
原理
如果不借助JS和Canvas,還需要動態(tài)生成圖片,那么SVG(Scalable Vector Graphics)就非常適合。
SVG基本形狀中<path>元素是最強大的一個,你可以用一行代碼創(chuàng)建任意形狀(線條、曲線、弧形等等)。
準備
我們需要準備一個動態(tài)面板。動態(tài)面板內(nèi)部放一張圖片,兩個文本域(sign和drawing)。動態(tài)面板外面放一個“重置”按鈕。
結(jié)構(gòu)如下:
1)動態(tài)面板:自適應(yīng)內(nèi)容,如設(shè)置背景色和邊框樣式即為簽字板的背景和邊框。
- 圖片:X:0Y:0寬度高度自己定。
- 文本域sign:X:0Y:0W:1H:1隱藏。
- 文本域drawing:X:0Y:0W:1H:1隱藏。
2)重置按鈕
交互
文件域sign的交互如下:
載入時[設(shè)置文本]的內(nèi)容為:
文件域drawing的交互如下:
動態(tài)面板的交互如下:
拖動結(jié)束時[設(shè)置文本]的內(nèi)容為:
重置按鈕的交互為:
這樣一個手寫簽名板就完成了。
擴展
恭喜!你已進入Axure的「繪圖新紀元」,這是一個屬于創(chuàng)造者的新篇章,此刻起,邏輯與美學(xué)將由你定義,無限可能正待你揮灑創(chuàng)意。
這里不僅是原畫的舞臺,更是無限可能的創(chuàng)造工廠!這一功能可靈活擴展為多種實用場景,例如:
- 畫圖板:自由繪制創(chuàng)意靈感,輕松表達設(shè)計思路https://usrsky.axshare.com/#id=7kgfjw&g=1
- 作業(yè)批改:直接在原型上批注反饋,溝通更直觀、修改更高效
- 文檔批注:像在紙上一樣標記重點,讓說明文檔也變得生動起來
- 地圖標記:快速標注動線、區(qū)域,規(guī)劃用戶路徑一目了然
- …還有更多玩法等你發(fā)掘!
無論是流程示意、UI草圖,還是互動演示,手動繪圖都能成為你的得力助手。發(fā)揮創(chuàng)意,動手試試吧 —— 意想不到的繪圖體驗,正等你來探索!
本文由 @Jorkin 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Pexels,基于 CC0 協(xié)議
該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。
- 目前還沒評論,等你發(fā)揮!