این راهنما با ترجمه کردن طرح‌های تلفن همراه iOS موجود به Android بااستفاده از الگوهای اساسی تجربه کاربری Android، همراه با Material Design، به شما کمک می‌کند کار با طراحی Android را شروع کنید.
برای برابری طراحی فهرست شده و برای کارایی مرتب شده است. اگر از سیستم طراحی پایه هم‌رسانی‌شده‌ای پیروی می‌کنید، می‌توانید طراحی‌ها را با سیستم خودتان به‌جای Material 3 ترجمه کنید. هم Android و هم iOS از این ایده پیروی می‌کنند که محتوا در اولویت است.
پس‌از آن، نمانام‌سازی می‌تواند ازطریق رنگ، نوع، و شکل انجام شود. این کار نه‌تنها خوانایی محتوا را افزایش می‌دهد، بلکه ایجاد انسجام را آسان‌تر می‌کند.
با طراحی‌های iOS شروع کنید
قبل‌از شروع، از برنامه iOS خود کپی بگیرید. برنامه‌های iOS به سه بخش تقسیم می‌شوند: «نوارها»، «نماها»، و «کنترل‌ها». می‌توانید از این ساختار برای کار کردن روی ترجمه استفاده کنید، و در آخر سبک‌دهی کنید.
بخش‌های برنامه Android را بررسی کنید.
۱. حذف کردن واسط کاربر سیستم iOS
نوار وضعیت و نشانگر خانه را حذف کنید. اکنون انجام این کار ساده‌تر است.
۲. تغییر اندازه قاب‌ها
می‌توانید از اندازه فشرده Android، ۴۱۲ dp، استفاده کنید. هرچند، حتی در اندازه پنجره یک کلاس، طیف وسیعی از دستگاه‌ها را درنظر بگیرید. برای مثال، در ۳۶۰ پیکسل آزمایش کنید تا صفحه‌های کوچک‌تر را دربر بگیرد و در همه اندازه‌های کلاس پنجره تطبیق دهد.
۳. جایگزین کردن با «نوارهای سیستم Android»
«میانای کاربری سیستم Android» بسته به دستگاه و تنظیمات کاربر می‌تواند متفاوت باشد، اما نمایش «میانای کاربری سیستم» استاندارد می‌تواند به طراحی‌های شما زمینه بیشتری بدهد. نوار اعلان را در بالا و نوار پیمایش اشاره‌ای یا نوار پیمایش سه‌دکمه‌ای را در پایین قرار دهید.
برای کسب اطلاعات بیشتر، نوارهای سیستم Android را ببینید.
۴. بسته به ناوبری شما
«نوار برگه‌ها» (پیمایش پایین) را با نوار پیمایش عوض کنید.
به نقشه جریان خود نگاهی بیندازید. آیا برنامه iOS شما از منو «بیشتر» استفاده می‌کند؟ (روال‌های مطلوب HIG توصیه می‌کنند از این الگو استفاده نکنید). به پنج مورد یا کمتر پایبند باشید، نوار پیمایش پایین را برای پیمایش اصلی نگه دارید، ارزیابی کنید که آیا چیزی ثانویه، مانند نمایه یا تنظیمات، می‌تواند به «نوار برنامه‌های برتر» منتقل شود، یا شاید کنش اصلی دارید که می‌تواند به «دکمه کنش شناور» تبدیل شود؟
پیمایش اصلی شما باید همیشه در نماهای والد (سطح بالای یک بخش در نقشه جریان) وجود داشته باشد. نماهای کودک (هر چیزی زیر نمای ولی) می‌تواند شامل پیمایش اصلی باشد اگر در سلسله‌مراتب پیمایش بالاتر باشد و مُدال نباشد.
«نوار پیمایش پایین» را با نمادها و برچسب‌های مناسب به‌روزرسانی کنید. هر دو پلاتفرم از حرکت جانبی بین مقاصد پیمایش اجتناب می‌کنند.
۵. نوار پیمایش به نوار برنامه بالا
این‌ها را بخش‌به‌بخش تجزیه‌وتحلیل کنید؛ ابتدا بازدیدهای والدین، سپس بازدیدهای فرزندان. نوار برنامه از سمت چپ: پیمایش و عنوان، و سمت راست: موارد کنش تشکیل شده است.
اگر برنامه شما به‌جای نوار پیمایش پایین از منو کشویی پیمایش استفاده می‌کند، در همه نماهای والد، نماد کشویی نشان داده خواهد شد.
اگر برنامه شما ریل یا کشو ندارد، نماهای والد نماد ناوبری اصلی را نشان نمی‌دهند.
عنوان به‌طور پیش‌فرض در «نوار برنامه» برای Android در سمت راست تراز می‌شود.
نمای کودک دارای یک پیکان بالا در جای نماد پیمایش است. با «برگشتن» اشتباه نشود. پیکان بالا کاربر را در سلسله‌مراتب پیمایش برنامه در جریان کاربری یک سطح بالا می‌برد، درحالی‌که دکمه برگشتن یا تند کشیدن از لبه در پیمایش سیستم قرار دارد و کاربر را به عقب می‌برد و حتی از برنامه خارج می‌کند.
درباره نماهای مُدال چه؟ برای مدال‌های تمام‌صفحه (مانند پخش‌کننده‌های ویدیو و تصاویر)، این مورد مشابه «نوار برنامه» نمای فرزند خواهد بود، با این تفاوت که نماد پیمایش باید به نماد بستن تغییر کند که مدال را می‌بندد.
۶. کمی بیشتر از چندوجهی بودن
با نماهای مُدال بزرگ شروع کنید، این نماها برای متمرکز کردن توجه کاربر روی یک کار بهترین کاربرد را دارند. در iOS، این موارد اغلب به‌صورت برگه‌هایی دیده می‌شوند که کاربر می‌تواند آن‌ها را به‌پایین بکشد.
جایگزینی «نوار برنامه‌ها» را تکمیل کنید. برای برگه‌های مشروط iOS، بخش برگه بالایی و نگاه اجمالی پس‌زمینه را با «نوار برنامه» گفتگوی تمام‌صفحه عوض کنید.
امتیاز اضافی: ببینید آیا برگه‌های مشروط iOS شما می‌توانند به برگه‌های زیرین ترجمه شوند یا نه.
برگ‌های «کنش» و «فعالیت» به «برگ‌های زیرین». (اکنون برگه‌های هم‌رسانی نیز می‌توانند ترجمه شوند).
برای هشدارها، از کادرهای گفتگوی سیستم استفاده کنید. اگر از آن‌ها برای اطلاعات مهمی استفاده می‌کنید که لازم است کاربر به نحوی آن را تأیید کند، آن‌ها را با کادرهای گفتگوی سیستم جایگزین کنید. به‌خاطر داشته باشید که در این مرحله ورودی‌ها و انتخابگرها را نیز عوض کنید.
۷. محتوای هم‌نیا
زبانه یا مشاهده صفحه‌بندی یا کشیدن زبانه‌ها. اگر در iOS از کنترل‌های بخش‌بندی‌شده استفاده می‌کنید، این کنترل‌ها در Android به زبانه‌ها ترجمه می‌شوند. هر دو به‌عنوان روشی برای فیلتر کردن بین نماهای اطلاعاتی که مشابه هستند اما یکسان نیستند عمل می‌کنند. زبانه Android معمولاً به «نوار برنامه» پیوست می‌شود و با مزیت اضافی امکان کشیدن بین محتوا همراه است.
۸. محتوا و کنترل‌ها
بسته به اینکه محدودیت‌ها یا رفتار تغییر اندازه را چگونه تنظیم کرده‌اید، احتمالاً بیشتر محتوای شما ازقبل تغییر اندازه داده شده است. اما از این زمان برای بررسی و تنظیم حاشیه‌ها استفاده کنید. ۱۶ پیکسل مستقل از تراکم یک استاندارد خوب برای صفحه‌نمایش‌های کوچک است.
شبکه پایه براساس شبکه ۸dp برای عناصر و ۴dp برای نوع و نمادها است. شبکه ۸ نقطه‌ای در iOS به‌خوبی کار می‌کند، بنابراین احتمالاً آن را به‌عنوان نقطه شروع برای هر دو پلاتفرم درنظر بگیرید.
کنترل‌ها. آن کلیدها را به کلیدهای Android تغییر دهید. از چارگوش‌های انتخاب و دکمه‌های رادیویی Android استفاده کنید. Android همه این موارد را دارد.
اگر فرم دارید، فیلدهای نوشتاری iOS را با فیلدهای نوشتاری Android عوض کنید. ماده با گزینه‌هایی مانند خطوط کلی یا پرشده ارائه می‌شود، بنابراین گزینه‌ای را انتخاب کنید که بهترین تطابق را با نمانام شما دارد.
فهرست‌های Material در مقایسه با سلول‌های جدول iOS تفاوت‌هایی دارند:
- از خطوط تقسیم‌کننده به‌ندرت استفاده می‌شود.
- از نشانگرها در فهرست‌ها استفاده نمی‌شود تا نویز دیداری به حداقل برسد.
- ابعاد از شبکه ۸dp پیروی می‌کند.
۹. سبک
رنگ: رنگ واسط کاربر از رنگ‌های ثانویه، معنایی، و سطحی که در آرایش رنگ‌ها گردآوری شده‌اند تشکیل می‌شود. این رنگ‌ها براساس نقش‌هایشان به میانای کاربری اعمال می‌شوند.
نوع: اگر از قلم سیستم استفاده می‌کنید، San Francisco را جایگزین کنید. Roboto قلم سیستم پیش‌فرض برای Android است. بااین‌حال، شما را تشویق می‌کنیم که سبک منحصربه‌فرد نمانامتان را با زمینه‌سازی و قلم‌های Google قابل‌بارگیری بیان کنید.
نمادها: در اینجا هم همین‌طور است. اگر از نمادهای SF استفاده می‌کنید، دوباره بررسی کنید که همه آن‌ها به «نمادها» یا «نمادهای Material» تبدیل شده باشند. تنوعی را انتخاب کنید که برای نمانام شما مناسب است. آیا می‌دانستید می‌توانید از نمادهای Material در هر پلاتفرمی استفاده کنید؟
حرکت: Android و iOS طراحی حرکت متمایزی دارند که باید برای هر پلاتفرم رعایت شود. حرکت مادی آموزنده، متمرکز، و بیانگر است. «موج» یک برجستگی متمایز است که در عناصر برای ارائه بازخورد لمسی استفاده می‌شود. «سیستم حرکت» مجموعه‌ای از الگوهای انتقال است که از تبدیل محفظه، محور مشترک، محو شدن، و پویانمایی‌های محو شدن بهره می‌برد. درنظر بگیرید که آیا عناصر طراحی شما دارای محفظه‌های ماندگار هستند، ارتباط بین عناصر چگونه است، و چگونه باید وارد یا خارج شوند.
۱۰. مرتب کردن
اگر درحال ترجمه پیش‌نمونه هستید، این نقطه خوبی برای سیم‌کشی مجدد است. ازطریق پیمایش اصلی به عقب برگردید. سپس «نوار برنامه‌ها» را، با به‌یاد داشتن تفاوت بین بالا و عقب، و با اطمینان از انتخاب انتقال‌های صفحه‌ای که برای Android مناسب هستند (در مرحله ۹ ذکر شده است).
باید نمونه اولیه‌ای کاملاً کاربردی آماده داشته باشید و ازآنجایی‌که اندازه آن را تغییر داده‌اید، برای تحویل دادن آماده است.
راهنمای سبک و عنصر
اگر سیستم طراحی یا راهنمای سبک موجودی دارید، ممکن است سبک‌های بنیادی خودتان (رنگ، نوع، نمادها، شکل) را داشته باشید که می‌توانید آن‌ها را همراه با «طراحی مادی» استفاده کنید، همان‌طور که آن‌ها را همراه با راهنمایی‌های iOS استفاده می‌کنید. بااستفاده از «موضوع‌دهی Material»، می‌توانید عناصر Material را با سبک منحصربه‌فرد نمانام خودتان با رنگ، نوع، و شکل سفارشی‌سازی کنید.
داشتن رهنمودهای مختص پلاتفرم در میان محصولات چندپلاتفرمی غیرمعمول نیست و می‌تواند سیستم طراحی شما را کاربرمحورتر کند.
درنهایت، اگر بدون سیستم طراحی کار می‌کنید، بدانید که هر برنامه یا محصولی به سیستم طراحی سفارشی کامل نیاز ندارد! به‌فکر ایجاد یک راهنمای سبک یک‌برگی باشید. راهنمای سبک سندی است که مشخصات بنیادی طراحی‌ها را شرح می‌دهد. رهنمودهای نمانام اغلب حاوی یک راهنمای سبک در خود هستند.
این را می‌توان برای Android کپی کرد و به‌عنوان منبع به‌روزرسانی سبک‌ها (یا نمادها، عناصر، یا کتابخانه) استفاده کرد.