راهنمای نهایی طراحی UI

محتوا

• 01. تایپوگرافی خود را انتخاب کنید
• 02. پالت مناسب را انتخاب کنید
• 03. پیوندها و دکمه های سبک
• 04. م componentsلفه های خود را ایجاد کنید
• 05. مستند و همکاری کنید

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

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

01. تایپوگرافی خود را انتخاب کنید

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

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

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

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

وقتی نوبت به خوانایی و خوانایی می رسد ، حداقل اندازه قلم قابل قبول که توسط دستورالعمل های دسترسی به محتوای وب WCAG 2.0 تعریف شده است ، 18 ppt (یا 14 ppt پررنگ) است. بهترین اندازه قلم برای استفاده عمدتا به خود قلم بستگی دارد اما مهم است که مراقب سلسله مراتب بصری باشید و اینکه این اندازه پایه چگونه خود را از خلاصه ها و عناوین متمایز می کند (به عنوان مثال h1>, h2>, h3>).

با استفاده از ابزار طراحی UI خود (ما از InVision Studio استفاده خواهیم کرد) ، یک سری لایه متن ایجاد کنید (تی) و سپس همه اندازه ها را تنظیم کنید تا با الگوی زیر ارتباط داشته باشد:

• h1>: 44 پیکسل
• h2>: 33 پیکسل
• h3>: 22 پیکسل
• p>: 18 پیکسل

با استفاده از InVision Studio (و سایر ابزارهای طراحی UI) ، این کار با تنظیم سبک ها با استفاده از صفحه Inspector در سمت راست انجام می شود.

بعد قلم خود را انتخاب کنید ، اما مواظب باشید زیرا آنچه در بعضی از قلم ها مشاهده می کنید این 18 پیکسل است p> و 22 پیکسل h3> همه چیز متفاوت به نظر نمی رسد ما دو گزینه داریم: اندازه قلم ها را دستکاری کنید یا یک فونت متفاوت را برای عناوین در نظر بگیرید. اگر پیش بینی می کنید طراحی شما متن سنگین باشد ، با مورد دوم بروید.

به خاطر داشته باشید که:

• طراحی UI تصویری اغلب یک رویکرد احساس روده است
• هیچ چیزی تصمیم گرفته نشده است همه چیز قابل تغییر است

ارتفاع خط

ارتفاع مطلوب خط تضمین می کند که فاصله بین خطوط متن به اندازه کافی برای دستیابی به سطح خوانایی مناسب است. این بیشتر و بیشتر به عنوان یک "استاندارد" شناخته می شود. ابزار ممیزی Lighthouse Google حتی آن را به عنوان یک چک دستی (یا حتی اگر متن حاوی پیوندهایی باشد که ممکن است در نتیجه ارتفاع کمتر از حد بهینه به هم نزدیک باشند) یا حتی یک پرچم آن را پیشنهاد می کند.

یک بار دیگر ، WCAG به ما کمک می کند تا با این مورد اعلام کنیم که ارتفاع خط باید 1.5 برابر اندازه قلم باشد. بنابراین ، در ابزار طراحی UI خود در بخش "Line" (یا موارد مشابه) ، کافی است اندازه قلم را در - حداقل - 1.5 ضرب کنید. به عنوان مثال ، اگر متن متن 18 پیکسل باشد ، پس ارتفاع خط 27 پیکسل خواهد بود (18 * 1.5 - همچنین می توانید عملیات ریاضیات را مستقیماً در بازرس اجرا کنید). باز هم ، مراقب باشید - اگر 1.6x احساس تناسب بهتری داشت ، از 1.6x استفاده کنید. به یاد داشته باشید که فونت های مختلف نتایج متفاوتی را ارائه می دهند.

خیلی زود است که به استفاده از داده های واقعی در طراحی خود فکر کنیم اما حداقل ، هنوز هم باید از داده هایی تا حدی واقع بینانه (حتی لورم ایپسوم) استفاده کنیم. InVision Studio یک برنامه داده واقعی واقعی دارد که به ما کمک می کند ببینیم تایپوگرافی ما در واقع چگونه است.

فاصله پاراگراف

فاصله پاراگراف سبکی نیست که بتوانیم آن را با استفاده از InVision Studio’s Inspector اعلام کنیم. در عوض ، باید لایه ها را با استفاده از راهنماهای هوشمند (⌥) به صورت دستی تراز کنیم. مشابه ارتفاع خط ، ضرب جادویی 2 برابر است (دو برابر اندازه قلم). به عنوان مثال ، اگر اندازه قلم 18 پیکسل باشد ، باید حداقل یک فضای 36 پیکسل قبل از هدایت به بخش متنی بعدی وجود داشته باشد. فاصله حروف باید حداقل 0.12 باشد.

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

