藍(lán)藍(lán)設(shè)計(jì)( m.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù) 

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

 

很多時(shí)候視覺設(shè)計(jì)師會(huì)糾結(jié)于文字對(duì)齊、線條、高斯模糊等視覺表現(xiàn)，甚至沉醉于 icon 的轉(zhuǎn)角角度。面對(duì)于需求方或工程師的質(zhì)疑只能說「這樣更好看、這樣更合適…」之類的話，這些理由在以顯性數(shù)字指標(biāo)為衡量標(biāo)準(zhǔn)的團(tuán)隊(duì)中則顯得蒼白無力。

 

坦白講，想要講清楚這些的確是一件不容易的事情。今天在大多數(shù)互聯(lián)網(wǎng)公司，設(shè)計(jì)師不需要“搞藝術(shù)”，需要的是解決問題，而純粹的從感性角度出發(fā)很難證明它能解決問題。隨著移動(dòng)端對(duì)于視覺表現(xiàn)力要求的“降低”，視覺設(shè)計(jì)師需要更加理性的分析問題，而視覺表現(xiàn)只是解決問題的一種手段。這種環(huán)境的變化也勢必要求視覺設(shè)計(jì)師主動(dòng)“進(jìn)化”，而對(duì)于那些還在以視覺表現(xiàn)力謀生的設(shè)計(jì)師處境將會(huì)變得越來越難。這也是為什么我在周刊中總是不斷強(qiáng)調(diào)設(shè)計(jì)思路的原因。

 

回到我們今天的主題，我想正好接這個(gè)機(jī)會(huì)聊一聊關(guān)于如何講述設(shè)計(jì)風(fēng)格的一些想法。

為什么要用這個(gè)顏色，為什么要用線條、模糊、留白、卡片、陰影…

 

首先，大家不要被帶到溝里。如果你但對(duì)針對(duì)每一問題進(jìn)行解答，每一個(gè)答案可能都是可有可無。視覺風(fēng)格講的其實(shí)是一個(gè)整體感受，這就需要我們從更高一個(gè)層面來解釋這個(gè)問題。

 

我們需要先對(duì)問題做一下拆解，到底「時(shí)尚、簡潔」的風(fēng)格是什么。每個(gè)人對(duì)時(shí)尚、簡潔的理解可能不同，但如果要挑選幾個(gè)滿足要求的 app，相信大家的理解偏差不會(huì)太大，有了這些我們就有了達(dá)成一致的基礎(chǔ)。

 

接下來我們就需要對(duì)這些 apps 進(jìn)行視覺風(fēng)格上的拆分，來看看到底是哪些視覺表現(xiàn)讓大家覺得它們是時(shí)尚、簡潔的。我們可以依據(jù)經(jīng)驗(yàn)對(duì)視覺表現(xiàn)劃分幾個(gè)維度（比如以下幾個(gè)），接下來我將以購物應(yīng)用為例，從以上幾個(gè)維度來示意分析的方法。

1. 整體色系

2. 圖片風(fēng)格

3. 字體字號(hào)

4. 全局圖標(biāo)

5. 模塊設(shè)計(jì)

6.  操作引導(dǎo)

 

01. 

首先是應(yīng)用整體色系的使用。如果你曾經(jīng)分析過幾款設(shè)計(jì)得很優(yōu)秀的APP你會(huì)發(fā)現(xiàn)他們對(duì)于顏色的使用是非常謹(jǐn)慎的。除去文本顏色，絕大部分都只會(huì)用到3到4個(gè)顏色用于突出信息的層次。這個(gè)環(huán)節(jié)能夠幫助我們確定兩個(gè)點(diǎn)，一是哪些顏色是大家認(rèn)為時(shí)尚的；二是除去文本顏色，我們需要2到3個(gè)顏色輔助信息呈現(xiàn)。

02. 

圖片是 APP內(nèi)信息組成重要元素，它的風(fēng)格會(huì)很大程度上影響整體風(fēng)格。我們可以主要對(duì)挑選的幾款 APP的 banner 圖和商品圖進(jìn)行風(fēng)格抽取。在 banner上大家基本都使用了干凈背景圖片疊加文字的櫥窗效果，其中多數(shù)使用圖

文居中對(duì)齊的方式進(jìn)行排版。

