چرا در سطر دوم از اما استفاده میشود

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

فاصله بین خطوط

فاصله خطوط فاصله بین هر خط از یک پاراگراف است. Word به شما این امکان را می دهد که بین یک خط، دو خط یا هر مقداری که می خواهید فاصله بگذارید. فاصله پیش فرض در Word 1.08 است که کمی بیش از یک واحد فضا است. در تصویر زیر تفاوت خطوط را می بینید. از چپ به راست، این تصویر فاصله پیش‌فرض، یک واحد فاصله و دو واحد فاصله را به شما نشان می‌دهد.

نکته: فاصله خطوط را فاصله بین خطوط نیز می گویند.

پیکربندی فاصله خطوط

متنی را که می خواهید قالب بندی کنید انتخاب کنید.

در تب Home روی دستور Line and Paragraph Spacing کلیک کنید. سپس فاصله مورد نظر را از مقادیر انتخاب کنید.

فاصله خطوط در سند شما تغییر خواهد کرد.

تنظیم فاصله خطوط

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

Exactly: وقتی این گزینه را انتخاب می کنید، فاصله خطوط دقیقاً اندازه گیری می شود، همانطور که اندازه فونت نیز اندازه گیری می شود. به عنوان مثال، اگر از اندازه فونت 12 استفاده می کنید، می توانید از مقدار 15 برای فاصله استفاده کنید.

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

Multiple: اما با استفاده از این قابلیت می توانید فاصله ای را که می خواهید بین خطوط ایجاد کنید تایپ کنید. به عنوان مثال، انتخاب Multiple و تغییر فاصله به 1.2 فاصله بین خطوط شما بیشتر از یک واحد ایجاد می کند. اگر می خواهید خطوط به هم نزدیکتر باشند، می توانید مقدار کوچکتری مانند 0.9 را انتخاب کنید.

فاصله بین پاراگراف ها

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

برای قالب بندی اندازه بین پاراگراف ها

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

پاراگراف(هایی) را که می خواهید قالب بندی کنید انتخاب کنید.

در تب Home روی دستور Line and Paragraph Spacing کلیک کنید. از منوی کشویی روی Add Space Before Paragraph یا Remove Space After Paragraph کلیک کنید. در این مثال گزینه Add space before paragraph را انتخاب می کنیم.

اکنون فاصله پاراگراف در سند شما تغییر خواهد کرد.

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

نکته: البته می‌توانید از همان تنظیمات پیش‌فرض Word برای قالب‌بندی سند خود استفاده کنید.

تا 60% تخفیف

برای 4 نفر

همراه با صدور گواهی

تا پایان تخفیف ها باقی مانده است

اکنون کلیک کنید

شبکه ها راهی برای تراز، نظم دادن، ایجاد سلسله مراتب و “منطق” به طور سیستماتیک در طرح های طرح های شما هستند. این باعث می‌شود همه چیز کمتر شناورتر و مرتب و مرتب‌تر شود، و معمولاً می‌توانید با نگاه کردن به طرح‌هایی که به درستی از شبکه استفاده نمی‌کنند، متوجه شوید. با تبدیل شدن افراد به طراحان بهتر، چشمان آنها دائماً خطوط افقی و عمودی را در همه جا ترسیم می کنند تا نظم، تعادل و تشخیص طراحی قدرتمند را بشناسند.

مطمئنا همه شما می دانید که چرا باید از گریدها در طراحی استفاده کنید، اما آیا تا به حال به نحوه استفاده صحیح از این شبکه ها فکر کرده اید؟

بهتر است ابتدا آناتومی شبکه را توضیح دهید.

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

نام های دیگری مانند واحدها، عناصر، ظروف والد نیز به همین معنا به کار می روند.

ستون ها خطوط ضخیم رنگی هستند که عرض محتوای شما را تشکیل می دهند. عناصر طراحی شما بر روی تعداد مشخصی از ستون ها قرار می گیرند. به طور سنتی، عرض ستون ها در یک سیستم طراحی تغییر نمی کند، اما تعداد ستون ها در سیستم های مختلف تغییر می کند. در رایانه ها به 12 ستون و در تلفن های همراه 4 ستون افزایش می یابد. و 8 ستون در قفسه ها. .

شما می توانید از هر اندازه ستونی برای طراحی خود استفاده کنید، بین 60 تا 80 پیکسل، اما انتخاب بهترین عرض بسیار مهم است زیرا عرض محتوای شما را منعکس می کند و به طراحی شما زیبایی می بخشد.

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

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

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

قرار دادن عناصر صفحه در چندین ستون

محتوای شما باید در تعدادی ستون به دلخواه قرار گیرد، در مثال زیر کارت ها در ستون های 3، 6 و 4 قرار گرفته اند.

ممکن است به خودتان بگویید، به این ترتیب محتویات ما خیلی به هم نزدیک می شوند (و قانون فضای سفید نقض می شود) و ممکن است در نگاه اول نامرتب به نظر برسند. اما برای حفظ نظم خود می توانیم به صورت زیر طراحی کنیم.

در تصویر در واقع محتوای 3*3 معمولی داریم که هر ستون دارای حاشیه نامرئی برای نظم دهی بهتر و رعایت این قانون است و شما به راحتی می توانید این موضوع را با برنامه نویس خود در میان بگذارید.

ببینید چقدر تصویر تمیز و مرتب است.

مطالب را به طور منظم روی ستون ها قرار دهید

محتوا را بین خطوط خالی نگذارید

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

کارت اصلی روی ستون ها قرار گرفته

اگر دلیلی برای قرار دادن عناصر خارج از حاشیه ندارید، این کار را نکنید.

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

حالا ببینیم واکنش گرا چگونه کار می کند و چند نوع داریم؟

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

در طراحی سنتی، عرض ستون ها و ناودان ثابت می ماند و تنها تعداد ستون ها در وسایل مختلف تغییر می کند.

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

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

در این حالت گویی تصاویر و متون در صفحه روان هستند و با هر تغییر سایز مرورگر، اندازه متن و تصویر نیز تغییر می کند.

سایت Airbnb این وضعیت را ایجاد کرده است

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

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

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

برای دیدن قسمت جذاب منوی سایت حتما به این سایت سر بزنید.

در این سیستم هیچ حاشیه جانبی یا ناودانی تعریف نشده است. در عوض، صفحه به دو قسمت تقسیم می شود. محتوا در این قسمت ها قرار می گیرد و هر قسمت به عنوان یک صفحه هنری جداگانه در نظر گرفته می شود.

در نهایت ….

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

سیستم طراحی متریال گوگل

سیستم طراحی Intuit

سیستم طراحی کربن IBM

… و در اینجا لیست عظیمی از سیستم های دیگر است که می توانید مرور کنید

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

امیدوارم این مقاله برای شما مفید بوده باشد

منبع:

https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-970de4c16e01

https://designsystemsrepo.com/design-systems/