نمونه کارهای طراحی اپلیکیشن

راهنمای کاربردی نحوه طراحی اپلیکیشن موبایل 

طراحی اپلیکیشن

وقتی در حال طراحی اپلیکیشن هستید ، یکی از این دو مسیر را انتخاب می کنید: هیبریدی یا نیتیو. اپلیکیشن های هیبریدی از Apache Cordova استفاده می کنند ، که اپلیکیشن شما را در یک مرورگر وب تمام صفحه بر روی تلفن اجرا می کند ، و دسترسی سیستم عامل را به عملکردهای دستگاه اصلی امکان پذیر می کند.مزیت آن برای توسعه دهندگان وب این است که مهارتهای HTML5 CSS3 و JavaScript  آنها به راحتی قابل انتقال هستند. همچنین امکان استفاده از چارچوب هایی مانند jQuery Mobile یا KendoUI Mobile وجود دارد که از مسیریابی خسته کننده و ظاهر طراحی شده مراقبت می کنند. باید در بهینه سازی دقت کنید ، زیرا تغییر DOM در یک دستگاه تلفن همراه می تواند گران باشد.

نرم‌افزار کاربردی (به انگلیسی: Application software) یا اَپ (به انگلیسی: App) یا بِرکا (برخاسته از برنامه کاربردی) یک برنامه رایانه‌ای است که برای اجرای گروهی از توابع هماهنگ، وظایف یا فعالیت‌هایی برای منفعت کاربر طراحی شده‌است. نمونه‌هایی از یک نرم‌افزار کاربردی عبارتند از: واژه‌پرداز ها، صفحات گسترده ها، نرم‌افزارهای حسابداری، مرورگرهای وب، رایانامه‌ خوان ها، مدیا پلیرها، مشاهده گر های پرونده، شبیه‌سازهای پرواز و ویرایشگرهای گرافیک. این عبارت در تضاد عبارت نرم‌افزار سیستمی معنی پیدا می‌کند که عمدتاً شامل اجرا کردن رایانه می‌شود. 

اپلیکیشن بومی 

از طرف دیگر اپلیکیشن های بومی کراس پلت فرم ، چارچوب هایی مانند Xamarin یا NativeScript  وسیله نفوذ به برخی از ابزارهای اصلی بومی و لایه مشترکی که با آن ساخته می شود ، هستند. آنها سپس با اپلیکیشنی که می تواند بر روی سیستم عامل دستگاه (iOS ، Android و غیره) اجرا شود ، همگام می شوند .
در نتیجه ، با اپلیکیشن های بومی می توانید از عناصر UI بومی خالص و تسریع سخت افزاری بر روی دستگاه استفاده کنید. این رویکرد همچنین معمولاً به این معنی است که شما به سطح API دسترسی کامل و سطح پلتفرم دسترسی دارید ، بنابراین محدود به پلاگین های موجود در Cordova نیستید.

اپلیکیشن هیبریدی در مقابل نیتیو

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

در صورت استفاده از مهارت های JavaScript خود برای طراحی اپلیکیشن نیتیو ، میتوان با استفاده از کد بسیار کمتری نسبت به یک برنامه موبایل هیبریدی، در کسری از زمان ، و تمام آن داده ها را در همان زمان در معرض کاربران وب سایت خود قرار میدهید. با استفاده از Telerik NativeScript و Sitefinity CMS، این مهم امکان پذیر است.

معرفی NativeScript

NativeScript چارچوبی است که توسعه دهندگان را قادر می سازد از JavaScript خالص برای طراحی اپلیکیشن های تلفن همراه بومی متقاطع برای اپلیکیشن های اندرویدی ، iOS و ویندوز استفاده کنند ، با استفاده از بسیاری از همان کدها (اگرچه شما نیز در صورت لزوم گزینه نوشتن کد خاص پلتفرم را نیز دارید) .

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

