강의

멘토링

로드맵

Design

/

UI/UX

Nền tảng phong cách - Hệ thống thiết kế

Style Foundation giúp hệ thống hóa những yếu tố cơ bản trong thiết kế như màu sắc, khoảng cách, font chữ, từ đó rút ngắn thời gian làm việc và nâng cao chất lượng sản phẩm. Nếu bạn đang gặp khó khăn vì UI không được sắp xếp gọn gàng hoặc mất tính nhất quán trong quá trình hợp tác, hãy tham gia khóa học này. Ngay cả những nhà thiết kế mới vào nghề cũng có thể học được những kiến thức cơ bản và hệ thống để áp dụng trực tiếp vào thực tế.

(4.9) 8 đánh giá

62 học viên

  • DX Lab
디자인 시스템
Design System
product design
Web Design

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

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

  • Tôi có thể hiểu các khái niệm cơ bản và tầm quan trọng của hệ thống thiết kế.

  • Học cách sử dụng style foundation để nâng cao chất lượng.

  • Nắm vững hệ thống màu sắc để xây dựng và mở rộng bảng màu.

  • Có thể hiểu được nguyên lý thiết lập khoảng cách như bội số của 4, bội số của 8, v.v.

  • Học cách biểu thị hình ảnh phù hợp với độ phân giải của nhiều thiết bị khác nhau.

Nền tảng phong cách

Sự khởi đầu của một hệ thống thiết kế, cốt lõi của thiết kế UI

Nhiều công ty đang áp dụng hệ thống thiết kế để tạo ra sản phẩm tốt hơn.

Các sản phẩm ngày càng phức tạp hơn và các thành viên trong nhóm sử dụng nhiều vai trò và công cụ khác nhau.

Việc duy trì tính nhất quán và hiệu quả trong suốt quá trình này là một thách thức lớn.

Hệ thống thiết kế là công cụ mạnh mẽ để giải quyết những vấn đề này.

Hệ thống thiết kế là công cụ mạnh mẽ để giải quyết những vấn đề này.

Quan trọng nhất trong số đó là nền tảng phong cách .

Style Foundation sắp xếp và thống nhất ngôn ngữ hình ảnh cơ bản nhất: màu sắc, khoảng cách, phông chữ, v.v.

Giảm thiểu tình trạng thiếu hiệu quả trong cộng tác, thiếu nhất quán trong thiết kế và tình trạng hỗn loạn trong bảo trì mà chúng ta gặp phải hàng ngày.

Bạn có thể đạt được kết quả tốt hơn nhanh hơn.

Trong bài giảng này, chúng ta sẽ tìm hiểu lý do tại sao nền tảng phong cách lại quan trọng,

Hãy để tôi giải thích một cách đơn giản cách bạn có thể sử dụng nó.

Nếu bạn không có nền tảng phong cách thì sao?

Nếu bạn không có nền tảng phong cách thì sao?

Biểu tượng X Màu sắc, khoảng cách, cỡ chữ, v.v. đều được xác định lại mỗi lần, dẫn đến công việc trùng lặp.

Biểu tượng X Các nhà thiết kế, nhà phát triển và người lập kế hoạch giao tiếp bằng các tiêu chuẩn khác nhau, điều này làm tăng thêm sự nhầm lẫn.

Biểu tượng X Khi các dự án phát triển, chúng trở nên kém nhất quán và người dùng trở nên mệt mỏi.

Nếu bạn không có nền tảng phong cách thì sao?

Còn nếu bạn có nền tảng phong cách thì sao?

Biểu tượng kiểm tra Tất cả thành viên trong nhóm có thể cộng tác nhanh chóng và chính xác bằng cách tuân theo các quy tắc chung.

Biểu tượng kiểm tra Các thiết kế được tái sử dụng một cách hiệu quả, thời gian và chi phí bảo trì được giảm đáng kể.

Biểu tượng kiểm tra Chất lượng hình ảnh đồng nhất của sản phẩm giúp người dùng tin tưởng hơn.

Biểu tượng kiểm tra Năng suất phát triển tăng lên khi thời gian dành cho việc lặp lại và sửa đổi không cần thiết giảm xuống.

Nếu bạn có bất kỳ lo ngại nào như thế này, hãy lắng nghe.

biểu tượng con mèo

“Tôi không hiểu tại sao chúng ta phải sử dụng hình ảnh 2x và 3x .”