سبک های مشترک

اگر ابزار طراحی UI شما از آن پشتیبانی می کند (InVision Studio هنوز این کار را انجام نمی دهد) ، در نظر داشته باشید که این سبک های تایپوگرافی را به «سبک های مشترک» تبدیل کنید تا با اطمینان از سازگاری بصری ، آنها را به سرعت قابل استفاده مجدد کنید. این کار معمولاً از طریق بازرس انجام می شود.

02. پالت مناسب را انتخاب کنید

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

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

رنگ در طراحی UI می تواند بسیار موثر باشد اما از آنجا که برخی از کاربران (در واقع بسیاری از آنها) از انواع مختلف نقص بینایی رنج می برند ، همیشه قابل اعتماد نیست. گفته شد ، این لزوماً مربوط به رنگ خاصی نیست که استفاده می شود ، بلکه نوع آن است. این ممکن است در هنگام نام تجاری درست نباشد زیرا از رنگ برای تأثیر عاطفی در این زمینه استفاده می شود اما در طراحی UI ، رنگ برای برقراری ارتباط هدف ، معنا و البته سلسله مراتب بصری نیز استفاده می شود.

01. استارک
پلاگین Stark با Sketch و Adobe XD سازگار است و به شما کمک می کند کنتراست رنگ را بررسی کنید و کوری رنگ را مستقیم از بوم شبیه سازی کنید. پشتیبانی از Figma و InVision Studio خیلی زود ارائه می شود.
02.رنگها
Colors مجموعه ای از 90 ترکیب رنگ است که برای مطابقت با دستورالعمل های WCAG 2.0 مقدار کنتراست رنگی مناسبی دارند - حتی بعضی از آنها موفق به مطابقت با استاندارد AAA می شوند.
03. پروژه A11y
پروژه A11y یک مرکز بزرگ برای همه موارد مرتبط با قابلیت دسترسی است. این شامل منابع ، ابزارها ، نکات ، آموزش ها است و توسط سازنده افزونه Stark ایجاد شده و بودجه را از InVision دریافت می کند.

سه نوع رنگ

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

• یک رنگ تماس برای عمل (همچنین رنگ اصلی مارک)
• یک رنگ تیره خنثی (برای عناصر UI یا حالت تاریک بهتر)
• برای همه موارد بالا ، یک تغییر سبک تر و تاریک تر است

این موارد زیر را فعال می کند:

• حالت تاریک به راحتی قابل دستیابی است
• رنگ CTA ما هرگز با رنگهای دیگر تضاد نخواهد داشت
• در هر سناریویی قادر به تأکید و تأکید خواهیم بود

پالت خود را تنظیم کنید

با استفاده از ابزار طراحی UI خود ، برای هر رنگ یک صفحه هنری نسبتاً بزرگ ایجاد کنید (روی A ضربه بزنید) (با نام های "Brand" ، "Neutral / Light" و "Neutral / Dark"). سپس ، در هر صفحه هنری ، مستطیل های کوچکتر دیگری ایجاد کنید که تغییرات تیره و روشن رنگ و همچنین رنگ های دیگر را نشان می دهد.

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

تضاد

در مرحله بعدی باید رنگ های خود را برای کنتراست بهینه رنگ بررسی کنیم. ابزارهای مختلفی وجود دارد که می تواند این کار را انجام دهد ، به عنوان مثال پلاگین Stark برای Sketch و Adobe XD یا Contrast برای macOS - با این حال ، یک راه حل آنلاین مانند Contrast Checker یا Color Contrast Checker بسیار خوب خواهد بود.

کنتراست رنگ را برای هر ترکیب بررسی کنید و متناسب با آن رنگ ها را تغییر دهید. اگر مطمئن نیستید از چه رنگ هایی استفاده کنید ، از توصیه های Color Safe استفاده کنید.

03. پیوندها و دکمه های سبک

اندازه

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

یک تست استطاعت بصری ، یک تست قابلیت استفاده است که برای تعیین اینکه آیا به نظر می رسد اهداف ضربه قابل کلیک هستند ، استفاده می شود. طراحی را از Studio به Freehand همگام سازی کنید (⌘⇧F) ، URL حاصل را برای آزمایش کنندگان بفرستید و از آنها بخواهید عناصری را که فکر می کنند قابل کلیک هستند دایره کنند.

