9 nguyên tắc cơ bản thiết kế Website Responsive

  • Nguyễn Xuân Dũng Written by Nguyễn Xuân Dũng
  • Update: 26/07/2016

Thiết kế website responsive là một giải pháp tuyệt vời để tháo gỡ khó khăn về hiển thị thông tin trên các loại màn hình có độ phân giải khác nhau. Không cố định kích thước trang page, không quy định đơn vị đo lường theo milimet (mm) hay inch, không hạn chế không gian và thời gian, thiết kế website responsive có thể đáp ứng tất cả các yếu tố này.

Càng ngày càng nhiều thiết bị kết nối mạng, tiện ích cho phép bạn thiết lập một website rất đơn giản, dễ dàng và cách thiết kế điểm ảnh dành cho màn hình máy tính desktop và thiết bị di dộng đã là quá khứ. Vì thế, WebDepTV.Com phân tích tập trung vào bố cục layout để bạn hiểu và nắm bắt thông tin về một số nguyên tắc thiết kế website responsive.

1.Phân biệt website Responsive và website Adaptive

Bài viết trước, WebDepTV.Com giới thiệu đến bạn đọc hai loại hình thiết kế này, chúng tôi đã chỉ ra những điểm giống và khác nhau của chúng. Tuy rằng, hình thức bên ngoài hai loại hình thiết kế này có vẻ giống nhau về giao diện thân thiện và hiển thị tương đối giống nhau trên mọi màn hình hiển thị. Tuy nhiên sự khác nhau của chúng, bạn đọc có thể nhận ra nhờ hai hình minh họa.

Thiết kế website responsive màn hình hiển thị kéo đều ra, co giãn linh hoạt. Ngược lại, các bạn để ý, thiết kế adaptive dường như mất một khoảng thời gian để phân tích, dịch chuyển các thành phần co giãn theo màn hình.

2. Nguyên tắc dòng chảy

Khi kích thước màn hình thu hẹp hơn, nội dung bắt đầu chảy xuống những khoảng không gian trống phía dưới. Bất cứ, nội dung ít hay nhiều, chúng sẽ tự động điều chỉnh linh hoạt đẩy xuống một phần nội dung xuống- đây là nguyên tắc dòng chảy. Đây có thể là một điểm hạn chế, khó khăn nếu bạn áp dụng thiết kế theo điểm ảnh và theo điểm, thiết responsive khắc phục nhược điểm lớn này trong cách thiết kế truyền thống.

3. Thống nhất cách hiển thị

Sự thay đổi kích thước màn hình hiển thị từ màn hình máy tính cá nhân hay màn hình điện thoại di động, máy tính bảng hoăc bất kỳ thiết bị nào đều không phải là khó khăn đối với thiết kế responsive. Mỗi màn hình có mật độ phân bố điểm ảnh pixels khác nhau, vì thế chúng ta cần thống nhất lại cách hiển thị bằng các điều chỉnh bố cục, nguyên tắc làm việc đồng nhất. Điều này có nghĩa là cách hiển thị trên màn hình máy tính, điện thoại, máy tính bảng có bố cục thống nhất và tương đối giống nhau. Nhưng khác nhau về kích thước hiển thị các thành phần, cụ thể là trên máy tính để bàn, bạn điều chỉnh hiển thị kích thước đầy màn hình 100%, nhưng trên màn hình laptop tỷ lệ hiển thị có thể chỉ là 90% và thậm chí trên màn hình điện thoại chỉ hiển thị khoảng 50% so với màn hình máy tính. Đặc biệt, khi sử dụng trên tất cả các trình duyệt web, cách hiển thị luôn luôn giống nhau.

4. Điểm ngắt nghỉ (Breakpoints)

Bạn đọc có thể hiểu điểm nghỉ breakpoint cho phép bố cục layout có thể thay đổi theo một sự sắp xếp chủ ý của designer. Ví dụ, trên màn hình máy tính bạn hiển thị ba cột nhưng trên màn hình điện thoại lại chỉ hiển thị một cột duy nhất do màn hình bị hạn chế kích thước hiển thị, độ phân giải. Để thay đổi các điểm breakpoint, bạn có thể tùy chỉnh, tác động trực tiếp vào tính năng của hệ thống CSS. Thông thường, chọn vị trí đặt breakpoint, hoàn toàn phụ thuộc vào nội dung bạn trình bày. Nếu là một câu dài, muốn ngắt ngắn câu ra, bạn nên bổ sung các điểm nghỉ. Tuy nhiên, khi sử dụng cách ngắt điểm nghỉ breakpoint, hoàn toàn bạn phải cẩn thận khi sắp xếp các thành phần nội dung và không ảnh hưởng đến hiệu quả truyền tải thông tin.

5. Giá trị Max hoặc Min

Đôi khi, hiển thị nội dung đầy màn hình lại có những ưu điểm trên màn hình máy tính nhưng lại là hạn chế khi người dùng sử dụng điện thoại di động và thậm chí khi sử dụng tivi thông minh thế hệ mới. Vì thế, lựa chọn giải pháp cài đặt giá tỷ lệ Max hoặc Min sẽ giúp bạn khắc phục hạn chế hiển thị nội dung trên tất cả màn hình. Ví dụ: với màn hình lớn, rộng, bạn có thể để giá trị full màn hình 100% và giá trị Max-width là 1000px. Điều này có nghĩa là nội dung sẽ tràn đầy màn hình nhưng nội dung không hiển thị tràn màn hình quá 1000px.

6. Lồng ghép thành phần

Giữa các yếu tố thành phần, yêu cầu nhất thiết có sự tương thích, phù hợp với nhau. Trong bố cục website, có nhiều yếu tố hoàn toàn phụ thuộc vào các thành phần khác, vì thế kiểm soát chúng sẽ không đơn giản là một thành phần đơn lẻ mà là cả hệ thống các yếu tố khác. Do đó, để hạn sự phụ thuộc các yếu tố với nhau, bạn nên gói gọn các thành phần vào một khối thống nhất và áp dụng nguyên tắc thiết kế clean, rõ ràng, đơn giản. Với những thành phần có kích thước lớn hơn, chúng có thể chứa các thành phần nhỏ hơn thì đây chính là mối quan hệ lồng ghép(nested) với nhau. Nguyên tắc này hoàn toàn đơn giản khi kết hợp với sự hỗ trợ của điểm ảnh như hình.

7. Thiết kế cho màn hình máy tính và thiết bị di động

Xét về kỹ thuật, hoàn toàn không có sự khác biệt lớn giữa thiết kế dành cho di động và thiết kế dành cho màn hình máy tính. Tuy nhiên, khi thiết kế với màn hình hiển thị trên điện thoại di động sẽ có nhiều điểm hạn chế hơn nếu bạn lựa chọn điểm bắt đầu với điện thoại di động. Thông thường, mọi người sẽ không phân vân, không gặp nhiều khó khăn khi bắt đầu với cả hai thiết bị này. Trong quá trình làm việc, bạn sẽ phát hiện ra những điểm giống và khác nhau của bản thiết kế giữa hai phiên bản khác nhau.

8. WebFont và hệ thống phông chữ

Sử dụng webfont cho website, bạn hoàn toàn không gặp phải quá nhiều khó khăn. Để sử dụng những phông chữ như Futura, Didot,…, hoàn toàn không khó nhưng đòi hỏi bạn có thời gian tìm kiếm, tải về và cài đặt vào hệ thống phông chữ. Ngược lại, sử dụng hệ thống font chữ có sẵn bạn có thể tiết kiệm thời gian tìm kiếm, cài đặt, mà chỉ cần lựa chọn và sử dụng giống như các phông chữ mặc định.

9.  Ảnh Bitmap và ảnh Vector

Hình ảnh bitmap được tạo từ sự sắp xếp các điểm ảnh gọi là pixels theo kiểu lát gạch hoặc ô lưới. Hình ảnh vector được tạo từ các đường thẳng và đường cong toán học gọi là vector, bao gồm cả các thông số về màu sắc và vị trí của ảnh.

Tùy vào mục đích sử dụng hình ảnh, bạn có thể lựa chọn các loại hình ảnh phù hợp. Nhưng lưu ý, hình ảnh bitmap thường có định dạng là jpg, png, gif, còn đối với hình ảnh vector là lựa chọn tốt nhất cho SVG ( Scalable Vector Graphics – chuẩn đồ họa vector có khả năng phong to thu nhỏ linh hoạt) hoặc phông chữ biểu tượng hình ảnh icon. Mỗi loại hình ảnh có ưu và nhược điểm khác nhau. Nhưng bạn cũng cần lưu ý, khi sử dụng ảnh đăng tải lên website, hình ảnh cần phải tối ưu hóa về kích thước, dung lượng ảnh. Hình ảnh chất lượng cao mà dung lượng càng nhỏ sẽ có lợi thế hơn rất nhiều.

Trên đây là những nguyên tắc cơ bản khi thiết kế website responsive mà WebDepTV.Com muốn chia sẻ với bạn đọc. Để hoàn thiện hơn kiến thức thiết kế website responsive, bạn đọc có thể theo dõi bài viết tiếp theo của chúng tôi để thấy ưu điểm thiết kế website responsive.

Sưu Tầm

0 awesome comments!
Read 553 times
Nguyễn Xuân Dũng

Nguyễn Xuân Dũng

Thiết kế website chuyên nghiệp theo chuẩn SEO

Liên hệ Trực tiếp để được Tư vấn đúng nhu cầu Thiết Kế Web của bạn: Tel: 046 292 7788 - Mobile: 093 636 6996

webdeptv.com | This email address is being protected from spambots. You need JavaScript enabled to view it.
046 292 7788 - 093 636 6996 / This email address is being protected from spambots. You need JavaScript enabled to view it.
Top
Facebook Chat