Hướng dẫn thiết kế giao diện người dùng cuối cùng

NộI Dung

• 01. Chọn kiểu chữ của bạn
• 02. Chọn đúng bảng màu
• 03. Các liên kết và nút tạo kiểu
• 04. Tạo các thành phần của bạn
• 05. Tài liệu và cộng tác

Thiết kế giao diện người dùng là gì? Một câu hỏi hay hơn sẽ là, điều gì thực sự đi vào thiết kế giao diện người dùng? Tính thẩm mỹ? Khả năng sử dụng? Khả năng tiếp cận? Tất cả bọn họ? Làm thế nào để tất cả các yếu tố này kết hợp lại với nhau để mang lại trải nghiệm người dùng tối ưu và yếu tố nào nên có trước?

Khả năng truy cập phải luôn được ưu tiên hàng đầu, đặt nền tảng cho khả năng sử dụng tối ưu (sử dụng trình tạo trang web hàng đầu sẽ giúp ích ở đây). Và sau đó, khi giao diện người dùng vừa có thể truy cập vừa có thể sử dụng được, thì giao diện người dùng sẽ trông khá ổn về mặt thẩm mỹ (các công cụ thiết kế giao diện người dùng sẽ giúp ích ở đây). Sau đó, để đảm bảo thiết kế của bạn hoạt động ở tất cả các cấp, bạn sẽ cần kiểm tra kỹ lưỡng, điều này bạn có thể thực hiện với việc lựa chọn các công cụ kiểm tra người dùng tốt nhất của chúng tôi. Chúng ta hãy xem xét kỹ hơn các yếu tố nền tảng của hầu hết các thiết kế và những gì có thể làm để đảm bảo tính nhất quán về mặt hình ảnh.

01. Chọn kiểu chữ của bạn

Kiểu chữ tuyệt vời (giống như nhiều khía cạnh của thiết kế) kết hợp với khả năng tiếp cận. Thiết kế trực quan chắc chắn bổ sung vào trải nghiệm tổng thể của người dùng nhưng vào cuối ngày, người dùng đang tương tác với giao diện người dùng chứ không phải xem nó như một tác phẩm nghệ thuật. Các chữ cái dễ đọc dẫn đến sự rõ ràng và các từ có thể đọc được là những thứ giúp người dùng tiêu hóa nội dung một cách hiệu quả. Cả hai đều quan trọng hơn bất kỳ thẩm mỹ thị giác nào.

Tuy nhiên, kiểu chữ được thiết kế tốt vẫn có thể đáp ứng về mặt thẩm mỹ. Helvetica đen trên trắng (hoặc một phông chữ tương tự) có thể trở thành một thứ đẹp đẽ chỉ sau một vài cải tiến đơn giản về kiểu chữ. Bằng các cải tiến, chúng tôi có nghĩa là điều chỉnh kích thước phông chữ, chiều cao dòng, khoảng cách giữa các chữ cái, v.v. - không phải phông chữ hoặc màu sắc của văn bản.

Kiểu chữ 'đẹp' thực sự xấu khi không thể đọc được vì sự thất vọng luôn lấn át tính thẩm mỹ. Thiết kế tuyệt vời là cân đối và hài hòa.

Giống như nhiều khía cạnh của thiết kế giao diện người dùng, việc tinh chỉnh hình ảnh để cân bằng giữa khả năng tiếp cận và tính thẩm mỹ không phải là một thách thức. Thách thức là duy trì tính nhất quán trong toàn bộ thiết kế. Tính nhất quán thiết lập hệ thống phân cấp rõ ràng giữa các yếu tố có tầm quan trọng khác nhau, do đó giúp người dùng hiểu giao diện người dùng nhanh hơn và thậm chí hiểu nội dung hiệu quả hơn.