کاربران غیر InVision Studio می توانند از Freehand نیز استفاده کنند ، اما کاربران InVision Studio می توانند طرح های خود را بصورت یکپارچه از InVision Studio که سریعترین و کارآمدترین روش برای دریافت بازخورد دیداری از کاربران است ، در Freehand راه اندازی کنند.

به طور کلی ، ما توصیه می کنیم متن دکمه ها به صورت 18 پیکسل (همان متن بدنه) اعلام شود اما اندازه دکمه ها سه تغییر دارد:

• طبیعی: ارتفاع 44 پیکسل (گوشه های گرد: 5 پیکسل)
• بزرگ: 54 پیکسل در ارتفاع (گوشه های گرد: 10 پیکسل)
• فوق العاده بزرگ: ارتفاع 64 پیکسل (گوشه های گرد: 15 پیکسل)

این به ما این امکان را می دهد که مهمترین دکمه ها بدون تکیه بر رنگ و همچنین دکمه های لانه سازی (به عنوان مثال ، استفاده از یک دکمه در داخل یک فرم فرم با حداقل شکل) مهم تر به نظر برسیم.

عمق

صرف نظر از اینکه هدف ضربه یک دکمه است یا یک قسمت فرم ، باید سایه ها را برای افزایش عمق استفاده کرد و بنابراین تعامل را نشان می دهد. یک سبک سایه دار برای همه انواع دکمه ها و قسمت های فرم مناسب است.

تعامل

هر نوع دکمه برای نشان دادن حالت شناور خود به یک تغییر نیاز دارد. این برای کاربر روشن می کند که کاری که او انجام داده است کاملاً خوب است و اطمینان حاصل می کند که آنها بدون تأخیر ادامه می یابند.

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

تصمیم گیری در برابر این امر باعث می شود که ما از رنگی استفاده کنیم که یا از قبل معنی قابل توجهی داشته باشد و در نتیجه کاربران دچار سردرگمی شوند یا اینکه تصمیم بگیرند رنگ دیگری ارائه دهند. تصمیم گیری برای استفاده از رنگ ثانویه کاملاً خوب است اما باید به جای عناصر UI برای بازاریابی بصری ذخیره شود. کمتر بیشتر است (و آسان تر).

به یاد داشته باشید که این مرحله را برای هر صفحه هنری تکرار کنید. دکمه های مارک دار CTA را در تابلو هنری قرار ندهید - بعداً ما آنچه را که در صورت عدم کارایی ترکیبات خاص اتفاق می افتد ، شرح خواهیم داد.

04. م componentsلفه های خود را ایجاد کنید

کامپوننت ها به میزان زیادی صرفه جویی می کنند و تمام ابزارهای طراحی رابط کاربر این ویژگی را دارند (به عنوان مثال در Sketch ، به آنها Symbols گفته می شود). در Studio می توانیم با انتخاب تمام لایه هایی که باید این ملفه را تشکیل دهند و با استفاده از components ، م componentsلفه هایی ایجاد کنیمک میانبر.

استفاده از ملفه ها

فریم های وایرلس ، نه تنها برای طراحی رابط های کاربری با کاربرد بالا بلکه برای یافتن نیازهای UI ما در طولانی مدت بسیار مفید هستند. این به نوعی مانند ضدآیند بودن است.

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

به عنوان مثال ، اگر فریم وایرلس ما یک م 3xلفه 3x1 می خواهد اما می دانیم که محتوا به صورت سنگی تنظیم نشده است ، ممکن است اندکی تأمل ما را به این فکر بیندازد: "اگر این م componentsلفه ها در نهایت 4x1 شوند ، چه می کنید؟" قاعده سرانگشتی این است: طراحی فقط برای نیازهای کاربر که قبلاً وجود داشته اما سعی کنید راه حل ها را نسبتاً انعطاف پذیر کنید. در غیر این صورت ، بعداً با بدهی طراحی بسیار نامرتب مواجه خواهیم شد.

اکنون می توانیم با کشیدن آن بر روی بوم از Libraries> Document در سمت چپ ، از این ملفه استفاده مجدد کنیم ، اگرچه در نظر داشته باشید که بسته به ابزار UI شما ممکن است این روند کاری متفاوت باشد.

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

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

استفاده از قوانین ما

در اوایل ، ما در مورد عدم استفاده از دکمه های CTA مارک دار در بالای رنگ مارک یادداشت کردیم ، زیرا واضح است که دکمه های CTA مارک دار باید در میان سایر موارد برجسته شوند. بنابراین در حالی که هنوز می توانیم از دکمه CTA مارک دار استفاده کنیم چگونه می توانیم به ایجاد یک جز brand مارک دار بپردازیم؟ به هر حال ، اگر ما از دکمه های تاریک خنثی استفاده می کنیم ، بگذارید بگوییم دکمه های ناوبری یا دکمه های خیلی کم اهمیت ، این گزینه ای نیست ، درست است؟

