سبک تخت چی طراحی فلت چیست و اصول اولیه آن سازگاری طراحی واکنشگرا

طراحی مسطح یک روند کلیدی در طراحی برای سال های آینده است، بنابراین بیایید نگاهی دقیق تر به آن بیندازیم و با 5 اصل اساسی که اساس آن را تشکیل داده اند، آشنا شویم.

مقدمه ای بر طراحی تخت

در زبان روسی، طراحی تخت به عنوان "طراحی تخت" ترجمه می شود و پس از آن به یک مورد علاقه مطلق تبدیل شد ارائه های اپلسیستم عامل iOS. رویکرد مینیمالیستی برای طراحی برای قابلیت استفاده در مرکز توجه قرار گرفته است. تمرکز بر راحتی کاربر است. این اعتراضی آشکار به «اسکویفورمیسم» (تجسم اشیا، مانند واقعیت) است. انتخاب بر روی راه حل های ساده تر و در عین حال از نظر زیبایی شناختی ساده انجام شد. کاربرانی که از تجسم های واقع گرایانه خسته شده اند با اشتیاق از این جهت استقبال کردند و پروژه های وب روز به روز بیشتری به این قالب می روند.

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

طراحی "مسطح" به دنبال انتقال حجم نیست، بنابراین تجسم دو بعدی اساس است. این بدان معنی است که شما هیچ سایه، بازتاب یا برجسته ای را با بافت ها نخواهید دید (به استثنای سایه های طولانی). فقط انتقال خطوط و هیچ چیز بیشتر.

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

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

نه تنها نوع، بلکه رنگ نیز جزء ضروری طراحی تخت است. اکثریت قریب به اتفاق پالت ها بر اساس 2-3 رنگ هستند، اگرچه، البته، استثناهایی نیز وجود دارد. معمولا رنگ های شاداب و روشن، اما خالص انتخاب می شوند. همانطور که اشاره شد، هیچ شیب یا انتقال غیر ضروری وجود ندارد.

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

صاف یا تقریبا صاف؟ به دنبال مصالحه!

در پایان، مایلم به این نکته اشاره کنم که امروزه بین طراحی مسطح و غیر مسطح هم افزایی وجود دارد. ما در مورد طراحی "تقریبا مسطح" صحبت می کنیم. این رایج ترین کاربرد مفهوم توصیف شده است، زمانی که طراحان در کنار عناصر ساده و مختصر و فضای دو بعدی، از 1-2 ترفند برای عمق و پرسپکتیو استفاده می کنند.

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

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

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

میتونی پیدا کنی نمونه های خوبطراحی تخت در http://market.envato.com/. طرح‌بندی‌ها، آیکون‌ها و قالب‌های زیادی وجود دارد که به شما یک ایده واضح از ظاهر طراحی مدرن می‌دهد. .

1. طراحی تخت چیست؟

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

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

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

2. کمی تاریخ

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

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

در سال 2010 مایکروسافت منتشر کرد تلفن ویندوز 7 که از طراحی مسطح با لبه های تیز و گرافیک ساده به ارث رسیده از یکی از محصولات اولیه استفاده می کرد.مایکروسافت (Zune). بعداً با الهام از موفقیت، مایکروسافت منتشر کرد سیستم عاملویندوز 8 بر اساس همان سبک مسطح مترو.

به هر حال، طراحی تخت در سال 2013 با عرضه اپل به اوج خود رسید iOS 7 به طور اساسی نشان می دهد طراحی جدیدبا عناصر رابط کاربری کاملاً بازطراحی شده، از جمله آیکون ها و فونت ها. اپل ایجاد کرد اصول بصری UI و طراحی آیکون .

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

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

بنابراین، سه نمونه جهانی از طراحی تخت از شرکت ها وجود دارد که بدون آنها تصور آن دشوار است دنیای مدرنفن آوری ها:

طراحی مترو مایکروسافت

طراحی اپل iOS 7

طراحی متریال گوگل

3. نظافت را به خاطر بسپارید

ظاهراً به دلیل فقدان عناصر سه بعدی و جلوه های واقع گرایانه مانند گرادیان ها، بافت ها، هایلایت ها، رنگ های میانی، سایه ها، طراحی مسطح «مسطح» نامیده می شود. به یاد داشته باشید، سبک مسطح یک روش دو بعدی (مسطح) برای به تصویر کشیدن اشیا است.

علاوه بر این، در طراحی تخت، اشیاء به شکلی بسیار ساده و سبک به تصویر کشیده می شوند.

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

مینیمالیسم این روزها به یک روند جهانی تبدیل شده است: سادگی اشکال و استفاده از لبه های تیز، طراحی تمیز و دلپذیری را ایجاد می کند. فرم های ساده قابل درک تر و راحت تر هستند. این طرح را مینیمال، تمیز نگه می دارد و از ایجاد ظاهری شلوغ و نامرتب جلوگیری می کند.

4. عالی

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

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

در مورد برنامه Adobe Illustratorسپس از گرافیک برداری متشکل از منحنی ها و خطوط به نام بردار استفاده می کند که با فرمول های ریاضی داده می شود.

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

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

5. رنگ

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

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

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

برخی از آنها برای انواع طرح ها و تصویرسازی ها مناسب هستند، نه فقط طرح های تخت. به عنوان مثال، Adobe Color CC که بیشتر به عنوان Cooler شناخته می شود. امروزه دسترسی به آن هم از طریق وب سایت و هم مستقیماً از طریق محصولات Adobe وجود دارد. خنک کننده ابزار بسیار انعطاف پذیری است که به شما امکان می دهد پالت رنگ خود را ایجاد کنید یا از بین پالت های سفارشی از کتابخانه انتخاب کنید.

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

چندین سرویس مشابه دیگر با پالت های سفارشی وجود دارد که می تواند مفید باشد. با این حال، یک ابزار به طور خاص برای طراحی تخت ساخته شده است. FlatUIColors.com توسط Designmodo یک سرویس با مجموعه ای از رنگ های "مسطح" است که کار با آن بسیار راحت است. این سایت در بین طراحانی که به دنبال انتخاب رنگ مناسب برای طرح های عالی هستند بسیار محبوب شده است. آن را امتحان کنید!

و شما می توانید تنوع رنگ ها و پالت های بیشتری را در آن پیدا کنید راهنمای طراحی متریال گوگل.

6. سایه های بلند

همانطور که در بالا ذکر شد، طراحی مسطح با سادگی، فضای خالی زیاد مشخص می شود - به همین دلیل است که فلت استفاده از هر گونه افکت را رد می کند. با این حال، یک اثر وجود دارد که مخصوص طراحی تخت است. این اثر تبدیل به یک روند و ویژگی بارز تخت شده است.

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

این اثر باعث می شود که جسم سه بعدی تر شود، اما در عین حال آن را در چارچوب یک طرح مسطح قرار می دهد.

7. کار با فونت

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

Flat معمولا از سبک های ساده فونت استفاده می کند که کل طرح را تمیز و خوانا می کند. اگر از محصولات Adobe استفاده می کنید، می توانید فونت های رایگان زیادی را در Adobe Typekit بیابید. شما همچنین می توانید بسیاری از فونت های رایگان خوب را در Font Squirrel پیدا کنید. اما اگر قصد دارید از فونت برای مقاصد تجاری استفاده کنید، خواندن مجوز را فراموش نکنید.

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

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

8. مزایا و معایب طراحی تخت

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

طرفداران

محبوبیت

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

سادگی

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

روشنایی

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

ایرادات

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

عدم پاسخگویی

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

مشکلات تایپوگرافی

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

بصری ضعیف

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

9. روندهای آینده طراحی تخت

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

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

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

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

نتیجه گیری

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

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

بالاخره چه چیز دیگری در مورد طراحی تخت باید ذکر شود؟

اگر واقعاً تخت را با لبه‌های تیز، رنگ‌های شاداب و فونت‌های واضح، تمیزی و مینیمالیسم آن دوست دارید، آن را دنبال کنید!

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

طراحی تخت- یک روند نسبتاً جدید که کل جامعه طراحی از صحبت کردن در مورد آن دست بر نمی دارد.

کسی آن را دوست دارد، کسی مطلقاً نمی تواند به آن عادت کند و حتی از آن متنفر است.

طراحی خوب قبل از هر چیز باید مشکل کسب و کار مشتری را حل کند، این یک سوال ثانویه است. اگر طراح به عنوان یک سبک یا ابزار - "طراحی تخت" - را انتخاب کرده است! اما فراموش نکنید که این سبک برای همه پروژه ها مناسب نیست.

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

اصول اصلی طراحی تخت عبارتند از:

1. بدون اثرات

2. عناصر ساده

3. تاکید بر تایپوگرافی

4. تاکید بر رنگ

5. رویکرد مینیمالیستی

6. طراحی مسطح "تقریبا".

حالا بیایید به هر یک از اصول طراحی تخت با جزئیات بیشتری نگاه کنیم:

بدون اثرات

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

