引言

近一年來空猜，F(xiàn)igma 可謂是體驗設(shè)計領(lǐng)域中最熱門的工具。剛好最近開始頻繁的在 Axure 9.0 和?Figma?中切換使用恨旱，深刻的感受到了設(shè)計細(xì)節(jié)帶來的體驗差異化辈毯。今天就通過一些細(xì)節(jié)亮點，總結(jié)下工具軟件的體驗設(shè)計的幾個原則搜贤。

事先聲明谆沃，本文不是對比軟件工具孰優(yōu)孰劣，僅僅是為了探討設(shè)計技巧仪芒，希望對你有所幫助唁影。

本文主要的內(nèi)容包括：

效率設(shè)計：提高用戶行為效率

簡潔化設(shè)計：降低信息噪點

可視化設(shè)計：減少用戶思考成本

效率設(shè)計

工具軟件首要的任務(wù)就是追求效率，減少用戶的操作成本掂名。

1. 模板化設(shè)置

組件化設(shè)計

Figma 擁有強大的組件功能夭咬，類似于 Axure 中的母板，但是更加靈活铆隘。既有父子繼承關(guān)系卓舵，實現(xiàn)了修改父組件后，子組件可以同步修改膀钠。但是子組件又有一定的獨立性掏湾，內(nèi)容可編輯裹虫，保證了靈活可用。而 Axure 母版則是強制性的融击，一旦修改了父組件的內(nèi)容筑公，子組件必然修改。

樣式模板化

在 Figma 中尊浪，用戶可以創(chuàng)建自己的色彩匣屡、描邊和陰影樣式庫，在設(shè)計中隨時調(diào)用拇涤，一勞永逸捣作，減少了頻繁調(diào)整樣式的操作成本。

2. 選擇代替輸入

預(yù)置選項可以有效的提高用戶效率鹅士。例如字號設(shè)置時券躁，Axure 并沒有預(yù)置選擇項，用戶需要手動輸入修改掉盅。在 Figma 中則預(yù)置了常用字號也拜，用戶下拉選擇即可。另外 Axure 默認(rèn)字體是 13 號趾痘，而 Figma 是 14 號字體慢哈，更加貼合設(shè)計師的主流使用字號，減少了用戶的修改次數(shù)永票。

3. 批量修改

批量修改是我們最常用的提高效率的設(shè)計手段岸军。Figma 和 Axure 都有 padding 設(shè)置功能。不過 Figma 可以一鍵操作瓦侮，用戶輸入一次就可以修改四個邊距，調(diào)整效率更高佣谐。而 Axure 想要設(shè)置四邊等距肚吏，則要逐個修改，操作上相對繁瑣狭魂。

簡潔化設(shè)計

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

整體布局上雌澄，F(xiàn)igma 和 Axure 基本一致斋泄，都是包含了 3 個模塊「湮可以設(shè)置對象的各種屬性炫掐、交互效果設(shè)計等。而基礎(chǔ)屬性模塊更是用戶操作的重中之重睬涧。

不過 Figma 屬性欄通過信息分級展示募胃、內(nèi)容精簡旗唁、有序布局等設(shè)計方法，帶給用戶更好的體驗痹束。

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

創(chuàng)建元素時，F(xiàn)igma 屬性欄默認(rèn)只顯示位置尺寸信息祷嘶、圖層透明度和填色等基礎(chǔ)信息屎媳，描邊、投影论巍、導(dǎo)出等設(shè)置項只顯示標(biāo)題烛谊，內(nèi)容全部隱藏不展示，保證了操作信息的所見即所得环壤。當(dāng)用戶增加設(shè)置項時晒来，系統(tǒng)都會給出默認(rèn)設(shè)置，用戶根據(jù)需要只要修改內(nèi)容即可郑现。

另外 Figma 還采用了交互操作湃崩，減少頁面的信息量。例如可下拉的選項默認(rèn)不展示下拉按鈕接箫，而是在鼠標(biāo)懸停時展示攒读，從而讓原本信息繁雜的頁面變得更加清爽。

而 Axure 則將內(nèi)容信息平鋪展示辛友，無論用戶是否需要操作薄扁，都會顯示設(shè)置項的內(nèi)容。這樣的布局設(shè)計確實可以減少用戶一次點擊操作废累，但是低頻操作的設(shè)置項反而增加了頁面信息量邓梅，成為了頁面的信息噪點。

2. 適配用戶習(xí)慣邑滨，減少頁面信息量

用戶為了提高自行為效率日缨，不會對所有頁面元素命名，其實用戶的命名頻率并不高掖看。所以 Figma 在元素屬性設(shè)置中匣距，沒有修改元素名稱的選項，而是放在了圖層列表中修改哎壳。而 Axure 元素屬性中毅待，命名作為首要內(nèi)容放置在了最頂端。

3. 統(tǒng)一的對齊方式归榕，讓信息更加有序

兩者在信息布局和對齊上也有所差異尸红。Figma 采用的是上下布局的方式，上方是功能標(biāo)題，下方是設(shè)置內(nèi)容驶乾。信息層級更加明顯邑飒，也更加符合用戶的瀏覽習(xí)慣。同時具有很好的一致性级乐。

而 Axure 以左右布局為主疙咸，左側(cè)是標(biāo)題信息，右側(cè)是內(nèi)容項风科。我個人理解這樣的布局方式是為了壓縮高度方向的尺寸撒轮，盡可能的保證設(shè)置項一屏完整展示出來，避免出現(xiàn)滾動條贼穆，增加用戶操作成本题山。但是這種布局方式卻造成了內(nèi)容展示的混亂。

另外不同長度的底邊型輸入框故痊，也增加了內(nèi)容的繁雜和錯亂感覺顶瞳，造成了頁面信息的無序感。

可視化設(shè)計

在設(shè)計工具中愕秫，可視化設(shè)計更多的用在位置相關(guān)功能慨菱，輔助用戶更好的理解信息，從而降低用戶的思考成本戴甩。所以兩者在設(shè)置選項中都增加了可視化的形式符喝。

例如上文提到的 Padding 設(shè)置，F(xiàn)imga 采用的是可視化的形式甜孤，用戶直接對號填寫就可以了协饲，用戶的思考成本更低，甚至可以說是 0 成本缴川。Axure 中的圓角設(shè)置茉稠、邊線可見性設(shè)置也都采用了可視化的形式。并且可視化還具備操作功能把夸，方便用戶操作而线。

寫在最后

當(dāng)然 Figma 中的設(shè)計細(xì)節(jié)不止這些，不過很多設(shè)計并不是 Figma 的全新創(chuàng)新扎即，而是在 Axure 和 Sketch 基礎(chǔ)上優(yōu)化而來的。所以有價值的設(shè)計并不一定是為了翻天覆地的推倒重來時况凉，也可以站在巨人的肩膀上谚鄙，做出符合自己產(chǎn)品定位和特色的設(shè)計方案。