在商品圖上，大家基本都選擇了棚拍圖片或白底摳圖。即背景干凈的商品主圖。

03. 

文字是也是 APP 界面中最重要的信息組成部分，可能也是占用篇幅最多的部分。我們常常聽大家說某個(gè)產(chǎn)品的信息模塊看上去很簡潔、舒服、重點(diǎn)突出，這其中靠的就是文字排版。一般來說我們會(huì)核心關(guān)注標(biāo)題、輔助信息、突出信息以及引導(dǎo)信息的字體字號(hào)，通過設(shè)計(jì)對(duì)信息進(jìn)行分層呈現(xiàn)，希望借此來引導(dǎo)用戶的視覺焦點(diǎn)。

對(duì)挑選的幾款 APP 的信息模塊進(jìn)行字體、字號(hào)、顏色、行高進(jìn)行拆解分析，你會(huì)發(fā)現(xiàn)它們是有共性的。

 

 

04. 

每款APP都需要一套易于識(shí)別的 icon來輔助信息展示。雖然在這一塊設(shè)計(jì)師的話語權(quán)更強(qiáng)，但我也見過不少因?yàn)?/span>icon的設(shè)計(jì)風(fēng)格而吵得不可開交。就拿是填色icon還是線條 icon來說，我們把準(zhǔn)備的幾款 APP拉出來看一下就知道了。就當(dāng)前情況來看，線條icon更符合大家對(duì)于時(shí)尚、簡潔的理解。

 

05. 

這里提到的模塊概念比較泛，通常我們稱之為卡片、瓦片，對(duì)于它的風(fēng)格定義我們也很容易從備選 apps 中找出設(shè)計(jì)的規(guī)律。其實(shí)我們?cè)趫F(tuán)隊(duì)里對(duì) Detail 這種頁面也進(jìn)行了區(qū)域劃分，作為不同模塊進(jìn)行設(shè)計(jì)。拿頂部的 Bar 來說，提出去掉背景這事兒當(dāng)時(shí)也討論了好久。在那個(gè)階段我們對(duì)于 Detail 頁面的設(shè)計(jì)要求是通透和沉浸，在進(jìn)行了多輪梳理和用戶訪談并給出結(jié)論后業(yè)務(wù)方也很快的接受了這個(gè)設(shè)計(jì)改動(dòng)。

06. 

所有操作最終都希望被引導(dǎo)到我們想要去的地方，有的是商品購買、有的是發(fā)布信息。通常這張頁面上會(huì)有多個(gè)行動(dòng)點(diǎn)，作為設(shè)計(jì)師我們希望行動(dòng)點(diǎn)有主次之分，重點(diǎn)突出最核心的操作（比如購買）。有些需求方恨不得每一個(gè)行動(dòng)點(diǎn)（購買、購物車、分享、收藏…）都讓用戶第一時(shí)間看到，我相信不少設(shè)計(jì)師都應(yīng)該遇到過類似問題。但如果站在簡潔的角度出發(fā)，我們分析一下備選的幾款A(yù)PP，“主次分離”的概念就很容易講的清楚了。

以上我只是挑選了6個(gè)比較常見的維度進(jìn)行了一次演示。事實(shí)上設(shè)計(jì)風(fēng)格還有很多很細(xì)節(jié)的部分，但方法和案例我相信大家應(yīng)該已經(jīng)了解了。

 

通過一輪梳理，我們會(huì)找到影響設(shè)計(jì)風(fēng)格的關(guān)鍵因素（如下圖所例）。告訴需求方們，這些點(diǎn)形成了我們的設(shè)計(jì)風(fēng)格。至于它是如何體現(xiàn)設(shè)計(jì)這次的設(shè)計(jì)風(fēng)格，我們可以依據(jù)以上的分析給出一些結(jié)論。嚴(yán)格來說以上提到的方法是面向需求方的解決問題的方法，事實(shí)上真如何看待「時(shí)尚、簡潔」不是我們來決定的。同樣的內(nèi)容我們應(yīng)該交給用戶來決策，如果有時(shí)間不妨邀請(qǐng)一波典型用戶來進(jìn)行焦點(diǎn)小組的訪談。看看他們眼中的「時(shí)尚、簡潔」是怎樣的。