سبک تخت دارای یک تلفظ است ظاهربدون ویژگی های اضافیو عناصر بر حس قوی سلسله مراتب ترکیبی و قرار دادن عناصر متکی است. این ساختار درک طراحی و شهودی بودن را برای هر کاربر آسان تر می کند.

عناصر ساده

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

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

تاکید بر تایپوگرافی

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

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

فونت باید یک ابزار کمکی برای کمک به کاربران در تعامل با رابط ما باشد. برچسب روی دکمه ها و سایر عناصر نباید پیچیده باشد.

تاکید بر رنگ

رنگ بخش مهمی از طراحی است. پالت طراحی مسطح اغلب بسیار روشن تر و رنگارنگ تر از سایر سبک های طراحی است. در مقایسه با طراحی معمولی که بر روی 2-3 رنگ تمرکز می کند، طراحی تخت می تواند شامل 6 یا حتی 8 سایه رنگ باشد.

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

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

می توانید نمونه های خوبی از طراحی تخت را در http://market.envato.com/ بیابید. طرح‌بندی‌ها، آیکون‌ها و قالب‌های زیادی وجود دارد که به شما یک ایده واضح از ظاهر طراحی مدرن می‌دهد. .

1. طراحی تخت چیست؟

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

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

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

2. کمی تاریخ

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

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

در سال 2010 مایکروسافت ویندوز فون 7 را منتشر کرد که از طراحی مسطح با لبه های تیز و گرافیک ساده به ارث رسیده از یکی از محصولات اولیه خود استفاده می کرد.مایکروسافت (Zune). بعداً مایکروسافت با الهام از موفقیت این سیستم عامل را منتشر کرد سیستم ویندوز 8، بر اساس همان سبک مسطح مترو.

به هر حال، طراحی تخت در سال 2013 با عرضه اپل به اوج خود رسید iOS 7، طراحی کاملاً جدید را با عناصر رابط کاربری کاملاً بازطراحی شده از جمله نمادها و فونت ها نشان می دهد. اپل ایجاد کرد اصول بصری UI و طراحی آیکون .

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

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

بنابراین، سه نمونه جهانی از طراحی تخت از شرکت ها وجود دارد که بدون آنها تصور دنیای مدرن فناوری دشوار است:

طراحی مترو مایکروسافت

طراحی اپل iOS 7

طراحی متریال گوگل

3. نظافت را به خاطر بسپارید

ظاهراً به دلیل فقدان عناصر سه بعدی و جلوه های واقع گرایانه مانند گرادیان ها، بافت ها، هایلایت ها، رنگ های میانی، سایه ها، طراحی مسطح «مسطح» نامیده می شود. به یاد داشته باشید، سبک مسطح یک روش دو بعدی (مسطح) برای به تصویر کشیدن اشیا است.

علاوه بر این، در طراحی تخت، اشیاء به شکلی بسیار ساده و سبک به تصویر کشیده می شوند.

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

مینیمالیسم این روزها به یک روند جهانی تبدیل شده است: سادگی اشکال و استفاده از لبه های تیز، طراحی تمیز و دلپذیری را ایجاد می کند. فرم های ساده قابل درک تر و راحت تر هستند. این طرح را مینیمال، تمیز نگه می دارد و از ایجاد ظاهری شلوغ و نامرتب جلوگیری می کند.

4. عالی

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

با Adobe Photoshop، همه چیز در اینجا واضح است: با گرافیک شطرنجی کار می کند که بر اساس پیکسل است.

در مورد برنامه Adobe Illustrator، از گرافیک برداری متشکل از منحنی ها و خطوط به نام بردار استفاده می کند که با فرمول های ریاضی داده می شود.

روزی روزگاری، Adobe Illustrator برنامه مناسبی برای ایجاد گرافیک پیکسلی کامل نبود. خبر خوب این است که آخرین نسخه های Illustrator به ابزاری عالی برای ایجاد گرافیک خوب تبدیل شده اند.

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

5. رنگ

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

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

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

برخی از آنها برای انواع طرح ها و تصویرسازی ها مناسب هستند، نه فقط طرح های تخت. به عنوان مثال، Adobe Color CC که بیشتر به عنوان Cooler شناخته می شود. امروزه دسترسی به آن هم از طریق وب سایت و هم مستقیماً از طریق محصولات Adobe وجود دارد. خنک کننده ابزار بسیار انعطاف پذیری است که به شما امکان می دهد پالت رنگ خود را ایجاد کنید یا از بین پالت های سفارشی از کتابخانه انتخاب کنید.

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

چندین سرویس مشابه دیگر با پالت های سفارشی وجود دارد که می تواند مفید باشد. با این حال، یک ابزار به طور خاص برای طراحی تخت ساخته شده است. FlatUIColors.com توسط Designmodo یک سرویس با مجموعه ای از رنگ های "مسطح" است که کار با آن بسیار راحت است. این سایت در بین طراحانی که به دنبال انتخاب رنگ مناسب برای طرح های عالی هستند بسیار محبوب شده است. آن را امتحان کنید!

و شما می توانید تنوع رنگ ها و پالت های بیشتری را در آن پیدا کنید راهنمای طراحی متریال گوگل.

6. سایه های بلند

همانطور که در بالا ذکر شد، طراحی مسطح با سادگی، فضای خالی زیاد مشخص می شود - به همین دلیل است که فلت استفاده از هر گونه افکت را رد می کند. با این حال، یک اثر وجود دارد که مخصوص طراحی تخت است. این اثر تبدیل به یک روند و ویژگی بارز تخت شده است.

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

این اثر باعث می شود که جسم سه بعدی تر شود، اما در عین حال آن را در چارچوب یک طرح مسطح قرار می دهد.

7. کار با فونت

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

Flat معمولا از سبک های ساده فونت استفاده می کند که کل طرح را تمیز و خوانا می کند. اگر از محصولات Adobe استفاده می کنید، می توانید فونت های رایگان زیادی را در Adobe Typekit بیابید. شما همچنین می توانید بسیاری از فونت های رایگان خوب را در Font Squirrel پیدا کنید. اما اگر قصد دارید از فونت برای مقاصد تجاری استفاده کنید، خواندن مجوز را فراموش نکنید.

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

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

8. مزایا و معایب طراحی تخت

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

طرفداران

محبوبیت

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

سادگی

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

روشنایی

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

ایرادات

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

عدم پاسخگویی

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

مشکلات تایپوگرافی

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

بصری ضعیف

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

9. روندهای آینده طراحی تخت

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

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

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

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

نتیجه گیری

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

امیدوارم چیز جدیدی از این مقاله یاد گرفته باشید یا حداقل برایتان جالب بوده باشد. اگر قبلاً آن را انجام نداده اید، باید طراحی تخت را امتحان کنید.

بالاخره چه چیز دیگری در مورد طراحی تخت باید ذکر شود؟

اگر واقعاً تخت را با لبه‌های تیز، رنگ‌های شاداب و فونت‌های واضح، تمیزی و مینیمالیسم آن دوست دارید، آن را دنبال کنید!

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

نسبتاً اخیراً چنین جهت طراحی مانند FLAT - طراحی یا طراحی مسطح محبوب شده است.

کاربران ویندوز 8 و جدیدتر از قبل با طراحی FLAT آشنا هستند، زیرا اولین چیزی که هنگام بوت کردن سیستم می بینند این صفحه است.

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

FLAT - طراحی دارای ویژگی های زیر است:

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

تایپوگرافی، هندسه، به منصه ظهور می رسد. به خصوص وقتی صحبت از طراحی وب می شود.

هارمونی و. در طراحی از تعداد محدودی رنگ استفاده شده است. در اینجا نمونه ای از پالت طراحی FLAT محبوب است.

استفاده از آیکون های خلاقانه آموزنده

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

زمانی محبوب ترین گرایش در طراحی وب سایت وب 2.0 بود. اکنون طراحی FLAT جای آن را گرفته است. مد تمایل دارد به گذشته فراموش شده بازگردد تا چیزی جدید از آن بسازد. چه کسی می داند چه زمانی طراحی FLAT از مد می افتد، اما در حال حاضر، از سادگی، هماهنگی و اطلاع رسانی روند فعلی لذت ببرید. به هر حال، طراحی تخت قبلاً در دهه 80 محبوب بود، اما پس از آن بود ویژگی های فنی، عدم امکان نمایش سایه ها و گرادیان ها. و اکنون اکثر شرکت های پیشرو فناوری اطلاعات به طراحی Flat روی آورده اند.

خوب، ما نیز با جهان در حال تغییر سازگار خواهیم شد. در مقاله بعدی نحوه ایجاد آیکون به سبک FLAT با استفاده از اشکال ساده در فتوشاپ را به شما نشان خواهم داد.

اگر نشریات من مورد توجه شما هستند، پس پیشنهاد می کنم که از آن آگاه باشید آخرین به روزرسانی هاسایت سایت

(بازدید شده 2 635 بار، 1 بازدید امروز)