https://virgool.io/feed/@MahnazSalari fa 2026-06-16 09:12:48 https://files.virgool.io/upload/users/201641/avatar/IpTKrR.png?height=120&width=120 https://virgool.io/@MahnazSalari https://virgool.io/@MahnazSalari/%D8%B3%DB%8C%D8%B3%D8%AA%D9%85-%D8%B1%D9%86%DA%AF-%D8%AF%D8%B1-%D9%85%D8%AA%D8%B1%DB%8C%D8%A7%D9%84-%D8%AF%DB%8C%D8%B2%D8%A7%DB%8C%D9%86-r69ebrdcd1k4 سه اصل مهم در طراحی از منظر متریال : 1-رنگ 2-چیدمان 3-تایپوگرافی است. رنگ یکی از مهمترین عناصر هویت بخشی به نام تجاری است.رنگ‌ها نیز همچون اندازه، برای طراحان اهمیت دارند. بخش زیادی از تاثیرگذاری در احساس و ظاهر طراحی، مربوط به این بخش است رنگ ها علاوه بر این که برای کاربر بار روانی ایجاد میکنند می‌توانند این احساس را به وجود آورند که این طراحی قابل‌اعتماد یا هیجان‌انگیز است. در طراحی متریال، ما به یک پالت رنگ گسترده دسترسی داریم که می‌توانیم به وسیله آن، پایه طراحی اپلیکیشن خود را ایجاد کنیم (توصیه می‌شود تا از منبع رنگ‌های گوگل که برای انتخاب رنگ های مناسب برای طراحی ایجاد شده است، برای طراحی‌های خود استفاده کنید).اولین نکته در طراحی، انتخاب تم رنگی است، تم رنگی نشان گر برند و یا سبک کار شما می باشد متریال به شما کمک میکندکه رنگ را به روشی معنی دار اعمال کنید در این سیستم یک رنگ اصلی وثانویه برای نشان دادن نام تجاری خود انتخاب می کنید در انتخاب رنگ توجه ب سه نکته مهم و حائز اهمیت هست :انتخاب بر اساس سلسله مراتب رنگ نشان می دهد کدام عناصر در طراحی شما تعاملی هستند همین طور نحوه ارتباط آنها با سایر عناصر و سطح برجستگی آنها(عناصر مهم باید بیشتر از همه برجسته شوند) را بیان می کند.خواناییمتن و عناصر مهم، مانند آیکون ها، هنگام نمایش در زمینه های رنگی باید معیارهای خوانایی را رعایت کنند.رسایی رنگ های برند را به گونه ای نشان دهید که باعث تقویت سبک برند و به خاطر سپردن اون بشه مثلا همه ی شما کوکاکولا رو بارنگ قرمز میشناسین یا تم رنگی آبی و سفید در فیس بوکدر طراحی متریال، رنگ اصلی رنگی است که در دیزاین شما بیشتر ظاهر می‌شود و خودنمایی می‌کند و رنگ ثانویه رنگی است که برای تأکید بخش‌های کلیدی رابط کاربری شما استفاده می شود. ⦁ بهترین موارد استفاده از رنگ ثانویه در موارد زیر است: ⦁ دکمه، دکمه شناور و متن دکمه ⦁ فیلدهای متنی، مکان‌نما و رنگ انتخاب متن ⦁ نوار پیشرفت ⦁ کنترل‌ها و پیکان‌ها (همونایی که کناره یا پایین اسلایدرها قرار میگیرند ? )، دکمه‌ها و اسلایدرها ⦁ لینک‌ها ⦁ عنوان‌هارنگ بندی(Color schemes)تعادل رنگ در طراحی بسیار حیاتی است، زیرا اولین نگاه به وبسایت یا اپلیکیشن اثر خود را بر کاربر گذاشته و رنگ ها تاثیر زیادی در این امر دارند. طراحان طرح های رنگی اساسی، یا همان هماهنگی رنگ را مشخص کرده اند که امری بسیار کارآمد است.تک رنگی (Monochromatic)این سیستم بر پایه استفاده از یک رنگ باTone و سایه های مختلف در آن است. از آنجا که انجام اشتباه و خلق یک رنگ بندی ناخوش آیند در این روش مشکل است، هارمونی تک رنگ همیشه یک انتخاب موفقیت آمیز است.گردونه رنگمتشابه (Analogous)برای ایجاد هماهنگی متشابه، شما باید از رنگ هایی که در گردونه رنگ درست در کنار یکدیگر واقع شده اند استفاده کنید. این نوع رنگی بندی برای انواعی از طراحی که در آن هیچ گونه کنتراستی مورد نیاز نیست، مانند پس زمینه صفحات وب یا آگهی ها، مورد استفاده قرار می گیرد.مکمل (Complementary)طرح مکمل استفاده از ترکیب رنگ هایی است که در گردونه رنگی رو به روی یکدیگر قرار می گیرد. این طرح بر عکس طرح متشابه و تک رنگ می باشد، زیرا هدف آن تولید کنتراست بالا است. به عنوان مثال، تشخیص دکمه نارنجی در پس زمینه آبی، در هر رابط کاربری(UI) آسان است. این سیستم رنگ بندی در طراحی UI کاربرد فراوان دارد.متساوی‌الساقین (Split-Complementary)این طرح مشابه طرح قبلی عمل کرده، اما از رنگ های بیشتری استفاده می کند. به عنوان مثال، اگر رنگ آبی را انتخاب کرده باشید، باید از دو رنگ دیگر که در مجاورت رنگ های مخالف آن هستند یعنی زرد و قرمز نیز استفاده کنید. کنتراست در اینجا کمتر از طرح مکمل بوده اما به شما اجازه می دهد رنگ های بیشتری استفاده کنید.رنگ های سه گانه (Triadic)هنگامی که طراحی شما نیاز به رنگ های بیشتری دارد می توانید طرح سه گانه را امتحان کنید. این مدل بر پایه سه رنگ جداگانه استوار است که بر روی گردونه رنگ در سه نقطه مساوی قرار دارند. برای ایجاد تعادل در این طرح، توصیه می شود از یک رنگ به عنوان رنگ غالب، و از دو رنگ دیگر برای ایجاد برجستگی در طرح خود استفاده کنید.حالا 3 تا از ابزارهای متریال ومعرفی میکنم که اگه یه طراح هستین حتما خیلی به کارتون میاد: 1- Material design palette متریال دیزاین پالت فقط یه پالت رنگی نیست یه ابزار جستجو آیکون و رنگ هست که متریال به شما اجازه میده یک یا دورنگ انتخاب کنین و بعد پالت رنگی رو بهتون نمایش میده که ازش میتونین در طراحی قسمت های مختلف اپلیکیشونتون استفاده کنین.2- Sketchappsources این سایت یه آرشیو مناسبی از فایل های قابل دانلود هست که میتونین پالت طراحی متریال رو اونجا پیدا و دانلود کنین به همین سادگی به همین خوشمزگی?۳. Material UI این ابزار در درجه اول برای توسعه‌دهندگان و طراحان است که می‌خواهند به سرعت طراحی کد رنگی را که مطابق با استانداردهای متریال دیزاینح است طراحی کنند و از فرمت های مختلف رنگی پشتیبانی میکند بعلاوه این سایت همچنین به عنوان “برگه تقلب” رنگ‌ها شناخته می‌شود! چرا که تمام رنگ‌های موجود را در یک صفحه برای کاربر انتخاب می‌کند. mahnaz salari mahnaz salari Fri, 10 Jul 2020 12:52:27 +0430 https://virgool.io/@MahnazSalari/%D9%85%D8%B7%D8%A7%D9%84%D8%B9%D9%87-%D9%85%D8%AA%D8%B1%DB%8C%D8%A7%D9%84-material-studies-rxm8iz1q7qwj مطالعه متریال یا همون Material Studies در واقع انعطاف پذیری Material Theming و مؤلفه ها رو برای ایجاد کردن برنامه های بیانی و منحصر به فرد نشون میده!شما از این مطالعات میتونین برای ساختن اپ منحصر به فرد خودتون الهام بگیرین چرا که این مطالعات با بررسی طراحی و محدودیت های مجموعه ای از محصولات در دنیای واقعی نشون میده که چه تصمیمات مختلفی در پروسه طراحی گرفته میشه و چطوری برندهای مختلف خدمات و تقاضاهای خودشون رو در انواع دسته بندی بیان میکنن.اما اصول مطالعاتی متریال به چه صورت هست؟در واقع سه اصل کلی در مطالعات متریال رعایت شده: 1- اصل بیان (Expressive): که هر قسمت مطالعه متریال برای برجسته کردن قابلیت‌هایی که Material Theming ارائه میکنه، یک برند متفاوت رو بیان می‌کنه.2- اصل متنوع بودن(Diverse): برای اطمینان از توجه به مضمون های متریال، مطالعات متریال انواع مختلف محصولات و بررسی میکنه.3- اصل مبتنی بر واقعیت (Reality-based): برای عینأ بازسازی کردن محصول واقعی userfllow رو نمایش می‌ده و محدودیت‌های دنیای واقعی رو اعمال می‌کنه.در ادامه این توضیحات چندتا اپلیکیشن در زمینه های مختلف مثال زده شده که برای شروع بررسیش خالی از لطف نیست ?Basil ShrineCraneFortnightlyOwlRallyReplyبعد از یک معرفی اجمالی از هر اپلیکیشن، متریال : معماری محصول، ترکیب و چیدمانش، تم رنگی محصول، تایپوگرافی، آیکون گرافی، Shape های مختلف به کار رفته در طراحی، اجزای مختلف (مثل:Lists، Bottom sheet،Tabs و ...) بررسی کرده و در آخر هم در مورد Motion های برنامه صحبت میکنه.که همه این بخش ها در اپ هایی که براتون لیست کردم جزئیاتش هست و با کلیک روی هرکدوم به صفحه اون اپ هدایت میشین.به عنوان سخن پایانی اینطوری میخونیم که :"متریال یک سیستم سازگار از دستورالعمل ها ، مؤلفه ها و ابزارهاییه که از بهترین شیوه های طراحی رابط کاربری پشتیبانی می کنه. پشتیبانی از کد منبع آزاد(open-source) ، همکاری بین طراحان و توسعه دهندگان رو ارتقا می بخشه و به تیمها کمک می کنه تا به سرعت محصولات زیبایی را بسازن."خودم نوشته از : Material Studies mahnaz salari mahnaz salari Sun, 31 May 2020 19:58:21 +0430 https://virgool.io/@MahnazSalari/material-design-%DB%8C%D8%A7%D8%AF%DA%AF%DB%8C%D8%B1%DB%8C-%D9%85%D8%B1%D8%AD%D9%84%D9%87-%D8%A8%D9%87-%D9%85%D8%B1%D8%AD%D9%84%D9%87-q70rrh6lbgqx شروع همیشه میتونه سخت باشه اما استارت این کارو امروز میزنم تا حتی اگ مخاطبی برای خوندن این مطالب نباشه صفحه ای برای نگهداری از یادداشت های خودم بمونه!خب متریال دیزاین عزیز، اگه بخام با مقدمه ای که خودش شروع کرده بگم اینطوریه که "زبانی بصری است که اصول کلاسیک طراحی خوب را با نوآوری فناوری و علم ترکیب می کند."از منظر من به عنوان یه شخص که علاقمند به طراحی رابط کاربری هست متریال یک بستر خوب و راهنمای عالی برا شروعه که گول از طریق اون سعی داره برای ایجاد پروسه طراحی(رابط کاربری (UI) قابل لمس ) یک پل بین بین دو دنیای دیجیتال و واقعی، ایجاد کنه .تووی قسمت مقدمه متریال اهداف اون به شرح زیر اومده:1- ایجاد کردن: یعنی بتونین یک زبان بصری ایجاد کنید که اصول کلاسیک طراحی خوب را با نوآوری و امکان فناوری و علم ترکیب کنه.2- متحد کردن: یعنی یک سیستم زیربنایی واحد ایجاد کنین که تجربه کاربر رو بین سیستم عامل ها ، دستگاه ها و روش های ورودی ،متحد و یک شکل بسازه.3- شخصی سازی: یعنی زبان بصری متریال را گسترش داده و پایه ای انعطاف پذیر برای نوآوری و بیان برند فراهم کنید. به نظرم یکی از مهم ترین اهداف همین شماره 3 هست به بیان ساده تر الگو برداری از متریال و بسط دادنش توی پروژه ی شخصی مهم ترین دستاورد از این طیف گسترده میتونه باشه.اصولی که متریال از اون الهام گرفته از دنیای بصری هست که با استفاده از مؤلفه های مشترک در Android ، iOS ، Flutter و وب ، UI یکسان را در سیستم عامل ها حفظ می کند. توی قسمت مقدمه به این تیتر برمیخوریم :"Getting around" ترجمه کلمه ایش میشه دور زدن و یکم بالاپایین کردن اون چیزهای که تووی متریال قراره یادبگیریم!در واقع مطلبی که تووی این قسمت آورده شده مرتبط با شخصی سازی مواد و به اشتراک گذاری کار طراحی و ساخت در مطالعات Material و بیان هویت منحصر به فرد محصول با Material Theming هست.که با پیمایش در این سه بخش ، چیزهایی که لازم دارین و میتونین پیدا کنین:1- سیستم متریال (Material System): سیستم طراحی پیشرفته که با ابزار و مؤلفه های مواد برای بهبود جریان کار بین طراحی و توسعه یکپارچه شده.2- بنیاد متریال (Material Foundation): نحوه ساخت برنامه خود با استفاده از معماری Design Material ، ضمن یادگیری اصول و نظریه ای که پایه و اساس طراحی متریال هست .3- دستورالعمل های متریال (Material Guidelines): که به تنظیم سیستماتیک یک موضوع منحصر به فرد از متریال در سراسر محصول و از استفاده کردن از اون - از طراحی گرفته تا کد را شامل میشه.* یکی دیگه از قسمت های جذاب متریال update های اون هست که حتمن راجبهش صحبت میکنیم و سعی میکنم از طریق همین صفحه جدیدترین اخبار در دنیای طراحی و به اشتراک بذارم.در آخر باید از خود متریال نقل قول کنم که میگه :" طراحی متریال یک سیستم سازگار از دستورالعمل ها ، مؤلفه ها و ابزارهایی است که از بهترین شیوه های طراحی رابط کاربری پشتیبانی می کند. پشتیبانی از کد منبع آزاد ، همکاری بین طراحان و توسعه دهندگان را ارتقا می بخشد و به تیمها کمک می کند تا به سرعت محصولات زیبایی را بسازند."خب مقدمه همین جا به پایان میرسه و امیدوارم کلی آموزش های خوب یاد بگیریم از متریال عزیز :)خودم نوشته از : material.io mahnaz salari mahnaz salari Sat, 30 May 2020 20:10:35 +0430