آموزش های این وب سایت به صورت رایگان در دسترس است. اطلاعات بیشتر
بروز خطا
   [message]
اشتراک در سوال
رای ها
[dataList]

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

Programmer  11 سال پیش  11 سال پیش
+6 0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

پاسخگویی و مشاهده پاسخ های این سوال تنها برای اعضای ویژه سایت امکان پذیر است .
چنانچه تمایل دارید به همه بخش ها دسترسی داشته باشید میتوانید از این بخش لایسنس این آموزش را خریداری نمایید .