ویدیو های طراحی رابط کاربری (html 5 - css3 - jQuery)

[sinoser]

سلام به همه ی همکاری عزیز

یک ساله رو موضوع اصول طراحی رابط های کاربری ایده ال و جدید کار می کنم
حتی توی سایت های خارجی هم رفرنس جامع و کاملی ندیدم
دارم این مطالب رو جمع و جور میکنم و با کلیپ و مطلب برای همه می ذارم
گفتم برای همکاری عزیزم توی این فروم تخصصی خوب هم بذارم

کانال های کلیپ های اموزشی

.:::: youTube
http://www.youtube.com/sinoserClips

.:::: آپارات
http://www.aparat.com/sinoserclips

و برای مشاهده مطالب در زمینه جدید ترین تکنیکای طراحی رابط خوب با تمرکز روی اصل تحلیل کاربر
به پیج sinoser مراجعه کنید

:: البته من بعضی از مطالب مهم رو توی همین تاپیک می ذارم

https://www.facebook.com/sinoser.page

(دیدنش مطمعا باش خالی از لطف نیست در 5 روز که از عمرش می گذره 182 لایک گرفته)

خوشحال میشم اگر رفرنس ها و مقالت خوبی دارید به ایمیلم ارسال کنید

[sinoser]

دقت کاربرانتان بر تعداد ستونهایی که عرض صفحه دارید تقسیم می شود

در مدل های UI جدید طرح لایه ای محتوا ها رو مطرح کردن
در این مدل که سایت که لینک آن در زیر ذکر شده مثالی از آن است
دقت و تمرکز کاربر را روی مطلب خاص خودش فکوس می دهد و این باعث درک بیشتر کاربر و ارتباط بیشتر کاربر با آن مطلب می شود

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

http://www.spelltower.com/
(این سایت مثالی بر مدل تاثیر پذیری مطالب از اسکرول نیز هست)*

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


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


نتیجه آخر :
مدل سطح مطلب به تمرکز کاربر کمک می کند

http://upload7.ir/images/98959561253817888132.png

[sinoser]

وقتی از کاربتون سوال می کنید اینو رو همیشه به یاد داشته باشید که در اکثر موارد کاربران از سوال کردن شما خوششان نمی آید

اصل ساده سازی که من مثل استفاده خوب از رنگ ها بر اون تاکیید شدید دارم توی فرم های ارتباطی کاربر جلوه بیشتری می کنه

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

دریافت پاسخ این سوال رو هم می تونیم به شکل لیست هم با دکمه های رادیویی و هم با دکمه ها معمولی بکنیم اما تنها دکمه های معمولی مناسب هستنتد

شاید برای شما مسخره باشه این حرف که برای پاسخ دادن کاربر به سوال شما نیاز به حداقل 2 کلیک در لیست ها هست .
فرض کنید 5 لیست دیگر هم باشد و در مجموع میشه 10 کلیک
اما وقتی بتوانید با یک تکینک و تغییر ساده تعداد کلیک های کاربر رو از 10 به 5 یعنی به نصف کاهش بدید خب استفاده از لیست برای جواب به این سوالی که می تونه 3 تا 5 جواب داشته باشه مسخرس (برای تعداد جواب های بیشتر به ناچار فعلا از لیست استفاده می کنیم البته در اینده تکنیکی می گم که جای لیست رو می گیره)

خب می گید دکمه های رادیویی رو چرا گفتیم بده اونا که تعداد کلیک هاش خوبه
باید گفت بدی این دکمه ها , کوچک بودن محدوده کلیک اونا هست
شاید اینم مسخره باشه که بگیم مغز کاربر باید دقت بیشتری کنه تا اون مورد انتخاب بشه (باید موس رو در محدوده 12*12 پیکسلی ببره و کلیک کنه) اما وقتی بتوانید با یک تکینک و تغییر ساده کار کار بر رو ساده کنیم استفاده از این دکمه ها مسخره میشه


نتیجه : استفاده از دکمه معمولی به جای لیست و دکمه های رادیویی باعث راحتی کاربر و رضایت مشتری میشه

http://upload7.ir/images/18956776227554171187.png

[sinoser]

باز هم فرم ها
سایتی که بتونه حتی بازدید کننده هاشو بشناسه مطمعنا فروش و راندمان بهتری خواهد داشت

اما همیشه به اسن مشکل بر می خوریم که چطور این کاربرای شیطون رو مجبور کنیم تا ثبت نام کنن و حالا که ثبت نام کردن اطلاعات درستی وارد کنن

