برچسب: طراحی رابط کاربری (UI)

به چه کسی طراح UI و UX می گویند و این فرد چه مسئولیتی دارد؟

امروز می خواهیم در مورد نقش ها، مسئولیت ها و مهارت های کلیدی یک طراح UI و UX بیشتر بیاموزیم. این مطلب به شما کمک می کند تا بفهمید برای این شغل به چه چیز هایی نیاز دارید و کارفرمایان در یک طراح UI یا UX به دنبال چه چیز هایی هستند.

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

طراح UX کیست و چه می کند؟
طراح UI کیست و چه می کند؟
کار یک طراح معمولی UI یا UX چیست؟
مهارت های کلیدی یک طراح UI یاUX
5 کار در تعامل با طراحی UI و UX
مسئولیت های کلیدی یک طراح UI یا UX چیست؟
سوالات متداول در مورد شغل طراحی UI یا UX

در ادامه شما را با تمام فاکتور هایی که یک طراح UI و UX باید داشته باشد آشنا خواهیم کرد و در مورد مسئولیت های این مشاغل مربوط به رابط کاربری بیشتر صحبت خواهیم کرد.

طراح UX کیست و چه می کند؟

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

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

وظایف طراح تجربه کاربری

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

طراح UI کیست و چه می کند؟

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

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

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

کار یک دیزاینر معمولی UI/UX چیست؟

کار اصلی یک طراح UI/UX معمولی ترکیبی از مسئولیت ها و صلاح دید های کلیدی را در بر می گیرد، این مسئولیت ها عبارت اند از:

با درک نیاز های کسب و کار خود، نظرات مشتریان، سفر های کاربر در سایت، بازخورد مشتریان و یافته های دیگر طرح های کاربر پسند ایجاد کنند.
باید به طور مداوم user flows ها، وایر فریم ها، نمونه های اولیه و مدل هایی با fidelity پایین و بالا ایجاد کنند.
به طور منظم با تیم های طراحی و مهندسی، سهامداران تجاری و رهبران اجرایی تیم خود ارتباط برقرار کنند.
با گنجاندن بازخورد مشتری، معیار های استفاده و یافته های قابل استفاده در طراحی، اطمینان حاصل کنید که صدای مشتری وجود دارد.
انجام تجزیه و تحلیل های متریک پس از راه اندازی خدمات یا محصول و تلاش برای بهینه سازی طراحی های UX.
نحوه استفاده از ابزار های مدل سازی مانند نرم افزار Sketch یا Invision یا معادل آن ها را بداند.
دارای مهارت های ارتباطی و کار تیمی عالی باشد.

مهارت های کلیدی طراحان UI/UX

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

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

5 کار در تعامل با طراحی UI و UX

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

طراحی UI/UX: دامنه این کار ایجاد رابط کاربری بر اساس بینش تحقیقاتی کاربر است. برای دستیابی به این هدف، طراحان از فرآیند هایی مانند قالب بندی و نمونه سازی و به دنبال آن تست نمونه های اولیه استفاده می کنند. طراح UI/UX جامع ترین تعریف است و ممکن است در برخی سازمان ها، توابع UI/UX با یک عنوان شغلی دیگر ترکیب می شوند.
طراحی بصری: طراحان بصری مسئول ظاهر و احساسات یک محصول فیزیکی یا دیجیتالی هستند. این ظاهر می تواند شامل همه چیز، از بسته بندی گرفته تا طراحی وب سایت مربوط به محصول باشد. طراحان بصری برای ایجاد تجربه زیبا، کاربر پسند و کارآمد با طراحان UI و UX در تعامل کار می کنند. همچنین گاهی به طراحان UI و UX در توسعه نمونه های اولیه نیز کمک می کنند.
تحقیق و کاربرد: محققان UI/UX بر جمع آوری اطلاعات ورودی از کاربران تمرکز می کنند. آن ها با کاربر مصاحبه می کنند، کاربران را در محیط های آزمایشی مشاهده می کنند، گروه های خاص را میزبانی می کنند و نظر سنجی طراحی می کنند. همچنین آن ها مسئول تبدیل داده های کیفی و کمی ساختار یافته و بدون ساختار به ایده های قابل استفاده برای تیم UI/UX هستند، به این معنی که آن ها باید تحلیلگران داده ماهری باشند.
کد نویسی: مهندسان UX رابط بین تیم های طراحی و مهندسی هستند. آن ها مسئول گرفتن یک طرح و زنده کردن آن با کد هستند. مهارت کدینگ یک مهندس UX شامل یادگیری زبان های کامپیوتری مانند HTML ،JS ،CSS و غیره می شود.
نوشتن UI و UX: نوشتن UI و UX یک تخصص خاص است. این شامل کلماتی می شود که هنگام استفاده از یک محصول دیجیتالی می خوانیم یا می شنویم یا به عنوان یک عنصر کلیدی در ناوبری وب سایت آن را مشاهده می کنیم. Microcopy ابزاری قدرتمند برای ایجاد یک تجربه خوب برای کاربران است.

