Trang chủ-internet-Thiết kế web nguyên tử. Thiết kế nguyên tử

Thiết kế web nguyên tử. Thiết kế nguyên tử

Bất cứ ai đã từng phát triển thiết kế trang web đều biết công việc đó khó khăn và vất vả như thế nào. Có, nếu bạn làm việc một mình, mọi thứ sẽ đơn giản hơn một chút: bạn quyết định kết quả cuối cùng sẽ như thế nào, thảo luận về các chỉnh sửa với khách hàng và thiết lập các quy tắc bất thành văn của riêng bạn để tạo ra thiết kế. Nhưng nếu bạn làm việc trong một nhóm có hàng tá dự án, việc thiếu một phương pháp luận rõ ràng chắc chắn sẽ ảnh hưởng đến hiệu quả công việc của bạn.

Việc thiếu các quy tắc rõ ràng khi làm việc thiết kế sẽ dẫn đến việc mỗi nhà thiết kế sẽ thiết kế các yếu tố theo cách riêng của mình. Do đó, các bản phác thảo làm sẵn sẽ phải liên tục điều chỉnh, bố cục thường sẽ khác với bố cục được tạo ban đầu và bạn sẽ phải quên đi việc liên tục thực hiện các ý tưởng mới, vì nó sẽ tốn rất nhiều thời gian. công việc thường ngày. Nếu anh ấy gia nhập đội người mới, anh ấy sẽ phải mất hơn một tháng để bắt kịp tốc độ và bắt đầu làm việc hoàn toàn. Tất nhiên, với sự “hỗn loạn” hoàn toàn trong đội ngũ thiết kế, các nhà phát triển cũng sẽ bối rối. Kết quả là khách hàng không hài lòng, công việc không hiệu quả và thiếu sự phát triển.

Để tránh những tình huống như vậy, nhóm chỉ cần một hệ thống quy tắc để phát triển thiết kế. Gần đây, để hệ thống hóa quy trình phát triển website, “ thiết kế nguyên tử", được đề xuất vào năm 2013 bởi Brad Frost. Phương pháp này không chỉ hữu ích cho các công ty lớn, mà còn dành cho những người chỉ làm việc trên các trang web, vì nó giúp đơn giản hóa đáng kể quá trình phát triển. Hôm nay chúng ta sẽ cố gắng hiểu thiết kế nguyên tử là gì và phương pháp này sẽ giúp bạn tối ưu hóa quy trình làm việc của mình như thế nào.

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

Theo người tạo ra phương pháp này, ý tưởng thiết kế nguyên tử đến với ông từ lĩnh vực hóa học. Như bạn đã biết, trong tự nhiên mọi chất đều bao gồm các nguyên tử và phân tử. Frost xem các giao diện theo cách tương tự, vì chúng cũng được tạo thành từ một số thành phần nhất định. Phương pháp này mời nhà thiết kế làm việc không phải trên toàn bộ giao diện cùng một lúc mà trước tiên tạo ra các thành phần của nó, dần dần kết hợp chúng thành các khối và tạo ra một thiết kế. Tóm lại, phương pháp “thiết kế nguyên tử” đòi hỏi người phát triển phải có khả năng suy nghĩ từ cái nhỏ nhất đến cái lớn nhất và kết hợp các yếu tố có sẵn.

Trong phương pháp thiết kế nguyên tử có 5 cấp độ sự phát triển:

1. Nguyên tử

Đây là những phần nhỏ nhất của giao diện - các nút, trường nhập, đoạn văn, tiêu đề, biểu tượng, hình ảnh. Khái niệm nguyên tử còn bao gồm nhiều khái niệm trừu tượng- màu sắc, phông chữ, độ dốc, hình ảnh động. Điều này được hiểu rằng trước tiên nhà thiết kế sẽ xác định những yếu tố nào mình sẽ cần để tạo bố cục trang và phát triển thiết kế của họ.

Bản thân các nguyên tử là vô dụng, nhưng bằng cách kết hợp chúng thành các khối, người thiết kế sẽ dần dần đạt được một cấu trúc giao diện tổng thể. Đã ở giai đoạn nguyên tử, nhà phát triển nên lưu ý rằng tất cả các yếu tố đều tương ứng với một phong cách nhất định và được kết hợp với nhau.

2. Phân tử

Phân tử là sự kết hợp của hai hoặc nhiều nguyên tử; các khối nhỏ nhất tạo nên một thiết kế. Ví dụ: bằng cách kết hợp một số trường nhập, nút và biểu tượng, chúng ta sẽ có được một biểu mẫu hoàn chỉnh. Ở giai đoạn này, những ưu điểm của phương pháp nguyên tử đã rõ ràng hơn - rõ ràng là các phân tử có thể được tái sử dụng và điều này làm giảm đáng kể thời gian phát triển.

3. Sinh vật

Một sinh vật là một tập hợp các phân tử. Ở giai đoạn này, nhà phát triển đã tiến gần hơn đến kết quả cuối cùng vì các sinh vật là những phần được tạo sẵn của giao diện. Ở giai đoạn này, khách hàng đã có thể xem các khối riêng lẻ của trang web sẽ như thế nào và nếu cần, hãy thực hiện các thay đổi của riêng mình. Điều này sẽ cực kỳ dễ thực hiện: một nhà thiết kế ban đầu làm việc bằng phương pháp nguyên tử sẽ không phải tìm kiếm lâu yếu tố cần thiết trong mã hoặc chỉnh sửa toàn bộ cấu trúc trang. Vì vậy, việc dễ dàng thay đổi địa điểm cũng là một trong những lợi ích của thiết kế nguyên tử.

4. Mẫu

đoàn kết sinh vật và đặt chúng theo bản phác thảo dự định, bạn sẽ có được vật mẫu- một nguyên mẫu làm sẵn cho giao diện của bạn. Thông thường, sơ đồ cấu trúc trang (khung dây) được tạo trước tiên. Trong thiết kế này, nhà thiết kế xác định cách đặt các phần tử và cách chúng phản hồi với hành động của người dùng. Một số nhà phát triển tạo một mô hình đen trắng đơn giản, dần dần biến thành một trang hoàn chỉnh. Bằng cách này hay cách khác, giai đoạn này là cực kỳ quan trọng - xét cho cùng, ban đầu cần xác định yếu tố nào sẽ thu hút sự chú ý của người dùng và yếu tố nào có thể được chuyển xuống nền.

5. Trang

Một trang là một mẫu chứa đầy nội dung thực. Ở giai đoạn trang, bạn có thể kiểm tra xem nội dung trông như thế nào, có đọc được không và trang có thân thiện với người dùng hay không. Nếu phát hiện bất kỳ thông tin nào không chính xác, bạn luôn có thể quay lại và thay đổi một nguyên tử, phân tử hoặc sinh vật cụ thể (điều này thuận tiện hơn nhiều so với làm việc với toàn bộ trang).

Như bạn có thể thấy, cách tiếp cận nguyên tử để làm việc trên thiết kế trang cực kỳ hiệu quả - nó cho phép bạn tránh những sai lầm nghiêm trọng, cũng như tiết kiệm thời gian phát triển và nhanh chóng thực hiện các thay đổi.

Trong bài viết sau, bạn sẽ tìm hiểu về lợi ích và ứng dụng của thiết kế nguyên tử.

Một hệ thống thiết kế với tài liệu chi tiết có thể đóng một vai trò lớn trong sự thành công của bất kỳ dự án lớn nào. Có nhiều cách tiếp cận để tạo ra một hệ thống như vậy. Thiết kế nguyên tử là một trong những phương pháp được đề xuất gần đây.

Tôi làm việc cho một công ty chuyên thiết kế và phát triển các dự án lớn khách hàng doanh nghiệp. Chúng tôi bắt đầu sử dụng phương pháp nguyên tử vào mùa hè năm 2016. Kể từ đó, chúng tôi đã có cơ hội thử nghiệm phương pháp này trong một số dự án dài hạn.

Về lý thuyết, cách tiếp cận nguyên tử khá rõ ràng. Tuy nhiên, trên thực tế, chúng tôi đã mất một thời gian để phát triển các cách để cả nhà thiết kế và nhà phát triển sử dụng nó.

Phần 1. Hệ thống hướng thành phần

Kể từ khi những chiếc máy tính đầu tiên ra đời, các nhà phát triển đã tìm mọi cách để tăng năng suất, tăng tốc ứng dụng và giảm lỗi.

Đây là cách lập trình hướng thành phần ra đời. Phương pháp phát triển này dựa trên các thành phần hoặc mô-đun: các đoạn mã được thiết kế để tái sử dụng. Nói cách khác, bạn không cần phải lập trình cùng một thứ hai lần. Cách tiếp cận này cũng cho phép bạn sửa đổi mô-đun một lần để cập nhật nó trên tất cả các phiên bản trong hệ thống. Ngoài ra, ứng dụng còn nhận được kiến ​​trúc dễ hiểu hơn và quy trình thống nhất phát triển.

Cách tiếp cận này không phải là duy nhất đối với lập trình. Có 2 phương pháp định hướng thành phần phổ biến nhất trong thiết kế website.

  • Rất khó để theo dõi sự kế thừa của các thành phần. Không có gì lạ khi một dự án lớn có nhiều kiểu cho một nút, trường nhập hoặc thành phần khác. Và khi các nhà phát triển (hoặc nhà thiết kế khác) nhìn vào bố cục của bạn, họ có thể gặp khó khăn trong việc hiểu thành phần cụ thể nào trong hướng dẫn phong cách mà bạn đang sử dụng.
  • Một số lượng lớn các thành phần không được mô tả trong một hướng dẫn phong cách điển hình. Thông thường, nó chỉ chứa thông tin về kiểu văn bản, biểu tượng, nút, trường nhập, v.v. Những điều nhỏ nhặt. Nếu không có tài liệu thiết kế chi tiết, các mô hình thường được triển khai khác với dự định của nhà thiết kế.
  • Tài liệu kém làm giảm nghiêm trọng việc tái sử dụng các thành phần thiết kế của bạn. Nếu dự án có hơn chục trang, điều này có thể trở thành một vấn đề. Không phải lúc nào các nhà thiết kế hoặc nhà phát triển khác cũng xem qua tất cả các bố cục trong dự án của bạn để đảm bảo rằng cửa sổ bật lên “à, cái đó, có các nút” chưa được tạo trước đó. Nhà thiết kế vẽ một cửa sổ mới. Nhà phát triển mã hóa một cửa sổ mới. Một tháng đã trôi qua, bạn có 15 phiên bản khác nhau của cửa sổ bật lên trong dự án của mình. câu hỏi đơn giản"Không thực sự".

Phần 2. Thiết kế nguyên tử là gì

Điều gì sẽ xảy ra nếu bạn có thể tận dụng cả khung và hướng dẫn về phong cách? Một giải pháp được đề xuất bởi Brad Frost, một nhà thiết kế web đến từ Pittsburgh, Mỹ. Nó được gọi là Thiết kế nguyên tử.

Thiết kế nguyên tử là một phương pháp cho phép (và yêu cầu) mô tả mọi thành phần trong hệ thống thiết kế của bạn.

Cách tiếp cận này chia các yếu tố thành năm loại:

1. Nguyên tử. Nhỏ nhất khối xây dựng dự án của bạn. Giống như những viên gạch LEGO. Kiểu văn bản, nút, biểu tượng, trường nhập, hộp kiểm, v.v. Tất cả các thành phần này không thể được chia thành các phần nhỏ hơn mà không mất hết ý nghĩa (ví dụ: tại sao bạn cần một nút không có văn bản hoặc biểu tượng?).

nguyên tử

2. Phân tử.Đây là những yếu tố phức tạp hơn, bao gồm một số nguyên tử. Ví dụ: “máy nướng bánh mì” có thông báo, trường nhập bằng nút (trường tìm kiếm), giá trị dữ liệu (ví dụ: “tốc độ: 343 m/s”, trong đó từ “tốc độ” được viết theo một kiểu và giá trị trong khác) và những người khác. Thỉnh thoảng phân tửđã trở thành những yếu tố hoạt động đầy đủ. Nhưng, theo nguyên tắc, chúng phải là một phần thân hìnhđể có giá trị thực tiễn.

3. Sinh vật. Các phần thực sự hoạt động của trang được tạo thành từ các nhóm nguyên tử Và phân tử. Nhiều sinh vật có thể hoạt động hoàn toàn mà không cần dựa vào các thành phần khác trên trang. Chúng thường khá lớn. Ví dụ: menu chính của trang web, thanh bên, một biểu mẫu cần điền, một cửa sổ bật lên có nhiều dữ liệu, v.v.

Sinh vật có thể khá phức tạp và chứa những sinh vật nhỏ hơn (giống như trong cuộc sống).

Một sinh vật “mèo” có một sinh vật “chuột” bên trong. Ảnh của Timothy Meinberg

4. Mẫu. Về cơ bản đây là trang không có nội dung thực sự. Các mẫu kết hợp các sinh vật thành một bố cục trang web hoàn chỉnh.

5. Trang. Bạn tạo khi nào bản mẫu, dựa trên các bản sao bạn tạo trang, lấp đầy chúng bằng nội dung thực tế. Hãy lấy một bài viết từ Wikipedia làm ví dụ. Nếu chúng ta đơn giản hóa cấu trúc của nó, bản mẫu bài viết sẽ bao gồm những nội dung sau sinh vật, như thanh bên, điều hướng và nội dung chính. Mỗi bài viết Wikipedia có nội dung thực sẽ là một trang sử dụng cùng một bản mẫu.

Sinh vật cấp cao trong bài viết Wikipedia

Phương pháp nguyên tử được sử dụng như thế nào trong thực tế? Brad Frost và một nhóm nhà phát triển đã tạo ra công cụ Pattern Lab. Nó cho phép bạn tạo một trang web tĩnh để ghi lại thư viện nguyên tử của bạn. Bạn có thể lưu trữ mã của các thành phần và mô tả của chúng ở đó. Đây là một giải pháp dành cho các nhà phát triển.

Hãy xem cách áp dụng phương pháp nguyên tử theo quan điểm của một nhà thiết kế.

Phần 3. Atomic trong quy trình làm việc của người thiết kế

Khi nhóm của chúng tôi quyết định thử phương pháp nguyên tử cho dự án lớn tiếp theo, không có hướng dẫn nào trên Internet về cách sử dụng phương pháp này trong thực tế. Cùng với các nhà phát triển, qua nhiều cuộc họp, chúng tôi đã đưa ra các giải pháp để tích hợp hiệu quả nguyên tử vào quy trình làm việc.

Nếu bạn là nhà thiết kế web/UI thì công việc hàng ngày, rất có thể sử dụng Sketch hoặc (vẫn?) Photoshop để tạo bố cục thiết kế. Ngoài ra, với InVision/Zeplin/Avocode, bạn chuyển thiết kế của mình cho nhóm phát triển, nơi họ có thể xem xét cấu trúc và thực hiện tất cả các phép đo cần thiết. Ngoài ra, bạn còn có một số loại hướng dẫn về phong cách, mô tả một số yếu tố thiết kế.

Với mục đích của bài viết này, tôi sẽ sử dụng kết hợp các công cụ sau để mô tả quy trình làm việc:

Cách tiếp cận nguyên tử với các công cụ quen thuộc

Hướng dẫn phong cách

Trước hết, bạn nên chuẩn bị trước vì thực tế là hướng dẫn về phong cách của bạn sẽ rất lớn. Rốt cuộc, mọi thiết bị trong cơ chế sẽ được ghi lại.

Sử dụng một dự án riêng cho hướng dẫn trong môi trường InVision của bạn. Thứ nhất, nhiều trang hướng dẫn về phong cách sẽ không tạo ra sự nhầm lẫn trong một dự án đang hoạt động. Thứ hai, bạn đang tạo một hệ thống thiết kế có khả năng được mở rộng trên nhiều dự án cho một khách hàng, điều đó có nghĩa là các nhóm khác nhau trong công ty của bạn cần có thể truy cập được hệ thống đó.

Thêm trang bìa nơi bạn liệt kê tất cả các loại nguyên tử, phân tử và sinh vật. Mỗi loại sẽ có trang riêng, vì vậy hãy làm cho nội dung hướng dẫn phong cách của bạn có tính tương tác.

Bắt đầu như cách bạn thường tạo hướng dẫn về phong cách. Thêm các thành phần cơ bản cần thiết nhất như kiểu văn bản, màu sắc, biểu tượng, nút, v.v. Những yếu tố đó mà không có thì bạn không thể tạo trang đầu tiên của dự án.

Hướng dẫn phong cách cơ bản

Một bổ sung quan trọng cho hướng dẫn phong cách sẽ là một trang có danh sách các thay đổi. Đối với số phiên bản, hãy sử dụng ngày cập nhật. Khi bạn đã thêm hoặc thay đổi một thành phần trong hệ thống, hãy thêm ghi chú vào trang này: ngày cập nhật, tên của bạn và mô tả về những thay đổi. Điều này sẽ cho phép tất cả các thành viên trong nhóm nhận thấy những thay đổi trong hướng dẫn phong cách. Các nhà phát triển chắc chắn sẽ biết ơn vì điều này.

Quy tắc đặt tên

Bây giờ hãy nói về các quy tắc đặt tên thành phần. Để giao tiếp tốt hơn giữa nhà thiết kế và nhà phát triển, họ cần phải nhất quán và rõ ràng.

Các từ luôn được viết bằng chữ thường và phân cách bằng dấu gạch nối. Điều này làm cho chúng dễ dàng cho người thiết kế sử dụng. Và nó rất dễ dàng cho nhà phát triển sử dụng trong mã nguồn và đặt tên tệp. Hơn nữa, định dạng đặt tên này cho phép bạn nhanh chóng hiểu lớp hoặc nhóm nào trong bố cục của bạn được mô tả trong hướng dẫn kiểu. Bạn vẫn sẽ có các lớp đơn giản nhất như bg, dải phân cách và vân vân.

Chữ cái đầu tiên chịu trách nhiệm về loại nguyên tố: nguyên tử, phân tử, sinh vật. Tiếp theo là một từ mô tả loại phần tử. Phần còn lại được sử dụng để mô tả các biến thể của thành phần này.

Mỗi nguyên tử, phân tử và sinh vật trong bố cục thiết kế của bạn phải được đặt tên theo quy ước đặt tên đã được thiết lập.

Ghi chú:Để làm cho quá trình này trở nên đơn giản và dễ dàng, tôi khuyên dùng plugin Đổi tên. Sử dụng phím nóng và đổi tên nhóm các lớp sẽ nhanh hơn.

Các quy tắc đặt tên được thiết lập rõ ràng đóng một vai trò quan trọng trong sự thành công của hệ thống thiết kế. Ví dụ: nhà phát triển nghiên cứu bố cục của bạn và thấy một sinh vật o-popup-cảnh báo-thoát. Anh ta mở thư mục mã nguồn của dự án và thấy rằng thành phần này đã được phát triển trong tệp o-popup-alert-exit.html(xét cho cùng thì nó có cùng hệ thống đặt tên). Thay vì tạo lại thành phần, nó sẽ nhanh chóng thêm nó vào đúng nơi dự án.

  • Cố gắng đặt tên dễ phân biệt và dễ hiểu, không sử dụng số. Ví dụ, a-dropdown-chính, a-dropdown-thứ cấp, thay vì a-dropdown-1, a-dropdown-2. Những cái tên chứa đựng ý nghĩa sẽ giúp tránh những hiểu lầm (trong thực tế, chúng tôi đã gặp trường hợp một con số không chính xác dẫn đến một loạt lỗi trong cách bố trí và cách triển khai).
  • Khi đặt tên, hãy cố gắng tập trung vào vai trò của thành phần trong hệ thống chứ không phải vai trò của nó. vẻ bề ngoài. Không đặt tên cho nút cho hành động chính a-nút-màu xanh chỉ vì nó màu xanh. Cái này nút trang chủ, vậy hãy gọi cho cô ấy a-nút-chính. Trong tương lai, nếu bạn thay đổi màu của các nút chính, bạn sẽ không phải đổi tên từng nút màu xanh trên mỗi trang. Và chỉ cần nhìn vào tên của một thành phần, bạn có thể biết được vai trò của nó trong hệ thống.

Thư viện phác thảo

Ghi chú:Đừng quên tổ chức và sắp xếp các biểu tượng trong hướng dẫn phong cách của bạn trên trang Biểu tượng. Khi hướng dẫn phát triển, trang này trở thành một mớ hỗn độn. Bạn không cần phải thực hiện việc này một cách thủ công, chỉ cần sử dụng plugin như Symbol và Artboard Organizer. Nếu bạn đặt tên chính xác cho các biểu tượng của mình, nó sẽ thực hiện mọi thứ chỉ bằng một cú nhấp chuột.

Bố cục thiết kế

Hướng dẫn về phong cách cơ bản đã được tạo, đã đến lúc tập hợp các trang. Tổ chức quy trình làm việc của bạn như thế này:

1. Tạo bố cục trang. Một số yếu tố sẽ lấy từ hướng dẫn phong cách, nhưng nhiều yếu tố sẽ hoàn toàn mới. Hiện tại, hãy sắp xếp các lớp của bạn thành các nhóm như bình thường.

2. Sau khi trang được tập hợp lại, nó sẽ trải qua nhiều lần lặp lại và thảo luận với khách hàng trước khi được phê duyệt và sẵn sàng để phát triển. Ở giai đoạn này không có ích gì trong việc tạo tài liệu cho các thành phần của nó.

3. Bố cục thiết kế đã được phê duyệt, đã đến lúc phun sương của anh ấy. Đảm bảo tất cả các lớp và nhóm của bạn được đặt tên và cấu trúc theo phương pháp được mô tả ở trên. Thêm các thành phần và mô tả của chúng vào hướng dẫn về phong cách. Thông thường, trong giai đoạn đầu của dự án, bước này mất một lượng thời gian đáng kể. Hãy chuẩn bị cho việc này.

4. Hình minh họa dưới đây là một ví dụ về tài liệu của sinh vật bảng. Dưới tên của sinh vật, một danh sách các yếu tố mà nó bao gồm được thêm vào. Chúng có thể nhấp vào được - điều này cho phép bạn dễ dàng điều hướng qua cấu trúc của thành phần và nghiên cứu thông tin về các thành phần của nó.

5. Cuối cùng, trang của bạn đã được ghi lại đầy đủ. Điều này có nghĩa là ít câu hỏi hơn từ các nhà phát triển và quy trình làm việc hiệu quả hơn.

6. Trong trường hợp lý tưởng, mã nguồn của nhà phát triển sẽ trông giống như cấu trúc lớp trong bố cục của bạn:

Phần 4. Phương pháp Atomic có thể giúp nhóm của bạn như thế nào

Cách tiếp cận được mô tả trong bài viết này có nhiều ưu điểm rõ ràng. Tôi muốn chia sẻ một số bài học mà nhóm chúng tôi đã rút ra được từ các dự án sử dụng quy trình này.

Nhà phát triển sử dụng Invision Inspection để xem cấu trúc bố cục V.

Giảm thời gian thiết kế và phát triển. Khi mọi thành phần trong hệ thống thiết kế đều được ghi lại, số lượng công việc làm thêm. Bạn không cần phải phát minh lại bánh xe khi tất cả “xe đạp” trong dự án đều có thể nhìn thấy rõ ràng. Ngoài ra, khi thư viện trở nên đầy đủ, các trang mới sẽ được thu thập nhanh hơn nhiều. Vì vậy, bạn sẽ có nhiều thời gian hơn cho những công việc khác phức tạp hơn.

Cải thiện việc thực hiện thiết kế và giao tiếp nhóm. Sự thành công của bất kỳ dự án nào phụ thuộc rất nhiều vào sự hợp tác tốt giữa nhà thiết kế và nhà phát triển. Phương pháp được mô tả trong bài viết cho phép nhóm tìm ra ngôn ngữ giao tiếp chung. Các quy ước đặt tên được chấp nhận và mô tả chi tiết về các thành phần đóng một vai trò quan trọng trong việc này. Bất kỳ thành viên nào trong nhóm đều có tài liệu trực quan đầy đủ. Điều này có nghĩa là ít hiểu lầm hơn và thiết kế được thực hiện tốt hơn.

Kỷ luật của đội ngũ thiết kế. Thông thường, các nhóm thiết kế lớn và phân tán không có tầm nhìn rõ ràng về cách cấu trúc bố cục và tệp. Hơn nữa, làm việc cho dự án lớn, thật dễ dàng để quên mô tả mọi thứ trạng thái bắt buộc thành phần. Điều này một lần nữa ảnh hưởng tiêu cực đến sự hợp tác trong nhóm. Phương pháp được mô tả trong bài viết yêu cầu mỗi thành phần trong hệ thống phải được mô tả theo một cách cụ thể. Cách tiếp cận này tự động giải quyết những vấn đề này.

Kết luận

Lúc đầu, cách tiếp cận nguyên tử sẽ đòi hỏi khá nhiều nỗ lực lớnđể thực hiện. Nhưng cuối cùng, nó sẽ được đền đáp xứng đáng. Bạn không chỉ tạo ra một loạt các nút và trang. Bạn đang tạo ra một hệ thống thiết kế. Một hệ thống có thể được mở rộng cho hàng chục dự án của khách hàng của bạn.

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, ngày càng nhiều. Từ lâu, họ đã vượt quá 50% ở hầu hết các ngóc ngách và đang dần tiếp cậ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 di độngđịa điểm. Các nhà thiết kế và phát triển thực sự phải tạo ra hai trang web: trang chính mà họ đã đầu tư hầu hết nỗ lực, và nỗ lực thứ hai, nhỏ hơn, di động. Sự phổ biến của các thiết bị di động có thể truy cập Internet đã đạt đến mức cao nhất, vì vậy lưu lượng truy cập trên thiết bị di động không còn có thể bị bỏ qua.

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. Giờ đây, 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 các 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à những yếu tố cơ bản quyết định thiết kế tương lai của trang web.

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..

Các mẫu gần như được thiết kế sẵn, có độ đặc hiệu tối đa. 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 cùng của 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.
Đang tiến hà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 để bàn, 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.

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ế.

Hãy đến với tôi

Brad Frost, người đàn ông tuyệt vời mà bạn nhìn thấy trong video ở đầu bài viết này, chịu trách nhiệm chính về hệ thống được thảo luận ở đây. Thiết kế nguyên tử được phát triển để đáp ứng với thế giới kỹ thuật số thích ứng mà 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 phải là thiết kế chỉ một mô hình hoặc một trang, mà là 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 đó.

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ử

Nguyên tử là cơ sở tuyệt đối của 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 là tiêu đề điều hướng bao gồm biểu tượng, liên kết điều hướng và 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 không cần độ chính xác cao của kết quả thì đâ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ù Sketch có thể chưa sánh ngang với Adobe Illustrator hay Photoshop nhưng nó vẫn là một công cụ độc đáo khi làm việc với 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ính 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à ký hiệu.

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 đó diễn ra như thế nào 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 khỏi 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 nhấp 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

Đảm bảo rằng bạn cũng tính đến tất cả các tiền tố cần thiết 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à nó giống như quay ngược thời gian khi quá trình này diễn ra.

Chuyển đổi cao!

Và phần lớn nó tập trung vào việc thiết lập nền tảng về màu sắc, kiểu chữ, lưới, kết cấu và những thứ tương tự. Kiểu suy nghĩ này chắc chắn là quan trọng, nhưng tôi hơi ít quan tâm đến những khía cạnh này của thiết kế vì xét cho cùng thì chúng luôn mang tính chủ quan. Gần đây, tôi quan tâm nhiều hơn đến giao diện của chúng ta bao gồm những gì và cách chúng ta có thể xây dựng hệ thống thiết kế theo cách có phương pháp hơn.

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

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 toàn bộ giao diện thành các khối xây dựng cơ bản và phát triển từ đó. Đó là ý chính cơ bản của thiết kế nguyên tử.

Trang

Các trang là những phiên bản cụ thể của mẫu. Tại đây, nội dung giữ chỗ được thay thế bằng nội dung đại diện thực sự để mô tả chính xác những gì người dùng cuối cùng sẽ nhìn thấy.

Các trang có mức độ trung thực cao nhất và vì chúng hữu hình nhất nên đây thường là nơi hầu hết mọi người trong quá trình này dành phần lớn thời gian và là nơi mà hầu hết các bài đánh giá đều xoay quanh.

Giai đoạn trang rất cần thiết vì đó là nơi chúng tôi kiểm tra tính hiệu quả của hệ thống thiết kế. Xem mọi thứ trong ngữ cảnh cho phép chúng tôi quay lại để sửa đổi các phân tử, sinh vật và mẫu của mình để giải quyết tốt hơn bối cảnh thực của thiết kế.

Các trang cũng là nơi để kiểm tra các biến thể trong mẫu. Ví dụ: bạn có thể muốn trình bày rõ dòng tiêu đề chứa 40 ký tự trông như thế nào nhưng cũng thể hiện 340 ký tự trông như thế nào. Nó trông như thế nào khi người dùng có một mặt hàng trong giỏ hàng của họ so với 10 mặt hàng được áp dụng mã giảm giá? Một lần nữa, những trường hợp cụ thể này ảnh hưởng đến cách chúng tôi lặp lại và 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 ta đã làm mọi việc từ lâu, ngay cả khi chúng ta không có ý thức nghĩ về nó theo cách cụ thể này.

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à các thành viên trong nhóm có thể đánh giá cao hơn khái niệm về hệ thống thiết kế bằng cách thực sự nhìn thấy các bước được trình bày trước mặt họ.

Thiết kế nguyên tử cho chúng ta khả năng đi từ trừu tượng đến cụ thể. Do đó, chúng tôi có thể tạo ra các hệ thống thúc đẩy tính nhất quán và khả năng mở rộng đồng thời hiển thị mọi thứ trong bối cảnh cuối cùng của chúng. Và bằng cách lắp ráp thay vì giải cấu trúc, chúng tôi đang tạo ra một hệ thống ngay lập tức thay vì các kiểu hái anh đào sau thực tế.

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 (cùng với với sự giúp đỡ của Dave Olsen vĩ đại) đã tạo ra một công cụ có tên là Pattern Lab để thực sự tạo ra những hệ thống thiết kế nguyên tử này. Tôi sẽ trình bày chi tiết về Pattern Lab sau, nhưng vui lòng xem nó trên Github.

Đọc thêm

  • Vì vậy, Andy Clarke đã tạo tiền đề cho những cuộc trò chuyện kiểu này từ lâu. Trên thực tế, ông đã viết một chương cho Đập phá cuốn sách 3được gọi là “Trở nên linh hoạt tuyệt vời: Thiết kế các nguyên tử và nguyên tố.” Tôi không biết nó tồn tại, vậy thì sao! Tôi thực sự khuyến khích bạn kiểm tra điều đó. Tôi cũng đặc biệt khuyến khích bạn xem qua công cụ của anh ấy có tên Rock Hammer Vimeo.

    Tôi thực sự hào hứng khi tìm hiểu sâu hơn và phát triển thêm nhiều công cụ cũng như suy nghĩ xung quanh những khái niệm này.

    Cập nhật: kể từ khi viết bài viết gốc này, tôi đã viết một cuốn sách có tên đi sâu vào chủ đề này một cách chi tiết hơn, trong đó bạn có thể mua ở dạng/hoặc định dạng. Cảm ơn!



Các ấn phẩm liên quan: