1. 程式人生 > >關於UI介面每個介面尺寸適配的問題

關於UI介面每個介面尺寸適配的問題

介面名字

每個介面需定出一個字首。比如主頁,字首是 home,設定字首為 settings,課程表是 lesson。

定好字首之後。設計師就可以建立資料夾:


主頁(home)
設定(settings)
課程表(lesson)
課程概述(overview)
共用(shared)

之後將素材放到對應的資料夾下,這樣就容易找了。假如很多介面都用到的素材,比如一些按鈕之類,就放到shared目錄下。

設計師的英文似乎不是很好,他們的喜歡用中文命名,但是程式需要使用英文。假如一開始不約定好,程式設計師需要使用素材的時候,就很難跟設計師取的名字對應起來,往往會不知道素材放到什麼地方。

素材名字

最終的素材名字,只使用小寫字母和數字,單詞的分隔用中劃線 - 分隔起來,不同介面的素材前面加上對應介面的字首。比如


home-background.png
settings-icon-email.png
settings-icon-help.png
shared-button-0.png

名字使用對應的介面字首,是為了知道素材原始出處。這樣有問題了,可以找到原始檔案重新匯出。也避免了名字衝突。

只使用字母和數字,中劃線,是為避免出現中文、空格、標點、斜槓等特殊字元。在不同的系統上,字元編碼會有所不同,而一些特殊字元會有特別的含義。中文或者特殊字元容易出些古怪問題。比如程式設計師寫個指令碼去統一拷貝、處理素材,中文或特殊字元就特別容易出問題。

只使用小寫字母,是為避免寫錯大小寫。比如 Mac 系統,預設情況下對於大小寫是不區別的,假如圖片


home-background.png

錯寫成


home-Background.png

在模擬器中顯示是沒有問題的。而真機中名字是區分大小寫的,這樣模擬器跟真機的行為就不對應了。全部使用小寫字母就直接杜絕了這問題。

使用中劃線 - 而不使用下劃線 _ 分隔。是為了將來更好地搜尋查詢。工程中的程式變數的名字,不會出現中劃線,只會使用下劃線。當素材名字使用中劃線,就可以跟程式變數名字區別開來,以後在工程中就容易搜尋。

這些名字規範,看起來簡單,但可以杜絕很多問題。專案中,素材名字應該是設計師匯出的時候就取好了,這樣一旦需要修改,直接複製過來就行了。但現實中,我發覺設計師往往不會注意這些,經常需要程式設計師重新命名。這樣修改起來就多了一個步驟。

尺寸單位

設計師往往使用畫素作為設計單位,但是對於 iOS 來說。使用畫素來思考是不好的,應該使用點(point)來思考。點和畫素的區別,參考我的舊文。

比如

  • iPhone 6,尺寸為 375 x 667 個點,2x 模式。
  • iPhone 6 Plus,尺寸為 414 × 736,3x 模式。
  • iPad,尺寸為 1024 × 768,有 1x 和 2x 模式。

使用點為單位,容易跟程式對應起來。並且每個 iOS 裝置,相同的點數,物理上的長度是差不多的。44個點,就是手機上導航欄,工具欄的高度,這樣的思考方式可以大致估計到真實的物理長度。而用畫素,容易使得做出的圖片過大或者過小。

當使用非向量圖片時,將點數乘以對應的 x 模式,就等於需要做的畫素大小。

當向量工具來做素材的時候,應該直接做點那個尺寸。比如44 x 66 個點的按鈕。就建立一個44 x 66的場景。之後再匯出成 2 倍圖,3 倍圖,或者直接匯出成 svg 的向量圖片。

最終標註設計稿的時候,也使用點作為單位來標註。其實標註的時候,只要匯出一個 1x 的預覽圖,就可以用工具來標註了。當 1x 的時候,點和畫素就是直接對應的。

設計尺寸

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

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


375 x 667 點,2x 模式

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

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

標註

設計師來標註?

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

但很多程式設計師都會推卸責任,說標註是美術的事情。

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

顏色標註

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

  1. [顏色色塊] #bcbcbc。用於文字。
  2. [顏色色塊] #ff8c0f。主色調,橙色。
  3. [顏色色塊] #dddddd。主要用於列表項的分隔線顏色。

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

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

字型標註

字型也應先定義出一個字型的字型盤,比如:

  1. 系統字型,14號。主要用於文字的內容。
  2. 系統字型,18號。用於文字的標題。
  3. 等寬字型,14號。用於顯示時間。

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

尺寸標註

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

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

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

最後

設計圖只是參考,最終以跑到機子上的效果為準。設定規則的時候,需要大家一起參與制定,共同遵守,並解釋好為什麼需要這樣做。

其實我清楚,現實中的專案,是不會這樣理想的。往往會相互扯皮,推卸責任。一個專案,需要一個瞭解設計和程式兩方面的強有力的人來協調,並在有糾紛的時候可一錘定音。這個人就是所謂的產品經理。

但現實中的產品經理往往是不瞭解設計,也不瞭解程式,並沒有決策權,這種所謂的產品經理光有個名字,其實是沒有什麼用處的。而有了決策權之後,也需要承擔義務,當決策錯了的時候,最大的責任就在產品經理。而錯的次數多了,這個產品經理就不能讓人信服,也基本無什麼用處了。