Trong bài giảng này, bạn sẽ tìm hiểu chi tiết về cách thức và lý do tại sao hình ảnh được hiển thị rõ nét trong môi trường DPR cao.

biểu tượng con mèo

“Thật khó để xác định độ phân giải tiêu chuẩn . “Chúng ta nên lấy gì làm tiêu chuẩn?”

Để hỗ trợ nhiều thiết bị khác nhau, độ phân giải tham chiếu phải được thiết lập dựa trên dữ liệu.

Chúng tôi sẽ giải thích quy trình này một cách thực tế.

biểu tượng con mèo

" Lưới ? “Tôi không biết phải bắt đầu từ đâu.”

Chúng tôi sẽ dạy bạn những khái niệm cơ bản về lưới và phương pháp tính lưới sử dụng bội số của 8.

biểu tượng con mèo

“Tôi có thể thiết lập cỡ chữ và khoảng cách dòng như thế nào để dễ đọc hơn?”

Bạn có lo lắng rằng phông chữ nhỏ hoặc dày sẽ khiến văn bản của bạn khó đọc hơn không?

Tìm hiểu cách thiết lập cỡ chữ và khoảng cách dòng phù hợp với loại nội dung của bạn.

biểu tượng con mèo

“Tôi không hiểu tại sao khoảng cách phải là bội số của 4 hoặc 8.

Tìm hiểu cách giải quyết vấn đề nửa pixel và tạo ra các thiết kế chất lượng cao.

biểu tượng con mèo

“Tôi không biết mã thông báo thiết kế là gì và tại sao chúng ta cần nó.”

Bạn có gặp khó khăn khi hiểu các mã thông báo thiết kế không?

Trong bài giảng này, chúng tôi sẽ giải thích dễ dàng khái niệm và sự cần thiết của mã thông báo thiết kế.

Hệ thống thiết kế, bắt đầu dễ dàng.

1

Cung cấp manh mối để giải quyết các vấn đề thiết kế

Nó giải quyết rõ ràng những lo ngại về thiết kế như tại sao khoảng cách phải là bội số của 4. Bạn có thể áp dụng trực tiếp những gì học được vào công việc để giải quyết vấn đề mà không tốn thời gian.

2

Học các hệ thống thiết kế rất dễ dàng mà không gặp bất kỳ gánh nặng nào.

Vì chúng ta học được khái niệm lớn về hệ thống thiết kế từ phần cốt lõi mang tên “Nền tảng phong cách”, ngay cả người mới bắt đầu cũng có thể bắt đầu mà không gặp bất kỳ trở ngại nào.

3

Giải thích và ví dụ dễ hiểu , ngay cả người mới bắt đầu cũng có thể hiểu được.

Thiết kế mã thông báo, hệ thống lưới, cài đặt độ phân giải, v.v. đều có thể phức tạp, nhưng chúng tôi sẽ giải thích chúng một cách rõ ràng và dễ hiểu để bất kỳ ai cũng có thể hiểu được. Nó không chỉ giúp các nhà thiết kế mà cả các nhà quy hoạch và phát triển tăng cường hiểu biết về hệ thống thiết kế.

Biểu tượng kiểm tra Lý thuyết 100%

Giải thích chi tiết về hệ thống thiết kế.

Biểu tượng kiểm tra Bài giảng PDF

Chúng tôi cung cấp tài liệu giảng dạy.

Bạn có thể học những điều như thế này.

Phần 1
Hệ thống thiết kế
Hệ thống thiết kế là gì?

1.1 Hệ thống thiết kế là gì?

Hiểu khái niệm về hệ thống thiết kế thông qua các ví dụ và giải thích dễ hiểu về hệ thống thiết kế.

Hệ thống thiết kế là gì?

1.2 Cấu trúc của hệ thống thiết kế

Bạn sẽ tìm hiểu về các nguyên tắc thiết kế, nền tảng phong cách, thư viện thành phần và mẫu, hướng dẫn nội dung, hướng dẫn trợ năng cũng như vai trò và cách sử dụng mã thông báo thiết kế.

Phần 2
Nền tảng phong cách
Hệ thống thiết kế là gì?

2.1 Style Foundation là gì?

Bạn sẽ hiểu được khái niệm và sự cần thiết của nền tảng phong cách, cũng như ưu, nhược điểm của nó và tầm quan trọng của việc bảo trì liên tục.

