این راهنما به شما کمک میکند تا با تبدیل طرحهای موجود موبایل iOS به اندروید با استفاده از الگوهای اساسی تجربه کاربری اندروید، به همراه طراحی متریال، طراحی اندروید را آغاز کنید.
برای برابری طراحی، طرحریزی و برای کارایی مرتب شدهاند. اگر از یک سیستم طراحی پایه مشترک پیروی میکنید، میتوانید طرحها را به جای Material 3 با سیستم خودتان ترجمه کنید. هم اندروید و هم iOS به این ایده پایبند هستند که محتوا حرف اول را میزند.
پس از آن، برندسازی میتواند به صورت رنگ، نوع و شکل خود را نشان دهد. این امر نه تنها خوانایی محتوا را افزایش میدهد، بلکه ایجاد انسجام را نیز آسانتر میکند.
با طرحهای iOS خود شروع کنید
قبل از شروع، یک کپی از برنامه iOS خود تهیه کنید. برنامههای iOS به سه بخش تقسیم میشوند: نوارها، نماها و کنترلها. میتوانید از این ساختار برای ترجمه استفاده کنید و در آخر به استایلبندی بپردازید.
بخشهایی از یک برنامه اندروید را بررسی کنید.
۱. رابط کاربری سیستم iOS را حذف کنید
نوار وضعیت و نشانگر خانه را حذف کنید. انجام این کار اکنون سادهتر است.
۲. اندازه فریمهای خود را تغییر دهید
میتوانید از اندازه فشرده اندروید، ۴۱۲ نقطه در اینچ مربع، استفاده کنید. اگرچه، طیف وسیعی از دستگاهها را حتی در اندازه کلاس پنجره در نظر بگیرید. به عنوان مثال، برای تطبیق با صفحه نمایشهای کوچکتر، در ۳۶۰ نقطه در اینچ مربع آزمایش کنید و در تمام اندازههای کلاس پنجره تطبیق دهید.
۳. جایگزین کردن با نوارهای سیستم اندروید
رابط کاربری سیستم اندروید میتواند بسته به دستگاه و تنظیمات کاربر متفاوت باشد، اما نمایش یک رابط کاربری سیستم پیشفرض میتواند به طرحهای شما زمینه بیشتری بدهد. نوار اعلانها را در بالا و یک نوار ناوبری حرکتی یا نوار ناوبری سه دکمهای را در پایین قرار دهید.
برای اطلاعات بیشتر، به نوارهای سیستم اندروید مراجعه کنید.
۴. بسته به ناوبری شما
نوار تب (نواحی پایین) را با نوار ناوبری (Navigation Bar ) عوض کنید.
نگاهی به نقشه جریان خود بیندازید. آیا برنامه iOS شما از منوی بیشتری استفاده میکند؟ (بهترین شیوههای HIG پیشنهاد میکنند از این الگو استفاده نکنید). به پنج مورد یا کمتر پایبند باشید، نوار ناوبری پایین را به عنوان ناوبری اصلی نگه دارید، ارزیابی کنید که آیا موارد ثانویه، مانند نمایه یا تنظیمات، میتوانند به نوار برنامه بالا منتقل شوند، یا شاید یک اقدام اصلی دارید که میتواند به یک FAB تبدیل شود؟
منوی ناوبری اصلی شما همیشه باید در نماهای والد (بالاترین سطح برای یک بخش در نقشه جریان شما) وجود داشته باشد. نماهای فرزند (هر چیزی که زیر نمای والد قرار دارد) میتوانند شامل منوی ناوبری اصلی باشند، اگر در سلسله مراتب ناوبری بالاتر باشند و یک پنجره مودال نباشند.
نوار ناوبری پایین را با آیکونها و برچسبهای مناسب بهروزرسانی کنید. هر دو پلتفرم از حرکت جانبی بین مقاصد ناوبری جلوگیری میکنند.
۵. نوارهای ناوبری برای قرار دادن در بالای نوار برنامهها
این موارد را بخش به بخش تقسیم کنید؛ ابتدا نماهای والد، سپس نماهای فرزند. نوار برنامه از سمت چپ: ناوبری و عنوان، و سمت راست: موارد عملیاتی تشکیل شده است.
اگر برنامه شما به جای نوار ناوبری پایین از یک منوی کشوی ناوبری استفاده میکند، در تمام نماهای والد، یک آیکون کشو نمایش داده خواهد شد.
اگر برنامه شما rail یا drawer ندارد، ویوهای والد آیکون ناوبری اصلی را نشان نمیدهند.
عنوان به طور پیشفرض در نوار برنامه اندروید، چپچین شده است.
نماهای فرزند یک فلش رو به بالا را در محل آیکون ناوبری نگه میدارند. نباید با بازگشت اشتباه گرفته شود. فلش رو به بالا کاربر را در سلسله مراتب ناوبری برنامه در جریان کاربر به یک سطح بالاتر میبرد، در حالی که کشیدن به عقب یا کشیدن لبه در ناوبری سیستم قرار دارد و کاربر را به عقب حرکت میدهد و حتی او را از برنامه خارج میکند.
در مورد نماهای مودال چطور؟ برای نماهای مودال تمام صفحه (مانند پخشکنندههای ویدیو و تصاویر)، این مشابه نمای فرزند App Bar خواهد بود، با این تفاوت که آیکون ناوبری باید به حالت بستن تغییر کند که باعث میشود نما بسته شود.
۶. کمی کیفیت بیشتر
با نماهای مودال بزرگ شروع کنید، که بهترین استفاده از آنها برای جلب توجه کاربر به یک کار است. در iOS، اینها اغلب به صورت برگههایی دیده میشوند که کاربر میتواند آنها را به پایین بکشد.
کار تعویض نوارهای برنامه را تمام کنید. برای ماژولهای صفحه iOS، قسمت بالای صفحه و نمای پسزمینه را با یک نوار برنامه تمام صفحه تعویض کنید.
نکتهی اضافی: نگاهی بیندازید که آیا هیچ یک از صفحات مودال iOS شما میتوانند به صفحات پایانی تبدیل شوند یا خیر.
برگههای اقدام و فعالیت به برگههای پایانی. (برگههای اشتراکگذاری نیز اکنون قابل ترجمه هستند).
برای هشدارها، از دیالوگهای سیستمی استفاده کنید. اگر از آنها برای اطلاعات مهمی استفاده میکنید که نیاز دارید کاربر به نحوی آنها را تایید کند، آنها را با دیالوگهای سیستمی عوض کنید. به یاد داشته باشید که در این مرحله، ورودیها و انتخابگرها را نیز عوض کنید.
۷. محتوای مشابه
تبها یا صفحهبندهای نمایش یا تبهای کشیدنی. اگر از کنترلهای تقسیمبندیشده در iOS استفاده میکنید، اینها در اندروید به تبها تبدیل میشوند. هر دو به عنوان راهی برای فیلتر کردن بین نمایشهای اطلاعات مشابه، اما متفاوت، عمل میکنند. تبهای اندروید معمولاً به نوار برنامه متصل هستند و مزیت اضافهی امکان کشیدن بین محتوا را دارند.
۸. محتوا و کنترلها
بسته به اینکه محدودیتها یا تنظیمات تغییر اندازه چگونه است، احتمالاً بیشتر محتوای شما از قبل تغییر اندازه داده شده است. اما این بار را برای بررسی و تنظیم حاشیهها اختصاص دهید. 16dp استاندارد خوبی برای صفحه نمایشهای کوچک است.
شبکه پایه بر اساس یک شبکه ۸dp برای اجزا و ۴dp برای متن و آیکونها است. یک شبکه ۸pt در iOS به خوبی عمل میکند، بنابراین میتوانید آن را به عنوان نقطه شروع برای هر دو پلتفرم در نظر بگیرید.
کنترلها . این دکمهها را به دکمههای اندروید تغییر دهید. از چکباکسها و دکمههای رادیویی اندروید استفاده کنید. اندروید همه اینها را دارد.
اگر فرم دارید، فیلدهای متنی iOS را با فرمهای اندروید عوض کنید. متریال گزینههایی مانند outline یا fill دارد، بنابراین انتخاب کنید کدام یک با برند شما بیشتر مطابقت دارد.
لیستهای متریال در مقایسه با سلولهای جدول iOS تفاوتهایی دارند:
- از خطوط جداکننده به ندرت استفاده میشود.
- برای به حداقل رساندن نویز بصری، از شاخصها در فهرستها استفاده نمیشود.
- ابعاد مطابق با شبکه 8dp هستند.
۹. سبک
رنگ: رنگ رابط کاربری شامل رنگهای تأکیدی، معنایی و سطحی است که در یک طرح رنگی گردآوری شدهاند. این رنگها بر اساس نقشهایشان در رابط کاربری اعمال میشوند.
نوع: اگر از فونت سیستمی استفاده میکنید، San Francisco را جایگزین کنید. Roboto فونت پیشفرض سیستم برای اندروید است. با این اوصاف، ما شما را تشویق میکنیم که سبک منحصر به فرد برند خود را با فونتهای قابل دانلود و قالببندی گوگل بیان کنید.
آیکونها: اینجا هم همینطور است. اگر از نمادهای SF استفاده میکنید، دوباره بررسی کنید که همه به آیکونها یا نمادهای متریال تبدیل شده باشند. نوعی را انتخاب کنید که برای برند شما مناسب باشد. آیا میدانستید که میتوانید از آیکونهای متریال در هر پلتفرمی استفاده کنید؟
حرکت: اندروید و iOS طراحی حرکتی متمایزی دارند که باید برای هر پلتفرم رعایت شود. حرکت متریال آموزنده، متمرکز و گویا است. موجدار بودن یک ویژگی برجسته متمایز است که در کامپوننتها برای ارائه بازخورد لمسی استفاده میشود. سیستم حرکتی مجموعهای از الگوهای انتقال است تا از تبدیل کانتینر، محور مشترک، محو شدن و انیمیشنهای محو شدن بهره ببرد. در نظر بگیرید که آیا عناصر طراحی شما کانتینرهای پایدار دارند، رابطه بین عناصر و نحوه ورود یا خروج آنها را بررسی کنید.
۱۰. مرتب کردن
اگر در حال ترجمه یک نمونه اولیه هستید، این نقطه خوبی برای بازنویسی همه چیز است. به منوی ناوبری اصلی خود برگردید. سپس به نوار برنامهها بروید، تفاوت بین بالا و عقب را به خاطر بسپارید و مطمئن شوید که انتقالهای صفحهای را انتخاب میکنید که مناسب اندروید هستند (که در مرحله ۹ ذکر شد).
شما باید یک نمونه اولیه کاملاً کاربردی آماده داشته باشید، و از آنجایی که اندازه آن را تغییر دادهاید، آماده تحویل است.
راهنمای سبک و اجزا
اگر از قبل یک سیستم طراحی یا راهنمای سبک دارید، ممکن است سبکهای بنیادی خودتان (رنگ، نوع، آیکونها، شکل) را داشته باشید که میتوانند در کنار طراحی متریال استفاده شوند، همانطور که از آنها در کنار راهنماییهای iOS استفاده میکنید. با استفاده از Material Theming، میتوانید اجزای متریال را با سبک منحصر به فرد برند خود با رنگ، نوع و شکل سفارشی کنید.
داشتن دستورالعملهای مختص پلتفرم در بین محصولات چند پلتفرمی غیرمعمول نیست و میتواند سیستم طراحی شما را کاربرمحورتر کند.
در نهایت، اگر بدون آن کار میکنید، بدانید که هر برنامه یا محصولی به یک سیستم طراحی سفارشی کامل نیاز ندارد! ایجاد یک راهنمای سبک تکبرگ را در نظر بگیرید. راهنمای سبک سندی است که مشخصات اساسی طرحها را تشریح میکند. دستورالعملهای برندسازی اغلب شامل یک راهنمای سبک در درون خود هستند.
این را میتوان برای اندروید کپی کرد و به عنوان منبعی برای بهروزرسانی استایلها (یا نمادها، کامپوننتها یا یک کتابخانه) استفاده کرد.