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