https://virgool.io/RedAcademy/feed آکادمی سرخ، دانشگاهی است مجازی در حوزه‌های طراحی‌صنعتی، طراحی محصول و برندینگ. و پژوهش‌ها، ترجمه‌ها و اخبار بروز از دنیای دیزاین کلاس‌های آن است. دنبال کنید و به دوستان خود پیشنهاد دهید. برای همکاری (تهیه و ترجمه محتوا) پیام دهید. fa 2026-04-14 10:47:06 https://files.virgool.io/upload/publication/6ooqrgazhqn3/feslgb.png https://virgool.io/RedAcademy https://virgool.io/RedAcademy/%D8%AA%D8%B3%D8%AA-%D8%A8%D8%AA%D8%A7-beta-testing-wwo4hkqw2fld آزمایش بخشی جدایی ناپذیر از فرآیند طراحی محصول است و در هر مرحله نیاز به شیوه خاصی از آزمون داریم. در این وبلاگ، آزمایش بتا را بررسی می کنیم، به طور خاص، که معمولاً در آخرین مراحل طراحی محصول قرار می‌گیرد.من آرین مقبلی، طراح محصول و مدیر هنری هستم و دوست دارم هر چیزی در مورد دیزاین (مخصوصا طراحی محصولات دیجیتالی) رو به زبان ساده برای علاقه‌مندان به این حوزه بازگو کنم.این مقاله به سوالات زیر پاسخ خواهد داد:تست بتا چیست؟تستر بتا کیست؟تفاوت بین تست آلفا و بتا چیست؟چگونه از آزمایش بتا بیشترین استفاده را می کنید؟ تست بتا چیست؟تست بتا نوعی تست کاربر و کاربردپذیری است که در آن تیم محصول یک محصول تقریباً تمام شده را به گروهی که نمایندگان مخاطب هدف هستند می‌دهد. این گروه ماموریت‌های مشخصی را در محیط طبیعی خود انجام می‌دهد و سپس تجربه محصول را ارزیابی می کند. هدف از آزمایش بتا کشف هر‌گونه مشکل در تجربه کاربر است تا تیم محصول بتواند قبل از عرضه محصول به آنها رسیدگی کند.در حالی که هیچ رویکرد استانداردی برای آزمایش بتا وجود ندارد، چند الزام وجود دارد که یک محصول ابتدا باید آنها را برآورده کند:محصول باید پایدار باشد و تمام ویژگی‌های نسخه نهایی را پاس کند.شرکت کنندگان آزمون باید به مخاطبان هدف محصول تعلق داشته باشند، همانطور که توسط تحقیقات بازار تعریف شده است.شرکت کنندگان در آزمون باید با یک محصول در محیط "زندگی واقعی" تعامل داشته باشند، می‌خواهد خانه باشد یا دفتر کار.تستر بتا کیست؟آزمایش‌کننده‌های بتا کاربران واقعی هستند که محصول را در محیط طبیعی خود و با دستگاه‌های خود آزمایش می کنند. به عنوان بخشی از آزمایش، این کاربران، کاربری معمول را در شرایط همیشگی خود تکمیل می‌کنند و سپس عملکرد، اطمینان‌بخشی و کاربری محصول را ارزیابی می کنند.تفاوت تست آلفا و بتاقبل از پرداختن به جزئیات آزمایش بتا، مهم است که آن را از آزمایش آلفا متمایز کنید. زمان انجام آزمایش و اینکه چه کسی درگیر است، تفاوت های اصلی هستند.تست آلفا مرحله آزمایشی است که قبل از مرحله بتا است. این معمولاً با نسخه کمتر پایدار محصول و گاهی اوقات با مجموعه ویژگی‌های محدود است. تست آلفا معمولا توسط یک تیم‌داخلی از توسعه دهندگان، طراحان و متخصصان QA انجام می شود. همچنین در یک محیط کنترل شده انجام می شود.آزمایش‌کنندگان آلفا معمولاً تست جعبه سیاه و جعبه سفید را برای کشف مشکلات ترکیب می‌کنند. تست جعبه سیاه زمانی است که تستر با ساختار داخلی یا کد منبع محصول آشنا نیست. تست جعبه سفید زمانی است که تستر با ساختار داخلی آشنا باشد.از طرف دیگر، آزمایش بتا همیشه پس از اتمام تست آلفا انجام می شود. آزمایش بتا معمولاً آزمایش جعبه سیاه است و بیشتر اوقات به صلاح‌دید کاربر انجام می شود (نمی تواند یک فعالیت کنترل شده باشد).در طول این مرحله بتا، ممکن است:مسیر مورد انتظارتان از سفر کاربر (user journey) را با آنچه کاربر می‌پیماید (نحوه تعامل واقعی کاربر با محصول) بررسی کنید .پاسخ‌های احساسی را به تعاملات، جمع‌آوری کنید (درک اینکه طراحی رابط‌کاربری (UI) چه احساسی را در کاربران ایجاد می کند).آزمایش بتا می‌تواند بینش‌های ارزشمندی از تصمیمات و رفتار کاربر واقعی ارائه کند و باعث شود تیم محصول در طراحی یک بخش خاص، بخاطر نوع تعامل کاربر، تجدید نظر کند.در اینجا خلاصه ای از تفاوت های بین تست آلفا و آزمایش بتا آمده است:مراحل آزمایش بتا"چه زمانی باید آزمایش بتا انجام دهیم؟"یک سوال رایج برای تیم‌های محصول است که یک پاسخ درست ندارد، چون بستگی دارد به ماهیت محصول و منابع موجود. برخی از تیم‌ها آزمایش بتا را برای نسخه‌های اصلی رزرو می‌کنند، در حالی که تیم‌های دیگر آزمایش بتا را هم برای نسخه‌های فرعی و هم اصلی انجام می‌دهند.با این حال، مراحل آزمایش واقعی برای بسیاری از انواع مختلف محصولات مشابه است:تست پیش آلفا (تست داخلی توسط تیم محصول انجام شده است)تست آلفا (تست داخلی انجام شده توسط تیم محصول و گروه کوچکی از کاربران مورد اعتماد و دعوت شده)تست بتاتست قبل از انتشار (آزمایش محصول نهایی قبل از ارسال به بازار)تست پس از عرضه (تست پس از عرضه محصول)در حالت ایده آل، هر فاز باید معیارهای خروج روشنی داشته باشد. سه نوع آزمایش بتاعلاوه بر مراحل، سه نوع اصلی آزمایش بتا وجود دارد. تیم ها ممکن است از یک، دو یا هر سه نوع به عنوان بخشی از آزمایش خود استفاده کنند.آزمایش بتا بسته در مقابل آزمایش بتا بازبتای بسته (بتای خصوصی) زمانی است که با گروهی از افراد منتخب آزمایش می‌کنید، مانند پذیرندگان اولیه یا مشتریان فعلی. این نوع آزمایش برای آزمایش برای بخشی محدودی از عملکرد محصول، یعنی فقط ویژگی‌های کلیدی محصول آینده، مناسب‌تر است.تست‌ بتای باز به هر کسی اجازه می‌دهد در آن شرکت کند. آزمایش‌های بتای باز معمولاً از مرحله بتای بسته پیروی می‌کنند و زمانی که می‌خواهید داده‌های کمی در مورد کاربران هدف خود جمع‌آوری کنید، این گزینه عالی است. آزمایش بتا باز همچنین می‌تواند بینشی در مورد مقیاس‌های زیرساخت شما ارائه دهد، مانند اینکه آیا بک‌اند شما می‌تواند تعداد زیادی از کاربرانی که همزمان در محصول شما کار می‌کنند یا خیر.تست بتا فنیتست بتا فنی شامل گروهی از کاربران آگاه در زمینه فناوری است - معمولاً یک گروه داخلی از متخصصان در سازمان، از جمله کسانی که مسئول طراحی و توسعه محصول هستند. هدف از این آزمایش کشف اشکالات پیچیده و گزارش سریع آنها به تیم مهندسی است. این گروه داخلی معمولاً مسائل جزئی را نادیده می‌گیرد، بنابراین آزمایش بیشتر بر روی مشکلات فنی بزرگتر متمرکز است.تست بتا بازاریابیدر حالی که دو نوع آزمایش قبلی بر روی یافتن مشکلات در یک محصول متمرکز هستند، آزمایش بتا بازاریابی دو هدف دارد: پیدا کردن مشکلات در یک محصول جلب توجه رسانه‌ها برای محصول شمابا این آزمایش، تیم بازاریابی شرکت، آزمایش بتای آتی را در کانال‌ها و رسانه‌های مختلف، مانند پست در شبکه‌های اجتماعی یا گزارش رسانه‌ها یا حتی ارسال ایمیل به کاربران هدف، تبلیغ می‌کند. علاوه بر دریافت بازخورد ارزشمند از تست‌های خود، می‌توانید ببینید که گفتگوهای اولیه در مورد محصول شما چگونه است. به عنوان مثال، چند درصد از فالوورها یا مشترکین شما علاقه‌مند به آزمایش محصول جدید بودند؟ معمولاً از این نوع آزمایش بازاریابی محور، بازخورد کیفی و کمی دریافت خواهید کرد.برای اجرای آزمایش بتا به چه چیزی نیاز دارید؟اکنون که پاسخ‌های «تست بتا چیست» و «تستر بتا کیست» را می‌دانید، زمان آن رسیده است که نحوه انجام درست آن را بررسی کنید. مانند هر فرآیند آزمایش دیگری، آزمایش بتا نیاز به آمادگی دارد. در زیر چند نکته قابل بررسی است.اهداف خود را از قبل مشخص کنیداول از همه، مهم است که هدف (یا اهداف) آزمایش بتا خود را شناسایی کنید. دقیقا چه چیزی را می‌خواهید تست کنید؟ آیا جریان کاربری یا ویژگی خاصی دارید که می خواهید اعتبار‌سنجی کنید؟بر اساس هدف خود، می توانید مرتبط‌ترین نوع آزمایش بتا را انتخاب کنید. به عنوان مثال، هنگامی که طراحی وب راه حل تجارت الکترونیک خود را آزمایش می کنید، ممکن است بخواهید روی جمع آوری بازخورد کاربران در مورد جریان خرید محصول تمرکز کنید.بررسی عملکرد محصولاطمینان حاصل کنید که هر عملکردی که می خواهید آزمایش کنید به درستی کار می‌کند. دوباره بررسی کنید که خرابی غیرمنتظره سیستم یا وضعیت‌های بن‌بست نداشته باشید، مانند صفحه خطایی که مانع از حرکت کاربران به جلو می شود.شرکت کننده مناسب آزمون را استخدام کنیدشناسایی و دعوت از شرکت‌کنندگان مناسب یکی از چالش های اصلی آزمایش بتا است. در اینجا دو عامل وجود دارد که باید هنگام استخدام شرکت کنندگان در آزمون در نظر بگیرید:شرکت کنندگان در آزمون باید مهارت‌های لازم برای استفاده از محصول شما را داشته باشند.نیاز به دعوت از تعداد مناسبی آزمایش کننده بتا.این مقاله از TechBeacon نشان می دهد که چگونه تعداد ایده آل شرکت‌کنندگان را بر اساس اندازه پروژه و سایر عناصر محاسبه کنید.به شرکت کنندگان در آزمون انگیزه دهیدبرای تشویق به جمع‌آوری بازخورد دقیق‌تر، انگیزه‌ها یا پاداش‌هایی را در نظر بگیرید. این می‌تواند کارت هدیه یا تخفیفی باشد که صرفاً برای شرکت در آن شرکت می‌‌کند، یا فرصتی برای دریافت جایزه نقدی در صورت یافتن یک اشکال.مدت زمان آزمون را مشخص کنیددوره‌های آزمایشی خیلی کوتاه یا خیلی طولانی، منجر به نتایج بی‌اعتبار می‌شوند. برای مبارزه با این، با تعریف محدوده آزمایش خود شروع کنید. مناطق خاصی را که می خواهید آزمایش کنید و همچنین تاریخ شروع و پایان را مشخص کنید. یک یا دو چرخه آزمایش، هر کدام بین دو تا چهار هفته را هدف قرار دهید.تدوین دستورالعمل‌ها و مستندات شفاف وقتی مردم برای اولین بار با یک محصول جدید تعامل می کنند، باید یاد بگیرند که چگونه از آن استفاده کنند. برای هموارسازی این فرآیند یادگیری، نوشتن دستورالعمل‌ها و مستنداتی که به سؤالات رایج کاربران پاسخ می‌دهند، ایده خوبی است. این موارد را به راحتی برای شرکت‌کنندگان در آزمون در دسترس قرار دهید، تا زمانی که محصول شما را آزمایش می‌کنند و نحوه استفاده از آن را یاد می‌گیرند، بتوانند راحت تر به مسیر خود برگردند.قبل از آزمایش، مسائل شناخته شده را با شرکت‌کنندگان در آزمون به اشتراک بگذاریداگر محصول شما دارای برخی مشکلات شناخته شده است که ممکن است بر تعاملات کاربر تأثیر بگذارد، بهتر است قبل از شروع آزمایش بتا، آن لیست را به اشتراک بگذارید. این تضمین می‌کند که در مورد مشکلاتی که قبلاً برای رفع آنها تلاش می‌کنید، بازخورد ارائه نخواهند کرد.یک روش روشن برای جمع آوری بازخورد ایجاد کنیدیک روش واضح برای جمع آوری بازخورد و اشکالات به شما کمک می کند تا روند آزمایش خود را ساده کنید. در اینجا چند توصیه عملی برای تیم های محصول وجود دارد:در صورت امکان اطلاعات را به صورت خودکار جمع آوری کنید. برای مثال، محصول شما می‌تواند مکانیزم داخلی برای ارسال گزارش‌های خرابی و سایر اطلاعات سیستم داشته باشد. ابزارهایی مانند Buglife، Instabug و Bugsee می‌توانند در این زمینه به شما کمک کنند.یک کانال واضح برای ارتباط بین شرکت‌کنندگان در آزمون و تیم محصول خود ایجاد کنید. این می‌تواند یک فرم بازخورد در وب‌سایت شما یا یک کانال خصوصی در Slack باشد. نکته کلیدی این است که اشتراک‌گذاری نظرات و پیشنهادات خود را برای شرکت‌کنندگان در آزمون آسان‌تر کنید.نتیجهآزمایش بتا یک روش عالی است که به شما امکان می‌دهد ببینید کاربران واقعی چگونه با محصول شما تعامل دارند و قبل از اینکه محصول شما به بازار برسد با چه مشکلاتی مواجه می‌شوند. اگرچه هدف از آزمایش بتا و همچنین روش آزمایش ممکن است بسته به محصول متفاوت باشد، اما هدف نهایی یکسان است: ایجاد محصولاتی که تجربه کاربری عالی داشته باشند.منبع آکادمی سرخ آرین مقبلی Sun, 25 Feb 2024 20:37:55 +0330 https://virgool.io/RedAcademy/%DB%B5-%D9%86%DA%A9%D8%AA%D9%87-%D9%85%D9%88%D8%AB%D8%B1-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%A8%D9%86%DA%86%D9%85%D8%A7%D8%B1%DA%A9-v4uf6sw4licv بهینه‌کاوی (benchmarking) چیست؟بنچ‌مارکینگ فرایند پیوسته و دائمی سنجش محصولات، خدمات و فرایندهای یک کسب و کار، در مقایسه با قدرتمند‌ترین رقبا یا شناخته‌شده‌ترین نمونه‌های پیشتاز بین‌المللی است. تعریف ساده‌ی بنچ‌‌مارکینگ این است: «جستجو در صنعت برای پیدا کردن بهترین شیوه‌ی انجام یک کار که می‌تواند بالاترین سطح خروجی و عملکرد را ایجاد کند.»من آرین مقبلی، طراح محصول و مدیر هنری هستم و دوست دارم هر چیزی در مورد دیزاین (مخصوصا طراحی محصولات دیجیتالی) رو به زبان ساده برای علاقه‌مندان به این حوزه بازگو کنم.می‌توان دو نوع بنچمارکینگ را تعریف کرد: گذشته نگر و مبتنی بر وظیفه.۱. بنچمارکینگ گذشته‌نگر (Retrospective benchmarking)در یک مطالعه گذشته‌نگر، از شرکت‌کنندگان آزمون خواسته می شود که آخرین تجربه خود را با یک محصول به یاد بیاورند و به سؤالات مرتبط پاسخ دهند. مصاحبه با کاربر یک روش موثر برای ارزیابی گذشته‌نگر است. مهم است که به یاد داشته باشید که حافظه انسان قابل خطا است و رویکرد گذشته‌نگر تضمین نمی‌کند که شرکت کنندگان در آزمون تمام نکات دقیق را به خاطر بسپارند.۲. بنچمارک مبتنی بر ماموریت (Task-based benchmarking)در این سنجش، از شرکت‌کنندگان خواسته می‌شود تا از محصول استفاده کنند و طی ماموریت‌هایی، تجربه استفاده را ثبت کنند. با شبیه سازی تعامل واقعی با یک محصول، جمع آوری برخی معیارهای مبتنی بر تعامل (مانند زمان اتمام کار، میزان خطا و غیره) آسان‌تر می شود. برای ارزیابی دقیق، لازم است پیش از تست، ماموریت‌ها و سنجه‌ها (معیارهای موفقیت) بررسی و انتخاب شوند. ناظر جلسه می‌تواند تعامل کاربر با محصول را مشاهده کند و اگر چیزی نامشخص است سؤالات موشکافانه بپرسد.* در بیشتر موارد، توصیه می‌شود برای به دست آوردن واقعی‌ترین نتایج، آزمایش‌های گذشته‌نگر و مبتنی بر ماموریت را ترکیب کنید.فرآیند بنچمارک UXبنچمارک UX بخشی از فرآیند تست کاربر است و مشابه سایر فرآیندهای تست کاربریست.1: تعریف خط مبناهنگامی که معیار UX را شروع می کنید، باید یک خط مبنا تعریف کنید - یک نقطه شروع، چیزی که با آن اندازه گیری خواهید کرد. توصیه می‌شود یک ویژگی برتر (یا مجموعه‌ای از ویژگی‌ها) را که می‌خواهید اندازه‌گیری کنید و در محصول خود بهبود ببخشید، انتخاب کنید. به عنوان مثال، هنگامی که معیار UX را برای یک وب‌سایت فروشگاهی انجام می دهید، ممکن است بخواهید روی فرآیند پرداخت تمرکز کنید. معیارهای پایه را تعریف کنید، مانند میانگین زمان انجام کار یا میانگین تعداد صفحات بازدید شده، و آزمایش را برای دریافت معیارهای قابلیت استفاده پایه انجام دهید.نمونه ای از نحوه اندازه گیری engagement کاربر در هنگام تعامل با یک محصول.در اینجا دو نکته وجود دارد که باید هنگام تعریف خط پایه خود به خاطر داشته باشید:محک زدن یک تلاش تیمی است. با تیم خود در مورد اهداف و اهداف مطالعه معیار خود به توافق برسید. بسیار مهم است که قبل از شروع، در مورد آنچه می خواهید به دست آورید و چرا به آن دست یابید، توافق کنید. اهداف روشنی را تعیین کنید، مانند کاهش درصد کاربرانی که فرآیند پرداخت را رها می‌کنند تا فلان درصد.معیارسازی باید به KPIها گره خورده باشد. با گره زدن معیارهای معیار UX به KPIهای واقعی کسب‌و‌کار (مثلا: بهبود درآمد / بهبود رضایت مشتری)، می‌توانید به طور مؤثرتری از زاویه دید ذی‌نفعان صحبت کنید و برای ایجاد تغییرات متقاعدشان کنید.۲: شرکت کنندگان آزمون را با دقت انتخاب کنیدآنچه شما می‌دانید، بیشتر از شرکت‌کنندگان در آزمون نیست پس، افرادی را به آزمون دعوت کنید که نماینده مخاطبان هدف شما (مشتریان موجود یا بالقوه) باشند. از اطلاعات پرسونا برای ارزیابی استفاده کنید. (مشخصات دموگرافیک و ویژگی های روانی و رفتاری کاربر)درک این نکته مهم است که به تعداد قابل توجهی از شرکت کنندگان در آزمون نیاز دارید. به طور کلی، توصیه می شود از 20 تا 30 شرکت‌کننده در آزمون دعوت کنید زیرا این تعداد به شما کمک می کند تا از داده های خود نتایج معتبرتری بگیرید.3: آزمایش را ثابت نگه داریددر این مرحله، شما باید ماموریت‌ها را برای بنچمارک تجربه کاربر بنویسید. اطمینان حاصل کنید که ماموریت (task) شما منعکس کننده اهدافی است که می خواهید به آنها برسید.هنگامی که ماموریت‌ها و سوالات خود و سایر جزئیات معیار UX را مشخص کردید، مطمئن شوید که تمام جزئیات مسیر آزمون برای آزمایش‌ها یکسان باشد. تعداد شرکت‌کنندگان در آزمون، ماموریت‌هایی که از آنها می‌خواهید تکمیل کنند و دستگاه‌هایی که برای تکمیل تکالیف استفاده می‌کنند باید برای همه تکرارها یکسان باشند. در غیر این صورت، در صورت تغییر پیش‌شرط‌های آزمایش، مقایسه داده‌ها ممکن است واقعاً دشوار باشد.4: بهبود محصول بر اساس نتایج بنچمارکاگر قصد ندارید براساس یافته‌ها تغییری ایجاد کنید، اجرای آزمون فایده‌ای ندارد. به همین دلیل ضروری است که یافته‌های خود را عملی کنید و تغییراتی را بر اساس یافته‌ها اعمال کنید. در حین ایجاد تغییرات، دور دیگری از آزمایش را اجرا کنید تا ببینید UX چگونه در حال بهبود است (بر اساس همان معیارهایی که قبلاً تعریف کرده اید).5: بنچمارک بصورت مستمر و منظم بنچمارک UX به ویژه زمانی مفید است که در فواصل زمانی منظم مانند هر ماه، سه ماهه یا سال انجام شود. با اندازه‌گیری تجربه کاربر و مقایسه آن با نتایج قبلی، مشخص می‌شود که آیا تلاش‌های طراحی شما واقعاً UX را بهبود می‌بخشد یا خیر. یک اصطلاح خاص در معیار UX برای آن نوع کار وجود دارد: معیار طولی، که اساساً در طول زمان اندازه گیری می شود.فاصله زمانی محک زدن به چرخه طراحی محصول شما و تعداد دفعاتی که تغییرات محصول را اعمال می کنید بستگی دارد. در اینجا چند سوال وجود دارد که می تواند به شما در انتخاب فاصله کمک کند:هر چند وقت یکبار نسخه های محصول خود را منتشر می کنیم؟آیا بودجه‌ای برای اجرای معیارهای UX بر اساس (فاصله) داریم؟پنج نکته برتر برای بنچمارک UXچند نکته ضروری که باید هنگام آماده‌سازی، انجام فرایند و تحلیل و مطالعه نتایج آزمون به خاطر بسپارید.نکته 1: برای شناسایی نقاط قوت و ضعف محصول از معیارسنجی استفاده کنیدهنگامی که معیار UX سفرهای کاربران کلیدی خود را انجام می دهید، به سرعت مشخص می‌شود که نقاط قوت و ضعف محصول شما کجاست. به عنوان مثال، با اندازه‌گیری تعامل کاربر (مثلا: صفحاتی که بیشترین بازدید را در وب سایت شما دارند)، خواهید دید که چه بخش‌هایی از محصول شما بیشترین ارزش را برای کاربران شما فراهم می کند. شما می توانید از این دانش برای تقویت مزیت‌های رقابتی محصول خود استفاده کنید.نکته 2: طرح‌های خود را بر اساس اهداف تجاری اعتبارسنجی کنیدتحقیقات کاربر همیشه باید روی مهم‌ترین KPIهای تجاری، مانند نرخ تبدیل، متمرکز شود. وقتی شواهد واضحی دارید که راه‌حل‌های طراحی شما نتیجه کسب‌وکار را بهبود می‌بخشد، تعامل با سهامداران کلیدی و خرید ایمن در تصمیم‌های طراحی محصول بسیار آسان‌تر می‌شود.نه تنها ردیابی اینکه چگونه راه حل‌های طراحی شما نتیجه کسب و کار را بهبود می بخشد، بلکه همچنین دانستن اینکه چرا این اتفاق می‌افتد ضروری است. توصیه می‌شود برای یافتن پاسخ هر دو سوال، تست‌های کمی و کیفی را مقایسه کنید.نکته 3: از معیار برای ارزیابی تغییر عمده طراحی استفاده کنیدحتی زمانی که فواصل زمانی مشخصی برای محک زدن UX دارید، اگر قصد دارید طراحی مجدد محصول را که خارج از چرخه طراحی محصول شما است، اجرا کنید، بنچمارک UX را اجرا کنید. به محض اینکه نمونه اولیه راه حل خود را دارید، می توانید معیاری را برای مشاهده عملکرد آن در مقایسه با راه حل های موجود انجام دهید. هر چه زودتر تشخیص دهید که چیزی طبق برنامه کار نمی کند، در زمان بیشتری در طراحی محصول صرفه جویی می کنید.نکته 4: تمرکز خود را حفظ کنیدوسوسه انگیز است که معیارهای مختلف زیادی را در معیار UX خود لحاظ کنید، اما مهم است که در مقابل این وسوسه مقاومت کنید. هرچه بیشتر اندازه گیری کنید، روند آزمایش گران تر و وقت گیرتر می شود. بنابراین، روی اهداف اصلی خود تمرکز کنید. تمام معیارهایی که انتخاب می کنید باید به شما در پاسخ به سوالات کلیدی خود کمک کنند.نکته 5: معیارهای رقابتی UX را تمرین کنیدمعیار UX معمولاً برای درک تجربه کاربر فعلی محصول دیجیتال شما استفاده می شود. با این حال، بخش بزرگی از بهبود تجربه کاربری محصول شما، دانستن عملکرد آن در مقایسه با رقبای شماست.معیار رقابتی معیارهای محصول شما را با معیارهای رقبای مستقیم یا غیرمستقیم شما مقایسه می کند.از معیارهای رقابتی برای مقایسه عملکرد محصول خود در مقایسه با نزدیکترین رقیب خود استفاده کنیدهمچنین توصیه می شود هر بار که رقبای شما ویژگی جدیدی را در محصول خود معرفی می کنند و شما می خواهید ویژگی مشابهی را برای محصول خود ایجاد کنید، معیارهای UX رقابتی را انجام دهید. یک ویژگی را نمونه اولیه کنید و نمونه اولیه را با هر تعداد رقیب یا محصول غیررقیب مقایسه کنید. دانشی که پس از این معیار به دست می آورید به شما کمک می کند تا بفهمید که آیا واقعاً می خواهید ویژگی مشابهی را در محصول خود معرفی کنید یا خیر.نتیجهبهبود تجربه‌کاربری محصول شما زمانی حاصل می‌شود که به شیوه تعامل و استفاده کاربران اشراف داشته باشید. شاید تصور کنید که محصول شما بهترین تجربه ممکن را ارائه می‌دهد، اما تا زمانی که واقعاً تجربه آن‌ها را با محصول خود (یا سایر رقبا) اندازه‌گیری نکنید، نمی‌توانید مطمئن باشید. منبع آکادمی سرخ آرین مقبلی Sat, 24 Feb 2024 16:15:08 +0330 https://virgool.io/RedAcademy/%D8%AF%D8%A7%D8%B3%D8%AA%D8%A7%D9%86-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%85%D8%AD%D8%B5%D9%88%D9%84-%D8%AA%D9%BE%D8%B3%DB%8C-gfbrm8sjyvrq این داستان (Case-Study) برشی از دوره همکاری من با تپسی به عنوان سرپرست تیم دیزاین‌محصول هست و به شکلی تاریخچه شکل‌گیری سرویس‌های تاکسی اینترنتی در ایران رو مرور می‌کنه که برای افراد علاقه‌مند به طراحی‌محصول دیجیتال، رسانه‌ها و همکارانم در تپسی می‌تونه مفید و کاربردی باشه. از آنجایی که پروسه ریبرندینگ در همین دوره اتفاق افتاد چالش‌ها و راهکارهای ما برای انتشار محصولی موفق (به اشاره کاربران) می‌تواند برای تیم‌هایی که در پیچ‌و‌خم تغییرات بزرگ هستند، هموار کننده مسیر باشد.موضوع:طراحی محصول مسافران تپسی (بهبود نسخه ۲ - طراحی نسخه ۳)مسئولیت: سرپرست طراح محصولمدت همکاری: فروردین ۱۳۹۶ - خرداد ۱۳۹۹پیش درآمد:حدود سال ۱۳۹۴ در کنار همکاری با فیلیمو، روی پروژه‌هایی مثل (هم‌پیما: سرویس حمل‌ونقل اشتراکی) هم کار می‌کردم و که از طرف تپسی (هومن دمیرچی) برای همکاری دعوت شدم اما به دلیل همکاری تمام‌وقت با صباایده این همکاری امکان‌پذیر نشد.*درآن بازه هنوز تپسی محصول دیجیتالی نداشت و وارد بازار نشده بود و اسنپ هم هنوز نوپا بود.نسخه اول تپسیهمین عاملی بود که نسبت به نسخه اول منتشر شده کنجکاوتر باشم. بعدها شنیدم یک طراح خارجی نسخه اول محصول تپسی را طراحی کرده اما نتوانسته نظرها را جلب کند و تصمیم مدیریت بر این شده تا طراحی نسخه دوم را بر اساس یک سرویس موفق خارجی (اوبر) پیش ببرند.«چرا تپسی؟ چرا اسنپ نه؟» این سوالی بود که CTO مجموعه دکتر مهینی در روز مصاحبه از من پرسیدجوابم مشخص بود: من عاشق ساختنم. عاشق چالشم...اینکه بتونم تاثیرگذار باشم، اینکه بدونم در جایگاه اول نیستیم، بهترین نیستیم اما برای به دست آوردنش تلاش کنم من رو سرحال نگه می‌داره. احتمالا فلسفه تمام انتخاب‌های زندگیم چیزی شبیه اینه. در انتخاب‌های کاری حداقل مطمئنم.من از فروردین ۱۳۹۶ وارد تپسی شدم.ورود من به تپسی با ارايه راهکارهایی برای بازطراحی نسخه سفیران (رانندگان) تپسی و سرویس Back-Office و پشتیبانی و مدیریت شروع شد که در مطلب مجزای دیگری به آن‌ها می‌پردازم.اولین اقدامات هر طراحی با ورود به یک مجموعه جدید آشنایی با اقدامات گذشته و استراتژی‌های شرکت در برابر محصول است.محصول تپسی سال ۱۳۹۵ با سرویس پرو (با خودروهای لوکس مانند پورشه و مزراتی) و پرایم (ارايه سرویس مختص بانوان) به عنوان محصولی شایسته و لوکس معرفی شد.هرچند در این موراد چندان موفق نبود و با تخفیف‌های عرضه شده، بیشتر به عنوان سرویسی ارزان قیمت مورد توجه بود.اما تصمیم مدیران شرکت به تغییر این نگرش مشهود بود. امیدوار بودیم تا بتوانیم این ذهنیت را به سرویسی پیشرو و هوشمند تغییر دهیم.سرآغاز داستانشروع کار من تپسی این شکلی بود :)طرحی که به عنوان نسخه دوم طراحی تپسی می‌شناسید همان الگو و چارچوب اوبر (UBER) بود. هرچند این نسخه بر اساس یکی از موفق‌ترین‌های سرویس تاکسی اینترنتی بنا شده بود اما مشکلات فراوانی از نظر فنی و تجربه‌کاربری داشت. همچنین به دلیل عدم توجه به جزئیات در طراحی و اجرا، ظاهر محبوبی نزد کاربران نداشت.درصد قابل‌توجهی از کاربران رنگ سیاه را غمگین و طراحی صفحات را دلگیر می‌دانستند.کاربرانی که اوبر (UBER) را می‌شناختند هم (این گرته‌برداری نه‌چندان هنرمندانه) را به‌حق نقد می‌کردند.از آنجایی که دیزاین‌سیستمی تعریف نشده بود، ناهماهنگی در عناصر و صفحات محصول بسیار دیده می‌شد. همچنین به مراحل، مسیر و جریان کاربری طرح‌ها پرداخته نشده بود.یکی دیگر از مشکلات تیم توسعه اندروید و iOS عدم مطابقت صفحات با استانداردهای طراحی دو سیستم بود.عملا طراحی صفحات نه‌چندان با دیزاین‌سیستم اندروید و iOS هماهنگ بود نه هویت و دیزاین سیستم منحصر بفرد خود را دنبال می‌کرد. بنچمارک و تحلیل رقبارصد رقبای داخلی و خارجی یکی از دستاوردهای مهم تپسی در آن دوره بود. فرایندی که پیش‌تر اجرا نمی‌شد را به یکی از روندهای اجرایی تبدیل کردیم تا هر تغییری در محصولات و استراتژی‌های آنها بررسی و تحلیل شود.با بررسی محصولات داخلی (اسنپ، ماکسیم، کارپینو، آژانسی، دینگ و... ) و خارجی (,Uber, lyft, careem, Grab Yandex) نقاط ضعف و قوت آن‌ها را لیست کردیم. قابلیت‌ها و امکانات از نظر کارایی استفاده و چک می‌شد. حتی اسکرین‌شات یا ویدیوهایی از صفحات و فلوی محصول در دوره‌های مختلف آرشیو و طبقه‌بندی شد و بروزرسانی می‌شد.بنچمارک محصولات خارجی و داخلی(یکی از چالش‌های ما مطالعه، رصد و بررسی رقبای خارجی بود. چرا که این سرویس‌ها از داخل ایران کار نمی‌کرد یا همه مسیر و مراحل از دریافت تاکسی تا رسیدن به مقصد و امتیازدهی امکان‌پذیر نبود. به همین دلیل گروهی محرمانه و اختصاصی در تلگرام ترتیب دادیم تا هر یک از همکاران، دوستان یا خانواده‌هایشان که خارج از ایران سفر یا زندگی می‌کنند، بتوانند آخرین مشاهداتشون از نرم‌افزارهای مشابه و اقداماتشون رو منتشر کنند.جالبتر اینکه در دوره‌ای برای بررسی نرم‌افزار رانندگان سرویس‌های خارجی، از طریق شبکه‌های اجتماعی توانستم با راننده‌های آن ارتباط بگیرم و از آنها نحوه کار با محصول را جویا بشم. در مواردی پروسه سفر را بصورت ویدئو (Screen record) از راننده دریافت کردیم که بسیاری از روندها را برای ما روشن می‌کرد.)کانال‌ها و روش‌های دریافت اطلاعات از آنجایی که هدف ما طراحی محصول بر پایه نیازهای کاربر بود، تمرکز خود را روی کاربران سرویس و بازخوردهایشان گذاشتیم.بازخوردها (Reactive Feedback)شنود شبکه‌های اجتماعی (Social Listening) : تیم پشتیبانی و مارکتینگ، امکان رصد و پاسخگویی به همه شبکه‌های اجتماعی را نداشت. تصمیم گرفتم بصورت داخلی در تیم دیزاین، موارد مربوط به محصول را دنبال کنم و تا جای امکان پاسخگو باشم. این عامل باعث شد در طول زمان کاربران در توییتر، لینکدین و اینستاگرام مشکلات، نیازها و حتی ایده‌های آینده‌نگرانه خود را مستقیم و دوستانه مطرح کنند.فراتر از آن با جستجوی کلیدواژه‌های مربوط به تاکسی اینترنتی، تجربه‌ها، نگرانی‌ها،مشکلات و انتظارات کاربران را بررسی و تحلیل می‌کردیم و اگر با اهداف بیزینس هماهنگ بود، وارد پروسه طراحی و توسعه می‌شدیم. برای مثال: دکمه عجله دارم برای کاربرانی که در شرایط خاص (پیک ترافیک - ساعات کم‌تردد و...) حاضرند هزینه بیشتری بپردازند تا از سرویس استفاده کنند.گزینه عجله دارم در تپسی یا امکانات «تنظیمات سفر» که با گزینه‌‌های ویلچر/عصا دارم یا ناشنوا/کم‌شنوا هستم شرایط بهبود تجربه سفر افراد مسن یا معلول و ناشنوا مهیا می‌شد.تنظیمات سفر تپسی برای توانیابان - دسترس‌پذیری پشتیبانی و مرکز تماس (call center & Support): بخش دیگری از دریافتی‌های مورد نیاز از گزارش‌های طبقه‌بندی شده پشتیبانی تامین می‌شد و می‌توانست نیازها، سوال‌ها و مشکلات اساسی کاربران در استفاده از سرویس تپسی را روشن کند.کانال ارتباطی درون برنامه‌ای (in-app Feedback Channels): تاثیر بازخوردها به حل ریشه‌ای چالش‌های پیش رو منجر می‌شد و تجربه کاربران تپسی چه مسافر باشند، چه سفیران شرکت مهم بود. برای مثال یکی از پرتکرارترین موضوعات مطرح شده در سرویس‌های تاکسی‌های اینترنتی، ناراحتی مسافر از درخواست راننده برای پرداخت به شیوه نقدی بود. رانندگان، اکثرا روزمزد هستند و با دریافتی آن روز گذران زندگی می‌کنند و تکرار این درخواست را به دلیل تعویق یکی دو روزه پرداخت بانک و تپسی (مخصوصا در روزهای تعطیل) می‌دانستند. با تلاش‌های تیم‌های مختلف در تپسی و همکاری با بانک‌ها، توانستیم اولین تاکسی اینترنتی با پرداخت لحظه‌ای باشیم تا هم به سود سفیران عمل کنیم و هم مسافران در انتخاب خود تردیدی نداشته باشند.این چالش هرچند تاثیر به سزایی در تجربه مسافر داشت اما بیشترین تغییر در اپ سفیران اتفاق افتاد.فعال‌شدن امکان تسویه حساب لحظه‌ای - سرویس سفیران تپسی بازخورد (Proactive feedback)فوکس گروپ (focus group) : با دعوت از مسافران و مطرح کردن موضوعات از پیش تعیین شده و هدایت بحث سعی می‌کردیم تا به ریشه مشکلات و نیازهای کاربران برسیم. عمده مشکلات کاربران به شیوه پرداخت و امنیت سرویس‌ها بود. یکی دیگر از دغدغه‌های کاربران (مسافر/راننده) پشتیبانی بود.تحلیل دیتای اپلیکیشن (in-app analytics and Data Analysis)الگوی رفتار و مسیر حرکت کاربر در محصول، کمک می‌کرد تا سرعت و دستیابی هدف را برای او تسریع کنیم.ارائه پیشنهادات هوشمندانه از سوی سرویس می‌توانست روند عادی را کوتاه کند. پرسشنامه (Surveys)همدلی با ذی‌نفعان: برای بیزینس هماهنگی تعداد مسافران و راننده‌ها یکی از موضوعات مهم بود. در آن روزها تعداد درخواست‌ها بیش از تعداد راننده‌ها بود و جذب راننده یکی از دغدغه‌های تیم‌ها از جمله تیم دیزاین بود.تست‌های کاربردپذیری (Usability test) و سلامت محصول: یکی از مهمترین روش‌های ارزیابی محصول که پیش از این جایی در تپسی نداشت و توانستیم به یک روال تکرار شونده تبدیل کنیم تست‌های کاربردپذیری بود.هر ایده یا قابلیت جدید به این روش تست می‌شد تا کارآمدترین طرح به مرحله توسعه وارد شود.استراتژی دیزاین (روایت هویت):بهبود نسخه ۲جدای از صف طویل تسک‌هایی که اولویت زیادی برای طراحی داشتند لازم بود برای هویت تپسی تصمیمات جدی می‌گرفتیم. مسلما در این مرحله دستمون برای ریدیزاین کلی محصول باز نبود.پس تصمیم گرفتیم با تعریف استانداردها و شکل‌دادن یک دیزاین‌سیستم برای هماهنگی بیشتر تغییرات مینور روی این نسخه داشته باشیم و از ساختار طراحی اوبر به تدریج دور شویم.طراحی دیزاین‌سیستم و UI-Kit برای یکپارچه‌سازی و سرعت‌بخشیدن به فرایند طراحیطراحی مجزای صفحات برای اندروید و iOS با درنظر گرفتن عادات کاربران هر سیستم‌عاملطراحی مراحل و جریان کاربری برای هر قابلیت و تسکتغییر استراتژی دیزاین:در آن دوره استراتژی برند و محصول به صورت مدون طراحی و اجرا نشده بود. اما کاراکتر تپسی در شرکت به عنوان شخصیتی فاخر و شیک شناخته می‌شد.رد این لوکس بودن رو می‌توان در مراسم(کاروان خودروهای BMW برای معرفی شروع به کار تپسی)، قابلیت‌ها (سرویس پلاس) و تبلیغات محیطی و شعارهای مجموعه و الگو قرار دادن هویت اوبر دید.تصمیم گرفتیم طراحی خودمان را با رنگ مشکی داشته باشیم اما دیگر اوبر نباشیم و به‌جای ایجاد حس لوکس، حس سرویس هوشمند را تداعی کنیم.روایتگری در دیزاین:به نظر من آنچه روح محصول را می‌سازد و باعث تعامل بیشتر و نزدیکتر با کاربر می‌شود، روایتگریست.در هر روبرویی با شخصی، ابتدا یک قضاوت ظاهری شکل می‌گیرد، اما در ادامه ارتباط و تعامل با او به ویژگی‌های درونی‌اش می‌رسیم. به داستان‌هایی که برای گفتن دارد، به نگرشش به دنیا و اطراف، به تجربه‌ها و نحوه بیان و چکه‌های رفتاری توجه می‌کنیم.در مورد محصول هم همین است... هردو شخصیت دارند. همین است که یک محصولی برند می‌شود و طرفدارانش با دانش به برتری‌های رقیب، سراغ محصول محبوبشان می‌روند.محصول من پشت ظاهرش باید روح داشته باشد، باید راوی باشد و این سرآغاز جوهری بود که در کالبد تپسی اضافه کردیم.فلسفه تپسیدانایی: زمانی احساس دانایی و آگاهی خواهید داشت که به پیرامون خود مسلط باشید و اطلاعاتی بیشتر و کاملتر از محیط دریافت کنید. با نمایش اطلاعات کامل و شفاف به مسافر احساس دانایی و تسلط می‌دهیم.کاربران تپسی در استفاده از سیستم نباید احساس عدم آگاهی داشته باشند و سوالی را در ذهن خود بی‌جواب بگذارند. پس هرجایی در محصول، قابلیت‌ها و حتی در هنگام سفر یا بیزینس موردی باعث سوال می‌شد در محصول جواب می‌دادیم.۱. این سرویس جدید چیست؟ معرفی سرویس‌ها و قابلیت‌های جدید و نمایش بج راهنما برای هر سرویس ۲. سفیر کی به مبدا من می‌رسد و برای آماده شدن چقدر فرصت دارم؟ زمان رسیدن سفیر به مبدا ما یا پیش‌بینی زمان ۳. اخطار پیک ترافیک چیست؟ معرفی اوج ترافیک و دلیل افزایش قیمت ۴. برای اینکه تخمین زمان رسیدن به مقصد را بدانم باید از راننده بپرسم؟ نمایش تخمین زمان رسیدن قبل از گرفتن سفر و هنگام سفر روی نقشه۵. اطراف من چند خودرو فعال هستند؟ نمایش تعداد خودروهای فعال برای دریافت درخواست نمایش بصری دانایی در محصول هم پیچیدگی‌های خودش را دارد. دید دانای کل از بالاست. نمایش وسیع و خوانایی نقشه و نمایش المان‌ها از بالا در محصول و تبلیغات، این حس را در کاربر بیشتر القا می‌کرد.هوشمند:تپسی باید ارتباط نزدیک‌تری با کاربر بگیرد و مثل یک دستیار و راهنما مسیر و جریان رسیدن به هدف را کوتاه کند.یعنی داده‌های موثر که کاربر وارد کرده را تحلیل و پاسخ (پیشنهاد) مناسب ارايه دهد.برای مثال شما هر روز ساعت خاصی از روز از مبدا (منزل) به مقصد (محل کار یا دانشگاه) تپسی می‌گیرید.پس از چندبار تکرار این رفتار بجای انتخاب مبدا، مقصد و سرویس با یک پیام مدت‌دار می‌توانستیم پیشنهاد منزل به کار را با یک کلیک از کاربر بپرسیم.۱. کاربران معمولا از اینجا سوار می‌شوند.۲. شما معمولا از اینجا سوار می‌شوید.۳. پیشنهاد مقصد شما بر اساس ساعت۴ . پیشنهاد مسیر شما تکرار شده در ساعات مختلف۵. پیشنهاد مبدا جایگزین، برای صرفه‌جویی در زمان و هزینه۶.پرداخت هزینه کمتر با پیش‌بینی ساعات اوج ترافیک! و پیشنهاد بهترین ساعت برای خروج از محل‌کار۷.از کدام‌یک از درب‌های پارک بزرگ می‌خواهید تپسی بگیرید؟همچنین کاربر نباید یک اکت را چندبار انجام دهد.مثلا اگر سفیر درخواست سفر را پیش از رسیدن به مبدا لغو کرد سیستم بصورت خودکار، همان مسیر را با مبلغ جدید(در صورت تغییر مبلغ) درخواست دهد.سایر ویژگی‌های تپسی در طراحیامنیت سفر:با در نظر گرفتن یکی از مهم‌ترین دغدغه‌های کاربر -پس از اخبار و حواشی مربوط به سرویس‌های رقیب- تصمیم گرفتیم در یک پروسه کوتاه روی ویژگی امنیت سفر تمرکز کنیم. این ویژگی پیش‌تر روی محصول بود اما در بخشی قرارگرفته بود که پیدا کردنش آسان نبود. با تغییراتی در فلو و عملکرد سیستم، این ویژگی را کاربردی‌تر از گذشته و نزدیکتر در دسترس کاربر قرار دادیم تا در شرایط اضطراری استفاده از آن راحت باشد.یکی دیگر از ویژگی‌ها استفاده از شماره ناشناس برای کاربران بود تا سفیر به شماره کاربر دسترسی نداشته باشد.یافت‌پذیری:با بزرگتر و کشیده شدن ابعاد صفحات موبایل و دسترسی کمتر به بالای صفحه برای لمس، تصمیم گرفتیم تمامی پیام‌های تعاملی (مانند Popupها) را به پایین صفحه (به صورت Bottom sheet) انتقال دهیم. این تغییر علاوه بر بهبود ارگونومی استفاده، کاربران را برای یافتن دکمه‌های تعاملی در پایین صفحه راهنمایی می‌کرد و سرعت تعامل با محصول را بالا می‌برد.دسترس پذیری:هر محصول جدیدی باید برای همه اقشار و افراد قابل استفاده باشد. در تپسی هم تلاش کردیم با همدلی از افراد متخصص (نابینا، توانیاب) برای بهبود امکانات و سرویس‌ها استفاده کنیم.استفاده از رنگ‌هایی با کنتراست بالا در دکمه‌های تعاملی (CTA) کمک می‌کرد تا در شرایط مختلف (زیر نور شدید آفتاب یا برای افرادی که مشکل بینایی و کوررنگی دارند ) بهتر دیده شود.یکی دیگر از قابلیت‌هایی که برای مسن‌ترها استفاده از تپسی را راحت‌تر می‌کرد، ویجت‌های تپسی بود.کاربر می‌توانست با یک بار تعریف مقصد‌های پرکاربرد، بدون دسترسی‌های گیج‌کننده مستقیم وارد صفحه درخواست شود.یکپارچگی:یکپارچه سازی و ایجاد نسخه اول دیزاین سیستم تپسیقبل از طراحی دیزاین سیستم سرویس مسافران، برای سرویس پشتیبانی(back-office) و اپ سفیران(driver app) دیزاین سیستم تهیه کرده بودیم و این کمک می‌کرد تا فرایندها سریع‌تر پیش برود.اما با توجه به گستردگی و تعداد صفحات و مراحل طراحی شده برای تپسی، یکپارچه‌سازی محصول در فرایند طراحی و توسعه چندان هموار نبود. مجبور بودیم هر کامپوننت و عنصر جدید را متناسب با شرایط توسعه جایگزین کنیم و در هربار بازطراحی یک صفحه یا فلوی جدید آیتم‌ها را یکسان و یکپارچه کنیم. عدم وجود استراتژی برند مدون در آن دوران باعث می‌شد چند دستگی و برخورد سلیقه‌ای در سازمان بزرگ شکل‌گیرد. راهکار من برای کاهش این برخوردها تعریف پرسونا‌های محصول و کاراکتر محصول بود.هم‌زمان توسعه یک دیزاین سیستم پیچیده با توجه به محدود بودن زمان و افراد تیم، یکی از چالش‌های تیم بود.رزرو سفرشیرین مثل انتظارانتظار هیچ‌گاه شیرین نیست. یکی از دغدغه‌های تیم تپسی برای دولوپ پرفورمنس بالای برنامه در عملکرد و کاهش سرعت لودینگ‌ها بود. لودینگ ورودی برنامه، چیدمان عنصر روی نقشه، محاسبه قیمت و ارايه سرویس.اما نمی‌توان همه‌جا سرعت را کاهش داد. مثل ارسال درخواست و جستجوی راننده.پروسه جستجوی راننده (Finding Driver process) فرایندی است که بسته به تعداد راننده اطراف شما، قیمت، وضعیت جوی و... ممکن است زمان بر باشد.کاربران زمان کوتاهی را در این صفحه منتظر می‌ماندند و سپس سراغ سرویس‌های دیگر می‌رفتند. ماموریت ما افزایش زمان انتظار با جذابیت بخشیدن به این صفحه بود.مهم بود در عین جذابیت، روی برند و هویت تپسی (به عنوان سرویس ایرانی) تاکید شود. مهم بود براساس اصل شفافیت تپسی (تعداد خودروی اطراف کاربر، وضعیت و شرایط سفر) اطلاع‌رسانی شود. مهم بود کاربر بتواند با دیدن تصویر و مراحل آن وضعیت سفر را متوجه شود (در حال ارسال درخواست، دریافت سرویس، لغو و انصراف سرویس) همچنین فضایی جهت تبلیغ ویژگی‌ها، قابلیت‌ها و نیازهای مارکتینگ در نظر گرفته شود. همچنین قابلیت عجله دارم در این صفحه قرار گیرد.داستان کاملی از طراحی صفحه «جستجوی سفیر تپسی» را می‌توانید در ویرگول از این لینک بخوانید.طراحی نسخه ۳با ریبرند تپسی لازم بود تا محصول مطابق با هویت‌بصری جدید بروز شود.داستان ریبرند تپسی:سیر تحول لوگوی تپسی نیازها و مشکلات متعددی باعث شد تا شرکت به فکر ری‌برند تپسی باشه.مشکلاتی که در نوشتار و خوانایی (تپ‌سی-TAP30) ، لوگوی پیچیده، رنگ سازمانی مشکی که چه در محصول و تبلیغات مارکتینگ موثر نبود و دیگر بازتاب دهنده خدمات لوکس تپسی نبود.همراه با نیازهای کاربران جدید (گروه هدف جدید) و تغییر پرسونای محصول و البته موج بازطراحی‌ها و ریبرندینگ‌های گسترده شرکت‌های استارتاپی مثل اوبر تصمیم به بازطراحی و تغییر رویکرد و استراتژی محصول گرفته شد. بنا براین شد تا پروسه ریبرند برون‌سپاری شود.مراحل اولیه بازنگری در استراتژی برند به همت آقای نژده هوانسیان در پاییز ۱۳۹۷ آغاز شد.نتیجه این استراتژی جوهره برند (Hero & Creator / قهرمان و سازنده) بود که در طراحی هویت جدید محصول که توسط تیم استودیو شیزارو در اردیبهشت ۱۳۹۸ معرفی شد. + ویژگی این لوگو، استفاده هم‌زمان لوگوتایپ فارسی و لاتین در کنار مستطیل‌هایی به رنگ آبی و سبز (نمادی از آسمان و زمین) در یک قاب و چیدمان بود. این دو تجسمی از مسافر و راننده، مبدا و مقصد بودند و فصل مشترک همه اینها که جاده است و برشی از جاده همان خطوط پیوسته و منقطع راهنما در مسیر است که عنصر اولیه شکل دهنده لوگو شد.اما پیشنهاد ارائه شده هر چند در روایتگری بی‌نقص بود اما نه در محصول چندان مورد تایید بود نه برای تیم مارکتینگ.بنابراین پیشنهاد بعدی در مرداد ۱۳۹۸ ارائه شد و مورد تایید قرار گرفت.نوشتار فارسی تپسی که در نسخه پیشنهادی اول منفصل بود، متصل شد که به خوانایی بیشتر کلمه کمک می‌کرد.دو مستطیل هم به هم نزدیک شدند تا در نگاه اول حرف (ت) را شکل دهند. این دو خط نماد سرعت هم بود.رنگ سبز با رنگ نارنجی جایگزین شد. رنگ سبز علاوه‌ بر اینکه با (رنگ سازمانی اسنپ) مقایسه می‌شد مثل نارنجی در تبلیغات چشمگیر نبود. رنگ نارنجی انتخاب شده در عین مدرن، گرم و پرهیجان بودن، نوستالژی بود و یادآور رنگ تاکسی‌های پیکان قدیمی.یکی از موثرترین تغییرات شیوه نگارش نوشتار عنوان شرکت از تپ‌سی به تپسی در فارسیو Tap30 به TAPSI در حروف لاتین بود. مشکل: کاربران در تایپ فارسی کمتر از نیم‌فاصله استفاده می‌کردند (تپ سی)در ارسال پیامک‌های تبلیغاتی به دلیل عدم پشتیبانی نیم‌فاصله در برخی از گوشی‌ها ناچار به استفاده از (تپ سی) بودند و در هر حالت برای فاصله یا نیم فاصله یک‌کاراکتر بیشتر استفاده می‌شد. (در متن‌های فارسی پیامک همین کاراکترها نقش به سزایی داشتند)برای هشتگ در شبکه‌های اجتماعی ناچار بودیم از #تپ_سی استفاده کنیم.در نسخه لاتین هم اساسا TAP30، تپسی خوانده نمی‌شود و بسیاری از شرکای تجاری یا مدیران خارجی در تلفظ نام آن به مشکل می‌خوردند.بازتاب ریبرندینگ در طراحی هویت محصول:یکی از بزرگترین چالش‌های من به عنوان سرپرست طراحی محصول در این تغییر، متقاعد‌سازی سرپرستان و مدیران برای گرفتن وقت اضافه برای بازطراحی محصول بود.(در آن بازه علاوه بر بهبود وضعیت نسخه ۲تپسی، دیزاین جدید با همان تم مشکی اما ساختاری بروز و جذاب‌تر طراحی شده بود که آماده معرفی بود.)با توجه به اینکه پرده‌برداری از هویت جدید چند باری به تعویق افتاده بود، عجله زیادی برای رونمایی وجود داشت. این باعث می‌شد تا بازتاب ریبرند در محصول به تنها تغییر رنگ مشکی به نارنجی(رنگ سازمانی جدید) و تغییر لوگو بسنده شود. اما از آنجایی که کاربران بخش مهمی از دلیل ری‌برندینگ و بروز شدن را در محصول جستجو می‌کردند، جلساتی متعددی برای ارايه پیشنهاد (نسخه سوم طراحی محصول تپسی با هویت جدید) انجام شد.در این پیشنهاد طراحی بصری محصول دچار دگرگونی می‌شد تا ظاهری به‌روز، جوان پسند و جذاب براساس رنگ‌سازمانی جدید بر تن کند.(*رنگ نارنجی انرژی زیادی از چشم می‌گیرد و جایگزینی آن با رنگ خنثی مشکی که گاهی سطوح بزرگی را در طراحی قدیمی می‌پوشاند، نیازمند کنترل بیشتر و استفاده با درصد محدودی در صفحات است. استفاده از رنگ‌های چشمگیر وقتی در ابعاد و اندازه بزرگ در محصولی تکرار شود باعث خستگی و کنارگذاشتن محصول می‌شود. استفاده نادرست از این رنگ‌ها حتی برای برخی از بیماران ایجاد تنش می‌کند.چالش دیگر تطبیق رنگ نارنجی با صفحات موبایل بود. یکی از درس‌هایی که از اشتباهات رونمایی ری‌برند اسنپ در محصول گرفتیم استفاده از کد رنگی یکتا و پرهیز از استفاده‌ی رنگ جیغ در وسعت زیاد بود. شاید این رنگ‌ها در بنرها و بیلبوردها و رسانه‌های چاپی به درستی باعث جلب توجه کاربر شود اما نور موبایل باعث تشدید عملکرد رنگ در صفحه می‌شود )این تغییرات تنها جنبه بصری نداشت و تجربه‌کاربری بر اساس تست‌های کاربردپذیری و گزارشات و راهکارهایی که پیشتر بررسی و در صف انتشار بودند در مسیر پیاده‌سازی قرار گرفتند.یکی از نکات مهم انعطاف‌پذیری و یافت‌پذیری با توجه به آگاهی اضافه شده سرویس‌های جدید بود.در نسخه v02 تپسی با وجود این که نهایتا دو سرویس(تپسی کلاسیک و لاین) فعال بود اما سرویس لاین در طرح به درستی دیده نمی‌شد.در نسخه جدید علاوه بر تعدد سرویس‌ها (مانند تاکسی، موتور، سرویس پلاس و ...) ، اطلاعات بیشتری نظیر تخمین زمان رسیدن هم اضافه می‌شد. اتودها و تست‌های رنگی و عملکردی طراحی نسخه جدیدکارت سفر:یکی از کانسپت‌های ما اجرای کارت سفر بود. تا پیش از این انتخاب مبدا / مقصد از بالای صفحه قابل دسترس بود و انتخاب سرویس و درخواست سفر رزرو از پایین صفحه. با بزرگ و کشیده شدن ابعاد گوشی‌ها و دسترسی سخت لمس آیتم‌های بالای برنامه، تصمیم داشتیم آیتم ‌ها را به تدریج به پایین صفحه انتقال دهیم (مهم بود عادات کاربر را به یکباره تغییر ندهیم تا با محصول جدید احساس غریبی نداشته باشند) . تصمیم گرفتیم کانسپت کارت سفر را معرفی و پرزنت کنیم و با کمی تغییر دسترسی‌های ویرایش و جابجایی مبدا / مقصد، افزودن مقصد، بازگشت به مبدا و انتخاب مبدا/مقصد به منتخب‌ها را در کارت بالای صفحه قرار دادیم.پرداخت راحت:یکی از بزرگترین و گیج‌کننده‌ترین مشکلات کاربران در بخش پرداخت، شباهت دکمه‌ها و text-field ها بود و باعث می‌شد در هنگام پرداخت گیج شوند.یکی دیگر از ترفندهای ما نگه داشتن صف قابلیت‌های جدید (مثل باشگاه مشتریان تپسی) بود تا با انتشار آن‌ها در نسخه جدید، تغییرات در دید کاربر موثر و محسوس باشد.تغییر نمایش Popup و modal به Bottom-sheet | نمایش دکمه تعاملی (CTA) در سمت چپ با رنگ نارنجیاستفاده از میکروموشن:یکی از ضعف‌های تپسی نداشتن حرکت و صدا بود. با اضافه شدن میکروموشن شاهد جان‌گرفتن محصول تپسی بودیم. نمایش جهت حرکت مبدا تا مقصد. شکل سایه پین‌‌ها جدای از جذابیت بصری محصول،‌کمک می‌کرد تا کاربر بهتر متوجه انجام مراحل شود و در نتیجه راحت‌تر تعامل کند. برنامه بعدی ما استفاده از افکت‌های صوتی مناسب برای تعامل بهتر با برنامه بود.پیشتر در سرویس سفیران به نتیجه مثبت این عمل رسیده بودیم. گاهی کاربر در حال مشاهده صفحه نمایشگر نیست و تعاملات صوتی می‌تواند وضعیت و شرایط را به او یادآور شود.امکان ثبت انعام و بج برای سفیران زبان طراحی و دیزاین سیستم جدیدزبان طراحی جدید براساس استراتژی محصول و گروه هدف جدید شکل گرفت. ما زمان زیادی برای بازطراحی محصول نداشتیم. تنها سه ماه که یک ماه از آن صرف متقاعد‌سازی مدیران و جلسات متعدد برای صرف‌نظر از تنها تغییر رنگ محصول برای ارائه شد.دیزاین‌سیستم تپسیچشم انداز من منتشر کردن نسخه جدید دیزاین‌سیستم تپسی با عنوان (طلوع - Sun Rise) برای عموم بود.علاوه بر تغییرات مهم روی کامپوننت‌ها، تصویرسازی‌های جدید و آیکون ست اختصاصی تپسی را در این نسخه معرفی کردیم.برای مدیریت زمان تصمیم گرفتم طراحی‌های آیکون‌ست و تصویرسازی را برون‌سپاری کنم.چرا آیکون ست جدید؟۱. عدم هماهنگی بصری آیکون‌های رسمی اندروید و iOS با هویت جدید۲. در دسترس نبودن آیکون‌های رسمی برای موضوعات مرتبط با سرویس تاکسی اینترنتی و سایر المان‌های مورد نیاز در محصول.۳. زمان‌بر بودن طراحی دو نسخه آیکون برای موضوعات مختلف با توحه به زبان طراحی متریال و HID۴. آیکون‌های توپر متریال (android) از نظر بصری سنگین و توپر بودند (سریع دیده می‌شدند اما موضوع را به دلیل جزئیات پایین، کمتر منتقل می‌کردند)و آیکون‌های iOS سبک، ظریف و زیبا بودند و هرچند به دلیل جزئیات بیشتر موضوع را منتقل می‌کردند اما به دلیل ظرافتشان سریع دیده نمی‌شدند و در گوشی‌هایی با رزولوشن پایین افت کیفیت بیشتری داشتند.قبل از هرچیز لازم بود بریفی از آنچه نیاز داریم و دلایل آن لیست شود تا طراحان با توجه به هویت جدید و فرم و استایل لوگو طراحی را شروع کنند. به هیچ وجه فرصت آزمون و خطا نبود.در مورد طراحی بصری آیکون‌ست مهم بود:۱. خطی باشد۲. اندازه خطوط ضخیم‌تر از آیکون ست iOS (تا سریع‌تر دیده شود و با توجه به رزولوشن پایین بعضی اسکرین‌های موبایل رنجه نشود) و ظریف‌تر از آیکون‌های سطحی متریال گوگل باشد (تا امکان شناسایی آیکون‌ها بالاتر رود)۳. امکان استفاده دو رنگ (Dual-tone) آیکون‌ها۴. استفاده از فرم‌های لوگوی جدید تپسی در آیکون۶. استفاده از خطوط پخ و صاف در آیکون‌هاطراحی آیکون‌ها به لطف افشین محمدی عزیز شامل ۷۰ آیکون طراحی و در محصول قرار گرفت.ویژگی آیکون‌های جدید:۱. هماهنگی با برند۲. هماهنگ با ترند طراحی آیکون‌های خطی / ساده و سبک۳. افزایش سرعت استفاده در طرح و اجرا۴. استفاده از یک پکیج برای دو نسخه اندروید و iOS۵. شناسایی سریع موضوع، نمایش دقیق در نمایشگر‌هااما پیچیده بودن روند برون‌سپاری و الزام حفاظت از اطلاعات (برند جدید) مانع از امکان برون‌سپاری تصویرسازی شد. در نتیجه خودم روی تصویرسازی‌های جدید که بر پایه سطوح رنگی با تم زرد و نارنجی شکل گرفته بودند کار کردم.نمونه تصویرسازی‌های استفاده شده در نسخه ۳ محصول نمایی از نسخه طراحی تپسی ۲ و نسخه ریبرند ۳نسخه طراحی محصول ۲نسخه طراحی محصول ۳وب‌سایت:یکی دیگر از بخش‌های مهمی که نیاز به تغییرات اساسی داشت وب‌سایت تپسی بود.یک نگرش این بود که وب‌سایت، مدیای تیم مارکتینگ است پس به تیم محصول مرتبط نیست و اگر آن‌ها پیگیری جهت بروزرسانی نداشتند، لزومی به دخالت تیم طراحی محصول ندارد.ولی نگرش من این بود که در نهایت کاربران، ضعف‌های بصری وب‌سایت را از چشم تیم دیزاین می‌بینند. پیش‌تر تلاش‌هایی برای بروزرسانی وب‌سایت شده بود اما هیچ‌یک (عموما بخاطر محدودیت‌های تیم فنی و اولویت پایین) به نتیجه نرسیده بود.در اندک فرصت باقی مانده بر اساس داده‌های پیشین و نیازمندی‌های مارکتینگ با همکاری فشرده با تیم فنی توانستیم صفحات اصلی را برای تاریخ انتشار نسخه ریبرندینگ، بروز کنیم.یکی از موارد مهم در ساختار طراحی وب‌سایت کمک می‌کرد تا سریع‌تر به نتیجه برسیم و در آپدیت‌های بعدی کمترین زمان را برای طراحی و توسعه صرف شود طراحی یک Section و Block با چیدمان یکسان بود.یک سمت توضیحات و لینک و سمت دیگر عکس یا تصویرسازی مرتبط.همین نکته در طراحی صفحه ریبرند هم لحاظ شد.آینده‌ی سرویس‌های تاکسی اینترنتی چگونه است؟این سوالی بود که باعث شکل‌گیری (طراحی نسخه ۴ دیزاین تپسی) و طراحی کانسپت‌هایی از نسخه آتی تپسی شد.اگر عمری باقی بود در مورد تحقیقاتی که انجام دادیم و نتیجه طراحی‌ها مطلب مجزای دیگری می‌نویسم.در پایان تشکر می‌کنم از تیم کوچک اما قوی طراحی محصول تپسی، مدیران، تیم‌های فنی، مارکتینگ و محصول که بدون اعتماد و لطفشون این داستان ناقص می‌شد.بازخورد شما در مورد این مطلب می‌تواند من را برای نوشتن تجربیات دیگرم در این‌سال‌ها امیدوار کند.آرین مقبلیسرپرست سابق طراحی محصول تپسیرویاپرداز و مدیر کارخانه رویاسازی استودیو سرخمن رو در شبکه‌های اجتماعی دنبال کنیدredl.ink/arian آکادمی سرخ آرین مقبلی Mon, 24 Apr 2023 11:59:21 +0330 https://virgool.io/RedAcademy/%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-%D9%85%D8%A7%D8%B4%DB%8C%D9%86-%D9%84%D8%B1%D9%86%DB%8C%D9%86%DA%AF-%D8%AF%D8%B1-%D9%81%D8%B1%D8%A2%DB%8C%D9%86%D8%AF-%D8%AA%D8%AD%D9%82%DB%8C%D9%82%D8%A7%D8%AA-%D8%AA%D8%AC%D8%B1%D8%A8%D9%87-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C-whlryi9odllx وقتی درباره علم داده(دیتاساینس)، ماشین لرنینگ و یا هوش مصنوعی حرف میزنیم، اغلب فکر میکنیم که هیچکدوم ارتباط خاصی با طراحی روزمره ما ندارن.حتی گاهی اوقات خیلی از طراحان نگران این هستن که هوش مصنوعی در آینده شغلشون رو ازشون میگیره!با این حال دیتاساینس خیلی از تجربه کاربری (UX) دور نیست و اگر بخوام صادقانه بگم در واقع هدف دوتاشون یه چیزه :" کشف رفتار کاربران "با این حال دیتاساینس از جنبه کمی و تجربه کاربری نسبتا از جنبه کیفی کار میکنه.روشل کینگ (Rochelleb King) یکی از ارشد های محصول خلاق در نتفلیکس و یکی از نام های بزرگ در طراحی صنعتی از اهمیت استفاده از داده در طراحی روزمره دفاع میکنه و میگه که نتفلیکس هم خیلی از این موضوع بهره میبره!برای روشل داده مترادف با عبارت " اطلاعات درباره کاربرانه"روشل توضیح میده که داده ها به اشکال مختفی وجود دارن، گاهی داده های بزرگ مثل نتایج A/B که از ملیون ها مشتری به دست میاریم و گاهی داده های کوچیکی داریم که نتیجه مشاهدات یا مصاحبه های کاربری هستن!حتمن قبلا توی کارهاتون ترکیب و استفاده داده ها در طراحی رو دیدید!ابزار هایی مثل گوگل آنالیتیکس اطلاعاتی مثل کلیک کردن روی رویداد ها، اطلاعات جمعیتی و ... که به ما کمک میکنن به عنوان یه طراح دید بهتری نسبت به کاربرانمون داشته باشیم!گاهی با انجام A/B تست در محصولاتمون میفهمیم کدوم طرح برای کاربرانمون مناسب تره.همه اینا نمونه هایی از استفاده داده در تجربه کاربری هستن!داده ها به ما کمک میکنن تا سه نوع دانش رو کسب کنیم :دانش توصیفی :مثل این: که چرا کاربر صفحه رو ترک کرد؟ چه کسایی طراحی رو دوست دارند و چه کسایی ندارن ؟چرا کاربر روی دکمه دیگه ای کلیک کرد؟دانش پیش گویانه (یا پیش بینی کننده) :این دانش برای بهبود استراتژی محصول موثره!دانستن علت --> تاثیرمثل گفتن این که در صورت اجرای این طراحی چه اتفاقی میفته؟ مشتریان چه کار میکنن با محصول؟دانش مصنوعی :دونستن اثر(هدف) --> علتکه در مقابل دانش پیشبینی قرار داره! برای پاسخ به سواله که من متمایلم کاربر این کار رو بکنه چطور به این هدفم برسم ؟اما بریم سراغ مراحلی که برای پیاده سازی دیتاساینس باید انجام بدیم :1- ساختار(dateset)یا مجموعه داده هاتون رو درک کنیدهمونطور که قبل از ساختن هر محصولی باید کاربراتون رو بشناسید، قبل از انجام هر کاری باید داده هاتون رو درک کنید و بشناسید.هر فردی که به دیتاست دسترسی داره باید با مفهوم اسم ها و نام گذاری ها آشنا باشه تا بتونه با داده ها کار کنه.2-هدف رو مشخص کنیدباید هدفتون رو تعیین کنید و بدونید با هر دسته از داده ها چه کاری میخواید انجام بدید.3-داده هاتون رو مرتب و پاکسازی کنیداین مرحله ضروری ترین و پیچیده ترین بخش کاره شماست.در بیشتر مواقع، دیتاست شما خیلی پیچیده است و برای رسیدن به هدفتون نیازی به همه داده ها یا ستون ها ندارید. بنابراین یه دانشمند داده معمولاً قبل از انجام هر کار دیگری داده ها رو پاکسازی میکنه، که این کار شامل حذف داده هاییه که برای شما مهم نیستند و یا نمونه برداری از داده ها و تبدیل داده ها به چیزی که بهش نیاز دارید.4- پیاده سازی ماشین لرنینگ با رویکرد UXتوی این مرحله میتونید از الگوریتم های ماشین لرنینگ برای بازی با دیتاهایی که دارید استفاده کنید.معمولا الگوریتم های clustering(خوشه بندی) کاربرد زیادی توی تجربه کاربری دارند.در تجربه کاربری، الگوریتم های خوشه بندی به شما کمک میکنن تا گروه های مختف کاربران رو خیلی سریع پیدا کنید.یکی از الگوریتم های خوبی که میتونید استفاده کنید، الگوریتم k-mean هست.ترکیب علم داده، ماشین لرنینگ و UX هیچ وقت کار راحتی نیست اما با رشد هر روزه دنیای داده ها، آنالیز و تحلیل کاربرا از دید کمی میتونه اطلاعات مفیدی رو درباره کاربرانمون در اختیارمون بزاره.یادتون باشه استفاده از دیتاساینس همیشه ممکن نیست و لازمه های خودش رو داره ! باید حتمن اطلاعات و داده های کافی رو از کاربرانتون داشته باشید.داده هاتون ساختار قابل فهم و خوبی داشته باشند. و توانایی اعمال رویکرد تجربه کاربری رو روی داده ها داشته باشید.اگر دوست دارید درباره هوش مصنوعی، ماشین لرنینگ و کاربردهاش بیشتر یاد بگیرید از لینک های زیر استفاده کنید :) https://redl.ink/fatemeh/ML و https://redl.ink/fatemeh/IMT منبع: https://uxdesign.cc/ آکادمی سرخ فاطمه فتاحی Sat, 14 Aug 2021 19:56:25 +0430 https://virgool.io/RedAcademy/tree-testing-%D8%AA%D8%B3%D8%AA-%D8%AF%D8%B1%D8%AE%D8%AA-bm0asc4tmjfu تداخل دسته بندی داده ها و لیبل های گیچ کننده مشکلاتی هستن که در طراحی یک وبسایت وجود دارن. تست درخت یک تست قابلیت استفاده است که به شما کمک میکنه معماری موضوعات رو در یک وبسایت ارزیابی کنید.به این روش Reverse cart sorting هم میگن دلیلش هم اینه که ما توی کارت سورتینگ از کاربر میخوایم تا موضوعات مختلف رو دسته بندی کنه و توی تست درخت ما منو ها و دسته بندی هایی رو که ایجاد کردیم توسط کاربر تست میکنیم.تست درخت به شما نشون میده که پیدا کردن هدف کاربرا چقدر براشون آسونه و یا این که کدوم قسمت از وب سایت گم میشن و نمیدونن چکار کنن.کاربرا برای پیدا کردن چیزی که دنبالشن به معماری اطلاعات خوب،دسته بندی های خوب و محتوای مرتب شما نیاز دارن.حالا چرا تست درخت مفیده؟با انجام این تست میتونید بفهمید ساختار وبسایت شما تا چه اندازه به کاربر کمک میکنه چیزی که میخواد رو پیدا کنه. اگر شرکت کننده ها مدام برای پیدا کردن چیزی که میخوان در تلاش باشن یعنی که ساختار شما مشکل داره. علاوه بر این با این تست میتونید مسیر هایی رو که کاربر برای رسیدن به اهدافش طی میکنه هم بررسی کنید.اگر کاربر در وبسایت شما نتونه چیزی که دنبالشه رو پیدا کنه و گیج بشه قطعا وب سایت شمارو ترک میکنه.کی این تست رو انجام بدیم؟هر زمان که میخواین بدونین ساختار اطلاعاتی که توی وبسایت شماست و دسته بندی هاتون چقدر مسیر رو برای کاربر ها مفید و آسونه میکنه، میتونید این تست رو انجام بدید. آکادمی سرخ فاطمه فتاحی Fri, 02 Jul 2021 15:25:30 +0430 https://virgool.io/RedAcademy/%D8%A8%D8%B1%D8%B1%D8%B3%DB%8C-%DA%86%D9%86%D8%AF-%D8%AA%D8%B3%D8%AA-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF-%D9%BE%D8%B0%DB%8C%D8%B1%DB%8C-stdwoywmw0rf تست های کاربرد پذیری جز موارد اصلی در تفکر طراحی هستن!این تست ها به شما این امکان رو میدن تا با نمونه هایی که دارید مشکلات اساسی رو پیدا کنید تا بتونید محصول نهایی خودتون رو به بهترین شکل روانه بازار کنید.نکته خیلی خوبی که هست اینه که انواع مختلفی از تست های کاربرد پذیری وجود داره که هر کدوم مزایای خودشون رو دارن و میتونین توی موقعیت های مختلف با توجه به نیازتون در پروژه از تستی که بیشتر به دردتون میخوره استفاده کنید.بریم تا تعدادی از تست های کاربرد پذیری که محبوبیت بیشتری دارن رو با هم بررسی کنیم.یه نکته خیلی مهم رو یادتون باشه که ما کاربر رو تست نمی کنیم!بلکه ما میخوایم طراحی خودمون رو تست کنیم!1- ارزیابی اکتشافی (Heuristic Evaluations)این تست به این صورته که شما از چهار یا پنج متخصص برای ارزیابی طرحتون کمک میگیرید.وقتی از این تست استفاده میکنید برای کشف مشکلات طرحتون به متخصصین اعتماد میکنید.این تست معمولا قبل از انجام تست کاربردپذیری با کاربرای اصلی انجام میشه.شما میتونید این تست رو در هر مرحله ای از طراحی خودتون انجام بدید.ازون جا که شما با کاربرای اصلیتون این تست رو انجام نمیدید لازم نیست محصول نهایی رو شبیه سازی کنید.بنابراین میتونید حتی روی نمونه های کاغذیتون هم این تست رو انجام بدید.اما یادتون باشه این تست به اندازه تست با کاربر واقعی کارایی نداره!2- تست های چریکی (Guerrilla Usability Tests)شما این تست ها رو میتونید با کمک افرادی که اطرافتون هستند انجام بدید.میتونید با همکارتون یا یه فردی که توی کافه نزدیک شما نشسته انجامش بدید.ایده این تست اینو میگه که تست کردن هرچی باشه از تست نکردن خیلی بهتره!حتی اگه بتونید خیلی سریع تست کاربردپذیری رو با یه نفر انجام بدید بهتر از اینه که هیچ تستی نگیرید.مزیت این نوع تست سریع بودنشه اما خب نتایجی که ازش به دست میاد نتایج دقیقی نیستن و این مورد رو باید در نظر بگیرید که احتمالا همکار یا دوست شما توی فیدبک به طرحتون حتمن نکات مثبت رو میبینه و میخواد شمارو خوشحال کنه و این روی نتیجه تست تاثیر میزاره.پس برای به دست آوردن نتایج دقیق و به درد بخور باید چکار کنیم ؟باید بریم سراغ تست بعدی...3-تست کاربرد پذیری در لابراتور (Lab Usability Tests)برای انجام این تست باید از کاربرای واقعی دعوت کنید تا در محیط کنترل شده شما حضور پیدا کنن تا بتونید مشاهدات خودتون از کاربر رو ببینید و ضبط کنید.این تست موثرترین تست کاربردپذیریه و نتایج قابل قبولی رو بهتون میده.اما خب خیلی پر هزینه است و زمان زیادی هم میخواد.4-تست کاربردپذیری زمینه ای (Contextual Usability Tests)تفاوت این تست با تست قبلی این هست که در این تست کاربر ها در محیطی که خودشون قرار دارن و با سخت افزارای خودشون (لپتاپ،گوشی،...) تست رو انجام میدن.این تست هم زمانبر و پر هزینه است اما داده های خوبی رو در اختیارتون قرار میده.5- تست کاربردپذیری کنترل نشده (Unmoderated Remote Usability Tests)این تست ، یه تست از راه دور و بدون کنترله!کاربرهای شما این تست رو از مکانی که شما حضور ندارید و بدون راهنمایی شما انجام میدن.شما صفحاتی از دستور العمل ها رو مینویسید و کاربرانتون باید این دستور العمل هارو انجام بدن.تعدادی از سایت ها هستند که به شما کمک میکنن است تست رو انجام بدید و خروجی هر جلسه رو در اختیار شما قرار میدن.در پایان باید بدونید که تعدادی زیادی تست کاربرد پذیری وجود داره و هر کدوم مزیت های خودشون رو دارن و هزینه انجامشون میتونه خیلی متفاوت باشه. و شما باید با توجه به نیاز پروژتون از هر کدوم از تست های کاربردپذیری استفاده کنید. آکادمی سرخ فاطمه فتاحی Fri, 28 May 2021 20:30:35 +0430 https://virgool.io/RedAcademy/%DA%86%DA%AF%D9%88%D9%86%D9%87-%D8%A8%D9%87-%DB%8C%DA%A9-%D8%B7%D8%B1%D8%A7%D8%AD-%D9%87%D9%85%D8%AF%D9%84-%D8%AA%D8%A8%D8%AF%DB%8C%D9%84-%D8%A8%D8%B4%DB%8C%D9%85-m9g9zudah83f همدلی باعث میشه که ما هدف، یادگیری، فرهنگ، دانش، نظرات و دیدگاه خودمون رو نسبت به دنیا کنار بزاریم تا بفهمیم دیگران چجوری کارها رو تجربه میکنن.این کار نیاز به یه حس تخیل قوی، فروتنی و آگاهی از نیاز ها، خواسته ها و اهداف مردم داره.اگر هیچ ارتباطی بین شما و کاربراتون وجود نداشته باشه میتونین مطمئن باشید که پروژه طراحی شما با شکست رو به رو میشه.بنابراین به عنوان یه طراح باید بفهمیم که چقدر همدل هستیم.این به ما کمک میکنه تا در طراحی راه حل هایی که واقعا مشکلات کاربرهامون رو حل میکنه و موثرتره ارائه کنیم.یادتون باشه "موهبت بزرگ انسان ها این است که ما از قدرت همدلی برخوردار هستیم"همدلی در همه ی افراد یک ویژگی ذاتیه.با این حال یک طراح همدل بودن کار ساده ای نیست.دلیلش اینه که ما چه آگاهانه و چه ناخودآگاهانه از تجربیات و نظرات قبلی خودمون که توی مدرسه و دانشگاه یاد گرفتیم برای قضاوت دیگران استفاده میکنیم و داده های خام رو جذب و تحلیل نمیکنیم.خوشبختانه ما میتونیم مهارت های پایه همدلی رو در خودمون نه تنها برای یه طراح خوب بودن بلکه به عنوان یه انسان تقویت کنیم تا بتونیم دیگران رو بهتر و عمیق تر درک کنیم.1-خودپسندی رو رها کنیدبیشتر ما تمایل داریم موقع ارتباط برقرار کردن با دیگران از خودمون دفاع کنیم و حرف حرف خودمون باشه!این یعنی ما خواسته ها و نگرانی های خودمون برامون مهم تر از خواسته های دیگرانه !وقتی میخواید با مردم ارتباط برقرار کنید باید همدل باشید و خودخواهی رو کنار بزارید.باید بدونید که هدف اولیه طراحی ایجاد همدلیه!شما باید هدفتون رو درک و تجربه احساسات دیگران و پیدا کردن راه حل برای مشکلاتشون بزارید.برای این کار باید یاد بگیرید رفتار خودتون رو تغییر بدیدو سعی کنید عقاید خودتون رو با دیگران بسنجید یا اینکه ثابتش کنید .منیت رو توی خودتون بکشید.و در مورد نظرات دیگران خوب فکر کنید.2- فروتن باشیدوقتی فروتن باشید قدرت اینو دارید که ارزش دیگران رو از خودتون بالاتر بدونید و همین ویژگی حس همدلی رو بهبود میده.این که به نقص ها و معایبمون اعتراف کنیم شجاعت زیادی میخواد.اما اگر بخواید همدلی واقعی را در یک فرآیند طراحی توسعه بدید ضروریه.مثلا، خیلی خوبه که بگید هنوز نمیدونید چه کار می کنید یا به کجا می رید . شما می خواین وقت بذارین و بفهمید چه چیزی برای کاربراتون مناسبه، نه اینکه فقط برای خودتون باشه.علاوه بر این با افزایش حس رهبری و مدیریت فروتنی اهمتیش بیشتر هم میشه.مدیرانی که حس فروتنی رو میفهمن نقص های خودشون رو میپذیرن و منافع خودشون رو بخاطر پروژه کنار میزارن.3- شنونده خوبی باشیداگر میخواید کاربرتون رو خوب درک کنید باید به اونا با دقت گوش کنین!اما واسه تبدیل شدن به یه شنونده خوب باید نکات زیر رو رعایت کنید.1- نه فقط با گوش هاتون ،بلکه با تمام حواستون گوش کنید.2- همیشه حضور و توجه کامل داشته باشد، اجازه ندید ذهنتون یا نگاهتون پراکنده بشه!3- هرچی که گفته میشه و نحوه بیانش رو با دقت ببینید.4- قبل از این که هر نظری بدید خودتون رو کنترل کنید و منتظر بمونین تا حرف های طرف مقابلتون تموم بشه.5- در مورد جوابی که میخواید بدید فکر نکنید و تا قبل از تمون شدن حرفای شخص مقابلتون بیانش نکنین.4- مهارت مشاهده کردن خودتون رو تقویت کنیدهمونطور که کاربراتون رو مشاهده می کنید، مطمئن بشید که رفتارها ، نشانه های ظریف، عبارات غیر کلامی، زبان بدن و محیط آنها را با دقت زیر نظر میگیرید.وقتی که مهارت های شنیداری و مشاهده خودتون رو با هم ترکیب می کنید، طیف کاملی از احساسات رو که بقیه تو وجود خودشون احساس می کنند تجربه می کنین و بنابراین همدلی عمیق تر و معنی دارتری رو تجربه میکنید.یادتون باشه که بیشتر وقتا چیزی که کاربرا میگن تنها بخشی از داستان کاملشونه. وقتی که مهارت مشاهده کردن خودمون رو تقویت می کنیم، می تونیم خیلی از خلا هارو پر کنیم.و تجربیات کاربرارو عمیق تر درک کنیم و راه حل هایی طراحی کنیم که واقعاً نیازهای اونا رو برآورده می کن!5- زبان بدن رو یاد بگیرید و بفهمیدنه تنها باید از زبان بدن کاربرامون آگاهی زیادی داشته باشیم، بلکه باید توجه داشته باشیم که چگونه زبان بدن خودمون میتونه زمینه اعتماد و تعامل بین خودمون و افرادی را که باهاشون مصاحبه می کنیم رو ایجاد کنه. این مهارتیه که همراه با تمرین به دست میاد. بعضی وقتا، ممکن است زبان بدن به قدری ظریف بشه که پیام های ایجاد شده توسط ابروها، شانه ها یا دست ها و همچنین تغییرات نامحسوس صدامون، فقط برای اونایی که زبان بدن رو میفهمن قابل دیدن باشه!خب حالا چکار باید بکنیم تا این ویژگی رو تقویت کنیم؟1- با زبان بدن، سیگنال های بدن، حالت های صورت، صدای صوت و معنای مثبت و منفی اونا آشنا بشید.2- در مورد تفاوتهای ظریف در برقراری ارتباط ، تغییر لحن ، مکث در گفتار و تمایل به دور زدن نقاط مطالعه کنید.3- یاد بگیرید تا بتونین چیزی که گفته نمیشه رو هم درک کنین تا بفهمین چه چیزهایی داره توسط کاربر مخفی میشه یا داره سعی میکنه که از گفتنش صرف نظر کنه!4- یاد بگیرید چجوری سوال بپرسید و چی بپرسید و کاربر چه موقع آمادست تا ازش سوال پرسیده بشه.یادتون باشه زبان بدن ما غالباً میتونه بیشتر از اون چیزی که میگیم رو بیان کنه و از خیلی جهات میتونه یه "ردیاب دروغ" عالی باشه!6- به دیگران اهمیت بدیدیکی از عوامل مهم توانایی همدلی با مردم، اهمیت دادن به بقیه است! وقتی که نگرانی واقعی در مورد وضعیت بقیه دارید، متوجه میشید که اشتیاق زیادی برای غلبه به خواسته های خودتون و به جای اون تلاش برای درک، کمک و پرورش بقیه دارید."هیچ کس اهمیت نمیده که شما چقدر میدونید تا وقتی که بفهمه شما چقدر اهمیت میدید و براتون مهمه"مواردی هست که می تونید برای ایجاد احساس مراقبت و نگرانی عمیق برای افراد دیگه انجام بدید:1- وقت خودتون رو با افراد دلسوز سپری کنید. به دنبال افرادی باشید که همدلی بالایی دارن و زمان زیادی رو باهاشون بگذرونید. ببینید که چجوری نسبت به موقعیت های دیگران واکنش نشان می دن و چرا با افراد خاصی همدلی می کنن.2- چگونگی تجربه درد و سختی رو تو زندگی روزمره رو ببینین! مثلا وقتی که همکارتون داره موقعیت صندلی میز کار خودش رو تنظیم میکنه، چطور اذیت می شه یا سختشه.توجه کردن به این چیزا باعث میشه، وقتی زمان تعامل با کاربرا میرسه، همدلی شما طبیعی تر و بهتر باشه.7- کنجکاو باشیدبه عنوان طراح، ما به طور طبیعی موجوداتی کاملاً کنجکاو هستیم و شما باید از این حس کنجکاوی ذاتی نهایت استفاده رو ببرید تا به شما در انجام تحقیقات همدلانه کمک کنه. با این ویژگی متوجه میشید که فهمیدن انگیزه های مردم آسون نیست ولی به شدت ارزشمنده.از این که از مردم بخواین درباره تجربیاتشون یا احساساتشون بگن نترسید.شما می خواهید راه حل هایی رو طراحی کنین که واقعاً پاسخگوی نیازهای مردم باشه! به این ترتیب، کنجکاوی به شما کمک می کنه تا مهمترین اطلاعات رو برای حل موثر مشکلات کشف کنین.8- در مورد اهداف خود صادق باشیدهیچ چیزی اندازه روراست نبودن نمیتونه همدلی رو از بین ببره!باید از فرضیه هایی که مردم به کمک شما نیاز دارن دور بشین و در عوض این هدف رو نشون بدید که فهمیدن عمیق خواسته های اونا برای شما یه مزیته.9- خودتون رو در متن کاربرانتون غرق کنیداین راه در واقع موثر ترین راه همدلی با بقیه است.وقتی غرق کاربراتون بشین تجربه دقیق و مستقیمی از زندگی،فعالیت ها، محیط و کارشون دارید.باید گاهی نقش کسایی که میخواین براشون طراحی کنید رو انجام بدید تا فعالیت اصلی اون هارو تجربه کنید.این کار باعث میشه همه چیزی که اونها میبینن و احساس میکنن رو ببینید و احساس کنید.و این باعث میشه بیشترین همدلی رو داشته باشید.در نهایت یادتون باشه که درسته که همدلی یه ویژگی ذاتیه اما برای درک بهتر کاربرامون باید سعی کنیم مهارت های بالارو یادشون بگیریم و تقویتشون کنیم.هرازگاهی این نکات رو مرور کنین تا مطمئن بشین که واقعا یه طراح همدل هستین یا نه! آکادمی سرخ فاطمه فتاحی Tue, 04 May 2021 22:27:43 +0430 https://virgool.io/RedAcademy/%D8%AF%D8%B1-%D8%A7%D9%86%D8%AA%D8%B8%D8%A7%D8%B1-%D8%AA%D9%BE%D8%B3%DB%8C-%D8%AF%D8%A7%D8%B3%D8%AA%D8%A7%D9%86-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B5%D9%81%D8%AD%D9%87-%D8%AC%D8%B3%D8%AA%D8%AC%D9%88%DB%8C-%D8%B1%D8%A7%D9%86%D9%86%D8%AF%D9%87-bfq67mtj3lmx این پست در مورد طراحی بازی صفحه جستجوی راننده تپسی و پروسه شکل‌گیری و اجرای آیتم‌ها و عناصر مربوط به این صفحات است.فروردین ۹۶ وارد تپسی شدم و یکی از اولین ماموریت‌هام طراحی ماشین روی نقشه تپسی بود.جدای از اینکه زشت و سیاه بود :) جهت نداشت و مشخص نبود در مسیر به سمت من مسافر در حرکت است یا از من گذشته، یا در کدام سمت یک بلوار در حال حرکت است.تپسی قبل از عمل :) آیکون خودروهای روی نقشهاسمش رو PIXI-TAPSI گذاشتم چون باید در ابعاد بسیار کوچیک و عملا چند پیکسل، به شکل خودرو طراحی می‌کردم که جهت را مشخص کند، روی نقشه شلوغ قابل تشخیص باشد و مهمتر از هر چیزی یادآور تپسی باشه.برای اینکه بهترین سبک، مدل و رنگ از یک ماشین رو انتخاب کنم تصمیم گرفتم یک تست به‌شکل بازی طراحی‌کنم. پس تصاویر مختلفی از کلاس‌های مختلف ماشین‌ها (SUV, Hatchback, Fastback ,sedan) در سبک‌های مختلف تصویرسازی تخت (Flat) و سه‌بعدی و رنگ‌های مختلف روی زمینه طوسی نقشه جمع‌آوری کردم و روی کارت‌های کوچکی پرینت کردم.مقایسه بج قدیمی تپسی کلاسیک با نسخه جدید و بج و تصویرسازی‌های اوبراز افراد مختلف در دسترس می‌خواستم تا کارت‌های رندوم که در وسط میز قرار گرفته‌بود را به سمت جلو روی میز حرکت دهند. بدین ترتیب متوجه شدم در سرعت بالا کدام نمونه‌ها کمترین خطا را داشتند. نمای بالای خودروهای شاسی‌بلند و هاچبک بهترین اقبال را داشتند و هر‌چه رنگ شیشه‌های خودرو با بدنه تضاد بیشتری داشت جلو و عقب خودرو قابل شناسایی‌تر بود. آنچه باعث می‌شد افراد جهت‌خودرو را در کسری از ثانیه شناسایی کنند کاپوت و شیشه‌جلو بود و جالبتر اینکه صندوق عقب بزرگ افراد را به اشتباه می‌انداخت. در مرحله آخر رنگ چراغ‌های جلو و عقب به کمک می‌آمد.اتودهای دستی برای تصویرسازی‌های محصول تپسی معتقدم برای طراحی یک محصول ایرانی چه بهتر که فرهنگ و اصالت خودمون رو ابراز کنیم. به همین دلیل تصمیم داشتم از خودروهای هاچ‌بک ایرانی (پژو ۲۰۶، پراید یا تیبا ۲) استفاده کنم، اما چندان با هویت تپسی همخوانی نداشتند و نگران بحث‌های حقوقی با شرکت‌های سازنده هم بودم.پس به‌سراغ طرحی رفتم که با پرستیژ تپسی هم‌راستا باشه و ترجیحا نمایندگی در ایران نداشته باشه :)اتودهای ماشین‌های تپسی - آرین مقبلیمسیر طراحی بج خودروی کلاسیک تپسیالبته که کمی‌بعد پیکسی تپسی ماموریت‌های ویژه دیگه‌ای هم داشت تا در مناسبت‌ها و رویداد‌های مختلف تغییر چهره بده. مثل یلدا، مسابقات فوتبالی و شهراورد‌ها، عید نوروز و ...تصاویری از خودروی روی نقشه تپسی ( پیکسی-تپسی / pixi-tapsi ) - آرین مقبلیاواسط سال ۹۶ طراحی اپ مسافران رو مستقیم به عهده گرفتم تا هم از نظر عملکرد و هم ظاهر تجربه متفاوت و بهتری برای کاربران ایجاد کنه. در ابتدا گزارش و تست‌ها در مورد عملکرد تپسی، چندان جالب نبود. همچنین شباهت ظاهری به اوبر هم نقد بزرگی به طراحی محصول بود. یکی از دغدغه‌هایی که باعث شده بود به تپسی بیام :) صفحه جستجوی راننده تپسی - ۱۳۹۶ پیش از آغاز فرایند بازطراحیدر این راستا یکی از مهمترین صفحاتی که باید تغییر می‌کرد پروژه جستجوی راننده (Finding Driver) بود.جدای از شباهت با اوبر، رنگ سیاه صفحه و لودینگ در هنگام جستجو، باعث می‌شد کاربران زودتر از جستجو خسته و دلسرد شوند یا حداقل مدت‌کمتری را در انتظار تایید سفر توسط راننده بمانند.در ادامه با جزئیات پیشنهادات و مسیر طراحی این صفحه تاثیرگذار همراه باشید:شیرین، مثل انتظارحرکت (Motion)انتظار همیشه سخته و چالش ما این بود که تلخی انتظار رو شیرین کنیم.اولین کاری که قبل از خواندن یک کتاب انجام می‌دهیم تماشای تصاویر آن است. حال اگر با حرکت هم ترکیب شود می‌تواند کاربر را بیشتر جذب کند اما یک موشن کوتاه اگر بطور مستمر تکرار شود بعد از مدتی خسته‌کننده خواهد شد. اما اگر با فاصله‌های زمانی مختلف، کاربر را با نمایش عناصر جدید غافلگیر کنیم، می‌توانیم امیدوار باشیم که کنجکاویش تحریک شده و مدت بیشتری صفحه را دنبال کند.اتودهای اولیه برای تایید سبک تصویرسازی‌های تپسی - پیکان و ۲۰۶ - آرین مقبلیلذت یک لمسبازی‌سازی (Gamification)گیمیفیکیشن محرک سرگرمی برای درگیر کردن مخاطب است درجایی که اهدافی غیر از بازی و سرگرمی وجود دارد. درواقع گیمیفیکیشن از عناصر طراحی بازی، برای افزایش میزان درگیری کاربر با محصول کمک می‌گیرد.با تی‌رکس در کروم آشنا هستید؟ گوگل در مرورگر کروم (Chrome) با این ترفند هنگام قطع اینترنت تا برقراری مجدد اتصال، کاربر خود را سرگرم می‌کند و حس نارضایتی را با طعم شیرین بازی دلچسب می‌کند.با پرستیژ مثل تپسیبرندینگ (Branding)طراحی فرایند تا جایی باید جذاب باشد که کاربر را ترغیب به اشتراک‌گذاری آن کند. اینجاست که تصویر یا ویدئوی منتشر شده باید گویا و معرف برند تپسی باشه. من داشتم سعی می‌کردم ماشین هاچ‌بک سفید رو به نمادی از تپسی بدل کنم.موارد و نیازهایی که می‌تونستیم توی این صفحه نمایش بدیم.۱. نمایش لودینگ و مدت زمان جستجو۲. نمایش تایید درخواست سفر توسط راننده۳. نمایش عدم قبول سفر۴. تعداد درخواست ارسالی و خودرو‌های اطراف۵. نمایش تبلیغ (معرفی قابلیت‌ها، سرویس‌ها، ویژگی‌ها و کمپین‌ها)۶. نمایش بخشی از قوانین تپسیکانسپت چشم عقاب:اولین ایده من نمایش ماشین‌تپسی (pixi-tapsi) از بالا بود. این کانسپت در سه‌لایه ایجاد می‌شد. ۱. زمینه که بخش‌هایی از تصاویر هوایی جاده‌ها و خیابان‌های ایران تهیه شده بود و در کنار هم تشکیل یک مسیر دیدنی و پرجزئیات می‌داد. ۲. ماشین تپسی ۳. ابرها، پل‌ها و طونل‌هااین کانسپت آمادگی زیادی برای تبدیل شدن به بازی داشت و از همان اول برنامه‌های زیادی داشتیم مثلا سبقت گرفتن از ماشین‌ها یا ردکردن مانع‌های داخل جادهشبیه‌سازی شرایط جوی مثل باد و باران و رعد بر اساس دیتای هواشناسی منطقه‌ای کاربرانشبیه‌سازی نور و تاریکی بر اساس ساعات شبانه روز طراحی اتود کانسپت چشم عقاب - ماشین از بالا روی جاده - تپسی https://virgool.io/p/bfq67mtj3lmx/%DA%A9%D8%A7%D9%86%D8%B3%D9%BE%D8%AA%D8%A7%DB%8C%D8%B1%D8%A7%D9%86%E2%80%8C%D8%B4%D9%87%D8%B1:%D8%A7%DB%8C%D9%86%D8%A7%DB%8C%D8%AF%D9%87%D8%AF%D9%88%D9%85%D8%A8%D9%88%D8%AF%D8%A8%D8%A7%D8%B2%D8%AF%D9%86%D8%AF%DA%A9%D9%85%D9%87%D8%AF%D8%B1%D8%AE%D9%88%D8%A7%D8%B3%D8%AA%D8%B3%D9%81%D8%B1%D8%8C%D9%85%D8%A7%D8%B4%DB%8C%D9%86%D8%AA%D9%BE%D8%B3%DB%8C%D9%88%D8%A7%D8%B1%D8%AF%DA%A9%D8%A7%D8%AF%D8%B1%D9%85%DB%8C%E2%80%8C%D8%B4%D8%AF%D8%AF%D8%B1%D8%AD%D8%A7%D9%84%DB%8C%DA%A9%D9%87%D8%AF%D8%B1%D8%B2%D9%85%DB%8C%D9%86%D9%87%D8%AA%D8%B5%D9%88%DB%8C%D8%B1%D8%B3%D8%A7%D8%B2%DB%8C%D8%A7%D8%B2%D8%B4%D9%87%D8%B1%D8%A8%D8%A7%D8%A7%D9%84%D9%85%D8%A7%D9%86%E2%80%8C%D9%87%D8%A7%DB%8C%D8%B4%D9%87%D8%B1%DB%8C%D9%88%D9%86%D9%85%D8%A7%D8%AF%D9%87%D8%A7%DB%8C%D9%87%D8%B1%DB%8C%DA%A9%D8%A7%D8%B2%D8%B4%D9%87%D8%B1%D9%87%D8%A7%DB%8C%D8%A7%DB%8C%D8%B1%D8%A7%D9%86%DA%A9%D9%87%D8%AA%D9%BE%D8%B3%DB%8C%D8%AF%D8%B1%D8%A2%D9%86%D8%AD%D8%B6%D9%88%D8%B1%D8%AF%D8%A7%D8%B1%D8%AF.%D8%A7%DA%AF%D8%B1%D8%AF%D8%B1%D8%AE%D9%88%D8%A7%D8%B3%D8%AA%D9%BE%D8%B0%DB%8C%D8%B1%D9%81%D8%AA%D9%87%D9%85%DB%8C%E2%80%8C%D8%B4%D8%AF%D9%85%D8%A7%D8%B4%DB%8C%D9%86%DA%AF%D8%A7%D8%B2%D9%85%DB%8C%E2%80%8C%D8%AF%D8%A7%D8%AF%D9%88%D8%A7%D8%B2%D8%B3%D9%85%D8%AA%DA%86%D9%BE%D8%B5%D9%81%D8%AD%D9%87%D8%AE%D8%A7%D8%B1%D8%AC%D9%85%DB%8C%E2%80%8C%D8%B4%D8%AF%D9%88%D8%A7%DA%AF%D8%B1%D8%AF%D8%B1%D8%AE%D9%88%D8%A7%D8%B3%D8%AA%D9%82%D8%A8%D9%88%D9%84%D9%86%D9%85%DB%8C%E2%80%8C%D8%B4%D8%AF%D9%85%D8%A7%D8%B4%DB%8C%D9%86%D8%AA%D8%B1%D9%85%D8%B2%D9%85%DB%8C%E2%80%8C%D8%B2%D8%AF%D9%88%D8%A7%D8%B2%D8%B3%D9%85%D8%AA%D8%B1%D8%A7%D8%B3%D8%AA%DA%A9%D8%A7%D8%AF%D8%B1%D8%AE%D8%A7%D8%B1%D8%AC%D9%85%DB%8C%E2%80%8C%D8%B4%D8%AF.%D8%A7%DB%8C%D9%86%DA%A9%D8%A7%D9%86%D8%B3%D9%BE%D8%AA%D8%A8%D9%87%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C%D9%81%D9%86%DB%8C%D9%86%D8%B2%D8%AF%DB%8C%DA%A9%E2%80%8C%D8%AA%D8%B1%D8%B4%D8%AF.%D9%82%D8%B1%D8%A7%D8%B1%D8%A8%D9%88%D8%AF%D8%AF%D8%B1%DA%86%D9%86%D8%AF%D9%81%D8%A7%D8%B2%D8%A7%D8%AC%D8%B1%D8%A7%D8%B4%D9%88%D8%AF%D8%AF%D8%B1%D9%86%D8%B3%D8%AE%D9%87%D8%A7%D9%88%D9%84%D8%B2%D9%85%DB%8C%D9%86%D9%87%D8%AB%D8%A7%D8%A8%D8%AA%D8%A8%D8%A7%D8%B4%D8%AF.%D8%AF%D8%B1%D9%86%D8%B3%D8%AE%D9%87%D8%AF%D9%88%D9%85%D8%8C%D9%85%D9%88%D8%B4%D9%86%E2%80%8C%D9%87%D8%A7%DB%8C%DB%8C%D9%85%D8%AB%D9%84%D8%A8%D8%A7%D8%AF%D9%88%D8%A8%D8%A7%D8%B1%D8%A7%D9%86%D9%88%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1%D9%86%D9%88%D8%B1%D8%AF%D8%B1%D8%B2%D9%85%DB%8C%D9%86%D9%87%D8%A7%D8%AA%D9%81%D8%A7%D9%82%D8%A8%DB%8C%D9%88%D9%81%D8%AA%D8%AF%D9%88%D8%AD%D8%AA%DB%8C%D8%AF%D8%B1%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF%D9%87%D8%A7%DB%8C%D9%85%D8%AE%D8%AA%D9%84%D9%81%DB%8C%D8%A7%D8%A7%D8%A8%D8%AA%D8%AF%D8%A7%DB%8C%D9%81%D8%B5%D9%84%E2%80%8C%D9%87%D8%A7%DB%8C%D8%B3%D8%A7%D9%84%D8%B1%D9%86%DA%AF%D9%88%D8%A8%D9%88%DB%8C%D9%85%D8%AA%D9%86%D8%A7%D8%B3%D8%A8%D8%A8%DA%AF%DB%8C%D8%B1%D8%AF.%D8%AF%D8%B1%D9%86%D8%B3%D8%AE%D9%87%D8%B3%D9%88%D9%85%D8%A8%D8%A7%D8%B2%DB%8C%D8%A8%D9%87%D8%A2%D9%86%D8%A7%D8%B6%D8%A7%D9%81%D9%87%D8%B4%D9%88%D8%AF(%D9%85%D8%AB%D9%84%D8%A7%D8%A7%D8%B2%D8%B1%D9%88%DB%8C%D8%B3%D8%B1%D8%B9%D8%AA%E2%80%8C%DA%AF%DB%8C%D8%B1%D9%87%D8%A7%D8%A8%D9%BE%D8%B1%D8%AF%DB%8C%D8%A7%D8%A8%D8%A7%D8%AA%D9%86%D8%B8%DB%8C%D9%85%D8%A7%D8%B1%D8%AA%D9%81%D8%A7%D8%B9%D8%A7%D8%B2%D8%B1%D9%88%DB%8C%D9%85%D8%AE%D8%B1%D9%88%D8%B7%E2%80%8C%D9%87%D8%A7%D9%88%D8%AA%D8%A7%D8%A8%D9%84%D9%88%E2%80%8C%D9%87%D8%A7%D8%B1%D8%A7%D8%B1%D8%AF%DA%A9%D9%86%D8%AF)*%D8%A7%DB%8C%D8%B1%D8%A7%D9%86%E2%80%8C%D8%B4%D9%87%D8%B1%D8%8C%D8%AA%D8%B1%DA%A9%DB%8C%D8%A8%DB%8C%D8%A7%D8%B2%D8%B9%D9%86%D8%A7%D8%B5%D8%B1%D9%85%D8%B9%D9%85%D8%A7%D8%B1%DB%8C%D9%88%D8%B7%D8%A8%DB%8C%D8%B9%DB%8C%D8%A7%DB%8C%D8%B1%D8%A7%D9%86%D9%87%D8%B3%D8%AA.%D8%A8%D8%B1%D8%AC%D9%85%DB%8C%D9%84%D8%A7%D8%AF%D9%88%D8%A2%D8%B2%D8%A7%D8%AF%DB%8C%D8%AF%D8%B1%D8%AA%D9%87%D8%B1%D8%A7%D9%86%D8%8C%D9%85%DB%8C%D8%AF%D8%A7%D9%86%D8%B4%D9%87%D8%B1%D8%AF%D8%A7%D8%B1%DB%8C%D8%AF%D8%B1%D8%B1%D8%B4%D8%AA%D8%8C%D8%AD%D8%A7%D9%81%D8%B8%DB%8C%D9%87%D8%AF%D8%B1%D8%B4%DB%8C%D8%B1%D8%A7%D8%B2%D8%8C%D8%B3%DB%8C%E2%80%8C%D9%88%E2%80%8C%D8%B3%D9%87%D9%BE%D9%84%D8%A7%D8%B5%D9%81%D9%87%D8%A7%D9%86%D8%8C%D8%A2%D8%B1%D8%A7%D9%85%DA%AF%D8%A7%D9%87%D8%B4%D9%87%D8%B1%DB%8C%D8%A7%D8%B1%D8%AA%D8%A8%D8%B1%DB%8C%D8%B2%D9%88%D8%A8%D8%A7%D8%B1%DA%AF%D8%A7%D9%87%D8%A7%D9%85%D8%A7%D9%85%E2%80%8C%D8%B1%D8%B6%D8%A7%D8%AF%D8%B1%D9%85%D8%B4%D9%87%D8%AF.%D8%A7%D9%84%D9%85%D8%A7%D9%86%E2%80%8C%D9%87%D8%A7%DB%8C%D8%B4%D9%87%D8%B1%DB%8C%DA%A9%D9%87%D9%85%DB%8C%E2%80%8C%D8%AA%D9%88%D8%A7%D9%86%D8%AF%D8%A8%D9%87%D9%85%D8%B1%D9%88%D8%B1%D8%A8%DB%8C%D8%B4%D8%AA%D8%B1%D8%B4%D9%88%D8%AF.%D8%A7%DB%8C%D9%86%DA%86%D8%B4%D9%85%E2%80%8C%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%D8%B9%D9%84%D8%A7%D9%88%D9%87%D8%A8%D8%B1%D8%AC%D8%B0%D8%A7%D8%A8%DB%8C%D8%AA%D8%A8%D8%B5%D8%B1%DB%8C%D9%86%D9%85%D8%A7%D8%AF%D8%A7%DB%8C%D8%B1%D8%A7%D9%86%DB%8C%DB%8C%DA%A9%D9%BE%D8%A7%D8%B1%DA%86%D9%87%D8%A7%D8%B3%D8%AA.%D9%87%D9%85%DA%86%D9%86%DB%8C%D9%86%D8%AD%D8%B6%D9%88%D8%B1%D8%AA%D9%BE%D8%B3%DB%8C%D8%AF%D8%B1%D9%87%D8%B1%DB%8C%DA%A9%D8%A7%D8%B2%D8%B4%D9%87%D8%B1%D9%87%D8%A7%DB%8C%DB%8C%DA%A9%D9%87%D8%AF%D8%B1%D8%A2%D9%86%D9%86%D9%85%D8%A7%DB%8C%D9%86%D8%AF%DA%AF%DB%8C%D8%AF%D8%A7%D8%B1%D8%AF%D8%B1%D8%A7%D8%A8%DB%8C%D8%A7%D9%86%D9%85%DB%8C%E2%80%8C%DA%A9%D9%86%D8%AF.%DB%8C%DA%A9%DB%8C%D8%AF%DB%8C%DA%AF%D8%B1%D8%A7%D8%B2%DA%86%D8%A7%D9%84%D8%B4%E2%80%8C%D9%87%D8%A7%DB%8C%D9%85%D8%A7%D8%B2%D9%85%D8%A7%D9%86%DB%8C%D8%A8%D9%88%D8%AF%DA%A9%D9%87%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%A8%D8%B9%D8%AF%D8%A7%D8%B2%D8%B2%D8%AF%D9%86%D8%AF%DA%A9%D9%85%D9%87%D8%AF%D8%B1%D8%AE%D9%88%D8%A7%D8%B3%D8%AA%D8%B3%D9%81%D8%B1%D8%8C%DA%AF%D9%88%D8%B4%DB%8C%D8%B1%D8%A7%D8%B1%D9%87%D8%A7%D9%85%DB%8C%E2%80%8C%DA%A9%D9%86%D8%AF%D8%AA%D8%A7%D8%A2%D9%85%D8%A7%D8%AF%D9%87%D8%B4%D9%88%D8%AF%DB%8C%D8%A7%D8%AF%D8%A7%D8%AE%D9%84%D8%AC%DB%8C%D8%A8%D8%B4%D9%85%DB%8C%E2%80%8C%DA%AF%D8%B0%D8%A7%D8%B1%D8%AF%D9%88%D8%A8%D9%87%D9%87%D8%B1%D8%B5%D9%88%D8%B1%D8%AA%D8%B5%D9%81%D8%AD%D9%87%D8%B1%D8%A7%D9%86%D9%85%DB%8C%E2%80%8C%D8%A8%DB%8C%D9%86%D8%AF.%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87%D8%A7%D8%B2%D8%B5%D9%88%D8%AA%D8%B1%D8%A7%D9%87%DA%A9%D8%A7%D8%B1%D9%85%D8%A7%D8%A8%D9%88%D8%AF%D8%A8%D9%87%D8%B7%D9%88%D8%B1%DB%8C%DA%A9%D9%87%D8%B5%D8%AF%D8%A7%DB%8C%DA%AF%D8%A7%D8%B2%D8%AF%D8%A7%D8%AF%D9%86%D8%AE%D9%88%D8%AF%D8%B1%D9%88%D8%A8%D9%87%D9%85%D8%B9%D9%86%D8%A7%DB%8C%D9%82%D8%A8%D9%88%D9%84%D8%AF%D8%B1%D8%AE%D9%88%D8%A7%D8%B3%D8%AA%D9%88%D8%AA%D8%B1%D9%85%D8%B2%D8%A8%D9%87%D9%85%D8%B9%D9%86%D8%A7%DB%8C%D8%B9%D8%AF%D9%85%D9%82%D8%A8%D9%88%D9%84%D8%AF%D8%B1%D8%AE%D9%88%D8%A7%D8%B3%D8%AA%D8%AF%D8%B1%DA%A9%D9%86%D8%A7%D8%B1%D9%88%DB%8C%D8%A8%D8%B1%D9%87%E2%80%8C%D9%87%D8%A7%DB%8C%D9%85%D8%AA%D9%86%D8%A7%D8%B3%D8%A8%D9%85%DB%8C%E2%80%8C%D8%AA%D9%88%D8%A7%D9%86%D8%B3%D8%AA%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%B1%D8%A7%D8%A7%D8%B2%D8%B4%D8%B1%D8%A7%DB%8C%D8%B7%D9%85%D8%B7%D9%84%D8%B9%DA%A9%D9%86%D8%AF.%D9%86%D8%B3%D8%AE%D9%87%D8%A7%D9%88%D9%84%D8%A7%DB%8C%D9%86%D8%B7%D8%B1%D8%AD%D8%AF%D8%B1%DA%AF%D9%88%D8%B4%DB%8C%E2%80%8C%D9%87%D8%A7%DB%8C%D8%A7%D9%86%D8%AF%D8%B1%D9%88%DB%8C%D8%AF%D8%A8%D8%B1%D8%A7%DB%8C%D9%85%D8%AF%D8%AA%DB%8C%D8%A7%D8%AC%D8%B1%D8%A7%D9%88%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87%D8%B4%D8%AF. ایران‌شهر | آرین مقبلی - تپسیکانسپت لوگوی تپسیهرچند کانسپت ایران‌شهر و ماشین، جذاب بود اما به دلایلی تصمیم گرفته شد از فرم لوگوی تپسی در طرح‌نهایی استفاده شود. در این طرح لوگوی تپسی وارد صفحه می‌شد و می‌چرخید و در حالت قبول درخواست شبیه به خودرو می‌شد و گاز می‌داد تا از کادر خارج شود. در غیر اینصورت به زمین می‌چسبید و از کادر خارج می‌شد :)ایده‌ها، تغییرات و اجراهای صفحه جستجوی راننده در تپسیکمی بعد با بازطراحی لوگوی تپسی با توجه به پیشنهادات ارائه شده نمونه چشم عقاب بصورت تصویرسازی فلت و موشن اجرایی شد. طراحی این بخش با تیم خلاقیت تپسی بود. با انتشار این نسخه همونطور که انتظار داشتیم موجی از درخواست‌ها و پیشنهادات برای اجرای بازی روی این صفحه شد.پس باز دست به کار شدیم و انواع گیم‌های کوچیک رو مقایسه کردیم. درسته وجود بازی جذابه اما باید به تاثیرات دیگرش هم فکر می‌کردیم. ما نمی‌خواستیم تعداد سفرهای لغو شده و انصراف سفرها بخاطر شوق بازی در تپسی زیاد بشه. یا اگر به عنوان کاربر مشغول بازی و رکورد شکنی باشم و یکباره درخواست قبول بشه چه اتفاقی باید بیوفته؟یکی از ایده‌ها جاده موزیکال بود. نت‌های موسیقی روی جاده که و اگر از روشون رد می‌شدی یک موزیک جذاب در زمینه شکل می‌گرفت. قبلا چند باری در مورد موزیک برند برای تپسی صحبت کرده بودیم و اگر این موزیک همان موزیک بود به شناخت بیشتر برند کمک می‌کرد و اطرافیان رو از گرفتن تپسی آگاه می‌کرد. از طرفی به کاربر حس امتیاز منفی نمی‌دادیم و اشتباهات کاربر رو نمی‌شمردیم و کاربر از حس خوب عملکردش برای تکمیل موزیک لذت می‌برد ( بهترین امتیاز! ? )چون تازگی بحث کهکشان تپسی در اپ قرارگرفته بود و اسمش به سفینه تپسی تغییر کرد. ایده تبدیل شدل ماشین به سفینه و تیراندازی به دشمن یا مانع‌عای روبرو یکی دیگه از پیشنهادات بود.ایده دیگه رد کردن مانع بدون تیر و خون‌ریزی بود. این موانع میتونست ماشین‌های سبز ? ، مخروطی‌های نارنجی راهسازی، چاله‌های خیابون یا حتی دست‌انداز و سرعت‌گیرها یا هر چیز بیخود دیگه‌ای باشه.آخرین باری که روی این پروژه کار کردم سرعتگیر‌ها رو طراحی می‌کردم.نزدیک به یکسالی هست تپسی نیستم و باید ادامه این پروسه رو از بچه‌های جدید تیم‌طراحی محصول پرسیدامروز که خبر اومد بالاخره بازی تپسی منتشر شده خیلی خوشحال شدم. گفتم شاید جالب باشه تاریخچه‌ی ایده‌ تا اجرای این بخش از محصول رو بدونید. مطمئنا در این یکسال چالش‌های جدیدی پیش روی تیم طراحی و دولوپ تپسی بوده که من ازش باخبر نیستم و مشتاقم ادامه این داستان رو از بچه‌ها بشنوم.مطمئنا تمام این پروسه‌ها بدون همکاری یک تیم کار درست شکل نمی‌گرفت.باید از دوستای حرفه‌ایم در تیم فنی که توی اجرای این پروسه درگیر بودن تشکر کنم. از مینو ایروانی برای زحمت موشن‌دیزاین، تیم خلاقیت تپسی برای طراحی. امین شیخی و تیم طراحی جدید تپسی. اردلان پویا‌بهار، امیرحسین بهزاده و مهرشید فدایی در جایگاه مدیر محصول و خیلی از بچه‌هایی که من احتمالا نمی‌شناسم و گل کاشتند تو این مسیر و شما کاربرانی که هر روز نقد کردین، تشویق کردین و انرژی دادین تا این‌محصول بهتر از قبل بشه.آرین مقبلیسرپرست سابق محصول تپسیرویا پرداز و مدیر کارخانه رویاسازی استودیو سرخمن رو در شبکه‌های اجتماعی دنبال کنیدredl.ink/arian آکادمی سرخ آرین مقبلی Sun, 14 Mar 2021 13:36:37 +0330 https://virgool.io/RedAcademy/%D9%87%D9%85%D9%87-%DA%86%DB%8C%D8%B2-%D8%AF%D8%B1%D8%A8%D8%A7%D8%B1%D9%87-%D8%AF%DB%8C%D8%B2%D8%A7%DB%8C%D9%86-%D8%B3%DB%8C%D8%B3%D8%AA%D9%85-hfckaiz43rmp احتمالا همه ما زمانی که دیزاین سیستم وجود نداشت خیلی ساده از ابتدا شروع به طراحی میکردیم و اجزای طرح مان را در لحظه میساختیم و از آن استفاده میکردیم و خیلی توجهی به جزئیات آن نداشتیم و یا نهایتا شاید سایز یا رنگ آن را به خاطر میسپردیم.دیزاین سیستم ها برای این به وجود آمدند که راه حلی برای اشتباهات ما باشند و زمانی که نیاز به توسعه طرحمان داریم به ما کمک کنند.دیزاین سیستم چیست؟تعاریف زیادی برای دیزاین سیستم وجود دارد ولی باورهای اشتباه ما از گذشته باعث می شود که ما با این تعریف شروع کنیم که دیزاین سیستم چه چیزی نیست؟دیزاین سیستم Sketch library ، Style guide ، Pattern library نیست. در واقع همه این موارد به علاوه کلی مفهوم و کاربرد دیگر دیزاین سیستم را تشکیل می دهند.دیزاین سیستم تنها منبع موثقی هست که با دسته بندی همه المان های مورد نیاز تیم طراحی این امکان را فراهم می کند تا یک محصول، طراحی و توسعه داده شود.بنابراین دیزاین سیستم یک خروجی نیست، بلکه مجموعه ای از خروجی هاست. این سیستم به صورت مداوم همگام با ابزار ها و تکنولوژی های جدید تکامل می یابد.این سیستم متشکل از المان های ملموس و نا ملموسی است از جمله ابزارهای مورد نیاز طراحان و برنامه نویسان، پترنها، دستورالعمل ها و … و همچنین شامل موارد نا محسوسی شامل ارزش های برند، روش های انجام کار، ذهنیت افراد، نظرهای مطرح شده و …تفاوت Style Guide و Pattern Library چیست؟هر دو این موارد از ملزومات طراحی هستند.Style Guideهمانطور که از اسم آن مشخص است، این ویژگی بیشتر بر المان های سبک های متفاوت طراحی مثل رنگ ها، فونت ها، تصاویر، … و کاربرد هایشان تمرکز دارد.Pattern Libraryاین بخش شامل مولفه های عملکردی و کاربردهایشان می شود.خیلی از دیزاین سیستم های فعلی شامل هر دو بخش گفته شده هستند، به عنوان مثال Shopify رو در نظر بگیرید که بخش Visual آن نشان دهنده Style Guide و قسمت Component آن همان Pattern Library است.تمایل افراد برای ساده کردن فرآیند طراحی و مولفه های آن موضوع جدیدی نیست اما در سال های اخیر بسیار بیشتر هم شده است به طوری که بیشتر شرکت ها همه فعالیت های طراحی خود را دیجیتالی کرده اند.برای مدت زیادی، دیجیتالی بودن طراحی یک پروژه جانبی محسوب می شد. عموما دستورالعمل های گرافیکی برای کارهای چاپی ایجاد می شدند و یک سری دستورالعمل اضافی هم برای کارهای دیجیتالی ایجاد می شدند که هیچوقت بیشتر از ۳۰۰ صفحه برای طرح های چاپی و برای کارهای دیجیتالی هم بیشتر از ۶ صفحه دستورالعمل موجود نبود و این ها برای یک برند کافی نبود.باید شکاف بین دنیای چاپ و دیجیتال را با یک زبان مشترک که مدام در حال تکامل است پر کنیم. دیزاین سیستم در واقع همان دستورالعمل های گرافیکی گذشته است که بالغ تر و یکپارچه تر شده است. در واقع ابزاری است که این امکان را فراهم می کند تا مجموعه ای از کامپوننت های مورد نیازمان را بسازیم و با سایر افراد به اشتراک بگذاریم.درون این سیستم چه می گذرد؟هدف اصلی دیزاین سیستم، تسهیل فعالیت های اعضای تیم است.بنابراین به جای اینکه از خودمان بپرسیم چه اطلاعاتی لازم است به دیزاین سیستم بدهیم ، باید بپرسیم چه کسی و چگونه قرار است از آن استفاده کند؟زمانی که جامعه هدف، ایده اولیه، میزان حرفه ای بودن اعضای تیم درباره موضوع مورد بحث، ابزارهای قابل استفاده و … را مشخص کردیم و تعیین کردیم روی چه چیزی باید کار کنیم، به آسانی می توانیم کار را شروع کنیم.اهداف و ارزش هاقبل از شروع هر چیزی، لازم است برای داشتن یک چشم انداز و اطمینان از اینکه همه افراد تیم به خوبی توجیه شده اند، چند هدف شفاف برای اعضا مشخص و در جهت رسیدن به این اهداف با یکدیگر هماهنگ شوند. این اهداف با گذر زمان تغییر می یابند و بهبود پیدا می کنند و این یک روند طبیعی است. اما مهم این است که اعضای تیم به خوبی در جریان این تغییرات باشند.ارزش ها ، با توجه به اهداف برند، انتخاب های ما را شکل می دهند. مهم است که طرح های ما با این ارزش های کلیدی در تضاد نباشند.علاوه بر ارزش های برند و محصول، ارزش های دیگری نیز می توانیم برای تیم تعیین کنیم که ذهنیت مشترک بین اعضای تیم ایجاد کند.قواعد طراحیاولین نکته ای که باید به خاطر بسپارید : قواعد طراحی بسیار بیشتر از جوانب بصری یک محصول هستند.قواعد طراحی، دستورالعمل هایی هستند که به تیم طراحی کمک می کنند تا به اهداف تعیین شده برای محصول نهایی دست یابند.قواعد طراحی، انتخاب های ما را در فرآیند طراحی تعیین می کنند.زبان و هویت برندهویت برند Shopifyهویت برند باید در جهت استراتژی و اهداف برند تعریف شودAlla Kholmatova الگوهای ادراکی را طبق لیست زیر مشخص می کند:رنگهافونتهافضاهااشکالآیکونهاتصاویرانیمیشنهاآواهاولحنهاصداهاهمه این ها الفبای یک برند را شکل می دهند که تعیین این ها شروع خوبی در طراحی محسوب می شود ولی قطعا کافی نیست.ما از این الفبا برای ساختن کلمات استفاده می کنیم که بتوانیم با کنار هم قرار دادن درست این کلمات به یک جمله خوب برسیم. این الفبا به قواعد یا گرامر نیاز دارند که نقش یکپارچگی را در دیزاین سیستم ایفا می کند.دیزاین سیستم به وسیله دستورالعمل ها، بایدها و نبایدها و مثال های کاربردی که باعث می شوند تیم طراحی ترکیبات درستی را انتخاب کنند، به طرحی که برند را منحصر بفرد نشان دهد می رسیم.کامپوننت ها و پترن هاکامپوننت ها و پترن ها قلب سیستم طراحی هستند. تمام المان هایی که درباره آنها بحث کردیم در واقع به خلق این دو مورد کمک می کنند تا بتوانیم امکان داشتن یک تجربه خوب و مستمر از محصولمان ایجاد کنیم.کامپوننت های ما در واقع مانند قسمت های یک LEGO می باشند که در نرم افزارهای طراحی مانند اسکچ توسط طراحان استفاده می شوند و توسط برنامه نویسان مستقیما به کد تبدیل می شوند.عملکرد این کامپوننت ها باید مشخصا تعیین شود.پترن ها در واقع راهنمای استفاده منطقی از این کامپوننت ها هستند.در تصویر زیر کاملا مشخص است که یک کامپوننت با مستندات عملکردی و فنی مشخص می شود ، در حالی که یک پترن نکاتی درباره چگونگی استفاده از کامپوننت را نشان می هد.تفاوت Component و Pattern ایده دیزاین سیستم از کجا آمده است؟دیزاین سیستم با الهام از ساختار مولکولی مواد در سال ۲۰۱۳ توسط Brad Frost معرفی و Atomic Design نام گرفت.مفهوم Atomic Design اجزای صفحه را به بخش های مختلفی که کوچکترین آن اتم بود تقسیم میکرد.این بخش ها شامل ۵ سطح میشد که شامل موارد زیر است:اتم (Atoms)اتم ها کوچکترین اجزای صفحه می باشند که می تواند شامل دکمه ها ، برچسب ها (Label) ، اجزای فرم ها ، رنگ ها ، فونت ها و … باشد.مولکول (Molecules)مولکول متشکل از چندین اتم می باشد. به طور مثال ترکیب یک باکس متنی (Text Box) و یک دکمه (Button) می تواند باکس جستجو را بسازد که یک مولکول را تشکیل دهد که به آنها Component هم میگویند.ارگانیزم (Organisms)ارگانیزم ها متشکل از چندین مولکول مختلف یا همسان می باشند که یه بخش کلی و کاربردی از صفحه را تشکیل میدهند. همان طور که در صورت بالا میبینید ، منو از چندین مولکول ساخته شده است. به طور مثال ، بخش نمایش مطالب مرتبط که شامل چند مطلب است و هر مطلب یک مولکول است که خود از اتم هایی مثل نام مطلب ، تصویر مطلب تشکیل شده است.قالب (Templates)قالب ها از چندین ارگانیزم تشکیل شده است و ظاهر کلی رابطه کاربری ما را تشکیل میدهد.به طور مثال قرار گرفتن منو بالای سایت و محتوای مطلب و بخش مطالب مرتبط و دیدگاه ها که هر کدام یک ارگانیزم هستند ، قالب ما را شکل میدهد.صفحه (Pages)صفحات نمونه واقعی قالب ها می باشند که محتوای واقعی شامل متون و تصاویر و … در آن قرار گرفته است. ظاهری که از هر وب سایت یا اپلیکیشن موبایل میبینید مرحله آخر این روند یعنی صفحات میباشد.چه نوع دیزاین سیستمی مناسب است؟می توانیم بگوییم تقریبا به ازای هر تیم یا محصول یک دیزاین سیستم وجود دارد،برای تعریف سیستم مخصوص به خودمان باید یک سری سوالات را پاسخ دهیم:چند نفر قرار است از این سیستم استفاده کنند؟مشخصات این افراد و اینکه تا چه حد به موضوع اشراف دارند تعیین شودچند محصول قرار است یکپارچه شوند؟ روی چند پلتفرم؟ چه تکنولوژی استفاده میشود(Angular, React,...)؟تداوم این محصول راچگونه تعریف میکنیم؟سیستم قاعده مند و بی قاعدهAirbnb (بالا) و Ted (پایین) یک سیستم قاعده مند مستندات جامع و با جزئیات دارد. در این سیستم طراحان و برنامه نویسان بسیار یکپارچه هستند. یک فرآیند دقیق برای معرفی پترن های جدید وجود دارد. همچنین این سیستم باید بسیار گسترده باشد تا بتواند حجم زیاد حالاتی که تیم ممکن است با آن رو برو شود در بر بگیرد.یک سیستم بی قاعده فرصت زیادی برای آزمون و خطا ایجاد می کند. این سیستم یک فریمورک برای تیم ایجاد می کند اما در عین حال می توانند آزادی عمل هم داشته باشند. طراحان و برنامه نویسان در صورت تمایل با توجه به نوع نیاز کار خودشان از این سیستم استفاده می کنند.باید بتوانیم بین سخت گیری و انعطاف پذیری سیستم ها تعادل ایجاد کنیم. یک سیستم یه شدت قاعده مند ممکن است طراحان و برنامه نویسان را از استفاده از این سیستم بیزار کند در عین حال نمی توانیم به سیستمی که هیچ قاعده ای ندارد بگوییم سیستم!سیتم ماژولار یا یکپارچهیک سیستم ماژولار از بخش های مختلف که می توانند قابل تغییر یا قایل استفاده مجدد باشند تشکیل شده است. این سیستم برای پروژه هایی که نیاز به مقیاس پذیری سریع دارند یا باید با کاربران مختلف تطبیق داده شوند بسیار مناسب است. نکته منفی این سیستم ها این است که ممکن است گران تمام شوند زیرا ایجاد ماژول هایی که مستقل هستند اما باید به درستی کنار یکدیگر عمل کنند که کار راحتی نیست!این مدل سیستم ها در کاربردهایی با مقیاس بزرگ بسیار مناسب هستند از جمله سایت های تجارت الکترونیک، مالی و دولتی .در یک سیستم ماژولار ، مفهوم Atomic Design (طراحی اتمی) بسیار جذاب خواهد بود.یک سیستم یکپارچه بر یک موضوع منحصر بفرد تمرکز دارد. این سیستم از بخش های مختلفی تشکیل شده است اما این بخش ها قابل تغییر نیستند. این مدل سیستم ها برای محصولاتی که بخش های تکراری کمی دارند مناسب است و همینطور محصولاتی که مدام در حال تغییر هستند مثل کمپین های بازاریابی، پورتفولیوها و …سیستم متمرکز یا توزیعیخود سازمانی که از سیستم طراحی استفاده می کند در تکامل و مقیاس پذیری این سیستم نقش مهمی دارد. Nathan Curtis انواع مختلف سازمان ها را توضیح می دهد که در تصویر زیر ۲ مدل آورده شده است:در مدل متمرکز یک تیم به سیستم اختصاص داده می شود تا آن را بهبود دهد. این تیم برای تسهیل کار سایر تیم ها ایجاد می شود و در ارتباط نزدیکی با آنها قرار دارد تا اطمینان حاصل کند این سیستم نیازهایشان را تامین می کند.در مدل توزیعی، افرادی از تیم های مختلف روی سیستم کار می کنند. تطبیق سیستم در این مدل سریع تر است چرا که همه افراد با آن درگیر می شوند اما به یک رهبر نیاز دارند که چشم انداز کلی را حفظ کند.در هر کدوم از این مدل ها، پیشنهاد می شود همه افراد مشارکت داشته باشند و به بهبود سیستم کمک کنند تا حس مشارکت در همه افراد تیم به وجود بیاید.نمونه ای از دیزاین سیستم هاMaterial Design به خاطر سادگی در جستجو و ابزارهایی که در اختیار طراحان و برنامه نویسان قرار می دهدMaterial Design SystemAtlassian به خاطر کامل و جامع بودنشان (مثل Jira)Atlassian Design SystemPolaris از کمپانی Shopify ، به خاطر یکپارچگی که بین طراحان و برنامه نویسان ایجاد می کند.Polaris Design SystemIBM ، برای عملکرد فوق العادش در ایجاد زبان طراحیIBM Design Languageابزارهایی برای ساخت دیزاین سیستمبرای ساخت دیزاین سیستم هم ابزارهایی هستند که به طور خاص برای شما دیزاین سیستم میسازند و هم ابزارهایی هستند که در کنار کاربردی که دارند به شما امکان ساخت دیزاین سیستم را میدهند. بعضی از این ابزارها شامل لیست زیر است:Invision App در کنار Sketch و Adobe XD یکی از بهترین ابزارهای طراحی می باشد که برای ساخت دیزاین سیستم ابزاری جداگانه دارد.UX Pin هم مانند Invision App دارای یک دیزاین سیستم مجزا است که به راحتی میتوانید از آن استفاده کنید.Sketch یک اپ طراحی است که روی سیستم عامل مک قابل استفاده است و در کنار کاربرد خود این امکان را به شما میدهد که بتوانید دیزاین سیستم خود را طراحی کنید.Adobe XD هم این امکان را به شما میدهد که در کنار کاربرد خود ، بتوانید دیزاین سیستم خود را دستی طراحی و پیاده سازی کنید. Adobe XD بر خلاف Sketch روی ویندوز و مک قالب استفاده می باشد.Figma یک ابزار طراحی است که در کنار کاربرد خود به شما امکان طراحی دیزاین سیستم را می دهد. همچنین به دلیل اینکه فیگما کلود می باشد امکان استفاده روی ویندوز ، مک و خود بستر وب (مرورگر) را به شما میدهد.Lucid هم یک ابزار خوب برای ساخت دیزاین سیستم می باشد.Lingo یک ابزار بسیار خوب است که در کنار کاربردهایی که دارد امکان ساخت دیزاین سیستم و مدیریت آن را به شما می دهد.Atomize یک پکیج ساخته است که شامل تعداد زیادی کامپوننت است و یک دیزاین سیستم کامل برای پروژه شماست.نتیجه گیرییک سیستم طراحی، یک محصول کامل است که به اعضای تیم یک پروژه کمک می کند تا محصول دیگری را خلق کنند!همانند هر محصول خوب دیگری، این سیستم نیز به صورت مستمر در حال بهبود است و کاربران آن (طراحان، برنامه نویسان و…) همیشه هدف اصلی این بهبود خواهند بود.هرچه این سیستم با جریان کاری طراحان و برنامه نویسان همسو تر باشد، اثر بخشی بیشتری دارد.تمام آنچه گفته شد فقط یک شروع بود!در آینده نزدیک شاهد تحولات تکنیکی بسیاری برای راحت تر کردن زندگی خواهیم بود به نحوی که تمرکز طراحان فقط روی ایجاد یک تجربه خوب برای کاربران بدون داشتن دغدغه پیاده سازی باشد. آکادمی سرخ Pouriya Rezaie Tue, 18 Feb 2020 16:51:54 +0330 https://virgool.io/RedAcademy/designthinking-xcue1ersoucc انسان برای آرامش و رفاه در زندگی به دنبال بهبود محیط پیرامون و ساخت ابزار بوده است.هر آنچه در زندگی ساخته (از قاشق تا هواپیما) برای رفع نیازها و برطرف کردن مشکلاتش خلق کرده است.این یعنی طراحی! یعنی قدرت حل مساله... طراح براساس دریافت‌هایش از محیط پیرامون و حل مشکلات به بهبود زندگی کمک می‌کند.در این مطلب با تفکر طراحی، روش خلاقانه حل مساله‌ و درک و شناسایی آن‌ها آشنا می‌شویم، مسیری که هر طراحی برای ساخت و ایجاد محصول/سرویس در آن قدم برمی‌دارد.تفکر طراحی (Design Thinking)، روشی بر پایه شهود و استدلال است که خلاقیت را در جهت حل مساله پرورش می‌دهد و نتایج علمی و کاربردی ارائه می‌دهد.تفکر طراحی فرایندی پنج مرحله‌ای است.همدلی > تعریف مساله > ایده‌پردازی > نمونه‌سازی > آزمون ۱. همدلی (Empathize)اولین مرحله از فرآیند تفکر طراحی، دریافت درک همدلانه از مسئله‌ای است. تا زمانی که درک درستی از کاربر نداشته باشیم چگونه می‌توانیم راه‌حل مناسبی برای برطرف کردن مشکلاتش ارائه دهیم. نبود شناخت کافی از کاربر باعث می‌شود طراح، فرضیات و ذهنیت از پیش‌ساخته‌شده ناشی از تفکر غالب را با سوءبرداشت به عنوان مساله‌ درنظر بگیرد و به جستجوی راه‌حلی بگردد که با نتیجه بخش نیست.هرچند دانش، مهارت و تجربیات طراح ارزشمند است اما در این مرحله طراح باید به دور از پیش‌داوری و با ذهنی خالی و دیدی کنجکاو در جهت حل مشکل، برای شناخت و درک عمیق از الگوی رفتاری کاربر قدم برداریم.قدم اول، همدلی است- همراه شوید: با کاربران مصاحبه کنید و به گفتگو بنشینید. پرسش‌هایی را از قبل آماده کنید که آگاهی از آن‌ها شما را در جهت یافتن الگوهای رفتاری و مشکلات کاربر راهنمایی می‌کنند. اجازه دهید کاربر رفتارش را توضیح دهد. از سکوت و مکث‌های کاربر نترسید و کمی فاصله دهید تا آنچه در ذهنشان می‌گذرد آماده گفتن کنند. دلیل انجام توصیفاتشان را با «چرا؟» بپرسید تا بیشتر آنچه را در ذهنشان می‌گذرد توضیح دهند.- رفتار کاربر را در واقعیت زندگی مشاهده کنید: رفتار کاربر را در موقعیت انجام فعالیت با دقت زیر نظر داشته باشیم. گاهی تناقض‌هایی در گفتار و رفتار کاربر است.- آنچه را می‌بینیم و می‌شنویم ثبت کنیمدر روند مصاحبه دقت کنید:همراهی با کاربر، همزاد پنداری و درک مشکلات و نیازهای او هدف این مصاحبه است؛ پس مصاحبه را صمیمانه شروع کنیدسوالات خود را تا حد امکان کوتاه و ساده بپرسیدپرسش خود را با «معمولا / بیشتر» شروع نکنید پرسش‌ها نباید روی جوابی خاص، جهت‌گیری داشته باشندپاسخی برای پرسش القا نکنیدکاربر را به روایت کردن تشویق کنیدپرسش چراها برای درک دلیل یا ذهنیت کاربربه تناقض‌ها در گفتار و رفتار کاربر حساس باشیدبه نشانه‌های غیر گفتاری توجه کنیداز مکث و سکوت در حیت پاسخگویی به سوال نترسید، سراغ سوال بعدی نروید و اندکی مجال دهید از هر نفر به صورت جداگانه در فضای کافی و مناسب سوال بپرسیدآمادگی ثبت پاسخ‌ها را داشته باشید. از یک دفتر، ضبط‌صوت یا دوربین برای اینکار استفاده کنیدعلاوه بر کاربران دسته هدف، به سایر کاربران هم فرصت صحبت و شنیده شدن بدهیدگاهی لازم است فراتر از مصاحبه، مدتی با آن‌ها زندگی و معاشرت کنیم تا به درک درستی از شرایط و موقعیت‌شان برسیم. چه مواردی را ثبت کنیم؟نقشه همدلی شامل چهار بخش است که جمع‌آوری داده‌ها را راحت‌تر می‌کند.نقشه همدلی:چه می‌گوید؟چه می‌کند؟چه فکری می‌کند؟چه حسی دارد* دانلود نقشه همدلی: نمونه کامل این نسخه برای پرینت را می‌توانید از کانال تلگرامی من به رایگان دریافت کنید: t.me/arianxdesignتعریف مساله (define)هرآنچه در مورد مخاطبان فهمیده‌اید، جمع‌آوری و پردازش کنید. از داده‌های بدست آمده به دنبال نکات مشترک باشید و از روابط آنها الگویی بسازید که اساس آن نیاز و مشکل را تعریف می‌کند. بیانیه‌ای که اطلاعاتی را که در مورد مخاطبان جمع‌آوری کرده‌اید، خلاصه کرده و نیازهای آن‌ها را روشن می‌کند. راه‌حل یا راه‌حل‌های نهایی شما، بر مبنای این نقطه‌نظر شکل می‌گیرد.بیانیه‌ی تعریف مسئله، نباید به عنوان آرزو یا نیاز تعریف شود. مرحله‌ی تعریف مسئله، به طراحان کمک می‌کند ایده‌های بهتری در مورد خلق ویژگی‌ها، توابع و عناصری ارائه دهند که به حل مسئله منجر می‌شود؛ یا لااقل به کاربران اجازه می‌دهد مشکلات خود را حل کنند. ایده‌پردازی(Ideate) مرحله‌ی  سوم پروسه‌ی طراحی تفکر یعنی ایده‌پردازی، به آهستگی از تعریف مساله آغاز می‌شود. طراح در این مرحله با آگاهی از مشکل کاربرانش با سوال «چطور این مشکل را رفع کنم؟» به طرح ایده‌هایی برای پاسخ به سوال می‌رود.هدف از ایده پردازیقدم‌گذاشتن به فراسوی راه حل‌های بدیهی و درنتیجه گسترش توانایی‌‌های نوآوریمدیریت و کنترل‌کردن توانایی‌های همکاران و هم‌تیمی‌هابررسی و جستجوی زمینه‌های پنهان مسئلهایجاد تنوع و انعطاف‌پذیری در گزینه‌های نو‌آورانهدرنظر گرفتن راه‌حل‌های بدیهی، راهبری تیم و همکاران به فراسوی آن‌هااندیشیدن، فراسوی قالب‌های فکری رایجایده‌های ساده و بدیهی را از نظر دور نکنیدتوجه به خرد جمعی و هم‌اندیشی و همفکریطوفان‌فکری:یکی از روش‌های ایده‌پردازی برگزاری جلسات طوفان فکری است.قصه‌پردازی:قصه‌پردازی و سناریو سازی کمک می‌کند به تمامی جوانب به ایده‌ها بپردازید و آن را گسترش یا تصحیح کنید.از تمامی جهات کارایی ایده را به چالش بکشید و نقاط پنهان را کشف کنید.نمونه‌سازی(prototype)چرا نمونه‌/ مدل‌سازی:نمونه جهت ارتباط برقرارکردن طراحی و تولید می‌شود. هر آنچه یک ابزار (راهکار) را توضیح دهید نمی‌توان به اندازه یک نسخه قابل لمس و مشاهده با کاربر ارتباط برقرار کند. مهم است این نمونه نسخه‌ای ساده و ارزان ساخته شود تا در صورت عدم کارایی زمان و هزینه چندانی از دست نداده باشیم. آزمون(Test)از کاربر بخواهیم تا نمونه اولیه یا پروتوتایپ کار کند و تجربه‌اش را با ما مطرح کند و با سایر محصولات مشابه یا نمونه قبلی مقایسه کند.در نهایت نتایج آزمون را جمع‌بندی و طرح را بهبود دهیم.نشان دهیم، حرف نزنیمایده‌ها و راهکارها را مقایسه کنید و نتایج را بهبود دهید.اگر قبول داشته باشیم هیچ چیزی کامل نیست، پس در هر سطحی راهکار ما قابل بهبود است. تفکر طراحی پروسه‌ای خطی نیست و در هر مرحله و هر نسخه از راه‌حل امکان بهبود و تکرار فرایند می‌باشد.-------متشکرم که تا پایان این مطلب همراه بودینامیدوارم در تلاشم برای شرح مختصر «تفکر طراحی» که دنیای وسیعی داره موفق بوده باشم.با لایک، معرفی و اشتراک‌گذاری این مطلب به من انرژی می‌دین. همچنین نظرات دلگرم کننده و پیشنهاداتون موجب دلگرمی منه.با بوکمارک کردن، این پست را به‌عنوان یک راهنمای جیبی و دستورالعمل «تفکر طراحی» همیشه همراه داشته باشید. آشنایی با شما باعث افتخاره :) می‌تونین با من از طریق لینک زیر در ارتباط باشید:il.ink/arianآرین مقبلی | شهریور ۱۳۹۸ آکادمی سرخ آرین مقبلی Sun, 01 Sep 2019 09:12:48 +0430 https://virgool.io/RedAcademy/%D8%AA%D8%A7%D8%B1%DB%8C%D8%AE%DA%86%D9%87-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88-%D8%B3%DB%8C%D8%B1-%D8%AA%D8%AD%D9%88%D9%84-%D9%84%D9%88%DA%AF%D9%88%DB%8C-%D9%BE%DA%98%D9%88-vx4jmjgssjnb بارها تصاویری در مورد تغییرات برندینگ شرکت‌های بزرگ را در طول سالیان متوالی دیده‌ایم. اما دگرگونی لوگو و محصولات یک برند، کمتر بررسی و تحلیل شده است. در این مستند تلاش کردم با نگاهی تحلیلی بازطراحی‌های لوگوی شرکت خودروسازی پژو فرانسه را همراه با سیر بروزرسانی محصولاتش بررسی کنم. این مطلب با معرفی لوگوی جدید پژو در سال ۲۰۲۱ بروزرسانی شد.سال ۱۸۱۰ شرکت خانوادگی پژو توسط امیل پژو برای ساخت آسیاب‌های قهوه در شهر فرانش-کمته (Franche-Comté) تاسیس شد. اما آرماندو پژو (پسر امیل) در سال ۱۸۸۲ با تولید دوچرخه وارد صنعت حمل و نقل شد و کمی بعد در سال ۱۸۸۹ نخستین خودروی سه‌چرخش را تولید کرد.در تصویر زیر سیر تحول لوگوهای شرکت پژو را می‌توانید دنبال کنید.اما جالب‌تر از آن مشاهده نمایش لوگوها روی نمودار زمانی استسال‌های نخست فعالیت، لوگوی پژو از یک شیر طلایی روی تیر(پیکان) تشکیل شده بود. در این تصویر شیر (نماد قدرت) سوار بر تیر (نماد سرعت) است. فعالیت پژو در این دوره تولید دوچرخه بود و نمونه‌های یافت شده روی ستون فرمان دوچرخه نصب می‌شدند. نشان دوچرخه‌های پژو در این سال‌ها تغییرات جزئی در اجرا داشتند و تصویر شیر و پیکان در زوایای متفاوتی اجرا شده بود. در نوشتار (PEUGEOT) دست‌خطی تحریری بالای نشان استفاده می‌شد.سال ۱۸۸۹ اولین اتومبیل (۳چرخ) پژو وارد بازار شد. در این دوره (۱۸۹۰-۱۹۰۵) هنوز نماد شیر روی ماشین‌های پژو دیده نمی‌شد.بج‌های روی دوچرخه - تندیس شیر روی رادیاتور - نمونه‌ّای چاپیاز سال ۱۹۱۰ شیر طلایی‌رنگی با پس زمینه سرخ که تیری را بین پنجه و تخته سنگ گرفته و نعره می‌زند بر روی محصولات جدید مشاهده می‌شود. نوشتار پژو قدرتمند و ضخیم‌تر از گذشته شده و در پایین لوگو قرار می‌گیرد.سمت راست بج‌های دوچرخه که در طول زمان ساده‌ و ارزان‌تر ساخته‌شده وسط تصویر مجسمه‌ متعلق به سال ۱۹۲۷ است. این اثر ریخته‌گری شده روی پیچ رادیاتور خودرو قرار می‌گرفته و آذین‌دهنده محصولات نه‌چندان لوکس پژو بوده.تصاویر سمت چپ: نمونه‌های چاپی لوگو بصورت تک‌رنگ و رنگی مشاهده می‌کنید که در مجلات و روی محصولات مخصوصا دوچرخه‌های پژو استفاده می‌شد.مسکات شیر پژواز خصوصیات خودروهای پژو در طول این سال‌ها، استفاده از سردیس و مجسمه شیر روی محصولاتش بوده که در این راستا از هنرمندان مجسمه‌سازی نظیر Rene Baudichon بهره گرفته است. پژو همچنان علاقه‌مند به ساخت مجسمه‌های شیر است و به تازگی مجسمه‌ای بزرگ (به‌نام لئو) در نمایشگاه‌های سالیانه خودرو رو نمایی کرد.برای مشاهده مجسمه‌های پژو این مطلب را بخوانید.سال ۱۹۲۹ آغاز شکل‌گیری نام‌گذاری پژو به سبک کنونی‌اش می‌باشد. در این شیوه نامگذاری عدد اول بیانگر سایز و گنجایش خودروست و عدد بعد از ۰ ،بیانگر سلسله نسل خودرو است. برای مثال ۲۰۶ خودروی ۲نفره‌ی سایز کوچک پژوست و جدیدتر از نسخه (۲۰۵) است. و ۴۰۵ خودروی ۴نفره و قدیمی‌تر از ۴۰۶ است.عدد صفر در میان دو عدد تداعی کننده سوراخ هندل در وسط خودروست :)پژو تمامی نام‌های ۱۰۱ تا ۹۰۹ را ثبت‌تجاری کرد و باعث شد نامگذاری پورشه افسانه‌ای از ۹۰۱ به ۹۱۱ تغییر دهد.از سال ۱۹۳۶ تا ۱۹۴۸ لوگوی پژو در قابی به شکل سپر و با طرحی ساده‌شده‌ی شیر به رنگ آبی روی زمینه‌ی زرد مشاهده می‌شود. جالب اینکه از هر دو نوشتار سابق در نسخه‌های مختلف لوگو استفاده شده.شکل ظاهری خودروهای پژو در سال‌های ۱۹۳۰ - پژو ۳۰۲ (مدل ۱۹۳۶) و پژو ۲۰۲ (۱۹۳۸)سال ۱۹۴۸ لوگوی شیر طلایی که بر روی دو پای عقب ایستاده، بصورت رسمی و به عنوان لوگوی جهانی پژو ثبت و برای نخستین بار روی پژو ۲۰۳ نصب شد. نقش شیر و زمینه آبی با طرح شطرنجی در اصل برگرفته از پرچم و نشان نظامی فرانش کنته (Franche-Comté) زادگاه اصلی پژوست.پرچم و نشان فرانش‌کنتهلوگوی قرار گرفته روی پژو ۲۰۳ با شیر ایستاده به رنگ نقره‌ای و زمینه آبی یادآور لوگوی کنونی این شرکت خودروساز است.سال ۱۹۶۰ لوگوی جدید و متفاوتی از پژو (سر و یال شیری طلایی درحال غرش بر روی زمینه سیاه) رونمایی شد که علی‌رغم زیبایی چشم‌نواز و آینده‌نگرانه‌اش تنها ۵ سال عمر کرد و نمونه‌های زیادی از آن یافت نشده است.جذابیت این لوگو در سال‌های اخیر به قدری مورد توجه بوده که در نمایشگاه ژنو سال ۲۰۱۸ پژو این نشان را روی نمونه خودروی کانسپتش (Peugeot E-Legend Concept) که برگرفته از (1976 - Peugeot 504 coupe) بود قرار داد و از لوگوی رسمی کنونی‌ خودداری کرد.پژو E-Legend Concept در کنار پژو ۵۰۴ کوپهسال ۱۹۶۵ نمونه قبلی دستخوش تغییر شد و از طرحی با خطوط مورب و شکسته استفاده شد. این نمونه هم عمر کوتاهی داشت و تا حدود سال ۱۹۷۰ استفاده شد.سال ۱۹۶۵ شیر طلایی ایستاده روی دوپا با جزئیات و نمایش حجم بدنی لاغر اما عضلانی و یال‌وکوپال پریشان و زبانی مثل اژدها و چنگالی تیز به روی زمینه سیاه باز می‌گردد. سال ۱۹۷۰ شیر طلایی پژو عضلانی‌تر اما با جزئیات کمتر و با جنسی ارزان‌تر از گذشته روی ورودی هوای پژو نصب می‌شود.در طی این سال‌ها نشان تو خالی می‌شود و جزئیاتش را از دست می‌دهد. ممکن است در سال‌های گذشته خودروهای ۵۰۴ سال ۱۹۷۴ و ۴۰۵ را با این لوگوها در خیابان‌های ایران دیده‌اید.شاید باورکردنش سخت باشد اما لوگوی پیش رو طراحی سال ۱۹۹۸ است و برای ما ایرانی‌ها به واسطه تولید پژو ۲۰۶ و ۴۰۵(پرشیا) کاملا آشناست. پویایی و قدرت در عین سادگی عناصر اصلی این لوگو هستند که آن را به پختگی رسانده اند. طراحی محصولات پژو در این سال‌ها الهام گرفته از پوزه، چهره‌ و عضلات پیکر شیر است و لوگوی پژو در قابی قرار گرفته تا بینی شیر را به مخاطب القا کند.سال ۲۰۱۰ پژو تصمیم گرفت با تغییر و بروزرسانی سبک طراحی خودروهایش، نشان خود را نیز هماهنگ‌تر کند.بدین شکل نسخه جدید نشانش را از نظر فرمی ساده‌تر و یکپارچه‌تر از نسخه پیشین با دو رنگ کروم سیقل‌خورده و کروم مات معرفی کرد و خطوط منحنی و برش‌خورده آن با سبک طراحی جدید و خطوط بدنه محصولاتش هماهنگ شده.سال ۲۰۲۱ لوگوی جدید‌ پژو منتشر شد. همانطور که حدس می‌زدم برگرفته از لوگوی ۱۹۶۰ بصورت تک‌رنگ سیاه و سفید روی قابی با فرم سپر.لوگوی جدید پژو ۲۰۲۱ لوگوی جدید پژو نصب شده روی ۳۰۸ معرفی شده در سال ۲۰۲۱ لوگوی جدید پژو نصب شده روی ۳۰۸ معرفی شده در سال ۲۰۲۱ طراحی یک برند آشنا و منسجم نیازمند زمان زیادی است تا به پختگی کامل برسد.پژو از با سابقه‌ترین خودروسازان جهان است و با وجود تغییرات بسیار در فرم و شکل نشان و قاب‌هایش ، هویت خود را ثابت حفظ کرده و از یک سمبل واحد (شیر) استفاده می‌کند. از طرفی تغییرات زیاد لوگو شاید نشان دهنده زنده بودن برند و پویایی آن باشد اما مشکلاتی مثل تنوع بالای نمونه‌های طراحی شده در گذر زمان باعث کمرنگ‌شدن وحدت وجودی یک برند می‌شود. من را در شبکه‌های اجتماعی دنبال کنید:redl.ink/arian آکادمی سرخ آرین مقبلی Tue, 14 May 2019 10:26:42 +0430 https://virgool.io/RedAcademy/tejarat-dcvu3yzltigl این داستان شاید خیلی قدیمی باشه. اما قدیمی‌ترین نیست!داستان از اینجا شروع شد...اوایل سال۱۳۹۳ بود که پورتفولیوم رو به همراه یک پروپوزال برای تیم کندو (مارکت برنامه‌های اندرویدی) فرستادم تا شاید تونستیم باهم همکاری کنیم.خود کانسپتی که برای اپلیکیشن و سایت کندو طراحی کرده بودم در حد یک داستان جداگونه است. دوستان عصر دانش افزار منو برای همکاری دعوت کردند... اما نه سایت و اپ کندو!بلکه برای باز طراحی موبایل‌بانک تجارت :)مرحله اول: مطالعه محصولمتاسفانه تصاویر زیادی از نسخه قبلی اپ ندارم. اگر بخوام اپ رو توصیف کنم باید بگم از طیف و نور استفاده شده بود و در زمینه پترن ریزی داشت. رنگ‌ها با سلیقه انتخاب نشده بوند و از چند طیف رنگ آبی و فیروزه‌ای تشکیل شده بود که صفحه رو شلوغ می‌کرد.به عنوان یک اپ بانکی عملکرد هوشمندی نداشت. صفحه اول شبیه به دفترچه بانکی بود با یک جدول شلوغ. در منوی آن دسترسی به امکانات و سرویس‌های بانک قرار داشت و به سه بخش جمع‌شونده (بانک، برنامه‌ها و سایر) تقسیم می‌شدند!نسخه قبل از باز طراحی : صفحه اول و منوی کناریصفحه تنظیمات قبل و بعد از بازطراحیمرحله دوم: مطالعه رقبااون سال‌ها بهترین سرویس موبایل‌بانک در اختیار بانک سامان (سامانک) بود و بقیه موبایل‌بانک‌ها عملکرد جالبی نداشتند و از استاندارد‌های طراحی و زبان طراحی مشخصی بهره‌مند نبودند.اکثر موبایل‌بانک‌ها یک صفحه با آیکون‌های درشت بودند که با انتخاب هر یک وارد فرم طویلی می‌شدید که باید تمامی اطلاعات کارت شامل کد ۱۶ رقمی،تاریخ، کد CVV2 و رمز اینترنتی و سایر اطلاعات را پر می‌کردید تا عملیات بانکی انجام شود.ایده‌های اولیه:دوست داشتیم سرویس جدید هوشمند، ساده و دوست‌داشتنی باشد، نه مثل بانک‌های سنتی که کاربر را مجبور می‌کند هربار نوبت بگیرد، به باجه خود برود و فرم پرکند تا عملیات بانکی‌اش را انجام دهد!سرویس ما باید مثل یک دستیار و کارشناس اقتصادی همراه کاربر باشد و کارهایش را سریع‌تر انجام دهد.همه این حرف‌ها زیبا و راحته :)اما خط زدن کلیشه‌ها و رسیدن به موبایل‌بانک هوشمند و آرمانی ما به همین راحتی نبود. ساعت‌ها و روزها ایده‌ها رو روی کاغذ می‌کشیدم تا به بهترین و ساده‌ترین user-flow برسم. این سادگی باید در شاکله صفحات هم نمود پیدا می‌کرد. ساده‌گرایی، حذف هرچیز اضافه!دنیای اعداد و محاسبات به اندازه کافی پیچیده‌است که ذهن کاربر را با پتر‌ن‌ها و خطوط آشفته کنیم.آن زمان فونت یکان، بهترین انتخاب برای تایپوگرافی بود که می‌توانسیم استفاده کنیم.خوانایی و تشخیص سریع اعداد و آمار از مهم‌ترین اولویت‌های طراحی مخصوصاً برای یک سرویس در حوزه Fin-tech هست.منوی موبایل‌بانک تجارت پس از بازطراحی - طراح: آرین مقبلیطراحی آیکون:طراحی مجموعه آیکون‌ یکپارچه یکی دیگر از دستاوردهای طراحی این محصول بود که کمتر اتفاق می‌افتد. بدین منظور از رنگ‌های سازمانی بانک‌تجارت طراحی کردم. این آیکون‌ها برگرفته از آیکون‌های متریال بود و از سطوح رنگی آبی و فیروزه‌ای تشکیل شده بود.آیکون ست طراحی شده برای موبایل‌بانک تجارت : آرین مقبلیموبایل‌بانک تجارت، اولین و جامع‌ترین سرویس بانکی بود که به کاربر اجازه میداد تمامی کارت‌بانک‌ها و حساب‌هایش را در این سامانه ثبت و مدیریت کند.کافی بود کارت بانکی خود را تنها یک‌بار در سامانه ثبت کنید تا هربار نیاز نباشد اطلاعات کارت مبدا را وارد کنید. همچنین می‌توانستید کارت‌های مقصد را هم بصورت جداگانه ثبت کنید تا تراکنش را در سریع‌ترین مدت ممکن انجام دهید.نحوه نمایش رسید تراکنش موبایل‌بانک تجارتنحوه نمایش جزئيات تراکنش موبایل‌بانک تجارتآرشیو چک‌های پرداختی موبایل‌بانک تجارتسیستم مدیریت چک یکی دیگر از جذابیت‌های این موبایل‌بانک بود. متاسفانه در بسیاری از موارد محدودیت‌های زیرساخت فنی بانک مانع پیاده‌سازی و اجرای ایده‌هامون می‌شد. برای مثال دوست داشتیم بصورت خودکار از وضعیت چک‌ها باخبر شویم و قسط‌ها را بصورت خودکار پرداخت کنیم.مدیریت حساب و کارت‌های بانکی در موبایل‌بانک تجارت این پایان داستان همکاری من با مجموعه عصر دانش‌افزار نبود!سال ۹۴ دوباره با من تماس گرفتند. موضوع، طراحی رابط‌کاربری و تجربه‌کاربری یک پلتفرم بانکی برای بانک قرض‌الحسنه مهر ایران و بانک سینا بود.هم استانداردها تغییر کرده بود و هم سلیقه من. برای حقیقت بخشیدن رویاهامون هم دستمون بازتر بود.چهارچوب کلی رو از بانک تجارت قرض گرفتیم اما تغییرات زیادی در طراحی اعمال کردم تا دسترسی‌ها ساده‌تر و سریع‌تر از پیش باشد.این‌بار از فونت زیبای ایران-سنس استفاده کردیم تا هم امکان استفاده از وزن‌های بیشتر رو داشته باشیم و هم در خوانایی، بهترین تجربه رو در اختیار کاربر بذاریم.منوی کناری رو حذف کردم و هر چه لازم بود در صفحات نمایش دادیم.کاربر مثل سابق می‌توانست کارت و شماره حساب خود را وارد و آنها را مدیریت کند.عدد تراکنش‌ها رو بزرگتر و مشخص‌تر، سمت چپ نمایش دادم تا سریع‌تر پیدا شوند. واریزی‌ها به رنگ سبز نمایش داده می‌شد تا هم بین پرداختی‌ها فاصله ایجاد کنند و هم مشخص باشند.فقط برای دکمه‌ها و اکشن‌ها آیکون گذاشتم تا فرم دکمه‌ها از توضیحات جدا شوند.از بسته آیکون‌های خطی وکتور استفاده کردم تا علاوه بر جذابیت بصری، به شناسایی و تشخیص کاربردشان سهولت بدهم.استفاده از آمار و تجربه کاربران موبایل‌بانک تجارت کمک می‌کرد تا نسخه جدید را کاربردی‌تر از قبل طراحی کنم.موجودی و گردش‌حساب موبایل‌بانک قرض‌الحسنه مهر و بانک سینادر این نسخه جدید، با دسترسی به لیست مخاطبان می‌توانستید لیستی از افرادی که با آن‌ها مبادلات مالی دارید، ایجاد کنید. افراد خانواده، دوستان و همکاران یا حتی کارمندان شرکت می‌توانستند در لیست مخاطبان شما قرار بگیرند. شما می‌توانید کاربرانی که یک یا چند کارت بانکی یا حساب دارند را با تصویر در لیست خود قرار دهید و تاریخچه تراکنش‌های خود را دنبال کنید.حتی می‌توانید برای هر کدام از آنها به‌صورت خودکار، مستمری دهید. این می‌تواند پول تو جیبی هفتگی فرزند شما باشد، حقوق ماهانه کارمندان شما یا حتی پرداخت قسط وام یا اجاره‌خانه که بصورت خودکار و برنامه‌ریزی شده پرداخت می‌شود.سیستم انتقال وجه هم تغییرات مختصری کرد.در موبایل‌بانک تجارت کارت مبدا بصورت پیشفرض انتخاب بود و کاربر می‌توانست آن را تغییر دهد، سپس مبلغ و بعد از آن کارت یا حساب مقصد را از لیست بازشونده انتخاب یا وارد می‌کرد.اما در این سامانه جدید اولویت با مبلغ بود، سپس شماره کارت فرد جدید را وارد کند یا از لیست کاربران پرمخاطب انتخاب کند. لیست کاربران پر مخاطب بصورت هوشمند چیده می‌شود. مثلا اگر کاربر در فاصله زمانی معین برای «محمد سنایی» مبلغی را واریز می‌کند در همان فاصله زمانی، پیشنهاد می‌شود.صفحه انتقال وجه بانک مهر و سیناهمچنین کاربر می‌توان از میان کارت‌های و حساب‌های مخاطب یکی را به عنوان کارت پیش‌فرض انتخاب کند یا هنگام پرداخت آن را تغییر دهد و حتی شماره جدیدی به مخاطب اختصاص دهد.جزيیات لیست مخاطب و شماره‌کارت و حساب‌هاسپس کارت یا حسابی که در آن موجودی کافی دارد انتخاب و با ثبت رمز اینترنتی، عملیات پرداخت را نهایی کند.همه چیز به همین راحتی انجام می‌شود و رسید تراکنش صادر می‌شود. کاربر می‌تواند روی هر رسیدی یادداشت منتشر کند و آنها را به اشتراک گذارد.خطای انجام تراکنش یکی از بدترین صفحاتی است که کاربر با اون مواجه می‌شه. در بسیاری از سرویس‌های مشابه، طراحی این صفحه با اخطار و دکمه تلاش مجدد یا پیگیری رها می‌شه.اما در سرویسی که طراحی کردم علاوه بر خطا و دلیل احتمالی آن به راهکارهای رفع خطا هم اشاره شد و در نهایت شماره تماس با پشتیبانی درج شده. این‌ها کمک می‌کند تا کاربر نگرانی کمتری در هنگام مواجهه با این صفحه داشته باشد.خطای انجام تراکنش در موبایل‌بانک مهربانک قرض‌الحسنه مهر ایران از بانک‌های اعطا کننده وام و تسهیلات ازدواج هست بنابر این یکی از قابلیت‌ها مهم آن پرداخت خودکار پرداخت وام بود. همچنین کاربر می‌تواند در این سیستم همه پرداختی‌ها را در قالب یادآور در تقویم ثبت و بصورت خودکار از حساب پرداخت کند.مدیریت چکصفحه نیکوکاری/حمایت موبایل‌بانکهر طرحی عمری دارد... بهترین کاری که امروز انجام می‌دهیم شاید یک‌سال دیگر قدیمی و کهنه به نظر برسه. فاصله طراحی موبایل‌بانک تجارت و بانک قرض‌الحسنه مهر ایران شاید تنها یک‌سال‌ونیم - دو سال باشد ولی تغییراتی که برای ایجاد تجربه بهتر روی آن اعمال شد بسیار محسوس بود.ممنون که این پست رو تا انتها خوندین.با ارسال نظر و لایک انرژی بدین تا بیشتر از تجربه‌ها و داستان‌های طراحی بگم :)خوشحال میشم من رو در شبکه‌های اجتماعی دنبال کنید:اینستاگرامدریبلتوییتر آکادمی سرخ آرین مقبلی Mon, 03 Dec 2018 09:38:40 +0330 https://virgool.io/RedAcademy/assymetric-kazno4ucqgox این مطلب در مورد خودروهایی با طراحی نامتقارن هست.خودروهایی که شاید احمق و زشت و خنگ به‌نظر برسند. عجیب و متفاوت مثل بیگانه‌هایی که از سیاره‌ای دیگر پا روی آسفالت داغ گذاشته‌اند.در ادامه نگاهی می‌اندازیم به نمونه‌های مطرح و دلیل طراحی‌ غیرعادی نامتقارنشون رو بررسی می‌کنیم؟ خلاقیت، نوآوری یا افراط در نوشیدنی‌های الکلی؟! :)این کانسپت BMW X-Coupé طراحی سال ۲۰۰۱ هست.نگاه کنید ...خطوط منحصر‌بفردی داره. برای سال ۲۰۰۱ همینم به تنهایی قابل ستایش بود. BMW X-Coupé : 2001BMW X-Coupé : 2001تا اینجا همه چیز عادی بود. ولی نه! وقتی از نمای جانبی به دوطرف خودرو نگاه می‌کنیم انگار با دوتا خودروی متفاوت روبرو شدیم. در یکی ستون c حذف شده و در نمای دوم این ستون وجود داره. مگه میشه؟!یکم عجیبه. نه؟ صادقانه بگم... اول به چشمای خودم شک کردم... ولی نه! یه چیزی درست نبود!BMW X-Coupé : 2001BMW X-Coupé : 2001BMW X-Coupé : 2001البته این پایان ماجرا نیست!سال ۲۰۰۶ با الهام از اسطوره رالی در سال 1939 - BMW 328 Mille Miglia نمونه کانسپت کوپه‌ای طراحی شد که خطوطش چشم‌هاتون رو نوازش میده.BMW Mille Miglia coupe concept : 2006یکی از جذابیت‌های این نمونه کانسپ ابهام در تشخیص چراغ‌های هدلایت خودروست. در یک نگاه چراغ‌های گرد را به عنوان چراغ‌های اصلی می‌بینید و شباهتش با نسخه قدیمی را یادآور می‌شوید.در نگاهی دیگر چراغ‌های باریک، ظریف و خشن امروزی‌اش را پیدا می‌کنید.BMW Mille Miglia coupe concept : 20061939 - BMW 328 Mille Miglia1939 - BMW 328 Mille Miglia1939 - BMW 328 Mille MigliaBMW Mille Miglia coupe concept : 2006BMW Mille Miglia coupe concept : 2006خب این که همه چیزش متقارنه!بیاین یه چرخی دورش بزنیمBMW Mille Miglia coupe concept : 2006BMW Mille Miglia coupe concept : 2006این خط سرخ مورب پشت ماشین همون چراغ خطر هست. اینجاست که باید قبول کنید نبود تقارن هم می‌تونه زیبا باشه!بی‌ام‌دبلیو فلسفه طراحی خودروهای نامتقارنش رو ادامه میده. خودروی Vision ConnectedDrive Roadster Concept از دیگر خودروهای متفاوت این خودروساز است که در نمایشگاه خودروی ژنو رونمایی شد.BMW Vision ConnectedDrive Roadster ConceptBMW Vision ConnectedDrive Roadster ConceptBMW Vision ConnectedDrive Roadster Concept کریس بنگل سرطراح سابق ‌BMW یکی از نوابغ طراحی خودرو است که بی‌شک صنعت خودروسازی مدیون دیدگاه او در طراحی‌است. او معتقد است خودروها صرف نظر از اینکه آن‌ها را برانیم، کالاهایی عاطفی هستند. ما خودروها را بیشتر به خاطر احساسی که به ما می‌دهند می‌خریم. اگر خودروها از نظر بصری جذاب نباشند همه‌ی ما صرفاً جعبه‌های چهارچرخ را می‌رانیم. خودرو کت‌وشلوار نیست! اتومبیل‌ شما نماد خود شماست... آنها اندیشه، احساسات و ایده‌های شما را بازتاب می‌دهند. کریس بنگل، خودرو را مجسمه‌های دنیای روزمره می‌داند و طراح خودرو را مجسمه ساز. شاید فکر کنید نوآوری و خلاقیت در دگرگون کردن طراحی خودرو تنها مختص به ‌BMW باشه :) اما نه... اشتباه می‌کنید!نیم‌قرن قبل از اینکه کریس بنگل سرطراح BMW برای خرق‌عادت و دوری از تکرار، خودرو‌های نامتقارنش را طراحی کند، کارلو مولینو (carlo Mollino) خودروی Bisiluro را برای رقابت‌ در مسابقات استقامت ۲۴ ساعته لمانز (1955: Le Mans 24-hour) طراحی می‌کرد که اولین تلاش‌‌ها برای ایجاد زبان طراحی نامتقارن طراحی خودرو محسوب می‌شود.BisiluroBisiluroBisiluroهمیشه هدف از طراحی چنین ظاهرهای متفاوتی زیبایی نبوده. نحوه قرارگیری موتور در بدنه و تقسیم وزن خودرو یکی از مهمترین دلایل فنی طراحی این خودروهاست. طراحی خودرو تحت تاثیر هواپیما‌های جنگ جهانی دوم مثل بدنه دو تکه هواپیمای (Fokker M.9) طراحی شده. همچنین کابین خودرو قرارگرفتن در یک جنگنده را به راننده القا کرده و لذت رانندگی را دوچندان می‌‌کند.این‌خودرو بعدها الهام بخش خودروهای مسابقه‌ای بعد خود شد.1955 Jaguar D-Type1955 Jaguar D-Typeو همچنان داستان ادامه داستان ادامه دارهPlymouth XNRPlymouth XNR : 1960این خودروی زیبا Plymouth XNR هست و سال ۱۹۶۰ طراحی شدهاجازه بدین من چیزی نگم. طراحی مینیمال و فرم‌های استفاده شده در این خودرو به اندازه کافی آینده نگرانه است که با طرح‌ کانسپت‌های امروزی اشتباه گرفته بشه.این خودرو برای دو نفر طراحی شده اما اگر قصد دارید تنهایی به جاده بزنید کافی‌است پوشش روی صندلی سرنشین همراه را بپوشانید.Plymouth XNR : 1960Plymouth XNR : 1960طراحی کمپانی DS در حالت عادی یادآور آثار هنری سالوادور دالی و سبک سورئال هست در نمایشگاه پاریس از کانسپت اسپرتش که چشم‌انداز طراحی خودروها در سال ۲۰۳۵ است یعنی X E-Tense رونمایی کرد. لازم به توضیح نیست... این نمونه هم ساختاری کاملا نامتقارن دارد و یک خودرو با دو موتور الکتریکی است. هرچند این خودرو برای دو نفر طراحی شده اما کابین خودرو کاملا از هم جدا شده. میشه حدس زد ترکیب‌بندی خودرو بیشتر جهت القای حس رانندگی تکی با یک موشک است تا اهداف فنی و تقسم‌ وزن خودرو.شاید نمای خودرو چشم‌هاتون رو مورد عنایت قرار بده ولی احتمالا نشستن پشت فرمان این خودرو لذتی از رانندگی براتون فراهم کنه که هیچوقت تجربه نکردین.DS X E-TenseDS X E-TenseDS X E-TenseDS X E-Tenseما عادت می‌کنیم! به هرآنچه خودمان ساختیم...سال‌هاست تکرار می‌کنیم و به تکرار آن عادت می‌کنیم، تا جایی که مثل یک قانون غیرقابل تغییر آن‌ها را باور می‌کنیم.گاهی باید کسی پیدا بشه که باورهامون رو خط‌خطی کنه. ما رو از همون جعبه‌ای که خودمون ساختیم بیرون بیاره.گاهی باید عادت‌ها رو زیر پا بذاری و فکر کنی؛ بلندتر از دیوارهای جعبه‌ای که خودت ساختی.تقارن یکی از همین قانون‌هاست. زیباست... اما لزوما همیشه بهترین نیست!ممکنه یک اثر گرافیکی، یک مجسمه، یک ظرف یا حتی یک خودرو متقارن نباشه اما متعادل باشه...و زیبا... آدم‌های دیوانه، شاید فقط دنیا رو از زاویه دیگه‌ای نگاه می‌کنن!1955 Mercedes-Benz 300 SLR Roadsterممنون که این پست رو تا انتها خوندین.شما چه ماشین‌های نامتقارن و عجیبی می‌شناسین؟ میتونین اون‌ها رو در دیدگاه‌ها به اشتراک بذارید.اگر این مطلب براتون مفید بوده؛ لایکش کنید تا به افراد بیشتری پیشنهاد بشه.خوشحال میشم من رو در شبکه‌های اجتماعی دنبال کنید:اینستاگرامدریبلتوییتر#خودرو #هنر #گرافیک #طراحی #طراح #ایده #BMW #Design #assymetricمنابع:آرشیو شخصیnetcarshow.comdailyicon.net/2011/page/8 آکادمی سرخ آرین مقبلی Sun, 04 Nov 2018 10:11:40 +0330 https://virgool.io/RedAcademy/filimo-hydemmdki4af همه ما نشان‌های تجاری شرکت‌های بزرگ رو بارها روی محصولاتشون می‌بینیم و تبلیغات روی بسته‌بندی‌، سایت و بیلبورد‌ها دنبال می‌کنیم اما روند طراحی و داستان بسیاریشون رو نمی‌دونیم.این پست داستان روند طراحی لوگوی فیلیموست که حتی بسیاری از همکاران من در صباایده نشنیده‌اند و برای اولین‌بار منتشر می‌شه :)سلام!من تازه توی تیم فنی صباایده شروع به کار کرده بودم تا طراحی رابط‌کاربری سایت و نرم‌افزارهای اندروید و iOS سرویس جدید مجموعه که به نوعی برادر کوچکتر آپارات بود رو طراحی کنم.فیلیمو سرویس VOD (Video on demand) است. آرشیوی از هزاران فیلم و سریال ایرانی و خارجی بر بستر اینترنت. (برای آشنایی بیشتر با فیلیمو بخوانید)زمانی که من کار رو شروع کردم نسخه بتای آپارات فیلیمو منتشر شده بود (گزارش دیجیاتو از نسخه بتای فیلیمو)برای فیلیمو، لوگویی طراحی شده بود که از نظر بصری پیچیده و ناهماهنگ بود و رنگ مناسبی برای ارائه در وب نداشت. پس با سرپرستم هماهنگ شدم تا پیشنهادم رو در رابطه با لوگو مطرح کنم.مودبورد (Mood-Board)معمولا همه چیز از خط‌خطی‌ها و اتودها روی کاغذ شروع میشه اما من عادت دارم قبل از اینکه ایده‌هام رو روی کاغذ طراحی کنم یک مودبورد (Mood Board) بسازم و هر چیزی که به شکلی با حس‌وحال موضوع طراحی میتونه در رابطه باشه رو یکجا جمع کنم. این روش برای اینکه حجم پراکنده ایده‌ها و عناصر الهام‌بخش رو سامان بدین عالیه. تصاویر، کلمات، رنگ‌ها و هرچیز دیگه‌ای که با مفهوم نشانه در ارتباط بود رو کنار هم جمع‌آوری کردم.مثلا پیام تبلیغاتی (slogan) فیلیمو: «بی‌نهایت آرشیو فیلم» که کمی بعد به «بی‌وقفه فیلم ببینید» تغییر کرد.بی‌نهایت مفهومی انتزاعی است که در رشته‌های ریاضی به‌معنای «فراتر از هر مقدار» است و برای توصیف مقادیر بیش از هر عدد یا غیرقابل اندازه‌گیری به کار می‌رود. نشانهٔ بی‌نهایت در ریاضیات ∞ است. به تصویر کشیدن مفهوم «بی‌نهایت» من رو یاد آثار موریس اشر (morris escher) هنرمند هلندی انداخت. ویژگی آثار هنری موریس اشر، استفاده از هندسه و علم ریاضی در کنار ترکیب‌بندی حاصل از خطای بصری و تکرار برای تداعی کردن مفهوم بی‌نهایت و سازه‌های غیرممکن بود.مودبرد فیلیمو: بخشی از آثار موریس اشر نوار موبیوس حلقه‌ای است که توسط ریاضیدان آلمانی به نام آگوست فردینانند موبیوس () کشف و ثبت شد. این حلقه یادآور همان مفهوم بی‌نهایتی است که در آثار اشر دیدیم.نوار موبیوس | Mobius stringنوار موبیوس نواری است که دو لبه آن بر هم قرار گرفته و حلقه‌ای را بوجود می‌آورد. البته باید یک لبه انتهایی قبل از اتصال به لبه دیگر نیم دور چرخانده شود. می‌توان بین هر دو نقطه از سطح این نوار، بدون قطع کردن لبهٔ آن، خط ممتدی کشید.تصاویر حلقه فیلم، سینماتوگراف و هرآنچه که در تاریخ سینما که می‌توانست برای طراحی لوگوی فیلیمو تداعی کننده و الهام بخش باشه هم بخش دیگری از محتوای پوشه من بود.جستجو در دنیای واقعی:آشنایی و مطالعه سرویس‌های مشابه خارجی(نت‌فلیکس) یا داخلی(فیلم‌نت) نقاط مثبت و ضعفشون رو مشخص می‌کنه.در همین مطالعات و کنجکاوی‌ها بود که متوجه شباهت لوگوی فیلم‌نت با F-Secure شدم :)))خط‌خطی‌های آشفتهاولین خطوط بر اساس همان مثلث پخش (PLAY icon) در ترکیب با حلقه فیلم و سینماتوگراف و... اما در نهایت، ترکیب حلقه موبیوس و آیکون پلی لوگوی نهایی رو شکل داد.نمونه پیش‌طرح‌های لوگوی فیلیموپالت رنگی فیلیمورنگ یکی از عوامل موثر در شکل‌گیری نشانه است و تاثیرات مستقیمی بر روی ذهنی مخاطب می‌گذارد.رنگ لوگو فیلیمو در نسخه بتا برپایه لوگوی آپارات شکل گرفته بود و قرمز بود. کمی بعد زرد شد و در آخرین پیشنهاد بنا بود طلایی باشه!طلایی؟! جدای از بحث روانشناسی رنگ‌ها که طلایی رو رنگی تجملاتی معرفی می‌کنه. نمایش دادن رنگ طلایی در مانیتور دست‌و پاگیر بود و عملا نمی‌شد به عنوان رنگ سازمانی در طراحی رابط‌کاربری به راحتی استفاده بشه. بنابراین در کنار اتودهای طلایی در سه حالت تخت و طیف‌دار، رنگ نارنجی رو هم پیشنهاد دادم و خوشبختانه تایید شد. پیشنهاد پالت رنگی فیلیمو - طلایی در کنار زردنارنجیروانشناسی رنگ:رنگ نارنجی انرژی و قدرت رنگ قرمز را همراه با شادی رنگ زرد همراه دارد. بنابراین با شادی ، تابش خورشید و گرما همراه است. نارنجی نمایانگر غیرت و جدیت، شیدایی و شیفتگی، شادی، خلاقیت و سازندگی، اراده و نیت ، جذابیت، موفقیت و شجاعت می باشد.رنگ نارنجی بر روی روحیه تاثیر مثبت می‌گذارد و القا کننده‌ی اثرات نیروبخش در انسان است. برای همین برای تبلیغات حوزه سرگرمی، تفریح و ورزش استفاده می‌شود و میان جوانان بیشترین مخاطب را دارد.پالت رنگی فیلیمو | FILIMO Color Paletteیکی از ابزارهایی که همیشه برای انتخاب پالت رنگی ازش استفاده می‌کنم سایت colourlovers هست. نمونه ای از یکی پالت‌های رنگی رو انتخاب کردم و پرامتیازترین رنگ نارنجی رو با کد رنگ (#FFC23B) به عنوان رنگ اصلی انتخاب کردم. و برای القای حس چرخش در لوگو بصورت پلکانی از نارنجی‌ به سمت قرمز حرکت کردم.اجرای نهایی، رازهای پنهاناتودها تنها طراحی میشن تا کلیت و مفهوم رو برسونن. اما عملکرد بی‌نقص در اجرا بحث جداگانه‌ای هست که نیازمند آشنایی با قوانین علم گرافیک هست.یک نشانه خوب جدا از القای مفهوم هماهنگ با سازمان، نیازمند یک اجرای قانونمند است.تمام تلاش یک گرافیست در این مرحله ایجاد رابطه‌ای پنهانی میان خطوط و بردارهای سازنده‌ی اثر با چشمان و مغر مخاطبان است.من عاشق نسبت‌ها هستم. رازهای پنهانی که در اولین نگاه دیده نمی‌شوند اما مکالمه‌ای پنهانی با مخاطب برقرار می‌کنند که نتیجه آن هماهنگی و آن‌چیزی است که بهش میگیم زیبایی!نسبت‌های پنهان در لوگوی فیلیموهمین بردارها، نسبت‌ها و خطوط نامرئی هستن که گفتگوی بین چشم و مغز رو منظم می‌کنند تا تصویری دقیق از اثر در ذهن مخاطب ثبت بشه.تناسبات لوگوی فیلیمو | FILIMO Logo Gridsطراح گرافیک در طول مدت طراحی اتود‌ها باید تمامی نکات رو در نظر بگیره و پتانسیل لوگو در هر شرایط رو بررسی کنه.تایپوگرافیاتودهای تایپوگرافی فارسی فیلیمو | FILIMO Typographyدفترچه برندهر برندی باید کاتالوگ نحوه استفاده داشته باشه تا سایر طراحان و حتی آژانس‌های تبلیغاتی نحوه صحیح استفاده از اثر رو در شرایط مختلف بدانند. این مجموعه قوانین در دفترچه‌برند (Brand Book) ثبت میشه و در اختیار شرکت‌های همکار و طراحان مجموعه قرار می‌گیره.در این دفتر تمامی بایدها و نبایدهای لوگو شرح داده میشه. رنگبندی اثر روی زمینه‌های مختلف، فاصله تایپوگرافی از لوگو بصورت عمودی یا افقی و نسبت فاصله لوگو در کنار لوگوهای دیگر و...لوگو باید در ابعاد کوچک مشخص و خوانا باشه. مثلا در مورد فیلیمو برای ابعاد کوچک و تک‌رنگ، لوگوی متفاوتی طراحی کردیم تا در هر شرایطی مشخص باشه.بخشی از برندبوک فیلیمو | لوگوی فارسی روی زمینه سفید و سیاهطراحی آیکونفیلیمو یک سرویس اینترنتی است که باید آیکونش برای زبان طراحی اندروید و iOS در ابعاد مختلف و هر رزولوشنی به خوبی در میان ده‌ها نسخه اپلیکیشن پیدا بشه.ممنون که تا انتهای این داستان با من بودیننظر شما در مورد طراحی لوگوی فیلیمو چیه؟ خوشحال میشم نظرتون رو در این‌باره بشنوم :)اگر شما هم گرافیست هستین میتونین با همین تگ، #داستان_طراحی خودتون رو تعریف کنید.اگر این مطلب براتون مفید بوده؛ لایکش کنید تا به افراد بیشتری پیشنهاد بشه.خوشحال میشم من رو در شبکه‌های اجتماعی دنبال کنید:اینستاگرامدریبلتوییتر آکادمی سرخ آرین مقبلی Sat, 31 Mar 2018 21:54:47 +0430