طراحی تخت و کاربرد آن در طراحی رابط کاربری

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

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

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

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

قبل از معرفی طراحی تخت به این نکته توجه کنید که: طراحی تخت ممکن است بتواند رابط کاربری به واقع زیبایی را بسازد، اما لزوماً برای هر نوع پروژه­ای مناسب نیست. به خاطر داشته باشید که اولاً در تلاش برای بدست آوردن کدام نمایش بصری (Visual) هستید و ثانیاً چه نوع رابطه­ای را می­خواهید برقرار کنید.

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

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

ساده کردن یک رابط کاربری با جابجا کردن عناصر اضافی نظیر سایه­ها و انحناها ، بافت­هاوگرادیان، به صورتی که یک تصویر سه بعدی را بسازد.

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

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

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

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

سیر تکاملی طراحی تخت

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

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

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

به عبارت دیگر، یک رابط کاربری مینیمال، عملکرد بهتری در مقایسه با یک رابط پیچیده­تر و پیراسته­تر خواهد داشت.

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

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

1.افکت­های اضافی ندارند.

2. رابط های کاربری عناصر و طراحی ساده دارند.

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

 4. به رنگ­ها توجه دارند.

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

اطلاعات بیشتر در مورد این ویژگی­ها را می­توانید در Principles of Flat Design  به دست آورید.

همچنین می­توانید از Flat UI Free Interface Kit  بازدید کنید.

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

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

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

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

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

دیگر محصولات مایکروسافت نظیر  360 dashboard  Xbox نیز تحت تاثیر این طراحی هستند.

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

چگونه یک طرح تخت  بسازیم؟

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

به این ترتیب، دکمه به عنوان یک عنصر قابل کلیک، شناسایی می­شود.

وقتی که یک دکمه تخت را می­سازید، می­توانید این جزئیات را بکار ببرید و بنابراین تاکید شما باید بیشتر بر سازمان دهی شبکه و تقابل رنگ­ها باشد.

همچنین می­توانید  انحنا و سایه را تا زمانی که تصویر تختی از دکمه مورد نظر در صفحه دارید، استفاده کنید. اما در نظر داشته باشید که تا حد امکان این کنترل­ها را ساده­سازی کنید.

فرم­ها

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

می­توانید این کار را با تغییرِ ظاهر طراحی شده عناصر فرم با استفاده از CSS خودتان انجام دهید: به پست create a simple login form and style برای آشنایی با چگونگی کار این ابزار رجوع کنید.

یا اگر می­خواهید کنترل کاملی بر عناصر مورد استفاده خود داشته باشید، سعی کنید از یک پلاگین که از این تم­ها پشتیبانی می­کند نظیر uniformjs استفاده کنید.

به این ترتیب می­توانید این تم­ها را آن طور که در طراحی خود می­خواهید تغییر دهید یا حتی تم­های جدیدی بسازید.

تایپوگرافی

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

علاوه براین می­توان یک حالت خاص را با استفاده از یک فونت ویژه همراه با نمای کلی از طرح تخت تنظیم کرد. با توجه به اینکه در این طرح یک پس­زمینه ساده داریم، این فونت ویژه، طرح مورد نظر را برای خود بازیابی و تنظیم خواهد کرد.

مشاهده این نوع استفاده از تایپوگرافی در طراحی تخت در لینک typography in flat design چگونگی استفاده دیگر کاربران را از این تکنیک، برای دستیابی به یک نگاه جامع در این زمینه، به شما آموزش می­دهد.

رنگ­ها

بخش بسیار مهم و اصلی در طراحی یک رابط کاربری تعریف پالت رنگ است. برنامه­های رنگی که در رابط کاربری تخت بکار می­رود، از مجموعه پالت­های رنگی، رنگ­های پر­رنگ و روشن را بیشتر انتخاب می­کنند. لینک Flat UI Colors  بر این اساس ساخته شده­است و محیط مناسبی برای بررسی بسیاری از بهترین (و البته متداول­ترین) رنگ­هایی است که امروزه در طراحی تخت کاربرد دارد.

به هنگام استفاده از یک پالت رنگی، به خاطر داشته باشید که انتخاب شما به هدایت کاربر در درون سایت کمک خواهد کرد. از معین کردن یک رنگ خاص برای یک عمل کرد معین در وب سایت خود اطمینان حاصل کنید: دکمه­هایی نظیر Submit, Send, See More و غیره، باید همگی هم­رنگ باشند و در حالت ایده­آل رنگ واضح و روشنی داشته باشند، به گونه­ای که تقابل زیادی با رنگ­های پس­زمینه ایجاد کنند. اگر لوگو یا علامت تجاری شما رنگ خاصی دارد، کاربرد این رنگ خاص باید تحت کنترل باشد. استعمال مفرط از این رنگ، خطر کم اهمیت جلوه دادن آن را در دید کاربر ایجاد خواهد کرد. در مرحله بعد باید دکمه رنگی ثانویه­ای که معمولاً خاکستری روشن است، انتخاب کرد. به این ترتیب دو ردیف خطی از دکمه­ها را ساخته­اید. برای مثال دکمه­های  Submit  وcancel  که عملگر اصلی submit  و عملگر ثانویه cancel  است. انتخاب رنگ در طراحی تخت بسیار مهم است، چراکه به هنگام استفاده از دکمه­های تخت، این رنگ­ها هستند که به کاربران در تشخیص کمک خواهند کرد.

شکل­ها

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

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

در چه مواردی از طراحی تخت استفاده می­کنیم؟

در استفاده از طراحی تخت باید حد اعتدال را نگه داشت. هرچند این نوع طراحی، روش ساده­ای در ساخت رابط­های کاربری مینیمالیستیِ واضح است، اما برای هر نوع وب سایتی نیز مناسب نیست. مثلاً طراحی تخت می­تواند برای طراحی پورتفولیو، یا طراحی یک سایت راه اندازی، با فناوری وب، مناسب باشد، اما در ساخت طراحی­های پیچیده­تر با محدودیت­هایی همراه است.

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

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

قابلیت استفاده همیشه از آنچه دیده می­شود، مهم تر است

اگر تصمیم به استفاده از طراحی تخت برای محصول یا وب سایت خود دارید، مطمئن شوید که پیش نمایش های خود را با افراد حقیقی در لینک test your mockups or prototypes with real people آزموده­اید. به این ترتیب از رسیدن به هدف در کار خود اطمینان حاصل می­کنید.

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

آیا باید از طراحی تخت استفاده کرد یا خیر؟

همیشه به خاطر داشته باشید که روند انجام یک کار صرفاً یک روند کاری است. برای ساخت یک طرح خوب تلاش کنید، اما طرح باید به گونه­ای باشد که اهداف کاربر شما را به طور دقیق محقق سازد. اولویت اصلی ما یک وب سایت کارا و کاربردی است و نه یک وب سایت زیبا و جذاب. همانطور که ولز رایلی گفته است: طراحی، شکلی از حل مسئله است. این را هرگز فراموش نکنید.

منبع: awwwards.com

نویسنده: آنتونیو پاراتاس

ترجمه: تیم یاقوت