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