پیاده سازی UI های جذاب و 7 قانون مهم – قسمت اول

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

در نظر داشته باشید در این سری از مقالات آموزش رابط کاربری یا UI ، ما نکاتی را به شما آموزش خواهیم داد که ممکن است از چشم شما دور مانده باشد اما تاثیر بسزایی در جذابیت طرح خروجی شما دارد. چرا که همین نکات کوچک طراحی است که UI شما را برای کاربر چشم نواز و جذاب می کند و نکته جالب این جذابیت این است که کاربر نمی تواند درک کند چه عنصری در طرح شما باعث جذابیت شده. اما خود طراح قطعا می داند که رعایت چند نکته کوچک و به کار بردن عناصر درست، در جای درست باعث جذب شدن چشم کاربر به سمت UI شده است.

7 قانون برای پیاده سازی UI های جذاب

پیش از شروع به بررسی 7 قانون جادویی طراحی UI لازم است به این نکته اشاره کنیم که این آموزش ها برای UI / UX کار ها و همچنین توسعه دهندگان بسیار مناسب و کاربردی است.

چرا توسعه دهندگان؟

تصور کنید توسعه دهنده ای هستید که برای زیبایی خروجی خود هیچ ایده و حتی تخصصی ندارید، خب اشخاصی که تنها توسعه دهنده هستند و توانایی پیاده سازی UI را ندارند کاری جز کپی برداری از انواع UI ها در بستر هایی مانند Dribble ، Google و Pinterest نمی توانند انجام دهند که البته باید گفت این کار هم نتیجه خوشایندی به همراه ندارد چرا که هر طرح مناسب با سناریو و Concept مناسب اپلیکیشن یا وب سایت مورد نظر پیاده شده و نمی تواند طرح مناسبی برای موضوع دیگری باشد که هرکسی صرفا بتواند کپی و پیاده کند.

دلیل دیگر الزام یادگیری نکات طراحی UI وب سایت و موبایل و… این است که شما مجبورید برای نمایش هرچه بهتر خود (منظور نمونه کار ها و رزومه شما است) به مشتری ها، اطلاعات مربوطه را طوری به آنها نمایش دهید که چشم و ذهن آنها را درگیر کنید و چه چیزی بیشتر از یک UI با UX مناسب و جذاب می تواند به شما کمک کند؟

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

انتظار می رود در انتهای این سری مقالات شما بتوانید 7 قانون اساسی و کلیدی در پیاده سازی UI را فرا بگیرید.

نکته:‌
سعی کنید تا آنجایی که می توانید نمونه UI های موجود در اینترنت را ببینید چرا که با دیدن هر طرح، قدرت آنالیز شما بالاتر رفته و چشمتان تنوع بیشتری دیده پس در نتیجه زمان طراحی قدرت آنالیز و ذهن باز تری خواهید داشت.

هفت قانون برای طراحی UI یا User Interface های جذاب :

1. نور از آسمان می آید.
2. اول سیاه و سفید.
3. فضای سفید را دوبرابر کنید.
4. روش های قرار دادن متن روی تصویر را یاد بگیرید.
5. متن را popup کنید و un popup کنید.
6. فقط از فونت های خوب استفاده کنید.
7. مثل یک هنرمند دزدی کنید.

قانون اول برای پیاده سازی UI های جذاب: نور از آسمان می آید

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

نکته بسیار مهم در طراحی رابط کاربری که می توان گفت غیر واضح ترین نکته در بین طراحان نیز هست، این مورد است که نور از آسمان می آید.

نوری که از آسمان می آید بسیار هموار تر و چشم نواز تر است نسبت به نوری که از پایین به بالا می تابد چرا که خروجی نور از پایین به بالا را می توان به نوعی عجیب نامید.

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

می توانید ببیند که صفحه نمایش ما مسطح است و نه برجسته اما ما زمان طراحی UI وب سایت یا موبایل و… تمام تلاش خود را می کنیم که عناصر ملموس تر و 3D تر پیاده شوند تا حس طبیعی تری به کاربر دهند که این مهم تنها با سایه در پایین عناصر بوجود می آید.

