Nếu bạn sử dụng Thời gian sử dụng trên máy Mac hoặc iPhone, bạn có thể thấy các ứng dụng giống nhau xuất hiện trên Báo cáo thời gian sử dụng hàng tuần. Tại sao vậy? Vì đây là những ứng dụng thu hút được hầu hết sự chú ý của bạn — đặc biệt là nhờ thiết kế tuyệt vời giúp đáp ứng nhu cầu hàng ngày của bạn. Trong hướng dẫn thiết kế ứng dụng này, chúng tôi cho bạn biết về tất cả những điều bạn nên ghi nhớ khi tạo ứng dụng dành cho thiết bị di động. Hãy để nó trở thành một ngôi sao trên Báo cáo thời gian sử dụng của ai đó!
Có công thức thiết kế ứng dụng nào hiệu quả không?
Không thực sự. Nhưng có một cách để phân biệt thiết kế tốt với thiết kế tồi. Thiết kế tốt là UX và UI cân bằng hoàn hảo. Và bạn thực sự cần phải hoàn thiện cả hai để tạo ra một ứng dụng tuyệt vời mà mọi người sẽ yêu thích. Giao diện người dùng (UI) là tất cả về màu sắc, phông chữ và các yếu tố khác trong giao diện ứng dụng của bạn để tạo ra phong cách chung. Trải nghiệm người dùng (UX) tồn tại trong chức năng và mục tiêu cuối cùng của nó là giữ chân người dùng.
Vì vậy, nếu bạn nhìn vào ứng dụng Uber, bản đồ tối giản là UI và khả năng chọn các điểm đến được ghim như “Work” hoặc “Home” là UX. Nếu Uber không làm được bất kỳ điều nào trong số này – chẳng hạn như tạo ra một bản đồ lộn xộn với nhiều yếu tố dư thừa hoặc bắt người dùng nhập đi nhập lại địa chỉ nhà của họ – thì một lượng lớn người dùng Uber sẽ bỏ cuộc. Vì vậy, hãy chắc chắn rằng bạn để mắt đến cả giao diện người dùng và trải nghiệm người dùng.
hình ảnh của Simon Pan
Ngay sau khi bạn tìm ra cách phát hiện thiết kế tốt, bạn sẽ thấy dễ dàng hơn để dự đoán điều gì sẽ phù hợp với người dùng mục tiêu của mình.
Cách tạo thiết kế ứng dụng di động từng bước
Bây giờ chúng ta hãy tiếp cận quá trình thiết kế. Trong hướng dẫn này, chúng tôi tập trung chủ yếu vào các công cụ sẽ giúp bạn nghiên cứu, tạo nguyên mẫu và thử nghiệm thiết kế ứng dụng một cách nhanh chóng. Điều này rất quan trọng vì bạn xác thực các ý tưởng càng nhanh thì bạn càng tạo ra một ứng dụng tuyệt vời nhanh hơn.
Trả lời đúng câu hỏi
Chúng tôi biết mọi người nói rằng hãy thực hiện nghiên cứu trước khi bạn tạo ra bất kỳ thứ gì mới. Đó là cách đúng đắn để làm điều đó. Nhưng chất lượng nghiên cứu của bạn là điều quan trọng nhất. Sai lầm lớn nhất là nhằm mục đích tạo ra Uber, Spotify, Instagram tiếp theo, bạn đặt tên cho nó. Đôi khi, mọi người quá tập trung vào những thứ mà các ứng dụng khác làm đến nỗi cuối cùng họ không nghiên cứu kỹ ý tưởng của mình.
Thay vào đó, điều thực sự quan trọng là tự hỏi bản thân một số câu hỏi cơ bản về lý do tại sao ứng dụng nên tồn tại ngay từ đầu:
- Ứng dụng của bạn sẽ có điểm nào có thể khiến mọi người chọn ứng dụng đó thay vì đối thủ cạnh tranh không?
- Bạn có chắc là người ta cần nó không? Điều gì làm bạn nghĩ như vậy? (cố gắng sao lưu nó với thông tin chi tiết về nghiên cứu người dùng)
- Những vấn đề thực tế mà ứng dụng của bạn giải quyết (tên ít nhất ba).
Sử dụng ứng dụng MindNode để ghi lại câu trả lời của bạn. Đây là ứng dụng bản đồ tư duy tốt nhất hiện có sẽ giúp giữ tất cả các nghiên cứu của bạn ở một chỗ. Hơn nữa, nếu bạn sử dụng MindNode qua capnhat.me, bạn cũng có thể nhận bản sao iOS của nó với capnhat.me cho iOS. Tham gia nghiên cứu của bạn ở bất cứ đâu — từ sự thoải mái của máy Mac hoặc khi bạn đang di chuyển.
Phác thảo wireframe cho một ứng dụng
Sau khi bạn biết ứng dụng của mình sẽ giải quyết vấn đề gì, đã đến lúc quyết định ứng dụng sẽ trông như thế nào. Bắt đầu quy trình thiết kế ứng dụng của bạn bằng cách tạo các wireframe đơn giản. Bước đầu tiên có thể chỉ là vẽ màn hình và các thành phần màn hình trên một tờ giấy. Thảo luận về wireframe với nhóm của bạn và thực hiện một vài lần lặp lại để tìm ra các tùy chọn tốt nhất.
Nếu bạn muốn tạo khung dây nhấp qua, chúng tôi khuyên dùng Invision hoặc Sketch cho công việc. Điều này sẽ cho phép bạn kiểm tra điều hướng và xem luồng ứng dụng tổng thể. Ngoài ra còn có một công cụ miễn phí rất cơ bản được gọi là Freehand by Invision — về cơ bản, một bảng trắng nơi bạn có thể ghép các màn hình lại với nhau, vẽ và cộng tác.
Tạo một nguyên mẫu dễ kiểm tra
Wireframes sẽ giúp bạn tạo bản thảo về giao diện trực quan và suy nghĩ về điều hướng. Nhưng đừng dừng lại ở đó. Tạo một nguyên mẫu có thể nhấp và xem ứng dụng của bạn hoạt động. Điều này thực sự quan trọng về mặt trải nghiệm người dùng vì các nguyên mẫu cho phép bạn kiểm tra chức năng và khả năng sử dụng ứng dụng của mình — trước khi nó tồn tại.
Flinto là một trong những công cụ tạo mẫu tốt nhất mà bạn có thể sử dụng cho nhiệm vụ này. Chỉ cần đưa vào tất cả các yếu tố như văn bản, hình ảnh và nút, sau đó tạo liên kết giữa chúng. Ứng dụng này có Trình thiết kế hành vi sẽ giúp xác định các tương tác vi mô — nơi người dùng nên chạm, vuốt, cuộn, v.v. Bạn cũng có thể thêm hiệu ứng chuyển tiếp động trên các màn hình. Vì vậy, về cơ bản, cuối cùng bạn sẽ có được một ứng dụng đầy đủ tính năng mà bạn có thể xuất và thử nghiệm trên iOS.
Có được màu sắc hoàn hảo
Màu sắc không phải là yếu tố tạo nên “cái đẹp”. Chúng là một phần quan trọng của giao diện người dùng có thể tác động đến nhận thức và thậm chí cả hành vi của người dùng. Vì vậy, hãy chắc chắn rằng bảng màu của bạn đáp ứng các yêu cầu sau:
-
Bảng màu được giới hạn ở ba màu (trong trường hợp hiếm hoi là bốn hoặc năm)
-
Bạn biết đối tượng mục tiêu của mình cảm nhận màu sắc như thế nào (màu đỏ là màu của đam mê ở các nước phương Tây nhưng nó có nghĩa là sự giàu có ở Trung Quốc)
-
Sử dụng một vài tông màu và sắc thái của một màu cơ bản.
Nếu bạn đã nhìn thấy một màu sắc hoàn hảo trong một số hình ảnh và muốn thử nó trên ứng dụng của mình, hãy tải Sip. Nó phân tích màu sắc và sắc thái, chọn màu thành phần và giúp sắp xếp bảng màu của riêng bạn:
-
Mở một hình ảnh có màu
-
Khởi chạy Sip từ thanh menu và di chuyển kính lúp lên hình ảnh
-
Sip sẽ xác định màu sắc và đưa nó vào bảng màu của bạn.
Tạo các biểu tượng dành riêng cho thiết bị
Một ứng dụng phải đẹp từ trong ra ngoài. Bên ngoài, chúng tôi muốn nói đến logo, biểu tượng và bất kỳ nội dung nào khác sẽ cung cấp cho ứng dụng của bạn một danh tính. Nếu bạn thiết kế ứng dụng cho nhiều nền tảng và thiết bị, bạn có thể cần hàng trăm biểu tượng và màn hình giật gân với các độ phân giải khác nhau. Đó là rất nhiều công việc. Nhưng đừng lo lắng, chúng tôi ở đây để cho bạn biết cách làm cho cuộc sống dễ dàng hơn.
Trước tiên, bạn có thể sử dụng Image2icon để chuyển đổi bất kỳ hình ảnh nào thành biểu tượng. Ứng dụng này có hơn 30 mẫu biểu tượng và cho phép bạn xuất các biểu tượng dưới dạng ico, thư mục, icns, favicon, v.v. — tùy thuộc vào nền tảng mà bạn thiết kế.
Cần thêm tài sản? Asset Catalog Creator Pro cung cấp cho bạn gói đầy đủ. Quá trình này hoàn toàn giống nhau — thả một hình ảnh và nhận một bộ sưu tập các nội dung chung (biểu tượng cho macOS, iOS và Android, màn hình giật gân, v.v.). Hơn hết, bạn có thể dễ dàng cập nhật nội dung của mình trong Asset Catalog Creator Pro bất cứ khi nào có bản cập nhật ứng dụng. Vì vậy, đó thực sự là về lợi ích lâu dài và giữ cho nội dung ứng dụng của bạn nhất quán.
Hãy sẵn sàng để viết mã
Bây giờ là lúc để đưa hình ảnh lý tưởng vào cuộc sống. Chúng tôi sẽ không dạy bạn cách viết mã (vì chúng tôi không biết gì về nó), nhưng chúng tôi muốn cung cấp cho bạn một số công cụ giúp đơn giản hóa toàn bộ quá trình. Hãy tiếp tục và giới thiệu chúng với đồng đội của bạn, những người sẽ viết mã:
-
CodeRunner. Đó là một trình chỉnh sửa mã đơn giản cho phép các nhà phát triển viết, chạy và gỡ lỗi mã bằng 25 ngôn ngữ — tất cả đều nằm trong một giao diện rõ ràng và dễ hiểu. Không có tính năng kỳ diệu nào ở đây — nhưng nếu bạn sử dụng máy Mac để viết mã cho ứng dụng của mình, thì việc này sẽ nhanh hơn với CodeRunner.
-
XCOtổ chức. Đây là một trình tiết kiệm thời gian khác: XCOrganizer giống như một công cụ tìm kiếm cho các dự án Xcode của bạn trên Mac. Ứng dụng sử dụng siêu dữ liệu để tìm mọi thứ trong Dự án và Không gian làm việc Xcode của bạn cũng như Gói và Sân chơi Swift. Nếu bạn viết mã nhiều trên Mac, XCOrganizer giúp bạn dễ dàng theo dõi mọi thứ — ngay cả khi bạn không bao giờ nhớ tên các dự án của mình.
-
Buildwatch – một công cụ tuyệt vời để theo dõi thời gian dự án đã sử dụng trong Xcode để giúp bạn luôn cập nhật các mục tiêu phát triển của mình. Bằng cách cung cấp các báo cáo chi tiết về thời gian phát triển và tiến độ dự án của bạn, ứng dụng có thể giúp đảm bảo rằng bạn luôn đúng tiến độ và ngân sách.
Đặt mục tiêu mà ứng dụng của bạn sẽ đạt được
Trước khi bạn tạo ứng dụng, hãy đảm bảo rằng bạn biết điều này: Không có sản phẩm tốt nào tồn tại chỉ vì nó là một sản phẩm tốt. Bạn sẽ phải thực hiện nhiều nghiên cứu, tiếp thị và thích nghi để duy trì hoạt động. Có thông tin chi tiết về cách mọi người sử dụng ứng dụng của bạn sẽ giúp ích rất nhiều.
Dưới đây là một vài UX KPI cơ bản mà bạn nên chuẩn bị để theo dõi:
-
Thời gian thực hiện (trung bình người dùng cần bao nhiêu thời gian để hoàn thành một nhiệm vụ)
-
Tỷ lệ thành công của nhiệm vụ (số lượng nhiệm vụ đã hoàn thành thành công)
-
Tỷ lệ lỗi người dùng (số lần nhập sai trên mỗi người dùng) và hơn thế nữa.
Nếu bạn cần một công cụ đáng tin cậy để theo dõi tất cả những điều này, thì SheetPlanner là lựa chọn hoàn hảo. Nó giống như một danh sách việc cần làm cộng với ứng dụng lập kế hoạch cộng với quản lý dự án, nơi bạn có thể ghi lại các mốc quan trọng của mình và theo dõi cách ứng dụng hoạt động theo thời gian. Nhưng bạn cũng có thể chỉ cần sử dụng Google Analytics dành cho thiết bị di động hoặc bất kỳ công cụ nào khác mà bạn chọn để theo dõi các KPI chính. Điểm mấu chốt: luôn cập nhật thông tin về hiệu suất thiết kế ứng dụng của bạn.
Các phương pháp hay nhất về thiết kế ứng dụng năm 2020
Thiết kế ứng dụng di động là một sinh vật luôn thay đổi. Nhưng nếu bạn muốn tạo ứng dụng thành công, bạn cần theo dõi tất cả các thay đổi. Dưới đây là ba điều hàng đầu cần ghi nhớ nếu bạn thiết kế ứng dụng vào năm 2020:
-
Tránh quá tải nhận thức. Việc sử dụng ứng dụng của bạn phải dễ dàng — bất kể đó là công cụ để theo dõi thời tiết hay trình chỉnh sửa mã. Chia các nhiệm vụ lớn thành các bước để người dùng không bị choáng ngợp với số lượng lựa chọn. Cung cấp các chú giải công cụ một cách khéo léo — lần lượt thay vì tất cả cùng một lúc — và làm cho mọi thông tin bổ sung dễ dàng bỏ qua.
-
Hãy nhớ rằng ít hơn là nhiều hơn. Điều này đã không đổi trong một vài năm nay. Đảm bảo mọi màn hình đều có tối thiểu các yếu tố hình ảnh và nội dung văn bản. Điều này, một lần nữa, sẽ giúp người dùng đưa ra quyết định dễ dàng hơn.
-
Nắm bắt cách viết UX. Giao diện người dùng và UX của ứng dụng của bạn bao gồm nhiều thành phần văn bản — từ chú giải công cụ đến nút CTA. Đảm bảo rằng bạn có người có chuyên môn viết lách vững chắc để viết bản sao UX cho ứng dụng của bạn. Nếu bạn là người chơi một mình, hãy xem Khóa học viết Microcopy & UX ngắn này. Nó sẽ giúp bạn tìm hiểu một số nguyên tắc viết giao diện ứng dụng cơ bản.
Nếu bạn muốn biết thêm mẹo, Smashing Magazine là nơi phù hợp. Ở đó, bạn sẽ tìm thấy rất nhiều hướng dẫn và sách điện tử về cách hoạt động của thiết kế ứng dụng di động. Và khi bạn đã sẵn sàng để tiến lên phía trước với tốc độ tối đa, hãy tải tất cả các ứng dụng mà chúng tôi đã đề cập trước đây — và bắt đầu làm việc!
Flinto, MindNode, Buildwatch, Sip và hơn 240 ứng dụng khác có sẵn với capnhat.me. Vì vậy, thật dễ dàng để thực hiện toàn bộ quy trình thiết kế ứng dụng bằng một bộ công cụ duy nhất. Nhân tiện, bạn hoàn toàn có thể thiết kế ứng dụng trong 7 ngày — đó là thời lượng dùng thử miễn phí của capnhat.me!
