طراحی دکمه بر اساس دنیای واقعی

من این مقاله رو ۳ روز پیش تو مدیوم نوشته بودم و راستشو بخواین خیلی فارسی، انگلیسی نوشتم. برای همین به راحتی می‌تونین بخونینش و متوجه بشین حتی چک کردم تو Google translate هم کپیش کنین درست ترجمه می‌کنه.

بعد از این، منو بیشتر تو مدیوم خواهید دید.

من کنت مولاه فهذا مدیوم مولاه :دی

پس خوشحال می‌شم که اونجا هم ببینمتون.

تو این مقاله توضیح دادم که چطور می‌تونیم بر اساس الهام از دنیای واقعی دکمه‌هایی بسازیم که کاربر وقتی داره باهاش تعامل برقرار می‌کنه احساس کلیک کردن و فشار دادن دکمه رو داشته باشه. قبل از اینکه جلوتر بریم بهتر اینه که خودتون با این دکمه تعامل برقرار کنین تا منظورمو متوجه بشین. کد خروجی رو می‌تونین تو Codepen من ببینین.

قبلا در مقاله‌ی کوتاه در مورد Heuristic Evaluation در مورد قانون هماهنگی سیستم با جهان واقعی - Match between system and the real world اینجور گفته بودم:

سیستم باید با زبان کاربر صحبت کند. با کلمات و مفاهیمی که کاربر با آنها آشناست. از آیتم‌های رایج استفاده کند. اطلاعات را به نحوی ارائه کند که با Mental Model افراد هم‌خوانی داشته باشد. از آیکون‌ها و تصاویری استفاده کند که تا حد امکان شبیه اشیا دنیای واقعی باشد.

دکمه چند حالت مختلف داره که بهتره برای همه‌ی این حالات از دنیای واقعی الهام بگیریم. مثلا به تجربه دیدیم که دکمه‌های واقعی، اینجوریه که از سطح زده بیرون و به خاطر این بیرون‌زدگی سایه داره.

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

در نتیجه بهتره که از چند سایه استفاده کنین. تو مقاله مدیوم لینک پلاگین فیگما مناسب این کار رو دادم.

از طرفی وقتی دستمون رو می‌بریم رو دکمه، عمل متناظرش در کامپیوتر hover کردنه. این کار باعث می‌شه سایه‌ی دستمون، دکمه رو کمی تیره‌تر می‌کنه. پس بهتره رنگ هاور دکمه از shade همون رنگ استفاده بشه.

اگر نمی‌دونین shade چیه بهتره ویدئوی تئوری‌ چرخه رنگ برای انتخاب پلت رنگی رابط کاربری رو تو یوتیوب ببینین.

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

همه‌ی اینها تو Codepen موجوده و پیشنهادم اینه که امتحان کنین که ببینین آیا حس واقعی بودن از دکمه می‌گیرین یا نه.

مقاله‌ی اصلی اینجا تموم نمی‌شه و ادامه داره برای همین بهتر اینه که بقیش رو تو مدیوم بخونین.

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

همچنین اگر بتونین تو Producthunt از این ایده حمایت کنین کمک بزرگی به من کردین و حتما در مورد تجربه‌ی حضور در producthunt براتون می‌نویسم.

ممنونم.