Хавтгай хэв маяг гэж юу вэ. Хавтгай дизайн гэж юу вэ, түүний үндсэн зарчим. Responsive дизайн нийцтэй

Хавтгай дизайн нь ойрын жилүүдийн дизайны гол чиглэл учраас бид таныг үүнийг илүү сайн мэдэж, түүний үндэс болсон 5 үндсэн зарчмыг сурахыг урьж байна.

Хавтгай дизайны танилцуулга

Орос хэл дээр хавтгай загвар нь "хавтгай дизайн" гэж орчуулагддаг бөгөөд дараа нь энэ нь үнэмлэхүй дуртай болсон Apple-ийн танилцуулга iOS үйлдлийн систем. Хэрэглээний дизайны минималист хандлагад анхаарлаа хандуулсан. Хэрэглэгчийн тав тухтай байдалд анхаарлаа хандуулдаг. Энэ бол "squeformism" (объектуудыг бодит байдал дээр дүрслэн харуулах) -ыг эсэргүүцсэн тод эсэргүүцэл юм. Сонголт нь илүү хялбаршуулсан, нэгэн зэрэг энгийн гоо зүйн шийдлүүд дээр унав. Бодит дүрслэлээс залхсан хэрэглэгчид энэ чиглэлийг баяртайгаар угтан авч, илүү олон вэб төслүүд энэ формат руу шилжиж байна.

"Хавтгай" гэдэг нь "уйтгартай" гэсэн үг биш гэдгийг тэмдэглэхийг хүсч байна. Хавтгай дизайны шийдлүүд нь үзэсгэлэнтэй, илүү боловсронгуй, цэвэрхэн, илүүдэлгүй, "тайван арал" болж хувирдаг. Тэд эцэст нь агуулгыг ойлгомжтой болгодог. Үлдсэн зүйл бол үндсэн зарчмуудыг практикт хэрэгжүүлэхийн тулд сурах явдал юм.

"Хавтгай" загвар нь эзлэхүүнийг дамжуулахыг хичээдэггүй тул хоёр хэмжээст дүрслэл дээр суурилдаг. Энэ нь бүтэцтэй (урт сүүдрийг эс тооцвол) ямар ч сүүдэр, тусгал, тодруулгыг харахгүй гэсэн үг юм. Зөвхөн контурыг шилжүүлэх, өөр юу ч биш.

Дизайндаа моносилаб дүрсийг ашиглахыг зөвлөж байна, мөн контурын тод байдлыг хянахын тулд хөнгөн, жингүйдэлтэй байдлыг онцлон тэмдэглэхийг зөвлөж байна. Нэмж дурдахад ийм лаконик элементүүд нь мэдрэгчийг сайн дуурайж, объекттой харилцах хүслийг бий болгодог (дарах, хүрэх урилга). Гэсэн хэдий ч элементүүдийн энгийн байдал нь бүхэлдээ дизайны энгийн байдалтай тэнцүү биш юм - энэ нь зөвхөн тоймд хамаарна. Үүний үр дүнд хэрэглэгчийн харсан бүх зүйл түүнд ойлгомжтой бөгөөд тэр үүнийг хялбархан ашиглах боломжтой.

Хавтгай загвар нь фонттой ажиллахдаа маш болгоомжтой байхыг шаарддаг. Өөрөөр хэлбэл, тэдний зан чанар нь дизайны схемийг зөрчилдөхгүйгээр нөхөх ёстой. Түүнчлэн, хавтгай загварт фонт нь навигацийн гол элемент юм.

Зөвхөн фонт төдийгүй өнгө нь "хавтгай" дизайны чухал хэсэг юм. Палеттуудын дийлэнх нь 2-3 өнгө дээр суурилдаг боловч мэдээжийн хэрэг үл хамаарах зүйлүүд байдаг. Ихэвчлэн баялаг, тод, гэхдээ нэгэн зэрэг цэвэр өнгө сонгогддог. Дээр дурдсанчлан градиент эсвэл шаардлагагүй шилжилт байхгүй.

Хавтгай загвар нь минимализм гэх мэт дэлхийн чиг хандлагын тод жишээ юм. Загвар зохион бүтээгчид шаардлагагүй хонх, шүгэлээс татгалзаж, дүрслэх нарийн төвөгтэй, далд арга барилаас татгалзаж, хэрэглэгчийн үйл ажиллагааны хэлбэрээр үр жимсээ өгдөг.

Хавтгай эсвэл бараг хавтгай уу? Бид буулт хайж байна!

Эцэст нь хэлэхэд, өнөөдөр хавтгай ба хавтгай бус дизайны хооронд синергетик байгааг тэмдэглэхийг хүсч байна. Бид "бараг хавтгай" загварын тухай ярьж байна. Энэ нь энгийн бөгөөд товч элементүүд болон хоёр хэмжээст орон зайн хамт дизайнерууд гүн болон хэтийн төлөвийн 1-2 аргыг ашигладаг бол тайлбарласан үзэл баримтлалын хамгийн түгээмэл хэрэглээ юм.

Мөн 2017 оны чиг хандлага нь Semi Flat Design - хагас хавтгай загвар байв. Материалын дизайны нөлөөгөөр энэ нь арай илүү орон зайтай болсон. Загварыг хагас хавтгай харагдуулдаг цайвар сүүдэр гарч ирдэг. Хавтгай дизайн өнөөг хүртэл хамааралтай хэвээр байгаа бөгөөд энэ нь сүүдэрээс болж гүнзгийрч, илүү төвөгтэй болсон боловч үндсэн үзэл баримтлалыг зөрчөөгүй;

Энэ нийтлэлд би хавтгай дизайны талаар танд хэлэх болно. Сүүлийн хэдэн жилийн хугацаанд хавтгай нь вэб дэх тэргүүлэх чиг хандлагын нэг болсон тул та энэ талаар аль хэдийн сонссон байх.

Өнөөдөр бид хавтгай дизайн гэж юу болох, хэрхэн үүссэн, цэвэр, тод, мэдрэмжтэй дизайн хийхэд юу хэрэгтэйг авч үзэх болно.

чи олж чадна сайн жишээнүүд http://market.envato.com/ вэбсайт дээрх хавтгай дизайн. Орчин үеийн дизайн ямар харагддаг талаар тодорхой ойлголт өгөх олон тооны зохион байгуулалт, дүрс, загварууд байдаг. .

1. Хавтгай дизайн гэж юу вэ?

Хавтгай дизайн - орчин үеийн хэв маяг Хэрэглэгчийн интерфэйс, түүнчлэн минимализмаар тодорхойлогддог график дизайн. Хавтгай дизайн нь хамгийн бага элемент ашиглах, бүтэц, сүүдэр, гэрлийн янз бүрийн нөлөө байхгүй, жишээлбэл: холимог өнгө, градиент, тодруулга гэх мэт.

