Cách tạo Hướng dẫn kiểu: Bắt đầu với UI Framework

Hỏi và đáp với Nhà thiết kế UX AdRoll về lý do tại sao chúng tôi đã làm điều đó và những gì chúng tôi đã học được

Bài đăng trên blog này là bài đầu tiên trong loạt bài ghi lại hành trình hướng dẫn phong cách, từ việc tạo ra nó, để cung cấp khung UI trưởng thành cho các nhóm của chúng tôi, và cuối cùng chắt lọc một giọng nói và giai điệu độc đáo cho các sản phẩm của chúng tôi.

Chào! I Liênm Arya Srinivasan, một nhà nghiên cứu UX tại AdRoll. Tôi đã ngồi xuống với Mason Lee, một Nhà thiết kế UX làm việc trên sản phẩm API quảng cáo gốc AdRoll, để nói về công việc của anh ấy khi phát triển hướng dẫn về phong cách AdRoll.

Arya: Để khởi động mọi thứ, tại sao bạn lại bắt đầu dự án hướng dẫn phong cách? Vấn đề cần giải quyết là gì?

Mason: Vấn đề là sự không nhất quán trong thiết kế, cả trên các sản phẩm và trong một sản phẩm. Ví dụ, một nút trông giống nhau ở mọi nơi nhưng thực sự khác nhau về màu sắc, trọng lượng phông chữ và kiểu viền.

Các nút trông khác nhau ở các nhà thiết kế cá nhân Giả và các ứng dụng của chúng tôi.

Tăng trưởng nhanh AdRoll, có nghĩa là chúng tôi đã tập trung vào tốc độ. Chúng tôi bây giờ là một công ty lớn hơn với nhiều sản phẩm, vì vậy với tư cách là một nhà thiết kế, tôi tin rằng nó rất quan trọng đối với chúng tôi để nhấn mạnh tính nhất quán trong cách chúng tôi trình bày các sản phẩm của mình: thông qua thiết kế.

Để tập trung vào thiết kế, trước tiên chúng tôi cần khắc phục sự không nhất quán hiện có. Các nhà thiết kế UX ở đây thường tập trung vào một hoặc hai sản phẩm, vì vậy để nhóm của chúng tôi suy nghĩ về thiết kế trên tất cả các sản phẩm, tôi đã thiết lập một cuộc họp hàng tuần của UI UI Smackdown, để thảo luận về các hướng dẫn UI.

Trong mỗi cuộc họp, chúng tôi đã xem xét sự không nhất quán trong thiết kế để quyết định một thiết kế duy nhất. Sau một vài cuộc họp, các nhà thiết kế vẫn hỏi tôi về màu sắc hoặc phần đệm chính xác, v.v. Chúng tôi cần một tài liệu trung tâm với tất cả các câu trả lời, vì vậy tôi đã xây dựng UI Framework trong Phác thảo làm tài nguyên cho các nhà thiết kế. Bất cứ khi nào chúng tôi nhận ra có một thành phần bị thiếu hoặc muốn bao gồm một thành phần mới, chúng tôi sẽ thảo luận về nó và thêm nó vào tệp UI Framework chính.

Arya: Bạn đã đề cập rằng bạn muốn AdRoll trở thành một công ty thiết kế tập trung - ý của bạn là gì?

Mason: Tôi muốn AdRoll đặt thiết kế lên hàng đầu để nó có một sự khác biệt cạnh tranh - được khách hàng công nhận là một sản phẩm được thiết kế tốt, thực sự giải quyết được nhu cầu của họ.

Arya: Mục tiêu trước mắt của bạn cho hướng dẫn phong cách là gì? Bạn có tầm nhìn dài hạn hơn cho dự án này?

Mason: Mục tiêu ngắn hạn của tôi là có sự thống nhất về thiết kế giữa các nhà thiết kế bằng cách tiêu chuẩn hóa các thành phần UI của chúng tôi. Tôi muốn các nhà thiết kế nói cùng một ngôn ngữ khi nói về thiết kế. Ví dụ, trong một phương thức hoặc thả xuống, các kỹ sư xây dựng dựa trên cách nhà thiết kế gợi ý. Nếu các yếu tố thiết kế khác nhau giữa các nhà thiết kế, các kỹ sư sẽ tạo ra cùng một yếu tố theo những cách khác nhau.

