Clever Geek Handbook

إلى مصمم تطبيقات: كيفية إنشاء مظهر مظلم وإرساله





في نهاية عام 2019 ، تم إصدار iOS 13 و Android 10 مع دعم التبديل التلقائي إلى سمة داكنة. قررنا إضافته إلى تطبيق Rostelecom Key لنظامي iOS و Android ، والذي كنا نعمل عليه في ذلك الوقت. لم تكن العملية خالية من المضاعفات. نخبرك عن تجربتنا بحيث يمكنك توفير الوقت والأعصاب في موقف مماثل.



لماذا تصنع سمة داكنة



قد يبدو أن كل هذا على موجة من الضجيج. ولكن ليس فقط :)



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



إذا تركنا غرفة مظلمة في غرفة فاتحة ، فعندئذٍ "نصبح عميانًا" ، لكننا اعتدنا على الظروف الجديدة في 4-6 دقائق. عندما ننتقل من مكان مشرق إلى مكان مظلم ، يستغرق التكيف وقتًا أطول: بمتوسط ​​30-45 دقيقة. إذا كان على الشخص أن يحرك عينيه باستمرار بين تطبيق مشرق وبيئة مظلمة ، فسيكون التكيف مع العرض الساطع سريعًا ، ولكن التكيف العكسي للظلام سيكون بطيئًا.



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



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



من الإنصاف القول أن السمة الداكنة تساعد أيضًا في توفير الطاقة (لبعض أنواع الشاشات: OLED / amoled - نعم ، LCD - لا). وعلى المدى الطويل ، يمكن أن يبطئ تطور قصر النظر.



كيفية الذهاب إلى الجانب المظلم: تعليمات خطوة بخطوة



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



1. ترتيب التصميمات وتجميع مجموعة



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



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



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



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



2. الاتفاق على أسماء الألوان



لتسهيل التواصل بين المصممين و iOS و Android مع بعضهم البعض ، قررنا تسمية الألوان عالميًا لكلا النظامين الأساسيين. في الإصدار السابق من مجموعة واجهة المستخدم ، قمنا بتمييز أنماط الألوان بطريقة بسيطة - من خلال الأرقام: C1 ، C2 ، C3 ... لم تكن مريحة للغاية: أثناء المناقشة ، لم يكن الجميع يدعون الألوان ليس بالأرقام ، ولكن بالظلال: أرجواني ، برتقالي ، أسود ، إلخ.



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



بعد عدة اجتماعات بمشاركة الفريق بأكمله ، تقرر أن يعتمد اسم اللون على غرضه ويتكون من الأجزاء التالية:



  • الغرض من اللون أو العنصر الذي يتم استخدامه عليه.
  • أولوية الاستخدام (اختياري).
  • حالة العنصر ، إن وجدت (اختياري).




على اليسار توجد أسماء ألوان الزر في الحالة العادية عند الضغط على iOS ، ولون Ripple على Android ، والزر غير النشط على كلا النظامين الأساسيين. على اليمين ، توجد أسماء للنصوص على أسطح مختلفة.



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



3. اختر الألوان للموضوع الداكن



Katya Rokityan ، المصممة في Redmadrobot:

, , . . , , , «». , .


3.1. لون الخلفية



