چکیده مقاله
سایت فارسی فقط ترجمه چپچین نیست. راستچین، فونت، فرم و موبایل را جداگانه طراحی کنید.
سایت فارسی ترجمه چپچین نیست. راستچین، فونت خوانا، دکمههای انگشتی و فرم کوتاه را جدا طراحی کنید. بیشتر کاربر ایرانی با گوشی میآید؛ دسکتاپ قشنگ اگر موبایل خراب باشد فروش نمیسازد. چکلیست UI/UX تیم KGSM روی kgsm.ir همین حداقلها را قبل از رنگ و انیمیشن میبندد. اجرا با طراحی سایت و بعد از آن سرعت در سئو. اگر فرم باید به پنل وصل شود برنامهنویسی را از اول ببینید. نمونه محدوده را از تماس بفرستید.
این راهنما با عنوان «چکلیست UI/UX برای سایت فارسی و راستچین» از تجربه تحویل پروژههای KGSM نوشته شده: محدوده نسخه اول، انتشار مرحلهای، و پشتیبانی بعد از تحویل.
مخاطب، ریسک و روش KGSM
صاحب کسبوکار یا مدیر محصول که سایت فارسی راستچین میسازد و نمیخواهد ترجمه آینهای چپچین تحویل بگیرد
UI بد روی موبایل یعنی فرم رهاشده، شماره نامرئی، و کاربری که به اینستاگرام برمیگردد.
KGSM ظاهر راستچین را در طراحی سایت با فونت، فرم و لمس موبایل میبندد؛ سئو را جدا اما همزمان چک میکند.
راستچین و فونت را مثل محصول طراحی کنید
اگر قالب انگلیسی را فقط dir=rtl کنید، آیکونها، فاصله اعداد و منوی همبرگر معمولاً میشکنند. فونت فارسی را به دو یا سه وزن محدود کنید؛ بار کردن همه وزنهای ایرانسنس یا وزیر LCP را خراب میکند و روی گوشی ارزان خوانده نمیشود. اعداد را یکدست کنید: یا فارسی یا لاتین، نه مخلوط در قیمت و تاریخ. تاریخ شمسی را جایی بگذارید که کاربر انتظار دارد — فاکتور، نوبت، خبر — نه در فیلد مخفی. تراز متن راست و طول خط را روی موبایل چک کنید تا پاراگراف شبیه ستون باریک نشود. KGSM در طراحی سایت این موارد را قبل از پالت رنگ میبندد. آیکن جهتدار مثل فلش «بعدی» باید با جهت زبان برگردد. اگر نسخه انگلیسی هم دارید، سوئیچ زبان را پیدا و پایدار بگذارید تا کاربر بین دو چیدمان گم نشود و خزش گوگل هم دو قالب خراب نبیند.
وزن فونت را به دو یا سه فایل محدود کنید. قالب انگلیسی فقط rtl شد و منوی موبایل زیر لوگو قفل ماند؛ تماس یک هفته صفر شد.
فرم و لمس موبایل: کمتر، بزرگتر، واضحتر
فرم تماس با هشت فیلد اجباری روی تاکسی پر نمیشود. نام، تلفن، و یک توضیح کافی است؛ ایمیل را اختیاری بگذارید. دکمهها باید حداقل محدوده لمس انگشت داشته باشند نه لینک دوازدهپیکسلی در فوتر. شماره تلفن را قابل لمس کنید و در هدر موبایل پنهان نکنید. پیام خطا را فارسی و کنار فیلد بنویسید نه با alert انگلیسی. محدودیت ارسال و کپچای سبک جلوی اسپم را میگیرد بدون اینکه مشتری واقعی را خسته کند. KGSM فرم را به پنل یا ایمیل مشخص وصل میکند تا پیام در گروه چت گم نشود. اگر بعداً نوبت یا پیشفاکتور میآید، همان فرم را در برنامهنویسی وب گسترش دهید نه اینکه سه فرم موازی بسازید. روی دستگاه واقعی با یک دست تست کنید؛ شبیهساز دسکتاپ دروغ میگوید. برچسب فیلد را بالای ورودی بگذارید تا با کیبورد فارسی قاطی نشود.
هشت فیلد اجباری روی لندینگ تبلیغ، نرخ ارسال فرم را به زیر یک درصد رساند. فرم تماس را به سه فیلد اصلی برسانید و بقیه را اختیاری کنید.
اعتماد، تماس و مسیر کاربر ایرانی
کاربر ایرانی قبل از فرم به نشانه اعتماد نگاه میکند: اینماد در جای درست، آدرس یا شهر، و نمونهکار واقعی. اینماد غولپیکر وسط هیرو تمرکز را میدزدد؛ در فوتر و صفحه تماس کافی است. مسیر «خدمت → نمونه → تماس» را کوتاه کنید. منوی ده آیتم روی موبایل تصمیم را عقب میاندازد؛ پنج مورد اصلی و بقیه در زیرمنو. چت شناور اگر دکمه تماس را بپوشاند ضرر است. ساعات پاسخ را بنویسید تا انتظار دروغ نسازید. برند KGSM و دامنه kgsm.ir باید در هدر و فوتر یکسان باشند تا با نامهای شبیه قاطی نشود. اگر تبلیغ اینستاگرام به سایت میآید، صفحه فرود باید همان وعده را تکرار کند نه صفحه خانه شلوغ. برای بستن ظاهر و اعتماد از تماس سه صفحه رقیب و یک نمونه متن واقعی بفرستید تا طراحی حدس نباشد.
شماره تلفن را در هدر موبایل قابل لمس نگه دارید. چت شناور دکمه تماس را پوشاند و کاربر مسن نتوانست زنگ بزند.
خوانایی، کنتراست و سرعت ظاهر
متن خاکستری روی پسزمینه تیره در آفتاب دیده نمیشود. کنتراست را با چشم روی گوشی ارزان چک کنید نه فقط با نمره صد ابزار. انیمیشن اسکرول اگر محتوا را دیر نشان دهد هم UX است هم سئو. تصویر هیرو را فشرده کنید و اسلایدر خودکار را حذف کنید مگر دلیل روشنی دارید؛ پرش اسلاید CLS میسازد. ویدیو پسزمینه روی موبایل ایرانی معمولاً باید خاموش پیشفرض باشد. بعد از قفل شدن ظاهر، سئو سرعت و عنوان را جدا اندازه میگیرد تا طراحی قشنگ ایندکس را خراب نکند. حالت تاریک اگر تضاد برند را میشکند اجباری نباشد. فوکوس کیبورد برای فرم را نگه دارید؛ فقط موس را فرض نکنید. KGSM تحویل UI را با چکلیست موبایل، فرم و فونت میبندد نه با فایل لایه باز بدون نسخه زنده.
چهار وزن فونت صفحه اول را روی ۴G به شش ثانیه رساند. اینماد را در فوتر و صفحه تماس بگذارید نه وسط هیرو.
فلش و آیکن جهتدار را برای RTL برعکس کنید. تاریخ میلادی روی فاکتور شمسی مشتری را به پشتیبانی کشاند.
نسخه تاریک اجباری قیمت را روی پسزمینه تیره نامرئی کرد. کنتراست متن را روی گوشی ارزان در نور روز ببینید.
اسلایدر خودکار را حذف کنید مگر یک پیام واحد دارد. قالب انگلیسی فقط rtl شد و منوی موبایل زیر لوگو قفل ماند؛ تماس یک هفته صفر شد.
هشت فیلد اجباری روی لندینگ تبلیغ، نرخ ارسال فرم را به زیر یک درصد رساند. سوئیچ زبان را ثابت و قابل پیدا کردن بگذارید.
چکلیست اجرا
- وزن فونت را به دو یا سه فایل محدود کنید.
- فرم تماس را به سه فیلد اصلی برسانید و بقیه را اختیاری کنید.
- شماره تلفن را در هدر موبایل قابل لمس نگه دارید.
- اینماد را در فوتر و صفحه تماس بگذارید نه وسط هیرو.
- فلش و آیکن جهتدار را برای RTL برعکس کنید.
- کنتراست متن را روی گوشی ارزان در نور روز ببینید.
- اسلایدر خودکار را حذف کنید مگر یک پیام واحد دارد.
- سوئیچ زبان را ثابت و قابل پیدا کردن بگذارید.
سناریوی واقعی 1
قالب انگلیسی فقط rtl شد و منوی موبایل زیر لوگو قفل ماند؛ تماس یک هفته صفر شد.
وزن فونت را به دو یا سه فایل محدود کنید.
سناریوی واقعی 2
هشت فیلد اجباری روی لندینگ تبلیغ، نرخ ارسال فرم را به زیر یک درصد رساند.
فرم تماس را به سه فیلد اصلی برسانید و بقیه را اختیاری کنید.
سناریوی واقعی 3
چت شناور دکمه تماس را پوشاند و کاربر مسن نتوانست زنگ بزند.
شماره تلفن را در هدر موبایل قابل لمس نگه دارید.
سناریوی واقعی 4
چهار وزن فونت صفحه اول را روی ۴G به شش ثانیه رساند.
اینماد را در فوتر و صفحه تماس بگذارید نه وسط هیرو.
سناریوی واقعی 5
تاریخ میلادی روی فاکتور شمسی مشتری را به پشتیبانی کشاند.
فلش و آیکن جهتدار را برای RTL برعکس کنید.
سناریوی واقعی 6
نسخه تاریک اجباری قیمت را روی پسزمینه تیره نامرئی کرد.
کنتراست متن را روی گوشی ارزان در نور روز ببینید.
صفحات مرتبط KGSM
ادامه را در KGSM و خدمات سئو و بهینهسازی، طراحی سایت ببینید. مقالات مرتبط: طراحی سایت فروشگاهی با Laravel — نکات مهم قبل از شروع، چه زمانی باید سایت را از نو طراحی کرد؟. برای برآورد محدوده نسخه اول از فرم تماس استفاده کنید.
وقتی این نکته به تیم زنده میرسد باید قانون اجرایی باشد نه اسلاید: وزن فونت را به دو یا سه فایل محدود کنید. برایش مالک و تاریخ بازبینی بگذارید تا در اولین هفته شلوغ فراموش نشود.
وقتی این نکته به تیم زنده میرسد باید قانون اجرایی باشد نه اسلاید: فرم تماس را به سه فیلد اصلی برسانید و بقیه را اختیاری کنید. برایش مالک و تاریخ بازبینی بگذارید تا در اولین هفته شلوغ فراموش نشود.
وقتی این نکته به تیم زنده میرسد باید قانون اجرایی باشد نه اسلاید: شماره تلفن را در هدر موبایل قابل لمس نگه دارید. برایش مالک و تاریخ بازبینی بگذارید تا در اولین هفته شلوغ فراموش نشود.
وقتی این نکته به تیم زنده میرسد باید قانون اجرایی باشد نه اسلاید: اینماد را در فوتر و صفحه تماس بگذارید نه وسط هیرو. برایش مالک و تاریخ بازبینی بگذارید تا در اولین هفته شلوغ فراموش نشود.
وقتی این نکته به تیم زنده میرسد باید قانون اجرایی باشد نه اسلاید: فلش و آیکن جهتدار را برای RTL برعکس کنید. برایش مالک و تاریخ بازبینی بگذارید تا در اولین هفته شلوغ فراموش نشود.
وقتی این نکته به تیم زنده میرسد باید قانون اجرایی باشد نه اسلاید: کنتراست متن را روی گوشی ارزان در نور روز ببینید. برایش مالک و تاریخ بازبینی بگذارید تا در اولین هفته شلوغ فراموش نشود.
وقتی این نکته به تیم زنده میرسد باید قانون اجرایی باشد نه اسلاید: اسلایدر خودکار را حذف کنید مگر یک پیام واحد دارد. برایش مالک و تاریخ بازبینی بگذارید تا در اولین هفته شلوغ فراموش نشود.
وقتی این نکته به تیم زنده میرسد باید قانون اجرایی باشد نه اسلاید: سوئیچ زبان را ثابت و قابل پیدا کردن بگذارید. برایش مالک و تاریخ بازبینی بگذارید تا در اولین هفته شلوغ فراموش نشود.
سوالات متداول
سایت فارسی را از قالب انگلیسی بسازیم؟ +
چه فونتی پیشنهاد میشود؟ +
فرم باید چند فیلد داشته باشد؟ +
اینماد برای UX لازم است؟ +
KGSM پروتوتایپ هم میدهد؟ +
کلمات کلیدی
خدمات مرتبط KGSM