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

    سایز کوچک: فقط شامل اجزای بسیار اصلی و ویژگی های آن است

    قابل تنظیم: برای اجازه دادن به بیان نام تجاری در برنامه های مختلف

    علامت گذاری: چارچوب برای استفاده در هردسته از برنامه ها

با جستجوی راه حل های موجود، نمی توانم راه حلی پیدا کنم که تمام این شرایط را برآورده کند.

برخی از آنها دارای ویژگی های زیادی بودند که من نیازی به آنها نداشتم ، برخی از آنها سفارشی سازی کم را مجاز نمی دانند و بیشتر آنها براساس یک چارچوب خاص مانند React ، Vue یا Angular ساخته شده اند.

من ساختن Kor را در 21 نوامبر 2019 آغاز کردم و اولین نسخه 4 روز بعد منتشر شد. از امروز ، 7000+ بارگیری در npm ، 92 ستاره در GitHub و 300 کاربر متوسط ماهانه دارد.

۱- تعریف قوانین پایه سیستم های طراحی

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

ابعاد

ابعاد تأثیر زیادی در هماهنگی ادراک شده رابط کاربر دارد و بهترین راه برای دستیابی به آن تعریف واحد پایه است. در مورد Kor ، این واحد به عنوان 8 px  تعریف شد ، قراردادی که توسط اکثر سیستم های طراحی متناسب با رایج ترین وضوح صفحه نمایش دنبال می شود. معمولاً واحدها به شرح زیر تعریف می شوند:

8px: فاصله بین عناصر یک جز

16px: حاشیه اجزای خارجی

24px: اندازه نمادها و ارتفاع خط

در موارد نادر مانند رابط های کاربری متراکم با اطلاعات ، شبکه 8px را می توان یک بار دیگر تقسیم کرد و در نتیجه 4 مانند 4 ، 12 یا 20 افزایش می یابد.

رنگ ها

از رنگ ها برای انتقال سلسله مراتب ، برجسته سازی حالت ها و جلب توجه به برخی از مولفه های UI استفاده می شود. برای کاهش پیچیدگی و تغییر آسان تم ها ، در Kor من بر کاهش تعداد رنگ ها به حداقل توجه کرده ام و در مجموع 4 دسته تعریف شده است:

   پایه: پس زمینه محتوا(مانند نوار برنامه ، کارت ها ، صفحه)

  خنثی: رنگهای مثبت و منفی (مانند متن ، خطوط تقسیم کننده و موارد برجسته شفاف)

  لهجه: رنگهای برجسته حالت فعال و فراخوان

 عملکردی: رنگهای تأیید ، هشدار ، خطا و حالت خنثی

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

تایپوگرافی

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

با مختصر نگه داشتن مقدار سبک ها ، 4 سبک قلم تعریف شده و از طریق متغیرها قابل تنظیم هستند:

هدر 1: برچسب نوار برنامه و عناوین محتوا

هدر 2: عناوین مولفه ها (به عنوان مثال برگه ها ، کارت ها)

 متن 1: برچسب های مولفه (به عنوان مثال برچسب ها ، کادرهای تأیید)

 متن 2: متن ثانویه مولفه (به عنوان مثال آواتار)

ارتفاع

روش مفید دیگر برای سازماندهی UI و انتقال سلسله مراتب محتوا ، استفاده از ارتفاعات است. در Kor من 4 لایه تعریف کرده ام که با استفاده از رنگ و سایه تنظیم می شوند. مقادیر رنگی برای هر لایه بر اساس تأثیر طبیعی نور بر روی سطوح تعریف شده است، به این معنی که لایه های نزدیکتر به بیننده در هر دو مضمون روشن و تاریک روشن تر از لایه های دیگر هستند.

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

لایه 1: پس زمینه صفحه

لایه 2: محتوای کناری (صفحه ها ، میله های ناو)

