UI روزانه – روز 10: سهم اجتماعی

از:
UI روزانه

–

شروع به چالش روزانه 100 روز UI UI یک سفر هیجان انگیز و تحول آمیز برای طراحان UI/UX در تمام سطوح است. این چالش فرصتی بی نظیر برای پالایش مهارت های طراحی ، گسترش تفکر خلاق و ایجاد یک نمونه کارها چشمگیر برجسته و تخصص در حل مشکلات رابط در دنیای واقعی ارائه می دهد.

برای چالش امروز ، ما بر طراحی یک دکمه اشتراک اجتماعی بصری تمرکز می کنیم – یک عنصر ضروری UI که با استفاده از محتوای به راحتی ، تعامل کاربر را تقویت می کند. این که آیا این یک قطعه مقاله ، یک صفحه محصول یا یک عکس جذاب است ، یک دکمه اشتراک گذاری به خوبی طراحی شده باید از نظر بصری جذاب ، در دسترس و یکپارچه در تجربه کاربر باشد. ملاحظات کلیدی شامل اندازه ، قرارگیری و نمادنگاری آن برای اطمینان از اشتراک بی دردسر در سیستم عامل ها است.

بیایید یک دکمه اشتراکی اجتماعی براق ، کاربردی و زیبا و دلپذیر ایجاد کنیم که تعامل را ترغیب می کند و باعث افزایش دید محتوا می شود! 🚀

–

اعلان

ترم بهار رسما در دانشگاه من در سانفرانسیسکو آغاز شده است! 🎉 از همه شما برای حمایت شما سپاسگزارم – این ماه گذشته فوق العاده مولد بوده است ، و من از آنچه در پیش است هیجان زده ام.

برای استفاده بیشتر از وقتم ، من از رویکرد سنتی طراحی مبتنی بر FIGMA برای یادگیری واکنش نشان می دهم با ایجاد اجزای UI تعاملی و تقویت مهارت های توسعه جلوی خود. این انتقال به من این امکان را می دهد تا شکاف بین طراحی و توسعه را ایجاد کنم و ایده های خلاقانه خود را از طریق برنامه های وب کاربردی و پویا زنده کنم.

من مشتاق هستم که در حالی که همچنان به تصحیح تفکر طراحی خود ادامه می دهم ، معماری مبتنی بر مؤلفه ، مدیریت دولت و چارچوب های مدرن UI را کشف کنم. در اینجا به یک ترم رشد ، چالش های جدید و تراز کردن مهارت های من رسیده است! 🚀

–

توضیح مختصر در مورد React:
React یک کتابخانه محبوب JavaScript است که توسط Facebook برای ایجاد رابط های کاربر ، به ویژه برای برنامه های تک صفحه ساخته شده است. این امکان را به توسعه دهندگان می دهد تا با شکستن آنها به اجزای کوچکتر و قابل استفاده مجدد ، UI های پیچیده را بسازند. React مبتنی بر یک DOM مجازی است ، که با به روزرسانی کارآمد تنها بخش هایی از UI که تغییر کرده اند ، عملکرد ارائه را بهینه می کند. این باعث می شود برنامه های React سریعتر و پاسخگوتر شوند. React همچنین از JSX (JavaScript XML) استفاده می کند ، که یک پسوند نحوی است که به شما امکان می دهد کد HTML مانند را در JavaScript بنویسید. React به لطف سادگی و انعطاف پذیری آن به طور گسترده ای برای ساختن برنامه های وب مدرن استفاده می شود.

–

در اینجا کد React یک UI اشتراک اجتماعی با استفاده از React آورده شده است

import React from 'react'; // Import React library to use JSX and React functionality

