الگوهای طراحی رابط کاربر (UI)

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

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

الگوهای طراحی رابط کاربر (UI) چیست؟

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

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

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

مقاله «چک لیستی برای بهبود رابط کاربری محصولات» را همین حالا مطالعه کنید.

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

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

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

چرا الگوهای طراحی UI مهم هستند؟

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

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

فرمول الگوی طراحی UI

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

الگوهای طراحی UI شامل موارد زیر است:

مشکل: کاربر می خواهد چه کاری انجام دهد؟

زمینه: چه زمانی باید از الگو استفاده شود؟

راه حل: راه حل چیست؟

مثال ها: الگو قبلاً از کجا و چگونه اجرا شده است؟

 متداول ترین الگوهای طراحی UI کدامند؟

برخی از الگوهای معمول طراحی رابط کاربری (UI) در دسته های زیر قرار می گیرند:

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

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

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

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

 الگوهای طراحی UI تیره چیست؟

الگوهای طراحی تاریک UX / UI ، مانند سوالات ترفندها یا گزینه هایی که به سختی در منوی کشویی مشاهده می شوند ، الگوهایی هستند که کاربران را فریب می دهند تا ناآگاهانه یک کار خاص را انجام دهند. بعضی از الگوهای تیره کمتر آسیب می رسانند ، مانند فریب کاربران برای ثبت نام در ایمیل. دیگران اطلاعات اصلی را که به معنای قفل شدن کاربران در عضویت یا بدهی مستقیم است ، مخفی می کنند. الگوهای تیره بسیار بیشتر از آنچه تصور می کنید رایج است. با این وجود ، آنها معمولاً مورد اخم قرار گرفته و در صورت سو استفاده  می توانند اعتماد بین یک شرکت و کاربران آن را از بین ببرند. طراحی UI تا حد زیادی به همدلی و ایجاد یک رابط کاربری بسیار لذت بخش است – ناامیدکننده نیست!

نحوه استفاده از الگوهای طراحی UI

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

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

کتابخانه های الگوی طراحی UI موجود را از کجا می توان پیدا کرد

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

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

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

الگوهای مشترک طراحی UI

Breadcrumbs 

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

ثبت نام تنبل ها (تسهیل پرکردن فرم)

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

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

فهرست عناوین شامل:

• عنوان/سرتیتر
• خلاصه مطالب
• نظرات
• تاریخ
• سایر داده های متا

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

اقدامات اصلی را پاک کنید

 دکمه ها را با رنگ برجسته کنید تا کاربران بدانند چه کاری انجام دهند (به عنوان مثال ، “ارسال”). ممکن است مجبور شوید تصمیم بگیرید که چه کارهایی اولویت دارند.

تب های داینامیک (افشای تدریجی)

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

گالری تصاویر

عکس ها را آرشیو کرده و هر موضوع را جداگانه به کاربر نمایش دهید. نمایش همه عکس ها به کاربران باعث گیج شدن آن ها می شود.

برنامه های اشتراک 

برای عضویت در نرخ های مشخص ، منوی گزینه (از جمله دکمه های “ثبت نام”) را به کاربران ارائه دهید.

تابلوی امتیازات 

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

الگوهای تاریک 

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

مطالعه مقاله «چطور از دارک مود در طراحی رابط کاربری استفاده کنیم» به شما دانشجویان عزیز توصیه می‌شود

مراقبت از الگوهای طراحی

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

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

الگوها را متناسب با زمینه های خاص تنظیم نکنید.

تصویر مارک مشخصی را سفارشی نکنید (به عنوان مثال وب سایت شما در نهایت شبیه فیس بوک است).

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

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

چگونه کتابخانه الگوی طراحی UI خود را ایجاد کنیم

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

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

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

ایجاد سلسله مراتب مشخص

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

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

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

افکار نهایی

بنابراین در اینجا ما آن را داریم ، همه آنچه شما باید در مورد الگوهای طراحی UI بدانید! ممکن است هضم زیاد به نظر برسد ، اما همین که آزار آنها را گرفتید ، روند طراحی شما را بسیار نرمتر می کند.

برای آشنایی با ابزارهای الگوهای طراحی رابط کاربر (UI) مقاله “۱۰ ابزار طراحی UI که همیشه به آن نیاز دارید!” را مطالعه نمایید.

نتیجه گیری

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

ایجاد یک طرح خوب بدون درک کامل این عناصر و اصول طراحی نیز کاملاً امکان پذیر است. با این حال، این کار به شیوه “استدلال طراح” انجام شده و ممکن است برای ایجاد طرحی با ظاهر خوب و یک تجربه کاربری بهینه نیاز به آزمون و خطا زیادی باشد. با یک طراحی خوب و بهینه می توانیم به استراتژی سئو سایت کمک کنیم. هر چه ظاهر سایت ما بهتر باشد و کاربران دسترسی آسانی داشته باشد کاربران بیشتر و در نتیجه مشتریان بیشتری جذب سایت ما خواهند شد.

منبع: وبسایت careerfoundry

نویسنده

کیمیا وحیدی

من کیمیا وحیدی هستم
دانشجوی برتر دوره آموزش سئو آکادمی آمانج،
کارشناس سئو و تولید محتوا

مشاهده سایر نوشته های من