واجهة المستخدم المطبعية - طريقة جديدة لتطوير واجهات المستخدم

Typographic UI هو مفهوم جديد للتصميم ، يتم التعبير عن فلسفته في ثلاث كلمات: الواجهة نصية.

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

واجهة المستخدم الطبيعية

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

أطلق ماليفيتش العظيم على هذا النمط فن الهمجي: "عار عليهم ..." وشجعوه بقوة على التخلي عن: "يجب أن يذهب عالم اللحم والعظم".

كاندينسكي

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

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



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

مجردة UI

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

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



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

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

تصميم بلا شكل

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

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



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

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

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

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

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

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

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

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

لكن عد إلى المثال الذي تم فيه إنشاء واجهة المستخدم في صورة تشغل 100٪ من الشاشة. يكفي أن نكتب شرحًا في المكان المناسب - والوضع آخذ في التغير بشكل جذري.



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

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

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

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

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


الخيار 1

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


الخيار 2

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

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


الخيار 3

قارن هذا بالخيار 1. انظر إلى مقدار المعلومات غير الضرورية التي تخلصنا منها دون فقد المعلومات ، ومدى سهولة ظهور الواجهة.

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

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

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

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

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

ولدت Typographic UI في ARES أثناء العمل على مشروع IPTVPORTAL. TYPOGRAPHY - لذلك أطلقنا على واجهة المستخدم الخاصة بنا لمشاهدة التلفزيون التفاعلي. تم عرضه لأول مرة في CSTB-2018.

PS

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

أمثلة