يجب أن تبدأ في إعادة رسم التخطيط بلون الخلفية: فهو يشغل معظم الشاشة. توصي أدلة التصميم متعدد الأبعاد باستخدام الرمادي الداكن المحايد (# 121212) كأساس. على عكس الأسود ، يترك مساحة لبناء "عمق" الشاشة.



يجب أن يتماشى لون الخلفية جيدًا مع لون العناصر التفاعلية: الأزرار والرموز وما إلى ذلك. في لوحة الضوء الخاصة بنا للعناصر التفاعلية ، استخدمنا اللون الأرجواني لشركة Rostelecom - # 7700ff. في العمل الإضافي ، بدأوا منه.



لم يكن اللون الرمادي الداكن المحايد يبدو جيدًا باللون البنفسجي الذي يحمل علامة تجارية ، لذلك اتبعنا نصيحة إرشادات تصميم المواد. يوصي الرجال بتغطية # 121212 الخلفية الرمادية المحايدة بلون الشركة مع عتامة 8 ٪.





ألوان خلفية محايدة وذات علامة تجارية في مظهر داكن



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



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







3.2. إنشاء لوحة أساسية ،



يوصي Design Material باستبدال الألوان بألوان أقل تشبعًا من نفس الظل عند إنشاء سمة داكنة ذات علامة تجارية. استخدمنا اللون الأرجواني كلون مؤسسي لـ RT Key.



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





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



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



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





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



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





تم استبدال اللون الأرجواني بثلاثة - إنه أفضل بكثير.



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



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







3.3. ميزات لوحة iOS



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



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





لون الصبغة في المظهر الداكن



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



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



3.4. ميزات لوحة Android



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





تموج في تطبيق Android



يحتوي Android أيضًا على ميزات لرسم شريط الحالة وشريط التنقل. شريط الحالة - شريط الحالة الذي يعرض الإعلامات وقوة الإشارة وطاقة البطارية والوقت. شريط التنقل - اللوحة حيث توجد أزرار العودة ، المنزل والتطبيقات الحديثة.



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



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



ومع ذلك ، من المهم أن تضع في اعتبارك أنه ليس كل إصدارات Android المدعومة يمكنها تعيين لون الرموز في مكونات النظام:



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


لتجنب التداخلات الغريبة على المحتوى في "المفتاح" ، قمنا بما يلي:



  • في إصدارات Android القديمة حتى 6.0 ، تم ضبط كلتا اللوحتين على خلفية سوداء مع شفافية 50٪ - تبدو الرموز البيضاء جيدة عليها ؛
  • من 6.0 إلى 8.1 ، يظل شريط التنقل بخلفية سوداء شبه شفافة ، وشريط الحالة شفاف تمامًا ؛
  • منذ الإصدار 8.1 - خلفية كل من الألواح شفافة تمامًا.


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



3.5. تحقق من تباين العناصر



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



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



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



3.6. الرسوم التوضيحية والرسوم المتحركة

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





للحصول على مظهر داكن ، يجب عليك عمل إصدارات منفصلة من الرسوم التوضيحية والرسوم المتحركة بألوان داكنة



كيفية الخضوع للتطوير

لقد عملنا مع Figma + Zeplin. قد يبدو الأمر غريبًا ، لكن شركتنا بأكملها تحولت إلى Figma من Sketch في نهاية صيف 2019 ، قبل أن نبدأ العمل على موضوع مظلم. ولتوفير الوقت في تكييف المطورين مع الأداة الجديدة ، واصلنا العمل مع Zeplin. ثم قدم لنا العديد من المفاجآت.



لا يمكن إنشاء أنماط ألوان بنفس HEX في لوحة Zeplin. لذلك ، كان علينا أن نغير العين قليلاً قليلاً ، بشكل غير محسوس ، إلى اللون الأرجواني في السمة الخفيفة.

دانييل سوبوتان ، مطور iOS في Redmadrobotsubdan:

اتضح أن أيا من أدوات المصمم ، بما في ذلك Zeplin ، تدعم المظهر الداكن وبالتالي لا تسمح بلوحات ألوان متعددة في مشروع واحد. كان علي أن أبحث عن الحلول. على سبيل المثال ، أنشأنا مشروعين: أحدهما يحتوي على لوحة فاتحة والآخر بأخرى داكنة.




1. ميزات نظام التشغيل iOS



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



دانييل سوبوتان ، مطور iOS في Redmadrobotsubdan:

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


2. ميزات تطوير Android



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



فلاديسلاف شيبوجين ، مطور أندرويد في Redmadrobotshipa_o:

: , , (9- ), (10- ). , .




يحتوي Android على نظام الألوان الخاص به لمكونات المواد (الأزرار ، وشريط التطبيق ، ومربعات النص ، وما إلى ذلك). إرشادات التصميم متعدد الأبعاد للون.



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



كيف تحافظ وتطور



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



أوليا سارتاكوفا ، المدير الفني لشركة Redmadrobot:

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



الإصدار الثاني من تصميم التطبيق في نفس لوحة الألوان:





دانييل سوبوتان ، مطور iOS في Redmadrobot subdan:

في الوقت الذي تم فيه إطلاق الإصدار الثاني ، انتقلنا بشكل غير مؤلم إلى Figma ، وقمت بتكييف الأداة المساعدة التي كتبتها في الأصل لـ Zeplin لـ Figma. الآن نقوم بتحديث الألوان والرموز والصور في Xcode و Android Studio بنقرة واحدة




يمكنك تنزيل الأداة المساعدة لدينا هنا .



الاستنتاجات: مثلنا ، فقط أفضل



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



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


مواد مفيدة



للتعمق في الموضوع المظلم:





وبعض الأشياء المفيدة للمطورين:





More articles:


All Articles