جاب یار – نمونه کار اپلیکیشن رزومه ساز آنلاین فلاتر
- سال 1402
آشنایی با وردپرس در دوران نوجوانی باعث شد وارد حوزه آی تی شوم و نسبت به برنامه نویسی علاقه پیدا کنم.
به شکل جدی با زبان جاوا از سال کنکور شروع به یادگیری برنامه نویسی کردم.
سال 95 اولین اپلیکیشنم را داخل کافه بازار قرار دادم و از همان زمان تا به حال در مسیر برنامه نویسی موبایل ادامه دادم.
در این مدت با زبان های جاوا, کاتلین و فریمورک فلاتر کار کردم.
سعی میکنم بخشی از زمان مطالعه ام و به زمینه هوش مصنوعی و آنالیز دیتا اختصاص بدم که جذابیت زیادی برای من دارد.
فعالیت به عنوان فریلنسر از سال 1396
باشگاه کارآفرینی تیوان
مجموعه توسینسو, فرانش
میخواهید رزومهای حرفهای و جذاب داشته باشید که نظر کارفرمایان را جلب کند؟ جاب یار، اپلیکیشن رزومه ساز آنلاین، به شما کمک میکند تا در کمترین زمان و بدون نیاز به دانش فنی، رزومهای زیبا و منحصر به فرد بسازید.
جاب یار یک اپلیکیشن طراحی رزومه آنلاین است که با استفاده از فریمورک فلاتر Flutter طراحی شده است.
این پروژه شامل اپلیکیشن نیتیو اندروید و نسخه وب میباشد.
جاب یار پروژه شخصی هست و در حال حاضر کاربر با ثبت اطلاعات خود میتوانید فایل PDF رزومه خود را از بین دو قالب موجود انتخاب و دریافت نماید.
نسخه های مختلف جاب یار را از طریق لینک های زیر میتوانید بررسی کنید.
فریمورک: فلاتر 3.16
مدیریت State: پکیج Provider
تزریق وابستگی: پکیج get_it
پیاده سازی بخش دو زبانه: پکیج flutter_localization
پیاده سازی کلاس های مدل: استفاده از پکیج های freezed و json_serializable
وردپرس یک سامانه مدیریت محتوای رایگان و متنباز است که اولین بار در سال ۲۰۰۳ توسط متی مولنگ ایجاد شد. این سیستم مدیریت محتوایی است که برای ساخت و مدیریت وبسایتها و وبلاگها استفاده میشود. وردپرس با استفاده از زبان برنامهنویسی PHP و پایگاه داده MySQL ساخته شده است.
طراحی اپلیکیشن وردپرس با استفاده از فریمورک فلاتر و زبان برنامه نویسی دارت
نمایش لیست دسته بندی ها, مطالب, لیست نظرات و ارسال نظر
ذخیره سازی پست های مورد علاقه در دیتابیس
مدیریت State با استفاده از الگوی بلاک
وردپرس به عنوان یک سیستم مدیریت محتوا، اجازه میدهد تا کاربران بدون نیاز به دانش برنامهنویسی، وبسایتهای خود را طراحی، تنظیم و مدیریت کنند. با استفاده از وردپرس، کاربران میتوانند به راحتی مطالب، تصاویر، ویدیوها و صفحات مختلف را به وبسایت خود اضافه کنند و آنها را به روز رسانی کنند.
یکی از ویژگیهای برجسته وردپرس، قابلیت گسترشپذیری آن است. با استفاده از افزونههای مختلف، کاربران میتوانند قابلیتهای وردپرس را به صورت سفارشی گسترش دهند و به نیازهای خود بپردازند. همچنین، وردپرس دارای یک جامعه بزرگ از توسعهدهندگان و طراحان است که باعث شده تا امکانات و قابلیتهای جدیدی در هر نسخه جدید وردپرس اضافه شود.
اپلیکیشن تقویم آنلاین اندروید جاوا
اپلیکیشن تقویم آنلاین اندروید طراحی شده با زبان جاوا
دارای پنل مدیریت برای ثبت رویدادهای مختلف
دارای تقویم شمسی, میلادی و قمری
بک اند پروژه توسط خودم و با استفاده از PHP خام طراحی شده بود
زبان جاوا یکی از زبانهای برنامهنویسی است که در اندروید استفاده میشود. این زبان بسیار قدرتمند و پرکاربرد است و بسیاری از برنامههای اندرویدی که در بازارهای دیجیتال مانند گوگل پلی وجود دارند، با استفاده از جاوا توسعه داده شدهاند.
جاوا یک زبان شیءگرا است و به دلیل ویژگیهایی مانند قابلیت ارثبری، پلیمورفیسم و انتزاع، برای برنامهنویسان بسیار جذاب است. همچنین، جاوا به دلیل وجود کتابخانههای بسیار قدرتمند و جامع، برنامهنویسی اندروید را بسیار سریع و آسان میکند.
اما با ورود زبان کاتلین به عنوان یک زبان جایگزین برای جاوا در برنامهنویسی اندروید، برنامهنویسان به دنبال یک زبان جدید و بهتر برای توسعه برنامههای اندروید هستند.
کاتلین یک زبان بسیار پویا و کاربردی است که توسط شرکت JetBrains توسعه داده شده است. این زبان با قابلیتهایی مانند کدنویسی سریعتر، کد قابل فهمتر، امکانات بیشتر و عملکرد بهتر، به برنامهنویسان اجازه میدهد تا برنامههای با کیفیت و قابلیت پذیرش بالا برای اندروید توسعه دهند.
زبان کاتلین یک زبان برنامهنویسی است که به تازگی توسط شرکت JetBrains ارائه شده است. این زبان به منظور جایگزینی زبان جاوا و افزایش بهرهوری در برنامهنویسی اندروید توسعه داده شده است.
اولین استارتاپی که در باشگاه کار آفرینی تیوان به عنوان برنامه نویس اندروید روی آن کار میکردم اپلیکیشن کافیس بود
این اپلیکیشن شامل لیست متنوعی از کافه های شهر تهران بود که به کاربران اجازه میداد اطلاعات مختلفی را درباره کافه شامل امکانات, منو, نظرات, آدرس و… مشاهده کنند و اقدام به رزرو میز نیز کنند.
ایده کلی این استارتاپ بدین شکل بود که صاحبان کافه بتوانند از میزهای خالی که در تایم خلوت کافه دارند کسب درآمد کنند بدین صورت افرادی که صرفا میخواستند در کافه کار کنند و الزاما نیازی به سفارش چیزی از منو نداشتند میتوانستن اقدام به رزرو میزهای خالی کنند و در مدت زمان مشخص از آن استفاده کنند.
همچنین قابلیت بلیط فروشی رویدادهایی که در کافه ها برگزار میشدند نیز وجود داشت.
اپلیکیشن با استفاده از زبان برنامه نویسی کاتلین و معماری MVVM طراحی شده بود.
وب اپلیکیشن در فلاتر، به عنوان یک روش توسعه دهندگان برای ایجاد برنامه های وب استفاده می کنند. فلاتر یک فریم ورک توسعه نرم افزار است که توسعه دهندگان می توانند با استفاده از آن برنامه های وب و موبایل را توسعه دهند.
پروژه های متن باز شخصی طراحی رابط کاربری برای نسخه وب فریمورک فلاتر
طراحی وب اپلیکیشن های تک صفحه ای وبسایت موسیقی و پروفایل شخصی رزومه
سورس کامل پروژه در پروفایل گیتهاب قرار داده شده است
وب اپلیکیشن در فلاتر، به عنوان یک روش توسعه دهندگان برای ایجاد برنامه های وب استفاده می کنند. فلاتر یک فریم ورک توسعه نرم افزار است که توسعه دهندگان می توانند با استفاده از آن برنامه های وب و موبایل را توسعه دهند.
این فریم ورک از زبان دارت پشتیبانی می کند و به توسعه دهندگان اجازه می دهد تا به سرعت و به راحتی برنامه هایی را برای وب توسعه دهند. با استفاده از فلاتر، توسعه دهندگان می توانند اپلیکیشن هایی با طراحی زیبا و قابلیت های پیشرفته توسعه دهند.
فلاتر یک فریمورک چندسکویی میباشد که توسط شرکت گوگل معرفی و توسعه داده میشود.
اپلیکیشن آموزش آنلاین طراحی شده با استفاده از فریمورک فلاتر و زبان برنامه نویسی دارت
بخش وب سرویس پروژه هم توسط خودم با استفاده از فریمورک جنگو پیاده سازی شده است
برای بخش مدیریت State از Riverpod و Stream استفاده شده است.
احراز هویت به وسیله JWT
درگاه پرداخت آنلاین
شامل دو نسخه اندروید و iOS
گیفت کارت ها کارت های هدیه ای هستند که برای خرید کالاها و خدمات مختلف از فروشگاه ها و سایت های مختلف مورد استفاده قرار میگیرند. با خرید گیفت کارت، کاربران میتوانند به صورت آنلاین یا حضوری، به راحتی خدمات و کالاهای مورد نظر خود را خریداری کنند.
اپلیکیشن فروش گیفت کارت طراحی شده با استفاده از زبان برنامه نویسی جاوا و بک اند PHP
ورود و OTP از طریق پیام کوتاه
قابلیت خرید گیفت کارت های گوناگون و دریافت لیست کدهای گیفت کارت
فروشگاه گیفت کارت یک سایت اینترنتی است که به فروش گیفت کارت های مختلف مانند گیفت کارت های اپل، گوگل پلی، امازون، استیم، ایکس باکس و … میپردازد. این فروشگاه به صورت آنلاین فعالیت میکند و کاربران میتوانند به راحتی از طریق سایت این فروشگاه، گیفت کارت موردنظر خود را خریداری کنند.
فروشگاه گیفت کارت با ارائه گیفت کارت های مختلف، به کاربران امکان میدهد تا با قیمت مناسب، خریداری راحت و آسانی انجام دهند و از تخفیف ها و پیشنهادات ویژه استفاده کنند.
ایگرگ به شما اجازه می دهد که با دوربین موبایل از سوال عکس بگیرید یا اینکه تصویری را از گالری برای متخصصین ارسال کنید. پاسخ مدتی بعد توسط متخصص آموزشی به طور تشریحی برایتان ارسال می شود و هنگام طی شدن این مراحل، با نوتیفیکیشن در جریان اوضاع قرار می گیرید.
ایگرگ یک اپلیکیشن آموزشی است که دانش آموزان میتوانند از سوالات درسی خود عکس بگیرند و با ارسال آن پاسخ خود را پشتیبان هایی که وجود دارد دریافت کنند.
این پروژه ابتدا توسط یک برنامه نویس خارجی تا حدودی انجام شده بود و در ادامه کار توسعه و رفع باگ های موجود را برعهده گرفتم.
هر کاربر دارای اعتبار مشخصی برای ثبت سوال درسی است که میتواند اکانت خود را متناسب با نیاز شارژ کند.
زبان برنامهنویسی کاتلین، یک زبان قدرتمند، مدرن و چند سکویی است که به دلیل سادگی، خوانایی و کارایی بالا، محبوبیت
زبان برنامهنویسی کاتلین، یک زبان قدرتمند، مدرن و چند سکویی است که به دلیل سادگی، خوانایی و کارایی بالا، محبوبیت زیادی در بین برنامهنویسان پیدا کرده است.
این زبان توسط شرکت JetBrains توسعه یافته و به طور کامل با جاوا سازگار است، به این معنی که میتوان از کدهای کاتلین در پروژههای جاوا و بالعکس استفاده کرد.
زبان کاتلین در حال حاضر به شکل گسترده در برنامه نویسی اندروید استفاده میشود.
کار با فایل در برنامه نویسی کاتلین از جهات مختلفی حائز اهمیت است:
ذخیره سازی داده ها:
ایجاد تنوع در برنامه:
بهبود عملکرد برنامه:
به طور کلی در بسیاری از روش های نوشتن، یک فایل به طور خودکار ایجاد می شود، اما ما در اینجا روشی برای ایجاد یک فایل به صورت دستی را بررسی خواهیم کرد.
برای این کار از کلاس File موجود در بسته java.io استفاده می کنیم. سازنده این کلاس نام فایل را به عنوان آرگومان دریافت می کند.
ما از روش createNewFile() برای ایجاد فایل استفاده خواهیم کرد.
اگر فایلی با نام مشخص شده وجود نداشته باشد، روش createNewFile() یک فایل جدید ایجاد می کند و مقدار true را برمی گرداند.
اگر فایلی با نام مشخص شده از قبل وجود داشته باشد، این روش مقدار false را برمی گرداند.
import java.io.File
fun main() {
val fileName = "Demo.txt"
// Create file object
val file = File(fileName)
// Create file
var isCreated = file.createNewFile()
if (isCreated)
println("File is created")
else
println("File is not created")
// Again create file
isCreated = file.createNewFile()
if (isCreated)
println("File is created")
else
println("File is not created")
}
خروجی کد بالا بصورت زیر خواهد بود
File is created
File is not created
همچنین با استفاده از تابع file.exists() میتوانیم چک کنیم آیا چنین فایلی وجود دارد یا خیر.
با استفاده از متد writeText()
میتوانیم دادهها را در یک فایل بنویسیم.
این متد یک رشته (String) را به عنوان آرگومان میگیرد و آن را در فایل مینویسد.
اگر فایلی با نام مشخص شده وجود نداشته باشد، یک فایل جدید ایجاد میکند.
اگر فایل از قبل وجود داشته باشد، آن را جایگزین میکند.
به طور پیش فرض، دادههای داده شده با فونت کاراکتر UTF-8 رمزگذاری میشوند. همچنین میتوان کاراکتر دیگری را مشخص کرد.
import java.io.File
fun main() {
val fileName = "Demo.txt"
val file = File(fileName)
file.writeText("Hello World")
file.writeText("Bye world")
}
اگر فایل Demo.txt
را بررسی کنیم، فقط عبارت “Bye world” را در آن خواهیم دید. دلیل این است که متد writeText()
تمام محتوای موجود در فایل را جایگزین می کند.
اگر می خواهید داده های موجود از بین نروند، می توانید به جای writeText()
از تابع appendText()
استفاده کنید.
نکات:
writeText(String, Charset)
را استفاده کنید.appendText(String)
استفاده کنید که متن را به انتهای فایل اضافه میکند.writeBytes(ByteArray)
استفاده کنید.برای خواندن محتوا خط به خط می توانیم از متد forEachLine()
استفاده کنیم. این متد داده ها را به صورت خط به خط از فایل می خواند.
import java.io.File
fun main() {
val fileName = "Demo.txt"
val file = File(fileName)
file.forEachLine {
println(it)
}
}
با استفاده از متد readText() اطلاعات فایل را میتوانیم در کاتلین بخوانیم.
import java.io.File
fun main() {
val fileName = "Demo.txt"
val file = File(fileName)
val data = file.readText()
println(data)
}
نکات:
appendText()
متن جدید را به انتهای فایل اضافه می کند.appendText()
یک فایل جدید ایجاد می کند.forEachLine()
به عنوان یک رشته در دسترس است.در صورتی پروژه ای در زمینه برنامه نویسی اپلیکیشن دارید میتوانید از طریق صفحه سفارش طراحی اپلیکیشن با من در ارتباط باشید.
از زمان ظهور وب، شکل و طراحی آن تغییرات زیادی را به خود دیده است. چیزی که در دهه 90
از زمان ظهور وب، شکل و طراحی آن تغییرات زیادی را به خود دیده است. چیزی که در دهه 90 و اوایل 2000 به مثابه غرب وحشی طراحی رابط کاربری بود، به تدریج جای خود را به وب سایتهای سادهتر، تمیزتر و قابل پیشبینیتری داد.
سپس، ورود گوشیهای هوشمند باعث نیاز به تغییرات عظیمی شد. در نتیجه، شاهد یک تغییر چشمگیر در برنامهها و در نهایت وبسایتها به لطف نظام طراحی و زبان گوگل، یعنی Material Design بودیم.
این نظام طراحی مبتنی بر شبکه که در سال ۲۰۱۴ معرفی شد، مورد استقبال گسترده قرار گرفت و به سرعت گسترش یافت و سپس وارد فاز جدیدی شد.
زبان طراحی مجموعه ای از اصول، قوانین و دستورالعمل هایی است که برای طراحی یک محصول یا خدمات استفاده می شود.
این شامل عناصر بصری مانند رنگ، فونت، تایپوگرافی، انیمیشن، آیکون و همچنین عناصر ساختاری مانند چیدمان، گردش کار و تعامل است.
زبان طراحی برای ایجاد یکپارچگی و انسجام در طراحی محصولات و خدمات استفاده می شود.
این همچنین می تواند به بهبود تجربه کاربری کمک کند، زیرا کاربران با عناصر بصری و ساختاری آشنا می شوند.
متریال دیزاین یک زبان طراحی است که توسط گوگل در سال ۲۰۱۴ معرفی شد. این زبان طراحی بر اساس اصولی مانند وضوح، انسجام، انعطافپذیری و واکنشگرایی بنا شده است.
متریال دیزاین از عناصر مختلفی مانند رنگ، فونت، تایپوگرافی، انیمیشن و آیکون استفاده میکند تا تجربه کاربری بصری و جذابی را ایجاد کند.
اما متریال دیزاین بسیار جامعتر از اکثر سیستمهای طراحی است. دلیل این امر این است که برای یک برند یا پروژه خاص ساخته نشده است.
کد با نام «Quantum Paper»، متریال دیزاین به عنوان یک زبان طراحی منتشر شد که طراحان اندروید میتوانستند از آن برای ایجاد برنامههای بهتر از طریق طراحی خوب استفاده کنند.
گوگل همچنین از متریال دیزاین برای بازنگری طراحی برنامههای خود استفاده کرد.
هدف کلی متریال دیزاین این بود که طراحان را قادر به ساخت سریع برنامههایی کند که پاسخگو، قابل استفاده و مقیاسپذیر باشند.
در سال ۲۰۱۴، انتشار متریال دیزاین موجهای بزرگی را در جامعه طراحی ایجاد کرد – نه تنها برای توسعه اندروید، بلکه برای برنامههای iOS و وبسایتها نیز.
برای اینکه بفهمیم متریال دیزاین از کجا سرچشمه گرفته، باید نگاهی به گذشته آن بیندازیم.
حدود سال ۲۰۱۰ بود که اسکئومورفیسم به شهرت رسید. این یک سبک طراحی بود که عناصر رابط کاربری را شبیه اشیاء واقعی که بر اساس آنها ساخته شده بودند، نشان میداد.
این موضوع را در پسزمینههای وبسایتها و آیکونها زیاد میدیدیم.
در اینجا تصویری از صفحه اصلی اپل در سال ۲۰۱۲ آمده است:
همانطور که میبینید، دکمههای فیزیکی مانند دوخت چرم، بافت چوب و حتی سایههایی که نشاندهنده عمق هستند، همگی برای ایجاد احساس واقعی بودن در نظر گرفته شدهاند.
اسکئومورفیسم در آن زمان یک سبک طراحی محبوب بود، اما انتقاداتی نیز به همراه داشت.
برخی معتقد بودند که بیش از حد واقعگرا است و حواس کاربران را پرت میکند و برخی دیگر نیز آن را قدیمی و دستوپاگیر میدانستند.
در همین دوره بود که متریال دیزاین شروع به شکلگیری کرد. گوگل هدفی متفاوت در ذهن داشت: ایجاد یک زبان طراحی که هم زیبا و مدرن باشد و هم انعطافپذیر و کاربردی.
بسیاری از آیکونهای اپلیکیشنهایی که روی iPad میبینید، بهصورت اسکئومورفیک طراحی شدهاند. برای مثال، به موارد مشخصشده با رنگ زرد نگاه کنید:
رابطهای کاربری اسکئومورفیک به دلیل جنبههای واقعگرایانهشان، بیش از حد حواس کاربران را پرت میکردند. علاوه بر این، ویژگیهای واقعگرایانه طراحی، بیشتر جنبه تزیینی و پیروی از یک ترند را داشتند و کارکرد خاصی را ارائه نمیدادند.
روند طراحی بعدی که به دنباله اسکئومورفیسم آمد، «طراحی تخت» بود. هدف این سبک، حذف اضافات و ظاهرسازیهای غیرواقعی از رابط کاربری بود.
اینطور است که همان آیکونهایی که قبلاً اسکئومورفیک بودند، در یک دستگاه iOS در سال 2020 به نظر میرسند:
طراحی تخت، آیکونها را سادهتر و انتزاعیتر کرد و تمرکز را بیشتر روی جنبه عملکردی آنها قرار داد. این سبک ظاهری مدرنتر و مینیمالیستیتر به رابط کاربری داد و حواس کاربران را کمتر پرت میکرد.
این آیکونها (و همچنین آیکونهای بسیاری از برنامههای قدیمی) صاف شدهاند و اکثر ویژگیهای واقعگرایانه آنها حذف شده است.
در حالی که طراحی تخت تا به امروز ادامه دارد – از آنجایی که مینیمالیسم و طراحی خوب و تمیز هرگز از مد نمیافتد – یک اشکال بزرگ وجود داشت که نیاز به اصلاح داشت.
همانطور که Nielsen Norman Group توضیح میدهد:
«طراحی تخت اغلب منجر به عدم اطمینان از کلیک و کاهش کارایی کاربر میشود. زمانی که طراحان رابط کاربری را صاف میکنند، تمایل دارند بسیاری از نشانههایی را که به طور معمول به کاربران میگویند کجا کلیک کنند، حذف کنند.»
میبینید که حذف جزئیات واقعگرایانه و تمرکز بیش از حد بر سادگی، باعث شده بود که کاربران در مورد محل کلیک روی عناصر مختلف رابط کاربری دچار سردرگمی شوند.
این موضوع کارایی و سرعت استفاده از برنامهها را تحت تأثیر قرار میداد.
در ادامه خواهیم دید که متریال دیزاین چگونه تلاش کرد تا این مشکل را حل کند.
متريال دیزاین از دنیای فیزیکی الهام گرفته است. اما این تلاش برای بازگشت به روزهای اسکئومورفیک نبود.
این یک استعاره است (که به زودی هنگام بررسی اصول آن به آن خواهیم پرداخت).
در واقع، کاری که متریال دیزاین انجام داد، دور شدن از طراحی رابطهای کاربری کاملاً تخت به طراحی سطوحی بود که از کاغذ و جوهر الهام گرفته شده بودند. به این موضوع مثل این فکر کنید:
وقتی از روبهرو به یک ورق کاغذ نگاه میکنیم، صاف و دو بعدی به نظر میرسد. با این حال، در دنیای واقعی، اینطور رفتار نمیکند.
کاغذ در سه بعد وجود دارد. ورقهای کاغذ سایه، درز و چین ایجاد میکنند و میتوانند برای نیازهای ما برش داده و اندازه شوند – چیزی که گوگل با متریال دیزاین در دنیای دیجیتال قصد بازسازی آن را داشت.
این مثال از وبسایت متریال دیزاین، یکی از سبکهای شاخص متریال است:
همانطور که میبینید، عناصر رابط کاربری مانند دکمهها و کارتها، سایههایی ظریف دارند که حس عمق و بعد را القا میکنند.
همچنین، استفاده از رنگهای زنده و متمایز باعث میشود عناصر از یکدیگر تفکیک شده و قابل کلیک بودنشان به کاربر منتقل شود.
این رویکرد مبتنی بر استعاره، همان چیزی است که به متریال دیزاین کمک کرد تا تعادل ظریفی بین مینیمالیسم و قابلیت استفاده ایجاد کند. در ادامه، اصول و جزئیات بیشتری از متریال دیزاین را بررسی خواهیم کرد.
به سایهای که زیر نوار برنامهیبالای تخت قرار دارد توجه کنید.
بنابراین، متریال دیزاین همچنان از عناصر تخت استفاده میکند. با این حال، این عناصر روی سطوح مختلف قرار میگیرند و میتوانند مانند کاغذ و سایر اشیاء در دنیای واقعی رفتار کنند، که به تجربیات دیجیتال «احساس» زندهتری میدهد.
این موضوع به کاربران اپلیکیشن یا وبسایت اجازه میدهد تا واکنش طبیعیتری به رابط کاربری داشته باشند، زیرا آنها همانطور که در محیط فیزیکی نحوه لمس و حرکت حول اشیاء را درک میکنند، در فضای دیجیتال نیز متوجه این موارد میشوند.
ماتیاس Duarte، معاون بخش طراحی در گوگل، توضیح داد که چرا این تغییر، یک تحول مهم برای وب بوده است:
«برخلاف کاغذ واقعی، مواد دیجیتال ما میتوانند به صورت هوشمندانه گسترش یافته و تغییر شکل دهند. متریال دارای سطوح و لبههای فیزیکی است. درزها و سایهها معنا و مفهومی در مورد اینکه چه چیزی را میتوانید لمس کنید ارائه میدهند.»
با بازگشت به آن نکتهی NNG، متریال دیزاین مشکل ناشی از فقدان عمق و سایر نشانههای کلیدی در طراحی تخت را برطرف میکند. همچنین، تغییرات معنادار دیگری نیز در طراحی ایجاد کرد.
در بخش های بعدی به بررسی دقیقتر اصول و جزئیات متریال دیزاین و این تغییرات دیگر خواهیم پرداخت.
متريال دیزاین چیزی فراتر از افزودن لایهها یا سایهها به طراحی است. این یک منبع فوقجامع است که قوانین را برای یک زبان طراحی جدید تعیین میکند.
همانطور که اصول اولیهای داریم که باید در طراحی وب از آنها پیروی کنیم، متریال دیزاین نیز سه اصل اصلی خود را دارد:
به متریال دیزاین به عنوان دیجیتالی کردن دنیای فیزیکی فکر کنید.
بنابراین، به جای اینکه از بازدیدکنندگان و کاربران بخواهیم وارد یک تجربه دیجیتالی شوند که برایشان غیرطبیعی احساس میشود، متریال دیزاین اصول اولیه محیط فیزیکی ما را به برنامهها و وبسایتها اعمال میکند.
برای مثال، به مفهوم علت و معلول فکر کنید. هنگامی که کسی یک اقدام خاص را انجام میدهد، انتظار یک نتیجه قابل پیشبینی دارد.
به این مقایسه کنار هم در توضیح تعامل متریال دیزاین نگاهی بیندازید:
در سمت چپ، میبینید که یک دکمه با رنگ تیره و حالت ثابت وجود دارد. وقتی کاربر روی دکمه کلیک میکند، هیچ تغییری در ظاهر آن ایجاد نمیشود. این میتواند برای کاربر گیجکننده باشد و مطمئن نباشد که آیا کلیک او ثبت شده است یا خیر.
در سمت راست، دکمه ظاهری برجستهتر و رنگ روشنتری دارد. وقتی کاربر روی آن کلیک میکند، با یک انیمیشن ظریف رنگ و سایه آن تغییر میکند. این بازخورد بصری به کاربر نشان میدهد که کلیک او ثبت شده است و باعث ایجاد حس اطمینان بیشتر میشود.
این فقط یک نمونه کوچک از چگونگی استفاده متریال دیزاین از استعارههای واقعی برای ایجاد تجربیات کاربری قابل درک و لذتبخش است.
در بخشهای بعدی، به بررسی عمیقتر دو اصل دیگر متریال دیزاین خواهیم پرداخت.
هر دو رابط کاربری دارای یک نوار پیمایش افقی هستند.
نوار پیمایش در سمت چپ فقط زمانی حرکت میکند که کاربر روی محتوا کلیک کرده و آن را بکشد. این همانگونه است که در دنیای واقعی کار میکند.
با این حال، نوار سمت راست دارای یک انیمیشن پیمایش با کلیک است. اشیاء دنیای واقعی ما اینگونه حرکت نمیکنند.
با تزریق این نوع ویژگیهای فیزیکی به رابطهای کاربری، کاربران میتوانند برای تعامل با وبسایتها و برنامهها به شهود و اقدامات طبیعی خود تکیه کنند.
به این مثال از بخش Material Foundation در مورد تایپوگرافی وب نگاه کنید:
متریال دیزاین بر تایپوگرافی قوی و سلسله مراتب بصری واضح تأکید دارد.
این بدان معناست که استفاده از فونتهای بزرگ، خطوط واضح و فضای سفید زیاد را تشویق میکند تا اطلاعات به راحتی قابل خواندن و اسکن باشد.
همچنین به استفاده از رنگهای پررنگ و تصاویری که توجه را جلب میکنند و به ایجاد یک تجربه بصری جذاب کمک میکنند، اهمیت میدهد.
این رویکرد به طراحان کمک میکند تا رابطهای کاربری ایجاد کنند که نه تنها از نظر زیباییشناختی دلپذیر هستند، بلکه پیمایش و درک آنها نیز آسان است.
تمام بخشهای بنیاد متریال دیزاین، جامع و مفهومی هستند.
هر بخش نحوه عملکرد یک جزء و دلیل نیاز به عملکرد آن را به طور کامل توضیح میدهد. اساساً، معنایی و منطقی پشت هر انتخاب طراحی وجود دارد.
این در آن زمان، یک تغییر قابل توجه در طراحی بود.
دیگر طراحی به معنی ساختن چیزی نبود، چون کسی از ظاهر آن خوشش میآمد یا چون از یک ترند خاص پیروی میکرد.
این سیستم به طور واضح مشخص کرد که کدام عناصر رابط کاربری حیاتی هستند و باید در نظر گرفته شوند:
متريال دیزاین همچنین توضیح داد که دقیقاً چگونه (و چرا) باید آنها را به شیوه خاصی طراحی کرد تا یک تجربه کاربر محور ایجاد شود.
حالا، واضح است که چرا «هدفمند» بخشی از این اصل بود. اما «برجسته» و «گرافیکی» چطور؟
در ابتدا، متریال دیزاین به شدت روی طراحی مبتنی بر شبکه، سلسلهمراتب تایپوگرافی شفاف، پالتهای رنگی جسورانه و انیمیشنهای معنادار (در میان چیزهای دیگر) تمرکز داشت.
برای اینکه به شما ایده بدهم که این موضوع چگونه به نظر میرسید، این ابزاری به نام مولد پالت رنگ متریال دیزاین است:
همانطور که میبینید، پالتهای رنگی ارائه شده توسط این ابزار، رنگهای روشن و متمایز دارند و با کنتراست بالا طراحی شدهاند تا توجه کاربر را جلب کنند.
این رویکرد جسورانه باعث میشود رابطهای کاربری از نظر بصری متمایز شوند و به راحتی قابل پیمایش و استفاده باشند.
در بخش بعدی، به بررسی عمیقتر اصل حرکت در متریال دیزاین خواهیم پرداخت.
متوجه شدید که این رنگها چقدر روشن هستند؟ متریال دیزاین برای ایجاد کنتراست و عمق بیشتر در رابط کاربری، استفاده از پالتهای رنگی قویتر و جسورانهتر را پیشنهاد میکرد.
طراحی حرکتی ارتباطی با انیمیشن صرفاً برای سرگرمی ندارد. همانطور که در تمام جوانب متریال دیزاین، هدف این است که طراحی را هدفمندتر و تجربه کاربری را شهودیتر کند.
متريال دیزاین در سه مورد استفاده از حرکت (ظریف) در طراحی را توصیه میکند:
همانطور که میبینید، انیمیشن ظریف میتواند تعامل و واکنشپذیری رابط کاربری را افزایش دهد و تجربه کاربری لذتبخشتری ایجاد کند.
کل صفحات واسطه (اینترستیشالها) هم میتوانند انیمیشن داشته باشند. برای مثال، در حالی که کاربران منتظر باز شدن صفحه جدیدی هستند.
در واقع، همه چیز به این بستگی دارد که آیا در آن نقطه خاص از سفر کاربر، حرکت برای آگاهسازی، جلب توجه یا بیان احساس، ضروری است یا خیر.
مانند نمونههای قبلی خود، متریال دیزاین هم در نهایت به نقص بزرگی برخورد کرد که به رفع نیاز داشت.
این نقص، سیاهی و سفیدی بیش از حد بود. به معنای واقعی کلمه، همه چیز برای طراحان دیکته شده بود، به این صورت که “اینگونه است که طراحی خوب انجام میشود. از رهنمودهای من پیروی کنید.”
باید واضح بگویم، کار کردن با یک الگو یا اجزای آماده، هیچ مشکلی ندارد. اما مشکل متریال دیزاین این بود که همه از یک سیستم طراحی و قوانین یکسان استفاده میکردند.
یک سیستم طراحی، قرار است برای یک برند ساخته شود تا سبک بصری منحصر به فرد آن توسعه یافته، به طور ثابت اعمال و حفظ شود.
اما زمانی که یک سیستم طراحی در دسترس عموم قرار میگیرد – با هدف ساخت سریع و بدون دردسر اپلیکیشن یا وبسایت – همه به روی آن میپرند.
در نتیجهی این موضوع، تمام وبسایتها و اپلیکیشنها ظاهری مشابه به هم پیدا کردند.
در سال ۲۰۱۸، گوگل در پاسخ به واکنشهای منفی جامعه طراحی (و به صورت غیرمستقیم از کاربران که دیگر نمیتوانستند اپلیکیشنها و وبسایتها را از هم تشخیص دهند)، به صورت غیررسمی متریال دیزاین ۲.۰ را منتشر کرد.
تا به امروز، بخش زیادی از سیستم اصلی متریال دیزاین دستنخورده باقی مانده است. برخی بهروزرسانیها برای تطبیق با دنیای مدرن انجام شدهاند.
برای مثال، تأکید بیشتری بر فضای سفید، استفاده از نوارهای ناوبری پایین و گنجاندن مجموعههای آیکونهای رنگارنگ وجود دارد. همچنین، حالت تاریک نیز اکنون در دسترس است.
علاوه بر این، بر روی دسترسپذیری وب و بینالمللیسازی تأکید زیادی شده است.
همانطور که دیدیم، متریال دیزاین به طور قطع همراه با گذر زمان، به تغییر خطمشیها و توصیههای خود ادامه میدهد.
متريال دیزاین ۳ یک سیستم طراحی است که توسط گوگل ایجاد شده تا زبان بصری همگونی برای طراحان و توسعهدهندگان اپلیکیشن فراهم کند.
این سیستم بر بهینهسازی تجربه کاربری با تأکید بر تعامل واکنشپذیر، حرکت و انتقالهای معنادار تمرکز دارد. متریال دیزاین ۳ با طراحی انعطافپذیر و اجزای مقیاسپذیرش، هدفش ایجاد یک ظاهر و احساس سازگار در تمام پلتفرمها است.
متریال دیزاین 3 شامل ویژگی های زیر میباشد:
تعامل واکنشپذیر: متریال دیزاین ۳، اولویت را به ورودی کاربر داده و بازخورد فوری ارائه میکند تا تجربهای یکپارچه و تعاملی ایجاد کند. این سیستم، طراحان را تشویق میکند تا از انیمیشنهای انتقالی و حرکت برای بهبود قابلیت استفاده کلی بهره ببرند.
سطحبندی و سایهها: متریال دیزاین ۳ از سطحبندی و سایهها برای ایجاد عمق استفاده میکند که به سازماندهی بهتر اجزای رابط کاربری و مسیریابی سادهتر کمک میکند.
تمبندی و تایپوگرافی: متریال دیزاین ۳، یک سیستم تمبندی قوی ارائه میدهد که به طراحان امکان میدهد طرحهای رنگی هماهنگ و سازگار ایجاد کنند. علاوه بر این، بر تایپوگرافی خوانا و قابل دسترس تأکید میکند.
امیدوارم که این مقاله برای شما مفید واقع شده باشد. در صورت نیاز به سفارش طراحی اپلیکیشن میتوانید با من در ارتباط باشید.
در بحث برنامه نویسی شی گرایی با مفاهیم به نام اینترفیس ( Interface ) و کلاس های Abstract روبرو هستیم
در بحث برنامه نویسی شی گرایی با مفاهیم به نام اینترفیس ( Interface ) و کلاس های Abstract روبرو هستیم که کارکرد و شباهت های زیادی به هم دارند.
افراد تازه کار معمولا تفاوت این دو مورد را نمیتوانند به خوبی درک کنند و در این مقاله به این مورد میپردازیم.
مثال های این بخش به زبان کاتلین است و مناسب کسانی که در حال آموزش برنامه نویسی اندروید هستند.
اینترفیس (Interface) در برنامهنویسی یک قرارداد (Contract) است که تعیین کنندهی مشخصهها و عملکردهایی است که یک کلاس باید پیادهسازی کند.
به عبارت دیگر، اینترفیس یک نوع مشخص برای ارتباط بین کلاسها است که تضمین میکند که کلاسهایی که آن را پیادهسازی میکنند، مشخصهها و عملکردهای مورد نیاز را دارند.
در برنامهنویسی شیءگرا، Interface به عنوان یک قرارداد میان کلاسها عمل میکند.
در برنامه نویسی شی گرا، اینترفیسها برای تعریف رفتارهای مشترک بین کلاسها استفاده میشوند. استفاده از اینترفیسها میتواند به بهبود انعطافپذیری و قابلیت استفاده از کد کمک کند.
در زبان کاتلین Kotlin نیز میتوان از اینترفیسها برای تعریف قراردادهای مشترک استفاده کرد.
در زیر یک مثال از چگونگی تعریف و استفاده از اینترفیس در کاتلین آورده شده است:
interface MyInterface {
fun myMethod()
}
class MyClass : MyInterface {
override fun myMethod() {
println("MyMethod implementation in MyClass")
}
}
fun main() {
val myObject = MyClass()
myObject.myMethod()
}
در این مثال، MyInterface
یک اینترفیس با یک متد به نام myMethod
است. سپس کلاس MyClass
این اینترفیس را پیادهسازی میکند و متد myMethod
را پیادهسازی میکند.
در نهایت، یک نمونه از MyClass
ایجاد شده و متد myMethod
از طریق این نمونه فراخوانی میشود.
توضیحات تکمیلی داکیومنت رسمی کاتلین: Kotlin Interface
با استفاده از اینترفیسها، میتوانید کد خود را به گونهای بنویسید که مستقل از کلاسهای خاص باشد. به این ترتیب، میتوانید کد خود را بدون نیاز به تغییر آن برای کلاسهای جدید، مجدداً استفاده کنید.
در اینجا چند مزیت استفاده از اینترفیسها در برنامه نویسی شی گرا آورده شده است:
یک کلاس Abstract (که به عنوان “کلاس انتزاعی” هم نامیده میشود) در برنامهنویسی یک نوع کلاس است که نمیتوانید از آن یک نمونه مستقیم ایجاد کنید.
این کلاسها معمولاً برای ارائه یک پایه انتزاعی برای کلاسهای زیرمجموعه (subclasses) استفاده میشوند.
یک کلاس Abstract میتواند شامل متدهایی با بدنههای (implementations) ناقص یا حتی بدون بدنه (abstract) باشد.
در کاتلین یک کلاس Abstract نیاز به کلمه کلیدی abstract
دارد. متدهای Abstract با استفاده از کلمه کلیدی abstract
بدون بدنه تعریف میشوند.
abstract class MyAbstractClass {
// متد Abstract بدون بدنه
abstract fun myAbstractMethod()
// متد با بدنه
fun myConcreteMethod() {
println("Concrete method in abstract class")
}
}
اهمیت کلاسهای Abstract در این است که اجازه میدهند یک ساختار ارثبری (inheritance) برای کلاسهای زیرمجموعه ایجاد شود و میتوانند به عنوان یک پایه مشترک برای کلاسهای مشتق شده عمل کنند.
استارتاپ چیست؟ نکات مهم برای یادگیری
به بیان دیگر سایر کلاس ها نیز میتوانند از این نوع کلاس ها ارث بری کنند.
تا اینجا با ساختار هر دو مورد به خوبی آشنا شدیم و دیدیم که تقریبا کارهای مشابهی انجام میدهند. اما چه تفاوتی باهم دیگر دارند؟
به طور کلی، اینترفیسها برای ارائه یک قرارداد برای پیادهسازی متدها و ایجاد ارتباطات چندگانه (multiple inheritance) مناسب هستند، در حالی که کلاسهای Abstract بیشتر برای ارائه یک پایه مشترک برای کلاسهای مشتق شده و افزودن قابلیتهای مشترک استفاده میشوند.
در صورت نیاز به پروژه برنامه نویسی میتوانید به بخش سفارش طراحی اپلیکیشن مراجعه کنید.
در صورت نیاز برای صحبت درباره پروژه و همکاری ترجیحا ابتدا از طریق فرم تماس و یا واتساپ, تلگرام پیام دهید
تلفن: 09019655342 فقط برای پیام در واتساپ ایمیل: call@hesam.cc