2022-3-3 高勁
近一年來(lái)，F(xiàn)igma 可謂是體驗(yàn)設(shè)計(jì)領(lǐng)域中最熱門(mén)的工具。剛好最近開(kāi)始頻繁的在 Axure 9.0 和 Figma 中切換使用，深刻的感受到了設(shè)計(jì)細(xì)節(jié)帶來(lái)的體驗(yàn)差異化。今天就通過(guò)一些細(xì)節(jié)亮點(diǎn)，總結(jié)下工具軟件的體驗(yàn)設(shè)計(jì)的幾個(gè)原則。
事先聲明，本文不是對(duì)比軟件工具孰優(yōu)孰劣，僅僅是為了探討設(shè)計(jì)技巧，希望對(duì)你有所幫助。
本文主要的內(nèi)容包括：
工具軟件首要的任務(wù)就是追求效率，減少用戶(hù)的操作成本。
組件化設(shè)計(jì)
Figma 擁有強(qiáng)大的組件功能，類(lèi)似于 Axure 中的母板，但是更加靈活。既有父子繼承關(guān)系，實(shí)現(xiàn)了修改父組件后，子組件可以同步修改。但是子組件又有一定的獨(dú)立性，內(nèi)容可編輯，保證了靈活可用。而 Axure 母版則是強(qiáng)制性的，一旦修改了父組件的內(nèi)容，子組件必然修改。
樣式模板化
在 Figma 中，用戶(hù)可以創(chuàng)建自己的色彩、描邊和陰影樣式庫(kù)，在設(shè)計(jì)中隨時(shí)調(diào)用，一勞永逸，減少了頻繁調(diào)整樣式的操作成本。
預(yù)置選項(xiàng)可以有效的提高用戶(hù)效率。例如字號(hào)設(shè)置時(shí)，Axure 并沒(méi)有預(yù)置選擇項(xiàng)，用戶(hù)需要手動(dòng)輸入修改。在 Figma 中則預(yù)置了常用字號(hào)，用戶(hù)下拉選擇即可。另外 Axure 默認(rèn)字體是 13 號(hào)，而 Figma 是 14 號(hào)字體，更加貼合設(shè)計(jì)師的主流使用字號(hào)，減少了用戶(hù)的修改次數(shù)。
批量修改是我們最常用的提高效率的設(shè)計(jì)手段。Figma 和 Axure 都有 padding 設(shè)置功能。不過(guò) Figma 可以一鍵操作，用戶(hù)輸入一次就可以修改四個(gè)邊距，調(diào)整效率更高。而 Axure 想要設(shè)置四邊等距，則要逐個(gè)修改，操作上相對(duì)繁瑣。
在工具軟件中，對(duì)象的屬性欄應(yīng)該是用戶(hù)的高頻操作區(qū)域。
整體布局上，F(xiàn)igma 和 Axure 基本一致，都是包含了 3 個(gè)模塊?？梢栽O(shè)置對(duì)象的各種屬性、交互效果設(shè)計(jì)等。而基礎(chǔ)屬性模塊更是用戶(hù)操作的重中之重。
不過(guò) Figma 屬性欄通過(guò)信息分級(jí)展示、內(nèi)容精簡(jiǎn)、有序布局等設(shè)計(jì)方法，帶給用戶(hù)更好的體驗(yàn)。
1. 分級(jí)展示，隱藏不必要的內(nèi)容
創(chuàng)建元素時(shí)，F(xiàn)igma 屬性欄默認(rèn)只顯示位置尺寸信息、圖層透明度和填色等基礎(chǔ)信息，描邊、投影、導(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 還采用了交互操作，減少頁(yè)面的信息量。例如可下拉的選項(xiàng)默認(rèn)不展示下拉按鈕，而是在鼠標(biāo)懸停時(shí)展示，從而讓原本信息繁雜的頁(yè)面變得更加清爽。
而 Axure 則將內(nèi)容信息平鋪展示，無(wú)論用戶(hù)是否需要操作，都會(huì)顯示設(shè)置項(xiàng)的內(nèi)容。這樣的布局設(shè)計(jì)確實(shí)可以減少用戶(hù)一次點(diǎn)擊操作，但是低頻操作的設(shè)置項(xiàng)反而增加了頁(yè)面信息量，成為了頁(yè)面的信息噪點(diǎn)。
2. 適配用戶(hù)習(xí)慣，減少頁(yè)面信息量
用戶(hù)為了提高自行為效率，不會(huì)對(duì)所有頁(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)容。信息層級(jí)更加明顯，也更加符合用戶(hù)的瀏覽習(xí)慣。同時(shí)具有很好的一致性。
而 Axure 以左右布局為主，左側(cè)是標(biāo)題信息，右側(cè)是內(nèi)容項(xiàng)。我個(gè)人理解這樣的布局方式是為了壓縮高度方向的尺寸，盡可能的保證設(shè)置項(xiàng)一屏完整展示出來(lái)，避免出現(xiàn)滾動(dòng)條，增加用戶(hù)操作成本。但是這種布局方式卻造成了內(nèi)容展示的混亂。
另外不同長(zhǎng)度的底邊型輸入框，也增加了內(nèi)容的繁雜和錯(cuò)亂感覺(jué)，造成了頁(yè)面信息的無(wú)序感。
在設(shè)計(jì)工具中，可視化設(shè)計(jì)更多的用在位置相關(guān)功能，輔助用戶(hù)更好的理解信息，從而降低用戶(hù)的思考成本。所以?xún)烧咴谠O(shè)置選項(xiàng)中都增加了可視化的形式。
例如上文提到的 Padding 設(shè)置，F(xiàn)imga 采用的是可視化的形式，用戶(hù)直接對(duì)號(hào)填寫(xiě)就可以了，用戶(hù)的思考成本更低，甚至可以說(shuō)是 0 成本。Axure 中的圓角設(shè)置、邊線可見(jiàn)性設(shè)置也都采用了可視化的形式。并且可視化還具備操作功能，方便用戶(hù)操作。
當(dāng)然 Figma 中的設(shè)計(jì)細(xì)節(jié)不止這些，不過(guò)很多設(shè)計(jì)并不是 Figma 的全新創(chuàng)新，而是在 Axure 和 Sketch 基礎(chǔ)上優(yōu)化而來(lái)的。所以有價(jià)值的設(shè)計(jì)并不一定是為了翻天覆地的推倒重來(lái)時(shí)，也可以站在巨人的肩膀上，做出符合自己產(chǎn)品定位和特色的設(shè)計(jì)方案。
文章來(lái)源：優(yōu)設(shè)網(wǎng) 作者：子牧先生
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.wtxcl.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wtxcl.cn