Khi nói đến tính dễ đọc và dễ đọc, kích thước phông chữ tối thiểu có thể chấp nhận được theo định nghĩa của Nguyên tắc hỗ trợ tiếp cận nội dung web WCAG 2.0 là 18pt (hoặc 14pt in đậm). Kích thước phông chữ tốt nhất để sử dụng phần lớn phụ thuộc vào chính phông chữ nhưng điều quan trọng là phải lưu ý đến hệ thống phân cấp trực quan và cách kích thước cơ sở này phân biệt chính nó với tóm tắt và tiêu đề (tức là h1>, h2>, h3>).

Với công cụ thiết kế giao diện người dùng mà bạn chọn (chúng tôi sẽ sử dụng InVision Studio), hãy tạo một loạt các lớp văn bản (T) và sau đó điều chỉnh tất cả các kích thước để tương quan với mẫu sau:

• h1>: 44px
• h2>: 33px
• h3>: 22px
• p>: 18px

Với InVision Studio (và tất cả các công cụ thiết kế giao diện người dùng khác), điều này được thực hiện bằng cách điều chỉnh các kiểu bằng cách sử dụng bảng Thanh tra ở phía bên tay phải.

Tiếp theo chọn phông chữ của bạn, nhưng hãy cẩn thận vì những gì bạn có thể nhận thấy với một số phông chữ là 18px p> và 22px h3> trông không khác gì tất cả. Chúng tôi có hai lựa chọn: điều chỉnh kích thước phông chữ hoặc xem xét một phông chữ khác cho các tiêu đề. Đi với cái sau nếu bạn dự đoán rằng thiết kế của bạn sẽ nặng văn bản.

Hãy ghi nhớ rằng:

• Thiết kế giao diện người dùng trực quan thường là một cách tiếp cận theo cảm tính
• Không có gì được quyết định; mọi thứ đều có thể thay đổi

Chiều cao giữa các dòng

Chiều cao dòng tối ưu đảm bảo rằng các dòng văn bản có đủ khoảng cách giữa chúng để đạt được mức độ dễ đọc tốt. Điều này ngày càng được công nhận là một 'tiêu chuẩn'; Công cụ Kiểm tra ngọn hải đăng của Google thậm chí còn đề xuất nó như một kiểm tra thủ công (hoặc thậm chí là một lá cờ nếu văn bản chứa các liên kết có thể quá gần nhau do chiều cao dòng dưới mức tối ưu).

Một lần nữa, WCAG giúp chúng tôi giải quyết vấn đề này, tuyên bố rằng chiều cao dòng phải bằng 1,5 lần kích thước phông chữ. Vì vậy, trong công cụ thiết kế giao diện người dùng của bạn dưới 'Dòng' (hoặc tương tự), chỉ cần nhân kích thước phông chữ với - ít nhất - 1,5. Ví dụ: nếu văn bản nội dung là 18px, thì chiều cao dòng sẽ là 27px (18 * 1.5 - bạn cũng có thể thực hiện phép toán trực tiếp trong Thanh tra). Tuy nhiên, một lần nữa, hãy lưu ý - nếu 1.6x cảm thấy phù hợp hơn, hãy sử dụng 1.6x. Hãy nhớ rằng các phông chữ khác nhau sẽ cho ra các kết quả khác nhau.

Còn quá sớm để nghĩ đến việc sử dụng dữ liệu thực trong thiết kế của chúng tôi, nhưng ít nhất, chúng ta vẫn nên sử dụng dữ liệu thực tế (thậm chí cả lorem ipsum). InVision Studio có một ứng dụng dữ liệu thực để giúp chúng tôi xem kiểu chữ của chúng tôi thực sự trông như thế nào.

Khoảng cách đoạn văn

Khoảng cách đoạn không phải là kiểu mà chúng ta có thể khai báo bằng cách sử dụng InVision Studio’s Inspector. Thay vào đó, chúng tôi sẽ cần căn chỉnh các lớp theo cách thủ công bằng Hướng dẫn thông minh (⌥). Tương tự với chiều cao dòng, hệ số ma thuật là 2x (gấp đôi kích thước phông chữ). Ví dụ: nếu kích thước phông chữ là 18px, thì phải có ít nhất khoảng cách 36px trước khi dẫn vào khối văn bản tiếp theo. Khoảng cách giữa các chữ cái phải ít nhất là 0,12.

