فكر كمطور الواجهة الأمامية

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

---

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

التفاصيل على الجانب

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







في هذا البناء ، لدينا ما يلي:

• العنوان / التنقل.
  
  
• القسم الرئيسى.
  
  
• كيف تعمل.
  
  

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







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

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

الآن ، عندما أرغب في العمل على الكود ، أقوم بعمل نموذج أولي سريع فقط لأرى التقدم بسرعة.

<header></header>

<section class="hero">
  <!-- A div to constraint the content -->
  <div class="hero__content"></div>
</section>

<div class="wrapper">
  <!-- 4-columns layout -->
  <section class="grid-4"></section>
</div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

نظرًا لأن لدينا قسمًا مكونًا من 4 أعمدة ، فسوف أستخدم شبكة CSS لذلك. هذا هو التطبيق المثالي لها.

.wrapper {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 1140px;
}

.hero__content {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

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

صفحة المقالة

في هذا المثال ، لدينا تخطيط صفحة المقالة. هذه هي واجهة المستخدم التي تحتوي على:

• عنوان.
  
  
• عنوان الصفحة.
  
  
• معاينة الصورة للمقال.
  
  
• محتوى المقال.
  
  
• لوحة جانبية (يمين).
  
  

الآن بعد أن أصبحت لديك فكرة عن شكل التصميم ، دعنا نلبس النظارات حتى نتمكن من رؤية العناصر عالية المستوى فقط.







ها هم:

• رأس الموقع الذي يمتد عبر العرض الكامل للصفحة.
  
  
• عنوان الصفحة الذي يحتوي على عنوان المقالة ووصفها ، يتم ترك المحتوى بمحاذاة باستخدام max-width.
  
  
• A تخطيط عمودين التي تحتوي على أهم و الشريط الجانبي العناصر.
  
  
• المحتوى الداخلي لمقالة يتم توسيطها أفقيًا ولها أقصى عرض .
  
  

عنوان صفحة المقالة

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

.page-header {
  max-width: 50rem;
  padding: 2rem 1rem;
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

المادة - القاعدة والشريط الجانبي

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

.page-wrapper {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  grid-template-columns: 1fr 250px;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

يجب أن يكون المحتوى الداخلي للمقالة محدودًا داخل الغلاف.

.inner-content {
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

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

الغوص في التفاصيل

كيف تعمل

في أول نموذج للمقالة ، قلت إننا سنتعمق في التفاصيل لاحقًا. حانت هذه اللحظة.

مكبرات الصوت

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

عنوان

• هل نحتاج إلى إبقاء قسم الرأس جانبًا؟ أو هل هناك أوقات يجب أن تأخذ العرض بالكامل؟

تصميم متكيف

• في أي موقف تحتاج إلى الطي لتغيير حجم أطفال القسم؟ هل لدينا نوع من الزناد القابل للطي؟ إذا كان الأمر كذلك ، ما هو هذا المشغل؟

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







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

<div class="wrapper">
  <section class="steps">
    <div>
      <h2>How it works</h2>
      <p>Easy and simple steps</p>
    </div>
    <div class="layout">
      <div class="layout__item">
        <article class="card"></article>
      </div>
      <div class="layout__item">
        <article class="card"></article>
      </div>
      <div class="layout__item">
        <article class="card"></article>
      </div>
    </div>
  </section>v
</div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

.steps {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
}

@media (min-width: 700px) {
  .steps {
    grid-template-columns: 250px 1fr;
  }
}

.layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
}

@media (min-width: 200px) {
  .layout {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

لقد استخدمت شبكة CSS مع minmax()



وكلمة رئيسية auto-fit



. يكون هذا مفيدًا عندما يمكن زيادة أو تقليل عدد البطاقات. شاهد الفيديو أدناه:

قسم البطل

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

صورة القسم

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

ارتفاع القسم

• ?

• ? , , ?

• ?

• ? , , .

• . ?

• ? , : — px, CSS clamp()?

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



في مكوننا ، سوف أتعامل مع التباعد بين الأطفال. بالنسبة لهذه المهمة ، أود استخدام خاصية مساحة التدفق. لقد علمت عنها من مدونة Piccalil الخاصة بـ Andy Bell. هدفنا هو توفير المسافة بين العناصر ذات الصلة المباشرة:

<section class="hero">
  <!-- A div to constraint the content -->
  <div class="hero__content flow">
    <h2>Food is amazing</h2>
    <p>Learn how to cook amazing meals with easy and simple to follow steps</p>
    <a href="/learn">Learn now</a>
  </div>
</section>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

.flow > * + * {
  margin-top: var(--flow-space, 1em);
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

وآخر

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

• مطور الواجهة الأمامية
• مطور ويب محترف
• دورة بايثون لتطوير الويب

مقالات مقترحة

• كم يكسب عالم البيانات: نظرة عامة على الرواتب والوظائف في عام 2020
• كم يكسب محلل البيانات: نظرة عامة على الرواتب والوظائف في عام 2020
• كيف تصبح عالم بيانات بدون دورات عبر الإنترنت
• 450 دورة مجانية من Ivy League
• كيف تتعلم التعلم الآلي 5 أيام في الأسبوع لمدة 9 أشهر متتالية
• التعلم الآلي ورؤية الكمبيوتر في صناعة التعدين
• التعلم الآلي والرؤية الحاسوبية في مصانع الإثراء