設(shè)計思維模型對于互聯(lián)人來說非常重要，經(jīng)常我們在評價一個候選人時候會說，這個同學(xué)系統(tǒng)思考差了點，或者說用戶和商業(yè)思維不夠。那么到底什么是系統(tǒng)思考，設(shè)計師該如何學(xué)會系統(tǒng)思考，系統(tǒng)思考到底能幫助我們在做設(shè)計時候有什么幫助，今天希望我的這個分享能讓你了解什么是系統(tǒng)思考，以及它的思考模型是什么。

 

設(shè)計思維模型的重要性

設(shè)計做久了你會發(fā)現(xiàn)離不開流程和思維，之前支付寶一位大佬總結(jié)下來叫“左手藝術(shù)，右手科學(xué)”，藝術(shù)大家都明白，設(shè)計師是感性動物，對于美的追求是大家都是擅長的也非常有發(fā)言權(quán)，那么科學(xué)指的是我們需要通過科學(xué)的方法流程，系統(tǒng)的思考問題方式，讓設(shè)計不止好看，同時也應(yīng)該符合用戶，商業(yè)訴求，滿足好這3者的平衡點。

 

所以設(shè)計師，除了關(guān)注「左手」藝術(shù)的部分，同時也需要關(guān)注「右手」科學(xué)的部分。

 

設(shè)計思維模型有哪幾種

設(shè)計思維模型不止是一個單一的思維模型，它包含三種思維模型，設(shè)計思維，用戶思維，產(chǎn)品思維。今天這篇文章，我們先來了解第一個思維，設(shè)計思維到底是什么，我們該如何提升設(shè)計師的設(shè)計思維。

 

設(shè)計思維包含哪些

第一個設(shè)計思維也是最基礎(chǔ)的，就是作為設(shè)計師，我們必須了解各大平臺的設(shè)計規(guī)范，這是做任何設(shè)計的基礎(chǔ)，如果你了解你負責(zé)的這個平臺規(guī)則，那么你的設(shè)計就無法邁出第一步，所以對于剛做設(shè)計不久的同學(xué)，基礎(chǔ)思維規(guī)范需要去死記硬背背下來，沒有這個基礎(chǔ)后面都是無用功。

 

1.知道基礎(chǔ)設(shè)計規(guī)范

常用的設(shè)計規(guī)范，比如蘋果的設(shè)計規(guī)范，里面詳細講述了，常用的蘋果導(dǎo)航欄高度是多少，蘋果的表格視圖高度多大，頁面中常用的設(shè)計字體字號多少，如何去適配不同分辨率，這些基礎(chǔ)的設(shè)計原則，都統(tǒng)稱為設(shè)計思維。

 

谷歌的material規(guī)范，也是設(shè)計師必須了解的規(guī)范，特別是需要了解它在系統(tǒng)層面和iOS的差異化。

 

2.知道常用設(shè)計原則

設(shè)計思維很重要一點，就是要了解基礎(chǔ)的審美，以及用戶心理學(xué)，其中排版運用比較多的格式塔原理，是做設(shè)計排版的基礎(chǔ)。

 

相似性原則：我們會潛意識把更緊密的事物歸屬一組。

 

相似性原則運用：淘寶網(wǎng)導(dǎo)航菜單就是運用這種原則，根據(jù)產(chǎn)品類別一致，進行同類分類，這個就是運用的格式塔緊密設(shè)計原則。

 

封閉性原則：視覺系統(tǒng)自動嘗試將敞開的圖形關(guān)閉起來，從而將其感知為完整的物體而不是分散的碎片。

 

封閉性原則運用：我們會自動將這些不完整的圖形在腦海中封閉起來，形成一個整體圖形。如圖中海報，雖然文字被遮擋了一部分，或者被一些圖形分割了，但是我們腦海中還是會自動腦補出設(shè)計畫面。

 

連續(xù)性原則：我們的視覺感知系統(tǒng)傾向于連續(xù)性，視覺系統(tǒng)傾向于感知連續(xù)的形式而不是離散的碎片。

 

連續(xù)性原則運用：Pinterest和ins雖然卡片被下面截斷了，但是我們還是會認為它和下面內(nèi)容是一組的。

 

焦點原則：一個一面只有一個核心，一個眼睛，引導(dǎo)用戶去關(guān)注你想表達的重點。

 

焦點原則運用：少即是多，蘋果的很多產(chǎn)品就是運用一個焦點，做到畫龍點睛的作業(yè)。

 

地面原則：我們的大腦將視覺區(qū)域分為主體和背景，主體包括一個場景中占據(jù)注意力的元素，其余都為背景。

 

地面原則運用：如上圖案例中，我們視覺會自動將紅色，綠色，藍色當(dāng)做背景，頁面的幾何圖形會當(dāng)為主體，用戶的注意力也在上面，在平時做設(shè)計時候需要去營造這種空間和層次感。

 

格式塔是設(shè)計很重要基礎(chǔ)之一，來源于20世紀的德國，也是作為設(shè)計師必須掌握的設(shè)計原則，也是你做設(shè)計的第一個需要掌握的設(shè)計基礎(chǔ)。

 

