نظرة على تصميم للأجهزة المحمولة
عندما صدر أول جهاز iPhone ، استغرق الأمر عالم التكنولوجيا من العاصفة. منذ ذلك الحين ، مر ما يقرب من 5 سنوات وسوق الهواتف الذكية في ازدياد شعبيته ، حتى أن مايكروسوفت دخلت المنافسة مع نظام التشغيل Windows 7 OS وشركائها. نظرًا لوجود عدد كبير من مستخدمي الإنترنت على هواتفهم الذكية في الوقت الحاضر ، فمن المنطقي توقع زيادة عدد مواقع الويب للجوّال بقوة.
ومع ذلك ، فإن تصميم الويب للجوال هو عملية مختلفة تمامًا عن طريق تصميم الويب المشترك. تم تصميم مواقع الويب لدينا لشاشة كبيرة ، ولكن حجم شاشة الهاتف الذكي صغير جدًا مقارنةً بذلك ، مما يؤدي إلى مشكلات مزعجة في قابلية الاستخدام. معايير وممارسات التصميم الجديدة مطلوبة بشكل كبير لتصميم موقع محمول أفضل مع تجربة مستخدم سلسة.
في هذا الدليل ، سنتطلع إلى تصميم موقع سهل الاستخدام لمتصفحات الهواتف الذكية. سأتحدث عن أفضل الممارسات وأداة المطور المفيدة بالنسبة لك لتصميم موقع ويب للجوال بشكل أفضل ، لذلك دعونا ندخله بعد القفز!
التخطيط تجربة المستخدم قوية
عند إنشاء موقع ويب للجوال ، من المهم القيام بذلك ضع في اعتبارك المستخدمين في جميع الأوقات, كما هو في نهاية المطاف يتم تصميم موقع الويب الخاص بك وإنشاء للمستخدمين للاستمتاع. من الشائع بالتأكيد أن يتوقع المستخدمون أن يتصرف موقع ويب للجوال بشكل مشابه لبيئة سطح المكتب ، هكذا الحفاظ على تجربة المستخدم ودية يجب أن يكون تركيزك الرئيسي أثناء بناء موقع جوال ناجح.
هناك العديد من مفاهيم قابلية الاستخدام التي يجب مراعاتها للمستخدمين. وتشمل هذه الاعتبارات حجم الشاشة, الصور المضمنة, وصلات, أحجام الخطوط, و تصفح الصفحة. لقد كتبنا عن تصميم قابليتها للاستخدام المحمول لتتمكن من نحت موقع الويب الخاص بك لسهولة الاستخدام. إلى جانب الدليل ، تحتاج إلى دائما تبقي نفسك في حالة تأهب لأفكار جديدة لتحسين موقعك.
تخطيط تجربة مستخدم قوية يعني أيضًا أنه يجب عليك ذلك النظر في كيفية تفاعل المستخدم مع موقع الويب الخاص بك. على سطح المكتب ، يمكن تفاعل موقع الويب الخاص بك باستخدام الماوس ولوحة المفاتيح ، ولكن على مستخدمي الهواتف الذكية نقر, عبها, و الضرب طريقهم في جميع أنحاء موقعك. ربما تحتاج إلى تصميم الموقع بالطريقة التي يمكن للمستخدمين الوصول إلى معلومات الموقع بسهولة مع هذه الحركات المادية.
اجعل الصفحات قصيرة وحلوة
اللحوم والبطاطا من أي موقع هو محتوى الصفحة. كل من صفحات الويب الخاصة بك يحمل كميات كبيرة من المعلومات المفيدة للمستخدمين لديك ، مثل النص والصور ومقاطع الفيديو. سوف تجد أيضًا مقالات إخبارية ونشرات مدونة تعمل على بضع صفحات ، مما يساعد على تفتيت النص ولكن لا ينصح به للأجهزة المحمولة كتقنية يتطلب المزيد من تحميل الصفحة مما يعني المزيد من وقت الانتظار من جانب المستخدم.
ما لم يكن مطلوبا تماما أوصي الحفاظ على محتوى صفحتك قصيرة. يجب عليك أيضًا التفكير في جعلها تبدو حلوة تصميم الخط بحجم أكبر و ربما الصور المتحركة جانبا. مع عرض المحتوى الخاص بك بشكل كامل ، فإنه يجذب الانتباه بشكل طبيعي ، ناهيك عن التحسين الفعلي الذي يجعل مسح الصفحات أبسط كثيرًا. هذا هو أيضا السبب في أ تخطيط عمود واحد يناسب مشروع القانون تماما.
في معظم الحالات ، لن تقوم متصفحات الجوال بتحميل صفحات الويب بنفس سرعة تحميل متصفحات سطح المكتب ، وقد يؤدي ذلك إلى إزعاج قرائك ، ولهذا السبب تحتاج إلى تحسين المحتوى والموقع لتحميل المحتوى بسرعة عالية. يمكنك إما تقصير المقال مع الحفاظ على المحتوى الكامل, أو ببساطة إزالة الصور غير الضرورية. ضع تركيزك على البساطة بدلاً من الجمال.
الملاحة الأساسية هي منقذ الحياة للزائرين الذين يتطلعون إلى التنقل بين الصفحات. على جهاز محمول ، ستظهر ارتباطات الشاشة أصغر بطبيعتها ، وبالتالي يصعب النقر عليها. قرص أساسي لحل هذه المشكلة هو تعظيم الخط والمساحة لروابط التنقل الخاصة بك, ربما تناول مساحة الكتلة بأكملها. بدلا من ذلك يمكنك صمم شريط التنقل ليكون مشابهًا لشريط علامات تطبيق iPhone الحقيقي, مثل واحد عرضت أعلاه.
بناء موبايل أنماط المغلق
الآن بعد أن عرفنا كيفية تحسين موقع الويب للجوّال من أجل سهولة القراءة وسهولة الاستخدام ، سيكون من الجيد الحديث عن أنماط CSS. تحتوي كل ورقة أنماط CSS على العديد من المحددات ذات الخصائص المتعلقة بالخطوط والأحجام وتحديد المواقع وإعدادات العرض. عندما يتعلق الأمر بالجوال ، يجب أن تنتبه كيف تقع كتلك في مكانها.
(مصدر الصورة: مجلة تحطيم)
مجال واحد لتبدأ هو إعادة تعيين عرض المجمع في موقعك إلى نسبة مئوية. من الشائع استخدام وحدات البكسل كوحدة لتحديد المواقع وارتفاع الخط وحجم الخط وعرض div ، ولكن عند التعامل مع الهاتف المحمول ، فأنت تريد أن تكون صفحاتك السائل والانتقال بين كل جهاز بشكل طبيعي. سيسمح تعيين div حاوية إلى عرض 100٪ المحتوى ملء بسهولة بين وضع عمودي / أفقي دون أن تتدفق على الحافة.
إذا كنت أحد الأشخاص الذين يتطلعون إلى إعادة هيكلة تخطيطك بالكامل ، فتأكد من ذلك ضرب كل شيء مع إعادة تعيين. أيضا يجب تعيين الفقرات والعناوين وروابط التنقل على العرض محجوب؛ حتى تحصل على هذا الشعور الخطي نمط الطباعة. إعادة وضع الهوامش والحشو لإزالة سخام من التصميم الخاص بك. تجنب الجداول إذا كان ذلك ممكنا لأن هذه تميل إلى تقديم نتائج عربات التي تجرها الدواب بين الأجهزة.
الصور الكبيرة هي أيضا متاعب بين الأجهزة. سيتم عرض معظم صور موقع الويب الخاص بك بحجم أكبر من 480 بكسل وقد لا ترغب في جعلهم يكسرون الحاوية. الخيار الأول هو اضبط عرضهم بنسبة 100٪ بحيث يمكن تغيير حجم الصور بشكل طبيعي. من الممكن بالتأكيد إنشاء مجموعات مختلفة من الصور لموقع الويب الخاص بك وعرضها بشكل مختلف استنادًا إلى وكيل المتصفح ، ولكن بصراحة هذا يضيف المزيد من الأعمال إلى جانبك ، لذا حاول استخدم هذه التقنية فقط عند الحاجة إليها.
تصميم المواقع على iPhone
تعتبر حصة سوق الهاتف المحمول كبيرة ومقسمة إلى حد ما ، لكن Apple حصلت على شريحة كبيرة من الكعكة مع iDevices. يعد كل من iPhone و iPad من الأجهزة المحمولة المجهزة بالإنترنت مع وظائف شاشة لمس مدمجة. وهي تتميز بنفس مستعرض الويب الافتراضي وسفاري ومجموعة كاملة من الخيارات الأخرى.
بالنسبة إلى مواقع الويب الخاصة بـ iPhone ، ستحتاج إلى استهداف حجم الشاشة. تم ضبط حجم الشاشة الثابتة على 320 بكسل × 480 بكسل لطرز iPhone الأقدم و 640px بواسطة 960px لـ iPhone 4 و iPhone 4S.
تقتصر شاشات iPhone على المساحة. لابد أن يكون لديك كتلة واحدة من المحتوى يمتد لفترة طويلة حسب الحاجة. حفظ العناصر في عمود واحد سيوفر لك الصداع و السماح لتخطيط السوائل ل “اكمل” كلا الوضعين صورة والمناظر الطبيعية. لهذا ستحتاج على الأرجح إلى تطوير قالب آخر وإيجاد طريقة للتحقق مما إذا كان الزائر (الزوار) يستخدمون جهاز iPhone أم لا. يجب أن تعمل مقتطفات PHP الصغيرة أدناه بشكل جيد:
أساسا المنطق يسحب عالمنا $ _SERVER متغير لعامل HTTP والتحقق مما إذا كانت الكلمة “ايفون” يظهر في أي مكان. إذا كانت الإجابة بنعم ، فنحن نعرف أن زائرنا يستخدم جهاز iPhone ومن هناك يمكننا وضع HTML مختلف قليلاً أو حتى تخطيط قالب جديد بالكامل! ويمكن أيضا أن تستخدم ل تتضمن ورقة أنماط خاصة بـ iPhone, تغيير عناوين صفحتك أو إزالة الصور أو أي تأثيرات ديناميكية تقريبًا.
عندما يتعلق الأمر بتقديم أنماط جديدة ، فهناك طريقة أسهل. كما ذكرنا سابقًا ، يبلغ الحد الأقصى لحجم الشاشة لـ iPhone 960 بكسل. لذلك مع استعلامات وسائط CSS3 الجديدة ، يمكنك إضافة أنماط مباشرة إلى ورقة أنماط موقعك الرئيسية فقط عرض على iPhone. فيما يلي رمز مثال صغير:
media شاشة و (أقصى عرض الجهاز: 960 بكسل) / * iPhone css * /
هذا يعمل ل يمكن الآن لـ CSS اكتشاف عوامل التصفح وخصائصها. أقصى عرض للشاشة هو أحد الخصائص التي يمكن اكتشافها أيضًا.
ليس من الصعب للغاية تصميم موقع ويب للجهاز متعدد الإمكانات لأجهزة iPhone ، فهناك العديد من الأمثلة التي يمكن الرجوع إليها ، مثل CSS iPhone. تبقي نفسك مشغول الدراسة ولا تخافوا تجربة مع التقنيات الجديدة في تصميم واجهة المستخدم.
البرمجة النصية jQuery المحمول
غالبية مطوري الويب في الواجهة على دراية بمكتبة مسج. إنه يوفر بعض الاختصارات الرائعة لتأثيرات الترميز ، الرسوم المتحركة ، القوائم المنسدلة ، ومجموعة من الوظائف الأخرى داخل المتصفح ، وهو يصبح رائعًا أكثر مع الإعلان عن jQuery Mobile. أنه لا ينصح للقفز في التكنولوجيا مباشرة وتحميل موقع الويب الخاص بك مع تأثيرات في كل مكان ، ولكن لأغراض الاختبار ، يمكن أن تلعب الوظائف المتقدمة أداءً جيدًا.
يختلف jQuery Mobile قليلاً عن jQuery العادي لأنه يمنحك بيئة كاملة للبناء عليها. عندما تعمل مع ملفاتهم ، فهي ليست فقط جافا سكريبت ولكن أيضًا أنماط CSS للأزرار والروابط وتأثيرات النقل. أنت لا تزال تكتب صفحات الويب في كود HTML ، لكن فريق jQuery Mobile لديه توفير الكثير من ميزات تصميم واجهة المستخدم الاختيارية. هناك الكثير يمكننا القيام به مع هذا الإطار ولكن منذ ذلك الحين الإطار لا يزال في مرحلة تجريبية, دعونا التمسك تأثيرات بسيطة.
يقدم برنامج تعليمي صغير في مدونة DevGrow بعض الأمثلة الرائعة. يقدم الموقع الرسمي أيضًا عروضًا تجريبية لك لتجربتها. لاحظ أننا نستخدم سمة HTML, البيانات التي تمر بمرحلة انتقالية لإضافة تأثيرات الحركة مع أي من القيم المحددة مسبقًا. وتشمل هذه الشرائح ، والبوب ، والوجه ، والتلاشي ، وما إلى ذلك. تحقق من مثال DevGrow الصغير للتعرف على هذه الآثار.
تعد التأثيرات والانتقالات جميلة إلى حد ما ، وحقيقة أنه يمكنك إنشاء واجهة متنقلة بالكامل بدقة باستخدام jQuery هي أيضًا خطوة كبيرة للأمام لهذا النظام الأساسي ، ولكن مع النظام الأساسي فقط في النسخة التجريبية ، لن أوصي بإنشاء موقع الجوال بالكامل الخاص بك مع مكتبتهم ، خاصة مع حقيقة أنه غير مدعوم من قبل جميع الهواتف الذكية الرئيسية في وقت كتابة هذا التقرير (خاصة Windows Phone 7) ، لكنه بالتأكيد سيتحسن مع مرور الوقت.
في النهاية أوصي بالتعرف على هذا الإطار الجديد للهاتف المحمول قبل نشر مباشرة على أي مشروع.
أدوات المطور مفيدة
لا يبحث مطورو الأجهزة المحمولة فقط عن موارد الترميز والتصميم. هناك أيضًا ارتفاع في الطلب على أدوات البرامج و IDEs ، ناهيك عن أطر عمل الأجهزة المحمولة القوية. إن تطوير الويب مهمة صعبة تتطلب قدراً كبيراً من التفاني ، لكن استخدام أدوات إضافية سيجعل عملك أسهل بكثير.
أوبرا موبايل المحاكي
هل تبحث عن طريقة للتحقق من كيفية عرض موقع الويب للجوال الخاص بك؟ هذا يمكن أن يكون ألمًا كبيرًا إذا لم يكن لديك هاتف ذكي مع إمكانية الوصول إلى الإنترنت. أو لا ترغب في استخدام هاتفك الذكي لاختبار الموقع في كل مرة يتم فيها دفع التحديث إلى الخادم الخاص بك. حسنًا ، Opera Mobile Emulator عبارة عن برنامج رائع لاختبار موقع الويب الخاص بك على الجوال.
المحاكي لا يدعم حولها 20 ملف تعريف للجوال مثل Samsung Galaxy S و HTC Desire وحتى الجهاز اللوحي مثل Motorola Xoom. من الممكن أيضًا تعيين قرار مخصص و كثافة بكسل لأغراض الاختبار المكثف. أفضل ما في الأمر هو أنك لست بحاجة إلى القيام بالكثير من أعمال التهيئة ، فقط قم بعمل عدد قليل من النقرات وأنت على ما يرام.
التنزيل مجاني تمامًا ويعمل البرنامج في بيئة نظام التشغيل Mac OS X و Windows. مطوروهم يعملون بجد في إنشاء معايير الويب المناسبة والتعديل على محرك تقديم المحمول الخاص بهم. أوصي بأدوات التطوير الأخرى الخاصة بهم إذا كنت تبحث عن أدوات إضافية لمساعدتك على طول الطريق.
فونغاب
لم يتم تطوير العديد من واجهات برمجة التطبيقات عبر HTML5 لإنشاء تطبيقات محمولة صلبة. والجدير بالذكر أن المشهد المحمول كان يفتقر إلى هذه الأنواع من المواقع ، وهذا هو بالضبط السبب الذي يجعل PhoneGap يملأ مكانته جيدًا. منصة تسمح لك بسهولة أنشئ تطبيقات قائمة على HTML5 كتطبيقات أصلية على 6 منصات مختلفة.
تعمل العملية عن طريق ضغط الشفرة أولاً وتمريرها عبر إطار تطبيق PhoneGap. من هناك ، يمكن أن تصل تطبيقاتك إلى جزء كبير من سوق الأجهزة المحمولة بما في ذلك Android و iOS و Windows Phone 7 و BlackBerry.
إذا كنت مرتبكًا قليلاً ، فلا تقلق كثيرًا. تحدد صفحات الدعم الخاصة بهم العملية بدقة وتقدم روابط لمصادر مفيدة. تم تجميع التطبيقات التي تم تطويرها بالفعل في محفظة جميلة على غرار المكتبة. تحقق من مجموعة التطبيقات الكاملة الخاصة بهم والتي يمكنك الفرز حسبها باستخدام لقطات شاشة.
Aptana Studio
موقع Aptana هو الموقع الرئيسي للتعرف على أدوات التطوير الخاصة بهم. يحتوي الإصدار الأحدث من الأجنحة ، Aptana 3.0.3 ، على بيئة تطوير متكاملة متكاملة تمامًا لتطوير الويب ، وأنماط CSS ، وتعشيش علامات HTML ، وأفضل جزء: Aptana هو تمامًا حر لتحميل! إنها توفر حزمًا لجميع أنظمة التشغيل الرئيسية الثلاثة (بما في ذلك Linux) والتي تعد راحة كبيرة للمطورين.
ما يجعل Aptana مميزًا هو مدى سرعة تطوير تطبيق ويب صغير واختبار تصميمك. جناح الاستوديو يسمح لك تطوير واختبار تطبيق ويب يعمل بسرعة على Ruby on Rails أو PHP أو Python أو ببساطة HTML / CSS, وقد تم مؤخرا تحسين ميزات تمييز الكود الخاصة بهم تتضمن مكتبات علامات HTML5 و CSS3 جديدة. كما يأتي مزودًا بتكامل Git ، ومحطة مدمجة ، ومصحح أخطاء الكود ، وحفنة من الميزات الأنيقة الأخرى.
مجموعات واجهة المستخدم الرسومية المحمولة وأيقونات
ماذا سيكون على شبكة الإنترنت دون المجانية الكذب؟ بالنسبة لمصممي الويب ، تحتل أهمية واجهة المستخدم المرتبة فوق أي شيء آخر. من الصعب الوصول إلى واجهات المستخدم الرسومية البسيطة وقد توصل المصممون الأكثر إبداعًا إلى حلول عمل.
ومع ذلك ، هناك العديد من الموارد المجانية ولكن عالية الجودة المتاحة لمصمم الويب الخاص بك لاختبار. تم تصميم مجموعات واجهة المستخدم الرسومية هذه في الغالب على Adobe Photoshop أو Fireworks حيث يمكنك التنقل بين العناصر وتصديرها كملفات صور مسطحة.
الرموز هي مورد مفيد للغاية أن يكون. يقوم المصممون بإنشاء مجموعات مجانية وعرضها على الإنترنت بشكل متكرر أكثر من أي وقت مضى. يحتوي أحد مواقع الويب Glyphish على عرض للأيقونات المجانية والمحترفة. تعتمد هذه التصميمات على موضوع واحد لاستخدامه في قوالب الجوّال وتصميمات التطبيقات.
ستكون مجموعتنا من قوالب النماذج الأولية للأجهزة المحمولة مساعدة كبيرة لك خلال رحلة تطوير الموقع والتطبيق. يجب ألا تبدأ الترميز حتى يكون لديك واجهة رسومية قوية وستبدأ مجموعات الويب هذه في البدء في المسار الصحيح.
نظام تشغيل iOS 5
عناصر واجهة المستخدم فون المتجهات
مجموعة أيقونة تطبيق iPhone
مغناطيس سلكي (عدة DIY)
واجهة الروبوت واجهة المستخدم الرسومية
