Nhà thiết kế UX Thiết kế đồng hành tốt nhất cho Phác thảo

Một hộp công cụ đầy hiệu quả

Đến bây giờ, tôi nghĩ rằng tất cả chúng ta đều có thể đồng ý rằng Sketch là công cụ thiết kế tốt nhất trên thị trường. Ngoài việc cung cấp một trong những mô hình tương tác đơn giản nhất mà tôi từng trải nghiệm (Tôi đã chuyển từ Fireworks sang Phác thảo chỉ sau một đêm khi tôi nhận được chiếc MacBook đầu tiên của mình vào năm 2014, đó là khoảng thời gian đen tối trong những ngày Windows của tôi, nhưng nó chắc chắn là nhân vật được xây dựng).

Một phần của việc áp dụng Phác thảo cũng là do nó dễ tích hợp với các ứng dụng của bên thứ 3 khác và cách tiếp cận mở rộng đối với các plugin.

Có một biển các công cụ và plugin. Đây đã giành được một danh sách đầy đủ (bạn có thể sử dụng google.com cho điều đó). Thay vào đó, đó là những gì tôi coi là sự kết hợp tuyệt vời của các công cụ dành cho Nhà thiết kế UX (nghĩa là, các nhà thiết kế tập trung nhiều hơn vào khả năng mở rộng, quy trình, giao tiếp và ít hơn vào thử nghiệm trực quan và hoạt hình).

Phác thảo nhanh hơn và hiệu quả hơn

Đó là sự kỳ diệu của các plugin. Một số plugin được tích hợp độc đáo với các phím nóng và một số plugin khác có giao diện chính thức bên trong Sketch.

Người chạy phác thảo của Roy van Rooijen (và nhóm!)

Nó giống như Spotlight cho Phác thảo. Nó dành cho những người dùng cao cấp hơn một phần vì hầu hết các giao diện kiểu dòng lệnh dành cho những người biết họ đang làm gì, nhưng cũng vì các plugin và chức năng biểu tượng mà nó hợp lý hơn dành cho các chuyên gia. Điều đó nói rằng, ở cấp độ cơ bản nhất, nó làm cho các phong cách và biểu tượng điều hướng trở thành một địa ngục nhanh hơn rất nhiều so với các bản thả xuống phác thảo lộn xộn.

Đổi tên các lớp bằng Rodrigo Soares

Tôi sử dụng tất cả các thời gian. Đổi tên hàng loạt lớp, hoặc tìm và thay thế. Đối với các nhà thiết kế có tổ chức vô tận, nó là một ứng dụng phải sử dụng.

Thủ công bởi InVision

Tôi chủ yếu sử dụng Craft Data để lấy dữ liệu mẫu và Craft Sync để đẩy các mockup lên InVision để có thể xem chúng bằng Inspect (sẽ nói thêm về điều đó sau).

Nudg.it của Anthony Collurafici

Nếu bạn sử dụng lưới 8 px cho giao diện của bạn (mà bạn nên), thì bạn hoàn toàn cần công cụ này. Nó cho phép bạn thay đổi mức tăng nhỏ và lớn để làm mờ trong Phác thảo (mặc định lần lượt là 1px và 10px). Đã qua rồi những ngày tôi sẽ Shift-Mũi tên Phải, rồi Mũi tên Trái + Mũi tên Trái để di chuyển một đối tượng sang phải 8px. Tôi có thể nghĩ về một công cụ đơn giản hơn đã giúp tôi tiết kiệm rất nhiều lần nhấp khó chịu trong Phác thảo so với công cụ này.

Tự động bố trí bởi ứng dụng Anima

Khi Phác thảo đưa ra các hành vi mới để phân nhóm, đó là cứu cánh cho những người cần phải phản ứng nhanh. Nhược điểm lớn nhất là các hành vi của điều khiển này hơi mơ hồ. Auto-Layout sửa lỗi đó với một plugin dễ sử dụng giúp bạn tạo bố cục đáp ứng

Chia sẻ với các bên liên quan

Marvel của Marvel

Điều này đang nhanh chóng trở thành yêu thích mới của chúng tôi. Mọi người đều biết InVision vào thời điểm này vì vậy chúng tôi sẽ tập trung vào ứng dụng này. Một số điểm khác biệt chính ở đây là bạn có thể làm cho các thiết kế của mình được công khai trong một buổi giới thiệu hoặc nhìn vào các nhà thiết kế khác làm việc. Nó cũng có một ứng dụng AppleTV để hiển thị các ứng dụng tvOS. Nhiều nhà thiết kế vẫn không thiết kế được trong phương tiện này nhưng nó thay đổi nhanh chóng.

Kiểm tra dự án này ở đây.

Bàn giao phát triển nhanh hơn

Điều này đã đi một chặng đường dài trong 18 tháng qua. Bây giờ bạn có hai lựa chọn khả thi, với một là trưởng thành hơn nhiều so với cái còn lại. Bạn cũng có tùy chọn để viết mã các thiết kế của riêng mình, cho phép bạn viết các bài báo hạ thấp cho tất cả các nhà thiết kế của chúng tôi biết chúng tôi ngu ngốc như thế nào

Zeplin bởi Zeplin

Yêu nhóm và hỗ trợ ứng dụng này có. Tóm lại, nó đã giết chết thông số UI. Xuất các bản vẽ nghệ thuật từ Phác thảo mà bạn muốn cung cấp cho các nhà phát triển và nó đồng bộ hóa với một URL có thể chia sẻ. Các nhà phát triển có thể nhấp vào bất kỳ yếu tố đồ họa nào và nhận hầu hết mọi thuộc tính (đường viền, màu sắc, phông chữ, v.v.) với CSS tương ứng. Zeplin thông minh tránh xa HTML, điều này quá khó để ngoại suy từ thiết kế UI.

Kiểm tra InVision bởi InVision

Điều này có chức năng gần như giống hệt của Zeplin nhưng hoạt động như một phần mở rộng của sản phẩm tạo mẫu InVision. Nó rất hay vì nó phù hợp với bộ phần mềm nhưng tôi cảnh báo bạn rằng nó cũng chia sẻ tệp Phác thảo nguồn của bạn thông qua nút tải xuống tài sản ở phía trên bên phải, đây có thể là một công cụ giải quyết cho những người coi các tệp nguồn là riêng tư.

Làm sinh động giao diện người dùng của bạn

Quyết định quan trọng để thực hiện là mức độ phức tạp mà bạn muốn hoạt hình của mình. Tôi liệt kê hai tùy chọn ở đây cho đơn giản và nâng cao hơn. Ngoài ra, lưu ý rằng tôi đã bỏ đi phần mềm hoạt hình đầy đủ như After Effects và Flash (lol jk) không được tích hợp tốt vào quy trình thiết kế sản phẩm.

Nguyên tắc của Daniel Hooper

Nguyên tắc là một giao diện rất giống Phác thảo để thêm hình ảnh động và chuyển tiếp đơn giản vào thiết kế của bạn. Nó đòi hỏi các lớp của bạn được nhóm và được đặt tên tốt bởi vì chúng được nhập vào Nguyên tắc với các tên đó và việc điều khiển các đối tượng dễ dàng hơn rất nhiều với tên hay là HINT HINT.

FramerJS bởi Nhóm Framer

Tôi thiên đường đã chơi với nó rất nhiều vì tôi không thể làm hoạt hình nhiều, nhưng nó mạnh hơn nhiều so với Nguyên tắc. Nó khó hơn vì bạn phải viết mã thực tế. Nhưng nó rất tuyệt vì bạn phải viết mã thực tế.

Quản lý tài nguyên

IconJar

Có một số lựa chọn thay thế khác trên thị trường như Lingo by Noun Project, nhưng cái này rẻ hơn và hoạt động như một bùa mê. IconJar cho phép bạn dễ dàng quản lý các biểu tượng và như một phần thưởng, bạn có thể thả phông chữ và nó sẽ tạo ra SVG, cho mỗi glyph. Điều này có nghĩa là bạn có thể thả vào một phông chữ biểu tượng và lấy tất cả các ký tự đó là các ký hiệu riêng lẻ thay vì phải sử dụng các cheatheets đau đớn. Ngày càng có nhiều nhà thiết kế biểu tượng làm cho các biểu tượng của họ tương thích với IconJar, điều đó có nghĩa là các bộ biểu tượng khổng lồ của bạn sẽ được tổ chức mà không cần nỗ lực.

