Tôi đã thay đổi hoàn toàn kỹ năng thiết kế Front-End của mình ~ Giờ đây giao diện UI của tôi không còn trông như hàng AI rẻ tiền nữa

1Kỹ năng Thiết kế Frontend
2
3Tạo ra các giao diện frontend đẳng cấp, mang dấu ấn riêng, được tạo nên bởi một nhà thiết kế tài năng, chứ không phải là sản phẩm trung bình từ các mẫu template.
4
5Tiêu chí Thành công
6
7Bản sắc hình ảnh riêng biệt với câu chuyện rõ ràng và yếu tố đặc trưng
8
9Chức năng đạt chuẩn sản xuất với đầy đủ trạng thái và hành vi tương thích
10
11Khả năng tiếp cận mặc định với ý định tuân thủ WCAG AA
12
13Hệ thống thiết kế dựa trên token thay vì tạo kiểu rời rạc
14
15Không phụ thuộc vào các công thức AI dễ nhận biết
16
17Trước khi Viết Code
181. Hiểu Bối cảnh
19
20Mục đích
21Giao diện này giải quyết vấn đề gì và ai sử dụng nó
22
23Ràng buộc
24Framework, ngân sách hiệu năng, yêu cầu về khả năng tiếp cận
25
26Điểm neo Thương hiệu (nếu được cung cấp)
27Tính từ, tài liệu tham khảo, các điều cấm kỵ
28
29Nếu thiếu thông tin quan trọng, chỉ yêu cầu những gì cản trở việc thực thi chính xác.
30
312. Cam kết với một Phương hướng Nghệ thuật Triệt để
32
33Chọn một thái cực và thực hiện nó một cách chính xác.
34Chủ nghĩa tối đa táo bạo và chủ nghĩa tối giản tinh tế đều hiệu quả. Tính chủ đích là bắt buộc.
35
36Các ví dụ về định hướng chỉ để tham khảo:
37
38Tạp chí biên tập
39Lưới bất đối xứng, thẩm quyền kiểu chữ, khoảng trắng ấn tượng
40
41Công nghiệp Tân Brutalist
42Các cạnh cứng, nhãn tiện dụng, vật liệu thô
43
44Sang trọng Tinh tế
45Kiềm chế, vật liệu cao cấp, sự phức tạp vô hình
46
47CRT Phục cổ Tương lai
48Dòng quét, hình học góc cạnh, ánh sáng phosphor
49
50Xúc giác Hữu cơ
51Vân giấy, hình dạng bất thường, hơi ấm thủ công
52
53Nổi loạn Zine Punk
54Năng lượng cắt dán, kết cấu thô, sự cố ý không hoàn hảo
55
56Chính xác Bauhaus
57Kỷ luật hình học, rõ ràng chức năng, màu cơ bản
58
59Siêu thực Ảo giác
60Hỗn loạn có kiểm soát, tương phản sống động, hình thức uyển chuyển
61
62QUAN TRỌNG
63Không có hai thiết kế nào nên hội tụ về cùng một sự lựa chọn.
64Thay đổi chủ đề, phông chữ, bảng màu, bố cục và mức năng lượng giữa các lần tạo.
65
663. Phát minh ra một Yếu tố Đặc trưng
67
68Mỗi bản dựng phải bao gồm một điểm nhấn khó quên, có chức năng, không chỉ để trang trí.
69
70Các yếu tố đặc trưng hợp lệ bao gồm:
71
72Đường viền biến hình phản ứng với cuộn hoặc trạng thái
73
74Anh hùng kiểu chữ với khoảng cách chữ có chủ đích và nhịp điệu quang học
75
76Mẫu điều hướng với logic không gian và hiệu ứng hoạt hình
77
78Hành vi con trỏ tùy chỉnh giúp cải thiện khả năng khám phá
79
80Hệ thống kết cấu hỗ trợ phân cấp và trọng tâm
81
82Ngôn ngữ trực quan hóa dữ liệu có thương hiệu
83
84Hiệu ứng tiết lộ kích hoạt bằng cuộn với thời gian dàn dựng
85
86Design Tokens
87
88Xác định token trước khi bố cục.
89
90:root {
91  /* Color */
92  --color-bg:;
93  --color-surface:;
94  --color-text:;
95  --color-muted:;
96  --color-accent:;
97  --color-focus:;
98  --color-success:;
99  --color-warning:  ;
100  --color-danger:;
101
102  /* Typography */
103  --font-display:;
104  --font-body:;
105  --font-mono:;
106  --text-xs:;
107  --leading-xs:;
108  --text-sm:;
109  --leading-sm:;
110  --text-base:;
111  --leading-base:;
112  --text-lg:;
113  --leading-lg:;
114  --text-xl:;
115  --leading-xl:;
116  --text-2xl:;
117  --leading-2xl:;
118
119  /* Spacing */
120  --space-1:;
121  --space-2:;
122  --space-3:;
123  --space-4:;
124  --space-6:;
125  --space-8:;
126
127  /* Radius and Shadow */
128  --radius-sm:;
129  --radius-md:;
130  --radius-lg:;
131  --shadow-sm:;
132  --shadow-md:;
133  --shadow-lg:;
134
135  /* Motion */
136  --duration-fast:;
137  --duration-base:;
138  --duration-slow:;
139  --ease-out:;
140  --ease-spring:;
141}
142
143Quy tắc Thẩm mỹ
144Kiểu chữ
145
146Các quy tắc cứng:
147
148Tránh Inter, Roboto, Arial và các phông chữ hệ thống mặc định
149
150Kết hợp một phông chữ hiển thị cá tính với một phông chữ thân văn tinh tế
151
152Điều chỉnh khoảng cách chữ và chiều cao dòng một cách có chủ đích
153
154Sử dụng độ tương phản kiểu chữ như một công cụ thiết kế chính
155
156Cung cấp các phông chữ dự phòng mạnh mẽ để bảo toàn tông màu
157
158Màu sắc và Bảng màu
159
160Các quy tắc cứng:
161
162Không có biểu tượng cảm xúc (emoticon) ở bất kỳ đâu trên trang web.
163
164Không có gradient tím mặc định theo phong cách SaaS trắng
165
166Một tông màu chủ đạo cộng với một đến ba điểm nhấn với vai trò xác định
167
168Màu tương phản và màu trọng tâm phải có chức năng
169
170Chế độ tối chỉ khi nó củng cố định hướng
171
172Bố cục và Sáng tác
173
174Các quy tắc cứng:
175
176Không có hero trung tâm có thể đoán trước, theo sau là ba thẻ và hàng biểu tượng
177
178Sử dụng logic lưới nhất quán cộng với ít nhất một lần phá vỡ lưới có chủ đích
179
180Sự bất đối xứng được khuyến khích khi nó làm rõ hệ thống phân cấp
181
182Thiết kế đáp ứng phải bảo tồn câu chuyện và nhịp điệu
183
184Chuyển động
185
186Các quy tắc cứng:
187
188Chuyển động truyền đạt cấu trúc, phản hồi và khả năng cung cấp
189
190Ưu tiên một chuỗi chuyển tiếp được dàn dựng hơn là các hiệu ứng vi mô rải rác
191
192Hiệu ứng tiết lộ khi cuộn chỉ khi chúng thêm ý nghĩa
193
194Tôn trọng tùy chọn giảm chuyển động với một phương án dự phòng sạch sẽ
195
196Ưu tiên transform và opacity để đảm bảo hiệu năng
197
198Kết cấu và Chất liệu
199
200Các quy tắc cứng:
201
202Tránh nền phẳng vô trùng trừ khi sự khắc khổ là có chủ đích
203
204Kết cấu phải hỗ trợ hệ thống phân cấp, không thêm nhiễu
205
206Ngôn ngữ chiều sâu phải nhất quán trong toàn bộ hệ thống
207
208Hiệu ứng kính chỉ khi cam kết đầy đủ và dễ đọc
209
210Các kỹ thuật được phép:
211
212Lớp phủ hạt tinh tế
213
214Các mẫu SVG tham số
215
216Gradient điều khiển bằng nhiễu
217
218Bóng gấp giấy
219
220Dòng quét CRT cho chủ đề cổ điển
221
222Kết cấu canvas thủ tục khi hiệu suất cho phép
223
224Trạng thái Tương tác Bắt buộc
225
226Mọi phần tử tương tác phải thực hiện:
227
228Mặc định
229
230Di chuột (Hover)
231
232Đang hoạt động hoặc đã nhấn (Active/Pressed)
233
234Hiển thị tiêu điểm (Focus visible)
235
236Vô hiệu hóa (Disabled)
237
238Đang tải (Loading)
239
240Lỗi (Error)
241
242Trạng thái rỗng (Empty state) nếu có thể áp dụng
243
244Yêu cầu về Sản xuất
245Khả năng Tiếp cận
246
247Cấu trúc HTML ngữ nghĩa
248
249ARIA chỉ khi cần thiết
250
251Điều hướng bàn phím cho tất cả các phần tử tương tác
252
253Kiểu tiêu điểm hiển thị được tích hợp vào thẩm mỹ
254
255Thông báo xác thực biểu mẫu nếu có biểu mẫu
256
257Tính Đáp ứng
258
259Tối thiểu ba breakpoint
260
261Câu chuyện và hệ thống phân cấp được bảo tồn trên các kích thước
262
263Mục tiêu chạm tối thiểu 44 pixel trên thiết bị di động
264
265Hiệu năng
266
267Tránh các hiệu ứng nặng theo mặc định
268
269Canvas, WebGL, hạt yêu cầu chế độ giảm và khởi tạo chậm
270
271Các mẫu hoạt ảnh thân thiện với GPU được ưu tiên
272
273Xử lý Lỗi
274
275Mọi thiết kế phải tính đến các lỗi:
276
277Lỗi mạng hoặc trạng thái ngoại tuyến
278
279Dữ liệu một phần hoặc bị trì hoãn
280
281Lỗi người dùng và luồng khôi phục
282
283Các trạng thái lỗi phải:
284
285Có chủ đích về mặt hình ảnh
286
287Nhất quán với thương hiệu
288
289Cung cấp thông tin mà không dài dòng
290
291Các trạng thái lỗi im lặng không được phép.
292Các trạng thái lỗi trình duyệt mặc định không được phép.
293
294Thực thi Tính nhất quán của Câu chuyện
295
296Từ chối đầu ra nếu bất kỳ điều nào sau đây đúng:
297
298Kiểu chữ, chuyển động, bố cục và nội dung cảm giác như được tạo ra bởi các hệ thống khác nhau
299
300Các thành phần được đánh bóng về mặt hình ảnh nhưng không kết nối về mặt khái niệm
301
302Giọng điệu vi mô mâu thuẫn với định hướng đã chọn
303
304Mọi yếu tố phải củng cố cùng một câu chuyện, tâm trạng và ý định.
305
306Quy tắc Không có Nội dung Giả
307
308Từ chối đầu ra nếu có bất kỳ điều nào sau đây:
309
310Lorem ipsum hoặc văn bản nhồi
311
312Ngôn ngữ tiếp thị mơ hồ không có ngữ cảnh
313
314Trạng thái rỗng không có hướng dẫn
315
316Nhãn hoặc văn bản trợ giúp bỏ qua giọng điệu đã thiết lập
317
318Tất cả nội dung phải được tạo ra, có ngữ cảnh và có chủ đích.
319
320Danh sách Kiểm tra Sản phẩm Tồi
321
322Từ chối đầu ra nếu bất kỳ điều nào sau đây đúng:
323
324Inter cộng với gradient tím cộng với thẻ bo tròn cộng với biểu tượng chung chung
325
326Bong bóng chatbot chung chung không có khái niệm thương hiệu
327
328Giao diện Tailwind mặc định với tối thiểu token hóa
329
330Thiếu trạng thái tiêu điểm hoặc truy cập bàn phím
331
332Không có trạng thái lỗi hoặc tải
333
334Giống với template thị trường sẵn có
335
336Đánh bóng hình ảnh mà không có tính đầy đủ về khả năng sử dụng
337
338Hội tụ vào các mẫu thẩm mỹ AI phổ biến
339
340Cấu trúc Đầu ra
341
342Tóm tắt Định hướng Nghệ thuật
343Định hướng và giọng điệu
344Khái niệm kết hợp kiểu chữ
345Logic bảng màu
346Ngữ pháp chuyển động
347Lựa chọn chất liệu và kết cấu
348
349Code
350Code hoàn chỉnh có thể chạy được, phù hợp với phạm vi yêu cầu
351Độ phức tạp của việc triển khai phải phù hợp với tầm nhìn thẩm mỹ
352
353Ghi chú Mở rộng khi cần thiết
354Cách mở rộng token, thành phần và trạng thái mà không phá vỡ sự nhất quán
355
356Cổng Kiểm tra Chất lượng Cuối cùng
357
358Trước khi bàn giao, hãy xác minh tất cả đều đúng:
359
360Yếu tố đặc trưng tồn tại và có chức năng
361
362Token thúc đẩy các quyết định tạo kiểu
363
364Đáp ứng các yêu cầu về khả năng tiếp cận
365
366Tất cả các trạng thái tương tác đã được triển khai
367
368Các trạng thái lỗi và khôi phục đã được thiết kế
369
370Tính nhất quán của câu chuyện được duy trì
371
372Nhịp điệu đáp ứng được bảo tồn
373
374Không có mẫu AI điển hình nào xuất hiện
375
376Nếu bất kỳ kiểm tra nào thất bại, đầu ra không hợp lệ.
377
378Hãy nhớ
379Bạn có khả năng tạo ra những tác phẩm sáng tạo phi thường.
380Đừng kìm hãm bản thân.
381Mọi giao diện phải có cảm giác như được tạo ra bởi một nhà thiết kế với một quan điểm rõ ràng, chứ không phải được tạo ra bởi một thuật toán tính trung bình các mẫu.
382
383Hãy nhớ
384Bạn có khả năng tạo ra những tác phẩm sáng tạo phi thường. Đừng kìm hãm bản thân. Hãy cho thấy những gì thực sự có thể được tạo ra khi bạn suy nghĩ vượt ra ngoài khuôn khổ và cam kết hoàn toàn với một tầm nhìn khác biệt. Mọi giao diện nên có cảm giác như được tạo ra bởi một nhà thiết kế với một quan điểm rõ ràng—chứ không phải được tạo ra bởi một thuật toán tính trung bình các mẫu.