Ban Dan Trang

STYLE GUIDE DÀNH CHO WEBSITE - N1 1
2 STYLE GUIDE DÀNH CHO WEBSITE - N1
N1
Giơi thiệu
Danh sách thành viên và phân chia công việc

Mục lục
00 Tổng quan về Style Guide
Khái niệm Style guide 5

Khái niệm style guide trong thiết kế website 5
Các thành phần trong Style guide cho website 5
01 Color
Color 6
Khái niệm 6
Vai trò 6
Cấu trúc 6
Các lưu ý khi chọn xây dựng bảng màu cho website 8
02 Typography
Khái niệm 9
Vai trò 9
Các font phổ biến cho website 9
Các quy tắc về khoảng cách 9
Cấu trúc Text Style 10
03 Layout
Khái niệm 10
Các kiểu thiết kế layout cho website 10
Các kích thước layout website chuẩn 10
Mục lục
04 Grid
Khái niệm 12
Các thể loại grid phổ biến dùng cho thiết kế website 12
05 Button
Khái niệm 12
Tác dụng 12
Cấu trúc 13
Các cấp bậc của button 13
Các kiểu button phổ biến 14
Style và color cho button 15
Các trạng thái phản hổi của button 16
Cách đặt tên cho button 17
06 Icon
Khái niệm 18
Phân loại 18
Lưu ý khi thiết kế icon 19
07 Form
Khái niệm 19
Các quy tắc 19
Các loại text field 19
Các trạng thái 20
Cấu trúc 20
Khoảng cách giữa các thành phần 20
Các lưu ý 21
Mục lục
08 Shadows
Khái niệm 21
Vai trò 21
Cấu trúc 22
09 Pop-up
Khái niệm 22
Vai trò 22
Cấu trúc 22
10 Search bar
Vai trò 23
Các thành phần 23
Một số lưu ý 24
11 Tab menu
Khái niệm 24
Tác dụng của tab menu 25
Cấu trúc 25
Mục lục
12 Banner
Khái niệm 26
Vai trò 26
Cấu trúc 27
Cách diễn hoạt 27
Kích thước banner phổ biến 28
Các tính năng của các Banner quảng cáo 32
13 Imageview
Khái niệm 32
Vai trò 32
Thành phần 33
00
Tổng quan về Style Guide
1. Khái niệm Style Guide
Style Guide là một tập hợp các tiêu chuẩn áp dụng cho việc tạo ra các văn bản hoặc thiết kế dựa trên
tài sản cho một tổ chức, một ấn phẩm hoặc một lĩnh vực. Style Guide được xem như là bản tham
khảo toàn diện của những điều nên làm và điều nên tránh để đảm bảo nội dung được sản xuất ra
một cách nhất quán, để phù hợp với các mục tiêu.
2. Khái niệm style guide trong thiết kế website
Là một bộ thiết kế các thành phần cần quy chuẩn (Typo, màu sắc, lưới, button…) để đồng nhất
phong cách thiết kế của cả trang web.
3. Thành phần
Color Aa
Những thành phần chính cần có
trong bộ style guide bao gồm 4
thành phần: Color, Typography,
Grid, Button. Để thống nhất về
phong cách thiết kế của website.
Tùy vào tính chất của trang web,

sẽ có các thành phần khác cần
thêm trong bộ Style guide như:
icon, toolbar, form, checkbox,
menu dropdown, ...
Button
01
Color
1. Khái niệm
Là tập hợp các màu mà nhà thiết kế chọn cho thiết kế trang web của họ. Bảng màu có thể bao gồm
ít hoặc nhiều màu mà nhà thiết kế thấy phù hợp. Mỗi màu có thể được sử dụng cho nhiều thành
phần khác nhau trên toàn bộ trang web, có nghĩa là cùng một màu có thể được sử dụng lặp lại cho
các loại thành phần khác nhau.
Bảng màu thường được chia thành hai bộ màu: chính và phụ.
Màu chính thường là màu

chủ đạo hơn trong trang
web, bao gồm màu nền,
màu logo, màu menu, …
Màu phụ thường được sử

dụng làm màu nhấn và một
số các thành phần khác.
Thông thường, một bảng màu

sẽ bao gồm một số sắc thái
của cùng một màu, điều này
sẽ mang lại cho website một
cảm giác đa dạng nhưng nhất
quán xuyên suốt toàn bộ thiết
kế.
2. Vai trò
Giống như chúng ta đã biết, màu sắc có thể kích hoạt những cảm xúc nhất định về thị giác . Có rất
nhiều điều đằng sau tâm lý học về màu sắc được sử dụng trên các Website cũng như cảm xúc mà
nó truyền tải đến người xem. Các liên kết màu sắc rất mạnh mẽ. Cảm xúc và tư duy của mỗi người
về màu sắc phát triển từ khi còn là trẻ sơ sinh và sau này những cảm xúc và tuy duy đó lại được
chính màu sắc định hướng. Hiểu đơn giản tức là màu sắc nằm trong bản năng và tiềm thức của mỗi
người. Chính vì vậy màu sắc đóng nhưng vai trò rất quan trọng đằng sau các website như:
04
Tăng tính thẩm Phát triển tư duy
01 mỹ trật tự
Vai trò của

05
Nhận diện Phân cấp thông tin
Color 02 thương hiệu hiệu quả
06
Định hướng cảm Đơn giản hóa thiết
03 nhận khách hàng kế
3. Cấu trúc
Giống như chúng ta đã biết, màu sắc có thể kích hoạt những cảm xúc nhất định về thị giác . Có rất
nhiều điều đằng sau tâm lý học về màu sắc được sử dụng trên các Website cũng như cảm xúc mà
nó truyền tải đến người xem. Các liên kết màu sắc rất mạnh mẽ. Cảm xúc và tư duy của mỗi người
về màu sắc phát triển từ khi còn là trẻ sơ sinh và sau này những cảm xúc và tuy duy đó lại được
chính màu sắc định hướng. Hiểu đơn giản tức là màu sắc nằm trong bản năng và tiềm thức của mỗi
người. Chính vì vậy màu sắc đóng nhưng vai trò rất quan trọng đằng sau các website như:
Màu thương hiệu
Màu nhấn chính của sản

