JetBrains IDE 的新版 UI 已經(jīng)開放有一段時(shí)間了。大家都用上了嗎？

如果還沒有，不妨在這篇博文中一睹為快！我們的技術(shù)布道師 Helen Scott 將以 Python IDE —— PyCharm 來演示，為你一一展示新 UI 中的全新設(shè)計(jì)和操作。

首先，讓我們啟用新 UI。 最簡(jiǎn)單的方式是使用 UI 右上角的?Settings（設(shè)置）齒輪：

PyCharm 將重新啟動(dòng)，然后就完成了！

在本次界面更新中，我們向不同元素周圍添加了更多空白。 這有助于分隔內(nèi)容，不需要在屏幕上添加分隔線等元素。 如果您更喜歡小一點(diǎn)的 UI 元素，您可以在?Meet the New UI（認(rèn)識(shí)新 UI）工具窗口中選擇?Compact（緊湊）（或后續(xù)在 Settings（設(shè)置）中搜索“new ui”）。 此設(shè)置將移除界面元素周圍的一些空白和填充。

這里有幾個(gè)顯眼的主題，包括使用顏色和元素大小來表示信息層次結(jié)構(gòu)。?

例如，在?Dark（深色）主題中，頂部有一個(gè)深灰色欄，用于 VCS 操作和“運(yùn)行”操作等功能的常見入口點(diǎn)，還有用于編輯器的黑色背景。?

接下來，就讓我們繼續(xù)參觀新 UI 里的一些巧妙設(shè)計(jì)吧！?

主工具欄

主工具欄更干凈，布局更簡(jiǎn)潔。 您知道和喜歡的所有功能都在這里。 這是您獲取項(xiàng)目相關(guān)信息的一站式工作間：

從左到右， 我想談的第一個(gè)區(qū)域是?Project（項(xiàng)目）微件。 您可以在這里看到當(dāng)前項(xiàng)目的名稱、在最近的項(xiàng)目之間切換、創(chuàng)建新項(xiàng)目和打開現(xiàn)有項(xiàng)目。

Project（項(xiàng)目）微件的右側(cè)是?VCS?微件。 這可以讓您在版本控制中快速查看項(xiàng)目的狀態(tài)，包括分支以及是否有傳出（以綠色顯示）或傳入（以藍(lán)色顯示）更改：

VCS?微件就在項(xiàng)目名稱旁邊，點(diǎn)擊下拉箭頭，它就會(huì)成為與項(xiàng)目和版本控制相關(guān)的功能的清晰入口點(diǎn)。 稍后您還會(huì)看到許多功能組的“入口點(diǎn)”。

右邊是重新設(shè)計(jì)的?Run（運(yùn)行）微件，我將在下一部分詳細(xì)介紹。

最后，在主工具欄最右側(cè)有更多通用圖標(biāo)，包括?Code With Me、Search Everywhere（隨處搜索）和 Settings（設(shè)置）。 如果您喜歡使用鼠標(biāo)，Settings（設(shè)置）齒輪圖標(biāo)會(huì)將您帶到一些常用頂級(jí)選項(xiàng)，包括插件、主題、按鍵映射和視圖模式。 另外，您也可以在這里切換回經(jīng)典 UI。

Run（運(yùn)行）微件

我們來仔細(xì)查看一下?Run（運(yùn)行）工具欄微件。 首先，這里的圖標(biāo)更大、更粗， 可以提供有關(guān)應(yīng)用程序狀態(tài)的即時(shí)視覺反饋。 例如，在運(yùn)行或調(diào)試應(yīng)用程序之前，Run（運(yùn)行）微件如下所示：

點(diǎn)擊?Run（運(yùn)行）圖標(biāo)后，它會(huì)變成：

現(xiàn)在，您會(huì)看到應(yīng)用程序正在運(yùn)行，您可以將其停止并重新運(yùn)行，或者完全停止。 您也可以點(diǎn)擊調(diào)試圖標(biāo)，這將提示您停止當(dāng)前運(yùn)行的應(yīng)用程序，讓您可以使用 PyCharm 的調(diào)試器運(yùn)行。?

如果使用 PyCharm 的調(diào)試器運(yùn)行應(yīng)用程序，微件將更改為：

您仍然可以從下拉菜單訪問所有運(yùn)行配置，并且對(duì)于每個(gè)配置，您都可以選擇如何運(yùn)行：

當(dāng)前所選運(yùn)行配置的功能也可以從三個(gè)垂直點(diǎn)按鈕訪問。

工具窗口

新 UI 帶來了新的圖標(biāo)、改進(jìn)的布局以及隨時(shí)查看更多工具窗口的選項(xiàng)。 新圖標(biāo)更大，所以屏幕上內(nèi)容更少，有助于減輕瀏覽時(shí)的認(rèn)知負(fù)荷。?

我將展示如何自定義它們?cè)?UI 中的位置，使它們更易查找：

您可以選擇垂直拆分工具窗口。 例如，在下面的屏幕截圖中，Commit（提交）工具窗口位于水平分隔欄下方。 工具窗口可被拖動(dòng)到分隔欄下方，以垂直拆分的方式將其打開：

