Tùy chỉnh yêu cầu thiết kế

Mục tiêu chính của bạn là đưa ra cho Developer thấy được sự khác nhau về kích thước của các nhân tố, và sự khác biệt về độ rộng giữa chúng. Nghĩ về sự tương quan, không phải là các giá trị tĩnh. Nếu bạn chuẩn bị một layout với các kích thước khác nhau, chẳng hạn như 320×568, 1024×768, và 1920×1080, điều này không có nghĩa là công việc của bạn đã hoàn thành. Bạn vẫn cần phải chứng minh và giải thích cho sự thiết lập của bạn.

• Cuối các cột và nội dung bên trong sẽ có gì?
• Những thay đổi nào có thể xảy ra nếu thay đổi kích thước tổng thể (và chắc rằng các cột của bạn vẫn giữ được những khoảng cách phù hợp)
• Nó sẽ thay đổi hiệu ứng của hình ảnh ra sao, và chúng ra đã chuẩn bị các hình ảnh phù hợp với kết cấu đó chưa? Xem qua ví dụ sau: Bạn có một bức hình với kích thước 200×200 ở màn hình, và quyết định mở hết 100% độ rộng – với kích thước của màn hình – là 375×667. Trong trường hợp này, bạn sẽ cần đến một bức hình với chiều rộng nhiều hơn 750px để không bị vỡ hình trên thiết bị điện thoại.

Một lỗi thông thường mà nhiều designer hay mắc phải, đó là quên mất chiều cao và thường chỉ cho ra kết cấu của các nhân tố dựa trên sự thay đổi chiều rộng của khung chứa. Thỉnh thoảng, bạn sẽ có các nhân tố liên quan đến chiều cao, và bạn sẽ cần phải giải thích về kết cấu của chúng cho các Developer. Bạn cần phải thiết lập chiều cao tối thiểu hoặc tối đa, và vị trí của từng nhân tố bên trong.

Ví dụ về tùy chỉnh kích thước thiết kế

Sử dụng một số kích cỡ cơ bản sau:320×568, 375×667, 768×1024, 1024×768, 1280×768, 1366×768, và1920×1080. Và dĩ nhiên, đừng quên kiểm nghiệm thiết kế của bạn trên góc nhìn của điện thoại.

Đây là một ví dụ về văn bản trong các cột vẫn phù hợp với phiên bản màn hình PC, nhưng vẫn có một số vấn đề cần điều chính. Bạn cần xác định cách để làm việc với nó.

Đừng dẫm lại vết xe đổ

Nếu bạn không có thời gian, và không chắc chắn về việc xây dựng các thành phần nhỏ (như một menu) từ một đống lộn xộn, hãy hỏi developer của bạn về những gợi ý của họ, và tham khảo một vài cái trước đó. 1 trường hợp điển hình là việc sử dụng lại 1 datepicker. Quá nhiều người nghĩ rằng họ chỉ cần vẽ ra một tờ lịch với các con số trên đó, nhưng bạn còn phải nghĩ về những yếu tố sau:

• Bạn sẽ phải đánh dấu ngày từ cả tháng trước và tháng sau.
• Cái gì sẽ tạo ứng luân chuyển giữa các ngày.
• Làm sao để đánh dấu ngày hiện tại?
• Làm sao để đánh dấu ngày được chọn?
• Làm sao để thay đổi tháng hoặc năm?

Ví dụ đơn giản về datepiker

Chúng ta đang sống trong một thế giới nơi mà mọi người đều đang cố gắng xây dựng mô hình khởi nghiệp của riêng mình. Thỉnh thoảng, sẽ tốt hơn cho khách hàng nếu sử dụng dịch vụ từ MVP hơn là lãng phí thời gian và tiền bạc với một designer đang cố gắng sáng tạo. Các designer nên hiểu rằng họ có thể sử dụng những nguồn tài liệu có sẵn và ứng dụng chúng một cách phù hợp. Điều này sẽ giúp giảm thiểu chi phí bất hợp lý trong công việc của developer, thậm chí, điều này còn rất cần thiết trong việc tạo ra các giải pháp phù hợp.

Animations (Diễn hoạt) và cú click prototypes

Thay vì ghi chú để giải thích về kết cấu hoặc dáng về của animation của bạn . Nó không hoàn toàn giống như là, những mô tả của bạn về animation sẽ gần giống như trong trí tưởng tượng của bạn. Sử dụng Invision hoặc Axure để  tạo ra nguyên mẫu cho người dùng, và sử dụng Principle, Framer, hoặc Adobe After Hiệu ứng cho animation. Nó còn giúp cho bạn kiểm tra được mức độ giả định trước khi tiến hành. Animations và prototypes  có thể mang lại một phần trình bày ấn tượng với khách hàng, và giúp cho  những thiết kế của càng thêm phần đặc biệt hơn.

Tạo ra một prototype đơn giản (Flinto app)

Like và share nếu thấy bài viết này hữu ích nha!

Nguồn: Medium