Fluent 2

معرفی و داستان شکل‌گیری

Fluent 2 نسل جدید دیزاین‌سیستم مایکروسافت است که برای ایجاد تجربه‌ای یکپارچه در محصولات گسترده این شرکت شکل گرفته است. این سیستم در محصولاتی مانند Microsoft 365، Teams، Outlook و دیگر سرویس‌های مایکروسافت به کار می‌رود و تلاش می‌کند زبان مشترکی میان محصولات، پلتفرم‌ها و تیم‌های مختلف ایجاد کند.

نسخه اولیه Fluent Design با هدف عبور از رابط‌های کاملاً تخت و ایجاد تجربه‌ای طبیعی‌تر معرفی شد. مفاهیمی مانند نور، عمق، حرکت، متریال و مقیاس، بخش مهمی از زبان بصری آن را تشکیل می‌دادند. Fluent 2 ادامه این مسیر است، اما تمرکز بیشتری بر سادگی، انعطاف‌پذیری، دسترس‌پذیری و هماهنگی میان طراحی و توسعه دارد.

مایکروسافت محصولات متنوعی برای کاربران شخصی، سازمانی و حرفه‌ای دارد که روی وب، ویندوز، iOS و Android اجرا می‌شوند. یکی از چالش‌های اصلی Fluent ایجاد هماهنگی میان این محصولات، بدون نادیده‌گرفتن ویژگی‌های بومی هر پلتفرم است. به همین دلیل Fluent 2 به‌جای تحمیل یک ظاهر کاملاً یکسان، مجموعه‌ای از اصول، Tokenها و کامپوننت‌های مشترک را ارائه می‌دهد که می‌توانند با محیط و دستگاه کاربر هماهنگ شوند.

فلسفه و اصول طراحی

Fluent 2 بر چهار اصل اصلی استوار است: طبیعی‌بودن در هر پلتفرم، حفظ تمرکز، طراحی برای همه و ایجاد هویتی که به‌وضوح متعلق به مایکروسافت باشد.

اصل «طبیعی در هر پلتفرم» بر این ایده تأکید دارد که تجربه باید با دستگاه و محیط کاربر هماهنگ باشد. یک محصول مایکروسافت می‌تواند هویت مشترکی در ویندوز، وب، iOS و Android داشته باشد، اما لازم نیست در تمام این پلتفرم‌ها دقیقاً یکسان به نظر برسد یا رفتار کند. استفاده از الگوها و کامپوننت‌های بومی هر پلتفرم باعث می‌شود تجربه برای کاربر آشنا و قابل پیش‌بینی باشد.

اصل «ساخته‌شده برای تمرکز» تلاش می‌کند رابط کاربری را از شلوغی و عناصر غیرضروری دور نگه دارد. بسیاری از محصولات مایکروسافت برای انجام کارهای حرفه‌ای و مدیریت حجم زیادی از اطلاعات استفاده می‌شوند؛ بنابراین رابط باید سلسله‌مراتب مشخصی داشته باشد و کاربر را بدون ایجاد مزاحمت به سمت اقدام بعدی هدایت کند.

اصل «یکی برای همه و همه برای یکی» بازتاب رویکرد مایکروسافت به Inclusive Design است. در این رویکرد، طراحی برای افراد با توانایی‌ها، نیازها و شرایط متفاوت از ابتدای فرایند در نظر گرفته می‌شود. هدف تنها رفع نیاز یک گروه مشخص نیست؛ زیرا راه‌حلی که برای یک محدودیت طراحی می‌شود، می‌تواند تجربه افراد بیشتری را بهبود دهد.

اصل چهارم، ساخت تجربه‌ای است که به‌وضوح هویت مایکروسافت را داشته باشد. این هویت از طریق رنگ، تایپوگرافی، آیکن‌ها، تصاویر، حرکت و جزئیات تعاملی ایجاد می‌شود. Fluent تلاش می‌کند میان شخصیت برند و سادگی موردنیاز محصولات کاربردی تعادل برقرار کند.

زبان بصری

زبان بصری Fluent 2 تمیز، کاربردی و نسبتاً خنثی است. این ویژگی باعث می‌شود سیستم بتواند در محصولات متنوعی، از ابزارهای ارتباطی تا نرم‌افزارهای پیچیده سازمانی، مورد استفاده قرار گیرد. رنگ، تایپوگرافی، فاصله‌گذاری، شکل، Elevation و حرکت همگی براساس Tokenهای مشترک تعریف می‌شوند.

