read_novel

แอป อ่านนิยาย และเขียนนิยาย

Figma

Figma G1

  • หน้าเปิดแอพ

0-Page-01.jpg คำอธิบาย เปิดมาหน้าแรกจะทำการโหลดข้อมูลของแอพโดยจะแสดงหน้านี้ก่อนเป็นอย่างแรกขงการเปิดแอพ

Figma G2

  • เข้าสู่ระบบ

0-Page-02.jpg

  • สมัครสมาชิก

0-Page-03.jpg

  • ลืมรหัสผ่าน

0-Page-04.jpg

  • รูปภาพผู้ใช้งาน

0-Page-05.jpg

คำอธิบาย หน้าต่อมาจะเป็นการเข้าสู่ระบบ ในที่นี้จะมีตั้งแต่การล็อกอินเข้าสู่ระบบ ด้วยข้อมูลที่สมัครไว้ก่อนหน้านี้ สมัครเข้าระบบเป็นครั้งแรกโดยจะมีการตั้งค่ารูปของ Account เป็นหน้าถัดไป และหน้าสุดท้ายคือหน้าของการลืมรหัสผ่านที่จะเชื่อกับหน้าล็อกอิน

Figma G3

  • หน้ารายการหลัก

0-Page-06.jpg

คำอธิบาย

หน้าแรกจะเป็นหน้าหลัก จะรวมผลงานนิยายทั้งหมดที่แอพมีไว้และนิยายใหม่ที่เพิ่งอัพเดตและจะมีปุ่มด้านล่างสุดแยกออกเป็น 3 ส่วน

Figma G4-1

  • รวมนิยาย(คนเขียน)

0-Page-07.jpg

คำอธิบาย หน้าแรก ของการเขียนนิยาย จะรวมนิยายที่ได้มีการเขียนไว้ทั้งหมดในหน้านี้

Figma G4-1.1

  • สารบัญ (คนเขียน)

0-Page-10.jpg

  • เรื่องนิยาย (คนเขียน)

0-Page-11.jpg

คำอธิบาย หลังจากเลือกที่นิยายเรื่องที่ต้องการแล้วก็จะสามารถเข้ามาแก้ไขนิยายเรื่องนั้นๆได้โดยจะมีปุ่มคำสั่งอยู่ด้านล่างสุด 3 ปุ่ม

Figma G4-1.1.1

  • เพิ่มตอน1 (คนเขียน)

0-Page-15.jpg

  • เพิ่มตอน2 (คนเขียน)

0-Page-16.jpg

  • เพิ่มตอน3 (คนเขียน)

0-Page-17.jpg

  • เพิ่มตอน4 (คนเขียน)

0-Page-18.jpg

คำอธิบาย ปุ่มแรก จะเป็นการเพิ่มตอนใหม่ให้กับนิยายเรื่องนั้น

Figma G4-1.1.2

  • บันทึกข้อมูล (คนเขียน)

0-Page-22.jpg

คำอธิบาย ต่อมาจะเป็นการบันทึกนิยายเรื่องที่เพิ่งเขียนเสร็จ

Figma G4-1.2

  • แก้ไขรูปเล่มตอนใหม่ (คนเขียน)

0-Page-19.jpg

คำอธิบาย ปุ่มที่สองจะเป็นการแก้ไขรูปเล่มหรือตอนใหม่

Figma G4-1.3

  • แก้ไขข้อมูลนิยาย (คนเขียน)

0-Page-20.jpg

  • แก้ไขชื่อเรื่อง-เรื่องย่อ (คนเขียน)

0-Page-21.jpg

คำอธิบาย ปุ่มที่สาม จะเป็นการแก้ไขรายละเอียดเชิงลึก ของนิยายที่เลือกอย่างเช่น รูปภาพปก เนื้อเรื่องย่อ ชื่อผู้แต่ง-นามปากกา และช่องทางติดต่อผู้เขียนนิยาย

Figma G4-2

  • เรื่องย่อของตอน (คนอ่าน)

0-Page-08.jpg

คำอธิบาย หน้าแรก ของนิยายหลังจากเลือกจากหน้าหลักแล้วจะบอกรายละเอียดแบบย่อของนิยายเรื่องนั้น

Figma G4-2.1

  • สารบัญ (คนอ่าน)

0-Page-12.jpg

คำอธิบาย หน้าต่อมา จะเป็นสาระบัญของนิยายเรื่องนั้น

Figma G4-2.2

  • เนื้อหาของตอน

0-Page-14.jpg

คำอธิบาย หน้าต่อมา หลังจากเลือกต่อที่ต้องการแล้วจะเป็นเป็นเนื้อหาของตอนนั้นๆ

Figma G4-3

  • บัญชีผู้ใช้

0-Page-09.jpg

คำอธิบาย หน้าแรกของ Account จะสามารถปรับโหมดกลางวันกลางคืนได้แก้ไข รายละเอียดของผู้ใช้และปุ่ม Logout สำหรับออกจากระบบ

Figma G4-3.1

  • แก้ไขข้อมูลผู้ใช้

0-Page-13.jpg

คำอธิบาย หน้าต่อมาของ Accountจะใช้ในการแก้ไขข้อมูลของผู้ใช้งาน

ผลลัพธ์การรันแอป

หน้าแรก

image.png

  • เป็นหน้าที่เเสดง 3 วินาที เเล้วก็จะไปหน้า login

หน้า Login

image.png

  • login โดย google ได้โดยที่ไม่จำเป็นต้องสมัครเพราะจะสมัครเเละยืนยันตัวตนให้อัตโนมัติ

หน้า Register

image.png

หน้า อ่านนิยาย

image.png

หน้าผลงานของฉัน

image.png

หน้า Profile

image.png

หน้า แก้ Profile

image.png

หน้ารายละเอียดนิยาย

image.png image.png

หน้าเนื้อหาตอน

image.png

หน้าแก้รายละเอียดนิยาย

image.png

หน้าแก้รายละเอียด

image.png image.png image.png image.png

หน้ารายละเอียดนิยาย (ผู้เขียน)

image.png image.png

หน้าเขียนนิยายเเละเพยแพร์นิยาย

image.png

GitHub

View Github