數(shù)字設(shè)計有多種形式-從移動端、桌面網(wǎng)站到顯示屏應(yīng)用程序、智能助手、車載娛樂系統(tǒng)(例如CarPlay和Android Auto)等等。為當(dāng)今的應(yīng)用程序打造數(shù)字體驗意味著需要針對各種屏幕尺寸、布局和交互類型進(jìn)行設(shè)計。作為設(shè)計師，您的時間應(yīng)該花在用戶體驗上，而不是在調(diào)整布局上。這是Adobe XD在處理布局更改和更新時如何幫助您加快流程的方式。

網(wǎng)格和方形定義網(wǎng)格系統(tǒng)可以幫助您確保設(shè)計保持一致，并可以節(jié)省寶貴的時間來測量元素和元素之間的間距。Adobe XD中存在兩個選項布局和正方形可供選擇。布局網(wǎng)格選項可設(shè)置一系列橫跨畫板的列和參考線，從而允許內(nèi)容被對齊到的列數(shù)定義的寬度和間距。使用響應(yīng)式Web布局時，“布局網(wǎng)格”選項是一個很好的選擇，可以在屬性檢查器中輕松調(diào)整布局網(wǎng)格的間距、顏色和寬度。

方形網(wǎng)格則可以提供網(wǎng)格覆蓋到你的畫板，看起來像方格紙，使元素可以水平和垂直對齊網(wǎng)格。如果布局在定義的網(wǎng)格尺寸(例如8px，16px等)上工作，則可以在屬性檢查器中手動設(shè)置此設(shè)置，以確保元素可以與正確的網(wǎng)格對齊。

網(wǎng)格可與參考線結(jié)合使用，為創(chuàng)建設(shè)計版圖的藍(lán)圖奠定基礎(chǔ)。只需將鼠標(biāo)懸停在畫板的左側(cè)或頂部，然后按住鼠標(biāo)并拖動就可以在畫板上的任意位置拉出水平或垂直參考線。

內(nèi)容感知布局

隨著設(shè)計的發(fā)展，如果要做出更改，從按鈕標(biāo)簽到完整頁面布局的所有內(nèi)容。過去，要修改整個設(shè)計(尤其是在較高保真度的階段)可能會很麻煩，但并非必須如此。每當(dāng)更改內(nèi)容或調(diào)整元素時，Adobe XD布局中的“具有內(nèi)容感知布局”功能都會相應(yīng)地進(jìn)行調(diào)整。

填充

啟用填充后，修改按鈕上的文本就像更改文本一樣容易。隨著文本字符串變長或變短，按鈕將根據(jù)“屬性”檢查器中定義的填充進(jìn)行調(diào)整并調(diào)整其大小。內(nèi)容組也是如此-隨著元素在組內(nèi)移動，組的背景將相應(yīng)調(diào)整，并保持組頂部、底部、左側(cè)和右側(cè)的填充。堆疊與填充一起使用時，堆疊使您可以在設(shè)計中重新排列元素，就像單擊和拖動一樣簡單。使用具有元素列表，水平畫廊或完整內(nèi)容部分的堆疊，可以在幾秒鐘內(nèi)重新排列頁面，同時保持適當(dāng)?shù)拈g距和對齊方式。

重復(fù)網(wǎng)格

從圖像列表到產(chǎn)品列表，設(shè)計布局中的重復(fù)元素越來越普遍。過去，創(chuàng)建這些重復(fù)元素并在重復(fù)元素(如產(chǎn)品卡)中的布局上進(jìn)行迭代是很繁瑣且耗時的。 重復(fù)網(wǎng)格使元素可以在水平和垂直方向上快速重復(fù)，并且可以完全控制元素之間的間距。在重復(fù)序列中對一個元素進(jìn)行布局更改時，這些更改會反映在所有元素上，從而非常容易地創(chuàng)建照片網(wǎng)格、產(chǎn)品列表等。

響應(yīng)式調(diào)整大小

當(dāng)需要為更大或更小的屏幕和設(shè)備調(diào)整布局時，響應(yīng)式調(diào)整大小大小將為您節(jié)省大量時間。響應(yīng)式調(diào)整大小可以分析您的設(shè)計并就各個元素的調(diào)整大小，組的移動方式以及應(yīng)錨定的點做出明智的決策。只需在組或整個畫板上啟用“響應(yīng)式調(diào)整大小”，然后調(diào)整元素的大小即可看到效果。

總結(jié)

以上是生活随笔為你收集整理的Android 页面布局xd,Adobe XD强大的布局系列工具 助你事半功倍的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。