Thiết kế giao diện người dùng bị ảnh hưởng đáng kể bởi ngôn ngữ giao diện người dùng mà nhà thiết kế sản phẩm thiết kế. Điều quan trọng là phải biết những điều cơ bản về ngôn ngữ trước khi bạn bắt đầu làm việc với một dự án.

Cách đây thời gian khi tôi bắt đầu sự nghiệp của mình với tư cách là nhà thiết kế UI / UX, tôi đã bị choáng ngợp khi nghe về các ngôn ngữ hoặc công nghệ front-end để xây dựng giao diện UI cho máy tính để bàn hoặc thiết bị di động. Tôi không biết về các khả năng khác nhau của từng cái và tôi không có manh mối rằng đường cơ sở thiết kế khác nhau tùy thuộc vào ngôn ngữ bạn thiết kế.

Mục đích của bài viết này là giải thích những điều cơ bản về các khung front-end di động phổ biến nhất; kiến thức này sẽ giúp bạn hiểu cách thiết kế cho từng khung công tác.

Ba công cụ và ngôn ngữ quan trọng nhất cần biết là công cụ iOS xCode và ngôn ngữ Swift, công cụ Android Studio và ngôn ngữ Kotlin, và ngôn ngữ React Native.

Phát triển iOS

Apple đã đặt tên cho iOS là hệ điều hành di động chạy trên iPhone hoặc iPad. Công ty của Cupertino cung cấp cho tất cả các nhà phát triển các công cụ và tài nguyên cần thiết để xây dựng ứng dụng iOS. Nhà phát triển iOS có tùy chọn xây dựng ứng dụng bằng ngôn ngữ bản địa như Swift hoặc Objective-C của chúng tôi hoặc sử dụng ngôn ngữ của bên thứ ba như React Native hoặc Xamarin .

Để tạo ứng dụng iOS hoặc ứng dụng Mac, bạn chỉ cần có máy Macintosh và phiên bản mới nhất của xCode . Để xây dựng các ứng dụng, công ty đề xuất sử dụng ngôn ngữ lập trình Swift .

Nguyên tắc về giao diện con người

Đây là nơi các nhà thiết kế và nhà phát triển có thể tìm thấy tất cả các tài liệu và thông tin với một tập hợp các đề xuất với các phương pháp hay nhất. Nguyên tắc về Giao diện Con người của Apple trợ giúp và hướng dẫn các nhà phát triển tạo các ứng dụng trực quan và nhất quán hơn.

Là một nhà thiết kế sản phẩm, bạn có thể được hưởng lợi từ việc sử dụng tất cả các thư viện thiết kế mà họ đã xây dựng cho bạn ở đây . Tất cả các tệp được thiết lập cho Photoshop, Sketch hoặc XD, nhưng chưa có trong Figma.

Là một nhà thiết kế thiết kế cho các nhà phát triển xây dựng ứng dụng iOS sử dụng xCode và Swift, bạn sẽ cần phải tuân thủ cẩn thận các hướng dẫn và thư viện của HIG để đảm bảo rằng bạn đang tuân thủ tất cả các quy tắc và giao thức do Apple xác định.

Phát triển Android

Google Android OS là hệ điều hành mã nguồn mở dựa trên Linux của Google dành cho các thiết bị di động và máy tính bảng. Công ty cung cấp cho tất cả các nhà phát triển các công cụ và tài nguyên cần thiết để xây dựng ứng dụng Android. Công cụ chính thức để làm điều này là Android Studio và các ngôn ngữ để tạo nội dung là Java và Kotlin , Android cung cấp hỗ trợ cho cả hai ngôn ngữ.

Phiên bản hệ điều hành mới nhất là 12.0 nhưng bạn có thể tìm thấy nhiều thiết bị sử dụng các phiên bản hệ điều hành khác nhau. Bên cạnh mỗi phiên bản là một tên mã sau một món tráng miệng 🍬🍰 ngon! Tìm hiểu thêm về Android Studio tại đây và về ngôn ngữ lập trình Kotlin trong liên kết sau.

Material Design 3

Tương tự như Nguyên tắc về giao diện con người, chúng tôi tìm thấy Material Design , một hệ thống thiết kế do Google tạo ra nhằm trợ giúp và hướng dẫn người dùng xây dựng trải nghiệm kỹ thuật số trên thiết bị di động và web. Gần đây, họ đã tung ra một phiên bản mới của hệ thống thiết kế cho phép các nhà thiết kế và nhà phát triển cá nhân hóa trải nghiệm hơn nữa.

