تحسين ملفات الرسم: الدروس المستفادة من إنشاء التطبيق المصغر (دراسة حالة)

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

لنكن صادقين: ليست ملفات التصميم هي التي تصبح أكبر بفعل السحر. المصممون هم من يملأون ملفاتهم بعناصر غير مستخدمة وغير محسّنة ومخفية تأخذ مساحة غير ضرورية.

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

كما يفعل أي مهندسين آخرين ، قررنا كتابة نص صغير ينظف ويحسن ملفات Sketch تلقائيًا.

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

النموذج الأول

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

1. لدينا بالفعل إطار عمل داخلي لتطبيقات شريط القوائم ، مع تنفيذ الكثير من الوظائف المخصصة. لإعطائك بعض المعلومات الأساسية: منتجنا الأساسي ، تطبيق Flawless ، هو تطبيق شريط قوائم يقارن التصميم المتوقع مع تنفيذ المطور في الوقت الفعلي. تم بناء هذا الإطار الداخلي لمنتجنا الأساسي.
2. يمكنك استخدام تطبيق شريط القوائم حتى عندما لا يكون Sketch مفتوحًا.
3. كان تطوير تطبيق macOS أصلي بالنسبة لنا أسرع بكثير من المكون الإضافي Sketch مع CocoaScript (بسبب تجربتنا السابقة).

كان من الضروري أيضًا منح المستخدم القدرة على تبديل خيارات التحسين المختلفة لملفات مختلفة.

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

الدرس المستفاد # 1

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

لوحة الألوان والطباعة

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

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

الصف الأول مخصص لألوان النص (بالإضافة إلى الخلفية الفاتحة في البداية). الصف الثاني لألوان التمييز. تم اشتقاق جميع الألوان من لون أساسي واحد من خلال تطبيق قواعد بسيطة لنظام ألوان HSB (يشير H إلى تدرج اللون و S للتشبع و B للسطوع).

لنفترض أن لدينا اللون الأساسي # 4A90E2 (أزرق) ، وهو (212 ، 67 ، 89) في HSB. للحصول على لون أغمق قليلاً ، نحتاج إلى تقليل السطوع وزيادة التشبع وتحريك الصبغة قليلاً. إذن ، نحصل على # 2477C9 ، وهو (210 ، 82 ، 79) في HSB. لقد استخدمت نفس الأسلوب لجميع الألوان الأخرى.

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

الدرس المستفاد # 2

كانت الألوان دائمًا صعبة بالنسبة لي. عادة ما أقضي الكثير من الوقت في العثور على اللون المناسب. فيما يلي بعض الموارد التي أستخدمها يوميًا تقريبًا لمساعدتي في استكشاف الألوان:

• يمكن أن يساعدك Adobe Kuler في العثور على رفيق لون لأي لون.
• Khroma هي أداة قائمة على الذكاء الاصطناعي لإنشاء لوحات الألوان بناءً على تفضيلاتك.
• مقالة إريك كينيدي ، "اللون في تصميم واجهة المستخدم: إطار (عملي)" جوهرة خالصة. قرأته منذ حوالي ثمانية أشهر ، ومنذ ذلك الحين استخدمت نظام ألوان HSB أكثر من نظام الألوان RGB في Sketch.

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

الدرس المستفاد # 3

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

أول تكرار للتصميم

لقد بدأت مما رسمته بالضبط في الإطار السلكي الأولي. هذا هو التدفق العام للمستخدم في التطبيق:

1. قم بسحب وإسقاط ملف Sketch.
2. اختر خيارات التحسين.
3. تصغير الملف المحدد.
4. احفظها.

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

الدرس المستفاد # 4

إذا لم تكن قد صممت أي شيء لنظام macOS من قبل ، فقم بالتأكيد بإلقاء نظرة على Facebook Desktop Design Kit. ستجد جميع عناصر macOS UI الشائعة هناك. وسوف يمنحك إحساسًا بالأحجام والإزاحات لعناصر واجهة المستخدم. بالنسبة لتطبيق شريط قوائم macOS ، فإن حجم الخط من 12 إلى 14 نقطة أمر طبيعي تمامًا.

المشكلة رقم 1: الحالة المفقودة

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

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

الدرس المستفاد # 5

