UX 設計師寫給 UI 新手的 7 個法則(上)

作者是一位 UX 設計師,他通過自己學習 UI 設計的過程,一次一次從失敗中學習、分析,最後總結出 7 條實用的法則,為 UI 設計新手提供了寶貴的經驗。
評論
評論

本文編譯自 Medium,作者是一位 UX(User Experience, 使用者體驗)設計師,他通過自己學習 UI 設計的過程,總結出 7 條實用的法則,為 UI 設計新手提供了寶貴的經驗。文章分為 2 個部分,這裏是第 1 部分。

序言

首先,明確一點,這篇文章並不是為所有人準備的,而是有特定的目標讀者:

  • 想要在開發產品時設計出好看 UI 的開發者。
  • 想要讓自己作品集更出色的 UX 設計師,或者是想要做出更精美的 UI 和 UX 的設計師。

如果你是學藝術的學生或者已經是 UI 設計師了,你可能覺得這篇文章很無聊,而且觀點都是錯的。沒關係,你的批評沒錯,把這個網頁關了,去忙別的事吧。

那麽從這篇文章中到底能學到什麽呢?我曾是一名不懂 UI 的 UX 設計師。我非常熱愛 UX 設計,但是後來我發現,做出精美的介面是多麽的必要:

  • 我以前的作品集看起來一團糟,顯得我的作品和思考過程很差勁。
  • 我做 UX 諮詢的客戶更喜歡有能力呈現作品的人,而不是只會畫一堆方塊和箭頭的人。
  • 我能為一些早期的創業公司工作嗎?還是一邊待著吧。

我當然也有藉口:

我沒有美術基礎,我主修工程,所以我做出難看的東西也無可厚非。

最終,我還是學了 APP 設計,不斷地分析案例,厚著臉皮臨摹成功的作品。假設我在 1 個 UI 專案上花 10 個小時的時間,其中只有 1 個小時是有效的,其它 9 個小時都是在失敗中不斷地學習,拼命在 Google、Pinterest 或者 Dribbble 上找值得借鑒的東西。

下面這些「法則」都是我從失敗中總結出來的。 所以,我需要提醒新手們:我現在擅長 UI,是因為我經常分析,並不是突然開悟,理解了什麽是美,什麽是平衡。

這篇文章不講理論,只談應用。我不會講什麽黃金分割、色彩理論,只有實戰中總結出的經驗和教訓。就好像,柔道源於日本幾個世紀以來的尚武精神和哲學理念;上柔道課時,不僅能學到打鬥,還會學到很多關於能量、氣、與和諧之類的東西。而以色列格鬥術(Krav Maga)則完全不同。這種格鬥術是猶太人在納粹壓迫下發明的,其中根本沒有「藝術」,在以色列格鬥術的課堂上,你學到就是怎樣用一根筆或者本書襲擊別人的眼睛。

這篇文章就是產品設計領域的以色列格鬥術。

以下是我要講的法則:

  1. 光線來自天空
  2. 黑白優先
  3. 增加空白空間
  4. 學會在圖片上呈現文字(第2部分)
  5. 做好強調和淡化(第2部分)
  6. 只用好的字體(第2部分)
  7. 善於借鑒優秀的作品(第2部分)

我們來一起看看這些法則。

法則 1:光線來自天空

陰影能夠告訴人腦我們到底在看什麽樣的 UI 元素。

這可能是學習 UI 設計時,最容易忽略卻又極為重要的一點了: 光線來自天空。光線總是從天空(上方)來的,從下面照上來的光看起來會非常詭異。

當光線從天上照下來的時候,物品的上端會偏亮,而下方會出現陰影。上半部分顏色淺一些,而下半部分深一些。

從下面打一束光到人臉上,是不是看起來很嚇人?UI 設計也是同理。 我們的螢幕是平面的,但是我們可以通過一些藝術手法讓它看起來是立體的,在每個元素的下方加一些陰影。

就拿這個按鈕舉例,這是一個相對「扁平(flat)」的按鈕,但依然可以看出一些光線變化的細節:

  1. 沒有按下去的按鈕 底部邊緣更暗 ,因為沒有光線照到那裏。
  2. 沒有按下去的按鈕 上半部分比下半部分稍微亮一些 。這是在模仿一個略有弧度的表面(見側視圖)。
  3. 沒有按下去的按鈕下方有一些細微的 陰影 ,在放大圖中看得更清楚。
  4. 按下去的按鈕整體顏色都更暗 ,但下半部分的顏色依然比上面深。這是因為按鈕在螢幕的平面上,光線不容易照到。也有人說,在現實中,按下去的按鈕顏色更深,因為手遮擋住了光線。

