簡(jiǎn)介《墨刀原型工具基本操作流程》PDF完整梳理了墨刀這款高效原型設(shè)計(jì)工具的核心操作面向移動(dòng)產(chǎn)品設(shè)計(jì)師、產(chǎn)品經(jīng)理及原型入門者重點(diǎn)解決從零創(chuàng)建可手機(jī)預(yù)覽的低保真原型問題。文檔圍繞應(yīng)用創(chuàng)建、底部導(dǎo)航搭建、輪播圖等母版調(diào)用、頁(yè)面布局與跳轉(zhuǎn)連線、全局手勢(shì)及手機(jī)預(yù)覽等環(huán)節(jié)展開并配有操作參考提示適合零基礎(chǔ)用戶對(duì)照練習(xí)。資源包僅包含1個(gè)PDF文件體積1.83MB輕量易讀內(nèi)容結(jié)構(gòu)按操作順序組織便于邊看邊實(shí)操。目前已有2299人學(xué)習(xí)下載獲得不少初學(xué)者的關(guān)注。通過這份PDF讀者可快速掌握墨刀客戶端的基礎(chǔ)操作理解組件、母版、頁(yè)面連線等核心概念的實(shí)際用法并借助手機(jī)預(yù)覽功能隨時(shí)展示和驗(yàn)證原型效果從而提升低保真原型的制作效率與團(tuán)隊(duì)溝通質(zhì)量。1. 墨刀原型工具基本操作流程先連得通再畫得細(xì)墨刀原型工具基本操作流程聽起來(lái)像一份說(shuō)明書的目錄頁(yè)但對(duì)真正上手的人來(lái)說(shuō)流程能不能跑通決定了原型到底是靜態(tài)圖還是可評(píng)審的驗(yàn)證工具。我見過不少新同事把墨刀當(dāng)高級(jí)畫圖板組件拖了一堆交出去之前從沒點(diǎn)過預(yù)覽評(píng)審會(huì)上一演示頁(yè)面完全點(diǎn)不動(dòng)。這篇文章要梳理的就是從新建項(xiàng)目、搭頁(yè)面、連交互到分享交付的完整路徑。它適合剛開始用墨刀的人也適合需要快速做可點(diǎn)擊版本、拿去和團(tuán)隊(duì)對(duì)齊需求的人。2. 新建項(xiàng)目與畫布配置先把頁(yè)面結(jié)構(gòu)定好再開始拖組件在墨刀里上手最快的路徑是打開就拖組件但這也是后面返工率最高的路徑。墨刀雖然是一款原型工具它的項(xiàng)目結(jié)構(gòu)卻直接影響了交互連線的復(fù)雜程度。頁(yè)面怎么建、狀態(tài)怎么分、畫布配多大這些前面五分鐘的決定會(huì)在你做完整套交互之后加倍顯現(xiàn)。所以先看項(xiàng)目搭建階段的幾個(gè)選擇再講清楚墨刀里“頁(yè)面”和“狀態(tài)”的區(qū)別最后給出畫布配置的三個(gè)高頻參數(shù)。2.1 新建項(xiàng)目模板起點(diǎn)與空白起點(diǎn)分別適合誰(shuí)打開墨刀新建項(xiàng)目第一個(gè)選擇是設(shè)備類型第二個(gè)選擇往往是“從模板開始”還是“從空白畫布開始”。我的建議是第一次用墨刀的人選空白時(shí)間緊、需要快速演示框架的人選模板。模板的優(yōu)點(diǎn)是組件和頁(yè)面結(jié)構(gòu)已經(jīng)搭好。做移動(dòng)端App的高保真框架時(shí)一套成熟的模板可以省掉大半天的結(jié)構(gòu)搭建時(shí)間。但模板的缺點(diǎn)也很明顯組件層級(jí)是別人定義的改樣式時(shí)往往要處理一堆冗余的容器。新手常見的情況是想挪一個(gè)按鈕結(jié)果帶動(dòng)了半個(gè)頁(yè)面因?yàn)槟０謇锼性囟急还潭ㄔ谀硨痈溉萜髦?。空白畫布的好處是每一層組件結(jié)構(gòu)都是自己搭的出現(xiàn)問題時(shí)排查路徑短。代價(jià)是從零開始畫導(dǎo)航欄、列表和按鈕前兩個(gè)頁(yè)面會(huì)慢一些。我通常的折中做法是新建空白項(xiàng)目但把墨刀內(nèi)置組件庫(kù)里常用的導(dǎo)航欄整套拖進(jìn)來(lái)再刪掉不用的部分。這樣既保留了空白項(xiàng)目的結(jié)構(gòu)可控性又節(jié)省了從零拼框架的時(shí)間。新建項(xiàng)目的操作路徑是進(jìn)入墨刀工作臺(tái)點(diǎn)擊“新建項(xiàng)目”。選擇設(shè)備類型移動(dòng)端原型選“手機(jī)”桌面端選“網(wǎng)頁(yè)”。選擇畫布尺寸。手機(jī)端一般選目標(biāo)機(jī)型寬度iPhone系列選390x844或相近尺寸。起點(diǎn)處選擇“空白畫布”或“模板”按上面說(shuō)的場(chǎng)景判斷。填寫項(xiàng)目名稱命名建議帶上模塊和版本號(hào)。這五個(gè)步驟里最容易忽略的是畫布尺寸。畫布尺寸直接決定預(yù)覽時(shí)默認(rèn)的設(shè)備外殼也決定你拖入的組件默認(rèn)大小。如果你選的是平板尺寸卻要做手機(jī)原型后面每個(gè)頁(yè)面都要重新調(diào)整容器寬度返工量相當(dāng)大。最先確定設(shè)備寬度是墨刀操作流程里成本最低、收益最大的一步。2.2 頁(yè)面與狀態(tài)判斷“跳轉(zhuǎn)”還是“切換”的分界線墨刀頁(yè)面列表里的每個(gè)頁(yè)面本質(zhì)上是一塊獨(dú)立的畫布。頁(yè)面與頁(yè)面之間通過交互連線形成邏輯關(guān)系這和Web里URL對(duì)應(yīng)頁(yè)面的心智模型一樣。但墨刀還有一個(gè)容易混淆的概念——狀態(tài)。狀態(tài)掛在動(dòng)態(tài)面板上可以理解成同一塊屏幕區(qū)域內(nèi)不同的內(nèi)容版本。一個(gè)彈窗的顯示和隱藏、一個(gè)Tab欄切換時(shí)內(nèi)容區(qū)的變化都應(yīng)該用狀態(tài)來(lái)表達(dá)而不是新建頁(yè)面。如果做不到這一點(diǎn)頁(yè)面列表會(huì)被“首頁(yè)1”“首頁(yè)2”“首頁(yè)3”填滿交互連線也越來(lái)越難維護(hù)。判斷標(biāo)準(zhǔn)不復(fù)雜如果兩個(gè)界面之間是“跳到另一個(gè)地方”用頁(yè)面如果兩個(gè)界面是“同一個(gè)位置換內(nèi)容”用狀態(tài)。從首頁(yè)跳詳情頁(yè)是頁(yè)面跳轉(zhuǎn)首頁(yè)里切Tab是狀態(tài)切換。這個(gè)選擇在墨刀的操作上會(huì)直接影響預(yù)覽體驗(yàn)。頁(yè)面跳轉(zhuǎn)會(huì)帶上完整的轉(zhuǎn)場(chǎng)動(dòng)畫狀態(tài)切換則沒有頁(yè)面級(jí)動(dòng)畫更貼近真實(shí)App里的局部更新。如果你要還原“底部Tab欄切換只有內(nèi)容區(qū)變化”的細(xì)節(jié)用狀態(tài)幾乎是唯一正確的做法。2.3 畫布配置里的三個(gè)高頻參數(shù)外殼、啟動(dòng)頁(yè)、轉(zhuǎn)場(chǎng)時(shí)長(zhǎng)畫布配置在右側(cè)屬性面板中有三個(gè)參數(shù)我每次做項(xiàng)目都會(huì)過一遍。第一個(gè)是設(shè)備外殼。預(yù)覽時(shí)是否顯示手機(jī)外殼以及用哪一款外殼在這里設(shè)置。做移動(dòng)端原型我通常開外殼因?yàn)樵u(píng)審時(shí)需要傳達(dá)“這是一個(gè)手機(jī)的界面”的上下文。只做局部組件驗(yàn)證時(shí)再關(guān)掉外殼方便集中看內(nèi)容。第二個(gè)是啟動(dòng)頁(yè)。墨刀支持設(shè)置一個(gè)啟動(dòng)頁(yè)分享鏈接打開后先展示啟動(dòng)頁(yè)再進(jìn)入主流程。這個(gè)細(xì)節(jié)不復(fù)雜但對(duì)原型的完整度幫助很大。操作上是在頁(yè)面列表里新增一個(gè)頁(yè)面放在最前面再在分享設(shè)置中把它指定為啟動(dòng)頁(yè)。第三個(gè)是默認(rèn)轉(zhuǎn)場(chǎng)時(shí)長(zhǎng)。每次給連線設(shè)置交互時(shí)都單獨(dú)填時(shí)長(zhǎng)項(xiàng)目連線一多就容易不一致。我習(xí)慣在項(xiàng)目設(shè)置里把默認(rèn)轉(zhuǎn)場(chǎng)時(shí)長(zhǎng)統(tǒng)一設(shè)為350毫秒左右。過短會(huì)出現(xiàn)跳變感過長(zhǎng)則顯得拖沓。原型評(píng)審時(shí)轉(zhuǎn)場(chǎng)動(dòng)畫是連續(xù)的時(shí)長(zhǎng)不一致會(huì)讓人感覺整個(gè)原型是拼湊起來(lái)的。提示300到400毫秒是移動(dòng)端原型比較穩(wěn)妥的轉(zhuǎn)場(chǎng)區(qū)間。具體數(shù)值按項(xiàng)目的演示節(jié)奏微調(diào)要快就300要穩(wěn)就400。2.4 頁(yè)面分組與版本備份項(xiàng)目變大后不迷路的手段當(dāng)頁(yè)面數(shù)量超過十個(gè)左側(cè)的頁(yè)面列表會(huì)變成一個(gè)很長(zhǎng)的平鋪列表。每一次連線選目標(biāo)頁(yè)都要滾動(dòng)半天效率極低。墨刀支持頁(yè)面分組作用相當(dāng)于文件夾。我常用的分組是“登錄注冊(cè)”“首頁(yè)Tab”“列表詳情”“個(gè)人中心”“待定稿”。這樣在連線時(shí)能快速定位目標(biāo)頁(yè)面編輯效率高很多。分組不影響交互連線拖拽頁(yè)面進(jìn)分組后已有連線關(guān)系保持不變。所以放心分組不用擔(dān)心破壞已有的跳轉(zhuǎn)。版本備份是另一個(gè)容易被忽略的操作。做大的結(jié)構(gòu)調(diào)整之前把整個(gè)項(xiàng)目復(fù)制一份命名為“某項(xiàng)目_備份_日期”。這個(gè)動(dòng)作在墨刀里是復(fù)制項(xiàng)目而不是復(fù)制頁(yè)面成本極低但收益很大。我身邊發(fā)生過不止一次改到一半想回退、發(fā)現(xiàn)沒有備份的翻車現(xiàn)場(chǎng)。版本備份加頁(yè)面命名規(guī)范這兩個(gè)習(xí)慣加起來(lái)能讓墨刀項(xiàng)目在持續(xù)迭代時(shí)始終處于可控狀態(tài)。3. 拖組件搭界面組件選型、對(duì)齊習(xí)慣與自適應(yīng)的三個(gè)關(guān)鍵頁(yè)面結(jié)構(gòu)定好之后進(jìn)入搭建環(huán)節(jié)。這一步是墨刀操作中最耗時(shí)的部分把組件拖上畫布擺整齊并且讓它在不同尺寸的設(shè)備上不散架。組件拖拽本身誰(shuí)都會(huì)但“能拖”和“能用于交互”之間差著幾個(gè)習(xí)慣下面拆開講。3.1 組件庫(kù)的高頻選擇五個(gè)組件覆蓋九成頁(yè)面墨刀默認(rèn)組件庫(kù)的分類很多但日常做原型真正高頻使用的組件不超過十個(gè)。我按自己的使用頻率列一張表第一次打開墨刀的人可以直接照著用。組件位置高頻用途新手常見誤用文本基礎(chǔ)組件標(biāo)題、正文、按鈕文字不分行長(zhǎng)文本拖動(dòng)寬度導(dǎo)致?lián)Q行錯(cuò)亂圖片基礎(chǔ)組件封面圖、頭像、內(nèi)容圖忽略容器裁切圖片被拉伸變形按鈕表單組件主操作、次操作用矩形加文本拼按鈕丟失按下態(tài)輸入框表單組件搜索、表單填寫忘記設(shè)置提示文字演示時(shí)不知可輸入Tab欄導(dǎo)航組件頁(yè)面框架、狀態(tài)切換不做選中態(tài)預(yù)覽時(shí)Tab永遠(yuǎn)高亮同一個(gè)表格里列的這五個(gè)組件基本覆蓋了移動(dòng)端原型里列表頁(yè)、詳情頁(yè)、表單頁(yè)的搭建需求。文本組件要特別注意換行行為墨刀里的文本默認(rèn)單行要使它在組件寬度內(nèi)自動(dòng)換行需要檢查文本屬性里“自動(dòng)換行”是否開啟否則長(zhǎng)內(nèi)容會(huì)溢出組件邊界。圖片組件看起來(lái)簡(jiǎn)單實(shí)際上和熱區(qū)關(guān)系密切。圖片拖入畫布后生成的是一個(gè)圖片容器可點(diǎn)擊區(qū)域永遠(yuǎn)是容器的矩形范圍。后面做“整圖跳轉(zhuǎn)”時(shí)綁定的其實(shí)是圖片容器而不是圖片里的某個(gè)物體。原型評(píng)審階段用戶不會(huì)在意這一點(diǎn)但開發(fā)評(píng)審時(shí)會(huì)問“點(diǎn)擊區(qū)域到底多大”到時(shí)候再回頭調(diào)整就麻煩了。按鈕組件建議優(yōu)先用組件庫(kù)內(nèi)置的而不是用矩形加文本自己拼。內(nèi)置按鈕自帶按下態(tài)和禁用態(tài)評(píng)審演示時(shí)點(diǎn)下去按鈕有反饋能直觀告訴看的人這個(gè)操作是可以點(diǎn)的。自拼按鈕只有靜態(tài)視覺演示時(shí)按下去毫無(wú)反應(yīng)容易讓人誤以為這個(gè)按鈕沒做交互。3.2 對(duì)齊與間距三個(gè)習(xí)慣讓頁(yè)面看起來(lái)是“設(shè)計(jì)過的”墨刀畫布上的紅色對(duì)齊線、中心線是免費(fèi)的排版助手。但很多人在拖拽時(shí)眼不看線全靠目測(cè)結(jié)果頁(yè)面里的組件位置亂飛。三個(gè)習(xí)慣能快速把頁(yè)面對(duì)齊質(zhì)量拉起來(lái)。第一個(gè)習(xí)慣多選組件后用頂部工具欄的對(duì)齊按鈕。按住Shift逐個(gè)選擇或框選多個(gè)組件然后使用左對(duì)齊、水平居中、垂直居中。表單頁(yè)里多個(gè)輸入框并排時(shí)這個(gè)操作比鼠標(biāo)逐個(gè)微調(diào)準(zhǔn)確得多。第二個(gè)習(xí)慣用鍵盤方向鍵微調(diào)間距。拖動(dòng)組件時(shí)畫布上會(huì)顯示與相鄰組件的間距數(shù)值但鼠標(biāo)拖拽很難精確到像素。選中組件后用方向鍵移動(dòng)一次一個(gè)像素把間距校準(zhǔn)到一致。這個(gè)細(xì)節(jié)在評(píng)審放大投影時(shí)格外明顯間距不齊的頁(yè)面在屏幕上會(huì)顯得很粗糙。第三個(gè)習(xí)慣正確使用“置于頂層/底層”。組件在畫布上的層級(jí)順序和預(yù)覽時(shí)的疊放順序完全一致。做下拉菜單、浮層、彈窗時(shí)這些懸浮組件必須置于頂層否則會(huì)被頁(yè)面里其他組件蓋住導(dǎo)致點(diǎn)擊事件無(wú)法命中。注意層級(jí)問題不只影響視覺還會(huì)阻斷交互。如果一個(gè)組件的可點(diǎn)擊區(qū)域被上層組件覆蓋預(yù)覽時(shí)無(wú)論怎么點(diǎn)擊事件都會(huì)被上層攔截。后面避坑章節(jié)還會(huì)再展開。3.3 自適應(yīng)設(shè)置同一頁(yè)面在不同機(jī)型上不偏移的唯一辦法不少人在電腦編輯器里做好的頁(yè)面用手機(jī)打開預(yù)覽發(fā)現(xiàn)組件整體偏移、底部按鈕跑到了屏幕中間。這不是墨刀的隨機(jī)bug而是自適應(yīng)錨點(diǎn)沒有配置完整。墨刀的自適應(yīng)邏輯是“組件相對(duì)于容器的錨定位置”。選中組件后在屬性面板的自適應(yīng)區(qū)域可以設(shè)置它相對(duì)容器的位置關(guān)系。默認(rèn)情況下組件錨定左上角容器變寬時(shí)組件留在原地所以看起來(lái)像偏移了。要讓按鈕在頁(yè)面變寬時(shí)保持居中就把水平錨定設(shè)為“居中”要讓底部操作欄始終貼底就設(shè)置底部貼合加左右拉伸。我一般會(huì)在項(xiàng)目開始就把高頻組件類型的自適應(yīng)方式定下來(lái)比如頂部導(dǎo)航欄左右拉伸、底部按鈕居中、內(nèi)容圖片保持比例。這樣后面新增組件時(shí)不需要每次都重新配置。驗(yàn)證自適應(yīng)配置的方式也簡(jiǎn)單在畫布上方或預(yù)覽模式里切換不同設(shè)備寬度觀察目標(biāo)組件是否按預(yù)期移動(dòng)。不要等到分享鏈接給到評(píng)審人之后再?gòu)膭e人的手機(jī)截圖里發(fā)現(xiàn)問題那已經(jīng)晚了。另外圖片的自適應(yīng)模式和組件稍有差別。容器拉伸時(shí)圖片默認(rèn)的“填充”模式會(huì)把圖片一起拉伸變形。如果希望圖片在容器變寬時(shí)按比例縮放把自適應(yīng)模式設(shè)為“保持比例”圖片會(huì)等比例縮放而不是被壓扁。詳情頁(yè)頭圖、商品圖這些區(qū)域特別容易踩坑。4. 交互連線與動(dòng)態(tài)面板讓原型從“能看”變成“能點(diǎn)”頁(yè)面搭完后進(jìn)入墨刀操作流程的核心環(huán)節(jié)——把靜態(tài)頁(yè)面連成可點(diǎn)擊原型。墨刀的交互體系是按“觸發(fā)器-動(dòng)作-目標(biāo)”組織的理解這條鏈路后各種交互都能舉一反三。這一章先講基本動(dòng)作再講熱區(qū)的邊界問題最后用動(dòng)態(tài)面板把滾動(dòng)、輪播、彈窗這類高頻移動(dòng)端交互說(shuō)清楚。4.1 基本交互動(dòng)作跳轉(zhuǎn)、返回、切換的適用場(chǎng)景選中任意組件右側(cè)屬性面板里有“交互”區(qū)域點(diǎn)擊“添加交互”后第一步選擇觸發(fā)事件第二步選擇動(dòng)作第三步指定目標(biāo)。最常用的觸發(fā)事件是“點(diǎn)擊”最常用的動(dòng)作是“跳轉(zhuǎn)”。頁(yè)面之間的跳轉(zhuǎn)是原型里最基礎(chǔ)的能力。跳轉(zhuǎn)需要指定目標(biāo)頁(yè)面同時(shí)選擇轉(zhuǎn)場(chǎng)效果。轉(zhuǎn)場(chǎng)效果一般按場(chǎng)景定正向進(jìn)入下一級(jí)頁(yè)面用“左右滑動(dòng)”或“推進(jìn)”返回用默認(rèn)轉(zhuǎn)場(chǎng)。轉(zhuǎn)場(chǎng)時(shí)長(zhǎng)用項(xiàng)目設(shè)置里的默認(rèn)值不在單條連線上反復(fù)改?！胺祷亍眲?dòng)作和“跳轉(zhuǎn)”有本質(zhì)差別。返回動(dòng)作不需要指定目標(biāo)頁(yè)墨刀會(huì)按照預(yù)覽歷史棧回到上一個(gè)界面。做詳情頁(yè)返回列表頁(yè)時(shí)用“返回”比指定跳轉(zhuǎn)到列表頁(yè)更穩(wěn)因?yàn)槎嗉?jí)頁(yè)面反復(fù)跳轉(zhuǎn)時(shí)指定目標(biāo)頁(yè)容易出現(xiàn)循環(huán)跳轉(zhuǎn)的問題?！扒袚Q”動(dòng)作則配合狀態(tài)使用。Tab欄切換內(nèi)容區(qū)是最典型的場(chǎng)景點(diǎn)擊某個(gè)Tab觸發(fā)“切換狀態(tài)”目標(biāo)設(shè)為內(nèi)容區(qū)的對(duì)應(yīng)狀態(tài)。Tab切換如果用“跳轉(zhuǎn)頁(yè)面”來(lái)做等于每個(gè)Tab都建一個(gè)頁(yè)面頁(yè)面列表膨脹且轉(zhuǎn)場(chǎng)動(dòng)畫和真實(shí)App的Tab切換完全不一致。所以Tab切換一律用狀態(tài)?；緞?dòng)作的操作序列可以概括為選中組件進(jìn)入交互面板。添加“點(diǎn)擊”觸發(fā)事件。選擇“跳轉(zhuǎn)”、“返回”或“切換狀態(tài)”。指定目標(biāo)頁(yè)面或目標(biāo)狀態(tài)。進(jìn)入預(yù)覽模式驗(yàn)證。這里還有一步很多人會(huì)忽略交互面板里可以設(shè)置動(dòng)作的執(zhí)行順序。墨刀支持一個(gè)觸發(fā)事件下帶多個(gè)動(dòng)作比如“點(diǎn)擊后先隱藏當(dāng)前彈窗再跳轉(zhuǎn)到下一頁(yè)面”。多個(gè)動(dòng)作會(huì)按列表順序依次執(zhí)行評(píng)審時(shí)如果要模擬“關(guān)閉彈窗并跳轉(zhuǎn)”這個(gè)能力很實(shí)用。4.2 熱區(qū)與層級(jí)整行可點(diǎn)的基礎(chǔ)也是點(diǎn)擊失效的重災(zāi)區(qū)熱區(qū)是墨刀里的一個(gè)透明交互組件。常見的用途是擴(kuò)大可點(diǎn)擊區(qū)域或讓沒有組件覆蓋的區(qū)域也能響應(yīng)點(diǎn)擊。列表頁(yè)的“整行可點(diǎn)”是熱區(qū)最典型的使用場(chǎng)景。操作方式是在列表行組件上方添加一個(gè)熱區(qū)把熱區(qū)范圍覆蓋整行再把跳轉(zhuǎn)事件綁在熱區(qū)上。這樣用戶點(diǎn)擊行的任何位置都能觸發(fā)跳轉(zhuǎn)而不只是點(diǎn)到標(biāo)題文字才能跳。這個(gè)交互在移動(dòng)端是默認(rèn)體驗(yàn)原型里不做出來(lái)評(píng)審時(shí)就體驗(yàn)不到真實(shí)App的手感。熱區(qū)的問題幾乎都出在層級(jí)上。熱區(qū)默認(rèn)是添加到畫布最前端的但如果后續(xù)操作把其他組件移到了熱區(qū)上層點(diǎn)擊事件就會(huì)被攔截。排查方法是在組件樹里找到熱區(qū)使用“置于頂層”讓熱區(qū)回到這一層級(jí)的頂端。熱區(qū)和動(dòng)態(tài)面板組合時(shí)還有另一個(gè)坑熱區(qū)必須和它要響應(yīng)的內(nèi)容處于同一個(gè)容器層級(jí)。如果熱區(qū)加在了頁(yè)面層級(jí)而內(nèi)容在一個(gè)動(dòng)態(tài)面板里點(diǎn)擊事件可能無(wú)法穿透到動(dòng)態(tài)面板內(nèi)部。遇到“熱區(qū)明明在頂層卻點(diǎn)不動(dòng)”的情況先檢查熱區(qū)和內(nèi)容的容器歸屬。注意動(dòng)態(tài)面板的可視區(qū)域是有邊界的。放在動(dòng)態(tài)面板里的熱區(qū)超出面板可視邊界的部分預(yù)覽時(shí)無(wú)法點(diǎn)擊。做側(cè)滑菜單時(shí)菜單滑出面板邊界后點(diǎn)不到多數(shù)就是這個(gè)原因。4.3 動(dòng)態(tài)面板滾動(dòng)、輪播、彈窗和高頻交互的容器動(dòng)態(tài)面板是墨刀里承載“狀態(tài)”的容器組件也是做一個(gè)接近真實(shí)體驗(yàn)的原型時(shí)繞不開的組件。它的核心價(jià)值是讓一塊區(qū)域內(nèi)的內(nèi)容可以被替換而頁(yè)面本身不發(fā)生跳轉(zhuǎn)。先說(shuō)最常見的滾動(dòng)需求。墨刀頁(yè)面默認(rèn)不滾動(dòng)內(nèi)容超出畫布高度后預(yù)覽時(shí)看不到。正確做法是把需要滾動(dòng)的內(nèi)容放進(jìn)一個(gè)動(dòng)態(tài)面板把面板高度設(shè)為畫布可視高度然后在動(dòng)態(tài)面板屬性里開啟“垂直滾動(dòng)”。不少新手直接把整個(gè)頁(yè)面的內(nèi)容拖到超過畫布高度然后寄希望于預(yù)覽能自動(dòng)產(chǎn)生滾動(dòng)條這在墨刀里不會(huì)發(fā)生。滾動(dòng)面板有兩個(gè)參數(shù)值得調(diào)一是滾動(dòng)條樣式演示時(shí)一般隱藏滾動(dòng)條更接近真機(jī)效果二是滾動(dòng)方向長(zhǎng)列表開垂直滾動(dòng)橫向的輪播圖開水平滾動(dòng)。方向開錯(cuò)會(huì)導(dǎo)致手勢(shì)不響應(yīng)。輪播圖本質(zhì)上是動(dòng)態(tài)面板的多個(gè)狀態(tài)加上左右滑動(dòng)手勢(shì)。操作上把每一屏內(nèi)容放進(jìn)動(dòng)態(tài)面板的一個(gè)狀態(tài)在動(dòng)態(tài)面板的交互里添加“向左滑動(dòng)”和“向右滑動(dòng)”手勢(shì)動(dòng)作都是切換狀態(tài)。新手常犯的錯(cuò)是只設(shè)了一個(gè)方向的滑動(dòng)手勢(shì)導(dǎo)致輪播只能往一側(cè)劃。彈窗則利用動(dòng)態(tài)面板的顯示與隱藏。把彈窗內(nèi)容做成一個(gè)動(dòng)態(tài)面板初始狀態(tài)設(shè)為“隱藏”點(diǎn)擊按鈕時(shí)切換狀態(tài)到“顯示”。彈窗面板的背景需要設(shè)置半透明遮罩否則彈窗會(huì)帶一塊灰色的默認(rèn)底評(píng)審時(shí)觀感很差。關(guān)閉彈窗則是再切回“隱藏”狀態(tài)也可以設(shè)置點(diǎn)擊遮罩區(qū)域關(guān)閉。動(dòng)態(tài)面板在墨刀交互體系里是承上啟下的組件。頁(yè)面、狀態(tài)、熱區(qū)、滾動(dòng)、手勢(shì)這些概念全部通過動(dòng)態(tài)面板組合起來(lái)。等這幾個(gè)用法都熟了原型交互的還原度會(huì)明顯上一個(gè)臺(tái)階評(píng)審時(shí)不再需要反復(fù)解釋“這里應(yīng)該是能滑的”這類話。5. 墨刀操作避坑清單交互不生效、狀態(tài)丟失與真機(jī)預(yù)覽不一致前面講完了操作流程接下來(lái)進(jìn)入排查環(huán)節(jié)。墨刀的原型在本地編輯時(shí)通常一切正常問題往往在預(yù)覽和分享階段暴露。這一章整理了實(shí)際操作中反復(fù)遇到的四個(gè)問題每一條按“現(xiàn)象、原因、解決”的順序?qū)懣梢灾苯訉?duì)照排查。5.1 熱區(qū)不觸發(fā)跳轉(zhuǎn)點(diǎn)擊無(wú)反應(yīng)時(shí)先查層級(jí)現(xiàn)象熱區(qū)已覆蓋整行預(yù)覽時(shí)點(diǎn)擊區(qū)域內(nèi)沒有任何反應(yīng)不跳轉(zhuǎn)、無(wú)報(bào)錯(cuò)。原因最常見的是熱區(qū)被其他組件覆蓋了。列表卡片、背景容器、甚至一個(gè)看不見的占位組件都可能疊在熱區(qū)上方把點(diǎn)擊事件攔截在更上層。另外熱區(qū)如果添加在動(dòng)態(tài)面板的某個(gè)狀態(tài)上而面板當(dāng)前顯示的是另一個(gè)狀態(tài)熱區(qū)根本不在展示層級(jí)內(nèi)自然不會(huì)有反應(yīng)。解決打開組件樹檢查熱區(qū)在組件樹中的位置。如果不在當(dāng)前層級(jí)的頂層右鍵“置于頂層”。如果熱區(qū)在動(dòng)態(tài)面板內(nèi)去動(dòng)態(tài)面板屬性里確認(rèn)當(dāng)前顯示的初始狀態(tài)確保熱區(qū)所在的狀態(tài)是默認(rèn)展示的。還有一種驗(yàn)證方式是把畫布切換到線框模式先看清熱區(qū)范圍再排查層級(jí)關(guān)系。5.2 頁(yè)面跳轉(zhuǎn)后輸入內(nèi)容丟失表單頁(yè)返回時(shí)被重置現(xiàn)象表單頁(yè)填寫內(nèi)容后跳轉(zhuǎn)到下一頁(yè)再返回時(shí)輸入框里是空的填好的內(nèi)容全部丟失。原因墨刀的頁(yè)面跳轉(zhuǎn)在返回時(shí)會(huì)重新加載頁(yè)面頁(yè)面本體上的輸入框內(nèi)容不保留。這本質(zhì)上是原型工具的數(shù)據(jù)邊界問題沒有經(jīng)過狀態(tài)管理的頁(yè)面內(nèi)容在頁(yè)面重載后都會(huì)重置。解決如果必須保留輸入內(nèi)容把輸入框所在的區(qū)域放進(jìn)動(dòng)態(tài)面板并盡量把“填寫→提交→返回”的流程設(shè)計(jì)成頁(yè)面內(nèi)部的狀態(tài)切換避免跨頁(yè)面跳轉(zhuǎn)。狀態(tài)切換不會(huì)重新加載頁(yè)面內(nèi)容輸入框內(nèi)容能保留。如果一定要跨頁(yè)面需要借助變量記錄輸入值這是墨刀的高階用法普通原型階段可以先從流程設(shè)計(jì)上繞開。提示評(píng)審時(shí)如果需要展示“填了一半的表單數(shù)據(jù)在跳轉(zhuǎn)后還在”最好的辦法不是硬模擬數(shù)據(jù)流而是把整個(gè)表單流程收斂在一個(gè)頁(yè)面內(nèi)完成用多個(gè)狀態(tài)來(lái)表達(dá)步驟變化。5.3 頁(yè)面命名混亂一個(gè)項(xiàng)目里十幾個(gè)“頁(yè)面1”導(dǎo)致連錯(cuò)線現(xiàn)象分享出去的鏈接里某個(gè)按鈕跳轉(zhuǎn)到了毫不相關(guān)的頁(yè)面。檢查后原因是在選擇目標(biāo)頁(yè)時(shí)選錯(cuò)了同名頁(yè)面因?yàn)轫?xiàng)目里有大量未重命名的頁(yè)面都叫“頁(yè)面1”。原因新建頁(yè)面時(shí)跳過重命名頁(yè)面列表里全是默認(rèn)名。交互連線選目標(biāo)頁(yè)時(shí)只能靠縮略圖區(qū)分頁(yè)面一多必然選錯(cuò)。解決從項(xiàng)目一開始就執(zhí)行命名規(guī)范。推薦用“模塊_頁(yè)面_用途”的格式例如“首頁(yè)_Tab1_信息流”“列表_商品詳情_v2”。動(dòng)態(tài)面板狀態(tài)也用類似命名例如“內(nèi)容區(qū)_Tab1_已選中”。重命名在頁(yè)面列表里右鍵完成成本極低。交付前花一分鐘掃一遍所有連線凡是用默認(rèn)名的全部改掉。命名混亂在協(xié)作場(chǎng)景里還會(huì)放大。多人共同編輯一個(gè)項(xiàng)目時(shí)別人看到的頁(yè)面列表也是同樣的命名命名清晰等于給團(tuán)隊(duì)省時(shí)間。多人協(xié)作時(shí)“你連的是哪個(gè)頁(yè)面”這個(gè)問題清晰命名可以直接消掉。5.4 真機(jī)預(yù)覽與編輯器不一致設(shè)備寬度和自適應(yīng)錨點(diǎn)要一起查現(xiàn)象編輯器里頁(yè)面整齊用手機(jī)打開分享鏈接文字偏左、按鈕不居中、底部?jī)?nèi)容被裁切。原因畫布寬度和手機(jī)寬度不一致組件的自適應(yīng)錨點(diǎn)沒有配置完整。默認(rèn)錨定左上角的組件在屏幕變寬時(shí)停留在原坐標(biāo)表現(xiàn)成整體偏移屏幕變窄時(shí)右側(cè)組件被裁切。另一個(gè)因素是設(shè)備外殼占用了可視區(qū)域讓內(nèi)容空間比編輯器畫布更小。解決先在項(xiàng)目設(shè)置里把畫布寬度和目標(biāo)機(jī)型對(duì)齊再逐組件檢查自適應(yīng)錨點(diǎn)尤其注意頂部導(dǎo)航、底部操作欄和居中按鈕。用畫布上方的設(shè)備切換器模擬幾款不同寬度的機(jī)型逐個(gè)頁(yè)面過一遍。設(shè)備外殼占用空間的問題通過預(yù)留底部余量或調(diào)整動(dòng)態(tài)面板高度來(lái)處理。另外有一個(gè)小習(xí)慣每次改完自適應(yīng)設(shè)置后用瀏覽器預(yù)覽而不是客戶端預(yù)覽檢查。瀏覽器預(yù)覽的渲染機(jī)制和分享鏈接是同一套客戶端預(yù)覽偶爾會(huì)因?yàn)楸镜鼐彺骘@示舊版本。如果分享給別人的時(shí)候發(fā)現(xiàn)效果和本地看的不一致先讓接收方清緩存或換無(wú)痕模式再檢查項(xiàng)目本身的設(shè)置。6. 交付一個(gè)可評(píng)審的原型分享設(shè)置、評(píng)論沉淀與交付前自測(cè)流程走到最后一步是把原型交出去。分享和評(píng)審是很多人做得最倉(cāng)促的環(huán)節(jié)但恰恰是這個(gè)環(huán)節(jié)決定了前面所有工作的轉(zhuǎn)化率。分享設(shè)置里鏈接權(quán)限、評(píng)論開關(guān)、有效期三個(gè)選項(xiàng)我每次都會(huì)確認(rèn)一遍。鏈接權(quán)限一般選“所有人可查看”或“指定成員可查看”。給外部評(píng)審人發(fā)鏈接時(shí)用所有人可查看加訪問密碼既方便又可控。評(píng)論開關(guān)保持開啟評(píng)審意見會(huì)直接沉淀在原型頁(yè)面上比在群里零散討論好得多。有效期按評(píng)審節(jié)奏設(shè)短評(píng)審設(shè)7天周期長(zhǎng)的設(shè)無(wú)限制但項(xiàng)目不維護(hù)時(shí)要記得手動(dòng)關(guān)閉鏈接避免原型過期后還在外面流傳。墨刀的評(píng)論功能是原型評(píng)審里被低估的能力。評(píng)審人直接在某個(gè)組件上寫意見比“第三屏左邊那個(gè)按鈕不對(duì)”這種描述精準(zhǔn)得多。每次交付前我會(huì)自己先過一遍評(píng)論列表把歷史遺留評(píng)論清理掉保證評(píng)審人進(jìn)來(lái)看到的是干凈狀態(tài)。版本管理也是交付的一部分。大的結(jié)構(gòu)調(diào)整前復(fù)制整個(gè)項(xiàng)目作為備份命名帶上日期。原型迭代過程中備份項(xiàng)目就是后悔藥改崩了隨時(shí)回到上一個(gè)可用版本。我給自己的習(xí)慣是改動(dòng)超過一屏的內(nèi)容前先備份每次發(fā)鏈接前自己從首頁(yè)開始把核心流程完整點(diǎn)一遍。曾經(jīng)有一次我自認(rèn)為交互都連好了分享出去才發(fā)現(xiàn)一個(gè)Tab的選中態(tài)配錯(cuò)了評(píng)審現(xiàn)場(chǎng)被指出來(lái)相當(dāng)尷尬。從那以后交付前自測(cè)一遍成了固定動(dòng)作。希望這個(gè)墨刀原型工具基本操作流程能幫到你。按項(xiàng)目搭建、頁(yè)面布局、交互連線、避坑排查、交付評(píng)審這條線走下來(lái)原型的基本操作和交付能力都能穩(wěn)住后面再往變量、條件這些高階功能走也不會(huì)迷路。本文還有配套的精品資源點(diǎn)擊獲取