mockingbot墨刀中文使用說明

1、Table of Contents........11.6.2 1.6.3 1.7前言墨刀中文使用說明書此書主要內(nèi)容為介紹墨刀(MockingBot這款原型工具的詳盡功能,從認(rèn)識(shí)工作區(qū)開始,一步一步引領(lǐng)大家玩轉(zhuǎn)墨刀。你在使用中遇到的任何問題都可以在這本書內(nèi)找到答案。如果你想更快速地掌握墨刀使用方法,也可以直接在墨刀官網(wǎng)查看入門教程,跟著教學(xué)視頻一起變身墨刀使用

2、達(dá)人。墨刀作為一款工具,除了盡可能幫助使用者提高工作效率外,還希望可以激發(fā)產(chǎn)品從業(yè)者們新的思維及工作方式。創(chuàng)造力是無(wú)法被某個(gè)工具制約和限制的,希望大家在學(xué)習(xí)中明確這個(gè)觀點(diǎn):學(xué)會(huì)使用某種工具是為了將個(gè)人創(chuàng)造力更好地展示出來,工具不是區(qū)分職業(yè)能力的指標(biāo),創(chuàng)造力才是。若你對(duì)此書內(nèi)容有任何疑問,歡迎與我們聯(lián)系:supportmodao.cc第一章 墨刀第一章 墨刀本章主要為墨刀官網(wǎng)的概述,你可以通過本章了解到墨刀是什么、服務(wù)相關(guān)的隱私條款、賬戶收費(fèi)模式以及產(chǎn)品大致的使用流程。簡(jiǎn)介墨刀是什么?墨刀(MockingBot,極簡(jiǎn)超快的移動(dòng)應(yīng)用原型工具墨刀是一款在線移動(dòng)應(yīng)用原型工具,旨在幫助各種規(guī)模的移動(dòng)互聯(lián)

3、網(wǎng)團(tuán)隊(duì)快速構(gòu)建移動(dòng)應(yīng)用產(chǎn)品原型,墨刀支持云端保存,實(shí)時(shí)手機(jī)預(yù)覽,一鍵分享,多種手勢(shì)和頁(yè)面切換特效,以及多人協(xié)作和團(tuán)隊(duì)管理功能。使用墨刀,用戶可以快速制作出可直接手機(jī)運(yùn)行的接近真實(shí)App交互的高保真 / 線框圖原型,使創(chuàng)意得到更直觀的呈現(xiàn),不管是早期客戶收集反饋,客戶 / 投資人展示,或是團(tuán)隊(duì)內(nèi)部溝通協(xié)作,墨刀都可幫助用戶大幅提升溝通效率,降低項(xiàng)目風(fēng)險(xiǎn)。功能亮點(diǎn):1. 拖拽控件或圖片開始App設(shè)計(jì)2. 移動(dòng)設(shè)備常用手勢(shì)及豐富切換動(dòng)畫3. 云端實(shí)時(shí)保存,工作無(wú)縫銜接4. 手機(jī)實(shí)時(shí)預(yù)覽,隨時(shí)演示原型作品;一鍵分享,獲取反饋5. 團(tuán)隊(duì)協(xié)作,產(chǎn)品極速上線6. 導(dǎo)出工作流,產(chǎn)品開發(fā)從全局出發(fā)7. 內(nèi)置素材

4、庫(kù)、模板庫(kù)墨刀(MockingBot是由北京磨刀刻石科技有限公司旗下運(yùn)營(yíng)的在線移動(dòng)應(yīng)用原型工具,公司成立于2014年10月。目前全球已有140個(gè)國(guó)家超過25萬(wàn)名設(shè)計(jì)師選擇并使用墨刀,同時(shí)墨刀對(duì)基礎(chǔ)功能永久免費(fèi)。隱私條款最后更新:2015年9月14日本隱私協(xié)議旨在提供墨刀(MockingBot網(wǎng)站如何收集和使用與您相關(guān)的信息記錄。本協(xié)議適用于,您使用我們網(wǎng)站和其他在線產(chǎn)品及服務(wù),或者其他任何您和我們有聯(lián)絡(luò)時(shí)的信息收集。我們可能會(huì)對(duì)隱私協(xié)議進(jìn)行變更,如若產(chǎn)生變更,請(qǐng)以文首的修改時(shí)間為準(zhǔn)。如有重大變更,我們也會(huì)向您提供額外的通知(比如在首頁(yè)增加聲明或是郵件提醒。在使用墨刀(MockingBot服務(wù)之

5、前,我們希望您仔細(xì)閱讀本協(xié)議,了解我們對(duì)收集到信息的處理以及我們對(duì)您隱私的保護(hù)。信息收集您提供的信息我們會(huì)對(duì)您直接提供的信息進(jìn)行保存。比如:我們會(huì)記錄您的注冊(cè)信息,尋求客服或者其他和我們溝通的記錄。記錄信息的種類包括:用戶基本信息(姓名、郵箱和圖片、公司信息、財(cái)務(wù)信息(您的交易賬戶以及其他您選擇提供的信息。使用服務(wù)自動(dòng)收集的信息當(dāng)你接觸或者使用我們的服務(wù)時(shí),我們將自動(dòng)收集您的信息包括: Log 信息(我們記錄所有您使用服務(wù)時(shí)的log信息,包括瀏覽器信息、使用時(shí)間、瀏覽的網(wǎng)頁(yè)、IP地址、及來源。Cookies和其他跟蹤技術(shù)的信息:我們使用多種技術(shù)記錄信息,包括但不限于:向您的電腦或移動(dòng)設(shè)備種co

6、okies。Cookies是一些存在您的硬件上的小數(shù)據(jù)包,用以幫助我們提高服務(wù)的質(zhì)量及您的使用體驗(yàn),了解在哪些區(qū)域和功能上受歡迎,以及統(tǒng)計(jì)流量等。信息使用我們將您的信息用于以下用途:提供、維護(hù)和改善我們的服務(wù);提供和交付產(chǎn)品及您要求的服務(wù),處理交易,向您發(fā)送相關(guān)信息,包括:確認(rèn)信息和發(fā)票等;發(fā)送技術(shù)通知、系統(tǒng)更新、安全警告、支持和管理信息;回應(yīng)您的意見、問題和要求,并提供客戶服務(wù);和您就墨刀(MockingBot提供的產(chǎn)品、服務(wù)、促銷、推廣、有獎(jiǎng)活動(dòng)等信息進(jìn)行溝通,提供我們認(rèn)為您感興趣的新聞和信息;監(jiān)控分析和我們服務(wù)相關(guān)的使用和活躍的趨勢(shì);個(gè)性化服務(wù)和內(nèi)容,以及用戶信息和興趣的匹配;處理并送達(dá)

7、比賽和獎(jiǎng)品信息;聯(lián)系、結(jié)合其他途徑的信息,幫助更好理解用戶需求,提供更好的服務(wù);其他相關(guān)信息采集的用途。墨刀(MockingBot總部設(shè)在中國(guó),信息收集受中國(guó)法律管轄,通過訪問或使用本服務(wù)或提供信息給我們,即代表您已經(jīng)同意您的信息在中國(guó)及其他國(guó)家的處理和傳輸。信息分享在以下情況以及本隱私協(xié)議中描述的其它情況下,我們會(huì)分享您的相關(guān)信息:與其他代表我們,需要使用相關(guān)信息才可以進(jìn)行工作的供應(yīng)商,顧問和其他服務(wù)提供商;符合相關(guān)適用法律法規(guī),披露的請(qǐng)求;當(dāng)我們確定你的行為與我們的用戶協(xié)定和協(xié)議相違背,出于保護(hù)墨刀(MockingBot及他人的相關(guān)權(quán)利,財(cái)產(chǎn)安全的要求時(shí);在任何合并,或者收購(gòu)本公司的聯(lián)絡(luò)或

8、者談判中,在得到您的同意后;我們還可能共享統(tǒng)計(jì)的或去個(gè)人標(biāo)識(shí)的信息。社交媒體分享功能我們的服務(wù)中可能提供社交分享功能或其他集成工具,我們支持在墨刀內(nèi)部分享信息到其他媒體,亦允許將其他信息分享到墨刀。這些功能依賴于你在社交分享功能中的設(shè)置,可以讓你與朋友或者公眾共享信息。更多有關(guān)數(shù)據(jù)處理和連接相關(guān)分享功能,請(qǐng)瀏覽分享功能的相關(guān)隱私協(xié)議。安全墨刀(MockingBot會(huì)采取合理的手段來保護(hù)您的信息,防止丟失、誤用、竊取等。您的選擇賬戶信息 您可以在任何時(shí)間登錄您的賬戶、更新、修改、刪除你的信息或者修改個(gè)人資料、賬單詳情等,您也可以直接通過賬戶管理頁(yè)面刪除您的賬號(hào)。但是請(qǐng)注意,我們可能會(huì)按照法律要求

9、或者在合法的商業(yè)范圍內(nèi)保留您的部分信息。我們也可能短時(shí)間內(nèi)保留緩存中關(guān)于您的信息。我們也可能會(huì)將您的緩存或信息存檔副本保留一段時(shí)間。Cookies大部分瀏覽器默認(rèn)接受cookies,您也可以設(shè)置瀏覽器刪除或者禁止cookies。請(qǐng)注意如果選擇刪除或禁止cookies,將會(huì)影響到對(duì)我們服務(wù)的正常使用。聯(lián)系我們?nèi)绻腥魏侮P(guān)于隱私協(xié)議的問題,請(qǐng)聯(lián)系我們: supportmodao.cc官網(wǎng)功能簡(jiǎn)介墨刀官網(wǎng)功能分為:下載(客戶端、入門教程、討論區(qū)、博客、注冊(cè)/登錄、工作區(qū)。下載(客戶端墨刀是網(wǎng)頁(yè)應(yīng)用,直接在Chrome及Chrome內(nèi)核的瀏覽器上登錄使用即可獲得最佳體驗(yàn)效果。(注:墨刀不支持IE及I

10、E內(nèi)核的瀏覽器,只需將360、搜狗、QQ瀏覽器等切換為極速模式即可使用若您不想安裝以上瀏覽器,也可以在墨刀首頁(yè)(https:/modao.cc下載墨刀桌面客戶端(需聯(lián)網(wǎng)使用。 桌面客戶端:Windows客戶端(32/64位:支持XP以上系統(tǒng)Mac客戶端iOS客戶端:對(duì)個(gè)人賬號(hào)內(nèi)項(xiàng)目進(jìn)行管理及預(yù)覽,也可稱為墨刀應(yīng)用查看器。入門教程入門教程包括:視頻教程教程文檔系統(tǒng)更新日志通過觀看教學(xué)視頻掌握墨刀基本使用方法,打好基礎(chǔ)快速進(jìn)階。討論區(qū)(論壇討論區(qū)(論壇包括:墨刀精選帖原創(chuàng)產(chǎn)品設(shè)計(jì)類文章原型作品分享產(chǎn)品經(jīng)理書單功能答疑相關(guān)線上線下活動(dòng)/招聘在這里你可以與數(shù)十萬(wàn)產(chǎn)品設(shè)計(jì)師們直接交流、分享經(jīng)驗(yàn),也可以獲

11、取墨刀最新的活動(dòng)資訊。 全新積分系統(tǒng),獲取一定的積分后可兌換等值的墨刀周邊產(chǎn)品(賬號(hào)、周邊、活動(dòng)優(yōu)先參與權(quán)等。博客墨刀官方博客,這里有設(shè)計(jì)美學(xué)相關(guān)干貨、優(yōu)秀文章投稿、國(guó)際最前沿的設(shè)計(jì)趨勢(shì)解讀。每周一篇,讓你的靈感永不枯竭。工作區(qū)墨刀最重要的功能入口,在這里開啟創(chuàng)作、項(xiàng)目或團(tuán)隊(duì)管理與協(xié)作之旅。賬戶收費(fèi)情況賬號(hào)使用方案墨刀賬號(hào)使用方案分為免費(fèi)及付費(fèi)兩種,我們目前的付費(fèi)方式:增強(qiáng)版:圖片存儲(chǔ)容量10G;允許邀請(qǐng)1名協(xié)作者;10元/月,99元/年創(chuàng)業(yè)版:圖片存儲(chǔ)容量100G;允許邀請(qǐng)5名協(xié)作者;49元/月,499元/年標(biāo)準(zhǔn)版:圖片存儲(chǔ)容量100G;允許邀請(qǐng)10名協(xié)作者;99元/月,999元/年企業(yè)版:

12、圖片存儲(chǔ)容量1000G;允許邀請(qǐng)50名協(xié)作者;499元/月,4999元/年 例:若公司產(chǎn)品團(tuán)隊(duì)有 6 人且需要團(tuán)隊(duì)協(xié)作,那么可以由一人選擇創(chuàng)業(yè)版方案并付費(fèi),該用戶可邀請(qǐng)其他 5 名協(xié)作者加入到團(tuán)隊(duì)或協(xié)作項(xiàng)目中來。四種方式都可以創(chuàng)建不限數(shù)量的私密應(yīng)用,并可以享受導(dǎo)出離線文件、白名單、多人協(xié)作、團(tuán)隊(duì)項(xiàng)目以及所有在未來增加的付費(fèi)增值功能。不同方案的區(qū)別即是圖片存儲(chǔ)空間及多人協(xié)作者數(shù)量的差別,存儲(chǔ)空間及協(xié)作人數(shù)需求越高方案金額越高。若想變更方案,可以直接點(diǎn)擊切換計(jì)劃,系統(tǒng)會(huì)自動(dòng)根據(jù)之前的付費(fèi)情況折價(jià)升級(jí)到新方案。若您需要更多個(gè)性化方案,可直接與我們聯(lián)絡(luò):supportmodao.cc免費(fèi)和收費(fèi)的區(qū)別免

13、費(fèi)賬戶:私密應(yīng)用;不可導(dǎo)出;不可團(tuán)隊(duì)協(xié)作;100MB圖片存儲(chǔ)可以創(chuàng)建不限數(shù)量的公開、私密項(xiàng)目,可以通過加密來保障項(xiàng)目的隱私;不支持導(dǎo)出離線文檔,如HTML 壓縮包、全部PNG壓縮包、當(dāng)前頁(yè)P(yáng)NG圖、IPA或APK安裝包;不支持團(tuán)隊(duì)項(xiàng)目及多人協(xié)作功能;100MB 的圖片存儲(chǔ)空間。注:個(gè)人公開頁(yè)是您工作成果的展示頁(yè),展示的內(nèi)容為您的所有公開項(xiàng)目、母版、組合。后期我們會(huì)陸續(xù)上線諸如應(yīng)用廣場(chǎng)等模塊,為大家提供一個(gè)更加自由開放的交流平臺(tái)。高級(jí)賬戶:私密應(yīng)用;導(dǎo)出;團(tuán)隊(duì)協(xié)作(白名單;超大圖片存儲(chǔ)空間可以創(chuàng)建不限數(shù)量的公開、私密項(xiàng)目,可以通過加密及設(shè)置白名單來保障私密項(xiàng)目的隱私;支持導(dǎo)出離線文檔,如HTML

14、壓縮包、全部PNG壓縮包、當(dāng)前頁(yè)P(yáng)NG圖及安卓APK安裝包;企業(yè)版賬戶支持導(dǎo)出IPA文件(需主動(dòng)申請(qǐng);高級(jí)賬戶享有多人協(xié)作 、團(tuán)隊(duì)項(xiàng)目以及白名單功能;xG 的圖片存儲(chǔ)空間(不同梯級(jí)方案。除導(dǎo)出、協(xié)作及存儲(chǔ)空間的區(qū)別外,所有墨刀用戶享有的基礎(chǔ)工具服務(wù)是相同的,基礎(chǔ)工具服務(wù)包括:內(nèi)部素材庫(kù)、交互設(shè)計(jì)功能、預(yù)覽模式等。同時(shí),每個(gè)用戶都享有14天的免費(fèi)試用高級(jí)功能的福利,在你使用了以上描述的高級(jí)功能后,賬號(hào)會(huì)升級(jí)為增強(qiáng)版,試用期結(jié)束后賬號(hào)自動(dòng)轉(zhuǎn)回免費(fèi)版。賬戶到期的相關(guān)問題賬戶到期您將無(wú)法再繼續(xù)編輯團(tuán)隊(duì)及協(xié)作應(yīng)用,但是您依然可以繼續(xù)查看和分享團(tuán)隊(duì)及協(xié)作應(yīng)用;您將無(wú)法導(dǎo)出各種格式的離線文件;到期后存儲(chǔ)空間

15、會(huì)自動(dòng)降為基本版容量,若已超出 100MB,您將無(wú)法上傳新的圖片素材。解決辦法項(xiàng)目或團(tuán)隊(duì)所有者主動(dòng)續(xù)費(fèi),以繼續(xù)相關(guān)協(xié)作服務(wù);移除所有協(xié)作者,刪除無(wú)用圖片素材;團(tuán)隊(duì)?wèi)?yīng)用屬于付費(fèi)功能, 需要團(tuán)隊(duì)管理者主動(dòng)續(xù)費(fèi),方可繼續(xù)協(xié)作。新建賬號(hào)及使用流程新建賬號(hào)流程瀏覽器輸入https:/modao.cc 后,點(diǎn)擊右上角免費(fèi)注冊(cè)或首屏立即體驗(yàn)按鈕,輸入用戶名、登錄郵箱以及登錄密碼信息,單擊立即體驗(yàn),新賬號(hào)注冊(cè)完畢,即刻登入墨刀進(jìn)行創(chuàng)作。 賬戶升級(jí)若對(duì)免費(fèi)賬號(hào)進(jìn)行升級(jí),需要進(jìn)入項(xiàng)目管理頁(yè),點(diǎn)擊個(gè)人頭像-賬戶設(shè)置,挑選適合自己的付費(fèi)方案后根據(jù)頁(yè)面提示完成付款: 若想對(duì)已有付費(fèi)方案進(jìn)行轉(zhuǎn)換升級(jí),點(diǎn)擊切換計(jì)劃后,剩余

16、時(shí)長(zhǎng)可直接抵換相應(yīng)費(fèi)用: 中國(guó)站(modao.cc支付方式目前僅支持支付寶,若您有其他充值需求,可以聯(lián)系: supportmodao.cc邀請(qǐng)獎(jiǎng)勵(lì)專屬邀請(qǐng)獎(jiǎng)勵(lì),將賬戶設(shè)置頁(yè)的邀請(qǐng)鏈接復(fù)制并分享給朋友,對(duì)方注冊(cè)并完成驗(yàn)證后,雙方各得一個(gè)月增強(qiáng)版使用權(quán)限,獎(jiǎng)勵(lì)可疊加(邀請(qǐng)?jiān)蕉?獎(jiǎng)勵(lì)時(shí)間越長(zhǎng)。 賬單查詢進(jìn)入賬戶設(shè)置后,點(diǎn)擊賬單,可以查看個(gè)人付費(fèi)賬單記錄。 個(gè)人信息設(shè)置若想對(duì)個(gè)人信息進(jìn)行修改,可點(diǎn)擊個(gè)人頭像或賬戶設(shè)置后,對(duì)用戶名、登錄郵箱、頭像、密碼等信息進(jìn)行修改。修改完成后點(diǎn)擊底部更新按鈕,即可應(yīng)用修改。資料更新后可以嘗試刷新瀏覽器或重啟客戶端,完成信息同步?？筛牡男畔⒂?用戶名、登錄郵箱(Ema

17、il、手機(jī)號(hào)、頭像、個(gè)人主頁(yè)鏈接、個(gè)人資料(職業(yè)信息、生日、所在地、密碼修改。賬號(hào)驗(yàn)證:為保障賬號(hào)信息安全,墨刀提供兩種驗(yàn)證方式:郵箱驗(yàn)證及手機(jī)驗(yàn)證,在賬戶設(shè)置頁(yè)面輸入郵箱及手機(jī)號(hào),獲取驗(yàn)證碼完成驗(yàn)證。完善個(gè)人信息:在社區(qū)與更多行業(yè)大牛交流經(jīng)驗(yàn),同時(shí)獲得更精準(zhǔn)的活動(dòng)推送。 發(fā)票及優(yōu)惠申請(qǐng)墨刀支持公益及教育事業(yè),希望為行業(yè)發(fā)展貢獻(xiàn)自己的一份力量,我方會(huì)向公益組織及教育機(jī)構(gòu)提供一定的優(yōu)惠方案:公益組織以及教育機(jī)構(gòu)可點(diǎn)擊付費(fèi)方案下方的按鈕提交優(yōu)惠申請(qǐng);付費(fèi)金額達(dá)300元即可申請(qǐng)發(fā)票,申請(qǐng)審核通過后會(huì)于每月下旬對(duì)發(fā)票進(jìn)行寄送。(墨刀 為小規(guī)模納稅人,只能為您提供增值稅普票發(fā)票申請(qǐng)流程在賬戶設(shè)置中的賬單

18、列表處勾選未開票訂單,開票金額達(dá)到300元后即可將訂單合并開出,填寫發(fā)票郵寄地址后請(qǐng)等待派送。 發(fā)票申請(qǐng)成功后,發(fā)票管理列表處狀態(tài)顯示為未開票,開票后狀態(tài)轉(zhuǎn)為已開票并標(biāo)注快遞信息,各位可自主查詢訂單派送狀態(tài)。發(fā)票及優(yōu)惠申請(qǐng)第二章 認(rèn)識(shí)工作區(qū)第二章 認(rèn)識(shí)工作區(qū)工作區(qū)是墨刀的主要操作區(qū),認(rèn)識(shí)工作區(qū)可以幫助我們更好地掌握墨刀使用方法。工作區(qū)由四部分組成,分別是內(nèi)置組件區(qū)、頁(yè)面列表區(qū)、工具欄、頁(yè)面設(shè)計(jì)器,以下是各個(gè)部分的細(xì)節(jié)功能介紹。 組件(快捷鍵 按“1” 所有的內(nèi)置組件都會(huì)在左側(cè)組件列表中顯示,分為5大類組件:基本、形狀、輸入組件、工具 欄及其它組件。以下分別介紹各組件的功能及特性。組件基本組件介

19、紹 1. 文字簡(jiǎn)介:也可稱為單行文字組件,可將其作為標(biāo)題等說明性文字。組件特性:默認(rèn)高度不變,文本框?qū)挾入S文字長(zhǎng)度自動(dòng)伸縮手動(dòng)設(shè)置文本框?qū)捀吆?框內(nèi)文字增減,文本框?qū)挾炔蛔冏痔?hào)直接決定可選區(qū)域的寬高限制文本框?qū)挾炔恍∮趦?nèi)部文字寬度單行文本不支持回行外觀設(shè)置:(快捷鍵“T”文本面板顏色:文本顏色、陰影顏色字號(hào)大小;加粗/斜體/下劃線/刪除線/上劃線對(duì)齊:橫向左對(duì)齊、居中、右對(duì)齊;豎向頂對(duì)齊、垂直居中、底對(duì)齊其他基礎(chǔ)設(shè)置:透明度、邊框色、固定位置、顯示隱藏、初始動(dòng)效等2. 多行文字簡(jiǎn)介:適用于文字詳情對(duì)應(yīng)頁(yè)面,直接粘貼文字段落。組件特性:默認(rèn)寬度不變,文本框高度隨文本行數(shù)自動(dòng)伸縮手動(dòng)設(shè)置文本框?qū)捀?/p>

20、后,框內(nèi)文字增減,文本框高度不變字號(hào)直接決定可選區(qū)域的高度限制文本框高度不小于邊緣文字高度多行文本支持回行外觀設(shè)置:(快捷鍵“T”文本面板顏色:文本顏色、陰影顏色字號(hào)大小;加粗/斜體/下劃線/刪除線/上劃線對(duì)齊:橫向左對(duì)齊、居中、右對(duì)齊;豎向頂對(duì)齊、垂直居中、底對(duì)齊其他基礎(chǔ)設(shè)置:透明度、邊框色、固定位置、顯示隱藏、初始動(dòng)效等3. 全局手勢(shì)簡(jiǎn)介:適用于設(shè)置當(dāng)前頁(yè)整體的跳轉(zhuǎn)手勢(shì)及鏈接。拖入此組件,所選的對(duì)應(yīng)手勢(shì)操作會(huì)對(duì)當(dāng)前頁(yè)整體造成影響,如翻頁(yè)。組件特性:同一頁(yè)面內(nèi)可設(shè)置不同的全局手勢(shì)及連接,預(yù)覽時(shí)不同的手勢(shì)操作會(huì)觸發(fā)對(duì)應(yīng)跳轉(zhuǎn)效果同一頁(yè)面內(nèi)相同全局手勢(shì)有且只有一個(gè)鏈接有效全局手勢(shì)與組件手勢(shì)相同時(shí),

21、預(yù)覽時(shí)只有全局手勢(shì)有效頁(yè)面內(nèi)設(shè)置了自動(dòng)跳轉(zhuǎn)的鏈接,預(yù)覽時(shí)只有該鏈接有效全局手勢(shì)組件寬高與控制區(qū)域大小無(wú)關(guān)全局手勢(shì)坐標(biāo)與預(yù)覽效果無(wú)關(guān)4. 鏈接區(qū)域簡(jiǎn)介:鏈接區(qū)域是一個(gè)不可見(透明的區(qū)域組件,可將其放置于任意區(qū)域(如靜態(tài)圖片上并為此區(qū)域添加交互。組件特性:工作區(qū)狀態(tài)下為半透明藍(lán)色,預(yù)覽時(shí)變?yōu)橥该麈溄訁^(qū)域的尺寸決定所覆蓋組件的最終可點(diǎn)擊區(qū)域Ctrl(Command+鼠標(biāo)劃選 可為圖片快速創(chuàng)建鏈接區(qū)域,添加交互支持基礎(chǔ)設(shè)置:尺寸、固定位置、顯示隱藏5. 圖標(biāo) 簡(jiǎn)介:組件外觀默認(rèn)為星星,功能同組件名,墨刀提供了移動(dòng)應(yīng)用原型中常用的圖標(biāo)素材,使用此組件即可打開及使用內(nèi)置圖標(biāo)素材庫(kù)。組件特性:選中后可拖拽調(diào)

22、整的區(qū)域?yàn)閳D標(biāo)的可點(diǎn)擊范圍尺寸在素材庫(kù)面板內(nèi)調(diào)整圖標(biāo)大小單選或多選圖標(biāo)組件后,直接在素材庫(kù)中點(diǎn)擊某圖標(biāo),即可統(tǒng)一替換原圖標(biāo)外觀設(shè)置:(快捷鍵“A”圖標(biāo)素材庫(kù)面板顏色:前景、背景、陰影顏色等 (快捷鍵“O”外觀設(shè)置面板素材庫(kù)面板(A:圖標(biāo)大小、圖標(biāo)搜索及分類篩選其他基礎(chǔ)設(shè)置:透明度、邊框色、陰影色、固定位置、顯示隱藏、一鍵圓形/正方形、初始動(dòng)效等6. 圖片簡(jiǎn)介:組件外觀為灰底白標(biāo),可直接用于原型界面占位,亦可上傳.gif及.png格式的圖片,并通過拖拽調(diào)整圖片尺寸。組件特性:圖片組件與個(gè)人圖片素材庫(kù)(注相關(guān)聯(lián)可直接批量上傳UI設(shè)計(jì)稿至素材庫(kù)直接點(diǎn)選素材庫(kù)中圖片以完成對(duì)當(dāng)前圖片組件的替換操作可直接

23、在工作區(qū)中粘貼截圖或直接將圖片拖入工作區(qū)插入勾選等比例縮放圖片表示當(dāng)前圖片按照組件尺寸等比縮放Chrome瀏覽器及官方客戶端支持對(duì)圖片進(jìn)行簡(jiǎn)單形狀裁切支持圖片濾鏡,選中圖片后調(diào)節(jié)濾鏡參數(shù)即可*注:關(guān)于圖片素材庫(kù)及圖片濾鏡的功能將在第三節(jié)課中詳細(xì)解答。7. 按鈕簡(jiǎn)介:適用于制作各種功能按鈕,外觀默認(rèn)為圓角矩形、文字居中、白底黑字?？芍苯哟蜷_圖標(biāo)素材庫(kù),為按鈕添加圖標(biāo),圖標(biāo)居左且不可自定義。組件特性:按A打開圖標(biāo)素材庫(kù),點(diǎn)選某圖標(biāo)為按鈕添加或替換圖標(biāo)設(shè)置圖標(biāo)后,不支持刪除圖標(biāo),只能刪除按鈕后重新設(shè)置外觀設(shè)置:顏色:前景、背景、陰影顏色等 (快捷鍵“O”外觀設(shè)置面板文字(T:對(duì)齊方式、字號(hào)等圖標(biāo)素材

24、庫(kù)(A:圖標(biāo)大小、圖標(biāo)搜索及分類篩選其他基礎(chǔ)設(shè)置:圓角半徑、固定位置、顯示隱藏(V、一鍵圓形/正方形、初始動(dòng)效等按鈕組件、文字、形狀組件都是可以通用的,只需自定義外觀即可。8. 聊天氣泡 簡(jiǎn)介:tooltip組件,適用于制作聊天氣泡及相關(guān)工具提示效果。默認(rèn)樣式為綠底黑字、箭頭居左的聊天氣泡。組件特征:調(diào)整箭頭方向及大小創(chuàng)作不同的氣泡樣式雙擊組件直接(且只能編輯文字外觀設(shè)置:箭頭方向、位置、大小調(diào)整其他基礎(chǔ)設(shè)置:顏色、文字、固定位置、顯示隱藏、初始動(dòng)效等9. 網(wǎng)頁(yè)(外部網(wǎng)頁(yè)簡(jiǎn)介:適用于展示外部網(wǎng)頁(yè)內(nèi)容,在預(yù)覽原型時(shí)該組件區(qū)域內(nèi)會(huì)顯示已設(shè)置的網(wǎng)頁(yè)信息。注:由于特殊原因(不法分子惡意使用,現(xiàn)已將外部

25、網(wǎng)頁(yè)組件的權(quán)限進(jìn)行了限制,只有創(chuàng)業(yè)版以上用戶可以使用該組件。關(guān)于事件的說明看這里:官方聲明組件特性:雙擊輸入想要展示的網(wǎng)頁(yè)完整URL只能預(yù)覽https協(xié)議的網(wǎng)頁(yè)組件尺寸影響預(yù)覽時(shí)網(wǎng)頁(yè)展示區(qū)域大小,也就是網(wǎng)頁(yè)內(nèi)容只會(huì)在此組件內(nèi)部顯示舉例: 雙擊輸入, 運(yùn)行后網(wǎng)頁(yè)組件內(nèi)會(huì)顯示百度首頁(yè)。 組件介紹如上圖,目前形狀組件包括矩形、圓形、直線、三角形這四種形狀,他們的用法相似,將組件拖入工作區(qū)中,調(diào)節(jié)尺寸、設(shè)置外觀即可。1. 矩形 為萬(wàn)用組件,你可以用它占位、制作按鈕、一鍵圓形、正方形等等;2. 圓形 可變身為橢圓,只需調(diào)整其寬高即可;3. 直線 調(diào)整高度,可設(shè)置直線的粗細(xì);直接旋轉(zhuǎn)組件制作斜線效果;4.

26、 三角形 等腰三角形及直角三角形適用于制作角標(biāo)樣式,與其他組件相同通過旋轉(zhuǎn)組件來達(dá)到期望效果。如何旋轉(zhuǎn)組件呢?見下圖,選中組件后,按住上方的旋轉(zhuǎn)圖標(biāo),順時(shí)針或逆時(shí)針轉(zhuǎn)動(dòng)即可,亦可直接在尺寸設(shè)置面板鍵入角度值,精確控制組件的旋轉(zhuǎn)。 輸入組件包括單行、多行文本輸入、多選、單選、文本選擇及下拉列表框以及開關(guān)組件。輸入組件與其他類型組件的區(qū)別在于預(yù)覽時(shí)此類組件是動(dòng)態(tài)展示的,如:你可以在文本輸入框中輸入密碼、點(diǎn)擊switch來模擬開關(guān)效果。1. 輸入框組件:我們把拖入單行、多行、以及工具欄組件分類下的搜索組件統(tǒng)稱為輸入框組件。組件的具體使用方法如下:1. 拖入輸入框組件后,雙擊修改默認(rèn)文字內(nèi)容2. 預(yù)覽

27、時(shí),單擊輸入框,可直接輸入文字2. 單行輸入框:除基本的使用方法外還有其獨(dú)特的組件屬性:鏈接可以通過敲擊回車觸發(fā)跳轉(zhuǎn)可在尺寸設(shè)置面板處選擇鍵盤樣式,如選擇密碼,預(yù)覽時(shí)輸入的信息自動(dòng)轉(zhuǎn)換為·····密碼暗文3. 單選:將多個(gè)單選框組合(Ctrl+G后,組合中的單選框有且只能有一個(gè)處于選中狀態(tài)。4. 多選:輸入組件多選一般與列表組合相配合(如:問卷、購(gòu)物車等 5. 下拉列表框:拖入組件,雙擊修改列表文字,每項(xiàng)文字使用回車分隔即可創(chuàng)建完畢。預(yù)覽時(shí)列表項(xiàng)文字與編輯時(shí)的各行文字內(nèi)容相同。需要注意的是,下拉列表框無(wú)法設(shè)置跳轉(zhuǎn)鏈接,只供列表內(nèi)容展示用。若你需

28、要實(shí)現(xiàn)此效果,可以使用矩形組件直接拼接出列表樣式,設(shè)置跳轉(zhuǎn)鏈接。6. 開關(guān)(Switch:預(yù)覽時(shí)直接點(diǎn)擊即可切換開/關(guān)狀態(tài)。工具欄 工具欄分類下包含的組件為標(biāo)題欄、底欄、搜索框、標(biāo)簽、空白欄。1. 標(biāo)題欄簡(jiǎn)介:適用于制作頁(yè)面頂部導(dǎo)航欄。組件特性:默認(rèn)置于頁(yè)面頭部,不支持移動(dòng)其所在位置默認(rèn)文字居中,字號(hào)18號(hào),不支持調(diào)整文字居中方式可拉動(dòng)標(biāo)題欄的底邊調(diào)整組件高度預(yù)覽時(shí)標(biāo)題欄區(qū)域及區(qū)域內(nèi)組件默認(rèn)為固定狀態(tài),不隨頁(yè)面滾動(dòng)外觀設(shè)置:可進(jìn)行簡(jiǎn)單的顏色及文字設(shè)置。2. 底欄、標(biāo)簽 簡(jiǎn)介:如上圖底欄與標(biāo)簽組件通常配合使用。底欄與標(biāo)題欄相似,用于制作頁(yè)面底部的tabbar效果;標(biāo)簽可以看做是圖標(biāo)與文字組件的組

29、合,默認(rèn)外觀即組件縮略圖樣式。組件特性:標(biāo)簽的可選高度不可調(diào)節(jié),寬度可調(diào),可拖動(dòng)調(diào)整組件位置可通過打開圖標(biāo)素材庫(kù)調(diào)節(jié)圖標(biāo)大小、外觀以及文字大小,來設(shè)置標(biāo)簽樣式底欄默認(rèn)置于頁(yè)面底部,不支持移動(dòng)其所在位置拉動(dòng)底欄的頂邊調(diào)整組件高度預(yù)覽時(shí)底欄區(qū)域及區(qū)域內(nèi)組件默認(rèn)為固定狀態(tài),不隨頁(yè)面滾動(dòng)3. 搜索框與上一節(jié)所講輸入框組件功能一致,拖入組件后雙擊編輯默認(rèn)文字,預(yù)覽時(shí)可輸入文字模擬真實(shí)搜索效果?？赏ㄟ^設(shè)置前背景色、組件寬度來調(diào)節(jié)組件外觀。4. 空白欄組件外觀與矩形相似,區(qū)別是空白欄的寬度與原型寬度是一致的,無(wú)法通過拖拽直接調(diào)節(jié)。該組件適用于制作列表通欄效果。其它組件 其它組件內(nèi)包括地圖、鍵盤、批注及狀態(tài)欄

30、組件。1. 地圖根據(jù)當(dāng)前網(wǎng)絡(luò)環(huán)境顯示不同的地圖(中文、英文,預(yù)覽時(shí)地圖組件可以左右拖動(dòng)模擬真實(shí)地圖效果。2. 鍵盤鍵盤默認(rèn)至于頁(yè)面底部,不支持移動(dòng)其位置預(yù)覽時(shí)底欄區(qū)域及區(qū)域內(nèi)組件默認(rèn)為固定狀態(tài),不隨頁(yè)面滾動(dòng)在尺寸設(shè)置面板設(shè)置默認(rèn)鍵盤類型:數(shù)字鍵盤、字母鍵盤此組件為靜態(tài)組件,預(yù)覽時(shí)不支持動(dòng)態(tài)輸入鍵盤默認(rèn)樣式隨原型設(shè)置時(shí)所選設(shè)備類型(Android或iOS改變(如下圖 3. 批注組件簡(jiǎn)介:適用于對(duì)原型頁(yè)面功能進(jìn)行說明、備注,默認(rèn)樣式為黃色便簽。批注組件是唯一可以在運(yùn)行時(shí)顯示的手機(jī)框外的組件,其他組件均不顯示。組件特性:可將批注組件放置于工作區(qū)內(nèi)任意位置,設(shè)計(jì)器內(nèi)、外部區(qū)域均可雙擊批注即可添加描述,

31、用法與文本組件相同預(yù)覽時(shí),批注隨屏幕滾動(dòng)顯示或隱藏將批注線拖至頁(yè)面內(nèi),對(duì)指向處功能進(jìn)行描述批注線顏色和批注背景色一致批注線默認(rèn)半透明,鼠標(biāo)懸停批注時(shí),線條高亮批注線即下圖箭頭標(biāo)識(shí)處: 4. 狀態(tài)欄該組件只有在當(dāng)前頁(yè)無(wú)狀態(tài)欄的情況下才會(huì)顯示在組件區(qū)。組件默認(rèn)樣式跟隨所選設(shè)備機(jī)型,雙擊可修改服務(wù)商信息。設(shè)置面板墨刀內(nèi)的設(shè)置面板分為兩類,一種是設(shè)置組件外觀樣式的組件設(shè)置面板,另一種是控制頁(yè)面跳轉(zhuǎn)的鏈接設(shè)置面板。兩種面板位于工作區(qū)中部,當(dāng)選中某組件時(shí)才會(huì)觸發(fā)面板的開啟或關(guān)閉。組件設(shè)置面板組件設(shè)置面板分為外觀、文字、尺寸、素材庫(kù)以及圖片上傳五個(gè)功能面板,控制組件外觀樣式的改變。組件設(shè)置面板默認(rèn)為開啟狀態(tài)

32、,用戶主動(dòng)關(guān)閉某面板后,下次選中組件時(shí),該面板為關(guān)閉狀態(tài)。若想再次開啟面板,點(diǎn)擊工具欄下方對(duì)應(yīng)按鈕或面板快捷鍵即可。(如下圖 1. 外觀面板(快捷鍵“O” 在外觀設(shè)置面板內(nèi)可以設(shè)置組件的顏色、邊框樣式、陰影以及透明度。直接粘貼16進(jìn)制顏色代碼或打開取色器選取顏色,完成顏色設(shè)置。自定義主題:除了直接使用墨刀內(nèi)置主題顏色,您還可以自定義主題。添加主題:將配置好的顏色及樣式添加到自定義主題處,就可以跨項(xiàng)目使用了。應(yīng)用主題:選中組件后直接點(diǎn)擊某自定義主題(或使用快捷鍵Shift+10即可快捷應(yīng)用主題。更新主題:選中某主題,修改外觀面板部分參數(shù)后,點(diǎn)擊更新主題按鈕,完成更新。2. 文字面板(快捷鍵“T”

33、 在文字面板內(nèi)可以設(shè)置文本外觀如文本顏色、字號(hào)、行高、對(duì)齊方式,可使用雙擊或直接在面板編輯框內(nèi)輸入文字的方式編輯文本信息。3. 尺寸面板(快捷鍵“R” 尺寸面板中可設(shè)置組件位置(X、Y坐標(biāo)、組件尺寸、旋轉(zhuǎn)角度、圓角半徑以及組件初始動(dòng)效。其中有兩個(gè)常被用到的功能需要大家知曉:固定位置以及組件的顯示隱藏。運(yùn)行時(shí)固定位置:勾選此選項(xiàng)時(shí),預(yù)覽模式下所選組件將不跟隨頁(yè)面滾動(dòng),且組件默認(rèn)置頂,其他組件將無(wú)法覆蓋它。該功能適用于制作 FAB 效果。當(dāng)前狀態(tài)可見(快捷鍵“V”:此選項(xiàng)控制可組件的顯示或隱藏。默認(rèn)為勾選狀態(tài),取消勾選后組件將被隱藏。適用于制作不同頁(yè)面狀態(tài)下組件交互效果。4. 素材庫(kù)面板 墨刀內(nèi)有

34、兩個(gè)素材庫(kù),一是圖標(biāo)素材庫(kù)(圖標(biāo)組件、按鈕組件可開啟,二是圖片素材庫(kù)(快捷鍵“A”開啟。圖標(biāo)素材庫(kù)(快捷鍵“I”:圖標(biāo)組件專屬素材庫(kù),選中圖標(biāo)后點(diǎn)擊工具欄上的星星按鈕可以開啟素材庫(kù)面板,使用圖標(biāo)搜索功能可以快速定位圖標(biāo)素材。圖片素材庫(kù)(快捷鍵“A”:個(gè)人上傳至墨刀的圖片素材都將在此面板展示,具體的使用方法及功能介紹請(qǐng)看下一課。5. 圖片上傳面板 圖片上傳:拖動(dòng)圖片到面板下方區(qū)域即可完成圖片上傳;點(diǎn)擊上傳區(qū)域?qū)⒋蜷_圖片素材庫(kù)面板。圖片裁切:支持對(duì)圖片進(jìn)行簡(jiǎn)單的形狀裁切(不支持Firefox瀏覽器。裁切方法如下:1.選擇裁切形狀:選中圖片,打開圖片上傳面板(快捷鍵U,選擇形狀2.選擇裁切區(qū)域:調(diào)整

35、圖片上藍(lán)色錨點(diǎn)位置(只有矩形及圓形支持整體移動(dòng)裁切形狀移動(dòng)外側(cè)錨點(diǎn)位置可以調(diào)整截圖區(qū)域拖拽裁切中心錨點(diǎn)可以整體移動(dòng)裁切形狀3.確定裁切:鼠標(biāo)點(diǎn)擊外部空白區(qū)域即可確認(rèn)裁切4.重置裁切:點(diǎn)擊圖片上傳面板上的移除圖片裁切按鈕,將恢復(fù)圖片原始效果*注:圖片裁切功能只有Chrome瀏覽器及官方客戶端可使用。6. 圖片濾鏡面板圖片濾鏡面板在圖片上傳面板旁,可對(duì)當(dāng)前選中圖片樣式進(jìn)行調(diào)節(jié),如調(diào)整亮度、對(duì)比度等基本圖片屬性,亦可添加模糊效果。鏈接設(shè)置面板1. 頁(yè)面鏈接使用墨刀可以非常方便地創(chuàng)建頁(yè)面間鏈接,墨刀獨(dú)創(chuàng)的拖拽鏈接方式,讓頁(yè)面間的鏈接關(guān)系清晰呈現(xiàn)眼前,要?jiǎng)?chuàng)建頁(yè)面間鏈接,只需要選中組件,然后拖動(dòng)組件右側(cè)的

36、小圓圈到目標(biāo)頁(yè)面或狀態(tài)就可以了,如下圖: 創(chuàng)建好鏈接之后,我們會(huì)看到鏈接設(shè)置面板: 鏈接面板包含5個(gè)部分:手勢(shì)、切換動(dòng)畫、動(dòng)效時(shí)長(zhǎng)、定時(shí)器以及相關(guān)跳轉(zhuǎn)設(shè)置,下面我們來依次介紹這5個(gè)部分。手勢(shì):對(duì)應(yīng)的手勢(shì)操作可以觸發(fā)頁(yè)面跳轉(zhuǎn),可供選擇的手勢(shì)有7種:點(diǎn)擊、上下左右滑動(dòng)、長(zhǎng)按、雙擊。全局手勢(shì)有8種手勢(shì)可以選擇:點(diǎn)按、上下左右滑動(dòng)、長(zhǎng)按、雙擊以及搖一搖。最后一個(gè)鐘表圖標(biāo)的手勢(shì)為定時(shí)器,選擇定時(shí)器后可設(shè)置頁(yè)面自動(dòng)跳轉(zhuǎn)時(shí)間。切換動(dòng)畫:頁(yè)面切換動(dòng)畫選擇,共有15種特效可供選擇,如果您不確定需要哪種效果,可以直接將鼠標(biāo)移到動(dòng)畫上面預(yù)覽切換效果。動(dòng)效時(shí)長(zhǎng):設(shè)置不同的時(shí)長(zhǎng)可直接影響動(dòng)畫的切換速度;如無(wú)特殊需要可不

37、做設(shè)置。定時(shí)器:可以設(shè)定當(dāng)前鏈接的自動(dòng)跳轉(zhuǎn)時(shí)間,到達(dá)時(shí)間后,即使用戶沒有任何操作,應(yīng)用也會(huì)自動(dòng)跳轉(zhuǎn)到目標(biāo)頁(yè)面,適合制作輪播動(dòng)畫等等。保留兩側(cè)浮動(dòng)頁(yè)面:設(shè)置左菜單后,若想保持左菜單浮動(dòng)狀態(tài),在對(duì)菜單頁(yè)進(jìn)行鏈接時(shí)選擇保留兩側(cè)浮動(dòng)頁(yè)面即可。重置目標(biāo)頁(yè)為初始狀態(tài):此功能默認(rèn)處于選中狀態(tài),若取消選擇則代表不重置目標(biāo)跳轉(zhuǎn)頁(yè)的初始狀態(tài)。舉個(gè)例子:頁(yè)面A為長(zhǎng)頁(yè)面,A中頁(yè)面下部某組件鏈接至B頁(yè)面;B中按鈕設(shè)置鏈接返回A,并取消勾選重置目標(biāo)頁(yè)狀態(tài);頁(yè)面返回后,A展示會(huì)跳轉(zhuǎn)之前的內(nèi)容或狀態(tài)。2. 狀態(tài)鏈接 狀態(tài)鏈接與頁(yè)面鏈接不同點(diǎn)在于新增了延遲設(shè)置選項(xiàng),延遲時(shí)間是從手勢(shì)觸發(fā)時(shí)算起,到達(dá)設(shè)定時(shí)間后頁(yè)面才會(huì)發(fā)生跳轉(zhuǎn)。新

38、版圖片素材庫(kù)及濾鏡介紹新的圖片素材庫(kù)可幫助我們完成上傳圖片的操作,如:當(dāng)前頁(yè)插入圖片、創(chuàng)建新的圖片頁(yè)面、圖片替換;亦可協(xié)助我們管理素材庫(kù)中已有圖片,如:自定義圖片標(biāo)簽、修改圖片信息、增刪圖片。一、圖片上傳流程:支持 .png 及 .gif 格式1. 直接拖入或粘貼圖片至工作區(qū),在當(dāng)前頁(yè)插入圖片2. 批量拖入圖片至右側(cè)頁(yè)面列表區(qū),創(chuàng)建相應(yīng)數(shù)量的新的圖片頁(yè)面3. 拖入圖片組件,打開圖片上傳面板(U,將當(dāng)前組件替換為圖片:a. 點(diǎn)擊面板上傳區(qū)域,選擇圖片上傳b. 將圖片拖入上傳面板,直接完成圖片替換c. 點(diǎn)擊上傳/管理圖片,打開素材庫(kù),直接選擇已有圖片 二、素材庫(kù)管理:自定義標(biāo)簽、更新圖片名1、認(rèn)識(shí)

39、新素材庫(kù):新版素材庫(kù)分為四部分: 圖片篩選及搜索區(qū):圖片數(shù)量精準(zhǔn)提醒;輸入圖片名快速搜索;自定義標(biāo)簽篩選;刪除標(biāo)簽列表圖庫(kù):大視窗多圖顯示,素材一目了然;刪除圖片素材庫(kù)功能區(qū):圖片重命名;添加及移除圖片標(biāo)簽;插入圖片至當(dāng)前頁(yè);替換圖片圖片上傳區(qū):批量導(dǎo)入圖片2、圖片替換 功能區(qū)右側(cè)的替換圖片按鈕可用來統(tǒng)一替換素材庫(kù)以及工作區(qū)中已有的圖片。選中某圖片,點(diǎn)擊界面右側(cè)的替換圖片按鈕,上傳新版設(shè)計(jì)圖,上傳成功后即可完成所選圖片的替換操作;當(dāng)多個(gè)項(xiàng)目中已使用了 原圖A 時(shí),執(zhí)行替換操作后,所有項(xiàng)目中的 圖片A 將統(tǒng)一更新為新圖,且素材庫(kù)中原圖將被覆蓋。3、自定義圖片標(biāo)簽添加標(biāo)簽:選中圖片,在右側(cè)素材功能

40、區(qū)點(diǎn)擊添加標(biāo)簽,選擇已有標(biāo)簽或創(chuàng)建新標(biāo)簽,添加成功后,下方會(huì)顯示該圖片所屬標(biāo)簽。 移除標(biāo)簽:選中某圖片,點(diǎn)擊右側(cè)素材功能區(qū)下方標(biāo)簽上的×號(hào),即可移除某圖片的標(biāo)簽屬性; 刪除標(biāo)簽:鼠標(biāo)懸浮左側(cè)標(biāo)簽列表,點(diǎn)擊某標(biāo)簽上的×號(hào),即可刪除此標(biāo)簽;*注:標(biāo)簽刪除后無(wú)法恢復(fù),原標(biāo)簽內(nèi)圖片可正常搜索使用 三、素材庫(kù)使用須知1. 同一圖片可添加n個(gè)標(biāo)簽2. 快捷鍵 “A” 打開/收起 圖片素材庫(kù),快捷鍵 “U” 打開/關(guān)閉 mini圖片上傳面板3. 圖庫(kù)中,對(duì)某圖進(jìn)行刪除操作后,該素材即刻隱藏,工作區(qū)中已存在的對(duì)應(yīng)圖片不受影響4. 圖庫(kù)中,對(duì)某圖進(jìn)行替換操作后,該素材被新圖覆蓋,工作區(qū)中已存

41、在的對(duì)應(yīng)圖片均更新為新圖5. 需明確移除及刪除標(biāo)簽的區(qū)別,在相關(guān)操作時(shí)均有二次確認(rèn)提醒6. 設(shè)置自定義標(biāo)簽屬于賬號(hào)個(gè)人行為,不受團(tuán)隊(duì)管理制約四、圖片濾鏡使用方法在圖盤上傳面板旁新增了圖片濾鏡面板,選中圖片組件后,會(huì)自動(dòng)彈出。選中圖片后,在新的濾鏡設(shè)置面板上調(diào)整各參數(shù)如模糊、加溫等,可實(shí)時(shí)看到調(diào)節(jié)反饋。圖片濾鏡和圖片裁切效果可疊加。 母版 組件區(qū)域第二個(gè)標(biāo)簽為母版標(biāo)簽(快捷鍵“2”,母版可以復(fù)用于賬號(hào)下所有項(xiàng)目,屬性為繼承即編輯母版,當(dāng)前項(xiàng)目中的所有對(duì)應(yīng)母版實(shí)例都會(huì)同步發(fā)生改變。母版主要用于快速修改當(dāng)前項(xiàng)目?jī)?nèi)某模塊的內(nèi)容及布局。母版列表(快捷鍵“2”墨刀內(nèi)置兩個(gè)基礎(chǔ)母版,供大家學(xué)習(xí)及使用。將面板

42、切換至母版標(biāo)簽后,可以新建、搜索或篩選已有母版,可編輯母版名稱、復(fù)制或刪除母版。1. 新建母版:點(diǎn)擊+ 新母版按鈕,編輯母版名稱,創(chuàng)建新母版。2. 導(dǎo)入其它項(xiàng)目母版:母版列表默認(rèn)只顯示當(dāng)前項(xiàng)目?jī)?nèi)創(chuàng)建的母版,點(diǎn)擊導(dǎo)入其他項(xiàng)目母版后,可以將其他項(xiàng)目?jī)?nèi)母版復(fù)制到當(dāng)前項(xiàng)目中(實(shí)現(xiàn)母版的復(fù)用,對(duì)導(dǎo)入母版的操作只對(duì)當(dāng)前項(xiàng)目?jī)?nèi)實(shí)例有效。3. 搜索母版:通過輸入母版名稱關(guān)鍵詞,查找當(dāng)前項(xiàng)目?jī)?nèi)已創(chuàng)建的母版。4. 設(shè)置、復(fù)制或刪除母版:鼠標(biāo)懸浮母版名稱之上,可查看設(shè)置、復(fù)制、刪除這三個(gè)功能按鈕。設(shè)置:齒輪為設(shè)置按鈕,可設(shè)置母版的名稱或尺寸;復(fù)制:創(chuàng)建當(dāng)前母版副本,修改副本不會(huì)對(duì)工作區(qū)原母版或?qū)嵗斐捎绊?刪除:將

43、當(dāng)前母版刪除。需要注意的是,刪除母版前,需要將賬號(hào)內(nèi)項(xiàng)目中應(yīng)用過的母版實(shí)例全部刪除。*注:內(nèi)置母版不支持修改名稱及刪除。4. 使用母版:母版的使用與其他組件用法相同。1. 新建母版,修改名稱,創(chuàng)建;2. 進(jìn)入母版編輯區(qū),編輯母版內(nèi)個(gè)頁(yè)面布局,設(shè)置交互鏈接;3. 點(diǎn)擊工具欄保存按鈕,保存成功后,返回項(xiàng)目工作區(qū);4. 將已創(chuàng)建好的母版拖入工作區(qū)中,調(diào)整位置,設(shè)置鏈接;5. 雙擊實(shí)例重新修改母版的頁(yè)面布局。*注:母版不支持嵌套母版。母版與自定義組合的區(qū)別?母版與自定義組合的相同點(diǎn)在于可復(fù)用性,兩種控件都可以在同一賬號(hào)的任意項(xiàng)目?jī)?nèi)使用。在這里我們重點(diǎn)解釋兩者的區(qū)別。1. 繼承性:繼承性為母版特有屬性,

44、母版的編輯及改動(dòng)會(huì)影響項(xiàng)目?jī)?nèi)已應(yīng)用的對(duì)應(yīng)實(shí)例;自定義組合的屬性是獨(dú)立,對(duì)源組合的修改不會(huì)影響項(xiàng)目?jī)?nèi)已有實(shí)例。2. 可交互性:母版相當(dāng)于原型內(nèi)的二級(jí)項(xiàng)目,支持創(chuàng)建多個(gè)頁(yè)面及跳轉(zhuǎn)鏈接,可完成諸如輪播圖等效果;自定義組合是靜態(tài)的單張頁(yè)面,無(wú)法在組合內(nèi)部創(chuàng)建交互。母版、母版編輯區(qū)與實(shí)例 明確母版、母版編輯區(qū)及實(shí)例這三個(gè)概念,可以幫助我們更好地認(rèn)識(shí)母版功能。母版位于母版列表中,單擊母版會(huì)進(jìn)入母版編輯區(qū),應(yīng)用于工作區(qū)中的母版區(qū)域叫做母版實(shí)例,雙擊實(shí)例會(huì)進(jìn)入母版編輯區(qū)。母版的尺寸決定實(shí)例的顯示范圍(可選區(qū)域,母版背景色設(shè)置為透明,透明區(qū)域在預(yù)覽時(shí)將不會(huì)遮擋底層組件鏈接。使用母版制作定時(shí)輪播圖1. 創(chuàng)建母版,母版尺寸應(yīng)于項(xiàng)目尺寸寬度一致;2. 在母版編輯區(qū)內(nèi)新建3個(gè)頁(yè)面,分別拖入三張圖片,將頁(yè)面1、2、3連接起來,設(shè)置頁(yè)面切換效果為右移入,并設(shè)置定時(shí)器,時(shí)間為2s;3. 保存成功后,返回工作區(qū);4. 拖入該母版,運(yùn)行預(yù)覽輪播效果。母版如何連接外部頁(yè)面?母版可以連接外部頁(yè)面,但外部頁(yè)面不可反向連接母版、控制母版交互。具體操作方法:選中工作區(qū)中某母版實(shí)例,在左側(cè)彈出的編輯母版面板上點(diǎn)選組件所在的頁(yè)面,選中實(shí)例中的組件為組件添加鏈接。案例教程地址:https:/modao.cc/guide/286使用母版制作頁(yè)面橫屏滾動(dòng) / 局部滾動(dòng)效果母版功能可以實(shí)現(xiàn)局部滾動(dòng)的效果,如:豎向滾動(dòng)、橫屏滾動(dòng)、查看細(xì)