ระบบการออกแบบฟลูเอนท์
แอปพลิเคชันจดบันทึกและเครื่องคิดเลข ในWindows 11
ชื่ออื่นๆ	ฟลูเอนท์ UI ระบบการออกแบบฟลูเอนท์ของ Microsoft
ผู้เขียนต้นฉบับ	ไมโครซอฟต์
นักพัฒนา	ไมโครซอฟต์
ปล่อย	2017 ( 2017 )
การเผยแพร่ เวอร์ชันเสถียร[±] เว็บ 8.122.15 / 15 เมษายน 2025 [ 1 ] ( 15 เมษายน 2568 ) วินโดวส์ 2.8.7 / 4 กุมภาพันธ์ 2025 [ 2 ] ( 4 กุมภาพันธ์ 2025 ) เวอร์ชันทดลองใช้งาน[±] แอนดรอยด์ 0.0.11 / 12 กุมภาพันธ์ 2021 [ 3 ] ( 12 กุมภาพันธ์ 2021 ) iOS macOS 0.2.3 / 9 มีนาคม 2021 [ 4 ] ( 9 มีนาคม 2021 ) วินโดวส์ 2.6.0-prerelease.210315002 / 17 มีนาคม 2021 [ 5 ] ( 17 มีนาคม 2021 ) ข้ามแพลตฟอร์ม 0.23.3 / 15 มีนาคม 2021 [ 6 ] ( 15 มีนาคม 2021 ) เขียนเป็น ออบเจ็กทีฟซี , ซี++ , ซี# , ไทป์สคริปต์ , โคทลิน , สวิฟต์ , เจสทรอปิคอล ระบบปฏิบัติการ แอนดรอยด์ , ไอโอเอส , แมคออสตา , วินโดวส์ , เว็บเบราว์เซอร์ แพลตฟอร์ม อาร์เอ็ม , x86-64 ผู้มาก่อน ภาษาการออกแบบของ Microsoft 2 Microsoft UI Fabric [ 7 ] [ 8 ] Office UI Fabric [ 9 ] [ 10 ] พิมพ์ ซอฟต์แวร์ภาษาออกแบบ ใบอนุญาต ใบอนุญาต MIT เว็บไซต์ developer.microsoft.com/fluentui​​​ ที่เก็บข้อมูล เว็บไซต์ : fluentui แอนดรอยด์ : fluentui-android iOS, macOS : fluentui-apple วินโดวส์ : microsoft-ui-xaml ใช้งานได้หลายแพลตฟอร์ม : fluentui-react-native
ข้อมูลเพิ่มเติม

ระบบการออกแบบ Fluent (รหัส " Project Neon ") ^{[ 11 ]}เป็นภาษาการออกแบบที่พัฒนาขึ้นในปี 2017 โดยMicrosoft Fluent Design เป็นการปรับปรุงใหม่ของMicrosoft Design Language 2 ("Metro") ซึ่งรวมถึงแนวทางสำหรับการออกแบบและการโต้ตอบที่ใช้ภายในซอฟต์แวร์ที่ออกแบบมาสำหรับอุปกรณ์และแพลตฟอร์ม Windows 10และWindows 11ของบริษัทระบบนี้ประกอบด้วยองค์ประกอบหลักห้าประการ ได้แก่ แสง ความลึก การเคลื่อนไหว วัสดุ และขนาด^{[ 12 ]}ภาษาการออกแบบใหม่นี้มีการใช้การเคลื่อนไหว ความลึก และเอฟเฟกต์ความโปร่งแสงที่โดดเด่นยิ่งขึ้น^{[ 13 ]}

การเปลี่ยนไปใช้ Fluent เป็นโครงการระยะยาว ลักษณะการออกแบบเริ่มปรากฏใน Windows 10 ตั้งแต่ "Fall Creators Update" ที่วางจำหน่ายในเดือนตุลาคม 2017 รวมถึงการอัปเดตซอฟต์แวร์ระบบ Xbox Oneที่วางจำหน่ายพร้อมกันด้วย^{[ 14 ] [ 15 ] [ 16 ] [ 17 ]}ต่อมาได้มีการเปิดเผยว่าได้รับการออกแบบร่วมกับWindows 10X [ ^{18 ]}นอกเหนือจากWindows 11ซึ่งมีการออกแบบที่คล้าย^{กัน[ 19 ]}

หลักการสำคัญหรือ "บล็อก" ของ Fluent (แสง ความลึก การเคลื่อนไหว วัสดุ และขนาด) แตกต่างจากแนวคิดแบบแบน ที่ Metroกำหนดไว้ และในขณะที่ยังคงรักษารูปลักษณ์และความรู้สึกที่สะอาดตาที่ Metro นำเสนอ Fluent ได้ปรับปรุงภาพลักษณ์ของAeroซึ่งเป็นแนวทางการออกแบบที่เปิดตัวในWindows VistaและWindows 7รวมถึงความโปร่งแสงที่เบลอ รูปแบบภาพเคลื่อนไหวแบบพาราแลกซ์ เงาตกกระทบ เอฟเฟกต์ไฮไลต์ตามการเคลื่อนไหวของตัวชี้เมาส์หรือท่าทางอินพุต และ "วัสดุปลอม" ที่ Metro เคยละทิ้งไป^{[ 20 ]}

แอโร่

เมโทร

คล่องแคล่ว

ไอคอนโดยทั่วไปก็แตกต่างกันด้วย โดย Fluent จะไม่แบนราบและเรียบง่ายเหมือน Metro

ไอคอนเครื่องคิดเลขของ Windows

ระบบปฏิบัติการ Windows 8.1 ( เมโทร )

วินโดวส์ 10 ( MDL2 )

Windows 10 (ตั้งแต่เวอร์ชัน 2004 ) และ Windows 11 ( Fluent )

แสงสว่าง เปิดเผยไฮไลท์ เปิดเผยจุดสนใจ

จุดประสงค์ของแสงคือการดึงดูดความสนใจและส่องสว่างข้อมูล ดังนั้นแสงจึงสร้างความสัมพันธ์ระหว่าง UI และเคอร์เซอร์หรือตัวชี้^{[ 21 ]}

• การเปิดเผยไฮไลต์:เมื่อวางเมาส์เหนือไฮไลต์ การเปิดเผยไฮไลต์จะส่องสว่างขอบที่ซ่อนอยู่ใกล้เคียงบนวัตถุ เช่น รายการ เมนูนำทางแฮมเบอร์เกอร์และปุ่มต่างๆ เมื่อเลือก เช่น โดยการคลิกหรือแตะ เอฟเฟกต์การส่องสว่างเป็นวงกลมสีขาวจะปรากฏขึ้นอย่างรวดเร็ว^{[ 21 ] [ 22 ]}
• เปิดเผยจุดโฟกัส:รายการที่สามารถโฟกัสได้พร้อมแสงเรืองรอบขอบผ่านภาพโฟกัส^{[ 23 ]}

ใน WinUI 2.6 ไมโครซอฟต์ได้ยกเลิกการเน้นการเปิดเผยเพื่อให้ตรงกับข้อเสนอเว็บและมือถือของพวกเขา ซึ่งไม่มีการเน้นการเปิดเผย^{[ 24 ]}นอกจากนี้ ด้วยการเปิดตัว Windows 11 ไมโครซอฟต์ได้ค่อยๆ ลบการใช้เอฟเฟกต์แสงโดยทั่วไปออกไป โดยหันมาใช้การโต้ตอบผ่านแอนิเมชันแทน^{[ 24 ]}

ความลึกถูกเพิ่มเข้าไปในเนื้อหาผ่านการวางซ้อนในแกน z ความลึกถูกนำเสนอผ่านเงาตกกระทบและการวางซ้อนความลึกในแกน Z ^{[ 25 ] [ 26 ]}สิ่งนี้เห็นได้ชัดเจนเป็นพิเศษในแอป Office ที่ได้รับการออกแบบใหม่ในปี 2019 ใน Windows 11 การใช้ความลึกได้รับการขยายโดยการซ้อนทับพื้นผิวต่างๆ ที่มีความทึบแสงต่างกันของวัสดุ Mica

• การแบ่งชั้น:การแบ่งชั้นจะแบ่งแอปออกเป็นฐานซึ่งเป็น "ผืนผ้าใบ" และเนื้อหาที่ลอยอยู่ด้านบน เนื้อหาสามารถนำเสนอเป็นพื้นผิวต่อเนื่องหรือเป็นการ์ดก็ได้^{[ 27 ]}
• การยกสูง:การยกสูงคือการใช้การแยกองค์ประกอบออกจากพื้นผิวแอปโดยใช้เงา ตัวอย่างเช่นเมนูบริบทป๊อปอัพ หรือ คำ แนะนำเครื่องมือ^{[ 27 ]}

การเคลื่อนไหวสร้างความสัมพันธ์ระหว่างองค์ประกอบ UI และมอบความต่อเนื่องในประสบการณ์^{[ 28 ]}

