نوشته های Mohammad Sharifi

منو بخون شاید امروز آخرین روز زندگیت باشه!

Mohammad Sharifi — Mon, 05 Jul 2021 20:57:29 +0430

به نظرم یکی از مهارت های مهم تو این روزا اینکه بتونی حال خودتو خوب نگه داری، داشتن حس و حال خوب و مراقبت ازش، یعنی تداوم کارهای کوچکی که حال تو خوب می کنه :)امروزالان این مطلب رو می نویسم داره غروب میشه... امروز هم داره تموم میشه! یک روز به نابودی شما بخوانید جاودانگی نزدیک میشویم! شاید این قفس رها بشیم... چقدر فکرهایم تند و سریع می آیند می گذرند... لحظههمین تک تک لحظه ها هستند که ما می سازن پس قبل از اینکه امروز تموم بشه باید لذت ببری، حالت خوب نیست یک لبخند بزن همین الان... بیشتر! و همین طور ادامه بده تو لایق حس حال و خوبی تو میتونی طوری همین لحظه را زندگی کنی که شیرین ترین لحظه زندگیت بشه! باور کنیم این یک بار فرصت کوتاه زندگی ارزشی نداره کسی رو ناراحت کنیم، قلبی رو بشکنیم، کسی رو قضاوت کنیم، حسی را نگوییم و بترسیم از انجام کاری که مدت هاست دوستش داریم انجام بدهیم!مرگ... فکر کردن بهش خوبه پرده های ذهنمون رو کنار میزنه تا بتونیم شفاف تر به زندگیمون فکر کنیم، چون امروز ممکنه اخرین روزمان باشد! می فهمم تلخه ولی واقعیت همینه و باید باهاش کنار اومد تا شیرین بشه! بیاید باهم مهربون باشیم، عاشق باشیم و دوستای بهتری برای هم باشیم! هر چه که هستیم بهتر و تاثیر گذار باشیم برای زندگی خودمان و چن نفر اطرافمون، همین کافیه!باید دیوانه بود و به قدرت تغییر ایمان داشته باشیم همه ما می توانیم دنیا را به جایی بهتر تبدیل کنیم این رسالت منو توست. خوب بودن هیچ خرجی ندارد حتی جواب بدی را با خوبی دادن نیز... پس خوب باشیم و لبخند بزنیم :)عشقدلامونو به خدا وصل کنیم، چرا که طبیب دل اوست و لاغیر، چه کاریه که حال دلت رو خوب میکنه؟ من نوشتن! پس مینویسم شما هم امتحانش کنید! نوشته بودم عاشق همه باش! هر چیزی... حتی یک تکه سنگ همین شاید حالتو خوب کنه!لبخندزندگی کوتاه است ای دوست رهگذر من... کمی فکر با لخبند ?ادامه رو بگذار دل خودت بنویسد!

آمار بازدید پست‌های من در سال ۹۹

Mohammad Sharifi — Mon, 22 Mar 2021 16:37:08 +0430

در طول تاریخ از اعداد استفاده کردیم تا اغلب داد و ستد کنیم و آن‌چیزی که شمردنی است را بشماریم. برای هر عدد واحد درست کردیم تا عددهای زندگی قاطی نشوند و از اعداد، شفاف‌تر استفاده کنیم؛ مثلا وقتی می‌گوییم ده هزار تومان به پول اشاره داریم و وقتی می‌گوییم ده هزار بلیط به بلیط!روز به روز که در زندگی جلو‌تر رفتیم عددها فرقی نکردند ولی این واحدها بودند که زیاد شدند. واحد کریپتو، واحد اصله درخت، واحد فاصله و …«واحد» یک توافق عمومی است برای شمردن؛ تا همانطور که گفتم شمردن‌ها قاطی نشود. مشاهده افراد دارای ثروت (اجتماعی یا مالی) به من ثابت کرده اینکه چه چیزی را بشماریم از اینکه چطور بشماریم مهم‌تر است. هرکس با واحد خاصی مسائل زندگی را می‌شمارد. اینطور به نظرم آمده که مشخص کردن واحد یعنی مشخص کردن اینکه من در زندگی برای چه چیزهایی ارزش قائلم و می‌خواهم چه چیزهایی را در زندگی بشمارم. https://cdn.virgool.io/annual-report/1399/yirume9wyngp-TrKZk.mp4 اعدادی که بدون واحد ثبت کردمبه ویدیویی که ویرگول برایم ساخته که نگاه می‌کنم میبینم که در سال ۹۹، من در مجموع ۸,۸۶۷ کلمه در ویرگول نوشتم و منتشر کردم و مخاطبین، پست‌های من را ۱۴۷ مرتبه پسندیدند و ۴۴ بار هم نظر خود را روی پست‌های من به اشتراک گذاشتند. در سال ۹۹، ۹۹ نفر در ویرگول من را دنبال کردند تا پست‌های بعدیم را بخوانند. این اعداد نشان میدهند من کاری کرده‌ام. هرکدام به واحدی وصل هستند. از خودم می‌پرسم من کدام واحد را شمارش کرده‌ام؟ کدامیک از واحدهای بالا از همه برای من مهم‌تر است؟ ادامه ویدیو را می‌بینم.آمار از اثر بیرونی می‌گویندطبق آمار پست‌های من ۵,۴۴۳ بار خوانده شدند و ۱,۴۶۶,۲۴۸ ثانیه صرف مطالعه آنها شده است، که با توجه به جمعیتی که در ایران به اینترنت دسترسی دارند، ویرگول به من می‌گوید که توانستم ۰/۰۲۰۱۰۲۱۱۱ ثانیه، سرانه مطالعه دیجیتال کشور را بالا ببرم.از طرف دیگر ویرگول به من می‌گوید که اگر قرار بود پست‌هایم را چاپ و به دست تک تک خوانندگان برسانم باید ۳۷,۹۰۹ کاغذ مصرف می‌کردم.آن عددهای کوچک ابتدای ویدیو حالا تبدیل شده‌اند به عددهای بزرگ به اینکه من جلوی مصرف این تعداد کاغذ را گرفتم یا به اینکه من ۰/۰۲۰۱۰۲۱۱۱ ثانیه، سرانه مطالعه دیجیتال کشور را جابه جا کرده‌ام. واحد این عددها برای من ملموس‌تر است.واحد نوشتن چیست؟همه عددهای بالا و همینطور اثر بیرونی که روی خوانندگان و همینطور در مقیاس بزرگتر طبیعت و جامعه اطرافم گذاشتم اعدادی هستند که من دوستشان دارم و به آنها افتخار می‌کنم. اگر چنین ویدیویی دست شما نیز رسید به شما بابت تک تک اعداد تبریک می‌گویم.اثر هر نوشته تا حدودی معلوم است، اگر بنویسید جلوی قطع درخت را می‌گیرید، به سرانه مطالعه کشور اضافه می‌کنید و خوانندگانی جذب می‌کنید که شما را از طریق نوشته‌هایتان می‌شناسند و …به نظرم می‌رسد که نوشته‌های من و شما واحد ندارند ولی اثر بیرونی دارند.

کوله پشتی سال 1400 - سال بکار‌گیری دانسته ها!

Mohammad Sharifi — Sun, 21 Mar 2021 10:39:39 +0330

سال 99 سالی پر از چالش و هیجان بود برام، سالی که توش سه تا شرکت عوض کردم! سربازی رفتم (آموزشی منظورمه) و مادر بزرگ عزیزم رو از دست دادم... ولی با کلی امید و انرژی می خوایم تو سال جدید بترکونیم! چطوری؟بسه دیگه!راستش رو بخواید من کلی دوره آموزشی تو هاردم دارم که خیلی هاشو آخرین بار همون لحظه ای که دانلودش تموم شده دیده م!! و خیلی هاشم حتی ادامه ندادم. و به نظرم تا اینجا مشکل خاصی نیست! مشکل از جایی شرو میشه که ما فک میکنیم بازم باید دوره بگذرونیم و هی اطلاعات رو تو ذهن خودمون انباشت کنیم! در حالی که به نظرم واقعا به این حجم از اطلاعات نیازی نیست، چرا که بیشتر از اون چیزی که لازمه بلدیم گاها ولی چیزهایی رو که بلدیم بکار نمی گیریم! ما بیشتر از اون چیزی که لازمه بلدیم، کافیه چیزهای کمی رو که بلدیم در عمل بکار ببندیم!وقتی در حین انجام یه پروژه (در عمل) یه مفهوم رو باهاش درگیر میشیم به درک عمیق تر و بهتر ازش می رسیم. این جمله نیازی به اثبات نداره و اونقدی برام اتفاق افتاده که بهش ایمان دارم! برای مثال وقتی که از یکی از دوستان برای یادگیری تجربه کاربری و عمیق شدن تو بحث بهینه سازی نرخ تبدیل کمک گرفتم، کلی دوره خوب بهم پیشنهاد داد ولی من گفتم در حال حاضر من کلی دوره از جمله IDF، دوره های یودمی و... دارم و بعضی هاشم تموم کردم! ولی در عمل انگار چیزی بلد نیستم! چاره چیه پس؟!سرمونو بندازیم پایین، عین چی کار کنیم؟! خب نه...عمل‌گرای نابی باشیم! درس جذابی که استارتاپ ناب (lean startup) یادگرفتم این بودش که مدام در یک چرخه یادگیری خودم رو قرار بدم و عملکرد خودم رو بهبود بدم. شاید فقط کافی باشه قبل از شروع هر کاری انتظارات خودتونو یادداشت کنید و بعد تو بازه های منظم با گرفتم بازخورد ببینید چقدر با چیزی که انتظار داشتید تفاوت دارید در عمل، بعد بیاید برنامه تونو تغییر بدید و بهترش کنید. (همین ایده هم شاید نیاز به بهتر شدن داره، مگ نه؟)استفاده از مفهوم تجربه کاربر ناب در عمل! - image credit: IDFبرای مثال برای یادگیری انگلیسی، بیاید بگید که من میخوام با داستان کوتاه انگلیسی، زبانم رو تقویت کنم. انتظار میره که من باتقویت مهارت شنیداری با گوش دادن به داستانخوندن داستان با ضدای بلند برای تمرین ضحبت کردننوشتن داستان برای تقویت مهارت نوشتنتحلیل و مو شکافی کلمات و گرامر من بتونم بتونم با اعتماد به نفس خوبی در شش ماه آینده حرف بزنم! (البته نیاز به برنامه بلند مدت و مدوام داره یادگیری زبان)حالا باید تو بازه های 1 ماه از خودتون فیدبک بگیرید و ببینید که:آیا خوندن داستان کوتاه براتون جذاب هست؟ممکنه خوندن روزانه یک مقاله مرتبط با شغل تون بهتر عمل کنهممکنه دیدن ویدیو های TEDممکنه پادکست یا موزیک بهتر باشهو...پس باید با فیدبک مدوام روند یادگیری و عمل گرایی رو بهبود بدیم!همین الان دست بکار شو!اقدام و عمل کردن خودش انگیزه تو درون ما به وجود میاره، پس برنامه بریزید کنید، عمل کنید و فیدبک بگیرید.image credit: Freepik مث این مونه شما با ماشین تو شب به سمت مقصد مشخصی که در حال حرکت هستید، نور چراغ ماشین فقط به اندازه که بتونید چن متر جلوتر رو ببنید جاده رو روشن می‌کنه، همین کافیه برای اینکه چک کنید تو مسیر درستی هستید!کافیه به نظرم، بریم دست بکار بشیم؟ نظر شما چیه؟image credit: 9GAG

آموزش رایگان طراحی بصری - قسمت دوم: یکپارچگی unity

Mohammad Sharifi — Sat, 18 Jul 2020 23:43:39 +0430

