近一年來，F(xiàn)igma它可以說是體驗(yàn)設(shè)計(jì)領(lǐng)域最受歡迎的工具。最近，我開始頻繁地工作。Axure9.0和Figma切換使用，深刻感受到設(shè)計(jì)細(xì)節(jié)帶來的體驗(yàn)差異化。今天，通過一些細(xì)節(jié)和亮點(diǎn)，總結(jié)了工具軟件體驗(yàn)設(shè)計(jì)的幾個原則。

工具軟件的首要任務(wù)是追求效率，降低用戶的運(yùn)營成本。

1.模板化設(shè)置

1)組件化設(shè)計(jì)

Figma組件功能強(qiáng)大，類似于Axure母板，但更靈活。既有父子繼承關(guān)系，修改父子組件后，子組件可同時修改。但子組件具有一定的獨(dú)立性，內(nèi)容可以編輯，以確保靈活性和可用性。Axure母版是強(qiáng)制性的，一旦修改了父組件的內(nèi)容，子組件就必須修改。

2)樣式模板化

在Figma在中間，用戶可以創(chuàng)建自己的顏色、邊緣和陰影風(fēng)格庫，隨時調(diào)用設(shè)計(jì)，一勞永逸，降低頻繁調(diào)整風(fēng)格的操作成本。

2.選擇代替輸入

預(yù)設(shè)選項(xiàng)能有效提高用戶效率。例如，在設(shè)置字號時，Axure沒有預(yù)設(shè)選項(xiàng)，用戶需要手動輸入修改。Figma常用字號預(yù)置在中間，用戶可以下拉選擇。

另外Axure默認(rèn)字體為13號，默認(rèn)字體為13號Figma它是14號字體，更適合設(shè)計(jì)師的主流使用，減少了用戶的修改次數(shù)。

3.批量修改

批量修改是提高效率最常用的設(shè)計(jì)手段。Figma和Axure都有padding設(shè)置功能Figma一鍵操作，用戶輸入一次即可修改四個邊距，調(diào)整效率更高。Axure要設(shè)置四面等距，就要逐一修改，操作比較繁瑣。

在工具軟件中，對象的屬性欄應(yīng)為用戶的高頻操作區(qū)。

總體布局，F(xiàn)igma和Axure基本相同，包括三個模塊?？稍O(shè)置對象的各種屬性、交互效果設(shè)計(jì)等?；緦傩阅K是用戶操作的首要任務(wù)。

不過Figma屬性欄通過信息分級顯示、內(nèi)容簡化、布局有序等設(shè)計(jì)方法，給用戶帶來更好的體驗(yàn)。

1.分級顯示，隱藏不必要的內(nèi)容

創(chuàng)建元素時，F(xiàn)igma默認(rèn)情況下，屬性欄只顯示位置大小信息、層透明度、填充顏色等基本信息。邊緣描述、投影、導(dǎo)出等設(shè)置項(xiàng)只顯示標(biāo)題，所有內(nèi)容都隱藏而不顯示，以確保操作信息的所見即所得。當(dāng)用戶添加設(shè)置項(xiàng)時，系統(tǒng)會給出默認(rèn)設(shè)置，用戶只需根據(jù)需要修改內(nèi)容。

另外Figma它還采用了交互操作來減少頁面的信息量。例如，可以下拉的選項(xiàng)默認(rèn)不顯示下拉按鈕，而是在鼠標(biāo)懸停時顯示，使原始復(fù)雜信息的頁面更加清新。

而Axure然后平面顯示內(nèi)容信息，無論用戶是否需要操作，都會顯示設(shè)置項(xiàng)的內(nèi)容。這種布局設(shè)計(jì)確實(shí)可以減少用戶的點(diǎn)擊操作，但低頻操作的設(shè)置項(xiàng)增加了頁面信息量，成為頁面的信息噪聲。

2.適應(yīng)用戶習(xí)慣，減少頁面信息量

為了提高自己的行為效率，用戶不會命名所有頁面元素，事實(shí)上，用戶的命名頻率并不高。Figma在元素屬性設(shè)置中，沒有修改元素名稱的選項(xiàng)，而是在圖層列表中修改。Axure在元素屬性中，命名作為主要內(nèi)容放置在頂部。

3.統(tǒng)一的對齊模式，使信息更加有序

兩者在信息布局和對齊上也有差異。Figma采用上下布局的方式，上面是功能標(biāo)題，下面是設(shè)置內(nèi)容。信息水平更明顯，也更符合用戶的瀏覽習(xí)慣。它也有很好的一致性。

而Axure主要是左右布局，左邊是標(biāo)題信息，右邊是內(nèi)容項(xiàng)。我個人理解，這種布局是為了壓縮高度方向的尺寸，盡可能確保設(shè)置項(xiàng)目完全顯示，避免滾動條，增加用戶的運(yùn)營成本。但這種布局導(dǎo)致了內(nèi)容顯示的混亂。

此外，不同長度的底邊輸入框也增加了內(nèi)容的復(fù)雜性和混亂感，導(dǎo)致頁面信息的混亂。

在設(shè)計(jì)工具中，可視化設(shè)計(jì)更多地用于位置相關(guān)功能，幫助用戶更好地理解信息，從而降低用戶的思維成本。因此，可視化形式被添加到設(shè)置選項(xiàng)中。

比如上面提到的Padding設(shè)置，F(xiàn)imga采用可視化形式，用戶可以直接填寫對號，用戶的思維成本較低，甚至可以說是零成本。Axure圓角設(shè)置、邊線可見性設(shè)置也采用可視化形式。而且可視化還具有操作功能，方便用戶操作。

當(dāng)然Figma設(shè)計(jì)細(xì)節(jié)不止這些，更多figma的內(nèi)容可以參考：https://js.design/special/figma/，但很多設(shè)計(jì)都不是Figma新的創(chuàng)新，而是在Axure和Sketch在此基礎(chǔ)上進(jìn)行了優(yōu)化。因此，有價值的設(shè)計(jì)不一定是為了翻天覆地，也可以站在巨人的肩膀上，制定出符合自己產(chǎn)品定位和特點(diǎn)的設(shè)計(jì)方案。