ພວກເຮົາໄດ້ເຫັນຫຼາຍບໍລິສັດກ້າວໄປສູ່ຄວາມສະອາດ, ປະສົບການທີ່ລຽບງ່າຍ ສຳ ລັບຜູ້ໃຊ້ເວບໄຊທ໌. ບໍ່ວ່າທ່ານຈະເປັນຜູ້ອອກແບບ, ນັກພັດທະນາ, ຫຼືທ່ານຮັກພຽງແຕ່ເວບໄຊທ໌, ທ່ານສາມາດຮຽນຮູ້ບາງຢ່າງໂດຍການພິຈາລະນາເບິ່ງວ່າພວກເຂົາເຮັດແນວໃດ. ກຽມພ້ອມທີ່ຈະໄດ້ຮັບການດົນໃຈ!
- Animation
ອອກເດີນທາງຫລັງວັນເວລາທີ່ເຕັມໄປດ້ວຍເວັບໄຊທ໌້, ເຊິ່ງເຕັມໄປດ້ວຍກະແສໄຟຟ້າ, ກະດານເຄື່ອນໄຫວ, ປຸ່ມ, ໄອຄອນແລະ hamsters ເຕັ້ນ, ພາບເຄື່ອນໄຫວໃນມື້ນີ້ ໝາຍ ເຖິງການສ້າງການກະ ທຳ ແບບໂຕ້ຕອບ, ຕອບສະ ໜອງ ທີ່ຊ່ວຍເພີ່ມການເລົ່າເລື່ອງແລະໃຫ້ປະສົບການຂອງຜູ້ໃຊ້ທີ່ອຸດົມສົມບູນ.
ຕົວຢ່າງຂອງພາບເຄື່ອນໄຫວທີ່ອຸດົມສົມບູນປະກອບມີການໂຫຼດພາບເຄື່ອນໄຫວ, ການ ນຳ ທາງແລະເມນູ, ພາບເຄື່ອນໄຫວທີ່ເລື່ອນ, ຫ້ອງວາງສະແດງແລະການສະໄລ, ພາບເຄື່ອນໄຫວການເຄື່ອນໄຫວ, ການເລື່ອນ, ແລະພາບເຄື່ອນໄຫວພື້ນຖານແລະວິດີໂອ. ກວດເບິ່ງເວບໄຊທ໌ນີ້ຈາກ Beagle, ເວທີການຄຸ້ມຄອງການສະ ເໜີ:
ກົດເຂົ້າເບິ່ງເພື່ອໃຫ້ເຫັນພາບເຄື່ອນໄຫວ JavaScript ແລະ CSS ທີ່ ໜ້າ ຕື່ນຕາຕື່ນໃຈຂອງ Beagle ເມື່ອທ່ານເລື່ອນເວັບໄຊທ໌ຂອງພວກເຂົາ.
ພາບເຄື່ອນໄຫວທີ່ອຸດົມສົມບູນຍັງສາມາດເຫັນໄດ້ໃນການໂຕ້ຕອບກັບຈຸນລະພາກ. ຍົກຕົວຢ່າງ, ໃນ LinkedIn, ຜູ້ໃຊ້ສາມາດເລື່ອນບັດ ສຳ ລັບລາຍການທີ່ມີການເລືອກແບບປາກົດຂື້ນ, ແລະຫຼັງຈາກນັ້ນເລືອກທີ່ຈະຂ້າມເລື່ອງຫຼື ດຳ ເນີນການອື່ນໆ.
ພາບເຄື່ອນໄຫວ GIF ໄດ້ (ຟື້ນຟູດ້ວຍຄວາມຍິນດີ?) ແລະສາມາດ ນຳ ໃຊ້ເພື່ອຈຸດປະສົງທີ່ແຕກຕ່າງກັນຫຼາຍຢ່າງ, ລວມທັງການຕະຫລົກ, ການສາທິດແລະແມ້ແຕ່ ສຳ ລັບຕົບແຕ່ງ.
- ການອອກແບບອຸປະກອນການ
ການອອກແບບອຸປະກອນການ, ພາສາການອອກແບບທີ່ພັດທະນາໂດຍ Google ຂື້ນກັບອົງປະກອບຂອງການອອກແບບທີ່ມີພື້ນຖານໃນການພິມ - typography, ຕາຂ່າຍໄຟຟ້າ, ພື້ນທີ່, ຂະ ໜາດ, ສີ, ແລະການ ນຳ ໃຊ້ຮູບພາບ - ພ້ອມດ້ວຍພາບເຄື່ອນໄຫວທີ່ມີການຕອບສະ ໜອງ ແລະການຫັນປ່ຽນ, ແຜ່ນຮອງແລະຜົນກະທົບເລິກເຊັ່ນ: ການເຮັດໃຫ້ມີແສງແລະເງົາ ສະ ໜອງ ປະສົບການຂອງຜູ້ໃຊ້ທີ່ແທ້ຈິງ, ມີສ່ວນຮ່ວມແລະມີການໂຕ້ຕອບ.
ການອອກແບບວັດສະດຸໃຊ້ເງົາ, ການເຄື່ອນໄຫວ, ແລະຄວາມເລິກເພື່ອສະ ເໜີ ຄວາມງາມທີ່ທັນສະ ໄໝ, ມີຈຸດສຸມໃນການເພີ່ມປະສິດທິພາບຂອງ UX ໂດຍບໍ່ມີສຽງລະຄັງແລະສຽງກະດິງ.
ຕົວຢ່າງອື່ນໆຂອງການອອກແບບວັດສະດຸປະກອບມີພາບຖ່າຍຈາກແຂບຫາຮູບພາບ, ການພິມທີ່ມີຂະ ໜາດ ໃຫຍ່ແລະພື້ນທີ່ສີຂາວທີ່ມີເຈດຕະນາ.
- ການອອກແບບແປນ
ໃນຂະນະທີ່ອຸປະກອນການອອກແບບວັດສະດຸສະ ເໜີ ວິທີການ ໜຶ່ງ ຂອງແນວຄິດທີ່ ໜ້ອຍ ທີ່ສຸດ, ການອອກແບບແບນຍັງຄົງເປັນທາງເລືອກແບບເກົ່າແກ່ ສຳ ລັບຄົນຮັກສາຍສະອາດ. ນັ້ນແມ່ນ, ການອອກແບບແປນມັກຈະຖືກເບິ່ງເປັນດິຈິຕອນທີ່ແທ້ຈິງ, ແທ້ຈິງ, ແລະສະດວກສະບາຍ.
ໂດຍອີງໃສ່ຫຼັກການພື້ນທີ່ສີຂາວ, ຂອບທີ່ຖືກ ກຳ ນົດ, ສີສັນທີ່ສົດໃສ, ແລະແບບ 2D - ຫຼື“ ແບນ”, ການອອກແບບແບນມີຮູບແບບທີ່ຫຼາກຫຼາຍເຊິ່ງມັກຈະ ນຳ ໃຊ້ເຕັກນິກຕ່າງໆເຊັ່ນ: ຮູບພາບເສັ້ນແລະເງົາຍາວ.
- ແບ່ງປັນພາບ ໜ້າ ຈໍ
ໃຊ້ໄດ້ດີທີ່ສຸດເມື່ອທ່ານມີສອງຂົງເຂດທີ່ມີຄວາມ ສຳ ຄັນເທົ່າທຽມກັນໃນການໂຄສະນາ, ຫລືທ່ານຕ້ອງການສະ ເໜີ ເນື້ອຫາຄຽງຄູ່ກັບຮູບພາບຫລືສື່, ການແບ່ງປັນ ໜ້າ ຈໍແມ່ນວິທີ ໃໝ່ ທີ່ດີທີ່ຈະສະ ໜອງ ປະສົບການຂອງຜູ້ໃຊ້ທີ່ມ່ວນແລະກ້າຫານ.
ໂດຍອະນຸຍາດໃຫ້ຜູ້ໃຊ້ສາມາດເລືອກເນື້ອຫາແລະປະສົບການຂອງພວກເຂົາ, ທ່ານສາມາດສ້າງປະສົບການແບບປະຕູທີ່ດຶງດູດນັກທ່ອງທ່ຽວເຂົ້າ.
- ການຖີ້ມ Chrome
ໂດຍອ້າງອີງໃສ່ລົດພວງມະໄລແລະເຄື່ອງປະດັບຢູ່ເທິງລົດແບບເກົ່າ,“ chrome” ໝາຍ ເຖິງພາຊະນະຂອງເວບໄຊທ໌ - ເມນູ, ຫົວ, ຕີນແລະຂອບເຂດຊາຍແດນ - ທີ່ມີເນື້ອໃນຫຼັກ.
ສິ່ງນີ້ສາມາດເຮັດໃຫ້ມີຄວາມຫຍຸ້ງຍາກ, ແລະມີຫລາຍບໍລິສັດ ກຳ ລັງເລືອກທີ່ຈະ ທຳ ລາຍຕູ້ຄອນເທນເນີໂດຍບໍ່ເສຍຄ່າແລະສ້າງພື້ນທີ່ໃຫ້ສະອາດ, ບໍ່ມີຂອບ, ຫົວ, ຫລືຕີນ.
- ລືມພັບ
“ ຂ້າງເທິງພັບ” ແມ່ນ ຄຳ ເວົ້າຂອງ ໜັງ ສືພິມ ສຳ ລັບ ໜ້າ ເຄິ່ງ ໜຶ່ງ ຂອງ ໜ້າ ໜັງ ສືພິມ. ເນື່ອງຈາກວ່າ ໜັງ ສືພິມມັກຈະພັບແລະວາງຢູ່ໃນກ່ອງແລະຈໍສະແດງຜົນ, ເນື້ອຫາທີ່ ໜ້າ ສົນໃຈຫຼາຍທີ່ສຸດແມ່ນຢູ່ ເໜືອ ພັບເພື່ອໃຫ້ພວກເຂົາມີໂອກາດດີທີ່ສຸດໃນການຈັບຜູ້ອ່ານທີ່ມີທ່າແຮງ (ແລະກະເປົາເງິນຂອງພວກເຂົາ).
ການອອກແບບເວບໄຊທ໌ໄດ້ ນຳ ໃຊ້ແນວຄວາມຄິດຂອງພັບໃນຫຼັກການທີ່ວ່າການເລື່ອນພາບແມ່ນ ໜັກ ໜ່ວງ. ແຕ່ເມື່ອບໍ່ດົນມານີ້, ຮູບພາບແລະເນື້ອໃນເຕັມ ໜ້າ ຈໍໄດ້ເຮັດໃຫ້ຜູ້ຊົມໃຊ້ມີຄວາມກະຕືລືລົ້ນແລະຊຸກຍູ້ໃຫ້ເລື່ອນເພື່ອເປີດເຜີຍເນື້ອຫາເພີ່ມເຕີມ, ເລິກເຊິ່ງ.
- ວິດີໂອເຕັມຈໍ
ວິດີໂອສາມາດເປັນວິທີທີ່ດີທີ່ຈະດຶງດູດຄວາມສົນໃຈຂອງນັກທ່ອງທ່ຽວ, ແລະມັນກໍ່ຍິ່ງມີປະສິດທິພາບຫຼາຍກ່ວາທັງພາບຫຼືຂໍ້ຄວາມ. ວິດີໂອທີ່ລອກແບບເຊັ່ນວ່າເຄື່ອງທີ່ໃຊ້ ສຳ ລັບ Apple Watch ແມ່ນວິທີທີ່ເປັນເອກະລັກໃນການຕັ້ງສຽງແລະດຶງດູດຜູ້ມາຢ້ຽມຢາມ.
ກົດເຂົ້າເບິ່ງເພື່ອເບິ່ງ Highbridge's ວິດີໂອໃນ ໜ້າ ທຳ ອິດຂອງພວກເຂົາ
ເມື່ອເວົ້າເຖິງການອອກແບບເວບໄຊທ໌, ສ່ວນປະກອບສະເພາະຫຼາຍຢ່າງຈະຖືກສັ່ງໂດຍອຸດສາຫະ ກຳ, ຕະຫຼາດ, ຕະຫຼາດເປົ້າ ໝາຍ ແລະເນື້ອຫາຂອງທ່ານ. ຮູບແບບຂອງທ່ານຈະຂຶ້ນກັບສິ່ງທີ່ນັກທ່ອງທ່ຽວຕອບສະ ໜອງ ແລະສິ່ງທີ່ມີຄວາມ ໝາຍ ທີ່ສຸດ ສຳ ລັບຂໍ້ຄວາມຂອງທ່ານ. ແຕ່ດ້ວຍທ່າອ່ຽງເຫຼົ່ານີ້ຢູ່ໃນມື, ທ່ານຈະມີທຸກສິ່ງທີ່ທ່ານຕ້ອງການເພື່ອສ້າງເວັບໄຊທ໌ທີ່ ໜ້າ ສົນໃຈເຊິ່ງເຮັດໃນສິ່ງທີ່ທ່ານຕ້ອງການ, ແລະນັ້ນສະແດງໃຫ້ທ່ານຮູ້ວິທີທີ່ຈະຮັກສາເວລາ.
