مقدمة في التصميم الذري لمصممي الويب

الذرات ليست مجرد عناصر HTML ولكن أيضا أساليب الانتماء: الخطوط والألوان والأبعاد وقواعد نمط CSS الأخرى. بكلمات براد الخاصة ، الذرات “أظهر كل ما تبذلونه من الأساليب الأساسية في لمحة”.

ذرات - مثال

إليك مثال من موقعنا. قد عناوين عناوين الموصى بها حساب ل نوع واحد من الذرة. يستخدمون نفس كود HTML و CSS ويمكن أن يكون تتميز بسهولة من بقية المحتوى.

لاحظ أن Hongkiat.com لم يتم تصميمه مع وضع التصميم الذري في الاعتبار ، حيث يتم استخدامه فقط لأغراض مظاهرة.

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

2. الجزيئات

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

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

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

الجزيئات - مثال

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

3. الكائنات الحية

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

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

الكائنات الحية - مثال

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

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

4. القوالب

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

قوالب مبنية من الكائنات الحية. هم انهم كائنات على مستوى الصفحة لكن بدون المحتوى النهائي. الغرض من القوالب هو تمثل الهيكل المحتوى الأساسي.

تعرض القوالب مدى اختلاف الذرات والجزيئات والكائنات الحية “تعمل معا في سياق التصميم”. أنها تمثل أساسا هيكل عظمي للصفحة.

قوالب - مثال

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

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

5. الصفحات

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

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

اختلافات الصفحات والقوالب

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

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

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

صفحات - مثال

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