Cái chết để xử lý máy móc!

Tìm quá trình thiết kế lý tưởng của bạn bằng cách tuân thủ một vài nguyên tắc đơn giản thay vì một kịch bản cứng nhắc.

Bạn nghe thấy rất nhiều lời khuyên khác nhau về cách đúng và sai khi thiết kế một ứng dụng hoặc trang web.

Bạn nên sử dụng bản phác thảo.
Các hệ thống thiết kế hoặc GTFO.
Nhà thiết kế Real Real thiết kế 100% bằng mã.
Phần mềm khung dây là một sự lãng phí thời gian.
Nếu bạn không làm nguyên mẫu, bạn sẽ không làm đúng.
Bạn cần phải bắt đầu trên giấy.

Bạn có thể nghĩ rằng không có sự đồng ý nào về cách thiết kế phù hợp, nhưng có một điểm mà Lừa phần lớn không có tranh cãi - rằng quy trình của bạn nên theo tuyến tính.

Cách tiếp cận tuyến tính cổ điển trông giống như thế này:
nghiên cứu → phác thảo → khung dây → comps tĩnh → nguyên mẫu → mã

Nó giống như những cỗ máy sản xuất Rube Goldberg-esque mà họ sử dụng để chế tạo Doritos và Đinh-Dong. Thả một ý tưởng vào máy xử lý, và sau khi được nghiền và nặn thành hình khi nó lướt qua các bước, một sản phẩm hoàn chỉnh xuất hiện ở phía bên kia! Dự đoán được! Hiệu quả!

Loại.

Máy xử lý làm việc, nhưng chỉ khi chúng làm việc. Họ không thích nghi với điều đó, và điều đó khiến họ mong manh. Tất cả chỉ cần một chút Sabot để nghiền máy xử lý của bạn.

Hank, a.k.a.

Gần đây, tôi đã xem chương trình Tìm Dory cùng với con tôi, và một phần trong đoạn phim tạo ra các cảnh quay của Cameron cứ liên tục nhảy ra khỏi tôi.

Trong phim, có con bạch tuộc này tên Hank:

Disney / Pixar

Septopus, về mặt kỹ thuật. Mô hình nhân vật của anh ấy rất hợp lý để làm việc cùng, họ đã tháo một xúc tu để làm cho hoạt hình của anh ấy có thể thực hiện được. Tuy nhiên, với 4.000 điều khiển riêng biệt, anh đã rất khó khăn để làm việc cùng.

Tại thời điểm này trong quá trình, họ đã vượt qua các bản phác thảo và kết xuất và hoạt họa - những giai đoạn có độ trung thực thấp hơn giúp bạn khám phá một loạt các ý tưởng một cách nhanh chóng và rẻ tiền. Họ cũng đã có Real. Giàn nhân vật được xây dựng, các chi tiết kỹ thuật được thực hiện, các câu hỏi cơ bản đã được trả lời.

Họ đã tham gia vào giai đoạn hoạt hình cuối cùng - mô hình 3D trong môi trường 3D. Họ có thể đã chiến đấu với chi phí của lịch trình sản xuất và ngân sách. Thay vào đó, họ đã làm một cái gì đó thực sự thú vị - họ quay lại phác thảo.

Disney / Pixar

Bằng cách phác thảo chuyển động phức tạp của các xúc tu Hank trên giấy, họ có thể tạo ra hình ảnh động hoàn hảo, mượt mà mà họ đang tìm kiếm trong một phần nhỏ thời gian. Một khi họ hài lòng với trình tự, họ kết hợp hoạt hình trong 3D để khớp. Họ đã có được một sản phẩm tốt hơn trong thời gian ngắn hơn vì họ chọn cách coi trọng các nguyên tắc của quy trình thay vì theo toa quy trình.

Việc chữa trị cho một quá trình kê đơn

Nhóm Finding Dory đã tạo ra một sản phẩm tốt hơn nhanh hơn bằng cách đưa ra các quyết định ưu tiên tốc độ và chất lượng thay vì tuân thủ quy trình học vẹt.

