Giao diện thích ứng. Các cách triển khai khả năng thích ứng giao diện Thiết kế web responsive là gì
Người dùng Internet duyệt các trang web trên các thiết bị khác nhau với các kích cỡ màn hình khác nhau. Kích thước màn hình liên tục thay đổi, vì vậy điều quan trọng là trang web phải thích ứng với bất kỳ kích thước nào trong số đó. Có hai cách tiếp cận chính để tạo trang web dễ dàng thích ứng với các loại thiết bị khác nhau:
Thiết kế đáp ứng (RWD) - thiết kế đáp ứng - thiết kế một trang web với các giá trị thuộc tính nhất định, ví dụ: lưới bố cục linh hoạt, cho phép một bố cục hoạt động trên các thiết bị khác nhau;
Thiết kế thích ứng (AWD) - thiết kế thích ứng hoặc hiển thị động - thiết kế một trang web với các điều kiện thay đổi tùy thuộc vào thiết bị, dựa trên một số bố cục có chiều rộng cố định.
1. Kỹ thuật thiết kế đáp ứngTriết lý đằng sau thiết kế web đáp ứng là làm cho trang web dễ xem trên mọi thiết bị, bất kể kích thước màn hình. Cụm từ thiết kế đáp ứng được Ethan Marcotte đặt ra vào năm 2011. Tính năng chính của thiết kế web đáp ứng là nhờ có lưới linh hoạt, bố cục sẽ tự động phản hồi các thay đổi về kích thước màn hình, phồng lên hoặc co lại như một quả bóng bay.
Thiết kế Web đáp ứng kết hợp ba kỹ thuật - bố cục dựa trên lưới linh hoạt, hình ảnh linh hoạt và truy vấn phương tiện.
Tính linh hoạt của bố cục dựa trên việc sử dụng các đơn vị đo lường tương đối thay vì các giá trị pixel cố định, cho phép điều chỉnh chiều rộng cho phù hợp với không gian có sẵn.
Tính linh hoạt của nội dung văn bản đạt được bằng cách tính toán kích thước phông chữ tương ứng với kích thước phông chữ mặc định của trình duyệt là 16px, ví dụ: đối với kích thước cố định của font-size: 42px thì kích thước tương đối là 42px / 16px = 2.625em.
Vấn đề về hình ảnh linh hoạt được giải quyết bằng cách sử dụng quy tắc img (width: 100%; max-width: 100%;) cho tất cả hình ảnh trên trang web. Quy tắc này đảm bảo rằng hình ảnh không bao giờ rộng hơn vùng chứa của chúng và không bao giờ vượt quá kích thước thật của chúng trên màn hình lớn hơn.
Truy vấn phương tiện sửa đổi kiểu dựa trên đặc điểm của thiết bị liên quan đến hiển thị nội dung, bao gồm loại màn hình, chiều rộng, chiều cao, hướng và độ phân giải. Truy vấn phương tiện tạo ra thiết kế đáp ứng áp dụng các kiểu thích hợp cho từng kích thước màn hình.
Cơm. 1. Thiết kế đáp ứng Các kỹ thuật thiết kế đáp ứng bổ sung Đồ họa vector có thể mở rộng - Sử dụng hình ảnh SVG có tỷ lệ theo bất kỳ kích thước nào mà không làm giảm chất lượng và trông đẹp mắt trên màn hình Retina.
Giao diện thẻ - Sử dụng cái gọi là giao diện thẻ - hình chữ nhật với các góc tròn tượng trưng cho vùng chứa nội dung. Các khối như vậy là các đơn vị giao diện khép kín và dễ dàng di chuyển xung quanh bố cục.
Cơm. 2. Pinterest, bố cục dựa trên thẻ Chỉ giữ lại những thứ cần thiết là một kỹ thuật tốt, đặc biệt đối với thiết kế đáp ứng. Tạo các giao diện tối giản đáp ứng và thân thiện đang ngày càng trở nên phổ biến hiện nay.
Cơm. 3. Hotellook, sự tối giản trong thiết kế web Ưu tiên và ẩn nội dung chính xác - sử dụng các điều khiển ẩn, đặc biệt đối với các thiết bị có màn hình nhỏ. Cửa sổ bật lên, tab, menu ngoài khung vẽ và các kỹ thuật tương tự khác sẽ giúp giảm số lượng thành phần trên trang. Bằng cách giải phóng không gian khỏi các yếu tố không cần thiết, bạn sẽ làm cho giao diện trở nên thuận tiện và thân thiện với người dùng.
Tạo không gian có thể nhấp lớn cho các nút của bạn - diện tích có thể nhấp của nút càng lớn thì người dùng càng dễ dàng tương tác với nút đó.
Thêm tính tương tác vào giao diện của bạn - để phản hồi hành động của người dùng, tạo hành động phản hồi - hoạt ảnh sẽ hoạt động khi di chuột qua một phần tử trên thiết bị máy tính để bàn và khi chạm vào một phần tử trên thiết bị di động.
2. Tùy chỉnh khung nhìn bằng thẻ meta khung nhìnĐể ngăn trình duyệt di động dành cho hệ điều hành Android và iOS tự động thay đổi kích thước các trang trên trang web, một thẻ đặc biệt có thuộc tính name="viewport" sẽ được sử dụng. Thẻ này cho phép bạn đặt một giá trị cụ thể cho các tham số chiều rộng và tỷ lệ ban đầu:
—init-scale=1 có nghĩa là kích thước trang trong trình duyệt sẽ bằng 100% kích thước khung nhìn. Tức là tỷ lệ giữa pixel vật lý và pixel css sẽ là 1:1;
— width=device-width có nghĩa là chiều rộng trang sẽ bằng 100% chiều rộng cửa sổ của bất kỳ trình duyệt nào. Tức là chiều rộng của trang web tương ứng với chiều rộng của thiết bị nên không cần phải thu nhỏ lại.
Trong ví dụ này, nội dung trong cửa sổ trình duyệt sẽ lớn hơn gấp 2 lần so với kích thước vật lý của nó.
Thẻ cũng có thể được sử dụng để kiểm soát mức độ người dùng có thể tăng hoặc giảm độ rộng của trang:
Mã này sẽ cho phép bạn tăng chiều rộng trang lên giá trị bằng 3 lần chiều rộng của màn hình thiết bị và giảm nó xuống một nửa chiều rộng của màn hình thiết bị.
Bạn có thể từ chối khả năng mở rộng quy mô của người dùng bằng thuộc tính user-scalable:
3. Mẫu phổ quát
Hầu hết các bố cục được sử dụng để tạo thiết kế web đáp ứng đều thuộc một trong năm loại mẫu được xác định bởi Luke Wroblewski:
Chủ yếu là chất lỏng (Hầu hết cao su),
Column Drop (Các cột nằm dưới nhau),
Bộ chuyển đổi bố cục (Di chuyển bố cục),
Tinh chỉnh nhỏ (Những thay đổi nhỏ),
Tắt Canvas.
Trong một số trường hợp, một trang có thể sử dụng kết hợp các mẫu, chẳng hạn như Thả cột và Tắt Canvas.
Một bố cục phổ biến bao gồm chủ yếu là lưới cao su. Trên màn hình lớn hoặc có chiều rộng trung bình, kích thước của nó thường không thay đổi, trên màn hình lớn, chỉ điều chỉnh lề. Trên các màn hình nhỏ hơn, lưới cao su khiến bố cục được tính toán lại cho nội dung chính và các cột được đặt bên dưới cột kia. Ưu điểm của mẫu là chỉ yêu cầu một điểm kiểm soát giữa màn hình nhỏ và màn hình lớn. 
Các cột được đặt lần lượt theo chiều dọc nếu chiều rộng của cửa sổ không thể hiển thị hết nội dung. Kết quả là các cột sẽ được định vị theo chiều dọc bên dưới nhau. Việc lựa chọn điểm dừng cho mẫu bố cục này tùy thuộc vào nội dung và được xác định riêng cho từng tùy chọn thiết kế. 
Mẫu phản hồi nhanh nhất vì nó cung cấp nhiều điểm kiểm soát cho các màn hình có độ rộng khác nhau. Sự khác biệt chính với bố cục này là thay vì tính toán lại cây hiển thị và đặt các cột bên dưới nhau, nội dung sẽ được di chuyển. Do sự khác biệt đáng kể giữa các điểm dừng chính, việc duy trì bố cục này khó khăn hơn và bạn có thể phải thay đổi không chỉ bố cục tổng thể của nội dung mà còn cả các thành phần của nó. 
Mẫu thực hiện những thay đổi nhỏ đối với bố cục, chẳng hạn như điều chỉnh kích thước phông chữ, thay đổi kích thước hình ảnh hoặc di chuyển nội dung. Nó hoạt động tốt trên các bố cục một cột, chẳng hạn như các trang một trang và các bài viết có nhiều văn bản. 
Nội dung hiếm khi được sử dụng, chẳng hạn như các thành phần điều hướng hoặc menu ứng dụng, sẽ được đặt ngoài màn hình và chỉ hiển thị khi kích thước màn hình cho phép. Trên màn hình nhỏ hơn, nội dung sẽ mở ra bằng một cú nhấp chuột. 
Không giống như thiết kế đáp ứng, Thiết kế web thích ứng tập trung vào kích thước thiết bị. Nó sử dụng một số bố cục tĩnh cho các loại thiết bị khác nhau (thiết bị di động, máy tính bảng, máy tính để bàn), dựa trên các điểm kiểm soát (phá vỡ). Nghĩa là, bố cục tải ở kích thước cửa sổ trình duyệt thiết bị nhất định và quá trình chuyển đổi giữa các bố cục xảy ra đột ngột thay vì suôn sẻ.
Thông thường, bố cục đáp ứng có sáu tùy chọn bố cục tùy thuộc vào chiều rộng màn hình:
320
480
760
960
1200
1600.
Bố cục đáp ứng tập trung vào chức năng, nghĩa là thiết kế tính đến các tính năng của thiết bị, chẳng hạn như điều khiển cảm ứng cho thiết bị di động hoặc không gian rộng cho màn hình máy tính để bàn.
Kỹ thuật thiết kế đáp ứng cơ bảnDuy trì tính nhất quán – bất kỳ trang web nào cũng cần tạo dựng niềm tin với người dùng để họ cảm thấy thoải mái khi điều hướng và tương tác với nó. Thiết kế nhất quán có nghĩa là khi chuyển sang một trang khác trên một trang, người dùng không có cảm giác như đang ở một trang khác. Hãy chú ý đến các chi tiết nhỏ, xây dựng hệ thống phân cấp trực quan và làm nổi bật các yếu tố quan trọng bằng chữ in đậm. Sử dụng bảng màu nhất quán trên toàn bộ trang web, sử dụng lại các thành phần giống nhau cho các tình huống khác nhau, chẳng hạn như cùng một thiết kế thông báo bật lên.
Sử dụng lưới—cấu trúc 12 cột thích hợp hơn để kiểm soát độ rộng cột và khoảng cách giữa các cột.
5. Sự khác biệt giữa thiết kế web responsive và responsive là gì
Cơm. 4. Thiết kế đáp ứng và thích ứng trên các thiết bị khác nhau Để tạo bố cục đáp ứng, bạn sử dụng truy vấn phương tiện và kích thước tương đối của các thành phần lưới được chỉ định bằng % . Trong thiết kế đáp ứng, tập lệnh phía máy chủ trước tiên xác định loại thiết bị mà người dùng đang cố truy cập trang web trên (máy tính để bàn, điện thoại hoặc máy tính bảng), sau đó tải chính xác phiên bản của trang được tối ưu hóa nhất cho trang web đó. Các phần tử lưới có kích thước px cố định.
Do đó, sự khác biệt chính giữa các kỹ thuật này là thiết kế đáp ứng - một bố cục cho tất cả các thiết bị, thiết kế thích ứng - một bố cục cho từng loại thiết bị.
6. Các dịch vụ và công cụ hữu íchTrình mô phỏng Android dành cho Windows, Linux và Mac OS X. Trình mô phỏng iOS chỉ khả dụng cho người dùng Mac OS X và là một phần của gói Xcode (có thể tải xuống miễn phí từ Mac App Store).
Tập lệnh PHP chạy trên bất kỳ trang web nào sẽ phát hiện kích thước màn hình và điều chỉnh kích thước hình ảnh cho phù hợp, dẫn đến kích thước hình ảnh nhỏ trên màn hình nhỏ.
Các bảng tương ứng giữa kích thước vật lý của thiết bị và giá trị CSS về chiều cao và chiều rộng, cũng như giá trị tỷ lệ pixel cho thiết bị di động.
Một bộ sưu tập các trang web sử dụng truy vấn phương tiện và thiết kế web đáp ứng.
CSS framework dựa trên bố cục 12 cột, tối đa 960px. Được hỗ trợ bởi Chrome, Safari, Firefox, IE 7 trở lên, các phiên bản trình duyệt dành cho thiết bị di động.
Một bộ công cụ để phát triển các ứng dụng web. Ngôn ngữ LESS, bố cục thích ứng 12 cột, hỗ trợ cho thiết bị di động, máy tính bảng và màn hình, nhiều thành phần, nút, menu thả xuống, kiểu tùy chỉnh của trường nhập, danh sách, tiêu đề, nhãn, biểu tượng, cảnh báo, tab, thanh tiến trình, chú giải công cụ , “accordion”, “carousel”, v.v., các plugin Javascript khác nhau, hỗ trợ Giàn giáo, bao gồm áp dụng kiểu Bootstrap cho HTML đã tạo.
Bố cục thích ứng thay đổi thiết kế trang tùy thuộc vào hành vi của người dùng, nền tảng, kích thước màn hình và hướng thiết bị và là một phần không thể thiếu trong quá trình phát triển web hiện đại. Nó cho phép bạn tiết kiệm đáng kể và không phải vẽ thiết kế mới cho mỗi độ phân giải mà thay đổi kích thước và vị trí của từng phần tử.
Bài viết này sẽ xem xét các yếu tố chính của trang web và cách điều chỉnh chúng.
Điều chỉnh độ phân giải màn hìnhVề nguyên tắc, bạn có thể chia các thiết bị thành các loại khác nhau và thiết kế riêng cho từng loại, nhưng việc này sẽ mất quá nhiều thời gian và ai biết được tiêu chuẩn nào sẽ có trong 5 năm tới? Hơn nữa, theo thống kê, chúng ta có đầy đủ các giải pháp khác nhau:
Rõ ràng là chúng tôi sẽ không thể tiếp tục thiết kế riêng cho từng thiết bị. Nhưng sau đó phải làm gì?
Giải pháp từng phần: làm mọi thứ linh hoạtTất nhiên, đây không phải là một phương pháp hoàn hảo nhưng nó giúp loại bỏ hầu hết các vấn đề.
Ethan Marcotte đã tạo một mẫu đơn giản thể hiện việc sử dụng bố cục đáp ứng:
Thoạt nhìn có vẻ như mọi thứ đều dễ dàng, nhưng thực tế không phải vậy. Hãy nhìn vào biểu tượng:
Nếu bạn giảm toàn bộ hình ảnh, dòng chữ sẽ không thể đọc được. Do đó, để lưu logo, hình ảnh được chia thành hai phần: phần thứ nhất (hình minh họa) được dùng làm nền, phần thứ hai (logo) thay đổi kích thước tương ứng.
Phần tử h1 chứa hình ảnh làm nền và hình ảnh được căn chỉnh theo nền của vùng chứa (tiêu đề).
Hình ảnh linh hoạtLàm việc với hình ảnh là một trong những vấn đề quan trọng nhất khi làm việc với thiết kế đáp ứng. Có nhiều cách để thay đổi kích thước hình ảnh và hầu hết chúng đều khá đơn giản để thực hiện. Một giải pháp là sử dụng độ rộng tối đa trong CSS:
Img (độ rộng tối đa: 100%;)
Chiều rộng tối đa của hình ảnh là 100% chiều rộng của màn hình hoặc cửa sổ trình duyệt, do đó chiều rộng càng nhỏ thì hình ảnh càng nhỏ. Lưu ý rằng max-width không được hỗ trợ trong IE, vì vậy hãy sử dụng width: 100% .
Phương pháp được trình bày là một lựa chọn tốt để tạo hình ảnh thích ứng, nhưng bằng cách chỉ thay đổi kích thước, chúng ta sẽ giữ nguyên trọng lượng của hình ảnh, điều này sẽ làm tăng thời gian tải trên thiết bị di động.
Một cách khác: hình ảnh đáp ứngKỹ thuật được Filament Group giới thiệu không chỉ thay đổi kích thước hình ảnh mà còn nén độ phân giải của hình ảnh trên màn hình nhỏ để tăng tốc độ tải.
Kỹ thuật này yêu cầu một số tệp có sẵn trên Github. Đầu tiên chúng ta lấy tệp JavaScript ( rwd-images.js), tài liệu .htaccess Và rwd.gif(tệp hình ảnh). Sau đó, chúng tôi sử dụng một số HTML để liên kết độ phân giải lớn và nhỏ: đầu tiên là một hình ảnh nhỏ có tiền tố .r(để cho thấy rằng hình ảnh phải phản hồi), sau đó liên kết đến hình ảnh lớn bằng data-fullsrc:
Đối với bất kỳ màn hình nào rộng hơn 480 px, hình ảnh có độ phân giải cao hơn sẽ được tải ( lớnRes.jpg) và trên màn hình nhỏ nó sẽ tải ( nhỏRes.jpg).
iPhone và iPod Touch có một đặc điểm: thiết kế được tạo cho màn hình lớn sẽ chỉ thu gọn trong trình duyệt có độ phân giải thấp mà không cần cuộn hoặc bố cục di động bổ sung. Tuy nhiên, hình ảnh và văn bản sẽ không hiển thị:
Để giải quyết vấn đề này, hãy sử dụng thẻ meta:
Nếu tỷ lệ ban đầu bằng 1 thì chiều rộng của hình ảnh sẽ bằng chiều rộng của màn hình.
Cấu trúc bố cục trang có thể tùy chỉnhĐối với những thay đổi đáng kể về kích thước trang, bạn có thể cần thay đổi cách sắp xếp tổng thể của các thành phần. Điều này có thể được thực hiện một cách thuận tiện thông qua một tệp kiểu riêng biệt hoặc hiệu quả hơn thông qua truy vấn phương tiện CSS. Sẽ không có bất kỳ vấn đề gì vì hầu hết các kiểu dáng sẽ vẫn giữ nguyên và chỉ một số ít sẽ thay đổi.
Ví dụ: bạn có tệp kiểu chính chỉ định #wrapper , #content , #sidebar , #nav cùng với màu sắc, nền và phông chữ. Nếu kiểu chính làm cho bố cục của bạn quá hẹp, ngắn, rộng hoặc cao, bạn có thể xác định điều này và đưa vào các kiểu mới.
style.css (chính):
/* Các kiểu cơ bản sẽ được kế thừa bởi style sheet con */ html,body( nền... font... color... ) h1,h2,h3() p, blockquote, pre, code, ol, ul () /* Các phần tử cấu trúc */ #wrapper( width: 80%; lề: 0 auto; nền: #fff; đệm: 20px; ) #content( width: 54%; float: left; lề-phải: 3%; ) # sidebar-left( chiều rộng: 20%; float: trái; lề phải: 3%; ) # sidebar-right( chiều rộng: 20%; float: left; )
mobile.css (con):
#wrapper( width: 90%; ) #content( width: 100%; ) #sidebar-left( width: 100%; clear: cả hai; /* Kiểu bổ sung cho thiết kế mới */ border-top: 1px Solid #ccc ; lề-top: 20px; ) #sidebar-right( width: 100%; clear: cả hai; /* Kiểu bổ sung cho bố cục mới của chúng ta */ border-top: 1px Solid #ccc; Margin-top: 20px; )
Trên màn hình rộng, các thanh bên trái và phải vừa khít với nhau. Trên màn hình hẹp hơn, các khối này được đặt chồng lên nhau để thuận tiện hơn.
Truy vấn phương tiện CSS3Hãy xem cách bạn có thể sử dụng truy vấn phương tiện CSS3 để tạo ra các thiết kế đáp ứng. chiều rộng tối thiểu chỉ định chiều rộng tối thiểu của cửa sổ trình duyệt hoặc màn hình mà các kiểu nhất định sẽ được áp dụng. Nếu bất kỳ giá trị nào nhỏ hơn min-width thì kiểu sẽ bị bỏ qua. chiều rộng tối đa thì ngược lại.
@media screen và (min-width: 600px) ( .hereIsMyClass ( width: 30%; float: right; ) )
Truy vấn phương tiện sẽ chỉ hoạt động khi chiều rộng tối thiểu lớn hơn hoặc bằng 600 px.
@media screen và (độ rộng tối đa: 600px) ( .aClassforSmallScreens ( clear: cả hai; cỡ chữ: 1.3em; ) )
Trong trường hợp này lớp ( aClassforSmallscreens) sẽ hoạt động khi chiều rộng màn hình nhỏ hơn hoặc bằng 600 px.
Mặc dù chiều rộng tối thiểu và chiều rộng tối đa có thể áp dụng cho cả chiều rộng màn hình và chiều rộng cửa sổ trình duyệt, nhưng chúng tôi có thể chỉ cần làm việc với chiều rộng thiết bị. Ví dụ: bỏ qua các trình duyệt được mở trong một cửa sổ nhỏ. Bạn có thể sử dụng chiều rộng thiết bị tối thiểu và chiều rộng thiết bị tối đa cho việc này:
@media screen và (max-device-width: 480px) ( .classForiPhoneDisplay ( font-size: 1.2em; ) ) @media screen và (min-device-width: 768px) ( .minimumiPadWidth ( clear: cả hai; lề dưới : 2px rắn #ccc; ) )
Đặc biệt đối với iPad, truy vấn phương tiện có thuộc tính định hướng, giá trị của nó có thể là phong cảnh(ngang), hoặc chân dung(thẳng đứng):
Màn hình @media và (hướng: ngang) ( .iPadLandscape ( chiều rộng: 30%; float: phải; ) ) @media màn hình và (hướng: dọc) ( .iPadPortrait ( clear: cả hai; ) )
Bạn cũng có thể kết hợp các giá trị truy vấn phương tiện:
@media screen và (min-width: 800px) và (max-width: 1200px) ( .classForaMediumScreen ( nền: #cc0000; width: 30%; float: right; ) )
Mã này sẽ chỉ được thực thi cho màn hình hoặc cửa sổ trình duyệt có chiều rộng từ 800 đến 1200 px.
Bạn có thể tải một trang tính cụ thể với các kiểu cho các giá trị truy vấn phương tiện khác nhau như thế này:
JavaScript
Nếu trình duyệt của bạn không hỗ trợ truy vấn phương tiện CSS3 thì việc thay thế kiểu có thể được thực hiện bằng jQuery:
$(document).ready(function())( $(window).bind("resize", thay đổi kích thướcWindow); function thay đổi kích thướcWindow(e)( var newWindowWidth = $(window).width(); // Nếu chiều rộng là dưới 600 px, biểu định kiểu trên thiết bị di động được sử dụng if(newWindowWidth< 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth >600)( // Nếu chiều rộng lớn hơn 600 px, biểu định kiểu máy tính để bàn sẽ được sử dụng $("link").attr((href: "style.css")); ) ) ));
Hiển thị nội dung tùy chọnKhả năng thu nhỏ và sắp xếp lại các phần tử để vừa với màn hình nhỏ rất tuyệt vời. Nhưng đây không phải là lựa chọn tốt nhất. Thiết bị di động thường có nhiều thay đổi hơn: điều hướng đơn giản hóa, nội dung tập trung hơn, danh sách hoặc hàng thay vì cột.
May mắn thay, CSS cung cấp cho chúng ta khả năng hiển thị và ẩn nội dung một cách dễ dàng đến không ngờ.
Không trưng bày;
display: none được sử dụng cho các đối tượng cần ẩn.
Đây là đánh dấu của chúng tôi:
Nội dung chính Thanh bên trái Thanh bên phải
style.css (chính):
#content( chiều rộng: 54%; float: trái; lề-phải: 3%; ) #sidebar-left( chiều rộng: 20%; float: left; lề-phải: 3%; ) #sidebar-right( chiều rộng: 20 %; float: left; ) .sidebar-nav( display: none; )
mobile.css (được đơn giản hóa):
#content( chiều rộng: 100%; ) #sidebar-left( display: none; ) #sidebar-right( display: none; ) .sidebar-nav( display: inline; )
Ví dụ: nếu kích thước màn hình giảm, bạn có thể sử dụng tập lệnh hoặc tệp tạo kiểu thay thế để tăng khoảng trắng hoặc thay thế điều hướng để thuận tiện hơn. Do đó, có khả năng ẩn và hiển thị các thành phần, thay đổi kích thước của hình ảnh, các thành phần, v.v., bạn có thể điều chỉnh thiết kế cho phù hợp với mọi thiết bị và màn hình.
Cách Yandex sử dụng dữ liệu và học máy của bạn để cá nhân hóa các dịch vụ -.
Giao diện người dùng thích ứngTrong tác phẩm được trình bày, giao diện web thích ứng đã được cải tiến, phần chính của giao diện này được phát triển trong khóa học “Giao diện thích ứng để làm việc với các bảng quyết định”, tác giả - Derbeneva E.E.
So với phiên bản trước, các trang xuất hiện hiển thị lịch sử làm việc với hệ thống và phản hồi từ các khách hàng cụ thể cũng như một trang có thông tin về các cơ sở có thể hoạt động trong hệ thống này. Làm việc với đầu vào mở rộng của phản hồi của khách hàng cũng đã được triển khai.
Việc trao đổi dữ liệu với giao diện người dùng được thực hiện bằng công nghệ Ajax, sử dụng định dạng JSON. Về phía máy khách, một kết nối tới DBMS được tạo và các truy vấn SQL được tạo.
Để làm việc với các bảng quyết định, người dùng gọi các thủ tục và hàm mình cần, nằm trong gói PKG_GET_ANSWER. Nói chung, khi gọi, người dùng cho biết tên của hệ thống, khu vực và khu vực con, số bàn mà người dùng làm việc, cũng như id khách hàng. Kết quả là xuất ra các bảng tạm thời, dữ liệu từ đó có thể được truy xuất bằng truy vấn SQL thích hợp.
Trang chính của giao diện (Hình 18-20) là một menu mà qua đó người dùng có thể đăng nhập vào hệ thống và chọn lĩnh vực và lĩnh vực kiến thức thích hợp. Người dùng mới có cơ hội đăng ký. Nếu muốn, người dùng có thể tải tài liệu đào tạo về cả bảng quyết định và giao diện thao tác.
Hình 18 - trang giao diện chính
Hình 19 - Trang giao diện chính
Hình 10 - trang chính
Khi xác thực (Hình 20), người dùng chọn vùng kiến thức thích hợp từ danh sách được xây dựng động gồm tất cả các vùng có sẵn.
Hình 20 - xác thực
Mẫu đăng ký trông như thế này (Hình 21). Chỉ có ba trường được yêu cầu: tên, thông tin đăng nhập và mật khẩu.
Hình 21 - đăng ký người dùng
Nếu xác thực thành công, người dùng sẽ được đưa đến trang thứ hai (Hình 22). Nó chứa một danh sách khách hàng được xây dựng động. Để đảm bảo tính năng động, các tham số cần thiết (tên hệ thống, khu vực, khu vực con, ID người dùng) được chuyển đến trang trên thanh địa chỉ.
Hình 22 - cơ sở khách hàng
Nếu cần, người dùng có thể thêm và xóa máy khách (Hình 23). Những thao tác này được thực hiện với bảng Data_Clients.
Hình 23 - đăng ký khách hàng
Bằng cách nhấp vào dòng chữ Bases ở góc trên bên trái, một trang sẽ mở ra với các base của hệ thống này (Hình 24). Người dùng chỉ có quyền xem và không thể thay đổi dữ liệu.
Hình 24 - trang có đế
Trên trang dữ liệu khách hàng, các cột ANS và HIS chứa các liên kết đến các trang hiển thị dữ liệu về tất cả các phản hồi của một khách hàng cụ thể và lịch sử công việc của khách hàng đó với hệ thống, tương ứng (Hình 25-26).
Hình 25 - trang phản hồi của khách hàng
Hình 26 - trang lịch sử khách hàng
Người dùng có thể xóa một số hàng nhưng không có quyền thêm dữ liệu mới hoặc thay đổi dữ liệu hiện có theo cách thủ công.
Cột CURRENT_PROGRESS chứa số của bảng quyết định tiếp theo. Và khi nhấp vào liên kết, bạn sẽ đến trang điền thông tin (Hình 27-28). Các tham số là: tên hệ thống, khu vực, khu vực kiến thức, số bảng và mã định danh khách hàng.
Hình 27 - khảo sát khách hàng (tùy chọn với đầu vào hạn chế)
Hình 28 - khảo sát khách hàng (tùy chọn với đầu vào hạn chế)
Trong tab đầu tiên, khi tải, một biểu mẫu sẽ được tạo để điền vào bảng quyết định hiện tại. Khi bạn nhấp vào nút Gửi, các hàng được tạo từ lựa chọn của người dùng sẽ được chèn vào bảng DỮ LIỆU. Tab thứ hai chứa một bảng có dữ liệu về các lần hoàn thành bảng trước đó cho khách hàng này; thông tin này nằm trong bảng DỮ LIỆU.
Hình 29 - Hiển thị bảng quyết định
Tab thứ ba chứa bảng ra quyết định cho biểu mẫu hiện tại cần điền (Hình 29). Phần trên của bảng là các điều kiện và tổ hợp các điều kiện, phần dưới là các hành động và tổ hợp các hành động. Dữ liệu được truy vấn từ một bảng tạm thời được tạo bởi thủ tục PRC_TRANS().
Sau khi hoàn thành công việc, một trang sẽ mở ra với các kết quả: bước, tên bảng, hành động, các trường giá trị của các bảng quyết định đã thông qua được tải từ lịch sử của máy khách (Hình 30).
Hộp hiển thị các hoạt động có giá trị sản xuất cao nhất.
Hình 30 - trang kết quả
Hiện tại, khoảng 11-12% trong số 100.000 trang web được truy cập nhiều nhất có phản hồi và chắc chắn rằng con số này sẽ tăng lên trong vài năm tới.
Khi ngày càng có nhiều tổ chức xắn tay áo đón nhận thực tế của web đa thiết bị, bạn nên xem xét một số chiến lược được sử dụng để đạt được niết bàn:
Hiện đại hóa thích ứngThiết kế lại đáp ứng là quá trình sử dụng một trang web chỉ dành cho máy tính để bàn hiện có và về cơ bản là "tu sửa lại nó để đáp ứng".
Dan Cederholm
Đối với hầu hết các tổ chức, việc tạo ra một thiết kế mới trên quy mô lớn từ đầu thậm chí còn không được xem xét. Đây là lý do tại sao hiện đại hóa đáp ứng là một cách tiếp cận phổ biến để tạo ra trải nghiệm tốt cho thiết bị di động.
Thuận lợi- Tương đối nhanh.
Có khá nhiều cách để thực hiện hiện đại hóa đáp ứng, chiến lược này có thể là thêm tệp Small-screens.css vào trang web. Bất chấp ví dụ khá thô sơ này, hiện đại hóa thích ứng vẫn là một lựa chọn hấp dẫn đối với nhiều tổ chức vì nó không yêu cầu xây dựng lại mọi thứ từ đầu. - Thân thuộc.
Không gây nhầm lẫn cho người dùng. Mọi người đã dành nhiều năm để làm quen với giao diện và bằng cách hiện đại hóa giao diện hiện có, các tổ chức sẽ duy trì cách tiếp cận quen thuộc đồng thời cải thiện cuộc sống của mọi người bằng thiết bị di động. - Tổ chức nhanh hơn.
Về mặt chính trị mà nói, hiện đại hóa giao diện sẽ an toàn hơn là bắt đầu lại từ đầu. Sẽ có ít tranh luận hơn về việc chọn màu xanh lá cây nào, sử dụng những bức ảnh stock tầm thường nào và ban quản lý sẽ không phải vặn vẹo tay. Điều này cho phép các nhóm khởi chạy các trang web đáp ứng nhanh hơn.
- Chỉ ảnh hưởng một phần nhỏ.
Một lần nữa, có rất nhiều lựa chọn để sửa sang lại, nhưng mục tiêu của hầu hết chúng là “làm cho nó đẹp hơn”. Bằng cách tập trung vào việc thiết kế lại bố cục, các thiết kế lại thường bỏ lỡ vô số yếu tố khác cần được xem xét khi tạo ra một thiết kế thành công cho nhiều loại thiết bị. - 10 lít nước trong bình ba lít.
Vì các trang web dành cho máy tính để bàn chỉ được thiết kế cho máy tính để bàn (và thường tồn tại trong thời gian dài) nên chúng có thể chứa nhiều nội dung lộn xộn. Và vì quá trình hiện đại hóa chủ yếu bao gồm việc điều chỉnh lại bố cục nên hầu hết các vấn đề về nội dung đều không được tính đến đầy đủ. - Hiệu suất.
Có điều gì đó kỳ lạ khi viết mã để hỗ trợ tốt hơn cho các thiết bị nhỏ. Loại bỏ những thứ không cần thiết có thể đi quá xa, nhưng nếu không tập trung vào năng suất thì nó sẽ không tự phát triển được. - Hỗ trợ tồi tệ nhất.
Truy vấn phương tiện, ban đầu được thiết kế cho máy tính để bàn, được hỗ trợ kém trên hầu hết các thiết bị di động. - Sửa chữa tạm thời.
Tôi cảm thấy muốn chết khi nghe mọi người yêu cầu tôi “đáp ứng” điều gì đó, như thể đó chỉ là một hộp kiểm trong kế hoạch dự án (mà đôi khi thực tế là như vậy). Kiểu suy nghĩ hạn chế này bỏ lỡ những cơ hội thực sự mà thiết kế đáp ứng mang lại.
Phiên bản di động mang đến cho bạn cơ hội gieo hạt giống sẽ phát triển từ trang web cũ của bạn.
Theo thời gian, một trang web lỗi thời có thể bị xóa và trang web đó sẽ phát triển từ trạng thái ưu tiên thiết bị di động, phản hồi nhanh và có tính đến các xu hướng trong tương lai.
- Nguy cơ thấp.
Hầu hết các tổ chức vẫn coi lưu lượng truy cập từ thiết bị di động là thiểu số. Vì vậy, việc tung ra một trang web đáp ứng trên thiết bị di động cho phép các tổ chức này thử nghiệm tình hình mà không cần phải đi sâu vào chủ đề trước. - Một cơ hội để học cách linh hoạt.
Các nhà thiết kế có thể học cách suy nghĩ linh hoạt hơn. Các nhà phát triển sẽ tìm hiểu vô số thủ thuật của thiết bị Android. Người quản lý có thể tìm ra cách tránh xa sự hoàn hảo của pixel. Một trang web dành cho thiết bị di động đáp ứng có thể là một hộp cát tuyệt vời cho việc học tập. - Cơ sở hạ tầng.
Các nhóm có thể tìm hiểu cách giải quyết các vấn đề về quản lý nội dung, chẳng hạn như tạo hình ảnh, một lần và mãi mãi - Loại bỏ phần thừa.
Cách tiếp cận này mang đến cơ hội tuyệt vời cho các nhóm tự hỏi “chúng ta có thực sự cần điều này không” đồng thời tập trung vào hiệu suất. Tại sao? Bởi vì trọng tâm chính của họ là cải thiện trải nghiệm người dùng trang web của họ trên thiết bị di động. - Tương lai là các trang web ưu tiên thiết bị di động.
Mặc dù ban đầu thiếu nội dung hoặc chức năng, nhưng nếu có đủ thời gian và nỗ lực, các trang web dành cho thiết bị di động này cuối cùng có thể thay thế tổ tiên toàn trang của chúng.
- Nó vẫn là một trang web di động.
Cho dù có đáp ứng hay không, cách tiếp cận này vẫn còn tồn tại một số nhược điểm lớn của trang web dành cho thiết bị di động: các vấn đề về chuyển hướng URL, quản lý nội dung, nội dung nhất quán, tính nhất quán, tối ưu hóa SEO và các vấn đề khác. - Sửa chữa tạm thời.
Nhiều trang web dành cho thiết bị di động được tạo ra dưới dạng Band-Aid - để cầm máu. Những trang web như vậy được tạo ra với mục đích giảm lưu lượng truy cập ngày càng tăng đến từ các thiết bị di động. Những giải pháp này có thể vẫn đáp ứng được nhu cầu hiện tại, nhưng với xu hướng trong tương lai, chúng khó có thể giúp ích cho bạn về lâu dài. - Khả năng héo đi trên cây nho.
Một số tổ chức có thể bắt đầu những dự án như vậy, mới thực hiện được nửa chặng đường và sau đó bỏ dở toàn bộ cho đến khi ngân sách năm tiếp theo được thông qua. - Thiết kế cho màn hình nhỏ.
Vì trọng tâm ban đầu là trên màn hình nhỏ nên sau này việc chuyển giao diện sang màn hình lớn hơn mà không làm giảm chất lượng có thể là một thách thức.
sai sót - 50 sắc thái không hoàn hảo.
Cách tiếp cận này có thể thất bại vì người dùng sẽ phải đối mặt với giao diện Frankenstein vừa cũ vừa mới. - Khả năng héo trên cây nho.
Những loại dự án này cần có mục tiêu cuối cùng rõ ràng, nếu không chúng có thể bị mắc kẹt trong luyện ngục mãi mãi. - Kỹ thuật cùng tồn tại.
Điều gì xảy ra khi một mô-đun sử dụng các công nghệ và kỹ thuật mới nhất va chạm trực diện với một mô-đun lỗi thời? Có rất nhiều thách thức về mặt kiến trúc đối với cách tiếp cận này.
Đây là bản dịch bài viết có tựa đề "Chiến lược đáp ứng" của Brad Frost. Được dịch bởi UXDepot với sự đồng ý của tác giả.
PS từ người dịch: Tôi hy vọng bạn thích bài viết này. Chúng tôi sẽ rất vui nếu bạn chỉ ra bất kỳ lỗi nào trong bản dịch để chúng tôi có thể sửa chữa kịp thời. Viết thư cho chúng tôi tại [email được bảo vệ], Vui lòng:)