phẩm, được sử dụng cho các
yếu tố tương tác như: nút, thẻ,
chú thích,.. Màu sắc chính
thường được chọn dựa trên
màu thương hiệu.
Màu chủ đạo
Màu nhấn chính của sản phẩm, được sử

dụng cho các yếu tố tương tác như: nút, thẻ,
chú thích,.. Màu sắc chính thường được
chọn dựa trên màu thương hiệu .
Màu mực
Sử dụng chính trong các văn bản, chữ viết, đường viền, và một số yếu tố đặc biệt khác .
Màu của typeface là 1 trong những yếu tố quan trọng trong bảng màu. Có thể dễ dàng lựa chọn màu
đen làm màu typeface, nhưng các kiểu chữ màu đen trên nền trắng thường tạo độ tương phản lên
tới 100% và dễ gây mỏi mắt. Nên sử dụng màu xám hoặc pha màu xám để tạo cho website một cái
Màu bổ sung
Mỗi màu sắc đều có một số các màu tương

phản khiến chúng trở nên nổi bật, vì vậy các
màu sắc bổ xung, xung quanh màu chính sẽ
giúp cho việc làm nổi bật nhóm màu chính
trong website. Các màu bổ sung thường
được lựa chọn dựa trên các cách phối màu
trên bánh xe màu sắc.
Màu chức năng
Dựa vào ý nghĩa riêng của mỗi màu sắc để áp dụng vào việc chọn ra bộ màu dành cho chức năng.
4. Các lưu ý khi chọn xây dựng bảng màu cho website
Bánh xe màu sắc Cân bằng màu trung tính
Các nguyên tắc cơ bản của lý thuyết màu sắc Mặc dù màu sắc trung tính có thể kém hấp
bắt đầu với việc hiểu ba nhóm màu bao gồm: dẫn hơn, nhưng chúng là yếu tố không thể
sơ cấp, thứ cấp và thứ ba. Các màu cơ bản, thiếu cho bất kỳ cách phối màu nào . Ngay
đỏ, xanh lam và vàng, là màu cơ bản của cả khi chúng chỉ được sử dụng cho các thành
bánh xe màu và tất cả các màu còn lại đều phần trong văn bản. Mọi bảng màu chuyên
bắt nguồn từ ba màu này. nghiệp đều có sử dụng các màu trung tính,
chúng sẽ giúp người dùng có khoảng nghỉ
mắt, đặc biệt là khi họ đang cố gắng xử lý
thông tin.
Tâm lý học màu sắc Sự kết hợp màu sắc
Thế giới tâm lý học về màu sắc được Giống như mỗi màu mang một tính cách và
xây dựng dựa trên ý tưởng rằng một ý nghĩa riêng, mối quan hệ giữa mỗi màu
số màu sắc kích hoạt cảm giác và cũng vậy. Mỗi sự kết hợp màu sắc thường
cảm xúccụ thể, hành động nhất định. truyền tải một thông điệp hoặc khái niệm nhất
định đến người dùng truy cập vào website.
Bảng màu cho website xây dựng dựa trên
các trải nghiệm về cảm xúc muốn đem tới Vi dụ như: Màu tương tự xếp cạnh nhau, màu
cho người dùng sẽ không chỉ tác động đến bổ sung tạo sự thu hút, màu sắc bộ ba tạo
phong cách thương hiệu website mà còn khoảng cách đều
kích hoạt các hành động, cảm xúc nhất định
của người dùng khi họ truy vào website đó.
02
Typography
1. Khái niệm
Typography là nghệ thuật sắp xếp, thiết

kế và sáng tạo hình dáng câu văn, chữ
viết sao cho có tính thẩm mỹ, thể hiện
một phong cách nhất định. Công việc này
bao gồm thiết kế kiểu chữ (typeface), cỡ
chữ, độ giãn cách, cũng như trang trí, …
Typography trong thiết kế website là quá trình

lựa chọn và thiết kế phông chữ, kích thước,
màu sắc, bố cục, căn chỉnh chữ trong website.
2. Vai trò
Typography thổi hồn vào các con chữ, đưa

vào đó màu sắc, sắc thái nhằm diễn đạt của
chủ đề mà nó hướng tới, khiến các con chữ
đều có một cảm xúc nào đó, từ đó cũng kết
nối cảm xúc và thông điệp mà nó truyền tải.
Việc tạo ra các typography cũng được chú
trọng nhiều đến việc lựa chọn các font chữ
sao cho phù hợp với chủ đề.
Typography giúp việc đọc các con chữ, các

văn bản trở nên thú vị hơn, vì nó kết hợp giữa
dữ liệu thông tin và khả năng sáng tạo, cũng
như trình bày các con chữ, văn bản theo một
cách hấp dẫn, dễ tiếp nhận hơn.
Typography mang đến sự cuốn hút và tạo ấn

tượng cho người xem bằng việc ẩn giấu trong
những con chữ là thông điệp và câu chuyện,
từ đó dẫn dắt, gợi ra trí tưởng tượng của họ.
3. Các font phổ biến cho website
Roboto Open Sans
Monterrat Lato
Source Sans Pro Lora

4. Các lưu ý khi chọn xây dựng bảng màu cho website
Khoảng cách giữa các đoạn
Sử dụng khoảng cách đoạn văn bằng kích

thước phông chữ của nội dung đang sử dụng
Khoảng cách trong đoạn
Khoảng các trong đoạn thường phụ thuộc Tuy nhiên, không phải đoạn văn nào cùng
vào chiều cao dòng của font chữ dùng cho có khoảng cách như vậy. chiều cao phổ biến
nội dung. Thường thì khoảng cách này sẽ được sử dụng là: phần tiêu đề chính là 1.3 lần
gấp 1.5 lần chiều cao của chữ. chiều cao chữ còn tiêu đề phụ là 1.2.
Khoảng cách trong mỗi nhóm
Khoảng cách trong mỗi nhóm: cuối phần nội

