GALAXY TECH
Chuyên gia Công nghệ
Thứ tư, 31/10/2018 | 00:00 GMT+7

Màn hình Skeleton với React và React Native

Màn hình khung là một mẫu trải nghiệm user được hiển thị để giảm sự thất vọng về thời gian tải. Luke Wroblewski đã đặt ra thuật ngữ này để hiển thị các phần tử trung tính trong khi tải dần nội dung vào containers . Điều này tạo ra “hiệu suất cảm nhận” tốt hơn, vì thời gian bị chiếm dụng có cảm giác ngắn hơn thời gian không có người sử dụng.

Màn hình Skeleton trên Youtube, <br> Bill Chung (UX Collective)

Hiệu suất cảm nhận

Thay vì hầu hết các chiến thắng về hiệu suất hoặc UX, mô hình này chỉ tập trung vào việc cải thiện trải nghiệm nhận thức . Khi so sánh với màn hình trống hoặc máy quay truyền thống, màn hình khung xương được xem là có thời lượng ngắn hơn. Các nghiên cứu vẫn đang khám phá tính hiệu quả của chúng nhưng với quyền là nhà phát triển, ta có những lựa chọn nào để xử lý vấn đề này?

Thực hành tốt nhất

Trước khi đi sâu vào, có một số phương pháp hay nhất cần xem xét:

  • Hình ảnh động chuyển động và chuyển động tuyến tính được coi là nhanh hơn so với hình ảnh động tải chuyển động hoặc chuyển động xung động. Đối với hình ảnh, sử dụng màu chủ đạo của chúng với các yếu tố giữ chỗ cũng có thể hiệu quả.

  • Kết xuất server (SSR) là một phần quan trọng trong việc quản lý trải nghiệm tải trang của user . Các màn hình khung có liên quan phải được đưa vào “App Shell” và tải trang đầu tiên. Addy Osmani trình bày cách hoạt động của điều này với React indepth.

  • Khả năng tiếp cận nên được xem xét vì trình đọc màn hình và phần mềm hỗ trợ có thể trở nên khó hiểu và tạo ra trải nghiệm khó hiểu khi nói đến các phần tử trang bổ sung như màn hình khung. Ray Roman đề xuất sử dụng nhãn ARIA, như aria-disabled={true} hoặc aria-label="loading" , để giúp bỏ qua các yếu tố này.

Phản ứng

Trong React, có thể đạt được một dạng màn hình khung nhanh chóng và bẩn thỉu với componentDidMount và một gradient tuyến tính. Bài viết này đề cập đến các tùy chọn cộng đồng mạnh mẽ hơn được tạo ra để khuyến khích khả năng mở rộng.

phản ứng-nội dung-tải

Giải pháp out-of-the-box tốt nhất. Đi kèm với các cài đặt trước cho danh sách, mã, thẻ tải theo kiểu Facebook và Instagram. Cho phép SVG, phần tử và màu tùy chỉnh.

import ContentLoader, { Facebook } from 'react-content-loader'  const MyFacebookLoader = () => <Facebook />  const MyLoader = () => (   <ContentLoader>     {/* Pure SVG */}     <rect x="0" y="0" rx="5" ry="5" width="70" height="70" />     <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />     <rect x="80" y="40" rx="3" ry="3" width="250" height="10" />   </ContentLoader> )

Ngoài ra, react-placeholder và SVG Skeleton là hai giải pháp out-of-the-box phổ biến khác cung cấp các thành phần và kiểu dáng trình giữ chỗ.

bộ xương phản ứng

Linh hoạt nhất. Cho phép tùy chỉnh đầy đủ bằng cách cung cấp các thành phần bậc cao hơn với kết nối trực tiếp để tải các điều kiện. Bài đăng trên blog này tài liệu tại sao điều đó tuyệt vời .

import { createSkeletonProvider, createSkeletonElement } from '@trainline/react-skeletor';  const H1 = createSkeletonElement('h1'); const H2 = createSkeletonElement('h2');  const NameCard = ({ firstName, lastName }) => (   <div>     <H1 style={style}>{ firstName }</H1>     <H2 style={style}>{ lastName }</H2>   </div> )  const UserDetailPage = ({ user }) => (   <div>     ...     <NameCard user={user} />     ...   </div> )  export default createSkeletonProvider(   // Dummy data with a similar shape to the component's data   {     user: {       firstName: '_____',       lastName: '________'     }   },    // Predicate that returns true if component is in a loading state   ({ user }) => user === undefined,    // Define the placeholder styling for the children elements,   () => ({     color: 'grey',     backgroundColor: 'grey'   }) )(UserDetailPage)

phản ứng tải-khung

Thú vị nhất. Tự động tạo màn hình khung từ chính các kiểu, loại bỏ nhu cầu tạo các thành phần màn hình khung chuyên dụng cùng nhau. Lưu ý: Khi viết bài này , chỉ hỗ trợ cho hình chữ nhật .

import Skeleton from 'react-loading-skeleton';  const Blogpost = () => <div style={{ fontSize: 20, lineHeight: 2 }}>   <h1>{this.props.title || <Skeleton />}</h1>   {this.props.body || <Skeleton count={10} />} </div>

React Native

Khi nói đến React Native, có rất ít giải pháp cộng đồng để lựa chọn.

react-native-svg-animation-linear-gradient

Giải pháp được sử dụng rộng rãi nhất nhưng tính đến thời điểm viết bài này lại phụ thuộc vào Expo. Có một yêu cầu kéo mở để loại bỏ dependencies . Các nỗ lực khác đã hướng tới một nhánh rẽ dưới tên react-native-content-loader , nhưng gói npm hiện tại cho liên kết đến repo Github không tồn tại, vì vậy hãy cẩn thận với npm install .

import SvgAnimatedLinearGradient from 'react-native-svg-animated-linear-gradient'  //Instagram style <SvgAnimatedLinearGradient height={300}>     <Svg.Circle cx="30" cy="30" r="30"/>     <Svg.Rect x="75" y="13" rx="4" ry="4" width="100" height="13"/>     <Svg.Rect x="75" y="37" rx="4" ry="4" width="50" height="8"/>     <Svg.Rect x="0" y="70" rx="5" ry="5" width="400" height="200"/> </SvgAnimatedLinearGradient>

react-native-shimmer

Một triển khai React Native của Shimmer của Facebook được triển khai trên iOS và Android.

import Shimmer from 'react-native-shimmer'  <Shimmer>   <Text>Loading...</Text> </Shimmer>

Giải pháp thay thế

Ngoài React, cộng đồng JS cũng đã giải quyết vấn đề này. Placeload.js là một giải pháp vani phổ biến, jquery.skeleton.loader là một plugin jQuery và Semantic UI có phần tử Placeholder được tích hợp sẵn của riêng nó.

Hình ảnh và màu chủ đạo

Thay vì tạo hiệu ứng ánh sáng lung linh với các gradient, màu chủ đạo của hình ảnh có thể cung cấp hướng dẫn và ngữ cảnh cho user trước khi tải nội dung. Dưới đây là một số tài nguyên về cách extract màu cơ bản từ hình ảnh.

Đọc thêm:

Tags:

Các tin liên quan