قسمت اول: مرورکلیقسمت دوم: یکپارچگی (همین پست!)قسمت چهارم: تعادل قسمت سوم: ترازقسمت پنجم: سلسه مراتبی قسمت ششم: تضاد قسمت هفتم: نسبتقسمت هشتم: فضای منفیآموزش رایگان طراحی بصری - قسمت دوم: یکپارچگی خانه ای که در برابر خودش تقسیم شده، هرگز پایدار نمی‌ماند.- آبراهام لینکلندر اینجا منظور آبراهام لینلکن از «خانه» ایالات متحده آمریکا هست، درست کمی قبل از شروع جنگ های داخلی آمریکا. لینکلن در ادامه میگه، کشورش نصف آزاد و نصف برده هستن. دو پیام بسیار متفاوت درباره آنچه که کشورش درگیرش بود. او کسی بود که ایالات متحده رو یکپارچه کرد و قانون برده داری رو منسوخ کرد.نکته لینکلن فراتر از وضعیت سیاسی-اجتماعی زمان خودش هست. ایالات متحده وقتی تقسیم بشه پایداریش رو از دست میده. این نکته قابل تعمیمه به طراحی! اگر یک طرح بدون هدف بخش بندی بشه و هر بخش یه ساز بزنه، انسجام کل طراحی زیر سوال میره. هر بخشی باید در راستای یک هدف واحد و یکپارچه باهم کار کنند.ایده ی یکپارچگی و انسجام طرح در طراحی، همون پیروی تمام اجزاء از یه هدف واحده.[1]اصول یکپارچگی در طراحییکپارچگی معیاری هست برای سنجش میزان پیوستگی عناصر در طراحی شما. دقیق بگیم، کلیت طرح رو توصیف میکنه! مثلا هر مؤلفه (component) چقدر با بقیه مؤلفه ها هماهنگه؟ یکپارچگی مهمترین اصل طراحی هست چرا که تمام طراحی تون رو به عنوان یک واحد منسجم در میاره.آشنایی با یکپارچگیدر این دوره هر کدوم از اصول طراحی مربوط به یک «بخش» از طراحی شما میشه که اصل یکپارچگی همشون رو در بر میگیره (رو همشون تاثیر داره).یکپارچگی هدف نهایی طراحی واسط کاربری هست، اما این به این معنی نیست که این اصل رو نگه دارید که آخرسر لحاظش کنید، بلکه برای اینکه طراحی تون به یک حس یک دستی برسه، نیاز دارید که از قبل براش برنامه ریزی کنید و تصمیم بگیرید که قراره چه پیامی رو به مخاطبتون منتقل کنید؟ دوره ی اصول طراحی رو با اصل یکپارچگی شروع کردیم که مطمئن بشیم در هر بخش تمرکز روی انسجام کلیه‌ی قسمت های طراحی حفظ میشه. (با دید تصویر بزرگ یا Big Picture طراحی می‌کنیم)حکایت فیل و کوران مولانا مثالی خوب برای درک نکردن Big Picture !مثل یک طراح حرفه ای فکر کن!خبره شدن تو بحث یکپارچگی از همون اول میتونه یکم سخت و چالش برانگیز باشه چراکه ما معمولا بدون در نظر گرفتن چگونگی قرار گرفتن این جزئیات در تصویر بزرگ، مستقیماً به طراحی جزئیات می پردازیم. اگه شما از همون اول کار نتونید به تصویر بزرگ نگاه کنید (کلیت پروژه رو تو ذهنتون مجسم کنید)، احتمالا همه اون سخت کار کردن ها و تلاش هاتون منجر به یه طراحی ضعیف میشه!برای نشون دادن اینکه ما معمولا این مورد رو نادیده میگیریم، لیست خرید رو مثال میزنیم.مثال: لیست خریدایجاد لیست برای خرید مواد غذایی یک کار ساده است - شما غذاهایی که می خواید در طول هفته درست کنید مشخض میکنید سپس موارد لازم رو یادداشت می کنید که بخرید.این اولین قدم در «تجربه خرید موارد غذایی» است. برای بیشتر افراد این قدم بعضا حذف میشه. برای مثال لیست خرید مون یه چیزی شبیه عکس زیر میشه:لیست خریددر نگاه اول، متوجه چیز اشتباهی در این لیست نمیشید. دقیقا برای هدف مد نظرمون، خرید اقلام مورد نیاز، ساخته شده. با این حال، بیاید از دید طراحی بهش نگاه کنیم و و مسئله را مورد توجه قرار دهیم.اصول طراحیدر این لیست ساده اینطور به نظر میرسه که همه ی بخش های درست رو داره تا هم ارتباط خوبی با شما برقرار کنه و هم باعث بشه هرچی که لازم دارید رو از فروشگاه بخرید! در نهایت یه خرید راحت. حتی ما می تونیم تمام اصول طراحی رو در این لیست ساده ببینیم.تعادل — وزن بصری به شکل یکسانی در پایین صفحه توزیع شدهچیدمان — لیست به شکلی چیده شده که به راحتی بشه اسکنش کردتضاد — فونت بزرگ تر در سرتیتر انتخاب شدهتناسب — فونت کوچکتر برای هر کالافضای سفید — فضای بین و دور متنتکرار — سایز و رنگ هر کالاحرکت — چشم به شکل طبیعی از بالا به پایین حرکت میکنهتضاد — متن مشکی روی پس زمینه سفیداما در مورد یکپارچگی چی؟خب یکی می تونه بگه که این لیست طراحیش یکپارچه هست، چرا که تمام اصول طراحی رو رعایت کرده. و کل لیست هم اینو بهمون میرسونه که همه موارد لیست شده، موادغذایی هستن.با این حال، اگه ما بیایم رابطه بین هر کالا رو بررسی کنیم، ممکنه که به فکر فرو بریم و از خودمون بپرسیم، خیار و شیر چه چیز مشترکی باهم دارن؟! ?نگاهی نزدیک تریکپارچگی معیاری ست برای سنجش اینکه چقدر عملکرد هر یک از عناصر طراحی شما با هم خوب هست. بر اساس این تعریف میتونیم بگیم که یک طراحی میتونه بسیار یکپارچه، تقریبا یکپارچه باشه یا اینکه اصلا یکپارچگی نداشته باشه. لیست مواد غذایی ما الان تقریبا یکپارچه هست. کارمونو راه می ندازه، اما هنوز اون تاثیری که باید رو نداره!باوجود اینکه تمام اصول طراحی در لیست موادغذایی مون رعایت شدن، نتیجه نهایی یک طراحی ضعیفه چرا ما از اول تصویر بزرگ رو در نظر نگرفتیم. حالا بریم ببنیم که تصویر بزرگ چی هست؟تصویر بزرگقبل اینکه ما بزنیم بیرون برای خرید مواد غذایی مون، بهتر که قبلش وایسیم و از خودمون چند تا سوال بپرسیم:این لیست موارد غذایی چه نقشی رو در کل تجربه خرید من بازی میکنن؟دوست دارم در نهایت چجور تجربه ای از خریدم داشته باشم؟چطوری می تونم ارتباطی که این اطلاعات با من میسازن رو بهتر کنم؟با فکر کردن به این موارد گسترده تر، ما از شروع کار میتونیم به یکپارچگی برسیم. شما دیگه یک لیست ساده خرید رو طراحی نمی کنید، بلکه شما دارید تجربه خریدتون رو به شکل کلی بهبود میدین!نوع نگاه با در نظر گرفتن دید تضویر بزرگ متفاوت هستبا نگاه کردن به طرح از نقطه نظر تصویر بزرگ، شما میتونید چیدمان مغازه رو در نظر بگیرید، که بخش هایی که نیازه ببینید و بر اساس ترتیب چیدمان محصولات اون ها رو دسته بندی کنید. با این اطلاعات جدید، شما می تونید لیست خرید تون رو باز طراحی کنید که یه چیزی شبیه عکس زیر میشه:لیست خرید طراحی شده!در انتها نتیجه ای که به دست میاد حس بهتری از یکپارچگی و تجربه ی خرید رو القا میکنه. با گذاشتن یه کم وقت و انرژی بیشتر برای «طراحی» لیست خریدتون با این روش، شما در نهایت زمان و انرژی بیشتری رو برای خودتون صرفه جویی میکنید چرا که با بهره وری بالاتری خرید کرده و از مغازه خارج میشین.درست از همونجایی که شروع میکنید به در نظر گرفتن کلیت ماجرا و تصویر بزرگ، طراحی خوب شروع میشه!یکپارچگی در طراحی رابط کاربریدر مثال بالا ما به تسک ساده تهیه خرید از دید تصویر بزرگ نگاهی انداختیم. این رویکرد بهتره که برای طراحی رابط کاربری هم در نظر گرفته بشه.اگه شما یک محصول کاملا جدید رو میخواید از صفر طراحی کنید، از این دست سوالات رو از خودتون بپرسید:این محصول چه مشکلی رو حل میکنه؟من مشکل رو برای چه کاربری حل میکنم؟پیام کلی که تو ذهن مخاطبان این محصول می مونه چی هست؟چطوری من می تونم محصول رو به قسمت های کوچکتر بشکونم و سازماندهی شون کنم؟قبل از شروع طراحی مهمه که به این نوع سوالات جواب بدین.با این روش اطلاعات بیشتری جمع آوری میکنین، در نهایت خیلی آسون تر می تونید اونا رو سازماندهی کنید و به یک حس یکپارچگی برسید.راهنمای استایل برند (Brand Style Guide) رو ایجاد کنیدبرند شما شامل عناصر طراحی هست که باید جهت ثبات محصول ازش استفاده بشه. این عناصر شامل نام محصول، لوگو، مجموعه رنگ ها و تایپوگرافی هست. برندینگ همچنین شامل موارد نا محسوسی مثل، حالت Hover، صدا و تن نوشته هاتون، همون تجربه کاربر نوشتار یا یواکس رایتینگ (دوره رایگان بعدی مون?) — و جملاتی که اغلب تکرار میشن نیز میشه.یکی از راه های بسیار موثر که مطمئن بشید که شما به یکپارچگی میتونید برسید ساخت راهنمای استایل برند، هست. برای نمونه Shopify مثال خوبیه.راهنمای استایل برند به عنوان یک منبع برای رسیدن به یک ثبات دیداری و احساسی در تمام محصول عمل میکنه. این راهنما میتونه همه چیز رو شامل بشه از رنگ هایی که شما می تونید یا نمی تونید باهم استفاده کنید تا نحوه پیاده سازی دقیق وب سایت.یکپارچگی در ارتباطپیام کلی که می خواید در ذهن مخاطبانتون بمونه چیه؟ در ادامه سه نقش اصلی این پیغام رو براتون میگیم:بشه فهمید که دقیقا شما کی هستید؟چه مشکلی رو حل می کنید؟این مشکل رو می تونید برای چه کسانی حل کنید؟وب سایت Optimizely، این کار رو خیلی بهینه در صفحه اولش انجام داده. پیام کلی شون اینه:جواب پس داده. بهتر شده. اپتیمازلی پلفرم پیشتاز جهت آزمایش کردن، که به تیم های بازاریابی و محصول کمک میکنه تا تست، یادگیری و استقرار تجربه دیجیتالی موفق تری داشته باشن.همونجور که فصل های یک کتاب یک موضوع رو در کل کتاب دنبال میکنن، برای رسیدن به یکپارچگی در ارتباط با کاربر، همه چیز باید به حول پیام اصلی بچرخه. ر بخش از صفحه اول اپتیمازلی دقیقا با این شروط مطابقت دارن.تجربه دیجیتالی تون رو بهینه کنید و به بالاترین نرخ بازگشت سرمایه در SaaS برسیدیا یه جا دیگه میگه: فقط Optimizely هست که بهتون اجازه این رو میده که آزمایشی در هر دو تیم بازاریابی و محصول داشته باشید.و در جایی دیگه: به جمع 26تا از 100 کسب و کار برتر جهانی بپیوندید که مبنتی بر آزمایش های روزانه تصمیم های هوشمندانه تری رو میگیرن.تمام ارتباطات دیگر طراحی صفحه اول شون کمک می کنه که مفهوم اصلی رو تقویت بشه، و یک حس یکدستی و یکپارچگی در ذهن مخاطب شکل بگیره.به فراتر از محصول تون فکر کنیدطرزفکر تصویر بزرگ شما رو محدود به محصول خودتون نمیکنه. کاربران شما با انتظار خاصی وارد وب سایت یا اپ تون میشن. چطوری مطمئن بشید که محصول تون همراستا با انتظارات کاربران هست؟استانداردهای وب، قراردادها و روش های خوب به شما کمک میکنند که نتنها در داخل سایت خودتون به یکپارچگی برسید، بلکه باعث رسیدن بیرون از اون هم میشین. محصول شما یکی از چندین محصولی است که کاربر در طول روزش تجربه‌ش می کنه. با در نظر گرفتن چند نکته اضافی هنگام طراحی می تونید انتظارات اونا را برآورده کنید.محک زدن (Benchmark) یک راه عالیه برای فهم اینکه کاربران ممکنه چه نوع انتظاراتی از طراحی داشته باشن. شما می تونید این کار را با مقایسه وب سایت هایی که کاربران شما بازدید می کنند و بررسی الگوهای طراحی که استفاده کردن، انجام دهید.برای مثال، وقتی که دارید یک فروشگاه آنلاین که لوازم تخت و خواب می فروشه طراحی میکنید، بهتره که قبل از شروع طراحی نگاهی بندازید به نظرات و تجربه‌ی خرید مشتری ها در وبسایت رقباتون.بنچمارک رقبادر مثال بالا ، ما لیست محصولات از 5 فروشگاه عمده را داریم که لوازم تخت خواب رو می فروشند. چند نکته جالب وجود داره که می توانیم انجام شون بدیم:تصاویر محصول همیشه بالاتر از جزئیات محصول هستن.نمادهای قلب همیشه برای اضافه کردن محصولات به لیست مورد علاقه های شما استفاده می شن.اطلاعات مربوط به محصول همیشه شامل عنوان، رتبه بندی و قیمت محصول هست.گزینه های رنگ یا بافت اغلب در لیست محصولات موجود است.ارسال رایگان اغلب با اطلاعات مربوط به محصول می باشد.با استفاده از این نوع مشاهدات، می توانید انتظارات کاربر خود را پیش بینی کرده و حوالی اونا طراحی کنید. با فکر کردن درباره اینکه چگونه محصول شما در تصویر بزرگ اینترنت قرار می گیرد ، میتونید طراحی منسجم محصول و رعایت اصل یکپارچگی رو در مقیاس جهانی مدنظر قرار بدید.جمع بندییکپارچگی هدف نهایی طراحی رابط کاربری هست. برای رسیدن به یک حس یکپارچگی در سراسر طراحی تون شما نیاز دارید که بزرگ فکر کنید حتی قبل اینکه شروع کنید به طراحی عناصر صفحه تون. قبل از شروع طراحی جزئیات به سوالات در مقیاس بزرگ تر جواب بدین. تمرین این درس از دوره کمک تون میکنه که از ابتدا به شروع کنید که چطوری میشه به یک حس یک دستی برسیم.در درس های بعدی، ما می بنیم که چطور سایر اصول طراحی باهم جهت رسیدن به حس یکپارچگی در طراحی تون کمک تون میکنن.[2]پ. ن. 1: برای یادگیری بیشتر می‌تونید به لینک های زیر مراجعه کنید.https://www.invisionapp.com/design-defined/unity-principle-designhttps://vanseodesign.com/web-design/design-unity/پ. ن. 2: داستان مقدمه این پست و ادامه ش در کل برای رسوندن یک پیغام به شما بود و اون اینکه مفهوم یکپاچگی در طراحی چی هست؟ امیدوارم این مطلب هم یکپارچه بوده باشه، اینطور بود آیا؟ ?پ. ن. 3: از هم تیمی گرامیم که در تهیه و ترجمه این مقاله خیلی کمک کردن تشکر میکنم، تو ویرگول میتونید گلناز شهشهانی رو دنبال کنید!مثل همیشه خیلی خوشحال میشیم، که این مقاله رو لایک کنید، نظرات باارزشتون رو بهمون بگید و چن ثانیه وقت بزارید و این مطلبی که ساعت ها براش زحمت کشیده رو به اشتراک بزارید! ممنونم :)

