برچسب: طراحی سایت موبایل

طراحی نوار ناوبری شیشه ای (Glassmorphism) با کلاس های Tailwind CSS

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

Tailwind CSS و کلاس های جدید پس زمینه

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

نکته: قبل از حرکت ب سمت ادامه مطلب، مطمئن شوید که نسخه Tailwind v2.1 را نصب کرده اید!

ساختار اصلی نوار ناوبری شیشه ای قبل از اعمال Tailwind

بیایید با استفاده از عنصر معنایی «nav» و پر کردن آن با چند آیتم شروع کنیم.

<nav>
  <div>
    <div>
      <span>My Logo</span>
      <div>
        <a href="#"> Dashboard </a>
        <a href="#"> About </a>
        <a href="#"> Projects </a>
        <a href="#"> Contact </a>
      </div>
    </div>
  </div>
</nav>

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

<nav className="sticky top-0 z-10 bg-white">
  <div className="max-w-5xl mx-auto px-4">
    <div className="flex items-center justify-between h-16">
      <span className="text-2xl text-gray-900 font-semibold">Logo</span>
      <div className="flex space-x-4 text-gray-900">
        <a href="#"> Dashboard </a>
        <a href="#"> About </a>
        <a href="#"> Projects </a>
        <a href="#"> Contact </a>
      </div>
    </div>
  </div>
</nav>

بسیاری از این سبک ها خود توضیحی هستند، اما اجازه دهید به چند نکته اشاره کنم:

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

در این مرحله، نوار ناوبری باید چیزی شبیه به تصویر بالا باشد. اگر صفحه را به پایین اسکرول کنید، باید نوار به بالای صفحه بچسبد.

استفاده از کلاس های فیلتر و تاری پس زمینه در Tailwind

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

<nav className="... backdrop-filter backdrop-blur-lg">.....</nav>

اگر در این مرحله صفحه را به پایین اسکرول کنید، به نظر می رسد چیزی تغییر نکرده است. اگرچه کلاس های کاربردی Tailwind در حال کار هستند، ما باید کدورت پس زمینه نوار ناوبری را تنظیم کنیم تا حالت شیشه ای آن آشکار شوند.

هرچه کدورت پس زمینه کمتر باشد، محتوای بیشتری از طریق عنصر نشان داده می شود. با خیال راحت کمی با مقدار آن بازی کنید، تا مقدار دلخواهتان را پیدا کنید. مثلاً من کلاس bg-opacity-30 را به نوار ناوبری خود اضافه کرده ام.

<nav className="...bg-opacity-30">.....</nav>

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

تا اکنون ما موفق به شیشه ای کردن نوار ناوبری به کمک Tailwind شدیم، اما همانطور که در تصویر پایین می بینید تشخیص نوار ناوبری شیشه ای مات از پس زمینه وب سایت دشوار است.

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

<nav className="...border-b border-gray-200">.....</nav>

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

مشکلات نوار ناوبری شیشه ای در فایرفاکس

درست است. اگر تغییرات خود را در فایرفاکس پیش نمایش کنید، خواهید دید که تاری اصلاً نشان داده نمی شود. به نظر می رسد، فایر فاکس از CSS پس زمینه تاری پشتیبانی نمی کند. پس راه حل چیست؟

خوشبختانه، سام سلیکوف در مورد این موضوع یک توییت سفارشی را در توییتر نوشته و پست کرده است. این توییت کاربرانی را هدف قرار می دهد که از فایرفاکس استفاده می کنند. برای اینکه بتوانید شفافیت نوار ناوبری را در این مرورگر افزایش دهید، فایل tailwind.config.js را باز کنید و کد زیر را در قسمت plugins اضافه کنید. (برای ایجاد تغییرات در tailwind.config.js می توانید به مقاله مربوط به فریم ورک Tailwind که در ابتدای مقاله به آن پیوند داده بودیم مراجعه کنید.)

