أدوبي تجربة تصميم الحيل والنصائح والتقنيات

01 من 07

أدوبي تجربة تصميم الحيل والنصائح والتقنيات

يقدم لك Adobe Experience Design عددًا من ميزات الرسومات التي تسمح للإبداع الخاسر أن يفتقد.

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

لكن أولاً ، قد تتساءل عن المقصود بالبرمجيات Prototyping Software. من بين اللاعبين الرئيسيين في هذا المجال Proto.io و Principle و UXPin و Atomic.io و Experience Design و InVision . بخلاف التطبيقات مثل Sketch 3 و Photoshop و Illustrator حيث يتم إنتاج تصميمات ثابتة ، يقدم هؤلاء المحررين الرسومية التفاعلية والحركة والميزات الأخرى الشائعة في مساحة تصميم الهاتف المحمول والإنترنت.

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

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

في الواقع ، أصبح هذا البرنامج عنصرا أساسيا في بيئة تصميم وتطوير النماذج الأولية السريعة (Rapid Prototyping).

مع ذلك ، دعنا نحصل على بعض المرح مع تصميم التجربة.

02 من 07

إنشاء دبوس الوجهة مع دائرة بسيطة في تصميم تجربة أدوبي

قدرات ناقلات تصميم تجربة جعل أيقونة وإنشاء عنصر واجهة نسيم.

جانب واحد أنيق من XD هو استخدامه لأدوات الرسم المتجه. لا يمكن العثور على رمز؟ ليس هناك أى مشكلة. لفة بنفسك. إليك الطريقة:

  1. حدد أداة Ellipse و ، مع الضغط على مفاتيح Option / Alt-Shift ، ارسم دائرة.
  2. مع تحديد الدائرة ، اضبط لون التعبئة على FF0000 والحدود على "بلا" في الخصائص.
  3. انقر نقرًا مزدوجًا فوق الدائرة لإظهار نقاط الربط. اسحب المرساة السفلية إلى أسفل.
  4. انقر نقرًا مزدوجًا فوق نقطة الربط المحددة ويتم استبدال المنحنيات بخطوط.
  5. ارسم دائرة صغيرة أخرى بملء أبيض وبدون طعم. حركه في الموضع وحدد الدبوس والدائرة. في لوحة Align في الجزء العلوي من الخصائص ، انقر فوق الزر Horizontal Center وتم إنشاء Pin.

03 من 07

خلق خلفية طمس في تصميم تجربة أدوبي

خلق طمس الخلفية في XD باستخدام أي شيء أكثر من شكل وصورة /.

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

  1. إنشاء لوحة فنية جديدة وإضافة صورة الخلفية الخاصة بك.
  2. حدد أداة المستطيل a nd ارسم مستطيلاً فوق الصورة. عند تحديد المستطيل ، عيّن Fill to White و Stroke to None.
  3. عند تحديد المستطيل ، حدد Background Blur في لوحة الخصائص. الشرائح الثلاثة هي Blur Amount ، Brightness و Opacity. إليك ما يفعلونه:

إذا كنت تريد فعلًا "تبديل الوضع" ، فغيّر لون الشكل واللعب باستخدام قيمة العتامة لتغيير "مظهر" الصورة.

04 من 07

قم بإنشاء Scrim في Adobe Experience Design

استخدم تدرجات لظهور التباين عند حصول الصور والألوان على عناصر الواجهة.

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

  1. أنشئ لوحة فنية في XD ، وأضف صورة وانسخ عناصر واجهة من مجموعة واجهة المستخدم المناسبة - ملف> Open UI Kit … - في لوح الرسم. في الصورة أعلاه ، تجعل الصورة شريط الحالة ومن الصعب رؤية شريط التطبيقات.
  2. حدد أداة المستطيل واستخلاص مستطيل. في لوحة الخصائص ، حدد تعبئة وحدد Gradient من القائمة المنبثقة في Color Picker. اضبط ألوان التدرج على الأسود والأبيض. عيّن القيمة A - عتامة - إلى 60٪ وقيمة A الأبيض إلى 0٪.
  3. عند تحديد المستطيل ، حدد كائن> ترتيب> إرسال للخلف . تظهر عناصر الواجهة الآن فوق الصورة.

05 من 07

