• درس تعليمي

"هل هذا الحوار الممل ضروري حقًا؟"

في هذه المقالة، قمت بإيجاز المبادئ الأساسية للتصميم متعدد الأبعاد وقدمت النصائح حول كيفية تنفيذها. تمت كتابة النص في أعقاب فصل دراسي رئيسي للمطورين، والذي قمنا نحن الروبوتات بتنظيمه معًا المكتب الروسيجوجل (ثينك موبايل).

ذات يوم، بدت جميع منتجات Google سيئة بطرق مختلفة. حتى منتج واحد لكل منصات مختلفةبدا غير متناسق.

بدأ كل شيء يتغير في عام 2011، عندما بدأت جوجل العمل الجاد لتوحيد الجزء المرئي من النظام البيئي لمنتجاتها وأطلقت عليه اسم مشروع كينيدي.

ما علاقة كينيدي بالأمر؟

الأسطورة هي كما يلي: بدأ الرئيس كينيدي برنامجًا لإرسال رجل إلى القمر (إذا كنت تعتقد أن هذه الرحلة قد حدثت على الإطلاق). ويعلن الرئيس الكبير في Google، لاري بيج، عن مبدأ مفاده أنه لا فائدة من تحسين المنتجات بنسبة 10٪ - بل يجب أن تكون أفضل بعشر مرات من منتجات المنافسين. إذا كنت ستطلق منتجًا، فاذهب مباشرة إلى القمر. هنا أيضًا تقرر إعادة كل شيء بشكل جذري.

أثرت النتيجة في المقام الأول على الويب، ولكنها أثرت أيضًا على البعض منتجات المحمول. وفي نفس الوقت كنت أمشي عمل منفصلفوق تصميم أندرويد- Holo، الذي حل محل واجهات Android القديمة غير الممتعة من الناحية الجمالية.
ولكن كانت هناك مشكلة واحدة: كان Holo لا يزال مختلفًا عن مشروع كينيدي.


كان على المستخدمين التكيف مع الواجهة الجديدة عند التبديل، والتعود على المظهر وتخطيط عناصر التحكم وما إلى ذلك.
لذلك، في مرحلة ما، اجتمعت مجموعة من المصممين من مختلف أقسام Google وبدأوا في صراع مع هذه المشكلة من أجل حلها نهائيًا.

في عام 2014، في مؤتمر I/O، تم تقديم نظام تصميم جديد، وهو نهج يسمى تصميم المواد. يتيح لك نظام التصميم الجديد إنشاء تجربة مستخدم متسقة على جميع الشاشات: سطح المكتب، والهواتف الذكية، والأجهزة اللوحية، والساعات، وأجهزة التلفزيون، والسيارات. بالنسبة لتطبيقات Android، يعد التصميم متعدد الأبعاد تطورًا للغة المرئية وإرشادات التصميم الخاصة بـ Holo. في نواح كثيرة هو أكثر من ذلك نظام مرن، والذي تم إنشاؤه مع الأخذ في الاعتبار حقيقة أن المصممين الآخرين سيستخدمونه - كان Google هو المستخدم الأول فقط.

يتيح لك التصميم متعدد الأبعاد اتباع نهج أكثر موضوعية في اتخاذ قرارات التصميم: كيف يبدو شيء ما، وكيف يعمل شيء ما، وكيف تتم الرسوم المتحركة، وما إلى ذلك. فهو يضع حدودا معقولة، ولكن ليس قيودا غير ضرورية.

4 مبادئ تصميم المواد

يعتمد التصميم متعدد الأبعاد على أربعة مبادئ رئيسية:

1. الأسطح اللمسية.في التصميم متعدد الأبعاد، تتكون الواجهة من طبقات ملموسة مما يسمى "الورق الرقمي". تقع هذه الطبقات على ارتفاعات مختلفة وتلقي ظلالاً على بعضها البعض، مما يساعد المستخدمين على فهم تشريح الواجهة وكيفية تفاعلهم معها بشكل أفضل.
2. تصميم وطباعة.إذا اعتبرنا الطبقات عبارة عن قطع من "الورق الرقمي"، فعندما يتعلق الأمر بـ "الحبر الرقمي" (كل ما يتم تصويره على "الورق الرقمي")، فإن النهج التقليدي التصميم الجرافيكي: على سبيل المثال، مجلة وملصق.
3. الرسوم المتحركة ذات مغزى.في العالم الحقيقي، لا تظهر الأشياء من العدم ولا تختفي في العدم - وهذا يحدث فقط في الأفلام. ولهذا السبب، نفكر دائمًا في Material Design في كيفية استخدام الرسوم المتحركة في الطبقات والحبر الرقمي لمنح المستخدمين تلميحات حول كيفية عمل الواجهة.
4. التصميم التكيفي.يتعلق الأمر بكيفية تطبيق المفاهيم الثلاثة السابقة على أجهزة مختلفة ذات دقة وأحجام شاشات مختلفة.

لذلك، دعونا نتحرك بالترتيب.

الأسطح اللمسية

لنبدأ بالأسطح الملموسة. هذه هي نفس قطع "الورق الرقمي" التي تتمتع، على عكس الورق العادي، بقوى خارقة - يمكنها تمديد شكلها وتوصيلها وتغييرها. وبخلاف ذلك، فإنهم يتصرفون بما يتفق تمامًا مع قوانين الفيزياء وتشريعات الاتحاد الروسي.

سطح

ما هو السطح؟ إنها في الأساس "حاوية" بها ظل ولا شيء غير ذلك. ولكن هذا يكفي لتمييز كائن عن آخر وإظهار كيفية تحديد موقعهما بالنسبة لبعضهما البعض. تسعى فلسفة التصميم متعدد الأبعاد إلى تحقيق البساطة والتصميم "النظيف".

ليست هناك حاجة للذهاب بعيدًا واستخدام الملمس أو تطبيق التدرجات لتصوير الضوء والظل. ليست هناك حاجة لإعطاء خصائص بصرية للجلد مثل تلك الموجودة في باب شقة الجدة - فالظل الأنيق يمكن أن يعبر عن الكثير. لكن كل سطح له ارتفاعه الخاص - وهو موقع على المحور Z وكل سطح يلقي بظلاله على الجزء السفلي، تمامًا كما هو الحال في العالم الحقيقي.

عمق

في "التصميم المسطح" التقليدي، يتم تجنب مثل هذه الظلال باعتبارها مظهرًا من مظاهر الحجم، ولكنها تؤدي وظيفة مهمة تتمثل في الإشارة إلى بنية العناصر وتسلسلها الهرمي على الشاشة. فمثلاً، إذا كان ارتفاع العنصر أكبر، فإن ظله أكبر. يساعد هذا العمق المتزايد في تركيز انتباه المستخدم على الأشياء المهمة والقيام بذلك بأمان.

يوفر العمق أيضًا أدلة حول التفاعل. هنا، أثناء قيام المستخدم بالتمرير، يلتصق البلاط الأخضر بالطبقة العليا ويتم إضافة الظل. وهذا يدل على أن "الحبر" لا يتحرك فحسب، بل خلفية بيضاءيقع أدناه ويتحرك بالكامل.

من المهم أن نلاحظ أن العمق له "قاع". من المفترض أنه مقيد بسمك الجهاز المحمول نفسه. وهذا يعني أنه إذا كان هناك سنتيمتر واحد على الهاتف الذكي من الزجاج إلى الجدار الخلفي، ولديك بطاقة ائتمان في الواجهة، فلا يمكنك ببساطة قلبه - فسوف يستقر على الزجاج والجدار الخلفي.

ملحوظة!

