Deliverable 1 of 3 · Wireframe + Screen Flow · sc-1-home

เส้นทางจอ→จอ
ของ นิตยสารเมือง

The screen-to-screen
magazine journey

โครงร่างความคิด (low-fi) ของทั้งระบบ — ตั้งแต่เปิดแอปครั้งแรก เลือกโหมดการอ่าน รับปกประจำเมือง ปรับตามบทบาท จนถึงบริการที่ลื่นไหลตามขณะนั้น และการ “ให้คืน” หลังจบทริป · ทุกจอผูกกับ contract เดียวกับหน้าจริง

A low-fidelity blueprint of the whole system — from first open, choosing a reading mode, receiving the city's cover, adapting to your role, to context-aware service and giving back after the trip · every screen maps to the same contract as the live build.

บล็อกเนื้อหาContent block
ปุ่มหลัก / CTAPrimary / CTA
เน้น / สถานะAccent / status
verb_noun_statetelemetry eventtelemetry event
00แผนผังทั้งระบบSystem flow map

ภาพรวมการไหลของทั้งระบบ

How the whole system flows

เส้นทางหลักเป็นเชิงเส้น แต่แตกกิ่งที่ “เครือข่าย” — locale · narrator · gateway ทับซ้อนบน descriptor เดียว แล้วบรรจบที่โซน Give-Back หลังทริป

The spine is linear, but it branches at the network layer — locale · narrator · gateway overlay one descriptor, then converge at the post-trip Give-Back zone.

01 · Entry

เปิดแอป

App open

Splash · auth · กู้ค่า prefs จาก DB

Splash · auth · restore prefs from DB

02 · Access

เลือกโหมด

Reading mode

สูงอายุ · มือใหม่ · ทั่วไป · ผู้บริหาร

Senior · guided · standard · exec

03 · Tenant

ปกเมือง

City cover

พัทยา · เชียงราย · อุดร

Pattaya · Chiang Rai · Udon

04 · Persona

เลนส์บทบาท

Persona lens

อารมณ์ · ภารกิจ · ระดับ · ความอยากใหม่

Feeling · mission · mastery · novelty

05 · Service

บริการพอดีขณะ

Service · the moment

Place · Time · Context · Intent

Place · Time · Context · Intent

แกนเครือข่าย — ทับบน descriptor เดิมnetwork axes — overlay the same descriptor
06 · Locale

ข้ามพรมแดน

Multi-locale

สกุลเงิน · เขตเวลา · ภาษา · วัฒนธรรม

Currency · timezone · language · culture

07 · Narrator

เสียงของเมือง

Voices of the city

8 ผู้เล่า สลับเลนส์เล่าเรื่อง

8 narrators, switchable lens

08 · Gateway

ประตูเครือข่าย

Network gateway

BRICS · EU · MICE · นักศึกษา · EV

BRICS · EU · MICE · students · EV

หลังทริป — บรรจบpost-trip — converge
09 · Give-Back

น้ำใจ · ส่งต่อ · เล่าเรื่อง

Donate · pay-it-forward · storytelling

บริจาคโปร่งใส · ขอบคุณคนไทย · เล่าความทรงจำกลับเข้า feed เมือง (network moat)

Transparent donations · thank locals · stories flow back into the city feed (network moat)

01Entry · Onboarding

Onboarding Wizard · ถามให้ครบก่อนเข้า

Onboarding wizard · ask enough, once

ผู้ใช้ใหม่เดินผ่าน wizard ทีละขั้น (1 คำถามต่อจอ ดีกับมือใหม่/ผู้สูงวัย) — เก็บครบทั้ง 4D + access + อารมณ์ ก่อนจะ compose หน้าแรกที่ "ตรงกับเขา" · ผู้ใช้เก่าข้ามทั้งหมดเพราะ prefs อยู่ใน DB

New users step through a wizard (one question per screen — friendly for low-IT/senior) capturing the full 4D + access + mood before the home is composed for them · returning users skip it entirely since prefs live in the DB.

