قانونهای طراحی بصری که همیشه جواب میدن
فرانتاندClaude Opus 5خلاصهٔ کاملتر
نویسنده از اول تکلیف رو روشن میکنه: لازم نیست همیشه این قانونها رو رعایت کنی و اگه دلیل خوبی برای شکستنشون داری، بشکن. حرفش اینه که اینها بیخطرن — یعنی اگه بدون فکر هم دنبالشون بری، طراحیت خراب نمیشه. زیربنای همهشون هم یه اصله: هر چیزی تو طراحی باید عمدی باشه. به گفتهٔ او اگه کسی به یه گوشهٔ تصادفی از کارت اشاره کرد، باید بتونی توضیح بدی چرا اونجوریه.
سمت رنگ، چند قانون مشخص میذاره. بهجای مشکی و سفید خالص از نزدیکمشکی و نزدیکسفید استفاده کن، چون کنتراست مشکی خالص اغلب آزاردهندهست و سفید خالص زیادی روشنه. اگه تو رابط رنگ داری، کمی از همون رنگ رو به خنثیها اضافه کن — در سیستم HSB زیر ۵٪ اشباع کافیه. رنگهای پالت هم باید مقادیر روشنایی متمایز داشته باشن، و اگه خنثیها رو اشباع میکنی یا همه گرم یا همه سرد، نه مخلوط.
برای چیدمان، قانون پایه اینه که هر عنصر باید با یه چیز دیگه همتراز باشه، وگرنه حس میکنی به طراحی تعلق نداره. نویسنده یادآوری میکنه که همترازی چشمی اغلب از همترازی ریاضی بهتره، چون بعضی شکلها مرکز بصریشون با مرکز هندسیشون یکی نیست. اندازهها و فاصلهها هم باید از یه مقیاس بیان (مثلاً مضربهای ۸)، و اگه گرید ستونی میخوای، ۱۲ ستون بگیر چون به ۱، ۲، ۳ و ۴ ستون تقسیم میشه.
دربارهٔ فاصلهگذاری دو نکتهٔ ظریف داره. اول اینکه فاصله باید از یه نقطهٔ کنتراست بالا تا نقطهٔ بعدی اندازه گرفته بشه، چون چشم لبهها رو از روی کنتراست پیدا میکنه؛ اگه پسزمینهٔ تیره پشت یه پاراگراف گذاشتی، فاصله از انتهای پاراگراف قبلی تا شروع اون پسزمینهست، نه تا خود متن. دوم اینکه پدینگ بیرونی کانتینر باید مساوی یا بیشتر از پدینگ داخلی باشه.
سمت تایپوگرافی، هرچی متن بزرگتر بشه فاصلهٔ حروف و ارتفاع خط باید کمتر بشه و برعکس. متن بدنه رو زیر ۱۶ پیکسل نبر، طول خط رو حدود ۷۰ کاراکتر نگه دار (بین ۶۰ تا ۸۰ اشکالی نداره) و بیشتر از دو تایپفیس استفاده نکن. برای دکمه هم پدینگ افقی رو دو برابر پدینگ عمودی بذار تا الگوی آشنای دکمه حفظ بشه.
برای حس عمق، منطقش از دنیای واقعی میاد: هرچی عنصر به کاربر نزدیکتره باید روشنتر باشه، چه در تم روشن چه تیره. مقدار بلر سایه رو دو برابر فاصلهش بذار (سایهٔ ۴ پیکسلی روی محور Y، بلر ۸ پیکسل) و هرچه عنصر نزدیکتر شد، شفافیت سایه رو هم کم کن. در رابط تیره اصلاً سایه نذار، و تکنیک عمق رو وسط کار عوض نکن.
چند قانون جزئیتر هم داره که تفاوت کار حرفهای رو میسازن: بوردر کانتینر باید هم با خود کانتینر و هم با پسزمینه کنتراست داشته باشه، نه چیزی بین اون دو. اختلاف روشنایی کانتینر و پسزمینه در رابط تیره تا ۱۲٪ و در رابط روشن تا ۷٪ بمونه — عددی که نویسنده میگه از بررسی حدود ۱۰۰ سایت خوبطراحیشده درآورده. شعاع گوشهٔ داخلی هم برابر شعاع بیرونی منهای فاصلهٔ بین اون دوئه. دو مرز سخت رو کنار هم نذار، و کنتراست آیکونی رو که کنار متن نشسته کمی پایین بیار چون بصری سنگینتر از متن دیده میشه.
نکات کلیدی:
- هیچ چیزی تو طراحی نباید تصادفی باشه؛ برای هر انتخاب دلیل داشته باش
- مشکی و سفید خالص نه؛ خنثیها رو با رنگ پالت کمی اشباع کن
- اندازهها از یه مقیاس بیان و هر عنصر با چیزی همتراز باشه
- متن بدنه دستکم ۱۶ پیکسل، طول خط حدود ۷۰ کاراکتر، حداکثر دو تایپفیس
- بلر سایه دو برابر فاصلهش؛ در رابط تیره سایه نذار
