استفاده از تکنیک فضای خالی در طراحی سایت

by | ژانویه 18, 2021 | طراحی سایت, کتابخانه تابان شهر | 0 comments

[vc_row][vc_column][vc_column_text]فضای خالی در طراحی سایت[/vc_column_text][/vc_column][/vc_row][vc_row full_width=”stretch_row_content” el_class=”firstRowBackground”][vc_column width=”1/12″][/vc_column][vc_column width=”5/12″][vc_empty_space height=”64px”][vc_custom_heading text=”تکنیک فضای خالی در طراحی سایت” font_container=”tag:h2|font_size:3rem|text_align:left|color:%23ffffff|line_height:3.5rem” use_theme_fonts=”yes” font_weight=”600″][vc_column_text]


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

[/vc_column_text][porto_info_box icon_type=”custom” img_width=”70″ icon_border_radius=”500″ title=”پریسا نوریان” subtitle=”29 دی 99″ title_font_color=”#ffffff” subtitle_font_color=”#f2f2f2″ desc_font_color=”#ffffff”]

زمان مطالعه : 10 دقیقه

[/porto_info_box][vc_btn title=”دانلود PDF” style=”custom” custom_background=”#e5e5e5″ custom_text=”#000000″ shape=”round” size=”xl” align=”left” link=”url:https%3A%2F%2Ftabaneshahr.com%2Fwp-content%2Fuploads%2F2021%2F01%2F%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-%D8%AA%DA%A9%D9%86%DB%8C%DA%A9-%D9%81%D8%B6%D8%A7%DB%8C-%D8%AE%D8%A7%D9%84%DB%8C-%D8%AF%D8%B1-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA.pdf||target:%20_blank|”][/vc_column][vc_column width=”5/12″][vc_empty_space][vc_single_image image=”29022″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”فضای خالی در طراحی سایت چیست” font_container=”tag:h3|text_align:left|color:%23000000″ use_theme_fonts=”yes”][vc_empty_space height=”20px”][vc_column_text]

فضای خالی یا همان white space  در واقع فضای استفاده نشده در سایت می باشد . فضای خالی طبق یک ساختار اساسی و اصولی در سایت قرار می گیرد و حتی در اکثر مواقع می توان گفت این فضا کاملا هدفمند طراحی شده است ! به زبان ساده می توان گفت فضای خالی در طراحی سایت ، قرار دادن فاصله مناسب بین عناصر موجود در صفحه می باشد که باعث مشخص شدن مرز بندی محتوای صفحه می شود. فضای خالی در طراحی سایت بر خلاف تصور عموم الزاما” سفید نیست و می تواند متشکل از هر طرح و رنگی باشد !

[/vc_column_text][vc_custom_heading text=”دلیل اهمیت فضای خالی در طراحی سایت” font_container=”tag:h3|text_align:left|color:%23000000″ use_theme_fonts=”yes”][vc_empty_space height=”20px”][vc_column_text]

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

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

[/vc_column_text][vc_custom_heading text=”برخی از فواید فضای خالی در UI :” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][vc_empty_space height=”20px”][vc_column_text]

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

[/vc_column_text][vc_custom_heading text=”استفاده از تکنیک فضای خالی در طراحی UI سایت :” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][vc_empty_space height=”20px”][vc_custom_heading text=”1 –هدایت کاربر به سمت محتوای هدف” font_container=”tag:h4|text_align:left” use_theme_fonts=”yes”][vc_empty_space height=”20px”][vc_column_text]

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

[/vc_column_text][vc_empty_space height=”20px”][vc_single_image image=”31936″ img_size=”full” alignment=”center”][vc_empty_space height=”20px”][vc_custom_heading text=”2-مرزبندی صفحه با استفاده از فضای خالی” font_container=”tag:h4|text_align:left” use_theme_fonts=”yes”][vc_empty_space height=”20px”][vc_column_text]

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

[/vc_column_text][vc_empty_space height=”20px”][vc_single_image image=”31932″ img_size=”full” alignment=”center”][vc_empty_space height=”20px”][vc_custom_heading text=”3- افزایش خوانایی نوشته” font_container=”tag:h4|text_align:left” use_theme_fonts=”yes”][vc_empty_space height=”20px”][vc_column_text]

هرچه مطالب از دسته بندی و پاراگراف بندی مناسب دور باشد ، مطالعه آن دشوار تر می شود و چه بسا اصلا توسط کاربر خوانده نشود ! نوشتن مطالب بسیار زیاد در فضای محدود و کم باعث آزار و خستگی زود هنگام خواننده می شود.فضای خالی در طراحی سایت باعث افزایش خوانایی و درک بهتر مخاطب از متن می شود.در ادامه توجه شما را به نکاتی درخصوص بهبود خوانایی مطلب جلب می کنیم.
3-1- ایجاد فضا در حاشیه متن ها خوانایی نوشته شما را بیش از 20% افزایش می دهد !
3-2- نزدیک بودن عنوان به متن پارگراف تاثیر به سزایی در بهبود خوانایی متن دارد . با نزدیک قرار گرفتن عنوان و نوشته ، یک گروه متنی تشکیل می شود که باعث درک بهتر مخاطب می گردد.
3-3- دیگر اقدام مورد نیاز برای بهبود خوانایی ، افزایش فاصله بین خطوط می باشد . این عمل باعث می شود متن در هم رفته و بی نظم به نظر نرسد و کاربر سردرگم نشود.

[/vc_column_text][vc_empty_space height=”20px”][vc_single_image image=”31934″ img_size=”full” alignment=”center”][vc_empty_space height=”20px”][vc_custom_heading text=”4- برجسته نشان دادن CTA” font_container=”tag:h4|text_align:left” use_theme_fonts=”yes”][vc_empty_space height=”20px”][vc_column_text]

از دیگر دلایل استفاده از فضای خالی در طراحی سایت می توان به افزایش CTA ) call to action ) اشاره کرد .فراخوانی به عمل یا CTA بخشی از محتوا است که میتواند به شکل تصویر ، متن ، دکمه یا یک محتوای کامل باشد و هدف آن این است که کاربر اقدام خاصی را انجام دهد . معمولا با بزرگ تر نشان دادن هر عنصر ، توجه بیشتری به آن جلب می شود . این جلب توجه را می توان با تکنیک فضای سفید نیز ایجاد کرد . آیتم هایی که بین فضای سفید قرار می گیرند تاثیر گذاری بیشتری دارند و بهتر می توانند نظر مخاطب را به سمت خود جلب کنند و در نهایت ، این توجه باعث افزایش CTA میشود.
برای مثال با هم صفحه ای از سایت کمپانی apple را مشاهده می کنیم . در این صفحه ، عناصر بسیار محدود مانند تصویر آخرین مدل تلفن همراه این کمپانی به همراه قیمت ، گزینه خرید و … را مشاهده می کنیم . کاربر پس از ورود به این صفحه کاملا متوجه این المان ها می شود و می تواند در صورت نیاز به خرید بدون حواس پرتی روی گزینه خرید کلیک نماید و یا در صورت نیاز به اطلاعات بیشتر روی گزینه مورد نظر کلیک کرده و جزئیات بیشتری دریافت کند.

