نوشته های اردشیر حکیمی

کتاب پرامپت: چگونه پرامپت بنویسیم؟

اردشیر حکیمی — Tue, 18 Mar 2025 20:01:52 +0330

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

مروری بر کتاب: ۱۰۱ چیزی که من در مدرسه طراحی محصول آموختم

اردشیر حکیمی — Sun, 02 Jun 2024 21:27:08 +0330

۱۰۱ نکته که من در مدرسه طراحی محصول آموختممجموعه کتاب‌های «۱۰۱ نکته» (انتشارات پنگوئن) کتاب‌های جالبی هستند. ساختار کلی این مجموعه کتاب به این شکل است که در هر کتاب، یک‌صد و یک نکته حرفه‌ای از جزییات کاربردی یک رشته یا تخصص ارایه می‌شود: هر نکته در یک صفحه.کتاب حاضر از این مجموعه، درباره «طراحی محصول» است:۱۰۱ چیزی که من در مدرسه طراحی محصول آموختمنویسندگان کتاب، طراح و معمار هستند و نکته‌هایی را برشمرده‌اند که کاملا کاربردی و حرفه‌ای هستند.نکته‌های اصلی کتاب عبارتند از:۱. طراحی (دیزاین) یک فعالیت فیزیکی است.۲. دیزاین همیشه در داخل یک سیستم انجام می‌شود.۳. مشکل واقعی، معمولا آشکار نیست.۴. اگر صورت مساله، کلی و انتزاعی است آن‌را با «چه چیز (What)» تحلیل کنید؛ اگر صورت مساله، خیلی مشخص است، آن‌را با «چرا (Why)» تحلیل کنید.۵. نیاز کاربر را به‌جای یک شیء، در قالب یک «فعل» بیان کنید: «چای نوشیدن» به‌جای فنجان۶. علاوه بر محصول، «تجربه کاربری» را نیز شناسایی کنید.۷. در ابتدای مسیر یادگیری دیزاین، به فکر ایجاد کارهای اورجینال نباشید.۸. یاد بگیرید که هرچیزی چگونه کار می‌کند.۹. کاربران، با اشیای شناخته شده ارتباط بهتری برقرار می‌کنند.۱۰. جدید، اما نه خیلی جدید. آشنا، اما نه خیلی آشنا.۱۱. متفاوت بودن، آسان است ولی بهتر بودن، دشوار است.۱۲. مسیر خلاقیت، غیرخطی است.۱۳. چطور ترسناک بودن یک برگ کاغذ سفید را کم‌تر کنیم؟۱۴. ایده‌های خود را جا‌به‌جا نمایید.۱۵. دیزاین نیاز به زبان دارد.۱۶. بینش، چیزی بیشتر از مشاهده است.۱۷. مفهوم, چیزی بیشتر از ایده است.۱۸. مرد صدک پنجاه، با انسان صدک پنجاه تفاوت دارد.۱۹. هم‌دردی را به هم‌دلی تغییر دهید.۲۰. تخصیص منابع در فرایند طراحی۲۱. شخصیت محصول را زود کشف کنید.۲۲. در تحلیل فرایند طراحی، گاهی استفاده از «چگونه (How)» و «چرا (Why)» را با هم جایگزین کنید.۲۳. عبور از مرز، بهتر از چیزی را از قلم انداختن است.۲۴. شکل از عملکرد تبعیت می‌کند... و خیلی چیزهای دیگر.۲۵. سه راه برای شکل‌دهی به اشیاء (مفهوم‌سازی فرم)۲۶. فرضیه اتفاقی: زیبایی، جهان‌شمول است.۲۷. یک کتری ارزان‌قیمت باید آب را بجوشاند، سوت بزند و نیز قابل اطمینان و جذاب باشد؛ ولی یک کتری گران‌قیمت فقط کافی است که زیبا به نظر برسد.۲۸. محصول باید نشان دهد که چه‌کار می‌کند.۲۹. به‌جای فرم‌های طبیعت، از عملکردهای آن الگو بگیرید.۳۰. به سنت‌ها شک کنید، اما آنها را کنار نگذارید.۳۱. شکل‌ها، غنی هستند.۳۲. ظرافت، در مقابل تجمل است.۳۳. اندکی ناهماهنگی، مطلوب است.۳۴. هوشمندی، بهره‌وری غیرمنتظره است.۳۵. یک محصول سرزنده، حتما نباید یک اسباب بازی باشد.۳۶. یک اسباب بازی، حتما نباید بامزه باشد.۳۷. اغراق، آگاهانه است ولی بی‌محتوایی، ناآگاهانه است.۳۸. دوربین عکاسی، هنر مدرن را به وجود آورد.۳۹. مانند دیزاینرها طراحی کنید، نه مانند هنرمندها.۴۰. چگونه یک خط صاف رسم کنیم۴۱. از طراحی پرسپکتیو برای «بیان» محصول و از طراحی ایزومتریک برای «بررسی» محصول استفاده کنید.۴۲. اتودها، ظاهر محصول را نشان می‌دهند. ماکت‌ها، تجربه استفاده از محصول را نشان می‌دهند.۴۳. ماکت بسازید تا کشف کنید، نه آنکه فقط ایده را مجسم نمایید.۴۴. تمام محصولات، حرکت می‌کنند.۴۵. محصولات حتی زمانی که مورد استفاده قرار نمی‌گیرند نیز ایفای نقش می‌کنند.۴۶. یا بعضی چیزها را بسازید ولی عالی، یا همه چیز بسازید ولی معمولی.۴۷. دنیای پیرامون خود را در قالب اعداد درک کنید.۴۸. اندازه‌های یک انسان ۱۰۰ کیلویی، ۲ برابر اندازه‌های یک انسان ۵۰ کیلویی نیست.۴۹. مواد با ۱۰٪ افزایش ضخامت، ۳۳٪ مقاوم‌تر می‌شوند.۵۰. میزان اهمیت هر موقعیتی را تشخیص دهید.۵۱. یک محصول، یک وزن درست دارد.۵۲. آنچه که به بی‌وزنی معنا می‌دهد، خود وزن است.۵۳. جزییات، مفهوم را می‌سازند.۵۴. یک جعبه، بیشتر از یک جعبه است.۵۵. پایه‌ها مهم هستند.۵۶. نمای پیچ‌ها مهم است.۵۷. بخشی از داخل محصول را نمایش دهید.۵۸. دم و بازدم محصول.۵۹. رنگی که مواد اولیه محصول دارند را با رنگ دیگری نپوشانید.۶۰. رنگ‌های روشن، جزییات را تقویت می‌کنند. رنگ‌های تیره، سایه‌ها را تقویت می‌کنند.۶۱. محصولات کاربردی را با رنگ سفید، محصولات پیچیده را با رنگ سیاه، و محصولات حرفه‌ای را با پوشش فلزی نشان دهید.۶۲. سطوح مات لغزنده‌تر از شیشه است.۶۳. پوشش با رنگ، بهترین گزینه نیست.۶۴. برای انتخاب رنگ، مواد و پرداخت‌کاری، از روی نمونه‌های واقعی تصمیم بگیرید.۶۵. ارگونومی خوب، الزاما به‌معنای کاربری عالی نیست.۶۶. اصول صندلی۶۷. صندلی، نخستین چیزی است که شما نیاز دارید، وقتی‌که شما واقعا به‌چیزی نیاز ندارید. صندلی، نشانه‌ای از تمدن و شهرنشینی است و بنابراین صندلی نیازمند طراحی شدن است.۶۸. به کاربر، شانس کشف کردن محصول و عملگرهای آن را بدهید.۶۹. ابعاد سوییچ‌ها، تابع عواقب عملکرد آنها است.۷۰. آیا چیزی که انتظار می‌رفت اتفاق بیفتد اتفاق افتاد؟۷۱. نرم‌افزارها به‌طرز اجتناب ناپذیری ناکامل هستند.۷۲. ساختن هزار عدد از چیزی، دشوار است.۷۳. اجزایی از محصول که کوتاه‌ترین طول عمر را دارند، طول عمر کل محصول را تعیین می‌کنند.۷۴. تجربه کاربری را در طول زمان طراحی کنید.۷۵. مفهوم «جا باز کردن لباس نو» را به‌جای «ول‌شدگی لباس فرسوده» ترجیح می‌دهم.۷۶. آلودگی، یک نقص طراحی است.۷۷. پلاستیک نام یک ماده نیست بلکه حالت شکل‌پذیری ماده است.۷۸. قالب‌گیری تزریقی۷۹. قیمت خرده‌فروشی = (قیمت مواد مصرفی + هزینه کار) × ۴۸۰. اکوسیستم آیکیا۸۱. اکتشافات مهم طراحی را دور از کامپیوتر انجام دهید.۸۲. طرح‌های کم‌جزییات، بازخوردهای بیشتری می‌گیرند.۸۳. اطمینان خود به یک مفهوم را به دستاوردهای آن محدود کنید.۸۴. ایده را بیش از حد نیاز، پیاده‌سازی نکنید.۸۵. طرح‌های خود را با اسم‌های با معنا، نام‌گذاری کنید.۸۶. سادگی مفهومی، هشداری است برای پیچیدگی‌های پنهان.۸۷. یک چیز را مهم‌تر از بقیه چیزها بسازید.۸۸. اگر به اندازه کافی جواب در اختیار ندارید، به این معنا است که به اندازه کافی سوال نمی‌پرسید.۸۹. پیوسته سوال‌های بنیادی را مرور کنید.۹۰. کارهایی که باید در زمان گرفتار شدن انجام دهید.۹۱. مخاطب را در جریان پیشرفت طرح قرار دهید و ناگهان او را با طرح نهایی غافلگیر نکنید.۹۲. فقط ظاهر محصول را نشان ندهید بلکه عملکرد آن‌را هم نمایش دهید.۹۳. هر ایده‌ای که اتود زده‌اید را به مخاطب ارایه ندهید.۹۴. از نظرات منتقدان استفاده کنید.۹۵. علاوه بر استدلال، مخاطب را از طریق داستان متقاعد کنید.۹۶. اولین محصول خود را کوچک و سبک انتخاب کنید.۹۷. از پتنت و حق ثبت، برای محافظت از علایق تجاری خود استفاده کنید و نه علایق احساسی.۹۸. افرادی که اصلا آنها را نمی‌شناسید ممکن است بیشتر از افرادی که آنها را به‌خوبی می‌شناسید به شما کمک کنند.۹۹. مهم نیست که اولین شغل شما چه شغلی باشد.۱۰۰. مهارت نهایی، مهارت طراحی نیست؛ بلکه مهارت درک کردن و فهمیدن است.۱۰۱. طراحی‌های شما شبیه خودتان به نظر خواهند رسید حتی اگر سعی نکنید که آنها را شبیه به خودتان طراحی کنید.نکته ۱۰. جدید، اما نه خیلی جدید. آشنا، اما نه خیلی آشنا.نکته ۱۶. بینش، چیزی بیشتر از مشاهده است.نکته ۱۷. مفهوم, چیزی بیشتر از ایده است.دانلود کامل کتاب، از طریق این لینک امکان‌پذیر است.

