مقالات

تعقیب رویای عالی پیکسل • جاش دبلیو کومو

تصویر admin admin3 ساعت پیش
0 0 خواندن این مطلب 11 دقیقه زمان میبرد
تعقیب رویای عالی پیکسل • جاش دبلیو کومو


من اخیراً پیام زیر را در DM دریافت کردم:

من سال‌هاست که با HTML و CSS طراحی می‌کنم و هنوز نمی‌دانم چگونه طرح‌های کامل پیکسلی را پیاده‌سازی کنم.

اگر با این اصطلاح آشنا نیستید، “کمال پیکسل” این ایده است که پیاده سازی HTML/CSS شما باید تا حد امکان به مدل اصلی نزدیک باشد. اندازه‌گیری‌ها و فاصله‌ها باید تا پیکسل دقیق باشد.

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

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

دقیقاً چگونه چیزی را تولید می کنیم که طراحان ما می توانند به آن افتخار کنند؟ آیا حتی بازتولید یک طرح تا پیکسل واقعی است؟ چرا این قدر سخت است؟

در این مقاله، به این سوالات پاسخ می‌دهیم و ترفندهایی را یاد می‌گیریم که به ما کمک می‌کنند کمی به کمال پیکسل نزدیک‌تر شویم. ✨

بیایید این را از سر راه برداریم: به معنای دقیق قانون، من فکر نمی‌کنم که کمال پیکسل واقعاً ممکن باشد.

HTML و CSS که می نویسیم باید روی مجموعه ای از دستگاه های مختلف کار کنند. وجود دارد خیلی متغیرها که بر نحوه اجرای استقرار تأثیر می گذارد.

برای سرگرمی، دقیقاً از همان فهرست در آمازون اسکرین شات گرفتم1 تفاوت کوچک وجود دارد زیرا آمازون در حال آزمایش A/B بود، اما به اندازه کافی نزدیک است! از طریق دو دستگاه مختلف

از دکمه های زیر استفاده کنید برای تغییر بین آنها برای دیدن تفاوت ها:

کروم، ویندوز

سافاری، macOS

تصویری از فهرست آمازون که در iMac Pro در حال اجرا Safari گرفته شده است

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

وقتی برای DigitalOcean کار می‌کردم، توانستم در یکی از مراکز داده آن‌ها بازدید کنم. وحشی و سورئال بود. اتاق‌های بزرگ صدها ردیف را در خود جای می‌دادند که هر کدام ده‌ها قفسه و هر کدام ده‌ها کامپیوتر داشت. هر دستگاه یکسان بود.

گاهی اوقات به توسعه دهندگان باطن حسادت می کنم. بسیاری از مسائل سخت در پشتیبان وجود دارد، اشتباه نکنید، اما حداقل آنها دستگاه هایی را که کدشان روی آنها اجرا می شود کنترل می کنند! نیازی به کار بر روی هر دستگاه ممکن نیست، از تلفن 5 اینچی گرفته تا تلویزیون 72 اینچی و یخچال هوشمند.

در نسخه ی نمایشی بالا، من فقط دو متغیر را تغییر دادم: سیستم عامل و مرورگر. چند عامل دیگر را در نقاشی در نظر بگیرید:

  • نوع دستگاه (رومیزی، لپ‌تاپ، تبلت، تلفن، ساعت…)

  • اندازه صفحه نمایش / اندازه پنجره

  • تراکم پیکسلی صفحه نمایش

  • تکنولوژی صفحه نمایش (OLED، LCD، CRT، E-ink)

  • سطح بزرگنمایی سفارشی / اندازه فونت پیش فرض

  • عملکرد (سخت افزار دستگاه، بار سرور، سرعت شبکه…)

  • تصحیح رنگ دستگاه (به عنوان مثال حالت شب)

این فقط از بالای سر من است. شرط می بندم شما زوجی دارید که من از دستشان رفته بودم!

بنابراین واضح است که وقتی صحبت از مقادیر RGB تک تک پیکسل‌ها روی صفحه‌نمایش به میان می‌آید، هرگز نمی‌توانیم از سازگاری 100٪ اطمینان حاصل کنیم. این یک استاندارد غیرممکن است. اما موضوع این هم نیست.

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

بیایید در مورد چگونگی انجام این کار صحبت کنیم.

وقتی یک ماکت جدید را از روی پرس دریافت می‌کنید، معمولاً با ابزار طراحی مانند Figma یا Zeplin به شما تحویل داده می‌شود.

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

متاسفانه این اطلاعات همیشه قابل اعتماد نیست! فقط به این دلیل که Figma به شما می گوید که بین عنوان و پاراگراف فاصله 64 پیکسلی وجود دارد به این معنی نیست که درست است.

ابزارهایی مانند Sketch در درجه اول ابزار طراحی هستند. آنها مجموعه ای از شیوه ها و ویژگی های خاص را از دنیای طراحی به ارث می برند و همیشه به خوبی به وب ترجمه نمی شوند. آنها البته نزدیک خواهند بود، اما لزوماً به اندازه کافی نزدیک نیستند.

به جای اعتماد به اندازه گیری هایی که از ابزار طراحی به دست می آورید، باید اندازه گیری های خود را انجام دهید! روش مورد علاقه من برای انجام این کار استفاده از ابزار اسکرین شات داخلی در MacOS است:

می توانید این ویژگی را با میانبر صفحه کلید روشن کنید cmd-shift-4. کلیک کنید و بکشید تا یک کادر بکشید و از اعداد گوشه پایین سمت راست برای تخمین فاصله استفاده کنید. اگر ماوس را رها کنید اسکرین شات می گیرد یا می توانید کلیک کنید Escape برای جلوگیری از شلوغ شدن دسکتاپ با تعدادی عکس، آن را لغو کنید.

سایر سیستم عامل ها چنین چیزهایی را در خود ندارند، اما من چند جایگزین پیدا کردم: گرین شات(در برگه جدید باز می شود) (ویندوز) و ScreenRuler(در برگه جدید باز می شود) / KRuler(در برگه جدید باز می شود) (لینوکس).

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

روی تشخیص تفاوت ها کار کنید پنجره های خود را طوری بچینید که ماکت و پیاده سازی شما در کنار هم باشند و به دنبال تفاوت های ظریف باشید. با او مانند یکی از آنها رفتار کنید تفاوت را متوجه شوید(در برگه جدید باز می شود) بازی ها

ابزارهایی مانند PixelSnap(در برگه جدید باز می شود). PixelSnap ابزاری است که به شما این امکان را می‌دهد تا به سرعت و به راحتی تقریباً هر چیزی را روی صفحه با استفاده از ابزارهای پیشرفته اندازه‌گیری کنید. این نرم افزار پولی است، اما ممکن است بتوانید کارفرمای خود را متقاعد کنید تا مجوزهایی را برای تیم دریافت کند!

به دو دایره زیر توجه کنید. به نظر شما کدام به درستی در مرکز قرار گرفته است؟

دو دایره آبی حاوی عدد یک بودند. یکی از نظر ریاضی در مرکز قرار می گیرد، دیگری تغییر می کند تا تراز تر به نظر برسد

دومی بهتر به نظر می رسد، اینطور نیست؟ با این حال، اولین پاسخ از نظر فنی پاسخ صحیح است.

در CSS همه چیز جعبه است. عدد “1” یک کادر در اطراف خود ایجاد می کند و آن کادر کاملاً در مرکز قرار دارد.

سمت راست به گونه‌ای جابجا شده است که ساقه آن با محور عمودی تراز شود:

همان دو دایره، فقط در حال حاضر نشانگر وجود دارد. دو خط صورتی در امتداد هر دو محور کشیده شده است.

این به عنوان شناخته شده است تراز نوری. بر اساس ادراک انسان تراز شده است، نه بر اساس فاصله ریاضی مطلق بین جعبه ها.

مسلماً، این یک جزئیات بسیار کوچک است و اگر اعداد مبتنی بر داده باشند، غیر عملی می شود. اما این مثال خوبی از این است که چگونه تمرکز ریاضی همیشه درست نیست. گاهی اوقات لازم است یک تنظیم کوچک انجام دهیم تا چشمان ما باور کنند که همه چیز به درستی در یک راستا قرار گرفته است.

من اغلب متوجه می شوم که نیاز به ایجاد تغییرات جزئی مانند این دارم. بیایید به مثال دیگری نگاه کنیم. بین دو گزینه جابجا شوید و ببینید کدام یک به نظر شما بهتر است:

این یک پاراگراف تحت عنوان است. این پاراگراف کلمات زیادی دارد و می توانید تصور کنید که چیزهای مهم زیادی وجود دارد!

اگر از بازرس Element استفاده کنیم، می بینیم که کادر محتوا شامل چند پیکسل فضای مرده قبل از لبه سمت چپ تایپوگرافی است:

اسکرین شات بزرگ شده از نسخه نمایشی بالا، با یک کادر آبی که