قبل إرسال تصميمك إلى المطورين ، تأكد من أنك لم تنس أي شيء. تأكد من أنك حددت جميع الولايات ، حتى لا يسألك المطورون لاحقًا ، "كيف يجب أن يبدو هذا في [بعض الشروط الخاصة]؟" طريقة جيدة للعثور على هذه الأنواع من الحالات المفقودة هي استخدام أداة النماذج الأولية. حتى الآن ، يعد المكون الإضافي Craft for Sketch (الذي تم إنشاؤه بواسطة Invision) ، مع ميزة النماذج الأولية ، أسرع طريقة لإجراء مثل هذا الاختبار.

المشكلة رقم 2: عدد كبير جدًا من العناصر المخصصة

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

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

الدرس المستفاد # 6

للتعرف على العناصر الافتراضية لكل منصة ، أقترح النظر في هذه المواد:

• iOS: Apple UI Design Resources ، المتاحة لـ Sketch و Photoshop و Adobe XD
• Android: Material Design Kit
• نظام التشغيل macOS: Facebook Desktop Kit

المشكلة رقم 3: التركيز غير كافٍ في النهاية

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

الدرس المستفاد # 7

نستخدم Slack كمكان رئيسي للتواصل. Send to Slack هو مكون إضافي صغير يشارك لوحة فنية من Sketch مباشرة إلى قناة Slack. لقد كان مفيدًا حقًا لجلسات تعليقات الفريق. شارك أكثر ، شارك كثيرًا.

المشكلة رقم 4: تفاصيل صغيرة كبيرة

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

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

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

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

الدرس المستفاد # 8

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

تحضير التصميم من أجل التطوير

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

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

الدرس المستفاد # 9

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

الشعار والاسم

أخيرًا وليس آخرًا ، جاء اسم تطبيقنا بسرعة كبيرة. خطرت في بالي كلمتين: "تقليل" و "تقليص". لقد تحققت من Product Hunt ، وكان "shrink" قيد الاستخدام بالفعل ، لذلك اخترنا "تقليل".

كان الشعار صراعًا حقيقيًا بالنسبة لي. نظرًا لأنه تطبيق شريط القوائم ، كان علي إنشاء رمز لشريط القائمة أولاً.

نظرًا لأن رمز شريط القائمة يجب أن يكون 16 × 16 بكسل ، فمن الأفضل عدم استخدام أي عناصر صغيرة. يجب أن يكون الرمز مميزًا ومقروءًا في نفس الوقت.

بعد عدة أيام من القتال بأشكال بسيطة ، استسلمت وفتحت قسم "المميز" في خطوط Google. كنت أبحث عن خط منحني لطيف يناسب الشعار (بالإضافة إلى رمز شريط القائمة). في النهاية ، ظهر خط Pacifico ، وكان مثاليًا لتحقيق أهدافنا.

الدرس المستفاد # 10

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

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

خاتمة

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

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

فيما يلي ملخص للأشياء التي تعلمناها في إنشاء تطبيق Reduce:

• فكر في أهداف المنتج وحالات الاستخدام قبل عمل أي إطارات سلكية أو نماذج أولية.
• استخدم أداة مثل Adobe Color و Khroma لاختيار لوحة الألوان المناسبة بشكل أسرع. سيساعد أيضًا الفهم الأساسي لنظام الألوان HSB.
• لا تخف من تجربة الخطوط المخصصة.
• كل منصة لها مجموعة معاييرها الخاصة. تعلمهم قبل التصميم.
• استخدم أداة النماذج الأولية للتعرف على التدفق الكامل.
• لا تربك تصميمك بالعناصر المخصصة. في بعض الأحيان يكون من الأفضل التمسك بضوابط التحكم الافتراضية للمنصة المحددة.
• احصل على تعليقات على تصميمك في أقرب وقت ممكن.
• اجعل المطورين يشاركون في أقرب وقت ممكن. يمكنك الحصول على الكثير من الأفكار القيمة حول العناصر الوظيفية وحول مقدار الوقت المستغرق لتنفيذ "زر التدرج الصغير مع الرسوم المتحركة الحلزونية".
• استخدم شبكة قياسية لمنصة لضبط جميع العناصر. سوف يشكرك المطورون على ذلك لاحقًا.
• اختبر التصميم الخاص بك لحالات الاستخدام المختلفة (مثل شريط القوائم الفاتح والداكن) قبل إنهاء واجهة المستخدم.

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