const SocialShare = () => { // Define the SocialShare component
  const handleShare = (platform) => { // Define a function that handles sharing logic, accepting a 'platform' argument
    const url = encodeURIComponent(window.location.href); // Get the current URL of the page and encode it for use in a URL
    const text = encodeURIComponent("Check out this awesome content!"); // Create an encoded text string for sharing on social media

    let shareUrl=""; // Initialize a variable to hold the sharing URL based on the platform

    switch(platform) { // Switch statement to handle different sharing platforms
      case 'facebook': // If the platform is Facebook
        shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${url}`; // Create a Facebook share URL with the encoded current URL
        break; // Break out of the switch statement
      case 'twitter': // If the platform is Twitter
        shareUrl = `https://twitter.com/intent/tweet?url=${url}&text=${text}`; // Create a Twitter share URL with the encoded current URL and message
        break; // Break out of the switch statement
      case 'linkedin': // If the platform is LinkedIn
        shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${url}`; // Create a LinkedIn share URL with the encoded current URL
        break; // Break out of the switch statement
      default: // If the platform does not match any case
        return; // Exit the function if the platform is not recognized
    }

    window.open(shareUrl, '_blank'); // Open the share URL in a new browser tab
  };

  return ( // Return the JSX to render the component
    
 
       handleShare('facebook')}>Share on Facebook // Button for sharing on Facebook, calls handleShare with 'facebook' argument
       handleShare('twitter')}>Share on Twitter // Button for sharing on Twitter, calls handleShare with 'twitter' argument
       handleShare('linkedin')}>Share on LinkedIn // Button for sharing on LinkedIn, calls handleShare with 'linkedin' argument
    
  );
};

export default SocialShare; // Export the SocialShare component so it can be used in other parts of the app

–

چگونه کد را اجرا کردم

1. به CodesandBox ، یک IDE آنلاین بروید
2. الگوی React را باز کنید
3. کد App.js را با کد فوق جایگزین کنید
4. بر روی “پیش نمایش باز” کلیک کنید

پیوند به جعبه ماسه

–

نکات برجسته برنامه

1. React Component (SocialShare): این مؤلفه سه دکمه را برای به اشتراک گذاری محتوا در فیس بوک ، توییتر و LinkedIn ارائه می دهد

2. رسیدگی به رویداد: عملکرد HandleShare روی کلیک بر روی دکمه ها فراخوانی می شود ، و به صورت پویا URL به اشتراک گذاری صحیح را بر اساس پلت فرم انتخاب شده ایجاد می کند

3. رمزگذاری URL: شما URL و پیام اشتراک (متن) را رمزگذاری می کنید تا اطمینان حاصل کنید که آنها به درستی برای استفاده در URL قالب بندی شده اند

4. Window.Open (): این روش URL های اشتراک گذاری را در یک برگه جدید باز می کند و به کاربران امکان اشتراک محتوا را بدون ترک صفحه فعلی ارائه می دهد

–

پایان

در پایان ، Daily UI Challenge فرصتی عالی برای طراحان مشتاق UI/UX برای تیز کردن مهارت های خود و به دست آوردن تجربه مفید در ایجاد رابط های کاربردی کاربردی و بصری جذاب است. با انتقال از ابزارهای طراحی سنتی مانند FIGMA به توسعه React Hand-On ، توانستم درک خود را از چگونگی تقاطع طراحی و عملکرد در برنامه های وب مدرن عمیق تر کنم. مؤلفه دکمه Social Share تنها یک نمونه از چگونگی افزایش عناصر تعاملی می تواند تعامل کاربر را افزایش داده و تجربه کلی کاربر را بهبود بخشد. از آنجا که من همچنان به بررسی معماری مبتنی بر مؤلفه و چارچوب های مدرن مانند React می پردازم ، من از مقابله با چالش های جدید و اصلاح بیشتر تخصص طراحی و توسعه خود هیجان زده ام. این سفر به تازگی آغاز شده است ، و من مشتاقانه منتظر آنچه در دنیای طراحی UI/UX و توسعه جلوی آن نهفته است ، هستم!