Nhìn vào Thiết kế cho thiết bị di động
Khi iPhone đầu tiên được phát hành, nó đã gây bão thế giới công nghệ. Kể từ đó, đã gần 5 năm và thị trường điện thoại thông minh đã trở nên phổ biến, thậm chí Microsoft đã tham gia vào cuộc cạnh tranh với HĐH Windows 7 và các đối tác. Với rất nhiều người dùng Internet trên điện thoại thông minh của họ ngày nay, việc mọi người mong đợi số lượng trang web di động sẽ tăng mạnh.
Tuy nhiên, thiết kế cho web di động là một hoạt động hoàn toàn khác với thiết kế web phổ biến. Các trang web của chúng tôi được thiết kế cho màn hình lớn, nhưng kích thước màn hình của điện thoại thông minh quá nhỏ so với điều đó, do đó dẫn đến các vấn đề về khả năng sử dụng gây phiền nhiễu. Tiêu chuẩn và thực hành thiết kế mới rất cần thiết cho một thiết kế trang web di động tốt hơn với trải nghiệm người dùng mượt mà.
Trong hướng dẫn này, chúng tôi sẽ tìm cách thiết kế một trang web thân thiện với người dùng cho các trình duyệt di động của điện thoại thông minh. Tôi sẽ nói về các thực tiễn tốt nhất và công cụ dành cho nhà phát triển hữu ích để bạn thiết kế một trang web di động tốt hơn, vì vậy hãy tham gia vào nó sau khi nhảy!
Lập kế hoạch trải nghiệm người dùng mạnh mẽ
Khi bạn xây dựng một trang web di động, điều quan trọng là giữ cho người dùng của bạn trong tâm trí mọi lúc, vì cuối cùng trang web của bạn đang được thiết kế và tạo cho người dùng thưởng thức. Chắc chắn người dùng mong đợi một trang web di động hoạt động tương tự như môi trường máy tính để bàn, vì vậy giữ cho trải nghiệm người dùng thân thiện nên là trọng tâm chính của bạn trong khi xây dựng một trang web di động thành công.
Có nhiều khái niệm về khả năng sử dụng để xem xét cho người dùng của bạn. Những cân nhắc này bao gồm kích thước màn hình, hình ảnh nội tuyến, siêu liên kết, cỡ chữ, và điều hướng trang. Chúng tôi đã viết về thiết kế khả năng sử dụng điện thoại di động để bạn khắc trang web của bạn để sử dụng tốt hơn. Bên cạnh hướng dẫn, bạn cần luôn luôn giữ cho mình tỉnh táo cho những ý tưởng mới để cải thiện trang web của bạn.
Lập kế hoạch trải nghiệm người dùng mạnh mẽ cũng có nghĩa là bạn nên xem xét cách người dùng sẽ tương tác với trang web của bạn. Trên máy tính để bàn, trang web của bạn có thể được tương tác với chuột và bàn phím, nhưng trên điện thoại thông minh, người dùng sẽ khai thác, búng, và vuốt cách của họ xung quanh trang web của bạn. Bạn có thể cần phải thiết kế trang web theo cách mà người dùng có thể truy cập thông tin trang web dễ dàng với các chuyển động vật lý.
Giữ các trang ngắn và ngọt ngào
Thịt và khoai tây của bất kỳ trang web là Nội dung trang. Mỗi trang web của bạn nắm giữ một lượng đáng kể thông tin hữu ích cho người dùng của bạn, chẳng hạn như văn bản, hình ảnh hoặc video. Bạn cũng sẽ tìm thấy các bài viết tin tức và bài đăng trên blog chạy trên một vài trang, điều này có thể giúp chia nhỏ văn bản nhưng nó không được khuyến nghị cho các thiết bị di động như là kỹ thuật yêu cầu tải trang nhiều hơn có nghĩa là thời gian chờ đợi nhiều hơn ở phía người dùng.
Trừ khi nó hoàn toàn bắt buộc tôi khuyên bạn nên giữ cho nội dung trang của bạn ngắn. Bạn cũng nên xem xét làm cho nó trông ngọt ngào bằng cách tạo kiểu chữ cho kích thước lớn hơn nhiều và có thể chuyển hình ảnh sang một bên. Với nội dung của bạn được hiển thị đầy đủ, nó tự nhiên thu hút sự chú ý, chưa kể tối ưu hóa thực sự làm cho việc quét các trang đơn giản hơn rất nhiều. Đây cũng là lý do tại sao một bố trí cột đơn hoàn toàn phù hợp với hóa đơn.
Trong hầu hết các trường hợp, trình duyệt di động sẽ không tải các trang web nhanh như trình duyệt trên máy tính để bàn và điều này có thể gây khó chịu cho độc giả của bạn, đó là lý do tại sao bạn cần phải tối ưu hóa nội dung và trang web để tải nội dung tốc độ cao. Bạn có thể rút ngắn bài viết trong khi vẫn giữ nguyên nội dung, hoặc đơn giản xóa những hình ảnh không cần thiết. Tập trung vào sự đơn giản thay vì vẻ đẹp.
Điều hướng cốt lõi của bạn là trình bảo vệ cuộc sống cho khách truy cập của bạn muốn di chuyển giữa các trang. Trên thiết bị di động, các liên kết màn hình sẽ xuất hiện nhỏ hơn nhiều do bản chất, do đó khó chạm hơn rất nhiều. Một tinh chỉnh cần thiết để giải quyết vấn đề này là tối đa hóa phông chữ và không gian cho các liên kết điều hướng của bạn, có thể chiếm toàn bộ khu vực khối. Ngoài ra, bạn có thể thiết kế thanh điều hướng tương tự như thanh tab của ứng dụng iPhone thật, giống như một trong những giới thiệu ở trên.
Xây dựng kiểu CSS di động
Bây giờ chúng ta đã biết cách tối ưu hóa trang web di động để dễ đọc và dễ sử dụng hơn, thật tốt khi nói về các kiểu CSS. Mỗi biểu định kiểu CSS chứa nhiều bộ chọn với các thuộc tính liên quan đến phông chữ, kích thước, định vị và cài đặt hiển thị. Khi nói đến điện thoại di động, bạn nên chú ý đến làm thế nào các khối của bạn rơi vào vị trí.
(Nguồn hình ảnh: Tạp chí Smashing)
Một lĩnh vực để bắt đầu là đặt lại độ rộng trình bao của trang web của bạn thành tỷ lệ phần trăm. Người ta thường sử dụng pixel làm đơn vị để định vị, chiều cao dòng, kích thước phông chữ và chiều rộng của div, nhưng khi giao dịch với thiết bị di động, bạn sẽ muốn các trang của mình trở thành chất lỏng và chuyển tiếp giữa mỗi thiết bị một cách tự nhiên. Đặt div div container thành 100% chiều rộng sẽ cho phép nội dung điền dễ dàng giữa chế độ dọc / ngang mà không chảy qua rìa.
Nếu bạn là một trong những người muốn cấu trúc lại toàn bộ bố cục của bạn, hãy đảm bảo bạn đánh tất cả mọi thứ với một cài lại. Cũng thế đoạn văn, tiêu đề và liên kết điều hướng nên được đặt thành hiển thị: khối; để bạn có được cảm giác kiểu in tuyến tính đó. Định vị lại các lề và phần đệm để loại bỏ sự phình ra khỏi bố cục của bạn. Tránh bàn nếu có thể vì những điều này có xu hướng hiển thị kết quả lỗi giữa các thiết bị.
Hình ảnh lớn cũng là một rắc rối giữa các thiết bị. Hầu hết các hình ảnh trang web của bạn sẽ hiển thị lớn hơn 480px và bạn có thể không muốn chúng phá vỡ container. Tùy chọn đầu tiên là đặt chiều rộng của chúng ở mức 100% để hình ảnh có thể thay đổi kích thước một cách tự nhiên. Chắc chắn là có thể tạo các bộ hình ảnh khác nhau cho trang web của bạn và hiển thị chúng khác nhau dựa trên tác nhân trình duyệt, nhưng thành thật mà nói, điều này chỉ bổ sung thêm nhiều tác phẩm về phía bạn, vì vậy hãy thử chỉ sử dụng kỹ thuật khi thực sự cần thiết.
Thiết kế trang web cho iPhone
Thị phần di động khá lớn và chia rẽ, nhưng Apple đã có một miếng bánh lớn với iDevices của họ. Cả iPhone và iPad đều là thiết bị di động có sẵn Internet di động với chức năng màn hình cảm ứng tích hợp. Chúng có cùng trình duyệt web mặc định, Safari và một loạt các tùy chọn khác.
Đối với các trang web dành riêng cho iPhone, bạn sẽ cần nhắm mục tiêu kích thước màn hình. Kích thước màn hình cố định được đặt thành 320px x 480px cho các mẫu iPhone cũ hơn và 640px x 960px cho iPhone 4 và iPhone 4S.
Màn hình iPhone bị giới hạn không gian. Bạn nên có một khối nội dung kéo dài bao lâu cần thiết. Giữ các yếu tố trong một cột duy nhất sẽ cứu bạn đau đầu và cho phép bố trí chất lỏng để “điền” cả chế độ dọc và ngang. Đối với điều này, bạn có thể cần phải phát triển một mẫu khác và tìm cách kiểm tra xem (những) khách truy cập của bạn có đang sử dụng iPhone không. Đoạn mã PHP nhỏ bên dưới sẽ hoạt động tốt:
Về cơ bản logic kéo toàn cầu của chúng tôi $ _ KHÔNG BAO GIỜ biến cho tác nhân HTTP và kiểm tra nếu từ “iphone” xuất hiện ở bất cứ đâu. Nếu có thì chúng tôi biết khách truy cập của chúng tôi đang sử dụng iPhone và từ đó chúng tôi có thể đưa ra một chút HTML khác nhau hoặc thậm chí là một bố cục mẫu hoàn toàn mới! Điều này cũng có thể được sử dụng để bao gồm biểu định kiểu dành riêng cho iPhone, thay đổi tiêu đề trang của bạn, xóa hình ảnh hoặc gần như bất kỳ hiệu ứng động nào.
Khi nói đến việc phục vụ các phong cách mới, có một cách dễ dàng hơn. Như đã đề cập trước đó, kích thước màn hình tối đa cho iPhone là rộng 960px. Do đó, với các truy vấn phương tiện CSS3 mới, bạn có thể thêm kiểu trực tiếp vào biểu định kiểu chính của trang web của mình. chỉ có hiển thị trên iPhone. Dưới đây là một mã ví dụ nhỏ:
Màn hình @media và (chiều rộng tối đa thiết bị: 960px) / * iPhone css * /
Điều này hoạt động vì CSS hiện có thể phát hiện các tác nhân duyệt và các thuộc tính của chúng. Độ rộng màn hình tối đa là một trong những thuộc tính cũng có thể được phát hiện.
Trang web di động tất cả trong tất cả các thiết bị iPhone không quá khó để thiết kế, có quá nhiều ví dụ để tham khảo, ví dụ: iPhone CSS. Giữ cho mình bận học và đừng sợ thử nghiệm các kỹ thuật mới trong thiết kế giao diện người dùng.
Tập lệnh jQuery di động
Phần lớn các nhà phát triển web front end quen thuộc với thư viện jQuery. Nó cung cấp một số tốc ký tuyệt vời cho các hiệu ứng mã hóa, hình động, menu thả xuống và một loạt các chức năng khác trong trình duyệt và nó trở nên tuyệt vời hơn với thông báo của jQuery Mobile. Nó là không nên nhảy vào công nghệ trực tiếp và tải trang web của bạn với các hiệu ứng ở mọi nơi, nhưng với mục đích thử nghiệm, chức năng nâng cao có thể phát rất tốt.
jQuery Mobile hơi khác so với jQuery thông thường vì nó cung cấp cho bạn một môi trường đầy đủ để xây dựng. Khi bạn làm việc với các tệp của họ, họ không chỉ là JavaScript mà còn là các kiểu CSS cho các nút, liên kết và hiệu ứng chuyển tiếp. Bạn vẫn đang viết các trang web bằng mã HTML, nhưng nhóm jQuery Mobile có cung cấp rất nhiều tính năng thiết kế UI tùy chọn. Có rất nhiều thứ chúng ta có thể làm với khung này nhưng vì khung vẫn đang trong giai đoạn thử nghiệm, hãy để các hiệu ứng đơn giản.
Một hướng dẫn nhỏ tại blog DevGrow cung cấp một số ví dụ tuyệt vời. Trang web chính thức cũng cung cấp các bản demo để bạn dùng thử. Lưu ý rằng chúng tôi đang sử dụng thuộc tính HTML, chuyển đổi dữ liệu để thêm hiệu ứng hoạt hình với bất kỳ giá trị được xác định trước nào. Chúng bao gồm slide, pop, flip, fade, v.v. Hãy xem ví dụ DevGrow nhỏ để có được các hiệu ứng này.
Các hiệu ứng và chuyển đổi khá gọn gàng và việc bạn có thể xây dựng toàn bộ giao diện di động một cách nghiêm ngặt với jQuery cũng là một bước tiến lớn cho nền tảng này, nhưng với nền tảng chỉ ở phiên bản beta, tôi không khuyên bạn nên xây dựng toàn bộ trang web di động của mình với thư viện của họ, đặc biệt với thực tế là nó không được hỗ trợ bởi tất cả các điện thoại thông minh lớn tại thời điểm viết (đặc biệt là Windows Phone 7), nhưng chắc chắn nó sẽ tốt hơn theo thời gian.
Cuối cùng, tôi khuyên bạn nên làm quen với khung di động mới này trước triển khai trực tiếp trên bất kỳ dự án nào.
Công cụ phát triển hữu ích
Các nhà phát triển di động không chỉ nhìn vào tài nguyên mã hóa và thiết kế. Ngoài ra còn có nhu cầu cao về các công cụ phần mềm và IDE, chưa kể các khung di động mạnh mẽ. Phát triển web là một nhiệm vụ khó khăn đòi hỏi khá nhiều sự cống hiến, nhưng sử dụng các công cụ bổ sung sẽ giúp công việc của bạn dễ dàng hơn rất nhiều.
Trình giả lập Opera Mobile
Tìm kiếm một cách để kiểm tra xem trang web di động của bạn được kết xuất như thế nào? Đây có thể là một nỗi đau lớn nếu bạn không có điện thoại thông minh có truy cập Internet. Hoặc bạn không muốn sử dụng điện thoại thông minh của mình để kiểm tra trang web mỗi khi bản cập nhật được đẩy lên máy chủ của bạn. Vâng, Opera Mobile Emulator là một phần mềm tuyệt vời để kiểm tra trang web di động của bạn.
Trình giả lập hỗ trợ xung quanh 20 hồ sơ di động như Samsung Galaxy S, HTC Desire và thậm chí cả máy tính bảng như Motorola Xoom. Cũng có thể đặt Độ phân giải tùy chỉnh và mật độ điểm ảnh cho mục đích thử nghiệm chuyên sâu. Trên hết, bạn không cần phải thực hiện quá nhiều công việc cấu hình, chỉ cần thực hiện vài cú nhấp chuột và bạn sẽ ổn.
Tải xuống hoàn toàn miễn phí và phần mềm chạy trong cả môi trường Mac OS X và Windows. Các nhà phát triển của họ đang nỗ lực tạo ra các tiêu chuẩn web phù hợp và điều chỉnh công cụ kết xuất di động của họ. Tôi khuyên bạn nên các công cụ phát triển khác của họ nếu bạn đang tìm kiếm các công cụ bổ sung để giúp bạn trên đường đi.
Điện thoại
Chưa có nhiều API được phát triển trên HTML5 để xây dựng các ứng dụng di động vững chắc. Đáng chú ý là bối cảnh di động đã thiếu các loại trang web này, đó là lý do tại sao PhoneGap lấp đầy chỗ đứng rất tốt. Nền tảng của họ cho phép bạn dễ dàng xây dựng các ứng dụng dựa trên HTML5 làm ứng dụng gốc trên 6 nền tảng khác nhau.
Quá trình này hoạt động bằng cách trước tiên nén mã của bạn và chuyển mã qua khung ứng dụng của PhoneGap. Từ đó, ứng dụng của bạn có thể tiếp cận một phần lớn thị trường di động bao gồm Android, iOS, Windows Phone 7 và BlackBerry.
Nếu bạn có một chút bối rối, đừng băn khoăn quá nhiều. Các trang hỗ trợ của họ phác thảo gọn gàng quá trình và cung cấp các liên kết đến các tài nguyên hữu ích. Các ứng dụng đã được phát triển đã được biên soạn trong một danh mục kiểu thư viện đẹp. Kiểm tra bộ sưu tập ứng dụng đầy đủ của họ mà sau đó bạn có thể sắp xếp theo thiết bị có ảnh chụp màn hình.
Studio Aptana
Trang web Aptana là vị trí hàng đầu để tìm hiểu về các công cụ phát triển của họ. Bản phát hành bộ mới nhất, Aptana 3.0.3, có IDE tích hợp đầy đủ để phát triển web, kiểu CSS và lồng thẻ HTML và phần hay nhất: Aptana hoàn toàn miễn phí Tải về! Họ cung cấp các gói cho cả 3 Hệ điều hành chính (bao gồm cả Linux), điều này rất thuận tiện cho các nhà phát triển.
Điều làm cho Aptana trở nên đặc biệt là cách bạn có thể phát triển một ứng dụng web nhỏ một cách nhanh chóng và thử nghiệm thiết kế của bạn. Các bộ studio cho phép bạn nhanh chóng phát triển và kiểm tra một ứng dụng web chạy trên Ruby on Rails, PHP, Python hoặc đơn giản là HTML / CSS, và các tính năng làm nổi bật mã của họ gần đây đã được cải thiện để bao gồm các thư viện thẻ HTML5 và CSS3 mới. Nó cũng đi kèm với tích hợp Git, thiết bị đầu cuối tích hợp, trình gỡ lỗi mã và một số tính năng tiện lợi khác.
Bộ dụng cụ và biểu tượng GUI di động
Điều gì sẽ là web mà không có sự tự do nằm xung quanh? Đối với các nhà thiết kế web, tầm quan trọng của giao diện người dùng được xếp hạng cao hơn mọi thứ khác. GUI đơn giản rất khó để ra mắt và chỉ những nhà thiết kế sáng tạo nhất mới đưa ra giải pháp làm việc.
Tuy nhiên, có rất nhiều tài nguyên miễn phí nhưng chất lượng có sẵn để bạn thiết kế web để kiểm tra. Các bộ GUI này hầu hết được thiết kế cho Adobe Photoshop hoặc Fireworks nơi bạn có thể di chuyển xung quanh các yếu tố và xuất chúng dưới dạng tệp hình ảnh phẳng.
Các biểu tượng là một tài nguyên rất tiện dụng để có. Các nhà thiết kế đang tạo ra các bộ miễn phí và cung cấp chúng trực tuyến thường xuyên hơn bao giờ hết. Một trang web như vậy Glyphish có một chương trình giới thiệu cả biểu tượng miễn phí và chuyên nghiệp. Các thiết kế này dựa trên một chủ đề duy nhất được sử dụng trên các mẫu thiết kế và ứng dụng di động.
Bộ sưu tập các mẫu tạo mẫu thiết bị di động của chúng tôi sẽ giúp ích rất nhiều cho bạn trong suốt hành trình phát triển trang web và ứng dụng. Bạn không nên bắt đầu mã hóa cho đến khi bạn có một giao diện đồ họa mạnh mẽ và những bộ dụng cụ web này sẽ giúp bạn bắt đầu đi đúng hướng.
Bộ công cụ GUI iOS 5
Các yếu tố Vector UI của iPhone
Bộ biểu tượng ứng dụng iPhone
Nam châm dây (Bộ dụng cụ DIY)
GUI giao diện Android
