UI界面設計

UI界面設計常見細節(jié)問題分析

9075

我們在做界面的時候，經(jīng)常會覺得做的挺好的，但是其實有很多細節(jié)是被我們所忽略了，就像我前幾天讓小伙伴們給我看的首頁，指出了一堆的小細節(jié)的問題，就是這些小細節(jié)和問題造成了界面沒有質(zhì)感。今天我們就來討論一下如何摳細節(jié)。

我們常見設計到的細節(jié)問題大多出現(xiàn)在交互樣式、文字、風格、圓角等。

交互樣式

首先我們先來說一下最抽象的交互，可能大家會問，為什么交互會關系到細節(jié)以及界面統(tǒng)一，比如說同一層級頁面里的切換，不同的頁面但是切換是同樣的表現(xiàn)形式（這個問題可能有點傻，但我在做練習的時候，真的沒有考慮到，所以大家不要犯一樣的錯誤）。如下圖所示：

優(yōu)酷的底部圖標有5個，而這5個頁面中有4個的頂部都是標簽切換的樣式，而且表現(xiàn)形式都是一樣的，但是在首頁點擊進去的二級頁面切換樣式就會改變，這是我們發(fā)現(xiàn)的優(yōu)酷的規(guī)律，而我們需要做的就是讓看我們作品或者產(chǎn)品的人也能夠發(fā)現(xiàn)這些交互小規(guī)律。

我之前畫圖的時候就是找參考，會選取參考里比較好的一個部分來做，因此在做的時候可能就不會考慮到交互細節(jié)的統(tǒng)一，單獨的頁面是不會發(fā)現(xiàn)問題的，但是頁面比較多的時候你就會發(fā)現(xiàn)總覺得哪里有問題。

文字

在界面中除了框架之外，最多就是文字了，包括搭建的一些框架都是由文字組成的，因此文字在細節(jié)統(tǒng)一中最重要的組成部分。

不知道大家有沒有經(jīng)常遇到這樣的問題，就是在不同的界面要用多大的字號，或者同一個頁面不同位置放多大字號，我就經(jīng)常遇到這樣的問題，導致我有一個簡單的界面出現(xiàn)了很多不同的字號，小伙伴給我指出來了界面看起來很雜亂，如下圖所示：

所以我們需要把字號控制在三種以內(nèi)，同時字號最好都是4或者8的倍數(shù)，這樣在信息比較多的頁面能夠讓整體看起來更規(guī)范一點，同時用戶理解信息更容易。

風格

1、強化品牌基因在用戶心中的印象

幾乎所有的品牌都需要做的一件事情就是占領用戶心智，讓用戶在眾多品牌的選擇里占有一席之地，因此需要不停的出現(xiàn)保持存在感，比如404界面和空界面里放入的品牌基因，如下圖所示：

最右的就很好的將品牌和品牌基因放在界面中，它的底部圖標，消息列表，空頁面等，都很好的將這它的形象保持了良好的存在感。

這樣做的好處就是強化產(chǎn)品在用戶心中的印象，增強存在感，舉個我們身邊最常見的例子來說，微信昵稱和頭像在通訊錄中就相當于你的代表，如果你不換頭像經(jīng)常在公眾號后臺留言，就會有人記得你，如果一個強化符號一樣，存在了別人深深的腦海里。

2、有自己的識別度

將我們的設計的產(chǎn)品設計好，但是又與其他同類產(chǎn)品區(qū)分開，這樣能夠保證用戶就算看截圖也能夠知道是哪個產(chǎn)品。如下圖所示：

比如說音遇和波洞這兩個產(chǎn)品的頁面，風格是很特別的，就算直接看截圖都能夠知道是哪個產(chǎn)品，主要就是他們的配色和展現(xiàn)形式夠有風格，當然這兩種產(chǎn)品的定位本身就比較年輕化，但是我們可以借鑒配色或者一些細節(jié)，運用在圖標或者界面框架上，形成自己產(chǎn)品的獨特風格。

圓角

圓角雖然在界面中不是很起眼，但是在整體界面的展示中起著很重要的作用，因此在我們開始做之前最好就預先設定好要做的圓角是多少，可以根據(jù)品牌基因或者規(guī)范來進行設置。

但是有一個需要注意的問題就是在于圓角套圓角，之前我就犯過這樣的錯誤，（不知道為什么總是犯這些細節(jié)小問題），里面的圓角和外面的圓角數(shù)值一樣，視覺上看起來就很奇怪，如下圖所示：

我這么做的時候只是想的圓角需要統(tǒng)一，因此里面的矩形縮小了圓角的數(shù)值也不能變（我知道這樣顯得我很傻，但是跟我一樣傻的應該也是有的），然后就做成了這樣，后來小伙伴說統(tǒng)一并不是數(shù)值的統(tǒng)一，而是視覺上的，界面中有的地方數(shù)值明明一樣，但是看起來就不是那么回事了，所以我們需要做的就是靈活一點的改變數(shù)值，讓他們從視覺上達到一致，這才是我們需要的統(tǒng)一。如下圖所示：