طراحی مفهومی ارسال لیست کالا

125

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

»» قبل از هر چیزی، از شما دعوت می کنم که ویدئوی فوق را جهت مشاهده ی دموی مثالی که در این مقاله قصد دارم درباره ی آن صحبت کنم را مشاهده کنید.

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

زمانی که کاربر به سبد خرید می رود و روی دکمه ی ارسال کالا کلیک می کند ما می توانیم با بهره گیری از طراحی مفهومی و UI Motion بار دیگر، این حس لذت بخش خرید آنلاین را به کاربر خود منتقل کنیم. به گونه ای که کاربر زمانی که بر روی دکمه ارسال کالا کلیک می کند حس کند کالاها از سبد خرید برداشته می شوند و در یک وسیله ی نقلیه مانند کامیون قرار می گیرند و به سمت او حرکت می کنند.

حال قصد دارم مثال دوم را برای شما پیاده سازی کنم و شما می توانید با ایده های بهتر و تغییر کدهایی که در اختیار شما قرار می دهم طراحی مفهومی تری را به کاربران وب سایت خود ارائه دهید.

در مقاله ای دیگر، به شما نشان خواهم که چطور می توانید مثال اول را با کمک طراحی مفهومی و UI Motion طراحی و پیاده سازی نمود.

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


گام اول : کدهای HTML


ابتدا یک فایل با پسوند html ایجاد نمائید و به عنوان مثال، نام آن را index قرار دهید. سپس در بخش body آن، کدهای SVG زیر را کپی کنید:

آیا با تگ SVG در HTML آشنایی دارید؟ اگر ندارید، اصلا نگران نباشید. به زودی در وب سایت اُکسیما آموزش های مفصلی در این خصوص منتشر خواهیم کرد.


گام دوم : کدهای CSS


حال در محلی که فایل index.html خود را ایجاد کردید یک پوشه با نام css ایجاد کنید و سپس در آن یک فایل با پسوند css قرار دهید و نام آن را به عنوان مثال، style قرار دهید. سپس آن را با یک ادیتور باز کنید و کدهای زیر را در آن کپی کنید:

	
	body {
	  background: #52C1BC;
	}

	#ship-it {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  -webkit-transform: translate(-50%, -50%);
			  transform: translate(-50%, -50%);
	  max-width: 600px;
	  overflow: visible;
	}

	.hidden {
	  visibility: hidden;
	}

	.wip {
	  opacity: 0.5;
	}

	.clickable {
	  cursor: pointer;
	  opacity: 0.01;
	}
	
	

حال بابد فایل style.css را به فایل index.html ضمیمه کنیم. برای این منظور، کد زیر را در بخش head فایل index.html قرار دهید:


گام سوم : کدهای Javascript


قرار دادن کدهای زیر در بخش body فایل index.html :

یک تگ script به صورت باز و بسته بعد از کد فوق ایجاد کنید و کدهای جاوااسکریپت زیر را در آن کپی کنید:

	
	;(function () {

	  var menu = {
		charPos: [288, 271, 241, 214, 184, 154, 118, 89, 58, 32, 0],
		init: function init() {
		  this.inject();
		  this.cacheDOM();
		  this.setStart();
		  this.makeTimeline();
		  this.bindEvents();
		},
		inject: function inject() {
		  document.head.insertAdjacentHTML('beforeend', '');
		  document.body.insertAdjacentHTML('beforeend', '');
		},
		cacheDOM: function cacheDOM() {
		  this.target = document.querySelector("[data-menu=target]");
		  this.svg = document.querySelector("[data-menu=svg]");
		  this.singles = ["icon", "iconBox", "titleBox", "social", "links", "twitter", "dribbble", "instagram", "linkedin", "github", "message", "hearts"];
		  this.multiples = ["chars", "boxes", "textLinks", "arrows"];
		  this.s = {};
		  this.m = {};
		  for (var i = 0; i < this.singles.length; i++) {
			this.s[this.singles[i]] = this.svg.querySelector("[data-menu=" + this.singles[i] + "]");
		  }

		  for (var i = 0; i < this.multiples.length; i++) {
			this.m[this.multiples[i]] = this.svg.querySelectorAll("[data-menu=" + this.multiples[i] + "]");
		  }

		  this.social = [menu.s.twitter, menu.s.dribbble, menu.s.instagram, menu.s.linkedin, menu.s.github];
		},
		bindEvents: function bindEvents() {
		  this.target.addEventListener("mouseover", menu.show);
		  this.target.addEventListener("mouseout", menu.hide);
		  this.s.links.addEventListener("mouseover", function (e) {
			menu.animateLinkIn(e);
		  });
		  this.s.links.addEventListener("mouseout", function (e) {
			menu.animateLinkOut(e);
		  });
		  this.s.social.addEventListener("mouseover", function (e) {
			menu.animateSocialIn(e);
		  });
		  this.s.social.addEventListener("mouseout", function (e) {
			menu.animateSocialOut(e);
		  });
		  this.svg.addEventListener("click", function (e) {
			menu.trackEvent(e);
		  });
		},
		setStart: function setStart() {
		  TweenMax.set(menu.target, { width: "55", height: "55" });
		  TweenMax.set(menu.s.icon, { attr: { fill: "rgba(246, 193, 85, 0.7)" } });
		  TweenMax.set(menu.s.iconBox, { attr: { fill: "rgba(25, 45, 58, 0.5)", stroke: "rgba(55, 95, 108, 0.5)", width: "50" } });
		  TweenMax.set(menu.m.chars, { x: 0, autoAlpha: 0 });
		  TweenMax.set(menu.m.textLinks, { x: -30, autoAlpha: 0 });
		  TweenMax.set(menu.m.arrows, { x: -30, autoAlpha: 0 });
		  TweenMax.set(menu.social, { y: -50 });
		  TweenMax.set(menu.s.message, { y: -120 });
		  TweenMax.set(menu.s.hearts, { y: -130 });
		  TweenMax.set(menu.m.boxes[0], { y: -150, autoAlpha: 0 });
		  TweenMax.set(menu.m.boxes[1], { y: -60 });
		  TweenMax.set(menu.m.boxes[2], { y: -150 });
		  TweenMax.to(menu.target, 1, { autoAlpha: 1, delay: 0 });
		},
		show: function show() {
		  menu.tl.play().timeScale(1);
		},
		hide: function hide() {
		  menu.tl.reverse().timeScale(2);
		},
		animateLinkIn: function animateLinkIn(e) {
		  var group = e.target.parentNode;
		  var arrow = group.querySelector("[data-menu=arrows]");
		  var text = group.querySelector("[data-menu=textLinks]");

		  TweenMax.to(arrow, 0.3, { x: 8, ease: Back.easeOut.config(2) });
		  TweenMax.to(text, 0.3, { x: 5, ease: Back.easeOut.config(2), delay: 0.1 });
		  TweenMax.to([arrow, text], 0.3, { attr: { fill: "#F6C155" } });
		},
		animateLinkOut: function animateLinkOut(e) {
		  var group = e.target.parentNode;
		  var arrow = group.querySelector("[data-menu=arrows]");
		  var text = group.querySelector("[data-menu=textLinks]");

		  TweenMax.to(arrow, 0.3, { x: 0, ease: Back.easeOut.config(2) });
		  TweenMax.to(text, 0.3, { x: 0, ease: Back.easeOut.config(2), delay: 0.1 });
		  TweenMax.to([arrow, text], 0.3, { attr: { fill: "#FFEECC" } });
		},
		animateSocialIn: function animateSocialIn(e) {
		  var target = e.target.parentNode;
		  var id = target.getAttribute("data-menu");
		  var colors = {
			dribbble: "#EA4C89",
			twitter: "#1DA1F2",
			linkedin: "#1985BD",
			github: "#af49a9",
			instagram: "#F98C46"
		  };
		  var color = colors[id] ? colors[id] : "yellow";

		  TweenMax.to(target, 0.3, { fill: color });
		  TweenMax.to(target, 0.3, { scale: 1.2, transformOrigin: "center", ease: Back.easeOut.config(5) });
		},
		animateSocialOut: function animateSocialOut(e) {
		  var target = e.target.parentNode;

		  TweenMax.to(target, 0.3, { fill: "#FFEECC", scale: 1, transformOrigin: "center" });
		},
		makeTimeline: function makeTimeline() {
		  this.tl = new TimelineMax({ paused: true });

		  this.tl.to(menu.target, 0.2, { width: "300", height: "360", ease: Power1.easeInOut }, 0).to(menu.s.iconBox, 0.2, { attr: { fill: "rgba(25, 45, 58, 1)", stroke: "rgba(25, 45, 58, 1)", width: "337" }, ease: Power1.easeInOut }, 0).staggerTo(menu.m.chars, 0.3, { cycle: { x: menu.charPos }, ease: Back.easeOut.config(1) }, 0.01, 0).staggerTo(menu.m.chars, 0.2, { autoAlpha: 1, ease: Back.easeOut.config(1) }, 0.01, 0.1).to(menu.m.boxes[0], 0.3, { y: 0, autoAlpha: 1, ease: Back.easeOut.config(1) }, 0.2).to(menu.m.boxes[1], 0.3, { y: 0, ease: Back.easeOut.config(1) }, 0.2).to(menu.m.boxes[2], 0.3, { y: 0, ease: Back.easeOut.config(1) }, 0.2).staggerTo(menu.m.textLinks, 0.3, { x: 0, autoAlpha: 1, ease: Back.easeOut.config(1) }, -0.1, 0.25).staggerTo(menu.m.arrows, 0.4, { x: 0, autoAlpha: 1, ease: Back.easeOut.config(1) }, -0.1, 0.25).staggerTo(menu.social, 0.3, { y: 0, ease: Back.easeOut.config(1) }, 0.05, 0.4).to(menu.s.message, 0.5, { y: 0, ease: Back.easeOut.config(1) }, 0.55).to(menu.s.hearts, 1, { y: 0, ease: Back.easeOut.config(1) }, 0.55).from(menu.s.hearts, 0.5, { autoAlpha: 0, ease: Back.easeOut.config(1) }, 0.75);
		},
		trackEvent: function trackEvent(e) {
		  var label = e.target.getAttribute("data-link");
		  if (label) {
			ga('send', 'event', {
			  eventCategory: 'Menu links',
			  eventAction: 'clicked a link',
			  eventLabel: label,
			  transport: 'beacon'
			});
		  }
		}
	  };

	  menu.init();
	})();

	(function (i, s, o, g, r, a, m) {
	  i['GoogleAnalyticsObject'] = r;i[r] = i[r] || function () {
		(i[r].q = i[r].q || []).push(arguments);
	  }, i[r].l = 1 * new Date();a = s.createElement(o), m = s.getElementsByTagName(o)[0];a.async = 1;a.src = g;m.parentNode.insertBefore(a, m);
	})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

	ga('create', 'UA-91322471-1', 'auto');
	ga('send', 'pageview');;
	// Animatables
	var list = document.querySelector('[data-anim=list]'),
		listBg = document.querySelector('[data-anim=list-bg]'),
		items = document.querySelectorAll('[data-anim=list-item]'),
		ripple = document.querySelector('[data-anim=ripple]'),
		ripple = document.querySelector('[data-anim=ripple]'),
		btnBg = document.querySelector('[data-anim=btn-bg]'),
		btnLabel = document.querySelector('[data-anim=btn-label]'),
		btnShadow = document.querySelector('[data-anim=btn-shadow]'),
		frontGroup = document.querySelector('[data-anim=front-group]'),
		frontWheels = document.querySelectorAll('[data-anim=front-wheel]'),
		frontWheelBack = document.querySelector('[data-anim=front-wheel-back]'),
		backWheels = document.querySelectorAll('[data-anim=back-wheel]'),
		backWheelsBack = document.querySelectorAll('[data-anim=back-wheel-back]'),
		containerParts = document.querySelectorAll('[data-anim=container-part]'),
		containerLip = document.querySelector('[data-anim=container-lip]'),
		container = document.querySelector('[data-anim=container]'),
		truckBtn = document.querySelector('[data-anim=truck-btn]'),
		shippedBtn = document.querySelector('[data-anim=btn-shipped]');

	// Interactive
	var btnArea = document.querySelector('[data-click=btn]');

	// Listeners
	btnArea.addEventListener('click', btnHandler);

	// Handlers
	function btnHandler(e) {
	  getBtnTl(getClickCoords(e)).play();
	  shipItTl.restart();
	}

	// Animations
	TweenLite.defaultEase = Back.easeOut.config(1);

	function getBtnTl(coords) {
	  var btnTl = new TimelineMax({ paused: true });

	  btnTl.fromTo(btnShadow, 0, { autoAlpha: 1 }, { autoAlpha: 0 }, 0).to(ripple, 0, { x: coords.x, y: coords.y }, 0).fromTo(ripple, 0.5, { autoAlpha: 0.5, scale: 0 }, { autoAlpha: 0, scale: 20, transformOrigin: 'center', ease: Power1.easeOut }, 0);

	  return btnTl;
	}

	var shipItTl = new TimelineMax({ paused: true, onComplete: reset }),
		listTl = new TimelineMax({ paused: true }),
		truckTl = new TimelineMax({ paused: true });

	shipItTl.add(listTl.play(), 0).add(truckTl.play(), 0.2);

	listTl.to(list, 0.3, { y: -10, ease: Power1.easeInOut }, 0).to(list, 0.05, { y: 0, ease: Power1.easeIn }, 0.3).fromTo(items[0], 0.15, { y: 0 }, { y: 85, ease: Linear.easeNone }, 0.35).fromTo(items[1], 0.15, { y: 0 }, { y: 138, ease: Linear.easeNone }, 0.35).fromTo(items[2], 0.15, { y: 0 }, { y: 178, ease: Linear.easeNone }, 0.35).fromTo(items, 0, { autoAlpha: 1 }, { autoAlpha: 0 }, 0.5).to([btnBg, btnLabel], 0.15, { scaleX: 1.05, transformOrigin: 'center', ease: Power1.easeInOut, repeat: 1, yoyo: true }, 0.5).to([btnBg, btnLabel], 0.15, { scaleY: 0.95, ease: Power1.easeInOut, repeat: 1, yoyo: true }, 0.5);

	truckTl.set(frontGroup, { x: -50, scale: 0.84, transformOrigin: 'left top', autoAlpha: 1 }).set([frontWheels, frontWheelBack], { y: -25, autoAlpha: 1 }).set(frontWheels[1], { autoAlpha: 0 }).set(container, { scale: 0.98, transformOrigin: 'right top', autoAlpha: 1 }).set([containerParts, containerLip], { y: -15, autoAlpha: 1 }).set(containerParts[2], { autoAlpha: 0.5 }).set([backWheels, backWheelsBack], { y: -30, autoAlpha: 1 }).to(container, 0.5, { scale: 1 }, 0).staggerTo(containerParts, 0.5, { y: 0 }, -0.1, 0.2).to(containerLip, 0.5, { y: 0 }, 0.6).staggerTo(backWheelsBack, 0.5, { y: 0 }, -0.1, 0.55).staggerTo(backWheels, 0.5, { y: 0 }, 0.1, 0.6).to(frontGroup, 0.6, { scale: 1, x: 0, ease: Back.easeOut.config(1.4) }, 0.7).to(frontWheelBack, 0.5, { y: 0 }, 0.8).to(frontWheels, 0.5, { y: 0, ease: Back.easeOut.config(5.4) }, 0.9).to(frontWheels[1], 0, { autoAlpha: 1 }, 1.05).to(shippedBtn, 0, { autoAlpha: 1 }, 1.05).fromTo(truckBtn, 1.2, { x: 0 }, { x: '+=1000', ease: Back.easeIn.config(0.5) }, 1.4).fromTo(truckBtn, 0.5, { autoAlpha: 1 }, { autoAlpha: 0, ease: Power1.easeIn }, 2);

	function reset() {

	  var resetTl = new TimelineMax({ paused: true });

	  resetTl.set(items, { y: 0 }).set(truckBtn, { x: 0 }).set(frontGroup, { x: -50, scale: 0.84, transformOrigin: 'left top', autoAlpha: 1 }).set([frontWheels, frontWheelBack], { y: -25, autoAlpha: 1 }).set(frontWheels[1], { autoAlpha: 0 }).set(container, { scale: 0.98, transformOrigin: 'right top', autoAlpha: 1 }).set([containerParts, containerLip], { y: -15, autoAlpha: 1 }).set(containerParts[2], { autoAlpha: 0.5 }).set([backWheels, backWheelsBack], { y: -30, autoAlpha: 1 }).to(items, 0.5, { autoAlpha: 1, y: 0, ease: Power1.easeInOut }, 0.01).to(truckBtn, 0.5, { autoAlpha: 1, ease: Power1.easeInOut }, 0.01);

	  resetTl.restart();
	};

	// Functions
	function getClickCoords(e) {

	  var svgRect = document.querySelector('#ship-it').getBoundingClientRect(),
		  btnRect = document.querySelector('[data-anim=btn-bg]').getBoundingClientRect(),
		  pixelCoordSample = btnRect.left - svgRect.left,
		  svgCoordSample = 88,
		  normFactor = pixelCoordSample / svgCoordSample,
		  src = {
		x: e.clientX,
		y: e.clientY,
		xMin: btnRect.left,
		xMax: btnRect.left + btnRect.width,
		yMin: btnRect.top,
		yMax: btnRect.top + btnRect.height
	  },
		  rpl = {
		xMin: -btnRect.width / 2 / normFactor,
		xMax: btnRect.width / 2 / normFactor,
		yMin: -btnRect.height / 2 / normFactor,
		yMax: btnRect.height / 2 / normFactor,
		offset: parseInt(ripple.getAttribute('r'))
	  };

	  var coords = {
		x: map(src.x, src.xMin, src.xMax, rpl.xMin, rpl.xMax) + rpl.offset,
		y: map(src.y, src.yMin, src.yMax, rpl.yMin, rpl.yMax) + rpl.offset
	  };

	  return coords;
	}

	function map(value, sourceMin, sourceMax, destinationMin, destinationMax) {
	  return destinationMin + (destinationMax - destinationMin) * ((value - sourceMin) / (sourceMax - sourceMin)) || 0;
	}
	
	