dung với tiêu đề và tiêu đề với đầu phần nội
dung.
5. Cấu trúc Text style
Trong Style Guide, mỗi bộ Text Style bao gồm 4 thành phần: Tên font, font size, font weight, line
height.
03
Layout
1. Khái niệm
Trong thiết kế web, Layout chính là cách dàn trang, sắp xếp, bố trí các yếu tố, thành phần sẽ được
hiển thị trên website.
2. Các kiểu thiết kế Layout
Layout được thiết kế để các thành phần trong đó được sắp xếp, bố trí hợp lý, hiệu quả nhằm
thu hút ánh mắt người dùng. Làm được điều đó không những phải áp dụng dựa trên các
nguyên tắc khi thiết kế layout là căn chỉnh, hiệu ứng lân cận, không gian trắng , hệ thống lưới
mà còn phải cân nhắc đến mục đích sử dụng của website đó là dành cho lĩnh vực nào.
Dưới đây là thống kê các kiểu thiết kế Layout phổ biến được sử dụng.
Layout dạng lưới Ảnh chiếm 2/3 Ảnh chiếm 1/3

Background phủ kín trang Menu cố định 1 bên Thư viện ảnh
Dạng 3 khối hộp Dạng 5 khối hộp
2. Các kiểu thiết kế Layout
Kích thước của website có 2 dạng chính là kích thước cố định(fixed layout) và kích thước lưu
động(fluid layout). Ngoài ra còn có dạng bổ sung thứ 3 là kích thước co giãn(elastic layout).
Kích thước cố định là kích thước mà chiều rộng(width) của website được thiết lập theo 1 thông số
cố định. Ví dụ: 800px, 1000px, 960px, 1260px, …
Kích thước lưu động là kích thước được tính theo thông số tỉ lệ % thay vì thông số cố định px và
do đó, chiều rộng của website co giãn theo kích thước của cửa sổ trình duyệt(browser windows)
Kích thước co giãn(elastic layout) là dạng kết hợp của 2 dạng trên.
Fixed Layout
Đối với website có chiều rộng 800px thì máy tính có độ phân giải 800×600 sẽ thấy website hiển thị
toàn màn hình, tràn toàn bộ màn hình khi trình duyệt ở chế độ hiển thị maxium.
Tuy nhiên, khi máy tính có độ phân giải cao

hơn như 1024 hoặc 1280 thì website không
còn hiển thị toàn màn hình nữa nhưng sẽ
dư ra một khoảng trông 2 bên của website.
Đối với fixed layout, kích thước chuẩn khi

được sử dụng bởi 90% các thiết kế website
mới là 960px vì kích thước này phù hợp với
màn hình có độ phân giải 1024 hoặc cao hơn..
Độ phân giải 1024 được xem là độ phân giải

chuẩn của máy tính bởi hầu hết các nhà sản
xuất phần cứng cũng như nhà thiết kế.
Fluid Layout
Đối với kích thước lưu động (fluid layout / liquid layout), các thành phần trong website có chiều rộng
là tỉ lệ % thay vì đơn vị cố định px. Nhờ đó, website có thể co giãn theo độ phân giải của màn hình.
Fluid layout hay còn gọi là liquid layout sử

dụng tỉ lệ % cho các thành phần HTML của
nó và hạn chế tối đa việc sử dụng px. Do đó
layout có thể thay đổi theo từng độ phân giải
nhất định.
04
Grid
1. Khái niệm
Grid - hay chính xác hơn là Grid System tức hệ thống lưới, là một công cụ vô cùng đắc lực trong
quá trình sáng tạo và thiết kế sản phẩm, giúp các sản phẩm của Designer trở nên thẳng lề lối hơn,
các bố cục sắp xếp cũng gọn gàng, ngăn nắp và nhất quán hơn so với việc thiết kế theo cảm tính.
Lưới cột
Đây là thể loại phổ biến nhất trên web-

site, hệ thống lưới bao gồm 12 cột, mỗi
cột sẽ có độ rộng là 60px, lề trái và phải
mỗi bên là 10 px, khoảng cách giữa các
cột là 20px. Ngoài ra, còn có thể linh hoạt
kết hợp các cột lại
Lưới Modular
Là hệ thống lưới mà không chỉ chia ra

nhiều cột mà còn chia nhiều hàng, tạo
thành các khối xếp đều nhau giúp cho
việc thiết kế linh hoạt hơn
Với hệ thống lưới này, khi chia các phần

trong website người thiết kế sẽ dễ dàng
hơn.
05
Button
1. Khái niệm
Nút (hay là button) là một thành phần giao diện đại diện cho các hành động mà người dùng có thể
thực hiện. Button cho phép người dùng thực hiện các hành động và lựa chọn chỉ với một lần nhấn.
Chúng rất quan trọng trong việc tạo ra các tương tác vững chắc và trải nghiệm người dùng tích cực.
2. Tác dụng
Mục đích chính của button là khiến người dùng thực hiện một hành động nhất định. Cơ bản, nút là
một điều khiển cho phép người dùng giao tiếp trực tiếp với sản phẩm kỹ thuật số và gửi các lệnh
cần thiết để đạt được một mục tiêu cụ thể.
Ví dụ, có thể là nhiệm vụ gửi email, mua sản phẩm, tải xuống một số dữ liệu hoặc bật trình phát và
nhiều hành động khác.
3. Cấu trúc
Button cơ bản bao gồm 3 yếu tố chính là

