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



چه اتفاقی افتاد ؟

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

اطلاعات بیش از حد

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



ساده بودن با ارزش است

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

تاکید میکنیم، مهم محتوا است

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

سواد فن آوری

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



تاثیر فن آوری

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

طراحی واکنش گرا

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

بهترین راه کارهای عملی

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

قبل از اینکه شروع کنید

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

روند کاری

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

وقتی طراحی مینیمال میکنم برای الهام گرفتن به دوران قبل از ذهور کامپیوترهای شخصی فکر میکنم که بهترین ها رو با کمترین امکانات انجام میدادند. شاید حالا بهترین زمان برای برگشتن و نگاه به طرح های طراحان بزرگ مثل Josef Müller-Brockmann و Wim Crouwel باشه.
دست کشیدن از کار هم مفیده. طرح های فلت و مینیمال در نکات ظریف و دقیق تعریف میشن، به همین دلیل دست کشیدن از کار برای یک مدت کوتاه ، استراحت کردن و برگشتن دوباره به پروژه مفیدتر از سر و کله زدن مداوم و بی نتیجه است.
مقایسه نسخه های مختلف در کنار هم مفید هست. اگر در مورد قسمتی از طرح خودتون دو دل هستید بهتر هست ۲ نسخه از اون تهیه کرده و هر ۲ نسخه رو در کنار هم مقایسه کنید، مطمئن باشید بهترین طرح همیشه برنده خواهد شد.
به این دلیل که تغییر مقیاس های قالب نسبت به نمایشگرهای مختلف بسیار بسیار مهم است پیشنهاد میشه طرح خودتون رو تا حد ممکن با دستگاه های مختلف بررسی کنید تا مطمئن شوید به درستی کار میکنه.
همیشه وقتی در حال کار هستید از خودتان سوال کنید که “آیا واقعا به این نیاز هست؟” علاقه مند شدن به یک المنت یا ایده ساده است اما باید تا حد ممکن از افراط گرایی و المنت های زائد دوری کرد.

گرید

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

نقش گریدها فقط ایجاد نظم بصری نیست. از گرید برای تعریف محتوا و گروه های توابع استفاده کنید. شما همیشه برای گروه بندی یک دسته از اشیاء نیاز به خط یا جعبه (box) ندارید. تراز بندی و فاصله دادن هوشمند به کاربر کمک خواهد کرد تا با اسکلت طرح شما آشنا شوند.
سعی کنید گرید را بین المنت های مهم تقسیم کنید تا نظر بازدیدکننده را جلب کنید. بدون حقه های ساختگی سه بعدی (۳D) در طرح های فلت، شما باید از اصول بنیادین تراز بندی برای طرح خودتون استفاده کنید تا یک سلسله و هرم بصری ایجاد کنید.
live_school_mini

رنگ بندی

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

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



تایپوگرافی

وقتی به طراحی طرح های فلت میرسیم تایپوگرافی قهرمان داستان به حساب میاد که ما رو نجات میده.

اگرچه از فونت های serif هم میتونید استفاده کنید اما فونت های san serif بسیار بهتر به نمایش در میان.
برای font-family از یک فونت که استایل ها و حالت های مختلفی داره استفاده کنید. اگرچه به همه این حالت ها نیاز نخواهید داشت اما به شما در تعریف یک سلسله و هرم بصری کمک شایانی میکنه.
از استفاده ۲ فونت مختلف با حالت های متفاوت برای ایجاد یک نظم بصری نترسید. مثلا سعی کنید یک فونت با اندازه بزرگ و استایل باریک برای تیترها و یک فونت با اندازه معمولی و استایل ضخیم تر برای محتوای متن استفاده کنید.
به این مسئله توجه داشته باشید که فونت مورد نظر شما باید در نمایشگرهای مختلف به خوبی عمل کنه.