درست. بنابراین این یک فرصت ایده آل برای ایجاد یک جز component - به طور خاص ، یک عنوان + متن + ترکیب دکمه است. توجه داشته باشید که چگونه من برای ایجاد امکان استفاده از دکمه مارک دار ، پس زمینه نور خنثی ایجاد کرده ام. به همین ترتیب ، میدان شکل نور خنثی (زمینه های فرم معمولاً به دلیل مدل ذهنی که از لحاظ تاریخی مترادف با فرم های کاغذی است سفید هستند) در پس زمینه نور خنثی شگفت انگیز به نظر نمی رسد بنابراین فقط در پس زمینه تاریک خنثی قابل استفاده است - مستقیم یا درون یک جز dark تاریک خنثی است. اینگونه است که ما ضمن رعایت قوانین و حفظ ثبات ، طراحی خود را انعطاف پذیر می کنیم.

تست استرس

در حالت ایده آل ، سریعترین و م mostثرترین روش برای اطمینان از استحکام در طراحی ما آزمایش استرس است. آزمایش یک طرح به معنای بیرحمانه بودن است. بگذارید بگوییم که ما یک مقدار ناوبری با مقدار X مورد از مواد nav داریم ، زیرا این شرط بود. به منظور اطمینان از انعطاف پذیری واقعی ، سعی کنید این الزامات را با افزودن موارد nav بیشتر تغییر دهید یا برای اینکه واقعاً یک کلید در کار بیندازید ، سعی کنید یک مورد nav با سلسله مراتب بصری بالاتر از سایر موارد نیز اضافه کنید. آیا اندازه ، تایپوگرافی و قوانین رنگ ما اجازه چنین چیزی را می دهد؟ یا برای ارائه قابلیت استفاده بهینه آیا به قانون دیگری نیاز داریم؟

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

05. مستند و همکاری کنید

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

رنگها

در صورتی که قبلاً چنین کاری نکرده ایم ، ذخیره همه رنگ ها در نمونه "Document Colors" ذخیره می شود - این امر دسترسی به آنها را در صورت نیاز به استفاده از آنها در طراحی خود آسان می کند.برای انجام این کار ، ابزارک انتخاب رنگ را از بازرس باز کنید ، از لیست کشویی "Document Colors" را انتخاب کنید و سپس روی نماد + کلیک کنید تا رنگ به نمونه اضافه شود. این روش در اکثر ابزارهای رابط کاربری به همان شیوه کار می کند.

کتابخانه های مشترک

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

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

InVision Studio تا حدی محدود است که هنوز با ابزار رسمی سیستم طراحی InVision همگام سازی نشده است اما نگهداری کتابخانه در Dropbox به راحتی کافی است تا طراحان دیگر بتوانند آن را به مرور زمان به روز کنند. وقتی تغییری ایجاد می شود (به صورت محلی یا از راه دور) ، هر پرونده استودیویی که از کتابخانه استفاده می کند (دوباره به صورت محلی یا از راه دور) از شما س willال می کند که آیا می خواهید رنگ ها و اجزا را به روز کنید. به این ترتیب کتابخانه های طراحی در بین تیم ها حفظ می شوند.

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

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

طراحی در مقیاس

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

به عنوان مثال ، ممکن است بخواهیم از لایه های متن برای حاشیه نویسی کتابخانه خود به عنوان وسیله ای برای توضیح موارد استفاده از عناصر مختلف استفاده کنیم. برای سبک های تایپوگرافی ، ما حتی می توانیم متن را به صورت توصیفی ویرایش کنیم (مثلا "h1> / 1.3 / 44px"). این می گوید h1>s باید 44 پیکسل باشد و ارتفاع خط آن 1.3 باشد.

طراحی دستی

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

اگر نگران عیب یابی و مدیریت یک وب سایت هستید ، اطمینان از اینکه خدمات میزبانی وب صحیحی را دریافت کرده اید به شما کمک می کند ، اما برای سیستم طراحی شما ، ابزار استفاده از طراحی InVision ، Inspect ، مورد استفاده است. برای استفاده از آن ، ما بر روی دکمه / نماد انتشار در InVision در InVision Studio کلیک کرده ، URL حاصل را باز کرده و سپس برای تغییر حالت به حالت بازرسی ضربه می زنیم. واقعاً راحت است

این محتوا در ابتدا در مجله نت ظاهر شد.