3.知道設(shè)計是用來用的，而不是藝術(shù)

很多同學(xué)剛做設(shè)計，很容易在頁面中為了體現(xiàn)自己掌握的某種技法，而做過了，或者設(shè)計的頁面太偏向于個人喜好。這是不對的，我們的設(shè)計最終一定要是用戶使用的，否則再漂亮華麗的設(shè)計都會是曇花一現(xiàn)。

 

Path的設(shè)計在剛出來時候，簡直是業(yè)內(nèi)交互和視覺標桿性產(chǎn)品，創(chuàng)新的交互細節(jié)，精致的頁面表現(xiàn)。都很完美，但是最終也逃不過曇花不現(xiàn)，很大部分原因是產(chǎn)品定位不準，商業(yè)思考不夠，沒有很好解決好用戶訴求，最終導(dǎo)致失敗。所以在一個成熟的設(shè)計中，設(shè)計好用比好看更重要，我們要做的就是在這個過程中不斷尋找合適的平衡點。

 

當(dāng)年Facebook 出品的paper這款產(chǎn)品，也是業(yè)內(nèi)關(guān)注度極高，把手勢運用到了極致。但最后也逃不過這種命運，幾乎移動市場上，沒有一個產(chǎn)品是因為好看而活下來的，幾乎最后的那些被人們每天使用的產(chǎn)品，都不是因為好看，而是因為好用，滿足人們痛點需求。

 

所以，剛工作的設(shè)計師，在設(shè)計思維這個層面，一定要明確我們的每一個頁面，一定是滿足用戶完成任務(wù)為第一優(yōu)先級，其次考慮產(chǎn)品整體和品牌，公司大的設(shè)計方向掛鉤。

 

4.知道設(shè)計不止是效果圖，對落地負責(zé)

工作幾年后，作為一個漂亮的設(shè)計效果圖都不難，很多時候參考下競品，在競品基礎(chǔ)上去找一些差異化創(chuàng)新，甚至做出一個超越競品的設(shè)計效果圖，加上真實動效，好看的圖片，精心排版的文案。這些很多設(shè)計師都可以做到。但是很多設(shè)計師忽略了真正上線后的效果。

 

上面那個情況，我想大家都經(jīng)歷過，我們效果圖做的很好，干凈的商品圖，標簽也很規(guī)范。但是實際上線后就是右邊效果，各種圖上放牛皮癬，以及各種標簽。

 

從業(yè)務(wù)層面來說，沒有錯，因為放牛皮癬可能銷量更好。但是設(shè)計時候，我們是不是可以再往前一步，幫用戶思考如果圖片上房廣告該在展示，如果文案很多時候，標簽很復(fù)雜的展示規(guī)則。

 

優(yōu)秀設(shè)計師不僅僅能做出漂亮設(shè)計圖，同時他們也能對內(nèi)容進行負責(zé)，定義好詳細是內(nèi)容規(guī)范。

 

之前淘寶的同事，定完一個電商的KV風(fēng)格后，還會出一個詳細的風(fēng)格指南，里面會去定義配色，文案話術(shù)，字數(shù)，以及頁面圖片的展示規(guī)范，這些的目的都是對內(nèi)容進行控制。

 

5.知道主流設(shè)計趨勢和手法

目前很多設(shè)計師以為做UI就只有扁平化，以為大公司設(shè)計流程都是痛點分析、人群畫像、旅程地圖、用戶調(diào)研、方案呈現(xiàn)。各種一堆推導(dǎo)，然后最終的方案簡簡單單收尾，同時還暴露一個很大問題，風(fēng)格單一。其實UI真的不止是只有扁平化。

 

手法一：手繪簡筆風(fēng)格

如果你是設(shè)計日記的忠實讀者，你一定看過我之前寫過一些大廠的設(shè)計手法。手繪簡筆就是其中一個風(fēng)格之一，整體風(fēng)格都是手繪線條配以低飽和度顏色，有很多趣味性和故事融合在里面。

 

Facebook改版之前的風(fēng)格就是運用的這套風(fēng)格，整個頁面也更加年輕和時尚。

 

手法二：分形藝術(shù)風(fēng)格

 

利用簡單的幾何圖形，不斷重復(fù)，形成一種新的形式，在一些背景上，一些圖形和海報上經(jīng)常被大量運用，只不過很多設(shè)計師并沒有關(guān)注到這些風(fēng)格。

 

Uber之前的規(guī)范中，對于全球的各個國家的設(shè)計，都是定義了一個國家的基礎(chǔ)圖形，然后圍繞基礎(chǔ)圖形做出了一系列擴展，這其實就運用到了這個分形重復(fù)設(shè)計手法。

 

包括我們熟知是蘋果相冊圖標，chrome瀏覽器和谷歌相冊圖標，都是運用這種手法，一個基礎(chǔ)圖形有規(guī)律的變化。

 

手法三：柔光風(fēng)格

 

 

