Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Những điều lưu ý khi thiết kế giao diện ứng dụng cho iOS 7

Chủ đề thuộc danh mục 'Thiết kế ứng dụng điện thoại - Mobile Apps' được đăng bởi Phạm Hữu Dư, 29/10/13.

Lượt xem: 7,623

  1. Phạm Hữu Dư phamhuudu.com

    IOS 7 được đánh giá là một trong những hệ điều hành đẹp và phong cách nhất. Nếu bạn muốn thiết kế giao diện ứng dụng sao cho phù hợp với IOS 7 thì đừng bỏ qua bài viết này nhé.

    Hệ điều hành iOS 7 đã mang lại những trải nghiệm mới mẻ cho người sử dụng Iphone và hứa hẹn sẽ ngày càng được đón nhận và yêu mến hơn nữa. Liệu bạn đã sẵn sàng thiết kế giao diện ứng dụng phù hợp với iOS 7 chưa? Bài viết dưới đây sẽ hướng dẫn bạn có một thiết kế giao diện ứng dụng cho iOS 7 thời thượng và phong cách.

    1. Nghĩ phẳng hơn

    Apple đã lựa chọn thiết kế phẳng cho iOS 7, tuy nhiên phong cách Flat design trong iOS 7 cũng không phải hoàn toàn phẳng. Vì vậy khi lên kế hoạch thiết kế giao diện cho iOS 7, bạn cần phải lưu ý đến những đặc điểm của thiết kế phẳng.

    [​IMG]


    Tất cả những icon hay hiệu ứng mang phong cách thiết kế mô phỏng rất được Apple ưa chuộng trước đây đã hoàn toàn biến mất trên iOS 7, thay vào đó, những yếu tố của thiết kế phẳng hoàn toàn thống trị hệ điều hành này. Hướng dẫn thiết kế từ Apple cho iOS 7 khuyến khích sự đơn giản và hữu dụng. Màu sắc trong iOS 7 bao gồm rất nhiều tông màu đơn sắc và hiệu ứng trong suốt. Flat design thường sử dụng những màu tươi sáng và có độ bão hòa cao. Tuy nhiên các nút chọn và bàn phím cũng không hoàn toàn phẳng, chúng vẫn có đổ bóng. Những hiệu ứng nhẹ nhàng này đã tạo nên vẻ ngoài mới mẻ cho giao diện hệ điều hành iOS 7.

    2. Tập trung vào kiểu chữ

    Kiểu chữ là chìa khóa của thiết kế giao diện ứng dụng cho iOS 7. Ngoài các nút chọn và icon, các hành động còn được chỉ dẫn bằng cách chạm vào các từ ngữ, các câu lệnh. Kiểu chữ mặc định của Apple là Helvetica Neue, một kiểu chữ mảnh và đơn giản nhưng đây không phải là lựa chọn duy nhất của bạn.

    [​IMG]

    [​IMG]

    Chữ cái trong iOS 7 lớn hơn và cấp bậc của các dòng chữ cũng rất quan trọng. Hãy lợi dụng màu sắc và độ dày khác nhau của kiểu chữ để người dùng dễ dàng theo dõi thông tin. Dưới đây là một vài thông số hướng dẫn của Apple cho những kiểu chữ mặc định mà bạn nên tham khảo:
    • Tiêu đề thanh chuyển hướng: Medium, 34 pixels
    • Các lựa chọn bằng nút và bằng chữ: Light, 34 pixels
    • Tên bảng: Regular, 28 pixels
    • Tên (nhãn) icon: Regular, 20 pixels
    3. Không viền

    Rất nhiều phần của giao diện thiết kế iOS 7 không có viền. Hãy nhìn ví dụ dưới đây. Bạn có thể thấy phần lịch và đồng hồ không có những đường kẻ ô lưới như chúng ta thường thấy. Khoảng trống đã thay thế những đường viền này, tạo nên một không gian gợi mở, thoáng đãng và cực kỳ tối giản. Nếu bạn muốn có một thiết kế giao diện ăn nhập với hệ điều hành iOS 7 thì hãy chú ý đến điều này nhé.

    [​IMG]

    Thiết kế giao diện iOS 7 hạn chế sử dụng đường viền mà thay vào đó là các khoảng cách.

    4. Cân nhắc hiệu ứng Parallax

    [​IMG]

    Một trong những đặc điểm mới của thiết kế giao diện iOS 7 là animation. Hiệu ứng do hệ điều hành này mang lại phức tạp hơn nhiều so với các hệ điều hành trước của Apple. Hãy tận dụng điều này, hãy cân nhắc những cách mới mẻ và khác biệt để những yếu tố trong thiết kế ứng dụng của bạn có thể tương tác với nhau cũng như với người dùng tốt hơn. Hiệu ứng parallax scrolling ( hiệu ứng cuộn màn hình từ trên xuống hoặc thậm chí từ trái sang phải) là một lựa chọn mà bạn chỉ có với iOS phiên bản mới nhất. Nếu bạn muốn thiêt kế giao diện ứng dụng cho iOS 7, hãy nghĩ đến trải nghiệm của người dùng trong suốt quá trình thiết kế.

    5. Tạo độ sâu bằng việc sử dụng các lớp

    Một điểm mới khá thú vị nữa mà Apple đem đến cho thiết kế iOS 7 đó là ở cách tạo độ sâu. Nếu như các hệ điều hành iOS trước đây tạo độ sâu bằng hiệu ứng của thiết kế mô phỏng thì iOS 7 tạo độ sâu bằng layer (lớp). Hãy mở 1 folder trên iOS 7 hoặc phần menu ở dưới và bạn sẽ thấy điều này (hình dưới). Layer ở đây được thiết kế trong suốt, khá tinh tế và phù hợp với sự đơn giản của thiết kế phẳng. Trong Photoshop, thiết lập Gaussian blur 10 pixels là một gợi ý cho việc thiết kế layer này.

    [​IMG]

    [​IMG]

    6. Chăm sóc thiết kế icon

    Với hệ điều hành mới này, việc thiết kế icon đòi hỏi phải rất kỹ lưỡng. Hãy đi theo những đặc điểm của thiết kế phẳng để tạo ra những icon ăn nhập với phong cách này. Bạn có thể tham khảo khá nhiều thiết kế icon mang phong cách Flat design trên trang Designs.vn.

    [​IMG]

    [​IMG]

    7. Một số điều cần nhớ khác

    Cuối cùng, Apple khuyên các designer cần nhớ 3 điều sau đây khi thiết kế mới hoặc tái thiết kế giao diện ứng dụng cho iOS 7:

    - Cập nhật các thiết kế icon cho các ứng dụng hiện có để phù hợp với phong cách mới củahệ điều hành iOS 7. Các thông số kỹ thuật là 120 x 120 pixel cho điện thoại và 152 pixel square cho iPad.

    - Giao diện ứng dụng cần bao gồm các thanh trạng thái trong hình ảnh khởi động.

    - Tất cả các thiết kế cần hỗ trợ màn hình Retina và iPhone 5.


    VÂN CHI - DESIGNS.VN

    ...
    nguyenthao811vincentpham.106 thích bài viết này.

Ủng hộ diễn đàn