Họ Đã Làm Thế Nào: Shopify - Tất Cả Là Về Những Chi Tiết

() translation by (you can also view the original English article)

Nếu bạn chưa bao giờ nghe nói về Shopify trước đây, có lẽ bạn đã sống quá phớt lờ rồi. Shopify là một trong những dịch vụ phổ biến nhất cho việc tạo ra các giải pháp thương mại điện tử trực tuyến, và họ gần đây đã thiết kế lại trang web của họ.

Hôm nay, chúng ta sẻ xem qua một số chi tiết tốt hơn của việc tái thiết kế, và nói một chút về cách làm sao để tái thiết kế thành công. Cùng nhau dấn thân vào nào!

Tất cả về thiết kế tự phản hồi

Sự chuyển đổi sang thiết kế tự phản hồi là thay đổi chủ yếu Shopify đã thực hiện trong lần tái thiết kế này, và mức độ chi tiết của mỗi breakpoint

Shopify là một ví dụ điển hình của quyết định thiết kế dựa trên kích thước màn hình. Hãy nhìn vài ví du, bắt đầu với trang chủ.

Xuyên suốt bài này, chúng ta sẽ dùng cụm từ mobile để tham chiếu đến breakpoint nhỏ nhất, "tablet" (máy tính bảng) để tham chiếu đến kích thước breakpoint kế cận, và "desktop" để tham chiếu đến những breakpoint lớn hơn. Có nhiều hơn 3 breakpoint trong thiết kế này, nhưng những breakpoint này cho chúng ta một framework để suy nghĩ về các thiết bị.

Trang chủ, tiêu đề

Điện thoại di động

Với kích thước điện thoại di động, chúng ta thấy một nút kêu gọi hành động rõ ràng, Get started (Bắt đầu nào), nút đó lặp lại hai lần. Chúng ta cũng thấy một phiên bản tối giản của logo Shopify, một tagline nằm ở giữa trung tâm, và một nhóm thông tin dàn trải theo hàng dọc có màu xanh lá cây với một tính năng của một khách hàng Shopify. Menu theo phong cách hamburger (bánh mì kẹp 3 gạch) được đặt trên cùng bên trái của thanh tiêu đề.

Máy tính bảng

Ngay khi chúng ta chuyển đến breakpoint cho tablet, chúng ta có thể thấy rằng các phần ưu tiên tách khỏi việc dàn trải theo chiều thẳng đứng, và thay vào đó nội dung được bố trí theo chiều ngang. Mức độ chi tiết, hoặc "độ phân giải nội dung", tăng lên; chúng ta thấy một logo chi tiết hơn (vẫn canh giữa), chữ lớn hơn, và ảnh của khách hàng Shopify hiển thị chi tiết hơn.

Có lẽ thú vị nhất, nội dung màu xanh lá tách ra từ nhóm nội dung thẳng đứng sang nằm ngang, trôi về phía bên phải tiêu đề. Chúng tôi cũng thấy nút Login in nằm kế nút call-to-action (kêu gọi hành động) nằm trên cùng của header. Ở kích thước của máy tính bảng, chúng ta vẫn thấy menu phong cách hamburge.r

Desktop (máy tinh thường)

Mức độ chi tiết cao nhất của header có thể thấy là trong phiên bản desktop của header. Logo canh lề trái, và menu phong cách hamburger được thay thế với một menu rõ ràng. Chúng ta vẫn giữ được cách trình bày theo phương ngang được hiển thị trên tablet. Ở bên trái, phần kêu gọi hành động Get Started (Hãy bắt đầu) được biến đổi thành một nút nộp biểu mẫu, với một trường nhập chữ cho người dùng nhập địa chỉ email. Bên dưới đó, chúng ta thấy một phần nội dung, "Được tin dùng bởi 100,000 chủ cửa hàng."

Thảo luận

Header là một tình huống thực tiễn để đưa ra quyết định cho mobile. Thành phần quan trong nhất nào không bao giờ được bỏ đi là gì? Thành phần nào thích hợp cho từng breakpoint và thiết bị mà thường thích hợp với breakpoint đó là gì? Shopify đã chọn, ví du, để dùng hình ảnh của một khách hàng Shopify ở tất cả breakpoint, nhưng chỉ hiện thị thông điệp về số lượng "Được tin tưởng bởi 100,000 chủ cửa hàng" trên desktop. Những quyết định kiểu này là từ cấp cao hơn và tập trung nhiều hơn về tính thẫm mỹ.

