首頁

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

天宇 設計思維

關于設計思維你了解多少?

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

 

設計思維模型的重要性

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

 

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

 

設計思維模型有哪幾種

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

 

設計思維包含哪些

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

 

1.知道基礎設計規(guī)范

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

 

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

 

2.知道常用設計原則

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

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

 

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

 

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

 

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

 

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

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

 


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

 

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

 

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

 

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

 

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

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

 

手法一:手繪簡筆風格

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

 

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

 

手法二:分形藝術風格

 

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

 

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

 

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

 

手法三:柔光風格

 

 

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

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

 

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

 

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

 

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

 

手法四 :紋理風格

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

 

 

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

 

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

 

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

 

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

 

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

 

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

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

 

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

 

表現(xiàn)層:

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

 

框架層/結構層:

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

 

范圍層:

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

 

戰(zhàn)略層:

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

 

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

 

最后

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

 

1.了解基礎的設計規(guī)范;

2.知道常用設計原則;

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

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

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

 

 

 

作者:我們的設計日記
鏈接:https://www.zcool.com.cn/article/ZMTE5NDc1Ng==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

如何以點、線、面為界面設計尋求規(guī)則

天宇 設計思維

點線面在用戶界面中的應用貌似很少有人寫,我挑業(yè)余時間進行了大量案例的翻閱分析,發(fā)現(xiàn)其中確有規(guī)則。

 

首篇萬字長文獻給你。

 

 

 

前言

 

用戶界面的本質是資源的互換。

 

用戶為產(chǎn)品提供時間和注意力,產(chǎn)品為用戶提供單位時間內(nèi)最大價值的內(nèi)容。

 

當視覺設計師介入其中后,他們的關系可以用這樣一幅圖表示。

 

 

 

表現(xiàn)層作為用戶體驗五要素的最具象層面,解決的是產(chǎn)品視覺效果的呈現(xiàn)問題。視覺設計師需要借以合理的版式和視覺手段來保障用戶在單位時間內(nèi)獲取最多的內(nèi)容資源,即實現(xiàn)信息的高效獲取。

 

信息的高效獲取來自合理的視覺引導(信息閱讀的優(yōu)先級安排)。我們一直在說的層次清晰、低信噪比、沉浸感等視覺體驗在本質上其實都屬于合理的視覺引導。

借以實現(xiàn)的手段包括我們熟知的卡片、留白、配色、字體層級、圖標等等。這些手段龐雜繁多,體系化的建設必不可少,但是漫長的積累沉淀中很容易被其淹沒,而且每種手段背后又是什么樣的底層邏輯和依據(jù)?

 

為什么卡片讓頁面層次清晰?為什么面性圖標擁有較高的辨識度?為什么步驟條會有橫縱之分?...

 

而點、線、面解決的就是這些內(nèi)在邏輯問題,在你熟知它們的特性后,絕大多數(shù)的設計手段都可以被其解釋和串聯(lián)起來,并且讓你的設計決策和設計推導更加有據(jù)可依,而不是簡單的“憑感覺”。

 

如果我們將各種設計手段比喻為各類武學外功招式,那么點線面理論就好像吐納內(nèi)功,雖為最基礎的入門心法,但其對內(nèi)息的作用影響著所有招式的發(fā)揮。

 

 

 

點、線、面與康定斯基

 

 

 

 

點、線、面理論最早由瓦西里·康定斯基提出,他所著的《點、線、面》一書最早曾作為包豪斯學院的形式課程進行教學。他將所有藝術的形式都歸結于點、線和面三種元素的關系。

 

 

 

康定斯基對于點、線、面的獨到思想為設計領域產(chǎn)生了極為深遠的影響。我們目前最熟知運用到它的的一個領域就是平面設計領域。通過這個理論,平面中所有的元素都可以看作點、線、面三類形態(tài),并且每類形態(tài)的存在、變化和結合,都可以為畫面?zhèn)鬟_出不同的樣式和風格。

 

雖然用戶界面設計和平面設計分屬于兩個完全不同的設計行業(yè),但點、線、面理論是相通的。

 

 

 

點、線、面淺談

 

點、線、面具有普適性、相對性。前文已經(jīng)講過,點、線、面這三種形態(tài)存在于所有的元素中。不論是哪種元素都可以用點、線、面來表示。并且,點、線、面之間是相對的,并非對元素的純粹定義。

 

比如一個界面中的面性圖標,我們可以將其看作一個點,當相對于線性圖標時,我們又可以將其看作面。如果這個圖標和其他圖標一起組成標簽欄,那這串圖標也可看作線。

 

 

 

下面,我將分為點、線和面三大板塊,來講述每類形態(tài)基于自身維度所擁有的特性,并如何通過存在、變化來在界面中發(fā)揮著各自的作用,實現(xiàn)合理高效的視覺引導。

 

 

正文開始。

 

 

 

 

 

 

 

萬物自一點始。

 

正如宇宙大爆炸源自一個引力奇點那樣,點是萬物之源,也是所有元素的基礎。點從維度上來說屬于零維,它沒有辦法像線、面那樣延伸,這決定了點本身的向心性和自由性。

 

 

 

康定斯基將點描述為“雄辯與沉默”,這句話的意思就是,當點獨立存在于一個畫面中時,它便開始“雄辯”自己的存在,讓自己成為焦點;而當它的數(shù)量增加時,點便傾向于“沉默”,并且根據(jù)它的排列方式傾向于對應形態(tài)的特性。

 

 

 

向心性

 

當一個點獨立存在時,點的向心性協(xié)助它成為視覺焦點。此時點主要起到定位的作用。

 

以支付寶首頁為例。在以往的界面設計中,我們往往在每個模塊標題旁添加一個小小的短線,而這個小短線便是作為定位點引導用戶迅速注意到標題,實現(xiàn)不同內(nèi)容的快速定位。并且作品包裝中也常會用到它。

 

 

 

不過在Complexion Reduction去形式化的浪潮洗禮下,這種方式已成為過去式,現(xiàn)在我們會直接用標題本身作為點進行定位。

 

 

 

但是,在其他更多的場景下,僅靠文字其實并不能很好得發(fā)揮點的向心性,尤其是一些信息較多、需要迅速辨識的場景下。這時候,我們通常會引入另一種要素——圖標來指代它。

 

圖標本身可以用來表意,而獨立、精致的特性讓它很適合作為點元素來處理。

 

比如app中的標簽欄中的圖標就可看作點元素,每個圖標以其所具備的向心性幫助我們迅速得聚焦到它所在的位置。列表頁的每個字段前也會加入對應含義的圖標來幫助用戶迅速錨定當前欄目,并且由于圖標擁有更高的辨識性,這讓閱讀變得輕快而富有節(jié)奏。

 

 

 

 

下圖所示為Google日歷中的活動頁表單,當我們將字段前的圖標去除時,閱讀沒有了強定位元素將會缺失節(jié)奏,信息獲取變得困難和緩慢,影響用戶表單的填寫。

 

 

 

 

 

聚集性

 

點是自由、精致的,它不會像線那樣有向兩端延伸的特性,這意味著它可以進行各種形式、規(guī)則的排列組合以契合版面。

 

點化線

在這種分布形式下,點通常以圖標的形式進行橫向及縱向的排列,并且傾向于線的引導性進行視線引導。

 

點的橫向排列通常見于標簽導航欄、單行的金剛區(qū)入口等。點的縱向排列通常見于列表布局中。由于點本身對用戶注意力的聚焦,點沿著什么方向進行排列時,用戶視線便傾向于朝對應的方向移動。

 

 

 

上面所舉的Google日歷就是這樣,單個圖標方便定位,而多個線性排布的圖標則具備了線的引導性,便于用戶的由上至下得快速瀏覽。ios自帶的音樂app和QQ音樂的歌單也同樣利用了點化線引導瀏覽,只是圖片和阿拉伯數(shù)字的區(qū)別而已。

 

 

 

 

點化面

在這種分布形式下,點常常橫向排列在界面中(一排內(nèi)通常不超過5個),作為一個個快捷入口存在,形成網(wǎng)格式布局。

 

 

 

比如金剛區(qū)業(yè)務入口、書籍等類型的布局都屬于網(wǎng)格式。這個布局下的點集合傾向于面元素,界面在這個布局下呈現(xiàn)出富有觀賞性的視覺張力,吸引用戶眼球,而且網(wǎng)格式的布局引導用戶視線均勻遷移,便于視覺區(qū)分。

 

 

 

 

 

網(wǎng)格與列表

 

既然講到這了,不得不提下上面兩種形態(tài)各自所在的版式——網(wǎng)格布局和列表布局。

 

 

 

通常來說,靜態(tài)頁面中的內(nèi)容大致可分為圖、文兩大類。

 

形態(tài)上看,文本本身具有線那樣不斷延伸的特點,因此列表的橫向版面更適合長文本的展示。而圖片、圖標通常以固定尺寸的img獨立存在,可看作點元素,像上一節(jié)所講的,它既可存在于列表又可存在于網(wǎng)格。

 

視覺動線上看,列表布局的動線屬于尼爾森等老前輩所提出的F型瀏覽模式。即用戶首先落點于左側的定位點,再由左向右進行閱讀,接著再垂直掃視,當定位到興趣點后繼續(xù)由左至右得閱讀。這種動線符合人類自然的閱讀模式。

 

 

 

并且在由上至下的視線遷移中,用戶的注意力勢必隨著路徑的拉長而逐步遞減。

 

 

 

而這種遞減效應讓列表式布局更適合基于產(chǎn)品及用戶習慣以某種規(guī)律排序。

 

郵件訊息以時間進行排序,這是基于用戶查看最新消息的習慣;電商商品則默認以相關性、銷量等因素綜合排序(同時買家可以根據(jù)價格、銷量等進行自定義排序),這是基于用戶的購物喜好習慣;直播平臺以熱度進行排序,這是基于羊群效應制造引流點,同時也刺激用戶發(fā)布優(yōu)質內(nèi)容。并且在特定的排序規(guī)律下可以引導用戶帶有目的的、更迅速得掃視。

 

但是如果界面變?yōu)榫W(wǎng)格布局,掃視效率將大打折扣,較高的圖版率也導致文字信息被過度弱化。

 

如下圖,健身環(huán)大冒險并不屬于外觀型產(chǎn)品,用戶更關心的是價格、好評等文字信息,當其變?yōu)榫W(wǎng)格視圖時,一方面用戶無法根據(jù)排序結果迅速垂直掃視,另一方面文字信息被重量級的圖片壓制,用戶無法迅速獲取它們。

 

 

 

 

 

 

網(wǎng)格布局通過犧牲寬度來將界面等分為一個個格子,從形態(tài)上直接限制了長文本的存在,這讓它更適合放置一個個獨立的點,比如圖片、圖標。而文本則落于底部淪為一介輔助。

 

從視覺動線上看,網(wǎng)格布局傾向于Z型瀏覽模式。用戶視覺動線通常由左至右、再由上至下得進行,并可以“雨露均沾”得在數(shù)個點上均勻遷移,注意力遞減效應不會像列表布局那么強烈。因此,網(wǎng)格布局非常適合進行不同信息的辨識和區(qū)分。

 

 

 

界面中常見的功能業(yè)務入口、專輯或者電影的布局、單獨店鋪中的商品,它們不需要明顯的排序處理,并且用戶初始行為都是通過圖片、圖標進行迅速得辨別區(qū)分,繼而進行交互決策。如果將其列表化處理,不同信息的辨識區(qū)分效率將受到影響。

 

如下圖,服裝屬于典型的外觀型商品,當變?yōu)榱斜硪晥D時,商品之間將難以辨識區(qū)分。

 

 

 

由此,我們大致可以梳理出兩種布局適用情況:

 

 

列表:適用于文本為主要展示,或者按照某種規(guī)律排序的信息。

網(wǎng)格:適用于圖片為主要展示,或者沒有排序規(guī)則,需要用戶通過圖片、圖標辨識區(qū)分的信息。

 

當然了,這兩種布局并非只能選其一,淘寶、京東這類體量龐大的電商平臺便為了方便用戶習慣,提供了兩種布局視圖便于用戶隨時切換以降低決策成本。

 

 

 

另外,它常被作為一類豐富畫面層次的手段。當點不再按照橫縱方向排列分布時,便可作為圖案被用在特定場景的背景中,以降低背景過平過空的感覺。

 

比如美食杰封面的加載占位圖就以與產(chǎn)品相關的各種食材圖標隨機得組合為圖案,飽滿的畫面減少了用戶等待時的枯燥無味。而QQ的群發(fā)布功能,在首個卡片背景中便加入了各種學習類的圖標隨機分布在卡片上,烘托出熱鬧趣味的氛圍,和下面的三個次要功能從卡片背景上迅速拉開層級。

 

 

 

 

 

 

 

線條是一種簡單、輕盈的存在,可以看作是點受外驅力作用下的運動軌跡。它從維度上來說屬于一維,不同的外驅力結合使得線可以沿著任意方向自由得延伸,從而讓它擁有了高效的引導性、分割性和造型性。

 

 

 

康定斯基在書中以溫度去定義線的情感,他將水平線定義為無限冷能的表現(xiàn)形式,將垂直線定義為無限暖能的表現(xiàn)形式。看似晦澀難懂,但聯(lián)系到現(xiàn)實生活就相對容易理解一點。

 

現(xiàn)實生活中的水平線通常存在于地平線中,因此給人的感覺是穩(wěn)定、平和,類似非啟動時的“”態(tài);而垂直線常見于那些從基線建造、生長的事物,比如高樓大廈、參天巨木,它們都通過能量來實現(xiàn)垂直方向的高低變化,因此給人的感覺是上升、下落、變化等感覺,類似啟動后的“”態(tài)。

 

 

 

而線具備的冷暖態(tài)決定了水平和垂直線發(fā)揮各自作用時所傳達的感受。

 

 

 

引導性

線可沿任意方向延伸的特點讓它具備了很強的引導性。界面中最常見的就是跑步、地圖類app中的路線顯示,就是通過線的引導性來顯示起點到終點所行進的軌跡。

 

 

 

如果我們將起點和終點對齊歸于一條線上時,便可以通過降維的方式將其縮減至單個維度。

 

時間維度可以引申到界面中的時間軸、步驟條、加載條和音視頻中的進度條等,這類維度通常需要加入點元素,通過點的向心性輔助定位。空間維度則引申到滑動頁面時出現(xiàn)的滾動條等。

 

 

 

如上文對溫度的解釋,“暖”態(tài)的垂直線象征變化。當我們希望用戶能夠感知到時間的變化,或者流程需要花費較長時間時,垂直線相對來說是個更好的選擇。

 

比如外賣、快遞的訂單進度,火車的停靠站點時間,timeline,到賬時間等信息,要么需要傳達變化感,要么費時較長,因此適合以象征變化的垂直線來進行引導,給予用戶變化感、產(chǎn)生需要等待的心理預期。

 

 

 

“冷”態(tài)的水平線象征靜止。當我們希望用戶能夠沉浸在這個流程中,感知不到時間的變化,或者流程時間極短時,那就更適合用水平線。

 

比如airbnb申請成為房東時,會有個需要用戶即時填寫的分頁表單,為了讓用戶沉浸在填寫中,同樣以水平線作為它的進度反饋,降低時間變化感。

 