لایه 3: ظروف محتوا (کارت ، آکاردئون)

لایه 4: محتوای پوشانده شده (اعلان ها ، روش ها)

شمایل نگاری (کشیدن ایکون)

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

۳-ساخت کامپوننت‌ها

کامپوننت‌های سیستم طراحی واحدهای UI هستند که عمومی هستند (که می توانند در موارد مختلف استفاده شوند) و با استفاده از ویژگی ها، اسلات ها و رویدادها قابل تنظیم هستند. برنامه ها معمولاً از 80٪ مولفه های رایج مانند دکمه ها یا فرم‌های اینپوت و 20٪ از موارد منحصر به فرد مانند نقشه ها یا تقویم ها تشکیل شده اند.

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

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

۳:کشیدن و رها کردن سندباکس

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

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

۴. مستندات، راهنمایی و پشتیبانی

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

کل برنامه وب با خود کتابخانه مولفه ساخته شده است.

منبع: uxplanet.org

سیستم های طراحی به بخش اصلی از کارهای روزمره من و همینطور بسیاری از مردم تبدیل شده اند

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

سیستم طراحی چیست؟

من مدام تعاریف مختلفی را می شنوم، بنابراین بگذارید شروع کنم و بگویم که یک سیستم طراحی چه چیزی نیست: این یک کتابخانه از طراحی اولیه  Sketchنیست ، بیش از یک راهنمای سبک یا یک کتابخانه الگو است … در واقع ، این همه اینها است و خیلی موارد دیگر!

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

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

همانطور که Jina Anne در کنفرانسی که در آن شرکت کرده بودم کاملاً توصیف می کند ، سیستم از عناصر ملموس و غیر مشهود تشکیل شده است:

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

راهنمای سبک (Style Guide) یا کتابخانه الگوها(Pattern Library): تفاوت چیست؟

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

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

بیشتر سیستمهای طراحی فعلی شامل هر دو هستند ، درست مثل Shopify اگر بخواهم اشاره دقیق کنم یک برگه “Visuals” برای راهنمای سبک خود و یک تب “Components” برای کتابخانه الگوها دارد.

در نتیجه دیزاین سیستم مفهومی فراتر از این دو دارد و به فلسفه و چرایی هر المان نیز می‌پردازد.

چرا امروز در مورد سیستم طراحی صحبت می کنیم؟

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

برای مدت زمان طولانی ، دیجیتال مانند “پروژه جانبی” تلقی می شد: به این صورت که از دستورالعمل های گرافیکی برای عناصر چاپی استفاده می شود و سپس برخی از دستورالعمل های اضافی را برای دیجیتال قرار داده میشد …

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

داشتن دیزاین سیستم چه مزیت‌هایی دارد؟

هدف اساسی یک سیستم طراحی تسهیل کار تیم ها است. بنابراین اولین سوالی که باید از خود بپرسیم این نیست که “چه چیزی را باید در سیستم طراحی خود قرار دهم؟” و اینکه “چه کسی و چگونه از آن استفاده خواهد کرد؟”.

بعد از مشخص شدن هدف,برای اینکه بدانیم کارمان را از کجا شروع کنیم باید به چند سوال پاسخ دهیم:

1- هدف و ارزشهای مشترک

در نظر بگیریم که به کجا میخواهیم برسیم؟(یعنی هدف چیست؟)/ چرا؟ /چطور؟

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

این ارزش ها همانند اهداف برند باعث راهنمایی ما می شوند و ما در پروسه طراحی باید این ارزش ها را مدنظر قرار دهیم.

2- اصول طراحی

اولین چیزی که باید به خاطر بسپارید: اصول طراحی فراتر از جنبه بصری یک محصول هستند …

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

اصول طراحی باید انتخاب های طراحی را هدایت کند.

3- هویت و زبان برند

