طراحی اپ یادداشت: بازطراحی صفحه اصلی، قبل و بعد
صفحه اصلی یک اپ یادداشت با دوازده کاغذ یادداشت رنگی، هشت تگ رنگی و هشدار فضای ذخیرهسازی، و همان صفحه پس از اصلاح: چیپهای پوشه، دو کاشی سنجاقشده و یک لیست ساده. هر تغییر کنار هم، به‌همراه فایل رایگان Figma.
صفحه اصلی یک اپ یادداشت فقط یک کار دارد: شما را به یادداشتی که می‌خواهید برساند. پیش‌نویس اول زیر همه چیز لازم برای پیدا کردن یادداشت را دارد، اما دوازده کاغذ یادداشت را در شش رنگ با متن ۸ پیکسلی رنگ می‌زند، هشت تگ دیگر را در هشت رنگ دیگر اضافه میکند، پیش از اینکه یک کلمه بخوانید درباره فضای ذخیرهسازی هشدار میدهد، و یک دکمه شناور بعلاوه را روی یک یادداشت پارک میکند.
اصلاح، همه عملکردها را نگه می‌دارد و زرق‌وبرق دور یادداشتها را برمی‌دارد. تگ‌های رنگی به چیپهای پوشه با خط نازک تبدیل می‌شوند، یادداشتهای سنجاقشده دو کاشی سفید می‌شوند، هر یادداشت دیگر یک ردیف ساده است، و جستجو یک فیلد خاکستری زیر یک عنوان ساده است.
کل صفحه، قبل و بعد
پیش‌نویس تازه‌کار
اصلاح‌شده
سمت چپ، همه چیز با یک حجم صدا فریاد می‌زند. شش رنگ کاغذ یادداشت، هشت رنگ تگ، یک بنر زرد و یک بعلاوه زرد همه با هم رقابت می‌کنند و خود یادداشتها کوچک‌ترین چیز صفحه‌اند.
سمت راست، صفحه به همان ترتیبی که آدم فکر میکند خوانده می‌شود: این چیست، می‌توانم جستجو کنم، کدام پوشه، چه چیزی را سنجاق کرده‌ام، چه چیز دیگری هست. تنها رنگ‌ها همان‌هایی هستند که داخل یادداشتها قرار دارند.
چه چیزی تغییر کرد، با اندازه‌گیری
| پیش‌نویس تازه‌کار | اصلاح‌شده | |
|---|---|---|
| عنوان | یک لوگوتایپ به‌همراه «All Notes (128)» | Notes با اندازه ۳۴ پیکسل بولد |
| یادداشتها | دوازده کاغذ یادداشت ۱۱۷ در ۱۴۲ پیکسل در شش رنگ | دو کاشی سنجاقشده ۱۶۹ پیکسلی، سپس ردیف‌های ساده |
| متن یادداشت | متن ۸ پیکسلی | عنوان ۱۶ پیکسلی روی پیشنمایش ۱۴ پیکسلی |
| تگ‌ها | هشت چیپ ۹ پیکسلی در هشت رنگ | چیپهای پوشه ۳۲ پیکسلی با خط نازک |
| جستجو | یک آیکن در گوشه | فیلد ۳۶ پیکسلی با خاکستری #F2F2F7 |
| هشدارها | بنر ذخیرهسازی بالای یادداشتها | منتقل شد به تب Profile |
| حاشیه‌ها | ۱۴ پیکسل چپ، ۱۲ پیکسل راست | ۲۰ پیکسل در هر دو طرف |
| تب‌ها | پنج تا، با آیکن‌های پر و خطی مخلوط | چهار تا، فقط آیکن، در یک کپسول شناور |
اصلاح ۱: یک عنوان ساده و یک فیلد جستجو
قبل
بعد
یک لوگوتایپ سریف ریز بالای All Notes (128)، یک منوی کشویی Date Modified، دو کلید نمایش و یک آیکن جستجو، با بنر زرد ذخیرهسازی و دکمه UPGRADE NOW زیرشان. در مقابل، یک عنوان بزرگ Notes، منوی سه‌نقطه و یک فیلد جستجوی خاکستری که کلمه Search در آن نوشته شده است.
هدر پیش‌نویس پیش از اینکه حتی یک یادداشت ببینید هفت کنترل دارد: یک منو، یک لوگوتایپ، یک شمارنده، یک مرتب‌سازی، دو کلید نمایش و یک آیکن جستجو. بعد هم بنری به شما می‌گوید ۸۵٪ از فضایتان را مصرف کرده‌اید و دکمه‌ای برای پرداخت کنارش است.
اصلاح، به صفحه یک نام و یک راه ورود میدهد. Notes با ۳۴ پیکسل بولد است. جستجو یک فیلد تمام‌عرض با شعاع ۱۰ پیکسل در خاکستری روشن (#F2F2F7) است، پس شبیه یک فیلد است و کسی لازم نیست حدس بزند که یک آیکن همان جستجوست.
مرتب‌سازی و نحوه نمایش هنوز هستند، پشت سه‌نقطه. هشدار ذخیرهسازی و Upgrade به Profile رفتند، جایی که آدم برای مدیریت حسابش می‌رود.
قانون قابل استفاده مجدد: بالای صفحه باید آن را نام ببرد و راه اصلی ورود را بدهد. هر چیز دیگر پشت یک منو می‌رود.
اصلاح ۲: چیپهای پوشه به‌جای تگ‌های رنگی
قبل
بعد
هشت تگ ریز پر شده، Work قرمز، Ideas کهربایی، Journal سبز، Personal آبی، Travel فیروزه‌ای، Recipes نارنجی، Home بنفش و Books صورتی، همه در یک خط فشرده شده‌اند. در مقابل، چیپهای قرصی با خط نازک با عنوان‌های All، Work، Ideas، Journal و Travel، با All مشکی پر و بقیه که از لبه راست بیرون می‌زنند.
هشت تگ در هشت رنگ را نمی‌شود برای مدت طولانی با رنگ از هم تشخیص داد، و در ۹ پیکسل لمس‌کردنشان سخت است. آن‌ها همچنین دقیقاً خط را پر می‌کنند، پس ردیف تمام‌شده به نظر می‌رسد و هیچ سرنخی نمی‌دهد که چیز بیشتری هست.
اصلاح از قرص‌های ۳۲ پیکسلی با خط نازک استفاده میکند. مورد انتخاب‌شده، All، مشکی پر است. بقیه ساده‌اند و پوشه‌های بعد از Travel از لبه راست وارد می‌شوند. چیپی که لبه صفحه آن را بریده، به انگشت می‌گوید که می‌شود اسکرول کرد، و کسی به فلش نیاز ندارد.
قانون قابل استفاده مجدد: مورد انتخاب‌شده را با پر بودن نشان بدهید، نه با یک رنگ متفاوت برای هر مورد.
اصلاح ۳: یادداشتهای پرکاربرد را بهصورت دو کاشی سفید سنجاق کنید
قبل
بعد
سه یادداشت رنگی در یک ردیف، زرد، صورتی و آبی، هرکدام با یک سنجاق ریز و آیکن بیشتر در گوشه‌های بالا و متن ۸ پیکسلی. در مقابل، عنوان Pinned با سنجاق کهربایی و دو کاشی سفید: طرح مدادی یک کلبه با عنوان Cabin renovation و ۲h ago، و پیشنمایش متنی چک‌لیست راه‌اندازی با عنوان و ۹:۱۲ AM.
در پیش‌نویس، یک یادداشت سنجاقشده جز یک آیکن سنجاق ۱۱ پیکسلی دقیقاً مثل هر یادداشت دیگر است. دو کاغذ یادداشت اول همان یادداشت‌هایی هستند که در نسخه اصلاح‌شده سنجاق شده‌اند. سنجاق نحوه برخورد با آن‌ها را تغییر نمی‌دهد، پس هیچ چیز درباره راحتی پیدا کردنشان عوض نمی‌شود.
اصلاح به یادداشتهای سنجاقشده بخش و شکل خودشان را میدهد. دو کاشی سفید ۱۶۹ پیکسلی با شعاع ۱۲ پیکسل و خط نازک زیر عنوان Pinned قرار می‌گیرند. یادداشت کلبه طرحش را نشان میدهد، چک‌لیست راه‌اندازی پیشنمایش متن را، و هرکدام زیرش یک عنوان ۱۴ پوینتی نیمه‌بولد و یک تاریخ ۱۲ پوینتی دارد. حالا سنجاق کردن چیزی را که می‌بینید عوض میکند، و دلیل سنجاق کردن همین است.
قانون قابل استفاده مجدد: اگر یک وضعیت مهم است، در صفحه برایش جا بگذارید. یک آیکن کوچک روی یک کارت یکسان جا نیست.
اصلاح ۴: هر یادداشت دیگر یک ردیف ساده است
قبل
بعد
دو ردیف کاغذ یادداشت رنگی، سبز، نارنجی، بنفش، زرد، صورتی و آبی، هرکدام پر از متن ریز و تاریخ Edited در پایین. در مقابل، چهار ردیف ساده روی سفید: Lisbon in May، Sourdough notes، Book ideas و Morning pages، هرکدام یک عنوان ۱۶ پوینتی با تاریخ و یک خط از متنش زیرش، جداشده با خطوط نازک.
کاغذ یادداشت، یادداشت را کامل نشان میدهد، پس چند خط متن ۸ پیکسلی همان چیزی است که گیرتان می‌آید. نه می‌توانید بخوانید و نه مرور کنید، و با دوازده‌تا از آن‌ها یک صفحه کامل را پر می‌کنید. شش رنگ هیچ معنایی ندارند، پس چیزی از آن‌ها یاد نمی‌گیرید.
اصلاح یک لیست است. هر یادداشت یک عنوان ۱۶ پوینتی، یک تاریخ و یک خط از متنش با ۱۴ پوینت است که به سه‌نقطه ختم می‌شود. ردیف‌ها ۵۷ پیکسل ارتفاع دارند و بینشان خط نازک است، پس حدود هشت‌تا زیر کاشی‌های سنجاقشده جا می‌شوند. همه عنوانها را با یک نگاه می‌خوانید و یادداشت درست را از روی خط اولش باز می‌کنید.
قانون قابل استفاده مجدد: لیست برای پیدا کردن چیزهاست، کارت برای نگاه کردن به یک چیز. آن را که با کار می‌خواند انتخاب کنید.
اصلاح ۵: نوار تب و دکمه نوشتن
قبل
بعد
پایین پیش‌نویس: یک دکمه گرد زرد بعلاوه روی آخرین یادداشت، بالای یک نوار تب تخت با پنج تب برچسب‌دار، Notes، Daily، Tasks، Tags و Profile، با آیکن‌های پر و خطی مخلوط. در مقابل، یک کپسول شناور با چهار آیکن که یکی انتخاب شده و یادداشتها زیرش ادامه دارند، و یک دکمه گرد کهربایی نوشتن جدا با مداد کنارش.
پیش‌نویس یک بعلاوه شناور را روی آخرین یادداشت می‌گذارد، پس متن را می‌پوشاند. نوار تبش پنج تب با برچسب دارد و آیکن Notes پر است در حالی که بقیه خطی‌اند.
اصلاح دو کنترل با دو کار می‌سازد. یک کپسول ۵۲ پیکسلی فقط‌آیکن چهار تب را با یک سبک آیکن نگه می‌دارد، و یک دکمه نوشتن کهربایی ۵۲ پیکسلی با مداد کنارش می‌نشیند. یادداشتها زیر هر دو ادامه می‌یابند، پس صفحه مثل یک لیست بلند حس می‌شود و نه لیستی که یک نوار آن را قطع کرده. تب Tags حذف شده چون چیپهای پوشه کارش را انجام می‌دهند.
قانون قابل استفاده مجدد: دکمه «ساختن چیز جدید» را همان‌جا که انگشت است بگذارید، و شکل و رنگ خودش را بدهید تا با ناوبری اشتباه گرفته نشود.
اصلاح‌های کوچک‌تر
- هر عملکرد می‌ماند. جستجو همان فیلد زیر عنوان است. مرتب‌سازی Date Modified و کلیدهای شبکه و لیست پشت نقطه‌ها هستند. All Notes (128) شد پوشه All. دکمه بیشتر داخل هر یادداشت است. هشدار ذخیرهسازی به Profile رفت.
- یک حاشیه. پیش‌نویس ۱۴ پیکسل چپ و ۱۲ پیکسل راست دارد. صفحه اصلاح‌شده ۲۰ در هر دو طرف دارد و ۱۰ پیکسل بین بلوک‌ها.
- یک رنگ تأکیدی. کهربایی (
#F5B301) فقط روی سنجاق و دکمه نوشتن استفاده می‌شود. هر چیز دیگر مشکی، خاکستری و سفید است. - مقیاس تایپی که بشود خواند. پیش‌نویس از ۸ تا ۱۴ پیکسل می‌رود. صفحه اصلاح‌شده از ۱۲ پیکسل برای تاریخ‌ها شروع می‌شود و به ۳۴ پیکسل برای عنوان می‌رسد.
- محتوای واقعی. کاشی طرح یک نقاشی واقعی را به‌جای یک جعبه رنگی نشان میدهد، پس بخش سنجاقشده پیش از باز کردن یادداشت نشان میدهد درباره چیست.
- بدون لوگوتایپ. پیش‌نویس در هدر یک لوگوتایپ سریف به نام Margin دارد. صفحه اصلاح‌شده ندارد، چون در Apple Notes عنوان صفحه همان هدر است.
صفحه یادداشتهای خودتان را ممیزی کنید
| پرسش | چرا مهم است |
|---|---|
| آیا می‌توانید هر عنوان یادداشت را بدون باز کردن آن بخوانید؟ | لیست برای پیدا کردن است، پس عنوانها باید خوانا باشند |
| آیا صفحه بیش از یک رنگ تأکیدی دارد؟ | هر رنگ اضافه به معنا نیاز دارد، وگرنه نویز است |
| آیا یادداشتهای سنجاقشده با بقیه فرق دارند؟ | سنجاقی که چیزی را عوض نکند ارزش لمس کردن ندارد |
| آیا بالای اولین یادداشت هشدار یا فروش هست؟ | بعد از انجام کار بفروشید، نه قبل از آن |
| آیا دکمه نوشتن روی متنی را می‌پوشاند؟ | کنترلی که محتوا را پنهان کند در جای اشتباه است |
| آیا ردیف پوشه می‌گوید که اسکرول می‌شود؟ | موردی که لبه آن را بریده بدون برچسب می‌گوید «بکش» |
فایل Figma را بگیرید
فایل رایگان شامل پیش‌نویس تازه‌کار، صفحه اصلاح‌شده و هر قطعه بهصورت کامپوننت است.
فایل رایگان Figma
بازطراحی اپ یادداشت، قبل و بعد
هر دو صفحه و هر قطعه بهصورت کامپوننت Figma. رایگان، فقط مشاهده، آن را در پیش‌نویس‌های خودتان کپی کنید.
سوالات متداول
صفحه اصلی یک اپ یادداشت چگونه باید طراحی شود؟
با یک عنوان ساده و یک فیلد جستجو شروع کنید، بعد چیپهای پوشه، یک بخش کوتاه Pinned و لیستی از یادداشتها با عنوان و یک خط برای هرکدام. هشدارها و پیشنهادهای فروش را کنار بگذارید تا یادداشتها پرصداترین چیز صفحه باشند.
اپ یادداشت باید از شبکه استفاده کند یا لیست؟
لیست برای پیدا کردن یادداشتها، چون عنوانها و یک خط متن با یک نگاه خوانا هستند. شبکهای از کارتهای کامل فقط وقتی جواب میدهد که هر کارت بهاندازه کافی بزرگ باشد که خوانده شود، و در عرض ۱۱۷ پیکسل متن به ۸ پیکسل میافتد.
یک اپ یادداشت باید از چند رنگ استفاده کند؟
یک رنگ تأکیدی. Apple Notes برای سنجاق و دکمه نوشتن یک کهربایی واحد به کار می‌برد و بقیه چیز را خنثی نگه می‌دارد، پس یادداشتها رنگ را حمل می‌کنند.
هشدار ذخیرهسازی در یک اپ یادداشت کجا باید برود؟
در صفحه Profile یا تنظیمات، یا بهصورت یک اعلان کوچک فقط وقتی کاربر به سقف نزدیک است. بنری بالای اولین یادداشت هر بازدید را با یک پیام فروش شروع میکند.
یادداشتهای سنجاقشده در یک اپ یادداشت چگونه باید به نظر برسند؟
بهصورت بخش خودشان زیر عنوان Pinned، با دو کاشی شامل پیشنمایش، عنوان و تاریخ. آیکن سنجاق روی یک کارت یکسان پیدا کردن یادداشت را آسانتر نمیکند.
منابع
- هر دو صفحه از خودمان هستند و در Figma طراحی و اندازه‌گیری شده‌اند. اپ، Margin، و همه داده‌هایش ساختگی است. یادداشتها در هر دو صفحه با هم می‌خوانند: دو کاشی سنجاقشده همان دو کاغذ یادداشت اول پیش‌نویس‌اند و ردیف‌ها کاغذهای بعدی با همان عنوانها، تاریخ‌ها و جمله‌های آغازین هستند.
- الگوی بررسی‌شده: Apple Notes روی iPhone.
- عکس: یک طرح مدادی از Sofya Borboris در Pexels، صاف‌شده، برش‌خورده به نقاشی و قرارگرفته روی سفید. بدون AI.
- آیکن‌ها از Phosphor (MIT) هستند. نوار وضعیت از روی یک اسکرین‌شات اندازه‌گیری‌شده iPhone کشیده شده است. لوگوتایپ پیش‌نویس Libre Caslon Display Regular است.
- اولین‌بار بهصورت کاروسل در 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
