강의

멘토링

커뮤니티

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á

65 học viên

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

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

Bạn sẽ nhận được điều này sau khi học.

  • 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à

157

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á

  • shinyroon1728님의 프로필 이미지
    shinyroon1728

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Tôi cảm thấy nền tảng của mình vững chắc hơn nhờ phần giải thích chi tiết về hệ thống thiết kế. Tài liệu thiết kế bạn cung cấp cũng được sắp xếp gọn gàng nên rất dễ xem.

    • dxlab
      Giảng viên

      Chào bạn Ga-young! Cảm ơn bạn vì những đánh giá quý giá. 😊 Tôi đã cố gắng để bạn có thể dễ dàng hiểu về hệ thống thiết kế và thật tự hào khi nó hữu ích cho bạn! Tôi cảm thấy rất xứng đáng khi đã chuẩn bị tài liệu bài giảng một cách cẩn thận nhờ những phản hồi mà bạn đã cho. 😭😭 Tôi sẽ tạo ra những bài giảng hữu ích hơn trong tương lai. Chúc bạn một ngày tốt lành! ✨

  • dbstn76589521님의 프로필 이미지
    dbstn76589521

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Nó chứa thông tin thực sự hữu ích từ quan điểm của người mới bắt đầu thiết kế. Các tập tin sách giáo khoa được sắp xếp rất đẹp nên tôi rất vui khi tham gia khóa học mà không hề đắn đo. Nội dung được sắp xếp gọn gàng nên tôi nghĩ sau này tôi sẽ xem thường xuyên khi học thiết kế! Cảm ơn!

    • dxlab
      Giảng viên

      Chào 윤수님! Cảm ơn bạn vì những đánh giá quý giá. ☺️ Tôi đã cố gắng để ngay cả người mới bắt đầu cũng có thể dễ dàng hiểu được, và tôi rất vui khi bạn thấy nó hữu ích! Tôi cảm thấy có động lực hơn khi bạn nói rằng bạn sẽ tiếp tục sử dụng các tệp tài liệu học tập. 😭😭 Chúc bạn tiếp tục học thiết kế một cách vui vẻ! Tôi sẽ tạo ra những bài giảng hữu ích hơn trong tương lai. Chúc bạn một ngày tốt lành! ✨

  • ryuwoong님의 프로필 이미지
    ryuwoong

    Đánh giá 4

    Đánh giá trung bình 5.0

    Đã chỉnh sửa

    5

    100% đã tham gia

    Tài liệu rõ ràng, dễ nhìn. Chỉ ra những yếu tố thiết yếu cần nhớ. Nếu nhà phát triển xem thì có thể chiếm lợi thế khi tranh cãi với nhà thiết kế chăng? (Đùa thôi 🙃)

    • dxlab
      Giảng viên

      Chào RyuWoong! Cảm ơn bạn rất nhiều vì những đánh giá quý giá. 😊 Thật may mắn khi bạn thấy tài liệu gọn gàng và dễ xem! Tôi đã cố gắng tập trung vào những điểm chính và tôi rất vui vì điều đó đã được truyền tải tốt. 😆 Tôi sẽ tạo ra những bài giảng hữu ích hơn trong tương lai. Chúc bạn một ngày tốt lành! ✨

  • dkim270039님의 프로필 이미지
    dkim270039

    Đánh giá 4

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    • namsooklee9294님의 프로필 이미지
      namsooklee9294

      Đánh giá 3

      Đánh giá trung bình 4.7

      4

      31% đã tham gia

      Đây là một bài gi강 được tổng hợp rất hữu ích và dễ tiếp cận. Được cấu trúc để có thể hiểu rõ sự cần thiết của hệ thống thiết kế~

      • dxlab
        Giảng viên

        Xin chào namsook lee Cảm ơn bạn đã để lại đánh giá quý báu. 😊 Tôi đã tạo ra khóa học này để mọi người có thể tiếp cận một cách dễ dàng, và tôi rất vui vì ý định đó đã được truyền tải tốt. Tôi sẽ tiếp tục suy nghĩ về những nội dung hữu ích cho công việc thực tế. Chúc bạn có một ngày tốt lành! ☀️

    1.702.355 ₫

    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!