Cá nhân tôi nghĩ rằng Material Design tập trung mạnh vào thiết kế UI / UX, trong khi HIG tập trung hơn vào phát triển. Trên trang web, bạn sẽ tìm thấy các thư viện, nền tảng, kiểu và thành phần để giúp bạn xây dựng giao diện người dùng và các tương tác của mình. Thông qua trang web, bạn sẽ tìm thấy các tài nguyên được tạo trong Figma để bạn tải xuống .

React Native

Ngôn ngữ React.js được Facebook phát triển vào năm 2011 bởi một kỹ sư phần mềm tên là Jordan Walke. Nó được tạo ra với một khung cơ bản của XHP dựa trên các thành phần HTML cho PHP. Nó từ từ được giới thiệu trong tất cả các sản phẩm Meta. Là công nghệ mới nhất trong ba công nghệ mà chúng tôi đã nói đến.

React được tạo ra để hỗ trợ tầm quan trọng ngày càng tăng của thiết kế trong công nghệ.

Tại sao react là một khuôn khổ tốt cho Nhà thiết kế sản phẩm?

• Các thành phần: Bạn có quen thuộc với các hệ thống thiết kế không? React tuân theo khái niệm Thiết kế nguyên tử về việc xây dựng các nguyên tử, phân tử và sinh vật sẽ được sử dụng trong các mẫu và trang, về cơ bản là một thành phần bên trong các thành phần, một cách mô-đun tái sử dụng các thành phần trên quy mô lớn. Khuôn khổ này sẽ là khuôn khổ tốt nhất của bạn để xây dựng một hệ thống thiết kế gắn kết, đáp ứng và không phức tạp.
• Đáp ứng : React giúp mở rộng quy mô và thiết kế cho các cổng xem trên thiết bị di động và máy tính để bàn cùng một lúc, có nghĩa là màn hình sẽ chia tỷ lệ và phản hồi với chế độ xem một cách dễ dàng.
• Mobile: React ban đầu được xây dựng chỉ để phát triển web, nhưng trở lại vào năm 2015, Meta Platforms đã phát triển phiên bản mới nhất này được sử dụng để phát triển các ứng dụng cho Android, iOS, Windows và hơn thế nữa.
• Kết hợp các khuôn khổ: Phiên bản năm 2015 này cho phép các nhà phát triển sử dụng khuôn khổ phản ứng cùng với các khả năng gốc, có nghĩa là một ứng dụng iOS hoặc Android gốc có thể được hưởng lợi từ cả hai thế giới hoặc khuôn khổ. Một ứng dụng có thể là bản gốc một phần và một phần được tạo bằng phản ứng.
• Đừng thiết kế hai lần cho iOS và Android! Tất cả các phần được thiết kế với react.js không cần phải suy nghĩ lại tùy thuộc vào việc triển khai trên iOS hay Android, chúng tôi sử dụng cùng một màn hình trên cả hai nền tảng.
• React thiết bị phát hiện: Tôi thực sự khuyên bạn nên dùng plugin này để phát hiện một thiết bị và hiển thị chế độ xem theo loại thiết bị được phát hiện. Tùy thuộc vào thiết bị, giao diện người dùng sẽ khác nhau.

Hãy suy nghĩ hai lần và thiết kế một lần!

Nói chuyện với các nhà phát triển và người quản lý của bạn để biết tất cả các nền tảng mà bạn sẽ thiết kế. Trong trường hợp bạn chỉ làm một ứng dụng iOS, xCode và Swift sẽ là cách tiếp cận tốt nhất, nhưng nếu phạm vi của dự án liên quan đến iOS, Android và có thể là web, thì React Native kết hợp với một số phần gốc sẽ là đồng minh tốt nhất của bạn vì bạn sẽ không cần phải tăng gấp ba lần công việc của bạn.

Trong những năm qua, tôi đã học được rằng linh hoạt tiết kiệm rất nhiều thời gian, vì vậy bạn có thể sử dụng React cho mục đích web và một số phần của ứng dụng, sau đó kết hợp với iOS và Android gốc để thu hẹp khoảng cách.

Tính linh hoạt giúp tiết kiệm rất nhiều thời gian, react.js có thể là nền tảng cho các dự án web và ứng dụng của bạn, nhưng bạn có thể kết hợp nó với các ngôn ngữ iOS và Android gốc để có kết quả tốt hơn.

Cảm ơn bạn đã đọc! Tôi là Oriol, một nhà thiết kế sản phẩm. Tôi giải quyết vấn đề thông qua nghiên cứu và thiết kế 🌟. Vui lòng liên hệ với tôi qua LinkedIn hoặc trang web danh mục đầu tư của tôi.