تفاوت های بین طراحی UI اپ های android و ios

تیر 29, 1398     زهرا حسینی    

تفاوت های بین طراحی UI اپ های android و ios

تفاوت های بین طراحی UI اپ های android و ios

پلتفرم های اندروید و آی او اس تقریباً 95 درصد سیستم عامل های تلفن های هوشمند را در سراسر جهان  تشکیل می دهند. بدین ترتیب اپ های نیتیو android و ios زیادی روی هر یک از این پلتفرم ها نصب و استفاده می شوند. بنابراین طراحان باید در نظر داشته باشند که کاربران هر یک از این سیستم عامل ها یک تجربه کاربری مخصوص به خود دارند .

برای طراحی هرچه بهتر اپ های نیتیو android و ios ، ابتدا باید تمامی تفاوت های این دو پلتفرم را بشناسید. این تفاوت ها فقط مربوط به ظاهر اپ ها نیست بلکه این پلتفرم ها  گاهی در ساختار و عملکرد نیز متفاوت اند. پس لازم است این تفاوت ها را بشناسید و به خاطر بسپارید تا بتوانید اپ های بهتری طراحی کنید.

اپ های نیتیو android و ios دارای ویژگی های سیستم عامل مخصوص به خود هستند . راهنماهای اپل و گوگل توصیه می کنند،  تا جایی که ممکن است از استانداردهای این پلت فرم ها استفاده کنید چون کاربران با استانداردهایی که روی هر پلت فرم اجرا می شود، آشنایی دارند . بنابراین کاربران به راحتی نحوه کار با اپ شما را درک می کنند و دچار سردرگمی نمی شوند .

گوگل از دستورالعمل های متریال دیزاین استفاده می کند و اپل از رابط کاربری انسانی

تفاوت در الگوهای طراحی

یکی از رایج ترین اکشن ها در برنامه های موبایلی ، جا به جایی بین صفحات است . طراحی این اکشن بین اپ های نیتیو android و ios  کاملاً متفاوت است . در دستگاه های اندرویدی یک نویگیشن بار در پایین صفحه وجود دارد که کاربر با فشردن دکمه back می تواند به صفحه قبلی و یا مرحله قبلی منتقل شده و این ویژگی در تمامی دستگاه های اندرویدی قابل استفاده است.

android navigation bar

android navigation bar

اما این ویژگی در برنامه های ios کاملاً متفاوت است . در دستگاه های آیفون ، نویگیشن بار و دکمه برگشت به عقب وجود ندارد . در این دستگاه ها ، یک دکمه back در گوشه بالا ، سمت چپ طراحی شده است .

ios back button

ios back button

همچنین، یک swipe چپ به راست در طراحی های اپل لحاظ شده است که کار دکمه back را انجام می دهد . این ویژگی در همه اپ های این دستگاه ها کار می کند .

تفاوت پلت فرم های نیتیو android و ios در این مورد این است که در اپ های ios با swipe چپ به راست به مرحله قبل و یا صفحه قبلی بر میگردیم اما در اپ های اندروید همین اکشن باعث عوض شن تب های برنامه می شود . پس درک کامل این تفاوت ها از اهمیت بالایی برخوردار است زیرا به عنوان مثال کاربری که دستگاه اندرویدی دارد انتظار دکمه back را در پایین صفحه تلفن همراه خود دارد نه بالا سمت چپ و یا بالعکس.

تفاوت در الگوهای طراحی درون برنامه ای

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

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

tab and drawer menu

tab and drawer menu

همچنین متدی به اسم bottom navigation در متریال دیزاین وجود دارد . این متد یک روش مناسب برای جا به جا شدن بین تب ها و ویوها و سرچ می باشد . البته بهتر است از bottom navigation و تب ها به طور همزمان استفاده نشود چون باعث گیج شدن کاربر می شود.

bottom navigation

bottom navigation

در راهنمای متریال دیزاین اپل ، متدی شبیه به navigation drawer  وجود ندارد. در عوض، در دستگاه های اپل این نویگیشن در تب بار قرار می گیرد. این تب بار در پایین صفحه قرار می گیرد و قابلیت جا به جایی بین صفحات و بخش های مختلف اپ را فراهم می کند.

البته این تب بار معمولاً شامل حداکثر 5 قسمت و تقریباً شبیه bottom navigation در اندروید است . اما تفاوت های جزیی دارد و در بیشتر اپ های آی او اس استفاده می شود.

ios bottom navigation

ios bottom navigation

همچنین، المان های مشابهی برای هر دو پلتفرم وجود دارند که عملکرد یکسانی دارند (tabs و segmented control) و ( bottom navigation و tab bar) .به طور کلی می توان گفت نویگیشن یکی از مهم ترین تفاوت های بین android و ios  می باشد .

ویوهای سفارشی سازی شده