NativeScript از طریق یک لایه انتزاعی جاوا اسکریپت امکان دسترسی کامل به API های اصلی بومی مانند دوربین ، مکان و سیستم پرونده را فراهم می کند. iOS ، Android و Windows همه ماشینهای مجازی JavaScript را در اختیار کاربران قرار می دهند که به کاربران امکان دسترسی به هسته اصلی اپلیکیشن خود را می دهد.

 وارد Sitefinity شوید

 Sitefinity یک بستر مدیریت محتوا و تجزیه و تحلیل مشتری از Telerik است. به همراه مجوز ، به مجموعه کنترل های HTML5 در پلت فرم Kendo UI دسترسی پیدا می کنید. Sitefinity همراه با ماژول موبایل است که شما را قادر می سازد داده های خود را در طراحی اپلیکیشن هیبریدی Cordova UI mobile Kordo UI قرار دهید ، و یک چارچوب کلی را تولید می کنید که از طریق آن می توانید داده های خود را تنها با چند کلیک مشاهده و ویرایش کنید.
کد Kendo \ Cordova که برای انجام کارهایی مانند مسیریابی لازم است ، ضعیف نیست. با این حال ، با اپلیکیشن NativeScript می توان بسیاری از کارهای اساسی را مدیریت کرد و فقط روی داده ها متمرکز شد.
مطمئناً ، در حال حاضر هیچ دکمه ای با یک کلیک وجود ندارد که شما را قادر به تولید اپلیکیشن NativeScript در سایت Sitefinity کند. با این حال ، شما می توانید همین حالا به Plater Telerik مراجعه کرده و از ابزار ScreenBuilder آن برای انجام کار مشابه استفاده کنید. در اصل به شما امکان می دهد در طراحی اپلیکیشن صفحه های مورد نظر خود را ایجاد کنید ، فقط باید داده های خود را وصل کنید.

ماژول ها و کارها

 در UI اداری با پشتیبانی از Sitefinity ، با تعریف ماژول جدید Sitefinity خود شروع کنید. یک نوع محتوا ایجاد کنید (برای مثال ، “کار”) و نوع محتوای والدین را تعیین کنید (در صورت وجود). سپس قسمت های مناسب را اضافه کرده و با استفاده از منوی کشویی آنها را تعریف کنید. بر روی ‘Finish’ کلیک کنید و Sitefinity تمام جداول پایگاه داده را برای شما ایجاد می کند.
نمونه کارهای طراحی اپلیکیشن

در این از طراحی اپلیکیشن می توانید شروع به ایجاد داده کنید. رابط Sitefinity ایجاد وظایف را برای ماژول شما آسان می کند. به سادگی بر روی دکمه “ایجاد کار” در نوار ابزار کلیک کنید و رابط کاربر به شما امکان می دهد موارد جدیدی را با زمینه هایی که شما تعریف کرده اید وارد کنید.

گزینه های همگام سازی

 مرحله بعدی همگام سازی داده های شما است. برای این کار توصیه می کنم از خدمات Telerik Backend استفاده کنید . این یک پایگاه داده ساده ، سریع ، NoSQL است و برای به دست آوردن داده ها نیازی به پردازش اضافی نیست. اگر سایت شما رو به پایین باشد ، کاربران اپلیکیشن تلفن همراه هنوز هم می توانند داده ها را مرور و ویرایش کنند ، و هنگامی که از آن نسخه پشتیبان تهیه می شود ، سیستم همگام سازی را در فاصله زمانی مشخص شروع می کند و سپس تمام تغییرات را ایجاد می کند.

Sitefinity CMS از فناوری ServiceStack برای ارائه و پشتیبانی برخی از عملکردهای آن استفاده می کند. اما اگر می خواهید از ServiceStack برای توسعه و شخصی سازی CMS استفاده کنید ، باید مجوزهای مربوط به ServiceStack را خریداری کنید.

همگام سازی داده ها
 برای همگام سازی داده های وارد شده در سکوی Sitefinity ، ابتدا با بررسی کادر ارائه شده ، ماژول جدید خود را انتخاب کرده و سپس فاصله همگام سازی را تنظیم کنید. Sitefinity تغییرات دو طرفه را با سرویس های پشتیبان Platform Telerik همگام می کند. این بدان معناست که اگر داده های جدیدی را در UI Telerik Platform Backend Service UI اضافه کنید ، در فاصله همگام سازی بعدی به طور خودکار با Sitefinity همگام می شود.