مسئولیت های کلیدی یک طراح UI یا UX چیست؟

طراحان UI/UX مسئول رضایت کلی کاربر از یک محصول یا خدمات هستند. اولویت آن ها این است که به طور مداوم به دنبال راه هایی برای بهبود تجربه کاربری بهتری از محصول باشند. این کار حتی برای محصولات پر فروشی که سال ها در بازار بوده اند، نیز به طور مداوم انجام می شود.

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

سوالات متداول در مورد طراحان UI/UX

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

آیا طراحی UI/UX برای من مناسب است؟

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

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

آیا طراحی UI/UX خودکار خواهد بود؟

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

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

چگونه تجربه کاربری را اندازه گیری می کنید؟

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

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

چگونه تجربه کاربری را بهبود می دهید؟

کاهش تلاش جزء بزرگی در بهبود طراحی UI/UX است. مردم نمی خواهند مجبور به جستجوی اطلاعات باشند یا روی دکمه هایی که منجر به پیوند های مرده و دارای ارور می شوند کلیک کنند. آن ها رابط هایی را انتخاب می کنند که آن ها را در کوتاه ترین زمان ممکن به اهدافشان برساند و برند هایی را که این استاندارد های کارایی و سهولت استفاده را رعایت نمی کنند کنار می گذارند.

منبع:
springboard.com

1400/10/04برچسب‌ها:برترین طراحان, تیم طراحی وب موفق, طراح تجربه کاربری (UX), طراحی UI و UX, طراحی رابط کاربری (UI)

آشنایی با فریم ورک Tailwind و مقدمه ای بر آشنایی با Tailwind CSS

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

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

فهرست مطالب

Tailwind CSS چیست؟
روش های مختلف برای نصب و پیکربندی Tailwind CSS.
نحوه استفاده از کلاس های مبتنی بر ابزار نسبت به کلاس های از پیش نوشته شده معمولی.

نکته: برای دنبال کردن این آموزش، درک اولیه HTML و CSS ضروری بوده و هر گونه تجربه قبلی با چارچوب CSS یک مزیت اضافی است.

فریم ورک Tailwind CSS چیست؟

Tailwind یک فریم ورک CSS است که توسط آدام واتان ایجاد شد. برخلاف سایر فریم ورک‌ ها، Tailwind از کلاس هایی از پیش ساخته تشکیل نمی شود تا به تگ های HTML اضافه شود. در عوضTailwind، از یک رویکرد متفاوت استفاده می کند، Tailwind با استفاده از کلاس های مبتنی بر ابزار، سطح بسیار پایین تری از کنترل را به ارمغان می آورد.

نصب و راه اندازی Tailwind

بیایید مستقیماً وارد این فریم ورک شویم و Tailwind CSS را نصب کنیم تا بتوانیم اطلاعات بیشتری در مورد آن کشف کنیم. البته بسته به نوع استفاده شما از این فریم ورک، شما دو راه برای نصب Tailwind CSS دارید.

