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

01 من 07

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

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

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

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

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

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

مع ذلك ، دعنا نلهو مع تصميم التجربة.

02 من 07

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

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

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

03 من 07

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

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

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

• مبلغ الضبابية: يضبط تشويش الصورة أسفل الشكل. القيمة القصوى هي +50.
• سطوع: يضبط الإبرازات والظلال في الصورة. الحد الأدنى للقيمة هو -50 والحد الأقصى للقيمة هو +50.
• التعتيم: يؤثر على شفافية الشكل ورؤية الصورة تحت الشكل. تتراوح القيم من 0٪ إلى 100٪.

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

04 من 07

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

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

1. قم بإنشاء لوح الرسم الخاص بك في XD ، وأضف صورة وانسخ عناصر واجهة ولصقها من المناسب UI Kit - File> Open UI Kit … - في لوح الرسم. في الصورة أعلاه ، تجعل الصورة شريط الحالة ومن الصعب رؤية شريط التطبيقات.
2. حدد أداة المستطيل واستخراج مستطيل. في لوحة الخصائص ، حدد تعبئة وحدد Gradient من القائمة المنبثقة في Color Picker. اضبط ألوان التدرج على الأسود والأبيض. حدد القيمة A - التعتيم - إلى 60٪ و ال قيمة بيضاء إلى 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لوحة فنية مرشحات الشاشة. أود أن أبدأ بهذا الأمر لأنه يعطيني الأدلة لتحديد موضع عناصر الواجهة على الشاشة. إذا قمت بالنقر فوق أحد الأشرطة الزرقاء سترى أنه مؤمن. انقر فوق القفل المرفق بكل منها لإلغاء قفله. ظلل اللوحة الفنية ونسخ التحديد إلى الحافظة. عد إلى المستند والصق الشاشة في لوح الرسم.
3. انقر مرة واحدة على شريط التطبيق أعلى اللوحة الفنية. لاحظ كيف يمكنك اختياره.حدد Object> Arrange> Bring to Front. اختيارك الآن فوق أدلة الشاشة. يجب أن يخبرك هذا أن كل عنصر من العناصر على الشاشة يمكن تحريره.
4. انقر مرتين على شريط المعلومات في الجزء العلوي وفي لوحة Properties sوآخرون لون التعبئة إلى 455A64. انقر نقرًا مزدوجًا فوق شريط التطبيقات وقم بتعيين التعبئة على 607D8B. يجب أن يخبرك هذا بأن كل عنصر في مجموعة واجهة المستخدم يمكن تعديله لتلبية مواصفات ألوان المشروع.
5. ماذا عن الرموز؟ إليك كيفية تغيير لونها. انقر نقرا مزدوجا فوق القلب لتحديدها. إذا نظرت إلى لوحة الخصائص ، فربما تفترض أنه لا يمكنك تعديل التحديد. ليس تماما. انقر نقرا مزدوجا فوق القلب مرة أخرى. تفتح الخصائص وتغيير لون التعبئة إلى FF0000. كرر هذه الخدعة مزدوجة النقر المزدوج للرموز المتبقية والنص.