دوره رایگان آموزش طراحی بصری - قسمت اول: مرور کلی

Mohammad Sharifi — Fri, 19 Jun 2020 00:09:20 +0430

این پست، شروع یک سری مقالات مرتبط به هم هستن که در مورد آموزش طراحی بصری هست. یه دوره باکیفیت (سعی می‌کنیم) و رایگان، پس با به اشتراک گذاری و دادن نظر بهمون انرژی بدین که این راه رو باهم طی کنیم!قسمت اول: مرورکلیقسمت دوم: یکپارچگی قسمت چهارم: تعادلقسمت سوم: ترازقسمت پنجم: سلسه مراتبیقسمت ششم: تضادقسمت هفتم: نسبتقسمت هشتم: فضای منفیطراحی بصری درباره ساخت و ایجاد ثبات در زیبایی عمومی یک محصول است. برای ایجاد استایل زیبا در یک وبسایت یا اپ، ما با اصول عناصر طراحی دیداری، مثل چینش اونا طبق مبانی طراحی کار می‌کنیم. این عناصر و اصول با هم اجزای سازنده طراحی بصری رو تشکیل میدن. داشتن درک درستی از اونها در طراحی بصری هر محصولی حیاتی هستش.اینجا، ما عناصر طراحی رو معرفی میکنیم: خط، شکل، فضای منفی یا سفید، حجم، ارزش رنگ (color value)، (نوع) رنگ و بافت. درحالی که بررسی دقیق هر یک از این عناصر معمولا بخش مهمی از کارای روزمره طراح نیست، اصول طراحی ( منظور اینکه چطوری عناصر رو کنار هم بچینیم تا صفحات به شکلی بهینه بسازیم)، نقش حیاتی داره. یادگیری اینکه چطور به یکپارچگی، گشتالت، وجود سلسله مراتب، تعادل، کنتراست، مقیاس، چیرگی و سادگی برسیم، باعث کاهش دوباره کاری و اتلاف زمان میشه. همچنین نحوه ی استفاده از این عناصر کاربردی رو هم برای ایجاد بیشترین تاثیر یاد می گیرید.عناصر طراحی دیداریهر محصولی (از محصولات نرم افزاری مانند وبسایت و اپ ها گرفته تا محصولات سخت افزاری مثل دستگاه تستر و سشوار ) میتونن به عناصر پایه در طراحی دیداری تجزیه بشن، همون طور که آلان هاشیمتو پرفسور طراحی گرافیک و هنر کامپیوتری در دانشگاه یوتا و آقای مایک کلایتون مدیر و استاد هنرهای گرافیک کامپیوتری تو کتابشون، "مبانی طراحی دیداری با رویکرد دیجیتال". میگن: این عناصر ابزارهای پایه هستند که ما طراحان در کارهای روزمره مون ازشون استفاده میکنیم و داشتن درک خوبی از اونا، قطعا پیش نیاز این شغل هست.خطخطوط دو نقطه رو به هم وصل میکنن، و پایه ترین عنصر طراحی دیداری هستن. ما از اونا برای ساخت شکل ها استفاده میکنیم و با تکرار اونها، میتونیم الگویی رو شکل بدیم که بافتها رو بسازن.خطوط میتونن ساده باشن اما با استفاده از ویژگی های مختلف احساسات مختلفی رو برسوون خطها ویژگیهای متنوع زیادی دارن که بهمون اجازه میدن حالات زیادی رو منتقل کنیم. برای مثال، خطوط میتونن ضخیم یا باریک، مستقیم یا خمیده، پهنای یکسان یا متنوع و هندسی باشن. مثل اینکه با خط کش یا پرگار کشیده شده باشن یا ارگانیک باشن. مثل اینکه با دست کشیده شده باشن.همچنین خطوط می توانند بر این کاربرد نیز دلالت کنند: ایجاد یک ارتباط نامرئی بین سایر عناصر. به عنوان مثال در لوگو بنیاد طراحی تعامل ، کلمات «بنیاد طراحی تعامل» (Interaction Design Foundation یا IDF) اطراف درخت یه شکل دایره ی مانند رو رسم کرده.Author/Copyright holder: Teo Yu Siang and Interaction Design Foundation.شکلاشکال، ناحیه های بسته‌ای هستند که معمولا توسط خطوط شکل میگیرند (علیرغم اینکه اونا ممکنه که رنگ و مقدار و بافت مختلف داشته باشن) یک شکل دو بعد داره، عرض و طول.ما می توانیم با استفاده از خطوط (مانند شکل بالا) یا با استفاده از تفاوت در رنگ ، بافت یا غلظت رنگ، اشکالی را ایجاد کنیم. ما آدما تمایل داریم که اشیا رو با شکل های پایه شون تشخیص بدیم، و برای درک بیشتر فقط روی جزئیات (مثل خطوط، مقادیر، رنگ ها و بافت ها) تمرکز کنیم. به همین دلیل، اشکال عناصری حیاتی هستند که ما طراحان برای برقراری ارتباط سریع و موثر ازشون استفاده می‌کنیم.فضای منفی / سفیدفضای منفی تحت عنوان فضای سفید نیز شناخته میشود، که به ناحیه خالی اطراف یک شکل مثبت گفته میشه. بین شکل و فضای اطرافش ارتباطی وجود دارد که با عنوان شکل و زمینه شناخته میشه. بهتره بدونیم که زمانی که داریم یک شکل مثبت رو طراحی می‌کنیم، درهمان حال داریم فضای منفی رو هم می‌سازیم. فضای منفی هم به اندازه فضای مثبت مهم هست برای اینکه بهمون کمک میکنه که مرز فضای مثبت رو تعریف کنیم و تعادل رو به ترکیب‌مون بیاریم.بعضی از طرح‌ها از فضای منفی برای ساخت جلوه های جذاب دیداری استفاده می‌کنن. برای مثال، لوگو World Wide Fund for Nature (WWF) از ترکیب فضای مثبت و منفی برای ایجاد تصویر پاندا استفاده کرده.طراح باهوش لوگو، با استفاده از ترکیب فضای منفی اطراف شکل مشکی، شکل پاندا رو کامل کرده.حجمحجم به اشکال سه بعدی گفته میشه که طول، عرض و ارتفاع دارن. ما به ندرت از حجم برای طراحی دیداری استفاده میکنیم، به دلیل اینکه بیشتر محصولات دیجیتال در فضای دو بعدی نمایشگرها دیده میشن با این حال بعضی از اپ ها و وب سایتها از مدل ها و گرافیک های سه بعدی استفاده میکنن. از لحاظ فنی عکس های سه بعدی که روی صفحه نمایش دو بعدی دیده میشن هنوز دو بعدی هستن.شبیه سازی شکل سه بعدی، در دو بعدارزش رنگیبه زبان ساده، تیرگی یا روشنی رو معین میکنه.ارزش رنگی Color Valueیک طرح با تضاد بالای میزان رنگ (به این معنی استفاده از مقادیر تیره و روشن) باعث وضوح بیشتر طرح میشه اما تو طرح دیگه ممکنه با تضاد رنگی کمتر اصلا احساس نشه و نامحسوس باشه. ما همچنین می تونیم از ارزش رنگی برای شبیه سازی حجم در فضای دو بعدی استفاده کنیم برای نمونه، با استفاده از رنگ های روشن تر که که رو شکل میفته و زوایاش رو مشخص میکنه و رنگ تیره هم رو زمین میفته و سایه ایجاد میکنه.تفاوت در میزان ارزش رنگی باعث تمیزی طراحی میشه (پررنگ و واضح)، در مقابل (کم‌رنگ و خفیف) نا محسوس به نظر میرسنرنگرنگ یک عنصر از نور هست. تئوری رنگ یک شاخه از طراحی است که برروی ترکیب و کاربرد رنگهای مختلف در طراحی و هنر متمرکز شده است. در تئوری رنگ، یک تفاوت واضحی بین رنگ هایی که افزایشی ترکیب میشن با رنگ هایی که کاهشی ترکیب میشن، وجود داره.در نقاشی ?، رنگ‌ها کاهشی ترکیب می شوند به دلیل اینکه نور توسط رنگ دانه ها جذب میشه، وقتی رنگ دانه های مختلف با همدیگه ترکیب می شن، نور بیشتری جذب میکنن، و رنگ نهایی تیره تر خواهد شد. از ترکیب کاهشی فیروزه ای Cyan، ارغوانی Magenta و زرد Yellow، رنگ مشکی blacK بدست میاد. ترکیب کاهشی در رنگهای نقاشی و چاپ، سیستم رنگی CMYK رو میدن بهمون.در طراحی دیجیتال، که محصول در یک صفحه نمایش نشان داده میشه، رنگ ها افزایشی ترکیب میشن، چون که نمایشگر ها نور رو ساطع میکنند و بطور طبیعی رنگ ها در هم اغام میشن، وقتی رنگ های مختلف باهم روی نمایشگر ترکیب میشن، رنگ روشن‌تری بدست میاد که نتیجه‌ش ساطع شدن بازه وسیع‌تر و روشن تر نور از صفحه ی نمایشه. یک ترکیب افزایشی از قرمز Red، سبز Green و آبی Blue و روی نمایشگر، رنگ سفید رو ایجاد میکنه. ترکیب افزایشی از رنگها روی صفحات دیجیتالی موجب ایجاد سیستم رنگی RGB میشه.سیستم رنگی RGB با ترکیب رنگی افزایشی، سیستم رنگی CMYK در چاپ با ترکیب رنگی کاهشیما از رنگها در طراحی بصری برای رسوندن احساسات و افزودن تنوع و جذابیت به طرح، تفکیک بخش های مختلف صفحه و متفاوت سازی کارمون از رقیبامون استفاده می‌کنیم.بافتبه کیفیت سطح یک شی بافت گفته میشه.به عنوان طراح، می‌تونید با دو نوع از بافت ها کار کنید: بافت ملموس، که می‌تونید بافت رو (با حس لامسه) احساسش کنید و ناملموس که فقط می‌تونید ببنیدش چون قابل احساس نیست. بیشتر طراحان دیداری از بافت نامحسوس استفاده میکنن، چون که نمایشگر ها نمی تونن بافت ها رو ملموس کنن!آیکنی که از بافت شیشه ای برای القای حس دکمه واقعی استفاده کرده. آیکن‌های طراحی شده iOS 6 و نسخه های قبلیش از بافت شیشه ای تقلید کردن که کاربر را به ضربه زدن ترغیب کنه. بعد اپل، طی حرکتی بافت لنین رو برای پس زمینه ی رابط کاربریش معرفی کرد. با معروف شدن طراحی تخت (فلت) (یه سبک طراحی مینیمالیستی (ساده‌گرایانه) که روی ساده بودن فضا و دو بعدی بودنش تاکید داره) استفاده از بافت در طراحی دیداری از اواسط سال 1390 خیلی کم تر شده هرچند که هنوزم میتونن خیلی مفید باشن.بافت linen شرکت اپل برای iOS و سایر پلتفرم های دیگه‌شاصول طراحیعناصر طراحی بصری (خط.، شکل، فضای منفی یا سفید، حجم، میزان رنگ، نوع رنگ و بافت) بلوکهای سازنده زیبایی محصول هستند. در مقابل، اصول طراحی بهمون میگن که چطور این عناصر رو برای رسیدن به بهترین نتایج کنارهم بزاریم. بطور کلی بعضی از این اصول به هم مرتبط و بعضی هاشونم مکمل همن.حالا چقدر این اصول طراحی برای شغل طراح دیداری مهم هستن؟ استاد پژوهش و توسعه در بنیاد مدیریت علوم موسسه William Lidwell، با استناد به کتاب اصول طراحی جهانی که میگه:“The best designers sometimes disregard the principles of design. When they do so, however, there is usually some compensating merit attained at the cost of the violation. Unless you are certain of doing as well, it is best to abide by the principles.” – William Lidwellبهترین طراحان بعضی وقتا اصول طراحی رو نادیده می‌گیرن. و زمانیکه این اتفاق میفته، مجبور میشن هزینه ی این سرپیچی رو بپردازن تا طرح به سرانجام خوبی برسه و اشتباهات جبران بشن. حتی اگر همچنان مطمئنید که به روش خودتون بهترین نتیجه رو میگیرید، بازم بهتره که این اصول رو گوشه ی ذهنتون نگه دارید. - ویلیام لیدولیکپارچگییکپارچگی یعنی ایجاد هارمونی بین تمام اجزاء موجود در صفحه. وقتی یک عناصر در یک صفحه به شکل دیداری یا مفهومی، مرتب چیده شده باشند حس یکپارچگی به بیننده القا میکند.استفاده از گرید باعث به وجود اومدن یکپارچی میشه.وقتی ما داریم وبسایت رو طراحی می‌کنیم، می تونیم از گرید (Grid) برای بوجود آوردن حس یکپارچگی استفاده کنیم. چون عناصری که در یک گرید سازماندهی شدن یک چینش مرتب رو دنبال می‌کنند. ما به گرید نیاز داریم تا بین یه طراحی خسته کننده و شلوغ پلوغ، تعادل برقرار بشه.گشتالتگشتالت به تمایل ما به درک مجموع بخش های یک چیز در مقابل درک هر بخش بصورت تکی، اشاره میکنه. چشم و مغز آدما تصویر یک جسم رو بصورت یکدست پردازش میکنه تا بصورت یک تصویر با جزئیات انفرادی و تکی. در بیشتر مواقع ما کلیت یک شی رو قبل از جزئیاتش درک می کنیم، ولی مثلا خط و بافت و عناصر دیگه شی قبل از درک کلی اون تو ذهن پردازش نمیشه!دلیل اینکه ما اشکال بالا رو مثلث، دایره و مربع می بینیم گشتالت هست، این در حالی هست که این اشکال چط چین هستند! ما ادما اول کلیت یه شی رو درک می کنیم بعد جزئیات.لوگو WWF ، که قبلتر دیدیم، یک مثال مثال از استفاده اصول گشتالت برای ساخت طراحی جذابه. با قرار دادن عناصر مختلف پاندا در کنار هم بصورت هوشمندانه، طراح از تمایل ما برای تصویر کردن یک پاندای یکدست و کامل استفاده کرده و به جای پردازش اجزا بصورت تک به تک، طرحی کامل از آن در مغز شکل می گیره.گشتالت یه اصل مهمه، برای نمونه، برای جداسازی قسمت های مختلف یک وبسایت با افزایش فضای سفید بین بخش های مختلف. به عنوان طراح، ما باید مطمئن بشیم که قسمت های مختلف وبسایت (برای مثال اگه اونایی که به یکی دیگه نزدیک باشن، و شکل یکسان و یا اندازه مشابه داشته باشن) که توسط اصول گشتالت باهم گروه شدن که حتما باهم باید شباهت مفهومی داشته باشن. گروه بندی تصادفی عناصری که از لحاظ مفهومی باهم مشابه نیستن باعث گیج شدن کاربرا میشه.طرح هایی با بخش بندی مشخص نسبت به مواردی که به شکل واضحی جداسازی نشده اند، ساده تر پردازش و اسکن میشن، به ویژه اگر این بخش ها از نظر مفهومی مجزا باشند.در ادامه دوره وارد جزئیات بیشتری میشیم.ساختار سلسله مراتبیساختار سلسله مراتبی، نشان دهنده ی تفاوت عناصر از نظر اهمیت و اولویت بندی آن هاست. رنگ و اندازه متداول ترین راه های ایجاد سلسله مراتب هستن (برای مثال با برجسته کردن دکمه اصلی، یا استفاده از فونت های بزرگتر برای سر برگ ها) در کل قراره که برای موارد بالای صفحه نسبت به موارد پایین صفحه اهمیت بیشتری از نظر سلسله مراتب بصری بدیم.از راه‌های رسیده به یک ساختار سلسله مراتبی، اندازه و استایل فونت است.تعادلتعادل از اصول بسیار مهمیه که نحوه توزیع یکسان عناصر طراحی رو مشخص می کنه. تعادل باعث میشه طرح آروم، پایدار و طبیعی بنظر برسه و درحالیکه طراحی نامتعادل حس گیجی و بدی به کاربر میده.شما چند نمونه از وب سایت یا اپی که عدم/تعادل رو به خوبی رعایت کردن می تونید بگید؟تعادل میتونه به کمک ایجاد تقارن تو طراحی برقرار بشه. برای نمونه، داشتن صفحه وب که متن و عکس هاش راست چین شدن. با این حال، شما همچنین میتونید تعادل رو بدون تقارن هم در طراحی ایجاد کنید که به عنوان تعادل نامتقارن نیز شناخته میشه. در تکنیک تعادل از نوع نامتقارن، از عناصر با سایزهای متفاوت به نحوی که منجر به یکپارچگی نهایی طراحیمون بشه استفاده میکنیم. یعنی یه نقطه در مرکز طراحی فرض می کنیم و عناصر رو حول اون به طوریکه به تعادل برسن، توزیع میکنیم.تضاد یا کنتراستما از تضاد برای اینکه یه عنصری بیشتر تو چشم بیاد استفاده می کنیم، که اینکار با دستکاری رنگ، ارزش رنگ، اندازه و سایر فاکتورهای دیگ انجام میشه. برای نمونه، به عنوان یک طراح (فرقی نمیکنه طراح لوگو هستیم یا رابطه کاربری و ...) ما اغلب از رنگ قرمز ? برای اینکه یک عنصر مشخص رو برجسته کنیم، استفاده میکنیم. در سیستم عامل آی او اس، رنگ قرمز در عملکرد حذف ظاهر میشه و بهمون هشدار میده این کاری که انجام میدی (غالبا) غیر قابل بازگشت هست. در مقابل رنگ سبز ? غالبا برای عملکرد مثبت (حداقل در فرهنگ غربی) مانند ادامه دادن و قبول کردن استفاده میشه. چیزی که قابل توجه هست اینه که وقتی ما میخوایم در طراحی مون تضاد ایجاد کنیم، نمی تونیم بیخیال معنی رنگ ها در فرهنگ های مختلف بشیم. اگه شما برای یه مشتری در کشور دیگه طراحی میکنید، در موردش یاد بگیرید و کارتون رو طوری تغییر بدین که از ترجیحات فرهنگی اونجا پیروی کنه. برای مثال، از خوتون بپرسید که - آیا رنگ قرمزتو این کشور به معنیه خوش شانسیه یا عصبانیت؟ یا رنگ مشکی به درد کسب و کار میخوره یا برای مرگ و عزا؟ رنگ قرمز، رنگی با تضاد بالا که به شکل وسیعی در آی او اس برای عملکرد حذف استفاده میشه مقیاسمقیاس در مورد اندازه های نسبی عناصر در یک طراحی هست. با استفاده از مقیاس برای بزرگ کردن یک عنصر نسبت به بقیه عناصر کنارش، شما می‌تونید اونو مهمتر جلوه بدید. با این کار نه تنها باعث میشه که یک عنصر خودشو نشون بده بلکه میتونید با مقیاس یک حس عمق رو هم ایجاد کنید (بدیهیه که چیزایی که به چشم آدم نزدیک ترن بزرگتر دیده میشن) مقیاس های اغراق شده در عکسها میتونه اون ها رو نمایشی و جذاب کنه.مقیاس می‌تونه باعث به وجود اومدن ساختار سلسله مراتبی یا دادن اهمیت به عناصر خاصی بشه.احاطه یا چیرگیچیرگی باعث بوجود اومدن تمرکز روی یک عنصر میشه. ما میتونیم از رنگ، شکل، تضاد، مقیاس و یا موقعیت برای رسیدن به چیرگی استفاده کنیم. برای نمونه، در بیشتر وبسایت ها یک عکس بزرگ hero image وجود داره، که از چیرگی استفاده شده تا نظر کاربر رو به شکل طبیعی جذب کنه.می‌تونیم از رنگ، شکل، تضاد، مقیاس و یا موقعیت برای رسیدن به احاطه یا چیرگی استفاده کنیمزمانی که روی طراحی بصری کار می‌کنیم، باید مطمئن بشیم که استفاده از چیرگی هنوزم لطمه ای به یکپارچگی و تعادل وبسایت نمیزنه در غیر اینصورت، باعث گیجی و تجربه ای ناخوشایند برای کاربران میشه.مثال هایی برای نشون دادن عناصر و اصول طراحیبا مدنظر داشتن عناصر و اصول طراحی بصری، ما چند وبسایت رو تحلیل میکنیم که ببنیم اونا چطور از این اصول استفاده کردن و باعث ایجاد یه طراحی خوب شدن.صفحه اول گوگلصفحه اول گوگل یکی از پربازدیدترین صفحات دنیاست. یکی از دلایل طراحی خوبش برمی‌گرده به سادگی صفحه، اما اینجا عامل های دیگه ای رو بررسی می‌کنیم که باعث شده این صفحه فوق العاده باشه:اصول طراحی بکار گرفته شده در صفحه اول گوگلچیرگی: لوگو بزرگ گوگل و باکس جستجو باعث شده به فضای صفحه چیره بشه، که موجب جذب تمرکز مخاطب به مرکز صفحه درست جایی که لوگو قرار گرفته، میشه.تضاد + رنگ: لوگوی گوگل از رنگ های اصلی براق استفاده کرده و اونا رو به خوبی باهم ترکیب کرده که باعث جذابیت بصری لوگو شده. خود لوگو هم که تضاد کافی رو با پس زمینه سفید داره، باعث شده از صفحه جدا بشه.شکل: باکس جستجو از شکل مستطیلی استفاده کرده تا فیلد سرچ قابل قابل فهم باشه و اونو خیلی کاربردی کرده.فضای منفی: ضفحه اول گوگل بیشترش از فضای منفی ساخته شده، که باعث شده که باکس جستجو — عملکرد اصلی صفحه (در مرکز توجه) باشه. فضای منفی همچنین به خوبی برای صفحه کار می‌کنه که درست به عنوان یک صفحه سفید کاغذ به نظر می‌رسه قبل اینکه کاربر عبارت جستجو شو وارد کنه.تعادل: صفحه تقریبا به صورت عمودی قرینه هست، که موجب یک حسی از تعادل شده نگاه کرده به کاربرا حس آرامش و لذت میده ☺.صفحه اول سایت کوارتزکوارتز یک شرکت خبری دیجیتالی هست که بر بستر موبایل فعالیت می‌کنه و دارای مخاطبین جهانی است که در سال 2012 توسط آتلانتیک مدیا، راه اندازی شده. این شرکت صفحه اصلی بولد و چشم گیری داره که یه جورایی ویترین اخبار برگزیده‌ش محسوب میشه. اینجا عناصر و اصول طراحی که گفتیم بررسی می‌کنیم که چطور کنار هم استفاده شدن:چیرگی: خبر اصلی سریعا چشممون رو می‌گیره چراکه فونتی بزرگ و ضخیم داره که باعث چیرگیش روی صفحه میشه.سلسله مراتب بصری: این صفحه از یک ساختار سلسله مراتب بصری واضحی برای رسوندن اهیمت عناصر مختلف استفاده کرده. خبر اصلی، با تیتر بزرگ و درشت، بالاترین سطح سلسله مراتب نسبت به سایر عناصر رو داره. برای خبر فرعی، که زیر خبر اصلی قرار داده شده، فونت کوچک تر و سلسله مراتب پایین تری نسبت به خبر اصلی در نظر گرفته شده.مقیاس و ارزش رنگ: صفحه اصلی وبسایت کوارتز با استفاده از مقیاس حرف کیو که ماسک خبر اصلی شده سریعا هویت وب سایت که اول کلمه کوارتز Quartz هست بهمون القا میکنه. با این حال، رنگ خاکستری کمرنگ حرف Q باعث شده که در پشت زمینه نامحسوس دیده بشه و بجاش تمرکز کلی بره به سمت تیتر خبر اصلی.فضای منفی: بیشتر فضای صفحه اصلی منفی هست که به محتوا اجازه میده خودشو نشون بده و بدرخشه. وقتی ماوس روی تیتر خبر اصلی میره، حرف کیو پس زمینه ناپدید میشه، و فضای منفی رو با عکس خبر اصلی پر میکنه. این مثال از اینکه چطور فضای منفی میتونه یه نقش بی نظیری رو در جذابیت وبسایت ایجاد کنه.یکپارچگی: کوارتز از یک سیستم گرید در وبسایتش ایجاد کرده که حس یکپارچگی بهمون دست میده. برای نمونه چهار خبر دارای فاصله های یکسان و پهنای برابری برخوردار هستن که باعث، ایجاد حس مرتبی و ساختارمند بودن وبسایت میشه.جمع بندیعناصر طراحی بصری، بلوک های اصلی ساخت یک محصول رو تشکیل میدن. با این که ما طراحان بصری نیازی به بررسی تک تک عناصر به شکلی دقیق در کار روزانه‌مون نداریم، اما اصول طراحی (اینکه چطوری عناصر رو کنار هم بزاریم که یک صفحات اپ رو بهینه بزنیم) نقش حیاتی تو کاری که انجام میدیم دارن. یاد بگیریم که چطور طرحی که میزنیم یکپارچگی، گشتالت، سلسله مراتب، تعادل، تضاد، مقیاس، برتری و تشابه داشته باشه، فوق العاده برای شمایی که طراحی بصری انجام میدید مهم هست.پس استفاده از این عناصر به ترتیب:Line - خطShape - شکلNegative space - فضای منفیVolume - حجمValue - ارزش رنگیColor - رنگTexture - بافتو در کنار هم بودن این اصول (که در ادامه دوره وارد جزئیات هر کدوم میشیم) :Unity - یکپارچگیGestalt - گشتالتHierarchy - ساختار سلسله مراتبیBalance - تعادلContrast - تضادScale - مقیاسDominance - چیرگیباعث میشه دائما نتایج پیروزمندانه خلق کنید.منبعتمرین 1: شما هم الان با توجه به مطالبی که گفته شد یک وبسایت یا اپی که طراحی شو دوس دارید مثل نمونه گفته شده بررسی کنید و کامنت بزارید. ( اگه دوست داشتید به ایمیل m.sh1391 در جیمیل ارسال کنید!)? نوبت شما‌ست!اگه هر جایی تو مقاله ابهام یا سوالی دارید خیلی خوشحال میشم نظرات شما دوستان گرامی رو داشته باشیم تا کیفیت مقالات رو بالاتر ببریم. با اشتراک گذاری مقاله هم ازمون حمایت کنید تا این نوشته به دست افراد بیشتری برسه. ساعت ها طول کشیده که چندین نفر زمان شون رو بزارن تا این مقاله آماده بشه شما هم چند ثانیه وقتتون رو بزارید و لینک این مقاله رو share کنید! پ. ن 1: جا داره از هم تیمی های گرامیم مریم کامرانفر و گلناز شهشهانی که زحمت ترجمه عکس‌ها و ویراستاری این مطلب رو کشیدن تشکر کنم.?

راهنمای نسبتاً کامل طراحی جدول داده‌ها (data table) در موبایل

Mohammad Sharifi — Fri, 27 Mar 2020 14:12:08 +0430

راهنمایی برای ایجاد یک تجربه کابری بهتر از جدول داده ها در موبایلنمایش داده های زیاد روی یک نمایشگر کوچک یک چالش ترسناک است! به جز گزینه محدود سازی تعداد ستون ها، چه راهکارهایی برای نمایش جداول بزرگ در موبایل و تبلت وجود دارد؟ بدیهی است نیاز به ثبات محتوا و نمایش ویژگیهای با معنی برای کاربران داریم. بهتر است ابتدا جدول را برای نمایشگرهای بزرگ طراحی کنید، قبل از اینکه آنها را برای نمایشگرهای کوچک تبدیل کنید.نیاز به اینکه جدول ها در نمایشگرهای کوچک کار کنند، دلیل و انگیزه (یا شاید هم بهانه) خوبی باشه که محتوا و ویژگی‌هایی که در جدول نمایش میدهید را مجددا ارزیابی کنید تا بدون در نظر گرفتن اندازه نمایشگر صفحه، دسترسی به محتوا را برای همه کاربران بهبود دهیم. [+]از کاربرانتان شروع کنیدابتدا بدونید برای چه کسی می‌خواهید طراحی می کنید و این کاربر چگونه از داده های جدول استفاده می کند؟(راهنمای ساخت پرسونا)پرسونا/های کاربر خود را بسازیدعملکرد اصلی را مشخص کنیددر نهایت کاربران می خواهند براساس داده ها یک عمل (action) را انجام دهند، پس باید محتوایی که براساس آن عمل صورت می گیرد، دم دست کاربر باشد.کاربران ما چه استفاده ای از جدول داده ها می کند؟کاربران از جدول ها معمولا برای مشاهده یا مقایسه داده‌ها باهم، و انجام یک عمل بر اساس داده ها استفاده می‌کنند.آیا کاربران می خواند سطرهای جدول را باهم مقایسه کنند؟اگر جوابمان به سوال خیر هست، یعنی کاربران نیازی به مقایسه سطرهای جدول ندارند و می خواهد فقط داده ها مشاهده کند، پس می توانیم به کاربر اجازه دهیم که خودش انتخاب کند چه داده هایی را نیاز دارد ببنید یا خودمان اینکار را برایش انجام دهیم.کاربر می تواند ستون های مورد نیاز خود را انتخاب کند، نکته: می توان ستون هایی که مرتب سازی برایشان معنی ندارد کنار داده های یک ستون دیگر قرار دهیم، مثل ستون اول (Company) عکس بالا، که نام کامل شرکت با رنگ کم رنگ تر از نام تجاری آن نوشته است.الگوهای طراحی رابط کاربری مشاهده جدول داده‌هادر حالتی که هدف مشاهده محتوا است، جداول را به شکل لیست های کارتی یا داده های غیر ضروری را به شکل آکوردئونی (با کلیک روی هر سطر محتوای آن نمایش و یا جمع شود) تبدیل کنیم.[+]لیست های کارتیتغییر نوع نمایش داده های جدول داده ها به کارتآکوردئونی برای گروهی از داده هاداده هایی که به لحاظ منطقی می توان گروه بندی کرد، می توانیم از اکوردئونی استفاده کنیمبه نظر شما معایب و مزایا هر کدام از این حالات چیست؟اگر هدف از جدول مقایسه محتوا استاگر کاربر نیاز به مقایسه بین سطرهای جدول دارد، پس باید رویکرد طراحی خود را به شکلی تغییر دهیم که کاربر بتواند سریع و آسان به هدف خود برسد.برای همین منظور می توانیم از اسکرول افقی با ثابت نگه داشتن ردیف های یک ستون که باید تمیزدهنده یکتا در جدول باشد، استفاده کنیم. رویکردی دیگر برای اینکا حذف ستون‌های غیرضروری است. از خودمان بپرسیم آن 3-4 ستون مهم که کاربری که از موبایل استفاده می کند کدام است، که کاربر بتواند به هدف اصلی خود برسد؟ اسکرول افقی با ثابت نگه داشتن ردیف های یک ستون [+]اسکرول افقی جهت مقایسه داده هاحتما یک نشانگر برای دادن سرنخ به کاربر جهت وجود اسکرول افقی قرار دهید. در شکل زیر نقطه های بالا جدول نمایان گر وجود اسکرول افقی است.یک یا حداکثر دو ستون مهم را ثابت نگه دارید، تا مقایسه قابل انجام باشد.حالت حذف ستون های غیرضروریاین الگو شاید بیشتر برای مشاهده اطلاعات استفاده شود، اما در قسمت مطالعه موردی (که پایین تر میخوانید) خواهیم دید که این الگو برای مقایسه هم می تواند مفید باشد.آن 3-4 ستون مهم که کاربری که از موبایل استفاده می کند کدام است، که کاربر بتواند به هدف اصلی خود برسد؟مقایسه دو به دو آیتم هاحالت مقایسه دو به دو برای ویژگی های یک کالااجازه دهید الگوهای طراحی رابط کاربری بالا در خلال یک مطالعه موردی بررسی کنیم.مطالعه موردی: ایجاد الگوی طراحی یک جدول پیچیده برای موبایلفرض کنید از ما خواسته اند که جدول زیر را که 20 ستون دارد برای موبایل بهینه سازی کنیم! 8 ستون رنگی داریم که جهت مقایسه وضعیت های مختلف استفاده می شود. شما چگونه می خواهید این کار را انجام دهید؟حالت دسکتاپ جدول داده ها، با قابلیت های مختلف بدون مشکلی به دلیل داشتن فضای کافی قابل استفاده است.رویکرد طراحیهمانطور که گفتیم باید بدانیم برای چه کسی طراحی می کنیم و کاربر خود را باید بشناسیم و نیز درک کنیم که چه استفاده ای از جدول می کند؟ فقط داده ها را میخواهد ببیند، آنها را مقایسه کند؟ و اینکه براساس داده ها چه عملی را می‌خواهد انجام دهد؟قدم 1: کاربران چگونه از داده های جدول استفاده می کنند؟کاربر ما چگونه از داده های جدول استفاده می‌کند؟بعد از شناخت استفاده کاربر از جدول در اینجا دو حالت که کاربر می‌خواهد اطلاعات یک سطر را باهم مقایسه کند (افقی) یا بر اساس یک ستون (عمودی) می‌خواهد آنها را باهم مقایسه کند، را بررسی می کنیم.حالت مشاهده کامل افقی یک سطرمورد استفاده 1: حالت مقایسه افقی یک سطراسکرول و اسکن افقیپیداکردن یک مشخص کننده یکتا (نیاز)مشاهده ستون های مربوطه (چطوری؟)حالت مقایسه عمودی ستون‌هامورد استفاده 2: حالت مقایسه عمودی یک ستونانتخاب ستون (چطوری؟)اسکرول و اسکنمقایسه با مشخص کننده یکتا (نیاز)قدم 2: کاربران برای رسیدن به هدف خود نیاز به تمامی ستون ها ندارند، پس کمترین داده با ارزش را نمایش دهیم.منظور از مشخص کننده یکتا جدول، آن داده هایی هستند که کاربر می تواند به وسیله آن تفاوت سطرها را بفهمد. برای مثال ما در اینجا بر اساس نیاز کاربر نام و شناسه را انتخاب کرده ایم.انتخاب دوستون به عنوان تمییز دهنده یکتا جدول قدم 3: ارائه راه حل جهت اسکن و مقایسه دو حالت گفته شده.راه حلی برای حالت مشاهده کامل افقی یک سطرمی توان جزئیات را برای بررسی بیشتر در یک صفحه دیگر نشان دهیم. این یک الگوی جاافتاده است که دقیقا اینجا راه حل مناسب برای این حالت می‌باشد. ارایه یک راه حل جهت بررسی دقیق جزئیات یک سطر از جدولراه حل برایی حالت مقایسه عمودی ستون‌هابرای این حالت می توان از یک Drop down (فارسی؟ انتخابگر) جهت گردش بین ستون های مختلف استفاده کنیم.مقایسه عمودی با امکان انتخاب ستون توسط کاربراینجا جایی است که الگوی جدید برای کاوش و مشاهده جزئیات یک جدول متولد می‌شود! الگویی که قطعا با شناخت نیاز کاربر و ارائه راه حلی جهت حل مشکل کاربرمان قابل دستیابی است. [بیشتر بدانید]نحوه انجام یک عمل (action) در حالت موبایلهمانطور که گفتیم، کاربران برای مشاهده یا مقایسه و انجام یک عمل بر اساس داده ها از جدول داده ها استفاده می‌کنند. الگوهای طراحی رابط کاربری زیر در پلتفرم های مختلف به ما دید لازم را جهت انتخاب یک الگو مناسب بر اساس نیاز کاربران به ما می‌هند.سوایپ (swipe) کشیدن سطر برای حذفحذف با کشیدن یک آیتمباتوجه به نبود هیچ نشانه ای جهت دادن سرنخ به کاربر ممکن است واضح نبودن عملیات که کاربر با کشیدن انجام می دهد کاربر را گیج کند.البته چون یک الگوی جا افتاده بین کاربران است و بیشتر کاربران آن را یاد گرفته اند، می توان از آن فقط برای انجام یک عمل و آن هم برای حذف استفاده شود. باید در طراحی این اینتراکشن دقت بیشتری کرد و راهنمایی های مربوط به آن را مطالعه کنیم.رول آپ اکشن‌ها، برای دسترسی سریعیک نمونه اپ رستورانی - انجام عملیات روی یک میزدر پلتفرم های مختلف. سمت راست iOS، سمت چپ Androidگذاشتن اکشن در حالت اکوردئونی [+]انجام چند اکشن همزمان روی سطرهای انتخابیجیمیل یک نمونه خوب برای استفاده از اکشن بار است.الگو اکشن بار برای کاربران iOS هم آشنا است.مقایسه الگوهای انجام یک عمل در iOS و Androidدر iOS تا جای ممکن سعی بر نمایش حداکثری اکشن ها است و در طراحی می شود که گزینه های جلوی دست کاربر باشد تا به راحتی بتواند عمل خود را انجام دهد. این کار با زدن بیشتر که روی آیتم از لیست است برگه اکشن ها (action sheet) برای کاربر ظاهر می شود یا با کشیدن یک آیتم به سمت چپ جهت حذف آن.انجام یک عمل در سیستم عامل iOSدر مقابل در اندروید سعی بر پنهان سازی اکشن‌ها است. از کمه های شناور جهت نمایش چند اکشن مهم و منوهای دارپ داون استفاده می شود.[+]انجام یک عمل در سیستم عامل Androidجمع بندیبا همدلی و شناخت کاربرانمان، نیازه و مشکلات را شناسایی کنیم و متوجه شویم که چگونه می‌خواهد از جدول داده ها استفاده کند.با استفاده از الگوهای گفته شده می توانید راه‎‌حل خود ارائه کنید یا اینکه در تعامل به کاربر الگوهای جدیدی را خلق کنید.از راه حل‌های خودتان نمونه اولیه بسازید و اجازه دهید کاربرانتان با آن کار کنند و با استفاده از بازخوردشان طرح خود را بهبود دهید.مطالعه بیشتر- https://stephaniewalter.design/blog/essential-resources-design-complex-data-tables- https://medium.muz.li/complex-tables-356826d11861پانوشت: اگر فکر می کنید می توانید شما هم این نوشته را بهبود دهید، تا همگی از دیدگاه شما استفاده کنیم، لحظه ای درنگ نکنید! دیدگاه خود را در قسمت زیر بنویسید یا با من در تلگرام، یاهو (mmdsharifi) در تماس باشید.

آمار بازدید مطالب من در سال ۹۸

Mohammad Sharifi — Wed, 25 Mar 2020 19:38:24 +0430

اگر دستاوردی را نتوانم اندازه بگیرم، چیزی در دست ندارم.اشتباه نشود، این به معنای تمایل به بهترین بودن و یا میل به اثبات چیزی نیست، اما تنها چیزی که می‌تواند برای بهتر شدن به من کمک کند یک نقشه راه است، از مسیری که طی کرده‌ام، تا بدانم چه اثری از خود به جا گذاشته‌ام. یک تصویر کلی که بتواند خیلی ساده نشانم دهد تلاش من چه اثری بر جامعه‌ام گذاشته است.ویدیوی آمار مخاطبین من را ببینید: https://cdn.virgool.io/annual-report/1398/yirume9wyngp-SPIGw.mp4 دستاوردهای من در سال ۹۸در سال ۹۸، من در مجموع ۶ پست در ویرگول منتشر کردم و پست‌های من ۱۱۳ مرتبه لایک شدند و افراد ۳۵ بار نظرات خود را روی پست‌های من به اشتراک گذاشتند. امسال ۹۱ نفر در ویرگول من را دنبال کردند تا پست‌های بعدیم را بخوانند. اما چیزی که این دستاورد را ارزشمندتر می‌کند اثری است که این پست‌ها از خود به جا گذاشتند.اثر پروانه‌ای منطبق آمار ۴,۹۸۱ بار پست‌های من خوانده شدند و زمانی حدود ۲,۴۲۸,۳۱۰ ثانیه صرف مطالعه آنها شده است، که با توجه به جمعیت ۷۲٬۹۴۰٬۰۰۰ نفری که در ایران به اینترنت دسترسی دارند، من توانستم حدود ۰/۰۳۳۲۹۲ ثانیه، سرانه مطالعه دیجیتال کشور را بالا ببرم. عددی که با تمام کوچک بودنش، اثر بزرگ و ارزشمندی است.اما این عددها فقط توضیحی است از آنچه که برای مخاطبانم به ارمغان آورده‌ام، اثر ارزشمند‌تری که با نوشتن در ویرگول از خود به جا گذاشته‌ام، تلاش پنهانی بوده که برای حفظ محیط زیست کرده‌ام. من با انتشار پست‌های خودم در فضای ویرگول توانستم در مصرف کاغذ صرفه جویی کنم؛ یعنی اگر قرار بود پست‌هایم را چاپ و به دست تک تک خوانندگان برسانم باید ۲۳,۷۳۹ کاغذ مصرف می‌شد.

کوله‌پشتی سال ۹۹ من، سبک و مقوی!

Mohammad Sharifi — Tue, 24 Mar 2020 19:49:54 +0430

این کوله پشتی ادامه یه کار باحال هست که سال های قبل هم انجامش دادم (98، 97)، در اینجا سه درسی که سال 98 یادگرفتم باهاتون به اشتراک میزارم که به نظرم ارزششو داره که حداقل یک بار بخونیدشون!یه روز بهاری تو مزرعه مون! ?خب خب نوبتی هم باشه، نوبت منه که کوله 99 رو ببندم و امسال هم مث همیشه سالی پر از موفقیت و شادی باشه!اگه بخوام خیلی مفید بهتون بگم چه درسهایی تو سال 98 گرفتم و امسال میخوام چی بندازم کولم اینا هستن:1️⃣ حرف زدن بسه، فک کردن بسه! انجامش بده ?شده ساعات ها پای فیلم های آموزشی یوتیوب بشینم و فقط اونا رو نگاه کنم، یا بخام یه کاری کنم که اونقدی راجبش فک کنم و شرایط مختلف و عجیب غریب رو بسنجم و تهشم کلا یادم بره یا نخام اون کار رو انجام بدم!?البته این هم بگم که به این معنی نیس که فک کردن رو کلا بزارم کنار بلکه برای شروع هر کاری بهتره از خودم بپرسیم چرا؟ و دلایلم رو مکتوب کنم. قبل از شروع هر کاری خودتون بپرسید، چرا؟✔ ایده اینکه بیشتر از اینکه متفکر باشیم، عملگرایی را در اولویت قرار دهیم.مطالعه پیشنهادی کتاب: با چرا شروع کنید، رهبران بزرگ چگونه الهام‌بخش دیگران می‌شوند؟ نویسنده: سایمون سینِک2️⃣ ساخت یک عادت جدید با ریزعادتخب تقریبا هر شب برنامه فردا رو می نوشتم، اکی ساعت 5 از خواب بیدار میشم میرم سراغ روتین صبحگاهی بعد کارای روزانه م رو از ساعت 8 شروع می‌کنم! این ظاهرا روی کاغذ خیلی جذاب به نظر می رسه ولی وقتی صبح میشه و می بینی لنگه ظهره?، انگار یه تشت آب سرد ریختن سرت!? اوه پسر گندخورد به همه برنامه هام... البته ممکنه این داستان بارها و بارها تکرار بشه به هر دلیلی! بعد به خودت بگی: هی تو اینکاره نیستی بیخال شو... و این زمزمه ها درونی انگیزه و انرژی تو میارن پایین...تا اینکه رو همون منِ قدیمی ت بمونی، شایدم واسه همینه هر سال همون اهداف همیشگی رو میزاریم!خب چاره چیه، چطور یه عادت جدید رو بسازم؟ریز عادت ها بهمون کمک می کنن خیلی ریز شروع کنیم و مهمتر از همه اینکه ادامه شون بدیم. بزارید یه مثال بزنم:? میخواید هر روز صبح یک پومودرو? (25 دقیقه) زمان بزارید و یک کتاب توسعه شخصی بخونید و آموخته هاتونم یادداشت کنید تا بتونید بکارشون ببندید (همون مورد 1️⃣!)، خب خیلیم عالی تبریک میگم بهتون! اما فرض کنید مث من یه روز پا میشید و می بینید ساعت 8:35 دقیقه س! اون وقته که شما باید بازهم کتاب بخونید اما خب به مدت 2 دقیقه!چی دو دقیقه؟ بله درست خوندید.اولا: دو دقیقه یعنی 4-5 تا صفحه کتاب خوندن و این بهتر هیچیه!دوما: در سخترین شرایط هم میشه هر روز 2 دقیقه وقت گذاشت!سوما: قراره من تبدیل به آدمی بشم که کتاب‌ خونه، پس حتما باید هر روز انجامش بدم تا به خودم ثابت کنم.✔ ایده اینکه پایبند به سیستمی باشیم که قرار شخصیتی منِ الان رو به منِ ایده‌آل تبدیل کنه.مطالعه کتاب پیشنهادی: کتاب ریزعادت‌ها: خرده‌عادت‌هانویسنده: جیمز کلیر3️⃣ یادگیری + انجام دادن بی وقفهخب سال قبل تصمیم گرفته بودم که دنبال چیزی برم که قلبم بهم الهام می کنه، برای همین خواستم تغییراتی در شغلم به وجود بیارم و از فرانت به سمت طراحی محصول حرکت کنم. مسیر چالشی و هیجان انگیزبود این تغییر و البته دوست داشتنی!البته یک شبه نمیشه مقصد رو عوض کرد ولی میشه جهت رو عوض کرد.خب شروع کار بود، این همه مطلب وجود جذاب وجود داره در دوره ها، کتابها، پست های آموزشی ویرگول حتی در تویتر و اینستاگرام!!?? این همه حجم مطلب برای یادگیری وجود داره؟! از کجا با چی شروع باید کنم؟ کلی گشتم و گشتم تا اینکه...خب چاره چیه به نظرتون؟ چطور میشه هزینه یادگیری رو بهینه کرد؟روی یادگیری دانش مستقل از زمان (Timeless Knowledge) بیشتر تمرکز کنید.به معنی که تمرکزتون روی اصول و مبانی یک علم بزارید که در طول زمان تغییرچندانی نمی کنه و چسپیدین و یادگیری اونا باعث میشه به درک عمیق و دید درستی از اون حوزه بشید و بتونید چیزهایی رو یاد بگیرید که زیربنا اون رشته یا علم هستند.در مقابل ابزارها این ویژگی رو ندارن، ممکنه الان یک ابزار خوب جواب بده چن سال دیگه یه ابزار خیلی بهتر پیدا بشه که ابزارهای قبل اون سوء تفاهم باشه ? برای مثال: اگه من قراره UI Designer بشم نباید زارت بپرم وسط ابزاری Figma یا Sketch و... (اگه ده سال پیش بود خب قطعا Photoshop) بلکه باید اول بشینم قشنگ اصول و مبانی طراحی، روانشناسی عمیق بشیم، چیزی که شما بخاطرش قراره استخدام بشید و به اون کسب‌و‌کار ارزش اضافه کنید و خوبی این نوع یادگیری این نوع مباحث هم همون طور که معلومه برای مدت زمان زیادی تغییر نمی کنند!برای همین در دوره های IDF ثبت نام کردم، چرا که بر اساس این طرز فکر دوره هاشون ساخته شدن ?خب من اگه امسال هم بتونم با همین استراتژی سه‌گانه پیش برم باید کلاه مو بندازم هوا! پس بزن بریم کارامونو شروع کنیم و بترکونیم ✨خب برنامه شما برای سال بعد چیه؟ آیا نکات من به دردتون می خوره؟ خوشحال میشم از شما بشنوم ?پ. ن. 1: اگه میخواید IDF ثبت نام کنید، میتونید در تلگرام mmdsharifi پیام بدین، خوشحال میشم کمکتون کنم :)پ. ن. 2: طراح محصول هستید؟ بیاید باهم دوست بشیم! به من (mmdsharifi ) سلام بدید!

من به آمار زمین مشکوکم تو چطور؟

Mohammad Sharifi — Mon, 08 Jul 2019 10:54:42 +0430

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

راهنمای کامل State management در فریم‌ورک انگولار

Mohammad Sharifi — Sun, 09 Jun 2019 14:59:35 +0430

قبلا طی پستی مفهوم ریداکس به زبون ادمی زاد توضیح دادیم! حالا می خواهیم ببنیم چطور می تونیم این مفاهیم رو در یک اپ انگولاری پیاده سازی کنیم. برای مدیریت استیت (State) در انگولار چهار کتابخانه معروف و خوب وجود داره NgRx، Akita, NGXS و حتی خود RxJS نیز می توان استفاده کرد. حالا بیاید بررسی شون کنیم.شما باید آشنایی که با Redux (مطلب قبلی) داشته باشید و همچنین تجربه کار با انگولار را در چندین پروژه داشته باشید تا بتوانید از آموزه های این مقاله استفاده کنید. http://vrgl.ir/wF3Jcتصور کنید - کتابها استیت های مختلف اپ هستند که درون یک کتابخانه مدیریت استیت، مدیریت شده انددر این مقاله، مفهوم مدیریت حالت را شرح داده و می گوییم که چگونه Akita به ما کمک می کند که به گردش داده در اپ به وسیله مدیریت کردن اون سرعت می‌بخشه. خب قبلش شاید بپرسید مدیریت State (حالت) چی هس؟ خب توجه کنید به تعریف ماشین حالت:A state machine is any device that stores the status of something at a given time and can operate on input to change the status and/or cause an action or output to take place for any given change. — The State Machine ماشین حالات، به هر وسیله ای که وضعیت چیزی را در یک زمان معین ذخیره کند و می تواند روی ورودی برای تغییر وضعیت و یا انجام یک عمل یا خروجی برای هر تغییری که شکل می گیرد، کار کند. - ماشین حالت دایره ها حالتهای مختلف و a اکشنی است که موجب گذار حالت می شود. - درس شیرین نظریه زبان ها و ماشین ها :))به زبانی ساده، حالت (State) هر نوع فرمی از داده را ذخیره و گذار حالت را بر مبنای حالت جاری و اکشن، مدیریت می کند.با مفاهیم گفته شده در عمل آشنا خواهیم شد.چرا مدیریت حالت ضروری است؟وب اپ ها دارن غنی تر و پیچیده تر میشن، همین موجب سخت شدن مدیریت حالت به شکل نمایی می شود.بخش های مختلف یک اپلیکیشن مسئولیت های متفاوتی دارند، و اونا (کامپوننت ها، دایرکتیو، و...) در بین فایل های مختلف از هم جدا شده اند، اما همه اونا نیاز دارند که به یک حالت دسترسی داشته باشند.یک کتابخونه مدیریت حالت راه راحتی را برای:مدل کردن حالت اپگرفتن مقادیر محاسبه شده از آنمانیتور کردن تغییراتسومندی های زیادی رو برامون داره از جمله normalize = نرمال سازی داده (جلوگیری از افزونگی داده)، immutability یا غیر قابل تغییر بودن و سازمندهی گزار حالت و...انتخاب یک کتابخانه برای مدیریت حالت (State)اول RxJS، سادگی زیادی داره [+] ولی در پروژه های بزرگ قابل استفاده نیست، چرا که شما نیاز به نوشتن کد زیادی برای انجام یک کار دارید، در حالی که کتابخانه های دیگه با کشیدن انتزاع (Abstraction) روی آن کار ما را راحت کرده اند. از جمله معروف ترین و پر استفاده ترین کتابخونه ها NgRx است.توسعه دهندگان Akita، بر این باور بوده اند که شیب تند یادگیری [Steep learning curve] (به معنی سختی یادگیری) NgRx و اینکه برای افزودن یک ویژگی کوچک نیازی به نوشتن کدهایی است که باید باشند (Boilerplate) تا بخواهیم تازه کدهای خودمان را بنویسیم، باعث شده برای حذف پیچیدگی های NgRx یک کتابخانه جدید توسعه دهند. [+]LEARNING CURVE + BOILERPLATE و نکته بعدی این است که Akita بر منبای اصول طراحی شی گرا نوشته شده در حالی که NgRx با رویکرد برنامه نویسی فانکشنال توسعه داده شده، بنابراین افرادی که تجربه برنامه نویسی شی گرا را دارند راحت‌تر می‌توانند با آن ارتباط برقرار کنند.حسی که من موقع استفاده از NgRx دارم :)مورد آخر هم کتابخونه NGXS زمانی برای کاهش پیچیدگی های NgRx به وجود اومد، اما با اومدن Akita تقریبا میشه گفت حرفی برای گفتن نداره، چرا که اکیتا بر پایه سادگی است، به طوریکه هم تازه کارها و هم توسعه دهندگان با تجربه می تونن یادش بگیرن و به راحتی ازش استفاده کنند.[+] البته اگر در پروژه هایتان از react،vue یا sevlte استفاده میکنید می توانید باز از Akita استفاده کنید.امیدواریم که تا الان راضی شده باشید که Akita رو انتخاب کنیم! و در ادامه راجبش حرف بزنیم. اگه هنوز شک دارید برای مقایسه کتابخونه های مدیریت state، این مطلب رو بخونید.معماری Akita معماریدو کامپوننت اصلی در Akita عبارت اند از: Store و Queryمی تونید فرض کنید که Store مثل یک جدول که داده ها در پایگاه داده نگه داری می کند است و کارهایی مانند درج و به‌روزرسانی داده و... را انجام می دهد.مورد بعدی Query راهی برای درخواست داده از Store است.یک کوئری می تونه با بقیه کوئری های دیگه حرف بزنه و ترکیب شون (Join) باعث بشه که یه کویری پیچیده تر ایجاد بشه.کامپوننت به شکل reactive (واکنش‌پذیر) در حال گرفتن داده است. ما (تیم توسعه Akita) بر این باوریم که نیازی نیست کامپوننت منبع داده خود را بشناسد، به همین منظور نیازی به تزریق store به داخل کامپوننت (مانند NgRx) نیست، اما تغییرات store رو با استفاده از سرویس ها داریم.اینطور است که ما به یک جریان داده ی یک طرفه (Redux) با یک معماری دقیق می رسیم.?حالا که با مبانی بسیار ساده Akita آشنا شدیم، بهتره که طی یک پروژه کلی چیزهای هیجان انگیز رو تجربه کنیم و یادشون بگیریم!نصب Akitaبرای شروع کافیه یه پروژه انگولار با CLI ایجاد کنید و کار رو شروع کنید. نصب با یک دستور ng add @datorama/akitaساخت فرم ورود کاربران Loginایجاد store برای احرازهویتدو نوع store در Akita داریم. store پایه که هر نوع شکلی از داده رو در خودش نگه داری می کنه و entity store نیز برای ذخیره سازی داده های یک موجودیت بکار می رود. یک موجودیت شامل همه اعمال CRUD (ایجاد، خوانش، به‌روزرسانی، حذف) روی داده های آن می شود.ساخت store پایهما در اینجا برای Login از یک store پایه استفاده می کنیم. جهت ساخت، دستور زیر را بزنید.ng g akita-schematics:feature auth/auth --plainیا خیلی ساده‌ترng g af auth/auth --plainیا خیلی خیلی ساده تر!akitaبا زدن فلگ plain یک store پایه ایجاد می شود. حالت پیشفرض (بدون فلگ plain) برایمان entity store می سازد. خروجی دستور بالا ساخت یک پوشه به اسم state داخل auth و ایجاد فایل های store, query, servic است.فایل Auth Store کارمان را با ساخت مدل state (شامل نام و توکن برگشت داده شده از سمت سرور) و نوشتن حالت آغازین در store ادامه میدهیم.// Step 1 export interface AuthState { name: string; token: string; } export function createInitialState(): AuthState { return { name: null, token: null }; }فایل Auth Queryدر قسمت auth.query نیز نیاز داریم بدانیم که کاربر چه موقه حالت لاگین آن عوض می شود، پس:$isLoggedIn = this.select(state => !!state.token); // 1 isLoggedIn() { return !!this.getValue().token; // 2 }1. توجه داشته باشید که تابع select، تغییرات بخش در خواستی (token) مربوط به state در قالب Obervable بهمون بر می گردونه، 2. درحالی که تابع getValue فقط مقدار را بر می گردونه بدون نیاز به subscribe کردن روی آنفایل Auth Serviceو در نهایت در سرویس، تابع ورود و خروج را پیاده سازی می کنیم. با استفاده از تابع update (از توابع توکار Akita) استور را به روزرسانی می کنیم.login(cred: { username: string, password: string }) { // در خواست به api // return this.http // .post(`${API}/login` cred) // .pipe(tap((authState: AuthState) => this.authStore.update(authState))); // جعل درخواست لاگین return of({ name: cred.username, token: '1234' }).pipe( tap((authState: AuthState) => this.authStore.update(authState)) // به‌روزرسانی استور ); } logout() { this.authStore.reset(); // بازگشت به حالت آغازین }کامپوننت لاگینخیلی ساده فرم زیر رو می سازیم. و حالا پیاده سازی درون فایل login.component.ts error: string | null = null; constructor ( private authService: AuthService, private router: Router ) {} submit() { this.error = null; if ( this.loginForm.valid ) { this.authService.login(this.loginForm.value).subscribe({ next: ({ name }) => { this.router.navigateByUrl('/'); // successful login! console.log(` Welcome ${name} `) }, error: (error) => { this.error = error.error.errorMsg; } }); } } ابتدا بررسی می کنیم که فرم valid باشه، بعد با استفاده از سرویس auth متد login را فراخوانی می کنیم. اگه جواب درخواستمون ? بود، یک پیغام خوش آمد گویی به کاربر در کنسول چاپ می شود، و گرنه متن خطا را زیر دکمه Submit نمایش می دهیم.منابع: [+, +, +]خب فکر کنم تا اینجا کافی باشه برای این مقاله، در سری بعد بیشتر راجبش خواهیم گفت. (در مورد موضوع مقاله بعدی، ایده بدید!)شما راجب Akita چی فکر می کنید؟ نظرتون راجب این پست چیه؟ ممنون میشم فیدبک هاتونو تو نظرات بگید. همچنین این پست رو ❤️ کنید و به اشتراک بزارید :)? به جامعه انگولار ایران بپیوندید!کانال انگولار ایرانگروه انگولار ایرانتوییتر انگولار ایرانو ما را در اینجا فالو کنید!

شروع کار با فریم‌ورک انگولار در ویرایشگر VS Code

Mohammad Sharifi — Wed, 29 May 2019 21:36:58 +0430

راه اندازی محیط توسعه برای فریم ورک انگولاره اندازی محیط توسعه برای فریم ورک انگولارپیشنهاد میشه که ویرایشگر کد (Visual Studio Code) را دانلود کنید. چرا که سبک و رایگان است، در عین حال بسیار کاربردی و پرطرفدار.حالا باید پلاگین های مفید و ضروری برای توسعه اپ های انگولاری نصب کنیم تا کارهایمان را به راحتی انجام دهیم و بیشتر از زندگی لذت ببریم.? نصب یک پلاگین، برای نصب تمام پلاگین ها!برای این کار از منو کناری ویرایشگر VSCode روی آیکن Extensions کلیک می کنیم. دقیق بخوابم بگم این حالا عبارت Angular Extension Pack رو جستجو کنید. و دکمه Install رو بزنید.Angular Extension Pack خب تموم شد، به همین سادگی! ? با نصب این پلاگین بقیه تمامی پلاگین های ضروری دیگه هم باهاش نصب میشن و می تونید.بعد از نصب توضیه اکید می کنم که برای دونستن جزئیات بیشتر راجب این کوله پشتی پربار (پلاگین بالا!) توضیحات شو بخونین.به جامعه انگولار بپیوندید کانال تلگرام: جامعه انگولار ایران? https://github.com/Angular-Iran? twitter.com/Angular_Iran? لینک گروه: https://kutt.it/ng-group

آموزش ریداکس Redux، به زبون آدمی زاد

Mohammad Sharifi — Sat, 06 Apr 2019 11:35:08 +0430

در این نوشته قراره به خیلی خودمونی ریداکس و مفاهیمی که پشتشه، رو به زبونی ساده و گام به گام براتون توضیح بدم.پیشنیازش آشنایی با جاوااسکریپت، ES6 است، همچنین خوبه که تجربه ساخت اپ رو با جاوااسکریپت یا یکی از فریم‌ورک ها و کتابخونه هاش داشته باشید.خب با گفتن یک سری مفاهیم اولیه شروع کنیم ?? تعریف استیت. تمامی اطلاعات که داخل برنامه مون هس، برای مثالاطلاعات برگردونده شده از سروراطلاعات کاربر (نام، ایمیل، نقش ها، سطوح دسترسی)ورودی های کاربر (user inputs)استیت رابط کاربری (دراپ داون، باز و بسته شدن منو)روتر Router یا location state (همون URL)✨تابع pure . تابعی که با هر بار فراخوانی آن با پارامتر های یکسان، خروجی یکسانی رو بهمون میده و مقدار ها رو (روی مقدار قبلی) باز نویسی نمی کنه، تابع pure یا گفته میشه. به عبارتی دیگر یک الگوی به‌روزرسانی immutable گفته میشه. // pure functions function square(x) { return x * x } function squareAll(items) { return items.map(square); // return new array }در مقابل تابعی که چنین ویژگی هایی نداشته باشه، impure گفته میشه. برای مثال کارهایی رو مثل ارتباط با api سرور، انجام محاسبات و باز نویسی آن روی داده های قبلی.// Impure function function square(x) { updateInDateBase(x); // or http request return x * x } function squareAll(items) { for (let i = 0; i < items.length; i++) { items[i] = square(x); } }?قوانین سه گانه Reduxتمامی استیت برنامه در یک آبجکت جاوااسکریپتی نگه داری میشن که بهش میگیم store استیت ها (همون store) فقط قابل خواندن است، و برای تغییرش باید از اکشن action استفاده کنیم.تغییرات توسط که تابع pure داده میشه به اسم reducer. در واقع استیت قبلی و اکشن را می گیره و برنامه را به‌ استیت جدیدی می بره.اولین تجربه با ریداکس، ساخت یک شمارشگرخب بیاید ساده ترین مثال ممکن را با هم بنویسیم. یک شمارشگر (counter) کالا برای افزایش و کاهش تعداد کالا در سبد خرید، خب پس با من کد بزنید!گام 1️⃣. از تابع reducer شروع کنیم.function reducer(state, action) { // 1 return state; // 2 }1. همان طور که گفتیم دو پارمتر می گیرد، یکی استیت جاری و یکی هم اکشن. 2. استیت جاری رو هم بدون تغییر بر می گردونه.گام 2️⃣. حالا اکشن هایی رو که داریم داخل تابع reducer می نویسم.اکشن action یک آبجکت جاوااسکریپتی است که دو پراپرتی داره. اولی type که نوع اکشن (مثلا در اینجا افزایش، کاهش)، "type: "INCREMENT و دومی هم payload که مقادیر استیت جدید مون رو مشخص می کنند. مثلا در اینجا اگه یک لیست از کالا در سبد خرید داشتیم باید می گفتیم که تعداد کالای کدام کالا رو می خواهیم تغییر بدیم.payload: { productId: 2}برای سادگی فعلا payload را در نظر نمی گیریم. بیاید اکشن هامون رو پیاده سازی کنیم.function reducer(state = 0, action) { // 1 if (action.type === "INCREMENT") { // 2 return state + 1; } else if (action.type === "DECREMENT") { // 3 return state - 1; } else { return state; // 4 } }1. چون شمارشگر از 0 شروع می شود، پس state اولیه مون میشه 0.2. اگه کاربر دکمه + رو بزنه، نوع اکشن افزایش است که اسمشو میزاریم "INCREMENT" اتفاق می افته. 3. اگه کاربر دکمه - رو بزنه، نوع اکشن کاهش است که اسمشو میزاریم "DECREMENT" اتفاق می افته.4. اگه غیر از موارد بالا اکشنی از نوع دیگه داشتیم، استیت جاری رو برگردون.? خب تبریک میگم! اولین تابع reducer خودتون رو نوشتید! به همین سادگی. بیاید یه دستی بهش بکشیم خب میشه به جای if else ها از switch/case استفاده کنیم.خروجی تابع reducer برای شمارشگرگام 3️⃣. افزودن کتابخونه Redux، و ساخت Storeبرای اینکه سه قانونی که گفتیم رو به شکل آماده داشته باشیم، از کتابخونه Redux استفاده می کنیم. تگ script زیر رو به head فایل html مون اضافه می کنیم. ریداکس سه تابع مهم داره، که بهشون می پردازیم.