微信小程序云開發教程——墨刀原型工具入門（文件設置+編輯組件）

??

引言

作為一個小白，小北要怎么在短時間內快速學會微信小程序原型設計？

“時間緊，任務重”，這意味著學習時必須把握微信小程序原型設計中的重點、難點，而非面面俱到。

要在短時間內理解、掌握一個工具的使用，最有效的方式莫過于臨摹：

看實例視頻教程，并跟著教程在實例素材上操作。

基于以上兩點，小北根據學長和老師們的推薦，選擇了先上入手“墨刀”這個軟件！

軟件介紹

墨刀是一款在線原型設計與協同工具，借助墨刀，產品經理、設計師、開發、銷售、運營及創業者等用戶群體，能夠搭建為產品原型，演示項目效果。

墨刀同時也是協作平臺，項目成員可以協作編輯、審閱，不管是產品想法展示，還是向客戶收集產品反饋，向投資人進行Demo展示，或是在團隊內部協作溝通、項目管理。

?官網下載地址：墨刀 - 在線一體化產品設計協作平臺 (modao.cc)?編輯https://modao.cc/https://modao.cc/

一、文件設置

修改原型尺寸和機型

在編輯區內點擊畫板外的空白區域，右側文件設置界面選擇文件尺寸即可在下拉框中修改尺寸或機型。
注：自定義尺寸文件才支持自定義修改原型的長寬。

隱藏網格線

不選中頁面畫板及組件時，您可以在編輯區右側的外觀設置面板中隱藏網格線。

設置文件圖標/啟動頁/封面圖

選中文件，點擊「更多」-「更換圖標」，即可上傳替換文件啟動圖標以及文件啟動頁封面。?

注：啟動圖目前只能替換，無法刪除。

收藏文件

選中文件，點擊「更多」-「收藏」，即可收藏此文件。

鎖定文件

在工作臺中選中文件，點擊「更多」，選擇「鎖定」文件，即可鎖定文件。
鎖定的文件，可以在文件組頂欄切換到「已鎖定」中查看。

二、編輯組件

添加組件

在編輯區右側的狀態欄，素材板塊內有「組件」、「圖標」、「圖片」和「頁面」，您可以點擊打開對應的素材面板，添加您需要的組件。

重命名組件

選中組件后，可以在右側的外觀設置面板中雙擊組件名稱修改組件命名。

顯示/隱藏組件

選中組件，可以在編輯區右側的外觀設置面板中點擊「小眼睛」圖標設置顯示或隱藏組件。

注：隱藏組件后需要在左側元素欄選中元素后才可以顯示組件。

您也可以使用快捷方式操作：

顯示與隱藏組件快捷鍵 -?Ctrl+Shift+H

鎖定/解鎖組件

選中組件后，可以在頁面編輯區頂部工具欄或者右側的外觀設置面板中點擊「小鎖」圖標來鎖定或解鎖組件。

組合/打散組件

多選組件后，可以在編輯區的頂部工具欄中對它們進行打散和組合。

可以使用快捷方式操作：

組合 Mac：Cmd+G?（group） Windows：Ctrl+G（group）
取消組合 Mac：Command+Shift+G（Group） Windows：Ctrl+Shift+G（Group）

使用智能間距整理組件

使用智能間距整理組件，可以快速整理兩個及以上的元素之間的排列。還能一鍵調整間距。
智能排列中的元素不需要相同的大小，如果元素之間的間距不相同，可以先使用整理功能重新排列元素的統一間距。

整理功能

目前整理功能的邏輯是根據最左側元素與下一個元素的間距為準，調整其他元素之間的間距。
選中元素后，將鼠標hover到選區上將會出現一個整理圖標。
1.整理水平間距

2.整理垂直間距

3.整理水平&垂直間距

調整元素之間的間距

將元素整理好后，可以拖拽每個元素之間垂直或水平間距來進行調整。方法很簡單，

1.將鼠標懸停在元素之間的線條上，
2.光標所在位置會出現一個方向箭頭（上下方向調整垂直間距，左右方向調整水平間距），單擊并拖動鼠標即可調整間距。