T
0 · สแปลช + auth0 · Splash + auth
เลือกภาษาLanguage
TH
EN
中文
日本
ถัดไปNext
1 · ภาษา · lang1 · Language · lang
วันนี้มาในบทบาทใด?Your role today?
คู่รัก / Couple
ครอบครัว / Family
ดูแลผู้สูงวัย / Carer
ทีมงาน · MICE
2 · บทบาท · persona2 · Role · persona
อ่านแบบไหนสบายสุด?How do you read best?
สูงอายุ
มือใหม่
ทั่วไป
ผู้บริหาร
3 · โหมดอ่าน · access3 · Reading mode · access
ตอนนี้รู้สึก / อยากได้อะไร?Feeling / want now?
หิว
เหนื่อย
ว้าว
ด่วน
ข้ามได้skippable
4 · อารมณ์ · service4 · Mood · service
มาจากต่างชาติ?From abroad?
สัญชาติ · สกุลเงิน
เขตเวลา
เฉพาะต่างชาติ · ข้ามได้foreigners only · skippable
5 · ต่างชาติ · locale5 · Abroad · locale
พัทยาPattaya
หิว → กิน ขึ้นก่อนhungry → eat first
AI plan
Wallet
6 · เข้า home ที่ปรับแล้ว6 · Personalised home
เปิด wizard ตัวจริง (กดได้)Open the live wizard (clickable)
ทำไมเป็น wizard ไม่ใช่จอเดียวWhy a wizard, not one screen

1 คำถามต่อจอ + แถบความคืบหน้า = ภาระคิดต่ำ เหมาะกับ มือใหม่/ผู้สูงวัย · ทุกขั้น ข้ามได้ และมีค่า default · จบแล้ว backend จึง compose หน้าแรกที่ตรงกับ 4D + access + อารมณ์ทันที · ผู้ใช้เก่า prefs อยู่ใน DB → ข้าม wizard ทั้งหมด

One question per screen + a progress bar = low cognitive load, ideal for low-IT/senior users · every step is skippable with a sensible default · on finish the backend composes a home matching the full 4D + access + mood · returning users have prefs in the DB and skip the wizard.

eventstart_onboarding_wizard · set_lang · set_persona · set_access · set_mood · set_locale · complete_onboarding_once · flow_abandon
apiเขียนผลลง PUT /user/preferences · แล้วเรียก POST /layout/composepersist via PUT /user/preferences, then POST /layout/compose
4Dtenant (จาก gateway/เมือง) · persona · lang · service(mood) + accesstenant (from gateway/city) · persona · lang · service(mood) + access
02Access Mode · แกนที่ 4

โหมดการอ่าน 4 แบบ · จอเดียวกัน

Four reading modes · same screen

โหมดไม่เปลี่ยนเนื้อหา (descriptor เดิม) — เปลี่ยนแค่ ขนาดอักษร · ความหนาแน่น · จำนวนบล็อกต่อจอ · วิธีนำทาง

Modes never change content (same descriptor) — only type scale · density · blocks-per-screen · navigation.

อักษรใหญ่ +40%Type +40%
ปุ่มเดียว ≥56pxOne btn ≥56px
1 col
ผู้สูงอายุ · CalmSenior · Calm
Step 1 / 4
ไอคอน + คำกำกับIcon + label
Help
มือใหม่ · GuidedLow-IT · Guided
Cover
A
B
C
D
37 blocks ↓
ทั่วไป · FullStandard · Full
3 เรื่องต้องตัดสินใจ3 decisions
OK
Deleg
#
KPI
ผู้บริหาร · BriefExecutive · Brief
Step 02

data-access สลับ token

data-access swaps tokens

data-access="elder | guided | smart | exec" ปรับ font-scale · density · จำนวนบล็อก · โหมดนำทาง โดยไม่แตะ backend · แกนนี้ผสมอิสระกับ tenant + persona เช่น “พัทยา × ผู้สูงอายุ × โหมดเที่ยว”

data-access="elder | guided | smart | exec" tunes font-scale · density · block count · navigation without touching the backend · it mixes freely with tenant + persona, e.g. "Pattaya × Senior × Explore".

eventset_access_elder · set_access_exec
a11yWCAG-aligned · contrast AA+ · hit ≥44px (สูงอายุ ≥56px)WCAG-aligned · AA+ contrast · hit ≥44px (senior ≥56px)
03Multi-Tenant · ปกประจำเมือง

