10 نکته کلیدی برای طراحی طرح های گرافیکی مسطح یا فلت
در این مقاله که توسط سایت پرشین جی اف ایکس ترجمه شده در مورد طرح های فلت یا مسطح صحبت می کنیم. احتمالا در مورد این نوع طراحی شنیده اید چون در سال های اخیر به گرایش اصلی در طراحی تبدیل شده است. اجازه دهید نگاه نزدیک تری به این گرایش بیندازیم و ببینیم این سبک چیست و از کجا آمده است و برای طراحی یک طرح فلت تمیز و زنده به چه چیزی نیاز دارید.
1. طرح فلت یا مسطح چیست؟
طراحی فلت یک سبک مدرن و جمع و جور یا مینیمال از طراحی گرافیکی با رابط کاربری بالا است که در آنها از کمترین عناصر استفاده می شود و از به کار بردن رنگ های پیچیده، گرادیانت، های لایت و دیگر عناصر پر زرق و برق و بات ها و افکت های سایه اجتناب می شود.
طرح های فلت کمک می کند بیشتر روی محتوا تمرکز کنیم، بدون اینکه بیننده را از افکت های بصری منحرف کنیم. این به سادگی عناصر تاکید می کند و در آن واحد رابط کاربری را پاسخگوتر می کند.
2. تاریخچه
طرح های مسطح قبل از اینکه در جامعه طراحی به یک گرایش مورد توجه تبدیل شوند مورد استفاده قرار می گرفتند. این طرح ها در دهه 80 به میزان گسترده ای به کار برده می شدند. حتی در آن سال ها، طراحی متمایل به دست یابی به اولین و ساده ترین ویژگی های اسکیومورفیسم بود و سعی بر آن بود تا بیشتر به واقعیت و زنده بودن نزدیک شود.
طرح های فلت، به این شکل که حالا می بینیم، پس از اینکه Microsoft شروع به انتشار محصولات خود که به سبک Metro از آن یاد می شد کرد، شروع به کسب محبوبیت کرد. سبک Metro یک زبان رابط کاربری ساخته شده توسط Microsoft است که همه چیز در آن ساده و مدرن است.
در سال 2010 میلادی Microsoft ویندوز فون 7 را منتشر کرد، که از یک طرح فلت کاربرپسند ساده با لبه های تیز و گرافیک ها تمیز و شفاف استفاده می کرد. پس از آن موفقیت، ماکروسافت Windows 8 OS را با همان سبک فلت Metro منتشر نمود.
سرانجام، در سال 2013 طرح های فلت به بالاترین نقطه محبوبیت خود رسیدند، زمانی که Apple از iOS 7 پرده برداری کرد. طرح جدید را ارائه کرده و تغییرات کلی روی همه المنت های کاربر پسند قبل، شامل آیکون ها و فونت ها اعمال کردند.
کمی بعد از آن، گوگل نیز سبک صفحات وب و اپلیکیشن های خود را به طرح فلت تغییر داد و آن را Material Design نامید.
از آن پس، طرح فلت مسیر کلیدی برای طراحی وب، اپلیکیشن و المنت های طراحی برجسته چند سال گذشته شده است.
در مجموع، 3 نمونه سبک طراحی فلت وجود دارد که باید در دنیای مدرن رستنه امروز از آنها یاد کرد:
- طراحی Metro متعلق به Microsoft
- طرح iOS 7 متعلق به Apple
- طرح Material متعلق به Google
3. تا حد امکان یک طرح ساده ارائه کنید
صفت فلت یا مسطح با این دلیل روی این نوع طرح گذاشته شده است که المنت و افکت های سه بعدی از قبیل گرادیانت، بافت، های لایت و سایه در آنها وجود ندارد. سبک فلت یک روش دو بعدی به تصویر کشیدن اشیا است. گاهی ما فقط سایه ها و یا خطوط محیطی را که شئ واقعی را قابل شناسایی می کند به نمایش می گذاریم بدون اینکه از کوچکترین جزییات استفاده کنیم.
امروزه سبک مینیمال به یک گرایش عمومی بدل شده است و این سادگی در شکل و لبه های تیز بر تر و تمیز و خوش نما بودن بصری طرح تاکید می کند. اشکال ساده قابل درک تر و دریافت پیام از آنها ساده تر است. آنها باعث می شوند یک طرح شسته رفته و به دور از هر گونه نمای شلوغ و در هم برهم باشد.
4. یک طرح کامل طراحی کنید
وقتی صحبت از آیکون ها فلت و المنت های کاربر پسند به میان می آید، لازم است آنها را تا حدامکان واضح، دقیق و از لحاظ پیکسلی کامل طراحی کنیم. این هم برای گرافیک های وکتور و هم برای گرافیک های پیکسلی ضروری است.
در این مورد، همه چیز با نرم افزار Adobe Photoshop مشخص می شود، چون این نرم افزار با گرافیک های پیکسلی که بر مبنای پیکسل هستند کار می کند.
وقتی وارد نرم افزار Adobe Illustrator می شویم، که یک برنامه طراحی وکتور است، و با خطوط و منحنی ها سروکار دارد، طرح ها بر اساس محاسبات ریاضی نقاشی می شوند. چندی قبل، استفاده از Adobe Illustrator واقعا برای کشیدن طرح های پیکسلی راحت نبود. خبر خوب این است که، ورژن های جدید Adobe Illustrator به ابزاری مجهز شده اند که با گرافیک های پیکسلی سرو کار دارند.
جدا از این موضوع، گرافیک های وکتور اساسا دلالت بر کار با اشکال فلت و ساده با رنگ ها و شبکه بندی های متمایز دارند. Adobe Illustrator در زمینه تنظیمات بسیار انعطاف پذیر بوده و به شما اجازه می دهد واحدها را تغییر دهید، خطوط راهنما و شبکه بندی ها را مطابق با نیازتان تنظیم کنید، اشیا را هم راستا کرده و از انواع مختلف Snapping استفاده کنید. همه این امکانات طراحی طرح های پیکسلی را آسان می کند.
5. شدت رنگ و گرایشات
جدا از شکل، یکی از منحصر به فردترین ویژگی های طراحی فلت، کاربرد رنگ است. اغلب پالت های رنگ برای المنت های سبک فلت شامل تعداد کمی رنگ هستند. رنگ های روشن و براق، برجسته و پر رنگ، اشباع و هیجان برانگیز از نشانه های طراحی فلت یا مسطح هستند.
چرخه رنگ در طراحی های فلت به چتد رنگ خاص محدود نمی شود. این چرخه شامل رنگ ها و سایه ها و آنچه به تصویر می کشید، مثلا آیکون های آبنیاتی براق هستند یا اشیایی با سبک رترو، بستگی دارد.
بعضی از این پالت ها نه تنها برای طرح های فلت، که برای همه انواع طرح های دیگر نیز مناسب هستند. از طریق سرویس هایی مثل Adobe Color CC، می توانید با دسترسی به وب سایت و یا مستقیما از طریق محصولات Adobe پالت های رنگ را در اختیار داشته باشید.
یکی دیگر از تولید کننده های پالت های رنگ Coolors است. فقط کافی است روی نوار space ضربه بزنید و رنگ های پالت را تغییر دهید.
از دیگر سرویس های مشابه با پالت های سفارشی می توان از FlatUIColors.com by Designmodo که شامل رنگ های فلت با کدهای جادویی است که کار کردن با آن بسیار ساده است.
همچنین در Google's Material Design guide نیز می توانید پالت های رنگ مختلفی را پیدا کنید.
6. سایه های طولانی و ادامه دار
همانطور که در بالا ذکر شد، طراحی فلت گرایش به سمت ساده بودن و خاص بودن دارد به همین دلیل است که استفاده از افکت ها را رد می کند. به هر حال یک افکت وجود دارد که از طراحی فلت ظهور می کند. این یکی از ویژگی های بارز این طراحی است.
ما در مورد افکت سایه طولانی و ادامه دار صحبت می کنیم. خصوصیات خاصی وجود دارد که این افکت را قابل شناسایی می کند. این افکت ها با زاویه 45 درجه و با سایز بزرگ هستند (سایه باید حدودا دو برابر سایز شئ باشد). در نتیجه، سایه های بلند عمق بیشتری به طرح های فلت می بخشند.
این نوع افکت باعث می شود شئ حالت سه بعدی پیدا کند در حالی که هنوز نمای فلت خود را حفظ کرده است.
7. کار با فونت ها
تایپوگرافی نقش مهمی در طراحی فلت بازی می کند. اغلب، به متن عنصر اصلی یک ترکیب تبدیل می شود، در حالی که عناصر سبک فلت ذهن بیننده را منحرف نمی کند.
در طراحی های فلت معمولا از فونت های ساده استفاده می شود، که این باعث می شود کل طرح خوانا و تمیز به نظر برسد. شما می توانید اگر از محصولات از طریق Adobe استفاده می کنید Adobe Typekit به فونت های زیادی دسترسی پیدا کنید. در غیر این صوت Font Squirrel مرجع فوق العاده ای برای فونت های رایگان است. فقط اگر می خواهید از فونت برای کاربردهای تجاری استفاده کنید حتما قبلا لایسنس ها یا مجوزها را مطالعه کنید.
در سبک فلت اغلب از حروف بزرگ و رنگ های با کنتراست بالا استفاده می شود که باعث می شود متن خوانا تر شود.
فونت را با دقت انتخاب کنید چون باید روی کل طرح تاکید کند و با آن مطابقت داشته باشد، بدون اینکه نمایی شبیه یک عنصر ناسازگار داشته باشد. این بدین معنی نیست که شما نمی توانید از فونت های Serif یا بعضی فونت ها دست نویس با حالت چرخشی و یا المنت های اضافی استفاده کنید. هنوز در طرح های فلت موفق اغلب از فونت های Sans Serif استفاده می شود، چون آنها هم مانند همه المنت های فلت، دارای حاشیه و لبه های صاف هستند.
8. مزایا و معایب سبک فلت
در حالی که طراحی فلت به دلیل مزیای گسترده ای که دارد تبدیل به یک سبک محبوب شده است، هنوز هم اشکالاتی دارد. در این قسمت می خواهیم برخی از مزایا و معایب این سبک را ذکر کنیم.
روند یا گرایش
طراحی فلت در یک روند رو به توسعه در حیث جلب تعدادی زیادی توجه مثبت در بین طراحان و طراحان وب است. در مقابل، این گرایش بیشتر و بیشتر با اشکال و ویژگی های جدید، تدریجا به سبکی خلاقانه تر تبدیل می شود.
سادگی
طراحی فلت یک سبک ساده، میینیمال و واضح است. در بحث وب سایت ها، طرح های فلت به شما کمک می کند بیشتر روی محتوا متمرکز شوید نه روی افکت های بصری گیج کننده. این همچنین برای اپلکیشن های موبایل کارایی فوق العاده ای دارد: طرح های واضح و تر و تمیز با دکمه های فلت بزرگ برای دستگاه های موبایل مناسب است.
وضوح
استفاده از رنگ یکی دیگر نگات مثبت طرح های فلت است. رنگ های روشن و پر رنگ جذابیت خاصی دارد، و کمبود گرادیانت ها سبب می شود طرح حالت مدرن پیدا کند.
اشکالات
طرح های فلت مزایای زیاد دیگر دارند، اما هیچ طرحی کامل نیست. در این قسمت چند مورد از اشکالات و معایب این طرح ها را بیان می کنیم.
پاسخگو نبودن
گاهی، کمبود جزییات اضافی یا افکت های بصری ایجاد یک رابط کاربری کاربرپسند را دشوار می کند که باعث می شود طرح پاسخگوی نیاز کاربر نباشد. همه کاربران به معنای واقعی با این طراحی احساس راحتی نمی کنند.چون پیدا کردن المنت های قابل کلیک روی یک صفحه وب یا المنت هایی که در یک اپلیکیشن موبایل نیاز است تا روی آن ضربه بزنید کار سختی است، چون این طرح ها تعاملی نیستند، یعنی با کاربر رابطه برقرار نمی کنند.
مشکلات تایپوگرافی
همنانطور که ذکر شد، هر نوع فونتی با طرح فلت همخوانی ندارد. گاهی یک طرح با فونت های بولد، با لبه های صاف نمای متعادل و شیکی پیدا می کند. به هر حال انتخاب تایپوگرافی اشتباه ممکن است باعث خراب شدن طرح شما شود. شما باید حس کنید کدام فونت ها برای طرح فلت مناسب و کدام یک مناسب نیستند. تایپوگرافی ضعیف می تواند کار انتخاب فونت مناسب را نیز سخت و دشوار کند.
تصاویر ضعیف
به دلیل محدودیت در استفاده از افکت ها،رنگ ها و فونت ها، ممکن استطرح های فلت خیلی ساده و بدون جذابیت باشند. این سادگی در سبک می تواند بزرگترین ایراد باشد، همچنین داشتن یک صفحه وب یا آیکون هایی متفاوت از طرح های دیگران کار سختی است، چون ما از طرح های ساده و با پالت رنگ محدود و فونت های یکسان استفاده می کنیم. در نتیجه، ممکن است طرح نمای خسته کننده ای داشته باشد.
9. روند رو به رشد طرح های فلت
طراحی فلت را نمی توان یک طرح کامل شده و توسعه یافته نامید. ممکن است به خاطر معایبی که در بالا نام برده شد، روند رو به توسعه و تغییر را طی کند و ویژگی های جدید و المنت های ارتقا دهنده بصیری به آن اضافه شود.
اگر نگاه نزدیک تری به آخرین نمونه های طراحی فلت بیندازید، جدا از ابزارهای غیرمنعطف، افکت ها ظریف مثل گرادیانتها، سایه ها، های لایت ها و دیگر عناصر بصری، متوجه پیشرفت رو به جلو این نوع طراحی می شوید.
اتفاقی که می افتد این است که این آیتم های تزیینی در حقیقت به طرح بعد و عمق اضافه می کنند، بدون اینکه نمای آن را با جزییات پربار کند، کاری که گاهی در طراحی های اسکیومورفیک انجام می دهند. این بهینه سازی ها باعث می شود طرح های فلت پاسخگوتر و سراحت تر شده همچنین نمای تازه و جدیدی پیدا کنند.
در نتیجه به نظر نمی رسد طراحی فلت ویژگی های خود را از دست بدهد. در مقابل این نوع طراحی جذاب تر، انعطاف پذیرتر و به معنای واقعی بهتر و بهتر می شوند.
10. چگونه شروع کنیم؟
اگر می خواهید طرح های فلت طراحی کنید، توصیه می کنم کارتان را با یک مجموعه آیکون کوچک آغاز کنید که دارای موضوع یکسان هستند. وقتی با این تکنیک احساس راحتی کردید، به سراغ طرح های پیچیده تر رفته و زمینه های دیگر طراحی را امتحان کنید و دانش جدید خود در زمینه گرافیک های فلت را در خلق تمپلیت ها یا بنرهای فلت وب اعمال کنید ( آماده سازی و ترجمه: پرشین جی اف ایکس).