const plugin = require('tailwindcss/plugin');
module.exports {
    ...
    plugins: [
        ...
    plugin(function ({ addVariant, e, postcss }) {
      addVariant('firefox', ({ container, separator }) => {
        const isFirefoxRule = postcss.atRule({
          name: '-moz-document',
          params: 'url-prefix ()',
        });
        isFirefoxRule.append(container.nodes);
        container.append(isFirefoxRule);
        isFirefoxRule.walkRules((rule) => {
          rule.selector = `.${e(
            `firefox${separator}${rule.selector.slice(1)}`
          )}`;
        });
      });
    }),
  ],
}

حالا به قسمت مربوط به نوار ناوبر برگردید و کلاس زیر را وارد کنید:

<nav className="...firefox:bg-opacity-90">.....</nav>

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

نتیجه:

Tailwind CSS به بهبود خود ادامه می دهد و با انتشار نسخه 2.1، بسیاری از فیلتر های CSS اکنون با کلاس های کاربردی مرتبط پشتیبانی می شوند و شما به راحتی می توانید از آن برای طراحی های شیشه ای استفاده کنید درست مانند همین نوار ناوبری شیشه ای که ما طراحی کردیم.

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

منبع:
braydoncoyer.dev

1400/09/02برچسب‌ها:CSS آماده, زبان css, طراحی سایت, طراحی سایت موبایل

مقایسه دو نرم افزار طراحی سایت 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), طراحی سایت, طراحی سایت موبایل

رنگ هایی که ممکن است بر طراحی سایت شما تأثیر منفی بگذارند

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

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

با این اوصاف از چه رنگ هایی باید در طراحی صفحات وب سایت خود اجتناب کنیم؟

مشکی خالص

بیایید با سیاه شروع کنیم، آن هم سیاه خالص چیزی که در HTML به عنوان #000000 کد گذاری شده است. این رنگ باعث غافلگیر شدن کاربر می شود. صفحات شما نباید به گونه ای باشند که گویی مشکی همه جا را فرا گرفته است. مثلاً نباید متن و اکثر صفحات وب به گونه ای باشد که گویی لباس سیاه بر تن دارد یا آسمان شب سایت را پوشانده است.

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

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

آن ها اصلاً اشتباه نمیکنند رنگ مشکی می تواند برای برانگیختن برخی تداعی های مثبت قدرتمند در ذهن افراد استفاده شود. اما نکته کلیدی این است که از رنگ مشکی استفاده کنید که مشکی خالص نباشد. از آن جایی که سیاه خالص یک رنگ طبیعی نیست، پردازش آن برای مغز دشوار تر است. رنگ مشکی خود را از #000000 به #111111 یا یک خاکستری بسیار تیره مشابه افزایش دهید و همچنان از مزایای چشم نواز رنگ مشکی بدون اینکه فشار زیادی بر مغز بازدیدکنندگان وارد کنید بهره مند شوید.

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

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

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

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

یک قانون کلی برای طراحی سایت پرهیز از رنگ‌ هایی است که در کدنویسی HTML دارای افراط در طیف رنگی هستند مانند صفر و Fs که می توانند اثر منفی بگذارند. شما باید پس‌ زمینه متن و خود متن آن ها را کمی از رنگ‌ های کاملاً خالص غیرطبیعی دور کنید، تا پردازش آن ها برای ذهن آسان‌ تر شوند و تأثیر مطلوب تری بر بازدیدکنندگان شما بگذارد.

ترکیبات رنگ با کنتراست بیش از حد بالا

علاوه بر پرهیز از رنگ‌ های بیش از حد خالص، باید مراقب ترکیب‌ های خاصی از رنگ‌ ها نیز باشید. مثلاً ترکیب قرمز و سبز جزء اصلی فصل کریسمس هستند، اما ترکیب رنگ های قرمز و سبز می تواند تأثیرات منفی بر طراحی سایت شما بگذارد. پرهیز از ترکیب این دو رنگ آن قدر مهم است که ضرب المثلی در بین طراحان وجود دارد که می گوید: “قرمز و سبز هرگز نباید باهم دیده شوند، مگر با وجود رنگی بین آن ها”.

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

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

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

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

