將Axure移動端原型生成二維碼教程(二維碼支持微信等app掃描訪問)

2021-02-20 AxureUX

使用Axure製作完成移動端原型以後，如果需要在手機上進行演示，該如何進行操作呢？普通的方法就是將原型文件上傳到託管平臺上面，然後生成一個URL連結發送到手機上用瀏覽器打開。如果能將URL連結生成一個二維碼，直接用微信或QQ等應用直接掃描就能打開原型，這樣訪問體驗能有很大的提升。所以今天這篇分享就是教大家如何將Axure製作的移動端原型生成二維碼。

下面這個就是我用原型連結生成的二維碼圖片，直接用微信或QQ掃描這個二維碼就能體驗到效果。

連結地址：http://www.axureux.com/demo/ResumeTemplatePro/mobresume3.html

01移動端原型的設計規範

為了達到在手機端訪問原型時最佳的演示效果，我們在使用Axure製作移動端原型時需要遵守相關的設計規範。這部分我有在之前的分享《使用Axure打造最佳的移動端交互原型教程》中有過詳細的介紹，大家可以訪問網站上的教程分享欄目查看這篇文章，本篇分享的重點是關於生成二維碼的方法，所以對設計規範不再進行展開的介紹。

關於移動端原型的設計規範重要的部分就是內容區域的定義，我個人推薦的內容區域寬度尺寸為375px，我所製作的所有移動端原型全部是按照這個尺寸設計的。大家在製作移動端原型時可以根據需要進行調整設計尺寸，但是一旦確定下來以後需要當作一個標準進行延續。

02移動端原型的導出設置

原型設計完成以後進行進行生成HTML的導出設置，這項設置主要是爭對在移動端設備上的適配效果。設置位置：發布菜單—生成HTML-行動裝置，在界面中勾選「包含視口標籤」，設置寬度為：375，設置縮放為：no，其它選項為空就可以了。

03將原型打包上傳至託管平臺

原型生成HTML文件以後我們需要打包上傳至原型託管平臺上，上傳以後會生成一個對應的URL連結。關於原型託管平臺我比較推薦國內的產品大牛，百度搜索「產品大牛」便可以找到這個平臺。下面的這個演示連結就是我上傳到產品大牛以後生成的。

產品大牛演示連結：http://www.pmdaniu.com/storage/51693/af729afa027d093d63fc46962c5f11be-2316/mobresume3.html


需要注意的是，HTML文件打包上傳到產品大牛以後生成連結的默認結尾是start.html，我手動將它修改成了mobresume3.html。因為start.html是Axure生成HTML文件後的框架頁面，我們在用URL連結生成二維碼時是不能直接用這個默認地址的，需要用指定的頁面連結來生成。例如你的原型的第一個頁面的名稱是moblie，那麼需要將生成的連結地址的結尾由start.html改成moblie.html。如果你的原型中包含多個頁面，你也可以將start.html改成任何想要直接跳轉到的頁面。

除了產品大牛這個原型託管平臺之外，也可以使用Axure自帶的原型託管平臺Axshare。在Axure的發布菜單下有一個「發布到Axshare」的功能，通過快捷鍵F6也可以直接打開這個功能，點擊發布按紐就可以將原型直接發布到Axshare了。如果你沒有註冊和登錄Axshare，點擊發布的時候會彈出一個登錄界面，你只需要按步驟完成註冊和登錄就可以了。Axshare的託管服務是完全免費的，不過有時候在國內訪問會有點慢。

原型發布完成以後同樣會生成一個URL連結，我們在生成二維碼的時候不能直接用這個連結地址，也需要在連結後面加上對應的頁面名稱，原因跟上面描述的一樣。


Axshare演示連結：https://i5rs48.axshare.com/mobresume3.html

04將連結地址生成二維碼

原型發布到託管平臺並生成URL連結以後，最後一步將就是對應的URL連結生成為二維碼。生成的方式有兩種，一種是使用火狐瀏覽器的二維碼插件進行生成，另一種是使用專門的二維碼生成工具。

使用火狐瀏覽器的生成二維碼的方式非常簡單，使用火狐瀏覽器打開需要生成的連結地址，點擊地址欄右邊的二維碼圖標就可以將連結生成對應的二維碼了。下面這個截圖就是使用產品大牛的演示連結地址生成的效果，截圖保存這個圖片就可以用微信或QQ手機應用掃描進行訪問了。火狐瀏覽器的這個二維碼生成插件是自帶的，其它瀏覽器我沒有使用過，有的可能需要安裝一個生成插件。

