Hôm nay tôi sẽ chia sẻ với bạn ứng dụng các cửa sổ bật lên trong thiết kế. Pop-up là một cách phổ biến để liên kết các tương tác sản phẩm và hoạt động của người dùng. Nó không chỉ xử lý “các tác vụ tức thời” của người dùng mà còn thông báo cho người dùng về phản hồi hoạt động hoặc trạng thái hiện tại làm dấu nhắc. Nhưng bạn có thực sự biết nó đủ không?
Bối cảnh
Hai ngày trước, một người bạn đã hỏi tôi về “cửa sổ bật lên” và nói rằng người giám sát hiện đã yêu cầu anh ta sắp xếp các cửa sổ bật lên mà sản phẩm đang sử dụng và sắp xếp chúng theo tiêu chuẩn. Điều này làm cho anh ta cảm thấy bất lực. Một cửa sổ bật lên chỉ là một cửa sổ bật lên? Làm thế nào bạn có thể làm cho cửa sổ bật lên của bạn có ý nghĩa?
Hầu hết các nhà thiết kế bình thường của chúng tôi làm việc tại một điểm mỗi ngày, chỉ đơn giản là thực hiện tương tác hoặc tầm nhìn, đó là những gì chúng ta thường gọi là điểm đơn; Tuy nhiên, các nhà thiết kế cao cấp có thể cần phải giải quyết vấn đề của dòng, không chỉ là một điểm nhất định; Trong giai đoạn thiết kế cao cấp, bạn cũng có thể cần giải quyết một số vấn đề hời hợt và các chuyên gia thiết kế có thể làm những việc hời hợt.
Nhiều người có thể có câu hỏi này. Làm thế nào để có được từ điểm này sang điểm khác? Các thông số kỹ thuật trên để sắp xếp các cửa sổ bật lên làm ví dụ, dường như là một yêu cầu đơn giản. Làm thế nào để chúng tôi phản ánh giá trị thiết kế của nó? Tiếp theo, tôi sẽ chia sẻ một trường hợp bật lên của dự án trước đây của tôi, hy vọng sẽ giúp bạn mở ra ý tưởng này!
1. Tùy chỉnh kích thước cửa sổ bật lên
Vì nó là yêu cầu cửa sổ bật lên, điều đầu tiên là làm thế nào để xác định kích thước. Bạn cũng có thể tự hỏi làm thế nào bạn sẽ xác định quy mô khi bạn nhận được dự án này? Hầu hết mọi người có thể đề cập đến nó bằng cách nhìn vào các đối thủ cạnh tranh. Đây là một cách; Nhưng có một cách khoa học hơn?
Chỉ mục Baidu
Chỉ mục Baidu có thể giúp chúng tôi tìm thấy nhiều dữ liệu tốt, chẳng hạn như độ phân giải màn hình, chia sẻ điện thoại di động, v.v.! Khi tôi thực sự bắt đầu thiết kế hộp đạn, có nhiều độ phân giải màn hình khác nhau trên thị trường. Nếu bạn muốn thay đổi kích thước tất cả các độ phân giải màn hình thành một kích thước, bạn có thể tham khảo dữ liệu sau:
Đây là thống kê từ hai năm trước và có thể có các bản cập nhật ngay bây giờ. Chúng tôi chủ yếu rút ra các ý tưởng của nó:
Thông qua dữ liệu này, chúng tôi có thể nhận được độ phân giải chính của Android 720×1280 và 1080×1920; Apple là 750×1334 và 640×1136, do đó, cửa sổ bật lên của chúng tôi có thể được hiển thị đầy đủ dưới 640×1136, không có vấn đề gì với các kích thước khác.
Như được hiển thị trong hình trên, độ phân giải chính của điện thoại di động thấp nhất trên thị trường là 640x1136px. Miễn là cửa sổ bật lên được hiển thị bình thường ở kích thước này, sẽ không có vấn đề gì với các kích thước khác. Theo kinh nghiệm trong quá khứ, cửa sổ bật lên của 640px là quá đủ. Lấy iPhone làm ví dụ. Sau khi loại bỏ chiều cao của các thanh điều hướng trên và dưới của hệ thống, bạn có thể nhận được: 1334-128 (thanh điều hướng + thanh trạng thái) -98px (chiều cao thanh điều hướng dưới cùng) = 1108px; Đảm bảo rằng chiều cao của cửa sổ bật lên được hiển thị đầy đủ trong phạm vi này.
2. Kết hợp các loại cửa sổ bật lên
Trong công việc hàng ngày của chúng tôi, chúng tôi thường cần xem xét loại cửa sổ bật lên nào phù hợp với kịch bản hoặc nhu cầu kinh doanh hiện tại? Sử dụng cửa sổ bật lên của hệ thống hoặc tạo một phong cách đặc biệt cho mình?
Điều này đòi hỏi bạn phải hiểu toàn diện về các loại cửa sổ bật lên, để bạn có thể nhanh chóng xác định thời điểm và loại cửa sổ bật lên nào phù hợp hơn.
Các tính năng cửa sổ bật lên
Loại mẹo: còn được gọi là phản hồi hoạt động, thường là thông tin phản hồi của tương tác sau khi hoàn thành một nhiệm vụ nhất định. Nói chung, nó sẽ tự động biến mất mà không cần nhấp chuột, và thường không có mặt nạ đằng sau nó. Khi thiết kế một lớp nổi nhỏ duy nhất, hãy chú ý đến nguyên tắc thống nhất
Hướng dẫn hoạt động: Nói chung, cần hướng dẫn người dùng thực hiện hoạt động tiếp theo, chẳng hạn như chia sẻ, đặt hàng Thông tin, thường là một hoạt động tương đối đơn giản và không yêu cầu một trang riêng để hiển thị. Hộp bật lên là một cách tuyệt vời để kết nối. Cửa sổ bật lên này thường áp dụng một thiết kế có hệ thống, và cũng ghi nhớ sự thống nhất trực quan: màu sắc, khoảng cách, phong cách copywriting, v.v. Trên thực tế, vì trang này cần thu hút người dùng chú ý nhiều hơn đến nội dung thông tin, bạn thường có thể áp dụng kiểu thiết kế gần cửa sổ bật lên của hệ thống gốc.
3. Việc tích hợp nhận thức về thương hiệu
Nhiều người tò mò về cách một cửa sổ bật lên thông thường có thể được tích hợp vào ý nghĩa của thương hiệu? Trong thực tế, trong một thiết kế cảnh, các yếu tố thương hiệu có thể được kết hợp vào mọi nơi.
Chúng tôi đã không chú ý nhiều đến màu sắc của mặt nạ trước đây. Có thể màu là màu đen tinh khiết#000 hoặc trắng tinh khiết#ffff. Trong thực tế, màu sắc và độ trong của mặt nạ có thể được khớp thêm. Ví dụ: nếu sản phẩm có màu xanh, bạn có thể trộn một chút màu xanh lam trong màu đen; Nếu sản phẩm có màu sáng, thì hãy sử dụng màu trắng hoặc xám nhạt, hoặc cố gắng khớp với màu sáng với độ trong suốt cao hơn, v.v., và thiết kế mặt nạ phù hợp với tính khí của sản phẩm theo giai điệu của sản phẩm.
Nhìn vào những gì người khác làm
Màu mặt nạ của Tumblr áp dụng màu thương hiệu của nó (54, 70, 93, 95)
4. Xu hướng tương lai của cửa sổ bật lên
di động đang ảnh hưởng đến mọi ngườiTrong khi chúng ta sống, chúng ta cũng lãnh đạo xu hướng thiết kế; Trong những năm gần đây, các sản phẩm đã theo đuổi tính nhất quán của nhiều thiết bị đầu cuối. Như đã đề cập trước đó, về mặt hiệu suất trực quan, nhiều sản phẩm sẽ được thiết kế để có hiệu ứng hình ảnh tốt hơn dưới màn hình lớn. Khi sản phẩm ngày càng ngắn gọn hơn, UI trở nên nhẹ hơn và thậm chí còn minh bạch hơn. Hộp đạn có thể không còn giới hạn cho thẻ. Nhiều sản phẩm trên thị trường đã thử công nghệ này, sử dụng toàn bộ màn hình thay vì thẻ màu nền. Đây có thể là một xu hướng trong tương lai và xứng đáng được thiết kế sự chú ý.
Hộp đăng nhập của Squarespace được thiết kế trực tiếp trong toàn màn hình
Hộp thẻ đã sửa đổi của Evernote
5. Đầu ra cuối cùng
Với suy nghĩ và khấu trừ trước đó, bạn có thể bắt đầu sắp xếp tiêu chuẩn hóa; Ngay cả khi nó chỉ là một cửa sổ bật lên đơn giản, nó cũng chứa suy nghĩ của bạn về các dòng và cảnh tổng thể, đó là hướng phản ánh giá trị thiết kế của bạn.
Bước 1. Xác định kích thước của cửa sổ bật lên
Người dùng chung cần duy trì sự thống nhất trực quan tổng thể sau khi xác nhận thông tin: màu sắc, khoảng cách, kiểu sao chép, v.v., các nút tròn, kích thước cố định và chiều rộng, chiều cao mặc định là 750px, có thể thấy khi xem xét các mô hình nhỏ. Mỗi thương gia không đáp ứng kích thước nội dung sẽ tự điều chỉnh chiều cao.
Bước thứ hai. Chọn Loại cửa sổ bật lên Theo kịch bản kinh doanh
Chọn theo cảnh, đó là cửa sổ bật lên nội dung (văn bản thuần túy, hình ảnh + văn bản, hình ảnh thuần túy, bật lên đặc biệt, GIF, cuộn nội dung, v.v.); hoặc loại xác nhận thông tin.
B1. Mẹo
B2. Hình ảnh + Tiêu đề B2. Hình ảnh + văn bản + nội dung B3. Chèn một hình ảnh sản phẩm dưới văn bản.
B4. Văn bản đơn giản B5. Hình thuần khiết B6. Kích thước bật lên tối thiểu
B7. Cửa sổ chống đạn lớn + cửa sổ chống đạn có hình dạng đặc biệt + GIF (lên đến không quá 1000)
B8. Cửa sổ bật lên xác nhận thông tin
Last
ở trên là chia sẻ kinh nghiệm bật lên trong công việc hàng ngày của tôi. Cách thiết kế một dòng với toàn bộ và suy nghĩ hoàn chỉnh thông qua một yêu cầu đơn giản, giao diện nhỏ và một dấu chấm nhỏ; Khả năng của nhà thiết kế không gì khác hơn là giải quyết vấn đề về điểm và dần dần giải quyết vấn đề của các đường và thậm chí các bề mặt. Tôi hy vọng mọi người có thể trở nên mạnh mẽ hơn và mạnh mẽ hơn.