1. يجب أن يكون العمق منطقيًا.اسأل نفسك السؤال: "لماذا هذا وليس غير ذلك؟" إذا لم يكن هناك إجابة، فمن المنطقي أن نبحث عن حل آخر.
2. رعاية الخدمات اللوجستية.تكون الأزرار العائمة وأشرطة الأدوات ومربعات الحوار على ارتفاع معين. في بعض الأحيان يحتاجون إلى التحرك على طول المحور Z لتجنب الاصطدامات عند حدوث شيء ما. عليك أن تكون حذرًا للغاية مع تصميم الرقصات هذا.
3. لا حاجة للضغط على الزر.الزر العائم هو عنصر مميز للغاية. يعتقد الكثير من الناس أن الأمر يستحق إضافته إلى الواجهة: ويصبح هذا على الفور التصميم متعدد الأبعاد. ولكن يجب استخدامه فقط لإجراء رئيسي في تطبيقك. إذا كنت بحاجة إلى إغلاق نافذة أو تأكيد إجراء ما، فلن تحتاج إلى استخدام زر عائم. هناك عناصر أخرى لهذا.
4. ليس كل شيء يجب أن يكون على البطاقة.إذا كان الكائن يحتوي على العديد من الأشكال ويحتوي على الكثير من المحتوى المختلف، فإن البطاقة مناسبة. وإذا لم يكن الأمر كذلك، فربما يكون من الأفضل القيام بذلك نص عاديأو قائمة نصية؟
5. هل هذا الحوار الممل ضروري حقًا؟لقد حاول مصممو Google تحسين مربعات الحوار، لكن الأوراق السفلية لا تزال أكثر ملاءمة لمعظم المهام. يوجد أيضًا بارات للوجبات الخفيفة. مربعات الحوارهناك حاجة فقط لطرح سؤال للمستخدم.
6. استخدام توسيع القائمة.هذا نمط تم الاستخفاف به، ولكنه مادة تمامًا ويحل المشكلة جيدًا.

تصميم وطباعة

نظرًا لأننا في التصميم متعدد الأبعاد نسمي الأسطح "الورق الرقمي"، فكل ما يتم وضعه عليه - النصوص والصور والأيقونات - تتم طباعته باستخدام "الحبر الرقمي". ويستخدم تصميم المواد المبادئ الكلاسيكية لتصميم الطباعة في تصميم الواجهات.

الطباعة الأنيقة

في تصميم الطباعة، تلعب الطباعة دورًا مهمًا بشكل أساسي. التقط أي مجلة وستلاحظ أن الطباعة تفعل شيئين: وظائف مهمة. أولاً، يعد اختيار الخط وتكوينه عنصرًا أساسيًا في تشكيل العلامة التجارية للنشر. ثانياً، تحدد الطباعة بنية المحتوى.


هناك الكثير من النص على هذه الشاشة. ولكن إذا قمت بتجاهل الرموز وتحويل النص إلى كتل رمادية، يصبح من الواضح أن البنية يمكن تمييزها تمامًا.

لدينا رأس كبير ومجموعة من العناصر الأصغر التي تتميز بتشبعها - والأكثر أهمية منها تكون أغمق. في الوقت نفسه، نميز بوضوح المجموعة بسبب حقيقة أن بعض المستطيلات تقع قريبة، وهناك مسافة بادئة كبيرة بين الكتل. بشكل عام، كل شيء في أفضل التقاليد!

حجم الخط

يحتوي موقع الويب google.com/design/spec على لوحة خطوط قياسية يمكنك استخدامها بأمان. تستخدم اللوحة خط Roboto، ولكن يمكن استبداله بخط التوقيع الخاص بك لدعم العلامة التجارية. من المهم اختبار كل شيء بعناية، حيث قد يعمل عرض الخطوط بشكل مختلف على الأجهزة المختلفة. عادة خطوط OTFالعمل بشكل أفضل من TTF.

الطباعة المتناقضة

هناك مبدأ آخر من عالم الطباعة يتناسب جيدًا مع التصميم متعدد الأبعاد وهو الطباعة المتناقضة - وهو تباين ملحوظ حقًا بين أحجام خطوط العنوان ونص التنضيد. إنه جميل ويسلط الضوء على الشيء الرئيسي جيدًا.

شبكة وحدات وأدلة

انتقل الآن إلى موقع المحتوى على الشاشة. في تصميم الطباعة، يتم استخدام الشبكات المعيارية في تصميم الشاشة، وهي شبكات أساسية تحتوي على وحدات صغيرة جدًا. وبالتالي، يستخدم التصميم متعدد الأبعاد شبكة بخطوة 8dp. DP عبارة عن بكسل مستقل عن الكثافة، وهي وحدة تشبه إلى حد كبير وحدة النقطة في iOS.

لكن السمة المميزة الرئيسية لوضع المحتوى وفقًا لمبادئ التصميم متعدد الأبعاد هي وضع الأدلة الرئيسية. فهي تضع مسافات بادئة من حواف الشاشة، وتقوم بتنظيم المعلومات والتحكم في نظرة المستخدم. إذا كنت على دراية بتصميم المنشورات متعددة الصفحات أو قرأت Tschichold، فمن المحتمل أنك تعرف الكثير عن الشبكة والهوامش وتفهم من أين تأتي الأرجل.

في الواقع، نرى عمودًا من النص في المنتصف وهامشًا كبيرًا على اليسار، مما يجعل من الممكن التركيز على المحتوى الرئيسي وترك العناصر الداعمة في الهوامش.

الايقونية الهندسية

عند الحديث عن الأيقونات، تم استخدام الرموز البسيطة في Android لبعض الوقت، ولكن في تصميم المواد أصبحت أكثر بساطة وأكثر ودية. على الموقع غير الرسمي لـmaterialdesignicons.com، يمكن للمصممين العثور على أيقونات تناسب أغراضهم والمساهمة حيثما أمكن ذلك.

لون

كما هو الحال في تصميم الطباعة، يعد اللون وسيلة مهمة للتعبير في تصميم الواجهة. في السابق لون أندرويدكان شيئًا إضافيًا، لكنه يلعب الآن دورًا أكثر بروزًا. في التصميم متعدد الأبعاد، تتكون لوحة الألوان الافتراضية لأي تطبيق من اللون الأساسي ولون التمييز.

يتم استخدام الشكل الرئيسي للمساحات الكبيرة مثل شريط الحركة، ويتم رسم شكله الداكن شريط الحالة. يتم استخدام لون تمييز أكثر سطوعًا في النقاط الموجودة على عناصر التحكم، والأزرار، والخطوط، والمؤشرات، وما إلى ذلك. تم تصميم لون التمييز لجذب انتباه المستخدم إلى العناصر الأساسية، مثل الزر العائم.

كم لون للاستخدام؟ يتم وضع اللكنات بشكل نقطي وبكميات صغيرة. هناك قاعدة أساسية بسيطة لتلوين بقية الواجهة. عندما يكون هناك الكثير من النص، على سبيل المثال، هذه قائمة بريدية، يجب عليك مغادرة شريط التطبيق مقاس معياريوتلوينه للسماح للمستخدم بالتركيز على المحتوى. إذا لم يكن هناك الكثير من المحتوى، على سبيل المثال، عرض تفصيلي لعنصر واحد أو صورة أو آلة حاسبة، فهذه فرصة ممتازة لاستخدام مربعات ملونة كبيرة - 2 أو 3 أضعاف ارتفاع شريط التطبيق.

يدعم Android مكتبة تسمى Palette تتيح لك استخراج الألوان من الصور. أي أنه من الممكن تلوين الواجهة ديناميكيًا بناءً على الرسوم التوضيحية للصور الموجودة في التطبيق.

التقطنا صورة، وحددت الخوارزمية منها 6 ألوان بخصائص مختلفة:
- هناك 3 ألوان غنية و3 ألوان صامتة؛
- وهي مقسمة إلى نغمات فاتحة وقياسية ومظلمة؛
- كل لون خلفية له لون النص الخاص به، والذي يمكن استخدامه أيضًا.

صور جميلة

وأخيرا كما في تصميم وطباعةيشجع التصميم متعدد الأبعاد على استخدام التصوير الفوتوغرافي والتوضيح بكل مجده. يتم وضع الصور في الغالب بدون إطارات، وغالبًا ما يتم ذلك "من خلال الصورة مباشرة". حتى شريط الحالة أصبح شفافًا خصيصًا حتى لا يتدخل. علاوة على ذلك، فإن كل قطرة من “الحبر الرقمي” على الشاشة لها وظيفة؛

ملحوظة!

