شاید برای برخی از کاربران پیش آمده باشد که وقتی روی یک طرح کار می کنند ، برخی از متن ها را بزرگتر و یا کوچکتر در نظر می گیرند ، تا از فضای سفید اطراف طرحشان به خوبی استفاده کنند. اما در مورد رنگ ها چه طور ؟ آیا باید تیره تر باشند ، یا شاید روشن تر؟
این مقاله در مورد ایجاد محدودیت ها و قوانینی است که باید در کل مراحل طراحی رعایت شود. تعداد نامحدودی روش وجود دارد که می توانید عناصر را در یک رابط کاربری ترکیب کنید . بنابراین شما باید برخی از قوانین و مرزها را تعیین کنید ، در غیر این صورت ممکن است روند کار طراحی به یک کار ناخوشایند تبدیل شود. ممکن است با همه احتمالات دست و پنجه نرم کنید و سعی کنید بهترین گزینه را از بین بسیاری از گزینه های "صحیح" انتخاب کنید. با تنظیم (و دنبال کردن) برخی از قوانین اساسی ، طراحی شما نیز سازگارتر به نظر می رسد.
بیایید از همان ابتدا شروع کنیم. شما می خواهید طراحیتان خوب و قابل اعتماد به نظر برسد . این در حالی است که شما در درجه اول باید از شلوغ تر شدن کارتان جلوگیری کنید. برای این اتفاق ، شما باید خیلی از موارد را بررسی کنید . بخشی از این موارد شامل : داشتن یک سیستم مطلوب ، دسترسی به ایده های متنوع و ... هستند . کار یک طراح خوب زمانی مورد قبول توسعه دهندگان قرار می گیرد که پیش از هر چیزی به تمامی نیاز های یک کاربر فکر کرده باشد و بعد به عنوان یک طراح رابط کاربری (UI) دست به طراحی بزند .
تغییر اندازه با سایزهای از پیش تعیین شده
مهم نیست که می خواهید اندازه بلوک متن ، و یا اندازه تصویر و یا فضای سفید را تغییر دهید. در این جا شما تصمیم گیرنده هستید و باید تشخیص بدهید که هر عنصر چه اندازه خواهد بود. با این احوال می شود پیش بینی کرد که تا کنون در این وضعیت قرار داشته اید. آیا تا به حال سایز عنصری را انتخاب کرده اید ؟ و یا بعد از پنج دقیقه آن را تغییر داده اید ؟ ، و یا این که برای چند بار دیگر این کار را تکرار کرده اید؟ در چنین شرایطی هدف های بسیار متفاوتی وجود دارد که باعث می شود ، قبل از ایجاد کردن چیزی به تمامی موارد فکر کنید .
با انتخاب گرید 8 پیکسلی طراحی کنید
برای تمیزتر نشان دادن کل طرح ، بهتر است ابتدا مقدار اندازه گیری را تنظیم کنید و پس از آن همه اندازه ها را قرار دهید. این قسمت دقیقا به خود شما بستگی دارد که چه مقداری را می خواهید انتخاب کنید . در اغلب اوقات ، بهترین گزینه این است که به چند قانون اثبات شده پایبند باشید. و یکی از این قوانین تغییر اندازه و جابجایی دقیقاً هشت پیکسل عناصر است. این قانون تصمیم گیری شما را ساده تر می کند.
البته چند دلیل وجود دارد که چرا باید هشت پیکسل انتخاب شودو ما در اینجا به این دلایل اشاره خواهیم کرد:
- برای "پرش" حداقل هشت پیکسل کافی است.
- هشت عدد عالی است زیرا بر چهار و دو قابل تقسیم است.
اگر از پرش هشت پیکسل استفاده می کنید ، می توانید به راحتی هر عنصر را بدون پایان دادن به نیم پیکسل تغییر اندازه دهید ، به عنوان مثال 8/2 = 4 ، 4/2 = 2 و 2/2 = 1 می توانند بهترین انتخاب برای انتقال باشند. با این احوال اگر از طرف دیگر بخواهید با 10 شروع کنید ، می توانید در نهایت با 5 پیکسل ، سپس 2.5 پیکسل ، سپس 1.25 پیکسل به پایان کار برسید.
هنگام طراحی برای صفحه ، شما می توانید تا حد ممکن از نیمی از پیکسل جلوگیری کنید. با استفاده از پیکسل های کامل ، عناصر موجود در طراحی با مرزهای دقیق پیکسل همسو می شوند و بنابراین واضح تر به نظر می رسند.
مضرب های هشت (8 ، 16 ، 24 ، 32 ، 40 ، 48 ، 56 ، 64 ، 72 ، 80 و غیره) با مقادیر باینری در هم آمیخته شده اند (1 ، 2 ، 4 ، 8 ، 16 ، 32 ، 64 ، 128 ، 256 ، 512 و غیره). سرانجام ، به راحتی می توان شماره ها را به خاطر سپرد.
مزایای استفاده از گرید 8 پیکسلی چیست؟
به عنوان یک طراح ، زمان تصمیم گیری شما بسیار ارزشمند است. این کار باعث سریعتر و کارآمدتر شدن شما می شود.اگر با یک توسعه دهنده کار می کنید ، می توانید سیستمی ایجاد کنید که به شما و تیم شما کمک کند. اگر برنامه نویس نیاز به تغییر سریع داشته باشد ، می تواند مقادیر را با افزایش 8 پیکسل تنظیم کند. این اطمینان از اصلاح می تواند با خود ثبات و نظم بیاورد.افرادی که از وب سایت شما استفاده می کنند هنگام بازدید از آن احساس راحتی می کنند. آنها به وب سایت شما اعتماد خواهند کرد و استفاده از رابط کاربری برای آنها راحت تر خواهد بود.
من مطمئن هستم که شما قبلاً هنگام طراحی وب سایت ها از شبکه یا همان گرید استفاده کرده اید. استفاده از شبکه به شما کمک می کند تا تمام عناصر را روی صفحه با دقت قرار دهید.شبکه اسکلت رابط کاربری شما را تشکیل می دهد و تعیین می کند که در کجا می توانید عناصر را قرار دهید. این کار به شما کمک می کند تا الگو ترکیب را نگه دارید و پس از آن مرزهای مشخصی را انتخاب کنید. اکنون برای شما تصمیم گیری و قرار دادن عناصر راحت تر خواهد بود.
با کسب تجربه بیشتر ، می توانید مرزها را در صورت لزوم به روز کنید.اما چگونه این شبکه را ایجاد می کنید؟ در این مورد باید گفت که اساساً تعداد و اندازه ستون ها تصادفیبه نیاز شما بستگی دارد. هرچه طراحی شما با جزئیات بیشتری انجام شود ، تعداد ستونهای بیشتری نیز به شبکه نیاز خواهید داشت. اگر مردد هستید ، از یک همکار باتجربه کمک بخواهید.
حفظ هماهنگی خطوط افقی ، یکی از موارد مهم هنگام طراحی است . این در حالی است که فاصله های عمودی باید ثابت باشند. مانند ردیف های صفحه گسترده ، به شما کمک می کنند تا متن را در فواصل زمانی یکسان نگه دارید.این ردیف ها باید چقدر بزرگ باشند؟ این مورد هم به مانند موارد قبلی به شما بستگی دارد و شما تصمیم گیرنده خواهید بود. با این حال ، من توصیه می کنم از 8 پیکسل یا ضرب 8 (مانند 16) استفاده کنید.
وقتی اندازه قلم ها را تعریف می کنید ، اطمینان حاصل کنید که اندازه ها را با همان اندازه افزایش ندهید. وقتی متن را بزرگ می کنید ، باید غیر خطی باشد. این بدان معناست که هرچه متن در حال بزرگتر شدن باشد ، فضای بیشتری از کار شما را خواهد گرفت . فرض کنید شم ایک بلوک نوشتاری با اندازه قلم 12 پیکسل دارید و میخواهید آن را بزرگ کنید. شما 14 پیکسل را امتحان می کنید و راضی هستید.
اما سپس تصورکنیدکه یک عنوان بزرگ (40 پیکسل) دارید و می خواهید آن را بزرگتر کنید. آیا اندازه را فقط 2 پیکسل از 40 به 42 افزایش میدهید؟البته که نه. ازنظربصری،متن به یک تغییربسیاربزرگ تر نیاز دارد. شایدلازم باشد آنرا 24 پیکسل افزایش دهید، و به شما یک عنوان بزرگتر 64 پیکسلی بدهد.
تنظیم درست فضای سفید بسیار مهم است. این عناصر نباید خارج (حاشیه) و یا داخل به نظر برسند . در چنین مواردی باید باز هم به عدد جادویی 8 اعتماد کنید. این جابجایی ها را با 8 پیکسل افزایش دهید (4 برای عناصر کوچک). همانند اندازه قلم ، هرچه فاصله مورد نظر شما بیشتر باشد ، افزایش مقدار بیشتری نیز ضروری خواهد بود (مجدداً باید این موارد را از قبل تعریف کنید).
دیدگاهتان را بنویسید