文章列舉了一些界面設計中的案例細節，希望對產品設計工作有所幫助。

UI設計工作中，設計師們往往不喜歡將界面設計得與原型圖一致，總會刻意的去尋求存在感與原型做出差別，那么對于UI設計師來說，更應該懂得用戶體驗，成為辦個用戶體驗設計師。

以下列舉了一些界面設計中的案例細節，希望對設計師們有所幫助。

一.圖標

1.統一圖標的樣式

圖標在界面設計中還是占著較大的比重，它的存在有利于平衡界面，也讓頁面看起來更加的美觀，也有一定的提示作用。圖標風格有：線性圖標、填充圖標、面型圖標、扁平圖標、手繪風格圖標和擬物圖標等。

在決定使用某一風格的圖標設計之后，在相同木塊下，請盡量使用同一的風格的圖標，如填充圖標的色彩飽和度；線性圖標的線條粗細；擬物風格的光線陰影等。

2.意義明確的圖標

很多人都喜歡純圖標式的設計，去掉文案試圖讓圖標看起來更高大上，但是往往忽略了圖標最重要的作用是提示用戶該按鈕的功能。如上圖所示，去掉文案之后很多圖標根本無法準確表達出確切的含義，這也是圖形的缺陷。

做好圖標和文字的排版與比例一樣可以設計出好看的界面。

3.圖標的視覺平衡

同一個界面出現多個圖標時，我們需要保持整體的視覺平衡。并非是所有圖標都采用相同的尺寸就能達到平衡，由于圖標的體量不同，相同尺寸下不同體量的圖標視覺平衡也不相同，例如相同尺寸的正方形會比圓形顯得大。因此，我們需要根據圖標的體量對其大小做出相應的調整。

4.符合用戶心理的圖標（按鈕）

圖標在大多數情況下都是充當著按鈕的作用。設計時必須要清晰準確的傳達出當前狀態，不能為了視覺效果而帶給用戶錯誤的判斷，例如深灰色的按鈕用戶會理解為是禁用狀態而放棄點擊。

通過圖標（按鈕）的顏色、大小、風格等來引導用戶進行操作，需要強化的就要做得突出，不要整個界面都處于主次不明的狀態，分散用戶的注意力，削弱了界面需要傳達的主旨。

二.布局

1.合理的模塊區分

界面設計中不乏內容信息很多，需要折疊的情況。因此經常存在信息的層級關系，而這時就需要利用不同的顏色對各個模塊進行區分，利用同色系不同明度來體現這樣的層級關系。這樣也讓用戶更容易理解當前所處的模塊。也讓頁面看起來更豐滿些。

2.正確的文字層級關系

工作中我們拿到的需求總會出現大篇幅的文案，不能像概念設計那樣任性的刪減，在進行文字排版的時候，正確的處理信息之間的層級關系將會提高用戶對信息的識別度。我們通常會通過字體大小、顏色、留白、層級分割等技巧來處理，把相同屬性的信息歸類設計，通過留白的不同達到層級的區分，讓整個信息排列主次分明，層級清晰。

3.合理的內容歸納

應該善用色塊和分割線對頁面的內容進行合理的歸納和整理。線條通常用于分割同一類別或擁有相同屬性的元素；而色塊更多的是用于分割不同類別或者區分不同屬性的元 素，以達到層次清晰，歸類明確的目的。但是所有的一切都應該服務于信息的準確表達，切忌不可為了視覺上的協調而強行的合并或折疊。

4.預估內容承載范圍

新人總是會忘記規范信息呈現的邊界寬度。程序在開發的時候總會問，你這個超過長度之后如何顯示。有一些程序更是直接用右圖的”…”顯示。但是在這樣的情況下，作為地址這樣的簡單信息的展示，還需要用戶去點擊一次才能看見全部地址，明顯是不合理的交互。因此我們在設計界面應該要考慮到超過展示邊界的時候該如何展示，如何取舍。

5.尊重App用戶的使用習慣

許多App的設計師都是由網頁設計師轉行而來的，但是App界面有其特殊性。它界面小，過小的按鈕無法像鼠標一樣能夠精確點擊。因為有一些網頁的設計習慣不應該帶到App的設計中來，這也是交互設計師在App的設計過程中需要去把關和注意的。

三.設計元素

1.顏色

頁面信息總是各有權重。在選用配色方案的時候，在界面中最好不要使用3個以上的顏色。最好能以一個主色+兩個輔色最佳。顏色太多會讓用戶模糊界面的焦點。無法聚焦在我們想讓用戶聚焦的信息上。

2.透明度與投影

通過對按鈕、卡片等進行投影運用可以增強立體感與層次感。

給予用戶該卡片能夠切換，且當前展示的信息為該卡片的詳情的交互暗示。雖然不加投影和陰影也能達到這個效果，但是效果會弱不少。

3.表單

表單設計在界面中隨處可見，看到一望無際的表單用戶總是望而卻步。為了緩解用戶的這種心理活動，我們設計的時候通常會通過合并歸納相同屬性的表單，采用逐步填寫來讓用戶感覺內容很少，通過這樣的視錯覺讓用戶完成表單的填寫。

4.缺省頁

作為用戶當遇到頁面內容為空的時候本身就是一件比較沮喪的事情。因為應該加入一些情感化的設計。在空界面的一些設計中也由以前的純文字轉變為一些應景的插畫表現，帶給用戶更多的愉悅感。

本文由 @endlishted 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自PEXELS，基于CC0協議