Tài nguyên của bạn

Như chúng tôi đã nói trước đây về thiết kế ứng dụng, hầu hết các nhà thiết kế UX xây dựng các ứng dụng mà không có sự sang trọng của các tài sản trực quan tùy chỉnh. Danh sách này sẽ giúp giảm bớt biển tài nguyên thành một bộ nhỏ mà bạn có thể sử dụng miễn phí.

Biểu tượng

  • Biểu tượng Tài liệu của Google - đối với các dự án MD, đây là bộ chính.
  • Biểu tượng Nova - một bộ biểu tượng mở rộng tuyệt vời với cảm giác MD.
  • Nucleo - bộ biểu tượng đa dạng và đang phát triển như một ứng dụng gốc cho phép bạn kiểm soát bán kính, màu sắc và kích thước.
  • Magicons - một bộ nhỏ hơn nhưng tuyệt vời làm cơ sở cho hầu hết các ứng dụng.

Phông chữ

Chọn phông chữ cho Thiết kế giao diện người dùng không chính xác là phẫu thuật tên lửa vì bạn chỉ cần chọn một sans-serif dễ đọc và linh hoạt, phải hoạt động trên các nút, nhãn, tiêu đề, v.v. Tôi sẽ tránh liệt kê Phông chữ TypeKit ở đây vì , thẳng thắn, có quá nhiều biến thể tinh tế của phông chữ phù hợp với hóa đơn. Các phông chữ Google miễn phí dưới đây thường sẽ hoạt động cho hầu hết các dự án của bạn.

  • Roboto - đây là một phông chữ tuyệt vời nhưng rất gắn liền với Thiết kế Vật liệu, vì vậy có thể khó sử dụng bên ngoài các dự án dựa trên MD.
  • Mở Sans - Phông chữ linh hoạt nhất của bó. Điều này đã được trong thời trang trong nhiều năm và không có dấu hiệu chậm lại. Nó có rất nhiều trọng lượng cho tất cả các nhu cầu UI của bạn.
  • Lato - Tôi don lồng sử dụng điều này cho mọi loại thiết kế bởi vì nó có một số nét mỏng mà don luôn luôn thể hiện tốt. Mặc dù nó thanh lịch và có thể tuyệt vời cho các tiêu đề với một phông chữ khác được sử dụng cho các điều khiển UI.
  • Cabin - Hầu như linh hoạt như Open Sans và gần như không phổ biến.
  • Montserrat - không linh hoạt như vậy nhưng tôi thường sử dụng nó cho khung lưới. Nó có một sự phù hợp hoàn hảo cho các khái niệm hoặc ứng dụng với cảm giác nhẹ nhàng hơn.
  • Nunito - một phông chữ mới từ Google có cảm giác giống như một phiên bản miễn phí của Proxima Nova Soft ngay từ cái nhìn đầu tiên
  • Jaldi - phong cách vừa đủ để cung cấp cho giao diện người dùng của bạn một số sự tinh tế. Nó cũng làm cho tốt ở kích thước nhỏ.

Vây. Hy vọng rằng nó rõ ràng rằng điều này là không đầy đủ. Đây chỉ là các ứng dụng đồng hành yêu thích của chúng tôi cho Phác thảo trong khi chúng tôi làm việc trên UX Power Tools. Nếu bạn muốn chúng tôi bổ sung thêm, chúng tôi sẽ thử plugin hoặc ứng dụng của bạn với giá 65 nghìn đô la, hoặc chi phí Tesla mới là bao nhiêu

Khi tôi không ở mức trung bình, tôi đã làm việc với các công cụ phác thảo tại UX Power Tools để giúp bạn trở thành một nhà thiết kế giỏi hơn, hiệu quả hơn. Theo dõi chúng tôi trên Twitter @uxpowertools. Theo tôi cũng vậy nếu tinh thần di chuyển bạn!