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

一、效率設(shè)計(jì)

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

1.模板化設(shè)置

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

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

2)樣式模板化

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

2.選擇代替輸入

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

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

3.批量修改

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

二、簡(jiǎn)化設(shè)計(jì)

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

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

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

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

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

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

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

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

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

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

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

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

此外，不同長(zhǎng)度的底邊輸入框也增加了內(nèi)容的復(fù)雜性和混亂感，導(dǎo)致頁(yè)面信息的混亂。更多關(guān)于figma和axure的信息：https://js.design/special/figma/

三、可視化設(shè)計(jì)

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

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