تالار گفتگوی کیش تک/ kishtech forum
  • سردر
  • جستجو
  • فهرست اعضا
  • سالنامه
  • راهنما
درود مهمان گرامی! ورود ثبت‌نام
ورود
نام کاربری:
گذرواژه‌:
گذرواژه‌تان را فراموش کرده‌اید؟
 
تالار گفتگوی کیش تک/ kishtech forum › پردیس فناوری کیش › اخبار علمی و فناوری v
« قبلی 1 … 41 42 43 44 45 … 120 بعدی »

طراحی رابط SaaS: روند ها و بهترین روش برای طراحی رابط کاربری SaaS

امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
حالت موضوعی
طراحی رابط SaaS: روند ها و بهترین روش برای طراحی رابط کاربری SaaS
magbot آفلاین
عضو عادی
***
ارسال‌ها: 81
موضوع‌ها: 80
تاریخ عضویت: Oct 2018
اعتبار: 0
#1
19-02-2019, 03:11 AM
طراحی رابط SaaS: روند ها و بهترین روش برای طراحی رابط کاربری SaaS
طراحی سایت
 

 +

 طراحی محصول SaaS برای وب آسان نیست. فقط یک ایده نیست، اما یک طرح واضح از چگونگی کارکرد آن و ویژگیهایی که شما پشتیبانی می کنید. همچنین شامل بسیاری از برنامه ریزی UX از wireframing اولیه  است



من بعضی از گرایش های رایج را که در وب سایت های SaaS مشاهده می کنم، جمع آوری کرده ام و همه آنها را با نمونه هایی به کار می برم. امیدوارم این ها بتوانند برخی از ایده ها و الهام را برای هر کسی که وب سایت های مبتنی بر SaaS خود را طراحی می کنند ارائه دهد.


هر برنامه SaaS نیاز به یک ناوبری بزرگ دارد. این جایی است که پیوندهایی را به تمام ابزارها، ویژگیها و نمودارها / داده های شخصی  دارید.

منو ناوبری سراسری 
کاربران نمی خواهند به طور بی وقفه حفاری کنند، برای پیدا کردن آنچه که دنبال می کنند. اما در عین حال شما ممکن است ده ها ویژگی دلخواه داشته باشید و آسان نیست که همه آنها را در یک . منو ناوبری قرار دهید.


[تصویر:  4.jpg]


من داشبورد Hootsuite را دوست دارم چون از آیکون ها استفاده می کنند در یک منوی ناوبری عمودی این ثابت باقی می ماند و همیشه در دسترس است، بدون اینکه تلاش زیادی انجام شود فوق العاده آسان است.


تنها ناکامی این است که آیکون ها به وضوح آنچه را که صفحه انجام می دهد توضیح نمی دهد. بنابراین کاربران با کلیک کردن از طریق آیکون بجایی نمی رسند تا زمانی که یاد بگیرند که رابط کاربری چگونه کار می کند.






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



یکی دیگر از سایت هایی که دارای ناوبری داشبورد مشابه هستند، FreshBooks با این حال آنها برچسب ها را در کنار آیکون ها قرار می دهند تا بتوانید به راحتی آنچه را که برای هر پیوند است، ببینید.



[تصویر:  5.jpg]



ناوبری ساده تر شده است، اما فضای بیشتری نیز درگیر شده است.
این روش با منوهای ناوبری جهانی همخوانی دارد؛ زیرا شما می توانید هر جا که ممکن است لینک دهید.  در سراسر رابط SaaS دسترسی دارید. 
اما در عین حال شما می خواهید آن را قابل استفاده کنید، بنابراین شما نمی توانید بیش از حد آن را از لینک پر کنید. من فکر می کنم FreshBooks نسبت خوبی دارد و این یکی از پاک ترین داشبورد هایی است که من دیده ام.


[تصویر:  6.jpg]

گزینه های مرتب سازی پویا

 تقریبا هر برنامه وب شامل برخی از نوع داده ها یا ویژگی های جستجو است. بسیار خوب است اگر شما بتوانید اطلاعات جستجو را بر اساس اطلاعات مربوطه محدود کنید.


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



[تصویر:  7.jpg]



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



تیم BuzzSumo حتی گروه بندی برنامه خود را گسترش داده تا محصول جدیدی را شامل شود. BloomBerry پرسش های رایج را براساس موضوع اصلی یا کلمات کلیدی دسته بندی می کند.





[تصویر:  8.jpg]



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

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


[تصویر:  9.jpg]


SEMrush یک نمونه عالی است زیرا آنها داده های بسیار زیادی را در معرض نمایش می گذارند. شما حداقل دوازده نمودار مختلف را برای هر وبسایت که در فهرست خود جستجو میکنید پیدا خواهید کرد.



آمار ترافیک، حجم کلمات کلیدی، گراف های رقیبان، عملکرد کلمات کلیدی بالا و حتی snippet غنی داده ها با تصاویر همراه آنها.


کلید موفقیت این است که SEMrush این نمودار ها را به صفحات مختلف تقسیم می کند. نمای کلی "داشبورد" برای یک وب سایت با داده ها بسته بندی می شود. اما همانطور که در رابط کاربری عمیق تر می بینید، هر صفحه فقط اطلاعات قابل مشاهده مربوط به موضوع را نشان می دهد (افزایش رتبه بندی، تحقیق رقیب، و غیره).