Bạn có thể chọn những thứ khác để định giá, nhưng nếu bạn đang làm việc trong một môi trường thương mại, thì việc tập trung vào điểm ngọt ngào giữa tốc độ và chất lượng sẽ nằm ở đầu danh sách của bạn. Xoay quanh công việc tuyệt vời một cách nhanh chóng là một vấn đề lớn đối với các nhà thiết kế và nghệ sĩ chuyên nghiệp.

Xác định các nguyên tắc thúc đẩy quá trình của bạn chỉ là khởi đầu. Đây là cách bạn có thể đưa chúng vào thực tế.

Bắt đầu với những câu hỏi lớn

Nếu bạn coi trọng tốc độ, hãy bắt đầu một dự án bằng cách tìm ra những câu hỏi lớn nhất, cơ bản nhất là gì. Trong Bắt Real, cái này được gọi là thiết kế epicenter

Bắt đầu từ cốt lõi của trang và xây dựng ra bên ngoài
Thiết kế Epicenter tập trung vào bản chất thực sự của trang - tâm chấn - và sau đó xây dựng ra bên ngoài. Điều này có nghĩa là, khi bắt đầu, bạn bỏ qua các điểm cực đoan: điều hướng / tab, chân trang, màu sắc, thanh bên, logo, v.v. Thay vào đó, bạn bắt đầu tại tâm chấn và thiết kế phần nội dung quan trọng nhất trước tiên.
Bất cứ điều gì trang hoàn toàn có thể sống mà không có là epicen- ter. Ví dụ: nếu bạn thiết kế một trang hiển thị một bài đăng trên blog, thì chính bài đăng trên blog là tâm điểm. Không phải các danh mục trong thanh bên, không phải tiêu đề ở trên cùng, không phải là hình thức bình luận ở phía dưới, mà là đơn vị bài viết trên blog thực tế. Không có đơn vị bài viết blog, trang này không phải là một bài đăng blog.
Chỉ khi đơn vị đó hoàn thành, bạn mới bắt đầu nghĩ về yếu tố quan trọng thứ hai trên trang. Sau phần tử quan trọng thứ hai, bạn sẽ chuyển sang phần thứ ba, v.v. Đó là thiết kế tâm chấn.
Thiết kế Epicenter tránh khỏi truyền thống, hãy để xây dựng khung hình sau đó thả nội dung trong mô hình. Trong quá trình đó, hình dạng trang được xây dựng, sau đó điều hướng được bao gồm, sau đó là công cụ tiếp thị
 được chèn vào, và cuối cùng, chức năng cốt lõi, mục đích thực sự của trang, được đổ vào bất cứ chỗ trống nào. Nó có một quy trình ngược, lấy những gì nên là ưu tiên hàng đầu và lưu nó vào cuối.

Dưới đây là một ví dụ về lý do tại sao điều này là rất quan trọng. Tôi đã làm việc trên một ứng dụng phụ của dự án iOS sử dụng giao diện âm thanh độc đáo, có thể không khả thi. Nếu tôi không có giá trị tốc độ, tôi có thể đã dành vô số thời gian để thiết kế vô số chi tiết dựa trên nền tảng của ý tưởng kỳ quặc này. Thiết kế đến trước mã trong quy trình tuyến tính cổ điển, sau tất cả.

Thay vào đó, tôi bắt đầu viết mã để tìm hiểu xem ý tưởng này có khả thi hay không. Đó là không! Vì vậy, tôi đã điều chỉnh kế hoạch của mình và tiết kiệm cho mình một lượng thời gian và năng lượng khổng lồ.

Chỉ cần hỏi, WMGMTCATMQITLAOT?

Khi bạn biết câu hỏi cần câu trả lời trước, hãy tự hỏi:
Phương tiện nào cho tôi câu trả lời rõ ràng nhất cho câu hỏi của tôi trong khoảng thời gian ít nhất?

Trong trường hợp dự án phụ của tôi, câu trả lời là mã. Đối với một trang trên Basecamp.com, câu trả lời thường là văn bản hoặc bản phác thảo. Đối với bạn, nó có thể là một cái gì đó khác hoàn toàn.

Biết khi nào cần thay đổi bánh răng

Điều đó mang lại cho bạn một nơi để bắt đầu, nhưng làm thế nào để bạn biết khi nào thời gian để chuyển sang một phương tiện khác? Khi bạn chạm kháng chiến.

Hãy nghĩ về việc lái xe. Bạn đang bay trên đường cao tốc - động cơ rú lên như một chú mèo con hài lòng. Nhưng sau đó bạn bắt đầu lái xe lên một ngọn đồi. Thiết bị mà bạn cung cấp là tuyệt vời cho du lịch trên biển, nhưng không phải để leo đồi. Để theo kịp tốc độ của bạn, bạn chuyển sang một thiết bị mới.

Điều tương tự ở đây. Nhưng không giống như xe hơi, không có chỉ số rắn nào cho thấy bạn đã chạm quá nhiều lực cản trong phương tiện bạn chọn. May mắn thay, hầu hết các nhà thiết kế và nghệ sĩ có một tay cầm chắc chắn khi bạn cần chuyển sang một phương tiện cung cấp độ trung thực cao hơn. Đây là phần phù hợp với quá trình tuyến tính có độ trung thực thấp cổ điển → độ trung thực cao. Bạn biết bạn đã sẵn sàng để tiếp tục từ việc phác thảo khi việc phác thảo dừng lại mang đến cho bạn cái nhìn sâu sắc hữu ích.

Khi bạn đã đạt được điểm này, hãy tìm ra bộ câu hỏi quan trọng nhất tiếp theo và tự hỏi lại bản thân: Bạn có phương tiện nào cho tôi câu trả lời rõ ràng nhất cho câu hỏi của tôi trong thời gian ít nhất không?

Trường hợp thứ hai - chuyển trở lại với độ trung thực thấp hơn - khó khăn hơn. Cả hai vì mọi người ít thực hành về nó, và cũng bởi vì nó khó khăn. Hãy làm việc trong mã. Bạn làm việc với độ trung thực 100%, do đó, không có giới hạn đối với khả năng trung bình để trả lời các câu hỏi. Nhưng có một giới hạn cho khả năng trả lời câu hỏi nhanh.

Khi bạn cảm thấy bản thân không theo đuổi con đường vì cảm thấy quá nhiều công việc, đó là một dấu hiệu thực sự tốt mà bạn cần phải rút lui. Khi mọi thứ cảm thấy như họ chỉ cần nhấp vào nhấp chuột như họ nên, đó là thời gian để đánh giá lại. Hãy chú ý và bạn sẽ bắt đầu phát triển cảm giác về nó.

Sử dụng một phương tiện để lợi thế của bạn

Có một trường hợp thứ ba để chuyển sang - hoặc gắn bó với một phương tiện. Điều này không quan tâm đến sự kháng cự, nó chỉ quan tâm đến một sự thật cơ bản; quá trình ảnh hưởng đến kết quả. Giống như vẽ một cái gì đó bằng bút chì sẽ trông khác với vẽ bằng bút đánh dấu, thiết kế trong trình duyệt sẽ tạo ra một kết quả khác so với thiết kế trong Phác thảo.

Bạn càng hiểu phương tiện ảnh hưởng đến công việc của bạn như thế nào - loại công cụ đánh dấu nó để lại - bạn càng có thể sử dụng nó để làm lợi thế cho mình. Bạn muốn thiết kế của bạn được thể hiện? Có lẽ tốt hơn để làm việc với một công cụ trực quan như Phác thảo, Illustrator hoặc thậm chí * gasp * Photoshop. Bạn muốn một thiết kế tối thiểu, nhẹ? Bám sát thiết kế theo mã.

Một ví dụ thực tế

Bây giờ tôi đã nói về những nguy hiểm của quá trình quy định, tôi muốn chia sẻ với bạn về quy trình của tôi. Không cho bạn làm theo từng bước! Chỉ để cung cấp cho bạn một ví dụ thực tế về cách bạn có thể sử dụng các nguyên tắc để hướng dẫn quy trình của mình.

Chúng tôi đã giới thiệu một cách mới để làm việc với các khách hàng trong Basecamp và công việc của tôi là tạo một trang mới trên Basecamp.com để tiếp thị nó. Đây là cách mà nó diễn ra:

Xác định câu hỏi lớn, chọn phương tiện

Đây là một trang web mới, hoặc một bố cục hoàn toàn mới. Đầu tiên, tôi cần tìm ra mục đích của trang này, những gì nó cố gắng nói và cấu trúc tổng thể.

Phương tiện nào cho tôi câu trả lời rõ ràng nhất cho câu hỏi của tôi trong khoảng thời gian ít nhất?

Comps và phác thảo được ra. Đây là khía trong một thiết kế hiện có và một mẫu hiện có. Tôi có thể nhảy thẳng vào mã, nhưng đánh dấu là tiếng ồn vào thời điểm này. Văn bản vừa phải.

Một loạt các bản sao nửa nướng

Tăng độ trung thực

Tôi đã gắn bó với văn bản đủ dài để hoàn thành tất cả các bản sao cho trang. Khi tôi đã có một phác thảo và ý thức về cách tôi muốn nói về tính năng này, tôi đã chuyển bánh răng thành mã.

Tại sao?

Một tài liệu văn bản không thể nói với tôi bất cứ điều gì về việc một dòng sẽ rời khỏi một góa phụ, liệu một đoạn văn có cảm nhận được lâu không, hình ảnh sẽ chảy như thế nào, v.v. Tôi cần sự trung thực hơn. Một số câu hỏi mới có thể đã được trả lời bởi một comp tĩnh, nhưng điều đó sẽ không trả lời các câu hỏi về sự phù hợp sao chép trừ khi tôi lãng phí thời gian khớp chính xác với comp. Không, cám ơn.

Làm việc thông qua các chỉnh sửa sao chép trong mã

Chọn lọc giảm độ trung thực

Sau một vài vòng sửa đổi bản sao, trang đã bắt đầu hình thành. Trực quan, nó là máy móc và áp đảo. Tôi muốn nó trở nên biểu cảm hơn, vì vậy tôi đã chuyển sang Phác thảo để riff về một số ý tưởng.

Tôi có thể đã ở lại mã cho hầu hết các phần, nhưng với Phác thảo tôi có thể bắn ra một loạt các ý tưởng nhanh hơn nhiều so với tôi có thể mã hóa chúng. Nó cũng cho phép tôi so sánh trực tiếp những ý tưởng đó với nhau, và sẽ không để lại một tổ chuột CSS CSS từ tất cả các nhóm. Thắng thắng thắng.

Một bó Phác thảo nửa nướng

Chú ý làm thế nào không ai trong số họ được nướng hoàn toàn? Nó khác vì họ không quan trọng! Những aren này cho một bài thuyết trình của khách hàng hoặc cho bàn giao nhà phát triển. Họ ở đó để giúp tôi tìm ra thứ gì đó, sau đó họ rác rưởi. Đầu tư thời gian để đánh bóng chúng sẽ là một sự lãng phí công sức.

Kết thúc

Khi tôi đã có ý thức về hướng đi, đó là mã phần còn lại của con đường. Đánh bóng bản sao, đóng đinh xuống các ảnh chụp màn hình và luôn luôn đánh giá cuối cùng, câu hỏi quan trọng: Đã sẵn sàng để xuất xưởng chưa? Bạn có thể xem các Khách hàng trực tiếp trong trang Basecamp tại đây.

Đây là cách mà mọi dự án diễn ra. Thỉnh thoảng tôi sẽ phác thảo một cái gì đó trong Procreate, đôi khi tôi sẽ bắt đầu với một comp trực quan nhanh và bẩn, đôi khi tôi sẽ viết bản sao trong Phác thảo, đôi khi tôi làm việc 100% bằng mã. Tất cả phụ thuộc vào dự án trong tầm tay.

Hy vọng rằng điều đó mang lại cho bạn một cái nhìn sâu sắc về cách bạn có thể sử dụng các nguyên tắc để hướng dẫn quy trình của mình trong từng trường hợp cụ thể mà không cảm thấy như bạn liên tục phát minh lại bánh xe.

Hãy suy nghĩ về quá trình của bạn và loại công việc mà bạn làm. Xác định các nguyên tắc quan trọng đối với bạn, trước tiên hãy tập trung vào những thứ lớn lao và tiếp tục đặt câu hỏi liệu phương tiện mà bạn làm việc trong đó có phù hợp với thời điểm này không. Công việc của bạn sẽ tốt hơn cho nó.