رنگ‌ها در Fluent تنها به مجموعه‌ای از مقادیر ثابت محدود نیستند. رنگ‌های خنثی بخش بزرگی از سطوح و ساختار رابط را تشکیل می‌دهند و رنگ‌های برند یا Accent برای تأکید، تعامل و نمایش وضعیت استفاده می‌شوند. سیستم رنگی Fluent از تم روشن، تم تاریک، حالت High Contrast و تم‌های اختصاصی برند پشتیبانی می‌کند.

Fluent از دو لایه اصلی Design Token استفاده می‌کند. Global Tokenها مقادیر پایه‌ای مانند کد رنگ، اندازه فونت، فاصله، شعاع گوشه، ضخامت خطوط و ویژگی‌های انیمیشن را نگه می‌دارند. در لایه بعدی، Alias Tokenها به این مقادیر معنای کاربردی می‌دهند و مشخص می‌کنند هر مقدار در چه موقعیتی استفاده شود. این ساختار باعث می‌شود تیم‌ها بدون وابستگی مستقیم به مقادیر خام، رابطی هماهنگ و قابل تغییر ایجاد کنند.

تایپوگرافی در Fluent 2 با هدف ایجاد خوانایی و سلسله‌مراتب واضح طراحی شده است. نقش‌های تایپوگرافی از متن‌های کوچک رابط تا عنوان‌های بزرگ را پوشش می‌دهند و ویژگی‌هایی مانند اندازه، وزن و فاصله خطوط را به‌شکل سیستماتیک تعریف می‌کنند. Segoe UI فونت اصلی بسیاری از تجربه‌های مایکروسافت است، اما نوع فونت می‌تواند براساس پلتفرم، زبان یا نیاز محصول تغییر کند.

شکل‌ها در Fluent 2 معمولاً ساده و کنترل‌شده هستند. گوشه‌های گرد، خطوط ظریف و سطوح لایه‌ای، ظاهر دوستانه‌تری نسبت به رابط‌های قدیمی و کاملاً صنعتی مایکروسافت ایجاد می‌کنند. Elevation و سایه برای نمایش رابطه میان سطوح، عناصر شناور و لایه‌های موقت استفاده می‌شوند و نباید صرفاً نقش تزئینی داشته باشند.

حرکت نیز برای توضیح ارتباط میان وضعیت‌ها، ارائه بازخورد و حفظ پیوستگی تجربه به کار می‌رود. انیمیشن‌ها معمولاً کوتاه و هدفمند هستند تا تمرکز کاربر را مختل نکنند. در محصولاتی که برای انجام کارهای روزمره و پرتکرار طراحی شده‌اند، سرعت و پیش‌بینی‌پذیری تعامل اهمیت بیشتری از نمایش‌های بصری پیچیده دارد.

کامپوننت‌ها و الگوهای طراحی

Fluent 2 مجموعه گسترده‌ای از کامپوننت‌های رابط کاربری را ارائه می‌دهد؛ از عناصر پایه‌ای مانند Button، Checkbox، Radio Button، Switch و Input گرفته تا کامپوننت‌های پیچیده‌تری مانند Data Grid، Combobox، Dialog، Drawer، Menu، Popover، Tab و Toolbar.

کامپوننت‌ها تنها براساس ظاهر تعریف نشده‌اند و مستندات آن‌ها کاربرد، انواع، حالت‌ها، رفتار تعاملی، محتوا و ملاحظات دسترس‌پذیری را نیز پوشش می‌دهد. این موضوع برای محصولات سازمانی اهمیت زیادی دارد؛ زیرا چنین محصولاتی معمولاً با فرم‌ها، جدول‌ها، فیلترها، دستورات متعدد و حجم زیادی از داده سروکار دارند.

Fluent 2 برای پلتفرم‌های Web، iOS، Android و Windows منابع و کامپوننت‌های متفاوتی دارد. هدف این نیست که یک کامپوننت در تمام پلتفرم‌ها دقیقاً یکسان باشد، بلکه باید ضمن حفظ زبان مشترک Fluent، با استانداردهای محیط مقصد نیز سازگار شود.