Tên(text label), ô bao hàm(container) và biểu
tượng(icon).
4. Các cấp bậc
Các cấp bậc của button thể hiện qua cách thức mà các button hiện nay tương tác và truyền tải nội
dung thông tin đến người dùng. Những button kêu gọi hành động được phân loại dựa trên chức
năng của chúng được sử dụng như thế nào, chứ không phải qua hình thức bên ngoài.
Kêu gọi hành động (CTA - Call to action)
Button ( Call To Action) hay còn được gọi với cái tên “nút kêu gọi hành động ”. Các nút CTA phải dễ
nhận thấy, thậm chí các nhà thiết kế phải khiến cho mọi người không thể cưỡng lại việc nhấp vào
nó. Đó là lý do tại sao chúng thường là các nút gọi hành động cụ thể (ví dụ: “Tìm hiểu thêm” hoặc
“Mua ngay bây giờ”).
Nút CTA có thể tạo ra mức tăng trưởng và

mục tiêu kinh doanh cơ bản cho việc mua
hàng. Khi một nút được thiết kế đủ hấp dẫn
để thu hút sự chú ý của khách hàng tiềm
năng, nó có thể lôi kéo họ nhấp và đi đến
bước tiếp theo như điền vào một mẫu liên
hệ ngắn hoặc đặt hàng trước một sản phẩm.
Tóm lại, những nút bấm CTA thường được

thiết kế nhằm kêu gọi người dùng hành động
ở mức cao nhất.
Hành động bậc 1 (Primary action)
Có một số điểm khác biệt giữa loại hai button

CTA và primary cần nên lưu ý
Call to action
CTA button trong giao diện thường được dùng
để khuyến khích khách hàng hành động theo
ý muốn của trang web, hay ứng dụng.
Trong khi đó, primary button, cũng thông qua

vẻ ngoài nổi bật, nhưng có công năng trợ
giúp hay hướng dẫn người dùng hoàn thành
Primary
mong muốn của họ.
Hành động bậc 2 (Secondary action) Hành động bậc 3 (Tertiary action)
Các hành động được cho là thứ cấp thường Ở cấp bậc này thường là các hành động “linh
nằm cạnh các nút primary như ‘go back’ nằm tinh” hay “nhỏ nhặt”, không có tính chất quan
cạnh ‘next’, hay ‘cancel’ nằm cạnh ‘submit’. trọng cao như ‘Add friend’, ‘Add new’, ‘Read
Nói cách khác, các nút bấm thứ cấp là những more’, ‘Edit’. Vậy nên kích thước của các
lựa chọn thay thế cho hành động primary. dạng button này có thể nhỏ, và không nên
gây quá nhiều sự chú ý.
5. Các kiểu button phổ biến
Solid button Round button Icon với Label button
Solid button chỉ đơn giản là Kiểu button được bo tròn hết Để làm rõ nghĩa hơn, một số
những button được tô màu cỡ tại các góc. icon button vẫn cần thêm một
đơn sắc. đoạn label để làm người dùng
chắn chắn hơn về chức năng,
cũng như để truyền tải ngữ
nghĩa trực quan hơn.
Line và ghost buttons
Line button ngược lại với solid, chúng chỉ dùng đường viền bên ngoài mà không được tô màu. Bên
cạnh đó, line button được nhận dạng như kiểu button sử dụng chữ đậm cho phần text và outline
trên nền sáng, còn một loại khác tên là ghost button thì dùng các màu sáng cho text và outline trên
nền tối.
Text link
Có rất nhiều cách để thể hiện một đoạn chữ chứa đường dẫn liên kết, có thể bằng cách sử dụng
màu, hay gạch chân, hoặc kết hợp cả hai.
Icon kết hợp với textlink
Một số liên kết ngoài có thể thể cần một button dùng riêng, và chúng thường không nằm trong đoạn
văn bản.
Icon buttons
Icon button là những button chỉ dùng icon để truyền đạt ý nghĩa chức năng. Về mặt thị giác chúng
mang lại nhiều khoảng trống cho giao diện hơn, nhưng đặc biệt cần lưu ý trong ngữ cảnh phức tạp
hoặc trường hợp đối tượng khách hàng là những người không am hiểu về công nghệ lắm, thì phần
lớn họ sẽ không hiểu các icon mang ý nghĩa gì.
6. Style và color
Color
Màu sắc trong thiết kế sản phẩm luôn có khả năng tiếp cận tất cả mọi người.
Bên cạnh đó, vấn đề tâm lý học trong màu sắc cũng nên cần được chú ý. Ví dụ như nút button
‘Delete’ màu xanh lá cây sẽ gây ra sự khó hiểu, hay nút ‘Save’ màu đỏ chẳng hạn.
Độ bo góc (Border-radius)
Trong đa số trường hợp các button nếu được bo tròn góc sẽ mang lại cảm giác thân thiện và vui
tươi. Các nút button với góc sắc nhọn thường mang lại cảm giác nghiêm túc hơn hẳn.
Hiệu ứng Shadow
Muốn tăng thêm phần tự nhiên và thu hút sự chú ý cho các nút button thì hiệu ứng bóng đổ là một
lựa chọn khá hiệu quả. Trong phong cách thiết kế Material Design, mỗi khi bạn rê chuột lên một nút
bấm thì hiệu ứng bóng đổ làm bạn có cảm giác nó ‘tiến gần’ đến bạn hơn.
Label styling
Ở phần này chủ yếu quan tâm đến việc chọn font sao cho người dùng dễ đọc nhất có thể. Sự tương
phản phải ở mức cao nhất, khiến người đọc nhận dạng rõ sự tách bạch giữa phần text và phần nền.
Kích thước font ở mức vừa phải, không quá to mà không quá nhỏ.
Vertical padding
Kích thước của button đóng một vai trò quan

trọng trải nghiệm người dùng. Lời khuyên ở
đây nên căn cứ vào line height của phần chữ
label để quyết định kích thước của button.
Chẳng hạn như, phần line height của label
20px, thì vertical padding nên khoảng 8px.
Có hai lý do cho việc này:

Một số người dùng thường xuyên zoom
chữ to hơn để đọc cho rõ, họ muốn
tăng kích thước font size nhưng không
muốn chữ bị nút button cắt ngang.
Đây là cách mà lập trình viên tạo ra nút but-

ton, họ sẽ tạo một ‘div container’, và sau đó
quyết định padding cho nó (chứ không phải
là height).
Horizontal padding
Thống nhất tất cả các button theo cùng một

