https://virgool.io/feed/@manaid به رسم خلقت از خلاقیت میگوییم ... fa 2026-04-15 09:48:05 https://files.virgool.io/upload/users/1968972/avatar/oO1srs.jpg?height=120&width=120 https://virgool.io/@manaid https://virgool.io/@manaid/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%A8%D9%87-%DA%A9%D9%85%DA%A9-%D8%A7%D8%B5%D9%88%D9%84-%D9%88-%D9%82%D9%88%D8%A7%D8%B9%D8%AF-ux-%D8%A8%D8%AE%D8%B4-%D8%AF%D9%88%D9%85-%D9%82%D9%88%D8%A7%D9%86%DB%8C%D9%86-%DA%AF%D8%B4%D8%AA%D8%A7%D9%84%D8%AA-i5sa1ooidi4n جهان اطرافمان را چگونه درک می‌کنیم؟ مغز ما چطور آنچه را که می‌بینیم، تفسیر می‌کند؟ اصلا چطور می‌بینیم؟ چطور اشکال و فرم‌های پیچیده را درک می‌کنیم؟ چرا مغز ما تمایل دارد شکل های پیچیده را به الگوهایی ساده تر تبدیل کند؟ چرا گاهی دچار خطای دید می شویم؟ چرا از لابه لای درختان یا در ابر ها تصاویر و چهره های آشنا می بینیم؟ چرا گاهی تصاویر و طرح ها برای ما جذابتر و دلنشین تر هستند؟ دانشمندان علوم روان‌شناسی سالها برای یافتن پاسخی برای این پرسش ها در حال تحقیق و مطالعه اند.تلاش این دانشمندان نه تنها در حیطه روانشناسی که در حیطه  تجارت، بازاریابی،  دیجیتال مارکتینگ و غیره منجر به پیدایش علوم جدید مانند اقتصاد رفتاری، بازاریابی احساسی و غیره… شد که در آنها به بررسی علم روان‌شناسی درباره‌ی انسان و عوامل تاثیرگذار بر رفتار و تصمیماتش استفاده می‌شود.برخی از این نظریه‌های روان‌شناسی در طراحی تجربه کاربری و طراحی رابط کاربری نیز استفاده می‌شود، چون هدف در هر دو راضی‌کردن کاربری انسانی است .  طراحان رابط کاربری می‌توانند با به کار بردن این نظریه‌های روان‌شناسی برای تاثیرگذارتر‌کردن و قابل درک ترکردن طرح‌های خود بهره ببرند.قوانین گشتالت چیست؟چرا بعضی از طرح ها جذاب‌ترند؟ چرا کار کردن با برخی رابط ها کاربری راحت تر و یادگیر کار با آن ساده تر است؟ پاسخ ،اصول و قوانین کلی UX .  اصول گشتالت به عنوان بخشی از این اصول کلی کمک می‌کند تا طرح هایی ارایه کنیم که برای کاربر جذابتر و به اصطلاح کاربر پسند تر باشد. روانشناسی گشتالت توسط گروهی از روانشناسان آلمانی در سال ۱۹۲۰ به جهت شناخت و توصیف چگونگی درک اطلاعات بصری توسط انسان ها و فرآیند های مربوط به آن ایجاد گردیده است.گشتالت به معناهای کل، شکل و فرم ترجمه می شوند و بر اساس این تئوری کل بزرگتر از مجموع اعضاست این جمله به این معنا است که با وجود اینکه هر قسمت خاص دارای معنای ویژه خود می باشد ساختار کل می تواند به آن معنای کامل ببخشد. این توضیح به این معناست که ذهن ما به طور خود به خودی سعی دارد تا داده های بصری را ساده کرده و به عنوان نتیجه معنای کل جایگزین بخش های مجزا دیده خواهد شد.قوانین گشتالت شامل تعدادی نظریه روانشناسی است که کاربران به‌راحتی و با سرعت بیشتری محتوا و بخش‌های مختلف سایت رو درک کنن. در این مقاله برخی از مهمترین این اصول و قواعد مانند مجاورت، مشابهت، اصل بستار، تداوم، تقارن و قانون شکل و زمینه را بررسی خواهیم کرد.کاربرد قوانین گشتالت در طراحی سایتقوانین UX بر جنبه های روانشناسانه و رفتار کاربر در تعامل با محصولات دیجیتالی تمرکز داره با مروری بر این قوانین متوجه می‌شیم که بیشتر آنها توسط روانشناسان، رفتارشناشان و یا جامعه شناسان کشف یا معرفی شده اند. به هر حال کاربر نهایی وب‌سایت‌ها و رابط های کاربری که یک طراح سایت طراحی می‌کند، انسانها هستند.بنابراین لازمه که در مورد رقتار انسانها به عنوان کاربر نهایی آشنا باشیم تا چیزی که طراخی می‌کنیم تجربه خوشایند و دلپذیری برای کاربران آن ایجاد کنه. در ادامه، به بررسی مهمترین کاربرد قوانین گشتالت در طراحی سایت می پردازیم که هر طراح سایتی باید با آنها آشنا باشه و سعی می‌کنیم با مثال هایی کاربرد اونها رو در نمونه های واقعی بررسی کنیم.اهمیت کاربرد قوانین گشتالت در طراحی سایتچرا به عنوان طراح سایت باید درباره ی این نظریه و قوانینش بدانیم؟ اگر در مورد کارکرد مغز اطلاع داشته باشیم و بدانیم که مغز چگونه اطلاعات را بررسی و تفسیر می‌کند و چگونه این تفاسیر منجر به تصمیم گیری می‌شود، می‌توانیم؛به طور موثر تر و کاربردی تر عناصر را انتخاب و چدیمان کنیم: وقتی طراح با قوانین گشتالت آشنا باشد، می‌داند برای هر موقعیت و وضعیت کاربردی‌ترین نوع طراحی و آرایش المان‌ها و عناصر و طرح‌ها و حروف کدام است.به کاربر کمک کنیم راحت تر به اهداف مورد نظر ما برسد:  در طراحی رابط کاربری سایت یا اپلیکیشن، طراح هدف‌هایی دارد و باید پیام‌هایی را هم منتقل کند؛ دانستن این قوانین به او کمک می‌کند تا چیزی را که او می‌خواهد کاربر ببیند و درک کند.شناختن بیشتر کاربر و برآوردن نیازهای او: رابط کاربر هم باید اصول طراحی محصول را در طراحی‌هایش در نظر بگیرد چون او هم در طراحی محصول نهایی (چه سایت باشد و چه اپلیکیشن) دخیل است.اصل مجاورت (Proximity)مغز ما عناصر نزدیک به هم را به عنوان یک گروه یا واحد و مرتبط با هم در نظر می‌گیرد اصل مجاورت یکی از پرکاربردترین قوانین گشتالت است و به طراحان کمک می‌کنه تا اطلاعات مرتبط رو در کنار هم قرار بدن و به این وسیله درک آنها برای کاربر راحتر تر می‌شود.مثال عملی: در یک پروژه طراحی سایت برای یک کلینیک زیبایی، تیم ما خدمات مربوط به هم  را در کنار هم قرار داد. برای مثال خدماتت مانیکور، پدیکور، ژلیش و کاشت ناخن همگی در یک قسمت قرار گرفته این کار علاوه بر اینکه به کاربر کمک میکند تا سریعتر خدمات مورد نظر را بیابد. شانس اینکه از دیگر خدمات مرتبط هم استفاده کند به مراتب بیشتر می شود. در وب سایت های فروشگاهی مانند خانومی، کاربرد این اصل را می‌توانید در مگا منوها مشاهده کنید.اصل مشابهت(Similarity)از نظر معز یک انسان عناصر مشابه (از نظر رنگ، شکل، سایز یا فونت) به عنوان یک گروه شناخته می‌شن. یکی از بدیهی ترین و کاربردی‌ترین  قوانین گشتالت در طراحی سایت، همین قانون مشابهت است که باعث حفظ  یکپارچگی و نظم در طراحی سایت میشه. جالب اینکه در میان این عوامل اندازه نسبت به دو مورد دیگر از گشتالت قوی‎تری برخوردار است.مثال عملی: در یک فروشگاه آنلاین پوشاک که کار کردیم، تمام دکمه‌های “افزودن به سبد خرید” موجود در سایت رو به رنگ سبز و با فونت بولد طراحی کردیم. این شباهت باعث شد که کاربران خیلی سریع بفهمن کجا باید کلیک کنن. این نوع استفاده از شباهت، در نهایت باعث افزایش سرعت خرید و کاهش نرخ ترک سایت شد. در مثال زیر  سایت دراپ باکس (Dropbox) نیز دقیقا از همین تکنیک برای طراخی دگمه های فراخوان (CTA) استفاده کرده است.اصل بستار (Closure)تا حالا شده به یکی شکل ناقص نگاه کنی و متوجه بشی که چیه؟ به احتمال زیاد شما هم در بین دست زیر یک لامپ رو می‌تونید ببینید بر اساس اصل بستار ، زمانی که قسمتی از یک شکل یا طرح جا افتاده و یا حذف شده باشد، مغزانسان بر اساس تجربیات قبلی اون رو کامل می‎کنه.شاید بتوان گفت که این اصل از قوانین گشتالت از کمال‎گرایی انسان سرچشمه می‎گیره. این اصل رابطه نزدیکی باقانون پراگنانس  (pragnanz) داره. پراگنانس را می‌‎توان این‎طور توضیح داد که، ‎‏مغز انسان ذاتا در صدد کامل کردن تجربه‌‎های ناقص و تکته تکه از محیط پیرامون خود است. بنابراین هنگامی که تصویری را به صورت چند پاره میبینیم مغز ما اون رو به صورت کامل درک ‎می‌کنه.مثال عملی:  معمولا از این این نظریه بیشتر برای طراحی لوگو ی مشتریان و آیکون استفاده می‌کنیم. در طراحی اکثر سایتها در حالت موبایل در  اسلایدرهای افقی قسمتی از اسلاید بعدی را در معرض دید کاربر قرار می دهیم. با این کار هم کاربر متوجه می شود که این یک اسلایدر است و هم مشتاق می ‌شود تا اسلایدهای بعدی را ببیند.قانون تداوم (Continuity)چشم انسان تمایل داره که مسیر خطوط و اشکال رو دنبال کنه. این قانون به طراحی کمک می‌کنه تا کاربر به طور طبیعی از یک بخش به بخش دیگر هدایت بشه. و یا ارتباط بین دو بخش رو به کمک خصوط بین آنها درک کنه. این اصل ارتباط نزدیکی با قانون اتصال یکنواخت (Law of Uniform Connectedness) دارد.مثال عملی: در پروژه طراحی یک سایت گردشگری، از خطوط منحنی و پیوسته بین بخش‌های مختلف مثل اطلاعات مقصد، گالری تصاویر و فرم رزرو استفاده کردیم. این خطوط به کاربر کمک می‌کرد که به طور طبیعی از بالا به پایین سایت پیمایش کنه و همه بخش‌ها رو بدون از دست دادن چیزی بررسی کنه.اصل تقارن  (Symmetry)مغز انسان به طور کلی تصاویر متقارن رو دوست داره و سریعتر پردازش میکنه چون درکش راحت تره. از طرفی تصاویری که دارا ی تقارن نیستن بیشتر اصطکاکا فکری ایجاد می‌کنند.مثال عملی: در اکثر پروژه ها از تقارن استفاده می‌کنیم. استفاده از ستونها با عرض یکسان، متون وسط چین شده و متن هایی که در کنار یک تصویر هستند. اگر قرار باشد چند المان در کنارهم قرار بگیرند سعی می‌کنیم که تعداد آنها فرد باشد. از طرفی گاهی برای ایجاد نقطه کانونی توجه از عدم تقارن نیز استفاده میکنیم. استفاده از این تکنیک کمی ریسک به همراه دارد و ممکن است نتیجه دلخواه به دست نیاید اما ما گاهی در پروژه هایمان از عدم تقارن برای درگیر کردن ذهن مخاطب استفاده میکنیم. چرا که مغز در این حالت نیاز به پردازش و تمرکز بیشتری دارد.قانون شکل و زمینه (Figure and Ground)آخرین اصل از قوانین گشتالت  که بررسی میکنیم، قانون شکل زمینه است. این قانون بیان می‌کنه که مغز تمایل داره بخش‌های مهم یک تصویر رو به عنوان “شکل” و بقیه رو به عنوان “زمینه” تشخیص بده. این قانون به طراحان کمک می‌کنه تا تمرکز کاربر رو به سمت بخش‌های مهم هدایت کنند.مثال عملی: در طراحی وب‌سایت برای یک رستوران، ما تصاویری با کیفیت و بزرگ از طرف ها غذا در پس زمینه سفید قرار دادیم تصاویر این بشقاب های غذا به عنوان “شکل” و فضای سفید پشت اون‌ها به عنوان “زمینه” بود.  این کار تمرکز کاربر را به سمت غذاها هدایت می‌کرد و باعث میشد تشویق بشه که بقیه غذاهای موجود در منو رو هم بررسی کنه.سخن آخرقوانین گشتالت به ما کمک می‌کنن تا طراحی‌های روان‌تر و منسجم‌تری ایجاد کنیم که کاربران به‌راحتی در اون‌ها حرکت کنن. استفاده درست از این قوانین در پروژه‌ های طراحی وب‌سایت می‌تونه به بهبود تجربه کاربری و افزایش تعامل کاربران کمک کنه. اگه این قوانین رو به درستی در طراحی‌های خودت پیاده کنی، نه تنها سایتت جذاب‌تر و کاربردی‌تر می‌شه، بلکه احتمال اینکه کاربران راحت‌تر به اهدافشون در سایت برسن، هم بیشتره.❤️خوشحال میشم اگر نظرت رو در مورد این مقاله با من به اشتراک بذاری و اگر واست مفید بود به دگران معرفیش کنی یا لایکش کنی. خانه خلاقیت مانایید خانه خلاقیت مانایید Tue, 26 Nov 2024 10:11:12 +0330 https://virgool.io/@manaid/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%A8%D9%87-%DA%A9%D9%85%DA%A9-%D8%A7%D8%B5%D9%88%D9%84-%D9%88-%D9%82%D9%88%D8%A7%D8%B9%D8%AFux-%D8%A8%D8%AE%D8%B4-%D8%A7%D9%88%D9%84-%D9%82%D9%88%D8%A7%D9%86%DB%8C%D9%86-%D8%A7%D8%B5%D9%84%DB%8C-ve5pv7dg0tua در پروسه  طراحی وب سایت (طراحی UX) به عنوان یک طراح هموراه به دوراهی (یا چندراهی!) هایی برخورد میکنیم که انتخاب هر کدام از مسیرها ما را به سمت خلق یک طرح موفق یا نا موفق می برد. انتخاب اینکه کدام گزینه ها در منوی ناوبری باشد. یا اصلن منوی ناوبری را در کجا قرار بدهیم؟ و سوالاتی مانند این. تعدادی از قوانین و اصول هستند که مانند تابلو های راهنمای کنار جاده ها مسیر درست را مشخص میکنند. مانند اصول پایه طراحی، اصول گشتالت، سوی گیری های شناختی و اصول ابداعی البته در این مقاله ما فقط در مورد طراحی UX در این مقاله قصد داریم با 5 اصل پایه برای طراحی وب سایت از جنبه UX آشنا و با ارایه مثالهای واقعی کاربردهای هر کدام رو بررسی کنیم.در حالی که UI  ( User Interface ) به یک سیستم واقعی اشاره داره و قابل مشاهده است و بیشتر جنبه هنری داره، UX ( User Experience ) قابل مشاهد نیست و بیشتر با احساسات کاربران درگیر بوده و جنبه رواشناسانه! داره. پس حتی اگر قصد داریم سایتی متفاوت یا یک سایت خلاقانه طراحی کنیم باز هم باید حداقل ها اصول طراحی UX را رعایت کنیم. از طرفی هر چند دو موقوله UI و UX جدا از هم شناخته می شوند اما به شدت وابسته به هم  هستند. شاید برخی از گفته من خوششان نیاید اما طراح UI خواه ناخواه باید با اصول و قواعد UX آشنایی داشته باشد. تصور کنید شما زیباترین وب سایت دنیا را طراحی کرده اید، اما کارایی ندارد و یا برعکس وب سایتی با کارایی بالا طراحی کردید اما ظاهر جذابی ندارد. هر دو این وب سایت ها قطعا مورد اقبال قرار نخواهند گرفت ودر گوشه ای از دنیای بسیار پهناور وب به خاطره ها خواهند پیوست.  با یک مثال کمی بیشتر موضوع را شفاف میکنم؛ برای طراحی ظاهر لینک ها در یک وب سایت، اصول UX به ما میگوید برای ایجاد اصطکاک کمتر و هزینه تعامل پایین تر در کاربر، ظاهر همه لینک ها باید یکسان باشد تا کاربر با دیدن آنها سریعا متوجه شود که آنها لینک و قابل کلیک کردن هستند. بنابراین طراح UI در مورد طرح ظاهر لینک ها آزاد است اما در مورد تنوع طرح لینک ها محدودیت دارد یعنی طبق اصول UX نباید برای هر لینک ظاهری متفاوت طراحیمند.در این مقاله 5 اصل پایه که برگرفته از سایت Law of ux می باشد را برای طراحی وب سایت با مثالهایی واقعی بررسی میکنیم .اصول پایه برای طراحی وب سایت و کاربرد های آن1- قانون آستانه دوهرتیاولین اصل UX که بررسی میکنیم، قانون آستانه دوهرتی ( Doherty Threshold ) است. این قانون نام خود را مدیون محقق شرکت IBM، والتر ج. دوهرتی است. آقای دوهرتی و همکارانش در سال 1982 روی زمان بهینه برای پاسخگویی ماشین به تعاملات کاربر تحقیق می کردند.  این اصل بیان میکنه برای متمرکز نگه داشتن کاربر روی انجام وظایفش بهترین زمان پاسخگویی کمتر از 400 میلی ثانیه است.کاربرد قانون آستانه دوهرتی در طراحی وب سایتعملکرد بهینه: مطمئن شوید تمام آیتم های تعاملی ( لینک ها، دگمه ها، جعبه های تعاملی و غیره…) در کمتر از 400 میلی ثانیه به کاربر پاسخ میدهند. اگر کاربر برای مشاهده پنل سبد خرید روی دگمه ای کلیک میکنه بهتره مطمئن باشید درکمتر از 400 میلی ثانیه پنل سبد خرید در صفحه کاربر ظاهر میشه.کاربرد اصل دوهرتی در طراحی وب سایتاستفاده از المان های بصری: در موارد که احتمال میدهید میزان پاسخگویی ممکن است طولانی باشد از المانهای بصری برای نشان دادن فرآیند پردازش استفاده کنید. برای مثال وقتی کاربر روی دگمه فیلتر کلیک میکند و این فیلتر قرار است با استفاده از API محتوایی برای کاربر آماده و روی اجرا کن با توجه به اینکه میدانیم بسته به سرعت شبکه و سیستم کاربر این زمان ممکنه طولانی باشه پس بهتره وقتی کاربر روی دگمه کلیک میکنه با نشان دادن انیمیشنی (انیمیشن لودینگ) به کاربر نشان بدهیم که دستورات او دریافت شده و در حال پردازش است. اگر فرآیندی ممکن است بیش از یک ثانیه طول بکشد (مانند آپلود کردن یک فایل در یک فرم) بهتر است با استفاده از نوارهای پیشرفت (progress bar ) ذهن کاربر را در حین پردازش درگیر نگه داریم و میزان تاب آوری زمان انتظار را برای کاربر تحمل پذیر تر کنیم.زمان انیمیشن ها: دو ویژگی animation-duration و  transition-duration زمان اجرای انیمیشن ها در CSS را تعیین میکنند. هنگام تنظیم کردن آنها به قانون آستانه دوهرتی توجه داشته باشید2- اصل تیغ اوکامدومین اصل ضروری که در هنگام طراحی UX وب سایت  باید با آن آشنا باشیم اصل تیغ اوکام نام داره که به نام فیلسوف و الهی‌دان قرن چهاردهم، ویلیام اوکام (William of Ockham) نامگذاری شده است. (یکی از اصول مورد علاقه من!)تیغ اوکام که به عنوان اصل صرفه‌جویی (Principle of Parsimony) نیز شناخته می‌شود، بیان می‌کند که هنگام مواجه با فرضیه‌های متفاوت برای یک پدیده، باید ساده‌ترین مورد را ترجیح دهیم. به طور خلاصه باید از پیچیدگی های غیر ضروری دوری کرد.کاربرد اصل تیغ اوکام در طراحی وب سایتکاربرد اصل تیغ اوکام در طراحی وب سایترعایت سادگی: بهترین مثال صفحه جستجوی گوگل است. در این صفحه فقط ابزارهای لازم برای یک جستجوی ساده گنجانده شده نه چیزی بیشتر نه کمتر. در هنگام طراحی صفحات و افزودن المانها از خود بپرسید آیا وجود این المان ضروری است. مثلا اگر یک فرم ثبت نام طراحی میکنید یک فیلد برای ایمیل یا شماره تلفن و یک فیلد برای انتخاب رمز ورود کافی است. اطلاعات تکمیلی را میتوانید در فرصتی دیگر از مخاطب بگیرید. یا مثلا وقتی ایمیل یا شماره تماس مخاطب را برای ارسال کد تایید احراز هویت دریافت میکنید دیگر نیازی به درج کپچا های پیچیده نیست.کاهش بار شناختی: با انتخاب متن درست برای المانها، پیامهای هشدار و خطاها، درج متن راهنما برای ورودی های کاربر و استفاده از آیکون ها و نمادها تا حدی بار شناختی کاربر را کاهش دهید.تمرکز بر عملکرد اصلی: طرح شما در هر قسمت و صفحه یک سایت می بایست بر اساس هدف و عملکرد اصلی آن قسمت یا صفحه باشد. از طرفی نباید این ساده سازی عملکرد آن قسمت یا صفحه را تحت تاثیر قرار دهد. واقعیت این است که کاربر اکثر وب سایت ها، طیف گسترده ای از مخاطبین و با سطح دانش متفاوت است. سوال اینجاست که کدام دسته از مخاطبین را به عنوان معیار در نظر بگیریم؟ در یک کلام طرح شما باید برای مخاطبین با کمترین دانش استفاده از محصولات دیجیتال به راحتی قابل استفاده باشد. دوباره به مثال صفحه جستجوی گوگل برگردیم. این صفحه به طور مشخص برای کاربران با حداقل دانش کار با سیستم طراحی شده (یک کادر برای درج عبارت جستجو و دو تا دگمه) اما طراحان گوگل کاربران حرفه ای تر را هم فراموش نکرده اند آنها امکاناتی را برای کاربران حرفه ای تر در نظر گرفته اند که با استفاده از ـیکونهای کنار کادر جستجو و حتی با استفاده از ترفندهای متنی به صورت حرفه ای تر جستجو کنند بدون اینکه پیچیدگی غیر ضروری را به طرح اضافه کنند. ما هم می توانیم در پروسه طراحی وب سایت تمام المان ها و ابزارهای مورد نیاز برای عملکرد اصلی را با در نظر گرفتن سطح حداقلی دانش کاربران در اختیار ایشان قرار داده و در صورت نیاز به ابزارهای پیچیده تر و تنظیمات بیشتر برای کاربران حرفه ای تر آنها در در یک منوی تنظیمات یا لینک جداگانه جمع آوری کنیم.3- اصل پارتوسومین اصل برای طراحی UX اصل پارتو است این اصل که به قانون 80 /20 هم معروف است عنوان میکنه که در بسیاری از رویدادها، تقریباً ۸۰٪ اثرات از ۲۰٪ علل ناشی می‌شوند. به عبارت ساده تر برخی از گزینه ها سهم بیشتری در موفقیت یک طرح دارند. پس به عنوان یک طراح وب سایت کار ما در وهله اول شناسایی این گزینه های با اهمیت تر است.به‌ کارگیری اصل پارتو در تجربه کاربری:اصل پارتو  در واقع عنوان میکنه که در هر سیستمی، تنها چند متغیر اصلی بر نتایج تأثیر می‌گذارند، و بسیاری از عوامل دیگر تأثیر کمی دارند یا اصلن هیچ تأثیری ندارند. به عبارت دیگر اصل پارتو بیان کننده سرمایه‌گذاری ضعیف در زمان و تلاش است. اصل پارتو چندین کاربرد در در طراحی سایت دارد؛اصل پارتو در مدیریت زمان: اولین کاربردش حین پروسه طراحی وب سایت است. یک طراح سایت بر اساس آنچه کارفرما در نظر دارد باید قادر باشد صفحات مهمتر را شناسایی کند و بر اساس آن زمان تحویل پروژه و انرژی خودشو بودجه بندی کنه.اصل پارتو در طراحی یک صفحه از وب سایت: کاربرد دیگر اصل  پارتو مربوط به طراحی یک صفحه است. برای مثال طراحی یک صفحه فرود را در نظر بگیرید. هدف طراحی تمام بخشها، تک تک تصاویر به کار رفته  و تمام واژه های تایپ شده این است که کاربر را به سمت دگمه فراخوان (CTA) هدایت کند. بنابراین اهمیت هر بخش نسبت به بخشی دیگر متفاوت است. به همان روش می توانید زمان خود و میزان مهارت خود را بسته به اهمیت بخش های یک صفحه وب سایت مدیریت کنید.اصل پارتو در طراحی المان های وب سایت: حتی در طراحی المانهایی نظیر منوی ناوبری هم میتوان ازا ین قانون استفاده کرد. در جایی که تعداد آیتم ها یا گزینه ها زیاد است می توان آنهایی که با اهمیت بیشتر هستند را مستقیما در دسترس کاربر قرار داد و ما بقی گزینه ها را در المانهای فشرده کننده مثل آکاردئون ها، لیست های کشویی، زیر منوها و غیره… قرار داد.اصل پارتو در افزایش نرخ تبدیل: شاید یکی از کاربردهای  مهم قانون پارتو در زمینه طراحی سایت مربوط به شناخت مخاطبان با پتانسیل بالاست. شناخت مخاطب و شخصیت شناسی مخاطبان یک سایت بخشی از فرآیند طراحی UX  است. همواره درصدی از مخاطبان یک سایت به مشتریان آن تبدیل می شوند. یک طراح UX حرفه ای طیف مخاطبان یک سایت را شناسایی میکند و قسمتهای با اهمیت سایت را بر مبنای آن دسته از مخاطبان که پتانسیل بیشتری برای تبدیل شدن به مشتری دارند، طراحی میکنه. برای مثال فرض کنید یک پروژه طراحی سایت برای فروشگاه آنلاین لباس مردانه و زنانه داریم. از یک سو می دانیم که معمولا افراد نوجوان بیشتر از افراد با سن 30 تا 40 سال خرید آنلاین انجام میدهند. و  زن ها بیشتر از مردها به خرید آنلاین علاقه دارند. از دیگر سو با مطالعه راهنمای جامع انتخاب رنگ برای طراحی سایت و تئوری رنگ ها می دانیم که این طیف مخاطب چه رنگهایی را بیشتر ترجیح می دهد. بنابراین می توانیم در طرح هایمان از این رنگ ها بیشتر استفاده کنیم.4- اصل پوستلیکی دیگر از اصول و قوانینی که حین طراحی وب سایت باید با اون آشنا باشیم اصل پوستل است که به عنوان “اصل استحکام” (Robustness Principle)  هم شناخته می‌شود. این اصل نخستین بار توسط یکی از پیشگامان اینترنت به نام “جان پوستِل” ارایه شد.در واقع این اصل از دو بخش تشکیل شده؛ ” ورودی ها را آزاد منشانه و خروجی ها را محافظه کارانه طراحی کنید.”به طور کلی یعنی محصول شما باید بتونه هم با انسانها و هم با ماشینهای دیگه ارتباط درستی برقرار کنه. در سمتی که با ماشین های دیگه در ارتباطه قضیه کمی ساده تر است چرا که ارتباط ماشین ها تمام بر اساس چهارچوب و استاندارهای مشخصی است. اما در سمتی که قرار است محصول طراحی شده با انسان در تعامل باشه شرایط کمی پیچیده تره.یک مثال؛ فرض کنید قرار است توسط یک فیلد ساده تاریخ تولد کاربر را بگیریم. به فرض نبودن راهنمایی برای مشخص کردن فرمت مورد قبول، ممکن است کاربران تاریخ تولد خود را به یکی از اشکالی؛ 1364/05/13، 64/5/13 یا 64- مرداد-13 ارسال کنند. حقیقت اینه که کاربران یک وب سایت طیف گسترده ای از انسانها با شرایط متفاوت و سطح دانش متفاوت هستند که خطا کردن هم جزی از آنهاست. بنابراین باید به عنوان یک طراح حرفه ای تا حد امکان رفتار آنها را پیشبینی کنیم تا امکان بروز خطا در سیستمی که طراحی کردیم را به حداقل برسانیم.کاربرد های قانون پوستل در طراحی وب سایت:ورودی ها منعطف: سعی کنید ورودی هایی که قرار است از کاربر اطلاعات بگیرد را تا حد امکان منعطف طراحی کنید؛به عنوان مثال فرم ثبت نام یا احراز هویت را در نظر بگیرید. تا چند سال پیش مرسوم بود که عمل ثبت نام و احراز هویت فقط از طریق ایمیل صورت میگرفت. کم کم با همه گیر شدن تلفن شخصی، استفاده از تلفن همراه برای احراز هویت فراگیر شد. در این بین برخی از وب سایت ها یا اپلیکیشن ها با به کار بردن قانون پوستل این امکان را فراهم نمودند که کاربر در یک کادر بتواند با شماره موبایل یا ایمیل عملیات ثبت نام یا احراز هویت را انجام دهد. برای مثال سایت ویرگول این امکان را برای کاربران خود فراهم نموده که با نام کاربر، شماره موبایل یا ایمیل بتوانند احراز هویت کرده و به سایت وارد شوند. (تصویر زیر). اینستاگرام این امکان را به شما می دهد که به وسیله یک فیلد، با نام کاربری، شماره موبایل و یا ایمیل به سیستم وارد شوید.کاربرد اصل پوستل در طراحی وب سایتکاربرانتان را راهنمایی کنید: اگر اطلاعات قرار است با فرمت خاصی دریافت شود حتما با پیام های راهنما و یا طراحی قالب برای ورد اطلاعات کاربر را راهنمایی کنید.پیام های واضح و مشخس ارسال کنید: برای هر گونه اطلاعات اشتباه در صورت امکان پیام خطای مشخص و واضحی در نظر بگیرید.همه کاربران را در نظر بگیرید: ترجیحات کاربران را در نظر گرفته و ورودی ها را مطابق با ترجیحات کاربرانتان طراحی کنید منظور ما کاربرانی است که ممکن است دارای نوعی معلولیت یا بیماری جسمی  مانند کم بینایی، کورنگی و لرزش دست باشند. قرار دادن گزینه بزرگنمایی، تغییر رنگ، قسمتهای قابل کلیک بزگ می تواند مشکلات این کاربران رو برطرف کنه.5- اصل تسلراصل تسلر در واقع در رابطه با  مدیریت پیچیدگی یک محصول است و ریشه  آن به اواسط دهه ۱۹۸۰ برمی‌گردد، جایی  که لری تسلر، دانشمند رایانه در شرکت Xerox PARC در زمینه توسعه زبان طراحی تعاملی فعالیت می‌کرد. طبق مشاهدات تسلر نحوه تعامل کاربران با یک برنامه به اندازه خود برنامه مهم است. بنابراین، کاهش پیچیدگی برنامه و رابط کاربری مهم بود. با این حال، تسلر متوجه شد که هر برنامه یا فرآیند، به صورت ذاتی دارای مقداری پیچیدگی است که نمی توان آن را کم یا حذف کرد. این پیچیدگی باید در یکی از دو مکان  قرار گیرد: دربخش توسعه و طراحی یا  در سمت تعامل با کاربر.کاربرد اصل تسلر در طراحی وب سایتتسلر عنوان میکنه یک برنامه باید همواره مقداری از پیچیگی اش را در سمت کاربر نگه دارد. این مقدار نباید به حدی کم باشد که کاربر احساس کند روی سیستم کنترلی ندارد و یا به حدی زیاد باشد که برخی کاربران با سطح دانش کمتر نتوانند به درستی از آن بهره ببرند.کاربرد قانون تسلر در طراحی سایت:به عنوان یک طراح UX باید همواره در حین پروسه طراحی وب سایت به این نکته توجه داشته باشیم که محصول ما تا حد امکان ساده باشه تا هر کاربری بتونه به راحتی و با کمی لذت با آن کار کنه. چند کار که میتونیم ببرای این کار انجام بدیم؛جایی که امکان انتخاب گزینه ها هستف کاربران را به تایپ کردن وادار نکنید.جایی که تعداد کنترل ها و دگمه ها زیاد است از کلیدهای میانبر (مانند دگمه Tab برای فوکوس کردن روی گزینه بعدی) غافل نشویم.تا حد امکان اطلاعات ورودی کاربر را ذخیره نگه داریم تا نیاز به انتخاب یا تایپ مجدد نباشد. مگر در مواقع لزوم.اطلاعات پیش فرض را برای هر کاربر شخصی سازی کنیم (بر اساس اطلاعاتی که از ماربر جمع آوری کردیم).در نهایت کم کردن پیچیدگی در سمت کاربر نباید بیش از اندازه باشه . سوای هزینه های که این مورد میتونه داشته باشه لازم است برای درگیر کردن کاربر گاهی وظایفی برای او در نظر بگیریم تا کاربر مجبور باشه با سیستم تعامل کنه و احساس کنه روی سیستم کنترل داره!منبع : وب سایت مانایید خانه خلاقیت مانایید خانه خلاقیت مانایید Tue, 02 Jan 2024 13:50:24 +0330 https://virgool.io/@manaid/5-%D9%86%DA%A9%D8%AA%D9%87-%DA%A9%D9%84%DB%8C%D8%AF%DB%8C-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%A8%D9%87%DB%8C%D9%86%D9%87-%D8%B3%D8%A7%D8%B2%DB%8C-%D8%AA%D8%B5%D8%A7%D9%88%DB%8C%D8%B1-%D8%AF%D8%B1-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-%D9%88-%D8%A7%D9%81%D8%B2%D8%A7%DB%8C%D8%B4-%D8%B3%D8%B1%D8%B9%D8%AA-%D8%A8%D8%A7%D8%B1%DA%AF%D8%B2%D8%A7%D8%B1%DB%8C-ny9rpdvgaipw مقدمهسرعت بارگزاری تصاویر و ویدیوها برای کاربر به اندازه ظاهر جذاب وب سایت اهمیت داره. فقط تصور کنید که یک تصویر با کیفیت بالا برای هدر سایت خود طراحی کرده اید اما کاربر باید 5 تا 6 ثانیه و حتی بیشتر برای بارگزاری آن منتظر بمونه. خیلی زود صبر کاربر لبریز میشه، از سایت شما خارج میشه و همه زحمات شما نقش بر آب میشه. بهینه‌سازی تصاویر در طراحی سایت مهمه تا بتونیم علاوه بر سرعت بارگزاری بالا از تصاویر زیبا و با کیفیت بالا استفاده کنیم.چرا بهینه‌سازی تصاویر در طراحی سایت مهمه؟بر اساس گفته Think With Google، با افزایش زمان بارگذاری یک صفحه از یک به سه ثانیه،  Bounce rate یا نرخ پرش! (نرخ بازگشت) وب سایت شما می تواند 32 درصد افزایش یابد. بنابراین سرعت بارگزاری ( به عنوان یکی از مولفه‌های کاربرد پذیری) تاثیر زیادی در موفقیت طراحی یک صفحه وب سایت  و  طراحی تجربه کاربری، UX  داره و نباید از آن غافل شد. از طرف دیگه نداشتن تصاویر با کیفیت و جذاب باعث حوصله سربر و بی روح شدن طراحی  ظاهری یا طراحی UI  سایت می شود.تصاویر وب ‌سایت جوهره و روح یک صفحه هستند یک فروشگاه آنلاین رو بدون تصویر محصولات تصور کنید یا یک صفحه فرود بدون تصویری که متن کناریش رو توصیف کنه. تصاویر و ویدیو ها در یک صفحه وب سایت نقش بسیارمهمی در انتقال احساس و بازگو کردن داستانی که قرار است برای مخاطب تعریف کنید، ایفا می کنند.برای کاربرانی که حوصله خواندن چند خط متن را ندارند تصویر و یا یک ویدیو بسیار کمک کننده است. اما اگر این تصاویر و ویدیو ها به درستی بهینه نشده باشند باعث می شود سرعت بارگزاری کم شده و کاربر زمان زیادی را در انتظار بارگزرای کامل صفحه بماند در این حالت تصاویر نه تنها کمک کننده نیستند که باعث ایجاد تجربه بد و در نهایت شکست طراحی شما می شود. این موارد اهمیت بهینه‌سازی تصاویر در طراحی سایت را نشان می دهد.در این مقاله 5 راهکار در مورد بهینه‌سازی تصاویر در طراحی سایت را بررسی میکنیم  تا بتونید در پروژه های  بعدیمون از اونها استفاده کنیم.حالا این بهینه سازی یعنی چه؟ در واقع بهینه کردن تصویر یعنی استفاده از الگوریتم های مختلف جهت فشرده سازی اطلاعات یک تصویر بدون اینکه کیفیت آن دچار افت بشود.1- برای بهینه‌سازی تصاویر در طراحی سایت از تصاویر با ابعاد مناسب استفاده کنید:حقیقت اینه که به طور میانگین 50% از محتوای هر صفحه را تصاویر به خود اختصاص میدن که علاوه بر کمک به زیباتر شدن صفحه طراحی شده به شکلی سریعتر و قابل فهم تری محتوای موجود را به مخاطب ارایه می‌کنند. اینجاست که طراحان اغلب وسوسه میشن تصاویر رو با کیفیت اصلی آپلود و استفاده کنند.وقتی از سیستمهای مدیریت محتوا مانند وردپرس، جوملا و غیره استفاده میکنیم جای نگرانی نیست چرا که این سامانه ها معمولا از تصویر آپلود شده چندین نمونه با ابعاد مختلف تهیه میکنند و در هر جا بسته به ابعاد، نسخه مناسب را بارگزار و در معرض دید مخاطب قرا میدن. اما وقتی یک صفحه وب طراحی میکنیم باید به این نکته توجه داشته باشیم که اگر قرا است تصویر ما به صورت بند انگشتی نمایش داده شود (مانند تصویر آواتار یک کاربر) اشتباه است که یک تصویر با ابعاد بزرگ (مثلا 1000 در 1000 پیکسل)استفاده کنیم.از طرفی باید توجه داشته باشیم که اندازه تصاویر در سئوی صفحه تاثیر گذره و ربات های گوگل ابعاد تصوایر به کار رفته در متن محتوا را بررسی میکنند. طبق گفته گوگل بهتره تصاویر استفاده شده در محتوا حداقل دارای عرض 800 پیکشل (800px) داشته باشند. اشتباه دیگری که برخی از طراحان مرتکب میشن استفاده از تصاویر با رزولوشن بالاتر از حد است. رزولوشن تصاویر برای چاپ 300dpI است اما برای تصاویری که در اسکرین های دیجیتالی نمایش داده میشن 72dpI کاملا مناسب است.با راست کلیک کردن روی تصویر، رفتن به منوی PROPERTIES و سربرگ DETAILS از قسمت مشخص شده در تصویر زیر میتوندی رزولوشن تصویر را مشاهده کنید.  پیشنهاد میکنم برای آگاهی بیشتر مقاله راهنمای ابعاد تصاویر در طراحی سایت رو حتما مطالعه کنید.2- فرمت درست استفاده کنید:یکی دیگر از کارهایی که می توانید برای بهینه سازی تصاویر در طراحی سایت انجام بدید، استفاده از فرمت مناسب حتی بیشتر از ابعاد تصویر میتونه در کیفیت و حجم تصویر تاثیر گذار باشه. سه فرمت رایجی که اکثر طراحان سایت اونها رو میشناسن و از اونها استفاده میکنند عبارتند از gif ، .png. و .jpg که از فرمت gif. اغلب برای تصاویر متحرک و از فرمت  png. برای تصاویر بدون پس زمینه  استفاده میشود.شاید بعدها در مورد انتخاب فرمت مناسب یک مقاله راهنما بنویسم. اما تا اون موقع از نکات زیر به عنوان یک راهنمای سریع استفاده کنید.به طور کلی فرمت  gif. (گیف) رو بیخیال بشید. حتی اگر نیاز به تصاویر متحرک دارید استفاده از ویدیو های کوتاه با فرمت مناسب بهتر است. مگر اینکه بخواهید یک بنر تبلیغاتی کوچک طراحی کنید.از بین فرمت های ، png. و .jpg در شرایط یکسان فرمت .jpg کم حجم تر بوده پس تصاویرتون رو با فرمت jpg. آپلود کنید مگر اینکه 1- نیاز به یک تصویر با پس زمینه شفاف داشته باشید ( مثلا نشانگر موس سفارشی) یا 2- تصاویری با وضوح بالا نیاز داشته باشد مانند تصویری که دارای متن ریز است یا تصویری که دارای تدارج رنگ (gradient) باشد که بهتر است از فرمت png. استفاده کنید.در مقابل فرمت‌های قدیمی png. و jpg. فرمت های جدیدتری هستند که علاوه بر حفظ کیفیت با تکنیکهای جدید فشرده سازی نسبت به فرمت .jpg حجم کمتری اشغال میکنند. با توجه به تصویر زیر فرمت .WEBP 30 درصد حجم کمتری نسبت به فرمت jpg. اشغال میکند و تقریبا توسط همه مرورگرها پشتیبانی می شود. فرمت AVIF. نسبت به دیگر فرمت ها جدید تر بوده و همانطور که در تصویر می بینید 50درصد کمتر از فرمت jpg. فضا اشغال میکند اما کیفیت تصویر تغییری نمیکند. اما مشکل این فرمت اینه که هنوز مرورگرها از اون پشتیبانی نمیکنند.3- تصاویرتان را به صورت بهینه شده استفاده کنید:روش های زیادی برای بهینه سازی تصاویر در طراحی سایت وجود داره. قبلا گفتی که اگر از نرم افزارهای مدیریت محتوا استفاده میکنید زیاد لازم نیست دغدغه این موضوع رو داشته باشد. هرچند که اگر در اون موارد هم تصاویرتون رو بهینه کنید بهتر خواهد بود. برای مثال میتونید با استفاده از ابزارهای آنلاین تصاویر خودتون رو بهینه کنید. این مقاله از سایت دمیزله ( https://themeisle.com/blog/best-online-image-optimizer-tools) چندتا از این ابزارهای آنلاین رو معرفی و اونها رو با هم مقایسه کرده .خوندنش خالی از لطف نیست.اگر هم مثل من از فتوشاپ برای ویرایش عکستون استفاده میکنید کافیه وقتی کارتون تموم شد به جای Ctrl+s از Alt+ Shift+ Ctrl +s یا از منوی فایل زیر منوی Export گزینه save for web (legacy) استفاده کنید تا تصاویر به صورت بهینه شده ذخیره شود.4- با Lazy loading  دوست بشید، بچه خوبیه!!حتما شما هم زمانهای نه چندان دور رو یادتون هست که وقتی صفحه یک پست رو باز می کردید همینطور که در حال خوندن مطلب بودید یکی از تصاویر تازه بارگزاری میشد و باعث پرش ناگهانی محتوای زیرش می شد. این پرش ها واقعا برای یک صفحه سایت فاجعه است. تا جایی که گوگل هم رسما اعلام کرد میزان پرش محتوا به هر دلیلی، تاثیر منفی بر روی سئوی اون صفحه داره. اینجا بود که Lazy load (بارگزاری تنبل؟!! آخه اینم شد ترجمه؟) پا به عرصه وجود گذاشت.امروزه اگر یک صفحه وب سایت با طراحی خوب رو باز کنید متوجه می شوید که تصاویر به صورت مات بارگزاری شده و به تدریج واضح می‌شوند.  این روش بارگزاری تصاویر همان Lazy loading یا بارگزاری تدریجی است.  بارگزاری تدریجی دو مزیت داره؛ اول به عنوان فضا نگه دار عمل میکنه و وقتی تصویر کاملا بارگزاری شد محتوای زیر آن پرش نمیکنه. دومین مزیت اینه که کاربر متوجه می شود اینجا تصویری قرار داره  که به مرور بارگزاری می شود. (این مزیتها در نهایت بر روی سئوی صفحه شما نیز تاثیر مثبت می گزارد). پس داستانها و افسانه های واهی که این عمل (یعنی Lazy loading) رو بد میدونن و عنوان میکنند تاثیر منفی روی سئو و تجربه کاربر داره رو فراموش کنید و نگرانش نباشید.5- با قدرت SVG آشنایی دارید؟اگر هنوز با تصاویر برداری مقیاس پذیر!! (Scalable Vector Graphics) یا SVG بی اطلاع هستید پیشنهاد میکنم مقاله روش های استفاده از تصاویر SVG رو حتما مطالعه کنید. تصاویر SVG معمولا از یک سری تگ نشانه گذاری شده مانند XML  و فرومل ها ریاضی برای تصاویر استفاده میکنند. بنابراین حجم بسیار کم و سرعت لود بالایی دارند.علاوه بر اون قابلیتهایی مانند عدم افت کیفیت در هر اندازه، تعامل پذیر بودن و غیره … ابرازی مناسب برای استفاده در طراحی سایت است.هیچ یک از فرمتهای تصویری دیگر (لااقل اونهایی که من میشناسم) این قابلیت ها رو ندارند. پس برای بهینه سازی تصاویر در طراحی سایت بهتره جاهایی که نیاز به تصاویر طراحی شده و غیر واقعی دارید از فرمت SVG آن استفاده کنید. برای تهیه تصاویراین نوع تصاویر میتونید از سایتهایی مانند فری پیک، Pixabay ، Vectzeey، Free vector و غیره به صورت رایگان استفاده کنید. البته که سایتهای دیگه هم هستند که هم به صورت رایگان و هم پرمیوم تصاویر وکتور در اختیار شما میگذارند فقط کافیه از گوگل عزیز بخواهید بهتون معرفی کنهاین مقاله از سایت مانایید است. نقطه نظرات و لایک های شما باعث دلگرمی ما می شود خانه خلاقیت مانایید خانه خلاقیت مانایید Sat, 12 Aug 2023 14:44:21 +0330 https://virgool.io/@manaid/%DA%86%DA%AF%D9%88%D9%86%D9%87-%D8%B7%D8%B1%D8%A7%D8%AD-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%B4%D9%88%DB%8C%D9%85-6-%DA%AF%D8%A7%D9%85-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%88%D8%B1%D9%88%D8%AF-%D8%A8%D9%87-%D8%A8%D8%A7%D8%B4%DA%AF%D8%A7%D9%87-%D8%B7%D8%B1%D8%A7%D8%AD%D8%A7%D9%86-%D8%AE%D9%88%D8%AF%D8%A2%D9%85%D9%88%D8%AE%D8%AA%D9%87-blatb5bmhfzc اغلب ما  پس از اینکه به این نتیجه می رسیم که میخواهیم کاری رو به عنوان حرفه‌ی خودمون انتخاب کنیم. بلافاصله دنبال یک دوره آموزشی خوب ( که ارزون هم باشه) می‌گردیم. اما یه عده هم هستند که تلاش میکنن و با آزمون و خطا و کسب تجربه، حداقل برای شروع، پیچ و خم اون کار رو یاد بگیرن. طراحی سایت هم از اون حرفه هاییه که میتونی هم با دیدن دوره های آموزشی و هم به طور خود آموز اون رو یاد بگیری.خیلی ها از من می پرسن چگونه طراح سایت شویم؟از اونجایی که من خودم به صورت خود آموز این کار رو یاد گرفتم. میخوام تو این مقاله تجربیاتم رو با شما به اشتراک بذارم . مسلما راه های زیادی برای آموختن اصول طراحی دیجیتالی هست و ما نمیتونیم بگیم کدوم درسته و کدوم غلط. در واقع اصلن مسیر درست و اشتباه وجودنداره. همه چیز بر مگیرده به اینکه اولا مدل یادگیری شما چگونه است و دوم این که  شما بتونید اصول تئوری پشت یک طراحی خوب رو درک کنید و از اون اصول در طرح های خودتون به درستی استفاده کنید و آنقدر این کار رو تمرین کنید تا در آن مهارت پبدا کنید.در این مقاله می آموزیم چگونه با طی کردن 6 قدم زیر تبدیل به یک طراح سایت خودآموخته شویم؛اولین گام: یادگیری اصول و مفاهیم طراحی Ui/Uxدومین گام: چشمان خود را برای بررسی و تشخیص طرح های خوب آموزش دهیدگام سوم: روی (آموزش) نرم افزار مناسب خودتان سرمایه گذاری کنید.چهارمین گام: یک پورتفولیو یا آلبوم نمونه کار ایجاد کنید.گام پنجم: بازخورد بگیرید و بدون تعصب  از آن بیاموزید و تجربه کسب کنید.سعی کنید تجربه های واقعی کسب کنیدگام اول: یادگیری اصول و مفاهیم طراحی Ui/Uxتجربه یک کاربر در یک وب سایت مسلما مهمترین بخش یک طراحی موفق است. خلق یک تجربه کاربری موفق امکان پذیر نیست مگر اینکه با اصول و مبانی طراحی UX آشنا باشید. این اصول بر ایجاد یک تجربه کاربری لذت بخش از طریق درک نیازهای کاربر و رفع آنها بر اساس اصول روانشناسی تمرکز دارد. درک اینکه چرا کاربران برخی رفتارهای خاص از خود بروز می دهند، چه چیزی نیاز دارند یا چه چیزی آنها را ترغیب به ماندن در وب سایت ( یا خارج شدن از آن ) میکند، کلید ایجاد یک محصول دیجیتالی خوب است که علاوه بر رفع نیاز های کاربر، اهداف تجاری صاحبان کسب و کار را نیز  برآورده می کند ? .خوشبختانه دوره های رایگان زیادی رو میتونید در یوتوب و منابع فارسی پیدا کنید. اما برای شروع بهتر است ابتدا با اصول طراحی UX و مطالعه کتاب “وادارم نکن فکر کنم” اثر استیو کروگ، پدر طراحی UX ! شروع کنید.چندتا منبع آموزشی رایگان  و خوب  ? رو هم اینجا واستون میذارم که بد نیست به اونها هم نگاهی داشته باشید؛دوره آموزشی careerfoundry، دوره آموزشی futurelearn، دوره آموزشی لیندکدین، دوره آموزشی اودمی، دوره آموزشی اوداسیتی و https://learnux.io/ .بعد از اونکه مقدمات رو فرا گرفتید و کتاب رو هم خوندید نوبت به مرحله بعد میرسه.گام دوم: آموزش مهارت خوب دیدن  برای بررسی طرح های خوبوقتی از من می پرسن چگونه یک طراح سایت شویم؟ پاسخ کوتاه من اینه که: “خوب دیدن رو یاد بگیرید”.یادگیری اصول اولیه طراحی، یک ابزار است. برای اینکه واقعاً کار با این ابزار را یاد بگیرید و در آن مهارت پیدا کنید باید بیاموزید که با توجه به محصولات دیجیتالی طراحی شده توسط دیگران نگاه کنید. برای مثال، دفعه بعد که وب‌سایت یا برنامه های روی موبایلتون یا رایانه شخص خودتون رو باز میکنید با دید انتقادی تر به آن نگاه کنید، چند دقیقه وقت بگذارید و تجزیه و تحلیل کنید که چرا این وب‌سایت برای شما جذاب است ( یا نیست، یاد گیری به سبک لقمان!).آیا پالت رنگ آن جذابه؟ طراحی تعاملی یا تایپوگرافی چطور؟ به هر قسمت از طراحی نگاه کنید: فاصله بین عناصر، شبکه ای که سایت بر اساس آن طراحی شده ، سلسله مراتب بصری سایت، و حتی تصاویر و نمادهای خاص استفاده شده. از خود بپرسید چه چیزی خوبه و کدوم قسمت طرح رو خراب کرده. با این کار میتونید به چشمان خود بیاموزید که نقاط مثبت و منفی هر طرح رو متوجه بشه. روش دیگر بررسی های موردی نمونه های طراحی موفق است.همچنین در سایتهایی مثل دریبل، بیهانس، پینترست، اینستاگرام و لینکدین میتونید نمونه کارهای افراد دیگری با هر سطحی ( از مبتدی تا حرفه ای) را مشاهده کنید و علاوه بر ایده گرفتن اونها رو با دقت بیشتری برسی کنید. سعی کنید بانکی از ایده ها داشته باشید و نمونه کارهای جذاب و خوب دیگران رو در بانکتون قرار بدید . ( من برای این کار یه پوشه با نام ایده های جالب روی فضای ابری One drive خودم ساختم و هر چی میبینم رو داخل اون قرار میدم).گام سوم: آموزش کار با ابزارهای مناسب گام سوم: آموزش کار با ابزارهای مناسبدر این مرحله نیاز به ابزارهایی دارید تا به کمک آنها ایده های خود را ارایه کنید و آموخته های خود را بکار بگیرید. مسلما نرم افزارهای زیادی برای این کار وجود داره اما سه تا از بهترین نرم افزارهای تخصصی برای این کار Figma، Sketch  و Adobe XD است.فیگما: یکی از جدیدترین  ابزار برای خلق نمونه های دیجیتالی طراحی UX و Ui  در بازار است. با وجود افزونه های زیاد و شبکه کاربران گسترده ای که داره به اولین ابزار انتخابی بسیاری از طراحان تبدیل شده است.اسکچ: برنامه طراحی دیجیتال برای MacOS است و بیشتر به دلیل قابلیت های افزونه هایش و رابط بصری جذاب مورد توجه طراحانی است که از محصولات کمپانی اپل استفاده میکنند. ( همون 4 درصدی ها).ادوبی XD: این نرم افزار محصول شرکت معروف ادوبی است. که به طور تخصصی برای طراحی رابط کاربری، UI و طراحی UX به بازار اومده و فعلا رایگانه  و این بهترین نقطه قوت این نرم افزاره.این که کدوم بهتره و کدوم مناسبتر برای شماست رو باید خودتون بررسی کنید. هر کدام بدی و خوبی های خودشون رو دارند. اما در کنار اینها باید کار با چند نرم افزار فرعی رو هم یاد بگیرید. یک نرم افزار برای برش، ویرایش و ترکیب تصاویر که پیشنهاد ما قطعا ادوبی فتوشاپ است. اگر سیستم عامل لینوکس دارید از گیمپ هم میتونید استفاده کنید . برای  IOS بازها همون Sketch  کار شما رو راه می اندازه. نرم افزار مورد نیاز بعدی نرم افزاری برای ویرایش و ساخت تصاویر وکتور هست که باز پیشنهاد ما ادوبی ایلوستراتور است. اگر از سیستم عامل لینوکس استفاده میکنید میتونید از Inkscape  استفاده کنید و برای IOS بازها همچنان Sketch  رو پیشنهاد میکنیم.من به شخصه برای طراحی پروتوتایپ ها بسته به ابعاد پروژه و چند پارامتر دیگر هم از figma و هم Adobe XD استفاده میکنم. برای ویرایش تصاویر مورد نیازم از فتوشاپ و طراحی و ساخت تصاویر وکتور و SVG از ایلوستراتور استفاده میکنم. ولی پیشنهاد میکنم حتما با همه نرم افزارها کار کنید و خودتون نرم افزار مناسبتون رو پیدا کنید. گام چهارم: ایجاد آلبوم نمونه کار ( فارسی رو پاس بداریمِ “پورتفولیو”) برخلاف تصور رایج و اینکه ما همش دوست داریم بَه بَه و چَه چَه بشنویم. بازخوردهای منفی می تواند خیلی بهترو مفیدتر از بازخوردهای مثبت باشند. در واقع همین بازخوردهای منفی است که میتواند به رشد شما به عنوان یک طراح کمک کند. تا مهارت های خود را ارتقا دهید و محصولات بهتری ایجاد کنید.بنابراین سعی کنید به دنبال بازخوردهای منفی باشید و از آن به عنوان سوخت برای بهبود طرح های خود استفاده کنید.به تجربه متوجه شده ام که بازخورد منفی یکی از مثبت ترین اتفاقاتی است که می تواند در حرفه‌ی طراحی رخ بدهد. فقط به یاد داشته باشید. لازم نیست تمام مهارت های خود را یک شبه اصلاح کنید. تلاش برای یک درصد بهتر شدن در هر روز، هر هفته یا هر ماه در نهایت باعث پیشرفت مداوم به سمت موفقیت می شود.نکته کنکور: وقتی معمولا از من یا هر طراح دیگه میپرسن. ” چگونه یک طراح سایت شویم  ” شروع میکنیم به آسمون ریسمون بافتن که فلان سایت رو ببین، فلان نرم افزار رو یاد بگیر و … اما در کنار داشتن مهارت های سخت ( مهارت کار با ابزار و نرم افزار)، باید یک سری مهارت نرم (مهارت های شخصیتی و اجتماعی) هم داشته باشیم . مهمترین مهارت نرمی که فکر کنم همه طراحان با سابقه در مورد آن متفق القول هستند که در این حرفه خیلی ضروریه، “تاب آوری” است. بازخورد گرفتن به ویژه وقتی نظرات منفی است و ما تلاش میکنیم بدون عصبیت و خشونت از اونها برای بهبود طرحایمان استفاده کنیم کمک بزرگی به رشد این مهارت میکنه. گام ششم: سعی کنید تجربه های واقعی کسب کنیدهنگامی که به اندازه کافی نمونه کارهایی ایجاد کردید که به آن افتخار می کنید. و به مهارت های خود اطمینان پیدا کردید، زمان آن فرا رسیده که تجربه ای در دنیای واقعی کسب کنید. برای این کار ابتدا بهتر است یک آلبوم نمونه کار آنلاین از بهترین کارهای خود ایجاد کنید. و پس از آن شروع به درخواست برای موقعیت شغلی طراحی UI/UX سطح مبتدی کنید. برای شروع می توانید از وب سایتهای فریلنسری مثل، پارس کدرز، کارلنسر و غیره … استفاده کنید. حتی اگر فوراً شغلی پیدا نکنید، جستجوی شغل، فرصتی عالی برای تمرین مهارت‌های نرم خود مانند ایجاد ارتباطات، فوت و فن مذاکرات و توضیح تصمیم‌های پشت طرح‌هایتان است – دو ویژگی بسیار مهمی که کارفرماها معمولا به دنبال آن هستند. به باشگاه طراحان UI/UX خود آموخته خوش آمدید.در آخر باید چند مورد از تجربیات دیگه خودم که شاید کمتر کسی به شما بگه رو با شما در میون بذارم.– این کار نیاز به صبر و حوصله زیاد داره. توقع نداشته باشید که یک شبه به موفقیت برسید.– در هر سطح مهارتی و با هر تعدا سال تجربه که هستید هرگز از آموختن و بهبود مهارتهای خود غافل نشوید.– کارهای قدیمی تان را هرچند یکبار با آموخته های جدیدتان به روز کنید.– موفقیت مقصد خاصی نیست، مسیر است. تا وقتی در حرکتید موفقید.– اگر بعد از خوندن این مقاله هنوز ندونیم که چگونه طراح سایت شویم؟ سه کار دیگر نیز باید انجام دهیم تمرین، تمرین و باز هم تمرین. خانه خلاقیت مانایید خانه خلاقیت مانایید Wed, 09 Aug 2023 12:29:18 +0330 https://virgool.io/@manaid/5-%D8%A7%D8%B5%D9%84-%D8%A7%D8%B2-%D8%A7%D8%B5%D9%88%D9%84-%D9%85%D9%87%D9%85-ui-%D8%AF%D8%B1-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%A8%D8%B5%D8%B1%DB%8C-%D8%A8%D9%87-%D8%B3%D8%A8%DA%A9-%D8%B1%D8%A7%D9%85%D8%A8%D8%B1%D8%A7%D9%86%D8%AF-kchjnq4tyera خلاصه:پژوهش های گسترده در مورد سیستم ادراکی انسان در نهایت منجر به تولید اصول و قوانینی شد که امروزه کاربرد گسترده ای برای طراحی محصولاتی کاربردی تر برای انسان شده است. در این مقاله قصد داریم 5 اصل از اصول مهم UI در طراحی بصری را با بررسی تابلو نگهبانان شهر، اثر معروف رامبراند مورد بررسی قرار دهیم. مقیاس پذیری، سلسله مراتب بصری، تعادل، کنتراست و گشتالت مهمترین این اصول و قوانین هستند که نه تنها باعث جذابتر شدن طرح می شود بلکه در صورت استفاده درست، محصول طراحی شده را کاربردپذریرتر میکند.قبل از هر چیز به تصویر زیر نگاه کنید.تابلو نگهبانان شهر – شاهکاری از رامبراند اگر در مورد تابلو فوق از شما سوال کنند معمولاً بلافاصله آن را با کلماتی مانند جذاب، معمولی، قشنگ، زیبا و غیره… ارزیابی می کنید. شما این کار را بدون تعلل و فکر کردن انجام میدید( تقریبا در سطح غریزی) با این حال، اگر دلایل ارزیابی رو از شما سوال کنند تعداد اندکی میتونن دلیل جذابیت بصری یک چیدمان رو به زبان بیان کنند. اما واقعا چرا ما برخی از طراحی ها را خوب و برخی را بد یا معمولا ارزیابی می کنیم؟دلیل آن استفاده از اصول طراحی بصری است. این اصول معمولا اطلاعاتی در مورد اینکه که چگونه عناصر طراحی مانند خط، شکل، رنگ، شبکه یا فضا با هم ترکیب می‌شوند تا جلوه‌های بصری کاملی که بیان کننده تفکر طراح است را ارایه میکنند. درادامه این مقاله 5 اصل از اصول مهم UI در طراحی بصری را که بر UX و UI یک صفحه وب یا ظاهربرنامه (منظور از برنامه در این مقاله برنامکهای موبایلی و برنامه های دستکتاپی است) تأثیر می گذارند بیان میکنیم. مقایس(Scale)سلسله مراتب بصری (Visual hierarchy)تعادل (Balance)تضاد (Contrast)گشتالت (Gestalt)گرافیکهایی که از این اصول طراحی بصری به درستی استفاده کنند، می‌توانند میزان تعامل با کاربر یا کاربردپذیری رو افزایش بدهند و معمولا مخاطب اونها رو چشم نواز ارزیابی میکنه.1- مقیاس:یک از اصول مهم UI در طراحی بصری مقیاس یا تناسب است.  معمولاً در اغلب طرحها مورد استفاده قرار می گیرد. اصل مقیاس بیان کننده ایجاد تمایز و یا الویت بندی عناصر یک طرح بر اساس ابعاد نسبی آنهااست. یعنی با تغییر اندازه نسبی برخی آیتمهای یک طرح می توان آنها را مهمتر جلوه داد. یک طراح خوب به درستی می تواند از این اصل برای بیان تفکر خود بهره ببرد.تعریف: اصل مقیاس به استفاده از اندازه نسبی برای نشان دادن اهمیت و رتبه در یک ترکیب اشاره دارد. به عبارت دیگه، اگه از این اصل به درستی استفاده بشه، مهم ترین عناصر در یک طرح بزرگتر از عناصری هستند که اهمیت کمتری دارند. دلیل این اصل هم ساده است: وقتی چیزی بزرگ است، بهتر به چشم میاد، پس احتمال دیده شدن و مورد توجه قرار گرفتنش بیشتره.برگردیم به تابلو رامبراند. نقش اصلی داستان نهفته در این اثر کدام شخصیت است؟ درست حدس زدید دو نگهبانی که در مرکز تابلو و بزرگتر از شخصیتهای دیگر ( به خاطر نزدیک بودن به مخاطب) طراحی شده اند.اثر مقیاس در تابلو رامبراندنکته: در یک طراحی ایده آل معمولاً بیشتر از  3 اندازه مختلف استفاده نمی شه.  وجود طیف وسیعی از عناصر با اندازه های متفاوت باعث می شود که کاربر رابطه بین اهمیت و اندازه المانهای طرح را درک نکند. شما می توانید با طراحی المانها در 3 تا 5 اندازه ( به صورت ایده آل 3 اندازه) مختلف در طرح، یک سلسله مراتب بصری در صفحه ایجاد کنید (اصل سلسله مراتب بصری را ببینید).  وقتی در طراحی از این اصل به درستی استفاده شود، کاربر با اولین نگاه متوجه المانهای مهمتر میشه و متوجه می شود باید بر روی چه قسمتهایی تمرکز کند2- سلسله مراتب بصری:سلسه مراتب پرکاربردترین اصل از  اصول مهم UI در طراحی بصری است و به معنی تعیین اهمیت المانهای یک طرح با استفاده از مشخصات بصری آن مانند: رنگ، اندازه، جایگاه، فاصله و مقدار است.تعریف:  اصل سلسله مراتب بصری به هدایت چشم در صفحه اشاره داره تا به عناصر مختلف طراحی به ترتیب اهمیت آنها توجه بشه. همانطور که گفته شد سلسله مراتب بصری را می توان از طریق تغییرات در مقیاس، مقدار، رنگ، فاصله، جایگاه و انواع دیگری از ویژگی ها پیاده سازی کرد.اگر در مواجهه با یک صفحه به سختی می توانید بفهمید که کجای صفحه را ببینید یا برای مرحله بعد دقیقا کجا باید کلیک کنید ، به احتمال زیاد چیدمان آن سلسله مراتب بصری را به درستی رعایت نمیکند. برای ایجاد یک سلسله مراتب بصری واضح، بهتره از 2 تا 3 اندازه مختلف درحروف استفاده کنید تا به کاربران نشان دهید که کدام بخش از محتوا در صفحه مهمترین یا در بالاترین سطح است. یا، استفاده از رنگ‌های روشن و تیز را برای موارد مهم و از رنگ‌های مات یا کم رنگ برای موارد کمتر مهم در نظر بگیرید. یک قانون کلی این است که اجزای کوچک، متوسط ​​و بزرگ را برای هدایت چشم کاربر از عناصر با اهمیت بالاتر به طرف عناصر با اهمیت کمتر هدایت کنید.در شاهکار رامبراند. به وضوح یه ردیف انسان را به ترتیب اهمیت می توانید تشخیص دهید. ردیف اول دو نگهبان، ردیف دوم تعدادی شخصیت دیگر که در تعامل با این دو نگهبان هستند و ردیف سوم، چهار شخصیت که در پس زمینه قرار گرفته اند.نکته: شما می توانید همزمان با استفاده از چند ویژگی، سلسله مراتب بصری را در طرح خود ایجاد کنید مثلا در طرح زیر که مربوط به صفحه خدمات طراحی UI و UX در سایت مانایید است همزمان از رنگ، اندازه و جایگاه برای ایجاد سلسله مراتب بصری استفاده شده تا اهمیت عدد 60 و توضیحات مربوط به آن برای کاربر مشخص باشد.نکته مهم دیگر استفاده درست از جایگاه در سلسله مراتب بصری است. همه ما میدانیم جایگاه بالاتر یعنی اهمیت بیشتر. اما در مورد دو المان که به لحاظ ارتفاع جایگاه یکسانی دارند چطور؟ جواب به زبان صفحه و کاربر وابسته است اگر زبان صفحه مانند فارسی از راست به چپ باشد موقعیت راست ارجحیت بیشتری دارد ( مانند همین تصویر) اما اگر کاربر ما انگلیسی زبان باشد. صفحه را از چپ به راست اسکن میکنند. این یعنی قسمت چپ الویت بالاتری پیدا می کند.3- تعادل:تعادل مانند یک الاکلنگ است در طراحی باید به جای وزن، عناصر طراحی را متعادل کنیم. درست مانند متعادل کردن وزنه در ترازو (منظورم ترازوهای دو کفه ای قدیمی است. باید دهه شصتی باشی متوجه بشی من چی میگم)، اگر یک عنصر طراحی کوچک و یک عنصر طراحی بزرگ در دو طرف محور داشته باشید، طراحی کمی نامتعادل می شود. در هنگام ایجاد تعادل، نه فقط تعداد عناصر، مساحت گرفته شده توسط عنصر طراحی هم مهم است.تعریف: اصل تعادل به ترتیب یا نسبت توزیع متعادلی از عناصر طراحی در طرح اشاره دارد. تعادل زمانی اتفاق می افتد که در هر دو طرف یک محور خیالی که از وسط صفحه می گذرد، سیگنال بصری به طور مساوی (اما نه الزاما متقارن) توزیع شده باشد. این محور اغلب عمودی است اما ممکنه افقی هم باشد.محور خیالی که روی طرح خود ایجاد می کنید، نقطه مرجع برای نحوه سازماندهی چیدمان خواهد بود و به شما کمک می کند تا وضعیت فعلی تعادل در تصویر خود را درک کنید. در طراحی متعادل، هیچ ناحیه ای آنقدر چشم شما را جلب نمی کند که نتوانید قسمت های دیگر را ببینید (حتی اگر برخی از عناصر وزن بصری بیشتری داشته باشند و نقاط کانونی باشند). تعادل می تواند به صورت متقارن، نا متقارن، شعاعی، موزاییکی و یا ناسازگار باشد.متقارن:در تعادل متقارن، وزن بصری به طور مساوری در تمام کار توزیع می‌شود. برای رعایت این نوع تعادل، می‌توانید یک خط فرضی مستقیم از وسط طرح بکشید و تعادل را دو طرف این خط برقرار کنید. این نوع تعادل، بهترین کار برای ایجاد احساس نظم در کار است.نامتقارن:جالب است بدانید تعادل به این معنی نیست که همه چیز با هم متقارن باشند؛ بلکه گاهی نامتقارن بودن هم یک نوع تعادل محسوب می‌شود. چگونه؟فرض کنید در دو کفه ترازویتان دو جسم یکسان دارید و این دو کفه در یک راستا قرار گرفته‌اند. خب این یک نوع تعادل است. می‌توانید به جای این کار، روی هر یک از کفه‌های ترازو اجسامی با وزن‌های مختلف قرار دهید. روی کفه دیگر هم اجسامی کاملاً متفاوت قرار دهید؛ اما مجموع وزن این اجسام با کفه دیگر برابر باشند. قطعاً این هم روشی برای برقراری تعادل است. نامتقارن بودن عناصر در یک طرح گرافیکی می‌تواند حس حرکت و پویایی را برای مخاطب تداعی کند.شعاعی:در تعادل شعاعی، به جای این که یک خط عمودی یا افقی را به عنوان مرکز تقارن در نظر بگیریم، سعی می‌کنیم این تقارن را در کل کار داشته باشیم.در تعادل شعاعی اکثراً وسط تصویر را به عنوان مرکز تعادل در نظر می‌گیریم. و باقی عناصر را طوری می‌چینیم که نسبت به مرکز متعادل باشند.موزاییکی:در روش  موزاییکی یا کریستالوگرافیک، تعادل در طراحی گرافیک را مثل شکل یک کریستال می‌چینیم. در کریستال یک مولکول یکسان دائماً تکرار می‌شود. پس ما هم در طرحمان می‌توانیم یک عنصر یکسان را در جاهای مختلف تکرار کنیم.ناسازگار:گاهی اوقات می‌خواهیم کارمان را طوری طراحی کنیم که فکر بیننده را بیشتر درگیر کند. در چنین مواقعی می‌توانیم از تعادل ناسازگاری استفاده کنیم.در تعادل ناسازگاری، تمام کار را متعادل طراحی می‌کنیم غیر از یک بخش. ینی آن یک بخش با قسمت‌های دیگر ناسازگار است.مثال خوب این نوع تعادل در طراحی گرافیک، تایپوگرافیک‌ها هستند. گاهی در تایپوگرافی یک کلمه خاص را بزرگ‌تر از کلمات دیگر در نظر می‌گیریم.نوع تعادلی که در طرح خود استفاده می کنید به مفهومی که می خواهید منتقل کنید بستگی دارد. عدم تقارن پویا و جذاب است. باعث ایجاد حس انرژی و حرکت می شود. تقارن بی صدا و ایستایی را تلقین میکند وتعادل شعاعی همیشه چشم را به مرکز ترکیب هدایت می کند.برای آشنایی بیشتر با تعادل میتونید مطلب مفهوم تعادل در طراحی گرافیک را مطالعه کنید.با نگاهی به تابلو نگهبانان شب (تصویر زیر به راحتی متوجه تعادل به کار رفته در طرح کلی می شویم.نامتقارن بودن عناصر در یک طرح گرافیکی می‌تواند حس حرکت و پویایی را برای مخاطب تداعی کند.4- تضاد:یکی دیگر از اصول رایج مورد استفاده تضاد یا کنتراست است. با استفاده از تضادمی توان قسمت خاصی از طرح (یا قسمت خاصی از صفحه وب یا برنامه ) را برای کاربر متمایز کرد. با استفاده از ویژگی هایی مانند رنگ، اندازه و فاصله می توان تضاد ایجاد کرد.تعریف:کنتراست یا تضاد عبارت است از  قرار گرفتن یک عنصر با مشخصات متفاوت بصری در کنار عناصر دیگر به منظور متمایز کردن عنصر مورد نظر. به عبارت دیگر، کنتراست بین دو جسم (یا بین دو مجموعه از اشیا) تفاوت قابل توجهی (مثلاً در اندازه یا رنگ) ایجاد میکند تا بر متمایز بودن آنها تأکید کند. اصل کنتراست اغلب از طریق رنگ، فاصله و اندازه اعمال می شود.مثال بارز آن، رنگ قرمز اغلب در طراحی های UI ، برای  حذف، غیرفعال کردن، پاسخ منفی یا خاموش کردن استفاده می شود. رنگ روشن زمینه نشان می دهد که یک عنصر قرمز با بقیه متفاوت است.البته می توان تمایز را با ترکیبی از  ویژگی ها مشخص کرد. برای مثال در طرح زیر دگمه خرید طراحی شده هم از نظر اندازه و هم به لحاظ رنگ با دگمه ها دیگر متفاوت است.5- اصول گشتالت:اصول گشتالت  شناخته شده تریت اصول مهم UI در طراحی بصری رابط ههای کاربری و محصولات دیجیتالی انسان محور هستند. مجموعه ای از اصول که در اوایل قرن بیستم توسط روانشناسان گشتالت پایه گذاری شد. تحقیقات آنها درباره نحوه درک و تفسیر  انسان از دیدن تصاویر است.تعریف: اصول گشتالت توضیح می‌دهد که چگونه انسان‌ها تصاویر پیچیده‌ای را که از عناصر متعددی تشکیل شده‌اند، ساده‌سازی و سازمان‌دهی می‌کنند. مغز انسان به طور ناخودآگاه  به‌جای اینکه یک تصویر را به‌عنوان مجموعه‌ای از عناصر مجزا تفسیر کند، بخش‌های مختلف آن را در سیستم منسجمی دسته بندی کرده تا نهایت به یک تصویر  کلی برسد. به عبارت دیگر، اصول گشتالت گرایش ما به درک مفهوم کلی را در مقابل عناصر فردی نشان می دهد. چندین اصل گشتالت وجود دارد، از جمله تشابه، تداوم، گروه بندی کردن، اصل مجاورت، اصل منطقه مشترک، تصویر/زمینه، تقارن و غیره…چرا اصول مهم UI در طراحی بصری مهم هستند!؟رعایت این اصول، سوای اینکه باعث می شود طرحی”زیباتر به نظر می رسد”، درک و استفاده از آنها به موارد زیر کمک می کند:افزایش کاربرد پذیریپیروی از این اصول طراحی بصری اغلب منجر به طرح‌هایی  می‌شود که درک و استفاده از آنها آسان است. به عنوان مثال، نسبت طلایی، که اغلب در آثار هنری زیبا استفاده می شود، در حروفچینی نیز برای ایجاد تناسب بصری بین اندازه قلم، ارتفاع خط و عرض خط استفاده می شود.در نتیجه تعادل (از طریق فضای سفید) در صفحه وب ایجاد می‌کند و خواندن متن را آسان‌تر می‌کند. وقتی طراحی بصری با یک طراحی تعامل قوی همراه شود، میزان رضایت بخشی کاربر از  تعامل با طرح و نرخ موفقیت آن در رسیدن به اهدافش بیشتر می شود.انگیزاننده احساساتچیزهای زیبا باعث بروز احساسات مثبت می شوند. (در واقع، اثر زیبایی شناختی-کاربردی می گوید که وقتی افراد طرحی را از نظر بصری جذاب می یابند، ممکن است از اشتباهات جزئی در کاربردپذیری چشم پوشی کنند و آن طرح را اعلی رغم داشتم مشکلاتی، خوب ارزیابی کنند.) طراحان UI می توانند با استفاده از این اصل و ایجاد طراحی زیبا مشکلات احتمالی UX را پوشش دهند.تقویت برند آگاهییک سیستم بصری قوی و مطابق با اصول برندینگ علاوه بر معرفی درست برند و تقویت آن در ماندگاری،  اعتماد و علاقه کاربر را نسبت به استفاده از محصول افزایش می دهد.منبع: مانایید خانه خلاقیت مانایید خانه خلاقیت مانایید Sun, 30 Jul 2023 14:50:42 +0330 https://virgool.io/@manaid/%D8%AA%D9%81%DA%A9%D8%B1-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF-%D8%A2%D9%86-%D8%AF%D8%B1-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-uiux-qwrfynewdyuv تفکر طراحی یک رویکرد حل مسئله است که به کمک آن میتوان با درک کاربران و بررسی ایده های فرضیف  برای حل مشکلات موجود، راه حل های خلاقانه یافت. تفکر طراحی با استفاده از همدلی کردن با کاربر، نقاط ضعف محصول را شناسایی نموده و با تمرکز روی آن سعی در خلق ایده هایی جدید برای رفع آن مشکلات ارایه می کند. در نهایت پس از نمونه سازی اولیه و تست بر روی محصول پیاده سازی می شود. آشنایی با تفکر طراحی  یک اصطلاح است و صرفا برای طراحی کاربرد ندارد بلکه  در تمام حوزه های کسب و کار که نیاز به بهبود و توسعه دارد مانند طراحی رابط کاربری یا طراحی وب سایت ، کاربرد دارد. در این نوشته تلاش میکنیم بیشتر با  تفکر طراحی و کاربرد آن در طراحی سایت و رابط کاربری آشنا .تفکر طراحیتاریخچه تفکر طراحیاغلب تصور می شود تفکر طراحی مقوله ای جدید است که همزمان با طراحی دیجیتال شکل گرفته اما این تصور، اشتباه است. طراحی برای قرن ها انجام می شده: از طراحی حروف هیروگلیف گرفته تا بناهای تاریخی، پل ها، خودروها، سیستم های مترو و همه محصولاتی که به نوعی انسان ها کاربر نهایی بوده و به اصطلاح، انسان محور طراحی شده اند، نمونه ای از طراحی های کاربردی ایت که در طول تاریخ انجام شده . طراحان خوب همواره تلاش کرده اند از طریق فرآیندهای خلاقانه با تلفیق کاربری و طراحی، محصولاتی کاربردی خلق کنند. محصولاتی مانند گوشی نوکیا (مدل 3310)، آیفون، ویندوز، صندلی های ایمیز، فورد موستانگ مدل شلبی و بسیاری از نمونه های دیگر، محصولاتی بودند که طراحان آن با ایده های خلاقانه تلاش کرده اند علاوه بر حفظ زیبایی، یکی از نیازهای برآورده نشده مخاطب را برطرف کنند.تفکر طراحی چیست؟تفکر طراحی تعاریف مختلفی دارد. اما به طور کلی، یک فرآیند چرخه ای تکرارشونده است. که در نهایت منجر به ایجاد ایده‌های جدید وخلاقانه برای حل یک مسئله به شکلی نو آورانه باشد.  این نوآوری باید بتواند تمایز و مزیت ایجاد کند. این روش صرفا مختص صنعت طراحی، یا هر صنعت دیگر، سازمان و یا کسب‌وکار خاص نبوده و در تمام جنبه‌های زندگی می‌توان از آن بهره برد هرچند ما در این پست فقط به کاربرد آن در طراحی رابط کاربری می پردازیم.هدف از تفکر طراحی و کاربرد آن در طراحی سایت و رابط کاربری، خلق تجربه ای خوب و متفاوت در کنار زیبایی برای یک وبسایت یا رابط کاربری است که در نهایت منجر به رضایت و وابستگی کاربر به آن وب سایت یا رابط کاری می شود.چگونه : فرآیند تفکر طراحیگفتیم تفکر طراحی چرخه ای تکرار پذیر متشکل ازسه گام ؛ از 1) درک کردن، 2) کشف کردن و 3) عمل کردن است.  که هر کدام گام ها خود شامل دو مرحله است ( شکل ریز ).درک کردن شامل؛ همدلی و تعریفکشف کردن شامل؛ ایده پردازی و نمونه اولیهعمل کردن شامل؛ تست و آزمون و  پیاده سازیتفکر طراحی از سه فاز و شش مرحله مجزا تشکیل شده استدر ادامه مراحل تفکر طراحی و کاربرد آن در طراحی سایت  را بررسی و نقش هر یک از آنه را در طراحی یک رابط کاربری شرح می دهیم.مراحل تفکر طراحی و کاربرد آن در طراحی سایت:همدلی کردنهمدلی کردندر یک جمله یعنی خودتان را به جای کاربر قرار دهید. و تلاش کنید دانش خود را در مورد طرز فکر کاربرانتان، روش تعامل آنها با رابط کاربری که طراحی کردید و احساس آنها هنگام کار کردن با این رابط کاربری را افزایش دهید.تصور کنید هدف شما از به کارگیری تفکر طراحی در طراحی وب سایت، بهبود تجربه فرآیند خرید از یک فروشگاه آنلاین است. برای این کار، شما باید با طیف متفاوتی از کاربران واقعی صحبت کنید و به طور مستقیم آنچه را انجام می‌دهند، چه فکری می‌کنند و چه می‌خواهند را مشاهده کنید، از خودتان بپرسید که «چه چیزی باعث ایجاد انگیزه یا دلسردی کاربران می‌شود؟» یا «آن‌ها در کجا ناامیدی را تجربه می‌کنند؟» هدف، جمع‌آوری مشاهدات کافی است. نیازی به هزینه ها اضافی و جذب داوطلب نیست. دوستان، اقوام و آشنایان بهترین و در دسترس ترین کاربران برای این کار هستند.برای مثال: فرض کنید وب سایتی طراحی میکنید که مشتریان آن اغلب زنان خانه دار هستند (مثل لوازم آشپزخانه) باید طرح خودتان را در اختیار یکی دو نفر از زنان خانه دار فامیل بدهید و برای هر کدام یک سناریو فرضی تعریف و ماموریت آنها را مشخص کنید ( مثال: از کاربر بخواهید که فرض کند قصد خرید یک ست قابله گرانیتی طوسی رنگ را دارد) پس از آن تمام رفتار آنها را از ورود به سایت تا پایان مرحله خرید بررسی کنید.تعریف کردنتعریف کردننتایج حاصل از مشاهدات خود را جمع آوری کنید و مشکلات را شناسایی کنید. تعیین کنید کدام مشکل بحرانی تر است و بر اساس همین الویت بحرانی ترین مشکل را تعریف کنید. مشکلات می تواند خیلی ساده باشد. برای مثال: متن دگمه ای که کالا را به سبد خرید اضافه میکند گنگ است. یا خیلی پیچیده، برای مثال: کاربر هنگام کلیک کردن روی دگمه خرید متوجه نمی شود که محصول به سبد خریدش اضافه شده و یا در کجا به دنبال لینک تکمیل خرید بگردد.مثال قبلی را در نظر بگیرید. در کدام مرحله از فرآیند جستجو، بررسی و خرید محصولات، مشکل مشترکی در بین کاربران مختلف وجود دارد؟ یا کدام یک از مراحل جستجو، بررسی کردن و خرید کردن،  بیشترین مشکل را برای طیف خاصی از کاربران ایجاد میکند. یا به عبارتی کدام نیاز مخاطبان برآورده نمی شود.ایده پردازی کردنایده پردازی کردن در تفکر طراحیدر این مرحله هدف این است با ایده پردازی، برای مشکلات تعریف شده و نیازهای برآورده نشده کاربران راه حلی خلاقانه پیدا کنید. می توانید با کمک طوفان فکری و یا روش 9 گانه ایده یابی طیفی از ایده های دیوانه کننده و خلاقانه ایجاد کنید. به خود و تیم خود آزادی کامل بدهید. هیچ ایده ای را کاملا رد نکنید. به کمیت ایده ها بها بدهید نه کیفیت.در این مرحله، اعضای تیم خود را دور هم جمع کنید و ایده های مختلف را ترسیم کنید. سپس، از آن‌ها بخواهید که ایده‌های خود را با یکدیگر به اشتراک بگذارند، ایده ها را با هم ترکیب کنید، چیزی از آن کم کنید یا چیزی به آن بیافزایید و در نهایت ایده هایی که قابلیت اجرایی شدن داشته باشد را لیست کنید از میان آنها ایده هایی که بیشترین مزیت ها را دارد ( بر اساس ارزشهای شما یا سازمانتان) را انتخاب کنید.در مثال قبل برای حل مشکل دوم ایده ها می توانند به این صورت باشند: وقتی کاربر روی دگمه خرید کلیک کردن صدایی مانند افتادن پخش شود تا کاربر متوجه شود آیتم انتخابی به سبد خرید اضافه شده. یا با کمک انیمیشن تصویری از کالای انتخاب شده به یک گوشه (جایی که لینک تکمیل فرآیند خرید وجود دارد) حرکت کند و در سبدی قرار گیرد و ….ساخت نمونه اولیهساخت نمونه اولیهبرای هر کدام از ایده های خود یک نمونه اولیه طراحی کنید. هدف از این مرحله این است که بفهمید چه مؤلفه‌هایی از ایده‌های شما کار می‌کنند و کدام‌ها نه. در این مرحله باید ایده های کاربردی را بررسی کنید. همچنین با در اختیار گذاشتن این  ایده های جدید در اختیار طیف محدودی از کاربران میزان کاربردی بودن آنها را ارزیابی کنید.فرض کنید؛ یکی از ایده های انتخابی، طراحی یک صفحه فرود جدید است.  یک Wireframe ترسیم کنید و بازخورد داخلی از اعضای تیم و یا سازمانتان بگیرید. آن را بر اساس بازخورد ها تغییر دهید، سپس دوباره آن را با بدون رعایت اصول و استاندردهای سازمانی کد نویسی کنید.( منظور صرفه جویی در زمان است). سپس، آن را با گروه دیگری از افراد به اشتراک بگذارید. و نظرات آنها را نیز بگیرید. مجددا نمونه اولیه خودتان را ویرایش کنید و در اختیار اعضای تیم یا سازمانتان قرار دهید. این کار را تا جایی که محصول جدید مورد قبول دصد بالایی از اعضا قرار گیرد ادامه دهید. ( تعیین اینکه چه درصدی از افراد باید طرح را بپذیرند بر عهده خود شماست اما حداقل 70 درصد برای شروع خوب است.)تستمرحل تست در تفکر طراحیاز کاربرانی که ایده جدید شما را امتحان کرده اند بازخورد بگیرید. حتی میتوانید رفتار آنها را حین کار کردن با ایده جدید رصد کنید. بررسی کنید آیا این ایده این راه حلی مناسب برای برآورده کردن نیازهای کاربران هست؟ آیا احساس، نوع نگرش و یا انجام وظایف آنها را بهبود بخشیده است؟نمونه اولیه خود را  (به صورت محدود) در اختیار مشتریان واقعی قرار دهید. و بررسی کنید که به اهداف مورد نظز شما می رسند. آیا دیدگاه کاربران در هنگام ورود بهبود یافته است؟ آیا صفحه فرود جدید باعث افزایش زمان یا هزینه صرف شده در سایت شما می شود؟ احساس خوشایندی برای کاربران ایجاد میکند؟ می تواند به کاربران در انجام وظایفشان کمک کند؟ آیا همه‌ی چیزهایی که کاربر لازم دارد (در مورد طراحی صفحه فرود). بدون تفکر و پیچیدگی در دسترس است؟ شاید نیاز باشد در این مرحله باز هم تغییراتی در ایده خود بدهید.پیاده سازیپیاده سازیپس از حصول از نتایج موفقیت آمیز تست و اعمال آخرین تغییرات وقت آن است که ایده خود را بر روی محصول اصلی پیاده سازی کنید.این مهمترین بخش تفکر طراحی است، اما اغلب یا فراموش می شود! یا به درستی اجرا نمی شود.موفقیت نگرش تفکر خلاق در گروی اجرای خوب است. ممکن است بتوانیم مسلئله را بدرستی تعریف کنیم، و ایده ای ناب برای حل آن بیابیم که نتایج و بازخورد های خوبی در مرحله تست به ما بدهد اما بنا به دلایلی متعدد نتوانیم آن را به دستی اجرا کنیم. عدم هماهنگی و نداشتن درک مشترک در بین تیم های مختلف به ویژه تیمی که مسوول اجرایی نمودن ایده است، تعصبات و یا محدودیت ها ی سازمان، عدم اطمینان مدیران و متقاعد نشدن آنها و بیساری موارد دیگر باعث می شود که پیاده سازی یا اجرای ایده به درستی انجام نشود.میزان موفقیت تفکر طراحی را می توان با میزان تغییرات که در رفتار کاربر نهایی ایجاد میکند اندازه گیری کرد شاخص هایی مانند نرخ جذب، میزان فروش، میزان بازدید، میزان کاربران ثبت نام کرده و میزان زمان سپری شده در وب سایت یا اپ توسط کاربر از جمله شاخص هایی است که می توان توسط آنها میزان موفیقت تفکر طراحی را ارزیابی نمود.چرا  – مزیت تفکر طراحی در طراحی سایتچرا باید به فکر توسعه محصول و رفع نواقص اون باشیم؟ خوب چرا نباشیم؟ دلایل زیادی داره که باید همواره محصول خودمون رو توسعه بدیم دلایلی که خودش نیاز به یه مقاله جداگانه داره. پس تا وقتی اون مقاله نوشته نشده این نکته رو به عنوان یه مسئله بدیهی بپزیزیم که محصول ما همواره نیاز به توسعه و بازنگری داره.اما این یک فرآیند کاربر محور است که با گرفتن داده های کاربر شروع میشه، از دل داده ها مشکلات و نیازهای واقعی کاربر، نه تصورات ما، استخراج میشه و با استفاده از تخصص جمعی و زبان مشترک در بین تیمها یا کارکنان منتج به نمونه های اولیه توسعه میشه و اون نمونه اولیه در اختیار کاربران قرار میگیره و نتایج ارزیابی میشه.یاکوب نیلسن می‌گوید: «یک ایده فوق‌العاده که مشکل اشتباهی را حل می‌کند در نهایت با شکست مواجه می‌شود.» هدف از تفکر طراحی، جمع آوری انرژی‌های خلاق و متمرکز کردن آن روی مشکل یا مسئله تعریف شده است .انعطاف پذیری – سازگاری با نیازهافرآیند تفکر طراحی، فرآنید خوشایندی به ویژه در سازمانهای بزرگ نیست. نباید به آن به عنوان یک دستور العمل پر جزییات  که باید بند به بند آن را اجرا کرد، نگاه کنید. در عوض به آن به عنوان یک نگرش، یک فرهنگ سازمانی یا یک ابزار پشتیبانی نگاه کنید که در هنگام بروز مشکل به کمک شما می آید. مانند دستور تهیه غذا در یک رستوران. شما باید مانند یک سر آشپز حرفه ای عمل کنید نه یک آشپز خط تا بتوانید در موقع لزوم تغییراتی در دستور غذا اعمال کنید.باید به فرایند تفکر طراحی به عنوان یک فرآیند چرخه ای نگاه کنید نه یک فرآیند خطی و مستقیم. بازگشت به مراحل درک، همدلی و یا تعریف، پس از ایجاد و آزمایش یک نمونه اولیه کاملا معمول و رایج است (شکل زیر). چرا که تا زمان تست نمونه های اولیه هنوز ایده ها به صورت واقعی و توسط کاربران واقعی مورد ارزیابی قرار نگرفته است. فقط در مرحله تست است که می توانید به دقت ارزیابی کنید که آیا راه حل(های) شما واقعاً کار می کند یا خیر. حتی بازگشت به مرحله تحقیقات کاربر  و استفاده مجدد از داده ها می تواند بسیار مفید باشد. برای تصمیم گیری یا اولویت بندی در مورد ایده ها و توسعه محصول باید از خود سوال کنید؛ آیا لازم است چیز دیگری در مورد کاربر بدانیم؟ چه موارد استفاده جدیدی از نمونه اولیه ایجاد شده که قبلاً در مورد آنها تحقیق نکرده ایم؟تکرار، تکرار و تکرارممکن است چندین و چند بار مرحله همدلی تا تست را تکرار کنید تا در نهایت بتوانید از آن عبور کنید و سرانجام به مرحله پیاده سازی برسید.به عنوان مثال، در مرحله تعریف، با توجه به اینکه اعضای مختلف تیم سوابق و تخصص های متفاوتی رویکردهایی متفاوت نسبت به شناسایی و تعریف مشکلات دارند.پس طبیعی است که زمان زیادی را در مرحله تعریف مشکل صرف کنید، نکته اینجاست که همواره باید تیمتان را پر انگیزه و متمرکز نگه دارید نباید کشمکش ها و تفاوت دیدگاه ها باعث خستگی و فرسودگی تیمتان شود. در نهایت باید در هر مرحل به نتیجا ی جامع و کامل برسید و این نتیجه باید آنقدر مطمئن باشد که به عنوان یک راصل راهنما در مرحله بعد استفاده شود.مقیاس پذیری – بزرگتر فکر کنید.شما می توانید تفکر طراحی را در مورد تمام جنبه های سازمانی و اقتصادی، زیست محیطی و هر جنبه‌ی دیگری که نیاز به بهبود دارد، استفاده کنید. ماهیت تفکر طراحی و روش اجرا و پیاده سازی اش، آن را به یک فرآیند مقیاس پذیر تبدیل کرده است. یعنی در هر سازمانی با هر ابعاد و هر سیستم تفکری قابل پیاده سازی و قابل درک باشد. تفکر طراحی و کاربرد آن در طراحی سایت نیز از همین اصل پیروی میکند  مهم نیست وب سایتی که طراحی میکنید چقدر کوچک و یا چقدر بزرگ باشد، به وسیله تفکر طراحی تقریبا هر وب سایتی را می توانید به بهترین شکل، طراحی کنید. پیروی از تفکر طراحی نیاز به تخصص و دانش خاصی ندارد. همین سادگی و سهولت پیاده ساری آن نیز یکی دیگر از مزیت های آن به شمار می رود.نتیجه گیریما در عصری زندگی میکنیم که کالاها و خدمات جدید رو به روز جدید تر و به روز تر می شوند. تکامل محصولات و خدمات و ماهیت پیچیده روز افزون اطلاعات مورد نیاز برای استفاده از این محصولات و خدمات مجموعه ای جدید از نیازهای برآورده نشده را به وجود می آرود. تفکر طراحی ابزاری مناسب برای حل مشکلات و مسائل مربوط به این نیاز هاست و قطعا ابزاری لازم برای افزایش میزان موفقیت پیشرفت نوآوری است. از این رو آشنایی با آن و پیاده سازی آن در فرآیندهای توسعه محصول و سازمان برای تضمین موفقیت امری ضروری به نظر می رسد در آینده بیشتر در رابطه با تفکر طراحی و کاربرد آن در طراحی سایت و رابط کاربری صحبت خواهیم کرد.منبع و لینک اصلی مقاله : وب سایت مانایید خانه خلاقیت مانایید خانه خلاقیت مانایید Tue, 18 Jul 2023 10:16:36 +0330 https://virgool.io/DesignersCommunity/%D8%AA%D8%A6%D9%88%D8%B1%DB%8C-%D8%B1%D9%86%DA%AF-%D9%85%D8%A8%D8%A7%D9%86%DB%8C-%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8-%D8%B1%D9%86%DA%AF-%D8%A8%D8%B1%D8%A7%DB%8C-%DB%8C%DA%A9-%D8%B1%D8%A7%D8%A8%D8%B7-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C-%D9%82%D8%B3%D9%85%D8%AA-%D8%AF%D9%88%D9%85-cfdgx8gip5zp از تابلوی ایده (معادل واژه Mood board) برای پیدا کردن رنگ استفاده کنیدمود بُرد (Mood board) تابلويی است كه طراحان با جمع آوری مجموعه ای از عكس ها، الگوها، رنگها، نوشته ها و هر المان بصری كه قبل از شروع يك پروژه طراحی، الهامبخش است و به آنها ایده میدهد ایجاد میکنند. تابلویی که منابع بصری را برای پروژه های مختلف طراحی اعم از معماری، طراحی داخلی، گرافیک، مد و … جمع میکند. هدف آن بیان تفکرات، نوع احساس و سلیقه فردی از طریق اشیا، نمونه های متریال و تصاویر است. تابلوی ایده مجموعه ای از الهامات بصری هستند.  این تابلو می تواند برای انتخاب تقریباً هر تصمیم طراحی بصری، از جمله رنگ، بسیار مفید باشند. اگر تصویر یا عکسی را پیدا کردید که حال و هوا و ترکیب رنگی آن رادوست داشتید، می توانید از ابزاهایی مانند Coolors برای دریافت ترکیب رنگ  آن استفاده کنید. این ابزار آنلاین، ابزاری پر قدرت برای ارایه انواع پالتهای رنگی می باشد. همچنین وب سایتهایی مانند پینترست یا دریبل با امکان ایجاد بورد ابزارهایی مناسب برای ایجاد مود بردهای مختلف اند.نمونه ای از یک تابلوی ایده ایجاد نقاط کانونی با استفاده از رنگقابلیت انتقال سریع اطلاعات (اسکن صفحه توسط کاربر) برای طراحی وب نه تنها امتیاز خوب بلکه ضروری است. بازدیدکنندگان باید بتوانند اطلاعات مورد نیاز خود را در یک نگاه پیدا کنند.  با استفاده درست از رنگ ها می توانید این نکته را در طراحی های خود پیاده سازی کنید، چرا که رنگ ها می توانند به خوبی  چشمان کاربر را به سمت هدف (منظور همان CTA یا دگمه فراخوان صفحه است) هدایت کنید. به عنوان مثال، می توانید از رنگ متضاد برای دکمه فراخوان استفاده کنید تا وزن بصری بیشتری به آن ببخشید و در نتیجه آن را مشخص تر کنید.اگر بخواهیم المانی را متمایز و برجسته کنیم، می توانیم از تضاد رنگ ها استفاده کنیم. به عنوان مثال، Mailchimp از رنگ های متضاد برای هدایت توجه به دکمه فراخوان استفاده می کند تصمیم بگیرید که چه زمانی و چگونه از رنگ های زنده و ملایم استفاده کنید بیشتر رنگ ها میتوان به یکی از این دو دسته تقسیم کرد می شوند: تند و تیز یا ملایم.و ملیح که بسته به ماهیت پروژه خود، می توانید از گروه اول یا دوم استفاده کنید رنگ‌های تند رنگ‌هایی هستند که کاملا از پس‌زمینه متمایز می‌شوند و میزان انرژی زیادی را منتقل میکنند این رنگها میزان اشباع شدگی یا غلظت رنگ (معادل Saturation) بالایی دارند دارند. این رنگ ها برای انتقال حس پرانرژی عالی هستند و برای شرکت هایی که می خواهند خود را با شیوه ای به روز و پرهیاهو معرفی کنند، انتخاب خوبی است. این رنگها برای شرکتهای مرتبط با خودرو و خودرو سازی، موتورسازی، ارایه کننده محصولات ورزشی، محصولات خوراکی صنعتی و غیره… مناسب است.تداعی کردن تحرک و پویایی در صفحه فرود با کمک رنگ های متضاد می کند. از طرف دیگر رنگ های ملایم با طرح ترکیب می شوند و به انتقال حس آرامش کمک می کنند و  به کاربران کمک می کند احساس راحتی کنند. این رنگها غلظت رنگ کمتری دارند و برای کسب و کارهای متناسب با دکوراسیون، پوشاک، محصولات طبیعی و ارگانیک، محصولات مرتبط با گل و گیاه و غیره… مناسب است.صفحه محصولات که با استفاده از رنگ های پاستلی با تم خاکی حس آرامش را القا می کند. در نهایت، شما باید انتخاب رنگ خود را بر اساس آنچه که می خواهید مشتریانتان هنگام تعامل با محصول شما احساس کنند، قرار دهید.دسترس پذیری را فراموش نکنید:طراحی فقط در مورد زیبایی شناسی نیست. طرح خوب، طرحی است که  عملکرد و قابلیت استفاده  بالایی داشته باشد.هنگام طراحی UI، باید برای افراد با توانایی ها و معلولیتهای مختلف قابل استفاده  باشد. یکی از چالش‌هایی که طراحان UI هنگام کار با رنگ‌ها با آن مواجه می‌شوند، در نظر گرفتن نحوه تعامل افراد مبتلا به کوررنگی یا کمبود دید رنگ (CVD) در تعامل با محصول طراحی شده است.چرخ‌های رنگی در تصویر بالا تفاوت درک رنگها را برای افرادی با بینایی معمولی (سمت چپ) و همان رنگ‌ها را در کسانی که کورنگی (کمبود حسگرهای رنگ قرمز-سبز) دارند (وسط و راست) نشان می دهد.در اینجا دو نکته برای طراحی با رنگ وجود دارد: هرگز از رنگ به تنهایی برای انتقال معنا و مفهوم استفاده نکنیدو همواره در کنار رنگ از نشانه بصری برای برقراری ارتباط مخاطب با محصول طراحی شده استفاده کنید. به عنوان مثال، هنگامی که یک پیام خطا نشان می‌دهید، از رنگ قرمز در کنار متنی که می‌گوید «این فیلدها الزامی قرمز هستند» استفاده نکنید. در عوض، میتوانید یک علامت قابل مشاهده (مانند یک ستاره *) اضافه کنید و توضیحی اضافه کنید که: “فیلدهای الزامی به رنگ قرمز هستند و با * مشخص شده اند.”برخی از کاربران کم بینا نمی توانند کاراکترهای قرمز یا سبز را ببینند، بنابراین در استفاده از این رنگ ها به تنهایی برای انتقال اطلاعات خودداری کنید. از طراحی متن با کنتراست پایین دوری کنیددر نظر گرفتن رنگ فونتی با کنتراست  کم نسبت به رنگ زمینه چه در یک پارگراف باشد یا بک دگمه، می تواند خواندن متن را بسیار دشوار کند. دستورالعمل های دسترسی به محتوای وب (WCAG) توصیه می کند که نسبت کنتراست پس زمینه به متن حداقل 4.5:1 باشد.خواندن متن با کنتراست پایین معمولا دشوار است و می تواند منجر به تجربه کاربری ضعیف شود وقتی صحبت از دسترس‌پذیری می‌شود، توصیه می‌کنیم از Color Contrast Checker و شبیه‌ساز دید NoCoffee برای Chrome استفاده کنید. ابزار اول به شما کمک می‌کند ترکیب رنگ‌های خود را مطابق دستورالعمل‌های WCAG بررسی کنید، در حالی که ابزار دوم به شما این امکان را می‌دهد که خودتان هنگام طراحی، کوررنگی را تجربه کنید! مانند تصویر زیر؛تجربه کورنگ با استفاده افزونه NoCoffee برای مرورگر کروم جمع بندیرنگ تنها یکی از ابزارهایی است که طراحان کار کردن با آن را دوست دارند اما در عین حال، یکی از ابزارهایی است که تسلط بر آن دشوار است. نکات ذکر شده در بالا، پایه و راهنمای خوبی برای شماست، اما تنها راه برای بهبود، تسلط بر مهارت ایجاد ترکیب های رنگی عالی از طریق مشاهده و تمرین کردن است.این یک مقاله از وب سایت مانایید است خانه خلاقیت مانایید خانه خلاقیت مانایید Fri, 03 Mar 2023 14:09:32 +0330 https://virgool.io/DesignersCommunity/%D8%AA%D8%A6%D9%88%D8%B1%DB%8C-%D8%B1%D9%86%DA%AF-%D9%85%D8%A8%D8%A7%D9%86%DB%8C-%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8-%D8%B1%D9%86%DA%AF-%D8%A8%D8%B1%D8%A7%DB%8C-%DB%8C%DA%A9-%D8%B1%D8%A7%D8%A8%D8%B7-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C-%D9%82%D8%B3%D9%85%D8%AA-%D8%A7%D9%88%D9%84-xhmnp0zswq7x چکیده:اغلب مردم فکر می کنند انتخاب رنگ(ها) برای یک رابط کاربری به حل طراحی، سلیقه، حس زیبا شناسی یا خلق و خوی طراحی بستگی داره. این یک تصور غلط است چرا که پروسه‌ی انتخاب رنگ(ها) پیچیده تر از این تصور ساده است. معمولا در هنگام انتخاب رنگ (ها) برای یک رابط کاربری باید با تئوری رنگ آشنا بود.رنگ یکی از قدرتمندترین ابزارهای ارتباط بصری است که می تواند بر احساسات، خلق و خو، رفتار و تصمیمات ما تأثیر بگذارد. به همین دلیل برای طراحان محصول بسیار مهم است که رنگ ها را با دقت انتخاب کنند. در این مقاله، ما اصول تئوری رنگ را برای طراحان بررسی می‌کنیم و اطلاعاتی را برای کمک به شما در طراحی طرح‌هایی که به لحاظ بصری موثر و جالب باشد، ارایه میکنیم.مبانی انتخاب رنگ برای یک رابط کاربریتئوری رنگ چیست؟رنگ بخش مهمی از تعامل انسان با رایانه است و مانند سایر عناصر همچون تایپوگرافی، طراحان باید رنگ ها را با دقت انتخاب کنند. نمودار رنگ اصطلاحی است که طراحان برای توصیف ترکیب رنگ هایی که در طراحی رابط کاربری گرافیکی به کار برده اند، استفاده می کنند. از آنجا که بی نهایت ترکیب رنگی وجود دارد، تصمیم گیری در مورد اینکه چه طرح رنگی برای محصول شما بهترین عملکرد را دارد واقعا سخت و پیچیده است.  اینجاست که تئوری رنگ به کار می آید، رشته ای که به ما کمک می کند ترکیب رنگی متعادل و موثر را انتخاب کنیم. در ادامه چند توصیه عملی از تئوری رنگ ارایه میکنیم که به شما کمک می کند ترکیب رنگ های قدرتمندی را برای سیستم طراحی خود انتخاب کنید.محدود کردن تنوع رنگهادستیابی به هارمونی در ترکیب رنگ ها یکی از اصول اصلی تئوری رنگ است.شاید بارها شده که هنگامی ایجاد یک طرح جدید وسوسه بشید که از طیف گستره از از رنگها استفاده کنید. اما بهتر است از این وسوسه دوری کنید. چرا؟ زیرا وقتی از رنگ های زیاد استفاده می کنید، رسیدن به تعادل بصری واقعاً دشوار خواهد شد و کاربران خود را به راحتی سردرگم خواهید کرد.پس چگونه از این امر اجتناب کنیم؟ جدول ترکیب رنگ خود را تا جای ممکن ساده نگه دارید و حداکثر دو یا سه رنگ به عنوان رنگ های اصلی انتخاب کنید. برخی از طراحان فکر می کنند که دو یا سه رنگ خلاقیت آنها را محدود می کندو به اصطلاح دست و پای آنها را می بندد.  اما این یک ذهنیت اشتباه است. به وسیله بازی با سایه ها و ته رنگ های همان دو یا سه رنگ ها می توان ترکیب های بصری جالبی ایجاد کرد.  درک طرح های ساده نیز برای کاربران راحت تر و سریع تر خواهد بود.نمونه پالت رنگی ایجاد شده توسط تک رنگ قرمز انتخاب رنگ با استفاده از چرخه رنگگام بعدی چگونگی انتخاب درست رنگهاست. اغلب طراحان معمولاً برای منظور از چرخه رنگ استفاده میکنند. چرخه رنگ شامل رنگ‌های اصلی (قرمز، زرد، آبی)، رنگ‌های ثانویه (ترکیبی از رنگ‌های اصلی شامل؛ نارنجی، سبز و بنفش) و رنگ‌های سوم (رنگ‌هایی است که از ترکیب قسمت‌های مساوی یک رنگ اصلی و یک رنگ ثانویه ایجاد می‌شوندمانند؛ لیمویی، حنایی، زرد نخودی).چرخ 12 پره انتخاب رنگ کلاس بندی رنگدانه های انتخابی برای انتخاب رنگ اصلی، رنگ فرعی، رنگ سوم و جهارم در اینجا سه نوع از ترکیب رنگی پرطرفدار رو که می توانید با چرخه رنگ ایجاد کنید برای مثال آوردیم :تک رنگ یا مونوکروم: ترکیب رنگی تک رنگ از یک رنگ با تنوع  سایه‌ها و تن‌های آن استفاده میکند.طرحهای تک رنگ ساده و برای چشم انسان بسیار راحت و قابل فهم است. از آنجایی که رنگ ها به خوبی با هم هماهنگ هستند حسی آرامش بخش و راحت برای مخاطب ایجاد میکنند.مثالی برای پالت تک رنگ متشابه: ترکیب رنگی متشابه از چند رنگ مرتبط استفاده می کنند – یک رنگ رنگ غالب است، در حالی که بقیه از آن پشتیبانی می کنند. رنگ های حمایت کننده طرح را غنی تر و به لحاظ بصری جذابتر می کنند.نمونه ای از پالت رنگ مشابه ایجاد شده از سه رنگ که در چرخه رنگ به یکدیگر نزدیک هستند. مکمل: در ساده ترین حالت، ترکیب رنگ مکمل تنها از دو رنگ متضاد (به عنوان مثال، یک رنگ سبز غالب و یک رنگ قرمز) تشکیل شده است. اگر می خواهید توجه را به خود جلب کنید، این طرح به خوبی کار می کند.نمونه ای از پالت رنگ مکمل. خانه خلاقیت مانایید خانه خلاقیت مانایید Tue, 28 Feb 2023 08:27:20 +0330 https://virgool.io/@manaid/25-%D9%86%DA%A9%D8%AA%D9%87-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%AC%D8%A7%DB%8C%DA%AF%D8%B2%DB%8C%D9%86%DB%8C-%D8%B5%D9%81%D8%AD%D9%87-%D8%A8%D9%86%D8%AF%DB%8C-%D9%BE%D9%8E%D8%AC%DB%8C%D9%86%D9%90%DB%8C%D8%B4%D9%90%D9%86-%D8%AF%D8%B1-%D8%B5%D9%81%D8%AD%D8%A7%D8%AA-%D9%81%D9%87%D8%B1%D8%B3%D8%AA-%D9%88-%D8%AF%D8%B3%D8%AA%D9%87-%D8%A8%D9%86%D8%AF%DB%8C-q8gnfvbrfxez چکیده:بسیاری از سایت‌های فروشگاهی برای صفحه بندی محصولات خود از روشهایی با “نرخ تعامل کمتر” نسبت به صفحه‌بندی سنتی (پجینیشن) استفاده می کنند.موقع طراحی یک صفحه برای بارگزاری پستها یا محصولات زیاد، حتما این سوال برای شما پیش اومده که برای این صفحه باید از کدام روش صفحه بندی استفاده کنم؟ پاسخ کوتاه:  بستگی به تعداد محصولات قابل نمایش شما دارد.صفحه‌بندی سنتی (پجینیشن)صفحه‌بندی سنتی شامل تقسیم فهرستی از آیتم‌ها به چند صفحه است که هر صفحه شامل تعداد ثابتی از آیتم‌ها است. برای دیدن گزینه های بیشتر، کاربران باید معمولاً با کلیک کردن “بعدی” یا شماره بعدی در بالا یا پایین صفحه موجود  به صفحه بعدی بروند –. هر صفحه شماره گذاری شده است و کاربران می توانند با انتخاب دکمه های مربوطه به صفحات شماره خاصی حرکت کنند.فروشگاههای بزرگ مانند دیجیکالا با تعداد زیاد آیتم به منظور کنترل‌ بهتر محصولات ارایه شده و راحتی کاربر بهتر است از همین کنترل کننده صفحه‌بندی سنتی ( پجینیشن Pagination ) استفاده کنند چرا که این کنترل‌ها هنگام جستجو و مرور مجموعه‌های عظیم محصولاتشان، کنترل دقیقی را ارائه می‌دهند. سایت فروشگاهی زنبیل از این روش برای صفحه بندی محصولات خود استفاده میکند. سایت‌هایی با تعداد محصولات کم یا عملکرد بارگیری خوب ممکن است بتوانند به سادگی همه محصولات را به صورت بارگزاری تدریجی (معادل  lazy loading ) دریک صفحه بارگیری کنند. در این روش وقتی کاربر به انتهای لیست محصولات بارگزاری شده می رسد، به طور اتوماتیک تعداد بیشتری از محصولات بارگزاری می شوند. این فروشگاه قهوه ملو از این روش استفاده میکند.به طور کلی اگر صفحه  شما قرار است  تعداد کمی آیتم  ( به طور میانگین کمتر از 100) یا متوسط (بین 100 تا 300)  را بارگزاری کند ​ ، بهتر است  به جای پجینیشن از “دکمه های بارگذاری تدریجی” یا “نمایش محصولات بیشتر”  و یا بارگزاری تدریجی (lazy loading)استفاده کنید.صفحه بندی سنتی یا pagination نمایش دکمه های بیشتربرخی دیگر از سایتهای فروشگاهی به جای صفحه‌بندی سنتی یا بارگذاری بی‌نهایت، دکمه‌ “بارگزاری موارد بیشتر” را در پایین صفحات فهرست خود قرار می‌دهند.  برچسب این دگمه ها می تواند  “بیشتر ببینید” “بارگذاری بیشتر” ” مشاهده محصولات بیشتر ” یا ” بارگزاری موارد بیشتر ” باشد. این روش در مقایسه با صفحه بندی سنتی  به لحاظ تجربه کاربری (UX) بارشناختی و نرخ تعامل کمتری دارد، چرا که معمولا پیمایش خطی محصولات برای کاربر راحتتر است. علاوه بر این، کلیک کردن بر روی یک دگمه تنها و بزرگ پیچیدگی کمتری نسبت به تعداد زیادی دگمه کوچک و درهم دارد. تفاوت اساسی بین این روش  و  روش بارگذاری تدریجی این است که مخاطب باید برای بارگیری مجموعه بعدی محصولات، به جای بارگیری خودکار آنها، خودش اقدام کند. بنابراین، در مقایسه با بارگذاری بی‌نهایت، دکمه‌های “بارگزاری بیشتر” مدیریت بارگزاری موارد بیشتر را در اختیار کاربر گذاشته و علاوه بر آن اجازه دسترسی به فوتر سایت را می‌دهند. استفاده از این روش روز به روز محبوبتر و فراگیر تر می شود ، حتی Google هم به‌جای صفحه‌بندی در صفحات نتایج تلفن همراه شروع به استفاده از این روش کرده است ( البته روش گوگل در اصل تلفیقی از بارگزاری خودکار و بارگزاری به وسیله دگمه است).ما همیشه گفتیم کار شرکتهای دیگه رو (به دلایل زیادی) کپی نکنید اما گوگل یک استثنا است. صرفاً به دلیل اینکه طراحی و تغییرات طراحی در محصولات گوگل نتیجه بازخورد تعداد زیادی کاربر با طیف گسترده ای از سطح  ویژگی ها است.این روش به کاربران امکان می‌دهد بدلخواه موارد بیشتری را بارگیری کنند یا نه. از این رو برای آن دسته از کسانی که از اینترنت همراه استفاده میکنند و نمیخواهند محصولات اضافی را به دلیل مصرف اینترنت یا سرعت بارگزاری پایین  به طور مداوم بارگیری کنند، خوب است. همانند متد بارگزاری خودکار بهتر است برای خلق تجربه کاربری بهتر موارد مانند  “تعداد کل اقلام موجود در مجموعه”،  “تعداد محصول بارگزاری شده ” و ”    تعداد محصول برای بارگذاری در مجموعه “ را در معرض دید کاربر قرار دهید. اینگونه کاربر متوجه می شود کجای لیست محصولات قرار دارد و  چه موقع به انتهای لیست رسیده است.چه از بارگزاری تدریجی استفاده میکنید چه از  دگمه “بارگزاری بیشتر“، مطمئن شوید که صفحات فهرست شما از pogo sticking پشتیبانی می‌کنند . منظور این است وقتی کاربر پس از پیمایش لیست ،محصولی را انتخاب کرد و وارد صفحه آن شد. چنانچه دگمه برگشت را زد به همان قسمت از لیست برگردد و برای یافتن موقعیت خود مجبور به اسکرول کردن دوباره یا زدن دگمه بارگزاری ببیشتر به صورت پیاپی نشود. این کار به ویژه برای کاربرانی که عادت ندارند جزییات محصولات را در تب جدید باز کنند، بسیار کلافه کننده خواهد بودبارگذاری تدریجیبرخی از وب سایتهای فروشگاهی تنهایک صفحه فهرست محصول طراحی می‌کنند که به طور مداوم و خودکار  موارد بیشتری را هنگام حرکت کاربران به پایین صفحه بارگیری می‌کند. پیمایش بی نهایت یا بارگزاری تدریجی (که با اسکرول کردن کاربر به انتهای صفحه به صورت خودکار اتقاق می افتد) برای سایت های فروشگاهی با قابلیت زیر کاربردی تر است:تعداد نسبتاً کمی از محصولات در هر مجموعه (معمولاً کمتر از 40 محصول)ارایه گزینه های مناسب برای فیلتر کردن و کمک به کاربران برای محدود کردن مجموعه نتایجبارگزاری تعداد مشخصی از آیتمها  (“مثلا 50  مورد”)این راه‌حل برای سایت‌هایی با دسته بندی هایی که دارای تعداد محدودی محصول هستند عالی است اما برای سایت‌هایی با محصولات زیاد باید از اسکرول بی‌نهایت به دو دلیل اجتناب شود؛دسترسی  کاربران به فوتر و اطلاعات آن سخت و عذاب آور می شود.وقتی صفحه شامل تعداد زیادی محصول است کاربران ممکن است دچار سردرگمی شوند و متوجه نشوند که در کجای لیست محصولات قرار دارند.مشکل دسترسی به فوتراز آنجایی که در بارگزاری بینهایت همواره با اسکرول کردن کاربر به پایین صفحه موارد جدیدی اضافه می‌شوند، کاربران نمی‌توانند به قسمت فوتر دسترسی پیدا کنند. در سایت‌هایی که از بارگزاری تدریجی استفاده میکنند، اغلب برای کاربرانی که قصد دسترسی به فوتر را دارند خسته کننده و مشکل‌زامی شود. وقتی از  بارگذاری تدریجی برای تعداد زیادی محصول استفاده کنید وب سایت شما تبدیل به یک کابوس برای کاربر می شود. چرا که کاربر مجبور می شود برای رسیدن به فوتر (پاورقی) به مدت 15 دقیقه اسکرول کند! در حالی که پاورقی بنا بر رسالت خود (سیاست بازگشت کاربر به سایت) میبایست به راحتی در دسترس باشد تا بتواند اطلاعات مربوط به فرآیند خرید حمل و نقل و بازگشت محصول، اطلاعات تماس و غیره … را در اختیار کاربر قرار دهد.نقشه راهنما داشته باشید!یکی از نکات مهم در متد بارگزاری تدریجی نمایش تعداد کل محصولات در صفحه دسته بندی است که متاسفانه اغلب نادیده گرفته می شود ( تصور کنید کاربر نمی داند چه تعداد محصول در این صفحه نمایش داده می شود و در میانه بارگزاری به دلیل وجود ترافیک بالا، افت سرعت اینترنت و مسائل دیگر بارگذاری کمی با تاخیر انجام شود. در این حالت ممکن است کاربر صفحه را به تصور اینکه کل محصولات نمایش داده شده اند ترک کند بدون اینکه محصول مورد نظر خود را پیدا کرده باشد) پیشنهاد ما مشخص کردن تعداد محصولات در بالای هر صفحه سمت راست ( برای سایتهای فارسی زبان) یا در کنار گزینه های فیلتر می باشد. (متاسقانه من در وب سایتهای فارسی ندیدم نمونه ای اگر کسی نمونه ای سراغ داره لطفا به من هم اطلاع بدید.)ترفند: بهتراست تعداد  محصولات را به صورت نشانگری بصری  با قابلیت چسبان (Sticky)   یا ثابت (fixed) در گوشه صفحه همواره در معرض دید کاربر قرار داده و همچنین موقعیت فعلی کاربر را به صورت المانهای متحرک به نمایش بگذارید. این نشانگر به کاربران کمک می‌کند موقعیت فعلی خود را ببیند و همچنین بفهمند که قبلاً چند مورد را مشاهده کرده و چند مورد برای دیده شدن باقی مانده‌است. با افزوده شدن موارد جدید به صفحات دارای،  نوار اسکرول استاندارد مرورگر مدام شکسته و پرش میکند، بنابراین کاربران نمی توانند برای تعیین مکان خود در یک صفحه به آن تکیه کنند. چرا که ممکن است دستگیره آن از میانه صفحه به ناگاه به یک سوم بالای صفحه جهش کند. از این رو نمایش یک نشانگر سفارشی برای مشخص کردن مکان فعلی از سردرگمی کابر می کاهد.گاهی لازم است علاوه بر بارگزاری خودکار از یک دگمه برای مواقع غیر قابل پیشبینی استفاده کرد جمع بندیعلاوه بر آنچه گفته شد روشهای ترکیبی مانند صفخات موبایل در گوگل می توانید از روشهای ترکیبی استفاده کنید.  برای مثال وب سایت دیجیکالا و یا سایت مدیسه از روشهای بارگزاری تدریجی و پجینیشن  به طور همزمان استفاده میکند. از هر متدی که استفاده میکنید قبل از همه خودتان صفحه ای که طراحی  کرده اید را امتحان کنید و با فرض اینکه یک کاربر عادی هستید ببینید با آن چه طراحی کرده اید احساس راختی میکنید و میتوانید به راختی چیزی که دنبال آن هستید را بیابید همه اشکالات را چک کنید مانند عدم دسترسی به فوتر  یا مشخص نبودن دکمه نمایش بیشترو غیره …منبع: خانه خلاقیت مانایید خانه خلاقیت مانایید خانه خلاقیت مانایید Sat, 25 Feb 2023 19:13:40 +0330 https://virgool.io/@manaid/3-%D9%86%DA%A9%D8%AA%D9%87-%D9%85%D9%87%D9%85-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%AF%D8%A7%D8%B4%D8%AA%D9%86-%D8%B7%D8%B1%D8%AD%DB%8C-%DA%A9%D9%87-%D8%AE%D9%88%D8%A8-%D8%A8%D9%87-%D9%86%D8%B8%D8%B1-%D8%A8%D8%B1%D8%B3%D9%87-nj1wq1q5irz2 چکیده:در این مقاله بررسی میکنیم که چطور استفاده درست از ابزارهایی مانند تایپوگرافی ، سلسله مراتب بصری،  پالت رنگی و شبکه بندی تراز باعث می‌شوند یک طرح خوب به نظر برسد.جزییات بصری مانند قلم‌ها، رنگ‌ها و ترازبندی، در خلق یک تجربه و در نهایت ارزیابی کاربر از نام و نشان شما نقش داشته  و ویژگی‌های برند را (مانند دوستی یا قابلیت اطمینان) بیان می‌کنند.  به راحتی می توان با یک نگاه متوجه شد که یک طرح خوب به نظر می رسد یا نه؟ اما اغلب تشخیص اینکه چرا خوب به نظر می رسد بسیار سخت است.  در این مقاله ما سه طراحی رابط کاربری را تجزیه و تحلیل و اصول طراحی بصری که آنها را جذاب می‌کند را بررسی میکنیم.یک –  تایپوگرافی و فاصله گذاری:اولین مثال ما از  وبسایت مدیوم است. این  وب سایت با استفاده از طراحی یک شبکه، فضای سفید و یک سیستم تایپوگرافی با حفظ زیبایی و سادگی، تجربه ای لذت بخش ازخواندن راحت مقالات که هدف اصلی این سایت است برای مخاطب ایجاد میکند.طراحی مدیوم ساده، اما جذاب است. سیستم تایپوگرافی متفکرانه، فاصله گذاری، و ترازبندی ثابت از سمت چپ، خواندن را برای کاربران آسان می کند، در حالی که اطلاعات اضافی در یک نوار کناری به صورت منسجم ارائه می شود. در طراحی از یک شبکه 3 ستونی استفاده شده است. هر عنصر متنی با یک خط شبکه تراز می شود. یک واحد ثابت از فاصله گذاری( با استفاده از ویژگی padding ) به عنوان فضای سفید عناصر هر بخش را به صورت عمودی از هم جدا می کند. آیکون ها در نوار کناری سمت چپبا یک واحد ثابت جدا کننده از هم جدا شده اند با فاصله گذاری دو برابر برای جدا کردن گروه‌ها استفاده شده است. عنوان WRITTEN BY به صورت کاپیتال آن را از بقیه متن متمایز می‌کنداستفاده از فضای سفید زیاد تجربه خواند را لذت بخش تر میکند. چیدمان بر اساس یک شبکه، یک شبکه شامل دو ستون در این طرح (خطوط صورتی در تصویر بالا) دیده می شود. شبکه ستونی اول به عنوان لنگر عمودی برای تراز کردن المانهای موجود در سمت چپ وجود دارد از آنجایی که محتواهای نوار کناری به صورت چپ چین قرار گرفته اسکن آنها توسط کاربر راحتر و سریعتر است ( توجه داشته باشید که این یک نمونه سایت انگلیسی زبان است که نوشتار طراحی واضح به نظر می رسد و محتوای نوار کناری اسکن آسان است. متن مقاله نیز در یک ستون دیگر و به صورت چپ چین تراز شده است تراز کردن متن های بلند اهمیت زیادی در تجربه خوب برای مخاطب ایجاد میکند چرا که خوانند به راحتی مب تواند شروع خط بعد را قبل از آنکه آخرین کلمه خط قبلی از ذهنش بپرد، پیدا کند. شما در طراحی ها یتان می توانید از یک شبکه تراز بندی منظم و منسجم استفاده کنید با این تفاوت که تراز بندی در صفحات فارسی می بایست از سمت راست باشد.تنوع در قلمهای استفاده شده در سایت Medium شامل سبکهای متفاوت از یک خانواده قلم (حروف کوچک، پررنگ، مورب، زیرخط دار) با تغییرات جزئی در رنگ (مشکی در مقابل خاکستری) می باشددر واقع در این سایت از یک قلم استفاده شده و برای ایجاد تمایز در بین انواع محتوا از تغییرات رنگ و سبک های مختلف قلم استفاده میکند. چرا که استفاده از قلمها یی با سبکهای متفاوت مانند استفاده از تعداد زیاد رنگ، علاوه بر مختل کردن انسجام و یکپارچگی طرح باعث سردرگمی کاربر می شود. این کار باعث می شود که کاربر در طرح صفحه نتواند هیچ نظم و الگویی را شناسایی کند و در نتیجه طرح شما را تصادفی و بی قاعده ارزیابی می کند. برای مثال در تیتر WRITTEN BY استفاده از حروف کاپیتال علاوه بر ایجاد توجه، نسبت به بقیه متن تمایز ایجاد میکند به عنوان یک قاعده کلی، یک سیستم تایپوگرافی را شناسایی کنید و طراحی خود را به 1 یا 2 قلم محدود کنید. همیشه از نوع یکسانی (مورب، پررنگ، حروف کوچک) برای هدف های مشابه استفاده کنیدوب سایت ویرگول با پیروی از اصولی مشابه (شکل زیر) یک نمونه خوب در  وب پارسی با خوانایی بالاستسیستم تایپوگرافی ، فاصله گذاری، و ترازبندی ثابت از سمت راست، خواندن را برای کاربران آسان می کند، در حالی که اطلاعات اضافی مانند سایت مدیوم در یک نوار کناری ارائه می شود. استفاده از فضای سفید: فضای اضافی بین خطوط متن. تیتر، در این طرح برای جدا کردن پارگراف ها از فضای سفید بیشتری (4 تا 6 پیکسل بزرگتر از اندازه قلم) استفاده میکنند. این فضای سفید کمی بیشتر از فضای پیش فرض (که معمولاً 2 پیکسل بیشتر از اندازه قلم است) بین خطوط عادی است. استفاده از این فضاهای سفید اضافی باع شکسته شدن متن های طولانی و بلوک بندی می شو که باعث می شود متن  در نگاه اول دلپذیر تر و خواناتر به نظر برسد. اگر متن طولانی در صفحه خود دارید از قانون زیر میتوانید برای ایجاد یک فاصله مناسب برای بین خطوط استفاده نمایید این کار متن شما را خواناتر و روانتر میکند.نکته دیگر در مورد فونتها، استفاده از فونتهایی است که متناسب با صفحات وب طراحی شده باشند. به ویژه قلم های فارسی. معمولا این قلمها فاصله مناسب بین حروف را رعایت میکنند و درنتیجه میزان خوانایی بالای دارند. علاوه بر آن چندین مدل سبک دارند که میتواند کلیه نیازهای یک طراح وب برای ایجاد تمایز و سلسله مراتب بصری به وسیله سبک و ابعاد قلم را پوشش دهد.  قلمهایی مانند ایران سانس، وزیر، انجمن، کلمه، دانا و غیره…  تعدادی از فونتهایی است که برای طراحی وب سایت مناسب هستند. در مجموع، همین جزئیات، طراحی را زیبا می کند و طرح را با هدف اصلی که بهینه کردن قابلیت خواندن است، متناسب می کند.اگه این مقاله رو دوست داشتی اینجا میتونی بقیه اش رو مطالعه کنی خانه خلاقیت مانایید خانه خلاقیت مانایید Sat, 25 Feb 2023 19:06:52 +0330