[/vc_column_text][vc_empty_space height=”20px”][vc_single_image image=”31931″ img_size=”full” alignment=”center”][vc_empty_space height=”20px”][vc_custom_heading text=”5- تاثیر گذاری بیشتر” font_container=”tag:h4|text_align:left” use_theme_fonts=”yes”][vc_column_text]

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

[/vc_column_text][vc_custom_heading text=”سخن آخر” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][vc_empty_space height=”20px”][vc_column_text]

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

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space height=”80px”][/vc_column][/vc_row][vc_row full_width=”stretch_row”][vc_column width=”1/2″][vc_custom_heading text=”همین حالا برای طراحی سایت و ساخت اپلیکیشن اقدام کنید!” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes” font_weight=”700″][vc_column_text]

شرکت طراحی سایت و اپلیکیشن تابان شهر در تمام زمینه های طراحی سایت و اپلیکیشن و ارائه خدمات مربوط به آنها در خدمت شماست

[/vc_column_text][vc_btn title=”مشاوره رایگان” style=”custom” custom_background=”#ffffff” custom_text=”#ffffff” shape=”round” size=”xl” align=”center” skin=”primary” link=”url:https%3A%2F%2Ftabaneshahr.com%2Fcontact-us1%2F||target:%20_blank|”][/vc_column][vc_column width=”1/2″][vc_single_image image=”24739″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”آخرین مقالات” font_container=”tag:h2|text_align:center” use_theme_fonts=”yes” font_weight=”700″][porto_blog post_layout=”slider” post_style=”grid” nav_pos2=”nav-pos-inside” nav_type=”nav-style-4″][/vc_column][/vc_row]

امروز شروع کن

تیم کارشناسان تابان شهر آماده ارائه مشاوره رایگان به شما هستند

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

By امیر رضا غفاری

دیگر مقالات تابان شهر

طراحی سایت با وردپرس یا  php

طراحی سایت با وردپرس یا php

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

read more
راه های کسب درآمد آنلاین در سال 1400

راه های کسب درآمد آنلاین در سال 1400

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

read more
صفر تا100 آشنایی با استاندارد های طراحی اپلیکیشن

صفر تا100 آشنایی با استاندارد های طراحی اپلیکیشن

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

read more

0 نظر از شما عزیزان

0 Comments

Submit a Comment

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *