Translated from English to Vietnamese - www.onlinedoctranslator.

com
nội dung

Bắt đầu từ số không 6

Bắt đầu với một tính năng, không phải bố cục. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Chi tiết đến sau. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Đừng thiết kế quá nhiều. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Chọn một tính cách. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Giới hạn sự lựa chọn của bạn. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Thứ bậc là tất cả 29

Không phải tất cả các yếu tố đều bình đẳng. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

Kích thước không phải là tất cả. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

Không sử dụng văn bản màu xám trên nền màu. . . . . . . . . . . . . . . . . . . . . 36

Nhấn mạnh bằng cách không nhấn mạnh. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

Nhãn là một phương sách cuối cùng. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

Tách biệt hệ thống phân cấp trực quan khỏi hệ thống phân cấp tài liệu. . . . . . . . . . . . . . . 46

Cân bằng trọng lượng và độ tương phản. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

 Ngữ nghĩa là thứ yếu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

Bố cục và Khoảng cách 55

Bắt đầu với quá nhiều khoảng trắng. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

Thiết lập một hệ thống khoảng cách và kích thước. . . . . . . . . . . . . . . . . . . . . . . . . . 60

Bạn không cần phải lấp đầy toàn bộ màn hình. . . . . . . . . . . . . . . . . . . . . . . . . . 65

Lưới được đánh giá cao. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

Kích thước tương đối không quy mô. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

Tránh khoảng cách mơ hồ. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

thiết kế văn bản 87

Thiết lập thang đo loại. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88

Sử dụng phông chữ tốt. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

Giữ chiều dài dòng của bạn trong kiểm tra. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

Đường cơ sở, không phải trung tâm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

Line-height tỷ lệ thuận. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

Không phải mọi liên kết đều cần một màu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109

Phù hợp với khả năng đọc trong tâm trí. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

Sử dụng khoảng cách giữa các chữ cái một cách hiệu quả. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

Làm việc với Màu sắc 118

Mương hex cho HSL. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

Bạn cần nhiều màu sắc hơn bạn nghĩ. . . . . . . . . . . . . . . . . . . . . . . . . . . 123

Xác định sắc thái của bạn lên phía trước. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129

Đừng để sự nhẹ nhàng giết chết sự bão hòa của bạn. . . . . . . . . . . . . . . . . . . . . . . . . . 133

Màu xám không nhất thiết phải là màu xám. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

Có thể truy cập không có nghĩa là xấu xí. . . . . . . . . . . . . . . . . . . . . . . . . . 142

Đừng chỉ dựa vào màu sắc. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146

Tạo độ sâu 149

Giả lập một nguồn ánh sáng. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150

Sử dụng bóng để truyền đạt độ cao. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158

Bóng tối có thể có hai phần. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163

Ngay cả những thiết kế phẳng cũng có thể có chiều sâu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167

Chồng chéo các phần tử để tạo các lớp. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170

Làm việc với hình ảnh 173

Sử dụng hình ảnh tốt. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174

Văn bản cần có độ tương phản nhất quán. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176

Tất cả mọi thứ có một kích thước dự định. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181

Coi chừng nội dung do người dùng tải lên. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187

Hoàn thiện 191

Tăng tốc mặc định. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192

Thêm màu sắc với đường viền nhấn. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195

Trang trí hình nền của bạn. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198

Đừng bỏ qua trạng thái trống rỗng. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203

Sử dụng ít đường viền hơn. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206

Suy nghĩ vượt khuôn khổ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210

Lên hạng 215

Bắt đầu từ số không
Bắt đầu với một tính năng, không phải bố cục

Khi bạn bắt đầu thiết kế một ý tưởng ứng dụng mới, bạn sẽ thiết kế cái gì trước tiên?
Nếu đó là thanh điều hướng ở đầu trang thì bạn đang mắc lỗi.

Cách dễ nhất để thấy mình thất vọng và bế tắc khi làm việc trên một thiết kế mới
là bắt đầu bằng cách cố gắng “thiết kế ứng dụng”. Khi hầu hết mọi người nghĩ về
việc “thiết kế ứng dụng”, họ đang nghĩ vềvỏ bọc.

Nó nên có một điều hướng hàng đầu, hoặc một thanh bên?

Các mục điều hướng nên ở bên trái hay bên phải?

Nội dung trang nên ở trong vùng chứa hay nội dung phải có chiều rộng đầy đủ?

Logo nên đi đâu?

Vấn đề là, một “ứng dụng” thực sự là một tập hợp cácđặc trưng. Trước khi bạn thiết kế
một số tính năng, bạn thậm chí không có thông tin cần thiết để đưa ra quyết định về
cách hoạt động của điều hướng. Không có gì ngạc nhiên khi nó bực bội!
Bắt đầu với một tính năng, không phải bố cục số 8

Thay vì bắt đầu với trình bao, hãy bắt đầu với một phần chức năng thực tế.

Ví dụ: giả sử bạn đang xây dựng dịch vụ đặt vé máy bay. Bạn có thể bắt đầu với
tính năng như “tìm kiếm chuyến bay”.

Giao diện của bạn sẽ cần:

• Một trường cho thành phố khởi hành

• Một trường cho thành phố đích

• Một trường cho ngày khởi hành

• Một trường cho ngày trở lại

• Một nút để thực hiện tìm kiếm

Bắt đầu với điều đó.

Bắt đầu với một tính năng, không phải bố cục 9

Chết tiệt, bạn thậm chí có thể không cần những thứ khác nữa - nó đã hoạt động cho

Google.
Chi tiết đến sau

Trong những giai đoạn đầu tiên của việc thiết kế một tính năng mới, điều quan trọng là bạn

không nên đưa ra những quyết định cấp thấp về những thứ như kiểu chữ, đổ bóng, biểu tượng,

v.v.

Những thứ đó cuối cùng sẽ quan trọng, nhưng nó không quan trọng ngay bây giờ.

Nếu bạn gặp khó khăn khi bỏ qua các chi tiết khi làm việc trong môi trường có độ
trung thực cao như trình duyệt hoặc công cụ thiết kế yêu thích của mình, một mẹo mà
Jason Fried của Basecamp thích sử dụng là thiết kế trên giấy bằng Sharpie dày.

Không thể bị ám ảnh bởi những chi tiết nhỏ với Sharpie, vì vậy đây có thể là một cách tuyệt

vời để nhanh chóng khám phá một loạt các ý tưởng bố cục khác nhau.

giữ màu

Ngay cả khi bạn đã sẵn sàng tinh chỉnh một ý tưởng với độ trung thực cao hơn, hãy chống

lại sự cám dỗ để giới thiệu màu sắc ngay lập tức.

Chi tiết đến sau 11

Bằng cách thiết kế theo thang độ xám, bạn buộc phải sử dụng khoảng cách, độ tương phản và kích thước để thực

hiện tất cả các công việc nặng nhọc.

Nó khó hơn một chút, nhưng bạn sẽ có một giao diện rõ ràng hơn với hệ thống
phân cấp mạnh mẽ, dễ dàng cải thiện bằng màu sắc sau này.
Chi tiết đến sau 12

Đừng đầu tư quá mức

Toàn bộ quan điểm của việc thiết kế với độ trung thực thấp là để có thể di chuyển nhanh, vì vậy

bạn có thể bắt đầu xây dựng đồ thật càng sớm càng tốt.

Bản phác thảo và khung dây chỉ dùng một lần — người dùng không thể làm bất cứ điều

gì với các mô hình tĩnh. Sử dụng chúng để khám phá ý tưởng của bạn và để chúng lại sau

khi bạn đưa ra quyết định.

Đừng thiết kế quá nhiều

Bạn không cần thiết kế mọi tính năng đơn lẻ trong ứng dụng trước khi chuyển sang triển
khai; trên thực tế, sẽ tốt hơn nếu bạn không làm.

Tìm ra cách mọi tính năng trong một sản phẩm sẽ tương tác và mọi trường hợp cạnh
sẽ trông như thế nào thực sự khó, đặc biệt là trong phần tóm tắt.

Màn hình này sẽ trông như thế nào nếu người dùng có 2000 địa chỉ liên hệ?

Thông báo lỗi nên đi đâu trong biểu mẫu này?

Lịch này sẽ trông như thế nào khi có hai sự kiện được lên lịch cùng một lúc?
Đừng thiết kế quá nhiều 14

Bạn đang khiến bản thân thất vọng khi cố gắng tìm ra thứ này chỉ bằng một
công cụ thiết kế và trí tưởng tượng của bạn.

Làm việc theo chu kỳ

Thay vì thiết kế mọi thứ từ trước, hãy làm việc theo chu kỳ ngắn. Bắt đầu bằng cách thiết kế

một phiên bản đơn giản của tính năng tiếp theo mà bạn muốn xây dựng.

Khi bạn hài lòng với thiết kế cơ bản,biến nó thành sự thật.

Bạn có thể sẽ gặp phải một số phức tạp không mong muốn trong quá trình thực hiện, nhưng đó

chính là vấn đề — việc khắc phục các sự cố thiết kế trong một giao diện mà bạn thực sự có thể sử

dụng sẽ dễ dàng hơn nhiều so với việc tưởng tượng trước mọi trường hợp cạnh.

Lặp lại thiết kế đang hoạt động cho đến khi không còn vấn đề nào cần giải quyết nữa,
Đừng thiết kế quá nhiều 15

sau đó quay lại chế độ thiết kế và bắt đầu làm việc với tính năng tiếp theo.

Đừng bị choáng ngợp khi làm việc trong phần tóm tắt. Xây dựng đồ thật càng sớm càng tốt

để trí tưởng tượng của bạn không phải làm tất cả những công việc nặng nhọc.

Hãy là một người bi quan

Không ngụ ý chức năng trong thiết kế của bạn mà bạn chưa sẵn sàng xây dựng.

Ví dụ: giả sử bạn đang làm việc trên hệ thống nhận xét cho một công cụ quản lý dự
án. Bạn biết rằng một ngày nào đó, bạn muốn người dùng có thể đính kèm tệp vào
nhận xét của họ, vì vậy bạn đưa vào phần tệp đính kèm trong thiết kế của mình.
Đừng thiết kế quá nhiều 16

Bạn đi sâu vào triển khai chỉ để khám phá ra rằng các tệp đính kèm hỗ trợ sẽ được
nhiều nhiều công việc hơn bạn dự kiến. Không có cách nào bạn có thời gian để
hoàn thành nó ngay bây giờ, vì vậy toàn bộ hệ thống nhận xét sẽ nằm ở phía sau
trong khi bạn quan tâm đến các ưu tiên khác.

Vấn đề là, một hệ thống nhận xét không có tệp đính kèm vẫn tốt hơn là không
có hệ thống nhận xét nào cả, nhưng vì bạn đã lên kế hoạch đưa nó vào ngay từ
ngày đầu tiên nên bạn không có gì để gửi.

Khi bạn đang thiết kế một tính năng mới,hy vọng nó sẽ khó xây dựng. Việc
thiết kế phiên bản hữu ích nhỏ nhất mà bạn có thể gửi đi sẽ giảm đáng kể rủi
ro đó.

Nếu một phần của một tính năng là một "nice-to-have",thiết kế nó sau. Trước tiên hãy xây

dựng phiên bản đơn giản và bạn sẽ luôn có thứ gì đó để dựa vào.
Chọn cá tính

Mỗi thiết kế có một số loại cá tính. Một trang web ngân hàng có thể cố gắng giao tiếpchắc

chắnVàchuyên nghiệp, trong khi một công ty khởi nghiệp mới hợp thời trang có thể có
thiết kế tạo cảm giácvui vẻVàvui tươi.

Nhìn bề ngoài, việc tạo cho một thiết kế một cá tính cụ thể nghe có vẻ trừu tượng và gợn sóng,

nhưng rất nhiều trong số đó được xác định bởi một số yếu tố cụ thể, vững chắc.
Chọn cá tính 18

lựa chọn phông chữ

Kiểu chữ đóng một vai trò quan trọng trong việc xác định cảm giác của một thiết kế.

Nếu bạn muốn có một cái nhìn thanh lịch hoặc cổ điển, bạn có thể muốn kết hợp kiểu chữ

serif trong thiết kế của mình:

Để có vẻ vui tươi, bạn có thể sử dụng kiểu chữ sans serif tròn:
Chọn cá tính 19

Nếu bạn muốn có một cái nhìn đơn giản hơn, hoặc muốn dựa vào các yếu tố khác để thể hiện cá tính,

thì một kiểu chữ sans serif trung tính sẽ rất phù hợp:

Màu sắc

Có rất nhiều khoa học về tâm lý của màu sắc, nhưng trên thực tế, bạn thực sự
chỉ cần chú ý đến cảm giác của các màu sắc khác nhau đối với bạn.

Màu xanh an toàn và quen thuộc — không ai từng phàn nàn về màu xanh:
Chọn cá tính 20

Vàng có thể nói là “đắt” và “tinh vi”:

Màu hồng vui hơn một chút và không quá nghiêm trọng:

Trong khi cố gắng chọn màu bằng cách sử dụngchỉ mộttâm lý học không phải là siêu thực
tế — phần lớn nó chỉ là về những gì có vẻ tốt đối với bạn — có thể hữu ích khi nghĩ đến khi
bạn đang cố gắng hiểuTại saobạn nghĩ rằng một màu sắc là phù hợp.
Chọn cá tính 21

Bán kính đường viền

Nghe có vẻ là một chi tiết nhỏ, nếu và mức độ bạn làm tròn các góc trong thiết kế
của mình có thể có tác động lớn đến cảm giác tổng thể.

Bán kính đường viền nhỏ khá trung lập và bản thân nó không thực sự
truyền đạt nhiều tính cách:

Bán kính đường viền lớn bắt đầu mang lại cảm giác vui nhộn hơn:
Chọn cá tính 22

…trong khi không có bán kính đường viền nào cho cảm giác nghiêm túc hoặc trang trọng hơn rất nhiều:

Dù bạn chọn gì, điều quan trọng là phải nhất quán. Trộn các góc vuông với
các góc tròn trong cùng một giao diện hầu như luôn trông tệ hơn là gắn bó
với cái này hay cái kia.

Ngôn ngữ

Mặc dù không phải là một kỹ thuật thiết kế trực quan, nhưng những từ bạn sử dụng
trong giao diện có ảnh hưởng lớn đến tính cách tổng thể.

Sử dụng giọng điệu ít cá nhân hơn có thể mang lại cảm giác trang trọng hoặc chuyên nghiệp hơn:
Chọn cá tính 23

…trong khi sử dụng ngôn ngữ thân thiện hơn, bình thường hơn làm cho trang web có cảm giác thân

thiện hơn:

Các từ ở khắp mọi nơi trong giao diện người dùng và việc chọn đúng từ cũng quan trọng (nếu

không muốn nói là quan trọng hơn) so với việc chọn đúng màu hoặc kiểu chữ.

Quyết định những gì bạn thực sự muốn

Trong nhiều trường hợp, bạn có thể chỉ có cảm giác ruột thịt về tính cách mà bạn đang

theo đuổi. Nhưng nếu không, một cách tuyệt vời để đơn giản hóa quyết định là xem xét các

trang web khác được sử dụng bởi những người mà bạn muốn tiếp cận.

Nếu chúng chủ yếu là “công việc kinh doanh nghiêm túc”, thì có lẽ đó cũng là cách trang web

của bạn trông giống như vậy. Nếu họ vui tươi hơn với một chút hài hước, có lẽ đó là một

hướng đi tốt hơn.

Chỉ cần cố gắng không vay quá nhiều từ các đối thủ cạnh tranh trực tiếp, bạn không muốn trông

giống như một phiên bản hạng hai của một thứ gì đó khác.
Giới hạn lựa chọn của bạn

Có hàng triệu màu sắc và hàng nghìn phông chữ để lựa chọn về mặt lý thuyết
nghe có vẻ hay, nhưng trên thực tế, đó thường là một lời nguyền làm tê liệt.

Và đó không chỉ là phông chữ và màu sắc — bạn có thể dễ dàng lãng phí
thời gian cho hầu hết mọi quyết định thiết kế nhỏ.

Văn bản này nên là 12px hay 13px?

Bóng hộp này nên có độ mờ 10% hay độ mờ 15%?

Hình đại diện này nên cao 24px hay 25px?

Tôi nên sử dụng độ dày phông chữ trung bình cho nút này hay chữ nửa đậm?

Dòng tiêu đề này nên có lề dưới là 18px hay 20px?

Khi bạn đang thiết kế mà không bị ràng buộc, việc ra quyết định là một
cực hình vì sẽ luôn có nhiều hơn một lựa chọn đúng.

Ví dụ: tất cả các nút này đều có màu nền khác nhau, nhưng gần như không
thể phân biệt được sự khác biệt giữa chúng nếu chỉ nhìn vào chúng.

Làm thế nào bạn có thể đưa ra quyết định tự tin nếu không có lựa chọn nào trong số này thực

sự là lựa chọn tồi?

Giới hạn lựa chọn của bạn 25

