Thiết kế trang web ứng dụng Mobile Killer Mẹo và ví dụ

Bối cảnh di động đã phát triển theo cấp số nhân trong vài năm qua. Cửa hàng ứng dụng iOS cùng với Ứng dụng Android trên Google Play đã trở thành hai điểm nóng cho những người đam mê điện thoại thông minh. Khi số lượng người dùng điện thoại thông minh tăng lên, chúng ta đang chứng kiến hàng trăm nhà phát triển ứng dụng di động tung ra những ý tưởng mới vào thị trường.

Hầu hết các ứng dụng phổ biến đều có trang web riêng của họ đi kèm. Điều này có thể hữu ích với tiếp thị và đưa tên của bạn ra khỏi đó. Đây cũng là một URL trực tuyến đẹp hơn nhiều so với một trong các Cửa hàng ứng dụng. Tôi cảm thấy rằng bất kỳ ứng dụng di động thành công nào cũng cần có sự hiện diện của web.

Trong bài viết này tôi muốn đi qua một số xu hướng thiết kế phổ biến nhất cho các trang web ứng dụng di động. Không có quy tắc nghiêm ngặt bạn phải tuân theo để xây dựng một bố cục như vậy. Thay vào đó là một số hướng dẫn và xu hướng độc đáo mà các nhà thiết kế web đã tìm thấy để làm việc tốt trong việc thu hút khán giả. Kết hợp với Hướng dẫn phát triển iOS của tôi, bạn cũng có thể kết hợp một ứng dụng di động tuyệt vời và xây dựng trang web của nó.

Kiểm tra các khái niệm dưới đây và thử triển khai một số vào bố cục trang web ứng dụng của riêng bạn.

Ảnh chụp màn hình thiết bị

Một phần chủ yếu cho bất kỳ trang web ứng dụng di động nào phải là ảnh chụp màn hình của ứng dụng. Khách truy cập chỉ quan tâm đến ứng dụng của bạn và cách nào nhanh hơn để thể hiện mục đích của nó hơn là qua ảnh chụp màn hình? Bạn có thể điều chỉnh ảnh chụp thiết bị theo bất kỳ kiểu bố cục nào để nó không phải là yếu tố hạn chế.

Easy Chef là một ứng dụng iOS của Tây Ban Nha sử dụng nhiều ảnh chụp thiết bị. Phần trên cùng của bố cục có một bản xem trước trình chiếu của các chế độ xem khác nhau. Nhưng khi bạn cuộn xuống, bạn sẽ thấy các sơ đồ khác sử dụng màn hình iPhone. Các bảng này bao gồm các nhãn chi tiết và đóng lên, các màn hình phóng to. Tôi đã thực sự viết về thiết kế đồ họa sản phẩm thông tin trong một bài viết cũ hơn.

Một thiết lập thú vị khác có thể được tìm thấy trên trang thư viện Tweetbot. Đây là một ứng dụng khách Twitter rất phổ biến dành cho iPhone và các nhà phát triển đã cùng nhau giới thiệu một màn hình trượt màn hình. Nếu bạn đang cố gắng tiết kiệm phòng trong bố cục của mình, đây có thể là một giải pháp dễ dàng hơn. Khách truy cập sẽ không cần phải cuộn xuống để tìm kiếm một cái nhìn cụ thể. jQuery rất dễ thực hiện và bạn có thể nhanh chóng kết hợp xem trước màn hình iPhone trượt. Có thể khó bao gồm các chi tiết bổ sung, nhưng điều này có thể được thêm vào trong phần khác.

Huy hiệu App Store

Kỹ thuật này cũng có vẻ rất vô nghĩa khi bạn đã hoàn thành việc xây dựng ứng dụng. Huy hiệu nhanh chóng được công nhận là liên kết tải xuống thị trường ứng dụng. Cả người dùng Android và iOS đều có khả năng xem ứng dụng ngay từ trình duyệt của mình hoặc điều này sẽ chuyển hướng khi xem trên điện thoại thông minh.

Tôi thích sử dụng Instagram làm ví dụ vì trang web đã cập nhật lên bố cục mới hơn. Họ có huy hiệu hỗ trợ Android Marketplace (Google Play) và iOS App Store. Cả hai huy hiệu đều rất đơn giản trong thiết kế nhưng dễ dàng nhận ra trong nháy mắt. Nếu bạn đang tìm kiếm các thiết kế phức tạp hơn, tôi khuyên bạn nên tìm kiếm rê bóng nhanh. Các nhà thiết kế tài năng thường chia sẻ các khái niệm huy hiệu cửa hàng ứng dụng của họ cho những lời chỉ trích mang tính xây dựng.

Mạng xã hội di động

Facebook và Twitter đã chuyển sang di động, nhưng điều này đã không ngăn các mạng khác mọc lên. Chúng ta đang thấy mạng xã hội sử dụng các ứng dụng di động để cho phép một nền tảng giao tiếp hoàn toàn mới.

Localmind chạy trên một khái niệm tương tự như Foursquare, nơi bạn đăng ký tài khoản và bắt đầu kiểm tra các địa điểm địa phương. Bạn có thể để lại câu hỏi hoặc trả lời câu hỏi của người khác. Trang web của họ rất thân thiện và mời những người mới đến. Tôi đặc biệt yêu thích phần biểu ngữ trên cùng được thiết kế với nền bản đồ tùy chỉnh. Việc sử dụng độ dốc và kết cấu nền của chúng mang lại cho trang web một cuộc sống của riêng nó.

Chia sẻ hình ảnh tối thiểu

Pose là một mạng di động khác có lý tưởng tương tự cho thiết kế tối giản. Bạn có thể tải xuống ứng dụng di động cho cả thiết bị iOS và Android. Cảm giác tương tự như we yêuit nhưng nó dành cho những người yêu thích thời trang di động. Toàn bộ ứng dụng tập trung vào thời trang, tóc, trang điểm và sự quyến rũ.

Người dùng có thể chụp ảnh trang phục, quần áo hoặc phụ kiện của họ và chia sẻ chúng trên mạng. Một điều cần chú ý về Pose là bạn có thể duyệt trang web nhanh như thế nào. Thật dễ dàng để tìm thấy blog của công ty, chi tiết liên hệ, v.v ... Các trang web ứng dụng khác thường bỏ qua các tính năng công ty này có thể là một chủ đề hấp dẫn.

Nếu bạn muốn thu hút sự chú ý từ các phương tiện truyền thông, điều quan trọng là làm cho trang web của bạn trông giống như một sản phẩm mạng xã hội thực sự. Bạn không chỉ cố gắng bán ứng dụng của mình (bằng quảng cáo hoặc đăng ký trả phí) mà còn bán chính mạng đó. Các ứng dụng xã hội chắc chắn có thể phức tạp hơn việc thiết kế các trang web ứng dụng thông thường. Nhưng họ cũng thu được nhiều lượt tải xuống hơn từ người dùng và đó là một lĩnh vực mới thú vị cho thiết bị di động.

Từ khởi đầu khiêm tốn

Các nhà thiết kế web không phải lúc nào cũng có khả năng kết hợp các biểu tượng và đồ họa kỳ quặc. Rất may các trang web ứng dụng không quan trọng đối với số lượng Adobe Photoshop mà bạn có. Tôi thực sự cảm thấy rằng sự tối giản có thể làm việc tốt hơn nhiều cho phong cách bố trí này.

Ứng dụng Leef là ứng dụng khách Forrst mới được phát hành cho iPhone. Trang web của họ bao gồm một ảnh chụp màn hình ứng dụng đẹp cùng với nút tải xuống đậm. Tất cả văn bản trang được đơn giản hóa theo cách tương tự với phông chữ và bảng màu của Apple.

Điều làm cho trang web Leef trở nên tuyệt vời là bản chất thẳng thắn của từng yếu tố trang. Nó trắng trợn và thẳng thắn không có gì bị che giấu hoặc bị đẩy sang một bên. Tôi khuyên bạn nên thử phong cách này như trang web ứng dụng di động đầu tiên của bạn, nếu có bất cứ điều gì chỉ để thực hành. Bạn có thể học được rất nhiều bằng cách giảm thiểu các mẩu tin nhỏ hơn và tập trung vào những gì thu hút sự chú ý.

Khoảng trắng đáng yêu

Cũng đơn giản như vậy là trang web Ứng dụng Máy ảnh Gỗ. Bố cục của chúng không có gì ngoài một nền trắng đơn giản và nội dung trung tâm. Nội dung này bao gồm một số ảnh chụp màn hình mặc định, huy hiệu cửa hàng ứng dụng và một số tính năng chính bổ sung.

Nếu bạn cảm thấy như sự tối giản và không gian màu trắng rất quan trọng đối với bố cục của bạn thì hãy gắn bó với nó! Wood Camera không phải là một bố cục trang web đặc biệt gây chú ý, nhưng nó rất dễ điều hướng. Trang web của họ thậm chí không liên kết đến bất kỳ nội dung thay thế nào ngoài trang chính thức của nhà phát triển. Điều này giúp tập trung vào ứng dụng và những gì nó có thể cung cấp, điều này quan trọng hơn nhiều so với đồ họa hào nhoáng. Mặc dù điều đó không có nghĩa là tác phẩm nghệ thuật hào nhoáng là một ý tưởng tồi - nó chỉ đòi hỏi phải thực hiện đúng.

Minh họa đầy màu sắc

Hoàn toàn ngược lại với cách tiếp cận tối giản là một tác phẩm với hình minh họa độc đáo, mà tôi hoàn toàn yêu thích. Thường thì chi tiết bổ sung này sẽ hoàn toàn bán cho tôi ứng dụng. Một ví dụ tôi có thể liên quan đến là Ứng dụng Barista cho iPhone. Tiêu đề trang web của họ được đánh đố với một ít cappuccino vector và đồ uống espresso.

Nhưng hãy chú ý cách không có bất kỳ hình ảnh nào khác khi cuộn trang xuống. Toàn bộ phần trên cùng này được thiết kế dành riêng cho ứng dụng iPhone, tương tự như trang đích. Các vectơ bắt mắt của bạn ngay lập tức và cũng gợi ý về những gì ứng dụng nói về.

Kitchenator là một ứng dụng iOS tương tự chuyển đổi các đơn vị đo lường để nấu ăn và nướng bánh. Bố cục tiêu đề của họ sử dụng kết cấu bằng gỗ phong phú, khăn trải bàn rô và thìa nước nhỏ. Hình ảnh này gợi ý về mục đích của ứng dụng này trước khi bạn đọc lướt nội dung.

Phong cách thiết kế này thực sự thấm qua toàn bộ bố cục. Khu vực chân trang phù hợp với nền gỗ tương tự và nhiều lựa chọn phông chữ giống nhau. Đây là một ví dụ về bố cục trang web rất đơn giản với một số đồ họa rất mạnh.

Trang web ứng dụng: Showcase cao cấp

Bài viết nào sẽ được hoàn thành mà không có một chút kẹo mắt? Cùng với các kỹ thuật trên, tôi cũng đã kết hợp bộ sưu tập các trang web ứng dụng di động tuyệt đẹp này; chú ý logo và sơ đồ điều hướng, cũng như các URL miền. Bằng cách nghiên cứu những gì các chuyên gia làm, bạn có thể hiểu xu hướng thiết kế và sử dụng chúng trong các dự án của riêng bạn.

Ứng dụng Bosquet