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

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

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

iPhone X 操作特性

 

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

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

• 《優(yōu)設(shè)首發(fā)！iPhone X 官方人機(jī)交互指南中文版》
• 《iPhone X適配沒那么復(fù)雜，但也不是看上去這么簡(jiǎn)單》
• 《取消了Home鍵的 iPhone X，交互方式都有哪些變化？》

1. 屏幕變長(zhǎng)

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

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è)計(jì)時(shí) iPhone X 和 iPhone 8 的設(shè)計(jì)寬度可以通用 375pt，而實(shí)際 iPhone X 的屏幕像素為 375pt×812pt (1125×2436px)，且切圖使用 @3x 圖片。

喬布斯曾說(shuō)，手持設(shè)備最理想的屏幕尺寸是3.5寸，這是因?yàn)閱问植僮鲿r(shí)3.5寸屏幕基本能做到大拇指無(wú)障礙全覆蓋。但隨著人們對(duì)手機(jī)功能多樣化的需求，主流屏幕遠(yuǎn)大于3.5寸。

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

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

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

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

3. 增加主屏幕指示條

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

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

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

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

常用元素適配方案

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

1. 吸頂元素

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

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

2. 吸底元素

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

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

3. 信息流

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

4. 全屏元素

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

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

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

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

5. 左右布局元素

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

6. 居中元素

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

• 對(duì)話框：對(duì)話框?yàn)槿志又械脑?，不受四周元素的影響，?iPhone X 上不需單獨(dú)適配，保障對(duì)話框的背景充滿屏幕即可。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. 定義元素特性

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. 元素組件化

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

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

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

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

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

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

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

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

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

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

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

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

總結(jié) 

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

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

作者：滴滴出行CDX - 張瑨

轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

更多精彩文章：

手機(jī)及小程序界面設(shè)計(jì)之一：讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則：菲茨定律

手機(jī)及小程序界面設(shè)計(jì)之二：三分鐘搞懂，iPhone 12發(fā)布后的設(shè)計(jì)尺寸調(diào)整

手機(jī)及小程序界面設(shè)計(jì)之三：從 Dribbble 高贊的 828 個(gè)作品中，總結(jié)出 2022 設(shè)計(jì)趨勢(shì)

手機(jī)及小程序界面設(shè)計(jì)之四：手機(jī)屏幕越來(lái)越大，UX設(shè)計(jì)師面臨哪些挑戰(zhàn)？

手機(jī)及小程序界面設(shè)計(jì)之五：連高手都容易忽略的9個(gè) iOS 與 Android 間的交互差異

手機(jī)及小程序界面設(shè)計(jì)之六：讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則：菲茨定律

手機(jī)及小程序界面設(shè)計(jì)之七：基礎(chǔ)科普！超全面的 UI 元素尺寸設(shè)置指南（上）

手機(jī)及小程序界面設(shè)計(jì)之八：如何適配iPhone X？來(lái)看滴滴出行的實(shí)戰(zhàn)案例復(fù)盤！

手機(jī)及小程序界面設(shè)計(jì)之九：手機(jī)端表格設(shè)計(jì)：我整理了一套循序漸進(jìn)的處理方法

手機(jī)及小程序界面設(shè)計(jì)之十：超詳細(xì)解讀：UI導(dǎo)航設(shè)計(jì)不僅僅指的是導(dǎo)航欄