مروری بر تجربه‌کاربری ناب (Lean UX)

اردشیر حکیمی — Tue, 20 Sep 2022 11:28:32 +0430

تولید بر اساس تقاضای مشتری، انبار نکردن، حذف زایدات و ضایعات، به‌کارگیری تخصص‌های مختلف، مشارکت همه اعضای تیم و هماهنگی آنهامتد Lean UX یکی از متدهای طراحی‌محصول است. واژه Lean در لغت به‌معنای لاغر و بدون‌چربی است، ولی اصطلاحا به مفهوم ناب، خالص و بدون اضافات است. به‌طور خلاصه، Lean UX یعنی UX ِ ناب که با صرف حداقل منابع، می‌تواند بهره‌وری را افزایش داده و اتلاف زمان، هزینه و غیره را کاهش دهد.مفهوم Lean (ناب)، مختص تجربه‌کاربری نیست بلکه در موارد دیگر هم استفاده می‌شود؛ مثلا تولید ناب، کسب‌وکار ناب، و استارت‌آپ ناب. در واقع، متد تجربه‌کاربری ناب (Lean UX)، نشات گرفته از ۳ متد دیگر است:۱. متد استارت‌آپ ناب (Lean startup)۲. متد چابک (Agile)۳. فرایند تفکر طراحی (Design thinking)هدف Lean UXهدف Lean UX طراحی و توسعه‌ی سریع محصول با در اختیار داشتن منابع محدود است به‌گونه‌ای که بیشترین رضایت را برای کاربر محصول فراهم کند. بنابراین به‌جای توسعه‌ی تمام و کمال محصول، ابتدا نمونه اولیه آن‌را تهیه می‌کنیم و به کاربر و ذی‌نفعان پروژه ارایه می‌دهیم و از آن‌ها فیدبک می‌گیریم. سپس نظرات منطقی آن‌ها را در طراحی جدید لحاظ می‌کنیم. اجرای تغییرات جدید بر روی نمونه اولیه، آسان‌تر از ایجاد تغییرات در نمونه نهایی است.روند انجامچرخه کلی تجربه‌کاربری ناب. عبارت GOOB در تصویر بالا مخفف Get Out Of the Building است یعنی به‌جای برگزاری جلسات داخلی، با کاربر گفتگو کنید و بازار را بررسی کنید.در Lean UX اعتقاد بر این است که طراحی اولیه که برای محصول انجام می‌دهید، غلط است و به‌مرور و در جریان پیشرفت پروژه، اصلاح می‌شود. بنابراین روند طراحی باید چرخه‌ای و انعطاف‌پذیر باشد و به‌جای وقت گذاشتن برای جزییات محصول، ابتدا باید یک نمونه‌ی حداقلی از محصول (MVP) تهیه شود. سپس نسبت به این نمونه اولیه از کاربران و ذی‌نفعان پروژه، نظرسنجی شود. پس از تحلیل داده‌های به‌دست آمده، تغییرات در طراحی ادغام می‌شود و این چرخه ادامه می‌یابد. در همین راستا، بیش از آنکه به روال مرسوم مستندسازی پروژه توجه شود، به ایجاد درک مشارکتی از ذات واقعی محصول در بین اعضای تیم پرداخته می‌شود.با توجه به توضیحات بالا، چرخه خلاصه زیر برای فرایند Lean UX تعریف می‌شود که مشتمل بر ۳ جزء است:• ساختن• سنجش• آموختنچرخه فرایند Lean UXاصول Lean UXتجربه کاربری ناب، بر پایه اصول زیر استوار است:تیم از افرادی با تخصص‌های مختلف تشکیل می‌شود: طراح، برنامه‌نویس، متخصص فروش و غیره.تعداد نفرات تیم نباید از ۱۰ نفر بیشتر باشد، تا امکان شکل‌گیری ارتباط موثر بین اعضای تیم فراهم گردد.ملاک پیشرفت پروژه، دستیابی به نتیجه و اهداف تجاری پروژه است. Lean UX نتیجه‌گرا است و خروجی کار، هرچه که باشد، اگر نتیجه‌ حاصل نشود، پروژه پیشرفت نکرده است.تعریف صورت مساله، کافی نیست. تمرکز اعضای تیم باید بر پیدا کردن راه حل‌ باشد.چیزهای به‌دردنخور، نامربوط و غیرضروری باید از پروژه حذف شوند.در بدو امر، همه جزییات محصول نباید طراحی شوند. طراحی باید محدود شود به بخش‌های بسیار مهم پروژه.هدف اصلی، کشف نحوه عملکرد کاربر و نحوه تعامل او با محصول است.به‌جای برگزاری جلسات داخلی، وقت خود را صرف گفتگو با کاربر و بررسی بازار نمایید تا از نیازهای کاربر مطلع شوید.اعضای تیم باید یافته‌های خود را با دیگر اعضا به اشتراک گذارند تا درک مشترک نسبت به پروژه ایجاد شود.از خرد جمعی اعضای تیم بهره بگیرید.فعالیت‌های خود را به اطلاع دیگران برسانید.به‌جای حدس زدن، از کاربر سوال کنید.ابتدا چیزهایی را که باید، از پروژه یاد بگیرید و سپس پروژه را توسعه دهید.جواب ندادن ایده‌ها قابل قبول است. در راستای یافتن بهترین راه حل، ممکن است برخی از ایده‌ها به جواب نرسند.در مستندسازی پروژه، زیاده‌روی نکنید. بی‌دلیل مستندات و اسناد را جمع‌آوری نکنید.

پیکسل پرفکت (Pixel perfect) در طراحی UI

اردشیر حکیمی — Sat, 17 Sep 2022 19:42:11 +0430

امروزه عبارت "پیکسل پِرفِکت" به یکی از کلیدواژه‌های پرکاربرد در طراحی UI و طراحی محصول تبدیل شده است. معنای عبارت پیکسل‌پرفکت وابسته به معنای دو واژه‌ی "پیکسل" و "پرفکت" است که به توضیح آنها می‌پردازیم.صفحه نمایش وسایل الکترونیکی از یک ماتریس نقاط نوری تشکیل شده که هر یک از این نقاط، پیکسل نام دارد و تراکم آنها با PPI نشان داده می‌شود. تراکم بیشتر پیکسل = وضوح بیشتر تصویرهمان‌طور که می‌دانیم، صفحه نمایش وسایل الکترونیکی (مثلا موبایل، تبلت و مانیتور) از یک ماتریس شامل نقاط نوری تشکیل شده است. هر یک از نقاط این ماتریس، "پیکسل" نام دارد که به‌طور مستقل می‌تواند رنگ‌های مختلفی را نشان دهد.در واقع، رزولوشن صفحه نمایش به تعداد پیکسل‌های آن در واحد اینچ (۲/۵۴ سانتی‌متر) بستگی دارد که با PPI (Pixels per inch) بیان می‌شود: تعداد پیکسل بیشتر در هر اینچ یعنی وضوح تصویری بهتر و بالاتر آن صفحه نمایش. واژه‌ی "پرفکت" هم که به معنای عالی و تمام‌عیار است. ولی مفهوم پیکسل پرفکت کمی متفاوت از معنای تحت‌الفظی آن است.در طراحی محصول، پیکسل پرفکت در ۲ مورد متفاوت استفاده می‌شود:۱. پیکسل‌پرفکت در طراحی UI: یعنی اجزای بصری (مثلا آیکون‌ها) به‌صورتی طراحی شوند که در ابعاد مختلف، دارای لبه‌های واضح باشند و کیفیت و وضوح تصویری آنها تغییر نکند.۲. پیکسل‌پرفکت در برنامه‌نویسی Front end: یعنی کدنویسی به‌صورتی انجام شود که دقیقا و جزء به جزء، مطابق با طراحی باشد.در این مطلب، تمرکز ما بر روی مورد اول یعنی پیکسل‌پرفکت در طراحی UI است.چگونه یک آیکون پیکسل‌پرفکت طراحی کنیم؟ابتدا باید تنظیمات نرم‌افزار را به‌صورتی تغییر دهیم که مبنای طراحی، پیکسل‌ها باشد.مقدار Gridline every را بر روی 1px و مقدار Subdivisions را برابر با ۱ قرار می‌دهیم.مثلا در نرم‌افزار Illustrator در منوی Edit به آدرس زیر می‌رویم:Edit > Preferences > Guides & Gridدر اینجا مقدار Gridline every را بر روی 1px (۱ پیکسل) و مقدار Subdivisions را برابر با ۱ قرار می‌دهیم.بعد از آن در منوی Edit به آدرس زیر می‌رویم:Edit > Preferences > Unitsدر اینجا واحدهای General و Stroke را به Pixels تغییر می‌دهیم.سپس در منوی View باید گزینه‌های Pixel Preview و Snap to Pixel را فعال کنیم.همان‌طور که در شکل بالا می‌بینید، فایل جدید را بر مبنای پیکسل تعریف می‌کنیم.لبه‌های تصویر A ناواضح و لبه‌های تصویر B واضح است. تصویر B پیکسل‌پرفکت است.نکته اساسی در طراحی پیکسل‌پرفکت آن است که از اعداد صحیح (رُند و بدون ممیز) برای مقادیر طول، عرض و مختصات شکل استفاده کنیم.مقادیر X و Y و W و H باید اعداد صحیح (بدون ممیز) باشنداستفاده از مقادیر اعشاری و ممیز دار باعث می‌شود که پیکسل‌های کاملی نداشته باشیم و لبه‌های شکل، ناواضح شوند.لبه‌های ناواضح به‌دلیل استفاده از ممیز در مقادیر عددینکات زیر نیز در طراحی پیکسل‌پرفکت حایز اهمیت هستند:• ضخامت خطوط طراحی (Stroke width) باید عدد صحیح (بدون ممیز) باشد.• تغییر مقیاس در اشکال، بهتر است با ضرایب رند انجام شود.• منحنی‌ها باید به‌صورتی اصلاح شوند که بازوهای منحنی به‌صورت افقی یا عمودی قرار گیرند (تصاویر زیر).پیکسل‌پرفکت نیستپیکسل‌پرفکت هستهمان‌طور که قبلا گفته شد، باید گزینه Snap to Pixel را در نرم‌افزار فعال کنیم. نتیجه‌ی آن، طراحی آسان‌تر و جابجایی و تغییر مقیاس ساده‌تر است.توجه نمایید که امکان اصلاح خطوط افقی و عمودی با استفاده از کلیک راست و انتخاب دستور Make Pixel Perfect هم وجود دارد، ولی این دستور نمی‌تواند خطوط زاویه‌دار و منحنی را اصلاح کند.

تایپ‌فیس در طراحی UI/UX

اردشیر حکیمی — Mon, 05 Sep 2022 15:36:42 +0430

بهتر است از کلمه "تایپ‌فیس (یا قلم)" به جای کلمه "فونت" استفاده کنیم؛ چراکه فونت در واقع، فایل موجود بر روی کامپیوتر است که نرم‌افزار از طریق آن فایل، تایپ‌فیس را رندر می‌کند.استفاده بیش از حد از قلم یا تایپ‌فیس‌های متنوع در طراحی، کار را شلوغ و غیرحرفه‌ای جلوه می‌دهد:معمول آن است که فقط از ۲ نوع تایپ‌فیس در یک محصول استفاده کنیم.این دو نوع تایپ‌فیس در دو مورد زیر استفاده می‌شوند:۱. یک نوع تایپ‌فیس برای عنوان‌ها یا تیتر۲. یک نوع تایپ‌فیس برای بدنه نوشتاربرای تنوع بخشیدن به نوشتار، می‌توان از حالت‌های مختلفی که در یک خانواده فونت (Font family) وجود دارد استفاده کرد، مثلا استفاده از حالت‌های نازک، بولد یا ایتالیک همان تایپ‌فیس اصلی.از آنجا که تایپ‌فیس بخشی از برند محصول است و باید در برندبوک نیز درج شود لذا در طراحی یا انتخاب آن باید به چند جنبه مختلف توجه نمود: زیبایی، خوانایی، ارتباط با موضوع، سازگاری با برند، و سازگاری فنی.حروف باید زیبا باشند و زیبایی آنها متناسب با موضوع و محتوا و نیز هدف طراحی باشد. حروف باید خوانا باشند به‌خصوص حروفی که در بدنه متن استفاده می‌شوند. خوانایی حروف به عوامل مختلفی بستگی دارد که یکی از مهم‌ترین آنها، سریف (Serif) است. سریف به زایده‌های کوچکی گفته می‌شود که بر روی لبه‌های حروف انگلیسی قرار می‌گیرد‌.سریف به زایده‌های کوچکی گفته می‌شود که بر روی لبه‌های حروف انگلیسی قرار می‌گیرد‌.در حروف فارسی، چیزی که به‌جای سریف یا زایده در طراحی حروف وجود دارد، استفاده از تغییر ضخامت در بدنه حروف است.در حروف فارسی، تغییر ضخامت حروف معادل سریف است.از این بابت، تایپ‌فیس‌ها به دو دسته تقسیم می‌شوند:۱. سریف‌دار (Serif)۲. بدون سریف (Sans-serif)معمولا حروف سریف‌دار در گرافیک چاپی خواناتر هستند درحالی‌که حروف بدون سریف در گرافیک دیجیتال خواناتر می‌باشند. بنابراین در طراحی اپلیکیشن و سایت، باید از حروف بدون سریف استفاده کرد.تایپ‌فیسی که برای تیتر یا عنوان استفاده می‌شود باید قابلیت فشرده‌سازی بالایی داشته باشد. تیتر را معمولا کمی فشرده‌تر و متراکم‌تر از متن معمولی باید نوشت. پس برای انتخاب تایپ‌فیس مناسب برای عنوان متن، باید به Kerning آن فونت نیز توجه کرد. کرنینگ در واقع تنظیم فضای آزاد بین دو حرف است. هدف از کرنینگ، ایجاد تعادل در فضای منفی حروف است تا خوانایی و زیبایی متن افزایش یابد.کرنینگ تنظیم فضای آزاد بین حروف است. بهتر است تایپ‌فیس را از نمونه‌های استاندارد که به‌صورت پیش‌فرض بر روی سیستم کاربر موجود هستند انتخاب کنید چرا که سرعت بارگذاری صفحه افزایش می‌یابد و مشکلاتی مانند FOUC یا flash of unstyled content کمتر ظاهر می‌شود. FOUC همان مشکلی است که در بدو باز کردن برخی صفحات اینترنتی آشکار می‌شود یعنی اطلاعات صفحه ابتدا به‌صورت خام و بدون استایل، بارگذاری می‌شوند و پس از چند لحظه، اصلاح شده و استایل بر روی محتوای صفحه اعمال می‌شود.اندازه مناسب حروف، عاملی کلیدی در طراحی محصول است. شاخص اندازه‌گیری حروف، ارتفاع آنها است. منظور از اندازه حروف، ارتفاع آنها است.اندازه حروف معمولا بر حسب واحد پوینت (برای گرافیک چاپ) و واحد پیکسل (برای گرافیک دیجیتال) بیان می‌شوند. یک پوینت معادل ۳۵/. میلیمتر است ولی یک پیکسل در دستگاه‌های مختلف، اندازه متفاوتی دارد. تنوع در اندازه حروف مهم است؛ هرچه اهمیت موضوع بیشتر باشد از حروف درشت‌تری استفاده می‌کنیم، ولی:در طراحی یک اپلیکیشن، باید حداقل ۲ سایز و حداکثر ۳ سایز مختلف از حروف دیده شوند.به‌صورت پیش‌فرض، در طراحی یک اپلیکیشن بهتر است تنوع اندازه حروف، بسته به اهمیت متن، به‌صورت زیر باشد:• در سیستم متریال‌دیزاین: مقادیر ۱۴ و ۱۶ پیکسل• ‏در سیستم iOS: مقادیر ۱۵ و ۱۷ پیکسلفیلدهایی که باید توسط کاربر تکمیل شوند نیز باید حداقل ۱۶ پیکسل باشند. اگر ترکیب حروف فارسی و انگلیسی در یک متن وجود داشته باشد بهتر است حروف انگلیسی ۲ پیکسل کوچک‌تر از حروف فارسی باشند. یعنی در یک متن ترکیبی، حروف فارسی اندکی بزرگ‌تر از انگلیسی نوشته می‌شوند. برای فاصله خطوط هم مقدار ۱/۵ خط مناسب است.در مورد فیلدهای ورود اعداد طولانی یا چند بخشی (مانند اطلاعات کارت بانکی) خوانایی بر زیبایی اولویت دارد. بنابراین بهتر است از تایپ‌فیس رسمی و مینیمال استفاده شود تا علاوه بر خوانایی، اعتمادبرانگیز باشد. همچنین اندازه اعداد اندکی درشت‌تر و با فاصله‌گذاری بیشتر و کرنینگ غیرفشرده انجام شود. بهتر است اعداد با رنگ مشکی و بر روی زمینه سفید بیایند تا افراد کوررنگ و کم‌بینا هم بتوانند به آسانی فیلدها را تکمیل کنند. نحوه درج ممیز بین اعداد اعشاری و تاریخ (/ یا .) و نیز واحد پول (ریال یا تومان) باید به وضوح بیان شود و ترجیحا به‌صورت استاتیک و غیرفابل تغییر در کنار یا بین باکس‌های اختصاص یافته به فیلدهای عددی بیایند. همچنین در یک اپلیکیشن فارسی، اعداد باید به زبان فارسی باشند و از اعداد انگلیسی استفاده نشود. نباید از کاربر بخواهیم که برای ورود اعداد، حتما از صفحه کلید انگلیسی استفاده کند. به‌طور کلی، مشکلات فنی جمع‌آوری و ذخیره داده‌ها در نرم‌افزار نباید به سمت کاربر منتقل شود.اگرچه انتخاب نوع تایپ‌فیس بستگی به هدف طراحی دارد، ولی به‌صورت عمومی فونت‌های زیر برای بدنه نوشتاری اپلیکیشن مناسب هستند:فونت‌های مناسب فارسی برای اپلیکیشن• وزیر• ‏ایران‌سنس• ‏یکان• ‏ترافیک• ‏کوه نور• ‏دیروز• ‏صمیم• ‏رویا• ‏شبنم• ‏تاهومافونت‌های مناسب انگلیسی برای اپلیکیشن• Roboto• Open sans• Helvetica• San francisco• Montserrat• Nexa• Nunito• Lato• Aeonik• Tahomaبرای عنوان‌ها یا تیتر نوشتار در اپلیکیشن، می‌توان از حالت Bold همین فونت‌ها و یا از تایپ‌فیس‌های ضخیم استفاده نمود. در انتخاب تایپ‌فیس فارسی باید دقت کرد که اعداد فارسی نیز در داخل فونت گنجانده شده باشند. تایپ‌فیس باید با گشتالت، رنگ‌بندی و آیکون‌ست هماهنگ باشد.تایپ‌فیس باید در کل اپلیکیشن ثابت باشد و تغییر نکند.همواره به این نکته دقت کنید که متن باید شبیه متن باشد، به این معنا که مثلا تداعی کننده دکمه و کلید نباشد. بنابراین نوشتار را به صورت کلمه‌های تکی و منفصل ننویسید تا تداعی دکمه نشود. اگر قرار است کلمه‌ای نقش دکمه را ایفا کند حتما آن‌را متمایز کنید: مثلا یک قاب دور آن بکشید و یا دو طرف آن |خط عمودی| بگذارید تا کاربر گمراه نشود. معمولا بر روی دکمه‌ها، یک نوشته قرار می‌گیرد: لازم است که تمام محدوده دکمه (و نه فقط نوشته روی آن) قابل کلیک کردن و فعال باشد.روی آیکون، نوشته نمی‌آید و اصولا بهتر است آیکون، بدون نوشته باشد ولی در صورت لزوم می‌توان نوشته را زیر آیکون قرار داد.بر روی آیکون‌ها از نوشته استفاده نکنید. در صورت نیاز، نوشته را در قالب لیبل، زیر آیکون بیاورید.بر روی نوار پیشرفت (Progress bar) از نوشته استفاده کنید: عددی که نشان دهد درصد پیشرفت چقدر است.صحیح‌تر است که به‌جای استفاده از عبارات Log in و Log out از عبارات Sign in و Sign out استفاده کنیم.صحیح‌تر است که به جای عبارت Register از Sign up استفاده کنیم.در نوشتار UI و UX، به‌جای فعل مجهول از فعل معلوم استفاده کنیم. مثال:لطفا کد ملی را وارد کنید (مناسب)لطفا کد ملی وارد شود (نامناسب)در طراحی محصول، هرچند از تایپ‌فیس مناسب استفاده می‌کنید ولی کاربر را وادار به خواندن متن‌های طولانی نکنید. هرچه می‌توانید کم‌تر از متن استفاده کنید: به‌جای گفتن، نشان دهید.

