Thiết kế Phản hồi với Sketch - Phần 1

Có gì mới trong tính năng thay đổi kích thước nhóm phần tử (group resizing) ?

Với phiên bản Sketch mới nhất (v.44), tính năng thay đổi kích thước nhóm đã được cập nhật. Sau bản cập nhật này, chúng ta sẽ dễ dàng kiểm soát tính năng này hơn.

Trước đây, tôi đã có một bài viết chi tiết về tính năng này. Trong bài này, tôi sẽ cung cấp thêm thông tin về bản cập nhật mới và giới thiệu cho các bạn một số mẹo hay ho khác. Trong phần tiếp theo của bài này, tôi sẽ so sánh tính năng thay đổi kích thước nhóm với plugin Auto-layout của Anima.

Tóm tắt về chức năng Thay đổi kích thước nhóm phần tử

Trước khi đến với những thay đổi, tôi sẽ tóm tắt tính năng thay đổi kích thước nhóm cho người mới bắt đầu.

Đây là tính năng giúp bạn thay đổi kích cỡ và đáp ứng lại với sự thay đổi của nhóm phần tử đã chọn trong lớp thiết kế. Theo cách đó, khi bạn thay đổi kích thước nhóm, tất cả các lớp phần tử bên trong sẽ phản ứng và thay đổi một cách đồng nhất thay vì chỉ kéo dài ra và biến dạng.

Link video: https://gfycat.com/CaringIckyFiddlercrab

Có gì mới với tính năng này?

Về mặt tính năng, không có nhiều thay đổi có thể tạo ra sự khác biệt đáng kể với kết quả cuối cùng. Thay vào đó, chúng ta có thể điều khiển tính năng này dễ dàng hơn. Mặt khác, người mới sử dụng lần đầu sẽ cảm thấy khá bỡ ngỡ và khó làm quen, đặc biệt là khi thiết lập các chế độ nổi và kéo; nhưng không có gì phải lo cả, việc làm quen sẽ khá là nhanh và đơn giản thôi.

Tôi có thể nói rằng bạn cũng có thể làm được khá nhiều điều với tính năng này trong phiên bản trước.Thỉnh thoảng bạn cũng sẽ gặp vài khó khăn ví dụ như với những lớp vô hình, nhưng nhìn chung thì phiên bản trước cũng khá ổn. Vì vậy, bản cập nhật này không thực sự đáng khen ngợi lắm, mà đáng lẽ ra tính năng này phải được hoàn thiện như thế này từ phiên bản đầu tiên mới phải.

Ví dụ dưới đây sẽ giúp bạn nắm rõ được khả năng của tính năng này

Link video: https://gfycat.com/KeenIdolizedBluefintuna

Chi tiết quan trọng nhất trong ví dụ này là nhóm thư viện ở phần dưới cùng. Để thực hiện việc bố trí hệ thống lưới này, bạn cần phải sử dụng một số lớp vô hình trong nhóm; nếu không, khoảng trắng giữa các hệ thống lưới sẽ tăng lên hoặc co lại khi kích thước thay đổi.

Tôi đã làm một bảng để mô tả một số trường hợp và hiển thị các cài đặt tương ứng trong phiên bản trước đây. Tất nhiên, một vài trong số chúng sẽ không áp dụng được trong phiên bản trước vì bạn không thể chọn nhiều tùy chọn cùng một lúc, giống như trường hợp thứ năm trong danh sách dưới đây.

Tải về các ví dụ

Tải tệp tin Sketch có chứa các ví dụ được trình bày trong bài viết này.

Một số mẹo hữu ích

1. Chọn nhanh các cạnh của phần tử

Link video: https://gfycat.com/KeenIdolizedBluefintuna 

2. Thiết lập lại cài đặt nhóm

Link video: https://gfycat.com/MammothThunderousAlpaca

3. Làm thế nào để thay đổi kích thước các nhóm có chứa văn bản

Đối với những thay đổi trong văn bản gây ra sự thay đổi theo chiều dọc, bạn có thể sử dụng tính năng nhập liệu toán học của Sketch và giá trị chiều cao của nhãn phần tử. Chỉ cần chọn nhóm phần tử và thay đổi chiều cao thành 241 + 24 * 2 và nhấn Enter. 241 là chiều cao hiện tại, 24 là chiều cao của dòng và 2 là số dòng mới – Vâng, đúng rồi đấy, đếm số dòng nhé! Sketch sẽ tính toán kết quả và đặt chiều cao của nhóm để sửa giá trị lại giá trị tương ứng.

Đối với thay đổi văn bản gây ra sự thay đổi theo chiều ngang, như các nút bấm, bạn có thể sử dụng plugin của Sketch có tên Relabel (sử dụng kèm với plugin Runner để mang lại tính hiệu quả cao hơn).

Link video: https://gfycat.com/FatPertinentAustraliancurlew

Tôi hy vọng tính năng thay đổi kích thước tự động sẽ sớm xuất hiện, tính toán thủ công giờ đã quá lỗi thời rồi!

4. Khám phá tính năng “Căn chỉnh tự động” trong mục Symbols (biểu tượng)

