بروز خطا
   [message]
اشتراک در سوال
رای ها
[dataList]
پرسش و پاسخ

طراحی مناسب برای تمامی سایز های گوشی

مشاهده پاسخ‌ها 2
مدیریت گفتگو
Programmer 11 سال پیش
آخرین تغییر: 11 سال پیش

سلام دوستان ! سوال بسیار مبتدی ای دارم و فکر میکنم همین سوال مبتدی مشکل خیلی هاست و هنوز راه حلی براش ارائه نشده

به شخصه به طراحی ui برنامه ام خیلی اهمیت میدم و با اینکه الان 2 تا اپ غیر محتوایی اماده دارم ولی همش توی طراحی ui وسواس به خرج میدم و همش فکر میکنم که میشه بهتر از این هم ساخت.با اینکه اپ رو به چند دوست توسعه دهنده نشون دادم و اونا تاکید کردن که بسیار خوب طراحی شده و چرا نمیدیش بیرون،  من همچنان دلیلم رو عالی نبودن طراحی بیان کردم.

رابط کاربری اپ روی Genymotion خیلی خوب کار میکنه.همینطور روی گوشی های صفحه کوچیکی مثل Galaxy Star ولی روی گوشی های 6.1 اینچی مثل Huawei mate میاد کلا همه چیز به هم میریزه.اصن وقتی اپ رو روی mate اجرا میکنم بدجوری میخوره تو ذوقم.

کل منابع هنری استفاده شده رو هم با Image macgick تبدیل کردم و داخل پوشه های مرتبط ریختم ولی باز فایده ای نداشته.

امروزه هم که بیشتر گوشی ها دارای صفحه های بالای 5 اینچ هستن و گوشی هایی با این سایز بیشتر طرفدار دارن.چکار میتونیم بکنیم که رابط کاربری هامون روی همچین گوشی های بزرگی مشکل ساز نشن ؟ دوستی گفت که قید گوشی های بزرگ رو بزن.اینکار منطقی هست ؟

نظرات

ایوب شمسی 11 سال پیش
مهدی جان شما خودت استاد سرچی واسه همین میدون ماکثر منابع خارجی رو گشتی واسه همین منصرف شدم از لینک دادن
MeY3am 11 سال پیش
به نظر من دوستتون بد نگفته، من شخصأ UI اکثر برنامه هامو بر اساس 3 تا 5.3 اینچ طراحی میکنم ولی مهدی جان به نظر وزن Weight بهشون بدی همه چی اوکی و بدون مشکل نشون داده میشه فقط برای گوشی های 5.3 اینچ به بالا تصاویر فقط یخورده کوچکتر نمایش داده میشن!
hamed 11 سال پیش
مشکل یا حسن اینه که نمی توان به صورت اینچی گوشی ها را دقیقا طبقه بندی کرد. صحبت MeY3am کاملا تایید می شه و اگر شما اصول طراحی یو آی را بر اساس وزن قرار بدهید عموما مشکلات حل می شوند. ببینید دقیقا مشکل از کجاست. شما می توانید با طراحی متفاوت لی اوت ها در پوشه layout-large (برای سایز های بزرگ تا هفت و برخی از تبلت ها حتی 8) و یا layout-xlarge (برای سایزهای 10 اینچی به بالا و یا هشت اینچی با تراکم بالا) مشکل را حل کنید. عمومی به خصوص برای حالت xlarge با توجه به بزرگ بودن صفحه طراحی که در صفحات کوچک متراکم بوده است کمی خلوت و کشیده می شود. در این موارد استفاده از فرگمنت ها برای نمایش دو پنجره همزمان به کاربر توصیه می شود.
Astro 11 سال پیش
من به مواردی بر خوردم که نمیشه وزن داد و حتما باید سایز دقیق بدی وگرنه تداخل پیش میاد. یه روشهایی دوستان میگفتن که سایز گوشی رو میگرفتی و با توجه به سایز یه لابه برای هر کدوم بارگذاری میکردی.من این روش رو امتحان کردم ولی تو بعضی موارد سایز اشتباه میداد . مثلا گوشی 6 اینچی رو میزد 20 اینچ!! حالا شاید متدی که من به کار بردم اشتباه بوده.برای فونت هم گویا از dimen.xml استفاده میکنند که من در جریان نیستم.
shahkar_ir 11 سال پیش
بنظرم فقط ریسورس xxhdpi رو بزارید .هم برنامه حجمش کم میشه و خود برنامه ریسایز میکنه .درسته شاید کمی رو سرعت تاثیر داره اما کیفیتش بهتر میشه
hamed 11 سال پیش
Astro عزیز تقریبا در اکثر موارد با کمی حوصله می توان وزن داد ولی در برخی موارد ممکنه عدد دادن کار را زیبا تر کنه. در کل به پارامترهای minWidth و minHeight و maxWidth و maxHeight هم توجه داشته باشید تا کارتون جالب تر بشه. ضمن اینکه اصوله تعیین اندازه بر اساس dip ذاتا کار اشتباهی نیست چرا که اندازه ها بر این اساس در گوشی های مختلف با توجه به ابعاد و تراکم تعیین می شوند و خود به خود از لحاظ بصری کار به هم ریخته نخواهد شد.
hamed 11 سال پیش
shahkar_ir عزیز استفاده از ریسورس های xxhdpi در برنامه به خصوص اگر عکس باشند به شدت حجم برنامه را افزایش می دهد چون سایزآن ها بزرگ است. معمولا پیشنهاد می شود تا در مواردی که امکان استفاده از 9patch وجود ندارد به طریقی رابط کاربری برای صفحات خیلی بزرگ تغییر کنند تا نیازی به استفاده از تصاویر بزرگتر و پر کردن صفحه نمایش نباشد. همانطور که در بالا گفتم استفاده از فرگمنت ها برای نمایش حجم بیشتری از اطلاعات و داشتن همزمان چند اکتیویتی توصیه می شود.
Programmer 11 سال پیش
خیلی ممنون از دوستانی که جواب دادن.مشکل من با وزن دادن نیست و با اون قسمت خیلی راحت کنار میام.مشکل اصلی منابعی هستن که من توی فتوشاپ طراحی میکنم و میخوام به عنوان عکس در برنامه استفاده کنم.مثلا در یکی از پروژه های تست ام یک بک گراند با سایز 640*960 طراحی کردم و داخل xhdpi گذاشتم ولی این بک گراند روی همون گوشی های بزرگ که گفتم فقط نصف صفحه رو اشغال میکنه و بقیه صفحه بصورت سیاه دیده میشه.بعضی Button ها و ImageView ها هم در اون سایز 6 اینچ خیلی کوچیک نشون داده میشن که برای من ناخوشایند هست خیلی
doost_fu 11 سال پیش
یعنی بکگراندی که گذاشتید خودش رو با سایز گوشی تطابق نمیده ؟ حالا شاید کشیده بشه و یه خورده بی ریخت بشه ولی نمیشه که ثابت بمونه و فضای اضافه دروش سیاه بشه !! به نظرتون این مشکل کلی هست یا برنامه شما مشکل داره ؟
Programmer 11 سال پیش
نمیدونم مشکل کلی هست یا از برنامه منه.تصویر چسبیده به سمت چپ صفحه و سمت راست برنامه کاملا سیاه شده
MEHDI007 11 سال پیش
منم دقیقا توی همین مورد بد جوری مشکل دارم اگه راه حل درست حسابی پیدا کردی به ما هم بگید من خودم با عکس ها و برنامه ور میرم تا اخرش درست میشه;)
hamed 11 سال پیش
دوستانجواب پایین را بررسی کنید. اگر بک گراند شما به روش زیر اجرایی نیست بگویید تا روی آن کار کنیم. به هر حال موضوع مهمی است.
doost_fu 11 سال پیش
منم برای بکگراند برنامم از یه عکس 640*960 استفاده کردم داخل صفحه اول چند تا دکمه دارم که از عکس استفاده کردم که داخل فتوشاپ طراحی کردم سایز طراحی دکمه هارو هم طبق همون سایز اصلی طراحی کردم یعنی مثلا چون می خواستم وسط تصویر ولی باریکتر باشه سایزشو 600*170 (به عنوان مثال) گذاشتم توی جنی موشن اندروید4.2 و 5 که خیلی قشنگه و توی گوشی فقط با گوشی خودم تست کردم که چو سایزش کوچیکه 3.3 اینچ ! یه خورده ریز تر نشون میده که از زیباییش کم میشه ولی مشکلی نداره متاسفانه به تبلت یا گوشی بزرگ دسترسی ندارم که تست کنم حالا نمیدونم یعنی از من داخل تبلت همین مشکل شمارو خواهد داشت ؟؟!!

