طراحی رابط کاربری (UI) طی سالها با تمرکز بر کارایی ، دسترسی و تجربه کاربر به طور قابل توجهی تکامل یافته است. یک اصل در حال ظهور که در حال تغییر رابط های مدرن است UI مبتنی بر متنبشر
هنگام طراحی تجربیات Frontend ، ما اغلب تمایل به ساختن چیزی داریم که متناسب با زیبایی شناسی باشد تا ابزار عملی آن.
ما به پانل های تنظیمات متمرکز سنتی و نوار ابزار عادت کرده ایم ، اما مسئله این است که: حتی اگر خوب به نظر برسد ، برای کاربردهای عملی ممکن است خیلی راحت نباشد و همچنین با مشکلات کشف کاربران جدید روبرو خواهد شد.
UI مبتنی بر متن تضمین می کند که گزینه ها و کنترل های مربوطه ظاهر می شوند دقیقاً در کجا و چه زمانی مورد نیاز هستندبشر
بنابراین اجازه می دهیم نگاهی به UI مبتنی بر متن بیندازیم
UI مبتنی بر متن چیست؟
UI مبتنی بر متن (CBUI) یک روش طراحی است که در آن ابزارها ، تنظیمات و اقدامات قرار می گیرند در نزدیکی با محتوا یا کار مورد نظربشر UI مبتنی بر متن این عناصر را به جای این که کاربران را مجبور به دور شدن از گردش کار اصلی خود برای یافتن تنظیمات یا کنترل ها کند ، این عناصر را ادغام می کند مستقیماً به فضای کاریبشر
این اصل به طور گسترده در برنامه های مدرن مانند استفاده می شود کد استودیو ویژوال (کد vs)، جایی که ویژگی هایی مانند اشکال زدایی ، کنترل نسخه و ابزارهای آزمایش ظاهر می شوند در خود منطقه برنامه نویسیاز بین بردن اصطکاک غیر ضروری در گردش کار توسعه دهنده.
چرا UI مبتنی بر متن اهمیت دارد
طرح های سنتی UI اغلب کاربران را وادار به تغییر زمینه ها با باز کردن ویندوز تنظیمات جداگانه ، پیمایش از طریق منوهای مختلف یا جستجوی گزینه های خاص می کند. این می تواند منجر به فشار بیش از حد و کاهش بهره وری شود. UI مبتنی بر متن ، از طرف دیگر ، اصطکاک را کاهش می دهد:
- به حداقل رساندن سوئیچینگ زمینه – کاربران بدون پیمایش غیر ضروری روی کار اصلی خود متمرکز می شوند.
- بهبود کشف – گزینه های اساسی در صورت لزوم ظاهر می شوند ، به جای اینکه در منوهای عمیق پنهان شوند.
- افزایش کارایی – دسترسی سریع به ابزارهای مربوطه باعث افزایش جریان کار و کاهش ناامیدی می شود.
- تعامل بصری – کاربران با تنظیمات به روشی طبیعی و فوری در تعامل هستند و منجر به منحنی یادگیری صاف تر می شوند.
نمونه هایی از UI مبتنی بر متن در عمل
1 اقدامات درون خطی در مقابل کد
کد استودیو ویژوال این اصل را با تعبیه کنترل مستقیم در محیط برنامه نویسی نشان می دهد:
- تست ها را درون خطی اجرا کنید – به جای حرکت به یک پانل جداگانه ، یک دکمه کوچک “تست اجرا” در کنار عملکرد تست ظاهر می شود.
- نقاط شکست را مستقیماً در ویرایشگر اضافه کنید – کنترل های اشکال زدایی در خود کد تعبیه شده اند.
- پیشنهادات خطای درون خطی – به جای اینکه به کاربران نیاز داشته باشند تا یک صفحه خطا را بررسی کنند ، پیشنهادات در جایی که مسئله رخ می دهد ظاهر می شود.
2 نوار ابزار شناور Google Docs
Google Docs با نمایش نوار ابزار قالب بندی شناور در هنگام انتخاب کاربران متن ، بازده نوشتن را افزایش می دهد. این امر نیاز به حرکت به نوار ابزار اصلی را از بین می برد و ویرایش متن را سریعتر و بصری تر می کند.
3 پانل ویرایش متنی FIGMA
در FIGMA ، هنگام انتخاب یک شی ، فقط گزینه های مربوط به طراحی و یک ظاهر طراحی شده در همان نزدیکی ظاهر می شوند. این باعث کاهش درهم و برهمی می شود و تضمین می کند که طراحان می توانند بدون جستجوی منوهای متعدد ، روی کار خود تمرکز کنند.
اجرای UI مبتنی بر متن در طرح های شما
برای ایجاد یک UI مبتنی بر متن ، اصول زیر را در نظر بگیرید:
- نیازهای کاربر را شناسایی کنید – گردش کار را تجزیه و تحلیل کنید تا مشخص شود که کدام اقدامات اغلب مورد استفاده قرار می گیرند و در کجا باید ظاهر شوند.
- مراحل غیر ضروری را کاهش دهید – با از بین بردن ناوبری زائد ، تعامل را کارآمد نگه دارید.
- از افشای مترقی استفاده کنید – گزینه های مربوطه را فقط در صورت لزوم برای جلوگیری از بیش از حد کاربران نشان دهید.
- اطمینان از ثبات – حفظ الگوهای یکنواخت و الگوهای تعامل در سراسر UI.
- سفارشی سازی را ارائه دهید – به کاربران اجازه دهید تا عناصر متنی را که می خواهند ببینند پیکربندی کنند.
آینده UI مبتنی بر متن
هرچه نرم افزار پیچیده تر می شود ، نیاز به رابط های باهوش تر و سازگار تر رشد خواهد کرد
طراحان با در آغوش گرفتن UI مبتنی بر متن ، می توانند تجربیات بصری و تولیدی تری ایجاد کنند و اطمینان حاصل کنند که همیشه ابزارها و تنظیمات دقیقاً هستند جایی که آنها باید باشند– نه بیشتر ، نه کمتر.
این فقط بخشی از این سریال است ، در پست های آینده ما این مفهوم را با یک مثال در دنیای واقعی کشف خواهیم کرد ، جایی که من طراحی UI مبتنی بر زمینه را در LiveApi اجرا کردم
