Kiến thức thiết yếu về UX/UI mà không ai từng chia sẻ, Hệ thống thiết kế
Liên quan đến UXUI, có rất nhiều thứ phải học, đúng không? Cũng có nhiều sách muốn đọc, và cũng đa dạng các khóa học muốn nghe... Khi đó, nên học hỏi dần dần, bắt đầu từ những thứ có ảnh hưởng lớn đến công việc của bạn. Và trong số đó, 'Design System' chắc chắn có ảnh hưởng số 1!
Cách nhà thiết kế tạo kiểu, cách sử dụng từ thư viện
Cách nhà thiết kế tạo component, cách lấy ra dùng từ thư viện
Danh sách kiểm tra hữu ích cho nhà thiết kế khi làm hướng dẫn
Khái niệm và cách sử dụng Token (Góc nhìn của nhà thiết kế)
🔥Phải đọc
Khóa học này hiện đang được chuẩn bị để cập nhật. Thay vì mua ngay bây giờ, chúng tôi sẽ thông báo cho bạn khi bản cập nhật hoàn tất, vì vậy hãy quay lại khi đó =)
🔥Các mặt hàng có lợi
📖 Giá của một cuốn sách! Với giá của một cuốn sách, bạn có thể tham gia bài giảng video gồm tổng cộng 18 chương! Truy cập trọn đời vào các bài giảng được cập nhật liên tục!
📝 Có sẵn mã gian lận để tránh thiếu thành phần, tệp danh sách kiểm tra! Khi quản lý hệ thống thiết kế, đôi khi một thành phần yêu cầu nhiều phiên bản UI. Đối với các nút, chúng ta cần nhiều phiên bản UI khác nhau, chẳng hạn như UI mặc định + UI trạng thái di chuột + UI trạng thái nhấn. Chúng ta cũng cần thiết lập hướng dẫn sử dụng và các chính sách liên quan, chẳng hạn như khi nào sử dụng nút màu xanh, khi nào sử dụng nút bóng mờ, v.v. Tuy nhiên, vì phải xem xét rất nhiều trường hợp khác nhau nên có khả năng bỏ sót điều gì đó. Chúng tôi cung cấp danh sách kiểm tra để giúp bạn tránh những thiếu sót như vậy.
❓ Hệ thống thiết kế là gì vậy?
👆 Một ví dụ về hệ thống thiết kế do Google tạo ra. Đây được gọi là ' Thiết kế vật liệu (hệ thống) ' nổi tiếng.
Thay vì đưa ra một định nghĩa khó hiểu và mơ hồ về tính nhất quán hay thứ gì đó tương tự,hãy nhớ nó như một hoặc hai hình ảnh quen thuộc với bạn.Lúc đầu, bạn sẽ dễ hiểu và nhớ rõ hơn trong thời gian dài nếu nhớ dưới dạng hình ảnh thay vì văn bản.
👆Nếu bạn là nhà thiết kế, hãy nhớ hình ảnh Figma.
Hệ thống thiết kế = Kiểu dáng, thành phầntrong Figma+hướng dẫn sử dụng cho từng kiểu dáng, thành phần (do các nhà thiết kế trong nhóm viết trên Notion/Slack/các trang web khác)
👆 Nếu bạn là một nhà phát triển, hãy nhớ hình ảnh VScode.
Hệ thống thiết kế = Kiểu, mã thành phần được viết trong VScode + hướng dẫn sử dụng cho từng kiểu (do các nhà thiết kế trong nhóm viết trên Notion/Slack/các trang web khác)
😊 Có điều không ai nói cho bạn biết!
Chỉ cần tìm kiếm 'hệ thống thiết kế' trên bất kỳ nền tảng bài giảng trực tuyến nào. Có lẽ sẽ có một vài bài giảng liên quan. Không chỉ số lượng bài giảng hoàn toàn không đủ mà chương trình giảng dạy còn quá đơn giản hoặc ngược lại, hầu hết các bài giảng đều quá dài. Vẫn còn nhiều nội dung khác trên YouTube. Nhưng cũng không có nội dung cụ thể nào về 'hướng dẫn' trong video trên YouTube. Vì thời gian của chúng ta đều quý báu, và đặc biệt là vì nhân viên văn phòng Hàn Quốc rất bận rộn, nên bài giảng này chỉ gói gọn trong những nội dung thiết yếu nhất!
Hệ thống thiết kế là khuôn khổ cơ bản cho mọi sản phẩm web/ứng dụng, do đó, các nhà thiết kế nói riêng phải quen thuộc với chúng. Nhưng tại sao lại có quá ít bài giảng về 'hệ thống thiết kế', mặc dù đây là một khái niệm quan trọng và thiết yếu? Nguyên nhân là do “hệ thống thiết kế” không phải là công việc dễ thấy và không liên quan trực tiếp đến doanh số bán hàng. Tương tự như 'công việc nhà'. Ngay cả khi bạn chăm chỉ làm việc nhà mỗi ngày, điều đó cũng không thực sự thể hiện ra ngoài. Làm việc nhà chăm chỉ chưa chắc đã giúp bạn kiếm được tiền. Công việc nội trợ từ lâu đã bị đánh giá thấp vì nó không phô trương hay giúp bạn kiếm được tiền. Tôi chắc rằng không nhiều người trong số các bạn từng tham gia lớp học dạy cách làm việc nhà hiệu quả. Tuy nhiên, cũng giống như việc bạn không làm việc nhà trong ba ngày, nếu bạn không chú ý đến "hệ thống thiết kế" của mình, bạn sẽ tiếp tục gặp phải những bất tiện khi làm việc. Và nếu những vấn đề lớn nhỏ liên quan như vậy tiếp tục bị bỏ qua, nó có thể trở thành tình trạng khó có thể đảo ngược sau này. Các công ty lớn như Google, Apple và Samsung đều có các nhóm riêng chỉ quản lý hệ thống thiết kế của họ. Những công ty thông minh này sẽ không để tiền dư thừa mà không có lý do gì và tạo ra các nhóm riêng biệt như vậy, đúng không? Điều này chứng tỏ họ nhận thức rõ tầm quan trọng của hệ thống thiết kế này. Tại Hàn Quốc, một công ty có tên Toss được cho là đã tiết kiệm được 15.800 giờ mỗi năm sau khi tổ chức lại hệ thống thiết kế trên quy mô lớn. Mặc dù là một hệ thống có sức ảnh hưởng lớn nhưng thật không may, không nhiều người nói về hệ thống thiết kế.
Tôi sẽ nói lại điều này trong tương lai, nhưng không nhất thiết phải là bài giảng này. Tôi hy vọng bạn sẽ tiếp tục nghiên cứu hệ thống thiết kế một cách nhất quán, dù là qua sách vở hay YouTube. Hệ thống thiết kế đã có nhiều tiến bộ, nhưng vẫn còn nhiều lĩnh vực cần cải thiện. Càng có nhiều người quan tâm, hệ thống càng có thể nâng cao trình độ.
Tốc độ thay đổi trong lĩnh vực CNTT cực kỳ nhanh chóng. Chỉ cần nhìn vào Figma, có rất nhiều thứ thay đổi sau mỗi bản cập nhật mà tôi phải liên tục nghiên cứu. Do đó, cần phải kiểm tra lịch sử cập nhật để xem bài giảng có được cập nhật thường xuyên hay không để theo kịp tốc độ thay đổi nhanh chóng. Tần suất cập nhật cũng phản ánh mong muốn của giảng viên về chất lượng bài giảng.
👍Bài giảng của một giảng viên luôn lắng nghe kỹ lưỡng phản hồi tiêu cực của học viên!
Đừng chỉ nhìn vào xếp hạng đánh giá mà còn phải chú ý đến những bình luận của giảng viên. Nếu bạn phản ứng một cách phòng thủ hoặc đưa ra phản hồi chính thức cho những phản hồi tiêu cực từ sinh viên, thì khó có thể nói rằng bạn có thái độ tốt với tư cách là một người hướng dẫn. Nếu bạn thực sự muốn học sinh của mình phát triển và học tốt, khi các em nói "Em thất vọng về điều này và điều kia", bạn nên nói "Ồ, đúng rồi. Em đã bỏ lỡ phần này". Có thể bạn đang nghĩ "Em cần phải bù đắp cho bài giảng này".
❓ Hệ thống thiết kế có thể giúp gì cho các nhà thiết kế?
1. Tăng hiệu quả công việc
Đây là điều mà nhiều người đã biết. Nó làm giảm các nhiệm vụ lặp đi lặp lại, duy trì tính nhất quán trong thiết kế của các sản phẩm , v.v.
2. Ngăn chặn việc đào tạo không cần thiết
Tôi cũng là một nhà thiết kế và tôi làm việc này vì tôi yêu thích thiết kế, nhưng đôi khi có những lúc tôi chìm đắm trong suy nghĩ. Lĩnh vực thiết kế là nơi bất kỳ ai cũng có thể dễ dàng bày tỏ ý kiến của mình về thiết kế bất cứ lúc nào. Ví dụ, một thành viên nhóm bán hàng đi ngang qua đã hỏi: 'Phông chữ này có hơi cứng không?' 'Sẽ đẹp hơn nếu căn giữa các số trong cột này phải không?' Bạn có thể bày tỏ ý kiến của mình, v.v. Phản hồi từ quan điểm của người khác luôn được hoan nghênh, nhưng nếu nhà thiết kế đã nghiên cứu và quyết định cẩn thận về điều gì đó thay vì chỉ làm việc mà không suy nghĩ, hoặc nếu nhiều người có ý kiến rất khác nhau, nhà thiết kế có thể muốn tìm sự bình yên trong tâm trí và cơ thể bằng cách lắng nghe tiếng chim hót vào buổi sáng hoặc âm thanh của dòng suối trong thiên nhiên. Tuy nhiên, nếu chúng ta chủ động giới thiệu một hệ thống thiết kế, nó sẽ trở thành một hệ thống được tạo ra với sự tham gia của tất cả mọi người, không chỉ dành riêng cho các nhà thiết kế. Vì đây là hệ thống phản ánh tiếng nói của mọi người nên số lượng người khiếu nại cũng sẽ giảm đi. Sẽ không cần phải tổ chức một cuộc họp căng thẳng mỗi khi có sự bất đồng quan điểm.
3. Thực hành cải thiện khả năng sử dụng
Hệ thống thiết kế giống như các sản phẩm thông thường ở chỗ chúng đòi hỏi khả năng sử dụng được cải thiện liên tục. Sự khác biệt là việc cải thiện khả năng sử dụng của trang web/ứng dụng mà tôi xây dựng sẽ khiến người dùng cuối hài lòng, nhưng việc cải thiện khả năng sử dụng của hệ thống thiết kế sẽ khiến tôi và nhóm của tôi hài lòng. Thật khó và tốn thời gian để tìm ra người dùng sản phẩm của tôi là ai, nhưng người dùng hệ thống thiết kế của công ty chúng tôi được xác định rõ ràng là các thành viên trong nhóm, do đó, điều này rất tốt cho việc thực hành nghiên cứu người dùng và cải thiện khả năng sử dụng!
❓ Nếu công ty đã sử dụng rồi thì sao?
Việc hệ thống này đã được sử dụng trong công ty cũng có nghĩa là các thành viên trong nhóm sẽ ít phản đối việc nâng cấp hệ thống thiết kế hơn! Nếu bạn cố gắng giới thiệu một hệ thống thiết kế cho một công ty chưa sử dụng hệ thống này, có thể sẽ có sự phản đối đáng kể từ các thành viên trong nhóm vì có nhiều điều mới cần phải học và thích nghi, và nhiều thứ họ đã làm cần phải được làm lại. Đây có thể là cơ hội tốt để nói chuyện với các thành viên trong nhóm hoặc toàn bộ công ty về việc tổ chức lại hệ thống thiết kế!
Lĩnh vực CNTT là một trong những lĩnh vực thay đổi nhanh nhất trong mọi ngành công nghiệp. Mỗi ngày đều có những công nghệ mới ra đời. Nếu thuật ngữ 'mã thông báo thiết kế ' không quen thuộc với bạn, tôi khuyên bạn nên tìm hiểu sơ qua về khái niệm này ở một nơi khác, ngay cả khi nó không có trong bài giảng này.
Đối với các công ty lớn, sẽ có một nhóm riêng chịu trách nhiệm duy nhất về hệ thống thiết kế. Ở Hoa Kỳ, các nhóm thiết kế hệ thống thường bao gồm từ 4 đến 9 người. Tuy nhiên, đối với các doanh nghiệp vừa và nhỏ và các công ty khởi nghiệp, khả năng cao sẽ có 1 hoặc 2 thành viên trong nhóm quản lý hệ thống thiết kế. Không dễ để một nhà thiết kế đơn lẻ tại một công ty khởi nghiệp tạo ra một hệ thống thiết kế tốt hơn so với bảy nhà thiết kế tại một công ty lớn. Cho dù khả năng của một người có xuất sắc đến đâu, bảy người trong một công ty lớn sẽ dành cả ngày để nghiên cứu và cải thiện hệ thống thiết kế, trong khi một nhà thiết kế tại một công ty khởi nghiệp sẽ khó có thể tạo ra nó bằng cách chia nhỏ thời gian rảnh của họ. Nhưng may mắn thay, những công ty lớn này đã công khai hệ thống thiết kế của họ trên trang web của họ. Vì vậy, chúng ta có thể tham khảo những nội dung đó với tấm lòng biết ơn và phát triển chúng thành hệ thống thiết kế của công ty mình. Đừng bao giờ cố gắng tự mình làm mọi thứ từ đầu. Sẽ có rất nhiều thử nghiệm và sai sót . Thay vào đó, sẽ là khôn ngoan hơn nếu tích cực sử dụng nội dung mà một số chuyên gia toàn cầu, bao gồm cả Naero, đã dày công nghiên cứu trong một thời gian dài.
📚 Nội dung học tập chính
👆 Cách tải lên và sử dụng các thành phần trong thư viện
👆 Cách sử dụng danh sách kiểm tra để đảm bảo bạn không bỏ sót bất cứ điều gì
👆 Hệ thống nguyên tử
👆 Khái niệm và cách sử dụng token
📢 Những trường hợp sau đây không được bảo hành: Cách 'Nhà phát triển' xử lý Mã hệ thống thiết kế
💬 Câu hỏi dự kiến Q&A
H. Đây có phải là bài giảng mà sinh viên không chuyên ngành cũng có thể tham gia không?
Tôi cho rằng điều này phụ thuộc vào mức độ hiểu biết của người chơi về Figma chứ không phải là vấn đề chính. Nếu bạn có kiến thức về các thành phần trong Figma và có thể tìm kiếm các nguồn mở trong Cộng đồng Figma, bạn sẽ không gặp khó khăn khi tham gia khóa học.
H. Nội dung bài học được trình bày ở mức độ nào?
Bài viết này không đề cập đến cách tạo từng thành phần riêng lẻ bằng công cụ Figma. Như tôi đã đề cập nhiều lần trong bài giảng, mục tiêu của chúng ta là tạo ra một hệ thống thiết kế nhanh chóng và hiệu quả . Chúng tôi sẽ tích cực sử dụng hệ thống thiết kế đã được phát triển trong thời gian dài bằng cách tập hợp nhiều chuyên gia giỏi nhất từ các công ty lớn!
✒️Giới thiệu người chia sẻ kiến thức
Đại diện hiện tại của Nidesign
Đã hoàn thành chương trình Thạc sĩ về Thiết kế tại Trường sau đại học
Tham gia vào các dự án có quy mô và chủ đề khác nhau, từ các tập đoàn lớn đến các công ty khởi nghiệp
Do môi trường và thiết bị thu âm không tốt nên chúng tôi không còn cách nào khác ngoài việc sử dụng giọng nói của trí tuệ nhân tạo. Xin hãy hiểu điều này. Nhưng vì tôi đã sử dụng giọng nói tự nhiên nhất có thể nên sẽ không quá ngượng ngùng.
🙋♀️ Những điều cần lưu ý trước khi tham gia lớp học
Vui lòng chuẩn bị trước vì chúng tôi sẽ sử dụng Figma.
Nếu bạn quen thuộc với các khái niệm về thành phần và cộng đồng của Figma, bạn sẽ dễ hiểu hơn.
Nhờ được dạy rất chậm và kỹ lưỡng, tôi xem bài giảng và tiếp thu rất tốt. Tôi sẽ dùng cái này để chuẩn bị phỏng vấn thật tốt. Người mới bắt đầu nhất định phải nghe cái này.