01 - 07
Visual урсгал гэж юу вэ?
Visual урсгал нь үзэгчийн нүдийг бүх чухал элементүүд тодорч, ингэснээр үзэгдэлийг саадгүй болгох эсвэл үзэгчийн зүгээс мэдрэмжийг алдах шалтгаан болдог. Сум, тоо гэх мэт тодорхой урсгалын элементүүдийг ашиглах нь хамгийн түгээмэл арга юм. Вэб дизайнерууд урсгалыг ашигладаг, гэхдээ өөр төрлийн элементүүд байдаг. Энэ гарын авлага дахь алхмууд нь танд сайн, муу урсгалуудын үлгэр жишээг харуулж, дизайн дахь харааны урсгалын үгсийн санг сурахад тусална.
Visual урсгалыг олон аргаар хийж болно:
- Сумнууд
- Дараалсан зургууд эсвэл текст элементүүд
- Хэтийн төлөв
- Gradients
- Өөрчлөлт хэмжээ
- Муруйнууд
- Зургийн хөдөлгөөн
- Нүүр царай - ялангуяа нүд
Дараах зургууд нь веб хуудсан дээрх урсгалын зарим алдааг харуулж, тэдгээрийг хэрхэн засах талаар үзүүлдэг.
07
Баруун текстийг зүүнээс баруун руу шилжүүлэх
Хэрэв та барууны хэлийг уншиж өссөн бол текстээ зүүнээс баруун тийш шилжүүлэх ёстой гэж бодож байсан. Тэгэхээр нүд нь текст мөрөөр нүүхэд зүүнээс баруун тийш хөдөлж байна.
Дээрх зураг дээр хүрхрээ зүүнээс баруун чигээрээ урсан өнгөрч, текст нь хүрхрээ урсаж байна. Бид усны шувуудыг унагаж байгааг мэддэг учраас текстийн урсгалаар усны урсгалын чиглэлд тасалддаг. Үзэгчийн нүд буруу чиглэлд шилжих текстийг уншиж болно.
03 - 07
Таны текстүүд нь зурагтай байх ёстой
Энэ тохиолдолд текст устай адил чиглэлд урсан өнгөрөхийн тулд дүрсийг нь буцаасан байна. Бүх элемент нь усны урсгал болон текстийн урсгалын дагуу үзэгчийн нүдийг доош чиглүүлдэг.
04 - 07
Баруун зүүнээс баруун тийш түргэн тавьдаг
Энэ зураг дээрх морь баруунаас зүүн тийш гүйж байгаа боловч текст нь англи хэл дээр тул баруун тийшээ явдаг. Морин уралдааны харааны нөлөө нь нэг чиглэлд бүхэл баримт бичгийн хурдыг удаашруулна. Учир нь текстээс өөр чиглэлд явдаг.
Барууны соёлуудад манай хэл зүүнээс баруун тийш шилжихэд бид зүүнээс баруун тийш чиглэсэн харааны чиглэлийг урагш, хурдан чиглүүлэхээр ирдэг бол зүүнээс баруун тийш илүү ар араас, удаан байдаг. Хэрвээ та хурдыг тодорхойлсон зураглал үүсгэж байгаа бол үүнийг санаж байх хэрэгтэй бөгөөд таны зургийг тексттэй адил чиглэлд байлгах хэрэгтэй.
05 - 07
Үзэгчийн нүдийг удаашруулахад бүү ашигла
Морь болон текст нь хоёулаа адил чиглэлтэй байх үед илэрсэн хурд нэмэгдэнэ.
06 - 07
Вэб хуудсан дахь нүдийг үзэх
Вэбсайттай олон вэбсайт нь энэ алдаа гаргадаг. Энэ нь тухайн хүний зураг дээр хүн зургийг байрлуулсан бөгөөд хүн тэр агууламжаас хардаг. Энэ нь хуучин дизайны талаар About.com вэб дизайн дээр харагдах болно.
Миний харж байгаагаар миний зургийг зарим текстийн хажууд байрлуулсан. Гэхдээ би тэр текстээс хараад эргэж харахад бараг л буцаж ирлээ. Хэрэв та группын хоёр хүний хоорондох биеийн хэлийг олж харвал миний хажууд байгаа хүнтэй таалагдахгүй байх болно (энэ тохиолдолд текстийн блок).
Нүдний олон нүдээр судлах судалгаагаар хүмүүс нүүр царайгаа Вэб хуудсан дээр харж байгааг харуулсан. Мөн холбогдох судалгаанаас үзэхэд зургийг хараад хүмүүс нүдэнд үл нийцэх зургийг хараад харах болно. Хэрвээ таны сайтад байгаа зураг таны браузерын захаас харагдаж байгаа бол таны хэрэглэгчид харагдах болно, дараа нь буцах товчийг дарах болно.
07-ийн 07
Аль ч зураг дээр байгаа нүд нь Контентыг нээх ёстой
About.com-ийн шинэ загвар дээр зураг нь арай дээр. Одоо миний нүд илүү их урагштай байгаа бөгөөд би зүүн тийшээ тийшээ очиж байгаа текст байгаа.
Энэ байр суурийг илүү сайн зурсан нь миний мөрийг текст рүү чиглүүлэх байсан. Гэхдээ энэ нь эхний зурагнаас илүү сайн шийдэл юм. Мөн зураг, агуулгын эрх болон зүүн талын зураг дээр байх нөхцөл байдлын хувьд энэ нь сайн зохицуулалт байж болох юм.
Хүмүүсийн нүүрний зургийг хамгийн анхааралдаа авдаг бол амьтдын фото зургуудынхтай ижил байдаг гэдгийг санаарай. Жишээлбэл, энэ жишээний хувьд би зүүн тийш харсан нохойтой боловч зураг нь зөв угаах. Тиймээс тэд хуудаснаасаа харж байна. Нохойны байршлыг өөрчилснөөр дэлгэцийн төв рүү харахад энэ байршил сайжирна.