1. العلامة التجارية بكل سرور.إن Google في وضع أفضل لاستخدام الألوان الزاهية كعلامة تجارية، ولكن لا ينبغي اعتبار ذلك مشكلة. يمكنك اختيار الألوان من دفتر العلامة التجارية للشركة واستخدام الشعار بشكل عام.
2. لا تنس المسافات البادئة و"امنح بعض الهواء".الشبكة الأساسية التي تبلغ 8dp والهامش الأيسر 72dp هي القاعدة إلى حد كبير. دع المحتوى يكون جيدًا ومجانيًا.
3. الصور المعبرة تصنع الفرق.الصور الفوتوغرافية والرسوم التوضيحية هي خيارنا كوسيلة للتعبير.

الرسوم المتحركة ذات مغزى

في العالم الحقيقي، لا يمكن للأشياء أن تظهر من العدم أو تختفي في العدم. وهذا من شأنه أن يسبب البلبلة وإرباك الناس. ولهذا السبب يستخدم التصميم متعدد الأبعاد رسومًا متحركة ذات معنى لإظهار ما حدث بالضبط.

مثال 1.يوضح الرسم المتحرك أن هذه البطاقة بالذات، عند النقر عليها، ظهرت في المقدمة، وانفتحت، وأصبحت المزيد من المعلومات مرئية.

مثال 2.حدث في التقويم، بعد الضغط عليه، يخرج من السطح ويتحول إلى طبقة منفصلةتبدأ "الورقة" في التحول ويتم الكشف عنها في شكل معلومات مفصلة عن الحدث.

النقطة المثيرة للاهتمام هي أن الحركة النشطة تجذب العين - وهذا أمر طبيعي بالنسبة لرؤيتنا. بمساعدة الرسوم المتحركة، نتحكم في انتباه المستخدم.

عدم التماثل

نظرًا لأن عمق الواجهة محدود بسمك الجهاز، فيجب إجراء جميع تحويلات الكائنات في المستوى. وهذا يعني أيضًا أن الرسوم المتحركة للتحويل يجب أن تكون غير متماثلة - أي أن التغيير في عرض الكائن وارتفاعه يجب أن يكون مستقلاً. وإلا ينشأ وهم الاقتراب أو الابتعاد عن المشاهد وعلى مسافة كبيرة جدًا.

رد فعل

آخر جدا مبدأ مهمالرسوم المتحركة في تصميم المواد - رد فعل على تصرفات المستخدم. حيثما أمكن، يجب أن يكون مركز تغييرات الواجهة هو لمس شاشة الجهاز. على سبيل المثال، موجة تظهر وتنتقل من نقطة ملامسة الإصبع. يتم تنفيذ هذا التأثير دون مشاكل في Android L.

الرسوم المتحركة الدقيقة

في Android L، يمكننا تحريك كل عنصر من عناصر التطبيق - سواء كان ذلك انتقالًا بين المحتوى أو أيقونات الإجراءات الصغيرة. تعتبر كل تفاصيل التطبيق مهمة، وتضيف الرسوم المتحركة الدقيقة مزيدًا من التفاصيل والاستجابة لكل إجراء يقوم به المستخدم.

الوضوح والحدة

وأخيرا، المبدأ الرئيسيالرسوم المتحركة: يجب أن تكون الحركة سريعة وواضحة. على عكس التسارع العادي في البداية والتباطؤ في النهاية، فإن منحنى الرسوم المتحركة في التصميم متعدد الأبعاد أكثر طبيعية وإثارة للاهتمام. تتفاعل الكائنات بشكل أسرع وتصل إلى الحالة المستهدفة، وتعود بشكل أسرع، ولكنها تستغرق وقتًا أطول قليلاً للوصول إلى حالة الراحة في النهاية. ونتيجة لذلك، يتعين على المستخدم الانتظار لفترة أقل (أقل إزعاجًا). في الوقت نفسه، عندما يكون الكائن قد ترك بالفعل مجال اهتمامات المستخدمين، فإنه يسمح لنفسه بالتصرف بشكل أكثر طبيعية.

ملحوظة!

1. لا تترك الرسوم المتحركة لآخر.لا ينبغي ترك الرسوم المتحركة حتى النهاية - فهي يمكن أن تكون عاملاً أساسيًا في تجربة المستخدم ويجب التفكير فيها مسبقًا.
2. اعرف حدودك.الكثير من الرسوم المتحركة أمر سيء أيضًا. تحكم في نفسك وتذكر أنه يجب أن يكون ذا معنى.

التصميم التكيفي

الجانب الرئيسي الأخير من تصميم المواد هو المفهوم تصميم التكيف. بمعنى كيف يمكننا تطبيق المفاهيم الثلاثة الأولى على الأجهزة والشاشات المختلفة أشكال مختلفة-عوامل.

من العام إلى الخاص

الأسلوب الأكثر شيوعًا هو تقليل كمية المعلومات المعروضة على الشاشة مع تصغير الشاشة. إذا كان بإمكاننا عرض القائمة و معلومات مفصلةوفقًا للعنصر المحدد، يتم عرض القائمة أولاً على الهواتف الذكية، وللحصول على التفاصيل يلزم وجود شاشة منفصلة. في حالة الأجهزة اللوحية، يمكن أحيانًا توسيع شريط التطبيقات ليتمكن على الأقل من التعامل مع المساحة الحرة الزائدة.

المسافات البادئة

يؤدي وضع المحتوى باستخدام الكتل إلى تبسيط العمل إلى حد كبير مساحة فارغةعلى شاشات كبيرة. نحن نعرف محتويات كل كتلة، ونفهم مدى اتساعها حتى لا نفقد سهولة القراءة، وكذلك مدى ضيقها حتى لا تكون مزدحمة للغاية. على الشاشات العريضة، يتم تمديد الكتل إلى حدود قابلية القراءة الخاصة بها، ثم تتم إضافة الهوامش من الحواف، والتي قد تكون كبيرة جدًا. يمكن ملؤها بزر عائم وقوالب ملونة.

إطارات بيضاء

يمكن العثور على أفكار لتنظيم المساحة والمسافات بين الشاشات المختلفة على موقع الويب google.com/design/spec في قسم Whiteframes. يعد هذا مكانًا رائعًا للبدء والحصول على الفكرة العامة ثم متابعة تجاربك الخاصة.

خطوط إرشاد

تعطينا الأدلة المسافة البادئة لـ "الحبر". أوراق منفصلة"أوراق". على الهاتف الذكي لدينا ورقة واحدة ومسافة بادئة واحدة جيدة على اليسار، ولكن على الجهاز اللوحي يوجد اثنان منهم وفي كلتا الحالتين هناك مسافة بادئة. من المهم أن تكون المسافة البادئة مختلفة بالنسبة لهذين العاملين في الشكل. تبلغ دقتها على الجهاز اللوحي 80dp، وعلى الهاتف الذكي 72dp. الهوامش من حواف الشاشة مختلفة أيضًا.

أبعاد

يوصى بأخذ نسب متعددة لجميع العناصر. على وجه الخصوص، يعد اختيار حجم شريط التطبيقات أكثر ملاءمة إذا جعلته متعددًا: 1x، 2x، 3x. يختلف هذا الحجم على الهواتف الذكية والأجهزة اللوحية، لكن التطبيق يتكيف دون مشاكل.

كتل

يمكن أن يكون التفكير في كتل مفيدًا بشكل عام. إذا سألت شيئا من هذا القبيل شبكة وحداتمن الكتل القابلة للقسمة على 8dp، سوف تحصل على إيقاع بصري ممتاز وسيكون أكثر ملاءمة لاتخاذ القرارات. انتقل إلى الموقع ذو الإطارات البيضاء وانظر إلى المواد.

شريط الأدوات