روش اول: نصب با استفاده از CDN

استفاده از CDN رایج ترین روش استفاده از هر چارچوبی در CSS است و Tailwind نیز از این قاعده مستثنی نیست. برای این کار ما باید ابتدا فایل CSS مربوط به Tailwind را از CDN به شکل یک پیوند در قسمت head فایل HTML خود اضافه می کنیم.

برای این کار شما باید ابتدا یک فایل HTML ایجاد کنید و نامی برای آن بگذارید. ما نام فایل خود را .index.html خواهیم گذاشت، سپس در داخل آن، کد HTML boilerplate را بنویسید و CDN را مطابق شکل زیر اضافه کنید:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Section Tailwind Demo</title>
    <link
      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
  </head>
  <body></body>
</html>

تا اینجا ما Tailwind CSS را در پروژه خود نصب کرده ایم. البته باید توجه داشته باشید که نصب فریم ورک Tailwind CSS با استفاده از CDN خود دارای چند شرط مهم است، که باید به آن ها توجه کنید، برخی این شرایط مانند:

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

روش دوم: نصب با استفاده از NPM

استفاده از روش NPM تجربه کاملی از کار با Tailwind CSS را به شما می دهد. این یک روش نصب رایج است زیرا اکثر فریم ورک های جاوا اسکریپت از رویکردی مشابه آن استفاده می کنند. البته بسته به معماری فریم ورک، تفاوت های کمی در فرآیند نصب آن ها وجود دارد.

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

mkdir section-tailwind-demo && cd section-tailwind-demo

npm init -y

اجرا در ترمینال:

npm install tailwindcss@latest postcss@latest autoprefixer@latest

دستور بالا تمام asset های مورد نیاز ما را نصب می کند. بعد از آن، ما باید یک اسکریپت برای پیکربندی Tailwind CSS و PostCss ایجاد کنیم. برای تولید این اسکریپت ها، از “tailwind cli”، یکی از ابزار ارائه شده توسط فریم ورک Tailwind CSS استفاده می کنیم.

اجرا در ترمینال:

npx tailwind init -p

دو فایل tailwind.config.js و .postcss.config.js آن نیز به شکل زیر اند:

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

.postcss.config.js

فایل .postcss.config.js هم باید شبیه به کد زیر باشد:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

اکنون که با موفقیت محیط مورد نظر خود را راه اندازی کردیم، اجازه دهید Tailwind CSS را نیز در پروژه خود راه اندازی کنیم. برای این کار ابتدا دو فایل ایجاد کنید. یک فایل HTML به نام index.html و یک فایل stylesheet به نام style.css.

قسمت HTML می تواند دستور پایه boilerplate را در ابتدای article داشته باشد. در فایل CSS نیز باید به autoprefixer اطلاع دهیم که از Tailwind CSS استفاده خواهیم کرد. ما این کار را با وارد کردن فایل‌های Tailwind CSS، مطابق شکل زیر انجام می دهیم:

@tailwind base;
@tailwind components;
@tailwind utilities;

در نهایت، ما باید Tailwind CSS خود را بسازیم، بنابراین در ترمینال اجرا به چنین چیزی نیاز داریم:

npx tailwindcss-cli@latest build -o css/tailwind.css

این دستور، یک فایل tailwind.css در پوشه CSS ایجاد می کند. همچنین دستور -o در دستور ما، مخفف راه خروجی است و ما مشخص کردیم که فایل خروجی ما در مسیر css/tailwind.css قرار بگیرد.

توجه: برای کار با این دستور نیازی به داشتن یک فایل CSS نیست، زیرا ما فایل CSS Tailwind را تولید می کنیم. با این حال، ممکن است برای افزودن سبک های سفارشی، به فریم ورک Tailwind CSS در این فایل، یا مخلوط کردن Tailwind CSS با CSS سفارشی، به فایل style.css نیاز داشته باشیم.