比如美團買藥后的審方頁,藥師的審方進度是即時性的,通常只需等待十幾秒即可。水平的靜止感能夠讓用戶產(chǎn)生“當前正在發(fā)生”的感覺,避免讓用戶產(chǎn)生需要等待較長時間的心理預期而離開當前頁面。

 

 

 

但是,如果我們將美團審方的進度條改為縱向(去除文案提示),給用戶帶來的感覺也就大不相同。

 

 

 

下文講到的分割性也可以以冷暖態(tài)來解釋。我們希望用戶能夠專心閱讀信息,因此會盡量避免容易帶來變化感的垂直分割線。即便迫于信息的劃分需要不得不用到,也會盡量降低它的明度和長度。

 

另外,界面中往往也存在著一條無形的線,它同樣也是起著重要的引導作用,只是這類線不僅僅作用于某個特定模塊,它還可以作用于整個界面。這條線通常被稱作 視覺動線。視覺動線在網(wǎng)格與列表那一節(jié)中簡單提了下,只是這部分體系太過龐大,后面有時間我會單獨寫一篇。

 

 

 

分割性

 

很多時候,界面中僅僅以留白進行分隔時,很容易造成信息無法被明確得劃分。這時我們往往需要引入額外的形式進行輔助。比如分割線。

 

分割線通常運用在模塊內(nèi)部信息的分割,雖簡單粗暴,但并不能應付更高層級的模塊分割。而模塊之間的分割通常以面性(分割條)來進行。留白、分割線和分割條三者的分割層級由低到高,通常需要在頁面中結合使用。

 

需要注意的是,線面的分割形式需要盡可能得輕量化,一旦擁有了視覺重量很容易成為噪音,我們需要盡量避免信噪比過低對用戶閱讀體驗的破壞。

 

 

 

為了增加頁面的呼吸感,我們很多時候會用留白這種最為輕量的分割方式代替所有的線、面。

 

這類大留白的特點往往與Complexion Reduction風格相結合,視覺上不僅制造一種舒適的簡約感和呼吸感,也減少了頁面中線面分割形成的視覺噪音。

 

Complexion Reduction最早源自Airbnb、Instagram、Medium等產(chǎn)品的頁面改版,而后被UX設計師Michael Horton所總結出的設計趨勢。蘋果在17年所發(fā)布的ios11同屬于這個風格,這類風格最突出的三個特征就是大標題、面性圖標和克制用色。

 

但是,這種去形式化的分割方法并非適用于全部頁面,一般只有在頁面模塊單一、信息單元字段較少、或者以圖片本身作為分割方式的頁面才適合使用。

 

比如ikea和airbnb的首頁,它們并不像京東、支付寶有龐大的體量和業(yè)務需求,所以很適合全留白的方式。這讓它們的首頁看上去非常干凈清爽,富有呼吸感。

 

 

 

不過,在其他字段信息繁多的界面中,分割線依然是一種高效的分割方式。

 

我們可以看到,IKEA和airbnb的詳情頁依舊選擇了分割線的分割方式以應對繁多的字段信息,避免全留白帶來的層級混亂。

 

 

 

 

 

造型性

線本身可以沿任意方向自由延伸,形成一條曲線、折線、螺旋線等等。而當線的首尾相連時,便可以勾畫出面。

 

 

 

但是,線的閉合性所形成的面僅僅是一具沒有量感的空殼。但同時線條本身輕盈的特性讓其更加輕量、通透,因此對于一些辨識要求較低、或者需要被弱化的元素來說往往是個不錯的選擇。

 

界面中最常見的運用就是幽靈按鈕和線性圖標。

 

相比于面性按鈕和圖標,量感的缺失讓其無法在辨識性上勝出,但是在其它地方也各有所長。

 

幽靈按鈕常用于一些次按鈕、未選中態(tài)以及tag,線性圖標常被用于一些次要功能、未選中態(tài)以及裝飾。

 

 

 

當然,線面也可以根據(jù)產(chǎn)品自身需求作類別區(qū)分。

 

比如支付寶和美團這些產(chǎn)品,工具型圖標全部線性,而業(yè)務型圖標全部面性。并且線性圖標得益于背景主色色塊的反白加成讓它們并不會被過度弱化。

 

 

 

 

 

虛線

 

虛線是點化線的最簡易的表現(xiàn)。

 

但是因為虛線本身斷開的地方太多了,并不適合用于常規(guī)信息的分割,它通常適用于一些特定的場景。

 

比如一些產(chǎn)品中的票券、賬單這類特殊場景中,通常會加入虛線進行信息的分割,就是為了映射模擬現(xiàn)實世界中便于撕開的撕票線來增加代入感,減少認知負荷。

 

 

 

虛線另一個特性是不可見性。

 

這個特性最早可追溯至建筑、機械等行業(yè)的制圖規(guī)范中——以同等點元素所構成的虛線代表對象視覺盲區(qū)中的棱邊線及輪廓線。

 

 

 

一些漫畫或動畫作品中當一個東西突然不翼而飛時,往往會留下一個虛線的輪廓。

 

這種有意思的設定也被設計師引用到了用戶界面中。

 

比如當我們想讓用戶去上傳一個圖片時,往往會采取一個虛線的矩形結合按鈕進行引導,便是為了告訴用戶:嗨這塊地還是空的,快來加點料!

 

比如Pinterest、dribbble以及AntD的圖片類upload組件,都采用了這種設定。

 

 

 

另外,這種形式也適用于空狀態(tài)的表示,比如dropbox。

 

 

 

 

 

 

 

 

 

面可以看作是線的運動軌跡,可以由一個閉合的線生成,也可以由點、線強化自身而來。

 

點線面的臨界問題

 

 

康定斯基在書中曾講到,線的強化加粗,與點不斷增大面臨同樣的問題,即與面之間的臨界。

 

這句話的意思就是,當點、線通過強化自身的面積、寬度后,和面的界限開始模糊,從而具備了面本身的性質。

 

比如ios11中讓人印象深刻的大標題,便是由通過增加每個點的面積(增加每個字的字號),以及筆畫的線寬(增加每個字的字重)來趨向于面,以營造出飽滿、沖擊的視覺張力。

 

 

 

 

 

 

 

辨識性

 

二維的屬性讓它可以向四周無限得擴張自己的領土,這個優(yōu)勢讓面可以輕松承載各類信息,并且也讓它具備了絕佳的視覺張力。

 

在一個點線面同時存在的畫面中,人眼優(yōu)先注意到的必定是擁有絕對視覺張力的面元素。這意味著面擁有著遠勝于前兩者的辨識性,或者說,在一部各類元素參演的戲劇里,面更擅長主角。

 

比如在一個放置了文字的界面中,我們希望其中一段比較重要的文字完全和其他文字區(qū)分開,也就意味著這段文字需要進行對比。

 

 

 

我們可以對這段文字加粗、加入顏色等等,這的確能做出一些明顯的變化。但是僅僅是對字體本身的強化,一旦界面需要劃分層級,就會顯得很“平”,造成信息關系的曖昧。

 

 

 

不過,當加入一層淡淡的色塊充當文字背景后,便可以制造出極為明朗的層次關系。一方面,這段文字神奇得與其他信息迅速孤立開來,另外,有面作為“靠山”讓它變得稍微與眾不同,并且相比其他文字能被更快得注意到。

 

 

 

當然,如果你覺得它很重要,那你可以增強文字與背景的顏色對比,給面加入各種各樣的顏色。

 

而當顏色對信息可讀性造成影響時,為保證信息的順利辨識,我們不得不對文字進行反色處理,以此作為視覺落點來強制用戶迅速注意到它。這就是我們熟知的反白視覺手段。

 

 

 

面的這種強力屬性被用到了界面的方方面面,比如按鈕和圖標。

 

 

 

 

相比前面所講的線性圖標,面的辨識性讓面性圖標可以更快得被識別。因此,界面中一些重要的業(yè)務入口通常都以醒目的面性圖標存在,并且常以面性圖標代表激活、選中時的狀態(tài),線性圖標代表未激活、未選中時的狀態(tài)。

 

 

 

不過線性圖標薄弱的辨識性并非完全適合標簽欄狀態(tài)的切換。

 

用戶在選中到當前頁時,并不代表其他頁面徹底弱化了,用戶同樣需要關注其他未選中的頁面。

 

正因如此,ios11中所有未選中的icon全部由線性更改為了面性。同樣的,國內(nèi)的簡書、天貓等產(chǎn)品也進行了圖標的改版以提升其他頁面的點擊率。

 

 

 

 

 

 

對于按鈕,面的辨識性為它的層級使用提供了更多可能。

 

如下圖,按鈕從樣式上來看大致有六種樣式,深色、淺色、淺灰色、幽靈、文字和圖標按鈕,其中面性按鈕就占了一半。相比幽靈、文字和圖標按鈕,三種面性按鈕都以面的強辨識性引導用戶迅速注意到它。因此面性按鈕相對對應更高的層級。

 

 

 

當頁面中存在多個功能按鈕時,就需要以樣式進行主次之分。深色按鈕以強烈的顏色對比制造吸引力,因此常以深色表達層級最高的主按鈕,而次按鈕通常對應層級較低的淺色、淺灰色等樣式。

 

 

 

當頁面中沒有主次功能之分時,按鈕的樣式通常取決于當前的用戶場景及業(yè)務需求。

 

比如知乎的答案詳情頁面,答主關注按鈕是淺灰色樣式,就是為了引導用戶沉浸在內(nèi)容中,避免深色樣式對閱讀造成干擾。而答主個人頁的關注變?yōu)樯钌?,則是由于用戶點擊答主頭像的行為來自了解更多的動機,即用戶對其產(chǎn)生了特定興趣,在此場景下使用深色樣式便是為了引導用戶采取社交行為。

 

另外按鈕圓角的轉化也是為了強化信息的聚焦。關于圓角的內(nèi)容可以去我的前一篇文章《寫給設計師看的圓角背后的邏輯》,里面有更詳細的講解。

 

 

 

app store同理。商品列表頁的按鈕一致以淺灰色樣式表達,而詳情頁使用了深色。

 

 

 

我們在按鈕樣式的選擇上,務必需要考慮到當前的用戶場景,避免過低的信噪比而影響信息的傳達效率。

 

比如app store列表頁中,用戶的場景是非特定的瀏覽行為,如果使用深色按鈕將會讓其成為視覺焦點,強制用戶不斷注意到它,致使其成為“噪音”,影響用戶對有效信息的獲取。

 

 

 

 

 

承載性與分割性

面無限延展的屬性讓它可以承載各類信息。包括文字、圖片或視頻元素,異或是元素自由組合所形成的信息單元。

 

并且我們僅加深界面的背景色,就可以基于面的分割性,通過控制模塊間距實現(xiàn)區(qū)域的劃分。(這里的間距即我們熟知的分割條)

 

 

但這種文字墻一般平鋪式的布局并不能更好得反映當前模塊所在的層次,或者從用戶認知上說它們傾向于一個層面上。而且直角矩形的四個頂角所形成的四個焦點,也讓用戶的視線傾向于發(fā)散而非聚焦。直到卡片的出現(xiàn),問題得以順利解決。

 

 

卡片式設計

 

卡片在我們生活中隨處可見,信件、名片、便利貼、甚至是我們的手機屏幕,它們從形態(tài)來說都屬于面,并且都充分利用了面的承載性來充當一個收納信息的容器或載體。

 

信件收納來信人的寄語,名片收納對方的個人信息、便利貼收納事項清單、屏幕收納用戶界面。而且它們方便攜帶,我們想要知道更多,打開它即可。

 

 

 

2012年I/O開發(fā)者大會中,隨安卓4.1系統(tǒng)一同驚艷亮相的Google Now首次將卡片展示在了用戶界面中。

 

 

 

這種后擬物時代的設計不僅一改Google以往混亂的信息展示問題,而且熟悉的擬物感收獲了足量用戶的喜愛。初嘗甜頭之后,Google將卡片應用到了所有的產(chǎn)品,并且將其作為基礎元素列入了一門偉大的設計語言中——material design。

 

你可以在material design中更系統(tǒng)得看到,google通過為界面添加了z軸(海報高度),來擬物映射生活中的一張張卡片。并且通過陰影的濃淡反應卡片所在的高度,通過不同的高度實時反映當前元素的層級關系。

 

 

 

而在ios11中,改版后的app store也使用了大量的卡片進行排列組合,形成格外的清晰的頁面層次引導用戶的視覺動線。

 

 

 

相比原本平鋪直敘的信息,卡片式設計通過以下優(yōu)點讓其風靡設計界——

 

 

1.更高效得獲取信息

 

每張卡片都是一個獨立的面。從面的辨識性上說,獨立和聚焦的特點讓卡片與其他內(nèi)容形成天然的斷層,更易形成視覺焦點。

 

從面的分割性上說,卡片通過犧牲屏幕空間(四周的塊外距)的方式讓區(qū)域的分割相較分割條更為明確,清晰的層次關系便于用戶迅速辨識和獲取信息。

 

比如改版后的支付寶,通過引入圓角卡片來引導用戶更好得留意到下方的各類生活服務,以實現(xiàn)向生活服務數(shù)字平臺的轉型。

 

 

 

 

2.更輕量的入口跳轉

 

每個卡片除了承載信息外,都可以作為單獨的入口承載內(nèi)頁的所有信息,并且卡片的屬性讓內(nèi)頁的展示變?yōu)榱苏归_而非跳轉。

 

比如app store點擊卡片后,便以非線性的展開動畫呈現(xiàn)所有內(nèi)頁信息,返回則只需下滑手勢即可,輕量而有趣。

 

 

 

 

3.更多的交互手勢

 

卡片獨立的特點讓它可排列也可堆疊,這為頁面帶來了更多的交互方式。

 

我們可以通過左右滑動(scroll)解鎖橫向更多的空間,也可以左右輕劃(flick)形成類似tinder那樣新的產(chǎn)品機制。

 

比如知乎的書架引入滑動手勢展示更多內(nèi)容,輕劃手勢切換問題卡片。

 

 

 

 

4.更舒適的視覺觀感

 

卡片基于自身獨立的特征讓它成為網(wǎng)格布局的常用載體,富有觀賞性的視覺張力讓頁面更加吸引眼球。

 

 

 

當然,卡片并不是通用的,原本可以靠留白或分割線分割的信息,如果為了視覺效果硬是卡片化處理,就會導致閱讀的低效,而且浪費空間。

 

比如常見的一些feed流,相比卡片,這類同類的信息流更適合以列表來幫助用戶迅速得掃視,并節(jié)省頁面空間。

 

 

 

 

卡片的嵌套和分割

產(chǎn)品的功能并非完全互相剝離的,很多時候存在包含和平行的關系。

 

這兩類關系分別可以以卡片的嵌套和分割進行處理。前者通過卡片堆砌表達信息的包含關系,而后者則通過視覺分割所形成的點擊域傳達信息的平行關系。

 

 

 

 

比如天貓點評頁中的金香蕉好物推薦,每個卡片承載了商品信息以及點評信息,通過卡片的嵌套表示出兩者的包含關系。而單條推選理由及入口的引導屬于平行關系,因此采用了視覺分割來進行劃分。

 

并且前者跳轉的是點評詳情,后者跳轉的頁面中包含了所有點評、商品推薦以及我要點評,因此在后者所屬的面中加入了淡淡的一層業(yè)務主色來強化它的地位。

 

 

 

 

在支付寶改版后的卡包頁中同樣進行了一次嵌套處理,以更好得容納不同的業(yè)務并傳達各自所在的層級,并且以尺寸和顏色對比進行業(yè)務區(qū)分。

 

 

 

 

