UI設計技巧:如何利用細節設計讓界面變得更精緻

2020 / 12 / 11
所謂「細節決定成敗」。在UI設計中,如果不注重細節設計,不僅會讓整個界面顯得平淡無奇,甚至會降低界面的易用性,影響用戶的操作體驗。下面,小編將從視覺優化和交互優化兩部分入手,分析「如何利用細節設計讓界面變得更精緻」。

如何利用細節設計讓界面變得更精緻?

◆ UI設計技巧之視覺優化部分

① 背景蒙層技巧

在設計封面和背景圖的場景中,我們會經常在文字添加黑色半透明或漸層蒙層,提高文字信息的可讀性,但有時用純黑色作為蒙層時淺色背景可能會顯得很臟。這是如果將純黑色改為深灰色,不僅不會讓淺色背景看起來臟,而且還能弱化部分背景的黑色,讓整個背景圖開起來更柔和,更清爽。

UI設計技巧:如何利用細節設計讓界面變得更精緻
UI設計技巧
當然,更好的方案是直接拾取背景圖顏色後生成對應色相的深色蒙層,但這種方案需要制定一系列的拾色和生成對應色值的規範,設計流程相對複雜且開發成本偏高,因此有條件的話不妨考慮應用。

UI設計技巧:如何利用細節設計讓界面變得更精緻
UI設計技巧
② 圓角細節的妙用

在日常生活中,我們經常會尖銳的東西視為「危險」,而圓潤的東西才比較「安全」。同樣道理,在UI設計中尖角會給人產生距離感,併產生強烈的刺激感;而圓角則讓人感到親和力和舒適感,因此圓角的運用場景亦非常廣泛。

UI設計技巧:如何利用細節設計讓界面變得更精緻
UI設計技巧
除了常見的按鈕、封面、卡片等,一些細節處理都可以運用圓角來提升設計的質量,如上圖的頭像和背景圖銜接處,以及按鈕和底欄背景的相交缺口,如果運用尖角會讓界面略顯生硬,(如下圖)相反添加圓角處理後視覺上會更加柔和更協調。

UI設計技巧:如何利用細節設計讓界面變得更精緻
UI設計技巧
③ 文字添加顏色傾向

在頁面取色時,為了向用戶提供更舒適的視覺效果,經常會給背景色和陰影等結合場景帶有一些顏色傾向,其實這方法同樣能應用於文字上。

UI設計技巧:如何利用細節設計讓界面變得更精緻
UI設計技巧
有時為了提升設計效率,我們會習慣在選擇字體顏色時使用一套設計規範里的顏色,如灰色、黑色等無色彩顏色,但是對於個別特殊模塊,其實我們也可以根據實際情況調整字體顏色,以獲得更好的視覺效果,讓整個模塊視覺更統一,信息與背景更融合。

④ 不同尺寸的圖標對齊方式

當頁面出現多個同級圖標排列的情況,無論你是用宮格排列還是列表排列,但要遵循所有圖片都要「整齊有序,尺寸統一」的原則。但在實際情況下,每個圖標尺寸是很難做到完全統一的,而且遇上不規則形狀的圖標,更是難以做到統一對齊。

UI設計技巧:如何利用細節設計讓界面變得更精緻
UI設計技巧
若遇到這種情況,我們可以給每個圖標添加一個相同尺寸的矩形圖層作為背景板,並將背景板隱藏後再整體編組,這樣就能保證同組的每個圖標都是相同尺寸且統一對齊。

◆ UI設計技巧之交互優化部分

① 標題欄上滑交互優化

隨着沉浸式設計的興起,很多產品都會採用無標題欄的設計,但無標題設計在上滑交互時普遍會出現「上滑後內容會與頂部電池條或置頂按鈕欄重疊」這一缺陷。

UI設計技巧:如何利用細節設計讓界面變得更精緻
UI設計技巧
要優化這一缺陷,可以在上滑過程中添加一個標題欄來分割頁面內容,使內容與頂部元素不重疊。同時,標題欄可隨上滑高度改變不透明度,利用柔和的過度效果,實現絲滑的交互體驗。

② 動態內容展示更多信息

隨着各大品牌越來越關注UX設計的發展重視,無論是交互反饋,還是圖片、信息等都趨向靜態往動態發展,以展示更多信息量。

UI設計技巧:如何利用細節設計讓界面變得更精緻
UI設計技巧
如iOS13系統中的「視圖選擇」功能 。在iOS12系統中,用戶可在視圖選擇的頁面中選擇標準視圖和放大視圖,並有三張圖可滑動展示不同場景下兩個選項的差異,但這個方案需要來回切換標籤和滑動圖片來對比差異,效率相對較低。而在iOS13系統中,三張靜態圖被替換成兩張動圖,輪流切換三個場景的頁面。這個小改動,不僅讓圖片展示更多信息,還能減輕用戶的操作成本,提升操作體驗,讓閱讀效率更高。

③ 利用微交互強調對象

為了滿足運營需要,我們有時會在同級多個icon或按鈕中突出其中一個,但同時又要保證圖標風格一致性,這時可利用微交互來達到強調的效果。

UI設計技巧:如何利用細節設計讓界面變得更精緻
UI設計技巧
除了用於強調,微交互設計還可以:

▶ 展示用戶位置和進度的視覺反饋

▶ 輔助用戶交互的視覺反饋

▶ 呈現系統狀態的視覺反饋

▶ 觸發某事件發生等

其實,我們可以從日常的設計中總結某些UI設計規律,舉一反三地運用到各個場景中,提升產品細節的質量,使整體設計變得更加美觀且易操作。



香港網頁提供一站式數碼營商方案服務,包括、網頁設計、網絡推廣、網頁管理與寄存、系統開發及其它增值服務,全方位滿足客戶的業務需要,歡迎隨時聯絡我們,香港網頁是您開拓網路商機的最佳伙伴。

聯絡電話: 37499734
電郵地址: [email protected]
網址: www.hkweb.com.hk

更多文章