設計師需要掌握的思維模型

設計師需要掌握的思維模型

設計師需要掌握的思維模型,觀點,我們的設計日記,原創文章站酷網,中國設計師互動平台。

設計思維模型對於互聯人來說非常重要,經常我們在評價一個候選人時候會說,這個同學系統思考差了點,或者說用戶和商業思維不夠。那麼到底什麼是系統思考,設計師該如何學會系統思考,系統思考到底能幫助我們在做設計時候有什麼幫助,今天希望我的這個分享能讓你了解什麼是系統思考,以及它的思考模型是什麼。

設計思維模型的重要性

設計做久了你會發現離不開流程和思維,之前支付寶一位大佬總結下來叫“左手藝術,右手科學” ,藝術大家都明白,設計師是感性動物,對於美的追求是大家都是擅長的也非常有發言權,那麼科學指的是我們需要通過科學的方法流程,系統的思考問題方式,讓設計不止好看,同時也應該符合用戶,商業訴求,滿足好這3者的平衡點。

所以設計師,除了關注「左手」藝術的部分,同時也需要關注「右手」科學的部分。

設計思維模型有哪幾種

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

設計思維包含哪些

第一個設計思維也是最基礎的,就是作為設計師,我們必須了解各大平台的設計規範,這是做任何設計的基礎,如果你了解你負責的這個平台規則,那麼你的設計就無法邁出第一步,所以對於剛做設計不久的同學,基礎思維規範需要去死記硬背背下來,沒有這個基礎後面都是無用功。

1.知道基礎設計規範

常用的設計規範,比如蘋果的設計規範,裡面詳細講述了,常用的蘋果導航欄高度是多少,蘋果的表格視圖高度多大,頁面中常用的設計字體字號多少,如何去適配不同分辨率,這些基礎的設計原則,都統稱為設計思維。

谷歌的material規範,也是設計師必須了解的規範,特別是需要了解它在系統層面和iOS的差異化。

2.知道常用設計原則

設計思維很重要一點,就是要了解基礎的審美,以及用戶心理學,其中排版運用比較多的格式塔原理,是做設計排版的基礎。

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

相似性原則運用:淘寶網導航菜單就是運用這種原則,根據產品類別一致,進行同類分類,這個就是運用的格式塔緊密設計原則。

封閉性原則:視覺系統自動嘗試將敞開的圖形關閉起來,從而將其感知為完整的物體而不是分散的碎片。

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

連續性原則:我們的視覺感知系統傾向於連續性,視覺系統傾向於感知連續的形式而不是離散的碎片。

連續性原則運用: Pinterest和ins雖然卡片被下面截斷了,但是我們還是會認為它和下面內容是一組的。

焦點原則:一個一面只有一個核心,一個眼睛,引導用戶去關注你想表達的重點。

焦點原則運用:少即是多,蘋果的很多產品就是運用一個焦點,做到畫龍點睛的作業。

地面原則:我們的大腦將視覺區域分為主體和背景,主體包括一個場景中佔據注意力的元素,其餘都為背景。

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

格式塔是設計很重要基礎之一,來源於20世紀的德國,也是作為設計師必須掌握的設計原則,也是你做設計的第一個需要掌握的設計基礎。

3.知道設計是用來用的,而不是藝術

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

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

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

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

4.知道設計不止是效果圖,對落地負責

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

上面那個情況,我想大家都經歷過,我們效果圖做的很好,乾淨的商品圖,標籤也很規範。但是實際上線後就是右邊效果,各種圖上放牛皮癬,以及各種標籤。

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

優秀設計師不僅僅能做出漂亮設計圖,同時他們也能對內容進行負責,定義好詳細是內容規範。

之前淘寶的同事,定完一個電商的KV風格後,還會出一個詳細的風格指南,裡面會去定義配色,文案話術,字數,以及頁面圖片的展示規範,這些的目的都是對內容進行控制。

5.知道主流設計趨勢和手法

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

手法一:手繪簡筆風格

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

Facebook改版之前的風格就是運用的這套風格,整個頁面也更加年輕和時尚。

手法二:分形藝術風格

利用簡單的幾何圖形,不斷重複,形成一種新的形式,在一些背景上,一些圖形和海報上經常被大量運用,只不過很多設計師並沒有關注到這些風格。

Uber之前的規範中,對於全球的各個國家的設計,都是定義了一個國家的基礎圖形,然後圍繞基礎圖形做出了一系列擴展,這其實就運用到了這個分形重複設計手法。

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

手法三:柔光風格


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

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

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

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

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

手法四:紋理風格

這個風格很多人都有印象,特別是韓國設計中大量運用了這種設計,國內電商中也會運用比較多,這種風格就是紋理風格。

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

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

考拉當年的改版設計,很核心的元素就是這個圓形,以及他的底紋運用效果。

這種底紋效果,很多時候也可以傳遞出品牌的氣質,品牌的調性,左側音樂播放默認圖片,特別有品質感,右側電商主頁面的背景,清晰感覺,後麵線條恰到好處。

當然,設計趨勢並不止我今天說的這些,其實有很多,作為設計師,設計思維中很重要的點,就是關注趨勢,並將他運用到你設計中去,這是必不可少的一項技能。

6.了解設計只是整體體驗的一部分

從這張經典的圖中我們可以看出,設計只是一個產品其中很小的一部分,很多設計師以為我們看見的就是一切,其實不是,就像冰山一樣,表現層是最上面的一部分,冰山下面其實有很多的內容。

我們來看個案例,比如支付寶:

表現層:

視覺設計師比較容易關注的,圓潤的圖標,卡片的設計,扁平的風格,2.5D的插畫風格,小螞蟻的微動效,支付寶品牌藍色,以及一些卡片的動畫效果。

框架層/結構層:

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

範圍層:

根據用戶的訴求,中間的宮格導航是動態變化的,用戶也可以去根據內容需要去定義,小螞蟻通知入口也是如此,一個小喇叭的功能,把所有支付寶的通知都收在這個地方,底部卡片根據用戶習慣去展示,比如你經常點外賣那麼推送你美食卡片,你比較關注疫情推薦你疫情卡片等等。

戰略層:

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

所以其實所有產品都是圍繞這樣邏輯去設計,我們設計師要明白設計那種趨勢手法,只是一部分。我們要不斷的去了解最頂層,才能理解產品設計背後的規則邏輯。

最後

今天分享的是設計師需要掌握的思維模型,其中關於設計思維的,我們再來回顧下,設計思維包括哪些:

1.了解基礎的設計規範;

2.知道常用設計原則;

3.知道設計是用來用的,而不是藝術;

4.知道設計不止是效果圖,對落地負責;

5.知道主流設計趨勢和手法;

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。