Kỹ thuật thiết kế website với những tính năng di động

Kỹ thuật thiết kế website với những tính năng di động


Cho đến gần đây, việc tạo ra các thiết kế web điện thoại di động mà nhìn và cảm thấy như các ứng dụng bản địa khá nhiều là một giấc mơ không tưởng. Có rất nhiều cách giải quyết sáng tạo để thử và mang lại cho rằng mẫu thiết kế của bạn 'cảm thấy' được google duyệt web di động và đánh giá cao, nhưng cho đến nay chúng tôi đã vật lộn để thu hẹp khoảng cách giữa tính năng trên di động và các web.

Tuy nhiên, một loạt các mới, điện thoại thông minh cao-powered được cho phép nhà thiết kế để cuối cùng mở ra phức tạp, performant, bản địa cảm giác mẫu giao diện người dùng điện thoại thông minh - thiết kế và xây dựng cho web. Những mô hình được làm mờ đi ranh giới giữa các ứng dụng và các web.

Hãy đưa website thích ứng mới của là một ví dụ thú vị về cách để cung cấp một trải nghiệm người dùng tuyệt vời tại màn hình kích cỡ khác nhau, trong khi cũng nhắm mục tiêu khả năng thiết bị khác nhau. Điều này đã dẫn đến một số thiết kế điện thoại di động thực sự nâng cao làm việc rất tốt trên các thiết bị gần đây.

Trong bài này, bạn sẽ tìm thấy năm mẫu thiết kế tuyệt vời từ lamwebchuanseo.com rằng bạn đã có thể không bao giờ được thấy trước khi duyệt web trên điện thoại thông minh.

1. Thiết kế lịch tối ưu trên điện thoại di động

Lịch Web dựa trên các thiết bị di động đã luôn luôn là một kinh nghiệm khá khủng khiếp. Đây là lý do tại sao hầu hết các nhà thiết kế tránh lịch như bệnh dịch hạch, thay vào đó cho một mẫu thiết kế khác nhau như một danh sách đơn giản của ngày.

Tuy nhiên, do nhận được một chút sáng tạo với băng tải và một số phép thuật JavaScript, bạn có thể tạo lịch rất có ích cho người dùng trên điện thoại di động.

Lịch carousel đôi

Có thể di chuyển ngày tháng một cách dễ dàng


Trên trang web, trình diễn giao diện lịch đã được tạo ra bằng cách kết hợp hai băng tải với nhau để giúp người dùng dễ dàng duyệt qua ngày và sự kiện.

2. Thiết kế web nội dung bên

Thiết kế web nội dung bên là các khu vực của trang mà sống ra khỏi khung nhìn cho đến khi một người sử dụng vòi nước hoặc cà vùng thích hợp. Họ đã trở thành một mô hình định hướng chính cho điện thoại di động trong các ứng dụng bản địa và cả web, và thậm chí bạn có thể tìm thấy chúng trên một số ít các trang web máy tính để bàn quá.

Hầu hết các trang web sử dụng off-canvas flyouts chỉ đơn giản là ẩn menu và nội dung tĩnh khác, nhưng nó có thể sử dụng chúng để hiển thị toàn bộ các host nội dung động khác quá.

Trên website, cả hai tĩnh và nội dung động được đặt off-canvas. Định hướng chính được ẩn giấu bên trong một trình đơn off-canvas ở phía bên tay phải, trong khi ở phía bên tay trái của header flyout thứ off-canvas tiết lộ lịch sử gần đây của người dùng trên trang web.

style.com với không có các menu mở

Lịch sử gần đây bao gồm các trang, cũng như các slide cá nhân từ các show thời trang. Thấy như website là khá trang web nội dung nặng, đó là một tính năng tuyệt vời cho những người dùng muốn xem lại nội dung ưa thích của họ sau khi duyệt qua các trang web.

Kỹ thuật này sử dụng WebKit localStorage ghép nối với các hệ thống off-canvas Mobify phát triển trong nhà, gọi là Pikabu. Có một loạt các thư viện off-vải có sẵn, bạn cũng có thể kiểm tra David Bushell 's Responsive Off-Canvas đơn, và Christopher Yee' s Pushy.

3. Thiết kế phóng lớn các hình ảnh

Véo để phóng to văn bản thường được coi là dấu hiệu của nội dung kém định dạng - nhưng hình ảnh này là một trường hợp khác nhau hoàn toàn.

Cũng giống như với các bản đồ gốc và hình ảnh trong các ứng dụng, người dùng thường xuyên muốn phóng to hình ảnh trên web để xem chi tiết hơn.

Website đã dần dần tăng cường nhiều phòng trưng bày hình ảnh của mình để người dùng có thể zoom vào bất kỳ slide và xem hình ảnh chi tiết tốt hơn. Tuy nhiên, họ đã làm như vậy trong một cách mà không phóng to khung nhìn - chỉ các container đó là hình ảnh trong.

style.com inline pinch để phóng to hình ảnh

Kể từ khi tính năng này đòi hỏi một số tiền hợp lý của sức mạnh xử lý, nó chỉ được kích hoạt cho người sử dụng với điện thoại thông minh Retina iOS. Hãy nhớ rằng, điều quan trọng để điều trị hiệu quả là một tính năng thiết kế, do đó hãy chắc chắn rằng các đặc tính phức tạp chỉ được bật cho các thiết bị có thể hỗ trợ họ trong một cách performant!