برند بوک (Brand book) چیست؟

اردشیر حکیمی — Thu, 31 Mar 2022 14:35:17 +0430

برند بوک چیست؟برند بوک یا کتابچه برند، در واقع راهنمای طراحی، حفظ و توسعه برند یک شرکت است. برند بوک، سندی است که جزییات هویت یک شرکت را در بر دارد، و شامل دستورها و قوانینی است که نحوه نمایش هویت سازمانی را در ارتباط با مشتری و مجامع عمومی بیان می‌کند.هدف از تهیه برند بوکزمانی که بخواهید یک برند ایجاد کنید، نیازمند تدوین برند بوک هستید تا:کیفیت لازم برای برند ایجاد شوداین کیفیت ایجاد شده، ثابت بماند و تغییر نکندتصمیم‌گیری سلیقه‌ای از فرایند طراحی حذف شودمحتوای برند بوکیک برند بوک کامل و قابل قبول، باید شامل موارد زیر باشد:ماموریت شرکت و ارزش‌های مورد نظر شرکتآرم و لوگوتایپ و شکل و رنگ و وضعیت قرارگیری آنهارنگ(های) سازمانی ثابت و همیشگیپالت‌های رنگی طراحیافکت‌ها (مثلا سایه، برجستگی و دورگیری)فونت‌(های) سازمانی ثابت و همیشگیآیکون‌‌هاکاراکتر کارتونی سفیر برندنحوه استفاده از تصاویر عکاسی شدهلی‌اوت و گریدها برای بروشور و وب‌سایتلی‌اوت و گریدها برای اوراق اداریبسته‌بندی (ساختار، گرافیک، و متریال)طراحی محیطی و تابلوهای شرکتطراحی لباس پرسنلتبلیغات محیطی و نمایشگاهیتمپلیت فایل‌های (پاورپوینت) ارایه و پرزنتیشن جلساتکاور و تمپلیت‌ها برای شبکه‌های اجتماعی، استیکر و آواتارنکته: بهتر است که در برند بوک، به موارد بالا در دو بخش جداگانه B2C و B2B پرداخته شود.برای توضیح بهتر موضوع، در بخش بعد به مطالعه‌موردی برندبوک شرکت دولینگو (دوئولینگو)، به عنوان یک نمونه کامل پرداخته می‌شود.برند بوک شرکت دولینگو (Duolingo)دولینگو (دوئولینگو)، یک اپلیکیشن و وب‌سایت آموزش آنلاین زبان‌های خارجی است که با بهره‌گیری از Gamification و روش‌های خلاقانه و کاربر پسند، طرفداران زیادی را در کشورهای مختلف به‌دست آورده است. همچنین اپلیکیشن دولینگو به عنوان نمونه‌ای موفق از طراحی برند، طراحی UI و طراحی UX، نکات آموزنده بسیاری را در خود جای داده است. در اینجا، به بررسی اجزاء و بخش‌های برندبوک آن می‌پردازیم.پالت رنگمحور طراحی برندبوک در نرم افزار دولینگو، کاراکتر جغدی است که Duo نام دارد. پالت رنگی تعریف شده در برندبوک نیز بر اساس رنگ‌های استفاده شده در طراحی این کاراکتر است: مثلا سبز پَر.محور طراحی و رنگ در برندبوک نرم افزار دولینگو، کاراکتر جغدی است که Duo نام دارد.لوگوتایپلوگوتایپ در سه رنگ می تواند استفاده شود: سبز، خاکستری و سفید.فضای خالی اطراف لوگو با سایر عناصر اطراف، نسبی است و به اندازه یک o از duolingo است.فضای خالی اطراف لوگو با سایر عناصر اطراف، نسبی است و به اندازه یک o از duolingo است.لوگوتایپ باید در هر شرایطی خوانا باشد. حداقل اندازه لوگو در کارهای چاپی ۳۵ میلیمتر و برای صفحات نمایش ۱۰۰ پیکسل است.لوگوتایپ duolingo در حالت عمودی، از پایین به بالا نوشته می‌شود. عموما در حالت عمودی، نوشته‌های انگلیسی از پایین به بالا، و نوشته‌های فارسی از بالا به پایین نوشته می‌شوند.لوگوتایپ duolingo در حالت عمودی، از پایین به بالا نوشته می‌شود.در تدوین برند بوک باید به موارد عدم انطباق هم اشاره شود. مثلا، همان‌طور که در شکل زیر آمده است، لوگوتایپ نباید روی تصویر بیاید، باید تو پر و فقط با رنگ سبز باشد، فقط افقی یا عمودی نوشته شود و بین اجزای آن فاصله نیفتد.موارد بالا در تضاد با برند هستند: لوگو نباید روی تصویر بیاید، باید تو پر و فقط با رنگ سبز باشد، فقط افقی یا عمودی نوشته شود و بین اجزای آن فاصله نیفتد.فضای خالی اطراف لوگو با سایر عناصر اطراف، نسبی است و به اندازه یک o از duolingo است. نیم o نیز بین جغد و نوشته است.موارد بالا در تضاد با برند هستندچیدمان صحیحطراحی فونتبرای اپلیکیشن دولینگو، یک فونت اختصاصی به نام Feather (پَر) طراحی شده که برگرفته از کاراکتر جغد این اپلکیشن است. این فونت توسط طراح ژاپنی Toshi Omagari طراحی شده است. فرایند طراحی فونت به این صورت بوده که ابتدا لوگوتایپ دولینگو طراحی شده و سپس بر مبنای حروف لوگوتایپ، طراحی سایر حروف فونت آغاز شده است. در طراحی حروف، یکی از شاخص‌های کلیدی، حرف g لوگوتایپ duolingo بوده که کشیدگی بالای آن شبیه ابروی جغد است.حرف g از duolingo شاخص کلیدی طراحی سایر حروف است.حرف g و تناسب آن با ابرو و بال جغد، ملاک انتخاب از بین طرح‌ها بوده است.لبه بال کاراکتر جغد و تشابه آن با لبه حروف d و u لوگوتایپ باعث ایجاد یکپارچگی بصری در کل برند شده است.لبه بال کاراکتر جغد و تشابه آن با لبه حروف d و u لوگوتایپطراحی فونت Feather بر اساس حروف لوگوتایپ دولینگو بوده است.فونت اختصاصی Feather طراحی شده برای دولینگوتیترهای طولانی‌تر از ۱۰ کلمه با فونت Din Next Rounded و مطالب معمول با فونت Nunito نوشته می‌شوند.موارد بالا در تضاد با برند هستندزبان تصویری و تصویرسازیهر تصویر جدید در دولینگو باید مطابق با ضوابط زیر طراحی شود.دستور رنگ برای تصویرسازیسرزنده، پر جنب و جوش، و رنگارنگ...... ولی تعداد رنگ‌ها باید محدود باشد.حفظ سادگی: هم از لحاظ زیبایی و هم از نظر موارد فنی اپلیکیشن، تعداد 15 جزء برای تصویرسازی یک گربه، مناسب است.در تصویرسازی فقط می‌توان از دایره، مربع و مثلث گوشه‌گرد استفاده کرد. عنصر "نقطه" در برندبوک تعریف نشده است.ریتم اجزای تصویر، باید مانند یک ملودی، تنوع داشته باشد و کم و زیاد شود.شکل‌ها تخت هستند ولی اگر بخواهیم به تصویر عمق دهیم باید خط‌دید، ثابت بماند.سایه‌ی زیر تصاویر باید به شکل یک خط ساده باشد. رنگ سایه، بسته به رنگ پس‌زمینه متغیر است.طراحی کاراکتراتودهای طراحی کرکتر اصلی اپلیکیشن دولینگو به نام Duoبازنگری و تغییر طراحی Duoکرکتر Duo از زوایای مختلف: نیم‌رخ، سه‌رخ و تمام‌رخوضعیت پاهای کرکتر Duo در حالت‌های مختلففقط کمر، آرنج و مچ Duo امکان خم شدن دارند.نحوه چرخش سرموارد بالا در تضاد با برند هستند: راست: اگر بالها جلوتر یا عقب‌تر از بدن هستند باید رنگ آنها کمی تیره‌تر شود؛ وسط: کرکتر، نباید انگشت داشته باشد؛ چپ: مردمک‌ها در وسط چشم قرار نگیرند چون کرکتر، وحشت‌زده به نظر می‌رسد.تعدادی از کرکترهای استفاده شده در دوئولینگودر دوئولینگو، همه راه‌ها به دوئو ختم می‌شوند!مبنای طراحی همه چیز در برندبوک دولینگو، شخصیت دوئو است.اجزای یکی از کاراکترها موارد بالا در تضاد با برند هستندموارد بالا در تضاد با برند هستندموارد بالا در تضاد با برند هستندآیکون و آواتارتبلیغات محیطیمحتوا و ارزش‌های برندبخشی از برند بوک هر سازمان یا شرکت، شامل مواردی "نوشتاری" است که محتوا و روح برند را توضیح می‌دهند. به موارد زیر در مورد برند دولینگو توجه کنید:ماموریت برند (Mission)ماموریت برند دولینگو، به‌صورت زیر تعریف شده است:توسعه بهترین آموزش یادگیری زبان در دنیا و در دسترس بودن آن در سراسر جهان.هر کسی بتواند از دولینگو استفاده کند. نکته: "ماموریت" برند در واقع یک هدف‌گذاری کلی و بلند مدت است و الزاما تمام بخش‌های آن محقق نمی‌شوند. همان‌طور که در مورد برند دولینگو، یکی از ماموریت‌های آن این است که "هر کسی بتواند از دولینگو استفاده کند"، ولی پس از گذشت سال‌ها، زبان فارسی به آن اضافه نشده است؛ هرچند کاربران، درخواست‌های زیادی را برای آن مطرح کرده‌اند:https://www.reddit.com/r/duolingo/comments/pn0bm8/still_no_farsi/ظاهرا در تاریخ ۶ اردیبهشت ماه ۱۳۹۳ نیز در فروم دولینگو، درخواستی برای اضافه شدن زبان فارسی به دولینگو مطرح شده و برخی کاربران نیز پیشنهاد مشارکت در تولید محتوای آموزشی برای آن را داشته‌اند، ولی نتیجه‌ای حاصل نشده است. به نظر می‌رسد که اختلالی در لینک دسترسی به این صفحه پیش آمده است:https://forum.duolingo.com/comment/23606737/Add-Persian-languageصدای برند (Brand voice)صدای برند، نحوه گفتگوی شما با مشتری است. صدای برند دولینگو، به‌صورت زیر تعریف شده است:قابل‌اعتماد و خودمانیلحن صدا متناسب با موقعیت‌های مختلف، قابل تغییر است ولی همیشه همان "دولینگو" است.رساشوخ‌طبعمهرباننگاه جهانیمثال:جواب را ببین (به‌جای: شما می‌توانید جواب را در اینجا ببینید)چرایی برندما اینجا هستیم که یادگیری زبان را برای همه آسان کنیم.چیستی برنددولینگو چیزی است که می‌خواهد به یک راننده تاکسی در برزیل که در جستجوی شغلی در خارج از کشور است کمک کند تا زبان خارجی بیاموزد؛ یا یک بازرگان خارجی در فرانسه، بتواند "نان کروسان" را درست تلفظ کند.چگونگی برندما می‌خواهیم با تلفیق تکنولوژی و بازی، زبان‌آموزی را آسان کنیم. رایگان بودن دولینگو آن‌را در اختیار همه قرار می‌دهد.تفاوت‌های برند (با سایر برندها)پُر مخاطب‌ترینلذت‌بخش‌ترینشخصیت برندهمگانیکنجکاومتنوعانگیزه‌بخشاگر قرار بود برند دولینگو را به یک سلبریتی تشبیه کنیم: شبیه Trevor Noah (کمدین آفریقای جنوبی) بود.اگر قرار بود برند دولینگو را به یک وسیله نقلیه تشبیه کنیم: شبیه موتور سیکلت وسپا بود.اگر قرار بود برند دولینگو را به یک آهنگ معروف تشبیه کنیم: شبیه آهنگ Dont Stop Me Now بود.ایجاد انگیزه در کاربر، از ارزش‌های برند دولینگو استایجاد انگیزه در کاربر، از ارزش‌های برند دولینگو است