Mục tiêu trung hạn của tôi là có phong cách này được xác định trong mã của chúng tôi trong thư viện thành phần của Google RollUp, thư viện thành phần UI nội bộ của AdRoll. Nếu chúng ta có một biểu định kiểu được xác định trước, tất cả các kỹ sư của chúng ta cần làm là sao chép nó. Các nhà thiết kế và kỹ sư có thể nói cùng một ngôn ngữ.

Arya: Bạn có gặp phải bất kỳ vấn đề nào trong khi tạo hướng dẫn phong cách không? Làm thế nào bạn giải quyết chúng?

Mason: Một trong những rào cản lớn nhất là nhận được sự mua từ mọi người trong các nhóm sản phẩm. Để thu hút mọi người tham gia, tôi đã thiết lập một cuộc họp với một danh sách rõ ràng về các mục chương trình nghị sự. Tôi đã trình bày những mâu thuẫn trong thiết kế, chẳng hạn như các menu thả xuống khác nhau giữa các sản phẩm. Cung cấp bằng chứng trực quan kích hoạt các cuộc trò chuyện, và cuối cùng, mọi người quan tâm đến sản phẩm của họ và muốn sự nhất quán.

Một thách thức khác là quyết định các quy tắc. Khi nói về việc tiêu chuẩn hóa một thành phần, nó nên được áp dụng ở bất cứ đâu, trong mọi bối cảnh. Bạn phải nghĩ về mọi trường hợp cạnh. Thành phần này phải linh hoạt, nhưng đồng thời đủ tính năng để nó có thể dễ dàng sử dụng, tiêu thụ và áp dụng.

Ở đây, một ví dụ về sự linh hoạt trong hướng dẫn của chúng tôi. Quyết định ban đầu của chúng tôi về phần đệm trong danh sách thả xuống nhắm mục tiêu theo địa lý này là quá lớn, vì vậy chúng tôi đã sửa đổi hướng dẫn kiểu để giải thích cho trường hợp sử dụng này.Trước (trái), Sau (phải)

Tôi thực sự muốn gọi thêm một thử thách! Đặt tên có thể khó khăn. Như tôi đã nói trước đây, tôi muốn các nhà thiết kế và kỹ sư nói cùng một ngôn ngữ, nhưng điều này cần phải được thực hiện cẩn thận. Đối với một cái gì đó đơn giản như một danh sách thả xuống, chúng tôi thực sự có một số biến thể (một biến thể có hộp kiểm, biến thể khác có hộp kiểm và khối văn bản và một biến thể khác là menu thả xuống tiêu chuẩn). Làm thế nào để chúng ta đặt tên cho ba danh sách thả xuống khác nhau để có một sự hiểu biết phổ quát về cái nào?

Các ngữ nghĩa là thách thức; đặt tên của chúng tôi cần có ý nghĩa. Chúng tôi đã sử dụng một số công cụ cộng tác tuyệt vời để đạt được sự đồng thuận khi chúng tôi quyết định chọn tên. Ví dụ, Wake đã giúp chúng tôi thu thập tất cả các câu hỏi và vấn đề mở, thảo luận về các giải pháp, theo dõi các quyết định Smackdown UI và tiếp tục cuộc trò chuyện với nhóm sản phẩm lớn hơn thông qua tích hợp với Slack.

Cách chúng tôi sử dụng Wake để thảo luận về sự không nhất quán UI và cộng tác trên các quy tắc thành phần.

Arya: Có gì độc đáo về Giao diện người dùng AdRoll, mà bạn phải xem xét khi tạo hướng dẫn kiểu không?