ترکیب رنگی دیگری نیز وجو دارد که به اندازه تضاد شدید میان رنگ سبز و قرمز نیست، اما همین اصل در مورد ترکیب قرمز و آبی نیز وجود دارد. در ترکیب قرمز و آبی نیز بین یک رنگ بسیار گرم و رنگ بسیار سرد تضاد ایجاد می شود.

همچنین تا حدود کم‌ تری نیز برای هر ترکیبی از رنگ‌های ثانویه، یعنی بنفش، سبز یا نارنجی نیز این مشکلات صدق می‌کند. رنگ‌ های ثانویه که ترکیبی از رنگ‌ های اصلی هستند (بنفش ترکیبی از قرمز و آبی، سبز ترکیبی از آبی و زرد، نارنجی ترکیبی از زرد و قرمز است) نیز به سادگی با هم ترکیب نمی‌شوند. هر یک از این ترکیب‌ ها به تنهایی آن قدر قوی هستند که مغز نمی‌تواند به راحتی آن را پردازش کند.

ترکیبات رنگی با کنتراست بسیار کم

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

قرار دادن متن هایی با رنگ و سایه روشن بر روی پس‌زمینه های روشن مانند سفید، صورتی، زرد، آبی روشن و یاسی می‌تواند تشخیص متن را برای بازدیدکنندگان سخت کند. همین امر در مورد متن تیره روی پس زمینه تیره، مانند قرمز، آبی تیره و سرخابی روی مشکی نیز صدق می کند.

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

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

پس زمینه های چند رنگ

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

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

نتیجه:

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

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

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

منبع:
webdesign.org

1400/08/09برچسب‌ها:انتخاب رنگ سایت, ترکیب رنگ, رنگ های سرد, رنگ های گرم, روان شناسی رنگ, طراحی سایت, طراحی سایت موبایل, طراحی وب سایت, نکات طراحی سایت, وب سایت

آپدیت جدید و کاربردی تم های نرم افزار طراحی وب موبایلی Universe

Universe یک پلتفرم ایجاد وب‌ سایت های موبایلی است، که به تازگی آپدیت جدیدی منتشر کرده است. در این آپدیت، Universe کنترل‌ های خلاقانه و پیشرفته، تم های بهبود یافته، ویژگی‌های بلوک و موارد دیگری را به سایت ساز مبتنی بر گرید خود اضافه کرده است.

Universe به کاربران اجازه می دهد بدون نیاز به کد نویسی، یک سایت سفارشی ایجاد کنند یا یک فروشگاه الکترونیکی را مستقیماً از پشت تلفن همراه و از طریق یک سیستم گرید ساده باز کنند. آپدیت جدید GRID System II، با هدف ساده‌ سازی فرآیند های رمزگذاری پیچیده قبلی در Universe انجام شده، که به تسهیل جلوه های بصری در فرآیند ایجاد وب‌ سایت کمک می کنند.

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

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

تم های جدید Universe

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

بنیان گذار Universe میگوید:”ما 30 تم شگفت انگیز ایجاد کرده ایم که می توانید آن ها را در کل سایت خود اعمال کنید. همچنین می توانید هنگام ساخت یک وب سایت جدید طرح مورد نظر خود را از همان ابتدا با انتخاب تم های زیبا ایجاد کنید.” او در ادامه می گوید: ” شما می توانید هر یک از تم های آماده ای را که ما به شما می دهیم ترکیب کرده یا سفارشی کنید و هر تغییری که ایجاد کنید در کل سایت شما اعمال می شود. این قابلیت اساساً راهی برای تغییر استایل همه چیز در سراسر سایت به صورت بصری و کاربر پسند است. “

تایپوگرافی در تم های جدید

کاربران Universe اکنون می‌توانند به سبک‌ های تایپوگرافی جدید نیز دسترسی داشته باشند که به آن ها امکان می‌دهد سبک متن‌ های عنوان، تیتر ها، زیرنویس ها و غیره را طبقه‌ بندی کنند. این شرکت تاکید می کند که کاربران می توانند از عناوین شاخص برای بهبود SEO و افزایش دسترسی به سایت خود نیز استفاده کنند.

