這3個(gè)方法，讓你的Axure 也能實(shí)現(xiàn)自動(dòng)標(biāo)注！

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

一、瀏覽器擴(kuò)展程序法

適用范圍：本地預(yù)覽的HTLM文件

難度系數(shù)：★

簡(jiǎn)介：僅需下載瀏覽器擴(kuò)展程序即可。

步驟：

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

這3個(gè)方法，讓你的Axure 也能實(shí)現(xiàn)自動(dòng)標(biāo)注！

設(shè)置擴(kuò)展程序：前往安裝的擴(kuò)展程序，點(diǎn)擊詳細(xì)信息，打開「允許訪問文件網(wǎng)址」的開關(guān)。

這3個(gè)方法，讓你的Axure 也能實(shí)現(xiàn)自動(dòng)標(biāo)注！

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

這3個(gè)方法，讓你的Axure 也能實(shí)現(xiàn)自動(dòng)標(biāo)注！

優(yōu)點(diǎn)：簡(jiǎn)單、方便。Visual Inspector by CanvasFlip、CSS Peeper 不僅支持查看標(biāo)注還可查看并下載頁(yè)面中的切圖、生成調(diào)色板。

缺點(diǎn)：

  • 通過 Axure 生成的 HTML文件中自動(dòng)生成的四個(gè)文件（index.html、start_c_1.html、start_g_0.html、start.html）打開的頁(yè)面擴(kuò)展程序無(wú)法識(shí)別顯示標(biāo)注；
  • 由于 Axure 會(huì)將部分元素例如圓形、多邊形、線形作為圖片展示而非使用 CSS，因此對(duì)于這些圖形，標(biāo)注工具只能讀取其尺寸，無(wú)法讀取顏色邊框等細(xì)節(jié)信息。曲線救國(guó)的解決方法請(qǐng)看文末小貼士；
  • 不支持在線版的 Axure原型。

擴(kuò)展程序下載：

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

二、在線添加Axure插件法

適用范圍：在線預(yù)覽，外網(wǎng)訪問。

難度系數(shù)：★★

簡(jiǎn)介：發(fā)明這款插件的作者是 Sean McQuay，現(xiàn)為芝加哥 Saggezza 公司的咨詢師，從事用戶體驗(yàn)、前端開發(fā)，領(lǐng)域包括電子商務(wù)、酒店、銀行。即將上線的新功能：切圖功能、生成調(diào)色板功能（這兩個(gè)功能方法一中已經(jīng)有了）。

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

步驟：

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

這3個(gè)方法，讓你的Axure 也能實(shí)現(xiàn)自動(dòng)標(biāo)注！

這3個(gè)方法，讓你的Axure 也能實(shí)現(xiàn)自動(dòng)標(biāo)注！

創(chuàng)建插件：在 PLUGINS 頁(yè)面中，點(diǎn)擊頁(yè)面左上方的「NEW PLUGIN」按鈕。

這3個(gè)方法，讓你的Axure 也能實(shí)現(xiàn)自動(dòng)標(biāo)注！

編輯插件：給插件命名，并在 Location 中選擇「End of the Head」（大意是把插件代碼放置在Head標(biāo)簽的末尾），將引號(hào)內(nèi)這段代碼復(fù)制到「Content」中點(diǎn)擊保存。

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

這3個(gè)方法，讓你的Axure 也能實(shí)現(xiàn)自動(dòng)標(biāo)注！

選擇需要標(biāo)注的頁(yè)面，點(diǎn)擊保存。

查看效果。

這3個(gè)方法，讓你的Axure 也能實(shí)現(xiàn)自動(dòng)標(biāo)注！

優(yōu)點(diǎn)：支持在線預(yù)覽，便于前端同事更新原型。

缺點(diǎn)：

  • 由于 Axure 會(huì)將部分元素例如圓形、多邊形、線形作為圖片展示而非使用 CSS，因此對(duì)于這些圖形，標(biāo)注工具只能讀取其尺寸，無(wú)法讀取顏色邊框等細(xì)節(jié)信息。曲線救國(guó)的解決方法請(qǐng)看文末小貼士；
  • 需要網(wǎng)速較快或科學(xué)上網(wǎng)，普通網(wǎng)速加載情況不理想，因?yàn)?Axure 服務(wù)器在國(guó)外，且國(guó)內(nèi)的 Axure 托管平臺(tái)都不支持插件功能。

三、本地插入代碼法

適用范圍：無(wú)法訪問外網(wǎng)/網(wǎng)速慢/不能科學(xué)上網(wǎng)的情況，適合本地查看。

難度系數(shù)：★★★

簡(jiǎn)介：此方法是參考 Sean McQuay 的方法摸索出來的，可能需要一定的代碼基礎(chǔ)，如果理解困難的同學(xué)可請(qǐng)前端同事自行添加代碼后查看標(biāo)注。

步驟：

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

使用代碼編輯器打開需要標(biāo)注的頁(yè)面的 HTML文件。

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

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

這3個(gè)方法，讓你的Axure 也能實(shí)現(xiàn)自動(dòng)標(biāo)注！

保存后刷新瀏覽器即可。

優(yōu)點(diǎn)：對(duì)帶寬要求不高

缺點(diǎn)：

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

小貼士

由于 Axure 會(huì)將部分元素例如圓形、多邊形、線形作為圖片展示而非使用 CSS，因此對(duì)于這些圖形，標(biāo)注工具只能讀取其尺寸，無(wú)法讀取顏色邊框等信息。下面介紹曲線救國(guó)的方法。

  • 圓形：以創(chuàng)建直徑為10px的圓形為例，先創(chuàng)建一個(gè)邊長(zhǎng)為10px的正方形，給這個(gè)正方形設(shè)置5px圓角即可；
  • 線段：通過設(shè)置高度為1的矩形實(shí)現(xiàn)。

小結(jié)

  • 如果網(wǎng)速非?？?可科學(xué)上網(wǎng)則可使用方法2；
  • 如果無(wú)法訪問外網(wǎng)或網(wǎng)速比較普通，則可使用方法1
  • 如果無(wú)法使用 Chrome/QQ瀏覽器，則可使用方法3；
  • 目前 Axure 的自動(dòng)化尺寸標(biāo)注還存在一些缺陷，需要在原型設(shè)計(jì)時(shí)隨時(shí)注意。

參考資料:

[1] srm985.axure-redline-tool.[EB/OL].github, 2018-06-04 [2018-07-09].?https://github.com/srm985/axure-redline-tool

[2] Sean McQuay.?[EB/OL].Sean McQuay, [2018-07-09].https://www.seanmcquay.com/index.htm

歡迎關(guān)注作者的微信公眾號(hào)：「無(wú)界社」

這3個(gè)方法，讓你的Axure 也能實(shí)現(xiàn)自動(dòng)標(biāo)注！

「更多標(biāo)注工具」

程遠(yuǎn)鐵粉

文章 6813 人氣 30952.9w

優(yōu)設(shè) 內(nèi)容總監(jiān)
收藏 61
點(diǎn)贊 7

復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng)，未經(jīng)允許不得轉(zhuǎn)載。

繼續(xù)閱讀本文相關(guān)話題

程遠(yuǎn)鐵粉

30952.9w人氣 6813文章

文章目錄

文章目錄