طراحی صفحه اپلیکیشن mobile
از wireframe تا hi-fi UI.
قدم اول: brief و wireframe low-fi
سناریوی این tutorial: اپ fitness tracking با سه screen اصلی — Home، Workout، Profile. قبل از رنگ و typography، wireframe low-fi بسازید تا layout و hierarchy را validate کنید. frame iPhone 15 Pro با logical size 393×852 از preset Figma انتخاب کنید.
wireframe را grayscale نگه دارید: rectangles خاکستری بهجای image، خطوط ساده بهجای icon دقیق. هدف flow و placement است نه زیبایی. اگر در این مرحله وقت روی shadow و gradient بگذارید، feedback روی structure گم میشود.
Home wireframe: header با greeting و avatar، row سه card آمار (steps، calories، minutes)، CTA بزرگ «شروع تمرین»، bottom navigation چهار تب. هر بلوک را با label در wireframe مشخص کنید تا stakeholder بدون توضیح verbal layout را بفهمد.
سه screen را در یک row کنار هم بگذارید و نامگذاری کنید: WF_Home، WF_Workout، WF_Profile. connection ذهنی بین screenها را با فلش ساده یا annotation نشان دهید: CTA Home → Workout list، tab Profile → profile screen.
۵ دقیقه timebox برای هر wireframe کافی است. perfection enemy of progress در این مرحله. اگر layout اشتباه است، hi-fi را دو برابر سختتر fix میکنید — wireframe ارزان است، pixel polish گران.
قدم دوم: typography و color system
صفحه یا frame جدا با نام Styles بسازید. palette: Primary #2563EB (اقدام اصلی)، Secondary #10B981 (success/health)، Neutral scale از gray-50 (#F9FAFB) تا gray-900 (#111827). semantic colors: success، warning (#F59E0B)، error (#EF4444) را هم تعریف کنید.
Typography: Inter یا SF Pro برای iOS-like feel. scale پیشنهادی — H1: 24 bold، H2: 20 semibold، Body: 16 regular، Caption: 12 medium. line height body 1.5 (24px برای 16px font). letter spacing caption کمی positive برای readability.
Text styles و Color styles بسازید: متن sample را select > چهار نقطه کنار Text > Create style. نام: Text/Heading/H1، Text/Body/Regular. برای color هم fill را style کنید: Color/Primary/Default. apply style روی wireframe hi-fi سرعت design را چند برابر میکند.
Dark mode (optional): duplicate variables یا styles با suffix Dark. background gray-900، text gray-50، card gray-800. اگر product از day one dark mode دارد، همزمان با light طراحی کنید نه afterthought.
contrast را زود check کنید: text gray-500 روی gray-50 ممکن است WCAG AA fail کند. body text حداقل 4.5:1 contrast ratio. tool رایگان WebAIM Contrast Checker کافی است.
قدم سوم: hi-fi Home screen
frame جدید Home_HiFi بسازید (wireframe را hide نگه دارید برای comparison). background neutral-50 (#F9FAFB). Status bar و safe area را رعایت کنید — content مهم زیر notch و home indicator نرود.
Header: Auto Layout horizontal، space-between، padding horizontal 16 vertical 12. چپ: column با «سلام، سارا» (Body) و «امروز چطوره؟» (Caption gray-500). راست: avatar دایره 40px با border سفید و shadow ملایم.
Stats row: Auto Layout horizontal، gap 12، سه card با Fill width equal. هر card: padding 16، radius 12، fill white، shadow (Y:2، blur:8، opacity 8%). محتوا: label caption بالا، number H2 bold primary، icon 24 گوشه.
CTA «شروع تمرین»: full width minus margin 16، height 48، fill primary، text white semibold 16، radius 12. زیر stats با margin top 24. touch target حداقل 44px height برای accessibility.
Bottom nav: component جدا (در قدم بعد detail). فعلاً placeholder. کل screen را با 8pt grid audit کنید — فاصلههای arbitrary را به 8، 16، 24 تبدیل کنید.
قدم چهارم: navigation و secondary screens
Bottom navigation component: frame با Auto Layout horizontal، distribute equal. چهار tab: Home، Workout، Profile، Settings — هر کدام icon 24 + label Caption. active: primary color + semibold label؛ inactive: gray-500. height کل nav ~56 با safe area bottom.
Workout screen: list vertical Auto Layout gap 0 (divider بین item). هر row: Auto Layout horizontal padding 16، height ~72. چپ thumbnail 56×56 radius 8، وسط column title Body + duration Caption، راست chevron icon. tap state را در variant بعداً اضافه کنید.
Profile screen: avatar 80px center top، margin top 32. form-like list: name، email، goal — هر row height 56 با label چپ و value راست. settings section پایین با list items و chevron. header inner screens: back arrow چپ + title center.
consistency rule: header height، horizontal padding 16، corner radius card 12 در همه screen یکسان. user cognitive load با pattern تکراری کم میشود.
Empty state را design کنید: Workout list بدون item — illustration ساده + «هنوز تمرینی ثبت نشده» + CTA. loading skeleton optional برای polish بیشتر.
قدم پنجم: prototype interactive
تب Prototype را باز کنید. از دکمه «شروع تمرین» روی Home click hotspot بکشید به frame Workout. transition: Smart Animate اگر layout مشابه است، وگرنه Instant یا Move in از راست (iOS-like). duration ~300ms.
Bottom nav: هر tab icon را به frame مربوط link کنید. Instant transition برای tab switch معمول است. مطمئن شوید فقط یک tab active styling دارد — ممکن است لازم باشد variant component nav بسازید.
Overlay modal: icon settings در Profile > frame modal slide from bottom. background overlay نیمهشفاف black 40%. دکمه close یا tap outside برای dismiss — hotspot روی overlay به Previous frame.
Device preview: Figma Mirror روی گوشی real (همان account login). thumb zone را test کنید — CTA و nav پایین باید با یک دست reachable باشند. prototype link را share کنید تا stakeholder روی موبایل خودش test کند.
Flow starting point: Home را select > Set as starting frame. Present (▶) برای fullscreen demo. annotation برای interaction غیر obvious (مثلاً pull to refresh) اضافه کنید.
قدم ششم: polish و handoff
Spacing audit نهایی: همه gap و padding مضرب 8. icon alignment optical — گاهی 1px manual nudge لازم است. text truncation: long username در header ellipsis داشته باشد.
Accessibility: contrast WCAG AA، touch 44px، label برای icon-only button (یا aria در code). color alone state communicate نکند — icon یا text هم اضافه کنید.
Dev Mode (یا Inspect): developer spacing بین elementها، font spec و export asset میبیند. iconها SVG export، illustration PNG @2x. naming: ic_home_24، img_workout_placeholder.
Annotation: sticky note یا frame Documentation برای edge case — error state login، offline mode، permission denied. developer و QA سوالات کمتری میپرسند.
Portfolio: before/after wireframe vs hi-fi در یک frame کنار هم export کنید. 2-3 sentence process (brief، wireframe، system، prototype) case study را credible میکند.
سوالات متداول
wireframe را skip کنم؟
برای personal project خیلی کوچک شاید. wireframe سریع layout mistake را قبل از ساعتها polish catch میکند. ۱۵ دقیقه wireframe میتواند ساعتها rework hi-fi را save کند — بهخصوص وقتی با client یا PM align میکنید.
اندازه frame iPhone کدام؟
Logical width ~390pt برای iOS recent (393 iPhone 15). Android often 360dp. یک design responsive با Auto Layout تفاوتهای جزئی را absorb میکند. physical pixel و safe area در implementation native handle میشود.
چند screen برای MVP؟
Core user flow 3-5 screen: main task، secondary، profile/settings. onboarding optional. این tutorial سه screen core (Home، Workout، Profile) برای MVP fitness app کافی است. feature creep را resist کنید.
Real device test چطور؟
Figma Mirror (iOS/Android) با login همان account — QR scan در desktop. alternative: prototype link در mobile browser. Mirror latency کمتر و safe area واقعی را نشان میدهد.