độ rộng (width). Tuy nhiên cách làm này sẽ
làm hạn chế số lượng chữ đặt vào trong but-
ton.
Đặt cố định padding cho hai bên trái phải của

nút button. Đối với một số button chứa phần
text label ngắn (như ‘Go’) thì bạn nên quy
định cho nó một độ rộng tối thiểu nhất định
nào đó.
5. Các trạng thái phản hồi
Để người dùng cảm nhận trực quan hơn về button, ta nên thiết kế các trạng thái phản hồi mỗi khi
người dùng có dự định hoặc thực hiện một hành động nào đó với button, chẳng hạn như là click
chuột. Một điều cần chú ý nữa là nhiều trạng thái có thể diễn ra đồng thời cùng một lúc trên nút but-
ton, ví dụ như hover(rê chuột) và active.
Active & disabled state Hover & hover off
Một button được xem là đang ở trạng thái Trong trường hợp ở giao diện máy tính (desk-
active nếu có thể ‘click hay chạm’ (‘clickable/ top), một button nên được thiết kế trạng thái
touchable’) vào được. Bên cạnh đó, ở trường phản hồi rõ ràng để người dùng biết được
hợp ngược lại giả sử như người dùng chưa button đó có click được hay không (hover &
nhập tài khoản và mật khẩu vào, thì nút ‘đăng hover off).
nhập’ nên bị disable.
Focus Pressed
Đối với các giao diện sử dụng cách điều Trạng thái ‘pressed’ (ấn) tức là người dùng
hướng theo dạng ‘tab’ (tab navigation), thì đang bấm giữ trỏ chuột hay ngón tay tại nút
mỗi lần người dùng muốn chuyển sang ‘tab’ button. Nếu người dùng ‘releases’ (thả ra) thì
nào, là người dùng đang muốn ‘focus’ vào tab được tính như là một cái ‘clicked’.
đó.
Clicked
Người dùng cần một trạng thái sau khi họ đã

click một nút bấm, để họ có thể cảm thấy yên
tâm hơn.
6. Cách đặt tên
Những đoạn text đặt lên button cần rõ nghĩa và có sự thống nhất chặt chẽ với nhau.
Sử dụng động từ (verb) Các trường hợp (Case)
Hầu hết các button đều sử dụng động từ để All caps (viết hoa tất cả các ký tự): Dùng
diễn đạt ý nghĩa: ‘Save’, ‘Edit’, ‘Publish’. Thế trong những trường hợp trang nghiêm.
nhưng cần lưu ý là các từ như ‘Back’, ‘Next’
không phải là động từ, vậy nên trong một số Title case (viết hoa các ký tự đầu tiên
trường hợp ta cần kết hợp ‘verb’ và ‘noun’ của mỗi từ): Mang thiên hướng hơi trang
(danh từ), ví dụ ‘Next step’, ‘Save post’. trọng một chút nhưng không quá cầu kỳ.
Sentence case (viết hoa ký tự đầu tiên): Dùng

trong những trường hợp tạo cảm giác thân
thiện hay tự nhiên.
06
Icon
1. Khái niệm
Icon là một biểu tượng, hình tượng được sử dụng để đại diện cho một ứng dụng-phần mềm trên máy
tính, điện thoại hay các thiết bị điện tử giúp cho người dùng dễ dàng phân biệt các ứng dụng trên đó.
Icon được cấu tạo bởi: Line, Shape, Space, Meaning.
2. Phân loại
Theo chức năng
Clafifying icon dùng để giải nghĩa Decorative icon dùng để trang trí
Theo hình thức
Linear icon được tạo bởi dùng Glyph icon được tạo bởi mảng Flat icon là sự kết hợp của
nét Linear và Glyph icon nhưng
nhiều chi tiết hơn và tạo cảm
giác minh họa.
Theo ý nghĩa
Iconic icon theo nghĩa hoán dụ là có nét gần Symbolic icon theo nghĩa ẩn dụ là có nét
gũi. Ví dụ: Icon dành cho số điện thoại, mình tương đồng. Ví dụ: Cơ bản thì dấu tick không
không thể ngồi vẽ bàn phím điện thoại được liên quan trực tiếp đến check mark, cũng
vì nó khá chi chít, khó nhận diện, thay vào không tồn tại ngoài đời thật nhưng đây là một
đó mình sẽ vẽ ống nghe điện thoại bàn vì biểu tượng đã được quy ước, cùng mang ý
nhìn vào người ta sẽ dễ liên tưởng đến việc nghĩa hoàn thành việc gì đó, nên mình sử
gọi điện, phần này chúng ta cũng có thể thay dụng dấu tick để biểu tượng cho icon check
thành hình ảnh điện thoại (mặc dù số di động) mark.
3. Các lưu ý khi thiết kế icon
Xác định ý nghĩa Các lưu ý
Cân nhắc xem icon đó có dành cho một quy Icon nên được đặt trong hình vuông, cạnh
ước phổ biến hay không. chia hết cho 8, hoặc là số chẵn. Kích thước
thông thường là 8×8, 16×16, 24×24, 32×32,
Ví dụ: khi được yêu cầu vẽ icon về private thì 40×40, 48×48, 96×96, 128×128.
phổ biến nhất vẫn là hình ảnh ổ khóa. Vậy
ta không nên sử dụng những hình ảnh khác Áp dụng nguyên lý thị giác, Xác định các căn
mang tính đánh đố không liên quan. chỉnh hợp lý để tạo sự hài hòa giữa các icon.
Đồng thời đảm bảo đồng nhất về mảng hình
học, đường nét trong cùng 1 bộ icon. Các
icon dùng cho chức năng cần được thiết kế
cách điệu giúp cho việc dễ phân biệt và tăng
tính nhận diện tương tác cho người dùng.
07
Form
1. Khái niệm
Text field giúp người dùng nhập text vào một giao diện. Chúng thường xuất hiện dưới dạng form
hoặc dialogs.
2. Các quy tắc
Dễ nhận ra Rõ ràng Hiệu suất
Text field cần nổi bật và gợi ý Trạng thái giữa 2 text field nên Text field cần dễ hiểu để người
rằng người dùng có thể nhập khác nhau một cách rõ ràng dùng biết cần nhập thông tin
thông tin vào gì và báo lỗi gì
3. Các loại Text field
Text Field có hai loại: tràn viền và bo viền
Cả hai đều sử dụng một khối hộp để đựng text bên trong, cung cấp đủ dữ liệu cho người dùng, dễ
tìm thấy và dễ sử dụng trong một layout.
Text field tràn viền Text field bo viền
Text field tràn nhấn mạnh sự hiện diện của nó Text field bo viền không được nhấn mạnh
hơn với những components ở xung quanh. trong thiết kế, nhưng nó tối giản hóa thiết kế
Tránh thiết kế Textfield tràn trông giống 1 but- khiến người dùng dễ nhìn hơn.
ton.
Label
Label
Label
Các cách hiện thị thông tin nhập vào của người dùng
Dòng đơn Nhiều dòng Chiều dọc cố định
Không nên sử dụng cho Khi nhập vào nhiều hơn 1 Text field có chiều dọc cố
những nội dung dài dòng thì text field tự động định, khi vượt quá số dòng thì
giãn ra theo chiều dọc nó sẽ tự cuộn xuống
Label
Label Label
4. Các trạng thái
Hoạt động Đã nhấp chuột Lỗi và Thông báo lỗi
Chỉ dẫn Nhập thông tin
5. Cấu trúc
6. Khoảng cách giữa các thành phần
Label và khung Labek, text helper và khung
Thông báo lỗi và khung
7. Các lưu ý
Đối với Text field
Ưu tiên lựa chọn
Phù hợp nhất với phong cách thiết kế của website