اگر می خواهید هر المان در اپلیکیشن شما دقیقا طبق استانداردهای همان پلت فرم به نظر برسد لازم است بعضی از نکات توسعه را برای طراحی بهتر اپ خود، به خاطر داشته باشید.

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

یکی از المان های طراحی که در برنامه های زیادی در هر دو پلتفرم استفاده می شود ، data picker  می باشد . همان طور  که در تصویر زیر می بینید این المان در  اپ های نیتیو android و ios  کاملاً متفاوت است . لذا استفاده از استایل ios برای اندروید و یا بالعکس باعث گیج شدن کاربر می شود.

data picker

data picker

همچنین همانطور که در تصویر زیر می بینید، در منوهایی مانند تنظیمات ،در  استفاده از radio button ها یا checkbox ها و …. در اپ های نیتیو android و ios تفاوت های کلی وجود دارد.

setting

setting

استایل دکمه ها در android  و ios

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

button style

button style

همچنین ، یک نوع دیگر از دکمه ها نیز وجود دارد : floating action buttons در اندروید و call to action buttons در آی او اس . این دکمه در اندروید برای ایجاد یک اکشن اولیه در برنامه تعبیه شده است . برای مثال نوشتن یک ایمیل جدید در برنامه ایمیل یا ایجاد یک پست جدید در شبکه های اجتماعی . اما طراحی مشابه برای این عمل اولیه در برنامه های آی او اس ،call to action buttons  است که در مرکز نوار تب واقع شده است.

button

button

تفاوت بین bottom sheets در اندروید و action sheets و activity views در آی او اس

دو نوع bottom sheet در اندروید وجود دارد :

  1. modal bottom sheets
  2. persistent bottom sheets

Modal bottom sheets دارای دو نوع از محتواست . Modal bottom sheets با اکشن های متفاوت و همچنین لیست برنامه هایی که با زدن دکمه share  برای کاربر ظاهر می شود. همین محتوا درaction sheets و activity views در آی او اس نیز وجود دارد اما در ظاهر متفاوت از اندروید است .

bottom sheet

bottom sheet

تفاوت در تاچ

android و ios دستورالعمل های متفاوتی در تاچ دارند . (برای اندروید : 48dp/48px @1x ) و (برای آی او اس : 44px @1x) . بنابراین هنگام طراحی باید دستورالعمل های مربوطه را برای هر دو پلتفرم در نظر بگیریم.

تفاوت های تایپوگرافی

در زبان انگلیسی ، San Francisco یک سیستم تایپ فیس برای آی او اس ،  Roboto تایپ فیس استاندارد برای اندروید، Noto  یک تایپ فیس استاندارد برای تمامی زبان ها در کروم و همچنین اندرویدهایی است که Roboto  را پشتیبانی نمی کنند. بنابراین شما به عنوان طراح باید به تایپوگرافی در هر پلتفرم توجه ویژه ای داشته باشید. زیرا کاربر با یک نگاه متوجه تغییر در فونت ها می شود که برای او خوشایند نیست .

فعل و انفعالات کوچک

وقتی صحبت از طراحی می شود ، معمولاً برای کاربران اولین احساس و تصور آنها نسبت به برنامه ، آخرین آن است . به همین دلیل است که جلب توجه کاربران از همان ابتدای کار ، از اهمیت بالایی برخوردار است . در طول طراحی و توسعه برنامه ، می توانیم یک تجربه واقعا جذاب برای کاربران از طریق فعل و انفعالات کوچک و انیمیشن ها ایجاد کنیم.

آیکون ها

در همه اپ های این دو پلتفرم ، آیکون های زیادی استفاده شده اند که بر پایه ی 8dp grid هستند . اما در بعضی از این اپ ها سیستم عامل اندروید از آیکون های توپر و آی او اس از آیکون های دارای یک خط استفاده می کند.

نتیجه گیری

البته که همیشه استثنائات وجود دارد : بعضی از اپ های آی او اس دستورالعمل های متریال دیزاین (Material Design Guidelines) را دنبال می کنند مثل جیمیل و بعضی اپ های اندروید دستورالعمل های رابط کاربری انسانی (Human Interface Guidelines) را دنبال می کنند مثل اینستاگرام .

gmail

gmail

instagram

Instagram

اما روشن است که طراحی با اجزای نیتیو برای هر دو سیستم عامل بسیار سریع تر می باشد. پس بهتر است زمان بیشتری را روی طراحی صرف کنیم به جای اینکه اپی بسازیم که ترکیبی از دستورالعمل های متریال دیزاین (Material Design Guidelines) و دستورالعمل های رابط کاربری انسانی (Human Interface Guidelines) باشد و سپس زمان زیادی را روی توسعه المان های سفارشی مختلف آن تلف کنیم.

اگر شما هم قصد طراحی UI برای برنامه نیتیو خود را دارید، اینجا کلیک کنید.
دسته‌بندی‌ : بلاگ

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Rating*