ui設計的基本原則（ui設計怎麼做）

2023-06-26 12:03:33

轉自：彩虹BOOLK

前言：這篇文章介紹了日常使用的10個省時間的小技巧，非常實用，一起來看看吧！

1.用“scale”工具避免變形

你有沒有在Sketch中試著整組拉伸？然後所有的元素都變形了，文字不會隨著拖拽卡片而變大。

這裡提供一個非常節省時間的解決方案，一旦你使用了這個按比例變形的工具，就再也不用手動調整每個元素的大小了。

下面是使用方法：選中你想更改的整組元素，單擊頭部的“Scale”按鈕或者使用快捷鍵“CMD K”。然後你可以設定百分比或者寬高，完成！

2.用Craft外掛自動填充內容

Sketch中的Craft外掛有一系列的工作流程增強工具，除了上傳畫板到Invision, 我使用的最多的是自動填充功能。

使用方法：你需要選中圖片或文字，然後選擇你想要新增的內容，你也可以直接從電腦硬碟中直接拖動內容進去。

這個工具非常智慧，它可以為我的設計圖自動填充內容，（填充功能主要有三類：圖文，網頁內容，Json檔案），可以節省大把的編造內容的時間。

3.用Illustrator輕鬆建立色板

使用Illustrator的混合工具，秒速建立色板。這個混合工具省去了很多製作色板的時間，當然其他工具也能製作色板，但這個絕對是最快的。

做法如下：

第1步：做兩個矩形，其中一個填充你想要的顏色，然後另一個填上白色。

第2步：選擇兩個矩形，然後開啟混合選項，Object>Blend>Blend Options，然後將間距設定為“specified steps”然後設定你想要的顏色數量。

第3步：選中兩個矩形，然後點選Object>Blend>Make，或者使用快捷鍵Option CMD B，完成！

4.Tidy up & Smart alignment

Tidy up 是我最喜歡的Sketch和Figma工具之一，如果我有一組內容需要對齊，我可以選中他們然後單擊角上藍色的整理icon，在Sketch中，點選右上角的“Tidy”，再選中他們進行拖拽到我需要的間距。

Sketch和Figma中的智慧排列是另一個很棒的工具，如果我有一組同樣尺寸排列的專案，我可以通過“點選中間的圓點，然後拖動到新的圓點上”，這樣就能快速的切換他們之間的位置，非常簡單！

5.用ellipses避免破壞設計佈局

使用ellipses是個很棒的技巧，我之所以提到它，是因為很多新手設計師會有類似需要改變背景卡片來容納所有元素的需求。

在上面的例子中，“Outback Steakhouse”可以假定為使用者知道他們買的是什麼，如果使用者不確定這是什麼，他們可以點選檢視交易詳情。

需要注意的是，我只推薦Ellipses用於使用者不會立即使用的資訊呈現，或者不會打斷使用者的資訊呈現，如果這是一個非常重要的資訊，就不要用Ellipses。Ellipses通常來說非常好用，但是考慮到互動體驗，請保證它的使用不會讓使用者感到迷惑。

6.WhatFont實時搜尋字型

在我們瀏覽網頁的時候，有時候會看到特別喜歡的字型，相對於去檢查頁面原始碼，在Chrome瀏覽器中使用WhatFont外掛更方便。

當我看見喜歡的字型時，點選Chrome擴充套件圖示然後可以迅速找出這是什麼字型，然後我在Google中搜尋，如果是免費字型就可以下載使用了。

7.用計算器功能改變尺寸和位置

如果你還沒意識到，你可以在在任何Sketch的輸入框中使用計算器，計算器可以在Sketch，XD，Figma等很多設計軟體中使用。

使用舉例：如果我有一個100px寬的矩形框，我可以快速的在寬度欄輸入100/2，然後就將矩形框的寬度變為50px了。

在我需要加倍或者縮小倍數時，計算器用起來非常順手。

8.用數字鍵改變圖層透明度

更改透明度的快捷鍵讓我在改變圖層的透明度的時候節省了大量時間。

要應用這個技能，你只需要選中想要改變的內容，然後單擊鍵盤上的1-9即可，然後透明度就會立即實現出來，想要70%透明度，按下鍵盤上的7就OK了。

這是我在很多設計專案中都會用到的技巧。

9.Sketch智慧輪廓

智慧輪廓是Sketch中的新功能，如果你還沒有用過這個，那可就浪費了太多時間了。

智慧輪廓可以根據內容和你設定好的邊距自動調整外輪廓。

想要使用這個技巧，你只需要建立一個輪廓，然後點選，建立symbol，然後根據你的喜好設定外輪廓，比如說設計一個Button，我設定了從中心開始拓展輪廓。

使用這個工具可以做很多工作，檢視Sketch的blog可以獲得更多使用方法。

10.icon管理工具Iconjar

Iconjar是一個儲存和管理icon的簡單應用，節省了我下載icon的時間，不管什麼時候我需要一個icon，直接去Iconjar裡面找就好了。

使用這個軟體非常簡單：首先，我找到一個喜歡的icon庫，比如說很多我喜歡的icon資源有：Box icons/Noun Project/Feather/Material Icons，然後下載下來，拖進Iconjar裡面，然後命名一個資料夾。

之後我就可以快速的在Iconjar裡面搜尋我需要的icon, 然後直接拖進設計檔案裡。