Làm thế nào để xây dựng một hệ thống thiết kế

Không nghi ngờ gì nữa, tôi được hỏi về các hệ thống thiết kế hơn bất cứ điều gì khác. Vì vậy, đã dành phần lớn vài năm qua để suy nghĩ về cách thiết kế, xây dựng và trình bày các hệ thống thiết kế cho các sản phẩm như Marvel, Bantam và Modulz, tôi đã tìm ra tôi chia sẻ một số những gì tôi đã học được trên đường đi.

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

Nó không có bí mật mà các nhà thiết kế yêu một bộ giao diện người dùng tốt. Tuy nhiên, ngoài việc chỉ tập hợp bộ công cụ và hướng dẫn phong cách, có vẻ như gần đây đã có sự tập trung ngày càng tăng về thiết kế hệ thống nhằm kết hợp toàn bộ sản phẩm với nhau. Các công ty như Shopify và Intercom đang xây dựng các đội trong nhà tập trung cụ thể vào việc thiết kế hệ thống. Mọi người đang bắt đầu nhận ra tầm quan trọng của thiết kế hệ thống. Điều này rất đáng khích lệ. Ai có thể biết, có thể một ngày nào đó chúng ta sẽ có một công cụ thiết kế mà không giả sử chúng ta đang bắt đầu từ đầu mỗi khi chúng ta mở một tài liệu mới …?

Một hệ thống thiết kế (liên quan đến các sản phẩm công nghệ) là nhiều hơn một khuôn khổ, bộ công cụ UI hoặc thư viện thành phần. Nó còn hơn cả hướng dẫn về phong cách hoặc bộ hướng dẫn mã. Nó thậm chí còn hơn cả tổng của những phần đó. Một hệ thống thiết kế là một quy tắc phát triển điều chỉnh thành phần của một sản phẩm.
Có rất nhiều khía cạnh cho bất kỳ hệ thống thiết kế tốt nào – bắt đầu từ văn hoá công ty / nhiệm vụ và đi sâu vào việc xây dựng thương hiệu, copywriting, thư viện thành phần và ngôn ngữ thiết kế khác. Các điểm cấp cao hơn được coi là những khía cạnh quan trọng nhất của bất kỳ hệ thống thiết kế nào, nhưng với mục đích của bài viết này, tôi sẽ giả định rằng như một công ty – bạn biết bạn là ai, nhiệm vụ của bạn là gì và sản phẩm của bạn trông như thế nào, Cảm nhận và chức năng.

Một khi bạn đã có những yếu tố quan trọng tại chỗ, bạn có thể chuyển đổi kiến ​​thức đó thành một ngôn ngữ thiết kế gắn kết.

Thiết kế bảng màu kiểu

Trước khi chúng ta có thể bắt đầu thiết kế các thành phần sáng bóng, chúng ta cần phải đặt nền móng cho các thành phần đó. Chúng ta cần phải phá vỡ sản phẩm xuống dưới dạng xương trần.
Ngay cả những thành phần đơn giản nhất là một tập hợp các phong cách sử dụng lại nhiều …

Chúng ta cần phá vỡ mọi thứ xuống cho đến khi chúng ta đạt đến mức tối thiểu không thể rút gọn; Những phong cách thiết yếu nhất. Một nơi tốt để bắt đầu là danh sách đầy đủ thuộc tính kiểu CSS. Hầu hết các tài sản này chỉ chấp nhận giá trị cố định và do đó có thể được sử dụng lại trên mọi trang web trên internet. Các thuộc tính chấp nhận các giá trị tùy chỉnh cuối cùng sẽ phân biệt sản phẩm của chúng ta với các sản phẩm khác. Những giá trị tùy chỉnh này là những gì sẽ định nghĩa bảng kiểu toàn cầu của chúng ta. Bảng màu phong cách toàn cầu của chúng tôi là những gì chúng tôi sẽ sử dụng để thiết kế và xây dựng mọi khía cạnh của tất cả các sản phẩm của chúng tôi.
Khi chúng tôi kết thúc, không phải là một phong cách duy nhất nên tồn tại trong sản phẩm của chúng tôi mà chưa được xác định trước trong bảng màu kiểu toàn cầu của chúng tôi.

Màu

Hãy bắt đầu với tài sản phong cách rõ nhất – tài sản kiểu duy nhất có vẻ như các công cụ thiết kế hiện đại có thể được đặt tên, lưu trữ và sử dụng lại: màu sắc.

