Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Design

/

UI/UX

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!

(5.0) 6 đánh giá

167 học viên

  • uxuidesignlab
3시간 만에 완강할 수 있는 강의 ⏰
이론 중심
Figma
Design System
Atomic Design
ux

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

  • Khái niệm Hệ thống thiết kế

  • Khái niệm Hệ thống Nguyên tử

  • 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ần trong 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 độ.

🔥 Những thứ chỉ có trong lớp thiết kế của bạn

Video YouTube, bài đăng trên blog Thiết kế của bạn
Cách sử dụng bộ UI miễn phí
Phong cách, Thành phần
dấu hiệu
Cử động X
Hướng dẫn sử dụng hệ thống thiết kế X
Cách quản lý phiên bản X
Cập nhật bài giảng liên tục X


Cập nhật ít nhất một lần sau mỗi 1-2 tháng

Kênh truyền thông thời gian thực miễn phí X
Điều hành phòng nhóm KakaoTalk

😳 Bài giảng nào là bài giảng hay?

👍 Bài giảng được cập nhật liên tục!

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
  • Hơn 7 năm kinh nghiệm thực tế
  • Youtube: @needdesign

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.

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Planner/thiết kế web/app cho người mới

  • Thiết kế UX Web/App sơ cấp

  • Nhà thiết kế UI Web/App cho người mới bắt đầu

Cần biết trước khi bắt đầu?

  • Biết khái niệm về Figma thì tốt.

Xin chào
Đây là

368

Học viên

11

Đánh giá

18

Trả lời

4.8

Xếp hạng

3

Các khóa học

UX UI 디자인 교육을 하고 있는 니디자인랩 입니다.

인스타그램: '니디자인랩' 검색

Chương trình giảng dạy

Tất cả

18 bài giảng ∙ (1giờ 39phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

6 đánh giá

5.0

6 đánh giá

  • fain9301님의 프로필 이미지
    fain9301

    Đánh giá 93

    Đánh giá trung bình 4.8

    Đã chỉnh sửa

    5

    100% đã tham gia

    Cảm ơn bài giảng hay.

    • stellana10272820님의 프로필 이미지
      stellana10272820

      Đánh giá 1

      Đánh giá trung bình 5.0

      5

      28% đã tham gia

      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.

      • dydguswl973380님의 프로필 이미지
        dydguswl973380

        Đánh giá 1

        Đánh giá trung bình 5.0

        5

        100% đã tham gia

        Thật dễ hiểu với những lời giải thích chi tiết và thân thiện! Cảm ơn:))

        • uxuidesignlab
          Giảng viên

          Cảm ơn bạn đã xem xét! =) Trong khi xem có thắc mắc gì thì cứ hỏi bất cứ lúc nào nhé~❤

      • official0370님의 프로필 이미지
        official0370

        Đánh giá 3

        Đánh giá trung bình 4.7

        5

        61% đã tham gia

        Xây dựng design system một mình mà không có người hướng dẫn thì khóa học này thực sự giúp ích rất nhiều. Cảm ơn vì đã chia sẻ những mẹo hay quý báu...

        • davyjeong7658님의 프로필 이미지
          davyjeong7658

          Đánh giá 3

          Đánh giá trung bình 5.0

          5

          100% đã tham gia

          358.187 ₫

          Khóa học khác của uxuidesignlab

          Hãy khám phá các khóa học khác của giảng viên!

          Khóa học tương tự

          Khám phá các khóa học khác trong cùng lĩnh vực!