https://virgool.ir/feed/@UX_UIنوشته های من،یادداشت هایی هست از آنچه یادمیگرم در زمینه ی طراحی تجربه کاربری و طراحی رابط کاربری .fa2026-11-11 15:13:27https://files.virgool.ir/upload/users/205793/avatar/89kJ4g.pnghttps://virgool.ir/@UX_UIhttps://virgool.ir/@UX_UI/چند-ابزار-رایگان-رنگ-برای-طراحان-ui-ux-ew2qlckypmamرنگ ها ، به عنوان یکی از مهمترین عناصر بصری طراحی وب / برنامه ، می توانند محتوای وب و برنامه را به راحتی برجسته کرده ، توجه کاربران را به سرعت جلب کرده و بر احساسات کاربران تأثیر بگذارند.به عبارت دیگر ، رنگ ها و نقشه های رنگی که برای پروژه های وب / برنامه خود انتخاب می کنید تأثیر عمده ای بر کل طراحی دارد.بهترین ابزار رنگ آنلاینیک ابزار رنگی آنلاین به طراحان این امکان را می دهد تا بدون نصب هیچ نرم افزاری ، طرح های رنگی / رنگی مورد نظر خود را انتخاب کنند. در هر زمان و هر کجا قابل دسترسی است. از این جنبه ، برای طراحان وب / برنامه بسیار مناسب است.در اینجا چند ابزار آنلاین رنگی مبتنی بر وب و ابر مبتنی بر ابر به طور گسترده استفاده شده است:1-Coolors تولید کننده رنگی مبتنی بر وب است که به طراحان اجازه می دهد برای طراحی UI / UX خود یک پالت رنگ را ایجاد ، ذخیره ، اشتراک و صادر کنند .برای کاربران جدید ، به ویژه برای برخی از مبتدیان طراحی UX / UI ، به عنوان یک رابط کاربری ساده و راهنمای کاربر مورد توجه است.از برنامه های Adobe پشتیبانی می کند و می توانید آن را به عنوان یک افزونه در مجموعه Adobe نصب کنید. همچنین دارای یک برنامه iOS است.2-Flat UI Colorsاگر عجله دارید Flat UI Colors ، برای شما مناسب است و بیش از 13 پالت رنگی را که براساس ترجیحات کشورهای مختلف جمع آوری می شوند ، به شما ارائه می دهد. به سادگی می توانید پالت های رنگی مورد نظر را کپی کرده وپیست کنید تا سریع از آنها در پروژه های طراحی خود استفاده کنید3-ColordotColordot یک انتخاب کننده رنگی آنلاین بسیار ساده است که توسط Hailpixel ساخته شده است ، به طراحان این امکان را می دهد تا با پیمایش و کلیک کردن ، رنگ ها را انتخاب کرده و پالت های رنگی مورد نظر خود را ایجاد کنند.4-Colourcoبا کاربرد ساده و رایگان ،ابزار آنلاین رنگ است که به طراحان UI / UX اجازه می دهد رنگ ها را انتخاب کنند ، پالت های دلخواه را با سهولت انتخاب و ایجاد کنند. در مقایسه با Colordot ، به طراحان ابزارهای مفیدتری برای شخصی سازی و صادرات طرح های رنگی طراحی شده خود ارائه می دهد.5-Color Supplyبر خلاف ابزارهای رنگی مبتنی بر وب که در بالا توضیح داده شده است ، که به کاربران نیاز دارد تا برای ایجاد طرح رنگی مورد نظر ، رنگ ها را یک به یک انتخاب کنند ، این تولید کننده پالت رنگ آنلاین ساده ، چرخ های رنگی مختلف را به کاربران نشان می دهد تا به راحتی دو ، سه یا حتی چهار رنگ را به راحتی انتخاب کنند.سپس ، یک سری نمونه های طرح رنگ که از این رنگ های انتخاب شده تشکیل شده است در سمت راست ذکر شده است. طراحان می توانند موارد مورد علاقه خود را برای استفاده های بعدی ذخیره کنند.بهترین انتخابگرهای رنگی6-AdobeColor CCاین ابزار که قبلاً "Adobe Kuler" نامیده می شد ، یک ابزار پیشرفته انتخابگر رنگی رایگان است که به کاربران امکان می دهد طرح های رنگی (حداکثر 5 رنگ) را با چرخ رنگ بسازند و تصاویر را بارگذاری کنند تا به طور خودکار نقشه های رنگی را استخراج کنند.اگر شما یک کاربر Adobe هستید که می خواهید یک تصویر رنگی را از یک تصویر موجود ایجاد کنید ، این انتخابگر رایگان رنگ ایده آل است.7-HTML Color Pickerاین یک ابزار جمع آوری رنگ بسیار ساده HTML برای مبتدیان طراحی وب سایت از وب سایت آموزش HTML / CSS (https://www.w3schools.com/) است.اگر در مورد طراحی وب HTML / CSS می آموزید ، این یک ابزار مناسب برای تمرین مهارت های طراحی شما است.8-HTML Color Codesبا استفاده از کدهای HTML Color ، می توانید به راحتی چند رنگ دلخواه را انتخاب کنید ، پالت های مربوط به رنگ را پیدا کنید ، رنگ ها را در قالب های مختلف (از جمله Hex ، RGB ، HTML ، CSS ، SCSS و غیره) بارگیری و صادر کنید. می توانید حداکثر 6 رنگ را در یک پالت رنگی اضافه کنید.9-Image Color Pickerیک ابزار انتخاب رنگ سریع تصویر است که به طراحان این امکان را می دهد تا تصاویر را به راحتی بارگذاری کنند تا رنگ های مورد نظر را انتخاب کنند و کدهای HTML مربوطه و مقادیر HEX / RGB / HSV و غیره را دریافت کنند.برای استفاده سریع ، همچنین می توانید URL یک تصویر / وب سایت را به صورت آنلاین وارد کنید تا رنگ های مورد نظر خود و کدهای HTML را در عرض چند ثانیه بدست آورید.10-Web Fx Color Pickerیک جمع کننده سریع رنگ و تولید کننده طرح رنگ است که به کاربران اجازه می دهد تا 12 رنگ را انتخاب کنند ، طرح رنگ دلخواه را تولید کرده و آن را از طریق یک لینک به اشتراک بگذارند.بهترین تولید کننده های پالت رنگ11-Hue Snapابزاری برای تولید و به اشتراک گذاری پالت رنگی آسان است که به کاربران امکان می دهد پالت های رنگی از تصاویر یا با استفاده از جمع کننده های داخلی آن ایجاد کرده و از طریق رسانه های اجتماعی با دیگران به اشتراک بگذارند. قابل تنظیم است.12-Canva Color Palette Generatorشما به راحتی می توانید تصاویر را با کشیدن و رها کردن ساده بارگذاری کنید ، رنگ های ارائه شده در آنها را انتخاب کنید و بهترین پالت رنگ را برای طراحی وب / برنامه خود ایجاد کنید.13-Colormindمانند سایر ابزارهای رنگی ، به طراحان این امکان را می دهد تا با چیدن رنگ ها یک به یک ، پالت های رنگی را ایجاد کنند. این برنامه از تولید پالت های رنگی با 5 رنگ پشتیبانی می کند.با این حال ، Colormind به عنوان یک تولید کننده پالت رنگ وب سایت ، کاربران را قادر می سازد تا به طور مستقیم صفحه فرود نسخه ی نمایشی را با پالت های رنگی تولید شده برای ساده تر کردن روند طراحی رنگ مشاهده کنند. دکمه های مربوط به وب ، نوار ناوبری ، زبانه ها و سایر مؤلفه های UI نیز با پالت رنگ تولید شده اعمال می شود. این یک تلاش خوب برای طراحان است که برای انتخاب مناسب ترین پالت های رنگی وب سایت ، اثرات نهایی طراحی را بطور مستقیم بررسی کنند.14-Color Huntیک پلتفرم انتخاب پالت رنگی آزاد و باز است که به طراحان و هنرمندان اجازه می دهد پالت های رنگی مورد نظر خود را از یک کتابخانه گسترده انتخاب کنند. همچنین چندین فیلتر (از جمله "جدید" ، "مرسوم ، مد روز" ، "محبوب" و "تصادفی") و نوار جستجوی قدرتمند برای طراحان وجود دارد تا بتوانند یک رنگ بندی مناسب را انتخاب کنند یا الهام بخش طراحی رنگ را با سهولت پیدا کنند. اطلاعاتی در مورد سایر ابزار ها را میتوانید از اینجا مطالعه کنیدفهرست مطالب منUX/UI LoverUX/UI LoverSat, 27 Jun 2020 02:38:48 +0430https://virgool.ir/@UX_UI/بهترین-الگو-سه-رنگی-برای-طراحی-ui-zpjdpsi3kapbآشنایی با پالت های طبیعیچگونه بهترین الگو سه رنگ را پیدا کنیم؟من صدها عکس از طبیعت را امتحان کردم که سعی در یافتن یک رنگ بندی برای پخش کننده موسیقی داشتند. کار طولانی و سخت بود ، اما اکنون بسیاری از ترکیبهای عالی جدید رنگی که قبلاً هرگز از آنها استفاده نکرده ام ، دارم.بیشتر اوقات ، پالت های طبیعی برای طراحی UI خوب کار می کنند ، اما همیشه اینگونه نیست. طبیعت در سایه های بسیاری قرار می گیرد و رنگ های جسورانه به سادگی می توانند توجه شما را جلب کنند. نکته دیگری که باید به خاطر داشته باشید اینست که در حالی که واقعاً راحت است که دو رنگ را در کنار هم قرار دهید ، اضافه کردن یک سوم به مخلوط اغلب می تواند همه چیز را بسیار پیچیده تر کند ، زیرا هر رنگ باید دو رنگ دیگر را کاملاً کامل کند. تعادل کلید هماهنگی است.من یک طرح سه رنگ واقعاً عالی پیدا کردم و سعی کردم درک کنم که چرا آنقدر خوب در کنار هم قرار می گیرد در حالی که دیگران کار نمی کنند. من این طرح ها را روی یک چرخ رنگ قرار دادم و فهمیدم که همه این ترکیب ها را می توان به سه دسته تقسیم کرد: هر سه رنگ در کنار یکدیگر ، دو رنگ در کنار یکدیگر و دو رنگ دیگر در مقابل ، سه رنگ مقابل یکدیگر. چرخ رنگی من از اصطلاحات کلاسیک برای ترکیب رنگهایی که در کتابی درباره تئوری رنگ پیدا کردم استفاده خواهم کرد: آنالوگ ، تقسیم اسپلیت و تریادیک.1. آنالوگساده ترین ترکیب روش مشابه است. جمع زاویه ها کمتر از 90 درجه است.این با استفاده از سه رنگ ایجاد می شود که نسبتاً نزدیک به یکدیگر در چرخ رنگ هستند. جمع زاویه ها کمتر از 90 درجه است. به عنوان مثال ، اگر می خواهید به عنوان اصلی رنگ قرمز داشته باشید ، می توانید نارنجی یا قهوه ای اضافه کنید. اکثر رنگ های کنار یکدیگر ، به جز صورتی قرمز و سرد صورتی یا بنفش در کنار هم قرار می گیرند. رنگ های بسیار زیبایی به تنهایی ، اما آنها را کنار هم قرار داده و به نظر می رسد مانند مسافرخانه پرنده هویج است. همه سایه های آبی ، سبز و بنفش بسیار خوب با یکدیگر کار می کنند ، اگرچه درست است که برخی از رنگ ها می توانند در ترکیب تر و تیره تر باشند. برای شما توصیه می کنم که ابتدا از عکس های طبیعت و چرخ رنگ پس از آن الهام بگیرید. استفاده از چرخ رنگ فقط برای انتخاب رنگ ها مانند یافتن یک سوزن یک بعدی در صفحه دو بعدی بی نقص شکل یک دایره است. حتی با استعداد قابل توجه در مهارت های هنری و مشاهده طولانی رنگ های طبیعی ، به تجربه زیادی نیاز دارید تا فقط به چرخ رنگ توجه کنید و به آنچه می خواهید برسید. البته تمرین بسیار کمک می کند.استفاده از گرادیانتاگر قبلاً دو رنگ دارید ، می توانید با تقسیم تفاوت بین این دو ، حالت سوم را پیدا کنید. به نظر من ، این بهترین و ساده ترین روش برای یافتن یک طرح سه رنگ است.این گرادیان اگر دو رنگ در کنار یکدیگر روی چرخ رنگ باشد ، کار می کند ، اگر این رنگ های متضاد هستند ، شما همیشه نمی توانید با آن شیب خوبی ایجاد کنید. اما اگر رنگ آنالوگ باشد ، همیشه خوب به نظر می رسد.2-تقسیم مکملدو رنگ در کنار یکدیگر می ماند و رنگ سوم در نقطه مقابل چرخ رنگ است. مجموع زاویه کمتر از 180 درجه است. چند الگوی وجود دارد که به شما در انتخاب کمک می کند: زرد برای رنگهای متضاد برای قرمز-بنفش ، آبی-سبز ، فیروزه ای-بنفش بسیار مناسب است ، قرمز با رنگهای سبز-آبی-بنفش بسیار خوب است. اینها فقط چند نمونه است. این امكانات تا حواشی ادراک بشر گسترش می یابد.بسیاری از رنگ ها به خوبی در کنار هم قرار می گیرند. راهی وجود دارد که به راحتی بتوانید طرح های تکمیلی Split را ایجاد کنید. ابتدا ، دو رنگ جسورانه متضاد را انتخاب می کنید که می خواهید در طراحی خود از آنها استفاده کنید و بعد از اینکه رنگ دیگری را در کنار یکی از آنها پیدا کنید ، پیدا کنید. به عنوان مثال می خواهید زرد و بنفش داشته باشید ، توصیه می کنم رنگ صورتی یا آبی را از قسمت بنفش یا سبز از سمت زرد اضافه کنید. اگر از اشباع مناسب و کنتراست استفاده می کنید ، همه آن رنگ ها به خوبی با هم جور می شوند.3-سه گانهسه رنگ متضاد یکدیگر در چرخ رنگ ای سه گانه از سه رنگ متضاد یکدیگر در چرخ رنگ تشکیل شده است. این یکی از متنوع ترین طرح های رنگی و همچنین دشوارترین است. پیدا کردن ترکیب خوب واقعا کار سختی است. در اینجا چند الگوی طبیعی وجود دارد: سبز و زرد با تمام سایه های قرمز ، صورتی ، بنفش و آبی واقعاً خوب هستند. این ترکیب اصلی گل است: برگهای سبز ، گلهای رنگارنگ و ژنوسیوم زرد. همانطور که می بینید ، واقعاً در کنار هم بسیار عالی عمل می کنند. منبع بزرگ دیگر الهام می تواند آسمان در طلوع خورشید و غروب خورشید باشد. این ترکیب رنگی بسیار متنوعی دارد: آبی ، بنفش ، نارنجی؛ قرمز ، زرد ، فیروزه ای و دیگران.از طبیعت الهام بگیریدمن برای طراحی های خود از پالت رنگ طبیعی استفاده می کنم ، زیرا بهترین ترکیب رنگ ها را دارد و این برای چشم شما واقعا مناسب است.رنگ ها فقط تعداد قرمز ، سبز و آبی نیستند که فقط بتوانیم در رایانه قرار دهیم و نتیجه بگیریم. در واقع ، پیدا کردن رنگ های مناسب با استفاده از یک جمع کننده رنگ ، واقعاً دشوار است. تصاویر از طبیعت همیشه منبع الهام بخش کار من بودند و این به من کمک می کرد تا در مورد چگونگی ترکیب رنگ ها با یکدیگر اطلاعات زیادی کسب کنم. من فکر می کنم اگر همه گزینه های انتخاب رنگ خود را ببندند و عکس هایی از مناظر ، گیاهان ، گل ها و آسمان باز کنند ، برای همه راحت تر است که بتوانند ترکیب های عالی رنگی پیدا کنند.همچنین می خواهم روش آسان چگونگی چیدن رنگ ها از عکس طبیعت را با شما به اشتراک بگذارم. به عنوان مثال شما تصاویر زیبایی از طبیعت پیدا کرده اید که می خواهید برای پالت رنگها از آنها استفاده کنید:در مرحله بعدی می توانید این تصویر را به Adobe Color CC اضافه کنید یا رنگ های خودتان را انتخاب کنید:UX/UI LoverUX/UI LoverTue, 09 Jun 2020 17:10:14 +0430https://virgool.ir/@UX_UI/رنگ-های-سطح-پس-زمینه-و-خطا-bg4cdvaosl9oرنگ های سطح ، پس زمینه و خطا معمولاً نشانگر برند نیستند:رنگ های سطحی بر روی اجزای سازنده ، مانند کارت ، ورق و منو تأثیر می گذارد.رنگ پس زمینه در پشت محتوای قابل پیمایش ظاهر می شود. پس زمینه پایه و رنگ سطح #FFFFFF است.رنگ خطا خطاها در مؤلفه ها ، مانند متن نامعتبر در یک زمینه متن را نشان می دهد. رنگ خطای پایه #B00020 است. رنگ های سطح ، پس زمینه و خطا1. رنگ پس زمینه پایه: #FFFFFF2. رنگ سطح پایه: #FFFFFF3. رنگ خطای پایه: # B00020رنگ های Typographyو iconography رنگهای "on" (روشن/فعال)سطوح برنامه(surface) از رنگهای دسته های خاص در پالت رنگی شما ، مانند رنگ اصلی استفاده می کنند. هر وقت عناصری مانند متن یا آیکون در جلوی آن سطوح ظاهر شود ، آن عناصر باید از رنگ هایی استفاده کنند که در مقابل رنگ های پشت سرشان روشن و خوانا باشد.به این دسته از رنگ ها "on" گفته می شود که به آنها عناصر رنگی را نشان می دهد که در قسمت بالای زمینه ظاهر می شوند و از رنگ های زیر استفاده می کنند: رنگ اصلی ، رنگ ثانویه ، رنگ سطح ، رنگ پس زمینه یا رنگ خطا. هنگامی که یک رنگ در بالای یک رنگ اصلی ظاهر می شود ، "on primary color" گفته می شود. آنها با استفاده از دسته رنگ اصلی (مانند رنگ اصلی) با پیشوند "on" برچسب گذاری می شوند.رنگ های قابل دسترسیبرای اطمینان از قابل مشاهده بودنِ زمینه در پشت متن روشن یا تاریک ، پس زمینه شما می تواند از انواع سبک یا تیره از رنگ های اولیه و ثانویه شما استفاده کند.از طرف دیگر ، این رنگ ها را می توان برای تایپوگرافی استفاده کرد که در جلوی زمینه های تاریک یا روشن ظاهر می شود.رنگ های جایگزینسیستم رنگی Material Design از رنگ های جایگزین پشتیبانی می کند ، که رنگهایی هستند که به عنوان گزینه های جایگزین برای رنگ های اصلی و ثانویه برند شما استفاده می شوند (آنها رنگ های اضافی را تشکیل می دهند ...سیستم رنگی Material Design از رنگهای جایگزین پشتیبانی می کند ، که رنگهایی هستند که به عنوان گزینه های جایگزین برای رنگهای اصلی و ثانویه برند شما استفاده می شوند (آنها رنگهای دیگری را برای تمِ شما تشکیل می دهند). از رنگهای جایگزین می توان برای تمایز بخشهای مختلف UI استفاده کرد.رنگ های جایگزین بهترین گزینه برای:برنامه هایی با تمِLight یا Darkبرنامه هایی با تم مختلف در بخش های مختلفبرنامه هایی که جزئی از مجموعه محصولات هستنداز رنگهای جایگزین باید با احتیاط استفاده شود ، زیرا اجرای یکپارچه با مضامین رنگی موجود می تواند چالش برانگیز باشد.تم های Light و dark light Theme Dark Themeبرخی از برنامه ها دارای هر دو موضوع سبک و تاریک هستند. برای حفظ دید عناصر و خوانا بودن متن ، می توانید طرح های رنگی مختلف را برای تم های تاریک و سبک تطبیق دهید.رنگ های جایگزین برای بخشهای تماین برنامه دارای سه رنگ اصلی است. تم های متمایز در قسمت های مختلف برنامه استفاده می شود و به کاربران امکان می دهد بهتر با آن ارتباط برقرار کنند.تمِ اولرنگ زرد به عنوان رنگ اصلی برای مناطقی مانند سوار شدن و انتخاب محتوای مورد علاقه استفاده می شود.تمِ دومرنگ آبی به عنوان رنگ اصلی برای مناطقی از برنامه که مربوط به حساب شخصی کاربر است ، مانند دوره های انتخاب شده ، استفاده می شود.تمِ سومصورتی به عنوان رنگ اصلی دوره ها استفاده می شود.رنگ های اضافی برای تجسم داده هابرنامه ها می توانند از رنگهای اضافی برای انتقال دسته هایی که خارج از موضوع رنگ اصلی شما هستند استفاده کنند. آنها هنوز هم بخشی از رنگ کامل شما هستند ...برنامه ها می توانند از رنگهای اضافی برای انتقال دسته هایی که خارج از موضوع رنگ اصلی شما هستند استفاده کنند. آنها هنوز هم بخشی از پالت کامل رنگ شما هستند.این برنامه دارای یک تم رنگ با پنج رنگ اضافی است که هنگام نمایش چندین تصویر در همان صفحه ، از آن استفاده میکند.1. در قسمت Accounts از سبز استفاده می شود2. در بخش صورتحساب از نارنجی و زرد استفاده شده است3. در بخش بودجه از بنفش و آبی استفاده شده استفهرست مطالب منUX/UI LoverUX/UI LoverMon, 08 Jun 2020 11:51:29 +0430https://virgool.ir/@UX_UI/سیستم-رنگ-rdahu1xazzhuسیستم رنگی Material Design می تواند به شما در ایجاد تم رنگی کمک کند که نشانگر نام تجاری یا سبک شما باشد.استفاده از رنگ و پالتسیستم رنگی Material Design به شما کمک می کند تا رنگ را در UI خود به روشی معنی دار اعمال کنید. در این سیستم ، یک رنگ اصلی و ثانویه را برای نشان دادن نام تجاری خود انتخاب می کنید. انواع dark و light هر رنگ را می توان به روش های مختلفی برای UI شما اعمال کردرنگ ها و زمینه هاتم های رنگی به گونه ای طراحی شده اند که هارمونی, در دسترس بودن متن و تمایز عناصر UI و زمینه از یکدیگر را شاهد باشیم.اصولسلسله مراتبرنگ نشان می دهد کدام عناصر تعاملی هستند ، نحوه ارتباط آنها با سایر عناصر و سطح برجستگی آنها. عناصر مهم باید بیشتر از همه برجسته شوند.خواناییمتن و عناصر مهم ، مانند آیکون ها ، هنگام ظاهر شدن در زمینه های رنگی ، باید استانداردهای خوانایی را رعایت کنند.رسا بودنرنگ های برند را در لحظه های به یاد ماندنی نشان دهید که باعث تقویت سبک برند شما می شود.ایجاد تمِ رنگیتمِ پایه ی Material Colorشامل رنگ های پیش فرض برای :رنگهای اولیه و ثانویهانواع رنگهای اولیه و ثانویهرنگهای UI اضافی ، مانند رنگ پس زمینه ، سطوح ، خطاها ، تایپوگرافی و نمادنگاری.همه این رنگ ها می توانند برای برنامه شما تنظیم شوندThe baseline Material color theme رنگ اصلیرنگ اصلی رنگی است که بیشتر در صفحه ها و مؤلفه های برنامه شما نمایش داده می شود. از رنگ اصلی شما می توان برای ایجاد رنگ استفاده کرد ...انواع Dark و Light رنگ اصلیاز رنگ اصلی شما می توانید برای ایجاد یک تم رنگی برای برنامه خود ، از جمله انواع رنگ اصلی تیره و سبک استفاده کنید.تشخیص ِ عناصر UIبرای ایجاد تضاد بین عناصر UI ، مانند نوار بالایی برنامه از نوار سیستم ، میتوانید از رنگ تیره یا سبک از همان رنگ اصلی استفاده کنید.همچنین برای تمایز دادنِ عناصر داخل یه جزء ،میتوانید از آیکن در محدوده ی آن استفاده کنید.استفاده از یک رنگ اصلی و دو نوع تیره و روشن از رنگ اصلی رنگ ثانویهرنگ ثانویه روشهای بیشتری برای تمایز محصول شما فراهم می کند. داشتن رنگ ثانویه اختیاری است .رنگ های ثانویه بهترین گزینه برای: دکمه های عملکرد شناورکنترل های انتخابی ، مانند کشویی و سوییچبرجسته کردن متن انتخاب شدهمیله های پیشرفت(Progress bars)پیوندها و عناوین (Links and headlines )رنگ تیره یا سبک از رنگ ثانویهدقیقاً مانند رنگ اصلی ، رنگ ثانویه شما می تواند انواع تیره و سبک داشته باشد. یک موضوع رنگ می تواند از رنگ اصلی ، رنگ ثانویه و انواع تیره و نور هر رنگ استفاده کند.این رابط کاربر از یک تم رنگی با رنگ اصلی ، یک نوع از رنگ اولیه و یک رنگ ثانویه استفاده می کند.ادامه مبحث رنگ ها در پست بعدفهرست مطالب منUX/UI LoverUX/UI LoverSat, 06 Jun 2020 14:46:15 +0430https://virgool.ir/@UX_UI/فهرست-مطالب-من-aqr1fxesw4hgبرای سهولت دسترسی به مطالب ، در این پست به تدریج مطالب نوشته شده ،فهرست میشوند.ترتیب فهرست بر اساس ترتیب ارسال پست ها خواهد بود.8 قانون طراحی موبایلاصول اولیه طراحی موبایلطراحی موبایل - نوار بالای برنامهسیستم رنگرنگ های سطح ، پس زمینه و خطابهترین الگو سه رنگی برای طراحی UIUX/UI LoverUX/UI LoverSat, 06 Jun 2020 13:32:59 +0430https://virgool.ir/@UX_UI/mobile-design-app-bars-top-ovakgn2lfhyrنوار بالایی برنامه ،اطلاعات و اقدامات مربوط به صفحه فعلی را نشان می دهد.اصولPersistentنوار بالایی برنامه ها، در بالای هر صفحه در یک برنامه ظاهر می شوند و می توانند با حرکت از بین بروند.راهنمایینوار بالایی برنامه ها،روشی مطمئن برای راهنمایی کاربران از طریق یک برنامه ارائه می دهند.Consistentنواربالایی برنامه ها ،برای افزایش حسِ آشنا بودن کاربر،محتوا و مکان ثابت دارند.انواع نوار های بالامعمولی (Regular) نوار عملکرد متنی (Contextual action bar )نوارهای عملکرد متنی، عملکردهایی را برای موارد انتخاب شده ارائه می دهند. یک نوار بالایی برنامه می تواند به یک نوار عملیات متنی تبدیل شود و تا زمانی که یک اقدام انجام شود یا آن را رد کنیم ، فعال باقی بماند.ساختار ترتیب قرار گیری عناصر توصیه شده در نوار بالایی برنامه برای زبانهای چپ به راست عبارت است از:- نویگیشن را در سمت چپ قرار دهید- هر عنوان را در سمت راست نوبگیشن قرار دهید- اقدامات متنی را در سمت راست نویگیشن قرار دهید- یک منوی overflow(در صورت استفاده) در سمت راست قرار دهید.برای زبانهای راست به چپ ، موقعیت های قرارگیری باید برعکس شوند.1. Container2. Navigation icon (optional)3. Title (optional)4. Action items (optional)5. Overflow menu (optional)نوار برنامهنوار محتوای نوار بالایی برنامه را در خود جای داده است.انواع نوارها از نظر ارتفاع :RegularProminentDense (desktop only)Prominent dense (desktop only)regular - prominentRegular - DenseProminent - Prominent denseتصویر در نوارنوار بالایی میتواند حاوی تصویر باشد. در این حالت ،نوار بالایی در حالت Prominentتوصیه میشود،چون فضای بیشتری دارد.تصاویری که متن یا آیکن های نوار را غیرقابل تشخصیص کند،استفاده نکنید.تصویری که میتوانید در نوار استفاده کنید. نمونه ای از تصویری که نمیتوانید در نوار استفاده کنید.آیکن و متن را مشاهده کنید. آیکن های Navigational (اختیاری)استفاده از Navigational Icon در نوار ،اختیاری است.ولی اگر استفاده شد در گوشه سمت چپ استفاده شود و میتواند به یکی از فرم های زیر باشد:آیکن منو ، که یک کشو نویگیشن را باز می کندپیکان رو به بالا ، که به دنبال سلسله مراتب برنامه استپیکان عقب ، که به صفحه قبلی باز می گردد.عنوان(اختیاری)عنوان نوار برنامه را می توان برای توصیف موارد زیر استفاده کرد:نمایی که یک کاربر در حال حاضر در آن فعال استبخشی که کاربر در حال حاضر در آن قرار داردبرنامه ای که در حال استفاده شدن استبه طور پیش فرض ، عناوین روی دسک تاپ در سمت چپ تراز می شوند. موقعیت پیش فرض عناوین در تلفن همراه و رایانه لوحی بستگی به پلتفرم دارد.اگر عنوان طولانی ست از نوار prominent استفاده کنید و عنوان را در دو خط بشکنید. برای نوشتن عنوان در دو خط ، از نوار Regular استفاده نکنید !متن کوتاه نشود ، مخفی کردن عنوان کامل ممکن است باعث سوء تفاهم شود.متن را متناسب با یک خط کوچک نکنید.آیکن های عملکردی و منو های سرریز (اختیاری)در منو App Actions در سمت راست نوار برنامه ، به صورت نماد یا در یک منوی سرریز قرار می گیرد. منوهای سرریز در سیستم عامل های موبایل متفاوت هستندقرار گیری آیکن ها آیکن های عملیاتی که بیشتر استفاده میشوند را سمت چپ تر قرار دهید و هر چه به سمت راست می روید ،آیکن هایی که کمتر استفاده میشوند را قرار دهید.آیکن های عملیاتی دیگر که در نوار جا نمیشوند را در منوی سرریز قرار دهید.1-اکشنی که بیشترین استفاده را دارد سمت چپ 2-اکشن کمتر استفاده شده 3- بقیه اکشن ها به منو سرریز میروندبا تغییر عرض نوار برنامه ، Action ها به داخل و خارج از منوی سرریز منتقل می شوند ، مانند اینکه یک دستگاه از landscape به portrait تغییر یابد.برای مطالعه بیشتر به منبع محتوا ، مراجعه کنید.UX/UI LoverUX/UI LoverSat, 06 Jun 2020 02:10:57 +0430https://virgool.ir/@UX_UI/اصول-اولیه-طراحی-موبایل-duzb8rk97srhبا چند اصول اساسی شروع کنیم که باید در مورد اندازه ها و تصاویر صفحه بدانیم:1- پیکسلها - این به یک عنصر تصویر اشاره دارد. یک نقطه از رنگ روی صفحه نمایش.2- اندازه صفحه نمایش: اینها در اینچ نمایش داده می شوند.3- Resolutions(وضوح)- به معنای عرض و ارتفاع است ، به عنوان مثال 320wx480h4- DPI- این نقاط در هر اینچ یا پیکسل در اینچ است5-Density Independent Pixels - این یک اندازه گیری انتزاعی برای اندروید است6-Points - این به یک اندازه گیری انتزاعی برای iOS اشاره دارددر طبقه بندی این قسمت ها ، اندازه صفحه نمایش ، پیکسل ها ، وضوح تصویر و DPI با ویژگی های فیزیکی صفحه نمایش مطابقت دارند در حالی که pointsِ سیستم مختصات هستند که با توجه به دستگاهی که در حال اجرا متفاوت است. ادامه مقاله : think360UX/UI LoverUX/UI LoverThu, 04 Jun 2020 21:52:10 +0430https://virgool.ir/@UX_UI/8-قانون-طراحی-موبایل-dd4hryysd54rطراحی تجربه کاربر تلفن همراه (UX) به طراحی تجربیات مثبت در هنگام استفاده از دستگاه های تلفن همراه، و برنامه ها یا سرویس های در حال اجرا در چنین دستگاه هایی اشاره دارد.1-پیمایش ساده را ارائه دهیدنویگیشن ساده یک روش واضح برای حرکت بین صفحه نمایش و پیدا کردن آیتم هایی که کاربران در جستجو آنها هستند، فراهم می کند زیرا باید در همان پنجره این حرکت ها انجام شوند.2-منطقه لمسی بزرگ ایجاد کنیدکنترلر ها را به سایزی طراحی کنید که انتخاب آنها با استفاده از انگشت شست راحت تر باشند. ارائه کنترل های کوچکتر کاربر را هنگام استفاده از برنامه شما آزار می دهد.3. کاهش درهم و برهمینمایش همه اطلاعات ممکن در رابط ضروری نیست. محتوای خود را به گونه ای سازماندهی کنید که درک صحیحی از ویژگی های موجود در اختیار کاربر قرار دهد. درهم و برهمی را کاهش داده و " حداقل "محتوای آن را روی صفحه نگه دارید.4- متن ها را بزرگ نمایش دهیداندازه کوچکتر صفحه موبایل ها را به خاطر داشته باشید و متن خود را در اندازه ای بزرگتر کنید تا خواندن و درک آن راحت تر شود.5-از کنترل های لمسی استفاده کنیدتعداد زیادی کنترل موبایل برای استفاده در طراحی هست.استفاده از کنترل های وب ساده ایده خوبی نیست زیرا تعامل با آنها بر روی تلفن همراه دشوار است.6-از فرم های ساده استفاده کنیدسعی کنید فرم های ساده تری تهیه کنید که کاربران بتوانند سهولت ورودی خود را وارد کنند. از کنترل های فرم استفاده کنید که تایپ متن حداقل باشد 7-مواظب موقعیت Thumb باشید!طرح صفحه نمایش را هنگام تحقیق در مناطق دوست داشتنی با انگشت شست طراحی کنید. کنترل مکانیکی برای ضربه زدن در مکانی فراهم کنید که کاربران بتوانند با استفاده از انگشت شست وی به راحتی روی آنها ضربه بزنند.8-طراحی مداوم تجربهطراحی تجربه مداوم به این معناست که اگر سایت / برنامه شما به صورت وب و موبایل موجود است ، با حفظ تجربه مشابه سایر دستگاه ها ، محتوای خود را در دستگاه های کوچک به حداقل برسانید.مقاله از سایت UXCollectiveUX/UI LoverUX/UI LoverThu, 04 Jun 2020 18:15:00 +0430