很多設(shè)計師做東西風(fēng)格比較單一局限，UI發(fā)展到今天其實有很多新的風(fēng)格出現(xiàn)，柔光風(fēng)格就是其中之一，整體風(fēng)格呈現(xiàn)出光的折射特征，顏色層次豐富，有明顯的光的流動感和方向性。在設(shè)計上常用漸變，光斑，流動透明疊加手法，是目前大公司比較主流的一種風(fēng)格。

整個畫面有色彩流動感，背景一般是多色融合，有層次，有流動液體變化。

 

像這個案例就是色彩上跨度比較大的一個漸變，同時運用白色透明疊加方式處理，細節(jié)簡單細膩。

 

支付寶之前芝麻信用的風(fēng)格我很喜歡，其中就是運用的這套設(shè)計手法，背景運用這種虛實，光斑作為層次。

 

在很多可視化場景中也會運用，比如左圖就是運用波浪透明疊加線條作為頁面核心焦點，右邊頁面背景底部運用有層次的漸變和光暈。

 

手法四 ：紋理風(fēng)格

這個風(fēng)格很多人都有印象，特別是韓國設(shè)計中大量運用了這種設(shè)計，國內(nèi)電商中也會運用比較多，這種風(fēng)格就是紋理風(fēng)格。

 

 

淘寶的88會員，我們能看見會員頁面輔助元素這些紋理效果作為背景出現(xiàn)在這些頁面中，能很好將視覺層次豐富起來。

 

雙11的宣傳海報，也是運用這種幾何紋理作為視覺層次的裝飾。

 

考拉當(dāng)年的改版設(shè)計，很核心的元素就是這個圓形，以及他的底紋運用效果。

 

這種底紋效果，很多時候也可以傳遞出品牌的氣質(zhì)，品牌的調(diào)性，左側(cè)音樂播放默認圖片，特別有品質(zhì)感，右側(cè)電商主頁面的背景，清晰感覺，后面線條恰到好處。

 

當(dāng)然，設(shè)計趨勢并不止我今天說的這些，其實有很多，作為設(shè)計師，設(shè)計思維中很重要的點，就是關(guān)注趨勢，并將他運用到你設(shè)計中去，這是必不可少的一項技能。

 

6.了解設(shè)計只是整體體驗的一部分

從這張經(jīng)典的圖中我們可以看出，設(shè)計只是一個產(chǎn)品其中很小的一部分，很多設(shè)計師以為我們看見的就是一切，其實不是，就像冰山一樣，表現(xiàn)層是最上面的一部分，冰山下面其實有很多的內(nèi)容。

 

我們來看個案例，比如支付寶：

 

表現(xiàn)層：

視覺設(shè)計師比較容易關(guān)注的，圓潤的圖標，卡片的設(shè)計，扁平的風(fēng)格，2.5D的插畫風(fēng)格，小螞蟻的微動效，支付寶品牌藍色，以及一些卡片的動畫效果。

 

框架層/結(jié)構(gòu)層：

頂部的4個金剛設(shè)計，也是用戶最常用的4個功能，下面14個宮格導(dǎo)航，代表不同的服務(wù)入口，小螞蟻卡片是通知入口，下面營銷廣告資源位，下面是千人千面或者推薦的服務(wù)卡片等等。理財頁面也是如此，頭部用戶數(shù)錢，下面業(yè)務(wù)入口下面不同理財服務(wù)。

 

范圍層：

根據(jù)用戶的訴求，中間的宮格導(dǎo)航是動態(tài)變化的，用戶也可以去根據(jù)內(nèi)容需要去定義，小螞蟻通知入口也是如此，一個小喇叭的功能，把所有支付寶的通知都收在這個地方，底部卡片根據(jù)用戶習(xí)慣去展示，比如你經(jīng)常點外賣那么推送你美食卡片，你比較關(guān)注疫情推薦你疫情卡片等等。

 

戰(zhàn)略層：

顧名思義，那就是公司整體戰(zhàn)略，從支付寶品牌升級更加年輕化，強化生活服務(wù)心智，首頁新增外賣到家、果蔬商超醫(yī)藥等便民生活版塊，并基于智能算法為用戶推薦喜歡的服務(wù)，讓每個用戶擁有更貼心專屬的支付寶。

 

所以其實所有產(chǎn)品都是圍繞這樣邏輯去設(shè)計，我們設(shè)計師要明白設(shè)計那種趨勢手法，只是一部分。我們要不斷的去了解最頂層，才能理解產(chǎn)品設(shè)計背后的規(guī)則邏輯。

 

最后

今天分享的是設(shè)計師需要掌握的思維模型，其中關(guān)于設(shè)計思維的，我們再來回顧下，設(shè)計思維包括哪些：

 

1.了解基礎(chǔ)的設(shè)計規(guī)范；

2.知道常用設(shè)計原則；

3.知道設(shè)計是用來用的，而不是藝術(shù)；

4.知道設(shè)計不止是效果圖，對落地負責(zé)；

5.知道主流設(shè)計趨勢和手法；