پاسخ‌ها 2

hamed 11 سال پیش

مهدی جان مشکل اصلی در همین جاست. بک گراندهایی که ما استفاده می کنیم برای کاهش حجم برنامه و برای جلوگیری از مواردی مشابه آنچه برای شما پیش آمده و موارد زیاد دیگه ای که حتی برای شما هم پیش نیامده (!) بهتر است این خصوصیات در آن رعایت بشه:

1- header و footer و حتی حاشیه ها را از بک گراند جدا کنید. با این کار دست خودتون را برای استفاده از 9patch ها باز گذاشته اید و حاشیه ها به راحتی در ارتفاع گسترش می یابند و سربرگ و پابرگ در عرض. به این ترتیب می توانید از یک رنگ ساده و یا گرادیان فابریک خود اندروید استفاده کنید.

2- اگر رنگ ساده یا گرادیانت برای شما کاربردی نبود بهتر است به مواردی مثل tile کردن بک گراند فکر کنید.

3- اگر تصویر خاصی مثلا در وسط بک گراند دارید که فکر می کنید از روش های بالا نمی توانید استفاده کنید، سخت در اشتباهید. یک راه این است که آن تصویر را نیز به صورت عکسی مجزا در برنامه و در وسط (و یا هر جای دیگری از صفحه) به نمایش بگذارید. و البته راه حل های ابتکاری دیگری هم هست.

4- استفاده از امکانات ترسیمی خود اندروید اگرچه سخت است، اما می تواند جلوه زیبایی را به کار شما بدهد. پس به آن ها فکر کنید.

5- دوستان اگر چیز دیگه ای هم هست بگویید تا استفاده کنیم.

نظرات