پیوست ها :
  • این مقاله دارای پیوست نمی باشد.
loder | اُکسیما
»» نویسنده مقاله
علیرضا رئیسی | اُکسیما

علیرضا رئیسی
»» پشتیبانی مقاله

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


به اشتراک بگذارید ...

دوستان و همراهان گرامی : آیا تمایل دارید این مقاله را با دوستان و آشنایان خود در تلگرام به اشتراک بگذارید؟

[ مشاهده همه ]

مقاله های پیشنهادی

PjtZ8 | اُکسیما
فرم عضویت در خبرنامه به سبک مینیمالیستی

نویسنده: علیرضا رئیسی
145
T4bEX | اُکسیما
اسلایدر تصویر Untitled Slider با CSS

نویسنده: علیرضا رئیسی
91
odn1i | اُکسیما
طراحی مفهومی ارسال لیست کالا

نویسنده: علیرضا رئیسی
125
polygon_drawing | اُکسیما
ابزار نقاشی چند ضلعی

نویسنده: حسین رئیسی
181
matisse | اُکسیما
کتابخانه Matisse

نویسنده: حسین رئیسی
317
fancybutton | اُکسیما
کتابخانه FancyButton

نویسنده: حسین رئیسی
252
flutter_reactnative | اُکسیما
مقایسه Flutter و ReactNative

نویسنده: حسین رئیسی
425
best_language | اُکسیما
8 زبان برتر برنامه نویسی برای یادگیری در سال 2018

نویسنده: حسین رئیسی
369
android_library | اُکسیما
۲۵ کتابخانه برتر اندروید در سال 2018

نویسنده: حسین رئیسی
249
ui_ux | اُکسیما
تفاوت بین طراحی UX و UI چیست؟

نویسنده: حسین رئیسی
397
realm | اُکسیما
دیتابیس Realm

نویسنده: حسین رئیسی
186
fuchsia | اُکسیما
Fuchsia چیست؟

نویسنده: حسین رئیسی
352
dialogbuilder | اُکسیما
کتابخانه DialogBuilder

نویسنده: حسین رئیسی
126
progressbutton | اُکسیما
کتابخانه ProgressButton

نویسنده: حسین رئیسی
150
placeholderview | اُکسیما
PlaceHolderView نمایشی برای تمام لیست ها

نویسنده: حسین رئیسی
130
common_traits_programmers | اُکسیما
۹ ویژگی مشترک برنامه نویسان بزرگ

نویسنده: حسین رئیسی
218
code_books | اُکسیما
9 مورد از بهترین کتاب های برنامه نویسی

نویسنده: حسین رئیسی
227
programmer_warning | اُکسیما
10 اشتباه در یادگیری برنامه نویسی که درست نمی باشند

نویسنده: حسین رئیسی
88