شروع کار با دسکتاپ

یک تجربه دسکتاپ از ابتدا سازگار است و از اندازه‌های مختلف در نمایشگرهای متصل یا درون پنجره‌ها پشتیبانی می‌کند. با ایجاد یک رابط کاربری سازگار، از طیف کاملی از دستگاه‌های اندروید پشتیبانی کنید. طرح‌بندی‌های سازگار برای تجربیات دسکتاپ ضروری هستند و به کاربران اجازه می‌دهند پنجره‌های برنامه خود را به طور یکپارچه تغییر اندازه دهند.

برای آماده‌سازی برنامه خود برای تجربه دسکتاپ، با تطبیق رابط کاربری برنامه خود شروع کنید و سپس به طراحی تراکم و تعامل ورودی بپردازید. برای اطلاعات بیشتر، به طرح‌بندی‌های تطبیقی ​​مراجعه کنید. برای تمرین با یک آزمایشگاه طراحی، به آزمایشگاه طراحی تطبیقی ​​مراجعه کنید.

در قاب‌ها فکر کنید

با استفاده از گروه‌بندی و محدودسازی، رویکردی مبتنی بر پنل را برای طرح‌بندی اتخاذ کنید. محتوا را می‌توان با استفاده از کانتینرهای بصری یا از طریق گروه‌بندی ضمنی با فضای خالی سازماندهی کرد. این پنل‌ها انعطاف‌پذیری ارائه می‌دهند، زیرا می‌توانند گسترش یابند، محدود شوند، پنهان شوند، جابجا شوند یا به صورت پاپ‌آپ نمایش داده شوند. طراحی با پنل‌ها، فرآیند ایجاد تجربیات منسجم در دستگاه‌های مختلف تلفن همراه را ساده می‌کند و می‌تواند با شبکه‌های فعلی ادغام شود تا ترازبندی‌های پیچیده طرح‌بندی را ساده کند.

محتوای مشابه را می‌توان با هم گروه‌بندی کرد تا به ایجاد پنل‌ها و منطق مهاربندی کمک کند.
محتوای مشابه را می‌توان با هم گروه‌بندی کرد تا به ایجاد پنل‌ها و منطق مهاربندی کمک کند.
به جای صفحات نمایش، به محدودیت یا صفحات محتوا فکر کنید.

مقیاس

در حالی که صفحات نمایش بزرگ فضای بیشتری برای محتوا فراهم می‌کنند، فضای اضافی و عوامل ارگونومیک مانند فاصله دید باید در نظر گرفته شوند. برای راحتی کاربرانی که ممکن است دورتر باشند یا با صفحه کلید تایپ کنند، باید تایپوگرافی کمی بزرگتر شود.

مقیاس‌بندی عناصر رابط کاربری و متن در صفحه نمایش‌های بزرگتر
برای استفاده رساتر از فضا، تیتر بزرگتری انتخاب شده است.

عناصر رابط کاربری و نوع آنها در نمایشگرهای گسترده و متصل مقیاس‌بندی می‌شوند و ممکن است به دلیل وضوح صفحه نمایش، مقیاس‌های متفاوتی داشته باشند.

در طرح‌های مقیاس فونت موجود خود، یک یا دو پله بالاتر بروید، یا پیاده‌سازی یک مقیاس فونت تخصصی طراحی شده برای دسکتاپ و نمایشگرهای گسترده را در نظر بگیرید. برای کیفیت ویرایشی بیشتر، می‌توانید تنظیمات دلخواه را در طرح‌های خود اعمال کنید.

تصویر همچنین بزرگ می‌شود و در سراسر صفحه نمایش گسترده می‌شود. این به کاربر اجازه می‌دهد گیاه را با جزئیات بیشتری ببیند، اما از فضا به طور کارآمد استفاده نمی‌کند. هنگام ساختاردهی عناصر رابط کاربری، این نکته را در نظر داشته باشید.

محتوا و عناصر رابط کاربری

حالا که محتوا گروه‌بندی و مقیاس‌بندی شده است، برخی از رابط‌های کاربری محتوا نیز می‌توانند تغییر کنند یا به‌روزرسانی شوند تا بهتر با نقاط شکست مطابقت داشته باشند.

در هر بخش از محتوا، تصمیم بگیرید که آیا و چگونه تطبیق داده خواهد شد. به خود محتوا نگاه کنید. اگر یک ردیف لیست به یک کارت تغییر کند، آیا محتوا کارایی تعامل و قابلیت مرور اجمالی را از دست می‌دهد؟ اجزا می‌توانند در نقاط شکست مختلف رفتار متفاوتی داشته باشند. می‌توانید عرض یا میزان دیده شدن آنها را تطبیق دهید، یا حتی اجزا را تغییر دهید.

حداکثر عرض هر عنصر رابط کاربری را تعیین کنید و آن را در یک پنل کپی کنید. عناصر رابط کاربری نباید تا عرض کامل کشیده شوند یا کج شوند. حداکثر فاصله بین خطوط (padding) و حاشیه‌ها (margins) را در پنل‌ها تنظیم کنید. متن باید با محدود کردن طول خطوط، امکان خواندن راحت را فراهم کند. متن‌های کوتاه را به حدود ۶۰ کاراکتر محدود کنید، در حالی که محتوای طولانی می‌تواند طولانی‌تر باشد.

