Đang tải... (xem toàn văn)
Tài liệu Giao diện layout grid, guide bằng action là một tài liệu hướng dẫn về cách sử dụng tính năng Action của phần mềm Adobe Photoshop để tạo giao diện và hướng dẫn sử dụng layout grid và guide. Layout grid và guide là hai công cụ quan trọng trong thiết kế giao diện.
GIAO DIỆN LAYOUT GRID, GUIDE BẰNG ACTION I Grid Layout Khái niệm: • Lưới tạo cấu trúc bản, khung xương cho thiết kế bạn Chúng bao gồm đường "vơ hình" mà yếu tố thiết kế bạn đặt Làm liên kết chúng với “hệ thống” tổng thể hỗ trợ nhà thiết kế sáng tác cách hợp lý • Lưới giúp bạn có liên kết quán hiệu mà không tốn nhiều công sức Nếu thực cách, thiết kế bạn xuất chu đáo, có tổ chức, gọn gàng hợp lý mặt cấu trúc • Ví dụ: Cách thiết kế trang đích chia nhỏ yếu tố lưới 12 cột Thuật ngữ đơn vị Các đơn vị khối xây dựng lưới Nhiều đơn vị tạo thành lưới tổng thể Trong ví dụ đây, bạn xem lưới đơn vị mobile đơn vị mobile Mỗi sọc màu tím đại diện cho đơn vị 3 Thuật ngữ Máng xối Máng xối đường cột hàng tách biệt đơn vị Kích thước máng xối phổ biến 20px Vai trò máng xối tạo thành không gian âm (bất kể lớn hay nhỏ) cột hàng Nói cách đơn giản nhất, máng xối khoảng trống cột không gian hàng Máng xối đặc biệt quan trọng bố trí khối xây, chiều rộng máng xối chi tiết quan trọng bố cục Các sọc hẹp màu vàng hình minh họa bên đại diện cho máng xối tách biệt đơn vị Khoảng cách đệm dạng khoảng trắng siêu nhỏ tạo cho lưới để có khơng gian thở 4 Các loại lưới a Lưới đường sở • Lưới đường sở thiên kỹ thuật chút, xác định vị trí văn Về bản, khoảng cách hàng đầu khoảng cách đường sở Lưới giúp tạo trải nghiệm tốt cho người đọc, đặc biệt nơi có nhiều văn để đọc • Mặc dù điều quan trọng thiết kế in ấn bố cục sách, điều quan trọng phải xem xét lưới đường sở thiết kế web • Khoảng cách dòng website ảnh hưởng đến mức độ dễ đọc trang đích Nếu văn chặt chẽ, người dùng bỏ rời khỏi trang web bạn hoàn toàn Tạo cân tốt văn khoảng trắng b Lưới thảo Lưới thảo tảng cho tất sách, báo tạp chí Cịn gọi lưới cột, cấu trúc lưới đơn giản phù hợp với khối văn hình ảnh liên tục lớn Về bản, vùng hình chữ nhật lớn bên trang, giống hộp giới hạn cho văn c Lưới cột Lưới cột giúp chia nhỏ văn bản, ảnh hình minh họa Đối với trang web, bạn có đâu từ 2–12 chí 16 cột trải dài theo chiều rộng trang đích Bạn đặt văn hình ảnh cột chúng kéo dài qua nhiều cột Khoảng trống cột gọi máng xối, chúng phải có kích thước tất Máng xối khơng gian cột Không phải tất lưới cột phải đối xứng Ví dụ: bạn sử dụng lưới cột khơng đối xứng số mỏng số khác rộng hơn, điều hữu ích tùy thuộc vào hệ thống phân cấp thiết kế bạn Lưới cột không đối xứng thường sử dụng trang web blog nơi bạn có nội dung vùng chứa hai phần ba lớn bố cục, phần ba nhỏ bên bao gồm thông tin blog người viết Hãy xem cách trang chủ blog sử dụng lưới cột khơng đối xứng d Lưới mơ-đun Ví dụ lưới mô-đun Lưới mô-đun tương tự lưới cột khác với việc thêm hàng Bạn thấy tờ báo tạp chí sử dụng lưới mơ-đun nhiều để xếp nội dung chúng sử dụng thiết kế trang web ứng dụng, chẳng hạn phần lưới sản phẩm Hãy xem cách Everlane sử dụng lưới mô-đun để tổ chức lựa chọn denim Ví dụ lưới mơ-đun thiết kế web (nguồn: Everlane) Trang chủ YouTube ví dụ khác lưới mơ-đun sử dụng Mặc dù họ sử dụng bên bên trái cho liên kết phổ biến phần thịnh hành phần đăng ký, tất nội dung video tổ chức thành lưới mô-đun cột để tối đa hóa số lượng video mà người dùng duyệt cuộn nội dung để xem Trang chủ YouTube ví dụ lưới mơ-đun e Lưới phân cấp Ví dụ lưới phân cấp Lưới phân cấp thường thấy thiết kế web Mục đích lưới xếp phần tử theo thứ tự quan trọng Chúng linh hoạt chút chúng sử dụng cột, hàng mô-đun để giúp tổ chức Chúng tạo cách tự nhiên cách đặt đối tượng quan trọng trang trước sau tạo lưới xung quanh chúng Các trang web liên quan đến tin tức truyền thơng có xu hướng sử dụng loại lưới để giúp thu hút ý đến số báo đăng nhiều báo khác Hãy xem ví dụ cách The New York Times sử dụng lưới phân cấp trang chủ họ Ví dụ lưới phân cấp thiết kế web (nguồn: The New York Times) f Quy tắc phần ba “ Quy tắc phần ba ” sử dụng lưới nhỏ ngụ ý bạn đặt nội dung dòng định chia nội dung thành phần ba, kết dễ nhìn mắt người Ví dụ, cách tiếp cận thường sử dụng nhiếp ảnh Mặc dù điểm khởi đầu tốt thường giúp bạn đến sân bóng, tơi khun bạn nên coi trọng điều với chút muối Khi người nói "giao điểm kỳ diệu" cho giúp bạn đặt yếu tố thiết kế, khuyên bạn nên hít thở xem xét tiềm lông tơ Thật dễ dàng để uống trợ giúp mát lạnh, đặc biệt khơng khó để tn theo “quy tắc” này, khơng có điều đặc biệt mặt tốn học sinh học theo cách - chắn phép thuật II Lưu ý thiết kế sử dụng lưới Hãy nghĩ lưới trước bạn thiết kế Sau bạn nghiên cứu xong, chí khám phá số khung dây có độ trung thực thấp giấy, tạo lưới cho trang đích bạn Đó bước đơn giản, bạn tạo xong, bạn khơng phải nghĩ lại cho tất trang đích Trước bạn bắt đầu thiết kế, nghĩ lưới trước, thay để đến cuối cố gắng làm cho thiết kế bạn phù hợp với lưới Đừng ngại phá vỡ lưới cần thiết Những nhà thiết kế cảm thấy bị giới hạn ý tưởng sử dụng lưới bạn không nên Sau bạn tạo lưới mình, bạn phá bỏ nó! Nhưng bạn làm điều cách có chủ đích có lý cho định thiết kế bạn Bạn sử dụng lưới, bạn nhận hướng dẫn thực giúp bạn thiết kế tốt nhanh Đừng sợ khoảng trắng Cân khoảng trắng khoảng trắng điều quan trọng thiết kế web Đừng cảm thấy cần phải lấp đầy góc thiết kế trang đích Cân nhắc lợi nhuận lớn khoảng cách hợp lý phần nội dung phép người dùng bạn thở tạm dừng họ cuộn qua trang web bạn Hãy thử sử dụng hệ thống lưới 960 Hệ thống lưới 960 nỗ lực để hợp lý hóa quy trình phát triển web cách cung cấp kích thước thường sử dụng dựa chiều rộng 960 pixel Có hai biến thể: 12 16 cột • Lưới 960 tuân theo cấu trúc sau: • Tổng chiều rộng 960px • Sử dụng tối đa 12 cột, cột rộng 60px • Sử dụng khoảng cách 10px bên trái bên phải cột để có tổng khoảng cách rãnh 20px • Tổng diện tích nội dung 940px Hệ thống lưới 12 cột cho phép linh hoạt Dưới ví dụ cách bạn sử dụng lưới 12 cột để thêm nội dung bố cục cột Ví dụ phần tử đặt lưới 12 cột Phân tích lưới trang web khác Khi bạn duyệt internet, nên quan sát webite họ Người thiết kế sử dụng loại lưới nào? Họ có sử dụng để thiết kế trải nghiệm không? Bạn nhận thấy lưới thành công (hoặc không thành công) bạn ý đến cách tổ chức nội dung trang web khác Hãy quan sát, học hỏi sử dụng để tạo thiết kế trang web tốt Một số ví dụ loại lưới thường dùng Lưới mười hai đơn vị Lưới mười bốn đơn vị Lưới mười bốn đơn vị Lưới mười ba cột Lưới mười ba cột Lưới mười sáu cột Lưới mười sáu cột Lưới kết hợp Lưới kết hợp Lưới kết hợp Lưới kết hợp III Thiết kế hệ thống lưới Grid System Bắt đầu với vùng làm việc trống Luôn dễ dàng hướng dẫn dựa thực tế Vì vậy, thực hành Bạn phải thiết kế chương trình cho triển lãm sưu tập Bạn làm kích thước giấy A4 Bạn cung cấp thơng tin hình ảnh kích cỡ khác Và bạn có vùng làm việc bạn Phân chia tỉ lệ Hệ thống lưới mà thiết kế dựa phân chia tỉ lệ 1:1, 414 Sử dụng khổ giấy đường dẫn để tạo tỉ lệ hệ thống lưới, điều cung cấp thành phần thiết kế có mối liên hệ với hệ thống lưới kích thước giấy Đây cách dễ để tạo mạng lưới cân Bằng cách sử dụng kích thước tờ giấy tiêu chuẩn, dựa vào tạo tỉ lệ cho hệ thống lưới Bạn có đoạn thẳng A———B—————-C Tỉ lệ vàng tỉ lệ sau: AB x 1,414 = BC Và BC x 1,414 = AC Như tỉ lệ : 1,414 khổ A4 thì: Cạnh ngắn x 1,1414 = Cạnh dài Các xác định tỉ lệ vàng Bắt đầu sáng tạo Nhiều người nói hệ thống lưới bóp nghẹt sáng tạo, không đồng ý Hệ thống lưới tạo vùng làm việc cho nhà thiết kế câu trả lời “nên để chúng đâu”, “lớn cho đủ” … Một hệ thống lưới tốt đường cho câu hỏi Vậy có hệ thống lưới Hãy bắt đầu xử lý vùng văn bản, hình dạng vị trí Chúng ta khám phá qua làm để hình ảnh chữ làm việc nhiều kiểu trang Vị trí khiến số thứ dễ sử dụng Đây lý thuyết có tồn gọi “Thẩm mỹ tạo khả sử dụng” Tôi cho lý thuyết thú vị Lý thuyết cho thiết kế đẹp tất nhiên có nhiều khả sử dụng Nó thách thức lý thuyết kiểu “Tốt gỗ tốt nước sơn” Sắp xếp lưới cách sử dụng lý thuyết tỉ lệ cân đối (như Golden Section), cho phép việc tao kiểu dáng đẹp, cân đối Theo lý thuyết, thiết kế sau khiến sản phẩm dễ sử dụng Có lẽ tơi cần xem lại điểm này, tóm lại: Hệ thống lưới tốt không giúp thiết kế bạn đẹp mà giúp người dùng dễ dàng Đặt vào thực tế Như viết tôi, thiết kế hệ thống lưới ngữ cảnh Đối với bạn thiết kế website, lấy ví dụ khác In Ấn, tất nhiên lý thuyết áp dụng cho web Nó áp dụng nhiều mơi trường khác, từ kiến trúc, tới thiết kế nội thất nghệ thuật Bạn áp dụng vào khung làm việc khác Tôi áp dụng lưới lên trang sách, gọi hệ thống lưới không đối xứng, trái với hệ thống lưới đối xứng tơi viết 4 Tìm bố cục trang Cho tỉ lệ trang sách này, sử dụng tỉ lệ để xác định nội dung, chữ khu vực trang Có cách đơn giản để làm giảm kích thước khổ giấy xuống để tỉ lệ đặt đúng, cân Xem hình Áp dụng Vùng tỉ lệ vàng Bây giờ, bạn đọc tới đây, bạn áp dụng tỉ lệ cách dễ dàng, ta chia thành cột A B Tạo hệ thống Chúng ta có cột, cần vẽ lưới để áp dụng với nhiều trang khác Ta vẽ đường line khu vực chữ phân chia cột Sau áp dụng đường cắt ngang chia khu vực nội dung phần sáng tạo Tơi gọi “Đường treo” – “Hanging Lines”, khơng chắn từ xác Nhưng nội dung đường thống tồn sách Nó cho người đọc liền mạch, xuyên suốt để họ tiếp tục để mắt tới trang sau Thêm vào đường line khác để chia thêm khu vực cần ý như, hình ảnh thích, thơng tin liên quan tới viết… để khác với phần nội dung Chúng ta sau thêm vào thiết kế vào hệ thống lưới với điều kiện, biết rõ đối tượng thiết kế – chữ, hình ảnh, cấu trúc có liên hệ tới yếu tố khác, liên hệ với trang giấy