ارائه؛ طراحی جدید کلیک‌یاب

× سیامک مختاری.
ارائه؛ طراحی جدید کلیک‌یاب

سلام. امیدوارم حالتون خوب و سرحال باشید. چند هفته‌ست از انتشار نسخه جدیدکلیک یاب، تبلیغات اینترنتی، می‌گذرد. از ابتدای کار تصمیم داشتم در نوشته‌ای به صورت فنی این پروژه را معرفی کنم. امروز قصد دارم نسخه جدید کلیک یاب که توسط من طراحی و اجرا شده است را بررسی کنم. طی جلساتی که با کلیک یاب داشتم، تصمیم گرفتیم طراحی جدید را من انجام دهم. بعد از گذشت چند جلسه تصمیم گرفتیم نسخه جدید به سبک مینیمال/ساده طراحی شود و به ساده‌ترین در عین حال کامل‌ترین حالت ممکن به بازدید کننده سرویس‌هایی که کلیک یاب ارائه می‌کند را معرفی کنیم. کلیک یاب در بهترین زمانی بود که می‌توانست تغییرات جدیدی در خودش ایجاد کند چون بازه کاربران زیادی را به خود دیده بود و می‌توانست تشخیص دهد چطور و چگونه باید تغییر کند. برای اسکچ اولیه حدود ۲ هفته زمان صرف شد تا کانسپت جدید را معرفی شود. در مسیر فرآیند طراحی متوجه شدم طراحی یک سایت با تعداد کاربران زیاد و گوناگون در ظاهر ساده است اما در اجرا بسیار سخت‌تر از اون چیزی هست که میشه تصورش را کرد و به تبع زمان پیش‌بینی شده، دقیق نخواهد بود.

طراحی

طراحی کلیک یاب یک طراحی مینیمال/ساده است که از ساختار رنگ‌های روشن استفاده و تا جای ممکن از تیره‌گی دوری می‌کند. ایده‌ی اصلی سبک طراحیDropbox بود. دراپ‌باکس به دلیل زیبایی که در حین سادگی داشت نظرمون را جلب کرد و سعی کردم از سبک کلی دراپ باکس الهام بگیرم و متناسب با فلسفه برند کلیک‌یاب آن را تلفیق کنم. رنگ‌ها از مستندات برندینگ کلیک‌یاب گرفته شده است تنها در میزان روشنایی رنگ‌ها تغییراتی دادم. در نگاه اول، طرح به صورت تخت دیده می‌شود اما در قسمت‌هایی از کار سایه‌ها و گرادینت‌ها نیز دیده می‌شوند. در طراحی تمامی کارها همواره سعی دارم از نظم خاصی پیروی کنم. به‌طور مثال در نسخه جدید کلیک‌یاب میزان گردی دو حالت اصلی دارد یا میزان سا‌یه‌ها از یک تابع ریاضیاتی ساخته می‌شوند. برخلاف نظر اکثریت تصمیم گرفتم از سایه‌ها استفاده کنم. سایه‌هایی که اصول‌محور اند. اندازه، میزان عمق آن‌ها کنترل شده است و طبق استانداردی ساخته می‌شوند. سایه‌های کلیک‌یاب از تلفیق فرمول ساخت سایه‌های متریال دیزاین با فرمول تجربی خودم حاصل شده است. تقریبا ۲ روز کامل ساخت این فرمول زمان برد.

Design Canvas § Clickyab.com

اساس‌نامه طراحی

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

Styleguide of Clickyab.com

تایپوگرافی

طراحی کلیک‌یاب در حال حاضر از فونت میترا (از دو وزن معمولی و ضخیم) استفاده می‌کند. دلیل انتخاب فونت متیرا وجود ظاهری نسبتا جدی و نبود گردی در تایپ‌فیس فونت است. در طول پروژه در کنار خوبی‌های ظاهری فونت میترا متوجه مشکلات فراوانی شدم که درموردشون توضیح خواهم داد:

  • اولین. مورد این است که فونت میترا در وزن معمولی در سایز استاندارد (۱۶ پیکسل)‌ بسیار ریز است و در مقایسه با فونت هایایران‌سنس،ایران‌شارپ وایرانیان‌سریف در سایز استاندارد متوجه این مشکل می‌شویم. بخاطر این مشکل سایز استاندارد را از ۱۶ پیکسل به ۱۸ پیکسل ارتقا دادم تا در مانیتورهایی که رزولوشن بالایی دارند فونت های ریز دیده نشوند ولی هم‌چنان در جاهایی این مشکل دیده می‌شود.
  • دومین. مورد این است که فونت میترا (در حال حاضر ۳ نسخه متفاوت برای وب بهینه شده است) متاسفانه هیچ نهاد یا شخصی این فونت را به درستی برای وب بهینه نکرده است و مشکلات زیادی در آن دیده می‌شود. با وجود مشکلات من سعی کردم از فونت میترا استفاده کنم و هرچه درباره تاپیوگرافی می‌دانم را بکار ببندم تا در نهایت ظاهر نوشته‌ها درست و قابل خواندن باشند.

در سیستم تایپوگرافی کلیک‌یاب ازنسبت طلایی(فی) – ۱:۶۱۸ استفاده کردم که اندازه‌ها به صورت تصاعدی تغییر می‌کنند و تناسبی بین عناوین با نوشته های معمولی ایجاد خواهد شد. در روند طراحی سیستم تایپوگرافی سعی داشتم تا جای ممکن و با وجود مشکلات فونت به شکلی طراحی انجام شود که کاربر به راحتی بتواند ارتباط برقرار کند. بیشترین زمانی که در تایپوگرافی مصرف شد، قسمتبلاگ کلیک‌یاب بود. ماهیت یک بلاگ، محتوا محور است و باید به شکلی اجرا شود که کاربر ترغیب شود تا باقی نوشته/نوشته‌ها را بخواند. در وبلاگ کلیک‌یاب تمام سعی‌ام این بوده که نوشته‌ها سامان پیدا کنند تا خواننده ترغیب به خواندن شود و تا جای ممکن از موارد اضافی جلوگیری کنم. تا تمرکز کاربر حفظ شود و بتواند به راحتی مطالب را دنبال کند.


تکنولوژی

دفتر اصلی کلیک‌یاب — ۲۲ تیر ۱۳۹۴.

در فاز اجرایی ری‌دیزاین کلیک‌یاب باید به شکلی اجرا می‌شد که قابل توسعه باشد. از زبان‌هایی سعی کردم استفاده کنم که زبان‌های کاملی باشند و توسعه آن به سادگی انجام گیرد. در روند اجرا از SCSS برای استایل‌ها و از Jade برای ساخت محتوا استفاده کردم.jQuery پلاگین مشهور و کار راه اندازی‌ست که من در این پروژه از آن استفاده و سعی کردم تا جای ممکن تمامی پلاگین‌ها متناسب با نیاز طراحی و سپس آن‌ها را بنویسم. در ابتدای کار قصد داشتم از فریم‌وورک‌های CSS برای اجرا کار استفاده کنم. چون فکر می‌کردم توسعه یک فریم‌وورک ساده‌تر/روان‌تر از یک فریم‌وورک دست‌نویس خواهد بود. اما بعد از شروع اجرا کار متوجه شدم استفاده از فریم‌وورک فقط زمان زیادی را مصرف می‌کنند و حجم کار را عملا چندین برابر خواهند کرد. در نتیجه تصمیم گرفتم تمامی ماژول‌ها و سیستم های CSSـبیس را از ابتدا خودم بنویسم. در ابتدا ورژن جدید کلیک‌یاب تصمیم داشتم از LESS استفاده کنم که در لحظات آخر از SCSS استفاده کردم. دلیل هم این بود که SCSS مشـهور/معـروف‌ تـر است و توسعه آن بهتر انجام خواهد گرفت. همان‌طور که گفتـم تمامـی ماژول‌های CSSــی از پایه نوشتم ماژول هایی نظیر گرید، تایپوگرافی، توابع محاسباتی (از جمله محاسبه مقدار سایه‌ها و اندازه‌های مورد نیاز برای ساخت گرید)، فرم‌ها و اجزای مربوط به یک فرم. در نهایت می‌توان گفت SCSS این نسخه به صورت کاملاModular نوشته شده تا به راحتی بتوان تغییراتی در آن داد.

ساخت محتوا

صفحات اصلی کلیک‌یاب به صورت کاملا استاتیک(.html)موجود هستند و هیچ هسته‌ی داینامیکی (نظیر PHP) به آن دسترسی ندارد اما من آن‌ها را دانیامیک ساختم! قسمتی که بیشترین وقت را گرفت؛ با استفاده از Jade و JSON یکTemplate Engine ساختم. به شکلی که اطلاعات با JSON تزریق می‌شود و Jade این اطلاعات گرفته و سپس به فایل HTML تبدیل می‌شوند. تمامی صفحات کلیک‌یاب در حال حاضر بر روی یک هسته هوشمند قرار دارند که می‌توان به سادگی در محتوا آن تغییراتی داد. (در آینده درباره این هسته بیشتر صحبت خواهم کرد.)

Based on Jade — Dynamic Front–End

دستیار

Gruntjsیکی از مهم‌ترین ابزاری بود که مـن از آن استفاده کردم. دستیـاری کـه حـدود ۵۰۰ خط وظیفه به عهده‌اش بود و در طول زمان کار به من کمک های زیادی کرد. ازپلاگین‌های Grunt سعی کردم نهایت استفاده را ببرم. پلاگین‌هایی نظیر کامپایل، کمپرس، اضافه کردن وندورهاSprite, Resize, Crop, Blurring, Watch, Banner, Testing, ...

آیکون‌ها

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

انیمیشن صفحه اول

