Xu hướng thiết kế https://beau.vn/vi vi 9 nguyên tắc phải biết khi nghiên cứu thiết kế (Design Research) https://beau.vn/vi/9-nguyen-tac-phai-biet-khi-nghien-cuu-thiet-ke-design-research <span class="field field--name-title field--type-string field--label-hidden">9 nguyên tắc phải biết khi nghiên cứu thiết kế (Design Research)</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/vi/user/38" typeof="schema:Person" property="schema:name" datatype="">content</span></span> <span class="field field--name-created field--type-created field--label-hidden">T2, 02/14/2022 - 14:38</span> <a href="/vi/cam-hung-thiet-ke-sang-tao" hreflang="vi">Cảm hứng thiết kế sáng tạo</a> <a href="/vi/nghien-cuu-ux" hreflang="vi">Nghiên cứu UX</a> <a href="/vi/thiet-ke-website" hreflang="vi">Thiết kế Website</a> <a href="/vi/xu-huong-thiet-ke" hreflang="vi">Xu hướng thiết kế</a> <a href="/vi/uxui-Trai-Nghiem-Nguoi-Dung-Giao-Dien-Nguoi-Dung" hreflang="vi">UX/UI</a> <a href="/vi/giao-dien-nguoi-dung" hreflang="vi">Giao diện người dùng</a> <a href="/vi/trai-nghiem-so" hreflang="vi">Trải nghiệm số</a> <a href="/vi/trai-nghiem-nguoi-dung" hreflang="vi">trải nghiệm người dùng</a> <a href="/vi/nghien-cuu-thiet-ke" hreflang="vi">nghiên cứu thiết kế</a> <div class="f-img" style="margin-bottom: 45px"> <img src="/sites/default/files/2022-02/9-nguyen-tac-phai-biet-khi-nghien-cuu-thiet-ke-design-research-cover.jpg" alt="9 nguyên tắc phải biết khi nghiên cứu thiết kế (Design Research)"> </div> <div class="desktop-space" style="height: 150px"></div> <div class="mobile-space" style="height: 50px"></div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <h2><p>Gần đây, cả những start-up lẫn tập đoàn lớn đều dành một sự quan tâm đặc biệt tới bước nghiên cứu trong các quy trình làm việc khác nhau. Các doanh nghiệp đã chấp nhận rằng sự đổi mới chỉ có thể đến từ việc hiểu người dùng là những con người với những đời sống phức tạp, và chỉ có thể từ đó, việc nghiên cứu thiết kế trước khi bắt tay vào dự án mới hiệu quả.<br /> &nbsp;</p> </h2> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="relateEntry-detail"> <h3 class="f-title">Bài viết liên quan</h3> <ul class="f-list"> <li><a href="/vi/goc-nhin/11-nguyen-tac-thiet-ke-web-se-tang-ty-le-chuyen-doi-cua-ban">11 Nguyên tắc thiết kế web sẽ tăng tỷ lệ chuyển đổi của bạn <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> <li><a href="/vi/goc-nhin/10-nguyen-tac-cot-loi-de-co-mot-thiet-ke-website-tot">10 nguyên tắc cốt lõi để có một thiết kế Website tốt <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> <li><a href="/vi/goc-nhin/tan-dung-cac-mo-hinh-nhan-thuc-vao-san-pham-thiet-ke-p1">Tận Dụng Các Mô Hình Nhận Thức Vào Sản Phẩm Thiết Kế p1 <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> </ul> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="f-text"> <p><em>Có rất nhiều&nbsp;câu chuyện về&nbsp;sai lầm nhận thức hay&nbsp;quản lý rủi ro. Vậy nên, đặt mục tiêu là sự hữu ích, đây là một bài viết dễ đọc được viết đơn giản về nghiên cứu thiết kế&nbsp;để bạn đọc có thể hình dung rõ nét nhất.</em></p> <p><a href="https://beau.vn/vi/nhung-dieu-cac-nha-lanh-dao-can-biet-ve-thiet-ke-va-trai-nghiem-khach-hang"><em><strong>=&gt;&nbsp;Những điều các nhà lãnh đạo cần biết về thiết kế và trải nghiệm khách hàng</strong></em></a></p> <h2>1. Thoải mái với sự không thoải mái</h2> <p>“Tất cả những gì tôi biết là tôi không biết gì cả” - Socrates</p> <p>Tất cả chúng ta đều từng bị cuốn theo những câu trả lời giá trị, từng nhận được phần thưởng từ những câu trả lời đúng ở trường, những ý tưởng sáng tạo tại cơ quan. Vậy nên không có gì ngạc nhiên khi nhiều người tìm lý do để tránh làm nghiên cứu, đặc biệt là nghiên cứu định tính. Cảm giác bất an về sự thiếu hiểu biết hẳn sâu trong tâm thức. Ít nhất thì nghiên cứu định lượng vẫn có những tiêu chuẩn thử nghiệm rõ ràng.</p> <p>Duy trì tư duy nghiên cứu nghĩa là nhận ra định kiến ở khắp nơi, không bao giờ có sự chắc chắn và câu trả lời nào cũng có hạn sử dụng nhất định. Một câu hỏi hay sẽ có nhiều giá trị hơn về đường dài. Và bạn chỉ có thể có câu hỏi hay khi bạn chấp nhận rằng mình không có câu trả lời cụ thể khi nghiên cứu thiết kế, lúc ấy bạn mới có thể học.&nbsp;</p> <h2>2. Hỏi trước, thử nghiệm sau</h2> <p>“Nếu chỉ thử nghiệm dụng cụ mở chai, ta sẽ không bao giờ nhận ra người dùng thích nắp vặn hơn” - Victor Lombardi, Why We Fail</p> <p>Bởi vậy, tất nhiên là phải gấp rút tạo và thử nghiệm sản phẩm. Sản phẩm thử nghiệm là câu trả lời và nó hữu hình, thậm chí còn dễ dàng để phác thảo trên giấy. Như vậy thì dễ, dễ hơn là đặt ra những câu hỏi, ngay cả khi nó có nghĩa là đốt một đống tiền. Với những ai quan tâm việc khẳng định giá trị bằng việc đẩy nhanh sản xuất, với quy trình trực quan, họ chỉ đặt ra được những câu hỏi với hiệu quả nửa vời.</p> <p>Sự nguy hiểm của việc thử nghiệm quá sớm là tiêu tốn chi phí và nguồn lực vào việc trả lời những câu hỏi không ai hỏi. Thử nghiệm một sản phẩm mới giúp bạn tinh chỉnh lại một ý tưởng tốt, chứ không phải là thứ cho bạn biết mình có đang giải quyết đúng vấn đề hay không. Cũng rất dễ có nhầm lẫn giữa sự hào nhoáng của sản phẩm thử nghiệm và chất lượng của ý tưởng, hoặc giữa một báo cáo nghiên cứu đồ sộ và một insight đắt giá.</p> <p>Thay vì tiết kiệm và bảo thủ với ý tưởng tệ, việc đặt ra những câu hỏi đúng sẽ giúp bạn xác định và loại bỏ những ý tưởng tệ nhanh hơn. Những gì bạn cần là đủ mạnh mẽ để chấp nhận sai lầm và hướng tới những kết quả nghiên cứu thiết kế có giá trị.</p> <p><img alt="" data-entity-type="file" data-entity-uuid="0bcb876a-8b99-4cf2-bdd8-e6224581b67a" height="800" src="/sites/default/files/9-nguyen-tac-phai-biet-khi-nghien-cuu-thiet-ke-design-research-1.jpg" width="1200" /></p> <h2>3. Biết rõ mục tiêu <a href="https://beau.vn/vi/goc-nhin/thiet-ke-trai-nghiem-nguoi-dung-website">nghiên cứu thiết kế</a></h2> <p>Tuy nhiên, đặt câu hỏi sẽ phí thời gian nếu không nắm rõ được mục tiêu trước. Cần xác định rõ ràng lý do ấy không phải là để chứng minh bạn đã đúng.</p> <p>Mọi người thường lao vào nghiên cứu, nói chuyện với các khách hàng mà không có mục tiêu cụ thể. Và sau đó, họ cảm thấy mình không biết nên làm gì với những thứ mình đã nghiên cứu. Điều ấy dẫn tới tình trạng “chúng tôi đã cố gắng làm nghiên cứu năm ngoái rồi, nó chỉ phí thời gian” và rồi họ lại quay lại với vòng an toàn của xây dựng và test, hoặc sẽ dẫn tới những cuộc tranh luận không hồi kết để diễn giải tài liệu nghiên cứu.</p> <p>Trong các tổ chức lớn, mục tiêu ngầm đôi khi là “thể hiện sự quan tâm đối với việc nghiên cứu thiết kế thế nhưng vẫn cứ để nhóm phát triển sản phẩm muốn làm gì thì làm”. Nghe có vẻ vô lý đó là kết luận được rút ra sau nhiều cuộc trò chuyện với rất nhiều người làm việc trong các bộ phận nghiên cứu, nơi được đổ nhiều tiền với những bản báo cáo hoành tráng nhưng lại không gây ảnh hưởng gì tới quyết định về sản phẩm. Nhận thức được sự việc là bước đầu để ngăn cho nó không xảy ra.&nbsp;</p> <p>Mọi chuyện sẽ ổn thoả, nghiên cứu sẽ đi đúng hướng nếu doanh nghiệp bắt đầu với mục tiêu: “Thiết lập cấp độ cụ thể và nhanh chóng hiểu được quan điểm của người dùng - những người không phải chúng ta.” Đừng với lấy bất cứ mục tiêu nào khác trước khi nhận thức được sự thật ấy. Chỉ khi bạn có một mục tiêu, bạn mới biết mình cần phải tìm hiểu điều gì. Và bạn cũng cần biết câu hỏi là gì trước khi bạn chọn cách để trả lời nó.</p> <h2>4. Đồng ý với những câu hỏi lớn</h2> <p>“Bản chất của mọi mô hình kinh doanh là việc đánh cược vào hành vi của con người” - The Power of Thick Data, WSJ.</p> <p>Chất lượng câu hỏi của bạn xác định độ hiệu quả của nghiên cứu. Hỏi sai câu hỏi cũng giống như thử nghiệm sản phẩm mới một cách bừa bãi, chúng đều mang đến cho bạn thứ mà bạn không cần. Hãy bắt đầu với những câu hỏi có mức độ ưu tiên cao. Những câu hỏi đưa ra bởi giả định, thiếu thấu đáo sẽ là những câu hỏi mang lại nhiều rủi ro nhất.</p> <p>Những câu hỏi nghiên cứu thiết kế&nbsp;lớn là những thứ bạn muốn biết, không phải là thứ bạn hỏi trong một cuộc phỏng vấn. Trong thực tế, hỏi thẳng câu hỏi của bạn thường là cách tệ nhất để học bất cứ điều gì. Mọi người thường không biết hoặc không sẵn sàng thừa nhận hành vi thực của mình, nhưng họ giỏi việc bịa ra câu trả lời.</p> <p><strong>Xem thêm:&nbsp;<a href="https://beau.vn/vi/lam-the-nao-de-chon-ra-phuong-phap-nghien-cuu-nguoi-dung-phu-hop"><em>Làm thế nào để chọn ra phương pháp nghiên cứu người dùng phù hợp</em></a></strong></p> <p>Nghiên cứu thiết kế thường được kết hợp với nghiên cứu người dùng. Nói chuyện với người dùng chỉ là một trong số nhiều cách để trả lời các câu hỏi nghiên cứu ưu tiên. Không phải mọi thứ bạn cần biết đều đến từ người dùng.</p> <p>Câu hỏi quan trọng nhất thường là một biến thể “dựa trên bằng chứng, thứ chúng ta thực sự biết về người dùng / đối thủ / năng lực nội bộ?” Những câu hỏi này có thể là những câu hỏi đáng sợ nếu phải trả lời một cách trung thực nhưng bạn nên trả lời chúng trong vòng một giờ đồng hồ.</p> <h2>5. Luôn có đủ tiền và thời gian cho <a href="https://beau.vn/vi/goc-nhin/thiet-ke-trai-nghiem-nguoi-dung-website">nghiên cứu thiết kế</a></h2> <p>Khi nghiên cứu được định nghĩa là một công việc bên ngoài thiết kế, mọi người sẽ có xu hướng coi nó là một việc mang tính bổ sung và bỏ qua nó.</p> <p>Thông thường, nhóm phải xin phép ai đó có thẩm quyền để làm nghiên cứu, và chỉ đặt vấn đề ấy cũng đã là việc động chạm tới thẩm quyền của họ. Nếu bạn từng làm việc với một lãnh đạo đã bỏ qua việc nghiên cứu định tính cho những dự án triệu đô, nhưng hãy tự nghĩ thử, liệu họ có bỏ qua việc nghiên cứu trước khi họ mua một chiếc xe 50 nghìn đô? Và những ý kiến trải chiều lại thường bị che đậy bởi nỗi sợ, xấu hổ khi bị chứng minh rằng mình đã sai hay đã không đưa sản phẩm đi đúng hướng.</p> <p>Nếu bạn thẳng thắn và rõ ràng về mục tiêu và vấn đề, bạn sẽ học được gì đó hữu ích, dù là với bao nhiêu thời gian hay tiền bạc. Tìm nghiên cứu trên mạng, đi ra ngoài và quan sát mọi người, test khả năng khả dụng của sản phẩm và hơn hết, sáng tạo.</p> <h2>6. Đừng kỳ vọng dữ liệu sẽ thay đổi tư duy</h2> <p>“Rất khó để khiến một người hiểu được điều gì khi thu nhập của họ không phụ thuộc vào việc họ có hiểu nó hay không” - Upton Sinclair.</p> <p>Đây thường là một vấn đề khó đối với những chuyên gia nghiên cứu được đào tạo chuyên nghiệp, dù cho nghiên cứu đã chứng minh nó đúng. Nếu bạn đã quen làm việc với những người coi trọng số liệu, bạn sẽ vất vả để thuyết phục cho những người không nằm trong vòng tròn ấy. Và bạn có thể thấy bị xúc phạm năng lực nếu họ nghĩ rằng dữ liệu thôi là chưa đủ.</p> <p>Trong điểm trong việc thu thập thông tin là để đưa ra quyết định dựa trên những căn cứ số liệu. Nhưng nếu những thông tin thu được ấy mẫu thuẫn với niềm tin và định kiến của người có thẩm quyền quyết định, họ sẽ có xu hướng bác bỏ hoặc phớt lờ chúng. Đây cũng là lý do chính mà những người làm nghiên cứu định tính gặp khó khăn khi làm việc trong những công ty hoạt đông thiên về kỹ thuật. Những người cảm thấy thoải mái và quen thuộc với những con số, họ muốn câu trả lời là những con số, ngay cả khi câu hỏi yêu cầu thứ gì đó hình tượng hơn.</p> <p><img alt="" data-entity-type="file" data-entity-uuid="3bcf47ad-e418-4d82-9c63-3dcd2bdd4543" height="1667" src="/sites/default/files/9-nguyen-tac-phai-biet-khi-nghien-cuu-thiet-ke-design-research-02.jpg" width="2500" /></p> <p>Vì vậy, bạn cần khéo léo trong việc trình bày nghiên cứu, tìm hiểu cách đồng nghiệp và lãnh đạo đưa ra quyết định, trước khi dùng dữ liệu để ảnh hưởng lên quyết định của họ.</p> <h2>7. Đừng ám ảnh với tính cầu toàn khi nghiên cứu thiết kế</h2> <p>“Chúng ta là những kẻ hay thay đổi, ngu ngốc với những ký ức khờ dại và một món quà tuyệt vời cho sự tự huỷ” - Suzanne Collins, Mockingjay.</p> <p>Cuộc đời con người là những mớ hỗn độn. Nếu con người không có vấn đề thì chẳng cần sản phẩm hay dịch vụ nào để giải quyết, và chúng ta sẽ chẳng có việc làm. Để tìm ra được cách tốt nhất để giải quyết được những vấn đề ấy sẽ đòi hỏi chúng ta bỏ đi tính kiếm soát và rơi vào thế giới thực, hỗn loạn ngoài kia. Dù nguyên tắc là cần thiết khi tiếp cận nghiên cứu nhưng sẽ không thể có đen trắng rõ ràng trong nghiên cứu định tính. Chỉ cần một mục tiêu rõ ràng, một câu hỏi đủ tốt, bạn có thể đối mặt với mọi trường hợp.</p> <p>Mong muốn cho ra một sản phẩm ngăn nắp, tạo thoả mãn sẽ giống như khiến thức chuyên môn được hình ảnh hoá, eye-tracking, khảo sát và báo cáo hùng hồn, nhưng tính ứng dụng thực tế thì lại thấp. Trong khi một thứ ít hình thức hơn có thể mang lại nhiều hiệu quả hơn.</p> <p>Bản thân việc kết hợp dữ liệu vào những quyết định thiết kế là một quá trình học hỏi. Bạn sẽ không bao giờ tìm thấy câu trả lời và xong xuôi. Nhưng nếu quy trình hiệu quả, những quyết định mà bạn đưa ra sau đó sẽ gồm cả sự tự tin ngày càng tăng của bạn.</p> <h2>8. Cam kết cộng tác</h2> <p>Khi đã trong cùng một dự án, tất cả mọi người đều cần biết về tình hình của dự án. Những người đưa ra quyết định cho sản phẩm cần nắm được mọi thông tin. Khối lượng kiến thức và thông tin không có ý nghĩa nếu nó chỉ nằm trong đầu một người duy nhất.</p> <p>Nghiên cứu mà không có sự cộng tác có nghĩa là một nhóm người đang học và làm báo cáo chỉ để một nhóm khác thừa nhận hoặc bác bỏ nó. Điều này được thấy ở ngay cả những nhóm làm việc ăn ý nhất. Cộng tác mà không có căn cứ, trao đổi có nghĩa là tất cả mọi người đã ngầm đồng ý rằng ý kiến của một cá nhân nào đó sẽ chiếm ưu thế. Và không có cách tiếp cận hiệu quả nào trong cả hai cách trên.</p> <p>Cách tiếp cận hiệu quả nhất chính là liên hệ trực tiếp với người đang làm sản phẩm. Tuỳ vào mỗi doanh nghiệp mà có nhưng phương thức khác nhau, nhưng trọng điểm của vấn đề vẫn là đặt ra câu hỏi để thiết lập một framework chung để đưa ra quyết định nhanh và hiệu quả hơn.</p> <p>Hãy cùng nhau hướng tới các mục tiêu chung:&nbsp;<a href="https://beautique.vn/insight/nghien-cuu-de-thau-hieu-khach-hang"><strong>Nghiên cứu để thấu hiểu khách hàng</strong></a></p> <h2>9. Tìm ra định kiến khi nghiên cứu thiết kế</h2> <p>“Chúng ta có thể mù quáng trước những điều hiển nhiên, và chúng ta cũng mù quảng trước sự mù quáng của chính mình” - Daniel Kahneman, Think Fast and Slow.</p> <p>Bạn hoàn thành công việc, tìm thấy vài câu trả lời và giờ bạn phải quyết định xem nó nghĩa là gì. Khi nói tới việc diễn giải những kết quả nghiên cứu, sự hợp tác trở nên rất quan trọng. Tất cả mọi người đều mang những định kiến có sẵn của riêng mình, chúng ta thấy những gì chúng ta tin. Vậy nên chúng ta cần mở rộng tầm nhìn của mình bằng cách trao đổi, hỏi ý kiến (bao gồm câu hỏi và mục tiêu sẵn có) từ người khác.</p> <p><strong>Xem thêm:&nbsp;<em><a href="https://beau.vn/vi/hay-tranh-10-thanh-kien-sau-khi-nghien-cuu-nguoi-dung">Hãy tránh 10 thành kiến sau khi Nghiên Cứu Người Dùng</a></em></strong></p> <p>Vấn đề không phải là bạn thông minh hay có kiến thức tốt tới đâu. Khi bạn chấp nhận điều ấy và miễn là bạn làm việc trong một môi trường tôn trọng và cởi mở thì nó sẽ là một hành trình thú vị, giúp bạn xác định và loại bỏ định kiến của bản thân.</p> <h2>Có lẽ hãy cứ gọi nó là thiết kế đúng</h2> <p>Tóm lại, những gì chúng ta đang nói về nghiên cứu thiết kế thực ra là thiết kế có cơ sở. Sáng tạo, tư duy và nghiên cứu đều là những phần không thể thiết trong quá trình thiết kế. Tách chúng ra sẽ tăng khả năng cho những sai lầm của sợ hãi, bản ngã và thiếu hiểu biết.</p> <p>Thiết kế là trao đổi giá trị. Trước khi bước vào cuộc chơi, bạn cần phải hỏi mọi người cần và muốn gì, cũng như giá trị mà doanh nghiệp của bạn muốn nhận lại là gì.</p> <p>Câu hỏi hay câu trả lời không quan trọng, miễn sao bạn có nguyên tắc trong cách tiếp cận, biết những gì bạn biết và dấn thân cho những mục tiêu đáng giá. Không có một con đường duy nhất, cũng không có câu trả lời duy nhất. Hãy tận hưởng sự bấp bênh vì nó sẽ không bao giờ kết thúc.</p> <p><a href="https://beautique.vn/insight/ung-dung-phuong-phap-design-sprints-cho-dinh-vi-thuong-hieu"><em><strong>=&gt;&nbsp;Ứng Dụng phương Pháp Design Sprints cho Định Vị Thương Hiệu</strong></em></a></p> <p><em>Viết bởi Erika Hall,<br /> Dịch và biên tập bởi<strong> Beau Agency</strong></em></p> </div> </div> </div> </div> </div> <div class="field field--name-field-other-articles field--type-entity-reference field--label-above"> <div class="field__items"> <a href="/vi/goc-nhin/tim-hieu-ve-thiet-ke-trai-nghiem-nguoi-dung-ux-design" hreflang="vi">Tìm hiểu về thiết kế trải nghiệm người dùng (UX Design)</a> <a href="/vi/goc-nhin/su-can-thiet-cua-online-marketing" hreflang="vi">Sự Cần Thiết Của Online Marketing</a> <a href="/vi/goc-nhin/5-vi-du-dien-hinh-ve-chien-luoc-dinh-vi-thuong-hieu" hreflang="vi">5 Ví Dụ Điển Hình Về Chiến Lược Định Vị Thương Hiệu</a> <a href="/vi/goc-nhin/marketing-hieu-qua-voi-customer-insight" hreflang="vi">Marketing Hiệu Quả Với Customer Insight </a> <a href="/vi/goc-nhin/vai-tro-cua-cultural-insight-trong-phan-tich-hanh-vi-nguoi-tieu-dung" hreflang="vi">Vai trò của Cultural Insight trong phân tích hành vi người tiêu dùng</a> <a href="/vi/goc-nhin/thu-gui-agency-client-thuc-su-muon-gi" hreflang="vi">Thư gửi Agency: Client thực sự muốn gì?</a> </div> </div> <div class="field field--name-field-hidden-article field--type-boolean field--label-above"> Off </div> Mon, 14 Feb 2022 07:38:15 +0000 content 186 at https://beau.vn Hình khối trong Thiết kế Web: Tâm lý học và Nhận thức thị giác https://beau.vn/vi/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac <span class="field field--name-title field--type-string field--label-hidden">Hình khối trong Thiết kế Web: Tâm lý học và Nhận thức thị giác</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/vi/user/38" typeof="schema:Person" property="schema:name" datatype="">content</span></span> <span class="field field--name-created field--type-created field--label-hidden">T3, 02/08/2022 - 14:33</span> <a href="/vi/cam-hung-thiet-ke-sang-tao" hreflang="vi">Cảm hứng thiết kế sáng tạo</a> <p><em>Nếu bạn là một designer, hẳn bạn rất quen thuộc với những câu như “hình chữ nhật thể hiện sự ổn định và tự tin” hay “hình tròn tượng trưng cho sự khép kín và thống nhất”, “hình tam giác biểu tượng cho sự chuyển động và tiến bộ,... Đặc biệt, với những designer chuyên về thiết kế web và thiết kế logo, niềm tin này gần như là một nỗi ám ảnh. </em></p> <p>Đáng buồn rằng, cách hiểu này là sai. Vậy thế nào mới là đúng?</p> <p><strong>Xem thêm: <a href="https://beau.vn/vi/truyen-thong-thi-giac-nhan-thuc-va-thao-tung"><em>Truyền Thông Thị Giác: Nhận Thức Và Thao Túng</em></a></strong></p> <p><img alt="" data-entity-type="file" data-entity-uuid="30cbcfff-4af8-4e4a-830f-6493f844c6b3" height="1668" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac-00.jpg" width="2501" loading="lazy" /></p> <h2>Quá nguyên tắc với các khuôn mẫu trong thiết kế web không hề tốt</h2> <p>Designers thường ít khi để ý tới sự phức tạp khi nghiên cứu về sự phức tạp trong nhận thức thị giác của thị giác. Mọi người thường cho rằng hình vuông đại diện cho sự tin cậy? Không thành vấn đề, đó là sự chắc chắn từ 4 cạnh của tứ giác. </p> <p>Cách tiếp cận nhận thức này là sai vì nó áp dụng một cách thụ động các nguyên tắc đã hiệu quả với người khác tại một thời điểm nhất định. Nếu không hiểu những nguyên lí thực thụ sau các nguyên tắc này, bạn sẽ mắc phải những sai lầm nghiêm trọng khác. </p> <p>Ví dụ như hình vuông đen của Malevich, bạn có thể liên tưởng hình này với sự tin cậy và bình tĩnh không?<br />  </p> <p><img alt="" data-entity-type="file" data-entity-uuid="8098eb7e-e742-42ad-8d61-4250253c9582" height="1668" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac-01.jpg" width="2500" loading="lazy" /></p> <p><br /> Kiệt tác nổi tiếng này được gọi là “cổng vào địa ngục”, dấy nên sự sợ hãi và bối rối khó hiểu ở nhiều người xem. Nhưng đương nhiên, logo không được trưng bày ở bảo tàng và sẽ được nhìn nhận theo cách khác. Logo được thiết kế dựa vào ngữ cảnh, môi trường, sự dễ hiểu và đặc biệt là mục đích sau cùng. </p> <p>Malevich đã đạt được mục tiêu của mình, designer chúng ta cũng phải đặt ra các mục tiêu thiết kế của mình và tìm cách hoàn thành chúng.</p> <p>Việc sử dụng các hình khối trong thiết kế web phải có ý thức và có mục đích. Designer nên biết gì về nhận thức thị giác - visual perception khi thiết kế?</p> <h2>Khi <a href="https://beau.vn/vi/goc-nhin/thiet-ke-trai-nghiem-nguoi-dung-website">thiết kế Web</a>, cần hiểu 'Nhận thức trực quan là một quá trình hoạt động'</h2> <p>Quá trình nào cũng diễn ra đúng lúc, dù chỉ trong tích tắc. Chúng ta không nhìn vào các đối tượng một cách vô thức. Nếu một thứ gì đó lọt vào tầm nhìn của chúng ta, não sẽ bắt đầu “quét” về đối tượng, tìm kiếm những trải nghiệm liên quan trong trí nhớ, đưa ra các liên tưởng, đánh giá các mối đe dọa, các tác hại hoặc lợi ích tiềm ẩn. Một khi bộ não quyết định đối tượng là vô hại, nó sẽ tìm kiếm các ứng dụng thực tế khả thi nhất. Bộ não rất tò mò, luôn tích cực tìm kiếm những điều mới lạ và những câu đố để giải.</p> <p>Chúng ta có thể làm cho thời gian nhận thức đối tượng ngắn hơn hoặc dài hơn, tùy thuộc vào những gì ta cần. Đơn giản là một lựa chọn tốt khi ta muốn thông báo gì đó cho người dùng, còn nếu muốn thu hút người dùng và giữ chân họ không rời khỏi trang, designer nên chọn những thiết kế phức tạp hơn. Sự lựa chọn giữa các hình dạng đơn giản và phức tạp phụ thuộc vào mục tiêu của thiết kế.</p> <p>Hãy cùng xem xét những gì diễn ra trong não bộ của người dùng khi họ nhìn vào một đối tượng trực quan.</p> <p>Đây là một quy trình gồm nhiều giai đoạn:</p> <h3>Não bộ nhận xét xem đối tượng có an toàn không</h3> <p>Từ những giây đầu tiên, não bộ đã quét qua các “mối đe doạ” tiềm ẩn thay vì thật sự chiêm ngưỡng thiết kế. Một số yếu tố có thể tạo nên cảm giác đe doạ: đường đứt đoạn được coi là hung hăng và bồn chồn, cho thấy sự lo lắng và nguy hiểm,... Điều này không có nghĩa là designer phải tránh hoàn toàn những phong cách thiết kế này. Vẻ ngoài năng động và có vẻ đe doạ đều là những yếu tố có thể gây chú ý ngay lập tức, đem lại giá trị nhất định cho thiết kế. Tuy nhiên, yếu tố thiết kế nào cũng nên được sử dụng vừa đủ, cẩn thận và mang ý nghĩa nhất định. </p> <p>Ví dụ như chỉ riêng 2 màu Xanh và Đỏ cũng đã có vô vàn <strong><a href="https://beau.vn/vi/xanh-do-va-cau-chuyen-ung-dung-mau-sac-trong-thiet-ke-ui">Câu chuyện về Ứng dụng màu sắc trong Thiết kế UI</a></strong> với các cảm giác khác nhau về sự an toàn.</p> <h3>Não chúng ta tìm kiếm các liên kết</h3> <p>Trong lúc quét cả những cái tốt và mối nguy hiểm trong thiết kế, bộ não sẽ so sánh với những trải nghiệm liên quan đã được ghi lại trong tiềm thức. Vậy, ta nên tuân theo những nguyên tắc nào trong việc lựa chọn các liên tưởng trực quan?</p> <ul> <li>Liên tưởng nên được hình thành ngay lập tức:</li> </ul> <p>Bộ não của chúng ta cần thời gian để tìm kiếm và tạo những mối liên quan nhất định. Hãy ghi nhớ điều này khi sáng tạo bất kì tác phẩm nào. Hình khối càng đơn giản, bộ não càng dễ đọc (đương nhiên là trừ các trường hợp mất tập trung và bị gián đoạn vì những yếu tố xung quanh). Càng mất nhiều thời gian để hình dung về hình khối, tác phẩm của designer càng phức tạp với người xem.</p> <p>Nét vẽ và các góc của hình cũng rất quan trọng. Mỗi kiểu góc thu hút một kiểu và làm chậm tiến trình “đọc” ảnh. 90% sự phức tạp của hình khối nằm ở số góc của hình. </p> <p><img alt="" data-entity-type="file" data-entity-uuid="49d9d9e2-9cb9-4a33-b03b-cd6b62cc8814" height="1355" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac-02.jpg" width="2500" loading="lazy" /></p> <ul> <li>Các liên tưởng phải phù hợp với khái niệm</li> </ul> <p>Liên tưởng của nhiều người có thể không như kỳ vọng của các designer. Designer vẽ nên mặt trời, người dùng lại có thể nhìn thấy lòng đỏ trứng rán. Vì thế, những người thiết kế nên tự hỏi: Những hình khối/hình dạng này còn có thể giống cái gì nữa?</p> <p>Những chuyên gia thiết kế đôi khi cũng mắc sai lầm. Có bao giờ bạn nghi ngờ rằng logo của Pepsi được lấy ý tưởng từ một “chiếc bụng béo” (không hay ho lắm vì đây là một tác hại của sản phẩm tới sức khoẻ) ?</p> <p><img alt="" data-entity-type="file" data-entity-uuid="d735c57a-31e0-4b1d-a2ab-085fa57c03aa" height="1423" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac-03.jpg" width="2500" loading="lazy" /></p> <p> </p> <p><strong>Xem thêm: <a href="https://beau.vn/vi/goc-nhin/tan-dung-cac-mo-hinh-nhan-thuc-vao-san-pham-thiet-ke-p1"><em>Tận Dụng Các Mô Hình Nhận Thức Vào Sản Phẩm Thiết Kế p1</em></a></strong></p> <ul> <li>Những sự liên tưởng về hình khối không cần phải giống chính xác hình dạng gốc</li> </ul> <p>Những sự liên tưởng quá đơn giản và đương nhiên thì dễ quên. Chỉ cần một chút sáng tạo nhỏ trong sự thiết kế, sự độc đáo này sẽ luôn thu hút được ánh mắt của người xem và đọng lại rất lâu trong tâm trí. </p> <p><img alt="" data-entity-type="file" data-entity-uuid="b0e080bf-c2dd-4ce4-acbb-a9e7eb4a73b8" height="1312" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac-04.jpg" width="2500" loading="lazy" /></p> <p> </p> <p>Nếu mục đích thiết kế chỉ là thu hút sự chú ý, designer có thể sử dụng những sự liên tưởng bất ngờ khó lường, nhưng vẫn cần đảm bảo sự có nghĩa là liên quan nhất định nhé (không gây shock).</p> <ul> <li>Sự liên tưởng nên tạo cảm xúc </li> </ul> <p>Đây là bí mật để tạo nên những thiết kế hấp dẫn. Hình khối không thể một mình tạo nên cảm xúc được, sự liên tưởng từ những hình khối đó mới dấy lên được cảm xúc từ người xem. Vì vậy, lựa chọn hình khối phù hợp dựa trên sự liên tưởng designer mong muốn từ người xem.</p> <h3>Não bộ luôn tìm kiếm ý nghĩa</h3> <p>Một bức vẽ sáng tạo về quả trứng rán ở vị trí của mặt trời chắc chắn sẽ thu hút sự chú ý, nhưng nó cũng sẽ khiến người dùng bối rối. Bộ não không ngừng cố gắng hiểu những gì nó nhìn thấy. Thiết kế hình khối phải thể hiện ý nghĩa liên quan đến thương hiệu/mục đích/ dự án, trừ khi toàn bộ mục đích của thiết kế là tạo nên một câu đố. </p> <p><img src="https://miro.medium.com/max/1400/1*k8K1ERyL8vBvy2-32-Q_5g.png" /></p> <h3>Bộ não luôn ưu tiên sự sắp xếp khoa học, cả trong thiết kế nói riêng và <a href="https://beau.vn/vi/goc-nhin/thiet-ke-trai-nghiem-nguoi-dung-website">thiết kế web</a> nói chung</h3> <p>Để hiểu những gì đang diễn ra trước mắt, tâm trí luôn cố gắng sắp xếp các đối tượng, kết hợp trong đầu các đối tượng tương tự với nhau một cách trực quan và phân tách các yếu tố khác biệt khác. </p> <p><a href="https://beau.vn/vi/goc-nhin/tam-ly-hoc-ve-mau-sac-va-ung-dung-trong-thiet-ke"><em><strong>=&gt; Tâm lý học về Màu sắc và ứng dụng trong thiết kế</strong></em></a></p> <p>Hình khối không chỉ đơn thuần là yếu tố thuộc các thành phần hình ảnh. Đây là một công cụ để tổ chức nội dung, chia và phân cấp các thành phần thành các khối, hướng dẫn trực quan và luôn hướng tới sự dễ hiểu trong thiết kế.</p> <h3>Não bộ luôn cố gắng hoàn thành bức tranh trên giao diện <a href="https://beau.vn/vi/goc-nhin/thiet-ke-trai-nghiem-nguoi-dung-website">thiết kế web</a></h3> <p>Chúng ta không cần tất cả/hay quá nhiều chi tiết để nhận ra một đối tượng. Bộ não sẽ sẵn sàng “lấp đầy khoảng trống” bằng càng chi tiết còn thiếu vào hình ảnh. Hình ảnh càng dễ hiểu và gọn gàng, thời gian nhận dạng càng ngắn. Đây là lí do vì sao đa số designer thường ưu tiên những hình minh hoạ tối giản.</p> <p><img alt="" data-entity-type="file" data-entity-uuid="b9aea49a-a2d8-4c0e-84ea-45a22e1e88d4" height="1563" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac-05.jpg" width="2500" loading="lazy" /></p> <h3>Não bộ ưa sự mới lạ</h3> <p>Bộ não chúng ta luôn thích thú với những điều mới mẻ và gây ngạc nhiên. Một thiết kế quá rập khuôn mà không có sự đặc biệt nào có thể làm mất sự phấn khích phía người xem. Hãy thoải mái thử nghiệm các hình dạng mới, tạo ra những sự kết hợp thú vị giữa các hình khối và đường nét quen thuộc. </p> <p>Vậy, trong <strong><a href="https://beau.vn/vi/thiet-ke-do-hoa-can-bao-nhieu-cai-wow-cho-mot-thiet-ke">Thiết kế đồ hoạ, Cần Bao Nhiêu Cái Wow Cho Một Thiết Kế?</a></strong></p> <h3><a href="https://beau.vn/vi/goc-nhin/thiet-ke-trai-nghiem-nguoi-dung-website">Thiết kế Web</a> kết hợp tương tác là điều não bộ luôn tìm kiếm</h3> <p>Mọi người có cái nhìn duy vật về mọi thứ, mở rộng ra cả thế giới ảo. Về mặt tinh thần, chúng ta có thể chạm vào mọi thứ, ngay cả khi điều đó là không thể. Chúng ta nhìn vào hình ảnh của một sự vật và tương tác với nó trong tâm trí. Ví dụ, ta nhìn thấy hình vẽ của một cái nắm cửa và “xoay” nó trong đầu. Ta nhìn thấy một cây kem và ngay lập tức có thể tưởng tượng được vị ngọt và mát của nó trên đầu lưỡi. Xem ảnh một quả tạ, dễ dạng hình dung được trọng lượng của nó trong tay. Tất cả diễn ra quá nhanh để nhận ra bất cứ điều gì. "Ta có thể làm gì với thứ này?" là câu hỏi thường trực trong đầu mỗi designer.</p> <p>Điều cần thiết là designer phải nhận ra đặc điểm nhận thức của con người. Mọi người đều biết về các nút "phải nhấn", và điều này áp dụng tương tự cho bất kỳ thiết kế nào, trong tất cả các hình dạng và yếu tố. Những hình dáng kích thích sự “chạm vào” - tương tác là tốt nhất.</p> <h2>Một số hình khối thường gặp trong thiết kế Web</h2> <h3>Hình vuông, hình chữ nhật và dạng lưới trong thiết kế Web</h3> <img alt="hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac" data-entity-type="file" data-entity-uuid="3e8a625b-c218-4e94-9392-2701a4c958d0" height="1667" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac-grid_0.jpg" width="2501" class="align-center" loading="lazy" /> <p>Đây là những hình khối được sử dụng rộng rãi khi thiết kế website, đặc biệt khi muốn tối giản hoá những website phức tạp. Dạng hình khối này được sử dụng chủ yếu để sắp xếp các thành phần thông tin chỉ trong một trang. Những hình học này gợi nên cảm giác cân bằng, tin cậy và an toàn, vì thế thường áp dụng cho các menu điều hướng và CTA (Call to Action - Kêu gọi hành động).</p> <h3>Hình kim cương/Hình thoi trong thiết kế Web</h3> <img alt="hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac" data-entity-type="file" data-entity-uuid="8f6c760e-cf21-451d-b76c-5fda30b5a2ba" height="1563" src="/sites/default/files/0hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac_Hinh%20thoi_0.jpg" width="2501" class="align-center" loading="lazy" /> <p>Những hình dạng này ít được sử dụng hơn nhưng mang lại cảm giác giao diện hiện đại. Chúng có thể được đặt riêng lẻ hoặc cùng nhau để tổng thể trang web năng động hơn.</p> <h3>Thiết kế Web với hình tam giác và zigzags</h3> <img alt="&quot;hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac" data-entity-type="file" data-entity-uuid="36df150c-06b2-42d4-8124-26af2862d5ac" height="1563" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac_hinh%20ziczac_0.jpg" width="2501" class="align-center" loading="lazy" /> <p>Tam giác là hình dạng hình khối mạnh mẽ, thể hiện chuyển động và hướng, điều chỉnh mắt người xem vào một khu vực cụ thể của trang. Đôi khi, phụ thuộc vào vị trí, tam giác có thể truyền tải ý nghĩa đối lập. Nếu hướng lên, đó là sự quyền lực, ổn định và năng lượng, còn hướng xuống, hình tam giác mang trạng thái thiếu ổn định hơn và có thể truyền tải năng lượng căng thẳng.</p> <h3>Hình tròn/Hình bầu dục trong thiết kế Web</h3> <img alt="hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac" data-entity-type="file" data-entity-uuid="3874ae23-dd46-404a-b3d4-2b78492d949d" height="1564" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac_hinhtron_0.jpg" width="2501" class="align-center" loading="lazy" /> <p>Dạng hình khối này có thể được kết hợp trong bất kì khu vực nào của trang web: biểu tượng. nút CTA hoặc hình thu nhỏ. Không có góc nhọn, đường tròn thể hiện sự chuyển động hài hoà đến vô tận. Khi áp dụng vào thiết kế Web, trang Web sẽ thêm tính trẻ trung và vô tư hơn. </p> <h3>Đường chéo và Hình nghiêng</h3> <img alt="hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac" data-entity-type="file" data-entity-uuid="e3bcd6d8-63db-4c75-86b5-258638c3c121" height="1563" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac_duong%20cheo_0.jpg" width="2501" class="align-center" loading="lazy" /> <p>Những hình dạng này tạo ra chuyển động và hướng, thu hút mắt người xem từ điểm này sang điểm khác của trang web. Một Web Designer có thể áp dụng đường chéo để tạo cảm giác năng động và khuyến khích người dùng khám phá website nhiều hơn.</p> <h3>Đa giác (nhiều hơn 4 mặt)</h3> <img alt="hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac" data-entity-type="file" data-entity-uuid="ead1b152-b370-41c3-8916-b8e7af2feef0" height="1564" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac_da%20giac_0.jpg" width="2501" class="align-center" loading="lazy" /> <p>Đa giác nghĩa là hình khối có từ 3 cạnh và 3 góc nhọn trở lên, có thể là những đa giác đều, hoặc đa giác bất đối xứng. Ngũ giác, lục giác và bát giác là những đa giác được sử dụng thường xuyên nhất vì tính lin hoạt trong thiết kế đồ hoạ. Dạng hình học này trong thiết kế Web giữ đôi mắt "bận rộn" hơn và nhanh chóng thu hút sự chú ý của người xem. </p> <h3>Hình khối tự nhiên </h3> <img alt="hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac" data-entity-type="file" data-entity-uuid="68a08a64-e5a4-42f1-806b-3208caebbf8b" height="1563" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac_hinh%20organic_0.jpg" width="2501" class="align-center" loading="lazy" /> <p>Những hình khối này khắc hoạ theo vật thể tìm được trong tự nhiên như lá, hoa, bướm, đám mây, v.v... Chúng thường không đều, không đối xứng, biểu thị sự thoải mái, thống nhất và dễ tiếp cận. Những hình dạng này trong thiết kế Web có thể làm nổi bật môi trường tự nhiên ngoài trời. </p> <h3>Đường cong, đường lượn sóng, nét hất</h3> <img alt="hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac" data-entity-type="file" data-entity-uuid="21624533-1775-4bb3-80da-4b3ea9d457f3" height="1563" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac_%20duong%20cong.jpg" width="2501" class="align-center" loading="lazy" /> <p>Đường cong tạo cảm giác uyển chuyển, khiến người xem thấy bình tĩnh và thư thái, vì thế người xem có thể khám phá trang web mà không bị "căng". Web Designer thường sử dụng đường cong để giao diện hiện đại, gợi cảm và phong cách hơn.</p> <h3>Áp dụng đường xoắn ốc và vòng lặp trong thiết kế web</h3> <img alt="hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac" data-entity-type="file" data-entity-uuid="41051301-56bd-4411-9eaa-f345e8e1d324" height="1564" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac_%20xoan%20oc.jpg" width="2501" class="align-center" loading="lazy" /> <p>Hình khối dạng này có thể thể hiện sự hoàn hảo trong bố cục, đồng thời gợi cảm giác bí ẩn, sáng tạo, phát triển và thăng tiến. Với những hình khối này, trang web dễ dàng có cảm giác chuyển động, thu hút người xem hơn.</p> <h3>Ngôi sao</h3> <img alt="hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac" data-entity-type="file" data-entity-uuid="77594a8b-7a40-4366-8495-f0018ab375f7" height="1564" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac_ngoi%20sao_0.jpg" width="2501" class="align-center" loading="lazy" /> <p>Đây là một yếu tố tự nhiên sử dụng để truyền tải nội dung liên quan đến tầm quan trọng và thành tích, liên kết ngôi sao với những giải thưởng và thành tựu doanh nghiệp đã đạt được.</p> <h3>Thiết kế Web với hình mũi tên</h3> <img alt="hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac" data-entity-type="file" data-entity-uuid="d2fcdafc-0d05-42b6-b5bc-9b84334aa229" height="1563" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac_hinh%20mui%20ten.jpg" width="2501" class="align-center" loading="lazy" /> <p>Mũi tên hiệu quả với những nút chuyển hướng, giúp người xem theo dõi đường dẫn thông tin từ phần này sang phần khác qua đồ hoạ. Có nhiều kiểu dáng và thiết kế khác nhau, mũi tên đậm và chắc chắn thì truyền tải nhiều sức mạnh, còn mũi tên nguệch ngoạc thì đem lại không khí vui tươi, còn mũi tên đồng tâm có thể được sử dụng để biểu thị chu trình và quy trình.</p> <h3>Biểu tượng cảm xúc</h3> <img alt="hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac" data-entity-type="file" data-entity-uuid="6638ab98-0495-41e2-8bac-45de2bb67de8" height="1563" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac_%20emoji.jpg" width="2501" class="align-center" loading="lazy" /> <p>Những hình ảnh có kích thước bằng văn bản, truyền tải nhiều loại cảm xúc và khái niệm. Sử dụng emoji để tạo design layout web vui nhộn và thu hút thị trường trẻ hơn hay những khách hàng ưa giao tiếp nhanh gọn. Trang web sẽ bớt trang trọng và thoải mái hơn, tuy nhiên sử dụng emoji cũng nên áp dụng đúng ngữ cảnh. Nếu không, người dùng rất có thể sẽ rời bỏ trang web bất cứ lúc nào.</p> <h2>Kết</h2> <p>Nhận thức thị giác không chỉ là một đặc điểm của con người. Đó là một quá trình thay đổi diễn ra trong các cơ quan cảm giác của con người bị ảnh hưởng bởi các yếu tố vật lý của một đối tượng trực quan. Nếu biết cách thức hoạt động của nhận thức, chúng ta có thể tạo ra những thiết kế web mà người dùng sẽ yêu thích ngay từ cái nhìn đầu tiên.</p> <p><a href="https://beau.vn/vi/goc-nhin"><em><strong>Xem thêm các bài viết về Design và Web Design tại đây.</strong></em></a></p> <p> </p> <a href="/vi/mau-sac" hreflang="vi">màu sắc</a> <a href="/vi/thiet-ke-website" hreflang="vi">Thiết kế Website</a> <a href="/vi/xu-huong-thiet-ke" hreflang="vi">Xu hướng thiết kế</a> <a href="/vi/uxui-Trai-Nghiem-Nguoi-Dung-Giao-Dien-Nguoi-Dung" hreflang="vi">UX/UI</a> <a href="/vi/giao-dien-nguoi-dung" hreflang="vi">Giao diện người dùng</a> <a href="/vi/trai-nghiem-so" hreflang="vi">Trải nghiệm số</a> <a href="/vi/trai-nghiem-nguoi-dung" hreflang="vi">trải nghiệm người dùng</a> <a href="/vi/ui" hreflang="vi">UI</a> <a href="/vi/ux" hreflang="vi">UX</a> <a href="/vi/thiet-ke-danh-cho-doanh-nghiep" hreflang="vi">Thiết kế dành cho doanh nghiệp</a> <div class="f-img" style="margin-bottom: 45px"> <img src="/sites/default/files/2022-02/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac-cover.jpg" alt="Hình khối trong Thiết kế Web: Tâm lý học và Nhận thức thị giác"> </div> <div class="desktop-space" style="height: 150px"></div> <div class="mobile-space" style="height: 50px"></div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="f-text"> <p><em>Nếu bạn là một designer, hẳn bạn rất quen thuộc với những câu như “hình chữ nhật thể hiện sự ổn định và tự tin” hay “hình tròn tượng trưng cho sự khép kín và thống nhất”, “hình tam giác biểu tượng cho sự chuyển động và tiến bộ,... Đặc biệt, với những designer chuyên về thiết kế web và thiết kế logo, niềm tin này gần như là một nỗi ám ảnh.&nbsp;</em></p> <p>Đáng buồn rằng, cách hiểu này là sai. Vậy thế nào mới là đúng?</p> <p><strong>Xem thêm:&nbsp;<a href="https://beau.vn/vi/truyen-thong-thi-giac-nhan-thuc-va-thao-tung"><em>Truyền Thông Thị Giác: Nhận Thức Và Thao Túng</em></a></strong></p> <p><img alt="" data-entity-type="file" data-entity-uuid="30cbcfff-4af8-4e4a-830f-6493f844c6b3" height="1668" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac-00.jpg" width="2501" /></p> <h2>Quá nguyên tắc với các khuôn mẫu trong thiết kế web không hề tốt</h2> <p>Designers thường ít khi để ý tới sự phức tạp khi nghiên cứu về sự phức tạp trong nhận thức thị giác của thị giác. Mọi người thường cho rằng hình vuông đại diện cho sự tin cậy? Không thành vấn đề, đó là sự chắc chắn từ 4 cạnh của tứ giác.&nbsp;</p> <p>Cách tiếp cận nhận thức này là sai vì nó áp dụng một cách thụ động các nguyên tắc đã hiệu quả với người khác tại một thời điểm nhất định. Nếu không hiểu những nguyên lí thực thụ sau các nguyên tắc này, bạn sẽ mắc phải những sai lầm nghiêm trọng khác.&nbsp;</p> <p>Ví dụ như hình vuông đen của Malevich, bạn có thể liên tưởng hình này với sự tin cậy và bình tĩnh không?<br /> &nbsp;</p> <p><img alt="" data-entity-type="file" data-entity-uuid="8098eb7e-e742-42ad-8d61-4250253c9582" height="1668" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac-01.jpg" width="2500" /></p> <p><br /> Kiệt tác nổi tiếng này được gọi là “cổng vào địa ngục”, dấy nên sự sợ hãi và bối rối khó hiểu ở nhiều người xem. Nhưng đương nhiên, logo không được trưng bày ở bảo tàng và sẽ được nhìn nhận theo cách khác. Logo được thiết kế dựa vào ngữ cảnh, môi trường, sự dễ hiểu và đặc biệt là mục đích sau cùng.&nbsp;</p> <p>Malevich đã đạt được mục tiêu của mình, designer chúng ta cũng phải đặt ra các mục tiêu thiết kế của mình và tìm cách hoàn thành chúng.</p> <p>Việc sử dụng các hình khối trong thiết kế web phải có ý thức và có mục đích. Designer nên biết gì về nhận thức thị giác - visual perception khi thiết kế?</p> <h2>Khi <a href="https://beau.vn/vi/goc-nhin/thiet-ke-trai-nghiem-nguoi-dung-website">thiết kế Web</a>, cần hiểu 'Nhận thức trực quan là một quá trình hoạt động'</h2> <p>Quá trình nào cũng diễn ra đúng lúc, dù chỉ trong tích tắc. Chúng ta không nhìn vào các đối tượng một cách vô thức. Nếu một thứ gì đó lọt vào tầm nhìn của chúng ta, não sẽ bắt đầu “quét” về đối tượng, tìm kiếm những trải nghiệm liên quan trong trí nhớ, đưa ra các liên tưởng, đánh giá các mối đe dọa, các tác hại hoặc lợi ích tiềm ẩn. Một khi bộ não quyết định đối tượng là vô hại, nó sẽ tìm kiếm các ứng dụng thực tế khả thi nhất. Bộ não rất tò mò, luôn tích cực tìm kiếm những điều mới lạ và những câu đố để giải.</p> <p>Chúng ta có thể làm cho thời gian nhận thức đối tượng ngắn hơn hoặc dài hơn, tùy thuộc vào những gì ta cần. Đơn giản là một lựa chọn tốt khi ta muốn thông báo gì đó cho người dùng, còn nếu muốn thu hút người dùng và giữ chân họ không rời khỏi trang, designer nên chọn những thiết kế phức tạp hơn. Sự lựa chọn giữa các hình dạng đơn giản và phức tạp phụ thuộc vào mục tiêu của thiết kế.</p> <p>Hãy cùng xem xét những gì diễn ra trong não bộ của người dùng khi họ nhìn vào một đối tượng trực quan.</p> <p>Đây là một quy trình gồm nhiều giai đoạn:</p> <h3>Não bộ nhận xét xem đối tượng có an toàn không</h3> <p>Từ những giây đầu tiên, não bộ đã quét qua các “mối đe doạ” tiềm ẩn thay vì thật sự chiêm ngưỡng thiết kế. Một số yếu tố có thể tạo nên cảm giác đe doạ: đường đứt đoạn được coi là hung hăng và bồn chồn, cho thấy sự lo lắng và nguy hiểm,... Điều này không có nghĩa là designer phải tránh hoàn toàn những phong cách thiết kế này. Vẻ ngoài năng động và có vẻ đe doạ đều là những yếu tố có thể gây chú ý ngay lập tức, đem lại giá trị nhất định cho thiết kế. Tuy nhiên, yếu tố thiết kế nào cũng nên được sử dụng vừa đủ, cẩn thận và mang ý nghĩa nhất định.&nbsp;</p> <p>Ví dụ như chỉ riêng 2 màu Xanh và Đỏ cũng đã có vô vàn&nbsp;<strong><a href="https://beau.vn/vi/xanh-do-va-cau-chuyen-ung-dung-mau-sac-trong-thiet-ke-ui">Câu chuyện về Ứng dụng màu sắc trong Thiết kế UI</a></strong> với các cảm giác khác nhau về sự an toàn.</p> <h3>Não chúng ta tìm kiếm các liên kết</h3> <p>Trong lúc quét cả những cái tốt và mối nguy hiểm trong thiết kế, bộ não sẽ so sánh với những trải nghiệm liên quan đã được ghi lại trong tiềm thức. Vậy, ta nên tuân theo những nguyên tắc nào trong việc lựa chọn các liên tưởng trực quan?</p> <ul> <li>Liên tưởng nên được hình thành ngay lập tức:</li> </ul> <p>Bộ não của chúng ta cần thời gian để tìm kiếm và tạo những mối liên quan nhất định. Hãy ghi nhớ điều này khi sáng tạo bất kì tác phẩm nào. Hình khối càng đơn giản, bộ não càng dễ đọc (đương nhiên là trừ các trường hợp mất tập trung và bị gián đoạn vì những yếu tố xung quanh). Càng mất nhiều thời gian để hình dung về hình khối, tác phẩm của designer càng phức tạp với người xem.</p> <p>Nét vẽ và các góc của hình cũng rất quan trọng. Mỗi kiểu góc thu hút một kiểu và làm chậm tiến trình “đọc” ảnh. 90% sự phức tạp của hình khối nằm ở số góc của hình.&nbsp;</p> <p><img alt="" data-entity-type="file" data-entity-uuid="49d9d9e2-9cb9-4a33-b03b-cd6b62cc8814" height="1355" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac-02.jpg" width="2500" /></p> <ul> <li>Các liên tưởng phải phù hợp với khái niệm</li> </ul> <p>Liên tưởng của nhiều người có thể không như kỳ vọng của các designer. Designer vẽ nên mặt trời, người dùng lại có thể nhìn thấy lòng đỏ trứng rán. Vì thế, những người thiết kế nên tự hỏi: Những hình khối/hình dạng này còn có thể giống cái gì nữa?</p> <p>Những chuyên gia thiết kế đôi khi cũng mắc sai lầm. Có bao giờ bạn nghi ngờ rằng logo của Pepsi được lấy ý tưởng từ một “chiếc bụng béo” (không hay ho lắm vì đây là một tác hại của sản phẩm tới sức khoẻ) ?</p> <p><img alt="" data-entity-type="file" data-entity-uuid="d735c57a-31e0-4b1d-a2ab-085fa57c03aa" height="1423" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac-03.jpg" width="2500" /></p> <p>&nbsp;</p> <p><strong>Xem thêm:&nbsp;<a href="https://beau.vn/vi/goc-nhin/tan-dung-cac-mo-hinh-nhan-thuc-vao-san-pham-thiet-ke-p1"><em>Tận Dụng Các Mô Hình Nhận Thức Vào Sản Phẩm Thiết Kế p1</em></a></strong></p> <ul> <li>Những sự liên tưởng về hình khối không cần phải giống chính xác hình dạng gốc</li> </ul> <p>Những sự liên tưởng quá đơn giản và đương nhiên thì dễ quên. Chỉ cần một chút sáng tạo nhỏ trong sự thiết kế, sự độc đáo này sẽ luôn thu hút được ánh mắt của người xem và đọng lại rất lâu trong tâm trí.&nbsp;</p> <p><img alt="" data-entity-type="file" data-entity-uuid="b0e080bf-c2dd-4ce4-acbb-a9e7eb4a73b8" height="1312" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac-04.jpg" width="2500" /></p> <p>&nbsp;</p> <p>Nếu mục đích thiết kế chỉ là thu hút sự chú ý, designer có thể sử dụng những sự liên tưởng bất ngờ khó lường, nhưng vẫn cần đảm bảo sự có nghĩa là liên quan nhất định nhé (không gây shock).</p> <ul> <li>Sự liên tưởng nên tạo cảm xúc&nbsp;</li> </ul> <p>Đây là bí mật để tạo nên những thiết kế hấp dẫn. Hình khối không thể một mình tạo nên cảm xúc được, sự liên tưởng từ những hình khối đó mới dấy lên được cảm xúc từ người xem. Vì vậy, lựa chọn hình khối phù hợp dựa trên sự liên tưởng designer mong muốn từ người xem.</p> <h3>Não bộ luôn tìm kiếm ý nghĩa</h3> <p>Một bức vẽ sáng tạo về quả trứng rán ở vị trí của mặt trời chắc chắn sẽ thu hút sự chú ý, nhưng nó cũng sẽ khiến người dùng bối rối. Bộ não không ngừng cố gắng hiểu những gì nó nhìn thấy. Thiết kế hình khối phải thể hiện ý nghĩa liên quan đến thương hiệu/mục đích/ dự án, trừ khi toàn bộ mục đích của thiết kế là tạo nên một câu đố.&nbsp;</p> <p><img src="https://miro.medium.com/max/1400/1*k8K1ERyL8vBvy2-32-Q_5g.png" /></p> <h3>Bộ não luôn ưu tiên sự sắp xếp khoa học, cả trong thiết kế nói riêng và <a href="https://beau.vn/vi/goc-nhin/thiet-ke-trai-nghiem-nguoi-dung-website">thiết kế web</a> nói chung</h3> <p>Để hiểu những gì đang diễn ra trước mắt, tâm trí luôn cố gắng sắp xếp các đối tượng, kết hợp trong đầu các đối tượng tương tự với nhau một cách trực quan và phân tách các yếu tố khác biệt khác.&nbsp;</p> <p><a href="https://beau.vn/vi/goc-nhin/tam-ly-hoc-ve-mau-sac-va-ung-dung-trong-thiet-ke"><em><strong>=&gt;&nbsp;Tâm lý học về Màu sắc và ứng dụng trong thiết kế</strong></em></a></p> <p>Hình khối không chỉ đơn thuần là yếu tố thuộc các thành phần hình ảnh. Đây là một công cụ để tổ chức nội dung, chia và phân cấp các thành phần thành các khối, hướng dẫn trực quan và luôn hướng tới sự dễ hiểu trong thiết kế.</p> <h3>Não bộ luôn cố gắng hoàn thành bức tranh trên giao diện <a href="https://beau.vn/vi/goc-nhin/thiet-ke-trai-nghiem-nguoi-dung-website">thiết kế web</a></h3> <p>Chúng ta không cần tất cả/hay quá nhiều chi tiết để nhận ra một đối tượng. Bộ não sẽ sẵn sàng “lấp đầy khoảng trống” bằng càng chi tiết còn thiếu vào hình ảnh. Hình ảnh càng dễ hiểu và gọn gàng, thời gian nhận dạng càng ngắn. Đây là lí do vì sao đa số designer thường ưu tiên những hình minh hoạ tối giản.</p> <p><img alt="" data-entity-type="file" data-entity-uuid="b9aea49a-a2d8-4c0e-84ea-45a22e1e88d4" height="1563" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac-05.jpg" width="2500" /></p> <h3>Não bộ ưa sự mới lạ</h3> <p>Bộ não chúng ta luôn thích thú với những điều mới mẻ và gây ngạc nhiên. Một thiết kế quá rập khuôn mà không có sự đặc biệt nào có thể làm mất sự phấn khích phía người xem. Hãy thoải mái thử nghiệm các hình dạng mới, tạo ra những sự kết hợp thú vị giữa các hình khối và đường nét quen thuộc.&nbsp;</p> <p>Vậy, trong&nbsp;<strong><a href="https://beau.vn/vi/thiet-ke-do-hoa-can-bao-nhieu-cai-wow-cho-mot-thiet-ke">Thiết kế đồ hoạ,&nbsp;Cần Bao Nhiêu Cái Wow Cho Một Thiết Kế?</a></strong></p> <h3><a href="https://beau.vn/vi/goc-nhin/thiet-ke-trai-nghiem-nguoi-dung-website">Thiết kế Web</a> kết hợp tương tác là điều não bộ luôn tìm kiếm</h3> <p>Mọi người có cái nhìn duy vật về mọi thứ, mở rộng ra cả thế giới ảo. Về mặt tinh thần, chúng ta có thể chạm vào mọi thứ, ngay cả khi điều đó là không thể. Chúng ta nhìn vào hình ảnh của một sự vật và tương tác với nó trong tâm trí. Ví dụ, ta nhìn thấy hình vẽ của một cái nắm cửa và “xoay” nó trong đầu. Ta nhìn thấy một cây kem và ngay lập tức có thể tưởng tượng được vị ngọt và mát của nó trên đầu lưỡi. Xem ảnh một quả tạ, dễ dạng hình dung được trọng lượng của nó trong tay. Tất cả diễn ra quá nhanh để nhận ra bất cứ điều gì. "Ta có thể làm gì với thứ này?" là câu hỏi thường trực trong đầu mỗi designer.</p> <p>Điều cần thiết là designer phải nhận ra đặc điểm nhận thức của con người. Mọi người đều biết về các nút "phải nhấn", và điều này áp dụng tương tự cho bất kỳ thiết kế nào, trong tất cả các hình dạng và yếu tố. Những hình dáng kích thích sự “chạm vào” - tương tác là tốt nhất.</p> <h2>Một số hình khối thường gặp trong thiết kế Web</h2> <h3>Hình vuông, hình chữ nhật và dạng lưới trong thiết kế Web</h3> <img alt="hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac" data-align="center" data-entity-type="file" data-entity-uuid="3e8a625b-c218-4e94-9392-2701a4c958d0" height="1667" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac-grid_0.jpg" width="2501" /> <p>Đây là những hình khối được sử dụng rộng rãi khi thiết kế website, đặc biệt khi muốn tối giản hoá những website phức tạp. Dạng hình khối này được sử dụng chủ yếu để sắp xếp các thành phần thông tin chỉ trong một trang. Những hình học này gợi nên cảm giác cân bằng, tin cậy và an toàn, vì thế thường áp dụng cho các menu điều hướng và CTA (Call to Action - Kêu gọi hành động).</p> <h3>Hình kim cương/Hình thoi trong thiết kế Web</h3> <img alt="hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac" data-align="center" data-entity-type="file" data-entity-uuid="8f6c760e-cf21-451d-b76c-5fda30b5a2ba" height="1563" src="/sites/default/files/0hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac_Hinh%20thoi_0.jpg" width="2501" /> <p>Những hình dạng này ít được sử dụng hơn nhưng mang lại cảm giác giao diện hiện đại. Chúng có thể được đặt riêng lẻ hoặc cùng nhau để tổng thể trang web năng động hơn.</p> <h3>Thiết kế Web với hình tam giác và zigzags</h3> <img alt="&quot;hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac" data-align="center" data-entity-type="file" data-entity-uuid="36df150c-06b2-42d4-8124-26af2862d5ac" height="1563" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac_hinh%20ziczac_0.jpg" width="2501" /> <p>Tam giác là hình dạng hình khối mạnh mẽ, thể hiện chuyển động và hướng, điều chỉnh mắt&nbsp;người xem vào một khu vực cụ thể của trang. Đôi khi, phụ thuộc vào vị trí, tam giác có thể truyền tải ý nghĩa đối lập. Nếu hướng lên, đó là sự quyền lực, ổn định và năng lượng, còn hướng xuống, hình tam giác mang trạng thái thiếu ổn định hơn và có thể truyền tải năng lượng căng thẳng.</p> <h3>Hình tròn/Hình bầu dục trong thiết kế Web</h3> <img alt="hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac" data-align="center" data-entity-type="file" data-entity-uuid="3874ae23-dd46-404a-b3d4-2b78492d949d" height="1564" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac_hinhtron_0.jpg" width="2501" /> <p>Dạng hình khối này có thể được kết hợp trong bất kì khu vực nào của trang web: biểu tượng. nút CTA hoặc hình thu nhỏ. Không có góc nhọn, đường tròn thể hiện sự chuyển động hài hoà đến vô tận. Khi áp dụng vào thiết kế Web, trang Web sẽ thêm tính trẻ trung và vô tư hơn.&nbsp;</p> <h3>Đường chéo và Hình nghiêng</h3> <img alt="hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac" data-align="center" data-entity-type="file" data-entity-uuid="e3bcd6d8-63db-4c75-86b5-258638c3c121" height="1563" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac_duong%20cheo_0.jpg" width="2501" /> <p>Những hình dạng này tạo ra chuyển động và hướng, thu hút mắt người xem từ điểm này sang điểm khác của trang web. Một Web Designer có thể áp dụng đường chéo để tạo cảm giác năng động và khuyến khích người dùng khám phá website nhiều hơn.</p> <h3>Đa giác (nhiều hơn 4 mặt)</h3> <img alt="hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac" data-align="center" data-entity-type="file" data-entity-uuid="ead1b152-b370-41c3-8916-b8e7af2feef0" height="1564" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac_da%20giac_0.jpg" width="2501" /> <p>Đa giác nghĩa là hình khối có từ 3 cạnh và 3 góc nhọn trở lên, có thể là những đa giác đều, hoặc đa giác bất đối xứng. Ngũ giác, lục giác và bát giác là những đa giác được sử dụng thường xuyên nhất vì tính lin hoạt trong thiết kế đồ hoạ. Dạng hình học này trong thiết kế Web giữ đôi mắt "bận rộn" hơn và nhanh chóng thu hút sự chú ý của người xem.&nbsp;</p> <h3>Hình khối tự nhiên&nbsp;</h3> <img alt="hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac" data-align="center" data-entity-type="file" data-entity-uuid="68a08a64-e5a4-42f1-806b-3208caebbf8b" height="1563" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac_hinh%20organic_0.jpg" width="2501" /> <p>Những hình khối này khắc hoạ theo vật thể tìm được trong tự nhiên như lá, hoa, bướm, đám mây, v.v... Chúng thường&nbsp;không đều, không đối xứng, biểu thị sự thoải mái, thống nhất và dễ tiếp cận. Những hình dạng này trong thiết kế Web có thể làm nổi bật môi trường tự nhiên ngoài trời.&nbsp;</p> <h3>Đường cong, đường lượn sóng, nét hất</h3> <img alt="hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac" data-align="center" data-entity-type="file" data-entity-uuid="21624533-1775-4bb3-80da-4b3ea9d457f3" height="1563" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac_%20duong%20cong.jpg" width="2501" /> <p>Đường cong tạo cảm giác uyển chuyển, khiến người xem thấy bình tĩnh và thư thái, vì thế người xem có thể khám phá trang web mà không bị "căng". Web Designer thường sử dụng đường cong để giao diện hiện đại, gợi cảm và phong cách hơn.</p> <h3>Áp dụng đường xoắn ốc và vòng lặp trong thiết kế web</h3> <img alt="hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac" data-align="center" data-entity-type="file" data-entity-uuid="41051301-56bd-4411-9eaa-f345e8e1d324" height="1564" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac_%20xoan%20oc.jpg" width="2501" /> <p>Hình khối dạng này có thể thể hiện sự hoàn hảo trong bố cục, đồng thời gợi cảm giác bí ẩn, sáng tạo, phát triển và thăng tiến. Với những hình khối này, trang web dễ dàng có cảm giác chuyển động, thu hút người xem hơn.</p> <h3>Ngôi sao</h3> <img alt="hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac" data-align="center" data-entity-type="file" data-entity-uuid="77594a8b-7a40-4366-8495-f0018ab375f7" height="1564" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac_ngoi%20sao_0.jpg" width="2501" /> <p>Đây là một yếu tố tự nhiên sử dụng để truyền tải nội dung liên quan đến tầm quan trọng và thành tích, liên kết ngôi sao với những giải thưởng và thành tựu&nbsp;doanh nghiệp đã đạt được.</p> <h3>Thiết kế Web với hình mũi tên</h3> <img alt="hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac" data-align="center" data-entity-type="file" data-entity-uuid="d2fcdafc-0d05-42b6-b5bc-9b84334aa229" height="1563" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac_hinh%20mui%20ten.jpg" width="2501" /> <p>Mũi tên hiệu quả với những nút chuyển hướng, giúp người xem theo dõi đường dẫn thông tin từ phần này sang phần khác qua đồ hoạ. Có nhiều kiểu dáng và thiết kế khác nhau, mũi tên&nbsp;đậm và chắc chắn thì truyền tải nhiều sức mạnh, còn mũi tên nguệch ngoạc thì đem lại không khí vui tươi, còn mũi tên đồng tâm có thể được sử dụng để biểu thị chu trình và quy trình.</p> <h3>Biểu tượng cảm xúc</h3> <img alt="hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac" data-align="center" data-entity-type="file" data-entity-uuid="6638ab98-0495-41e2-8bac-45de2bb67de8" height="1563" src="/sites/default/files/hinh-khoi-trong-thiet-ke-web-tam-ly-hoc-va-nhan-thuc-thi-giac_%20emoji.jpg" width="2501" /> <p>Những hình ảnh có kích thước bằng văn bản, truyền tải nhiều loại cảm xúc và khái niệm. Sử dụng emoji để tạo design layout web vui nhộn và thu hút thị trường trẻ hơn hay những khách hàng ưa giao tiếp nhanh gọn. Trang web sẽ bớt trang trọng và thoải mái hơn, tuy nhiên sử dụng emoji cũng nên áp dụng đúng ngữ cảnh. Nếu không, người dùng rất có thể sẽ rời bỏ trang web bất cứ lúc nào.</p> <h2>Kết</h2> <p>Nhận thức thị giác không chỉ là một đặc điểm của con người. Đó là một quá trình thay đổi diễn ra trong các cơ quan cảm giác của con người bị ảnh hưởng bởi các yếu tố vật lý của một đối tượng trực quan. Nếu biết cách thức hoạt động của nhận thức, chúng ta có thể tạo ra những thiết kế web mà người dùng sẽ yêu thích ngay từ cái nhìn đầu tiên.</p> <p><a href="https://beau.vn/vi/goc-nhin"><em><strong>Xem thêm các bài viết về Design và Web Design tại đây.</strong></em></a></p> </div> </div> </div> </div> </div> <div class="field field--name-field-other-articles field--type-entity-reference field--label-above"> <div class="field__items"> <a href="/vi/goc-nhin/thiet-ke-logo-mau-sac-noi-len-dieu-gi-ve-thuong-hieu-cua-ban" hreflang="vi">Thiết kế Logo: Màu sắc nói lên điều gì về Thương hiệu của bạn?</a> <a href="/vi/goc-nhin/11-nguyen-tac-thiet-ke-web-se-tang-ty-le-chuyen-doi-cua-ban" hreflang="vi">11 Nguyên tắc thiết kế web sẽ tăng tỷ lệ chuyển đổi của bạn </a> <a href="/vi/goc-nhin/danh-gia-mot-website-du-lich-dep-va-an-tuong" hreflang="vi">Đánh giá một Website du lịch đẹp và ấn tượng</a> <a href="/vi/goc-nhin/tuong-lai-cua-logo-no-da-chet-hay-se-con-song-mai" hreflang="vi">Tương lai của Logo: Nó đã chết hay sẽ còn sống mãi?</a> <a href="/vi/goc-nhin/nhung-nguyen-tac-gestalt-khai-thac-quy-luat-thi-giac-trong-thiet-ke-ui" hreflang="vi">Những nguyên tắc Gestalt - Khai thác quy luật thị giác trong thiết kế UI </a> <a href="/vi/goc-nhin/kiem-soat-thiet-ke-cua-ban-voi-goc-nhin-truc-z-trong-thiet-ke-phang" hreflang="vi">Kiểm soát thiết kế của bạn với góc nhìn trục Z trong thiết kế phẳng </a> </div> </div> <div class="field field--name-field-hidden-article field--type-boolean field--label-above"> Off </div> Tue, 08 Feb 2022 07:33:00 +0000 content 184 at https://beau.vn Xanh, Đỏ và Câu chuyện Ứng dụng màu sắc trong Thiết kế UI https://beau.vn/vi/xanh-do-va-cau-chuyen-ung-dung-mau-sac-trong-thiet-ke-ui <span class="field field--name-title field--type-string field--label-hidden">Xanh, Đỏ và Câu chuyện Ứng dụng màu sắc trong Thiết kế UI</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/vi/user/38" typeof="schema:Person" property="schema:name" datatype="">content</span></span> <span class="field field--name-created field--type-created field--label-hidden">T2, 01/10/2022 - 16:00</span> <a href="/vi/uxui-Trai-Nghiem-Nguoi-Dung-Giao-Dien-Nguoi-Dung-02" hreflang="vi">UX/UI</a> <a href="/vi/thiet-ke-ui" hreflang="vi">Thiết kế UI</a> <a href="/vi/mau-sac" hreflang="vi">màu sắc</a> <a href="/vi/thiet-ke-ux" hreflang="vi">Thiết kế UX</a> <a href="/vi/thiet-ke-web" hreflang="vi">Thiết kế Web</a> <a href="/vi/thiet-ke-do-hoa" hreflang="vi">Thiết kế đồ hoạ</a> <a href="/vi/graphic-design" hreflang="vi">Graphic Design</a> <a href="/vi/xu-huong-thiet-ke" hreflang="vi">Xu hướng thiết kế</a> <a href="/vi/uxui-Trai-Nghiem-Nguoi-Dung-Giao-Dien-Nguoi-Dung" hreflang="vi">UX/UI</a> <a href="/vi/giao-dien-nguoi-dung" hreflang="vi">Giao diện người dùng</a> <a href="/vi/trai-nghiem-so" hreflang="vi">Trải nghiệm số</a> <a href="/vi/trai-nghiem-nguoi-dung" hreflang="vi">trải nghiệm người dùng</a> <a href="/vi/trai-nghiem-thuong-hieu" hreflang="vi">Trải nghiệm thương hiệu</a> <div class="f-img" style="margin-bottom: 45px"> <img src="/sites/default/files/2022-01/xanh-do-va-cau-chuyen-ung-dung-mau-sac-trong-thiet-ke-ui-cover.jpg" alt="xanh-do-va-cau-chuyen-ung-dung-mau-sac-trong-thiet-ke-ui"> </div> <div class="desktop-space" style="height: 150px"></div> <div class="mobile-space" style="height: 50px"></div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <h2><p>Màu sắc có tác động đáng kể đến nhận thức và cảm xúc của chúng ta. Được sử dụng đúng cách, màu sắc có thể gợi nên phản ứng cụ thể đối với người xem, đặc biệt là trong lĩnh vực thiết kế UI (User Interface - Giao diện người dùng). Trong bài viết này, Beau sẽ kể về câu chuyện màu sắc trong thiết kế UI của 2 gam màu phổ biến nhất: Xanh và Đỏ.</p> <p>Đây là 2 gam màu vô cùng quan trọng với thiết kế giao diện người dùng vì 2 màu này đều tạo nên cảm giác hành động được. Vậy Ứng dụng màu sắc Xanh và Đỏ trong thiết kế UI như thế nào và 2 màu này có thể gợi lên hành động gì?</p> <p><a href="https://beau.vn/vi/goc-nhin/tam-ly-hoc-ve-mau-sac-va-ung-dung-trong-thiet-ke"><strong>Xem thêm</strong><em><strong>: Tâm lý học về Màu sắc và ứng dụng trong thiết kế</strong></em></a></p> </h2> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="f-text"> <h2><a href="https://beau.vn/vi/goc-nhin/tam-ly-hoc-ve-mau-sac-va-ung-dung-trong-thiet-ke">Ứng dụng Màu sắc</a>: Màu Đỏ trong thiết kế UI</h2> <p>3 gạch đầu dòng có thể khắc hoạ cảm giác về màu đỏ:</p> <ul> <li>Tầm quan trọng: Đây là một màu rất dễ nhìn, có thể thu hút sự chú ý ngay lập tức và khiến mọi người đưa ra quyết định nhanh chóng.</li> <li>Màu nóng: Khắc hoạ sự mãnh liệt chứa đầy cảm xúc, từ đam mê đến giận dữ.</li> <li>Cảnh báo nguy hiểm: &nbsp;Đèn đỏ nhấp nháy thường có nghĩa là nguy hiểm hoặc khẩn cấp.&nbsp;</li> </ul> <p>Vì thế, khi lựa chọn màu đỏ trong thiết kế UI, các designer thường khắc hoạ những hành động sau:&nbsp;</p> <p>&nbsp;</p> <h3>Màu đỏ trong <a href="https://beau.vn/vi/goc-nhin/tam-ly-hoc-ve-mau-sac-va-ung-dung-trong-thiet-ke">thiết kế UI</a> nói lên trạng thái lỗi</h3> <p>Màu đỏ thường liên quan đến một cảnh báo hoặc một điều quan trọng cần xem. Đó là lý do tại sao màu đỏ là màu đầu tiên xuất hiện trong tâm trí khi ta nghĩ về các trạng thái lỗi. Kết hợp với biểu tượng dấu X, màu đỏ mang đến thông báo rằng đã xảy ra sự cố trong nháy mắt.</p> <p>&nbsp;</p> <p><img alt="" data-entity-type="file" data-entity-uuid="0cc2e1ee-b0d9-43f5-8134-63658470d4d9" height="1876" src="/sites/default/files/2022-01/xanh-do-va-cau-chuyen-ung-dung-mau-sac-trong-thiet-ke-ui-1.jpg" width="2500" /></p> <p class="text-align-center"><em>Màu đỏ trong thiết kế UI nói lên trạng thái lỗi</em></p> <h3><span id="cke_bm_434S" style="display: none;">&nbsp;</span>Phản hồi có cảm xúc</h3> <p>Màu đỏ thường gắn liền với tình yêu và đam mê. Các designer trong lĩnh vực thiết kế UI thường sử dụng các gam màu đỏ khác nhau (như Berry Red) trong các phản ứng tương tác như bày tỏ cảm xúc Yêu thích.</p> <h3>Màu đỏ trong thiết kế UI là "xoá bỏ"</h3> <p>Trong lĩnh vực thương mại điện tử, màu đỏ thường xuất hiện trong giỏ hàng nếu người dùng muốn thực hiện hành động 'Xóa khỏi giỏ hàng'.</p> <p>&nbsp;</p> <p><img alt="" data-entity-type="file" data-entity-uuid="05f7dff2-31b6-499c-a25a-81d69bc8378c" height="1876" src="/sites/default/files/2022-01/xanh-do-va-cau-chuyen-ung-dung-mau-sac-trong-thiet-ke-ui-2.jpg" width="2500" /></p> <p class="text-align-center"><em>Xoá bỏ khỏi giỏ hàng</em></p> <h3><span id="cke_bm_1127S" style="display: none;">&nbsp;</span>Các hành động tiềm ẩn nguy cơ&nbsp;</h3> <p>Trong thiết kế UI, người ra thường kết hợp màu đỏ với các hành động nguy hiểm tiềm ẩn. Được sử dụng đúng cách, màu đỏ vô cùng hiệu quả trong việc ngăn người dùng tiếp tục trong các hành động nguy hiểm sau đó. Ví dụ như việc xoá file hay đóng tài khoản, designer thường thiết kế các button màu đỏ nổi bật để khuyến khích người dùng suy nghĩ thật kĩ trước khi đưa ra quyết định cuối cùng.&nbsp;<br /> &nbsp;</p> <p><img alt="" data-entity-type="file" data-entity-uuid="abc58518-410b-4823-ae37-cb4c88cd2006" height="1876" src="/sites/default/files/2022-01/xanh-do-va-cau-chuyen-ung-dung-mau-sac-trong-thiet-ke-ui-3.jpg" width="2500" /></p> <p class="text-align-center"><em>Các hành động tiềm ẩn nguy cơ</em></p> <h2>Ứng dụng màu sắc: Màu Xanh trong thiết kế UI</h2> <p>Màu Xanh lá có nhiều thuộc tính làm dịu như màu xanh lam, là một trong những màu sắc yên bình và thư giãn nhất đối với mắt người<br /> Là màu sắc biểu tượng cho sự sinh sôi, phát triển, cho sự khởi đầu mới.<br /> Trong một số trường hợp, màu xanh còn thường được sử dụng để biểu thị sự an toàn và thành công.</p> <p><strong>Xem thêm:&nbsp;<a href="https://beau.vn/vi/goc-nhin/nhung-nguyen-tac-gestalt-khai-thac-quy-luat-thi-giac-trong-thiet-ke-ui"><em>Những nguyên tắc Gestalt - Khai thác quy luật thị giác trong thiết kế UI</em></a></strong></p> <h3>Màu xanh lá trong thiết kế UI thể hiện trạng thái thành công</h3> <p>Màu xanh lá&nbsp;cây gắn kết với ý nghĩa về một kết quả tích cực, đã hoàn tất, một vài trường hợp là một file đã được lưu hoặc một đơn hàng trực tuyến đã được đặt. Màu xanh lá cũng thường đi kèm với biểu tượng dấu tick V để trấn an người dùng rằng thao tác đã được thực hiện thành công.<br /> &nbsp;</p> <p><img alt="" data-entity-type="file" data-entity-uuid="a321e76e-bf16-4994-a7b9-a297723cf075" height="1876" src="/sites/default/files/2022-01/xanh-do-va-cau-chuyen-ung-dung-mau-sac-trong-thiet-ke-ui-4.jpg" width="2500" /></p> <p class="text-align-center"><em>Màu xanh lá trong thiết kế UI thể hiện trạng thái thành công</em></p> <h3>Màu xanh trong ứng dụng màu sắc trong <a href="https://beau.vn/vi/uxui-Trai-Nghiem-Nguoi-Dung-Giao-Dien-Nguoi-Dung-02">thiết kế UI</a> nghĩa là ‘Khích lệ’</h3> <p>Nếu màu đỏ cảnh báo rằng người dùng nên dừng lại, màu xanh lại khuyến khích người dùng tiếp tục di chuyển tới các bước tiếp theo. Vì thế, trong một số trường hợp, màu xanh khích lệ người dùng tham gia hoặc ghi danh vào một số hoạt động.&nbsp;</p> <p><img alt="" data-entity-type="file" data-entity-uuid="9c19a325-dd87-493b-a90d-f950ee0b9bdf" height="1876" src="/sites/default/files/2022-01/xanh-do-va-cau-chuyen-ung-dung-mau-sac-trong-thiet-ke-ui-5.jpg" width="2500" /></p> <p class="text-align-center"><em>Màu xanh trong ứng dụng màu sắc trong thiết kế UI nghĩa là ‘Khích lệ’</em></p> <h2>Ứng dụng màu sắc và kết hợp 2 màu sắc Xanh và Đỏ trong thiết kế UI</h2> <p>Trong một số lệnh nhị phân như “Đồng ý” và “Từ chối” khi có cuộc gọi đến, đỏ và xanh được sử dụng để đơn giản hoá việc lựa chọn phù hợp. Màu đỏ cảnh báo người dùng về việc sắp bỏ lỡ một cuộc gọi, màu xanh lại thông báo rằng người dùng sắp phải tiếp tục cuộc gọi đó. Điều này đồng nghĩa với việc người dùng dành ít thời gian hơn để xử lý lựa chọn này.</p> <p><img alt="" data-entity-type="file" data-entity-uuid="9e8c8fe2-f6b6-4302-b7e8-4e12a0376009" height="1876" src="/sites/default/files/2022-01/xanh-do-va-cau-chuyen-ung-dung-mau-sac-trong-thiet-ke-ui-6.jpg" width="2500" /></p> <p class="text-align-center"><em>Ứng dụng màu sắc và kết hợp 2 màu sắc Xanh và Đỏ trong thiết kế UI</em></p> <p>Lưu ý, việc kết hợp 2 màu sắc này trong ứng dụng màu sắc trong thiết kế UI chỉ hoạt động hiệu quả khi cả 2 lựa chọn đều quan trọng như nhau với người dùng. Nếu designer hy vọng người dùng lựa chọn một hành động cụ thể, hãy đặt trọng lượng lớn hơn vào một tuỳ chọn nhất định.</p> <h2>Ứng dụng màu sắc trong thiết kế UI với việc tăng tỉ lệ chuyển đổi: Màu nào làm tốt hơn?</h2> <p>“Đỏ hay Xanh”, màu nào chuyển đổi tốt hơn luôn là một cuộc tranh luận kéo dài trong cộng đồng thiết kế UI/UX. Không thể dựa vào bất kì kết quả của cuộc nghiên cứu nào, vì lựa chọn màu sắc cho các button vừa phải nổi bật, vừa phải hài hoà với bối cảnh giao diện hiển thị xung quanh.&nbsp;</p> <p><img alt="" data-entity-type="file" data-entity-uuid="d271e139-b322-475b-8d16-255f121859ae" height="1876" src="/sites/default/files/2022-01/xanh-do-va-cau-chuyen-ung-dung-mau-sac-trong-thiet-ke-ui-7.jpg" width="2500" /></p> <p class="text-align-center"><em>Ứng dụng màu sắc trong thiết kế UI với việc tăng tỉ lệ chuyển đổi: Màu nào làm tốt hơn?</em></p> <p><span id="cke_bm_3091S" style="display: none;">&nbsp;</span>Cuộc tranh luận “Đỏ và Xanh” luôn là một cuộc chiến không cân sức của những chuyên gia làm giao diện. Có rất nhiều case study để nhìn vào và rút kinh nghiệm, tiêu biểu là nghiên cứu của Joshua Porter cho Hubspot tại đây, cho thấy rằng, màu đỏ đã đánh bại tỉ lệ chuyển đổi của màu xanh với chênh lệch lên tới 21%.&nbsp;</p> <p><strong>Xem thêm:&nbsp;<em><a href="https://beau.vn/vi/goc-nhin/tan-dung-cac-mo-hinh-nhan-thuc-vao-san-pham-thiet-ke-p1">Tận Dụng Các Mô Hình Nhận Thức Vào Sản Phẩm Thiết Kế p1</a> ;&nbsp;<a href="https://beau.vn/vi/goc-nhin/tan-dung-cac-mo-hinh-nhan-thuc-vao-thiet-ke-san-pham-p2">Tận Dụng Các Mô Hình Nhận Thức Vào Thiết Kế Sản Phẩm p2</a></em></strong><br /> &nbsp;</p> <p><img alt="" data-entity-type="file" data-entity-uuid="a6122921-d3b2-49bb-b12b-759e207ea350" height="1876" src="/sites/default/files/2022-01/xanh-do-va-cau-chuyen-ung-dung-mau-sac-trong-thiet-ke-ui-8.jpg" width="2500" /></p> <p>&nbsp;</p> <p>Bên cạnh đó, có 2 điều cần lưu ý khi lựa chọn màu sắc cho các thông điệp kêu gọi hành động (CTA - Call to Action):&nbsp;</p> <ul> <li>CTA trên landing page rất nên bắt mắt và được thiết kế có độ tương phản cao so với những vật thể xung quanh và màu nền.</li> <li>Tất cả màu sắc và ngữ cảnh xuất hiện trên website đều quan trọng và cần cân nhắc kĩ càng.&nbsp;</li> </ul> <p>Đôi khi, không cần quá cố chấp lựa chọn đỏ và xanh để biểu đạt những ý nghĩa trên. Tuỳ vào màu sắc chủ đạo của trang web, luôn có thể chọn những màu sắc khác, không có kết quả nào là mãi mãi và đúng với mọi trường hợp của các website khác nhau. Màu sắc có thể hợp lý với một số website nhất định, chưa chắc đã hợp lý với các website khác.<br /> &nbsp;</p> <p>Mời các bạn xem thêm các bài viết thú vị về UX/UI tại <a href="https://beau.vn/vi/uxui-Trai-Nghiem-Nguoi-Dung-Giao-Dien-Nguoi-Dung-02"><em><strong>đây.</strong></em></a></p> </div> </div> </div> </div> </div> <div class="field field--name-field-other-articles field--type-entity-reference field--label-above"> <div class="field__items"> <a href="/vi/goc-nhin/ky-nguyen-so-khi-trai-nghiem-ux-lam-nen-thuong-hieu" hreflang="vi">Kỷ nguyên Số: Khi trải nghiệm UX làm nên thương hiệu</a> <a href="/vi/goc-nhin/thiet-ke-logo-mau-sac-noi-len-dieu-gi-ve-thuong-hieu-cua-ban" hreflang="vi">Thiết kế Logo: Màu sắc nói lên điều gì về Thương hiệu của bạn?</a> <a href="/vi/goc-nhin/10-nguyen-tac-cot-loi-de-co-mot-thiet-ke-website-tot" hreflang="vi">10 nguyên tắc cốt lõi để có một thiết kế Website tốt</a> </div> </div> <div class="field field--name-field-hidden-article field--type-boolean field--label-above"> Off </div> Mon, 10 Jan 2022 09:00:14 +0000 content 176 at https://beau.vn Series: Typography trong quy trình xây dựng trải nghiệm số #3: Ứng dụng trong thiết kế website/App https://beau.vn/vi/goc-nhin/series-typography-trong-quy-trinh-xay-dung-trai-nghiem-so-3-ung-dung-trong-thiet-ke <span class="field field--name-title field--type-string field--label-hidden">Series: Typography trong quy trình xây dựng trải nghiệm số #3: Ứng dụng trong thiết kế website/App</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/vi/user/1" typeof="schema:Person" property="schema:name" datatype="">Neo</span></span> <span class="field field--name-created field--type-created field--label-hidden">T3, 08/31/2021 - 23:54</span> <a href="/vi/uxui-Trai-Nghiem-Nguoi-Dung-Giao-Dien-Nguoi-Dung-02" hreflang="vi">UX/UI</a> <a href="/vi/typography" hreflang="vi">Typography</a> <a href="/vi/thiet-ke-website" hreflang="vi">Thiết kế Website</a> <a href="/vi/xu-huong-thiet-ke" hreflang="vi">Xu hướng thiết kế</a> <a href="/vi/uxui-Trai-Nghiem-Nguoi-Dung-Giao-Dien-Nguoi-Dung" hreflang="vi">UX/UI</a> <a href="/vi/giao-dien-nguoi-dung" hreflang="vi">Giao diện người dùng</a> <a href="/vi/trai-nghiem-so" hreflang="vi">Trải nghiệm số</a> <a href="/vi/trai-nghiem-nguoi-dung" hreflang="vi">trải nghiệm người dùng</a> <a href="/vi/digital" hreflang="vi">digital</a> <div class="f-img" style="margin-bottom: 45px"> <img src="/sites/default/files/2021-09/lua_chon_font_chu_1920x650_v2-01.jpg" alt="Series: Typography trong quy trình xây dựng trải nghiệm số #3: Ứng dụng trong thiết kế website/App"> </div> <div class="desktop-space" style="height: 100px"></div> <div class="mobile-space" style="height: 50px"></div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <h2><p>Chúng ta đã đi qua hai bài viết đầu tiên của series Typography thời đại số. Sau khi hiểu được cách lựa chọn typeface và kết hợp typeface, việc tiếp theo cần làm là ứng dụng kết quả này vào công việc thiết kế. Hãy cùng chúng tôi tìm hiểu trong bài viết này nhé!</p> </h2> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="f-text"> <hr /> <p><strong>Xem thêm:&nbsp;<em><a href="https://beau.vn/vi/goc-nhin/series-typography-trong-quy-trinh-xay-dung-trai-nghiem-so-2-ket-hop-typeface">Series: Typography trong quy trình xây dựng trải nghiệm số #2 Kết hợp typeface</a></em></strong></p> <p><a href="https://beau.vn/vi/goc-nhin/series-typography-trong-quy-trinh-xay-dung-trai-nghiem-so-1-lua-chon-font-chu"><em><strong>Series: Typography trong quy trình xây dựng trải nghiệm số #1: Lựa chọn font chữ</strong></em></a><br /> &nbsp;</p> <h2>Cách mắt chúng ta đọc</h2> <p>Không đơn thuần là tối ưu tốc độ đọc hay truyền tải nội dung, công việc design và xử lí typography của chúng ta còn góp phần thu hút người xem vào đoạn text và khiến trải nghiệm đọc thoải mái hơn. Để làm được điều này, yêu cầu bắt buộc là hiểu được cách con người “đọc” như thế nào.<br /> <br /> Đọc không phải là một hành động tuyến tính. Thay vào đó user sẽ đảo mắt một lượt trên tổng thể nội dung họ nhìn thấy, từ section này đến section khác, từ dòng này đến dòng khác. Cùng lúc đó, não bộ sẽ tiến hành quét và đánh giá những nội dung mắt thu thập được xem có khớp với mục tiêu tìm kiếm hay không. Trên thực tế, khi quan sát thiết kế, mắt ta sẽ dễ bắt vào những dòng heading và những cụm text nổi bật, cả về kích cỡ hay màu sắc. Và điểm dừng sẽ là nội dung mà họ cảm thấy hứng thú, hoặc đúng với mục đích tìm kiếm từ đầu. Khi đọc từng dòng nhỏ, những gì mắt thu được đẩy sang cho não bộ xử lí sẽ tạo ra các luồng thông tin nối tiếp nhau, và theo nghiên cứu, dòng thông tin này không hề liên tục, bởi mắt ta chỉ có thể nhìn từng cụm nhỏ rồi chuyển sang cụm tiếp theo. Khi nhìn vào 1 khu vực nhỏ như vậy, mọi thứ xung quanh nó sẽ bị mờ đi, và theo như nghiên cứu, mắt người bình thường sẽ chỉ thu nhận rõ nét được khoảng 4 – 5 kí tự, tuy nhiên tốc độ quét của con người vẫn rất nhanh vì não bộ ta thông qua hình ảnh thu được, bao gồm các kí tự rõ nét và những kí tự mờ mờ chung quanh, kết hợp với hình ảnh rõ nét tiếp theo nhận được được trong quá trình quét, sẽ đoán ra nội dung còn lại.<br /> *minh họa: Dòng chữ chỉ rõ nét ở khu vực mắt người nhìn vào, xung quanh sẽ bị mờ<br /> &nbsp;</p> <p><img alt="" data-entity-type="file" data-entity-uuid="9e6dee32-fc65-4af0-8a74-3b86da389ede" height="1080" src="/sites/default/files/2021-08/1.jpg" width="1920" /></p> <p>Khi đảo mắt qua từng dòng, mắt ta thỉnh thoảng sẽ cần dừng lại trong khoảnh khắc để nhìn rõ nội dung trước mắt, và nhảy đến đoạn tiếp theo, không quá chú trọng vào khoảng cách giữa các chữ trong 1 từ và khoảng cách giữa các từ trong 1 câu (vì vậy chọn typeface sao cho việc đọc trơn tru là vô cùng quan trọng).<br /> &nbsp;</p> <p><img alt="" data-entity-type="file" data-entity-uuid="d84bb051-42fd-44a7-b34e-85f5d242d437" height="1080" src="/sites/default/files/2021-08/2_0.jpg" width="1920" /></p> <hr /> <h2>Cách màn hình render chữ</h2> <p>Ngày nay, có rất nhiều người tỏ ra khó chịu khi phải đọc sách điện tử thay vì sách giấy. Họ luôn cảm thấy mắt bị mỏi và không thoải mái khi đọc trên màn hình. Cũng dễ hiểu thôi, vì theo kiến thức về Vật lí, màn hình là nguồn sáng, tự nó phát ra những chùm tia sáng đi vào mắt ta, còn sách giấy là vật sáng, ta chỉ nhìn thấy ánh sáng được phản xạ từ nó. Chính vì là nguồn sáng, nên tùy vào chất lượng của màn hình mà mắt ta sẽ có những trải nghiệm khác nhau, từ tấm nền, độ phân giải, khả năng hiển thị màu sắc,… đều có ảnh hưởng nhất định tới trải nghiệm của người xem.</p> <p>Những yếu tố kể trên buộc các designer phải quan tâm sâu sắc tới việc typography mình thiết kế ra sẽ hiển thị như thế nào trên màn hình. Người đọc sẽ quét tổng thể những thứ được render trên màn hình rất nhanh và dừng lại ở chi tiết nhỏ họ quan tâm. Vì vậy, bên cạnh việc thiết kế, chúng ta cũng cần nắm được cách con chữ hiển thị thế nào trên màn hình để từ đó giảm thiểu tối đa cản trở trải nghiệm đọc của end-user.<br /> <br /> Chúng ta cần biết là typeface được thiết kế ra và lưu trữ dưới dạng vector. Tuy nhiên khi đưa ra màn hình để chúng ta có thể nhìn thấy thì nó sẽ được render về dạng raster, là kiểu hiển thị phụ thuộc rất nhiều vào độ phân giải màn hình, mà cụ thể là số lượng điểm ảnh: màn hình độ phân giải càng cao, càng nhiều điểm ảnh thì con chữ render ra càng sắc nét và ngược lại. Và dù thế nào đi chăng nữa, chuyển từ vector sang raster đồng nghĩa với việc suy giảm chất lượng hình ảnh.</p> <p>Bên cạnh đó, mỗi màn hình, mỗi hệ điều hành sẽ có cách render khác nhau, và ta buộc phải chấp nhận rằng cùng 1 file nhưng nhiều khi trên màn hình của mình thấy rất nét mà màn hình của khách hàng lại thấy chữ nghĩa “vỡ vỡ”. Để giảm thiểu điều này, người ta có thường sử dụng anti-aliasing và hinting để kí tự được render rõ ràng hơn.<br /> <br /> <strong>Anti-aliasing</strong><br /> Khi sắp đặt các pixel vào khu vực mà con chữ chiếm chỗ trên màn hình, sẽ có những khu vực mà pixel bị trồi sụt &nbsp;so với outline của kí tự-những đường cong cắt qua các ô vuông pixel trên màn hình. Điều này dẫn tới việc con chữ khi render ra sẽ xuất hiện viền răng cưa. Khi sử dụng anti-aliasing, tạm hiểu là khử viền răng cưa, người ta sẽ biến những pixel không nằm trong outline thành màu xám, còn pixel nằm hoàn toàn trong outline sẽ là màu đen. Với cách này, viền răng cưa sẽ bị mờ đi hòa vào trong nền và những gì chúng ta có thể thấy được là con chữ được làm mượt hơn rất nhiều ở khu vực đường bao viền, từ đó end-user sẽ bớt khó chịu thay vì phải nhìn vào sự “gai mắt” như trước.<br /> &nbsp;</p> <p><img alt="" data-entity-type="file" data-entity-uuid="e3da2c5f-b552-43eb-8b9c-cf972bb5c684" height="1080" src="/sites/default/files/2021-08/3.jpg" width="1920" /></p> <p><strong>Hinting</strong><br /> Như đã nói ở trên, độ phân giải màn hình có ảnh hưởng rất lớn đến việc chữ được render ra như thế nào. Độ phân giải càng thấp, càng có ít điểm ảnh để biểu diễn kí tự. Để bù lại sự thiếu hụt này, các type designer đã cố gắng “tạo hình” lại các đường bao outline kí tự, và quá trình này được gọi là hinting – “nắn” lại outline kí tự thành kiểu pixelated letter khiến chúng dễ đọc hơn trên màn hình độ phân giải thấp.</p> <p><img alt="" data-entity-type="file" data-entity-uuid="6915a268-1132-4757-9a19-ff9725b7c184" height="1080" src="/sites/default/files/2021-08/4.jpg" width="1920" /><br /> &nbsp;</p> <p><a href="https://beau.vn/vi/goc-nhin/he-thong-luoi-trong-thiet-ke-website-tu-nguyen-ly-den-thuc-tien"><em><strong>=&gt;&nbsp;Hệ thống lưới trong thiết kế website - Từ nguyên lý đến thực tiễn</strong></em></a></p> <hr /> <h2>Cách tạo ra phân cấp typography trong web design</h2> <p>Chúng ta đã hiểu được cơ chế đọc của con người. Vận dụng điều đó vào trong thiết kế sẽ giúp thông tin được phân cấp một cách trực quan hơn, đồng thời giúp người đọc có thể quét nội dung nhanh hơn. Ở 2 bài viết trước, chúng tôi đã đưa ra những gợi ý để các bạn Lựa chọn typeface và Kết hợp typeface. Khi có được cặp typeface ưng ý rồi, chúng ta sẽ tiến hành tạo ra các cấp chữ từ 2 typeface đó để sử dụng trong thiết kế, và cách làm này vẫn có thể áp dụng tương tự khi chỉ dùng duy nhất 1 typeface trên toàn bộ site.</p> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="img-slide-detail"> <img src="/sites/default/files/2021-09/5_1.jpg" alt=""> <img src="/sites/default/files/2021-09/5_2.jpg" alt=""> <img src="/sites/default/files/2021-09/5_3.jpg" alt=""> <img src="/sites/default/files/2021-09/5_4.jpg" alt=""> <img src="/sites/default/files/2021-09/5_5.jpg" alt=""> <img src="/sites/default/files/2021-09/5_6.jpg" alt=""> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="f-text"> <p><strong>Lời kết</strong><br /> Vậy là chúng ta đã đi cùng nhau qua series Typography thời đại số. Chúng tôi hi vọng chuỗi bài này sẽ trở thành cuốn cẩm nang cho các designer trong quá trình làm việc với typography nói chung và lựa chọn, xử lí typeface nói riêng. Hẹn gặp lại các bạn trong những bài viết tiếp theo!</p> </div> </div> </div> </div> </div> <div class="field field--name-field-other-articles field--type-entity-reference field--label-above"> <div class="field__items"> <a href="/vi/goc-nhin/nhung-nguyen-tac-gestalt-khai-thac-quy-luat-thi-giac-trong-thiet-ke-ui" hreflang="vi">Những nguyên tắc Gestalt - Khai thác quy luật thị giác trong thiết kế UI </a> <a href="/vi/goc-nhin/creative-agency-model-kham-pha-cac-mo-hinh-agency-sang-tao-moi" hreflang="vi">Creative Agency Model - Khám phá các mô hình Agency sáng tạo mới</a> <a href="/vi/goc-nhin/so-luoc-ve-thuong-mai-dien-tu-va-nhung-mo-hinh-kinh-doanh-ky-nguyen-so" hreflang="vi">Sơ lược về Thương mại điện tử và những mô hình kinh doanh kỷ nguyên số</a> <a href="/vi/goc-nhin/tai-sao-website-quan-trong-voi-doanh-nghiep" hreflang="vi">Tại sao Website quan trọng với doanh nghiệp? </a> <a href="/vi/goc-nhin/xay-dung-chien-luoc-website-tap-doan-nham-dat-duoc-muc-tieu-trong-ngan-va-dai-han" hreflang="vi">Xây dựng chiến lược website tập đoàn nhằm đạt được mục tiêu trong ngắn và dài hạn</a> <a href="/vi/goc-nhin/kiem-soat-thiet-ke-cua-ban-voi-goc-nhin-truc-z-trong-thiet-ke-phang" hreflang="vi">Kiểm soát thiết kế của bạn với góc nhìn trục Z trong thiết kế phẳng </a> <a href="/vi/goc-nhin/he-thong-luoi-trong-thiet-ke-website-tu-nguyen-ly-den-thuc-tien" hreflang="vi">Hệ thống lưới trong thiết kế website - Từ nguyên lý đến thực tiễn</a> <a href="/vi/goc-nhin/series-typography-trong-quy-trinh-xay-dung-trai-nghiem-so-1-lua-chon-font-chu" hreflang="vi">Series: Typography trong quy trình xây dựng trải nghiệm số #1: Lựa chọn font chữ</a> <a href="/vi/goc-nhin/series-typography-trong-quy-trinh-xay-dung-trai-nghiem-so-2-ket-hop-typeface" hreflang="vi">Series: Typography trong quy trình xây dựng trải nghiệm số #2 Kết hợp typeface</a> </div> </div> <div class="field field--name-field-hidden-article field--type-boolean field--label-above"> Off </div> Tue, 31 Aug 2021 16:54:41 +0000 Neo 166 at https://beau.vn Xu Hướng Thiết Kế Website 2018 - 2020 https://beau.vn/vi/goc-nhin/xu-huong-thiet-ke-website-2018-2020 <span class="field field--name-title field--type-string field--label-hidden">Xu Hướng Thiết Kế Website 2018 - 2020</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/vi/user/6" typeof="schema:Person" property="schema:name" datatype="">hapham</span></span> <span class="field field--name-created field--type-created field--label-hidden">T7, 12/23/2017 - 09:59</span> <a href="/vi/cam-hung-thiet-ke-sang-tao" hreflang="vi">Cảm hứng thiết kế sáng tạo</a> <div class="container"> <div class="row"> <div class="col-lg-8 col-xs-offset-0 col-sm-offset-0 col-md-offset-0 col-lg-offset-2 "> <h3><strong>01 <a href="https://beau.vn/">Minimal</a> – trường phái tối giản</strong></h3> <p>Xu hướng này vẫn đang được duy trì mang tính đương đại, loại bỏ các chi tiết thừa như khối, viền và một số thông tin cấp 2 sẽ được chuyển vào bước 2 như hover, popup hoặc detail. Màu sắc đơn giản hoá dùng đơn sắc tương phản sắc độ. Thành phần giờ còn lại typo, image chủ đạo và các khoảng thoáng.</p> <p><a href="http://divenamicone.enjoy-aiia.com/"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04170454/awwwards-sotd-Divenamic-1-1024x524.jpg" width="" /></a></p> <p>Project:<strong><a href="http://divenamicone.enjoy-aiia.com/">Divenamic</a></strong><br /> by Vintage from Ukraine</p> <p><a href="https://www.awwwards.com/sites/marc-goncalves"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04170512/marc-goncalves-1-1024x556.jpg" width="" /></a></p> <p>Project: <a href="https://www.awwwards.com/sites/marc-goncalves">Marc Gonçalves</a><br /> by Marc Gonçalves from France</p> <p><a href="https://201d.jp/"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04170436/201-brand-2-1024x556.jpg" width="" /></a></p> <p>Project: <a href="https://201d.jp/">201˚ BRAND SITE</a><br /> by SHIFTBRAIN Inc.from Japan</p> <h3><strong>02 Hình minh hoạ</strong></h3> <p>Sau hình ảnh, video giờ đây chất liệu illustrator được tận dụng để truyền tải nội dung một cách trực quan đơn giản. Tuy nhiên, illustrator giúp tiết kiệm chi phí sản xuất cũng như khả năng lồng ghép ý đồ vào thiết kế.</p> <p><a href="http://ruya.ae/"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04183719/ruya-1-1024x556.jpg" width="" /></a></p> <p>Project: <a href="http://ruya.ae/">Ruya profile</a><br /> Design by RUYA</p> <p><a href="https://hellobloom.io/"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04183700/bloom-2-1024x556.jpg" width="" /></a></p> <p>Project: <a href="https://hellobloom.io/">Bloom </a><br /> Design by Griflan</p> <p><a href="http://hleb-dom.ru/en/"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04183623/awwwards-sotd-House-At-Khlebny-1-1024x595.jpg" width="" /></a></p> <p>Project: <a href="http://hleb-dom.ru/en/">House At Khlebny</a><br /> by Vide Infra from Latvia</p> <h3><strong>03 Landing page</strong></h3> <p>Cấu trúc nội dung web dần thay đổi, mô hình cũ với layout có cấu trúc nhất quán nhường đất cho mô hình phi cấu trúc. Nó giúp hiển thị nội dung linh hoạt hơN đến từng tập người dùng đồng thời tăng tỷ lệ chuyển đổi trong chiến lược digital marketing.</p> <p><a href="https://dribbble.com/shots/3811546-Caykur-Redesign-Landing-Page/attachments/860966"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04194046/Screen-Shot-2017-12-04-at-7.40.07-PM-1024x687.png" width="" /></a></p> <p>Project: <a href="https://dribbble.com/shots/3811546-Caykur-Redesign-Landing-Page/attachments/860966">Caykur – Redesign Landing Page</a><br /> by Alper Tornaci on Sep 16, 2017</p> <p><a href="https://www.ge.com/digitalvolcano/"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04192352/A-Digital-Volcano-1-1024x556.jpg" width="" /></a></p> <p>Project: <a href="https://www.ge.com/digitalvolcano/">A Digital Volcano</a><br /> by Gin Lane from U.S.A.</p> <p><a href="http://psikontacto.com/"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04192412/psikontacto-1024x606.png" width="" /></a></p> <p>Project: <a href="http://psikontacto.com/">Psikontacto</a><br /> by Bürocratik from Portugal</p> <h3><strong>04 Bố cục tự do</strong></h3> <p>Creative và impressive  là cảm nhận đầu tiên với loại website này tuy nhiên tính ứng dụng không cao vì rất khó thể hiện cũng như kén người xem. Ở một số lĩnh vực như lifestyle và entertainment thì nó là sự lựa chọn mới lạ của designer.</p> <p><a href="https://music.airfrance.com/en"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04194318/air-france-music-1-1024x556.jpg" width="" /></a><a href="https://music.airfrance.com/en"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04194336/air-france-music-2-1024x556.jpg" width="" /></a></p> <p>Project: <a href="https://music.airfrance.com/en">Air France Music</a><br /> by BETC Digital Studio from France</p> <p><a href="http://www.igkhair.com/"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04194354/igk-website-1024x591.jpg" width="" /></a></p> <p>Project: <a href="http://www.igkhair.com/">IGK</a><br /> by Domani Studios from U.S.A.</p> <h3><strong>05 Video story</strong></h3> <p>Cùng với xu hướng truyển thông và marketing bằng video, việc ứng dụng chất liêu này vào thiết kế web là trào lưu tất yếu. đặc tính là khả năng truyển tải thông điệp rõ ràng lôi cuốn và thực sự ấn tượng.</p> <p><a href="https://aghost.store/"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04211856/awwwards-a-ghost-1-1024x556.jpg" width="" /></a></p> <p>Project: <a href="https://aghost.store/">A Ghost Store</a><br /> by Watson/DG from U.S.A.</p> <p><a href="https://www.evert45.com/"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04211920/awwwards-Evert_45-1-1024x556.jpg" width="" /></a></p> <p>Project: <a href="https://www.evert45.com/">Evert_45 blogs from the past</a><br /> by Superhero Cheesecake from Netherlands</p> <p><a href="http://endover.ee/voltaloftid/en/"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04211948/endover.ee_-1024x563.png" width="" /></a></p> <p>Project: <a href="http://endover.ee/voltaloftid/en/">Volta Lofts</a><br /> by LOOVVOOL (Hong Kong – Macau)</p> <h3><strong>06 Fullframe thiết kế tràn khung</strong></h3> <p>Fullframe dạng thiết kế đã có từ rất lâu ngay từ khi web flash thịnh hành. Nhưng giờ đây với những công nghệ như CSS3, HTML5, JS đã giúp cho loại thiết kế này sự linh hoạt hơn trong trải nghiệm người dùng. Xu hướng thiết kế này tận dụng tối đa sự vào ra nội dung trên khung hình</p> <p><a href="http://hannahpurmort.com/"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04213042/awwwards-sotd-Hannah-Purmort-0-1024x525.jpg" width="" /></a><a href="http://hannahpurmort.com/"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04213120/awwwards-sotd-Hannah-Purmort-1024x524.jpg" width="" /></a><a href="http://hannahpurmort.com/"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04213101/awwwards-sotd-Hannah-Purmort-3-1-1024x524.jpg" width="" /></a></p> <p>Project: <a href="http://hannahpurmort.com/">Hannah Purmort</a><br /> by Grave from U.S.A.</p> <p><a href="https://fauteuils.operadeparis.fr/"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04213321/awwwards-opera-paris-1-1024x556.jpg" width="" /></a></p> <p>Project: <a href="https://fauteuils.operadeparis.fr/">Fauteuils de l’Opéra de Paris</a><br /> by Rezo Zero from France</p> <h3><strong>07 Gradient</strong></h3> <p>Toàn nhưng thứ xưa như trái đất tuy nhiên nó đã quay trở lại âm thầm lặng lẽ ở một số chi tiết như background, buttom … trường phái tối giản đã làm cho mọi thứ mất dần cảm xúc thì tiếp đây chắc sẽ là những ngày mùa của màu sắc</p> <p><a href="https://dribbble.com/shots/2719343-magic-co-landing-page-concept/attachments/550387"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04215631/Screen-Shot-2017-12-04-at-9.55.51-PM-1024x643.png" width="" /></a></p> <p>Project: <a href="https://dribbble.com/shots/2719343-magic-co-landing-page-concept/attachments/550387">magic.co landing page concept</a><br /> by Ludmila Shevchenko</p> <p><a href="https://dribbble.com/shots/3824068-Hair-salon-landing-page/attachments/864915"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04214111/Hair-salon-lan-1024x579.png" width="" /></a></p> <p>Project: <a href="https://dribbble.com/shots/3824068-Hair-salon-landing-page/attachments/864915">Hair salon landing page</a><br /> by Divan Raj</p> <p><a href="https://www.engine.xyz/"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04214842/The-Engine-1-1024x556.jpg" width="" /></a></p> <p>Project: <a href="https://www.engine.xyz/">The Engine</a><br /> by Upstatement from U.S.A.</p> <h3><strong>08 Humanist Typeface</strong></h3> <p>Loại typeface này dần được lựa chọn nhiều hơn vì cảm giác thân thuộc mà nó mang lại. Tương tự như nét chữ chúng ta viết. Có lẽ những thứ khô khan đang bắt đầu nhường chỗ cho thiết kế nhân bản. Con người đang có gắng tìm lại mình trong dòng chảy công nghệ.</p> <p><a href="https://www.futurelibrary.no/"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04220859/awwwards-sotd-future-library-1-1024x595.jpg" width="" /></a><a href="https://www.futurelibrary.no/"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04220837/awwwards-future-library-2-1024x595.jpg" width="" /></a></p> <p>Project: <a href="https://www.futurelibrary.no/">Future Library 2014 — 2114</a><br /> by Hello Monday from U.S.A.</p> <p><a href="http://www.rsq.com/"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04220921/awwwards-sotd-RSQ-1-1024x558.jpg" width="" /></a><a href="http://www.rsq.com/"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04220941/awwwards-sotd-RSQ-2-1024x522.jpg" width="" /></a></p> <p>Project: <a href="http://www.rsq.com/">RSQ</a><br /> by RSQ from U.S.A.</p> <p><a href="https://www.pieromilano.it/"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04220958/Piero-Milano-1-1024x556.jpg" width="" /></a></p> <p>Project: <a href="https://www.pieromilano.it/">Piero Milano</a><br /> by AQuest from Italy</p> <h3><strong>09</strong><strong> Tăng tương phản font</strong></h3> <p>Trào lưu quá tay này có thể nhận ra ở một số UI bạn dùng hàng ngày đó là cách chơi typo ở ios11 . Title đậm hơn dày hơn và to hơn. thiết kế này giúp nhấn mạnh thông điệp ở từng frame, phù hợp khi bạn tối giản nội dung và quá nhiều khoảng trống</p> <p><a href="https://www.aristidebenoist.com/"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04222052/aristidebenoist-2-1024x556.jpg" width="" /></a></p> <p>Project: <a href="https://www.aristidebenoist.com/">Aristide Benoist – Portfolio</a><br /> by aristidebenoist from France</p> <p><a href="http://www.jennyjohannesson.com/"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04214051/awwwards-sotd-Jenny-Johannesson-1-1024x525.jpg" width="" /></a></p> <p>Project: <a href="http://www.jennyjohannesson.com/">Jenny Johannesson – Portfolio</a><br /> by Jenny Johannesson from U.S.A.</p> <p><a href="http://www.weareimpero.com/"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04222112/we-are-impero-agency-1024x556.jpg" width="" /></a></p> <p>Project: <a href="http://www.weareimpero.com/">Impero Website</a><br /> by Impero from United Kingdom</p> <h3><strong>10 SVG</strong></h3> <p>Là thành phần đồ hoạ được nhúng lên web. Thời điểm trước chỉ đơn giản là icon logo, hiện nay svg ứng dụng ở phần chia khối, bo hình, minh hoạ, background. với việc sử dụng svg chúng giúp hiển thị tốt trên các thiết bị, tạo ra đường nét mềm mại hơn, hỗ trợ tạo animation bắt mắt nhất.</p> <p><a href="https://insidethehead.co/"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04223215/inside-the-head-2-1-1024x556.jpg" width="" /></a></p> <p>Project: <a href="https://insidethehead.co/">Inside The Head</a><br /> by Sara Svensson from Sweden</p> <p><a href="https://dribbble.com/shots/3961041-E-commerce-shop-UI/attachments/904896"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04223238/store-1024x659.png" width="" /></a></p> <p>Project: <a href="https://dribbble.com/shots/3961041-E-commerce-shop-UI/attachments/904896">E-commerce shop UI</a><br /> by Giga Tamarashvili</p> <p><a href="http://helloheco.com/"><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04223320/awwwards-sotd-Heco-Partners-1-1024x602.jpg" width="" /></a></p> <p>Project: <a href="http://helloheco.com/">Heco Partners</a><br /> by Heco from U.S.A.</p> <h3><strong>Tổng kết</strong></h3> <p>Trên đây là một số dự đoán dòng dịch chuyển mạnh của xu hướng thiết kế <a href="https://beau.vn/">website</a>năm 2018. Với những ai từng tham gia lĩnh vực phát triển web đều có thể có cho mình một số nhận định cho năm tới. Tuy nhiên xu hướng chỉ là một trong những yếu tố để đưa sản phẩm dễ gần với khách hàng và người xem đúng thời điểm, còn tầng sâu của nó vẫn là tổng hòa của các yếu tố đúng như đúng định hướng, đúng khách hàng, đáng nhu cầu, đúng nội dung, đúng phong cách, đúng cảm nhận.</p> <p>Chúc anh chị em trong ngành kế thừa và tạo ra được những xu hướng mới của mới.</p> </div> </div> </div> <a href="/vi/creative" hreflang="vi">Creative</a> <a href="/vi/creative-agency" hreflang="vi">Creative Agency</a> <a href="/vi/design" hreflang="vi">Design</a> <a href="/vi/designer" hreflang="vi">Designer</a> <a href="/vi/fullframe" hreflang="vi">Fullframe</a> <a href="/vi/gradient" hreflang="vi">Gradient</a> <a href="/vi/hot-trend" hreflang="vi">Hot Trend</a> <a href="/vi/humanist-typeface" hreflang="vi">Humanist Typeface</a> <a href="/vi/landing-page" hreflang="vi">Landing page</a> <a href="/vi/minimal" hreflang="vi">Minimal</a> <a href="/vi/svg" hreflang="vi">SVG</a> <a href="/vi/thiet-ke" hreflang="vi">thiết kế</a> <a href="/vi/thiet-ke-web" hreflang="vi">Thiết kế Web</a> <a href="/vi/thiet-ke-website" hreflang="vi">Thiết kế Website</a> <a href="/vi/trend" hreflang="vi">trend</a> <a href="/vi/trending" hreflang="vi">Trending</a> <a href="/vi/xu-huong" hreflang="vi">xu hướng</a> <a href="/vi/xu-huong-thiet-ke" hreflang="vi">Xu hướng thiết kế</a> <div class="desktop-space" style="height: 150px"></div> <div class="mobile-space" style="height: 50px"></div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="f-text"> <p><em><strong>=&gt;&nbsp;<a href="https://beau.vn/vi/goc-nhin/tai-sao-website-quan-trong-voi-doanh-nghiep">Tại sao Website quan trọng với doanh nghiệp?</a></strong></em><br /> &nbsp;</p> <h2><strong>1.&nbsp;<a href="https://beau.vn/">Minimal</a>&nbsp;– trường phái tối giản</strong></h2> <p>Xu hướng này vẫn đang được duy trì và mang đầy tính đương đại, loại bỏ các chi tiết thừa như khối, viền và một số thông tin cấp 2 sẽ được chuyển vào bước 2 như hover, popup hoặc detail. Màu sắc đơn giản hoá, dùng màu đơn sắc với tương phản về sắc độ, sử dụng nhiều khoảng trắng với typo và hình ảnh làm chủ đạo.</p> <p><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04170454/awwwards-sotd-Divenamic-1-1024x524.jpg" width="" /></p> <p>Project:<strong><a href="http://divenamicone.enjoy-aiia.com/" target="_blank">Divenamic</a></strong><br /> by&nbsp;Vintage&nbsp;from Ukraine</p> <p>&nbsp;</p> <p><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04170512/marc-goncalves-1-1024x556.jpg" width="" /></p> <p>Project:&nbsp;<strong><a href="https://www.awwwards.com/sites/marc-goncalves" target="_blank">Marc Gonçalves</a></strong><br /> by&nbsp;Marc Gonçalves from France</p> <p>&nbsp;</p> <p><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04170436/201-brand-2-1024x556.jpg" width="" /></p> <p>Project:&nbsp;<strong><a href="https://201d.jp/" target="_blank">201˚ BRAND SITE</a></strong><br /> by&nbsp;SHIFTBRAIN Inc.from Japan</p> <p>&nbsp;</p> <h2><strong>2. Hình minh hoạ</strong></h2> <p>Sau hình ảnh và video, giờ đây chất liệu minh hoạ được tận dụng để truyền tải nội dung một cách thú vị nhưng vẫn đơn giản trực quan. Bên cạnh đó, hình minh hoạ cũng giúp tiết kiệm chi phí sản xuất, với khả năng chủ động để lồng ghép ý đồ vào thiết kế.</p> <p><strong>Xem thêm:&nbsp;<a href="https://beau.vn/vi/goc-nhin/lua-chon-hinh-anh-cho-website-doanh-nghiep"><em>Lựa Chọn Hình Ảnh Cho Website Doanh Nghiệp</em></a></strong></p> <p><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04183719/ruya-1-1024x556.jpg" width="" /></p> <p>Project:&nbsp;<strong><a href="http://ruya.ae/" target="_blank">Ruya profile</a></strong><br /> Design by RUYA</p> <p>&nbsp;</p> <p><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04183700/bloom-2-1024x556.jpg" width="" /></p> <p>Project:&nbsp;<strong><a href="https://hellobloom.io/" target="_blank">Bloom&nbsp;</a></strong><br /> Design by&nbsp;Griflan</p> <p>&nbsp;</p> <p><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04183623/awwwards-sotd-House-At-Khlebny-1-1024x595.jpg" width="" /></p> <p>Project:&nbsp;<strong><a href="http://hleb-dom.ru/en/" target="_blank">House At Khlebny</a></strong><br /> by Vide Infra from Latvia</p> <p>&nbsp;</p> <h2><strong>3. Landing page</strong></h2> <p>Giao diện web đang dần thay đổi, giao diện cũ với nội dung dày đặc, cấu trúc chặt chẽ nhường đất cho những giao diện phi cấu trúc, thoáng mắt. Nó giúp truyền tải nội dung trực quan hơn, linh hoạt và phù hợp với nhiều tập người dùng, tăng tỷ lệ chuyển đổi trong chiến lược digital marketing.</p> <p><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04194046/Screen-Shot-2017-12-04-at-7.40.07-PM-1024x687.png" width="" /></p> <p>Project:&nbsp;<strong><a href="https://dribbble.com/shots/3811546-Caykur-Redesign-Landing-Page/attachments/860966" target="_blank">Caykur – Redesign Landing Page</a></strong><br /> by Alper Tornaci on Sep 16, 2017</p> <p>&nbsp;</p> <p><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04192352/A-Digital-Volcano-1-1024x556.jpg" width="" /></p> <p>Project:&nbsp;<strong><a href="https://www.ge.com/digitalvolcano/" target="_blank">A Digital Volcano</a></strong><br /> by Gin Lane from U.S.A.</p> <p>&nbsp;</p> <p><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04192412/psikontacto-1024x606.png" width="" /></p> <p>Project:&nbsp;<strong><a href="http://psikontacto.com/" target="_blank">Psikontacto</a></strong><br /> by&nbsp;Bürocratik&nbsp;from Portugal</p> <p>&nbsp;</p> <h2><strong>4. Bố cục tự do</strong></h2> <p>Sáng tạo và ấn tượng là cảm nhận đầu tiên với loại website này. Tuy tính ứng dụng không cao nhưng với một số lĩnh vực như lifestyle và entertainment, nó sẽ là sự lựa chọn mới lạ, làm mới trải nghiệm người dùng.</p> <p><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04194318/air-france-music-1-1024x556.jpg" width="" /><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04194336/air-france-music-2-1024x556.jpg" width="" /></p> <p>Project:&nbsp;<strong><a href="https://music.airfrance.com/en" target="_blank">Air France Music</a></strong><br /> by BETC Digital Studio from France</p> <p>&nbsp;</p> <p><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04194354/igk-website-1024x591.jpg" width="" /></p> <p>Project:<strong>&nbsp;<a href="http://www.igkhair.com/" target="_blank">IGK</a></strong><br /> by&nbsp;Domani Studios&nbsp;from U.S.A.</p> <p>&nbsp;</p> <h2><strong>5. Video story</strong></h2> <p>Cùng với xu hướng truyển thông và marketing bằng video, việc ứng dụng chất liệu này vào thiết kế web là xu hướng tất yếu. Ưu điểm là khả năng truyển tải thông điệp rõ ràng, lôi cuốn, dễ dàng gây ấn tượng cho người dùng.</p> <p><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04211856/awwwards-a-ghost-1-1024x556.jpg" width="" /></p> <p>Project:&nbsp;<strong><a href="https://aghost.store/" target="_blank">A Ghost Store</a></strong><br /> by Watson/DG from U.S.A.</p> <p>&nbsp;</p> <p><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04211920/awwwards-Evert_45-1-1024x556.jpg" width="" /></p> <p>Project:&nbsp;<strong><a href="https://www.evert45.com/" target="_blank">Evert_45 blogs from the past</a></strong><br /> by Superhero Cheesecake from Netherlands</p> <p>&nbsp;</p> <p><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04211948/endover.ee_-1024x563.png" width="" /></p> <p>Project:&nbsp;<strong><a href="http://endover.ee/voltaloftid/en/" target="_blank">Volta Lofts</a></strong><br /> by&nbsp;LOOVVOOL&nbsp;(Hong Kong – Macau)</p> <p>&nbsp;</p> <h2><strong>6.&nbsp;Fullframe thiết kế tràn khung</strong></h2> <p>Fullframe dạng thiết kế đã có từ rất lâu ngay từ khi web flash thịnh hành, nhưng giờ đây với những công nghệ như CSS3, HTML5, JS đã giúp phong cách thiết kế này trở nên linh hoạt hơn, tận dụng tối đa sự ra vào nội dung trên khung hình, tạo ra những trải nghiệm thú vị.</p> <p><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04213042/awwwards-sotd-Hannah-Purmort-0-1024x525.jpg" width="" /><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04213120/awwwards-sotd-Hannah-Purmort-1024x524.jpg" width="" /><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04213101/awwwards-sotd-Hannah-Purmort-3-1-1024x524.jpg" width="" /></p> <p>Project:&nbsp;<strong><a href="http://hannahpurmort.com/" target="_blank">Hannah Purmort</a></strong><br /> by Grave from U.S.A.</p> <p>&nbsp;</p> <p><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04213321/awwwards-opera-paris-1-1024x556.jpg" width="" /></p> <p>Project:&nbsp;<strong><a href="https://fauteuils.operadeparis.fr/" target="_blank">Fauteuils de l’Opéra de Paris</a></strong><br /> by Rezo Zero from France</p> <p>&nbsp;</p> <h2><strong>7. Gradient</strong></h2> <p>Là thứ xưa như trái đất tuy nhiên nó đã quay trở lại âm thầm lặng lẽ, ứng dụng với một số chi tiết như background, buttom… trường phái tối giản đã làm cho mọi thứ mất dần cảm xúc thì tiếp đây, gradient chắc chắn sẽ làm website những ngày tới tràn đầy màu sắc.</p> <p><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04215631/Screen-Shot-2017-12-04-at-9.55.51-PM-1024x643.png" width="" /></p> <p>Project:&nbsp;<strong><a href="https://dribbble.com/shots/2719343-magic-co-landing-page-concept/attachments/550387" target="_blank">magic.co landing page concept</a></strong><br /> by&nbsp;Ludmila Shevchenko</p> <p>&nbsp;</p> <p><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04214111/Hair-salon-lan-1024x579.png" width="" /></p> <p>Project:&nbsp;<strong><a href="https://dribbble.com/shots/3824068-Hair-salon-landing-page/attachments/864915" target="_blank">Hair salon landing page</a></strong><br /> by&nbsp;Divan Raj</p> <p>&nbsp;</p> <p><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04214842/The-Engine-1-1024x556.jpg" width="" /></p> <p>Project:&nbsp;<strong><a href="https://www.engine.xyz/" target="_blank">The Engine</a></strong><br /> by Upstatement from U.S.A.</p> <p>&nbsp;</p> <h2><strong>8. Humanist Typeface</strong></h2> <p>Bởi mang lại cảm giác thân thuộc, có nét tương đồng với nét chữ viết, typeface Humanist đang dần được lựa chọn nhiều hơn. Có lẽ những thứ khô khan đang bắt đầu nhường chỗ cho thiết kế mang nét con người hơn, như cách con người đang cố gắng tìm lại mình trong dòng chảy công nghệ.</p> <p><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04220859/awwwards-sotd-future-library-1-1024x595.jpg" width="" /><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04220837/awwwards-future-library-2-1024x595.jpg" width="" /></p> <p>Project:&nbsp;<strong><a href="https://www.futurelibrary.no/" target="_blank">Future Library 2014 — 2114</a></strong><br /> by&nbsp;Hello Monday&nbsp;from U.S.A.</p> <p>&nbsp;</p> <p><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04220921/awwwards-sotd-RSQ-1-1024x558.jpg" width="" /><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04220941/awwwards-sotd-RSQ-2-1024x522.jpg" width="" /></p> <p>Project:&nbsp;<strong><a href="http://www.rsq.com/" target="_blank">RSQ</a></strong><br /> by&nbsp;RSQ&nbsp;from U.S.A.</p> <p>&nbsp;</p> <p><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04220958/Piero-Milano-1-1024x556.jpg" width="" /></p> <p>Project:&nbsp;<strong><a href="https://www.pieromilano.it/" target="_blank">Piero Milano</a></strong><br /> by AQuest from Italy</p> <p>&nbsp;</p> <h2><strong>09</strong><strong>&nbsp;Tăng tương phản font</strong></h2> <p>Trào lưu quá tay này có thể nhận ra ở một số UI bạn dùng hàng ngày, bởi đó là cách chơi typo ở iOs11. Title đậm hơn, dày hơn và to hơn. Thiết kế này giúp nhấn mạnh thông điệp ở từng frame, phù hợp khi bạn tối giản nội dung, có nhiều khoảng trống</p> <p><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04222052/aristidebenoist-2-1024x556.jpg" width="" /></p> <p>Project:&nbsp;<strong><a href="https://www.aristidebenoist.com/" target="_blank">Aristide Benoist – Portfolio</a></strong><br /> by aristidebenoist from France</p> <p>&nbsp;</p> <p><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04214051/awwwards-sotd-Jenny-Johannesson-1-1024x525.jpg" width="" /></p> <p>Project:&nbsp;<strong><a href="http://www.jennyjohannesson.com/" target="_blank">Jenny Johannesson – Portfolio</a></strong><br /> by Jenny Johannesson from U.S.A.</p> <p>&nbsp;</p> <p><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04222112/we-are-impero-agency-1024x556.jpg" width="" /></p> <p>Project:<strong>&nbsp;<a href="http://www.weareimpero.com/">Impero Website</a></strong><br /> by Impero from United Kingdom</p> <p>&nbsp;</p> <h2><strong>10. SVG</strong></h2> <p>Là thành phần đồ hoạ được nhúng lên web, thời điểm trước chỉ đơn giản là icon logo, hiện nay svg ứng dụng ở phần chia khối, bo hình, minh hoạ, background. Việc sử dụng svg giúp hiển thị tốt trên các thiết bị, tạo ra đường nét mềm mại hơn, hỗ trợ tạo animation bắt mắt.</p> <p><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04223215/inside-the-head-2-1-1024x556.jpg" width="" /></p> <p>Project:&nbsp;<strong><a href="https://insidethehead.co/" target="_blank">Inside The Head</a></strong><br /> by Sara Svensson from Sweden</p> <p>&nbsp;</p> <p><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04223238/store-1024x659.png" width="" /></p> <p>Project:&nbsp;<strong><a href="https://dribbble.com/shots/3961041-E-commerce-shop-UI/attachments/904896" target="_blank">E-commerce shop UI</a></strong><br /> by&nbsp;Giga Tamarashvili</p> <p>&nbsp;</p> <p><img alt="" height="" src="https://static.beautheme.com/beauvn/2017/12/04223320/awwwards-sotd-Heco-Partners-1-1024x602.jpg" width="" /></p> <p>Project:&nbsp;<strong><a href="http://helloheco.com/" target="_blank">Heco Partners</a></strong><br /> by Heco from U.S.A.</p> <p><em><strong>Xem thêm các bài viết về Chiến lược Marketing tại <a href="https://beau.vn/vi/chien-luoc-kinh-doanh?page=2">đây.</a></strong></em></p> <h3><strong>Tổng kết</strong></h3> <p>Trên đây là một số dự đoán dòng dịch chuyển mạnh của xu hướng thiết kế&nbsp;<a href="https://beau.vn/">website</a>&nbsp;năm 2018. Những ai từng tham gia lĩnh vực phát triển web đều có thể có cho mình một số nhận định cho năm tới. Tuy nhiên xu hướng chỉ là một trong những yếu tố để đưa sản phẩm dễ dàng đến với người dùng, còn tầng sâu của nó vẫn là tổng hòa của các yếu tố, đánh đúng mục tiêu, đúng khách hàng, với đúng nội dung, đúng phong cách.</p> <p>Chúc các bạn trong ngành có thể kế thừa và tạo ra được những xu hướng mới của mới.</p> <p>&nbsp;</p> </div> </div> </div> </div> </div> <div class="field field--name-field-other-articles field--type-entity-reference field--label-above"> <div class="field__items"> <a href="/vi/goc-nhin/tan-dung-cac-mo-hinh-nhan-thuc-vao-san-pham-thiet-ke-p1" hreflang="vi">Tận Dụng Các Mô Hình Nhận Thức Vào Sản Phẩm Thiết Kế p1</a> <a href="/vi/goc-nhin/nhung-nguyen-tac-gestalt-khai-thac-quy-luat-thi-giac-trong-thiet-ke-ui" hreflang="vi">Những nguyên tắc Gestalt - Khai thác quy luật thị giác trong thiết kế UI </a> <a href="/vi/goc-nhin/tam-ly-hoc-mau-sac-va-ung-dung-trong-thiet-ke" hreflang="vi">Tâm lý học Màu sắc và ứng dụng trong thiết kế</a> <a href="/vi/goc-nhin/tai-sao-website-quan-trong-voi-doanh-nghiep" hreflang="vi">Tại sao Website quan trọng với doanh nghiệp? </a> <a href="/vi/goc-nhin/kiem-soat-thiet-ke-cua-ban-voi-goc-nhin-truc-z-trong-thiet-ke-phang" hreflang="vi">Kiểm soát thiết kế của bạn với góc nhìn trục Z trong thiết kế phẳng </a> <a href="/vi/goc-nhin/series-typography-trong-quy-trinh-xay-dung-trai-nghiem-so-1-lua-chon-font-chu" hreflang="vi">Series: Typography trong quy trình xây dựng trải nghiệm số #1: Lựa chọn font chữ</a> <a href="/vi/goc-nhin/series-typography-trong-quy-trinh-xay-dung-trai-nghiem-so-3-ung-dung-trong-thiet-ke" hreflang="vi">Series: Typography trong quy trình xây dựng trải nghiệm số #3: Ứng dụng trong thiết kế website/App</a> </div> </div> <div class="field field--name-field-hidden-article field--type-boolean field--label-above"> Off </div> Sat, 23 Dec 2017 02:59:39 +0000 hapham 32 at https://beau.vn WEBSITE F&B của bạn đã thật sự hiệu quả? https://beau.vn/vi/goc-nhin/website-fb-cua-ban-da-that-su-hieu-qua <span class="field field--name-title field--type-string field--label-hidden">WEBSITE F&amp;B của bạn đã thật sự hiệu quả?</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/vi/user/6" typeof="schema:Person" property="schema:name" datatype="">hapham</span></span> <span class="field field--name-created field--type-created field--label-hidden">T6, 11/10/2017 - 14:07</span> <a href="/vi/uxui-Trai-Nghiem-Nguoi-Dung-Giao-Dien-Nguoi-Dung-02" hreflang="vi">UX/UI</a> <div class="container"> <div class="row"> <div class="col-lg-8 col-xs-offset-0 col-sm-offset-0 col-md-offset-0 col-lg-offset-2 "> <p>Trong bối cảnh thị trường F&amp;B (Food &amp; Beverages) tại Việt Nam vẫn tăng trưởng ổn định với tốc độ 5,7%/năm và sẽ tiếp tục tăng đến năm 2020, đối tượng khách hàng tiềm năng (15-34 tuổi) chiếm đến 30% sẽ hứa hẹn sự ra nhập rất lớn của các thương hiệu lớn. Điều này đồng nghĩa với việc cuộc chiến của các thương hiêu trong ngành ngày càng khốc liệt, nhất là cuộc chiến trên các kênh Digital. Website sẽ là một trong những phương tiện truyền thông và bán hàng chính của các doanh nghiệp F&amp;B hiện nay. Tuy nhiên, làm thế nào để Website của bạn thực sự thu hút khách hàng và góp phấn tăng doanh thu cho doanh nghiệp. Website mà bạn đang sở hữu đã thực sự tốt chưa?</p> <h3>1. Giao diện</h3> <p>Đây là điểm đầu tiên mà khách hàng tiếp xúc với doanh nghiệp của bạn trên phương tiện truyền thông nói chung và Website của bạn nói riêng. Chính vì thế, một giao diện đẹp mắt và ấn tượng sẽ là điểm chạm tốt đẹp đầu tiên giữa bạn và khách hàng, dẫn dắt đến những điểm chạm tiếp theo. Nhất là trong lĩnh vực F&amp;B khi mà hình ảnh đánh thức vị giác và mong muốn thưởng thức của khách hàng thì việc tiếp cận và lôi kéo khách hàng ngay từ cú click chuột đầu tiên là một điều vô cùng cần thiết. Tuy nhiên, không phải Website F&amp;B nào cũng sở hữu điều này. Trong thời gian gần đây, khi các Website F&amp;B đang được chú trọng nhiều hơn về hình ảnh thì vẫn còn rất nhiều Website khiến khách hàng mất thiện cảm. Việc đánh mất khách hàng ngay điểm chạm đầu tiên là một điều vô cùng đáng tiếc.</p> <p>Vậy giao diện Website F&amp;B cần đảm bảo những yếu tố nào:</p> <h3>2. Hình ảnh</h3> <p>Trong bất kỹ lĩnh vực nào thì hình ảnh trình bày trên Website cũng vô cùng quan trọng. Nó không chỉ thể hiện gout thẩm mỹ, sự đầu tư và chuyên nghiệp của doanh nghiệp. Hình ảnh gần như là quyết định 50% cho sự thành công hay thất bại của một một Website nhất là Website cần chạm tới cảm xúc như F&amp;B. Theo nghiên cứu, hình ảnh đẹp chiếm tới 70% quyết định của khách hàng khi gọi một món mới mà họ chưa nếm thử bao giờ. Còn đối với việc lựa chọn giữa các sản phẩm, nhà hfng quen thuộc khách hàng sẽ có xu thế nghiêng về việc lựa chọn các sản phẩm có hình ảnh đẹp, đa dạng thay vì các hình ảnh cẩu thả, kém chất lượng. Trong thời gian gần đây, cuộc chiến hình ảnh trong ngành hàng đặc thù như F&amp;B ngày càng sôi động khi mà hầu hết các doanh nghiệp từ nhỏ đến lớn đều dành một phần ngân sách không nhỏ của mình vào việc đầu tư xây dựng hình ảnh sản phẩm. Đây cũng là một phần tạo nên thương hiệu của doanh nghiệp không chỉ trên các phương tiện truyền thông đại chúng mà còn trong tâm trí khách hàng.</p> <p><img alt="" height="" src="https://static.beautheme.com/beauvn/2018/07/24144335/nghe-thuat-chup-anh-mon-an-loi-cuon-03.jpg" width="" /></p> <h3>3. Tích hợp hệ thống đặt hàng và thanh toán trên Website</h3> <p>Trong khi thương mại điện tử phát triển một cách nhanh chóng, việc tích hợp hệ thống đặt hàng và thanh toán trên Website của bạn là vô cùng cần thiết. Điều này không chỉ giúp doanh nghiệp của bạn tận dụng được Website của mình để phục vụ khách hàng tốt hơn mà còn giúp cho việc quản lý đơn hàng trở nên thuận tiện hơn. Tuy nhiên không phải doanh nghiệp nào cũng thành công khi tích hợp việc đặt hàng và thanh toán trên Website của mình. Với hơn 5 năm kinh nghiệm thiết kế Website chúng tôi tin rằng một hệ thống booking tốt phải đảm bảo một luồng booking hợp lý, thuận tiện nhất cho khách hàng. Luồng booking không nên có quá nhiều bước phức tạp và đòi hỏi quá nhiều thông tin khiến khách hàng bị rối, dễ thoát trang. Thông tin ngắn gọn, cần thiết, dễ nhìn là điều vô cùng cần thiết khi xây dựng một hệ thống đặt hàng và thanh toán.</p> <p>Phần thanh toán nên được tích hợp các cổng thanh toán phù hợp, uy tín để khách hàng có thể lựa chọn các phương thức thanh toán thích hợp. Bạn hoàn toàn có thể tham khảo các đơn vị cung cấp các dịch vụ tích hợp cổng thanh toán như VNPay, Onepay, …</p> <h3>4. Menu và thông tin khuyến mãi rõ ràng</h3> <p>Điều mà khsch hàng quan tâm nhất khi vào một Website F&amp;B chính là menu và thông tin khuyến mãi của doanh nghiệp. Chính vì vậy, việc cập nhập các thông tin này thường xuyên là một điều vô cùng quan trọng không chỉ giúp khách hàng thuận tiện hơn trong việc tìm kiếm thông tin mà còn giúp tăng uy tín cho thương hiệu. Một Website đầy đủ thông tin luôn hấp dẫn khách hàng hơn hết.</p> <p>Thông tin khuyến mãi nên được chú ý thiết kế một cách nổi bật và khoa học, đảm bảo khách hàng dễ dàng tìm kiếm thông tin. Điều này hỗ trợ thúc đẩy hiệu quả chiến dịch khuyến mãi và tăng doanh số bán hàng.</p> <h3>5. SEO</h3> <p>Cuộc chiến thứ hạng Website trên các công cụ tìm kiếm đang diễn ra vô cùng khốc liệt khi mà các đơn vị gia nhập ngành hàng ngày càng nhiều và có sự đầu tư ngày càng bài bản. Khách hàng đã dần hình thành thói quen tìm kiếm thông tin qua các công cụ tìm kiếm quen thuộc như Google thì việc cái tên thương hiệu của bạn hiện ra đầu tiên có vai trò vô cùng quan trọng. Theo một vài thống kê thì khách hàng thường chỉ kích vào 5 cái tên đầu tiên ở trang tìm kiếm đầu tiên. Nếu bạn bị loại ra khỏi danh sách này đồng nghĩa với việc bạn đã mất một lượng lớn khách hàng. Chính vì vậy, việc Website của bạn được thiết kế tối ưu cho các tác vụ SEO sẽ vô cùng lý tưởng để bạn và doanh nghiệp của mình tận dụng được kênh số này trong việc nâng cao doanh số bán hàng.</p> <p>Tóm lại, trong khi cuộc chiến của các doanh nghiệp F&amp;B trên các kênh số đang diễn ra vô cùng khốc liệt, Website của doanh nghiệp bạn không được phép lỗi thời. Đi sau đồng nghĩa với việc bạn đã tự loại mình ra khỏi cuộc chơi, doanh số và thương hiệu sẽ dần mất đi. Để có một Website thật sự hiệu quả, ngoài một số yếu tố nêu trên, điều quan trọng nhất vẫn là sự đầu tư bài bản của doanh nghiệp và một đơn vị tư vấn và xây dựng Website chuyên nghiệp.</p> <p>Với một số chia sẻ của mình, chúng tôi hi vọng các bạn sẽ tận dụng được tất cả các ưu điểm của kênh truyền thông online trong việc thúc đẩy sự phát triển của doanh nghiệp.</p> </div> </div> </div> <a href="/vi/thiet-ke-website" hreflang="vi">Thiết kế Website</a> <a href="/vi/thiet-ke-web" hreflang="vi">Thiết kế Web</a> <a href="/vi/xu-huong-thiet-ke" hreflang="vi">Xu hướng thiết kế</a> <a href="/vi/uxui-Trai-Nghiem-Nguoi-Dung-Giao-Dien-Nguoi-Dung" hreflang="vi">UX/UI</a> <a href="/vi/giao-dien-nguoi-dung" hreflang="vi">Giao diện người dùng</a> <a href="/vi/trai-nghiem-so" hreflang="vi">Trải nghiệm số</a> <a href="/vi/trai-nghiem-nguoi-dung" hreflang="vi">trải nghiệm người dùng</a> <div class="desktop-space" style="height: 150px"></div> <div class="mobile-space" style="height: 50px"></div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="f-text"> <p>F&amp;B (Food &amp; Beverages) hiện đang là một ngành kinh doanh hot với sự góp mặt của nhiều ông lớn lẫn start up. Với tốc độ tăng trưởng ổn định 5,7%/năm, và theo dự đoán nó sẽ tiếp tục tăng đến năm 2020, đối tượng khách hàng tiềm năng (15-34 tuổi) chiếm đến 30% dân số, ngành F&amp;B đang có nhiều cơ hội phát triển hơn bao giờ hết.</p> <p><em>Thế nhưng,&nbsp;cơ hội luôn đi cùng thách thức, việc ngành F&amp;B tăng trưởng cũng sẽ tạo cơ hội cho nhiều thương hiệu mới được mọc lên, miếng bánh lớn hơn nhưng cạnh tranh cũng khốc liệt hơn.</em></p> <p><strong>Xem thêm:&nbsp;<a href="https://beau.vn/vi/goc-nhin/co-hoi-thach-thuc-xu-huong-ecommerce-cua-cac-doanh-nghiep-vua-va-nho"><em>Cơ hội, thách thức &amp; xu hướng eCommerce của các doanh nghiệp vừa và nhỏ</em></a></strong><br /> <br /> Canh tranh hơn có nghĩa là bạn cần đầu tư hơn, về cả chất lượng sản phẩm lẫn thương hiệu để thuyết phục và giữ chân khách hàng. Ngoài việc đầu tư về cơ sở vật chất, thiết kế câu chuyện và chiến lược cho thương hiệu, thì việc đầu tư một cách chỉn chu cho hình ảnh, tạo ra những điểm chạm đầu tiên cho khách hàng cũng vô cùng quan trọng. Một trong những điểm chạm đó chính là Website. Ngoài là một kênh bán hàng, <em><strong>Website F&amp;B</strong></em> còn là một phương tiện truyền thông, một kênh để thương hiệu xây dựng hình ảnh tới khách hàng. Tuy nhiên, làm thế nào để một <em><strong>Website F&amp;B</strong></em> thu hút khách hàng, góp phấn tăng doanh thu cho doanh nghiệp? Hay làm sao để biết <em><strong>Website F&amp;B</strong></em> của doanh nghiệp&nbsp;có đang làm tốt nhiệm vụ của nó?</p> <h3>1. Giao diện</h3> <p>Đây là điểm đầu tiên mà khách hàng tiếp xúc với doanh nghiệp của bạn trên phương tiện truyền thông nói chung và Website của bạn nói riêng. Ấn tượng của khách hàng về Website sẽ tác động trực tiếp tới những đánh giá của họ về thương hiệu. Khách hàng có thể đánh giá mức độ chuyên nghiệp, sự quan tâm, đầu tư của một thương hiệu thông qua Website. Một giao diện đẹp mắt, chuyên nghiệp sẽ là điểm chạm tốt giữa bạn và khách hàng, từ đó dẫn dắt đến những điểm chạm tiếp theo. Nhưng một giao diện xấu, rối mắt có thể khiến khách hàng cắt đứt mối quan hệ với thương hiệu ngay từ khi nó chưa hình thành.</p> <p>Nhất là trong lĩnh vực F&amp;B khi mà hình ảnh đánh thức vị giác và mong muốn thưởng thức của khách hàng thì việc tiếp cận và lôi kéo khách hàng ngay từ cú click chuột đầu tiên là một điều vô cùng cần thiết. Tuy nhiên, không phải Website F&amp;B nào cũng làm được điều này. Trong bối cảnh mức độ cạnh tranh ngày càng cao, việc lơ là về hình ảnh thương hiệu trong mắt khách hàng là một điều nguy hiểm.</p> <h3>2. Hình ảnh</h3> <p>Dù bất kỹ lĩnh vực nào thì hình ảnh trình bày trên Website cũng vô cùng quan trọng. Nó không chỉ thể hiện gout thẩm mỹ, sự đầu tư và chuyên nghiệp của doanh nghiệp. Hình ảnh gần như là quyết định 50% cho sự thành công hay thất bại của một một Website nhất là Website cần chạm tới cảm xúc như F&amp;B. Theo nghiên cứu, hình ảnh đẹp chiếm tới 70% quyết định của khách hàng khi gọi một món mới mà họ chưa nếm thử bao giờ. Và đối với các sản phẩm hay nhà hàng quen thuộc, khách hàng vẫn sẽ có xu thế nghiêng lựa chọn các sản phẩm có hình ảnh đẹp, đa dạng thay vì các hình ảnh cẩu thả, kém chất lượng.&nbsp;</p> <p>Trong thời gian gần đây, cuộc chiến hình ảnh trong ngành hàng đặc thù như F&amp;B ngày càng sôi động khi mà hầu hết các doanh nghiệp từ nhỏ đến lớn đều dành một phần ngân sách không nhỏ của mình vào việc đầu tư xây dựng hình ảnh sản phẩm. Đây cũng là một phần tạo nên thương hiệu của doanh nghiệp không chỉ trên các phương tiện truyền thông đại chúng mà còn trong tâm trí khách hàng.<br /> <a href="https://beau.vn/vi/goc-nhin/chien-luoc-chuyen-doi-so-4-buoc-thay-doi-doanh-nghiep-can-chuan-bi"><em><strong>=&gt;&nbsp;Chiến lược chuyển đổi số: 4 bước thay đổi doanh nghiệp cần chuẩn bị</strong></em></a></p> <p><img alt="" height="" src="https://static.beautheme.com/beauvn/2018/07/24144335/nghe-thuat-chup-anh-mon-an-loi-cuon-03.jpg" width="" /></p> <h3>3. Tích hợp hệ thống đặt hàng và thanh toán trên Website</h3> <p>Trong khi thương mại điện tử phát triển một cách nhanh chóng, việc tích hợp hệ thống đặt hàng và thanh toán trên Website của bạn là vô cùng cần thiết. Điều này không chỉ giúp doanh nghiệp của bạn tận dụng được Website của mình để phục vụ khách hàng tốt hơn mà còn giúp cho việc quản lý đơn hàng trở nên thuận tiện hơn. Tuy nhiên không phải doanh nghiệp nào cũng thành công khi tích hợp việc đặt hàng và thanh toán trên Website F&amp;B của mình.&nbsp;</p> <p><a href="https://beau.vn/vi/goc-nhin/b2b-hanh-trinh-mua-hang-cua-khach-hang-doanh-nghiep-la-gi-ban-da-thuc-su-hieu-ro"><em><strong>=&gt;&nbsp;B2B - Hành trình mua hàng của khách hàng doanh nghiệp là gì? Bạn đã thực sự hiểu rõ</strong></em></a></p> <p>Với hơn 5 năm kinh nghiệm thiết kế Website chúng tôi tin rằng một hệ thống booking tốt phải đảm bảo một luồng booking hợp lý, thuận tiện nhất cho khách hàng. Luồng booking không nên có quá nhiều bước phức tạp và đòi hỏi quá nhiều thông tin khiến khách hàng bị rối, dễ thoát trang. Thông tin ngắn gọn, cần thiết, dễ nhìn là điều vô cùng cần thiết khi xây dựng một hệ thống đặt hàng và thanh toán. Phần thanh toán nên được tích hợp các cổng thanh toán phù hợp, uy tín để khách hàng có thể lựa chọn các phương thức thanh toán thích hợp. Bạn hoàn toàn có thể tham khảo các đơn vị cung cấp các dịch vụ tích hợp cổng thanh toán như VNPay, Onepay, …</p> <h3>4. Menu và thông tin khuyến mãi rõ ràng</h3> <p>Điều mà khách hàng quan tâm nhất khi vào một Website F&amp;B chính là menu và thông tin khuyến mãi của doanh nghiệp. Chính vì vậy, việc cập nhập các thông tin này thường xuyên là một điều vô cùng quan trọng, giúp khách hàng thuận tiện hơn trong việc tìm kiếm và cập nhập thông tin. Và cụ thể với những thông tin khuyến mãi, chúng nên được thiết kế một cách nổi bật và khoa học, đảm bảo cho khách hàng dễ dàng nhận biết và tiếp cận được tới thông tin, từ đó thúc đẩy hiệu qủa chiến dịch, đẩy mạnh doanh số.</p> <p>Cung cấp và cập nhật thông tin trên Website thường xuyên cũng sẽ làm tăng độ tin cậy của khách hàng với thương hiệu. Bởi khách hàng thấy được sự quan tâm và chào đón của thương hiệu tới họ, ngay từ những điểm chạm đầu tiên là tìm hiểu thương hiệu và sản phẩm. Một Website đầy đủ thông tin sẽ làm hài lòng khách hàng cũ khi có được thông tin khuyến mãi một cách dễ dàng, và đồng thời nó cho khách hàng mới một ấn tượng tốt, hứa hẹn những điểm chạm gần hơn tới thương hiệu.</p> <h3>5. SEO</h3> <p>Khi đã có một Website chuyên nghiệp rồi thì bạn cần dẫn được khách hàng tới Website, và một trong những cách để làm được điều đó là SEO. Tâm lý khách hàng hiện tại luôn có xu hướng tìm kiếm thông tin về ngành hàng, sản phẩm trên Google. Và khi khách hàng gõ ra những từ khoá, cái tên thương hiệu của bạn xếp hạng thứ bao nhiêu trên kêt quả tìm kiếm có ảnh hưởng to lớn tới lượt truy cập, và theo sau đó có thể là doanh số. Theo một vài thống kê thì khách hàng thường chỉ kích vào 5 cái tên đầu tiên ở trang tìm kiếm đầu tiên. Nếu bạn bị loại ra khỏi danh sách này đồng nghĩa với việc bạn đã mất một lượng lớn khách hàng. Chính vì vậy, việc Website của bạn được thiết kế tối ưu cho các tác vụ SEO, sẽ vô cùng lý tưởng để bạn và doanh nghiệp của mình tận dụng được kênh số này trong việc nâng cao doanh số bán hàng.</p> <p>Tóm lại, trong khi cuộc chiến của các doanh nghiệp F&amp;B trên các kênh số đang diễn ra vô cùng khốc liệt, <a href="https://beau.vn/vi/goc-nhin/chien-luoc-chuyen-doi-so-4-buoc-thay-doi-doanh-nghiep-can-chuan-bi">Website F&amp;B</a> của doanh nghiệp bạn không được phép lỗi thời. Đi sau đồng nghĩa với việc bạn đã tự loại mình ra khỏi cuộc chơi, doanh số và thương hiệu sẽ dần mất đi. Để có một Website thật sự hiệu quả, ngoài một số yếu tố nêu trên, điều quan trọng nhất vẫn là sự đầu tư bài bản của doanh nghiệp và một đơn vị tư vấn và xây dựng Website chuyên nghiệp.</p> <p>Với một số chia sẻ của mình, chúng tôi hi vọng các bạn sẽ tận dụng được tất cả các ưu điểm của kênh truyền thông online trong việc thúc đẩy sự phát triển của doanh nghiệp.</p> </div> </div> </div> </div> </div> <div class="field field--name-field-other-articles field--type-entity-reference field--label-above"> <div class="field__items"> <a href="/vi/goc-nhin/5-vi-du-dien-hinh-ve-chien-luoc-dinh-vi-thuong-hieu" hreflang="vi">5 Ví Dụ Điển Hình Về Chiến Lược Định Vị Thương Hiệu</a> <a href="/vi/goc-nhin/ky-nguyen-so-khi-trai-nghiem-ux-lam-nen-thuong-hieu" hreflang="vi">Kỷ nguyên Số: Khi trải nghiệm UX làm nên thương hiệu</a> <a href="/vi/goc-nhin/tan-dung-cac-mo-hinh-nhan-thuc-vao-san-pham-thiet-ke-p1" hreflang="vi">Tận Dụng Các Mô Hình Nhận Thức Vào Sản Phẩm Thiết Kế p1</a> <a href="/vi/goc-nhin/nganh-kinh-doanh-ban-le-co-the-thay-doi-the-nao-trong-thoi-dai-so-hoa" hreflang="vi">Ngành kinh doanh bán lẻ có thể thay đổi thế nào trong thời đại số hoá</a> </div> </div> <div class="field field--name-field-hidden-article field--type-boolean field--label-above"> Off </div> Fri, 10 Nov 2017 07:07:40 +0000 hapham 50 at https://beau.vn