直以來Axure在對移動端原型設計方面的支持都不是十分理想，它沒有像目前其它幾類原型設計工具(Justinmind、墨刀等)一樣提供移動端設備的模板和相關交互組件，但是Axure自由靈活的特性卻同樣的其它原型設計工具所無法取代的。通過掌握一些設計規范和方法，我們同樣可以通過Axure制作出非常完美的移動端演示原型。

首先你可以通過以下地址在電腦瀏覽訪問我設計完成的移動端原型模板。

1. 選擇適合的設計分辨率

在開始設計原型之前我們需要做的第一步是選擇合適的設計分辨率，目前使用Axure設計移動端原型時普遍采用的是(寬)375px*(高)667px和(寬)414px*(高)736px兩種分辨率尺寸，這兩種尺寸分別是由目前主流的移動設備Iphone7和Iphone7 PLUS的屏幕分辨率尺寸等比縮放而定義出來的，同時也是Iphone7和Iphone7 PLUS的邏輯分辨率。

有朋友可能會疑惑在設計原型的時候為什么不直接采用移動設備實際的分辨率呢？因為這主要考慮到設計時的便攜性，畢竟我們輸出的原型主要是用于演示而不是視覺稿，所以不需要達到那么高的精度，另外如果按移動設備實際的分辨率進行設計，在對元件進行編輯和排版的時候會是一件很耗費時間的事情，同時也不方便在電腦瀏覽器上進行查看。

本人在進行原型設計的時候一般用的是375px*667px這個分辨率尺寸，因為Axure常用的元件默認的字號一般是14px或18px，這兩種字號也剛好匹配Iphone7上常用字號的比例，而且這個分辨率尺寸在電腦瀏覽器上剛好一屏就可以顯示完整。

但是如果你采用375px*667px這種分辨率輸出的原型在Iphone7 PLUS上進行瀏覽時，兩邊會出現部分的空白區域，不過它也已經基本適配各種主流移動端設備了，所以采用這個分辨率尺寸是綜合衡量之后的選擇。

2. 定義內容區域

上面已經介紹了為什么選擇375px*667px作為移動端原型設計分辨率尺寸，在開始設計之前我們需要先按照這個尺寸在編輯區域中定義好內容區域。我一般是使用輔助線來定義內容區域的，例如下圖是用輔助線定義好內容區域的效果。

事實上我們在設計時其實不用去限制原型的高度，因為在通過移動端設備進行瀏覽時可以通過滾動頁面查看超出高度部分的內容，這跟實際的移動端產品的操作方式是一致的。而在原型設計的時候，我們還是需要拖一條用于標識原型設計高度的輔助線，它的主要作且是為了標識出首屏的區域范圍，這對于布局選擇是有一定的參考價值的。

3. 神奇的輔助線

輔助線的作用除了用來定義內容區域之外，同時它也能幫助我們快捷的進行布局。輔助線有一個特性就是當你拖動元件靠近它時，元件會自動吸附到輔助線的邊緣達到快速對齊的效果，對于有對齊強迫癥的朋友來說這個特性會感覺無比貼心。輔助線的基本使用方法：鼠標移動到編輯區域的左側和頂部的標尺區域長按并往編輯區域拖動時就可以生成橫向或縱向的輔助線，將輔助線拖動到對應的位置即可。

一般除了用輔助線來定義內容區域的之外，我還會新建兩條縱向的輔助線用于標識界面左右兩側的留白區域。建議兩側留白區域用10px或者20px，例如本人常用的是20px，因此這兩條輔助線的位置分別在X軸的20px和355px的位置。除此之外，我們的元件一般還需要設置左右各20px的填充，用來將文字的顯示限定在界面留白區域內。

補充幾點輔助線的使用小技巧：

• 右擊輔助線可以將其鎖定，以防止拖動元件時會將輔助線會跟著一起移動；
• 可以通過按住Ctrl拖動創建全局輔助線，全局輔助線就是在所有頁面中產生一條相同的輔助線；
• 在“布局—柵格和輔助線—鎖定輔助線”中選中可以將所有的輔助線保持鎖定狀態且無法刪除；
• 在“布局—柵格和輔助線—刪除輔助線”中可以清除所有頁面中的輔助線；
• 在“布局—柵格和輔助線—輔助線設置”中可以修改輔助線的顏色或進行更多設置；