京東金融的付費業(yè)務卡片中存在兩個平行關系的功能,因此以分割線形式進行了區(qū)域的劃分。

 

同時,它利用了顏色進行了有效的視覺及情緒引導:黑色背景進行反白處理將其作為一個單獨的視覺落點,強制用戶注意到這里,并且又傳達了付費用戶所尊享的高級感。

 

 

 

 

 

蘋果是如何改頭換面的

 

自從ios7轉型扁平后,線元素在蘋果設計語言中一直占有重要地位,線自身的纖細、輕盈感可以迅速打造apple獨有的輕量調性,不僅是按鈕、圖標的樣式,字體本身也更加傾向纖細的字重。

 

但是,這個僵局在ios11發(fā)布的那天被徹底打破。

 

2017年6月6日,蘋果設計師喬納森仿佛和線有了隔夜仇一般,從解鎖頁面到原生應用中,原本ios10中曾經(jīng)被大量使用的線元素基本全部被面元素取代。

 

比如鎖屏頁面,所有撥號按鈕全部由幽靈樣式改為了面性樣式,而數(shù)字字重的變粗也是一種化面的傾向。這使得按鈕及文字更易辨識,并且降低了線圈所產(chǎn)生的視覺噪音。

 

 

 

app store中也同樣發(fā)生著形態(tài)的易主。

 

你可以在下圖中看到,原本的幽靈按鈕全部改為了淺灰色面性按鈕。用于劃分信息的分割線明度也得到了克制。

 

另外,11代中眾所周知的大標題同樣也可以看做化面的傾向(通過增加自身的面積),強烈的視覺張力引導用戶迅速得進行辨識。

 

另外,所有的數(shù)字全部提至文字的前方,基于用戶由左至右的動線更突出產(chǎn)品自身,以點化線的形式更好得引導用戶進行掃視。

 

 

 

追求極致的蘋果顯然不能容忍tab中未選中態(tài)下出現(xiàn)的線元素,你可以在ios13中看到,線元素得到了徹底的消除,并且顏色一并得到了克制,再次提升了閱讀內(nèi)容的沉浸感。

 

 

 

ios11中的商品詳情頁獲取按鈕也同樣使用了面性,深色的強調樣式更好得契合了頁面所在的用戶場景,召喚用戶對其感興趣的商品采取點擊行為。

 

 

 

控制中心頁面,基于面元素的承載與分割性,所有的信號類功能獨立收納到了卡片中。

 

亮度和音量的調節(jié)則由橫向的線性滑竿控制條改為了縱向的面性控制塊。一方面增強了兩者的辨識力,另一方面,根據(jù)菲茨交互定律,面積的增大帶來了更好的點擊體驗。這一點在miui11的控件優(yōu)化中也得到了應用。

 

 

 

所有的未選中態(tài)圖標也進行了面性處理,大幅提升了10代中未選中頁標簽的辨識性。并且每個圖標對應的文字也進行了加粗。

 

 

 

縱觀ios11中所有形態(tài)的變化,我們可以發(fā)現(xiàn)這次改版的最終目的是:促進內(nèi)容的高效獲取。

 

順從作為蘋果歷來遵循的設計法則之一,和包豪斯“形式追隨功能”設計理念不謀而合。

 

——設計永遠只幫助用戶理解內(nèi)容,但永遠不與內(nèi)容競爭。這一點在ios11的這次“改頭換面”中被徹底應用及實現(xiàn),并且對設計圈影響至今。

 

 

 

 

最后

 

點、線、面理論并不像格式塔、尼爾森可用性法則等方法論那樣,為設計者提供切實可行的具體指導,它更類似一種內(nèi)斂的全局觀,幫助設計師拋開顏色、質感等額外手段,從宏觀的角度以點、線和面的方式將所有的設計元素抽象化處理,讓原本雜亂無序的萬象有章可循。

 

最后,以康定斯基的一句話結尾——

 

 

 

 

 

此篇完。

 

 

 

 

 

 



作者:設計師Andrew
鏈接:https://www.zcool.com.cn/article/ZMTE3MjU3Ng==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

設計小白必看|好設計的標準

天宇 設計思維

在設計實踐的廣闊天地里,設計師們常面臨一個核心挑戰(zhàn):如何在領導與產(chǎn)品經(jīng)理缺乏設計敏感度的環(huán)境中,持續(xù)產(chǎn)出高質量作品,并確立設計評價的統(tǒng)一標準。本文通過分析具體案例,探討視覺設計的構成要素與評估原則,旨在為設計師指明成長路徑,促進專業(yè)技能的精進。
 
設計品質的界定與追求
  1. 獎項榮譽的光環(huán):例如,無印良品憑借一組榮獲日本平面設計最高獎項——龜倉雄策獎的海報,展示了設計的卓越。該獎項被譽為設計界的“奧斯卡終身成就獎”,海報以簡練的色彩和幾何形狀,藝術化地再現(xiàn)了人與自然的和諧,特別之處在于全部采用廢紙板制作,既創(chuàng)新又環(huán)保,與品牌理念緊密相連,實現(xiàn)了藝術與商業(yè)的雙贏。
  2. 國際設計獎項的權威:德國紅點設計獎,作為全球設計領域的風向標,激發(fā)了全球設計師的熱情。像徠卡相機,不僅是高端攝影的代名詞,其設計也屢獲殊榮,融合了創(chuàng)新與傳統(tǒng),成為設計與商業(yè)并重的典范。自2015年推出的Apple Watch,亦憑借不斷的創(chuàng)新設計,摘得了眾多設計桂冠,證明了設計在推動產(chǎn)品革新和市場接納中的關鍵作用。
  3. 設計公司的國際舞臺:提及韓國設計公司Plusx,其在紅點設計獎的頻繁亮相,顯示了設計跨界合作與國際化視野的重要性,為設計的多元化和國際競爭力提供了范例。
設計小白必看|好設計的標準
 
 
 
在評估設計作品,尤其是商業(yè)設計的價值時,獲得權威設計獎項的認可確實是衡量其優(yōu)秀與否的重要標準之一。然而,好設計的定義遠不止于此,它還需在實用與美學間取得完美平衡。
 
深澤直人的傘柄設計:一個典型的例子是日本設計大師深澤直人的雨傘設計,傘柄的微妙凹槽,既自然又貼心地解決了雨天攜帶購物袋的困擾,展現(xiàn)了設計的創(chuàng)新與人文關懷。這類設計以其細膩洞察和實用價值,贏得了廣泛贊譽。
 
實用性與美感并重:產(chǎn)品的美學不應脫離其實用性而獨立存在。蘋果iMac的設計就是這一原則的杰出代表。從初代的半透明機身到如今的超薄設計,每一代產(chǎn)品都展現(xiàn)出極致的工藝美學,即便在沒有品牌標識的情況下,其設計的獨特性也能讓人一眼辨識,這正是精湛工藝與美學融合的典范。
 
直觀性與普適性:好的設計應當易于理解,跨越年齡界限。無印良品的CD播放器設計便是一個典型,其簡潔直觀的操作界面,即便是老人和孩子也能輕松掌握,體現(xiàn)了設計的人性化和普及性。
 
設計哲學的深度:以微信為例,其設計理念強調“克制”與“約束”,從簡潔的開屏界面到不刻意夸大產(chǎn)品價值,專注于核心功能,展現(xiàn)了一種對用戶尊重與誠實的態(tài)度。在眾多APP日益商業(yè)化的背景下,微信多年如一日的堅持,顯得尤為難能可貴。
 
真誠與透明:反觀當前某些廣告宣傳,如電商平臺中常見的誤導性促銷信息,如所謂的“第二件0元”實則并未真正減免,這種做法違背了好設計的真誠原則,損害了消費者的信任。真正的優(yōu)質設計,應當如同微信一樣,以真實的功能價值贏得用戶,而非依賴虛假營銷。
設計小白必看|好設計的標準
 
 
 
設計,無論是應用于APP還是工業(yè)產(chǎn)品,核心在于實用性,滿足用戶需求的同時,也不忘在細節(jié)處下功夫。正如無印良品的電飯煲,圓潤可愛的外表下,還細心設計了放置飯勺的凹槽,這些細微之處的關懷,成就了設計的卓越。優(yōu)秀的設計作品,即便隨時間流逝,其設計理念與文化內(nèi)涵仍歷久彌新,成為不朽的經(jīng)典,如博朗和蘋果的早期設計,至今仍是設計史上的里程碑。
 
設計的精髓在于全面性,避免在顯眼處過分雕琢,而忽視了不起眼的角落。正如商場中,若華麗的大堂與臟亂的洗手間形成鮮明對比,顧客的體驗將大打折扣,難以吸引回頭客。因此,卓越設計的標志是對每一個細節(jié)的精心打磨,確保整體體驗的完美無瑕。
來自瑞典的品牌Freitag,巧妙利用回收卡車車篷制作背包,其獨特的二手質感、個性化圖案與顏色,不僅設計實用,更傳遞出強烈的環(huán)保理念,展示了設計與可持續(xù)發(fā)展的完美融合。
設計小白必看|好設計的標準
 
 
 
1.Good design is innovative
好的設計是創(chuàng)新的
2.Good design is aesthetic
好的設計是美的
3.Good design makes a product understandable
好的設計是易懂的
4.Good design is unobtrusive
好的設計是克制的
5.Good design is honest
好的設計是誠實的
6.Good design makes a product useful
好的設計是實用的
7.Good design is long-lasting
好的設計是經(jīng)得起歲月的考驗
8.Good design is thorough down to the last
detail
好的設計是考慮周到并且不放過每個細節(jié)的
9.Good design is environmentally friendly
好的設計是環(huán)保的
10.Good design is as little design as possible
 
設計領域的金科玉律,尤其是Dieter Rams提出的“好設計的10個原則”,深刻影響了德國博朗公司的產(chǎn)品哲學,這些原則成為了衡量設計作品的經(jīng)典標尺。
 
商業(yè)設計的卓越不僅體現(xiàn)在設計本身的美感與創(chuàng)新,更在于市場的積極反饋和用戶口碑。蘋果產(chǎn)品是這一理念的典型例證,不僅屢獲設計大獎,其市場表現(xiàn)和銷量同樣令人矚目。戴森公司則以創(chuàng)新技術為核心,如其吹風機、卷發(fā)棒等產(chǎn)品,憑借前沿科技與設計美學的結合,實現(xiàn)了商業(yè)上的巨大成功,再次證明了好的商業(yè)設計應是美觀性與市場性的雙重勝利。
設計小白必看|好設計的標準
 
 
視覺設計與UI設計的標準:
 
視覺設計與UI設計的標準化對于維護品牌形象、提升用戶體驗至關重要。在大型企業(yè)中,確保設計的一致性尤為關鍵,以下是一些普遍認可的設計標準:
 
1. 網(wǎng)格系統(tǒng)的應用:確保頁面布局有序,增強一致性。
2. 比例與尺寸的合理性:維持視覺元素間的和諧比例。
3. 文字的清晰可讀:選擇易讀性強的字體,合理設置字號、行距。
4. 色彩的情感傳達:色彩運用需考慮文化寓意及情感影響。
5. 圖片的精選與優(yōu)化:高質量圖像與品牌調性相符,提升視覺吸引力。
6. 圖標與圖形的規(guī)范:制定統(tǒng)一的圖標庫,確保圖標含義清晰一致。
7. 按鈕設計的統(tǒng)一性:按鈕樣式、交互反饋需遵循統(tǒng)一標準。
8. 視覺層次的構建:通過大小、顏色、位置等區(qū)分信息優(yōu)先級。
9. 對齊與平衡法則:確保頁面元素視覺上的平衡與協(xié)調。
10. 視覺引導策略:明確的視覺路徑引導,幫助用戶高效完成任務。
設計小白必看|好設計的標準
 
 
 
產(chǎn)品設計的優(yōu)質標準:
 
遵循上述設計準則的同時,產(chǎn)品設計還需考慮以下幾個方面:
- 用戶中心:深入理解用戶需求,以用戶為中心進行設計。
- 功能性:確保產(chǎn)品功能的實用性和易用性,解決用戶痛點。
- 創(chuàng)新性:在設計中融入新穎理念,區(qū)別于競爭對手。
- 持續(xù)性:設計應考慮產(chǎn)品的生命周期,便于升級和維護。
- 可持續(xù)性:關注環(huán)保材料與制造工藝,減少環(huán)境影響。
設計小白必看|好設計的標準
 
 
 
在設計實踐中,嚴格遵循這些準則,不僅能提升設計的專業(yè)度,還能確保產(chǎn)品在視覺與功能上的雙重卓越。
網(wǎng)格系統(tǒng)作為設計領域的基石,其重要性已被谷歌、微軟、蘋果、Naver、阿里巴巴等巨頭公司廣泛認可,并將其納入設計規(guī)范之中。盡管網(wǎng)格并非僵化的規(guī)則,允許在基礎框架上靈活變化,但它在維持設計的一致性和提高工作效率方面扮演著至關重要的角色。
 
Web設計中的12列網(wǎng)格標準:12列網(wǎng)格因其靈活性而備受歡迎,能夠輕松適應6列、4列、3列乃至2列的布局需求,使得頁面結構更加條理化和模塊化。在PC端設計中,采用12欄網(wǎng)格系統(tǒng)能夠顯著提升頁面的統(tǒng)一性和標準化程度,使設計過程遵循規(guī)律,簡化決策,從而達到高效而美觀的效果。響應式設計中,網(wǎng)格更是保證跨平臺一致性的關鍵工具。
 
Reddit官網(wǎng)便是12列網(wǎng)格應用的典范,其頁面布局既有序又富有變化,充分展示了網(wǎng)格在網(wǎng)頁設計中的優(yōu)勢。網(wǎng)格系統(tǒng)的運用,無疑為網(wǎng)頁或PC設計奠定了良好的基礎框架。
 
移動設備上的6列網(wǎng)格:考慮到屏幕尺寸限制,移動端設計傾向于使用6列網(wǎng)格作為標準,它既能滿足大部分設計布局需求,又能方便地實現(xiàn)二等分或三等分布局。盡管如此,針對特定需求如淘寶等電商應用,由于信息密度高,可能會采用12列網(wǎng)格以容納更多內(nèi)容。
 
設計小白必看|好設計的標準
 
 
海外產(chǎn)品中的網(wǎng)格應用示例,如Pinterest,其界面設計明顯遵循了一個6列網(wǎng)格系統(tǒng),圖片與按鈕的布局均嚴格遵循這一規(guī)則,確保了界面的整潔與統(tǒng)一,每一頁的邊距處理也保持一致,進一步證明了網(wǎng)格在打造有序且視覺舒適界面中的核心作用。
 
不論是PC還是移動平臺,網(wǎng)格系統(tǒng)都是設計中不可或缺的組成部分,它既是設計標準化的推手,也是提升用戶體驗的有效途徑。
 
Airbnb的設計備受推崇,其背后的秘密在于一套有序的網(wǎng)格系統(tǒng)。他們采用的布局策略是左右邊距48像素,內(nèi)容區(qū)域間隔24像素,這樣的設計增加了頁面的留白空間,營造出舒適愉悅的瀏覽體驗,使得Airbnb的設計呈現(xiàn)出獨特的秩序美感和視覺焦點。
 
