Auto layout app IOS

Làm hình to lên, đến lúc code họ set kích thước theo % là được.

nếu cắt icon ra để bên code làm, thì cũng phải cất theo hình phóng to vậy ak? coids

theo mình biết thì trừ phi tỉ lệ màn hình tương đồng thì khi co giãn %, layout mới không bị ảnh hưởng ( như iphone 6 plus, 6, 5 và 5S tương đồng). Chứ độ phân giải và tỉ lệ khác nhau như giữa 5 và 4 thì chắc bạn phải dàn layout thêm 1 lần nữa rồi.

Build app cho kích thước màn hình lớn nhất bạn nhé ip6 Plus.

ip2,3,3s : 320x480 - Cắt image để ghép app đặt tên như bình thường VD: demo.png


ip4,4s : 640x960 (gấp 2 lần ip3)
ip5,5s : 640x1136 (kích thước các thành phần bằng ip4)
ip6 : 750x1134 (giống ip4,4s - 5,5s)

3 loại này thì kích thước màn hình khác nhau một chút nhưng các thành phần bên trong đều bằng nhau - Cắt image để ghép app đặt tên thêm đuôi @2x phía sau tên VD: demo@2x.png


ip6 plus : 1080x1920 (Thực ra đây chỉ là physical pixel display) thực tế Resolution của nó là 1242x2208.

Riêng ip6 plus - Cắt image để ghép app đặt tên thêm đuôi @3x phía sau tên VD: demo@3x.png


@3x gấp 1,5 lần @2x . Và @2x Gấp 2 lần với 1x.

Nghĩa là nếu bạn có 1 icon với kích thước @3x là 75x75 thì ở @2x nó sẽ có kích thước là 50x50 và 1x là 25x25.

@ Hoàng đăng minh trí: Về cơ bản như iViperious nói, chưa cần biết kích thước màn hình như thế nào, nhưng nguyên tắc là trước tiên bạn phải thiết kế icon cho thiết bị có màn hình to nhất. Sau đó với các thiết bị nhỏ hơn thì sẽ bóp bé dần vào theo cách dàn layout và kích cỡ màn hình. Mình làm chủ yếu về mảng web & web mobile nên cũng chỉ có thể nói sơ sơ về nguyên lý, còn chi tiết thì bạn cứ inbox hỏi iViperious, thấy bác này nhiều kinh nghiệm về mảng app.

THực ra mình thấy thiết kế ở độ phân giải cao cũng chưa phải là 1 giải pháp tốt nhất, giải pháp tốt nhất là bạn hãy thiết kế đúng với màn hình điện thoại mà bạn đang sở hữu, khi làm việc bạn test được trên máy trực quan, giúp bạn định hình được ứng dụng, tránh chi tiết bị nhỏ quá or to quá làm khó người dùng

Về việc thiết kế cho cả iphone4, 5, 6, 6+ thực chất là như iViperious nói, đó là việc bạn cắt các chi tiết để đưa cho lập trình normal.png, normal@2x.png, normal@3x.png ( nếu tính cả android thì khá nhiều nữa ), bạn chỉ cần chú ý mọi đối tượng phải là SMART OBJECT or SHAPE OBJECT thì mới nhàn về sau được, resize ko bị vỡ, co kéo thoải mái, tránh trường hợp bạn scale phù hợp vs màn 640x1136 nhưng khi bạn tăng kích thước lên thì bị vỡ hết ( đa phần ai mới làm cũng đều bị vấn đề này)

Hiện có rất nhiều action, extension cho phép thực hiện việc cắt ra các thành phần phù hợp cho từng loại màn hình ( bạn google rất nhiều ví dụ retinize.it, cutandslice...) nhưng bạn nên tự làm 1 thời gian rồi hãy dùng , để có thể hiểu sâu về nó, tránh sai sót ở mức thấp nhất

Chúc bạn thành công

coids: Thanks bác đã tín nhiệm trước mình làm Mobile nhiều từ 2010 tới giờ và giờ vẫn làm nhưng hiện tại đa phần dự án mình làm là WebDesign (cả webapp và responsive).