Hệ thống thiết kế là gì?

2.2 Mã thông báo thiết kế là gì?

Bạn sẽ hiểu được khái niệm và hệ thống mã thông báo thiết kế và lý do tại sao mã thông báo thiết kế được sử dụng thông qua các ví dụ.

Hệ thống thiết kế là gì?

2.3 Độ phân giải

Bạn sẽ hiểu được khái niệm về độ phân giải, sự khác biệt giữa độ phân giải logic và độ phân giải vật lý và vai trò của DPR. Tìm hiểu cách thiết lập độ phân giải chuẩn để hỗ trợ nhiều loại thiết bị khác nhau.

Hệ thống thiết kế là gì?

2.4 Lưới

Bạn có thể tìm hiểu các khái niệm cơ bản về lưới và có được kiến ​​thức về các phương pháp tính toán lưới cũng như cách sử dụng chúng trong nhiều thiết bị khác nhau.

Hệ thống thiết kế là gì?

Khoảng cách 2,5

Bạn sẽ học cách thiết lập khoảng cách để tránh vấn đề nửa pixel và đạt được thiết kế nhất quán.

Hệ thống thiết kế là gì?

2.6 Màu sắc

Hiểu được ý nghĩa và vai trò của màu sắc, đồng thời học cách tạo bảng màu và màu sắc ngữ nghĩa.

Hệ thống thiết kế là gì?

2.7 Kiểu chữ

Bạn sẽ hiểu được tầm quan trọng của kiểu chữ và tìm hiểu các thành phần của kiểu chữ và phong cách chữ cái.

Hệ thống thiết kế là gì?

Chiều cao 2,8

Bạn có thể thể hiện tầm quan trọng của các yếu tố bằng cách sử dụng chiều cao (trục Z) và hiểu nhiều phương pháp biểu đạt sự phân biệt chiều cao cũng như các trường hợp sử dụng.

Hệ thống thiết kế là gì?

2.9 Biểu tượng

Bạn có thể tìm hiểu các nguyên tắc thiết kế biểu tượng để duy trì tính nhất quán.

Hệ thống thiết kế là gì?

2.10 Hình ảnh

Tìm hiểu cách thống nhất tỷ lệ khung hình và kích thước hình ảnh để chúng hiển thị trên nhiều môi trường thiết bị khác nhau mà không làm giảm chất lượng.

Hệ thống thiết kế là gì?

2.11 Bán kính góc, Đường viền, Bóng đổ

Bạn sẽ học cách duy trì tính nhất quán bằng cách thiết lập tiêu chí cho bán kính góc, đường viền và bóng đổ.

Câu hỏi dự kiến ​​Q&A

H. Người không chuyên ngành có thể nghe chương trình này không?

A. Tài liệu này hữu ích với bất kỳ ai không có kiến ​​thức về thực hành thiết kế, bất kể chuyên ngành của họ là gì.

H. Tôi có cần chuẩn bị gì trước khi tham dự buổi thuyết trình không?

A. Không có cái riêng biệt nào cả.

H. Tôi nên xử lý các công cụ ở mức độ nào?

A. Không sử dụng bất kỳ công cụ nào. Đây không phải là khóa học thực hành.

Lưu ý trước khi tham gia khóa học

Tài liệu học tập: Sách giáo khoa PDF được cung cấp

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

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

  • Người tìm việc muốn thể hiện hệ thống UI trong portfolio

  • Nhà thiết kế mới muốn xây dựng nền tảng vững chắc về cơ bản của thiết kế

  • Nhà thiết kế tại chỗ gặp khó khăn với hệ thống thiết kế

Xin chào
Đây là

148

Học viên

22

Đánh giá

2

Trả lời

5.0

Xếp hạng

2

Các khóa học

저는 이해하기 쉬운 컨텐츠가 좋은 컨텐츠라고 믿습니다.
실무에 직접적으로 도움이 되는 좋은 컨텐츠를 만드는 데 주력하고 있어요.
제가 만든 컨텐츠가 실무에 도움이 된다는 피드백을 받을 때마다 큰 기쁨을 느낍니다.

 

DX Lab 공식 유튜브
🅱
DX Lab 디자인 블로그

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

Tất cả

