Return to Video

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

  • 0:00 - 0:04
    إذًا آخر قيد من قيود المحمول هو الشاشة
    الصغيرة. قد يبدو ذلك أكثر قيود المحمول
  • 0:04 - 0:07
    وضوحًا وهو يعني في الأساس أنه يمكننا
    الملائمة بنفس القدر في
  • 0:07 - 0:09
    شاشة صغيرة للهاتف الذكي، لكن هناك
  • 0:09 - 0:12
    طريقتان رائتعان يمكن أن نستخدمهما للمساعدة
    في تحسين
  • 0:12 - 0:14
    واجهة المستخدم الصغيرة لدينا.
  • 0:14 - 0:18
    >> نعم، يسميان الجمع وإعادة الانسياب.
  • 0:18 - 0:19
    وسنتحدث مع مطور مصمم لـ
    Android يُدعى
  • 0:19 - 0:21
    نيك بوتشارد، من فريق Android،
  • 0:21 - 0:24
    حول كيفية تنفيذ ذلك في التطبيقات
    لديك.
  • 0:24 - 0:26
    >> حسنًا Android ليس
  • 0:26 - 0:29
    نظامًا من أنظمة OS ذات الحجم الواحد الذي
    يناسب جميع الأنماط.
  • 0:29 - 0:31
    فهو يأتي بأحجام وأشكال عديدة ومختلفة.
    بدءًا من الهواتف
  • 0:31 - 0:34
    الصغيرة وحتى أجهزة الكمبيوتر اللوحي
    الكبيرة والتليفزيونات
  • 0:34 - 0:37
    وأكثر. الخبر الجيد هو أن Android قد تم
    إنشاؤه في الأساس لتبني هذا
  • 0:37 - 0:41
    التنوع وإمدادك بالأدوات للتعامل معه. لذا
  • 0:41 - 0:43
    أتاح لك Android من البداية إمكانية
    ضبط واجهة
  • 0:43 - 0:47
    المستخدم لديك من الأعلى والأسفل في الأجهزة
    المختلفة. المشكلة هي أن
  • 0:47 - 0:49
    أساليب الضبط لن تصل بك لأبعد من ذلك.
  • 0:51 - 0:53
    لذا، سأشرح لكم بالتفصيل بعض العثرات
  • 0:53 - 0:55
    الشائعة التي نقابلها عند الاعتماد على
  • 0:55 - 0:58
    أساليب الضبط، ثم سأنتقل بكم إلى بعض الطرق
    البديلة
  • 0:58 - 1:02
    للتعامل مع هذه العثرات. إذًا أول المشكلات
  • 1:02 - 1:05
    التي نقابلها هي وجود أطوال زائدة بالأسطر.
  • 1:05 - 1:09
    لذا في هذا التطبيق، يتم تشغيل النص
  • 1:09 - 1:12
    والصور في كامل عرض شاشة الجهاز.
  • 1:12 - 1:16
    في الأجهزة الأصغر بحجم الهواتف، قد يكون
    هذا جيدًا.
  • 1:16 - 1:18
    لكن كلما وصلت لأكثر من حجم معين يصبح
  • 1:18 - 1:21
    ذلك أمرًا غير مريح. فعندما تنظر، بوجهٍ
    خاص
  • 1:21 - 1:25
    لأطوال الأسطر الخاصة بالنص، فستستهدف
    أطوالاً تقع بين 45 و75 حرفًا من النص
  • 1:25 - 1:28
    حتى تحافظ على تجربة القراءة بشكلٍ
    مريح.
  • 1:28 - 1:30
    وحتى يمكن للمستخدم مسح هذه الأسطر
    بسهولة.
  • 1:30 - 1:33
    وفي هذا التطبيق يمكننا أن نرى أن
  • 1:33 - 1:35
    الأمر يتخطى ذلك بوضوح.
  • 1:37 - 1:40
    وثاني أكثر المشكلات التي نقابلها شيوعًا هي
  • 1:40 - 1:42
    مشكلة المحتوى غير المتوازن. لذا في هذا
    المثال، يمكننا أن
  • 1:42 - 1:45
    نرى أن هناك الكثير من المحتوى بمساحة
    متفاوتة في الجزء الأيسر العلوي
  • 1:45 - 1:48
    من الشاشة، ومن ثم ترك مقدار كبير من
    المسافة البيضاء
  • 1:48 - 1:50
    عبر بقية الشاشة. ويؤدي ذلك إلى
  • 1:50 - 1:52
    نوع من الشعور غير المتوازن، الذي
  • 1:52 - 1:56
    يجعل التطبيق الخاص بك غير محسّن بالكامل
    لهذا الجهاز.
  • 1:58 - 2:01
    وآخر المشكلات التي نقابلها هي التي تتعلق
    بأكثر بالفرص
  • 2:01 - 2:05
    الضائعة تقريبًا، ومن عدم الاستفادة بالشكل
    الأمثل من
  • 2:05 - 2:07
    المساحة المتوفرة لك. لذا في هذا المثال
  • 2:07 - 2:11
    قد يكون لدينا تطبيق يظهر الكثير من الصور.
    وكما يمكننا أن نرى
  • 2:11 - 2:13
    هذه الصور المصغرة الصغيرة المجمعة
  • 2:13 - 2:16
    في جانب واحد. ستكون عدم الاستفادة
    من هذه الشاشات الكبيرة الرائعة
  • 2:16 - 2:19
    خسارة كبيرة، عندما تكون جميع هذه المساحات
  • 2:19 - 2:23
    الزائدة متوفرة لك. لذا ينبغي
  • 2:23 - 2:25
    عليك تجنب ذلك. هذه بعض العثرات
  • 2:25 - 2:29
    الشائعة التي نقابلها عند الاعتماد على
    أساليب الضبط، ويكمن الحل للتعامل
  • 2:29 - 2:31
    مع هذه المشكلات في واقع الأمر في تبني
  • 2:31 - 2:34
    تصميم مستجيب للمحمول للاستجابة
  • 2:34 - 2:39
    إلى الخصائص الخاصة بالجهاز. لذا
    إليك هذه الطرق
  • 2:39 - 2:41
    الثلاثة التي يمكنك استخدامها
    لإجراء
  • 2:41 - 2:45
    ذلك. أول طريقة هي ببساطة تقنية الجمع.
  • 2:45 - 2:48
    فإذا كانت لديك مساحة زائدة، تقوم بجمع
  • 2:48 - 2:51
    الأشياء من الشاشات المختلفة إلى شاشة واحدة
  • 2:51 - 2:53
    لتقوم بإنشاء مساحة لملئها. لذا في
  • 2:54 - 2:57
    هذا المثال، لدينا عرض نموذجي رئيسي
    للتفاصيل
  • 2:57 - 3:00
    التي ستكون في شاشتين منفصلتين على الهاتف.
  • 3:00 - 3:02
    لذا فإن النقر من عنصر قائمة ما يمكن أن
    يعرض
  • 3:02 - 3:07
    تفاصيل لاحقة. في الأجهزة الأكبر التي
    تتمتع بعرضٍ كافٍ،
  • 3:07 - 3:10
    قد نقوم بإظهار كلاً الأمرين مرة واحدة.
    وسيجنبنا ذلك مشكلة
  • 3:10 - 3:13
    وجود أطوال زائدة بالأسطر وسيعمل على
    الاستفادة بشكلٍ أفضل
  • 3:13 - 3:17
    من مساحة الشاشة. والطريقة الثانية
  • 3:17 - 3:21
    هي الطريقة التي نطلق عليها اسم إعادة
  • 3:21 - 3:24
    الانسياب الكبير. وهي نقل كتل الإنشاء
    الرئيسية بالتطبيق لديك
  • 3:24 - 3:26
    وإعادة انسيابها أو إعادة ترتيبها على
    الشاشة
  • 3:26 - 3:28
    للاستفادة بشكلٍ أفضل من المساحة.
    إذًا في هذا المثال،
  • 3:28 - 3:31
    نقوم فقط بنقل شئٍ ما مثل صورة رأس كبيرة
  • 3:31 - 3:35
    ونص أساسي بدلاً من التكدس عموديًا فوق
  • 3:35 - 3:38
    أحدهما الآخر أو أفقيًا بجانب أحدهما الآخر.
  • 3:38 - 3:42
    وبذلك نعطي الصورة أيضًا المزيد من المساحة
    لإظهارها في مقدار
  • 3:42 - 3:44
    أكبر من الشاشة، بالإضافة إلى تجنب هذه
  • 3:44 - 3:48
    الأطوال الزائدة للأسطر عند وجودها في
  • 3:48 - 3:50
    جهاز أفقي. لذا تعتبر هذه الطريقة
  • 3:50 - 3:53
    مفيدة ليس فقط للأجهزة ذات الأحجام
    المختلفة، لكن
  • 3:53 - 3:54
    بإمكانك أنت أيضًا استخدام هذه
    الحيلة
  • 3:54 - 3:57
    عند التغيير بين الاتجاهات المختلفة في
    نفس الجهاز.
  • 3:59 - 4:01
    وآخر طريقة أرغب في شرحها هي ما نطلق
  • 4:01 - 4:04
    عليه اسم إعادة الانسياب الصغير. لذا
  • 4:04 - 4:07
    تركز هذه الطريقة حقًا على الكتل الفردية
  • 4:07 - 4:10
    الموجودة ضمن التصميم الخاص بك وتفوض
    الكتل الفردية
  • 4:10 - 4:13
    المسؤولية لتحسين نفسها بتحديد مقدار معين
  • 4:13 - 4:15
    من المساحة. إليك مثالين على إجراء ذلك.
  • 4:15 - 4:19
    على اليسار هنا، لدينا تطبيق من نوع القائمة
  • 4:19 - 4:24
    حيث قد تؤدي المساحة الكافية المحددة،
  • 4:24 - 4:26
    إلى أطوال زائدة بالأسطر أو طرق عرض
    غير متوازنة.
  • 4:26 - 4:30
    لذا بدلاً من ذلك، يعلم كل عنصر
  • 4:30 - 4:33
    قائمة فردي، مع مقدار معين من المساحة
    كيف يسحب نفسه.
  • 4:33 - 4:36
    لذا بمجرد أن يتعدى حجمًا معينًا، مقدارًا
    معينًا من
  • 4:36 - 4:40
    العرض المتوفر للجهاز، فسيقوم بتغيير
    تمثيله. فقد يتغير بدلاً من كونه
  • 4:40 - 4:42
    عنصر قائمة، إلى كونه مثلاً، شبكة،
  • 4:42 - 4:45
    تمثيل شبكة. لذا سيتيح لك ذلك إمكانية،
  • 4:45 - 4:49
    ملء المساحة بشكلٍ أفضل. والمثال الثاني هو
  • 4:49 - 4:53
    إذا لم تستطع، إذا لم تتوفر لديك طريقة
    لتقديم المزيد
  • 4:53 - 4:56
    من المحتوى، فيمكنك تقديم نقطة هامشية
    بدلاً من ذلك.
  • 4:56 - 4:59
    إذًا في هذا التطبيق من نوع النموذج،
    على اليمين
  • 4:59 - 5:02
    عندما ننتقل لأبعد من الهاتف، عند تخطي
  • 5:02 - 5:04
    حجم معين، وعندما لا يكون هناك
    مزيد
  • 5:04 - 5:06
    من المحتوى لإظهاره على الشاشة، نقوم فقط
  • 5:06 - 5:09
    بتقديم نقطة هامشية، حتى لا يصل الأمر إلى
  • 5:09 - 5:11
    أن يكون المحتوى طويلاً أو غير متوازن بشكلٍ
    زائد.
  • 5:13 - 5:15
    >> حسنًا حدثنا نيك للتو عن بعض المهارات
  • 5:15 - 5:19
    التقنية الرائعة لواجهة المستخدم للشاشات
    الصغيرة. لكن الشاشات الصغيرة
  • 5:19 - 5:23
    تؤثر في أكثر من مجرد واجهة المستخدم. حيث
    تؤثر في الحقيقة في تجربة المستخدم الخاصة
  • 5:23 - 5:25
    بالمحمول لديك، نعم فمجرد أخذ تطبيق
    سطح المكتب أو
  • 5:25 - 5:28
    الويب وتقليصه ليتلائم مع الشاشة الصغيرة
    ليس على الأرجح أفضل
  • 5:28 - 5:30
    >> طريقة. نعم عليك أن تفكر
    أولاً في المحمول وفي
  • 5:30 - 5:34
    تحسين التدفق للهاتف الذكي لديك. إذًا كيف
    نقوم بذلك؟ الإطار الشبكي.
  • 5:34 - 5:34
    >> الإطار الشبكي.
Cím:
05-15 نيك بوتشارد حول الشاشات الصغيرة
Leírás:

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

more » « less
Video Language:
English
Team:
Udacity
Projekt:
UD849 - UX Design
Duration:
05:36

Arabic subtitles

Felülvizsgálatok Compare revisions