یکی از نگرانی های طراحان در مورد این موضوع این است که آیا این روند پایدار می ماند یا فقط یک مد و روند زودگذر است.
صرف نظر از آینده و صحبت هایی علیه طراحی تخت ،طراحان برای اجرای این روند در برخی از کارهای خود وسوسه شده اند.
در این مقاله ، ما به سبک، ریشه های تاریخی آن و چگونگی شروع به طراحی تخت اشاره می کنیم.
هشدار قبل از شروع: این نوع طراحی برای زیبایی و واسط کاربری راحت تر می تونه به کار بره ، اما لزوما برای هر پروژه ای مناسب نیست. وبرای استفاده از این نوع طراحی باید با استفاده از دید بصری افراد مفهوم خود را از طرح ایجاد شده به دیگران برسانید.
طراحی تخت چیست؟
همان طور که از نام آن پیداست، طراحی تخت یک طراحی تخت و صاف از طرح مورد نظر
می باشد که در آن عناظر اضافی ای مانند
سایه،سطح مورب ،بافت (Texture) و
گرادینت که باعث نمایش طرح مان به صورت سه بعدی می شود حذف شده است.
در اصل طراحی تخت در دو بعد و بدون از دست دادن عملکردهای آن در رابط کاربری ایجاد می شود و این روند طراحی بدون استفاده از عناصر و المان ها کار رو برای طراح کمی سخت می کند.
طراحی تخت یک آرزو برای ایجاد رابط های دیجیتالی
بیشتر، و همجنین ایجاد
نوآوری درالمان
های استفاده شده در دستگاه های دیجیتال می باشد.
یک مثال خوب از طراحی مسطح مجموعه آیکن طراحی شده برای مک OSX می باشد.شما به راحتی می توانید ببینید که چگونه آیکون بدون جزئیات ، سایه ها و بافت سبک و شکل خود را حفط کرده است.
تازیخچه ای از طراحی تخت :
از لحاظ تاریخی، روند طراحی به طور مداوم مابین طرح پیچیده
و ساده تغییر می کند.
اصطلاح "طراحی تخت" توسط Allan Grinshtein ابداع شد و اولین بار در سایت LayerVault استفاده گردید. آلن در مقاله خود با عنوان "عصر طراحی تخت"، توضیح می دهد که رابط تخت رابط های ظریفی هستند که با کمترین عناصر بیشترین تاثیر رو بر افراد می گذارند.
اکثر برنامه های طراحی شده با این روند دارای پنج ویژگی می باشند
1- بدون المان های اضافی
2- طراحی ساده عناصر
3- تمرکز بر تایپوگرافی
4- تمرکز بر رنگ
5- تمرکز بر رویکردی مینیمالیست
بزرگترین استفاده کننده در طراحی
تخت، و در خط مقدم بودن این سبک می توان ،
مایکروسافت را نام برد. در سال 2006، مایکروسافت
نرم افزار پخش موسیقی Zune را راه
اندازی کرد. که در نوع خود نرم افزار فوق العاده گرانی بود .اما
اگر چه راه اندازی این نرم افزار یک موفقیت تجاری محسوب نمی شد
ولی اولین گام
در تعریف طراحی های مایکروسافت برای سالهای بعدی بود. رابط Zune طراحی می نیمالی بود با تمرکز بر نور و تایپوگرافی بزرگ، و یک رابط بدون جزئیات اضافی
و عناصر.
از سال 2006 تا امروز، مایکروسافت از Zune به عنوان یک پایه و اساس برای توسعه رابط بصری و تبدیل به مسطح بودن و حذف المان های اضافی استفاده کرده است،.محصولات دیگر مایکروسافت نیز مانند ایکس باکس 360 داشبورد، یک رابط مربع اولیه است که تحت تاثیر این سبک از طراحی ساده و تایپوگرافی استفاده می کند. ویندوز 8 “Metro UI” احتمالا یکی از بزرگترین تغییرات اساسی رابط در مایکروسافت بود. همچنین رابط کاربری ساده در مدت کوتاهی در ویندوزفون 8 در ویندوزفون 7 جایگزین شد.
چگونگی طراحی یک طرح تخت
دکمه ها
هنگام ایجاد یک دکمه، از یک
قاب ، گرادینت و سایه
استفاده می کنیم که این کار باعث ساخت
دکمه به حالت برجسته نسبت به بک گراند و متن می شود. این کار باعث تشخیص راحت و قابل کلیک بودن دکمه می شود.
هنگام ایجاد یک دکمه تخت، شما از این جزئیات نمی توانید استفاده کنید، بنابراین تمرکز شما باید روی سازماندهی و کنتراست رنگ باشد. شما می توانید از سایه تا زمانی که دکمه را در حالت تخت نمایش دهد استفاده کنید.
فرم ها
فرم یک عنصر بسیار مهم در طراحی
تخت می باشند. برای ساخت مناطق متن، ورودی ها و دراپ دان ها نباید از
سایه استفاده کرد شما می توانید این کار را با یک
ظاهر ساده طراحی شده از عناصر فرم و با استفاده از CSS تغییر دهید.همچنین شما می
توانید از این آدرس پلاگین uniformjs را دانلود کرده
و برای استفاده از طراحی تخت از این پلاگین استفاده کنید
تایپوگرافی
تایپوگرافی یک عنصر بسیار مهم در طراحی مسطح است. از آنجا که در
این طراحی از حداقل رابط ها استفاده می شود، تایپوگرافی می تواند کمک زیادی
در این طراحی به شما بکند.شما می توانید فن چاپ به شما کمک کند شما می
توانید از یک حالت پیش فرض و فونتی خاص که برای این طراحی ایجاد شده استفاده کنید. از آنجا که بک گراندی ساده داریم،فونت استفاده شده باید حالت برجسته داشته باشه .برای الهام
گرفتن می توانید دراین آدرس تایپوگرافی های مختلف این سبک را ببینید
رنگ
یک بخش اساسی از طراحی یک رابط
تعریف یک پالت رنگ می باشد..طرح های رنگی مورد استفاده در
رابط طراحی مسطح
باید جسورانه و روشن تر از پالت های رنگی دیگر باشد. سایت Flat UI Colors با در نظر گرفتن این طراحی منبع بزرگی برای انتخاب رنگ این طراحی می باشد.
هنگام انتخاب رنگ ، به یاد داشته باشید که چه رنگی به کاربران برای حرکت در وب سایت به آنها کمک بیشتری خواهد کرد.مطمئنا برای تعیین رنگ در وب سایت دکمه هایی مانند "ثبت نام"، "ارسال"، "بیشتر..."، و ... همگی باید از یک رنگ در بک گراند با کنتراست زیاد استفاده کنند. اگر لوگو یا نام تجاری شما یک رنگ اصلی داشته باشه باید از اون در طراحی دکمه ها استفاده بشه. البته نباید بیش از حد نیز از آن استفاده کرد چون استفاده بیش از حد منجر به یک ریسک برای کمتر دیده شدن عناصر توسط بازدیدکنندگان می شود
شما همچنین باید از یک رنگ ثانویه نیز استفاده کنید.، معمولا یک خاکستری روشن را انتخاب کنید. به این ترتیب شما می توانید دو دکمه را کنار یکدیگر بگذارید.، به عنوان مثال "ارسال" و "لغو"، دکمه "ارسال" را با رنگ اصلی و "لغو" را با رنگ ثانویه. پس انتخاب رنگ است یک خصوصه مهم در طراحی تخت می باشد، زیرا هنگام استفاده از طراحی تخت این رنگ است که به کاربر برای تشخیص دکمه ها، عناصر و ... کمک می کند
اشکال
معمولا، زمان ایجاد دکمه بسته به سبک سایت از مستطیلی با گوشه های گرد یا با گوشه های تیز استفاده
می کنید.همچنین . شما می توانید خلاق تر باشید و از اشکالی مانند مانند دایره، مثلث و یا حتی شکل های
سفارشی استفاده کنید ، اما به خاطر داشته
باشید که راه دومی ممکن است کمی
مخاطره آمیز باشد. برای استفاده از اشکال باید از
حفظ انسجام در سازمادهی مابین محتوی و کاربر مطمئن
در زیر شما می توانید تفاوت
بین یک دکمه را ببینید. دکمه های
استفاده شده در Twitter bootstrap
دارای گوشه های گرد و گرادینت و سایه می باشد در حالی که دکمه های استفاده شده در Flatstrap فاقد این
مشخصه ها می باشند و صرفا با حرکت بر روی
موس حالتی تیره تر پیدا می کنند.
در چه جاهایی باید از طراحی تخت استفاده کرد؟
طراحی تخت باید در حد متوسط استفاده شود. و برای هر وب سایتی مناسب نمی باشد.به عنوان مثال، مسطح بودن در طراحی سایت های نمونه
کار (portfolio) و
یا وب سایت هایی با فن آوری پیشرفته می تواند شما رو یک طراح بزرگ جلوه دهد.اما اگر شما در حال تلاش برای نمایش پیچیده عناصر دریک سایت می باشید
طراحی تخت برای شما محدودیت می آفریند.مثلا طراحی یک سایت برای کودکان مستلزم رنگی
بودن و پر بودن با عناصر سرگرم کننده وکاراکترهای متحرک می باشد و یا زراحی یک وب
سایت بازی مستلزم وجود گرافیک و جلوه های وییه می باشد.پس در تمتمی وب سایت ها
استفاده از عناصر تخت صحیح نمی باشد.
همیشه در ذهن خود داشته باشید که وب سایت شما با یک طراحی تخت می تواند پیام خود را به مخاطبانش برساند اگر جوابتان مثبت بود از طراحی تخت استفاده کنید و در غیر این صورت به هیچ وجه از آن استفاده نکنید.
مهران بابایی