หนึ่งเมือง · หนึ่งปก

One city · one cover

โครงเหมือนกัน (descriptor เดียว) แต่ theme token ต่างกัน — สี · อักษรหัว · เรื่องเด่น · issue no. เปลี่ยนตามเมือง

Same skeleton (one descriptor), different theme tokens — colour · display type · cover story · issue no. change per city.

Pattaya
Pattaya · 142
Chiang Rai
Chiang Rai · 088
Udon
Udon · 053
Step 03

ปก = masthead + เรื่องเด่น + issue

Cover = masthead + cover story + issue

แตะไอคอนเมืองบน header เพื่อสลับ tenant — ปก สี และ accent เปลี่ยนทั้งฉบับทันที พัทยา (Magenta/Gold · ทะเล·ราตรี·MICE) · เชียงราย (Teal · Spartan) · อุดร (Terracotta · พืชสวนโลก)

Tap the city icon in the header to switch tenant — cover, colour and accent reskin the whole issue instantly. Pattaya (Magenta/Gold · sea·night·MICE) · Chiang Rai (Teal · Spartan) · Udon (Terracotta · Horti Expo).

eventswitch_tenant_pattaya
contractX-Tenant-ID header · descriptor ไม่เปลี่ยน · เปลี่ยนแค่ theme tokenX-Tenant-ID header · descriptor unchanged · only theme tokens swap
04Multi-Persona · เลนส์บทบาท

ผู้อ่านคนเดียว · หลายบทบาท

One reader · many roles

อารมณ์: หิว → คอลัมน์อาหารขึ้นก่อนFeeling: hungry → food first
Eat
Rest
เพราะคุณค้นหา…Because you searched…
home จัดใหม่ตามบทบาทhome reorders by role
Step 04

4 สัญญาณกำหนดคอลัมน์แรก

Four signals set the first column

อารมณ์ (Feeling) · ภารกิจ (Mission) · ประสบการณ์สั่งสม (Mastery) · ความอยากใหม่ (Novelty) — บทบาทที่กำลังสวมอยู่ตัดสินว่าบล็อกไหนลอยขึ้นหน้าแรก · ทุกการเลือกของ AI มี “Why this?” chip กำกับเหตุผล

Feeling · Mission · Mastery · Novelty — the role you currently wear decides which block floats to the top · every AI choice carries a "Why this?" chip explaining itself.

eventswitch_persona_lens · open_why_chip
presetcross-axis เช่น “พาพ่อแม่เที่ยว” สลับ 3 แกนทีเดียวcross-axis e.g. "take parents out" flips 3 axes at once
05Multi-Service · บริการพอดีขณะ

นิตยสารพลิกเองตามสถานการณ์

The magazine reflows to the moment

Cover
AI plan
MICE
Wallet
13:00 · ปกติ13:00 · normal
🌧 วิ่งหนีฝนBeat the rain
เรียกรถ 3 นาทีCar in 3 min
อาหารในโรงแรมIn-hotel dining
Spa
17:30 · ฝนตก17:30 · raining
Step 05

อ่าน 4 สัญญาณก่อนเสิร์ฟ

Reads four signals before serving

Place · Time · Context · Intent — AI ไม่ยัดทุกบริการพร้อมกัน แต่จัดลำดับให้สิ่งที่ “พอดีขณะนั้น” ลอยขึ้นก่อน เช่น 17:30 ฝนเริ่มตก กำลังเดินกลับโรงแรม คอลัมน์ “วิ่งหนีฝน” ขึ้นหน้าแรกโดยไม่ต้องค้นหา

Place · Time · Context · Intent — AI never dumps every service at once; it ranks what fits the moment first. At 17:30 with rain starting on the walk home, the "beat the rain" column rises to the top with no search.

eventserve_contextual_card · open_section_discover
05bทำไมทุกครั้งไม่เหมือนเดิมWhy every visit differs

หน้าแรกเดียว · 37 บล็อกเดิม · เรียงใหม่ตามคุณ

One home · same 37 blocks · re-ordered for you

ทั้งสามจอข้างล่างคือ sc-1-home ตัวเดียวกัน และ บล็อกชุดเดียวกัน — แต่ POST /layout/compose จัดลำดับ/เน้น/ซ่อน ต่างกันตาม persona · อารมณ์ · โหมดการอ่าน ที่ได้จาก wizard · ทุกบล็อกที่ลอยขึ้นมีป้าย “Why this?” กำกับเหตุผล

All three below are the same sc-1-home with the same block set — but POST /layout/compose ranks/emphasises/hides them differently per persona · mood · reading mode from the wizard · every surfaced block carries a "Why this?" chip.

mood · “หิว”mood · "hungry"
editors-choice · กินeditors-choice · eat
popular-places
hero-carousel
wallet-strip
mice · ↓ ลงล่าง
A · ทั่วไป · คู่รัก · หิว · 13:00A · standard · couple · hungry
greeting · ตัวใหญ่greeting · large
wifi + healthwifi + health
timeline · trip
ปุ่มช่วยเหลือhelp button
B · ผู้สูงอายุ · ดูแลพ่อแม่B · senior · caring for parents
exec brief · 3 เรื่องตัดสินใจexec brief · 3 decisions
mice-highlight
merchant-wallet
budget
ที่เหลือ · ย่อ/ซ่อนrest · condensed
C · ผู้บริหาร · MICEC · executive · MICE
กลไก · ฝั่ง backend เป็นคนจัดMechanism · the backend decides

Frontend ส่ง 4D + access + mood ไปที่ POST /layout/compose → backend คืน descriptor tree ที่ จัดลำดับบล็อกใหม่ + ตั้ง flag เน้น/ซ่อน · Frontend แค่ render ตามนั้น (ไม่มี business logic ใน client) · เนื้อหาแต่ละบล็อกมาจาก GET /blocks/{surface}/{block_id} เสียบเข้า data-slot · เหตุผลการจัดลำดับ = ป้าย “Why this?” ที่ลอยมากับ descriptor

The frontend sends 4D + access + mood to POST /layout/compose → the backend returns a descriptor tree that re-orders blocks and sets emphasise/hide flags · the frontend just renders it (no client business logic) · per-block content comes from GET /blocks/{surface}/{block_id} into the data-slot hooks · the ranking reason is the "Why this?" chip carried in the descriptor.

apiPOST /layout/compose → descriptor (order + emphasise/hide + why) · GET /blocks/{surface}/{block_id}
eventswitch_persona_lens · set_mood · open_why_chip · reorder_compose
ของจริงliveลองสลับปุ่ม access ใน home.html เห็นความหนาแน่น/ขนาดเปลี่ยนจริง — ส่วนการ "เรียงบล็อกใหม่ตาม persona/mood" รอ /layout/compose จาก backendToggle the access buttons in home.html to see density/size change live — the persona/mood re-ordering awaits /layout/compose from the backend
06–08Network axes · ทับบน descriptor

Locale · Narrator · Gateway

Locale · Narrator · Gateway

สามแกนเครือข่ายที่ทับบน descriptor เดียว — ปรับนิตยสารให้ตรงผู้อ่านข้ามชาติ มุมเล่า และกลุ่มที่เข้ามา

Three network axes overlaying one descriptor — tuning the magazine to cross-border readers, narrative lens and the incoming group.

¥ ฿ €
สกุลเงิน · เรตสดCurrency · live
เขตเวลา · jet-lagTimezone · jet-lag
แปลป้าย/เมนูสดLive sign/menu
Eat · Talk · Do
06 · Locale06 · Locale
คนประจำถิ่นLocal lens
เรื่องเด่นเปลี่ยนตามผู้เล่าStory shifts by narrator
8 voices
07 · Narrator07 · Narrator
BRICS
EU
MICE
Edu
EV taxi
+ เพิ่มได้+ extend
08 · Gateway08 · Gateway
Step 06–08

เปิดกว้าง · ขยายได้ไม่แตะ frontend

Open · extensible without touching frontend

Locale ปรับสกุลเงิน เขตเวลา ภาษา และบริบทวัฒนธรรม (Eat·Talk·Do) สองทาง · Narrator สลับ “ผู้เล่า” 8 บทบาทแล้วทั้งฉบับจัดใหม่ (data/network moat) · Gateway แต่ละประตูคือชุด tenant/persona/locale/service ที่จัดมาพอดีกลุ่ม — เพิ่ม gateway ใหม่ได้โดย backend ประกอบ descriptor เอง

Locale tunes currency, timezone, language and two-way cultural context (Eat·Talk·Do) · Narrator swaps 8 storyteller lenses and the whole issue re-lays out (a data/network moat) · Gateway bundles a tenant/persona/locale/service set per group — new gateways drop in as the backend composes the descriptor.

eventswitch_narrator_lens · set_locale_currency · enter_gateway_mice
09Give-Back · หลังทริป

ไม่ได้มาแค่รับ — แต่อยากให้คืน

Not just taking — giving back

ทริปจบแล้ว · ขอบคุณTrip done · thanks
บริจาค (โปร่งใส)Donate (transparent)
ขอบคุณคนไทยThank locals
เล่าความทรงจำTell your story
ส่งต่อคนถัดไปPay it forward
trigger หลังเช็คเอาท์post-checkout trigger
Feed เมืองCity feed
เรื่องเล่า + รูปStories + photos
กำแพงน้ำใจGratitude wall
บรรจบกลับ feedconverge to feed
Step 09

น้ำใจ · ส่งต่อ · เล่าเรื่อง

Generosity · pay-it-forward · storytelling

หลังเช็คเอาท์ โซน “ให้คืน” โผล่ขึ้น — บริจาคให้กองทุนเมือง/วัด/ชุมชนแบบเห็นปลายทาง · ส่งคำขอบคุณถึงคนหรือร้านที่ประทับใจ · เล่าความทรงจำกลับเข้า feed เมือง กลายเป็นเนื้อหาจริงที่ลอกไม่ได้ (network moat) · มี trust ribbon กำกับปลายทางบริจาค

After checkout a Give-Back zone appears — donate to city/temple/community funds with a visible destination · thank the people or shops that delighted you · tell your story back into the city feed, becoming authentic content rivals can't copy (network moat) · a trust ribbon vouches for every donation endpoint.

eventopen_giveback_zone · submit_donation · post_trip_story
trustTAT · TCEB · PDPA · เห็นปลายทางทุกบริจาคTAT · TCEB · PDPA · visible donation destination
3 ชั้นส่งคู่กันทุก sectionThree layers shipped per section

เอกสารนี้คือชั้น Wireframe + Screen flow · ดูชั้น หน้าจริง (hi-fi, bilingual, brand CI) ได้ที่ home.html · และแก่นแนวคิด/Brand CI ที่ concept.html

This document is the Wireframe + Screen flow layer · see the live screen layer (hi-fi, bilingual, brand CI) at home.html · and the concept / Brand CI at concept.html

10ลำดับบล็อกจริงReal compose order

37 บล็อกจริงของหน้าแรก · ตามที่ build

The home's real 37 blocks · as built

ลำดับ default ที่ /layout/compose คืนมา (A1a→A11s) จัดเป็นโซน — ตรงกับ home.html ทุกบล็อก · persona/mood แค่สลับลำดับภายใน ไม่เพิ่ม/ลบ block_id

The default order returned by /layout/compose (A1a→A11s) grouped by zone — 1:1 with home.html · persona/mood only re-rank within this, never add/remove block_ids.

ส่วนหัว (sticky)header (sticky)
โลโก้ + แถบค้นหา/ถาม AI + สลับโหมดการอ่าน/เมือง/ภาษา · ติดบนตลอดเวลาเลื่อนLogo + search/ask-AI + access/city/language switch · stays pinned while scrolling
โลโก้Logologo · A1-logo
แถบบนTop barheader-group
เลือกโหมดอ่านReading mode.shared.header-group
เว้นระยะSpacer.shared.header-spacer
ตอนนี้ · NowNow
สิ่งที่เห็นก่อน — ทักทายผู้ใช้ · การ์ดอารมณ์/อากาศ (ถาม AI 1 ครั้ง) · ทริปที่กำลังดำเนินอยู่First glance — greeting · mood/weather AI card · the trip currently in progress
ทักทายGreetingA1a · greeting
ถามอารมณ์ (AI)Mood (AI)A1b · mood-card
ทริปที่กำลังไปActive tripA2 · trip-strip
วางแผน · PlanPlan
เครื่องมือวางแผน — ให้ AI จัดทริป · ค้นหา · MICE/ประชุม · จองโรงแรม · ฮับก่อนทริปและเส้นทางPlanning tools — AI trip plan · search · MICE · hotel booking · pre-trip & route hubs
AI จัดทริปAI trip planA3 · ai-plan-hero
ค้นหาSearchA3 · search
ประชุม/อีเวนต์Meetings · MICEA4 · mice-highlight
จองโรงแรมHotelsA4a · hotel-booking
ฮับก่อนทริป/เส้นทางPre-trip · routesA4b · subportals
คัดสรร · PicksPicks
ของที่บรรณาธิการคัดมาให้ — ที่เที่ยวเด่น · ตลาดของฝาก · ของที่ระลึกคัดสรรEditor-curated — featured spots · souvenir avenue · curated keepsakes
บรรณาธิการแนะนำEditor pickA4c · editors-choice
ตลาดของฝากSouvenir marketA4d · avenue
ของที่ระลึกคัดสรรCurated giftsA4d2 · curated-souvenirs
วันนี้ · LiveLive
อัปเดตสดวันนี้ — ข่าว/สุขภาพ · ถ่ายทอดสดจับฉลาก · ชุดต้อนรับส่งโรงแรมToday, live — news/health · lottery livestream · welcome pack delivery
ข่าว + สุขภาพNews + healthA4u · news-health
จับฉลากสดLive drawA4v · lottery
ชุดต้อนรับWelcome packA4w · welcome-pack
กระเป๋า · WalletWallet
เงินและสิทธิ์ — แต้ม/กระเป๋า · งบประมาณทริป · คลังคูปองส่วนลดMoney & perks — points/wallet · trip budget · coupon vault
แต้ม/กระเป๋าPoints · walletA5 · wallet-strip
งบทริปTrip budgetA5a · budget
คลังคูปองCouponsA5a · coupon-vault
ทริป · TripTrip
ระหว่างอยู่ในทริป — ไทม์ไลน์กิจกรรม 24 ชม. · Wi-Fi อัตโนมัติหลังเช็คอินโรงแรมWhile on the trip — 24h activity timeline · auto Wi-Fi after hotel check-in
ไทม์ไลน์TimelineA5a · timeline
Wi-Fi โรงแรมHotel Wi-FiA5a · wifi
สำรวจ · ExploreExplore
สำรวจลึกขึ้น — ข่าวแพลตฟอร์ม · บริการเสริมก่อนทริป · ดนตรีไทย · แผนที่ · ร้านค้า · แนะนำเพิ่มGo deeper — platform news · pre-trip add-ons · Thai music · map · merchants · more for you
ข่าวแอปApp newsA5b · platform-news
เตรียมก่อนเที่ยวPre-trip prepA5b1 · pretrip-addons
ดนตรีไทยThai musicA5b1b · thai-music
แผนที่เที่ยวTourism mapA5b2 · tourism-map
ร้านค้ารอบเมืองMerchantsA5b3 · merchants-nearby
แนะนำเพิ่มMore for youA5c · more-for-you
เที่ยว · DiscoverDiscover
เที่ยวชม — กรองตามหมวด · แนะนำแบบ carousel · สถานที่ยอดนิยม · อีเวนต์ · รวม 8 บริการDiscover — tag filter · recommended carousel · popular places · events · 8-service overview
กรองหมวดFilterA6 · tag-filter
แนะนำสำหรับคุณFor youA7 · hero-carousel
ยอดนิยมPopularA8 · popular-places
อีเวนต์EventsA9 · events-list
รวมบริการAll servicesA9b · services-overview
คอนโซล · ConsoleConsole
สำหรับธุรกิจ/ผู้ประกอบการ — วิดีโอ 4K · คอนโซล operator 6 surfaces · กระเป๋างบแคมเปญร้านค้าFor business/operators — 4K video · operator console (6 surfaces) · merchant campaign wallet
วิดีโอแนะนำFeatured videoA10 · featured-video
คอนโซลร้านค้าOperator consoleA11 · operator-strip
กระเป๋าแคมเปญCampaign walletA11s · merchant-wallet