أفضل الصحابة لـ UX Designer لـ Sketch

مجموعة أدوات مليئة بالكفاءة

الآن ، أعتقد أنه يمكننا أن نتفق جميعًا على أن Sketch هي أفضل أداة تصميم في السوق. بصرف النظر عن تقديم أحد أبسط نماذج التفاعل التي مررت بها على الإطلاق (لقد تحولت من Fireworks إلى Sketch حرفيًا بين عشية وضحاها عندما حصلت على MacBook الأول في عام 2014 ... لقد كان وقتًا مظلمًا في أيام Windows الخاصة بي ، لكنه بالتأكيد حرف مدمج).

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

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

رسم أسرع وأكثر كفاءة

هذا هو سحر الإضافات. تتكامل بعض الإضافات بشكل جيد مع المفاتيح الساخنة ، والبعض الآخر لديه واجهات كاملة داخل Sketch.

رسم عداء من روي فان روجين (وفريق!)

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

إعادة تسمية الطبقات بواسطة Rodrigo Soares

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

الحرفية عن طريق InVision

أستخدم بشكل أساسي Craft Data لسحب بيانات العينة ، و Craft Sync لدفع النماذج بالحجم الطبيعي إلى InVision حتى يمكن عرضها باستخدام Inspect (المزيد حول ذلك لاحقًا).

Nudg.it بواسطة أنتوني كولورافيشي

إذا كنت تستخدم شبكة 8 بيكسل لواجهتك (والتي يجب عليك) ، فأنت بحاجة إلى هذه الأداة تمامًا. يتيح لك تغيير ما هي الزيادات الصغيرة والكبيرة من أجل الدفع في Sketch (القيم الافتراضية هي 1 بكسل و 10 بكسل على التوالي). لقد ولت الأيام التي كنت فيها SHIFT-Arrow Right ، ثم Arrow Left + Arrow Left لنقل كائن إلى اليمين بحلول 8px. لا يمكنني التفكير في أداة أكثر بساطة أنقذتني عددًا كبيرًا من النقرات المزعجة في الرسم من هذه النقرة.

تخطيط تلقائي بواسطة Anima App

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

مشاركتها مع أصحاب المصلحة

أعجوبة بواسطة الأعجوبة

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

تحقق من هذا المشروع هنا.

أسرع التنمية Handoff

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

Zeplin بواسطة Zeplin

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

فحص InVision بواسطة InVision

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

تنشيط واجهة المستخدم الخاصة بك

القرار الرئيسي الذي يجب اتخاذه هو مدى التعقيد الذي تريده للرسوم المتحركة الخاصة بك. أنا أسرد خيارين هنا للبساطة وأكثر تقدمًا. لاحظ أيضًا أنني أترك برنامج رسوم متحركة كامل مثل After Effects و Flash (lol jk) والتي لم يتم دمجها جيدًا في سير عمل تصميم المنتج.

مبدأ دانيال هوبر

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

FramerJS بواسطة فريق Framer

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

إدارة الموارد

IconJar

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

ببساطة الموارد الخاصة بك

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

الرموز

  • Google Material Icons - لمشاريع MD ، هذه هي المجموعة الرئيسية.
  • أيقونات Nova - مجموعة كبيرة من الرموز ذات طابع MD.
  • Nucleo - مجموعة متنوعة ومتنامية من الرموز التي تأتي كتطبيق أصلي يمنحك التحكم في نصف القطر واللون والحجم.
  • Magicons - مجموعة أصغر ولكنها رائعة كقاعدة لمعظم التطبيقات.

الخطوط

اختيار الخطوط لـ UI Design ليس بالضبط عملية صاروخية لأنه يجب عليك فقط اختيار sans-serif مقروء ومتعدد الاستخدامات ، والذي يجب أن يعمل على الأزرار والملصقات والرؤوس وما إلى ذلك. سأتجنب سرد TypeKit Fonts هنا بسبب ، بصراحة ، هناك العديد من الأشكال الدقيقة للخطوط التي تناسب الفاتورة. تعمل خطوط Google المجانية أدناه عادةً لمعظم مشاريعك.

  • Roboto - هذا خط رائع ولكنه مرتبط جدًا بتصميم المواد ، لذلك قد يكون من الصعب استخدامه خارج المشروعات القائمة على MD.
  • بلا بلا - الخط الأكثر تنوعا من حفنة. كان هذا في الموضة لسنوات ولم تظهر أي علامات على التباطؤ. لديها الكثير من الأوزان لجميع احتياجات واجهة المستخدم الخاصة بك.
  • لاتو - لا أستخدم هذا في كل نوع من أنواع التصميم لأنه يحتوي على بعض الخطوط الرفيعة التي لا تظهر دائمًا بشكل جيد. إنه أنيق ويمكن أن يكون رائعًا للرؤوس بخط مختلف يستخدم لعناصر تحكم واجهة المستخدم.
  • المقصورة - تقريبًا متعددة الاستخدامات مثل بلا مفتوحة وليس تقريبًا في كل مكان.
  • مونتسيرات - ليست متعددة الاستخدامات لكنني أستخدمها في الغالب في إطارات الأسلاك. إنه مناسب تمامًا للمفاهيم أو التطبيقات ذات طابع أنعم.
  • Nunito - خط جديد من Google يبدو وكأنه نسخة مجانية من Proxima Nova Soft للوهلة الأولى
  • Jaldi - أسلوب يكفي لإعطاء واجهة المستخدم الخاصة بك بعض الذوق. كما أنه يجعل جيدا في أحجام صغيرة.

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

عندما لا أكون في وضع متوسط ​​، أعمل على أدوات Sketch في UX Power Tools لتجعلك مصممًا أفضل وأكثر فاعلية. تابعنا على Twitteruxpowertools. اتبعني أيضًا إذا كانت الروح تنقلك!