整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
輯導讀：圖標是我們在制作產品原型的時候使用的比較多的一類素材，在日常繪制原型的時候一般是以插入的形式添加到Axure中。本文作者結合自身經驗，介紹了四種Axure中引入圖標的方法，希望對大家能有所幫助。
在日常繪制原型的時候，經常會需要插入相應的圖標（icon）到Axure中，但是看似好像很簡單的事情也給蠻多小伙伴造成了困擾。
現在很多開發團隊都會用一些比較常見的前端框架來搭建后臺管理系統，例如常見的Element-UI，Ant-design，iView還有Layui等。
這些前端框架基本上都自己有一套內置的圖標庫，所以一些常用的編輯，刪除，設置，關閉等圖標基本上就會直接使用。但是產品要繪制原型的時候，想要把這些圖標插入到Axure中就有點麻煩了。
例如畫這樣一個簡單的element-UI的彈窗，在Axure中可以很簡單的做到解決一比一復原，唯一麻煩的點就是右上角的關閉按鈕。
如果稍微講究一點的朋友就會去網頁上截圖或者找到對應的圖片文件然后放進來，稍微不講究的那就直接用一個占位符表示了。
或者是直接用Axure自帶的內置Icons拖出一個不太協調的關閉按鈕。
這種辦法是最簡單也是最快速的，直接從內置的元件中拖拽出來，可以調整大小和顏色，而且清晰度等也很不錯。
但是缺點也很明顯，那就是內置的Icons內容太少了，很多圖標是上古時期的，壓根就和現在的主流圖標風格不搭。所以就連一個普通的關閉按鈕，都搭配不上，更不用談一些很有語義性的圖標了。
這種辦法是最快速也是最簡單的，例如剛剛我要畫一個Element-UI的關閉按鈕，但是我從Axure內置原件庫找不到，也不想花太多時間去找，那么我直接從網頁上截圖一個白底的圖片就好了，然后粘貼覆蓋在相應的位置即可。
截圖的優點是快速，簡單。缺點是圖片調整大小的時候不是那么精準，同時圖片截圖之后是不能改顏色和粗細的。
這意味著如果我要一個藍底白字的圖標，那就得再去網頁上找，或者自己F12調試相應的樣式，然后再截圖下來。一套操作下來，還是有點麻煩。
Fontawesome是一套絕佳的圖標字體庫和CSS框架，下圖是官網的一些介紹。對于不太懂技術的朋友，可以把它理解成是一套集成式的字體庫圖標，意味著每一個圖標其實是擁有字體一樣的屬性，例如字體大小，粗細，顏色等。
有很多Axure的培訓都會推薦使用Fontawesome的方式在Axure中插入圖標，例如Axure培訓大佬「小樓一夜聽春雨」就寫過類似的教程指導怎么使用Fontawesome，AxureUX的大梨老師也寫了很詳細的教程來指導怎么使用。
首先本機需要安裝相應的字體庫，然后從Fontawesome的官網或者AxureUX的專門頁，復制相應的內容，然后再粘貼到Axure中，最后再選擇對應的字體即可。
這種方法可以適用于絕大多數場景，基本上算是一個比較可以接受的解決方案，但是直到我裝好字體畫好圖標，打開預覽之后，我發現了一個很操蛋的事情：預覽狀態下，圖標沒有生效！！！
有朋友肯定會說，那肯定是你自己哪里設置有問題了。
是的，剛開始我也是這樣想的，直到我花了半個多小時在網上找各種解決方案，我還是沒能解決這個問題的時候，我才意識到，這樣搞可能是個無底洞。
因為產品相關問題不像技術問題，會有很多論壇或者交流群，所以一些產品方面的技術手段出問題了，要定位問題其實很難。采用Fontawesome引入圖標的一些案例和討論，在網上都找不到很多，即使我千辛萬苦解決了這個問題，可能后面還會有其他問題，這并不是我的本意。
于是我就開始審視這件事的本質，我本來就是想畫一個大概的圖標來表示這個地方用了什么樣的圖標，而我選擇用Fontawesome之后。一方面我要下載字體，其次我要在發布的時候鏈接CSS地址防止別人的電腦上看原型的時候丟失字體，而且我找到的字體其實也并不是和前端框架百分百一樣的內容，最后我還在自己本地電腦上還預覽不成功，我丟，那我還用這玩意干啥？
Fontawesome確實很強，但是也確實有點點麻煩，麻煩的并不是一開始裝字體和發布的時候配置好CSS鏈接，而是這一頓操作之后我要讓其他協作的同事也裝這么多東西，最后一旦某個人的電腦出了問題，又要花一堆時間去重新定位問題，找到解決方案。
所以，我決定直接拋棄Fontawesome，畢竟時間比較金貴，不能都荒廢在這上面了。
這個方法是我最推薦的也是最認可的，雖然它也有弊端，但是勝在簡單，普適性而且還不會出錯。
SVG是什么？定義是什么，我直接從百科上摘下來：
? SVG是一種圖像文件格式，它的英文全稱為Scalable Vector Graphics，意思為可縮放的矢量圖形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）聯盟進行開發的。嚴格來說應該是一種開放標準的矢量圖形語言，可讓你設計激動人心的、高分辨率的Web圖形頁面。用戶可以直接用代碼來描繪圖像，可以用任何文字處理工具打開SVG圖像，通過改變部分代碼來使圖像具有交互功能，并可以隨時插入到HTML中通過瀏覽器來觀看。
這些描述看不懂沒關系，但是只需要看到這句話就可以了。
「可以用任何文字處理工具打開SVG圖像，通過改變部分代碼來使圖像具有交互功能……」
Axure肯定也是文字處理工具，而且還有一個很常用到SVG的文字處理工具就是：PPT。
做PPT的時候，找一些圖標，形狀等，都可以插入SVG。直接把SVG圖片下載到本地，然后拖拽進入PPT，最后再做兩次取消分組就可以了。
話題回到Axure中，Axure也可以使用這種辦法，而且Axure的SVG處理能力比PPT還更好，它支持你自己復制SVG的代碼然后粘貼到Axure中，就可以自動識別。
復制SVG代碼之后，粘貼在Axure中，然后右鍵將SVG圖片轉為形狀，然后就可以自由的編輯（調色，改大小等）。
恰巧的是，我們團隊中的項目的一些icon都是來源一個網站，而且這個網站也正好支持復制SVG代碼的功能，它就是：阿里巴巴矢量圖標庫。
選擇你想要的的圖標庫，然后點擊下載，在彈窗頁面選擇「復制SVG」，然后再粘貼到Axure中，最后再轉SVG成形狀，就可以自由編輯啦。
總結一下，SVG法很實用，也很方便。主要是iconfont目前的生態很好，有很多素材，而且完全是免費的，你想要的圖標基本上都可以找得到，完全滿足了我日常原型繪制的時候對圖標的要求。
而且方式也很簡單，將想要的原型庫加入到團隊項目中，在實際開發的時候，開發同學也可以直接使用此圖標，一舉兩得，十分高效。
截止到目前，還有一個唯一的瑕疵沒有解決，就是iconfont上沒有Element-UI的圖標，而我就是很強迫癥非要找到它怎么辦？
接下來請看強迫癥患者的終極解決方案，只要你夠偏執，你總能找到辦法。
我們打開Element-UI的組件庫，然后找到Icon圖標這個菜單，發現這里有很多餓了么原生的的Icon，我很想要把它們弄到Axure里怎么辦？
首先找公司的前端同學拿到Element-UI的字體包文件，一般來說引入這些前端框架的時候都會把一些靜態資源下載下來放在本地的。如果自己有動手能力，也可以自己搭建框架，然后將字體包文件拿出來。
然后搜索「百度字體編輯器」，進入之后，選擇打開剛剛拿到的字體包。
接著找到你想要的字體，然后選擇導出，選擇下載SVG文件即可。
最后將下載下來的SVG文件拖拽進入到Axure中，再轉SVG為形狀格式，就可以自己上色，改大小了。
其他的框架的icon引入方式以此類推，只要找到本地的字體包，然后用百度字體編輯器打開，再將字體包的內容導出為SVG就可以了。
上面一共介紹了四種引入圖標的方式，我個人最推薦的方式是第四種，只要理解了背后的一些原理，基本上想引入什么圖標都可以用不同的方式完成。
Fontawesome也是一種不錯的方式，但是對一些電腦的環境有很高的要求，同時也有很多不可控的因素。如果不怕折騰和麻煩，采用這種方式也是可以的，因為本質上icon其實就是一種特殊類型的字體，只要能把字體包的問題給解決了，也就可以解決不同機器的環境問題了。
鑒于本人才疏學淺，本文介紹的內容可能有所遺漏。如果大家還有什么其他的引入方式，歡迎在留言區交流，本文到此結束。
vitamin，微信公眾號：皮醬叨逼叨。人人都是產品經理專欄作家，公眾號運營小白，初中級B端產品一枚（一年開發經驗+三年產品經驗）。主導過在線教育類產品，目前是跨境電商供應鏈倉儲物流產品一枚，歡迎勾搭，一同學習。
本文原創發布于人人都是產品經理，未經作者許可，禁止轉載
題圖來自unsplash，基于CC0協議
起Axure，做產品的朋友再熟悉不過了，它是我們在日程工作中最常見的原型制作軟件之一，今天分享的文章，主要是教大家如何使用Axure打造簡單的個人網站，不會編程我們依然可以做網站。
演示地址：https://vip.uedart.com/demo/UEDART_019/index.html
接下去將分為幾個步驟去闡述：
舉個例子，我構建的是一個小型個人展示站
包含以下主要內容：網址導航、常用工具、實用資源、案例展示，通過思維導出對其內容進行
整理如下圖所示：
因為我們是利用Axure去制作網站，在我們平時工作的流程常常是，原型-設計-前端-開發，而這里我們只需進行原型和設計，這里將不再有前后關系，為了節約時間，我們可以把Axure當做設計工具，直接進行頁面設計，里面所需的圖片素材可以用ps輔助設計。
創建一個項目文件夾用來整理此網站涉及到的全部資源素材
采用的是藍色調，可以看下我的主色、輔助色的配色如下
導航布局如下，采用了頂部導航的方式，設置了動態面板并將此轉化成母版用于多個頁面
如下圖所示，有懸停效果和點擊跳轉的設置
網址導航欄目的左側菜單設置，滑塊移動位置的y坐標按具體位置設置，每個元素都要設置
左側導航在滾動時觸發具體欄目類別，采用的是熱區范圍來觸發，當窗口滾動時觸發相應的類別選中
布置完畢將柵格去除（紫紅色是1200px寬度的邊界）
拿網址導航頁做示例，每個單元模塊標題，網址卡片、左側導航的排布盡可能規范統一，立馬包含了各種元素的基本規范如：字體大小、顏色、寬度、懸停交互效果點擊跳轉效果
合理利用中繼器做頁面的數據關聯
常用工具與實用資源頁面，采用了中繼器來制作，在中繼器的微型數據表中，插入對應字段后，關聯每項參數的內容（對元件名稱進行命名），以后增加一條數據對應改變其內容即可。
如下圖包含了圖片，標簽，標題，詳情描述幾個內容，在中繼器中就要有相應的字段來進行控制
（1）我們需要一個域名，可以到阿里云萬網去購買https://wanwang.aliyun.com/，我選擇的域名是uedart.com的域名；
（2）我們還需要一個服務器，我選擇的是海外云虛擬機，不需要備案可以在阿里云進行購買；
（3）都準備好之后，我們要做的是按照阿里云的步驟進行虛擬機的設置布局，下載Filezilla進行關聯，將我們axure生成的文件進行上傳，上傳之后，我們再進行域名的解析，即可通過域名對我們的網站進行外網訪問。
可以將index和start的html刪除，復制第一個頁面的html改名成index重新上傳即可
至此通過以上5個步奏，我們利用Axure完成了一個小型網站設計與制作，當然這并不是一個傳統意義上的網站開發，只是借此向大家介紹下，利用Axure的html生成，我們可以簡單的處理一個網站的制作，如果只是個人的網站，且不需要過多的復雜功能，此方法足以滿足各位的需求，大家也可以利用這樣發方式來制作自己的網站。
謝謝大家的觀看！
本文由 @時光若刻 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協議
PM完成Axure原型評審后，一定不能忘記備份這些原型html，后續可能需要查詢以及技術撕逼。
希望通過Axure原型的幾種使用場景，讓初級PM對它的來龍去脈有個清晰的了解。而不是停留在“我知道”“大概會用”的水平。
PM會經常修改AxureRP源文件，然后生成不同的原型。
但是對外評審的原型應該是唯一的。
并且該版本的產品需求文檔PRD就是這個原型。
請注意兩者不能混為一談。
一般來說我們是在Axure生成原型Html的時候，自動在瀏覽器中打開了原型并查看。
但是如何打開已備份在電腦中的原型呢，很多初級PM摸不著頭腦了。其實也不復雜，如果你學會一點html網頁的知識。
請進入該原型對應的目錄，比如APP名稱V2.0版，我們會發現存在data、file、images、plugins、resources等文件夾，以及很多html網頁。請找到start.html，然后雙擊打開就是你熟悉的原型啦。
當原型評審后，PM需要將原型放到網上供所有團隊成員進行設計和編程。
不管是放到內網展示，還是外網展示。其本質都是將Axure原型的所有文件都上傳到服務器，包括所有的html文件，圖片文件，js文件，css文件。不能缺少任何文件，否則就無法正常顯示。
如果你只是修改了某個頁面，也切記生成并將所有文件上傳一遍，而不僅僅是該頁面對應的html文件。因為其對應的js，css文件，圖片文件也可能被修改
上傳之后然后把對應的原型網址發給其他團隊成員即可查看。
由于Axure原型是由html+js+cs組成的文件，我們在生成的時候將他們放置在指定目錄。
嘉定我們將該產品的所有原型存放于D://PM/APP名稱，那么建議以“APP名稱V1.0版”的格式命名，并生成原型。
當然你也可以繼續壓縮之后存起來，不過就不太方便后續的查詢。
有時候我們需要回退版本的時候，需要把舊版本的原型也拿出來。那么請用舊版本的原型html去替換當下的原型目錄。
不過不太建議這樣，還不如新增一個版本來處理。
由于Axure生成的原型，是以Html文件進行索引內容的。而Html是以你在Axure中新建的頁面來作為基礎的。如果你畫Axure原型的時候是以你產品中的頁面來進行命名和創建的。那么我們可以通過搜索“頁面名稱”關鍵詞去查詢你想要查詢的頁面。
如果你使用的搜索工具支持搜索文件內內容，比如Windows下面的everthing，Mac自帶的spotlight。那么可以通過搜索“頁面內文字”關鍵詞去查詢你想要查詢的相關頁面。
不過我更建議你進入到具體版本的原型html文件夾里面進行搜索，而不是進行全局搜索。
以上就是Axure原型的使用場景。請一定要理解Axure原型的本質是html+js+css，每次生成原型的時候會在本地生成目錄并寫入這些文件。
浪子，業務型PM，浪子PRD系列51prd.com，公眾號langzisay，個人微信nuanai88。
本文由 @浪子 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 unsplash，基于 CC0 協議
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
