اندروید به شما کمک میکند تا برنامهای توسعه دهید که به خوبی در طیف وسیعی از اندازههای صفحه نمایش دستگاهها و فرم فاکتورها اجرا شود. این سازگاری گسترده به شما کمک میکند تا یک برنامه واحد طراحی کنید که بتوانید آن را به طور گسترده در تمام دستگاههای مورد نظر خود توزیع کنید.
با این حال، برای اینکه بهترین تجربه ممکن را در هر پیکربندی صفحه نمایش به کاربران خود ارائه دهید، باید طرحبندیها و سایر اجزای رابط کاربری خود را برای اندازههای مختلف بهینه کنید. در ChromeOS، بهینهسازی رابط کاربری به شما امکان میدهد تا از فضای اضافی صفحه نمایش برای ارائه ویژگیهای جدید، ارائه محتوای جدید یا بهبود تجربه برای تعمیق تعامل کاربر، نهایت استفاده را ببرید.
طرحبندی برای صفحات نمایش بزرگتر
اگر برنامه خود را برای گوشیها توسعه دادهاید و میخواهید طراحی خود را در ChromeOS و سایر فرمفکتورهای صفحه نمایش بزرگ بهبود بخشید، با ایجاد تنظیمات جزئی در طرحبندیها، فونتها و فاصلهگذاری خود شروع کنید. برای تبلتهای ۷ اینچی یا یک بازی با بوم بزرگ، این تنظیمات ممکن است تمام چیزی باشد که نیاز دارید.
برای نمایشگرهای بزرگتر، میتوانید بخشهایی از رابط کاربری خود را دوباره طراحی کنید تا یک رابط کاربری «کشیده» را با یک رابط کاربری چند قسمتی کارآمد، ناوبری سادهتر و محتوای اضافی جایگزین کنید. مطالعات متریال تیم طراحی متریال نمونههایی از این موارد را ارائه میدهد. برای مثال، ببینید که چگونه Reply با اندازههای مختلف صفحه نمایش سازگار میشود.
در اینجا چند پیشنهاد ارائه شده است:
- برای این صفحات نمایش بزرگتر، طرحبندیهای سفارشی ارائه دهید. میتوانید این کار را با استفاده از کوتاهترین ابعاد صفحه نمایش یا حداقل عرض و ارتفاع موجود انجام دهید.
- تصور کنید که تجربه کاربری و طرحبندیهای شما در یک محیط با اولویت افقی مانند ChromeOS چگونه کار میکنند. طرحبندیهای خود را طوری تنظیم کنید که در این جهتها بر اساس اندازه پنجره، خوب به نظر برسند و عملکرد خوبی داشته باشند، یا با استفاده از توصیفکننده منبع زمین، طرحبندیهای افقی خاصی ارائه دهید. میتوانید در صفحه مدیریت پنجره، درباره تغییر اندازه پویای پنجره و سایر ملاحظات برای صفحات نمایش بزرگ اطلاعات بیشتری کسب کنید.
- نوارهای ناوبری پایین وقتی برنامه شما کشیده میشود تا عریض شود، به خوبی مقیاسپذیر نیستند. در نظر بگیرید که ناوبری خود را به یک منوی سمت چپ منتقل کنید که در آن دسترسی آسانتر باشد و گزینههای بیشتری را نشان دهد. مثال پاسخ این موضوع را به خوبی نشان میدهد.
- حداقل، ابعادی مانند اندازه فونت، حاشیهها و فاصلهگذاری را برای صفحات نمایش بزرگتر سفارشی کنید تا استفاده از فضا و خوانایی محتوا بهبود یابد. در نظر بگیرید که وقتی کاربران کمی از دستگاه خود دورتر هستند، مانند دستگاه ChromeOS یا سایر محیطهای دسکتاپ، ممکن است چگونه به نظر برسند.
- موقعیت کنترلهای رابط کاربری را طوری تنظیم کنید که هنگام استفاده از ماوس یا نگه داشتن تبلت، مثلاً به سمت کنارهها و دور از مرکز، برای کاربران قابل دسترسی باشند.
- فاصلهگذاری عناصر رابط کاربری معمولاً در ChromeOS و سایر دستگاههای صفحه نمایش بزرگ باید بزرگتر از گوشیهای هوشمند باشد. حاشیهها و فاصلههای بین عناصر باید با تغییر اندازه صفحه نمایش، تغییر کنند.
- به اندازه کافی محتوای متن را padding کنید تا مستقیماً در امتداد لبههای صفحه نمایش قرار نگیرد. از padding حداقل 16dp در اطراف محتوا در نزدیکی لبههای صفحه نمایش استفاده کنید.
به طور خاص، مطمئن شوید که طرحبندیهای شما در سراسر صفحه نمایش "کشیده" به نظر نمیرسند:
- خطوط متن نباید بیش از حد طولانی باشند - حداکثر ۱۰۰ کاراکتر در هر خط را بهینه کنید، و بهترین نتیجه بین ۵۰ تا ۷۵ کاراکتر است.
- فهرستها و منوها نباید از تمام عرض صفحه نمایش استفاده کنند.
- از padding برای مدیریت عرض عناصر روی صفحه استفاده کنید یا برای دستگاههای با صفحه نمایش بزرگتر به رابط کاربری چند قسمتی تغییر دهید (به بخش بعدی مراجعه کنید).
از فضای اضافی صفحه نمایش بهره ببرید
دستگاههای ChromeOS فضای صفحه نمایش بسیار بیشتری را در اختیار برنامه شما قرار میدهند. هنگام طراحی رابط کاربری برنامه خود برای صفحه نمایشهای بزرگتر، از فضای اضافی نهایت استفاده را ببرید.
در مثالهای Reply و Rally ، برنامهها رویکردهای متفاوتی برای استفاده از اندازه صفحه نمایش بزرگتر اتخاذ میکنند. Reply برای ظاهری مرتبتر، فضا اضافه میکند، در حالی که Rally دادههای بیشتری را نمایش میدهد تا پیمایش و لمس را کاهش دهد.
یک نقطه شروع خوب، بررسی مواردی است که ممکن است از دید کاربر پنهان باشند و اینکه چگونه میتوانید آنها را قابل مشاهده کنید. این میتواند شامل نمایش اطلاعات بیشتر در مورد یک آیتم، قابل مشاهده کردن منوهایی باشد که ممکن است پشت کلیک راست یا فشار طولانی پنهان باشند، یا نمایش گزینههای ناوبری متفاوت یا عمیقتر اکنون که ناحیه ناوبری سمت چپ بزرگتری دارید. اینها بردهای بزرگ کاربردی هستند که میتوانند تجربه کاربری شما را بهبود بخشند و بدون طراحی مجدد کامل تجربه فعلی، حس دسکتاپ بیشتری به برنامه شما بدهند.
در اینجا چند توصیه برای برنامه شما ارائه شده است:
- برند شما، جهتی را که باید هنگام فکر کردن به این اندازههای مختلف صفحه نمایش در پیش بگیرید، تعیین میکند. تصمیمگیری در مورد اینکه چه چیزی را در اولویت قرار دهید و به کاربر نشان دهید، به نوع سفر کاربر موجود و رایجترین ویژگیهای مورد استفاده بستگی دارد. برای الهام گرفتن، مطالعات مواد را بررسی کنید و ببینید که چگونه هر محصول به صفحه نمایش بزرگتر واکنش متفاوتی نشان میدهد.
- به این فکر کنید که طراحی برنامه شما با استفاده از یک سیستم شبکهبندی واکنشگرا چگونه باید رفتار کند، و اینکه محتوا، ناوبری و گزینهها چگونه باید با بزرگتر شدن صفحه نمایش جابجا شوند.
- تصمیم بگیرید که از کدام اندازههای صفحه نمایش برای طرحبندی متفاوت استفاده خواهید کرد، سپس طرحبندیهای مختلف را در اندازههای پنجره مناسب (مانند بزرگ/خیلی بزرگ) یا حداقل عرض پنجره (مانند sw600dp/sw720) ارائه دهید. به یاد داشته باشید که وقتی به این طرحبندیها میرسید، زمینه کلی که کاربر در آن قرار داشته نباید تغییر کند و شما باید سعی کنید تمام حالت کاربر را هنگام انتقال بین طرحبندیها (موقعیت اسکرول، متن در حال نوشتن و غیره) حفظ کنید.
از فایلهایی استفاده کنید که برای تراکم بالاتر و صفحات نمایش بزرگتر طراحی شدهاند
برای اینکه برنامه شما بهترین ظاهر را داشته باشد، آیکونها و سایر فایلهای بیتمپ را برای هر تراکم در محدودهای که معمولاً توسط ChromeOS پشتیبانی میشود، ارائه دهید. به طور خاص، باید آیکونهای خود را برای نوار برنامه، اعلانها و لانچر طبق دستورالعملهای آیکونوگرافی طراحی کنید و آنها را در قالبهای برداری ارائه دهید تا بتوانند به راحتی با صفحات مختلفی که برنامه شما در آنها قرار میگیرد، مقیاسبندی شوند.
برای اطلاعات بیشتر در مورد VectorDrawableها و فایلهای برداری در اندروید، به این پست وبلاگ نیک بوچر مراجعه کنید.
تنظیم اندازه فونت و اهداف لمسی
برای اینکه برنامه شما در ChromeOS و صفحات نمایش با تراکم بالاتر قابل استفاده باشد، اندازه فونتها و نقاط لمسی را در رابط کاربری خود برای تمام پیکربندیهای صفحه نمایش مورد نظر تنظیم کنید. میتوانید اندازه فونتها را از طریق ویژگیهای styleable یا منابع dimension تنظیم کنید، و میتوانید نقاط لمسی را از طریق layoutها و ترسیمپذیرهای bitmap، همانطور که قبلاً بحث شد، تنظیم کنید.
در اینجا چند نکته وجود دارد:
- متن نباید در اندازهها و تراکمهای صفحه نمایش بزرگتر، بیش از حد بزرگ یا کوچک باشد. مطمئن شوید که برچسبها به طور مناسب برای عناصر رابط کاربری که با آنها مطابقت دارند، اندازه شدهاند و مطمئن شوید که هیچ خط فاصله نامناسبی در برچسبها، عناوین و سایر عناصر وجود ندارد.
- اندازه توصیهشده برای عناصر روی صفحه نمایش، ۴۸dp است - ممکن است در رابط کاربری صفحه نمایش بزرگتر شما، به برخی تنظیمات نیاز باشد. برای کسب اطلاعات بیشتر در مورد اهداف لمسی و فاصله بین موارد با تغییر اندازه صفحه نمایش، درباره روشهای فاصلهگذاری بیشتر بخوانید. این توصیهها همچنین حداقل دستورالعملهای دسترسیپذیری را برآورده میکنند.
- در صورت امکان، برای آیکونهای کوچکتر، با استفاده
TouchDelegateیا صرفاً قرار دادن آیکون در مرکز دکمه شفاف، ناحیه قابل لمس را به بیش از ۴۸dp گسترش دهید.