Programmer 11 سال پیش
راه های بسیار خوبی رو یادآوری کردین.ولی مثلا برای بک گراندی مثل لینک امکان استفاده از 9patch ها وجود نداره.این عکس در سایز 960*640 طراحی شده و توی برنامه هم توسط image magick به سایز های مختلف تبدیل شده.توی گوشی های صفحه 3 اینچی همه چیز خوب هست.ولی وقتی برنامه رو روی هواوی 6 اینچی تست میکنم نتیجه نارحت کنندس.همونطور که گفتم تصویر میچسبه به سمت چپ صفحه و سمت راست برنامه کاملا سیاه میشه
doost_fu 11 سال پیش
یه سوال شما از ایکلیپس استفاده میکنید ؟ یا اندروید استودیو ؟
Programmer 11 سال پیش
کلا از ابزار های پیشنهادی استاد استفاده میکنم. بله اکلیپس
hamed 11 سال پیش
خوب اینجا راه حلی که به ذهن من می رسه (و البته یه جوارایی مثل اینکه غیر استاندارده) و البته با توجه به عدم کنترل روی بک گراند اینه که به جای بک گراند روی لی اوت اصلی بیایید و یک frameLayout و یا RelativeLayout بسازید و در آن یک ImageView بگذارید که کل صفحه را بگیرد و بعد برای آن مثلا ست کنید: android:scaleType="centerCrop
Programmer 11 سال پیش
میشه گفت دلیل ناسازگاری منابع هنری که من استفاده کردم فرمت عکس ها هست ؟ برای عکس هایی که بک گراند Transparent ندارن، فرقی میکنه که از jpg استفاده کنیم یا png ?
MeY3am 11 سال پیش
نه برای عکس هایی که غیر Transparemt هستن فرمت هیچ توفیری نداره ولی برای عکسایی که Transparemt هستن باید حتمأ از فرمت PNG استفاده کنید!
MeY3am 11 سال پیش
نه برای عکس هایی که غیر Transparent هستن فرمت هیچ توفیری نداره ولی برای عکسایی که Transparent هستن باید حتمأ از فرمت PNG استفاده کنید!
Programmer 11 سال پیش
یکم تو انجمن جست و جو کردم چند جایی استاد (و دوستان) پیشنهاد داده بودن که تمرکزمون رو روی طراحی SmartPhone ها بزاریم و بعدا مثل اکثر نرم افزار ها برای برناممون نسخه مخصوص Tablet طراحی کنیم.این موضوع منطقی و معقول هست ؟ اگه فقط برای SmartPhone ها طراحی کنیم کاربرانی که میخوان برنامه مارو رو Tablet اجرا کنن تکلیفشون چی میشه ؟ کاربر ایرانی هم فقط دنبال بهونه میگرده که تک ستاره بده.فقط کافیه بفهمه برنامه روی Tablet اجرا نمیشه.در واقع با طراحی کردن فقط برای SmartPhone ها ما داریم برای خودمون تک ستاره جمع میکنیم :(
MeY3am 11 سال پیش
بنده به شخصه هر برنامه ای رو که تا الان طراحی و منتشر کردم هم قابل استفاده برای اسمارت فون بوده و هم برای تبلت، در توضیحات برنامه ها به طور کامل به این موضوع اشاره کردم!
Programmer 11 سال پیش
مشکل اصلی من اندازه عناصر مختلف در سایز های مختلف هست.هدفم فقط و فقط و فقط این هست که ui برنامه ام همونطور توی یک گوشی 3 اینچی دقیقا و دقیقا برابر همون ui باشه که توی گوشی 6 اینجی (یا حتی بیشتر، یعنی تبلت ها) نمایش داده میشه.این موضوع با طراحی فقط یک نسخه از برنامه امکان پذیر هست ؟
doost_fu 11 سال پیش
اقا میثم شما از همون استاندار 640*960 استفاده کردید ؟
Programmer 11 سال پیش
اقا میثم شما برای نسخه های تبلتی در فایلی جداگانه طراحی مربوط به حالت LandScape رو انجام دادین یا نه ؟
MeY3am 11 سال پیش
مهدی خسروی@ doost_fu@ نخیر اصلأ نیازی به طراحی جداگانه ندارید شما، کامنت اولم گویای همه چیز هست من در تمام طراحی هایم چه اندروید و چه قالب سایت از وزن استفاده میکنم و دقیقأ خروجی اون چیزی که میخوام بدست می آید!
doost_fu 11 سال پیش
از پاسختون ممنون ولی منظور من سایز تصویر بک گراند بود 640*960 ؟
MeY3am 11 سال پیش
خواهش میکنم، من معمولأ برای بک گراند یه رنگ هگزادسیمال ساده درنظر می گیرم و هر عکسی رو که بخوام در بک گراند اکتیویتی ست کنم عکس رو جدا با ImageView به بک گراند اکتیویتی موردنظر اضافه میکنم مثلأ عکس یه درخت رو یا بصورت png و ... اگه نیاز به فتوشاپ باشه که تغییرات رو اعمال میکنم و بعد، از عکس استفاده میکنم، به نظرم این روش خیلی بهتره برای بنده که تا الان بطور کامل جواب داده بدون هیچ مشکلی!
Programmer 11 سال پیش

دوستان مثلا رابط کاربری بازار رو روی تبلت ببینید.چطوری اینقدر خوب و تمیز و حرفه ای طراحی شده ؟ ایا از روش خاصی استفاده کردن ؟

نظرات

MeY3am 11 سال پیش
مطمئن باشید که بازار هم به اکثر عناصر weight وزن داده!
Programmer 11 سال پیش
یه چیزیش خیلی جالبه.وقتی با گوشی های معمولی روی هر برنامه ای کلیک میکنیم اون برنامه توی یک اکتیویتی جدید به نمایش در میاد.ولی وقتی همینکارو روی یک تبلت انجام میدیم برنامه جدید بصورت یک دیالوگ باز میشه.چجوری میشه تشخیص داد کاربر از گوشی با صفحه معمولی استفاده میکنه یا تبلتی با صفحه بزرگ ؟
hamed 11 سال پیش
تشخیص این که صفحه کاربر از چه نوعیه توی انجمن هست و سرچ کنید هم راحت پیدا می کنید. ضمنا طراحی UI بازار طراحی ساده ای است و پیچیدگی خاصی نداره. ضمن اینکه کل مشکل سر اون بک گراند بود. حل شد آیا؟
Programmer 11 سال پیش
بله درسته من تاپیک رو منحرف کردم.نه مشکل همچنان پابرجاست.در واقع من برای برطرف کردنش تلاشی نکردم.چون من اون بک گراند رو در سایز 640*960 طراحی کردم و برای رفع اون مشکل سیاهی در گوشی 6 اینچی باید سایز عکس رو عوض کنم.با عوض کردن سایز عکس هم عکس به کسی شکل خودشو از دست میده و زشت میشه.میگم مگه فولدر xhdpi برای گوشی هایی با صفحه نمایش بزرگ نبود ؟ پس چرا وقتی من منبع هنریمو توی این فولدر xhdpi انداختم بازم توی نمایش در گوشی صفحه بزرگ مشکل دارم ؟
Programmer 11 سال پیش
میشه گفت فولدر xhdpi برای گوشی های 6 اینجی تعریف نشده و برای گوشی های مثلا 6 اینجی باید از xxhdpi استفاده کرد ؟
doost_fu 11 سال پیش
چون گفتید از ایکلیپس استفاده میکنید گفتم شاید خوب باشه بدونید در اندروید استودیو فولدر بندی نیست ! به طور پیش فرض داخل فولدر res ، فولدر drawable هست و داخل اون هم پیش فرض فولدر ic_launcher قرار داده شده و فایل های ایکون در چهار سایز داخل اون هست hdpi - mdpi - xhdpi - xxhdpi و دیگه از ldpi خبری نیست حالا سایز ایکون در حالت xxhdpi در اندازه 144*144 قرار داده شده . گفتم شاید مفید واقع بشه .
doost_fu 11 سال پیش
اقای خسروی بلاخره این مشکل سایز تصویر بک گراند و ایجاد کادر سیاه اطراف ، حل شد ؟
doost_fu 11 سال پیش
داخل تنظیمات جنی موشن سایز بر حسب dpi هست اگه بخوایم جنی موشن توی سایزی شبیه یه گوشی 5 یا تبلت 7 یا 10 اینچ تنظیم کنیم سایز باید روی چند بزاریم تا حدودی بدست بیاد ؟ دیوایس ها که هر کدوم یه رزولوشنی دارند !
Programmer 11 سال پیش
والا من اومدم سایز عکس هارو خیلی بزرگ کردم بلکه مشکل سیاهی اطراف حل بشه ولی نتیجه ای نداد.ولی به این معنی نیست که "نمیشه".حتما میشه ولی من زیاد روش وقت نگذاشتم.ایشالله اگه فرصت شد میشینم مفصل روش کار میکنم و راه حل رو اینجا اعلام میکنم
doost_fu 11 سال پیش
شما روی گوشی و تبلت تست میکنید یا روی جنی موشن ؟
Programmer 11 سال پیش
روی جنی موشن همه چیز خوب و عالی هست.مشکل اصلی من روی گوشی با بزرگی 6.1 اینچ شروع شد !
doost_fu 11 سال پیش
داخل اندروید استودیو توی قسمت طراحی UI ، در قسمت پیش نمایش ، یه جا هست که میشه اندازه خروجی و مثلا یه گوشی انتخاب کرد که روی اون سایز نشون بده مثلا نوشته nexus 10 10.1 inch 2560 * 1600 xhdpi فکر کنم توی ایکلیپس هم بود ! شما داخل پیش نمایش این قسمت مشکلتون وجود داره یا نه ؟ اخه من به گوشی یا تبلت باسایز بزرگ دسترسی ندارم می خوام ببینم برتامه من هم همین مشکل داره یانه ؟
پاسخگویی و مشاهده پاسخ های این سوال تنها برای اعضای ویژه سایت امکان پذیر است .
چنانچه تمایل دارید به همه بخش ها دسترسی داشته باشید میتوانید از این بخش لایسنس این آموزش را خریداری نمایید .