• เพิ่ม/ลบแอนิเมชัน:แสดงรายการแอนิเมชันสำหรับการแทรกและการลบรายการออกจากคอลเลกชัน^{[ 29 ]}
• แอนิเมชันที่เชื่อมต่อ:แอนิเมชันที่เชื่อมต่อคือการเปลี่ยนรายการ ในระหว่างการเปลี่ยนแปลงเนื้อหา องค์ประกอบจะปรากฏว่ายังคงเคลื่อนที่ต่อไปโดยบินข้ามแอป^{[ 30 ]}
• การเปลี่ยนเนื้อหา:ใช้เมื่อเนื้อหาบางส่วนบนหน้าเว็บจะเปลี่ยนแปลงเท่านั้น^{[ 29 ]}
• การเจาะลึก:การเจาะลึกจะใช้เมื่อนำทางไปยังส่วนต่างๆ ของแอปที่ลึกขึ้น ตัวอย่างเช่น การแสดงข้อมูลเพิ่มเติมหลังจากเลือกรายการ^{[ 31 ]}
• เฟด:เฟดอินและเฟดเอาท์เพื่อนำรายการเข้ามาและซ่อนรายการออกจากมุมมอง^{[ 29 ]}
• พาราแลกซ์:พาราแลกซ์ทำให้วัตถุเคลื่อนที่ด้วยอัตราที่แตกต่างกัน พื้นหลังเคลื่อนที่ช้ากว่าเนื้อหาด้านบน ตัวอย่างเช่น รายการจะเลื่อนเร็วกว่าภาพพื้นหลัง ทำให้เกิดเอฟเฟกต์ความลึกนอกเหนือจากการเคลื่อนไหว^{[ 32 ]}
• การตอบสนองเมื่อกด:เมื่อกดรายการ รายการนั้นจะถอยกลับไปด้านหลังชั่วครู่แล้วกลับไปยังตำแหน่งเดิม ตัวอย่างของการตอบสนองเมื่อกด ได้แก่ไทล์สดของเมนูเริ่มต้น การดำเนินการด่วน ของศูนย์ปฏิบัติการและปุ่มแถบที่อยู่ของMicrosoft Edge ^{[ 33 ]}

วัสดุ อะคริลิก ไมกา ควัน วัสดุต่างๆ ที่ใช้ใน Fluent Design

วัสดุคือเอฟเฟกต์ภาพที่ใช้กับพื้นผิว UX ในการออกแบบที่ลื่นไหลมีวัสดุหลักสองประเภท ได้แก่ วัสดุที่บดบังและวัสดุโปร่งใส วัสดุที่บดบัง เช่น อะคริลิกและไมกา จะสร้างชั้นฐานใต้ส่วนประกอบ UI แบบโต้ตอบ วัสดุโปร่งใส เช่น ควัน ใช้เพื่อเน้นพื้นผิวที่ดื่มด่ำ: ^{[ 34 ]}

• อะคริลิก:วัสดุอะคริลิกสร้างเอฟเฟกต์โปร่งแสง เบลอ และมีเอฟเฟกต์คล้ายสัญญาณรบกวนเล็กน้อย ใน Windows 10 นั้น อะคริลิกถูกใช้ในพื้นผิวขนาดใหญ่ (เช่น แผงด้านข้าง) แต่ใน Windows 11 พื้นผิวหลักได้เลิกใช้อะคริลิกและหันมาใช้ไมกาแทน ส่วนอะคริลิกจะถูกใช้ในพื้นผิวชั่วคราว เช่นเมนูบริบทคำแนะนำหรือการคาดการณ์ในช่องค้นหา
• ไมกา:ไมกาเป็นวัสดุทึบแสงชนิดใหม่ที่เปิดตัวใน Windows 11 ซึ่งรับเอาสีของวอลเปเปอร์ของผู้ใช้^{[ 35 ]}ต่างจากอะคริลิกซึ่งออกแบบมาสำหรับพื้นผิวชั่วคราว (เช่น เมนูบริบท) MMC ได้รับการออกแบบมาเพื่อใช้บนพื้นผิวหลักที่คงอยู่ยาวนาน การใช้ความทึบแสงที่แตกต่างกันทำให้แอปสามารถสร้างลำดับชั้นทางภาพได้
• ควัน:ควันถูกนำมาใช้ใน Windows 11 โดยมีพื้นหลังสีดำโปร่งแสง ไม่ว่าจะอยู่ในโหมดสว่างหรือมืด เพื่อสร้างลำดับชั้นระหว่างหน้าต่างหลักและหน้าต่างป๊อปอัพ^{[ 34 ]}