برای جلوگیری از کشیده شدن تمام عرض، حداکثر عرض را برای محتوا و کامپوننت‌ها تنظیم کنید.

از افشای تدریجی و دلپذیر استفاده کنید. آیا وقتی کاربر اندازه پنجره را افزایش می‌دهد، محتوای بیشتری نمایش داده می‌شود؟ در نظر بگیرید که آیا محتوای اضافی با کلیک‌های کمتر، بهره‌وری را افزایش می‌دهد یا باعث سردرگمی می‌شود.

در طرح فشرده، توضیحات پنهان است، در حالی که طرح گسترده، توضیحات کامل را برای استفاده از فضا نشان می‌دهد.

محتوای درون هر پنل می‌تواند بسته به محتوا، با تغییر به ستون‌ها و ساختارهای شبکه‌ای مختلف، طرح‌بندی را تغییر دهد. به عنوان مثال، یک شبکه عمودی با یک چرخ فلک می‌تواند به یک شبکه بنایی با یک چرخ فلک ویژگی به‌روزرسانی شود. تغییر عمودی را برای عناصر در نظر بگیرید و با محدودیت‌ها و تغییرات ارائه ترکیب کنید. بسته به میزان مصرف محتوا، ممکن است نخواهید اجزایی مانند این را تغییر دهید.

نمای وایرفریم از بازآرایی کانتینرهای محتوا بر اساس میزان مهار و تنظیم حداکثر عرض طرح.

در نظر بگیرید که به کاربر اجازه دهید طرح‌بندی را مطابق با سلیقه خود تنظیم کند تا حداکثر خوانایی و بهره‌وری حاصل شود.

محتوای نهایی اقتباس شده.

پس از تطبیق محتوا و عناصر رابط کاربری، تصمیم بگیرید که چگونه بخش‌های محتوا با یکدیگر و سلسله مراتب ناوبری تعامل دارند. به جای ضربه زدن برای پیمایش به محتوای جزئی، می‌توانید از فضای صفحه نمایش اضافی برای نمایش جزئیات و محتوای پشتیبان در کنار یکدیگر استفاده کنید.

  • اگر از نوار ناوبری استفاده می‌شود، نوار پایینی باید برای افزایش ارگونومی به یک ریل ناوبری در کنار صفحه نمایش تبدیل شود. نوار ناوبری پایینی را بیش از حد نکشید.
  • برای ناوبری ثانویه، مانند تب‌ها، تنظیم عرض آنها را روی حداکثر در نظر بگیرید تا پیمایش دقیق‌تر آنها آسان‌تر شود.
  • نوارهای برنامه همچنین می‌توانند به صفحه محتوای مربوطه خود ثابت شوند، اما مطمئن شوید که سلسله مراتب ناوبری را اشتباه نگیرید.
پیمایش در حالت فشرده و گسترده
ناوبری در حالت فشرده و گسترش‌یافته.

تراکم

یک تجربه دسکتاپ می‌تواند هم تراکم تعامل و هم تراکم بصری خود را به دلیل دقت ورودی و اندازه صفحه نمایش تغییر دهد.

  • شما می‌توانید تراکم عناصر بصری، مانند داده‌های جدول، را بدون اینکه کاربر را در مقایسه با یک طرح‌بندی فشرده تلفن همراه، گیج کنید، افزایش دهید. تراکم محتوا را اختیاری در نظر بگیرید و همیشه امکان تغییر مقیاس متن را در طرح‌بندی فراهم کنید، اندازه‌های حروف را به طور سختگیرانه تنظیم نکنید.
  • کامپوننت‌ها باید هدف کلیک دقیق‌تری داشته باشند. اهداف کلیک ذاتی در اطراف کامپوننت‌ها می‌تواند منجر به کلیک‌های اشتباه شود.
تراکم متن در طرح‌بندی.
تراکم در متن طرح‌بندی.
اندازه دکمه‌های هدف بین موبایل و دسکتاپ
اندازه دکمه‌های هدف بین موبایل و دسکتاپ.

ورودی‌ها

ورودی‌های اضافی به معنای الگوهای تعاملی اضافی برای کاربران شما هستند.

وقتی کاربر از ماوس و کیبورد استفاده می‌کند، برنامه شما باید حالت شناور و فوکوس را در نظر بگیرد.

  • حالت‌های شناور را برای ورودی‌های اشاره‌گر، مانند ماوس و قلم، اضافه کنید.
  • ثبت حالت‌های فوکوس برای عناصر، زمانی که کاربران با استفاده از کلید Tab پیمایش می‌کنند تا قابلیت دسترسی افزایش یابد.
  • حالت‌های مکان‌نما را در نظر بگیرید، زیرا مکان‌نما می‌تواند به برقراری ارتباط بین تعامل و حالت برنامه با کاربر نیز کمک کند.
تعامل بیشتر با هاور
تعامل بیشتر هنگام شناور شدن ماوس.

حالت‌های اضافی می‌توانند کارایی را افزایش دهند.

  • قابلیت کلیک راست می‌تواند شامل منوهای زمینه برای دسترسی سریع به ویژگی‌ها باشد.
  • راهنماهای ابزار شناور می‌توانند به کاربران در جذب کاربر کمک کنند.
  • میانبرهای صفحه کلید به کاربران حرفه‌ای کمک می‌کند تا بهره‌وری خود را افزایش دهند.
منوی زمینه کلیک راست
منوی زمینه کلیک راست.