لایه بندی ها در آپدیت جدید

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

تم های Universe برای مبتدی ها

اگرچه برخی ممکن است، Universe را رقیبی برای سایر ابزار های محبوب ساخت وب سایت مانند Shopify و Wix ببینند، اما کوهن می گوید که Universe کاملاً با آن ها متفاوت است. او در ادامه عنوان می کند:”ما یک رابط جدید به نام “grid” ابداع کرده ایم، که به افرادی که فنی نیستند و طراحی حرفه ای انجام نداده اند، اجازه می دهد یک وب سایت کاملاً شخصی را ایجاد کنند”. البته سیستم های دیگری مانند Squarespace ،Shopify ،Weebly و Wix وجود دارند، اما این ها مخصوص سازندگان حرفه ای وب سایت بوده و بر اساس دسکتاپ و قالب سایت قابل تغییر هستند.

کوهن می گوید: “Universe مبتنی بر الگو نیست، درست است که ما قالب‌ ها و تم های مختلفی را در هر آپدیت ارائه می کنیم، اما سیستم ما یک سیستم مبتنی بر الگو نیست. این به این معنی است که Universe توسط قالب های سایت محدود نمی شود، بنابراین خود گرید، رابط اصلی ما برای ایجاد یک وب سایت موبایلی است.”

اپلیکیشن Universe در زمان همه گیری کرونا

از نظر استفاده هم، کوهن خاطر نشان کرد که Universe در میان همه گیری COVID-19 افزایش شدید کاربران را تجربه کرده است. بسیاری از افراد در مدت قرنطینه مشاغل جدید یا فعالیت های جانبی را شروع کرده اند و به دنبال ایجاد وب سایت ها آمده اند. در اوایل بیماری کرونا، Universe قابلیت فروش و ارسال محصولات در سایت های خود را برای کاربران راه اندازی کرد. در نتیجه، کاربران دیگر ملزم به ثبت نام برای دریافت ابزار های تجارت الکترونیک شخص ثالث، در پلتفرم هایی مانند Shopify نبودند. کوهن در ادامه می گوید: ” تجارت ما در یک سال و نیم گذشته و از زمان شیوع کرونا واقعاً منفجر شده است و از لحاظ تعداد سایت های ایجاد شده فعال نیز حدود 10 برابر تجارت بیشتری داشته ایم. “

همچنین کوهن خاطر نشان کرد که Universe شاهد افزایش کاربرانی است، که خواهان یک سایت برای “لینک در بیو” خود هستند. لینک داخل بیو در اصل یک URL در انتهای بیوگرافی در صفحه مشخصات اینستاگرام آن ها است که مخاطبان آن ها را به وب سایت آن ها در خارج از اینستاگرام هدایت می کند. این سایت های هدایت کننده اغلب برای فروش محصولات، پیوند به سایر حساب های رسانه های اجتماعی، نمایش نمونه کار ها و موارد دیگر استفاده می شوند.

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

منبع:
insider-voice.com

1400/07/30برچسب‌ها:ابزار طراحی سایت, طراحی سایت, طراحی سایت موبایل, طراحی صفحات موبایلی, طراحی وب سایت, نرم افزار طراحی سایت, وب سایت

آشنایی با 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), طراحی سایت, طراحی سایت موبایل, طراحی وب سایت

بهترین نرم افزار ها برای طراحی رابط کاربری موبایل

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

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

1. Sketch

نرم افزار طراحی رابط کاربری موبایل Sketch

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

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

مطالعه بیشتر

طراحی دیجیتال چیست؟

توسعه دهنده: Bohemian Coding
سال انتشار: 2010
پلتفرم: macOS
کاربران: Apple ، Facebook ، Google ، Stripe ، Nintendo و موارد دیگر
ادغام: Jira Cloud ، Zeplin ، Avocode ، WeTransfer و موارد دیگر