Làm rõ mục tiêu UI
Không bị lẫn vào với những hạng mục khác trong giao diện
Hai loại text field tràn viền và

bo viền giống nhau về mặt
chức năng nên việc lựa chọn
sử dụng loại nào tùy thuộc
vào phong cách thiết kế.
Hoặc có thể kết hợp sử dụng

cả hai loại trong cùng một giao
diện nhưng sử dụng chúng ở
hai mục cách biệt nhau hoàn
toàn, không nên sử dụng lẫn
hoặc đặt chúng quá gần nhau.
Không nên làm gợi ý biến mất

khi người dùng tương tác với
text field vì vậy nên sử dụng
bật tắt phần gợi ý. Và chỉ gợi
ý tùy từng thành phần sao cho
hiệu quả.
Không đánh dấu tất cả các

mục thành bắt buộc người
dùng phải nhập thông tin vfi
điều này làm họ cảm thấy khó
chịu. Chỉ đánh dấu những
mục bắt buộc nhập thông tin
để họ cảm thấy thoải mái khi
đưa ra quyết định.
Đối với Form
Form vẫn là một trong những loại tương tác quan trọng nhất đối với người dùng trên web và trong
ứng dụng. Trên thực tế, các hình thức thường được coi là bước cuối cùng của hành trình hoàn thành
các mục tiêu.
Thiết kế Form có thể nhàm chán và người dùng luôn ghét mỗi khi phải điền chúng. Đó là lý do tại
sao mục tiêu thiết kế là làm cho quá trình điền vào biểu mẫu dễ dàng nhất có thể
08
Shadow
1. Khái niệm
Là vùng bóng tối được tạo ra do ánh sáng

phát ra từ một nguồn sáng trực tiếp bị cản trở
bởi một đối tượng tạo nên bóng đổ với hình
dáng và kèm theo độ mờ.
2. Vai trò
Thu hút sự chú ý của người dùng đến các yếu

tố nhất định bằng cách làm cho đối tượng nổi
bật và giúp tạo ra một cái nhìn độc đáo. Shad-
ow giúp cho trang web trở nên chân thực hơn.
Sự hấp dẫn qua các tương tác của ngườ

dùng với website như khi họ hover vào một
đối tượng nào đó, …
3. Cấu trúc
Shadow bao gồm 4 thành phần: Tọa độ X, Y,

Blur, Alpha, Color
09
Pop - up
1. Khái niệm
Pop-up là cửa sổ bật mở hay cửa sổ tự mở trên các trình duyệt internet. Các cửa sổ này có thể tự
mở mà không cần qua thao tác của người dùng.
Pop-up có rất nhiều kích thước khác nhau nhưng thường là không che hết toàn bộ màn hình.
2. Vai trò
Hiển thị các chức năng

khuyến mãi hoặc bán hàng
mới và thường được sử dụng
cho mục đích tiếp thị. Trong
trường hợp này, cửa sổ bật
lên có mục đích gián đoạn và
không có trong văn bản, vì
vậy chúng nên được sử dụng
một cách tiết kiệm, tránh lạm
dụng.
Chúc mừng khi người dùng

đạt được điều gì đó.
3. Cấu trúc
Bao gồm 6 thành phần:
Nút tắt: [1]

Hình ảnh: [2]
Tên Pop-up: [3]
Thông điệp: [4]
Primary button: [5]
Secondary button: [6]
4. Kích thước và thông số kỹ thuật

5. Hình ảnh
Có 3 kích thước của hình ảnh:

Nhỏ, vừa và lớn
Hình ảnh có thể là tĩnh hoặc

động, được nhúng link hoặc
cấu hình từ xa. Khi sử dụng
hình ảnh lớn thì tiêu đề trên
cùng sẽ bị ẩn.
10
Search bar
1. Khái niệm
Là một thanh tìm kiếm được sử dụng trên các website. Search bar thường là text field một dòng
hoặc biểu tượng tìm kiếm, hay biểu tượng tìm kiếm sẽ tự động chuyển thành text field khi được
người dùng nhấp vào
2. Vai trò
Tiếp nhận thông tin được người dùng nhập để tìm kiếm trong cơ sở dữ liệu
Là công cụ hỗ trợ nhanh chóng không thể thiếu giúp người dùng tìm kiếm thông tin của mọi website
3. Các trạng thái
Mặc định Không tìm thấy thông tin
Đã nhấp chuột Đang nhập thông tin

