Hệ thống thiết kế: nó là gì, tại sao và làm thế nào để tạo ra nó

Có vẻ như chủ đề về hệ thống thiết kế đã được xem xét từ mọi phía: bạn có thể tìm thấy nhiều bài báo, bài đăng, báo cáo và tài liệu khác về tạo ra một hệ thống thiết kế. Mặc dù vậy, tất cả những ai gặp phải thuật ngữ này đều có rất nhiều câu hỏi. Chúng tôi sẽ cố gắng trả lời chi tiết những vấn đề chính:

• Hệ thống thiết kế là gì?
• nó là gì nữa?

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

Hệ thống thiết kế là một cấu trúc bao gồm các thành phần trực quan, thư viện mã và hướng dẫn sử dụng.

Thông thường, các nhà thiết kế mới bắt đầu mắc sai lầm khi đơn giản hóa khái niệm bằng cách coi hệ thống thiết kế chỉ là một bộ giao diện người dùng – một tài liệu chứa các thành phần giao diện đồ họa, kiểu chữ và màu sắc.

Hệ thống thiết kế bao gồm ba cấp độ:

A Bộ giao diện người dùng là ngôn ngữ hình ảnh của sản phẩm mà hệ thống thiết kế được tạo ra. Đó là màu sắc, phông chữ, biểu tượng, nút, dấu đầu dòng, công tắc bật tắt, thanh trượt, hình ảnh, hoạt ảnh. Các yếu tố khác nhau và phụ thuộc vào chi tiết cụ thể của sản phẩm kỹ thuật số. Tất cả chúng đều giúp tạo ra phần hiển thị của giao diện mà người dùng tương tác.

Khung này là một thư viện mã được viết cho từng thành phần này, cũng như các plugin cho hoạt ảnh, thẻ và nhãn để điều hướng.

Hướng dẫn là một tập hợp các mẫu và quy tắc sử dụng các yếu tố tổ chức quy trình làm việc. Nhờ có các hướng dẫn, nhà thiết kế không tham gia vào các nhiệm vụ đơn giản mà nhà phát triển sẽ tham gia ngay lập tức.

Ví dụ: nguyên tắc chỉ định các tham số của cửa sổ bật lên trên trang web: thụt lề từ văn bản, vị trí và kích thước của tiêu đề và nội dung văn bản, vị trí cho nút và cửa sổ sẽ trông như thế nào khi ít hơn hoặc ít hơn. nhiều văn bản hơn.

Các loại hệ thống thiết kế

Không có sự phân loại duy nhất, nhưng các chuyên gia phân biệt hai loại hệ thống thiết kế – nguồn mở và nguồn đóng.

Trong các hệ thống nguồn mở, bất kỳ công ty nào cũng có thể sử dụng tài liệu và điều chỉnh chúng cho phù hợp với dự án của mình – thay đổi màu nút, phông chữ và biểu tượng. Ví dụ: trong Ant Design, Nguyên tắc giao diện con người và hệ thống Material Design.

Hệ thống thiết kế nguồn đóng thường được tạo cho một công ty hoặc sản phẩm cụ thể. Đây là những tài liệu đóng hoàn toàn, chỉ nhân viên mới có thể truy cập hoặc mở một phần.

Cách tạo một hệ thống thiết kế

Sự phát triển của các hệ thống thiết kế dựa trên các nguyên tắc thiết kế nguyên tử. Thiết kế nguyên tử là một kỹ thuật bao gồm năm cấp độ của các yếu tố thiết kế: nguyên tử, phân tử, sinh vật, mẫu và trang.

Cấu trúc hệ thống thiết kế:

• Nguyên tử là những thành phần nhỏ nhất: nút, biểu tượng, trường nhập và phông chữ.
• phân tử là sự kết hợp của một số yếu tố đơn giản: hai nút, tiêu đề và dòng đầu vào, thanh thông báo, hộp kiểm và văn bản.
• Sinh vật là các thành phần hoàn chỉnh: tiêu đề trang web, biểu mẫu ủy quyền, thẻ sản phẩm và biểu ngữ thông báo.
• Templates – bố cục trang không có nội dung: menu, giao diện trang web.
• trang là những trang chứa đầy nội dung.

Thuật toán chung trông như thế này:

• Chọn màu sắc và phông chữ, đặt lưới mô-đun và chọn hoạt ảnh, hình ảnh và âm thanh.
• Tạo các thành phần giao diện cơ bản.
• Thiết kế kết hợp các yếu tố và bố cục.
• Tạo một danh sách các phần tử cùng với các quy tắc. Trong hướng dẫn, hãy chỉ định phần tử là gì, nó được sử dụng ở đâu và nó giải quyết những nhiệm vụ gì.

Thông thường, hệ thống thiết kế không được tạo ra từ đầu mà được xây dựng dựa trên tài liệu đã được phát triển: bộ công cụ giao diện người dùng, hướng dẫn hoặc sách thương hiệu.

Tại sao bạn cần một hệ thống thiết kế?

Giống như mọi sản phẩm CNTT, điều quan trọng là phải trả lời câu hỏi “Hệ thống thiết kế để làm gì?” Hoặc, như một số đồng nghiệp tại cửa hàng nhận xét, “thì sao”?

Câu trả lời cho câu hỏi này sẽ giúp bạn hiểu được giá trị của sản phẩm. Một phần của nó có thể được nhìn thấy từ những gì chúng tôi đã mô tả ở trên. Nhưng hãy chia nhỏ nó ra và nhìn sâu hơn.

Tự động hóa

Tự động hóa mang lại lợi ích rõ ràng nhất. Hệ thống thiết kế sẽ giúp bạn tự động hóa các hoạt động, giúp bạn có thời gian thực hiện các nhiệm vụ khác.

Sự lặp đi lặp lại

Có thể kế thừa và tự động áp dụng các sửa đổi cho các thành phần hệ thống thiết kế là một công cụ có giá trị cho nhóm sản phẩm. Bạn có thể nhanh chóng thực hiện những thay đổi lớn về mặt thẩm mỹ hoặc thậm chí ở một địa điểm. Bằng cách này, bạn luôn có thể nâng cao sản phẩm.

Tính nhất quán

Tính nhất quán cho biết các đối tượng và thực thể trong một sản phẩm thực hiện cùng chức năng phải hướng tới sự thống nhất và tương đồng.

Khi chúng ta sử dụng các tính năng tương đương trong một sản phẩm, chúng trở nên quen thuộc và tiện lợi: theo bản năng, chúng ta hiểu cách hoạt động và xuất hiện của nút cũng như vị trí của nó.

Chúng tôi hy vọng rằng mọi người đã học được điều gì đó có giá trị từ bài viết. Và chúng tôi một lần nữa bị thuyết phục rằng việc viết một bài báo sẽ cấu trúc nên kiến ​​thức và thúc đẩy việc nghiên cứu bổ sung.