یکی از بخش‌های مهم Fluent، پشتیبانی از تجربه‌های متراکم و داده‌محور است. بسیاری از دیزاین‌سیستم‌ها بیشتر برای رابط‌های مصرفی و صفحات ساده بهینه شده‌اند، اما Fluent برای ابزارهای بهره‌وری، داشبوردها، پنل‌های مدیریتی و نرم‌افزارهای سازمانی نیز مجموعه مناسبی از الگوها و کامپوننت‌ها ارائه می‌دهد.

تجربه استفاده و شخصی‌سازی

Fluent 2 برای تیم‌هایی که به ارتباط نزدیک میان طراحی و توسعه نیاز دارند، ساختار مناسبی دارد. UI Kitهای رسمی فیگما، کتابخانه‌های کدنویسی و مستندات کامپوننت‌ها باعث می‌شوند طراحان و توسعه‌دهندگان بتوانند درباره اجزای رابط، حالت‌ها و Tokenها زبان مشترکی داشته باشند.

در بخش توسعه وب، Fluent UI React مجموعه‌ای از کامپوننت‌های آماده را ارائه می‌دهد که براساس Fluent 2 ساخته شده‌اند. پیاده‌سازی‌های جداگانه‌ای نیز برای پلتفرم‌های دیگر وجود دارد. بااین‌حال، دامنه و میزان بلوغ کامپوننت‌ها ممکن است در تمام پلتفرم‌ها دقیقاً برابر نباشد و تیم‌ها باید پیش از انتخاب سیستم، کتابخانه فنی موردنظر خود را بررسی کنند.

ساختار Tokenمحور Fluent امکان ایجاد تم‌های اختصاصی را فراهم می‌کند. تیم‌ها می‌توانند رنگ برند، تایپوگرافی، شکل و دیگر ویژگی‌های بصری را تغییر دهند، بدون اینکه تمام کامپوننت‌ها را از ابتدا طراحی کنند. پشتیبانی از Light، Dark و High Contrast نیز در همین ساختار قرار گرفته است.

بااین‌حال، شخصی‌سازی عمیق Fluent به شناخت رابطه میان Global Tokenها، Alias Tokenها و Tokenهای داخلی کامپوننت‌ها نیاز دارد. تغییر مستقیم مقادیر در سطح هر کامپوننت می‌تواند هماهنگی سیستم را کاهش دهد. بهتر است تغییرات اصلی در لایه تم و Tokenها انجام شوند و فقط در موارد ضروری، ظاهر یک کامپوننت به‌صورت اختصاصی تغییر کند.

دسترس‌پذیری و RTL

دسترس‌پذیری یکی از مهم‌ترین بخش‌های Fluent 2 است. مایکروسافت اعلام می‌کند کامپوننت‌های این سیستم برای دستیابی به استانداردهای WCAG 2.1 سطح AA طراحی شده‌اند و مستندات Fluent دستورالعمل‌هایی برای کنتراست، ساختار محتوا، پیمایش با صفحه‌کلید، مدیریت فوکوس و فناوری‌های کمکی ارائه می‌دهد.

رابط باید ساختار و سلسله‌مراتب قابل درکی داشته باشد و Headingها به ترتیب منطقی استفاده شوند. وضعیت Focus باید همیشه قابل مشاهده باشد و پس از بسته‌شدن عناصری مانند Dialog یا Popover، فوکوس نباید گم شود. این موضوع در محصولات سازمانی که کاربران ممکن است بخش زیادی از کار خود را با صفحه‌کلید انجام دهند، اهمیت ویژه‌ای دارد.

Fluent همچنین بر Responsive بودن رابط و امکان Reflow محتوا هنگام بزرگ‌نمایی تأکید دارد. متن و اجزای رابط نباید با افزایش اندازه یا Zoom بریده شوند و اطلاعات نباید تنها از طریق رنگ، تصویر یا صدا منتقل شوند. تصاویر به متن جایگزین، ویدئوها به زیرنویس و تعاملات پیچیده به توضیحات قابل استفاده برای فناوری‌های کمکی نیاز دارند.

کتابخانه‌های Fluent می‌توانند در رابط‌های راست‌به‌چپ استفاده شوند، اما کیفیت نهایی RTL به پلتفرم و نحوه پیاده‌سازی وابسته است. جهت صفحه، ترتیب عناصر، Alignment، حرکت Focus و موقعیت کامپوننت‌های شناور باید در حالت RTL بررسی شوند.

