起點(diǎn)課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識8個(gè)易于實(shí)踐的UI設(shè)計(jì)技巧
創(chuàng)建美觀、可用和高效的UI界面需要花費(fèi)時(shí)間，同時(shí)還需要來回多次的設(shè)計(jì)修改。不斷地調(diào)整，最終產(chǎn)出令客戶、用戶和自己真正滿意的東西。
其實(shí)通過一些簡單的調(diào)整，可以快速改善UI設(shè)計(jì)。在這里，總結(jié)了一些易于實(shí)踐的小技巧，這些技巧可以毫不費(fèi)力地幫助設(shè)計(jì)師改善設(shè)計(jì)，并為以后的設(shè)計(jì)實(shí)踐提供有用的指導(dǎo)。
1.?如果文本看起來很沉重，將顏色變淺
當(dāng)涉及長篇內(nèi)容時(shí)，大面積的深色粗體字會給人一種沉重感，而且很跳躍。
通過選擇類似深灰色（#4F4F4F）這樣的顏色可以很容易地解決這個(gè)問題，使文字更容易被識別。
2. 字體越小，行高越大
當(dāng)字體變小時(shí)，增大行高可以獲得更好的可讀性和易讀性。
這里介紹兩個(gè)容易被混淆的概念——行高和行間距：
- 英文的行高是指上一行的基線到下一行基線之間的距離；
- 行間距指的是兩行字體之間的距離，也就是上一行的下限線與下一行的上限線之間的距離。
3.?選擇一種基礎(chǔ)色，再調(diào)整色調(diào)和顏色深淺來增加均勻性
設(shè)計(jì)時(shí)不必總是用多種顏色來填充設(shè)計(jì)。如果項(xiàng)目允許，只需使用固定的色板，通過選擇基礎(chǔ)色，然后調(diào)整色調(diào)和顏色深淺，利用這種簡單的方式為設(shè)計(jì)增加一致性。
4.?突出最重要的因素
通過結(jié)合使用字體大小、權(quán)重和顏色，可以輕松突出UI中最重要的元素。進(jìn)行簡單的調(diào)整即可使用戶體驗(yàn)更好。
5.?為了保持一致性，請確保圖標(biāo)具有相同的視覺樣式
在設(shè)計(jì)UI圖標(biāo)時(shí)，要保持一致。確保它們具有相同的視覺樣式，相同的比重、填充或輪廓。
圖標(biāo)通過視覺手段為用戶提供必要的信息，所以保證功能相同的圖標(biāo)元素一致，外觀視覺一致。
6. 始終將“行為召喚”放在屏幕上最突出的位置
通過使用顏色對比、尺寸和標(biāo)簽，確?！靶袆右蟆北M可能突出。如果可以的話，不要總依賴圖標(biāo)。也可以使用文本標(biāo)簽，以便用戶能更好地理解。
注：行為召喚（Call To Action）: 透過設(shè)計(jì)讓用戶想到要做某種行為，例如提示用戶去觸發(fā)按鈕、文本或圖片。
7.?為表單錯(cuò)誤添加額外的視覺反饋
填寫任何形式的表單時(shí)，在用戶剛進(jìn)行的操作旁邊及時(shí)出現(xiàn)一條錯(cuò)誤反饋，是一個(gè)簡單但有用的額外視覺輔助。
8.?突出顯示菜單中最常用的操作
在設(shè)計(jì)要在產(chǎn)品內(nèi)部使用的菜單時(shí)，請確保在屏幕上突出顯示最常用的操作（如上傳圖像、添加文件等）。
文章翻譯已獲得作者的正式授權(quán)。
原文：https://www.smashingmagazine.com/2020/04/wireframe-design-success/
作者：Anton Suprunenko
譯者：Clippp，微信公眾號：Clip設(shè)計(jì)夾。每周精選設(shè)計(jì)文章，專注分享關(guān)于產(chǎn)品、交互、視覺上的設(shè)計(jì)思考。
本文由 @Clippp 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議
- 目前還沒評論，等你發(fā)揮！