Mason: Bảng điều khiển của chúng tôi rất nặng dữ liệu. Ngoài ra, luồng tạo chiến dịch cung cấp cho các nhà quảng cáo một loạt các đòn bẩy để kéo. Để đáp ứng nhu cầu của các nhà quảng cáo ít kinh nghiệm, chúng tôi hướng đến việc có các cài đặt mặc định hiệu quả. Trong các sản phẩm của chúng tôi, các thành phần có chức năng phức tạp nhưng trông đơn giản và dễ sử dụng.

Arya: Có một số điều bạn muốn bạn biết khi bạn bắt đầu tạo hướng dẫn phong cách?

Mason: Tôi ước tôi có một sự hiểu biết sâu sắc hơn về cách tất cả các sản phẩm của chúng tôi hoạt động ngay từ đầu. Ví dụ, chúng tôi chia sẻ cách thức sản phẩm tương ứng của chúng tôi hoạt động trong cuộc họp phê bình thiết kế hàng tuần của chúng tôi, vì vậy tôi biết SendRoll (sản phẩm nhắm mục tiêu email của chúng tôi) hoạt động như thế nào, nhưng tôi không có kiến ​​thức sâu sắc về SendRoll mà nó thiết kế. Tôi nghĩ rằng sự hiểu biết sắc thái của sản phẩm chắc chắn sẽ giúp ích khi làm việc với hướng dẫn về phong cách, bởi vì sau đó tôi đã hiểu rõ hơn về tất cả các trường hợp sử dụng tiềm năng.

Arya: Vậy điều gì là cách tốt nhất để đạt được sự hiểu biết chung đó về quy trình thiết kế và sản phẩm của họ?

Mason: Mặc dù chúng tôi thực sự tập trung vào việc vận chuyển sản phẩm của mình, chúng tôi làm rất tốt việc chia sẻ quy trình thiết kế của mình trong cuộc họp phê bình thiết kế hàng tuần. Tôi nghĩ rằng chúng ta có thể tốt hơn về việc đóng vòng lặp sau mỗi cuộc họp - nhà thiết kế đã kết hợp phản hồi từ cuộc họp như thế nào? Khi sản phẩm được vận chuyển và sử dụng bởi các nhà quảng cáo của chúng tôi, chúng tôi cũng có thể chia sẻ cách các nhà quảng cáo đang sử dụng các sản phẩm dựa trên những hiểu biết sâu sắc từ các phân tích.

Arya: Có tài nguyên nào bạn đề cập đến khi làm việc trong dự án này không?

Mason: Tôi đã đọc Thiết kế nguyên tử của Brad Frost, nghiên cứu trực tuyến và nói chuyện với các nhà thiết kế UX khác tại MeetUps. Nếu bạn nghĩ rằng một công ty cụ thể thực hiện thiết kế tốt, thì rất có thể họ đã nói về hướng dẫn phong cách của họ ở đâu đó trực tuyến.

Arya: Điều gì về tình trạng của hướng dẫn phong cách của chúng tôi?

Mason: Tôi đã nắm bắt và xem xét lại tất cả các yếu tố UI mà chúng tôi sử dụng trong các sản phẩm khác nhau của chúng tôi và nhóm chúng thành các nền tảng, thành phần, mẫu và trang, sẽ đóng vai trò là nguồn sự thật cho các thiết kế UI của chúng tôi.

Bạn có thể kiểm tra các thành phần UI nền tảng và thành phần trên Dribbble. Nếu bạn đã quen thuộc với Thiết kế nguyên tử, tôi đã nhóm các cấp độ phân tử và dữ liệu phân tử của N vào các thành phần mà tôi gọi là các thành phần. cánh đồng.

Cảm ơn vì đã đọc!

Xem ra những chủ đề sắp tới khi chúng tôi phát triển hướng dẫn phong cách của chúng tôi:

  • Cách UI UI đơn giản hóa việc cộng tác
  • Phát triển các bảng định kiểu mới dựa trên Khung UI
  • Cách xây dựng trang web Hướng dẫn phong cách
  • Hành trình tìm kiếm Giọng nói và Giai điệu của chúng ta