یک نمونه عالی دیگر  در داشبورد آیرفز .





[تصویر:  10.jpg]
[/url]




طراحی رابط کاربری خلوت
کاربران فقط می خواهند ابزاری با ویژگی های آسان برای دسترسی کارا داشته باشند . این به این معنا نیست که شما نیاز دارید که رابط کاربری را تا حد زیادی محدود کنید که غیر قابل استفاده باشد. در عوض شما باید برای تنظیم تعادل تلاش کنید. به همان اندازه  که نیاز است بر روی صفحه  عناصر را وارد کنید در حالی که هنوز آن را تمیز نگه داشته اید.
[url=https://ahrefs.com/] داشبورد VWO می توانید نمونه خوبی باشد.


[تصویر:  11.jpg]


در ابتدا ممکن است سخت باشد بنابراین کاربران جدید می توانند برای شروع کار تلاش کنند. اما هرچه بیشتر از برنامه استفاده کنند ساده تر می شود و روشن تر می شود.


به همین دلیل من این نوع داشبورد ها را دوست دارم چون همه چیز را در دست خود دارید. هیچ چیز کامل نیست، اما بهترین کاری است که می توانید انجام دهید این است که کاربران را به همه چیزهایی که می خواهید نزدیک کنید.


یک نمونه عالی دیگر صفحه ManageWP با یک داشبورد پر از نمودارها، جداول و داده های خام. به علاوه لینک ها به وضوح قابل دسترسی هستند و حتی دو منو مختلف وجود دارد: یک منوی لینک و یک منوی مرتب سازی / گزینه ها.


[تصویر:  12.jpg]


هنگامی که محصول SaaS شما راه اندازی می گردد، باید یک راه متناسب برای ارایه رابط کاربری آن پیدا کنید. بدون این توجه ها احتمالا زیبا نخواهد بود، اما هیچ راهی بهتر از تشویق کاربر برای تعامل با سایت نیست.هر مرحله از فرایند طراحی برای برنامه SaaS سخت است.
اما هرچه بیشتر در آن کار می کنید، بیشتر یاد می گیرید که چه چیزی مناسب است، چه چیزی نیست، و کجا باید انرژی خود را قرار دهید. 
مقالات مرتبط
[تصویر:  %D9%82%D9%88%D8%A7%D9%86%DB%8C%D9%86-%D8...%D8%A8.jpg]
قواعد جدید برای پیمایش در طراحی وب
[تصویر:  (Re)-%D9%BE%D8%B0%DB%8C%D8%B1%D8%B4-%D8%...%D8%B1.jpg]
پذیرش رویکرد طراحی در مرورگر
[تصویر:  %D8%AA%D8%B9%D8%B1%DB%8C%D9%81-%D8%B7%D8...%D9%84.jpg]
طراح و توسعه دهنده full-stack
ارسال‌ها
پاسخ
« قدیمی‌تر | جدیدتر »


موضوع‌های مشابه…
موضوع نویسنده پاسخ بازدید آخرین ارسال
  طراحی وب سایت برندها : sitecup1 4 1,412 08-01-2025, 01:19 AM
آخرین ارسال: Adambellonline
  پردرآمد ترین شغل های حوزه طراحی گرافیک سپهریونسی 1 2,666 22-10-2024, 02:01 PM
آخرین ارسال: azadkarsho
  5 نکته مهم برای بهبود جراحی آب مروارید خانه سالمندان پارسایان 0 1,752 14-07-2024, 07:31 AM
آخرین ارسال: خانه سالمندان پارسایان
  کاربرد ابزار پیش ساخته طراحی دکوراسیون arezu3 0 1,077 14-08-2023, 02:46 PM
آخرین ارسال: arezu3
  استفاده از گچبری پیش ساخته طراحی دکوراسیون داخلی arezu3 0 1,284 11-07-2023, 04:51 PM
آخرین ارسال: arezu3
  تی وی وال، پدیده نوظهور در طراحی دکوراسیون shirinn 0 1,044 02-05-2023, 07:24 PM
آخرین ارسال: shirinn
  پکیج طراحی و راه اندازی سایت WORDPRESS mohsen00 0 770 11-03-2023, 03:07 PM
آخرین ارسال: mohsen00
  معرفی بهترین مشاوران آزمون تیزهوشان moshaveranebartar 0 1,001 06-12-2022, 12:00 PM
آخرین ارسال: moshaveranebartar
  برای خرید تلویزیون به چه نکاتی باید توجه کرد ؟ ali5280 0 974 26-11-2022, 09:13 PM
آخرین ارسال: ali5280
  با بهترین ساعت هوشمند شیائومی آشنا شوید ali5280 0 4,282 15-08-2022, 07:41 PM
آخرین ارسال: ali5280

  • مشاهده‌ی نسخه‌ی قابل چاپ
پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان
  • تیم انجمن
  • صفحه‌ی تماس
  • تالار کیش تک / kishtech forum
  • بازگشت به بالا
  • بایگانی
  • نشانه‌گذاری تمامی انجمن‌ها به عنوان خوانده شده
  • پیوند سایتی RSS
زمان کنونی: 20-07-2025، 06:17 PM Persian Translation by MyBBIran.com - Ver: 6.5
Powered by MyBB, © 2002-2025 MyBB Group.