Chỉ dẫn trong thiết kế Pixel Perfect - Phần I

Trong suốt quá trình làm việc của mình, tôi đã có cơ hội cộng tác với nhiều UI/UX designer. Tôi nhận thấy rằng, có một điểm rất thú vị về cách làm việc của họ: Họ không sử dụng các chỉ dẫn đã được thiết lập sẵn để hoàn thành các project.

Nếu bạn là một Developer (nhà phát triển) mới trong một công ty, các thành viên trong team có thể gởi cho bạn các liên kết tới một GitFlow hoặc GitHubFlowhad, và bạn sẽ học được mọi thứ bạn cần phải biết về việc quản lí tầng dữ liệu trong 10 phút.

Khi là Developer, chúng ta có thể thêm vào một trong dự án các phần mềm linter (nhóm phần mềm có nhiệm vụ đọc code) và mọi người sẽ dựa trên những chỉ dẫn theo code style đó. Nhưng bạn có thể đưa đến cho các designer cái gì để đảm bảo rằng họ sẽ đưa lại mọi thứ mà bạn muốn? Chúng tôi - ở Pixel Point - viết ra những chỉ dẫn này chính vì mục đích đó.

Phần mềm

Photoshop có rất nhiều tính năng hữu ích có thể giúp đẩy nhanh tiến độ công việc, nhưng chúng tôi vẫn đề xuất 2 phần mềm là Sketch hoặc Adobe Xd. Các công cụ này hợp nhất những ưu điểm trong việc sử dụng vector đồ họa, với tính năng điều chỉnh các thuộc tính của ảnh đồ họa raster một cách dễ dàng. Chúng đặc biệt hữu ích cho việc thiết kế các phần mềm điện thoại trên thiết bị có mật độ pixel lớn. Trong những trường hợp này, bạn sẽ không cần phải lo lắng về color profile, và kích cỡ tệp tin trong project của bạn sẽ được thu nhỏ, và bạn sẽ ứng dụng được nhiều chức năng giúp cho công việc của bạn trở nên hiệu quả.

