用更優雅的方式分享你的UX/UI設計文檔

05-18

來自專欄一片藍天朵朵雲設計師工作中免不了要把生成的設計文檔或者網頁原型發給測試用戶、同事、領導看。用Axure/JustInMind/OmniGraffle生成的HTML文件，以及Sketch利用插件如Sketch Measure生成的HTML文件，除了打包成zip發過去之外，還可以直接在本地搭建一個簡單的網站伺服器，供區域網內的手機、電腦直接訪問。

這麼做的優勢有幾點：

1、版本控制方便。不會因為zip壓縮包發來發去導致弄不清哪個是最終版，「真相只有一個」。

2、用戶訪問快捷。直接發一個鏈接過去，點開就可以了。不需要傳文件解壓縮然後安裝Axure的Chrome插件，也不需要告訴對方網盤中的地址再一級一級地打開。

3、有序管理文檔。所有的設計文檔都可以放在一起，並通過目錄關係整合，便於回溯設計。找以前的設計文件時，再也不用一個文件夾一個文件夾的翻了。

4、不用等待同步。因為HTML中的瑣碎文件太多，團隊在使用同步盤共享文件時，這邊上傳好、那邊才開始下載，下載完之後才能訪問，經常要等上三五分鐘。

搭建本地伺服器有很多簡單方法，比如可以直接下載一款叫EasyWebServer(Windows)的小軟體，也可以安裝WAMP(Windows)或者MAMP(macOS)，這些軟體都有圖形化的界面進行簡單配置即可，而且都有免費版。不過直接用這些圖形化軟體，實在是沒有什麼成就感，分享一些小眾的方法：

IIS

如果是Windows系統，可以直接使用Windows提供的IIS服務。好處是作為「服務」，打開電腦還沒登錄賬戶時，就已經自動運行了。

步驟：

1、按Win+R打開「運行」，輸入「control panel」打開控制面板。

2、在控制面板右上角，將查看方式修改為「類別」，然後依次打開「程序」—「啟用或關閉Windows功能」。

3、在Windows功能中，選中「Internet Information Services」並確定，如下圖。初次選中需要等待一會兒進行安裝。

4、等IIS安裝好後，進行一些配置就可以使用了。按Win+R打開「運行」，輸入「inetmgr」打開"Internet Information Services(IIS)管理器「。在左側目錄中依次展開至「Defaultr Web Site」並選中，在中間區域可以配置默認文檔(只保留index.html即可)，以及是否允許目錄瀏覽，在右側「基本設置」中，可以設置HTML文件所在的目錄。設置好後，點擊右側」管理網站「下的「啟動」按鈕，如果啟動後又修改了網站配置，則需要重新啟動才可以生效。

如果一切順利的話，區域網內的所有設備都可以通過「http://你的區域網IP地址:80/」訪問設計文檔了，其中「:80"是埠號，因為80埠是http的默認埠，可以省略。

Python

如果是macOS，則已經安裝了python，直接打開Terminal，進入對應的目錄後一行命令即可啟用最簡單的伺服器。如果是python3，要使用下面的命令。

python -m SimpleHTTPServerpython -m http.server //python3

python也可以在Windows上安裝，然後在命令管理器中使用同樣的命令運行伺服器。下載地址：Download Python

不過Python有個缺點，就是不支持中文，如果生成的HTML文件中有中文文件名的化，就訪問不了了，雖然有解決辦法，但比較麻煩。

node

比較推薦的命令行搭建伺服器的方法是用node.js。雖然ruby/php之類的也都有類似的「一行命令搭建伺服器」，不過現在最流行的就是node.js了，順便了解一下也挺有意思的。

無論是Windows上還是macOS，都可以安裝node，下載地址：Node.js

安裝node的同時會一併安裝npm。npm是node的模塊管理器，搭建伺服器使用的就是名為http-server的模塊。

安裝好之後，打開命令行（cmd或者terminal），輸入以下命令安裝http-server。

npm install http-server -g

然後進入HTML文件所在目錄，「一行命令搭建伺服器」：

http-server

如圖，根據提示，使用下面三個鏈接都可以進行訪問。

如果是Windows的話，還可以像我一樣安裝Git for Windows，可以直接在資源管理器中右鍵啟動命令行並定位到當前目錄。下載地址：Git

最後，如果公司可以給你的電腦一個固定的區域網IP地址的話，簡直不能太happy了。再想happy一些，就得讓公司能配一個24小時不間斷的真·伺服器用來放設計文檔。

______________________________

微信公眾號：DesignGB

關於互聯網產品設計，以及一些奇怪的東西