插入和替換組件、瀏覽更好的預(yù)覽、更快地瀏覽圖庫等等。了解這一切是如何實現(xiàn)的，以及如何充分利用命令欄。

 

在Athens 發(fā)布的版本中，我們以第 100 版中引入的命令欄為基礎(chǔ)，增加了直接從命令欄插入和替換組件的選項。此外，我們還吸取了命令欄的精華，為檢查器設(shè)計了一個新的彈出式窗口，以滿足更小的尺寸和上下文的需要。當(dāng)然，我們還提供了更多功能：更好的預(yù)覽、更快的庫和組導(dǎo)航方式等等。

 

讓我們來看看有哪些新功能，對比以前的工作流程有哪些改進，以及背后的設(shè)計原理。

 

建立在經(jīng)過檢驗的基礎(chǔ)之上

在第 100 版中，我們引入了命令欄：一種快速、鍵盤優(yōu)先的方式來顯示 Sketch 中的所有操作。我們對 300 多個現(xiàn)有操作進行了審核，添加了圖標(biāo)、顏色編碼和其他必要元素，使它們在命令欄中大放異彩。我們編寫了自定義搜索算法，因此您只需鍵入動作名稱的一部分、縮寫，甚至只需鍵入菜單路徑的一部分即可找到該動作。我們還讓它完全本地化地學(xué)習(xí)你的習(xí)慣，將你最常用的操作放在頂部。

 

不過，我們一直深知，這只是一個開始。我們一直認(rèn)為，我們需要一個插入組件的界面，它能讓我們更快、更輕松地瀏覽庫，提供更有用的預(yù)覽，還能用于替換組件。

 

將組件引入命令欄

在Athens中打開 "命令欄 "時，你看到的將不再是一個空的搜索欄。

 

現(xiàn)在您可以從命令欄插入和替換各種組件。命令欄取代了舊的插入窗口以及工具欄和檢查器中的菜單，它擁有一個新的跳板，可以執(zhí)行選取組件的操作。您還可以搜索這些操作，或使用菜單欄中的項目。

這些操作都會帶你進入我們所說的 "命令欄 "模式。到目前為止，命令欄只有一種模式：操作模式（仍然是默認(rèn)模式）。但現(xiàn)在，每個組件都有一個新的模式。我稍后會詳細(xì)介紹每種模式，但基本上，每種模式都為你提供了一個專門用于選擇特定組件的界面。為了說明我的意思，讓我們來看看新的 "符號 "（Symbols）模式。

您可以通過紫色標(biāo)記來判斷您是否處于組件模式。

 

操作起來看起來很不一樣，是吧？這里有很多東西要看，讓我們一起來探索一下這個新界面，看看都有什么。你可以通過搜索欄左邊的紫色小標(biāo)記來判斷自己是否處于不同的模式。要退出模式，可以點擊它，或者在搜索欄為空的情況下按兩次?鍵。

 

 

查找庫和群組的捷徑

雖然每種組件模式都有專用于其組件類型的界面，但它們都有一個重要的相似之處：頂部的路徑欄。在將組件引入命令欄時，我們面臨的最大挑戰(zhàn)之一就是導(dǎo)航庫和組。我們可以利用的空間少了很多，我們希望做出比以前的插入窗口和插入菜單更快、更省力的東西。

我們真的沒有吝惜鍵盤快捷鍵。

 

路徑欄中的第一項會告訴你正在哪個庫中（或者是否正在查看所有內(nèi)容）。你可以點擊它來選擇不同的庫，或者按 ?F。手仍放在鍵盤上時，使用方向鍵導(dǎo)航到不同的資料庫或其中的組，然后按 ?。要返回查看資料庫中的所有內(nèi)容，按 ??▲，或按??▲ 導(dǎo)航到所在組的父組。要導(dǎo)航到當(dāng)前組的同級組或子組，請按 ?▼ ——這將打開路徑欄中最后一項的菜單，您可以使用箭頭鍵選擇一個新組。

 

要插入任何組件，請使用箭頭鍵選擇該組件，然后按 ?。說到選擇，即使你已經(jīng)選中了一個組件，你也可以直接鍵入內(nèi)容來提升搜索的精確度。如果在頂部按 ▲ 鍵，還可以選擇搜索欄中的所有內(nèi)容，開始新的查詢。

命令欄會智能地記住你離開的位置。因此，即使你在畫布上飛來飛去，打開和關(guān)閉命令欄，它也會記住你在哪個組，以及你選擇了哪個組件。這使得插入同一組件或同一組中的多個組件變得非常容易。

 

我們知道你需要掌握很多快捷鍵，但一旦這些快捷鍵成為你的第二天性，我們希望你會同意這將使新組件模式的使用變得非常快捷。不過，如果你更喜歡使用鼠標(biāo)，可以單擊任何路徑項打開其同級（因此也是子）組菜單，或者?單擊某個項直接跳轉(zhuǎn)到該組。您還可以雙擊一個組件，或直接將其拖到畫布上。

 

 

合適的預(yù)覽

在很多情況下，舊版插入窗口中的組件預(yù)覽，尤其是檢查器菜單中的組件預(yù)覽并不是最有用的。它們要么太小，要么浪費太多空間，要么沒有顯示足夠的元數(shù)據(jù)。在命令欄中，我們對每個組件預(yù)覽進行了重新設(shè)計，以顯示盡可能多的信息，讓您在選擇組件之前就能對其外觀有最直觀的了解。

從表面上看，它可能與舊版的插入窗口相似，但新的符號網(wǎng)格有許多改進之處。

 

符號網(wǎng)格更節(jié)省空間，與插入窗口中的相同空間相比，您可以多看到一列符號。事實上，我們非常喜歡它，因此也將其用于框架模板和圖形模板。

 

淺色、深色或自動?，F(xiàn)在你可以選擇了！現(xiàn)有符號和新符號默認(rèn)設(shè)置為“自動”模式。

 

現(xiàn)在，您還可以為符號預(yù)覽設(shè)置淺色或深色背景。這個問題一直困擾著我們，也許你也一樣。如果你有一個以淺色為主、背景透明的符號，你會得到一個淺色背景的預(yù)覽，使你無法看清符號（深色模式也會出現(xiàn)類似的問題）?，F(xiàn)在，在組件模式下，你可以選擇符號是淺色背景、深色背景，還是與應(yīng)用外觀保持一致。

有了更多空間，文本樣式的預(yù)覽現(xiàn)在更加逼真，并能顯示更多的元數(shù)據(jù)。

 

我們重新設(shè)計了文本樣式預(yù)覽，為使用樣式的字體大小預(yù)覽文本提供了更多空間（達到合理的限制）。這樣就能更準(zhǔn)確地呈現(xiàn)使用該樣式的文本的外觀。我們還包含了更多的元數(shù)據(jù)，并為其提供了更大的空間，從而減少了被截斷的可能性。為了便于掃描，我們對每個預(yù)覽都進行了對齊，并在其他元數(shù)據(jù)中標(biāo)明了對齊方式（如果樣式中包含對齊方式）。

對于文本樣式，我們希望將插入窗口中小巧、難以閱讀的預(yù)覽效果，換成專為文本樣式設(shè)計的更大預(yù)覽效果。對于圖層樣式和顏色變量，我們要解決的問題幾乎正好相反。

 

與插入窗口相比，"圖層樣式 "和 "顏色變量 "共享一個類似的密集雙列網(wǎng)格，能更好地利用可用空間。以前在插入窗口中只能看到六個顏色變量，現(xiàn)在在命令欄中可以看到十個，而圖層樣式現(xiàn)在可以看到十二個。

 

 

使用命令欄替換組件

在此次項目中我們改進了諸多工作流程，此項是我們改進最多的，也是讓我們最感到激動的。

 

在 Athens 之前的版本中，若想要替換組件，您只能使用檢查器菜單，而您需要在子菜單中不停點擊，如果不留神點錯一步就可能要重頭再來。我們一直都想替換掉這個界面，目前我們認(rèn)為命令欄是一個更優(yōu)的方案。

可以說，我們所做的一切都是為了實現(xiàn)在命令欄中插入 "組件"，這樣我們就能用它替代舊的界面了。

 

要替換一個組件，您只需記住一個快捷鍵??R 或搜索 "替換組件 "操作。這兩種操作都會打開命令欄，并直接進入當(dāng)前組件所屬的庫或組，供你選擇替換。

 

通過將組件組織成組（如具有一定大小的圖標(biāo)），當(dāng)你想將一個組件換成另一個組件時，相關(guān)的組件就會出現(xiàn)。我們發(fā)現(xiàn)這對于替換嵌套的符號（如圖標(biāo)）或?qū)⒁粋€按鈕替換為另一個按鈕特別有用。

 

在替換符號時，路徑欄末尾有幾個額外的控制按鈕：

 

• 對于頂層符號，您會看到一個按鈕，可以讓您選擇替換是使用當(dāng)前符號的尺寸，還是使用自己的尺寸。如果您習(xí)慣于使用舊檢查器菜單中的 "按原始尺寸交換 "選項，那么這個按鈕就是，但它的命名更加清晰："保留當(dāng)前尺寸"。
• 對于嵌套的符號，你會看到一個切換按鈕，可以讓你隱藏嵌套的符號，而不是替換它。同樣，如果你喜歡使用 "檢查器 "菜單中的 "隱藏圖層 "選項，也可以用它來替代。

 

更換檢查器中的組件

跟大家分享一個小秘密：在我們第一次嘗試更新檢查器時，我們就用嘗試用命令欄進行組件選擇了。但在試用后，以及從使用了試用版的用戶的反饋來看，效果并不理想。我們希望能在當(dāng)前的上下文環(huán)境中使用檢查器，哪怕是用尺寸小一點的預(yù)覽都可以。

 

這促使我們（再次）重新思考如何在檢查器中替換組件。我們創(chuàng)建了一個全新的彈出窗口，它吸收了命令欄模式的精華，并將其縮小到專為檢查器設(shè)計的界面中——兩全其美。

 

熟悉但又不同

現(xiàn)在，在替換嵌套符號時，您可以在特定組內(nèi)進行搜索。

 

要打開新的彈出窗口，只需點擊任意一個常用的 "檢查器 "按鈕即可。由于可使用的空間較小，我們無法從命令欄中提取相同的元素并加以壓縮。例如，路徑欄就無法使用。因此，我們制作了一個別致的彈出按鈕，可以起到類似的作用。

庫選擇器可讓您快速跳轉(zhuǎn)到不同的組，或查看您所在的庫。

 

單擊彈出窗口頂部的 "庫 "選擇器按鈕，可以導(dǎo)航到不同的庫或組。其他庫始終位于底部，而在頂部，您可以找到所選組的父組（和庫）。點擊 × 或按鍵???▲，可以清除任何組或庫過濾器。與命令欄一樣，彈出窗口也會自動在當(dāng)前組件組中打開，因此你能在該組中找到你想要替換的組件，那你就無需再去其他地方找了。

當(dāng)你找到想要替換的組件時，只需單擊一次；或使用箭頭鍵選擇它，然后按 ?。彈出窗口中沒有任何動畫。我們希望讓用戶體驗到一種快速的替換過程，如果你試過后，我相信你也會同意：這種替換組件的方式真的快到飛起。

 

 

親，我們縮小了預(yù)覽圖

小巧的符號預(yù)覽功能還能讓你仔細(xì)檢查是否選擇了正確的替換。

 

與命令欄不同，為了節(jié)省空間，每個組件都以列表形式顯示。不過，這并不意味著我們在預(yù)覽或元數(shù)據(jù)方面有所壓縮。

 

現(xiàn)在，"符號""圖層樣式""框架模板 "和 "圖形模板 "的預(yù)覽更大、更易查看。也許最大的改進是，符號也會使用你為它們設(shè)置的背景，再也不會在模糊的淺色菜單背景上顯示白色符號了。

 

在替換符號時，庫選擇器右側(cè)的按鈕會根據(jù)上下文發(fā)生變化，就像命令欄一樣。對于頂層符號，該按鈕是保留當(dāng)前尺寸的切換按鈕，而對于嵌套符號，它是隱藏或顯示的切換按鈕。

 

顏色變量在命令欄中有了全新的預(yù)覽效果，十六進制和不透明度元數(shù)據(jù)也一樣。

文本樣式預(yù)覽是目前最難縮小的彈出窗口。我們探索了幾種設(shè)計，包括使用全寬的文本預(yù)覽，但我們發(fā)現(xiàn)這些設(shè)計使得掃描列表過于困難。我們最終找到了一個平衡點，即預(yù)覽仍能讓你對樣式有所了解，同時也為命令欄中的所有元數(shù)據(jù)留出了空間。

 

點擊一下就能看到更大的預(yù)覽效果

彈出式預(yù)覽包含了很多細(xì)節(jié)，但它們的尺寸很小。如果你需要更大的預(yù)覽，可以點擊庫選擇器左側(cè)的按鈕，或者按 ??R打開命令欄找到相同的按鈕，這樣做可以保留你的搜索詞。你也可以通過 ? 單擊檢查器按鈕直接跳轉(zhuǎn)到命令欄。如果你不想每次都按?鍵，我們有一個新的偏好設(shè)置來控制這一點："使用命令欄替換組件"。按住?鍵將始終執(zhí)行與設(shè)置該首選項相反的操作。

 

命令欄的未來故事

如您所見，命令欄并沒有停滯不前。我們的目標(biāo)是改善您每天使用 Sketch 的方式，而添加 組件則讓我們離這一目標(biāo)更近了一步。

 

這只是命令欄第二章的內(nèi)容。如果你已經(jīng)試用過Athens ，你可能已經(jīng)注意到我們的徽標(biāo)現(xiàn)在在工具欄中，點擊它就會打開命令欄。這是有原因的，不過下次再說吧。

 

感謝您能夠閱讀至此，如果您有任何問題或反饋，或者只是想分享一下您使用Athens 的情況，我們很樂意在論壇上聽取您的意見。衷心感謝所有試用過測試版并分享了自己想法的用戶。我們迫不及待地想看到您使用Athens 制作的作品。