設(shè)計師也應(yīng)該在創(chuàng)新的步伐中溫故知新。 我們上去對iOS、設(shè)計規(guī)范、適配問題做一個全面的回顧和準備。

雙20終于來了。 互聯(lián)網(wǎng)產(chǎn)品對于這個時代來說并不新鮮，互聯(lián)網(wǎng)人也從未停止過對優(yōu)秀產(chǎn)品的探索和創(chuàng)新。 作為一名設(shè)計師，我們應(yīng)該回顧過去，在前進的過程中學習新的東西。 下面我就和大家一起對iOS、設(shè)計規(guī)范、適配問題做一個全面的回顧和準備。

iOS 設(shè)計規(guī)范

蘋果自2007年1月9日發(fā)布Max以來，已經(jīng)經(jīng)歷了十三代產(chǎn)品。19年9月11日推出的11、11Pro和沒有新的規(guī)格，因此設(shè)計師沒有額外的工作量。 還是按照以前的做法：750*（@2x）或（375*667pt，@1x）制作設(shè)計稿，然后提供@2x、@3x切割圖片。

以下是歷年蘋果手機的產(chǎn)品列表（說起你擁有過哪幾代產(chǎn)品，歡迎留言交流）

一代：

第二代：

三代：

四代：4

五代：4s

六代：5

第七代：5s、5c

八代：，加上

九代：6s、

十代：，加

第十一代： 、Plus、X

十二代：XS、XSMax、XR

十三代：、、Max

如何有效記憶iOS設(shè)計規(guī)范，這里我總結(jié)了一個方法“iOS五點兩圖記憶法”，即五點+兩張圖。

1.設(shè)計規(guī)格：@1x（@2x）為基準設(shè)計。

2.設(shè)計工具：Adobe XD，

3.預(yù)覽效果：或

4.圖像剪切輸出：@2x@3x 兩組

5. 標記工具：Blue Lake、

測試你：

1、如何快速做出尺寸的設(shè)計稿？

2.@2倍圖發(fā)展為@3倍圖會有什么后果？

3、為什么要用@1倍圖進行設(shè)計？ （后面還有詳細解答）

4. 文本在上顯示為34px也是34px嗎？

這里我們首先重點了解一下PX和PT這兩個單位，搞清楚為什么UI設(shè)計時建議使用雙像，這樣才能適應(yīng)設(shè)計的變化。 （注：這部分內(nèi)容根據(jù)晶晶老師的總結(jié)優(yōu)化而成。公眾號@靜）

大家可能對PX比較熟悉，它是英文pixel的縮寫。 最簡單的理解就是找一個放大鏡（不是筆記本里的放大鏡，而是真正的放大鏡），然后對準面前的顯示器或者手機屏幕來觀看。 大多數(shù)顯示器在放大鏡下都會出現(xiàn)點。 這就是我們通常所說的像素概念。 在具有化學碼率的顯示器中，垂直分布有1920個點，水平分布有1080個點。 這種點通過顯示器的光學特性為我們組成不同的圖像。

請注意，在不同規(guī)格的顯示器上，此類點的單位面積并不相同。 例如，一臺22英寸1080p液晶顯示器和一臺27英寸1080p液晶顯示器，可以發(fā)現(xiàn)兩臺顯示器的像素分布是27英寸顯示器的顯示效果明顯不如22英寸顯示器。英寸顯示器。 LCD 面板中的“像素”大小各不相同。

可見，像素的單位是相對單位，其寬度或長度不能用分米、毫米等絕對測量單位來判斷，因為1個像素僅代表一個單位的“點”。

另一個重要單位是PT，英文point的縮寫。 這個單位也是iOS開發(fā)過程中使用的單位。 與 px 等相對單位不同，PT（點）是絕對單位。 英文名稱為“磅因子（或Pound）”（1PT=1/72英寸）。