هویت باید متناسب با استراتژی و اهداف برند تعریف شود. Alla Kholmatova در مورد “الگوهای ادراکی” صحبت می کند که به شرح زیر لیست می کند:

رنگها، قلم ها، فضاها، شکل ها، نمادها، تصاویر، عکسها، تصاویر متحرک، تن صدا و لحن، صوت

همه اینها الفبای نام تجاری را تشکیل می دهند.

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

در سیستم طراحی ما، با استفاده از دستورالعمل ها ، بایدها و نبایدها و “مثال های خوب” استفاده ، تحقق می یابد.

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

4- اجزا و الگوها

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

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

در تصویر زیر ، به وضوح می توانیم ببینیم که یک جز component با اسناد فنی و کاربردی مشخص می شود ، در حالی که یک الگو توصیه هایی در مورد نحوه استفاده از آن را ارائه می دهد:

بِست پرکتیس‌ها (بهترین نمونه‌ها)

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

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

سیستم طراحی چه نوعی باید باشد؟

تقریباً می توان گفت که یک نوع سیستم طراحی برای هر تیم یا محصول وجود دارد … برای تعریف محصول خود ، باید سوالات صحیح را از خود بپرسیم:

• چند نفر از این سیستم استفاده می کنند؟
• مشخصات آنها چیست و آیا از نظر موضوع به اندازه کافی بالغ هستند؟
• چند محصول را باید هم تراز کنیم؟ در چند سیستم عامل؟ چند فناوری مختلف (Angular ، React ، دیگران …)؟
• چه درجه ای از ثبات را در بین محصولات خود می خواهیم؟

همه این پاسخ ها به ما کمک می کند تا مناسب ترین نوع سیستم طراحی را تعریف کنیم.

 Alla Kholmatova در کتاب خود به ما الهام می دهد:

سیستم سختگیرانه یا منعطف ؟    

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

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

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

توزیع شده یا یکپارچه؟     

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

تمرکز سیستم یکپارچه بر یک زمینه منحصر به فرد. همچنین از قطعات تشکیل شده است ، اما این قطعات قابل تعویض نخواهند بود. این نوع سیستم مناسب محصولاتی است که قطعات تکراری آنها بسیار کم است و به یک Art Direction قوی و اغلب در حال تغییر (نمونه کارها ، ویترین ها ، کمپین های بازاریابی …) نیاز دارند.

متمرکز یا توزیع شده؟

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

کدام مدل برای سیستم طراحی شما: متمرکز یا توزیع شده؟

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

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

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

سیستم خود را در یک مقیاس قرار دهید

بنابراین ایده این است که سیستم خود را در این سه مقیاس قرار دهیم تا نوع سیستمی را که می خواهیم تعریف کنیم:

Airbnb: سیستمی دقیق ، مدولار و متمرکز

چند نمونه

بدون هیچ ابتکاری، در اینجا برخی از موارد دلخواه من آورده شده است:

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

• Atlassian به دلیل خسته کننده بودن آن

• Polaris از Shopify به دلیل ادغام آن در گردش کار طراح و توسعه دهنده

• IBM به دلیل کار خارق العاده اش روی زبان طراحی

سخن آخر

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

همانطور که برای هر محصول خوب ، این محصول عقب مانده خاص خود را دارد و باید خود را به روشی تکراری بسازد و کاربران (طراحان ، توسعه دهندگان ،PO و …  )را در قلب این روش قرار دهد.

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

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

و همه اینها فقط یک آغاز است!

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

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

منابع

کتاب سیستم های طراحی Alla Kholmatova

هر مقاله افسانه ای Nathan Curtis

کنفرانس ها و نوشته های Jina Anne

منبع: uxdesign.cc

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

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

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

اهمیت سیستم های طراحی

سیستم طراحی چیست؟

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

چه تفاوتی بین سیستم طراحی و راهنمای سبک یا کتابخانه الگو وجود دارد؟

ساخت یک زبان طراحی

مراحل اصلی و مزایای ساخت سیستم طراحی چیست؟

1- یک ممیزی (حسابرسی) بصری انجام دهید

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

2- یک زبان طراحی بصری ایجاد کنید

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

• رنگ

رنگ های رایج در یک سیستم طراحی شامل 1-3  رنگ اولیه است که نشان دهنده نام تجاری شماست. ممکن است بخواهید طیف وسیعی از رنگ ها را انتخاب کنید مثلا یک رنگ مخلوط با سفید – و سایه ها – یا یک رنگ مخلوط با سیاه تا چند گزینه دیگر در اختیار طراحان خود قرار دهید.

• تایپوگرافی

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

• اندازه و فاصله گذاری

سیستمی که برای فاصله‌گذاری و تعیین اندازه استفاده می‌کنید، زمانی که ریتم و تعادل داشته باشید، بهتر به نظر می‌رسد. یک مقیاس 4 اصلی به دلیل استفاده در استانداردهای iOS و Android ، قالب های اندازه ICO و حتی اندازه قلم استاندارد مرورگر ، به عنوان مقیاس توصیه شده ، در حال افزایش محبوبیت است.

• تصویرسازی

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

3- یک کتابخانه UI / الگو ایجاد کنید

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

4- هر ملفه و زمان استفاده از آن را مستند کنید

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

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

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

در ویدئو زیر پل فارینو در مورد چرخه حیات و ماهیت تکراری ساخت یک سیستم طراحی توضیح داده است.

نمونه هایی از سیستم های طراحی

سیستم طراحی Atlassian

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

زبان طراحی Shopify

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

با تجربه ای که “به حتی بی تجربه ترین کارآفرین بهترین فرصت برای موفقیت را می دهد” به راحتی می توان درک کرد که Shopify به مشاغل کمک می کند تا مشکلاتشان را مدیریت کنند.

ایجاد یک زبان طراحی منحصر به فرد IBM

ساختار کلی برنامه طراحی شرکت IBM “مردم + تمرین + مکانها” است. این شعار بیانگر این ایده است که “توجه دقیق به این 3 مورد باعث تغییر فرهنگ مورد نظر ما در رابطه با طراحی در شرکت خواهد شد.”

تمرین ، ستون میانی ، یک قسمت مهم از معادله و مسئولیت تیم IBM Design Practices است.

بر خلاف طراحی کتابخانه های الگو و راهنماهای سبک ، یک زبان طراحی به عنوان “داستان رسمی چگونگی طراحی و ساخت محصولات توسط یک سازمان” عمل می کند. به گفته کارشناس سیستم طراحی و نویسنده طراحی اتمی ، برد فراست ، این موارد شامل اجزای سازنده، اصول طراحی ، اجزای UI ، دستورالعمل های UX ، استانداردهای کد ، فرایندها ، جعبه ابزار طراحی ، مخازن کد ، منابع و موارد دیگر هستند.

منبع: uxdesign.cc

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

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

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

اهمیت یک دونات

با هر مهارت جدید، یاد می گیرید قبل از اینکه بدوید، راه بروید. برای شروع، بسیاری از هنرمندان Blender آموزش محبوب پیراشکی را از Andrew Price ، Blender Guru پیشنهاد کردند. بنابراین، برای اولین دو روز، من یاد گرفتم که چگونه یک دونات درست کنم.

این آموزش به ایجاد یک پایه محکم از تکنیک ها و مفاهیم اصلی کمک کرد. به طور عمده؛ ایجاد و استفاده از مواد (materials) مقدمه ای برای مجسمه سازی (sculpting) با استفاده از اصلاح کننده (modifier) تقسیم زیر سطح (کارها را صاف می کند).

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

شما نیازی به دانستن همه چیز ندارید. در واقع فقط ۲۰٪ ویژگی هایی که شما استفاده می کنید ، ۸۰٪ مواقع وجود دارد.

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

تبدیل شدن به یک اسفنج

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

در زیر برخی از ارائه ( render ) هایی که از دنبال کردن این آموزش ها ایجاد کرده ام را پیدا خواهید کرد. چیزهایی که یاد گرفتم پیوندی به آموزش.

آب درخشان به سبک انیمه

این اولین معرفی من به گره (node) ها بود. گره ها به شما امکان می دهند در ظاهر مواد اعمال شده روی مش (mesh) تغییراتی ایجاد کنید. استفاده از یک رشته گره می تواند به شما در دستیابی به مواد پیچیده تر کمک کند. به عنوان مثال ، برخی از افراد واقعاً خلاق می شوند و از این قبیل مواد (material) تهیه می کنند.

این رندر از دو صفحه تشکیل شده است – با اصلاح مختصات X و Y در بافت می توانید حرکت در آب (صفحه بالایی) و بازتاب نور در کف اقیانوس (صفحه پایین) را شبیه سازی کنید.

پراکندگی شیشه

این آموزش به شما نشان می دهد که چگونه می توانید سایه بان( shader ) برای شبیه سازی نحوه پخش نور از طریق شیشه ایجاد کنید (به قسمت تاریک ماه از Pink Floyd فکر کنید). مفهوم این است که کانال های قرمز ، سبز و آبی (RGB) را جدا کنید. کمی آنها را جابجا کنید ، بنابراین نور عبوری از شیشه به رنگهای RGB پخش می شود.

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

پارچه رنگین کمانی

من مکنده چیزهای براق هستم. اگر تا به حال کارت های تجاری را جمع آوری کرده اید، هجوم دوپامین از گرفتن کارت هولوگرافیک را در می کنید. بنابراین وقتی برای اولین بار از این افکت کم نور در یک موزیک ویدیو K / DA استفاده کردم ، فهمیدم که باید آن را امتحان کنم و از نو بسازم.

برای شروع، من یاد گرفتم که چگونه “پارچه” را از این آموزش ایجاد کنم. استفاده از یک تغییر دهنده تغییر مکان ( displace modifier ) در صفحه و تغییر نوع بافت به سنگ مرمر ، چین های صاف پارچه ای ایجاد می کند.

برای جلوه رنگین کمانی ، من مفهوم پشت آموزش سایه بان (shader) را دنبال کردم و مقادیر گره را کم رنگ کردم تا اینکه یک پالت رنگی بدست آوردم که از نظر بصری از آن راضی بودم.

چیزهایی را برای سرگرمی بسازید

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

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

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

ابزار ساخت پروتوتایپ

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

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

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

زینت بخش بازی ویدیویی

یکی از تفریحات مورد علاقه من بازی های ویدیویی است. من اخیراً در حال بازی در Valorant هستم ، یک بازی رایگان که توسط Riot Games منتشر شده است.

برای رایگان نگه داشتن بازی ، “بسته نرم افزاری پوسته ای” (skin bundles )را طراحی و ارائه می دهد. انیمیشن ها و سبک های منحصر به فرد را جایگزین مدل های بازی می کند. فکر کردم ، چرا سعی نمی کنم مال خودم را مفهوم پردازی کنم؟

این رندر از عبارت glass glass  الهام گرفته شده است. با استفاده از شیدرِ شیشه پراکندگی شیشه ای (glass dispersion shader ) که ازقبل دیدیم ، یکی از مدل های تفنگ درون بازی را دوباره ساختم. برای پس زمینه ، یکی از نقشه های پشت مدل تفنگ را لایه بندی کردم تا با دید بازیکن مطابقت داشته باشد.

تایپ در حرکت

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

خیال پردازی شیبا اینو

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

قراردادن کارهاهی سه بعدی در کار خود

ممکن است از خود بپرسید، “چگونه این مهارت ها به غیر از طراحان سه بعدی می تواند به کسی مربوط باشد؟ در اینجا چند روش وجود دارد که می توانم طراحی سه بعدی را در گردش کار خود اعمال کنم:

قصه گویی (Storytelling)

در هر مشاغل ، قصه گویی یکی از مهمترین جنبه هاست.

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

این ارائه برای سرگرمی است و به هیچ وجه به معنای شرمساری Adobe یا Sketch نیست.

برای نشان دادن حرف خودم ، برگشتم و تغییراتی در رندر فیگما و اسکچ ایجاد کردم. من Adobe XD را اضافه کردم و سوژه ها را در محور Y حرکت دادم ، و به آنها سلسله مراتب بصری خود را دادم.

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

بازاریابی محصولات سفارشی در طراحی محصول

من این ماکت سریع را به عنوان مفهومی برای یک کارت اعتباری خیالی درست کردم.

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

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

تصویر زمینه محصول شبیه به استودیو

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

این مرحله به مرحله است:

۱۰ درصد اضافی

من نامش را ۱۰٪ اضافی را  گذاشته ام . در انتها از خود خواهیم پرسید ، آیا ۱۰٪ اضافی چیزی است که بتوانیم انجام دهیم؟ ‌(زک کینگ)

من به این ویدئو برخوردم که هنرمند VFX ، زک کینگ  ، ” ۱۰درصد اضافی”  را ارائه می دهد. پس از فیلمبرداری از هر مجموعه ، آنها (تیم) از خود می پرسند که آیا کار کوچکی وجود دارد که می تواند برای بهبود کار انجام دهد؟

با الهام از این، برگشتم و دوباره دونات را مرور کردم.

اگرچه تغییراتی که من در دونات ایجاد کردم کاملاً کوچک نبودند، اما شما در مورد اخلاق کاری افراد موفق مانند زک کینگ فکر می کنید و این انگیزه شما را به جلو بردن کارها کمی بیشتر می دهد.

در انتها

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

من کارها را با سرعت آرام خودم انجام می دادم. بازی های ویدئویی، تماشای نمایش در Netflix، گذراندن وقت با خانواده و غیره مهم است که به خصوص در این مواقع از خود مراقبت کنید.

من با یادگیری چیزهای جدید بسیار سرگرم بودم. امیدوارم که به برخی از شما الهام داده باشم تا چیزهایی را که همیشه می خواستید یاد بگیرید، دنبال کنید.

با تشکر برای خواندن لطفا با ترک بازخورد یا به اشتراک گذاشتن این مورد با دیگران ، به من کمک کنید. اگر از این مقاله لذت بردید، حتماً برای ادامه مطلب ما را دنبال کنید!

منبع: uxdesign.cc

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

در این مقاله ، من قصد دارم هر یک را با مثال توضیح دهم و بررسی کنم.

۱- قابل مشاهده بودن وضعیت سیستم

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

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

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

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

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

۲- مطابقت بین سیستم و دنیای واقعی

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

مطابق با مثال تجارت الکترونیکی ، اگر تصمیم بگیرید با سبد خرید چیزی مانند “itemsArray” یا چیدمان ایتم ها تماس بگیرید ، برای کاربر بسیار گیج کننده خواهد بود ، زیرا سبد خرید در قسمت عقب ذخیره می شود. اشاره به آن به عنوان “سبد خرید” یا “سبد خرید” در مثال واقعی خرید در فروشگاه ، گره هایی دارد که بیشتر کاربران می توانند با آن ارتباط برقرار کنند.

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

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

۳- کنترل و آزادی کاربر

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

شاید کاربر متوجه نشده باشد که هنر هنکی چقدر گران است و از کل زیرمجموعه دلار ۴۲۰۰ دلاری خود احساس اندکی غرق شدن می کند! به همین دلیل ما یک دکمه حذف به شکل سطل زباله (مطابقت بین سیستم و دنیای واقعی) داریم تا آنها بتوانند به راحتی عملکرد “افزودن به سبد خرید” را لغو کنند.

برخی از مثالهای خوب دیگر شامل گزینه Gmail برای واگرد پیام ایمیل ارسالی و گزینه Undo / redo هنگام ویرایش اسناد در اسناد Google است. این یک عمل کاملاً کاربرپسند است زیرا افراد غالباً نظر خود را تغییر داده و پشیمانی فوری را تجربه می کنند. برخی از وب سایت های دیگر با گزینه های “خرید سریع” ممکن است از این مزیت استفاده کنند و توانایی کنترل کاربر پس از کلیک روی دکمه خرید را نفی کنند.

۴- سازگاری و استانداردها در طراحی رابط کاربری

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

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

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

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

۵- پیشگیری از خطا در طراحی رابط کاربری

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

یک مثال عالی برای جلوگیری از خطا را می توان در وب سایت ها و برنامه های بانکی یا انتقال پول مشاهده کرد. قبل از انجام معامله یا انتقال پول به یک دوست ، معمولاً یادداشتی از کاربر خواسته می شود که “آیا مطمئن هستید که می خواهید X $ به حساب Y منتقل کنید؟”. این پیام ها و مراحل تأیید اضافی می تواند کاربران را از مشکلات زیادی نجات دهد ، به خصوص اگر آنها قصد انجام چنین کاری را نداشته باشند.

۶- شناخت به جای یادآوری در طراحی رابط کاربری

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

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

به عنوان مثال ، اگر از شما سوال شود “آیا پاریس پایتخت فرانسه است؟” ، 3 سرنخ زمینه به شما داده می شود: پاریس ، پایتخت و فرانسه. اگر از شما سوال شود “پایتخت فرانسه چیست؟” ، فقط 2 سرنخ به شما داده می شود: پایتخت و فرانسه.

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

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

۷- انعطاف پذیری و کارایی استفاده

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

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

یک مثال عالی برای این کار ، قابلیت کپی و چسباندن متن است. یک کاربر تازه کار می تواند مراحل زیر را انجام دهد:

• متن را برجسته کنید
• به بخش «ویرایش» بروید
• روی “کپی” کلیک کنید
• روی مکانی که می خواهند متن برود کلیک کنید
• به بخش «ویرایش» بروید
• روی «چسباندن» کلیک کنید

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

• متن را برجسته کنید
• “Command + C” را بزنید
• روی مکانی که می خواهند متن برود کلیک کنید
• “Command + V” را بزنید

نمونه دیگری از این انعطاف پذیری را می توان در اینستاگرام یافت ، جایی که کاربران می توانند نماد ❤️را پیدا کرده و کلیک کنند ، یا فقط روی پست دوبار ضربه بزنند تا آن را “پسند” کنند.

۸- طراحی زیباشناختی و مینیمالیستی

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

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

در اینجا مثال بسیار خوبی از یک وب سایت داریم که همراه با این اکتشافات خاص دنبال نمی شود:

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

دوباره ، شاید لینگ در واقع یک نابغه است زیرا کلیک کردن روی آن بسیار دشوار است.

۹- به کاربران کمک کنید خطاها را شناسایی، تشخیص و بازیابی کنند

 پیام های خطا باید به زبان ساده (بدون کد) بیان شوند ، دقیقاً مشکل را نشان دهند و به طور سازنده ای راه حل را پیشنهاد دهند.

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

به عنوان مثال ، اگر سعی کنید بدون وارد کردن ایمیل یا رمز عبور روی “ورود” در Pinterest.com کلیک کنید ، خطای زیر را مشاهده خواهید کرد:

در اینجا به ما پیام واضحی درباره اشتباه و نحوه رفع آن داده شده است و ورودی با قرمز برجسته شده است (یک رنگ مشترک با علامت “توقف” یا “خطا”)

منبع: prototypr.io