در طراحی اپلیکیشن هنگامی که کانکتور را ذخیره کنید ، یک دکمه همگام سازی در دسترس خواهد بود ، تا بتوانید از زمان انتظار و همگام سازی داده ها به صورت دستی گذر کنید. با کلیک روی پیوند “جزئیات” در بالا سمت راست (در زیر “پهنای باند”) ، شما را مستقیماً به پلت فرم Telerik و پروژه خدمات جدید خود ارسال خواهید کرد.
برای افزودن پروژه خود به Telerik Platform ، برای پیکربندی سرویس ها به “فضای کاری من” بروید. در کادر “سرویس داده ابر” روی “افزودن به پروژه” کلیک کنید. در انتها ، از منوی سمت چپ ، “Types” را انتخاب کنید. باید تمام کارهایی را که در CMS ایجاد کرده اید مشاهده کنید.

پروژه NativeScript را ایجاد کنید

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

از داخل فضای کاری وظایف اصلی خود شروع کنید و روی دکمه “ایجاد پروژه” کلیک کنید. اکنون ، “پروژه بومی AppBuilder” را انتخاب کنید. پس از انتخاب ، می توانید یک پروژه خالی ایجاد کنید ، یک نمونه از پیش ساخته بارگذاری کنید یا یک مخزن را کلون کنید. برای این آموزش ، نمونه ‘NativeScript MasterDetail’ را انتخاب کردم ، زیرا این یک نقطه شروع خوب برای استفاده لیستی از داده ها است.

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

نمونه کارهای طراحی اپلیکیشن

برای ویرایش کد و طراحی اپلیکیشن، باید از Telerik AppBuilder استفاده کنید.

تست اپلیکیشن

NativeScript یک ابزار آزمایشی برای افرادی است که از Telerik Platform و Telerik AppBuilder برای استفاده از اپلیکیشن های نیتیو موبایل با NativeScript استفاده می کنند. پس از نصب NativeScript ، می توانید از AppBuilder LiveSync استفاده کنید تا فوراً تغییرات کد را در دستگاه خود مشاهده و آزمایش کنید. به سادگی سه انگشت را روی صفحه دستگاه خود برای چند ثانیه نگه دارید تا به وظایف Telerik Backend پی ببرید.
برای وارد کردن حالت ویرایش ، روی یک کار کلیک کنید ، سپس با فشار بر روی گزینه Save کلیک کنید تا با استفاده از JavaScript SDK به وضعیت Telerik Backend برگردید. اگر کد را بررسی کنید ، متوجه می شوید که حتی می توانید از JSON.stringify استفاده کنید تا داده ها را در یک گفتگو نمایش دهید.

نکات اساسی طراحی اپلیکیشن

 

در ادامه به برخی نکات اساسی و مهم در طراحی اپلیکیشن میپردازیم.

