ជំពូកទី ២៖ ការរចនា UI/UX សម្រាប់អេក្រង់ទូរស័ព្ទ និងបទពិសោធន៍ Touch

មើលមនុស្សនៅលើឡានក្រុង ឬកំពុងរង់ចាំកាហ្វេ។ ស្ទើរតែគ្រប់គ្នាកាន់ទូរស័ព្ទ ដៃម្ខាង ហើយប្រើតែ មេដៃ ដើម្បីរមូរ ចុច និងវាយអក្សរ។ ដៃម្ខាងទៀតកំពុងកាន់កាបូប កាហ្វេ ឬដៃកូន។

នេះមានន័យថា រាល់ប៊ូតុងដែលអ្នកដាក់លើអេក្រង់ គឺជាការសម្រេចចិត្តថាតើមេដៃនោះត្រូវលាតទៅឆ្ងាយប៉ុណ្ណា។ ដាក់ខុសកន្លែង User ត្រូវប្ដូរដៃ ឬបោះបង់។ ដាក់តូចពេក User ចុចខុស។

មេរៀននេះគឺអំពីការរចនាសម្រាប់មេដៃនោះ។

Thumb Zone: កន្លែងដែលមេដៃទៅដល់

នៅលើកុំព្យូទ័រ Mouse មានទំហំត្រឹមតែ 1 Pixel ហើយអាចទៅដល់គ្រប់ជ្រុង។ នៅលើទូរស័ព្ទ ចុងម្រាមដៃមានទំហំប្រហែល ៨ ទៅ ១០ មីលីម៉ែត្រ ហើយមេដៃដែលកាន់ទូរស័ព្ទ វិលជុំវិញគល់ដៃនៅជ្រុងខាងក្រោម។ ផ្ទៃអេក្រង់ក៏ចែកចេញជាបីតំបន់៖

ច្បាប់ពីរដែលចេញពីរូបនេះ៖

1. ប៊ូតុងសំខាន់ (Primary Action) ដាក់នៅខាងក្រោម។ ប៊ូតុង "ទិញឥឡូវនេះ", "ផ្ញើ" ឬ Tab Bar របស់ App ត្រូវនៅពាក់កណ្ដាលខាងក្រោមនៃអេក្រង់។
2. ប៊ូតុងគ្រោះថ្នាក់អាចដាក់នៅខាងលើ។ ប៊ូតុង "លុបគណនី" ឬ "បោះបង់" ដែលពិបាកចុចបន្តិច ជួយការពារ User កុំឱ្យចុចត្រូវដោយអចេតនា។

---

Tap Target: តូចពេកគឺចុចខុស

បញ្ហាដែលជួបញឹកញាប់បំផុតក្នុង App ដែលរចនាមិនល្អ គឺប៊ូតុងតូចពេក ឬនៅកៀកគ្នាពេក។ ម្រាមដៃធ្លាក់ចំកន្លែងពីរក្នុងពេលតែមួយ ហើយ User ចុចត្រូវអ្វីដែលខ្លួនមិនចង់។ គេហៅវាថា Fat Finger Problem។

ទាំង Apple និង Google បានកំណត់ទំហំអប្បបរមាច្បាស់លាស់៖

គន្លឹះ៖ ទោះ Icon មើលទៅមានទំហំត្រឹមតែ 24×24 ក៏ដោយ ក៏តំបន់ចុចជុំវិញវា (Padding ឬ hitSlop ក្នុង React Native) ត្រូវមានយ៉ាងតិច 44 ទៅ 48 ដែរ។

---

ហេតុអ្វីមិនប្រើ px នៅលើទូរស័ព្ទ

ទូរស័ព្ទមានអេក្រង់ដែលច្បាស់ខុសៗគ្នាខ្លាំង។ iPhone មានអេក្រង់ Retina 2x ឬ 3x ហើយ Android មានចាប់ពី 1x រហូតដល់ 4x។ អេក្រង់ 3x មាន Pixel ច្រើនជាងអេក្រង់ 1x បីដង នៅក្នុងទំហំដូចគ្នា។

ដូច្នេះ ប៊ូតុងដែលអ្នកកំណត់ 100px នឹងតូចទៅៗ នៅលើអេក្រង់ដែលច្បាស់ជាង៖

ដើម្បីដោះស្រាយបញ្ហានេះ៖

• Android ប្រើខ្នាត dp (Density-independent Pixels)
• iOS ប្រើខ្នាត pt (Points)
• React Native ប្រើលេខសុទ្ធ (គ្មានខ្នាត) ដែលស្មើនឹង dp ឬ pt ដោយស្វ័យប្រវត្តិ

រូបមន្តនៅពីក្រោយគឺ៖ px = dp × (DPI ÷ 160)។ អ្នកមិនចាំបាច់គណនាដោយខ្លួនឯងទេ ទូរស័ព្ទធ្វើវាឱ្យអ្នក។ អ្វីដែលអ្នកត្រូវចងចាំគឺ កុំកំណត់ទំហំជា Pixel ពិតៗ។

---

Safe Area: កុំឱ្យកាមេរ៉ាបាំងប៊ូតុង

អេក្រង់ទូរស័ព្ទសព្វថ្ងៃលែងជាចតុកោណសាមញ្ញទៀតហើយ។ វាមានជ្រុងកោង Notch ឬ Dynamic Island នៅខាងលើ និងរបារ Home Indicator នៅខាងក្រោម។ បើអ្នកមិនប្រុងប្រយ័ត្ន អក្សរ ឬប៊ូតុងរបស់អ្នកនឹងត្រូវកាមេរ៉ាបាំង ឬត្រូវ User ចុចបិទ App ដោយអចេតនា។

នៅក្នុង React Native / Expo យើងប្រើ <SafeAreaView> ឬ Hook useSafeAreaInsets() ពីបណ្ណាល័យ react-native-safe-area-context។ វាបន្ថែម Padding ខាងលើ និងខាងក្រោមឱ្យត្រូវនឹងទូរស័ព្ទនីមួយៗដោយស្វ័យប្រវត្តិ៖

import { Text, StyleSheet } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

export default function HomeScreen() {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>មាតិកានេះមិនត្រូវ Notch បាំងទេ!</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    padding: 16,
  },
});

---

Navigation: ការផ្លាស់ទីដែលមានអារម្មណ៍ Native

នៅលើ Website អ្នកចុច Link ហើយទំព័រថ្មីលេចឡើង។ នៅលើទូរស័ព្ទ User រំពឹងថាអេក្រង់នឹងរុញចូល រំកិលឡើង ឬប្ដូរ Tab យ៉ាងរលូន។ App ស្ទើរតែទាំងអស់ប្រើគំរូបីនេះ៖

Bottom Tabs

ជា Navigation កម្រិតកំពូលរបស់ App ដូចនៅក្នុង Facebook, Telegram ឬ YouTube។ មាន Icon ពី ៣ ទៅ ៥ ហើយស្ថិតនៅខាងក្រោមជានិច្ច នៅក្នុងតំបន់បៃតងរបស់មេដៃ។

Stack (Push និង Pop)

ពេលចុចលើ Card មួយ អេក្រង់លម្អិតរុញ (Push) ចូលពីស្ដាំ។ ចុច Back ឬអូសពីគែមឆ្វេង វានឹងដក (Pop) ចេញវិញ ហើយអ្នកត្រឡប់ទៅកន្លែងដើម។

Bottom Sheet

ផ្ទាំងមួយរំកិលឡើងពីខាងក្រោម គ្របមួយផ្នែកនៃអេក្រង់។ ល្អសម្រាប់កិច្ចការខ្លីៗ ដូចជា Filter, Share ឬបន្ថែមកិច្ចការថ្មីរហ័ស។ User អូសចុះក្រោមដើម្បីបិទវា។

---

អនុវត្ត៖ ពិនិត្យ App ដែលអ្នកប្រើរាល់ថ្ងៃ

🎯 Hands-on Task (អនុវត្តផ្ទាល់)

1. ជ្រើសរើស App មួយដែលអ្នកប្រើរាល់ថ្ងៃ (ឧ. ABA Mobile, Telegram ឬ Grab)។
2. កាន់ទូរស័ព្ទដៃម្ខាង ហើយព្យាយាមចុចប៊ូតុងសំខាន់ៗតែដោយមេដៃ។ តើមួយណាពិបាកទៅដល់?
3. រកមើល Bottom Tabs, Stack និង Bottom Sheet នៅក្នុង App នោះ។ តើវាប្រើមួយណា នៅពេលណា?
4. ថតអេក្រង់មួយ ហើយគូសរង្វង់លើតំបន់ដែល App ទុកចន្លោះសម្រាប់ Notch និង Home Indicator។

អ្នកបានបញ្ចប់នៅពេលដែលអ្នកអាចពន្យល់ថា ហេតុអ្វីបានជាប៊ូតុងសំខាន់បំផុតរបស់ App នោះស្ថិតនៅកន្លែងដែលវាស្ថិតនៅ។

---

អ្វីដែលត្រូវចងចាំ

• Thumb Zone: ដាក់ប៊ូតុងសំខាន់នៅ ពាក់កណ្ដាលខាងក្រោម ដែលមេដៃទៅដល់ស្រួល។
• Tap Target: យ៉ាងតិច 44pt (iOS) ឬ 48dp (Android) ទោះ Icon តូចក៏ដោយ។
• dp / pt មិនមែន px ទេ ដើម្បីឱ្យទំហំដូចគ្នាលើគ្រប់អេក្រង់។
• Safe Area: កុំគូរ UI នៅក្រោម Notch ឬ Home Indicator។
• Navigation: Tabs សម្រាប់ផ្ទាំងមេ, Stack សម្រាប់ទំព័រលម្អិត, Sheet សម្រាប់កិច្ចការខ្លីៗ។

ជំពូកបន្ទាប់ យើងនឹងសរសេរកូដពិតប្រាកដ៖ បង្កើត App កត់ត្រាទម្លាប់ប្រចាំថ្ងៃ ហើយដាក់វាលើ Store ការសរសេរកូដជាក់ស្ដែង និងការដាក់លើ Store។