Axure中實(shí)現(xiàn)手寫(xiě)簽名功能(非JS注入)

0 評(píng)論 363 瀏覽 1 收藏 6 分鐘

電子簽名需求期望方案靈活易用,便于設(shè)計(jì)師和產(chǎn)品經(jīng)理發(fā)揮創(chuàng)意與自定義,但當(dāng)前多數(shù)依賴 JS 和 Canvas 的方案形成技術(shù)鴻溝,阻礙了這一目標(biāo)實(shí)現(xiàn)。如何在滿足功能的同時(shí)降低技術(shù)門(mén)檻,成為電子簽名方案亟待解決的矛盾,而基于 SVG 的方案或許是破局關(guān)鍵。

目前網(wǎng)絡(luò)上絕大多數(shù)電子簽名方案,都依賴于直接注入 JavaScript 腳本并調(diào)用 Canvas 元素來(lái)實(shí)現(xiàn)。這種方式雖然功能強(qiáng)大靈活,但對(duì)于不具備編程背景的設(shè)計(jì)師和產(chǎn)品經(jīng)理而言,若要調(diào)整樣式、交互或擴(kuò)展功能,幾乎無(wú)從下手。這使得本應(yīng)靈活易用的簽名組件,變成了一道技術(shù)鴻溝,嚴(yán)重限制了設(shè)計(jì)創(chuàng)意和產(chǎn)品自定義的發(fā)揮空間。

簽字,是承諾的終極形態(tài),是終結(jié)與開(kāi)啟的分界,是秩序與責(zé)任的鐵證。

一簽一諾,重若千鈞。

預(yù)覽

預(yù)覽地址:https://usrsky.axshare.com/#id=w2dd4f&g=1

可以看出,筆跡書(shū)寫(xiě)非常流暢,全程毫無(wú)卡頓與延遲,真實(shí)還原紙上書(shū)寫(xiě)的跟手感。線條過(guò)渡自然柔和,無(wú)生硬尖銳之感,整體視覺(jué)效果舒適優(yōu)雅。

原理

如果不借助JS和Canvas,還需要?jiǎng)討B(tài)生成圖片,那么SVG(Scalable Vector Graphics)就非常適合。

SVG基本形狀中<path>元素是最強(qiáng)大的一個(gè),你可以用一行代碼創(chuàng)建任意形狀(線條、曲線、弧形等等)。

準(zhǔn)備

我們需要準(zhǔn)備一個(gè)動(dòng)態(tài)面板。動(dòng)態(tài)面板內(nèi)部放一張圖片,兩個(gè)文本域(sign和drawing)。動(dòng)態(tài)面板外面放一個(gè)“重置”按鈕。

結(jié)構(gòu)如下:

1)動(dòng)態(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í)[設(shè)置文本]的內(nèi)容為:

文件域drawing的交互如下:

動(dòng)態(tài)面板的交互如下:

拖動(dòng)結(jié)束時(shí)[設(shè)置文本]的內(nèi)容為:

重置按鈕的交互為:

這樣一個(gè)手寫(xiě)簽名板就完成了。

擴(kuò)展

恭喜!你已進(jìn)入Axure的「繪圖新紀(jì)元」,這是一個(gè)屬于創(chuàng)造者的新篇章,此刻起,邏輯與美學(xué)將由你定義,無(wú)限可能正待你揮灑創(chuàng)意。

這里不僅是原畫(huà)的舞臺(tái),更是無(wú)限可能的創(chuàng)造工廠!這一功能可靈活擴(kuò)展為多種實(shí)用場(chǎng)景,例如:

  • 畫(huà)圖板:自由繪制創(chuàng)意靈感,輕松表達(dá)設(shè)計(jì)思路https://usrsky.axshare.com/#id=7kgfjw&g=1
  • 作業(yè)批改:直接在原型上批注反饋,溝通更直觀、修改更高效
  • 文檔批注:像在紙上一樣標(biāo)記重點(diǎn),讓說(shuō)明文檔也變得生動(dòng)起來(lái)
  • 地圖標(biāo)記:快速標(biāo)注動(dòng)線、區(qū)域,規(guī)劃用戶路徑一目了然
  • …還有更多玩法等你發(fā)掘!

無(wú)論是流程示意、UI草圖,還是互動(dòng)演示,手動(dòng)繪圖都能成為你的得力助手。發(fā)揮創(chuàng)意,動(dòng)手試試吧 —— 意想不到的繪圖體驗(yàn),正等你來(lái)探索!

本文由 @Jorkin 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自 Pexels,基于 CC0 協(xié)議

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!