Lời khuyên về thiết kế cho các thiết bị di động

Theo tôi được biết, dự kiến ​​vào năm 2013 sẽ có nhiều người dùng hơn xem Internet thông qua một thiết bị di động so với một máy tính để bàn hoặc máy tính xách tay. Đó là khá tuyệt vời, và nó có nghĩa là nhiều hơn như vậy bây giờ hơn bao giờ hết, chúng tôi là nhà thiết kế, nên xem xét thiết kế và phát triển cho người sử dụng điện thoại di động. Nó trở thành một điều cần thiết sẽ tiếp tục phát triển. Vì vậy, cho phép có một cái nhìn tại một số lời khuyên về thiết kế cho các thiết bị di động.

Trang web hoặc ứng dụng?

Đó là câu hỏi. Một ứng dụng có lợi thế của nó chủ yếu là kinh nghiệm người dùng, sử dụng tiềm năng off-line, và giữ chân khách hàng. Tuy nhiên, xem xét nhiều hơn trong chiều sâu thiết kế và phát triển cho các ứng dụng trên nền tảng di động, chúng tôi sẽ tập trung vào bài viết này trên trang web dành cho điện thoại di động.

Trang web điện thoại di động có nhiều khả năng những gì bạn sẽ được phát triển cho các cơ sở khách hàng của bạn, trừ khi họ có khách hàng đánh giá cao đầu tư vào thương hiệu của họ có khả năng sẽ biện minh cho tải về và cài đặt một ứng dụng. Các trang web điện thoại di động dễ dàng hơn và nhanh hơn để phát triển và triển khai. Họ cũng có thể truy cập bởi bất kỳ thiết bị với khả năng duyệt web.

Thiết kế Kích thước màn hình nhỏ hơn

Khi thiết kế cho màn hình thiết bị di động, bạn phải đi vào xem xét kích thước nhỏ hơn của màn hình. Đây sẽ là khó khăn cho những người trong chúng ta được sử dụng để thiết kế cho màn hình lớn HD với khả năng hiển thị đồ họa ở 1920X1200 hoặc cao hơn.

IPhone 4 hiện nay có độ phân giải 640 x 960 với iPad bit cao hơn 1024 x 768. Tuy nhiên, những độ phân giải cao so với các thiết bị khác. Một số điện thoại Android và Blackberry tính năng một kích thước màn hình 320 × 240. Đó là nhỏ hơn so với những gì chúng ta đang sử dụng để thiết kế cho, nhưng nó rất quan trọng để giữ trong tâm trí bạn đặt ra để thiết kế trang web di động của bạn.

Hãy xem xét kết nối người nghèo

Hãy nhớ một vài năm trở lại trước khi Internet băng thông rộng đã có sẵn trong tất cả các quán cà phê góc, và thiết kế web đã xem xét các kết nối người sử dụng gần hơn một chút khi tối ưu hóa hình ảnh và video cho thời gian tải nhanh hơn. Bạn sẽ cần phải làm như vậy khi thiết kế cho trang web di động của bạn.

Các nhà cung cấp dịch vụ được tung ra tốc độ nhanh hơn tất cả các thời gian, nhưng bảo hiểm vẫn còn chắp vá tốt nhất trong một số khu vực. Cộng với một số người sử dụng, không có kế hoạch dữ liệu không giới hạn, trả tiền để tải dữ liệu. Vì vậy, khi các nhà phát triển, chúng ta phải suy nghĩ lại về những ngày đầu của modem. Bạn sẽ cần giảm mã, và loại bỏ các thẻ không cần thiết và ý kiến. Giữ hình ảnh nhỏ, và nén cho nhẹ hơn lần tải về.

Chọn một URL riêng biệt cho trang web di động của bạn

Nếu bạn đang xây dựng một trang web hoàn toàn riêng biệt cho các thiết bị di động, xem xét lựa chọn một địa chỉ URL cho trang web mới. Ví dụ, http://www.yoursite.com/mobile hoặc nếu bạn có thể thêm các lĩnh vực tùy chỉnh phụ để thoát khỏi miền của bạn thử một cái gì đó giống như http://mobile.yoursite.com.

Giữ một cấu trúc đơn giản như trên cho URL của bạn sẽ giúp làm cho kinh nghiệm người sử dụng dễ dàng hơn để theo dõi và ghi nhớ.

Phát hiện và chuyển hướng người sử dụng

Phát hiện nếu một người sử dụng là điện thoại di động hay không và gửi chúng đến các trang web chính xác là quan trọng để giữ cho kinh nghiệm liền mạch.

Một cách tốt nhất để phát hiện một thiết bị là để làm cho việc sử dụng của các cơ sở dữ liệuWURFL . WURFL là một cơ sở dữ liệu có sẵn trên web thu thập thông tin về tất cả các thiết bị di động hiện có. Dự án WURFL có các API cho một số ngôn ngữ lập trình. Yelitza Jaramillo đã viết một bài viết tuyệt vời về cách sử dụng PHP API trọn gói dành cho WURFL .

Nếu bạn có phương pháp riêng của bạn để phát hiện thiết bị, xin vui lòng chia sẻ trong các ý kiến ​​dưới đây.

Hãy xem xét một điện thoại di động thân thiện 1 Cấu trúc trang Cột

Khi tải trang trên điện thoại nó thường được thu nhỏ tất cả các cách để nó phù hợp với tất cả lên màn hình. Các màn hình trên hầu hết tất cả các điện thoại quá nhỏ rằng trang này không thể được đọc cho đến khi nó được thu nhỏ. Điều này không phải là lý tưởng bởi vì nó tạo ra nhiều bước hơn cho người sử dụng trong khi đọc nội dung của bạn. Thông thường họ sẽ phải di chuyển cả hai chiều dọc và ngang trong khi đọc.

Thay vì cố gắng thực hiện một cột bố trí phù hợp trong một màn hình điện thoại di động.Người dùng sẽ vẫn có khả năng phải di chuyển, nhưng nó sẽ chỉ là theo chiều dọc.

Đơn giản hóa và Tối ưu hóa nội dung của bạn

Một lần nữa, nghĩ rằng ánh sáng và đơn giản. Giữ ít hơn một là tâm lý khi tổ chức nội dung của bạn và cấu trúc trang. Xem xét việc loại bỏ các liên kết bổ sung và nội dung mà không phải là trong khu vực nội dung chính. Các sản phẩm thường thấy trong các bên hoặc footer của các trang web truyền thống thường có thể được loại bỏ để tập trung sắp xếp hợp lý và đơn giản.

Bằng cách loại bỏ loại nội dung này, bạn cũng làm giảm kích thước trang và thời gian tải, đó là một khía cạnh quan trọng của thiết kế trang di động.

Giảm Navigation và User Input

Người dùng nhập vào có thể được khó khăn trên một số điện thoại. Nó không phải là nhanh như một bàn phím truyền thống, và người dùng có nhiều khả năng để làm cho những sai lầm. Cho rằng, chúng ta có thể làm cho một vài điều chỉnh để giảm số lượng đầu vào cần thiết từ người sử dụng. Ví dụ, thông tin có thể được kéo từ tài khoản hiện có của một người dùng trong quá trình thanh toán. Danh mục có thể được giảm đến một trình đơn thả xuống.Chúng tôi cũng có thể tận dụng lợi thế của một điện thoại xây dựng trong các chức năng, xem chi tiết dưới đây về điều này.

Tránh kích cỡ tuyệt đối

Khi thiết kế cho màn hình nhỏ hơn tránh xác định kích thước điểm ảnh tuyệt đối. Ví dụ nếu bạn xác định có chiều rộng 200px, có thể là phần lớn các màn hình trên một số điện thoại.Hãy thử sử dụng các kích thước tương đối như ems và tỷ lệ phần trăm, do đó kích thước sẽ tự động điều chỉnh.

Tránh cuộn … Thực sự?

Theo tôi bạn chỉ đơn giản là không thể tránh tất cả di chuyển trong hầu hết trường hợp, với kích thước màn hình nhỏ hơn các thiết bị di động, nhưng bạn có thể thực hiện một số điều chỉnh để giảm thiểu các di chuyển. Tạo ra một bố trí cột 1 như đã đề cập ở trên để tiếp tục di chuyển theo chiều dọc là lý tưởng. Giảm số lượng hình ảnh và nội dung trên trang đó là một gợi ý tốt. Ngoài ra xem xét thêm nội dung trong tiêu đề, chẳng hạn như logo và định hướng, chúng có thể đẩy nội dung xuống trang gây di chuyển không cần thiết.

Thiết kế cho màn hình cảm ứng

Màn hình cảm ứng trên điện thoại thông minh giúp đỡ cải thiện trải nghiệm người dùng, trừ khi nói đến khai thác các nút bấm rất nhỏ và các liên kết văn bản. Ngón tay thường là quá rộng để chính xác khai thác một liên kết văn bản nhỏ. Đối với các liên kết quan trọng và định hướng xem xét việc sử dụng các nút lớn kéo dài chiều rộng của màn hình.

Chọn Font phải cho nội dung của bạn

Với khả năng nhúng các font vào trang web của chúng tôi, nó là điều cần thiết để lựa chọn một phông chữ có thể đọc được trên một màn hình nhỏ. Tránh kịch bản và phông chữ viết tay, ngay cả đối với tiêu đề hoặc văn bản được dự định là lớn hơn. Thậm chí lớn hơn văn bản xuất hiện nhỏ trên điện thoại.

Ngoài ra xem xét số tiền thích hợp của khoảng cách chữ và khoảng cách dòng để giữ cho nội dung của bạn có thể đọc được càng tốt.

Flash, Java, các khung hình và Ups Pop cửa sổ

Hầu hết các thiết bị di động không hỗ trợ, Flash, Java Applet, khung và cửa sổ pop up.Tránh các công nghệ này khi phát triển trang web điện thoại di động của bạn. Nếu bạn đang kết hôn để Flash có thể là thời gian để cắt dây. Với thông báo gần đây của Adobe mà nó đã ngừng phát triển ofFlash Player cho các trình duyệt trên các thiết bị di động.

Hơn trang Di động 1?

Với khả năng phát hiện các loại thiết bị, nó đặt ra câu hỏi có hay không phát triển nhiều hơn một trang web điện thoại di động. Ví dụ, bạn có thể muốn tạo ra một trang web cho điện thoại thông minh hiện đại như iPhone và Android, và một trang web thậm chí còn giảm nhiều hơn cho điện thoại cũ hơn, ít có khả năng. Bằng cách làm như vậy bạn đã tạo ra một kinh nghiệm phù hợp với các thiết bị người sử dụng.

Sử dụng điện thoại xây dựng trong tính năng lợi thế của bạn

Đây là nơi bạn có thể tận dụng lợi thế của việc xem trang web của bạn từ một điện thoại di động. Điện thoại có thể làm những việc mà máy tính có thể không, vì vậy sử dụng chúng bất cứ khi nào có thể cải thiện trải nghiệm người dùng của bạn.

Ví dụ:

- Số điện thoại có thể nhấp vào để đặt một cuộc gọi.
- Cung cấp cho người dùng khả năng tìm thấy bạn trên bản đồ, hoặc tìm nơi gần nhất để xác định vị trí sản phẩm của bạn, vv …
- Sử dụng các tính năng đặc biệt như chức năng quét mã QR hoặc thanh.

Một Nhìn vào điện thoại di động CSS

Dưới đây là một số lời khuyên chung của CSS cân nhắc khi thiết kế dành cho điện thoại di động.

- Thiết lập độ rộng wrapper của bạn tỷ lệ phần trăm so với độ rộng cố định để trang của bạn sẽ quấn kích cỡ màn hình khác nhau.
- Set đoạn văn, tiêu đề và định hướng để hiển thị khối để điền vào màn hình.
- Điện thoại di động Safari không hỗ trợ đầy đủ @ font-face.
- Hãy nhìn vào CSS3 truy vấn truyền thông cho việc tạo ra một phiên bản di động của trang web của bạn.
- Nhớ giữ cho mọi thứ đơn giản và sắp xếp hợp lý.

Thiết kế cho iPhone

IPhone có một phần đáng kể thị phần lớn khi nói đến thiết bị di động.

Khi xây dựng các trang web specfically Đối với iPhone, bạn sẽ cần phải nhắm mục tiêu kích thước màn hình của họ. Kích thước màn hình được thiết lập để 320px 480px cho iPhone cũ và 640px 960px cho iPhone 4 và iPhone 4S.

Sử dụng CSS3 phương tiện truyền thông truy vấn bạn có thể thêm phong cách stylesheet chính trang web của bạn mà sẽ chỉ ảnh ​​hưởng đến iPhone.

Hãy xem xét các thiết bị định hướng

Với iPhone và các điện thoại thông minh hiện đại khác, bạn có thể thay đổi định hướng màn hình từ chân dung đến phong cảnh bằng điện thoại nghiêng về phía của nó. Đây là một trong nhiều lý do để giữ chất lỏng bố trí trang web của bạn để nó sẽ lấp đầy khoảng trống không có mater những gì các định hướng màn hình.

Điện thoại di động jQuery

Nếu bạn là một nhà phát triển cuối cùng phía trước hơn bạn đã quen thuộc với sức mạnh của jQuery, và nó là viết tâm lý ít làm nhiều hơn nữa. Cũng vậy với các di động mới jQuery .

Một người sử dụng thống nhất, dựa trên HTML5, giao diện hệ thống cho tất cả các nền tảng thiết bị di động phổ biến, được xây dựng trên jQuery đá vững chắc và nền tảng giao diện người dùng jQuery. Trọng lượng nhẹ mã của nó được xây dựng với tăng cường tiến bộ, và có một thiết kế, linh hoạt, dễ dàng themeable.

Khuôn khổ này là giá trị một cái nhìn nghiêm trọng nếu kế hoạch của bạn để phát triển một trải nghiệm người dùng mạnh mẽ trong trang web di động của bạn.

Kits giao diện người dùng điện thoại di động và các biểu tượng

Nếu não của bạn nghiêng nhiều hơn một chút để các bên phát triển thứ so với thế giới của thiết kế, lo sợ không. Có rất nhiều các bộ dụng cụ giao diện người dùng cổ phiếu có sẵn cho các trang web điện thoại di động.

IPhone App Biểu tượng Kit

Kit Giao diện người dùng tối Điện thoại di động

IPhone Fresh UI Kit

Bóng 3D UI Kit

Công cụ cho phát triển điện thoại di động

PhoneGap
Nền tảng của họ cho phép bạn dễ dàng xây dựng ứng dụng dựa trên HTML5, như các ứng dụng gốc vào 6 nền tảng khác nhau.

RhoMobile
Các khẩu hiệu “một codebase, tất cả các điện thoại thông minh” khá nhiều cho biết tất cả.

WordPress Mobile Edition cho người sử dụng WP

Nếu bạn là một fan hâm mộ của WordPress có một số bổ sung điện thoại di động thân thiện có sẵn. Một đặc biệt nổi bật. WordPress Mobile Edition là một plugin cho thấy một giao diện được thiết kế cho một thiết bị di động khi khách truy cập đến trang web của bạn trên một thiết bị di động. Trình duyệt di động được tự động phát hiện, danh sách các trình duyệt di động có thể được tùy chỉnh trên trang cài đặt.

Làm thế nào để thử nghiệm trang web di động của bạn

Thử nghiệm trên các thiết bị di động có thể là một nhiệm vụ rất lớn. Đặc biệt là kể từ khi nó không chắc rằng bạn sở hữu hàng chục điện thoại di động khác nhau để kiểm tra. NhậpOpera Emulator Điện thoại di động . Emulator hỗ trợ khoảng 20 nền tảng khác nhau.

Ví dụ đáng kinh ngạc của các trang web điện thoại di động

Bạn đang tìm cảm hứng? Nhìn không có thêm. Dưới đây là một số ví dụ tuyệt vời của trang web dành cho điện thoại di động.

Về tác giả:

Nathan Brown

Nathan Brown là một nhà thiết kế đồ họa, những người thích làm việc với các phương tiện truyền thông khác nhau. Ông kết hợp phong cách nghệ thuật truyền thống với một thử nghiệm nhỏ và bùng nổ kỹ thuật số. Nathan của công trình đã có tất cả mọi thứ từ mực in và sơn lá và một hộp bụi bẩn. Mọi thứ đều có giá vé trò chơi khi nói đến cách tiếp cận của ông cho nghệ thuật. Nathan sống ở Austin, Texas, nơi ông đã làm việc như một nhà thiết kế cho 10 năm.