طراحي سايت يار حرفه اي

12 قانون طراحي سايت براي دستگاه هاي تلفن همراه

کاربران بيشتر و بيشتري از طريق تلفن هاي همراه به وب سايت ها دسترسي پيدا مي کنند. شرکت  Gfk داده هاي تحقيقات جديد را منتشر کرده است: طبق آمار ، سهم کاربراني که از دستگاه هاي تلفن همراه براي جستجوي اينترنت استفاده مي کنند 61? است. با اين حال ، طراحان اغلب هنگام طراحي چيدمان تلفن هاي همراه اشتباه مي کنند. در اين مقاله ، ما در مورد قوانين اساسي طراحي وب سايت براي دستگاه هاي تلفن همراه صحبت خواهيم کرد و نمونه هاي واقعي را ارائه خواهيم داد.

1. قانون سازگاري

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

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

• اندازه صفحه کوچک


• سرعت پايين بارگيري در مقايسه با رايانه ها ؛


• مشکلات ورود اطلاعات


• برخي از مطالب قابل نمايش نيستند يا به اشتباه نمايش داده مي شوند.

همه اينها هنگام تهيه نسخه تطبيقي مورد توجه قرار مي گيرد. علاوه بر اين ، وجود نسخه موبايل سايت باعث افزايش موقعيت منبع در شبکه هاي جستجو مي شود که اين امر بر تعداد بازديد از سايت و بر اين اساس ، بر تعداد مشتريان بالقوه تأثير مي گذارد. نسخه تطبيقي وب سايت IDBI به اين شکل است :

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

بقيه قوانين براي طراحي يک نسخه پاسخگو از سايت اعمال مي شود.

2. قانون اندازه هاي بزرگ

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

به عنوان مثال ، نسخه موبايل فروشگاه آنلاين Ozone. اين دکمه در پايين صفحه ثابت است تا هنگام پيمايش هميشه جلوي چشم شما باشد. براي جلب توجه با رنگ آبي متضاد برجسته شده است. به اندازه کافي بزرگ براي کليک آسان و پيمايش سبد خريد. همچنين ، توسعه دهندگان اقدام هدف خاصي را نشان دادند: افزودن محصولي با قيمت مشخص به سبد خريد.

همين امر براي ساير عناصر - اشکال ، تصاوير ، برچسب ها و ساير بلوک ها نيز صدق مي کند. اگر عنصر توجه را جلب نکند ، کليک کردن ناخوشايند است (به عنوان مثال کاربر "از دست مي رود" و به صفحه ديگري مي رود) ، احتمال اينکه مشتري سايت را ببندد و به سراغ رقبا برود ، زياد است.

توصيه هايي براي اندازه عناصر براي کليک: حداقل اندازه 26 پيکسل است. اپل استفاده از 44x44 px را توصيه مي کند.

3. قانون تايپوگرافي بزرگ

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

مثال نشان مي دهد که فونت کاملاً بزرگ و خواندن آن آسان است. بيش از 2 قلم استفاده نمي شود ، فاصله بين بلوک هاي متن رعايت مي شود ، پيشرو و هسته تنظيم مي شوند. خواندن متن آسان است ، زيرا با نمادها و دکمه هايي با رنگ هاي متضاد رقيق مي شود.

در وبلاگ ما ، اندازه مطلوب قلم نيز انتخاب شده است ، که به راحتي در دستگاه هاي داراي صفحه کوچک خوانده مي شود ، تصاوير نيز بهينه شده اند ، سرعت بارگذاري وب سايت را کاهش نمي دهند:

4. قانون هيچ چيز ديگري

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

نسخه دسک تاپ

نسخه موبايل

همانطور که از مثال مشاهده مي کنيد ، در نسخه موبايل ، تصوير بزرگ از صفحه اصلي حذف شده و کاربر بلافاصله به دسته هاي محصول مي رود. ما همچنين بلوک "فروش" را کاهش داده ايم - در دستگاه هاي تلفن همراه ، تبليغات در بالاي صفحه نشان داده مي شود ؛ براي جلب توجه ، از يک نماد قرمز با علامت? استفاده مي شود.

اگر سايت بيش از حد بزرگ باشد و متناسب با همه قابليت هاي نسخه موبايل غيرممکن باشد ، شرکت ها برنامه هاي موبايلي را توسعه مي دهند و به کاربران پيشنهاد نصب آنها را مي دهند:

اين روش مطمئناً به سرمايه گذاري زيادي نياز دارد ، اما تنوع در عملکرد ، قابليت اطلاع رساني به کاربر و در دسترس بودن مداوم برنامه براي کاربر مي تواند تمام هزينه ها را با نرخ تبديل بالا جبران کند.

5. قانون محتوا در يک ستون

به منظور مشاهده بلوک ها توسط کاربران ، طراحان محتوا را در يک ستون قرار مي دهند. متن و تصاوير در عرض ، پيمايش عمودي ، ساختار يک ستوني مرتب شده اند.

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

6. قانون بدون پنجره هاي بازشو و ابزارک

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

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

اگر بدون پنجره هاي بازشو نمي توانيد کار کنيد ، بهتر است آنها را با اندازه دستگاه تطبيق دهيد:

در وب سايت Beeline يک پنجره بازشو وجود دارد که پيشنهاد صدور سيم کارت را دارد. براي جمع آوري ليدها و عدم آزار گروه ديگر از کاربران ، نماد بستن در پنجره بازشو به وضوح قابل مشاهده است ، فرم بسيار ساده اي ايجاد شده است: تلفن و دکمه.

