خوش آمدید!

برای دریافت آخرین بروزرسانی‌های افزونه، استایل و ... نیازمند ثبت‌نام در انجمن می‌باشید تا با ما بروز بمانید!

ثبت نام!

آموزش طراحی اپ برای ساعت اپل

  • نویسنده موضوع magbot
  • تاریخ شروع
اخبار

magbot

کاربر اخراجی
تاریخ ثبت‌نام
5/31/19
نوشته‌ها
10
پسندها
4
امتیازها
3
آموزش طراحی اپ برای ساعت اپل
طراحی رابط کاربری موبایل



2019/01/03
MAGBOT +
آموزش طراحی اپ برای ساعت اپل

در این مقاله شما شروع به یادگیری نحوه طراحی برنامه برای ساعت اپل و آشنایی با تئوری و اصول اساسی شروع طراحی برنامه برای ابزار پوشیدنی خواهید کرد.


برای برنامه اپل سه بخش وجود دارد: WatchKit App ، صفحه Glance و اعلانها . هر یک از اهداف مختلف چالش های طراحی خود را دارند.
WatchKit App

4.jpg


برنامه WatchKit روش اصلی مشاهده و تعامل با داده های برنامه است. معمولا در صفحه اصلی تماشا باز می شود، همچنین می توانید از طریق یک نگاه یا اعلان به آن دسترسی پیدا کنید.


مهم است که درک کنید که دو نوع ناوبری برای برنامه WatchKit وجود دارد سلسله مراتبی و مبتنی بر صفحه . در حالیکه ناوبری سفارشی می تواند برای برنامه های iOS برنامه ریزی شود، اما در Apps WatchKit محدودیت بسیار است و از سفارشی سازی پشتیبانی نمی کند.


5.jpg

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



6.jpg


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


هنگامی که شروع به طراحی می کنید، اطلاعاتی را که برای کاربر مهم است، چگونه آنها را به هم مرتبط می کنند و سپس ساختار ناوبری که بهترین راه برای دسترسی به آن داده ها را تشخیص می دهد.
Glance

7.jpg


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

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



8.jpg


در نهایت، دیدگاه ها بر اساس الگوها طراحی شده اند، بنابراین طراحی شما باید متناسب باشد به نحوی که برای داده های شما مناسب تر باشد. اپل قالب های مختلفی را برای قسمت بالای و پایین صفحه فراهم می کند.
Notifications

9.jpg


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

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



10.jpg


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


11.jpg


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


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


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

13.jpg


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




حرکات چند لمسی مانند ضربه زدن به زوم در ساعت در دسترس نیست.


14.jpg


ساعت اپل در دو اندازه - 38mm و 42mm می آید. صفحه نمایش کوچکتر 340 در 272 پیکسل و بزرگتر 390 در 312 است. برای بزرگ تر دیدن شما می توانید تصاویر را با رزولوشن دو برابر ببینید.



15.jpg


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


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


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


16.jpg


هر برنامه همچنین "رنگ کلیدی" شما را تعریف می کند که در رشته عنوان در نوار وضعیت و نام برنامه در اعلان ها نشان داده می شود. شما همچنین می توانید رنگ نوار را در اطلاعیه طولانی طراحی سفارشی کنید.


17.gif


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


هنگام ایجاد انیمیشن در ساعت اپل، نمیتوانید GIF خود را به توسعه دهنده خود بفرستید و به او بگویم که به صورت پویا آن را ایجاد کنید. شما نیاز به ارائه تصاویر جداگانه استاتیک از هر فریم برای ایجاد انیمیشن های کنترلی هستید که سریع تر و صاف تر ظاهر می شوند. بهترین راه این کار است که فایل انیمیشن خود را در After Effects یا فتوشاپ وارد کنید و فریم های جداگانه را استخراج کنید.


18.jpg


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


19.jpg