使用專門的二維碼生成工具的方式也很簡單，百度「二維碼生成器」就可以找到很多類似的工具，例如下面這個草料二維碼生成工具，將連結地址粘貼進去，點擊生成二維碼就可以了。

草料二維碼生成器：https://cli.im/

05Web型簡歷導航效果實現

如果你有自己的FTP空間也可以將原型打包上傳以後用對應的連結來生成二維碼，原理上是相同的。

如果你需要更新原型的內容，需要在原來的文件上進行更新，對應的頁面名稱也不能刪除，否則生成的二維碼也會失效。

只要原型的連結地址是固定的，二維碼都是一直有效的。但是如果你使用託管平臺生成的連結地址是動態的，那麼生成的二維碼可能會隨時失效。

使用Axshare的連結生成的二維碼在使用部分應用掃描時無法訪問，具體原因未知。

交互原型模板及元件庫分享平臺

www.AxureUX.com

相關焦點

  • 利用axure原型在手機上做＂APP＂
    對於產品經理來說，畫完線框圖，再加上交互就成了更加形象的原型圖。一份生動形象且充滿邏輯性的原型圖，交到設計師或者程式設計師手中能令後續的工作進展的更加順暢。Axure不但支持在PC端生成html網頁形式的預覽，同樣也支持在移動端的預覽（包括交互!）相比於PC端網頁形式的預覽，移動端的展示效果更加逼真，能近乎真實的模擬一個APP。
  • Axure教程:高效訪問的原型託管網站(1)
    由於Axure自帶的伺服器 Axshare部署在海外的，導致國內的小夥伴在訪問上傳的項目原型連結時很慢，有時甚至打不開。
  • Axure產品原型在手機上運行的完整教程
    PRD文檔，供UI和開發進行前期工作，但是有的時候客戶、領導想在開發之前，看到產品的概貌，就必須做產品的高保真原型進行模擬，這時如果做出來的原型能運行在手機端，那再好不過，如圖1(註：上圖是仿照丁香園的家庭用藥，做的一個高保真原型，算是免費給丁香園打廣告，是不是考慮給我點廣告費?
  • Android實現條形碼與二維碼掃描
    有個二維碼是目前移動端和webAPP 常用是一種和用戶的交互方式，常用在社交，支付，電商app中，本文介紹實現條形碼與二維碼掃描。
  • 二維碼掃描登錄,原來是這樣實現的!
    將 token 返回給移動端，移動端將 token 存入在本地，往後移動端都通過 token 訪問服務端 API ，當然除了 token 之外，還需要攜帶設備信息，因為 token 可能會被劫持。帶上設備信息之後，就算 token 被劫持也沒有關係，因為設備信息是唯一的。
  • Android-二維碼掃描與生成二維碼詳解
    zxing可以實現使用手機的內置的攝像頭完成條形碼和二維碼的掃描與解碼。zxing可以實現條形碼和二維碼的編碼與解碼。zxing項目地址:https://github.com/zxing/zxing將整個包 com.google.zxing（包含路徑）複製到自己的項目下。3.複製res下的資源文件，注意不要覆蓋掉了自己項目裡的內容。可以將內容複製到對應的文件裡邊。(1).raw下的beep.ogg。
  • 微信二維碼登錄原理
    手機微信把具有老王身份信息的token A和這個SWJNSjNJblBJQT09的UID打包並做一些特殊的處理後，發給微信伺服器進行確認。隔壁老王: 我們可以使用其他二維碼掃描軟體來登錄嗎？Cosmo: 二維碼的轉碼規則是統一的。任
  • 聊一聊二維碼掃描登錄原理
    將 token 返回給移動端，移動端將 token 存入在本地，往後移動端都通過 token 訪問服務端 API ，當然除了 token 之外，還需要攜帶設備信息，因為 token 可能會被劫持。帶上設備信息之後，就算 token 被劫持也沒有關係，因為設備信息是唯一的。
  • 微信小程序之生成自定義參數小程序二維碼
    微信小程序也提供了掃碼進入的功能，可以通過掃描二維碼或者微信小程序專有的小程序碼，進入到相應的小程序頁面。微信官方提供了3個不同的REST API用於生成帶參數的小程序碼或者二維碼，可在掃碼後進入指定的小程序頁面，其中接口A和C能生成的圖片總數量有限制（10萬張），對於那種需要生成大量二維碼的使用場景（比如為每個訂單生成一個二維碼、餐廳的每張餐桌生成一個二維碼等）是遠遠不能滿足需求的。而接口B可以解決這個問題，我們這次主要來看一下如何使用這個接口。
  • 【視頻教學】遊戲策劃視頻教學第四講:用Axure設計遊戲原型
    6、 動態面板：教程裡各種各樣的用法太多，就不說了。不過有一個我沒有講過，就是函數裡的DragTime，這個函數能獲取拖動面板的時長，精確到毫秒，這個功能在移動端原型裡應該有很大作用，因為我很少接觸，所以沒有怎麼用。不過我用這個函數的特點，做了一個隨機骰子，實現了猜大小的遊戲，有興趣的話去小樓元件裡下載參考一下。
  • Excel教程:用excel生成二維碼
    助力不平凡的你，越努力越幸運特推超級會員限時瘋狂搶購點擊了解支持微信公眾號其實日常工作學習也離不開二維碼，比如可以通過掃描二維碼了解某個數字。這麼帥的東西操作難不難？負責任的說，很簡單！！！下面我就帶大家一起了解下如何通過excel製作二維碼。
  • 小碼二維碼助手-二維碼在線生成工具
    無意之中發現現在有很多二維碼在線生成的網站，比如草料二維碼，微信二維碼等等；但是這些網站會有各種問題不讓用戶完整的使用，可能是因為政策、
  • 【二維碼生成器】快速生成個性二維碼
    功能 全能二維碼生成器和二維碼掃描器，生成和掃描一個應用都搞定 生成網站，聯繫人，文本，Wifi，名片，簡訊等各種類型的二維碼 為微博、微信、淘寶、抖音生成專屬又獨特的二維碼名片 自定義二維碼顏色，碼眼，圖案 支持將圖片用作二維碼背景 定期更新精美模板，支持一鍵生成 裝飾掃描識別的二維碼 將生成的二維碼直接添加到圖片或海報 管理您的生成記錄和掃描記錄 將生成的二維碼保存成模板，方便下次直接使用 良好的交互體驗使用方法
  • 15款優秀移動APP產品原型設計工具
    首先，一款優秀的移動APP產品原型設計工具應該具備：①.支持移動端演示（隨時隨地演示給BOSS，廁所&食堂&電梯…
  • Axure原型分享:能在手機上演示的元件庫
    能在手機上演示的高保真移動端元件庫，含43頁完整案例+135頁元件庫。
  • 04關於第三方Axure.shop商城的操作說明20210228
    / （主推，會有優惠）http://axure.video/home/自建電商網站，可在線預覽下單，微信支付成功後，可自行下載源文件。（二）自營-微信小程序（主推，會有優惠）自建微信小程序，搜索"Axure小店"；"Axure2店" 或 掃描一下小程序碼
  • 仿微信做個極速二維碼掃描功能
    同時，滴滴已於1月22日在全國上線「滴滴老年版」微信小程序。用戶在小程序內可設置超市、學校、子女住址、醫院等10個常用地址，老年人只需選擇常用地址，即可實現「一鍵叫車」，目前小程序「一鍵叫車」可支持呼叫滴滴快車。/   作者簡介   /本篇文章來自安和橋北的少年同學的投稿，和大家分享了二維碼開發的相關功能講解，相信會對大家有所幫助！同時也感謝作者貢獻的精彩文章！
  • 一款安卓手機移動端的二維碼生成器--二維碼生成器
    二維碼生成器，是一款簡單好用無廣告的二維碼工具，是一種個性化的交流方式，重新定義二維碼生成及掃描
  • 仿微信做個極速的二維碼掃描功能!
    >作者：安和橋北的少年 https://juejin.cn/user/616168885849976一直為網上找的掃碼項目無法快速且識別率高的掃描並解析出二維碼而苦惱，zxing自己修改集成的難度又比較高（菜是原罪）。
  • 劫持漏洞之二維碼劫持
    0x01前身在二維碼登錄之前，首先先對移動端基於Token的認證機制進行下了解1、首先手機端將帳號密碼以及自己的設備信息等發送給伺服器端