*Chú ý: khi chúng tôi bắt đầu viết bài này, Shopify đã cập nhật con số này lên 120,000.

Điểm thưởng: Sử dụng thành phần `<picture>` và hình ảnh Data-URI

Nên chú ý rằng Shopify đang sử dụng nhiều kỹ thuật thiết kế tự phản ứng thân thiện với tiêu chuẩn web, chẳng hạn như dùng thành phần <picture>. Đây là markup cho hình ảnh của Corrine Anestopoulos:

<picture class="merchant-header__photo js-window-loading">
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="/assets2/homepage/homepage-person@desktop-4f0656677d8cda087a8df30e0d18c41a.png, /assets2/homepage/homepage-person@desktop-2x-452c196f174ecb74a2ec50f660e36af0.png 2x" media="(min-width: 990px)">
  <source srcset="/assets2/homepage/homepage-person@tablet-bb9c6db8102779be1709b489c8e46208.png, /assets2/homepage/homepage-person@tablet-2x-cd42bc0f6914581344be9bbc13f76e05.png 2x" media="(min-width: 750px)">
  <!--[if IE 9]></video><![endif]-->
  <img srcset="/assets2/homepage/homepage-person@mobile-0bd643463b033a47b989120d96348c0f.png, /assets2/homepage/homepage-person@mobile-2x-c4ea79e2203797bff7c24cf823c271f4.png 2x" alt="Shopify Merchant, Corrine Anestopoulos">
</picture>

Thành phần <picture> tải rất nhiều hình ảnh có độ phân giải khác nhau dựa trên các độ phân giải của thiết bị, để tránh những sự cố như tải 2 lần, làm dụng background-image của CSS, và non-semantic loading của JavaScript. Điều này cho phép các thiết bị với độ phân giải màn hình cao yêu cầu những hình ảnh có độ phân giải cao hơn; chú ý rằng bạn sẽ không tìm ra những hình ảnh đã được pixel hoá thông qua bất kỳ trang nào trên bản tái thiết kế của Shopify.

Shopify cũng đang sử dụng data-uri đã mã hoá theo base-64 để xác định các hình ảnh trong thiết kế, gồm những kết cấu đơn giản trên khối màu xanh lá trong phần header (đầu trang). Điều này tránh được một yêu cầu HTTP không cần thiết, và đặc biệt hiệu quả cho những hình ảnh UI có chi tiết nhỏ hơn, chúng không thể biến đổi thành SVG được và những mô hình lặp lại.

Đang nói đến SVG, logo của Shopify cũng sử dụng data-uri mã hoá theo base-64 để định nghĩa một hình SVG. Điều này hiệu quả với phong cách tương tự như các hình ảnh mã hoá theo uri trước đó.

Điều hướng

Phần điều hướng chủ đạo của mobile chủ yếu dựa vào phần sidebar đã được ẩn đi khỏi màn hình, và chỉ xuất hiện khi menu hamburger được nhấn hoặc chạm vào.

Phần hoạt hình chuyển động kèm theo sử dụng transform và transformX , kết hợp với những quy tắc sau đây:

1	transition: transform 0.6s cubic-bezier(0.66, 0, 0.41, 1);

Bản thân của ngăn trượt được xét position: fixed, với quy tắc overflow-y:scroll. Khi ngăn trưỡt được mở, thành phần body nhận một lớp js-drawer-open, được xét height sang 100% và overflow sang hidden. Điều này ngăn người dùng cuộn nội dung trong khi phần điều hướng đang mở.

Phần điều hướng thứ hai hiện diện trên vào trang bên trong, nó đơn giản chỉ là một thành phần <select> được trang trí. Đây là CSS đã dùng để trang trí thành phần <select>:

.nav__mobile__select { 
    width: 100%; 
    background: transparent url("data:image/svg+xml;base64,PCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3…wIDUuMTkyLDMuNzM1IDguODY1LDAuMDEgMTAuMjg5LDEuNDE0IAkiLz4KPC9nPgo8L3N2Zz4K") no-repeat right center; 
    border: none; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    -ms-appearance: none; 
    -o-appearance: none; 
    appearance: none; 
    color: #767676; 
    }

