學(xué)平面設(shè)計和UI設(shè)計哪個前景更好？

一、什么是平面設(shè)計？

平面設(shè)計涵蓋的面是十分廣泛的，通常指的是以傳達(dá)信息為主的視覺設(shè)計，一般承載物 為紙張，平面設(shè)計主要目的是信息傳達(dá)，基本不會和用戶有任何交互。作為平面設(shè)計師，你需要熟練掌握photoshop、Coreldraw、Illustrator這三個 軟件，這些都是你順利進(jìn)行設(shè)計的基礎(chǔ)。

二、什么是UI設(shè)計？

是指對軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計。好的UI設(shè)計不僅是讓軟件變 得有個性有品位，還要讓軟件的操作變得舒適簡單、自由，充分體現(xiàn)軟件的定位和特點。相較于平面設(shè)計，它是一個更新的概念，是剛剛在全球軟件業(yè) 興起的，屬于高薪技術(shù)設(shè)計產(chǎn)業(yè)。

兩者之間的關(guān)系：在上述概念之下，UI設(shè)計是比平面設(shè)計要復(fù)雜得多的，可以說平面設(shè) 計其實就是UI設(shè)計的基礎(chǔ)之一。也就是說，平面設(shè)計師所具備的技能，一名UI設(shè)計師也會具備，除非是一些分工非常明確的公司，不然，UI設(shè)計師在日 常的工作中也需要接手做一些平面設(shè)計的工作。

三、就業(yè)前景：

1、平面設(shè)計：相關(guān)數(shù)據(jù)顯示，截止2016年，中國設(shè)計師人數(shù)大概1700萬，其中平面設(shè) 計師約200萬。近年來，藝校畢業(yè)生迅猛增加，有大批藝術(shù)畢業(yè)生涌進(jìn)了設(shè)計行業(yè)，水平參差不齊的平面設(shè)計師，一個個擠破腦袋競爭同一個崗位。

拿廣州來說，大約有3萬個設(shè)計師，其中平面設(shè)計師約有1萬人，這就造成了一個問題， 平面設(shè)計行業(yè)的崗位供不應(yīng)求，設(shè)計公司開出的工資也大不如前。

2、UI設(shè)計：近幾年，隨著互聯(lián)網(wǎng)技術(shù)的快速發(fā)展，UI設(shè)計師的就業(yè)前景一片大好，比 平面設(shè)計師要更加吃香。加上UI設(shè)計行業(yè)才在全球軟件業(yè)興起沒多久，專業(yè)人才稀缺，人才資源爭奪激烈。

目前，一般只有大公司才會聘請UI設(shè)計師，可見，UI設(shè)計師的收入非常可觀。據(jù)小編了 解，一個優(yōu)秀的UI設(shè)計師，月薪達(dá)到萬元以上是很常見的事情。

春華教育

從產(chǎn)品包裝、平面廣告、宣傳手冊、各類標(biāo)識、企業(yè)識別、書籍雜志到互聯(lián)網(wǎng)，平面設(shè)計是一門涵蓋面廣、靈活性強(qiáng)的專業(yè)，為你提供無限可能性。

在學(xué)習(xí)平面設(shè)計，你將先掌握必備的理論基礎(chǔ)和實踐技能，在擁有自信和掌握核心專業(yè)技能后，你將接著探索平面設(shè)計的不同領(lǐng)域，包括企業(yè)識別、平面廣告、編輯設(shè)計、包裝設(shè)計和網(wǎng)頁設(shè)計。你還會學(xué)習(xí)一系列實用的技能和知識，如數(shù)碼制圖、多媒體和平面設(shè)計史等，同時還將學(xué)習(xí)攝影和**新版本的專業(yè)軟件，以及視覺傳播語言等相關(guān)技術(shù)，并深刻理解設(shè)計學(xué)在歷史和社會中的作用。**學(xué)習(xí)多樣化的知識，當(dāng)你畢業(yè)時，能夠設(shè)計出極具個人風(fēng)格的創(chuàng)造性解決方案。

平面設(shè)計綜合課程

學(xué)習(xí)形式：業(yè)余晚班或周末班學(xué)習(xí)3個月左右。

課程名稱		課程內(nèi)容
設(shè)計美術(shù)
素描		以結(jié)構(gòu)素描為主，學(xué)習(xí)單色明暗關(guān)系的原理： 1、石膏幾何體課，主要學(xué)習(xí)透視、基本結(jié)構(gòu)及明暗關(guān)系、基本構(gòu)圖法、物件組合關(guān)系； 2、靜物寫生課，學(xué)習(xí)靜物結(jié)構(gòu)及組合。
速寫		學(xué)習(xí)速寫概念及技法： 1、靜物速寫課，學(xué)習(xí)快速造型； 2、風(fēng)景寫生課，學(xué)習(xí)快速空間構(gòu)圖法、輔導(dǎo)完成課外風(fēng)景作業(yè)。
色彩		水粉靜物寫生、色彩基本原理： 1、基本色彩原理課，學(xué)習(xí)色彩的來源、色溫、色彩關(guān)系等； 2、靜物（水果、蔬菜等）寫生課，學(xué)習(xí)物件組合之間的色彩關(guān)系。
三大構(gòu)成、 圖案		1、平面構(gòu)成課， 學(xué)習(xí)平面構(gòu)成元素、關(guān)系元素、構(gòu)成框架； 2、色彩構(gòu)成課，學(xué)習(xí)色彩的性質(zhì)、色彩的混合、色彩與心理、色彩對比； 3、立體構(gòu)成課，學(xué)習(xí)立體形態(tài)概況、立體形態(tài)基本元素、立體形態(tài)材料構(gòu)造、立體形態(tài)形式感 覺、立體形態(tài)綜合造型、立體形態(tài)作品賞析。
電腦制作
電腦制作知 識入門		1、正確在電腦建立文件夾、文件； 2、認(rèn)識各種常用的文件格式及輸出文件格式、輸出色彩模式； 3、電腦周邊設(shè)備使用。
Photoshop		1、講解photoshop基礎(chǔ)； 2、常用工具及色彩工具的使用、文字編輯； 3、路徑、渲染、圖層、色彩調(diào)整及圖像模式； 4、圖層風(fēng)格、圖層蒙板、通道及路徑； 5、濾鏡使用、圖像合成、動作及批處理應(yīng)用； 6、PHOTOSHOP綜合實例講解。
Illustrator		1、講解Illustrator基礎(chǔ)； 2、矢量概念、學(xué)習(xí)工具應(yīng)用、創(chuàng)建與編輯圖形； 3、文字設(shè)計、插畫繪制技法； 4、產(chǎn)品包裝、WEB網(wǎng)頁圖形、LOGO、文字處理； 5、濾鏡、效果及樣式； 6、海報設(shè)計、DM設(shè)計、包裝設(shè)計； 7、卡通造型設(shè)計、文字排版及圖表處理； 8、Illustrator綜合實例講解。
CoreIDRAW		1、講解CORELDRAW基礎(chǔ)； 2、文件基本操作、圖形繪制（卡通、漫畫等）； 3、對象造型編輯（變形、組合、分解等）； 4、排版、VI視覺識別、LOGO、名片、卡片類圖形制作； 5、條形碼、圖形多頁面控制、圖形特效； 6、CORELDRAW綜合實例講解。
Indesign		1、熟悉界面及基本操作、編排InDesign的文本； 2、設(shè)置頁面、設(shè)置文字、使用表格； 3、繪圖工具、使用透明\使用顏色； 4、書、目錄和索引、打印出版文件。
相關(guān)軟件介 紹		FreeHand\Acrobat
基礎(chǔ)設(shè)計		常用設(shè)計原理及設(shè)計知識：標(biāo)志設(shè)計、包裝設(shè)計、海報設(shè)計、VI設(shè)計、版式設(shè)計。

如何適配iPhone X？來看滴滴出行的實戰(zhàn)案例復(fù)盤！

---

張瑨：iPhone X 上市已經(jīng)有一段時間了，不知道使用 iPhone X 的小伙伴是否已經(jīng)習(xí)慣了 iOS 11 操作系統(tǒng)和 iPhone X 手機(jī)特有的操作體驗。

滴滴出行在 iPhone X 發(fā)售前就針對其操作特性進(jìn)行了界面適配，保障了 iPhone X 用戶的全面屏操作?，F(xiàn)在 iPhone X 的適配結(jié)果已經(jīng)得到了良好的用戶反饋，由此我們梳理了移動端界面 iPhone X 的適配方案，并從整個適配過程中探索到萬變不離其宗的適配方法，為后續(xù)不斷更新的多尺寸屏幕提供更好更快的適配思路。

整篇文章分四個章節(jié)

• iPhone X 系統(tǒng)特性
• 界面常用元素適配方案
• 「去邊界化」設(shè)計
• 「去邊界化」設(shè)計的應(yīng)用

iPhone X 操作特性?

iPhone X 是蘋果公司十周年推出的重點產(chǎn)品，無論外觀還是技術(shù)都有著革命性的創(chuàng)新。讓我們先來回顧下 iPhone X 在界面使用體驗上都有哪些操作特性。

如果你對 iPhone X 還不夠了解，可以看看這些 ：

• 《**！iPhone X **方人機(jī)交互指南中文版》
• 《iPhone X適配沒那么復(fù)雜，但也不是看上去這么簡單》
• 《取消了Home鍵的 iPhone X，交互方式都有哪些變化？》

1. 屏幕變長

因大部分設(shè)計師都用 iPhone 8 來做設(shè)計稿，所以我們用 iPhone 8 與 iPhone X 做對比。

iPhone 6、iPhone 6s、iPhone 7 與 iPhone 8 屏幕分辨率一致。

iPhone X 使用了 5.8 英寸高分辨率、大圓角顯示屏。iPhone X 與 iPhone 8 的顯示屏寬度一致都是 375pt ，高度上 iPhone X 高出 145pt，可以在垂直空間多展示約 20% 的畫面。

iPhone X 的屏幕分辨率和 iPhone 8 Plus 等相同，使用 @3x 的圖像，界面內(nèi)容由手機(jī)硬件遮罩成帶圓角和傳感器（頂部齊劉海）的形狀。所以界面設(shè)計時 iPhone X 和 iPhone 8 的設(shè)計寬度可以通用 375pt，而實際 iPhone X 的屏幕像素為 375pt×812pt (1125×2436px)，且切圖使用 @3x 圖片。

喬布斯曾說，手持設(shè)備**理想的屏幕尺寸是3.5寸，這是因為單手操作時3.5寸屏幕基本能做到大拇指無障礙全覆蓋。但隨著人們對手機(jī)功能多樣化的需求，主流屏幕遠(yuǎn)大于3.5寸。

iPhone X 是 5.8 寸，屏幕已經(jīng)超越了絕大多數(shù)用戶的拇指覆蓋范圍，這就導(dǎo)致左上和右下角的單手操作不夠方便。很多基于 F 型流動視線設(shè)計的 App，通常會將重要的功能入口置于左上角，在 iPhone X 上，視線優(yōu)先和拇指操作未必可以同時滿足，這就要求設(shè)計師們對操作盲區(qū)的功能進(jìn)行多重考量，評估是否要針對 iPhone X 做出位置調(diào)整。

2. 異形狀態(tài)欄（齊劉海）

iPhone 8 屏幕狀態(tài)欄高 20pt，iPhone X 狀態(tài)欄高 44pt 并有齊劉海形狀遮罩。狀態(tài)欄位置顯示的信息，在 iPhone X 上受齊劉海遮罩影響，需要特殊考慮展示效果，甚至重新設(shè)計信息展示方式避讓狀態(tài)欄，以便保持各屏幕展示效果的統(tǒng)一。

蘋果**方不建議采用隱藏或遮擋狀態(tài)欄的設(shè)計，相對 iPhone 8 ，iPhone X 有更高的縱向顯示空間足夠展示更多的內(nèi)容，且狀態(tài)欄顯示了對用戶有用的信息，除非隱藏狀態(tài)欄能帶來更大的收益，否則還是建議保留。

3. 增加主屏幕指示條

iPhone X 屏幕**底部設(shè)置了主屏幕指示條，用戶可從屏幕底端使用滑動手勢進(jìn)入主屏幕或切換應(yīng)用。這些系統(tǒng)的全局操作會優(yōu)先于App應(yīng)用的操作。在設(shè)計用戶沉浸式的產(chǎn)品如視頻、游戲時，可以適當(dāng)?shù)碾[藏主屏幕指示條。

主屏幕指示條下方的內(nèi)容仍是可點擊操作的，但要避免在屏幕**底部設(shè)置重要操作內(nèi)容，且要避免使用與指示條相沖突的操作手勢。主屏幕指示條只有黑白兩種顏色，會根據(jù)指示條底部背景自動切換。

4. 設(shè)置安全區(qū)

從 iOS 11 開始，蘋果引入了安全區(qū)域的概念。在 iPhone 8 等屏幕上，安全區(qū)域默認(rèn)是除了狀態(tài)欄以外的屏幕范圍。在 iPhone X 上，安全區(qū)域默認(rèn)是除去頂部狀態(tài)欄以及底部主屏幕指示條周邊的范圍。

遵照系統(tǒng)安全區(qū)的概念進(jìn)行設(shè)計和開發(fā)，大多數(shù)使用系統(tǒng)標(biāo)準(zhǔn)UI元素（如導(dǎo)航欄、表單、內(nèi)容集）的應(yīng)用程序會自動適應(yīng)設(shè)備的新外形，不需手動調(diào)整，這樣會大量節(jié)省開發(fā)人員的工作量。所以在這里提倡大家遵照系統(tǒng)提倡的方式進(jìn)行開發(fā)布局，不僅方便 iPhone X 的適配工作，也方便后續(xù) iOS 系統(tǒng)更新以及界面元素的自動匹配。

固定在屏幕上展示的內(nèi)容應(yīng)始終在安全區(qū)域內(nèi)，如頂導(dǎo)、底部tab欄等。垂直滾動的內(nèi)容，如列表，圖片流，需要一直延伸到底部，也就是會在安全區(qū)之外展示，這樣才能確保提供全面屏操作體驗。

常用元素適配方案

正是因為 iPhone X 有著許多操作特性，我們的設(shè)計方案必須針對 iPhone X 進(jìn)行適配。以下是針對常見界面元素整理的通用適配規(guī)則。

1. 吸頂元素

對于吸頂元素的適配原則是：避讓狀態(tài)欄，內(nèi)容區(qū)吸附于安全區(qū)頂部，狀態(tài)欄背景顏色根據(jù)吸頂元素進(jìn)行調(diào)整。

• 頂部導(dǎo)航欄：導(dǎo)航欄直接平移到安全區(qū)頂部即可，iPhone X 狀態(tài)欄高度自動適配，狀態(tài)欄底色與iPhone 8 時保持統(tǒng)一。
• 頂部通知：通知區(qū)域平移至安全區(qū)域，通知背景向上加高 44pt，狀態(tài)欄內(nèi)容保持在**上層展示。

2. 吸底元素

吸底元素的適配原則是：內(nèi)容平移至安全區(qū)底部，界面背景層元素（界面背景色、背景圖片、全屏地圖等）充滿屏幕，主屏幕指示條下方區(qū)域與吸底元素顏色協(xié)調(diào)。

• 吸底tab欄、選擇器、對話輸入框等：信息內(nèi)容平移至安全區(qū)域底部，主屏幕指示條下方填充相應(yīng)背景色。
• 吸底按鈕：信息內(nèi)容平移至安全區(qū)域底部，界面底部背景填充相應(yīng)背景色，按鈕可點擊區(qū)域不變。
• 底部擴(kuò)展信息：有些信息位于底部隱藏狀態(tài)，需展開顯示，由于 iPhone X 屏幕較長，且安全區(qū)域未撐滿屏幕，所以會露出原本隱藏的信息。這時候通常會采用形狀遮罩遮蓋隱藏信息，或?qū)Φ撞侩[藏信息的位置進(jìn)行特殊調(diào)整。

3. 信息流

信息流從主屏幕指示條下方穿過，撐滿屏幕顯示，滑動瀏覽信息不受影響。主屏幕指示條下方內(nèi)容仍可點擊，此區(qū)域滑動手勢優(yōu)先觸發(fā)系統(tǒng)操作。信息流**底部內(nèi)容要保障在安全區(qū)內(nèi)。

4. 全屏元素

全屏元素多為圖片、視頻、游戲畫面、全屏地圖等信息，適配規(guī)則是：全屏元素在 iPhone X 上仍要保持充滿屏幕的狀態(tài)，要保證圖像信息比例正確不變形，并接受硬件傳感器齊劉海和圓角遮罩。

• 全屏圖片：因全屏圖片在 iPhone X 上仍要保持全屏的話，會被裁剪掉圖片信息，所以要根據(jù)畫面具體元素進(jìn)行選擇，是充滿屏幕裁剪圖片，還是在空白區(qū)域填充色塊（系統(tǒng)默認(rèn)填充黑色）。App 開屏圖片直接調(diào)取 iPhone 8 Plus 在 iPhone X 展示會被裁剪，所以**好是單獨出圖適配，圖片尺寸為 375pt×812pt (1125×2436px @3x)。

因 iPhone X 與 iPhone 8 Plus 都使用@3x圖片，所以開屏圖片不做單獨適配的話可以調(diào)取 iPhone 8 Plus 圖片裁剪使用。

• 全屏閱讀模式：當(dāng)需要沉浸式閱讀的時候，我們會采用隱藏狀態(tài)欄的形式，將屏幕全部用于展示信息，但是這種形式在iPhone X 上因為齊劉海的原因效果并不理想。所以在 iPhone X 上建議保留頂部狀態(tài)欄，信息在頂部安全區(qū)內(nèi)展示，狀態(tài)欄的底色可以根據(jù)信息內(nèi)容進(jìn)行調(diào)整。

5. 左右布局元素

**典型的左右布局就是抽屜導(dǎo)航，抽屜拉出后，如果信息卡片和主屏幕指示條交錯疊加，就會稍顯信息混亂，建議抽屜導(dǎo)航的寬度根據(jù)主屏幕指示條的位置進(jìn)行調(diào)整，完整露出或完全遮擋指示條。

6. 居中元素

居中元素在適配中的影響較小，對話框、Toast 提示等均不需單獨適配。

• 對話框：對話框為全局居中的元素，不受四周元素的影響，在 iPhone X 上不需單獨適配，保障對話框的背景充滿屏幕即可。

• 缺省頁：因頂部狀態(tài)欄是不建議遮擋的部分，所以頂部加上頂導(dǎo)距離會很高，這樣就導(dǎo)致整體界面稍有重心下移的感覺。尤其在缺省圖形居中的界面，重心下移的感覺更為明顯，這種情況下建議對界面元素進(jìn)行單獨適配調(diào)整，以便達(dá)到視覺平衡。

以上的適配規(guī)則基本可以滿足所有場景的基礎(chǔ)適配需求。當(dāng)然還有很多特殊場景，不需要特意保持 iPhone 8 和 iPhone X 展現(xiàn)效果的一致性，這種情況就需要單獨設(shè)計方案，不是通用規(guī)則能滿足的了。

滴滴出行針對內(nèi)部產(chǎn)品做了一套適配指南，幾十頁滿滿的適配方案說明，盡可能詳盡的將普適規(guī)則與特殊規(guī)則運用場景舉例說明。設(shè)計平臺將此適配指南發(fā)放到各業(yè)務(wù)部門，由業(yè)務(wù)方產(chǎn)出自己各功能場景下的適配方案。

在此過程中我們發(fā)現(xiàn)，即使規(guī)則已經(jīng)很詳盡，Webapp、H5頁面等多場景下仍有一些不清楚如何適配，或不能通用適配規(guī)則的情況，需要設(shè)計平臺持續(xù)跟進(jìn)，講解規(guī)則走查適配效果。

造成這種情況的原因大多是因為界面設(shè)計的時候沒有充分考慮其后期延展，導(dǎo)致多屏幕下不能保持統(tǒng)一樣式，無法通用適配規(guī)則。這讓我們開始思考如何設(shè)計界面才能包容多屏幕的展現(xiàn)。

「去邊界化」設(shè)計

設(shè)備屏幕在不斷更新，適配需求就是持續(xù)的無盡的，iPhone 從 iPhone 4 – iPhone 5 – iPhone 6 – iPhone X ，屏幕尺寸不斷在變化，甚至屏幕的形狀邊界也在變化，更不用說安卓系統(tǒng)各種各樣的屏幕尺寸及屏幕形狀。例如，夏普AQUOS S2。

設(shè)計界面時，如果對市面的主流屏幕挨個設(shè)計是有極其高的時間成本的，那怎么才能讓適配更從容，不必緊張的跟隨手機(jī)廠商的發(fā)售腳步？是否有提高適配效率的方法？適配可否是一勞永逸的？需要適配的元素有沒有一些共性……

帶著這些問題不斷的思考總結(jié)，我們形成了一套自己的設(shè)計理念，能夠讓適配這件事情以一抵百，萬變不離其宗，這就是「去邊界化」設(shè)計。

「去邊界化」設(shè)計，是指在設(shè)計之初把邊界限制去掉，定義好界面元素的特性及層級關(guān)系后，再套用到屏幕邊框之中。與常規(guī)設(shè)計的區(qū)別在于，讓內(nèi)容成為獨立且完整的組合體，再根據(jù)設(shè)定好的變化規(guī)則組合到不同的邊界中去。這樣保障了內(nèi)容的**大適用程度，且保障各屏幕展示規(guī)則的統(tǒng)一性。

目前我們**常做還是手機(jī)界面，未來VR、AR 成熟起來，我們所設(shè)計的界面就會更大，甚至?xí)蟮綗o形。運用「去邊界化」設(shè)計，可以讓我們更好的適應(yīng)未來。

另外回到手機(jī)界面，我們完成一個設(shè)計方案后，也可以運用“去邊界化”的方式檢查界面元素是否在多屏幕適配上存在問題，減少不必要的適配工作量。

其大無外，其小無內(nèi)，在界面設(shè)計上，我們也需要突破界限，精益求精，讓每一個元素都豐富而完整。

「去邊界化」設(shè)計的應(yīng)用

1. 定義元素特性

這里的元素特性，除了元素本身的基礎(chǔ)功能及操作方式外，從三個角度進(jìn)行思考，延展性、吸附性、流動性。

這里我們以同倍率，不同尺寸的屏幕適配為例，省略倍率換算方便我們更簡單的了解「去邊界化」設(shè)計。

• 延展性：延展性指元素是否會在不同尺寸屏幕進(jìn)行尺寸變化。定義元素的延展屬性是適配的基礎(chǔ)，確定什么元素大小可變，什么元素大小不可變，才能讓適配方案清晰統(tǒng)一。

如下圖中，圖片、卡片、背景、列表、按鈕 等元素可隨著屏幕進(jìn)行延展變化，而icon、文字等為固定大小不會隨著屏幕進(jìn)行變化。

延展變化又可分為：等比延展、橫向延展、全部延展。

通常圖片、視頻元素使用等比延展，保障畫面比例統(tǒng)一不變形；列表、按鈕 等多采用橫向延展，信息量不變高度無需變化；卡片、背景等多根據(jù)其承載信息和屏幕背景尺寸進(jìn)行調(diào)整，長寬均跟隨變化。

• 吸附性：界面中的元素都不是獨立存在的，每個元素都和其它某個元素存在一定聯(lián)系，所以定義好元素之間的吸附關(guān)系，方便后續(xù)元素的重新組合。

如下圖，button 吸附于界面（或安全區(qū)）底部，適配到其它屏幕依然保持與界面（或安全區(qū)）底部的吸附性。而下圖中的toast 提示為界面居中元素，也就是它的吸附性就是界面的中心，適配到其它屏幕仍保持這一吸附屬性。

• 流動性：流動性將元素比作水，依附與一個容器內(nèi)展示，根據(jù)容器的尺寸變化而變化。多為文字流、圖片流等信息元素所具備。

針對流動性的元素主要是定義其容器的延展性和吸附性，流動元素本身大小不變，位置形態(tài)上跟隨容器進(jìn)行變化。當(dāng)然還要考慮元素過多超出容器后的顯示方案，是被截斷還是省略等等。

如下圖，文字圖片流在信息容器內(nèi)進(jìn)行流動展示。

2. 組織信息結(jié)構(gòu)

從平面維度思考元素關(guān)系可以理解為元素間的吸附性，但界面元素不總是在同一個平面上，App 界面通常分為 背景層 、內(nèi)容層 、操作層 、狀態(tài)層 ，這些層級在高度上是相互疊加的。

決定元素層級的因素主要是其表達(dá)內(nèi)容的主次關(guān)系，重要而緊急元素在**上方，不重要不緊急的元素在**下方。將界面從平面維度填充為立體維度讓產(chǎn)品功能更豐富，更貼近人們真實的立體世界，也就更符合用戶的認(rèn)知和操作邏輯。

無論界面的邊界如何變化，元素間的層級結(jié)構(gòu)一旦定下是不會隨邊界變化而改變的。建立元素的縱向?qū)蛹夑P(guān)系，便于在不同場景保持統(tǒng)一的元素優(yōu)先級。

在「去邊界化」設(shè)計中，除了元素自身特性（延展性、吸附性、流動性）清晰，元素間的組合層級關(guān)系必須排布合理、邏輯清晰，才能讓整個產(chǎn)品層級統(tǒng)一，多屏幕展現(xiàn)層級統(tǒng)一。

3. 元素組件化

我們有講到界面中所有的元素都不是獨立的，有時某幾個元素組合表達(dá)同一個功能，關(guān)系非常緊密，甚至可以捆綁移動，我們把這些功能密切相關(guān)的元素進(jìn)行封裝，看做一個完整的大元素，這就是我們常說的組件。

組件化的特點就是詳盡每個元素的操作反饋、延展方案、顯示容器、極限情況等等場景，然后定義元素與元素之間的吸附關(guān)系，操作聯(lián)動，使其成為一個完整的操作場景。

說到組件化設(shè)計，這有一篇必看好文：《進(jìn)階必讀！可能是**全面的組件化開發(fā)與設(shè)計指南》。

組件還可以根據(jù)功能需求與其它元素自由組合，使得組件可以不斷復(fù)用，大大提升設(shè)計效率，及適配效率。

組件化的意義有很多，可以方便設(shè)計元素的復(fù)用，方便開發(fā)組件的復(fù)用，減少代碼及元素冗余，方便設(shè)計方案的修改等等。橫向組件化之于「去邊界化」設(shè)計，主要是在確立了元素特性及層級關(guān)系后，以整合元素成為組件的方式提升設(shè)計及適配效率。

以上就是「去邊界化」設(shè)計理念，包括定義元素三大特性：延展性、吸附性、流動性，然后確定信息的橫縱向?qū)蛹夑P(guān)系，橫向功能關(guān)系緊密的元素可進(jìn)行組件化處理。這樣整個界面的元素都是層級清晰且不依靠邊界的，這時再給界面套用一個屏幕邊框就非常有依據(jù)了，且能保障所有適配界面具有統(tǒng)一性。

梳理清楚設(shè)計理念之后，還需要將上述原則梳理形成設(shè)計規(guī)范，同步至團(tuán)隊所有成員，以達(dá)到團(tuán)隊共識保障**終的效果呈現(xiàn)。

4. 制定設(shè)計規(guī)范

以規(guī)矩為方圓則成，以尺寸量長短則得，設(shè)計規(guī)范可以幫助設(shè)計師快速認(rèn)知元素特性及使用規(guī)則，工作中快速復(fù)用通用元素，提升設(shè)計效率，且可以**規(guī)范說明對新功能尋求設(shè)計指導(dǎo)和參考。

規(guī)范的貫徹執(zhí)行，可以保持產(chǎn)品設(shè)計語言與品牌形象的統(tǒng)一，保障在不斷更新迭代中產(chǎn)品體驗不走樣。統(tǒng)一的使用體驗可以保障用戶流暢的使用產(chǎn)品，快速識別產(chǎn)品功能，簡單高效進(jìn)行操作。此外**規(guī)范說明，可以實現(xiàn)開發(fā)人員與設(shè)計師的高效溝通，另外，將組件開發(fā)形成設(shè)計組件庫，可以提升開發(fā)效率，方便代碼的復(fù)用。

在「去邊界化」的設(shè)計理念中設(shè)計規(guī)范也是不可缺少的環(huán)節(jié)，把定義好的元素特性和確定的組織結(jié)構(gòu)總結(jié)成設(shè)計規(guī)范，是把理論層面上的探索轉(zhuǎn)換成實踐指導(dǎo)。

以上就是完整的「去邊界化」設(shè)計理念在實際工作中的應(yīng)用：從定義應(yīng)用中元素的延展性、吸附性和流動性，到把零散的信息元素組成橫向、縱向有序的結(jié)構(gòu)，并把上述特性和結(jié)構(gòu)形成設(shè)計規(guī)范在設(shè)計、開發(fā)團(tuán)隊中應(yīng)用推廣。

總結(jié)?

從蘋果發(fā)布會開始，滴滴設(shè)計團(tuán)隊內(nèi)部就開始進(jìn)行著iPhone X的適配工作。了解iPhone X的操作特性、探究滴滴出行應(yīng)用的適配規(guī)范、上線后跟蹤反饋等，適配只是一個很小的工作需求，但也可以做的很大，做的很多，我們希望抱著這種極致執(zhí)行的態(tài)度做好每一件事情。

從這次的適配工作中我們不僅看到了 iPhone X ，還看到了未來不斷會出現(xiàn)的新產(chǎn)品、新系統(tǒng)等，我們不滿足于一次次被動的適配，更希望可以主動的應(yīng)對變化，所以我們摸索出了「去邊界化」設(shè)計理念，希望這個理念能對大家的設(shè)計工作有所啟發(fā)，讓我們?yōu)槲磥碜龊脺?zhǔn)備。

歡迎關(guān)注微信公眾號：「CDX創(chuàng)意設(shè)計中心」

「實戰(zhàn)案例！手把手教你適配 iPhone X」

• 《如何適配iPhone X？來看QQ 音樂這個實戰(zhàn)案例復(fù)盤總結(jié)》
• 《H5頁面如何適配iPhone X ？騰訊設(shè)計師給出了通用解決方案！》
• 《為了讓 iPhone X 更好瀏覽網(wǎng)頁，我給網(wǎng)頁加了個導(dǎo)航按鈕》

================明星欄目推薦================

聯(lián)展網(wǎng)： 是旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計導(dǎo)航：國內(nèi)人氣**高的設(shè)計網(wǎng)址導(dǎo)航，設(shè)計師必備：

相關(guān)推薦：

---

杭州平面設(shè)計培訓(xùn)   杭州平面設(shè)計培訓(xùn)班   杭平面設(shè)計培訓(xùn)機(jī)構(gòu)

上一篇：杭州平面設(shè)計周末培訓(xùn)班 下一篇：杭州平面設(shè)計流程