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

0 評論 363 瀏覽 1 收藏 6 分鐘

電子簽名需求期望方案靈活易用,便于設(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ù)。

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