Tại Mobify, chúng tôi sử dụng mật độ điểm ảnh của một thiết bị (trong số các yếu tố khác) để ước tính cách mạnh mẽ các thiết bị là. Điều này cho phép chúng tôi để đảm bảo rằng chúng tôi cung cấp một kinh nghiệm mà có thể hoạt động trên các thiết bị có thể xử lý nó - mà không cần lo lắng về việc phá vỡ các kinh nghiệm trên các thiết bị cũ.

Để tái tạo các khung nhìn có hạn chế này, pinch để phóng to hình ảnh chức năng, kiểm tra phổ biến hammer. js thư viện.

4. Thiết kế hình ảnh được tối ưu trên điện thoại

Có hai lý do chính tại sao băng tải hình ảnh lớn là một nỗi đau để thực hiện trên điện thoại di động: hiệu suất và dẫn đường.

Nhưng nếu bạn vượt qua cả những thách thức này, bạn có thể tạo ra một trải nghiệm duyệt hình ảnh rất bản địa cảm thấy thực sự tận dụng lợi thế của tất cả các màn hình DPI cao tuyệt vời ở đó.

Challenge 1: Hiệu suất

Thách thức đầu tiên là một hiệu suất một: các thiết bị thông thường không đủ mạnh mẽ để làm cho nhiều đối tượng trong một hàng.

Hãy tưởng tượng một hình ảnh đó là lớn như màn hình của thiết bị (hoặc lớn gấp đôi nếu nó là một thiết bị Retina). Bây giờ, vì nó là một carousel hình ảnh, hãy tưởng tượng một vài chục hoặc thậm chí hàng trăm những loại hình ảnh cạnh nhau trong một hàng. Làm thế nào rộng nó sẽ được?

Trên trang web, một băng chuyền hình ảnh cụ thể đến vào lúc hơn 80,000px rộng.

Hầu hết các trình duyệt di động tai nạn chỉ cần cố gắng để làm cho rằng nhiều yếu tố trên trang - ngay cả khi họ chỉ giữ chỗ trống không có nội dung phương tiện truyền thông.

Để làm được việc này, web đã tối ưu hóa băng tải hình ảnh để trình bày hoạt động mất không gian trên trang. Sử dụng DOM viết lại thuộc tính của Mobify .js, hình ảnh được yêu cầu theo yêu cầu duy nhất, và do đó số lượng tài nguyên CPU cần để render của họ là thấp hơn đáng kể.

Trong một số trường hợp điều này làm cho bộ sưu tập điện thoại di động lên đến 10x nhỏ hơn (từ 6.2MB xuống 650kB trên một trang).

Challenge 2: Navigation

Thách thức thứ hai là khoảng navigation. Nếu bạn có tất cả những hình ảnh đẹp trong một hàng dài, làm thế nào bạn có thể nhanh chóng di chuyển giữa chúng?

Native bảng chữ cái scroller vs Style.com bảng chữ cái scroller

Native bảng chữ cái scroller vs Style bảng chữ cái scroller


Câu trả lời nằm trong việc tạo ra một cái nhìn lưới của chiếc đu quay HTML. Điều này có thể được thực hiện tương đối dễ dàng bằng cách thay đổi các nguồn hình ảnh và CSS.

5. Chức năng thứ tự chữ cái

Một chỉ số chữ cái là một cách tuyệt vời để giúp người dùng di chuyển qua danh sách dài của các mặt hàng. Apple cung cấp một để giúp người dùng chọn địa chỉ liên lạc và âm nhạc trong iOS, nhưng nó được chứng minh là khá khó khăn để đưa tính năng này vào các trang web trong một cách mà làm việc cũng như các đối tác bản địa của nó.

Native bảng chữ cái scroller

Đây là các thiết kế thông thường

Style.com bảng chữ cái scroller

Những ưu điểm mà thiết kế mang lại

Trên website, kỹ thuật thiết kế này đã đạt được bằng cách sử dụng một băng chuyền đôi (giống như lịch!) Và iscroll.js. Và, với một spin mới trên nó, danh sách chữ cái chỉ tồn tại trong container của danh sách, vì vậy nội dung khác trên trang không bị ảnh hưởng!

Phần kết luận

Cho đến gần đây, sự khác biệt giữa các trình duyệt web và sử dụng một ứng dụng bản địa đã được rõ ràng cho bất cứ ai sử dụng một điện thoại thông minh.

Nhưng như các thiết bị trở nên mạnh mẽ hơn, và đáp ứng và kỹ thuật thích ứng trở nên tinh vi hơn, đó là ngày càng có thể làm mờ ranh giới giữa bản địa và web. website là một ví dụ về cách bạn có thể sử dụng kỹ thuật thích ứng để tạo ra một số tính năng thật sự thú vị mà nếu không sẽ không thể có được, để mang lại cho người dùng trên điện thoại di động.

Vì vậy, với càng nhiều người dần dần tăng cường web để tận dụng lợi thế của các tính năng của các thiết bị hiện đại theo cách này, nó có khả năng chúng tôi về để xem một vụ nổ của thiết kế website bán hàng trên di động thực sự tiên tiến và đáng chú ý. Sôi động!

Các kỹ thuật trong bài viết này đã được phát triển bởi đội Style và Anton Bielousov, một trong những kỹ sư của Mobify. Nếu bạn có bất kỳ câu hỏi về họ, cảm thấy tự do để lại nhận xét ​​hoặc tiếp cận trực tiếp với Antonbielousov.

Và nếu bạn đã sử dụng gần đây một trang web di động hoặc phản ứng có tính năng một số mẫu thiết kế mát mẻ mà cảm thấy hoàn toàn tự nhiên, cho tôi biết trong các ý kiến!

Tag:

Bình luận.