درصفحه اول کلیک‌یاب بعد از صحبت‌هایی که در تیم داشتیم به این نتیجه رسیدیم که نحوه عملکرد کلیک‌یاب را به صورت انیمیشن در بیاوریم و به کاربر با استفاده از المان‌ها بفهمانیم کلیک‌یاب چیست و چگونه کار می‌کند. بعد از طراحی کانسپت اولیه مجید عیوضی عزیز گرافیست و انیماتور کلیک‌یاب به ما پیوست و کارهای گرافیکی این انیمیشن کمک‌مان کرد. بعد از تهیه‌ی انیمیشن باید از آن در وب‌سایت استفاده می‌کردیم. تصمیم گرفتم ازAnimation Step یا انیمیشن‌های مرحله‌ای در CSS استفاده کنم. به صورتی که در هر یک‌صدم ثانیه یک فریم تغییر می‌کند و در نهایت حالت یک فیلم را پیدا می‌کند. برای پیاده سازی این تکنیک می‌بایست تمامی فریم‌های موجود در کنار هم به صورت Sprite قرار می‌گرفتند. تعداد فریم‌ها ۲۰۰ بود! که آن‌ها توسطgrunt-spritesmith کنار هم قرار گرفتند. فایل اولیه حاصل شده برابر ۱۸ مگ بود!!! بعد از کلی تغییر در ساختار تصاویر آن را حجم نهایی به ۴۰۰ کیلوبایت رسید. اما نشد که استفاده کنم! مشکل فایرفاکس بود. متوجه شدم وقتی تصویری عرض‌ش بیش از مقدار واحد ۶۰۰۰ پیکسل باشد، فایرفاکس آن را نمایش نمی‌دهد. در تمامی مرورگرها این راه عملی بود به جز فایرفاکس :(
در نهایت تصمیم بر این شد که انیمیشن صفحه اول در به صورت ویدیو در صفحه قرار بگیرد.

ابزار ها

تمامی مراحل طراحی کلیک‌یاب از روز اول تا روز آخر با اَپSketch انجام شد. Grunt دستیاری خوبی برای کارهای سنگین و سریع بود. (از کامپایل فایل‌ها تا اسپرایت انیمیشن).Sublime Text 3 برای کدنویسی به‌همراه پکیج ها مرتبط. از Git برای انتقال و بک‌آپ گیری استفاده کردم. ازiTerm2 برای کارهای Command–line استفاده کردم. (که ازZSH بهره می‌برد) ازicomoon برای تبدیل SVG به وب‌فونت استفاده کردم. در طول انجام پروژه از مک‌بوک ۱۳ اینچی رتینا و آی‌مک ۲۱.۵ اینچی استفاده کردم.

دوست دارید بدانید!

شاید قسمت‌هایی باشد که شما دوست دارید بدانید چطور یا چرا ازشون استفاده کردم:
— به صفحهدرباره کلیک‌یاب نگاه کنید. خیلی از دوستان از من پرسیدند که چرا وقتی تصویر هر شخص هاور میشه به جای آن‌که با CSS تصویر Blur شود یک عکس نمایان Blur شده نمایش داده می‌شود؟ در جواب باید گفت به سه دلیل؛ یک. وقتی عکس در لحظه باfilter: blur({amount}) تار می‌شود در دستگاه‌هایی که پردازنده‌های ضعیفی دارند، پردازنده کشش رندر کردن را ندارد و عمل انیمیشن شاید اتفاق نیفتد. دو. تار کردنی که CSS انجام می‌دهد با تاری که من باgrunt-blurred-images انجام می‌دهم متفاوت است (از لحاظ میزان زاویه تاری و عمق تار کردن). سه. Blur موجود در CSS در حال حاضر در همه مرورگرها (حتی مرورگر‌های بروز) به یک شکل عمل تار کردن را انجام نمی‌دهد.

— به صفحهناشران کلیک‌یاب نگاه کنید. شاید براتون سوال شده باشد که آیکون‌ها از راست-بالا به سمت چپ-پایین تغییر رنگ می‌دهند. به عنوان مثال اولین آیکون به رنگ آبی روشن کلیک‌یابی‌ست و آخرین آیکون به رنگ آبی تیره کلیک‌یابی‌ست. این اتفاق با یک تکه کد ساده انجام می‌شود که در زیر منتشر کرده‌ام:

@for $i from 1 through 13 {
	.blue-stroke .grid--col:nth-of-type({$i}) {
		$weight: 13;
		$revolution-color: mix(darken(midnightblue, $weight), lighten(dodgerblue, $weight), $i * 1%);
		.ico {
			color: $revolution-color;
		}
	}
}

شاید بخواهید آمار و اطلاعاتی درباره نسخه جدید کلیک‌یاب در فاز Front–End بدانید؛ فولدر نهایی کلیک‌یاب همراه با پکیج‌های مورد نیاز و تصاویر خام Sprite شده حدود ۳۵۰ مگ شده است. حدود ۲۰۰۰ خط کد SCSS که به CSS تبدیل شده و به ۳۲۰۰ خط می‌رسد. نسخه جدید کلیک‌یاب تلاش ۲ماهه تیمی ماست و من به عنوان طراح و Front–End Developer این نسخه در این مجموعه ایفا نقش کرده‌ام. امیدوارم بزودی اتفاق های بهتری را رقم بزنیم و در کنار کاربران‌مان شاد باشیم.


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

پیروز و سربلند باشید،
سیامک مختاری – تابستان، شهریور ۱۳۹۴.