轉而觀之,谷歌作為設計規(guī)范的先行者,在其最新設計語言中首次詳盡闡述了網(wǎng)格系統(tǒng)的應用。谷歌的網(wǎng)格系統(tǒng)不僅涵蓋了傳統(tǒng)元素如邊距、間隔,還特別定義了四欄布局,以適應手機、Web及平板等多種平臺的產(chǎn)品設計,體現(xiàn)出其在跨平臺設計中對一致性和靈活性的重視。谷歌官網(wǎng)是深入了解其網(wǎng)格系統(tǒng)細節(jié)的寶貴資源。
設計小白必看|好設計的標準
 
 
 
合理比例的重要性:比例在設計中占據(jù)核心地位,合理的比例配置能夠顯著提升視覺效果。盡管存在爭議,黃金比例(約1.618:1)作為古老而經(jīng)典的美學法則,自古希臘數(shù)學家歐幾里得時期起就被廣泛討論。盡管有人質疑將其作為絕對設計法則的適用性,但黃金比例不失為設計初期的一個有益參考框架,而非一成不變的規(guī)則。
蘋果公司在其APP圖標設計中巧妙運用黃金比例,這一原則貫穿其眾多設計作品,證明了黃金比例在現(xiàn)代設計中的持續(xù)影響力。眾多知名互聯(lián)網(wǎng)品牌亦紛紛采納黃金比例,以提升視覺和諧與品牌識別度,再次驗證了比例設計在塑造高品質視覺體驗中的關鍵作用。
Facebook在其官方網(wǎng)站的設計中同樣采納了接近黃金比例的原則,以此優(yōu)化視覺布局,確保用戶界面既美觀又易于導航,進一步證實了黃金比例在現(xiàn)代數(shù)字設計中的廣泛應用與影響力。
 
谷歌的Material Design規(guī)范,作為設計界的權威指南,詳細闡述了如何通過標準化的比例(如16:9, 3:2, 4:3, 1:1, 3:4, 2:3等)來構建界面布局,以實現(xiàn)設計的一致性和高效性。這一做法不僅統(tǒng)一了視覺語言,還提升了用戶體驗,強調了在設計中遵循規(guī)律比例的重要性,它是塑造流暢視覺流程和提升設計整體感的關鍵。
設計小白必看|好設計的標準
 
 
文字易讀性:設計中的核心要素
 
在產(chǎn)品設計中,文字是傳達信息的橋梁,其易讀性直接關系到用戶體驗的質量。優(yōu)化文字排版,確保信息傳遞的高效,是設計中的重要一環(huán)。通過精細控制對齊、字體選擇、行距、字間距等,可以顯著提升閱讀體驗。
 
對齊的魔力:對齊方式對閱讀節(jié)奏有著直接影響?;靵y的對齊會導致閱讀效率下降,而合理的對齊能夠引導用戶的視線流動,提升閱讀體驗。如上圖所示,三種不同的對齊方式帶來了迥異的閱讀感受。良好的對齊不僅美觀,還能使信息層次分明,便于用戶快速抓取關鍵信息。
 
間距的藝術:間距(包括行間距和字間距)是控制閱讀節(jié)奏的另一關鍵。過小的間距會使文字擁擠,閱讀時易產(chǎn)生視覺疲勞;反之,過大的間距則可能導致閱讀斷層,信息連貫性受損。找到合適的間距比例,是保障閱讀流暢性的關鍵。這要求設計師在設計過程中,根據(jù)內(nèi)容的性質和閱讀場景,精心調整,以達到最佳的視覺舒適度和信息傳遞效率。
設計小白必看|好設計的標準
 
 
無論是遵循黃金比例的布局設計,還是遵循標準化比例的界面構建,亦或是通過精細調控實現(xiàn)的文字易讀性,都是設計中不可或缺的要素。它們共同作用,不僅提升了設計的美學價值,更深層次地,優(yōu)化了用戶體驗,確保了信息的有效傳達。在數(shù)字化時代,把握這些設計原則,是每一位設計師通往卓越設計道路上的必修課。
 
在提升設計的易用性方面,文字大小與字體的變化扮演著至關重要的角色。信息架構通常圍繞標題、副標題和正文構建,通過調整文字尺寸與粗細,可以有效引導用戶注意力,確保信息的層次分明。蘋果公司便巧妙地將黃金比例應用于字體設計,其字體大小對比通常維持在1.7:1或0.7:1,這與黃金比例的美學原則不謀而合,進而增強了視覺層次和閱讀流暢性。
 
對比策略的運用,是另一提升設計易用性的有效手段。通過文字大小、顏色及透明度的對比,可以顯著提升內(nèi)容的可識別度。然而,在追求視覺效果的同時,還需遵循Web內(nèi)容無障礙指南,確保所有用戶都能無障礙獲取信息,推薦的對比度標準為至少4.5:1。蘋果官網(wǎng)便是這一原則的絕佳示范,巧妙利用文字的大小、顏色及透明度差異,使得信息傳遞既高效又具有吸引力。
設計小白必看|好設計的標準
 
 
 
色彩的情感傳達是設計中不可忽視的一環(huán)。色彩的選擇不僅關乎美觀,更直接影響用戶的情緒反應。每種色彩因其明度、飽和度的不同,能喚起截然不同的情感體驗。例如,紅色既可以表達個性與現(xiàn)代感,也能展現(xiàn)性感魅力。為了精準掌握色彩的情感語言,可以借助“色彩意象尺”這一工具,它能幫助設計師了解每種色彩所蘊含的情感傾向,是品牌塑造和色彩搭配的重要輔助工具。在品牌設計過程中,色彩意象尺能指導設計師選定符合品牌調性的色彩方案,確保色彩運用與品牌理念和諧統(tǒng)一。
 
以定義品牌色彩為例,通過色彩意象尺分析,設計師可以深入理解不同色彩的情感寓意,從而在眾多顏色中作出明智選擇,不僅塑造品牌的獨特視覺形象,還能激發(fā)目標受眾的共鳴,進一步強化品牌識別度與市場影響力。正確運用色彩,不僅美化視覺界面,更能在情感層面與用戶建立連接,是設計中不可或缺的策略之一。
設計小白必看|好設計的標準
 
 
 
舉個例子
在著手創(chuàng)建一個面向全球95后用戶的時尚社交產(chǎn)品時,色彩選擇尤為關鍵。假設我們的品牌定位趨向于青春活力與輕盈,首先需從色彩意象尺中挑選符合這一氣質的色彩基礎。在這個過程中,我們鎖定紅色和黃色作為潛在的候選色彩。
 
分析競品色彩策略:調研發(fā)現(xiàn),多數(shù)競品偏向使用紅色系,這為我們提供了差異化的機會。于是,我們決定避開紅色,轉而選取黃色作為品牌的核心色彩,以此在市場中脫穎而出。
 
考慮用戶偏好:接下來,需分析目標用戶群的性別比例。假設男性用戶占比更多,且偏好較為大膽的色彩組合,我們基于黃色進行調整,提高其明度和飽和度,最終選定了一款接近糖果玉米的鮮明黃色,以滿足年輕男性群體的審美偏好。
 
確定品牌色彩:通過這一系列步驟,我們的品牌色方向得以確立——鮮明而富有活力的黃色,既體現(xiàn)了品牌的時尚特性,又與目標用戶群體產(chǎn)生強烈共鳴。
設計小白必看|好設計的標準
 
 
理論應用與實踐:理解品牌個性維度、色彩情感及色相意向尺等概念,對于初學者可能略顯陌生,但通過本文的介紹,希望你能逐步掌握這些理論,并在實際項目中不斷實踐。隨著時間的積累,你將能自信地從零開始創(chuàng)造獨特且經(jīng)典的色彩搭配方案。
 
推薦資源:為了進一步提升你的色彩搭配能力,推薦訪問“BrandColors.net”(請注意,網(wǎng)站名稱為示例,實際網(wǎng)址應自行搜索確認),這是一個匯聚了全球知名企業(yè)的品牌色彩庫,你可以從中獲取靈感,學習如何高效地運用色彩來強化品牌形象。
設計小白必看|好設計的標準
 
 
上文提到的案例,展示了如何根據(jù)產(chǎn)品定位(如優(yōu)雅與高級),利用色彩意向尺選擇中性色調,進而打造出既符合品牌調性又具視覺吸引力的設計實例,進一步證明了色彩選擇在品牌塑造中的重要性。
 
通過這些步驟和工具的綜合運用,你將能夠更加系統(tǒng)和科學地定義屬于自己的品牌色彩,為產(chǎn)品注入獨特的靈魂與魅力。
 
在設計領域,圖片作為傳達信息的強有力工具,其重要性不言而喻。它不僅直接且有效地表達設計意圖,還能瞬間提升作品的整體品質。當設計中需要傳達特定情感或概念,如安全,通過展示警察、保鏢、手機鎖屏、戴口罩的圖像,或是保險箱、指紋鎖等象征物,可以直觀地向觀眾傳遞安全的信號。進一步,圖片的選擇還能啟發(fā)設計風格,如保險箱的塊面感、穩(wěn)重的字體和對稱構圖,都能為設計增添安全、可靠的氣息。
 
圖片的運用不僅限于情緒板,它們在設計項目中發(fā)揮著舉足輕重的作用,能夠清晰地傳達信息,提升視覺效果。一張精心挑選的攝影照片與設計巧妙融合,如汽車與風景的和諧搭配,能極大提升作品的藝術感和吸引力,尤其是在電商設計中,優(yōu)質的圖片與產(chǎn)品氣質相得益彰,能有效提升銷售額與設計美感。
設計小白必看|好設計的標準
 
 
 
圖標設計同樣不容忽視,它們不僅是功能的指示符號,更是設計語言的重要組成部分。圖標的設計風格,如圓角大小、質感選擇,都能深刻影響作品的氣質傳達。柔和的斷口與疊加色彩圖標,給人以輕松愉悅的感受,適合營造親切友好的氛圍;而線條硬朗、質感穩(wěn)重的圖標,則更適合金融等領域,傳遞出專業(yè)與信賴感。圖標設計還需遵循用戶習慣,采用與日常生活緊密相關的隱喻,確保用戶能夠迅速理解和感知,從而提升用戶體驗。
 
綜上所述,設計師應擅長運用圖片和圖標作為設計語言,通過精準的圖片選擇與富含隱喻的圖標設計,有效傳達設計概念,提升設計的整體品質與溝通效率。這不僅是提升設計作品美學價值的關鍵,更是連接用戶情感與理解的橋梁。
 
在產(chǎn)品設計的復雜生態(tài)系統(tǒng)中,按鈕作為用戶交互的核心元素,其設計的精確性與合理性至關重要。每個按鈕都承載著特定的行動召喚,因此,制定明確的按鈕規(guī)則是設計中不可或缺的一環(huán)。設計中,按鈕樣式多樣,如填充型、線框型、色塊描邊型及純文字型,每種類型對應不同的應用場景。主行動按鈕通常采用品牌色彩填充,以增強點擊欲望,如“購買”、“下一步”等關鍵操作;輔助操作則傾向于采用白色邊框按鈕,以減輕視覺負擔。警告操作采用紅色,無效狀態(tài)則以灰色呈現(xiàn),以此明確按鈕的功能和狀態(tài),避免用戶混淆。
設計小白必看|好設計的標準
 
 
缺乏明確的按鈕設計指引,將導致設計混亂和功能混亂,影響用戶體驗。因此,建立一套詳細的按鈕使用規(guī)范,是設計團隊的必備工作。
 
視覺對齊準則同樣影響著設計的精確性和美觀度。設計時,精確的數(shù)學對齊雖為基礎,但在特定情況下,視覺效果的和諧同樣重要。如NAVER的閃屏設計,通過輕微的視覺偏差調整,使界面看起來更為和諧自然。在處理文字排版時,粗細字體的搭配需注意視覺平衡,有時需對字體大小進行微調,以確保視覺上的等效性。同樣,中英文數(shù)字混排時,由于視覺感知差異,需適當調整數(shù)字大小,確保整體視覺的均衡。
設計小白必看|好設計的標準
 
 
 
按鈕設計的規(guī)范性與視覺對齊的精確性,是提升產(chǎn)品設計質量的關鍵。通過細致入微的調整,如遵循特定場景下的按鈕樣式規(guī)則、適時進行視覺矯正、以及在字體與數(shù)字混排中追求視覺平衡,設計師能夠確保用戶界面既符合邏輯,又美觀協(xié)調。這些細節(jié)的把握,是設計從“可用”走向“卓越”的必經(jīng)之路。


作者:啊糖糖att
鏈接:https://www.zcool.com.cn/article/ZMTYxOTMzMg==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計圖標定制、用戶體驗設計交互設計、UI咨詢高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

產(chǎn)品設計如何利用心理學

ui設計分享達人 設計思維

產(chǎn)品設計的成功除了依賴設計方案和技術實現(xiàn),還與用戶的心理密切相關。用戶心里決定了我們用怎樣的設計策略解決問題。我們常認為人們做決策時是理性的,但其實用戶行為經(jīng)常是非理性,會受到情緒、習慣和社交環(huán)境的影響。了解這些心理學規(guī)律能幫助我們更好地的預測和引導用戶行為,優(yōu)化產(chǎn)品體驗,提高用戶的粘性、留存率和轉化率,從而產(chǎn)品商業(yè)價值最大化。
產(chǎn)品設計如何利用心理學
 
 
產(chǎn)品設計如何利用心理學
 
 
產(chǎn)品設計如何利用心理學
 
 
產(chǎn)品設計如何利用心理學
 
 
產(chǎn)品設計如何利用心理學
 
 
產(chǎn)品設計如何利用心理學
 
 
產(chǎn)品設計如何利用心理學
 
 
產(chǎn)品設計如何利用心理學
 
 
產(chǎn)品設計如何利用心理學
 
 
產(chǎn)品設計如何利用心理學
 
 
產(chǎn)品設計如何利用心理學
 
 
產(chǎn)品設計如何利用心理學
 
 
產(chǎn)品設計如何利用心理學


作者:DesignLink
鏈接:https://www.zcool.com.cn/article/ZMTY1MDk0MA==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。

“好的設計組件”在搜索設計場景中的定義

ui設計分享達人 設計思維

 
 
關于設計組件庫,我們有一些新思考
 
 
 
從網(wǎng)上搜索設計組件,我們能找到各種對外公開的設計組件庫,同樣還有不少或概括或詳細的文章,手把手教你“如何搭建一個好的設計組件庫”,但這些方法論很少探討面對C端組件頻繁增改、設計規(guī)范動態(tài)調整,如何高效賦能業(yè)務設計交付的相關內(nèi)容,但這恰恰是搜索業(yè)務面臨的關鍵問題。
 
搜索是一個“牽一發(fā)而動全身”的業(yè)務,每一個微小的設計細節(jié)都有可能影響各個業(yè)務的數(shù)據(jù)指標,一個“好的設計組件庫”需要以一種潛移默化的方式讓設計師掌握設計規(guī)范,完成合規(guī)的設計,從這個角度而言它應該比較
「好懂」
。
 
而作為服務于整個設計團隊的公用設計組件庫,面對每月數(shù)以萬計的調用次數(shù),它必須保障最基本的易用性,應該非常
「好用」
 
同時,面對頻繁迭代,“好的設計組件”還需要保持最快的更新速度,為各個橫向團隊提供正確的樣式,從這個角度來說它還要
「好維護」
。
 
因此,
「好懂、好用、好維護」
是搜索設計語境下,對一個“好的設計組件”的定義。
 
