Arabic feliratok

05-15 نيك بوتشارد حول الشاشات الصغيرة

05-15 نيك بوتشارد حول الشاشات الصغيرة

Beágyazókód kérése
5 Languages

Showing Revision 6 created 06/11/2015 by st_review1.

  1. إذًا آخر قيد من قيود المحمول هو الشاشة
    الصغيرة. قد يبدو ذلك أكثر قيود المحمول
  2. وضوحًا وهو يعني في الأساس أنه يمكننا
    الملائمة بنفس القدر في
  3. شاشة صغيرة للهاتف الذكي، لكن هناك
  4. طريقتان رائتعان يمكن أن نستخدمهما للمساعدة
    في تحسين
  5. واجهة المستخدم الصغيرة لدينا.
  6. >> نعم، يسميان الجمع وإعادة الانسياب.
  7. وسنتحدث مع مطور مصمم لـ
    Android يُدعى
  8. نيك بوتشارد، من فريق Android،
  9. حول كيفية تنفيذ ذلك في التطبيقات
    لديك.
  10. >> حسنًا Android ليس
  11. نظامًا من أنظمة OS ذات الحجم الواحد الذي
    يناسب جميع الأنماط.
  12. فهو يأتي بأحجام وأشكال عديدة ومختلفة.
    بدءًا من الهواتف
  13. الصغيرة وحتى أجهزة الكمبيوتر اللوحي
    الكبيرة والتليفزيونات
  14. وأكثر. الخبر الجيد هو أن Android قد تم
    إنشاؤه في الأساس لتبني هذا
  15. التنوع وإمدادك بالأدوات للتعامل معه. لذا
  16. أتاح لك Android من البداية إمكانية
    ضبط واجهة
  17. المستخدم لديك من الأعلى والأسفل في الأجهزة
    المختلفة. المشكلة هي أن
  18. أساليب الضبط لن تصل بك لأبعد من ذلك.
  19. لذا، سأشرح لكم بالتفصيل بعض العثرات
  20. الشائعة التي نقابلها عند الاعتماد على
  21. أساليب الضبط، ثم سأنتقل بكم إلى بعض الطرق
    البديلة
  22. للتعامل مع هذه العثرات. إذًا أول المشكلات
  23. التي نقابلها هي وجود أطوال زائدة بالأسطر.
  24. لذا في هذا التطبيق، يتم تشغيل النص
  25. والصور في كامل عرض شاشة الجهاز.
  26. في الأجهزة الأصغر بحجم الهواتف، قد يكون
    هذا جيدًا.
  27. لكن كلما وصلت لأكثر من حجم معين يصبح
  28. ذلك أمرًا غير مريح. فعندما تنظر، بوجهٍ
    خاص
  29. لأطوال الأسطر الخاصة بالنص، فستستهدف
    أطوالاً تقع بين 45 و75 حرفًا من النص
  30. حتى تحافظ على تجربة القراءة بشكلٍ
    مريح.
  31. وحتى يمكن للمستخدم مسح هذه الأسطر
    بسهولة.
  32. وفي هذا التطبيق يمكننا أن نرى أن
  33. الأمر يتخطى ذلك بوضوح.
  34. وثاني أكثر المشكلات التي نقابلها شيوعًا هي
  35. مشكلة المحتوى غير المتوازن. لذا في هذا
    المثال، يمكننا أن
  36. نرى أن هناك الكثير من المحتوى بمساحة
    متفاوتة في الجزء الأيسر العلوي
  37. من الشاشة، ومن ثم ترك مقدار كبير من
    المسافة البيضاء
  38. عبر بقية الشاشة. ويؤدي ذلك إلى
  39. نوع من الشعور غير المتوازن، الذي
  40. يجعل التطبيق الخاص بك غير محسّن بالكامل
    لهذا الجهاز.
  41. وآخر المشكلات التي نقابلها هي التي تتعلق
    بأكثر بالفرص
  42. الضائعة تقريبًا، ومن عدم الاستفادة بالشكل
    الأمثل من
  43. المساحة المتوفرة لك. لذا في هذا المثال
  44. قد يكون لدينا تطبيق يظهر الكثير من الصور.
    وكما يمكننا أن نرى
  45. هذه الصور المصغرة الصغيرة المجمعة
  46. في جانب واحد. ستكون عدم الاستفادة
    من هذه الشاشات الكبيرة الرائعة
  47. خسارة كبيرة، عندما تكون جميع هذه المساحات
  48. الزائدة متوفرة لك. لذا ينبغي
  49. عليك تجنب ذلك. هذه بعض العثرات
  50. الشائعة التي نقابلها عند الاعتماد على
    أساليب الضبط، ويكمن الحل للتعامل
  51. مع هذه المشكلات في واقع الأمر في تبني
  52. تصميم مستجيب للمحمول للاستجابة
  53. إلى الخصائص الخاصة بالجهاز. لذا
    إليك هذه الطرق
  54. الثلاثة التي يمكنك استخدامها
    لإجراء
  55. ذلك. أول طريقة هي ببساطة تقنية الجمع.
  56. فإذا كانت لديك مساحة زائدة، تقوم بجمع
  57. الأشياء من الشاشات المختلفة إلى شاشة واحدة
  58. لتقوم بإنشاء مساحة لملئها. لذا في
  59. هذا المثال، لدينا عرض نموذجي رئيسي
    للتفاصيل
  60. التي ستكون في شاشتين منفصلتين على الهاتف.
  61. لذا فإن النقر من عنصر قائمة ما يمكن أن
    يعرض
  62. تفاصيل لاحقة. في الأجهزة الأكبر التي
    تتمتع بعرضٍ كافٍ،
  63. قد نقوم بإظهار كلاً الأمرين مرة واحدة.
    وسيجنبنا ذلك مشكلة
  64. وجود أطوال زائدة بالأسطر وسيعمل على
    الاستفادة بشكلٍ أفضل
  65. من مساحة الشاشة. والطريقة الثانية
  66. هي الطريقة التي نطلق عليها اسم إعادة
  67. الانسياب الكبير. وهي نقل كتل الإنشاء
    الرئيسية بالتطبيق لديك
  68. وإعادة انسيابها أو إعادة ترتيبها على
    الشاشة
  69. للاستفادة بشكلٍ أفضل من المساحة.
    إذًا في هذا المثال،
  70. نقوم فقط بنقل شئٍ ما مثل صورة رأس كبيرة
  71. ونص أساسي بدلاً من التكدس عموديًا فوق
  72. أحدهما الآخر أو أفقيًا بجانب أحدهما الآخر.
  73. وبذلك نعطي الصورة أيضًا المزيد من المساحة
    لإظهارها في مقدار
  74. أكبر من الشاشة، بالإضافة إلى تجنب هذه
  75. الأطوال الزائدة للأسطر عند وجودها في
  76. جهاز أفقي. لذا تعتبر هذه الطريقة
  77. مفيدة ليس فقط للأجهزة ذات الأحجام
    المختلفة، لكن
  78. بإمكانك أنت أيضًا استخدام هذه
    الحيلة
  79. عند التغيير بين الاتجاهات المختلفة في
    نفس الجهاز.
  80. وآخر طريقة أرغب في شرحها هي ما نطلق
  81. عليه اسم إعادة الانسياب الصغير. لذا
  82. تركز هذه الطريقة حقًا على الكتل الفردية
  83. الموجودة ضمن التصميم الخاص بك وتفوض
    الكتل الفردية
  84. المسؤولية لتحسين نفسها بتحديد مقدار معين
  85. من المساحة. إليك مثالين على إجراء ذلك.
  86. على اليسار هنا، لدينا تطبيق من نوع القائمة
  87. حيث قد تؤدي المساحة الكافية المحددة،
  88. إلى أطوال زائدة بالأسطر أو طرق عرض
    غير متوازنة.
  89. لذا بدلاً من ذلك، يعلم كل عنصر
  90. قائمة فردي، مع مقدار معين من المساحة
    كيف يسحب نفسه.
  91. لذا بمجرد أن يتعدى حجمًا معينًا، مقدارًا
    معينًا من
  92. العرض المتوفر للجهاز، فسيقوم بتغيير
    تمثيله. فقد يتغير بدلاً من كونه
  93. عنصر قائمة، إلى كونه مثلاً، شبكة،
  94. تمثيل شبكة. لذا سيتيح لك ذلك إمكانية،
  95. ملء المساحة بشكلٍ أفضل. والمثال الثاني هو
  96. إذا لم تستطع، إذا لم تتوفر لديك طريقة
    لتقديم المزيد
  97. من المحتوى، فيمكنك تقديم نقطة هامشية
    بدلاً من ذلك.
  98. إذًا في هذا التطبيق من نوع النموذج،
    على اليمين
  99. عندما ننتقل لأبعد من الهاتف، عند تخطي
  100. حجم معين، وعندما لا يكون هناك
    مزيد
  101. من المحتوى لإظهاره على الشاشة، نقوم فقط
  102. بتقديم نقطة هامشية، حتى لا يصل الأمر إلى
  103. أن يكون المحتوى طويلاً أو غير متوازن بشكلٍ
    زائد.
  104. >> حسنًا حدثنا نيك للتو عن بعض المهارات
  105. التقنية الرائعة لواجهة المستخدم للشاشات
    الصغيرة. لكن الشاشات الصغيرة
  106. تؤثر في أكثر من مجرد واجهة المستخدم. حيث
    تؤثر في الحقيقة في تجربة المستخدم الخاصة
  107. بالمحمول لديك، نعم فمجرد أخذ تطبيق
    سطح المكتب أو
  108. الويب وتقليصه ليتلائم مع الشاشة الصغيرة
    ليس على الأرجح أفضل
  109. >> طريقة. نعم عليك أن تفكر
    أولاً في المحمول وفي
  110. تحسين التدفق للهاتف الذكي لديك. إذًا كيف
    نقوم بذلك؟ الإطار الشبكي.
  111. >> الإطار الشبكي.