강의

멘토링

로드맵

Inflearn brand logo image
Design

/

UI/UX

Hướng dẫn xử lý hình ảnh dễ bỏ sót khi sản xuất sản phẩm

Hình ảnh lại gây rắc rối nữa rồi sao? Vỡ pixel, cắt xén một phần, méo mó, tải chậm, các vấn đề tương thích đa nền tảng, v.v. thực chất là vấn đề về thiết kế. Các vấn đề về hình ảnh, hãy phòng ngừa từ sớm.

(5.0) 14 đánh giá

83 học viên

  • DX Lab
이론 중심
프로덕트
UI/UX
이미지이슈
멀티플랫폼
Web Design
software-design
ui
UX Planning
product design

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

  • Có thể hiểu nguyên nhân và kết quả của vấn đề hình ảnh.

  • Có thể hiểu quy trình tải ảnh lên và chủ động ứng phó.

  • Bạn có thể cài đặt tỉ lệ, độ phân giải, định dạng theo dịch vụ.

  • Có thể hiểu cấu trúc Server/CDN tự động xử lý thay đổi kích thước.

  • Có thể thiết lập tiêu chuẩn phân tách độ phân giải hình ảnh theo công dụng.

Các vấn đề về hình ảnh có thể được ngăn ngừa ngay từ đầu.

Đối với nhiều sản phẩm, vấn đề về hình ảnh luôn xuất hiện muộn.

Tỷ lệ không chính xác, độ phân giải bị hỏng, tải chậm và tốn kém hơn.

Nguyên nhân chủ yếu của việc này là do thiếu chính sách về hình ảnh .

Bài giảng này sẽ cung cấp các chiến lược để ngăn ngừa những vấn đề này trước .

Về cài đặt tải lên hình ảnh của người dùng , phân tách độ phân giải theo mục đích , cài đặt tỷ lệ/định dạng, v.v.

Chúng ta hãy cùng nhau tìm hiểu từng bước một từ bây giờ nhé.

Bạn có đang lo lắng những điều này không?

Tôi giới thiệu khóa học này!


Nhà thiết kế đau khổ

'Diện tích hình ảnh nên lớn đến mức nào?'


Nhà phát triển mệt mỏi

‘Không còn QA lặp đi lặp lại nữa…!’


Người lập kế hoạch lo lắng

‘Nếu chúng ta làm thế này, lịch trình sẽ lại bị trì hoãn nữa…’

Sau giờ học

Bạn có thể dự đoán và ngăn ngừa các vấn đề về hình ảnh phát sinh trong thực tế trước .

Các tiêu chuẩn hình ảnh giữa quy hoạch, thiết kế và phát triển rõ ràng, giảm thiểu xung đột trong quá trình hợp tác.

Kiểm soát chất lượng hình ảnh do người dùng tải lên, cải thiện tính ổn định của dịch vụ và trải nghiệm của người dùng .

Tối ưu hóa hiệu suất và chi phí dịch vụ bằng cách giảm các vấn đề vận hành như lãng phí giao thông và chậm trễ trong quá trình tải.

Được thiết kế để hiển thị hình ảnh mà không bị biến dạng trên nhiều thiết bị khác nhau , khả năng phản hồi đa nền tảng được cải thiện .

Các tính năng của bài giảng

Cấu trúc nội dung mà tất cả các nghề nghiệp có thể hiểu được

  • Xử lý các vấn đề về hình ảnh theo góc nhìn hệ thống có liên quan đến toàn bộ nhóm.

  • Nó được cấu trúc sao cho bất kỳ ai, dù là người lập kế hoạch, nhà thiết kế hay nhà phát triển, đều có thể áp dụng vào công việc của mình.

  • Tuy nhiên, không có chương trình đào tạo thực tế như xử lý phát triển hoặc công việc thiết kế.

  • Chúng ta hãy cùng tìm hiểu nguyên nhân và thảo luận về cách tiếp cận và phương pháp.

Trình bày các giải pháp cụ thể

  • Mô tả về mặt cấu trúc chiến lược thay đổi kích thước CDN để hỗ trợ nhiều độ phân giải/thiết bị.

  • Từ tối ưu hóa lưu lượng truy cập đến cải thiện chất lượng hình ảnh và nâng cao trải nghiệm người dùng (UX) . Chúng tôi giải quyết các vấn đề về hình ảnh từ góc nhìn hệ thống.

