نشر على ٢٨-٠٩-٢٠١٩

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

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

الائتمان: اريك تيرادي - Unsplash

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

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

المزج التدريجي للالوان

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

الجانب الأيسر: ولادة فينوس (1485) من قبل بوتيتشيلي ؛ الجانب الأيمن: الموناليزا (1503) ليوناردو دافنشي.

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

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

الهبوط في عالم المنتجات الرقمية ، فلسفة جيدة لدينا في Design Chapter at Chama هي أننا لا نجري تغييرات على تصميمنا ، بل نقوم بتحسينه. هذا يعني أننا لا نبدأ من نقطة الصفر عندما نريد إنشاء شيء جديد. نحن نحسن شيء موجود بالفعل. نبدأ بالأشياء التي نمتلكها ونضيف أبحاثنا ومعرفتنا لاختيار المسار الذي يجب أن نتبعه. هكذا بدأت النظر إلى المنتج بأكمله وعرضت مفهوم Sfumato لتحسين الرسوم التوضيحية والتصميم. لقد بدأت استخدامه في شخص معروف لمستخدمينا ، شخصيتنا تسمى Chamoso. إنه مفتاح التواصل على واجهة المستخدم الخاصة بنا مع المستهلكين ، وبالطبع ركزنا اهتمامنا ، أولاً وقبل كل شيء ، على إنشاء نسخة جديدة من هذا الرجل.

الجانب الأيسر: الإصدار السابق من Chamoso ؛ الجانب الأيمن: Chamoso الجديد.

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

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

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

يمكننا استخدام dropshadows ومحددات لتحديد بعض حالات واجهة المستخدم.

UNIONE

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

الجانب الأيسر: الموناليزا (1503) ليوناردو دافنشي ؛ الجانب الأيمن: سانت كاترين من الإسكندرية (1508) من قبل رافائيل.ألق نظرة على ألوان كل لوحة على حدة وتحقق من أن لوحة ألوان رافائيل مشبعة أكثر من لوحة دافنشي.

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

من أجل القيام بذلك ، أخذت ظلال اللون الرمادي التي تتألف من توضيحي وتشبعها باللون الأزرق.

الجانب الأيمن مع التشبع الأزرق.

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

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

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

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

والثاني هو موصل للثالث. عادة ما يكون المحتوى هو الذي يحدد القرار الذي سيتخذه المستخدم.

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

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

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

الجلاء و القتمة

هذه هي واحدة من الأساليب المفضلة لدي والتي فاجأتني أكثر عندما رأيت لوحة أمامي. كياروسكورو هو أسلوب يخلق فيه الرسام تباينًا كبيرًا بين الضوء والظلام.

The Night Watch (1642) بقلم رامبرانت.

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

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

المسيح في العمود (1607) من كارافاجيو.

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

"في الواقع هذا التناقض الحاد هو راوي القصة وراء اللوحة".

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

طبقة طبقة

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

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

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

Cangiante

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

النبي دانيال - كنيسة سيستين (حوالي 1508-1512) من قبل مايكل أنجلو.

انظر إلى رداء النبي دانيال هنا. يمكنك أن ترى أن الجزء المظلل من الرداء باللون الأخضر ، ولكن الجزء المميز أصفر.

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

وهكذا وُلد هؤلاء الزملاء أدناه ، يرجى الترحيب بفريق شاموسو:

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

فيما يلي بعض الأمثلة للتوضيح النهائي وتصميم واجهة المستخدم:

إذا كنت ترغب في رؤية المزيد ، تحقق من سال لعابه (وأعطنا

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

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

شكرا لقرائتك،

لينكولن.

هل ذكرت أننا توظيف؟ راجع: https://chamatheapp.bamboohr.co.uk/jobs/

أنظر أيضا

جبل الجليد الأكثر إلهاما في العالم ليس كما يبدومراجعة: "معرض شير" في برودواي ، الكلباتكيف يمكن للفرق والروتين العيش معا؟تاريخ الفنان الجميل ، والانحرافات ، وحماية الذاتالفن السابقين machinaالكتّاب: لا بأس أن تعتقد أنك رهيبة - المقاومة هي هدية