إنشاء صورة شخصية في تصميم Adobe Experience

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

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

  1. تبدأ بصورة ودائرة أو شكل آخر على لوح الرسم. يمكنك ملء الدائرة بأي لون. ما لا تحتاج القيام به هو إضافة لون ضربة. سوف تختفي عندما تنشئ التأثير ، فلماذا تزعج نفسك. إذا كنت بحاجة إلى حجب الدائرة ، فقم بنسخها إلى الحافظة.
  2. حرك الدائرة إلى الصورة وحدد كل من الصورة والدائرة. مع تحديد كائنات bot ، حدد Object> Mask with Shape . عندما تحرر الماوس ، يتم إنشاء الصورة الرمزية. من هناك يمكنك تغيير حجمها.
  3. إذا كنت بحاجة إلى إضافة ضربة ، فاضغط على الدائرة الموجودة في الحافظة على لوح الرسم. مع اختيار نسخة إيقاف التعبئة في خصائص وإضافة لون وعرض الدماغ. لتمييزهم ، حدد كلاً من الكائنات وانقر فوق الأزرار Center Align في خيارات Align أعلى لوحة الخصائص.
  4. إذا كنت تريد تحريك الصورة في القناع ، فانقر نقرًا مزدوجًا فوق القناع. سيؤدي ذلك إلى إظهار الصورة وشكل القناع. انقر على الصورة واسحبها إلى موضعها. عندما تحرر الماوس ، ستكون الصورة في موضعها الجديد داخل القناع.

06 من 07

العب مع Adobe Design Design Artboards

التوجه والألوان المخصصة والتمرير الرأسي هي ميزات فنية أنيقة.

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

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

07 من 07

تحرير مجموعة واجهة مستخدم الجوال في تصميم Adobe Experience

مجموعات واجهة المستخدم قابلة للتعديل بالكامل.

يحتوي تصميم الخبرة على مجموعة أدوات واجهة المستخدم لتطوير iOS و Android و Windows UI. عند فتحهم لأول مرة ، قد تعتقد أنهم في وضع جيد. ليس تماما - كل من القطع والقطع في تلك المجموعات قابلة للتحرير بالكامل. دعونا معرفة ذلك عن طريق بناء wireframe أندرويد.

  1. تبدأ بتحديد أداة Artboard واختيار Android Mobile في قسم Google في لوحة الخصائص .
  2. حدد File> Open UI Kit> Google Material . يؤدي ذلك إلى فتح حزمة واجهة المستخدم لتصميم المواد. حدد Magnifying Glass و marquee t وهو الرسم الإرشادي Screen Guides . أود أن أبدأ بهذا الأمر لأنه يعطيني الأدلة لتحديد موضع عناصر الواجهة على الشاشة. إذا قمت بالنقر فوق أحد الأشرطة الزرقاء سترى أنه مؤمن. انقر فوق القفل المرفق بكل منها لإلغاء قفله . ظلل اللوحة الفنية ونسخ التحديد إلى الحافظة. عد إلى المستند والصق الشاشة في لوح الرسم.
  3. انقر مرة واحدة على شريط التطبيق أعلى اللوحة الفنية. لاحظ كيف يمكنك اختياره. حدد Object> Arrange> Bring to Front. اختيارك الآن فوق أدلة الشاشة. يجب أن يخبرك هذا أن كل عنصر من العناصر على الشاشة يمكن تحريره.
  4. انقر نقرًا مزدوجًا على شريط الحالة في الأعلى ، وفي لوحة الخصائص وآخرون لون التعبئة إلى 455A64 . انقر نقرًا مزدوجًا فوق شريط التطبيقات وقم بتعيين التعبئة على 607D8B. يجب أن يخبرك هذا بأنه يمكن تحرير كل عنصر في مجموعة واجهة المستخدم لتلبية مواصفات اللون الخاصة بالمشروع.
  5. ماذا عن الرموز؟ فيما يلي كيفية تغيير لونها. انقر نقرا مزدوجا على القلب لتحديده. إذا نظرت إلى لوحة الخصائص ، قد تفترض أنك لا تستطيع تحرير التحديد. ليس تماما. انقر نقرا مزدوجا فوق القلب مرة أخرى . تفتح الخصائص وتغيير لون التعبئة إلى FF0000. كرر هذه الخدعة مزدوجة النقر المزدوج للرموز المتبقية والنص.