Hello mọi người, Tôi là Việt Anh, một UI / UX designer, biết chút về digital marketing, hiện đang sống và làm việc tại Singapore. Tôi muốn chia sẻ một series training cho những người mới bắt đầu tìm hiểu về UI / UX. Và đây là bài đầu tiên trong series đó. Tổng thể Trong hướng dẫn ngắn này, chúng ta sẽ đi qua những kiến thức cơ bản về Figma - một ứng dụng để thiết kế giao diện cho người dùng. Hướng dẫn này sẽ đi qua các bộ công cụ, bao gồm một số cách tiếp cận và thực hành khi bắt đầu một dự án thiết kế mới. Tại sao lại là Figma? So với các ứng dụng khác cùng loại, Figma tương đối mới. Xây dựng trên nền tảng do Sketch tạo ra, Figma cải thien hơn bằng cách có một ứng dụng hoàn toàn dựa trên web (khiến nó không phụ thuộc bất kỳ platform nào), hoàn toàn miễn phí để bắt đầu và trong một số trường hợp, cải tiến dựa trên các bộ tính năng tương tự của Sketch. Điều đó không có nghĩa là Sketch kém hơn về mặt nào, nhưng nếu bạn chỉ mới bắt đầu, Figma là một ứng dụng rất tiềm năng để lựa chọn. Tại sao lại không dùng Adobe XD hay Illustrator? Hay, lạy chúa, Adobe Photoshop? Mặc dù Adobe XD đang được cải thiện một cách nhanh chóng, nhưng về tổng thể thì nó vẫn còn khá là vụng về để làm việc trên đó. Rất nhiều công cụ còn chưa hoàn thiện và thiếu nhiều tính năng. Mọi thứ có thể thay đổi trong vài năm tới, nhưng hiện tại Sketch và Figma vẫn là tiêu chuẩn vàng cho việc thiết kế giao diện người dùng. Illustrator, mặc dù là một giải pháp thay thế tương đối tốt, đã không có bất kỳ thay đổi nào đối với hệ thống symbol của nó trong nhiều năm. Adobe dường như lạc lối và không biết phải làm gì tiếp. Photoshop thì dù có tốt cho việc thiết kế các hình ảnh đồ họa digital thông thường nhưng hãy tránh xa nó bằng mọi giá khi nói đến UI / UX, vì Adobe dường như thậm chí còn bối rối hơn với những gì cần làm cho Photoshop. Ngoài ra còn có 1001 lý do khiến Photoshop không phù hợp với những ai thiết kế UI / UX, những lý do này không được đề cập trong phạm vi của hướng dẫn này (nhưng có thể là 1 bài viết khác). Part 0: bắt đầu sử dụng Figma Vì nó là một công cụ thiết kế dựa trên nền tảng web, Figma có thể được chạy từ bất kỳ trình duyệt web nào bạn chọn. Chỉ cần đăng ký một tài khoản miễn phí tại figma.com và bắt đầu. Ngoài ra, bạn cũng có thể cài đặt Figma trên máy tính của mình tải tại đây (https://www.figma.com/downloads/). Đây là phương pháp được ưu chuộng, vì bạn có thể sử dụng phông chữ trên máy tính local của mình. Bạn cũng có thể làm như vậy với phiên bản web của Figma, nhưng nó sẽ yêu cầu cài đặt trình trợ giúp trên máy tính để bàn (Trình cài đặt phông chữ - font installer). Nếu bạn chỉ sử dụng phông chữ google, về cơ bản không có sự khác biệt. Tôi thì thích chạy Figma từ máy tính để bàn của mình hơn, vì sở thích cá nhân. Sau khi tạo tài khoản, hãy nhấp vào biểu tượng + bên cạnh Draft để tạo tệp mới. Chọn Blank Canvas để có được một tệp hoàn toàn trống.  figma-new-file1600×1190 145 KB Sau khi tạo, bạn sẽ thấy như sau: figma-new-file-21600×841 26.5 KB Chào mừng đến với Figma Phần 1: làm quen với giao diện Figma Hướng dẫn này được viết với giả định rằng bạn chưa từng tiếp xúc trước với Figma hoặc Sketch. Nếu bạn đã làm việc với Sketch, thì hãy cân nhắc chờ đợi các hướng dẫn nâng cao hơn trong tương lai. Nếu bạn xuất thân từ nền tảng Photoshop thuần túy, giao diện Figma có vẻ khá xa lạ. Dụng cụ của tôi ở đâu? Các lớp (layers) trong tệp của tôi ở đâu? Tại sao mọi thứ lại lạ lẫm như vậy? Mặt khác, người dùng Illustrator có lẽ sẽ nhếch mép cười khẩy. Giống như bất kỳ ứng dụng thiết kế dựa trên vector nào khác, Figma dựa trên khái niệm khung (hoặc art board) để tổ chức tệp thiết kế. Thay vì có một hình ảnh duy nhất có thể được cắt thành nhiều phần nhỏ hơn trong quá trình xuất, Figma cho phép bạn tạo nhiều khung với kích thước riêng của chúng. Do đó, bạn có thể sắp xếp các trang (pages) khác nhau của ứng dụng dành cho thiết bị di động của mình thành các khung khác nhau và xuất tất cả chúng sau này khi bạn hoàn tất. Để bắt đầu, hãy tạo khung. Nhấp vào công cụ Frame (F) trên thanh công cụ trên cùng: figma-navitation700×174 4.88 KB Sau khi nhấp vào, bạn sẽ thấy danh sách các mẫu kích thước khung hiển thị bên phải: Hãy nhấp vào iPhone 11 Pro Max cho ví dụ này. Figma sẽ tự động tạo khung và đặt tên cho nó. Thật tiện. figma-new-size-sample1600×840 46 KB Để di chuyển khung xung quanh, hãy sử dụng công cụ Move (V) để chọn và kéo khung đến vị trí bạn muốn. Ngoài ra, bạn có thể chọn Khung từ danh sách Lớp, sau đó kéo nó xung quanh bằng công cụ Di chuyển. Lặp lại quy trình tương tự và bạn có thể tạo nhiều khung Figma, có thể đại diện cho nhiều trang trong ứng dụng của bạn. Vì vậy, bạn có thể biến điều này: figma-component-11523×1600 16.5 KB Thành thế này: figma-component-21570×1600 109 KB Xin thứ lỗi cho thiết kế với màu sắc khá khoa trương của bản mockup này. Tôi chỉ đang cố gắng nhấn mạnh quan điểm trên. Khi thiết kế UI / UX chức năng, việc tổ chức các khung của bạn theo cách hợp lý là rất quan trọng để giúp nhóm phát triển của bạn hiểu được chức năng của ứng dụng. Cần phải rõ ràng những gì bạn đang cố gắng làm trong mỗi khung và liên kết logic từ khung này sang khung tiếp theo là rõ ràng ngay lập tức. Khi bạn tạo nhiều khung, bạn có thể thấy cần phải nhóm các khung lại với nhau dựa trên một cấu trúc nhất định. Bạn có thể làm như vậy bằng cách sử dụng chức năng Pages - một trang có thể chứa nhiều khung, vì vậy bạn có thể thực hiện cách quản lý các khung ở đây. Trong ví dụ này, mỗi Trang có giao diện người dùng của một lớp thiết bị cụ thể. Ví dụ: bạn cũng có thể sử dụng các trang để phân tách giao diện của các lớp người dùng. Tổ chức nó theo cách có ý nghĩa đối với nhóm thiết kế và phát triển của bạn. Phần 2: Tạo một nút đơn giản trong Figma Trong phần này, chúng ta sẽ bắt đầu với việc tạo một thành phần nút đơn giản trong Figma. Chúng ta cũng sẽ học cách tạo một thành phần có thể tái sử dụng, đây là một phần cơ bản của việc thiết kế UI / UX. Ngoài ra, vì hướng dẫn này dành cho người mới, chúng tôi sẽ tiếp cận thiết kế nút bằng phương pháp thân thiện với người mới bắt đầu. Điều đó có nghĩa là chúng ta sẽ không nói về Bố cục tự động và ghi đè style (auto layout and style overrides). Nếu bạn là một nhà thiết kế kỳ cựu hơn, một lần nữa tôi cần nhấn mạnh rằng hướng dẫn này không dành cho bạn. Tạo một khung mới, được gọi là Homescreen. Chọn công cụ Văn bản (T) và nhấp vào hình chữ nhật. Nhập Button. Vui lòng bỏ qua sự lựa chọn và kích thước phông chữ mặc định của tôi ở đây. Chọn text object và thay đổi phông chữ và kích thước của nó trên thanh bên phải. Chúng ta đang sử dụng Roboto Regular 16 tiêu chuẩn, chỉ để cho Tim Cook thấy. 492×638 7.87 KB Khi bạn đã tạo text object, hãy chọn cả hình chữ nhật và đối tượng văn bản bằng cách nhấp và kéo. Sau đó, xác định các công cụ Căn chỉnh trên đầu thanh bên phải, nhấp vào Cả hai Căn giữa theo chiều ngang và căn giữa theo chiều dọc. Thao tác này sẽ căn chỉnh giữa đối text object vào nút, theo cả chiều dọc và chiều ngang. Bây giờ, chúng ta sẽ chọn hình chữ nhật và thay đổi diện mạo của nó bằng cách sử dụng các cài đặt sau cho tô màu và nét vẽ. Lưu ý: nhấp vào biểu tượng + để thêm nét, sau đó thay đổi màu bằng công cụ chọn màu hoặc hex. Bạn sẽ có như sau: Bây giờ, xác định cài đặt bán kính góc và thay đổi nó từ 0 thành 8 Bây giờ bạn có một nút tiêu chuẩn. Chúc mừng. Bây giờ chọn cả hình chữ nhật và text object, nhấp chuột phải và chọn Tạo thành phần (create component) 936×1410 72.1 KB Bạn sẽ thấy trên bảng layer rằng các đối tượng của bạn đã được hợp nhất thành 1 đối tượng duy nhất và nó được gọi là Component 1, với biểu tượng giống như cỏ ba lá hình thoi (square-clover) bên cạnh. Điều này có nghĩa là instance (phiên bản) này là main component (thành phần chính). Main component (thành phần chính) vs instance (phiên bản) Nhân bản Thành phần chính bằng cách Alt + Kéo nó ra hoặc CMD + D. 931×452 13.3 KB Bạn sẽ thấy rằng, Thành phần 2 cũng có biểu tượng hình thoi bên cạnh tên của nó, nhưng nó không giống với biểu tượng hình thoi cỏ ba lá của thành phần chính. Hình vuông trống này biểu thị rằng component 2 là một instance (phiên bản), không phải main component. Một instance sẽ luôn tuân theo quy tắc của thành phần chính của nó, nhưng nó có thể được sửa đổi (trong mức độ hợp lý) để phù hợp với nhu cầu cụ thể của nó. Hãy xem xét một vài trường hợp khác nhau ở đây. Đầu tiên, nhấp vào component 1 (hoặc main component của nút), sử dụng mũi tên bên cạnh component để mở rộng cấu trúc lớp của nó. Bạn thấy rằng text object ban đầu và hình chữ nhật vẫn ở đó. Chọn hình chữ nhật từ danh sách lớp này và thay đổi màu tô (fill) của nó thành màu đỏ 1064×914 50.9 KB Bạn sẽ thấy rằng không chỉ main component thay đổi, mà instance của nó cũng thay đổi cùng với nó. Mặt khác, nếu bạn thay đổi màu nền của instance, bạn sẽ thấy rằng phiên bản chính không thay đổi màu nền của nó. Đây được gọi là ghi đè. 790×294 7.46 KB Một lần nữa lưu ý rằng, sau khi bạn thay đổi màu nền của instance, việc thay đổi màu nền của main component KHÔNG CÒN ảnh hưởng đến màu nền của instance đó. Điều này là do trong khi instance này vẫn có liên kết với main component của nó, bất kỳ giá trị nào đã bị ghi đè sẽ không bị ảnh hưởng bởi các thay đổi từ main component. 798×302 24.8 KB Nếu bạn thay đổi bất kỳ giá trị nào khác chưa được instance ghi đè, hãy lưu ý rằng các thay đổi vẫn được chuyển từ main component sang các instance của nó. Biết cách component / instance hoạt động sẽ giúp bạn rất nhiều khi nói đến UI / UX, vì bạn có thể giữ cho các nút và giao diện phần tử của mình nhất quán trên bảng. Trên thực tế, để cho một UI / UX có thể vận hành, bạn nên sử dụng một tập hợp các style nhất quán ngay từ đầu, thay vì tự tạo các phần tử mới. Quy trình tạo bộ quy tắc cho các phần tử ngay từ đầu, sau đó thiết kế giao diện người dùng dựa trên bộ quy tắc này được gọi là Atomic Design. Bằng cách tận dụng các thành phần nhiều lớp, ghi đè và các kiểu thay thế, bạn có thể nhanh chóng tạo nhiều biến thể từ một phần tử bắt đầu chung. 600×633 26.5 KB 4 kiểu nút này được tạo ra từ một kiểu nút bình thường duy nhất, đơn giản bằng cách ghi đè các phần tử khác nhau của nút và thêm một số hiệu ứng lớp khi cần thiết. Bạn hoàn toàn có thể tạo ra một component master button đảm nhận tất cả các trạng thái nút có thể có. Nhưng điều đó sẽ được dành cho các bài hướng dẫn sau. Hi vọng mọi người cảm thấy bài hướng dẫn đầu tiên trong Series UI / UX cho người mới bắt đầu hữu ích. Mọi thắc mắc hay câu hỏi, hãy nêu lên trong này và tôi sẽ giải đáp mọi thắc mắc của bạn. Và hi vọng nhận được nhiều sự hứng thú để tôi chia sẻ tiếp bài viết thứ 2. Bài viết này vốn được viết bằng tiếng Anh, team UAN đã giúp tôi dịch thuật ra tiếng Việt vì thật ra tôi quen thuộc với việc truyền tải nội dung bằng tiếng Anh hơn. Bạn có thể đọc bài gốc bằng tiếng Anh tại đây nếu muốn.
|
