روز هشتم فرانت اند:رابط کاربری منوی کشویی
با یکی دیگر از آموزش های سری روز فرانت اند در خدمت شما عزیزان هستیم.تو این آموزش می خواهیم با ساخت یک منوی کشیو کاربر پسند با رابط کاربری زیبا و ساده با استفاده از HTML , Css آشنا شویم.اگر با HTML , Css آشنایی ندارید میتوانید از دوره های ویدئویی رایگان سایت استفاده کنید.
رابط کاربری چیست؟
واسط کاربر(به انگلیسی: User Interface و به اختصار: UI) یک میانجی بین انسان و ماشین (دستگاه) است که امکان استفاده از ماشین را برای انسان فراهم میکند. واسط کاربر، بخش دیدنی و قابل لمس یک ابزار است که کاربر مستقیماً با آن سر و کار دارد. این اصطلاح را میانای کاربر، میانجی کاربر و رابط کاربرهم ترجمه کردهاند. معنی رابط کاربری بر خلاف تصور رایج در بین عموم یعنی تمرکز بر آن چیزهایی که کاربر به آن نیاز دارد و بتواند نیازهای خود را به سادگی و قابل فهم که با چندین شی (Element) برطرف کند.
معنی و مفهوم درست و کامل رابط کاربری زیبایی و رنگ آمیزی یک محصول نیست، بلکه سادگی و قابل فهم بودن محصول برای عموم کاربران معنی و مفهوم یک رابط کاربری خوب را نشان میدهد. زیبایی و رنگ آمیزی منحصر بفرد محصول یکی از ویژگیهای مهم برای یک رابط کاربری خوب است.
پروژه که باهم قراره شروع کنیم همانند تصویر فوق خواهد بود.در این منو ما از اچ تی ام ال برای ساخت لایه های اصلی و از فونت اوسام (font-awesome) برای افزودن ایکون به ایتم های منو استفاده کرده ایم.با ساخت لایه و هم چنین با نحوه استفاده از font-awesome در طول دوره آموزشی ویدئویی HTML5 به صورت کامل آشنا شدیم.
<h1><a href="http://Codefriend.ir" target="_blank">Dropdown Menu UI</a></h1> <div class="content"> <div class="admin-panel"><label for="toggle" class="admin-text">Admin Settings</label></div> <input type="checkbox" id="toggle"> <label class="cog octicon octicon-gear" for="toggle"></label> <div class="menu"> <div class="arrow"></div> /* آیتم های منو همراه با ایکون های فونت اسام*/ <a href="#">Edit Users <span class="icon octicon octicon-person"></span></a> <a href="#">Web Statistics <span class="icon octicon octicon-graph"></span></a> <a href="#">Upload Settings <span class="icon octicon octicon-cloud-upload"></span></a> <a href="#">Edit Slider <span class="icon octicon octicon-pencil"></span></a> </div> </div> </div>
در کدهای بالا لایه اصلی منو را میتوانید مشاهده کنید.از یک تگ div با نام content به عنوان نگهدارنده اصلی استفاده کردیم.از کلاس arrow برای ساخت یک ساختار برای نمایش جهت رو به بالا استفاده کردیم.دقت کنید ساختار اصلی arrow در css ایجاد می شود و در html تنها بدنه arrow را تشکیل داده است.
کدهای سی اس اس رابط کاربری منو
html { margin: 0; padding: 0; height: 100%; background: #C7B7A7; } h1 { font-family: "Lato", Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 300; margin-top: 20px; text-align: center; } h1 a { color: #888888; text-decoration: none; } h1 a:hover { text-decoration: underline; } .content { position: relative; top: 5px; width: 250px; margin: 0 auto; } /*قسمت ادمین*/ .admin-panel { background: #F8F8F8; width: 240px; height: 40px; color: #888888; border: none; border-radius: 3px; padding: 0 0 0 10px; font: bold 13px Helvetica, sans-serif; text-transform: uppercase; line-height: 41px; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; margin-bottom: 7px; box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 ); } .cog { position: absolute; top: 0; right: 0; padding: 5px; margin-top: 5px; margin-right: 6px; border: none; color: #888888; font-size: 20px; } .admin-text:hover, .cog:hover { cursor: pointer; color: #555555; } input#toggle { display: none; } input#toggle ~ .menu { display: block; } input#toggle:checked ~ .menu { display: none; } .menu a { display: block; background: #F8F8F8; width: 240px; height: 40px; padding: 0 0 0 10px; font: bold 13px Helvetica, sans-serif; text-transform: uppercase; text-decoration: none; color: #000000; color: rgba( 0, 0, 0, 0.4 ); line-height: 40px; box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 ); } .menu a:nth-child( 2 ) { border-top-left-radius: 3px; border-top-right-radius: 3px; } .menu a:last-child { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } .menu a:hover { color: #555555; } .menu a:hover > .octicon { color: #555555; } .icon { float: right; margin-top: 10px; font-size: 20px; color: #000000; color: rgba( 0, 0, 0, 0.4 ); opacity: 0.8; } .octicon-person { margin-right: 16px; } .octicon-graph { margin-right: 11px; } .octicon-cloud-upload { margin-right: 11px; } .octicon-pencil { margin-right: 13px; } /*ساختار arrow*/ .arrow { width: 0; height: 0; margin-left: 15px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 9px solid #F8F8F8; }
در کدهای Css بالا،ما برای html که بدنه اصلی منوی و همچنین تگ های H که در سند Html وجود دارد استایل دهی کردیم.سپس با استفاده از کلاس content برای محتوا یک ویژگی پوزیشن تعریف کردیم تا منو در جای مناسب قرار بگیرد،در قدم بعدی هم برای admin-panel و همچنین برای arrow کدهای سی اس اس نوشتیم.تمامی کدهای که در بالا می بینید در طول دوره های آموزش Css و Css3 به صورت کامل توضی داده شده است.
در ساخت یک رابط کاربری ساده و زیبا در وب بهتر است از رنگ های مناسب و سادگی بیشتر استفاده کنیم تا در هنگام تعامل با کاربران دچار مشکل نشویم.
برای دانلود پروژه می توانید از این لینک استفاده کنید.
برچسب:UI چیست, User Interface چیست, استفاده از رنگ در طراحی, اموزش طراحی رابط کاربری, اموزش فرانت اند, رابط کاربری, رابط کاربری چیست؟, رابط کاربری زیبا, رابط کاربری منو, روز فرانت اند, ساخت جهت در cSS, ساخت رابط کاربری, ساخت فلش در سی اس اس, ساخت منوی زیبا, ساخت منوی فلت, واسط کاربری چیست, ویژگی پوزیشن