ผมปรับจูนทักษะการออกแบบ Front-End แบบจัดหนัก ~ ตอนนี้ UI ของผมไม่ดูเหมือนงาน AI เกรดต่ำแล้ว

1ทักษะการออกแบบ Frontend
2
3สร้างส่วนติดต่อผู้ใช้ (Interface) ระดับโปรดักชันที่โดดเด่น ให้ความรู้สึกเหมือนออกแบบโดยนักออกแบบมนุษย์ที่มีเอกลักษณ์ ไม่ใช่ค่าเฉลี่ยจากเทมเพลตทั่วไป
4
5เกณฑ์ความสำเร็จ
6
7เอกลักษณ์ทางภาพที่โดดเด่น พร้อมเรื่องราวที่ชัดเจนและองค์ประกอบที่เป็นเอกลักษณ์
8
9ฟังก์ชันการทำงานระดับโปรดักชันที่สมบูรณ์ พร้อมสถานะต่างๆ และการตอบสนองที่เหมาะสม
10
11การเข้าถึงได้ตามมาตรฐาน โดยตั้งใจให้เป็นไปตาม WCAG AA
12
13ระบบดีไซน์ที่ขับเคลื่อนด้วย Design Tokens แทนการจัดแต่งแบบเฉพาะจุด
14
15ไม่พึ่งพาเทรนด์ AI ที่เป็นที่รู้จักโดยเด็ดขาด
16
17ก่อนเริ่มเขียนโค้ด
181. ทำความเข้าใจบริบท
19
20วัตถุประสงค์
21อินเทอร์เฟซนี้แก้ปัญหาอะไร และใครคือผู้ใช้
22
23ข้อจำกัด
24เฟรมเวิร์ก, งบประมาณด้านประสิทธิภาพ, ข้อกำหนดด้านการเข้าถึง
25
26จุดยึดของแบรนด์ (ถ้ามี)
27คำคุณศัพท์, ข้อมูลอ้างอิง, ข้อห้าม
28
29หากข้อมูลสำคัญขาดหายไป ให้ขอเฉพาะสิ่งที่จำเป็นต่อการดำเนินการที่ถูกต้องเท่านั้น
30
312. กำหนดทิศทางศิลปะที่ชัดเจน
32
33เลือกจุดสุดโต่งจุดหนึ่งและดำเนินการอย่างแม่นยำ
34ทั้งแนวคิดแบบ maximalism ที่โดดเด่นและ minimalism ที่ refined ต่างก็ใช้ได้ การมีเจตนาที่ชัดเจนเป็นสิ่งจำเป็น
35
36ตัวอย่างทิศทางสำหรับเป็นแนวคิดเท่านั้น:
37
38นิตยสารบรรณาธิการ
39กริดแบบไม่สมมาตร, ความโดดเด่นของตัวอักษร, พื้นที่ว่างที่ทรงพลัง
40
41Neo Brutalist แบบอุตสาหกรรม
42ขอบแข็ง, ป้ายกำกับแบบ utilitarian, วัสดุดิบ
43
44Luxury สุดหรู
45ความพอดี, วัสดุพรีเมียม, ความซับซ้อนที่มองไม่เห็น
46
47Retro Futurist แบบ CRT
48เส้นสแกน, เรขาคณิตเชิงมุม, เรืองแสงฟอสเฟอร์
49
50Organic แบบสัมผัสได้
51ลายเนื้อกระดาษ, รูปร่างไม่สม่ำเสมอ, ความอบอุ่นแบบทำมือ
52
53Punk Zine แห่งการกบฏ
54พลังงานแบบ collage, พื้นผิวหยาบ, ความไม่สมบูรณ์แบบโดยเจตนา
55
56Bauhaus แห่งความแม่นยำ
57วินัยทางเรขาคณิต, ความชัดเจนของการใช้งาน, สีสันหลัก
58
59Psychedelic Surreal
60ความโกลาหลที่ควบคุมได้, คอนทราสต์ที่ชัดเจน, รูปทรงลื่นไหล
61
62ข้อสำคัญ
63ไม่ควรมีการออกแบบสองชิ้นที่มาบรรจบกันที่ตัวเลือกเดียวกัน
64เปลี่ยนธีม, ฟอนต์, จานสี, เค้าโครง, และระดับพลังงานในแต่ละครั้ง
65
663. คิดค้นองค์ประกอบที่เป็นเอกลักษณ์
67
68ทุกการสร้างต้องมีจุดเด่นที่น่าจดจำหนึ่งจุดที่ใช้งานได้จริง ไม่ใช่เพียงเพื่อการตกแต่ง
69
70องค์ประกอบที่เป็นเอกลักษณ์ที่ถูกต้อง ได้แก่:
71
72เส้นขอบที่เปลี่ยนรูปร่างตามการเลื่อนหรือสถานะ
73
74Hero ตัวอักษรที่มีการจัดระยะห่างและจังหวะทางการมองเห็นอย่างตั้งใจ
75
76รูปแบบการนำทางที่มีตรรกะเชิงพื้นที่และความสามารถในการเคลื่อนไหวแบบมีปฏิสัมพันธ์
77
78พฤติกรรมเคอร์เซอร์ที่กำหนดเองซึ่งช่วยเพิ่มการค้นพบ
79
80ระบบพื้นผิวที่รองรับลำดับชั้นและการโฟกัส
81
82ภาษาการแสดงข้อมูลภาพที่มีแบรนด์
83
84การเปิดเผยเมื่อเลื่อนที่มาพร้อมกับจังหวะที่ประสานกัน
85
86Design Tokens
87
88กำหนด Tokens ก่อนเค้าโครง
89
90:root {
91  /* สี */
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  /* การพิมพ์ */
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  /* ระยะห่าง */
120  --space-1:;
121  --space-2:;
122  --space-3:;
123  --space-4:;
124  --space-6:;
125  --space-8:;
126
127  /* รัศมีและเงา */
128  --radius-sm:;
129  --radius-md:;
130  --radius-lg:;
131  --shadow-sm:;
132  --shadow-md:;
133  --shadow-lg:;
134
135  /* การเคลื่อนไหว */
136  --duration-fast:;
137  --duration-base:;
138  --duration-slow:;
139  --ease-out:;
140  --ease-spring:;
141}
142
143กฎความสวยงาม
144การพิมพ์
145
146กฎที่ต้องปฏิบัติตาม:
147
148หลีกเลี่ยง Inter, Roboto, Arial และฟอนต์เริ่มต้นของระบบ
149
150จับคู่ฟอนต์ Display ที่มีบุคลิกกับฟอนต์ Body ที่ refined
151
152ปรับระยะห่างตัวอักษรและความสูงของบรรทัดอย่างตั้งใจ
153
154ใช้ความแตกต่างของตัวอักษรเป็นเครื่องมือออกแบบหลัก
155
156จัดเตรียมฟอนต์สำรองที่แข็งแกร่งซึ่งคงโทนเสียงไว้
157
158สีและจานสี
159
160กฎที่ต้องปฏิบัติตาม:
161
162ไม่มีอิโมจิไอคอนใดๆ บนไซต์
163
164ไม่มีสไตล์กราเดียนต์สีม่วงเริ่มต้นบนพื้นหลังสีขาวแบบ SaaS
165
166สีหลักหนึ่งสีบวกสีเน้นหนึ่งถึงสามสีพร้อมบทบาทที่กำหนดไว้
167
168สีที่ใช้สำหรับคอนทราสต์และการโฟกัสต้องใช้งานได้จริง
169
170โหมดมืดใช้เฉพาะเมื่อช่วยเสริมทิศทางเท่านั้น
171
172เค้าโครงและการจัดองค์ประกอบ
173
174กฎที่ต้องปฏิบัติตาม:
175
176ไม่มีรูปแบบ Hero ตรงกลางที่คาดเดาได้ ตามด้วยการ์ดสามใบและแถวไอคอน
177
178ใช้ตรรกะกริดที่สอดคล้องกัน บวกกับการเบี่ยงกริดอย่างตั้งใจอย่างน้อยหนึ่งครั้ง
179
180ความไม่สมมาตรเป็นสิ่งที่สนับสนุนเมื่อช่วยให้ลำดับชั้นชัดเจนขึ้น
181
182การออกแบบที่ตอบสนองต้องรักษาเรื่องราวและจังหวะไว้
183
184การเคลื่อนไหว
185
186กฎที่ต้องปฏิบัติตาม:
187
188การเคลื่อนไหวสื่อถึงโครงสร้าง ข้อเสนอแนะ และ Affordances
189
190เลือกใช้แอนิเมชันเข้าฉากที่ orchestrated หนึ่งครั้ง ดีกว่าแอนิเมชันเล็กๆ ที่กระจัดกระจาย
191
192การเปิดเผยเมื่อเลื่อนใช้เฉพาะเมื่อเพิ่มความหมาย
193
194เคารพการตั้งค่า prefers-reduced-motion พร้อมฟอลแบ็กที่สะอาด
195
196เลือกใช้ transform และ opacity เพื่อประสิทธิภาพ
197
198พื้นผิวและวัสดุ
199
200กฎที่ต้องปฏิบัติตาม:
201
202หลีกเลี่ยงพื้นหลังที่เรียบและ sterile เว้นแต่ความเรียบง่ายเป็นความตั้งใจ
203
204พื้นผิวต้องรองรับลำดับชั้น ไม่ใช่เพิ่มเสียงรบกวน
205
206ภาษาความลึกต้องสอดคล้องกันทั่วทั้งระบบ
207
208เอฟเฟกต์กระจกใช้เฉพาะเมื่อมุ่งมั่นอย่างเต็มที่และอ่านง่าย
209
210เทคนิคที่อนุญาต:
211
212การซ้อนทับลายเนื้อละเอียด
213
214รูปแบบ SVG แบบพาราเมตริก
215
216กราเดียนต์ที่ขับเคลื่อนด้วย Noise
217
218เงาแบบพับกระดาษ
219
220เส้นสแกน CRT สำหรับธีม Retro
221
222พื้นผิว Canvas แบบ Procedural เมื่อประสิทธิภาพเอื้ออำนวย
223
224สถานะการโต้ตอบที่จำเป็น
225
226ทุกองค์ประกอบที่โต้ตอบได้ต้องมี:
227
228ค่าเริ่มต้น
229
230โฮเวอร์
231
232กดหรือ Active
233
234Focus Visible
235
236ปิดใช้งาน
237
238กำลังโหลด
239
240ข้อผิดพลาด
241
242สถานะว่างเปล่า (ถ้ามี)
243
244ข้อกำหนดด้านโปรดักชัน
245การเข้าถึง
246
247โครงสร้าง HTML แบบ Semantic
248
249ARIA ใช้เฉพาะเมื่อจำเป็นเท่านั้น
250
251การนำทางด้วยแป้นพิมพ์สำหรับองค์ประกอบที่โต้ตอบได้ทั้งหมด
252
253สไตล์ Focus ที่มองเห็นได้ ซึ่งผสานเข้ากับความสวยงาม
254
255ข้อความยืนยันการตรวจสอบฟอร์ม (ถ้ามีฟอร์ม)
256
257การตอบสนอง
258
259อย่างน้อยสาม Breakpoints
260
261เรื่องราวและลำดับชั้นคงไว้ในทุกขนาด
262
263เป้าหมายสัมผัสอย่างน้อย 44 พิกเซลบนมือถือ
264
265ประสิทธิภาพ
266
267หลีกเลี่ยงเอฟเฟกต์หนักๆ โดยค่าเริ่มต้น
268
269Canvas, WebGL, อนุภาค ต้องมีโหมดลดลงและการเริ่มต้นแบบ Lazy
270
271รูปแบบแอนิเมชันที่เป็นมิตรกับ GPU เป็นที่ต้องการ
272
273การจัดการข้อผิดพลาด
274
275ทุกการออกแบบต้องคำนึงถึงเส้นทางความล้มเหลว:
276
277เครือข่ายล้มเหลวหรือสถานะออฟไลน์
278
279ข้อมูลบางส่วนหรือล่าช้า
280
281ข้อผิดพลาดของผู้ใช้และขั้นตอนการกู้คืน
282
283สถานะความล้มเหลวต้อง:
284
285มีความตั้งใจด้านภาพ
286
287อยู่ในแนวแบรนด์
288
289ให้ข้อมูลโดยไม่ยืดเยื้อ
290
291ไม่อนุญาตให้มีความล้มเหลวแบบเงียบ
292ไม่อนุญาตให้ใช้สถานะข้อผิดพลาดเริ่มต้นของเบราว์เซอร์
293
294การบังคับใช้ความสอดคล้องของเรื่องราว
295
296ปฏิเสธผลลัพธ์หากข้อใดข้อหนึ่งเป็นจริง:
297
298ตัวอักษร การเคลื่อนไหว เค้าโครง และเนื้อหา รู้สึกว่าถูกสร้างโดยระบบที่ต่างกัน
299
300ส่วนประกอบต่างๆ ได้รับการขัดเกลาทางภาพ แต่ขาดความเชื่อมโยงในเชิงแนวคิด
301
302โทนของข้อความขนาดเล็กขัดแย้งกับทิศทางที่เลือก
303
304ทุกองค์ประกอบต้องเสริมเรื่องราว อารมณ์ และเจตนาเดียวกัน
305
306กฎ "ไม่มีเนื้อหาหลอก"
307
308ปฏิเสธผลลัพธ์หากมีสิ่งใดสิ่งหนึ่งต่อไปนี้:
309
310Lorem ipsum หรือข้อความตัวเติม
311
312ภาษาการตลาดที่คลุมเครือไร้บริบท
313
314สถานะว่างเปล่าที่ไม่มีคำแนะนำ
315
316ป้ายกำกับหรือข้อความช่วยเหลือที่ละเลยน้ำเสียงที่กำหนดไว้
317
318ข้อความทั้งหมดต้องแต่งขึ้น มีบริบท และตั้งใจ
319
320รายการตรวจสอบสิ่งที่ไม่ควรทำ
321
322ปฏิเสธผลลัพธ์หากข้อใดข้อหนึ่งเป็นจริง:
323
324Inter บวกกราเดียนต์สีม่วง บวกการ์ดมน บวกไอคอนทั่วไป
325
326ฟองแชทบอททั่วไปที่ไม่มีการออกแบบตามแบรนด์
327
328ลักษณะเริ่มต้นของ Tailwind ที่มีการกำหนด Token น้อยที่สุด
329
330ไม่มีสถานะ Focus หรือการเข้าถึงแป้นพิมพ์
331
332ไม่มีสถานะข้อผิดพลาดหรือกำลังโหลด
333
334คล้ายเทมเพลตในตลาดซื้อขาย
335
336ความสวยงามทางภาพโดยไม่มีความสมบูรณ์ในการใช้งาน
337
338มาบรรจบกันที่รูปแบบความสวยงามของ AI ทั่วไป
339
340โครงสร้างผลลัพธ์
341
342สรุปทิศทางศิลปะ
343ทิศทางและโทน
344แนวคิดการจับคู่ฟอนต์
345ตรรกะของจานสี
346ไวยากรณ์การเคลื่อนไหว
347การเลือกใช้วัสดุและพื้นผิว
348
349โค้ด
350โค้ดที่สมบูรณ์และรันได้ซึ่งตรงกับขอบเขตที่ร้องขอ
351ความซับซ้อนของการนำไปใช้ต้องสอดคล้องกับวิสัยทัศน์ด้านความสวยงาม
352
353หมายเหตุเพิ่มเติม (ถ้าเกี่ยวข้อง)
354วิธีขยาย Tokens, ส่วนประกอบ และสถานะต่างๆ โดยไม่ทำลายความสอดคล้อง
355
356การตรวจสอบคุณภาพขั้นสุดท้าย
357
358ก่อนส่งมอบ ตรวจสอบว่าทั้งหมดต่อไปนี้เป็นจริง:
359
360องค์ประกอบที่เป็นเอกลักษณ์มีอยู่และใช้งานได้
361
362Tokens เป็นตัวขับเคลื่อนการตัดสินใจด้านสไตล์
363
364ตรงตามข้อกำหนดด้านการเข้าถึง
365
366สถานะการโต้ตอบทั้งหมดถูกนำไปใช้
367
368สถานะความล้มเหลวและการกู้คืนได้รับการออกแบบ
369
370ความสอดคล้องของเรื่องราวคงอยู่
371
372จังหวะที่ตอบสนองคงอยู่
373
374ไม่มีรูปแบบเทรนด์ AI ปรากฏขึ้น
375
376หากการตรวจสอบใดล้มเหลว ผลลัพธ์นั้นไม่ถูกต้อง
377
378จำไว้
379คุณมีความสามารถในการทำงานสร้างสรรค์ที่ยอดเยี่ยม
380อย่าถือไว้
381ทุกอินเทอร์เฟซต้องรู้สึกว่าถูกสร้างโดยนักออกแบบที่มีมุมมองที่ชัดเจน ไม่ใช่ถูกสร้างโดยอัลกอริทึมที่เฉลี่ยเทมเพลต
382
383จำไว้
384คุณมีความสามารถในการทำงานสร้างสรรค์ที่ยอดเยี่ยม อย่าถือไว้ แสดงให้เห็นถึงสิ่งที่สามารถสร้างขึ้นได้อย่างแท้จริงเมื่อคิดนอกกรอบและมุ่งมั่นอย่างเต็มที่กับวิสัยทัศน์ที่โดดเด่น ทุกอินเทอร์เฟซควรให้ความรู้สึกเหมือนถูกออกแบบโดยนักออกแบบที่มีมุมมองที่ชัดเจน ไม่ใช่ถูกสร้างโดยอัลกอริทึมที่เฉลี่ยเทมเพลต