لطفا جاواسکریپت مرورگر خود را فعال سازید!

نحوه فعال سازی در کروم
  1. ابتدا باید اینکارو بگنید
  2. بعدش اونکارو
نحوه فعال سازی در فایرفاکس
  1. ابتدا باید اینکارو بگنید
  2. بعدش اونکارو
آشنایی با طراحی مسطح

آشنایی با طراحی مسطح

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

چنانچه بخواهیم نگاهی به تاریخچه طراحی مسطح داشته باشیم، می بینیم که این رویکرد برای اولین بار توسط Allan Grinshtein از نهادی به آدرس https://layervault.com ارائه شد. وی در مقاله ای گفته بود که "زیباترین رابط های کاربری آنهایی هستند که با به کارگیری از حداقل عناصر طراحی بیشترین تاثیر را بر جای می گذارند". این نظر Allen در نقطه مقابل رویکرد اسکیومورفیسمی قرار دارد. پیش از آنکه ببینیم طراحی مسطح چیست و چگونه اعمال می شود، بهتر است نگاهی به نقطه مقابل این رویکرد تحت عنوان اسکیومورفیسم داشته باشیم چرا که در این صورت بهتر متوجه خواهیم شد که چرا رویکرد اسکیومورفیسمی جای خود را به رویکرد مسطح داده است.

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

آشنایی با Flat Design یا طراحی مسطح

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

zune

اگرچه محصول Zune محصولی موفق نبود اما تجربه طراحان شرکت مایکروسافت در ساخت این محصول مبنایی شد برای طراحی دیگر محصولات شرکت مایکروسافت که از آن جمله می توان به داشبورد ایکس باکس 360، ویندوز 8 و ویندوز فون 7 اشاره کرد:

windows8

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

flat-design-good-for-mobile-applications

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

Simple-Element

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

focus-on-typography

تمرکز روی تایپوگرافی: با توجه به ماهیت بسیار ساده عناصر مختلف در طراحی مسطح، تایپوگرافی یا استفاده از فونت در این رویکرد نقش مهمی پیدا می کند. در استفاده از فونت می بایست همواره این نکته را مد نظر داشته باشیم که نوع فونت انتخابی می بایست با طرح کلی سایت همخوانی داشته باشد. به طور مثال اگر سایت از یک طرح کاملاً ساده برخوردار است، استفاده از فونت های فانتزی یا فونت هایی که از جزئیات بیش از اندازه زیاد برخوردارند کار اشتباهی است. پیشنهاد ما این است که در طراحی مسطح تا حد امکان از فونت های sans-serif به جای فونت های serif استفاده شود. برای مشاهده فرق مابین فونت های sans-serif با فونت های serif تصویر زیر را مد نظر قرار می دهیم:

serif-vs-sans-serif

همانطور که در تصویر فوق می بینیم در فونت های serif کاراکترها حاوی زوایای مختلفی هستندکه تا حدودی نمای ظاهری فونت را پیچیده می سازد. از جمله معروف ترین فونت serif می توان به فونت Times New Roman اشاره کرد. این نوع فونت ها بیشتر حس کلاسیک و رسمی را به خواننده القاء می کنند و می توان گفت که برای کتاب های چاپی مناسب هستند.

 

فرض کنیم یک کتاب شرلوک هلمز با استفاده از فونتی از نوع serif به سادگی می تواند ذهن خواننده را به چندین سال پیش ببرد. در مقابل فونت های serif فونت های sans-serif قرار دارند. پیشوند sans یک کلمه فرانسوی است به معنی "بدون". در واقع فونت های sans-serif همان فونت های serif هستند بدون زوایایی که در فونت های serif می بینیم. از جمله معروف ترین فونت های sans-serif می توان به فونت معروف Helvetica اشاره کرد. علاوه بر این در طراحی مسطح از فونت هایی که اصطلاحاً Novelty نامیده می شوند نیز می توان استفاده کرد:

novelty-fonts

همانطور که در تصویر فوق مشخص است این فونت ها بیشتر حالت فانتزی دارند. نکته ای که در مورد این نوع فونت ها وجود دارد این است می بایست در استفاده از آنها زیاده روی نکرد. لازم به ذکر است اکثر وب سایت هایی که با رویکرد مسطح طراحی شده اند غالباً از یک نوع فونت و نهایتاً از دو فونت مختلف استفاده می کنند. مسئله دیگری که در ارتباط با فونت و تاپیوگرافی است انتخاب واژگان است. عبارات می بایست صریح، گویا و کوتاه باشند. به طور مثال به جای عبارت "حال می توانید مبلغ سبد خرید خود را پرداخت کنید" می توان از کلمه "پرداخت فاکتور" استفاده کرد. در ارتباط با رنگ فونت بایستی گفت که معمولاً از رنگ های سفید و سیاه در طراحی مسطح استفاده می شود. در واقع از آنجا که در طراحی مسطح به ندرت از افکت هایی همچون سایه استفاده می شود، می بایست کنتراست رنگ فونت با پس زمینه قابل توجه باشد.

