مجال عالم التصميم مجال عالم التصميم
recent

آخر الأخبار

recent
random
جاري التحميل ...

كيفية تصميم مع المطورين


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

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











ء نماذج بالأحجام الطبيعية مطهرة أن أي شخص يمكن أن نفهم. في الواقع، يجب عليك حتى الحفاظ على دليل أسلوب ليكون بمثابة توثيق لكل مشروع.
Screen Shot 2015-10-20 at 15.54.44
ائتمانات الصورة: OpenSourceWay. المشاع الإبداعي

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

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

اتبع النظافة مناسب ل التصميم المرئي
كمصمم، كنت من المتوقع الواضح لخلق تصاميم عالية الجودة مسطحة وتفاعلية، ولكن يؤثر على طريقة التسليم وجودة التنفيذ النهائي. عندما يتعلق الأمر إلى نظافة تصميم، تأكد من أنك تفكر في ما يحتاج المطورين (وليس فقط تفضيلات التنظيمية الخاصة بك).
Screen Shot 2015-10-20 at 15.56.00
تصوير: بريت الأردن. المشاع الإبداعي.

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

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

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

يمكن للمصممين معرفة كيفية خلق أنماط UI قابلة لإعادة الاستخدام (وصولا الى مكونات ذرية مثل العلاجات زر والتسميات)، في حين يكون للمطورين قائمة مرجعية بصرية سريعة وحتى يمكن تسريع تنفيذها إذا كان دليل أسلوب يتضمن مقتطفات الشفرة التي يعاد استخدامها.
Screen Shot 2015-10-20 at 15.56.42
المصدر: أوبونتو

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

وهنا بعض الفوائد من إنشاء دليل نمط:

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

في الواقع، يمكنك أن تأخذ HTML الأمامية أسلوبك دليل خطوة أبعد من ذلك وجعله دليل على غرار حي يقوم بتحديث بنشاط كود موقعك كما يمكنك تعديل دليل الاسلوب. للمطورين والمصممين، وأدلة نمط الحية بالتالي فهي أقل من وثيقة منفصلة تتطلب صيانة والمزيد من خطوة الضام للتصميم التكرار.
Screen Shot 2015-10-20 at 15.57.22
مصدر: لونلي بلانت
من ناحية أخرى، وأدلة نمط PDF ليست كما مفيدة في صفحة ويب والسياق المحمول - أنت عادة ما نراهم استخدامها لمشاريع مثل المجلات، والإعلانات، وإنتاج الفيديو و / أو استوديوهات الرسوم المتحركة. تتطلب أدلة PDF أيضا الموارد الرقمية ولكن عادة تخزين they'are في ملفات الرمز البريدي أو نسخها إلى الأقراص المدمجة / ملفات ISO.
Screen Shot 2015-10-20 at 15.57.45
المصدر: أدوبي

في حين أدلة PDF يمكن أن يكون من الصعب الحصول عليها، وهناك الكثير من نمط HTML أدلة التي يمكن العثور عليها على الانترنت. نلقي نظرة خاطفة على هذه الأمثلة دليل على غرار الأمامية لنرى كيف أنها مصممة وكيفية تنظيم المحتوى على كل صفحة.

قبل WooThemes - جمال دليل على غرار قبل WooThemes 'هو أن يشعر كل شيء متصلا وrelatable منذ في جميع على صفحة واحدة.
MailChimp - واجهة هذا دليل على غرار هي مستساغة على كل من المصممين والمطورين. الأمثلة الحية ومقتطفات الشفرة إبراز طبيعة التدفق الحر للتسلسل الهرمي محتوى هذا الدليل ل.
هارد - يتم تكثيف المعلومات معا ومرئية من صفحة واحدة مع تأثيرات تحوم الحيوية.
CSS التمهيدي - جميع المحتوى هو منظم بشكل كبير والقائمة العمودية مما يجعل التصفح سريع وفعال.
لونلي بلانت - نسخة أنيقة من الناحية الفنية من دليل نمط العيش يقوم بتحديث الموقع عن طريق مكالمة API.
Mapbox - دليل أسلوب Mapbox يضم كل شيء من الأنماط CSS إلى الرسوم المتحركة، وحتى تعليمات للنسخة الصفحة الكتابة.
إذا كنت تبحث عن مزيد من الأمثلة، نلقي نظرة على StyleGuides.io التي لديها معرض كبير من الأدلة على شبكة الإنترنت (سواء أدلة على غرار HTML التقليدية والمزيد من الأدلة المتطورة نمط العيش).

أفكار حصة مع دليل نمط
أدلة على غرار هي مفيدة أيضا للمصممين وغير المصممين.

يمكن للمطورين الاستفادة الكاملة من هذه الأدلة لأنهم مثل الوثائق للموارد التصميم. وتغطي أفضل الأدلة النمط فقط ما هو ضروري من خلال توفير التوجيه لأحد من التنمية إلى التسويق وحتى إدارة.
Screen Shot 2015-10-20 at 15.58.11
المصدر: Atlassian التصميم

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

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

عند إنشاء دليل نمط، والنظر في المواضيع التالية:

أنماط شعار - حجم السليم، والألوان، والتنسيب، المساحة البيضاء، وتحديد المواقع للشعار. وتشمل تصاميم شعار البديلة والتمائم الرموز / العلامة التجارية إذا لزم الأمر.
أنظمة الألوان - قائمة كل خيارات الألوان وكيفية ارتباطها التصميم. تضمين رموز مرجع هذه الألوان في أي RGB، CMYK، أو PANTONE®.
الملاحة - تشمل جميع القواعد المتعلقة بالملاحة، مثل استخدام صناديق البحث، الجانبية، وصلات (إن لم تكن مشمولة في قسم الطباعة)، والقوائم والقوائم المنسدلة (أي ما هي مجموعة مناسبة من البنود التي تشمل).
الخطوط - قائمة التي تناسب المحارف في تصميم والذي المواقع. في محاولة لتشمل مخطط شخصية لجميع الحروف من الألف إلى الياء، من الألف إلى الياء، 0-9، والرموز. يجب أن الخطوط التي تتطلب الترخيص تتضمن روابط لمسابك الخط على الانترنت.
الرسومات - تضمين أي الرسومات ذات الصلة لهذه العلامة التجارية مثل الرموز، الأزرار، الرموز، رموز المفضلة والخلفيات tileable، أو ناقل الفني. إذا تم سرد هذه العناصر في دليل نمط ومن المؤكد أن مرجع حيث توجد ملفات PSD / AI الفعلية في قاعدة البيانات سحابة أو الخادم. أيضا، تأكد من وصف تفاصيل التنفيذ: على سبيل المثال، والمحاذاة والموقف من الصور، وكيفية تراكب النص على الصور، الخ
تخطيطات - طباعة وأدلة نمط الويب غالبا ما تشمل القوالب عينة للشبكات، والهوامش، وتركيبات مختلفة.
كود قابلة لإعادة الاستخدام - لم يكن لديك رمز ليكون القسم الفردي (يمكنك إرفاق قصاصات في الأقسام ذات الصلة). وينبغي أن تتضمن أدلة على غرار كل الطبقات CSS ومعرفات في العينات المتكررة. من الناحية المثالية، ينبغي أن مطوري تكون قادرة على نسخ ولصق ما يحتاجون إليه.
الهوية والشخصية (إضافات) - تشمل التفاصيل المتعلقة صوت ونبرة نسخة، وشخصية التصميم العام، وشيء آخر أن يصف الهدف العاطفي الكلي وراء تصميم.
وأكبر فريق المنتج الخاص بك، وأكثر فأنت تريد دليلا على غرار مفصل كنقطة تجمع للمصممين والمطورين (الذي يأتي حقا في متناول اليدين في حين أنها قد لا تعمل حتى في الطابق نفسه بعد الآن). في بعض الحالات، قد تفضل لبناء أدلة منفصلة تتعلق كل مجال من مجالات التصميم (مثلا: الطباعة، طباعة، الويب، الخ).

خذ الفائدة في التنمية
إذا قمت بتصميم الواجهات، ثم كنت في الأعمال التجارية من خلق تصاميم قابلة للاستخدام. حتى لو كنت لا نتوقع أن نتعلم التنمية، انها لا تزال فكرة جيدة أن تأخذ مصلحة في هذه العملية. في حين قد لا يكون الرسغ عميق في التعليمات البرمجية، كنت لا تزال تعمل في حقل يتطلب ترميز.
Screen Shot 2015-10-20 at 15.58.35
تصوير: مايكل كوغلان. المشاع الإبداعي.

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

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

قياسا على آخر يأتي من هذا السؤال UX المكدس مناقشة قيمة مصمم UI / UX تعلم جافا سكريبت:

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

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

ثم عليك أن تكون قادرا على صياغة أفكار وتصميم أكثر تحديدا وينقل لهم في لهجة الأم أن المطورين فهم.

دعونا نلقي نظرة على عدد قليل من الطرق لفهم تطور كمصمم وكيفية توصيل الأفكار صديقة للمطور.

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

عند تصميم نماذج بالأحجام الطبيعية يجب أن تكون قادرة على "رؤية" كيف يمكن أن تكون builtfrom منظور المطور. على سبيل المثال، يتم إنشاء حقل الإدخال باستخدام علامة HTML ونصب مع CSS.

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

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

كيف يتم تداخل علامات HTML وتقديمها في المتصفح
أساسيات CSS وكيف يختلف عن HTML
كيفية استخدام خصائص CSS لخلق تأثيرات مثل الظلال مربع
العناصر التي يمكن إنشاؤها باستخدام النقي CSS مقابل التي تتطلب عناصر الصور
كيفية عمل نقاط التوقف في تخطيطات الموقع تستجيب
Screen Shot 2015-10-20 at 15.59.25
تصوير: UXPin
إذا كنت تحب تصميم UX، ثم انها فكرة جيدة للتوسع في جافا سكريبت كذلك. أنت لا تحتاج إلى فهم كيفية كتابة المتغيرات أو وظائف، ولكن يجب أن تعرف قليلا عن كيفية تفاعل جافا سكريبت مع عناصر HTML على الصفحة.
التواصل الأفكار ديف ودية
يمكن أن نتحدث عن أفكار واحدا من الجوانب الأكثر إرباكا في العملية الإبداعية - لكنه لا يحتاج أن يكون بهذه الطريقة.
ويجب أن توصف أفكار صديقة للمطور بطريقة عملية. طريقة براد فروست من تصميم الويب الذري (يتألف من خمسة مستويات من الذرات إلى إكمال صفحة) ينهار كل واجهة إلى كتل بناء منطقية.
بهذه الطريقة، يمكن لك أن تشرح الكيفية التي ينبغي للمستخدمين التفاعل مع كل كتلة على حدة، وكيف تؤثر هذه التفاعلات عناصر أخرى على الصفحة.
Screen Shot 2015-10-20 at 15.59.42
تصوير: بهاسكار Pedapati، جميل.
معظم المطورين هي قادرة على إلقاء نظرة على واجهة حية وفهم كيف يعمل. نوصي دائما شرح أفكارك مع أمثلة حية لمساعدة مطوري أفضل تصور كيف تبدو واجهة النهائية وسلوك.
وبما أن معظم المطورين يعرفون كيفية إعادة أي واجهة من الصفر، والأمثلة الحية على تحسين الفهم والاحتفاظ معدل للمناقشات في المستقبل.
في UXPin، على سبيل المثال، هل يمكن أن ترسل وصلة معاينة النموذج الخاص للمطورين لردود الفعل الفورية. لشرح تصميم، يمكنك التعليق إما عناصر محددة أو الأفضل من ذلك، مجرد عقد الإفراط في الكتف جلسة سريعة لمراجعة أي نقطة الألم الممكنة.
Screen Shot 2015-10-20 at 16.00.08
لمعرفة المزيد، ونحن نوصي هذه القطعة من قبل مجلة التحطيم الذي يتناول بالتفصيل 6 نصائح عملية للتواصل مع المطورين.

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

قمنا بتجميع بعض من الأدوات المفضلة لدينا أدناه.

رسومات Google - الملاحظات البصرية وأفكار يمكن أن تنظم في وقت واحد مع جوجل رسومات. هذا البرنامج المساعد يعمل في كروم ولكن يمكن أيضا أن تعمل حاليا دون الوصول إلى الإنترنت. هذا ويمكن أيضا التعادل في Google Drive لتبادل الأفكار مع أعضاء الفريق الآخرين.
قفص التطبيق - لوحة القيادة التطبيق في عمق يوفر كل شيء لإدارة المشروع على نحو سلس. يمكن للفرق مشاركة الملفات والتعليقات خلال كل مرحلة من مراحل العملية في حين أن البقاء ما يصل إلى موعد مع أحدث التغييرات.
UXPin - يسمح لانخفاض فاي لتصميم عالية فاي في أداة واحدة، تتحول إطارات شبكية إلى النماذج بسهولة، يتكامل مع فوتوشوب ورسم، ويدعم في التطبيق اختبار قابلية الاستخدام، ويسمح للتعاون سهلة وشارك في إنشاء فرق بين.
الركود - فرق كبيرة تحتاج إلى أدوات التواصل كبيرة. الركود هو أحد هذه الأدوات التي تتمحور حول الاتصالات القرن ال21 بين فرق إبداعية. يتم حفظ جميع سجلات الدردشة والبحث من لوحة القيادة على شبكة الإنترنت وتطبيقات الجوال الملكية.
Trello - العديد من الفرق والأفراد تعتبر Trello أفضل وسيلة مهمة إدارة الحرة. إعداد جداول المواعيد والمسؤوليات سهم، ترك تلاحظ، وإدارة المشروع كافة ملفات في نفس لوحة القيادة - مجانا!
أسانا - أسانا هو أداة أكثر تفصيلا إدارة المشاريع. برنامجهم يتكامل مع جميع الهواتف الذكية، ويشمل الدعم لفرق متعددة مع مشاريع متعددة.
Conceptboard - أي وقت مضى بحاجة لوحة الصفر عبر الإنترنت لتدوين الملاحظات؟ يوفر Conceptboard مساحات تفاعلية مع العناصر القابلة للسحب وتعليق متعدد المستخدمين. انه لشيء رائع في كل شيء من العصف الذهني في وقت مبكر إلى العروض النهائية.
لف
عند العمل على مشاريع مؤسسة كبيرة وينبغي أن يشارك الجميع في الفريق في جميع مراحل خلال العملية برمتها. أفضل طريقة لتحقيق التعاون السلس من خلال استخدام الأدوات والمصطلحات relatable.

كل مصمم يجب أن يطلعوا على عملية التنمية. معرفة أساسية لكيفية سير اجهات حقا يمكن أن تحسن نوعية نماذج بالأحجام الطبيعية التصميم.

وبالمثل ينبغي أن تصبح المطورين دراية أدلة لغة التصميم وأسلوب لتوصيل أفكارهم بصريا.

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


المصدر: من هنا

عن الكاتب

ABDALRHIM ALSARSOUR

التعليقات


اتصل بنا

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

جميع الحقوق محفوظة

مجال عالم التصميم