اصول طراحی سایت با استانداردهای طراحی فلت

در چند سال اخیر، شاهد یک تغییر سریع در طراحی رابط کاربری نرم افزارها و اپلیکیشن ها، از 3D و اسکیومورفیک (skeuomorphic) به مسطح و مینیمال بوده ایم.

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

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

سر ریز اطلاعات

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

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

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

سواد فناورانه

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

اکثر نرم افزارها به پلتفرمی که در آن اجرا می شوند، محدود شده اند. ابعاد صفحه نمایش و تراکم پیکسلی فاکتورهای محدود کننده سخت افزاری می باشند. یک رابط مینیمال به یک زمینه طراحی خیلی کوچک نیاز دارد. تناسب تایپوگرافیک و ضخامت فونت (font-weight) عمدتا هم زیبایی شناسی و هم قابلیت استفاده از یک طراحی مسطح و فلت را تعیین می کنند.
اگر دستگاه های هدف شما نمی توانند نکات دقیق و ظریف را اجرا کنند، جزء افراد بدشانس محسوب می شوید. همچنان که سایز صفحه نمایش و تراکم پیکسلی روی موبایل ها افزایش پیدا می کند، نوع باریک تر و کوچکتر با وضوح بهتری ارائه می شود. همچنین پشتیبانی از @font-face جذابیت طرح های مینیمال متمرکز بر تایپوگرافی را افزایش داده است.

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

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

قبل از شروع

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

شروع عملیات

فارغ از سبک انتخابی شما، روندی که دنبال می کنید بسیار اهمیت دارد. نکات زیر را برای طراحی وب سایت ساده در ذهن خود داشته باشید:

• هنگام طراحی یک رابط کاربری مینیمال و مسطح، من به دنبال یک الهام و وحی از دوران قبل از ظهور کامپیوتر هستم، زمانی که طراحان و هنرمندان با کمترین امکانات بهترین ها را انجام می دادند. این یک فرصت عالی برای بازدید دوباره از طراحی های فاخر و شگرف طراحانی چون Josef Müller-Brockmann و Wim Crouwel می باشد. همچنین اثر کسانی مانند Ellsworth Kelly نقاش مینیمال، Mies van der Rohe معمار و Dieter Rams طراح صنعتی قابل توجه هستند.
• دور شدن از کار و کنار گذاشتن آن نیز می تواند مفید واقع شود. طراحی فلت و مینیمال شامل نکات دقیق و ظریف می گردد بنابراین یک استراحت کوچک و برگشتن به کار با ذهن و چشمان بازتر بسیار موثر واقع خواهد شد.
• مقایسه نسخه های طرح تان را فراموش نکنید. نسخه های طرح خود را ذخیره کرده و کنار هم قرار دهید، همان که بهتر است با یک نگاه مشخص می شود.
• برای اینکه مطمئن شوید طرح تان روی تمام دستگاه ها کار می کند بهتر است در ابتدا طراحی تان را روی انواع ابزارها تست کنید.
• همچنان که در حال کار کردن هستید مدام از خود بپرسید: “آیا واقعا به آن نیاز دارم؟” فراموش نکنید که ما همیشه باید به دنبال کاهش المان ها و عناصر در جهت سادگی طرحمان باشیم.

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

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

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

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

در وب سایت های فلت و مسطح، تایپوگرافی حرف اول را می زند.

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

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

• کنتراست و تضاد در طراحی های تعاملی نکته کلیدی می باشد. اگر اکثر ترکیب رنگی طرح شما سفید است، پس می توانید برای عناصر تعاملی طرح تان از رنگ های دیگر استفاده نمایید. اگر طراحی شما متن محور است، پس از آیکون های زیبا برای هر چه تعاملی کردن طرح تان استفاده نمایید. اگر فونت سرتیترهای طرح تان بزرگ و lowercase می باشد، پس لینک ها را با سایز کوچک ولی uppercase انتخاب نمایید.
• جایگذاری های متعارف و مرسوم می توانند به خوبی کمک کننده باشند. به عنوان مثال اگر می خواهید فلش کوچکی را به منظور برگشت به صفحه قبل در طراحی تان تعبیه نمایید، حتما آن را در گوشه بالا سمت چپ قرار دهید، مکانی که کاربران انتظار دارند دکمه back را بیابند.
• هنگامی که عناصر مختلفی در صفحه وب سایت قرار می دهید، هر المان تعاملی مشابه یک دکمه، نمی تواند حس خوبی به کاربر منتقل نماید. طراحی صفحه تا حد امکان باید حسی و طبیعی باشد. در نتیجه در مواردی که تعاملی کردن صفحه باعث پیچیدگی زیاد می شود، از آن پرهیز نمایید.
• در نظر داشته باشید که لیست های Drop-down، پنجره های پاپ آپ و سایر عناصر لایه ای در پیاده سازی یک وب سایت فلت باعث ایراد و اشکال می شوند.

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

تهیه و تنظیم: واحد IT داده پردازی فرا افزار هوشمند