Upload
thapwaris-chinsirirathkul
View
4.174
Download
6
Embed Size (px)
Citation preview
f
ส ำรวจโดยกำรเลอก 30 เวบแรกทตด Google Rankค ำคนคอ Web Design Trends 2016
เปนแนวทเนนไปทำงสสนฉดฉำด กำรเลนกบตวอกษรตำง ๆไดอยำงหลำกหลำยท ำใหเวบดสนกสนำน
เทรนกำรออกแบบทชวยสรำงปฎสมพนธระหวำงระบบและผใชงำน
จดมงหมำยและสงทคำดหวง
กำรด ำเนนกำรไปสผลลพธ
กำรออกแบบ Interaction ทด ตองสำมำรถตอบโจทยและบรหำรควำมคำดหวงของผใชใหได
แบบจ ำลองของนอรแมน
1. จดมงหมำย
2. เจตนำ หรอสงทตองกำรใหเปน
3. ระบขนตอนทกระท ำ
4. กำรด ำเนนกำร
5. รบรกำรตอบสนอง
6. กำรตควำม
7. สรปผล (บรรลจดมงหมำย)
7 ขนตอนการด าเนนการ
จดมงหมาย
ผเขาชมตองการซอ Surface Pro 4 จงเขาไปหาขอมลทเวบไซต Microsoft และเลอกทหนา surfaceและ ผออกแบบตองการขายสนคาซงกคอ Surface Pro 4
เจตนา หรอสงทตองการใหเปน
เจตนาหรอสงทตองการใหเปนกคอเมอมผเขามายงหนานตองการใหผเขาชมนนซอสนคาของตนปม “ซอวนน” จงเปนเจตนาหรอสงทตองการใหผใชกดในหนาน
ระบขนตอนทกระท า
เมอผใชงานรแลววาถาตองการซอสนคาตวนเราจ าเปนตองกดปมดงกลาวโดยการกดคลกทปม “ซอวนน”
การด าเนนการ
เมอผใชงานคลกทปมสฟาแลวกจะเขาสการด าเนนการคอเมอมการกดปมจะเกดการเปลยนหนาเวบเพจขน
รบรการตอบสนอง
ผลลพธเมอกดปม ซอวนนกคอเปลยนมายงหนาส าหรบการสงซอนคอสงทผใชงานสามารถรบรไดในทนท
การตความ
หลงจากเปลยนมายงหนานแลวสงตอมาคอการตความ จากภาพนผใชสามารถเขาใจไดทนทวาในภมภาคของตนนนมสถานทจ าหนายและสามารถสงซอออนไลนไดทนท
สรปผล (บรรลจดมงหมาย)
ตอนนกมาถงขนตอนสดทายซงเปนจดมงหมายตงแตแรกกคอการเขามาสงซอ Surface Pro 4 แลวซงทง 6 ขนตอนทผานมากสามารถพาผใชงานเขามาถงหนานไดซงกคอผลลพธ
Interaction Design ทด ตองสำมำรถตอบโจทยและบรหำรควำมคำดหวงของผใชงำนได
a living moment in an otherwise still photograph.
เทรนดภำพถำยทมชวต เปนกำรใชรปภำพแบบ “ซเนมำกรำฟ” ในกำรถำยทอดเรองรำว
Kevin Burg and Jamie Beck created the first cinemagraph in 2011
ถำนกไมออกวำซเนมำกรำฟคออะไร?
ใหลองนงถงภำพยนตรเรองแฮรรพอตเตอร
ในหนงเรองนจะมหนงสอพมพอยส ำนกนงทชอ เดล โพรเพธ
ซงภำพถำยในหนงสอนนจะสำมำรถบอกเลำเหตกำรณและควำมรสกในรปนนๆได
Image Format 2016
1. ไฟลมขนำดเลกกวำ .jpg และมควำมละเอยดสงกวำ
2. รองรบทก Browser
3. รองรบรปภำพโปรงแสงเชน png
4. ไมลดคณภำพของรปทงทมขนำดเลกกวำ
5. สำมำรถเพม meta data เขำไปยงรปภำพได
6. รองรบภำพเคลอนไหวแบบ gif
1. ยงตองใช JavaScript ในกำร Decode .bpg เพอน ำมำแสดงผลท
เวบไซตจงท ำใหเสยเวลำในกำรแปลงไฟลสวนน
2. กำรแปลงรปภำพจำก jpg, png, gif หรออนๆไปเปน bpg และกำร
ใชงำนอำจจะยำกส ำหรบบคคลทวไป
ถำหำก Browser ทงหลำยรองรบมนแบบทไมตองใช JavaScript ในกำร Decode มนจะเปน
format ทเปนทนยมมำกในอนำคตครบเนองจำก ขนำดทเลกกวำ และคณภำพทสงกวำรป
jpg ทงยงมควำมสำมำรถดำนโปรงแสงและกำรท ำภำพเคลอนไหวอกดวย
Flat นำเบอและนำเบอและกนำเบอ
Flat มปญหำตอกำรใชงำนของผใช
เทรนดกำรออกแบบเวบไซตสไตลกเกล
นบวนจ ำนวนของอปกรณแพลตฟอรมตำงๆ
และเบรำวเซอรทจะตองท ำงำนรวมกบเวบไซตของเรำเตบโตมำกขน
กำรออกแบบเวบทสำมำรถตอบสนองไดทกขนำดหนำจอ
จงเปนอกหนงตวเลอกส ำหรบยคสมยนและยคสมยตอไปในอนำคต
เลก, กลำง, ใหญ, ใหญมำก, ใหญมาก มาก มาก
1 เวบไซตส าหรบการแสดงผลทกขนาดหนาจอ
ในป 2011
ม CSS Framework ตวนง
ถกพฒนำขนมำ
เพอใหชวตกำรท ำงำนของ Web Developer งำยขน
และCSS Framework ตวดงกลำวกถกพฒนำเรอยมำ
จำกเวอรชนท 1 มำถง 2 เขำสชวงท 3 และเตบโตมำถงชวงท 4
คอ CSS Framework ถกพฒนำขนโดย Mark Otto และ Jacob Thornton จำกทม Twitter
คอกำรจด layout ของหนำจอใหรองรบทกขนำดและสำมำรถปรบเปลยน
รปแบบของตวเองไดตำมหลกกำรท ำงำนของ Responsive Web Design
Bootstrap มควำมสำมำรถในกำรท ำ Responsive Website ซงเดมทในเวอรชนท 1 และ 2
ถกเรยกใชโดยคลำสทชอวำ .span* แตยงพบปญหำกำรท ำงำนซงไมสำมำรถท ำงำน
ในรปแบบ Fully Responsive ไดเนองจำกขอจ ำกดตำงๆทเวบเบรำเซอรไมสนบสนน
ตอมำในเวอรชนท 3 นนไดท ำกำรออกแบบโครงสรำงใหมโดยเพมขนำดของอปกรณตำงๆ
เขำไปดวย เชน extra-small, small, medium, large เปนตนซงกำรท ำงำนจรงกสำมำรถ
ท ำไดดมำก และสำมำรถท ำงำนในรปแบบ Fully Responsive อยำงเตมตว ในสวนของกำร
เรยกใชงำนนนสำมำรถเรยกไดโดยกำรใชคลำส .col-{device-size}-{column-size}
ถงยคปจจบนในเวอรชนท 4 ทำงผพฒนำไดท ำกำรเพมขนำดขนมำอก 1 รปแบบ
คอ extra-large และยงไดเพมรปแบบในกำรจด layout หนำเวบขนมำอก 1 รปแบบ
คอ Flexbox ซงเปน property ของ CSS3 ท ำใหรปแบบ Responsive และ กำรจด
Layout เวบไซตของเรำนนยดหยนและหลำกหลำยยงขน
col-md-12
col-md-3 col-md-3 col-md-6
col-md-8 col-md-4
col-md-9
สงทเปลยนไปส ำหรบ Bootstrap 4
เทคโนโลยทใชในกำรพฒนำ Bootstrap ใช Less CSS ในกำรพฒนำมำตงแตตนจนถง Bootstrap 3.2
ทำงผพฒนำจงไดเพม Source Code ของ Sass Lang ขนมำเพอใหเขำกบยคสมยท Sass ก ำลงเปนทนยม
มำกขนๆจนถง Bootstrap 4 ทมพฒนำกไดยำยมำเขยนโคดดวย Sass อยำงเตมตวและยกเลก Less CSS
ระบบ Grid ใหมเพมควำมสำมำรถในกำรใชงำน Flexbox ซงเปน property ของ CSS3 นนจะท ำใหไมสำมำรถ
เปดเวบไซตทสรำงดวย Flexbox บน IE9 ไดเนองจำก IE9 นนไมสนบสนน Flexbox แตเรำกยงสำมำรถใช
งำนระบบ Grid แบบปรกตและสำมำรถท ำงำนบน IE9 ไดปรกต สวนกำรใชงำน Flexbox เปน Option เสรม
สำมำรถเปดใชงำนไดใน $enable-flex boolean true ในไฟล the _variables.scss
ยกเลกกำรสนบสนน IE8 ทกกรณหำกตองกำรให Bootstrap สนบสนน IE8 กตองใชงำน Bootstrap 3 แทน
หลกจำกทมกำรยกเลกสนบสนน IE8 กไดเปลยนหนวยกำรค ำนวณจำก px เปน rem, em แทน
เชน .container ใน BS4 ถกก ำหนด max-width เปนหนวย rem ซงสงผลดตอ Mobile Friendly แนนอน
เนองจำกหนวย rem, em มควำมยดหยนกวำหนวย px
เพมศกยภำพของ Media Queries เชนเดยวกบ Grid ซงเปลยนจำก px เปน rem, em
สวสด Card Layout
Bootstrap 4 เพมคอมโพเนนใหมชอวำ Card ซงมำแทนทกำรท ำของงำนคลำสตอไปน
.well, .panel, .thumbnail
CSS Reset ตวใหมส ำหรบ Bootstrap 4 โดยเฉพำะใชชอวำ Reboot.css แตจรงๆแลวกคอ normalize.css
ซงถก fork มำและถกปรบแตง CSS เพมเตมใหเหมำะสมกบ Bootstrap 4
Bootstrap 4 ถกเขยน JavaScript ใหมทมงหมดดวย ES6 หรอ ES2015 จงท ำให performance สงขนดวย
Bootstrap 4 นนไมมกำรเรยกใชงำน Icon ใดๆทงนนถำเกดเรำตองกำรใช icon font ตำงๆกตองโหลดมำ
เพมเตมจำกผใหบรกำรอนๆ เชน Font Awesome, icon moon และ Glyphicons เปนตน
รายละเอยดการปรบปรงทงหมด
http://v4-alpha.getbootstrap.com/migration/
คอ การเขยนโคดในรปแบบหนง และ สงออกไปเปนอกรปแบบหนง
ประโยชน ?
มเครองมอตำงๆทใชงำนรวมกนไดมำกมำยเชน third-party mixins, functions, libraries, and frameworks.
ควำมสำมำรถในกำรจดกำรโครงสรำงไฟลทดดวยกำรเขยนแบบ Partial
และยงสำมำรถเขยนในรปแบบซอนหรอทเรยกวำ Nesting ไดอยำงสะดวก
สำมำรถเขยนฟงชนและกำรสรำงเงอนไขตำงๆไดซงท ำใหกำรเขยน CSS ของเรำ
มประสทธภาพมากยงขน
กำรจดกำรไฟลทดจงเหมำะกบกำรท ำงำนรวมกนเปนทม
.text-primarycolor: blue;border: 1px solid blue;
.text-primary {color: blue;border: 1px solid blue;
}
#Partials File Name
_variables.scss
_mixins.scss
components/_buttons.scss
#Import File
@import 'variables';
@import 'mixins';
@import 'components/buttons';
แถม
ท าไมตอง postCSS?
น ำหนกเบำ, Compile เรวกวำ Sass และ LESS
เลอกลง Plugin เองได ฟเจอรไหนรนชำกไมตองลง
ฟเจอรไหนทสรำงปญหำเยอะ ๆ อยำง @extend กไมตองลง
postCSS สำมำรถเขยน Plugin เสรมเองไดซง Sass และ LESS
ท ำไดยำกและไมนยมท ำ
และม Plugin ใหเลอกใชมำกมำย
Bootstrap 5 จะถกเขยนใหมดวย postCSS
แถมอกนด
เปนกำรเขยน CSS แนวใหมดวยคอนเซปตำมชอ
คอ atomic และกำร reusable
ชอ class ในรปแบบ atomic นนไดไอเดยมำจำกแพคเกจ
ทชอวำ emmet ของ zen coding
Atomic CSS มอะไรด?
ท ำงำนในรปแบบ inline css แตไมตองเรยกใชผำน @style
ถำไมถกเรยกใชงำน CSS จะไมถกน ำมำ Compile
ท ำใหลดขนำดไฟลไดอยำงมำก
ประสทธภำพกำรท ำงำนสงกวำ inline css
และยดหยนกวำ inline css