feat(ios): StreamView visual polish — five Lidwell principles applied#4
Merged
Conversation
Read DESIGN_PRINCIPLES.md, audited StreamView against the Universal Principles book, landed five evidence-backed changes. Each cites principle + page so future readers can verify the reasoning, not just the output. 1. Product name + price overlay on the 3D spin card Proximity (p160): product info belongs WITH the product image, not next to the BUY CTA. Hierarchy (p104): without a visible name, the screen has no top-level identity of what's being sold. Rendered bottom-left of the white card, only when productData.name exists. 2. BUY CTA — saturated warm orange, 56pt minHeight, accent glow Von Restorff (p204): the single action-critical element should visibly differ from neighbors (green LIVE pill + white spin card + dark shell). Fitts' Law (p82): larger bottom-edge target = easier one-thumb reach on a 6.7" screen. Disabled opacity lifted 0.5 → 0.7 so the button stays visually present even without a buy_url set. 3. Drop-shadows under avatar + 3D spin cards Top-Down Lighting Bias (p196): shadows below read as raised → focused → where the eye lands. Matched radii/offsets across both cards so they feel like one layer lifted above the chrome. 4. Comments panel 38% → 28% height Hierarchy (p104) + 80/20 Rule (p12): avatar is the pitch; comments are secondary to the seller's viewer role. Reclaimed ~10% of vertical for the hero. 5. LIVE green dot — pulse animation Visibility (p202) + Operant Conditioning (p144): motion reinforces state. A soft 0.9s easeInOut scale+opacity cycle signals "actually live" — we learned this association from Instagram/TikTok/Twitch. Build: BUILD SUCCEEDED, zero warnings on iPhone 17 Pro simulator. Out of scope (did not ship): - Shop-style product header strip (requires more copy design) - Empty-state character illustrations (scope creep) - Dynamic Type support (accessibility follow-up) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughStreamView.swift receives multiple UI enhancements: live indicator pulse animation, comments card vertical frame adjustment, shadows on avatar and 3D spin elements, conditional product metadata overlay display, and comprehensive buy button styling updates including spacing, typography, colors, and gradient adjustments. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Read DESIGN_PRINCIPLES.md, audited StreamView against the Universal Principles book, landed five evidence-backed changes. Each cites principle + page so future readers can verify the reasoning, not just the output.
Product name + price overlay on the 3D spin card Proximity (p160): product info belongs WITH the product image, not next to the BUY CTA. Hierarchy (p104): without a visible name, the screen has no top-level identity of what's being sold. Rendered bottom-left of the white card, only when productData.name exists.
BUY CTA — saturated warm orange, 56pt minHeight, accent glow Von Restorff (p204): the single action-critical element should visibly differ from neighbors (green LIVE pill + white spin card + dark shell). Fitts' Law (p82): larger bottom-edge target = easier one-thumb reach on a 6.7" screen. Disabled opacity lifted 0.5 → 0.7 so the button stays visually present even without a buy_url set.
Drop-shadows under avatar + 3D spin cards Top-Down Lighting Bias (p196): shadows below read as raised → focused → where the eye lands. Matched radii/offsets across both cards so they feel like one layer lifted above the chrome.
Comments panel 38% → 28% height Hierarchy (p104) + 80/20 Rule (p12): avatar is the pitch; comments are secondary to the seller's viewer role. Reclaimed ~10% of vertical for the hero.
LIVE green dot — pulse animation Visibility (p202) + Operant Conditioning (p144): motion reinforces state. A soft 0.9s easeInOut scale+opacity cycle signals "actually live" — we learned this association from Instagram/TikTok/Twitch.
Build: BUILD SUCCEEDED, zero warnings on iPhone 17 Pro simulator.
Out of scope (did not ship):
Summary by CodeRabbit
New Features
Style