محسن نجفی استودیو محسن نجفی استودیو
  • صفحه اصلی
  • مقالات
  • کلاس و کارگاه
    • دوره‌های طراحی
      • دوره صفر تا صد طراحی رابط کاربری
    • ورکشاپ‌ها
      • ورکشاپ تخصصی تجربه کاربری
      • ورکشاپ گیمیفیکیشن و اینترنت اشیا
      • ورکشاپ دیزاین سیستم
      • ورکشاپ فوت و فن مصاحبه طراحی
      • ورکشاپ طراحی تعاملی
  • نمونه کار
  • چک لیست طراحی
  • تماس با ما
  • بیشتر
    • فرصت شغلی
    • درباره ما
محسن نجفی استودیو
14مرداد

10 ترفند طراحی

14/05/1400 غزاله نهانی رابط کاربری 78

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

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

10) طرح های سیاه و سفید بزنید.

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

بیایید یک مثال را ببینیم.

 10 ترفند طراحی

ساده اما تاثیر گذار

9) یک “طرح متعادل” ایجاد کنید.

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

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

هدف این است که به اندازه تمام مطالب سیاه و سفید در چپ و راست و بالا و پایین بیاورید. اگر این اصل را در نمونه کارهای ساده

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

 10 ترفند طراحی

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

مطمئنا شما باید طراحی را با چشم ببینید اما اجازه دهید محاسباتی انجام دهیم.

مستطیل های سیاه ناحیه سمت چپ در اطراف جمع می شوند

(236 * 138) + (934 * 132) + (313 * 69) + (674 * 44) = 207109 پیکسل

در حالی که مستطیل بزرگ راست در اطراف شمارش می شود

446 44 446 = 198916 پیکسل.

آنها فقط با اختلاف کمی تفاوت دارند: 3.9558٪!

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

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

8) طرح را با پس زمینه ارائه دهید.

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

اما مراقب باشید: در یک وب سایت واقعی فضای اضافی را نخواهید داشت، بنابراین این فقط یک ترفند ارائه است!

دانه های قهوه هم عمق و هم پس زمینه(سایه) دارند.

 10 ترفند طراحی

7) برای اندازه گیری فونت ها از دستورالعمل ها استفاده کنید.

تمام وقت خود را با آزمایش اندازه فونت ها از دست ندهید. 

 اندازه های پیش فرض Figma برای تایپوگرافی بسیار مناسب است.

نکته: بعضی از حروف چاپی بسیار کوچکتر یا بزرگتر از بقیه هستند. شما باید فونت خودتان را بر روی حروف استاندارد مانند Roboto قرار دهید.

پاراگراف: 18 ، Navbar: 24 ، عنوان 96.

 10 ترفند طراحی

6) از Z-Index استفاده کنید

اگر چند عکس با پس زمینه شفاف(transparent) دارید می توانید از آنها برای ایجاد لایه بندی استفاده کنید و یا اگر هم این نوع تصاویر را ندارید میتوانید پس زمینه عکس خود را بوسیله سایت https://www.remove.bg/ حذف کنید.

به وسیله Z-Index می توانید تصاویر را در پشت یا جلوی یکدیگر جابجا کنید و این باعث ایجاد تصاویر سه بعدی می شود که بسیار در ظاهر طراحی موثر است.

در زیر عکسی ساده ای را می بینید که بوسیله Z-Index جذابیت پیدا کرده است.

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

 10 ترفند طراحی

5) از رنگ های پاستلی استفاده کنید

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

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

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

 10 ترفند طراحی

 10 ترفند طراحی

4) اجازه بدهید طرح شما نفس بکشد

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

برای اینکه به طرح خود اجازه نفس کشیدن بدهید میتوانید از روش های زیر استفاده کنید: 

اجازه بدهید پس زمینه مشخص باشد.

  1. عدم استفاده از دیوار متنی.
  2. از تصاویری استفاده کنید که توجه زیادی را به خود جلب نکنند.
  3. تا جایی که میتوانید متن را خلاصه کنید و یک عبارت جذاب بکار ببرید.
  4. فضای خالی زیاد کمک زیادی به خوب بنظر رسیدن طراحی می کند.

 10 ترفند طراحی

3) قدرت صدا را کشف کنید.

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

Noise در طراحی شما یک دوست قدرتمند است، خصوصاً اگر می خواهید ظاهری زیبا یا هنری به وب سایت خود بدهید.

همچنین، استفاده از یک سر و صدای ظریف به ترکیب شما ظاهری سینمایی می دهد، که با فیلم ها و وب سایت های پویا بسیار خوب کار می کند.

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

سر و صدای ظریف یک پس زمینه کاغذ مانند را ایجاد می کند. پرتره جسیکا فلیسیو.

 10 ترفند طراحی

2) شروع به جستجو در حروف بزرگ کنید.

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

نکته: بسیاری از حروف چاپی رایگان نیستند و استفاده از آنها بدون مجوز میتواند شما را به دردسر بیندازد اما نگران نباشید بیشتر حروف چاپی نسخه رایگان دارند!

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

حروف چاپی ظریف

حروف چاپی مدرن

حروف برای متن متن

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

شما می توانید به دنبال حروف بزرگ مانند Abril Fatface ، Playfair Display ، Volux ، Chalga و بسیاری موارد دیگر بگردید.

حروف چاپی مدرن شامل Metropolis ، ITC Avant Garde ، Redwing ، Takota ، Gotham است.

 10 ترفند طراحی

1) از هندسه استفاده کنید.

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

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

یک ترفند بزرگ این است که از حروف، اعداد و عناوین متن نوشتاری خود به عنوان هندسه استفاده کنید : آنها را بزرگ اما ظریف کنید یا از برخی حروف خاص به عنوان شکل استفاده کنید (A بسیار عالی عمل می کند).

حرف A این مفهوم مختصر برای برنامه Ab Meister که من در حال توسعه آن هستم کاملاً کار کرده است.

 

 10 ترفند طراحی

منبع: uxplanet.org

خواندن بیشتر
02اردیبهشت

10 فاکتور اصلی کاربردپذیری رابط های کاربری

02/02/1400 الهام توفیقی رابط کاربری 30
فاکتورهای کاربردپذیری رابط های کاربری بر اساس پژوهش‌های ژاکوب نیلسون
خواندن بیشتر
01اردیبهشت

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

01/02/1400 الهام توفیقی رابط کاربری 29
چطور سیستم های تعاملی طراحی کنیم؟ این قوانین از متن طراحی رابط کاربر توسط بن شیندرمن گرفته شده است . شیندرمن این مجموعه از اصول را مطرح کرده است که به لحاظ اکتشا فی حاصل تجربه و قابل اعمال در بیشتر سیستم های تعاملی بعد از پالایش، گسترش و تعبیر و تفسیر شدن هستند.
خواندن بیشتر
02فروردین

ساخت یک سیستم طراحی از صفر

02/01/1400 درسا سادات حسینی پور دیزاین سیستم 26

در سال 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

خواندن بیشتر
22بهمن

گریدبندی یا سیستم شبکه: ساخت یک سیستم گرید سفت و سخت

22/11/1399 درسا سادات حسینی پور رابط کاربری, گرافال 33

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

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

داستان گرید یا شبکه بندی

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

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

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

شبکه‌بندی به عنوان یک اصل طراحی

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

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

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

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

شبکه ها در طراحی تعاملی

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

 حتی در این صورت، استفاده از عرض ۹۶۰ پیکسل می تواند اطمینان حاصل کند که طراحی به درستی در بسیاری از صفحه های رایانه نمایش داده می شود. همچنین می تواند به طراحان کمک کند تا طرح دستگاه های تلفن همراه را اصلاح کنند. مثال‌های بالا سیستم‌های گریدبندی را نشان می دهند که مبتنی بر وضوح ۹۶۰ پیکسل از http://960.gs هستند ، که راهنمای مفیدی را برای ساخت طرحهای وب مبتنی بر شبکه ارائه می دهد.

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

http://1200px.com/1200px: این وب سایت به شما کمک می کند تا یک سیستم شبکه برای طراحی وب سایت های بسیار گسترده تر از سبک 960 پیکسل ایجاد کنید.

Golden Grid System: این وب سایت می تواند به شما در ساخت یک سیستم شبکه و بهینه سازی آن برای نمایش با قابلیت پاسخگویی به تلفن همراه کمک کند. اگر می خواهید سیستم های گریدبندی دیگری را برای اهداف مختلف کشف کنید، می توانید برخی از آنها را در وب سایت های زیر پیدا کنید:

گریدبندی Csswizardry

سیستم گریدبندی رسپانسیو

 سیستم گریدبندی سمنتیک

سیستم گریدبندی RWDGrid

 شبکه هوشمند CSS

نگاهی به دور

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

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

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

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

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

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

منبع: interaction-design.org

خواندن بیشتر
03دی

هر آنچه در مورد سیستم های طراحی باید بدانید

03/10/1399 غزاله نهانی دیزاین سیستم, رابط کاربری 44

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

بعد از خواندن کتاب دیزاین سیستم 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 در کتاب خود به ما الهام می دهد:

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

سمت چپ: Airbnb  |   سمت راست: Ted

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

چند نمونه

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

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

سخن آخر

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

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

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

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

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

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

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

منابع

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

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

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

منبع: uxdesign.cc

خواندن بیشتر
15آذر

چطور یک طراح رابط کاربری شویم؟ [تماشا کنید]

15/09/1399 محسن نجفی رابط کاربری 41

در این ویدیو سعی کردیم تا از ابزارهای طراحی مورد نیاز و همچنین تجربیاتمان در شرکت‌هایی نظیر پیمنت ۲۴، همراه اول، بنیاد وکلا و علی بابا برایتان توضیح دهیم.

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

خواندن بیشتر
15آذر

راهنمای جامع برای سیستم‌ طراحی یا همان دیزاین سیستم

15/09/1399 حسین حسین زاده دیزاین سیستم, رابط کاربری 28

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

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

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

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

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

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

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

سیستم یا زبان طراحی تنها مجموعه ای از دارایی ها و اجزایی نیست که برای ساخت یک محصول دیجیتال استفاده می شود.
به گفته Emmet Connolly ، مدیر طراحی محصول در Intercom ، “… بیشتر زبان های طراحی فقط کتابخانه های الگو هستند: یک جعبه بزرگ از قطعات UI Lego که می تواند به روشهای تقریباً نامحدود مونتاژ شود. همه قطعات ممکن است سازگار باشند ، اما این بدان معنی نیست که نتایج جمع آوری شده مطابقت دارد. محصول شما چیزی بیش از انبوهی از عناصر UI قابل استفاده مجدد است. ساختار و معنی دارد. این یک صفحه وب عمومی نیست ، بلکه تجسم یک سیستم مفاهیم است. “
مارکو سوارز ، یکی از طراحان محصول ما در InVision ، اضافه می کند که “درک نه تنها آنچه ، بلکه دلیل وجود یک سیستم را بیان می کند و برای ایجاد یک تجربه کاربری استثنایی حیاتی است. تعریف و پایبندی به استانداردها نحوه ایجاد این درک است. “
به بیان ساده تر ، تفاوت در استانداردها و اسنادی است که دارایی ها را همراهی می کند. با داشتن راهنمایی در مورد چرایی و نحوه استفاده از آنها ، اجزای طراحی را انجام دهید زیرا استفاده از آنها راحت تر و تشخیص آنها واضح تر است.
نمونه‌هایی از سیستم‌های طراحی ساختمان در GitHub، چگونگی بهبود جریان کار طراحی و توسعه، و زمانی که شما نیاز دارید سیستم‌های طراحی ساختمان را شروع کنید و اینکه چقدر از یک سیستم نیاز دارید.

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

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

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

حدود 10 سال پیش ، ما سیستم های طراحی را کتابخانه الگو می نامیدیم. چند سال پیش ، طراحی اتمی وارد صحنه شد و دستور زبان جامع تری را در مورد سیستم های طراحی ارائه داد. هنگامی که گوگل در سال 2014 از Material Design رونمایی کرد و سرانجام مفهوم سیستم های طراحی بالغ شده بود.

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

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

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

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

خواندن بیشتر
10آذر

طراح محصول و یادگیری طراحی ۳ بعدی

10/09/1399 مرجان خلیل پور رابط کاربری 21

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

در این مقاله، من 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

خواندن بیشتر
06آذر

طراحی رابط کاربری و ۹ ابتکار کاربردی برای آن

06/09/1399 درسا سادات حسینی پور رابط کاربری 38

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

منبع: prototypr.io

خواندن بیشتر
    123