یک روش متفاوت برای پردازش CSS این است که آن را در تولید با افزودن یک اسکریپت در package.json انجام دهید. ما از postcss cli برای اجرای عملیات در طول زمان ساخت استفاده می کنیم. برای انجام این کار، ابتدا باید PostCSS CLI را نصب کنیم.

برای این کار، این را در ترمینال اجرا کنید:

npm install postcss-cli

بعد، اسکریپت ساخت را در package.json به این صورت اضافه می کنیم:

 "scripts": {
 "build": "postcss style.css -o css/tailwind.css"
 }

اکنون، زمانی که npm run build را اجرا می کنید، باید فایل مربوط به فریم ورک CSS Tailwind را همانطور که می خواستیم در یک پوشه CSS کامپایل کنید. سپس باید فایل Tailwind CSS خود را مانند یک فایل CSS معمولی به HTML اضافه کنیم.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link  rel="stylesheet"  href="css/tailwind.css" /
>

  </head>
  <body></body>
</html>

به این ترتیب، تا این جا ما همه چیز را آماده کرده ایم و فریم ورک Tailwind نصب شده است.

کار با کلاس های کاربردی فریم ورک Tailwind

برای نشان دادن و توضیح نحوه عملکرد کلاس ها و ابزار های آن، اجازه دهید با استفاده از Tailwind CSS یک دکمه ایجاد کنیم. این کار نشان می دهد که چگونه فریم ورک Tailwind CSS بر عناصر HTML تأثیر می گذارد.

در تگ Body در صفحه HTML، اضافه کنید:

<button>Section</button>

بیایید چند کلاس به دکمه خود اضافه کنیم زیرا اینگونه ساده به نظر می رسد. در Tailwind CSS، مقدار رنگ بسته به شدت رنگ از 100 تا 900 متغیر است. کلاس کاربردی برای پس زمینه bg است. برای اینکه پس زمینه دکمه مان به رنگ سبز ملایم، رنگ شود، کلاس bg-green-100 را اضافه می کنیم.

در مرحله بعد، بیایید متن را در دکمه استایل کنیم. برای این کار از کلاس متنی utility استفاده می کنیم. برای اضافه کردن متن به رنگ، کلاس text-green-100 را اضافه می کنیم، اما ویژگی های مربوط به رنگ باقی می مانند.

تا کنون دکمه ما خوب به نظر می رسد، بنابراین اکنون بیایید padding را به آن اضافه کنیم. نحوه کار با padding بسیار ساده است، به این صورت است که اول ویژگی، اندازه و سپس مقدار آن می آید.

این برای همه ویژگی ها مانند اندازه، فاصله و حاشیه اعمال می شود. برای اضافه کردن مقادیر به padding، کد به صورت pb-8 خواهد بود. این مقادیر از 0 تا 64 متغیر است. برای اینکه ببینید دامنه ها چگونه کار می کنند، می توانید آن ها را تست کنید.

در مثال ما، padding ما دارای مقادیر py-2 برای بالا و پایین، و px-6 برای چپ و راست خواهد بود. بیایید مقداری حاشیه هم در بالا، با my-20 و مقداری در سمت چپ با mx-20 اضافه کنیم.

اکنون، بیایید دکمه را با ابزار rounded utility گرد تر کنیم. می توانید فهرست کاملی از ابزار های مرزی شعاع و همه کلاس های آن ها را در مستندات بیابید. ما از شعاع مرزی 0.5em استفاده خواهیم کرد که مربوط به lg گرد است.

در نهایت، اجازه دهید مقادیر شناور به آن اضافه کنیم تا دکمه زنده تر شود. برای انجام این کار، کلاس‌های hover:hover:bg-green-600 و hover:text-green-200 را اضافه می کنیم.

با آن، ما دکمه خود را بدون CSS استایل داده ایم. نکته مهمی که باید به آن دقت کنید این است که فریم ورک Tailwind CSS تا چه حد به شما کنترل بر استایل و عناصر می دهد. در نهایت کد نهایی ما به این صورت است:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Section-Tailwind-Demo</title>
    <link  rel="stylesheet"  href="css/tailwind.css" /
>

  </head>
  <body>
 <button

      type="button"
      class="hover:bg-green-600 hover:text-green-200 bg-green-100 text-green-700 mx-20 my-20 px-6 py-2 rounded-lg"
    >
      Section
    </button>
 </body>
</html>

شکل نهایی کد (دکمه ما) باید به شکل روبرو باشد:

نتیجه:

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

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

منبع:
www.section.io

1400/08/26برچسب‌ها:CSS آماده, طراحی رابط کاربری, طراحی رابط کاربری (UI), طراحی سایت

مقایسه دو نرم افزار طراحی سایت Figma و Sketch

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

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

فهرست مطالب

مقایسه قیمت گذاری Figma و Sketch
بررسی کارایی های هر دو نرم افزار
امکانات Figma در مقابل Sketch
پاسخ به سوال Figma یا Sketch

در ادامه به مقایسه Figma و Sketch در همه ابعاد می پردازیم. با ما همراه باشید.

مقایسه قیمت گذاری Figma و Sketch

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

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

اگر به نسخه‌ های آزمایشی و ماهانه گذشته نگاه کنید، تا کنون Figma و Sketch قیمت‌ های مشابهی داشته اند. اما اگر هزینه آن ها به صورت‌ حساب سالانه مقایسه شود، Figma برای شما ۱۴۴ دلار و Sketch برای شما ۹۹ دلار هزینه خواهد داشت.

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

مقایسه قیمت در پروژه های کوتاه مدت و بلند مدت

بیایید هزینه های یک طراح را که باید از Figma یا Sketch برای یک پروژه طراحی کوتاه 6 ماهه و یک پروژه بلند مدت 2 ساله استفاده کند محاسبه و مقایسه کنیم:

در مورد پروژه طراحی شش ماهه، اگر به سراغ گزینه پرداخت ماهانه بروید، می توانید Figma را ارزان تر دریافت کنید. این قیمت برای Figma به 75 دلار برای شش ماه کاهش می باید در حالی که به هرحال برای Sketch باید اشتراک یک ساله آن را به قیمت 99 دلار بخرید. همین امر در مورد یک پروژه طراحی بلند مدت، بر عکس است، زیرا Sketch در مدت دو سال برای شما 198 دلار هزینه دارد، اما قیمت دو ساله Figma تا 240 دلار می رسد.

بررسی کارایی های هر دو نرم افزار

در مرحله بعد، عملکرد و در دسترس بودن Figma و Sketch را داریم. مهم ترین تفاوت بین این دو ابزار این است که Sketch بیشتر برای طراحی وب سایت های موبایلی کاربرد داشته و فقط در macOS در دسترس است. این یک چیز بد به نظر می رسد، اما نکته مثبت این است که Sketch یک برنامه بومی برای macOS است و می تواند از همه چیز هایی که macOS ها ارائه می دهند به طور کامل استفاده کند.

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

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

امکانات Figma در مقابل Sketch

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

مثلاً Sketch نسبت به Figma برای مدت زمان طولانی تری در دسترس بوده است، بنابراین از نظر ویژگی های مختلف با تجربه تر عمل می کند. از سوی دیگر، Figma نرم افزار جدیدی است که می تواند به کمبود های Sketch نگاه کرده و آن ها را به لیست ویژگی های خود اضافه کند.

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

در مقایسه موضوع همکاری در پروژه ها می توان Figma را از Sketch متمایز کرد. شما می توانید در یک زمان با طراحان دیگر در Figma همکاری داشته باشید. اما در Sketch باید حتماً نسخه‌ فایل‌ های طراحی خود را با طراحان دیگر به اشتراک بگذارید، تا بتوانید با آن ها همکاری کنید.

تنوع در ایده های طراحی سایت

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

نکته ای که باید در نظر داشته باشید این است که هر رقیب تجاری تمایل دارد ایده های دیگری را بدزدد. همانطور که Sketch دارای ویژگی های افزونه عالی است، فیگما هم Figma از نظر همکاری عالی است. اما، Sketch اخیراً اعلام کرده است که همکاری real-time در حالت بتا بوده است تا بتواند با Figma رقابت کند. در حال حاضر، ما معتقدیم که Sketch نسبت به Figma دارای ویژگی های سنگین تری است، اما این می تواند در آینده تغییر کند.

پاسخ به سوال Figma یا Sketch

در انتهای این مطلب مقایسه ای زمان آن رسیده است که در نهایت به سوال Figma یا Sketch پاسخ دهیم. اول، ما می خواهیم تأکید کنیم که انتخاب بین این دو نرم افزار می تواند به دیگران بستگی داشته باشد. مثلاً اگر مجبورید از Sketch استفاده کنید، چون همکاران شما این کار را انجام می دهند، خب هیچ انتخاب دیگری نخواهد داشت.

اما برای مقایسه موارد دیگر، به این جدول مقایسه Figma و Sketch نگاهی بیندازید.

ابزار طراحی	Sketch	Figma
قیمت:	99 دلار در صورت خرید سالانه	144 دلار در صورت پرداخت سالانه
عملکرد:	بومی MacOS	مبتنی بر وب پشتیبانی می کند
در دسترس بودن:	فقط مک	هر دستگاه دارای مرورگر
ویژگی ها:	جامعه پلاگین قوی	همکاری همزمان (Real-time)

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

نتیجه:

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

منبع:
thedesignerstoolbox.com

1400/08/10برچسب‌ها:تجربه کاربری, طراح تجربه کاربری (UX), طراحی رابط کاربری, طراحی رابط کاربری (UI), طراحی سایت, طراحی سایت موبایل

نرم افزار Sketch چیست و برای چه نوع طراحی هایی مناسب است؟

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

Sketch چیست؟

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

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

در حال حاضر، Sketch یک ابزار پیشرو برای طراحان UX/UI و طراحی UI است. البته که این تنها برنامه طراحی نبوده و نرم افزار های رقابتی مانند Figma ،Adobe XD و InVision Studio نیز در رقابت با Sketch وجود دارند. اما خب Sketch به لطف افزونه های متنوع که به راحتی نصب می شوند، می تواند به راحتی امکانات خود را گسترش دهد. می توانید از این افزونه های Sketch برای مدیریت کتابخانه های طراحی UI نیز به راحتی استفاده کنید.

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

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

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

اهداف مربوط به طراحی های UI/UX:

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

اهداف طراحی گرافیک با Sketch:

تصویر برداری
تصاویر رسانه های اجتماعی
بنر های تبلیغاتی
تمام موادی که در طراحی ارائه می شود (کپی و چسباندن طرح کاملاً با Keynote کار می کند)

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

آیا Sketch ارزش استفاده را دارد؟

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

معمولاً سازندگان به روزرسانی های زیادی از Sketch ارائه می دهند و در هر نسخه ویژگی های مفید جدیدی را معرفی می کنند. ویژگی های جدید می توانند گردش کار شما را بهبود ببخشند. چند نمونه از این بهبود های بروز رسانی را می توانید در لیست زیر ببینید:

بهبود در Sketch 55: بهبود سرعت کار و افزایش سرعت شما
بهبور در Sketch54 : چگونه 3 ویژگی جدید گردش کار طراحی شما را بهبود می بخشد.
اضافه شدن 3 ویژگی منحصر به فرد به Sketch که به من انگیزه ایجاد User Flow Library را داد.
Sketch اکنون به ابزار طراحی کامل UX تبدیل شده است.

اگر می خواهید Sketch را با رقبای دیگر مقایسه کنید، به نظر من قطعاً Sketch در بین طراحان دیگر برنده خواهد شد.

دو نمونه منبع طراحی در Sketch

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

ایجاد جریان کاربری (User Flows) سریع تر در Sketch:

شما با SQUID می توانید User Flows را مستقیماً در برنامه Sketch در قسمت sketch file با برد هنری خود ایجاد کنید. برای این کار همه چیز تنها با چند کلیک ساده انجام می شود.

ایجاد طرح های مربوط به وب سایت و موبایل سایت تنها در عرض چند دقیقه:

شروع طراحی UI از ابتدا خسته کننده است. من همیشه در این فکر بودم که چگونه می توان از این مرحله عبور کرد تا بر کار های جالب تر تمرکز کنم. Prime Design System Kit منبعی است که به شما امکان می دهد تمام عناصر UI ضروری را به سرعت سفارشی کرده و مستقیماً به جذاب ترین قسمت های فرآیند طراحی بپردازید. به علاوه این منبع، شامل نمودار ها، الگو های دستگاه و کیت تصویر سازی برای سرعت بخشیدن به کار های خاص است. به لطف طراحی Prime شما طراحی وب سایت یا تلفن همراه را تنها در عرض چند دقیقه انجام می دهید.

جمع بندی:

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

منبع:
uxmisfit.com

1400/07/24برچسب‌ها:ابزار طراحی, ابزار طراحی سایت, طراحی رابط کاربری (UI)

آشنایی با Material Design و شناخت انواع ابزار های آن

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

از زمان ایجاد وب تا کنون این حوزه دستخوش تغییرات زیادی شده است. طراحی های اولیه وب با دردسر های فراوان در دهه 1990 و اوایل 2000 آغاز شد و در نهایت راه برای وب سایت های ساده تر، تمیز تر و قابل پیش بینی تر باز شد. سپس، تلفن های هوشمند وارد معرکه شدند و حوزه وب به تغییرات عظیمی نیازمند شد. این تغییرات ابتدا زلزله عظیمی در دنیای طراحی ایجاد کردند، ولی سرانجام وب سایت ها به لطف سیستم طراحی Google Material Design، تحت تأثیر قرار گرفتند.

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

Material Design چیست؟

Material Design یک سیستم طراحی وب است که توسط گوگل در سال 2014 توسعه یافته است. کل سیستم طراحی، زبان طراحی و کلیه مستندات در حال حاضر در material.io قرار دارند، که شامل موارد زیر است:

1_توضیحات مربوط به سیستم متریال دیزاین:

2_دستورالعمل های استفاده از زبان متریال دیزاین و چگونگی طراحی با آن:

3_داشتن اجزایی با قابلیت استفاده مجدد که طراحان را قادر می سازد به راحتی UI های متریال ایجاد کنند:

متریال دیزاین بسیار جامع تر از اکثر سیستم های طراحی است. Material Design فقط برای یک نام تجاری یا یک پروژه خاص ساخته نشده است. متریال دیزاین با نام کد “Quantum Paper” به عنوان یک زبان طراحی منتشر شد تا طراحان اندروید بتوانند از آن برای طراحی برنامه های خود استفاده کنند. در کنار آن هم گوگل از Material Design برای بازنگری در طراحی برنامه های خود استفاده کرد.

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

چرا متریال دیزاین ایجاد شد؟

برای درک چگونگی شکل گیری و فواید Material Design، باید به طراحی های قبل از ظهور متریال دیزاین نگاهی بیاندازیم.

skeuomorphism:

حدود سال 2010 بود که skeuomorphism تبدیل به یک طراحی برجسته و محبوب شد. این مدل یک سبک طراحی بود که باعث می شد عناصر UI شبیه اشیاء واقعی به نظر برسد. معمولاً وقتی صحبت از طراحی پس زمینه و نماد های یک وب سایت می شود، این سبک را بسیار خواهید دید. مثلاً این تصویر از صفحه اصلی Apple در سال 2012 است را مشاهده کنید:

بسیاری از آیکون های برنامه ای که در iPad مشاهده می کنید تصویر هستند. به عنوان مثال، به مواردی که با رنگ زرد مشخص شده اند نگاه کنید:

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

UI های Skeuomorph به دلیل ویژگی های واقع گرایانه این آیکون ها را مانند تصویر واقعی شان در دنیای واقعی نشان می دهند.

طراحی تخت (flat):

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

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

گروه نیلسن نورمن توضیح می دهند: “[طراحی مسطح] اغلب منجر به گیج شدن کاربر هنگام کلیک و کاهش کارایی کاربر می شود. وقتی طراحان، رابط کاربری را مسطح می کنند، بسیاری از دال هایی که معمولاً به کاربران نشان می دهد کجا باید کلیک کند، حذف می شود. “

طراحی در Material Design:

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

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

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

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

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

این به کاربران برنامه یا وب سایت امکان می دهد تا به طور طبیعی به UI ها پاسخ دهند، زیرا در متریال دیزاین آن ها نحوه لمس و جابجایی اشیاء را دقیقاً مانند محیط فیزیکی درک می کنند. Matias Duarte، معاون بخش طراحی Google، توضیح می دهد که چرا Material Design یک تغییر مهم در طراحی وب است:

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

اصول اصلی Material Design چیست؟

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

اصل شماره 1: مواد یک استعاره است

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

به عنوان مثال، به Material Design’s Interaction نگاه کنید:

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

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

اصل شماره 2: جسورانه، گرافیکی، طبیعی

به این مثال از بخش Material Foundation نگاه کنید:

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

این سیستم به وضوح عناصر UI حیاتی را تجزیه کرده و برای هر یک قسمتی را نظر گرفته است، این قسمت ها عبارت اند از:

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

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

برای اینکه بتوانید تصور کنید که چگونه به نظر می رسید، این ابزاری است به نام material design palette:

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

اصل شماره 3: متحرک سازی های معنا دار

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

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

حتی عناصر کوچک به اندازه آیکون ها می توانند متحرک شوند:

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

مزایا و معایب Material Design

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

مزایای Material Design:

طراحان وب در تمام مراحل می توانند از ویژگی های Material Design بهره مند شوند، خواه پایه اصلی باشد که تمام کار خود را در آن پایه گذاری کرده اند و یا منبعی باشد که گاهاً از آن استفاده می کنند.
یک منبع جامع از هر یک از اجزای کلیدی و رفتار های UI است، که ارزش زیادی در طراحی دارند.
برای شروع طراحی برنامه های Android، متریال دیزاین می تواند رویکردی سازگار با تلفن همراه بوده و مسئول پیش برد بیشتر وب سایت ها در زمینه موبایل باشد.
متریال دیزاین اولین رویکرد طراحی کاربر پسند است و بسیاری از اشکالات مدل های قبلی خود را برطرف کرده است که در آن ها مشکلاتی در نحوه استفاده، خوانایی و دسترسی وجود داشت.
Material Design طراحان را مجبور می کند که فراتر از زیبایی شناسی نگاه کنند و همه چیز را واقعی تر طراحی کنند. در نتیجه، به وسیله این مدل طراحی رابط ها بصری تر می شوند و تجربه کاربری بهبود می یابد.
متریال دیزاین را گوگل ارائه می دهد و مستندات و پشتیبانی گسترده آن برای توسعه دهندگان و طراحان جذاب تر و کاربردی تر است.
این روز ها سیستم طراحی بسیار انعطاف پذیر تر و قدرتمند تر است به طوری که طراحان می توانند تنها آنچه که مناسب خودشان است از متریال دیزاین بگیرند.

معایب Material Design:

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

چرا از متریال دیزاین استفاده می شود؟

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

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

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

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

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

منبع:
elementor.com

1400/07/06برچسب‌ها:ابزار طراحی, طراحی رابط کاربری (UI), طراحی سایت, طراحی سایت موبایل, طراحی وب سایت