SOFT UI: حس و حال جدیدترین روند طراحی رابط کاربری

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

حتی اپل نیز در جریان این روند قرار دارد و از ان استفاده کرد . این شرکت در سیستم عامل های موبایل و دسک تاپ خود تغییراتی را ایجاد کرده است که از این سبک استفاده می کنند. عناصر Soft UI که توسط اپل معرفی شده اند ، جنبه های مختلفی از طراحی Microsoft Fluent UI را نیز منعکس می کنند. 

بنابراین ، اگر رابط کاربری نرم یا Soft  چنین جایگاهی دارد ، چه چیزی باید درباره آن بدانیم؟ UI نرم چگونه کار می کند و استفاده از آن چه مزایا و معایبی دارد؟

Soft UI (Neumorphism) چیست؟

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


اصطلاح Neumorphism از سبک طراحی قبلی مشتق شده است - skeuomorphism ، جایی که طراحان  تا آنجا که ممکن است طرح را  به نمونه واقعی نزدیک می کنند. احتمالا تغییر بین iOS 6 و 7 را به یاد داشته باشید ..، سوئیچ بین طرح های اسکیومورفیک و تخت اتفاق افتاد. 

Neumorphism بیش از حد روی مواردی مانند کنتراست یا شباهت بین عناصر واقعی و دیجیتالی تمرکز نمی کند. درعوض ، عملکرد "رابط کاربری نرم" تجربه روان تری را برای کاربران ایجاد می کند.

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


ویژگی های SOFT UI

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



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




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

نمادهای یکپارچه: همه چیز  در یک طراحی سایت و  نرم افزار UI  باید کاملاً متناسب باشد. در نمونه زیر که توسط Surja Sen Das Raj طراحی شده است ، می توانید ببینید که چگونه همه رنگ ها ، سایه ها و شیب ها به طور مداوم و یک دست  به یکدیگر متصل می شوند. از آنجا که همه چیز یکنواخت است ، تجربه کاربری کاملاً در جریانی بر طراحی حاکم است .


پیاده سازی عناصر نرم افزاری UI در طراحی به سبک نرم

 Neumorphism در روند طراحی UI شما چگونه به نظر می رسد؟

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

درطراحی  رابط نرم افزاری  به سبک نرم، کلید موفقیت سایه ها و موارد برجسته و توجه به انها است.


بیایید نگاهی به چند مرحله اصلی کار بیندازیم.

یا نرم افزار یا طراحی سایت شما بقدری دوستانه است که رابط کاربری نرم انتخاب شما باشد

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

به عنوان مثال نگاهی به این طراحی الکساندر پلیوت بیندازید.


ایجاد گرادیان های نرم و لطیف

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


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





جزئیات کمی را در نظر بگیرید

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




مشکلات طراحی UI نرم  

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


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


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



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

یکی دیگر از موضوعات مهم Neumorphism این است که ظرافت آن می تواند منجر به مشکلاتی در جذب کلیک و نرخ تبدیل شود. قابلیت استفاده مهمترین ملاحظه در طراحی هر UI است.


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


و در انتها چند نمونه  کیت رابط کاربری نرم برای شما (کیت های رایگان)

Neumorphism Button kit    . 

Neumorphic Elements Sketch file 

Neumorphism UI kit. 

Neumorphic UI kit for Adobe XD. 

Dashboard Interface UI for Sketch. 

طراحی تجربه کاربری با طراحی وب سایت پایان نمی یابد

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

تاریخ : 1400/03/24  

 

بخوانید

10 افزونه افترافکت برای طراحان UI

After Effects به یکی از کاربردی ترین ابزارها برای طراحی و نمونه سازی انیمیشن برای پروژه های تعاملی تبدیل شده است. اما AE ابزاری پیچیده با هزاران ویژگی برای یادگیری است. خوشبختانه افزونه ها ، ابزارها و برنامه های کاربردی بسیاری برای سرعت بخشیدن به گردش کار ، مدیریت زمان ومواجه شدن با پیچیدگی های انیمیشن وجود دارد.

تاریخ : 1400/03/27  

 

بخوانید

کتابخانه ها و ابزار طراحی انیمیشن جهت UI سایت

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

تاریخ : 1400/03/29  

 

بخوانید


Privacy Preference Center