4. 更多基礎設計規范

通過以上幾點介紹了我們如何使用輔助線來建立了一個基本的布局規范，而以下是我總結的其它關于移動端原型的基礎設計規范。通過掌握這些規范或技巧，可以使最終輸出的原型效果更美觀和標準，而且能讓你的設計效率大大的提升。

另外，這些規范或技巧同樣基本適用于WEB端的原型設計，不同的主要是設計分辨率和內容區域的定義，以后有機會我會進行整理和分享。

• 列表菜單的高度為45px、導航欄的高度為45px、標簽欄和工具欄常用高度為60px；
• 字號一般用偶數，常用的正文字號為12和14px，常用的標題字號為16px和18px；
• 元件的寬度和高度一般為5的倍數，例如45px、100px等；
• 元件的距間和行距一般為10的倍數，常用10px、20px，按住ctrl鍵通過方向鍵移動元件，每次移動的距離剛好是10px。

5. 頁面屬性的設置

為了方便進行設計我習慣將內容布局向左對齊，而在演示時內容居中顯示更符合瀏覽習慣，所以需要在頁面屬性設置中將頁面排列設置為水平居中,另外，頁面的背景色推薦設置為#F9F9F9。

6. 導航欄的設置

導航欄是移動端APP中最常見的元件之一，它的位置一般是固定在界面最頂部的，所以建議將導航欄轉換為動態面板，然后在面板的屬性設置中設置為“固定到瀏覽器”，水平固定選項為“居中”，垂直固定選項為“上”，具體設置如下圖：

7. 標簽欄或工具欄的設置

標簽欄或工具欄的位置一般是固定在界面最底部的，同樣我們也需要將標簽欄或工具欄轉換為動態面板，然后在面板的屬性設置中設置為“固定到瀏覽器”，水平固定選項為“居中”，垂直固定選項為“下”。

通過這樣的設置以后在有標簽欄或工具欄的頁面中，如果你的頁面內容已經超出了一屏的高度，我們通常需要在內容正文區域的底部放置一個與標簽欄或工具欄高度一致的熱區元件當作占位符，它的作用是用來解決原型演示時標簽欄或工具欄會擋住頁面內容的情況。

8. 模態窗口交互設置

模態窗口交互是移動端產品中最常見的交互方式之一，它主要用作顯示系統的重要信息，并請求用戶進行操作反饋，例如：刪除某個重要內容時，彈出對話框進行二次確認。在原型中我們可以通過簡單的設置，實現跟移動端APP一致的模態窗口效果。

移動端模態窗口演示效果：

首先同樣需要新建一個模態窗口的動態面板，在面板的屬性設置中設置為“固定到瀏覽器”，水平固定選項為“居中”，垂直固定選項為“下”。然后再在觸發模態窗口的交互事件中按以下方式進行設置，重點是勾選“置于頂層”選項和設置“燈箱效果”，燈箱效果的背景顏色和透明度可以根據需要進行自定義。關于具體的設置和演示效果，可以參照我將在后面推薦的移動端元件庫。

9. 輸出選項的設置

到此為止已經介紹了關于移動端原型設計的一些規范和常用元件及交互效果的設置，那么當我們的原型設計完成以后在生成HTML之前我們還需要進行幾項簡單的設置。

設置位置：發布—生成HTML-移動設備，在界面中勾選“包含視口標簽”，設置寬度為：device-width，設置縮放為：no，其它選項為空就可以了。

另外，你還可以設置主屏圖標，然后在IOS設備中通過safari瀏覽器打開原型，就可以直接將它添加到主屏幕中了。通過主屏訪問原型時將不會顯示瀏覽器的相關工具界面，最終的演示效果幾乎是跟操作實際的APP是一致的，你甚至可以根據需要定義狀態欄的顏色。

設置方式：啟動safari瀏覽器打開原型地址—點擊瀏覽器底部的設置圖標(正中間)—添加到主屏幕——完成添加即可。大家可以嘗試使用下方演示地址進行添加看看效果。

添加到主屏和最終運行時的效果：

按照上述的設置之后，你將原型生成為HTML文件之后上傳到你的服務器或原型托管平臺，通過手機訪問原型鏈接演示即可。

10. 其它的補充說明

如果我們設計的移動端原型不需要考慮在手機上演示的場景，仍然可以參照本文中相關的規范。我一般會在編輯區域放置一個設備模板，新建一個內容框架的動態面板用來放置頁面的主要內容，而這個內容框架的尺寸同樣是我們之前定義的內容區域尺寸(寬)375px*(高)667px。另外，內容框架的動態面板的屬性中需要將滾動條設置為“自動顯示垂直滾動條”，這樣當框架的內容超出時可以拖動滾動條進行查看。

通過添加設備模板的設計區域效果

通過使用設備模板可以讓輸出的原型效果更標準和規范，如果我們在編輯界面中放置了設備模板，則不再需要對導航欄、標簽欄或工具欄、模態窗口等動態面板進行固定到瀏覽器設置，你只需要拖動到設備模板對應的位置并置于內容框架上方即可。

如果你需要獲取相關設備模板的圖片，請通過下面的下載地址獲取到。這套素材中包含了iphone、Android、IPAD等各種機型常用模板，而且都已經按標準尺寸定義好，只需要直接下載使用即可。使用方法：在創建Axure原型文件時建立一個模板母版，然后將設備圖片導入到母版中，再將母版拖至設計界面區域。

常用移動端設備模板素材

11. 移動端元件庫分享

最后分享的是AxureUX交互原型移動端元件庫精簡版，這套元件庫基本是按照本文所介紹的相關規范和標準進行制作的，共由常用組件、信息輸入、信息輸出、信息反饋、綜合系列等五大元件類型組成，其中還包含各類移動端基本元素、動態交互組件，以及各類常用界面模板，能助您快速的輸出友好美觀的移動端交互原型。

相關截圖：

本文由 @windir 原創發布于人人都是產品經理。未經許可，禁止轉載。

draggable
wordContainerEle.onselectstart = event => false;

天給大家分享一個超厲害的Vue Uniapp可視化拖拽編程項目dragUI。

drag-ui 基于 vuedraggable.js+vue+uniapp 的可視化拖放布局編程。能自動生成項目，自動生成代碼，支持導入第三方組件。

效果圖

dragUI演示視頻

一個簡單創建 hello world 界面的介紹視頻，幫助大家更快了解項目。

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

技術棧

• vue ^2.5.17 + uniApp
• element-ui ^2.12.0 餓了么pc組件庫
• sortablejs 組件拖拽功能
• file-saver 文件保存
• ejs ^2.7.1 JavaScript模板引擎
• jszip ^3.2.2 JS壓縮庫
• vue-context-menu 基于vue自定義右鍵菜單

安裝使用

# 克隆項目
git clone https://github.com/wozhishilaonanhai/dragUI.git

# 進入dragUI目錄
cd dragUI

# 安裝依賴包
npm install

# 用HBuilderX打開項目
運行 > 運行到瀏覽器 > Chrome

項目目錄

作者已經將該插件上傳到了插件市場，大家可以下載使用。

https://ext.dcloud.net.cn/plugin?id=1035

store中 componentsInfo 存貯組件的基本信息。

componentsInfo: { // 組件的基本信息
    // id 0- 999  （約定）會根據id來判斷是哪個list
    list: [
        {
            name:'按鈕',
            id: 0,
            componentName: 'Ibutton',
            iStyle:{},
            iClass: [],
            propsValue: [
                {   
                    label:'值',
                    key:'text',
                    value:'按鈕',
                    toDataOrHtml: 'html',
                    type: 'String'
                },
                {
                    label:'類型',
                    key:'type',
                    value:'default',
                    toDataOrHtml: 'html',
                    type:'select',
                    select: [
                        {label: '紅色',value: 'warn'},
                        {label: '藍色',value: 'primary'},
                        {label: '白色',value: 'default'}
                    ]
                },
            ...
            ]
        },
        ...
    ]
}

項目中用到了 element-ui 組件庫及第三方UI庫 colorUI。

最后附上demo及項目地址

# demo地址
https://wozhishilaonanhai.github.io/dragUI/unpackage/dist/build/h5/index.html

# 倉庫地址
https://github.com/wozhishilaonanhai/dragUI

ok，這次就分享到這里。如果小伙伴們感興趣的話可以去看下哈。