Хавтгай нь скеуоморфизмын эсрэг байдаг( Skeuomorphism нь нэг бүтээгдэхүүн нь нөгөөгийнхөө дүр төрхийг өгөх үед дизайны зарчим юм, i.e. янз бүрийн интерфэйсийн элементүүдийг бодит объектуудаас хуулбарлах үед - ойролцоогоор.) , түүнчлэн баялаг дизайн Гэсэн хэдий ч хавтгай дизайн нь анх харахад тийм ч энгийн зүйл биш гэдгийг хэлэх нь зүйтэй. Энэ нь скеуоморфизмын зарим шинж чанарыг агуулдаг боловч бид энэ талаар бага зэрэг дараа ярих болно.

Ерөнхийдөө flat нь хэрэглэгчдэд дүрслэлд сатааралгүйгээр контентод анхаарлаа төвлөрүүлэхэд тусалдаг. Хавтгай дизайн нь элементүүдийн энгийн байдлыг онцолж, үүний зэрэгцээ интерфэйсийг илүү мэдрэмжтэй, тааламжтай, ашиглахад хялбар болгодог.

2. Бага зэрэг түүх

Хавтгай дизайн нь интернетэд дэлхийн чиг хандлага болохоос олон жилийн өмнө байсан гэдгийг мэддэг. Хавтгай загвар нь 80-аад онд нэлээд алдартай байсан тул тухайн үеийн технологи нь нарийн төвөгтэй эффект, бүтэц, сүүдэрийг дэмжих хангалттай хөгжөөгүй байсан. Гэсэн хэдий ч тэр үед ч дизайн нь скеуфоморфизмыг эрэлхийлж, интерфейсийн элементүүдийг аль болох бодитой болгохыг хичээсэн.

Майкрософт метроны хэв маяг гэж нэрлэгддэг бүтээгдэхүүн үйлдвэрлэж эхэлсний дараа хавтгай загвар нь бидний одоо харж байгаа хэлбэрээр алдартай болж эхэлсэн. Метро бол өөрийн хэв маяг, энгийн байдлаараа гайхалтай байдаг Microsoft-ын UI загвар юм.

2010 онд Microsoft гаргасан Windows PhoneӨмнөх бүтээгдэхүүнүүдийн аль нэгээс өвлөн авсан хурц ирмэгтэй, энгийн график бүхий хавтгай дизайн ашигласан 7 Microsoft (Zune). Хожим нь амжилтаас урам зориг авч Microsoft гаргасан үйлдлийн систем Windows 8 нь ижил хавтгай метроны хэв маягт суурилсан.

Эцсийн эцэст, 2013 онд Apple компанийг худалдаанд гаргаснаар хавтгай дизайн алдаршсан оргилдоо хүрсэн iOS 7 нь үндсэндээ харуулж байна шинэ загвардүрс, фонт зэрэг хэрэглэгчийн интерфейсийн элементүүдийг бүрэн шинэчилсэн. Apple бий болгосон UI болон дүрсний дизайны харааны зарчим .

Удалгүй Google мөн өөрийн программууд болон вэб хуудсууддаа хавтгай хэв маягийг ашиглаж эхэлсэн Материалын дизайн. Google нь энэ хэв маягт зориулагдсан бүхэл бүтэн хэсэгтэй бөгөөд үүнд вэб дизайны зорилго, түүний зарчим, янз бүрийн дизайны объектуудыг бий болгох зааварчилгааг багтаасан байдаг: дүрс, зохион байгуулалт гэх мэт.

Тэр цагаас хойш хавтгай нь вэб дизайны гол чиг хандлага болж, вэбсайт, программууд болон интерфейсийн элементүүдийг гоёмсог, цэвэрхэн, загварлаг болгов.

Тиймээс дэлхийн хэмжээнд компаниудаас хавтгай дизайны гурван жишээ байдаг бөгөөд түүнгүйгээр төсөөлөхөд хэцүү байдаг орчин үеийн ертөнцтехнологи:

Майкрософт компанийн метроны загвар

Apple iOS 7 загвар

Google-ийн материаллаг дизайн

3. Цэвэрлэхээ мартуузай

Гурван хэмжээст элемент, градиент, бүтэц, тодруулга, хагас өнгө, сүүдэр гэх мэт бодит эффектүүд байхгүй тул хавтгай загварыг "хавтгай" гэж нэрлэдэг. Хавтгай хэв маяг нь объектыг дүрслэх хоёр хэмжээст (хавтгай) арга гэдгийг санаарай.

Түүнээс гадна хавтгай загварт объектуудыг маш хялбаршуулсан, загварчлагдсан байдлаар дүрсэлсэн байдаг.

Заримдаа бүр объектын дүрс эсвэл контурыг ашигладаг, жишээлбэл. Объектыг танигдахуйц болгоход хангалттай, гэхдээ жижиг нарийн ширийн зүйлийг хэт ачаалахгүй.

Минимализм нь өнөө үед дэлхийн чиг хандлага болж байна: энгийн хэлбэрийн хэлбэр, хурц ирмэгийг ашиглах нь цэвэрхэн, тааламжтай загварыг бий болгодог. Энгийн хэлбэрүүд нь илүү ойлгомжтой бөгөөд ойлгоход хялбар байдаг. Энэ нь дизайныг завгүй, эмх замбараагүй харагдуулахгүйгээр минималист, цэвэрхэн байлгадаг.

4. Үүнийг төгс төгөлдөрт хүргэ

Хавтгай дүрс болон UI элементүүдийг бүтээхдээ тэдгээрийг тод, цэвэрхэн, пикселээр төгс харагдуулах хэрэгтэй гэдгийг мэдэж аваарай. аль болох их. Түүнээс гадна энэ нь растер болон вектор графикийн аль алинд нь хамаарна.

Програмын хамт Adobe PhotoshopЭнд бүх зүйл тодорхой байна: энэ нь пиксел дээр суурилсан растер графиктай ажилладаг.

Хөтөлбөрийн тухайд Adobe Illustrator, дараа нь энэ нь математикийн томьёогоор тодорхойлогдсон вектор гэж нэрлэгддэг муруй ба шугамуудаас бүрдэх вектор графикийг ашигладаг.

Нэгэн цагт Adobe Illustrator тийм ч сайн байгаагүй тохиромжтой програмпикселийн төгс график үүсгэх. Сайн мэдээ гэвэл тэр хамгийн сүүлийн хувилбарууд Illustrator нь сайн график бүтээх гайхалтай хэрэгсэл болсон.

Би үүнийг хэлэх ёстой Вектор графикҮндсэндээ энгийн, хавтгай дүрс, цэвэр өнгө, тортой ажиллахыг хамардаг Adobe Illustrator нь тохиргоонд маш уян хатан бөгөөд сүлжээг өөрийн хэрэгцээнд тохируулах, объектуудыг тэгшлэх, ашиглах боломжийг олгодог. Төрөл бүрийн төрөлтаслах. Энэ нь ямар ч дэлгэц дээр цэвэрхэн, загварлаг харагдах төгс загварыг бүтээхэд хялбар болгодог. Хэрэв та төгс графикийг хэрхэн бүтээх талаар сурахыг хүсвэл дараах нийтлэлийг уншина уу. Adobe Illustrator ашиглан хэрхэн пиксел төгс урлагийн бүтээл хийх вэ .

5. Өнгө

Хавтгай дизайны хамгийн онцлог шинж чанаруудын нэг нь сүүдэрээс гадна өнгө ашиглах явдал юм. Хавтгай дизайны элементүүдэд ашигладаг ихэнх өнгө нь хэдхэн үндсэн өнгөнөөс бүрддэг.

Хавтгай дизайн дахь өнгө нь тод, баялаг, баялаг юм.Хавтгай өнгөний схем нь цөөн хэдэн тусгай өнгөөр ​​хязгаарлагдахгүй бөгөөд тэдгээрийн сонголт нь зөвхөн таны дүрсэлсэн зүйлээс хамаарна, энэ нь чимэг палитр дахь амттан эсвэл чимэг загварын объект юм.

Та өнгөт палитрыг сайн ойлгодог UI дизайнер бөгөөд Photoshop болон Illustartor программ дээр өнгөт самбар дээр туршилт хийж, хүссэнээрээ өнгийг хольж байна гэж бодъё. Гэсэн хэдий ч энэ үйл явц нь нэлээд төвөгтэй бөгөөд сайн зөн совин, туршлага, ур чадвар шаарддаг. Энд та өөрийн өнгөт палитрыг бий болгоход туслах зарим хэрэгслийг олох болно.

Тэдгээрийн зарим нь зөвхөн хавтгай загвараас гадна бүх төрлийн дизайн, чимэглэлд тохиромжтой. Жишээлбэл, Adobe Color CC, илүү сайн Cooler гэж нэрлэдэг. Өнөөдөр вэб сайт болон Adobe-ийн бүтээгдэхүүнээр дамжуулан шууд хандах боломжтой. Cooler бол өөрийн өнгөт палитр үүсгэх эсвэл номын сангаас захиалгат палитраас сонгох боломжийг олгодог маш уян хатан хэрэгсэл юм.

Өөр нэг энгийн бөгөөд тохиромжтой өнгөт палитр үүсгэгч нь Coolors юм. Зүгээр л хоосон зай дарахад програм нь өнгөт палитр үүсгэх болно, та өнгийг тохируулах боломжтой, мөн экспортын функц байдаг.

Хэрэгтэй байж болох захиалгат палитртай ижил төстэй хэд хэдэн үйлчилгээ байдаг. Гэсэн хэдий ч, FlatUIColors.com-д Designmodo-ээс тусгайлан бүтээсэн нэг хэрэгсэл байдаг - энэ нь ажилд маш тохиромжтой "хавтгай" өнгө бүхий үйлчилгээ юм. Энэ сайт нь төгс дизайны хувьд сайн өнгөт шийдлийг хайж буй дизайнеруудын дунд маш их алдартай болсон. Оролдоод үз!

Мөн та илүү олон төрлийн өнгө, палитрыг олох боломжтой Google-ийн материал дизайны гарын авлага.

6. Урт сүүдэр

Дээр дурьдсанчлан, хавтгай загвар нь энгийн бөгөөд маш их зайтай байдаг тул хавтгай загвар нь аливаа эффект ашиглахаас татгалздаг. Гэсэн хэдий ч хавтгай дизайны хувьд ердийн нэг нөлөө байдаг. Энэ нөлөө нь чиг хандлага болж, орон сууцны онцлог шинж чанар болсон.

Одоо бид урт сүүдрийн тухай ярьж байна. Эдгээр нь энэ нөлөөг танигдах зарим ердийн шинж чанартай байдаг, тухайлбал: 45 градусын хазайлт ба том хэмжээ(сүүдэр нь тухайн объектоос хэд дахин урт байж болно. Үүний үр дүнд урт сүүдэр нь хавтгайд гүн гүнзгий нөлөө үзүүлдэг.

Энэ нөлөө нь объектыг илүү гурван хэмжээст болгодог, гэхдээ нэгэн зэрэг хавтгай дизайны хүрээнд хадгалдаг.

7. Фонттой ажиллах

Хавтгай дизайн хийхэд хэв маяг нь том үүрэг гүйцэтгэдэг. Ихэнхдээ текст нь найрлагын гол элемент болдог.

Хавтгай загвар нь ихэвчлэн энгийн үсгийн хэв маягийг ашигладаг бөгөөд энэ нь дизайныг бүхэлд нь цэвэр, уншихад хялбар болгодог. Хэрэв та Adobe-ийн бүтээгдэхүүнийг ашигладаг бол Adobe Typekit-ээс олон үнэгүй фонтуудыг олох боломжтой. Font Squirrel дээр та маш олон сайн үнэгүй фонтуудыг олох болно. Гэхдээ хэрэв та фонтыг арилжааны зорилгоор ашиглах гэж байгаа бол лицензийг уншихаа бүү мартаарай.

Ихэнхдээ хавтгай загварт том үсэг, ялгаатай өнгийг ашиглах нь заншилтай байдаг бөгөөд энэ нь текстийг илүү ойлгомжтой болгодог.

Фонтуудыг бага зэрэг ашиглана уу, тэдгээр нь тусдаа элемент шиг харагдахын оронд дизайныг нөхөж, нөхөх ёстой гэдгийг санаарай. Хамгийн бага байж, бүх зүйлийг тэнцвэртэй байлгахыг санаарай. Гэсэн хэдий ч хавтгай нь илүү хатуу, цэвэрхэн харагддаг тул sans-serif фонтуудыг ихэвчлэн ашигладаг.

8. Хавтгай дизайны давуу болон сул талууд

Хавтгай загвар нь олон давуу талтай учраас маш их алдартай болсон ч энэ хэв маягийг ашиглах үед дизайнеруудад тулгардаг зарим сул талууд байсаар байна. Давуу болон сул талуудыг харцгаая.

давуу тал

Алдартай байдал

Хавтгай дизайн нь чиг хандлага болж, дизайнерууд болон вэб дизайнеруудаас илүү эерэг үнэлгээ авч, байр сууриа огт алдахгүй байх шиг байна. Харин ч улам бүр дэлгэрч, зарим шинэ хэлбэр, шинж чанарыг олж авч, улам бүр бүтээлч болж байна.

Энгийн байдал

Хавтгай загвар нь энгийн, минималист, цэвэрхэн. Flat on web нь хэрэглэгчдэд үзүүлэнгийн анхаарлыг сарниулахаас илүү контентод анхаарлаа төвлөрүүлэхэд тусалдаг. Энэ нь гар утасны програмын интерфэйсүүдэд бас ажилладаг: цэвэр дизайн том товчлууруудашигладаг хөдөлгөөнт төхөөрөмжүүдтөгс.

Гэрэл гэгээ

Өнгө нь хавтгай дизайны өөр нэг гайхалтай давуу тал юм. Хурц, баян өнгө нь дур булаам, цэвэрхэн харагддаг бөгөөд градиент байхгүй нь дизайныг загварлаг болгодог. Түүнээс гадна, ийм цэвэр өнгө нь илүү эерэг, харагдахуйц хавтгай загвар нь зөв сэтгэл хөдлөлийг бий болгодог;

Алдаа дутагдал

Хавтгай нь өөр олон давуу талтай боловч ямар ч загвар төгс байдаггүй, бид үүнийг төгс болгож чадахгүй. Хавтгай дизайны зарим сул талуудыг дурдах хэрэгтэй.

Хариуцлагагүй байдал

Заримдаа чухал нарийн ширийн зүйлс эсвэл визуал эффектийн дутагдал нь хэрэглэгчдэд ээлтэй интерфэйс үүсгэх үйл явцыг төвөгтэй болгодог бөгөөд энэ нь ерөнхийдөө дизайныг бүхэлд нь хариу үйлдэл үзүүлэхгүй болгодог. Дэлгэц дээр товших эсвэл товших шаардлагатай вэб хуудасны элементүүдийг олоход хэцүү байж болох тул бүх хэрэглэгчид хавтгайд тухтай байдаггүй. гар утасУчир нь тэд интерактив биш юм.

Хэвлэлийн асуудал

Өмнө дурьдсанчлан, фонт бүр хавтгай загварт тохирохгүй. Заримдаа хурц ирмэгтэй ийм баян фонт нь үнэхээр тэнцвэртэй, загварлаг харагддаг. Гэсэн хэдий ч, хэрэв фонтыг буруу сонгосон бол энэ нь дизайныг бүхэлд нь сүйтгэж болзошгүй юм. Та фонтыг сонгохдоо ямар фонт тохиромжтой, аль нь тохирохгүйг сайн мэдэрнэ үү.

Сул дүрслэл

Эффект, өнгө, фонт ашиглах хязгаарлалтаас шалтгаалан хавтгай загвар нь хэтэрхий энгийн бөгөөд хүйтэн харагдаж болно. Түүний минимализм нь гол дутагдалтай тал байж болно - бусад хавтгай загварууд нь таныхтай яг адилхан харагддаг. Тиймээс та ижил хялбаршуулсан хэлбэр, хязгаарлагдмал өнгөт палитр, ижил төстэй фонт ашиглаж байгаа тул өөрийн дүрс эсвэл вэб хуудсыг хэн нэгний загвараас өөр харагдуулах нь маш хэцүү байдаг. Үүний үр дүнд хавтгай загвар нь цаг хугацааны явцад уйтгартай болдог.

9. Ирээдүйн хавтгай загварын чиг хандлага

Хавтгай дизайн бүрэн төлөвшиж, зогссон гэж хэлж болохгүй, магадгүй энэ нь дээр дурдсан дутагдалтай талуудтай холбоотой байж болох юм.

Хэрэв та хавтгай дизайны сүүлчийн жишээг анхааралтай ажиглавал энэ нь үнэхээр байгааг анзаарч магадгүй юмхатуу хэрэгслүүдээсээ аажмаар холдож, градиент, сүүдэр, гэрэлтүүлэг болон бусад харааны эффект гэх мэт нарийн эффектүүдийг нэмж эхэлдэг.

Эдгээр жижиг мэдрэгчүүд нь скеуоморф загвар шиг хэт нарийн ширийн зүйлгүйгээр хавтгай дизайныг гүнзгийрүүлж өгдөг.

Тиймээс хавтгай нь шинж чанараа алдахгүй, харин илүү сонирхолтой, уян хатан болдог- Тэр үнэхээр сайжирч байна.

дүгнэлт

Тиймээс бид хавтгай дизайны түүхийн зарим баримтуудыг хэлэлцэж, өнгө, хэлбэр, хэвлэх талаар ярилцав. Бид янз бүрийн өнцгөөс харж, байшингийн давуу болон сул талуудад анхаарлаа төвлөрүүлж, сайн загвар бүтээх үндсэн зарчмуудыг олж мэдсэн.

Та өөрөө сурсан гэж найдаж байна шинэ мэдээлэлЭнэ нийтлэлээс эсвэл ядаж сонирхолтой санагдсан. Хэрэв та өмнө нь хийгээгүй бол хавтгай загвар бүтээхийг хичээх хэрэгтэй.

Эцсийн эцэст, хавтгай дизайны талаар өөр юу хэлэх вэ?

Хэрэв та хавтгай, хурц ирмэгтэй, тод өнгө, тод фонт, цэвэрхэн, минимализмд үнэхээр дуртай бол үүнийг сонгоорой!

Энэ нь загварлаг, гэхдээ ямар ч график хэв маягийн нэгэн адил зөвхөн нэг техникээр өөрийгөө бүү хязгаарлаарай. Хавтгай загвар моод байна гэдэг нь та төсөлдөө бусад хэв маягийг ашиглах боломжгүй гэсэн үг биш юм. Скеуоморфизм нь жижиг нарийн ширийн зүйлс, бүтэцтэй байж болно сайн шийдвэр. Хамгийн гол нь дизайн нь төсөл бүрийн хувьд өөр өөр байдаг гэдгийг санах нь зүйтэй бөгөөд энэ нь тохиромжтой, ажиллагаатай хэвээр байхын зэрэгцээ түүний сүнс, зорилго, мөн чанарыг илэрхийлэх ёстой. Урагшаа!

Хавтгай дизайн- дизайны нийгэмлэг бүхэлдээ ярьдаг харьцангуй шинэ чиг хандлага.

Зарим хүмүүс үүнд дуртай, зарим нь огт дасаж чаддаггүй, бүр үзэн яддаг.

Сайн загвар нь юуны түрүүнд үйлчлүүлэгчийн бизнесийн асуудлыг шийдэх ёстой бөгөөд үүнд ямар арга замаар хүрэх вэ гэдэг нь хоёрдогч асуулт юм. Хэрэв дизайнер "хавтгай загвар" -ыг загвар, хэрэгсэл болгон сонгосон бол тийм байх болно! Гэхдээ энэ хэв маяг нь бүх төслүүдэд тохиромжгүй гэдгийг мартаж болохгүй.

Тиймээс, хэрэв та загварын чиг хандлагад автаж, "хавтгай дизайн" хэв маягаар ажиллахаар шийдсэн бол юу санах хэрэгтэйг дүн шинжилгээ хийцгээе.

Хавтгай дизайны үндсэн зарчим нь:

1. Ямар ч нөлөө үзүүлэхгүй

2. энгийн элементүүд

3. Типографид анхаарлаа хандуул

4. Өнгө дээр анхаарлаа төвлөрүүл

5. Минималист хандлага

6. "Бараг" хавтгай загвар

Одоо хавтгай дизайны зарчим бүрийг илүү нарийвчлан авч үзье.

Ямар ч нөлөө байхгүй

Хавтгай загвар нь ихэвчлэн сүүдэр, налуу, товойлгох, градиент гэх мэт эффект эсвэл гүн, эзэлхүүнийг нэмдэг бусад аргуудыг ашигладаггүй. "Скеморфизм" стилист өрсөлдөгчөөс ялгаатай нь 3D эффект эсвэл материаллаг байдлыг шилжүүлэхгүй. Элемент бүр тодорхой байх ёстой, энэ нь дүрс, навигацийн талбарэсвэл хүрээ, товчлуур гэх мэт.

Хавтгай хэв маяг нь тод илэрхийлэлтэй байдаг Гадаад төрхгүйгээр нэмэлт функцуудболон элементүүд. Энэ нь найрлагын шатлал, элементүүдийн байршлын тодорхой мэдрэмж дээр тулгуурладаг. Энэхүү бүтэц нь дизайныг ойлгоход хялбар бөгөөд хэрэглэгч бүрт ойлгомжтой болгодог.

Энгийн элементүүд

Хавтгай дизайн нь ихэвчлэн товчлуур, дүрс гэх мэт энгийн хэрэглэгчийн интерфейсийн элементүүдийг ашигладаг. Эдгээр интерфэйсийн элементүүдийг бүтээхдээ дизайнерууд энгийн дүрсийг (тэгш өнцөгт, тойрог, дөрвөлжин гэх мэт) баримталдаг - энэ нь дүрс бүрийг бие даан байрлуулах боломжийг олгодог.

Гэхдээ энгийн элементүүдийг энгийн загвартай андуурч болохгүй. Хавтгай дизайны үзэл баримтлал нь ямар ч загварын хувьд өөр төрлийн дизайны үзэл баримтлалтай адил төвөгтэй байж болно.

Типографид анхаарлаа хандуулаарай

Хавтгай загвар нь эзэлхүүнгүй энгийн хэлбэрийн элементүүд дээр суурилдаг тул хэв маяг нь хавтгай найрлагад маш чухал элемент юм.

Фонтын тэмдэгт таарч байх ёстой ерөнхий схемболон найрлага - хэт хялбаршуулсан загварын загвар дээр хэтэрхий төвөгтэй фонт нь хачирхалтай, дүр эсгэх мэт харагдаж болно. Энгийн sans-serif фонтыг тод эсвэл тод ашиглах нь дээр. Текст нь энгийн хэлбэрүүдтэй нийцсэн байх ёстой.

Фонт нь хэрэглэгчдэд манай интерфейстэй харилцахад туслах туслах хэрэгсэл байх ёстой. Товчнууд болон бусад элементүүдийн шошго нь нарийн төвөгтэй байх ёсгүй.

Өнгөт анхаарлаа хандуулаарай

Өнгө бол дизайны чухал хэсэг юм. Хавтгай загварын палитр нь бусад загварын хэв маягаас илүү тод, өнгөлөг байдаг. 2-3 өнгөт анхаарлаа төвлөрүүлдэг ердийн загвартай харьцуулахад хавтгай загвар нь 6 эсвэл бүр 8 өнгийн сүүдэртэй байж болно.

Энэ нийтлэлд би хавтгай дизайны талаар танд хэлэх болно. Сүүлийн хэдэн жилийн хугацаанд хавтгай нь вэб дэх тэргүүлэх чиг хандлагын нэг болсон тул та энэ талаар аль хэдийн сонссон байх.

Өнөөдөр бид хавтгай дизайн гэж юу болох, хэрхэн үүссэн, цэвэр, тод, мэдрэмжтэй дизайн хийхэд юу хэрэгтэйг авч үзэх болно.

Та хавтгай дизайны сайн жишээг http://market.envato.com/ дээрээс олж болно. Орчин үеийн дизайн ямар харагддаг талаар тодорхой ойлголт өгөх олон тооны зохион байгуулалт, дүрс, загварууд байдаг. .

1. Хавтгай дизайн гэж юу вэ?

Хавтгай дизайн нь минимализмаар тодорхойлогддог хэрэглэгчийн интерфейс, график дизайны орчин үеийн хэв маяг юм. Хавтгай дизайн нь хамгийн бага элемент ашиглах, бүтэц, сүүдэр, гэрлийн янз бүрийн нөлөө байхгүй, жишээлбэл: холимог өнгө, градиент, тодруулга гэх мэт.

Хавтгай нь скеуоморфизмын эсрэг байдаг( Skeuomorphism нь нэг бүтээгдэхүүн нь нөгөөгийнхөө дүр төрхийг өгөх үед дизайны зарчим юм, i.e. янз бүрийн интерфэйсийн элементүүдийг бодит объектуудаас хуулбарлах үед - ойролцоогоор.) , түүнчлэн баялаг дизайн Гэсэн хэдий ч хавтгай дизайн нь анх харахад тийм ч энгийн зүйл биш гэдгийг хэлэх нь зүйтэй. Энэ нь скеуоморфизмын зарим шинж чанарыг агуулдаг боловч бид энэ талаар бага зэрэг дараа ярих болно.

Ерөнхийдөө flat нь хэрэглэгчдэд дүрслэлд сатааралгүйгээр контентод анхаарлаа төвлөрүүлэхэд тусалдаг. Хавтгай дизайн нь элементүүдийн энгийн байдлыг онцолж, үүний зэрэгцээ интерфэйсийг илүү мэдрэмжтэй, тааламжтай, ашиглахад хялбар болгодог.

2. Бага зэрэг түүх

Хавтгай дизайн нь интернетэд дэлхийн чиг хандлага болохоос олон жилийн өмнө байсан гэдгийг мэддэг. Хавтгай загвар нь 80-аад онд нэлээд алдартай байсан тул тухайн үеийн технологи нь нарийн төвөгтэй эффект, бүтэц, сүүдэрийг дэмжих хангалттай хөгжөөгүй байсан. Гэсэн хэдий ч тэр үед ч дизайн нь скеуфоморфизмыг эрэлхийлж, интерфейсийн элементүүдийг аль болох бодитой болгохыг хичээсэн.

Майкрософт метроны хэв маяг гэж нэрлэгддэг бүтээгдэхүүн үйлдвэрлэж эхэлсний дараа хавтгай загвар нь бидний одоо харж байгаа хэлбэрээр алдартай болж эхэлсэн. Метро бол өөрийн хэв маяг, энгийн байдлаараа гайхалтай байдаг Microsoft-ын UI загвар юм.

2010 онд Майкрософт Windows Phone 7-г гаргасан бөгөөд энэ нь өмнөх бүтээгдэхүүнээсээ өвлөгдөж ирсэн хурц ирмэг бүхий хавтгай дизайн, энгийн графикийг ашигласан. Microsoft (Zune). Хожим нь амжилтаас урам зориг авсан Microsoft үйлдлийн системээ гаргасан Windows систем 8, ижил хавтгай метроны хэв маяг дээр суурилсан.

Эцсийн эцэст, 2013 онд Apple компанийг худалдаанд гаргаснаар хавтгай дизайн алдаршсан оргилдоо хүрсэн iOS 7 нь дүрс, фонт зэрэг бүрэн шинэчлэгдсэн хэрэглэгчийн интерфэйсийн элементүүдтэй цоо шинэ дизайнтай. Apple бий болгосон UI болон дүрсний дизайны харааны зарчим .

Удалгүй Google мөн өөрийн программууд болон вэб хуудсууддаа хавтгай хэв маягийг ашиглаж эхэлсэн Материалын дизайн. Google нь энэ хэв маягт зориулагдсан бүхэл бүтэн хэсэгтэй бөгөөд үүнд вэб дизайны зорилго, түүний зарчим, янз бүрийн дизайны объектуудыг бий болгох зааварчилгааг багтаасан байдаг: дүрс, зохион байгуулалт гэх мэт.

Тэр цагаас хойш хавтгай нь вэб дизайны гол чиг хандлага болж, вэбсайт, программууд болон интерфейсийн элементүүдийг гоёмсог, цэвэрхэн, загварлаг болгов.

Тиймээс орчин үеийн технологийн ертөнцийг төсөөлөхөд хэцүү компаниудаас хавтгай дизайны дэлхийн гурван жишээ байдаг.

Майкрософт компанийн метроны загвар

Apple iOS 7 загвар

Google-ийн материаллаг дизайн

3. Цэвэрлэхээ мартуузай

Гурван хэмжээст элемент, градиент, бүтэц, тодруулга, хагас өнгө, сүүдэр гэх мэт бодит эффектүүд байхгүй тул хавтгай загварыг "хавтгай" гэж нэрлэдэг. Хавтгай хэв маяг нь объектыг дүрслэх хоёр хэмжээст (хавтгай) арга гэдгийг санаарай.

Түүнээс гадна хавтгай загварт объектуудыг маш хялбаршуулсан, загварчлагдсан байдлаар дүрсэлсэн байдаг.

Заримдаа бүр объектын дүрс эсвэл контурыг ашигладаг, жишээлбэл. Объектыг танигдахуйц болгоход хангалттай, гэхдээ жижиг нарийн ширийн зүйлийг хэт ачаалахгүй.

Минимализм нь өнөө үед дэлхийн чиг хандлага болж байна: энгийн хэлбэрийн хэлбэр, хурц ирмэгийг ашиглах нь цэвэрхэн, тааламжтай загварыг бий болгодог. Энгийн хэлбэрүүд нь илүү ойлгомжтой бөгөөд ойлгоход хялбар байдаг. Энэ нь дизайныг завгүй, эмх замбараагүй харагдуулахгүйгээр минималист, цэвэрхэн байлгадаг.

4. Үүнийг төгс төгөлдөрт хүргэ

Хавтгай дүрс болон UI элементүүдийг бүтээхдээ тэдгээрийг тод, цэвэрхэн, пикселээр төгс харагдуулах хэрэгтэй гэдгийг мэдэж аваарай. аль болох их. Түүнээс гадна энэ нь растер болон вектор графикийн аль алинд нь хамаарна.

Adobe Photoshop энд тодорхой байна: энэ нь пиксел дээр суурилсан растер графиктай ажилладаг.

Adobe Illustrator программын хувьд математикийн томьёогоор тодорхойлогдсон вектор гэж нэрлэгддэг муруй, шугамуудаас бүрдсэн вектор графикийг ашигладаг.

Нэгэн цагт Adobe Illustrator нь пикселийн төгс график бүтээхэд тийм ч тохиромжтой програм биш байсан. Сайн мэдээ гэвэл Illustrator-ийн хамгийн сүүлийн хувилбарууд нь сайн график бүтээх гайхалтай хэрэгсэл болсон.

Вектор график нь ихэвчлэн энгийн, хавтгай дүрс, цэвэр өнгө, тортой ажиллахыг хэлнэ гэж хэлэх ёстой. Adobe Illustrator нь тохиргоондоо маш уян хатан бөгөөд сүлжээг өөрийн хэрэгцээнд нийцүүлэх, объектуудыг тэгшлэх, янз бүрийн төрлийн хаалт ашиглах боломжийг олгодог. Энэ нь ямар ч дэлгэц дээр цэвэрхэн, загварлаг харагдах төгс загварыг бүтээхэд хялбар болгодог. Хэрэв та төгс графикийг хэрхэн бүтээх талаар сурахыг хүсвэл дараах нийтлэлийг уншина уу. Adobe Illustrator ашиглан хэрхэн пиксел төгс урлагийн бүтээл хийх вэ .

5. Өнгө

Хавтгай дизайны хамгийн онцлог шинж чанаруудын нэг нь сүүдэрээс гадна өнгө ашиглах явдал юм. Хавтгай дизайны элементүүдэд ашигладаг ихэнх өнгө нь хэдхэн үндсэн өнгөнөөс бүрддэг.

Хавтгай дизайн дахь өнгө нь тод, баялаг, баялаг юм.Хавтгай өнгөний схем нь цөөн хэдэн тусгай өнгөөр ​​хязгаарлагдахгүй бөгөөд тэдгээрийн сонголт нь зөвхөн таны дүрсэлсэн зүйлээс хамаарна, энэ нь чимэг палитр дахь амттан эсвэл чимэг загварын объект юм.

Та өнгөт палитрыг сайн ойлгодог UI дизайнер бөгөөд Photoshop болон Illustartor программ дээр өнгөт самбар дээр туршилт хийж, хүссэнээрээ өнгийг хольж байна гэж бодъё. Гэсэн хэдий ч энэ үйл явц нь нэлээд төвөгтэй бөгөөд сайн зөн совин, туршлага, ур чадвар шаарддаг. Энд та өөрийн өнгөт палитрыг бий болгоход туслах зарим хэрэгслийг олох болно.

Тэдгээрийн зарим нь зөвхөн хавтгай загвараас гадна бүх төрлийн дизайн, чимэглэлд тохиромжтой. Жишээлбэл, Adobe Color CC, илүү сайн Cooler гэж нэрлэдэг. Өнөөдөр вэб сайт болон Adobe-ийн бүтээгдэхүүнээр дамжуулан шууд хандах боломжтой. Cooler бол өөрийн өнгөт палитр үүсгэх эсвэл номын сангаас захиалгат палитраас сонгох боломжийг олгодог маш уян хатан хэрэгсэл юм.

Өөр нэг энгийн бөгөөд тохиромжтой өнгөт палитр үүсгэгч нь Coolors юм. Зүгээр л хоосон зай дарахад програм нь өнгөт палитр үүсгэх болно, та өнгийг тохируулах боломжтой, мөн экспортын функц байдаг.

Хэрэгтэй байж болох захиалгат палитртай ижил төстэй хэд хэдэн үйлчилгээ байдаг. Гэсэн хэдий ч, FlatUIColors.com-д Designmodo-ээс тусгайлан бүтээсэн нэг хэрэгсэл байдаг - энэ нь ажилд маш тохиромжтой "хавтгай" өнгө бүхий үйлчилгээ юм. Энэ сайт нь төгс дизайны хувьд сайн өнгөт шийдлийг хайж буй дизайнеруудын дунд маш их алдартай болсон. Оролдоод үз!

Мөн та илүү олон төрлийн өнгө, палитрыг олох боломжтой Google-ийн материал дизайны гарын авлага.

6. Урт сүүдэр

Дээр дурьдсанчлан, хавтгай загвар нь энгийн бөгөөд маш их зайтай байдаг тул хавтгай загвар нь аливаа эффект ашиглахаас татгалздаг. Гэсэн хэдий ч хавтгай дизайны хувьд ердийн нэг нөлөө байдаг. Энэ нөлөө нь чиг хандлага болж, орон сууцны онцлог шинж чанар болсон.

Одоо бид урт сүүдрийн тухай ярьж байна. Эдгээр нь энэ нөлөөг танигдахуйц зарим ердийн шинж чанартай байдаг, тухайлбал: 45 градусын налуу, том хэмжээтэй (сүүдэр нь тухайн объектоос хэд дахин урт байж болно. Үүний үр дүнд урт сүүдэр нь хавтгайд гүн гүнзгий нөлөө үзүүлдэг.

Энэ нөлөө нь объектыг илүү гурван хэмжээст болгодог, гэхдээ нэгэн зэрэг хавтгай дизайны хүрээнд хадгалдаг.

7. Фонттой ажиллах

Хавтгай дизайн хийхэд хэв маяг нь том үүрэг гүйцэтгэдэг. Ихэнхдээ текст нь найрлагын гол элемент болдог.

Хавтгай загвар нь ихэвчлэн энгийн үсгийн хэв маягийг ашигладаг бөгөөд энэ нь дизайныг бүхэлд нь цэвэр, уншихад хялбар болгодог. Хэрэв та Adobe-ийн бүтээгдэхүүнийг ашигладаг бол Adobe Typekit-ээс олон үнэгүй фонтуудыг олох боломжтой. Font Squirrel дээр та маш олон сайн үнэгүй фонтуудыг олох болно. Гэхдээ хэрэв та фонтыг арилжааны зорилгоор ашиглах гэж байгаа бол лицензийг уншихаа бүү мартаарай.

Ихэнхдээ хавтгай загварт том үсэг, ялгаатай өнгийг ашиглах нь заншилтай байдаг бөгөөд энэ нь текстийг илүү ойлгомжтой болгодог.

Фонтуудыг бага зэрэг ашиглана уу, тэдгээр нь тусдаа элемент шиг харагдахын оронд дизайныг нөхөж, нөхөх ёстой гэдгийг санаарай. Хамгийн бага байж, бүх зүйлийг тэнцвэртэй байлгахыг санаарай. Гэсэн хэдий ч хавтгай нь илүү хатуу, цэвэрхэн харагддаг тул sans-serif фонтуудыг ихэвчлэн ашигладаг.

8. Хавтгай дизайны давуу болон сул талууд

Хавтгай загвар нь олон давуу талтай учраас маш их алдартай болсон ч энэ хэв маягийг ашиглах үед дизайнеруудад тулгардаг зарим сул талууд байсаар байна. Давуу болон сул талуудыг харцгаая.

давуу тал

Алдартай байдал

Хавтгай дизайн нь чиг хандлага болж, дизайнерууд болон вэб дизайнеруудаас илүү эерэг үнэлгээ авч, байр сууриа огт алдахгүй байх шиг байна. Харин ч улам бүр дэлгэрч, зарим шинэ хэлбэр, шинж чанарыг олж авч, улам бүр бүтээлч болж байна.

Энгийн байдал

Хавтгай загвар нь энгийн, минималист, цэвэрхэн. Flat on web нь хэрэглэгчдэд үзүүлэнгийн анхаарлыг сарниулахаас илүү контентод анхаарлаа төвлөрүүлэхэд тусалдаг. Энэ нь гар утасны програмын интерфэйсүүдэд бас ажилладаг: том товчлуур бүхий цэвэр загвар нь гар утасны хэрэглээг төгс болгодог.

Гэрэл гэгээ

Өнгө нь хавтгай дизайны өөр нэг гайхалтай давуу тал юм. Хурц, баян өнгө нь дур булаам, цэвэрхэн харагддаг бөгөөд градиент байхгүй нь дизайныг загварлаг болгодог. Түүнээс гадна, ийм цэвэр өнгө нь илүү эерэг, харагдахуйц хавтгай загвар нь зөв сэтгэл хөдлөлийг бий болгодог;

Алдаа дутагдал

Хавтгай нь өөр олон давуу талтай боловч ямар ч загвар төгс байдаггүй, бид үүнийг төгс болгож чадахгүй. Хавтгай дизайны зарим сул талуудыг дурдах хэрэгтэй.

Хариуцлагагүй байдал

Заримдаа чухал нарийн ширийн зүйлс эсвэл визуал эффектийн дутагдал нь хэрэглэгчдэд ээлтэй интерфэйс үүсгэх үйл явцыг төвөгтэй болгодог бөгөөд энэ нь ерөнхийдөө дизайныг бүхэлд нь хариу үйлдэл үзүүлэхгүй болгодог. Интерактив биш учир гар утасны дэлгэцэн дээр товших эсвэл товших шаардлагатай элементүүдийг вэб хуудаснаас олоход хэцүү байдаг тул бүх хэрэглэгчид хавтгайд таатай байдаггүй.

Хэвлэлийн асуудал

Өмнө дурьдсанчлан, фонт бүр хавтгай загварт тохирохгүй. Заримдаа хурц ирмэгтэй ийм баян фонт нь үнэхээр тэнцвэртэй, загварлаг харагддаг. Гэсэн хэдий ч, хэрэв фонтыг буруу сонгосон бол энэ нь дизайныг бүхэлд нь сүйтгэж болзошгүй юм. Та фонтыг сонгохдоо ямар фонт тохиромжтой, аль нь тохирохгүйг сайн мэдэрнэ үү.

Сул дүрслэл

Эффект, өнгө, фонт ашиглах хязгаарлалтаас шалтгаалан хавтгай загвар нь хэтэрхий энгийн бөгөөд хүйтэн харагдаж болно. Түүний минимализм нь гол дутагдалтай тал байж болно - бусад хавтгай загварууд нь таныхтай яг адилхан харагддаг. Тиймээс та ижил хялбаршуулсан хэлбэр, хязгаарлагдмал өнгөт палитр, ижил төстэй фонт ашиглаж байгаа тул өөрийн дүрс эсвэл вэб хуудсыг хэн нэгний загвараас өөр харагдуулах нь маш хэцүү байдаг. Үүний үр дүнд хавтгай загвар нь цаг хугацааны явцад уйтгартай болдог.

9. Ирээдүйн хавтгай загварын чиг хандлага

Хавтгай дизайн бүрэн төлөвшиж, зогссон гэж хэлж болохгүй, магадгүй энэ нь дээр дурдсан дутагдалтай талуудтай холбоотой байж болох юм.

Хэрэв та хавтгай дизайны сүүлчийн жишээг анхааралтай ажиглавал энэ нь үнэхээр байгааг анзаарч магадгүй юмхатуу хэрэгслүүдээсээ аажмаар холдож, градиент, сүүдэр, гэрэлтүүлэг болон бусад харааны эффект гэх мэт нарийн эффектүүдийг нэмж эхэлдэг.

Эдгээр жижиг мэдрэгчүүд нь скеуоморф загвар шиг хэт нарийн ширийн зүйлгүйгээр хавтгай дизайныг гүнзгийрүүлж өгдөг.

Тиймээс хавтгай нь шинж чанараа алдахгүй, харин илүү сонирхолтой, уян хатан болдог- Тэр үнэхээр сайжирч байна.

дүгнэлт

Тиймээс бид хавтгай дизайны түүхийн зарим баримтуудыг хэлэлцэж, өнгө, хэлбэр, хэвлэх талаар ярилцав. Бид янз бүрийн өнцгөөс харж, байшингийн давуу болон сул талуудад анхаарлаа төвлөрүүлж, сайн загвар бүтээх үндсэн зарчмуудыг олж мэдсэн.

Та энэ нийтлэлээс шинэ мэдээлэл олж авсан эсвэл ядаж сонирхолтой байсан гэж найдаж байна. Хэрэв та өмнө нь хийгээгүй бол хавтгай загвар бүтээхийг хичээх хэрэгтэй.

Эцсийн эцэст, хавтгай дизайны талаар өөр юу хэлэх вэ?

Хэрэв та хавтгай, хурц ирмэгтэй, тод өнгө, тод фонт, цэвэрхэн, минимализмд үнэхээр дуртай бол үүнийг сонгоорой!

Энэ нь загварлаг, гэхдээ ямар ч график хэв маягийн нэгэн адил зөвхөн нэг техникээр өөрийгөө бүү хязгаарлаарай. Хавтгай загвар моод байна гэдэг нь та төсөлдөө бусад хэв маягийг ашиглах боломжгүй гэсэн үг биш юм. Скеуоморфизм нь жижиг нарийн ширийн зүйлс, бүтэцтэй байх нь бас сайн шийдэл байж болно. Хамгийн гол нь дизайн нь төсөл бүрийн хувьд өөр өөр байдаг гэдгийг санах нь зүйтэй бөгөөд энэ нь тохиромжтой, ажиллагаатай хэвээр байхын зэрэгцээ түүний сүнс, зорилго, мөн чанарыг илэрхийлэх ёстой. Урагшаа!

Харьцангуй саяхан FLAT загвар эсвэл хавтгай загвар гэх мэт дизайны чиглэл түгээмэл болсон.

Windows 8 болон түүнээс хойшхи хувилбаруудын хэрэглэгчид FLAT дизайныг аль хэдийн мэддэг болсон, учир нь системийг ачаалах үед хамгийн түрүүнд тулгардаг зүйл бол энэ дэлгэц юм.

FLAT дизайны гадаад төрх нь гар утасны програмууд тархсантай холбоотой юм. Энэ нь FLAT дизайны объектууд нь вектор объектуудыг ашиглан бүтээгдсэнтэй холбоотой гэж би бодож байна, үүний дагуу тэдгээрийг өөр өөр гаджетын платформд дасан зохицоход хялбар байдаг.

FLAT - дизайн нь дараахь онцлог шинж чанартай байдаг.

Градиент, нарийн төвөгтэй бүтэц, сүүдрийг бүрэн эсвэл хэсэгчлэн үгүйсгэх , үүнд би хувьдаа маш их баяртай байна. Би сүүдрийн талаар ямар ч гомдолгүй, би өөрөө үүнийг ашиглах дуртай, гэхдээ градиент дэлгэцтэй холбоотой мөнхийн бэрхшээлийг арилга.

Типографи, геометр зэрэг нь тэргүүлэх байр суурь эзэлдэг. Ялангуяа вэб дизайны тухайд.

Эв найрамдал ба. Загвар нь хязгаарлагдмал тооны өнгө ашигладаг. Алдартай FLAT загварын палитрын жишээ энд байна.

Бүтээлч мэдээллийн дүрсийг ашиглах.

Би аль хэдийн хэлсэнчлэн FLAT загвар нь маш их алдартай болсон гар утасны програмууд, учир нь түүний гол онцлог нь зохион байгуулалтын энгийн байдал, дасан зохицох чадвар юм. FLAT загвар нь хэв маяг, өнгөний конструктив арга техникийг ашиглан мэдээллийг уялдуулан хүлээн авахад тулгуурладаг тул инфографик дээр өргөн тархсан.

Нэгэн цагт вэб дизайны хамгийн алдартай чиг хандлага бол Web 2.0 байсан. Одоо түүний байрыг FLAT загвар эзэлжээ. Загвар нь мартагдсан хуучнаасаа шинийг бүтээхийн тулд буцаж ирдэг зуршилтай. FLAT загвар хэзээ моодноос гарахыг хэн мэдэх билээ, гэхдээ одоогийн чиг хандлагын энгийн байдал, зохицол, мэдээллийн агуулгыг таашаадаг. Дашрамд хэлэхэд, хавтгай загвар нь 80-аад онд аль хэдийн алдартай байсан, гэхдээ дараа нь энэ нь холбоотой юм техникийн шинж чанарууд, сүүдэр болон градиентийг харуулах боломжгүй. Одоо ихэнх мэдээллийн технологийн тэргүүлэгч компаниуд Flat дизайн руу шилжсэн.

За, бид ч гэсэн өөрчлөгдөж буй ертөнцөд дасан зохицох болно. Дараагийн өгүүллээр би Photoshop дээр энгийн дүрсүүдийг ашиглан ХАВТРАН загварын дүрсүүдийг хэрхэн бүтээхийг харуулах болно.

Хэрэв миний нийтлэлүүд танд сонирхолтой бол би танд мэдээлэлтэй байхыг зөвлөж байна хамгийн сүүлийн үеийн шинэчлэлтүүдсайтын сайт дээр.

(2,635 удаа зочилсон, өнөөдөр 1 удаа зочилсон)