الانتقال من Lo-fi إلى Hi-fi في إصدار معاينة Adobe XD

“هل من الممكن الانتقال من التصميمات منخفضة الدقة وهندسة المعلومات إلى التصميمات عالية الدقة؟” قبل أسبوع من إطلاقنا أول معاينة لـ Adobe Experience Design CC ، طرح أحد الأشخاص هذا السؤال حول المنتج على Twitter ، وقد جعلني ذلك أتوقف وأفكر. السؤال ، بالطبع ، هو ما يميز UX وبقية عالم التصميم. كما شاركت في منشور مدونة (حسنًا ، لقد كان خرفًا) منذ عام ونصف ، هناك الكثير من الأشخاص الذين يعرفون كيفية استخدام Photoshop ، لكن لا يمكنهم شرح سبب وجود العنصر في مكانه.

في المراحل الأولى من Adobe XD ، ارتدى الفريق بأكمله قبعات باحث المستخدم الخاصة بنا وبدأوا في معرفة المزيد حول ما كانت تفعله الصناعة في مساحة UX وتصميم الأجهزة المحمولة. تحدثنا إلى الأشخاص الذين قاموا بإنشاء تفاعلات عالية الدقة باستخدام AfterEffects أو HTML و JavaScript و CSS. تحدثنا إلى مجموعة من الأشخاص الذين أرادوا فقط الصناديق والأسلاك ولا شيء آخر. وبالطبع ، تحدثنا إلى عدد كبير من الأشخاص بينهما ، وكان بعضهم شديدًا حول الطريقة الصحيحة التي يجب أن تتم بها تجربة المستخدم ™.

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

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

لذلك ، ارتديت قبعة عالِمتي ، وسحبت مؤقتًا ، وصممت تطبيقًا.

هذه هي القصة

الخطوة 0: السيناريو

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

نظرًا لأن هذا كان تمرينًا ، فقد كان بإمكاني إنشاء أي تطبيق أريده بشكل أو بآخر. انتهى بي الأمر ببساطة مع الصور الخالية من الملوك التي كانت لدي: صور لنفسي ، الأماكن التي كنت فيها في العامين الماضيين ، وقطتي. فازت القطط بسبب سيطرة القطط على Interwebz ، وعرفت أن التطبيق سينتهي به الأمر إلى مشاركة مدونة.

أدخل تطبيق Shelter Cat الخاص بي ، وهو تطبيق جوال يمكن للأشخاص مقابلة القطط المتوفرة في مأوى قريب (ونأمل أن يتبناها!).

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

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

الوقت الإجمالي: 5 دقائق.

الخطوة 1: الشكل

“أعلم أن تصميم lo-fi يشبه الفستان الأسود الصغير.” جلست مؤخرًا لتناول فنجان سريع مع أشلي كار ، المدربة في الجمعية العامة في سياتل. كانت في مكتبنا لحضور حدث إطلاق Adobe XD على Twitch.tv ، وقد أجرينا محادثة طويلة ومتجولة حول كل شيء من التدريس إلى الأنثروبولوجيا إلى الحيوانات الأليفة. ولكن عندما تحدثت عن تصميم lo-fi ، انقطعت عيناها من الإثارة. “لا يتعلق الأمر باللون بقدر ما يتعلق بالشكل.”

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

كان هناك عدد من الأشياء التي قمت بها لتوفير الوقت في هذه المرحلة من التصميم:

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

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

ثم قضيت عشر دقائق تقريبًا في توصيل التطبيق في وضع النموذج الأولي. من خلال التحول إلى وجهة نظر مختلفة ، تمكنت من التركيز أكثر على تحديد التفاعلات. يدعم Adobe XD حاليًا الشرائح في الاتجاهات الأساسية الأربعة وانتقال الذوبان. يتذكر XD آخر انتقال قمت بتحديده ، لذلك حاولت تجميع أكبر عدد من انتقالاتي من نوع واحد ( على سبيل المثال ، كل الشرائح اليسرى) وتوصيلها بالتتابع. بعد ذلك ، قمت بتغيير نوع الانتقال أثناء توصيل الأسلاك في اتجاه آخر (كل التمرير لليمين) ، وتكرار ذلك من أجل Slide Up و Slide Down و Dissolve.

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

لقد اختبرت تفاعلاتي باستخدام نافذة المعاينة في XD (Cmd-Enter) ، والتي أعطتني ملاحظات كافية لاختبار تفاعلاتي والتأكد من تدفق التطبيق بالطريقة التي أريدها.

الوقت الإجمالي: ساعة و 21 دقيقة

العب بالنموذج الأولي!

تنزيل الملف!

الخطوة 2: نظرة أعمق

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

هناك أمران قمت بهما لتسريع العملية:




صورة GIF متحركة للنموذج الأولي الذي يعمل على هاتفي. لسوء الحظ ، إنها جودة ألوان رديئة بسبب طيف الألوان الأصغر في صور GIF.

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

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

(الإجابة: لم أستطع التوقف عن النظر إلى هذا الوجه. من الجيد أنها ملكي بالفعل)

الوقت الإجمالي : ساعتان ، 35 دقيقة

العب بالنموذج الأولي!

تنزيل الملف!

فرص النجاح والنمو الأولية

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

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

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

المزيد حول Adobe XD:

شكرًا جزيلاً لنارسيسو (نيوجيرسي) جاراميلو وليندسي مونرو ودان روس وأندرو شورتن لدعمهم التحريري في هذا المنشور.