Thực đơn
trang chủKỹ thuật

Atomic Design sử dụng Sketch là tương lai của thiết kế sản phẩm. Mặt tối của thiết kế. Nhà phân tích UX và các ngành nghề khác có tiền tố UX

Tôi cung cấp cho độc giả Habrakhabr bản dịch bài viết “Thiết kế web nguyên tử” của Brad Frost.

Chúng tôi không thiết kế các trang, chúng tôi thiết kế các hệ thống thành phần. - Stephen Hay

Khi nghề thiết kế web tiếp tục phát triển, chúng ta ngày càng cảm thấy cần thiết kế có hệ thống, chu đáo, thay vì tạo ra các bộ sưu tập trang web đơn giản.

Người ta đã nói nhiều về việc tạo ra các hệ thống thiết kế và điểm nhấn lớn nhất chủ yếu là thiết lập màu sắc, kiểu chữ, lưới, họa tiết, v.v. Kiểu suy nghĩ này chắc chắn là quan trọng, nhưng tôi ít quan tâm hơn đến những khía cạnh này của thiết kế bởi vì nhìn chung, chúng luôn mang tính chủ quan. TRONG Gần đây Tôi càng bối rối hơn với câu hỏi giao diện của chúng ta được làm bằng gì và làm cách nào chúng ta có thể thiết kế chúng một cách có hệ thống hơn.

Để tìm kiếm nguồn cảm hứng, tôi quay lại với hóa học. Tất cả các chất (có thể là chất rắn, chất lỏng, chất khí, đơn giản, phức tạp, v.v.) đều bao gồm nguyên tử. Các nguyên tử liên kết với nhau và tạo thành phân tử, lần lượt, kết hợp và hình thành sinh vật. Cuối cùng, đây là cách tất cả vật chất trong vũ trụ của chúng ta được tạo ra.

Tương tự, giao diện được tạo thành từ các thành phần nhỏ hơn. Điều này có nghĩa là chúng ta có thể chia giao diện thành các khối cơ bản và kết hợp chúng, tăng dần độ phức tạp. Đây là bản chất của thiết kế web nguyên tử.

Hệ thống định kỳ phần tử HTML.

Thiết kế nguyên tử là gì

Thiết kế nguyên tử nó là một phương pháp để tạo ra các hệ thống thiết kế. Có năm cấp độ riêng biệt đối với thiết kế nguyên tử:
  1. nguyên tử
  2. Phân tử
  3. Sinh vật
  4. Mẫu
  5. Trang

nguyên tử

Nguyên tử trong tự nhiên là đơn vị cơ bản của vật chất. Trong ngữ cảnh giao diện web, nguyên tử là các thẻ HTML như biểu mẫu, trường nhập hoặc nút.

Các nguyên tử có thể bao gồm nhiều yếu tố trừu tượng hơn như bảng màu, phông chữ hoặc thậm chí nhiều khía cạnh ẩn hơn của giao diện như hoạt ảnh.

Giống như các nguyên tử trong tự nhiên, chúng khá trừu tượng và thường vô dụng. Tuy nhiên, lợi ích của thiết kế của họ nằm ở nhiệm vụ đơn phong cách chung giao diện.

Phân tử

Mọi thứ trở nên thú vị và hữu hình hơn khi chúng ta bắt đầu kết hợp các nguyên tử. Phân tử là tập hợp các nguyên tử liên kết với nhau. Chúng có những đặc tính riêng và hoạt động như bộ xương của hệ thống thiết kế của chúng tôi.

Ví dụ: nhãn, trường nhập và nút tự chúng không hữu ích nhưng có thể thực sự hữu ích nếu được kết hợp.

Xây dựng các phân tử từ nguyên tử giúp cải thiện sức khỏe tâm thần “làm một việc nhưng hãy làm thật tốt”. Mặc dù các phân tử có thể khá phức tạp nhưng thông thường chúng là sự kết hợp đơn giản của các nguyên tử được tạo ra để tái sử dụng.

Sinh vật

Các phân tử cung cấp cho chúng ta một số khối xây dựng để làm việc. Bây giờ chúng ta có thể ghép chúng lại với nhau để tạo thành sinh vật. Các sinh vật là sự liên kết của các phân tử tạo thành các phần riêng biệt, phức tạp của giao diện.

Chúng tôi đang di chuyển ngày càng nhanh hơn để chi tiết cụ thể. Khách hàng có thể không quan tâm lắm đến các phân tử của hệ thống thiết kế, nhưng với sự ra đời của các sinh vật, người ta có thể quan sát sự bắt đầu hình thành của sản phẩm cuối cùng. Dan Moll (người mà tôi làm việc cùng trong một số dự án) sử dụng ảnh ghép của các yếu tố thể hiện ý tưởng chủ chốt và hướng dẫn giao diện mà không cần phải thiết kế toàn bộ trang web.

Các sinh vật có thể bao gồm những loài tương tự hoặc các loại khác nhau phân tử Ví dụ: tiêu đề trang có thể bao gồm thành phần khác nhau- logo, menu chính, mẫu tìm kiếm và danh sách các kênh truyền thông. Nhưng sinh vật hiển thị lưới sản phẩm có thể chứa một phân tử duy nhất (hình ảnh sản phẩm, tên và giá) được lặp lại nhiều lần.

Quá trình chuyển đổi từ phân tử sang sinh vật tạo điều kiện thuận lợi cho việc tạo ra các thành phần độc lập sẵn sàng để tái sử dụng.

Mẫu

Ở giai đoạn này, chúng tôi sẽ ngừng vẽ những sự tương đồng với hóa học để giao tiếp bằng ngôn ngữ có ý nghĩa hơn cho khách hàng của chúng tôi. Các mẫu thường bao gồm các nhóm sinh vật được liên kết với nhau để tạo thành các trang. Ở giai đoạn này, bức tranh lớn trở nên rõ ràng.

