Mật độ điểm ảnh cao có quan trọng trên màn hình điện thoại thông minh không? Mật độ pixel là gì và cách tính đến nó khi thiết kế giao diện di động
Tôi không biết tất cả mọi thứ, vì vậy nếu bạn cho rằng tôi sai ở đâu đó hoặc bạn cần làm rõ điều gì đó hoặc bạn có đề xuất hoặc câu hỏi để cải thiện hướng dẫn này, hãy gửi email (bằng tiếng Anh) tới [email được bảo vệ]. Bạn cũng có thể tìm thấy tôi Twitter, hoặc Facebook.
PPI và PPI là gì
DPI hay (Dots Per Inch) là thước đo mật độ không gian của các chấm ban đầu được sử dụng trong in ấn. Đây là số lượng giọt mực mà máy in của bạn có thể in được trên một inch. Độ phân giải thấp hơn sẽ dẫn đến hình ảnh ít chi tiết hơn.Khái niệm này được áp dụng cho màn hình máy tính có tên PPI (pixel per inch). Nguyên tắc tương tự: đếm số pixel mà màn hình có thể hiển thị trên mỗi inch. Tên dpi cũng được sử dụng trong màn hình.
Máy tính Windows có PPI mặc định là 96. Mac sử dụng 72, mặc dù giá trị này không còn chính xác kể từ những năm 80. Các PC thông thường, không có võng mạc (Mac cũng vậy) sẽ có mức tối thiểu từ 72 PPI đến tối đa khoảng 120. Thiết kế với PPI từ 72 đến 120 sẽ đảm bảo tác phẩm của bạn có tỷ lệ khung hình gần như giống nhau ở mọi nơi.
Đây là một ví dụ áp dụng: màn hình Mac Cinema 27 inch có 109 PPI, nghĩa là nó hiển thị 109 pixel trên mỗi inch màn hình. Chiều rộng với khung là 25,7 inch (65 cm). Chiều rộng của màn hình thực tế là khoảng 23,5 inch, tức là 23,5 * 109 ~ 2560, khiến độ phân giải màn hình vật lý là 2560x1440px. *Tôi biết rằng 23,5 * 109 không chính xác bằng 2560. Trên thực tế, nó là +23,486238532 inch. Nó sẽ chính xác hơn pixel trên centimet, nhưng bạn hiểu ý tôi.
Tác động đến thiết kế của bạn
Giả sử bạn vẽ một hình vuông màu xanh lam có kích thước 109 * 109 px trên màn hình được chỉ định ở trên. Hình vuông này sẽ có kích thước màn hình vật lý là 1*1 inch. Nhưng nếu người dùng của bạn có màn hình 72 PPI, hình vuông màu xanh lam sẽ trông lớn hơn về mặt vật lý vì ở mức 72 PPI, màn hình sẽ cần khoảng một inch rưỡi để hiển thị hình vuông màu xanh lam 109px của bạn. Xem bên dưới để mô phỏng hiệu ứng.
Nhớ: Bỏ qua sự khác biệt về màu sắc và độ phân giải, hãy nhớ rằng mọi người sẽ nhìn nhận thiết kế của bạn một cách khác nhau. Bạn nên hướng tới sự thỏa hiệp tốt nhất và xây dựng cho tỷ lệ người dùng lớn nhất. Đừng cho rằng người dùng có cùng màn hình với bạn.
Độ phân giải màn hình (và độ phân giải gốc)
Độ phân giải màn hình có thể có tác động rất lớn đến cách người dùng cảm nhận thiết kế của bạn. May mắn thay, vì màn hình LCD đã thay thế CRT nên người dùng hiện có xu hướng sử dụng độ phân giải màn hình gốc với tỷ lệ kích thước màn hình trên PPI tốt.Độ phân giải xác định số lượng pixel hiển thị trên màn hình (ví dụ: 2560 * 1440px đối với màn hình Cinema 27 inch) chiều rộng 2560, chiều cao 1440. Tất nhiên, bây giờ khi bạn biết PPI là viết tắt của từ gì, bạn sẽ nhận ra rằng nó không thể là đơn vị đo kích thước vật lý. Bạn có thể có một màn hình 2560x1440 có kích thước bằng bức tường và một màn hình khác có kích thước bằng đầu của bạn.
Màn hình LCD hiện đại có độ phân giải mặc định, hay còn gọi là gốc, sẽ xử lý chính xác số pixel mà màn hình có khả năng hiển thị. Các màn hình CRT cũ hơn có một chút khác biệt, nhưng vì chúng có thể bị coi là đã chết nên chúng ta không đi sâu vào chi tiết (và không ảnh hưởng đến sự hiểu biết một phần của tôi về những chiếc TV cũ tốt).
Hãy lấy màn hình Cinema 27 inch của chúng tôi, có thể hiển thị 109 PPI ở độ phân giải gốc 2560 * 1440 px. Nếu bạn giảm độ phân giải, các phần tử sẽ xuất hiện lớn hơn. Rốt cuộc, bạn chỉ có 23,5 inch chiều ngang để lấp đầy với ít pixel hơn.
Tôi đã nói ảo, vì trong trường hợp này nó sẽ như vậy. Màn hình có độ phân giải gốc 2560 * 1440 px. Nếu giảm độ phân giải thì điểm ảnh vẫn hiển thị ở mức 109 PPI. Để lấp đầy không gian đó và toàn bộ màn hình, hệ điều hành của bạn sẽ kéo dài mọi thứ, GPU/CPU của bạn sẽ lấy tất cả các pixel và tính toán chúng theo tỷ lệ mới.
Nếu bạn muốn tạo độ phân giải 1280 * 720 (một nửa chiều rộng, một nửa chiều cao trước đó) trên 27 inch thì GPU của bạn sẽ phải mô phỏng kích thước pixel gấp đôi để lấp đầy màn hình. Kết quả sẽ như thế nào? Vì vậy - mờ. Mặc dù chia cho hai tỷ lệ khung hình sẽ trông khá đẹp vì ước số đơn giản, nhưng nếu bạn muốn 1/3 hoặc 3/4 tỷ lệ khung hình thì bạn sẽ nhận được các số có chữ số thập phân và bạn KHÔNG THỂ chia pixel . Xem ví dụ dưới đây.
Ghi chú: bên trái: hiển thị cửa sổ OSX ở độ phân giải gốc (1400*900px): bên phải: hiển thị cửa sổ OSX ở độ phân giải mô phỏng thấp hơn (1024*640px retina).
Hãy xem một ví dụ khác dưới đây. Hãy lấy một dòng 1 pixel trên màn hình với độ phân giải gốc. Bây giờ hãy làm cho độ phân giải nhỏ hơn 50%. Để lấp đầy màn hình, CPU sẽ phải tạo ra 150% hình ảnh bằng cách nhân mọi thứ với 1,5, 1 * 1,5 = 1,5, nhưng bạn không thể giảm một nửa số pixel. Những gì nó sẽ làm là lấp đầy các pixel xung quanh bằng một phần màu, tạo ra độ mờ.
Lưu ý: bên trái là đường kẻ dày 1 pixel ở độ phân giải mặc định bất kỳ, bên phải là đường kẻ dày 1 pixel ở độ phân giải thấp hơn 150%.
Vì vậy, nếu bạn có Macbook Pro Retina và muốn thay đổi độ phân giải, nó sẽ hiển thị cửa sổ bên dưới cho bạn biết (trong ảnh chụp màn hình bên dưới) độ phân giải đó sẽ "trông như thế nào" 1280*800px. Nó sử dụng trải nghiệm của người dùng về độ phân giải màn hình để thể hiện mối quan hệ kích thước.
Đây là một quan điểm rất chủ quan vì nó sử dụng độ phân giải pixel làm đơn vị kích thước vật lý, nhưng điều đó đúng, ít nhất là theo quan điểm của họ.
Nhớ: Nếu bạn muốn luôn thấy pixel thiết kế của mình (hoặc bất kỳ thiết kế nào) hoàn hảo, đừng bao giờ sử dụng độ phân giải không phải gốc cho màn hình của bạn. Có, bạn có thể cảm thấy thoải mái hơn với tỷ lệ nhỏ hơn, nhưng khi nói đến pixel, bạn muốn chính xác nhất có thể. Thật không may, một số người sử dụng độ phân giải như một cách để nhìn rõ hơn những gì đang diễn ra trên màn hình (đặc biệt là trên màn hình nền) khi lẽ ra họ nên sử dụng cài đặt trợ năng. Điều này vẫn sẽ làm cho thiết kế của bạn trông tệ, nhưng từ quan điểm này, người dùng đang tìm kiếm khả năng đọc được cải thiện chứ không phải tỏa sáng.
4k là gì
Gần đây có thể bạn đã nghe nhiều về thuật ngữ 4K (ít nhất là khi tôi viết về nó vào đầu năm 2014), 4k là một chủ đề khá thời thượng. Để hiểu nó là gì, trước tiên chúng ta hãy hiểu "HD" nghĩa là gì.
Hãy cẩn thận, đây là một sự đơn giản hóa quá mức. Tôi sẽ chỉ nói về những giải pháp phổ biến nhất. Có nhiều loại HD khác nhau. Thuật ngữ HD áp dụng cho mọi độ phân giải bắt đầu từ 1280x720px hoặc 720p đối với các đường ngang 720 pixel. Một số người cũng có thể gọi độ phân giải này là SD (độ phân giải tiêu chuẩn).
Thuật ngữ Full HD áp dụng cho màn hình 1920x1080px. Hầu hết các TV và điện thoại cao cấp (Galaxy SIV, HTC One, Sony Xperia Z, Nexus5) đều sử dụng độ phân giải này.
4K bắt đầu ở 3840x2160 pixel. Nó còn được gọi là Quad HD và có thể được gọi là UHD từ Ultra HD. Nói một cách đơn giản, trên màn hình 4K, bạn có thể đóng gói 4 1080p, về mặt số pixel. Độ phân giải 4K khác là 4096x2160. Nó lớn hơn một chút và được sử dụng cho máy chiếu và máy ảnh chuyên nghiệp.
Điều gì xảy ra nếu tôi kết nối màn hình 4K với máy tính của mình
Các hệ điều hành hiện đại không chia tỷ lệ 4K, nghĩa là nếu bạn kết nối màn hình 4K với Chromebook hoặc MacBook, nó sẽ lấy nội dung có độ phân giải cao nhất, trong trường hợp này là 200% hoặc @2x (kích thước gấp đôi) và hiển thị chúng ở tỷ lệ bình thường. Điều này sẽ làm cho mọi thứ trông đẹp, nhưng nhỏ.
Ví dụ giả định: nếu bạn kết nối màn hình 12" 4K với máy tính có màn hình 12" độ phân giải cao (2x), mọi thứ sẽ có kích thước chỉ bằng một nửa.
Nhớ:
Giám sát Hertz
Ở đây chúng ta tạm dừng một chút về PPI và độ phân giải màn hình. Bạn có thể đã thấy rằng bên cạnh cài đặt độ phân giải màn hình có giá trị cho Hz của màn hình. Nó không liên quan gì đến PPI, nhưng trong trường hợp bạn thắc mắc, Hertz của màn hình - hay tốc độ làm mới - là đơn vị tốc độ mà màn hình của bạn sẽ hiển thị hình ảnh hoặc khung hình cố định mỗi giây. Màn hình 60Hz sẽ có thể hiển thị 60 khung hình mỗi giây. Màn hình 120 Hz - 120 khung hình mỗi giây, v.v.
Trong ngữ cảnh giao diện người dùng, giá trị Hertz(Hz) sẽ xác định mức độ mượt mà và chi tiết của hoạt ảnh của bạn. Hầu hết các màn hình đều chạy ở tần số 60Hz. Xin lưu ý rằng số lượng khung hình hiển thị mỗi giây còn phụ thuộc vào khả năng xử lý và đồ họa của thiết bị. Việc kết nối màn hình 120Hz với Atari 2600 sẽ hoàn toàn vô dụng.
Để hiểu rõ hơn, hãy xem ví dụ dưới đây. T-Rex đi từ điểm A đến điểm B với những bước đi nhanh và đều nhau trên màn hình 60Hz và 120Hz. Màn hình 60 khung hình/giây có thể hiển thị 9 khung hình trong khi hoạt ảnh, trong khi màn hình 120 khung hình/giây có thể hiển thị số khung hình nhiều gấp đôi một cách hợp lý trong cùng một khoảng thời gian. Hình ảnh động sẽ trông mượt mà hơn trên màn hình 120Hz.
Nhớ: Một số người có thể nói rằng mắt người không thể nhìn thấy nhiều hơn 60 khung hình mỗi giây. Nó không đúng. Đừng nghe và bỏ đi và cười điên cuồng.
Màn hình retina là gì
Apple đã giới thiệu thuật ngữ màn hình "Retina" khi phát hành điện thoại thông minh iPhone 4. Nó được gọi là Retina (dịch là retina) vì PPI của thiết bị cao đến mức võng mạc của một người không thể nhìn thấy từng pixel riêng lẻ trên màn hình .Tuyên bố này đúng với kích thước màn hình của phạm vi thiết bị được sử dụng, nhưng trong khi màn hình ngày càng tốt hơn, mắt của chúng ta hiện đã được huấn luyện đủ để nhận biết pixel - đặc biệt là đối với các thành phần giao diện người dùng tròn.
Về mặt kỹ thuật, chúng hiển thị số pixel có chiều cao và chiều rộng gấp đôi ở cùng kích thước vật lý.
IPhone 3G/S có đường chéo 3,5 inch và độ phân giải 480 * 320px và 163PPI.
iPhone 4/S có đường chéo 3,5 inch và độ phân giải 960 * 640px và 326ppi.
BÙM! Đúng hai lần. Số nhân đơn giản. Vì vậy, thay vì nhỏ hơn, các phần tử trên màn hình trông sắc nét hơn gấp đôi vì chúng có số pixel gấp đôi và kích thước vật lý giống hệt nhau. Một pixel bình thường bằng 4 pixel võng mạc.
Hãy xem xét ví dụ dưới đây để áp dụng trực tiếp vào một thiết kế phức tạp.
Hình ảnh Lưu Ý: Rất khó để mô phỏng chất lượng hình ảnh khác nhau từ hai thiết bị sang thiết bị thứ ba, tức là thiết bị bạn đang xem. Chất lượng hình ảnh sẽ đẹp và sắc nét hơn gấp đôi đối với một máy nghe nhạc retina, thậm chí chiếm cùng một không gian vật lý. Nếu bạn muốn tự mình kiểm tra, tôi đã sử dụng một trong những chương trình miễn phí của mình, bạn có thể tải xuống mã nguồn.
Thuật ngữ màn hình "Retina" thuộc quyền sở hữu của Apple, vì vậy các công ty khác sẽ sử dụng "HI-DPI" hoặc "Màn hình sp33d tối đa pixel siêu công suất" (tôi sắp đăng ký nhãn hiệu cho cái sau) hoặc không sử dụng cái nào cả. Tất cả những gì bạn phải làm là đọc thông số kỹ thuật của thiết bị và tìm hiểu xem mức độ nhạy sáng và kích thước màn hình là bao nhiêu (thật thú vị).
Nhớ: Các sản phẩm của Apple là một cách tuyệt vời để làm quen với chuyển đổi dpi và hiểu sự khác biệt giữa độ phân giải, PPI và tỷ lệ kích thước vật lý vì bạn chỉ phải lo lắng về 1 hệ số nhân.
Số nhân là gì
Khi cần chuyển đổi thiết kế của bạn cho tất cả các PPI có thể, hệ số nhân sẽ là cứu tinh toán học của bạn. Nếu bạn biết hệ số nhân, bạn không còn phải lo lắng về các đặc tính chi tiết của thiết bị nữa.Hãy lấy ví dụ của chúng tôi về iPhone 3G và 4. Bạn có số pixel gấp đôi ở cùng một kích thước vật lý. Do đó, hệ số nhân của bạn là 2. Điều này có nghĩa là để làm cho nội dung đồ họa của bạn tương thích với độ phân giải 4G, bạn chỉ cần nhân kích thước nội dung đồ họa của mình với 2 - và thế là xong.
Giả sử bạn tạo một nút có kích thước 44*44px, đây là mục tiêu cảm ứng được đề xuất trên iOS (tôi sẽ nói về vấn đề này sau). Hãy gọi nó là tên nút thông thường "JIM".
Để làm tốt JIM trên iPhone 4, bạn cần tạo một phiên bản có kích thước gấp đôi. Đó là những gì chúng tôi làm dưới đây.
Ghi chú: trái - góc tròn 2px cỡ chữ 16px, góc tròn bên phải 4px cỡ chữ 32px.
Khá đơn giản. JIM hiện có phiên bản Jim.png dành cho PPI thông thường (IPhone 3) và một phiên bản [email được bảo vệ] cho 200% PPI (iPhone 4).
Bây giờ bạn hỏi, “Nhưng chờ đã! Tôi chắc chắn có nhiều số nhân khác ngoài hai. Vâng, đúng vậy, và đây chính là lúc nó trở thành cơn ác mộng. Được rồi, có thể không phải là một cơn ác mộng, nhưng tôi chắc chắn rằng bạn thà dành cả ngày để ủi tất của mình hơn là xử lý nhiều số nhân. May mắn thay, nó không đáng sợ như bạn nghĩ; chúng ta sẽ đề cập đến vấn đề đó sau.
Trước tiên hãy nói về đơn vị vì bây giờ bạn sẽ cần một đơn vị không phải pixel để mô tả các thiết kế nhiều dpi của mình. Đó là lúc dành cho DP và PT.
Nhớ: Đối với mỗi thiết kế bạn thực hiện, bạn cần biết hệ số nhân. Hệ số nhân kết hợp thế giới hỗn loạn giữa kích thước màn hình và PPI này lại với nhau và khiến con người có thể hiểu được.
DP, PT và SP là gì
DP hoặc PT là đơn vị đo lường được sử dụng để mô tả bố cục của bạn, được tạo cho nhiều thiết bị và DPI.DP hoặc DiP là viết tắt của Pixel độc lập với thiết bị và PT là viết tắt của Point. PT sử dụng Apple; DP được sử dụng trong Android nhưng về cơ bản chúng giống nhau. Tóm lại, chúng xác định kích thước bất kể hệ số nhân của thiết bị. Điều này rất hữu ích khi thảo luận các vấn đề kỹ thuật. nhiệm vụ giữa các đối tượng đa dạng như nhà thiết kế và kỹ sư.
Hãy lấy ví dụ về nút trước đó của chúng tôi, "JIM".
Jim rộng 44px đối với màn hình thông thường, không có võng mạc và rộng 88px đối với màn hình võng mạc. Hãy tìm hiểu kỹ thuật và thêm khoảng đệm 20px xung quanh Jim vì anh ấy thích khoảng trắng. Khi đó vết lõm sẽ là 40px cho retina. Nhưng việc tính đến pixel võng mạc khi thiết kế trên màn hình không phải võng mạc thực sự không có ý nghĩa gì.
Chúng tôi sẽ tiến hành như sau: chúng tôi sẽ lấy tỷ lệ khung hình 100% của màn hình không có võng mạc thông thường làm cơ sở.
Trong trường hợp này, JIM sẽ có kích thước 44*44DP hoặc PT và phần đệm 20DP hoặc PT. Bạn có thể cung cấp công nghệ của bạn. việc làm trong bất kỳ PPI nào, JIM vẫn sẽ là 44 * 44dp hoặc pt.
Android và iOS điều chỉnh kích thước này cho phù hợp với màn hình và chuyển đổi với hệ số nhân chính xác. Đây là lý do tại sao tôi nghĩ việc luôn thiết kế với PPI mặc định cho màn hình của bạn sẽ dễ dàng hơn.
SP được sử dụng riêng biệt với DP và PT nhưng hoạt động giống nhau. SP là viết tắt của Pixel độc lập với tỷ lệ và được sử dụng để xác định kích thước phông chữ. SP phụ thuộc vào cài đặt phông chữ của người dùng thiết bị Android. Đối với một nhà thiết kế, định nghĩa về SP cũng giống như định nghĩa về DP cho mọi thứ khác. Lấy những gì có thể đọc được ở tỷ lệ 1x làm cơ sở (ví dụ: 16SP là cỡ chữ tuyệt vời để đọc).
Nhớ: khi bạn biên dịch kỹ thuật nhiệm vụ, luôn sử dụng các giá trị độc lập về độ phân giải/tỷ lệ. Luôn luôn. Kích thước/độ phân giải màn hình càng khác nhau thì điều này càng có ý nghĩa.
Cài đặt PPI
Bây giờ bạn đã biết PPI, retina và hệ số nhân là gì, điều quan trọng là phải nói một điều mà tôi chưa được hỏi nhiều và nó gây nhầm lẫn: "Điều gì xảy ra nếu tôi thay đổi cấu hình PPI trong trình chỉnh sửa đồ họa của mình?"Nếu bạn tự hỏi mình câu hỏi này, điều đó có nghĩa là bạn đã phần nào quen thuộc với các trình chỉnh sửa hình ảnh. Bây giờ điều rất quan trọng là phải hiểu một điều mà tôi phải mất một thời gian mới hiểu được: Đối với mọi thứ không thể in được, kích thước pixel sẽ được sử dụng, bất kể cấu hình PPI ban đầu.
Cài đặt PPI trong các chương trình là di sản của in ấn. Nếu bạn chỉ thiết kế cho web, PPI sẽ không có bất kỳ ảnh hưởng nào đến kích thước bitmap của bạn. Đây là lý do tại sao chúng tôi sử dụng hệ số nhân thay vì giá trị PPI cụ thể. Canvas và đồ họa của bạn sẽ luôn được phần mềm chuyển đổi thành pixel bằng hệ số nhân thích hợp.
Ví dụ. Bạn có thể tự mình thử điều này trong một chương trình cho phép bạn điều chỉnh PPI, chẳng hạn như Photoshop. Tôi đã vẽ một hình vuông 80*80px và văn bản 16pt trong Photoshop với cấu hình 72ppi. Thứ hai là tương tự với cấu hình 144PPI.
Như bạn có thể thấy, văn bản đã trở nên khá lớn, lớn gấp đôi, trong khi hình vuông vẫn được giữ nguyên. Lý do cho điều này là do chương trình (trong trường hợp này là Photoshop) chia tỷ lệ (nếu cần) các giá trị pt dựa trên giá trị PPI, dẫn đến tăng gấp đôi kích thước hiển thị văn bản ở cài đặt PPI gấp đôi. Mặt khác, những gì được xác định bằng pixel - hình vuông màu xanh lam - vẫn có cùng kích thước. Pixel là pixel và sẽ vẫn là pixel bất kể cài đặt PPI. Chúng chỉ khác nhau ở PPI của màn hình hiển thị chúng.
Điều quan trọng cần nhớ là khi thiết kế cho kỹ thuật số, PPI sẽ chỉ ảnh hưởng đến cách bạn cảm nhận thiết kế cũng như quy trình làm việc và đồ họa pt chẳng hạn như phông chữ. Nếu bạn đưa các tệp nguồn có cài đặt PPI khác nhau vào tác phẩm của mình, chương trình sẽ thay đổi kích thước mọi hình ảnh được truyền giữa các tệp khác nhau theo tỷ lệ PPI của tệp nhận. Điều này sẽ trở thành một vấn đề đối với bạn.
Giải pháp? Sử dụng PPI (đối với thiết kế 1x, tốt nhất là trong khoảng 72-120) và tuân theo nó. Cá nhân tôi sử dụng 72 ppi vì đây là cài đặt mặc định trong Photoshop và hầu hết các đồng nghiệp của tôi cũng làm như vậy.
Nhớ:
Xử lý PPI trong iOS
Đã đến lúc đi sâu vào thiết kế dành riêng cho nền tảng. Hãy cùng nhìn lại các thiết bị iOS đầu năm 2014. Về kích thước màn hình và dpi, với iOS có 2 loại thiết bị di động và 2 loại màn hình laptop/desktop. Trong danh mục di động, tất nhiên họ có iPhone và iPad.Trong danh mục điện thoại, bạn có 3GS cũ (vẫn được hỗ trợ bởi iOS6) trở lên. Chỉ có iPhone 3GS là không có retina. iPhone 5 trở lên sử dụng màn hình cao hơn với cùng mức dpi như iPhone 4 và 4s. Xem bảng cheat dưới đây:
Ghi chú: 1) Hệ số nhân 1x, 2) Hệ số nhân 2x, 3) Hệ số nhân 2x.
Vào tháng 9 năm 2014, Apple giới thiệu 2 loại iPhone mới: iPhone 6 và iPhone 6 Plus. iPhone 6 lớn hơn iPhone 5 (0,7 inch) nhưng có cùng PPI. Mặt khác, iPhone 6 giới thiệu hệ số nhân hoàn toàn mới cho iOS, @3x do kích thước của nó là 5,5 inch.
Có một điều đặc biệt mà bạn cần biết về cách iPhone 6 Plus xử lý màn hình của nó so với tất cả các iPhone khác.
Nó làm giảm kích thước của hình ảnh.
Ví dụ: khi bạn thiết kế cho iPhone 6, bạn thiết kế trên canvas có kích thước 1334*750px và điện thoại cũng hiển thị 1334*750 pixel vật lý. Với iPhone 6 Plus, điện thoại có độ phân giải thấp hơn so với hình ảnh hiển thị nên bạn cần thiết kế ở độ phân giải 2208*1242px và điện thoại sẽ giảm kích thước xuống độ phân giải 1920*1080px. Xem hình ảnh dưới đây:
Độ phân giải vật lý thấp hơn 13% so với độ phân giải được hiển thị. Điều này tạo ra một số trục trặc như nửa pixel, làm cho các chi tiết rất nhỏ bị mờ. Mặc dù độ phân giải cao đến mức bạn sẽ chỉ nhận thấy được nếu nhìn thật gần. Vì vậy, hãy thiết kế trên canvas có kích thước 2208*1242px và cẩn thận với các yếu tố thiết kế rất nhỏ như dải phân cách siêu lớn. Xem bên dưới để mô phỏng những gì xảy ra:
Hướng dẫn dành cho Chrome OS vẫn chưa được phát hành nhưng Pixel (có màn hình cảm ứng) cũng không được sử dụng nhiều. Tuy nhiên, vì tất cả các ứng dụng Chrome OS đều dựa trên web nên tôi vẫn khuyên bạn nên thiết kế cho màn hình cảm ứng. Đề xuất của tôi là làm theo hướng dẫn Android cho mục đích cảm ứng.
Web, thiết bị lai và tương lai
Bạn sẽ rõ ràng về quyết định cần đưa ra nếu bạn đang phát triển cho thiết bị di động. Làm cho nó cho màn hình cảm ứng. Nếu bạn đang phát triển cho máy tính để bàn, hãy chọn những máy không có cảm ứng. Nghe có vẻ đơn giản nhưng lại bỏ qua một xu hướng mới đang phát triển - các thiết bị lai.Thiết bị lai là thiết bị được cho là cung cấp cả điều khiển cảm ứng và không cảm ứng. Chromebook Pixel, Surface Pro và Lenovo Yoga là những ví dụ điển hình.
Phải làm gì trong trường hợp này? Chà, không có câu trả lời dễ dàng, nhưng tôi sẽ tiếp tục và đưa ra một câu trả lời: chọn điều khiển cảm ứng. Đây là nơi công nghệ sẽ đi tới.
Nếu bạn đang thiết kế cho web hoặc thứ gì đó tương tự, hãy nghĩ đến điều khiển cảm ứng.
Nhớ:
Phần mềm đồ họa
Phần mềm sẽ không giúp bạn trở thành nhà thiết kế nhưng việc chọn phần mềm phù hợp cho nhiệm vụ trước mắt có thể cải thiện đáng kể năng suất của bạn và giúp công việc của bạn trở nên dễ dàng hơn. Bí quyết về phần mềm không phải là kỹ năng duy nhất của bạn, nhưng việc học và thành thạo công cụ phù hợp sẽ giúp ích rất nhiều trong việc biến ý tưởng của bạn thành hiện thực.Khi nói đến việc xử lý những thay đổi của DPI trong thiết kế giao diện, tất cả các chương trình đều hoạt động khác nhau. Một số người giỏi hơn những người khác ở những nhiệm vụ cụ thể. Dưới đây là những phổ biến nhất:
Photoshop
Mẹ của các công cụ thiết kế giao diện. Có lẽ là công cụ được sử dụng nhiều nhất hiện nay. Có vô số tài nguyên, hướng dẫn, bài viết về nó. Photoshop gần như đã xuất hiện từ buổi bình minh của thiết kế giao diện.Đúng như tên gọi, mục tiêu đầu tiên của chương trình không phải là thiết kế giao diện mà là chỉnh sửa ảnh hoặc hình ảnh raster. Nó phát triển trong vòng một năm và với sự ra đời của thiết kế giao diện, các nhà thiết kế đã thay đổi mục đích của nó. Điều này một phần là do họ đã quen với nó và vì đây là chương trình duy nhất có thể thực hiện tốt mọi việc cần thiết.
Photoshop cho đến ngày nay vẫn là bậc thầy về chỉnh sửa ảnh raster và vẫn là chương trình thiết kế giao diện người dùng được sử dụng nhiều nhất. Di sản kéo dài hàng thập kỷ của nó khiến Photoshop trở thành một chương trình khó dạy. Sử dụng Photoshop giống như một con dao quân đội Thụy Sĩ khổng lồ, bạn có thể làm bất cứ điều gì, nhưng không phải lúc nào cũng hiệu quả nhất.
Vì nó vốn dựa trên hình ảnh raster nên nó phụ thuộc vào độ phân giải cao, ngược lại với Illustrator và Sketch được mô tả bên dưới.
Người minh họa
Trình chỉnh sửa vector, anh trai của Photoshop. Như tên gọi của nó, nó nhắm đến các họa sĩ minh họa, nhưng nó cũng có thể được sử dụng như một công cụ thiết kế giao diện.Illustrator phù hợp với thiết kế in ấn, do đó, giao diện, quản lý màu sắc, tỷ lệ, thước kẻ và đơn vị đo lường của nó có thể gây khó chịu và cần một vài chỉnh sửa để có thể dễ dàng sử dụng chỉ cho thiết kế giao diện. Giống như Photoshop, đây là một công cụ cực kỳ mạnh mẽ và cần nhiều thời gian để học hỏi.
Nó khác với Photoshop ở chỗ nó độc lập với DPI do dựa trên các hình dạng vector. Không giống như hình ảnh raster, đồ họa được tạo bằng hình dạng vector dựa trên các công thức toán học và sẽ được tính toán lại trong phần mềm mà không làm giảm chất lượng.
Hiểu được sự khác biệt giữa hình ảnh raster và vector là chìa khóa để tạo ra các thiết kế hình ảnh và nội dung đồ họa có thể mở rộng.
Nếu bạn muốn bắt đầu sử dụng Illustrator cho thiết kế web/frontend, tôi khuyên bạn nên đọc
Nhà thiết kế Peter Nowell đã viết trên blog của mình về mật độ pixel trong thiết kế ứng dụng di động - ông giải thích nó là gì và nói về những vấn đề mà các nhà thiết kế gặp phải khi thiết kế giao diện cho các thiết bị khác nhau.
Các biên tập viên của phần “Giao diện” xuất bản bản dịch tài liệu do nhóm Sketchapp thực hiện.
Video bao gồm hầu hết các chủ đề trong bài viết, nhưng nếu bạn muốn biết thêm chi tiết, hãy tiếp tục đọc
Mật độ pixel là số lượng pixel phù hợp với một kích thước vật lý cụ thể (thường là một inch). Chiếc máy Mac đầu tiên có 72 pixel mỗi inch - một con số có vẻ lớn nhưng thực tế đây là những pixel khổng lồ mà không phải card đồ họa nào cũng có thể xử lý được.
Các biểu tượng trên máy tính Macintosh 1984. Nhà thiết kế Susan Kare
Kể từ đó, công nghệ màn hình đã tiến bộ đáng kể - giờ đây ngay cả những màn hình đơn giản nhất cũng có độ phân giải từ 115 đến 160 pixel mỗi inch (PPI-pixel mỗi inch). Nhưng một chương mới của câu chuyện này bắt đầu vào năm 2010, khi Apple giới thiệu iPhone với màn hình Retina - màn hình siêu sắc nét giúp tăng gấp đôi số pixel trên mỗi inch. Kết quả là đồ họa sắc nét hơn bao giờ hết.
Sự khác biệt đặc biệt dễ nhận thấy ở biểu tượng ứng dụng thư và trong văn bản
Để duy trì cùng kích thước vật lý của các thành phần giao diện người dùng, số lượng pixel trên mỗi inch phải tăng lên. Nút trước đây chiếm 44px, giờ chiếm 88px.
Để tương thích giữa nhiều thiết bị, các nhà thiết kế phải tạo ra đồ họa cho cả màn hình thông thường và màn hình Retina. Nhưng ở đây, một vấn đề khác lại nảy sinh: bây giờ, nhà thiết kế không thể nói rằng một số phần tử phải có chiều cao, chẳng hạn như 44 pixel, vì trên một thiết bị khác, phần tử tương tự phải cao gấp đôi.
Giải pháp là điểm, hoặc pt. Một điểm tương ứng với một pixel trên màn hình tiền Retina và hai pixel trên màn hình Retina. Bây giờ, nếu một nhà thiết kế được thông báo rằng chiều cao của một phần tử là 44 pixel, anh ta có thể điều chỉnh kích thước này cho phù hợp với bất kỳ tỷ lệ mật độ pixel nào - 1x, 2x hoặc 3x trong trường hợp iPhone 6 Plus.
PT và DP
Tất nhiên, tất cả điều này không chỉ phù hợp với các thiết bị của Apple. Mọi hệ điều hành - máy tính để bàn hoặc thiết bị di động - đều hỗ trợ màn hình ppi/dpi cao. Google đã đưa ra đơn vị đo lường độc lập với pixel dành cho Android, được gọi là DIP - pixel độc lập với mật độ, viết tắt là "dp". Điều này không tương đương với iOS, nhưng ý tưởng thì tương tự. Đây là các đơn vị đo lường phổ quát có thể được chuyển đổi thành pixel bằng hệ số tỷ lệ của thiết bị (2x, 3x, v.v.).
Bạn có thể thắc mắc về kích thước vật lý của sản phẩm. Trên thực tế, các nhà thiết kế giao diện không cần phải suy nghĩ về điều này, vì họ không có quyền kiểm soát các tính năng phần cứng của màn hình của các thiết bị khác nhau. Nhà thiết kế cần biết mật độ pixel mà nhà sản xuất đã áp dụng cho thiết bị của họ và chú ý chuẩn bị giao diện ở mức 1x, 2x, 3x, v.v.
Các thiết bị của Apple không có mật độ điểm ảnh duy nhất đại diện cho một điểm duy nhất—mật độ này phụ thuộc vào thiết bị cụ thể (xem phần "Nhận thức tỷ lệ" bên dưới). Trong iOS, điểm thay đổi từ 132 dpi đến 163 dpi. Trên Android DIP luôn là 160 ppi.
Sự hỗn loạn được kiểm soát
Trong những ngày đầu của thiết bị di động có độ phân giải cao, mật độ điểm ảnh chỉ là 1x hoặc 2x. Nhưng bây giờ mọi thứ đã khác - có rất nhiều mật độ pixel mà giao diện phải hỗ trợ. Android có một ví dụ tuyệt vời: tính đến thời điểm viết bài này, các nhà sản xuất khác nhau hỗ trợ sáu mật độ pixel khác nhau. Điều này có nghĩa là một biểu tượng có cùng kích thước trên tất cả các màn hình thực tế sẽ có sáu biến thể khác nhau. Đối với Apple, hai hoặc ba nguồn khác nhau đều có liên quan.
thiết kế véc tơ
Có một vài bài học thực tế bạn nên rút ra từ tất cả những điều này. Để bắt đầu, bạn nên tạo các thiết kế của mình bằng vector. Điều này cho phép các giao diện, biểu tượng và đồ họa khác của chúng tôi có thể điều chỉnh theo bất kỳ kích thước nào cần thiết.
Bài học thứ hai: chúng ta phải vẽ mọi thứ theo tỷ lệ 1x. Nói cách khác, tạo một thiết kế sử dụng các điểm cho tất cả các kích thước, sau đó chia tỷ lệ thành nhiều mật độ pixel lớn hơn khi xuất. Tăng tỷ lệ đồ họa 2x lên 150% để tạo phiên bản 3x dẫn đến các cạnh bị mờ, vì vậy đây không phải là lựa chọn tốt nhất. Tuy nhiên, việc chia tỷ lệ đồ họa 1x ở mức 200% và 300% cho phép bạn duy trì độ rõ nét.
Độ phân giải của bố cục ứng dụng iPhone không phải là 750x1334 mà là 375x667 - đây chính xác là độ phân giải mà ứng dụng sẽ được hiển thị. Hầu hết các công cụ thiết kế không phân biệt giữa điểm và pixel, vì vậy bạn có thể coi điểm là pixel và sau đó chỉ cần xuất nguồn ở kích thước 2x hoặc 3x.
Giả vờ cho đến khi nó là sự thật
Điều đáng nói là đôi khi các thiết bị cũng nói dối. Họ giả vờ rằng hệ số chuyển đổi pixel-to-point của họ chẳng hạn là 3x, nhưng trên thực tế, nó là 2,61x và bản thân nguồn được chia tỷ lệ lên 3x để thuận tiện. Đây là những gì iPhone Plus làm chẳng hạn. Nó nén giao diện được tạo ở 1242x2208 thành độ phân giải màn hình 1080x1920.
Thiết kế cho iPhone Plus như thể nó là 3x. Bản thân điện thoại sẽ mở rộng tỷ lệ lên 87%
Vì đồ họa chỉ được thu nhỏ lại một chút (87%), nên kết quả trông vẫn khá ổn - một đường dày 1px trên màn hình gần như 3x vẫn trông cực kỳ sắc nét. Và có khả năng Apple sẽ giới thiệu iPhone Plus 3x thực sự trong tương lai, vì khả năng phần cứng cần thiết có thể có sẵn cho một sản phẩm được sản xuất với số lượng lớn như vậy.
Phương pháp chia tỷ lệ không nguyên này có được chấp nhận không? Mọi thứ đều được thử nghiệm trong thực tế. Kết quả của việc mở rộng quy mô như vậy có phải là vô hình? Nhiều thiết bị Android cũng sử dụng cách điều chỉnh tỷ lệ để phù hợp với tỷ lệ pixel-to-dot tiêu chuẩn hơn, nhưng đáng tiếc là một số thiết bị trong số đó không làm tốt điều đó.
Kiểu chia tỷ lệ này là không mong muốn vì bất cứ thứ gì bạn muốn sắc nét sẽ bị mờ do nội suy. Thật không may, khi mật độ điểm ảnh đạt tới mức 4x trở lên, hiện tượng mờ do chia tỷ lệ không nguyên gây ra trở nên kém tinh tế hơn nhiều, vì vậy tôi dự đoán các nhà sản xuất thiết bị sẽ ngày càng sử dụng phương pháp này theo thời gian. Chúng ta chỉ có thể hy vọng rằng những thiếu sót về hiệu suất sẽ kìm hãm họ.
Nhận thức về quy mô
Nút có nên có cùng kích thước trên các thiết bị khác nhau không? Câu trả lời phụ thuộc vào- độ chính xác của phương thức nhập liệu (cảm biến hoặc con trỏ);
- kích thước màn hình vật lý;
- khoảng cách đến màn hình.
Nút trên màn hình TV phải có kích thước bằng một chiếc điện thoại - vì nếu không nó sẽ không hiển thị khi ngồi trên ghế sofa.
Đây là một ví dụ ít kịch tính hơn và rất đúng: các biểu tượng ứng dụng trên máy tính bảng phải lớn hơn các biểu tượng tương tự trên điện thoại. Điều này được thực hiện theo hai cách: sử dụng mật độ pixel thấp hơn hoặc kích thước biểu tượng khác nhau.
Mật độ điểm ảnh thấp
Màn hình lớn mà chúng ta nhìn từ xa thường có mật độ điểm ảnh thấp hơn. Một chiếc TV có thể có 40 pixel mỗi inch - và theo quy luật, điều này là đủ. Mật độ điểm ảnh của màn hình Retina trên iPad là khoảng 264 ppi; trên iPhone - 326 ppi. Vì các pixel trên iPad lớn hơn (và ít đậm đặc hơn) nên toàn bộ giao diện sẽ lớn hơn một chút. Điều này là do khoảng cách giữa mắt người dùng và màn hình iPad tăng thêm.
Biết được sự khác biệt giữa các số lượng này là gì và chúng được sử dụng ở đâu sẽ hữu ích cho nhiều người liên quan đến in ấn. Có thể là nhà thiết kế, nhà văn hoặc người sáng tạo ra các tài liệu in ấn khác.
ppi là gì
Nói một cách đơn giản, bất kỳ hình ảnh raster nào cũng bao gồm các pixel - các chấm hình chữ nhật có màu. Hãy để chúng tôi làm rõ điều đó hình ảnh để quét là một hình ảnh có cấu trúc đại diện cho một lưới các điểm ảnh trên màn hình máy tính. Các định dạng raster phổ biến - psd, khó chịu, png, bmp hoặc jpg- có thể chỉnh sửa chúng trong môi trường phần mềm chuyên dụng, chẳng hạn như Adobe PhotoShop. Tất nhiên, có nhiều định dạng raster hơn những định dạng được liệt kê, nhưng để hiểu những gì chúng ta đang nói đến, các định dạng đã cho sẽ khá đủ.
Quay trở lại các pixel tạo nên hình ảnh raster, chúng ta có thể nói rằng đây là một loại khảm các chấm màu. Chính xác hơn là hình vuông. Mỗi ô vuông chỉ có thể có một màu. Nhưng hình ảnh có thể chứa các pixel có màu sắc và sắc thái khác nhau. Nhờ đó, đạt được sự chuyển đổi của màu này sang màu khác.
Ví dụ: hãy lấy một dải gồm 1000 ô vuông (pixel) như vậy. Sẽ có một hình vuông màu đen ở một đầu và một hình vuông màu trắng ở đầu kia. Giữa chúng sẽ có những hình vuông có sắc thái khác nhau. Mỗi hình vuông, di chuyển ra khỏi lưu huỳnh và tiến đến màu trắng, sẽ nhạt hơn hình trước một chút. Với độ phóng đại cao, tất nhiên chúng ta sẽ thấy rằng tất cả các hình vuông đều có sắc thái khác nhau. Nhưng với khoảng cách, ảo giác về dòng màu hoặc độ chuyển màu mượt mà sẽ xuất hiện.
Vì hình ảnh không chỉ có chiều dài mà còn có chiều rộng, lấp đầy mặt phẳng, giá trị ppi cho biết có bao nhiêu ô vuông (pixel) ở một bên của đơn vị đo thông thường. Đơn vị đo tiêu chuẩn cho pixel trong ảnh raster là một inch. Do đó, dấu 100 ppi cho chúng ta biết rằng có 100 pixel trên mỗi inch. Ở độ phân giải này của hình ảnh đồ họa sẽ có 10.000 pixel trên mỗi inch vuông (100x100). Hãy để chúng tôi nhắc lại rằng màu của một inch vuông có thể là bất cứ thứ gì. Chỉ có một màu cho mỗi pixel.
lpi là gì
Bây giờ hãy nói về việc chuyển hình ảnh từ màn hình máy tính sang giấy. Màn hình cho phép bạn hiển thị không chỉ màu sắc của pixel mà còn điều chỉnh độ sáng của chúng. Điều tương tự không thể nói về máy in và máy in offset. Điều này là do không thể điều chỉnh mức độ sơn cho từng pixel riêng lẻ trên các thiết bị đó về mặt kỹ thuật. Các thiết bị in chỉ cho phép bạn bôi mực vào một số vị trí nhất định trên giấy hoặc không bôi mực.
Máy in đã giải quyết được vấn đề sử dụng lượng mực ở những khu vực cụ thể bằng sự sang trọng thông thường của chúng. Họ chỉ đơn giản là điều chỉnh diện tích bề mặt cần sơn ở một vị trí cụ thể trên giấy. Với phương pháp này, ngay cả với cùng độ dày của lớp mực được áp dụng, độ sáng có thể được điều chỉnh bằng cách tăng hoặc giảm số chấm in. Quá trình này được gọi là rasterization.
Tất cả các máy in offset đều hoạt động theo nguyên tắc sàng lọc. Nếu bạn lấy kính lúp và nhìn vào in offset, bạn có thể dễ dàng nhận ra các dấu chấm tạo nên hình ảnh in. Vì phương pháp rasterization xuất hiện sớm hơn nhiều so với việc phát minh ra máy tính nên kích thước của các phép đo raster không liên quan gì đến chúng. Ban đầu, màn hình tiếp xúc được sử dụng để sàng lọc. Đây là một tấm trong suốt có độ bóng mịn được áp dụng cho nó.
Giá trị lpi hiển thị số dòng trên tấm raster trên mỗi inch. Giá trị này tương ứng với số lượng điểm trên mỗi inch trong hình ảnh được in rasterized. Chỉ báo này chỉ áp dụng cho các hình ảnh được rasterized và không được sử dụng ở bất kỳ nơi nào khác. Thông số này áp dụng cho các thiết bị in raster. Nó không thể được áp dụng cho hình ảnh máy tính vì mặc dù được gọi là hình ảnh raster nhưng thực tế nó là hình ảnh bán sắc.
Xem giá trị lpi trong cài đặt máy in, bạn nên hiểu rằng nó không ảnh hưởng gì khác ngoài số lượng điểm raster trên mỗi inch. Để hiểu rõ hơn về sự khác biệt giữa ppi và lpi, cần phải nói rằng phần nhỏ nhất của hình ảnh trên máy tính là pixel. Phần nhỏ nhất của hình ảnh trên giấy là một dấu chấm.
Về nguyên tắc, các chỉ báo này phải khớp nhau khi in ảnh. Tuy nhiên, các nhà thiết kế thường không chỉ mắc lỗi... Họ chỉ cần gửi bố cục để in, điều này lớn hơn nhiều lần so với khả năng kỹ thuật của thiết bị in. Độ phân giải hình ảnh phổ biến nhất trong số các nhà thiết kế là 300 ppi. Họ mang dự án với sự cho phép như vậy đến với tờ báo. Nhưng khi in báo, việc rasterization tối đa 100 lpi được sử dụng. Kết quả là chúng tôi nhận được rằng tệp gốc có thể nhỏ hơn 9 lần.
dpi là gì
Bây giờ hãy nhìn vào giá trị dpi. Giá trị này chỉ áp dụng cho thiết bị in raster. Trên thực tế, các điểm tạo nên chỉ báo lpi lần lượt được tạo thành từ các điểm nhỏ hơn. Một loạt các chấm nhỏ này tương đương với một lần chiếu tia laser vào trống ảnh hoặc phim. Hóa ra nhiều dpi được sử dụng để tạo ảnh cho một lpi.
Rõ ràng là tỷ lệ lpi trên dpi càng cao thì chất lượng in đầu ra chúng ta sẽ càng cao. Ở đây một lần nữa hiệu ứng khảm lại phát huy tác dụng. Các mảnh của nó càng nhỏ thì nó càng chính xác và chi tiết hơn. Dpi cũng ảnh hưởng đến lpi; càng sử dụng nhiều chấm nhỏ để tạo ra một chấm raster lớn thì chấm này sẽ càng chính xác. Hình ảnh có độ phân giải cao khi in có thể sử dụng tỷ lệ từ 150 lpi đến 2540 dpi trở lên. Đối với in báo, tỷ lệ 100 lpi đến 1200 dpi là đủ.
Khi mua máy tính, điều thường xảy ra là màn hình được chọn dựa trên nguyên tắc còn lại - số tiền còn lại từ việc mua đơn vị hệ thống. Điều này có ý nghĩa nào đó. Hiệu suất của máy tính không bị ảnh hưởng bởi các đặc tính của màn hình. Nhưng bạn nên hiểu rằng một màn hình giá rẻ có độ phân giải tối đa thấp, hình ảnh mờ và khả năng hiển thị màu kém có thể phủ nhận những ưu điểm của card màn hình cao cấp. Đèn nền nhấp nháy sẽ dẫn đến mệt mỏi nhanh chóng và có thể ảnh hưởng xấu đến thị lực. Vì vậy, việc tiết kiệm trên màn hình có thể gây tác dụng ngược, đặc biệt nếu bạn định sử dụng máy tính thường xuyên và nhiều. Vì vậy, tốt hơn hết bạn nên lựa chọn màn hình một cách có trách nhiệm, chọn nó phù hợp với nhiệm vụ.
Ảnh hưởng chính đến giá của màn hình là kích thước đường chéo của nó. Nhưng ngay cả giữa các màn hình có cùng kích thước, giá có thể thay đổi theo mức độ lớn tùy thuộc vào các đặc điểm khác. Cần hiểu rằng nhiều đặc điểm của màn hình rất quan trọng đối với một số người dùng và hoàn toàn không thú vị đối với những người khác. Biết những đặc điểm cần thiết để thực hiện các nhiệm vụ cụ thể, bạn có thể đưa ra lựa chọn đúng đắn bằng cách chọn một màn hình tốt với mức giá tốt nhất.
Tùy thuộc vào mục đích, người ta thường phân biệt bốn nhóm từ các mẫu rẻ tiền đến đắt tiền có kích thước tương tự: văn phòng, đa phương tiện, chơi game và chuyên nghiệp.
Màn hình văn phòng được thiết kế để hoạt động với các chương trình văn phòng. Yêu cầu đối với những màn hình như vậy là tối thiểu và nhằm mục đích giảm mệt mỏi khi làm việc kéo dài: đủ độ sáng, độ tương phản và đèn nền chất lượng cao.
Đối với màn hình đa phương tiện, các đặc điểm mang lại “hình ảnh” ấn tượng được đặt lên hàng đầu. Khả năng tái tạo màu sắc tốt, đường chéo lớn và định dạng Ultrawide khiến những màn hình này nổi bật so với các màn hình còn lại.
Màn hình chơi game nghĩa là màn hình có độ phân giải tối đa cao, tốc độ làm mới cao và thời gian phản hồi thấp. Ở đây, khả năng hiển thị màu sắc có thể bị loại bỏ để tái tạo các cảnh động có chất lượng cao. Màn hình chơi game thường là màn hình rộng. Màn hình siêu rộng và cong cũng thường được bán trên thị trường dưới dạng màn hình chơi game.
Màn hình dành cho các nhà thiết kế, nhiếp ảnh gia và nghệ sĩ chuyên nghiệp phải cung cấp độ sâu màu tối đa và khả năng tái tạo màu chất lượng cao. Độ phân giải tối đa cao, kích thước pixel nhỏ (điều này sẽ đảm bảo độ rõ nét của hình ảnh) và cài đặt hiệu chỉnh nâng cao cũng là điều mong muốn.
Giám sát đặc điểm.
Kích thước (đường chéo) Màn hình là đặc điểm chính của nó, chủ yếu quyết định giá cả và sức hấp dẫn của nó đối với người dùng. Kích thước được đo theo đường chéo. Màn hình càng rộng về tỷ lệ khung hình thì vùng hiển thị trên cùng một đường chéo càng nhỏ.
Đường chéo màn hình thay đổi từ 18 inch đến 55 inch trở lên. Nói chung, đường chéo càng lớn thì càng tốt: càng nhiều thông tin phù hợp trên màn hình, hiệu ứng hiện diện trong trò chơi và khi xem video càng lớn.
Thật không may, khi đường chéo tăng lên, giá sẽ tăng theo cấp số nhân. Do đó, các máy trạm gần đây có hai màn hình trở lên ngày càng trở nên phổ biến: nhiều card màn hình hiện đại cho phép bạn kết nối nhiều màn hình, điều này cho phép bạn tăng đáng kể diện tích màn hình của mình với mức giá tối thiểu.
Độ phân giải tối đa.
Độ phân giải màn hình là số pixel - số chấm tạo nên hình ảnh theo chiều rộng và chiều cao. Độ phân giải tối đa càng cao, hình ảnh càng sắc nét và càng có nhiều thông tin mà mắt cảm nhận được trên màn hình.
Cần lưu ý rằng độ phân giải tối đa cho mỗi màn hình là tối ưu - ở độ phân giải này, mỗi pixel tương ứng với một phần tử tinh thể lỏng. Bạn không nên làm việc với màn hình ở độ phân giải thấp hơn mức tối đa - điều này sẽ làm giảm vùng hiển thị (khung màu đen được hình thành) hoặc mỗi pixel sẽ bao gồm một số thành phần LCD và có thể một số pixel sẽ trở thành lớn hơn những cái khác (hình ảnh sẽ bắt đầu bị biến dạng rõ rệt) .
Độ phân giải tối đa phải phù hợp với kích thước của màn hình: nếu không đủ, hình ảnh sẽ bị nhiễu hạt, nhưng nếu độ phân giải quá cao, văn bản và vật thể sẽ trở nên quá nhỏ. Để xác định xem độ phân giải tối đa có tương ứng với kích thước hay không, hãy sử dụng giá trị ppi - mật độ điểm ảnh. PPI (Pixels Per Inc - “pixel per inch”) bằng số pixel trên inch của màn hình. Văn bản và đối tượng của hệ điều hành hiện đại được cấu hình cho màn hình với 96 ppi, do đó, để duy trì độ rõ nét của văn bản và các phần tử nhỏ, điều mong muốn là ppi của màn hình ít nhất là 90-100. Nếu độ nhạy của màn hình của bạn nhỏ hơn 90 (75 hoặc thấp hơn), hình ảnh sẽ xuất hiện nhiễu hạt. Điều này không quá quan trọng khi xem video và một số trò chơi, nhưng đối với công việc, một màn hình như vậy sẽ không còn thoải mái nữa.
Độ phân giải màn hình tối đa phải được hỗ trợ bởi card màn hình.
Khi thay thế màn hình của bạn bằng màn hình lớn hơn, bạn cũng nên nhớ rằng việc tăng độ phân giải cũng làm tăng tải cho card màn hình.
Tỷ lệ khung hình (Định dạng)đề cập đến tỷ lệ giữa chiều rộng và chiều cao của màn hình. Màn hình cũ có tỷ lệ 5:4 và 4:3, những màn hình này vẫn được bán cho đến ngày nay và thường được sử dụng cho các công việc văn phòng - chúng thuận tiện nhất khi làm việc với các tài liệu ở định dạng “giấy”. Hầu hết các màn hình hiện đại đều có tỷ lệ khung hình 16:9 (định dạng rộng). Định dạng này bao quát tốt nhất tầm nhìn của một người. Nên sử dụng màn hình định dạng siêu rộng (21:9, Ultrawide) để chơi game và xem video. Mặc dù các cạnh của màn hình của những màn hình như vậy bị mất nét nhưng chúng vẫn hiển thị ở tầm nhìn ngoại vi, điều này làm tăng hiệu ứng hiện diện. Tuy nhiên, trên màn hình Ultrawide, độ biến dạng màu ở các cạnh của màn hình dễ nhận thấy hơn, đặc biệt nếu màn hình ở ngay trước mặt bạn ở khoảng cách ngắn. Màn hình cong giúp giảm hiện tượng biến dạng màu ở các cạnh, ngoài ra, màn hình như vậy còn tăng cường hơn nữa tác dụng của sự hiện diện.
Công nghệ và loại hình sản xuất ma trận.
Ma trận là đế của màn hình - một gói các tấm trong suốt, giữa các lớp có tinh thể lỏng. Ngày nay có ba loại ma trận LCD:
1. TN (phim TN+)– công nghệ đơn giản nhất để sản xuất ma trận LCD. Ưu điểm là thời gian phản hồi ngắn (ngắn nhất trong số các ma trận hiện đại) và chi phí thấp. Nhưng cũng có nhiều nhược điểm: góc nhìn nhỏ, độ tương phản và khả năng hiển thị màu sắc kém. Tốc độ phản hồi cao nhất đã khiến ma trận TN trở nên phổ biến trong giới thể thao điện tử, nhưng những ma trận như vậy không phù hợp với công việc chuyên nghiệp về đồ họa và xem video.
2. IPS (SFT)/PLS không có nhược điểm của TN: chúng cung cấp phạm vi bao phủ đầy đủ không gian màu sRGB và do đó tái tạo màu sắc tốt hơn. Chúng có độ tương phản cao và góc nhìn tốt: lên tới 180°. IPS thường được sử dụng nhiều nhất trong các màn hình chuyên nghiệp, nhưng tương đối gần đây, chúng bắt đầu xâm chiếm phân khúc giá rẻ, giành được một phần thị trường khá lớn từ tay TN.
Nhược điểm của IPS là giá tương đối cao, thời gian phản hồi lâu và đặc điểm hiệu ứng phát sáng của loại này - hiện tượng phát sáng ở các góc màn hình, đặc biệt dễ nhận thấy ở một góc và trong hình ảnh tối.
Ngày nay, IPS hợp nhất cả một nhóm công nghệ có đặc điểm hơi khác nhau. Các công nghệ phổ biến nhất là:
- AD-PLS – ma trận PLS cải tiến (tương tự IPS của Samsung). Nó khác với PLS thông thường ở thời gian phản hồi ngắn hơn;
- AH-IPS – hiển thị màu sắc và độ sáng tốt hơn, giảm mức tiêu thụ điện năng;
- Công nghệ AHVA – AU Optronics cho góc nhìn cao
- E-IPS - khả năng truyền ánh sáng pixel tăng lên cho phép sử dụng đèn nền ít mạnh hơn, giúp giảm giá thành và giảm mức tiêu thụ năng lượng.
- IPS-ADS – tăng góc nhìn và giảm biến dạng hình ảnh do điện trường tạo ra bởi các điện cực ở các cạnh của màn hình.
3. V.A. xét về đặc điểm và giá thành thì chúng nằm giữa loại TN và IPS. Chúng có khả năng tái tạo màu sắc tốt, độ tương phản tốt hơn IPS, góc nhìn và thời gian phản hồi ở mức trung bình.
Ngoài ra còn có một số công nghệ để sản xuất ma trận loại này:
MVA(PVA) – khả năng hiển thị màu được cải thiện, màu đen sâu.
AMVA, AMVA+ - phát triển hơn nữa công nghệ MVA với khả năng tái tạo màu sắc được cải thiện và giảm thời gian phản hồi.
WVA+ - sự phát triển của công nghệ MVA từ HP, cung cấp góc nhìn rộng - lên tới 178°
Thời gian phản hồi của pixel.
Do đặc điểm thiết kế của ma trận LCD, sự thay đổi màu sắc của từng pixel khi tín hiệu điều khiển được áp vào nó diễn ra khá chậm (theo tiêu chuẩn của các thiết bị điện tử) và được đo bằng mili giây. Ma trận LCD đầu tiên có thời gian phản hồi lên tới hàng trăm mili giây; chúng không phù hợp để xem các cảnh động và thậm chí còn có một vệt dài phía sau con trỏ chuột khi di chuyển. Ma trận LCD hiện đại có thời gian phản hồi ngắn hơn, nhưng nếu chỉ báo này lớn hơn 15 ms, hình ảnh có thể bị “mờ” khi phát các cảnh có độ động cao. Vì vậy, thông số này rất quan trọng đối với những người hâm mộ các trò chơi năng động và đặc biệt là người chơi eSports. Quan trọng thế nào?
Ví dụ: chúng ta có thể xem xét trường hợp một “vật thể” nhỏ đi qua toàn bộ màn hình trong 0,1 giây. Giả sử tốc độ khung hình trong trò chơi là 30 FPS, khi đó đối tượng sẽ nhận được 3 hình ảnh trong suốt chuyến bay, mỗi hình ảnh sẽ tồn tại trên màn hình trong 33 ms. Nếu thời gian phản hồi lớn hơn 16 ms thì trong một thời gian, sẽ có hai đối tượng trên màn hình cùng lúc (một đối tượng “biến mất” khỏi khung hình trước đó, đối tượng còn lại là “được vẽ”). Vì vậy, đối với người chơi bình thường, điều này có thể không quan trọng, nhưng đối với người chơi thể thao điện tử, thời gian phản hồi gần như trở thành đặc điểm chính của màn hình.
Theo dõi độ sáng,được đo bằng cd/m2, xác định quang thông phát ra từ màn hình trắng hoàn toàn ở độ sáng đèn nền 100%. Chỉ báo này có thể quan trọng nếu màn hình được lắp đặt trong phòng có đủ ánh sáng, trong phòng có cửa sổ lớn nhìn toàn cảnh hoặc ngoài trời - trong trường hợp này, sẽ cần độ sáng cao hơn - từ 300 cd/m2. Trong các trường hợp khác, độ sáng 200-300 cd/m2 là đủ.
Theo dõi độ tương phảnđược xác định bởi tỷ lệ độ sáng của màu đen và trắng được hiển thị bởi màn hình. Hầu hết các màn hình hiện đại đều có tỷ lệ tương phản 1000:1 và tỷ lệ này khá đủ cho cả công việc và chơi game. Ngoài ra, trong các đặc điểm còn có các chỉ báo về độ tương phản động, được mô tả là sự khác biệt giữa màu trắng ở độ sáng tối đa và màu đen ở mức tối thiểu, nhưng không có phương pháp duy nhất để đo độ tương phản động, vì vậy bạn không nên dựa vào chỉ báo này.
Góc nhìn
Do thiết kế ma trận LCD nên chỉ có thể nhìn thấy màu sắc thuần khiết và độ sáng tối đa khi nhìn vào màn hình ở góc 90 độ. Nếu bạn nhìn màn hình từ bên cạnh, độ sáng của các pixel sẽ giảm. Tệ hơn nữa, độ sáng của các pixel có màu khác nhau giảm không đồng đều, do đó màu sắc bắt đầu bị biến dạng khi nhìn từ bên cạnh. Góc nhìn hẹp ban đầu là một trong những nhược điểm tồi tệ nhất của màn hình LCD, vì vậy các nhà sản xuất màn hình đã (và đang) không ngừng phát triển các công nghệ mới để tăng góc nhìn. Cho đến nay, họ đã đạt được những kết quả đáng chú ý - góc nhìn của ma trận hiện đại đã được nâng lên mức tối đa có thể.
Nhưng không phải mọi thứ đều hoàn hảo như vậy - chẳng hạn như góc nhìn 176° chỉ có nghĩa là bên trong góc 176°, độ tương phản của màn hình sẽ không giảm xuống dưới 1:10. Sự thay đổi về độ tương phản vẫn sẽ khá dễ nhận thấy và có thể gây khó chịu ngay cả khi người xem ở trong góc nhìn. Hơn nữa, các màn hình khác nhau (có cùng góc nhìn) có thể khác nhau về chất lượng khi nhìn từ bên cạnh. Nếu các điều kiện sử dụng màn hình cho thấy bạn thường xuyên phải nhìn từ bên cạnh (ví dụ: màn hình trên tường, màn hình đa phương tiện, màn hình bổ sung), thì bạn không nên chỉ được hướng dẫn bằng cách xem đã nêu. góc nhìn, vì góc nhìn không nói lên điều gì về động lực thay đổi độ tương phản trong góc này. Chỉ báo này không được nhà sản xuất chỉ định nên cách duy nhất để đánh giá là nhìn vào màn hình “trực tiếp”.
Ma trận IPS trông đẹp nhất khi nhìn từ bên cạnh - những thay đổi về độ tương phản mà mắt có thể nhìn thấy chỉ bắt đầu ở hầu hết các kiểu máy khi chúng lệch khỏi đường vuông góc 45-50 độ, mang lại góc nhìn 90-100° mà độ tương phản không giảm đáng kể. Tệ nhất là TN: mặc dù góc nhìn đã nêu là hơn 170°, những thay đổi về độ tương phản đôi khi trở nên đáng chú ý khi lệch khỏi đường vuông góc tới 20°.
Tốc độ làm mới tối đa
Tốc độ làm mới màn hình cho biết hình ảnh trên màn hình được làm mới nhanh như thế nào. Hầu hết các màn hình hiện đại đều có tốc độ làm mới 60 Hz và điều này khá đủ để làm việc thoải mái. Có một niềm tin lỗi thời rằng tần số này là không đủ. Người dùng PC đã sử dụng màn hình CRT hãy nhớ rằng không thoải mái khi làm việc với chúng ở tần số 60 Hz - màn hình nhấp nháy rõ rệt. Nhưng thiết kế của màn hình LCD về cơ bản khác với thiết kế của màn hình CRT. Màn hình LCD không nhấp nháy ở bất kỳ tốc độ làm mới nào (hay nói đúng hơn là đôi khi chúng nhấp nháy, nhưng điều này không liên quan gì đến tốc độ làm mới). Quán tính của tầm nhìn của con người trung bình là 27,5 ms, tối thiểu là 20 ms và tốc độ làm mới 50 Hz là đủ để chuyển động mượt mà trên màn hình. Một số màn hình chơi game hỗ trợ tần số lên tới 240Hz, với tuyên bố rằng điều này sẽ đảm bảo độ mượt mà và chi tiết tối đa khi chuyển động. Để tuyên bố này có ý nghĩa, card màn hình không chỉ phải hỗ trợ tần số này mà còn phải cung cấp FPS thích hợp. Đối với độ phân giải cao, một card màn hình hiếm hoi sẽ có thể tạo ra cùng tốc độ 240 FPS ngay cả trên các game cũ.
Ủng hộ cập nhật động màn hình có thể hữu ích hơn trong việc làm mượt chuyển động trong trò chơi. Bản chất của cập nhật động là “điều chỉnh” tốc độ làm mới màn hình theo FPS do card màn hình cung cấp để tránh tình trạng thời điểm màn hình được cập nhật rơi vào thời điểm khung hình tiếp theo của trò chơi được hiển thị và chỉ hiển thị một nửa. của khung mới được vẽ trên màn hình. Mặc dù hình ảnh này sẽ chỉ tồn tại trong một khoảng thời gian không đáng kể nhưng hiệu ứng này có thể thấy rõ ở những cảnh có độ sáng thay đổi đột ngột. Công nghệ FreeSync của AMD và G-Sync của Nvidia ngăn chặn những tình huống như vậy. Sự khác biệt giữa các công nghệ dành cho người dùng được thể hiện ở FPS được hỗ trợ tối thiểu: đối với G-Sync là 30 FPS và đối với FreeSync là 9.
Lớp phủ màn hình có thể bóng hoặc mờ (chống chói). Bề mặt bóng, giống như thủy tinh nguyên chất, phản chiếu các nguồn sáng và trong điều kiện ánh sáng trong phòng sáng, các vật thể xung quanh màn hình và chính người điều khiển. Người ta tin rằng màn hình bóng cung cấp nhiều màu sắc bão hòa hơn, nhưng chúng chỉ thoải mái khi làm việc trong điều kiện ánh sáng được điều chỉnh. Bề mặt mờ không có những nhược điểm như vậy - không thể nhìn thấy sự phản chiếu của các vật thể trên chúng và thậm chí độ chói từ các nguồn sáng mạnh cũng được giữ ở mức tối thiểu.
Gam màu cho thấy màn hình có thể hiển thị đầy đủ tất cả các màu từ một không gian màu cụ thể như thế nào. Không gian màu sRGB– không gian màu tiêu chuẩn mà hầu hết các thiết bị chụp ảnh và video trong gia đình đều hoạt động. Nếu màn hình của bạn không cung cấp phạm vi phủ sóng sRGB đầy đủ, màn hình có thể mất một số màu mà các thiết bị khác hiển thị với phạm vi phủ sóng sRGB đầy đủ. Người dùng bình thường có thể sẽ không nhận thấy điều này, nhưng các nhà thiết kế và nhiếp ảnh gia không nên chọn mẫu máy này.
Không gian màu Adobe RGB rộng hơn một chút so với tiêu chuẩn do có nhiều sắc thái xanh lam, xanh lá cây và vàng. Hầu hết các thiết bị tiêu dùng sẽ không thể tái tạo các màu bổ sung này, nhưng nhiều thiết bị rơi vào không gian CMYK và có thể được in. Do đó, các nhà in chuyên nghiệp và những nhiếp ảnh gia làm việc cho các ấn phẩm in cần có màn hình có phạm vi phủ sóng Adobe RGB đầy đủ.
Màn hình cảm ứng ngày nay nó không còn được coi là một sự tò mò nữa, nhưng không có điểm đặc biệt nào khi mua màn hình có màn hình cảm ứng - độ chính xác của việc định vị con trỏ bằng ngón tay thấp hơn nhiều so với bằng chuột, cộng với dấu vân tay trên bề mặt màn hình. không tô màu gì cả. Màn hình cảm ứng thường chỉ được sử dụng cho máy tính với những mục đích đặc biệt - ví dụ như được lắp đặt ở những khu vực công cộng để thông báo cho khách tham quan hoặc để khách tham quan làm việc với phần mềm chuyên dụng, lại ở những nơi công cộng.
Đôi khi các điều kiện sử dụng màn hình yêu cầu khả năng thay đổi vị trí của màn hình trong phạm vi rộng - xoay màn hình trên giá đỡ, nâng và hạ màn hình cũng như thay đổi độ nghiêng. Bạn có thể mua một giá đỡ riêng hoặc bạn có thể chọn màn hình có chân đế tương ứng - điều chỉnh độ cao, độ nghiêng và xoay, với góc quay 90 độ - chế độ chân dung, thuận tiện khi làm việc với các tài liệu trang dài và hẹp.
Nếu khả năng có chân đế là không đủ và bạn cần gắn màn hình vào giá đỡ thì hầu hết các màn hình đều được trang bị Giá đỡ VESA, bạn chỉ cần chọn kích thước phù hợp cho giá đỡ.
Đặc điểm quan trọng của màn hình là sự hiện diện của một số đầu nối nhất định. Nó có thể kết nối video:
- VGA(D-SUB, DB15) – một đầu nối lỗi thời để truyền tín hiệu RGB tương tự. Hiện tại, hỗ trợ cho chuẩn VGA đã ngừng hoạt động, trên các màn hình hiện đại, đầu nối này được cài đặt để tương thích với các card màn hình cũ hơn. Nên sử dụng như là phương sách cuối cùng - nếu không có khả năng kết nối qua tiêu chuẩn kỹ thuật số. Độ phân giải tối đa khi kết nối qua đầu nối này sẽ là 2048x1536 pixel ở tần số 85 Hz.
- DVI(DVI-D) là đầu nối hiện đại hơn được sử dụng để truyền thông tin video ở dạng kỹ thuật số. Độ phân giải tối đa được phép khi kết nối qua đầu nối này là 2560x1600 ở tần số 60 Hz ở chế độ Liên kết kép. Nếu độ phân giải màn hình lớn hơn 1920x1080 thì để kết nối màn hình qua đầu nối này, card màn hình phải được trang bị đầu nối liên kết kép DVI-D.
- HDMI– đầu nối phổ biến nhất hiện nay để truyền dữ liệu video kỹ thuật số độ phân giải cao. Phiên bản HDMI mới nhất hỗ trợ độ phân giải lên tới 10K ở 120 Hz, mặc dù thực tế là những màn hình như vậy chưa được sản xuất hàng loạt.
- Cổng hiển thị(mini Displayport) là một dạng tương tự của HDMI, được thiết kế dành riêng cho thiết bị máy tính. Phiên bản mới nhất hỗ trợ độ phân giải tối đa 8K (7680 × 4320) ở tần số 60 Hz.
- Sấm sét- Giao diện Apple. Thunderbolt phiên bản 1 và 2 sử dụng đầu nối riêng (còn gọi là Thunderbolt), Thunderbolt phiên bản 3 sử dụng đầu nối USB Loại C. Thunderbolt phiên bản 2 hỗ trợ độ phân giải lên tới 4K (3840 × 2160), phiên bản 3 – lên tới 5K (5120 × 2880). Đôi khi được tìm thấy trong thiết bị của các thương hiệu khác.
Màn hình cũng có thể có các đầu nối bổ sung:
- giắc cắm tai nghe 3.5: Giao diện HDMI và Displayport cho phép truyền âm thanh, do đó tai nghe có thể được kết nối không phải với máy tính mà với màn hình.
USB – một số nhà sản xuất tích hợp nó vào màn hình Trung tâm USB
Hệ thống loa tích hợp có thể tiết kiệm không gian trên bàn làm việc của bạn và loại bỏ các dây không cần thiết - âm thanh cũng được truyền đến bàn làm việc qua HDMI hoặc Displayport. Thích hợp cho việc lồng tiếng đơn giản cho những người dùng không có yêu cầu cao.
Tùy chọn màn hình
Hãy bắt đầu với phân khúc ngân sách. Nếu bạn là người dùng khiêm tốn thì hãy mua màn hình 18-21 inch rẻ tiền nhất, khá phù hợp để làm việc với các chương trình văn phòng.
Chất lượng ma trận và góc nhìn của những mô hình như vậy sẽ không quá lớn, nhưng ít nhất tất cả điều này cũng được bù đắp bằng khả năng tiếp cận.
Lựa chọn tốt nhất cho gia đình là các mẫu 23-25 inch với độ phân giải FullHD. Không quá lớn và không quá nhỏ - sự cân bằng tối ưu giữa độ rõ ràng và chi phí.
Không yêu cầu card đồ họa của PC, như trường hợp của các mẫu 2K hoặc 4K, kích thước pixel có thể chấp nhận được. Hình ảnh, phông chữ và biểu tượng sẽ không quá nhỏ. Chọn loại ma trận, thiết kế, bộ đầu nối, v.v. tùy theo sở thích cá nhân và ví tiền của bạn. Nếu bạn cần chất lượng hình ảnh tối đa thì đó sẽ là IPS, VA và các loại ma trận khác ngoài TN. Bản thân TN có phần rẻ hơn và thường nhanh hơn, tức là. phù hợp hơn với nội dung động và trò chơi.
Đối với những người có thẩm mỹ hoặc những người yêu thích các giải pháp thiết kế, màn hình có vỏ “không khung” được cung cấp. Điều này không ảnh hưởng đến chức năng, nhưng những màn hình trang nhã như vậy trông khá đẹp trên bàn.
Nhà thiết kế Peter Nowell đã viết trên blog của mình về mật độ pixel trong thiết kế ứng dụng di động - ông giải thích nó là gì và nói về những vấn đề mà các nhà thiết kế gặp phải khi thiết kế giao diện cho các thiết bị khác nhau.
Các biên tập viên của phần “Giao diện” xuất bản bản dịch tài liệu do nhóm Sketchapp thực hiện.
Video bao gồm hầu hết các chủ đề trong bài viết, nhưng nếu bạn muốn biết thêm chi tiết, hãy tiếp tục đọc
Mật độ pixel là số lượng pixel phù hợp với một kích thước vật lý cụ thể (thường là một inch). Chiếc máy Mac đầu tiên có 72 pixel mỗi inch - một con số có vẻ lớn nhưng thực tế đây là những pixel khổng lồ mà không phải card đồ họa nào cũng có thể xử lý được.
Các biểu tượng trên máy tính Macintosh 1984. Nhà thiết kế Susan Kare
Kể từ đó, công nghệ màn hình đã tiến bộ đáng kể - giờ đây ngay cả những màn hình đơn giản nhất cũng có độ phân giải từ 115 đến 160 pixel mỗi inch (PPI-pixel mỗi inch). Nhưng một chương mới của câu chuyện này bắt đầu vào năm 2010, khi Apple giới thiệu iPhone với màn hình Retina - màn hình siêu sắc nét giúp tăng gấp đôi số pixel trên mỗi inch. Kết quả là đồ họa sắc nét hơn bao giờ hết.
Sự khác biệt đặc biệt dễ nhận thấy ở biểu tượng ứng dụng thư và trong văn bản
Để duy trì cùng kích thước vật lý của các thành phần giao diện người dùng, số lượng pixel trên mỗi inch phải tăng lên. Nút trước đây chiếm 44px, giờ chiếm 88px.
Để tương thích giữa nhiều thiết bị, các nhà thiết kế phải tạo ra đồ họa cho cả màn hình thông thường và màn hình Retina. Nhưng ở đây, một vấn đề khác lại nảy sinh: bây giờ, nhà thiết kế không thể nói rằng một số phần tử phải có chiều cao, chẳng hạn như 44 pixel, vì trên một thiết bị khác, phần tử tương tự phải cao gấp đôi.
Giải pháp là điểm, hoặc pt. Một điểm tương ứng với một pixel trên màn hình tiền Retina và hai pixel trên màn hình Retina. Bây giờ, nếu một nhà thiết kế được thông báo rằng chiều cao của một phần tử là 44 pixel, anh ta có thể điều chỉnh kích thước này cho phù hợp với bất kỳ tỷ lệ mật độ pixel nào - 1x, 2x hoặc 3x trong trường hợp iPhone 6 Plus.
PT và DP
Tất nhiên, tất cả điều này không chỉ phù hợp với các thiết bị của Apple. Mọi hệ điều hành - máy tính để bàn hoặc thiết bị di động - đều hỗ trợ màn hình ppi/dpi cao. Google đã đưa ra đơn vị đo lường độc lập với pixel dành cho Android, được gọi là DIP - pixel độc lập với mật độ, viết tắt là "dp". Điều này không tương đương với iOS, nhưng ý tưởng thì tương tự. Đây là các đơn vị đo lường phổ quát có thể được chuyển đổi thành pixel bằng hệ số tỷ lệ của thiết bị (2x, 3x, v.v.).
Bạn có thể thắc mắc về kích thước vật lý của sản phẩm. Trên thực tế, các nhà thiết kế giao diện không cần phải suy nghĩ về điều này, vì họ không có quyền kiểm soát các tính năng phần cứng của màn hình của các thiết bị khác nhau. Nhà thiết kế cần biết mật độ pixel mà nhà sản xuất đã áp dụng cho thiết bị của họ và chú ý chuẩn bị giao diện ở mức 1x, 2x, 3x, v.v.
Các thiết bị của Apple không có mật độ điểm ảnh duy nhất đại diện cho một điểm duy nhất—mật độ này phụ thuộc vào thiết bị cụ thể (xem phần "Nhận thức tỷ lệ" bên dưới). Trong iOS, điểm thay đổi từ 132 dpi đến 163 dpi. Trên Android DIP luôn là 160 ppi.
Sự hỗn loạn được kiểm soát
Trong những ngày đầu của thiết bị di động có độ phân giải cao, mật độ điểm ảnh chỉ là 1x hoặc 2x. Nhưng bây giờ mọi thứ đã khác - có rất nhiều mật độ pixel mà giao diện phải hỗ trợ. Android có một ví dụ tuyệt vời: tính đến thời điểm viết bài này, các nhà sản xuất khác nhau hỗ trợ sáu mật độ pixel khác nhau. Điều này có nghĩa là một biểu tượng có cùng kích thước trên tất cả các màn hình thực tế sẽ có sáu biến thể khác nhau. Đối với Apple, hai hoặc ba nguồn khác nhau đều có liên quan.
thiết kế véc tơ
Có một vài bài học thực tế bạn nên rút ra từ tất cả những điều này. Để bắt đầu, bạn nên tạo các thiết kế của mình bằng vector. Điều này cho phép các giao diện, biểu tượng và đồ họa khác của chúng tôi có thể điều chỉnh theo bất kỳ kích thước nào cần thiết.
Bài học thứ hai: chúng ta phải vẽ mọi thứ theo tỷ lệ 1x. Nói cách khác, tạo một thiết kế sử dụng các điểm cho tất cả các kích thước, sau đó chia tỷ lệ thành nhiều mật độ pixel lớn hơn khi xuất. Tăng tỷ lệ đồ họa 2x lên 150% để tạo phiên bản 3x dẫn đến các cạnh bị mờ, vì vậy đây không phải là lựa chọn tốt nhất. Tuy nhiên, việc chia tỷ lệ đồ họa 1x ở mức 200% và 300% cho phép bạn duy trì độ rõ nét.
Độ phân giải của bố cục ứng dụng iPhone không phải là 750x1334 mà là 375x667 - đây chính xác là độ phân giải mà ứng dụng sẽ được hiển thị. Hầu hết các công cụ thiết kế không phân biệt giữa điểm và pixel, vì vậy bạn có thể coi điểm là pixel và sau đó chỉ cần xuất nguồn ở kích thước 2x hoặc 3x.
Giả vờ cho đến khi nó là sự thật
Điều đáng nói là đôi khi các thiết bị cũng nói dối. Họ giả vờ rằng hệ số chuyển đổi pixel-to-point của họ chẳng hạn là 3x, nhưng trên thực tế, nó là 2,61x và bản thân nguồn được chia tỷ lệ lên 3x để thuận tiện. Đây là những gì iPhone Plus làm chẳng hạn. Nó nén giao diện được tạo ở 1242x2208 thành độ phân giải màn hình 1080x1920.
Thiết kế cho iPhone Plus như thể nó là 3x. Bản thân điện thoại sẽ mở rộng tỷ lệ lên 87%
Vì đồ họa chỉ được thu nhỏ lại một chút (87%), nên kết quả trông vẫn khá ổn - một đường dày 1px trên màn hình gần như 3x vẫn trông cực kỳ sắc nét. Và có khả năng Apple sẽ giới thiệu iPhone Plus 3x thực sự trong tương lai, vì khả năng phần cứng cần thiết có thể có sẵn cho một sản phẩm được sản xuất với số lượng lớn như vậy.
Phương pháp chia tỷ lệ không nguyên này có được chấp nhận không? Mọi thứ đều được thử nghiệm trong thực tế. Kết quả của việc mở rộng quy mô như vậy có phải là vô hình? Nhiều thiết bị Android cũng sử dụng cách điều chỉnh tỷ lệ để phù hợp với tỷ lệ pixel-to-dot tiêu chuẩn hơn, nhưng đáng tiếc là một số thiết bị trong số đó không làm tốt điều đó.
Kiểu chia tỷ lệ này là không mong muốn vì bất cứ thứ gì bạn muốn sắc nét sẽ bị mờ do nội suy. Thật không may, khi mật độ điểm ảnh đạt tới mức 4x trở lên, hiện tượng mờ do chia tỷ lệ không nguyên gây ra trở nên kém tinh tế hơn nhiều, vì vậy tôi dự đoán các nhà sản xuất thiết bị sẽ ngày càng sử dụng phương pháp này theo thời gian. Chúng ta chỉ có thể hy vọng rằng những thiếu sót về hiệu suất sẽ kìm hãm họ.
Nhận thức về quy mô
Nút có nên có cùng kích thước trên các thiết bị khác nhau không? Câu trả lời phụ thuộc vào- độ chính xác của phương thức nhập liệu (cảm biến hoặc con trỏ);
- kích thước màn hình vật lý;
- khoảng cách đến màn hình.
Nút trên màn hình TV phải có kích thước bằng một chiếc điện thoại - vì nếu không nó sẽ không hiển thị khi ngồi trên ghế sofa.
Đây là một ví dụ ít kịch tính hơn và rất đúng: các biểu tượng ứng dụng trên máy tính bảng phải lớn hơn các biểu tượng tương tự trên điện thoại. Điều này được thực hiện theo hai cách: sử dụng mật độ pixel thấp hơn hoặc kích thước biểu tượng khác nhau.
Mật độ điểm ảnh thấp
Màn hình lớn mà chúng ta nhìn từ xa thường có mật độ điểm ảnh thấp hơn. Một chiếc TV có thể có 40 pixel mỗi inch - và theo quy luật, điều này là đủ. Mật độ điểm ảnh của màn hình Retina trên iPad là khoảng 264 ppi; trên iPhone - 326 ppi. Vì các pixel trên iPad lớn hơn (và ít đậm đặc hơn) nên toàn bộ giao diện sẽ lớn hơn một chút. Điều này là do khoảng cách giữa mắt người dùng và màn hình iPad tăng thêm.
