العناصر المشتركة المستخدمة في تصميم زر الواجهة
من المحتمل أن تكون الأزرار وعناصر التنقل هي كائنات الواجهة الأكثر استخدامًا في تصميم سطح المكتب والجوال. فهي تسحب الواجهة معًا ، مما يسمح للمستخدمين بالوصول من A إلى B بنقرة واحدة.
الأهم من ذلك ، على زر أن تبدو جيدة. يجب أن تصرخ "انقر فوقي!" وإلا لن تكون فعالة بقدر ما يجب أن تكون. تُستخدم الأزرار عادةً في "البحث" و "إرسال" و "إرسال" و "شراء" و "تحميل".
في هذه المقالة ، سنلقي نظرة على سبعة عناصر زر شائعة في تصميم الواجهة الحديثة: القوام ، الأنماط ، ثلاثية الأبعاد ، ضربات مثالية للبيكسل ، الخلفيات ذات المسافات البادئة ، التوهجات والإبرازات.
ستجد 35 أمثلة رائعة لهذه التقنيات بالإضافة إلى حفنة من الدروس المصغرة لفوتوشوب.
1. القوام
يعد استخدام القوام طريقة رائعة لإضافة بعض العمق إلى الأزرار وجعلها تبرز قليلاً عن بقية الواجهة (وجعلها في النهاية أكثر قابلية للنقر). فيما يلي بعض الأمثلة الرائعة من القوام في الأزرار.
يستخدم ShelfLuv الملمس في جميع أنحاء لإضافة البعد إلى واجهته ، وخاصة في مناطق حقل النص والزر.
يتم استخدام الملمس في جميع أنحاء هذه الواجهة ، لكنه أثقل في منطقة زر "التحميل" ، مما يجعلها نقطة محورية.
يتم مزج الملمس هنا بشكل جيد مع زر مشطوف ، مما يجعلها تبدو حقيقية.
لا يتم استخدام الملمس بالفعل على زر واجهة المستخدم هذه ولكنه يظهر في الخلفية ، مما يسمح للزر بالظهور.
خلق زر محكم
إنشاء خلفية بسيطة باستخدام أداة الشكل وإضافة الضوضاء (Filter ← Noise → Add Noise).
أعد تحديد أداة الشكل وارسم مستطيلاً ، مع التأكد من إخفاء الجزء العلوي منها عن حافة اللوحة.
تغيير لون الشكل إلى اللون الأزرق. اعتدت # 00A3D9.
تكرار طبقة الشكل وتغيير حجمها في نفس الموضع. قم بتغيير اللون إلى اللون الأزرق الداكن قليلاً.
تكرار الطبقة مرة أخرى. ضع الطبقة أسفل طبقتين الشكل الأخيرتين ، وقم بتغيير اللون إلى لون رمادي فاتح.
تصوير أو تحميل نسيج ورقي (استخدمت واحدة من فقدت وأخذت ). انتقل إلى File → Place ، وحدد موقع الملف لوضعه في المستند. تغيير حجمه ووضعه على الأشكال الزرقاء الخاصة بك.
قم بإزالة أي نسيج فائض باستخدام أداة Marquee ، وقم بتغيير صيغة المزج للمادة. تجربة مع أوضاع مختلفة لأن مواد مختلفة تنتج نتائج مختلفة. قد ترغب أيضًا في تقليل مستويات التعتيم قليلاً.
افتح نافذة Layer Style للشكل الأزرق الداكن ، وقم بتطبيق النمط Drop Shadow التالي لإضافة ظل أبيض خفيف.
الآن تطبيق ضربة على الشكل الخاص بك باستخدام الإعدادات أدناه.
وأخيرًا ، أضف الظل الداخلي إلى الشكل ، لإضفاء المزيد من الأبعاد عليه.
أضف بعض النص إلى الزر وانتهيت!
2. أنماط
الأنماط هي طريقة أخرى رائعة لإضافة القليل من الاهتمام والعمق لأزرار الواجهة. في ما يلي بعض الأمثلة على الأنماط في الأزرار ، وكلها دقيقة ولكنها فعالة.
يتم استخدام انعكاس قطري على الجانب الأيسر من الزر هنا لفصل الرمز من النوع.
يتم استخدام خط قطري في هذا الزر ، يتناسب مع المظهر القديم مع إضافة الأبعاد إلى التصميم.
هذا هو الاستخدام المفضل لنمط في هذه الأمثلة. على الرغم من عدم استخدامه في الأزرار نفسها ، إلا أن النمط في الرأس الرمادي يضيف بُعدًا إلى التصميم بأكمله ويساعد في النهاية على تمييز الأزرار البرتقالية.
إنشاء زر الشريط منقوشة
بعد إنشاء خلفية منقوشة باستخدام التقنية الموجودة في البرنامج التعليمي السابق الصغير ، ارسم مستطيلاً باستخدام أداة الشكل ، ثم املأها باللون الأزرق والأخضر. اعتدت على اللون # 008B8D.
ارسم شكلاً آخر بنفس الارتفاع واللون.
باستخدام أداة Lasso ، قم بإنشاء مثلث ، كما هو موضح أدناه. ضعه على حافة الشكل الجديد ، واضغط على مفتاح "Delete" لإزالة المنطقة التي لا نحتاج إليها.
قم بتكرار الشكل وانتقل إلى Edit ← Transform ← فليب أفقيًا لجعله يواجه الاتجاه المعاكس.
ضع الشكلين تحت الشكل الأكبر ، كما هو موضح أدناه.
انقر بزر الماوس الأيمن على أحد أشكالك ، وافتح نافذة Blending Options / Layer Style. قم بتطبيق تراكب متدرج مماثل للواحد الموضح أدناه. يمكنك أيضًا إضافة Drop Shadow دقيق. وبمجرد الانتهاء ، انقر بزر الماوس الأيمن فوق الطبقة وحدد "نسخ نمط الطبقة". حدد شكل البانر الآخر. انقر بزر الماوس الأيمن واختر "Paste Layer Style". قم بفتح نافذة Layer Style ، وقم بتغيير زاوية تراكب Gradient Overlay من 180 ° إلى 0 °.
باستخدام أداة Lasso ، قم بإنشاء تحديد مشابه لما هو موجود أدناه لتتناسب مع زاويتي الأشكال. املأها بلون أغمق.
قم بتكرار الطبقة ، اقلبها أفقيًا ، وضعها على الجانب الآخر.
خلق نمط الخط. بدلا من ذلك ، يمكنك استخدام واحدة التي قمت بها أدناه.
الصق النمط على البانر بأكمله. أثناء الضغط على Command + Shift ، انقر فوق مصغرات الطبقة لكل طبقات الترويسة الخاصة بك. هذا سوف يحدد كل منهم. انقر بزر الماوس الأيمن وحدد "اختر معكوس". عند تحديد طبقة نمط الخط ، اضغط على مفتاح "حذف" لإزالة مناطق النموذج الذي لا تحتاج إليه.
غير نمط المزج الخاص بطبقة النمط إلى "Multiply" لإخفاء اللون الأبيض من الطبقة. الآن إسقاط العتامة إلى ما بين 25 و 75٪. تجربة للحصول على أفضل نتيجة.
باستخدام أداة الشكل ، قم بإنشاء بعض الخطوط المشابهة لتلك الموجودة أدناه.
أزل المناطق التي توجد على خلفية الصورة.
جرّب وضع المزج لكل سطر من خطوطك. وهنا النتيجة:
3. 3-د
أزرار ثلاثية الأبعاد رائعة لأنها تجعل الأزرار تبدو أكثر واقعية. انهم يكاد يكون من المستحيل عدم النقر! العيب الوحيد هو أن التأثير مرحة إلى حد ما ، لذلك لا يناسب جميع المواقع (مثل الشركات). يوجد أدناه مجموعة مختارة من بعض الأزرار ثلاثية الأبعاد.
تسليط الضوء على الظلال وخطوط 1 بكسل هنا بعض المناطق وجعل الزر يظهر ثلاثي الأبعاد. ومن شأن بعض هذه التأثيرات المفيدة في CSS أن تجعل زرًا فائقًا للتفاعل.
كما يستخدم العنصر الثاني (الأنماط) في هذا التصميم لإضافة بُعد إلى زر ثلاثي الأبعاد.
يتخذ هذا الزر منهجًا مختلفًا قليلاً ، معتمدين فقط على التدرجات لنظرة ثلاثية الأبعاد.
تُظهر هذه المجموعة ارتفاعات مختلفة للإشارة إلى ما إذا كان الزر في حالته الطبيعية أو تم التمرير أو الحالة النشطة. تعطي الخطوط والنسيج الأزرار مظهرًا يشبه الحياة.
مثل بعض الأمثلة الأخرى في هذا القسم ، فإن مجموعة من التدرجات والحدود تجعل هذه الأزرار تبدو ثلاثية الأبعاد.
يبدو هذا الزر ثلاثي الأبعاد بسبب تصميمه "خارج الصندوق" ، حيث يتم لفه حول واجهة المستخدم.
إنشاء زر ثلاثي الأبعاد
ابدأ برسم شكل باستخدام أداة المستطيل ، مع نصف قطر زاوية من 7 بكسل. افتح نافذة Layer Style ، وقم بتطبيق Gradient Overlay من الأحمر الداكن إلى الأحمر الفاتح. استخدم لون أحمر أفتح في نهاية شريط التدرج لتمييز الجزء العلوي من الزر الثلاثي الأبعاد.
الآن تطبيق ضربة على الزر. غيّر نوع التعبئة إلى "تدرج" بحيث يمكنك تغيير لون الجزء العلوي والسفلي من الحد. انتقل من الضوء إلى الأحمر الغامق (عكس التراكب المتدرج).
يجب أن تبدو شيئًا كهذا حتى الآن:
تكرار طبقة الشكل. دفع الطبقة الأصلية إلى الأسفل بمقدار 10 بكسل تقريبًا.
تطبيق Drop Shadow على الطبقة الأصلية باستخدام الإعدادات المعروضة في لقطة الشاشة أدناه.
كذلك ، قم بتغميق طبقة التراكب المتدرجة بجعل كل لون منفرد في شريط التدرج أكثر قتامة بعض الشيء.
يجب أن يكون لديك شيء يشبه هذا:
حدد أداة النص ، واكتب شيئًا ما على الزر. افتح نافذة Layer Style ، وقم بتطبيق Gradient Overlay مشابهًا للإطار الوارد أدناه:
تطبيق Inner Shadow باستخدام هذه الإعدادات:
تطبيق Drop Shadow باستخدام هذه الإعدادات:
لقد انتهينا يجب أن تنتهى مع بعض الأشياء التى تحبها:
4. Pixel-Perfect Strokes
لقد أصبح فن إتقان البكسل جزءًا لا يتجزأ من جميع جوانب تصميم واجهة المستخدم ، وليس فقط الأزرار. الخطوط ذات البكسل الواحد (أو السكتات) تعطي عمق الأزرار ونظرًا ثلاثي الأبعاد. كما أنها تجعل الأزرار تبدو باهتة. فيما يلي بعض الأمثلة الرائعة على هذا.
يمكنك أن ترى بوضوح أنه يتم استخدام خط أبيض (متراكب) بحجم 1 بكسل كتمييز في أعلى الزر الأحمر ، مع وجود خط داكن في الأسفل. هذا يجعلها تظهر بشكل ثلاثي الأبعاد وتضيف الكثير من التفاصيل إلى الصفحة.
تحتوي الطباعة في هذا الزر على ظل داخلي ، مما يجعل الزر يظهر كما لو كان يجلس فوق الواجهة.
هذه الأزرار CSS3 فقط (على الإطلاق لا فوتوشوب) لها حدود 1 بكسل التي تجعلها تبرز من الخلفية وتبدو مزاحة عند النقر عليها.
مثال آخر لضوء فاتح بكسل واحد في أعلى الزر ليكون بمثابة علامة مميزة.
يُظهر هذا الزر الأخضر أسلوبًا مختلفًا قليلاً ، مع توهج داخلي يعمل كإبراز في الجزء العلوي من الزر. تخلق السكتة الدماغية في الخارج ظلًا رائعًا.
بعد زر آخر يجمع بين التقنيات المذكورة آنفا.
يتميز هذا الزر الأساسي بضربات رقيقة وبسقوف رقيقة ليجعلها تبرز من التصميم البسيط.
يحتوي هذا الزر على توهج داخلي دقيق لإبرازه من الخلفية. حالته النشطة لديها عتامة منخفضة ، والتي تعمل على تحقيق الهدف.
ننسى الزر: هذا التصميم بأكمله مثالي للبيكسل ، مع الطباعة الحديثة وخطوط صنع واجهة مستخدم جميلة.
أنشئ زر Pixel-Perfect
حدد أداة Rectangle Shape (الموجودة في شريط الأدوات أعلى Photoshop عندما تكون أداة الشكل محددة) ، ثم قم بإعطائها نصف قطر زاوية من 5 بكسل. ارسم مستطيلاً أسود مماثل للمستطيل أدناه.
افتح نافذة Layer Style ، وقم بتطبيق Gradient Overlay على الشكل. اعتدت على الأخضر الداكن إلى الأخضر أخف قليلا.
يعطي الشكل ضربة متدرجة ، من الأخضر إلى الأخضر الداكن.
الآن ، قم بمنح الشكل نمط Inner Shadow أبيض ، باستخدام الإعدادات الموضحة أدناه.
والآن ، ظل Drop Shadow ، بحجم 0 بكسل وعتامة تبلغ 5٪ فقط.
ابحث عن رمز على الإنترنت (أو أنشئ بنفسك) ، ثم ضعه في مستندك بالانتقال إلى File → Place ، واضبطه بشكل صحيح. تطبيق تراكب متدرج عليه.
امنح الظل الداخلي للرمز مسافة 1 بكسل ، والمسقط الأبيض Shadow مسافة 1 بكسل. هذا يجعل الأيقونة تبدو وكأنها محفورة على الزر.
أضف بعض النص إلى الزر ، وقم بتطبيق تأثير Drop Shadow منخفض التعتيم باستخدام إطار Layer Style. وهنا النتيجة:
5. الخلفيات المسننة
تجعل الخلفية المزودة بالأزرار زرًا يبدو وكأنه مدفون فيه ، مما يعطي عمق الزر والاهتمام المرئي. فيما يلي بعض الأمثلة الرائعة لهذا.
تحتوي خلفية الزر هذه على ظلال داخلية خفية لجعلها تظهر بشكل بادئة.
تجعل التدرجات المقلوبة في هذه الخلفية الأزرار تظهر مسافة بادئة.
مزيج من السكتات الدماغية والظلال المسقطة يعطي هذه الأزرار ذات المسافات البادئة مزيدًا من العمق.
تحتوي خلفية الزر هذه على عدة أنماط ، بما في ذلك التدرج والظل الداخلي والظل المسقط.
هذه الخلفية المزروعة بالأزرار أصغر كثيرًا مما رأيناه ولكنها لا تزال تتبع نفس الأساليب.
مرة أخرى ، يتم استخدام الظل المسقط والظل الداخلي لإنشاء مسافة بادئة.
6. يضيء
تضيء هي تقنية صعبة إلى حد ما لسحب في تصميم الواجهة ، وعادة ما ينظر إليها فقط في واجهات مظلمة (على الرغم من أننا سنرى مثال الضوء أدناه). توضح هذه الأمثلة كيف يمكن استخدام التوهجات بطرق مختلفة.
يتم استخدام توهج في الداخل من هذا الزر ، مما يمنحه إضاءة شاملة.
يتم إستخدام التوهجات بشكل ذكي لجعل الطباعة في هذا الزر تبرز من الخلفية المظلمة. ويؤدي التوهج إلى ظهور أشرطة التحميل نابضة بالحياة.
تُستخدم التوهجات بشكل شائع في الواجهات الداكنة لجهاز iPhone. هنا نرى توهج حول الطباعة عندما يكون الزر في حالته النشطة.
يضفي الضوء الخفيف إلى حد ما على هذا الزر الدفعة الإضافية التي يحتاج إليها لتصبح جميلة.
خلق زر متوهجة الضوء
باستخدام أداة Rectangle Shape مرة أخرى ، ارسم مستطيلاً ، هذه المرة مع نصف قطر زاوية من 3 بكسل. تطبيق تراكب متدرج مماثل لتلك الواردة أدناه. امنح ألوان مركزك وضع "49" و "50".
تطبيق الظل الداخلي التالي.
قم بتطبيق Drop Shadow التالية.
تطبيق التالية الوهج الخارجي.
أضف بعض الطباعة على الزر. يجب أن ينتهي بك الأمر مع نتيجة لطيفة ونظيفة وسهلة الإنتاج مثل:
7. يسلط الضوء
تبرز الميزات عمق الأزرار ، والاهتمام المرئي ، وإمكانية النقر. الأمثلة أدناه تثبت ذلك.
يتم استخدام شكل أبيض بسيط غير شفاف في النصف العلوي من هذا الزر لإضفاء بعض العمق عليه ومساعدته على ملاءمة الواجهة الحمراء والرمادية بشكل عام.
كما هو الحال مع العديد من الأزرار الأخرى في هذا المنشور ، فإن ضربة 1 بكسل تبرز هذا.
الضوء إلى المظلمة إلى التدرجات الضوء بمثابة الضوء والظل لهذه الأزرار.
هذه الوظيفة كانت مكتوبة حصرا ل WDD من قبل Callum Chapman الرجل خلف متجر Picmix و مدونة Circlebox .
ما هي تصميمات الأزرار التي تستخدمها أكثر ولماذا؟ هل وجدت نقرة أعلى من خلال بعض التصاميم؟ يرجى حصة أدناه ...