۸ روش بهتر بـرای طراحی کارت رابط کاربری

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

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

۱. کنتراست خوبی بین کارت و پس زمینه ایجاد کنید. به منظور تشخیص بهتر کارت از پس‌زمینه، می‌توانید کارت خود را با اضافه کردن حاشیه یا برافراشته با افزودن سایه، مشخص کنید.

۲. برای حفظ اندازه فونت متعادل تلاش کنید و از استفاده از فونت‌های خیلی کوچک خودداری کنید. خوانایی محتوا با فونت انتخاب شده و اندازه فونت اعمال شده تعریف می‌شود.

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

۴. یک حالت بارگذاری (لودینگ) طراحی کنید که تا حد امکان شبیه طرح بندی محتوا باشد. حالت اسکلتی که با سبک چیدمان برنامه شما مطابقت دارد به کاهش عدم اطمینان کاربر در مورد محتوای بارگذاری شده کمک می‌کند.

۵. یک ارتفاع ثابت برای کارت‌ها تعریف کنید. در این صورت، باید یک عنصر کارت طراحی کنید، با این فرض که یک کارت می تواند ۴ خط متن داشته باشد و کارت دیگر می تواند یک خط متن داشته باشد. بهترین راه برای نزدیک شدن به طراحی کارت، تعریف ارتفاع است، با گذاشتن فضای خالی برای کارتی که محتوای کمتری دارد و زمانی که کارت محتوای بیشتری دارد، متن کوتاه شود.

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

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

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


🔗 برای مطالعه ادامه مقاله می‌توانید به این لینک مراجعه کنید.

(زمان حدودی مطالعه: ۸ دقیقه)

گردآورنده: امیرحسین معظمی


#رابط_کاربر #کارت
#UI

@Dexign فلسفه دیزاین

______