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

Cùng tìm hiểu về User Interface cơ bản

Chủ đề thuộc danh mục 'Kinh nghiệm / Kiến thức dành cho designer' được đăng bởi Hoangcuong141414, 25/12/15.

Lượt xem: 2,187

  1. Hoangcuong141414 Mới đăng kí

    Nội dung :
    1. Số liệu kĩ thuật
    2. Những điều lưu ý
    3. Input để Design
    4. Output cho Dev
    5. Quy trình làm việc
    6. Resources
    1. Số liệu kĩ thuật
    • Kích thước màn hình
    • Font size
    • Padding
    • Kích thước các elements
    Kích thước màn hình
    q7dzeOb.jpg
    Kích thước màn hình iphone
    Những số liệu luôn có
    • Chiều cao status bar: 40px
    • Chiều cao navigation bar: 88px
    PgJgIt7.jpg
    thông số cơ bản
    Chúng ta dùng thường dùng kích thước 720×1280(HD) phổ biến

    PW01pbq.jpg
    Độ phân giải màn hình android
    Những số liệu luôn có
    • Chiều cao status bar: 48px
    • Chiều cao action bar: 112px
    • Chiều cao navigation bar: 96px
    P45gymo.jpg
    Thông số cơ bản Android
    Font size
    Hệ điều hành iOS:
    • Font size tiêu đề ở Navigation bar: 32px
    • Font size body bình thường: 24px
    • Font size body nhỏ nhất: 20px
    Hệ điều hành Android
    • Font size tiêu đề ở Navigation bar: 40px
    • Font size body bình thường: 28px
    • Font size body nhỏ nhất: 24px
    Padding
    Khoảng cách lý tưởng thụt lề
    • Của cả 2 hệ điều hành là 40px
    Khoảng cách giữa các đối tượng khác loại
    • Trung bình 20px
    vd: chữ cách button 20px

    Kích thước các elements
    Button
    • Lý tưởng nhất là cao 80px
    DGMYPLI.jpg



    Icon trên Navigation
    • Lý tưởng nhất là cao 30px
    YzV1toD.jpg

    App icon
    • 1 file kích thước 1024×1024 px
    aEdIixX.jpg

    2. Những điều cần lưu ý
    • Số liệu
    • Đặt tên
    • Screenshots
    Số liệu
    Tất cả các size của 2 hệ điều hành đều phải là số chẵn
    Lý do
    • Màn hình Retina là x2, khi scale xuống màn hình thường phải chia hết cho 2
    • Dễ tính, dễ nhớ
    • Đều, đẹp
    Bo góc radius số chẵn
    Lý tưởng nhất là radius=6

    9-patches trong android
    Là file dùng cho những element khi phóng to phải giữ 4 góc của element ( ít nhất 1 góc là shape lạ )

    grxbKbZ.jpg

    Đặt tên

    Về layer
    • Group rõ ràng các cụm lại
    • Nhớ đặt tên theo đúng chức năng
    Về Artboard

    Đặt tên artboard theo tên của screen

    Cách đặt số :

    GxjM6aA.jpg
    • Số đầu tiên là thứ tự trong flow chính của wireframe
    • Số thứ hai trở đi là số thứ tự trong nhánh của screen chính
    ví dụ: 2.3 nghĩa là screen con thứ 3 trong screen chính thứ 2

    Về file Sketch
    • Làm tất cả các UI trong một file Sketch
    • Lưu 1 bản backup khác trong máy
    (làm hết một ngày thì replace trên dropbox)

    Screenshot
    Làm được UI nào thì export ra thành screenshot liền

    Mục đích:
    • Để mọi người dễ theo dõi
    • Lỡ app crash còn hình mẫu để đồ lại
    3. Input để Design
    1. Userflow của app
    2. Wireframe của toàn bộ app
    3. Brand của app ( nếu có )
    4. Mục đích chính của app
    5. User là ai ( miêu tả càng rõ càng tốt )
    6. iOS hay Android, cái nào ưu tiên hơn?
    4. Output cho Dev
    1. file UI.sketch ( nhớ sao lưu 1 file ở chỗ khác để làm backup )
    2. folder chứa asset của app
    3. folder chứa app icon
    4. folder chứa font dùng trong app
    5. folder chứa screenshot UI
    6. file prototype của Marvelapp
    7. folder chứa stock hình ( nếu có )
    5. Quy trình làm việc
    1. Tham gia buổi họp kickstart project
    2. Khi UX đang làm userflow…..thì mình bắt đầu research UI ( tham khảo trên mạng, xài các app đối thủ )
    3. Trao đổi và góp ý về wireframe với UX
    4. Bắt đầu làm UI
    5. Trao đổi trực tiếp với UX ( để biết về mong muốn, idea này nọ )
    6. Làm keyvisual 2, 3 trang UI chính ( thấy gì ko ổn thì trao đổi liền với UX )
    7. Review với team về keyvisual
    8. Gởi cho PM để confirm với client
    9. Chốt xong keyvisual thì chiến cho hết ( song song với việc làm prototype )
    10. Bàn giao cho bên Dev
    6. Resources

    Tool sử dụng chính
    • Thiết kế UI: Sketch 3
    • Tạo prototype: Marvel App
    Tham khảo UI
    Plugin cắt asset cho android
    Cắt 9-patches cho android
    Xuất icon app
    Free stock – icon cho UI
    Làm prototype
    Tự liệu trong bài viết được lấy từ nhiều nguồn trên internet bao gồm google images, slideshare, pinterest.

    Tác giả : Hoàng Cường

Ủng hộ diễn đàn