ابعاد نقطه کلیک در صفحه اپلیکیشن

اردشیر حکیمی — Wed, 16 Mar 2022 19:03:27 +0330

اندازه دقیق دکمه‌ها و آیکون‌هایی که برای اپلیکیشن‌ها طراحی می‌شوند باید حداقل ۴۴ پیکسل در ۴۴ پیکسل باشد. با توجه به میزان وضوح و رزولوشن متفاوت در دیوایس‌های مختلف، معادل ابعادی این اندازه به میلی‌متر، متفاوت است: مثلا در آی‌پد حدود ۸ میلی‌متر و در آی‌پد مینی حدود ۷ میلی‌متر است.۴۴ پیکسل بر روی صفحه نمایش سمت راست آی‌پد مینی و سمت چپ آی‌پدبر اساس مطالعات گروه نیلسن نورمن، ابعاد ۱۰ میلی‌متر برای نقاط کلیک بر روی صفحات لمسی، مناسب است.ابعاد ۱۰ میلی‌متر برای نقاط کلیک بر روی صفحات لمسی، مناسب است.به‌طور خلاصه و با ابعاد گرد شده، حداقل ابعاد قابل قبول برای نقاط کلیک در صفحات اپلیکیشن، حدودا دایره‌ای به قطر ۱ سانتی‌متر است. نقاط کلیک شامل منو، دکمه‌ها، آیکون‌ها و مواردی از این دست است که برخی از آن‌ها در شکل‌های زیر آمده‌اند.

