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