您也可以這樣在右側(cè)拆分工具窗口：

最后，如果您想在底部拆分工具窗口，使一部分工具窗口在左側(cè)，另一部分在右側(cè)，那就將您希望出現(xiàn)在右側(cè)的工具窗口拖到右側(cè)的欄上。 在下面的屏幕截圖中，我將?Problem（問題）工具窗口圖標(biāo)拖到右側(cè)，然后在?Terminal（終端）工具窗口旁邊將其打開：

所有工具窗口現(xiàn)在都使用更現(xiàn)代的輪廓單色圖標(biāo)，不會(huì)提供額外多余信息導(dǎo)致界面混亂。 如果要查看工具窗口的名稱和鍵盤快捷鍵，將鼠標(biāo)懸停在圖標(biāo)上即可。 另外，隱藏所有工具欄的快捷鍵是 ??F12 (macOS) 或 Ctrl+Shift+F12 (Windows/Linux)。

Run（運(yùn)行）和 Debug（調(diào)試）

工具窗口

Run（運(yùn)行）和?Debug（調(diào)試）工具窗口現(xiàn)在都可以從左側(cè)的窗口標(biāo)簽頁(yè)訪問。 這是標(biāo)準(zhǔn)化的設(shè)計(jì)，可供快速訪問兩個(gè)工具窗口來管理應(yīng)用程序的狀態(tài)。

此外，更新的?Debug（調(diào)試）工具窗口中帶有一個(gè)工具欄，包含基于使用情況統(tǒng)計(jì)的最常見操作。 這可能意味著某些您經(jīng)常點(diǎn)擊的操作并不在習(xí)慣的位置！ 我們沒有移除任何功能，一切都仍然可以訪問，但是，舉例來說，您可能會(huì)發(fā)現(xiàn)?Evaluate Expression（對(duì)表達(dá)式求值）圖標(biāo)不見了。?

還有很多方法可以對(duì)表達(dá)式求值。 您可以：

• 使用 ?F8 (macOS) 或 Ctrl+F8 (Windows/Linux)

• 使用 Shift Shift (macOS/Windows/Linux) 調(diào)出 Search Everywhere（隨處搜索），然后輸入“evaluate expression”

• 從?Debug（調(diào)試）工具窗口的右鍵點(diǎn)擊上下文菜單中選擇?Evaluate Expression（對(duì)表達(dá)式求值）

Debug（調(diào)試）工具窗口中還有一個(gè)用于求值的專屬字段：

除了這些變化之外，如果只有一個(gè)運(yùn)行配置，還有新的標(biāo)簽頁(yè)可供在?Threads & Variables（線程和變量）和?Console（控制臺(tái)）視圖之間切換。

編輯器

最后，編輯器根據(jù)我們的設(shè)計(jì)得到了一些更新。 在新 UI 值得注意的方面，這些變化很容易被忽視，在新 UI 中瀏覽代碼庫(kù)時(shí)，這些一致的主題會(huì)給整個(gè)界面帶來清新、干凈、專業(yè)的感覺。

Light（淺色）和 Dark（深色）主題具有改進(jìn)的對(duì)比度和一致的調(diào)色板，可以讓您的屏幕變亮（或變暗）：

在編輯器中，圖標(biāo)也被徹底修改，形狀和顏色更加可辨。 您將在編輯器和更廣泛的 IDE 中看到這些更改。 在我看來，這給 PyCharm 帶來了奇妙的巨變：

斷點(diǎn)現(xiàn)在位于行號(hào)上，節(jié)省水平空間：

另外，如果您更喜歡將斷點(diǎn)置于行號(hào)旁邊，您仍然可以右鍵點(diǎn)擊裝訂區(qū)域，選擇?Appearance?>?Breakpoints Over Line Numbers（外觀 > 在行號(hào)上顯示斷點(diǎn)）。

Git Blame（Git 追溯）注解的調(diào)色板已更新。 陰影越淺，更改越早。 相反，陰影越深，更改越新：

總結(jié)

在這篇博文的結(jié)尾，我們要談一下更新 JetBrains IDE 界面的原因。 過去幾年里我們收集了大量用戶反饋，了解到當(dāng)前（經(jīng)典）UI 與雜亂、過時(shí)和缺乏視覺吸引力等詞相關(guān)聯(lián)。?

因此，我們知道有必要更新用戶界面，但該如何決定它的外觀呢？ 根本上說，我們從實(shí)施這篇博文中談到的用戶體驗(yàn)?zāi)Ｊ介_始。 我們隨后開展了數(shù)輪嚴(yán)格的內(nèi)部和外部審查周期，并根據(jù)反饋更新了新 UI。?

今天的文章就到這里了。 希望您愿意嘗試新 UI，并像我一樣愛上它！ 別忘了，您可以從 IDE 窗口左上角的?Settings（設(shè)置）齒輪啟用新 UI。 在?Settings（設(shè)置）中還有一個(gè)鏈接供您與我們分享反饋！