2025-2-26 杰睿
關(guān)于設(shè)計(jì)思維你了解多少？
設(shè)計(jì)思維模型對(duì)于互聯(lián)人來(lái)說(shuō)非常重要，經(jīng)常我們?cè)谠u(píng)價(jià)一個(gè)候選人時(shí)候會(huì)說(shuō)，這個(gè)同學(xué)系統(tǒng)思考差了點(diǎn)，或者說(shuō)用戶和商業(yè)思維不夠。那么到底什么是系統(tǒng)思考，設(shè)計(jì)師該如何學(xué)會(huì)系統(tǒng)思考，系統(tǒng)思考到底能幫助我們?cè)谧鲈O(shè)計(jì)時(shí)候有什么幫助，今天希望我的這個(gè)分享能讓你了解什么是系統(tǒng)思考，以及它的思考模型是什么。
設(shè)計(jì)做久了你會(huì)發(fā)現(xiàn)離不開(kāi)流程和思維，之前支付寶一位大佬總結(jié)下來(lái)叫“左手藝術(shù)，右手科學(xué)”，藝術(shù)大家都明白，設(shè)計(jì)師是感性動(dòng)物，對(duì)于美的追求是大家都是擅長(zhǎng)的也非常有發(fā)言權(quán)，那么科學(xué)指的是我們需要通過(guò)科學(xué)的方法流程，系統(tǒng)的思考問(wèn)題方式，讓設(shè)計(jì)不止好看，同時(shí)也應(yīng)該符合用戶，商業(yè)訴求，滿足好這3者的平衡點(diǎn)。
所以設(shè)計(jì)師，除了關(guān)注「左手」藝術(shù)的部分，同時(shí)也需要關(guān)注「右手」科學(xué)的部分。
設(shè)計(jì)思維模型不止是一個(gè)單一的思維模型，它包含三種思維模型，設(shè)計(jì)思維，用戶思維，產(chǎn)品思維。今天這篇文章，我們先來(lái)了解第一個(gè)思維，設(shè)計(jì)思維到底是什么，我們?cè)撊绾翁嵘O(shè)計(jì)師的設(shè)計(jì)思維。
第一個(gè)設(shè)計(jì)思維也是最基礎(chǔ)的，就是作為設(shè)計(jì)師，我們必須了解各大平臺(tái)的設(shè)計(jì)規(guī)范，這是做任何設(shè)計(jì)的基礎(chǔ)，如果你了解你負(fù)責(zé)的這個(gè)平臺(tái)規(guī)則，那么你的設(shè)計(jì)就無(wú)法邁出第一步，所以對(duì)于剛做設(shè)計(jì)不久的同學(xué)，基礎(chǔ)思維規(guī)范需要去死記硬背背下來(lái)，沒(méi)有這個(gè)基礎(chǔ)后面都是無(wú)用功。
常用的設(shè)計(jì)規(guī)范，比如蘋(píng)果的設(shè)計(jì)規(guī)范，里面詳細(xì)講述了，常用的蘋(píng)果導(dǎo)航欄高度是多少，蘋(píng)果的表格視圖高度多大，頁(yè)面中常用的設(shè)計(jì)字體字號(hào)多少，如何去適配不同分辨率，這些基礎(chǔ)的設(shè)計(jì)原則，都統(tǒng)稱為設(shè)計(jì)思維。
谷歌的material規(guī)范，也是設(shè)計(jì)師必須了解的規(guī)范，特別是需要了解它在系統(tǒng)層面和iOS的差異化。
設(shè)計(jì)思維很重要一點(diǎn)，就是要了解基礎(chǔ)的審美，以及用戶心理學(xué)，其中排版運(yùn)用比較多的格式塔原理，是做設(shè)計(jì)排版的基礎(chǔ)。
相似性原則：我們會(huì)潛意識(shí)把更緊密的事物歸屬一組。
相似性原則運(yùn)用：淘寶網(wǎng)導(dǎo)航菜單就是運(yùn)用這種原則，根據(jù)產(chǎn)品類(lèi)別一致，進(jìn)行同類(lèi)分類(lèi)，這個(gè)就是運(yùn)用的格式塔緊密設(shè)計(jì)原則。
封閉性原則：視覺(jué)系統(tǒng)自動(dòng)嘗試將敞開(kāi)的圖形關(guān)閉起來(lái)，從而將其感知為完整的物體而不是分散的碎片。
封閉性原則運(yùn)用：我們會(huì)自動(dòng)將這些不完整的圖形在腦海中封閉起來(lái)，形成一個(gè)整體圖形。如圖中海報(bào)，雖然文字被遮擋了一部分，或者被一些圖形分割了，但是我們腦海中還是會(huì)自動(dòng)腦補(bǔ)出設(shè)計(jì)畫(huà)面。
連續(xù)性原則：我們的視覺(jué)感知系統(tǒng)傾向于連續(xù)性，視覺(jué)系統(tǒng)傾向于感知連續(xù)的形式而不是離散的碎片。
連續(xù)性原則運(yùn)用：Pinterest和ins雖然卡片被下面截?cái)嗔耍俏覀冞€是會(huì)認(rèn)為它和下面內(nèi)容是一組的。
焦點(diǎn)原則：一個(gè)一面只有一個(gè)核心，一個(gè)眼睛，引導(dǎo)用戶去關(guān)注你想表達(dá)的重點(diǎn)。
焦點(diǎn)原則運(yùn)用：少即是多，蘋(píng)果的很多產(chǎn)品就是運(yùn)用一個(gè)焦點(diǎn)，做到畫(huà)龍點(diǎn)睛的作業(yè)。
地面原則：我們的大腦將視覺(jué)區(qū)域分為主體和背景，主體包括一個(gè)場(chǎng)景中占據(jù)注意力的元素，其余都為背景。
地面原則運(yùn)用：如上圖案例中，我們視覺(jué)會(huì)自動(dòng)將紅色，綠色，藍(lán)色當(dāng)做背景，頁(yè)面的幾何圖形會(huì)當(dāng)為主體，用戶的注意力也在上面，在平時(shí)做設(shè)計(jì)時(shí)候需要去營(yíng)造這種空間和層次感。
格式塔是設(shè)計(jì)很重要基礎(chǔ)之一，來(lái)源于20世紀(jì)的德國(guó)，也是作為設(shè)計(jì)師必須掌握的設(shè)計(jì)原則，也是你做設(shè)計(jì)的第一個(gè)需要掌握的設(shè)計(jì)基礎(chǔ)。
很多同學(xué)剛做設(shè)計(jì)，很容易在頁(yè)面中為了體現(xiàn)自己掌握的某種技法，而做過(guò)了，或者設(shè)計(jì)的頁(yè)面太偏向于個(gè)人喜好。這是不對(duì)的，我們的設(shè)計(jì)最終一定要是用戶使用的，否則再漂亮華麗的設(shè)計(jì)都會(huì)是曇花一現(xiàn)。
Path的設(shè)計(jì)在剛出來(lái)時(shí)候，簡(jiǎn)直是業(yè)內(nèi)交互和視覺(jué)標(biāo)桿性產(chǎn)品，創(chuàng)新的交互細(xì)節(jié)，精致的頁(yè)面表現(xiàn)。都很完美，但是最終也逃不過(guò)曇花不現(xiàn)，很大部分原因是產(chǎn)品定位不準(zhǔn)，商業(yè)思考不夠，沒(méi)有很好解決好用戶訴求，最終導(dǎo)致失敗。所以在一個(gè)成熟的設(shè)計(jì)中，設(shè)計(jì)好用比好看更重要，我們要做的就是在這個(gè)過(guò)程中不斷尋找合適的平衡點(diǎn)。
當(dāng)年Facebook 出品的paper這款產(chǎn)品，也是業(yè)內(nèi)關(guān)注度極高，把手勢(shì)運(yùn)用到了極致。但最后也逃不過(guò)這種命運(yùn)，幾乎移動(dòng)市場(chǎng)上，沒(méi)有一個(gè)產(chǎn)品是因?yàn)楹每炊钕聛?lái)的，幾乎最后的那些被人們每天使用的產(chǎn)品，都不是因?yàn)楹每矗且驗(yàn)楹糜茫瑵M足人們痛點(diǎn)需求。
所以，剛工作的設(shè)計(jì)師，在設(shè)計(jì)思維這個(gè)層面，一定要明確我們的每一個(gè)頁(yè)面，一定是滿足用戶完成任務(wù)為第一優(yōu)先級(jí)，其次考慮產(chǎn)品整體和品牌，公司大的設(shè)計(jì)方向掛鉤。
工作幾年后，作為一個(gè)漂亮的設(shè)計(jì)效果圖都不難，很多時(shí)候參考下競(jìng)品，在競(jìng)品基礎(chǔ)上去找一些差異化創(chuàng)新，甚至做出一個(gè)超越競(jìng)品的設(shè)計(jì)效果圖，加上真實(shí)動(dòng)效，好看的圖片，精心排版的文案。這些很多設(shè)計(jì)師都可以做到。但是很多設(shè)計(jì)師忽略了真正上線后的效果。
上面那個(gè)情況，我想大家都經(jīng)歷過(guò)，我們效果圖做的很好，干凈的商品圖，標(biāo)簽也很規(guī)范。但是實(shí)際上線后就是右邊效果，各種圖上放牛皮癬，以及各種標(biāo)簽。
從業(yè)務(wù)層面來(lái)說(shuō)，沒(méi)有錯(cuò)，因?yàn)榉排Ｆぐ_可能銷(xiāo)量更好。但是設(shè)計(jì)時(shí)候，我們是不是可以再往前一步，幫用戶思考如果圖片上房廣告該在展示，如果文案很多時(shí)候，標(biāo)簽很復(fù)雜的展示規(guī)則。
優(yōu)秀設(shè)計(jì)師不僅僅能做出漂亮設(shè)計(jì)圖，同時(shí)他們也能對(duì)內(nèi)容進(jìn)行負(fù)責(zé)，定義好詳細(xì)是內(nèi)容規(guī)范。
之前淘寶的同事，定完一個(gè)電商的KV風(fēng)格后，還會(huì)出一個(gè)詳細(xì)的風(fēng)格指南，里面會(huì)去定義配色，文案話術(shù)，字?jǐn)?shù)，以及頁(yè)面圖片的展示規(guī)范，這些的目的都是對(duì)內(nèi)容進(jìn)行控制。
目前很多設(shè)計(jì)師以為做UI就只有扁平化，以為大公司設(shè)計(jì)流程都是痛點(diǎn)分析、人群畫(huà)像、旅程地圖、用戶調(diào)研、方案呈現(xiàn)。各種一堆推導(dǎo)，然后最終的方案簡(jiǎn)簡(jiǎn)單單收尾，同時(shí)還暴露一個(gè)很大問(wèn)題，風(fēng)格單一。其實(shí)UI真的不止是只有扁平化。
手法一：手繪簡(jiǎn)筆風(fēng)格
如果你是設(shè)計(jì)日記的忠實(shí)讀者，你一定看過(guò)我之前寫(xiě)過(guò)一些大廠的設(shè)計(jì)手法。手繪簡(jiǎn)筆就是其中一個(gè)風(fēng)格之一，整體風(fēng)格都是手繪線條配以低飽和度顏色，有很多趣味性和故事融合在里面。
Facebook改版之前的風(fēng)格就是運(yùn)用的這套風(fēng)格，整個(gè)頁(yè)面也更加年輕和時(shí)尚。
手法二：分形藝術(shù)風(fēng)格
利用簡(jiǎn)單的幾何圖形，不斷重復(fù)，形成一種新的形式，在一些背景上，一些圖形和海報(bào)上經(jīng)常被大量運(yùn)用，只不過(guò)很多設(shè)計(jì)師并沒(méi)有關(guān)注到這些風(fēng)格。
Uber之前的規(guī)范中，對(duì)于全球的各個(gè)國(guó)家的設(shè)計(jì)，都是定義了一個(gè)國(guó)家的基礎(chǔ)圖形，然后圍繞基礎(chǔ)圖形做出了一系列擴(kuò)展，這其實(shí)就運(yùn)用到了這個(gè)分形重復(fù)設(shè)計(jì)手法。
包括我們熟知是蘋(píng)果相冊(cè)圖標(biāo)，chrome瀏覽器和谷歌相冊(cè)圖標(biāo)，都是運(yùn)用這種手法，一個(gè)基礎(chǔ)圖形有規(guī)律的變化。
手法三：柔光風(fēng)格
很多設(shè)計(jì)師做東西風(fēng)格比較單一局限，UI發(fā)展到今天其實(shí)有很多新的風(fēng)格出現(xiàn)，柔光風(fēng)格就是其中之一，整體風(fēng)格呈現(xiàn)出光的折射特征，顏色層次豐富，有明顯的光的流動(dòng)感和方向性。在設(shè)計(jì)上常用漸變，光斑，流動(dòng)透明疊加手法，是目前大公司比較主流的一種風(fēng)格。
整個(gè)畫(huà)面有色彩流動(dòng)感，背景一般是多色融合，有層次，有流動(dòng)液體變化。
像這個(gè)案例就是色彩上跨度比較大的一個(gè)漸變，同時(shí)運(yùn)用白色透明疊加方式處理，細(xì)節(jié)簡(jiǎn)單細(xì)膩。
支付寶之前芝麻信用的風(fēng)格我很喜歡，其中就是運(yùn)用的這套設(shè)計(jì)手法，背景運(yùn)用這種虛實(shí)，光斑作為層次。
在很多可視化場(chǎng)景中也會(huì)運(yùn)用，比如左圖就是運(yùn)用波浪透明疊加線條作為頁(yè)面核心焦點(diǎn)，右邊頁(yè)面背景底部運(yùn)用有層次的漸變和光暈。
手法四 ：紋理風(fēng)格
這個(gè)風(fēng)格很多人都有印象，特別是韓國(guó)設(shè)計(jì)中大量運(yùn)用了這種設(shè)計(jì)，國(guó)內(nèi)電商中也會(huì)運(yùn)用比較多，這種風(fēng)格就是紋理風(fēng)格。
淘寶的88會(huì)員，我們能看見(jiàn)會(huì)員頁(yè)面輔助元素這些紋理效果作為背景出現(xiàn)在這些頁(yè)面中，能很好將視覺(jué)層次豐富起來(lái)。
雙11的宣傳海報(bào)，也是運(yùn)用這種幾何紋理作為視覺(jué)層次的裝飾。
考拉當(dāng)年的改版設(shè)計(jì)，很核心的元素就是這個(gè)圓形，以及他的底紋運(yùn)用效果。
這種底紋效果，很多時(shí)候也可以傳遞出品牌的氣質(zhì)，品牌的調(diào)性，左側(cè)音樂(lè)播放默認(rèn)圖片，特別有品質(zhì)感，右側(cè)電商主頁(yè)面的背景，清晰感覺(jué)，后面線條恰到好處。
當(dāng)然，設(shè)計(jì)趨勢(shì)并不止我今天說(shuō)的這些，其實(shí)有很多，作為設(shè)計(jì)師，設(shè)計(jì)思維中很重要的點(diǎn)，就是關(guān)注趨勢(shì)，并將他運(yùn)用到你設(shè)計(jì)中去，這是必不可少的一項(xiàng)技能。
從這張經(jīng)典的圖中我們可以看出，設(shè)計(jì)只是一個(gè)產(chǎn)品其中很小的一部分，很多設(shè)計(jì)師以為我們看見(jiàn)的就是一切，其實(shí)不是，就像冰山一樣，表現(xiàn)層是最上面的一部分，冰山下面其實(shí)有很多的內(nèi)容。
我們來(lái)看個(gè)案例，比如支付寶：
表現(xiàn)層：
視覺(jué)設(shè)計(jì)師比較容易關(guān)注的，圓潤(rùn)的圖標(biāo)，卡片的設(shè)計(jì)，扁平的風(fēng)格，2.5D的插畫(huà)風(fēng)格，小螞蟻的微動(dòng)效，支付寶品牌藍(lán)色，以及一些卡片的動(dòng)畫(huà)效果。
框架層/結(jié)構(gòu)層：
頂部的4個(gè)金剛設(shè)計(jì)，也是用戶最常用的4個(gè)功能，下面14個(gè)宮格導(dǎo)航，代表不同的服務(wù)入口，小螞蟻卡片是通知入口，下面營(yíng)銷(xiāo)廣告資源位，下面是千人千面或者推薦的服務(wù)卡片等等。理財(cái)頁(yè)面也是如此，頭部用戶數(shù)錢(qián)，下面業(yè)務(wù)入口下面不同理財(cái)服務(wù)。
范圍層：
根據(jù)用戶的訴求，中間的宮格導(dǎo)航是動(dòng)態(tài)變化的，用戶也可以去根據(jù)內(nèi)容需要去定義，小螞蟻通知入口也是如此，一個(gè)小喇叭的功能，把所有支付寶的通知都收在這個(gè)地方，底部卡片根據(jù)用戶習(xí)慣去展示，比如你經(jīng)常點(diǎn)外賣(mài)那么推送你美食卡片，你比較關(guān)注疫情推薦你疫情卡片等等。
戰(zhàn)略層：
顧名思義，那就是公司整體戰(zhàn)略，從支付寶品牌升級(jí)更加年輕化，強(qiáng)化生活服務(wù)心智，首頁(yè)新增外賣(mài)到家、果蔬商超醫(yī)藥等便民生活版塊，并基于智能算法為用戶推薦喜歡的服務(wù)，讓每個(gè)用戶擁有更貼心專屬的支付寶。
所以其實(shí)所有產(chǎn)品都是圍繞這樣邏輯去設(shè)計(jì)，我們?cè)O(shè)計(jì)師要明白設(shè)計(jì)那種趨勢(shì)手法，只是一部分。我們要不斷的去了解最頂層，才能理解產(chǎn)品設(shè)計(jì)背后的規(guī)則邏輯。
今天分享的是設(shè)計(jì)師需要掌握的思維模型，其中關(guān)于設(shè)計(jì)思維的，我們?cè)賮?lái)回顧下，設(shè)計(jì)思維包括哪些：
1.了解基礎(chǔ)的設(shè)計(jì)規(guī)范；
2.知道常用設(shè)計(jì)原則；
3.知道設(shè)計(jì)是用來(lái)用的，而不是藝術(shù)；
4.知道設(shè)計(jì)不止是效果圖，對(duì)落地負(fù)責(zé)；
5.知道主流設(shè)計(jì)趨勢(shì)和手法；
蘭亭妙微(www.devb.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.devb.cn