توضیحات تصویر بالا

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

• همانطور که می بینید پایین دکمه که فشرده نشده کمی تیره است. ( این همان حالت اولیه و طبیعی است که نور از آسمان می تابد! ) و در بالای دکمه روشنایی بیشتری نسبت به پایین دکمه وجود دارد. در حالت زوم شده عکس می توانید این میزان تیرگی کمی که البته تاثیر مثبتی دارد را ببینید.
• دکمه فشرده شده هم همانطور که می بینید پایین آن تیره تر از بالای آن است اما به طور کلی نسبت به دکمه فشرده نشده تیره تر است چرا که دکمه فشرده شده و در سطح صفحه نمایش است و دیگر نور به آن نمی تابد. ( به تصاویر Side View دقت کنید ) می توانیم اینطور نیز بگوییم که در دنیای واقعی هم اگر شما دکمه را فشار دهید، آن دکمه تیره تر از زمانی است که فشرده نشده چرا که زمان فشردن سایه دست شما برروی دکمه خواهد افتاد.

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

خب در مثال های فوق ما تنها یک نمونه کوچک از تاثیر سایه و نور برروی UI را دیدیم اما به مثال زیر که مربوط به قسمت تنظیمات iOS 6 است توجه کنید:

توضیحات تصویر بالا

• لبه بالایی که در تصویر با ( INSET CONTROL PANEL ) مشخص شده، سایه کمی ایجاد کرده است.
• دکمه ON بصورت مقعر تنظیم شده و قسمت پایینی آن روشن تر از قسمت بالایی آن است.
• آیکن ها را می بینید که عمود بر منبع نور هستند و طبیعتا همین امر باعث شده نور بسیار از بالا دریافت کنند و قسمت بالایی آنها بسیار روشن تر از قسمت پایینی آنها باشد. بنابراین نور زیادی به چشم شما خواهد خورد.
• تقسیم کننده ( DIVIDER NOTCH ) نیز تورفتگی دارد و از منبع نور دور است.

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

همچنین بخوانید: رابط کاربری UI اپلیکیشن موزیک پلیر برای ios با Adobe XD

عناصر با نمای تورفتگی و برآمدگی

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

• Text input fields
• Pressed buttons
• Slider tracks
• Radio button (unselected)
• Checkboxes

همچنین می توان موارد زیر را به عنوان عناصر با برآمدگی یا outset معرفی کرد:

• Buttons (unpressed)
• Slider buttons
• Dropdown controls
• Cards
• The button part of a selected radio button
• Popups

طرح های تخت یا Flat design ها چه می شوند؟

در حدود 7 سال طرح Flat که دقیقا معنای نامش را می داد (طراحی تخت) trend بود و بسیار استفاده می شد. درواقع طرح Flat به این معنا بود که عناصر باید فاقد هرگونه تو رفتگی یا برآمدگی باشند و تنها خطوط و اشکال تک رنگ می توانید استفاده کنید.

طبیعتا سادگی و تمیزی طرح Flat جذاب است اما طرح های 3D این امکان را به ما می دهد که عناصر طبیعی و ملموس تری به کاربران ارائه دهیم.

در سال 2020 بود که Flatty design بوجود آمد که درواقع تلفیقی از تمیزی و سادگی Flat design و طرح های ملموس 3D هستند که با سایه ها به هرچه طبیعی تر شدن طرح کمک می کنند.

انواع طرح ها

طرح Skeuomorphic: یک طرح دارای سایه ، gradient و بافت قابل لمس مانند تمامی عناصر طبیعی در دنیای واقعی است با حس کلیک محسوسی که بوجود می آورد.

طرح Flat: تنها خطوط و اشکال بدون هیچ سایه ای که گاها با مشکل نرساندن مفهومه “قابل استفاده” بودن همراه است.

طرح Flatty:‌ طرح ها در این concept دارای مقداری سایه جهت حس قابل استفاده بودن که بیشتر به صورت سایه بیرونی (outset) است و یک تعادل بین طرح تمیز و ساده و ملموس بودن، هستند.

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

برای مثال دیگر flatty design می توان به Google’s Material Design اشاره کرد.

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

قانون دو:‌ اول سیاه و سفید

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

این روز ها یکی از اصلی ترین دغدغه دیزاینر ها، بحث پیاده سازی UI / UX اپلیکیشن های موبایل است. اما نکته ای که تمام طراحان باید در نظر داشته باشند این است که برای مثال موبایل ها از نظر سایز صفحه نمایش بسیار متنوع هستند و هنوز موبایل هایی با صفحه نمایش بسیار کوچک هم وجود دارد.

طراحان حرفه ای چگونه کار می کنند؟

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

به این خاطر از محدودیت ها گفتیم که به این نکته اشاره کنیم، طراحی سیاه و سفید نیز خود به نوعی محدودیت است!

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

این روش بهترین و مطمئن ترین راه برای پیاده سازی یک طرح ساده و تمیز است.

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

قانون B&WF (اول سیاه و سفید)

قانون B&WF (Black & White First) شما را به عنوان یک طراح مجبور به تمرکز برروی مؤلفه هایی مانند فاصله، اندازه، و layout first می کند. این موارد اصلی ترین نگرانی ها زمان پیاده سازی یک طرح ساده و تمیز است.

مواردی هستند که B&WF نیز برای آن ها خیلی کارآمد نخواهد بود. برای مثال طرح هایی با هدف خاص مانند طرح های کارتونی، پر زرق و برق و … . این گونه طرح ها از designer می خواهند که از رنگ ها به بهترین نحو ممکن استفاده کنند که اپ در عین زیبایی بسیار هم پر زرق و برق باشد.

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

در ادامه تنها به قانون B&WF (اول سیاه و سفید) می پردازیم.

اضافه کردن یک رنگ به طرح خاکستری یا سیاه و سفید می تواند بسیار جلب توجه کند.

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

تمرین با رنگ ها، از چه رنگی استفاده کنم؟

کمتر کسی ممکن است RGB را نشناسد و یا حتی استفاده نکرده باشد. بله درست است که رنگ ها درقالب کد RGB hex بسیار گسترده ست و در تمامی پلتفرم ها استفاده می شود اما برای طراحان HSB بسیار کارآمد تر است. (که مترداف HSV و همچنین شبیه به HSL است)

همانطور که گفته شد HSB از RGB بهتر است زیرا بسیار به فکر و تصور ما از رنگ، شبیه است و همچنین شما می توانید به سادگی پیش بینی کنید که چه میزان تغییر در مقدار رنگ HSB چه تغییر بر رنگ شما خواهد گذاشت.

با تغییر saturation و brightness هر مقدار رنگ، می توانید چندین رنگ dark، lights، accents، eye-catchers ، ایجاد کنید.

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

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

معرفی سایت های جهت انتخاب رنگ

Adobe Color CC
یک ابزار فوق العاده و بسیار کارآمد برای پیدا کردن، ویرایش کردن و ساختن انواع ترکیب رنگ.
به این وب سایت سری بزنید و خواهید دید که می توانید ترکیب رنگ های خود را به روش های مختلف ایجاد کنید.

Dribbble search-by-color
یک ابزار دیگر که می توانید کمک بسیاری در پیدا کردن رنگ های متناسب با رنگ انتخابی شما بکند، ابزار search-by-color مربوط به وب سایت Dribble است. به این صورت که اگر شما هم اکنون یک رنگ پایه انتخاب کرده اید، می توانید رنگ خود را وارد این ابزار کنید و ببینید طراحان مطرح دنیا با رنگ پایه شما چه UI هایی پیاده و چه ترکیب رنگ هایی استفاده کرده اند به این ترتیب شما هم می توانید رنگ های match شده با رنگ پایه انتخابی خود را پیدا کنید و هم می توانید از طرح های پیاده شده با رنگ انتخابی شما، ایده بگیرید.

در قسمت های آینده به گزینه های دیگر خواهیم پرداخت.

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

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