向上減少元素間的垂直間距，向下則增加元素間的垂直間距?向左減少元素間的水平間距，向右則增加元素間的水平間距

等比例縮放組件

選中組件或組合后，按住shift拖動四角端點即可等比例縮放。

注：目前文字組件不支持等比例縮放，需要單獨修改。

智能填充

墨刀支持對組件進行文字和圖片內容的智能填充，不必費心搜集、上傳資源內容，點擊即可生成隨機內容，有效提高工作效率，豐富您的原型文件。
打開智能填充面板的方式有兩個：
入口1：【更多->編輯->智能填充】

入口2：【選中包含文本/圖片元素-＞右鍵->智能填充】選中某個組件，點擊鼠標右鍵，即可看到【智能填充】選項。

智能填充面板打開后會常駐在工作區，可以在面板右上角選擇關閉。

已有組件的內容填充

在畫布中選中能夠承載文字/圖片的組件，并在智能填充面板上點擊需要的內容分類，即可隨機生成內容。
如果首次填充的內容無法滿足您的需求，可以多次點擊某個分類進行切換。
在文字填充板塊，點擊分類右側的【更多】按鈕，能夠篩選填充的具體形式，如「姓名」可篩選「中文、英文、昵稱」等。根據您的使用記錄，會自動記錄保存設置項，方便后續直接使用。

針對墨刀內置的部分特殊組件，如下拉菜單、單選/多選等，使用智能填充后會自動隨機填充所有選項內容，表格/單獨選擇表格里的內容也能夠使用智能填充；輪播圖組件則會隨機填充N張圖片（根據目前的圖片數量確定）。

內容直接置入

不選中任何組件時，雙擊智能填充中的資源分類，即可直接將文字/圖片內容作為一個新的組件置入頁面，繼續點擊也能夠切換填充的具體內容。

使用屬性復制編輯組件

屬性復制功能可以理解為格式刷，可以快速復制某一元素的屬性粘貼到另一元素中。比如我們想要把畫布內矩形的屬性直接復制到圓形內，可以通過快捷鍵Ctrl+C（Mac：?conmand+C）復制后，再Ctrl+alt+V（Mac：conmand+option+V）粘貼屬性即可。
或者可以選中元素后右鍵選擇復制屬性，在另一元素中右鍵選擇粘貼屬性。

修改組件顏色

在原型中可以使用顏色選擇器對各類組件進行顏色設置，接下來將對其中的功能進行逐一講解。
您也可以點擊查看視頻演示：漸變色教程視頻

顏色填充共有純色填充、線性漸變、徑向漸變三種形式，其中線性漸變和徑向漸變僅支持對圖形、圖標、卡片批注等填充時使用。
填充模式可以在顏色選擇器頂部進行切換。

純色填充

純色填充即只支持一種顏色值。
可以通過色板直接選取顏色，還可以在色板右上角切換至【色彩空間】自由取色，或是使用顏色代碼獲取想要的顏色，并能夠修改顏色的透明度。
單擊左側的「吸管」按鈕可以進行吸色，支持吸取工作區的任意顏色。
也可以直接使用預設的顏色，點擊色板下拉按鈕，有多種配色可供使用，也能在這里查看【我的收藏】。

小帖士：不用調起顏色面板，選中元素后，可以直接使用快捷鍵I（i）啟動吸色功能，為選中元素填色，不要太方便！

線性漸變

線性漸變，就是多個顏色以直線的路徑進行漸變，可以修改這條直線上任意點的顏色讓其進行自然過渡。

1.選擇進入線性漸變后，頂部會出現一個滑動色條，色條上的按鈕為漸變中的顏色。
2.顯示為藍色的按鈕即為當前選中的按鈕，可以左右拖拽以更改這一顏色在漸變中的范圍，也能夠修改顏色。
3.在色條任意位置點擊，即能添加按鈕。
4.點擊色條右側的按鈕，可以進行反向漸變。
5.選中組件，并打開顏色選擇器后，能看到組件中出現漸變路徑直線，可以拖拽兩端，調整路徑長度、位置、角度，也可以拖拽路徑上的漸變色點，調整其位置。
在預設顏色中，也提供了線性漸變的色庫，可以直接使用。