MinhTrang
CTV Nữ
Nếu bạn đang làm việc trong bất kỳ loại thiết kế kỹ thuật số nào, bạn sẽ nghe thấy thuật ngữ design systems - 'hệ thống thiết kế'. Nếu bạn chưa tìm ra chúng, bạn đã đến đúng nơi. Trong bài viết này, chúng tôi sẽ xác định chính xác hệ thống thiết kế là gì, lý do sử dụng một hệ thống và cách tạo một hệ thống.
Một hệ thống thiết kế là gì?
Một hệ thống thiết kế là một nguồn sự thật duy nhất mà các nhà thiết kế và nhà phát triển tạo ra, tham khảo và phát triển cùng nhau. Nó có một ma trận các quy tắc bao gồm một thư viện các ký hiệu - phông chữ, biểu tượng, màu sắc, hình dạng, lưới, hình động, hoặc nhiều thứ khác - mang ý nghĩa khác nhau, được xác định bởi chức năng và mức độ liên quan của chúng.
Nó về cơ bản là một sinh vật sống được tạo thành từ các yếu tố phát triển từ việc đáp ứng các yêu cầu đã có từ trước đến các yêu cầu mới được xác định khi sản phẩm phát triển phức tạp. Các yếu tố này được dịch thành các thành phần sẵn sàng phát triển có thể được chọn và sử dụng ngay lập tức trong môi trường sống.
Ai định nghĩa một hệ thống thiết kế?
Các nhà thiết kế và nhà phát triển phối hợp chặt chẽ với nhau bằng một cách tiếp cận nhanh để thiết lập các quy tắc của một hệ thống thiết kế. Các nhà thiết kế xác định tất cả các khía cạnh của giao tiếp trực quan - Giao diện người dùng, thương hiệu và trải nghiệm người dùng - trong khi làm việc với các nhà phát triển để biến các thuộc tính đó thành các thành phần được mã hóa, bằng cách lặp lại chúng một cách nhất quán cho đến khi chúng thực hiện theo cách riêng biệt về mặt kỹ thuật và phong cách.
Tại sao lại có một hệ thống thiết kế?
Mặc dù một hệ thống thiết kế là một yêu cầu cơ bản cho bất kỳ sản phẩm kỹ thuật số nào có quy mô, nhưng cốt lõi của nó là các nguyên tắc áp dụng cho bất kỳ công việc thiết kế nào. Khía cạnh quan trọng nhất là đặt một bộ quy tắc, khi lặp đi lặp lại nhiều lần, sẽ luôn trả lại các nguyên tắc tương tự.
Theo cùng một cách thiết kế đáp ứng được coi là một cách tiếp cận theo mô-đun về cách thức các khối nội dung hoạt động trên một trang web trong các chế độ xem khác nhau, một hệ thống thiết kế tuân theo cách tiếp cận nguyên tử bằng cách giải quyết từng yếu tố cụ thể xác định các thuộc tính của một thành phần.
Mục đích của việc thiết lập một hệ thống là có một thư viện gồm các thành phần đã được thử nghiệm và kiểm tra có thể được tái sử dụng một cách nhất quán và dự kiến sẽ thực hiện mỗi lần trên tất cả các kích thước sản phẩm - kiểu dáng, thương hiệu, hành vi, chức năng và phân phối. Ưu điểm lớn nhất của một hệ thống thiết kế là có thể tạo nguyên mẫu một cách hiệu quả và lặp lại cả thiết kế và mã cộng sinh trong hành trình hướng tới một sản phẩm chất lượng cao.
Làm thế nào để phát triển một hệ thống thiết kế?
Bây giờ chúng ta hãy xem các bước bạn có thể thực hiện để kết hợp một hệ thống thiết kế cho một dự án sản phẩm kỹ thuật số.
1. Thiết lập một tầm nhìn sản phẩm rõ ràng
Đầu tiên, bạn cần có một ý tưởng rõ ràng về sản phẩm bạn đang phát triển. Dưới đây là một vài câu hỏi cần thiết để xem xét:
Nó làm gì?
Mục đích của sản phẩm của bạn là gì?
Các yêu cầu cho sản phẩm này là gì?
Sản phẩm sẽ cần loại chức năng nào để thực hiện?
Nó dành cho ai?
Khán giả cho sản phẩm này là ai?
Người dùng có bất kỳ quirks nào có thể ảnh hưởng đến cách nhận sản phẩm không?
Tại sao người dùng sẽ tham gia với sản phẩm này? Điều gì làm cho nó độc đáo?
Người dùng có quen thuộc với các sản phẩm tương tự không?
Là sản phẩm đáp ứng nhu cầu xác định hoặc tạo ra một nhu cầu mới?
Nó giải quyết khả năng tiếp cận?
Nó sẽ sống ở đâu?
Đây có phải là một trang web? Một ứng dụng web? Một ứng dụng? Thứ gì khác?
Có phải là thiết bị bất khả tri?
Nó có nên cung cấp cùng một trải nghiệm đa nền tảng hoặc tập trung vào các trải nghiệm vi mô cụ thể trong các bối cảnh cụ thể không?
Mục đích của một hệ thống thiết kế là để giảm sự phức tạp trong phát triển, bằng cách giải quyết các mối quan tâm đã biết cũng như xác định những cái mới trong giai đoạn "thụ thai". Nó rất quan trọng để xác định ánh xạ sản phẩm sớm trong quá trình, vì nó sẽ giúp nhận ra các khả năng nắm giữ tiềm năng có thể tránh được ở giai đoạn tạo mẫu.
2. Lập kế hoạch tấn công của bạn
Thứ hai, bạn sẽ cần đánh giá cách tiếp cận tốt nhất. Nếu bạn làm việc trên một sản phẩm mới, bạn có thể bắt đầu với một MVP (sản phẩm khả thi tối thiểu), trong đó sự chú ý sẽ là về việc xác thực chức năng và tìm hiểu phản hồi của người dùng. Trong những trường hợp đó, nên sử dụng các bộ công cụ UI hiện có từ các nền tảng đã được thiết lập, chẳng hạn như bộ giao diện người dùng Google Material hoặc Bộ giao diện người dùng Apple.
Nếu bạn vượt qua giai đoạn MVP hoặc tạo toàn bộ hệ thống thiết kế từ đầu, ánh xạ sản phẩm của bạn - bao gồm các khía cạnh chính như kiến trúc thông tin, sơ đồ trang web và hành trình người dùng - sẽ cho bạn biết chức năng cơ bản nào cần được giải quyết trước tiên.
Ví dụ: nếu sản phẩm của bạn là một ứng dụng thương mại điện tử, bạn cần có những yếu tố nào trong suốt hành trình người dùng để thực hiện mua hàng - từ trang chủ đến trang sản phẩm, thanh toán và xác nhận đơn hàng? Đó là điều hướng dọc hay ngang? CTA trông như thế nào: chúng là biểu tượng, chỉ văn bản, có nền màu? Những tỷ lệ hình ảnh bạn đang xem xét: chân dung, hình vuông, phong cảnh?
Bằng cách giải quyết từng thuộc tính của phần tử theo chức năng phân cấp, bạn sẽ có thể đặt nền móng vững chắc cho các bản phát hành UI tiến bộ, do đó xây dựng một hệ thống đáng tin cậy nhất quán.
3. Sử dụng các công cụ phù hợp
Thứ ba, phát triển sản phẩm phải luôn là một quá trình bao gồm phụ thuộc vào tất cả các bên liên quan: nhà thiết kế, nhà phát triển, chủ sở hữu sản phẩm, khách hàng và người dùng. Cùng nhau, những cá nhân này tạo ra một hệ sinh thái, một nơi thử nghiệm sẽ định hình hệ thống thiết kế trong suốt hành trình đến việc phân phối sản phẩm cuối cùng.
Vì tiến độ cần được chia sẻ và đôi khi, được thực hiện trong thời gian thực, điều quan trọng là chọn các công cụ phù hợp nhất với quy trình làm việc của bạn. Rất may, chúng tôi rất tha hồ lựa chọn khi nói đến các công cụ thiết kế và tạo mẫu.
Hiện tại có các nền tảng phục vụ cho các mục tiêu chia sẻ tệp hơi khác nhau. Phác thảo được coi là một tiêu chuẩn thiết kế; Adobe XD đang đạt được những bước tiến với phiên bản mới nhất; InVision là một nền tảng vững chắc cũng như một tài nguyên thiết kế có giá trị và Figma đang đột phá bằng cách tập hợp các tính năng mong muốn. Ngoài ra, nếu bạn là một trong những nhà thiết kế thích viết mã để thúc đẩy công việc của bạn, bạn sẽ yêu Framer X. Cần một bàn tay phụ? Thử dùng Design + Code, một trong những tài nguyên học tập tốt nhất hiện có.
Phát triển một hệ thống thiết kế là một cách tiếp cận hợp tác dựa trên các nguyên tắc làm việc nhóm và minh bạch. Nó cam kết giữa các đội sẵn sàng phạm sai lầm và học hỏi từ họ, khám phá những cách làm mới, cùng nhau đổi mới và, tất cả, chỉ cần có một công việc tốt vì sản phẩm hoạt động tốt và vượt quá mong đợi. Đó là cảm giác tốt nhất trên thế giới.
Nguồn: Creative Blog
Một hệ thống thiết kế là gì?
Một hệ thống thiết kế là một nguồn sự thật duy nhất mà các nhà thiết kế và nhà phát triển tạo ra, tham khảo và phát triển cùng nhau. Nó có một ma trận các quy tắc bao gồm một thư viện các ký hiệu - phông chữ, biểu tượng, màu sắc, hình dạng, lưới, hình động, hoặc nhiều thứ khác - mang ý nghĩa khác nhau, được xác định bởi chức năng và mức độ liên quan của chúng.
Nó về cơ bản là một sinh vật sống được tạo thành từ các yếu tố phát triển từ việc đáp ứng các yêu cầu đã có từ trước đến các yêu cầu mới được xác định khi sản phẩm phát triển phức tạp. Các yếu tố này được dịch thành các thành phần sẵn sàng phát triển có thể được chọn và sử dụng ngay lập tức trong môi trường sống.
Các nhà thiết kế và nhà phát triển phối hợp chặt chẽ với nhau bằng một cách tiếp cận nhanh để thiết lập các quy tắc của một hệ thống thiết kế. Các nhà thiết kế xác định tất cả các khía cạnh của giao tiếp trực quan - Giao diện người dùng, thương hiệu và trải nghiệm người dùng - trong khi làm việc với các nhà phát triển để biến các thuộc tính đó thành các thành phần được mã hóa, bằng cách lặp lại chúng một cách nhất quán cho đến khi chúng thực hiện theo cách riêng biệt về mặt kỹ thuật và phong cách.
Tại sao lại có một hệ thống thiết kế?
Mặc dù một hệ thống thiết kế là một yêu cầu cơ bản cho bất kỳ sản phẩm kỹ thuật số nào có quy mô, nhưng cốt lõi của nó là các nguyên tắc áp dụng cho bất kỳ công việc thiết kế nào. Khía cạnh quan trọng nhất là đặt một bộ quy tắc, khi lặp đi lặp lại nhiều lần, sẽ luôn trả lại các nguyên tắc tương tự.
Theo cùng một cách thiết kế đáp ứng được coi là một cách tiếp cận theo mô-đun về cách thức các khối nội dung hoạt động trên một trang web trong các chế độ xem khác nhau, một hệ thống thiết kế tuân theo cách tiếp cận nguyên tử bằng cách giải quyết từng yếu tố cụ thể xác định các thuộc tính của một thành phần.
Mục đích của việc thiết lập một hệ thống là có một thư viện gồm các thành phần đã được thử nghiệm và kiểm tra có thể được tái sử dụng một cách nhất quán và dự kiến sẽ thực hiện mỗi lần trên tất cả các kích thước sản phẩm - kiểu dáng, thương hiệu, hành vi, chức năng và phân phối. Ưu điểm lớn nhất của một hệ thống thiết kế là có thể tạo nguyên mẫu một cách hiệu quả và lặp lại cả thiết kế và mã cộng sinh trong hành trình hướng tới một sản phẩm chất lượng cao.
Làm thế nào để phát triển một hệ thống thiết kế?
Bây giờ chúng ta hãy xem các bước bạn có thể thực hiện để kết hợp một hệ thống thiết kế cho một dự án sản phẩm kỹ thuật số.
1. Thiết lập một tầm nhìn sản phẩm rõ ràng
Nó làm gì?
Mục đích của sản phẩm của bạn là gì?
Các yêu cầu cho sản phẩm này là gì?
Sản phẩm sẽ cần loại chức năng nào để thực hiện?
Nó dành cho ai?
Khán giả cho sản phẩm này là ai?
Người dùng có bất kỳ quirks nào có thể ảnh hưởng đến cách nhận sản phẩm không?
Tại sao người dùng sẽ tham gia với sản phẩm này? Điều gì làm cho nó độc đáo?
Người dùng có quen thuộc với các sản phẩm tương tự không?
Là sản phẩm đáp ứng nhu cầu xác định hoặc tạo ra một nhu cầu mới?
Nó giải quyết khả năng tiếp cận?
Nó sẽ sống ở đâu?
Đây có phải là một trang web? Một ứng dụng web? Một ứng dụng? Thứ gì khác?
Có phải là thiết bị bất khả tri?
Nó có nên cung cấp cùng một trải nghiệm đa nền tảng hoặc tập trung vào các trải nghiệm vi mô cụ thể trong các bối cảnh cụ thể không?
Mục đích của một hệ thống thiết kế là để giảm sự phức tạp trong phát triển, bằng cách giải quyết các mối quan tâm đã biết cũng như xác định những cái mới trong giai đoạn "thụ thai". Nó rất quan trọng để xác định ánh xạ sản phẩm sớm trong quá trình, vì nó sẽ giúp nhận ra các khả năng nắm giữ tiềm năng có thể tránh được ở giai đoạn tạo mẫu.
2. Lập kế hoạch tấn công của bạn
Thứ hai, bạn sẽ cần đánh giá cách tiếp cận tốt nhất. Nếu bạn làm việc trên một sản phẩm mới, bạn có thể bắt đầu với một MVP (sản phẩm khả thi tối thiểu), trong đó sự chú ý sẽ là về việc xác thực chức năng và tìm hiểu phản hồi của người dùng. Trong những trường hợp đó, nên sử dụng các bộ công cụ UI hiện có từ các nền tảng đã được thiết lập, chẳng hạn như bộ giao diện người dùng Google Material hoặc Bộ giao diện người dùng Apple.
Nếu bạn vượt qua giai đoạn MVP hoặc tạo toàn bộ hệ thống thiết kế từ đầu, ánh xạ sản phẩm của bạn - bao gồm các khía cạnh chính như kiến trúc thông tin, sơ đồ trang web và hành trình người dùng - sẽ cho bạn biết chức năng cơ bản nào cần được giải quyết trước tiên.
Ví dụ: nếu sản phẩm của bạn là một ứng dụng thương mại điện tử, bạn cần có những yếu tố nào trong suốt hành trình người dùng để thực hiện mua hàng - từ trang chủ đến trang sản phẩm, thanh toán và xác nhận đơn hàng? Đó là điều hướng dọc hay ngang? CTA trông như thế nào: chúng là biểu tượng, chỉ văn bản, có nền màu? Những tỷ lệ hình ảnh bạn đang xem xét: chân dung, hình vuông, phong cảnh?
Bằng cách giải quyết từng thuộc tính của phần tử theo chức năng phân cấp, bạn sẽ có thể đặt nền móng vững chắc cho các bản phát hành UI tiến bộ, do đó xây dựng một hệ thống đáng tin cậy nhất quán.
Thứ ba, phát triển sản phẩm phải luôn là một quá trình bao gồm phụ thuộc vào tất cả các bên liên quan: nhà thiết kế, nhà phát triển, chủ sở hữu sản phẩm, khách hàng và người dùng. Cùng nhau, những cá nhân này tạo ra một hệ sinh thái, một nơi thử nghiệm sẽ định hình hệ thống thiết kế trong suốt hành trình đến việc phân phối sản phẩm cuối cùng.
Vì tiến độ cần được chia sẻ và đôi khi, được thực hiện trong thời gian thực, điều quan trọng là chọn các công cụ phù hợp nhất với quy trình làm việc của bạn. Rất may, chúng tôi rất tha hồ lựa chọn khi nói đến các công cụ thiết kế và tạo mẫu.
Hiện tại có các nền tảng phục vụ cho các mục tiêu chia sẻ tệp hơi khác nhau. Phác thảo được coi là một tiêu chuẩn thiết kế; Adobe XD đang đạt được những bước tiến với phiên bản mới nhất; InVision là một nền tảng vững chắc cũng như một tài nguyên thiết kế có giá trị và Figma đang đột phá bằng cách tập hợp các tính năng mong muốn. Ngoài ra, nếu bạn là một trong những nhà thiết kế thích viết mã để thúc đẩy công việc của bạn, bạn sẽ yêu Framer X. Cần một bàn tay phụ? Thử dùng Design + Code, một trong những tài nguyên học tập tốt nhất hiện có.
Phát triển một hệ thống thiết kế là một cách tiếp cận hợp tác dựa trên các nguyên tắc làm việc nhóm và minh bạch. Nó cam kết giữa các đội sẵn sàng phạm sai lầm và học hỏi từ họ, khám phá những cách làm mới, cùng nhau đổi mới và, tất cả, chỉ cần có một công việc tốt vì sản phẩm hoạt động tốt và vượt quá mong đợi. Đó là cảm giác tốt nhất trên thế giới.
Nguồn: Creative Blog