شريط الإجراءات هو واحد من أكثر أجزاء مهمةواجهه المستخدم. يحتوي على الرأس وأزرار الإجراءات والتنقل. في Android Lollipop، تحول شريط الإجراءات من شريط مقيد في الأعلى إلى أداة كاملة - وظيفية و كتلة جميلةالإدارة التطبيقية. أصبح هذا ممكنًا نظرًا لحقيقة أنه يمكنك الآن وضع العديد من العناصر الوظيفية في شريط الأدوات، والتي لم يكن بإمكانك حتى أن تحلم بها من قبل:
- حقول الإدخال والنماذج؛
- زر العمل الرئيسي العائم؛
- يتم إخفاء شريط الأدوات عن طريق التنقل الموسع، ولكن هنا نرى عنصر واجهة مستخدم يعمل بكامل طاقته؛
- شريط الأدوات مناسب للإدارة إذا لزم الأمر.

ملحوظة!

1. ليست هناك حاجة دائمًا إلى درج التنقل.تستخدم Google نظام التنقل المنزلق للخارج في تطبيقاتها في كثير من الأحيان، لذا قد تراه فيها أمثلة مختلفة. لكن لدى Google الكثير من المشكلات التي يمكن حلها بمساعدتها: نشر المساعدة والإعدادات وتسجيل الدخول/الخروج ومعلومات المستخدم وما إلى ذلك. إذا كانت لديك مهام مماثلة، فكل شيء على ما يرام، ولكن إذا كنت تصنع أداة بسيطة، فلا يستحق الأمر ذلك.
2. كن أكثر جرأة وذكاءً مع أشرطة الأدوات.القدرة على تغيير حجم شريط الأدوات ديناميكيًا، مما يجعله مزدوجًا أو ثلاثيًا هو أمر رائع ومريح للغاية. يخشى معظم المصممين التعامل مع هذا الأمر واختيار مقاس واحد مرة واحدة وإلى الأبد، ولكن هنا يمكنك ويجب أن تكون أكثر جرأة.
3. ليست هناك حاجة لإنشاء غيتو من الزاوية السفلية لزر عائم.يمكن أن يكون الزر العائم في أي مكان: أسفل، أعلى، يمين، يسار. بالطبع، في الزاوية قد يكون من المناسب الوصول إليها، ولكن هذا ليس كذلك الخيار الوحيد. يمكن نقل الزر من مكان إلى آخر حسب المهمة.
4. كل من الهواتف الذكية والأجهزة اللوحية؛ عموديا وأفقيا.نطاق أجهزة Android كبير، وهذا لا يجعل الحياة أسهل للمطورين. ولكن الحقيقة هي أن المستخدمين لديهم كل هذه الأجهزة التي يديرونها بهذه الطريقة وذاك (حتى لو نحن نتحدث عنحول الهواتف الذكية). هذه اللحظة تحتاج إلى العمل.

هذا هو تصميم المواد. لا تخف من التجربة وارتكاب الأخطاء: لا تتوقف عن النسخ الحلول الموجودة. جربها!

العلامات: إضافة العلامات

قم بوضع علامة على المنشور باستخدام العلامات الخاصة بك من الأفضل فصل التسميات بفاصلة. على سبيل المثال: البرمجة والخوارزميات

التعليقات 121

• • • • • • • • • • هل أنت، مثل جوجل، تحمل هاتفك أفقيًا فقط؟
                    

                    في الوضع الرأسي، يتم استخدام 50-70% فقط من الشاشة

                    
                    

                    • هناك الكثير من النص على هذه الشاشة.

                      هل هذا كثير من النص؟ ماذا فعل تويتر بالناس؟

يستمر الإصداران 5 و6 من روبوتات Android في السير بفخر عبر الهواتف الذكية والأجهزة اللوحية للمستخدمين السعداء، متألقين بجمال التصميم متعدد الأبعاد. في الوقت نفسه، يجب أن نشيد بجوجل، لم ينس أحد الأجهزة القديمة، لقد جربوا أيضًا جلود التصميم متعدد الأبعاد، وإن لم يكن ذلك في كليا. سنتحدث اليوم عن كيفية عمل كل هذا على الأجهزة التي تعمل بإصدارات Android من الثاني إلى الرابع. إذا كنت تقوم بتطوير تطبيقات حصرية لنظام Android 6، فستكون المعلومات الواردة أدناه مفيدة لك أيضًا.

حكم عصري

تصميم المواد - التصميم برمجةوتطبيقات غرفة العمليات أنظمة أندرويدمن جوجل، تم تقديمه لأول مرة في مؤتمر Google I/O في عام 2014. تتمثل فكرة التصميم في إنشاء تطبيقات تفتح وتنهار مثل البطاقات المادية (أي الملموسة). مثل جميع الأشياء المادية، يجب أن تلقي بظلالها وأن يكون لديها بعض الجمود. وفقًا لفكرة مصممي Google، يجب ألا تحتوي التطبيقات على زوايا حادة، ويجب أن تنتقل البطاقات بين بعضها البعض بسلاسة وبشكل غير محسوس تقريبًا (الشكل 1).

بشكل عام، يسمح لك تأثير الظل بترتيب جميع العناصر بشكل مرئي على ارتفاعات مختلفة، أي يتم الحصول على مجموعة معينة من الطبقات (الشكل 2).

لا تقل أهمية مفهوم الزر العائم(زر الإجراء العائم)، يعكس الإجراء الرئيسي في الجزء أو النشاط. على سبيل المثال، في Gmail، تسمح لك هذه الأداة بإنشاء حرف جديد. يسمى هذا الزر عائمًا لأن موضعه غير ثابت (نعم، ليس فقط الزاوية اليمنى السفلية) ويمكن أن يتغير. علاوة على ذلك، يجب أن يكون هذا التغيير متحركًا بسلاسة وذات معنى، على سبيل المثال، عند تمرير مكون ListView أو تبديل جزء FAB، يمكن للزر "الانتقال" خارج الشاشة أو "الذوبان".

لا يسمح لنا تنسيق مقال المجلة بوصف جميع الفروق الدقيقة في التصميم متعدد الأبعاد ( من حيث تنسيق الورق، لقد أفسدت مقالًا كاملاً ونصف :). - تقريبا. إد.)، خاصة أنه لا يمكن تنفيذ جميعها من خلال مكتبات التوافق في إصدارات ما قبل Lollipop من Android. الوضع أصعب في هذا الصدد مع الرسوم المتحركة. على سبيل المثال، لن نتمكن من رؤية تأثير التموج (دوائر متباينة عند الضغط على زر)، نظرًا لأن هذه الرسوم المتحركة يتم تنفيذها في الأجهزة وهي غير متوفرة للأجهزة القديمة. بالطبع، يمكن حل هذه المشكلة عن طريق مكتبات الطرف الثالث، لكننا سنتحدث عن ذلك في المرة القادمة.

يمكنك (بل وتحتاج إلى ذلك!) التعرف على أدلة التصميم متعدد الأبعاد الموجودة على الصفحة الرسمية موقع إلكترونيجوجل، والترجمة إلى اللغة الروسية متاحة على العنوان.

Android AppCompat مقابل. مكتبة دعم التصميم

بعد إصدار Android 5، خضعت حزمة SDK الخاصة بشركة Google لتحديث مهم لمكتبة AppCompat (المعروفة سابقًا باسم ActionBarCompat)، والتي تلقت الإصدار السابع المعروف أيضًا باسم v7. أفضل ما في هذا الإصدار هو القدرة على استخدام عناصر التصميم متعدد الأبعاد الإصدارات السابقة Android - بدءًا من 2.1 (مستوى واجهة برمجة التطبيقات 7). أحد هذه العناصر هو عنصر واجهة المستخدم لشريط الأدوات، الذي حل محل ActionBar الممل - وهي لوحة تقع في الجزء العلوي من النشاط (نفس اللوحة التي يتم فيها تعليق "الهامبرغر" الذي يفتح القائمة الجانبية). بالإضافة إلى ذلك، أثر تصميم المواد الجديد على الآخرين العناصر القياسية: EditText، Spinner، CheckBox، RadioButton، Switch، CheckedTextView.

بالإضافة إلى ذلك، تمت إضافة مكتبات جديدة - RecyclerView (بديل رائع لـ ListView)، وCardView (بطاقة) وPalette (لوحة ديناميكية). بالمناسبة، تمت مناقشة هذه العناصر بالفعل في ديسمبر هاكر - ابحث عنها بشكل عاجل ولن نكررها.