4. Cấu trúc
Search icon [1], Placeholder [2], Text input [3], Cursor [4], Clear button [5], Action button [6], Divider
[7], Search fileld [8], Border [9], Container [10]
3. Các lưu ý
Kích cỡ Search bar Kích cỡ Search bar
Độ dài hộp tìm kiếm trung bình là 29 ký tự và Hiển thị thanh tìm kiếm ở vị trí nổi bật để
độ dài Text input trung bình là 27 ký tự. người dùng dễ dàng nhìn thấy hộp tìm kiếm.
Điều này cực kỳ quan trọng trên các website
Một số kích cỡ của các website thương mại điện tử hoặc các trang đặt phòng.
50-59 ký tự: Nhấn mạnh hộp tìm kiếm, các Tránh ẩn hộp tìm kiếm trong nó khiến người
trang như: Amazon, Overstock. Buy, Staples dùng khó tìm thấy Ngoài ra, nên sử dụng văn
40-49 ký tự: LLBean, Nordstrom, Sears, bản hướng dẫn người dùng khi click chuột
Grainger vào ô tìm kiếm. Điều này sẽ giúp định hướng
30-39 ký tự: Netflix, QVC người dùng thực hiện hành động.
20-29 ký tự: Chiếm số lượng lớn nhất, các
trang như: Sony, Bestbuy, Hp, Dell, Walmart,
NewEgg, …
10-19 ký tự: Kích thước rất nhỏ. Costco, Tar-
get, Gap, Apple, …
Kích cỡ Search bar
Sử dụng icon kính lúp, đây là cách phổ biến nhất

giúp người dùng dễ dàng nhận ra thanh tìm
Tùy thuộc vào thể loại website mà có thể

dùng nút tìm kiếm dạng chữ.
11
Tab Menu
1. Khái niệm
Tab là vùng có thể nhấp ở đầu cửa sổ hiển

thị một trang hoặc vùng khác. Khi một tab
được nhấp, nội dung của tab được hiển thị và
mọi tab đang mở khác sẽ bị ẩn. Các tab cho
phép chuyển đổi giữa các tùy chọn trong một
chương trình, các tài liệu riêng biệt hoặc các
trang web.
2. Tác dụng
Các tab sắp xếp và cho phép điều hướng

giữa các nhóm nội dung có liên quan và ở
cùng cấp độ phân cấp.
Các tab có thể được ghép nối với các thành

phần như thanh ứng dụng trên cùng hoặc
được lồng trong các thành phần như thẻ và
trang tính.
4. Cấu trúc
Container [1], Icon [2], Nhãn văn bản [3], Tab

thông báo hoạt động [4], Biểu tượng hoạt
động[5], Nhãn văn bản hoạt động [6], Tab
item[7].
3. Các loại Tab Menu
Fixed tabs
Fixed tabs hiển thị đồng thời tất cả các tab trong một tập hợp. Chúng có tác dụng tốt nhất để
chuyển đổi nhanh chóng giữa các nội dung liên quan. Để điều hướng giữa các tab cố định, hãy
nhấn vào một tab riêng lẻ.
Các Fixed tab có chiều rộng bằng nhau, có thể

được tính như sau.Chiều rộng của màn hình chia
cho số tab Chiều rộng của nhãn tab rộng nhất
Các tab cố định hiển thị tất cả các tab trên

một màn hình, với mỗi tab có chiều rộng cố
định. Chiều rộng của mỗi tab được xác định
bằng cách chia số tab cho chiều rộng màn
hình. Không cuộn để hiển thị nhiều tab hơn;
bộ tab hiển thị đại diện cho các tab duy nhất
có sẵn.
Scrollable tab
Các tab có thể cuộn được hiển thị mà không có chiều rộng cố định. Chúng có thể cuộn, vì vậy một
số tab sẽ vẫn ở chế độ ngoài màn hình cho đến khi được cuộn.
Các tab có thể cuộn được hiển thị một tập hợp
con của tất cả các tab cùng một lúc. Chiều
rộng của mỗi tab được xác định bởi chiều
dài của nhãn văn bản ( text label) của nó.
Khi một tập hợp các tab không thể vừa trên
màn hình, hãy sử dụng các tab có thể cuộn.
Các tab có thể cuộn có thể sử dụng các nhãn
văn bản ( text label) dài hơn và số lượng tab
lớn hơn. Chúng được sử dụng tốt nhất để
duyệt trên giao diện cảm ứng.
12
Banner
1. Khái niệm
Banner chính là những bức ảnh có kích thước lớn nhỏ khác nhau, thường được đính kèm với một
nội dung hay thông điệp nào đó mà doanh nghiệp muốn gửi gắm đến khách hàng. Banner là một
hình thức phổ biến được sử dụng trong Marketing và bán hàng online, chúng được đăng tải lên các
website nhằm để thu hút những khách hàng tiềm năng, tăng lượng truy cập người dùng đến trang
web.
2. Vai trò
Sử dụng khi có một tập hợp lớn các mục để hiển thị, nhưng muốn người dùng chỉ tập trung sự chú
ý của họ vào một vài mục được chọn tại một thời điểm
Sử dụng khi muốn trêu chọc người dùng bằng cách cho họ biết rằng có nhiều mặt hàng có sẵn
hơn những gì đang hiển thị
Sử dụng khi không có đủ dung lượng để hiển thị tất cả các mục cùng một lúc.
Các dạng Indicator
Dot - chấm Line - đường Number - số
Tỷ lệ Banner
16:9 1:1 3:1

3. Cấu trúc
Indicator [1]: Không bắt buộc, làm theo 3

Indicator, tự động ẩn nếu chỉ có một hình
ảnh
Hình ảnh [2]: Cần thiết
Container [3]: Cần thiết
Tỷ lệ Rộng / Cao: 3: 1, 16: 9, 1: 1
3. Cấu trúc
Banner Indicator - dot Indicator - number
Nhấn vào để chuyển sang Tổng số hình ảnh = Tổng số Hiển thị số thứ tự theo tổng
banner khác chấm số hình ảnh (1/10)
Độ trễ: 3s Hình ảnh xuất hiện = Chỉ báo Khi hình ảnh được vuốt theo
Vòng lặp liên tục hình ảnh xuất hiện cách thủ công hoặc tự động
Chuyển hình ảnh này sang thay đổi, hiển thị số thứ tự
hình ảnh khác: thay đổi theo hình ảnh đó.
màu sắc chấm và thời gian
chuyển hình ảnh = 0
4. Kích thước phổ biến
Medium Rectangle Leaderboard Wider Skyscraper
300 × 250, <150kb 728 × 90, <150kb 160 × 600, <150kb

Billboard Vertical Banner
970 × 250, <150kb 120 × 240, <150kb
6. Các tính năng của các Banner quảng cáo
Đơn giản nhưng bắt mắt

Sử dụng các yếu tố và thiết kế tương tác
Kết hợp hài hòa với nội dung trên trang web
Có Kêu gọi Hành động (CTA)
Không nhồi nhét nhiều thông tin
13
Imageview
1. Khái niệm 2. Vai trò
Một trình giữ ảnh là một hình ảnh giả được Thành phần này không chỉ giúp chèn hình ảnh
thiết kế để thu hút sự chú ý đến nhu cầu về từ xa vào trang web mà còn hỗ trợ trạng thái
một hình ảnh thực tế tải (khung hoặc chỉ báo) và trạng thái trình giữ
chỗ khi không thể tải hình ảnh.
3. Cấu trúc
Icon: kích thước: 128, 80, 48, 40 , 24 , 16
Container: Background-color: placeholder,

chiều dài, chiều cao có thể thay đổi
Luồng của placeholder: Normal Luồng của placeholder: Failed

Kích thước
Size 24 Size 80
Size 40
Size 128
Size 48
2. Vai trò 2. Vai trò
Một website chuyên nghiệp và chuẩn xác là JPEG có dung lượng được tối ưu và chất
mục tiêu của mọi designer khi thiết kế web lượng ảnh tốt
Kích thước hình ảnh Slider ở trang chủ: Kích GIF chất lượng thấp hơn so với hình ảnh
thước ảnh Slider website: 1360 x 540 pixel JPEG và được sử dụng cho biểu tượng hoặc
hình ảnh trang trí và thường được sử dụng
Kích thước hình ảnh trong bài viết: Kích với loại hình ảnh động.
thước ảnh minh họa: 300 x 188 pixel
o PNG đang trở nên phổ biến hơn như
Kích thước ảnh chi tiết: 800 x 500 pixel là một thay thế cho GIF. Hỗ trợ nhiều màu sắc
hơn GIF, và đặc biệt là không bị tối giản dung
Kích thước hình ảnh bên trong sản phẩm: đối lượng, chất lượng như JPEG.
với hình ảnh minh họa là 300 x 400 pixel, với
hình ảnh chi tiết thì lớn gấp đôi là 600 x 800
pixel

Ban Dan Trang

Uploaded by

Copyright:

Available Formats

You might also like

Ban Dan Trang

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ban Dan Trang

Uploaded by

Copyright:

Available Formats

STYLE GUIDE DÀNH CHO WEBSITE - N1 1

2 STYLE GUIDE DÀNH CHO WEBSITE - N1

Danh sách thành viên và phân chia công việc

00 Tổng quan về Style Guide

Khái niệm Style guide 5

1. Khái niệm Style Guide

2. Khái niệm style guide trong thiết kế website

Tùy vào tính chất của trang web,

Màu chính thường là màu

Màu phụ thường được sử

Thông thường, một bảng màu

Vai trò của

Color 02 thương hiệu hiệu quả

Màu thương hiệu

Màu nhấn chính của sản

Màu chủ đạo

Màu nhấn chính của sản phẩm, được sử

Mỗi màu sắc đều có một số các màu tương

Màu chức năng

Bánh xe màu sắc Cân bằng màu trung tính

Tâm lý học màu sắc Sự kết hợp màu sắc

Typography là nghệ thuật sắp xếp, thiết

Typography trong thiết kế website là quá trình

Typography thổi hồn vào các con chữ, đưa

Typography giúp việc đọc các con chữ, các

Typography mang đến sự cuốn hút và tạo ấn

3. Các font phổ biến cho website

Roboto Open Sans

Source Sans Pro Lora

Khoảng cách giữa các đoạn

Sử dụng khoảng cách đoạn văn bằng kích

Khoảng cách trong đoạn

Khoảng cách trong mỗi nhóm

Khoảng cách trong mỗi nhóm: cuối phần nội

5. Cấu trúc Text style

2. Các kiểu thiết kế Layout

Layout dạng lưới Ảnh chiếm 2/3 Ảnh chiếm 1/3

Dạng 3 khối hộp Dạng 5 khối hộp

2. Các kiểu thiết kế Layout

Tuy nhiên, khi máy tính có độ phân giải cao

Đối với fixed layout, kích thước chuẩn khi

Độ phân giải 1024 được xem là độ phân giải

Fluid layout hay còn gọi là liquid layout sử

Đây là thể loại phổ biến nhất trên web-

Là hệ thống lưới mà không chỉ chia ra

Với hệ thống lưới này, khi chia các phần

Button cơ bản bao gồm 3 yếu tố chính là

4. Các cấp bậc

Kêu gọi hành động (CTA - Call to action)

Nút CTA có thể tạo ra mức tăng trưởng và

Tóm lại, những nút bấm CTA thường được

Hành động bậc 1 (Primary action)

Có một số điểm khác biệt giữa loại hai button

Trong khi đó, primary button, cũng thông qua

5. Các kiểu button phổ biến

Solid button Round button Icon với Label button

Line và ghost buttons

Icon kết hợp với textlink