Các mẫu rất cụ thể và cung cấp bối cảnh cho tất cả các phân tử và sinh vật khá trừu tượng. Đây là mẫu cho phép bạn xem thiết kế cuối cùng. Theo kinh nghiệm của tôi với phương pháp này, các mẫu bắt đầu dưới dạng khung lưới HTML, nhưng trở nên chính xác hơn theo thời gian. Cuối cùng, chúng trở thành sản phẩm cuối cùng ở Pittsburgh có quy trình tương tự, trong đó các thiết kế bắt đầu bằng màu đen và trắng và không có đánh dấu, nhưng dần dần. đạt được các chi tiết cụ thể và chi tiết cho đến khi chúng trở thành tác phẩm cuối cùng.

Trang

Các trang là các phiên bản cụ thể của mẫu. Trong đó, để truyền tải chính xác những gì người dùng sẽ thấy, nội dung “sơ khai” được thay thế bằng nội dung thực.

Các trang được cấp độ cao nhất chi tiết cụ thể và, bởi vì chúng là hữu hình nhất. Đó là nơi mà hầu hết những người liên quan đều dành phần lớn thời gian và là nơi viết hầu hết các đánh giá.

Giai đoạn trang là cần thiết vì đó là nơi kiểm tra tính hiệu quả của toàn bộ hệ thống thiết kế. Bằng cách nhìn mọi thứ trong bối cảnh, chúng ta có thể lùi lại một bước và thay đổi các phân tử, sinh vật và kiểu mẫu của mình để phù hợp hơn với bối cảnh thiết kế thực tế.

Đây cũng là giai đoạn để thử nghiệm các thay đổi đối với mẫu. Ví dụ: bạn cần đảm bảo rằng dòng tiêu đề 40 ký tự trông nhất quán với dòng tiêu đề 340 ký tự. Hoặc kiểm tra xem, thay vì một giỏ có một mặt hàng, nó trông giống như một giỏ có 10 mặt hàng và giảm giá khi sử dụng mã khuyến mãi. Những tình huống này ảnh hưởng đến cách chúng tôi xây dựng hệ thống của mình.

Tại sao thiết kế nguyên tử

Theo nhiều cách, đây là cách chúng tôi tạo ra trang web, ngay cả khi chúng tôi không chủ ý nghĩ về nó.

Thiết kế nguyên tử cung cấp một phương pháp rõ ràng để tạo ra các hệ thống thiết kế. Khách hàng và thành viên nhóm có thể đánh giá ý tưởng cho một hệ thống thiết kế cụ thể bằng cách xem các giai đoạn phát triển của nó.

Thiết kế nguyên tử cho chúng ta khả năng chuyển từ trừu tượng sang cụ thể. Do đó, chúng tôi có thể tạo ra các hệ thống có khả năng mở rộng và có phong cách nhất quán, nhất quán trong khi vẫn hiển thị bức tranh tổng thể cuối cùng. Thay vào đó hãy xử lý phá hủy trở thành cuộc họp- chúng tôi tạo cấu trúc ngay từ đầu, thay vì cẩn thận lựa chọn các mẫu phù hợp sau này.

Phòng thí nghiệm mẫu

Để áp dụng phương pháp này vào công việc của mình, tôi (với sự giúp đỡ của

Thiết kế nguyên tử cho phép chúng ta chuyển đổi giữa các bối cảnh giống như nghệ sĩ Frank đã mô tả một cách hùng hồn. Các nguyên tử, phân tử và sinh vật tạo nên các bề mặt không treo trong chân không. Giao diện và trang thực sự được tạo thành từ các phần nhỏ. Các bộ phận nhỏ ảnh hưởng đến toàn bộ cấu trúc và tổng thể ảnh hưởng đến các bộ phận nhỏ hơn. Hai bối cảnh này gắn bó với nhau và thiết kế nguyên tử thừa nhận thực tế này.

Khi thiết kế một thành phần, chúng ta giống như một nghệ sĩ vẽ những nét cọ trên canvas. Khi chúng tôi xem những thành phần này dưới dạng mô hình có nội dung thực tế, chúng tôi giống như một nghệ sĩ bước ra khỏi khung vẽ và đánh giá xem mỗi nét ảnh hưởng đến toàn bộ bố cục như thế nào.

Bạn cần tập trung vào một thành phần cụ thể để làm cho nó hoạt động tốt, thoải mái và đẹp mắt. Nhưng cũng cần đảm bảo thành phần này hoạt động tốt, tiện lợi và đẹp mắt. trong bối cảnh trận chung kết giao diện người dùng .

Thiết kế nguyên tử cung cấp cho chúng ta một mạch để chuyển đổi giữa các bộ phận và tổng thể, nhưng điều quan trọng cần nhắc lại là thiết kế nguyên tử không phải là một quá trình tuyến tính. Sẽ thật ngu ngốc khi thiết kế các nút và các yếu tố khác một cách cô lập rồi bắt chéo ngón tay của bạn và hy vọng rằng mọi thứ sẽ kết hợp với nhau để tạo thành một tổng thể gắn kết. Vì lý do này mà năm bước của thiết kế nguyên tử không nên nghe như thế này trong đầu bạn: “Bước 1: nguyên tử; Bước 2: phân tử; Bước 3: sinh vật; Bước 4: mẫu; Bước 5: Trang".

Thay vào đó, hãy coi các bước thiết kế nguyên tử như một mô hình tinh thần cho phép bạn tạo đồng thời giao diện kết quả và hệ thống thiết kế làm nền tảng cho nó.

# Rõ ràng ranh giới giữa cấu trúc và nội dung

Thảo luận về thiết kế và nội dung cũng giống như tranh luận về con gà và quả trứng. Mark Boulton giải thích:

Nội dung phải có cấu trúc và cấu trúc giống như thiết kế sẽ ảnh hưởng đến nội dung. Sẽ không đúng khi nói “nội dung đầu tiên, sau đó là thiết kế” và “nội dung hoặc thiết kế”. Do đó, chúng tương đương nhau: “Cả nội dung và thiết kế”. ~Mark Boulton

Một hệ thống thiết kế được cân nhắc kỹ lưỡng sẽ tương ứng với nội dung của nó và nội dung chất lượng tương ứng với cách trình bày của nó trong giao diện. Các mẫu giao diện mà chúng tôi phê duyệt phải phản ánh chính xác bản chất của văn bản, hình ảnh và nội dung khác trong đó. Tương tự như vậy, khi tạo nội dung, bạn cần xem xét nội dung đó sẽ được trình bày như thế nào. Mối quan hệ chặt chẽ giữa nội dung và thiết kế đòi hỏi phải tính đến cả hai thành phần khi thiết kế giao diện người dùng.

Thiết kế nguyên tử cung cấp cho chúng ta một ngôn ngữ để thảo luận về cấu trúc của các mẫu giao diện người dùng và nội dung sẽ chứa trong đó. Bất chấp sự phân biệt rõ ràng giữa cấu trúc của nội dung (mẫu, mẫu) và bản thân nội dung (trang), thiết kế nguyên tử vẫn tính đến ảnh hưởng của chúng đối với nhau. Ví dụ: chúng ta hãy nhìn vào sơ đồ này:

Ở bên trái chúng ta thấy cấu trúc nội dung. Nó bao gồm cùng một phân tử hồ sơ người dùng lặp lại. Ở bên phải, chúng ta thấy điều gì xảy ra khi chúng ta điền vào từng phân tử của hồ sơ nội dung liên quan. Kỹ thuật trực quan hóa cấu trúc nội dung và trình bày nó với nội dung thu được cho phép bạn tạo các mẫu khớp chính xác với nội dung của riêng bạn. Nếu tên người dùng chiếm năm dòng, chúng tôi sẽ phải sửa nó không phải ở cấp độ phân tử mà ở cấp độ nguyên tử.

# Những gì trong một cái tên?

Tôi đã nói xuyên suốt các trang của cuốn sách này rằng ý tưởng về tính mô-đun trong thiết kế và phát triển không có gì mới. Vậy thì tại sao chúng ta lại đưa ra các thuật ngữ mới như nguyên tử, phân tử và sinh vật khi chúng ta có thể bám sát những thuật ngữ đã được thiết lập sẵn: mô-đun, thành phần, phần tử, phần và vùng?

Trong suốt thời gian tôi nói về thiết kế nguyên tử, luôn có người đề xuất Tên khác cho các giai đoạn thiết kế. Một người gợi ý: “Tại sao không chỉ gọi chúng là phần tử, mô-đun và thành phần?”, người khác: “Tại sao không chỉ gọi chúng là cơ sở, thành phần và mô-đun?” Vấn đề với các thuật ngữ như "thành phần" và "mô-đun" là chỉ riêng tên không cho bạn biết thứ bậc. Các nguyên tử, phân tử và sinh vật ngụ ý một hệ thống phân cấp, vì vậy bất kỳ ai có kiến ​​thức cơ bản về hóa học đều có thể đoán được chúng ta đang nói về điều gì.

Thật khó để gọi tên. Những cái tôi chọn cho các bước thiết kế nguyên tử đã hoạt động rất hiệu quả đối với tôi và các nhóm mà tôi đã làm việc cùng để thiết kế giao diện người dùng. Nhưng chúng có thể không có tác dụng với bạn và công ty của bạn. Điều này ổn. Đây là xác nhận từ nhóm phát triển tại GE:

Khi trình bày các khái niệm hệ thống thiết kế với đồng nghiệp, ban đầu chúng tôi sử dụng thuật ngữ thiết kế nguyên tử. Tuy nhiên, điều này gây ra những cái nhìn khó hiểu. […] Rõ ràng là để thành công trong công ty của mình, chúng tôi phải chọn một cách phân loại phù hợp hơn. ~

Hệ thống phân loại mà cuối cùng các anh chàng đã nghĩ ra bao gồm các thuật ngữ: “Nguyên tắc”, “Cơ bản”, “Thành phần”, “Mẫu”, “Đặc điểm” và “Ứng dụng”. Những cái tên này có ý nghĩa hơn với bạn không? Nó không quan trọng. Họ đã thiết lập một hệ thống phân loại có ý nghĩa đối với công ty của mình, nhưng bất kỳ ai biết các nguyên tắc thiết kế nguyên tử đều có thể làm việc hiệu quả với chúng.

Thuật ngữ "thiết kế nguyên tử" thể hiện các ý tưởng về thiết kế và phát triển mô-đun, khiến nó trở thành một từ thông dụng hữu ích và mạnh mẽ để thuyết phục các bên liên quan và giao tiếp với đồng nghiệp. Nhưng Thiết kế nguyên tử không phải là một giáo điều cứng nhắc. Cuối cùng, bất kỳ cách phân loại nào bạn chọn sẽ giúp bạn và nhân viên của công ty bạn giao tiếp hiệu quả hơn để tạo ra hệ thống tuyệt vời Thiết kế giao diện người dùng.

Thiết kế nguyên tử cho giao diện người dùng

Khái niệm thiết kế nguyên tử ra đời trên Internet. Suy cho cùng, tác giả khiêm tốn của cuốn sách này là một nhà thiết kế web, đó là lý do tại sao nó tập trung vào giao diện web. Nhưng điều quan trọng là phải hiểu rằng thiết kế nguyên tử thường được áp dụng cho bất kỳ giao diện nào.

Bạn có thể sử dụng phương pháp thiết kế nguyên tử khi phát triển giao diện của bất kỳ phần mềm: Phần mềm soạn thảo văn bản, Keynote, Photoshop, giao diện ATM của ngân hàng của bạn, — bất cứ thứ gì. Để chứng minh điều này, hãy áp dụng thiết kế nguyên tử cho ứng dụng gốc Instagram.

Thiết kế Ứng dụng Instagram, bị phân hủy thành nguyên tử.

Hãy chia giao diện Instagram thành các nguyên tử:

  • Nguyên tử. Màn hình giao diện người dùng Instagram này bao gồm một số biểu tượng, một số khối văn bản và hai loại hình ảnh: hình ảnh anh hùng và hình đại diện người dùng.
  • Phân tử. Một số biểu tượng tạo thành các thành phần tiện dụng đơn giản: bảng điều khiển phía dưới thanh điều hướng và tác vụ ảnh nơi người dùng có thể thích hoặc nhận xét. Ngoài ra, sự kết hợp đơn giản văn bản và/hoặc hình ảnh tạo thành các thành phần tương đối đơn giản.
  • Sinh vật.Ở đây chúng ta thấy cơ thể của nhiếp ảnh được hình thành như thế nào. Nó bao gồm thông tin về người dùng, thời gian xuất bản, bản thân bức ảnh, các hành động với bức ảnh này và thông tin về nó, bao gồm số lượt thích và chú thích. Sinh vật này là nền tảng của Instagram, vì nó được lặp lại nhiều lần trong vô số bức ảnh do người dùng chụp.
  • Mẫu. Chúng tôi thấy cách các thành phần hoạt động cùng nhau trong bối cảnh bố cục. Ngoài ra, ở đây chúng ta được tiếp xúc với cấu trúc nội dung của Instagram, đặc biệt nổi bật nội dung động: biệt hiệu người dùng, hình đại diện, ảnh, lượt thích và chữ ký.
  • Trang. Và cuối cùng, chúng ta thấy sản phẩm cuối cùng chứa đầy nội dung. Điều này giúp đảm bảo rằng hệ thống thiết kế cốt lõi kết hợp với nhau để tạo thành một giao diện đẹp mắt và đầy đủ chức năng.

Tôi cố tình chọn không phải một trang web làm ví dụ vì có xu hướng coi sai thiết kế nguyên tử như một cách tiếp cận khi làm việc với các công nghệ web: CSS, JavaScript, v.v. Hãy để tôi nói rõ: Thiết kế nguyên tử không liên quan gì đến các chủ đề web hẹp như CSS hoặc JavaScript. Trong chương đầu tiên, chúng ta đã nói về xu hướng mô-đun hóa trong mọi khía cạnh của thiết kế và phát triển. Đó là một xu hướng tuyệt vời, bao gồm cả CSS và JavaScript, nhưng thiết kế nguyên tử hoàn toàn là về việc tạo ra các hệ thống thiết kế giao diện người dùng, bất kể sử dụng công nghệ nào.

Thiết kế nguyên tử trong lý thuyết và thực hành

Trong chương này, chúng ta đã nói về phương pháp thiết kế nguyên tử và xem cách các nguyên tử, phân tử, sinh vật, mẫu và trang kết hợp với nhau để tạo ra các hệ thống thiết kế giao diện chu đáo, chất lượng cao.

Thiết kế nguyên tử cho phép chúng ta phân tách các giao diện thành các nguyên tử và đồng thời quan sát cách các phần tử này kết hợp với nhau để tạo thành các giao diện thu được.

Chúng tôi đã tìm hiểu về mối quan hệ chặt chẽ giữa nội dung và thiết kế cũng như cách thiết kế nguyên tử cho phép chúng tôi tạo ra cấu trúc phù hợp với nội dung.

Cuối cùng, chúng tôi đã học được cách ngôn ngữ thiết kế nguyên tử cho phép chúng tôi thảo luận về tính mô-đun với các đồng nghiệp và cung cấp sự hiểu biết rất cần thiết về hệ thống phân cấp trong hệ thống thiết kế của chúng tôi.

Thiết kế nguyên tử là một phương pháp thiết kế và phát triển hữu ích, nhưng nó chỉ là một mô hình tinh thần để tạo giao diện người dùng. Bạn có thể muốn học cách thiết kế nguyên tử trong thực tế. Đừng lo lắng, quý độc giả thân mến — phần còn lại của cuốn sách được dành riêng cho các công cụ và quy trình để biến thiết kế nguyên tử thành hiện thực.

TL; DR: Thiết kế nguyên tử sử dụng Sketch là tương lai của các sản phẩm thiết kế.

Đi với tôi

Brad Frost, người đàn ông tuyệt vời mà bạn thấy trong video ở đầu bài viết này, đến một mức độ lớn chịu trách nhiệm về hệ thống được thảo luận ở đây. Thiết kế nguyên tử được phát triển để đáp ứng nhu cầu đáp ứng, thế giới kỹ thuật số, nơi chúng ta đang sống.

Chúng tôi vẫn đang nghiên cứu phong cách lãnh đạo, các nguyên tắc cơ bản, ảnh ghép và nhiều công cụ khác để làm cho các dự án của chúng tôi dễ hiểu hơn đối với các thế hệ tương lai. Tương tự như vậy, các nhà phát triển sử dụng các công cụ như Bootstrap, Foundation, Bourbon và các công cụ khác để giúp cuộc sống của họ dễ dàng hơn khi viết mã. Khi chúng ta thỏa hiệp và làm việc cùng nhau, cuộc sống sẽ trở nên dễ dàng hơn nhiều cho cả hai bên. Đây chính là nội dung của Thiết kế nguyên tử.

Thiết kế nguyên tử không chỉ là thiết kế một mô hình hoặc một trang, Chúng ta đang nói về về việc thiết kế một hệ thống khổng lồ, hay chính xác hơn là thiết kế phần cốt lõi của hệ thống này.

1-j1P0pjQtl36QJavv8lHdyw

Thiết kế nguyên tử bao gồm những gì?

Thiết kế nguyên tử liên quan đến việc tạo ra các bộ phận của hệ thống có thể được kết hợp để phát triển các phần tử và mô hình mà sau đó có thể được sử dụng nhiều lần.

nguyên tử

Một nguyên tử là cơ sở tuyệt đối hệ thống của chúng tôi. Nguyên tử bao gồm bảng màu, phông chữ, các thành phần riêng lẻ (chẳng hạn như tiêu đề, đoạn văn, nút, v.v.) và bất kỳ thứ gì khác kết hợp với các nguyên tử khác để tạo ra phân tử.

2 1-SmVWgKY2jdCYOV4dXJNlkg

Phân tử

Phân tử là những khối xây dựng mà chúng ta xây dựng bằng cách sử dụng các nguyên tử. Mặc dù chúng được tạo thành từ các nguyên tử nhưng các phân tử lại chính là những mảnh Lego mà chúng ta sẽ sử dụng để xây dựng và thiết kế trong tương lai. Mặc dù lúc đầu một số yếu tố có vẻ phức tạp nhưng ở đây sự đơn giản chính là chìa khóa.

Phân tử bao gồm các thành phần như trường biểu mẫu có nhãn hoặc bảng có tiêu đề và cột dữ liệu.

3 1-kA-WoT5O0uCgeowzhuSwiQ

Vi sinh vật

Vi sinh vật là nơi chúng ta bắt đầu thấy giao diện tạo thành một bức tranh thống nhất như thế nào. Bằng cách kết hợp các phân tử, chúng tôi có thể tạo ra các thành phần phức tạp hơn nhưng có thể lặp lại cho sản phẩm của mình.

Một ví dụ về vi sinh vật sẽ là tiêu đề điều hướng bao gồm logo, liên kết điều hướng và các trường tìm kiếm hoặc nút đăng ký.

4 1-aL51hsdFw7ugSXXB5HnWZQ

Mẫu

Các mẫu về cơ bản là các chương trình giống nhau. Bằng cách kết hợp một số vi sinh vật, chúng ta thực sự bắt đầu thấy được bức tranh toàn cảnh hơn về những gì chúng ta đang xây dựng.

Nếu như độ chính xác cao không cần kết quả, đây là lúc chúng ta có thể dễ dàng bắt đầu phát triển một hệ thống được mã hóa.

5 1-mx-cBDwsz3MkXa-oX_-56g

Trang

Các trang này là phiên bản có độ chính xác cao của các mẫu của chúng tôi. Thiết kế ở trên sẽ được coi là một trang. Đây là nơi mà ngay cả những người không biết gì về thiết kế cũng có thể hiểu được những gì chúng tôi đang xây dựng.

Các trang không phải lúc nào cũng cần thiết, nhưng ai lại không thích một bản trình bày trực quan đẹp mắt?

Tại sao phác thảo?

Mặc dù thực tế là Sketch có thể chưa phải là người dẫn đầu tình huống này, nhưng Adobe Illustrator hay Photoshop, nó vẫn là một công cụ độc đáo khi làm việc bằng phương pháp Atomic Design.

Tổ chức

Sketch là sản phẩm trí tuệ của Adobe Illustrator và Photoshop. Chúng tôi không phủ nhận rằng Sketch vẫn còn non trẻ nhưng nó vẫn rất mạnh mẽ và trên hết, nó cũng cực kỳ dễ sử dụng. Bạn không chỉ có thể làm hầu hết mọi thứ bạn cần làm mà không cần phải tìm và lấy ra các công cụ ẩn trong menu nhiều lớp, bạn còn có một mô hình có tổ chức cao được chia thành các lớp.

7 1-gyxduSTXDd1K-7eEuW1xHA

Tính mô đun

Phác thảo là công cụ cần thiết dành cho thiết kế nguyên tử vì nó giúp dễ dàng tạo một phần tử theo mô-đun. Bạn không chỉ có một tổ chức cấp cao, tương tự Adobe Photoshop, bạn cũng có thể tạo các phần tử mô-đun. Trong Sketch, những phần tử này được gọi là biểu tượng.

Việc tạo biểu tượng cho phép bạn thay đổi tất cả kiểu trên một thành phần và xem những thay đổi đó xảy ra với tất cả các thành phần tương tự trong toàn bộ tệp.

Đầu tiên, tạo phần tử theo cách bạn muốn.

9 1-QU5UMRKF7jnifIcA0K6RlA

Mẹo: Để biến các thành phần có văn bản thành ký hiệu mô-đun trong Sketch, hãy đảm bảo bạn cũng chọn hộp Loại trừ giá trị văn bản từ biểu tượng trên thanh công cụ bên phải.

Để làm được điều này, trước hết bạn phải chọn văn bản bên trong biểu tượng. Nếu không làm điều này, bạn sẽ không thấy tùy chọn trên thanh công cụ bên phải.

10 -5iQXZSddoS-OxEm0YfU1Sw

Bây giờ bạn có thể để biểu tượng ở bất cứ đâu và thay đổi văn bản bên trong mà không thay đổi văn bản trong bất kỳ biểu tượng tương tự nào khác được sử dụng trong thiết kế của bạn.

11-X9DNHPtyXiBxYEes10u_Iw

Nếu văn bản bên trong không phải là thứ bạn định thay đổi, hãy quên bước này. Nhưng hãy nhớ rằng nó ở đó và cực kỳ tiện lợi.

Mỗi khi bạn muốn đặt một trong những phần tử bạn đã tạo, tất cả những gì bạn phải làm là nhấp vào menu thả xuống Chèn, tìm tùy chọn Biểu tượng và chọn biểu tượng bạn muốn sử dụng từ menu thả xuống.

Chuyển đổi thành mã

Bây giờ chúng ta đã tạo xong dự án của mình, đã đến lúc xuất các phần tử sang mã.

Xuất sang mã

Điều gì tốt hơn các biểu tượng mô-đun? Xuất dự án của bạn trực tiếp thành mã. Điều này có nghĩa là các nhà thiết kế của bạn không cần phải học cách viết mã và các nhà phát triển của bạn không cần phải biết cách phá vỡ nội dung thiết kế. Mặc dù vậy, bạn nên biết điều này.

Để lấy mã cho các phần tử, trước tiên bạn cần đảm bảo rằng chúng được kết hợp đúng cách hoặc chuyển thành ký hiệu. Sau đó, mọi thứ thật đơn giản, chỉ cần nhấp vào click chuột phải di chuột vào phần tử và chọn Sao chép Thuộc tính CSS từ danh sách thả xuống

12-0JSPPy6qdMM6UUUfzH1Zmw

Tất cả những gì bạn cần làm là sao chép và dán mã từ đó vào trình soạn thảo văn bản yêu thích của bạn.

13-qrSfNi7EmBroFNQoM1zcuw

Hãy chắc chắn rằng bạn đã bao gồm mọi thứ tệp đính kèm cần thiết cũng bởi vì chúng không đến từ Sketch. Nếu không, hãy đảm bảo bạn sử dụng gói tính năng để giải quyết chúng.

Giống như Bootstrap hoặc mẫu Foundation, giờ đây các thành phần của chúng ta đã được tạo kiểu và tất cả những gì chúng ta phải làm là thêm một lớp vào thành phần trong HTML.

Đi từ đây có nghĩa là tạo ra các phần tử trang HTML, sẽ chỉ hiển thị với nhóm phát triển. Ở đây, chúng ta có thể tạo một trang gồm các phần tử của mình với lớp thích hợp để chúng ta có thể xem chúng trông như thế nào trong trình duyệt dựa trên kích thước màn hình.

Brad Frost và Dave Olson từ Pattern Lab đã tạo ra một ví dụ tuyệt vời về điều này trông như thế nào. Đánh giá nó.

Sử dụng ngôn ngữ mẫu

Điểm thưởng dành cho những bạn đã tốt nghiệp học các ngôn ngữ mẫu và CSS như swig, ngọc bích, haml và bất kỳ ngôn ngữ nào trong số nhiều ngôn ngữ khác hiện nay.

Nhiều vi sinh vật mà chúng tôi thiết kế sẽ trở thành một phần sau khi chúng được chuyển đổi thành mã.

Vậy là bạn đã làm được

Bây giờ bạn có thể giả vờ như thể bạn biết điều gì đó về khoa học. Và ở một mức độ nào đó bạn biết. Thiết kế nguyên tử là khoa học về thiết kế chất lượng cao.

Bằng cách tạo ra các phần tử và mô hình mô-đun, có thể lặp lại, chúng ta có thể tăng tốc quá trình thiết kế và phát triển theo cấp số nhân. Vấn đề không chỉ là chúng có thể được xây dựng nhanh như thế nào mà còn là những thay đổi có thể được thực hiện nhanh chóng như thế nào đối với toàn bộ hệ thống.

Hãy dành thêm một chút thời gian để suy nghĩ về cốt lõi của hệ thống và điều đó giống như quay ngược thời gian khi quá trình này diễn ra.

Chuyển đổi cao!

Hãy nói về một trong những lĩnh vực thú vị và hứa hẹn nhất - thiết kế web nguyên tử. Dựa trên các nguyên tắc cơ bản của hóa học, nó mang lại tầm nhìn và hướng đi mới cho thiết kế web hiện đại.

Thiết kế trang web đã trải qua những thay đổi lớn kể từ khi bắt đầu ngành công nghiệp web. Nếu chúng ta nhìn vào thời kỳ đầu của thời kỳ hoàng kim của Internet ở Nga thì đây là khoảng năm 2001; khoảng thời gian đó Internet bắt đầu thâm nhập vào cuộc sống của chúng ta ở khắp mọi nơi. Khi thời gian thay đổi, thiết kế cũng vậy. Điều đầu tiên tôi muốn nói ngay là có cái gọi là xu hướng phát triển web. Đây là những giải pháp thiết kế mới đã được người dùng và nhà phát triển ưa chuộng. Chúng có thể có được chỗ đứng trong thời gian dài và trở thành một loại tiêu chuẩn nào đó để phát triển trang web. Hoặc nó sẽ nhanh chóng chìm vào quên lãng.

Thiết kế trang web nguyên tử là gì

Một trong những xu hướng mới đang trở thành tiêu chuẩn thiết kế là thiết kế trang web nguyên tử.

Nó là gì và sự khác biệt của nó là gì? Biết được lý do nguồn gốc của nó sẽ giúp chúng ta trả lời câu hỏi này. Lý do chínhđơn giản. Cái này người dùng di động. Người dùng trực tuyến với thiêt bị di động, nhiều hơn và nhiều hơn nữa. Từ lâu, họ đã vượt quá 50% ở hầu hết các ngóc ngách và đang dần tiến gần đến 70% tổng lưu lượng truy cập. Khi các nhà phát triển nhận thấy vấn đề này, giải pháp chính là tạo ra phiên bản điện thoạiđịa điểm. Các nhà thiết kế và nhà phát triển thực sự phải tạo ra hai trang web: trang web chính, nơi phần lớn công sức được đầu tư, và trang thứ hai, nhỏ hơn, dành cho thiết bị di động. Sự phổ biến của các thiết bị di động có khả năng truy cập mạng đã đạt đến mức cao nhất, vì vậy lưu lượng truy cập di động không thể bỏ qua được nữa.

Các phiên bản dành cho thiết bị di động trở nên không thực tế và người ta quyết định thiết kế giao diện dựa trên sự thích ứng. Ngành công nghiệp đã lao vào phát triển và không đưa ra sự thỏa hiệp như trước đây mà là một sản phẩm chính thức. Bây giờ người dùng đã có thể tìm thấy thông tin cần thiết và thực hiện các hành động được nhắm mục tiêu, bao gồm cả mua hàng, bằng điện thoại thông minh. Trở thành một nhà phát triển có thêm nhiều công việc hơn nhưng nó đã được đền đáp.

Thiết kế nguyên tử hiện đang ở đỉnh cao của sự phát triển. TRONG trong trường hợp này Chúng tôi đang thay đổi hướng phát triển: trước đây chúng tôi chuyển từ phiên bản chính thức của trang web sang phiên bản dành cho thiết bị di động, nhưng bây giờ thì ngược lại. Họ nói rằng thiết kế này tuân theo cấu trúc của vũ trụ. Đầu tiên là Nguyên tử, sau đó là các nguyên tử tạo thành các phân tử, sau đó là các sinh vật, các mẫu và cuối cùng là trang. Mỗi cấp độ tiếp theo bao gồm những cấp độ trước đó và là sự tiếp nối phức tạp hơn.

Yếu tố thiết kế nguyên tử

Có 5 cấp độ chính trong cấu trúc thiết kế nguyên tử:

  1. nguyên tử
  2. Phân tử
  3. Sinh vật
  4. Mẫu
  5. Trang

Nguyên tử là yếu tố cơ bản, xác định thiết kế tương laiđịa điểm.

Các phân tử là sự kết nối của các nguyên tử thành các khối có ý nghĩa đầu tiên và thu được các chức năng khác nhau đầu tiên.

Sinh vật là giai đoạn tiếp theo trong quá trình phát triển của thiết kế. Cho phép chúng tôi dự đoán cấu trúc trong tương lai..

Mẫu - gần như đã có thiết kế sẵn sàng, độ đặc hiệu tối đa của nó. chúng ta nhận được nếu chúng ta tập hợp tất cả các phần tử trước đó lại với nhau.

Trang - Giai đoạn cuối thiết kế.

Ưu điểm chính của thiết kế nguyên tử là với thiết kế như vậy, chúng tôi có thể điều chỉnh chức năng cần thiết của trang web cho phù hợp với bất kỳ thiết bị nào. Đồng thời, kiểu dáng và thiết kế vẫn giữ nguyên cho bất kỳ quy mô và sự thích ứng nào. Tôi cũng muốn lưu ý một ưu điểm quan trọng của phương pháp này là chúng ta có thể thêm các chức năng, trang và nội dung mới mà không cần làm lại toàn bộ cấu trúc hoặc tạo mẫu mới từ đầu.
Trong tiến trình tạo trang web thiết kế và thiêt kê giao diện sẽ ngày càng hướng tới một khái niệm duy nhất, từ bỏ sự phân biệt giữa các thiết bị, có thể là máy tính desktop, máy tính bảng, điện thoại thông minh, v.v. Thiết kế nguyên tử mang đến một góc nhìn mới mẻ và một hướng đi mới cho tương lai của công nghệ web.

Nói ngắn gọn: Atomic Design sử dụng Sketch là tương lai của thiết kế sản phẩm.

Theo tôi

Brad Frost, anh chàng tuyệt vời trong video, là một trong những người sáng lập hệ thống được thảo luận trong bài viết này. Thiết kế nguyên tử được phát triển để đáp ứng thế giới kỹ thuật số thích ứng mà tất cả chúng ta đang sống và làm việc.

Chúng tôi tạo ra các hướng dẫn về phong cách, hướng dẫn về thành phần, bảng tâm trạng và các công cụ khác để làm cho thiết kế của chúng tôi dễ hiểu và dễ sử dụng hơn trong tương lai. Tương tự như vậy, các nhà phát triển sử dụng những thứ như Bootstrap, Foundation, Bourbon và các công cụ tương tự khác để tăng tốc quá trình mã hóa. Khi chúng ta làm việc theo nhóm, những điều này khiến cuộc sống dễ dàng hơn nhiều. Và đó chính xác là mục đích của Atomic Design.

Thiết kế nguyên tử phù hợp hơn cho việc thiết kế tổng thể bức tranh lớn hơn là tạo ra một thực thể hoặc một trang duy nhất. Công cụ này hoàn hảo cho thiết kế lõi hệ thống.

Thiết kế nguyên tử liên quan đến việc tạo ra một hệ thống gồm các phần riêng lẻ có thể được sử dụng để tạo ra các phần tử và mẫu có thể tái sử dụng nhiều lần.

nguyên tử

Nguyên tử là nền tảng tuyệt đối của hệ thống của chúng tôi. Các nguyên tử bao gồm bảng màu, phông chữ, thành phần tùy chỉnh (chẳng hạn như tiêu đề, đoạn văn, nút, v.v.) và những thứ khác kết hợp với các nguyên tử khác để tạo ra phân tử.

Phân tử

Các phân tử là những phần của hệ thống mà chúng ta xây dựng từ các nguyên tử. Và mặc dù các phân tử cần có nguyên tử, nhưng chúng giống như những khối Lego để tạo ra những thứ phức tạp hơn.

Các phân tử bao gồm các phần tử như trường biểu mẫu có nhãn hoặc bảng có tiêu đề và cột dữ liệu.

Sinh vật

Từ các sinh vật, chúng ta ít nhiều đã có được cái nhìn toàn diện về giao diện. Bằng cách kết hợp các phân tử, chúng tôi có thể tạo ra các phần sản phẩm phức tạp hơn nhưng có thể lặp lại.

Ví dụ về một sinh vật – điều hướng chính trên một trang bao gồm logo, liên kết điều hướng và trường tìm kiếm hoặc nút đăng ký.

Mẫu

Mẫu về cơ bản là wireframe hoặc mô hình của chúng tôi. Bằng cách kết hợp nhiều sinh vật, chúng ta thực sự bắt đầu thấy được bức tranh toàn cảnh về những gì chúng ta đang tạo ra.

Nếu không cần kết quả chi tiết, có độ chính xác cao thì từ thời điểm này, chúng tôi có thể bắt đầu triển khai hệ thống của mình bằng mã.

Trang

Các trang là phiên bản chi tiết hơn của mẫu. Thiết kế trong hình trên đã được coi là một trang. Ở đây, ngay cả người mới bắt đầu thiết kế cũng có thể hiểu loại dự án mà chúng tôi đang tạo.

Các trang không phải lúc nào cũng cần thiết, nhưng ai lại không thích hình ảnh đẹp mắt?

Tại sao phác thảo?

Mặc dù Sketch chưa trở thành một công cụ thiết kế mạnh mẽ như Adobe Illustrator hay Photoshop, nhưng nó là một công cụ tuyệt vời để làm việc với phương pháp Atomic Design.

Tổ chức

Sketch là đứa con tình yêu may mắn của Adobe Illustrator và Photoshop. Không còn nghi ngờ gì nữa, Sketch vẫn còn rất non trẻ nhưng nó đã khá mạnh mẽ và trên hết là nó cực kỳ dễ sử dụng.

Bạn không chỉ có thể triển khai hầu hết mọi thứ bạn cần mà không cần tìm kiếm không ngừng công cụ phù hợp trong kho của nhiều menu đa cấp mà còn tổ chức quy trình làm việc của mình chính xác hơn bằng cách sử dụng hệ thống phân cấp các lớp.

Nếu bạn không sắp xếp hợp lý, rất có thể bạn sẽ bắt đầu mất tiền trong quá trình thiết kế, chỉ là bạn chưa nhận ra sự mất mát mà thôi. Tổ chức công việc là cực kỳ quan trọng trong việc sử dụng hiệu quả thời gian và các nguồn lực khác!

Tính mô đun

Sketch rất phù hợp với Atomic Design vì nó dễ dàng tạo ra các hệ thống mô-đun. Bạn không chỉ có thể đạt được sự tổ chức hoàn hảo với các lớp như trong Adobe Photoshop, bạn còn có thể tạo các phần tử mô-đun. Trong Sketch, những phần tử này được gọi là biểu tượng.

Việc tạo biểu tượng cho phép bạn thay đổi tất cả kiểu của một phần tử và những thay đổi đó sẽ được phản ánh trên tất cả các thực thể của biểu tượng trong cùng một tệp.

Đầu tiên, hãy vẽ phần tử của bạn theo cách bạn muốn.

Sau đó chọn nó và bấm vào nút Tạo biểu tượng(tạo biểu tượng) trên bảng trên cùng công cụ.

Mẹo chuyên nghiệp:Để biến các phần tử có văn bản thành các ký hiệu mô-đun hoàn hảo trong Sketch, hãy nhớ chọn tùy chọn Loại trừ giá trị văn bản khỏi biểu tượng trong hộp công cụ bên phải.

Để làm điều này trước tiên bạn cần chọn văn bản trong biểu tượng, nếu không làm điều này bạn sẽ không thấy tùy chọn mình muốn trong hộp công cụ.

Bây giờ bạn có thể chèn ký hiệu vào bất cứ đâu và thay đổi văn bản bên trong để văn bản trên các bản sao khác của ký hiệu vẫn giữ nguyên.

Nếu bạn không có ý định tạo nội dung văn bản khác nhau cho từng ký tự thì đừng lo lắng và bỏ qua bước này. Nhưng chỉ biết rằng cơ hội này có tồn tại, và nó rất thuận tiện.

Bất cứ khi nào bạn muốn đặt một trong các phần tử đã tạo, bạn chỉ cần nhấp vào menu thả xuống Chèn, tìm tùy chọn Biểu tượng và chọn ký tự bạn muốn chèn.

Chuyển đổi thành mã

Xuất sang mã

Điều gì tốt hơn các biểu tượng mô-đun? Xuất thiết kế trực tiếp sang mã. Điều này có nghĩa là bạn, nhà thiết kế, không cần phải học cách viết mã nguồn đúng cách. Mặc dù vậy, điều này cũng sẽ không gây tổn hại gì.

Để lấy mã của các phần tử, trước tiên bạn cần đảm bảo rằng chúng được nhóm lại với nhau một cách thích hợp và được chuyển đổi thành ký hiệu. Sau đó, bạn chỉ cần nhấp chuột phải vào phần tử và chọn Sao chép thuộc tính CSS trong menu thả xuống.

Đảm bảo bạn quan tâm đến tất cả các tiền tố cần thiết vì chúng không có trong mã từ Sketch. Hoặc dùng hành lý đặc biệt vì điều này.

HTML

Như với sử dụng Bootstrap hoặc Foundation, chúng tôi có các yếu tố cách điệu. Tất cả những gì còn lại cần làm là thêm một lớp vào thành phần trong mã HTML của chúng ta.

Tại đây, bạn cần biến các thành phần thành một trang HTML mà chỉ các nhà phát triển trong nhóm mới nhìn thấy. Bạn có thể tạo một trang gồm các phần tử được áp dụng lớp mong muốn để kiểm tra xem nó trông như thế nào trong trình duyệt trên các màn hình khác nhau.

Brad Frost và Dave Olson từ Pattern Lab đã tạo ra một ví dụ tuyệt vời, hãy xem thử:

Sử dụng công cụ mẫu

Đây là phần thưởng dành cho những người đã thành thạo các công cụ tạo khuôn mẫu và CSS, như swig, ngọc bích, haml và nhiều ngôn ngữ khác hiện có.

Nhiều sinh vật mà chúng ta tạo ra sẽ trở thành một phần sau khi chúng được chuyển đổi thành mã.

Chúng ta làm được rồi

Bây giờ bạn có thể giả vờ như bạn hiểu biết về khoa học. Và lên đến đến một mức độ nhất định, bạn hiểu điều này. Thiết kế nguyên tử là khoa học về thiết kế chất lượng cao.

Bằng cách tạo ra các phần tử và mẫu theo mô-đun, có thể lặp lại, chúng ta có thể tăng tốc quá trình thiết kế và phát triển theo cấp số nhân. Và việc tăng tốc không chỉ ảnh hưởng đến việc vẽ các phần tử mà còn ảnh hưởng đến quá trình thực hiện các thay đổi trong toàn bộ dự án.