يبدو أننا في الهدف، هذه هي السعادة، ولكن، على سبيل المثال، انظر عميل البريد Gmail في نفس نظام التشغيل Android 4، تبدأ ببطء في فهم أنه لا يمكنك برمجة مثل هذا التطبيق باستخدام AppCompat وحده. بعد كل شيء، ولسبب كوني، لا تحتوي مكتبة AppCompat على زر عائم - ربما يكون العنصر الرئيسي في تصميم المواد.

لحسن الحظ، فكرت Google بنفس الطريقة تمامًا، ولكن لسبب ما لم تكمل AppCompat، ولكنها قدمت تطبيقًا كاملاً مكتبة جديدةالتوافق - مكتبة دعم التصميم. كل شيء هنا ناضج: قائمة جانبية مريحة (عرض التنقل)، وزر عائم (زر الإجراء العائم)، ورسالة منبثقة (شريط الوجبات الخفيفة)، وشريط أدوات متحرك، وغير ذلك الكثير. بعد ذلك، سنقوم بتحميل جميع المكتبات إلى قاعدة معارفنا ونلقي نظرة فاحصة على هذه الابتكارات الرائعة.

أريد فقط أن أشير إلى أنه يمكن استخدام المكتبات والأدوات بشكل منفصل أو معًا.
لذلك، نقوم بتحديث SDK وإطلاقه بيئة تطوير أندرويدودعنا نبدأ بالبرمجة...

استيراد المكتبات

نظرًا لأننا نستخدم Android Studio، فيجب أن يتم استيراد الوحدات في قسم التبعيات في ملف build.gradle الخاص بالمشروع:

التبعيات (ترجمة fileTree(dir: "libs"، تشمل: ["*.jar"]) ترجمة "com.android.support:appcompat-v7:22.2.1" ترجمة "com.android.support:design:22.2.1" "ترجمة"com.android.support:recyclerview-v7:22.2.1" ترجمة "com.android.support:palette-v7:22.2.1" ترجمة "com.android.support:cardview-v7:22.2.1")

في وقت نشر المجلة، ستكون نسخة المكتبات ذات الرقم 23.1.1 متاحة بالفعل، ولكن هذا ليس مهمًا بالنسبة لنا. بالمناسبة، سيخبرك IDE برقم الإصدار الأحدث، وسيقوم أيضًا بتنزيله تلقائيًا من المستودع إذا كان مفقودًا.

CoordinatorLayout وشريط الأدوات وكل شيء، كل شيء، كل شيء

لنبدأ بمكون مثير للإعجاب للغاية - CoordinatorLayout، والذي يسمح لك بربط عناصر واجهة المستخدم (الإحداثيات) الموضوعة فيه (في الواقع، CoordinatorLayout هو FrameLayout متقدم). ولتوضيح ذلك، في الشكل. يوضح الشكل 3 الحالة الأولية لجزء التطبيق. بمجرد البدء في التمرير عبر القائمة، سيعود حجم الرأس بسلاسة إلى الحجم التقليدي (تقليص)، مما يوفر مساحة للحصول على معلومات مفيدة (الشكل 4). وهذا هو كل ما يقال، مباشرة من خارج الصندوق، دون أي عكازات.

يظهر ترميز الجزء أدناه (على الرغم من الحجم، فإن الكود تافه تمامًا):

يمكنك أن ترى أن CoordinatorLayout له فرعين: AppBarLayout وحاوية FrameLayout. يمكن أن يحتوي الأخير على أي عناصر واجهة قابلة للتمرير: على سبيل المثال، RecyclerView أو ListView. في الشكل الموضح. 3 تطبيق في هذه الحاوية يوجد RecyclerView وزر (FAB). الآن سيعتمد كل من AppBarLayout وFrameLayout على بعضهما البعض عند التمرير، ولكن فقط إذا كان الأخير يحتوي على علامة خاصة تخطيط_behavior="@string/appbar_scrolling_view_behavior" التي تبدأ نقل اللمسات إلى AppBarLayout.

من الناحية الأيديولوجية، يذكرنا AppBarLayout إلى حد ما بالتخطيط الخطي العمودي، الذي يمكن أن تتصرف عناصره بشكل مختلف (اعتمادًا على العلامات) عند تمرير المحتوى. يستخدم المثال أعلاه عنصر واجهة المستخدم CollapsingToolbarLayout، وهو عبارة عن غلاف ملائم لمكون شريط الأدوات. في الواقع، تم تصميم CollapsingToolbarLayout خصيصًا للاستخدام داخل AppBarLayout. يتم تحديد حجم AppBarLayout نفسه عند توسيعه بواسطة معلمة Layout_height، وفي القائمة يساوي 192dp.

تحدد علامة Layout_scrollFlags سلوك التمرير للمكون. إذا لم تحدد التمرير، فسيظل AppBarLayout في مكانه وسيطفو المحتوى بعيدًا (تأثير مضحك). العلامة الثانية،exitUntilCollapsed ، تحدد بالضبط كيفية تمرير شريط الأدوات والمحتويات الأخرى. لسوء الحظ، من غير المجدي وصف الفرق بين الأعلام عن بعضها البعض بالكلمات، لذلك أرسلك إلى العنوان حيث يتم وصف جميع الخيارات بوضوح (مع الرسوم المتحركة). كما يقولون، من الأفضل أن نرى مرة واحدة...

تحدد المعلمة contentScrim="?attr/colorPrimary" لون الخلفية الذي تنتقل إليه صورة الخلفية عند طي CollapsingToolbarLayout. وسيلاحظ القارئ اليقظ ذلك في الشكل. 4 شريط الأدوات غير ملون على الإطلاق، وتظل الصورة المظللة قليلاً في مكانها. للحصول على هذا التأثير، تحتاج إلى تحديد ثابت @android:color/transparent.

وأخيرا، الحاجيات التي تحدد مباشرة مظهرجزء (نشاط)، - يتم تغليف شريط الأدوات ("الهمبرغر"، والرأس، وأزرار القائمة) وImageView (الخلفية) في CollapsingToolbarLayout. تضمن علامة Layout_collapseMode="parallax" الخاصة بـ ImageView تظليلًا سلسًا لصورة الخلفية عند طي شريط الأدوات. من التجربة أستطيع أن أقول أن المنظر لا يعمل على جميع الأجهزة.

قد يبدو كل ما سبق معقدًا وغير واضح، لكنه يمثل إضافة كبيرة هذا النهجهو أن كل المنطق تعاونيتم تعريف عناصر واجهة المستخدم في ملف العلامات، وليس في التعليمات البرمجية. بالمناسبة، بخصوص الأخير:

يقوم MainActivity من الفئة العامة بتوسيع AppCompatActivity ( شريط الأدوات الخاص mToolbar؛ الخاص CollapsingToolbarLayout mCollapsingToolbar؛ الخاص ImageView im؛ @Override protected void onCreate(Bundle saveInstanceState) ( super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mToolbar = (Toolbar) findViewById (R.id.toolbar); setSupportActionBar(mToolbar); mCollapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);

هنا، في الواقع، كل التعليمات البرمجية! يقوم SetSupportActionBar بتحويل ActionBar إلى شريط الأدوات، مع الحفاظ على جميع خصائص وأساليب الأول تقريبًا. على وجه الخصوص، يتم تعيين العنوان باستخدام setTitle. يتوفر وصف كامل لأداة شريط الأدوات على الموقع الرسمي لمطوري Android.

بعد ذلك، ابحث عن ImageView للخلفية واستخدم مكتبة Picasso التابعة لجهة خارجية لتعيين الصورة المقابلة. أنا لست عادةً من ينتقد Google، لكن لا يمكنني مساعدة نفسي هنا. هل من المستحيل حقًا كتابة مكتبة قياسية عادية لتحميل الصور بعد كل هذا الوقت من وجود Android؟ بحيث لا تستدعي طريقة setImageResource نفاد الذاكرة للصور ذات الدقة العادية؟ تدعو الإرشادات إلى إنشاء تطبيقات مشرقة وأنيقة تحتوي على الكثير من الرسومات، ويتم تنفيذ شيء مثل تحميل الصورة بلا مبالاة. لا، بالطبع، يمكنك استخدام BitmapFactory، والتوصل إلى التخزين المؤقت، ولكن هذا الحل يتطلب فقط استخدامه مكتبة منفصلة، والذي يتم في الواقع في كل من Picasso وUniversalImageLoader. باختصار، الأمر غير واضح..

مطعم الوجبات الخفيفة

بار الوجبات الخفيفة صغير نافذة المعلوماتالموجود في أسفل النشاط (الشكل 5). بالإضافة إلى رسالة المعلومات، هناك زر مسطح صغير (ما يسمى بالإجراء) يسمح لك بالتفاعل مع المستخدم (على سبيل المثال، إلغاء حذف الرسالة). بعد انتهاء المهلة، يتم إغلاق شريط Snackbar تلقائيًا (تمامًا مثل مكون التوست التقليدي).

الاستمرارية متاحة فقط للمشتركين

الخيار 1. اشترك في Hacker لقراءة جميع المواد الموجودة على الموقع

سيسمح لك الاشتراك بذلك فترة محددةاقرأ جميع المواد المدفوعة على الموقع. نحن نقبل الدفع البطاقات المصرفيةوالأموال الإلكترونية والتحويلات من حسابات مشغلي الهاتف المحمول.

قبل بضع سنوات، كتبت مقالًا عن حبر حول تطبيق مرجعي رياضي لنظام Android، والذي أصبح تجربتي الأولى في تطوير GooglePlay. اليوم، عندما أنظر إلى آخر منشوراتي والإصدار السابق من التطبيق، أشعر بالخوف (للارتعاش، ما عليك سوى إلقاء نظرة على لقطة الشاشة الأولى أدناه). على مدى السنوات القليلة الماضية، تغير الكثير: بدأ يطلق على AndroidMarket اسم GooglePlay بقواعد جديدة، وما إلى ذلك، وتم إصدار إصدارات جديدة من نظام التشغيل، وظهر مفهوم عام معين من Google لتصميم تطبيقات التصميم متعدد الأبعاد، وظهرت بيئات تطوير جديدة، وتغير هبر.

ستتحدث هذه المقالة عن كيفية جعل تطبيقك ملموسًا، وإضافة ميزة البحث إليه، بالإضافة إلى بعض الأفكار حول نوع الإعلانات التي يجب استخدامها.

بشكل عام، خضع التطبيق لعدة تغييرات كبيرة في التصميم أثناء وجوده. قصة قصيرةكيف تم تغييره يظهر في لقطات الشاشة:

تصميم المواد

بالطبع تصميم المواد. أين سيكون التطوير لنظام Android بدونه الآن؟ اضطررت إلى التخلص من العديد من الموارد الرسومية، والتي تم رسمها بعناية شديدة، لكن لا يمكن فعل أي شيء؛ لم تتناسب مع مفهوم التصميم المادي - فقد كانت غير أضيق الحدود. على سبيل المثال، أيقونات القائمة الجانبية:

عند العمل باستخدام موارد الأيقونات لشاشات مختلفة، يساعد استوديو الأصول كثيرًا، والذي، من بين أمور أخرى، يتمتع أيضًا بتأثيرات جيدة للظل الطويل وتأثيرات أذن الكلب. بشكل عام، يعد استوديو الأصول أداة إنشاء رائعة ستوفر الكثير من الوقت عند العمل مع الأصول. أيضًا، باستخدام استوديو الأصول، تم إنشاء أيقونات مواد جديدة لشراء البيرة والتفاعل الاجتماعي:

إذا تم شراء البيرة، فسوف تظهر المنتجات المباعة في الزاوية اليمنى السفلية:

لقد خضعت أيقونة التطبيق أيضًا لبعض التغييرات، وكان علينا بالفعل فتح برنامج Photoshop والرسم:

لقد انتهى الجزء الأصعب؛ ولن نتحدث أكثر عن الموارد الرسومية.

سنقوم الآن بإنشاء العديد من السمات لتطبيقنا وإضافة FloatingActionButton. في المجلد قيم/المشروع في ملف theme.xml، سنصف موضوعي تصميم لتطبيقنا Light وDark:

theme.xml

لقد تمت كتابته بشكل جيد حول ماهية colorPrimary وcolorPrimaryDark وcolorAccent. وإليك كيف تبدو هذه المواضيع في التطبيق:

سأخبرك الآن بكيفية تطبيق السمة على جميع أنشطة طلبك مرة واحدة. للقيام بذلك، تحتاج إلى جعل BaseActivity موروثًا من ActionBarActivity (لا يلزم الإعلان عنه في البيان ولا تحتاج إلى إنشاء ملف ترميز XML له). في طريقة onCreate() لهذا النشاط، نسميها setTheme() اعتمادًا على اختيار المستخدم في إعدادات التطبيق:

BaseActivity.java

تعمل الطبقة العامة BaseActivity على توسيع ActionBarActivity (السلسلة النهائية العامة الثابتة NAME_PREFERENCES = "mysetting"؛ السلسلة النهائية العامة الثابتة THEME_SWITCHER = "thmswtch"؛ int النهائي الثابت العام THM_SWTCHR_DFLT = 0؛ @Override protected void onCreate(Bundle saveInstanceState) (super.onCreate(savedInstanceState) SharedPreferences mSet = getSharedPreferences(NAME_PREFERENCES, context.MODE_PRIVATE); /** قم بتطبيق المظهر الداكن إذا تم تحديده في الإعدادات (افتراضيًا في تطبيق LightTheme) */ if(mSet.getInt(THEME_SWITCHER, THM_SWTCHR_DFLT) == 1 ) ( /** إذا كان الجهاز يحتوي على LOLLIPOP وأعلى، قم بتلوين شريط الحالة */ if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) ( getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); getWindow( setStatusBarColor(getResources().getColor(R.color.greyPrmrDark1)) ) setTheme(R.style.DarkTheme)) ) .

حسنًا، جميع الأنشطة الأخرى لتطبيقنا سوف ترث من BaseActivity:

عند اختيار مجموعات الألوان لموضوع ما في نمط المادة، يمكن أن يكون مصدر Materialpalette.com مفيدًا جدًا، حيث يقدم لوحة ألوان كاملة للموضوع في الظلين الرئيسيين اللذين تختارهما.

للإضافة على اليسار أيقونات مستديرةمع وجود نص في كل عنصر قائمة، تعد مكتبة TextDrawable مثالية، وهي سهلة الاستخدام وتسمح لك بإنشاء ليس فقط أيقونات مستديرة من نفس النوع (كما في لقطات الشاشة)، ولكن أيضًا أيقونات بأشكال وألوان وخطوط مختلفة وحتى إضافة الرسوم المتحركة لهم.

مثال على استخدام TextDrawable في محول القائمة الرئيسي للتطبيق

TextDrawable drawable = null; if(position==0) drawable = TextDrawable.builder().beginConfig().bold().endConfig().buildRound("dx", context.getResources().getColor((curr_theme==1) ? R. color.mn_dvdr_dark: R.color.mn_dvdr_lght)); if(position==1) drawable = TextDrawable.builder().beginConfig().bold().endConfig().buildRound("lim",context.getResources().getColor((curr_theme==1) ? R. color.mn_dvdr_dark: R.color.mn_dvdr_lght));

زر العمل العائم(سنسميها فيما بعد القوات المسلحة البوروندية) يجب أن تحمل الوظيفة الرئيسية للتطبيق. في تطبيق الدليل، هذا هو، بالطبع، البحث. الذي - التي. عند النقر فوق الزر، سيظهر SearchView. لكي تختفي/تظهر القوات المسلحة البوروندية بشكل جميل عند تمرير القائمة لأسفل/لأعلى، أوصي باستخدام مكتبة FloatingActionButton.

مثال على استخدام FloatingActionButton

FloatingActionButton رائع؛ ListView MainListView; تخطيط البحث الخطي؛ SearchView searchView; ... searchLayout = (LinearLayout) findViewById(R.id.search_view); searchView = (SearchView) findViewById(R.id.search); MainListView = (ListView) findViewById(android.R.id.list); fab = (FloatingActionButton) findViewById(R.id.fab); // إرفاق القوات المسلحة البوروندية إلى MainListView. // الآن، عند تمرير القائمة لأسفل، ستختفي القوات المسلحة البوروندية، وعند التمرير لأعلى، ستظهر القوات المسلحة البوروندية.attachToListView(MainListView); fab.setShadow(true); fab.setOnClickListener(new View.OnClickListener() ( @Override public void onClick(View v) ( Animation openSearch = AnimationUtils.loadAnimation(context, R.anim.search_down); searchLayout.startAnimation(openSearch); searchLayout.setVisibility(View. VISIBLE); AnimationUtils.loadAnimation(context, R.anim.s_down); fab.startAnimation(hideFab); ); ...

وبذلك ينتهي العمل على تجسيد واجهات التطبيق.

يبحث

نظرا لأن محتويات الدليل مخزنة في ملفات HTML مختلفة، من أجل القيام بذلك بحث سريعوفقا لهم فمن الضروري:

• اعمل مع ملفات html نفسها - أضف نقاط ربط لكل منها في تلك الأماكن التي سيذهب إليها المستخدم عند إدخال طلب معين.
• استخدم جدول FTS افتراضي (يمكنك قراءة ما هو عليه و. باختصار، يسمح FTS للمستخدمين بإجراء عمليات بحث عن النص الكامل في مستندات متعددة).

يحتوي الجدول على عمودين. العمود الأول (KEY_INPUT) عبارة عن قائمة بجميع أسماء الأقسام والمصطلحات الموجودة في الدليل، أي أنها قائمة الطلبات الممكنةالمستخدمين. العمود الثاني (KEY_ANKER) عبارة عن قائمة بملفات html ذات نقاط ارتساء (أي الملفات والمواضع في هذه الملفات) المقابلة لهذه الطلبات. أما بالنسبة لأي شخص آخر جداول سكليتييتم الحصول على البيانات الافتراضية والعادية من جداول FTS باستخدام استعلامات SELECT:

String query = "SELECT docid as _id،" + KEY_INPUT + "،" + KEY_ANKER + " FROM " + FTS_VIRTUAL_TABLE + " WHERE " + KEY_INPUT + " MATCH "" + inputText + ""؛"؛

عند إدخال استعلام نصي، يتم البحث في جدول FTS ويتم تقديم خيارات للمستخدم في القائمة المنسدلة. عند تحديده، يتم الانتقال إلى القسم المطلوب باستخدام المرساة المقابلة. يظهر المبدأ في الشكل أدناه:

SearchDbAdapter.java

فئة عامة SearchDbAdapter (سلسلة نهائية ثابتة خاصة DATABASE_NAME = "mhdb"؛ سلسلة نهائية ثابتة خاصة FTS_VIRTUAL_TABLE = "srcht"؛ نهائي ثابت خاص DATABASE_VERSION = 1؛ سلسلة نهائية ثابتة عامة KEY_INPUT = "rqst"؛ سلسلة نهائية ثابتة عامة KEY_ANKER = "ankr" "؛ سلسلة نهائية ثابتة خاصة DATABASE_CREATE = "إنشاء جدول افتراضي " + FTS_VIRTUAL_TABLE + " USING fts3(" + KEY_INPUT + ""، "+ KEY_ANKER + ")؛"؛ سياق نهائي خاص mCtx؛ // صفيف مع استعلامات البحث(المواضيع والأقسام الموجودة في الملف) public static Final String search_arr = ("data1 request 1"، "data1 request 2"، "data2 request 3"، "data2 request 4")؛ // مصفوفة تحتوي على ملفات html المقابلة لها مع نقاط ارتساء (يتم تخزين الملفات في مجلد أصول المشروع) public static Final Stringnchors_arr = ("file1.html#an1"، "file2.html#an2"، "file1.html#" an3"، "file1.html#an4"); فئة ثابتة خاصة DatabaseHelper تمتد SQLiteOpenHelper ( DatabaseHelper(Context context) ( super(context, DATABASE_NAME, null, DATABASE_VERSION);) @Override public void onCreate(SQLiteDatabase db) ( db.execSQL(DATABASE_CREATE); int LNGTH = search_arr.length; ContentValues initValues ​​​​= new ContentValues(); for(int i=0; i

1 . يقوم المستخدم بإدخال استعلام البحث "data2" في SearchView. يستدعي مستمع SearchView طريقة searchAnker() لفئة SearchDbAdapter، والتي تُرجع مؤشرًا (mCursor) يحتوي على استعلامات مشابهة للنص المُدخل وملفات HTML ذات نقاط ارتساء تتوافق مع هذه الاستعلامات:
طلب data2 3 - file1.html#an3
طلب data2 4 - file2.html#an4
2 . يتم عرض الطلبات المماثلة الموجودة في mCursor في القائمة المنسدلة: طلب data2 3، طلب data2 4.
3 . عند النقر فوق عناصر القائمة المنسدلة، يتم تشغيل ViewActivity، حيث يتم تمرير الاسم المقابل لملف html مع مرساة من mCursor بهدف: file1.html#an3

الإعلان والميزات المخفية للتطبيق

هل الإعلان ضروري؟ إنه يفسد الواجهة، وقد تم إنفاق الكثير من الوقت والجهد لجعلها جميلة. الآن يمكنك كسب شيء ما من الإعلانات إما عن طريق الحصول على ملايين المستخدمين النشطين، أو عن طريق إعلانات البانر القوية، والتي تعمل على النحو التالي:

• قيام المستخدم بتنزيل تحديث يتضمن مكتبة إعلانية متكاملة؛
• مرحلة الانتظار، بحيث لا يفهم المستخدم، في اللحظة التي يبدأ فيها الشيء الأكثر إثارة للاهتمام، على الفور سبب حدوث ذلك؛
• الشيء الأكثر إثارة للاهتمام: لدى المستخدم لافتات إعلانية ضخمة تظهر فوق جميع الواجهات في التطبيقات الأخرى على الشاشة بأكملها، ومن الصعب عدم النقر عليها.

وبطبيعة الحال، فإن عدد قليل من الناس سوف يحبون مثل هذه الإعلانات، بعبارة ملطفة. لقد تخليت عن أي إعلان في الدليل منذ وقت طويل، وربما أكثر من الاهتمام أضفت التبرع المعتاد - شراء البيرة في التطبيق.

شراء البيرة أمر سهل مع

يتيح لك مفهوم تصميم المواد تطوير التطبيقات الملائمة والممتعة للاستخدام.

العلامات

• تطوير
• تصميم

لماذا هذا ضروري؟

يجمع التصميم متعدد الأبعاد بين أفضل الممارسات في التصميم والمعايير المقبولة عمومًا والجاذبية البصرية. كل هذا يتيح لك إنشاء رسومات فريدة للتطبيقات تتوافق مع تصميم الواجهة على الأجهزة. بعد التعرف على تصميم المواد، يرغب المستخدمون في رؤية هذا النمط في جميع التطبيقات. اتبع توصياتنا لتطوير واجهات جميلة وسهلة الاستخدام وبديهية.

مبادئ

• الأسطح والظلال. يجب أن تكون عناصر الواجهة عبارة عن طبقات متراكبة فوق بعضها البعض. استخدمها في الطبقات العليا للإشارة إلى تسلسلها الهرمي ولفت انتباه المستخدم إليها.
• كثافة. لا تترك مساحة كبيرة بين الصور أو الهوامش حول حواف الشاشة. بهذه الطريقة سوف تقوم بإنشاء واجهة أكثر اكتمالا.
• الألوان. استخدم الألوان المتباينة لتسليط الضوء على علامتك التجارية وعناصر الواجهة المهمة. اختر الألوان الأساسية والألوان المميزة للتطبيق بأكمله. نوصي باستخدام لتحديد الألوان مباشرة من المحتوى.
• تَخطِيط يجب أن تتوافق الشبكة القياسيةبزيادات 8 dp للحفاظ على أسلوب ثابت وسهولة القراءة. للحصول على موضع نص أكثر دقة، يمكنك استخدام شبكة 4dp. يجب محاذاة العناصر مثل النص الأساسي والصور المصغرة وعناوين اللوحات وما إلى ذلك مع الخطوط الأساسية.
• العناصر المتحركة، على سبيل المثال، يجب استخدامه لتوصيل شاشة بأخرى وعدم التداخل مع المستخدمين. الرسوم المتحركة تجعل الواجهة ممتعة وتخلق سردًا مرئيًا مستمرًا.
• رد الفعل على العمل، على سبيل المثال عند لمس الشاشة، ينبغي أن تبدو . ومع ذلك، بالنسبة للأجهزة التي تعمل بإصدار Android أقل من 5.0، يجب عليك استخدام android:selectableItemBackground . بالإضافة إلى ذلك، ننصح برفع العناصر التفاعلية عند لمسها، وعند حدوث تغييرات تمتد الحركة من نقطة التلامس.

مكونات واجهة النظام

• على الأجهزة التي تعمل بنظام التشغيل Android 5.0 والإصدارات الأحدث، يجب تغيير لونه ليتناسب مع اللون الرئيسي للتطبيق أو المحتوى الموجود على الشاشة. إذا لم تكن هناك حدود أو حدود حول صورك، فيمكنك جعل شريط الحالة شفافًا. يتيح لك مستوى واجهة برمجة التطبيقات (API) 23 والإصدارات الأحدث جعل أيقونات شريط الحالة داكنة. يتم استخدام السمة لهذا الغرض.
• الشريط العلوي وأشرطة الأدوات يجب أن تكون غنية بالمعلومات ومتسقة مع أسلوب الشركة. يجب ألا تحتوي هذه العناصر على أيقونة تطبيق في الزاوية اليسرى العليا. استخدم الألوان والطباعة والشعار بدلاً من ذلك. على الشاشات التي تحتوي على الكثير من الرسومات، يمكنك جعلها شفافة. الصور، بخلاف صور الملف الشخصي، يجب ألا يكون لها حدود، وربما تكون كذلك خلف الإجراء أو شريط الحالة. لجعل أيقونات النص والتنقل مرئية على لوحة شفافة، قم بتطبيق طبقة تدرج إضافية على صورك. يوصى أيضًا باستخدام مختلف طرق التمرير مما يجعل الواجهة أكثر جمالاً وعملية.
• نوافذ التبويب. اتبع التوصيات ل التفاعل والأسلوب. يجب أن يتم تمرير علامات التبويب أفقيًا ويجب ألا تكون هناك فواصل بينها. ل تسليط الضوء على علامات التبويب النشطةأو قم بتغيير لونها الأساسي أو ضع خطًا تحتها بلون مغاير. عادةً ما تكون علامات تبويب التطبيق والشريط العلوي على نفس المستوى، إلا إذا قمت بتحديد تسلسل هرمي مختلف.
• شريط التنقل يجب أن تتوافق متطلبات تصميم الموادوتحتوي على عناصر التنقل الأساسية فقط. يجب وضع طبقته فوق الشريط العلوي للتطبيق والمحتوى الذي يظهر على الشاشة، ولكن أسفل شريط الحالة. عند تشغيل التطبيق لأول مرة، يجب أن يكون شريط التنقل مفتوحًا. سيساعد هذا المستخدمين على تعلم التنقل.
• شريط التنقل السفليمناسب إذا كان التطبيق يحتوي على 3 إلى 5 عناصر عالية المستوى. تسمح لك هذه اللوحة المرئية، التي يمكن نقلها، بجعل التسميات النصية أطول. تأكد من أنه يمكن الوصول إليه على معظم الشاشات (باستثناء شاشات البيانات التي لا يمكن الوصول إليها في المستوى الأعلى) وأنه مخفي إذا قام المستخدم بتمرير الصفحة.

عناصر الواجهة التي يتفاعل معها المستخدم

• يجب استخدام السمة حتى لا يبدو التطبيق قديمًا. بهذه الطريقة يمكنك جعل تصميمك أكثر حداثة بسرعة. تأكد من تحديث سمة Gingerbread وHolo لضمان اتساق شكل ومظهر جميع عناصر واجهة المستخدم. سمات عناصر الواجهة ( محددات , أدوات الاختيار , مربعات الحوار , قائمة طعامو حقول النص) يحتاج أيضًا إلى التعديل وفقًا لمبادئ التصميم متعدد الأبعاد.
• أزرار – هذا هو العنصر التفاعلي الرئيسي. ومن خلال تحديثها وفقًا لقواعد التصميم متعدد الأبعاد، ستغير تصميم التطبيق بشكل كبير. إذا كنت تستخدم أزرارًا مخصصة، فتجنب الزوايا الدائرية بشكل مفرط، والتدرجات المفرطة، والأسطح اللامعة لأنها ستجعل تطبيقك يبدو قديمًا. إذا كنت بحاجة إلى إيلاء اهتمام خاص لعنصر ما أو تسليط الضوء عليه على شاشة تحتوي على الكثير من النصوص، فاستخدمه أزرار مرفوعة. الإشارة إلى الإجراءات المشتركة أزرار مسطحة(تظهر في التطبيقات في أغلب الأحيان). لتسليط الضوء على الإجراء الأكثر أهمية على الشاشة، استخدم الزر العائم. إنه يقع فوق جميع عناصر الواجهة الأخرى.

تم عرض التصميم متعدد الأبعاد في مؤتمر مطوري Google I/O في صيف عام 2014. وفقا للعديد من مصممي UX، قدمت الشركة لأول مرة بديلا حقيقيا لإرشادات Apple. أعدت The Verge قائمة بعشرة تطبيقات Android والتي تعد أمثلة جيدة لأسلوب تصميم المواد.

تعتمد إرشادات تصميم المواد على أشكال بسيطة ومقتضبة وعناصر رسومية. في إرشادات Google، تفتقر الكائنات إلى الحجم والتفاصيل الصغيرة والتفاصيل الشاملة.

التطبيق العملي الأول تصميم الموادتلقيتها في خدمة Google Now. أصبح هذا النمط هو الأساس لنظام التشغيل Android 5.0، المعروف أيضًا باسم Android Lollipop.

قاذفة العمل 3

قاذفة بسيطة لنظام التشغيل أندرويد. يضيف Action Launcher 3 "قائمة سريعة" للوصول إلى التطبيقات، ويمكنه تغيير تصميم الواجهة وصورة الخلفية والقائمة والمزيد.

فالكون برو 3

قام عميل Twitter البديل للهواتف الذكية أو الأجهزة اللوحية التي تعمل بنظام Android بتحديث رسوماته ورسومه المتحركة وفقًا لإرشادات تصميم المواد.

FeedlyReader

قام قارئ RSS لخدمة Feedly أيضًا بتحديث واجهته وفقًا لإرشادات Google.

خزانة

كان مطورو مدير الملفات أول من قام بتحديث واجهة الخدمة - ظهرت الخزانة في تصميم المواد حتى قبل الإصدار الرسمي لنظام التشغيل Android Lollipop. يتيح لك التطبيق إدارة الملفات على هاتفك الذكي.

صندوق بريد جوجل

أحد أفضل الأمثلة، وفقًا لمحرري The Verge، على تطبيق مفهوم التصميم متعدد الأبعاد. يستعير Inbox الفكرة من Mailbox عند بدء التشغيل، والذي يقدم كل بريد إلكتروني وارد كمهمة. الخدمة متاحة عن طريق الدعوة.

الجدول الزمني للطقس

تطبيق بسيط لتوقعات الطقس. لقد قدم المطورون القدرة على تثبيت عنصر واجهة مستخدم - أيضًا بأسلوب التصميم متعدد الأبعاد.

ملاحظة بسيطة

تطبيق متعدد المنصات لإنشاء ملاحظات "سريعة". في الإصدار الأخير، أعاد المطورون تصميم الواجهة وفقًا لإرشادات Google الجديدة.

جوجل ماسنجر

تم تحديث تطبيق Google آخر في التصميم متعدد الأبعاد. يمكن للمستخدمين تغيير ألوان الحوار وتخصيص الإشعارات والمزيد.