| کانال طراحی و رابطکاربری |
رفتن به کانال در Telegram
⭕️ کانال طراحی و رابطکاربری دولوپیکس 💠 دولوپیکس | جامعه توسعهدهندگان ایرانی 💎 @Developix 🚀 Developix.ir 📌 پشتیبانی و تبلیغات: @DevelopixSupport
نمایش بیشتر3 375
مشترکین
-424 ساعت
-97 روز
-2730 روز
آرشیو پست ها
یک قابلیت خوب برای مواقعی که میخواهیم به کاربران توانایی مولتی تسک و مدیریت سایز و ابعاد بخشها یا پنجرههای مختلف را بدهیم قابلیت Movable pieces است.
به طور کلی، این قابلیت به کاربران توانایی Resize کردن و جابهجایی پنلها در محیط رابط کاربریشان را میدهد.
در نهایت در این فایل، بنیاد طراحی تعاملی نکات خیلی مفیدی درباره چگونگی استفاده از Movable pieces و مواردی که باید خیلی بهشون دقت کنیم ارائه شده است.
#IxDF #UI
👤 Mobi
💎 Channel: @DevelopixDesign
طبیعیه که وقتی در یک صفحه، مجبور باشیم مقادیر زیادی از اطلاعات و متن قرار بدیم، کاربرها حس فرسودگی و خستگی از این حجم اطلاعات پیدا کنن.
تکنیک titled sections به کاربرها این اجازه رو میده که بخشهایی که نیازی بهش ندارن رو اسکیپ کنن و مسقیما، به بخش مورد نظر خودشون برسن.
در واقع ما با قرار دادن تایتل های مناسب در جایگاههای مناسب در صفحات، به طور خلاصه و شفاف، به یوزرها ماهیت اون بخش رو توضیح میدیم.
✅بنیاد طراحی تعاملی در این فایل ارزشمند، نکات خوب این تکنیک و چگونگی استفاده ازش رو برامون توضیح داده.
#IxDF #UI
👤 Mobi
💎 Channel: @DevelopixDesign
یک متد خیلی خوب برای به کارگیری در رابط کاربری، responsive enabling هست.
برای کمک کردن به کاربرها در انجام دادن یک پروسه (مثلا احراز هویت)، این که کاربران بدونند کلتسکها چی هست میتونه مفید باشه ولی به شرطی که طراحی اون صفحه به شکلی باشه که تمرکز کاربر رو روی اون تسکی قرار بده که فعلا داخلش هست.
در این فایل، بنیاد طراحی تعاملی توضیح داده که چطور میتونیم تمرکز کاربر رو روی تسک فعلی قرار بدیم و در عین حال، به یوزر یکدید کلی از کل فرآیندهایی که در پیش داره نشون بدیم.
#IxDF #UI
👤Mobi
💎 Channel: @DevelopixDesign
💢 هارمونی متساوی الساقین - Split-Complementary
این رنگبندی نوعی تغییر در رنگبندی مکمل است با این تفاوت که به جای استفاده از رنگ مقابل از دو رنگ کناری رنگ مکمل استفاده میشود. برای مثال رنگ سبز و قرمز مکمل یک دیگر هستند ولی Split-Complementary رنگ قرمز برابر با دو رنگ کناری رنگ سبز در چرخه رنگی است.
📽 برای درک بهتر Split-Complementary میتوانید این ویدیو را هم مشاهده کنید.
📍در مطالب بعدی به بررسی چند مثال از Split-Complementary و سایر هارمونی رنگها میپردازیم.
🎨 همچنین اگر با هارمونی رنگ و تعاریف مربوط به رنگ آشنایی ندارید بهتر است این مطلب را هم بخوانید. همچنین مطلب اهمیت رنگها هم میتواند برایتان مفید باشد.
👤 Maryam
💎 Channel: @DevelopixDesign
📚 معرفی کتابی در حوزه روانشناسی رنگ و شناخت رنگها
کتاب روانشناسی رنگ اثر ماکس لوشر یکی از بهترین کتابها در حوزه شناخت رنگها و مفاهیم روانشناسی رنگ است که نسخه فارسی آن هم توسط آقای حمیدرضا بلوچ ترجمه شده و قابل تهیه کردن است.
سر فصلهای این کتاب شامل موارد زیر است:
- روانشناسی رنگها
- روانشناسی عملکردی
- رنگهای اصلی و کمکی
- تضاد رنگها
- معنا و مفهوم رنگهای اصلی
- تفسیر و تجزیه تحلیل تست رنگ
#کتاب
👤 Maryam
💎 Channel: @DevelopixDesign
🎨 مثالی از هارمونی مکمل - Complementary
👤 Maryam
💎 Channel: @DevelopixDesign
💢 هارمونی مکمل - Complementary
در رنگبندی مکمل، رنگهایی که در چرخهٔ رنگی مخالف هم هستند و دقیقاً مقابل یکدیگر قرار دارند انتخاب میشوند. طبق فرضیه رنگها، دو رنگ زمانی مکمل هم میشوند که از ترکیب آن دو یک رنگ خنثی مثل سفید، خاکستری و مشکی ایجاد میشود. برای مثال رنگ قرمز و سبز طبق چرخه رنگی مکمل همدیگر هستند.
🔺 این مدل رنگبندی برای ایجاد طرحهایی با کنتراست بالا مورد استفاده قرار میگیرد؛ بنابراین از این نوع رنگبندی هرگز برای متنها استفاده نکنید.
📽 برای درک بهتر Complementary میتوانید این ویدیو را هم مشاهده کنید.
📍در مطالب بعدی به بررسی چند مثال از Complementary و سایر هارمونی رنگها میپردازیم.
🎨 همچنین اگر با هارمونی رنگ و تعاریف مربوط به رنگ آشنایی ندارید بهتر است این مطلب را هم بخوانید. همچنین مطلب اهمیت رنگها هم میتواند برایتان مفید باشد.
👤 Maryam
💎 Channel: @DevelopixDesign
🎨 مثالی از هارمونی همجوار - Analogous Color
👤 Maryam
💎 Channel: @DevelopixDesign
💢 هارمونی همجوار - Analogous
هارمونی همجوار به مجموعه 3 الی 5 دستهای از رنگها گفته میشود که در چرخه رنگی در کنار هم قرار دارند برای مثال رنگ سبز، زرد و نارنجی
برای درک بهتر Analogous میتوانید این ویدیو را هم مشاهده کنید
📍در مطالب بعدی به بررسی چند مثال از Analogous و سایر هارمونی رنگها میپردازیم
🎨 همچنین اگر با هارمونی رنگ و تعاریف مربوط به رنگ آشنایی ندارید بهتر است این مطلب را هم بخونید همچنین مطلب اهمیت رنگها هم میتواند برایتان مفید باشد
👤 Maryam
💎 Channel: @DevelopixDesign
🎨 مثالی از هارمونی تکرنگ - Monochromatic
👤 Maryam
💎 Channel: @DevelopixDesign
💢 هارمونی تکرنگ - Monochromatic
در هارمونی تک رنگ فقط با یک رنگ و تغییرات همان پالت رنگی شکل میگیرد؛ این تغییرات به گونهای است که یک رنگ را انتخاب میکنیم و به آن رنگ سفید، خاکستری و مشکی اضافه میکنیم تا به Tint و Tone و همچنین Shadow آن رنگ برسیم
پالتهای رنگی تکرنگ، اصولاً نتیجه خوبی دارد، چرا که رنگها کاملا با هم هماهنگ و یک دست هستند با این حال گاهی ممکن است کسلکننده باشند و باید طبق نیاز از آن استفاده کنید
برای درک بهتر Monochromatic میتوانید این ویدیو هم مشاهده کنید
📍در مطالب بعدی به بررسی چند مثال از Monochromatic و سایر دسته هارمونی رنگها میپردازیم
🎨 همچنین اگر با مفاهیم Tint، Tone و Shadow رنگ آشنایی ندارید بهتر است این مطلب که از قبل داخل کانال منتشر شده است را بررسی کنید
👤 Maryam
💎 Channel: @DevelopixDesign
🎨 تئوری و روانشناسی رنگها - قسمت دوم
🔻 تئوری رنگ چیست؟
تئوری رنگ ترکیب هنر و علم است در واقع دستور العملهایی برای ترکیب مختلف رنگها و کاربرد آنها است، تئوری رنگ یک علم میان رشتهای است مباحثی مانند ادارک انسان، روانشناسی رنگها و ... را در برمیگیرد
🔻 ویژگیها و تعاریف رنگها
• فام یا Hue: یکی از سه ویژگی اصلی رنگ است که درجه رنگ را مشخص میکند
• سایه یا Shade: به این اشاره دارد که که چقدر مشکی به فام اضافه شده است در واقع با اضافه کردن رنگ مشکی به فام سایه آن رنگ ایجاد میشود
• تناژ یا Tone: نتیجه رنگی است که خاکستری به آن اضافه شده است
• ته یا Tint: نتیجه رنگی است که سفید به آن اضافه شده است، از ته رنگ اغلب برای ایجاد طرحهایی با تم روشن استفاده میشود همچنین در طرحهایی که مخاطب هدف نوزادان و کودکان است، محبوب هستند
• دمای رنگ یا Color Temperature: باتوجه به اینکه چه رنگهایی به یک رنگ اضافه شده است، به گرمی یا سردی آن رنگ برمیگردد. برای مثال رنگهای گرم، شامل سایههای زرد و قرمز هستند و میتوانند احساساتی مانند خشم و هیجان و … را در انسان ایجاد کنند، رنگهای سرد شامل رنگ آبی، سبز و ... هستند و تداعیگر احساس آرامش در افراد هستند و به نوعی حس سرما در افراد ایجاد می کنند، رنگهای خنثی شامل قهوهای، خاکستری، سیاه و سفید هستند
• ارزش یا Value: میزان تیره و روشن بودن رنگ را مشخص میکند در واقع میتوان آن را روشنایی رنگ هم نامید.
با میزان اضافه کردن رنگ سفید حساب میشود و هر چه مقدار رنگ سفید اضافه شده به فام بیشتر باشد و رنگ روشنتر، Value آن بیشتر است به عنوان مثال، رنگ زرد ارزش بیشتری نسبت به رنگ آبی تیره دارد ( سایت Waaark رنگهای مختلف با ارزشهای گونان استفاده کرده است که یک طراحی کاملاً هماهنگ ایجاد کرده است.
اشباع یا Saturation: به عنوان شدت رنگ شناخته میشود در واقع اشباع به چگونگی نمایش یک رنگ در شرایط خاص نوری اشاره دارد
خلوص یا chroma: خلوص یک رنگ به این اشاره دارد که رنگ بدون این که رنگهای سفید، سیاه یا خاکستری به آن اضافه شود نمایان شود
🔻ساخت پالت رنگی طرح
ویژگیها و تعاریف رنگها را بررسی کردیم حالا وقت آن رسیده است بتوانیم روابط رنگها را بشناسیم و قوانین ترکیب رنگها و هارمونی رنگها را بررسی کنیم
• هارمونی رنگها - Harmony: نظریه برای ترکیب و قرار دادن رنگها کنار هم به طوری که برای چشم هماهنگ بهنظر برسد بهعبارت دیگر بیانگر این است که چه رنگهایی با هم بهتر کار میکنند
📍هارمونی رنگها شامل ۱۲ دسته هستند که در ادامه به آنها میپردازیم
👤 Maryam
💎 Channel: @DevelopixDesign
🎨 تئوری و روانشناسی رنگها - قسمت اول
انتخاب رنگ مناسب یکی از نکات اصلی و ارزشمند در طراحی است. رنگ در احساس، خلق و خوی، عکسالعمل، برداشت و ... کاربر تاثیر گذار است گاهی ممکن است بهخاطر انتخاب رنگ نادرست کاربر را از دست بدهیم به همین علت بهتر از با تئوری رنگها آشنا باشیم و متناسب تئوری مربوط و قوانین آن رنگ مناسب کسب و کارمان را انتخاب کنیم.
📍 رنگ چیست؟
منبع و سرچشمهی اصلی نور و رنگ در سیاره خاکی ما خورشید است و همه هستی ما و سایر موجودات برای حیات خود نیاز به نور آن دارند. ما از خورشید علاوه بر نور، گرما میگیریم گیاهان و موارد غذایی خود را پرورش میدهیم، غذای خود را به طور غیرمستقیم به کمک آن میپزیم به طور خلاصه انواع و اقسام فعالیت و زندگی به نور خورشید وابسته است؛ در کنار همه این موارد رنگ همه اشیاء و موجودات و پدیدههای موجود در کره زمین نیز ناشی از نور خورشید است یعنی وقتی که نور خورشید که حاوی طیف گستردهای از رنگهای قرمز، زرد و آبی است به اشیاء، مایعات و گازهای مختلف برخورد میکند، میشکند و بازتاب پیدا میکند و آن شئی، مایع یا گاز را به رنگ خاصی جلوهگر میسازد که ما میبینیم.
🍀 برای مثال اگر برگ گل را به رنگ سبز میبینیم به خاطر آن است که برگ، نور قرمز موجود در نور خورشید را کاملا جذب کرده ولی زرد و آبی را بازتاب میدهد و ترکیب زرد و آبی به شکل سبز به چشم ما میرسد
رنگها در طبیعت میتوانند بر عواطف، اعمال، ایدهها، افکار و نحوهی واکنش ما و موجودات تاثیر بگذارد برای مثال رنگهای درخشان و زیبای گلها باعث جذب حشرات به سمت آنها میشود و یا رنگ سبز درخشنده بعضی از قورباغههای سمی به موجودات شکارگر اخطار میدهد که به آنها نزدیک نشوند.
👩🎨 منشاء اولیه اهمیت رنگها در زندگی
زندگی بشر از همان ابتدای تحت تاثیر دو عامل هارج از کنترل او قرار داشته است:
🔸 شب و روز، تاریکی و روشنایی
کار و فعالیت انسان به هنگام شب و تاریکی متوقف میشد و به غار خود باز میگشتند و بهخواب میرفتند. روز برای انسان زمان فعالیت بود، به شکار و جستجوی غذا میپرداخت و شب به دنبال آرامش و خواب بود. بنابراین رنگِ آبی متمایل به سیاه تداعی کننده آسمان شب و رنگ زرد روشن تداعی کننده نور آفتاب و روز است به همین خاطر اغلب در ذهن ما رنگ آبی متمایل به سیاه بیانگر آرامش و سکوت است و رنگ زرد روشن بیانگر فعالیت و تلاش است
همه این موارد و مثالها گفته شد تا به اهمیت انتخاب رنگ برسیم و متوجه بشیم یک رنگ اشتباه ممکن است چه ضرری برای کسب و کار شود و از طرفی انتخاب رنگ درست باعث سود کسب و کار شود
📌 در ادامه به بررسی دقیقتر تئوری رنگ و نحوه درست انتخاب هر رنگ میپردازیم
👤 Maryam
💎 Channel: @DevelopixDesign
🔬طراحی اتمی - Atomic Design
جهان از عناصر اتمی تشکیل شده است که به عنوان جدول تناوبی عناصر در علم شیمی شناخته میشود. این عناصر اتمی به تنهایی دارای خواص ثابتی هستند و وقتی با هم پیوند بخورند عنصر جدیدی تحت عنوان مولکول ایجاد میشود که خاصیت جدید دارد برای مثال مولکول کربندیاکسید از ترکیب دو اتم کربن و اکسیژن ساخته شده است
طراحی اتمی هم که توسط Brad Frost ساخته شده است، این موضوع را بیان میکند که میتوان شروع طراحی یک پروژه را براساس ترکیب کوچک عناصر و ریزترین جزئیات که همان اتمها در علم شیمی هستند (برای مثال ایکونها، متنها و ..) شروع کرد تا با ترکیب عناصر ریز مرتبط، به یک عنصر جدید که در واقع همان مولکولها با ویژگی جدید هستند برسیم ( برای مثال یک Input را در نظر بگیرید که از ترکیب: ایکون، متن، حاشیه و ... تشکیل شده است و حکم یک مولکول با ویژگی جدید را دارد ) و در مرحله بعد عناصر مشابه جدید ( مولکولهایی که مشابه هستند ) را کنار هم قرار میدهیم تا به ارگان برسیم، برای مثال سکشن خبرنامه که میتواند از ترکیب چند مولکول، اینپوت سرچ، باکس اخرین اخبار، باکس صفحه بندی و ... تشکیل شده باشد و درنهایت با ترکیب ارگانها که حکم سکشنهای مختلف در طرح را دارند به یک قالب میرسیم و نوبت به آن میرسد که قالب ایجاد شده براساس فرمول به آن روح بدهیم و محتواهای واقعی داخل آن قرار دهیم تا به صفحات برسیم
برای درک بهتر این مدل طراحی میتوانید فایل لایهبازی که در کامیونیتی فیگما وجود دارد هم چک کنید
همچنین دیدن اونت معرفی Atomic Design را میتوانید ببینید
👤 Maryam
💎 Channel: @DevelopixDesign