zuongvan: Bác nói thế chưa hợp lí lắm mình bổ sung thêm chút nữa. Khi thiết kế cho Mobile chưa bao giờ mình phải dàn lại toàn bộ giao diện sang màn hình khác cả ví dụ ip4,4 với 5,5s kể cả 6 Dùng chung 1 bản Design cho ip6 được bạn nhé! chỉ cần chú ý Background của app nếu để màu thì không cần còn nếu có hoa văn hoạ tiết thì bạn nên cắt riêng theo từng kích thước màn hình để tránh việc bị bóp méo. Thêm nữa SmartObject chỉ có tác dụng khi kích thước ban đầu của smartObject đó lớn hoặc trừ khi SmartObject đó là SHAPE còn nếu đơn thuần dùng 1 bức ảnh (png, jpg ...) kích thước ví dụ là 500x500 khi bạn chuyển thành SmartObject và có ý định kéo lên 1000x1000 vẫn sẽ vỡ như thường bạn nhé!

Hoàng đăng minh trí : Khi thiết kế mobile, các thành phần (trừ các phần bạn dùng ảnh ra) thì tất cả cố gắng dùng SHAPE nhé. để nếu lỡ như bạn cần Scale sang màn hình kích thước lớn hơn thì không bị vỡ hình.

he , mình ví dụ thôi , và theo kinh nghiệm m từng làm ^^, về Smartobject thì m thấy khá nhiều anh e ko sử dụng, toàn scale to nhỏ rồi bị vỡ lại phải đi search lại hình ảnh , nếu như mấy năm trước khi mà tabbar vẫn còn thịnh hành, thiết kế cho dòng java vẫn còn nhiều, thì vẫn phải dịch dịch giữa các màn hình mà bác

Mà thường vụ Splash screen bác thường xử lý ntn vậy ^^, resize hay là có cách nào hay ko bác, chỉ cho mọi người vs

Mỗi người học 1 tý, học dần học dần ^^

zuongvan: riêng Splash Screen thì mỗi màn hình một ảnh cho chuẩn bác ah )) cắt cho iOS quá là nhàn luôn android mới mệt. nó có tỉ lệ cả đấy nhưng không chuẩn lắm!

thanks bác iViperious đã share kiến thức bổ ích, trước giờ cứ ù ù cạc cạc. Cho mình hỏi thêm 1 chút là như bác bảo màn hình ip 4,5 và 6 đều dùng chung được 1 layout, nhưng tỉ lệ chiều ngang và dọc giữa 4 khác với 5,6 mà, nếu scale từ ip 6 xuống thì ip4 có bị thiếu phần dưới không?

Vô Danh Vô Thực Bạn cần hiểu rõ kích thước màn hình và kích thước các thành phần trong màn hình khác nhau nhé kích thước màn hình có thể lớn hơn một chút nhưng kích thước các thành phần vẫn giữ nguyên nhé .

Ví dụ :

ip4 : 640x960
ip5 : 640x1136

Chỉ khác nhau cái Background ở ip5 dài hơn ip4 thôi nhé! tương tự ip6 màn hình lớn hơn không đáng kể nên vẫn sử dụng chung source được nhé!

iViperious vậy là các thành phần như button thì vẫn giữ nguyên kích thước, còn các hình ảnh thì vẫn phải cân nhắc size dọc chứ bác. Ví dụ như khi làm app game, background và các nút tương tác trực tiếp trên background vẫn cần canh theo màn hình ip4 chứ?

Vô Danh Vô Thực đúng rồi bác ah. trừ cái background ra thì còn lại có thể dùng chung với nhau được hết. riêng về làm Game thường sẽ dựa theo tỉ lệ màn hình để các thành phần co dãn theo tỉ lệ . Game thì chỉ lần làm Size lớn nhất thôi sau đó coder sẽ tự căn theo tỉ lệ màn hình dĩ nhiên bác phải ngồi cạnh để đối chiếu cho hợp lý.

iViperious em đã thông rồi cám ơn bác

@Hoàng đăng minh trí : cũng conf tuỳ vào font chữ bạn ah. thường làm button cho mobile với mnaf hình cỡ 640x1136 thì padding top and bottom của mình là 32pxpx font chữ của button là 30px.

Facebook mình bị block like comment với messenger nên không rep bạn trên đó được (đù mẹ cái bọn facebook chả làm gì cũng block đc )

dạ, vậy là mình làm từ kích thước lớn nhất từng icon trong layout, rồi resize lại kích thước cho từng loại khác, vậy thì VD: icon vs @x3 là 96, rồi làm @x2 là 64, @1x là 32. Chia ra từng folder 1x, 2x,3x. là có thể đưa cho bên code nó làm được rồi phải ko bác iViperious , em mới tập tềnh làm nên hơi chậm hiểu tẹo hehe
mà bác có skyper ko? cho em xin vs, nói chuyện qua face em cũng ko thích cho lắm!
- Bữa giờ đang bận chuyện cá nhân nên không onl thường xuyên trên forum được, cảm ơn vì những lời góp ý của các bác, em xin cảm ơn ạ

thực ra bạn không cần Chia Folder ra như thế kia vì khi Code coder chỉ để duy nhất 1 Folder là images. Mà lưu ý là không có @1x nhé )) mình nói thế lấy vị dụ thôi: cắt 1 icon chỉ cần đặt tên như vậy thôi :

demo.png - demo@2x.png - demo@3x.png

Coder khi làm giao diện chỉ cần gõ "demo.png" thôi còn đuôi @2x vs @3x các thiết bị sẽ tự nhận . tức là nếu ứng dụng chạy trên ip4,5,6 thì nó sẽ lấy file demo@2x ra để hiển thị. còn 6+ sẽ lấy @3x ra để hiển thị nếu không có 2 đuôi này thì trên tất cả các thiết bị sẽ lấy default là demo.png.

bạn post Skype lên đi mình add bạn

oke, cảm ơn bạn nhiều
sky: minhtri7592 (Hoang Dang Minh Tri) có cái ảnhđại diện, anh chàng đẹp trai đeo kính nghe

Mình thì làm bên thiết kế/vẽ cho game nên cũng chia sẻ chút kinh nghiệm như sau:
- Thiết kế cho màn hình to nhất ví dụ 1800 x 2880. Background của màn hình chơi sẽ nằm trong kích cỡ này.
- Trên màn hình này có một khung an toàn, ví dụ là 1600 x 2560. Tất cả những thứ mà người chơi nhìn thấy, chạm được, nghịch được, biểu thị thông tin hay gì đó đều nằm trong khung này.
- Trong khi làm như lâu lâu save hình và tống lên một cái thiết bị nhỏ gọn cầm tay như điện thoại để xem trên màn hình bé nó hiển thị có dễ nhìn không. Cái này thơi gian đầu bạn hay bị làm bé hoặc to quá so với màn hình bé. Lâu dần tự bạn sẽ biết kích cỡ thế nào là vừa.
- Được cái các anh code nhà tớ cầm file psd của tớ và tự xuất ảnh ra. Tớ có lần phải nhắc là ko đc phóng to quá, mà có thu nhỏ thì phải group một item lại - chẳng là file thiết kế của tớ chia nhỏ từng layer luôn để tiện sửa màu.
--> Để code xuất ảnh rất tiện, khi làm bạn xếp các item vô các group theo thể loại cụ thể. Họ sẽ viết được script tự động xuất ảnh nếu bạn đặt tên các nhóm item một cách cụ thể và khoa học.
Ví dụ: tớ làm đến phần UI của Ingame, trong file pts của tớ sẽ có các nhóm lớn: Background, UI, Item. Trong nhóm UI sẽ có nhóm Button Normal, Button Active. Trong nhóm Button Normal sẽ có nhóm Play Button, nhóm Sound Button, nhóm Music Button... Thì code sẽ tự nhận diện ra xuất ảnh trên nhóm nhỏ nhất. Sau đó họ có 1 cái file gọi là sprite sheet...
--> Bên công ty cũ thì bọn tớ phải xếp lại theo từng loại màn hình và tự xuất ảnh ra, mệt vãi.
...
Tóm lại làm thế nào để vứt được file pts hay ai cho các bạn code muốn làm sao ra app hay game được thì là tốt nhất, không thì ngồi cắt ảnh hơi mệt.
...
Không biết thiết kế game với app có giống nhau ko, vài game đơn giản như app vậy.