Ed專注于新興VR/AR領(lǐng)域的用戶體驗設(shè)計。他曾為谷歌、索尼和電子藝界設(shè)計過獲獎項目。adobexd的組件系統(tǒng)為設(shè)計師提供了強大的功能,使他們能夠制作數(shù)字產(chǎn)品的原型。然而,它并非沒有怪癖,需要特別照顧。利用智能快捷方式和遵循最佳實踐將使設(shè)計師能夠簡化其XD原型工作流程。
自2017年底正式公開推出以來,Adobe XD已朝著成為UX設(shè)計師極具競爭力的線框和原型工具的方向取得了長足的進步。特別是,它的新組件系統(tǒng)擴展了設(shè)計師可以嘗試的交互類型。不過,組件也并非沒有怪癖和缺點。在使用XD組件時,采用一組工作流實踐有助于避免繁雜的工作并充分利用系統(tǒng)的潛力。
XD組件是可重用的元素分組,例如文本、形狀或線條。一個組件有一個“主組件”作為父組件,還有一個“實例”或子組件放置在藝術(shù)板上。更改主組件時,更改會傳播到其所有實例。組件取代了XD以前的“符號”系統(tǒng),提供了一個關(guān)鍵的區(qū)別。它們可以有多個狀態(tài)來響應(yīng)XD的原型模式中定義的不同輸入。例如,按鈕可以具有默認狀態(tài),但在處于懸?;騿螕魻顟B(tài)時會更改其外觀。它可以在點擊時播放聲音,甚至可以根據(jù)語音識別的輸入改變聲音的外觀。
組件系統(tǒng)省時,但需要特別小心。一個深思熟慮的方法和精心準備的工作流程是必要的,以利用系統(tǒng)的力量。對adobexd相當熟悉的設(shè)計師將從以下提示和建議中獲益匪淺。首先,從Google的Material Design主頁下載adobexd設(shè)計工具包。該工具包將提供一個adobexd組件集來進行實驗和解構(gòu)。
當?shù)谝淮蝿?chuàng)建具有狀態(tài)的組件時,設(shè)計者應(yīng)該了解組件的潛在更改如何影響其他實例。為了舉例說明,讓我們考慮一個包含幾個狀態(tài)的下拉菜單:編輯下拉列表的子實例的默認狀態(tài)時,這些更改不會傳播到懸?;騿螕魻顟B(tài)。必須更改主組件中的默認狀態(tài)才能更新所有實例的懸?;騿螕魻顟B(tài)。
雖然跳入并開始迭代主要組件是很有誘惑力的,但有時由于父組件和子組件的行為方式不同而發(fā)生意外的問題。一個好的實踐是,在添加其他狀態(tài)或?qū)嵗M件之前,考慮并預測主組件的默認狀態(tài)所需的一切,甚至可以并排列出不同的狀態(tài)。
設(shè)計人員還應(yīng)該記住,他們可以在主組件或子實例的非默認狀態(tài)下添加和更改元素,而不會影響默認狀態(tài),但反之則不然。對Adobe的一個建議是:給組件狀態(tài)一個鎖特性,這樣設(shè)計人員就可以保持非默認狀態(tài)不變,并防止對主組件默認狀態(tài)的更改傳播。
創(chuàng)建一個組件(右鍵單擊一個元素,然后在菜單中選擇“生成組件”,或者在Mac上按Cmd-K,在PC上按Ctrl-K)將組件添加到左側(cè)欄的“資源”面板中。XD將給組件一個默認名稱“component XX”(其中“XX”是一個數(shù)字)。它不是很有描述性,所以最好給它一個唯一的、可搜索的名稱。
為什么這么做?當組件列表填滿時,如果所有組件都以相同的默認名稱和一個無意義的數(shù)字開頭,那么它將變得非常笨拙。雖然“平鋪視圖”選項有幫助,但它沒有文本標簽,這使得視覺識別變得緩慢且具有挑戰(zhàn)性。帶有小縮略圖的“列表視圖”也很難識別具有不可識別名稱的組件之間的差異。組件可能會丟失。通過命名使其可搜索將節(jié)省時間
創(chuàng)建組件時,很容易意外地將主組件放置在藝術(shù)板上。雖然XD提供了查找主組件的工具(通過搜索Assets面板或右鍵單擊并從子實例中選擇editmaincomponent),但是在相信主組件是一個實例的情況下,很容易對其進行意外更改。這樣做可能會在多個藝術(shù)板上導致許多不希望的變化。即使artboard上只有少數(shù)幾個組件實例,一旦artboard被克隆,事情也會很快失控。對主組件的不經(jīng)意更改會增加本可以避免的清理時間。
最好養(yǎng)成一個習慣,即在創(chuàng)作時立即將主要組件從設(shè)計藝術(shù)板上移開。一個理想的方法是將主要組件放在XD文件的粘貼板上,或者放在清晰標記的專用藝術(shù)板上。這樣做會使事情以后更有效率。對Adobe的一個建議是:在對主組件進行更改時考慮一個提示,這樣就可以警告設(shè)計者這些更改可能會傳播到子實例。如何使用XD:小心地命名層是至關(guān)重要的,因為使用自動動畫轉(zhuǎn)換在很大程度上依賴于它。小心地命名層是至關(guān)重要的,因為使用自動設(shè)置動畫的過渡在很大程度上依賴于它。
很容易在artboard上嘗試想法,進入分組/取消分組組件和更改組件狀態(tài)屬性的流程。可能會有一個強烈的誘惑,盡量減少左側(cè)邊欄,以獲得更多的工作空間。然而,組件狀態(tài)和轉(zhuǎn)換很有可能在一系列迭代中表現(xiàn)得不符合預期。這可能是因為子元素(如形狀、向量或文本)的組織和分組偏離了正確工作所需的位置。
圖層視圖為元素的層次結(jié)構(gòu)和命名提供了100%的透明度,其嚴密的組織是至關(guān)重要的。使用XD強大的自動動畫在狀態(tài)之間轉(zhuǎn)換要求元素在組件的層層次結(jié)構(gòu)中具有相同的名稱和位置。否則,過渡將默認為淡入淡出,而不是吸引人的自動動畫。有時,在自動設(shè)置過渡動畫時,可能需要從插值中抑制特性。為了實現(xiàn)這一點,設(shè)計者可以重命名處于不同組件狀態(tài)或artboard的元素,以斷開基于名稱的鏈接。在這兩種情況下,當出現(xiàn)意外問題時,可以使用層視圖進行故障排除。在調(diào)試原型問題時,無論是組件狀態(tài)之間的轉(zhuǎn)換還是藝術(shù)板之間的轉(zhuǎn)換,這都應(yīng)該是第一步。
總監(jiān)微信
復制成功
業(yè)務(wù)咨詢 何先生
業(yè)務(wù)咨詢 何先生
搜索感興趣的內(nèi)容