# 新樣式面板佈局部分和控件 ### 預覽新的佈局部分控件 我們正在增強「樣式」面板的佈局控件，以提升您的設計體驗。我們的目標是簡化設計工作流程、簡化決策並改善新舊 Webflow 使用者的整體體驗。 從 3 月 4 日開始，我們將開始逐步推出新的佈局控件，確保所有客戶順利過渡。我們很高興您能夠體驗這些增強功能，我們邀請您瀏覽這篇文章，深入了解這些變化、其動機以及它們將如何對您的工作流程產生積極影響。如需詳細概述並充分利用這些更新，請聯絡您的客戶成功經理。 ### 導航 總體而言，佈局部分更新的重點是使導航和可用性更加直觀。我們簡化了複雜的想法，例如柔性和網格，使用清晰的文字標籤和簡單的圖示來指示向左和向右等方向。這些更新有助於發現和應用最佳實踐。新的佈局部分簡化了對 Webflow 功能的訪問，簡化了學習過程並使使用者能夠更有效率地進行設計。 ### Display {% embed url="" %} 我們的研究表明，與圖示相比，文字標籤可以更有效地傳達區塊、Flex 和網格等概念，使其成為顯示控制項的首選。此外，我們將最具影響力的選項集中放置以方便訪問，並將其他選項移至下拉式選單。這種方法旨在減輕視覺開發人​​員的認知負擔，將主要顯示選項放在前面和中心，並透過下拉式選單促進對更具體控制的探索。 ### Flex {% embed url="" %} 我們引入了對齊框以及 X 和 Y 軸控件，以改善各種客戶的設計體驗 - 從具有設計背景的客戶到尋求精確控制的開發人員。 對齊框是設計師熟悉的模式，它提供了一種快速設定 Flex 和 grid 子項目對齊方式的視覺化方法。同時，X/Y 控制為經驗豐富的開發人員提供了詳細的選項，允許沿著主軸和橫軸進行明確的對齊。這種雙重方法確保所有用戶，無論其背景如何，都可以有效地利用 Flexbox 的功能，精確、輕鬆地實現他們想要的佈局。 ### Grid {% embed url="" %} 我們改進了 Webflow 的網格佈局選項，以增強設計靈活性，從全面的配置面板覆蓋轉變為樣式面板中簡化的、用戶友好的工作流程。 現在，當使用者選擇網格選項時，他們會看到一個用於設定行、列、方向和對齊方式的簡化介面。 UI 設計的這種演變保持了 Webflow 眾所周知的客製化深度，同時與其他樣式功能的直覺體驗更加緊密地結合在一起。 ### 間距 「樣式」面板的佈局控制現在具有精確的間隙控制，具有線性滑桿和手動輸入條目，可增強柔性和網格佈局中的間距調整。用於間隙樣式的滑桿可以透過即時視覺回饋更好地控制元素之間的間距，從而減少佈局優化所花費的時間並提供更精細的設計執行粒度。 ### 了解有關 Webflow 大學的更多信息 [將 flex 和 grid 子項與對齊框對齊](https://university.webflow.com/lesson/align-box) [Flexbox](https://university.webflow.com/lesson/intro-to-flexbox) [Grid](https://university.webflow.com/lesson/grid-2-0) [Layout Land](https://layout-land-production.webflow.io/) **標記你的日曆！我們的新佈局控制將於 3 月 4 日開始推出，為您提供更好的體驗。** 探索 Webflow University 的資源世界，其中包括詳細的指南、影片教學課程以及使用新控制項建立響應式 Web 佈局的實用技巧。對於此次發布，我們很高興推出新的學習體驗。 深入探索[Layout Land](https://layout-land-production.webflow.io/)，這是一次互動式學習冒險，讓建立網頁佈局變得既有趣又資訊豐富。 ![Layout Land充滿了引人入勝的互動課程和項目，將 Webflow 佈局控制項的強大功能帶入生活。 ](https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/65de175683c8235f5ff0c378_webflow-layout-land.png) 透過多種學習方式、保存在日曆上的日期以及隨時準備協助解決任何問題的專門客戶成功經理，我們希望使您的過渡盡可能順利。 透過此次發布，我們正在突破平易近人的網頁設計和功能的界限，為各個技能水平的創作者提供支援。探索 Webflow 的增強樣式面板，並使用新的佈局控制項釋放您的創作潛力。 *** March 4, 2024 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.tenten.co/docs-webflow/webflow-101/changelog/2024/xin-yang-shi-mian-ban-bu-ju-bu-fen-he-kong-jian.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.