مانایید
مانایید
خواندن ۳ دقیقه·۲ سال پیش

3 نکته مهم برای داشتن طرحی که خوب به نظر برسه!


چکیده:

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

جزییات بصری مانند قلم‌ها، رنگ‌ها و ترازبندی، در خلق یک تجربه و در نهایت ارزیابی کاربر از نام و نشان شما نقش داشته  و ویژگی‌های برند را (مانند دوستی یا قابلیت اطمینان) بیان می‌کنند.  به راحتی می توان با یک نگاه متوجه شد که یک طرح خوب به نظر می رسد یا نه؟ اما اغلب تشخیص اینکه چرا خوب به نظر می رسد بسیار سخت است.  در این مقاله ما سه طراحی رابط کاربری را تجزیه و تحلیل و اصول طراحی بصری که آنها را جذاب می‌کند را بررسی میکنیم.



یک –  تایپوگرافی و فاصله گذاری:

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

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


در طراحی از یک شبکه 3 ستونی استفاده شده است. هر عنصر متنی با یک خط شبکه تراز می شود. یک واحد ثابت از فاصله گذاری( با استفاده از ویژگی padding ) به عنوان فضای سفید عناصر هر بخش را به صورت عمودی از هم جدا می کند. آیکون ها در نوار کناری سمت چپبا یک واحد ثابت جدا کننده از هم جدا شده اند با فاصله گذاری دو برابر برای جدا کردن گروه‌ها استفاده شده است. عنوان WRITTEN BY به صورت کاپیتال آن را از بقیه متن متمایز می‌کنداستفاده از فضای سفید زیاد تجربه خواند را لذت بخش تر میکند.
در طراحی از یک شبکه 3 ستونی استفاده شده است. هر عنصر متنی با یک خط شبکه تراز می شود. یک واحد ثابت از فاصله گذاری( با استفاده از ویژگی padding ) به عنوان فضای سفید عناصر هر بخش را به صورت عمودی از هم جدا می کند. آیکون ها در نوار کناری سمت چپبا یک واحد ثابت جدا کننده از هم جدا شده اند با فاصله گذاری دو برابر برای جدا کردن گروه‌ها استفاده شده است. عنوان WRITTEN BY به صورت کاپیتال آن را از بقیه متن متمایز می‌کنداستفاده از فضای سفید زیاد تجربه خواند را لذت بخش تر میکند.



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

تنوع در قلمهای استفاده شده در سایت Medium شامل سبکهای متفاوت از یک خانواده قلم (حروف کوچک، پررنگ، مورب، زیرخط دار) با تغییرات جزئی در رنگ (مشکی در مقابل خاکستری) می باشد

در واقع در این سایت از یک قلم استفاده شده و برای ایجاد تمایز در بین انواع محتوا از تغییرات رنگ و سبک های مختلف قلم استفاده میکند. چرا که استفاده از قلمها یی با سبکهای متفاوت مانند استفاده از تعداد زیاد رنگ، علاوه بر مختل کردن انسجام و یکپارچگی طرح باعث سردرگمی کاربر می شود. این کار باعث می شود که کاربر در طرح صفحه نتواند هیچ نظم و الگویی را شناسایی کند و در نتیجه طرح شما را تصادفی و بی قاعده ارزیابی می کند. برای مثال در تیتر WRITTEN BY استفاده از حروف کاپیتال علاوه بر ایجاد توجه، نسبت به بقیه متن تمایز ایجاد میکند به عنوان یک قاعده کلی، یک سیستم تایپوگرافی را شناسایی کنید و طراحی خود را به 1 یا 2 قلم محدود کنید. همیشه از نوع یکسانی (مورب، پررنگ، حروف کوچک) برای هدف های مشابه استفاده کنید

وب سایت ویرگول با پیروی از اصولی مشابه (شکل زیر) یک نمونه خوب در  وب پارسی با خوانایی بالاست


.....

اگه این مقاله رو دوست داری امیتونی اینجا ادامه مقاله رو مطالعه کنی

طراحی سایتاصول طراحی سایتطراحی رابط کاربریاصول طراحی
شاید از این پست‌ها خوشتان بیاید