設計好看 UI 的七個方法

前端很重要的一項技能就是切版,切版就是一項看似簡單,但充滿眉眉角角的一項技能。也是在自己使用 Figma 設計 UI 之後,才更了解到專業的重要。

UI 設計的工作,大至整個版面的風格要統一,小至每個 element 相差幾個 pixel。

有時候公司沒有 UIUX 設計師時,設計版面的工作就會變成前端的工作之一,但有時候不太懂一些設計概念時,只要掌握以下七點就可以設計出不失敗的 UI,沒錯,就是不失敗,一種順眼好的概念。

此篇會以工程師的角度看設計,所以有許多不專業的地方再請多包涵。

原文連結:7 UI Design Fundamentals for Developers - DEV Community

  1. 空白的空間
  2. 對齊
  3. 對比度
  4. 大小
  5. 字體排版學
  6. 顏色
  7. 視覺的層次

空白的空間

使用一些空白空間可以讓整體視覺更舒適,包括了字的間距(line-height),卡片的上下左右。

下方的圖可以看到非常明顯的對比,視覺上右邊的卡片會比左邊的卡片好看許多,讓人比較不會有壓迫感,這就是使用一些空白空間的重要性。

對齊

以下兩張圖有很明顯的對比,對齊也是設計當中很重要的元素,比起雜亂無排序的樣子,人的眼睛更喜歡整齊的排列,一方面好找資料,一方面整體視覺也較舒適。

上方圖一,logo,headline,text,button 都沒有對齊。

上方圖二,logo,headline,text,button 對齊在同一條線上,看起來是不是會有更好的使用體驗。

對比度

明顯的對比可以讓人快速的找到頁面中的亮點,像是下圖中的 button。

當 button 一個是灰色,一個是紫色時,呈現出來的感覺就會差很多。

當背景又很花時,明顯的對比才更能讓人掌握住重點。

就像製作簡報時,應該要將整個簡報中最重要的部分,用最亮眼的顏色標出,就可以讓人快速找到講者在這一頁想要表達的精隨是什麼。

大小

元素的大小也十分重要,以下兩張圖,可以看得出對比。空間足夠的卡片讓人看起來更賞心悅目。

上方圖一,可以發現他的 title,還有 subtitle 都不夠顯眼,整個頁面也十分擁擠。

上方圖二,可以發現不同的是,title 加粗且變得更大,而 subtitle 縮小,讓人可以直接看到重點的 title,整個頁面就十分成功的表達重點。

字體排印學 Typography

AKA 文字設計,也是看這篇文才發現字體排印是個大學問,這邊只需要掌握一個重點就是,頁面中的

  • 文型
  • 大小
  • 距離

統一風格就好

以下圖來講,充滿著各種字體,不僅看起來雜亂,也會有種難以閱讀的感覺。

相較於上圖,下圖的字型統一給人的感受就差異甚大。

所以在一個頁面中,最多就不超過兩種字體,統一的字體可以有更好的使用者體驗。

顏色

色彩在設計中也是非常重要的,色彩學也是一門大學問。不同的顏色也代表不同含意,以綠色為例,它象徵著生長與健康,紅色象徵著警告與熱情,黑色的象徵優雅與奢華。

在設計 UI 的顏色之前,可以先想應用程式的目標族群,再來考慮主視覺的顏色。

也需要避免使用過多的顏色,過多的顏色會讓版面顯得雜亂不堪,所以需要特別注意。

視覺層次

每個元素對使用者來說都又不同的重要程度,如果希望使用者在某個地方留下資料,就需較將它凸顯出來,那如何凸顯出來呢?

可以使用視覺層次來呈現,以下圖來說,我們會無法明確地區別哪個元素屬於 Email Address。

所以以下方第二張圖來說,後面增加一層 Layout,就可以讓整個 Email Address 變得很清楚。

那麼視覺層次還有許多的眉角要注意,可以參考這篇文章

結論

設計出好看的 UI 不難,只要遵循這七個方法,基本上就可以拿到及格的設計。

或是,當你看到可以改善的 UI 設計時,可以遵循這七個方法來給予對方建議。

一起成為有美感的工程師吧!


設計好看 UI 的七個方法
https://phoebeho.com/Translate/20211006/3472350832/
作者
Phoebe
發布於
2021年10月6日
許可協議