Xác định hệ thống trước

Thay vì chọn thủ công các giá trị từ một nhóm vô hạn bất cứ lúc nào bạn cần đưa ra quyết

định,bắt đầu với một tập hợp các tùy chọn nhỏ hơn.

Đừng với tới công cụ chọn màu mỗi khi bạn cần chọn một sắc thái xanh lam
mới — hãy chọn trong số 8-10 sắc thái đã chọn trước.

Tương tự như vậy, không điều chỉnh kích thước phông chữ từng pixel một cho đến khi nó trông hoàn hảo. Xác

định trước tỷ lệ loại hạn chế và sử dụng tỷ lệ đó để đưa ra bất kỳ quyết định nào về kích thước phông chữ trong

tương lai.
Giới hạn lựa chọn của bạn 26

Khi bạn xây dựng các hệ thống như thế này, bạn chỉ cần thực hiện công việc khó khăn là chọn

các giá trị ban đầumột lầnthay vì mỗi khi bạn thiết kế một giao diện người dùng mới. Sẽ tốn

nhiều công sức hơn một chút, nhưng nó đáng giá — nó sẽ giúp bạn đỡ phải mệt mỏi khi phải

quyết định sau này.

Thiết kế theo quá trình loại bỏ

Khi bạn đang thiết kế bằng cách sử dụng một tập hợp các giá trị bị ràng buộc, việc ra quyết

định sẽ dễ dàng hơn rất nhiều vì có ít lựa chọn “đúng” hơn rất nhiều.

Ví dụ: giả sử bạn đang cố chọn kích thước cho một biểu tượng. Bạn đã xác định trước một tỷ

lệ kích thước trong đó các tùy chọn kích thước từ nhỏ đến trung bình duy nhất của bạn là

12px, 16px, 24px và 32px.

Để chọn tùy chọn tốt nhất, hãy bắt đầu bằng cách đoán xem tùy chọn nào trông
đẹp nhất, có thể là 16px. Sau đó thử các giá trị ở hai bên (12px và 24px) để so
sánh.

Rất có thể, hai trong số những lựa chọn đó sẽ giống nhưrõ ràngNhững lựa chọn tồi tệ. Nếu đó

là các tùy chọn ở bên ngoài, thì bạn đã hoàn tất — tùy chọn ở giữa là lựa chọn tốt duy nhất.
Giới hạn lựa chọn của bạn 27

Nếu một trong các tùy chọn bên ngoài có vẻ tốt nhất, hãy thực hiện một phép so sánh khác bằng cách

sử dụng tùy chọn đó làm giá trị “ở giữa” và đảm bảo rằng không có lựa chọn nào tốt hơn.

Cách tiếp cận này phù hợp với mọi thứ mà bạn đã xác định một hệ thống. Khi bạn bị giới hạn

trong một tập hợp các tùy chọn mà tất cả đều có vẻ khác biệt rõ rệt, việc chọn tùy chọn tốt nhất

là một miếng bánh.

Hệ thống hóa mọi thứ

Bạn càng có nhiều hệ thống, bạn càng có thể làm việc nhanh hơn và bạn càng ít phải đoán
già đoán non về các quyết định của mình.

Bạn sẽ muốn các hệ thống cho những thứ như:

• Cỡ chữ

• Trọng lượng phông chữ

• Chiều cao giữa các dòng

• Màu sắc

• Lề

• Đệm

• Chiều rộng

• Chiều cao

• Bóng hộp
Giới hạn lựa chọn của bạn 28

• Bán kính biên giới

• Chiều rộng biên giới

• Độ mờ

…và bất kỳ thứ gì khác mà bạn gặp phải khi có cảm giác như bạn đang loay hoay với một quyết

định thiết kế cấp thấp.

Bạn không cần phải xác định trước tất cả những thứ này, chỉ cần đảm bảo rằng bạn
đang tiếp cận thiết kế với tư duy tập trung vào hệ thống. Tìm kiếm cơ hội để giới
thiệu các hệ thống mới khi bạn đưa ra quyết định mới và cố gắng tránh phải đưa ra
cùng một quyết định nhỏ hai lần.

Thiết kế với các hệ thống sẽ là một chủ đề lặp đi lặp lại xuyên suốt cuốn sách này, và
trong các chương sau chúng ta sẽ nói về việc xây dựng nhiều hệ thống này một cách chi
tiết hơn.