اسپلش‌اسکرین | راهنمای طراحی

در دنیای دیجیتالی امروز، اولین برخورد مخاطب‌ها با یک برند بسیار مهم است. به همین خاطر است که اسپلش‌اسکرین‌ها برای جلب توجه مخاطبان یک اپلیکیشن نقش قابل توجهی را ایفا میکنند. یک اسپلش‌اسکرین خوب می‌تواند تجربه‌ی کاربر از اپلیکیشن را بهبود ببخشد.

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

اسپلش‌اسکرین چیست؟

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

 علاوه بر این اسپلش‌اسکرین تجربه‌ی انتظار برای بارگیری اپلیکیشن را برای مخاطب لذت بخش می‌کند.

آیا همه‌ی اپلیکیشن‌ها به اسپلش‌اسکرین نیاز دارند؟

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

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

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

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

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

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

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

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

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

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

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

اصولی برای طراحی اسپلش اسکرین

مدت زمان اسپلش اسکرین

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

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

عوامل دیگری که می‌توانند طول زمان اسپلش اسکرین را تحت تأثیر قرار دهند عبارتند از:

۱. هدف اصلی: هدف اصلی اسپلش اسکرین را باید در نظر داشت. اینکه آیا هدف آن فقط برقراری ارتباط با برند است یا نیاز به بارگیری بخشی از اپلیکیشن یا انجام فرآیندی دارد. این هدف تعیین کننده‌ی زمان مورد نیاز برای نمایش اسپلش‌اسکرین است.

۲. نوع اپلیکیشن: نوع اپلیکیشن نیز می‌تواند تعیین‌کننده باشد. برای مثال، در اپلیکیشن‌های بازی، کاربران عموماً مشتاق‌تر هستند و ممکن است زمان اسپلش اسکرین کوتاه‌تر باشد. اما در اپلیکیشن‌های کسب و کاری یا اپلیکیشن‌هایی که نیاز به بارگیری اولیه دارند، زمان اسپلش اسکرین ممکن است بیشتر باشد.

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

۴. تجربه ی کاربری: در نهایت، تجربه کاربری به عنوان یک عامل مهم در تعیین زمان اسپلش اسکرین مطرح است. اگر اسپلش اسکرینی با طراحی جذاب و اطلاعات مفید برای کاربران ارائه شود، آنها ممکن است برای مدت زمان بیشتری آن را مشاهده کنند. اما اگر اسپلش اسکرین بی‌محتوا یا غیر جذاب باشد، کاربران ممکن است به سرعت آن را رد کنند. در نهایت، بهتر است با ترکیب مطالعه ی کاربران، تجزیه و تحلیل داده‌ها و آزمایش‌های A/B، متناسب با هدف و نیازهای اپلیکیشن ، به طور دقیق زمان اسپلش اسکرین تعیین شود  تا بهترین تجربه برای کاربران رقم بخور.، اما تجربه می‌گوید بهتر است اسپلش اسکرین نهایتا ۳ ثانیه باشد.

اندازه‌ی اسپلش اسکرین

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

در طراحی اسپلش اسکرین، معمولاً از نسبت ۱۶:۹ یا ۹:۱۶ برای صفحه نمایش استفاده می‌شود. این نسبت به دلیل پراکندگی گسترده‌ی دستگاه‌های مختلف و شبکه‌های اجتماعی رایج است. همچنین، نمایشگرهای با نسبت ۴:۳ و ۳:۴ نیز در برخی دستگاه‌ها وجود دارند.

بنابراین، طراحی اسپلش اسکرین باید با توجه به نسبت صفحه نمایش دستگاه‌های مختلف انجام شود. بهتر است طراحی به صورت ریسپانسیو انجام شود تا به طور خودکار به اندازه‌ی مناسبی برای هر صفحه نمایش تطبیق پیدا کند.پس در هنگام طراحی حتما  مراقب ” محدوده‌ی ایمن یا safe zone ” باشید تا اسپلش‌اسکرینی که طراحی کرده‌اید به راحتی در تمامی اندازه‌ها نمایش‌داده‌شود.

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

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

فرمت خروجی اسپلش اسکرین

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

۱. PNG (Portable Network Graphics): PNG یکی از فرمت‌های پرکاربرد برای عکس‌ها و تصاویر با شفافیت است. این فرمت برای حفظ جزئیات و کیفیت تصویر مناسب است. همچنین اندازه‌ی کوچک این فایل خروجی یک مزیت حساب می‌شود.

۲. JPEG (Joint Photographic Experts Group): JPEG یکی دیگر از فرمت‌های تصویری پرکاربرد است. این فرمت برای تصاویر با رنگ‌های بیشتر و نسبتاً کم‌کیفیت‌تر استفاده می‌شود. به عنوان مثال، اگر اسپلش اسکرین عکس با حالت‌های پیچیده و لوگو و نوشته‌ها باشد، ممکن است از فرمت JPEG برای کاهش حجم فایل و بهینه‌سازی استفاده شود.

۳. GIF (Graphics Interchange Format): این فرمت معمولاً برای تصاویر متحرک یا انیمیشن استفاده می‌شود. در صورتی که اسپلش اسکرین شامل انیمیشن کوتاه و ساده باشد(که یکی از جذاب ترین انواع اسپلش اسکرین است و توصیه‌ی ما برای اسپلش اسکرین این مورد است)، فرمت GIF می‌تواند مورد استفاده قرار گیرد.

همچنین، برای برنامه‌های تحت وب، فرمت‌های دیگری مانند SVG (Scalable Vector Graphics) و HTML/CSS نیز برای طراحی اسپلش‌اسکرین استفاده می‌شوند.

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

اسپلش اسکرین متحرک، با بک گراند یا به صورت ترنسپرت؟

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

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

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

۱. انتخاب رنگ‌ها: انتخاب رنگ‌های مناسب برای بک‌گراند بسیار مهم است. رنگ‌ها باید با برند و هویت اپلیکیشن هماهنگی داشته باشند و احساسات و پیام مورد نظر را به خوبی منتقل کنند. همچنین، در نظر داشته باشید که رنگ‌های انتخابی بتوانند متن و المان‌های دیگر را به خوبی قابل مشاهده کنند و کاربران را به راحتی هدایت کنند.

۲. استفاده از الگوها و تصاویر: الگوها و تصاویر در صورت استفاده‌ی درست می‌توانند بک‌گراند را زنده‌تر کنند و جذابیت آن را افزایش دهند. از الگوها و تصاویر با طرح‌ها و شکل‌های جذاب و هماهنگ با موضوع اپلیکیشن استفاده کنید.

۳. حرکت و انیمیشن: طراحی اسپلش اسکرین با انیمیشن می‌تواند بسیار جذاب و متفاوت باشد. استفاده از حرکت و انیمیشن‌های زیبا در بک‌گراند می‌تواند تجربه کاربر را تحریک کند و به اثربخشی بیشتر اسپلش اسکرین کمک کند.

۴. هماهنگی با محتوا: بک‌گراند باید با محتوای اسپلش اسکرین هماهنگی داشته باشد و آن را تکمیل کند. لوگو، شعار یا پیام اصلی اپلیکیشن می‌توانند در بک‌گراند نمایش داده شوند تا ارتباط بین اسپلش اسکرین و محتوای اصلی برقرار شود.

در کل، بک‌گراند در طراحی اسپلش اسکرین با انیمیشن باید به طور کلی جذاب، هماهنگ و به نحوی باشد که توجه کاربر را به خود جلب کند و تجربه کاربری را بهبود بخشد.

نکاتی برای طراحی بهتر اسپلش اسکرین

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

۱. سازگاری با برند: اطمینان حاصل کنید که اسپلش اسکرین با هویت کلی برند هماهنگ است و رنگ‌ها، تایپوگرافی و سبک بصری برند را منعکس می‌کند.

۲. تجربه‌ی لذت‌بخش: یک اسپلش اسکرین زیبا و جذاب طراحی کنید که کاربران را به خود جذب کند و به دیده‌شدن بهتر اپلیکیشن کمک کند.

۳. ارتباط مناسب با محتوا: اسپلش اسکرین باید مرتبط با محتوا یا قابلیت برنامه یا وبسایت باشد و کاربران را با نمایی از آنچه قابل انتظار است، آشنا کند.

ساده اما به یادماندنی طراحی کنید

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

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

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

نوار پیشرفت طراحی کنید

توجه داشته باشید که در اکثر موارد، نوار پیشرفت (progress bar) در اسپلش‌اسکرین استفاده نمی‌شود. دلیل اصلی این امر این است که اسپلش اسکرین به عنوان یک صفحه‌ی اولیه قرار است برای کاربران در هنگام بارگیری اپلیکیشن نمایش‌داده‌شود و مدت زمان بارگیری آن باید به حداقل برسد.اما در مواقعی ممکن است که اپلیکیشن نیاز به زمان بیشتری برای لود کردن اطلاعات و انتقال به صفحه‌ی اصلی داشته باشد، در این  موارد که زمان بارگیری ضروری‌است ، نیاز به نمایش یک نوار پیشرفت یا یک انیمیشن بارگیری در اسپلش اسکرین است تا کاربران متوجه شوند بارگیری در حال انجام است و شکیبا باشند تا اپلیکیشن کامل بارگیری شود و اپلیکیشن را ترک نکنند. در این حالت، معمولاً نوار پیشرفت در بالا یا پایین اسپلش اسکرین قرار داده می‌شود تا به کاربران اطلاع داده شود که اپلیکیشن در حال بارگیری است.پس نوار پیشرفت تنها در زمان‌هایی مورد استفاده قرار می‌گیرد که اپلیکیشن نیاز به زمان بیشتری برای پردازش اطلاعات دارد، نه همیشه. با این اوصاف زمان نمایش نوار پیشرفت بعد از تمام شدن انیمیشن اسپلش اسکرین است نه همراه آن.

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

یک قدم فراتر برو

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

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

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

صحبتی با صاحبان کسب‌و‌کار و اپلیکیشن‌ها

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

منابع

Campbell, D. (2018, 11 11). Building the perfect splash screen. Retrieved from uxdesign.cc: https://uxdesign.cc/building-the-perfect-splash-screen-46e080395f06

How to Design an Unforgettable Splash Screen that Delights Your Users. (n.d.). Retrieved from www.uxpin.com: https://www.uxpin.com/studio/blog/splash-screen/#:~:text=A%20splash%20screen%20is%20an,coupled%20with%20a%20progress%20bar.