خوشبختانه، هسته ای که باعث این شکاف می شود به نظر می رسد در موتورهای رندر مرورگر سازگار است، و بنابراین ما می توانیم با خیال راحت چیزها را چند پیکسل تغییر دهیم تا هم ترازی جهانی بهبود یابد.

برای روشن شدن، من می دانم که این مورد است فوق العاده خوب. شما می توانید بدون انجام این موارد تراز نوری به طرح های واقعا واضح برسید. ما در قلمرو “5٪ پایین” هستیم. اما برای صفحات حیاتی ماموریت (صفحه اصلی، صفحات فرود پربازدید) نیز مهم است، شاید ارزش صرف چند دقیقه روی این تنظیمات را داشته باشد!

ممکن است در این مقاله متوجه الگویی شده باشید: بسیاری از ترفندهای کوچک برای ایجاد حس خوب.

به هم ریختن دائمی چیزها در اطراف می تواند احساس آشفتگی داشته باشد. برای افزودن کمی محدودیت و اطمینان از استفاده از یک استراتژی منسجم، دوست دارم یک جزء کوچک React برای خودم ایجاد کنم. در اینجا به نظر می رسد:

function ShiftBy({ x = 0, y = 0, children, ...delegated }) {
  return (
    div
      {...delegated}
      style={{
        transform: `translate(${x}px, ${y}px)`,
      }}
    >
      {children}
    div>
  );
}

در اینجا نحوه استفاده از آن آمده است:

section>
  ShiftBy x={-3}>
    Heading>Hello worldHeading>
  ShiftBy>
  p>This is a paragraph below a headingp>
section>

حتی اگر با React آشنایی ندارید، امیدواریم این قطعه ایده ای از کار آن به شما بدهد. مال ما ShiftBy به ما اجازه می دهد تا چیزی را چند پیکسل در امتداد هر محور جابجا کنیم.

من این را دوست دارم زیرا کاملاً واضح است که هدف چیست. ما تنظیمات جزئی انجام می دهیم تا همه چیز به خوبی هماهنگ شود. ما تکه‌های تصادفی CSS را روی دسته‌ای از عناصر از پیش موجود ظاهراً تصادفی نمی‌پاشیم.

transform: translate است حداقل تهاجمی راهی که می دانم باید چیزی را تغییر دهم. برخلاف استفاده از حاشیه، این کار خواهر و برادر را با خود همراه نخواهد کرد.

CSS یک زبان فریبنده دشوار است. شروع، تغییر سبک تایپوگرافی و جابجایی اشیا نسبتاً آسان است. اما پروژه های دنیای واقعی هرگز به این سادگی نیستند و همه چیز به سرعت پیچیده می شود.

در این مقاله، دیدیم که چگونه ترفندهای کوچک می توانند تفاوت بزرگی ایجاد کنند، اما اصلاً در مورد اینکه چگونه چیزها را به اندازه کافی به هم نزدیک کنیم تا این ترفندهای کوچک کار کنند صحبت نکرده ایم!

من بسیاری از توسعه دهندگان JS را می شناسم که با CSS اعتماد به نفس ندارند. آنها نحو را می فهمند و در اعمال سبک ها مشکلی ندارند، اما نتوانسته اند شکاف را برای تسلط پر کنند. آنها در انجام کارهای چیدمان در مقیاس بزرگ یا ایجاد یک معماری مقیاس پذیر راحت نیستند.

من در حال کار بر روی یک دوره به نام CSS برای جاوا اسکریپت هستم توسعه دهندگان(در برگه جدید باز می شود). این یک دوره آموزشی چند وجهی است، با استفاده از فناوری مشابهی که من در این وبلاگ برای ساختن ویجت‌های پویا و تعاملی استفاده می‌کنم و آن را به سطح جدیدی می‌رسانم.

اگر می‌خواهید با CSS راحت‌تر شوید، فکر می‌کنم واقعاً کمکتان کند! بیشتر بدانید دوره(در برگه جدید باز می شود).

ما در این مقاله در مورد جنبه فنی چیزها زیاد صحبت کرده ایم. اما این یک جنبه دیگر نیز دارد.

قبلاً نوشته‌ام که تقویت یک رابطه کاری خوب با طراحی برای انجام کار عالی کاملاً ضروری است. اگر آن را نخوانده اید، باید آن را بررسی کنید. فکر می کنم این یکی از تاثیرگذارترین پست های وبلاگی است که تا به حال منتشر کرده ام.

حقیقت این است که مواقعی وجود دارد که تجربه ما به عنوان مهندسان فرانت اند ارزشمند است. به عنوان مثال، یک طراح ممکن است یک ایده عالی برای یک زیبا داشته باشد