同樣用一個簡單直觀的計數(shù)器例子來演示，拿兩個不同的型號，比如一個ip11和一個Max，打開同一個應(yīng)用程序（比如QQ音樂），準備一把尺子，用尺子檢測最文本規(guī)范上面標題“音樂廳”。 經(jīng)過測試可以發(fā)現(xiàn)，不同型號的“音樂廳”字樣規(guī)格是相同的。 還可以要求iOS開發(fā)者寫兩個適應(yīng)不同規(guī)格型號的相同文件，分別安裝在兩部手機上，以保證這個文件中的字體使用同一個字體大?。?0PT）。 在這兩款手機上運行并用卷尺進行測試，我們發(fā)現(xiàn)它們的化學規(guī)格是相同的。

請記住px是相對單位，pt是絕對單位（類似單位有分米、毫米等）。 在不確定屏幕密度的情況下，px 和 pt 之間沒有可比性。

在開發(fā)工程師眼中，如果使用750px的幀率來繪制圖片，如果在設(shè)計稿中按照原始尺寸標注規(guī)格，那么在開發(fā)環(huán)境中也會轉(zhuǎn)換為兩倍規(guī)格。 例如，如果你將字體大小標記為 40pxsketch安卓圖標模版，那么開發(fā)工程師最終在代碼中寫的就是 20pt，乘以 2。而且，如果你使用雙倍基礎(chǔ)幀率來繪制，那么你就不需要乘以2，所有規(guī)格的開發(fā)工程師都可以直接拿來隨意使用。

作為中國聯(lián)通一款純矢量ui設(shè)計軟件，無論是設(shè)計還是后期與開發(fā)工程師的配合，都嚴格遵循開發(fā)原則。 這些設(shè)計方法可以最大限度地再現(xiàn)設(shè)計稿，還可以減少文件體積和系統(tǒng)資源消耗，無論從哪個角度來看，都是設(shè)計師制作UI界面的明智選擇。

最后，讓我們總結(jié)一下激勵措施。 設(shè)計者采用雙基準規(guī)格來繪制，主要是因為單位換算方便，輸出方便，理解簡單。 對于工程師來說，不再需要進行復(fù)雜的轉(zhuǎn)換，這有助于完美重現(xiàn)設(shè)計稿。

我們繼續(xù)熟悉 iOS 中一些基本的頁面規(guī)范規(guī)定。

1. 引導(dǎo)頁面

引導(dǎo)頁是完整圖片，無法適配，所以需要單獨制作設(shè)計圖。 iOS總共需要提供6套規(guī)范。 事實上，它還支持視頻。 （目前5以下的適配基本被淘汰）

2. 圖標

您可以根據(jù)規(guī)格創(chuàng)建圖標。 然后利用現(xiàn)成的規(guī)范模板資源生成一套完整的規(guī)范并一鍵導(dǎo)入。 （模板鏈接：）

注意：提交給程序員的最終剪切圖是直角、非圓形圖標。

其他設(shè)備圖標規(guī)范

3、狀態(tài)欄和導(dǎo)航欄（具體規(guī)格見圖5.2）

狀態(tài)欄：顯示時間、操作員信息、電池電量等信息區(qū)域。 （短發(fā)區(qū)）

導(dǎo)航欄：狀態(tài)欄下方的區(qū)域，包括頁面標題、功能圖標等信息區(qū)域。

狀態(tài)欄和導(dǎo)航欄通常是集成的。 現(xiàn)在流行大標題導(dǎo)航欄的設(shè)計，即加強導(dǎo)航欄的高度，與頁面內(nèi)容的標題融為一體。 當內(nèi)容向上滑動時，大標題恢復(fù)到正常的導(dǎo)航高度。 （大標題導(dǎo)航欄的高度通常為116pt（232px），其中包括20pt（40px）狀態(tài)欄的高度，還可以容納34pt（68px）大標題和輔助信息（如返回圖標）。

導(dǎo)航欄中的元素必須遵循以下對齊原則：

1. 返回按鈕必須靠右對齊。

2、當前界面的標題必須位于導(dǎo)航欄的中間。 （選修的）

3. 其他控制按鈕必須靠左對齊。

4、標簽欄（具體規(guī)格見圖5.2）

Tab bar：即Tab欄，是頂部的快速入口。 在iOS規(guī)范中，Tab欄通常有五個、四個或三個圖標。 有“純圖標標簽”和“圖標加文字標簽”兩種方式。

5. 上傳頁面

當程序上傳到時，我們需要提供多張App截圖，以便用戶了解App的功能。 這里我們需要提供兩組截圖，1242x和1125x。 還支持視頻模式。 （Momo目前使用了五個靜態(tài)頁面）

莫莫上傳截圖

6. 字體

英文字體：SC，中文字體：、SFUI，其中適合大于19pt的文本，SFUI適合小于20pt的文本。

七、顏色

我們畫圖時屏幕顯示的色域比RGB色域更寬。 因此，網(wǎng)站上可以設(shè)計任何顏色，只要符合產(chǎn)品的能力并在色調(diào)心理學理論的范圍內(nèi)即可。 官方推薦的系統(tǒng)顏色如下：

系統(tǒng)顏色

8. 控制

控件包括：輸入框、按鈕、滑塊、頁卡、開關(guān)等，這些都已經(jīng)在設(shè)計模板中列出了。 （下載地址：）為了讓設(shè)計更加符合整體產(chǎn)品品牌基調(diào)，可以對這種控件進行重新設(shè)計。

但要注意兩點：第一，點擊區(qū)域基本符合44pt（88px）原則，即手機上的尺寸約為7mm-9mm，適合中指點擊。 其次，設(shè)計不同的運行狀態(tài)，而不僅僅是一種狀態(tài)。

默認控制

控件中各處均為 44pt (88px)

之前我們介紹過，人手臂的點擊區(qū)域為7mm-9mm，即@2x下的44pt（88px）。 Apple 的導(dǎo)航欄、列表和工具欄都包含神秘的數(shù)字 44pt (88px)。 我們還確保在設(shè)計時考慮到腳趾點擊區(qū)域。

各處均為 44 磅（88 像素）

九、界面設(shè)計原則

1.行距和寬度（@2x）

在中國聯(lián)通終端頁面的設(shè)計中，頁面中元素的行距和寬度的設(shè)計規(guī)范非常重要。 一個頁面是否美觀、簡潔、通透與行距、間距的設(shè)計規(guī)范密切相關(guān)。

(1)全局行距(iOS13,@2x)

全局行距是指頁面內(nèi)容到屏幕邊緣的距離。 整個應(yīng)用的界面應(yīng)該以此來規(guī)范，以達到頁面整體視覺效果的統(tǒng)一。 在實際應(yīng)用中，應(yīng)根據(jù)不同的產(chǎn)品知識采用不同的行距，使行距成為界面的一種設(shè)計語言。 全局行距的設(shè)置可以更好的引導(dǎo)用戶垂直向上閱讀。 也沒有行距，一般用在卡片布局中，用來顯示圖片橫幅。 這些圖片橫幅顯示的設(shè)置方法使用戶更容易關(guān)注每張圖片和文字本身的內(nèi)容。

iOS原生頁面“設(shè)置”和“常規(guī)”的行距均為40px。 (@2x)

陌陌和支付寶的行距都是32px。 (@2x)

(2)卡片寬度

卡片式布局是中國聯(lián)通頁面設(shè)計中非常常見的布局形式。 至于卡之間的距離，需要根據(jù)界面的風格以及卡所承載的信息量來劃分。 一般最小不高于16px，太小了。 寬度會讓用戶緊張。 最常用的寬度是 20px、24px、30px、40px。 事實上，寬度不宜太大。 寬度太大會使接口看起來松散。 寬度的顏色設(shè)置可以和分割線一致，也可以多變。 較淺。

以iOS（750*）為例，設(shè)置頁卡寬度為70px，通知中心承載的信息較多，所以采用較小的16px作為卡寬度。

