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

 

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

 

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

 

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

在第 100 版中，我們引入了命令欄：一種快速、鍵盤優(yōu)先的方式來顯示 Sketch 中的所有操作。我們對(duì) 300 多個(gè)現(xiàn)有操作進(jìn)行了審核，添加了圖標(biāo)、顏色編碼和其他必要元素，使它們?cè)诿顧谥写蠓女惒省Ｎ覀兙帉懥俗远x搜索算法，因此您只需鍵入動(dòng)作名稱的一部分、縮寫，甚至只需鍵入菜單路徑的一部分即可找到該動(dòng)作。我們還讓它完全本地化地學(xué)習(xí)你的習(xí)慣，將你最常用的操作放在頂部。

 

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

 

將組件引入命令欄

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

 

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

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

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

 

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

 

 

查找庫(kù)和群組的捷徑

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

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

 

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

 

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

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

 

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

 

 

合適的預(yù)覽

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

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

 

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

 

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

 

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

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

 

我們重新設(shè)計(jì)了文本樣式預(yù)覽，為使用樣式的字體大小預(yù)覽文本提供了更多空間（達(dá)到合理的限制）。這樣就能更準(zhǔn)確地呈現(xiàn)使用該樣式的文本的外觀。我們還包含了更多的元數(shù)據(jù)，并為其提供了更大的空間，從而減少了被截?cái)嗟目赡苄浴榱吮阌趻呙?，我們?duì)每個(gè)預(yù)覽都進(jìn)行了對(duì)齊，并在其他元數(shù)據(jù)中標(biāo)明了對(duì)齊方式（如果樣式中包含對(duì)齊方式）。

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

 

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

 

 

使用命令欄替換組件

在此次項(xiàng)目中我們改進(jìn)了諸多工作流程，此項(xiàng)是我們改進(jìn)最多的，也是讓我們最感到激動(dòng)的。

 

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

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

 

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

 

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

 

在替換符號(hào)時(shí)，路徑欄末尾有幾個(gè)額外的控制按鈕：

 

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

 

更換檢查器中的組件

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

 

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

 

熟悉但又不同

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

 

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

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

 

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

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

 

 

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

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

 

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

 

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

 

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

 

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

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

 

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

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

 

命令欄的未來故事

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

 

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

 

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