Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Prototyping
Webdesign

Tạo một nguyên mẫu Giao diện Người dùng Lo-fi (độ chi tiết thấp) trong 60 Giây:

by
Difficulty:BeginnerLength:QuickLanguages:
This post is part of a series called 60 Second Video Tutorials.
Create a “Coming Soon” Page in 60 Seconds

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Chúng ta hãy tạo một nguyên mẫu Lo Fi, trong sáu mươi giây, sử dụng bộ kit MadKit Sketch UI từ themeforest!

Hãy xem video hướng dẫn

Cách thực hiện

Trong bản sao tập tin (Lo-Fi UI) của MadKit Sketch, tạo một trang mới. Vào Insert > Symbols > Base > Shapes > Window để tạo một cửa sổ trình duyệt mới cho mô hình của chúng ta.

Shapes
Shapes > window

Đồng với Shapes bạn chọn một browser-header, và sau đó đặt cho nguyên mẫu của bạn một cái tên.

Nội dung là Vua

Bây giờ chúng ta sẽ lắp ráp nội dung của nguyên mẫu bằng cách sử dụng các biểu tượng có thể được tìm thấy ở Categories (bắt đầu với một nền video). Tiếp theo chúng ta sẽ thêm một danh sách sản phẩm, một slider các ý kiến khách hàng, sau đó chúng ta sẽ hiển thị các bài blog, chúng ta sẽ thêm một số thông tin về các thành viên của công ty, sau đó chúng ta sẽ tóm tắt bằng một số thông tin liên hệ.

Stree-etch

Căng đối tượng cửa sổ, để nó vừa với nội dung của bạn:

stretch window
Căng hình cửa sổ

Bây giờ chọn tất cả sáu phần nội dung, nhấp chuột phải lên menu layers, và chọn Detach from Symbol. Trong đối tượng Video BG ẩn Base/Shapes/window và thiết lập radius của Video Background thành 0.

Bây giờ chúng ta sẽ ẩn đối tượng window cho mỗi hai phần nội dung, sau đó đổi tên các phần mà chúng ta sẽ ẩn đường viền và thiết lập radius thành 0.

Cuối cùng, chọn cửa sổ trình duyệt và các biểu tượng header và kéo tất cả chúng lên trên cùng.

Chúng ta đã xong

Đó là cách bạn tạo một nguyên mẫu Giao diện Người dùng Lo-fi trong sáu mươi giây! Hãy xem thêm những thứ giúp cho việc tạo nguyên mẫu trong Sketch trên Themeforest:

wireframe Sketch app templates
Các nguyên mẫu ứng dụng cho Sketch trên Themeforest
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.