Một lần nữa, chúng ta nhìn thấy kỹ thuật data-uri được sử dụng cho mũi tên xuống nằm bên trái của phần chọn lựa, cũng như quy tắc appearance, nó định nghĩa quy tắc cơ bản của trình duyệt.

Cùng với menu chính được sử dụng bên dưới cho cả breakpoint của tablet và mobile, nhưng menu thứ hai chỉ được dùng bên dưới breakpoint của mobile. Ở breakpoint cho desktop, các menu được hiển thị rõ ràng, với menu thứ hai theo cấp độ trang đang xuất hiện ở trên cùng của trang. Thanh nav tận dung Headroom, một plugin của JavaScript để kiểm soát phần hiển thị của thanh điều hướng cố định dựa trên những hành động khác nhau. Ví dụ, trên trang nội tuyến, thanh điều hướng chính ẩn khi người dùng cuộn xuống và chỉ có thanh điều hướng thứ hai xuất hiện, nhưng khi người dùng cuộn trở lại thì thanh điều hướng chính lại xuất hiện.

Đang nói đến menu trượt, Shopify đã chọn một chiến lược thú vị cho việc phản hồi với các nút chọn kêu gọi hành động, một ngăn trượt xuất hiện từ bên phải của màn hình với một menu. Ngăn trượt này xuất hiện trên cả tablet và mobile; trên desktop, các trường nhập liệu của form được thả từ trên xuống của một màn hình bán trong suốt với nền đen, theo phong cách cửa sổ modal.

Trang "Sell Online" (Bán hàng trực tuyến)

Trang Sell Online mang đến một số cân nhắc đặc biệt thú vị về thiết kế tự phản hồi.

Tiêu đề kêu gọi hành động

Hình ảnh tiêu đề là việc đầu tiên cần xem xét của thiết kế tự thích ứng (responsive), khi nó thay đổi kích thước tại mỗi breakpoint. Nhưng là sự thay đổi khéo léo hơn so với breakpoint của máy desktop. Thay vì chỉ cung cấp một nút Create your store, một form với 3 trường nhập liệu xuất hiện, đề nghị người dùng đăng ký và tạo một cửa hàng trong một lần submit (nộp form). Điều này đi theo cùng mô típ của phần kêu gọi hành động ở trang chủ.

Phần nội dung theo dạng trượt (slider)

Một module nội dung khác được lặp lại ở nhiều nơi hiển thị trên trang Sell Online (bán hàng trực tuyến) Tại breakpoint cho điện thoạiị di dôngm, module ià phần thiết yếu cho một accordion của những phần nội dung, mỗi cái có tiêu dề và một nút + cho phép khám phá phần đó. Khi được khám phá, người dùng có thể nhấn hoặc chạm nút - để giấu phần đó đi.

Tuy nhiên, tại các breakpoint của desktop(máy tính) và tablet(máy tính bảng), module thay đổi thành một nút định hướng nằm ngang chi tiết hơn.

Mỗi nút trong phần điều hướng tương tác với một nội dung. Nút copy thay đổi từ những tiêu đề dài và nhiều mô tả hơn đến các từ đơn lẻ đi kèm bênh cạnh một icon. Bản thân các phần nôi dung nổi bật với các hình ảnh lớn hơn được tương tác với tiêu đề của các phần.

Mô hình tương tự hiển thị hai lần trên trang Sell Online (Bán trực tuyến). Accordion cũng được sử dụng lại ở mọi nơi, ở breakpoint ở trên trang Features. Tuy nhiên, một khác biệt thú vị là phần accordion không phải luôn đồng hành bên cạnh với những phần nút được bên tả bên trên. Trong trường hợp của trang Features, chúng tôi thấy một điều hướng nội dung cố định bên phía tay trái, với những mục nội dung luôn hiển thị, ở dạng cuộn nằm bên phải.

Thông tin độ phân giải: Chọn lựa hình ảnh

Trong hai phần, "Take your store wherever you go" (Mang cửa hàng của bạn đến bất cứ nơi nào bạn đến), và cuối cùng bên dưới "We're here to help, 24 hours a day, 7 days a week" (chúng tôi ở đây để giúp đỡ, 24 giờ một ngày, 7 ngày một tuần), những chọn lựa hình ảnh được đưa ra tại những breakpoint khác nhau. Trong phần "Take your store wherever you go", hình ảnh của một iPhone chỉ xuất hiện tại breakpoint cho máy tính bảng và thiết bị có độ phân giải cao hơn. Trong phần 24/7, một ảnh của đại diện cho phần dịch vụ khách hàng trình bày 7 nhân vật ở các breapoint cho mobile và tablet, nhưng phát triển thành 13 nhân vật cho breakpoint ở desktop. Điều này đạt được là nhờ thành phần <picture>.

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="/assets2/support/gurus-white@desktop-76b9f1d671a43c72cb51ea40597e126c.jpg, /assets2/support/gurus-white@desktop-2x-70a9f83d819f8a4217d3afe2c7f01caf.jpg 2x" media="(min-width: 990px)">

  <!--[if IE 9]></video><![endif]-->
  <img srcset="/assets2/support/gurus-white@mobile-b020f30373b7452fd36452bc19616936.jpg, /assets2/support/gurus-white@mobile-2x-9aea44236e0c4c2440a32940caaae200.jpg 2x" alt="Shopify support gurus">
</picture>

Chú ý rằng thành phần <video> dành cho IE9; điều này cho phép IE9 sử dụng thẻ <source>. Shopify cũng sử dụng Scott Jehl’s Picturefill, một poyfill cho thành phần hình ảnh, được hỗ trợ bởi đa số trình duyệt. (Xem thông tin hỗ trợ của các trình duyệt ở đây)

Carousel cho phần nhận xét

Mở breakpoint cho mobile, phần nhận xét xuất hiện như một thành phần đơn lẻ trong một carousel.

Ở kích thước của máy tính bảng và lớn hơn, những silde này hiển thị song song với nhau.

Không thực sự rõ tại sao Shopify chọn dùng một carousel thay vì một sắp đặt theo chiều dọc, nhưng đã có một số phỏng đoán được biết đến. Ví dụ, Shopify có lẽ không muốn hy sinh không gian chiều dọc cần thiết để nhóm các bình phẩm của khách hàng vì vậy người dùng có thể tiếp cận phần kêu gọi hành động nhanh hơn. Hoặc có thể đó là đơn giản là một chọn lựa do tính thẩm mỹ.

Trang Báo Giá

Trang báo giá có thể xem như một trong những trang quan trong nhất của bất kỳ trang tiếp thị của dịch vụ nào. Vì lý do đó, hầu như những chọn lựa của Shopify trên trang này phải được suy tính cẩn thận. Hãy nhìn xem nội dung thay đổi ra sao qua những mốc breakpoint khách nhau.

Mobile

Người dùng được yêu cầu chọn một kế hoạch phù hợp với túi tiền của họ, và được hiển thị với 3 chọn lựa: bán trực tuyến, bán ở cửa hàng hoặc cả hai.

Chọn một trong những lựa chọn để thay đổi những module về giá để phù hợp với tình huống cụ thể bạn đã chọn lựa. Thay đổi này đi cùng với một thay đổi về màu sắc. Một quyết định thiết kế khôn ngoan từ Shopify là dùng màu vàng cho "trực tuyến", màu xanh cho "ở cửa hàng", và màu xanh lá cho kết hợp của cả hai; điều này đặc biết khéo léo bởi vì màu xanh dương kết hợp với màu vàng cho ra màu xanh lá cây.

Một khi người dùng đã chọn điểm bán hàng của họ, sau đó họ trình bày với mọi thứ được bố trí theo chiều đứng, thể hiện giá và tên của kế hoạch rất rõ ràng. Mỗi block cũng cung cấp một dropdown "kế hoạch chi tiết" để xem các thông tin chi tiết của kế hoạch, như đánh già và các tính năng.

FAQs hiện thị bên dưới theo bố trí accordion đã được đề cập trước đó. Phần header của accordion chỉ phần loại hình của câu hỏi, và mỗi câu phần chứa nhiều câu hỏi. Điều này khác biệt với cách tiếp cận phổ dụng của việc tạo ra một câu hỏi trong mỗi accordion.

Tablet - Máy tính bảng

Tại breakpoint của tablet, cả phần chọn point-of-sale (điểm bán hàng) và các nội dung giá cả chuyển về bố cục theo chiều ngang.

