academyIT
February 12th, 2017, 14:49
در این مقاله میخوام با تو دوست عزیز درباره طراحی فلت یا همون طراحی تخت صحبت کنم، همه ما دنبال به روز ترین طراحی و شیوه های جدید طراحی هستیم یکی از شیوه ها طراحی فلت یا تخت می باشد که میخوام بیشتر توی این مقاله در رابطه با اون توضیح بدم :
در این مقاله میخوام با تو دوست عزیز درباره طراحی فلت یا همون طراحی تخت صحبت کنم، همه ما دنبال به روز ترین طراحی و شیوه های جدید طراحی هستیم یکی از شیوه ها طراحی فلت یا تخت می باشد که میخوام بیشتر توی این مقاله در رابطه با اون توضیح بدم :
فلت – Flat در معنی تخت و چهارگوش است. در طراحی فلت از هیچ گونه آیتم سه بعدی استفاده نمی شود و تمامی : تصاویر , آیکون های , مطالب , افکت ها و … به صورت دو بعدی هستند!
سبک طراحی فلت از سبک هایی است که سالهای گذشته وارد طرح های فارسی شده و مدت هاست توسط طراحان خارجی در جهان مورد استفاده قرار میگیره که این هم مطقیه چون همیشه وب فارسی نسبت به وب مدرن دنیا یک مقدار عقبه .
ما روشهای قدیمی تری برای طراحی وب سایت داشتیم که پر از طیف های رنگی و سایه ها و خمش های مختلف در گوشه ها ی المان های مختلف بود که در سالهای اخیر طرفدار های بسیار زیادی هم داشتن اما در حال حاضر پر طرفدار ترین سبک بین طراحان وب طراحی فلت هست !
طراحی فلت یکی از سبک های جدید و شناخته شده در طراحی سایت هست، توی این سبک طراحی بیشتر از قبل به کارآیی و کارآمدی سایت اهمیت میدیم تا کاربران به راحتی به چیزهایی که توی سایت میخوان دسترسی داشته باشن ، یکی از مواردی که در طراحی سایت بهش اهمیت زیادی داده میشه بحث UX هست که جز جدانشدنی از طراحی فلت هم به حساب میاد ! طراحی فلت یکی از سبک های طراحی فول CSS در طراحی سایت به حساب میاد که در عین سادگی بسیار شیک و حرفه ای به حساب میاد .
این سبک طراحی فقط محدود به طراحی وب سایت نیست بلکه امروزه این نوع طراحی رو توی رابط کاربری تمام اپلیکیشن های به روز موبایل هم میبینیم ، در واقع در حال حاضر این برای طراحان وب سایت و طراحان اپلیکیشن جا افتاده که به جای طرح های زرق و برق دار و شلوغ که پر از المنت های مختلف هستند به سمت طراحی های ساده و در عین حال کاربردی برن !
در طراحی فلت دیگه مثل طراحی های سنتی سایه‌های مختلف ، طیف های رنگی پیچیده ، تکسچرها و پترنها استفاده نمی‌شه و به جای اون طراح هایساده و دارای ساختار تمیز و مرتب با فضای خالی زیاد ترجیح داده میشه توی این روش رنگها ساده اصطلاحا solid هستند و تمام المان ها دوبعدی می باشند و گوشه ها همگی تیز هستند و تمام دکمه ها و المنت ها بدون سایه و طیف رنگی طراحی میشوند .
اولین بار مایکروسافت در طراحی ویندوز ۸ و رابط کاربری مترو این نوع طراحی رو استفاده کرد و بعد از اون گوگل هم در محصولات و سرویس‌های خود از فلت دیزاین استفاده کرد. اگر چه قبلا هم نوعی طراحی فلت وجود داشته اما مایکروسافت نقش پر رنگی در جا انداختن و ارائه یک تعریف جدید در قالب یک نمونه‌ی عملی از طراحی تخت داره و در واقع این نوع طراحی به مایکروسافت بدهکاره !
همونطور که گفتم در طراحی فلت از هیچ گونه آیتم سه بعدی استفاده نمی شه و تمامی عناصر صفحه باید به صورت تخت و دوبعدی طراحی بشه.یکی دیگر از علل محبوبیت طراحی فلت – Flat Design رنگ بندی بسیار زیبای اون هستش. چون معمولا در طراحی فلت از رنگ های شاد و سبک برای حرفه ای نشان دادن طراحی قالب استفاده می شه در واقع در این نوع طراحی قوانینی وجود داره که شما برای اینکه بتونید اسم طراحی خودتون رو فلت بذارید باید از این قوانین پیروی کنید.
طراحی فلت باید زنده و جذاب باشه و در عین حال ساده ، نه خیلی پیچیده و حرفه ایاین نوع طراحی اونقدر محبوب هست که سایتهایی برای تولید المنت های مختلف اون به وجود آمده ، مثل سایت http://www.flaticon.com که آیکونهای بسیار زیادی رو که اکثر هم رایگان هستند در طراحی سایت در اختیار شما میزاره ، در اینجا توجه شما رو به یک سری از این آیکون ها جلب میکنم :
http://academyit.net/uploads/2017/02/148653629970.jpg
قبلا ما در طراحی سایت ها برای دسترسی به آیکونهای و المنت های مختلف سراغ سایت هایی مثل https://www.iconfinder.com میرفتیم و از این نوع آیکونها و المنت ها در طراحی سایت هامون استفاده میکردیم
http://academyit.net/uploads/2017/02/148653644680.jpg
استفاده از طراحی فلت
چرا باید سراغ طراحی فلت بریم ؟
این روش در عین سادگی با توجه به استفاده از رنگ های متنوع بسیار چشم نواز هست و به هیچ وجه چشم کاربران رو خسته نمیکنه، مورد بعدی اینه که سبک بودن و عدم وجود شلوغی کار نمایش را برای بینندگان ساده تر خواهد کرد و طرح شما خیلی زیباتر به مخاطب نمایش داده میشه .
ویژگی های اصلی طراحی Flat
ویژگی و هدف اصلی در استفاده از سبک طراحی فلت ، پیاده سازی و رعایت دقیق اصول کاربردپذیری ، دسترسی پذیری و معماری محتوا و اطلاعات به شکلی کاملا بهینه و پایداره . اینکه در این سبک طراحی ما از فضاهای باز و المنت های نسبتا بزرگ استفاده میکنیم بهخاطر اینه که اون چیزی رو در اختیار مخاطب قرار بدیم که به اون نیاز داره و با صرف نظر از زرق و برق های گرافیکی آنچنانی که در سال های گذشته (و چه بسا حال حاضر هم )استفاده میشد دور بشیم و به یک نکته جامع برسیم که اولین و تنها چیزی که از سایر موارد در طراحی صفحات وب و اپلیکیشن ها اهمیت دارد محتوا بر اساس نیاز مخاطبه.
بایدها و نبایدهایی که باید در طراحی فلت رعایت کرد!!!
شما در طراحی فلت حق استفاده از سایه را ندارید.
در طراحی فلت نباید متن یا هر جزء دیگری را برجسته (bevel) ، یا تورفته کرد.
میشه گفت این دوتا مهم ترین قوانین هستن اما حتما بخش پایین رو هم بخونید
استفاده از فونت های ساده ، و ترجیها باریک بدون stroke یا out fill
استفاده از آیکون هایی هماهنگ با رنگ طرح
استفاده از رنگ هایی نزدیک به هم ، به طوری که رنگ ها ناگهان عوض نشوند
استفاده نکردن از رنگ تدریجی یا gradient
سعی کنید از پترن ها در حد امکان استفاده نکنید ، و بجای اونها از رنگ های فلت استفاده کنید
فضا را کاملا پر نکنید! بذارید کمی فضای خالی توی طرح وجود داشته باشه!و…
در زیر چند مورد از ویژگی های اصلی و اساسی این سبک رو به شما یادآور خواهم شد
استفاده نامحدود از رنگ ها
عدم استفاده از رنگ های جیق و براق
استفاده از آیکن های تخت یا Flat
استفاده از تصاویر گرافیکی تخت یا Flat
استفاده بهینه از فضاها در طرح گرافیکی و رعایت فواصل مناسب برای المنت ها
استفاده از فونت های زیبا و عموما رسمی با ابعاد بزرگ و قابل دید
عدم استفاده از Gradient و استفاده ۱۰۰% از رنگ های تخت
عدم استفاده از بافت یا Pattern
عدم استفاده از Border های ضخیم
عدم استفاده از سایه های نرم
ادامه مطلب http://academyit.net/articles/94
در این مقاله میخوام با تو دوست عزیز درباره طراحی فلت یا همون طراحی تخت صحبت کنم، همه ما دنبال به روز ترین طراحی و شیوه های جدید طراحی هستیم یکی از شیوه ها طراحی فلت یا تخت می باشد که میخوام بیشتر توی این مقاله در رابطه با اون توضیح بدم :
فلت – Flat در معنی تخت و چهارگوش است. در طراحی فلت از هیچ گونه آیتم سه بعدی استفاده نمی شود و تمامی : تصاویر , آیکون های , مطالب , افکت ها و … به صورت دو بعدی هستند!
سبک طراحی فلت از سبک هایی است که سالهای گذشته وارد طرح های فارسی شده و مدت هاست توسط طراحان خارجی در جهان مورد استفاده قرار میگیره که این هم مطقیه چون همیشه وب فارسی نسبت به وب مدرن دنیا یک مقدار عقبه .
ما روشهای قدیمی تری برای طراحی وب سایت داشتیم که پر از طیف های رنگی و سایه ها و خمش های مختلف در گوشه ها ی المان های مختلف بود که در سالهای اخیر طرفدار های بسیار زیادی هم داشتن اما در حال حاضر پر طرفدار ترین سبک بین طراحان وب طراحی فلت هست !
طراحی فلت یکی از سبک های جدید و شناخته شده در طراحی سایت هست، توی این سبک طراحی بیشتر از قبل به کارآیی و کارآمدی سایت اهمیت میدیم تا کاربران به راحتی به چیزهایی که توی سایت میخوان دسترسی داشته باشن ، یکی از مواردی که در طراحی سایت بهش اهمیت زیادی داده میشه بحث UX هست که جز جدانشدنی از طراحی فلت هم به حساب میاد ! طراحی فلت یکی از سبک های طراحی فول CSS در طراحی سایت به حساب میاد که در عین سادگی بسیار شیک و حرفه ای به حساب میاد .
این سبک طراحی فقط محدود به طراحی وب سایت نیست بلکه امروزه این نوع طراحی رو توی رابط کاربری تمام اپلیکیشن های به روز موبایل هم میبینیم ، در واقع در حال حاضر این برای طراحان وب سایت و طراحان اپلیکیشن جا افتاده که به جای طرح های زرق و برق دار و شلوغ که پر از المنت های مختلف هستند به سمت طراحی های ساده و در عین حال کاربردی برن !
در طراحی فلت دیگه مثل طراحی های سنتی سایه‌های مختلف ، طیف های رنگی پیچیده ، تکسچرها و پترنها استفاده نمی‌شه و به جای اون طراح هایساده و دارای ساختار تمیز و مرتب با فضای خالی زیاد ترجیح داده میشه توی این روش رنگها ساده اصطلاحا solid هستند و تمام المان ها دوبعدی می باشند و گوشه ها همگی تیز هستند و تمام دکمه ها و المنت ها بدون سایه و طیف رنگی طراحی میشوند .
اولین بار مایکروسافت در طراحی ویندوز ۸ و رابط کاربری مترو این نوع طراحی رو استفاده کرد و بعد از اون گوگل هم در محصولات و سرویس‌های خود از فلت دیزاین استفاده کرد. اگر چه قبلا هم نوعی طراحی فلت وجود داشته اما مایکروسافت نقش پر رنگی در جا انداختن و ارائه یک تعریف جدید در قالب یک نمونه‌ی عملی از طراحی تخت داره و در واقع این نوع طراحی به مایکروسافت بدهکاره !
همونطور که گفتم در طراحی فلت از هیچ گونه آیتم سه بعدی استفاده نمی شه و تمامی عناصر صفحه باید به صورت تخت و دوبعدی طراحی بشه.یکی دیگر از علل محبوبیت طراحی فلت – Flat Design رنگ بندی بسیار زیبای اون هستش. چون معمولا در طراحی فلت از رنگ های شاد و سبک برای حرفه ای نشان دادن طراحی قالب استفاده می شه در واقع در این نوع طراحی قوانینی وجود داره که شما برای اینکه بتونید اسم طراحی خودتون رو فلت بذارید باید از این قوانین پیروی کنید.
طراحی فلت باید زنده و جذاب باشه و در عین حال ساده ، نه خیلی پیچیده و حرفه ایاین نوع طراحی اونقدر محبوب هست که سایتهایی برای تولید المنت های مختلف اون به وجود آمده ، مثل سایت http://www.flaticon.com که آیکونهای بسیار زیادی رو که اکثر هم رایگان هستند در طراحی سایت در اختیار شما میزاره ، در اینجا توجه شما رو به یک سری از این آیکون ها جلب میکنم :
http://academyit.net/uploads/2017/02/148653629970.jpg
قبلا ما در طراحی سایت ها برای دسترسی به آیکونهای و المنت های مختلف سراغ سایت هایی مثل https://www.iconfinder.com میرفتیم و از این نوع آیکونها و المنت ها در طراحی سایت هامون استفاده میکردیم
http://academyit.net/uploads/2017/02/148653644680.jpg
استفاده از طراحی فلت
چرا باید سراغ طراحی فلت بریم ؟
این روش در عین سادگی با توجه به استفاده از رنگ های متنوع بسیار چشم نواز هست و به هیچ وجه چشم کاربران رو خسته نمیکنه، مورد بعدی اینه که سبک بودن و عدم وجود شلوغی کار نمایش را برای بینندگان ساده تر خواهد کرد و طرح شما خیلی زیباتر به مخاطب نمایش داده میشه .
ویژگی های اصلی طراحی Flat
ویژگی و هدف اصلی در استفاده از سبک طراحی فلت ، پیاده سازی و رعایت دقیق اصول کاربردپذیری ، دسترسی پذیری و معماری محتوا و اطلاعات به شکلی کاملا بهینه و پایداره . اینکه در این سبک طراحی ما از فضاهای باز و المنت های نسبتا بزرگ استفاده میکنیم بهخاطر اینه که اون چیزی رو در اختیار مخاطب قرار بدیم که به اون نیاز داره و با صرف نظر از زرق و برق های گرافیکی آنچنانی که در سال های گذشته (و چه بسا حال حاضر هم )استفاده میشد دور بشیم و به یک نکته جامع برسیم که اولین و تنها چیزی که از سایر موارد در طراحی صفحات وب و اپلیکیشن ها اهمیت دارد محتوا بر اساس نیاز مخاطبه.
بایدها و نبایدهایی که باید در طراحی فلت رعایت کرد!!!
شما در طراحی فلت حق استفاده از سایه را ندارید.
در طراحی فلت نباید متن یا هر جزء دیگری را برجسته (bevel) ، یا تورفته کرد.
میشه گفت این دوتا مهم ترین قوانین هستن اما حتما بخش پایین رو هم بخونید
استفاده از فونت های ساده ، و ترجیها باریک بدون stroke یا out fill
استفاده از آیکون هایی هماهنگ با رنگ طرح
استفاده از رنگ هایی نزدیک به هم ، به طوری که رنگ ها ناگهان عوض نشوند
استفاده نکردن از رنگ تدریجی یا gradient
سعی کنید از پترن ها در حد امکان استفاده نکنید ، و بجای اونها از رنگ های فلت استفاده کنید
فضا را کاملا پر نکنید! بذارید کمی فضای خالی توی طرح وجود داشته باشه!و…
در زیر چند مورد از ویژگی های اصلی و اساسی این سبک رو به شما یادآور خواهم شد
استفاده نامحدود از رنگ ها
عدم استفاده از رنگ های جیق و براق
استفاده از آیکن های تخت یا Flat
استفاده از تصاویر گرافیکی تخت یا Flat
استفاده بهینه از فضاها در طرح گرافیکی و رعایت فواصل مناسب برای المنت ها
استفاده از فونت های زیبا و عموما رسمی با ابعاد بزرگ و قابل دید
عدم استفاده از Gradient و استفاده ۱۰۰% از رنگ های تخت
عدم استفاده از بافت یا Pattern
عدم استفاده از Border های ضخیم
عدم استفاده از سایه های نرم
ادامه مطلب http://academyit.net/articles/94