بعد استراحة قصيرة مع المحاضرات ، نبدأ سباق السنة الجديدة. مثل سنة مضت ، ستتكون بالكامل من مواد من مؤتمر FrontTalks الكبير ، الذي عقده ياندكس في يكاترينبرج. لنبدأ بخطاب ألقاه أنطون كاستريتسكي - مطور من Yandex.Market. أظهر أنطون من خلال الأمثلة كيف يتم إنشاء واجهات ما ، وأيضًا تحدث عن النصوص وتصميمها وإمكانية الوصول إليها وأدائها في سياق تطبيقات الويب الحديثة.
- اسمي أنتون ، أعمل كمطور واجهة في فريق واجهة شريك Yandex.Market. اليوم أريد أن أتحدث عن الطباعة على شبكة الإنترنت.
قبل ذلك ، أريد أن أحكي قصة قصيرة عن كيف اتضح أن هذا الموضوع قريب وممتع بالنسبة لي.
ما إن فكرت في حقيقة أنه ربما لا يفهم الجميع كيفية التعامل مع النصوص والخطوط والعرض على الويب. وربما كانت المرة الأولى التي فكرت فيها عندما أردت الدخول في ياندكس. لقد أجريت مقابلات معهم ، وكان لي قسم مع التصميم. أنا أحب التصميم ، لا شيء معقد ، وأنا أحب ذلك. كان من الضروري تعويض المكون ، لقد فعلت كل شيء ، عظيم. في وصف المهمة ، تمت كتابة أنه كان من الضروري ضبط الخطوط ، كان هناك Arial ، Helvetica. حسنًا ، لا مشكلة ، كتبت هلفتيكا ، أريال ، بلا سريف. كل شيء كما يجب أن يكون. لكن المقابلة لم توافق ، وقال إنني كتبت بشكل غير صحيح. اعتقدت أن الأمر يربكني ، Yandex هي شركة كبيرة ، وربما يتوقعون الكثير مني. تعرف على خطوط النظام ، ما هي الخطوط الآمنة. أخبرت كيف تعمل ولماذا كتبت كل شيء كما هو.
لم يتفق معي الشخص الذي أجرى المقابلة معه على الفور ، ولكن كنتيجة لذلك ، فهمنا أنه يجب علينا كتابة Helvetica و Arial وليس العكس. لذلك وصلت إلى ياندكس. لقد بدأت مقابلة ، وجدت هذه المشكلة ، إصلاحه. تعال إلينا للعمل ، إنه شيء رائع معنا.
قبل الانتقال إلى الطباعة ، دعنا نتحدث عن ماهية النص.
النص
النص هو أداة تساعدنا على إخبار المستخدم بشيء عن تصرفاته التالية. جزء كبير من المحتوى على الإنترنت هو النص. على الرغم من أن الخدمات مثل Instagram و YouTube أصبحت شائعة الآن ، إلا أن الأشخاص يستهلكون الكثير من محتوى الوسائط المتعددة ، كما يحتل النص مساحة كبيرة على الإنترنت ، ولا يزال الناس يقرؤونه. هذا مهم جدا
من يعمل في الشركات التي يوجد فيها مؤلف أو كاتب ، منخرط في النصوص؟ تقريبا نصف. والذي يأتي مع النص للتطبيق نفسه؟ أيضا نصف.
في بعض الأحيان يحدث أن يكون المصمم قد أعطاك التصميم ، بدأت في القيام بذلك. ولكن كانت هناك العديد من الشروط غير المتوقعة ، وعليك التفكير في النص بنفسك. كل شيء تقريبا واو. في مثل هذه الحالات ، ينبغي أن يكون عار. لدي انطباع بأن المطورين يقللون من دور كتاب النسخ في الشركة ، وينظرون إليهم ويقدمون لهم بطريقة ما.
مجرد حفنة من سيدات الفن اللاتي يجلسن في المكتب ويحاكين العمل بمهارة شديدة. هذا في الواقع ليس هو الحال.
مؤلفو الإعلانات - مثل هذا النبي الذي يحاول أن يوضح للفتاة المطورة كيف ينبغي أن يكون في الواقع ، وهي تحاول أن تتجاهلها.
دور المؤلفين مهم جدا. يمكن أن يكون لها تأثير مباشر على المنتج ، وتقديم حلول أكثر انسجاما ، والتفاعلات ، والميكانيكا. يمكن لأي شخص ، بعد قراءة النص الموجود على الصفحة ، أن يرى منتجك بطريقة مختلفة تمامًا. إن دورهم مهم جدًا حقًا ، يجب دائمًا الاستماع إليهم ، وليس مثل هذه الفتاة التي تحاول العمل ولا تولي اهتمامًا لما يبثه هذا النبي إليها. حاول أن تستمع إلى مؤلفي الكتب ولا تتردد في طرح الأسئلة عليهم.
كما أنه مهم للغاية ليس فقط ما تكتبه ، ولكن بشكل عام يكتب بشكل عام. اريد ان اظهر مثالا واقعيا كان لدينا مكون حيث يحتاج المستخدم لإضافة رقم هاتف.
صفحة ضخمة مع الإعدادات ، كل شيء على النحو المعتاد. كان هناك تسمية ، رقم ، زر "إضافة" ، نقر المستخدم عليها ، وظهر إدخال هاتف.
بعد أن دخل رقم الهاتف بنجاح ، كان عليه أن ينقر على علامة اختيار رمادية للحفظ.
عندما بدأنا إجراء اختبار UX ، علمنا أن عددًا صغيرًا جدًا من المستخدمين خمنوا أنه كان من الضروري النقر فوق الزر الرمادي لحفظ رقم الهاتف. ماذا فعلنا؟ بعد أن أدخل المستخدم رقم الهاتف بنجاح ، قمنا برسم علامة الاختيار باللون الأصفر ، ويمكن للمستخدم حفظها.
أجرينا اختبار UX المتكررة. اكتشف المزيد من الأشخاص كيفية حفظ رقم الهاتف.
في هذه المرحلة ، قد يبدو لك أن مستخدمينا يواجهون بعض المشكلات في التفاعل مع واجهاتنا ، فهم يستخدمونها بطريقة أو بأخرى.
لكن في الواقع ، المشكلة ليست في المستخدمين ، ولكن في المشكلة ، لأننا لم نتمكن من نقلهم بوضوح إلى ما نريد منهم بالضبط. لذلك ، يبدو هذا المكون مختلفًا بعض الشيء اليوم: كل شيء ينقر أيضًا على الزر ، ولكن الآن لديه نافذة منبثقة مع أزرار واضحة "إلغاء" و "حفظ".
بعد إدخال رقم الهاتف بنجاح ، يضيء الزر "حفظ" ، ويمكن للمستخدم أن يقرر بشكل مستقل ما إذا كان يريد حفظه أم لا. إذا نقر خارج الإطار المنبثق ، فسيختفي الإطار المنبثق ، ولم يقم بإضافة الرقم بعد.
من هذا يمكننا أن نستنتج: لا تخف من كتابة أشياء واضحة. نحن المطورين نقضي قدراً كبيراً من الوقت على الإنترنت ، ونرى العديد من خيارات واجهة المستخدم الرسومية المختلفة لكيفية القيام بالشيء نفسه. ولكن ليس كل مستخدمينا لديهم هذه التجربة. لذلك دعونا نجعل واجهات أكثر بساطة وبديهية أنه سيكون من الأسهل للمستخدم معرفة من تلقاء نفسها.
عرض
دعونا نتحدث عن رسم الخرائط بشكل عام. من السهل تخمين أن جميع قواعد العرض جاءت إلينا من خلال الطباعة.
من المهم الاستعاضة عن أنني مطور ، ولا يمكنني القيام بذلك بشكل جميل. أنا أعرف كيفية جعلها تعمل ، وعندما يكون كل شيء على ما يرام ، وأنها عملت بشكل مثمر. لذلك ، لن أتحدث عن serifs أو أنواع مختلفة من الخطوط. سأفعل ، ولكن في وقت لاحق.
هناك الكثير من المحتوى والخدمات النصية على الإنترنت ، حيث يذهب المستخدمون حصريًا لقراءة شيء ما.
يبدو لي أن واحدة من الخدمات الأكثر ملاءمة متوسطة. أعتقد أن الجميع يعرفونه ، إنهم يأتون ، ويقرأون الأخبار ، خاصة حول موضوع الواجهة الأمامية. تقدم الخدمة حقًا محتوى سهل القراءة. لكنني سأقدم مثالًا مضادًا ، استخدمناه جميعًا.
لا أعرف شخصًا واحدًا يزور ويكيبيديا ويقرأ أي شيء بكل سرور. يبدو لي أن هذا ليس خيارًا قابلاً للقراءة ، رغم أنه يمكن إصلاحه باتباع قاعدتين أو ثلاث قواعد فقط.
الأول هو الحصول على حوالي 10 كلمات في كل سطر.
نحتاج إلى قصر عرض محتوى النص على حوالي 80 حرفًا. قد تشبه هذه القاعدة إعدادات linter ، نظرًا لأن عرض الشفرة والرمز نفسه ، وكذلك النص الموجود على المواقع ، قد تمت كتابتهما حتى يتمكن أي شخص وليس الكمبيوتر من إدراكه بسهولة.
والثاني هو تباعد الأسطر. عندما تكون خطوطك قريبة جدًا من بعضها البعض ، يبدأ المستخدمون بالفعل في مواجهة صعوبات في إدراك ذلك.
وجعل الخط أكبر قليلاً ، لسهولة الإدراك. الآن تتخذ ويكيبيديا شكلاً من الأسهل بالفعل إدراكه.
وأيضًا ، إذا كانت مساحة الشاشة مهمة جدًا بالنسبة لك ، يمكنك إضافة الواصلات.
قد لا يعمل هذا بشكل صحيح دائمًا مع النص الروسي ، ولكنه يمكن أن يساعد في حفظ سطرين.
لا تنس أنه في اللغة الروسية هناك العديد من قواعد الإملاء. نحن بحاجة إلى التخلص من أشياء مثل تعليق الذرائع ، والتأكد من أنه عند الضرورة ، يجب أن يكون هناك واصلات كبيرة ، وهكذا. يمكن لأدوات مثل
Typographer مساعدتك في هذا. مجرد تشغيل النص الخاص بك من خلال ذلك وهذا كل شيء.
إذا كان لديك نص ثابت ، يمكنك إضافة
ملحق بابل لتحويله عند إنشاء التطبيق الخاص بك. إذا تم تخزين النص الخاص بك في وحدة تخزين خارجية ، فقد تأتي
حزمة npm هذه في متناول يدي ؛ حيث يمكنك تحويل النص قبل إرسالها إلى العميل.
خطوط الويب
كيف حدث أنه يمكننا استخدام خطوط مختلفة على الويب؟
قد يتذكر مطورو البرامج البالغين أنه كان علينا لفترة طويلة إضافة صور مختلفة إذا أردنا تحويل مظهر النص على الصفحات بطريقة أو بأخرى. في وقت لاحق حصلنا على علامة الخط. واليوم نستخدم خاصية عائلة الخطوط ، حيث ندرج الخطوط نفسها بالترتيب الذي نريد تطبيقها. إذا لم يعثر المتصفح فجأة ولم يتعرف عليه ، فسيذهب ببساطة إلى أبعد من هذه القائمة ويستخدم ما يلي.
بالفعل لدينا اليوم عددًا كبيرًا من الخصائص لتحويل عرض النص.
ولا يسعني إلا أن أذكر شيء مثل الخطوط المتغيرة.
هذا يساعدنا على زيادة تحويل عرض واجهاتنا. اليوم ، دعم جيد بالفعل بما فيه الكفاية.
لقد تم كتابة قدر كبير من المعلومات حول هذه التقنية على الإنترنت على مدار العامين الماضيين ، ولن نتناولها الآن.
الخطوط
هناك عدد كبير من الخطوط. لكنني أردت الاقتراب من وجهة نظر هندسية وتقسيمها إلى عدة أنواع.
أعتقد أن كل من يقرأ المواصفات ، وليس فقط ، يعلم أن هناك خطوط نظام مثبتة مسبقًا في نظام التشغيل من المربع ؛ هناك خطوط مثبتة قام المستخدم بتثبيتها بشكل مستقل ؛ وكذلك الخطوط القابلة للتنزيل أو الويب ، هذا هو كل ما يقوم المستخدم بتنزيله من خلال الانتقال إلى التطبيق الخاص بك.
لا أستطيع إلا أن أذكر الخطوط الآمنة. كيف اتضح أننا حصلنا عليها؟ في السابق ، لم نكن نتوقع أن يكون لدى المستخدم هذا الخط أو ذاك ، لذلك ، في بداية العقد الأول من القرن العشرين ، قدمت Microsoft قائمة من ستة خطوط كانت موجودة على جميع الأنظمة منذ بداية العقد الماضي ، ويمكن للمطورين استخدامها مع ضمير واضح ، مع العلم أن هذه الخطوط موجودة بالفعل لدى المستخدمين ولن تضطر إلى إرسال طلبات إضافية.
وهنا نرى نفس ارييل. التطلع إلى المستقبل: شخص يعرف بالفعل أن Helvetica هو خط نظام على ماك أو إس ، لقد كان موجودا هناك لسنوات عديدة. لذلك ، في القصة التي ذكرتها في البداية ، قلت إنه يتعين علينا تسجيل Helvetica و Arial وليس العكس.
بعد ذلك ، لاحظت هذا السجل كثيرًا على مجموعة متنوعة من الموارد ، وكنت أتساءل من أين جاء ، وكيف اتضح أن الناس يمكنهم ارتكاب مثل هذا الخطأ الأساسي. بعد كل شيء ، نحن نتعلم ذلك عندما نبدأ لتعلم CSS.
لقد فوجئت جدًا عندما أدركت أنه جاء من مورد محترم إلى حد ما مثل مدارس w3 ، وأرسلت لهم تقريرًا عن الأخطاء ، لكنهم ما زالوا غير مثبتين فيه ، أي.
عاد الآن إلى الخطوط. كيف يمكننا توصيل الخطوط؟ لدينا CSS وجافا سكريبت.
يمكننا إعلان واجهة خط مخصصة وتحديد العديد من التنسيقات التي سيتم من خلالها المستعرض تحديد وتنزيل التنسيق الأول الذي يعرفه.
- WOFF2 هو أفضل ضغط ودعم من قبل جميع المتصفحات الحديثة.
- WOFF يضغط بشكل أسوأ قليلاً ، لكنه يتمتع بدعم ممتاز.
- هناك حاجة EOT حصرا لكبار السن IE. - TTF ، كما أنه يحتوي على دعم جيد ، ومن خلال تنزيله ، يمكننا تثبيته على نظام التشغيل.
- SVG ، التي أهملت ، في رأيي ، مدعومة فقط في واحد أو اثنين من المتصفحات اليوم.
لدينا أيضًا وظيفة CSS رائعة مثل المحلية ، بمساعدتها يمكننا التحقق من وجود الخط في نظام تشغيل المستخدم. لكن ليس عليك حقًا الاعتماد عليها. حتى لو كانت الخطوط لها نفس الاسم ، فإن هذا لا يعني على الإطلاق أنها بنفس الخط. لذلك ، إذا كنت تستخدمها ، كن حذرا.
بعد الإعلان عن الخط ، لا تنس تحديد عدد قليل من النسخ الاحتياطية ، في حالة فشل المتصفح في تنزيله.
أعتقد أن العديد من الأشخاص يعرفون أنه يمكننا تحديد نطاق Unicode للخطوط ، وبعد تنزيل الخط ، سيتم استخدامه حصريًا للأحرف المحددة. على سبيل المثال ، تريد عرض نص باللغة الإنجليزية فقط في هذا الخط أو بالأرقام فقط ، إلخ.
كما يتيح لك تقليل حركة المرور التي نرسلها للمستخدمين بشكل كبير.
أعلاه ، يمكننا تقسيم الخط إلى ملفين منفصلين ، في أحدهما توجد أحرف لاتينية فقط ، وفي الثاني - السيريلية. لقد قدمنا لهم نفس اسم عائلة الخط بحيث يفهم المستعرض أن هذه الأجزاء من خط واحد. الآن ، إذا كان لدينا فقط الأحرف السيريلية على الصفحة ، فسيقوم المستخدم بتنزيل الملف الثاني فقط ، مما يقلل من حركة المرور التي قام المستخدم بتنزيلها.
نتيجةً لذلك ، ليس من الصعب القيام بالإعدادات الفرعية ، فهناك أدوات واجهة المستخدم الرسومية و CLI لهذا الغرض ، وليس من الصعب العثور عليها والتعامل معها.
الدعم جيد جدا اليوم. لا تخجل من استخدامه.
لا تنسى عن المثل العظيم "التدبير سبع مرات - سبسيث مرة واحدة" ، وإلا يمكنك الدخول في وضع غير مريح إلى حد ما.
يمكننا أيضا تنزيل الخطوط باستخدام JS ، ولدينا واجهة برمجة تطبيقات FontFace لهذا ، يبدو مشابها جدا.
نعلن خط جديد ، تحميله ، يتم تحميله بشكل غير متزامن. بعد أن تم تحميله ، يمكننا إضافته إلى الصفحة.
للوهلة الأولى ، قد يبدو هذا النهج عديم الفائدة ، إلا إذا كنت مشتركًا في خدمة الخطوط. ولكن بحلول نهاية التقرير ، قد تغير رأيك.
حسنًا ، لدينا خدمة ، لقد أضفنا عدة خطوط إليها. ويأتي مستخدمنا إلى صفحتنا ، ويلتقي بمثل هذه الصورة.
كيف حدث ذلك؟ وصل HTML ، تم تحميل الأنماط ، ولم تصل الخطوط بعد ، وهنا يمكن أن يختلف سلوك المستعرض. تقوم بعض المتصفحات بحظر عرض النص ، ويبدو أنه لا يوجد نص ، ولكن في الواقع تقوم المستعرضات برسم النص بخط شفاف خاص بهم ، لأنهم بحاجة إلى معرفة مقدار المساحة الموجودة على الصفحة التي يأخذها النص بحيث تكون المسافة البادئة متشابهة. عند تحميل الخط ، يتم إعادة رسم النص باستخدام الخط وعرضه في المستعرض.
سيكون من الرائع لو تمكنا من توحيد سلوك المستعرض في مثل هذه الحالات. في الواقع ، يمكن لبعض المتصفحات تقديم نص بخط شفاف ، بينما البعض الآخر بخط مطوي. لهذا ، لدينا سطر واحد فقط من التعليمات البرمجية.
في الأساس ، ستكون ميزة الحظر أو المقايضة فقط مفيدة لك من هذا. ستعمل ميزة Block على جعل المتصفح ينتظر ويعرض المحتوى على الصفحة بخط شفاف ، لأنه من الممكن تمامًا أن يكون لديك خط مخصص جميل جدًا لا يبدو مثل أي شيء. لذلك ، لا تريد أن يرى المستخدم النص ، لذلك دع المستخدم ينتظر. لن تنتظر إلى الأبد ، فقط ثلاث ثوان ، وبعد ذلك سوف تستخدم الخط التالي وسوف تنتظر اللانهاية الكاملة حتى وصولك.
أو يمكنك التبديل ، عندما يأخذ المستعرض على الفور الخط المطوي التالي ، يرسم المحتوى به ، وينتظر وقتًا غير محدود للوصول إلى الخط.
اليوم الدعم جيد للغاية ، ويمكن بالفعل استخدام هذا. بعد كل شيء ، CSS ليس JS ، إذا فجأة لا يفهم المستعرض شيئًا ما - فلا بأس ، فسيتجاهل هذه القاعدة ويذهب أبعد من ذلك. في مثل هذه الحالات ، نحصل على نفس السلوك كما كان من قبل.
رائع ، لقد طلبنا المتصفح ، والآن لدينا نفس السلوك على جميع المتصفحات غير التقليدية تقريبًا.
لكننا لم نحل المشكلة نفسها. كيف حدث أن الخطوط جاءت طويلة؟ منذ وقت طويل ، عندما لم أكن أعمل بالفعل في ياندكس ، فعلت القليل من الهبوط ، لا شيء خاص ، لكن الكثير من الصور والأناقة.
لقد واجهت مشكلة أن الخط وصل حرفيًا في 6 إلى 7 ثوانٍ ، وكان هذا مع اختناق الشبكة بسرعة 3G ، على الرغم من أن العرض الأول تم عرضه بالفعل في مكان ما لمدة 2.5 ثانية ، وكان المستخدم ينظر ببساطة إلى صفحة فارغة.
يتم تحميل HTML الأزرق في الأعلى ، ثم تذهب الأنماط الأرجواني. أين هو الخط لدينا؟
ها هو ذا. كيف حدث ذلك؟ لدينا القليل من التوضيح ، حتى لو أعلننا خطنا في بداية أنماطنا ، فإن المتصفح سيرسل طلبًا منه فقط بعد تنزيل كل CSS ، ويوزعها تمامًا ويرى أن هناك نصًا على الصفحة يجب رسمه بهذا الخط. .
سيكون من الرائع أن نتمكن من إخبار المستعرض: اسمع ، سأستخدم هذا الخط بالتأكيد ، وقم بتنزيله الآن.
لذلك نستطيع. وهذا ما يسمى تحميل الخط. يمكننا أن نقول للمتصفح في سطر واحد فقط أننا بحاجة إلى تنزيل هذا الخط المحدد وإرسال طلب إليه قبل أن نرسل طلب الأنماط. الآن يبدو شلال الطلبات مختلفًا.
يظهر نصنا مع الخط الصحيح مع جميع المحتويات الأخرى لمدة 3 ثوانٍ تقريبًا. هذا لا يسرع موقعنا ، ولكن يمكن للمستخدم البدء فوراً في تصفح هذا المحتوى. وهذا جيد.
يعمل التحميل المسبق للرابط preload فقط في المتصفحات الحديثة إلى حدٍ ما ، ويستحق استخدامه بشكل أساسي مع woff2 ، إذا لم يكن كذلك ، فعندئذ فقط woff لأن يتم إرسال الطلب دائما.
ممارسة جيدة أخرى مع التحميل المسبق: تحتاج فقط إلى تحديد ملف واحد سوف يفهمه المتصفح. إذا بدأت القراءة حوله على MDN ، فسترى شيئًا مماثلاً.
هذا لا يستحق القيام به أبدًا ، لأن هذه هي الطريقة التي نرسل بها الكثير من طلبات الخطوط من كل تنسيق ، على الرغم من أن المتصفح يستخدم واحدًا فقط. لماذا قاموا بإضافة تنسيق eot هنا ، والذي يستخدم فقط لـ IE ، والذي لم يعد مطورًا ولا يدعمه Microsoft حتى؟ من غير المرجح أن يخبرونا بذلك.
يجب أن يبدو رمز مشابه أكثر احتمالاً.
ربما لديك مهام أخرى تحتاج إلى إكمالها عند تهيئة التطبيق الخاص بك؟ , , , , , .
— . JS, , , , , .
. , , . . Font style matcher, , CSS , , , , , , “”.
-? , , .
, . ? , , , Yandex Sans. , . , ? , , ?
«», -. , . ? , . .
, system-ui, , stage 2, , Windows, .
, , . , , . , github, Twitter, Medium. , .
, , , , bootstrap. .
, , accessibility, , , , .
? , - ?
, , -, , . , , .
,
axe pa11y , accessibility test runners, CI-. . pa11y .
- . , , ? .
, , . , color picker dev tools, Chromium- — .
, , , , . , , , , , , .
, , , .
.
, localStorage, . , , . , , , - , .
, : localStorage , key-value-, — . - , , .
— . head HTML- . , . , , bounce rate. , — , , .
, , . : , 200 , . — , . , — , , svg. , . svg CSS- .
, . . , , . — svg.
. , , . — : , , , . .
. , . . , . , , .
ربما يمكنك إلغاء الاشتراك في الخطوط المخصصة ، وتقليل عدد الزيارات ، وتسريع عرض المحتوى الخاص بك على الموقع. ولكن إذا لم تستطع ذلك فجأة ، فراجع خيارات مثل تحميل الخطوط واستبدالها. شكرا لك