ความคืบหน้างาน ไฟล์ต้นฉบับ

06 — UX/UI

Source: proposal §4.10 and mockup images 8–13 (copied to assets/ui/). Mockups are illustrative concept designs. Names, numbers and dates in them are sample data.

Internal design workspace (31 ต.ค. 2569): Mockup workspace adds screen/variant/component artifacts under mockups/ and Sitemap/Page flow/Screen Listing in the tracker. New wireframes and inferred screen-step/navigation mappings remain proposals; original proposal images below retain their reference status.

General principles [confirmed in proposal]

  • Easy to use, clear information, tailored to the user's role.
  • Consistent screen patterns across channels.
  • Responsive design.
  • Role-based menus. Menus differ by education level.
  • Accessibility considered.

Visual language [mockup]

  • TNSU logo, top-left. Brand colours: deep navy/blue sidebar and header, with yellow accent on "TNSU".
  • Card-based dashboards with pastel icon tiles, KPI cards (value + trend ↑% vs. previous period + "ดูรายละเอียด" link), donut and bar charts.
  • Thai UI copy. Buddhist-era dates.
  • Bottom tab bar on mobile. Collapsible left sidebar on web.

Per-channel guidelines and mockup content

Student Mobile App (TNSU-06): assets/ui/student-mobile-app.png

Guideline: focus on frequently used info (timetable, grades, requests, finance, notifications). Menus are specific to education level. Mockup:

  • Profile card: name, student ID, faculty, major, campus, and a "ดูข้อมูลส่วนตัว" link.
  • Quick actions: ลงทะเบียนเรียน, ผลการเรียน, ตารางเรียน, ยื่นคำร้อง, ชำระเงิน, เมนูเพิ่มเติม.
  • Today's timetable: time, course name and code, room, status chip (กำลังจะเริ่ม / ถัดไป / ภาคบ่าย).
  • Summary cards: outstanding fees with due date, latest GPA, request status.
  • Banner carousel, then announcements.
  • Bottom tabs: หน้าหลัก, การศึกษา, กีฬา, แจ้งเตือน (badge), เพิ่มเติม.

Parent Mobile App (TNSU-07): assets/ui/parent-mobile-app.png

Guideline: make it easy to follow children, including several children under granted permissions. Mockup:

  • Greeting, "parent of N students", and a "จัดการข้อมูลผู้ปกครอง" link.
  • Child switcher cards (school child ม.5/1 and university child ปี 1).
  • 12 tiles: ข้อมูลการศึกษา, ผลการเรียน, การเข้าเรียน, การลา, หอพัก, สุขภาพ, กีฬาและการแข่งขัน, ค่าใช้จ่าย, ประกาศ, เอกสาร, ข้อความจากโรงเรียน/มหาวิทยาลัย, เมนูเพิ่มเติม.
  • "วันนี้ของลูก" (child's day): classes and training sessions.
  • Cards: GPA, attendance % (e.g. 19/20 days), fee status.
  • Bottom tabs: หน้าหลัก, ข้อมูลบุตรหลาน, กิจกรรม, แจ้งเตือน, เพิ่มเติม.

Student Web Portal (TNSU-08): assets/ui/student-web-portal.png

Guideline: for detail-heavy tasks such as course registration, forms, attachments and reviewing academic records. Mockup:

  • Sidebar: หน้าหลัก, ข้อมูลส่วนตัว, ลงทะเบียนเรียน, ตารางเรียน, ผลการเรียน, คำร้องออนไลน์, การเงินและการชำระเงิน, ทุนการศึกษา / กยศ., กิจกรรมและกีฬา, ประกาศ/ข่าวสาร, เอกสารของฉัน.
  • Top cards: registration (ลงทะเบียน / เพิ่ม-ถอน), latest GPA, outstanding balance, my requests.
  • Today's timetable, academic calendar, announcements with category tabs (ทั้งหมด / การศึกษา / ทุนการศึกษา / กิจกรรม / กีฬา), and a customisable quick menu (ปรับแต่งเมนู).

Staff Backoffice (TNSU-09): campus variant, assets/ui/staff-backoffice-campus.png

Guideline: menus grouped by function; search, filtering, bulk operations and a queue of pending work. Mockup (campus, academic officer):

  • Global search: "ค้นหานักศึกษา เลขประจำตัว ชื่อ-นามสกุล รายวิชา คำร้อง".
  • Unit selector, notifications, user menu.
  • Sidebar: หน้าหลัก, ข้อมูลนักศึกษา, รับสมัครและคัดเลือก, ทะเบียนและประมวลผล, หลักสูตรและแผนการเรียน, การเรียนการสอน, ผลการเรียน, คำร้องและเอกสาร, การเงินและค่าธรรมเนียม, ทุนการศึกษา / กยศ., กิจกรรมและศึกษา, หอพัก, นักกีฬาและการแข่งขัน, ศิษย์เก่า, รายงานและสถิติ, ตั้งค่าระบบ.
  • KPIs: total students, registered (with %), not registered, average attendance.
  • Chart of students by faculty (total vs. registered), donut of registration status.
  • Latest requests table with status tabs (ทั้งหมด / รอดำเนินการ / อนุมัติแล้ว / ไม่อนุมัติ), with columns: request no., name, type, date, status, action.
  • Activity calendar and today's activities.

Staff Backoffice: sports-school variant, assets/ui/staff-backoffice-sports-school.png

Same layout, but with a school-specific menu: ข้อมูลนักเรียน, รับสมัครและคัดเลือก, ทะเบียนและประมวลผล, ตารางเรียน, ผลการเรียน, การเข้าเรียน / การลา, หอพัก, กิจการนักเรียน, นักกีฬาและการฝึกซ้อม, การแข่งขัน, สุขภาพและโภชนาการ, รายงานและสถิติ, ตั้งค่าระบบ.

  • Chart of students per grade (ม.1–ม.6).
  • Donut of student type: นักเรียนทั่วไป, นักกีฬาความสามารถพิเศษ, ทุนการศึกษา, อื่น ๆ.
  • Activities include morning training (ฝึกซ้อมเช้า) and student-affairs meetings.

Executive Dashboard (TNSU-10): assets/ui/executive-dashboard.png

Guideline: KPIs, charts and reports with overview and drill-down by campus, school and period. Mockup:

  • Filters: academic year and semester.
  • Sidebar: ภาพรวมทั้งมหาวิทยาลัย, ข้อมูลนักเรียน/นักศึกษา, รับสมัคร, การลงทะเบียน, ผลการเรียน, บุคลากร, งบประมาณและการเงิน, หอพักและสวัสดิการ, กีฬาและกิจกรรมนักศึกษา, รายงานและสถิติ.
  • KPI cards: total learners, campus students, school students, staff (each with YoY trend).
  • Thailand map of units, with tabs for campuses (17) and schools (13) and a ranked table.
  • 5-year learner trend (2564–2568), campus vs. school ratio.
  • Admission (target vs. applicants), registration status (registered / not / cancelled-suspended), average GPA, graduation rate.
  • Budget breakdown (personnel / operating / capital / subsidy), student activities by category, and news.