طراحی UI های جذاب و 7 قانون مهم – قسمت دوم

در ادامه پیاده سازی یا طراحی UI های جذاب و 7 قانون مهم – قسمت اول در این پست از تجاری اپ ما به بررسی دو قانون مهم دیگر یعنی روش های قرار دادن متن بر روی عکس و دو برابر کردن فاصله، در طراحی رابط کاربری (UI) های جذاب موبایل و وب سایت و … می پردازیم.

طراحی UI های جذاب و 7 قانون مهم – قسمت دوم

قانون سوم – فاصله (فضای سفید) را دو برابر کنید

برای اینکه UI خود را طراحی شده نمایش دهید، میزان زیادی فاصله ایجاد کنید.

در قانون دوم از پست پیشین تجاری اپ گفتیم که قانون B&WF شما را ملزم به فکر کردن درباره فواصل و پیاده سازی یا طراحی UI بدون رنگ می کند و چقدر این تکنیک می تواند مفید باشد.
هم اکنون زمان آن است که درباره فواصل در لایه ها بطور مفصل توضیح دهیم.

بی شک اگر قبلا کدهای خام HTML را زده باشید صفحه زیر برا شما بسیار آشناست

همانطور که می بینید تمامی عناصر در هم ریخته شده و بدون هیچ فاصله ای پیاده شدند. پاراگراف ها فاصله دارند اما نه خیلی زیاد، فاصله بین خطوط عملا وجود ندارد،‌ پاراگراف تا انتهای صفحه کش می آید حال چه 100px باشد و چه 10000px که این اصلا خوب نیست.

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

فضای سفید، HTML، CSS

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

همه چیز با فضای سفید شروع می شود تا زمانی که شما یک عنصر دیگر را به آن اضافه کنید.

به UI وب سایت موزیک زیر دقت کنید

همچنین بخوانید: حذف تمام فاصله ها از رشته با جی کوئری JQuery

به منو سمت چپ دقت کنید

فاصله عمودی بین آیتم های منو، دقیقا دو برابر ارتفاع خود متن آیتم است! یا حتی متن PLAYLIST که 15px با خط جدا کننده پایین فاصله دارد و این میزان فاصله بیشتر از ارتفاع cap height است.

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

فاصله زیادی نیز در nav bar بالا وجود دارد. متن Search all music درواقع 20 درصد از ارتفاع را به خود اختصاص داده است و آیکن ها هم به همین ترتیب.

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

استفاده از فواصل بصورت سخاوتمندانه حتی می تواند برخی از کثیف ترین رابط کاربری ها را به نوعی جذاب و ساده جلوه دهد. برای مثال طرح هایی مانند انجمن ها

یا حتی Wikipedia

همچنین بخوانید: فاصله space بین کلمات در تکست ویو (TextView)

موارد زیر را تمرین کنید تا فاصله گذار ماهری شوید:

• بین خطوط فاصله بگذارید.
• بین عناصر فاصله بگذازید.
• بین گروه عناصر فاصله بگذارید.

این مسیر را بروید و خواهید دید نتجه شما چقدر زیبا خواهد شد.

قانون چهارم – روش های قرار دادن متن روی تصویر

روش های محدودی برای قرار دادن متن روی تصویر وجود دارد که بتواند خروجی زیبا و تمیزی داشته باشد که در ادامه ما پنج روش را به شما آموزش می دهیم.

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

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

روش اول: متن را مستقیما بر روی عکس قرار دهید

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

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

موارد زیر، مشکلات و اخطار هایی است که در زمان پیاده کردن این روش باید نسبت به آن هوشیار باشیم:

1. عکس باید کمی تیره باشد و contrast-y edges بسیار نداشته باشد.
2. متن باید سفید رنگ باشد. نمونه هایی که با این روش و با این رنگ متن، تمیز و زیبا پیاده شده باشند زیاد نیستند اما ما نمونه ای از این طرح را در ادامه برای شما آورده ایم.
3. حتما طرح خود را در تمامی screen ها و اندازه های صفحه نمایش تست کنید تا مطمئن شوید خروجی شما در هر حالتی قابل خواندن است.

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

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

روش دوم: پوشش کل تصویر

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

در ادامه یک عکس جذاب از پوشاندن کامل عکس با متن آورده شده که همانطور که می بینید عکس با یک فیلتر مشکی و opacity به اندازه 35٪ بصورت کامل پوشانده شده است.

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

این روش همچنین برای عکس های کوچک یا thumbnails نیز جوابگو است.

همانطور که پوشش تیره بر روی تصاویر جواب داد،‌ شما می توانید با رنگ های دیگر بسته به نیاز تصویر را بپوشانید.

روش سوم: متن را در box قرار دهید

این یک روش قدیمی و البته مطمئن است که می توانید متن سفید رنگ را در یک مستطیل شفاف مشکی قرار دهید و مطمئن شوید متن تان خوانا است.

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

این نکته را هم بگوییم که مستطیلی که به نوعی ظرف متن شماست می تواند به هررنگی باشد اما این هماهنگی رنگ ها تماما با شماست.

روش چهارم: عکس را تار (Blur) کنید

یکی از روش های جذاب دیگر متن روی عکس که به علاوه خوانایی متن را هم بالا می برد، تار کردن مقداری از عکس است که متن می خواهد دقیقا آنجا قرار بگیرد.

شما همچنین می توانید از عکس های out-of-focus به عنوان عکس تار استفاده کنید اما باید دقت کنید که متن شما دقیقا بر روی قسمت تار عکس قرار بگیرد تا خوانایی متن دچار مشکل نشود.

روش پنجم: قسمت پایین را محو کنید

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

همانطور که می بینید بر روی عکس ها یک شیب بسیار ملایم از محوی وجود دارد که از وسط با opacity با مقدار 0٪ و رو به پایین با opacity با مقدار 20% است. این جادوی محوی است که ناظران عادی متوجه نمی شوند و فکر می کنند طراح فقط متن سفید رنگ خود را بر روی عکس قرار داده است در صورتی که اینطور نیست و طراح زکاوت هوشی بکار برده تا بدون تغییرات محسوس، متن را به صورت خوانا بر روی عکس نمایش دهد.

نکته: چرا عکس باید از پایین محو شود؟ قطعا به دلیل قانون یک در مقاله پیشین تجاری اپ! توجه کنید که ما در قانون یک گفتیم نور از بالا می تابد و برای هر چه طبیعی تر نشان داده شدن عکس ها باید قسمت پایین آن محو شود و قسمت بالای عکس روشن باقی بماند.

امیدوارم این آموزش برای شما مفید بوده باشد.

کلمات کلیدی: پیاده سازی UI,طراحی UI,طراحی UI وب سایت,طراحی UI موبایل,طراحی رابط کاربری