خوش آمدید به انجمن ای فری

بازدیدکننده گرامی برای دسترسی به تمامی امکانات در انجمن عضو شوید. پس از ثبت نام و ورود به سیستم ، می توانید موضوعات ایجاد کنید ، پاسخ به موضوعات موجود ارسال کنید ، به اعضای انجمن امتیاز دهید ، اقدام به خرید و فروش کنید ، و موارد دیگر. عضویت، سریع و کاملاً رایگان است ، پس منتظر چی هستی؟

درخواست راهنمایی

اگر نیاز به راهنمایی دارید درخواست خود را ثبت کنید

فروشگاه

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

دانلود منابع

قالب و افزونه های جدید و بروز را میتوایند از اینجا دانلود کنید

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

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

magbot

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



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

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


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



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


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



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





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


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



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

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





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



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

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





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




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


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


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



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




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




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





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


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


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




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




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


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




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




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





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



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





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


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


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

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



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

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

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

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

elecomco

کاربر تایید شده
عضویت
3/10/20
ارسال ها
59
امتیاز واکنش
24
محل سکونت
تهران
بسیار عالی موفق باشید .
 
ارسال کننده موضوعات مشابه انجمن پاسخ ها تاریخ
A آموزش طراحی سایت با وردپرس آموزشهای وردپرس 0
grrrh درخواست آموزش ionCube آموزشهای وردپرس 1
M مباحث و مشکلات آموزش نصب وب سرور Apache مباحث و مشکلات سیستم عامل ها 0
aliilapro آموزش آموزش کرک یا نال قالب جی نیوز آموزشهای وردپرس 0
arezoshomali مسیر آموزش برنامه نویسی اندروید را بشناسید آموزش های برنامه نویسی 0
lordmehdi درخواست آموزش قرار دادن گروه کاربری در پائین انجمن آموزشهای زنفورو 6
mona.habibizadeh آموزش همه کلیدهای میانبر در محیط Gmail اخبار 0
elecomco آموزش ترفند تبدیل اپلیکیشن فروشگاهی به کاتالوگ گفتگوی آزاد 0
sslri آموزش آموزش گرفتن تیک آبی اکانت اینستاگرام آموزش های نرم افزار 0
maede آموزش افزودن ابزارک (تولبار) به ادیتور متن در چتروم پشتیبانی زنفورو 2
afshin171 درخواست آموزش تغییر دامنه زنفور آموزشهای زنفورو 1
sslri آموزش آموزش رایگان فارسی سازی قالب و افزونه وردپرس آموزشهای وردپرس 0
afshin171 درخواست آموزش راست چین و فارسی کردن قالب وردپرس آموزشهای وردپرس 1
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
J O K E R فعالسازی فعالسازی و آموزش گرفتن رایگان ۱۷۲۴ تومان اعتبار از ۷۲۴ آموزش های نرم افزار 6

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

shape1
shape2
shape3
shape4
shape7
shape8
بالا