رفع بی نظمی

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

  • محتوا را به حداقل برسانید (فقط آنچه را که باید بداند به کاربر ارائه دهید).
  • عناصر رابط را کم کنید. طراحی ساده جذابتر می باشد.

    وظایف OFFLOAD

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

    وظایف را به زیرشاخه هایی تقسیم کنید

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

     

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

    از صفحات آشنا استفاده کنید

    صفحاتی که کاربران در بسیاری از برنامه ها مشاهده می کنند. صفحه نمایش هایی از قبیل “Gettings started” ، “What’s new” و “Search results” برای اپلیکیشن های موبایل تبدیل به استانداردهای واقعی شده اند. آنها نیازی به توضیحات اضافی ندارند زیرا کاربران از قبل با آنها آشنا هستند. این به کاربران امکان می دهد تا از تجربه قبلی برای تعامل با برنامه استفاده کنند ، بدون اینکه نیاز به یادگیری داشته باشد.

    اطلاعات ورودی کاربر را به حداقل برسانید

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

    • با پاک کردن قسمت های غیر ضروری ، فرم ها را تا حد امکان کوتاه نگه دارید. برنامه باید حداقل اطلاعات را از کاربر بخواهد.
    • از ویژگی های هوشمندی مانند تکمیل خودکار استفاده کنید. به عنوان مثال ، پر کردن فیلد آدرس اغلب مشکل ساز ترین قسمت از هر فرم ثبت نام است. استفاده از ابزارهایی مانند Place Autocomplete Address(که از موقعیت جغرافیایی و آدرس ورودی استفاده می کند و پیشنهادات دقیقی را بر اساس موقعیت دقیق کاربر ارائه می دهد) باعث می شود تا کاربران بتوانند آدرس خود را با کلیدهای کمتر از وارد کنند.
    • مقادیر درست را تأیید کنید. ناامید کننده است که ، پس از ارسال اطلاعات ، شما باید به عقب برگردید و اشتباهات را اصلاح کنید. هر زمان ممکن باشد مقادیر فیلد را بلافاصله پس از ورود بررسی کنید تا کاربران بتوانند بلافاصله آنها را اصلاح کنند.
     راهنمای جامع طراحی اپلیکیشن موبایل
    • صفحه‌کلید را برای نوع پرس و جو سفارشی کنید. صفحه کلید عددی را هنگام درخواست شماره تلفن نمایش دهید و هنگام درخواست آدرس ایمیل دکمه @ را نیز درج کنید. اطمینان حاصل کنید که این ویژگی بطور مداوم در کل برنامه اجرا می شود ، نه فقط برای اشکال خاص.

    نیازهای کاربران را پیش بینی کنید

    به دنبال مواردی باشید که در آن کاربران ممکن است به کمک نیاز داشته باشند. به عنوان مثال ، تصویر زیر بخشی را نشان می دهد که در آن کاربران باید اطلاعات خاصی را ارائه دهند.

     

    از اصطلاحات نامانوس استفاده نکنید

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

    طرح را سازگار کنید

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

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

    در اینجا چند توصیه عملی در مورد چگونگی ساخت یک طرح سازگار موجود است:

    به دستورالعمل های پلتفرم احترام بگذارید

    هر سیستم عامل تلفن همراه برای طراحی رابط دستورالعمل های استاندارد دارد: دستورالعمل های رابط انسانی اپل و دستورالعمل های طراحی مواد Google . هنگام طراحی سیستم عامل های بومی ، برای حداکثر کیفیت ، دستورالعمل های طراحی سیستم عامل را دنبال کنید. دلیل مهم بودن پیروی از دستورالعملهای طراحی ساده است: کاربران با الگوهای تعامل هر سیستم عامل آشنا می شوند و هر چیزی که با دستورالعمل مغایر باشد اصطکاک ایجاد می کند.

    عناصر UI را از سیستم عامل های دیگر تقلید نکنید.

    همانطور که برنامه خود را برای Android یا iOS می سازید ، برای عناصر UI از سیستم عامل های دیگر استفاده نکنید. آیکون ها ، عناصر کاربردی (فیلدهای ورودی ، صندوق های انتخاب ، سوئیچ ها) باید حس بومی داشته باشند. تا حد امکان از مؤلفه های بومی استفاده کنید تا مردم به برنامه شما اعتماد کنند.

    برنامه تلفن همراه را با وب سایت سازگار نگه دارید.

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

    کاربر را به کنترلر تبدیل کنید

    عناصر تعاملی را با هم آشنا و قابل پیش بینی نگه دارید

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

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

    ارور های برنامه

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

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

    • چه اشتباهی پیش آمد و احتمالاً به چه دلیل بوده
    • قدم بعدی که کاربر باید برای رفع خطا بردارد چیست.

    نمایش موقعیت کاربر در تمامی قسمت ها

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

    روی اولین تجربه متمرکز شوید

    اولین تجربه با پیروزی یا شکست برنامه های تلفن همراه است. فقط با تجربه اول می توانید یک پیروزی بدست بیاورید و در صورت عدم موفقیت ، احتمال زیادی وجود دارد که کاربران دوباره برنامه شما را راه اندازی نکنند. (تحقیقات انجام شده توسط Localytics نشان می دهد که ۲۴٪ از کاربران پس از اولین استفاده هرگز به یک برنامه برنمی گردند.)

    از موانع ورود به اپلیکیشن خودداری کنید

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

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

    اشتراک مطلب

    دیدگاهتان را بنویسید

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *