آیا همه ما فقط به دنبال کپی کردن کارهای یکدیگر هستیم؟ نه کاملا. بسیاری از ما از الگوهای طراحی رابط کاربری (UI) برای شکل دادن به کار خود و در نتیجه طراحی رابط های کاربری مشابه استفاده می کنیم.
سایتها دارای یک نوار بالای ناوبری هستند. برنامه ها از نوارهای زبانه ای استفاده می کنند. اکثر ورودها از دو قسمت ورودی که نام کاربری و رمز ورود شما را درخواست می کنند ، همراه با یک دکمه برای ارسال اطلاعات ورود به سیستم ساخته می شوند.
الگو های طراحی رابط کاربری به ایجاد ثبات در وب کمک می کنند و منابعی را به منظور دستیابی به بهترین و قابل استفاده ترین و موثر ترین طرحها در اختیار طراحان وب قرار می دهند.
الگوهای طراحی رابط کاربر (UI) چیست؟
الگوهای طراحی رابط کاربر UI راه حل های تکراری برای مشکلات رایج در طراحی رابط کاربر هستند. آنها به ما کمک می کنند تا از اختراع مجدد چرخ جلوگیری کرده و طراحی را سریعتر به یک راه حل مطمئن برای مسئله طراحی رابط تبدیل کنیم.
مزایای اصلی استفاده از الگوهای UI :
- نمایش بهترین روش درطراحی سایت برای مبتدیان
کمک به مبتدیان در درک بهتر طراحی مشترک
• بهبود ارتباطات و کاهش خطر مربوط به انتخاب نامناسب و ناشناخته
• بهبود در کیفیت و قیمت
• صرفه جویی در زمان
• بخشیدن تجربه ای دوستانه و بصری به کاربران
متداول ترین الگوهای طراحی UI کدامند؟
برخی از الگوهای معمول طراحی رابط کاربری (UI) در دسته های زیر قرار می گیرند:
- اشتراک اجتماعی:این الگوها ترویج و اشتراک مطالب در سیستم عامل های مختلف رسانه های اجتماعی را تسهیل می کنند.
- پیمایش:الگوهای ناوبری به راهنمایی کاربران در اطراف رابط کمک می کند ، اطمینان حاصل شود که در صورت گم شدن قادر به یافتن مسیر بازگشت به صفحه اصلی هستند.
- ورودی / خروجی:این الگوها شامل اشکال مختلفی است که به کاربران اجازه می دهد اطلاعات را ارسال کنند یا براساس یک اقدام از سایت بازخورد دریافت کنند.
- ساختار محتوا:این الگوها مربوط به نحوه سازماندهی سایت شما به روشی است که بصری و قابل دسترسی احساس می شود.
الگوهای مشترک طراحی UI
اقدامات اصلی را پاک کنید
دکمه ها را با رنگ برجسته کنید تا کاربران بدانند چه کاری انجام دهند (به عنوان مثال ، “ارسال”). ممکن است مجبور شوید تصمیم بگیرید که چه کارهایی اولویت دارند
تب های داینامیک (افشای تدریجی)
فقط ویژگی های مربوط به وظیفه انجام شده را به کاربران نشان دهید ، یکی در هر صفحه. اگر تقاضاهای ورودی را به بخشهایی تقسیم کنید ، بار شناختی را کاهش می دهید.
تب های داینامیک برای فشرده کردن مطالب اضافه مناسب هستند.(به عنوان مثال ، “نمایش بیشتر”).
گالری تصاویر
عکس ها را آرشیو کرده و هر موضوع را جداگانه به کاربر نمایش دهید. نمایش همه عکس ها به کاربران باعث گیج شدن آن ها می شود.
برنامه های اشتراک
برای عضویت در نرخ های مشخص ، منوی گزینه (از جمله دکمه های “ثبت نام”) را به کاربران ارائه دهید.
تابلوی امتیازات
اگر از این الگوی رسانه های اجتماعی استفاده کنید می توانید تعامل را افزایش دهید. برنامه هایی برای رای گیری و یا نظرسنجی
الگوهای تاریک
الگوهای تیره از نظر مضر هستند. برخی از طراحان برای تأمین اطلاعات مشتری ، یک جعبه انصراف از انتخاب را به عنوان پیش فرض می گذارند. دیگران کالاها را به داخل گاری ها می ریزند. برای استفاده مسئولانه از الگوهای تاریک ، باید با اخلاق باشید و با کاربران خود همدلی داشته باشید. الگوهای تاریک خطرناک است زیرا عدم اعتماد و بازخورد کاربر می تواند اعتبار یک مارک تجاری را یک شبه از بین ببرد.
مراقبت از الگوهای طراحی
الگوهای طراحی UI که به طور رایگان در دسترس هستند ، به شما امکان می دهد در وقت و هزینه خود صرفه جویی کنید زیرا می توانید آنها را در طرح خود کپی و تطبیق دهید – به جای اینکه چرخ را برای هر رابط کاربری جدید اختراع کنید. آنها همچنین نمونه سازی سریعتر و آشنایی کاربر را تسهیل می کنند. با این حال ، باید از آنها با دقت استفاده کنید. انتخاب های اشتباه می تواند هزینه بر باشد به عنوان مثال ، اگر:
به اشتباه به مشکلات نزدیک شوید زیرا بیش از حد به الگوها اعتماد کرده اید.
الگوها را متناسب با زمینه های خاص تنظیم نکنید.
الگوی دیداری Z و نقش آن در رابط کاربری و تجربه کاربری
همین طور که انتظار داشتید الگوی z از شکل حرف Z پیروی می کند. این الگو مسیری را طی می کند که چشم انسان هنگام اسکن صفحه مسیری از چپ به راست و بالا به پایین را طی می کند:
- ابتدا کاربران از بالا به بالا سمت راست را اسکن می کنند و یک خط افقی را تشکیل می دهند
- بعد ، پایین می آیند و در سمت چپ صفحه ، یک خط مورب را ایجاد می کنند
- آخر ، دوباره به سمت راست برمی گردند و خط افقی دوم را ایجاد می کنند
10 سایت عالی برای الگوهای طراحی رابط کاربری (UI)
با توجه به رقابت بالا بین برندهای مختلف در فضای وب ، نمی شود در طراحی سایت ریسک کرد و الگوهای طراحی UI تست شده و رایج را نادیده گرفت ؛ اما این بستگی به مهارت طراح سایت دارد که بتواند در بخش های مختلف وب سایت از الگوی مناسب استفاده کند . منابعی زیادی برای مشاهده الگوهای طراحی UI وجود دارد که از جمله این منابع می توان به وب سایت های
- UI – Patterns
- سایت الگوهای طراحی تعاملی (WELIE (WELIE Interaction Design Patterns
- سایت Pattern Tap
- سایت UI Scraps
- سایت Pattern Browser
- سایت User Interface Engineering
- سایت Design Snips
- سایت NPM
- سایت Elements of Design
- سایت Web Design Practices
الگوهای رایج در طراحی رابط کاربری اپلیکیشن
ناوبری و اکشن ها
سهولت در ناوبری به بخش های مختلف اپلیکیشن یکی از مهم ترین ویژگی های اپلیکیشن های خوب می باشد و کاربران اندروید با بسیاری از الگوهای ناوبری رایج آشنایی دارند.
تب ها
معمولا تب ها به همراه لیست و جزئیات مورد استفاده قرار می گیرند، چنانچه لیست های متعددی دارید که به نحوی به یکدیگر مرتبط بوده اما در دسته بندی های مختلفی قرار دارند، استفاده از ViewPager همراه با تب ها برای هر دسته بندی می تواند روش جدیدی برای ناوبری در اپلیکیشن باشد..
دراور ناوبری
دراور ناوبری در حقیقت یک ویو است که از بخش کناری اپلیکیشن بیرون می آید و فهرستی از گزینه ها و تنظیمات را به کاربر نمایش می دهد.
نوارابزار
احتمالا به این موضوع دقت کرده اید که بسیاری از صفحات در اپلیکیشن های اندروید دربرگیرنده یک نوارابزار در بخش بالای صفحه هستند. این نوار ابزار شامل عنوان آن بخش یا اپلیکیشن است، اما الگوی طراحی نوارابزار قرارگذاری دکمه های اکشن در نوارابزار و یا منوی شناور را تسهیل می بخشد و کاربران می تواند عملیاتی را در آن بخش از اپلیکیشن به انجام رسانند.
اپلیکیشن Google Keep نمونه بسیار خوبی از پیاده سازی این الگو می باشد که به کاربر امکان تغییر رنگ یک یادداشت و چندین عملیات دیگر که در منو نمایش داده شده را می دهد.
دکمه اکشن شناور
الگوی دکمه اکشن شناور، توسعه دهندگان را قادر به برجسته سازی یک عملیات خاص می کند، بدین ترتیب کاربران می توانند زمانی که در سایر بخش های اپلیکیشن هستند نیز آن عملیات را به سرعت انجام دهند. برای نمونه می توان به دکمه نوشتن ایمیل جدید که در کلاینت ایمیل تعبیه شده، دکمه پلی/توقف در اپلیکیشن موزیک و یا دکمه افزودن در اپلیکیشن هایی اشاره کرد که مدیریت رویدادها و داده ها را در اختیار کاربر قرار می دهند.
استفاده از این الگو برای اکشن های کوچک یا مخرب به هیچ عنوان پیشنهاد نمی شود، دکمه اکشن شناور به این منظور طراحی شده تا حضور قدرتمندی در صفحات داشته باشد.
بسیار متشکریم که تا پایان این نوشته با آپکاد همراه بودید لطفا نظرات و انتقادات خود را در کادر پایین با ما در میان بگذارید و اگر در زمینه رابطه کاربری طراحی سایت خود نیاز به مشورت داشتید حتما با مشاوران ما به صورت رایگان در ارتباط باشید.