negative-sapce-in-flat-design

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

using-the-right-color-in-flat-design

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

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

color-palette-for-flat-design

وب سایت http://flatuicolors.com لیستی از رنگ هایی که در طراحی مسطح مورد استفاده قرار می گیرند را جمع آوری نموده و طراحان به صورت رایگان می توانند از این رنگ ها استفاده کنند. در طراحی مسطح به هیچ وجه از رنگ های اصلی قرمز، زرد و آبی به صورت خالص استفاده نمی شود بلکه با اعمال تغییرات جزئی این سه رنگ را به رنگ هایی جذاب و گیرا تر مبدل خواهیم ساخت. در طراحی مسطح از گروهی از رنگ ها تحت عنوان Retro هم استفاده می شود:

retro-palette-for-flat-design

همانطور که در تصویر فوق می بینیم، از رنگ هایی استفاده شده است که کمتر اشباع هستند و برای آنکه کمی خفه به نظر برسند کمی رنگدانه سفید به رنگ ها اضافه شده است. رنگ های Retro غالباً حاوی رنگ های زرد، نارنجی، قرمز و گاهی اوقات هم رنگ آبی هستند. در واقع هدف از به کارگیری رنگ های Retro باز آفرینی رنگ های قدیمی است (در واقع کاربر به یاد دهه 50 تا 70 میلادی زمانیکه این رویکرد رایج بود خواهد افتاد). اولین چیزی که در ایجاد این نوع رنگ ها می بایست مد نظر قرار داد عدم استفاده از رنگ های روشن است. چیزی که تاثیر این نوع رنگ بندی را دو چندان می سازد استفاده از فونت مناسب است.

اگر رنگ های Retro را در کنار فونتی نامناسب به کار گیریم، این کار آن حسی که می خواهیم به کاربر القاء کنیم را از بین خواهد برد. از میان فونت هایی که می توانند بهترین نتیجه را برای این کار ایجاد کنند می توان به فونت هایی که زاویه دار هستند اشاره کرد (پیش از این گفتیم که در طراحی مسطح کمتر از فونت های serif استفاده می شود. بنابراین در استفاده از فونت های زاویه دار می بایست دقت مضاعفی به خرج داد). برای ایجاد رنگ های Retro می توان از سایت های زیر کمک گرفت: http://www.colourlovers.com/blog/2009/04/16/130-retro-color-palettes http://www.colorschemer.com/schemes/index.php?tag=retro http://www.colorhunter.com/tag/retro/1 گروهی دیگر از رنگ هایی که در طراحی مسطح مورد استفاده قرار می گیرند تحت عنوان رنگ های Monotone شناخته می شوند. به کارگیری از این نوع رنگ ها به این شکل است که در کنار رنگ های سیاه و سفید صرفاً از یک رنگ دیگر هم استفاده می شود که این رنگ در بیشتر مواقع رنگ آبی است اما گاهی اوقات از سبز و خاکستری هم استفاده می شود. لازم به ذکر است به طور مثال در رنگ آبی می توان Tint های مختلف این رنگ را همانطور که در تصویر زیر مشاهده می شود نیز استفاده کرد:

monotone-palette-for-flat-design

به طور کلی منظور از Tint این است که غلظت رنگ را از 100 درصد مثلاً به 50 درصد کاهش دهیم تا با این کار بتوان یک کنتراست رنگی ایجاد نمود. در استفاده از رنگ های Monotone می بایست همواره این نکته را مد نظر داشت که از آنجا که رنگ پس زمینه معمولاً رنگی تیره مثل سیاه است از این رو بایستی با استفاده از رنگ انتخابی برای عناصر قرار گرفته روی پس زمینه مثل تایپوگرافی و دیگر عناصر کنتراست قابل توجهی ایجاد کرد. از سوی دیگر نمی بایست به هیچ وجه از فونت های نازک استفاده کرد چرا که اینکار خوانایی متن را کاهش می دهد.

typography-on-monotone-color-in-flat-design
 

ابزارهای ایجاد رنگ برای طرح مسطح ابزار شرکت ادوبی تحت عنوان Kuler این امکان را به طراحان می دهد تا به سادگی و خیلی سریع یک پالت با 5 رنگ متناسب با یکدیگر را ایجاد نمایند:

adobe-kuler

برای استفاده از این سایت می توان به آدرس https://kuler.adobe.com مراجعه کرد. ابزار دومی که قصد داریم معرفی کنیم Color Scheme Designer نام دارد. ابتدا یک پالت را انتخاب کرده سپس با چرخاندن چرخه رنگ می توان رنگ های مختلفی در آن ایجاد نمود:

color-scheme-designer

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

 
almost-flat-design

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

pros-and-cons-of-flat-design-1

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

flat-design-good-for-mobile-applications

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

bright-colors-in-flat-design

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

focus-on-typography-in-flat-design

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

آشنایی با Flat Design یا طراحی مسطح

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

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

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