16 bài giảng ∙ (2giờ 1phú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ả

8 đánh giá

4.9

8 đánh giá

  • 가영님의 프로필 이미지
    가영

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    상세한 디자인 시스템에 대한 설명으로 기초가 더 단단해진 기분이에요. 주신 디자인 자료도 깔끔하게 정리가 잘 되어있어서 보기 편했어요.

    • DX Lab
      Giảng viên

      안녕하세요 가영님 ! 소중한 수강평 감사합니다. 😊 디자인 시스템에 대해 쉽게 이해할 수 있도록 노력했는데, 도움이 되었다니 정말 뿌듯합니다 ! 주신 피드백 덕분에 강의 자료를 꼼꼼하게 준비한 보람을 느낍니다. ㅠㅠ 앞으로 더 유익한 강의를 만들겠습니다. 오늘도 좋은 하루 보내세요! ✨

  • 강윤수님의 프로필 이미지
    강윤수

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    디자인 초보자 입장에서 정말 유용한 내용을 담고있어요. 교재 파일도 너무 예쁘게 정리해주셔서 막힘없이 재밌게 수강하였고, 내용 정리가 깔끔하여 앞으로 디자인 공부를 하면서 꾸준히 들여다보기 좋을 것 같아요! 감사합니다!

    • DX Lab
      Giảng viên

      안녕하세요 윤수님 ! 소중한 수강평 감사합니다. ☺️ 초심자도 쉽게 이해할 수 있도록 노력했는데, 유용하다고 느끼셨다니 뿌듯합니다 ! 교재 파일도 꾸준히 활용하실 거라는 말씀에 더 보람을 느낍니다. ㅠㅠ 앞으로도 디자인 공부 재밌게 이어가시길 바라요 ! 앞으로 더 유익한 강의를 만들겠습니다. 오늘도 좋은 하루 보내세요! ✨

  • RyuWoong님의 프로필 이미지
    RyuWoong

    Đánh giá 4

    Đánh giá trung bình 5.0

    Đã chỉnh sửa

    5

    100% đã tham gia

    자료가 깔끔하고, 보기 편안합니다. 기억하면 좋을 필수 요소들만 콕콕 찝어 알려줍니다. 개발자가 보면 디자이너와 싸울 때 유리해 질 수 있습니다? (농담 🙃)

    • DX Lab
      Giảng viên

      안녕하세요 RyuWoong님 ! 소중한 수강평 감사합니다. 😊 자료가 깔끔하고 보기 편했다니 정말 다행이에요 ! 핵심만 전달하려고 신경 썼는데, 그 부분이 잘 전달된 것 같아 뿌듯합니다. 😆 앞으로 더 유익한 강의를 만들겠습니다. 오늘도 좋은 하루 보내세요! ✨

  • namsook.lee님의 프로필 이미지
    namsook.lee

    Đánh giá 3

    Đánh giá trung bình 4.7

    4

    31% đã tham gia

    유익하게 잘 정리되어 가볍게 접근하기 좋은 강의 입니다. 디자인 시스템의 필요성을 잘 이해 할수 있게 되어 있어요~

    • DX Lab
      Giảng viên

      안녕하세요 namsook lee님 소중한 수강평 감사합니다. 😊 어렵지 않게 접근할 수 있도록 제작했는데, 그런 의도가 잘 전해진 것 같아 기쁩니다. 앞으로도 실무에 도움이 되는 콘텐츠를 계속 고민해보겠습니다. 오늘도 좋은 하루 보내세요! ☀️

  • 김용민님의 프로필 이미지
    김용민

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    31% đã tham gia

    디자인 관련 강의라고, 디자인 파트만 들어야 하는 강의가 아닌, 프론트엔드 개발자라면 꼭 들으면 좋을 강의라고 생각을합니다!! 디자이너와 개발자간의 원활한 소통을 할 수 있는 교본이라고도 볼 수 있는 강의라고 생각합니다!! 좋은 강의 감사합니다!

    • DX Lab
      Giảng viên

      안녕하세요 김용민님 소중한 수강평 감사합니다. ☺️ 디자이너 뿐만 아니라 프론트엔드 개발자분들께도 도움이 되었다니 정말 뿌듯합니다. 앞으로도 팀 전체에 도움이 될 수 있는 콘텐츠로 꾸준히 찾아뵙겠습니다. 오늘도 좋은 하루 보내세요! 👍

1.701.193 ₫

Khóa học khác của DX Lab

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!