{"id":365244,"date":"2023-06-26T19:58:24","date_gmt":"2023-06-26T18:58:24","guid":{"rendered":"https:\/\/blog.jetbrains.com\/?post_type=pycharm&p=365244"},"modified":"2023-06-26T19:58:28","modified_gmt":"2023-06-26T18:58:28","slug":"cinq-raisons-d-aimer-la-nouvelle-interface-utilisateur","status":"publish","type":"pycharm","link":"https:\/\/blog.jetbrains.com\/fr\/pycharm\/2023\/06\/cinq-raisons-d-aimer-la-nouvelle-interface-utilisateur\/","title":{"rendered":"Cinq raisons d’aimer la nouvelle interface utilisateur"},"content":{"rendered":"

Utilisez-vous la nouvelle interface utilisateur ? Pas encore ? Laissez-moi vous expliquer comment elle peut vous changer la vie et rendre votre travail plus agr\u00e9able au quotidien !<\/p>\n

Commen\u00e7ons par l’activer pour y jeter un \u0153il. Le plus simple pour cela est de cliquer sur le bouton Settings<\/em> en haut \u00e0 droite de l’interface utilisateur :<\/p>\n

\n
\"Barre<\/figure>\n<\/div>\n

PyCharm doit juste red\u00e9marrer et nous pourrons commencer !<\/p>\n

Cette nouvelle interface comprend plus d’espace autour des diff\u00e9rents \u00e9l\u00e9ments, Ce qui permet de bien dissocier les contenus sans ajout de s\u00e9parateurs visuels \u00e0 l’\u00e9cran. Si vous pr\u00e9f\u00e9rez des \u00e9l\u00e9ments d’interface utilisateur un peu plus petits, vous pouvez s\u00e9lectionner Compact<\/em> dans la fen\u00eatre d’outil Meet the New UI<\/em> (ou plus tard dans Settings en recherchant \u00ab\u00a0new ui\u00a0\u00bb). Ce param\u00e8tre supprime certains espaces vides et des espaces tampons autour des \u00e9l\u00e9ments de l’interface.<\/p>\n

\n
\"\"<\/figure>\n<\/div>\n

Certains th\u00e8mes se distinguent par leur utilisation de la couleur et de la taille des \u00e9l\u00e9ments pour indiquer la hi\u00e9rarchie des informations.\u00a0<\/p>\n

Par exemple, le th\u00e8me Dark<\/em> a une barre gris fonc\u00e9 en haut pour les points d’entr\u00e9e courants vers des fonctionnalit\u00e9s telles que les actions VCS et les actions Run et un arri\u00e8re-plan noir pour l’\u00e9diteur.\u00a0<\/p>\n

\n
\"La<\/figure>\n<\/div>\n

Faisons maintenant le tour des petites particularit\u00e9s si appr\u00e9ciables de cette interface.\u00a0<\/p>\n

#1 \u2013 La barre d’outils principale<\/h2>\n

La barre d’outils<\/em> principale<\/em> est plus sobre que et sa disposition plus succincte, tout en conservant l’ensemble des fonctionnalit\u00e9s que vous connaissez et aimez. Il s’agit d’un guichet unique pour les informations relatives aux projets :<\/p>\n

\n
\"La<\/figure>\n<\/div>\n

Examinons-la en allant de gauche \u00e0 droite. Le premier point que je souhaite aborder est le widget Project<\/em>. C’est ici que vous pouvez voir le nom de votre projet actuel, naviguer entre vos projets r\u00e9cents, ouvrir les projets existants et en cr\u00e9er de nouveaux.<\/p>\n

\u00c0 droite du widget Project<\/em>, vous trouverez le widget VCS<\/em> . Il vous permet de voir rapidement l’\u00e9tat de votre projet dans le contr\u00f4le de version, notamment la branche et les \u00e9ventuelles modifications sortantes (indiqu\u00e9es en vert) ou entrantes (en bleu) ayant eu lieu :<\/p>\n

\n
\"\"<\/figure>\n<\/div>\n

Le widget VCS<\/em> se trouve juste \u00e0 c\u00f4t\u00e9 du nom du projet et constitue d\u00e9sormais un point d’entr\u00e9e clair pour les fonctionnalit\u00e9s li\u00e9es \u00e0 votre projet et au contr\u00f4le de version lorsque vous cliquez sur la fl\u00e8che de la liste d\u00e9roulante. Vous verrez beaucoup de ces \u00ab\u00a0points d’entr\u00e9e\u00a0\u00bb pour des groupes de fonctionnalit\u00e9 au fur et \u00e0 mesure de notre avanc\u00e9e dans la d\u00e9couverte de l’interface.<\/p>\n

Sur la droite, on trouve le widget Run<\/em> remani\u00e9, que je pr\u00e9senterai plus en d\u00e9tail dans la section suivante.<\/p>\n

Enfin, tout \u00e0 droite de la barre d’outils Main<\/em>, vous trouvez les ic\u00f4nes plus g\u00e9n\u00e9rales telles que Code With Me<\/a>, Search Everywhere et Settings. Si vous pr\u00e9f\u00e9rez utiliser votre souris, sachez que l’ic\u00f4ne engrenage de Settings<\/em> vous permet d’acc\u00e9der aux options de haut niveau que vous utiliserez probablement souvent, notamment Plugins, Theme, Keymap et View Mode. J’esp\u00e8re que vous n’aurez pas envie de le faire, mais c’est ici que vous pouvez aussi revenir \u00e0 l’interface utilisateur Classic !<\/p>\n

#2 \u2013 Le widget Run<\/h2>\n

Examinons plus en d\u00e9tail le widget de la barre d’outil Run<\/em>. La premi\u00e8re chose que vous remarquerez, ce sont les ic\u00f4nes, qui sont plus grandes et plus visibles. Elles vous donnent un retour visuel imm\u00e9diat sur l’\u00e9tat de votre application. Par exemple, avant que vous ex\u00e9cutiez ou d\u00e9boguiez votre application, votre widget Run<\/em> ressemble \u00e0 cela :<\/p>\n

\n
\"\"<\/figure>\n<\/div>\n

Si vous cliquez sur l’ic\u00f4ne Run, il deviendra comme ceci :<\/p>\n

\n
\"\"<\/figure>\n<\/div>\n

Vous voyez maintenant que votre application s’ex\u00e9cute et vous pouvez l’arr\u00eater et la relancer ou l’arr\u00eater compl\u00e8tement. Vous pouvez \u00e9galement cliquer sur l’ic\u00f4ne du d\u00e9bogage, qui vous demandera d’arr\u00eater l’application en cours d’ex\u00e9cution afin de pouvoir l’ex\u00e9cuter avec le d\u00e9bogueur de PyCharm.\u00a0<\/p>\n

Si vous ex\u00e9cutez l’application avec le d\u00e9bogueur de PyCharm, le widget se transformera en ceci :<\/p>\n

\n
\"\"<\/figure>\n<\/div>\n

Il vous est toujours possible d’acc\u00e9der \u00e0 toutes vos configurations d’ex\u00e9cution \u00e0 partir du menu d\u00e9roulant et de choisir le mode d’ex\u00e9cution pour chacune d’elles :<\/p>\n

\"Acc\u00e8s<\/figure>\n

La fonctionnalit\u00e9 pour la configuration d’ex\u00e9cution actuellement s\u00e9lectionn\u00e9e est \u00e9galement disponible \u00e0 partir du bouton \u00e0 trois points.\u00a0<\/p>\n

#3 \u2013 Les fen\u00eatres d’outils<\/h2>\n

La nouvelle interface utilisateur fournit de nouvelles ic\u00f4nes, une pr\u00e9sentation am\u00e9lior\u00e9e et la possibilit\u00e9 d’afficher davantage de fen\u00eatres d’outils \u00e0 tout moment. Les nouvelles ic\u00f4nes sont plus grandes et l’\u00e9cran moins charg\u00e9, vous trouvez ainsi beaucoup plus rapidement ce dont vous avez besoin.\u00a0<\/p>\n

Je vous montrerai comment personnaliser leur emplacement dans l’interface utilisateur afin de les trouver rapidement lorsque vous en avez besoin :<\/p>\n

\"Fen\u00eatres<\/figure>\n

Vous avez la possibilit\u00e9 de fractionner vos fen\u00eatres d’outils verticalement. Par exemple, dans la capture d’\u00e9cran ci-dessous, la fen\u00eatre d’outil Commit<\/em> se trouve sous la barre de s\u00e9paration horizontale. Vous pouvez glisser les fen\u00eatres d’outils sous le s\u00e9parateur pour les ouvrir dans une disposition de fractionnement vertical :<\/p>\n

\n
\"Fractionnement<\/figure>\n<\/div>\n

Vous pouvez \u00e9galement fractionner les fen\u00eatres d’outils sur le c\u00f4t\u00e9 droit de cette mani\u00e8re :<\/p>\n

\"Fractionnement<\/figure>\n

Enfin, si vous souhaitez fractionner vos fen\u00eatres d’outils en bas de l’\u00e9cran, de sorte que l’une se trouve \u00e0 gauche et l’autre \u00e0 droite, faites glisser la fen\u00eatre d’outil que vous souhaitez voir \u00e0 droite vers la barre de droite. Dans la capture d’\u00e9cran ci-dessous, j’ai fait glisser l’ic\u00f4ne de ma fen\u00eatre d’outil Problem vers la droite et je l’ai ouverte \u00e0 c\u00f4t\u00e9 de la fen\u00eatre d’outil Terminal :<\/p>\n

\"Fractionnement<\/figure>\n

Toutes les fen\u00eatres d’outils utilisent d\u00e9sormais des ic\u00f4nes monochromes, qui sont plus modernes et n’encombrent pas l’interface avec des informations superflues. Si vous voulez voir le nom et le raccourci clavier d’une fen\u00eatre d’outil, survolez son ic\u00f4ne. N’oubliez pas le raccourci pratique pour masquer toutes vos barres d’outils : \u2318\u21e7F12 (macOS), ou
Ctrl+Maj+F12 (Windows\/Linux).<\/p>\n

#4 \u2013 Les fen\u00eatres d’outils Run et Debug<\/h2>\n

Les fen\u00eatres d’outils Run<\/em> et Debug<\/em> sont d\u00e9sormais accessibles \u00e0 partir de l’onglet de la fen\u00eatre sur la gauche. L’avantage en termes de standardisation est que cela permet d’acc\u00e9der rapidement aux deux fen\u00eatres d’outils pour g\u00e9rer l’\u00e9tat de votre application.<\/p>\n

De plus, nous avons modifi\u00e9 la fen\u00eatre d’outil Debug<\/em> sur la base des statistiques afin que sa barre d’outils contienne les actions les plus utilis\u00e9es. Il est donc possible que certaines actions que vous avez l’habitude d’utiliser ne se trouvent plus l\u00e0 o\u00f9 vous attendiez \u00e0 les trouver ! Nous n’avons supprim\u00e9 aucune fonctionnalit\u00e9, elles restent toutes accessibles, mais vous remarquerez par exemple que l’ic\u00f4ne Evaluate Expression<\/em> a disparu.\u00a0<\/p>\n

Il y a encore nombreux moyens d’\u00e9valuer une expression. Vous pouvez :<\/p>\n

    \n
  • Appuyer sur \u2325F8 (macOS) ou Ctrl+F8 (Windows\/Linux)<\/li>\n
  • Utiliser Maj Maj (macOS\/Windows\/Linux) pour Search Everywhere, puis saisir \u00ab\u00a0evaluate expression\u00a0\u00bb<\/li>\n
  • S\u00e9lectionner Evaluate Expression<\/em> dans le menu contextuel du clic droit dans la fen\u00eatre d’outil Debug<\/em><\/li>\n<\/ul>\n

    La fen\u00eatre d’outil Debug<\/em> contient \u00e9galement un champ d\u00e9di\u00e9 \u00e0 l’\u00e9valuation :<\/p>\n

    \"Option<\/figure>\n

    En plus de ces changements, de nouveaux onglets permettent de basculer entre les vues Threads & Variables<\/em> et Console<\/em> s’il n’y a qu’une seule configuration en cours d’ex\u00e9cution.<\/p>\n

    \"L'onglet<\/figure>\n

    #5 \u2013 L’\u00e9diteur<\/h2>\n

    Nous avons apport\u00e9 \u00e0 l’\u00e9diteur plusieurs mises \u00e0 jour en lien avec les choix que nous avons faits en mati\u00e8re de design. Nous consid\u00e9rons ces mises jour comme des am\u00e9liorations importantes car les th\u00e8mes qui s’appliquent \u00e0 l’ensemble de l’interface utilisateur apportent une apparence plus fra\u00eeche, propre et professionnelle lorsque vous naviguez dans votre base de code.<\/p>\n

    Les th\u00e8mes Light et Dark offrent un meilleur contraste et une palette de couleurs coh\u00e9rente :<\/p>\n

    \n
    \"Th\u00e8me<\/figure>\n<\/div>\n

    L’iconographie dans l’\u00e9diteur a \u00e9galement \u00e9t\u00e9 revue, avec des formes et des couleurs plus distinctives. Vous verrez ces changements dans l’\u00e9diteur mais aussi dans l’ensemble de l’IDE. \u00c0 mon avis, cela a donn\u00e9 un bon coup de jeune \u00e0 PyCharm :<\/p>\n

    \"Ic\u00f4nes<\/figure>\n

    Les points d’arr\u00eat sont d\u00e9sormais plac\u00e9s au-dessus des num\u00e9ros de ligne, ce qui permet d’\u00e9conomiser de l’espace horizontal :<\/p>\n

    \"Configuration<\/figure>\n

    Si vous pr\u00e9f\u00e9rez que vos points d’arr\u00eat se trouvent \u00e0 c\u00f4t\u00e9 des num\u00e9ros de ligne, vous pouvez encore obtenir ce r\u00e9sultat en faisant un clic droit dans la goutti\u00e8re pour s\u00e9lectionner Appearance<\/em> > Breakpoints Over Line Numbers<\/em>.<\/p>\n

    La palette de couleurs des annotations pour Git Blame<\/em> a \u00e9t\u00e9 actualis\u00e9e. Plus la teinte est claire, plus la modification est ancienne. Inversement, plus la nuance est fonc\u00e9e, plus cette modification est r\u00e9cente :<\/p>\n

    \"Annotations<\/figure>\n

    R\u00e9sum\u00e9<\/h2>\n

    Pour finir, cet article ne serait pas complet s’il n’expliquait pas pourquoi nous avons d\u00e9cid\u00e9 de mettre \u00e0 jour l’interface des IDE JetBrains. Au cours de ces derni\u00e8res ann\u00e9es, nous avons recueilli de nombreux retours d’exp\u00e9rience qui nous ont appris que notre interface utilisateur (Classic) \u00e9tait associ\u00e9e \u00e0 des termes comme encombr\u00e9e<\/em>, d\u00e9mod\u00e9e<\/em> et peu attrayante sur le plan visuel<\/em>.\u00a0<\/p>\n

    Nous avons donc compris que nous devions modifier notre interface utilisateur, mais comment choisir son nouveau look ? Fondamentalement, nous avons commenc\u00e9 par impl\u00e9menter les sch\u00e9mas d’exp\u00e9rience utilisateur dont j’ai parl\u00e9 dans cet article de blog. et avons ensuite effectu\u00e9 plusieurs cycles de r\u00e9visions internes et externes rigoureux pour mettre \u00e0 jour l’interface en prenant en compte vos retours.\u00a0<\/p>\n

    C’est tout pour aujourd’hui. J’esp\u00e8re que cela vous a convaincu d’essayer la nouvelle interface utilisateur et que vous l’aimerez autant que moi ! Vous pouvez l’activer simplement \u00e0 partir du bouton Settings<\/em> situ\u00e9 en haut \u00e0 gauche de la fen\u00eatre de l’IDE et un lien dans Settings<\/em> vous permettra de nous faire part de vos retours\u00a0!<\/p>\n

    Auteur de l’article original en anglais<\/em> :<\/p>\n\n

    \n
    \n
    \n
    \n \"\"\n <\/div>\n
    \n <\/div>\n <\/div>\n <\/div>\n <\/div>\n","protected":false},"author":813,"featured_media":366961,"comment_status":"closed","ping_status":"closed","template":"","categories":[1401,601],"tags":[6992],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/pycharm\/365244"}],"collection":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/pycharm"}],"about":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/types\/pycharm"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/users\/813"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/comments?post=365244"}],"version-history":[{"count":8,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/pycharm\/365244\/revisions"}],"predecessor-version":[{"id":366986,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/pycharm\/365244\/revisions\/366986"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/media\/366961"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/media?parent=365244"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/categories?post=365244"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/tags?post=365244"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/cross-post-tag?post=365244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}