x

أساسيات تصميم واجهة المستخدم User Interface

ما هي مصطلحات التصميم الشائعة التي تساعدك على التواصل مع المصممين Designers ؟

نظري

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

بصفتك مطوراً (developer)، قد تحتاج إلى العمل عن كثب مع المصممين (designers)؛ فإذا كنت على دراية بمصطلحات التصميم الأساسية (basic design terminology)، فستمتلك لغة مشتركة تتيح لك المشاركة بفعالية أكبر في عملية التصميم (design process)، مما يجعل سير العمل أكثر كفاءة ويؤدي إلى تقديم تجربة مستخدم أفضل (better user experience).

التخطيط Layout

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

index.html


<link rel="stylesheet" href="styles.css">

<header>
 <div class="container">
  <h1>متجر الرفيق</h1>
  <nav>
   <ul>
    <li><a href="#">الرئيسية</a></li>
    <li><a href="#">تسوق</a></li>
    <li><a href="#">نبذة عنا</a></li>
    <li><a href="#">عربة التسوق (2)</a></li>
   </ul>
  </nav>
 </div>
</header>

<main>
 <section class="hero">
  <h2>مجموعة خريف 2026</h2>
  <p>اكتشف أحدث الصيحات</p>
  <a href="#" class="btn">تسوق الآن</a>
 </section>

 <section class="products container">
  <h3>منتجات مميزة</h3>
  <div class="product-grid">
   <div class="product-card">
    <img src="https://placehold.co/300x200" alt="المنتج 1">
    <h4>المنتج 1</h4>
    <p>49.99 دولاراً</p>
    <button>أضف إلى السلة</button>
   </div>
   <div class="product-card">
    <img src="https://placehold.co/300x200" alt="المنتج 2">
    <h4>المنتج 2</h4>
    <p>59.99 دولاراً</p>
    <button>أضف إلى السلة</button>
   </div>
   <div class="product-card">
    <img src="https://placehold.co/300x200" alt="المنتج 3">
    <h4>المنتج 3</h4>
    <p>29.99 دولاراً</p>
    <button>أضف إلى السلة</button>
   </div>
  </div>
 </section>
</main>

<footer>
 <div class="container">
  <p>
  ©
    2025 متجر الرفيق. جميع الحقوق محفوظة.
  </p>
 </div>
</footer>

styles.css