بله باید اجبار رو حذف کرد !
مخصوصا اگر کاربرای شما جونای این روزی باشن ...

ادامه در پیج sinoser
https://www.facebook.com/sinoser.page

http://upload7.ir/images/74326530305333805365.png

[sinoser]

خب هر کس دوست داره دکور و رنگ و ... خونشو با سلیقه خودش بچینه و انتخاب کنه

این کار حس مالکیت رو به کاربرمون القا می کنه و توی محیط بیشتر راحته

توجه ::
این نکته فقط و فقط برای دوستانی هست که کاربشون پنل کاربری کاربردی داره (مثل روم ها یا سایت های فروش محصولات )

یا

cms های اختصاصی که دوستان طراحی می کنن


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

http://upload7.ir/images/58345247695233874250.png
https://www.facebook.com/sinoser.page

[sinoser]

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

حتما هنگام طراحی استایل صفحات برایتان پیش آمده که یک شکل یکسان اما با رنگ ها متفاوت را داشته باشید مثلا 4 تب یک منو کشویی افقی

و اولین گزینه هم به این نتیجه رسیدید که که 4 عکس با رنگه های متفاوت بگذارید و حالا حرفه ای تر ها این 4 عکس رو در 1 عکس قرار میدادن و با تغییر position عکس اون ها رو تنظیم می کردن تا لود سایت بهتره بشه

اما یک راه بهتر هم وجود داره اونم استفاده از قاب عکس هست
شما اون طرح جلد مورد استفاده رو با رنگ سفید و با تنظیم شفافت و کمک گرفتن از فیلتر آلفا عکس ها ایجاد کنید (فرمت عکس هم png بهتر هست)

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

این عکس را پس زمینه کلیه تب ها کنید و حالا موقع رنگ آمیزی است, برای رنگ آمیزی عکس ها فقط کافیست مقدار کد رنگ مورد نظرتون رو توی تنظیمات css باکس مورد نظرتون (عموما div ) نسبت دهید .

مزایایی این روش :
1- افزایش لود سایت
(اگر همه ی این جور تکنیکا رو رعایت کنید در مجموع شاید سرعت لود سایت نسبت به حالت عادی از نصف هم کمتر بشه )

2- کاهش حجم استایل ذخیره شده

3- سادگی در استفاده (چند بار اول ممکنه کمی سخت باشه)

توجه :: این تکنیک کمی حرفه ای تر هست و برای دوستان مبتدی فعلا پیشنهاد نمی شه چون باعث کندی روند یادگیری اونها میشه

منتظر تکنیکای بعدی sinoser باشید
اگر خوشتونم آمد لایک و شیر فراموش نشه
http://upload7.ir/images/81316859945087328461.png

[sinoser]

http://upload7.ir/images/12206922956325284012.png
https://www.facebook.com/sinoser.page

[sinoser]

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

حالا اگر همین لینک رو برای ثبت یک رویداد مثلا حذف چند مطلب یا ارسال فرم در نظر بگیریم باعث تداخل در تفکرات کاربر می شیم هر چند شاید خود کاربر به زبان نتونه اینو بگه !

از اون طرف هم دکمه ها برای ثبت یک عملیات هست و نباید از اون برای جا به جایی استفاده کرد البته تعریف دکمه با عکس فرق داره (بعد نگید مخالفم )

دکمه : به استایلی که دارای یک کادر مشخص که پس زمینه اون با پس زمینه زیرش متفاوت (حتی کمی) باشه و در داخلش عنوان دکمه وشته شده باشه!

http://upload7.ir/images/09792368511941146691.png

[sinoser]

خب هدف ما گفتیم ساده سازیه,درسته؟!
اینم گفتم ساده کردن به معنی حذف امکانات نیست, تا این جا درست!

خط چینام حتما واستون جالب بوده نه ؟!

درست متوجه شدید این تکنیک محل خاص استفاده داره اما چون در اکثریت موارد حالت تنظیمات تک تک برا هر کدام کاربرد داره درست معرفیش کردم

دلیلشم اینه که همیشه ساده سازی به معنی سادگی نیست گاهی شلوغی باعث سادگی میشه !!!

::::مزایای این روش
1- فاصله مکانی , مکان نمای موس تا لینک های تنظیماتی خیلی کمتر از این فاصله در مدل ارائه یک جا هست خب طبیعتا این راحت تره

