UI設計師應該如何描述設計風格

2016-10-31    ui設計分享達人

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

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

 

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

 

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

 

回到我們今天的主題,我想正好接這個機會聊一聊關于如何講述設計風格的一些想法。


為什么要用這個顏色,為什么要用線條、模糊、留白、卡片、陰影

 

首先,大家不要被帶到溝里。如果你但對針對每一問題進行解答,每一個答案可能都是可有可無。視覺風格講的其實是一個整體感受,這就需要我們從更高一個層面來解釋這個問題。

 

我們需要先對問題做一下拆解,到底「時尚、簡潔」的風格是什么。每個人對時尚、簡潔的理解可能不同,但如果要挑選幾個滿足要求的 app,相信大家的理解偏差不會太大,有了這些我們就有了達成一致的基礎。

 

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


1. 整體色系

2. 圖片風格

3. 字體字號

4. 全局圖標

5. 模塊設計

6.  操作引導

 


01. 

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

01.webp.jpg

02. 

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

02.webp.jpg

文居中對齊的方式進行排版。

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

03.webp.jpg

03. 

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

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

 04.webp.jpg

 

04. 

每款APP都需要一套易于識別的 icon來輔助信息展示。雖然在這一塊設計師的話語權更強,但我也見過不少因為icon的設計風格而吵得不可開交。就拿是填色icon還是線條 icon來說,我們把準備的幾款 APP拉出來看一下就知道了。就當前情況來看,線條icon更符合大家對于時尚、簡潔的理解。

05.webp.jpg

 

05. 

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

06.webp.jpg

06. 

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

07.webp.jpg

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

 

通過一輪梳理,我們會找到影響設計風格的關鍵因素(如下圖所例)。告訴需求方們,這些點形成了我們的設計風格。至于它是如何體現(xiàn)設計這次的設計風格,我們可以依據(jù)以上的分析給出一些結(jié)論。嚴格來說以上提到的方法是面向需求方的解決問題的方法,事實上真如何看待「時尚、簡潔」不是我們來決定的。同樣的內(nèi)容我們應該交給用戶來決策,如果有時間不妨邀請一波典型用戶來進行焦點小組的訪談??纯此麄冄壑械摹笗r尚、簡潔」是怎樣的。

 08.webp.jpg

 

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://m.820esy.cn

存檔