فرم و اشکال

هر کدام از این ۱۲ قاعده یک نمونه درست و یک نمونه نادرست کنار هم دارد. زیر هر نمونه، مقدارهایی را می‌بینید که در آن به کار رفته‌اند.

• هیچ سرفیسی گوشه تیز ندارد

  گوشه تیز فرم را خشک و اداری می‌کند، پس Corner radius هر سرفیس دست‌کم xs است. این قاعده دو استثنا دارد: تصویری که تا لبه کارت می‌رود و گوشه‌اش را خود کارت برش می‌دهد، و گوشه‌های شیت در لبه صفحه.

  radius: lg

  radius: 0

• دکمه مستطیل است

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

  ادامه

  md10px

  ادامه

  full

• گوشه‌ها Corner smoothing دارند

  ربع دایره یک‌باره از لبه صاف می‌پیچد و گوشه را شکسته نشان می‌دهد. در فیگما Corner smoothing را روی ؜۷۰٪ بگذارید. در کد هم توکن corner-shape پیوند را کنار هر Corner radius جز full بنویسید.

  superellipse

  round

• ضلع کوتاه دست‌کم ۳٫۴ برابر Corner radius است

  با Corner smoothing پیوند، منحنی هر گوشه روی هر ضلع تا ۱٫۷ برابر Corner radius پیش می‌رود. ضلع کوتاه باید جای هر دو منحنی را داشته باشد، وگرنه فیگما Corner smoothing را کم می‌کند. پس کادر متن ۳۶ پیکسلی حداکثر md می‌گیرد، یعنی ۱۰ پیکسل.

  ایمیل شما

  height 36pxmd 10px

  ایمیل شما

  height 36pxwindow 18px

• Corner radius با اندازه بزرگ می‌شود

  کامپوننت بزرگ‌تر پله بزرگ‌تری می‌گیرد: تصویر md، کارت lg و مدال window. تصویر کوچک با پله بزرگ حباب می‌شود و مدال با پله کوچک تیز دیده می‌شود.

  windowmd

  xsxl

• چهار گوشه یکسان

  هر چهار گوشه یک سرفیس Corner radius یکسان دارند. تنها استثنا شیتی است که به لبه صفحه چسبیده است. گوشه‌های شیت در همان لبه تیزند، چون از پشت آن لبه بیرون می‌آید.

  lg lg 0 0

  lg xs lg xs

• دایره فقط برای آدم‌ها و وضعیت‌ها

  دایره و کپسول مخصوص آدم‌ها و وضعیت‌هاست، مثل چهره آدم، نقطه وضعیت، نشان عددی روی آیکون و سوییچ. دکمه آیکون‌دار مربع است و همان Corner radius دکمه را دارد.

  md

  full

• آدم‌ها دایره، نهادها مربع

  آواتار آدم‌ها دایره است و آواتار نهادها و کمپین‌ها مربع. چهره آدم را در مربع نگذارید.

  م

  fullround

  م

  lgsuperellipse

• گوشه‌های تودرتو هم‌مرکزند

  Corner radius درونی برابر Corner radius بیرونی منهای پدینگ است تا فاصله دو لبه در گوشه هم ثابت بماند. این عدد هیچ‌وقت کمتر از xs نمی‌شود. اگر هر دو Corner radius یکی باشند، فاصله در گوشه باز می‌شود و گوشه درونی گردتر دیده می‌شود.

  window − 12 = sm

  windowwindow

• گوشه تصویر لب‌به‌لب را کارت برش می‌دهد

  تصویری که تا لبه کارت می‌رود Corner radius جداگانه‌ای نمی‌گیرد. کارت با overflow: clip گوشه آن را همراه گوشه خودش برش می‌دهد، پس هر دو روی یک منحنی می‌نشینند.

  overflow: clip

  radius: md

• خط دور و سایه هم‌شکل گوشه‌اند

  با corner-shape خود شکل عنصر عوض می‌شود، پس خط دور، سایه و حلقه فوکوس همان منحنی را دنبال می‌کنند. اما clip-path فقط برش می‌دهد: سایه و حلقه فوکوس را حذف می‌کند و خط دور را در گوشه‌ها قطع می‌کند.

  corner-shape

  clip-path

• لبه‌ها صاف و روی گرید

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

  grid0deg

  rotate(-3deg)