Tuy nhiên, chúng tôi không cần phải lo lắng về điều này cho đến khi chúng tôi bắt đầu tạo các thành phần.

Các kiểu được chia sẻ

Nếu công cụ thiết kế giao diện người dùng của bạn hỗ trợ công cụ này (InVision Studio chưa có), hãy cân nhắc chuyển các kiểu chữ này thành 'Kiểu dùng chung' để có thể tái sử dụng nhanh chóng mà vẫn đảm bảo tính nhất quán về mặt hình ảnh. Điều này thường được thực hiện thông qua Thanh tra.

02. Chọn đúng bảng màu

Lựa chọn màu sắc hoàn hảo cho thiết kế của bạn vượt xa tính thẩm mỹ: nó có thể thông báo cho toàn bộ hệ thống phân cấp của trang web của bạn.

Khi nói đến thiết kế giao diện người dùng, màu sắc thường là một trong những điều đầu tiên mà chúng tôi thích nghiên cứu nhưng chúng tôi được dạy rằng đi thẳng vào thiết kế hình ảnh là một điều tồi tệ. Điều này chắc chắn đúng, tuy nhiên khi nói đến sự nhất quán về hình ảnh, màu sắc nên là mối quan tâm hàng đầu vì nó đóng các vai trò khác.

Màu sắc trong thiết kế giao diện người dùng có thể rất hiệu quả nhưng vì một số người dùng (thực tế là nhiều người) bị nhiều loại khuyết tật về thị giác, nên không phải lúc nào màu sắc cũng đáng tin cậy. Điều đó đang được nói, nó không nhất thiết là về màu sắc cụ thể đang được sử dụng, mà là về loại màu sắc. Điều này có thể không đúng khi nói đến thương hiệu vì màu sắc được sử dụng để tác động đến cảm xúc về mặt này, nhưng trong thiết kế giao diện người dùng, màu sắc cũng được sử dụng để truyền đạt ý định, ý nghĩa và tất nhiên là phân cấp hình ảnh.

01. Ngay đơ
Plugin Stark tương thích với Sketch và Adobe XD và giúp bạn kiểm tra độ tương phản màu và mô phỏng mù màu trực tiếp từ canvas. Sắp có hỗ trợ cho Figma và InVision Studio.
02.Màu sắc
Màu sắc là một tập hợp 90 sự kết hợp màu sắc có độ tương phản màu thích hợp để đáp ứng Hướng dẫn WCAG 2.0 - một số trong số chúng thậm chí còn đáp ứng được tiêu chuẩn AAA.
03. Dự án A11y
Dự án A11y là một trung tâm lớn cho tất cả những thứ liên quan đến khả năng tiếp cận. Nó bao gồm các tài nguyên, công cụ, thủ thuật, hướng dẫn và được tạo bởi nhà sản xuất plugin Stark và nhận tài trợ từ InVision.

Ba loại màu

Màu sắc có ý nghĩa, vì vậy điều quan trọng là không nên có quá nhiều màu sắc. Quá nhiều ý nghĩa dẫn đến nhiều thứ hơn mà người dùng phải hiểu và ghi nhớ - chưa kể nhiều sự kết hợp màu sắc hơn khiến chúng ta phải lo lắng. Nói chung, đây sẽ là định dạng được đề xuất:

• Màu gọi hành động (cũng là màu chính của thương hiệu)
• Màu tối trung tính (tốt hơn cho các phần tử giao diện người dùng hoặc chế độ tối)
• Đối với tất cả những điều trên, một biến thể sáng hơn và tối hơn một chút

Điều này cho phép những điều sau:

• Chế độ tối sẽ dễ dàng đạt được
• Màu CTA của chúng tôi sẽ không bao giờ xung đột với các màu khác
• Trong mọi trường hợp, chúng tôi sẽ có thể nhấn mạnh và giảm nhấn mạnh

Thiết lập bảng màu của bạn

Với công cụ thiết kế giao diện người dùng mà bạn chọn, hãy tạo một bản vẽ khá lớn (nhấn A) cho mỗi màu (có tên là 'Thương hiệu', 'Trung tính / Sáng' và 'Trung tính / Tối "). Sau đó, trong mỗi bảng vẽ, hãy tạo thêm các hình chữ nhật nhỏ hơn hiển thị các biến thể đậm hơn và nhạt hơn của màu và cũng chính là các màu khác.

Chúng tôi sẽ coi màu sáng hơn và tối hơn một chút khi tương ứng là thêm 10% màu trắng và 10% màu đen thêm. Khi bạn hoàn tất, hãy hiển thị bản sao của các kiểu chữ trên mỗi bản vẽ. Màu của các lớp văn bản này phải là màu sáng trung tính, ngoại trừ trên bảng vẽ có ánh sáng trung tính, nơi chúng phải là màu tối trung tính.

Tương phản

Tiếp theo, chúng tôi sẽ cần kiểm tra màu sắc của mình để có độ tương phản màu tối ưu. Có nhiều công cụ có thể làm điều này, ví dụ như plugin Stark cho Sketch và Adobe XD hoặc Contrast cho macOS - tuy nhiên, một giải pháp trực tuyến như Trình kiểm tra độ tương phản hoặc Trình kiểm tra độ tương phản màu sẽ hoạt động tốt.

Kiểm tra độ tương phản màu cho từng sự kết hợp và điều chỉnh màu sắc cho phù hợp. Nếu bạn không chắc chắn nên sử dụng màu gì, hãy thử sử dụng các đề xuất của Color Safe.

03. Các liên kết và nút tạo kiểu

Kích thước

Các nút và liên kết, giống như kiểu chữ, nên có một vài biến thể. Rốt cuộc, không phải tất cả các hành động đều có mức độ quan trọng như nhau và như chúng ta đã thảo luận trước đó, màu sắc là một phương pháp giao tiếp không đáng tin cậy, vì vậy nó không thể là phương pháp chính để ảnh hưởng đến hệ thống phân cấp thị giác. Chúng ta cũng cần đùa giỡn với kích thước.

Kiểm tra khả năng chi trả bằng hình ảnh là một bài kiểm tra khả năng sử dụng được sử dụng để xác định xem mục tiêu chạm dường như có thể nhấp được hay không. Đồng bộ hóa thiết kế từ Studio sang Freehand (⌘⇧F), gửi URL kết quả cho người thử nghiệm và yêu cầu họ khoanh tròn các yếu tố mà họ tin là có thể nhấp được.

Người dùng không phải InVision Studio cũng có thể sử dụng Freehand, nhưng người dùng InVision Studio có thể khởi chạy thiết kế của họ vào Freehand một cách liền mạch từ InVision Studio, đây là cách nhanh nhất và hiệu quả nhất để thu thập phản hồi trực quan từ người dùng.

Nói chung, chúng tôi khuyên bạn nên khai báo văn bản nút là 18px (giống như văn bản nội dung) nhưng bản thân các nút có ba biến thể về kích thước:

• Bình thường: Chiều cao 44px (góc tròn: 5px)
• Lớn: Chiều cao 54px (góc tròn: 10px)
• Cực lớn: Chiều cao 64px (góc tròn: 15px)

Điều này cho phép chúng tôi làm cho một số nút nhất định có vẻ quan trọng hơn mà không phụ thuộc vào màu sắc và cũng có thể lồng các nút (ví dụ: sử dụng một nút bên trong trường biểu mẫu trông tối giản).

Chiều sâu

Bất kể mục tiêu nhấn là một nút hay một trường biểu mẫu, bóng đổ nên được sử dụng để tăng độ sâu và do đó đề xuất khả năng tương tác. Một kiểu bóng duy nhất cho tất cả các biến thể của các nút và trường biểu mẫu là ổn.

Tương tác

Mỗi loại nút cần một biến thể để biểu thị trạng thái di chuột của nó. Điều này làm rõ cho người dùng biết rằng những gì họ đã cố gắng làm là hoàn toàn ổn và đảm bảo rằng họ sẽ tiếp tục mà không bị chậm trễ.

Đây thực sự là một trong những khía cạnh phức tạp hơn của việc duy trì tính nhất quán trực quan vì màu sắc thường là phong cách được ưa chuộng để thay đổi khi tạo ra trạng thái. Rất may, những thay đổi trạng thái này có thể tương đối tinh tế, vì vậy bạn có thể thay đổi màu sắc thành biến thể sáng hơn hoặc tối hơn một chút - đó chính là mục đích của chúng. Điều này cũng áp dụng cho các liên kết.

Quyết định chống lại điều này sẽ khiến chúng tôi sử dụng một màu hoặc đã có ý nghĩa quan trọng, dẫn đến việc người dùng trở nên bối rối hoặc quyết định chọn một màu khác. Quyết định sử dụng màu phụ là hoàn toàn ổn nhưng nó nên được để dành cho hình ảnh tiếp thị hơn là các yếu tố giao diện người dùng. Ít hơn là nhiều hơn (và dễ dàng hơn).

Hãy nhớ lặp lại bước này cho mọi bản vẽ. Không bao gồm các nút CTA có thương hiệu trên bảng vẽ thương hiệu - sau này chúng tôi sẽ đề cập đến điều gì sẽ xảy ra khi một số kết hợp nhất định không hoạt động.

04. Tạo các thành phần của bạn

Các thành phần là một công cụ tiết kiệm thời gian rất lớn và tất cả các công cụ thiết kế giao diện người dùng đều cung cấp tính năng này (ví dụ: trong Sketch, chúng được gọi là Biểu tượng). Trong Studio, chúng ta có thể tạo các thành phần bằng cách chọn tất cả các lớp sẽ tạo nên thành phần đó và sử dụngK đường tắt.

Sử dụng các thành phần

Wireframe rất hữu ích, không chỉ để thiết kế giao diện người dùng có khả năng sử dụng cao mà còn để tìm ra giao diện người dùng của chúng ta sẽ yêu cầu về lâu dài. Nó giống như chứng minh tương lai.

Điều này không có nghĩa là chúng ta cần thiết kế vô số các thành phần hoặc sẵn sàng cho bất kỳ tình huống nào có thể xảy ra nhưng nó có nghĩa là chúng ta cần phải sử dụng thái độ 'Điều gì xảy ra nếu?'.

Ví dụ: nếu wireframe của chúng tôi yêu cầu thành phần 3x1 nhưng chúng tôi biết rằng nội dung không được thiết lập sẵn, một chút suy ngẫm có thể khiến chúng tôi tự hỏi: 'Điều gì sẽ xảy ra nếu các thành phần này trở thành 4x1? ". Nguyên tắc chung là: chỉ thiết kế cho những nhu cầu của người dùng đã tồn tại nhưng cố gắng tạo ra các giải pháp tương đối linh hoạt. Nếu không, chúng ta sẽ kết thúc với một số ‘món nợ thiết kế’ rất lộn xộn sau này.

Bây giờ chúng ta có thể sử dụng lại thành phần này bằng cách kéo nó vào canvas từ Thư viện> Tài liệu ở phía bên trái, mặc dù hãy nhớ rằng quy trình làm việc này có thể khác nhau tùy thuộc vào công cụ giao diện người dùng của bạn.

Phương pháp tạo hướng dẫn kiểu này (và cuối cùng tạo ra chính thiết kế) hoạt động đặc biệt tốt với bố cục mô-đun / dựa trên thẻ, mặc dù 'các khu vực chung' như đầu trang, chân trang và điều hướng cũng là những ứng cử viên tuyệt vời cho một thành phần.

Giống như chúng ta đã làm với các kiểu chữ, màu sắc và các nút của mình, chúng ta phải nhớ tổ chức các thành phần của mình một cách cẩn thận.

Sử dụng các quy tắc của chúng tôi

Trước đó, chúng tôi đã đưa ra nhận xét về việc không sử dụng các nút CTA có thương hiệu ở trên cùng của màu thương hiệu, vì các nút CTA có thương hiệu rõ ràng cần phải nổi bật giữa mọi thứ khác. Vậy làm cách nào để chúng ta tạo ra một thành phần có thương hiệu trong khi vẫn có thể sử dụng nút CTA có thương hiệu? Rốt cuộc, nếu chúng ta đang sử dụng các nút tối màu trung tính, chẳng hạn như các nút điều hướng hoặc đơn giản là các nút ít quan trọng hơn, đó sẽ không phải là một tùy chọn, phải không?

Đúng. Vì vậy, đây sẽ là cơ hội lý tưởng để tạo một thành phần - cụ thể là tổ hợp tiêu đề + văn bản + nút. Lưu ý cách tôi đã tạo phông nền ‘thẻ’ ánh sáng trung tính để cho phép sử dụng nút được gắn thương hiệu. Tương tự, trường biểu mẫu ánh sáng trung tính (trường biểu mẫu thường có màu trắng vì mô hình tinh thần đồng nghĩa với biểu mẫu giấy) trông không tuyệt vời trên nền sáng trung tính vì vậy chúng chỉ có thể được sử dụng trên nền tối trung tính - trực tiếp hoặc bên trong một thành phần tối trung tính. Đây là cách chúng tôi làm cho thiết kế của mình trở nên linh hoạt trong khi tuân thủ các quy tắc của chúng tôi và duy trì tính nhất quán.

Bài kiểm tra về áp lực

Lý tưởng nhất, cách nhanh nhất và hiệu quả nhất để đảm bảo tính chắc chắn trong thiết kế của chúng tôi là kiểm tra nó. Đưa một thiết kế vào thử nghiệm có nghĩa là tàn nhẫn. Giả sử rằng chúng ta có một điều hướng với X lượng mục điều hướng vì đó là yêu cầu; để thực sự đảm bảo tính linh hoạt, hãy thử thay đổi các yêu cầu này bằng cách thêm nhiều mục điều hướng hoặc, để thực sự ném cờ lê vào các công trình, hãy thử thêm một mục điều hướng có thứ bậc trực quan cao hơn những mục khác. Các quy tắc về kích thước, kiểu chữ và màu sắc của chúng ta có cho phép những thứ như thế này không? Hay để cung cấp khả năng sử dụng tối ưu, chúng ta cần một quy tắc khác?

Hãy nhớ rằng có sự khác biệt giữa việc thêm các quy tắc và bẻ cong các quy tắc. Nhiều trường hợp cạnh hơn có nghĩa là ít nhất quán hơn, vì vậy, hầu hết thời gian tốt hơn là vì lợi ích của khả năng sử dụng, chỉ cần xem xét lại thành phần.

05. Tài liệu và cộng tác

Làm cách nào để chúng tôi làm cho các tệp thiết kế của mình dễ sử dụng hơn cho cả chính chúng tôi và bất kỳ nhà thiết kế nào khác có thể sử dụng tệp thiết kế của chúng tôi? Chà, giữ chúng được lưu trữ an toàn trong bộ nhớ đám mây dùng chung, đáng tin cậy là điều quan trọng, như bạn sẽ tìm hiểu.

Màu sắc

Bước đầu tiên là lưu tất cả các màu vào mẫu 'Màu tài liệu' nếu chúng ta chưa làm như vậy - điều này sẽ giúp chúng ta truy cập dễ dàng hơn khi chúng ta cần áp dụng chúng trong thiết kế của mình.Để thực hiện việc này, hãy mở tiện ích chọn màu từ Trình kiểm tra, chọn 'Màu tài liệu' từ menu thả xuống và sau đó nhấp vào biểu tượng + để thêm màu vào mẫu. Điều này hoạt động theo cùng một cách trong hầu hết các công cụ giao diện người dùng.

Thư viện được chia sẻ

Tiếp theo, chúng ta cần chuyển đổi tài liệu của mình - hoàn chỉnh với các kiểu chữ, màu sắc, các nút, các khu vực chung và các thành phần cơ bản - thành một thư viện dùng chung.

Về cơ bản, điều này có nghĩa là mọi phần tử cần phải là một thành phần, ngay cả khi nó chỉ bao gồm một lớp. Nhấp vào nút + ‌ trong thanh bên Thư viện bên trái, sau đó nhập chính tài liệu này vào một tài liệu mới. Đúng vậy: tài liệu của chúng tôi hiện là một thư viện và sẵn sàng được sử dụng để thiết kế giao diện người dùng với tính nhất quán được đảm bảo.

InVision Studio hơi hạn chế vì nó chưa đồng bộ hóa với công cụ Trình quản lý hệ thống thiết kế chính thức của InVision nhưng đủ dễ dàng để chứa thư viện trong Dropbox cho các nhà thiết kế khác sử dụng và cập nhật theo thời gian. Khi một thay đổi được thực hiện (cục bộ hoặc từ xa), mọi tệp Studio sử dụng thư viện (một lần nữa, cục bộ hoặc từ xa) sẽ hỏi bạn có muốn cập nhật màu sắc và thành phần hay không. Đây là cách các thư viện thiết kế được duy trì giữa các nhóm.

Khi cần thiết kế giao diện người dùng nhất quán về mặt trực quan, hãy sử dụng lại mọi thứ. Thiết kế các nút, sau đó sử dụng các nút để tạo các thành phần của nút, sau đó sử dụng
các thành phần nút để tạo các thành phần khác như cảnh báo và hộp thoại.

Chỉ cần không tạo các thành phần không cần thiết. Hãy nhớ rằng, xây dựng một thư viện là một nỗ lực cộng tác liên tục. Nó không phải được hoàn thành tất cả cùng một lúc, hoàn thành bởi một mình bạn hoặc hoàn thành mãi mãi. Nó chỉ phải truyền đạt một ngôn ngữ.

Thiết kế theo quy mô

Khi một thiết kế mở rộng, việc quản lý nó trở nên khó khăn hơn. Có nhiều điều chỉnh khác nhau mà chúng tôi có thể muốn thực hiện để giữ cho nó hoạt động hiệu quả và có thể bảo trì được, đặc biệt là vì DSM của InVision chưa hoạt động với Studio.

Ví dụ: chúng ta có thể muốn sử dụng các lớp văn bản để chú thích thư viện của mình như một phương tiện giải thích các trường hợp sử dụng của các phần tử khác nhau. Đối với các kiểu chữ, chúng tôi thậm chí có thể chỉnh sửa văn bản để mang tính mô tả hơn (ví dụ: "h1> / 1.3 / 44px"). Điều này nói rằng h1>s phải là 44px và có chiều cao dòng là 1,3.

Bàn giao thiết kế

Các công cụ hỗ trợ thiết kế hiển thị các kiểu khác nhau được sử dụng bởi mọi thành phần trong thiết kế để các nhà phát triển có thể xây dựng ứng dụng hoặc trang web. Những công cụ này bao gồm tổng quan về các kiểu và cũng có một bản sao của mẫu 'màu tài liệu'. Các nhà phát triển thậm chí có thể sao chép các kiểu này dưới dạng mã, điều này thật tuyệt vời nếu bạn quyết định tạo bất kỳ tài liệu thiết kế bằng văn bản nào và bạn muốn bao gồm các mô tả đoạn mã của các thành phần.

Nếu bạn lo lắng về việc khắc phục sự cố và quản lý một trang web, hãy đảm bảo rằng bạn có dịch vụ lưu trữ web phù hợp sẽ hữu ích, nhưng đối với hệ thống thiết kế của bạn, công cụ xử lý thiết kế của InVision, Kiểm tra, mới là thứ nên sử dụng. Để sử dụng nó, chúng tôi nhấp vào nút / biểu tượng 'Xuất bản lên InVision' trong InVision Studio, mở URL kết quả và sau đó nhấn để chuyển sang Chế độ kiểm tra. Nó thực sự tiện lợi.

Nội dung này ban đầu xuất hiện trên tạp chí net.