Đối với màu thương hiệu chính của chúng tôi, hãy chọn màu xanh lam. Đối với màu sắc thương hiệu thứ cấp của chúng tôi, hãy cùng với đối tác bổ sung của nó: cam.

Màu thương hiệu

Sử dụng màu sắc để truyền đạt thành công và thất bại là một mẫu thiết kế phổ biến, vì vậy hãy thêm màu xanh lá cây và màu đỏ vào bảng màu của chúng tôi cho mục đích đó. Màu sắc như màu đen và màu vàng có thể hoạt động tốt.

Màu thành công và thất bại

Cuối cùng, chúng ta cần một số màu xám. Hầu hết các giao diện người dùng sẽ cần ít nhất các màu xám sau đây:

Một màu xám nhạt đối với nền

Một màu xám đậm hơn cho đường viền, đường kẻ, đường nét hoặc đường chia.

Màu xám trung bình cho các phân nhóm phụ và bản sao cơ thể hỗ trợ.

Màu xám đậm cho các tiêu đề chính, bản sao thân và hình nền.

Tất nhiên, bạn có thể cần nhiều màu xám. Bạn có thể cần ba màu khác nhau cho bản sao cơ thể. Bạn có thể thích hai sắc thái đột qu different khác nhau. Tùy ban. Điểm ở đây là bạn xác định trước bất kỳ kiểu nào bạn cần trước để chúng có thể sử dụng lại được trong toàn bộ sản phẩm của bạn ở giai đoạn sau.

Là một liên lạc cuối cùng, chúng tôi cũng có thể muốn thêm các hiệu ứng màu hoặc bóng cho mỗi màu của chúng tôi. Đây có thể hữu ích khi nói đến thiết kế các thành phần để thêm ánh sáng nền hoặc đột qu dark tối.

Bóng tối

Bóng mờ là một thuộc tính phong cách thường được sử dụng trong hầu hết các giao diện người dùng. Từ những gì tôi đã nhìn thấy, rất nhiều nhà thiết kế chỉ đưa ra bóng tối off-the-cuff trong khi thiết kế các thành phần. Tương tự như vậy đối với hầu hết các thuộc tính phong cách thực sự. Thiết kế trong sự cô lập như thế này thường dẫn đến UI không nhất quán.

Hãy quay lại và xem xét những gì chúng tôi đang cố gắng để đạt được với bóng của chúng tôi. Chúng tôi rõ ràng đang cố gắng thêm một số quan điểm vào giao diện người dùng nhưng có thể nhiều thành phần có thể có lợi từ cùng một hiệu quả. Vì vậy, hãy trừu tượng các phong cách xa các thành phần cá nhân và vào bảng màu kiểu toàn cầu của chúng tôi.

Bốn bóng này nên đủ để tạo thành từng phần trong hệ thống của chúng ta:

Một bóng tinh tế để nâng cao các thành phần tương tác và thêm chi phí.

Một cái bóng rõ ràng hơn cho hiệu ứng hover trên các thành phần.

Một bóng mạnh để cung cấp cho các quan điểm để dropdowns / popovers và các thành phần tương tự khác.

Một bóng xa cho các thành phần phương thức.

Phạm vi bóng của chúng tôi từ tinh tế đến xa xôi.

Kiểu thang đo

Để tạo ra một hệ thống phân cấp thị giác thích hợp trên mỗi màn hình, chúng ta sẽ cần phải xác định một số cỡ chữ khác nhau.

Cũng giống như các ghi chú trong một đoạn nhạc, loại của chúng tôi phải tuân theo một quy mô. Điều này giúp duy trì nhịp nhàng thẳng đứng. Điều này có thể nghe có vẻ hơi nản lòng lúc đầu, nhưng may mắn thay, một số người rất thông minh đã tính toán hết cho chúng tôi qua nhiều năm. Tim Brown đã xây dựng một trang web tuyệt vời để hiển thị các loại cân. Adam Morse đã mở nguồn từ việc thực hiện quy mô loại diaton. Tôi thường thấy quy mô “Major Third” có hiệu quả đối với hầu hết các sản phẩm web.

Bước tiếp theo là quyết định khoảng kích thước phông chữ nào chúng ta cần, sau đó vẽ chúng trên thang đo kiểu “Major Third”.

Mặc định (1EM) cho văn bản chuẩn sẽ xuất hiện ở nhiều nơi trong trang tiếp thị của chúng tôi, giao diện người dùng vv 16px là kích thước trình duyệt mặc định vì vậy hãy chạy với điều đó.

