تعداد بازدید 120

magbot

بررسی طرح های کارتی در طراحی وبترندها و ایده ها

MAGBOT +

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

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

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

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

در اینجا سبک های مختلف طراحی کارت اشاره می کنیم:
1. طراحی تخت - Flat Design
اولین نمونه از طراحی مسطح مبتنی بر کارت توسط مایکروسافت در سال 2006 معرفی شد و براساس زبان طراحی مترو تایپوگرافی، رنگارنگ بود. نسخه های مدرن، با این حال، بیشتر شیب داشتند، سایه ها و بافت را از تکنیک طراحی اسکومورفیک می گیرد.
2. سبک طراحی مجله ای - Magazine-Style Design
طراحی مجله ای به دلیل استفاده از چندین طبقه کارت، نیاز به تعادل بصری قوی دارد. شامل یک بلوک با یک تصویر و متن است که به عنوان یک "teaser" به اطلاعات دقیق در یک صفحه یا وب سایت دیگر لینک دارد. همانطور که نام آن می گوید، توسط مجلات و وب سایت های خبری استفاده می شود اما همچنین برای سایر سایت هایی که محتوا زیادی دارند مانند وبلاگ یا بخش نمونه کارها در سایت هایی دیگر، ایده آل است.3. سبک پین - Pin Style
Pinterest این سبک را به تصویر کشید که روند محبوب در تم های وردپرس شد. در مراحل اولیه، کارت فقط حاوی لینک ها و بخش هایی مشخصی از محتوا بود. در حال حاضر با لینک ها و سبک های مختلف محتوا از جمله فیلم، فرم، تصاویر و ابزارهای به اشتراک گذاری اجتماعی تکامل یافته است. در برخی از آنها، کارتها شامل تعاملات کوتاه، مانند اعلانهای فیس بوک هستند.
4. سبک شبکه - Grid Style
همچنین سبک سنگ تراشی نیز نامیده می شود، شامل بلوکی است که به طور کامل و یا در طول طرح از هم جدا شده است. برخی از طرح ها الگوهای ظریف را با هم ترکیب می کنند در حالی که برخی تصاویر و گرافیک را در یک شبکه نشان می دهند.
نحوه استفاده از کارت ها در پروژه های شما به نحو احسن؟
دلایل متعددی وجود دارد که کدام معماری کارت سبک محبوب شما باشد.
هیچ قانون ثابت برای این نوع معماری طراحی وجود ندارد. با این حال، دو عنصر تقریبا همیشه در طراحی کارت در طراحی وب موثر است - سادگی و تجربه محتوای غنی. همچنین تکنیک های طراحی دیگری وجود دارد که به زیبایی شناسی و عملکرد کلی آن کمک می کند.
در اینجا، برخی از دستورالعمل هایی که باید در هنگام ایجاد یک طراحی مبتنی بر کارت، به آن توجه داشته باشید آمده است.
فضا، فضا، فضا
یک عنصر رایج در طراحی مبتنی بر کارت، فضا است. فضای سفارشی برای قرار دادن یک نقطه کانونی در هر عنصر لازم است تا بتوان آنها را به وضوح دید و درک کرد. تصور کنید تمام این عناصر باید در یک منطقه 600 پیکسل گنجانده شود: هدر، دکمه، یک تصویر و یک متن پیوند. فضای کافی در اطراف هر عنصر باید وجود داشته باشد تا کاربر بصورت مجزا بتواند روی هر عنصر تمرکز کند طراحی کارتی گزینه خوبیست. با قرار دادن مقدار فضا بین هر عنصر، توجه و تمرکز بر روی کارت، کارکردی شبیه نمایش سلسله مراتب محتوا خواهد داشت.
یک بخش اطلاعات کافی است
هر کارت تنها باید یک قطعه از اطلاعات را داشته باشد. یک مفهوم، تصویر و شاید یک جمله ماهیت محتوای پشت کارت را برای کاربر مشخص می کند تا کاربر به ادامه اکتشاف ادامه دهد یا خیر.
یک تصویر روشن و واضح را انتخاب کنید

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

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

مقالات مرتبط

بررسی راهنمای استایل UI Style guides برندهای معروف

بهترین طراحی Chatbots در برنامه های موبایل

30 وب سایت با طراحی زیبا برای الهام شما

تعداد بازدید 120 بررسی طرح های کارتی در طراحی وب
نویسنده	پیام