關于設計組件庫,我們有一些新思考
 
 
 
接下來,我們將從這三個「好」入手,分享搜索設計組件庫在升級過程中的一些思考,希望能和大家共同探討。
 
關于設計組件庫,我們有一些新思考
 
 
 
 
關于設計組件庫,我們有一些新思考
 
 
 
“萬丈高樓平地起”,我們先來說說如何從零開始構建一個既符合設計規(guī)范又易于理解的設計組件。
 
首先,在搭建組件時,我們可以考慮采用
多層嵌套
的方式,即組件(Component)內(nèi)部嵌套變體(Instance)。這種方式不僅能省去組件搭建和修改過程中的重復操作,甚至還能在解綁組件時,通過選中內(nèi)部的子組件圖層進行解綁,大大簡化了搭建和使用雙方的操作流程。
 
在多層嵌套的思路下,我們可以進一步用
“底層靈活、上層收斂”
來指導組件的搭建。這意味著底層變體的形式足夠多樣,能夠支持大部分的狀態(tài)切換,而在上層組件搭建的過程中顯性地加強規(guī)范的指引(如規(guī)范中不允許使用的樣式不對外展示),以降低超出規(guī)范設計的可能。
 
具體的搭建流程可以大致分為三步:
場景收集和分析、搭建基本變體組、拓展高階變體組
 
我們將通過視頻組件搭建的生動案例,具體介紹如何依據(jù)“底層靈活、上層收斂”原則來搭建組件庫,使得組件本身既足夠靈活,又能起到足夠的約束作用。
 
關于設計組件庫,我們有一些新思考
 
 
 
在著手搭建某類組件時,我們首先通過規(guī)范確認和場景遍歷,廣泛收集各類變體。隨后,從我們能想到的所有維度出發(fā),對這些變體進行細致定義。這樣,我們就能得到一張詳盡描述組件變體性質的表格。表格的第一列依次列出變體1、變體2、變體3等,而第一行則羅列出各種維度,如寬度、比例等。通過這種方法,我們可以將原本零散、雜亂的組件變體描述,系統(tǒng)地歸納整理成一張清晰明了的表格。
 
關于設計組件庫,我們有一些新思考
 
 
 
表格通過不同維度來唯一確定一個變體,這些維度可大致分為兩個特性和一個共性。共性指的是所有變體在這一維度上均保持一致,常見特性則涵蓋了最常見的分類性質,如寬度、高度、數(shù)量和優(yōu)先級等,而業(yè)務特性則與具體業(yè)務緊密相關。
 
在搭建組件時,我們可以遵循
「共性-常見特性-業(yè)務特性」
順序,這樣的順序有助于降低理解成本,因為最符合心智的分類被置于外層,同時底層的組件又保持了足夠的靈活性,便于切換各種變量。對于業(yè)務特性,我們可以根據(jù)實際情況靈活處理,既可以將其作為基本組件的延展,也可以不將其納入組件范疇。
 
以視頻組件為例,我們從表格中獲取的信息如下:
 
  •  
    視頻尺寸及其組合是最符合用戶心智的變體選擇;
  •  
    播放狀態(tài)是所有變體的共有性質;
  •  
    自動播放情況與業(yè)務相關,但不一定需要在組件庫中呈現(xiàn);
  •  
    高階組件僅涉及少部分尺寸的組件,應在完成基本組件搭建后再進行。
 
據(jù)此,我們可以輕松梳理出視頻組件搭建流程的優(yōu)先級:
 
  1.  
    播放狀態(tài)作為共性,應首先搭建;
  2.  
    基本組件尺寸和組合是最符合用戶心智的變體選擇,應緊隨其后;
  3.  
    高階組件在完成基本組件搭建后再進行。
 
值得注意的是,“封面槽位”是“播放狀態(tài)”中的一個圖層。根據(jù)“底層靈活、上層收斂”的原則,我們將其插入到搭建播放狀態(tài)之前。因此,視頻組件的最終搭建流程為:
 
  1.  
    封面槽位;
  2.  
    播放狀態(tài);
  3.  
    基本組件尺寸和組合;
  4.  
    高階組件。
 
關于設計組件庫,我們有一些新思考
 
 
 
完成對視頻組件搭建的分析,我們就可以有條不紊地開始搭建組件了。先搭建基本組件視頻組件,再用基本組件搭建高階組件。這一步驟雖然為大家所熟知,但仍需格外注意,如配置項的設置要力求合理,也可以融入設計規(guī)范和使用規(guī)范,同時還應將一些搭建過程中的零散組件集中收納避免被調用。關于這些具體的注意事項,我們將在后續(xù)部分進行詳細闡述。
 
至此我們完成了組件搭建的基本流程,一個達到及格線的視頻組件就誕生了。據(jù)統(tǒng)計,優(yōu)化后每次調用視頻組件將節(jié)省至少10步的點擊操作!
 
 
關于設計組件庫,我們有一些新思考
 
 
 
完成了一個基本組件的搭建后,我們可以轉換視角,從使用的角度來審視并檢查這個組件。
 
我們期望,從插入組件變體、切換組件配置,再到最后的解綁組件,整個流程都能縱享絲滑且穩(wěn)定可靠,確保業(yè)務設計師在使用過程中獲得最佳體驗。
 
關于設計組件庫,我們有一些新思考
 
 
 
我們可以一步步來審視組件的使用過程。首先是插入組件,據(jù)觀察,通常有三種方式,①在左側的資產(chǎn)面板(Assets)中直接找到對應組件并插入;②通過查閱設計規(guī)范,鎖定所需的變體后復制粘貼;③選中一個不需要的組件,通過右側的“切換變體”面板(Swap instance)切換成所需的變體。很明顯,在這個過程中依賴的是組件的精準搜索和快速定位。
 
關于設計組件庫,我們有一些新思考
 
 
 
為了提升搜索精度,我們可以從組件命名入手,采用中、英、數(shù)字結合的方式,實現(xiàn)模糊匹配;也可以在發(fā)布時隱藏不希望被調用的組件,以減少無用的搜索結果。如果組件是采用前文提到的“多層嵌套”方式搭建的,我們可以添加“Preferred”子組件,這樣在切換時會優(yōu)先展示這些子組件,這個功能在切換圖標時尤為實用。
 
對于習慣邊查閱設計規(guī)范邊使用組件的設計師,我們增加了更多實際使用的正誤案例,這些案例直觀展示了組件變體的正確選擇和使用方式,進一步降低了規(guī)范的理解成本,有效輔助設計決策。同時,我們專門維護了一個固定區(qū)域,用于平鋪展示所有組件變體。為了確保能夠輕松點選,我們將變體放在最外層展示(即不在任何Frame、Group或Section中)。這樣能讓設計師一目了然地看到所有變體,從而快速選擇所需的組件。
 
關于設計組件庫,我們有一些新思考
 
 
 
在組件配置階段,有三項注意點能讓組件更加易用,即“重視組件的可視化效果、設置高效易用的配置項、貼心地保存修改”。
 
關于設計組件庫,我們有一些新思考
 
 
 
考慮到C端組件的多樣性和用戶的使用習慣,我們應避免使用過于復雜的分組方式。相反,應更注重組件的樣式展示,并盡量簡化組件的層級結構。這樣,設計師在使用時能夠更直觀地看到組件的外觀,而無需深入復雜的層級去查找。
 
另外值得注意的是,F(xiàn)igma會默認用組件集合中最左上角的組件生成預覽樣式,因此應當把視覺上最有代表性的變體放在左上角,這個效果在切換變體(Swap instance)時很重要,因為目前在該面板中沒法查看組件細節(jié),只能靠縮略圖和名稱來推測是哪個組件。
 
關于設計組件庫,我們有一些新思考
 
 
 
其次對于配置項的設置也大有講究,業(yè)界有組件庫為了實現(xiàn)C2D2C,從源頭上將設計組件和前端組件的配置項打平,這是不錯的思路,但有可能會提升設計側的理解成本。針對搜索業(yè)務的特殊語境,我們還是選擇了從「規(guī)范理解」角度去設置組件的配置項,將所有允許自定義的配置盡可能外露,并清晰地說明修改限制,如字數(shù)限定、選項個數(shù)等,這樣能夠在使用的過程中強化業(yè)務設計師對規(guī)范的掌握。
 
另一個常常被忽視的關鍵點是選項和配置的排序問題。為了提高瀏覽和選擇的效率,建議對選項和選項之間,以及外層的不同配置項,都按照一定的邏輯順序進行排序。
 
關于設計組件庫,我們有一些新思考
 
 
 
最后一點,我們稱之為
“貼心地保存修改”
機制,這個針對的是文字修改的場景。
 
在實際操作中,使用一個組件可能需要對多個配置項進行修改。有時在修改完文字內(nèi)容后再去調整其他配置時,已修改的文字會被重置。這時文本屬性(text property)的設置就顯得尤為重要,它能夠記憶并保存修改過的文字內(nèi)容,從而免于重復輸入。
 
還有一些情況是,某個組件變體實際上并沒有與某個值相對應的組件(盡管Figma機制允許選擇該值),用戶切換后就會發(fā)現(xiàn)組件完全變了,只能撤回。為了避免這類情況,建議使用另外的標記來表明組件某個設置項是不可切換的。
 
關于設計組件庫,我們有一些新思考
 
 
 
 
關于設計組件庫,我們有一些新思考
 
 
 
完成了組件的搭建和檢查,接下來讓我們聚焦于組件的日常維護。
 
這一環(huán)節(jié)可以從兩個維度展開,一是依托中臺的日常數(shù)據(jù)監(jiān)控進行維護,二是通過團隊內(nèi)部的緊密協(xié)同機制來保障。后者更多側重協(xié)作流程和機制上的建設,在本文中我們不做更多展開,重點討論前者。
 
數(shù)據(jù)監(jiān)控的方式主要依托Figma中的組件數(shù)據(jù)看板(查看路徑:View libraries-Analytics),看板中展示了各個組件的調用數(shù)和解綁數(shù)數(shù)據(jù),這些數(shù)據(jù)不直接反映組件的優(yōu)劣,但如果我們觀測到某個組件解綁率偏高,我們會考慮直接把它
作為模板
而不是創(chuàng)建成組件。
 
關于設計組件庫,我們有一些新思考
 
 
 
 
總結
 
以上是百度搜索設計團隊在設計組件庫升級過程中的心得分享,包括搜索業(yè)務對于“好的設計組件”的訴求,以及一些搭建和優(yōu)化組件的實用思路,核心是探討如何從組件庫建設的角度入手,成功助力團隊提升設計資產(chǎn)消費效率。
 
關于設計組件庫,我們有一些新思考
 
 
 
當前我們已經(jīng)完成設計資產(chǎn)工程化的前序環(huán)節(jié),我們對設計資產(chǎn)的升級和探索并沒有結束,未來我們將持續(xù)探索設計系統(tǒng)工具化的形態(tài)、與AI大模型結合的機會,通過豐富消費途徑,實現(xiàn)在業(yè)務交付的不同階段下全方位提效。這部分內(nèi)容后續(xù)有機會也將會和大家見面,請大家期待!
 
感謝閱讀,以上內(nèi)容均由百度MEUX團隊原創(chuàng)設計,以及百度MEUX版權所有,轉載請注明出處,違者必究,謝謝您的合作。申請轉載授權后臺回復【轉載】。


作者:百度MEUX
鏈接:https://www.zcool.com.cn/article/ZMTY1MTYwOA==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。
 

設計的兩面性:理性決策與感性表達

天宇 設計思維

引言
設計應該是感性的還是理性的?設計是感性重要還是理性重要?此類問題一經(jīng)出現(xiàn)便會引起爭議無數(shù),每個人對此都有自己的見解與理由,還有些人主張“理性與感性需要平衡”“既要理性也要感性”,此類觀點看似正確,卻缺乏任何實質性的指導價值。
實際上,很多人都沒注意到問題本身存在的多義性。究竟什么是“設計”?有些人認為是設計決策的過程,而有的人則認為是最終產(chǎn)出的設計作品。大多時候,理性和感性兩種觀點看似針鋒相對,實際上是站在設計的不同層面進行討論。
設計的兩面性:理性決策與感性表達
 
 
 
01|設計決策
從設計決策的角度來看,感性設計指的是設計師在設計過程中主要依靠個人情緒或情感進行創(chuàng)作。許多人誤認為,只要在設計時能與用戶產(chǎn)生共情,理解其情緒波動,并將這些喜怒哀樂、喜好厭惡融入設計作品,就算是感性設計了。然而,共情并不等同于感性。共情是一種能力,理解他人處境與情感,并善于換位思考。而感性則是自己對外界事物產(chǎn)生的直接感受和情緒反應,強調的是個人視角。
在藝術領域,感性占據(jù)主導地位,但設計并非藝術。設計的主要目標是解決問題和滿足特定需求,而藝術更多地關注自我表達和情緒傳遞。設計始終受到客戶需求、商業(yè)目標、市場趨勢和技術可行性等一系列的限制與約束。由于這些條件的存在,直覺與天賦這些感性力量只能得到極其有限的發(fā)揮。這也是設計與藝術的顯著區(qū)別。
設計的兩面性:理性決策與感性表達
 
 
站在感性“對立面”的理性,將設計視為一項工程或科學,力求流程化和系統(tǒng)化,講究方法論,注重各方面的調研,一切動作因問題存在而起,以問題解決而終
。甚至在實際場景中持續(xù)觀察作品表現(xiàn),以期得出可復用的設計模型或定律,為后人更加高效地解決類似問題提供幫助。
所以,從解決問題的本質屬性出發(fā),理性應該才是設計的底色。數(shù)據(jù)驅動、方法論支撐、可用性測試、競品分析、用戶研究等都屬于理性思維的具象化體現(xiàn)。
由于大部分設計師的出身多以藝術打底,所以一旦設計與藝術的界限在心中變得模糊,會習慣性地
將產(chǎn)品看作自己的"作品",而非用戶的"解決方案"
。如此一來,當面對來自各個方向的邊界與不確定性,本能的反應就不是思考了,而是抵觸,尤其是“完美”的方案已在腦中形成,如果突如其來的新要求打亂了這一切,哪怕假以用戶之名也要選擇懟回去,并不斷美化、合理化自己的設計理念。對設計師來說,這是一種自私、不負責任和缺乏職業(yè)素養(yǎng)的表現(xiàn)。
設計的兩面性:理性決策與感性表達
 
 
接下來,想象一下你的手中有一把槍,準備射擊某個目標。你的第一個動作是什么?大概率是瞄準。因為大家都知道,射擊前通過瞄準鏡或者準星,先對目標位置進行瞄準校正,射擊時才能提高命中率,這也正是理性對于設計的重要性所在。
理性在設計中的作用類似于瞄準動作,它幫助我們在設計過程中做出科學的決策,確保設計方案的準確性和可執(zhí)行性。未經(jīng)理性思考的設計,就像是不瞄準就立即開槍,其結果往往難以預測。當然也可能會擊中目標,這基本上取決于兩個因素:
  1.  
    目標遠近:
    近處的目標,即使不瞄準,也很容易擊中;但對于遠處的目標,命中率則必然大幅下降。我們可以把目標遠近理解為設計需求的難易程度,對于簡單需求,不用過多的理性分析,直接設計也能完成任務,但面對復雜的設計項目,如果不進行充分的理性分析上手就畫,大概率就要偏離產(chǎn)品目標了。
  2.  
    個人經(jīng)驗:
    經(jīng)過反復練習,可以練就不瞄準也能遠射的本領,隨著經(jīng)驗積累還能不斷提升距離值;在經(jīng)驗不足的情況下,還不瞄準,就只能選擇一些近距離的射擊目標了。設計也是這樣,對于某類產(chǎn)品的設計經(jīng)驗較多,不用太多理性的分析決策,也能達成設計目標;缺乏經(jīng)驗時,還憑借直覺草率地進行設計,再簡單的項目也可能會搞砸。