這麽一個簡單的按鈕就有 4 種不同的光線變化。實際上,我們可以把這種原則運用到各處。

iOS 6 有點過時了,但還是學習光線不錯的案例。這張圖是 iOS 6「勿擾模式」和「通知」的設定,看看上面有多少種不同的光線變化。

  • 控制面板的上邊緣有一小塊陰影。
  • 「ON」滑動槽上部也有陰影。
  • 「ON」滑動槽的下半部分,反射了一些光線。
  • 至於圖案則是 突出 的,上邊緣較亮,因為是與光源垂直的,接收了大量光線,折射到你的眼睛中。
  • 因為光線角度的問題,分割線處出現了陰影。

通常會 內嵌(Inset) 的元素:

  • 文字輸入框
  • 按下的按鈕
  • 滑動槽
  • 單選框(未選擇的)
  • 複選框

通常會 外凸(Outset) 的元素:

  • 未按下的按鈕
  • 滑動按鈕
  • 下拉選單
  • 卡片
  • 選擇後的單選按鈕
  • 彈出消息

當跟你說這些設計小細節之後,你就會開始注意這些設計。

等等,現在不是追求扁平化的設計嗎?

iOS 7 引發了科技界對於「扁平化設計(flat design)」的追求。也就是說圖標是平的,不再模仿實物而外凸或內凹,只有線條和單一顏色的形狀。

我很喜歡這種 乾淨、簡潔 的風格,但是我認為這種趨勢不會長久。通過細微的變化模擬出 3D 的效果非常自然,不會被完全取代的。

在不久的將來,我們很可能會看到半扁平(semi-flat)的 UI(這也是我推薦你使用的設計風格)。我把它稱為「flatty design」,依然非常乾淨簡潔,但是也有一些陰影,有輕點、滑動、按下操作的提示。

現在,Google 也在各個產品上推行他們的 Material Design,提供一種統一的視覺設計語言。Material Design 的設計為我們展示了它如何運用陰影表現不同的層次。

這也是我所認同的類型。用現實世界的元素來傳遞信息,關鍵就在於: 細微(Subtle)。你不能說它沒有模仿現實世界,但也絕不是 2006 年的網頁風格,沒有紋理,沒有梯度,更沒有光澤。

我認為「flatty」是未來的方向。扁平化?!早晚會過時的。

法則 2:黑白優先(B&WF)

在上色前用灰度模式設計可以簡化大量的工作,讓你更加關注空間和元素布局。

UX 設計師現在都喜歡「行動優先」的概念,這就意味著你要先考慮好在手機上如何顯示頁面,然後才考慮在超清的 Retina ㄧㄥ上的顯示效果。

這種限制非常好,能夠幫你理清思路。 先解決一些棘手的問題(在小螢幕上顯示)。然後再解決簡單的問題(在大螢幕上的可用性)。

我希望你先用黑色和白色設計,先把複雜的問題解決了。在不借助顏色的幫助下把 App 做得美觀易用。最後再 有目的地上色

這種方法能保持 App「乾凈」、「簡潔」。 加入過多的顏色很容易毀掉簡潔性 。「黑白優先」會促使你關注空間、尺寸和布局這些更重要的問題。先來看一些經典的用灰度模式設計的頁面。

「黑白優先」法則並不適用於所有情況,比如運動、卡通等有著鮮明特色的設計就需要好好地運用各種顏色。不過大部分 App 並沒有這樣鮮明的特點,只要保持乾凈和整潔就好 ,絢麗的顏色被公認是很難設計的,所以還是先用黑色和白色來吧。

如何上色

上色最簡單的方法就是只加一種顏色。

在灰色的基礎上只加一種顏色可以簡單快速的吸引眼球和注意力。

你也可以更進一步,在灰色的基礎上加兩種顏色,或者添加統一色調的多種顏色。

實踐中的顏色法則 —— 什麽是色調?

網頁主要用的是十六進制 RGB 表。但 RGB 不是個好的顏色設計框架,HSB 模式會更好用,其中 H (hues) 表示色相,S (saturation) 表示飽和度,B(brightness)表示亮度。

HSB 模式是比 RGB 模式更適合我們看待顏色的方式。如果你對這方面不太了解,以下是一些 HSB 模式簡單的入門知識。

通過調整單一色相的 飽和度亮度 ,你可以生成各種不同的顏色 —— 深色、淺色、背景色、強調的地方、吸引眼球的地方等,但是又不會讓人眼花繚亂。

不把設計搞得一團糟的最可靠的方法,就是使用 同一種基礎色相中的多種顏色 來強調和淡化某些元素。

關於顏色的其它幾點建議

顏色是視覺設計中最覆雜的。我從覆雜的理論和長期的實踐中挑出了一些好的建議送給你:

小工具箱:

  • 不要用純黑色:在現實世界中幾乎見不到絕對的黑色。調整不同的飽和度可以增加設計的豐富程度,也更接近現實世界。
  • Adobe Color CC:尋找、調整、創造顏色組合的絕佳工具。
  • 在 Dribbble 通過顏色搜尋:尋找某種顏色如何搭配的好方法,非常實用,如果你已經決定了要用那種顏色,可以通過顏色搜尋看看世界頂級的設計師是如何配色的。

法則 3:增加空白空間

為了讓 UI 看起來更加有設計感,多留一些空白。

在第 2 條法則中,我說到了黑白優先(B&WF)原則,讓設計師在考慮顏色之前先想想空間和布局,那麽現在我們就來說說如何安排空間和布局。

HTML 的預設版式是這樣的:

所有東西都堆在螢幕上,字型、行距都很小,段與段之間有一些間隔,但是也不是很大。這麽布局實在是太難看了。 如果你想設計出精美的 UI,那就需要留出更多空白的空間。

留白空間、HTML 和 CSS

如果你和我以前一樣,習慣用 CSS 來調整布局,那你最好改掉這個壞習慣,因為 CSS 預設是沒有留出空間 的。試著把空白當作預設狀態,在空白頁面添加各種元素。從沒有修飾過的 HTML 開始,先做好內容,然後再做排版。

下圖是 Piotr Kwiatkowski 設計的一個音樂播放器。

請注意左側的直立選單。字號是 12px,行間距有文字的兩倍高。再看看列表的名稱,「PLAYLISTS」和下劃線之間有 15px 的空白,播放列表名稱之間還有 25px 的間距。

在頂部導航欄也有很大的空間,搜尋圖標和「Search all music」占了了導航欄高度的 20%。

留白的空間收到了良好的效果,不同的元素有機的組合在一起,使得這個頁面成為最好的音樂播放器 UI 之一。

大量的空白可以把混亂的介面做得簡潔美觀,比如這個論壇:

或者維基百科:

很多人認為在維基百科的這個新頁面上,很多功能找不到了,但是你不能否認這是學習頁面設計的一個好案例。

  • 在行之間留出空間。
  • 在各個元素之間留出空間。
  • 在各組元素之間留出空間。
  • 分析一下哪些是可行的。

好了,以上就是第 1 部分的內容,感謝閱讀!

在第 2 部分中,我會解釋剩下的 4 條法則:

  1. 學會在圖片上呈現文字
  2. 做好強調和淡化
  3. 只用合適的字體
  4. 善於借鑒優秀的作品

〉〉 繼續閱讀 寫給 UI 新手的 7 個法則(下)

 

歡迎加入"Inside" Line 官方帳號,關注最新創業、科技、網路、工作訊息

好友人數

網路服務領導者第一線 DYXnet,以優質資料中心及 BMS 方案成企業數位轉型最強助手

第一線作為大中華區領先的電信中立網路服務供應商,提供企業可靠、安全、靈活管理的 IDC 解決方案,包含 IDC 機房服務以及新型態雲服務─Bare Metal Service (BMS),在兼顧效能及成本效益之下,協助企業擁抱新世代商業型態。
評論
photo credit:第一線DYXnet
評論

近年 5G、AIoT、大數據及數位內容等服務蓬勃發展,企業也逐漸走向多雲、混合雲部署,同時因為疫情促使遠距會議、宅經濟及影視產業商機崛起,大幅提升企業對各類數據的應用,為因應雲端化及數位轉型而急速增加的跨國通訊傳輸,企業對於資料的妥善儲存和維護亦面臨極大的挑戰。

第一線作為大中華區領先的電信中立網路服務供應商,提供企業可靠、安全、靈活管理的 IDC(Internet Data Center)解決方案,包含 IDC 機房服務以及新型態雲服務─Bare Metal Service (BMS),在同時兼顧效能及成本效益之下,協助企業全力擁抱新世代商業型態,簡單迅速地佈局海外市場,在後疫情時代下取得先機,創造雙贏。

第一線提供全方位的 IDC 解決方案,解決企業快速拓展需求

第一線提供全方位的 IDC 機房服務,滿足企業對機房環境高坪效、高品質及高穩定度的要求,企業無須煩惱自建機房昂貴的成本及繁瑣的管理業務,即可享有營運商等級的基礎設施、全球串聯的便捷網路,以及安全可靠的設施環境。

第一線的 IDC 機房基礎設施包含強大的跨國際骨幹網路架構、電力備援系統、環境控制及防火保護,以符合國際電信機房的標準。另外 7X24X365 全天候的監控與技術支援服務,讓企業主可在安全的環境中,穩定快速地處理所有對內與對外的需求。

第一線的 IDC 機房基礎設施包含強大的 跨國際骨幹網路架構、電力備援系統、環境控制及防火保護,以符合國際電信機房的標準,提供企業專業的 IDC 服務。(本圖為示意,非第一線機房圖片) / photo credit:第一線DYXnet

第一線曾協助某大型雲端供應商,在 2019 年新加坡宣布暫停建置新資料中心後,透過自身強大的合作夥伴人脈,獨家取得獨立資料中心的樓層,完成建置逾 300 個機櫃的任務。第一線也針對客戶的需求,客製化整體電力、空調系統、機房隔間、門禁系統等,增設維運管理及人力外派,一條龍整合資源,一次購足免除客戶東奔西走的繁雜準備,更能專注於核心業務發展。

輕量彈性新選擇─Bare Metal Service 新型態雲服務

Bare Metal Service (BMS) 提供自媒體、串流平台及遠端應用等新型態商業模式公司,高彈性、高安全性、低營運成本、輕資產,快速部署的雲端資料中心解決方案,企業無須一次性支付大筆費用,以使用量彈性計費,讓每一分預算都能花在刀口上。

由第一線採購部署,縮短客戶採購建置週期,BMS 具有更高的靈活性及成本優勢,也大幅提升資料乘載,能支援大數據、高效能資料庫,更能應對遊戲及財務金融產業,高資料負載需求,讓每個用戶擁有專屬、靈活且高效能的服務。

第一線累積逾20年的服務經驗,為企業客戶提供標準化及客製方案多元選擇,並善用 BMS 的優勢,實現物理性阻隔獨佔使用資源,同時結合全球資料中心足跡與實體資源分隔,提升安全性,滿足複雜的安全與法規需求。

以第一線的電商客戶為例,電商產業淡旺季的資源需求有所不同,傳統的資料中心解決方案無法彈性應變,因此第一線結合紅帽 OpenShift 容器平台技術打造「一體化混合雲解決方案」,除了依照客戶的促銷週期,提供即時標準設備的短期服務及快速擴充,7x24 小時全天候遠端及現場的技術支援,迅速排除困難,在這次的合作中,第一線協助客戶靈活地佈建資源,貼心且可靠的技術團隊也成為客戶最有力的後盾。

選擇第一線 DYXnet,成為產業最前線

數位經濟浪潮加速來襲,身處瞬息萬變的網路世界和高度競爭的商業環境,高效、安全穩定的伺服器、資料庫及網路設備成為不可或缺的要素,有鑑於各國對於資料主權及落地權的要求愈來愈高,企業對於資料中心及跨境連線的重視程度也日益升高。

第一線專業、積極且到位的服務深受大中華地區企業口碑肯定,囊括 ISO 27001、ISO 20000、ISO 9001 認證,採取最嚴格的安全措施,以業界最佳標準作業提供服務。

此外,第一線自 2008 年以來,積極於東南亞佈局網路資料中心,深耕東南亞市場多年,豐富的人脈及合作經驗,也是企業發展新南向業務最為可靠的夥伴。第一線在海內外豐富的合作經驗,能有效提供各類型企業專業的 IDC 解決方案,更推出 BMS 全方位服務,滿足企業成本、安全性、服務品質等多重考量,協助企業在數位經濟下快速發展數位業務。

第一線(DYXnet)憑藉卓越的團隊領導及經營,優良的企業形象,及豐沛的專業素養,榮獲中華民國傑出企業管理人協會頒發的「第二十一屆金峰獎十大傑出企業」。 / photo credit: 中華民國傑出企業管理人協會

第一線 DYXnet