mockingbot墨刀中文使用說明_第1頁
mockingbot墨刀中文使用說明_第2頁
mockingbot墨刀中文使用說明_第3頁
mockingbot墨刀中文使用說明_第4頁
mockingbot墨刀中文使用說明_第5頁
已閱讀5頁,還剩50頁未讀, 繼續(xù)免費閱讀

下載本文檔

版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領

文檔簡介

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

19、紹 1. 文字簡介:也可稱為單行文字組件,可將其作為標題等說明性文字。組件特性:默認高度不變,文本框寬度隨文字長度自動伸縮手動設置文本框寬高后,框內文字增減,文本框寬度不變字號直接決定可選區(qū)域的寬高限制文本框寬度不小于內部文字寬度單行文本不支持回行外觀設置:(快捷鍵“T”文本面板顏色:文本顏色、陰影顏色字號大小;加粗/斜體/下劃線/刪除線/上劃線對齊:橫向左對齊、居中、右對齊;豎向頂對齊、垂直居中、底對齊其他基礎設置:透明度、邊框色、固定位置、顯示隱藏、初始動效等2. 多行文字簡介:適用于文字詳情對應頁面,直接粘貼文字段落。組件特性:默認寬度不變,文本框高度隨文本行數(shù)自動伸縮手動設置文本框寬高

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

42、切換至母版標簽后,可以新建、搜索或篩選已有母版,可編輯母版名稱、復制或刪除母版。1. 新建母版:點擊+ 新母版按鈕,編輯母版名稱,創(chuàng)建新母版。2. 導入其它項目母版:母版列表默認只顯示當前項目內創(chuàng)建的母版,點擊導入其他項目母版后,可以將其他項目內母版復制到當前項目中(實現(xiàn)母版的復用,對導入母版的操作只對當前項目內實例有效。3. 搜索母版:通過輸入母版名稱關鍵詞,查找當前項目內已創(chuàng)建的母版。4. 設置、復制或刪除母版:鼠標懸浮母版名稱之上,可查看設置、復制、刪除這三個功能按鈕。設置:齒輪為設置按鈕,可設置母版的名稱或尺寸;復制:創(chuàng)建當前母版副本,修改副本不會對工作區(qū)原母版或實例造成影響;刪除:將

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

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

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論