طراحی سایت تخت یا مسطح (Flat) و طراحی سایت متریال (Material)، دو طراحی سایت مشابه هستند که یکی بر پایه دیگری بنا نهاده شده است.
یکی از آنها "یک سبک طراحی سایت جدید" است و دیگری طوری طراحی شده تا "یک مد زودگذر" نباشد.
یک خود به خود به یک سبک طراحی سایت تبدیل شده است و دیگری بر اساس یک سری خطوط راهنما ایجاد شده است.
اما واقعا تفاوت این دو نوع طراحی سایت در چیست؟
آیا واقعا یکی از دیگری بهتر است؟ یا تنها برای یک سری اهداف خاص مناسب است؟ در واقع بعضی از مردم پس از فهمیدن تفاوت هایی که بین این دو نوع طراحی سایت وجود
دارد تعجب می کنند.
با ابتدایی ترین تفاوت ها شروع می کنیم:
شبیه سازی (Skeumorphism)
در این مقاله منظور از شبیه سازی، نوعی از طراحی سایت است که انتزاعی از دنیای واقعی را ایجاد نماید. معمولا از این شبیه سازی برای نشان دادن ابزارهای نرم
افزاری به شکل واقعیشان استفاده می شود. مثلا یک نرم افزار سینتی سایزر را به شکل یک کیبورد طراحی می کنند. اما مشکلی که معمولا وجود دارد این است که برای مثال
دکمه های ولوم یا ناب ها (دکمه های فشاری دایره ای شکل) باید بتوانند بوسیله ماوس یا تاچ اسکرین کنترل شوند و حالت آنالوگ و چرخشی دارند و نمی توان به صورت
دیجیتال آن ها را کنترل نمود.
به همین خاطر دنیای طراحی به این نتیجه رسید که چیز دیگری مورد نیاز است، چیزی که بتواند تمامی المان های گرافیکی پیچیده و دکوراتیو را حذف نماید و کاربری آسان
را در الویت قرار دهد، سرعت بارگذاری را افزایش دهد و بر روی نمایش محتوا به کاربر تمرکز نماید. به همین خاطر تمام آثار شبیه سازی (Skeumorphism) از طراحی سایت
ها حذف شدند و طراحی سایت ها به طراحی سایت های مسطح و بدون بعد تبدیل گردیدند.
طراحی سایت مسطح یا تحت (Flat Website Design)
طراحی سایت مسطح، به صورت پایه ای از اشکال ساده استفاده می کند و تمامی عناصری را که باعث می شوند یک المان به صورت سه بعدی دیده شود را حذف می کند، مثل سایه
های زیرین، تدرج رنگ و جنس دادن به زمینه. طراحی سایت مسطح به طور مشخص بر روی استفاده از آیکون ها، فونت ها و رنگ ها تمرکز دارد.
این یکی از اولین اهداف طراحی سایت مسطح است که نیازهای کاربران را به وسیله تعدادی دکمه ساده، رنگ های متمایز و … برطرف نماید و آن ها را به راحتی به سمت
محتوای مورد نیازشان هدایت نماید.
در طراحی سایت مسطح، زیبایی ظاهری در درجه دوم اهمیت قرار دارد. تمرکز بر روی کاربرد قرار دارد. سادگی استفاده از آیکون ها در حدی است که بازدیدکنندگان وب سایت
به راحتی و بدون نیاز به هیچ راهنمایی می توانند از آن ها استفاده کنند. به علاوه اینکه سرعت بارگذاری صفحات افزایش یافته و تمامی عناصر در نمایشگرهای با وضوح
کم یا زیاد به خوبی نمایش داده می شوند و همین مسایل باعث یک تجربه خوب برای بازدیدکننده سایت شما خواهد شد و در نتیجه طراحی سایت مسطح، کار را هم برای طراح و
هم برای کاربر آسان می کند.
-
محدودیت های نمایشگر را می شکند و با همه آنها به خوبی کار می کند.
-
طراحی سایت را روان و ساده کرده و عناصر گرافیکی و انیمیشن های غیر ضروری را حذف می نماید و زمان بارگذاری صفحات را کاهش می دهد.
-
عدم استفاده از عناصر شبیه سازی شده ی پیچیده، سرعت کاربر را در خواندن و مشاهده محتوا افزایش می دهد.
-
تمام گزینه های غیر ضروری طراحی سایت را حذف می کند و طراحی سایت سریع تر انجام می شود.
-
سایت هایی که به وسیله طراحی سایت مسطح تولید شده اند، به راحتی قابل تبدیل به سایت های واکنش گرا (Responsive) هستند.
-
طراحی سایت مسطح می تواند شما را به رنگ های ساده؛ اشکال و آیکون ها محدود نماید.
-
اگر خیلی از اصل طراحی سایت مسطح دور شویم، ممکن است که سایت های خیلی معمولی و بی خاصیتی تولید کنیم.
-
بعضی از سایت ها یا اپلیکیشن ها، به عناصر گرافیکی پیچیده تری نیاز دارند که در طراحی مسطح وجود ندارد. برای مثال بعضی از عناصر باید سایه داشته باشند و
یا لبه های آن ها برآمده باشد که نشان دهد دکمه های قابل کلیک هستند و از عناصر گرافیکی ثابت موجود در صفحه متمایز هستند.
-
سادگی بیش از حد طراحی سایت مسطح، کار را برای تولید یک سایت مسطح که منحصر به فرد باشد بسیار مشکل می کند.
طراحی سایت متریال (Material Website Design)
با مشکلات اساسی در طراحی سایت مسطح در قسمت قبل آشنا شدیم. طراحی سایت مسطح به طور افراطی تمام عناصر شبیه سازی را حذف می کند، حتی آنهایی را که کاربردی و مفید
هستند. حالا به طراحی سایت متریال می پردازیم. طراحی سایت متریال، لایه ها را از نرم افزارهای بی شمار ویرایش تصاویر قرض می گیرد و آن ها را به وسیله سایه های
زیرین (Drop Shadow)، برجسته کردن عناصر (Emboss) و انیمیشن از یکدیگر تفکیک می کند و به بازدید کننده این امکان را می دهد تا عناصر را به وسیله اختلاف عمقی که
با یکدیگر دارند، از هم تفکیک کند.
طراحی متریال، مجموعه ای از استانداردهای طراحی است که به وسیله گوگل توسعه داده شده است. این طراحی شامل تعداد بی شماری قابلیت جذاب است، اما مهم ترین آن ها
نحوه استفاده از محور Z (عمق) است.
به طور اساسی و پایه ای، طراحی متریال مقدار کمی از شبیه سازی را به طراحی مسطح بر می گرداند، تا بتواند حس قرارگرفتن و یا لغزیدن دو سطح روی یکدیگر را ایجاد
نماید.
یک برگ کاغذ را تصور کنید که می تواند در ابعاد مختلف بزرگ و کوچک شود، تغییر شکل دهد و به چند قسمت تقسیم شود. حالا تعدادی از این برگ کاغذ را روی هم بچینید و
روی هر کدام از آن ها یکی از عناصر وب سایت را نقاشی کنید. این مفهوم بسیار ساده ای از طراحی متریال است.
با وجود تمام مطالبی که در مورد طراحی متریال گفته شد، قواعد آن به هیچ وجه مطلق نیستند و بر روی سنگ حک نشده اند. به طراحی متریال به عنوان یک فریم ورک برای
ایجاد قواعد فیزیک در طراحی نگاه کنید و یا به عنوان الگویی برای طراحی های آینده. همچنین طراحی متریال به گونه ای توسعه داده شده است که کاملا تطبیق پذیر باشد
و در ابعاد مختف و حتی اشکال مختلف آن ها به خوبی نمایش داده شود مانند ساعت هوشمندی که سیستم عامل Android Wear دارد.
طراحی متریال هم اکنون برای طراحی اپلیکیشن های اندروید به صورت استاندارد در آمده است. اینکه از طراحی متریال باید در ساخت اپلیکیشن های iOS نیز استفاده شود یا
خیر، بحث های بزرگی را به راه انداخته است که همچنان ادامه دارد. اپلیکیشن هایی که گوگل برای iOS درست کرده همه از این طراحی بهره می برند اما عده ای می گویند
این کار درستی نیست چون با طراحی کلی سیستم عامل iOS در تناقض است.
-
در طراحی سایت متریال، مرتب سازی سه بعدی عناصر وب سایت، کارکردن با وب سایت را راحت تر می کند. برای مثال سایه های زیرین، لایه های متفاوت را از یکدیگر
متمایز می کند.
-
بر خلاف طراحی سایت مسطح، طراحی سایت متریال از یک سری خطوط راهنما با جزییات دقیق استفاده می کند و هیچ جایی برای حدس زدن نمی گذارد.
-
اگر می خواهید با استفاده از طراحی متریال، محصولی برای چند پلت فرم مختلف تولید کنید، مثل طراحی سایت یا اپلیکیشن اندروید، طراحی متریال، تجربه یکسانی
را در همه دستگاه ها برای کاربر به همراه خواهد داشت و این برای برند سازی بسیار حائز اهمیت است.
-
اگر علاقمند هستید که در طراحی سایت خود از انیمیشن استفاده کنید، طراحی متریال بهترین انتخاب است چون به صورت پیش فرض تعداد زیادی انیمیشن دارد که می
توانید از آن ها استفاده کنید.
نقاط ضعف طراحی متریال
-
بخواهید یا نخواهید، طراحی متریال به گوگل گره خورده است. بسیار سخت خواهد بود، اگر بخواهید از خطوط راهنمای گوگل استفاده کنید اما برای خودتان هویت
مستقلی داشته باشید.
-
همه ی سیستم ها قابلیت راه اندازی فریم ریت های مورد نیاز برای اجرای انیمیشن ها را ندارند.
-
انیمیشن های موجود در طراحی متریال، باطری های کاربران موبایل را خالی خواهد کرد.
-
مجبور کردن توسعه دهندگان به استفاده از خطوط راهنمای گوگل، خلاقیت را از آن ها دور می کند و محدودیت آن ها در استفاده از عناصر دکوراتیو و انیمیشن را
افزایش می دهد.
نتیجه گیری
طراحی متریال فاصله زیادی از طراحی مسطح ندارد. هر دو از اصول طراحی تمیز (clean) و حداقلی (minimal) بهره می برند. طراحی متریال، تنها عناصری مربوط به حجم،
سایه و … را دارد که فقط برای کمک به کاربری آسان تر استفاده شده اند. در واقع هیچ مانعی برای ترکیب این دو طراحی با هم وجود ندارد. شما می توانید کمی از طراحی
متریال استفاده کنید تا یک سایت با طراحی مسطح را بهبود ببخشید.
