iOS Human Interface Guidelines 閱讀心得

iOS has matured a lot over the years. In its 9th upgrade, Apple introduced a new system font called San Francisco, 3D Touch and multi-tasking on the iPad. In Xcode, you’ll find Stack Views, a fantastic tool for making your layouts more adaptive without the complexity of Auto Layout. More than ever, Apple encourages adaptive layouts so that your design works across multiple devices.

在這第九次ios更新中,Apple新增了新的字體叫San Francisco 及新功能3D Touch跟多工任務

Developers work with point values, so it is important to understand the difference with pixels. When the iPhone was first introduced, the two units were the same: 1pt equals 1px. Then when retina screens came along, 1pt became 2px. So think of points as the values in the original iPhone, and pixels as the real values depending on the pixel density

一開始iphone被製造的時候 1pt=1px 後來retina出來的時候1pt=2px


(iPhone 4,5,6 = 2x, iPhone 7 Plus = 3x) 這使得設計app排版變得方便

//Auto Layout

The iPhone has 4 main resolutions: 320 x 480 pt (iPhone 4), 320 x 568 pt (iPhone 5), 375 x 667 pt (iPhone 7) and 414 x 736 pt (iPhone 7 Plus). The layout doesn’t scale but expands based on the resolution. For example, the Navigation Bar only adjusts the width but keeps the same height. Elements inside it remain intact.

雖然iphone有四種不同的尺寸 但是他們的layout不會等比例放大縮小 例如navigation bar只會調整寬度而高度不變

App Icon

@1x assets are no longer supported for the iPhone, so you don’t need to generate them. App icons have 2 resolutions now: @2x and @3x. There are 3 types: App Icon, Spotlight and Settings. For the iPad, @1x and @2x are used.

iphone現在只需要@2x跟@3x 是為了app icon 搜尋功能和 設定的圖片


而icon設計 apple也提供所謂的icon設計的黃金比例 而要不要依據此概念設計 見人見智

而最為重要的概念我覺得還是auto layout 畢竟是為了設計不同尺寸的ios所發明的 點跟像素的概念也很有趣

而所提到的down sampling其實就是手機像素只能到1920*1080 而以點來看的話 6 7 plus 的點是414*736 如果按照3倍乘的話會超過1920*1080 所以down sampling 來支援1920*1080 這是我看完之後的看法

之前也有看到所謂其實IMAC能支援到8k的文章出現 讓我猜測可能跟這個技術也有關係