Một kích thước hơi lớn hơn cho bản sao cơ thể lớn trong một blog ví dụ.

Một vài kích thước lớn hơn cho tiêu đề và phân nhóm.

Một kích thước rất lớn cho tiêu đề phần.

Ví dụ, một kích cỡ lớn lố bịch có thể cho giá trên trang giá cả.

Chúng tôi cũng cần một số kích thước nhỏ hơn cho bản sao cơ thể nhỏ hơn, gợi ý đầu vào và các văn bản phụ khác.

Bán kính biên

Bây giờ nó chỉ là vấn đề áp dụng cùng một quy trình cho mỗi thuộc tính phong cách duy nhất chấp nhận giá trị tùy chỉnh. Đối với các góc tròn, chúng ta sẽ cần các giá trị bán kính góc sau:

Bán kính biên nhỏ cho các thành phần nhỏ như hộp kiểm, thẻ và nhãn.

Bán kính biên giới trung bình cho các nút và đầu vào và các thành phần tương tự.

Bán kính ranh giới lớn cho thẻ, mô-đun và các thành phần lớn khác.

Phông quảng trường biên 2px, 4px và 8px

Lưu ý: Chúng tôi cũng cần bán kính biên 50% để xây dựng các thành phần vòng tròn như hình đại diện vv
Thang đo khoảng cách

Tài sản phong cách được sử dụng phổ biến nhất trong hầu hết các thiết kế là khoảng trống. Cho dù chúng ta đang phân cách các liên kết trong một tiêu đề, cách nhau các mục trong một lưới, thêm một khoảng cách giữa hình đại diện và một liên kết hoặc dãn ra một thành phần thả xuống – không khoảng trắng trong sản phẩm của chúng tôi nên độc đoán hoặc không chủ ý.

Giống như loại, bằng cách giữ nguyên một khoảng cách, chúng ta có thể đảm bảo rằng mỗi thành phần và bố cục của chúng ta đều thống nhất. Tôi yêu thích để-to khoảng cách là quy mô thiết kế vật liệu 8dp lưới. Elliot Dahl đã viết một bài báo hay về hệ thống lưới điện lưới 8pt và những lợi ích của nó.

Bám vào tăng 8dp, chúng ta có thể vạch ra một số giá trị khoảng cách mà chúng ta có thể sử dụng để thiết kế từng thành phần và bố cục trong bộ sản phẩm của chúng tôi.

Chúng ta cũng có thể sử dụng các giá trị khoảng cách này để xác định một tập hợp chiều rộng, chiều cao và chiều cao mà chúng ta có thể sử dụng lại để định cỡ các nút, hình thức đầu vào, hình đại diện và các thành phần tương tự khác. Vì các thành phần này thường xuất hiện bên cạnh nhau trong suốt các sản phẩm web, điều này sẽ giúp ích nếu chúng có cùng quy mô kích thước để tránh bất kỳ sự khác biệt không mong muốn.

Khoảng cách chữ

Như tôi đã đề cập ở trên, kích thước phông chữ không phải là thuộc tính kiểu duy nhất mà chúng ta cần phải xác định thành phần văn bản. Khoảng cách chữ cái là một tài sản hữu ích khác mà chúng ta có thể sử dụng để thắt chặt các tiêu đề lớn hoặc cho phép các tiêu đề nhỏ hơn thở ra.
3 hoặc 4 giá trị khoảng cách khoảng cách nên làm như lừa.

Xây dựng một thư viện thành phần

Bây giờ chúng ta đã định nghĩa bảng kiểu toàn cầu của chúng ta, chúng ta có thể lấy các khối xây dựng đó và bắt đầu xây dựng một thư viện thành phần. Đối với phần lớn, thiết kế các thành phần không phải là một quá trình sáng tạo – chúng tôi chỉ đơn giản là ánh xạ các kiểu được xác định trước thành các thành phần.

Ở giai đoạn này, chúng ta không cần một phong cách duy nhất chưa được định nghĩa trong bảng màu kiểu của chúng ta. Quá trình sáng tạo xảy ra trong giai đoạn thiết kế bảng màu. Từ thời điểm này, cho dù đó là màu sắc, cỡ chữ, giá trị lề / đệm, chiều cao / chiều rộng hoặc cách khác, mọi kiểu chúng tôi sử dụng để thiết kế các thành phần và bố cục của chúng tôi phải được lấy từ bảng kiểu của chúng tôi. Hầu như không có gì mới nên cần phải được giới thiệu. Điều đó nghe có vẻ cực đoan hoặc không hợp lý, nhưng trái lại, đây là nơi mà tôi nghĩ rất nhiều người bị lạc đường.

Dave Rupert đã điều hành cuộc thăm dò trên Twitter gần đây để hỏi vị trí đặt mã để ghi đè kiểu dáng trên một thành phần nút, ví dụ như nút đó nằm bên trong một thành phần phương thức.

Harry Roberts (kiểm tra công việc tuyệt vời này) sau đó giải thích suy nghĩ của mình về điều này trong bài báo của riêng mình. Sau đó, Jonathan Snook mở rộng với ý nghĩ của mình. Trong khi tôi đồng ý với kết luận của cả Harry và Jonathan, cuối cùng tôi nghĩ rằng toàn bộ cuộc tranh luận là không cần thiết.

Nó mâu thuẫn để thiết kế một thành phần với ý định tái sử dụng nó trên toàn cầu, sau đó sửa đổi thành phần đó chỉ trong một phần cụ thể của sản phẩm. Điều này đánh bại mục đích tạo thư viện thành phần toàn cầu ở vị trí đầu tiên. Bất cứ khi nào tôi nhìn thấy các phong cách ghi đè lên các phong cách khác, thường hoặc là một trường hợp hack vào một thành phần để làm cho nó phù hợp trong một không gian chật hẹp hoặc tacking trên một biến thể của một thành phần vì không có đủ quy hoạch đã đi vào trong giai đoạn thiết kế trước đó.

Mỗi lần bạn ghi đè lên một thành phần toàn cầu trong một khu vực của một sản phẩm, bạn cũng làm xói mòn tính nhất quán của hệ thống thiết kế của bạn. Khi bạn thực hiện sửa đổi không thường xuyên cho các thành phần rải rác trên sản phẩm của bạn, bạn không còn có một hệ thống thiết kế phù hợp. Bạn chỉ cần có một hệ thống thiết kế với một mớ hỗn độn không phù hợp treo ra các ass của nó.

Chúng ta hãy lấy một vài thành phần thông dụng và đi qua cách chúng ta có thể xây dựng chúng bằng cách sử dụng các kiểu chúng ta đã định nghĩa trong bảng màu trên.

Nút khiêm tốn

Hãy bắt đầu với một thành phần nút đơn giản để minh họa cách xây dựng các thành phần chỉ bằng cách sử dụng các kiểu chúng ta đã định nghĩa trước trong bảng kiểu của chúng ta.

Các thành phần khác

Một lần nữa, các màu sắc, kích cỡ phông chữ, bóng tối và giá trị đệm được tất cả các plucked trực tiếp từ bảng màu phong cách chúng tôi xác định trước ở trên.

Hãy thử một vài điều thú vị …

Khi chúng ta có một vài thành phần được thiết kế và xây dựng, chúng ta có thể bắt đầu kết hợp nhiều thành phần để tạo các thành phần phức tạp hơn như thành phần thả xuống này.

Thành phần thả xuống này không sử dụng một phong cách duy nhất bên ngoài bảng phong cách cơ bản mà chúng tôi đã xác định trước đó. Sử dụng phương pháp này, chúng tôi có thể thiết kế toàn bộ thư viện thành phần, sau đó chuyển sang bố cục rộng hơn và cuối cùng lên màn hình đầy đủ.

Lời khuyên cho đường bộ

Một số thành phần sẽ yêu cầu các giá trị không được định nghĩa trong bảng kiểu của chúng ta, ví dụ chiều rộng của thanh bên. Đôi khi các giá trị này sẽ chỉ là 1/3 chiều rộng khung nhìn hoặc một cái gì đó tương tự. Những lần khác, những giá trị này sẽ tùy ý và không thể tái sử dụng và điều đó hoàn toàn tốt đẹp. Vấn đề là suy nghĩ về phong cách nên được sử dụng lại được (nhất) và phong cách nào nên không.

Hãy để các thành phần làm việc của họ. Không cố gắng thêm lề cho các nút, đầu vào, đầu đề hoặc các thành phần khác. Ở cấp độ thành phần, bạn chỉ nên xác định các kiểu xuất hiện thống nhất trong mọi trường hợp duy nhất của thành phần đó. Do lợi nhuận khác nhau theo từng trường hợp, nên áp dụng chúng bằng cách sử dụng div wrapper. Harry Roberts đã viết một bài báo xuất sắc về vấn đề này.

Bài viết được dịch từ báo nước ngoài.

Các trang web liên quan: