طراحی رابط کاربری

در درس قبل، توانستیم اندروید استودیو را روی سیستم کامپیوترمان نصب کرده و یک پروژه با آن بسازیم. همچنین با روندی که پروژه های اندرویدی برای اجرا طی می کنند، آشنا شدیم و دیدیم که می توانیم به دو صورت برنامه مان را تست کنیم: 1. با ساختن یک دستگاه اندروید مجازی 2. با وصل کردن یک گوشی هوشمند به کامپیوتر و اجرای برنامه روی آن. در این درس، موستانگ ویدئوی دیگری را برایتان فراهم کرده است که در ابتدای آن، می توانید اجرای برنامه را بر روی یک گوشی اندرویدی تماشا کنید. اما دیگر وقت این است که سراغ طراحی رابط کاربری (User Interface  :UI) برویم!

اندروید استودیو و طراحی رابط کاربری

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

[*] همان طور که در فیلم مشاهده خواهید کرد، اندروید استودیو ابزارهای گرافیکی فراوانی برای طراحی رابط کاربری و تست آن بر روی گوشی های مختلف دارد. برای شروع می توانید با این ابزارها کار کرده و با المان های مختلف در طراحی UI آشنا شوید. اما به مرور که یک اندروید کار حرفه ای می شوید، باید بتوانید به سادگی و بدون نیاز به ابزار گرافیکی، فایل xml خود را بنویسید. هر چقدر در این دوره جلوتر برویم، این کار برایتان آسان تر خواهد شد.

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

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

• FrameLayout
• LinearLayout
• ReleativeLayout

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

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

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

در ادامه می توانید ویدئوی آموزشی این درس را مشاهده کنید.

در نهایت

[*] در این درس، شروع کردیم به طراحی رابط کاربری برای sunshine و با لایه های اصلی که برای این طراحی لازم داشتیم آشنا شدیم. در انتها نیز از اهمیت طراحی ریسپانسیو با شما صحبت کردیم. با موستانگ در درس آینده همراه باشید تا به ادامه طراحی رابط کاربری پرداخته و همچنین با تاریخچه ورژن های مختلف اندروید آشنا شویم.

[*] سوالات و نظرات خود را می توانید در پایین این نوشته و در قسمت دیدگاه ها ثبت کنید. همچنین، در قسمت مانژ می توانید با نمونه کد های پر کاربرد برای برنامه نویسی اندروید آشنا شده و سوالات خود را نیز قرار دهید. تیم متخصصان برنامه نویسی موستانگ ، پاسخگوی شما خواهند بود.