設計的兩面性:理性決策與感性表達
 
 
所以,沒有理性支撐而完全依賴直覺經(jīng)驗的設計,一個致命性的問題就是
不穩(wěn)定
!日常工作中,設計師的有效輸出和穩(wěn)定輸出至關重要。
 
02|設計表達
假設經(jīng)過瞄準后的射擊都能順利擊中目標,那么接下來要關注的是什么呢?子彈的沖擊力和殺傷力!這里的子彈就是我們最終輸出的設計作品。在這一環(huán)節(jié),理性設計指的是方案完全圍繞產(chǎn)品功能來呈現(xiàn),追求效率與極簡認知,較少運用裝飾性設計元素,即使使用,也大多兼具輔助內(nèi)容理解的功能性目的。
而感性設計,我并不太愿意使用“感性”這一措辭,正如在上一段中的定義,感性強調的是個人出發(fā)的情緒表達。其實,“情感化設計”才更負荷大家口中常說的“感性設計”所想表達的含義,相比“理性”的設計作品,情感化設計更具有“一擊必殺”的效果。
在滿足基礎功能需求的基礎之上,通過色彩、排版、圖像、動畫等元素給予用戶充分的情感體驗,也可以利用敘事、對話、情景、微交互等策略引發(fā)共鳴。豐富多樣的情感化設計策略,讓用戶與產(chǎn)品之間更容易建立情感連接。
設計的兩面性:理性決策與感性表達
 
 
在設計決策的階段,理性確保了我們更高的命中概率,而情感的注入讓我們的設計表達具有深入人心的穿透力和影響力。典型設計案例如Apple、Tesla等產(chǎn)品設計無一不是理性決策和感性表達的充分結合。因此,回到開篇提出的問題,設計應該是感性的還是理性的?我的回答是:
作為設計師,要
堅持理性的設計決策
,同時
追求感性的設計表達
設計的兩面性:理性決策與感性表達
 
 
 
03|兩者關系
很多人認為,不同的設計領域對理性和感性的要求有所不同,在B端產(chǎn)品中,理性占據(jù)主導地位,而C端產(chǎn)品更強調感性。從設計最終所呈現(xiàn)的效果來看,這種觀點在一定程度上是合理的。B端產(chǎn)品多用于生產(chǎn)場景,追求的是可用性,是克制和效率;C端產(chǎn)品面向普通大眾的各種生活場景,因此關注體驗的愉悅感受。兩者往往在風格調性上差異化很大。
但是,對于設計決策來說,無論C端、B端還是G端,都屬于設計項目,都要進行理性的需求分析和策略制定,即使某些產(chǎn)品類型最終選擇了偏感性的或情感化的表達手法,也是
基于理性決策后的一種選擇
,是實現(xiàn)目標的一種手段。
所以我想說的是,理性和感性兩者既不是對立關系,也不是并列關系,而是先后關系或嵌套關系:
理性是設計的基礎和第一步,感性則是在理性之上的選擇和展開
。
 
最后的話
作為設計師,對于設計中的理性與感性之問,不應停留在非此即彼或既要也要的簡單認知里,任何深入的思考都是有意義的。在這個存在分歧的問題上,希望我的觀點可以為你提供一點點啟發(fā),也希望各位設計師既能夠通過理性的分析制定出有效的設計策略,又能夠通過感性的表達手法創(chuàng)造出動人的設計作品,不斷提升自身的設計價值,與產(chǎn)品實現(xiàn)共贏


作者:設計來電
鏈接:https://www.zcool.com.cn/article/ZMTYyNjY2MA==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。

設計的意義

藍藍設計的小編 設計思維

保羅·蘭德說:“設計是一種行為,是想象力馳騁的過程和產(chǎn)物。”

作為設計師,設計是我們的專業(yè),也是我們用來解決商業(yè)問題的工具。

我們過去也許都曾思考過類似設計的價值、意義或是本質之類的問題。思考這類問題在某種意義上或許都是為了當我們遇到困難、沖突、低谷或是不確定性的時候給自己找一些能夠堅持下去的理由。

設計師在從業(yè)的不同階段,對設計的理解不同。從追求工具技能到表現(xiàn)力、方法論、風格到影響行業(yè)甚至社會審美意識等等。不斷的錘煉之后,對設計意義也會有不同理解。

我們奉為的大師,都擅長用自己的知識架構定義對設計的理解。

保羅·蘭德就是一位我們公認的設計大師、藝術家。他是當今美國乃至世界上最杰出的圖形設計師、思想家及設計教育家之一。他最出名的企業(yè)標志設計,包括IBM,UPS,ABC標志以及為史蒂夫·喬布斯設計NeXT.那段經(jīng)典橋段。

去研究這些前輩們?nèi)绾慰创O計、理解設計以及如何與設計相處一生,是另一種設計哲學的思辨。

保羅·蘭德說:

“設計是一種行為,是想象力馳騁的過程和產(chǎn)物。”

設計表現(xiàn)可能看似是簡單的組裝、排序或是美化的過程,但設計的過程也是賦予信息意義的過程。不斷的簡化、厘清、修飾甚至可能去說服、去取悅過后,設計就是把散文變成詩歌的過程。

設計師是孤獨的,大部分時候他們是一個人在戰(zhàn)斗。

設計是個人行為,即便在設計成熟度較高的國家、企業(yè)或是大型團隊,設計師仍需在一線才能真正掌控在這場戰(zhàn)斗中可能遇到的極其細節(jié)的變化和給人傳達的感受。

設計需要沖突來加深傳達的“戲劇性”。但設計過程也面臨種種沖突。這是設計的商業(yè)價值與藝術價值平衡的過程。正是因為這種關心很難平衡,才會出現(xiàn)雇主與設計師之間的沖突。

企業(yè)的目標是達到商業(yè)、經(jīng)濟、政治甚至社會性目的。對設計師而言,設計是一種創(chuàng)造和實驗行為。通過這種行為來平衡之前的目標。

設計品質最終決定設計師與核心決策者之間的關系。關心越是緊密,設計的產(chǎn)出就越有可能出彩。這其實并不難理解,對設計完成度有高追求的企業(yè),CEO也大多都跟設計團隊或是設計咨詢公司有較為緊密的往來。就比如蘋果的喬布斯與喬納森是我們都公認的CEO與設計師高緊密度關系的典范。

當今社會,市面上依然存在太多糟糕的設計。

一來,核心的決策者對設計專業(yè)的理解度不夠。

二來,很多決策依賴于市場調研,既得利益的權重大于長遠利益。

再就是我們回避不開的話題,設計師在某種意義上話語權不夠。

抉擇者很多時候不了解或是存在對某類元素特定的喜好偏見,他們有評價權,但卻缺乏對設計專業(yè)知識的儲備。所以就會普遍出現(xiàn)外行指導內(nèi)行的情況。過往(現(xiàn)在好一些),他們將設計師看做一套繪圖工具,一個合作供應商而不是一個業(yè)務團隊里重要的組成部門。

體系完整的企業(yè)可能會引入市場調研團隊,調研團隊為營銷提供定位信息,設計師來解讀和演繹那些信息。如果調研團隊能理解設計師的工作過程與其產(chǎn)生共鳴,就有可能促成正確決策甚至產(chǎn)生驚喜的創(chuàng)意作品。

但很多時候,我們聽到了太多這樣的回復:

 

我喜歡它;

我不喜歡它;

它太簡單了;

它太復雜了;

它讓我想起某某...

常常一句“我不喜歡”就可以終結任何設計作品。就像當初一位IBM的主管第一次看到這個條紋logo時嘲弄到說“這東西讓我想起格魯吉亞的鎖鏈囚犯”。

每個人所能感知的信息都不盡相同。

有人既看不到logo的意義,也看不到它的功能。也正因為過于用喜好而不是專業(yè)去評判,才讓糟糕的設計一直留存于我們的世界。而大眾對糟糕的設計要比對好設計更加熟悉,于是大家習慣于選擇不好的設計,因為和他們朝夕相處。

新事物讓人感受到威脅,而舊事物讓人安心。

要判斷一個設計的內(nèi)在價值,決定性因素不是使用期,而是它所設定的“品質預期”。這是設計師的價值,也是設計師該練就的“知覺”。

何為知覺?

我們可以把知覺暫定為“瞬間的洞悉”。設計師在做設計決策的時候大部分都是依賴過往的知識儲備以及慣性技能。不斷的嘗試,都是通過瞬間對各方向的可能性判斷。

本能、預感、沖動、洞悉之后的綜合“洞悉”,這就是知覺。

說到logo,我們常把logo當成品牌價值傳遞的重要符號。

它是一面旗幟、一個簽名、一個路標。大部分時候,雇主期待logo能描述一個行業(yè),但歷史上最成功的logo都沒能做到。蘋果、勞斯萊斯、可口可樂、或是IBM等等...不可否認的是它們都是歷史上最成功的logo,但它們卻無法做到能傳遞它們的行業(yè)屬性。因為logo遠不如它所代表的產(chǎn)品重要,它所代表的比它看起來的樣子更重要。


因為只有l(wèi)ogo與它所屬的公司、產(chǎn)品、服務聯(lián)系起來時,它才具備真正的意義。一流的產(chǎn)品和公司的logo傳遞出一流的形象。反之一個公司如果是二流的,那么它的logo最終也會被歸為二流。

 

 

logo首先要告訴人們“是誰”,而不是“是什么”。這才是它最基礎且最重要的功能。它所扮演的角色就是“指示”。“簡潔”是達成指示的手段。所以設計過程中的特點、好記以及清楚都是需要設計師在打磨細節(jié)前首先要做好的決策。一個復雜、挑剔、模糊的設計潛藏著自我毀滅性的風險。

 

“好的設計帶來好的生意”。但不可否認,即使不好的設計,也可能帶來好的生意(比如下圖)。如果這樣,還需要好的設計么?

好的設計可以增添額外的附加價值,很多時候,也許光看著它就能給人們帶來快樂。它們更尊重感官,并通過這種友好的感官體驗,給企業(yè)帶來回報。人們更容易記得精美而不是一團糟的形象。它折射出一個考慮周全,目標明確的企業(yè),反映了它的產(chǎn)品或者服務的品質。所以,這個世界需要好的設計,設計師要做的就是用設計向世界傳遞一些更有價值的觀點。這是設計師的工作,也是設計該有的意義。

「大寶推薦閱讀書單之《設計的意義》」



作者:大寶頻道
鏈接:https://www.zcool.com.cn/article/ZMTQ3ODQzMg==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。

 

優(yōu)秀的設計就是帶給用戶驚喜!

藍藍設計的小編 設計思維

優(yōu)秀的產(chǎn)品設計是能帶給用戶驚喜的,在不經(jīng)意間讓用戶感受到溫度,也是提升用戶體驗的關鍵。
 
隨著行業(yè)的進步,產(chǎn)品設計師也在不斷優(yōu)化體驗,輸出一個一個優(yōu)秀的解決方案。近期黑馬哥也發(fā)現(xiàn)了一些比較驚喜的設計,來和大家一起欣賞一下吧!
優(yōu)秀的設計就是帶給用戶驚喜!
 
 
 
 
體驗目錄
一、降落傘帶來的營銷廣告
二、動效反饋商家備餐過程
三、這個廣告驚不驚喜意不意外
四、Banner 廣告的視覺沉浸感
五、待機狀態(tài)下的實時動態(tài)
六、小圖標里的細節(jié)反思
七、輪播式的懸浮設計
八、氛圍熱烈的底部標簽欄
九、收縮式交互設計
十、形象化的進度設計
 
 
一、降落傘帶來的營銷廣告
在這個廣告滿天飛的年代,用戶已經(jīng)逐步開啟廣告免疫模式,如何提高用戶對廣告的關注度至關重要。
 
近期在體驗餓了么時,等待送餐界面中空降一個降落傘,從左上角飄到右側懸浮,彈出紅包懸浮廣告。降落傘飄浮的動態(tài)過程吸引了用戶的關注度,進而提高了營銷廣告的點擊率,雖然廣告大家都比較反感,但是一個伴隨著驚喜的廣告也會讓你放下戒備心理。
優(yōu)秀的設計就是帶給用戶驚喜!
 
 
 
 
二、動效反饋商家備餐過程
提升等待過程對于用戶體驗來說尤為重要,降低用戶等待過程中的焦慮感,才能讓用戶愿意為此停留。
 
通過餓了么點餐之后,商家需要一定的時間完成餐飲的制作,必然需要用戶等待一些時間。在這個備餐過程中,當前界面以一個翻炒動效表達,情感化的動效不僅提示用戶當前狀態(tài),也提升了設計表達的感官體驗。
優(yōu)秀的設計就是帶給用戶驚喜!
 
 
 
 
三、這個廣告驚不驚喜意不意外
意料之外的廣告是帶給你驚喜還是反感呢?平臺為了提高變現(xiàn)能力,各種層出不窮的廣告玩法也讓你猝不及防。
 
之前在體驗騰訊視頻 App 時,從閃屏廣告過度到 Banner 圖的過程中,經(jīng)歷了多個廣告新花樣。首先從閃屏切換到自動輪播的彈窗模式,再演變到放大版的多個廣告切片(占 Banner 位呈現(xiàn)),最后再恢復到 Banner 的正常布局中。這個過程無疑是把廣告的存在感拉滿了,讓你對廣告的記憶形成硬性要求。
 
無論這個廣告設計方案是否讓用戶反感,但是這個呈現(xiàn)的互動方式還是比較新穎的,相信廣告的點擊率必然有所提升。
優(yōu)秀的設計就是帶給用戶驚喜!
 
 
 
 
四、Banner 廣告的視覺沉浸感
Banner 圖在產(chǎn)品中是非常普及的,各類形式的演變也層出不窮,產(chǎn)品設計師都在探索更多可能性。
 
在騰訊視頻 App 動漫欄目中,發(fā)現(xiàn)一例很有想法的 Banner 表現(xiàn)。Banner 上面新增了一個懸浮的火焰燃燒的動效,提升了整體的氛圍感,動效與 Banner 畫面完美貼合,視覺沉浸感十足。
優(yōu)秀的設計就是帶給用戶驚喜!
 
 
 
 
五、待機狀態(tài)下的實時動態(tài)
隨時讓用戶感受到你的存在,才能讓人感到安心,服務過程中狀態(tài)實時可見至關重要。
 
通過餓了么點餐之后,就算處于待機狀態(tài)時,只要點亮屏幕即可看到當前出餐狀態(tài)??梢暬膱D形結合時間提醒,讓狀態(tài)一目了然,使得點餐到用餐之間的過程更有用戶可控性。
優(yōu)秀的設計就是帶給用戶驚喜!
 
 
 
 
六、小圖標里的細節(jié)反思
產(chǎn)品中有很多輔助功能/信息等表達的圖標,既要能準確表達主題,也要讓用戶易于理解。
 
在汽車之家 App 發(fā)現(xiàn)了一個值得反思的圖標案例,在掃一掃的圖標中結合了汽車外形輪廓,不僅不會影響掃描的功能表達,也進一步表達了該功能的差異。和別的產(chǎn)品掃描功能不同,這個是對準汽車進行掃描,體現(xiàn)出了業(yè)務的差異化。一枚小小的圖標體現(xiàn)出了設計師的能力,用最簡單的方式表現(xiàn)自身產(chǎn)品的差異,以此提升用戶的操作體驗。
優(yōu)秀的設計就是帶給用戶驚喜!
 
 
 
 
七、輪播式的懸浮設計
懸浮設計非常普及,因為占比小和滑動頁面會隱藏,對用戶的干擾比較小。
 
最近在芒果 TV 首頁發(fā)現(xiàn)了懸浮窗口的輪播式表達,芒果卡和活動中心會自動輪播顯示(也能手動切換)。讓我們對懸浮窗口的設計又多了一種設計理解,可以呈現(xiàn)更多不同內(nèi)容的表達,提升了窗口的利用率。
優(yōu)秀的設計就是帶給用戶驚喜!
 
 
 
 
八、氛圍熱烈的底部標簽欄
底部標簽欄的設計在圖標創(chuàng)意層面發(fā)揮較多,各類風格的圖標讓該欄目更加豐富多彩,除此之外也有在背景層渲染氛圍的案例。
 
近期恰逢芒果 TV 十周年之際,在底部標簽欄背景層也加強了氛圍感。豐富多彩的元素和配色,結合主題化的圖標設計,使得整體氛圍感拉滿。
優(yōu)秀的設計就是帶給用戶驚喜!
 
 
 
 
九、收縮式交互設計
通過交互方式應對用戶操作過程,特別是在滑動界面時,交互方式的優(yōu)化可以降低干擾,提高當前界面的利用率。
 
在 Blurrr App 創(chuàng)作界面,默認以 3D 動態(tài)圖標展示“開始創(chuàng)作”按鈕,當滑動界面時按鈕會收縮展示。通過收縮式的交互設計,讓界面可以展示更多內(nèi)容,也不會影響用戶點擊按鈕進行創(chuàng)作。即通過 3D 動效加強了功能的曝光度,又通過收縮式交互提高了內(nèi)容的展示空間,可謂是一舉多得的設計解決方案。
優(yōu)秀的設計就是帶給用戶驚喜!
 
 
 
 
十、形象化的進度設計
進度設計是反饋狀態(tài)變化的關鍵,通過可視化的表達讓用戶一目了然,提高用戶對服務過程的把控。
 
當用戶通過攜程旅行 App 訂票后,在行程訂單界面可以看到列車行駛狀態(tài)的進度提示。通過可視化的列車形象的表達了行駛狀態(tài),讓用戶清晰的看到行駛方向和抵達站點示意。不僅信息傳遞高效,形象的表達也使得感官體驗更佳。
優(yōu)秀的設計就是帶給用戶驚喜!
 
 
 
 
小結
優(yōu)秀的產(chǎn)品總能在細微之處帶給你驚喜,讓你感受到產(chǎn)品服務的情感化和溫度。本文觀點僅代表個人體會,希望可以和大家一起共勉。
 
作者:黑馬青年
本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可,禁止轉載。


作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTYxODE4MA==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。

每個設計都讓你感受到個性化

藍藍設計的小編 設計思維

隨著同類型產(chǎn)品越來越多,更有體驗感和個性化的設計才能打動用戶,成為被選擇的對象。作為產(chǎn)品設計師我們在不斷探索和創(chuàng)新,希望以更好的設計表達來解決業(yè)務場景,為提升用戶體驗而助力。
 
本期以個性化設計為出發(fā)點,給大家?guī)硎畟€不錯的設計方案,希望可以帶給大家更多設計靈感。
每個設計都讓你感受到個性化
 
 
 
 
體驗目錄
一、讓你感受溫暖的年度報告
二、趣味性的圖標設計
三、通過 AI 重新定義搜索體驗
四、動態(tài)化功能引導產(chǎn)品升級
五、動態(tài)優(yōu)惠券更有吸引力
六、人性化的溫馨提示設計
七、自定義形象的年度報告
八、個性化的主界面設置
九、情感化的表情設置
十、空間感的 Banner 輪播體驗
 
 
 
一、讓你感受溫暖的年度報告
這段時間相信大家經(jīng)常使用的產(chǎn)品都曬出了年度報告,設計風格與互動形式也層出不窮,哪一個產(chǎn)品的設計風格最打動你呢?
 
在我刷到的年度報告中,攜程旅行的年度旅行報告印象最深刻。毛茸茸的設計風格在寒冷的冬季顯得格外溫暖,圖標、字體、背景、按鈕等都以此風格進行設計,整體效果非常細膩柔軟,你也去體驗感受一下吧!
每個設計都讓你感受到個性化
 
 
 
 
二、趣味性的圖標設計
圖標在產(chǎn)品中主要以各種設計風格形成差異,打造出匹配品牌風格的個性設計,除此以外,我們也要多在圖形創(chuàng)意表達層面進行探索。
 
最近在使用極兔速遞小程序時,除了圖標設計的風格獨特以外,多個場景的圖形創(chuàng)意也很有意思。比如下單寄件、掃碼寄件和個人中心的圖標等,趣味性的設計表達讓人印象深刻,以個性化的圖形創(chuàng)意吸引用戶的注意力。
每個設計都讓你感受到個性化
 
 
 
 
三、通過 AI 重新定義搜索體驗
AI 化已經(jīng)成為眾多行業(yè)未來需要對接的方向,任何行業(yè)都可以通過 AI 進行重新定義,帶給用戶 AI 化的體驗。
 
以前在騰訊視頻 App 搜索時都是以關鍵詞為主,現(xiàn)在可以通過 AI 搜與騰訊元寶 AI 助手交流,以對話式的方式找到感興趣的影片。通過 AI 重新定義了搜索方式,讓用戶感受到屬于 AI 化的體驗感。
每個設計都讓你感受到個性化
 
 
 
 
四、動態(tài)化功能引導產(chǎn)品升級
引導用戶升級產(chǎn)品才能帶來新的功能和服務升級,如何吸引用戶進行升級變得至關重要。
 
高德地圖為了引導用戶點擊升級,以升級后帶來的更優(yōu)功能和服務為吸引點,通過動態(tài)輪播的形式表現(xiàn)升級彈窗。動態(tài)化的功能引導可以讓用戶提前了解新版本的信息,提高用戶升級的選擇性。
每個設計都讓你感受到個性化
 
 
 
 
五、動態(tài)優(yōu)惠券更有吸引力
各種優(yōu)惠券、打折券、新人紅包等讓用戶開始有點麻木,也不一定會領取和使用,如何增加其吸引力就變得越來越重要了。
 
近期高德地圖打車欄目的營銷活動中,為了展示更多類型的打車券、打車金等,通過動態(tài)輪播的方式進行設計表達。相較于靜態(tài)展示而言,不僅解決了內(nèi)容展示的數(shù)量問題,動態(tài)的方式也更有吸引力,增加用戶的參與概率。
每個設計都讓你感受到個性化
 
 
 
 
六、人性化的溫馨提示設計
溫馨提示雖然不一定管用,但是依然可以讓用戶感受到人性化的服務,增加用戶對產(chǎn)品的好感度。
 
在比較晚的時間段使用洪恩識字 App 時,會出現(xiàn)溫馨提示的彈窗,勸導用戶注意休息時間。人性化的設計可以輔助家長管理孩子的使用習慣,提醒注意時間管理和作息規(guī)律。
每個設計都讓你感受到個性化
 
 
 
 
七、自定義形象的年度報告
年度報告的形式豐富多樣,都是以用戶個人數(shù)據(jù)生成,如何才能更加個性化,成為了設計表達的重點。
 
網(wǎng)易云音樂的年度聽歌報告可以自定義形象,可以針對身體的上中下三個部分進行定制,以個性化的形象開啟專屬的聽歌報告。整體表達很有設計感,圖形、排版與配色都很不錯,快去生成屬于你的聽歌報告吧!
每個設計都讓你感受到個性化
 
 
 
 
八、個性化的主界面設置
對于感官體驗每個人的喜好各不相同,為了滿足各自的選擇需求,個性化的設置變得尤為重要。
 
體重小本 App 的主界面,可以通過主題皮膚設置背景、配色等,提供了煥彩粉和清爽藍的多款選擇,用戶也可以自定義圖片進行設置。通過個性化的設置帶給用戶更多選擇性,滿足不同的感官體驗需求。
每個設計都讓你感受到個性化
 
 
 
 
九、情感化的表情設置
通過表情設計輔助可視化表達,其中表情符號的運用較為常見,豐富多樣的表情選擇更能滿足用戶需求。
 
體重小本 App 體重數(shù)據(jù)展示中,以不同表情來體現(xiàn)體重數(shù)據(jù)的變化,情感化的表達讓變化的呈現(xiàn)更加貼切。產(chǎn)品提供了多款表情供用戶選擇,用戶也可以設置自定義表情,情感化的設置讓體驗感變得更加豐富。
每個設計都讓你感受到個性化
 
 
 
 
十、空間感的 Banner 輪播體驗
輪播 Banner 圖在設計表達、布局結構、輪播形式等層面都可以進行創(chuàng)意發(fā)揮,有特點的形式更能吸引注意力,以此提高 Banner 的點擊率。
 
最近在體驗芒果 TV 時,發(fā)現(xiàn)首頁 Banner 的表現(xiàn)形式以分層式表達,輪播過程中更有空間感。將人物與背景進行分層設計,輪播時分前后入場,伴隨著縮放等動效表達,營造出更強的空間感。
每個設計都讓你感受到個性化
 
 
 
 
小結
設計思維的轉變離不開大量優(yōu)秀案例的輔助,對于產(chǎn)品設計師來說,體驗和總結的訓練至關重要。希望本期的分享可以帶給大家一些啟發(fā),觀點屬于個人見解,不足之處歡迎大家留言補充。
 
本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可,禁止轉載。
 


作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTY1MDA0OA==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。

設計方法論 I 超全面的頁面分割設計指南

天宇 設計思維

 
設計方法論 I 超全面的頁面分割設計指南
 
當你打開一個頁面,首先映入眼簾的是豐富多樣的內(nèi)容和信息。如何在有限的空間內(nèi),既保證內(nèi)容的完整性,又讓用戶能夠輕松理解和瀏覽,這背后的奧秘就在于頁面分割。今天,我們就來一起
探討頁面分割的藝術與技巧,看看它是如何為你的設計增添魅力,提升用戶體驗的。
 
在設計中,頁面分割不僅僅是一種技術手段,更是一種藝術表現(xiàn)。它如同一位細心的畫師,巧妙地運用線條、色彩、空白等元素,將頁面內(nèi)容劃分為一個個清晰、有序的區(qū)域。
通過這些分割,用戶能夠更快速地找到所需信息,更輕松地理解頁面內(nèi)容,從而享受到更加愉悅的閱讀體驗。
頁面分割的魅力在于其多樣性和靈活性。不同的頁面可以采用不同的分割方式,如線條分割、卡片分割、留白分割等,以滿足不同的設計需求和用戶習慣。同時,頁面分割也需要根據(jù)內(nèi)容的實際情況進行合理調整,既要保證信息的完整性,又要避免過度分割帶來的混亂感。
 
在本文中,我們將一起探討頁面分割的原則、技巧和應用實例。我們將學習如何運用不同的分割方式來優(yōu)化頁面布局,提升用戶體驗。同時,我們還將分享一些成功的頁面分割案例,以激發(fā)你的設計靈感,為你的界面設計注入新的活力。
 
分享目錄:
一、分割的常見樣式
二、線性分割
三、卡片分割
四、留白分割
五、總結
設計方法論 I 超全面的頁面分割設計指南
 
 
線性分割:通過使用線條來劃分頁面的不同區(qū)域,以達到組織內(nèi)容、引導用戶視線和提升整體美觀度的目的。這種分割方式簡單明了,能夠清晰地展現(xiàn)出頁面內(nèi)容的層次和結構。
 
卡片分割:卡片式設計是一種流行的界面分割方法,通過將內(nèi)容劃分為獨立的卡片或區(qū)塊,使用戶能夠更清晰地理解信息。每個卡片通常包含相關的內(nèi)容,如文本、圖片或按鈕,以便用戶快速瀏覽和交互。
 
留白分割:主要通過增加間距的方式,利用人的視知覺原理(接近法則:人的大腦會傾向于把彼此靠近的元素視為一組),自然地將信息進行分組。這種留白的方式能夠為頁面增加呼吸感,降低視覺噪音,使設計看起來更簡潔。
設計方法論 I 超全面的頁面分割設計指南
 
 
近年來,設計趨勢從“卡片式設計”轉向了“去線化設計”,即傾向于使用留白分割而非過多的線條分割,以實現(xiàn)更為簡潔清晰的界面效果。設計師在選擇分割方式時,應優(yōu)先考慮留白分割,其次是線性分割,最后是卡片分割。這個選擇順序反映了設計界的一般原則,即在不影響信息傳達的前提下,盡可能保持設計的簡潔性。
設計方法論 I 超全面的頁面分割設計指南
 
 
線性分割的定義:
線性分割設計是一種在視覺設計中使用的技巧,它使用線條、邊框或細線等元素來劃分、區(qū)分或連接頁面上的不同內(nèi)容區(qū)域。這種設計手法主要用于提高頁面內(nèi)容的可讀性和組織性,幫助用戶更好地理解和瀏覽頁面信息。
 
線性分割設計具有以下優(yōu)勢:
 
1.劃分區(qū)域:線性分割可以將頁面劃分為不同的區(qū)域或模塊,使得每個區(qū)域的內(nèi)容更加清晰、有序。這有助于用戶快速定位和瀏覽所需的信息,提高閱讀效率。
 
2.區(qū)分內(nèi)容:線性分割可以用來區(qū)分不同類型的內(nèi)容,如文本、圖片、圖表等。通過線性分割,可以將這些內(nèi)容進行分組或歸類,使得頁面更加整潔、有序。
 
3.引導視線:線性分割可以引導用戶的視線,幫助他們更好地理解頁面內(nèi)容。通過合理的線性分割設計,可以突出顯示重要的信息或元素,引導用戶關注到關鍵內(nèi)容。
 
4.增強層次感:線性分割可以增強頁面的層次感,使得頁面內(nèi)容更加豐富、有深度。通過不同樣式的線性分割,可以區(qū)分不同的信息層級,幫助用戶更好地理解頁面結構和內(nèi)容關系。
 
使用原則:在使用分割線時,我們應遵循一些原則,以確保其有效地幫助用戶理解頁面的組成,同時避免過度使用帶來的視覺干擾。
 
1.分割線應當微妙而不過于顯眼。
它們在布局中應該容易被用戶注意到,但又不應成為焦點,以免分散用戶的注意力。
 
2.分割線應被視為次要的元素。
只有在留白等其他設計手法無法有效起到分割作用時,才考慮使用分割線。它們應當是布局中的輔助工具,而不是主導元素。
 
3.謹慎使用分割線。
過度使用分割線可能會導致頁面顯得混亂和復雜。相反,我們應該用分割線來創(chuàng)建信息分組,而不是簡單地分割每一個條目。通過審慎而恰當?shù)厥褂梅指罹€,我們可以有效地提升頁面的可讀性和用戶體驗。
圖片來源于參考文章
圖片來源于參考文章
 
