العناصر الشائعة المستخدمة في تصميم واجهة المستخدم الخشبية

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

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

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

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

هذه العناصر الخمسة المشتركة في تصميم واجهة المستخدم هي:

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

1. النسيج و خياطة

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

أمثلة

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

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

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

ميني دروس

إنشاء خط بسيط متقطع (في Illustrator)

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

من لوحة Stroke (Window → Stroke) قم بتطبيق حد وزن ثنائي النقاط بحد أقصى لميت. 4. قم بتحديد خيار "خط متقطع" ، وأدخل 12 نقطة في حقل الشرطة الأول.

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

قم بتكرار الشكل أولاً بتحديده ، ثم اختر Edit → Copy (Command + C) وأخيرًا Edit (تحرير) في اللصق (Command + F). مع استمرار تحديد الشكل الجديد ، اضغط باستمرار على مفاتيح Alt + Shift في نفس الوقت وقم بتقليل حجم الشكل. سيحافظ الإبقاء على هذين المفتاحين في الوقت نفسه على الشكل بشكل تناسبي ويقلل أو يزيدان الحجم من نقطة المركز ، مما يلغي الحاجة إلى إعادة التنظيم.

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

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

قلل من عتامة دائرة السكتة البيضاء إلى 50٪ وعتامة دائرة السكتة البنية إلى 75٪.

خلق غرزة واقعية (فوتوشوب)

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

حدد أداة Rectangular Marquee ، وقم بسحب تحديد من داخل شكل نسيجك. إنشاء طبقة جديدة وإعادة تسميتها "Stitch." انتقل إلى Edit → Stroke وتطبيق حد أسود 1 بكسل على الشكل الخاص بك.

حدد أداة Rectangular Marquee مرة أخرى وقم بوضعها فوق السكتة الدماغية. لا يهم أين تبدأ. مع اختيار موقف ، اضغط على مفتاح Delete. تأكد من إزالة المحتوى من طبقة الحد وليس طبقة النسيج.

كرر هذه العملية لبقية خط stroked ، كما رأينا أدناه.

هناك احتمال كبير بأن لا تكون الغرزات متماثلة ؛ ولكن هذا أمر جيد ، لأن الغرز نادرا ما تكون!

يجب أن ينتهي بك الأمر الذي يبدو كالتالي:

انقر بزر الماوس الأيمن على الطبقة المحززة واختر "Blending Options" لفتح نافذة Layer Styles. حدد علامة التبويب Color Overlay ، وحدد لون رمادي فاتح (I used #F1F1F1 ).

الآن حدد علامة التبويب Drop Shadow. ضع ظل أسود منسدل بزاوية 90 درجة ، ومسافة 1 بكسل وحجمه 0 بكسل. قم بخفض عتامة الظل إلى ما بين 20 و 60٪.

حدد طبقة النسيج ، وافتح نافذة Layer Styles. قم بتطبيق Drop Shadow افتراضي بمسافة 0 بيكسل ، و Overlay Gradient Overlay يتحول من الأبيض إلى الأسود إلى الأبيض. قم بتغيير وضع المزج الخاص بتراكب الانحدار إلى "Multiply" بعتامة 15٪. بمجرد تطبيقه وعرضه بنسبة 100٪ ، يجب أن ينتهي الأمر بشيء مماثل لهذا:

العب مع ألوان النسيج الخاص بك باستخدام إعدادات توازن اللون والألوان. هذه هي النتيجة

2. الورق والظلال

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

أمثلة

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

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

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

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

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

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

ميني دروس

إنشاء تأثير ورق رقمي بسيط (في Photoshop)

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

حدد أداة Rectangular Shape ، ثم أدخل شكلًا مشابهًا للأسلوب أدناه ، وضعه في أعلى اللوحة.

قم بتكرار الشكل ، وانتقل إلى Edit (تحرير ← Free Transform) (أو اضغط Command + T). قم بتقليل حجم الشكل أثناء الضغط على مفاتيح Alt + Shift للحفاظ على الشكل متناسبًا ، ثم تقليل الحجم نحو المركز.

اسحب نقطة الربط العليا أعلى قمة اللوحة بحيث تتداخل مع الجزء العلوي من الشكل الأصلي.

قم بتغيير لون الشكل الجديد إلى لون بيج فاتح جدًا (أبيض تقريبًا). إستعملت #FFFBF8 .

تكرار الشكل الأصلي ، وتغيير اللون إلى أسود نقي ( #000000 ).

قم بزيادة حجم الشكل بحيث يكون بيكسلات أكبر من الشكل الأصلي. قم بإنشاء دليل - يمكنك سحب دليل خارج المسطرة (عرض ← إظهار المساطر ، إذا لم يتم عرضها) - ما بين 10 إلى 20 بكسل أسفل الشكل الأسود. انتقل إلى Edit → Transform → Warp.

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

اضغط على Enter لتأكيد تحول الشكل الخاص بك. انقر بزر الماوس الأيمن على أداة Layers Layer ، وحدد خيار "Rasterize Layer".

إعادة وضع طبقة الشكل الأسود تحت الأشكال الأخرى ولكن فوق طبقة الخشب. انتقل إلى تصفية → Blur → Gaussian Blur ، وطمس الشكل الأسود بمقدار 10 بكسل. ثم انقر فوق "موافق".

قلل من عتامة الشكل الأسود إلى 50٪. افتح نافذة Layer Styles لشكلك الأبيض الأصلي ، وانقر فوق علامة التبويب Stroke. قم بتطبيق حدود 1 بيكسل على الشكل باستخدام نوع التعبئة التدرج ، الانتقال من الأسود إلى الأبيض بزاوية 90 درجة.

مع ذلك ، لدينا تأثير الورق الرقمي على الخشب لدينا! هذه تقنية رائعة لاستخدامها لمواقع الويب.

3. طباعة محفورة وأنماط

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

أمثلة

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

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

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

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

مثال آخر للطباعة محفورة على علامات ، في هذه الحالة علامات الخشب مزخرفة بدلا من المعادن.

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

ميني دروس

كيفية نقش نمط في الخشب (فوتوشوب)

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

أدخل أحد أنماطك الخاصة ، أو استخدم صورة ناقلات الأسهم.

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

حدد علامة التبويب Drop Shadow ، وتطبيق ظل أبيض مع وضع Blending عادي. تغيير زاوية الظل إلى 90 درجة ، والمسافة والحجم إلى 1 بكسل. يمكنك الاحتفاظ بالإعدادات الأخرى افتراضيًا.

حدد علامة التبويب Inner Shadow لتطبيق ظل على داخل النمط الخاص بك. هذا سوف يسمح لنا لخلق تأثير محفورة. إسقاط عتامة الظل إلى 20٪ ، وقم بتغيير الزاوية إلى 90 درجة. غيّر المسافة وحجم الظل إلى 3 بكسل لكل منهما ، واحتفظ بالإعدادات الأخرى افتراضيًا.

انقر فوق "موافق" ، ثم قم بخفض عتامة طبقة النقش إلى 80٪ للسماح لبعض من نسيج الخلفية بالتألق في كل مجدها. يجب أن ينتهي بك الأمر مع هذه النتيجة:

4. عناصر أنيقة وعصرية

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

أمثلة

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

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

آخر من واجهات المفضلة. فهو يجمع بين النسيج والصور المزيّنة بالخشب مع التدرجات الأنيقة ، والخطوط الدقيقة 2 بكسل ، والرموز البسيطة والطبوغرافية الرائعة للعديد من نقاط الاهتمام للمستخدم.

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

تستخدم التوهجات والظلال والسكتات الدماغية لإضفاء الحيوية على هذه الواجهة الخشبية الحية. ومع ذلك ، فإن الرموز الحديثة هي المفتاح.

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

لوحة المفاتيح هذه تعطينا نسيجًا خشبيًا يعتمد على عنصر حديث موجود: جهاز iPhone UIKit الافتراضي. تعمل لوحة المفاتيح بالطريقة نفسها تمامًا مثل لوحة المفاتيح الافتراضية وبالتالي لن تؤدي إلى إرباك المستخدمين.

ميني دروس

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

حدد أداة Rounded Rectangle tool ، واسحب شكلًا ضيقًا طويلًا ، على غرار الشكل أدناه. يتم تعيين نصف قطر ركن أداتي إلى 15 بكسل.

انقر بزر الماوس الأيمن على طبقة الأشكال وحدد "خيارات المزج". حدد علامة التبويب تراكب التدرج ، ثم قم بإضافة لون تدرج محدد من الخلفية ، ثم لونًا أغمق قليلاً. ثم انقر فوق "موافق".

الآن ، حدد علامة التبويب Inner Shadow ، ثم ضع ظلًا أسود مع عتامة بنسبة 30٪ وزاوية 120 °. إسقاط المسافة إلى 1 بكسل ، وإسقاط كل شيء آخر إلى 0. سيؤدي ذلك إلى إنشاء ظل داخل شكلنا ، مما يجعلها تبدو وكأنها منحوتة من خلفية خشبية.

حدد علامة التبويب Drop Shadow ، وتطبيق ظل أبيض مع وضع Blending عادي. غيّر الزاوية إلى 90 درجة ، والمسافة والحجم إلى 1 بكسل. اترك كل شيء آخر عند 0 بكسل. هذا سيعطي شكلنا تسليط الضوء على القاع ، مما يجعلها تبدو أكثر ثلاثية الأبعاد وواقعية.

قم بتكبير خطك المنحوت وحدد أداة Ellipse. أثناء الضغط على مفتاح Shift للحفاظ على الشكل الدائري ، اسحب دائرة وضعه على شريط التمرير.

افتح نافذة "Layer Styles" لشكل دائرة جديد. انقر فوق علامة التبويب Overlay Overlay ، وقم بتطبيق تدرج الانتقال من متوسط إلى رمادي فاتح. اعطها زاوية 90 درجة.

حدد علامة التبويب Drop Shadow وقم بتطبيق ظل على الشكل الخاص بك. تغيير المسافة إلى 0 بكسل والحجم إلى 10 بكسل.

التصغير لعرض شريط التمرير بنسبة 100٪. وهنا النتيجة:

5. تأثيرات ثلاثية الأبعاد

لا توجد قيود على تصميم ثلاثي الأبعاد ، وهو فعال بشكل لا يصدق مع القوام الخشبي. يستخدم هذا المزيج بشكل شائع لإنتاج "الرفوف" ، كما هو موضح في واجهات iPhone و iPad - وخصوصًا تطبيق Apple iBook.

أمثلة

هذه الرفوف هي واقعية للغاية ، والظلال (مثل تلك الموجودة على الرف الداخلي في الزاوية العلوية اليمنى) تأتي من مجموعة كبيرة من المهام المخصصة (غير مدمجة في فلاتر Photoshop).

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

هذه الرفوف فون تقدم تقنيات مماثلة. هذه المرة ، النتيجة هي حديثة وواقعية ، توازن بشكل مثالي الصور المزخرفة مع المؤثرات الرقمية.

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

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

مكتوبة حصريًا للـ WDD بواسطة Callum Chapman ، مصمم مصمم وتوضيح إبداعية سيركل بوكس . يدير أيضا إلهام المدونة و متجر Picmix

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

تصميم واجهة المستخدم واجهة المستخدم الملمس خشب الخشب للتصميم خشبي