ทั้ง Acrylic และ Mica จะถูกปิดใช้งานในหน้าต่างเฉพาะเมื่อไม่ได้เลือกแอปอีกต่อไป นอกจากนี้ ทั้งสองจะถูกปิดใช้งานทั่วทั้งระบบเมื่อปิดใช้งานความโปร่งใส เมื่อเปิดใช้งานโหมดประหยัดแบตเตอรี่ หรือบนฮาร์ดแวร์ระดับล่าง Acrylic ในพื้นหลังจะถูกปิดใช้งานเมื่อไม่ได้เลือกหน้าต่าง หรือใน โหมด Windows 10 Mobile , HoloLensหรือแท็บเล็ต^{[ 36 ]}

แอปจะปรับขนาดตามฟอร์มแฟคเตอร์และขนาดหน้าจอที่ แตกต่างกัน ^{[ 37 ]}การควบคุมที่คำนึงถึงยังถูกจัดอยู่ในหมวดหมู่การปรับขนาด (เช่น แถบเลื่อนและอินพุตที่ปรับให้เข้ากับวิธีการเรียกใช้ที่แตกต่างกัน) ^{[ 38 ] [ 39 ]}

ไอคอนใหม่ที่ทำจากวัสดุอะคริลิกถูกสร้างขึ้นสำหรับโปรแกรมของ Microsoft โดยเริ่มจาก แอป OfficeและMicrosoft Edgeที่ใช้Chromiumในปี 2018 และ 2019 ตามลำดับ^{[ 40 ] [ 41 ] [ 42 ]}เวอร์ชันเบื้องต้นของไอคอนสุดท้ายถูกพบในวิดีโอ "พบกับไอคอนใหม่สำหรับOffice 365 " ^{[ 43 ]}ก่อนที่จะพบเพิ่มเติมเมื่อมีการเปิดตัว Windows 10X ^{[ 44 ]}ก่อนที่จะเปิดตัวอย่างเป็นทางการในวันที่ 12 ธันวาคม 2019 ^{[ 45 ]}ไอคอนเหล่านี้เริ่มปรากฏผ่าน การ ^อัป เดตแอปเหล่านั้นใน Microsoft Storeโดยเริ่มจากMailและCalendar ^{[ 46 ]} [ ^{47 ]}

เอ็มดีแอล2

คล่องแคล่ว

ไอคอน Segoe Fluent ประกอบด้วยชุดไอคอนที่ออกแบบโดย Microsoft เพื่อใช้ในผลิตภัณฑ์และบริการของบริษัท ควบคู่ไปกับการออกแบบใหม่ของ ฟอนต์ Segoe UI (Segoe UI Variable) ^{[ 48 ]}ไอคอนเหล่านี้มีลักษณะโค้งมน ซึ่งแตกต่างจากไอคอน Segoe MDL2 ที่เป็นเหลี่ยมและตรงซึ่งเป็นที่นิยมในยุค Windows 10 ^{[ 49 ]}

คล่องแคล่ว

เมื่อวันที่ 15 กรกฎาคม 2021 ไมโครซอฟต์ได้ประกาศการออกแบบไลบรารีอีโมจิ ใหม่ทั้งหมด เพื่อให้สอดคล้องกับการออกแบบ Fluent Design ^{[ 50 ]}โดยมีเป้าหมายเพื่อให้ Windows มีความสม่ำเสมอและเข้าถึงได้ง่ายที่สุด ไมโครซอฟต์ได้เปิดเผย อีโมจิมากกว่า 1,500 รายการเป็นโอเพนซอร์ส เมื่อวันที่ 10 สิงหาคม 2022 ^{[ 51 ] [ 52 ]}อีโมจิ Fluent ใหม่เหล่านี้แตกต่างจากรูปแบบแบนและมีเส้นขอบของไลบรารีอีโมจิรุ่นก่อนหน้าที่ใช้ใน Windows 10 และหันมาใช้รูปแบบ 3 มิติคล้าย ดิน น้ำมันแทน ^{[ 50 ]}นอกจากนี้ ไมโครซอฟต์ยังได้ระบุแผนการที่จะสร้างแอนิเมชั่นให้กับอีโมจิส่วนใหญ่^{[ 53 ]}แม้ว่าอีโมจิแอนิเมชั่น 3 มิติจะสามารถเห็นได้ในแอปต่างๆ เช่นMicrosoft TeamsและSkypeแต่ Windows 11 ในช่วงแรกใช้แบบแบน และการเปิดตัวอย่างเต็มรูปแบบถูกเลื่อนออกไปจนถึงปี 2023 ^{[ 54 ]}

