نسخه‌ی بهینه‌ی موبایل را مشاهده می‌کنید، برای نمایش نسخه‌ی اصلی سایت روی دکمه‌ی زیر کلیک کنید
استانداردهای UI/UX در طراحی کاتالوگ دیجیتال
فهرست مطالب
اصول ui ux در طراحی کاتالوگ دیجیتال را مفصل در این مطلب بررسی خواهیم کرد.
کاتالوگ‌ها عنصر مشترک در بازاریابی بسیاری از سازمان‌ها هستند و یکی از موثرترین راه‌ها برای انتشار اطلاعات در مورد محصولات و خدمات آنها. طراحی کاتالوگ نباید چالش برانگیز باشد، اما مشکل امروز تطبیق آن با چشم‌انداز بازاریابی مدام در حال تغییر است. کاتالوگ‌های شما باید ترکیبی از درک شما از بازار هدف و خلاقیت شما باشد. شرکت‌های زیادی به دنبال ارزانترین قیمت و یا حتی طراحی رایگان کاتالوگ هستند. اما با توجه به اهمیت این موضوع آیا با چنین رویکردی می‌توانند به نتیجه مطلوب دست پیدا کنند؟
در اینجا مجموعه‌ای از توصیه‌های طراحی کاتالوگ را آورده‌ایم که قبل از طراحی یا سفارش آن باید بدانید. آگاهی از عناصر و نکات مهم این باور را که هزینه کردن برای برخی موارد ضروری، ولخرجی نیست حائز اهمیت است. رعایت این اصول حتی از سوی شرکتی که قصد طراحی رایگان کاتالوگ شما را دارد نیز ضروری است.
قبل از شروع طراحی، مخاطبان خود را مشخص کنید. برخی از کسب‌وکارها ممکن است از کاتالوگ‌ها برای هدف قرار دادن افراد خاص یا باهوش استفاده کنند. در حالی که کاتالوگ‌های کسب‌وکارهای (B2B) معمولاً برای تصمیم‌گیرندگان تجاری در شرکتی که مسئول خریدهای بزرگتر است تنظیم می‌شوند. اما کاتالوگ بیزینس‌های (B2C) معمولاً محصولات فردی، ارزش آنها و راه‌هایی را که می‌توانند زندگی یک مشتری را بهبود بخشند برجسته می‌کند. مورد دوم به سمت محصولات یا خدماتی است که تأثیر تجاری را ارائه می دهند.
بیشتر بخوانید:
کاتالوگ الکترونیکی ابزاری برای فروش بیشتر
طراحی ریسپانسیو (واکنشگرا) برای محتوای دیجیتال
کاتالوگ یک ابزار بصری است که محصولات یا خدمات شما را به مشتریان بالقوه نشان می‌دهد. این ابزار باید با بالاترین استانداردها تولید شود و تمام ویژگی‌های محصول یا خدمات شما را با جزئیات برای مشتریان بیان کند. مشتریان بالقوه شما باید یک بیوگرافی مختصر یا شرحی از پیشینه سازمان شما، و به دنبال آن یک نمونه کار مشاهده کنند. البته هیچ قانون قطعی در مورد اینکه طراحی چگونه باشد وجود ندارد. چیدمان محتوا در صفحات کاتالوگ، توضیحات و سایر موارد بر اساس نوع محصول یا خدمات، رویکرد برند و بازاریابی شماست. البته عناصر و نکاتی وجود دارند که وجود آنها به موفقیت شما در این امر کمک می‌کند.
ریسپانسیو چیست و چه اثری در فرمت طراحی کاتالوگ دیجیتال دارد؟
طراحی ریسپانسیو (Responsive Design) یکی از اصول ui ux در طراحی کاتالوگ دیجیتال به شمار می‌آید و در زبان فارسی به (طراحی واکنشگرا) نیز ترجمه شده. این شیوه از طراحی در محیط‌های مجازی، وب‌سایت‌ها و اپلیکیش‌ها کاربرد دارد که باعث می‌شود تمام المان‌های به‌کاررفته در یک صفحه، متناسب با اندازه‌ی صفحه‌ی نمایش دستگاه ظاهر شوند.
به عبارتی دیگر در طراحی واکنشگرا، صفحه‌ی نمایش دستگاه مبنای طراحی است و تمام اجزای صفحه، از اندازه‌ی فونت و متن‌ها گرفته تا ترتیب و ابعاد نمایش تصاویر، بر مبنای اندازه‌ی نمایشگرهای دسکتاپ (کامپیوترهای رومیزی)، تبلت و موبایل طراحی و جایگذاری می‌شوند.
بدین‌ترتیب هنگامی که طراحی کاتالوگ دیجیتال با استانداردهای ریسپانسیو یا واکنشگرا انجام شود، تمام بازدیدکنندگان آن فارغ از اینکه محتوای دیجیتال شما را در چه صفحه نمایشی می‌بینند، به سادگی می‌توانند از محتوای شما لذت ببرند و تمام عناصر محتوای شما دقیقاً به همان شکلی نمایش داده می‌شوند که شما طراحی کرده‌اید. از سویی دیگر طراحی واکنشگرا در نهایت به رشد رابط کاربری و تجربه‌ی کاربری کاتالوگ دیجیتال شما منجر می‌شود.
در ادامه به طرح استانداردهای طراحی ریسپانسیو می‌پردازیم.
سایز استاندارد تصاویر برای طراحی ریسپانسیو
همانطور که پیش‌تر مطرح شد، هدف از طراحی واکنشگرا، نمایش صحیح عناصر متفاوت در صفحه‌های نمایش گوناگون است. بنابراین برای سه نوع کلی صفحه نمایش، یعنی صفحه نمایش دسکتاپ، تبلت و موبایل، سه اندازه‌ی متفاوت از تصاویر درنظر گرفته می‌شوند که عبارتند از:
- ابعاد تصویر کوچک برای صفحه نمایش کوچکتر از 640px
- ابعاد تصویر متوسط برای صفحه نمایش 641px تا 1007px
- ابعاد تصویر بزرگ برای صفحه نمایش هم‌اندازه و بزرگتر از 1008px
سایز استاندارد فونت برای طراحی ریسپانسیو
اندازه‌ی استاندارد متن در طراحی ریسپانسیو اما متفاوت از تصویر است. بر اساس استانداردهای طرای واکنشگرا، اصولاً توصیه می‌شود به جای پیکسل از واحدهای نسبی (مانندem یاrem ) استفاده شوند. به این دلیل که چنین واحدهای نسبی، اندازه‌ی متن را بر اساس اندازه پیش‌فرض مرورگر یا اندازه الگوی اصلی تغییر می‌دهند.
مثلاً می‌توان متن تیتر را دو برابر اندازه فونت پیش‌فرض و بدنه‌ی متن تعریف کرد و یا اینکه اندازه متن برای صفحات با عرض کمتر از عددی خاص را به میزان ایکس پیکسل کاهش داد و برای صفحات بیشتر از عددی خاص را به میزان ایکس پیکسل بیشتر کرد.
نکات مهم کاربرد رنگ در طراحی کاتالوگ دیجیتال
احساسات آدمی از رنگ‌ها تأثیر می‌گیرد و هر رنگ نیز اثر خاصی بر خلق و خوی افراد دارد. از سویی دیگر هدف غایی از طراحی کاتالوگ دیجیتال نیز تأثیرگذاری بر ذهن مشتریان و مخاطبان است. بنابراین نمی‌توان اثر رنگ را در فرمت طراحی کاتالوگ دیجیتال نادیده گرفت.
یکی دیگر از اصول ui ux در طراحی کاتالوگ دیجیتال به کاربرد رنگ مربوط می‌شود که بحث این قسمت از مطلب ماست.
همنشینی رنگ‌ها چه کمکی به تأثیرگذاری بیشتر کاتالوگ دیجیتال می‌کنند؟
به ترکیب و تعادل رنگ‌ها در طراحی (همنشینی رنگ) می‌گویند که در زمینه‌های مختلفی نیز به کاربرد دارد، مثل طراحی آثار هنری، گرافیک، طراحی داخلی، طراحی لباس و غیره.
همنشینی رنگ را می‌توان به دو بخش کلی تقسیم کرد:
- همنشینی هم‌خانواده که به معنای استفاده از رنگ‌هایی است که در چرخه‌ی رنگ در کنار هم قرار گرفته‌اند، مثلاً ترکیب رنگ آبی، بنفش و سبز. محصول نهایی چنین ترکیب‌هایی معمولاً ملایم و هماهنگ است و حس آرامش را به مخاطب القا می‌کند.
- همنشینی مکمل که دقیقاً برعکس مفهوم قبلی است؛ یعنی استفاده از رنگ‌هایی که در چرخه‌ی رنگ مقابل یکدیگر هستند. مثل زمانی که در یک طراحی از آبی و نارنجی استفاده کنید. کاربرد این همنشینی نیز در ایجاد تضاد و تنوع در طراحی است.
بنابراین نباید هنگام تعیین فرمت طراحی کاتالوگ دیجیتال به استفاده از هر رنگی روی آورد، بلکه باید احساس مخاطب از رنگ‌ها را ملاک طراحی قرار دهید.
مفهوم تضاد رنگ
تضاد رنگ یکی از اصول طراحی به شمار می‌آید و به این معناست که در یک طراحی از دو رنگی کنار هم استفاده شود که متضاد یا مکمل هم هستند، یعنی در چرخه‌ی رنگ مقابل هم قرار دارند. بدین‌ترتیب بیشترین میزان تأثیر و تمایز حاصل می‌شود. مثلاً می‌دانیم که در چرخه رنگ، آبی و نارنجی، قرمز و سبز، یا زرد و بنفش رنگ‌هایی متضاد هستند. بنابراین هنگامی که از این رنگ‌ها در کنار هم استفاده کنیم، هرکدامشان رنگ مقابل خود را برجسته می‌کنند.
پس هدف نهایی از تضاد رنگی، ایجاد تمایز و جلب توجه است. اما نباید فراموش کرد تضاد بیش از حد نیز باعث می‌شود تصویر نهایی در چشم مخاطب زننده به نظر آید. اینجاست که طراحان معمولاً یکی از رنگ‌ها را مبنای طراحی‌شان قرار می‌دهند و رنگ متضاد آن را به منظور تأکید و جلب توجه به هر بخش خاصی به کار می‌برند.
تضاد رنگی در طراحی گونه‌های متفاوتی دارد:
- تضاد فام (یا رنگ‌مایه) که به معنای تضاد بین رنگ‌های خالص است.
- تضاد تاریک-روشن که به معنای تضاد بین سایه‌های تیره و روشن است.
- تضاد سرد و گرم که به معنای تضاد بین رنگ‌های سرد و گرم است.
- تضاد مکمل‌ها که به معنای تضاد بین دو رنگِ متقابل در چرخه‌ی رنگ است.
- تضاد هم‌پایه که به معنای تضاد بین رنگ‌های مجاور در چرخه‌ی رنگ است.
- تضاد کیفیت (خلوص رنگ) که به معنای تضاد بین رنگ‌هایی با درجه‌ی اشباع متفاوت است.
- تضاد کمیت (وسعت سطوح) که به معنای تضاد بین دو یا چند رنگ است.
بیشتر بخوانید:
تاثیر طراحی کاتالوگ و بروشور بر فروش و جذب مخاطب
نشریه الکترونیک لنوس ابزاری برای برندآگاهی و برندسازی
استانداردهای طراحی برای افراد کم بینا
این استانداردها مجموعه اصولی هستند که به منظور ایجاد و افزایش دسترسی مناسب برای افرادی با بینایی محدود به وجود آمده‌اند و در عرصه‌های مختلفی مثل معماری، دکوراسیون داخلی، طراحی محصولات و طراحی وب به کار می‌روند.
در ادامه به دو مورد از مهمترین استانداردهای طراحی برای افراد کم‌بینا اشاره می‌کنیم که در طراحی کاتالوگ دیجیتال بسیار کاربردی هستند.
- رنگ و کنتراست: افراد کم‌بینا اشیای مختلف را با تشخیص تفاوت رنگ و نور شناسایی می‌کنند. بنابراین بهتر است در طراحی‌هایتان از رنگ‌های متضاد استفاده کنید و رنگ‌هایی که باعث خیرگی و انعکاس نور می‌شوند به کار نبرید.
- استفاده از صدا: بهتر است هنگام تعیین فرمت طراحی کاتالوگ دیجیتال خود از صدا هم استفاده کنید چراکه با استفاده از این امکان افراد کم‌بینا می‌توانند محتوای تبلیغاتی شما را بشنوند و در صورت نیاز با شما تماس بگیرند.
اهمیت فونت در طراحی کاتالوگ دیجیتال
فونت یکی از ابزارهای انتقال حس به واسطه‌ی نوشته است و استفاده از آن در طراحی باید به گونه‌ای باشد که از یکسو کل طراحی هارمونی داشته باشد و از سویی دیگر در راستای احقاق اهدافی معین باشد که در اینجا جذب مخاطب کاتالوگ دیجیتال است. درواقع نباید در یک طراحی تنوع بالای فونت و نوشته‌ها استفاده کرد، فراموش نکنید که رمز زیبایی در سادگی است.
انتخاب فونت مناسب نیز یکی از مهمترین اصول ui ux در طراحی کاتالوگ دیجیتال به شمار می‌آید که البته این موضوع را در مقاله‌ای جداگانه به تفصیل بررسی کرده‌ایم.
پیشنهاد می‌کنیم برای درک بهتر این موضوع، مقاله‌ی زیر را مطالعه کنید:
اصول انتخاب فونت در طراحی کاتالوگ دیجیتال
انتخاب ابعاد و فرمت مناسب تصویر در طراحی کاتالوگ دیجیتال
ابعاد و فرمت مناسب تصویر از دیگر اصول ui ux در طراحی کاتالوگ دیجیتال است. کاتالوگ کسب و کار شما باید شامل عکس‌هایی با کیفیت از محصولات و خدمات شما باشد. عکس‌های عالی با جذاب‌تر کردن وسایل شما، فروش را افزایش می‌دهند. گرفتن عکس از محصولات و خدمات با ارزش بیشتر نیازمند استفاده از عکاسان ماهر و با تجربه است. مطمئن شوید که همه عکس‌ها با نور کافی و وضوح بالا باشند.
بهترین فرمت عکس برای محتوای دیجیتال
در طراحی وب از فرمت‌های گوناگونی برای تصاویر استفاده می‌شود، مثل JPG، JPEG، PNG، SVG و غیره. اما فرمت Webp یکی از محبوب‌ترین‌هاست. این فرمت تصویری را گوگل توسعه داده است و از سیستم فشرده‌سازی بسیار پیشرفته‌ای در کاهش حجم تصاویر با حفظ کیفیت استفاده شده.
فرمت Webp از دو سیستم فشرده‌سازی (lossless) و (lossy) پشتیبانی می‌کند، بنابراین می‌توان پس‌زمینه‌های شفاف و تصاویر متحرک را هم به واسطه‌ی آن به تصویر کشید.
اگر بخواهیم فرمت Webp را با فرمت JPG مقایسه کنیم که از پرمصرف‌ترین فرمت‌های تصویری است، باید بگوییم فرمت Webp در مقایسه با فرمت JPG :
- حجم کمتری دارد
- کیفیت تصاویر بالاتر است
- از پس‌زمینه‌ی شفاف و تصاویر متحرک پشتیبانی می‌کند
- از دو سیستم فشرده‌سازی (lossless) و (lossy) پشتیبانی می‌کند
استفاده از فضای خالی در طراحی کاتالوگ دیجیتال
هنگامی که می‌خواهید کاتالوگ دیجیتالتان را طراحی کنید استفاده از فضاهای خالی بسیار مهم است. چون باعث می‌شود صفحات کاتالوگ آراسته به نظر آیند و برای مخاطب شما دلنشین باشند. درواقع طراحی مناسب لی‌آوت و فضا به مخاطب شما کمک می‌کند محتوای تبلیغاتی شما را راحت‌تر درک کند.
همچنین باید در چیدمان و ترتیب محتواها هم دقت و ظرافت به خرج دهید. نباید تمام فضای صفحه را پر از محتوا کنید و به یاد داشته باشید که بیشتر مشتریان، محتوای دیجیتال شما را در موبایل می‌بینند. بنابراین اگر صفحه‌ی کاتالوگ دیجیتال شما شلوغ باشد مخاطب سردرگم می‌شود و به طبع اثرگذاری بر مشتریان نیز کاهش می‌یابد.
از سویی دیگر با توجه به اینکه طراحی کاتالوگ دیجیتال در پلتفرم لنوس محدودیت صفحه ندارد و شما هم نگران افزایش هزینه‌هایی مثل چاپ و انتشار نیستید پس نیازی هم نیست که در استفاده از فضاهای خالی صرفه‌جویی کنید. البته زیاده‌روی در این مورد هم توصیه نمی‌شود، چراکه وقتی تعداد صفحات کاتالوگ دیجیتال شما زیاد باشد مشتریان از تورق تمامی صفحات کاتالوگ دیجیتال منصرف می‌شوند.
بنابراین هنگام طراحی کاتالوگ دیجیتال باید این نکته را نیز مد نظر قرار دهید که تمام محصولات یا خدماتتان را به شیوه‌ای در کنار هم بچینید که محصول نهایی نه بسیار شلوغ باشد و نه بسیار ازهم‌گسیخته. بنابراین اگر محصولات یا خدمات بسیار متنوعی دارید بهتر است ابتدا آنها را دسته‌بندی کنید و سپس برای هر دسته‌بندی یک کاتالوگ مجزا طراحی کنید.
بیشتر بخوانید:
مزایای بروشور دیجیتال لنوس در طراحی و نشر محتوای دیجیتال
بررسی هزینه‌ها و مقایسه قیمت کاتالوگ دیجیتال
بهترین هوش مصنوعی رایگان برای تولید محتوای دیجیتال
استفاده از ویدیو در طراحی کاتالوگ دیجیتال
استفاده از فرمت مناسب فایل‌های ویدیویی را هم می‌توان یکی از تأثیرگذارترین اصول ui ux در طراحی کاتالوگ دیجیتال دانست. در مقاله‌های متفاوتی به این نکته اشاره کرده‌ایم که یکی از مزایای استفاده از پلتفرم لنوس در طراحی کاتالوگ دیجیتال امکان بهره‌مندی از فرمت ویدیو در میان محتوای دیجیتال شماست. اما آیا استفاده از هر نوع فرمت ویدیویی برای کاتالوگ یا اساساً محتوای دیجیتال شما درست است؟
بهترین فرمت ویدیو برای محتوای دیجیتال
هرکدام از فرمت‌های ویدیویی مزایا و معایب خاص خود را دارند و هرکدام نیز کاربردی متفاوت نسبت به دیگری. اما با یک نگاه کلی به نحوه‌ی انتخاب بهترین فرمت ویدیو برای محتوای دیجیتال می‌توان عوامل زیر را مد نظر قرار داد:
- کیفیت ویدیو: کیفیت تصویری بعضی از فرمت‌های ویدیویی نسبت به باقی آنها بیشتر است و اگر هدف محتوای دیجیتال نمایش جزئیات باشد انتخاب مناسب‌تری به شمار می‌آیند. مثلاً یکی از مزایای فرمت MKV این است که کیفیت بالای تصویر را توأم با صدای چندکاناله ارائه می‌کند.
- حجم ویدیو: برخی از فرمت‌های ویدیویی حجم کمتری نسبت به دیگری دارند و برای انتقال و ذخیره‌ی ویدیوها مناسب‌ترند. مثلاً فرمت MP4 حجم کمتری نسبت به فرمت‌های دیگر دارد و کیفیت بالاتری را حفظ می‌کند.
- سازگاری ویدیو: برخی از فرمت‌های ویدیویی با دستگاه‌ها، نرم‌افزارها و پلتفرم‌های مختلف سازگاری بیشتری دارند و برای پخش ویدیوها در محیط‌های مختلف مناسب‌ترند. مثلاً فرمت MP4 یک استاندارد بین‌المللی است که در تمامی مرورگرها، تلفن‌ها، تلویزیون‌ها و سایت‌های اشتراک ویدیو پشتیبانی می‌شود.
با توجه به این عوامل می‌توان گفت که فرمت MP4 یکی از بهترین فرمت‌های ویدیو برای محتوای دیجیتال به شمار می‌رود، چون ضمن حفظ کیفیت بالا، فضای ذخیره‌سازی کمتری را اشغال می‌کند و سازگاری بالاتری نسبت به باقی فرمت‌های ویدویی دارد. با این حال نمی‌توان مدعی شد فرمت MP4 در همه جا و همه حال بهترین گزینه است، چراکه در برخی موارد و بنا به شرایطی خاص شاید فرمت‌های دیگری مثلMKV، WEBM، AVCHD، FLV، MOV، WMV و AVI مناسب‌تر باشند.
فرمت webm جایگزین مناسبی برای فرمت MP4
فرمت webm یک فرمت ویدیویی منبع‌باز و بدون حق امتیاز است که برای ارائه‌ی ویدیوها در محیط وب طراحی شده است. این فرمت از ساختار کانتینری مشابه MKV استفاده می‌کند، به این معنی که می‌تواند داده‌های تصویری و صوتی را ذخیره کند. فرمت webm از کدک‌های VP8 و Vorbis برای فشرده‌سازی ویدیو و صدا استفاده می‌کند، اما از سال ۲۰۱۳ به VP9 و Opus نیز به‌روز شده است.
مزایای فرمت webm
- کیفیت بالا: فرمت webm کیفیت بالایی را برای ویدیوها فراهم می‌کند و از جزئیات و رنگ‌های غنی پشتیبانی می‌کند
- حجم کم: فرمت webm حجم کمتری نسبت به بسیاری از فرمت‌های ویدیویی دیگر دارد و برای انتقال و پخش ویدیوها در وب مناسب‌تر است
- سازگاری بالا: فرمت webm در تمامی مرورگرهای وب به‌روز مثل Google Chrome، Opera، Firefox،Microsoft Edge پشتیبانی می‌شود. همچنین برخی از نرم‌افزارهای چندرسانه‌ای مثل VLC، MPlayer،KMPlayer و Miro هم از این فرمت ویدیویی پشتیبانی می‌کنند.
معایب فرمت webm
- پشتیبانی ناکافی: با توجه به اینکه فرمت webm در برخی از دستگاه‌ها، نرم‌افزارها و پلتفرم‌های محبوب پشتیبانی نمی‌شود (مثل مرورگر Safari در مک، دستگاه‌های iOS، برنامه‌ی Adobe Premiere و برخی از سایت‌های اشتراک ویدیو) بهتر است هنگام طراحی و ساخت محتوای دیجیتال خود این مورد را در نظر بگیرید تا بعدها به دردسر نیفتید. گرچه نباید فراموش کرد که روند رو‌به‌رشد استفاده از این فرمت ویدیویی می‌تواند در آینده‌ای نزدیک این محدودیت‌ها را نیز از میان بردارد.
- نیاز به تبدیل: برای استفاده از فرمت webm در دستگاه‌ها و برنامه‌هایی که از آن پشتیبانی نمی‌کنند، باید ویدیو را به فرمت‌های دیگری مانند MP4، AVI و MOV تبدیل کرد در از یکسو زمان‌بر است و از سویی دیگر نیز احتمال دارد باعث کاهش کیفیت ویدیو شود.