Fluent Design System چیست؟

اردیبهشت 10, 1397     میثم عبداللهی    

Fluent Design System

سلام به شما کاربران عزیز و دوست داشتنی. امروز میخوام درباره ی یکی دیگه از زبان های طراحی براتون مطلب بزارم. Fluent Design System یک زبان طراحیه که در سال 2017 توسط Microsoft معرفی و روانه بازار شد. زبان طراحی Fluent یک تجدید نظر یا اصلاح از زبان طراحی مایکروسافت 2 است که شامل دستور العمل هایی برای طرح ها و تعاملات مورد استفاده در نرم افزار طراحی شده برای تمام دستگاه های ویندوز 10 می باشد. زبان طراحی Fluent بیشتر در زمینه های نور، حرکت، عمق، متریال و مقیاس تمرکز داره.

Fluent Design System چیست؟

سیستم طراحی Fluent باعث بوجود آمدن تغییراتی آرام در فلسفه و طراحی در شرکت مایکروسافت شده و پس از تغییرات مختلف، سرانجام در سال 2017 توسط مایکروسافت به عنوان یک زبان طراحی سیستم معرفی شد. اکثر مردم بر این باورند که این سیستم طراحی فقط ویندوز 10 رو دستخوش تغییرات خودش قرار میده، اما این نظریه کاملا اشتباه است چون که این سیستم طراحی علاوه بر ویندوز، بر روی اپلیکیشن های IOS و اندروید نیز تاثیر داره (ظاهر اپلیکیشن های سازگار با ابزار هایی همچون Holo Lens).

بررسی عامل های اصلی

همون طور که در ابتدای مقاله هم گفته شد، این زبان طراحی در زمینه های نور (Light)، حرکت (Motion)، عمق (Depth)، متریال (Material) و مقیاس (Scale) تمرکز بیشتری داره که در ادامه به بررسی دقیق تک تک این زمینه ها می پردازیم.

نور

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

عمق

برای عمق شما میتونین با استفاده از محور Z توسط تمایز محتوا از طریق لایه بندی اقدام کنین. عمق توسط سایه افتاده و لایه بندی عمق Z انجام میشه. عمق به ظاهر برنامه ها جلوه های مختلفی می بخشه و باعث بهره مندی طراح از امکان لایه بندی UI  میشه.

Fluent Design System- عکس1

حرکت

حرکت درFluent Design System باعث ایجاد یک رابطه بین عناصر UI میشه و تدوام تجربه رو فراهم میکنه. از حرکت برای نشان دادن ارتباط، اتصال و بافت موجود میان اجزا استفاده میشه.

متریال

متریال شامل مواد Acrylic میشه. این مواد یک اثر شفاف یا تار رو با یک اثر صدا دار کوچو ایجاد میکنن. مواد Acrylic در هنگام شفافیت غیر فعال هستند (مثلا زمانی که حالت صرفه جویی باتری فعاله). با استفاده از متریال میشه بافت یک جز رو کنترل کرد و هنگامی که این جز با سایر اجزا در تماس هست، اون ها رو تغییر بده.

مقیاس

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

حسن ختام

در پایان باید بهتون بگم Fluent Design System نیز طرفدارای خاص خودشو داره. این زبان طراحی به دلیل استفاده در پلت فرم های مختلف از جمله ویندوز، IOS و اندروید مشتریان زیادی پیدا کرده. شما نیز برای طراحی برنامه تون میتونین از این زبان طراحی استفاده کنین. برای شروع یادگیری Fluent Design System شما میتونین از منابع مختلف استفاده کنین ولی من بهتون استفاده از مرجع اصلی سایت (برای ورود به سایت کافیه اینجا کلیک کنین) رو پیشنهاد میدم.

دسته‌بندی‌ : بلاگ

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Rating*