6 مد جدید در طراحی وب سایت

الگوهای تجربه کاربری

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

امکانات و الگوهای محبوب

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

انیمیشن ها

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

انواع انیمیشن

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

تعاملات میکرو یا میکرو –اینترکشن ها

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

طراحی متریال – جایگزین طراحی فلت

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

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

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

طراحی فلت

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