為外勤銷售代表設計 Beatplan React Native 應用程式：應對廉價 Android 手機、烈日與訊號微弱

Most mobile design advice assumes a new iPhone, indoors, on Wi-Fi. The people using our field sales app have mid- and low-end Android phones, stand in car parks and dealer shopfronts at midday, and often have one bar of signal.

We still borrowed heavily from Apple's Human Interface Guidelines, because grouped lists, large titles and calm hierarchy make dense data readable. But a lot of Apple's defaults fail outdoors on Android. Here's what we kept, what we changed, and why.

Contrast: Apple blue is too faint in sunlight

iOS system blue, #007AFF, is about 4.0:1 contrast on white. That just passes WCAG AA for large text, and it becomes invisible in direct sun.

We use a darker accent (#0369A1, about 6:1) as the tint for every action, link and selected state. Secondary text is grey at 72% instead of the usual lighter grey, giving roughly 5.4:1. If a rep has to tilt the phone to read a label, the label is wrong.

Icon tiles can still use bright iOS-style hues (indigo, green, orange), because the glyph on top is white and the tile is large.

Touch targets: 52px minimum

Android's guideline is 48dp. We use 52px minimum row height. Reps tap with gloves, with a pen in the other hand, or while walking. The extra 4px measurably reduced mis-taps on the payments screen.

There's one primary button per screen: filled, 52px tall, radius 12.

No hidden gestures

Swipe-to-delete is elegant and nobody in our user base discovers it. Every action has a visible control: a red ✕ to remove, a button to add. We have a SwipeRow component, and the rule is that it's never the only way to do something.

Back navigation must work with Android's back button and gesture on every screen. We never rely on the iOS swipe-from-left-edge.

Fonts: Android ignores fontWeight with custom fonts

We use Inter (the open-licence face closest to SF Pro, which may only be used on Apple platforms). On Android, fontWeight: '600' on a custom font family silently does nothing. You get regular weight.

The fix is to load each weight as its own font face and reference it by name:

// theme
export const font = {
  regular:  'Inter_400Regular',
  medium:   'Inter_500Medium',
  semibold: 'Inter_600SemiBold',
  bold:     'Inter_700Bold',
};

// usage: never fontWeight
<Text style={{ fontFamily: font.semibold, fontSize: 17 }}>Choose dealer</Text>

We load exactly four weights to keep startup fast on slow phones.

No blur

Real-time blur (iOS "materials", Liquid Glass) is slow on low-end Android and hard to read in sunlight. Translucent bars use a near-opaque fill instead. It looks 90% as good and scrolls smoothly on a budget phone.

Native pickers, not iOS wheels

Date and time pickers use Android's own components on Android. Reps already know how they work. An iOS-style wheel on Android looks polished in a screenshot and confuses the person who has to use it.

Words: the team's vocabulary, not the designer's

The biggest gains weren't visual. "Choose dealer" beats "Who paid?". "Policy" beats "Scheme" when the team says "policy". If a field is required, the label says "required". An optional-looking label gets skipped.

For teams that work in two languages, we show an optional second line under the English on section headers, the main button and error messages. English stays first, and the second language never replaces it.

Choices become shortcuts

When a field is free text with common answers (like a payment policy name), the text box comes first and looks like a box. Common values sit underneath as one-tap shortcuts labelled "Or tap a common one". People don't feel forced into a list, and most still tap a shortcut.

Motion

It's short, ease-out and purposeful, with light haptics on selection and a success haptic plus sound when a payment is saved. Everything goes instant when the OS "Reduce motion" setting is on.

These rules come from the design guide of Beatplan field sales app (disclosure: this is the product I work on), an Expo and Supabase field sales system that's used daily and now sold as full source code. The payments screen is the reference implementation, and you can try it in the live demo. It's interesting to compare on a cheap Android phone outdoors.

This article was written with AI assistance.