2. InVision

نرم افزار طراحی رابط کاربری موبایل InVision

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

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

سال انتشار: 2011
پلتفرم: macOS
کاربران: Airbnb, Amazon, HBO, Lyft و موارد دیگر
ادغام: Jira, Trello, Slack و موارد دیگر

3. Adobe XD

نرم افزار طراحی رابط کاربری موبایل Adobe XD

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

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

توسعه دهنده: Adobe Systems
سال انتشار: 2016
پلتفرم: Windows, macOS, iOS و Android
ادغام: Jira, Slack, Zeplin, Avocode و موارد دیگر

4. UXPin

نرم افزار طراحی رابط کاربری موبایل UXPin

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

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

سال انتشار: 2010
پلتفرم: Web
کاربران: HBO, Paypal, Microsoft, Sony و موارد دیگر
ادغام: Sketch, Jira, Slack و موارد دیگر

5. Marvel

نرم افزار طراحی رابط کاربری موبایل Marvel

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

وقتی می خواهید مفهوم خود را به چیزی ملموس تبدیل کنید و آن را برای تیم، مشتریان یا ذینفعان خود ترجمه کنید، نرم افزار Marvel در مراحل اولیه فرآیند طراحی بسیار عالی است زیرا به شما امکان می دهد ایده خود را در عرض چند دقیقه به یک wireframe بر روی دسکتاپ یا موبایل یا تبلت تبدیل کنید.

سال انتشار: 2013
پلتفرم: Web
کاربران: Buzzfeed, IBM, Stripe, Deliveroo و موارد دیگر
ادغام: Jira, Dropbox, Slack, Sketch و موارد دیگر

6. Figma

نرم افزار طراحی رابط کاربری موبایل Figma

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

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

سال انتشار: 2012
پلتفرم: Web
کاربران: Microsoft, Uber, Slack, Braintree و موارد دیگر
ادغام: Jira, Trello, Slack, Zeplin و موارد دیگر

7. Proto.io

نرم افزار طراحی رابط کاربری موبایل Proto.io

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

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

توسعه دهنده: Labs Division of SNQ Digital
سال انتشار: 2011
پلتفرم: macOS
کاربران: PayPal, Disney, ESPN, Amazon و موارد دیگر
ادغام: Dropbox, Photoshop, Sketch و Lookback

منبع: instabug.com

1400/05/28برچسب‌ها:رابط کاربری موبایل, طراحی سایت موبایل, نرم افزار طراحی سایت

6 نکته برتر برای طراحی وب سایت مناسب برای موبایل

طراحی وب سایت سازگار با موبایل ، طرحی است که تجربه جستجو با موبایل را در اولویت قرار می دهد. این رویکرد در دهه اخیر بسیار مهم شده است. بر اساس تحقیقات انجام شده توسط Statista، امروزه بیش از نیمی از ترافیک وب سایت توسط گوشی همراه اتفاق می افتد و تقریبا 45٪ از کل خرید های آنلاین را شامل می شود. با توجه به اینکه گوشی های هوشمند فقط در ده سال گذشته بوده اند، انتظار می رود این تعداد با افزایش جستجو در وب سایت و بهبود طراحی ها، افزایش یابد.

به همین دلیل وب سایت هایی که برای ارائه تجربه بهتر وب سایت خود برای موبایل تلاش نمی کنند، به شدت از رقبای خود عقب می مانند.

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

7 نکته برتر در زمینه طراحی وب سایت برای موبایل

1- استفاده از روش رویکرد اول موبایل

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

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

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

طراحی وب سایت برای گوشی موبایل از همان ابتدا بر سادگی و سهولت استفاده تاکید دارد.

2- از ابعاد و اندازه توصیه شده استفاده کنید

در گوشی های موبایل، فضا نسبت به سایر زمینه های طراحی محدودتر است. اما در نظر گرفتن محدودیت های اندازه در آغاز پروژه بهترین راه برای جلوگیری از درگیری بعدا است.