برای محصولات فارسی، تغییر جهت کلی صفحه کافی نیست. تایپوگرافی فارسی، ترکیب متن فارسی و انگلیسی، نمایش اعداد، جدول‌های داده، نمودارها، Breadcrumbها، آیکن‌های جهت‌دار و کامپوننت‌هایی مانند Date Picker باید جداگانه آزمایش شوند. Fluent پایه فنی مناسبی فراهم می‌کند، اما یک محصول فارسی همچنان به مجموعه‌ای از قواعد بومی و مستندات اختصاصی نیاز دارد.

نقاط قوت و محدودیت‌ها

یکی از مهم‌ترین نقاط قوت Fluent 2، مناسب‌بودن آن برای محصولات پیچیده و سازمانی است. تنوع کامپوننت‌ها، توجه به مدیریت داده، پیمایش با صفحه‌کلید و سناریوهای حرفه‌ای باعث می‌شود Fluent برای داشبوردها، پنل‌های مدیریتی و ابزارهای بهره‌وری انتخاب مناسبی باشد.

ساختار دقیق Design Tokenها، پشتیبانی از تم‌های مختلف و ارتباط میان منابع طراحی و کتابخانه‌های کدنویسی از دیگر مزایای آن هستند. توجه جدی به Inclusive Design و دسترس‌پذیری نیز Fluent را به مرجع ارزشمندی برای تیم‌هایی تبدیل می‌کند که می‌خواهند این ملاحظات را از ابتدای فرایند وارد محصول کنند.

در مقابل، گستردگی سیستم می‌تواند یادگیری و شخصی‌سازی آن را برای تیم‌های کوچک دشوار کند. تعدد کتابخانه‌ها، نسخه‌ها و پیاده‌سازی‌های پلتفرمی ممکن است باعث سردرگمی شود و همیشه تمام کامپوننت‌ها در تمام محیط‌ها از نظر ویژگی و زمان انتشار یکسان نیستند.

ظاهر پیش‌فرض Fluent نیز ارتباط زیادی با محصولات مایکروسافت دارد. استفاده مستقیم و بدون شخصی‌سازی می‌تواند باعث شود محصول به Microsoft 365 یا ابزارهای سازمانی این شرکت شباهت پیدا کند. برای برندهایی با هویت بصری متفاوت، تغییر هدفمند رنگ، تایپوگرافی، تصاویر و شیوه ترکیب کامپوننت‌ها ضروری است.

جمع‌بندی و درس‌های طراحی

Fluent 2 برای محصولات سازمانی، ابزارهای بهره‌وری، پنل‌های مدیریتی و تجربه‌هایی که باید روی چند پلتفرم اجرا شوند، انتخاب قدرتمندی است. تیم‌هایی که با حجم زیادی از داده، فرم‌های پیچیده، جدول‌ها و تعاملات پرتکرار سروکار دارند، می‌توانند از ساختار و کامپوننت‌های آن استفاده زیادی ببرند.

یکی از مهم‌ترین درس‌های Fluent 2، جداسازی مقادیر خام از کاربرد معنایی آن‌هاست. ساختار دولایه Global و Alias Token نشان می‌دهد که یک دیزاین‌سیستم مقیاس‌پذیر نباید کامپوننت‌ها را مستقیماً به کد رنگ، اندازه یا فاصله ثابت وابسته کند.

درس دیگر، ایجاد تعادل میان هویت مشترک و رفتار بومی هر پلتفرم است. محصولات می‌توانند به یک خانواده تعلق داشته باشند، بدون اینکه در تمام دستگاه‌ها کاملاً یکسان طراحی شوند. حفظ الگوهای آشنا و استفاده از قابلیت‌های هر پلتفرم می‌تواند تجربه طبیعی‌تری ایجاد کند.

در نهایت، Fluent 2 نشان می‌دهد دسترس‌پذیری نباید یک مرحله جداگانه در پایان طراحی باشد. ساختار محتوا، کنتراست، Focus، صفحه‌کلید، بزرگ‌نمایی و فناوری‌های کمکی باید از ابتدا در کامپوننت‌ها و فرایند طراحی حضور داشته باشند. بهترین استفاده از Fluent زمانی اتفاق می‌افتد که تیم تنها ظاهر آن را کپی نکند، بلکه منطق Tokenها، اصول طراحی و رویکرد فراگیر آن را در ساخت سیستم خود به کار بگیرد.