線性分割三種類型:
通欄分割線、內(nèi)嵌分割線和中間分割線。
 
1.通欄分割線(Full-bleed Dividers):通欄分割線通常橫跨整個頁面寬度,用于分隔彼此完全獨立的內(nèi)容區(qū)域。這種分割線在視覺上非常顯著,能夠清晰地劃分出不同的內(nèi)容區(qū)塊,使用戶能夠迅速區(qū)分不同部分的信息。通欄分割線通常用于區(qū)分文章、產(chǎn)品列表、服務介紹等獨立的內(nèi)容區(qū)域。
 
2.內(nèi)嵌分割線(Inset Dividers):內(nèi)嵌分割線通常位于內(nèi)容區(qū)域內(nèi)部,用于分隔有錨點(如頭像、圖標等)的相關內(nèi)容。這些錨點可以是圖片、符號或小的圖形元素,它們與分割線一起,幫助用戶更好地理解和區(qū)分內(nèi)容。內(nèi)嵌分割線常用于列表、卡片式布局、時間線等場景中,用于展示有關聯(lián)但不同類別的信息。
 
3.中間分割線(Middle Dividers):中間分割線位于兩個內(nèi)容區(qū)域之間,用于分隔無錨點的相關內(nèi)容。這種分割線通常比通欄分割線更細,更注重于在視覺上劃分空間,而不是強調內(nèi)容的獨立性。中間分割線常用于文本段落之間、列表項之間或不同功能區(qū)域之間,以提供清晰的結構和層次。
設計方法論 I 超全面的頁面分割設計指南
 
 
在大多數(shù)情況下,當信息層級較為簡單(即信息層級≤2)時,使用分割線進行信息分割是一種有效的方法。然而,實際上,如果留白間距足夠大,我們也可以使用留白來達到類似的效果。通過增大留白間距,我們可以創(chuàng)造出清晰的視覺區(qū)域劃分,使得信息之間的界限更加明確。
 
與分割線相比,足夠大的留白間距可以避免多余的線性元素干擾,讓整體視覺效果更加清爽。這樣的設計選擇有助于提升用戶的閱讀體驗,使用戶更加輕松地理解和消化信息。
 
因此,在信息層級較簡單的情況下,我們可以靈活地選擇使用分割線或留白來進行信息分割。通過調整留白間距,我們可以達到與分割線相似的效果,同時保持整體設計的簡潔和清晰。
設計方法論 I 超全面的頁面分割設計指南
 
 
為了提升屏效,我們希望在一屏內(nèi)展示盡可能多的信息。在這種情況下,分割線的設計顯得尤為重要,因為它們能夠有效地劃分信息區(qū)域,使內(nèi)容更加清晰、易于理解。
 
通過使用分割線,我們可以將較多的信息條理化,使得用戶能夠更快速地找到所需的內(nèi)容。與沒有分割線的布局相比,使用分割線能夠顯著提高信息的可讀性和可理解性。
 
在相同的信息布局下,分割線能夠將信息區(qū)域明確地劃分開來,防止信息之間產(chǎn)生混淆或交叉。這種劃分不僅使得每個信息塊更加獨立,而且提高了信息之間的對比度,使用戶能夠更輕松地識別和區(qū)分不同的信息。
 
因此,當我們的目標是提高屏效并展示大量信息時,分割線的設計是一個關鍵要素。通過合理地使用分割線,我們可以確保信息布局更加清晰、有序,從而提高用戶的閱讀效率和滿意度。(如下圖)
設計方法論 I 超全面的頁面分割設計指南
 
 
線性分割在移動端頁面設計中的應用場景廣泛,尤其是在需要清晰劃分信息模塊時。如微信的聊天列表中,線性分割被用來區(qū)分不同的消息條目。每條消息之間通過一條細線進行分隔,使得每條消息清晰可辨,方便用戶快速瀏覽和定位到特定的消息。
 
線性分割還常用在各類App的信息提示中,如果有多條消息需要展示,線性分割可以用來
區(qū)分不同的消息組。例如招商銀行APP中,當用戶收到多條未讀消息時,每條消息之間可以通過線性分割進行區(qū)分,使得每條消息清晰可辨,方便用戶逐一查看和處理。
 
在APP需要用戶填寫信息和設置的表單頁面中,線性分割可以用來區(qū)分不同的輸入字段或信息區(qū)域。這有助于用戶更清晰地了解需要填寫的信息,提高表單的填寫效率和準確性,比如站酷的設置頁面(如下圖)
設計方法論 I 超全面的頁面分割設計指南
 
 
設計方法論 I 超全面的頁面分割設計指南
 
 
設計方法論 I 超全面的頁面分割設計指南
 
 
卡片分割的定義:卡片分割設計主要通過將內(nèi)容或功能區(qū)域劃分成獨立的“卡片”來進行信息展示和組織。每個卡片通常包含相關的內(nèi)容或功能,并且與其他卡片通過一定的間距或線性分隔進行區(qū)分。
 
卡片分割設計具有以下優(yōu)勢:
 
1.內(nèi)容封裝:卡片分割設計將相關內(nèi)容或功能封裝在一個獨立的卡片內(nèi),使得每個卡片成為一個獨立的信息單元。這有助于保持頁面內(nèi)容的清晰和整潔,方便用戶瀏覽和理解。
 
2.明確邊界:每個卡片通常具有明確的邊界,通過邊框、陰影或間距等元素來區(qū)分不同的卡片。這種邊界的存在使得每個卡片在視覺上相對獨立,方便用戶進行區(qū)分和識別。
 
3.靈活布局:卡片分割設計具有很高的靈活性,可以根據(jù)需要自由調整卡片的大小、位置和排列方式。這使得設計師可以根據(jù)不同的設計需求和用戶習慣來靈活調整卡片的布局,以達到最佳的視覺效果。
 
4.強調重點:通過不同的視覺處理手法,如改變卡片的顏色、大小或樣式等,可以突出顯示重要的卡片或內(nèi)容。這有助于吸引用戶的注意力,引導他們關注到關鍵信息。
 
卡片的基本構成:卡片是一個獨立的主題性容器,旨在將內(nèi)容和操作組合在一起。它可以包含多種元素,如容器、縮略圖、標題、副標題、富媒體、輔助文字、按鈕和圖標按鈕等。這些元素并非必須全部存在,而是根據(jù)具體需求進行選擇和配置。無論選擇哪些元素,它們都會以易于掃描和操作的形式整齊地放置在卡片上。這種設計使得卡片成為一個靈活且高效的信息展示工具,適用于各種場景和應用。
設計方法論 I 超全面的頁面分割設計指南
 
 
卡片分割常見的類型:卡片分割可分為、通欄卡片和非通欄卡片
 
1、通欄卡片:其特點是卡片占據(jù)整個頁面寬度,沒有左右邊距。通欄卡片的設計可以提高布局的靈活性,使得頁面內(nèi)容更加寬敞和大氣。同時,通欄卡片也可以更好地突出展示單條內(nèi)容,引導用戶的視線,提高閱讀效率。
 
2.非通欄卡片:與通欄卡片相比,它會在卡片的左右兩側留有邊距,不完全占據(jù)整個頁面寬度。這種設計方式可以使得頁面內(nèi)容更加有層次感和組織性,同時也有利于突出顯示某些關鍵信息。
設計方法論 I 超全面的頁面分割設計指南
 
 
通欄卡片
通欄卡片相較于非通欄卡片,其設計特點在于去除了左右兩端的留白,僅保留上下邊距,從而提供了更大的展示空間。這種設計使得卡片內(nèi)的內(nèi)容能夠占據(jù)整個頁面寬度,進一步增強了內(nèi)容的視覺沖擊力。在通欄卡片中,卡片與背景的關系通常通過一條背景色塊來抽象表現(xiàn),這種簡潔的處理方式避免了過多的視覺元素干擾,使得頁面整體看起來更加整潔和統(tǒng)一。
 
通欄卡片可以被視為在極簡列表式和傳統(tǒng)卡片式設計之間的一種折中選擇。它繼承了卡片式的分層方式和強交互性,使得用戶能夠輕松地瀏覽和交互頁面內(nèi)容。如下圖微博“關注”、微信“發(fā)現(xiàn)”頁面。
設計方法論 I 超全面的頁面分割設計指南
 
 
非通欄卡片
非通欄卡片通常采用帶圓角的設計形式,這種設計不僅賦予卡片一種柔和、圓潤的視覺效果,還增強了用戶的視覺舒適度。結合陰影效果以及四周的邊距,非通欄卡片巧妙地形成頁面留白,使得整體設計層次感更加豐富。
 
通過巧妙的投影設計以及前后顏色的精準設定,非通欄卡片成功地讓內(nèi)容與背景之間產(chǎn)生視覺空間感,進一步強化了內(nèi)容的立體感和層次感。這種設計技巧不僅提升了卡片的視覺吸引力,還使得用戶在瀏覽頁面時能夠更加輕松地區(qū)分和聚焦關鍵信息。
 
在頁面設計中,非通欄卡片的應用范圍十分廣泛。無論是用于展示文章、產(chǎn)品、圖片還是其他類型的內(nèi)容,非通欄卡片都能夠通過其獨特的視覺效果和設計元素,為用戶帶來更加舒適、美觀的視覺體驗。同時,非通欄卡片還具有良好的適應性和靈活性,可以根據(jù)不同的設計需求和用戶習慣進行定制和調整,滿足不同場景下的應用需求。如下圖夸克“夸克日報”、APP Store“首頁”
設計方法論 I 超全面的頁面分割設計指南
 
 
選擇使用通欄分割線還是卡片分割,主要取決于你的設計目標和內(nèi)容需求。以下是三個參考建議,幫助你做出更好的選擇:
 
1.當內(nèi)容已有自然分割線時:如果你的主題內(nèi)容本身就已經(jīng)有明確的分割線,比如列表項、段落分隔等,那么采用非通欄分割會是一個好選擇??ㄆ梢郧逦亟缍總€內(nèi)容塊,使主題信息層次更加分明,提高用戶的閱讀效率。
 
2.當內(nèi)容類型多樣且占據(jù)較大空間時:如果單個主題內(nèi)部包含了多種類型的內(nèi)容,如文字、圖片、視頻等,且這些內(nèi)容在垂直方向上占據(jù)了較大的空間(例如,內(nèi)容長度超過屏幕高度的一半),使用非通欄分割會更加合適。卡片能夠有效地圈定內(nèi)容范圍,為用戶提供一個明確的視覺邊界,幫助他們更好地理解和消化信息。
 
3.當需要增強橫向空間感時:如果你希望擴展頁面的橫向空間,或者暗示用戶可以橫向滑動頁面查看更多內(nèi)容,那么非通欄卡片會是更好的選擇。非通欄卡片的設計能夠利用橫向內(nèi)容連續(xù)性原則,幫助用戶建立頁面可以橫向滑動的意識,從而提升頁面的互動性和用戶體驗。如下圖知乎“發(fā)現(xiàn)”、站酷“推薦”。
設計方法論 I 超全面的頁面分割設計指南
 
 
卡片分割更適合圖文混排
卡片分割設計以其獨特的布局方式,成為圖文混排中的理想選擇。它能夠巧妙地將不同大小、媒介的內(nèi)容統(tǒng)一呈現(xiàn)在一個界面中,實現(xiàn)了內(nèi)容的多樣性與統(tǒng)一性的結合。這種設計不僅讓單屏區(qū)域能夠顯示更多內(nèi)容,還通過合理的空間劃分,確保了文字和圖片之間的和諧共存,既維持了視覺的一致性,又巧妙地平衡了文字和圖片的視覺強度。因此,在需要同時呈現(xiàn)多種內(nèi)容和媒介的場景中,卡片分割無疑是一種高效且美觀的解決方案。如下圖知乎“想法”、站酷“首頁”
設計方法論 I 超全面的頁面分割設計指南
 
 
設計方法論 I 超全面的頁面分割設計指南
 
 
設計方法論 I 超全面的頁面分割設計指南
 
 
留白分割的定義:留白分割是目前設計的主流趨勢,越來越多的產(chǎn)品在使用留白分割設計。留白分割主要通過增加間距的方式,利用人的視知覺原理(接近法則:人的大腦會傾向于把彼此靠近的元素視為一組),將信息進行自然的視覺分組。
 
留白分割具有以下優(yōu)勢:
 
1.突出重點信息:通過增加間距,可以將關鍵信息與其他內(nèi)容區(qū)分開來,使用戶更容易注意到。
 
2.提高可讀性:適當?shù)牧舭卓梢允刮淖只驁D形元素之間的界限更清晰,減少視覺干擾,從而提高用戶的閱讀效率。
 
3.增強設計感:留白可以為設計增加呼吸感,避免元素過于擁擠,使整體布局更加和諧、美觀。
 
當元素之間的間距保持均勻時,整個視覺呈現(xiàn)會顯得平衡且協(xié)調,大腦默認為一個整體。然而,一旦元素的橫向和縱向間距發(fā)生變化,我們的大腦會基于接近性法則,本能地將距離較近的元素視為一個整體或群組,這就是留白分割。(如下圖)
設計方法論 I 超全面的頁面分割設計指南
 
 
留白分割在
有規(guī)律且卡片樣式較多的頁面中表現(xiàn)尤為突出,在有大量卡片樣式的頁面中,每個卡片通常都包含一定的信息。通過留白分割,可以清晰地劃分每個卡片的信息區(qū)域,使用戶更容易區(qū)分和閱讀每個卡片的內(nèi)容,增加呼吸感,避免元素過于擁擠,從而提高整體的可讀性。例如下圖中主流的音樂類App
設計方法論 I 超全面的頁面分割設計指南
 
 
相反,如果在沒有規(guī)律且頁面內(nèi)容較多的情況使用留白分割,則會使頁面雜亂無章。比如下圖咸魚的“廣場”界面feed流中,圖片從1~9張都有的情況下,使用留白分割,頁面就會變得雜亂,影響視覺效果。而脈脈則采用了卡片式分割樣式,頁面模塊則相對清晰很多。
設計方法論 I 超全面的頁面分割設計指南
 
 
設計方法論 I 超全面的頁面分割設計指南
 
 
在我們界面設計中,我們應充分考慮信息條目的復雜度。當信息較為簡單時,利用留白分割,能夠創(chuàng)造出清爽且不受干擾的視覺體驗。但隨著信息復雜度的增加,留白分割可能不足以清晰地展現(xiàn)信息層次,此時,引入線性分割是一個有效策略,它能提升屏幕的利用效率,使信息條理更加清晰。
 
當信息復雜度進一步升級,例如已經(jīng)運用了線性分割或涉及更多操作時,我們需要進一步強化信息條目之間的邊界感。這時,卡片分割是一個理想的選擇,它不僅能增強信息的視覺層次,還能提升條目的可操作性。
 
重要的是,選擇信息分割方式時,我們要明確:分割本身不是目的,而是為了構建清晰的版面邏輯
,通過悅目的信息秩序來更好地突出內(nèi)容,實現(xiàn)最佳的信息傳達效果。因此,在決策時,除了考慮上述細節(jié)因素,還需全面評估整體版面效果和信息傳達效率。感謝閱讀,希望對您有用。
設計方法論 I 超全面的頁面分割設計指南

作者:工頭新一
鏈接:https://www.zcool.com.cn/article/ZMTYxMDk2NA==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

日歷

鏈接

個人資料

藍藍設計的小編 http://www.yvirxh.cn

存檔