1. 為什么說(shuō)手掌工具是Axure中被低估的效率開(kāi)關(guān)用Axure做高保真原型的同學(xué)應(yīng)該都有這種經(jīng)歷畫布上堆了幾十個(gè)頁(yè)面每個(gè)頁(yè)面的內(nèi)容橫向縱向鋪開(kāi)屏幕上只能看到一小塊區(qū)域。想從左上角的導(dǎo)航區(qū)挪到右下角的詳情區(qū)第一反應(yīng)是把鼠標(biāo)挪到滾動(dòng)條上拖著滾動(dòng)條滑動(dòng)或者按住鼠標(biāo)右鍵在畫布上劃拉——但這兩條路都算不上高效。其實(shí)Axure里早就提供了一個(gè)專門干這件事的功能就是手掌工具。它的本職就是讓你把畫布當(dāng)成一張紙用鼠標(biāo)在紙上推來(lái)推去。很多人知道工具欄里有個(gè)小手掌圖標(biāo)但用過(guò)一次就再也不碰了覺(jué)得不如滾輪方便。我一開(kāi)始也是這個(gè)態(tài)度后來(lái)在高保真項(xiàng)目里被大畫布反復(fù)折騰之后才意識(shí)到手掌工具不是給新手準(zhǔn)備的花架子它是在畫布快速導(dǎo)航這件事上整體體驗(yàn)最順手的一套方案。這個(gè)工具的定位一句話就能說(shuō)清**不改變?nèi)魏卧顟B(tài)只改變你觀察畫布的視角。**選擇工具點(diǎn)一下元件是選中了這個(gè)元件縮放工具拉一下是改變了畫布比例而手掌工具推一下只是把視野平移了元件位置、層級(jí)、選中狀態(tài)統(tǒng)統(tǒng)不受影響。正因?yàn)樗裁炊疾桓乃攀前踩?。有人可能?huì)說(shuō)那我直接用觸控板雙指滑動(dòng)不就行了筆記本上確實(shí)可以但桌面端外接鼠標(biāo)的場(chǎng)景更多滾輪上下滑動(dòng)只能解決垂直方向的移動(dòng)橫著移還得按住Shift推滾輪或者去挪底部的橫向滾動(dòng)條。而且頁(yè)面內(nèi)容一多小滾動(dòng)條根本點(diǎn)不準(zhǔn)。手掌工具沒(méi)有這些別扭的限制它只管最純粹的一件事你想看哪兒就把畫布推到哪兒。2. 三種把畫布抓在手里的方式與適用場(chǎng)景手掌工具的使用方式其實(shí)不止一種。我在不同場(chǎng)景下有不同習(xí)慣這里把三種主流方式都列出來(lái)你可以根據(jù)自己的設(shè)備和工作習(xí)慣選。2.1 從工具欄調(diào)出適合低頻精確操作Axure RP 10的頂部工具欄里默認(rèn)就有一個(gè)手掌圖標(biāo)一般位于選擇工具和縮放工具之間。點(diǎn)擊它之后鼠標(biāo)指針會(huì)變成一個(gè)小手掌這時(shí)候按住左鍵拖動(dòng)畫布就會(huì)跟著移動(dòng)。松開(kāi)左鍵之后鼠標(biāo)還是保持在手掌模式你需要手動(dòng)切回選擇工具才能繼續(xù)編輯元件。這套操作邏輯最直觀但也最啰嗦切過(guò)去、拖完、切回來(lái)三個(gè)動(dòng)作里有兩個(gè)都是多余的。如果你只是偶爾需要挪一下視野比如看一眼另一個(gè)頁(yè)面的標(biāo)注那直接從工具欄切換也沒(méi)問(wèn)題。但如果你是高頻使用我不太建議把它當(dāng)主力方式原因后面說(shuō)快捷鍵的時(shí)候你就明白了。2.2 空格鍵臨時(shí)按住是我日常的主力方案這才是手掌工具的正確打開(kāi)方式按住空格鍵鼠標(biāo)指針會(huì)臨時(shí)變成手掌松開(kāi)空格鍵自動(dòng)回到原來(lái)的工具狀態(tài)。不管當(dāng)前你選的是選擇工具、矩形工具、文本工具還是連線工具按住空格之后都能瞬間進(jìn)入手掌模式拖動(dòng)畫布之后松開(kāi)又回到之前的工具。整個(gè)過(guò)程不需要碰工具欄不需要鼠標(biāo)點(diǎn)來(lái)點(diǎn)去手都不用離開(kāi)鍵盤和鼠標(biāo)的常規(guī)位置。這套交互在其他設(shè)計(jì)軟件里也是通用標(biāo)準(zhǔn)Photoshop和Figma里都是這么干的。在Axure里用熟練之后你會(huì)發(fā)現(xiàn)自己拖動(dòng)畫布的頻次明顯變高因?yàn)槌杀咎土恕匆幌驴崭?、拖、松手一秒鐘都不到。尤其在做大畫布的高保真?yè)面時(shí)頻繁在幾個(gè)區(qū)域之間來(lái)回跳躍這個(gè)方式能省下大量時(shí)間。提示空格鍵方案和當(dāng)前輸入法有關(guān)如果遇到按空格沒(méi)反應(yīng)的情況大概率是輸入法把空格鍵截獲了具體排查方法我放在第5節(jié)講。2.3 鼠標(biāo)中鍵按住拖動(dòng)單手操作的備用方案還有一個(gè)不少人都不知道的技巧**按住鼠標(biāo)中鍵滾輪按下去也可以直接拖動(dòng)畫布同樣不需要切換工具。**這個(gè)方式在部分鼠標(biāo)上表現(xiàn)不太穩(wěn)定尤其是滾輪段落感很強(qiáng)的鼠標(biāo)按中鍵需要的力度偏大拖起來(lái)會(huì)有點(diǎn)吃力。但對(duì)那些需要頻繁單手操作的人來(lái)說(shuō)比如左手在敲鍵盤輸入文本、右手還想同時(shí)平移畫布中鍵方案就很有價(jià)值。你可以不用騰出手去按空格直接右手按中鍵拖動(dòng)。需要說(shuō)明的是這個(gè)行為在Axure里默認(rèn)就是啟用的不需要在偏好設(shè)置里額外配置。我在舊版Axure上測(cè)試過(guò)從較老版本開(kāi)始就有這個(gè)交互RP 10里依然保留說(shuō)明官方是有意把它作為一個(gè)補(bǔ)充入口的。三種方式的定位歸納如下操作方式是否需要切換工具主力推薦度適合場(chǎng)景工具欄手掌圖標(biāo)需要手動(dòng)切換回來(lái)一般偶爾平移不追求效率按住空格鍵不需要松手自動(dòng)還原極高日常高頻拖動(dòng)畫布按住鼠標(biāo)中鍵不需要松開(kāi)即還原中單手操作、鍵盤輸入間隙3. 手掌工具和縮放、框選之間的配合邏輯很多人沒(méi)用慣手掌工具是因?yàn)闆](méi)摸清楚它和其他工具的切換關(guān)系總覺(jué)得切來(lái)切去很麻煩。其實(shí)這里面的機(jī)制一點(diǎn)不復(fù)雜你只要記住一個(gè)核心原則手掌工具是瞬時(shí)的不是持久的。3.1 不改變當(dāng)前工具臨時(shí)切換才是精髓前面提到按住空格進(jìn)入手掌模式之后松開(kāi)就回到原狀態(tài)。這個(gè)原狀態(tài)指的是你按空格之前正在用的工具。如果你是選擇工具松開(kāi)空格回到選擇工具如果你是文本框工具松開(kāi)空格回到文本框工具如果你是縮放工具松開(kāi)空格也回到縮放工具。這個(gè)設(shè)計(jì)比點(diǎn)工具欄切換高明的地方在于它把觀察畫布和編輯畫布這兩個(gè)動(dòng)作徹底解耦了。你不需要在兩個(gè)工具之間反復(fù)橫跳而是讓手掌變成一個(gè)瞬時(shí)的修飾鍵隨時(shí)調(diào)用、隨時(shí)消失。我用這套方式工作之后基本沒(méi)有再點(diǎn)過(guò)工具欄里的手掌圖標(biāo)因?yàn)樗呀?jīng)內(nèi)化成一個(gè)肌肉記憶級(jí)的操作了。3.2 縮放工具狀態(tài)下拖畫布畫布比例保持不變有一個(gè)容易踩坑的地方有些人按住空格拖動(dòng)畫布之后發(fā)現(xiàn)畫布被放大了或者縮小了誤以為手掌工具影響了縮放。其實(shí)這不是手掌工具的問(wèn)題而是你當(dāng)前正處于縮放工具狀態(tài)下鼠標(biāo)滾輪會(huì)改變縮放比例空格只臨時(shí)切換了拖動(dòng)能力你松開(kāi)空格之后滾輪還是縮放功能。解決辦法很簡(jiǎn)單拖動(dòng)畫布的時(shí)候手穩(wěn)一點(diǎn)別動(dòng)滾輪或者干脆在拖之前先切回選擇工具再按住空格拖動(dòng)。我平時(shí)會(huì)在縮放模式下先按空格拖到目標(biāo)區(qū)域然后松開(kāi)空格用滾輪微調(diào)比例因?yàn)榭s放工具狀態(tài)下滾輪可用這個(gè)組合在檢查細(xì)節(jié)時(shí)非常高效。3.3 框選操作與手掌拖動(dòng)不沖突的邊界還有一個(gè)常見(jiàn)疑問(wèn)框選元件的時(shí)候不小心拉動(dòng)了畫布怎么辦選擇工具下的框選是從空白處按下左鍵拖出一個(gè)矩形區(qū)域選中框內(nèi)的元件而手掌拖動(dòng)是按空格之后按下左鍵拖動(dòng)整個(gè)畫布。兩者在操作上都是按住左鍵拖動(dòng)但觸發(fā)條件不同一個(gè)需要空格一個(gè)不需要。實(shí)際操作中容易出現(xiàn)誤觸的是那些還沒(méi)養(yǎng)成按空格習(xí)慣的人想拖畫布卻直接按了左鍵結(jié)果在元件上拖出一條框選區(qū)域或者把元件位置挪了。這不算Bug也不算沖突純粹是操作習(xí)慣沒(méi)建立起來(lái)。建議你在剛開(kāi)始練的時(shí)候刻意區(qū)分這兩個(gè)手勢(shì)左手負(fù)責(zé)空格右手負(fù)責(zé)左鍵沒(méi)有空格就不許拖畫布。幾周之后肌肉記憶自然就形成了。4. 真實(shí)項(xiàng)目里手掌工具的最佳實(shí)踐說(shuō)得再熱鬧不如直接看看在真實(shí)項(xiàng)目里它到底怎么幫上忙。我挑幾個(gè)典型場(chǎng)景拆開(kāi)講這些案例都是從實(shí)際工作中總結(jié)出來(lái)的你可以照著思路套用到自己的項(xiàng)目里。4.1 大尺寸頁(yè)面評(píng)審時(shí)快速巡視是關(guān)鍵做過(guò)后臺(tái)類系統(tǒng)原型的人都懂一個(gè)控制臺(tái)頁(yè)面動(dòng)不動(dòng)就是1920的寬度上面一排圖表卡片下面一列數(shù)據(jù)表格。這種頁(yè)面上線評(píng)審的時(shí)候?qū)Ψ綍?huì)盯著某一區(qū)域問(wèn)問(wèn)題你得快速把畫布推過(guò)去解釋推回來(lái)繼續(xù)講下一塊。這個(gè)場(chǎng)景下最忌諱的是滾輪一下一下往下蹭或者拉著滾動(dòng)條從頭滑到底。正確做法是按住空格直接把畫布推到目標(biāo)區(qū)域就像把一張圖紙?jiān)谧郎匣^(guò)去給對(duì)面看一樣。整個(gè)動(dòng)作一氣呵成對(duì)方甚至感覺(jué)不到你在操作軟件注意力全在內(nèi)容上。我自己在評(píng)審演示時(shí)經(jīng)常用的節(jié)奏是推過(guò)去→講細(xì)節(jié)→推回來(lái)→看整體全部用空格拖動(dòng)完成全程不需要碰工具欄。4.2 長(zhǎng)截圖和標(biāo)注導(dǎo)出前的視野調(diào)度做交互文檔時(shí)經(jīng)常需要截取頁(yè)面某一區(qū)域的長(zhǎng)圖或者給某個(gè)局部加注釋。在畫布上框選之前你得先保證目標(biāo)區(qū)域完整地出現(xiàn)在可視范圍里。大畫布上元件之間的間距動(dòng)輒幾百像素靠滾動(dòng)條精準(zhǔn)定位非常費(fèi)勁。我的操作流程一般是先按Ctrl1把畫布縮放到適合整體查看的比例看一眼全局布局然后按住空格把目標(biāo)區(qū)域拖到屏幕中央再切到選擇工具框選截圖范圍。整套流程下來(lái)定位的時(shí)間比用滾動(dòng)條至少快一半。特別是畫布里還疊加了多個(gè)流程連線、批注標(biāo)簽的時(shí)候滾動(dòng)條只能粗定位手掌工具能讓你一步到位。4.3 從元件繪制到連線標(biāo)注的無(wú)縫切換畫流程圖的場(chǎng)景更典型拿矩形工具畫節(jié)點(diǎn)畫完一個(gè)節(jié)點(diǎn)得往旁邊挪畫布繼續(xù)畫下一個(gè)。如果每次都切工具效率會(huì)打折扣。我習(xí)慣的做法是手里一直保持著矩形工具不放畫完一個(gè)框之后按住空格拖到新位置松開(kāi)空格直接開(kāi)始畫下一個(gè)框。這套操作下來(lái)工具切換次數(shù)為零。我觀察過(guò)很多剛上手Axure的人畫流程圖時(shí)會(huì)反復(fù)在工具欄點(diǎn)選擇→拖動(dòng)→再點(diǎn)矩形一天下來(lái)光點(diǎn)工具欄的時(shí)間都?jí)虍媰蓚€(gè)頁(yè)面了。這是手掌工具最值得投入時(shí)間練習(xí)的地方因?yàn)樗苯痈淖兞四愕牟僮鞴?jié)奏從停頓-切換-拖動(dòng)-切換變成拖動(dòng)-繼續(xù)-拖動(dòng)-繼續(xù)。5. 手掌拖動(dòng)畫布失靈時(shí)的排查鏈路任何工具都有失靈的時(shí)候手掌工具也不例外。這里整理幾個(gè)我實(shí)際遇到過(guò)的場(chǎng)景按癥狀→原因→解決的思路寫出來(lái)你遇到了可以對(duì)號(hào)入座。5.1 癥狀一按住空格光標(biāo)還是箭頭畫布紋絲不動(dòng)這是最常見(jiàn)的失靈情況十個(gè)里有八個(gè)是輸入法引起的。某些中文輸入法在全角/半角狀態(tài)下會(huì)優(yōu)先響應(yīng)空格鍵用于上屏候選詞或者切換中英文導(dǎo)致空格鍵的事件根本沒(méi)傳到Axure里。排查步驟很簡(jiǎn)單先按一下Shift把輸入法切成英文狀態(tài)或者直接切換到系統(tǒng)默認(rèn)的英文鍵盤再按住空格拖畫布基本立刻恢復(fù)正常。如果你經(jīng)常需要中英文混輸建議在Axure工作期間把默認(rèn)輸入法切成英文只在真正需要輸入中文時(shí)才臨時(shí)切回來(lái)。這一點(diǎn)聽(tīng)起來(lái)像小問(wèn)題但在實(shí)際工作中打斷流暢度最嚴(yán)重的就是它。5.2 癥狀二鼠標(biāo)中鍵按了沒(méi)反應(yīng)畫布不動(dòng)中鍵方案失效先別懷疑是軟件問(wèn)題拿鼠標(biāo)去瀏覽器里按一下中鍵看看能不能自動(dòng)滾動(dòng)頁(yè)面。如果瀏覽器里也沒(méi)反應(yīng)那基本可以斷定是鼠標(biāo)中鍵的物理?yè)p壞或者驅(qū)動(dòng)按鍵映射出了問(wèn)題。普通辦公鼠標(biāo)的中鍵手感普遍偏硬按多了容易出現(xiàn)微動(dòng)失靈。有些鼠標(biāo)可以通過(guò)驅(qū)動(dòng)軟件把中鍵改成其他功能比如某些多按鍵鼠標(biāo)默認(rèn)中鍵是雙擊或者打開(kāi)鏈接這種映射會(huì)直接干擾Axure的中鍵拖畫布行為。解決辦法是在鼠標(biāo)驅(qū)動(dòng)里把中鍵恢復(fù)成標(biāo)準(zhǔn)中鍵或者自動(dòng)滾動(dòng)功能Axure這邊不需要任何設(shè)置。如果實(shí)在調(diào)不回來(lái)空格方案也不受影響不用死磕中鍵。5.3 癥狀三拖動(dòng)的時(shí)候畫布抖得厲害或者拖完畫面跳動(dòng)這個(gè)情況在觸控板和部分高精度鼠標(biāo)上偶發(fā)。觸控板的問(wèn)題是硬件采樣率不穩(wěn)定手指在板面上小幅移動(dòng)時(shí)系統(tǒng)傳給Axure的位移數(shù)據(jù)有波動(dòng)表現(xiàn)出來(lái)就是畫布在手里打滑。高精度鼠標(biāo)如果鼠標(biāo)墊材質(zhì)太滑也會(huì)出現(xiàn)拖動(dòng)時(shí)方向歪斜的問(wèn)題。我的處理方式比較老派優(yōu)先用觸控板的三指拖移手勢(shì)來(lái)替代手掌工具或者把鼠標(biāo)DPI稍微降一點(diǎn)讓移動(dòng)更線性。另外檢查一下Axure的偏好設(shè)置里有沒(méi)有開(kāi)啟硬件加速在顯卡驅(qū)動(dòng)比較老的機(jī)器上這個(gè)選項(xiàng)可能導(dǎo)致畫布渲染跟不上拖動(dòng)速度關(guān)閉后反而更穩(wěn)。具體路徑是文件→偏好設(shè)置→畫布不同版本位置略有差異按實(shí)際操作界面找就行。5.4 癥狀四空格拖動(dòng)畫布時(shí)意外觸發(fā)了元件右鍵菜單這個(gè)情況出現(xiàn)的概率不高但一旦出現(xiàn)會(huì)很迷惑。原因是按住空格之后如果你按下的是鼠標(biāo)右鍵而不是左鍵Axure會(huì)把它當(dāng)成畫布右鍵菜單的觸發(fā)條件。手心按住空格手指習(xí)慣性地按下右鍵菜單就彈出來(lái)了。這不是Bug右鍵和左鍵在Axure里本身就是兩個(gè)職責(zé)手掌工具只接管左鍵拖動(dòng)。知道了原因就不慌了拖動(dòng)的時(shí)候只用左鍵右鍵留給元件菜單。如果你確實(shí)想用右手單手握持鼠標(biāo)來(lái)拖畫布那還是用中鍵方案更省事因?yàn)橹墟I不會(huì)觸發(fā)右鍵菜單。6. Axure RP 10在畫布拖動(dòng)上的體驗(yàn)變化與我的工作流總結(jié)Axure RP 10相比老版本在畫布渲染和拖動(dòng)體驗(yàn)上有一些細(xì)小的變化雖然不值得專門開(kāi)一篇評(píng)測(cè)但對(duì)高頻拖動(dòng)畫布的人來(lái)說(shuō)體感差異還是能察覺(jué)到的。6.1 高DPI顯示器下的拖動(dòng)順滑度高分屏普及之后很多設(shè)計(jì)軟件在高DPI下的渲染反而出問(wèn)題尤其是畫布平移時(shí)會(huì)出現(xiàn)撕裂感或者掉幀。RP 10在4K分辨率下的拖動(dòng)體驗(yàn)比我用過(guò)的RP 9明顯跳動(dòng)更少元件邊緣不再有明顯的鋸齒抖動(dòng)這說(shuō)明官方在渲染管線上是做了優(yōu)化的。當(dāng)然這也和機(jī)器配置有關(guān)集成顯卡在超大畫布上依然會(huì)有一定的遲滯有條件的話還是配一塊獨(dú)立顯卡更穩(wěn)?？s放與拖動(dòng)同時(shí)進(jìn)行的場(chǎng)景下RP 10的平滑度也好了不少。以前我在縮放狀態(tài)下按住空格拖畫布畫面會(huì)出現(xiàn)一陣模糊或者矩陣錯(cuò)位需要等渲染追上新版基本是跟手的拖到哪渲染就跟到哪。這個(gè)改進(jìn)對(duì)做大型高保真項(xiàng)目的人來(lái)說(shuō)很實(shí)在因?yàn)檫@類項(xiàng)目里畫布上幾千個(gè)元件是常態(tài)每一步平移都順滑的話整體心情都會(huì)好很多。6.2 我對(duì)這套畫布導(dǎo)航組合的最終配置經(jīng)過(guò)幾年的使用習(xí)慣沉淀我現(xiàn)在在RP 10里基本固定了這么一套組合空格鍵作為手掌工具的第一入口任何時(shí)候需要平移畫布都是按住空格拖動(dòng)框選元件需要精準(zhǔn)操作時(shí)切到選擇工具配合放大鏡快捷鍵需要快速定位某個(gè)頁(yè)面時(shí)左手按住空格同時(shí)右手拖動(dòng)直接把畫布推到目標(biāo)位置。如果你剛開(kāi)始練習(xí)不用強(qiáng)迫自己一下子掌握所有方式。先試一周的空格鍵方案把所有點(diǎn)工具欄手掌圖標(biāo)→拖動(dòng)→點(diǎn)回選擇工具的流程全部替換成按住空格→拖動(dòng)→松手。一周之后你會(huì)發(fā)現(xiàn)自己拖動(dòng)畫布的動(dòng)作頻率明顯變高但每一步觸發(fā)器都很輕——這就是效率提升的信號(hào)。最后送一個(gè)我自己常用的組合鍵按住空格按住Ctrl拖動(dòng)可以在平移的同時(shí)臨時(shí)進(jìn)入縮放模式這個(gè)組合在檢查大頁(yè)面細(xì)節(jié)時(shí)非常好用比來(lái)回切換工具欄省事得多。有想不通的地方歡迎在實(shí)際操作之后再來(lái)交流。