طراحی اپلیکیشن خانه هوشمند: بازطراحی صفحه اصلی، قبل و بعد
صفحه اصلی یک اپ خانه هوشمند که شبیه صفحه تنظیمات است و همان صفحه پس از اصلاح: اتاق و آنچه روشن است در یک خط، تبهای اتاق قابل سوایپ، کاشی‌های عریض دستگاه و پیل‌های واقعی صحنه. تک‌تک تغییرها کنار هم، همراه با فایل رایگان Figma.
صفحه اصلی یک اپ خانه هوشمند فقط یک کار دارد: نشان بدهد در کدام اتاق هستید و اجازه بدهد با یک تپ چیزی را که روشن است تغییر دهید. پیش‌نویس اول زیر همه کنترل‌ها را دارد، اما هشت ردیف کاملاً یکسان با خط‌های وضعیت ریز نشان می‌دهد، اتاقها را در متن زیرخطدار پنهان می‌کند و صحنهها را آخر سر به شکل شش دکمه کوچک می‌گذارد. شبیه صفحه تنظیمات است، پس استفاده از آن حس پیکربندی می‌دهد، نه حس زندگی.
اصلاح، همه عملکردها را نگه می‌دارد و فقط شیوه نمایش را عوض می‌کند. اول اتاق می‌آید، دستگاه‌ها به کاشی‌هایی تبدیل می‌شوند که وقتی روشن‌اند می‌درخشند، و صحنهها پیلهایی می‌شوند که انگشت شست به آنها میرسد.
کل صفحه، قبل و بعد
پیش‌نویس تازه‌کار
اصلاح‌شده
در سمت چپ، هیچ چیز هدایت نمی‌کند. هدر، نوار آمار، شش لینک، بنر عکس، هشت ردیف و شش دکمه همگی وزن یکسانی دارند. ردیف‌های دستگاه بزرگ‌ترین بلوک‌اند و همه به یک اندازه بزرگ‌اند، پس تلویزیونِ خاموش به اندازه ترموستاتِ در حال گرمایش مهم به نظر میرسد.
در سمت راست، صفحه به دو پرسش به ترتیب پاسخ می‌دهد: کجا هستم، و چه چیزی روشن است. عکس خود اتاق است، نه بنری درباره اپ. وضعیت با رنگ منتقل میشود، پس کاربر شبکه را با یک نگاه می‌خواند.
چه چیزی تغییر کرد، با عدد
| پیش‌نویس تازه‌کار | اصلاح‌شده | |
|---|---|---|
| هدر | منو، عنوان، به‌علاوه، تنظیمات، زنگ، بعد یک خط آب‌وهوا | نام اتاق با اندازه ۳۴ ضخیم و زیر آن «۲۲° · ۳ چراغ روشن» |
| اتاقها | شش لینک زیرخطدار، حاشیه چپ ۱۴ پیکسل و راست ۱۲ | تبهای ساده با اندازه ۱۷ که از لبه راست بیرون می‌زنند و سوایپ می‌شوند |
| دستگاه‌ها | هشت ردیف، خط‌های وضعیت ۹ پیکسلی، کلیدهای ۳۰ در ۱۸ | کاشی‌هایی با ارتفاع ۷۲ و شعاع گوشه ۱۶ در دو ستون، نام ۱۴ و وضعیت ۱۲ |
| وضعیت | یک کلید ریز | کاشی سفید با آیکون کهربایی یعنی روشن |
| صحنهها | شش دکمه با حروف بزرگ زیر برچسب «SCENES» | پیلهایی با ارتفاع ۴۴ که صحنه فعال در آنها روشن است |
| عکس | بنری کوچک با یک خوشامد | خود اتاق، تمام‌صفحه، زیر یک لایه مشکی تخت ۵۲٪ |
| تب‌ها | پنج تا، با آیکون‌های توپر و خطی مخلوط | چهار تا در نواری شناور با ارتفاع ۶۲، کاشی‌ها زیر آن ادامه دارند |
| رنگ تأکید | کهربایی روی کلیدها و آیکون‌ها | فقط یک کهربایی، روی کاشی‌های روشن و تب فعال |
اصلاح ۱: اول اتاق را بگو، بعد آنچه روشن است
قبل
بعد
هدری با آیکون منو، My Home، به‌علاوه، تنظیمات و زنگ با نقطه قرمز، نوار آب‌وهوا با نوشته 18°C Cloudy، Indoor 22°C، Humidity 44%، Power 3.2 kWh، شش لینک زیرخطدار اتاق و بنر عکس Haven، در برابر Living Room با حروف درشت و ضخیم و زیر آن «۲۲° · ۳ چراغ روشن»، روی عکس اتاق، با یک به‌علاوه و منوی سه‌نقطه.
هدر پیش‌نویس می‌خواهد یک پنل کنترل باشد. سه اکشن دارد، یک خط آب‌وهوای چهارقسمتی و یک خوشامد که می‌گوید خانه «بی‌نقص کار می‌کند»، که اطلاعات نیست. کاربر از قبل می‌داند مشکلی نیست، چون هیچ چیز چشمک نمی‌زند.
اصلاح به صفحه یک موضوع می‌دهد. «Living Room» عنوان است و یک خط زیرش دو واقعیتی را دارد که مردم چک میکنند: دما و تعداد چراغ‌های روشن. این سه چراغ همان Floor Lamp، Ceiling Light و Shelf Light هستند که در پیش‌نویس روشن‌اند، پس چیزی از خود درنیاوردیم. آب‌وهوا، رطوبت و برق از سه‌نقطه باز می‌شوند و زنگ و چرخ‌دنده به Profile می‌روند.
این همان الگویی است که Apple Home استفاده می‌کند: نام اتاق با وضعیت زنده‌اش در بالا.
قاعده برای استفاده دوباره: مکان را اول بگذار و یک خط وضعیت زنده زیرش. بقیه را پشت یک منو ببر.
اصلاح ۲: تبهای ساده اتاق که سوایپ می‌شوند
قبل
بعد
شش لینک زیرخطدار در یک ردیف: Living Room، Bedroom، Kitchen، Bath، Garage، Office، در برابر Living Room با سفید ضخیم و Bedroom، Kitchen و Bathroom با خاکستری که از لبه راست بیرون می‌زنند.
متن زیرخطدار در یک پاراگراف مثل لینک خوانده میشود، نه مثل انتخاب بین اتاقها. شش‌تایی‌شان هم کل عرض را پر میکنند، پس کاربر نمی‌فهمد کدام اتاق باز است. زیرخط پرصداترین ابزار صفحه است برای ساکت‌ترین عنصر.
تبهای ساده هر دو مشکل را حل میکنند. اتاق انتخابشده سفید است و بقیه خاکستری، پس اتاق فعلی تنها گزینه روشن است. ردیف عمداً از لبه راست بیرون می‌زند، که نشان می‌دهد سوایپ میشود و اجازه می‌دهد فهرست بدون چیدمان جدید از شش اتاق بیشتر شود. Bathroom و Office یک سوایپ فاصله دارند و Garage از سه‌نقطه باز میشود.
قاعده برای استفاده دوباره: انتخاب را با رنگ نشان بده، نه زیرخط، و بگذار ردیف گزینه‌ها از لبه بیرون بزند.
اصلاح ۳: کاشی به جای ردیف
قبل
بعد
هشت ردیف یکسان با آیکون، نام، یک خط وضعیت خاکستری مثل On, 80%, Warm White و یک کلید کوچک کهربایی یا خاکستری در سمت راست، در برابر کاشی‌های عریض و گرد در دو ستون: Floor Lamp و Thermostat سفید با آیکون کهربایی، TV و Speaker تیره با آیکون سفید، و Ceiling Light و Blinds که از پایین شروع می‌شوند.
ردیف‌ها بیشترین هزینه را دارند. هر کدام از کاربر می‌خواهد یک خط ۹ پیکسلی پیدا کند، «On | 80% | Warm White» را بخواند و بعد کلیدی ۳۰ در ۱۸ برای تپ کردن پیدا کند. هشت‌تایشان ستونی از متن‌اند که چیزی دستگاه‌های روشن را از خاموش جدا نمی‌کند.
کاشی یک دکمه است. کل کاشی هدف تپ است، نام ۱۴ است و وضعیت ۱۲، و رنگ کار کلید را می‌کند: سفید با آیکون کهربایی یعنی روشن، تیره با آیکون سفید یعنی خاموش. کاربر با یک نگاه هشت دستگاه را اسکن می‌کند و می‌بیند دو تا در ردیف‌های اول روشن‌اند. کاشی‌ها زیر نوار تب شناور هم ادامه پیدا میکنند، که به کاربر می‌گوید فهرست ادامه دارد.
چیزی حذف نشد. Ceiling Light، Shelf Light، Blinds و Air Purifier پیش‌نویس پشت «All 8» زیر Accessories هستند، پس همه دستگاه‌ها هنوز در دسترس‌اند.
قاعده برای استفاده دوباره: وقتی هر آیتم حالت روشن و خاموش دارد، وضعیت را با رنگ خود آیتم نشان بده و کل کارت را هدف تپ کن.
اصلاح ۴: پیل‌های واقعی برای صحنه
قبل
بعد
برچسب کوچک SCENES بالای شش دکمه خاکستری یکسان با حروف بزرگ: Movie، Sleep، Away، Morning، Party، Reading، در برابر ردیفی از پیل‌های گرد با آیکون: Movie روشن و سفید، Sleep و Away تیره، و پیل بعدی که از لبه بیرون می‌زند.
صحنهها بهترین بخش یک اپ خانه هوشمندند، چون یک تپ کل اتاق را عوض می‌کند. در پیش‌نویس ته صفحه و زیر هشت ردیف، به شکل شش دکمه خاکستری یکسان نشسته‌اند. شبیه فرم‌اند و هیچ‌کدام نمی‌گوید کدام صحنه فعال است.
اصلاح، صحنهها را بالا و درست زیر تبهای اتاق می‌برد و به هر کدام آیکون می‌دهد. ارتفاعشان ۴۴ است، پس با شست کار میکنند، و صحنه فعال سفید و روشن است. Party با سوایپ در پیل‌ها می‌آید و Reading در تب Scenes است.
قاعده برای استفاده دوباره: ارزشمندترین اکشن را همان‌جا بگذار که شست هست، و نشان بده کدام فعال است.
اصلاح‌های کوچک‌تر
- هر عملکردی می‌ماند. Ceiling Light، Shelf Light، Blinds و Air Purifier پشت All 8 هستند. آب‌وهوا، رطوبت و برق از نقطه‌های هدر باز می‌شوند. زنگ و چرخ‌دنده به Profile می‌روند که نقطه نشان را دارد.
- حاشیه‌های برابر. پیش‌نویس ۱۴ پیکسل چپ و ۱۲ پیکسل راست دارد. صفحه اصلاح‌شده برای هر دو طرف یک حاشیه به کار می‌برد.
- یک رنگ تأکید. کهربایی فقط روی آیکون کاشی‌های روشن و تب فعال می‌آید. در پیش‌نویس روی هر کلید و چند آیکون است.
- یک لایه کم‌نور تخت. یک لایه مشکی ۵۲٪ روی عکس می‌نشیند، بدون گرادیان و بدون درخشش، پس آباژور خوانا می‌ماند و کتاب‌ها کم‌نور می‌شوند.
- تبهای کمتر. چهار تب در نواری شناور با ارتفاع ۶۲ جای پنج تب با آیکون‌های توپر و خطی مخلوط را می‌گیرد.
- مقیاس تایپ. متن از ۱۲ تا ۳۴ پوینت است، با برچسب تبهای ۱۰ پوینتی، به جای ۹ تا ۱۵ پیکسل پیش‌نویس.
صفحه خانه هوشمند خودتان را ممیزی کنید
| پرسش | چرا مهم است |
|---|---|
| آیا صفحه می‌گوید کدام اتاق است؟ | کنترل به مکان بستگی دارد |
| آیا وضعیت روشن و خاموش بدون خواندن دیده میشود؟ | رنگ از یک خط ۹ پیکسلی سریع‌تر است |
| آیا کل دستگاه هدف تپ است؟ | زدن یک کلید کوچک سخت است |
| آیا صحنهها در دسترس شست‌اند و فعال‌شان مشخص است؟ | ارزشمندترین اکشن‌اند |
| آیا اتاقها انتخاب را با رنگ نشان میدهند؟ | زیرخط مثل لینک خوانده میشود |
| آیا کهربایی، یا هر رنگ تأکید، برای یک معنا به کار رفته؟ | رنگ تأکید فقط یک بار کار می‌کند |
فایل Figma را بگیرید
فایل رایگان شامل پیش‌نویس تازه‌کار، صفحه اصلاح‌شده و هر بخش به شکل کامپوننت است.
فایل رایگان Figma
بازطراحی صفحه خانه هوشمند، قبل و بعد
هر دو صفحه و هر بخش به شکل کامپوننت Figma. رایگان، فقط مشاهده، آن را در پیش‌نویس‌های خودتان کپی کنید.
سوالات متداول
صفحه اصلی اپ خانه هوشمند چطور باید طراحی شود؟
با نام اتاق و یک خط وضعیت زنده شروع کنید، مثل «۲۲° · ۳ چراغ روشن». دستگاه‌ها را به شکل کاشی‌های دوستونه نشان دهید که رنگ در آنها یعنی روشن، صحنهها را در پیلهایی نزدیک بالا بگذارید و آب‌وهوا و تنظیمات را پشت یک منو ببرید.
اپ خانه هوشمند برای دستگاه‌ها کاشی بهتر است یا فهرست؟
برای صفحه اصلی، کاشی. کل کاشی هدف تپ است و رنگ وضعیت را با یک نگاه نشان می‌دهد. فهرست برای یک نمای طولانی تنظیمات یا تاریخچه خوب است.
در اپ خانه هوشمند چطور نشان بدهیم یک دستگاه روشن است؟
با خود کاشی: کارت سفید با آیکون کهربایی برای روشن و کارت تیره با آیکون سفید برای خاموش، تا کسی مجبور نباشد خط وضعیت را بخواند یا کلید کوچکی پیدا کند.
صحنهها در اپ خانه هوشمند کجا باید باشند؟
نزدیک بالا، زیر تبهای اتاق، به شکل پیلهایی که شست به آنها میرسد و صحنه فعال روشن است. صحنهها با یک تپ کل اتاق را عوض میکنند، پس نباید زیر هشت ردیف بنشینند.
یک اپ خانه هوشمند به چند تب نیاز دارد؟
چهار تب کافی است: Home، Scenes، Automations و Profile. اتاقها در تبهای قابل سوایپ صفحه اصلی هستند.
چرا نام اتاقها را در اپ خانه هوشمند زیرخطدار نکنیم؟
زیرخط در متن مثل لینک خوانده میشود. تبهای ساده، با اتاق انتخابشده سفید و بقیه خاکستری، نشان میدهند کدام اتاق باز است و اجازه میدهند ردیف سوایپ شود.
منابع
- هر دو صفحه از خود ما هستند و در Figma طراحی و اندازه‌گیری شده‌اند. اپ Haven و دستگاه‌هایش ساختگی‌اند. عددها هماهنگ‌اند: در هر دو صفحه سه چراغ روشن است، Floor Lamp روی ۸۰٪ است و ترموستات روی ۲۲° تنظیم شده است.
- الگوی بررسی‌شده: Apple Home، با نام اتاق و وضعیتش در بالا، کاشی برای لوازم و صحنهها به شکل پیل. اندازه متن‌ها از iOS پیروی میکنند (۱۲ تا ۳۴ پوینت، برچسب تبهای ۱۰ پوینتی).
- آیکون‌ها از Phosphor (MIT) هستند. عکس‌ها از Pexels: Yusuf P و Jan Vee.
- ابتدا به شکل کاروسل در App Brainy منتشر شد.
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
