Bút chì là công cụ wireframing mà chúng tôi có thể sử dụng để phác họa mô hình giao diện người dùng của ứng dụng. Điều tuyệt vời về Pencil là nó nhẹ, dễ sử dụng và được tích hợp chặt chẽ với Firefox. Trên hết nó là một ứng dụng mã nguồn mở miễn phí! Ở phần cuối của bài viết, chúng tôi sẽ giới thiệu cho các bạn một bản demo đơn giản về cách sử dụng Pencil để tạo ra một khung hình như Brizzly.
Tại sao chúng ta tạo ra wireframes?
Một wireframe là một phác thảo của một ý tưởng bố trí trang. Wireframe tập trung vào thiết kế thông tin của một trang để đảm bảo rằng thiết kế phù hợp với những gì người dùng cần. Một wireframe thường bao gồm các hình dạng khác nhau (chẳng hạn như hộp, hình bầu dục, và kim cương) để đại diện cho nội dung, chức năng, và các yếu tố điều hướng. Những hình dạng này hiển thị vị trí của chúng trên trang.
Lúc đầu nó có vẻ như một sự lãng phí thời gian tạo bản phác thảo thô của một trang. Khung dây là điều quan trọng để giúp người dùng của bạn tập trung vào yếu tố quan trọng trên trang của bạn. Tạo bản phác thảo thô sơ của một trang, không có các yếu tố hình ảnh ưa thích, chuyển sự chú ý của người dùng sang các yếu tố quan trọng như định cỡ, bố cục và sắp xếp các thành phần trang của bạn. Chúng tôi sẽ bắt đầu hiểu rõ hơn về những gì khách hàng thực sự muốn và cần phần mềm khi người dùng bắt đầu tập trung vào các yếu tố quan trọng của trang. Tạo khung dây cho phép bạn và người dùng của bạn cộng tác hiệu quả và xác định sớm vấn đề thiết kế tiềm năng.
Bắt đầu với Pencil
Tải xuống Bút chì từ trang tiện ích bổ sung của Pencil. Sau khi bạn cài đặt Bút chì, bạn có thể truy cập bút chì từ ‘Công cụ’> ‘Bút chì phác thảo’.
Tạo hình chữ nhật
Bước đầu tiên để tạo hình dạng khung dây là kéo hình dạng từ trình đơn 'Bộ sưu tập hình dạng' vào canvas.
Tạo tab
Các tab nhà, nháp, hình ảnh là ba tab được xếp chồng lên nhau. Kéo ba 'Bảng điều khiển tab' vào hình chữ nhật. Thay đổi kích thước mỗi tab để mỗi tab hiển thị cạnh nhau.
Tạo văn bản
Kéo hình dạng ‘Văn bản’ vào canvas để tạo từng menu. Chúng tôi có thể điều chỉnh giao diện văn bản bằng cách truy cập cửa sổ thuộc tính văn bản.
Lời khuyên hữu ích cho việc thay đổi màu sắc
Màu sắc là một trong những phần quan trọng nhất trong việc cung cấp một wireframe dễ chịu. Cách chính xác nhất để thay đổi màu sắc của hình dạng là xác định mã HTML của màu. Việc tìm ra mã HTML cho một màu cụ thể có thể khó khăn. Chúng tôi có thể sử dụng bảng màu HTML từ w3cschools.com để tra cứu mã HTML phù hợp với một màu cụ thể.
Chúng tôi cũng thích sử dụng colorzilla để chọn màu từ màn hình và sử dụng nó trong Pencil. Nhấp vào biểu tượng ống nhỏ giọt ở góc dưới cùng bên trái của Firefox để chọn màu trên màn hình. Chúng tôi cũng có thể mở bảng chọn màu của ColorZilla bằng cách nhấp đúp vào biểu tượng thả mắt. Chỉ cần sao chép dán mã Hex vào mã HTML màu của Pencil.
Phần kết luận
Bút chì rất dễ sử dụng công cụ wireframing. Tích hợp bút chì với Firefox giúp chúng tôi có thể sử dụng các plugin Firefox khác để giúp tạo khung dây tốt hơn
Liên kết Tải xuống bút chì Tải xuống Colorzilla W3C HTML màu Cheat Sheet