Thêm vào đó, chúng ta còn có thêm một tính năng thiết kế phản hồi giúp cho việc thay đổi kích thước biểu tượng dễ dàng hơn. Khi bạn ghi đè lên một văn bản, Sketch di chuyển bất kỳ lớp nào nằm gần lớp văn bản đó một cách tự động.

Tính năng này hoạt động tùy thuộc vào độ gần và kích thước của lớp. Vì vậy, nếu bạn đang tự hỏi tại sao nó không hoạt động trong trường hợp của bạn, bạn nên kiểm tra lại các giá trị này nhé.

Link video: https://gfycat.com/DiligentComposedGraywolf

Lời bình

Cũng đã gần một năm kể từ khi tính năng thay đổi kích thước nhóm được giới thiệu. Đây là điều đúng đắn và cần thiết. Tuy nhiên, đáng lý ra những thứ có trong cái bản cập nhật này phải xuất hiện ngay từ đầu rồi mới phải. Vì vậy, tôi đã mong đợi một cải tiến lớn hơn thay vì chỉ như thế này. Thêm vào đó, vẫn còn thiếu rất nhiều các tính năng cần thiết như: xếp chồng phần tử lên nhau, tự động thay đổi kích thước, các ràng buộc lớp-lớp (layer-to-layer), hệ thống lưới và bố cục.

Còn một điều rất quan trọng nữa mà Bohemian Coding không làm cẩn thận cho lắm: thay đổi quy trình công việc. Những gì chúng ta nhận được là một bản cập nhật khá chậm và thiếu sự hoàn thiện, điều này dẫn đến việc các nhà thiết kế phải tự tạo ra một quy trình làm việc tạm thời và không bền vững. Đặc biệt là trong thiết kế lớp và các tính năng biểu tượng. Việc bắt các các nhà thiết kế phải làm quen lại mọi thứ từ đầu một cách thường xuyên như vậy là điều không nên. Tôi nghĩ rằng điều này thực sự mang lại khá nhiều thiệt hại.

Tóm lại, tôi nghĩ Bohemian Coding nên có một kế hoạch kỹ càng và thận trọng hơn khi phát triển các tính năng mang tính chủ đạo. Tất cả chúng ta đều yêu Sketch và chúng ta muốn nó sẽ ngày càng trở nên hoàn hảo, phải vậy không?

Tiếp theo là gì?

Trong phần tiếp theo của bài này, chúng tôi sẽ giới thiệu về plugin Auto-layout của Anima. Nó có khá nhiều tính năng mới và hữu ích. Bạn cũng có thể sử dụng các tính năng này cùng nhau nữa đấy nhé. Tôi sẽ giải thích mọi thứ một cách chi tiết và để bạn tự lựa chọn xem đâu là tính năng nên dùng nhất.

Vậy nên, nhớ theo dõicập nhật thường xuyên để đón đọc bài viết mới nhé!

Nguồn: Medium.com

Người dịch: Đình Nhân

Cùng tác giả

#Tag

Auto-layout Hướng dẫn series sketch sketch version 44 thiết kế phản hồi

iDesign Must-try

Đời thường Nhật Bản qua lăng kính của Adrian Hogan, tác giả bộ tranh Everyday Olympic
Đời thường Nhật Bản qua lăng kính của Adrian Hogan, tác giả bộ tranh Everyday Olympic
Gần đây, bộ tranh Everyday Olympic (Ngày nào cũng là Olympic) của Adrian Hogan được hưởng ứng và chia sẻ nhiều trên mạng xã hội. Bên cạnh tinh thần sáng…
Top 10 công cụ online hữu ích dành cho dân thiết kế
Top 10 công cụ online hữu ích dành cho dân thiết kế
Trong bài viết này, iDesign sẽ chia sẻ đến các bạn những công cụ trực tuyến hữu ích trong việc thiết kế đồ họa & thiết kế web. 1. Gingersauce:  Tạo…
Bản phác thảo ban đầu của các logo nổi tiếng hé lộ những sự thật thú vị về thiết kế
Bản phác thảo ban đầu của các logo nổi tiếng hé lộ những sự thật thú vị về thiết kế
Mọi thiết kế tuyệt vời cũng đều phải bắt đầu từ đâu đó
Kỷ niệm 25 năm Toy Story: Pixar tung ra những concept art ban đầu chưa từng thấy
Kỷ niệm 25 năm Toy Story: Pixar tung ra những concept art ban đầu chưa từng thấy
Có thể bạn đang cảm giác tất cả dường như vừa mới đây nhưng bộ phim đầu tiên của Toy Story đã được phát hành cách đây 25 năm
Nguồn gốc của phong cách Memphis và cách ứng dụng vào thiết kế của bạn
Nguồn gốc của phong cách Memphis và cách ứng dụng vào thiết kế của bạn
Nếu yêu thích kiểu gam màu và các chi tiết gãy gọn và đậm đà, bạn sẽ rất vui khi biết được rằng phong cách Memphis, một phong cách thiết…
Tính năng đổi cảnh bầu trời Sky Replacement cực xịn xò của Photoshop
Tính năng đổi cảnh bầu trời Sky Replacement cực xịn xò của Photoshop
Sky Replacement là tính năng mới của Photoshop vô cùng hữu ích, hỗ trợ người dùng tách mây, thay đổi nền trời chỉ với một cú nhấp chuột.