Giao diện hướng dẫn về kích cỡ tập tin của iOS Human cho Photoshop và Sketch (http://apple.co/28YytHY)

Đặt tên cho các tệp tin

Sử dụng một kí hiệu gạch ngang cho các tệp tin của bạn

Google gợi ý điều này cho tất cả các file, bao gồm cả HTML, PDF, và .jpg. Đây là một video hướng dẫn từ Quản trị Web của Google: youtu.be/AQcSFsQyct8. Dù bạn hoàn toàn có thể đặt lại tên ngay cả khi kết thúc quá trình xử lí, nhưng cách tốt nhất, hãy áp dụng những quy tắc sau trong quá trình đặt tên cho các tệp tin của bạn.

  • Chỉ sử dụng các chữ cái Latin.
  • Không sử dụng các khoảng phân cách.
  • Chỉ sử dụng phông chữ thường (không viết hoa).
  • Sử dụng postfix (chương trình mã nguồn mở để gửi thư điện tử) @2x hoặc @3x để chuẩn bị các hình ảnh cho thiết bị với những độ phân giải khác nhau
  • Sử dụng những quy luật giống nhau cho tên các ổ lưu trữ dữ liệu của bạn.

Tối ưu hoá hình ảnh

Một số người có thể cho rằng, đây là công việc của một Developer. Theo quan điểm của tôi, dẫu thế nào, nếu bạn muốn nhìn nhận việc thiết kế chính xác như là bạn đã xây dựng nên nó vậy, hãy chắc rằng Developer sẽ không làm ra những quyết định liên quan đến các khía cạnh trực quan, chẳng hạn như chất lượng hình ảnh và mức độ nén.

Cố gắng sử dụng SVG

Khi bạn sử dụng SVG cho các biểu tượng hoặc hình ảnh minh họa của bạn, không cần phải lo lắng về các thiết bị với những độ phân giải khác nhau, hoặc việc chuẩn bị các phiên bản như @2x và @3x. Một thuận lợi khác mà công cụ đồ họa SVG có được, đó là sử dụng ít dung lượng, và có thể nén lại một cách hiệu quả bởi gzip trong máy chủ.

Hãy kiểm tra lại lần thứ 2 trước khi gởi một tập tin lớn hơn 1MB cho một Developer

Sẽ có 2 kịch bản có thể xảy đến với bạn: Trước hết, Developer sẽ không để tâm đến kích cỡ hình ảnh, và điều này có thể dẫn đến việc tiêu tốn nhiều thời gian để tải trang. Thứ hai, Developer có thể sẽ nén hình ảnh của bạn quá mức, dẫn đến sự giảm thiểu chất thiểu chất lượng, hoặc thay đổi Color profile của bạn. Đừng lười biếng để rồi gởi “tắt” thành quả của bạn cho một Developer; bạn phải chịu trách nhiệm về chât lượng hình ảnh của dự án. Hãy xem qua hướng dẫn về tối ưu hóa hình ảnh từ Google, và ghi nhớ những điều sau đây:

  • Sử dụng định dạng .jpg cho hình ảnh không cần đến hiệu ứng trong suốt (transparency), và bạn có thể đánh đổi chất lượng để đổi lấy kích thước như ý muốn.
  • Để có được chất lượng và hiệu ứng trong suốt tốt nhất, hãy sử dụng định dạng .png
  • Đối với hoạt hình (animations), sử dụng format video hoặc GIF. Hãy ghi nhớ rằng, GIF là một định dạng rất cũ, vì thế tệp tin video của bạn có thể đạt chất lượng cao nhưng kích thước vẫn thấp.

Công cụ tối ưu hóa

Sử dụng các Công cụ tối ưu hóa như Kraken, ImageOptim hoặc Optimage. Những công cụ như Photoshop và Sketch lưu trữ siêu dữ liệu hình ảnh ở dạng mặc định, và không sử dụng các thuật toán tối ưu để làm cho bức ảnh của bạn trông giống như vậy, nhưng chiếm ít dung lượng hơn.

Hiệu quả của Kraken.io sẽ như thế nào?

Kraken có một vài lựa chọn khác nhau trong chế độ Expert Mode, để tối ưu hóa hình ảnh của bạn.

Các lựa chọn của Kraken 

Thiết lập mức độ nén phù hợp cho các hình ảnh không có static

Hãy thử những mức độ nén khác nhau trong phần mềm Photoshop, hoặc yêu cầu Developer của bạn đưa ra tiến trình xử lí hình ảnh, để xác định tỉ lệ giữa chất lượng và kích thước mà bạn có thể chấp nhận. Từ đó, bạn sẽ có được một bảng tham khảo về kích thước hình ảnh cho project của bạn.

Đừng dùng công cụ đồ họa máy tính (sprites)

Một sprite có thể nằm dưới định dạng .jpg, SVG, hoặc .png. và bao gồm tất cả những đồ họa cần thiết cho công việc của bạn, giúp ngăn ngừa các yêu cầu bổ sung từ máy chủ nhằm khôi phục các tệp tin. Đây là một “mánh” tối ưu hóa rất hữu ích, nhưng đừng cố gắng dùng sprites theo cách của bạn. Một Developer sẽ tạo ra nó một cách tự động, anh ấy/cô ấy không chỉ cần đến sprites, mà còn cần đến cả  vị trí và kích thước của từng nhân tố trong công cụ đồ họa máy tính này. Bạn sẽ “làm khó” một Developer nếu bạn yêu cầu anh ấy/cô ấy đo lường từng nhân tố một cách thủ công. Một thế hệ đồ họa máy tính tự động sẽ giúp giữ các biểu tượng ở trạng thái thực của chúng, và ngăn ngừa bạn khỏi việc tạo ra các phiên bản @2x hoặc @3x. Ngay cả khi bạn không sử dụng công cụ đồ họa SVG, thì nó cũng sẽ giúp bạn thoát khỏi những phiền phức, từ việc thêm vào các hình ảnh mới vào một công cụ đồ họa đã có sẵn.


Định dạng SVG

Chuyển đổi SVG văn bản sang dạng chữ nghiêng; hoặc là, bạn sẽ giữ nguyên văn bản ở dạng font mặc định (tạo ra các lựa chọn phát thảo trong Adobe Illustrator).

Hãy chắc chắn rằng bạn không có một base64 image chèn vào trong SVG của bạn. Nó có thể xuất hiện khi bạn cố gắng xuất một hình ảnh ở định dạng SVG.

Ví dụ về base64 image chèn trong SVG

Tối ưu hóa định dạng SVG bằng việc xóa đi những thông thông tin không cần thiết với SVGOMG. Thông thường, file SVG của bạn sẽ bao gồm một vài thông tin mô tả (như tiêu đề và miêu tả cụ thể) mặc định. Nó sẽ có mã code tối ưu, thay vì phải giảm thiểu nội tuyến, các nhóm không sử dụng, hoặc tệp chứa rỗng.. Bạn có thể xóa tất cả chúng mà không làm mất chất lượng nếu bạn sử dụng SVGOMG.

Kiểm tra SVG trong trình duyệt trước khi thêm nó vào tệp tin của bạn. Điều này nhằm giúp bạn chắc chắn bạn đã xuất file đúng, và SVG đã kết xuất đồ họa đúng như kế hoạch của bạn. Bạn có thể gặp một số lỗi, như không thiết lập được chiều cao hoặc chiều rộng, hoặc vấn đề kết xuất đồ họa gặp trục trặc trước khi developer tiến hành. Chỉ sử dụng duy nhất giá trị là số nguyên cho chiều rộng, chiều cao và vị trí của các nhân tố khác.

Từ phải qua trái: Xuất SVG với chiều cao và chiều rộng đã được điều chỉnh, Xuất SVG với 100% chiều cao và chiều rộng

Favicon (icon bên cạnh địa chỉ trang web (URL) trên thanh địa chỉ (Address))

  • Chuẩn bị hai file với các kích thước khác nhau.
  • Đặt tên file đầu tiên là favicon.png, và định dạng kích thước cỡ 32×32. Tất cả các trình duyệt hiện đại đều hỗ trợ định dạng .png cho Favicons, và bạn không cần phải chuyển đổi chúng sang định dạng ico.
  • Đặt tên cho file còn lại -180×180.png, và định dạng kích thước cỡ 180×180 cho biểu tượng điện thoại.

Nhiều bài viết trên mạng cho rằng bạn cần chuẩn bị nhiều Favicon với nhiều kích thước khác nhau, cỡ 16×16, 24×24, hoặc 48×48. Bạn không cần lo lắng về nó, bởi vì kích thước 32×32  và 180×180 sẽ được ứng dụng tốt trong nhiều trường hợp. Các trình duyệt sẽ điều chỉnh lại kích thước các icon mà bạn đang có nếu điều đó là cần thiết. Tương tự, đừng quên sử dụng các công cụ tối ưu hóa hình ảnh cho các Favicon

Liên hệ với Pixel Point nếu bạn có bất kì câu hỏi hoặc phản hồi nào nhé!

Nguồn: Medium