اتجاه المحتوى المرئي ما تحتاج إلى معرفته
ال الاتجاه البصري للمحتوى هو جانب أقل مناقشته على نطاق واسع ، ولكن حاسما في تصميم مواقع الإنترنت عالية التحويل. كل زائر "يستوعب" تحميل موقع جديد على الصفحة الأولى - سواء فعلوا ذلك بوعي أم لا.
جماليات تلعب دورا ، لكنه يتعلق أكثر يشعر عموما للتصميم. يمكن أن يتأثر هذا الشعور بالمساحات البيضاء والطباعة والتماثل ، ولكن في الغالب العلاقات بين عناصر الصفحة.
المصممين يريدون الزوار البقاء على الصفحة و استمر في التمرير من خلال جذب انتباههم وإبقائهم مهتمين بالموقع. يجب أن تركز مبادئ التصميم دائمًا على وظيفة قبل النموذج. هذا يعني أن التصميم يجب تكمل المحتوى, لا يشق عليه باعتباره فكرة لاحقة.
في هذا المنشور ، أود أن أوضح لك بعض النصائح حول كيف يمكنك ذلك تحسين التصميمات الخاصة بك وتدفق المحتوى المرئي على موقعك.
التركيز على التكوين
كل قطعة واحدة من موقع ويب يبني على التصميم العام. هذا التصميم العام يخلق تركيبة تتبع قواعد نظرية الجشطالت التي تنص على ذلك الكل دائمًا أكبر من مجموع الأجزاء.
المناطق الفردية للصفحة تتحد معاً شكل كامل. عناصر التصميم تحتاج إلى بناء سحب الجاذبية على المحتوى كل شيء على الصفحة يجب توجيه الزائرين بشكل طبيعي لأسفل إلى أن يصلوا إلى أسفل الصفحة.
هذا هو السبب في أهمية تصميم العلاقات بين أجزاء مختلفة من المحتوى (المرئيات والنصوص والأزرار وما إلى ذلك).
يجب أن يكون هدفك تشجيع الناس لتصفح الموقع من ميلهم الخاص. يقال أسهل من القيام به ، ولكن يمكنك أن تتعلم الكثير من قبل دراسة أمثلة حقيقية.
تعد الصفحة الرئيسية لـ Monkop مثالًا رائعًا للتسلسل الهرمي البصري كل النص والصور. يتم استخدام مساحة كبيرة بين العناصر ، ويكمل الطباعة الرسوم التوضيحية لناقلات الأمراض ذات العلامات التجارية.
أثناء التمرير ، ستلاحظ كتل الصفحة الأفقية المستقيمة مقسوما على الألوان والحدود والرسومات. هذه هي التي بنيت مع أنماط التصميم في الاعتبار ل عرض الاتساق طوال الصفحة.
نحو القاع ، ستجد انقسام عمودين مع الصور على جانب واحد ، النص من ناحية أخرى. الصور أيضا الجانبين مبادلة في نمط من اليمين إلى اليسار من اليسار إلى اليمين. هذا يلفت الانتباه ، و يكسر الرتابة من الصفحة النموذجية في حين لا يزال الحفاظ على التدفق الطبيعي في المحتوى.
ا تصميم مماثل الجمالية يمكن العثور عليها على موقع Picjumbo ، وهي صفحة مقصودة لإضافات الصور لمستخدمي Photoshop و Sketch.
تركز الصفحة الرئيسية على الشعار ومعاينة الفيديو. أثناء التمرير ، ستلاحظ وجود رسوم متحركة مخصصة تنتقل عبر الصفحة. هذه الرسوم المتحركة حقا يجذب الانتباه, ويحصل على المشاهد مهتمة للحفاظ على التمرير.
عموما ، تشعر الصفحة افتح و من السهل تصفح. المحتوى هو مقسمة إلى كتل أفقية مع الطباعة واضحة والرموز نظيفة.
النظر في الطريقة عناصر الصفحة المختلفة التوازن معا, المسافة بين العناصر والتباين بين الألوان والأشكال المختلفة. كل هذه الأشياء تلعب دورا في التكوين العام. كل موقع يرسم بشكل طبيعي وزنًا معينًا على المحتوى.
لا توجد إجابة مطلقة لأنها مختلفة لكل موقع. فمثلا, تبدو بعض ارتباطات التنقل أفضل عندما تكون كبيرة ومضخمة. آخرون تناسب بشكل أفضل عندما يكونون صغير بأحرف كبيرة.
أقترح عليك دراسة المواقع الأخرى في مكانه الخاص بك. حقا تحليل كيف وضعت معا. حتى حاول إعادة تصميم المخططات لمعرفة العناصر التي تجعل التصميم "يجتمع".
اكتب مسائل التصميم
الطريقة التي تصميم الطباعة الخاصة بك سوف تؤثر على اتجاه المحتوى على موقعك. هذا له علاقة بنوع التسلسل الهرمي و أنماط تصميم عناصر الصفحة المختلفة مثل الفقرات والرؤوس والقوائم النقطية والاقتباسات وعناصر التخطيط الخاصة مثل الأعمدة أو الجداول.
صور يمكن أن يؤثر على التصميم أيضًا ، لذلك من الجيد تصميم المحتوى مع تقدم طبيعي. كتابة المحتوى بطريقة ذلك يتدفق أسفل الصفحة, و يبقي الناس القراءة من خلال كل فقرة.
أعظم أداة لديك تحت تصرفك عينك للتصميم. تعلم كيفية التعرف على الاختلافات في العناصر المطبوعة ، وكيفية ارتباطها بعناصر الصفحة الأخرى. أنشئ علاقات بين أقسام الصفحة لتمييز مساحات المحتوى.
بعض الأشياء التي قد تفكر فيها:
- حجم الخط
- خط العائلة
- تباين الألوان
- علاقات قسم الصفحة
- ارتفاع الخط وهوامش الفقرة
- تباعد الحروف والجزء العلوي / الصغير
على سبيل المثال ، انظر إلى الصفحة الرئيسية لـ Campaign Monitor. تستخدم روابط التنقل الأعلى جميع الحروف الكبيرة مع حروف صغيرة. رؤوس أخرى على الصفحة اتبع هذا نفسه كل تصميم قبعات التي يخلق شعور التوحيد.
أكبر رؤوس أخرى على الموقع أكثر وضوحا بكثير, ويقفزون حقًا خارج الصفحة. فقط من خلال النظر في تصميم رأس نموذجي ، يجب أن يكون من السهل لاحظ الفرق بين رأس ونسخة الجسم المقترنة.
أنماط التصميم المطبعي على "مراقبة الحملة" رائعة ، وهي كذلك مزيج طبيعي في التخطيط. يتطلب الأمر تحقيق نتيجة كهذه ، ولكن كلما حاولت ، كانت أسهل.
لمعرفة المزيد ، أوصي بشدة بالروابط التالية:
- مبادئ التصميم: الوزن البصري والاتجاه
- العمل مع الوزن المرئي في التصميمات الخاصة بك
- 19 العوامل التي تؤثر على التوازن التكويني
المحتوى التوجيهي
أفهم أن أنواع مختلفة من المواقع يملك طرق مختلفة لتوجيه الزوار من خلال الموقع. على سبيل المثال ، تريد الصفحات المقصودة توجيه الزوار بها الحكايات من المعلومات, أيقونات صغيرة, لقطات, و الشهادات - التوصيات.
المواقع الأخرى مثل المدونات لا تجلب عادة الأشخاص إلى الصفحة الرئيسية مرة واحدة. معظم الناس الهبوط على صفحة المادة, حتى المقصود تخطيطات آخر بلوق ل تسليط الضوء على العنوان, و ارسم الناس مزيد من المحتوى. هذا هو المكان الذي تلعب دوره في كتابة النصوص لأنك تريد أن يعلق القراء كل كلمة.
تحتاج الشبكات الاجتماعية وتطبيقات الويب تجربة المستخدم الجودة, هذا موضوع مختلف قليلاً ، ولكن ضع في اعتبارك كيفية تصميم موجز Facebook تشجيع التمرير وتفاعل المستخدم.
أساليب التصميم التي تستخدمها للحفاظ على تصفح الناس للموقع سوف التغير مع مرور الوقت. ولكن عموما ، هدفك هو دليل الزوار مع اتجاه المحتوى المرئي.
دعنا نلقي نظرة على الصفحة المقصودة و تصميم المدونة لاكتشاف الاختلافات.
الصبار هو مولد موقع ثابت لنظام التشغيل X. صفحتهم الرئيسية يتبع عن كثب أسلوب تصميم أبل - الكثير من المساحات البيضاء والخطوط الرفيعة بدون رقيق.
يتم تنظيم المحتوى في أعمدة وكتل ومقاطع نصية مع رسومات بسيطة. هذه جماليات نفسه مشترك مع منتجات أبل, لذلك سيستمتع مستخدمو Mac بأسلوب التصميم هذا.
يتم سرد المعلومات حول المنتج - بما في ذلك الميزات والإعداد - على الصفحة الرئيسية مباشرةً. الصفحة نفسها يشجع التمرير من خلال محتوى فريد ، أيقونات أساسية ، ونمط عمود بالتناوب من كتل المحتوى الأيسر / الأيمن.
الهدف هنا هو تقديم المعلومات إلى المستخدمين الحاليين, وللبيع مستخدمون جدد فكرة الصبار.
الآن قارن هذا التصميم بالصفحة الرئيسية لـ "الويب التالي". المحتوى هو أكثر من ذلك بكثير متقطعة في الصفحة الرئيسية للمدونة ، لأن هناك الكثير من مواضيع النشر المختلفة.
تقوم المستطيلات بإنشاء نظام شبكي يتم تغليفه وظائف متعددة في تخطيط واحد. الهدف هنا هو اجعل المستخدمين يقرؤون المحتوى في الموقع. لا يهم ما إذا كان الزوار يقومون بتنزيل أي شيء ، ولكن لا يهم إذا كانوا عصا حولها لقراءة شيء ما.
طريقة الحصول على قراءة الناس مع صور رائعة و عناوين جذابة. TNW يقوم بعمل رائع من هذا ، وتخطيطهم هو بنيت للحفاظ على تصفح الناس مع الصور المصغرة ذات الصلة في الشريط الجانبي ومنطقة ما بعد المحتوى.
يختلف توجيه الزوار إلى إجراء معين في كل موقع. ولكن يمكنك تعلم الكثير من خلال دراسة ما تفعله المواقع الأخرى الناجحة ، وتعلم كيفية النسخ.
ثق عينيك
يمكن شرح خصائص التصميم الفردية بشكل تحليلي ، ولكن يتغير التطبيق لكل موقع. صورة بطل بها رابط "Scroll further" لا يؤدي نفس الشيء على جميع المواقع.
تعلم التصميم كثيرا جدا عملية بصرية. عينيك للتصميم هو الجانب الأكثر أهمية. أنت بحاجه إلى رؤية الأشياء بشكل صحيح لتحديد هذا التسلسل الهرمي البصري. إذا كنت تستطيع رؤيته على مواقع ويب أخرى ، فستتمكن من تكرارها على مواقعك الخاصة.
أفضل نصيحة لدي هي ثق فقط عينيك. أنشئ قائمة بمواقع الويب المفضلة لديك ، وقضاء 5 دقائق في تصفح كل منها. اكتب العناصر المفضلة لديك على الصفحة ، وكيف تؤثر على التصميم. هذا سيساعدك استيعاب هذه المفاهيم من منظور UI / UX, بدلا من منظور المستخدم.
أيضا لا تخافوا لمحاولة الاشياء! لا أحد حسن في التصميم مجرد من خلال قراءة مقالات حول التصميم. نعم ، إنهم يساعدون - يمكن أن يساعدوا فعلاً الكثير. لكنك بحاجة إلى إلى إنشاء أشياء من نقطة الصفر لمعرفة ما أعمال و ماذا لا.
تدريب عينيك من خلال دراسة تخطيطات موقع الويب الذي تريده ، وإعادة إنشائها. بمرور الوقت ، ستقوم بإنشاء مكتبة أنماط في عقلك مما يجعل تصميم مواقع جديدة أسهل بكثير.
تغليف
نأمل أن تبدأ هذه النصائح وتعطيك خريطة طريق أساسية لمتابعة. ليس من السهل أن تصبح مصممًا على شبكة الإنترنت ، لكن العالم يحتاج إلى موهبة ، ولم يكن من السهل عليك أن تعلم نفسك هذه المفاهيم الأساسية.
دراسة أفضل أمثلة لمواقع الويب التي تحتوي على عناصر الصفحة التي تستمتع بها. قطار عينيك تتعرف على العلاقات ، وسوف بسرعة طور المهارات اللازمة ل تكرار تلك العلاقات في عملك الخاص.
