تخطيط الواجهات والمسافات

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

الواجهات

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

Responsive breakpoints
نقطة التوقف	الحد الأدنى للعرض	الخصائص
`sm`	640 بكسل	`@media (min-width:640px) { ... }`
`md`	768 بكسل	`@media (min-width:768px) { ... }`
`lg`	1024 بكسل	`@media (min-width:1024px) { ... }`
`xl`	1280 بكسل	`@media (min-width:1280px) { ... }`
`2xl`	1536 بكسل	`@media (min-width:1536px) { ... }`

تعرّف على المزيد حول التصميم المتجاوب في وثائق Tailwind CSS

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

نهج التصميم المتجاوب للأجهزة المحمولة

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

يعتمد نظام تصميم الشارقة نهج Mobile-First في بناء الواجهات باستخدام Tailwind CSS، حيث يبدأ تصميم وتطوير الواجهة بما يتناسب مع الشاشات الصغيرة، ثم تُضاف التحسينات والتعديلات تدريجيًا لتتكيف مع الأجهزة ذات الشاشات الأكبر من خلال نقاط التوقف (Breakpoints).

عند تصميم المواقع الإلكترونية، يُعد مراعاة أحجام الشاشات المختلفة عاملًا أساسيًا لضمان تقديم تجربة استخدام متسقة عبر جميع الأجهزة. لذلك، يعتمد نظام تصميم الشارقة نهج Mobile-First في بناء الواجهات باستخدام Tailwind CSS.

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

شبكة التخطيط (Grid)

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

ويعتمد نظام تصميم الشارقة على آلية الشبكة في Tailwind CSS، والتي توفر مرونة أكبر في تصميم الواجهات، حيث:

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

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

w-1/6 16.6667%

w-2/6 33.3333%

w-1/6 16.6667%

w-3/6 50%

w-1/6 16.6667%

w-4/6 66.6667%

w-1/6 16.6667%

w-5/6 83.3333%

w-1/6 16.6667%

w-1/5 20%

w-2/5 40%

w-1/5 20%

w-3/5 60%

w-1/5 20%

w-4/5 80%

w-1/5 20%

w-1/4 25%

w-3/4 75%

w-1/4 25%

w-1/2 50%

w-1/3 33.3333%

w-2/3 66.6667%

w-1/2 33.3333%

w-full 100%

شبكة من 12 عمودًا

عمودان متساويا العرض

6 أعمدة

تخطيط مع شريط جانبي (8 + 4)

المحتوى الرئيسي (8 أعمدة)

الشريط الجانبي (4 أعمدة)

المسافات

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

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

استخدم مقياسًا موحدًا

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

وحدات المسافات

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

التكيف مع مختلف أحجام الشاشات

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

التوازن البصري

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

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

يعتمد نظام تصميم الشارقة مقياسًا تدريجيًا للمسافات يبدأ بزيادات قدرها 2 بكسل حتى الوصول إلى حجم الخط الأساسي 16 بكسل أي ما يعادل (1rem). وبعد ذلك، يُوصى باستخدام زيادات قدرها 4 بكسلات حتى 48 بكسل، بما يضمن الاتساق وسهولة تطبيق نظام المسافات.

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

المسمى	المقاس	بكسل
0	0px	0px
px	1px	1px
0.5	0.125rem	2px
1	0.25rem	4px
1.5	0.375rem	6px
2	0.5rem	8px
2.5	0.625rem	10px
3	0.75rem	12px
3.5	0.875rem	14px
4	1rem	16px
4.5	1.1rem	18px
5	1.25rem	20px
6	1.5rem	24px
7	1.75rem	28px
8	2rem	32px
9	2.25rem	36px
10	2.5rem	40px
11	2.75rem	44px
12	3rem	48px
14	3.5rem	56px
16	4rem	64px
20	5rem	80px
24	6rem	96px
28	7rem	112px
32	8rem	128px
36	9rem	144px
40	10rem	160px
44	11rem	176px
48	12rem	192px
52	13rem	208px
56	14rem	224px
60	15rem	240px
64	16rem	256px
72	18rem	288px
80	20rem	320px
96	24rem	384px