แนวทางการออกแบบ Fluent เป็นแบบข้ามแพลตฟอร์มและสามารถนำไปใช้กับเฟรมเวิร์กต่างๆ ได้^{[ 55 ]} Fluent UI React เป็นชุด คอมโพเนนต์ Reactที่ใช้ระบบการออกแบบ Fluent ของ Microsoft โดยมีชุดคอมโพเนนต์สำเร็จรูปที่สามารถใช้สร้างแอปพลิเคชันสำหรับWindows , iOS , Android , macOSและเว็บ ได้ นอกจากนี้WinUIยังเป็น เฟรม เวิร์กอินเทอร์เฟซผู้ใช้ แบบเนทีฟ สำหรับการสร้างแอป Windows โดยสร้างขึ้นบนระบบการออกแบบ Fluent และมีชุดควบคุมสำเร็จรูป^{[ 56 ]}

วินยูไอ			ฟลูเอนท์ UI
วินยูไอ 2	วินยูไอ 3		Fluent UI React v9	ส่วนประกอบเว็บ
ยูดับบลิวพี	ยูดับบลิวพี	วิน32	ปฏิกิริยา	เบลเซอร์
WinUI 2เป็นไลบรารีของตัวควบคุมและสไตล์สำหรับการสร้างแอป Windows ที่ทันสมัย ​​สามารถใช้งานได้ในแอป UWP ใดๆ และนำเสนอตัวควบคุมที่น่าตื่นเต้น ยืดหยุ่น และทันสมัย ​​เช่น NavigationView และ TeachingTip [ 11 ]	WinUI 3เป็นเฟรมเวิร์ก WinUI รุ่นต่อไป มาพร้อมกับ Windows App SDK WinUI 3 ขยาย WinUI ให้เป็นเฟรมเวิร์ก UX เต็มรูปแบบและมีชุด API และเครื่องมือที่เป็นหนึ่งเดียว[ 57 ]		Fluent UI React v9เป็นเวอร์ชันเสถียรล่าสุดของ Fluent UI React และมีชุดยูทิลิตี้ คอมโพเนนต์ React และคอมโพเนนต์เว็บสำหรับการสร้างเว็บแอปพลิเคชัน[ 58 ] Fluent UI React v9 พยายามทำให้ตัวเองมีความคล่องตัวเหมือนกับWinUI [ 59 ]	ส่วนประกอบเว็บคือชุด API ของแพลตฟอร์มเว็บที่อนุญาตให้คุณสร้างแท็ก HTML แบบกำหนดเองที่สามารถนำกลับมาใช้ใหม่ได้และห่อหุ้มไว้เพื่อใช้ในเว็บเพจและเว็บแอป[ 60 ] [ 61 ]
องค์ประกอบ UI ที่ใช้ WinUI			องค์ประกอบ UI ที่ใช้ Fluent UI React v9	องค์ประกอบ UI ที่ใช้เว็บคอมโพเนนต์

ความนิยมของระบบการออกแบบ Fluent Design ส่งผลต่อการออกแบบส่วนติดต่อผู้ใช้และโลโก้โดยทั่วไป โดยเฉพาะอย่างยิ่งในช่วงทศวรรษ 2020 หลังจากการเปิดตัวWindows 11 ของบริษัท เองและmacOS Big SurของAppleระบบนี้ได้เป็นผู้นำรูปแบบที่เรียกว่า " glassmorphism " (คำผสมระหว่าง glass และskeuomorphism ) ซึ่งเข้ามาแทนที่องค์ประกอบของการออกแบบแบบเรียบในงานออกแบบดิจิทัล^{[ 62 ] [ 63 ]}

• อัดไวตะ
• ลิควิด กลาส
• อควา
• การออกแบบวัสดุ
• ดีไซน์เรียบง่าย
• วินโดวส์ เอโร
• เมโทร

• เว็บไซต์อย่างเป็นทางการ
• "การออกแบบและเขียนโค้ดแอป UWP"ไมโครซอฟต์ 5 พฤศจิกายน 2024
• Gusmorino, Paul; Ostojic, Bojana (8 พฤษภาคม 2017). "แนะนำ Fluent Design" . Channel 9 . MSDN.