综合久久精品,国产精品欧美日韩一区二区,欧美激情自拍偷拍

這3個方法，讓你的Axure 也能實現自動標注！

2018/11/19 編輯：程遠作者：無界社閱讀 10.2w 評論有獎閱讀本文需 9 分鐘

點贊 6

Axure 制作 toB類項目的 Web端原型比較常見，可以將原型做得非常系統、交互邏輯逼真，適用于大部分測試和演示等場景中。甚至很多設計師直接使用 Axure 制作高保真原型，對于這些設計師，尺寸標注成了一大難題。如今，主流的原型設計工具都標配了自動化尺寸標注功能，然而即使是最新發布的 Axure9 依舊沒有這一功能。國內基本上沒有 Axure 自動標注的研究分享，大部分設計師還在苦于手工標注尺寸，本文將介紹三種方法為設計師解放雙手提供一些思路。

一、瀏覽器擴展程序法

適用范圍：本地預覽的HTLM文件

難度系數：★

簡介：僅需下載瀏覽器擴展程序即可。

步驟：

擴展程序下載：以Chrome 為例，前往 Chrome 擴展程序，下載 Prism - Redline Tool。相似插件包括：Visual Inspector by CanvasFlip、CSS Peeper。

這3個方法，讓你的Axure 也能實現自動標注！

設置擴展程序：前往安裝的擴展程序，點擊詳細信息，打開「允許訪問文件網址」的開關。

這3個方法，讓你的Axure 也能實現自動標注！

查看標注：打開 Axure，將原型生成 HTML，瀏覽器打開需要查看標注的頁面，切忌通過 index.html 打開頁面（通過 index.html 打開的頁面雖然可以查看目錄索引，卻不支持瀏覽器擴展程序查看標注）。

這3個方法，讓你的Axure 也能實現自動標注！

優點：簡單、方便。Visual Inspector by CanvasFlip、CSS Peeper 不僅支持查看標注還可查看并下載頁面中的切圖、生成調色板。

缺點：

通過 Axure 生成的 HTML文件中自動生成的四個文件（index.html、start_c_1.html、start_g_0.html、start.html）打開的頁面擴展程序無法識別顯示標注；
由于 Axure 會將部分元素例如圓形、多邊形、線形作為圖片展示而非使用 CSS，因此對于這些圖形，標注工具只能讀取其尺寸，無法讀取顏色邊框等細節信息。曲線救國的解決方法請看文末小貼士；
不支持在線版的 Axure原型。

擴展程序下載：

推薦官方下載。
Chrome插件網盤鏈接：https://pan.baidu.com/s/1EMbdw1w5ji49yMlvoLRiEA 提取碼：t2kw。

另外，QQ瀏覽器也有同款擴展程序。

二、在線添加Axure插件法

適用范圍：在線預覽，外網訪問。

難度系數：★★

簡介：發明這款插件的作者是 Sean McQuay，現為芝加哥 Saggezza 公司的咨詢師，從事用戶體驗、前端開發，領域包括電子商務、酒店、銀行。即將上線的新功能：切圖功能、生成調色板功能（這兩個功能方法一中已經有了）。

首先看下 demo 效果：https://c2fm4c.axshare.com/#g=1&p=%E5%B0%BA%E5%AF%B8%E6%A0%87%E6%B3%A8demo?。

步驟：

打開 AxShare 插件頁面：瀏覽器打開 www.share.axure.com ，登錄后，在列表右上方的工具按鈕下拉列表中選擇「PLUGINS」，進入 PLUGINS 頁面。

這3個方法，讓你的Axure 也能實現自動標注！

創建插件：在 PLUGINS 頁面中，點擊頁面左上方的「NEW PLUGIN」按鈕。

這3個方法，讓你的Axure 也能實現自動標注！

編輯插件：給插件命名，并在 Location 中選擇「End of the Head」（大意是把插件代碼放置在Head標簽的末尾），將引號內這段代碼復制到「Content」中點擊保存。

<script src="https://cdn.jsdelivr.net/npm/axure-redline-tool@latest/web/axure-redline-plugin.js"></script>

這3個方法，讓你的Axure 也能實現自動標注！

選擇需要標注的頁面，點擊保存。

查看效果。

這3個方法，讓你的Axure 也能實現自動標注！

優點：支持在線預覽，便于前端同事更新原型。

缺點：

由于 Axure 會將部分元素例如圓形、多邊形、線形作為圖片展示而非使用 CSS，因此對于這些圖形，標注工具只能讀取其尺寸，無法讀取顏色邊框等細節信息。曲線救國的解決方法請看文末小貼士；
需要網速較快或科學上網，普通網速加載情況不理想，因為 Axure 服務器在國外，且國內的 Axure 托管平臺都不支持插件功能。

三、本地插入代碼法

適用范圍：無法訪問外網/網速慢/不能科學上網的情況，適合本地查看。

難度系數：★★★

簡介：此方法是參考 Sean McQuay 的方法摸索出來的，可能需要一定的代碼基礎，如果理解困難的同學可請前端同事自行添加代碼后查看標注。

步驟：

首先需要代碼編輯器，Windows系統使用 Notepad ++即可，Mac系統推 TextWrangler。

使用代碼編輯器打開需要標注的頁面的 HTML文件。

在<head>標簽的末尾插入以下代碼，具體位置為上一個</script>之后，</head>之前，即下圖中紅框位置。

<script?src="https://cdn.jsdelivr.net/npm/axure-redline-tool@latest/web/axure-redline-plugin.js"></script>

這3個方法，讓你的Axure 也能實現自動標注！

保存后刷新瀏覽器即可。

優點：對帶寬要求不高

缺點：

Axure 生成的 HTML文件中自動生成的四個文件（index.html、start_c_1.html、start_g_0.html、start.html）插件無法識別顯示標注。
由于 Axure 會將部分元素例如圓形、多邊形、線形作為圖片展示而非使用 CSS，因此對于這些圖形，標注工具只能讀取其尺寸，無法讀取顏色邊框等細節信息。
更新不便：當原型更新時，前端同事需重新下載 HTML壓縮包。
無法批量添加代碼，頁面較多時比較繁瑣。