7. قانون جزئيات تماس موجود

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

• قرار دادن يک دکمه براي تماس تلفني ؛


• جزئيات تماس بر روي صفحه اول قرار مي گيرد تا کاربر بلافاصله توجه خود را به آنها جلب کند.


• تلفن اين شرکت با يک لينک قابل کليک ساخته شده است که کاربر را به مخاطب هدايت مي کند يا بلافاصله تماس برقرار مي کند.

به عنوان مثال ، در وب سايت ما ، نماد تلفن کاربر را مستقيماً به برقراري تماس از طريق برنامه موجود در دستگاه هدايت مي کند:

8. مثال شبکه هاي اجتماعي

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

9. مثال فرم هاي کوتاه

پر کردن پرسشنامه هاي طولاني در تلفن کند و ناخوشايند است. براي سهولت ورود کاربران به داده ها و ايجاد اقدامات هدفمند ، فرم ها به شرح زير طراحي مي شوند:

• اگر پرسشنامه شامل تعداد زيادي زمينه باشد ، فرم به چندين مرحله تقسيم مي شود.


• زمينه ها و دکمه ها براي فشار دادن بزرگ بزرگ هستند.


• دکمه ها براي جلب توجه کاربر برجسته مي شوند.


• تعداد فيلدها به حداقل مي رسد.


• برخي از زمينه ها تکميل خودکار يا پوشانده شده اند. به عنوان مثال ، هنگام پر کردن قسمت "شماره تلفن" ، از يک ماسک ورودي استفاده مي شود.

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

به اين ترتيب طراحان بانک Tinkoff فرم دريافت کارت اعتباري را تهيه کردند:

يک فرم نسبتاً پيچيده به چند مرحله تقسيم مي شود ، عناصر تعاملي مختلفي به آن افزوده شده است (نوار لغزنده اي براي انتخاب حد) ، انگيزه عمل (50? احتمال تأييد). همچنين يک ماسک براي وارد کردن شماره تلفن ، قسمتهاي بزرگ ، نکات اضافه شده در هر مرحله اضافه شده است.

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

10. قانون فضا

با انتقال از دسک تاپ به نسخه موبايل ، بايد محل بلوک ها را کنترل کنيد. اغلب اوقات ، طراحان از فضاي سفيد استفاده مي کنند - فاصله بين عناصر ، با کمک آن مي توانيد توجه کاربر را به جزئيات مورد نظر جلب کنيد ، درک مطالب را تسهيل مي کند. با اين وجود ، اگر طرح را متناسب با صفحه کوچکتر تغيير شکل دهيد ، فاصله کوتاهتر مي شود. براي حفظ مفهوم و فاصله طراحي ، فضا توزيع مي شود ، محل بلوک ها و عناصر سايت تغيير مي کند:

نسخه دسک تاپ

نسخه موبايل

طراح بايد فاصله بين بلوک هاي متني و تصاوير را کنترل کند ، فضاي کافي براي دکمه ها اختصاص دهد ، از فواصل زماني براي برجسته سازي عناصر لازم براي جلب توجه استفاده کند.

11. قانون طراحي عناصر ناوبري

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

رايج ترين تکنيک يک منوي ثابت است. هنگام پيمايش ، چنين منويي در جلوي چشمان شما باقي مي ماند و به شما امکان مي دهد به سرعت از يک قسمت به ديگر ديگر برويد:

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

12. قانون مخاطبان هدف

مهمترين ابزار براي تجزيه و تحليل نرخ تبديل سايت استفاده از تجزيه و تحليل است. اکنون سرويس ها و برنامه هاي بسياري وجود دارد که به شما امکان مي دهد ترافيک را رديابي کنيد ، کيفيت محتواي سايت را تجزيه و تحليل کنيد و مخاطبان سايت را شناسايي کنيد.

برخي سايت ها وجود دارد که دسترسي به آنها از طريق دستگاه هاي تلفن همراه بيشتر از رايانه است. به عنوان مثال ، فروشگاه هاي آنلاين که فقط از طريق شبکه هاي اجتماعي - اينستاگرام ، تلگرام و غيره تبليغ مي شوند. هنگام توسعه طراحي چنين سايتهايي ، اولين فناوري Mobile امکان پذير است - رويکردي که در آن ابتدا نسخه موبايل سايت و سپس بقيه گزينه ها توسعه مي يابد.

اين قانون همچنين در مورد فن آوري هاي مورد استفاده در سايت اعمال مي شود. کاربران آيفون نمي توانند محتواي ايجاد شده با فناوري انيميشن Flash قديمي را مشاهده کنند. بنابراين ، اگر اکثر مشتريان شما از دستگاه هاي اپل استفاده مي کنند ، بايد ابزارهاي مدرن تري را جايگزين آنها کنيد.

استوديوي طراحي IDBI هميشه چندين گزينه طراحي را توسعه مي دهد: براي دسک تاپ ، تبلت ، تلفن هاي همراه. اين رويکرد به کارآفرينان کمک مي کند تا سود بالايي از سايت بدست آورند و کاربران مي توانند به سرعت کالاي مناسب را پيدا کنند ، براي شفاف سازي اطلاعات با مديران تماس بگيرند. نمونه هايي از کار ما را مي توان در بخش "نمونه کارها" يافت .