آشنایی با فلت دیزاین و متریال دیزاین

یکی از چالش‌های همیشگی در طراحی اپلیکیشن یا وب‌سایت، انتخاب میان طراحی تخت (Flat Design) و متریال دیزاین (Material Design) است. به نظر شما کدام سبک طراحی، تجربه کاربری بهتری را ایجاد می‌کند؟ در این مقاله با ما همراه باشید تا با مفهوم Flat      Design  و Material Design و تفاوت‌های آن‌ها آشنا شوید.

مفهوم اسکیومورفیسم (Skeuomorphism)

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

فلت دیزاین (Flat Design)   

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

مزایای فلت دیزاین

• یک طراحی ساده، مینیمال، بدون عناصر اضافی و شلوغی، که حواس کاربر را پرت نمی‌کند.
• گاهی یک طرح ساده توانایی بیشتری در انتقال مفاهیم به کاربر دارد.
• تایپوگرافی واضح در فلت دیزاین باعث می‌شود به راحتی خوانده شود.
• فلت دیزاین مطابقت بسیاری با طراحی واکنش‌گرا یا Responsive Design دارد.
• طراحی تخت در مقایسه با دیگر انواع طراحی، سرعت بارگذاری بالاتری در مرورگرها و اپلیکیشن‌ها دارد.

معایب فلت دیزاین

• نبود سایه‌ها و عمق عناصر طراحی شده، ممکن است گاهی سبب بروز چالش‌هایی در قابلیت استفاده یا Usability شود.
• وجود انتخاب‌های محدود از میان رنگ‌ها، آیکون‌ها و شکل‌های ساده و یکنواخت، ممکن است تشخیص دادن تمایز برخی بخش‌ها را از یکدیگر سخت کند و باعث شود طراحی‌های شما تکراری به نظر برسد.
• گاهی تشخیص قابلیت کلیک آیتم‌ها برای کاربر مشکل می‌شود.
• طراحی‌CTA ها در فلت دیزاین ممکن است چندان جذاب به نظر نرسیده و سبب کاهش نرخ کلیک (CTR) شود.
• محدودیت‌های فلت دیزاین باعث می‌شود نتوانید بسیاری از ایده‌های خلاقانه‌ی خود را در طراحی پیاده‌سازی کنید.
• طراحی تخت برای تمام وب‌سایت‌ها یا اپلیکیشن‌ها با توجه به هدف و نوع فعالیت آن‌ها مناسب نیست.

متریال دیزاین(Material Design)  

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

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

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

متریال دیزاین از سه بخش اصلی تشکیل شده که محقق شدن اهداف بالا را امکان پذیر ساخته‌اند:

• متریال به عنوان استعاره یا Metaphor: اشیاء و عناصر در متریال دیزاین درست مانند اشیاء در واقعیت ایجاد شده و باهم مرتبطند. به عبارتی می‌توان گفت این عناصر استعاره‌ای از واقعیت هستند.
• وجود عناصر برجسته، گرافیکال و جذابBold) ، Graphic و (Intentional که از طراحی روی کاغذ (طراحی چاپی) الهام گرفته می‌گیرند.
• حرکت (Motion): حرکات در متریال دیزاین به صورت واقعی و با هدف افزایش توجه کاربر طراحی شده‌اند.

دلیل اهمیت متریال دیزاین

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

مزایای متریال دیزاین

• ایجاد رابط کاربری ساده و یکپارچه (وب‌سایت و اپلیکیشن)
• ثبات رویه به دلیل وجود اهداف و دستورالعمل‌های مشخص
• استفاده از محور Z (ایجاد عمق در اشیا)
• جنبه‌های بصری قوی
• جذابیت بیشتر به دلیل استفاده از حرکات و Motion
• ترغیب بیشتر کاربران به انجام عمل مورد نظر به دلیل طراحی CTA جذاب
• افزایش سرعت در طراحی

معایب متریال دیزاین

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

مقایسه فلت دیزاین و متریال دیزاین

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

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

همچنین می‌توان از مزایای عناصر متریال دیزاین در طراحی‌های تخت (و بالعکس) بهره برد و این دو روش را با یکدیگر ترکیب کرد. در بیشتر مواقع، رابط کاربری متریال دیزاین User-Friendly است و بخش‌های قابل کلیک و غیر قابل کلیک را در نگاه کاربر به راحتی از یکدیگر قابل تشخیص می‌کند.

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

تیم طراحی و توسعه وب‌سایت آژانس دیجیتال مارکتینگ ماکان بهینه‌ترین روش‌های طراحی وب‌سایت را انتخاب کرده و شما را در مسیر رسیدن به اهداف کسب و کارتان همراهی می‌کند.

منبع: آژانس دیجیتال مارکتینگ ماکان