總結(jié)：卡片寬度的設(shè)置靈活多變。 必須根據(jù)產(chǎn)品的智力和實際需要來設(shè)置。 通常，您可以多截圖來查看各個應(yīng)用程序的卡片寬度是如何設(shè)置的。 卡片寬度的設(shè)置自然會變得更加合理和得心應(yīng)手。

(3)內(nèi)容寬度

一個APP不僅有各種欄（狀態(tài)欄、導(dǎo)航欄、標簽欄、工具欄）和控制圖標，還有內(nèi)容。 有多種方式來布置內(nèi)容。 我們不會在這里解釋內(nèi)容應(yīng)該如何布局。 先說一下內(nèi)容的寬度設(shè)置。

格式塔接近原則：

各個元素之間的相對距離會影響我們的感知，彼此靠近的元素似乎屬于一個組，而相距較遠的元素則在組外手動定義。 看右圖，左圖中的圓圈在水平方向上的距離比垂直方向上的距離更近。 這樣，我們看到的是4行點，而下圖看到的是4列。

UI設(shè)計中布局內(nèi)容時，一定要注意鄰接原則的應(yīng)用

2. 內(nèi)容布局

APP設(shè)計中內(nèi)容布局的方式有很多種。 這里介紹兩種最常用的布局方式，列表布局和卡片布局。

(1) 列表布局

列表式布局非常常見。 當你隨意打開一個app時，這種布局基本??上是存在的。 特點在于能否在較小的屏幕上顯示多條信息，并且用戶可以通過上下滑動的手勢獲得大量的信息反饋。 這也是一個特別容易理解的演示。

(2)卡片布局

這些布局方式都比較靈活。 其特點是每張卡片的內(nèi)容和方法相互獨立，互不干擾，因此不同的卡片可以出現(xiàn)在同一頁面上，承載不同的內(nèi)容。 卡片式布局比較新潮前衛(wèi)，在很多toC產(chǎn)品中經(jīng)常使用。 另外，雙欄卡片的布局也常見于以圖片信息為主的App中，比如一些商城的商品展示頁面。 這些方法可以在一個屏幕上顯示更多內(nèi)容（至少4張卡）。 同時，由于左右欄的顯示是分開的，用戶可以更方便地比較左右欄的卡片內(nèi)容。

3.界面圖片設(shè)計比例

在UI設(shè)計中，圖片的大小和比例沒有嚴格的標準。 設(shè)計師往往根據(jù)經(jīng)驗和感覺來設(shè)定好看的尺寸，但其實我們是有規(guī)則可循的。 通過科學的手段設(shè)置畫面規(guī)格，可以獲得最優(yōu)的解決方案。 常見的畫面規(guī)格有16:9、4:3、3:2、1:1和1:0.618（黃金比例）。

4. APP布局設(shè)計規(guī)范

布局設(shè)計也稱為布局編輯，即在有限的布局空間內(nèi)，將布局的組成部分（文本、圖片、控件）按照特定的內(nèi)容進行組合和排列。 優(yōu)秀的排版應(yīng)該考慮到用戶的閱讀習慣和設(shè)計美學。 UI設(shè)計中布局設(shè)計的基本原則有哪些？

(1)對齊

對齊是整個布局設(shè)計中最基本、最重要的原則之一。 它可以構(gòu)建整齊、規(guī)則的形狀，為用戶帶來有序、一致的瀏覽體驗。

(2) 對稱性

對稱是對立統(tǒng)一規(guī)律的本質(zhì)屬性，呈現(xiàn)出和諧、自然的美。 在應(yīng)用界面的設(shè)計中，引導(dǎo)頁、注冊登錄輸入框和按鈕的設(shè)計都是對稱設(shè)計。

(3)分組

物以類聚，物以類聚。 分組是將同一類別的信息組合起來，直觀地呈現(xiàn)在用戶面前。 這樣的設(shè)計可以減輕用戶的認知負擔。 中國聯(lián)通終端界面設(shè)計中最常見的分組方式是卡片，它為用戶提供集中、清晰的瀏覽體驗。

10.剪切圖像命名約定

最后，剪切出來的圖片需要以標準化的格式命名，方便程序員查找。 建議剪切圖片的命名格式全部為中文。 如果你的中文不好，你需要想辦法提高一點簡單的詞匯量。 使用上述工具剪切圖像后，需要整理剪切圖像的名稱，也可以在剪切圖像之前命名視口。 以下是圖像裁剪元素的中英文對比：

剪切圖像命名對照表

之后，我們需要根據(jù)“tatus@”命名每個切片。 比如我們的導(dǎo)航欄上有一個搜索圖標，那么它的名字就是：

aault@2x.png

(@2x.png)

設(shè)計規(guī)范

然后，上去看看設(shè)計規(guī)范。 這里只是總結(jié)了規(guī)范中的一些關(guān)鍵信息。 更詳細的信息就不過多說了。 網(wǎng)上已經(jīng)有很多大鱷制作了這樣的文章，大家可以自己搜索一下。

1. 開發(fā)單位有DP和SP

DP：特有的寬度單位。

以屏幕為標志，則1DP=1PX

估算公式：/160=px

舉例：以()為例，/160=2px

SP： 特定的字體單元。

以屏幕為標志，則1SP=1PX

估算公式：/160=px

舉例：以()為例，/160=2px

2、設(shè)計規(guī)范：作為設(shè)計稿的標準規(guī)范

1、從中間規(guī)格向下適配，接口調(diào)節(jié)范圍最小，適配最方便。

2、大屏時代，仍然采用小規(guī)格作為設(shè)計規(guī)格，這會限制設(shè)計師的設(shè)計視角。

3、采用主流規(guī)范制作設(shè)計稿規(guī)范，大大提高了視覺還原和其他模型適配。

3. 圖標規(guī)范

4.安卓字體

英語： /

英語：

尺寸：主題文字36-34px 正文文字28-26px 提示文字24-22px

五、切割規(guī)格

1、切割規(guī)格必須單一

2、單像素圖像邊緣會模糊

一般情況下，我們只需要提供3套圖片裁剪資源就可以滿足工程師的適配，即HDPI、XHDPI，以及3套圖片裁剪資源。

iOS的設(shè)計稿如何適配

現(xiàn)在大部分公司受限于人力物力，無法實現(xiàn)iOS和的全部設(shè)計稿，所以存在一稿兩用的情況； 設(shè)計師利用iOS版的設(shè)計稿來適配，下面我們來看一組有趣的物理轉(zhuǎn)換問題：

1080/1.5=720、720/1.5=480、1242*2208/1.15=1080*1920，也就是說1242*2208（iOS@3倍規(guī)格）和1080*1920（規(guī)格）可以等比例縮放區(qū)別，因此iOS和1242*的規(guī)范是可以共享的。 因此，可以采用iOS設(shè)計規(guī)范進行設(shè)計。 （前提是一定要和工程師溝通清楚）

另一種方法是將750×比例調(diào)整為 1080×，對各個控件進行微調(diào)，并重新提供指示（以dp表示）。 也就是說，需要提供兩組指示，一組用于iOS，一組用于iOS。

iOS開發(fā)語言

作為一名iOS開發(fā)工程師，最重要的三個工具是：C、Swift、UIKit框架。 -C是目前效率最高的語言； 而且Swift開發(fā)效率非常高。 通常iOS工程師會選擇這兩種語言中的一種作為開發(fā)工具。 UIKit是Apple系統(tǒng)自帶的一套框架。 在此框架中，有用于設(shè)置按鈕、滑塊、狀態(tài)欄、電池電源和鍵盤的套接字。 所以我們看到在很多第三方app的界面中sketch安卓圖標模版，有很多和蘋果自己的程序一致的控件，這就是UIKit的功勞。

iOS開發(fā)中的單位是pt

750×1334規(guī)格的轉(zhuǎn)換關(guān)系是1pt=2px，也就是說程序員收到我們標注的px單位草稿減去2就得到pt。 （這就是為什么建議設(shè)計師使用@1倍圖來制作設(shè)計稿）

如有侵權(quán)請聯(lián)系刪除！