* {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

body {
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 line-height: 1.6;
 background: #f9f9f9;
 color: #333;
}

.container {
 width: 90%;
 max-width: 1200px;
 margin: auto;
}

header .container {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

header {
 background: #fff;
 border-bottom: 1px solid #ddd;
 padding: 1rem 0;
}

header h1 {
 color: #2c3e50;
}

nav ul {
 list-style: none;
 display: flex;
 gap: 1.5rem;
 justify-content: flex-end;
}

nav a {
 text-decoration: none;
 color: #2c3e50;
 font-weight: 500;
}

.hero {
 background-color: lightgrey;
 text-align: center;
 padding: 4rem 1rem;
 margin-bottom: 2rem;
}

.hero h2 {
 font-size: 2.5rem;
 margin-bottom: 0.5rem;
}

.hero .btn {
 display: inline-block;
 margin-top: 1rem;
 padding: 0.75rem 1.5rem;
 background: #2c3e50;
 color: white;
 text-decoration: none;
 border-radius: 4px;
}

.products h3 {
 margin-bottom: 0.5rem;
 font-size: 1.8rem;
 color: #2c3e50;
}

.product-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
 gap: 2rem;
}

.product-card {
 background: white;
 padding: 1rem;
 border-radius: 8px;
 text-align: center;
 box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.product-card img {
 max-width: 100%;
 border-radius: 6px;
 margin-bottom: 1rem;
}

.product-card h4 {
 margin: 0.5rem 0;
}

.product-card button {
 background: #27ae60;
 color: white;
 border: none;
 padding: 0.5rem 1rem;
 cursor: pointer;
 border-radius: 4px;
}

.product-card button:hover {
 background: #219150;
}

footer {
 background: #2c3e50;
 color: white;
 text-align: center;
 padding: 1rem 0;
 margin-top: 2rem;
}

معاينة:


المحاذاة Alignment

يُعد "المحاذاة" (Alignment) مصطلحاً وثيق الصلة بمفهوم "التخطيط" (Layout) (أو التنسيق العام للعناصر)؛ فالمحاذاة تشير إلى كيفية وضع العناصر بالنسبة لبعضها البعض. ويُسهم الاستخدام الصحيح للمحاذاة في إضفاء مظهرٍ يتسم بالنظام والترتيب على التصميم، إذ يعمل المصممون على خلق نظام بصري من خلال محاذاة العناصر استناداً إلى خطوط وهمية (imaginary lines) أو حواف (edges) أو نقطة مركزية (central point).

index.html


<link rel="stylesheet" href="styles.css">

<div class=container>
 <section class=alignment right">
  <h2>محاذاة لليمين</h2>
  <p>هذا المحتوى مُحاذاة لليمين. يمكن استخدام المحاذاة لليمين لإضفاء طابع أسلوبي مميز أو عند محاذاة المحتوى مع الحافة اليمنى للحاوية.</p>
 </section>

 <section class="alignment center">
  <h2>محاذاة للوسط</h2>
  <p>هذا المحتوى مُحاذٍ للمنتصف. وتُعد المحاذاة المركزية مفيدة للعناوين الرئيسية والفرعية، وللمحتوى الذي ينبغي أن يشكّل نقطة التركيز.</p>
 </section>

 <section class="alignment left">
  <h2>محاذاة لليسار</h2>
  <p>هذا المحتوى مُحاذاة لليسار. وتُعد المحاذاة لليسار هي الأكثر شيوعاً للنصوص الأساسية؛ لأنها تتبع مسار القراءة الطبيعي في اللغات التي تُكتب من اليسار إلى اليمين</p>
 </section>
</div>

styles.css


* {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

body {
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 line-height: 1.6;
 background: #f4f4f4;
 color: #333;
 padding: 2rem;
}

.container {
 max-width: 800px;
 margin: 0 auto;
}

.alignment {
 background: #fff;
 border-right: 4px solid #3498db;
 padding: 1.5rem;
 margin-bottom: 2rem;
 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
 transition: ll 0.3s ease;
}

.alignment:hover {
 transform: scale(1.02);
}

.alignment h2 {
 margin-bottom: 0.5rem;
 color: #3498db;
}

.right {
 text-align: right;
}

.center {
 text-align: center;
}

.left {
 text-align: left;
}

معاينة:


التكوين والتوازن Composition and Balance

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

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

index.html


<link rel="stylesheet" href="styles.css">

<h1>التكوين & التوازن</h1>

<div class="section symmetrical">
 <div class="box-container">
  <div class="box">أ</div>
  <div class="box">ب</div>
  <div class="box">ت</div>
 </div>
 <div class="description">التوازن المتماثل (Symmetrical Balance) – ثقل متساوٍ على كلا الجانبين.</div>
</div>

<div class="section asymmetrical">
 <div class="box-container">
  <div class="box">أ</div>
  <div class="box">ب</div>
  <div class="box">ت</div>
 </div>
 <div class="description">التوازن غير المتماثل (Asymmetrical Balance) – غير متكافئ ولكنه متناغم.</div>
</div>

styles.css


body {
 font-family: Arial, sans-serif;
 margin: 0;
 padding: 40px;
 background: #f4f4f4;
}

h1 {
 text-align: center;
 margin-bottom: 40px;
}

.section {
 margin-bottom: 60px;
}

.box-container {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 20px;
}

.box {
 width: 100px;
 height: 100px;
 background: #3498db;
 display: flex;
 justify-content: center;
 align-items: center;
 color: white;
 font-weight: bold;
 font-size: 18px;
 border-radius: 8px;
}

.asymmetrical .box:nth-child(2) {
 transform: scale(1.5);
 background: #e74c3c;
}

.description {
 tex-align: center;
 margin-top: 50px;
 font-style: italic;
 color: #333;
}

معاينة:


التسلسل الهرمي Hierarchy

يُعد "التسلسل الهرمي" (Hierarchy) مفهوماً مهماً آخر ينبغي عليك معرفته؛ فهو يحدد ترتيب الأهمية للعناصر داخل التصميم، ويهدف إلى ضمان لفت الانتباه إلى المعلومات الأكثر أهمية في المقام الأول. ويمكنك تحقيق التسلسل الهرمي البصري من خلال استخدام الحجم، واللون، والتباين، والمحاذاة، والمساحات البيضاء، وحتى أساليب الطباعة "التايبوغرافيا" (typography).

index.html


<link rel="stylesheet" href="styles.css">

<div class="card">
 <div class="headline">الترقية إلى الإصدار الاحترافي</div>
 <div class="subheadline">احصل على المزيد من الميزات ومساحة التخزين</div>
 <div class="body-text">
  توفر خطة "Pro" أدوات متقدمة، ودعماً ذا أولوية، وسعة تخزين أكبر بعشرة أضعاف؛ وهي الخيار الأمثل للمحترفين والفرق التي تسعى لتعزيز إنتاجيتها.
 </div>
 <a href="#" class="call-to-action">ابدأ فترة تجريبية مجانية</a>
</div>

styles.css


body {
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 background-color: #fefefe;
 margin: 40px;
 line-height: 1.6;
 color: #333;
}

.card {
 max-width: 600px;
 margin: 0 auto;
 background: #ffffff;
 border: 1px solid #ddd;
 border-radius: 10px;
 padding: 30px;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.headline {
 font-size: 32px;
 color: #2c3e50;
 font-weight: bold;
 margin-bottom: 10px;
}

.subheadline {
 font-size: 20px;
 color: #555;
 margin-bottom: 20px;
}

.body-text {
 font-size: 16px;
 color: #666;
 margin-bottom: 20px;
}

.call-to-action {
 display: inline-block;
 background-color: #3498db;
 color: white;
 text-decoration: none;
 padding: 12px 24px;
 border-radius: 5px;
 font-weight: bold;
 transition: background 0.3s ease;
}

.call-to-action:hover {
 background-color: #2980b9;
}

معاينة:


التباين Contrast

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

index.html


<link rel="stylesheet" href="styles.css">

<div class="container">
 <h1>التباين في التصميم</h1>
 <p>
  يساعد التباين في لفت الانتباه إلى العناصر المهمة، كما يجعل المحتوى أسهل قراءةً وأكثر جاذبيةً من الناحية البصرية.
 </p>

 <div class="highlight-box">
  يتميز هذا الصندوق بتباين لوني قوي.
 </div>

 <button class="high-contrast-button">زر نموذجي</button>
 
 <p class="low-contrast-text">
  يصعب قراءة هذا النص بسبب ضعف التباين مع الخلفية.
 </p>
</div>

styles.css


body {
 font-family: Arial, sans-serif;
 background-color: #f6f6f6;
 margin: 40px;
 color: #333;
}

.container {
 max-width: 700px;
 margin: 0 auto;
 padding: 30px;
 background-color: #ffffff;
 border-radius: 10px;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

h1 {
 font-size: 36px;
 margin-bottom: 10px;
 color: #111;
}

p {
 font-size: 18px;
 line-height: 1.6;
 margin-bottom: 25px;
}

.highlight-box {
 background-color: #222;
 color: #ffffff;
 padding: 20px;
 border-radius: 8px;
 font-size: 20px;
 font-weight: bold;
 text-align: center;
}

.low-contrast-text {
 color: #999999;
 font-size: 16px;
 margin-top: 30px;
}

.high-contrast-button {
 background-color: #e74c3c;
 color: white;
 border: none;
 padding: 12px 24px;
 font-size: 16px;
 font-weight: bold;
 border-radius: 5px;
 cursor: pointer;
 margin-top: 20px;
 transition: background 0.3s ease;
}

.high-contrast-button:hover {
 background-color: #c0392b;
}

معاينة:


المساحة البيضاء White Space

من المصطلحات المفيدة أيضاً مصطلح "المساحة البيضاء" (White Space). تُعرف هذه المساحة أيضاً باسم "المساحة السلبية" (Negative Space)، وهي المساحة الفارغة في التصميم، أي المنطقة المحيطة بالعناصر. قد تتفاجأ عند معرفة أن المساحة البيضاء ليست بالضرورة بيضاء اللون؛ إذ يمكن أن تكون مساحة بأي لون أو ملمس. وتتمثل وظيفتها في تحسين قابلية القراءة وتعزيز التسلسل الهرمي البصري للتصميم.

index.html


<link rel="stylesheet" href="styles.css">

<div class="container">
 <h1>قوة المساحة البيضاء</h1>
 <p>
 المساحة البيضاء (أو المساحة السلبية) هي المساحة الفارغة المحيطة بالعناصر. وهي ليست مجرد "فراغ" فحسب، بل تمنح المحتوى مساحةً للتنفس، وتعزز التركيز، وتضفي لمسةً من الأناقة على التصميم.
 </p>
 <a href="#" class="button">إقرأ المزيد</a>
</div>

<div class="no-whitespace">
 <strong>بدون مساحات بيضاء:</strong>
 تتميز هذه الكتلة بهوامش داخلية ضئيلة (minimal padding)، مما يجعل المحتوى يبدو مزدحماً وأصعب في القراءة وأقل جاذبية.
</div>

styles.css


body {
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 background-color: #f0f0f0;
 margin: 0;
 padding: 0;
}

.container {
 max-width: 800px;
 margin: 60px auto;
 padding: 60px;
 background-color: #ffffff;
 border-radius: 10px;
 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

h1 {
 font-size: 36px;
 margin-bottom: 20px;
 color: #2c3e50;
}

p {
 font-size: 18px;
 line-height: 1.8;
 margin-bottom: 30px;
 color: #555;
}

.button {
 display: inline-block;
 padding: 14px 28px;
 background-color: #27ae60;
 color: white;
 font-size: 16px;
 font-weight: bold;
 border: none;
 border-radius: 5px;
 text-decoration: none;
 transition: background 0.3s ease;
}

.button:hover {
 background-color: #219150;
}

.no-whitespace {
 background-color: #ffffff;
 padding: 10px;
 margin: 60px auto;
 width: 800px;
 box-shadow: 0 0 0 1px #ccc;
 font-size: 16px;
 color: #222;
}

معاينة:


واجهة المستخدم وتجربة المستخدم UI and UX

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

تُعد واجهة المستخدم (أو ما يُعرف اختصاراً بـ UI) الوسيلة التي يتفاعل من خلالها البشر مع أجهزة الكمبيوتر؛ فهي تشمل العناصر المرئية والتفاعلية التي يراها المستخدمون على شاشاتهم، مثل الأيقونات والصور والنصوص والقوائم والروابط والأزرار.

تتمحور تجربة المستخدم (أو ما يُعرف بـ UX) حول شعور المستخدمين عند التعامل مع منتج أو خدمة ما. فالتطبيق الذي يتمتع بتجربة مستخدم مصممة بإتقان يتسم بكونه بديهياً وسهل الاستخدام وفعالاً ومتاحاً للجميع وممتعاً. وتؤدي واجهة المستخدم دوراً جوهرياً في جعل تجربة المستخدم سهلة وممتعة قدر الإمكان؛ ولذا فإن العلاقة بينهما وثيقة للغاية.

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

أسئلة :

أي مبدأ من مبادئ التصميم يشير إلى توزيع الوزن البصري (visual weight distribution) داخل التخطيط (layout)؟

1. المحاذاة Alignment. ❌

2. التوازن Balance. ✅

3. التسلسل الهرمي Hierarchy. ❌

4. التباين Contrast. ❌


ما هو المصطلح الذي يُطلق على المساحة الفارغة المحيطة بالعناصر في التصميم؟

1. التخطيط Layout. ❌

2. التسلسل الهرمي Hierarchy. ❌

3. المساحات البيضاء White Space. ✅

4. التباين Contrast. ❌


ما هو مبدأ التصميم الذي يحدد ترتيب أهمية العناصر في التصميم؟

1. المحاذاة Alignment. ❌

2. التباين Contrast. ❌

3. التسلسل الهرمي Hierarchy. ✅

4. التقارب Proximity. ❌