Hi,我是彩云。設(shè)計(jì)趨勢(shì)年年在變,設(shè)計(jì)技能也在不斷更新,但回到本源,底層的理論知識(shí)是不會(huì)變的。我自己幾乎每年還會(huì)翻看一些講設(shè)計(jì)基礎(chǔ)的書,比如《寫給大家看的設(shè)計(jì)書》之類的,會(huì)發(fā)現(xiàn)這些原理每次看都會(huì)有新的收獲。隨著工作年數(shù)增加,對(duì)底層知識(shí)的價(jià)值認(rèn)識(shí)也越來(lái)越深刻,不知道你會(huì)不會(huì)有這種感覺(jué)?
在Medium上看到一位工作超過(guò)17年的國(guó)外設(shè)計(jì)leader寫的一篇關(guān)于設(shè)計(jì)原理的文章,講設(shè)計(jì)如何變得有效?總結(jié)得很好。
當(dāng)沒(méi)有認(rèn)知緊張時(shí),用戶心流才會(huì)發(fā)生。當(dāng)一個(gè)設(shè)計(jì)有效時(shí),你才能體驗(yàn)到認(rèn)知上的輕松。如果沒(méi)有,你的“心流狀態(tài)”就會(huì)中斷(稍后會(huì)詳細(xì)討論),讓我們陷入認(rèn)知緊張,于是“設(shè)計(jì)失敗了”。
當(dāng)基本設(shè)計(jì)原則被忽略時(shí),這種情況很容易發(fā)生,導(dǎo)致設(shè)計(jì)無(wú)法“整合”。這些基本原則包括:平衡性、一致性和視覺(jué)層次、負(fù)空間、接近性、對(duì)比、統(tǒng)一、一致性、配色方案和排版層次等方面。(彩云注:很多人看到這些以為自己都懂,但實(shí)際設(shè)計(jì)時(shí)犯錯(cuò)最多的也是這些問(wèn)題)
從神經(jīng)科學(xué)的角度來(lái)說(shuō),當(dāng)一個(gè)設(shè)計(jì)起作用時(shí),我們會(huì)“感受到它”。其影響立竿見(jiàn)影。它發(fā)生在潛意識(shí)里,在一瞬間完成,是人的本能反應(yīng)。我們不需要把它放在顯微鏡下分析它。
優(yōu)秀設(shè)計(jì)以簡(jiǎn)潔和優(yōu)雅而引人注目。喬納森·伊夫(Jonathan Ive)和迪特爾·拉姆斯(Dieter Rams)都可以算作這種設(shè)計(jì)思想的擁躉。
人們常說(shuō),優(yōu)秀設(shè)計(jì)背后的工藝是無(wú)形的。然而,這不是隨機(jī)發(fā)生的。不管人們是否注意到,設(shè)計(jì)的背后是遵循著大量而嚴(yán)格的原理去執(zhí)行的。偉大的設(shè)計(jì)師不會(huì)在畫板上隨意地將各種元素組合在一起,這是有方法的。
為什么有些設(shè)計(jì)具有美的感受,而有些卻沒(méi)有
相反地,當(dāng)一項(xiàng)設(shè)計(jì)被認(rèn)為“有些地方不對(duì)勁”時(shí),人們就會(huì)下意識(shí)地覺(jué)得這個(gè)設(shè)計(jì)是有問(wèn)題的。這樣的結(jié)果會(huì)給品牌或產(chǎn)品帶來(lái)不好的影響。當(dāng)一個(gè)高端或奢侈品品牌受到高度關(guān)注時(shí),這種影響尤其有害。這就是為什么你永遠(yuǎn)不會(huì)遇到設(shè)計(jì)不完美的香奈兒(Chanel)商店的原因。
“你對(duì)一件事的第一印象會(huì)建立起你隨后的觀念,如果一家公司在你看來(lái)不專業(yè),你可能會(huì)認(rèn)為他們做的其他事情都不專業(yè)?!狣aniel Kahneman,普林斯頓大學(xué)心理學(xué)教授。
這不是一個(gè)精心制作的設(shè)計(jì),會(huì)導(dǎo)致認(rèn)知緊張。你會(huì)在這個(gè)網(wǎng)站上預(yù)訂你的行程嗎?
我們都同意上面是糟糕的設(shè)計(jì),就像建在沙子上的房子,一個(gè)忽視基本設(shè)計(jì)原則的設(shè)計(jì)將會(huì)崩潰。潛意識(shí)里,它會(huì)立即被認(rèn)為是破碎的,無(wú)論是視覺(jué)上、精神上和情感上。
人類的大腦是懶惰的、有偏見(jiàn)的,喜歡走捷徑。Daniel Kahneman稱之為“低維思維”。當(dāng)人們看到某種設(shè)計(jì)時(shí),它的“美學(xué)完整性”、視覺(jué)感知和神經(jīng)科學(xué)之間存在著相互關(guān)聯(lián)。
當(dāng)一個(gè)設(shè)計(jì)是合理的,換句話說(shuō),它是令人愉快的、有效的,我們會(huì)迅速、直觀的判斷它是合理的。我們的心率降低,多巴胺水平增加,會(huì)有一種幸福和平靜的感覺(jué)。這就像我們聽(tīng)到舒緩的音樂(lè),會(huì)沉浸在一種每時(shí)每刻的“心流狀態(tài)” 中。“在這種狀態(tài)下,人們會(huì)專注于一項(xiàng)活動(dòng),其他一切似乎都不重要”——來(lái)自于一個(gè)心理學(xué)概念,由 Mihaly Csikszentmihalyi在他的暢銷書《心流:最佳體驗(yàn)的心理學(xué)》中寫道。
你更愿意住進(jìn)哪個(gè)房間?
蘋果的人機(jī)界面指南(Apple’s Human Interface Guidelines)幾十年來(lái)一直在談?wù)摗懊缹W(xué)完整性”。它也可以被稱為“設(shè)計(jì)完整性”或“審美凝聚力”。
蘋果對(duì)美學(xué)完整性的定義是“當(dāng)一個(gè)設(shè)計(jì)的外觀和行為與其功能完美匹配時(shí)”(彩云注:我的理解就是所見(jiàn)即所得,符合用戶的心理預(yù)期)。換句話說(shuō),設(shè)計(jì)的構(gòu)成是產(chǎn)品的一個(gè)組成部分。我們將研究決定設(shè)計(jì)組合成敗的設(shè)計(jì)原則——更多的是關(guān)于 UI,而不是關(guān)于 UX。
美學(xué)完整性不僅僅是關(guān)于設(shè)計(jì)有多好看。它指的是具有明顯連貫性的設(shè)計(jì):有效的結(jié)構(gòu)和布局,是什么讓它產(chǎn)生效果。換句話說(shuō),它的元素在視覺(jué)層次、對(duì)齊、間距、平衡、對(duì)稱、重復(fù)、比例、強(qiáng)調(diào)、接近、對(duì)比、統(tǒng)一、一致性、配色、排版、負(fù)空間等方面都有出色的運(yùn)用,這里僅舉幾個(gè)例子。
這與“黃金比例”無(wú)關(guān),黃金分割不能解決問(wèn)題。斐波那契數(shù)列螺旋沒(méi)那么玄乎,給設(shè)計(jì)師帶不來(lái)驚人的設(shè)計(jì)。
設(shè)計(jì)師們?cè)诎布惸取ぶ炖蚧蛎赡塞惿哪樕袭嫵鼋鹕菪螘r(shí)驚呼道:”果然是”黃金比例“(彩云注:但事實(shí)上有點(diǎn)故弄玄虛了)。當(dāng)然,自然界中確實(shí)有神圣幾何學(xué)(黃金比例,又稱斐波那契螺旋,是基于此),但依賴“黃金螺旋”作為設(shè)計(jì)原則是一種謬論,它已被多次暴露在其赤裸裸的荒謬中。
這是我的洗衣機(jī),上面疊加了斐波那契螺旋。
“審美的完整性”不是沒(méi)道理的。這個(gè)概念是基于基本的設(shè)計(jì)原則,是有成就的設(shè)計(jì)師實(shí)踐他們的藝術(shù)作品的經(jīng)驗(yàn)總結(jié)。
讓我們來(lái)看看一些設(shè)計(jì)原則,以及它們?yōu)槭裁磿?huì)使得你的設(shè)計(jì)更能更加有效。通常情況下,真正優(yōu)秀的設(shè)計(jì)會(huì)結(jié)合這些設(shè)計(jì)原則。
我們將探討以下這些最底層的設(shè)計(jì)原理:
視覺(jué)感知的基本規(guī)則對(duì)任何視覺(jué)設(shè)計(jì)都是至關(guān)重要的,因?yàn)樗鼈冎笇?dǎo)著如何盡可能快地傳達(dá)信息。視覺(jué)層次是設(shè)計(jì)中信息的結(jié)構(gòu)和優(yōu)先級(jí)。它決定了人們接受和處理信息的順序,因?yàn)樗砸环N視覺(jué)方式引導(dǎo)他們。
視覺(jué)層次感重在打造視覺(jué)優(yōu)先級(jí)。通過(guò)巧妙地使用顏色、形狀、大小、間距、比例和方向,創(chuàng)造性地使用決定層次的視覺(jué)元素來(lái)傳達(dá)構(gòu)圖的意義、概念和情緒。
核心關(guān)注點(diǎn)是什么,你希望用戶首先注意到或開(kāi)始閱讀的設(shè)計(jì)中最重要的元素是什么?我們想讓它成為焦點(diǎn),然后其他部分的設(shè)計(jì)從這里展開(kāi)。
一個(gè)具有良好視覺(jué)層次的網(wǎng)站會(huì)引導(dǎo)用戶關(guān)注重要的部分
視覺(jué)層次對(duì)于每一種視覺(jué)設(shè)計(jì)都是至關(guān)重要的,無(wú)論是需要引導(dǎo)訪客眼球的首頁(yè)還是移動(dòng)端UI的導(dǎo)航入口。用戶對(duì)每個(gè)元素的理解取決于組合中的其他元素及其上下文。
建立視覺(jué)層次的一些技術(shù)是:位置、大小和比例、顏色和對(duì)比、間距和親密性、負(fù)空間、紋理、引導(dǎo)線和高度。在一個(gè)元素周圍使用豐富的負(fù)空間可以使它看起來(lái)更有意義。使用引導(dǎo)線可以創(chuàng)造移動(dòng),就像一個(gè)人的眼睛在設(shè)計(jì)上移動(dòng)一樣。排版的層次結(jié)構(gòu)也扮演著重要的角色,通過(guò)不同的大小和權(quán)重,我們可以讓更重要的文本元素脫穎而出并建立秩序。
加分技巧
沒(méi)有視覺(jué)層次的網(wǎng)站沒(méi)有明顯的興趣點(diǎn)。
設(shè)計(jì)中的對(duì)齊和間距通過(guò)空間上的連接傳達(dá)出一種秩序和組織感,這兩個(gè)原則都在設(shè)計(jì)背后發(fā)揮重要價(jià)值。設(shè)計(jì)師早期學(xué)到的基本知識(shí)之一是在網(wǎng)格上編排設(shè)計(jì),然后對(duì)齊和分隔這些元素。
左對(duì)齊、居中對(duì)齊、右對(duì)齊都沒(méi)錯(cuò),但你必須對(duì)齊,否則當(dāng)元素沒(méi)有對(duì)齊時(shí),設(shè)計(jì)就會(huì)給人崩潰的感覺(jué)。它給人一種不安的感覺(jué)。
沒(méi)對(duì)齊的話,眼睛看著很難受
網(wǎng)格有很多不同的類型:列網(wǎng)格、基線網(wǎng)格、模塊網(wǎng)格、層次網(wǎng)格、像素網(wǎng)格等。不同設(shè)計(jì)使用不同網(wǎng)格,但最基本的是設(shè)計(jì)元素的對(duì)齊和間距。(彩云注:關(guān)于網(wǎng)格方面的知識(shí),彩云以前也寫過(guò)不少,感興趣的也可以在公眾號(hào)的歷史發(fā)文中翻翻看)比如:
《想要用好網(wǎng)格系統(tǒng),這8個(gè)小技巧你必須知道》
《網(wǎng)格系統(tǒng)真是太好用了,后悔沒(méi)有早點(diǎn)學(xué)會(huì)!》
《4px網(wǎng)格設(shè)計(jì)方法,讓設(shè)計(jì)還原更精準(zhǔn)》
(Illustration courtesy UX Engineer)
網(wǎng)格可以被打破。一個(gè)死板的構(gòu)圖可能會(huì)在視覺(jué)上無(wú)趣,除非一個(gè)元素從網(wǎng)格中脫穎而出。錯(cuò)位或“打破網(wǎng)格”是賦予元素更多視覺(jué)權(quán)重的一個(gè)機(jī)會(huì)。當(dāng)在設(shè)計(jì)中設(shè)置視覺(jué)層次結(jié)構(gòu)時(shí),它可以用來(lái)強(qiáng)調(diào)某些東西。
有時(shí)打破網(wǎng)格可以創(chuàng)造強(qiáng)調(diào)和移動(dòng)
設(shè)計(jì)上有兩種平衡:對(duì)稱和不對(duì)稱。所有的構(gòu)成元素:排版、顏色、圖像、形狀、圖案、留白等,都具有一定的視覺(jué)重量。有些元素很重,很吸引眼球,而有些元素很輕,感覺(jué)不那么重要。
這些元素的放置方式能夠在對(duì)稱設(shè)計(jì)中創(chuàng)造出一種平等的順序感,或者一種稍微偏離平衡能夠創(chuàng)造出一種不對(duì)稱的設(shè)計(jì)。無(wú)論對(duì)稱還是不對(duì)稱,我們的大腦都被某種平衡感所吸引,因?yàn)樗鼊?chuàng)造了和諧、秩序和美學(xué)上令人愉悅的結(jié)果。
多重原則:平衡、對(duì)齊和對(duì)稱在網(wǎng)站上發(fā)揮作用
“對(duì)比”指的是使設(shè)計(jì)中不同的元素更容易區(qū)別開(kāi)。強(qiáng)烈的對(duì)比可以在設(shè)計(jì)中強(qiáng)調(diào)一個(gè)區(qū)域,而微弱的對(duì)比可以弱化它,創(chuàng)造一個(gè)視覺(jué)層次。對(duì)比在設(shè)計(jì)中也扮演著重要的角色。對(duì)比不足會(huì)使文字特別難以閱讀,尤其是對(duì)視力有障礙的人來(lái)說(shuō)。
在左邊的設(shè)計(jì)中,一些文字和背景之間的對(duì)比不夠。
Web內(nèi)容可訪問(wèn)性指南 (WCAG)呼吁“文本的視覺(jué)呈現(xiàn)應(yīng)該有至少4.5:1的對(duì)比度”,除了大規(guī)模文本,它應(yīng)該有至少3:1的對(duì)比度。因此,設(shè)計(jì)師需要確保內(nèi)容保持舒適易讀。(彩云注:具體可用性配色工具,彩云之前的文章中有分享過(guò),現(xiàn)在這種可用性顏色已經(jīng)越來(lái)越被重視了,你也要用起來(lái)啊),之前寫的文章,推薦大家可以看看:
《以前我經(jīng)常為配色發(fā)愁,自從知道這3個(gè)配色神器后,配色變得容易多了!》
其他UI元素(如各種顯示器和設(shè)備上的卡片、按鈕、文字和圖標(biāo))之間的適當(dāng)對(duì)比也是必須的。如果UI元素之間沒(méi)有明顯的區(qū)分度,設(shè)計(jì)就容易產(chǎn)生混亂。
在格式塔原理中,對(duì)稱和秩序的法則也被稱為pr?gnanz,德語(yǔ)單詞“好身材”的意思。這個(gè)原理說(shuō)的是,大腦會(huì)以盡可能簡(jiǎn)單的方式感知模糊的形狀,這都是為了節(jié)省大腦能量。
我們傾向于尋找一切事物的對(duì)稱性。幾項(xiàng)研究發(fā)現(xiàn),面部對(duì)稱能提高人們對(duì)人臉吸引力的評(píng)價(jià)(盡管完全對(duì)稱的臉其實(shí)并不一定那么有吸引力)。該理論認(rèn)為,這種偏好與選擇DNA最好的伴侶的進(jìn)化優(yōu)勢(shì)。
對(duì)稱在自然界中也無(wú)處不在??纯匆恢缓欢浠?,或者一只海星。
對(duì)稱
同樣的原理也適用于數(shù)字領(lǐng)域,平衡對(duì)稱的設(shè)計(jì)更令人愉悅。
對(duì)稱性在應(yīng)用中發(fā)揮作用。Uber Eats、Booking.com和Behance。
重復(fù)是一致性的近親,是優(yōu)秀可用性的標(biāo)志。在設(shè)計(jì)中利用重復(fù)是件好事,因?yàn)槲覀兊拇竽X總是在尋找模式、相似性和一致性。為什么?因?yàn)橹貜?fù)相同性質(zhì)的元素需要更少的認(rèn)知努力。
我們更容易識(shí)別重復(fù)的模式,而不是每次看到新模式都要重新校準(zhǔn)大腦。正如前面提到的,大腦作為一種生存機(jī)制是懶惰的,模式識(shí)別和認(rèn)知捷徑意味著有意識(shí)地處理視覺(jué)信息所需的能量更少。
例如,重復(fù)元素的形狀和大小、填充、留白、類型和顏色,也有助于更對(duì)稱、更好地平衡,做出美觀的設(shè)計(jì)。
The Athletic這個(gè)軟件就是用重復(fù)元素做設(shè)計(jì)的好例子
奇數(shù)法則意思是說(shuō),在設(shè)計(jì)作品中奇數(shù)元素比偶數(shù)元素更有趣。偶數(shù)元素在圖像中產(chǎn)生了對(duì)稱,這可能會(huì)顯得過(guò)于正式和不自然。比如,在一行中排列三個(gè)或五個(gè)卡片會(huì)比2個(gè)或4個(gè)效果更好,作品會(huì)更加讓用戶感到舒服和自然。
Iskos Design 就是用的奇數(shù)原則做的網(wǎng)頁(yè)設(shè)計(jì)
三分法構(gòu)圖(也被稱之為黃金網(wǎng)格規(guī)則),在畫面中以水平和豎直方向分成3x3的網(wǎng)格和4個(gè)交叉點(diǎn)。這個(gè)規(guī)則能很好的協(xié)助設(shè)計(jì)師將最重要的元素放在網(wǎng)格的交叉點(diǎn)上,這樣可以很容易的設(shè)計(jì)出滿意的構(gòu)圖。
為什么會(huì)這樣?因?yàn)?strong>三分法構(gòu)圖創(chuàng)造了類似斐波那契數(shù)列(黃金比例)那種不對(duì)稱的美,產(chǎn)生了更有吸引力的構(gòu)圖。
你希望用戶關(guān)注哪些地方?高級(jí)設(shè)計(jì)師非常擅長(zhǎng)引導(dǎo)用戶的視覺(jué)焦點(diǎn),這種引導(dǎo)可以通過(guò)可見(jiàn)和不可見(jiàn)的引導(dǎo)線來(lái)完成。這些線條在構(gòu)圖中也可以打造一種動(dòng)感,也能為畫面增添視覺(jué)沖擊力。
達(dá)到這種效果通常用特定的形狀和線條,或者是它們的組合形成難以察覺(jué)的引導(dǎo)線來(lái)實(shí)現(xiàn)。利用透視、顏色、對(duì)比度和正負(fù)空間同樣可以幫助達(dá)到這種想要的效果。
從左到右的不易察覺(jué)的曲線將用戶的視線引導(dǎo)到頁(yè)面文字上
大?。╯cale)是設(shè)計(jì)中一個(gè)元素與另一個(gè)元素的相對(duì)大小。元素通過(guò)大小不同創(chuàng)建視覺(jué)層次,其中最大的元素首先會(huì)吸引用戶的注意力,因此看起來(lái)是最重要的。常規(guī)的設(shè)計(jì)策略就是將最重要的元素做成最大的,然后逐級(jí)遞減。
比例(Proportion)不同于大小,類似但有區(qū)別。比例原則是指一個(gè)整體設(shè)計(jì)中各部分的尺寸關(guān)系。設(shè)計(jì)中的元素可以有各種大小,但它們之間的大小差異,整體來(lái)看就是比例。
熟練地使用大小和比例是實(shí)現(xiàn)設(shè)計(jì)統(tǒng)一的關(guān)鍵。當(dāng)一些元素的大小過(guò)大或過(guò)小,或者比例失調(diào)時(shí),設(shè)計(jì)組合就會(huì)失去統(tǒng)一性。這種錯(cuò)誤可能發(fā)生在排版和其他元素上。例如,標(biāo)題與子標(biāo)題和正文相比顯得過(guò)大。當(dāng)設(shè)計(jì)元素失衡時(shí),設(shè)計(jì)就會(huì)“感覺(jué)不平衡”。
大小和比例都沒(méi)做好時(shí)(左圖),看起來(lái)處理的比較細(xì)致了,但依然沒(méi)有做到很好,在大小上正文和標(biāo)題分不清(右圖)
強(qiáng)調(diào)原則用于使設(shè)計(jì)的某些元素突出(使用對(duì)比、接近、比例、留白等)或不突出,即弱化強(qiáng)調(diào)(例如在頁(yè)面底部有一個(gè)幾乎看不見(jiàn)的“小字”)。強(qiáng)調(diào)是層級(jí)之母,因?yàn)闆](méi)有強(qiáng)調(diào)就沒(méi)有層級(jí)。
與其他一些設(shè)計(jì)原則一樣,“強(qiáng)調(diào)”是用來(lái)引導(dǎo)人們關(guān)注設(shè)計(jì),并強(qiáng)調(diào)需要重點(diǎn)關(guān)注的第一、第二和第三點(diǎn)。首頁(yè)面和電商轉(zhuǎn)化頁(yè)面在99%的情況下都使用這種原則。
使用這個(gè)原則,在購(gòu)物網(wǎng)站上強(qiáng)調(diào)了標(biāo)語(yǔ)和產(chǎn)品,轉(zhuǎn)化效果非常好
統(tǒng)一是指設(shè)計(jì)元素如何很好地結(jié)合在一起,形成“視覺(jué)凝聚力”。它指的是設(shè)計(jì)中的連貫性,讓人們覺(jué)得所有部分都是一起的。每個(gè)元素都應(yīng)該具有清晰的視覺(jué)關(guān)系,以幫助傳達(dá)清晰、簡(jiǎn)潔的信息。整體性好的設(shè)計(jì)比整體性差的設(shè)計(jì)更有條理,質(zhì)量也更高。
運(yùn)用統(tǒng)一的配色,重復(fù)、平衡和對(duì)稱之類的原則將有助于在設(shè)計(jì)中形成一種和諧感,也就是一致性。設(shè)計(jì)中良好的一致性就好比歌曲中一首歌被和諧地唱出來(lái),形成一個(gè)完美的整體。
一致的顏色、重復(fù)的圖案、平衡和對(duì)稱在蒂芙尼的網(wǎng)站上創(chuàng)造了一種統(tǒng)一的感覺(jué)。
格式塔的接近原則讓設(shè)計(jì)師將同類型的相關(guān)元素進(jìn)行分組。把它們分開(kāi)得更遠(yuǎn),元素就顯得越不相關(guān),它們之間的關(guān)系就會(huì)減弱。一般來(lái)說(shuō),人們會(huì)認(rèn)為遠(yuǎn)離的元素是不相關(guān)的。
不應(yīng)該讓用戶在設(shè)計(jì)中分辨哪些元素是相互關(guān)聯(lián)的,正如美國(guó)郵政服務(wù)的例子所顯示的那樣,缺乏對(duì)鄰近性的關(guān)注會(huì)導(dǎo)致直接的認(rèn)知緊張,損害用戶體驗(yàn)。
接近原則沒(méi)做好的案例。由于字段標(biāo)簽離它們下面的字段更近,人們可能會(huì)搞混。
下面是一個(gè)鄰近性原則做的好的案例,我們可以看到相關(guān)元素是如何通過(guò)鄰近性關(guān)聯(lián)起來(lái)的(分組的元素用紫色表示)
一個(gè)把接近原則用好的網(wǎng)頁(yè)設(shè)計(jì)案例
一致性原則使數(shù)字產(chǎn)品的使用更加可預(yù)測(cè),符合用戶的期望。設(shè)計(jì)中的一致性可以培養(yǎng)熟悉度,它可以提高用戶體驗(yàn)、可用性和用戶使用效率。另一方面,不一致的設(shè)計(jì)將產(chǎn)生更多的認(rèn)知負(fù)荷/腦力勞動(dòng),并導(dǎo)致困惑和挫折。這就相當(dāng)于在用戶的路徑上設(shè)置障礙。讓用戶的心流嘎然而止!
做好一致性可以增強(qiáng)“審美凝聚力”?!拔覀兌贾?,當(dāng)我們使用應(yīng)用時(shí),應(yīng)用的導(dǎo)航位置如果經(jīng)常變化,或者像“加入購(gòu)物車”這樣的主按鈕在不同屏幕上從紅色變成綠色,這是多么令人沮喪。
除了視覺(jué)一致性和易用性,品牌一致性在產(chǎn)品設(shè)計(jì)中也發(fā)揮著重要作用。如果沒(méi)有一致的元素呈現(xiàn),如排版、配色和圖案,高質(zhì)量的品牌體驗(yàn)將無(wú)法傳遞。
在用戶體驗(yàn)方面,一致性意味著在設(shè)計(jì)中使用相似的UI元素來(lái)完成相似的任務(wù),即在整個(gè)產(chǎn)品中擁有相似的功能和行為。因?yàn)榭捎眯允且环N評(píng)估用戶界面易用性的質(zhì)量屬性,所以一致性對(duì)用戶體驗(yàn)的可用性有很大的貢獻(xiàn)。
一致性是通過(guò)使用相同的配色、排版、間距、模式和交互來(lái)實(shí)現(xiàn)的。
色彩心理學(xué)也不容忽視。色彩承載著意義和情感,可以向人的潛意識(shí)傳遞信息。在品牌方面,人們對(duì)顏色做了大量的心理學(xué)研究,因?yàn)樵谌藗兣c品牌進(jìn)行任何互動(dòng)之前,顏色會(huì)讓他們產(chǎn)生一種本能的反應(yīng)。例如,藍(lán)色通常被認(rèn)為是可靠的、安全的和平靜的,想想銀行;而紅色是刺激的,被認(rèn)為是增加人們的心率,想想飲料包裝。
一個(gè)極簡(jiǎn)主義的暗色主題設(shè)計(jì)傳達(dá)了一個(gè)特定的品牌氣質(zhì),并使用了少量的顏色。
排版在設(shè)計(jì)中扮演著非常重要的角色,它的重要性再怎么強(qiáng)調(diào)都不為過(guò)。在構(gòu)圖中,字體樣式對(duì)人們感知設(shè)計(jì)的影響比任何其他元素都大,可能除了顏色。
因?yàn)槲覀兊拇竽X以閃電般的速度運(yùn)轉(zhuǎn),一個(gè)字體會(huì)對(duì)一個(gè)設(shè)計(jì)產(chǎn)生影響,以至于它可能在不到一眨眼的時(shí)間內(nèi)改變用戶的印象。與顏色一樣,字體甚至?xí)绊懳覀兊那榫w,資深設(shè)計(jì)師可以通過(guò)字體傳達(dá)情緒和風(fēng)格。通過(guò)選擇合適的字體,我們可以傳達(dá)出穩(wěn)定、優(yōu)雅、舒適、可靠、有力等信息。
排版層次結(jié)構(gòu)可以快速建立視覺(jué)層次結(jié)構(gòu),并且通常在其中扮演重要角色。因此,在設(shè)計(jì)中經(jīng)常使用不同的字體和字體大小來(lái)表示層次結(jié)構(gòu),例如標(biāo)題、副標(biāo)題、正文和引用。
“除了確保文本清晰易讀,排版可以幫助你理清信息層次,傳達(dá)重要內(nèi)容,并表達(dá)你的品牌。” ——蘋果的人機(jī)界面指南
蘭博基尼的網(wǎng)站巧妙地使用了排版風(fēng)格和比例來(lái)賦予其設(shè)計(jì)力量
Claude Debussy 曾說(shuō)過(guò),“音樂(lè)是音符之間的空間“。同樣的觀點(diǎn)也適用于設(shè)計(jì),元素之間的負(fù)空間給予設(shè)計(jì)強(qiáng)調(diào)、平衡和統(tǒng)一。
元素周圍適當(dāng)?shù)呢?fù)空間將焦點(diǎn)集中在元素本身。它強(qiáng)調(diào)了內(nèi)容,并提供了必要的喘息空間,以確保布局不顯得雜亂。沒(méi)有了呼吸空間,人腦就不太可能掃描興趣點(diǎn),更容易感到困惑。
蘋果官網(wǎng)提供了一個(gè)利用負(fù)空間創(chuàng)造強(qiáng)烈焦點(diǎn)的杰出例子。
人們已經(jīng)開(kāi)始期待所有平臺(tái)和設(shè)備上的優(yōu)化、無(wú)阻礙的用戶體驗(yàn)。理解設(shè)計(jì)原則及其交互方式對(duì)所有設(shè)計(jì)師來(lái)說(shuō)都是至關(guān)重要的。使用專業(yè)技能設(shè)計(jì)它們是創(chuàng)造具有視覺(jué)吸引力的功能性設(shè)計(jì)的關(guān)鍵。我們不要忘記,美學(xué)的完整性會(huì)嚴(yán)重影響用戶體驗(yàn)。
基于原則的設(shè)計(jì)是設(shè)計(jì)師在感覺(jué)有點(diǎn)迷失或用盡創(chuàng)意時(shí)可以依賴的黃金標(biāo)準(zhǔn)方法。在沒(méi)有理解和實(shí)現(xiàn)設(shè)計(jì)原則的情況下,也可能實(shí)現(xiàn)可接受的設(shè)計(jì)。然而,這可能需要大量的嘗試和錯(cuò)誤才能創(chuàng)造出看起來(lái)不錯(cuò)的內(nèi)容,并創(chuàng)造出最佳的用戶體驗(yàn)。
產(chǎn)品的美學(xué)質(zhì)量與它的實(shí)用性密不可分,因?yàn)槲覀兠刻焓褂玫漠a(chǎn)品影響著我們和我們的幸福?!钡挥芯闹谱鞯奈锲凡艜?huì)美麗?!?Dieter Rams(迪特爾·拉姆斯)
當(dāng)我們不關(guān)注由設(shè)計(jì)原則驅(qū)動(dòng)的設(shè)計(jì)質(zhì)量時(shí),我們可能會(huì)忽視品牌質(zhì)量及其所代表的一切。當(dāng)某些東西設(shè)計(jì)不好時(shí),品牌就會(huì)受到傷害,產(chǎn)品也會(huì)受到影響。這就是為什么偉大的設(shè)計(jì)師在他們的工作中極其嚴(yán)謹(jǐn), 他們知道“你永遠(yuǎn)不會(huì)有第二次機(jī)會(huì)給人留下良好的第一印象?!?/strong>
設(shè)計(jì)的細(xì)節(jié)成就了設(shè)計(jì)本身?!?查爾斯 伊姆斯(Charles Eames)
作者:彩云Sky 來(lái)源:站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)加微信ban_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
卡片是一個(gè)UI組件,包含了某一個(gè)內(nèi)容的信息和操作??ㄆ梢园鞣N元素,但它們都應(yīng)該屬于同一個(gè)主題。
這樣做的目的是為了避免冗長(zhǎng)的文字,并呈現(xiàn)更多的內(nèi)容。即使從設(shè)計(jì)的角度來(lái)看,用戶可能不熟悉卡片的概念,但他們馬上就知道如何使用它們,因?yàn)樗鼈兣c實(shí)體卡片是一樣的。(彩云注:這個(gè)就是用戶心理學(xué)中隱喻的運(yùn)用)
卡片之所以流行,是因?yàn)樗鼈兡芨玫陌芽貎?nèi)容。卡片是模塊化的,所以不同的內(nèi)容可以堆疊在一起,而不需要注意它們的差異。
卡片通過(guò)強(qiáng)制內(nèi)容適應(yīng)卡片邊界和卡片布局上的限制來(lái)聚焦內(nèi)容。設(shè)計(jì)師喜歡通過(guò)卡片混排大量?jī)?nèi)容,而無(wú)需擔(dān)心設(shè)計(jì)會(huì)變得雜亂無(wú)章。
卡片可以將內(nèi)容分解成易于理解的小塊,以便用戶與之互動(dòng)。通過(guò)給內(nèi)容一個(gè)容器,卡片向用戶表明內(nèi)容是真實(shí)和感性的。
卡片 UI 設(shè)計(jì)流行的原因還有很多:
直觀:卡片在界面中看起來(lái)與現(xiàn)實(shí)世界中的卡片相同,它們對(duì)用戶來(lái)說(shuō)似乎很常見(jiàn)。在卡片成為移動(dòng)和網(wǎng)絡(luò)應(yīng)用中的流行元素之前,它們?cè)诂F(xiàn)實(shí)生活中無(wú)處不在:名片、棒球卡、便簽??ㄆ砹艘环N有益的視覺(jué)類比,它允許我們的大腦直觀地將卡片與其所代表的內(nèi)容聯(lián)系起來(lái),就像在現(xiàn)實(shí)生活中一樣。
易于閱讀:卡片不占用太多空間,并敦促設(shè)計(jì)師優(yōu)先考慮其內(nèi)容。不同的是,每張卡片都變成了易于閱讀的內(nèi)容??ㄆ層脩舾菀渍业剿麄兏信d趣的內(nèi)容。
有吸引力且對(duì)用戶更友好:基于卡片的設(shè)計(jì)通常非常依賴視覺(jué)效果(尤其是圖片);就信息架構(gòu)而言,視覺(jué)層次會(huì)更加清晰。使用圖片有助于使基于卡片的設(shè)計(jì)比不在卡片中排列的相同內(nèi)容對(duì)用戶更具吸引力。
有利于響應(yīng)式設(shè)計(jì):卡片是矩形的,可以平滑地調(diào)整大小,以適應(yīng)不同屏幕的水平和垂直正面,這意味著用戶可以在所有設(shè)備上獲得統(tǒng)一的體驗(yàn)。
便于分享:卡片可以鼓勵(lì)用戶在社交媒體上分享內(nèi)容,因?yàn)樗试S用戶只分享特定的內(nèi)容,而不是整個(gè)頁(yè)面。
什么時(shí)候應(yīng)用卡片設(shè)計(jì)?
這通常是當(dāng)你有:
基于搜索的界面: 卡片能通過(guò)模塊的內(nèi)容快速顯示合適的內(nèi)容,這使得用戶可以深入了解自己的興趣?;诳ㄆ脑O(shè)計(jì)是一種非常適合呈現(xiàn)這類內(nèi)容的方式。
信息瀏覽:當(dāng)用戶瀏覽信息時(shí),卡片的兼容性更好。
任務(wù)管理:當(dāng)可以將流程中的單個(gè)任務(wù)作為卡片進(jìn)行說(shuō)明時(shí), 可以輕松組織卡片以獲取任務(wù)列表。任務(wù)管理應(yīng)用在使用卡片式界面為用戶創(chuàng)建儀表板方面做得很好,其中每張卡片代表一個(gè)單獨(dú)的任務(wù)。
類似項(xiàng)目:卡片最適合于異構(gòu)項(xiàng)目的集合(當(dāng)并非所有內(nèi)容都是相同的基本類型時(shí))。
可視化分析: 儀表板通常在同一頁(yè)上同時(shí)顯示各種內(nèi)容樣本。在這種情況下,卡片類比可以幫助在不同物品之間創(chuàng)造出更明顯的差異,其中每張卡片可以適應(yīng)不同的角色。
卡片的布局可以不同,以支持它們包含的內(nèi)容類別。下面的組件通??梢栽诙喾N卡片樣式中找到。
(1)富媒體: 卡片可以包含縮略圖,以顯示圖片,插圖,頭像,Logo,圖標(biāo)或圖形。
(2) 標(biāo)題: 標(biāo)題文本可以包含相冊(cè)或文章的名稱或標(biāo)題。
(3) 描述: 支持文本,如文章摘要或簡(jiǎn)短的描述。
(4) 行動(dòng)按鈕: 卡片可以包含用于操作的按鈕。
(5) 副標(biāo)題: 副標(biāo)題文本可以包含詳細(xì)介紹,如文章的署名或標(biāo)記的位置。
(6) 圖標(biāo): 卡片可以包含操作圖標(biāo)。
有一些小的技巧可以快速提高卡片設(shè)計(jì)細(xì)節(jié)。
1. 使用相關(guān)主題的圖片
圖片是卡片設(shè)計(jì)的主角,你需要一個(gè)高級(jí)的圖片來(lái)吸引用戶對(duì)每張卡片的注意。不僅是圖像,卡片還可以包含插圖、帶有淺色背景框的圖標(biāo)或任何其他類型的富媒體,但需要與內(nèi)容主題相關(guān)。
2. 增加視覺(jué)層次
卡片內(nèi)的層次結(jié)構(gòu)有助于引導(dǎo)用戶對(duì)重要信息的閱讀。將主要內(nèi)容放在卡片的頂部,并使用排版來(lái)強(qiáng)化主要內(nèi)容。使用空白和對(duì)比來(lái)分隔需要更多視覺(jué)分隔的內(nèi)容區(qū)域。(彩云注:視覺(jué)層級(jí)對(duì)于信息表達(dá)至關(guān)重要?。?nbsp;
3. 限制內(nèi)容長(zhǎng)度
一張卡片應(yīng)該只包含重要的信息,并提出一個(gè)相關(guān)的觀點(diǎn),以獲取額外的細(xì)節(jié),而不是完整的細(xì)節(jié)本身。當(dāng)我們?cè)噲D在一張卡片中放入太多內(nèi)容時(shí),卡片可能會(huì)變得很冗長(zhǎng),并失去與卡片類比的實(shí)際聯(lián)系,因?yàn)樗辉傧褚粡埧ㄆ恕?nbsp;
4. 避免嵌入鏈接
不要包含內(nèi)聯(lián)鏈接,卡片應(yīng)該自己鏈接。嵌入文字鏈接會(huì)讓用戶誤操作。
5. 區(qū)分操作主次
包含不同操作的卡片應(yīng)該在視覺(jué)上形成對(duì)比。在下面的例子中,我通過(guò)使用一種較輕的色調(diào)而不是主要的按鈕風(fēng)格來(lái)降低后續(xù)操作的視覺(jué)強(qiáng)度。
6. 去掉分割線
對(duì)于新手設(shè)計(jì)師來(lái)說(shuō),用分割線來(lái)區(qū)分內(nèi)容是一種常見(jiàn)的方式,以此定義不同的組。這些邊框會(huì)造成不必要的視覺(jué)干擾,從而影響內(nèi)容。
APP中的卡片并不是純粹的擬物概念,但通常情況下,使用一致的類比和物理原理能幫助用戶理解界面并分析內(nèi)容中的視覺(jué)層次。在卡片的情況下,你可以做幾件事:
1. 使用圓角
在形態(tài)上與真實(shí)世界的卡片進(jìn)行視覺(jué)對(duì)比。圓角更有效,因?yàn)樗鼈冏屛覀兊难劬θ菀赘S視覺(jué)動(dòng)線,“因?yàn)樗m合頭部和眼睛的自然運(yùn)動(dòng)”。
2. 增加一個(gè)輕微的外邊框或者投影
增加一條淡淡的描邊框或者增加一個(gè)淡淡的投影都是很好的做法。陰影在界面中創(chuàng)造了一個(gè)層次,這有助于我們區(qū)分UI元素。
然而,在設(shè)計(jì)中添加陰影并不像聽(tīng)起來(lái)那么簡(jiǎn)單。有時(shí)候設(shè)計(jì)師會(huì)過(guò)分強(qiáng)化投影效果,讓原本看起來(lái)不錯(cuò)的設(shè)計(jì)看起來(lái)很廉價(jià)。避免使用純黑色的陰影。
3.注意字體和留白
重要的是要讓每一張卡片都能被人看到、閱讀和理解。在每個(gè)塊周圍添加大量的空白,讓用戶有時(shí)間處理并進(jìn)行視覺(jué)重置,有精力看完一張卡再到下一張。
選擇簡(jiǎn)單和基本的字體,因?yàn)榛镜呐虐孀畲笙薅鹊靥岣吡丝勺x性,并有助于瀏覽。
讓我們看看一些真實(shí)項(xiàng)目中的卡片設(shè)計(jì)案例:
信息流中的卡片設(shè)計(jì)
保持信息流卡片簡(jiǎn)單是很重要的。它們應(yīng)該有一個(gè)一致的、重復(fù)的結(jié)構(gòu),但是使用不同的圖片和字體大小來(lái)代表卡片中最重要的和最不重要的元素,以使讀卡片的人更容易理解它們。
由Diseno Constructivo和Webpixels設(shè)計(jì)
他們突出特色圖片和標(biāo)題作為最突出的元素,這能幫助用戶決定文章或發(fā)布的內(nèi)容是否適合他們。
電商卡片設(shè)計(jì)
產(chǎn)品卡片是一個(gè)很重要的東西,它可以幫助你將訪問(wèn)者轉(zhuǎn)化為客戶。一張優(yōu)秀的產(chǎn)品卡片應(yīng)該能夠吸引人們的注意,激發(fā)人們獲得產(chǎn)品的欲望,激勵(lì)人們購(gòu)買,并在搜索結(jié)果中得到高效推廣。
由Webpixels設(shè)計(jì)
產(chǎn)品的名稱應(yīng)該放在最顯眼的地方,這樣參觀者就會(huì)立刻明白他來(lái)對(duì)地方了。一個(gè)好的配圖能告訴顧客勝過(guò)千言萬(wàn)語(yǔ),所以你需要一個(gè)高質(zhì)量的產(chǎn)品配圖來(lái)設(shè)計(jì)完美的產(chǎn)品卡片。
如果產(chǎn)品有特價(jià),不僅要在價(jià)格欄中注明促銷價(jià)格,還要注明常規(guī)價(jià)格,以及客戶可以節(jié)省多少錢。
個(gè)人中心卡片設(shè)計(jì)
簡(jiǎn)介卡已經(jīng)成為一個(gè)應(yīng)用或網(wǎng)站中的功能模板。隨著個(gè)人品牌變得比以往任何時(shí)候都重要,卡片設(shè)計(jì)在這里也能發(fā)揮重要作用。
由Neelesh Chaudhary設(shè)計(jì)
就像每一張卡片一樣,配置文件卡片也是一個(gè)UI組件,它包含了對(duì)它所代表的內(nèi)容至關(guān)重要的信息。為了達(dá)到你的目標(biāo),你要向其他人推銷你自己。
確保只包括必要的信息(例如,照片,名字,職業(yè)),讓你的“關(guān)于”頁(yè)面有剩余的細(xì)節(jié)來(lái)完善你的個(gè)人資料。
儀表盤卡片設(shè)計(jì)
儀表板的設(shè)計(jì)可以有很大的不同。但是所有的儀表盤都是用卡片做的。根據(jù)儀表板的類型,每張卡片可能包括概要信息、通知、快速鏈接或?qū)Ш皆O(shè)計(jì)元素、關(guān)鍵數(shù)據(jù)、圖表和數(shù)據(jù)表。確保你為每個(gè)元素使用了正確類型的卡片。
由Simmmple設(shè)計(jì)
儀表盤卡設(shè)計(jì)允許用戶決定他們想要關(guān)注哪些數(shù)據(jù)。易于理解的UI,允許用戶精確地控制哪些數(shù)據(jù)需要在儀表板的前端做好。
只包括最相關(guān)的信息,為用戶使用方便。當(dāng)你的數(shù)據(jù)集在一起看更容易理解時(shí),找到在一張卡片上顯示它們的方法。但是要小心,不要讓用戶感到困惑。
日常計(jì)劃卡片設(shè)計(jì)
看板任務(wù)卡似乎是一件非常簡(jiǎn)單的事情——拿一張便簽,寫下你需要做什么,然后把它貼在墻上。這些卡片必須包含需要行動(dòng)的單位數(shù)量。它們還可能包含各種各樣的其他信息,清楚地傳達(dá)了必須做什么。
由Neelesh Chaudhary設(shè)計(jì)
卡片上包含的信息包括任務(wù)的名稱和重要的細(xì)節(jié),如任務(wù)的類型和誰(shuí)擁有它??窗蹇ǚ旁跔顟B(tài)類別下。最基本的狀態(tài)類別是“計(jì)劃要做”、“正在進(jìn)行中”和“完成”,但是狀態(tài)可能因項(xiàng)目而異。
卡片結(jié)構(gòu)最適用于添加或刪除任務(wù)這樣的小改變,而不是改變像你的總體目標(biāo)這樣的大想法。
有幾種方法可以使卡片設(shè)計(jì)更加有效。通過(guò)最初定義和觀察卡片,我們可以更好地了解跨行業(yè)的這種設(shè)計(jì)模式。這也讓我們能夠推測(cè)用戶希望在這些卡片上采取什么行動(dòng)??ㄆ谔峁┰S多不同種類內(nèi)容摘要的環(huán)境中尤其有效,而不是簡(jiǎn)單地作為內(nèi)容列表的現(xiàn)代替代品。
筆者在車聯(lián)網(wǎng)行業(yè)任職HMI視覺(jué)設(shè)計(jì)師,由于HMI設(shè)計(jì)發(fā)展的較晚,所以基本上在開(kāi)始進(jìn)入到這個(gè)領(lǐng)域的人,大多來(lái)自于互聯(lián)網(wǎng)行業(yè)。由于互聯(lián)網(wǎng)行業(yè)發(fā)展的比較早,形成了一套成熟的工作流程,即:分工明確的遞進(jìn)式協(xié)作:交互設(shè)計(jì)師要等到產(chǎn)品PRD評(píng)審結(jié)束才開(kāi)始介入需求,然后交付黑白線框稿等給到視覺(jué)設(shè)計(jì)師繼續(xù)跟進(jìn)。這種工作模式可以讓每個(gè)人在自己的崗位上做得更加專業(yè),成為垂直領(lǐng)域的專家。在車聯(lián)網(wǎng)行業(yè)發(fā)展初期的時(shí)候,這種工作模式對(duì)于傳統(tǒng)行業(yè)的來(lái)講,比較新穎、高效,所以在一定程度上促進(jìn)了行業(yè)發(fā)展,但汽車操作系統(tǒng)的設(shè)計(jì)還是有很多不同于互聯(lián)網(wǎng)設(shè)計(jì)的地方,所以本文旨在討論HMI工作流程,如何分工,怎樣高效的進(jìn)行設(shè)計(jì)協(xié)同,以期望探索更適合車聯(lián)網(wǎng)行業(yè)的設(shè)計(jì)協(xié)同方案,希望對(duì)你可以有所助益。
對(duì)于HMI設(shè)計(jì)來(lái)講,需要了解很多專業(yè)知識(shí),比如:屏幕、硬件、三電、法規(guī)……這些東西都會(huì)影響到設(shè)計(jì)的視覺(jué)表達(dá),所以設(shè)計(jì)協(xié)同就顯得尤為重要,那么什么是設(shè)計(jì)協(xié)同呢?指設(shè)計(jì)師在設(shè)計(jì)之初,即可開(kāi)啟分享與協(xié)作,讓協(xié)同者盡可能早的參與到設(shè)計(jì)中,通過(guò)提供一系列工具,讓協(xié)同者有更加友好地體驗(yàn),保證每個(gè)人都可以準(zhǔn)確找到相應(yīng)需求的內(nèi)容,并且快速提出修改意見(jiàn)與反饋。簡(jiǎn)單地講,就是讓每個(gè)人都參與到設(shè)計(jì)過(guò)程中,以使最終的結(jié)果能夠滿足用戶的需求。
從產(chǎn)品功能邏輯層面來(lái)講,HMI設(shè)計(jì)的“復(fù)雜度”是具有有一定的“限制性”的,即保證安全第一,過(guò)度復(fù)雜的設(shè)計(jì)必然影響駕駛和乘坐人的安全。所以對(duì)于設(shè)計(jì),是需要進(jìn)行全方位評(píng)估的,必然會(huì)涉及到不同的角色。同時(shí)隨著項(xiàng)目的不斷發(fā)展,設(shè)計(jì)團(tuán)隊(duì)也在不斷壯大,設(shè)計(jì)師之間的協(xié)作也越來(lái)越多,相應(yīng)的溝通和協(xié)作成本就會(huì)不斷增加。如何才能更高效的合作,并把設(shè)計(jì)質(zhì)量和一致性做得更好,是我們需要解決的問(wèn)題。所以設(shè)計(jì)協(xié)同的最終目的是為了解決問(wèn)題,做正確的事,讓設(shè)計(jì)師做真正該做的事情。
讓設(shè)計(jì)師專注于真正重要的事情,而不是把精力放在可以自動(dòng)化處理的事情上。對(duì)所有人員的工作進(jìn)行集中化管理,所有人員基于統(tǒng)一數(shù)據(jù)源進(jìn)行協(xié)作。
通過(guò)構(gòu)建團(tuán)隊(duì)資產(chǎn)庫(kù),比如設(shè)計(jì)規(guī)范、控件組件庫(kù)等,通過(guò)建立健全設(shè)計(jì)規(guī)范,讓數(shù)據(jù)沉淀,一方面讓設(shè)計(jì)師的設(shè)計(jì)有據(jù)可依,提升設(shè)計(jì)的專業(yè)性,另一方面,減少因?yàn)槿藛T變動(dòng)造成的數(shù)據(jù)丟失。
在設(shè)計(jì)之初,就讓協(xié)同者參與到設(shè)計(jì)之中,保證每個(gè)人都可以準(zhǔn)確的找到他們的需求內(nèi)容,并快速提出修改意見(jiàn)與反饋,讓設(shè)計(jì)師更有針對(duì)性的解決問(wèn)題,讓設(shè)計(jì)師無(wú)需做重復(fù)性的工作。
在HMI設(shè)計(jì)的工作流程中,主要涉及到的角色有產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、視覺(jué)設(shè)計(jì)師、研發(fā)工程師、測(cè)試工程師、項(xiàng)目經(jīng)理。
不同角色主要工作內(nèi)容是:
圍繞著HMI設(shè)計(jì)的整個(gè)工作流程是:
產(chǎn)品經(jīng)理確認(rèn)需求,輸出PRD文檔;交互設(shè)計(jì)師收到PRD文檔以后,基于需求,梳理功能,完善業(yè)務(wù)流程,完成交互文檔的制作,輸出UE文檔;視覺(jué)設(shè)計(jì)師在收到UE文檔以后,針對(duì)交互文檔中的流程頁(yè)面,進(jìn)行視覺(jué)設(shè)計(jì),輸出UI文件給到研發(fā)同學(xué);研發(fā)同學(xué)根據(jù)UI文件和交互文檔進(jìn)行代碼化,完成以后進(jìn)入測(cè)試環(huán)節(jié),測(cè)試工程師和產(chǎn)品、交互、視覺(jué)都需要參與到測(cè)試過(guò)程中,當(dāng)完成測(cè)試工作以后進(jìn)行發(fā)版。
涉及角色
自己、設(shè)計(jì)師小團(tuán)隊(duì)。
痛點(diǎn)
工作中很多重復(fù)的內(nèi)容,比如:Button、List等使用的地方很多,如果每個(gè)元素都重新繪制,勢(shì)必會(huì)投入很多時(shí)間,同時(shí)因?yàn)槿藶橐蛩兀y免會(huì)出現(xiàn)不統(tǒng)一的地方。那么怎么樣解決這個(gè)問(wèn)題呢?
協(xié)同方式
當(dāng)團(tuán)隊(duì)初期發(fā)展的時(shí)候,或者整個(gè)團(tuán)隊(duì)只有少數(shù)幾個(gè)設(shè)計(jì)師的時(shí)候,通過(guò)匯總通用樣式和組件,形成視覺(jué)指導(dǎo)Guide,方便通用樣式的復(fù)用,減少重復(fù)工作量,達(dá)到快速完成視覺(jué)設(shè)計(jì)的目的。
優(yōu)點(diǎn)
通過(guò)樣式庫(kù)和控件組件庫(kù)的搭建,形成了一定的共有樣式,方便復(fù)用,有效的減少了重復(fù)工作量。
缺點(diǎn)
由于控件組件庫(kù)是在設(shè)計(jì)進(jìn)行到一定程度以后提煉的,會(huì)存在滯后性,并且隨著設(shè)計(jì)工作越來(lái)越往后,會(huì)發(fā)現(xiàn)前期的控件組件存在不合適的地方,需要對(duì)之前的工作進(jìn)行修正。
涉及角色
設(shè)計(jì)團(tuán)隊(duì)內(nèi)部。
痛點(diǎn)
當(dāng)公司發(fā)展到一定的階段:
當(dāng)設(shè)計(jì)團(tuán)隊(duì)越來(lái)越大,大家分工越來(lái)越細(xì),想法越來(lái)越多,就會(huì)發(fā)現(xiàn),復(fù)制粘貼guide的方式,已經(jīng)無(wú)法滿足團(tuán)隊(duì)的發(fā)展了,經(jīng)常出現(xiàn)組件不能滿足使用的情況,或者是組件相似但不知道怎么選擇等問(wèn)題。
同時(shí)因?yàn)闆](méi)有統(tǒng)一的流程,會(huì)發(fā)現(xiàn)不同的業(yè)務(wù)對(duì)于同一功能交互邏輯的不統(tǒng)一現(xiàn)象,比如:搜索是很多業(yè)務(wù)都會(huì)使用的功能,因?yàn)闆](méi)有統(tǒng)一定義,有的業(yè)務(wù)會(huì)采用即時(shí)搜索模式,有的業(yè)務(wù)必須點(diǎn)擊搜索以后才可以進(jìn)行搜索,并且這種問(wèn)題,前期很難發(fā)現(xiàn),只有到了中后期走查的時(shí)候才會(huì)發(fā)現(xiàn)。
所以在后期會(huì)針對(duì)每一個(gè)差異點(diǎn)進(jìn)行統(tǒng)一,需要全流程重新來(lái)一遍,費(fèi)時(shí)費(fèi)力。那么怎么才可以避免這種情況的發(fā)生呢?答案就是構(gòu)建設(shè)計(jì)系統(tǒng)。
協(xié)同方式
設(shè)計(jì)系統(tǒng)不同于guide的地方是:樣式,控件組件只是設(shè)計(jì)系統(tǒng)中的兩個(gè)組成部分,除此以外,設(shè)計(jì)系統(tǒng)還包括了一系列的標(biāo)準(zhǔn)來(lái)指導(dǎo)設(shè)計(jì)。比如:圖標(biāo)、動(dòng)效、音效等。這些標(biāo)準(zhǔn)記錄了設(shè)計(jì)團(tuán)隊(duì)內(nèi)達(dá)成一致的一系列的決定,比如如何選擇控件,如何在不同的控件中選擇。正是這些標(biāo)準(zhǔn)才確保了設(shè)計(jì)方案不僅僅只解決一個(gè)問(wèn)題,而是可以被復(fù)用的。這些標(biāo)準(zhǔn)也是為什么用戶能獲得一致的體驗(yàn)的原因。
通過(guò)設(shè)計(jì)系統(tǒng)的建立,讓設(shè)計(jì)規(guī)模化,繼而進(jìn)一步強(qiáng)化車機(jī)系統(tǒng)的統(tǒng)一性,同時(shí)為設(shè)計(jì)師在做設(shè)計(jì)時(shí)提供一個(gè)很好的指導(dǎo)方向,讓團(tuán)隊(duì)內(nèi)不同成員的設(shè)計(jì)在風(fēng)格上保持一致,提升設(shè)計(jì)團(tuán)隊(duì)的專業(yè)度。關(guān)于設(shè)計(jì)系統(tǒng)的建立本文就不再過(guò)多描述,后續(xù)會(huì)出專門的文章進(jìn)行詳述,這里主要是講述設(shè)計(jì)系統(tǒng)搭建以后的協(xié)同方式。
設(shè)計(jì)系統(tǒng)的搭建需要專門的人或者團(tuán)隊(duì)進(jìn)行,當(dāng)搭建完成以后,需要輸出的資源有:UE控件組件庫(kù)、顏色/字體樣式庫(kù)、UI控件組件庫(kù)、UI控件組件說(shuō)明文檔。這些資源各有什么用呢,接下來(lái)進(jìn)行詳細(xì)說(shuō)明:
UE控件組件庫(kù)
提供給交互設(shè)計(jì)師,基于提供的內(nèi)容,交互可以快速的構(gòu)建界面、交互和流程等,就像搭樂(lè)高一樣??梢钥焖俚臉?gòu)建一些產(chǎn)品原型或者是實(shí)驗(yàn)性的功能,來(lái)進(jìn)行測(cè)試以快速驗(yàn)證想法。
顏色/字體樣式庫(kù)、UI控件組件庫(kù)
提供給UI設(shè)計(jì)師,形式可以是Sketch Libraries,一方面方便設(shè)計(jì)師調(diào)用,使不同的設(shè)計(jì)師的設(shè)計(jì)變得更加統(tǒng)一,且更加可預(yù)測(cè),同時(shí)組件也可以讓設(shè)計(jì)師更多的時(shí)間專注于如何構(gòu)建更好的用戶體驗(yàn),而不是去糾結(jié)于樣式的調(diào)整。
UI控件組件說(shuō)明文檔
提供給研發(fā),可以是pdf之類的文檔形式,主要是詳細(xì)的描述每一個(gè)組件的各種屬性,以及里面包含的交互邏輯等,幫助研發(fā)搭建起研發(fā)自己的底層代碼平臺(tái)。
那么這些資源和不同的角色之間是怎么協(xié)作呢?UE控件組件庫(kù)不需要常常更新,完成后給到交互設(shè)計(jì)團(tuán)隊(duì),供交互設(shè)計(jì)師使用搭建UE文檔。在項(xiàng)目開(kāi)始之前,負(fù)責(zé)設(shè)計(jì)系統(tǒng)的UI團(tuán)隊(duì)進(jìn)行顏色/字體樣式庫(kù)、UI控件組件庫(kù)制作,完成以后分享到團(tuán)隊(duì)內(nèi),供業(yè)務(wù)設(shè)計(jì)師使用進(jìn)行界面設(shè)計(jì),同時(shí)進(jìn)行UI控件組件說(shuō)明文檔的編撰,完成以后提供給相應(yīng)的平臺(tái)研發(fā),讓平臺(tái)研發(fā)進(jìn)行組件代碼化。當(dāng)代碼實(shí)現(xiàn)以后進(jìn)行走查,檢查是否按照UI準(zhǔn)確的實(shí)現(xiàn)。當(dāng)業(yè)務(wù)設(shè)計(jì)師完成了業(yè)務(wù)的界面設(shè)計(jì)以后,進(jìn)行評(píng)審,輸出給對(duì)應(yīng)的業(yè)務(wù)研發(fā),研發(fā)對(duì)于相應(yīng)的視覺(jué)界面進(jìn)行對(duì)應(yīng)的代碼化,使用組件的地方直接調(diào)用平臺(tái)代碼,剩下的由業(yè)務(wù)研發(fā)進(jìn)行代碼化。
優(yōu)點(diǎn)
組件由專門的UI設(shè)計(jì)師和研發(fā)團(tuán)隊(duì)負(fù)責(zé),當(dāng)出現(xiàn)設(shè)計(jì)變更以后,業(yè)務(wù)設(shè)計(jì)師可以快速通過(guò)組件庫(kù)更新最新的視覺(jué)樣式,同時(shí)和平臺(tái)研發(fā)對(duì)接,進(jìn)行代碼修改,而不需要每個(gè)業(yè)務(wù)研發(fā)單獨(dú)修改,大大減少了跨部門的協(xié)作溝通成本。
缺點(diǎn)
團(tuán)隊(duì)內(nèi)需要專門的設(shè)計(jì)師構(gòu)建設(shè)計(jì)系統(tǒng)并負(fù)責(zé)日常維護(hù)。
涉及角色
設(shè)計(jì)、交互團(tuán)隊(duì)。
痛點(diǎn)
由于需求的不確定性,以及車聯(lián)網(wǎng)項(xiàng)目周期較長(zhǎng)等特點(diǎn),會(huì)出現(xiàn)需求經(jīng)常變更的情況,那么交互就需要不停的更新交互文檔,UI也需要不停的輸出視覺(jué)文檔,往往一個(gè)項(xiàng)目結(jié)束以后,會(huì)有幾十份甚至上百份的設(shè)計(jì)文檔的情況出現(xiàn)。
協(xié)同方式
隨著云端化辦公軟件Figma的興起,為多角色協(xié)作提供了可能性,目前主流的工具有:Figma、MasterGo、Pixso、即時(shí)設(shè)計(jì)等在線軟件。
設(shè)計(jì)文件現(xiàn)在是一個(gè)鏈接,這意味著:
UI設(shè)計(jì)師不必再等到交互完成評(píng)審,輸出交互文檔以后進(jìn)行視覺(jué)設(shè)計(jì),交互和設(shè)計(jì)完全可以合二為一,輸出一份高保真交互流程文檔,并且輸出的文檔可以供研發(fā)直接瀏覽器查看,而不需要像之前一樣,不停的進(jìn)行設(shè)計(jì)資源的輸出。極大的節(jié)省了設(shè)計(jì)師輸出時(shí)間。優(yōu)化了協(xié)作工作流。
優(yōu)點(diǎn)
協(xié)作設(shè)計(jì),云端辦公,多角色參與。
一鍵獲取文件,不需要通過(guò)其他平臺(tái)轉(zhuǎn)化,步驟簡(jiǎn)單;自動(dòng)生成代碼與標(biāo)注。設(shè)計(jì)稿修改后自動(dòng)更新,無(wú)需重復(fù)下載。
缺點(diǎn)
云端保存,會(huì)有數(shù)據(jù)泄露的風(fēng)險(xiǎn)。
必須在線操作。
涉及角色
UE、UI、研發(fā)。
痛點(diǎn)
由于公司發(fā)展,業(yè)務(wù)線增加了很多適配線,這塊的工作基本上屬于:把已有的UI適配到另一個(gè)屏幕尺寸下,需要設(shè)計(jì)的地方不太多,需要花更多的時(shí)間去重新按照最新的屏幕尺寸搭建一遍UI界面,屬于用時(shí)間換業(yè)績(jī),為了達(dá)到這個(gè)目標(biāo),可以采取的方式大致分為兩種:
第一種是增加更多的人力,不管是招更多的人,還是增加更多的供應(yīng)商人員,都會(huì)增加業(yè)務(wù)支出,并且由于業(yè)務(wù)無(wú)法一直保證飽和,所以會(huì)出現(xiàn)一段時(shí)間忙的要命,招了很多人員,過(guò)了這段時(shí)間,業(yè)務(wù)不太多了,大家都閑了下來(lái),但是開(kāi)支還是必要的,所以這算是一種沒(méi)有辦法的辦法,對(duì)于團(tuán)隊(duì)或是公司來(lái)講,并不可持續(xù)。
另外一種方式就是重新梳理工作流,減少一些重復(fù)無(wú)意義的工作,比如像是系統(tǒng)設(shè)置等瀑布流式的界面,不同車型下的區(qū)別只來(lái)自于功能的有無(wú),界面上并無(wú)太大區(qū)別,這里所說(shuō)的工作,不僅僅指設(shè)計(jì)師的界面設(shè)計(jì)工作,同時(shí)也包括了研發(fā)同學(xué)的研發(fā)落地工作,同時(shí)因?yàn)檠邪l(fā)同學(xué)的適配,也會(huì)造成測(cè)試走查環(huán)節(jié),這些都是一些重復(fù)性的工作量,所以是否有一種更好的協(xié)作方式可以避免這種情況的發(fā)生呢?
答案就是我們接下來(lái)要講的一種全新的工作模式:C2D2C模式。
協(xié)同方式
由于設(shè)計(jì)團(tuán)隊(duì)在早期的發(fā)展中,積累了大量的設(shè)計(jì)資產(chǎn)。這些設(shè)計(jì)資產(chǎn)的沉淀就是設(shè)計(jì)標(biāo)準(zhǔn)化的基礎(chǔ),將設(shè)計(jì)資產(chǎn)轉(zhuǎn)為封裝好的代碼組件,也就是C2D的過(guò)程。然后將封裝好的組件通過(guò)低代碼平臺(tái)進(jìn)行屬性配置、搭建頁(yè)面、布局調(diào)整實(shí)現(xiàn)頁(yè)面的設(shè)計(jì)就是 D2C 的過(guò)程。通過(guò)平臺(tái)設(shè)定交互行為和綁定后臺(tái)數(shù)據(jù),完成整個(gè)系統(tǒng),最后再進(jìn)行站點(diǎn)發(fā)布,就實(shí)現(xiàn)了 C2D2C 的完整流程。
C2D2C(Code to design to design)的模式,簡(jiǎn)單講就是研發(fā)同學(xué)把設(shè)計(jì)資產(chǎn)通過(guò)設(shè)計(jì)標(biāo)準(zhǔn)化和研發(fā)工業(yè)化的方式完成代碼化,然后讓設(shè)計(jì)師調(diào)用已經(jīng)代碼化的設(shè)計(jì)資產(chǎn)進(jìn)行設(shè)計(jì)工作,這樣子當(dāng)設(shè)計(jì)師完成了界面設(shè)計(jì)的時(shí)候,相當(dāng)于同時(shí)完成了前端開(kāi)發(fā),接下來(lái)研發(fā)同學(xué)只需要根據(jù)拿到的界面添加簡(jiǎn)單的邏輯就算完成了研發(fā)工作,實(shí)現(xiàn)中后臺(tái)設(shè)計(jì)研發(fā)流程的整體提效。
優(yōu)點(diǎn)
由于樣式、組件已經(jīng)完成了代碼化,那么在適配工作中,控件組件化高的界面就可以直接生成代碼,不需要設(shè)計(jì)師重復(fù)設(shè)計(jì),同時(shí)由于減少了設(shè)計(jì)師和研發(fā)的參與,節(jié)省了大量溝通成本,也減少了很多因?yàn)槿藶橐蛩囟a(chǎn)生的bug。
由于設(shè)計(jì)師減少了重復(fù)工作量,可以有更多的時(shí)間集中在視覺(jué)表現(xiàn)上,有效提升了設(shè)計(jì)輸出的質(zhì)量,保證了產(chǎn)品的設(shè)計(jì)感。
對(duì)于大量適配項(xiàng)目的團(tuán)隊(duì),可以由設(shè)計(jì)師直接配置項(xiàng)目組件,無(wú)需經(jīng)過(guò)研發(fā),減少出錯(cuò)概率,極大提升工作效率。
缺點(diǎn)
前期需要研發(fā)同學(xué)代碼化基礎(chǔ)控件,所以需要投入人力、精力進(jìn)行前期的工作。
由于控件提前進(jìn)行了代碼化,后續(xù)可能會(huì)出現(xiàn)無(wú)法滿足業(yè)務(wù)需求等情況出現(xiàn),所以需要有人及時(shí)對(duì)代碼進(jìn)行維護(hù)更新。
涉及角色
產(chǎn)品、UE、UI、研發(fā)、測(cè)試。
痛點(diǎn)
基于上面講述的C2D2C模式,已經(jīng)完成了一個(gè)共享平臺(tái)的搭建,由于配置需要研發(fā)的參與,所以始終需要研發(fā)同學(xué)作為集成人員,并不利于其他角色的使用,那么怎么樣可以讓產(chǎn)品同學(xué),設(shè)計(jì)同學(xué),或者說(shuō)是普通用戶使用呢?
協(xié)同方式
一個(gè)優(yōu)秀的共享平臺(tái)是需要所有人都可以在其中使用的,所以,當(dāng)公司或者團(tuán)隊(duì)發(fā)展到穩(wěn)定階段,我們需要重構(gòu)工作流,以需求為導(dǎo)向,搭建全員工作平臺(tái),基于設(shè)計(jì)師和研發(fā)搭建的平臺(tái)基礎(chǔ)上,提煉需求,強(qiáng)化個(gè)性化和定制化,滿足品牌產(chǎn)品的個(gè)性化需求,具體來(lái)講,就是把UI界面中元素提煉出相應(yīng)的功能,生成功能清單,通過(guò)選擇不同的功能,生成相對(duì)應(yīng)的界面。
當(dāng)完整的共享平臺(tái)搭建完成以后,團(tuán)隊(duì)中的每個(gè)角色的工作內(nèi)容都發(fā)生了變化,產(chǎn)品的工作是構(gòu)建更多的需求,交互設(shè)計(jì)師的工作是構(gòu)建更多的交互形式,產(chǎn)品架構(gòu),UI設(shè)計(jì)師的工作是設(shè)計(jì)更多更好的界面布局,視覺(jué)表現(xiàn),然后研發(fā)把上述內(nèi)容通過(guò)代碼匯總進(jìn)我們的需求池中,擴(kuò)展我們的平臺(tái)豐富度。
HMI設(shè)計(jì)工作,就變成了:客戶在我們的配置面板中選擇需要的需求,喜歡的布局,想要的視覺(jué),點(diǎn)擊完成,就可以即刻看到高度定制化的一套系統(tǒng)。
優(yōu)點(diǎn)
讓每個(gè)人回歸工作的本質(zhì),不需要為了一些重復(fù)的繁雜的內(nèi)容而疲于奔命,做更有價(jià)值的工作,實(shí)現(xiàn)工作的價(jià)值
賦能行業(yè),可以滿足車企定制化的需求,提供車企一套完整的車機(jī)系統(tǒng)解決方案。
缺點(diǎn)
投入大,對(duì)于小體量的業(yè)務(wù)來(lái)講短期無(wú)法創(chuàng)造價(jià)值。
對(duì)于現(xiàn)在的行業(yè)環(huán)境,增速提效已經(jīng)達(dá)成了基本共識(shí),設(shè)計(jì)協(xié)同就成了一個(gè)大課題,但是不同的企業(yè),不同的團(tuán)隊(duì)面對(duì)的具體問(wèn)題不一樣,可使用的資源也不太一樣,那么采用哪種協(xié)同方式并無(wú)定式,需要根據(jù)實(shí)際情況,進(jìn)行具體分析,畢竟效率的提升是為了創(chuàng)造最大的價(jià)值。我們所有的努力最終目的是為了解決問(wèn)題,做正確的事。
作者:菘藍(lán)C 來(lái)源:站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)加微信ban_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
設(shè)計(jì)做到極致注重的就是對(duì)于細(xì)節(jié)的把控力,大廠的設(shè)計(jì)師之所以比較優(yōu)秀,就是他們具備很好的細(xì)節(jié)把控力。想要提高產(chǎn)品設(shè)計(jì)的能力,發(fā)現(xiàn)設(shè)計(jì)細(xì)節(jié)和思考設(shè)計(jì)深入的能力至關(guān)重要。
最近在體驗(yàn)產(chǎn)品的時(shí)候,發(fā)現(xiàn)了一些設(shè)計(jì)細(xì)節(jié)做得比較好的優(yōu)秀案例,分享給大家學(xué)習(xí)一下。
分享目錄
一、Banner 輪播轉(zhuǎn)場(chǎng)的品牌化
二、情感化的彈窗設(shè)計(jì)
三、最小化顯示提高空間利用率
四、動(dòng)態(tài)化的設(shè)置引導(dǎo)
五、沉浸式的活動(dòng)氛圍設(shè)計(jì)
六、人性化的提示設(shè)置
七、動(dòng)態(tài)感知的溫度設(shè)計(jì)
八、無(wú)處不在的廣告位開(kāi)發(fā)
九、主題化的圖標(biāo)設(shè)計(jì)
十、新穎的卡片式設(shè)計(jì)
一、Banner 輪播轉(zhuǎn)場(chǎng)的品牌化
立足于品牌做設(shè)計(jì),才能強(qiáng)化自身產(chǎn)品的差異化。如何在更多設(shè)計(jì)場(chǎng)景中融入品牌基因,是設(shè)計(jì)師需要深入思考的關(guān)鍵。
最近在使用騰訊視頻 APP 時(shí),發(fā)現(xiàn)首頁(yè) Banner 圖在輪播的轉(zhuǎn)場(chǎng)過(guò)程中,以品牌 LOGO 造型作為轉(zhuǎn)場(chǎng)過(guò)度。一個(gè)小小的細(xì)節(jié)強(qiáng)化了用戶對(duì)于品牌的記憶度,也體現(xiàn)出專屬的設(shè)計(jì)差異。
二、情感化的彈窗設(shè)計(jì)
通過(guò)彈窗設(shè)計(jì)可以提高用戶操作效率,也是傳播信息(活動(dòng)/廣告)最直觀的形式。但是體驗(yàn)多了用戶便會(huì)開(kāi)始排斥,提高彈窗的情感化設(shè)計(jì)變得尤為重要,降低用戶的排斥感才能提高彈窗的作用。
很多娛樂(lè)影視等 APP 都會(huì)有“青少年模式”彈窗提示,抖音將彈窗視覺(jué)表達(dá)融入了精美的國(guó)風(fēng)插畫。也通過(guò)針對(duì)性的內(nèi)容作為設(shè)置的引導(dǎo),提高了用戶對(duì)“青少年模式”的深入理解,增強(qiáng)了體驗(yàn)的積極性。
插畫的形式在彈窗設(shè)計(jì)中表現(xiàn)比較突出,比如嘀嗒出行 APP 將“推送通知”的彈窗設(shè)計(jì)運(yùn)用插畫增強(qiáng)情感化表達(dá)。相較于生硬的表達(dá)方式用戶更能接受,通過(guò)營(yíng)銷的文案引導(dǎo)用戶授權(quán),提高了產(chǎn)品的感官體驗(yàn)。
三、最小化顯示提高空間利用率
對(duì)于工具型產(chǎn)品不同用戶的操作焦點(diǎn)不同,更多定制化的體驗(yàn)才能提高用戶的操作效率。
釘釘 APP 在協(xié)作欄目中,默認(rèn)展示的各類工具可以進(jìn)行收起,實(shí)現(xiàn)最小化顯示。用戶可以根據(jù)使用習(xí)慣和操作方式選擇收起/展開(kāi),提高了當(dāng)前空間的利用率,自定義的功能設(shè)計(jì)可以提高用戶的操作體驗(yàn)。
四、動(dòng)態(tài)化的設(shè)置引導(dǎo)
為了提高用戶隱私權(quán)益,手機(jī)系統(tǒng)針對(duì)產(chǎn)品調(diào)用權(quán)限進(jìn)行了阻力設(shè)計(jì),需要用戶的授權(quán)操作。提高用戶的各類功能授權(quán)就需要設(shè)計(jì)師探索,降低用戶的排斥感和提高授權(quán)的利好政策才能獲得授權(quán)。
抖音在引導(dǎo)用戶開(kāi)啟通知權(quán)限的設(shè)計(jì)中,采用了動(dòng)態(tài)畫面的表達(dá)來(lái)強(qiáng)調(diào)開(kāi)啟通知的利好政策,以此來(lái)攻破用戶的心理防備。相較于生硬的彈窗提示,動(dòng)態(tài)的表達(dá)和引導(dǎo)性的文案更能拉近與用戶的距離感。
五、沉浸式的活動(dòng)氛圍設(shè)計(jì)
沉浸式的體驗(yàn)可以帶給用戶更好的場(chǎng)景感,提高用戶的參與度。在活動(dòng)的設(shè)計(jì)中,不斷向游戲化和沉浸式方向加強(qiáng)體驗(yàn),提高活動(dòng)的趣味性和強(qiáng)化用戶參與的積極性。
騰訊視頻在情人節(jié)的互動(dòng)活動(dòng)設(shè)計(jì)中,就將搶紅包的活動(dòng)融入到當(dāng)前的界面中,紅包雨鋪滿整個(gè)屏幕,以趣味性的形式滿足用戶心理。不隔斷與界面之間的聯(lián)系,降低活動(dòng)對(duì)用戶的干擾,進(jìn)而提高活動(dòng)氛圍感和參與度。
六、人性化的提示設(shè)置
短視頻近些年改變了大家的生活方式和娛樂(lè)形式,也有用戶容易過(guò)度依賴進(jìn)而影響休息質(zhì)量。
抖音作為短視頻領(lǐng)域的頭部產(chǎn)品之一,在增強(qiáng)用戶體驗(yàn)的同時(shí)也要起到良性的引導(dǎo)作用。當(dāng)用戶刷短視頻一定時(shí)間后會(huì)彈窗提示休息,而提示時(shí)間用戶可以根據(jù)自己的實(shí)際情況進(jìn)行設(shè)置,靈活的設(shè)置可以讓用戶合理分配時(shí)間。健康使用的引導(dǎo)可以讓用戶感受到產(chǎn)品的溫度,提高用戶體驗(yàn)的認(rèn)可度。
七、動(dòng)態(tài)感知的溫度設(shè)計(jì)
天氣預(yù)報(bào)是用戶關(guān)注度較高的信息,對(duì)于溫度的感知可以讓我們出行更容易把控。在產(chǎn)品中顯示天氣情況也是一種情感化的升級(jí),可以帶給用戶更有溫度的體驗(yàn)。
利用餓了么 APP 點(diǎn)餐之后,首頁(yè)會(huì)顯示配送情況和當(dāng)前的天氣溫度,背景以動(dòng)態(tài)的天氣畫面增強(qiáng)視覺(jué)感知。也希望用戶可以根據(jù)天氣情況對(duì)外賣員多一份理解,加強(qiáng)人與人之間的寬容心,帶給用戶更強(qiáng)的情感化體驗(yàn)。
最近在使用愛(ài)奇藝 APP 時(shí),發(fā)現(xiàn)左上角的品牌位置也結(jié)合了天氣情況,結(jié)合頂部視覺(jué)區(qū)域的流體漸變,新增的天氣預(yù)報(bào)和品牌 LOGO 完美的通過(guò)動(dòng)效過(guò)度。整個(gè)設(shè)計(jì)表達(dá)流暢自然,感官體驗(yàn)也是非常值得學(xué)習(xí)的。
八、無(wú)處不在的廣告位開(kāi)發(fā)
廣告是眾多產(chǎn)品實(shí)現(xiàn)流量變現(xiàn)的方式之一,廣告位的開(kāi)發(fā)也是見(jiàn)縫插針,如何在僅有的空間增加更多廣告位,產(chǎn)品設(shè)計(jì)師也在不斷探索。
最近在使用騰訊視頻 APP 時(shí),進(jìn)入到個(gè)人中心時(shí)會(huì)默認(rèn)有個(gè)下拉廣告。這個(gè)見(jiàn)縫插針的廣告位新增,對(duì)于設(shè)計(jì)師來(lái)說(shuō)讓我感受到了廣告的無(wú)處不在,不過(guò)對(duì)于用戶來(lái)說(shuō)是否會(huì)心生排斥感得通過(guò)數(shù)據(jù)去驗(yàn)證。但是作為產(chǎn)品設(shè)計(jì)師這也是一個(gè)啟發(fā),將有限的空間進(jìn)行深度開(kāi)發(fā),還不會(huì)影響已有的結(jié)構(gòu)布局,這也是一個(gè)啟發(fā)性的案例。
九、主題化的圖標(biāo)設(shè)計(jì)
圖標(biāo)是產(chǎn)品中不可或缺的存在,圖標(biāo)設(shè)計(jì)的研究也是設(shè)計(jì)師需要重點(diǎn)對(duì)待的技能范圍。精美的圖標(biāo)不僅可以提高產(chǎn)品的感官體驗(yàn),也能吸引用戶的關(guān)注度,進(jìn)而提高業(yè)務(wù)模塊的點(diǎn)擊欲。
最近在使用順豐速運(yùn)小程序時(shí),寄快遞欄目的各業(yè)務(wù)入口圖標(biāo)設(shè)計(jì)非常引人注目,結(jié)合主題化的圖標(biāo)設(shè)計(jì)突出了活動(dòng)傳播力度。對(duì)于工具型產(chǎn)品而言,強(qiáng)化氛圍感可以打破用戶原有的認(rèn)知,不僅可以突出活動(dòng)主題,也能強(qiáng)化用戶對(duì)產(chǎn)品的視覺(jué)感知。
十、新穎的卡片式設(shè)計(jì)
卡片式設(shè)計(jì)已經(jīng)流行好幾年了,目前依然是非常普及的 UI 設(shè)計(jì)趨勢(shì)之一。如何進(jìn)一步強(qiáng)化卡片式設(shè)計(jì)的創(chuàng)新度,我們需要不斷的嘗試和總結(jié)。
嘩哩嘩哩 APP 的創(chuàng)作中心設(shè)計(jì)也許是一個(gè)不錯(cuò)的啟發(fā),卡片內(nèi)部右上角的視覺(jué)強(qiáng)化使得原本普通的表達(dá)變得更有視覺(jué)感。突出的設(shè)計(jì)也成功的吸引了 UP 主的注意力,強(qiáng)化了該入口的點(diǎn)擊欲。這樣的設(shè)計(jì)表達(dá)在保留卡片式設(shè)計(jì)的基礎(chǔ)上,也是一種新穎的視覺(jué)表現(xiàn),可以作為突出業(yè)務(wù)入口的表現(xiàn)方式進(jìn)行探索。
作者:黑馬青年 來(lái)源:站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)加微信ban_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
眾所周知,「用戶體驗(yàn)五要素」出自Jesse James Garrett 的《用戶體驗(yàn)要素》一書:戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層。
產(chǎn)品設(shè)計(jì)者和開(kāi)發(fā)者的角度可以對(duì)應(yīng)理解為:為什么做、做到什么程度、這些東西如何組成、規(guī)劃用戶操作行為、如何呈現(xiàn)這些東西。
「Live Activities設(shè)計(jì)規(guī)范」由蘋果出品,原文為英文,上一篇已翻譯https://www.yuque.com/viola-ddvdh/yb7quv/uwdod71707e4nez8。上篇也提到了個(gè)人對(duì)其內(nèi)容的敘述方式存在一點(diǎn)意見(jiàn)。為了更好的記住&理解「Live Activities設(shè)計(jì)規(guī)范」,使用比較熟悉的「用戶體驗(yàn)五要素」對(duì)內(nèi)容進(jìn)行整理。
原文提供的Live Activity定義如下:
“A Live Activity displays up-to-date information from your app, allowing people to view the progress of events or tasks at a glance.”
“Live Activities help people keep track of tasks and events that they care about, offering persistent locations for displaying information that updates frequently. ”
從原文可以提煉出Live Activity顯示特點(diǎn):
1. 內(nèi)容是頻繁更新的、有進(jìn)度/狀態(tài)顯示的、用戶關(guān)心的。
2. 內(nèi)容的信息量是一眼就能看完的程度。
但上述仍是表象,并非實(shí)質(zhì),接下來(lái)思考這幾個(gè)問(wèn)題:
1. 為什么顯示的是進(jìn)度/狀態(tài)頻繁更新的內(nèi)容?
2. 為什么要強(qiáng)調(diào)用戶關(guān)心的?
3. 為什么信息量是一眼就能看完的程度?
沒(méi)有Live Activity時(shí),頻繁更新主要靠push推送。但push容易被其他APP的push覆蓋,且隨著各種APP的頻繁使用,用戶獲取關(guān)鍵信息的效率和通過(guò)push打開(kāi)APP的次數(shù)反而在下降。
進(jìn)度/狀態(tài)頻繁更新的內(nèi)容,說(shuō)明每個(gè)狀態(tài)存在的時(shí)間短,如果被覆蓋/忽略,同一狀態(tài)就不再?gòu)?fù)現(xiàn),用戶所關(guān)心的,或APP所希望用戶關(guān)心的,就看不到了。比如:什么時(shí)候取外賣、待付款、上傳成功等等。
當(dāng)下我們所處的時(shí)代是信息泛濫的時(shí)代,需要對(duì)信息作精簡(jiǎn),但用戶的操作是可以多條線進(jìn)行的,比如比如邊看劇邊吃飯、上班摸魚(yú)/等外賣、比如聽(tīng)音樂(lè)的時(shí)候?qū)懽鳌?
信息內(nèi)容和量是官網(wǎng)一直在強(qiáng)調(diào)的,需要精簡(jiǎn),只展示用戶需要的,基本達(dá)到一眼看完的程度,目的就是知道變化的是什么,當(dāng)前狀態(tài)是什么。
分析了這么多,大膽推測(cè)一下Live Activity的設(shè)計(jì)初衷是:快&準(zhǔn)確&輕。而終極目的是打動(dòng)用戶,形成好體驗(yàn),進(jìn)而推動(dòng)口碑和銷售;為各APP提供新的通知形式,互惠互利。當(dāng)然Live Activity在一定程度上也彌補(bǔ)了硬件上的缺憾。
關(guān)于這個(gè)層次相當(dāng)于規(guī)定功能范圍&信息邊界限制,就是什么要,什么不能要。這部分的信息官網(wǎng)給出許多,在此將其分類梳理如下,為避免大家不好查找官網(wǎng)/譯文對(duì)應(yīng)出處,在句未已標(biāo)注。
1. 僅iPhone支持,iPadOS、macOS、tvOS或watchOS不支持。(源自:平臺(tái)注意事項(xiàng))
2. 非iPhone14的僅針對(duì)iOS16有鎖屏Live Activity展示。(源自:什么是Live Activity-鎖屏)
3. 支持用戶手動(dòng)清除鎖屏狀態(tài)下的Live Activity。(源自:實(shí)際操作)
4. 支持用戶直接關(guān)閉對(duì)應(yīng)APP的Live Activity。(源自:最佳實(shí)踐方式第3/c條)
5. 支持Live Activity自動(dòng)開(kāi)始&結(jié)束。(源自:最佳實(shí)踐方式第6/f條)
6. 限制跟蹤活動(dòng)/狀態(tài)時(shí)長(zhǎng)不超過(guò)8小時(shí)。(源自:最佳實(shí)踐方式第1/a條)
7. 限制活動(dòng)/進(jìn)程結(jié)束后展示時(shí)長(zhǎng)不超過(guò)4小時(shí)。(源自:最佳實(shí)踐方式第8/h條)
8. 支持更改背景顏色&不透明度。(源自:設(shè)計(jì)有用的Live Activity第5/e條)
9. 限制內(nèi)容布局。(源自:設(shè)計(jì)有用的Live Activity第5/e條)
10. 限制不同設(shè)備的展示尺寸。(源自:規(guī)范)
1. 避免在Live Activity中顯示敏感信息。(源自:最佳實(shí)踐方式第4/d條)
2. 避免在Live Activity中顯示廣告和促銷活動(dòng)。(源自:最佳實(shí)踐方式第5/e條)
3. 只提供正在進(jìn)行的任務(wù)/事件的關(guān)鍵摘要。(源自:最佳實(shí)踐方式第2/b條)
4. 在任務(wù)/活動(dòng)結(jié)束前,給用戶提供關(guān)閉Live Activity按鈕。(源自:最佳實(shí)踐方式第6/f條)
5. 點(diǎn)擊Live Activity直接定位到對(duì)應(yīng)頁(yè)面,無(wú)需用戶二次導(dǎo)航。(源自:最佳實(shí)踐方式第7/g條)
6. 考慮在活動(dòng)結(jié)束后,鎖屏上在合理時(shí)段后自動(dòng)刪除Live Activity。(源自:最佳實(shí)踐方式第8/g條)
(個(gè)人猜測(cè))由于是提供一個(gè)展示區(qū)域,且展示區(qū)域有限,所以對(duì)于層級(jí)架構(gòu),一級(jí)展示什么,二級(jí)展示什么,各階段展示什么,這些都沒(méi)有做明確規(guī)定&建議。各家APP可以根據(jù)自身實(shí)際情況進(jìn)行設(shè)計(jì)。
通過(guò)Live Activity的展示形式,可以總結(jié)為2點(diǎn):吸引、查看(摘要&詳情)。
1. 一般是在原深感攝像頭兩側(cè)展示(電話會(huì)直接展示擴(kuò)展型),分為緊湊型和最小化。
2. 緊湊型在僅有一個(gè)活動(dòng)/事件的時(shí)候展示,雖被原深感攝像頭分割兩端,但僅作為一條信息展示,為了視覺(jué)上的統(tǒng)一,這里的顏色不支持開(kāi)發(fā)設(shè)置,使用的是系統(tǒng)默認(rèn)色值。
3. 最小化在存在多個(gè)活動(dòng)的時(shí)候展現(xiàn),左側(cè)和原深感攝像頭粘連,右側(cè)獨(dú)立成島。
4. 不管是緊湊型,還是最小化,都可以通過(guò)點(diǎn)擊原深感攝像頭區(qū)域,進(jìn)入APP內(nèi)頁(yè),或者長(zhǎng)按喚出擴(kuò)展型。
1. 進(jìn)入內(nèi)頁(yè)的查看基本就是各家顯神通了,這里主要講擴(kuò)展型和鎖屏。
2. 原則上是不支持在擴(kuò)展型和鎖屏做復(fù)雜操作的,基本點(diǎn)擊是進(jìn)入APP。
3. 擴(kuò)展型是用戶長(zhǎng)按緊湊型/最小化喚起的展示區(qū)域,內(nèi)容是可以自定義的,當(dāng)然官方也給了相應(yīng)的建議,具體如下。內(nèi)容信息種類多的可以采用這種信息左中右排布,底部預(yù)留大按鈕。內(nèi)容信息少的可以采用左內(nèi)容右操作的方式。
4. 根據(jù)一致性原則,鎖屏展示的布局框架應(yīng)該與擴(kuò)展型差不多,同樣可以點(diǎn)擊打開(kāi)APP。只是在鎖屏狀態(tài)如果有多個(gè)任務(wù)同時(shí)進(jìn)行,是會(huì)全部展示的,所以要注意品牌的傳遞,避免用戶混淆服務(wù)方。
對(duì)于如何呈現(xiàn)這些東西,蘋果還是寫了很多建議,確保視覺(jué)上的一致性和美觀。
1. 緊湊型狀態(tài)下,為了保證兩側(cè)信息的連貫,除了語(yǔ)句閱讀連貫,還需要在圖形和顏色上具有一致性,視覺(jué)上連貫。
2. 鎖屏狀態(tài)下的背景是可以自定義顏色、圖像、不透明度的,當(dāng)然文字的色值和不透明度也是可以定義的。這就涉及到兩者間的對(duì)比度對(duì)信息閱讀的影響。
3. 設(shè)計(jì)師不僅要考慮最佳狀態(tài),還有深色&淺色模式下的,以及不同環(huán)境光、設(shè)備亮度下的顯示。還有一點(diǎn)很容易忽視的,就是在用戶自定義的墻紙下顯示的效果。不僅要注意信息獲取,還需要考慮美感問(wèn)題。
1. 緊湊型和擴(kuò)展型之間的布局要保持一致,兩者間的變化過(guò)渡效果是可以預(yù)測(cè)的。
2. 一般來(lái)說(shuō),擴(kuò)展型和鎖屏狀態(tài)下的信息間標(biāo)準(zhǔn)間距是20pt。
3. 在某些情況下,例如圖形和按鈕,您可能需要使用更緊湊的邊距,以避免擠滿邊緣或形成混亂的外觀。
1. 內(nèi)容和Live Activity邊緣之間的邊距需要保持一致,請(qǐng)遵循SwiftUI規(guī)則。
1內(nèi)容和Live Activity邊緣之間的邊距需要保持一致,,發(fā)現(xiàn)以圓角邊界為測(cè)距點(diǎn)得到的間距關(guān)系較為舒適。即:圓形/大致為圓形的圖形保持上下,3. 以及左側(cè)或者右側(cè)間距一致即可;方形/大致為方形的圖形保持圓角邊界與容器圓角邊界垂直對(duì)齊即可。同一位置的多個(gè)圖形圓角需要相對(duì)統(tǒng)一,才能確保間距的一致性。
需要適應(yīng)不同機(jī)型的尺寸。具體的尺寸規(guī)范如下。
動(dòng)態(tài)島使用44個(gè)點(diǎn)的角半徑,其圓角形狀與原深感攝像頭相匹配。
下表中列出的所有值均以pt為單位。
ps:左側(cè)為寬度,右側(cè)為高度。
以上就是整理分析的全部。
在整理分析過(guò)程中加強(qiáng)了對(duì)「用戶體驗(yàn)5要素」各個(gè)層劃分的理解,也對(duì)Live Activity在各個(gè)層次上的要求更加明確。
企業(yè)級(jí)B端產(chǎn)品具有行業(yè)壁壘高、業(yè)務(wù)復(fù)雜、服務(wù)角色多等特點(diǎn),在大型迭代項(xiàng)目中,如何做好設(shè)計(jì)協(xié)同,把握設(shè)計(jì)一致性和還原度常常讓很多設(shè)計(jì)團(tuán)隊(duì)感覺(jué)無(wú)從下手,找不到切入點(diǎn)。在長(zhǎng)期的項(xiàng)目實(shí)踐中我們發(fā)現(xiàn),做好設(shè)計(jì)規(guī)范能規(guī)范可以幫助個(gè)人、團(tuán)隊(duì)以及整個(gè)企業(yè)提高效率和產(chǎn)出質(zhì)量,保障用戶體驗(yàn)統(tǒng)一。
那么,我們?cè)撊绾巫龊皿w驗(yàn)標(biāo)準(zhǔn)化,保障基礎(chǔ)體驗(yàn)一致性?下面將和大家分享我們公司在構(gòu)建設(shè)計(jì)規(guī)范的實(shí)踐案例。
以我們?cè)O(shè)計(jì)團(tuán)隊(duì)為例,隨著業(yè)務(wù)不斷擴(kuò)大,定制化需求不斷增加,大型迭代項(xiàng)目做不好設(shè)計(jì)和開(kāi)發(fā)協(xié)同,導(dǎo)致出現(xiàn)“體驗(yàn)一致性差”“設(shè)計(jì)效率低”“還原度不可控”等問(wèn)題。如何有效解決這些問(wèn)題呢?可以通過(guò)構(gòu)建設(shè)計(jì)規(guī)范,以保證一致性,實(shí)現(xiàn)工作提效。
從不同角度出發(fā),構(gòu)建設(shè)計(jì)規(guī)范都能發(fā)揮積極的作用。
對(duì)企業(yè)來(lái)說(shuō):有利于實(shí)現(xiàn)產(chǎn)品經(jīng)理、設(shè)計(jì)和研發(fā)的輸出一致。設(shè)計(jì)側(cè)主動(dòng)建立產(chǎn)品設(shè)計(jì)規(guī)范,很大程度上是為了做好設(shè)計(jì)管控,實(shí)現(xiàn)原型、設(shè)計(jì)稿到線上頁(yè)面統(tǒng)一的設(shè)計(jì)語(yǔ)言,從根本上提升設(shè)計(jì)質(zhì)量和還原度,提高用戶滿意度。
對(duì)個(gè)人來(lái)說(shuō):當(dāng)多個(gè)設(shè)計(jì)師共同協(xié)作同一項(xiàng)目時(shí),由于設(shè)計(jì)理解不一致等原因,容易出現(xiàn)設(shè)計(jì)控件使用混亂等問(wèn)題。若有詳細(xì)的設(shè)計(jì)規(guī)范作為引導(dǎo),有利于實(shí)現(xiàn)產(chǎn)品各個(gè)模塊間的一致性。組件化的工具也能減少機(jī)械重復(fù)性的工作,讓設(shè)計(jì)師將更多精力投入到用戶研究和提升用戶體驗(yàn)上。
產(chǎn)品有不同發(fā)展階段,設(shè)計(jì)規(guī)范同樣也有,不同階段下的產(chǎn)品目標(biāo)和規(guī)范需要覆蓋的內(nèi)容都不盡相同。我們要既要避免做多,保證投入產(chǎn)出比最大化;同時(shí)也要構(gòu)建一個(gè)合理的規(guī)范迭代思路。
該階段的產(chǎn)品核心目標(biāo)是「驗(yàn)證產(chǎn)品或商業(yè)模型」,業(yè)務(wù)需求都是小步快跑、頻繁迭代。產(chǎn)品處于從0到1的野蠻生長(zhǎng)狀態(tài),存在著“先滿足功能,再優(yōu)化體驗(yàn)”的情況,導(dǎo)致該階段的產(chǎn)品體驗(yàn)往往不太過(guò)關(guān)。
搭建目的:通過(guò)定義原則,梳理關(guān)鍵頁(yè)面和流程,搭建基本的規(guī)范框架。既讓團(tuán)隊(duì)對(duì)產(chǎn)品有統(tǒng)一的設(shè)計(jì)價(jià)值觀和認(rèn)知判斷;從頁(yè)面到流程,又能對(duì)應(yīng)設(shè)計(jì)參照標(biāo)準(zhǔn);同時(shí)業(yè)務(wù)可以在規(guī)定的框架下發(fā)展,不僅讓產(chǎn)品體驗(yàn)的根基牢固,而且不會(huì)限制功能設(shè)計(jì)自由。
搭建范圍:「全局說(shuō)明」「頁(yè)面布局」「通用流程」
該階段的產(chǎn)品基本形態(tài)已穩(wěn)定,也形成了初步的模型結(jié)構(gòu)。后續(xù)迭代是在現(xiàn)有結(jié)構(gòu)的基礎(chǔ)上,進(jìn)行增加或優(yōu)化功能。雖然探索期定義了產(chǎn)品原則、布局和流程,但探索期產(chǎn)品的自由生長(zhǎng),會(huì)導(dǎo)致不少設(shè)計(jì)細(xì)節(jié)不一致,從而影響了產(chǎn)品整體的體驗(yàn)和效率。
搭建目的:通過(guò)回溯整理過(guò)往設(shè)計(jì),沉淀優(yōu)化成完整的交互規(guī)范。再根據(jù)規(guī)范統(tǒng)一產(chǎn)品體驗(yàn),進(jìn)一步優(yōu)化流程和效率, 讓整個(gè)產(chǎn)品體驗(yàn)達(dá)到相對(duì)穩(wěn)定的狀態(tài)。
搭建范圍:「全局說(shuō)明」「頁(yè)面布局」「通用流程」「基礎(chǔ)組件」「業(yè)務(wù)組件」
好的設(shè)計(jì)規(guī)范有很多優(yōu)秀的例子,例如Google、Apple、Microsoft這些引領(lǐng)全球設(shè)計(jì)風(fēng)尚的公司,設(shè)計(jì)規(guī)范已經(jīng)上升為設(shè)計(jì)語(yǔ)言,指導(dǎo)旗下所有產(chǎn)品的設(shè)計(jì)。國(guó)內(nèi)做的優(yōu)秀的案例,比如Ant Design,Element,arco.design等,像這類的產(chǎn)品已經(jīng)實(shí)現(xiàn)了端到端的體驗(yàn)一致,把交互、前端和視覺(jué)的事情一并解決了,是值得學(xué)習(xí)的典范。這些優(yōu)秀的設(shè)計(jì)規(guī)范都包含以下幾個(gè)特點(diǎn):靈活性,可擴(kuò)展性,系統(tǒng)性和標(biāo)準(zhǔn)性。
一般團(tuán)隊(duì)內(nèi)部構(gòu)建的設(shè)計(jì)規(guī)范都源于某一產(chǎn)品或者業(yè)務(wù),因?yàn)橹饕菆F(tuán)隊(duì)內(nèi)部成員使用,追求的是投入產(chǎn)出比最大化。所以可在行業(yè)通用設(shè)計(jì)規(guī)范的基礎(chǔ)上,適度參考行業(yè)設(shè)計(jì)規(guī)范,能復(fù)用的直接參考,同時(shí)專注于業(yè)務(wù)本身,具有業(yè)務(wù)特性的再集合業(yè)務(wù)綜合考慮,使整個(gè)規(guī)范制定效率更高,科學(xué)性、指導(dǎo)性更強(qiáng)。
設(shè)計(jì)規(guī)范的執(zhí)行和推動(dòng)主要分為四大步驟:
類型梳理:分析業(yè)務(wù)場(chǎng)景,整理和歸類組件,評(píng)估具體組件優(yōu)先級(jí)和迭代計(jì)劃;
全局說(shuō)明:統(tǒng)一布局,色板,字體,常用樣式,規(guī)范設(shè)計(jì)語(yǔ)言;
抽象設(shè)計(jì):將設(shè)計(jì)共性抽象出來(lái),構(gòu)建組件通用方案;
效果驗(yàn)證:通過(guò)定性/定量數(shù)據(jù)追蹤效果,分析原因,迭代改進(jìn);
收集現(xiàn)有設(shè)計(jì)頁(yè)面,分析業(yè)務(wù)場(chǎng)景,再參考行業(yè)通用規(guī)范的定義,整理和歸類組件,可以先羅列完整,再根據(jù)產(chǎn)品實(shí)際業(yè)務(wù)需要進(jìn)行增刪改。
全局說(shuō)明:明確影響整站各個(gè)模塊、各個(gè)頁(yè)面設(shè)計(jì)的原則和規(guī)范,指導(dǎo)我們后續(xù)各種規(guī)范的定義和設(shè)計(jì)。包括統(tǒng)一布局,色板,字體,樣式等設(shè)計(jì)規(guī)則。
基礎(chǔ)組件:可參考行業(yè)通用規(guī)范中的基礎(chǔ)組件分類和組成,因?yàn)榇蟛糠只A(chǔ)組件都具有一定的通用性,站在巨人的肩膀上更高效。這里我們根據(jù)實(shí)際情況,將基礎(chǔ)組件分為導(dǎo)航,通用,數(shù)據(jù)展示,數(shù)據(jù)錄入,反饋5個(gè)大模塊,每個(gè)模塊下再細(xì)分各小類,構(gòu)成基礎(chǔ)組件的類目。
業(yè)務(wù)組件:根據(jù)業(yè)務(wù)需求,可以定義屬于自己的業(yè)務(wù)組件,這也是區(qū)別于其他通用行業(yè)組件庫(kù)的一個(gè)核心部分。
因?yàn)樵诖篌w量產(chǎn)品設(shè)計(jì)中,每個(gè)模塊都由不同的同學(xué)負(fù)責(zé),這樣全局產(chǎn)品的把握就會(huì)降低,需要去補(bǔ)充全局規(guī)范說(shuō)明去維持產(chǎn)品全局通用部分的一致性。包括布局,色彩規(guī)范,字體,樣式等;
抽象設(shè)計(jì)是設(shè)計(jì)規(guī)范中最核心,工作量最大,難度最高的一個(gè)環(huán)節(jié)。我們可以將它拆解成幾個(gè)部分,先做出基礎(chǔ)組件,再基于基礎(chǔ)組件和業(yè)務(wù)需求抽象設(shè)計(jì)業(yè)務(wù)組件,最后抽象成頁(yè)面模板。
基礎(chǔ)組件
組件庫(kù)的搭建,就一定要提到原子思維。道爾頓原子論認(rèn)為,物質(zhì)世界的最小單位是原子,原子是單一的,獨(dú)立的,不可被分割的,在化學(xué)變化中保持著穩(wěn)定的狀態(tài)。這個(gè)原子理論同樣適用于設(shè)計(jì)系統(tǒng)中。
其中,最小單位設(shè)計(jì)元素就是基礎(chǔ)組件。我們?cè)谧鲈O(shè)計(jì)系統(tǒng)的時(shí)候希望當(dāng)你改動(dòng)任何一個(gè)原子,你有自信其他所有依賴于這個(gè)原子的部件全部自動(dòng)更新。只有滿足了這一點(diǎn),設(shè)計(jì)系統(tǒng)設(shè)想中的效率、解放生產(chǎn)力才會(huì)真正實(shí)現(xiàn)。例如,在sketch中,分享樣式和嵌套符號(hào)的使用。
業(yè)務(wù)組件
在構(gòu)建完基礎(chǔ)組件后,可以根據(jù)業(yè)務(wù)需求,將使用頻率較高的組件進(jìn)行評(píng)估,抽象成業(yè)務(wù)組件。
一般業(yè)務(wù)組件可分成兩大類:
一類是由多個(gè)基礎(chǔ)組件組成的帶有業(yè)務(wù)需求復(fù)合組件,如:復(fù)合標(biāo)簽,快捷時(shí)間選擇器等;
另一類是針對(duì)特定業(yè)務(wù)場(chǎng)景的業(yè)務(wù)組件:如地圖,站點(diǎn)等;
頁(yè)面模版
在完成基礎(chǔ)組件和業(yè)務(wù)組件的構(gòu)建后,我們可以根據(jù)全局說(shuō)明,利用組件搭建頁(yè)面模板。頁(yè)面模版不僅能有效的提升組件的使用效率,也能提供很好的組件使用示范效應(yīng),加強(qiáng)設(shè)計(jì)說(shuō)明和組件之間的結(jié)合。
組件質(zhì)量評(píng)估:從物理到行為層,包括樣式、組件、框架、組件交互 共4個(gè)維度。通過(guò)一致性評(píng)分衡量標(biāo)準(zhǔn)化覆蓋的好壞。
系統(tǒng)應(yīng)用層面的評(píng)價(jià):
系統(tǒng)是否幫助業(yè)務(wù)提效;
當(dāng)業(yè)務(wù)不能直接應(yīng)用系統(tǒng),能否靈活改動(dòng);
系統(tǒng)是否幫助業(yè)務(wù)變得更有競(jìng)爭(zhēng)力、更創(chuàng)新;
迭代機(jī)制
當(dāng)我們完成設(shè)計(jì)規(guī)范的整體構(gòu)建后,對(duì)于新需求,通過(guò)評(píng)估復(fù)用性、通用性和優(yōu)先級(jí),低級(jí)別的走定制設(shè)計(jì)完成交付。高級(jí)別的通過(guò)抽象設(shè)計(jì)、內(nèi)審、沉淀到組件庫(kù)中。
機(jī)制提效
在完成設(shè)計(jì)規(guī)范的構(gòu)建后,我們可以聯(lián)合產(chǎn)品經(jīng)理和前端工程師,幫助每個(gè)環(huán)節(jié)的人員快速搭建產(chǎn)出物,推動(dòng)上下游機(jī)制提效。
例如,我們會(huì)基于設(shè)計(jì)規(guī)范,為產(chǎn)品經(jīng)理提供符合設(shè)計(jì)規(guī)范的Axure元件庫(kù),產(chǎn)品經(jīng)理使用元件庫(kù),可以快速搭建原型,產(chǎn)出prd,與設(shè)計(jì)師、開(kāi)發(fā)的溝通也更加順暢。簡(jiǎn)單的修改可以跳過(guò)設(shè)計(jì)師出圖這一步驟,直接和開(kāi)發(fā)溝通,極大加快前期的節(jié)奏。甚至通過(guò)借助元件庫(kù),產(chǎn)品經(jīng)理可以搭建出高保真原型,用于直接和用戶確認(rèn)或者給客戶進(jìn)行demo的演示。
基于設(shè)計(jì)規(guī)范,推動(dòng)研發(fā)實(shí)現(xiàn)組件代碼化,通過(guò)設(shè)計(jì)標(biāo)準(zhǔn)化可以達(dá)到研發(fā)工業(yè)化。通過(guò)定義標(biāo)準(zhǔn)規(guī)范,提高流程、組件的復(fù)用率,開(kāi)發(fā)側(cè)就可以制定相應(yīng)組件,形成前端腳手架,方便后期迭代的組件化使用,有效地避免不必要的分歧點(diǎn)和重復(fù)造輪子,同時(shí)減少上線前設(shè)計(jì)走查、測(cè)試的工作量,保證落地效果,提升生產(chǎn)力。
以上就是我們?cè)跇?gòu)建自己的企業(yè)設(shè)計(jì)規(guī)范的流程,最后,給大家展示一下,我們目前的企業(yè)設(shè)計(jì)規(guī)范和部分應(yīng)用情況。
如何讓自己的產(chǎn)品在保證基本的可用性和易用性的同時(shí),還能讓界面看起來(lái)柔和、更富有親和力?一個(gè)產(chǎn)品能留住用戶的雖然是內(nèi)容本身的質(zhì)量與吸引力,但一個(gè)小小的細(xì)節(jié)卻能夠阻止用戶的流失,成為內(nèi)容轉(zhuǎn)化的最后一道防線,讓人眼前一亮,值得借鑒。
體驗(yàn)?zāi)夸洠?/strong>
01. 【剪映】化繁為簡(jiǎn),突破性的C端深度編輯交互界面!
02.【剪映】組合操作,簡(jiǎn)化界面跳轉(zhuǎn)的“批量編輯”
03.【必剪】軌道按鈕文案自適應(yīng)滑動(dòng)跟隨
04.【剪映/IOS】首頁(yè)新增(試試看)教程專區(qū)板塊,快速入門軟件
05.【剪映】“剪同款”功能,讓用戶快速出片
06.【剪映】上滑升起列表,讓用戶查看選擇更加直觀
07.【剪映】不同類型的模塊,分區(qū)展示
08.【剪映】選中特效后,自動(dòng)播放(特效預(yù)覽效果)
09.【剪映】濾鏡功能“單行瀏覽”的原因以及必要性
產(chǎn)品體驗(yàn):
在此前,用戶想要對(duì)視頻進(jìn)行剪輯操作,用戶大多都需要使用電腦的Ae、Pr等剪輯軟件,此類軟件體量大,操作門檻高,而且需要有電腦的存在,在人手一臺(tái)智能手機(jī)的今天,剪映等專業(yè)剪輯APP的出現(xiàn),填補(bǔ)了用戶需要在手機(jī)上進(jìn)行視頻剪輯的需求空白。
剪映的UI交互界面,既保留了Ae、Pr等專業(yè)剪輯軟件的界面特點(diǎn)(畫面軌道,音頻軌道),也大大的降低了剪輯軟件的操作門檻。
剪映的UI交互精明之處在于,它將專業(yè)剪輯軟件的復(fù)雜,位置隱蔽,但又常用的剪輯操作。「整合」成為底部一個(gè)個(gè)顯眼的功能圖標(biāo),并且用極為精簡(jiǎn)易懂的文案,對(duì)功能進(jìn)行了一個(gè)充分的描述。這一舉動(dòng),大大降低了用戶對(duì)剪輯軟件復(fù)雜功能的理解門檻,用一種整合式的思維,提供功能給用戶合成使用。這簡(jiǎn)單易懂的交互體驗(yàn),也大大提高了用戶的黏度,忠誠(chéng)度。讓小白用戶接觸了剪映后,再也無(wú)法回到Ae、Pr了。
交互思考:
在AI人工智能浪潮下,一切機(jī)器輔助,機(jī)器完成,需要人效的地方越來(lái)越少,在這大背景下,我們軟件的用戶只會(huì)變得越來(lái)越懶。
在新時(shí)代的背景下,我們UI、交互設(shè)計(jì)師,需要一種寶貴的「化繁為簡(jiǎn)」能力,在不影響最終呈現(xiàn)效果的前提下,將一個(gè)軟件的交互體驗(yàn),文案、功能理解,以及功能使用操作做得越簡(jiǎn)單,用戶的黏度,忠誠(chéng)度就會(huì)越高。
一個(gè)工具類APP何為「好用」?也許就是像剪上映一樣,“化繁為簡(jiǎn),成效依然”
產(chǎn)品體驗(yàn):
在剪映中,識(shí)別字幕的交互邏輯,是自動(dòng)識(shí)別所有視頻片段的語(yǔ)音,并且插入時(shí)間線中,識(shí)別字幕是【批量進(jìn)入時(shí)間軸】的。所以想統(tǒng)一進(jìn)行編輯,得一個(gè)個(gè)反復(fù)選中,然后逐一檢查,這種累人的交互體驗(yàn),讓用戶用了第一次就不會(huì)想用第二次。
剪映推出了「批量編輯」交互功能。
語(yǔ)音識(shí)別后,用戶點(diǎn)擊其中一個(gè)識(shí)別字幕,底部第一個(gè)功能就是「批量剪輯」功能,點(diǎn)擊后,可以一鍵編輯全體的識(shí)別字幕內(nèi)容,減少了用戶調(diào)整識(shí)別字幕是的操作交互時(shí)間,增加了用戶操作效率
設(shè)計(jì)思考:
在產(chǎn)品的功能交互設(shè)計(jì)中,不妨使用剪映的「整合思維」,將一些重復(fù)性高,標(biāo)簽統(tǒng)一,可統(tǒng)一操作的元素整合在一個(gè)功能中統(tǒng)一編輯,減少用戶的操作切換與跳轉(zhuǎn),增加用戶的交互體驗(yàn)與操作效率
產(chǎn)品體驗(yàn):
在必剪中隨著用戶左右移動(dòng),軌道按鈕的文案也會(huì)跟隨移動(dòng),讓用戶無(wú)論滑動(dòng)到何處,什么位置,都能清晰的知道軌道的應(yīng)用名稱,而不會(huì)出現(xiàn)混淆的情況。最大程度上,減輕了用戶的理解成本
設(shè)計(jì)思考:
當(dāng)我們的圖標(biāo),功能板塊,或者某些重要信息,被用戶左右、上下滑動(dòng)導(dǎo)致超出屏幕展示區(qū)域,用戶想回頭找到這些元素,就得重新滑動(dòng)到對(duì)應(yīng)位置,走一趟“回頭路操作” 。這對(duì)用戶來(lái)說(shuō)其實(shí)是不便捷的,對(duì)交互設(shè)計(jì)來(lái)說(shuō),是不聰明的
我們可以利用【必剪】的文字跟隨交互,來(lái)舉一反三,讓一些重要的功能,信息區(qū)域,隨著用戶的滑動(dòng)而自適應(yīng)跟隨,最大限度地保證用戶他不錯(cuò)過(guò)這些重要的功能、信息。
產(chǎn)品體驗(yàn):
在用戶(特別是大齡用戶),在初次使用【剪映】這種有一定入門難度的APP的時(shí)候,其實(shí)都是感到陌生的,新手指引雖然能一定程度解決此問(wèn)題,但是新手引導(dǎo)只能在第一次打開(kāi)APP時(shí)展示,而且新手指引有非常強(qiáng)的局限性,它只能告訴能這功能要怎么用,而無(wú)法告訴你這功能的使用場(chǎng)景。
所以在首頁(yè)中新增一個(gè)軟件使用技巧、教程專區(qū),可以讓有需要的用戶第一時(shí)間觀看課程,入門軟件,而且課程用戶可反復(fù)觀看,不像新手指引般一次性展示。
這種交互體驗(yàn),大大減輕了用戶入門軟件的難度。
設(shè)計(jì)思考:
在我們?cè)O(shè)計(jì)的產(chǎn)品是一個(gè)工具型軟件,且有一定入門、使用難度的時(shí)候,不妨參考一下【剪映】的首頁(yè)+軟件使用教程 的交互思維。
用最低成本教會(huì)用戶如何使用這個(gè)軟件,而且展示位置是每次打開(kāi)APP時(shí)都會(huì)看到的首頁(yè),不用擔(dān)心一些粗心的用戶錯(cuò)過(guò)。
產(chǎn)品體驗(yàn):
在剪映Tap欄中,有一個(gè) “剪同款” 功能,選中對(duì)應(yīng)的視頻模版后,填入自己相冊(cè)的素材,聽(tīng)過(guò)自動(dòng)剪輯,特效覆蓋,自動(dòng)填充文字、BGM等一系列操作,支持用戶一鍵快速成片。
設(shè)計(jì)思考:
在流量為王的時(shí)代,內(nèi)容輸出效率就代表了一切,剪映的 “剪同款” 功能,就是讓用戶的內(nèi)容輸出效率大大提高,將輸出內(nèi)容的過(guò)程簡(jiǎn)單化,無(wú)腦化,用戶無(wú)需再去想用什么創(chuàng)意,視頻用什么BGM,以及視頻特效如何制作,這些都由APP的模版設(shè)計(jì)師幫你搞定,用戶需要做的,就是提供出自己的素材即可。
這給予了我們產(chǎn)品設(shè)計(jì)師一個(gè)啟發(fā),在我們?cè)O(shè)計(jì)產(chǎn)品時(shí),是否也能關(guān)注一下,急需內(nèi)容輸出,但內(nèi)容輸出困難的領(lǐng)域呢?也能把一些可自動(dòng)化實(shí)現(xiàn)的步驟(如特效,BGM,字幕等等),交給系統(tǒng),用戶只需參與拍攝或提供一小部分素材,即可生成一條優(yōu)質(zhì)的內(nèi)容。解決用戶輸出內(nèi)容痛點(diǎn),從而留存用戶數(shù)量,從而實(shí)現(xiàn)用戶量變現(xiàn)。
產(chǎn)品體驗(yàn):
在剪映APP中,一些展示選擇列表的功能中,用戶上滑,列表都會(huì)隨之升起,讓用戶可以更直觀的查看選中其中內(nèi)容,大大增加視覺(jué)傳達(dá)效率。
讓用戶不會(huì)被窗口高度限制,更高效地瀏覽、選用列表中的元素,增加產(chǎn)品功能成效效率
設(shè)計(jì)思考:
當(dāng)我們的瀏覽窗口,因UI布局高度受限時(shí),設(shè)計(jì)師可以通過(guò)【窗口隨著滑動(dòng)響應(yīng)移動(dòng)】的交互方式,使得界面UI交互更多變幻,更為靈活。
產(chǎn)品體驗(yàn):
在剪輯APP中,難免會(huì)有許多種類不同,作用各樣的模塊,但是剪輯軌道UI展示的空間有限,如果沒(méi)有分區(qū)思維,那么整個(gè)剪輯軌道將會(huì)變得雜亂不堪,用戶用久了看到各種軌道模塊,也會(huì)疲勞過(guò)載
而剪映提供的UI解決方案也非常值得參考,將各種不同種類的效果軌道模塊,分區(qū)展示,在用戶點(diǎn)擊【特效】前,剪輯軌道不展示所有的【特效模塊】,在用戶點(diǎn)擊【特效】功能后,才展示對(duì)應(yīng)的【特效模塊】軌道
設(shè)計(jì)思考:
在我們面對(duì)多種不同類型,但是作用相同對(duì)象的作用對(duì)象時(shí),利用交互思維,在UI界面上進(jìn)行視覺(jué)分類很重要,否則你整個(gè)APP的操作界面將會(huì)雜亂無(wú)章。
剪映給了我們一個(gè)很好的參考,就是將不同種類的對(duì)象 【分區(qū)展示,分區(qū)管理,分區(qū)操作】,最大限度的保證交互界面的簡(jiǎn)潔舒適,且分類也能讓用戶更好的“點(diǎn)對(duì)點(diǎn)”進(jìn)行操作,節(jié)省尋找對(duì)應(yīng)操作對(duì)象的時(shí)間,所以,分類思維 是目前作為交互設(shè)計(jì)師的一項(xiàng)必不可少的技能了。
產(chǎn)品體驗(yàn):
在剪映APP中,當(dāng)用戶選中特效,系統(tǒng)會(huì)自動(dòng)播放【特效預(yù)覽效果】,且自動(dòng)暫停(如特效時(shí)長(zhǎng)3s,那么系統(tǒng)播放完3s特效效果后會(huì)自動(dòng)暫停,不會(huì)繼續(xù)播放)
用戶可以直接了當(dāng)?shù)夭榭刺匦c畫面融合的效果,而不用選中后,再點(diǎn)擊播放預(yù)覽效果,覺(jué)得效果不滿意,還得反復(fù)切換。這種交互方式,大大節(jié)省了用戶的選擇模版時(shí)間,讓其成為(選擇+預(yù)覽=選中) 的高效交互流程
設(shè)計(jì)思考:
在我們?cè)O(shè)計(jì)一些需要實(shí)時(shí)預(yù)覽的功能時(shí),我們不妨參考一下剪映的(選擇+預(yù)覽=選中)的高效交互流程,讓用戶免去反復(fù)操作預(yù)覽,重復(fù)選擇的無(wú)效交互,提升用戶在工具型APP的內(nèi)容輸出效率
產(chǎn)品體驗(yàn):
當(dāng)用戶在剪映中喚起濾鏡功能列表時(shí),難免會(huì)感到驚訝,以及提出疑問(wèn):“為什么剪映要用單行瀏覽這種低效的交互方式?”
但是只要你仔細(xì)思考,并付出實(shí)踐你就會(huì)明白,剪映在濾鏡列表中,使用單行瀏覽的原因。
因?yàn)橛脩魧?duì)濾鏡的選擇,是出于此濾鏡的畫面效果,所以展示濾鏡效果時(shí),濾鏡效果圖的比例大小是否清晰顯得尤為重要,所以,剪映犧牲了一些瀏覽效率,但是大大保證了用戶對(duì)此濾鏡的瀏覽精讀。
另外,濾鏡列表不同于特效列表,具有大量重復(fù)圖片填充。濾鏡幾乎每張?zhí)畛涞膱D片都是有所不同的,所以使用多行列表式排列,在多種不同顏色,不同風(fēng)格的圖片填充下,畫面會(huì)變得雜亂不堪
設(shè)計(jì)思考:
當(dāng)我們遇到,填充圖片風(fēng)格各異、或者注重展示畫面的列表設(shè)計(jì)時(shí),可以參考剪映,犧牲一下瀏覽效率,保證瀏覽舒適度,精讀的設(shè)計(jì)方式,來(lái)防止我們?cè)O(shè)計(jì)的列表在視覺(jué)交互上顯得雜亂無(wú)章
作者:堅(jiān)行 來(lái)源:站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)加微信ban_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
設(shè)計(jì)過(guò)程被描述為多個(gè)階段,每個(gè)階段都包含不同的活動(dòng)來(lái)完成該階段,它沒(méi)有統(tǒng)一的標(biāo)準(zhǔn)流程,每個(gè)公司和設(shè)計(jì)師都有自己的流程版本。
盡管存在多個(gè)流程,但一般流程和階段類似于以下內(nèi)容:
了解問(wèn)題:初步了解問(wèn)題。觀察、采訪和傾聽(tīng)用戶。
定義問(wèn)題:解釋和定義要解決的問(wèn)題。
構(gòu)思:通過(guò)頭腦風(fēng)暴產(chǎn)生盡可能多的想法。
原型設(shè)計(jì):構(gòu)建原型并與其他人分享( 再次縮小解決方案空間,為實(shí)驗(yàn)階段 )。
測(cè)試:測(cè)試可能的解決方案、實(shí)施、改進(jìn)或重新設(shè)計(jì)。
傳統(tǒng)的問(wèn)題解決采取有條不紊而又科學(xué)的形式。該過(guò)程從一個(gè)問(wèn)題開(kāi)始,定義要采取的步驟以及達(dá)到解決方案的工具或方法。
設(shè)計(jì)思維是一種創(chuàng)造性的策略,可以產(chǎn)生創(chuàng)造性的未來(lái)結(jié)果和/或創(chuàng)造性的問(wèn)題解決方式,它應(yīng)該被認(rèn)為是一種以解決方案為中心的思維策略。
它通常被描述為一種創(chuàng)造性、主觀和感性的對(duì)許多大型組織的分析邏輯( 布朗,2008 年 ),或作為分析和創(chuàng)造性推理模式的組合( 鄧恩 & 馬丁,2006 年;利特卡,2015 年 )。
設(shè)計(jì)思維來(lái)源于常規(guī)問(wèn)題解決方法,常規(guī)問(wèn)題解法是設(shè)計(jì)思維的基礎(chǔ)。
從解決問(wèn)題到設(shè)計(jì)思維,Liedtka (2013)
結(jié)果發(fā)現(xiàn),設(shè)計(jì)思維實(shí)際上也是一個(gè)解決問(wèn)題的過(guò)程,而不僅僅是一個(gè)創(chuàng)新過(guò)程( 利特卡,2013)
一個(gè)例子是,豐田采用設(shè)計(jì)思維從頭開(kāi)始分析其西海岸的一個(gè)客戶聯(lián)絡(luò)中心,在重新設(shè)計(jì)過(guò)程中,組建了一個(gè)由一線呼叫代表、軟件工程師、業(yè)務(wù)主管和變革代理組成的跨職能團(tuán)隊(duì),這一舉動(dòng)最終改變了客戶和員工的服務(wù)中心體驗(yàn)。
我們每天都會(huì)遇到問(wèn)題,但是當(dāng)我們解決同樣的問(wèn)題時(shí),它們就成了例行公事( 似乎已經(jīng)忘記它們是問(wèn)題了 ),我們甚至都沒(méi)有意識(shí)到正在解決這些問(wèn)題。例如,我的辦公室在 30 分鐘路程之外,該怎么到達(dá)那里?開(kāi)車、坐火車或巴士到目的地;除非車子輪胎被刺破,否則你就需要弄清楚如何到達(dá)辦公室。
1990 年代,IDEO 的 David Kelley 和 Tim Brown 與 Roger Martin 共同創(chuàng)造了特定術(shù)語(yǔ):“設(shè)計(jì)思維”,并將多年來(lái)醞釀的方法和想法封裝成一個(gè)統(tǒng)一的概念。
設(shè)計(jì)思維是以人為中心、開(kāi)放式、基于問(wèn)題的方法論。這種方法最初是為了改變工程教育中的教學(xué)方式,而工程師處理和解決問(wèn)題的方式有其設(shè)計(jì)思維的基礎(chǔ)。
設(shè)計(jì)思維一詞可以追溯到 1987 年 Peter Rowe 的著作:“設(shè)計(jì)思維。” 他描述工程師和建筑師處理問(wèn)題的方法有很大不同。
90 年代初,認(rèn)知科學(xué)家 Don Norman 加入 Apple 團(tuán)隊(duì),擔(dān)任他們的用戶體驗(yàn)架構(gòu)師,這使他成為第一個(gè)在職位中包含 UX 的人。他提出了“用戶體驗(yàn)設(shè)計(jì)”這個(gè)術(shù)語(yǔ),因?yàn)樗搿昂w人們對(duì)系統(tǒng)體驗(yàn)的所有方面,包括工業(yè)設(shè)計(jì)、圖形、界面、物理交互和手冊(cè)?!?從那時(shí)起,這些領(lǐng)域中的每一個(gè)都將用戶體驗(yàn),擴(kuò)展到了自己的專業(yè)領(lǐng)域。
設(shè)計(jì)思維在解決“棘手問(wèn)題”時(shí)特別有用。
棘手問(wèn)題的特征
“棘手問(wèn)題”一詞是由設(shè)計(jì)理論家 Horst Rittel 在 1972 年創(chuàng)造的,用來(lái)描述本質(zhì)上非常模糊 \ 特別棘手的問(wèn)題。棘手問(wèn)題,有很多未知因素,沒(méi)有確定的解決方案。問(wèn)題或解決方案可能與另一個(gè)棘手的問(wèn)題有關(guān),因此這是一個(gè)需要設(shè)計(jì)思維的持續(xù)過(guò)程。貧困、饑餓和氣候變化是一些現(xiàn)代的棘手問(wèn)題。
設(shè)計(jì)主題的范圍是普遍的,因?yàn)?設(shè)計(jì)思維可以應(yīng)用于人類經(jīng)驗(yàn)的任何領(lǐng)域。
它可以用于:
符號(hào)和視覺(jué)傳達(dá):這包括平面設(shè)計(jì)的傳統(tǒng)工作,如排版和廣告、書籍和雜志制作、科學(xué)插圖、攝影、電影、電視和計(jì)算機(jī)顯示。
材料:這包括對(duì)日常用品的形式和視覺(jué)外觀的傳統(tǒng)關(guān)注 —— 服裝、家用物品、工具、儀器、機(jī)械和車輛。
人類活動(dòng)和組織性服務(wù):包括對(duì)物流的傳統(tǒng)管理關(guān)注,結(jié)合物質(zhì)資源、工具和人類低效的序列和時(shí)間表,以達(dá)到特定的目標(biāo)。
復(fù)雜的系統(tǒng)或環(huán)境:生活、工作、娛樂(lè)和學(xué)習(xí)。這包括系統(tǒng)工程、建筑和城市規(guī)劃的傳統(tǒng)關(guān)注點(diǎn),或復(fù)雜整體部分的功能分析及其隨后在層次結(jié)構(gòu)中的集成。
設(shè)計(jì)思維起源于設(shè)計(jì)師的培訓(xùn)和專業(yè)實(shí)踐,但這些原則可以被每個(gè)人實(shí)踐并擴(kuò)展到每個(gè)活動(dòng)領(lǐng)域。(布朗,2013 年)
在企業(yè)中,設(shè)計(jì)過(guò)程可以為企業(yè)環(huán)境中的問(wèn)題解決帶來(lái)創(chuàng)新思維。它還可以用于醫(yī)療保健,通過(guò)向護(hù)士、醫(yī)生和管理人員教授設(shè)計(jì)思維技術(shù),我們可以激勵(lì)相關(guān)從業(yè)者貢獻(xiàn)新的想法。
不管是什么設(shè)計(jì),理解和研究問(wèn)題是必不可少的,因?yàn)槲覀兡軌驈钠涑霭l(fā),從而進(jìn)行以用戶為中心的設(shè)計(jì)。
設(shè)計(jì)思維的最早階段是搞懂你能帶來(lái)的情感價(jià)值。設(shè)計(jì)思維方法迫使你停留在提問(wèn)與質(zhì)疑階段,而不是準(zhǔn)確定義出問(wèn)題后進(jìn)入下一階段。我們都有過(guò)快進(jìn)入解決方案模式的傾向,所以設(shè)計(jì)思維方法迫使你真實(shí)地存在于這個(gè)不清楚、有時(shí)還非?;靵y的時(shí)刻,從而使你對(duì)要解決的問(wèn)題產(chǎn)生更好的理解。(利特克,2013)
傳統(tǒng)的問(wèn)題解決涉及提出一個(gè)解決方案,但設(shè)計(jì)思維首先使我們發(fā)散,試圖為問(wèn)題生成各種可能的替代解決方案。然后讓我們進(jìn)行收斂性思維,縮小多種可能性,找到單一的最佳解決方案。
根據(jù)利特卡和奧美 (2011) 的說(shuō)法,設(shè)計(jì)思維的全部意義在于學(xué)習(xí)一種新的、系統(tǒng)的解決問(wèn)題的方法。正如我們思考創(chuàng)造力一樣,即使是設(shè)計(jì)思維也可以通過(guò)實(shí)踐來(lái)教授和改進(jìn)。
設(shè)計(jì)過(guò)程從來(lái)都不是線性的,它由多次失敗和迭代組成(布朗,2018)。
首先,設(shè)計(jì)師試圖將問(wèn)題與過(guò)去的類似案例聯(lián)系起來(lái)。如果這種方法不能提供任何解決方案,下一步就是使用知識(shí)和創(chuàng)造力作為一種實(shí)驗(yàn)思維形式來(lái)產(chǎn)生新的想法。使用決策矩陣對(duì)這些想法進(jìn)行評(píng)估,從而會(huì)產(chǎn)生被進(jìn)一步分析和測(cè)試的解決方案。如果成功,它將被實(shí)施。如果不成功,則需要重新表述問(wèn)題,并重復(fù)該過(guò)程。這是一個(gè)迭代過(guò)程,即循環(huán)方法。
這一持續(xù)不斷的重新再設(shè)計(jì)過(guò)程,源于和客戶親密接觸的洞察。
學(xué)習(xí)設(shè)計(jì)思維不僅僅意味著學(xué)習(xí)一套新的工具。它還意味著:學(xué)習(xí)收集和分析大量數(shù)據(jù);學(xué)習(xí)挖掘?qū)ο罂赡艿男螒B(tài)而不是自主認(rèn)為他是什么;學(xué)習(xí)管理不確定感,以及與許多新的伙伴合作( 利特卡和奧美,2011)。你可以進(jìn)行的研究類型分為三類:生成性研究、評(píng)估性研究和驗(yàn)證性研究。
一種常見(jiàn)的表述 —— 實(shí)際上是設(shè)計(jì)思維的另一種視角 —— 即設(shè)計(jì)師應(yīng)該預(yù)料到會(huì)“很快失敗或經(jīng)常失敗”(布朗,2009)。
當(dāng)過(guò)程早期發(fā)生故障時(shí),例如被拒絕的原型,實(shí)質(zhì)上它可以為有效解決方案提供關(guān)鍵見(jiàn)解。這種觀點(diǎn)與傳統(tǒng)的先形成理論,再檢驗(yàn)正誤的方式相矛盾。
Airbnb、Braun 和百事可樂(lè)等多元化公司都在 采用設(shè)計(jì)思維并將其作為核心戰(zhàn)略。例如,IBM 為全球旗下的 44 個(gè)設(shè)計(jì)工作室聘請(qǐng)了 1600 名設(shè)計(jì)師,并且正在培訓(xùn)數(shù)以萬(wàn)計(jì)的設(shè)計(jì)師員工建立深度創(chuàng)新能力 ( O'Keefe, 2017 )
設(shè)計(jì)思維為我們解決問(wèn)題添加了以人為本的元素。當(dāng)我們?cè)噲D通過(guò)牢記人們的想法來(lái)解決問(wèn)題,并使用基于直接觀察乃至訪談的研究時(shí),我們便會(huì)捕捉到與消費(fèi)者需求一致的意外見(jiàn)解和創(chuàng)新。
它有助于將成功的產(chǎn)品更快地推向市場(chǎng),最終節(jié)省企業(yè)資金。
IBM 的健康和人類服務(wù)組織的設(shè)計(jì)思維實(shí)踐,通過(guò)有效使用設(shè)計(jì)和設(shè)計(jì)思維幫助企業(yè)將缺陷數(shù)量減少了 50% 以上。這種更高效的工作流程導(dǎo)致計(jì)算出的 ROI 超過(guò) 300%。
由于復(fù)雜的問(wèn)題從來(lái)不能被所有人完全理解,因此在嘗試設(shè)計(jì)解決方案時(shí),處理歧義和多個(gè)并發(fā)的思路方向的能力是至關(guān)重要的素質(zhì)。
設(shè)計(jì)思維通過(guò)綜合和歸納思維,幫助實(shí)現(xiàn)質(zhì)的飛躍。它允許通過(guò)解構(gòu)來(lái)測(cè)試約束,并允許通過(guò)多樣性思維和批評(píng)思維,來(lái)?yè)肀Ш吞剿髌缌x。
消費(fèi)者通常不知道他們有什么問(wèn)題需要解決,或者他們無(wú)法用語(yǔ)言表達(dá)出來(lái)。只有經(jīng)過(guò)仔細(xì)觀察,設(shè)計(jì)者才能根據(jù)真實(shí)消費(fèi)者行為中看到的東西來(lái)識(shí)別問(wèn)題,而不是簡(jiǎn)單地根據(jù)對(duì)消費(fèi)者的想法來(lái)確定問(wèn)題。這有助于定義模棱兩可的問(wèn)題,并找到解決方案。
該方法鼓勵(lì)“跳出框架思考”(“瘋狂的想法”);它蔑視顯而易見(jiàn)的事物并采用更具實(shí)驗(yàn)性的方法。
在早期的流程階段鼓勵(lì)大膽的想法,以產(chǎn)生創(chuàng)造性的解決方案。使用它是為了讓設(shè)計(jì)師可以嘗試開(kāi)發(fā)新的不受約束的思維方式,或?qū)ΤR?jiàn)問(wèn)題的創(chuàng)新解覺(jué)方法。
根據(jù)大多數(shù)設(shè)計(jì)學(xué)院的說(shuō)法,具備特定特質(zhì)的人能夠更好地發(fā)揮設(shè)計(jì)思維的作用。
同理心:從多個(gè)角度想象世界 —— 同事、甲方客戶、實(shí)際使用者和消費(fèi)者的角度。要成為更好的同理心,必須傾聽(tīng)和觀察他人的行為,注意并獲得洞察力。
綜合思維:重要的是不僅要有分析能力,而且要能夠提出新穎的解決方案,還要憑直覺(jué)。
樂(lè)觀:除非你相信有解決方案,否則在遇到挑戰(zhàn)且解決方案遇到瓶頸時(shí),你可能會(huì)放棄。
實(shí)驗(yàn)主義:重大創(chuàng)新并非來(lái)自漸進(jìn)式調(diào)整。設(shè)計(jì)思想家以創(chuàng)造性的方式提出問(wèn)題并探索限制因素,并朝著全新的方向發(fā)展。
協(xié)作:產(chǎn)品、服務(wù)和體驗(yàn)日益復(fù)雜,因此必須擁有一支具有不同背景的團(tuán)隊(duì),以幫助從多個(gè)角度看待問(wèn)題。
當(dāng)我們想到一個(gè)問(wèn)題的多種解決方案時(shí),對(duì)我們解決問(wèn)題會(huì)非常有幫助,因此“功能固定性”阻止了我們以新穎的方式使用舊工具解決新問(wèn)題。想要擺脫功能固定,首先是要讓人們可以使用“改造后的衣架進(jìn)入上鎖的汽車”。這也是盜賊第一次可以用信用卡撬開(kāi)簡(jiǎn)單的彈簧門鎖。
為了幫助設(shè)計(jì)師利用文科和技術(shù)理論,整合多個(gè)領(lǐng)域的知識(shí)以找到創(chuàng)新的解決方案,我們采用設(shè)計(jì)思維來(lái)獲得洞察力。該方法側(cè)重于可視化和操作,因而幫助我們更容易地了解實(shí)際解法,而不僅僅是理論模型。
第一批美國(guó)公司在 2000 年代初期開(kāi)始實(shí)施設(shè)計(jì)思維,這一概念引起了德國(guó)投資者 Hasso Plattner 的興趣,他于 2006 年資助創(chuàng)建了兩所設(shè)計(jì)學(xué)校(d.schools),其中一所位于波茨坦大學(xué)(德國(guó)),另一所位于美國(guó)斯坦福大學(xué)。由于兩所學(xué)校都成功地為大型組織提供了高管設(shè)計(jì)思維培訓(xùn),因此該研究重點(diǎn)關(guān)注這些國(guó)家,以尋找早期實(shí)施者。
設(shè)計(jì)思維通常涉及希望參與整個(gè)設(shè)計(jì)和開(kāi)發(fā)過(guò)程的龐大利益相關(guān)者團(tuán)隊(duì)。
觀點(diǎn)、才能和經(jīng)驗(yàn)的多樣性被認(rèn)為是注入新思維的部分重要來(lái)源。多樣性確保通過(guò)融合不同的觀點(diǎn)、技能和知識(shí)來(lái)產(chǎn)生創(chuàng)意(卡振思,2018 年;薩梅和德拉赫-扎哈維,2013 年)。設(shè)計(jì)思維的協(xié)作方法和工具可幫助團(tuán)隊(duì)以積極的方式利用他們的差異。
決策是平等的,因?yàn)槊總€(gè)成員的意見(jiàn)都被征求和使用(卡爾格倫等,2016)。
當(dāng) IDEO 去 Apple 展示他們的鼠標(biāo)時(shí),它不是什么花哨的設(shè)備,而是一個(gè)用膠帶粘起來(lái)的原型。
低保真原型制作起來(lái)既快速又便宜( 想想幾分鐘和幾分錢 ),但可以從用戶和同事那里得到有用的反饋,這符合快速驗(yàn)證、廉價(jià)試錯(cuò)的原則。為每個(gè)想法投入盡可能少的資源意味著前期投入的時(shí)間和金錢更少。此外,將多個(gè)原型帶到現(xiàn)場(chǎng)進(jìn)行測(cè)試為用戶提供了比較的基礎(chǔ)參考,同時(shí)也有助于揭示某些需求。
為了創(chuàng)新,設(shè)計(jì)思維意識(shí)到認(rèn)知和行動(dòng)對(duì)創(chuàng)新過(guò)程很重要。認(rèn)知包括接受度、樂(lè)觀和創(chuàng)造性的信心( 凱莉 & 凱莉,2013;鄭,2018),而行動(dòng)包括快速原型設(shè)計(jì)、旅程地圖和假設(shè)浮現(xiàn)( 假設(shè)浮現(xiàn):assumption surfacing,這是一種評(píng)估技術(shù),涉及寫出潛在的假設(shè)和反假設(shè)。)( 卡爾格倫等,2016;利特卡,2015)
如果領(lǐng)導(dǎo)層不歡迎風(fēng)險(xiǎn)、模棱兩可和風(fēng)格的改變,實(shí)施起來(lái)就會(huì)變得更加困難。它會(huì)被管理者“質(zhì)疑”其具體指標(biāo)
沃爾特斯 ( 2011 ) 聲稱,由于設(shè)計(jì)思維的模糊性,它與組織文化相沖突。
據(jù)受訪者稱,在日常業(yè)務(wù)中使用設(shè)計(jì)思維之所以不會(huì)是最優(yōu)選項(xiàng), 因?yàn)樗琴Y源密集型的,增加了工作量。( 麗莎等,2016)
在醫(yī)療保健等規(guī)避風(fēng)險(xiǎn)的行業(yè)和公司中,“經(jīng)常和早點(diǎn)失敗”的方法被認(rèn)為是非常困難的。
許多設(shè)計(jì)師反對(duì)設(shè)計(jì)思維這一觀點(diǎn),設(shè)計(jì)思維不僅關(guān)乎一個(gè)過(guò)程,而且關(guān)乎改變思維過(guò)程并提高人們可能提出的解決方案的創(chuàng)造力。
“設(shè)計(jì)思維”的推廣已被大型全球公司用來(lái)增加業(yè)務(wù)。不過(guò),在更廣泛的設(shè)計(jì)世界中,我甚至?xí)f(shuō)“設(shè)計(jì)思維”的過(guò)度宣傳導(dǎo)致了所提供設(shè)計(jì)質(zhì)量的下降?!?Yasushi Kusume
弗吉尼亞理工大學(xué)科學(xué)、技術(shù)和社會(huì)助理教授 Lee Vinsel 在《設(shè)計(jì)思維運(yùn)動(dòng)是荒謬的》中寫道,“歸根結(jié)底,設(shè)計(jì)思維與設(shè)計(jì)無(wú)關(guān)。這與文科無(wú)關(guān)。這與任何有意義的創(chuàng)新無(wú)關(guān)。如果這意味著重大的社會(huì)變革,那肯定不是關(guān)于“社會(huì)創(chuàng)新”。這是關(guān)于商業(yè)化的?!?
觀察人們的行為以及他們?nèi)绾闻c環(huán)境互動(dòng),可以為你提供有關(guān)人們想法和感受的線索。
你可能認(rèn)為你知道問(wèn)題所在,但只有通過(guò)觀察才能了解消費(fèi)者真正需要什么。
宜家派設(shè)計(jì)師到人們家中,觀測(cè)他們的互動(dòng)行為來(lái)了解他們的需求。這將使設(shè)計(jì)者能夠推斷這些經(jīng)歷的無(wú)形含義,以發(fā)現(xiàn)洞察。這些洞察提供創(chuàng)新解決方案的構(gòu)思方向。而事實(shí)上,最好的解決方案來(lái)自于對(duì)人類行為的最佳洞察。
Good Kitchen 是一家為老年人和體弱者提供膳食的社會(huì)服務(wù)機(jī)構(gòu)。起初的問(wèn)題似乎是設(shè)計(jì)不當(dāng)?shù)纳攀巢藛?。然后設(shè)計(jì)思維揭示了無(wú)數(shù)問(wèn)題,所有問(wèn)題都源于服務(wù)本身的性質(zhì)。因此,經(jīng)由對(duì)服務(wù)進(jìn)行了徹底改革的之后,最終提高了客戶和員工的滿意度(利特卡,2014)
作者:用盡晴天來(lái)源:站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)加微信ban_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
對(duì)話框是一種重要的交互方式,主要用于完成信息傳遞。對(duì)話框很常見(jiàn),但并不見(jiàn)得每一個(gè)設(shè)計(jì)師都可以百分百地弄明白對(duì)話框這個(gè)概念。這篇文章是對(duì)「對(duì)話框」的一個(gè)簡(jiǎn)單梳理和總結(jié),希望可以解決大家心中的一些疑惑。
01
了解對(duì)話框
對(duì)話框是疊加在應(yīng)用主窗口上的彈出式的窗口。對(duì)話框以對(duì)話的方式讓用戶參與進(jìn)來(lái),在對(duì)話中它給出消息或要求輸入。
當(dāng)用戶完成消息的閱讀或者作出選擇后,可以取消或者接受該對(duì)話框,之后,這個(gè)對(duì)話框便消失了,把應(yīng)用的主窗口交還給用戶。
關(guān)于對(duì)話框的概念,以下是百度百科的解釋:
對(duì)話框越來(lái)越廣泛地被應(yīng)用于軟件、網(wǎng)頁(yè)、以及移動(dòng)設(shè)備中。它可以保留用戶當(dāng)前進(jìn)程的情況下,指引用戶完成一個(gè)特定的操作 。
按照對(duì)話框的交互方式,可將其分為「模態(tài)[1]對(duì)話框」和「非模態(tài)對(duì)話框」。我們可以把他們看作是兩個(gè)小家族,模態(tài)家族的人比較強(qiáng)硬,而非模態(tài)家族的人相對(duì)溫柔一點(diǎn)。兩個(gè)家族的主要區(qū)別:是否強(qiáng)制用戶對(duì)其進(jìn)行回應(yīng)。
模態(tài)對(duì)話框:是位于瀏覽器的主頁(yè)面核心區(qū)域,需要用戶對(duì)它做出相應(yīng)交互,模態(tài)才會(huì)消失。而對(duì)話框會(huì)因?yàn)樽陨淼奈潭?、停留時(shí)間、信息量承載多少被劃分為多種對(duì)話框類型進(jìn)行區(qū)分,常見(jiàn)的對(duì)話框分別為:普通對(duì)話框、內(nèi)嵌表單對(duì)話框、分步表單對(duì)話框、文件選擇對(duì)話框、復(fù)雜信息展示對(duì)話框。
△ 何時(shí)使用模態(tài)對(duì)話框
1)在重要的警告時(shí)使用,避免出現(xiàn)嚴(yán)重問(wèn)題、或修正已出現(xiàn)的問(wèn)題。
例如:用戶錄入信息后未保存就要關(guān)閉時(shí),彈出模態(tài)對(duì)話框提示用戶保存。
2)在需要用戶輸入信息或進(jìn)行某操作,才能繼續(xù)當(dāng)前流程的時(shí)候使用。
例如:在使用Canva資源網(wǎng)站時(shí),點(diǎn)擊“上傳”會(huì)彈出模態(tài)化的登錄/注冊(cè)窗口,引導(dǎo)登錄/注冊(cè)后使用。
3)用來(lái)將復(fù)雜流程拆分成簡(jiǎn)單步驟。
例如:Teambition-分步驟的模態(tài)對(duì)話框式創(chuàng)建項(xiàng)目。
4)用來(lái)獲取信息,該信息可大大減輕用戶的后續(xù)操作/精力。
例如:在轉(zhuǎn)賬場(chǎng)景中,如果先復(fù)制一個(gè)賬號(hào),打開(kāi)手機(jī)銀行APP(以招商銀行或平安口袋銀行為例),系統(tǒng)會(huì)通過(guò)模式對(duì)話框詢問(wèn)用戶是否向這個(gè)賬號(hào)轉(zhuǎn)賬,這樣的設(shè)計(jì)做到了預(yù)判用戶行為,節(jié)省用戶后面的操作成本。
非模態(tài)對(duì)話框:與模態(tài)完全相反,它更加溫和,不會(huì)強(qiáng)制打斷用戶正在進(jìn)行的現(xiàn)有流程,對(duì)用戶的干擾比較小。通常這類對(duì)話框只會(huì)在屏幕上短暫停留,幾秒就會(huì)消失,也因此用戶容易忽略它們的存在。因此非模態(tài)對(duì)話框不適合展示重要信息、不能承載大量文案,常見(jiàn)的類型有:通知提醒、全局提示、警告提示、氣泡卡片、文字提示。
△ 何時(shí)使用非模態(tài)對(duì)話框
1)在獲取與當(dāng)前流程不必要信息的時(shí)候使用。
例如:平安口袋銀行和平安數(shù)字口袋采用氣泡卡片展示更多功能或引導(dǎo)用戶登錄。
2)不打斷重要流程中使用。
例如:在平安口袋銀行APP中購(gòu)買理財(cái)時(shí),如果遇到疑問(wèn)的話,不會(huì)彈出框提示讓客戶咨詢投顧,而且采用氣泡框形式提示,不打斷用戶購(gòu)買。
簡(jiǎn)單來(lái)說(shuō),兩者的優(yōu)缺點(diǎn)見(jiàn)下表:
02
從前面講到的定義來(lái)看,對(duì)話框最主要的目的是:傳遞信息。那么從目標(biāo)導(dǎo)向的角度來(lái)看對(duì)話框,對(duì)話框要傳遞的信息的常見(jiàn)應(yīng)用場(chǎng)景主要有以下五種:
屬性對(duì)話框是向用戶呈現(xiàn)或讓用戶改變所選對(duì)象的屬性或者設(shè)置。一般來(lái)說(shuō),在屬性對(duì)話框中,用戶可以修改當(dāng)前的選擇,也可以設(shè)置應(yīng)用程序的全局屬性。該對(duì)話框適用于非頻繁操作和或僅需要設(shè)置一次的屬性,屬性對(duì)話框常見(jiàn)在一些設(shè)置、詳情中。
例如:Windows 11系統(tǒng)的設(shè)置界面,可設(shè)置系統(tǒng)的全局屬性。
功能對(duì)話框通常從菜單中打開(kāi),是最常見(jiàn)的模態(tài)對(duì)話框,只控制單一功能,如打印、文件上傳/導(dǎo)入、插入對(duì)象或拼寫檢查。該對(duì)話框不僅允許用戶啟動(dòng)一個(gè)動(dòng)作,而且也允許用戶設(shè)置動(dòng)作的細(xì)節(jié),屬于模態(tài)對(duì)話框。
例如:瀏覽器的打印功能,會(huì)彈出模態(tài)化的打印窗口,用戶可設(shè)置打印的細(xì)節(jié)。
例如:飛書的文檔導(dǎo)入功能,使用模態(tài)化對(duì)話框,引導(dǎo)用戶選擇文件類型或進(jìn)行批量導(dǎo)入操作。
進(jìn)度對(duì)話框是由應(yīng)用程序啟動(dòng)的,而不是由用戶請(qǐng)求而啟動(dòng)的。它們向用戶表明當(dāng)前應(yīng)用正在忙于某些內(nèi)部功能,其他功能的處理能力可能會(huì)降低。
每個(gè)進(jìn)度對(duì)話框都應(yīng)該向用戶清晰地展現(xiàn)如下信息:
例如:使用Axure軟件導(dǎo)出html文件時(shí)的進(jìn)度提示,既提醒用戶當(dāng)前Axure正在運(yùn)行,又告知用戶當(dāng)前文件導(dǎo)出進(jìn)度。
例如:使用Sketch軟件導(dǎo)出文件時(shí)的進(jìn)度提示
通知對(duì)話框?qū)⒁恍┲匾畔?bào)告給用戶。來(lái)源可以是一些觸發(fā)的事件,也可以是其他用戶的通知。
常見(jiàn)的有通知中心對(duì)話框,處理完成某個(gè)操作的告知等等。
例如:花瓣的通知提醒
例如:脈脈的隱私政策閱讀提示和汽車之家的開(kāi)啟通知提示,均采用模態(tài)對(duì)話框方式。
公告對(duì)話框,和進(jìn)度對(duì)話框一樣,由應(yīng)用程序直接啟動(dòng),不是由用戶請(qǐng)求發(fā)起的。公告對(duì)話框有三種:錯(cuò)誤、警告、確認(rèn)。
這種對(duì)話框通常不會(huì)要求用戶填寫什么,只會(huì)詢問(wèn)你“真的要進(jìn)行嗎?”或者告訴你一件事情。所以在這種對(duì)話框上,一般只會(huì)有只有[取消]和[確認(rèn)],或者[OK]。
屬性、功能、進(jìn)度對(duì)話框,是用戶主動(dòng)請(qǐng)求的--它們?yōu)橛脩舴?wù)。但是,應(yīng)用程序發(fā)起的公告對(duì)話框--它們?yōu)閼?yīng)用程序服務(wù),常常會(huì)犧牲用戶利益。由于公告對(duì)話框比較常見(jiàn)且常常犧牲用戶利益,那么我們?cè)趺窗堰@些討厭且無(wú)用的公告對(duì)話框直接鏟除掉,換成更加友好、能給用戶帶來(lái)真正幫助的交互方式呢?接下來(lái)我們來(lái)一起看看怎么讓公告對(duì)話框“名聲鵲起”。
03
我們可以從應(yīng)用本身和對(duì)話框本身著手提供友好的交互方式,減少公告對(duì)話框的出現(xiàn)頻率。
解決用戶錯(cuò)誤的方法不是指責(zé)用戶,讓用戶再認(rèn)真一些,或者給他們更多的指導(dǎo)練習(xí),而應(yīng)該優(yōu)化應(yīng)用設(shè)計(jì),讓犯錯(cuò)變得困難。
示例:登錄藍(lán)湖時(shí)的短信驗(yàn)證碼輸入框
示例:轉(zhuǎn)賬時(shí)輸入金額的數(shù)字鍵盤,金額大小的位數(shù)提示;平安口袋銀行的身份證號(hào)專屬鍵盤。
示例:輸錯(cuò)密碼是一個(gè)很難避免的錯(cuò)誤場(chǎng)景,語(yǔ)雀密碼登錄支持可見(jiàn)密碼,一來(lái)是考慮安全問(wèn)題,二來(lái)在用戶輸錯(cuò)的場(chǎng)景下可以打開(kāi)眼睛,即可見(jiàn)密碼,減少出現(xiàn)錯(cuò)誤頻率。
示例:在支付寶聊天窗輸入一串?dāng)?shù)字,支付寶發(fā)現(xiàn)這個(gè)問(wèn)題后,提供了識(shí)別后直接轉(zhuǎn)賬的功能,預(yù)判了用戶的慣性,減少錯(cuò)誤發(fā)生。
Zoom - 拉會(huì)前預(yù)設(shè)值在加入會(huì)議室的界面,提前選擇是否在進(jìn)入會(huì)議房間后“不自動(dòng)連接語(yǔ)音”和“保持?jǐn)z像頭關(guān)閉”,有效避免忘記閉麥或者忘記關(guān)攝像頭就直接加入了線上會(huì)議的意外尷尬。
在很多破壞性的操作都會(huì)二次進(jìn)行提醒,讓用戶確認(rèn)操作,比如說(shuō)刪除操作。在刪除之前都會(huì)詢問(wèn)用戶“你真的要?jiǎng)h除嗎?”想一想……你在看到這些提示的時(shí)候,是不是眼疾手快地按下那個(gè)「確認(rèn)」按鈕?
這種對(duì)話框在沒(méi)有容錯(cuò)處理時(shí),非常容易被我們這種無(wú)腦按「確認(rèn)」的用戶釀成大錯(cuò)。比如我“手賤”只是試試這個(gè)刪除,然后就把某個(gè)表幾千條辛苦寫了一個(gè)月的數(shù)據(jù)刪掉了,由此可見(jiàn)系統(tǒng)的容錯(cuò)處理有多么重要。
示例:Windows系統(tǒng)在早期的時(shí)候,刪除文件時(shí)會(huì)讓用戶進(jìn)行二次確認(rèn),但這是完全沒(méi)必要的,因?yàn)閯h除文件不是真正的刪除,還會(huì)在回收站里面。
Mac系統(tǒng):在回收站刪除文件將是永久性刪除,此時(shí)的確認(rèn)對(duì)話框才是對(duì)用戶有用的。
從對(duì)話框本身的設(shè)計(jì)優(yōu)化出發(fā),我們可以對(duì)話框的使用場(chǎng)景和文案方面著手進(jìn)行優(yōu)化設(shè)計(jì)。
其實(shí)什么時(shí)候使用對(duì)話框、是否使用取決于你要給用戶展示的信息是否重要。
例如你在手機(jī)上買了一張電影票,支付失敗的結(jié)果如果用toast展示就會(huì)容易被用戶忽視。那么等到用戶到了電影院才發(fā)現(xiàn)自己購(gòu)買失敗,那么用戶極有可能當(dāng)場(chǎng)卸載你的產(chǎn)品。
模態(tài)彈框會(huì)打斷用戶當(dāng)前操作流程,所以「使用對(duì)話框要克制」??傇瓌t是:能在界面展示就不用彈框,能用非模態(tài)彈框的就不要用模態(tài)彈框??傊匾男畔?yōu)先考慮使用對(duì)話框。
具體的使用原則有:
如果非要使用對(duì)話框,那么請(qǐng)使用友好尊重用戶的方式。當(dāng)我們說(shuō)到人與人之間的交流時(shí),語(yǔ)言是重要的媒介,而用戶與產(chǎn)品之間同樣如此。
在設(shè)計(jì)過(guò)程中應(yīng)始終努力設(shè)計(jì)出有效的提示性文案,但是, 一定是有比沒(méi)有要好嗎?個(gè)人認(rèn)為也是不必要的,糟糕的提示性文案甚至?xí)茐漠a(chǎn)品中最好的用戶體驗(yàn)。例如以下幾種情況:
因此糟糕的提示文案設(shè)計(jì)會(huì)誤導(dǎo)用戶在產(chǎn)品中采取不必要的操作, 從而使他們感到生氣和困惑,甚至可能會(huì)破壞品牌對(duì)用戶的忠誠(chéng)度,產(chǎn)生本末倒置的結(jié)果, 也給用戶帶來(lái)不佳體驗(yàn)。
所以,語(yǔ)言是使產(chǎn)品更加人性化的主要因素。產(chǎn)品的文案則充當(dāng)了語(yǔ)言的角色,它可以使用戶參與其中,影響他們的情緒,并把這種人機(jī)的功能性關(guān)系轉(zhuǎn)化成人類的個(gè)人情感體驗(yàn)。而這種用戶的情感體驗(yàn)才能夠真正的彰顯品牌個(gè)性,從而與其他產(chǎn)品區(qū)分開(kāi)來(lái)。
△ 錯(cuò)誤提示設(shè)計(jì)三步法
總結(jié):
對(duì)話框可以成為幫助用戶完成目標(biāo)的有用助手,而不是讓他們?cè)诿恳徊讲偈卮鞌〉目膳陆O腳石。通過(guò)保持對(duì)話框的可管理性,并且只有在他們的功能真的屬于另一個(gè)房間的情況下才調(diào)用他們,你將很好地維持用戶的工作流狀態(tài),保證他們會(huì)成功完成任務(wù),并且滿懷感激。
前言
每當(dāng)臨近春節(jié)時(shí),互聯(lián)網(wǎng)大廠的新年福利活動(dòng)都會(huì)相擁而至,大家在各種活動(dòng)中紅包拿到手軟。此時(shí),百度APP的「好運(yùn)中國(guó)年」系列活動(dòng)也如期與大家見(jiàn)面,毫不吝嗇的把“好運(yùn)”傳遞給每個(gè)用戶。
2019年至今,「好運(yùn)中國(guó)年」已進(jìn)行了五年,每年都會(huì)在品牌和玩法體驗(yàn)上進(jìn)行探索與創(chuàng)新,今年進(jìn)行了更深入的打磨,給用戶一種“新”體驗(yàn)。在設(shè)計(jì)理念上,通過(guò)具有科技感和年俗氣息的視覺(jué)創(chuàng)新,打造一場(chǎng)百度獨(dú)有的“科技廟會(huì)”;活動(dòng)玩法方面,較以往也更加豐富,包括了百度經(jīng)典集卡玩法和多種紅包玩法,給用戶多元有趣的活動(dòng)體驗(yàn)。今年春節(jié)的活動(dòng)周期比往年更長(zhǎng),近一個(gè)月的好運(yùn)中國(guó)年讓用戶樂(lè)此不疲。
打造好玩好逛的科技廟會(huì)
活動(dòng)初期,我們從產(chǎn)品、用戶、社會(huì)三個(gè)角度進(jìn)行分析,確定活動(dòng)的設(shè)計(jì)目標(biāo)。
百度APP是百度在移動(dòng)搜索方向的核心產(chǎn)品,代表了百度先進(jìn)的搜索技術(shù)能力,具備很強(qiáng)的科技屬性。今年團(tuán)隊(duì)設(shè)計(jì)的重點(diǎn)目標(biāo)就是將活動(dòng)與產(chǎn)品屬性相結(jié)合,因此今年開(kāi)始嘗試打造「科技感」春節(jié)活動(dòng);好的活動(dòng)體驗(yàn)可以加深用戶對(duì)活動(dòng)的記憶,為了讓用戶對(duì)「好運(yùn)中國(guó)年」印象深刻,我們結(jié)合多種玩法營(yíng)造科技廟會(huì)的氛圍;而這么多的活動(dòng)需要一個(gè)“集合體”來(lái)承載,“它”既要多元又要契合團(tuán)隊(duì)探索的有社會(huì)價(jià)值的年俗工藝,因此選用了“廟會(huì)”這個(gè)形式來(lái)承載。
經(jīng)過(guò)分析,最終確定以好玩好逛的“科技廟會(huì)”作為本次活動(dòng)的設(shè)計(jì)理念,給用戶“新”的體驗(yàn)感受。
來(lái)場(chǎng)對(duì)“科技廟會(huì)”的探索
“科技廟會(huì)”是什么樣子呢?通過(guò)將詞拆解的方法,以“科技”和“廟會(huì)”為關(guān)鍵詞進(jìn)行思維發(fā)散,想象以什么樣的視覺(jué)來(lái)呈現(xiàn)今年的春節(jié)活動(dòng)。
探索過(guò)程中嘗試AI繪畫,用新的科技手段輔助尋找靈感。
定調(diào)
經(jīng)探索,廟會(huì)的圖像特征越來(lái)越清晰,它是一場(chǎng)熱鬧的具有多元文化載體的文化現(xiàn)象,擁有像舞獅/臺(tái)戲/商鋪/古樓/燈籠/風(fēng)竹等事物,是民間藝術(shù)的結(jié)合體,描繪了老百姓新年期間的市井生活。
「科技感」則是一種視覺(jué)感知,既可以通過(guò)點(diǎn)、線、抽象圖形進(jìn)行感受,是粒子、發(fā)光體、光環(huán)、全息;又可以通過(guò)機(jī)器人、移動(dòng)設(shè)備、全息屏幕等具象物體體現(xiàn),是圖形元素間的動(dòng)態(tài)穿插或是一種變化發(fā)展的趨勢(shì)。
我們將射線、光環(huán)、粒子、全息圖像、速度感圖形等元素植入具有人文特征的廟會(huì)中,切入“科技廟會(huì)”主題風(fēng)格,進(jìn)而確定視覺(jué)調(diào)性。
最終通過(guò)KV將探索的“科技廟會(huì)”視覺(jué)調(diào)性展示出來(lái)。打造出的視覺(jué)情緒是新奇熱鬧的,整體營(yíng)造一場(chǎng)充滿科技氛圍的春節(jié)集市。以兔子形象IP為故事主體,講述一個(gè)“兔年春節(jié)逛科技廟會(huì)”的世界觀。通過(guò)“兔子舞獅”、“古鎮(zhèn)建筑”、“商品小攤”等元素來(lái)體現(xiàn)廟會(huì),道路上的全息路標(biāo)、遠(yuǎn)處向上延伸的科技立光、城市建筑上的懸浮光圈來(lái)增加科技感。
定義“科技特色”的品牌體系
從確定設(shè)計(jì)理念開(kāi)始,今年「好運(yùn)中國(guó)年」的品牌設(shè)計(jì)就被貼上了“不一樣”的標(biāo)簽。有別于往年的關(guān)鍵點(diǎn)是,需要在字體、圖形和IP上充分體現(xiàn)今年“不一樣”的“科技感”。
品牌字體
首先把“科技感”植入品牌字體中,形成獨(dú)特的字體風(fēng)格?!翱萍肌斌w現(xiàn)的是一種發(fā)展與進(jìn)步、速度與前進(jìn),代表了“硬”實(shí)力,我們把這種氣質(zhì)體現(xiàn)在今年的品牌字體中。與去年較圓潤(rùn)的字體相比,今年的字體更為硬朗,在此基礎(chǔ)上字的斜度統(tǒng)一為12度,起落筆則用“尖角”延伸,整套字體現(xiàn)出科技創(chuàng)新帶來(lái)的活力激發(fā)。
品牌圖形
輔助圖形是品牌的重要記憶點(diǎn)之一,能夠強(qiáng)化品牌特征,提升用戶對(duì)品牌的認(rèn)知。今年的輔助圖形保留了去年的基礎(chǔ)形,不一樣的是增加了「科技感」特色的圖形元素,結(jié)合點(diǎn)、線、以及方格符號(hào)元素,進(jìn)一步烘托科技氛圍,在延續(xù)去年視覺(jué)感受的基礎(chǔ)上增添了新的概念。
UI組件也注入科技感,在紅包、btn、輔助入口等組件中增加科技感點(diǎn)線元素的點(diǎn)綴,信息載體使用半透明效果的異形面板,指引箭頭則運(yùn)用馬賽克表現(xiàn)形式。將這些UI組件進(jìn)行復(fù)用,科技?xì)赓|(zhì)貫穿到各活動(dòng)中,確保在不同玩法上呈現(xiàn)統(tǒng)一的視覺(jué)感受。
品牌IP
今年的活動(dòng)IP形象更具親和力和辨識(shí)度。在兔子形象的設(shè)定過(guò)程中我們嘗試多種頭身比例,最終選用的比例為2:1,大頭形象在面部特征和表情上能夠體現(xiàn)更多細(xì)節(jié),使整體更具親和力,同時(shí)也可以讓科技感的全息眼鏡顯得更為突出。IP貫穿活動(dòng)始末,起到統(tǒng)一活動(dòng)主題調(diào)性、強(qiáng)化引導(dǎo),增加新年氛圍和親和力的作用。
舊瓶裝新酒:經(jīng)典重塑,打造多元好玩的集卡活動(dòng)
集卡是百度歷年春節(jié)的經(jīng)典玩法,是用戶最喜愛(ài)的玩法之一,也是「好運(yùn)中國(guó)年」系列活動(dòng)中在線時(shí)間最長(zhǎng)的活動(dòng),無(wú)論在視覺(jué)還是玩法上都要更加豐富多元。
[一] 玩法升級(jí),傳承創(chuàng)新
過(guò)去兩年中,活動(dòng)采用雙層卡玩法,集齊「好」「運(yùn)」「中」「國(guó)」「年」基礎(chǔ)卡后合成高級(jí)卡,集齊高級(jí)卡后獎(jiǎng)勵(lì)會(huì)翻倍。然而通過(guò)洞察研究發(fā)現(xiàn),用戶在高級(jí)卡階段容易失去熱情、感到無(wú)聊,由此發(fā)現(xiàn)高級(jí)卡階段的活動(dòng)體驗(yàn)仍有改善空間,因此嘗試在今年進(jìn)行了“新”的玩法體驗(yàn)創(chuàng)新。
今年團(tuán)隊(duì)在傳統(tǒng)集卡玩法上探索變化,傳承經(jīng)典的同時(shí),提出“新”的集卡闖關(guān)玩法。用戶集齊「好」「運(yùn)」「中」「國(guó)」「年」基礎(chǔ)卡后,開(kāi)啟新的階段,合成高級(jí)卡獲得新春祝福語(yǔ)圖鑒,通關(guān)全套祝福語(yǔ)圖鑒獲得終極獎(jiǎng)勵(lì),同時(shí)整體降低集卡難度,讓用戶更容易玩下去。
[二] 傳統(tǒng)工藝,氛圍拉滿
“新酒”還體現(xiàn)在工藝的多樣上,與去年單一的年畫工藝相比,今年的集卡高級(jí)卡場(chǎng)景中展示了四種工藝,汲取了廟會(huì)中出現(xiàn)的民俗文化和民間藝術(shù)品-剪紙、燈籠、爆竹、團(tuán)扇。通過(guò)科技感的全息影像將每個(gè)場(chǎng)景串聯(lián),打造了一種科技廟會(huì)的感知。四個(gè)場(chǎng)景從家到國(guó),層層遞進(jìn),各場(chǎng)景結(jié)構(gòu)源于品牌logo的熊掌元素,向用戶傳遞著年俗文化、透?jìng)髌放?,宣揚(yáng)科技興國(guó)的理念。
燈籠
說(shuō)到春節(jié),家家戶戶都會(huì)準(zhǔn)備各式各樣的燈籠來(lái)期盼闔家團(tuán)圓。
因此活動(dòng)中選擇燈籠做為構(gòu)建高級(jí)卡場(chǎng)景一的主元素,同時(shí)也是文字的主承載物,每個(gè)燈籠呈現(xiàn)不同的造型,「團(tuán)」字的兔子造型和場(chǎng)景中的兔子IP,來(lái)呼應(yīng)兔年生肖。通過(guò)地臺(tái)上的廟會(huì)建筑和糖葫蘆等元素的結(jié)合營(yíng)造出廟會(huì)年俗氛圍。
卡片則采用了較高挑的燈籠輪廓做為基礎(chǔ)造型,強(qiáng)化卡片屬性,也能夠更好的承載文字和品牌的透?jìng)鳌?/span>
剪紙
剪紙藝術(shù)作為高級(jí)卡第二個(gè)場(chǎng)景的視覺(jué)呈現(xiàn),帶領(lǐng)用戶感受其豐富內(nèi)涵,感受設(shè)計(jì)對(duì)民俗生活的理解、對(duì)生活之美的追求。
場(chǎng)景中高級(jí)卡下端增加了以全息影像方式展現(xiàn)的廟會(huì)場(chǎng)景,同樣營(yíng)造出科技廟會(huì)的氛圍。
爆竹
隨著春節(jié)的腳步越來(lái)越近,人們最期待的便是新年的第一聲爆竹,中國(guó)的爆竹文化,蘊(yùn)含著華夏兒女的精神寄寓,表達(dá)著所有民族的共同期盼。近年來(lái),隨著大眾環(huán)保意識(shí)的加強(qiáng),爆竹聲已離我們逐漸遠(yuǎn)去。因此,“爆竹”元素做為第三關(guān)高級(jí)卡的主元素,目的是為用戶營(yíng)造久違的爆竹帶春聲,配合一席冬雪,向用戶描繪大自然對(duì)大地和人類的厚愛(ài)。
團(tuán)扇
團(tuán)扇是中國(guó)傳統(tǒng)工藝品及藝術(shù)品,有著深厚的文化底蘊(yùn)。同樣寓意著吉祥如意。結(jié)合卡面文字,第四個(gè)高級(jí)卡主元素被設(shè)定為團(tuán)扇。其外觀分別為圓形、花瓣形、芭蕉式等。通過(guò)設(shè)計(jì)手法展現(xiàn)團(tuán)扇的刺繡工藝,細(xì)致到邊角和裝飾。而場(chǎng)景層則通過(guò)掐絲琺瑯的形式向用戶展現(xiàn)了祖國(guó)的大好河山??ǖ暮竺孢€點(diǎn)綴了具有科技屬性的衛(wèi)星元素,預(yù)示著未來(lái)科技的蓬勃發(fā)展。
[三] 科技廟會(huì),獨(dú)具特色
集卡是好運(yùn)中國(guó)年系列活動(dòng)中最先與大家見(jiàn)面的,為了讓用戶了解陸續(xù)開(kāi)啟的更多活動(dòng),我們?cè)诩ɑ顒?dòng)頁(yè)下方開(kāi)辟了一個(gè)活動(dòng)聚合專區(qū),在設(shè)計(jì)上將傳統(tǒng)與科技融合,打造了一個(gè)豐富又獨(dú)具特色的廟會(huì)場(chǎng)景。前期提煉的科技元素轉(zhuǎn)化為環(huán)繞道路的彩色全息路標(biāo),行駛中的百度無(wú)人車,LED光感的廟會(huì)建筑等,與各活動(dòng)入口共同打造一個(gè)科技感十足的廟會(huì)街道。
親朋共團(tuán)圓:疫情后我們第一次團(tuán)聚
在過(guò)去新冠疫情肆虐的三年中,大家與親人朋友團(tuán)聚的機(jī)會(huì)變得格外珍貴。在后疫情時(shí)代的第一個(gè)新年,活動(dòng)從除夕到元宵節(jié),逐步開(kāi)啟多個(gè)紅包福利活動(dòng),與去年相比,在玩法上更多樣,增加了3個(gè)邀好友和2個(gè)紅包雨活動(dòng),為用戶與親朋創(chuàng)造了豐富多樣的線上互動(dòng)場(chǎng)景。
除夕和元宵節(jié)是春節(jié)的首尾時(shí)刻,通過(guò)紅包雨游戲?yàn)橛脩舭l(fā)放福利。在除夕夜,特別開(kāi)設(shè)了多個(gè)時(shí)段的大額紅包玩法,用戶與家人一起守歲搶紅包、迎接新年到來(lái)。
團(tuán)圓紅包、新春大紅包、開(kāi)工領(lǐng)紅包,是春節(jié)系列活動(dòng)中的3個(gè)各不相同的邀好友活動(dòng),我們通過(guò)差異化的設(shè)計(jì)形態(tài),向用戶呈現(xiàn)豐富多樣的紅包福利。
在春節(jié)假期到來(lái)前,團(tuán)圓紅包活動(dòng)的互動(dòng)方式主打線上分享,提前為用戶創(chuàng)造與家人線上聯(lián)系領(lǐng)福利的場(chǎng)景。
而在春節(jié)假期后期推出的掃碼領(lǐng)紅包活動(dòng)中,迎合朋友見(jiàn)面聚會(huì)場(chǎng)景,設(shè)計(jì)上強(qiáng)化掃碼互動(dòng)方式,便于線下面對(duì)面拉好友參與。
開(kāi)工領(lǐng)現(xiàn)金是今年百度春節(jié)新增的特殊玩法,貼合新年后開(kāi)工利是的現(xiàn)代習(xí)俗,吸引用戶向身邊的同事朋友分享這份好彩頭。
年俗文化鏈通全局
當(dāng)然這些活動(dòng)的視覺(jué)也少不了科技和年俗文化的碰撞,將這些細(xì)節(jié)元素貫穿在各個(gè)活動(dòng)中給用戶更加統(tǒng)一完整的沉浸體驗(yàn),如此多的年俗物件,是在去年活動(dòng)中沒(méi)出現(xiàn)過(guò)的。
傾聽(tīng)用戶聲音,點(diǎn)滴之中打磨更好的細(xì)節(jié)體驗(yàn)
今年的“新”體驗(yàn)也體現(xiàn)在我們的細(xì)節(jié)打磨上。秉承用戶體驗(yàn)至上的原則,從去年春節(jié)活動(dòng)開(kāi)始,團(tuán)隊(duì)嘗試通過(guò)投放問(wèn)卷了解用戶參與活動(dòng)的感受,在今年為用戶打造了更好的細(xì)節(jié)體驗(yàn)。
通過(guò)細(xì)致入微的設(shè)計(jì)思考、克制的細(xì)節(jié)處理,打磨出「更簡(jiǎn)單」、「更生活」、「更生動(dòng)」的體驗(yàn)。在今年的體驗(yàn)反饋中,獲得了很多用戶的稱贊。
[更生活]
更生活體現(xiàn)在高級(jí)卡的場(chǎng)景設(shè)計(jì)上,將燈籠的點(diǎn)亮態(tài)和未點(diǎn)亮態(tài)通過(guò)顏色和質(zhì)感進(jìn)行區(qū)分,通過(guò)集卡逐一點(diǎn)亮燈籠,制造小的驚喜點(diǎn),寓意照亮全家人的平安與幸福。
[更簡(jiǎn)單]
為了讓活動(dòng)更易于上手,我們將主頁(yè)和彈窗中的主按鈕文字放大,提高主按鈕的視覺(jué)層級(jí),這種設(shè)計(jì)讓白發(fā)人群也可輕松參與到活動(dòng)中。
同樣的,掃碼活動(dòng)中二維碼的展示也進(jìn)行了放大處理,節(jié)省了點(diǎn)擊再放大的步驟,更便于識(shí)別和用戶之間的面對(duì)面分享。
[更生動(dòng)]
在紅包雨活動(dòng)中,為了保證用戶的游戲體驗(yàn),使用了二維游戲引擎,增強(qiáng)動(dòng)畫流暢度。同時(shí)在多種道具上增加了點(diǎn)擊實(shí)時(shí)反饋,強(qiáng)化道具的生命力。
在開(kāi)工領(lǐng)紅包活動(dòng)中使用動(dòng)作捕捉數(shù)據(jù),讓人物的動(dòng)作更真實(shí),更靈活。同時(shí)設(shè)計(jì)了金幣的碰撞反饋,提升用戶的點(diǎn)擊感和爽感。給用戶更好的游戲感體驗(yàn)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn