<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • 從3個方面,總結 Figma 值得借鑒的交互細節!

          2022-3-3    周周

          近一年來,Figma 可謂是體驗設計領域中最熱門的工具。剛好最近開始頻繁的在 Axure 9.0 和 Figma 中切換使用,深刻的感受到了設計細節帶來的體驗差異化。今天就通過一些細節亮點,總結下工具軟件的體驗設計的幾個原則。

          事先聲明,本文不是對比軟件工具孰優孰劣,僅僅是為了探討設計技巧,希望對你有所幫助。

          本文主要的內容包括:

          1. 效率設計:提高用戶行為效率
          2. 簡潔化設計:降低信息噪點
          3. 可視化設計:減少用戶思考成本

          效率設計

          工具軟件首要的任務就是追求效率,減少用戶的操作成本。

          1. 模板化設置

          組件化設計

          Figma 擁有強大的組件功能,類似于 Axure 中的母板,但是更加靈活。既有父子繼承關系,實現了修改父組件后,子組件可以同步修改。但是子組件又有一定的獨立性,內容可編輯,保證了靈活可用。而 Axure 母版則是強制性的,一旦修改了父組件的內容,子組件必然修改。

          樣式模板化

          在 Figma 中,用戶可以創建自己的色彩、描邊和陰影樣式庫,在設計中隨時調用,一勞永逸,減少了頻繁調整樣式的操作成本。

          從3個方面,總結 Figma 值得借鑒的交互細節!

          2. 選擇代替輸入

          預置選項可以有效的提高用戶效率。例如字號設置時,Axure 并沒有預置選擇項,用戶需要手動輸入修改。在 Figma 中則預置了常用字號,用戶下拉選擇即可。另外 Axure 默認字體是 13 號,而 Figma 是 14 號字體,更加貼合設計師的主流使用字號,減少了用戶的修改次數。

          從3個方面,總結 Figma 值得借鑒的交互細節!

          3. 批量修改

          批量修改是我們最常用的提高效率的設計手段。Figma 和 Axure 都有 padding 設置功能。不過 Figma 可以一鍵操作,用戶輸入一次就可以修改四個邊距,調整效率更高。而 Axure 想要設置四邊等距,則要逐個修改,操作上相對繁瑣。

          從3個方面,總結 Figma 值得借鑒的交互細節!

          簡潔化設計

          在工具軟件中,對象的屬性欄應該是用戶的高頻操作區域。

          整體布局上,Figma 和 Axure 基本一致,都是包含了 3 個模塊。可以設置對象的各種屬性、交互效果設計等。而基礎屬性模塊更是用戶操作的重中之重。

          不過 Figma 屬性欄通過信息分級展示、內容精簡、有序布局等設計方法,帶給用戶更好的體驗。

          從3個方面,總結 Figma 值得借鑒的交互細節!

          1. 分級展示,隱藏不必要的內容

          創建元素時,Figma 屬性欄默認只顯示位置尺寸信息、圖層透明度和填色等基礎信息,描邊、投影、導出等設置項只顯示標題,內容全部隱藏不展示,保證了操作信息的所見即所得。當用戶增加設置項時,系統都會給出默認設置,用戶根據需要只要修改內容即可。

          另外 Figma 還采用了交互操作,減少頁面的信息量。例如可下拉的選項默認不展示下拉按鈕,而是在鼠標懸停時展示,從而讓原本信息繁雜的頁面變得更加清爽。

          而 Axure 則將內容信息平鋪展示,無論用戶是否需要操作,都會顯示設置項的內容。這樣的布局設計確實可以減少用戶一次點擊操作,但是低頻操作的設置項反而增加了頁面信息量,成為了頁面的信息噪點。

          2. 適配用戶習慣,減少頁面信息量

          用戶為了提高自行為效率,不會對所有頁面元素命名,其實用戶的命名頻率并不高。所以 Figma 在元素屬性設置中,沒有修改元素名稱的選項,而是放在了圖層列表中修改。而 Axure 元素屬性中,命名作為首要內容放置在了最頂端。

          3. 統一的對齊方式,讓信息更加有序

          兩者在信息布局和對齊上也有所差異。Figma 采用的是上下布局的方式,上方是功能標題,下方是設置內容。信息層級更加明顯,也更加符合用戶的瀏覽習慣。同時具有很好的一致性。

          從3個方面,總結 Figma 值得借鑒的交互細節!

          而 Axure 以左右布局為主,左側是標題信息,右側是內容項。我個人理解這樣的布局方式是為了壓縮高度方向的尺寸,盡可能的保證設置項一屏完整展示出來,避免出現滾動條,增加用戶操作成本。但是這種布局方式卻造成了內容展示的混亂。

          另外不同長度的底邊型輸入框,也增加了內容的繁雜和錯亂感覺,造成了頁面信息的無序感。

          可視化設計

          在設計工具中,可視化設計更多的用在位置相關功能,輔助用戶更好的理解信息,從而降低用戶的思考成本。所以兩者在設置選項中都增加了可視化的形式。

          例如上文提到的 Padding 設置,Fimga 采用的是可視化的形式,用戶直接對號填寫就可以了,用戶的思考成本更低,甚至可以說是 0 成本。Axure 中的圓角設置、邊線可見性設置也都采用了可視化的形式。并且可視化還具備操作功能,方便用戶操作。

          從3個方面,總結 Figma 值得借鑒的交互細節!

          寫在最后

          當然 Figma 中的設計細節不止這些,不過很多設計并不是 Figma 的全新創新,而是在 Axure 和 Sketch 基礎上優化而來的。所以有價值的設計并不一定是為了翻天覆地的推倒重來時,也可以站在巨人的肩膀上,做出符合自己產品定位和特色的設計方案。

          文章來源:優設網   作者:子牧先生

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.


          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計m.sdgs6788.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務



          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://m.sdgs6788.com

          存檔

          久久精品亚洲日本波多野结衣| 欧美日韩精品久久免费| 人妻无码中文久久久久专区| 久久精品国产AV一区二区三区| 国内精品久久九九国产精品| 欧美亚洲日本久久精品| 激情伊人五月天久久综合| 亚洲综合久久夜AV | 久久久精品免费国产四虎| 蜜臀久久99精品久久久久久小说| 99久久免费国产精品热| 久久天天躁狠狠躁夜夜网站 | 999久久久免费国产精品播放| 亚洲七七久久精品中文国产| 99国产欧美久久久精品蜜芽| 尹人香蕉久久99天天拍| 国产精品九九久久免费视频 | 国产精品成人无码久久久久久 | 久久受www免费人成_看片中文 | 亚洲中文字幕久久精品无码喷水| 三级韩国一区久久二区综合| 久久96国产精品久久久| 7777久久久国产精品消防器材 | 国产精品免费久久久久影院| 奇米综合四色77777久久| 久久久亚洲裙底偷窥综合| 久久久久亚洲精品中文字幕 | 久久精品国产精品亚洲毛片 | 久久久无码精品亚洲日韩京东传媒| 久久久久亚洲AV成人网| 精品久久人人做人人爽综合| 欧美粉嫩小泬久久久久久久 | 四虎国产精品免费久久5151| 久久国产精品成人影院| AV无码久久久久不卡网站下载| 亚洲中文久久精品无码ww16| 久久综合国产乱子伦精品免费| 婷婷久久久亚洲欧洲日产国码AV | 99久久精品国产一区二区| 久久夜色精品国产网站| 久久精品国产精品亚洲毛片 |