در مورد آیکون های منوی زمینه، شما باید دو اندازه تصویر را برای هر آیکون ارائه دهید. وزن خط به طور کلی باید بیشتر از 1 پیکسل در قالب 42 میلی متری باشد تا نسخه 38 میلی متری.


20.jpg



فونت سیستمی سیستم پیش فرض به صورت خودکار متن خواهد بود. با افزایش اندازه فونت، ردیابی فونت کاهش می یابد. اگر تصميم بگيريد اندازه فونت را مشخص کنيد فونت متن سانفرانسيسکو براي متني که 19 نقطه يا کوچکتر است توصيه مي شود و فونت ويندوز سانفرانسيسکو بايد براي متن که 20 نقطه يا بزرگتر باشد استفاده شود.

21.jpg


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



22.jpg


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


شما می توانید این قالب آیکون ساعت اپل دستی را دانلود کنید. برای تولید آیکون


ساعت اپل کاربران را به شیوه ای غافلگیر کننده برای دریافت اطلاعاتی که برای آنها اهمیت دارد، فراهم می کند.

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



مقالات مرتبط
نمونه های خیره کننده  طراحی رابط کاربری تعاملی موبایل

نمونه های خیره کننده طراحی رابط کاربری تعاملی موبایل
30 نمونه Gif از رابط کاربری تعاملی برای موبایل

30 نمونه Gif از رابط کاربری تعاملی برای موبایل
کیت های UI رایگان برای طراحان برنامه موبایل و توسعه دهندگان

کیت های UI رایگان برای طراحان برنامه موبایل و توسعه دهندگان
 

elecomco

کاربر تایید شده
تاریخ ثبت‌نام
3/10/20
نوشته‌ها
62
پسندها
28
امتیازها
18
محل سکونت
تهران
بسیار عالی موفق باشید .
 
ارسال کننده موضوعات مشابه انجمن پاسخ ها تاریخ
A آموزش طراحی سایت با وردپرس آموزشهای وردپرس 0
masoudfn آموزش تنظیمات درگاه پرداخت رایان پی آموزشهای وردپرس 0
grrrh درخواست آموزش ionCube آموزشهای وردپرس 1
M مباحث و مشکلات آموزش نصب وب سرور Apache مباحث و مشکلات سیستم عامل ها 0
aliilapro آموزش آموزش کرک یا نال قالب جی نیوز آموزشهای وردپرس 0
arezoshomali مسیر آموزش برنامه نویسی اندروید را بشناسید آموزش های برنامه نویسی 3
lordmehdi درخواست آموزش قرار دادن گروه کاربری در پائین انجمن آموزشهای زنفورو 6
mona.habibizadeh آموزش همه کلیدهای میانبر در محیط Gmail اخبار 0
E آموزش ترفند تبدیل اپلیکیشن فروشگاهی به کاتالوگ گفتگوی آزاد 0
sslri آموزش آموزش گرفتن تیک آبی اکانت اینستاگرام آموزش های نرم افزار 0
maede آموزش افزودن ابزارک (تولبار) به ادیتور متن در چتروم پشتیبانی زنفورو 2
afshin171 درخواست آموزش تغییر دامنه زنفور آموزشهای زنفورو 1
sslri آموزش آموزش رایگان فارسی سازی قالب و افزونه وردپرس آموزشهای وردپرس 1
afshin171 درخواست آموزش راست چین و فارسی کردن قالب وردپرس آموزشهای وردپرس 3
afshin171 درخواست افزونه یا آموزش براس سئو کردن درخواست قالب و افزونه 0
aliilapro آموزش آموزش غیرفعال کردن اپدیت ویندوز 10 آموزش های سیستم عامل ویندوز 0
alirahmani7443 راهنمایی در مورد قالب مرکز آموزش وردپرس قالب های وردپرس 1
Admin آموزش آموزش فعالسازی جستجوی پیشرفته در دسکتاپ ویندوز 10 آموزش های سیستم عامل ویندوز 0
sslri آموزش آموزش کامل ساخت شماره مجازی تلگرام رایگان آموزش های پرمیوم 1
P آموزش دسترسی به [ شبکه TOR] با دو کلیک آموزش های سیستم عامل ویندوز 0
F آموزش رایگان سئو وردپرس آموزشهای وردپرس 1
sslri نرم افزار دانلود ربات کامنت گذار در سایت ها + آموزش ویدئویی درخواست و دانلود نرم افزار 2
WALKER آموزش آموزش افزونه W3 Total Cache برای افزایش سرعت وردپرس آموزشهای وردپرس 0
soheilnew درخواست آموزش ساخت گروه کاربری vip با قابلیت پرداخت پشتیبانی زنفورو 0
WALKER آموزش آموزش تصویری قفل کردن کامپیوتر از راه دور در ویندوز 10 توسط Dynamic Lock آموزش های سیستم عامل ویندوز 0
WALKER آموزش آموزش تغییر فونت پیش فرض ویندوز 10 آموزش های سیستم عامل ویندوز 0
WALKER آموزش آموزش فعال سازی تم Light ویندوز 10 آموزش های سیستم عامل ویندوز 0
WALKER آموزش آموزش غیرفعال کردن کورتانا در ویندوز 10 آموزش های سیستم عامل ویندوز 0
A آموزش هک برنامه subcake اندروید با لاکی پچر آموزش ها 0
WALKER آموزش آموزش رفع خطای Combine Images Using CSS Sprites آموزشهای وردپرس 0
M آموزش استفاده و شخصی سازی Action Center در ویندوز 10 آموزش های نرم افزار 0
WALKER آموزش آموزش نمایش نقشه گوگل در سایت آموزشهای وردپرس 0
M آموزش ساخت واترارک با استفاده از نرم افزار Arclab Watermark Studio آموزش های نرم افزار 0
M آموزش بالا بردن امنیت گوشی با استفاده از نرم‌افزار Lookout Security Antivirus اندروید آموزش های نرم افزار 1
M آموزش رجیستر کردن IDM (کرک) آموزش های نرم افزار 0
M آموزش ساخت اکانت Origin آموزش های نرم افزار 0
M آموزش ساخت اکانت Steam درخواست کرک و فعال ساز نرم افزارها 0
M آموزش نصب بازی Fortnite آموزش های نرم افزار 0
WALKER آموزش آموزش نصب چایلد تم وردپرس آموزشهای وردپرس 0
saeedGeo آموزش فعال سازی ssl رایگان بر روی دامنه آموزش ها 0
WALKER آموزش آموزش نصب و راه اندازی افزونه MemberPress آموزشهای وردپرس 0
WALKER آموزش آموزش راه اندازی و تنظیم افزونه امنیتی Wordfence آموزشهای وردپرس 0
WALKER آموزش آموزش کار با افزونه Polylang آموزشهای وردپرس 0
TheFlash آموزش دانلود برخی از برنامه های پولی بازار و مارکت های دیگر (تصویری) آموزش های پرمیوم 0
A آموزش آموزش دانلود از سایت فیلیمو با افزونه مرورگر فایرفاکس آموزش های پرمیوم 1
A آموزش نصب دو بازی همزمان در اندروید آموزش های برنامه نویسی 0
WALKER آموزش آموزش حذف فیلد آدرس وب سایت از نظرات وردپرس آموزشهای وردپرس 0
J O K E R آموزش آموزش تغییر تصویر پس زمینه در مرورگر گوگل کروم آموزش های نرم افزار 0
J O K E R آموزش آموزش ایجاد فایل پشتیبان (فایل نصبی) برنامه نصب شده آموزش های نرم افزار 0
J O K E R فعالسازی آموزش فعالسازی اشتراک رایگان دوروزه نماوا آموزش های نرم افزار 0

موضوعات مشابه

بالا