أهم النقاط
1. ابدأ بالميزة وليس بالتخطيط
أسهل طريقة لتشعر بالإحباط والجمود عند العمل على تصميم جديد هي أن تبدأ بمحاولة "تصميم التطبيق" ككل.
ركّز على الوظيفة أولاً. ابدأ بتصميم ميزة محددة أو جزء من الوظائف بدلاً من التخطيط العام أو "هيكل" التطبيق. هذه الطريقة تتيح لك اتخاذ قرارات مدروسة حول التنقل والبنية بناءً على المحتوى الفعلي واحتياجات المستخدم. على سبيل المثال، عند تصميم خدمة حجز رحلات طيران، ابدأ بالعناصر الأساسية مثل حقول المغادرة والوجهة، ومحددات التواريخ، وزر البحث.
تجنب اتخاذ قرارات مبكرة. بالتركيز على الميزات أولاً، تمنع نفسك من اتخاذ خيارات غير مدروسة بشأن التنقل والتخطيط والعناصر الهيكلية الأخرى. هذه الطريقة تساعدك على بناء تصميم يركز على المستخدم ويتطور بشكل طبيعي من الوظائف الأساسية لتطبيقك.
2. صمم بالألوان الرمادية قبل إضافة الألوان
عند التصميم بالألوان الرمادية، تُجبر على استخدام التباعد والتباين والحجم للقيام بكل العمل الشاق.
ركّز على الهيكل والتسلسل الهرمي. التصميم بالألوان الرمادية في البداية يجبرك على التركيز على الجوانب الأساسية لتصميمك: التخطيط، التباعد، والتباين. هذا يضمن أن يكون الهيكل الأساسي لتصميمك متينًا قبل إدخال تعقيد الألوان.
قم بالتنقيح دون تشتيت. العمل بالألوان الرمادية يسمح لك باتخاذ قرارات حاسمة حول التسلسل الهرمي والتركيز دون تشتيت الألوان. بعد أن تؤسس قاعدة قوية، يمكنك إدخال الألوان بشكل استراتيجي لتعزيز التصميم بدلاً من الاعتماد عليها في خلق الهيكل أو المعنى.
- ابدأ بإطارات سلكية أو رسومات أولية بسيطة
- قم بتنقيح التخطيط والتباعد بالألوان الرمادية
- أنشئ تسلسلًا بصريًا واضحًا باستخدام التباين والحجم
- أضف الألوان فقط بعد تثبيت التصميم الأساسي
3. أنشئ تسلسلًا بصريًا من خلال الحجم، الوزن، والتباين
التسلسل البصري يشير إلى مدى أهمية العناصر في الواجهة بالنسبة لبعضها البعض، وهو أداة فعالة لجعل التصميم يبدو "مصممًا".
استخدم تقنيات متعددة. أنشئ التسلسل الهرمي بتغيير أحجام الخطوط، أوزانها، وألوانها. لا تعتمد فقط على حجم الخط؛ فدمج تقنيات مختلفة غالبًا ما يعطي نتائج أفضل. مثلاً، استخدم وزن خط أثقل أو لون أغمق لتأكيد العناصر المهمة مع الحفاظ على أحجام خطوط معقولة.
ضع في اعتبارك السياق. عدّل التسلسل حسب احتياجات كل عنصر في الواجهة. على سبيل المثال:
- العناوين: حجم أكبر، وزن أثقل
- نص الجسم: حجم متوسط، وزن عادي
- النصوص الداعمة: حجم أصغر، لون أفتح
- أزرار الدعوة إلى العمل: لون متباين، نص عريض
تذكر أن التسلسل لا يقتصر على إبراز العناصر فقط، بل يشمل أيضًا تقليل أهمية العناصر الأقل أهمية لخلق مسار بصري واضح للمستخدم.
4. أضف عمقًا باستخدام الظلال والتراكم
الظلال يمكن أن تكون أكثر من مجرد تأثير بصري — إذا استُخدمت بحكمة، تتيح لك وضع العناصر على محور z افتراضي لخلق إحساس بالعمق.
استخدم الظلال بشكل هادف. الظلال تعبر عن الارتفاع والأهمية في واجهتك. أنشئ نظامًا لأحجام وشدة الظلال لتمثيل مستويات مختلفة من الارتفاع بشكل متسق في التصميم.
- ظلال صغيرة: عناصر مرتفعة قليلاً (مثل الأزرار)
- ظلال متوسطة: عناصر عائمة (مثل قوائم منسدلة)
- ظلال كبيرة: نوافذ حوارية أو عناصر بارزة
رتب العناصر لخلق عمق. قم بتراكب مكونات مختلفة لخلق إحساس بالتراكم في التصميم. هذه التقنية تضيف اهتمامًا بصريًا وتساعد في تنظيم المعلومات بشكل هرمي. مثلاً:
- إزاحة البطاقات لتتداخل مع الخلفيات
- السماح للعناصر بالتمدد خارج حاوياتها
- استخدام "حدود غير مرئية" لفصل الصور المتداخلة
5. استخدم نظامًا متسقًا للتباعد والحجم
النهج البسيط هو البدء بقيمة أساسية معقولة، ثم بناء مقياس باستخدام عوامل ومضاعفات تلك القيمة.
أنشئ مقياسًا. ابتكر نظامًا للتباعد والحجم يعتمد على مقياس ثابت. هذا يضمن تناغمًا بصريًا ويسرّع عملية التصميم من خلال تقليل الخيارات. ابدأ بقيمة أساسية (مثلاً 16 بكسل) وأنشئ مقياسًا باستخدام مضاعفات أو عوامل لتلك القيمة.
طبق النظام باستمرار. استخدم مقياسك المعتمد في مختلف جوانب التصميم:
- الهوامش والحشوات
- أحجام العناصر (الأزرار، حقول الإدخال، إلخ)
- الفجوات في الشبكة
- الطباعة (ارتفاع السطر، تباعد الفقرات)
باتباع نظام متسق، تخلق تصميمًا أكثر تماسكًا وتقلل من إرهاق اتخاذ القرار أثناء التصميم. تذكر أن مقياسك يجب أن يوفر خيارات كافية للمرونة دون أن يكون معقدًا أو مربكًا.
6. اختر الخطوط بعناية وأنشئ مقياسًا للخطوط
في تصميم واجهات المستخدم، الخيار الأكثر أمانًا هو خط سانس-سيريف محايد إلى حد ما — مثل هيلفيتيكا.
اختر خطوطًا مناسبة. اختر خطوطًا واضحة القراءة بمختلف الأحجام ومناسبة لغرض تصميمك. في واجهات المستخدم، غالبًا ما تكون خطوط السانس-سيريف المحايدة الخيار الأفضل. ضع في اعتبارك:
- وضوح القراءة عند الأحجام الصغيرة
- توفر الأوزان والأنماط المختلفة
- اكتمال مجموعة الأحرف
- تراخيص وحقوق الاستخدام
أنشئ مقياسًا للخطوط. حدد مجموعة متسقة من أحجام الخطوط لاستخدامها في التصميم. هذا يساعد في الحفاظ على التناغم البصري ويسرّع عملية التصميم.
- ابدأ بحجم أساسي (مثلاً 16 بكسل لنص الجسم)
- أنشئ مقياسًا من 5 إلى 8 أحجام لأغراض مختلفة (عناوين، تسميات، إلخ)
- استخدم مقياسًا غير خطي لمزيد من المرونة (مثلاً 12، 14، 16، 20، 24، 32، 48 بكسل)
7. طور لوحة ألوان شاملة
يمكن تقسيم لوحة الألوان الجيدة إلى ثلاث فئات.
ابنِ لوحة ألوان متعددة الاستخدامات. أنشئ نظام ألوان شامل يتضمن:
- درجات الرمادي: 8-10 درجات للنصوص، الخلفيات، وعناصر الواجهة
- الألوان الأساسية: 5-10 درجات لكل لون رئيسي للعلامة التجارية والإجراءات
- ألوان التمييز: ألوان إضافية للتسليط، التحذيرات، وتمثيل البيانات
ضع في اعتبارك علم نفس الألوان. اختر ألوانًا تتماشى مع شخصية علامتك التجارية وتثير المشاعر المناسبة. مثلاً:
- الأزرق: الثقة، الاحترافية
- الأخضر: النمو، الإيجابية
- الأحمر: العجلة، الأهمية
تأكد من اختبار لوحتك لضمان سهولة الوصول وتوفير تباين كافٍ بين النص والخلفية.
8. حسّن الصور للوضوح والتأثير
لحل هذه المشكلة، تحتاج إلى تقليل الديناميكية في الصورة لجعل التباين بين النص والخلفية أكثر اتساقًا.
عزز تباين النص مع الصورة. عند وضع نص فوق الصور، تأكد من وضوح القراءة عبر تعديل الصورة أو إضافة طبقات:
- تقليل تباين الصورة
- إضافة طبقات شفافة جزئيًا
- استخدام فلاتر لونية لتوحيد الصورة مع التصميم
- تطبيق ظلال أو توهجات خفيفة للنص
تحكم في المحتوى الذي ينشئه المستخدم. عند التعامل مع صور يرفعها المستخدمون:
- فرض نسب وأحجام متناسقة
- استخدام حدود أو ظلال خفيفة لفصل الصور عن الخلفيات
- تطبيق أنماط بديلة للصور المفقودة أو ذات المشاكل
تساعد هذه التقنيات في الحفاظ على سلامة التصميم مع استيعاب المحتوى المتغير.
9. انتبه للتفاصيل الصغيرة لإطلالة متقنة
ليس عليك دائمًا إضافة عناصر جديدة للتصميم لإضفاء الحيوية — هناك العديد من الطرق لتعزيز الصفحة عبر "تعزيز" ما هو موجود بالفعل.
ارتقِ بالعناصر القياسية. حسّن مكونات واجهة المستخدم الشائعة لإضافة اهتمام بصري:
- استبدال النقاط الافتراضية بأيقونات مخصصة
- تنسيق علامات الاقتباس في الشهادات
- إنشاء أنماط مخصصة لمربعات الاختيار وأزرار الراديو
- إضافة حدود تمييز للبطاقات أو الأقسام
استخدم زخارف خلفية خفيفة. كسر الرتابة في تصميماتك عبر:
- تطبيق تدرجات أو أنماط خفيفة على الخلفيات
- استخدام ألوان خلفية مختلفة لتمييز الأقسام
- إضافة نسيج خفيف أو رسومات توضيحية دقيقة
تلك اللمسات الصغيرة يمكن أن تحسن بشكل كبير من مظهر التصميم العام واحترافيته دون الحاجة إلى تغييرات كبيرة في التخطيط.
ملخص المراجعات
يحظى كتاب "إعادة هيكلة واجهة المستخدم" بتقييمات إيجابية ساحقة، حيث يشيد القراء بأسلوبه العملي والموجز في تصميم واجهات المستخدم. يجد العديد من المطورين فيه قيمة كبيرة، خاصة أولئك الذين يسعون إلى تحسين مهاراتهم في التصميم. يُثنى على الكتاب لأمثلته الواضحة، ونصائحه المفيدة، وقدرته على تبسيط المفاهيم المعقدة. يقدّر القراء تركيزه على إنشاء تصاميم متسقة وعملية، وبناء أنظمة تصميم فعالة. وعلى الرغم من أن بعض المصممين ذوي الخبرة يرونه بسيطًا، إلا أن الغالبية تعتبره مرجعًا أساسيًا لكل من يعمل في تطوير المواقع أو التطبيقات، بغض النظر عن خلفيتهم في التصميم.
قرأ الآخرون أيضًا
الأسئلة الشائعة
What's "Refactoring UI" about?
- Design principles for developers: "Refactoring UI" by Adam Wathan provides practical design advice specifically tailored for developers who may not have formal design training.
- Focus on UI improvement: The book emphasizes improving user interfaces by focusing on hierarchy, layout, color, and typography.
- Actionable tips and techniques: It offers actionable tips and techniques to make interfaces more visually appealing and user-friendly.
- Systematic approach: The book encourages a systematic approach to design, helping readers create consistent and efficient UI designs.
Why should I read "Refactoring UI"?
- Enhance design skills: If you're a developer looking to improve your design skills, this book provides clear, practical guidance.
- Bridge the gap: It helps bridge the gap between development and design, making it easier to create aesthetically pleasing and functional interfaces.
- Time-saving techniques: The book offers time-saving techniques and systems that streamline the design process.
- Real-world examples: It includes real-world examples and case studies that illustrate the application of design principles.
What are the key takeaways of "Refactoring UI"?
- Start with features: Begin designing with a focus on features rather than the overall layout to avoid frustration and inefficiency.
- Hierarchy is crucial: Establish a clear visual hierarchy to make interfaces more intuitive and user-friendly.
- Limit choices: Define systems for colors, fonts, and spacing to reduce decision fatigue and maintain consistency.
- Emphasize simplicity: Avoid over-designing and focus on creating the simplest useful version of a feature.
How does "Refactoring UI" suggest starting a design?
- Feature-first approach: Start with a specific feature rather than the entire layout to gather necessary information for design decisions.
- Example of flight booking: For a flight booking service, begin with the search functionality, including fields for departure and destination cities.
- Avoid shell design: Avoid starting with the app's shell, such as navigation bars, until features are defined.
- Iterative process: Use an iterative process to refine features and layout as more information becomes available.
What does "Refactoring UI" say about visual hierarchy?
- Not all elements are equal: Recognize that not all elements in an interface hold the same importance and should be styled accordingly.
- Use size wisely: Avoid relying solely on size to establish hierarchy; use font weight and color to emphasize important elements.
- De-emphasize to emphasize: Sometimes, de-emphasizing less important elements can make the main elements stand out more.
- Separate visual and document hierarchy: Ensure that visual hierarchy is distinct from document hierarchy to maintain clarity.
How does "Refactoring UI" recommend using color?
- Ditch hex for HSL: Use HSL color values for more intuitive adjustments based on hue, saturation, and lightness.
- More colors than expected: Prepare a comprehensive palette with multiple shades for greys, primary, and accent colors.
- Define shades upfront: Establish a fixed set of shades to avoid inconsistencies and maintain a cohesive color scheme.
- Accessible design: Ensure color choices meet accessibility standards without compromising aesthetics.
What does "Refactoring UI" suggest about layout and spacing?
- Start with too much space: Begin with excessive white space and reduce it to achieve a clean and balanced design.
- Establish a spacing system: Use a non-linear scale for spacing and sizing to simplify decisions and maintain consistency.
- Don't fill the screen: Avoid using the entire screen width unnecessarily; give elements the space they need.
- Grids are overrated: Use fixed widths for elements when appropriate, rather than relying solely on fluid grid systems.
How does "Refactoring UI" address typography?
- Establish a type scale: Define a type scale with a range of font sizes to ensure consistency and speed up decision-making.
- Avoid em units: Use px or rem units for font sizes to maintain consistency across different contexts.
- Good font selection: Choose fonts with multiple weights and optimize for legibility, especially for UI text.
- Line length and alignment: Keep line lengths between 45-75 characters and align text for readability.
What are some design systems recommended in "Refactoring UI"?
- Color systems: Define a comprehensive color palette with multiple shades for each color to maintain consistency.
- Typography systems: Establish a type scale with specific font sizes and weights to streamline text styling.
- Spacing systems: Use a non-linear scale for spacing and sizing to simplify layout decisions.
- Shadow systems: Define a set of shadows to convey elevation and depth consistently across the UI.
How does "Refactoring UI" suggest creating depth in design?
- Emulate a light source: Use light and shadow to create the illusion of depth, making elements appear raised or inset.
- Shadows for elevation: Use shadows to position elements on a virtual z-axis, enhancing the sense of depth.
- Flat design depth: Even in flat designs, use color and solid shadows to convey depth without relying on gradients or textures.
- Overlap elements: Create layers by overlapping elements, adding a sense of depth and complexity to the design.
What does "Refactoring UI" say about working with images?
- Use high-quality photos: Choose professional or high-quality stock photos to enhance the design.
- Consistent text contrast: Ensure text on images maintains consistent contrast for readability.
- Intended size for images: Use images at their intended size to avoid quality loss and maintain clarity.
- User-uploaded content: Control the shape and size of user-uploaded images to maintain layout integrity.
What are the best quotes from "Refactoring UI" and what do they mean?
- "Start with a feature, not a layout": Focus on designing specific features first to gather necessary information for layout decisions.
- "Hierarchy is everything": Establishing a clear visual hierarchy is crucial for making interfaces intuitive and user-friendly.
- "Limit your choices": Define systems for design elements to reduce decision fatigue and maintain consistency.
- "Accessible doesn’t have to mean ugly": Ensure designs meet accessibility standards without compromising aesthetics.
