<!DOCTYPE html>
	<html lang="vi" xmlns="http://www.w3.org/1999/xhtml" prefix="og: http://ogp.me/ns#">
	<head>
<title>Những điều cần biết về khoảng trắng trong thiết kế website</title>
<meta name="description" content="Những điều cần biết về khoảng trắng trong thiết kế website - Savefile - Tin tức -...">
<meta name="author" content="Công ty TNHH phát triển và dịch vụ nguồn mở Thuận Đức">
<meta name="copyright" content="Công ty TNHH phát triển và dịch vụ nguồn mở Thuận Đức &#91;contact@tdfoss.vn&#93;">
<meta name="robots" content="index, archive, follow, noodp">
<meta name="googlebot" content="index,archive,follow,noodp">
<meta name="msnbot" content="all,index,follow">
<meta name="yandex-verification" content="ad5adea1f6f98c44">
<meta name="generator" content="NukeViet v4.0">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta property="fb:pages" content="135845446997278">
<meta property="fb:app_id" content="257919581378885">
<meta property="og:title" content="Những điều cần biết về khoảng trắng trong thiết kế website">
<meta property="og:type" content="website">
<meta property="og:description" content="Savefile - Tin tức - https&#x3A;&#x002F;&#x002F;tdfoss.vn&#x002F;tin-tuc&#x002F;savefile&#x002F;goc-chia-se&#x002F;nhung-dieu-can-biet-ve-khoang-trang-trong-thiet-ke-website-286.html">
<meta property="og:site_name" content="Công ty TNHH phát triển và dịch vụ nguồn mở Thuận Đức">
<meta property="og:url" content="https://tdfoss.vn/tin-tuc/goc-chia-se/nhung-dieu-can-biet-ve-khoang-trang-trong-thiet-ke-website-286.html">
<link rel="shortcut icon" href="https://tdfoss.vn/uploads/tdfoss.vn/tdfoss-logo-small_120_120.png">
<link rel="alternate" href="https://tdfoss.vn/tin-tuc/savefile/goc-chia-se/nhung-dieu-can-biet-ve-khoang-trang-trong-thiet-ke-website-286.html" hreflang="vi">
<link rel="canonical" href="https://tdfoss.vn/tin-tuc/goc-chia-se/nhung-dieu-can-biet-ve-khoang-trang-trong-thiet-ke-website-286.html">
<link rel="alternate" href="https://tdfoss.vn/tin-tuc/rss/" title="Tin tức" type="application/rss+xml">
<link rel="alternate" href="https://tdfoss.vn/tin-tuc/rss/tin-hoat-dong/" title="Tin tức - Tin hoạt động" type="application/rss+xml">
<link rel="alternate" href="https://tdfoss.vn/tin-tuc/rss/su-kien-khuyen-mai/" title="Tin tức - Sự kiện - Khuyến mãi" type="application/rss+xml">
<link rel="alternate" href="https://tdfoss.vn/tin-tuc/rss/thong-tin-cong-nghe/" title="Tin tức - Thông tin Công nghệ" type="application/rss+xml">
<link rel="alternate" href="https://tdfoss.vn/tin-tuc/rss/cong-dong-nguon-mo/" title="Tin tức - Cộng đồng nguồn mở" type="application/rss+xml">
<link rel="alternate" href="https://tdfoss.vn/tin-tuc/rss/an-ninh-mang/" title="Tin tức - An ninh mạng" type="application/rss+xml">
<link rel="alternate" href="https://tdfoss.vn/tin-tuc/rss/goc-chia-se/" title="Tin tức - Góc chia sẻ" type="application/rss+xml">
<link rel="alternate" href="https://tdfoss.vn/tin-tuc/rss/tuyen-dung/" title="Tin tức - Tuyển dụng" type="application/rss+xml">
<link rel="preload" as="script" href="https://tdfoss.vn/assets/js/jquery/jquery.min.js">
<link rel="preload" as="script" href="https://tdfoss.vn/assets/js/language/vi.js">
<link rel="preload" as="script" href="https://tdfoss.vn/assets/js/global.js">
<link rel="preload" as="script" href="https://tdfoss.vn/themes/tdfoss/js/news.js">
<link rel="preload" as="script" href="https://tdfoss.vn/themes/tdfoss/js/main.js">
<link rel="preload" as="script" href="https://tdfoss.vn/themes/default/js/bootstrap.min.js">
<link rel="preload" as="script" href="https://tdfoss.vn/themes/tdfoss/assets/javascripts/plugins/hover_dropdown/twitter-bootstrap-hover-dropdown.min.js">
<link rel="preload" as="script" href="https://tdfoss.vn/themes/tdfoss/assets/javascripts/jednotka.js">
<link rel="StyleSheet" href="https://tdfoss.vn/assets/css/font-awesome.min.css">
<link rel="StyleSheet" href="https://tdfoss.vn/themes/default/css/bootstrap.min.css">
<link rel="StyleSheet" href="https://tdfoss.vn/themes/tdfoss/assets/stylesheets/jednotka_green.css">
<link rel="StyleSheet" href="https://tdfoss.vn/themes/tdfoss/css/style.css">
<link rel="StyleSheet" href="https://tdfoss.vn/themes/tdfoss/css/td.css">
<link rel="StyleSheet" href="https://tdfoss.vn/themes/tdfoss/css/news.css">
<link rel="StyleSheet" href="https://tdfoss.vn/assets/css/tdfoss.vi.0.css?t=40">
<style>
	body{background: #fff;}
</style>
	    <!--[if lt IE 9]>
	      <script src="https://tdfoss.vn/themes/tdfoss/assets/javascripts/ie/html5shiv.js" type="text/javascript"></script>
	      <script src="https://tdfoss.vn/themes/tdfoss/assets/javascripts/ie/respond.min.js" type="text/javascript"></script>
	    <![endif]-->
<script data-show="inline">(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-53105817-8', '.tdfoss.vn');
ga('send', 'pageview');
</script>
</head>
	<body class=''>
<div id="print">
	<div id="hd_print">
		<h2 class="pull-left">Công ty TNHH phát triển và dịch vụ nguồn mở Thuận Đức</h2>
		<p class="pull-right"><a title="Công ty TNHH phát triển và dịch vụ nguồn mở Thuận Đức" href="https://tdfoss.vn/">https://tdfoss.vn</a></p>
	</div>
	<div class="clear"></div>
	<hr />
	<div id="content">
		<h1>Những điều cần biết về khoảng trắng trong thiết kế website</h1>
		<ul class="list-inline">
			<li>Thứ sáu - 20/09/2019 22:52</li>
			<li class="hidden-print txtrequired"><em class="fa fa-print">&nbsp;</em><a title="In ra" href="javascript:;" onclick="window.print()">In ra</a></li>
			<li class="hidden-print txtrequired"><em class="fa fa-power-off">&nbsp;</em><a title="Đóng cửa sổ này" href="javascript:;" onclick="window.close()">Đóng cửa sổ này</a></li>
		</ul>
		<div class="clear"></div>
		<div id="hometext">
			Hiện nay, rất nhiều người cho rằng khoảng trắng trên mỗi thiết kế website là vô nghĩa, nó chẳng có tác dụng gì đối với website. Vậy nhận định trên có chính xác hay không? Cùng TDFOSS tìm hiểu những điều cần biết về khoảng trắng trong thiết kế website.
		</div>
				<div class="imghome">
			<img alt="Khoảng trắng trong thiết kế website" src="https://tdfoss.vn/uploads/tdfoss.vn/tin-tuc/2019/thiet-ke-website-khoang-trang.jpg" width="700" class="img-thumbnail" />
		</div>
		<div class="clear"></div>
		<div id="bodytext" class="clearfix">
			<h2 dir="ltr"><strong>1. Tìm hiểu về khoảng trắng trong thiết kế website</strong></h2>

<h3 dir="ltr"><strong>Khoảng trắng trong thiết kế website là gì?</strong></h3>

<p dir="ltr" style="text-align: justify;"><span style="font-size:14px;">Khoảng trắng (White Space) trong <strong><a href="https://tdfoss.vn/thiet-ke-website/">thiết kế website</a></strong> là khoảng trống giữa các phần tử trong bản thiết kế,&nbsp; giúp chúng nổi bật và tách biệt với các phần tử khác. Khoảng trắng không nhất thiết là khoảng không gian phải có màu trắng. Nếu màu nền (background) của bản thiết kế website là màu vàng, thì khoảng trắng sẽ có màu vàng. Nói một cách đơn giản, khoảng trắng là không gian trống, không bị chiếm bởi bất kỳ thành phần thiết kế nào.</span></p>

<p dir="ltr" style="text-align: justify;"><span style="font-size:14px;">Nhà thiết kế cũng cần phải chú trọng, vì nếu không sử dụng đúng cách, khoảng trắng có thể bị hiểu lầm là không gian lãng phí. Khoảng trắng, cùng với vị trí đặt và hình dáng của nó, sẽ khiến cho thiết kế có một phông nền ( background ) thú vị, nổi bật ý đồ của người thiết kế.</span></p>

<h3 dir="ltr"><strong>Khoảng trắng có bao nhiêu loại?</strong></h3>

<p dir="ltr" style="text-align: justify;"><span style="font-size:14px;">Dựa vào tính năng và mục đích sử dụng, khoảng trắng được phân làm 2 loại</span></p>

<ul>
	<li dir="ltr">
	<p dir="ltr" style="text-align: justify;"><span style="font-size:14px;"><strong>Khoảng trắng chủ động (Active White Space)</strong>: không gian cố tình bỏ trống của một bố cục để thể hiện một ý đồ nào đó của thiết kế, nhấn mạnh làm nổi bật một yếu tố hay nội dung nào đó của thiết kế, hoặc đơn giản là khoảng nghỉ mắt của người đọc, từ đó dẫn người đọc đến một yếu tố, nội dung khác của thiết kế.</span></p>
	</li>
	<li dir="ltr">
	<p dir="ltr" style="text-align: justify;"><span style="font-size:14px;"><strong>Khoảng trắng bị động (Passive White Space)</strong>: Không gian trống xung quanh bên ngoài của trang, hoặc vùng trống của nội dung thiết kế xuất hiện trong quá trình dàn trang, nó không tham gia vào việc thể hiện ý đồ thiết kế.</span></p>
	</li>
</ul>

<h2 dir="ltr"><strong>2. Tác dụng của khoảng trắng trong thiết kế website</strong></h2>

<h3 dir="ltr"><strong>Cải thiện mức độ dễ đọc, dễ hiểu</strong></h3>

<p dir="ltr" style="text-align: justify;"><span style="font-size:14px;">Những khoảng trắng thường sẽ mang lại không gian thoáng đãng và giúp độc giả phân biệt rõ ràng ranh giới các thành phần trên một trang. Ví dụ gần nhất đó chính chúng ta sẽ dễ đọc học khi có sự xuất hiện của những khoảng trắng giữa các từ ngữ, các dòng hay các đoạn văn bản.</span></p>

<div style="text-align:center">
<figure class="image" style="display:inline-block"><img alt="Khoảng trắng giúp truyền tải thông tin đến với khách hàng hiệu quả hơn" height="315" src="https://lh6.googleusercontent.com/bYNzbGclZGDRyt1ys_SVdtxyF_NjRdef5skqMRz8rEujQRj32kBuioP_g-cTQAwfAZUBiRYDq8W6EZOGwCpmV8IHDRPOkRP2j4WAWDaVEGQYIbzt3Be0WRzs7cK0T4MbmoB4nP06" width="624" />
<figcaption><em>Khoảng trắng giúp truyền tải thông tin đến với khách hàng hiệu quả hơn</em></figcaption>
</figure>
</div>

<p dir="ltr" style="text-align: justify;"><span style="font-size:14px;">Không chỉ dễ đọc, khoảng trắng còn làm tăng mức độ dễ hiểu của người dùng lên tới 20%.</span></p>

<h3 dir="ltr"><strong>Thu hút sự chú ý</strong></h3>

<p dir="ltr" style="text-align: justify;"><span style="font-size:14px;">Khoảng trắng trong thiết kế website cũng là một cách hiệu quả để thu hút mạnh mẽ sự chú ý của người dùng đến một phần màn hình cụ thể. Thiết kế website không chỉ làm cho mọi thứ trở nên rõ ràng mà phải phân bổ mức độ nổi bật, điều hướng người dùng theo dụng ý của mình.</span></p>

<div style="text-align:center">
<figure class="image" style="display:inline-block"><img alt="Website Google tràn ngập khoảng trống giúp người tìm kiếm tập trung" height="293" src="https://lh5.googleusercontent.com/q_cr0lPHyOnf7w6Zb14ncq5Wfm7wZLAPcK3XkaWhL3f-J0UjSUvFGSywDKDBAH3wcCiWPilqR1tR-teNVdhggTXhFIt45TLYbH1LMBmBxFr4-fSLlMHFsFMWlnCS8N-KjXgIAjH4" width="624" />
<figcaption><em>Website Google tràn ngập khoảng trống giúp người tìm kiếm tập trung</em></figcaption>
</figure>
</div>

<p dir="ltr" style="text-align: justify;"><span style="font-size:14px;">Ví dụ tuyệt vời của khoảng trắng mà chúng ta đều quen thuộc đó là Google. Khi tới trang web của họ, bạn sẽ thấy tràn ngập khoảng trống và chính nó đã giúp chúng ta có thể tập trung vào cái trọng tâm, đó chính là tính năng tìm kiếm.</span></p>

<h3 dir="ltr"><strong>Tạo ấn tượng tốt với người dùng</strong></h3>

<p dir="ltr" style="text-align: justify;"><span style="font-size:14px;">Ấn tượng đầu tiên hẳn nhiên không phải dễ dàng lặp lại. Vì vậy, hãy chắc chắn rằng thiết kế của bạn để lại một “ấn tượng sâu sắc” ngay từ cái nhìn đầu tiên. Để làm được điều đó, hãy thử sử dụng một khoảng trắng để dễ dàng thu hút sự chú ý.</span></p>

<p dir="ltr" style="text-align: justify;"><span style="font-size:14px;">Nó cũng giúp tạo hiệu quả thư giãn cho một <strong><a href="https://tdfoss.vn/thiet-ke-website/">thiết kế website</a> </strong>truyền tải quá nhiều thông tin đến người dùng.</span></p>

<h3 dir="ltr"><strong>Định vị thương hiệu</strong></h3>

<p dir="ltr" style="text-align: justify;"><span style="font-size:14px;">Khi khoảng trắng là những gì lớn hơn khoảng cách giữa các chữ, dòng hay đoạn văn, không gian đó là khoảng trống giữa các đối tượng, thanh điều hướng, các khối nội dung, đồ họa… Sử dụng đúng cách càng nhiều khoảng trắng này sẽ định vị được thương hiệu của bạn theo hướng hiện đại, thanh lịch hoặc phổ biến, bình dân. Đồng thời, chúng sẽ là những điểm gây ấn tượng mạnh để website hay cũng chính là thương hiệu của bạn găm sâu trong trí nhớ của người dùng.</span></p>

<div style="text-align:center">
<figure class="image" style="display:inline-block"><img alt="Khoảng trắng giúp thiết kế website nhấn mạnh được thương hiệu" height="284" src="https://lh3.googleusercontent.com/i8vFFRr4Qtmdy7dYRZHScp-p0OefUgq7kwsLJpT36TDAHwJh3JsueRTAkh7u9XJIBj4MbXiFTJezCWC522SNJOqrwRVes5J9lnGSrENJ-UDrX5JTiDwGhelpoZUov_6LEucIygQM" width="624" />
<figcaption><em>Khoảng trắng giúp thiết kế website nhấn mạnh được thương hiệu</em></figcaption>
</figure>
</div>

<h2 dir="ltr"><strong>3. Cách sử dụng khoảng trắng trong thiết kế website</strong></h2>

<p dir="ltr" style="text-align: justify;"><span style="font-size:14px;">Đích đến cuối cùng của mỗi website là cung cấp trải nghiệm người dùng tốt nhất để gia tăng doanh thu. Vì vậy việc sử dụng khoảng trắng như thế nào mang lại hiệu quả nhất chính là biết khi nào nên dùng, khi nào không và như vậy đã đủ hay chưa. Muốn vậy hãy chuẩn bị đầy đủ và kỹ lưỡng từng khâu trong thiết kế website từ việc hình thành ý tưởng, phân tích ý tưởng và cách bố trí, sắp xếp các danh mục trên website ra sao. Đừng quên tham khảo ý kiến khách hàng và tìm đến một số các website của đối thủ cạnh tranh, đóng vai trò là khách hàng để phân tích về việc họ sử dụng khoảng trắng như vậy đã đủ, đúng chưa.</span></p>

<p dir="ltr" style="text-align: justify;"><span style="font-size:14px;">Tóm lại, dù bạn có đang thiết kế bằng phương pháp gì đi chăng nữa, thì vai trò chủ đạo của các bạn là hãy tỉnh táo và chỉ sử dụng những yếu tố quan trọng nhất để tạo nên một website có thông điệp rõ ràng cùng định hướng người dùng phù hợp.</span></p>

<div style="text-align:center">
<figure class="image" style="display:inline-block"><img alt="Sử dụng khoảng trắng hợp lý trong thiết kế website" height="416" src="https://lh6.googleusercontent.com/IZkRW1U49OQYT_8dWA_synVeL6lY3YaB-9cTpMUwRFoA57uh8FnB0IzLprYSEfN5vAODy_wSLJ60QhhT1SEy7EMYxbn_Me_e6caM6lM-vZAituSPWOAEEnBrV8h6cfKeGKNgaRLY" width="624" />
<figcaption><em>Sử dụng khoảng trắng hợp lý trong thiết kế website</em></figcaption>
</figure>
</div>

<p dir="ltr" style="text-align: justify;"><span style="font-size:14px;">Tốt hơn hết, hãy tìm đến một đơn vị thiết kế website uy tín để được tư vấn và hỗ trợ tốt nhất khi thiết kế website. Dưới con mắt của những người thiết kế website lâu năm, chắc chắn họ sẽ mang đến cho bạn những giải pháp tốt nhất.</span></p>

<p dir="ltr" style="text-align: justify;"><span style="font-size:14px;">Nhắc đến thiết kế website, <strong><a href="https://tdfoss.vn/">TDFOSS</a></strong> tự hào là một trong những đơn vị thiết kế website chuyên nghiệp nhất hiện nay. Đến với TDFOSS bạn không cần lo lắng về bất cứ vấn đề nào, chúng tôi đảm bảo tích hợp đầy đủ các tính năng tốt nhất cho website của bạn. Với kinh nghiệm lâu năm trong lĩnh vực thiết kế website, chúng tôi đã và đang làm việc với rất nhiều cá nhân, doanh nghiệp chính vì vậy mà chúng tôi hiểu được những gì cần thiết cho một thiết kế website chuyên nghiệp để phục vụ tốt nhất cho nhu cầu của các bạn.</span></p>

<p dir="ltr" style="text-align: justify;"><span style="font-size:14px;">Trên đây là những điều cần biết về khoảng trắng trong <strong><a href="https://tdfoss.vn/thiet-ke-website/">thiết kế website</a></strong>, hy vọng những kiến thức từ TDFOSS sẽ giúp đỡ các bạn trong việc tìm hiểu, lựa chọn được thiết kế website phù hợp với nhu cầu của mình.</span></p>

<p dir="ltr" style="text-align: justify;"><span style="font-size:14px;">Mọi thông tin chi tiết về TDFOSS xin vui lòng truy cập website: <strong><a href="https://tdfoss.vn">https://tdfoss.vn</a></strong> hoặc liên hệ hotline 24/07: <strong><span style="color:rgb(231, 76, 60);">0905 908 430</span></strong>.</span></p>

<div style="text-align: justify;">&nbsp;</div>

<p dir="ltr" style="text-align: justify;"><em><span style="font-size:14px;"><strong>&gt;&gt;&gt; Xem thêm:&nbsp;<a href="https://tdfoss.vn/tin-tuc/goc-chia-se/kham-pha-dac-diem-website-toi-gian-xu-huong-thiet-ke-web-nam-2019-285.html">Khám phá đặc điểm website tối giản - Xu hướng thiết kế web năm 2019</a></strong></span></em></p>
		</div>
	</div>
	<div id="footer" class="clearfix">
		<div id="url">
			<strong>URL của bản tin này: </strong><a href="https://tdfoss.vn/tin-tuc/goc-chia-se/nhung-dieu-can-biet-ve-khoang-trang-trong-thiet-ke-website-286.html" title="Những điều cần biết về khoảng trắng trong thiết kế website">https://tdfoss.vn/tin-tuc/goc-chia-se/nhung-dieu-can-biet-ve-khoang-trang-trong-thiet-ke-website-286.html</a>

		</div>
		<div class="clear"></div>
		<div class="copyright">
			&copy; Công ty TNHH phát triển và dịch vụ nguồn mở Thuận Đức
		</div>
		<div id="contact">
			<a href="mailto:contact@tdfoss.vn">contact@tdfoss.vn</a>
		</div>
	</div>
</div>
        <div id="timeoutsess" class="chromeframe">
            Bạn đã không sử dụng Site, <a onclick="timeoutsesscancel();" href="https://tdfoss.vn/#">Bấm vào đây để duy trì trạng thái đăng nhập</a>. Thời gian chờ: <span id="secField"> 60 </span> giây
        </div>
        <div id="openidResult" class="nv-alert" style="display:none"></div>
        <div id="openidBt" data-result="" data-redirect=""></div>
<div id="run_cronjobs" style="visibility:hidden;display:none;"><img alt="" src="/index.php?second=cronjobs&amp;p=n9M3y5Md" width="1" height="1" /></div>
<script src="https://tdfoss.vn/assets/js/jquery/jquery.min.js"></script>
<script>var nv_base_siteurl="/",nv_lang_data="vi",nv_lang_interface="vi",nv_name_variable="nv",nv_fc_variable="op",nv_lang_variable="language",nv_module_name="tin-tuc",nv_func_name="savefile",nv_is_user=0, nv_my_ofs=-4,nv_my_abbr="EDT",nv_cookie_prefix="nv4c_f5xT5",nv_check_pass_mstime=1738000,nv_area_admin=0,nv_safemode=0,theme_responsive=1,nv_is_recaptcha=0;</script>
<script src="https://tdfoss.vn/assets/js/language/vi.js"></script>
<script src="https://tdfoss.vn/assets/js/global.js"></script>
<script src="https://tdfoss.vn/themes/tdfoss/js/news.js"></script>
<script src="https://tdfoss.vn/themes/tdfoss/js/main.js"></script>
<script src="https://tdfoss.vn/themes/default/js/bootstrap.min.js"></script>
<script src="https://tdfoss.vn/themes/tdfoss/assets/javascripts/plugins/hover_dropdown/twitter-bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="https://tdfoss.vn/themes/tdfoss/assets/javascripts/jednotka.js" type="text/javascript"></script>
</body>
</html>