Các chi tiết giờ được hiển thị mà không cần phải click vào dropdown nằm trong mỡi phần nội dung. Chọn điểm bán hàng cũng chuyển từ chỉ có chữ sang dạng chữ có kèm theo một icon. Phần kế hoạch chuyên nghiệp có chút sai lệch với hai kế hoạch khác, và được đánh dấu là kế hoạch "phổ biến nhất". Ở cả những breakpoint của tablet và mobile, kế hoạch "Starter" được thiết kế để thu hút ít sự chú ý hơn, và không kèm phần kêu gọi hành động Try Shopify for Free (Dùng thử miễn phí Shopify). Thú vị thay, sự thiết hụt của trong tâm này lại tương tự áp dụng cho kế hoạch Shopify Plus, đó là kế hoạch cho cấp độ doanh nghiệp cao cấp.

FAQs không cần theo kiểu accordion nữa, và thay vào đó là một bố cục gồm 2 cột.

Desktop

Sự thay đổi duy nhất trên desktop có liên quan đến nội dung là kế hoạch ít được chú ý hơn, được mang đến một cột thứ 4 cùng với 3 kế hoạch chủ đạo.

"Ví dụ" Lightbox

Những ví dụ của giao diện Shopify là cách cơ bản tốt nhất để nói đến sự linh hoạt và trường hợp thực tiễn của Shopify. Những trang này đã triển khai một vài ví dụ điển hình của tương tác tự phản hồi mà chúng ta muốn chỉ ra.

Trải nghiệm lightbox trên mobile

Thông thường, các cửa sổ modal trên mobile bị thiếu đi bản thiết kế nên có cho người dùng mobile. Đây không phải trường hợp cho các ví dụ modal của Shopify. Được chú ý vào những hình ảnh lớn gần bằng màn hình, modal cung cấp những nút mũi tên điều hướng và thông tin meta bên dưới.

Chuyển về bố cục tablet, các mũi tên và thông tin meta dịch chuyển về bên phải của hình ảnh. Biền chuyễn giữa mỗi mô hình tận dụng biến đổi scale và thuộc tính fade. Sự chuyển tiếp đề nghị một hiệu ứng thu phóng lớn và nhỏ của số thứ tự của các hình ảnh. Tại tất cả thời điểm, khi modal mở, cả nút call-to-action và một bút x đã hiển diện, mang đến nhưng đường thoát cho các người chơi.

Lưới bản thân nó cung cấp những bộ lọc cho phép người dụng điều hướng khác nhau của giao diện trên trang. Hiệu ứng chyển đổi để thu nhỏ phóng to và làm mờ đục

Footer (Chân trang)

Chiến lược của Shopify cho phần điều hướng của Footer phám khá một tình huống khác, nơi mà giải pháp nội dung được khai triển. Tại thời điểm breakpoint của mobile, hai cột đã được hiển thị:i

tại thời điểm tablet và breakpoint lớn hơn, hai phần mới hoàn toàn sẽ được giới thiệu, cung cấp nhiều truy vấn trực tiếp cho thông tin chi tiết nội bộ và trang về tách quyền (nhưng trang dựa trên nội dung đã thiết lập tác quyền cho môt5 chủ đề cụ thể).

Về cơ cản, điều này cho thấy rằng Shopify xác định một chiến lược cho độ phân giải nội dung, và nôi dung nên là gì ở tất cả breakpoints, trên tất cả thiết bị, so với với nội dung nên là gì nếu không gian trên màn hình là của desktop hoặc tablet? Những dạng câu hỏi này dẫn đến một chiến lược nội dung tổng quát tốt hơn, và nên là một phần của nỗ lực thiết kế tự phản hồi.

Tổng kết

Shopify đã cố gắng để chuẩn bị một thiết kế đáng kinh ngạc, với sự tích hợp cao độ cả trong việc phát triển nội dung và các cân nhắc tự phản hồi của họ.

Hơn thế nữa, họ đã triển khai những kỹ thuật tuyệt nhất mà các trình duyệt hiện đại đã đề xuất. Thậm chí vẫn có những trang khắp nơi trong hệ sinh thái Shopify hoàn chưa hoàn toàn chuyển qua những kỹ thuật và thiết kế mới, trang người dùng và những trang tiếp thị chủ chốt mang đến một mô hình thiết kế tự phản hồi độc đáo cho người thiết kế và những người phát triển front-end học hỏi.