وضوح صفحه نمایش گوشی های همراه، با توجه به نوع دستگاه متفاوت خواهد بود، اما طبق تحقیقات انجام شده توسط statcounter، در حال حاضر بیشترین استفاده از آن 360 × 640 (نسبت ابعاد 9:16) است. Google Analytics می تواند به شما بگوید که کاربران از چه دستگاه هایی استفاه می کنند و باید مطمئن شوید که طراحی وب سایت شما به اندازه کافی پاسخگو تغییرات می باشد.

برای طراحی وب سایت مناسب موبایل از ابعاد و اندازه توصیه شده استفاده کنید

در مورد اندازه فونت در طراحی وب سایت موبایل ، حداقل 16 پیکسل برای بدنه توصیه می شود. همچنین بسته به نوع حروف استفاده شده می تواند متفاوت باشد (بر اساس نوع آن ها، برخی از فونت ها در 16 پیکسل کمتر از بقیه قابل خواندن هستند).

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

برای طراحی وب سایت مناسب موبایل از فونت مناسب استفاده کنید

در استفاده از یک تصویر می توانید بر روی قسمت مورد نظر بزرگنمایی کرده و عناصر اضافی پس زمینه را مانند مثال بالا برش دهید.

اندازه دکمه در طراحی وب سایت سازگار برای موبایل بسیار مهم است. زیرا صفحه های لمسی در انتخاب ورودی کاربر دقت کمتری نسبت به ماوس و صفحه کلید دارند. یک مطالعه با تمرکز بر روی کاربران مسن، دکمه های صفحه لمسی را برای دسترسی بهینه بین 42 تا 72px توصیه می کند.

3. مطالب خود را ساده کنید

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

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

تمام اطلاعاتی که می توانید در مورد این شیرینی های خوشمزه یاد بگیرید به شما نمایش داده می شود.

هنگامی که از طریق تلفن همراه به جستجوی همان وب سایت بپردازیم صفحه اصلی به شکل زیر است:

شما فقط موارد ضروری را می بینید. مهم ترین اطلاعات در بالا قرار داده شده اند. (“اکنون سفارش دهید”) و عناصری را که برای یک تجربه خرید موبایل مهم نیستند حذف شده اند.

4- به حداقل رساندن منو

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

به حداقل رساندن منو در وب سایت مبتنی بر موبایل

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

بسته به میزان پیچیده بودن منو شما، هر گزینه منو ممکن است شامل گزینه های تو در تو یا یک زیر منو باشد. هنگامی که کاربر بر روی یکی از این زیر منوها کلیک می کند، برای کوتاه نگه داشتن لیست، بهتر است لیست گزینه های جدید جایگزین منوی موجود شود.

فراموش نکنید که نوار پیمایش را بر روی صفحه نمایش اصلاح کنید تا کاربر مجبور نباشد برای این منظور تمام صفحه را به بالا برگرداند.

5- حذف محتوای غیر ضروری

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

حذف محتوای غیرضروری در طراحی وب سایت مبتنی بر موبایل

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

اذغام محتوای تکراری در طراحی وب سایت سازگار با موبایل

6. تصاویر و CSS خود را فشرده کنید

آیا می دانید طبق گفته Kissmetrics، چهل و هفت درصد از بازدید کنندگان وب سایت انتظار دارند سایتی در کمتر از 2 ثانیه بارگیری شود؟ اگر فرآیند بارگیری بیش از 3 ثانیه طول بکشد، 40 درصد بازدیدکنندگان از وب سایت خارج می شوند.

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

راه حل این است که تصاویر و کد ها را بهینه سازی کنید. وقتی اندازه فایل تصویری خود را فشرده می کنید، سریع تر دانلود می شوند، بدون اینکه روی اینکه روی کیفیت سایت شما تأثیر منفی بگذارد.

سخن آخر

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

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

منابع: 99designs – hostgator.

1400/04/21برچسب‌ها:اصول طراحی سایت, طراحی سایت, طراحی سایت موبایل