ساخت انیمیشن وکتور (SVG و JSON) در After effects توسط کتابخانه Lottie

اردشیر حکیمی — Thu, 10 Mar 2022 11:38:01 +0330

همان طور که در جدول زیر مشاهده می کنید، از سال ۲۰۱۴ میلادی تاکنون، استفاده از فایل های تصویری با فرمت SVG روند رو به رشدی داشته است.فایل های گرافیکی SVG یا Scalable Vector Graphics از نوع وکتور یا بُرداری هستند و کیفیت آنها با کوچک و بزرگ شدن ابعاد تصویر، تغییر نمی کند. فایل های گرافیکی SVG به تصاویر گرافیکی ثابت محدود نمی‌شوند بلکه تصاویر متحرک را نیز در بر می‌گیرند.لاتی (Lottie) یک فریم‌ورک برای انیمیشن‌های وکتور SVG در قالب JSON است و در حال حاضر بیش از هفتاد هزار شرکت از جمله آمازون، airbnb، والت دیزنی، و دولینگو از آن استفاده می‌‌کنند. صفحه اسپلش اپ، انیمیشن کاراکترها، و میکرو انیمیشن‌های UI در دولینگو توسط لاتی تهیه شده‌اند. به بیان ساده، همان‌طور که برای نمایش MP4 از QuickTime استفاده می‌شود، برای اجرای انیمیشن JSON هم از Lottie بهره می‌گیریم.فایل‌های لاتی در مقایسه با فایل‌های انیمیشن GIF و APNG هم‌رده، بسیار کم حجم هستند.ماهیت وکتور انیمیشن‌های لاتی، کیفیت و وضوح بسیار بالا، متناسب با ابعاد صفحه نمایش را فراهم می‌آورد.گردش کار تهیه انیمیشن‌های لاتی به این صورت است که ابتدا انیمیشن در نرم‌افزار After Effects تهیه می‌شود. سپس انیمیشن وکتور حاصله، از طریق Bodymovin که در درون Lottie قرار گرفته است به فایل JSON تبدیل می‌شود. در نهایت، پلتفرم Lottie فایل JSON را در اختیار پلتفرم‌های مختلف (Android و iOS و غیره) قرار می‌دهد.مثالدر اینجا می‌خواهیم که یک میکرو انیمیشن، شامل دو بخش زیر طراحی کنیم:الف. از ثانیه ۰ تا ثانیه ۲، دایره ترسیم شود.ب. از ثانیه ۲ تا ثانیه ۳، یک علامت تیک در وسط دایره ترسیم شود.ابتدا دایره را رسم می‌کنیم.دستور Trim Paths را روی دایره اعمال می‌کنیم. این دستور مشخص می‌کند که در چه زمانی چند درصد از دایره ترسیم شود. دسترسی به این دستور از طریق Add (آیکون مثلث) که در شکل نشان داده شده امکان پذیر است.اکنون باید زمان و درصد ترسیم را تعریف کنیم.شاخص مرورگر زمان (به صورت پیش‌فرض در پنجره پایین-راست صفحه قرار دارد) را روی ثانیه ۰ قرار می‌دهیم.برای تعریف زمان، آیکون ساعت (کرونومتر) کوچک کنار Trim Paths را فعال می‌کنیم.مقدار گزینه‌های Start و End (زیر Trim Paths) را روی ۰٪ قرار می‌دهیم.فریم کلیدی اول ما روی ثانیه ۰ ثبت شد با این محتوا: در ثانیه ۰، مقدار ۰ درصد از دایره رسم شود.حالا می‌خواهیم که طی ۲ ثانیه، دایره به طور ۱۰۰٪ ترسیم شود:آیکون ساعت (کرونومتر) کوچک کنار Trim Paths همچنان روشن است.مرورگر زمان را روی ثانیه ۲ می‌گذاریم.اکنون باید یک فریم کلیدی جدید ثبت کنیم. برای ثبت فریم جدید، بر روی آیکون لوزی کلیک می‌کنیم. این آیکون، در ابتدای همان ردیفی است که گزینه End در آن قرار گرفته است.مقدار End را روی ۱۰۰٪ می‌گذاریم که یعنی ترسیم دایره کامل شود.حالا اگر مرورگر زمان را جابه‌جا کنید می بینید که دایره محو یا تکمیل می‌شود.برای ترسیم تیک داخل دایره، مرورگر زمان را روی ثانیه ۲ بگذارید و مراحل بالا را یکبار دیگر این بار برای ترسیم تیک، در بازه‌ی زمانی ثانیه ۲ تا ثانیه ۳ تکرار کنید.زمانی که انیمیشن کامل شد، می‌توانید با کمک لاتی از آن خروجی JSON بگیرید.ابتدا پلاگین لاتی را بر روی افتر افکتس نصب کنید.سپس از طریق منوی window بخش extensions می‌توانید به Lottie دسترسی پیدا کنید. پلتفرم لاتی، امکان کانورت، بارگذاری و ویرایش فایل را برای شما فراهم می‌کند:https://lottiefiles.com/97641-loading-animation-iconدر نهایت، لاتی فایل زیر را در اختیار شما قرار می‌دهد:https://assets10.lottiefiles.com/packages/lf20_qmo9vzmq.jsonمحتوای فایل JSON که از این طریق به‌دست می‌آید، بر مبنای داده‌های عددی است که محتوایی بُرداری (وکتور) را مشابه فایل‌های SVG و به‌صورت متحرک در اختیار شما قرار می‌دهد. مثلا کل محتوای انیمیشن JSON که در بالا تولید کردید، به‌صورت زیر است:{"v":"5.5.8","fr":29.9700012207031,"ip":0,"op":89.0000036250443,"w":1920,"h":1080,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[852,552,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-20,8],[68,144],[260,-200]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":63,"s":[0]},{"t":90.0000036657751,"s":[0]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.266],"y":[1.016]},"o":{"x":[0.781],"y":[-0.008]},"t":63,"s":[0]},{"t":90.0000036657751,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0.091349478329,0.862745098039,0.091349478329,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":43,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[89.394,79.592],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[632,632],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.091349478329,0.862745098039,0.091349478329,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":43,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[108,-12],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.28],"y":[0.986]},"o":{"x":[0.68],"y":[0.013]},"t":0,"s":[0]},{"t":63.0000025660426,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":3,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":90.0000036657751,"st":0,"bm":0}],"markers":[{"tm":848.000034539748,"cm":"1","dr":0}]}همان‌طور که مشاهده می‌کنید، حجم فایل حاصل شده بسیار اندک است. این فایل در زمان اجرا، به‌صورت ریسپانسیو و متناسب با ابعاد دیوایس، رندر می‌شود. چون این انیمیشن به‌صورت وکتور است، بر روی نمایشگرهای مختلف از کیفیت و وضوح بسیار بالایی برخوردار است و متناسب با ابعاد و رزولوشن آنها در لحظه رندر می‌شود.قرار دادن فایل انیمیشن لاتی در وب یا اپ، ساده است. مثلا برای افزودن آن به وبسایت، در دو مرحله به‌صورت زیر عمل می‌کنیم:1. فراخوانی پلیر لاتی2. فراخوانی آدرس انیمیشن