Thực hiện bởi Prateek Prasad
Trong thập kỷ vừa qua đã có sự thay đổi đáng kể về công nghệ. Cách đây không lâu, điện thoại thông minh được coi là xa xỉ, nhưng nay đã trở thành xu hướng rộng rãi và với kết nối internet đã có thể truy cập được đối với một nhóm rộng lớn hơn. Không chỉ người dùng đã tạo ra điều này để thể hiện bản thân theo những cách mới, mà nó còn làm lệch đi đáng kể ý nghĩa của "máy tính" bằng cách đưa những khả năng này ra khỏi văn phòng và thu gọn trong lòng bàn tay của mọi người. Vì đối với nhiều người dùng, điện thoại thông minh là máy tính đầu tiên của họ.
Đây không phải là thiếu sót của một sự thay đổi mô hình đã làm thay đổi cơ bản nhiều khía cạnh của cuộc sống. Nó đã làm cho thế giới trở thành một nơi nhỏ hơn bằng cách đưa mọi người đến gần hơn theo một cách khác. Nó đã thay đổi hành vi xã hội của chúng ta và khiến các nghành công nghiệp hoàn toàn mới mọc lên. Thật tuyệt vời khi nhận ra rằng những chiếc điện thoại chúng ta luôn mang theo bên mình có ngày càng nhiều tính năng so với các máy tính con người đưa lên mặt trăng.
Nhìn lại cách hệ sinh thái này đã phát triển, chúng ta có thể thấy rằng ngay cả các thiết bị cấp thấp có sẵn ngày nay cũng có khả năng cao đáng kể hơn so với các thiết bị cao cấp của chúng ta trong những ngày đầu. Điện thoại thông minh hiện nay đã trở nên phức tạp hơn về giao diện, đồ hoạ, hoạt ảnh và chuyển đổi với nhiều cảm biến hơn để phân tích chính xác thế giới xung quanh.
Những điều đó chuyển thành các ứng dụng thông minh hơn, có khả năng giải quyết vấn đề - và làm điều đó với niềm vui. Thật khó để tìm thấy một ngành mà các ứng dụng không ảnh hưởng đến. Nó tiếp cận với người dùng và cung cấp dịch vụ để giúp bạn thuận tiện hơn khi bạn có ứng dụng. Điều này đã giúp cho việc phân phối trở nên dễ dàng hơn và san bằng sân chơi cho tất cả mọi người. Nhưng điều quan trọng hơn là phải biết cách thiết kế một ứng dụng vượt xa tiện ích thuần tuý.
Tại Sao Thiết Kế Lại Quan Trọng?
Với việc điện thoại thông minh đang trở thành xu hướng phổ biến, nhận thức của chúng ta về thiết kế và cách thiết kế tác động đến chúng ta hàng ngày cũng đã thay đổi. Với iPhone gốc, các ứng dụng đã cố gắng bắt chước thế giới thực với cái được gọi là thiết kế lệch hình. Và họ đã làm điều này vì một lý do tốt. iPhone là một thiết bị hoàn toàn mới, là thiết bị đầu tiên trong danh mục của nó, bởi vậy những người sử dụng mô hình tinh thần đã có khi họ đến với nó bắt nguồn từ việc sử dụng các vật thể trong thế giới thực.
Là con người, chúng ta dựa vào thói quen để tương tác với thế giới vật chất. Chúng ta không cần phải học cách sử dụng sổ tay mỗi khi chúng ta mua một cuốn sổ vì chúng đã đã quen thuộc với chúng. iPhone ban đầu đã tận dụng những xu hướng này. Đến gần như các đối tượng có thể có trong thế giới thực giúp người dùng có thể dễ dàng chuyển thói quen của họ sang tấm kính mỏng và tạo ra bước nhảy vọt về nhận thức.
Mười năm sau, chúng ta không còn cần phải bắt chước thế giới thực nữa - nhưng điều đó là vô giá đối với suy ngẫm về cuộc hành trình. Khi công nghệ ngày càng phát triển, kỳ vọng của người dùng từ các ứng ứng dụng cũng đã thay đổi. Một ứng dụng không chỉ cần hoạt động. Nó phải trông đẹp mắt, cảm thấy gần gũi và quen thuộc, và thú vị trong khi vẫn đủ độc đáo để thu hút sự chú ý và thiết lập chất riêng của nó.
Đó chính là điểm phù hợp của cuốn sách này. Cuốn sách này sẽ dạy bạn cách tích hợp các quyết định thiết kế vào ứng dụng của bạn. Bạn sẽ học cách vượt ra ngoài những ứng dụng chức năng đơn thuần để tạo ra những ứng dụng được coi là tốt.
Về Cuốn Sách Này
Cuốn sách bắt đầu từ đầu, giả sử bạn không có kinh nghiệm gì trước đó. Nó bao gồm tất cả những điều cơ bản, chẳng hạn như bố cục, màu sắc, kiểu chữ, luồng và chuyển tiếp và hơn thế nữa. Bạn sẽ sử dụng Figma, một công cụ thiết kế hiện đại, để tìm hiểu các nguyên tắc cơ bản trong công cụ đó. Bạn sẽ áp dụng các bài học bạn học về một ứng dụng mẫu để có một tham khảo duy nhất trong suốt cuốn sách này.
Ứng Dụng Theo Dõi Phim
Trong cuốn sách này, bạn sẽ thiết kế Cinematic, một ứng dụng để theo dõi phim. Ứng dụng cho phép người dùng xem các bộ phim thịnh hành và được xếp hạn cao nhất cũng như lập danh sách các bộ phim mà họ muốn xem.
Trông nó sẽ như thế này:
Giả Định Về Người Đọc
Cuốn sách này là dành cho bạn nếu bạn là:
- Một người không có kinh nghiệm thiết kế hoặc đào tạo nào trước đây.
- Một người không quen thuộc với các công cụ thiết kế chuyên dụng như Photoshop, Sketch, Figma.
- Không thể trả tiền cho các công cụ thiết kế, trừ khi bạn có thể sử dụng chúng như một phần thường xuyên trong quy trình làm việc của mình.
- Không thể thuê một nhà thiết kế cho các dự án của bạn.
- Một người muốn tự làm thêm thiết kế hoặc nâng cao kỹ năng của mình.
Tóm Tắt Các Chương
Cuốn sách này được chia thành ba phần hữu ích. Dưới đây là tóm tắt của từng chương như một bản xem trước về những gì sẽ xảy ra:
Phần I
Chương 1: Tổng Quan Về Sách & Xem Trước Ứng Dụng: Đây là chương bạn hiện đang đọc hiểu. Xem tổng quan về cuốn sách này bao gồm một cái nhìn ngắn gọn về những gì sắp xảy ra ở mỗi chương. Thiết lập không gian làm việc thiết kế Figma của bạn và tìm hiểu cách truy cập các tệp dự án. Tham gia và bắt đầu ngay lập tức với một dự án nhanh.
Chương 2: Xem Qua Không Gian Làm Việc & Cơ Bản Về Figma: Tìm hiểu các điểm chính về Figma như hình dạng, khung, kích cỡ, căn chỉnh, màu sắc và lớp và áp dụng kiến thức của bạn để thiết kế màn hình hoàn toàn từ đầu.
Chương 3: Bóc Tách Ứng Dụng: Theo dõi ảnh chụp màn hình được cung cấp của hai ứng dụng phổ biến để nghiên cứu và cấu trúc được sử dụng để xây dựng chúng.
Phần II
Chương 4: Khung Dây & Bố Cục Màn Hình: Tìm hiểu về tầm quan trọng của khung dây và cách kết hợp nó vào quy trình thiết kế của bạn. Tạo khung dây của một vài màn hình và các thành phần của chúng và xây dựng khung của luồng ứng dụng bằng cách xác định điều hướng giữa các màn hình.
Chương 5: Thành Phần Có Thể Tái Sử Dụng & Dữ Liệu: Tìm hiểu cách xây dựng các thành phần có thể tái sử dụng cho các phần tử giao diện người dùng phổ biến như nút, thanh công cụ và thẻ nội dung. Kết hợp văn bản mẫu và dữ liệu hình ảnh để có tính chân thực hơn. Tận dụng các thành phần có giá trị để lặp lại nhanh hơn và xây dựng các thiết kế linh hoạt hơn.
Chương 6: Kiểu Chữ: Tìm hiểu kiến thức cơ bản về kiểu chữ để giao tiếp phân cấp, trật tự và sự nhấn mạnh.
Chương 7: Màu Sắc: Có được cái nhìn tổng quan về kiến thức cơ bản về màu sắc bằng cách học các phương pháp phổ biến và tạo bàng màu. Tạo kiểu trực quan để tạo sự nhất quán trong toàn bộ ứng dụng.
Chương 8: Các Hệ Thống Thiết Kế: Tìm hiểu cách xây dựng hệ thống thiết kế để thiết lập tính nhất quán của thương hiệu. Hiểu rõ hơn về các quyết định thiết kế cơ bản bằng cách phân tích Human Interface Guidelines của Apple và Material Design của Google.
Phần III
Chương 9: Chuyển Tiếp & Hoạt Ảnh: Khám phá các công cụ tạo mẫu để tạo hướng dẫn ứng dụng đầy đủ. Tạo các chuyển đổi khác nhau giữa các màn hình để truyền đạt mối quan hệ giữa các phần tử.
Chương 10: Phản Hồi & Thử Nghiệm: Khám phá các công cụ cộng tác để kiểm tra thiết kế trên nhiều thiết bị và thu hút phản hồi về mục tiêu ứng dụng và trải nghiệm người dùng tổng thể.
Chương 11: Thông Tin Chi Tiết & Các Bước Tiếp Theo: Xem lại các bài học đã học và cách áp dụng chúng khi bắt đầu lại từ đầu. Nguồn cảm hứng và nguồn hữu ích. Gợi ý tiếp tục học hỏi và nắm vững các kỹ năng thiết kế.
Các Tệp Khởi Động
Mỗi chương đi kèm với các tệp khởi động để giúp bạn dễ dàng tập trung vào các bài học chủ đề hơn là loay hoay với các vấn đề thiết lập.
Các tệp là tệp Figma có phần mở rộng .fig. Bạn cũng sẽ có quyền truy cập vào các phiên bản cuối cùng của mỗi tệp chương để tham khảo.
Thiết Lập Figma
Figma là một ứng dụng thiết kế tương đối mới đang nhanh chóng trở nên phổ biến. Nó có thể so sánh với Sketch hoặc Adobe Photoshop, với các công cụ tiêu chuẩn để vẽ hình dạng, sử dụng phông chữ, hình ảnh, màu sắc,... Nó cũng có các tính năng tạo mẫu tích hợp để mô phỏng các hướng dẫn tương tác, cùng với các tính năng cộng tác mạnh mẽ để lặp lại và thực hiện.
Một vài tính năng nổi bật của Figma:
- Là một ứng dụng đa nền tảng.
- Miễn phí sử dụng lên đến ba dự án, đó là đủ cho cuốn sách này.
- Có hệ sinh thái plugin bên thứ ba phong phú để nâng cao quy trình làm việc của bạn.
- Có ứng dụng trên iOS và Android, có nghĩa là bạn có thể xem và tương tác với các dự án trên bất kỳ thiết bị nào bạn sử dụng.
Đăng ký
Tạo một tài khoản tại figma.com.
Khởi động Ứng dụng
Mặc dù Figma đi kèm với các ứng dụng gốc cho cả Mac và Windows, nhưng với mục đích của cuốn sách này, bạn sẽ sử dụng Figma trên trình duyệt để giữ mọi thứ nhất quán qua các chương.
Đăng nhập tài khoản bạn vừa tạo vào figma.com.
Cài đặt ứng dụng Phản Chiếu
Cuối cùng, tải xuống ứng dụng Figma Mirror cho thiết bị iOS và Android của bạn. Bạn có thể tìm thấy các liên kết tại figma.com/downloads hoặc tìm kiếm Figma Mirror trong iOS App Store hoặc Cửa hàng Google Play.
Dạo một Vòng với Figma
Sau đây là những gì bạn sẽ học trong chương này:
- Nhập một thiết kế vào Figma.
- Tạo một nguyên mẫu.
- Thêm thành phần nút vào thiết kế của bạn.
Bắt Đầu
Đăng nhập vào Figma, nếu bạn chưa đăng nhập. Nếu bạn đang ở trong một tệp mới mà Figma đã tạo cho bạn, hãy nhấp vào nút điều hướng trên cùng bên trái và chọn Back to Files.
Chọn tab Drafts, nơi bạn sẽ tìm thấy bốn dự án mẫu cùng một số mẫu cho FigJam. Bạn sẽ thấy một cái gì đó tương tự như hình ảnh này:
Tiếp theo, tìm tệp chapter-1-starter.fig trong phần tải xuống sách và kéo nó vào cửa sổ ứng dụng Figma để nhập dự án.
Nhấp đúp vào chapter-1-starter để mở dự án.
Dự án có ba khung đại diện cho ba màn hình của ứng dụng. Khung movie-list hiển thị danh sách các phim thuộc danh mục Trending, trong khi hai khung chi tiết phim hiển thị thông tin chi tiết của các phim "Birds of Prey" và "Frozen 2".
Những màn hình này có thể trông tĩnh, nhưng đó là một nguyên mẫu tương tác.
Chế độ xem như một Nguyên Mẫu Tương Tác
Để tương tác với nguyên mẫu, hãy nhấp vào nút Trình bày ở Thanh công cụ. Bạn sẽ thấy nó ở góc trên cùng bên phải màn hình.
Một tab trình duyệt mới sẽ mở ra với màn hình movie-list bên trong khung thiết bị iPhone 11 Pro Max. Danh sách có thể cuộn, nhưng thanh trạng thái và thanh điều hướng dưới cùng đứng yên.
Nếu bạn nhấp vào bất kỳ đâu trên tab trình duyệt, các thành phần tương tác sẽ nhấp nháy, cho biết bạn phải nhấp vào đâu. Trong trường hợp này, đó là thẻ phim Birds of Prey, là mục đầu tiên trong danh sách.
Nhấp vào thẻ sẽ đưa bạn đến màn hình chi tiết của bộ phim. Bạn có thể cuộc qua màn hình và xem các phần khác nhau.
Có khả năng thiết kế và tạo mẫu các tương tác trong một công cụ rất mạnh mẽ và giảm nhiều ma sát qua lại trong quá trình thiết kế điển hình.
Như một bài tập bắt đầu nhanh, bạn sẽ liên kết màn hình phim Frozen 2 với màn hình chi tiết của nó. Ngoài ra, không có cách nào để bạn điều hướng trở lại màn hình danh sách phim kể từ bây giờ. Bạn sẽ tạo một nút Đóng để thoát khỏi màn hình chi tiết.
Bài tập nhanh này sẽ giúp bạn đỡ bẩn tay và cho bạn cảm giác về quá trình này. Các chương sắp tới sẽ đi sâu hơn vào các khía cạnh riêng lẻ của công cụ và quy trình nhưng hiện tại, hãy vui vẻ đi!
Tạo một Liên Kết Giữa Hai Màn Hình
Quay lại cửa sổ chỉnh sửa của Figma và nhấp vào tuỳ chọn Prototype trong bản Properties ở bên phải.
Trong bảng Layers ở bên trái, hãy mở rộng khung movie-list và chọn frozen-2 trong nhóm như hình dưới đây.
Bạn sẽ thấy một nút o ở cạnh bên phải của thẻ.
Khi bạn di chuột qua chữ o, nó sẽ chuyển thành dấu +. Nhấp vào dấu + và kéo mũi tên đến khung movie-details-frozen-2. Điều này liên kết thẻ Frozen 2 với màn hình chi tiết của nó.
Menu Interaction Details sẽ xuất hiện, trình bày chi tiết các thuộc tính hoạt ảnh, điều hướng và chuyển tiếp. Để mọi thứ ở giá trị mặc định của chúng và đóng menu bằng cách nhấp vào X ở trên cùng bên phải.
Nhấp lại vào nút Trình bày để xem nguyên mẫu tương tác. Giờ đây, bạn có thể điều hướng đến màn hình chi tiết phim Frozen 2 bằng cách nhấp vào thẻ trong danh sách.
Công việc tuyệt vời khi xây dựng tương tác đầu tiên của bạn! Bây giờ bạn sẽ tạo nút Đóng để quay lại màn hình movie-list.
Thêm một Nút vào Màn Hình Chi Tiết
Quay lại tab Trình chỉnh sửa và nhấp vào tuỳ chọn Design trong bản Properties ở bên phải.
Từ Thanh công cụ ở trên cùng, nhấp vào Shape Tools và chọn Eclipse (O).
Bây giờ, hãy nhấp vào bất kỳ đâu trên khung movie-details-birds-of-prey. Thao tác này sẽ thêm một hình tròn 100x100 vào màn hình. Bạn cũng sẽ tìm thấy tuỳ chọn này trong bản Layers ở bên trái.
Chọn hình tròn bằng cách nhấp vào nó, sau đó cung cấp cho nó các thuộc tính sau:
X = 16
Y = 60
W = 60
H = 60
Lưu ý: Các giá trị X và Y xác định toạ độ X và Y của hình tròn này, trong khi W và H đại diện cho chiều rộng và chiều cao của nó.
Bây giờ bạn sẽ thay đổi màu của nút. Để làm như vậy, hãy chọn tuỳ chọn Fill từ bảng Properties ở bên phải và tô màu trắng (#FFFFFF) cho nó.
Thay vì tạo biểu tượng X theo cách thủ công bằng cách sử dụng các đường thẳng, bạn sẽ gian lận một chút và sử dụng chữ X để giữ mọi thứ đơn giản. Lén lút phải không?
Từ Thanh công cụ ở trên cùng, chọn Text (T) và nhấp vào bên trong hình tròn để thêm lớp văn bản.
Gõ X in hoa trong lớp văn bản.
Từ phần Text của bản Properties, cung cấp cho lớp này kích thước phông chữ là 32 và sử dụng phông chữ Roboto với trọng số Regular.
Dấu X chưa được căn giữa trong hình tròn. Để khắc phục điều đó, hãy giữ phím Shift và chọn cả hình tròn và lớp văn bản.
Bây giờ, chọn Align Horizontal Centers để căn chỉnh hai lớp theo chiều ngang.
Tiếp theo, chọn Align Vertical Centers để đưa văn bản vào tâm của hình tròn.
Đã đến lúc nhóm các lớp. Giữ cả hình tròn và lớp văn bản được chọn, nhấp chuột phải và chọn Group Selection.
Lưu ý: Nhóm hai lớp bao bọc chúng thành một thực thể, cho phép bạn di chuyển và thay đổi kích thước tất cả các lớp bao quanh chung. Điều này rất hữu ích khi làm việc với các phần tử giao diện người dùng bao gồm nhiều phần nhỏ hơn.
Nhấp đúp vào nhóm trong bảng Layers và đặt tên cho nhóm đó là close-button.
Làm rất tốt khi xây dựng nút đầu tiên của bạn! Bây giờ, đã đến lúc liên kết nút với màn hình movie-list để bạn có thể quay lại danh sách phim từ màn hình chi tiết.
Bắt đầu bằng cách nhấp vào tuỳ chọn Prototype từ bảng Properties. Bây giờ, chọn close-button từ bảng Layers và nhấp vào o và kéo một liên kết đến khung movie-list.
Quay lại nguyên mẫu tương tác bằng cách nhấp vào Trình bày. Bây giờ bạn có thể quay lại màn hình danh sách phim bằng cách nhấp vào nút Đóng trên màn hình chi tiết.
Bạn cũng cần thêm nút Đóng vào màn hình movie-details-frozen-2. Thay vì tạo nó từ đầu, hãy chọn close-button và nhấn Command/Control-C để sao chép nó.
Bây giờ chọn khung movie-details-frozen-2 và nhấn Command/Control-V.
Điều này không chỉ sao chép nút cùng với vị trí chính xác mà còn sao chép liên kết bạn đã tạo trước đó.
Quay lại nguyên mẫu tương tác bằng cách nhấp vào nút Trình bày và bạn sẽ thấy nút Đóng trên màn hình chi tiết Frozen 2.
Xem trước trên Thiết bị
Để đưa quá trình tạo mẫu của bạn lên cấp độ tiếp theo, hãy triển khai các nguyên mẫu của bạn tới một thiết bị vật lý và tương tác với chúng. Cài đặt ứng dụng Figma Mirror từ App Store hoặc Play Store và đăng nhập vào tài khoản Figma của bạn.
Tất cả những gì bạn cần làm bây giờ là chọn khung mà bạn muốn xem trên thiết bị của mình và voilà, nó sẽ xuất hiện. Nó hoàn toàn có thể tương tác được.
Lưu ý rằng nguyên mẫu có thể không hoàn toàn phù hợp với thiết bị của bạn do sự khác biệt về kích thước, nhưng Figma Mirror vẫn hoàn thành xuất sắc việc thu nhỏ các thiết kế - gần đến mức hoàn hảo.
Làm tốt lắm với bài tập khởi động nhanh! Bạn đã xây dựng phần tử giao diện người dùng đầu tiên của mình và tương tác từ đầu. Đây là một thành tích khá tốt và bạn nên tự hào về bản thân. Mặc dù bạn chưa tìm hiểu kỹ về Figma, nhưng phần giới thiệu này hi vọng sẽ giúp bạn có cái nhìn nhanh về những gì cuối cùng bạn sẽ có thể xây dựng từ đầu sau khi xem qua cuốn sách này.
Những Điểm Chính
Bạn thiết lập không gian làm việc của mình bằng cách tạo tài khoản Figma.
- Bạn đã học cách nhập thiết kế vào Figma.
- Bạn đã thực hiện bài tập bắt đầu nhanh để thêm nút Đóng bằng cách sử dụng hình dạng, văn bản và căn chỉnh.
- Bạn đã thêm một tương tác để điều hướng trở lại màn hình chính.
- Bạn đã triển khai nguyên mẫu tương tác của mình với một thiết bị vật lý.
Nhận xét
Đăng nhận xét