Дасан зохицох зохион байгуулалт: энэ нь юу вэ, үүнийг хэрхэн ашиглах вэ. Дасан зохицох интерфейс Ашигтай үйлчилгээ, хэрэгслүүд
Одоогоор хамгийн их хандсан 100,000 сайтын 11-12% нь хариу үйлдэл үзүүлж байгаа бөгөөд ойрын хэдэн жилд энэ тоо өснө гэдэгт эргэлзэхгүй байна.
Илүү олон байгууллагууд олон төхөөрөмжтэй вэбийн бодит байдлыг хүлээн авахын тулд ханцуй шамлан орж байгаа тул нирваанад хүрэх хэд хэдэн стратегийг авч үзэх нь зүйтэй юм.
Дасан зохицох орчин үеийн байдалResponsive дахин дизайн гэдэг нь одоо байгаа зөвхөн ширээний вэб сайтыг авч, үндсэндээ "хариуцлагатай болгох" үйл явц юм.
Дан Седерхолм
Ихэнх байгууллагуудын хувьд эхнээс нь шинэ дизайн хийх томоохон хэмжээний бүтээн байгуулалтыг огт тооцдоггүй. Тийм ч учраас мэдрэмжтэй шинэчлэл нь хөдөлгөөнт төхөөрөмжүүдэд сайн туршлагыг бий болгох түгээмэл арга юм.
Давуу тал- Харьцангуй хурдан.
Хариуцлагатай шинэчлэл хийх хэд хэдэн арга байдаг бөгөөд энэ стратеги нь жижиг-screens.css файлыг сайтад нэмж оруулах явдал юм. Ийм бүдүүлэг жишээг үл харгалзан дасан зохицох модернизаци нь бүх зүйлийг эхнээс нь сэргээн босгох шаардлагагүй тул олон тооны байгууллагуудын сонирхол татахуйц сонголт юм. - Танил.
Хэрэглэгчдийг төөрөгдүүлэхгүй. Хүмүүс интерфэйсийг ашиглахын тулд олон жил зарцуулсан бөгөөд одоо байгаа интерфейсийг шинэчилснээр байгууллагууд танил арга барилыг баримталж, хөдөлгөөнт төхөөрөмжтэй хүмүүсийн амьдралыг сайжруулж байна. - Зохион байгуулалтын хувьд илүү хурдан.
Улс төрийн хувьд интерфэйсийг шинэчлэх нь эхнээс нь эхлэхээс илүү аюулгүй юм. Ногоон өнгийн ямар сүүдэр сонгох, ямар өчүүхэн хувьцааны зургийг ашиглах талаар маргаан багасч, удирдлага нь гараа мушгих шаардлагагүй болно. Энэ нь багууд хариу үйлдэл үзүүлэх сайтуудыг илүү хурдан эхлүүлэх боломжийг олгодог.
- Зөвхөн жижиг хэсэгт нөлөөлдөг.
Дахин хэлэхэд, засвар хийх олон сонголт байдаг ч ихэнхийн зорилго нь "хөөрхөн харагдуулах" явдал юм. Байршлыг дахин төлөвлөхөд анхаарлаа хандуулснаар дахин дизайн хийхдээ олон төрлийн төхөөрөмжид амжилттай дизайн хийхдээ анхаарах ёстой олон хүчин зүйлийг орхигдуулдаг. - Гурван литрийн саванд 10 литр ус хийнэ.
Ширээний сайтууд нь зөвхөн ширээний компьютерт зориулагдсан байдаг (мөн ихэвчлэн удаан хугацаанд үйлчилдэг) учраас тэдгээр нь маш их эмх замбараагүй байдлыг агуулж болно. Модернчлал нь голчлон төлөвлөлтийг дахин хайлуулахаас бүрддэг тул агуулгын ихэнх асуудлыг бүрэн тооцдоггүй. - Гүйцэтгэл.
Жижиг төхөөрөмжүүдийг илүү сайн дэмжихийн тулд код бичихэд хачирхалтай зүйл бий. Шаардлагагүй зүйлсийг арилгах нь хэт хол явж болох ч бүтээмжид анхаарлаа хандуулахгүй бол энэ нь өөрөө өсөхгүй. - Хамгийн муу дэмжлэг.
Ширээний компьютерт зориулагдсан медиа асуулга ихэнх мобайл төхөөрөмж дээр муу дэмжигддэг. - Түр зуурын засварууд.
Хүмүүс надаас ямар нэг зүйлийг "хариуцаарай" гэж гуйхыг сонсоход би үхмээр санагдаж байна, энэ нь төслийн төлөвлөгөөний зүгээр л нэг тэмдэглэгээ юм шиг (заримдаа тийм байдаг). Энэ төрлийн хязгаарлагдмал сэтгэлгээ нь мэдрэмжтэй дизайны санал болгож буй бодит боломжийг алддаг.
Гар утасны хувилбар нь таны хуучин вэбсайтаас ургах үрийг тарих боломжийг танд олгоно.
Цаг хугацаа өнгөрөхөд хуучирсан сайтыг устгах боломжтой бөгөөд сайт нь хамгийн түрүүнд мобайл, мэдрэмжтэй, ирээдүйн чиг хандлагыг харгалзан хөгжих болно.
- Эрсдэл багатай.
Ихэнх байгууллагууд хөдөлгөөнт төхөөрөмжөөс ирж буй урсгалыг цөөнх гэж үздэг. Тиймээс гар утасны хариу үйлдэл үзүүлэх вэб сайтыг ажиллуулснаар эдгээр байгууллагууд эхлээд сэдвийн толгой руу орохгүйгээр усыг турших боломжийг олгодог. - Уян хатан байж сурах боломж.
Дизайнерууд илүү уян хатан сэтгэж сурах боломжтой. Хөгжүүлэгчид Android төхөөрөмжүүдийн олон тооны заль мэхийг сурах болно. Менежерүүд пикселийн төгс байдлаас хэрхэн холдохыг олж мэдэх боломжтой. Хариуцлагатай гар утасны сайт нь сурахад тохиромжтой хамгаалагдсан хязгаарлагдмал орчин байж болно. - Дэд бүтэц.
Багууд зураг үүсгэх гэх мэт агуулгын менежментийн асуудлыг нэг удаа, бүрмөсөн шийдвэрлэхэд суралцах боломжтой - Илүүдэл арилгах.
Энэ арга нь багууд гүйцэтгэлд анхаарлаа төвлөрүүлэхийн зэрэгцээ "бидэнд энэ үнэхээр хэрэгтэй юу" гэж өөрөөсөө асуух сайхан боломжийг олгодог. Яагаад? Учир нь тэдний гол анхаарал нь мобайл төхөөрөмж дээрх сайтынхаа хэрэглэгчийн туршлагыг сайжруулахад чиглэгддэг. - Ирээдүй бол хамгийн түрүүнд гар утасны вэбсайтууд юм.
Хэдийгээр эхэндээ агуулга, функциональ дутагдалтай байсан ч хангалттай цаг хугацаа, хүчин чармайлт гаргаснаар эдгээр гар утасны сайтууд эцэст нь бүрэн хуудасны өвөг дээдсээ орлуулж чадна.
- Энэ нь гар утасны сайт хэвээр байна.
Энэ нь хариу үйлдэл үзүүлэх эсэхээс үл хамааран энэ арга нь мобайл сайтуудын олон тооны сул талуудыг хадгалсаар байна: URL-ыг дахин чиглүүлэх, агуулгын менежмент, тууштай контент, тууштай байдал, SEO оновчлол болон бусад асуудлууд. - Түр зуурын засварууд.
Цус алдалтыг зогсоохын тулд олон хөдөлгөөнт сайтуудыг Band-Aid хэлбэрээр бүтээдэг. Ийм сайтуудыг хөдөлгөөнт төхөөрөмжөөс ирж буй өсөн нэмэгдэж буй траффикийг буулгах зорилгоор бүтээдэг. Эдгээр шийдлүүд нь одоо байгаа хэрэгцээг хангасан хэвээр байж болох ч ирээдүйн чиг хандлагыг харгалзан үзвэл тэд таныг урт хугацаанд аврах боломжгүй юм. - Усан үзмийн мод дээр хатах магадлал.
Зарим байгууллага ийм төсөл эхлүүлж, хагас дутуу бариад дараа жилийн төсөв батлагдтал тэр чигт нь хаячихдаг. - Жижиг дэлгэцийн дизайн.
Анхны анхаарал нь жижиг дэлгэц дээр байдаг тул дараа нь интерфэйсийг чанараа алдалгүйгээр том дэлгэц рүү шилжүүлэх нь бэрхшээлтэй байж болно.
Алдаа дутагдал - Төгс бус байдлын 50 сүүдэр.
Энэ арга нь бүтэлгүйтэж магадгүй, учир нь хэрэглэгчид хуучин болон шинэ Франкенштейн интерфейстэй ажиллах шаардлагатай болно. - Усан үзмийн мод дээр хатах боломж.
Эдгээр төрлийн төслүүд нь тодорхой эцсийн зорилго шаарддаг, эс тэгвээс тэд цэвэршүүлэх газарт үүрд гацаж болно. - Техникийн хамтын амьдрал.
Хамгийн сүүлийн үеийн технологи, техникийг ашигласан нэг модуль хуучирсан модультай мөргөлдвөл юу болох вэ? Энэ арга барилд архитектурын олон бэрхшээл тулгардаг.
Энэ бол Брэд Фростын "Хариуцлагатай стратеги" нийтлэлийн орчуулга юм. Зохиогчийн зөвшөөрлөөр UXDepot орчуулсан.
Орчуулагчдын жич: Танд нийтлэл таалагдсан гэж найдаж байна. Хэрэв та орчуулгад байгаа алдааг бидэнд зааж өгвөл бид баяртай байх болно, ингэснээр бид тэдгээрийг хурдан засах болно. хаягаар бидэн рүү бичнэ үү [имэйлээр хамгаалагдсан], гуйя :)
Дасан зохицох загвар нь хэрэглэгчийн зан байдал, платформ, дэлгэцийн хэмжээ, төхөөрөмжийн чиг баримжаа зэргээс шалтгаалан хуудасны дизайныг өөрчилдөг бөгөөд орчин үеийн вэб хөгжүүлэлтийн салшгүй хэсэг юм. Энэ нь танд ихээхэн хэмнэлт гаргах боломжийг олгодог бөгөөд нарийвчлал бүрт шинэ загвар зурах шаардлагагүй, харин бие даасан элементүүдийн хэмжээ, байршлыг өөрчлөх боломжтой.
Энэ нийтлэлд сайтын үндсэн элементүүд болон тэдгээрийг хэрхэн тохируулах талаар авч үзэх болно.
Дэлгэцийн нягтралыг тохируулж байнаЗарчмын хувьд та төхөөрөмжүүдийг өөр өөр ангилалд хувааж, тус бүрийг тусад нь загварчилж болно, гэхдээ энэ нь хэтэрхий их цаг хугацаа шаардагдах бөгөөд таван жилийн дараа ямар стандарт байхыг хэн мэдэх вэ? Түүнээс гадна, статистикийн дагуу бид янз бүрийн шийдлүүдтэй:
Бид төхөөрөмж тус бүрийг тусад нь зохион бүтээх ажлыг үргэлжлүүлэх боломжгүй нь тодорхой болж байна. Гэхдээ дараа нь яах вэ?
Хэсэгчилсэн шийдэл: бүх зүйлийг уян хатан болгохМэдээжийн хэрэг, энэ нь төгс арга биш боловч ихэнх асуудлуудыг арилгадаг.
Ethan Marcotte нь responsive layout-ийн хэрэглээг харуулсан энгийн загвар бүтээжээ.
Эхлээд харахад бүх зүйл амархан юм шиг санагдаж болох ч тийм биш юм. Логог харна уу:
Хэрэв та зургийг бүхэлд нь багасгавал бичээсүүд нь унших боломжгүй болно. Тиймээс логог хадгалахын тулд зургийг хоёр хэсэгт хуваадаг: эхний хэсэг (зураглал) нь дэвсгэр болгон, хоёр дахь (лого) нь пропорциональ хэмжээгээр өөрчлөгддөг.
h1 элемент нь зургийг арын дэвсгэр болгон агуулж байгаа бөгөөд дүрс нь савны дэвсгэр (толгой) дээр зэрэгцсэн байна.
Уян хатан зургуудЗурагтай ажиллах нь мэдрэмжтэй дизайнтай ажиллахад тулгардаг хамгийн чухал асуудлуудын нэг юм. Зургийн хэмжээг өөрчлөх олон арга байдаг бөгөөд тэдгээрийн ихэнхийг хэрэгжүүлэхэд тун хялбар байдаг. Нэг шийдэл бол CSS-д хамгийн их өргөнийг ашиглах явдал юм:
Зураг (хамгийн их өргөн: 100%;)
Зургийн хамгийн их өргөн нь дэлгэц эсвэл хөтчийн цонхны өргөний 100% байх тул өргөн нь бага байх тусам зураг багасна. IE-д хамгийн их өргөнийг дэмждэггүй тул width: 100% -ийг ашиглана уу.
Үзүүлсэн арга нь дасан зохицох зураг үүсгэх сайн сонголт боловч зөвхөн хэмжээг нь өөрчилснөөр бид зургийн жинг хэвээр үлдээх бөгөөд энэ нь хөдөлгөөнт төхөөрөмж дээр ачаалах хугацааг нэмэгдүүлэх болно.
Өөр нэг арга: мэдрэмжтэй зурагFilament группын нэвтрүүлсэн техник нь зургийн хэмжээг өөрчлөхөөс гадна жижиг дэлгэцэн дээрх зургийн нягтралыг шахаж ачааллыг хурдасгадаг.
Энэ техник нь Github дээр байгаа хэд хэдэн файлыг шаарддаг. Эхлээд бид JavaScript файлыг авдаг ( rwd-images.js), файл .htaccessТэгээд rwd.gif(зургийн файл). Дараа нь бид том, жижиг нарийвчлалыг хооронд нь холбохдоо HTML ашигладаг: эхлээд угтвартай жижиг зураг .r(зураг нь хариу үйлдэл үзүүлэх ёстойг харуулахын тулд), дараа нь data-fullsrc ашиглан том зураг руу холбоно уу:
480 пикселээс илүү өргөн дэлгэцийн хувьд өндөр нарийвчлалтай зураг ачаалагдах болно ( largeRes.jpg), жижиг дэлгэц дээр ачаалах болно ( smallRes.jpg).
IPhone болон iPod Touch нь нэг онцлог шинж чанартай: том дэлгэцэнд зориулж бүтээсэн загвар нь гүйлгэх эсвэл нэмэлт хөдөлгөөнт зохион байгуулалтгүйгээр бага нарийвчлалтай хөтөч дээр зүгээр л багасах болно. Гэсэн хэдий ч зураг болон текст харагдахгүй:
Энэ асуудлыг шийдэхийн тулд мета шошгыг ашиглана уу:
Хэрэв анхны масштаб нэгтэй тэнцүү бол зургийн өргөн нь дэлгэцийн өргөнтэй тэнцүү болно.
Хуудасны байршлын бүтэцХуудасны хэмжээг мэдэгдэхүйц өөрчлөхийн тулд элементүүдийн ерөнхий зохицуулалтыг өөрчлөх шаардлагатай байж магадгүй юм. Үүнийг тусдаа загварын файлаар эсвэл CSS медиа асуулга ашиглан илүү үр дүнтэйгээр хийж болно. Ихэнх загварууд хэвээр үлдэж, цөөхөн хэдэн загвар өөрчлөгдөх тул ямар ч асуудал гарах ёсгүй.
Жишээлбэл, танд #wrapper , #content , #sidebar , #nav-г өнгө, дэвсгэр болон фонтуудын хамт заасан үндсэн загварын файл байна. Хэрэв таны мастер загвар нь таны зургийг хэт нарийн, богино, өргөн эсвэл өндөр болгож байвал та үүнийг тодорхойлж, шинэ загваруудыг оруулж болно.
style.css (үндсэн):
/* Хүүхдийн загварын хуудаснаас өвлөн авах үндсэн загварууд */ html,body( дэвсгэр... фонт... өнгө... ) h1,h2,h3() p, blockquote, pre, code, ol, ul () /* Бүтцийн элементүүд */ #wrapper( өргөн: 80%; зах: 0 авто; дэвсгэр: #fff; дэвсгэр: 20px; ) #content( өргөн: 54%; хөвөх: зүүн; захын баруун: 3%; ) # sidebar-left( өргөн: 20%; хөвөх: зүүн; баруун зах: 3%; ) #sidebar-right( өргөн: 20%; хөвөх: зүүн; )
mobile.css (хүүхэд):
#wrapper( өргөн: 90%; ) #content( өргөн: 100%; ) #sidebar-left( өргөн: 100%; тодорхой: хоёулаа; /* Шинэ загварын нэмэлт загварууд */ хүрээ дээд: 1px хатуу #ccc ; margin-top: 20px; ) #sidebar-right( өргөн: 100%; тодорхой: хоёулаа; /* Манай шинэ зохион байгуулалтад зориулсан нэмэлт загвар */ border-top: 1px solid #ccc; margin-top: 20px; )
Өргөн дэлгэц дээр зүүн болон баруун талын самбарууд нь хажуу талдаа сайн тохирдог. Нарийхан дэлгэц дээр эдгээр блокууд нь илүү тохиромжтой байх үүднээс нэг дор байрладаг.
CSS3 медиа асуулгаТа CSS3 медиа асуулга ашиглан responsive дизайн үүсгэх боломжтойг харцгаая. min-width нь хөтчийн цонх эсвэл тодорхой хэв маягийг ашиглах дэлгэцийн хамгийн бага өргөнийг тодорхойлдог. Хэрэв ямар нэг утга min-width -аас доош байвал хэв маягийг үл хэрэгсэх болно. max-width нь эсрэгээр ажилладаг.
@media дэлгэц ба (мин-өргөн: 600px) ( .hereIsMyClass ( өргөн: 30%; хөвөх: баруун; ) )
Медиа асуулга нь хамгийн бага өргөн нь 600 пикселээс их буюу тэнцүү байх үед л ажиллана.
@media дэлгэц ба (хамгийн их өргөн: 600px) ( .aClassforSmallScreens (тодорхой: хоёулаа; үсгийн хэмжээ: 1.3em; ) )
Энэ тохиолдолд анги ( aClassforSmallscreens) дэлгэцийн өргөн 600 пикселээс бага буюу тэнцүү байх үед ажиллана.
Мин-өргөн ба хамгийн их өргөн нь дэлгэцийн өргөн болон хөтчийн цонхны өргөнд хоёуланд нь хамаарах боломжтой боловч бид зөвхөн төхөөрөмжийн өргөнтэй ажиллах шаардлагатай байж магадгүй юм. Жишээлбэл, жижиг цонхонд нээгдсэн хөтчүүдийг үл тоомсорлох. Үүний тулд та min-device-width болон max-device-width-ийг ашиглаж болно:
@media дэлгэц ба (хамгийн их төхөөрөмжийн өргөн: 480px) ( .classForiPhoneDisplay (фонтын хэмжээ: 1.2em; ) ) @media дэлгэц ба (min-төхөөрөмжийн өргөн: 768px) ( .minimumiPadWidth ( тодорхой: хоёулаа; захын доод : 2px хатуу #ccc ) )
Ялангуяа iPad-ийн хувьд медиа асуулга нь өмчтэй байдаг чиг баримжаа, тэдгээрийн үнэ цэнэ нь аль аль нь байж болно ландшафт(хэвтээ), эсвэл хөрөг зураг(босоо):
@media дэлгэц ба (чиглэл: ландшафт) ( .iPadLandscape ( өргөн: 30%; хөвөх: баруун; ) ) @media дэлгэц ба (чиглэл: хөрөг) ( .iPadPortrait ( тодорхой: хоёулаа; ) )
Та мөн медиа асуулгын утгыг нэгтгэж болно:
@media дэлгэц ба (мин-өргөн: 800px) ба (хамгийн их өргөн: 1200px) ( .classForaMediumScreen (арын дэвсгэр: #cc0000; өргөн: 30%; хөвөх: баруун; ) )
Энэ кодыг зөвхөн 800-аас 1200 пикселийн өргөнтэй дэлгэц эсвэл хөтөчийн цонхонд л гүйцэтгэнэ.
Та янз бүрийн медиа асуулгын утгын загвар бүхий тодорхой хуудсыг ачаалж болно:
JavaScript
Хэрэв таны хөтөч CSS3 медиа асуулга дэмждэггүй бол jQuery ашиглан загвар солих боломжтой.
$(баримт).бэлэн(функц())( $(цонх).bind("хэмжээг өөрчлөх", resizeWindow); функц resizeWindow(e)( var newWindowWidth = $(цонх).width(); // Хэрэв өргөн нь 600 пикселээс бага бол гар утасны загварын хүснэгтийг хэрэв (newWindowWidth< 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth >600)( // Хэрэв өргөн нь 600 px-ээс их бол ширээний загварын хүснэгтийг $("link").attr((href: "style.css")); ) ) ));
Нэмэлт контент дэлгэцЖижиг дэлгэц дээр байрлуулахын тулд элементүүдийг багасгах, өөрчлөх чадвар нь гайхалтай юм. Гэхдээ энэ бол хамгийн сайн сонголт биш юм. Хөдөлгөөнт төхөөрөмжүүд нь ихэвчлэн илүү өргөн хүрээний өөрчлөлтүүдийг агуулдаг: хялбаршуулсан навигаци, илүү анхаарал төвлөрүүлсэн контент, баганын оронд жагсаалт эсвэл мөр.
Аз болоход CSS нь агуулгыг гайхалтай хялбар байдлаар харуулах, нуух боломжийг бидэнд олгодог.
Дэлгэц: байхгүй;
дэлгэц: нуух шаардлагатай объектуудад none-г ашигладаггүй.
Энд бидний тэмдэглэгээ байна:
Үндсэн агуулга A Зүүн талын самбар Баруун талын самбар
style.css (үндсэн):
#content( өргөн: 54%; хөвөх: зүүн; баруун зах: 3%; ) # хажуугийн-зүүн( өргөн: 20%; хөвөх: зүүн; баруун захын: 3%; ) # хажуугийн мөр-баруун( өргөн: 20 % float: зүүн ) .sidebar-nav( дэлгэц: байхгүй; )
mobile.css (хялбаршуулсан):
#content( өргөн: 100%; ) #sidebar-left( дэлгэц: байхгүй; ) #sidebar-right( дэлгэц: байхгүй; ) .sidebar-nav( дэлгэц: inline; )
Хэрэв дэлгэцийн хэмжээ багассан бол жишээлбэл, скрипт эсвэл өөр загварчлалын файл ашиглан хоосон зайг нэмэгдүүлэх эсвэл навигацийг солих боломжтой. Тиймээс элементүүдийг нуух, харуулах, зураг, элементийн хэмжээ болон бусад зүйлийг өөрчлөх чадвартай бол та дизайныг ямар ч төхөөрөмж, дэлгэц дээр тохируулах боломжтой.
Yandex үйлчилгээг хувийн болгохын тулд таны өгөгдөл болон машин сургалтыг хэрхэн ашигладаг.
Мэдлэгийн санд сайн ажлаа илгээх нь энгийн зүйл юм. Доорх маягтыг ашиглана ууМэдлэгийн баазыг суралцаж, ажилдаа ашигладаг оюутнууд, аспирантууд, залуу эрдэмтэд танд маш их талархах болно.
Нийтэлсэн http://allbest.ru
1. Дасан зохицох орчин үеийн байдал
2. Хариуцлагатай гар утасны сайтууд
3. Хөдөлгөөнт төхөөрөмжид зориулагдсан мэдрэмжтэй дизайн
4. Үе шаттай стратеги
1. Дасан зохицох орчин үеийн байдал
Responsive redesign гэдэг нь одоо байгаа зөвхөн ширээний вэб сайтыг авч, үндсэндээ хариу үйлдэл үзүүлэх үйл явц юм.
Одоогоор хамгийн их хандсан 100,000 сайтын 11-12% нь хариу үйлдэл үзүүлж байгаа бөгөөд ойрын хэдэн жилд энэ тоо өснө гэдэгт эргэлзэхгүй байна. Илүү олон байгууллагууд олон төхөөрөмжтэй вэбийн бодит байдлыг хүлээн авахын тулд ханцуй шамлан орж байгаа тул нирваанад хүрэх хэд хэдэн стратегийг авч үзэх нь зүйтэй юм.
Бэлэн сайтуудын тухайд (ялангуяа арилжааны сайтууд) багуудад бүх зүйлийг хаяж, дахин барих боломж үргэлж байдаггүй. Ихэнх байгууллагуудын хувьд эхнээс нь шинэ дизайн хийх томоохон хэмжээний бүтээн байгуулалтыг огт тооцдоггүй. Тийм ч учраас мэдрэмжтэй шинэчлэл нь хөдөлгөөнт төхөөрөмжүүдэд сайн туршлагыг бий болгох түгээмэл арга юм.
Давуу тал:
· Харьцангуй хурдан. Учир нь энэ нь бүх зүйлийг эхнээс нь дахин бүтээх шаардлагагүй юм.
· Танил. Хэрэглэгчдийг төөрөгдүүлэхгүй. Хүмүүс интерфэйсийг ашиглахын тулд олон жил зарцуулсан бөгөөд одоо байгаа интерфейсийг шинэчилснээр байгууллагууд танил арга барилыг баримталж, хөдөлгөөнт төхөөрөмжтэй хүмүүсийн амьдралыг сайжруулж байна.
· Зохион байгуулалтын хувьд илүү хурдан. Интерфэйсийг шинэчлэх нь эхнээс нь эхлэхээс илүү аюулгүй бөгөөд хялбар юм.
Алдаа:
· Зөвхөн багахан хэсэгт нөлөөлдөг. Гурван литрийн багтаамжтай саванд 10 литр ус хийнэ. Маш олон контент
· Бүтээмж.
· Хамгийн муу дэмжлэг. Ширээний компьютерт зориулагдсан медиа асуулга ихэнх мобайл төхөөрөмж дээр муу дэмжигддэг.
2. Хариуцлагатай гар утасны сайтууд
Responsive гар утасны вэбсайтууд нь responsive дизайны техникийг ашиглан "m.yourdomain.ru" форматаар тусдаа вэбсайт үүсгэх практик юм.
Гар утасны хувилбар нь таны хуучин вэбсайтаас ургах үрийг тарих боломжийг танд олгоно. Цаг хугацаа өнгөрөхөд хуучирсан сайтыг устгах боломжтой бөгөөд сайт нь хамгийн түрүүнд мобайл, мэдрэмжтэй, ирээдүйн чиг хандлагыг харгалзан хөгжих болно.
Давуу тал:
· Эрсдэл багатай. Хөдөлгөөнт төхөөрөмжүүдийн урсгал нь цөөнх юм.
· Хариуцлагатай гар утасны сайт нь суралцахад тохиромжтой хамгаалагдсан хязгаарлагдмал орчин байж болно.
· Шаардлагагүй зүйлсийг зайлуул. Энэ арга нь багууд гүйцэтгэлд анхаарлаа төвлөрүүлэхийн зэрэгцээ "бидэнд энэ үнэхээр хэрэгтэй юу" гэж өөрөөсөө асуух сайхан боломжийг олгодог.
· Ирээдүй бол хамгийн түрүүнд гар утасны вэбсайтууд юм. Хэдийгээр эхэндээ агуулга, функцээр дутмаг байсан ч хангалттай цаг хугацаа, хүчин чармайлт гаргаснаар эдгээр гар утасны сайтууд эцэст нь бүтэн хуудасны өвөг дээдсээ орлуулж чадна.
Алдаа:
· Энэ нь гар утасны сайт хэвээр байна. Энэ нь хариу үйлдэл үзүүлэх эсэхээс үл хамааран энэ арга нь мобайл сайтуудын олон тооны сул талуудыг хадгалсаар байна: URL дахин чиглүүлэх, агуулгын менежмент, тууштай контент, тууштай байдал, SEO оновчтой болгох гэх мэт асуудлууд.
· Түр зуурын засварууд. Цус алдалтыг зогсоохын тулд олон гар утасны сайтуудыг боолт болгон бүтээдэг. Ийм сайтуудыг хөдөлгөөнт төхөөрөмжөөс ирж буй өсөн нэмэгдэж буй траффикийг буулгах зорилгоор бүтээдэг. Эдгээр шийдлүүд нь одоо байгаа хэрэгцээг хангасан хэвээр байж болох ч ирээдүйн чиг хандлагыг харгалзан үзвэл тэд таныг урт хугацаанд аврах боломжгүй юм.
· Усан үзмийн мод дээр хатах магадлал.
· Жижиг дэлгэцийн дизайн. Анхны анхаарал нь жижиг дэлгэц дээр байдаг тул дараа нь интерфэйсийг чанараа алдалгүйгээр том дэлгэц рүү шилжүүлэх нь бэрхшээлтэй байж болно.
3. Хөдөлгөөнт төхөөрөмжид зориулагдсан мэдрэмжтэй дизайн
ухаалаг гар утасны интерфейсийн дизайн
"Эхлээд гар утас" гэдэг нь гар утасны орчны хязгаарлалтыг (жижиг дэлгэц, бага зурвасын өргөн гэх мэт) харгалзан үзсэн боловч том дэлгэцийн давуу талыг бүрэн ашигладаг интерфейсийг зохион бүтээх зарчим юм.
Давуу тал:
· Шинэ хүч чадлаар эхэл. Эхлээд гар утас - шинэ эхлэл.
· Шилдэг дэмжлэг. Илүү олон хөдөлгөөнт төхөөрөмж, ялангуяа медиа асуулга дэмждэггүй хуучин төхөөрөмжүүдийг дэмжих.
· Бүтээмж. Сайтын гүйцэтгэл нь үндсэндээ түүний хэрэгжилтийн нэг үүрэг боловч гар утасны мэдрэмжтэй дизайн нь багуудад эхнээсээ гүйцэтгэлд анхаарлаа хандуулах боломжийг олгодог.
· Бүх зүйлийг нэг дор харгалзан үзэх. Гар утасны анхны загвар (нэрийг нь үл харгалзан) нь зөвхөн нэг ангиллын төхөөрөмжийг чиглүүлэхээс илүүтэйгээр олон тооны нягтралыг багтаах боломжтой.
· Ирээдүйд тэсвэртэй загвар.
Алдаа:
· Маш их цаг зарцуул
Ухамсарт шилжих
· Зохион байгуулалтын хувьд хүндрэлтэй
· Танихгүй
4. Үе шаттай стратеги
Алхам алхмаар хариу үйлдэл үзүүлэх дизайны стратеги нь томоохон хэмжээний кампанит ажлыг олон алхам болгон задалдаг. Модернчлалын нэгэн адил (эдгээр стратеги нь бие биенээсээ үл хамаарах зүйл биш) томоохон хэмжээний дахин төлөвлөлт хийх боломжгүй байж магадгүй тул зарим байгууллагууд нэг нэгээр нь хийдэг. Дасан зохицох интерфейсийг алхам алхмаар үүсгэх хэд хэдэн төрөл байдаг: Хуудас бүрээр.
Давуу тал:
· Мэдэгдэхүйц
· Уян хатан байж сурах боломж. Та мэдрэмжтэй интерфэйсийг бий болгох талаар бүх зүйлийг сурч, дараа нь энэ мэдлэгийг сайтын бусад хэсэгт ашиглах боломжтой.
· Эхлэх магадлал өндөр
Алдаа:
Шударга байдал дутмаг
Усан үзмийн мод дээр хатах боломжтой
Allbest.ru дээр нийтлэгдсэн
Үүнтэй төстэй баримт бичигХэрэглэгчийн интерфейсийг боловсруулах зарчим, арга, тэдгээрийн дизайны дүрэм. Microsoft Expression Blend дээр хэрэглэгчийн интерфэйсийг загварчлах сонгодог аргууд. Expression Blend дээр текст болон графиктай ажиллах.
курсын ажил, 2012-03-19-нд нэмэгдсэн
Интернет үүссэн түүх, түүний үндсэн зарчим: протокол, үйлчилгээ, үйлчилгээ. Интернет донтолт, троллинг, киберпанк, цензур гэсэн ойлголтуудын тодорхойлолт. Вэбсайтуудын ангилал, зохион байгуулалт, дизайныг боловсруулах. Mozilla Firefox болон Opera хөтөч.
хураангуй, 2011 оны 11-р сарын 10-нд нэмэгдсэн
Вэб сайт үүсгэх, дизайн хийх арга, хэрэгслийг тоймлох. Вэб сайт үүсгэх програмчлалын хэлүүд. CMS агуулгын удирдлагын системийн давуу болон сул талуудын дүн шинжилгээ. Вэбсайт дизайн, дизайн боловсруулах. Бүтээгдэхүүн боловсруулах зардлын тооцоо.
дипломын ажил, 2016 оны 06-р сарын 02-нд нэмэгдсэн
Орчин үеийн программыг оновчтой болгох системүүдийн график хэрэглэгчийн интерфэйсийн шинжилгээ. SBkZ_PP хяналтын системийн математик загвар, алгоритм, түүний архитектур-контекст диаграммыг бий болгох. Програм хангамжийн техникийн баримт бичиг.
дипломын ажил, 2012 оны 04-р сарын 18-нд нэмэгдсэн
Ашигласан технологи, их сургуулийн вэбсайтуудын агуулга, дизайн, түүний дотор CMS-ийн үндсэн дээр бүтээгдсэн зэрэгт дүн шинжилгээ хийх. PRIPIT вэбсайтын агуулга, боломжит зочдын янз бүрийн бүлгүүдийн мэдээллийн хэрэгцээг судлах. Вэбсайт дизайн боловсруулах.
дипломын ажил, 2010 оны 03-р сарын 11-нд нэмэгдсэн
Дэлгэцийн график бүрэлдэхүүн хэсэг, системийн объект, функцууд. Хэрэглэгчийн төхөөрөмжтэй харилцах хэрэгслийн систем. Хувийн компьютерийн график хэрэглэгчийн интерфейсийн түүх, тэдгээрийн ангилал. X цонхны систем.
танилцуулга, 2012-05-22 нэмэгдсэн
Худалдааны аж ахуйн нэгжийн вэбсайтыг хөгжүүлэхэд зориулсан интернет хуудас бүтээх, дизайн хийх аргыг сонгох. Вэб дизайны элементүүдтэй ажиллах онцлогууд: фонт, гарчиг, график. Интернет сайт үүсгэх, ашиглах эрх зүйн зохицуулалт.
дипломын ажил, 2010 оны 11-р сарын 11-нд нэмэгдсэн
Компьютерийн шаталсан системийн мэдээллийн харилцан үйлчлэлийн интерфейсийн шинж чанарууд. "Санал хүсэлт"-ийн зарчим. Техник хангамж-програм хангамжийн интерфейсийг бий болгох шинж чанар, энгийн байдал, дүрмүүд. Компьютерийн системийн дизайны шинэ чиглэлүүд.
курсын ажил, 2017.01.05 нэмэгдсэн
Зөвлөх бизнес дэх хэвлэл мэдээллийн хэрэгслийн дүн шинжилгээ: зөвлөх компаниудын вэбсайт, мэдээллийн систем, вэбсайт үүсгэх програмчлалын хэл, програм хангамжийн тойм. Бизнесийн үйл явцын загварчлал. Интернетийн оролцоог хөгжүүлэх.
дипломын ажил, 2012 оны 04-р сарын 11-нд нэмэгдсэн
Хостинг компанийн системийн үйлчилгээний визуал интерфейсийг бий болгох интернетийн үйлчилгээг хөгжүүлэх. Интерфейс ба хөгжлийн чиглэлийг үнэлэх шалгуурууд. GlideOS ширээний компьютер. Үйлчилгээний архитектур, програмчлалын хэл, харилцааны аргуудыг сонгох.