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

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

交互樣式

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

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

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

文字

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

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

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

風(fēng)格

1、強(qiáng)化品牌基因在用戶心中的印象

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

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

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

2、有自己的識(shí)別度

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

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

圓角

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

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

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

這樣內(nèi)嵌的圓角從視覺上就看起來一致啦！

劃重點(diǎn)

我們今天說了有四個(gè)方面的細(xì)節(jié)注意點(diǎn)，講的都是平時(shí)設(shè)計(jì)的時(shí)候要注意的小細(xì)節(jié)，多注意就好了。

1、交互形式上，同層級(jí)的頁面，在相同的切換上展現(xiàn)形式是需要保持一致的；

2、文字使用的時(shí)候最好是4或者8的倍數(shù)，減少同一頁面文字?jǐn)?shù)值一直在變，既方便自己設(shè)計(jì)也方便開發(fā)；

3、風(fēng)格可以借鑒市面上比較有特色的產(chǎn)品，了解他們是如何形成的風(fēng)格，再結(jié)合自己的產(chǎn)品運(yùn)用上；

4、圓角的統(tǒng)一并不僅僅是指數(shù)值上的一致，更重要的是視覺上的統(tǒng)一，別被數(shù)值給框住了。

作者：潘團(tuán)子

公眾號(hào)：海鹽社