Speaker A
هذه واجهة مستخدم لقائمة مهام. وهذا إيصال حصلت عليه من متجر وول مارت المحلي. ولديهما قواسم مشتركة أكثر مما قد تعتقد.
تحليل تصميم واجهات المستخدم المثالية من خلال المحاذاة والحواف والتجميع لتسهيل القراءة والتصفح.
Key Takeaways
- المحاذاة والحواف هي أساس تصميم واجهات مستخدم مريحة وسهلة القراءة.
- التجميع والتنظيم يقللان من الفوضى ويزيدان من سرعة التصفح.
- المرئيات والرموز تعزز الفهم السريع دون الحاجة لقراءة نصوص مطولة.
- إضافة محتوى زائد قد تضر بتجربة المستخدم بدلاً من تحسينها.
- التصميم يجب أن يركز على التمييز البصري لجعل العناصر المهمة بارزة.
What the video covers
- المحاذاة الدقيقة للنصوص والعناصر في واجهات المستخدم تخلق حوافًا واضحة تسهل القراءة.
- تجنب ملء المساحات الفارغة بالمحتوى غير المنسق للحفاظ على تصميم مريح بصريًا.
- استخدام البطاقات كهيكل أساسي لتقسيم المحتوى وتنظيمه بشكل فعال.
- التجميع حسب المعايير مثل تاريخ الاستحقاق يساعد في تحسين قابلية التصفح.
- الرموز والمرئيات تسهل فهم المعلومات بسرعة دون الحاجة لقراءة النصوص بالكامل.
- الإضافات الكثيرة مثل التلميحات والملصقات قد تعقد واجهة المستخدم بدلاً من تبسيطها.
- التصميم الجيد يعتمد على التمييز البصري والتباين بين العناصر لجذب الانتباه.
- التفاعل مع العناصر مثل مربعات الاختيار يعتمد على تغييرات اللون والشكل لتوضيح الحالة.
- دمج البطاقات في واجهة موحدة مع حواف عمودية وأفقية يحسن من التنظيم البصري.
- المستخدم لا يقرأ الشاشة بالكامل بل يبحث عن إجابات محددة، لذا يجب تصميم الواجهة لتسريع المسح البصري.
Chapters
- 00:00مقدمة ومقارنة بين قائمة المهام والإيصال
- 00:21أهمية المحاذاة والحواف في التصميم
- 00:43تنظيم المحتوى على حواف البطاقات
- 01:44تأثير حجم الأيقونات على الحواف
- 02:04التوازن بين المحتوى والمساحات البيضاء
- 02:37التجميع حسب تاريخ الاستحقاق وأثره
- 03:07دور الرموز والمرئيات في تسهيل الفهم
- 03:55مخاطر إضافة معلومات زائدة
- 04:35أهمية التمييز البصري والمرئيات المناسبة
- 04:55عرض خدمة Relume Publish
Full Transcript — Download SRT & Markdown
Speaker A
هناك سبب لعدم وجود نصوص مركزية في هذا الإيصال بخلاف هذه الرموز، وهو نفس السبب الذي يجعل هذا التصميم يبدو غير مريح مقارنة بذاك. في الإيصال، يتم محاذاة النص تماماً إلى اليسار، والأسعار تماماً إلى اليمين.
Speaker A
الأشياء الوحيدة الموجودة في المنتصف هي الأجزاء التي لا يُفترض بك قراءتها في الأساس. المحاذاة هي ما يسمح لك بذلك. لاحظ كيف لا توجد فواصل ولا توجد مساحات فارغة تقريباً. إنهما مجرد حافتين تربطان كل شيء ببعضه. وهذا يعمل بنفس
Speaker A
الطريقة على الشاشة أيضاً. إذا بدأنا ببطاقة ملف شخصي كهذه، فقد تكون غريزتك الأولى هي البدء بإضافة المزيد والمزيد من المحتوى لملء المساحة الفارغة، وهو ما ينتهي به الأمر بمظهر غريب.
Speaker A
بدلاً من ذلك، حاول التفكير في الحواف التي يمكننا وضع المحتوى عليها. في كل بطاقة، لدينا أربع حواف، ولكن لدينا أيضاً حافة سفلية عند الصورة الرمزية والاسم حيث يمكننا تكديس المزيد من الأشياء. المشكلة هنا هي أننا لا نتبع الحواف مع هذه الأزرار
Speaker A
، كما أنها كثيرة جداً. قد تميل إلى تمديد الأزرار ودمج جميع الأزرار الثانوية في قائمة الزاوية العلوية اليسرى، وفجأة تبدو البطاقة أفضل. لكن إخفاء العناصر ليس بشكل عام أفضل طريقة لإصلاح ذلك. لذا، بدلاً من ذلك، إما أن نزيل المحتوى
Speaker A
لتنظيف الحواف، مما يترك هذا الجزء العلوي غير متناسق، أو يمكننا إنشاء حواف جديدة لتحريك هذه الحافة العلوية للأسفل، ومحاذاة أزرارنا وصورتنا الرمزية في خط واحد صلب للمحتوى أدناه. وفي هذه المرحلة، قد تلاحظ أن كل شيء هنا يلامس حافتين أو أكثر. وهذا
Speaker A
صحيح بالنسبة لجميع واجهات المستخدم المدمجة تقريباً، سواء كانت مدخلات محادثة أو بطاقات كانبان أو حتى الأشرطة الجانبية. وهذا أيضاً هو السبب في أن قائمة مهام كهذه تبدو مبنية بشكل مثالي، لأن كل سطر ينشئ حافة جديدة لما يليه. إذا
Speaker A
استبدلنا هذه بأيقونات أكبر، فنحن الآن نفتقد تلك الحافة السفلية، لذا نحتاج إلى سطر فرعي لاستعادتها مرة أخرى.
Speaker A
إذن، لدينا تصميم حيث يتم تثبيت كل عنصر على حافة. لكن ماذا يحدث عندما آخذ هذه الخطوط وأجعلها تمتد على كامل عرض الشاشة؟ كل حافة في مكانها تماماً، لكن فجأة لم تعد الأشياء تبدو مثالية كما كانت.
Speaker A
الآن، ألقِ نظرة على هذا. أي منهما يبدو كأنه عبء أكبر عند القراءة؟ المحتوى متطابق. لكن طريقة العرض ليست كذلك. إذا عدنا إلى قائمتنا المرجعية، فقد تبدأ بإضافة المزيد من المساحات البيضاء لموازنة الكثافة. وهذا يساعد قليلاً، لكنه جعل كل شيء أطول أيضاً.
Speaker A
المشكلة هنا ليست في وجود الكثير من المحتوى، بل في وجود الكثير من المحتوى غير المنسق. انظر، عندما أضيف صوراً رمزية للإشارة إلى الأشخاص، يصبح من الأسهل قليلاً فهم المحتوى. ثم، إذا قمت بالتجميع بناءً على تاريخ الاستحقاق، فلن يهم مقدار النص
Speaker A
لدينا، إذ يمكنك العثور على أي مهمة في ثانية، وتصبح الكثافة لصالحنا بدلاً من أن تكون ضدنا. وهذا هو بالضبط سبب استخدام محادثات الذكاء الاصطناعي القديمة للكثير من النقاط. أو سبب ميل "كلود كود" لإنشاء جداول في نهاية محادثاته. إنه يميز
Speaker A
المحتوى، مما يجعل جدار النص لدينا أكثر سهولة في القراءة. إذن، التجميع وتغيير المحتوى يجعل التصفح أسهل بكثير. لكنك لا تزال تقرأ، فقط في أجزاء أصغر الآن. يبدو الأمر وكأن هناك شيئاً واحداً لم تكن بحاجة لقراءته على الإطلاق.
Speaker A
لقد عرفت الشخص المقصود في كل مهمة بمجرد ظهور الصور الرمزية. دعني أسألك، إذا أريتك هذا الشكل الثماني الأحمر، فما الذي يخطر ببالك أولاً؟ علامات التوقف. لاحظ كيف أنك لم تكن بحاجة لقراءة أي شيء للوصول إلى هذه النتيجة،
Speaker A
لأنها عالمية جداً. الآن، قارن بين هذه البطاقة وتلك البطاقة. أيُّهما أسهل في الفهم؟ البطاقة الأولى تحتوي في الواقع على معلومات خام أكثر، وهو أمر مفيد محتمل. لكن البطاقة الثانية تحول معظم هذا النص العادي إلى رسوم بيانية وأيقونات، والتي
Speaker A
تدركها بمجرد النظر إليها. ترى، الغريزة عندما يكون الشيء غير واضح هي محاولة شرحه بشكل أكبر. أضف مقارنة، أو ملصقاً، أو تلميحاً للأدوات. وهذا يبدو منتجاً لأن كل واحدة من هذه الإضافات هي تقنياً معلومات أكثر. لكنك جعلت الشاشة أصعب في
Speaker A
القراءة لتسهيل فهمها، وهي مقايضة لا تريدها أبداً. لكن هذا ليس صحيحاً تماماً. عندما تنظر إلى شريط الإجراءات هذا، فأنت تعرف وظيفة مربع الاختيار هذا بسبب موضعه فوق البقية.
Speaker A
ولكن بخلاف ذلك، فأنت تخمن فقط البقية، على الأقل أثناء انتظار ظهور تلميح الأدوات. واجهات المستخدم التي تنقل المعلومات بوضوح وتحافظ على نظافتها تفعل ذلك باستخدام المرئيات المناسبة التي يمكن التعرف عليها فوراً. بالعودة إلى القائمة المرجعية، قد يعني هذا تمييز
Speaker A
الروابط وتسطيرها باللون الأزرق، أو استخدام تصنيفات لتنظيم المحتوى. بإضافة هذه العناصر، نحن نمنح المستخدم أيضًا وظيفة تبديل الوسوم بشكل حدسي، وهي أمور كانت ستظل مخفية خلف قائمة ما. ولكن قبل أن تتمكن من إنشاء منتج، تحتاج أولاً إلى صفحة هبوط تسويقية،
Speaker A
وهذا بالضبط ما تفعله "Relume Publish"، الراعي لفيديو اليوم. يعتمد وكيلهم الذكي على مكتبة "Relume" للمكونات التي صممها البشر والتي تدعم مليوني موقع إلكتروني موجود حاليًا. لقد طلبت منه بناء موقع إلكتروني لشركة تنسيق حدائق محلية عن طريق تزويده
Speaker A
بالمواد والأوامر الخاصة بي. تحول "Relume" ذلك أولاً إلى موجز، ثم تبني خريطة موقع وإطارًا سلكيًا باستخدام مكوناتها.
Speaker A
بمجرد أن تشعر بالرضا، تكمل عملية البناء بكتل قابلة للتعديل مباشرة. عندما يبدو الأمر جيدًا، ما عليك سوى الضغط على "نشر" وسيصبح موقعك متاحًا على رابط حقيقي. من هناك، يعمل أربعة وكلاء، وهم كاتب محتوى واستراتيجي ومصمم ومحلل، على الموقع
Speaker A
المباشر باستخدام التحليلات المدمجة ويمكنهم حتى اقتراح تغييرات عند اكتشاف مشكلة. إذا كنت مهتمًا بتجربته، فستجده في الرابط الأول في الأسفل. ولكن، لفهم سبب جعل هذه الأشياء واجهة المستخدم تبدو مثالية بشكل غريب، نحتاج إلى التعمق في كيفية استخدام الناس
Speaker A
للواجهة في الواقع. الأمر وما فيه هو أن لا أحد يقرأ الشاشة حرفيًا. أنت تصل إلى مكان ما وفي ذهنك سؤال بالفعل، وتظل تبحث حتى تجد الإجابة. عندما أفتح برنامج "VS Code"، فأنا لا أنظر إلى المحرر بأكمله. أنا أبحث عن ملف واحد فقط.
Speaker A
ونفس الفكرة عند فتح لوحة الإعدادات، فأنت تبحث عن إعداد واحد فقط. لا يتم استهلاك أي شيء على الشاشة بالكامل أبدًا. وقد كنت تفعل ذلك طوال هذا الفيديو أيضًا. كنت تعرف صاحب كل منزل قبل أن تقرأ اسمه، وكنت تعرف أن هذه علامة قف
Speaker A
حتى دون كتابة أي شيء عليها. هذا هو الدور الفعلي للحواف والتمييز وتبديل النصوص والمرئيات.
Speaker A
إنها لا تجعلها تبدو أجمل فحسب، بل تجعل مسحها ضوئيًا بالعين أسرع. كل أداة من هذه الأدوات تجعل الشاشة أسرع في المسح دون أن تخبرك من أين تبدأ.
Speaker A
الآن، فكر في مربع الاختيار. عندما يكون غير مفعل، فهو مجرد إطار رفيع لا غير. بدون لون، بدون أيقونة، من السهل تخطيه مباشرة.
Speaker A
ولكن عند تفعيله، يكتسب تعبئة وعلامة صح. لا يمكن لأحد أن يصمم مربعًا يكون لونه أزرق وهو غير مفعل، لأن اللون هو الإشارة الكاملة على حدوث تغيير. وهو ما يقودني إلى لوحة الإعدادات هذه. الحواف نظيفة، وعلامات التبويب تقوم
Speaker A
بالتجميع، وكل قيمة عبارة عن شريحة بها أيقونة، لذا نحن نعرض ولا نخبر. هذه الشاشة تفعل كل ما تحدثنا عنه حتى الآن، ومع ذلك ليس من الواضح تمامًا أي من هذه العناصر هو الأهم. لأن انظر إلى ما تقوله هذه الرقائق
Speaker A
بالفعل. كل واحدة منها في حالتها الافتراضية. الأمر أشبه بوجود ستة مربعات اختيار زرقاء عندما تكون متوقفة.
Speaker A
لذا، لجعل أحد هذه العناصر بارزاً، قد تلجأ لإضافة لون أكثر أو نص جريء، بينما كل ما تحتاجه هو تغيير محيطه. وهذا هو بالضبط سبب كون المكون الأزرق الوحيد في هذه القائمة هو الذي يحاول إقناعي بتجديد اشتراكي في iCloud
Speaker A
Pro. لأن التركيز ليس شيئاً يمتلكه العنصر بحد ذاته، بل هو الفرق بينه وبين ما يجاوره.
Speaker A
ربما لاحظت شيئاً مشتركاً في كل الأمثلة السابقة. إنها جميعاً بطاقات. وكان ذلك مقصوداً بالفعل. تحصل على أربع حواف جاهزة، وإذا لم يتناسب المحتوى، فأنت فقط تغير حجمها. لكن لا أحد يبني بطاقة فقط. معظم الناس يرون مساحة فارغة ويبدأون بإضافة
Speaker A
حاويات وبطاقات لخلق هيكل ما، حتى ينتهي بهم الأمر بحدود فوق حدود وثلاث زوايا دائرية متراكبة. لا شيء من ذلك يساعد حقاً.
Speaker A
لذا، بدلاً من ذلك، بسطر واحد، يمكننا دمج كل بطاقاتنا في الواجهة نفسها. حافة العمود تلك تقوم بما كانت تفعله حافة البطاقة. كل صف يتراكم فوق الذي قبله.
Speaker A
الأقسام تجمع المحتوى حتى لا تضطر لمسح قائمة طويلة غير متمايزة. لا تزال الرقائق والأيقونات تسهل عليك القراءة، والقيم الافتراضية رمادية ليبرز ما هو مختلف منها للعين.
Speaker A
سواء ببطاقات أو بدونها، كل شيء يعمل في النهاية على إنشاء واجهة سهلة المسح بصرياً. شكراً جزيلاً لكم على المشاهدة. إذا كنتم مهتمين بتجربة Relume، ستجدون الرابط في الأسفل. رابط جميع أصول Figma المستخدمة في هذا الفيديو موجود هناك أيضاً، وأراكم في
Speaker A
الفيديو القادم.
Topics:تصميم واجهة المستخدممحاذاة النصوصتنظيم المحتوىتجميع البياناتالمرئيات والرموزتجربة المستخدمبطاقات التصميمسهولة القراءةتصميم واجهات عربيةRelume Publish