Giải thích rõ ràng và hình ảnh động mà ngay cả người mới bắt đầu cũng có thể hiểu được.

  • Những giải thích trực quan, sơ đồ và hình ảnh động giúp bạn dễ hiểu các khái niệm.

  • Ngoài ra, video còn có phụ đề .

🙆 Chúng tôi cung cấp tài liệu giảng dạy.

🙅 Tôi xử lý hình ảnh, nhưng tôi không tự mình xử lý bất kỳ quá trình phát triển nào.

Tìm hiểu về những điều này.

Đặt tỷ lệ hình ảnh

Hiểu ý nghĩa và bối cảnh của các tỷ lệ thường dùng như 1:1, 4:3 và 16:9. Tìm hiểu các ví dụ về tỷ lệ hình ảnh tương ứng với môi trường thiết bị.

Đặt độ phân giải và kích thước tệp

Tìm hiểu về các tiêu chuẩn độ phân giải và định dạng tệp phù hợp (JPG, PNG, WebP, v.v.). Tìm hiểu các chiến lược tối ưu hóa hình ảnh giúp giảm lưu lượng truy cập nhưng vẫn duy trì chất lượng hình ảnh, bao gồm cả xử lý hình ảnh.

Sơ đồ luồng tải hình ảnh

Hiểu từng bước các bước mà người dùng thực sự trải qua khi tải hình ảnh lên bằng sơ đồ luồng tải lên.

Phân loại độ phân giải hình ảnh theo mục đích

Tìm hiểu quy trình phân chia hình ảnh do người dùng tải lên thành các danh mục theo mục đích.


Những người đã tạo ra khóa học này

1 nhà phát triển front-end hiện tại và 1 nhà thiết kế UI

Những điều cần lưu ý trước khi tham gia lớp học

Môi trường thực hành

Không có đào tạo thực hành. Khóa học tập trung vào việc xác định vấn đề và học cách tiếp cận chúng.

Tài liệu học tập

3 tệp PDF, 1 tệp PNG

Kiến thức và ghi chú của người chơi

Tài liệu này được cấu trúc sao cho có thể hiểu được ngay cả khi không có kiến thức về thiết kế/phát triển/lập kế hoạch.

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Người lập kế hoạch muốn ngăn lịch trình bị hoãn vì vấn đề hình ảnh.

  • Nhà thiết kế có tiêu chuẩn mơ hồ về tỷ lệ hình ảnh, độ phân giải, v.v.

  • Nhà phát triển muốn giảm bớt công việc chỉnh sửa hình ảnh lặp đi lặp lại

  • Người gặp vấn đề hình ảnh khác.

Cần biết trước khi bắt đầu?

  • Không hề. Cấu trúc để dễ hiểu ngay cả với người không có nền tảng thiết kế/phát triển/lập kế hoạch.

Xin chào
Đây là

141

Học viên

21

Đánh giá

2

Trả lời

5.0

Xếp hạng

2

Các khóa học

저는 이해하기 쉬운 컨텐츠가 좋은 컨텐츠라고 믿습니다.
실무에 직접적으로 도움이 되는 좋은 컨텐츠를 만드는 데 주력하고 있어요.
제가 만든 컨텐츠가 실무에 도움이 된다는 피드백을 받을 때마다 큰 기쁨을 느낍니다.

 

DX Lab 공식 유튜브
🅱
DX Lab 디자인 블로그

Chương trình giảng dạy

Tất cả

9 bài giảng ∙ (38phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

14 đánh giá

5.0

14 đánh giá

  • askare님의 프로필 이미지
    askare

    Đánh giá 10

    Đánh giá trung bình 5.0

    5

    67% đã tham gia

    실무에서 디자인, 운영, 개발 팀 협업 시, 꼭 필요한 핵심을 담아주셔서 유익해요!! 이런 실무에 필요한 핵심 강의 더 만들어 주시면 너무 좋을 것 같아요!! 1인 디자이너에게 큰 힘이 되는 강의입니다!! 강추해요!!

    • DX Lab
      Giảng viên

      안녕하세요 askare님 소중한 수강평 감사합니다. ☺️ 중요한 내용만 농축해서 전달하기 위해 노력했는데, 도움이 되었다니 정말 기쁩니다! 앞으로도 IT 실무에 바로 적용할 수 있는 컨텐츠를 계속 고민해보겠습니다. 오늘도 좋은 하루 보내세요! ☀️

  • 민경찬님의 프로필 이미지
    민경찬

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    33% đã tham gia

    프로젝트에서 이미지 문제로 골치 아팠던 적이 참 많았습니다. 이미지를 가공하고 보여주는 등의 이미지 처리 문제들을 단순히 개발의 문제라고 생각했기 때문이었습니다. 강의를 보고나니 개념이 확실히 잡히네요. 강의를 통해 프로젝트에서 팀원과 어떻게 소통하고 어떻게 설계 해야할지 명확하게 이해됐습니다. 특히, 설명마다 이해를 위한 예시 이미지가 있어 너무 좋았습니다. 그림만봐도 어떤 상황을 설명해주실지 감이 올 정도로 영상 퀄리티가 너무 좋았습니다. 좋은 강의 감사드립니다.

    • DX Lab
      Giảng viên

      안녕하세요 민경찬님, 좋은 말씀 정말 감사합니다 🙏 강의 내용이 도움이 되셨다니 열심히 준비한 보람을 느낍니다. 특히 예시 이미지에 공을 많이 들였는데 알아봐주셔서 더욱 감사드립니다. 앞으로 더 좋은 컨텐츠로 찾아뵐 수 있도록 하겠습니다. 감사합니다 !

  • 정민주님의 프로필 이미지
    정민주

    Đánh giá 3

    Đánh giá trung bình 5.0

    5

    33% đã tham gia

    • DX Lab
      Giảng viên

      안녕하세요. 정민주님! 소중한 수강평 감사합니다 :)

  • 신승헌님의 프로필 이미지
    신승헌

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    67% đã tham gia

    기본적인 지식과 함께 설명해주셔서 처음 제품을 기획하는 사람에게도 좋은 강의가 될 것 같아요

    • DX Lab
      Giảng viên

      안녕하세요 신승헌님! 앞으로의 여정에 도움이 되었으면 좋겠습니다. 소중한 수강평 감사합니다. : )

  • 마술하는 프로그래머님의 프로필 이미지
    마술하는 프로그래머

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    이미지 처리는 개발 현장에서도 상당히 골칫거리입니다. 이미지를 서버나 앱단에서 코드로 가공 및 처리 하는것은 상당히 골치아픕니다. 거기에 이미지 사이즈 이슈까지 겹치면 그거 처리하는거만 해도 최악의 경우 며칠 이상은 걸릴 수 있습니다. 이 강의는 코드로 가공처리 하는 내용을 다루는 기술 강의는 아니지만 개발 과정에서 발생할 수 있는 삽질을 줄이는데 도움을 줄 강의입니다. 이 강의는 이미지 처리에 대한 기술적인 내용을 다루는 강의는 아닙니다. 이미지 사이즈를 기획하는 방법론에 더 가까운 내용입니다. 개발자보다는 웹 디자이너나 기획자가 대상이라는 뜻입니다. 어렵고 무거운 강의는 아닙니다. 출퇴근 시간에 가볍게 들으면 괜찮을 강의입니다. 커피 한두잔 아낄 가치가 있습니다. 기획, 개발 간의 입장 사이에서 싸우는 비용을 줄일 수 있다면 오히려 더 이익으로 봐도 될것같습니다.

    • DX Lab
      Giảng viên

      안녕하세요 마술하는 프로그래머님! 지식공유자 입장에서의 극찬으로 느껴지는 상세한 수강평이네요. 앞으로 더 좋은 콘텐츠로 찾아뵐 수 있도록 하겠습니다. 소중한 수강평 감사합니다. : )

209.259 ₫

Khóa học khác của DX Lab

Hãy khám phá các khóa học khác của giảng viên!

Khóa học tương tự

Khám phá các khóa học khác trong cùng lĩnh vực!