Thiết kế responsive và tương lai của tìm kiếm di động
-
Upload
yen-kieu-hai -
Category
Design
-
view
319 -
download
3
description
Transcript of Thiết kế responsive và tương lai của tìm kiếm di động
![Page 1: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/1.jpg)
THIẾT KẾ RESPONSIVE VÀ TƯƠNG LAI
TÌM KIẾM TRÊN THIẾT BỊDI ĐỘNG
![Page 2: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/2.jpg)
THÁCH THỨC
![Page 3: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/3.jpg)
THIẾT KẾ KĨ THUẬT SỐ
Bạn không biết thiết kếBạn không biết wireframes và tạo mẫu... Và bạn không biết quảng cáo bằng nội dung
![Page 4: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/4.jpg)
TÙY CHỌN
Điều bạn có thể làm hoặc nhờ giúp đỡ tạo:Blog posts, cuộc thi, infographics, tính năng tương tác, hình thức nội dung dài, video, thuyết trình, ...
![Page 5: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/5.jpg)
YÊU CẦU KĨ NĂNG
•Copywriting, nghiên cứu báo chí, ý tưởng câu chuyện•Hồ sơ khách hàng, phân tích dữ liệu•Tiếp cận cộng đồng và PR•Phát triển back-end và front-end•Sản xuất video, hình ảnh, thiết kế graphic
![Page 6: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/6.jpg)
TẬP HỢP
Thiết kế tốt nghĩa là bạn có thể trình bày mọi thứ cho khách hàng và họ sẽ thuê bạn - người có kinh nghiệm tuyệt vời nhất
![Page 7: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/7.jpg)
VẤN ĐỀ
![Page 8: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/8.jpg)
KĨ NĂNG HÌNH CHỮ T
Bạn không phải người thiết kế, bạn không phải giám đốc dự án
Chuyên môn trong lĩnh vực duy nhất (có lẽ là tìm kiếm kĩ thuật), với hiểu biết cơ bản nhiều lĩnh vực sáng tạo khác
![Page 9: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/9.jpg)
MỘT THÁP BABEL
Nếu bạn không thể nói ngôn ngữ của tôi, bạn không thể lấy bất cứ thứ gì để xây dựng cách nó làm việc tốt trong mỗi thiết bị
Nếu tôi không thể nói ngôn ngữ của bạn, tôi sẽ xây dựng vài thứ khó tin và bạn sẽ không tìm thấy lợi ích từ nó
![Page 10: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/10.jpg)
SEO TRONG NĂM 2014?
Bạn cần thực sự hiểu biết biết cái gì có thể tương tác với lĩnh vực của bạnBắt đầu với thiết kế...
![Page 11: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/11.jpg)
CÁC NGUYÊN TẮC CƠ BẢN
![Page 12: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/12.jpg)
THIẾT KẾ TỐT LÀ ...
Đây là Dieter Rams. Ông đã đưa ra 10 nguyên tắc trong đó xác định thiết kế tốt, mà đã trở thành touchstones cho thiết kế tốt trong 40 năm quahttp://en.wikipedia.org/wiki/Dieter_Rams
![Page 13: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/13.jpg)
NGUYÊN TẮC CỦA MỘT THIẾT KẾ TỐT
1. Nó sáng tạo2. Có các mục hữu ích3. Có thẩm mỹ4. Có các mục dễ hiểu5. Nó không phô trương6. Nó thân thiện7. Nó không lỗi thời qua thời gian8. Nó được chăm chút kĩ lưỡng và chi tiết9. Tôn trọng môi trường10.Không thêm chrome
![Page 14: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/14.jpg)
TIỀM NĂNG
![Page 15: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/15.jpg)
GẦN MÀ XA
Đây là ví dụ của nội dung tuyệt vời, từng chút một, không xem xét trên điện thoại di động
![Page 16: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/16.jpg)
THE PIXAR THEORY
![Page 17: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/17.jpg)
http://www.pixartheory.com/
•HTML5•CSS3 layout, font inports•jQuery, jQuery UI, smaill JS elements
![Page 18: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/18.jpg)
![Page 19: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/19.jpg)
WINGTIP OR SADDLE
![Page 20: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/20.jpg)
http://www.colehaan.com/wingtip-or-saddle.html
•HTML5 video, audio•CSS3 layout, font inports•jQuery, jQuery UI, 7 jQuery plugins•Sản xuất video, âm thanh mẫu•Hình ảnh packshot
![Page 21: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/21.jpg)
![Page 22: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/22.jpg)
SNOWFALL
![Page 23: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/23.jpg)
http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek
•HTML5 video, audio•CSS3 layout, font imports•jQuery, jQuery UI, 3jQuery plugins, Underscore, Orientation detection, Modernizr, mustache, mediaelementjs•Video, 3D graphics và sản xuất âm thanh•Hình ảnh packshot
![Page 24: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/24.jpg)
![Page 25: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/25.jpg)
VẤN ĐỀ
![Page 26: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/26.jpg)
![Page 27: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/27.jpg)
DI ĐỘNG/ MÀN HÌNH
Đây là tất cả những ý tưởng tuyệt vời cho màn hình nhưng chỉ cho màn hình
Nó vẫn ổn, nếu chúng ta chỉ có màn hình trên thế giới, nhưng không, chúng ta còn nhiều thiết bị khác
![Page 28: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/28.jpg)
SỬA CHỮA
![Page 29: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/29.jpg)
HIỂU BIẾT
Chú ý đến những điều sau đây, bạn sẽ ít nhất là bắt đầu hiểu các nhà phát triển ngôn ngữ sử dụng
![Page 30: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/30.jpg)
CÔNG NGHỆ
![Page 31: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/31.jpg)
HTML5
Ngữ nghĩa (chủ yếu) của dữ liệu tầng (lớp), đề xuất nội dung browserhttp://en.wikipedia.org/wiki/HTML5http://diveintohtml5.info/http://www.html5rocks.com/en/
![Page 32: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/32.jpg)
CSS3
(Tương đối) nâng cấp lớp trình bày, được sử dụng để cung cấp cho thiết kế hấp dẫn đối với HTML. LESS/SAS/SCSS – CSS cũng tạo ra công nghệhttp://www.css3.com/http://lesscss.org/http://sass-lang.com/
![Page 33: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/33.jpg)
JAVASCRIPT
DOM (liên tưởng HTML) công nghệ điều khiển. Sử dụng cho hoạt hình, nhận dữ liệu, và tất cả những thứ tiên tiến khácjQuery/MooTools/Angular/Ember/CanJS/Coffescript: JS công nghệ liên quanhttp://eloquentjavascript.net/
![Page 34: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/34.jpg)
SVG
Công nghệ vẽ. Thường sử dụng cho graphing, biểu đồ và những đường nhỏ/ ô phần tử cơ bảnhttp://d3js.org/http://css-tricks.com/using-svg/
![Page 35: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/35.jpg)
WebGL
Nâng cao công nghệ vẽ cho browserhttp://learningwebgl.com/blog/?page_id=1217http://www.chromeexperiments.com/webgl/
![Page 36: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/36.jpg)
LAYOUTS
![Page 37: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/37.jpg)
ADAPTIVE/RESPONSIVE
•Thay đổi phân giải khác nhau•Sửa hoặc fluid (mềm dẻo) kích thước nội dung•Di động (mobile), tablet và màn hình (desktop) nói chung•Nói chung là 12/16 cột•Sửa bố cục (fixed layout)
![Page 38: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/38.jpg)
ADAPTIVE/RESPONSIVE
http://www.hellomichael.com/http://pacelaw.com/http://www.bostonglobe.com/
![Page 39: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/39.jpg)
FRAMELESS
•Thay đổi phân giải khác nhau•Sửa hoặc mềm dẻo kích thước nội dung•Nhiều Breakpoints (6+, SEOgadget mới sử dụng 13)•Không giới hạn đếm cột•Bố cục thay đổi
![Page 40: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/40.jpg)
FRAMELESS
http://seogadget.com/opendaws/http://framelessgrid.com/
![Page 41: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/41.jpg)
TƯƠNG LAI
![Page 42: Thiết kế responsive và tương lai của tìm kiếm di động](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b2f3054a795972088b4606/html5/thumbnails/42.jpg)
KỂ MỘT CÂU CHUYỆN HAY
1. Xác định các kinh nghiệm và nội dung đầu tiên2. Thiết kế UI cho nhiều thiết bị có kích thước
khác nhau và truy cập dễ dàng nhất3. Kiểm tra, kiểm tra và kiểm tra mọi thứ bạn có
thể nghĩ về nó
iOS (Safari), Android (browser, Chrome), Windows và Mac (IE, Chrome và Firefox) ở mức tối thiểu