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 شما قابل تشخیص و آشنا باشد.

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

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

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

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

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


SEO موبایل - بهینه سازی برای تجربه کاربری و موترهای جستجو


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

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

شروع با کاربر

در شروع هر پروژه شما باید کاربر را در نظر بگیرید. بدون کاربر، هر چقدر سعی کنید، حرکتی نمی کنید. احتمالا قبلا از Term User Experience (یا UX) شنیده اید، اما برای محصول شما چه معنایی دارد؟ کاملابستگی دارد به کاربران شما. پیدا کردن آنچه که مخاطبان شما به آن پاسخ مثبت دهند، یک موضوع پیچیده است که باید مقاله خاصی در این مورد مطالعه کنید؛ بنابراین، ما در مورد آنچه که در ذهن کاربران شما ست، بیش از حد غرق نخواهیم شد. با این حال، در هر کسب و کار ی، عدم سرمایه گذاری در تجربه کاربر همیشه سبب شکست خواهد شد.

طراحی واکنشگرا

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

طراحی تایپوگرافی پاسخگو

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

هنر فضای منفی

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

فرم تماس و عضویت کارا طراحی کنید

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

از SVG بیشتر استفاده کنید

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


مقالات مرتبط

آخرین ارسال ها

آخرین جستجو ها


کتابخانه اینترنت seowebmaster5 بهترین خبرنامه سئو madaran123 وبلاگ رسمی موازی Thomas's receptions کادو سرا دانلود سرا akhbar tecnolozh3 قیمت خرید و فروش گوشی موبایل سونی
دزدگ