23-06-2019, 02:56 AM
SEO موبایل - بهینه سازی برای تجربه کاربری و موترهای جستجو
طراحی رابط کاربری موبایل
![[تصویر: SEO-%D9%85%D9%88%D8%A8%D8%A7%DB%8C%D9%84...%D9%86.jpg]](http://magbot.ir//SEO-%D9%85%D9%88%D8%A8%D8%A7%DB%8C%D9%84---%D8%A8%D9%87%DB%8C%D9%86%D9%87-%D8%B3%D8%A7%D8%B2%DB%8C-%D8%AA%D8%AC%D8%B1%D8%A8%D9%87-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1-%D9%88-%D8%AC%D8%B3%D8%AA%D8%AC%D9%88%DA%AF%D8%B1%D9%87%D8%A7-%D8%AF%D8%B1-%D9%87%D9%85%D8%A7%D9%86-%D8%B2%D9%85%D8%A7%D9%86/SEO-%D9%85%D9%88%D8%A8%D8%A7%DB%8C%D9%84---%D8%A8%D9%87%DB%8C%D9%86%D9%87-%D8%B3%D8%A7%D8%B2%DB%8C-%D8%AA%D8%AC%D8%B1%D8%A8%D9%87-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1-%D9%88-%D8%AC%D8%B3%D8%AA%D8%AC%D9%88%DA%AF%D8%B1%D9%87%D8%A7-%D8%AF%D8%B1-%D9%87%D9%85%D8%A7%D9%86-%D8%B2%D9%85%D8%A7%D9%86.jpg)
نیازی به اولویت بندی نیست زیرا شما باید هم به گوگل و هم به کاربران خود بپردازید، عملی که به شدت توصیه می شود. با اتخاذ تصمیم درست برای این دو نیاز، شما قادر خواهید بود در Google رتبه خوبی کسب کنید و افراد بتوانند خیلی راحت تر از قبل شما را پیدا کنند. با تجربه کاربری وب عالی شما بازدید کنندگان خود را بدست می آورید، و آنها شما را به دیگران توصیه کنند.
لازم نیست اولویت بندی شود، همانطور که قبلا ذکر شد، اما شما باید از جایی شروع کنید. با تمرکز بر روی تجربه، شما کاربران خود را به عنوان نقطه شروع خوبی برای راه حل وب خود می دانید، آن است که یک وب سایت ساده، یک برنامه وب یا یک نرم افزار پیچیده پشتی است.
شروع با کاربر
در شروع هر پروژه شما باید کاربر را در نظر بگیرید. بدون کاربر، هر چقدر سعی کنید، حرکتی نمی کنید. احتمالا قبلا از Term User Experience (یا UX) شنیده اید، اما برای محصول شما چه معنایی دارد؟ کاملا بستگی دارد به کاربران شما. پیدا کردن آنچه که مخاطبان شما به آن پاسخ مثبت دهند، یک موضوع پیچیده است که باید مقاله خاصی در این مورد مطالعه کنید؛ بنابراین، ما در مورد آنچه که در ذهن کاربران شما ست، بیش از حد غرق نخواهیم شد. با این حال، در هر کسب و کار ی، عدم سرمایه گذاری در تجربه کاربر همیشه سبب شکست خواهد شد.![[تصویر: 0.jpg]](http://magbot.ir/SEO-%d9%85%d9%88%d8%a8%d8%a7%db%8c%d9%84---%d8%a8%d9%87%db%8c%d9%86%d9%87-%d8%b3%d8%a7%d8%b2%db%8c-%d8%aa%d8%ac%d8%b1%d8%a8%d9%87-%da%a9%d8%a7%d8%b1%d8%a8%d8%b1-%d9%88-%d8%ac%d8%b3%d8%aa%d8%ac%d9%88%da%af%d8%b1%d9%87%d8%a7-%d8%af%d8%b1-%d9%87%d9%85%d8%a7%d9%86-%d8%b2%d9%85%d8%a7%d9%86/0.jpg)
طراحی واکنشگرا
شما احتمالا هزاران بار شنیده اید. تعداد زیادی وبسایت را دیدهام که هنوز واکنشگرا نیستند. بیش از سه سال است که به استانداردهای W3C تبدیل شده است. پس چرا؟ چیزی است که به ذهنم می رسد، این نادیده گرفتن استانداردهای پذیرفته شده یعنی شما با شانس موفقیت پروژه خود بازی می کنید. من زمان درباره طراحی وب سایت پاسخگو هنوز اطلاعات زیادی نداشتم. توصیه می کنم این کتاب را بخوانید و دوباره بخوانید.
![[تصویر: 2.jpg]](http://magbot.ir/SEO-%d9%85%d9%88%d8%a8%d8%a7%db%8c%d9%84---%d8%a8%d9%87%db%8c%d9%86%d9%87-%d8%b3%d8%a7%d8%b2%db%8c-%d8%aa%d8%ac%d8%b1%d8%a8%d9%87-%da%a9%d8%a7%d8%b1%d8%a8%d8%b1-%d9%88-%d8%ac%d8%b3%d8%aa%d8%ac%d9%88%da%af%d8%b1%d9%87%d8%a7-%d8%af%d8%b1-%d9%87%d9%85%d8%a7%d9%86-%d8%b2%d9%85%d8%a7%d9%86/2.jpg)
طراحی تایپوگرافی پاسخگو
بله، من هنوز در موضوع جنون واکنشگرایی هستم. تایپوگرافی بخش مهمی از یک وب سایت است که با نادیده گرفتن آن، برخی از نقایص را با خوانندگان نشان می دهد. اغلب خواندن متن در دسکتاپ اسان است، اما خدای من چه چشم های در سال های گذشته در تلاش برای رمزگشایی متن ساده در تلفن همراه کور نشدن . واقعا متنفر از سایت هایی که برای خواندن مطالب آن روی گوشی باید زوم کرد. بهبود تایپوگرافی برای دستگاه های قابل حمل است یک موفقیت بزرگ نیست اما لازم است. اگر شما تایپوگرافی واکنشگرا ندارید، همیشه امکان تغییر اندازه فونت و ارتفاع خط را در سایت خود قرار دهید. هرگز از فونت کوچکتر از 14 پیکسل در تلفن استفاده نکنید و ارتفاع خط حداقل 18 پیکسل باشد متن را برای خواندن آسان تر می کند. سرفصل ها را کوتاه و شفاف نگاه دارید. آنها سرفصل هستند، نیاز به استفاده از اندازه فونت بزرگ و پررنگ با حداکثر چهار حرف .
هنر فضای منفی
مقاله نباید یک دوره تصادفی از طراحی گرافیکی باشد، بسیاری از چیزهایی که یک طراح گرافیک خوب می تواند برای بهبود تجربه کاربر وب سایت انجام دهد وجود دارد. یکی از آنها استفاده از فضای منفی است، زیرا اجازه می دهد که چشم انسان استراحت کند. اگر این کار را خیلی خوب انجام دهید، صفحه وب شما احساس سنگینی نخواهد داشت .
![[تصویر: 3.jpg]](http://magbot.ir/SEO-%d9%85%d9%88%d8%a8%d8%a7%db%8c%d9%84---%d8%a8%d9%87%db%8c%d9%86%d9%87-%d8%b3%d8%a7%d8%b2%db%8c-%d8%aa%d8%ac%d8%b1%d8%a8%d9%87-%da%a9%d8%a7%d8%b1%d8%a8%d8%b1-%d9%88-%d8%ac%d8%b3%d8%aa%d8%ac%d9%88%da%af%d8%b1%d9%87%d8%a7-%d8%af%d8%b1-%d9%87%d9%85%d8%a7%d9%86-%d8%b2%d9%85%d8%a7%d9%86/3.jpg)
فرم تماس و عضویت کارا طراحی کنید
فرم های وب مانند فرم های ثبت نام و فرم های تماس با فیلدهای ورودی و فرایند چک کردن و یا حتی یک جعبه جستجو ایجاد می شوند. مطمئن شوید که آنها کار می کنند و قبلا آنرا آزمایش کرده اید. آیا آنها واقعا کار می کنند؟ من هیچ تردیدی ندارم که کد شما کاری که باید انجام دهد می دهد، اما این قضیه فقط در مورد سمت سرور نیست. باید روی گوشی نیز کارا باشند از نحوه پر کردن فیلد ها گرفته تا نمایش خطا ها . به تعدادی از وبسایتها که به طور ضعیفی این کار را انجام میدهند سر بزنید، اجازه بدهید به شما یک راز بگویم: درست کردن این مشکلات واقعا مکار سختی نیست.
اگر فرم را بفرستم و یک خطا وجود داشته باشد، باید بدانید که خطا دقیقا چیست و در جای درست نمایش داده شود و آنچه که برای رفع آن انجام دهم چیست. نه - تکرار می کنم، نه! - از من نخواهید دوباره تمام فیلد ها را پر کنیم این جایی است که مشتری بالقوه را از دست دادید.
![[تصویر: 4.png]](http://magbot.ir/SEO-%d9%85%d9%88%d8%a8%d8%a7%db%8c%d9%84---%d8%a8%d9%87%db%8c%d9%86%d9%87-%d8%b3%d8%a7%d8%b2%db%8c-%d8%aa%d8%ac%d8%b1%d8%a8%d9%87-%da%a9%d8%a7%d8%b1%d8%a8%d8%b1-%d9%88-%d8%ac%d8%b3%d8%aa%d8%ac%d9%88%da%af%d8%b1%d9%87%d8%a7-%d8%af%d8%b1-%d9%87%d9%85%d8%a7%d9%86-%d8%b2%d9%85%d8%a7%d9%86/4.png)
از SVG بیشتر استفاده کنید
برخی از شما ممکن است بدانند که یک تصویر SVG چیست، بنابراین بسیار مختصر توضیح خواهم داد. SVG به معنای گرافیک برداری مقیاس پذیر است ، این تصویر یک تصویر برداری را نشان می دهد که می تواند با توجه به صفحه ای که روی آن مشاهده می شود بزرگ شود.
SVG به خوبی با CSS کار می کند و مناسب برای طراحی وب پاسخگو است. همراه با تایپوگرافی پاسخگو و پوسته های پاسخگو، یک تجربه مشاهده عالی برای کاربر را بدون در نظر گرفتن اینکه چه دستگاهی دارد، ایجاد می کند. تصاویر SVG بهتر از تصویر عادی و حتی بهتر از آیکون های فونت هستند زیرا آنها می توانند به سرعت با محیط سازگار شوند . علاوه بر این، با آیکون های فونت شما به یک رنگ محدود می شوید، در حالی که فایل های SVG بسیار متنوع هستند.
شما می توانید گرافیک SVG را تقریبا همه جا مورد استفاده قرار دهید: لوگو، عناصر UI، نمودار، آیکون و ....
![[تصویر: 5.jpg]](http://magbot.ir/SEO-%d9%85%d9%88%d8%a8%d8%a7%db%8c%d9%84---%d8%a8%d9%87%db%8c%d9%86%d9%87-%d8%b3%d8%a7%d8%b2%db%8c-%d8%aa%d8%ac%d8%b1%d8%a8%d9%87-%da%a9%d8%a7%d8%b1%d8%a8%d8%b1-%d9%88-%d8%ac%d8%b3%d8%aa%d8%ac%d9%88%da%af%d8%b1%d9%87%d8%a7-%d8%af%d8%b1-%d9%87%d9%85%d8%a7%d9%86-%d8%b2%d9%85%d8%a7%d9%86/5.jpg)
مقالات مرتبط
![[تصویر: %D8%B3%D8%A7%D8%AE%D8%AA-%D9%88%D8%B1%D8...8%AF-H.jpg]](http://magbot.ir//%D8%B3%D8%A7%D8%AE%D8%AA-%D9%88%D8%B1%D8%AF%D9%BE%D8%B1%D8%B3-%DA%A9%D8%A7%D9%85%D9%84-%D8%AE%D9%88%D8%AF-%D8%B1%D8%A7-%D8%A8%D8%A7-%DA%A9%D8%AF-H/%D8%B3%D8%A7%D8%AE%D8%AA-%D9%88%D8%B1%D8%AF%D9%BE%D8%B1%D8%B3-%DA%A9%D8%A7%D9%85%D9%84-%D8%AE%D9%88%D8%AF-%D8%B1%D8%A7-%D8%A8%D8%A7-%DA%A9%D8%AF-H.jpg)
طراحی سایت وردپرس با H-code
![[تصویر: UI-%D8%AA%D9%84%D9%81%D9%86-%D9%87%D9%85...%D8%AA.jpg]](http://magbot.ir//UI-%D8%AA%D9%84%D9%81%D9%86-%D9%87%D9%85%D8%B1%D8%A7%D9%87-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%AD%D8%B1%DA%A9%D8%A7%D8%AA-%D9%84%D9%85%D8%B3%DB%8C-%D8%A8%D9%87%DB%8C%D9%86%D9%87-%D8%B4%D8%AF%D9%87-%D8%A7%D8%B3%D8%AA/UI-%D8%AA%D9%84%D9%81%D9%86-%D9%87%D9%85%D8%B1%D8%A7%D9%87-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%AD%D8%B1%DA%A9%D8%A7%D8%AA-%D9%84%D9%85%D8%B3%DB%8C-%D8%A8%D9%87%DB%8C%D9%86%D9%87-%D8%B4%D8%AF%D9%87-%D8%A7%D8%B3%D8%AA.jpg)
بهینه سازی طراحی UI در موبایل برای تجربه تاچینگ بهتر
![[تصویر: %DA%86%DA%AF%D9%88%D9%86%DA%AF%DB%8C-%D8...%D8%B5.jpg]](http://magbot.ir//%DA%86%DA%AF%D9%88%D9%86%DA%AF%DB%8C-%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%D8%B3%D8%B1%DB%8C%D8%B9-%D9%81%D8%B1%D9%85-%D9%87%D8%A7-%D8%AF%D8%B1-CSS-%D8%AE%D8%A7%D9%84%D8%B5/%DA%86%DA%AF%D9%88%D9%86%DA%AF%DB%8C-%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%D8%B3%D8%B1%DB%8C%D8%B9-%D9%81%D8%B1%D9%85-%D9%87%D8%A7-%D8%AF%D8%B1-CSS-%D8%AE%D8%A7%D9%84%D8%B5.jpg)
چگونگی طراحی فرم ها و اشکال در CSS
طراحی رابط کاربری موبایل
نیازی به اولویت بندی نیست زیرا شما باید هم به گوگل و هم به کاربران خود بپردازید، عملی که به شدت توصیه می شود. با اتخاذ تصمیم درست برای این دو نیاز، شما قادر خواهید بود در Google رتبه خوبی کسب کنید و افراد بتوانند خیلی راحت تر از قبل شما را پیدا کنند. با تجربه کاربری وب عالی شما بازدید کنندگان خود را بدست می آورید، و آنها شما را به دیگران توصیه کنند.
لازم نیست اولویت بندی شود، همانطور که قبلا ذکر شد، اما شما باید از جایی شروع کنید. با تمرکز بر روی تجربه، شما کاربران خود را به عنوان نقطه شروع خوبی برای راه حل وب خود می دانید، آن است که یک وب سایت ساده، یک برنامه وب یا یک نرم افزار پیچیده پشتی است.
شروع با کاربر
در شروع هر پروژه شما باید کاربر را در نظر بگیرید. بدون کاربر، هر چقدر سعی کنید، حرکتی نمی کنید. احتمالا قبلا از Term User Experience (یا UX) شنیده اید، اما برای محصول شما چه معنایی دارد؟ کاملا بستگی دارد به کاربران شما. پیدا کردن آنچه که مخاطبان شما به آن پاسخ مثبت دهند، یک موضوع پیچیده است که باید مقاله خاصی در این مورد مطالعه کنید؛ بنابراین، ما در مورد آنچه که در ذهن کاربران شما ست، بیش از حد غرق نخواهیم شد. با این حال، در هر کسب و کار ی، عدم سرمایه گذاری در تجربه کاربر همیشه سبب شکست خواهد شد.
طراحی واکنشگرا
شما احتمالا هزاران بار شنیده اید. تعداد زیادی وبسایت را دیدهام که هنوز واکنشگرا نیستند. بیش از سه سال است که به استانداردهای W3C تبدیل شده است. پس چرا؟ چیزی است که به ذهنم می رسد، این نادیده گرفتن استانداردهای پذیرفته شده یعنی شما با شانس موفقیت پروژه خود بازی می کنید. من زمان درباره طراحی وب سایت پاسخگو هنوز اطلاعات زیادی نداشتم. توصیه می کنم این کتاب را بخوانید و دوباره بخوانید.
طراحی تایپوگرافی پاسخگوبله، من هنوز در موضوع جنون واکنشگرایی هستم. تایپوگرافی بخش مهمی از یک وب سایت است که با نادیده گرفتن آن، برخی از نقایص را با خوانندگان نشان می دهد. اغلب خواندن متن در دسکتاپ اسان است، اما خدای من چه چشم های در سال های گذشته در تلاش برای رمزگشایی متن ساده در تلفن همراه کور نشدن . واقعا متنفر از سایت هایی که برای خواندن مطالب آن روی گوشی باید زوم کرد. بهبود تایپوگرافی برای دستگاه های قابل حمل است یک موفقیت بزرگ نیست اما لازم است. اگر شما تایپوگرافی واکنشگرا ندارید، همیشه امکان تغییر اندازه فونت و ارتفاع خط را در سایت خود قرار دهید. هرگز از فونت کوچکتر از 14 پیکسل در تلفن استفاده نکنید و ارتفاع خط حداقل 18 پیکسل باشد متن را برای خواندن آسان تر می کند. سرفصل ها را کوتاه و شفاف نگاه دارید. آنها سرفصل هستند، نیاز به استفاده از اندازه فونت بزرگ و پررنگ با حداکثر چهار حرف .
هنر فضای منفی
مقاله نباید یک دوره تصادفی از طراحی گرافیکی باشد، بسیاری از چیزهایی که یک طراح گرافیک خوب می تواند برای بهبود تجربه کاربر وب سایت انجام دهد وجود دارد. یکی از آنها استفاده از فضای منفی است، زیرا اجازه می دهد که چشم انسان استراحت کند. اگر این کار را خیلی خوب انجام دهید، صفحه وب شما احساس سنگینی نخواهد داشت .
فرم تماس و عضویت کارا طراحی کنیدفرم های وب مانند فرم های ثبت نام و فرم های تماس با فیلدهای ورودی و فرایند چک کردن و یا حتی یک جعبه جستجو ایجاد می شوند. مطمئن شوید که آنها کار می کنند و قبلا آنرا آزمایش کرده اید. آیا آنها واقعا کار می کنند؟ من هیچ تردیدی ندارم که کد شما کاری که باید انجام دهد می دهد، اما این قضیه فقط در مورد سمت سرور نیست. باید روی گوشی نیز کارا باشند از نحوه پر کردن فیلد ها گرفته تا نمایش خطا ها . به تعدادی از وبسایتها که به طور ضعیفی این کار را انجام میدهند سر بزنید، اجازه بدهید به شما یک راز بگویم: درست کردن این مشکلات واقعا مکار سختی نیست.
اگر فرم را بفرستم و یک خطا وجود داشته باشد، باید بدانید که خطا دقیقا چیست و در جای درست نمایش داده شود و آنچه که برای رفع آن انجام دهم چیست. نه - تکرار می کنم، نه! - از من نخواهید دوباره تمام فیلد ها را پر کنیم این جایی است که مشتری بالقوه را از دست دادید.
از SVG بیشتر استفاده کنید
برخی از شما ممکن است بدانند که یک تصویر SVG چیست، بنابراین بسیار مختصر توضیح خواهم داد. SVG به معنای گرافیک برداری مقیاس پذیر است ، این تصویر یک تصویر برداری را نشان می دهد که می تواند با توجه به صفحه ای که روی آن مشاهده می شود بزرگ شود.
SVG به خوبی با CSS کار می کند و مناسب برای طراحی وب پاسخگو است. همراه با تایپوگرافی پاسخگو و پوسته های پاسخگو، یک تجربه مشاهده عالی برای کاربر را بدون در نظر گرفتن اینکه چه دستگاهی دارد، ایجاد می کند. تصاویر SVG بهتر از تصویر عادی و حتی بهتر از آیکون های فونت هستند زیرا آنها می توانند به سرعت با محیط سازگار شوند . علاوه بر این، با آیکون های فونت شما به یک رنگ محدود می شوید، در حالی که فایل های SVG بسیار متنوع هستند.
شما می توانید گرافیک SVG را تقریبا همه جا مورد استفاده قرار دهید: لوگو، عناصر UI، نمودار، آیکون و ....
طراحی سایت وردپرس با H-code
بهینه سازی طراحی UI در موبایل برای تجربه تاچینگ بهتر
چگونگی طراحی فرم ها و اشکال در CSS