طراحی سایت تک صفحه ای(one page)

طراحی وب‌سایت یک‌صفحه‌ای روش‌های رایج، راهنمایی و توصیه‌های مربوط به تجربه کاربری

طراحی یک‌صفحه‌ای برای برخی از وب‌سایت‌ها بهتر است. این پروژه‌ها معمولاً صفحاتی هستند که نمونه کار‌ها را نشان می‌دهند (portfolio pages) یا سایت محصولات، صفحات اصلی و گاهی هم صفحات شرکت‌ها.

شما سایتی می‌خواهید با محتویات کم ولی ظاهر ویژه قوی و ناوش (navigation) ساده. این یک مسأله بدیهی است.

اما چه ویژگی‌های دیگری در آرایش یک‌صفحه‌ای رایج است؟ و چگونه می‌شود سایتی طراحی کرد بهترین تجربه کاربری را ارائه کند.

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

 

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

پیوندهای ناوشی با اسکرول اتوماتیک

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

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

برای دیدن نمونه وب‌سایت Hashtago را مشاهده کنید.

این یک طرح خیلی ساده با یک نوار ناوشی و ۴ پیوند مختلف است.

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

این عیبی است که اعمال یک انیمیشن ساختگی به نوار ناوشی دارد.

به جای آن می‌توانید کاری مانند Retainer Club انجام دهید که صفحات مختلف را به طور خودکار بارگذاری می‌کند و به قسمت‌های جدید در همان صفحه اسکرول می‌کند.

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

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

نمونه مورد علاقه من از یک طراحی یک‌صفحه‌ای با اسکرول اتوماتیک احتمالاً DangerousRobot است.

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

این می‌تواند شبیه طرح وب‌سایت Playground باشد.

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

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

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

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

اما فضای کمی را اشغال می‌کنند و خیلی شیک و زیبا هستند.

به عنوان نمونه سایت Interface Agency سه دکمه ناوشی نقطه‌ای کوچک دارد. برای اسکرول سریع در صفحه روی این دکمه‌ها کلیک کنید.

یک آیکون به شکل مثبت گوشه بالای صفحه هست که صفحات بیشتر برای مشاهده ارائه می‌کند.

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

این قطعاً خوب است اما به نظر من برای یک صفحه با محتویات زیاد انتخاب خوبی نیست.

این روش بیشتر برای اضافه کردن تصاویر پرزرق و برق در آرایش‌های شخصی‌سازی شده خوب است.

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

اضافه کردن دکمه فراخوان عمل برای صفحات فروش آنلاین

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

مخصوصاً در مواقعی که دارید صفحه اصلی طراحی می‌کنید که ممکن است تنها صفحه‌ای باشد که یک کاربر می‌بیند. مثل طرح‌های یک‌صفحه‌ای.

به عنوان نمونه Hero Icons فقط دو دکمه فرخوان عمل در نیمه بالای صفحه دارد بدون هیچ پیوند ناوشی دیگری.

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

که البته اشکالی ندارد.

چون هدف شما در این نوع صفحه این است که تشویق به تبدیل کنید. می‌توانید این «تبدیل» را ثبت نام، خرید، ارسال ایمیل یا هر چیزی مانند آن حساب کنید. خیلی مهم نیست چه باشد.

اگر دارید به هدف خود می‌رسید، پس در مسیر درست قرار دارید.

صفحه اصلی افزونه Sketch Confetti نمونه دیگری از یک دکمه فراخوان عمل خیلی تمیز دارد.

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

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

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

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

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

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

انیمیشن‌های صفحه به هنگام اسکرول کردن

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

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

سایت Toggl دارای اپ زمان سنج خود است و صفحه اصلی آن عالی است.

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

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

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

صفحه اصلی Yarn App هم در بخش‌های پایینی‌اش از این نوع انیمیشن‌ها استفاده می‌کند.

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

آیا این روش برای هر وب‌سایتی خوب است؟ قطعاً نه.

اکثراً این روش بیشتر با صفحاتی کار می‌کند که محتوای کمتری دارند که همانطور که پایین اسکرول می‌کنید به همراه یک انیمیشن ظاهر می‌شوند.

بهترین نمونه برای نشان دادن این نوع صفحه One Big Tweet است.

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

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

این احتمالا یکی از بهترین نمونه‌های طراحی یک‌صفحه‌ای است که تجربه کاربری را از همه چیز بالاتر در نظر می‌گیرد.

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

تقسیم کردن صفحه به بخش‌های مختلف

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

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

این به کاربران کمک می‌کند سریع‌تر و به آسانی بیشتر و بدون هیچ مشکلی از محتویات صفحه استفاده کنند.

بخش‌های این صفحه برای ابزار رابط کاربری iOS 11 ظریف اما محسوس هستند.

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

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

معمولاً من بیشتر رنگ‌های پس‌زمینه متناوب را می‌پسندم.

حاوی نکاتی درباره کار با فوتوشاپ است برای افرادی که فوتوشاپ بلد نیستند.

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

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

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

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

شما می‌توانید این را تقریباً روی هر صفحه‌ای به کار ببرید و نتایج عالی دریافت کنید.

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

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

نکات اضافی

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

با روش‌های مختلف دیگر نیز آزمایش کنید.

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