روند طراحی سایت در 2016-2017 بخش اول

چند مورد از روندهای طراحی وب سایت در سال های 2016 و 2017 – بخش اول : کمتر کسی است که GIF های دهه 90 ، و روند اخیر طراحی وب سایت– یعنی سبک طراحی فلت (Flat Design) – را فراموش کرده باشد . اخیرا نیز موجی عظیم در محبوبیت و گرایش به طراحی سایت ریسپانسیو به راه افتاده است و اکثر طراحان و توسعه دهندگان وب سایت بیش از پیش به این سبک طراحی سایت رو آورده اند ، به ویژه از زمانی که گوگل بهای بیشتری به سایت های موبایل فرندلی (Mobile Friendly) می دهد .
در ادامه به بررسی سایر گرایش ها به انواع سبک ها و روندهای طراحی وب سایت در سال های اخیر می پردازیم .

افزایش الگوهای ایجاد واسط کاربری (UI – User Interface) در روندهای طراحی وب سایت سال های اخیر

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

 

طراحی سایت در 2017

 

در اینجا تعدادی از الگوهای طراحی UI را که می بایست با آن آشنا باشید به شما معرفی می کنم :

1.    همبرگر منو (The hamburger menu) : در حالی که خیلی ها به استفاده از این الگو انتقاد دارند ، شکی نیست که به دلیل استفاده گسترده از آن ، این سبک UI برای کاربران آشناست و کاربری راحتی را برایشان دارد .

طراحی سایت در 2017


2.    ثبت حساب کاربری (Account registration) : تقریبا در هر وب سایتی که قابلیت ثبت حساب کاربری دارد با این واسط کاربر (UI) مواجه می شوید . در بعضی از این فرم های ثبت نام هم قابلیت ورود با یک حساب شبکه اجتماعی (Social Sign-up) وجود دارد تا کاربر برای ثبت نام دوباره اطلاعات خود را وارد نکند .
3.    لانگ اسکرول (Long Scroll) : این سبک نیز بسیار رواج داشته و به جای بخش بندی محتوای وب سایت به چند صفحه ، تمام آن را در یک صفحه قرار می دهیم و کاربر با اسکرول کردن صفحه می تواند محتوا را مشاهده کند . این کار برای کاربران موبایل وب بسیار جالب است و تنها بالا لمس صفحه موبایل به سمت پایین ، کاربر می تواند در سایت شما سیر کند .
4.    چیدمان های کارتی (Card Layouts) : از این طرح و چیدمان صفحه ، که Pinterest پیشتاز استفاده از آن است ، برای نشان دادن ارتباط محتوایی هر بخش از سایت استفاده می شود ، به این شکل که نگهدارنده (Content Container) هر بخش از محتوای بهم مرتبط سایت را در یک قسمت از طرح کارتی شکل خود قرار می دهیم .
5.    تصاویر شاخص (Hero Images) : از آنجا که بینایی قوی ترین حس از حواس چندگانه انسان است ، تصاویر شاخص با کیفیت HD یکی از سریع ترین راه های جلب توجه بازدید کننده به صفحه وب سایت است . با در نظر گرفتن بهبود سرعت بارگذاری محتوا توسط سرورهای امروزی و افزایش پهنای باند ، دیگر بازدید کننده از کندی سرعت بارگذاری تصاویر و محتوای سایت رنج نمی برد . این تصاویر شاخص معمولا در بالای صفحات وب سایت هایی که از سبک لانگ اسکرول که چیدمان محتوا به شکل زیگ-زاگی دارند یا از چیدمان کارتی استفاده می کنند مشاهده می شوند .

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

استفاده از انیمیشن و گرافیک های با کیفیت در طراحی سایت

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

1.    انیمیشن های مقیاس بزرگ (Large-Scale) : از این ها به عنوان ابزار تعامل اولیه استفاده می شود که تاثیر زیادی بر کاربران داشته و شامل جلوه هایی چون پیمایش پارالاکس (Parallax Scrolling) و اطلاعیه های پاپ-آپ (Pop-up Notifications) می شود .

2.    انیمیشن های مقیاس کوچک (Small-Scale) : این دسته از انیمیشن ها نیز شامل اسپینرها (spinner) ، ابزارهای شناور (hover) و نمادهای بارگذاری (loading bars) می شود که نیاز به دریافت ورودی از کاربر ندارند .

در اینجا به هفت مورد از تکنیک های معروف انیمیشن اشاره خواهیم کرد :

انیمیشن های زمان بارگذاری صفحه

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

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

نویگیشن و منوها (بی پیمایش)

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

انیمیشن های شناور

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

گالری ها و اسلاید شو ها

استفاده از انیمیشن های گالری و اسلاید شو راه موثری برای نمایش جذاب تصاویر سایت به کاربر است . این تکنیک برای سایت های عکاسی و یا نمایش محصولات یک سایت فروشگاهی و پورتفولیوها (نمونه کارها) می باشد .

انیمیشن های متحرک (Motion Animation)

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

پیمایش (Scrolling)

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

انیمیشن های پس زمینه / ویدئوها

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

در بخش دوم این مقاله به بررسی سایر موارد روندهای طراحی وب سایت در سال های 2016 و 2017 خواهیم پرداخت . با ما همراه باشید ...

آخرین ویرایش در جمعه, 12 شهریور 1395 ساعت 15:11