給不同尺寸的iPhone設計App界面是要怎麼標註？

01-05

是每個尺寸都要做一版還是共用一版然後自動匹配？如果是共用一版的話，裡面的控制項按鈕的間距要怎麼標註呢？

所以說我非常喜歡我們項目現在的做法，設計師給 sketch 文件給我們。

剩下的事情程序猿自己搞定。

對程序猿來說比 PSD 好到不知道哪裡去，甚至比設計師切好圖標註好還要好。

先答你的問題，共用一版。我剛剛寫了篇文章 http://zhuanlan.zhihu.com/hjcapple/20565936，下面是文章的節選

設計尺寸

手機 App 只需要一個設計稿，不需要設計多個。假如平板上的布局跟手機是不一樣的，需要再出一個設計稿。假如是基本一樣的，連平板的設計稿也不需要。比如微信的的 iPhone 版和 iPad 版，流程布局是一致的，其實只需要出一個 iPhone 的設計稿。

設計的時候，選取一個現在最主流，你最容易獲取的設備的尺寸來設計。比如現在 iPhone 最主流是 6 的尺寸，就選擇

375 x 667 點，2x 模式

作為設計尺寸。之後整個設計稿就使用這個尺寸來設計，不要一時一個樣。假如你是個人開發者，身邊只有 5s，就使用 5s 的尺寸來設計。

這樣就可以將設計稿截圖，放到手機中看效果。適配不能直接按比例放大或者縮小，假如你將 iPhone 6s 的設計稿，放到 5s 中看，圖片按比例縮小了，但你看到的並非最終效果。

標註

設計師來標註？

其實我自己覺得讓美術標註，是浪費人力的。只要出個 1x 的預覽圖，再讓程序員裝個馬克鰻、或Pixel Winch、或 PS，就可以讓程序員來測量尺寸了。

但很多程序員都會推卸責任，說標註是美術的事情。

還是需要討論一下如何標註。標註有主要有 3 種，顏色、字體、尺寸。

顏色標註

顏色應該先定義一個色板。比如按照下面方式

其中[顏色色塊]，就是一個小色塊，用來看顏色的預覽。

之後在設計稿的預覽圖中，就可以使用顏色編號來標註。這樣標註比較清晰，一個項目中出現的顏色不會出現太多中，基本不會超過 10 種顏色。這樣也容易跟程序對應起來，程序寫這些界面，也需要定義一個色盤。這種方式也容易切換主題。比如白天模式和夜間模式。

字體標註

字體也應先定義出一個字體的字體盤，比如：

之後在設計稿的預覽圖中，就可以使用字體編號來標註。一個項目的字體也不會出現太多，大概也就 5、6種。這樣也容易跟程序對應起來。

尺寸標註

只需要標註一些不會變化的地方尺寸。比如按鈕大小，邊距、圖標大小等，無論屏幕多大，都是固定不變的。而一些隨著會拉伸的地方，就直接註明會拉伸。間距之類就註明，哪幾個間距是一樣的就行。

有些需要等比例放大或者縮小的，就註明一個比例。

標註就如同程序中的注釋，並非越多越好。假如是可以看預覽圖就明白的，其實是沒有必要做標註的。

設計師直接用skech生成的網頁給開發，裡面都可以看到標註，而且可以自己切圖。很好用

只需要一版標註，圖標按倍率給兩套即可。推薦用6設計用6標註用6切圖，也就是畫布750x1334作稿

確定一張標註就好了，其它的走倍數關係就行，一般標註的都是ipone6的尺寸。

如樓上所說，只需要一個尺寸的標註，攻城獅會自己去適配，不同尺寸的上機效果，不滿意的地方可以再跟攻城獅溝通，再個別調整。

至於要出@1 @2 @3的圖，個人覺得如果用skech,就用物理尺寸的做效果圖。。。因為！skech有個一鍵切圖的tool！！！！識別@1圖！！！