2- کم کردن مراحل تا رسیدن نتیجه
در مدل ارائه یک جا نیازه که اول کاربر مورد خاص خودشو انتخاب کنه بعد بره روی لینک اعمال تنظیمات کلیک کنه که به جای این که 2 تا کلیک کنه از مدل ارئه در خط استفاده می کنیم تا بشه 1 کلیک .( در مورد این که حتی یک کلیک اضافی شاید مهم نباشه و کاربرم متوجه نشه اما توی ناخواگاه کاربر تاثیر میذاره و اونم تاثیر منفی و خسته کننده بودنه قبلا بحث کردیم)

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

مثلا اگر اینا همون ایمیل های داخل inbox باشن خب شاید ارسال به دیگریش یک تنظیم سطری باشه اما حذف می تونه در یک لحظه چند سطر رو شامل بشه

-> پس اینجاش که مدل ارئه یکجا به کار میاد

خیلیا دوست دارن هر 2 مدل رو کنار هم استفاده کنن
این مشکلی نداره و خوبه اما به یک شرط
اونم این که باکس ارائه یک جا فقط زمانی ظاهر بشه که بیش از یک سطر (حالا از ظریق checkbox ) انتخاب شده باشه تا اصل ساده سازی بازم خودشو نشون بده
http://upload7.ir/images/52451051840367340566.png
تکنیکهای بیشتر در : https://www.facebook.com/sinoser.page

[sinoser]

سلام
این مطلب همون جور که فهمیدید رنگ و بوی بازاریابیه بیشتری داره

گفتمم که یک تیم ایدال و موفق طراح رابط کاربری باید از 3 زیر گروه گرافیست , برنامه نویس و بازاریاب تشکیل بشه.

ذخب این طبیعیه که بازار یاب تیم طراحی رابط باید با مبانی وب اشنا باشه

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

به عنوان مثال همه بازاریاب ها می دون که ابزار ها و تبلیغات مفهومی خیلی تاثیر بیشتری دارند اما به شرطی که کاربر در محیط درک اون قرار بگیره

مثلا من توی یک پیج دیدم که یه نفر لب و لوچش انگار که به دیوار خورده باشه , بود خب من توی نگاه اول متوجه منظور تبلیغ کننده نشدم و وقتی متن رو خوندم دید نوشته تبلیغ مفهومی جوراب زنانه
خب من با خوندن متن متوجه شدم و خندیدم و لایک کردم
اما همیشه نیاز به متن نیست
گاهی با محیط می تونی القا کنی که موضوع ما فروش جوراب زنانس و هر کس تا به این عکس بر بخوره اگر البته ای کیوش زیر خط فقر نباشه بعد از لحظاتی متوجه اون میشه که اینجا هم باز اهمیت رابط کاربری سایت مطرح میشه!
ادامه در پیج sinoser
https://www.facebook.com/sinoser.page


http://upload7.ir/images/82929899425042969039.png

[sinoser]

اما یه تکنیک دیگه از mr sinoser
این برای بچه های برنامه نویس تیم طراحی رابط هست

خب هممون این میدونیم استفاده از المان های برنامه نویس به جای عکس خیلی توی سرعت لود سایت موثر هست پس وقتی امکان استفاده از این امکانات هست نباید شما از عکس استفاده کنی
حتی شکلی مثل قلب رو هم میشه با css ساخت
http://upload7.ir/images/11857952057207842215.png
توی صفحه که براتون ضمیمه کردم با مثال این اشکالو ساخته
(فقط هدفم یادگیری شماست و تبلیغ واسه اون سایت نیست و بهتره بگم اولین بارم بود این سایت رو دیدم :D)
http://rayanpc.weblogs.us/1390/09/21/آموزش-ساخت-اشکال-مختلف-با-استفاده-از-css/
امیدوارم این موردم به کارتون بیاد !

[sinoser]

اینم یک ویدیو آموزشی که می تونید توی 20 دقیقه با jQuery اشنا و مثالشو ببینید .
اما قبلش بگم من توی پیج هر روز اموزش های از رابط کاربری و برنامه نویسی رابط کاربری می ذارم.
دوستان اگر مایل بودن به ما بپیوندند و همین الان روز لینک زیر کلیک کنن مثلا این ویدیو با یک هفته تاخییر داره برای شما قرار داده میشه
https://www.facebook.com/sinoser.page

مشاهده در کانال های ودیویی sinoser
یوتیوب :http://www.youtube.com/sinoserClips

آپارات :http://www.aparat.com/sinoserclips

دانلود ویدیو با حجم 36 MB
http://sinoser.persiangig.com/sinoser-jQuery.rar/download

http://upload7.ir/images/14241047552121631396.png