Hi，我是彩云。設(shè)計(jì)趨勢年年在變，設(shè)計(jì)技能也在不斷更新，但回到本源，底層的理論知識(shí)是不會(huì)變的。我自己幾乎每年還會(huì)翻看一些講設(shè)計(jì)基礎(chǔ)的書，比如《寫給大家看的設(shè)計(jì)書》之類的，會(huì)發(fā)現(xiàn)這些原理每次看都會(huì)有新的收獲。隨著工作年數(shù)增加，對(duì)底層知識(shí)的價(jià)值認(rèn)識(shí)也越來越深刻，不知道你會(huì)不會(huì)有這種感覺？
在Medium上看到一位工作超過17年的國外設(shè)計(jì)leader寫的一篇關(guān)于設(shè)計(jì)原理的文章，講設(shè)計(jì)如何變得有效？總結(jié)得很好。
當(dāng)沒有認(rèn)知緊張時(shí)，用戶心流才會(huì)發(fā)生。當(dāng)一個(gè)設(shè)計(jì)有效時(shí)，你才能體驗(yàn)到認(rèn)知上的輕松。如果沒有，你的“心流狀態(tài)”就會(huì)中斷(稍后會(huì)詳細(xì)討論)，讓我們陷入認(rèn)知緊張，于是“設(shè)計(jì)失敗了”。
當(dāng)基本設(shè)計(jì)原則被忽略時(shí)，這種情況很容易發(fā)生，導(dǎo)致設(shè)計(jì)無法“整合”。這些基本原則包括：平衡性、一致性和視覺層次、負(fù)空間、接近性、對(duì)比、統(tǒng)一、一致性、配色方案和排版層次等方面。（彩云注：很多人看到這些以為自己都懂，但實(shí)際設(shè)計(jì)時(shí)犯錯(cuò)最多的也是這些問題）
從神經(jīng)科學(xué)的角度來說，當(dāng)一個(gè)設(shè)計(jì)起作用時(shí)，我們會(huì)“感受到它”。其影響立竿見影。它發(fā)生在潛意識(shí)里，在一瞬間完成，是人的本能反應(yīng)。我們不需要把它放在顯微鏡下分析它。
優(yōu)秀設(shè)計(jì)以簡潔和優(yōu)雅而引人注目。喬納森·伊夫(Jonathan Ive)和迪特爾·拉姆斯(Dieter Rams)都可以算作這種設(shè)計(jì)思想的擁躉。
人們常說，優(yōu)秀設(shè)計(jì)背后的工藝是無形的。然而，這不是隨機(jī)發(fā)生的。不管人們是否注意到，設(shè)計(jì)的背后是遵循著大量而嚴(yán)格的原理去執(zhí)行的。偉大的設(shè)計(jì)師不會(huì)在畫板上隨意地將各種元素組合在一起，這是有方法的。
為什么有些設(shè)計(jì)具有美的感受，而有些卻沒有
相反地，當(dāng)一項(xiàng)設(shè)計(jì)被認(rèn)為“有些地方不對(duì)勁”時(shí)，人們就會(huì)下意識(shí)地覺得這個(gè)設(shè)計(jì)是有問題的。這樣的結(jié)果會(huì)給品牌或產(chǎn)品帶來不好的影響。當(dāng)一個(gè)高端或奢侈品品牌受到高度關(guān)注時(shí)，這種影響尤其有害。這就是為什么你永遠(yuǎn)不會(huì)遇到設(shè)計(jì)不完美的香奈兒(Chanel)商店的原因。
“你對(duì)一件事的第一印象會(huì)建立起你隨后的觀念，如果一家公司在你看來不專業(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)為是破碎的，無論是視覺上、精神上和情感上。
人類的大腦是懶惰的、有偏見的，喜歡走捷徑。Daniel Kahneman稱之為“低維思維”。當(dāng)人們看到某種設(shè)計(jì)時(shí)，它的“美學(xué)完整性”、視覺感知和神經(jīng)科學(xué)之間存在著相互關(guān)聯(lián)。
當(dāng)一個(gè)設(shè)計(jì)是合理的，換句話說，它是令人愉快的、有效的，我們會(huì)迅速、直觀的判斷它是合理的。我們的心率降低，多巴胺水平增加，會(huì)有一種幸福和平靜的感覺。這就像我們聽到舒緩的音樂，會(huì)沉浸在一種每時(shí)每刻的“心流狀態(tài)” 中?！霸谶@種狀態(tài)下，人們會(huì)專注于一項(xiàng)活動(dòng)，其他一切似乎都不重要”——來自于一個(gè)心理學(xué)概念，由 Mihaly Csikszentmihalyi在他的暢銷書《心流:最佳體驗(yàn)的心理學(xué)》中寫道。
你更愿意住進(jìn)哪個(gè)房間？
蘋果的人機(jī)界面指南（Apple’s Human Interface Guidelines）幾十年來一直在談?wù)摗懊缹W(xué)完整性”。它也可以被稱為“設(shè)計(jì)完整性”或“審美凝聚力”。
蘋果對(duì)美學(xué)完整性的定義是“當(dāng)一個(gè)設(shè)計(jì)的外觀和行為與其功能完美匹配時(shí)”（彩云注：我的理解就是所見即所得，符合用戶的心理預(yù)期）。換句話說，設(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)生效果。換句話說，它的元素在視覺層次、對(duì)齊、間距、平衡、對(duì)稱、重復(fù)、比例、強(qiáng)調(diào)、接近、對(duì)比、統(tǒng)一、一致性、配色、排版、負(fù)空間等方面都有出色的運(yùn)用，這里僅舉幾個(gè)例子。
這與“黃金比例”無關(guān)，黃金分割不能解決問題。斐波那契數(shù)列螺旋沒那么玄乎，給設(shè)計(jì)師帶不來驚人的設(shè)計(jì)。
設(shè)計(jì)師們?cè)诎布惸取ぶ炖蚧蛎赡塞惿哪樕袭嫵鼋鹕菪螘r(shí)驚呼道：”果然是”黃金比例“（彩云注：但事實(shí)上有點(diǎn)故弄玄虛了）。當(dāng)然，自然界中確實(shí)有神圣幾何學(xué)(黃金比例，又稱斐波那契螺旋，是基于此)，但依賴“黃金螺旋”作為設(shè)計(jì)原則是一種謬論，它已被多次暴露在其赤裸裸的荒謬中。
這是我的洗衣機(jī)，上面疊加了斐波那契螺旋。
“審美的完整性”不是沒道理的。這個(gè)概念是基于基本的設(shè)計(jì)原則，是有成就的設(shè)計(jì)師實(shí)踐他們的藝術(shù)作品的經(jīng)驗(yàn)總結(jié)。
讓我們來看看一些設(shè)計(jì)原則，以及它們?yōu)槭裁磿?huì)使得你的設(shè)計(jì)更能更加有效。通常情況下，真正優(yōu)秀的設(shè)計(jì)會(huì)結(jié)合這些設(shè)計(jì)原則。
我們將探討以下這些最底層的設(shè)計(jì)原理：
視覺感知的基本規(guī)則對(duì)任何視覺設(shè)計(jì)都是至關(guān)重要的，因?yàn)樗鼈冎笇?dǎo)著如何盡可能快地傳達(dá)信息。視覺層次是設(shè)計(jì)中信息的結(jié)構(gòu)和優(yōu)先級(jí)。它決定了人們接受和處理信息的順序，因?yàn)樗砸环N視覺方式引導(dǎo)他們。
視覺層次感重在打造視覺優(yōu)先級(jí)。通過巧妙地使用顏色、形狀、大小、間距、比例和方向，創(chuàng)造性地使用決定層次的視覺元素來傳達(dá)構(gòu)圖的意義、概念和情緒。
核心關(guān)注點(diǎn)是什么，你希望用戶首先注意到或開始閱讀的設(shè)計(jì)中最重要的元素是什么？我們想讓它成為焦點(diǎn)，然后其他部分的設(shè)計(jì)從這里展開。
一個(gè)具有良好視覺層次的網(wǎng)站會(huì)引導(dǎo)用戶關(guān)注重要的部分
視覺層次對(duì)于每一種視覺設(shè)計(jì)都是至關(guān)重要的，無論是需要引導(dǎo)訪客眼球的首頁還是移動(dòng)端UI的導(dǎo)航入口。用戶對(duì)每個(gè)元素的理解取決于組合中的其他元素及其上下文。
建立視覺層次的一些技術(shù)是:位置、大小和比例、顏色和對(duì)比、間距和親密性、負(fù)空間、紋理、引導(dǎo)線和高度。在一個(gè)元素周圍使用豐富的負(fù)空間可以使它看起來更有意義。使用引導(dǎo)線可以創(chuàng)造移動(dòng)，就像一個(gè)人的眼睛在設(shè)計(jì)上移動(dòng)一樣。排版的層次結(jié)構(gòu)也扮演著重要的角色，通過不同的大小和權(quán)重，我們可以讓更重要的文本元素脫穎而出并建立秩序。
加分技巧
沒有視覺層次的網(wǎng)站沒有明顯的興趣點(diǎn)。
設(shè)計(jì)中的對(duì)齊和間距通過空間上的連接傳達(dá)出一種秩序和組織感，這兩個(gè)原則都在設(shè)計(jì)背后發(fā)揮重要價(jià)值。設(shè)計(jì)師早期學(xué)到的基本知識(shí)之一是在網(wǎng)格上編排設(shè)計(jì)，然后對(duì)齊和分隔這些元素。
左對(duì)齊、居中對(duì)齊、右對(duì)齊都沒錯(cuò)，但你必須對(duì)齊，否則當(dāng)元素沒有對(duì)齊時(shí)，設(shè)計(jì)就會(huì)給人崩潰的感覺。它給人一種不安的感覺。
沒對(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í)，彩云以前也寫過不少，感興趣的也可以在公眾號(hào)的歷史發(fā)文中翻翻看）比如：
《想要用好網(wǎng)格系統(tǒng)，這8個(gè)小技巧你必須知道》
《網(wǎng)格系統(tǒng)真是太好用了，后悔沒有早點(diǎn)學(xué)會(huì)！》
《4px網(wǎng)格設(shè)計(jì)方法，讓設(shè)計(jì)還原更精準(zhǔn)》
(Illustration courtesy UX Engineer)
網(wǎng)格可以被打破。一個(gè)死板的構(gòu)圖可能會(huì)在視覺上無趣，除非一個(gè)元素從網(wǎng)格中脫穎而出。錯(cuò)位或“打破網(wǎng)格”是賦予元素更多視覺權(quán)重的一個(gè)機(jī)會(huì)。當(dāng)在設(shè)計(jì)中設(shè)置視覺層次結(jié)構(gòu)時(shí)，它可以用來強(qiáng)調(diào)某些東西。
有時(shí)打破網(wǎng)格可以創(chuàng)造強(qiáng)調(diào)和移動(dòng)
設(shè)計(jì)上有兩種平衡:對(duì)稱和不對(duì)稱。所有的構(gòu)成元素：排版、顏色、圖像、形狀、圖案、留白等，都具有一定的視覺重量。有些元素很重，很吸引眼球，而有些元素很輕，感覺不那么重要。
這些元素的放置方式能夠在對(duì)稱設(shè)計(jì)中創(chuàng)造出一種平等的順序感，或者一種稍微偏離平衡能夠創(chuàng)造出一種不對(duì)稱的設(shè)計(jì)。無論對(duì)稱還是不對(duì)稱，我們的大腦都被某種平衡感所吸引，因?yàn)樗鼊?chuàng)造了和諧、秩序和美學(xué)上令人愉悅的結(jié)果。
多重原則:平衡、對(duì)齊和對(duì)稱在網(wǎng)站上發(fā)揮作用
“對(duì)比”指的是使設(shè)計(jì)中不同的元素更容易區(qū)別開。強(qiáng)烈的對(duì)比可以在設(shè)計(jì)中強(qiáng)調(diào)一個(gè)區(qū)域，而微弱的對(duì)比可以弱化它，創(chuàng)造一個(gè)視覺層次。對(duì)比在設(shè)計(jì)中也扮演著重要的角色。對(duì)比不足會(huì)使文字特別難以閱讀，尤其是對(duì)視力有障礙的人來說。
在左邊的設(shè)計(jì)中，一些文字和背景之間的對(duì)比不夠。
Web內(nèi)容可訪問性指南 (WCAG)呼吁“文本的視覺呈現(xiàn)應(yīng)該有至少4.5:1的對(duì)比度”，除了大規(guī)模文本，它應(yīng)該有至少3:1的對(duì)比度。因此，設(shè)計(jì)師需要確保內(nèi)容保持舒適易讀。（彩云注：具體可用性配色工具，彩云之前的文章中有分享過，現(xiàn)在這種可用性顏色已經(jīng)越來越被重視了，你也要用起來?。?之前寫的文章，推薦大家可以看看：
《以前我經(jīng)常為配色發(fā)愁，自從知道這3個(gè)配色神器后，配色變得容易多了！》
其他UI元素(如各種顯示器和設(shè)備上的卡片、按鈕、文字和圖標(biāo))之間的適當(dāng)對(duì)比也是必須的。如果UI元素之間沒有明顯的區(qū)分度，設(shè)計(jì)就容易產(chǎn)生混亂。
在格式塔原理中，對(duì)稱和秩序的法則也被稱為pr?gnanz，德語單詞“好身材”的意思。這個(gè)原理說的是，大腦會(huì)以盡可能簡單的方式感知模糊的形狀，這都是為了節(jié)省大腦能量。
我們傾向于尋找一切事物的對(duì)稱性。幾項(xiàng)研究發(fā)現(xiàn)，面部對(duì)稱能提高人們對(duì)人臉吸引力的評(píng)價(jià)(盡管完全對(duì)稱的臉其實(shí)并不一定那么有吸引力)。該理論認(rèn)為，這種偏好與選擇DNA最好的伴侶的進(jìn)化優(yōu)勢。
對(duì)稱在自然界中也無處不在?？纯匆恢缓?，一朵花，或者一只海星。
對(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í)地處理視覺信息所需的能量更少。
例如，重復(fù)元素的形狀和大小、填充、留白、類型和顏色，也有助于更對(duì)稱、更好地平衡，做出美觀的設(shè)計(jì)。
The Athletic這個(gè)軟件就是用重復(fù)元素做設(shè)計(jì)的好例子
奇數(shù)法則意思是說，在設(shè)計(jì)作品中奇數(shù)元素比偶數(shù)元素更有趣。偶數(shù)元素在圖像中產(chǎn)生了對(duì)稱，這可能會(huì)顯得過于正式和不自然。比如，在一行中排列三個(gè)或五個(gè)卡片會(huì)比2個(gè)或4個(gè)效果更好，作品會(huì)更加讓用戶感到舒服和自然。
Iskos Design 就是用的奇數(shù)原則做的網(wǎng)頁設(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ì)師非常擅長引導(dǎo)用戶的視覺焦點(diǎn)，這種引導(dǎo)可以通過可見和不可見的引導(dǎo)線來完成。這些線條在構(gòu)圖中也可以打造一種動(dòng)感，也能為畫面增添視覺沖擊力。
達(dá)到這種效果通常用特定的形狀和線條，或者是它們的組合形成難以察覺的引導(dǎo)線來實(shí)現(xiàn)。利用透視、顏色、對(duì)比度和正負(fù)空間同樣可以幫助達(dá)到這種想要的效果。
從左到右的不易察覺的曲線將用戶的視線引導(dǎo)到頁面文字上
大小（scale）是設(shè)計(jì)中一個(gè)元素與另一個(gè)元素的相對(duì)大小。元素通過大小不同創(chuàng)建視覺層次，其中最大的元素首先會(huì)吸引用戶的注意力，因此看起來是最重要的。常規(guī)的設(shè)計(jì)策略就是將最重要的元素做成最大的，然后逐級(jí)遞減。
比例(Proportion)不同于大小，類似但有區(qū)別。比例原則是指一個(gè)整體設(shè)計(jì)中各部分的尺寸關(guān)系。設(shè)計(jì)中的元素可以有各種大小，但它們之間的大小差異，整體來看就是比例。
熟練地使用大小和比例是實(shí)現(xiàn)設(shè)計(jì)統(tǒng)一的關(guān)鍵。當(dāng)一些元素的大小過大或過小，或者比例失調(diào)時(shí)，設(shè)計(jì)組合就會(huì)失去統(tǒng)一性。這種錯(cuò)誤可能發(fā)生在排版和其他元素上。例如，標(biāo)題與子標(biāo)題和正文相比顯得過大。當(dāng)設(shè)計(jì)元素失衡時(shí)，設(shè)計(jì)就會(huì)“感覺不平衡”。
大小和比例都沒做好時(shí)(左圖)，看起來處理的比較細(xì)致了，但依然沒有做到很好，在大小上正文和標(biāo)題分不清(右圖)
強(qiáng)調(diào)原則用于使設(shè)計(jì)的某些元素突出(使用對(duì)比、接近、比例、留白等)或不突出，即弱化強(qiáng)調(diào)(例如在頁面底部有一個(gè)幾乎看不見的“小字”)。強(qiáng)調(diào)是層級(jí)之母，因?yàn)闆]有強(qiáng)調(diào)就沒有層級(jí)。
與其他一些設(shè)計(jì)原則一樣，“強(qiáng)調(diào)”是用來引導(dǎo)人們關(guān)注設(shè)計(jì)，并強(qiáng)調(diào)需要重點(diǎn)關(guān)注的第一、第二和第三點(diǎn)。首頁面和電商轉(zhuǎn)化頁面在99%的情況下都使用這種原則。
使用這個(gè)原則，在購物網(wǎng)站上強(qiáng)調(diào)了標(biāo)語和產(chǎn)品，轉(zhuǎn)化效果非常好
統(tǒng)一是指設(shè)計(jì)元素如何很好地結(jié)合在一起，形成“視覺凝聚力”。它指的是設(shè)計(jì)中的連貫性，讓人們覺得所有部分都是一起的。每個(gè)元素都應(yīng)該具有清晰的視覺關(guān)系，以幫助傳達(dá)清晰、簡潔的信息。整體性好的設(shè)計(jì)比整體性差的設(shè)計(jì)更有條理，質(zhì)量也更高。
運(yùn)用統(tǒng)一的配色，重復(fù)、平衡和對(duì)稱之類的原則將有助于在設(shè)計(jì)中形成一種和諧感，也就是一致性。設(shè)計(jì)中良好的一致性就好比歌曲中一首歌被和諧地唱出來，形成一個(gè)完美的整體。
一致的顏色、重復(fù)的圖案、平衡和對(duì)稱在蒂芙尼的網(wǎng)站上創(chuàng)造了一種統(tǒng)一的感覺。
格式塔的接近原則讓設(shè)計(jì)師將同類型的相關(guān)元素進(jìn)行分組。把它們分開得更遠(yuǎn)，元素就顯得越不相關(guān)，它們之間的關(guān)系就會(huì)減弱。一般來說，人們會(huì)認(rèn)為遠(yuǎn)離的元素是不相關(guān)的。
不應(yīng)該讓用戶在設(shè)計(jì)中分辨哪些元素是相互關(guān)聯(lián)的，正如美國郵政服務(wù)的例子所顯示的那樣，缺乏對(duì)鄰近性的關(guān)注會(huì)導(dǎo)致直接的認(rèn)知緊張，損害用戶體驗(yàn)。
接近原則沒做好的案例。由于字段標(biāo)簽離它們下面的字段更近，人們可能會(huì)搞混。
下面是一個(gè)鄰近性原則做的好的案例，我們可以看到相關(guān)元素是如何通過鄰近性關(guān)聯(lián)起來的(分組的元素用紫色表示)
一個(gè)把接近原則用好的網(wǎng)頁設(shè)計(jì)案例
一致性原則使數(shù)字產(chǎn)品的使用更加可預(yù)測，符合用戶的期望。設(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)常變化，或者像“加入購物車”這樣的主按鈕在不同屏幕上從紅色變成綠色，這是多么令人沮喪。
除了視覺一致性和易用性，品牌一致性在產(chǎn)品設(shè)計(jì)中也發(fā)揮著重要作用。如果沒有一致的元素呈現(xiàn)，如排版、配色和圖案，高質(zhì)量的品牌體驗(yàn)將無法傳遞。
在用戶體驗(yàn)方面，一致性意味著在設(shè)計(jì)中使用相似的UI元素來完成相似的任務(wù)，即在整個(gè)產(chǎn)品中擁有相似的功能和行為。因?yàn)榭捎眯允且环N評(píng)估用戶界面易用性的質(zhì)量屬性，所以一致性對(duì)用戶體驗(yàn)的可用性有很大的貢獻(xiàn)。
一致性是通過使用相同的配色、排版、間距、模式和交互來實(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è)極簡主義的暗色主題設(shè)計(jì)傳達(dá)了一個(gè)特定的品牌氣質(zhì)，并使用了少量的顏色。
排版在設(shè)計(jì)中扮演著非常重要的角色，它的重要性再怎么強(qiáng)調(diào)都不為過。在構(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ì)師可以通過字體傳達(dá)情緒和風(fēng)格。通過選擇合適的字體，我們可以傳達(dá)出穩(wěn)定、優(yōu)雅、舒適、可靠、有力等信息。
排版層次結(jié)構(gòu)可以快速建立視覺層次結(jié)構(gòu)，并且通常在其中扮演重要角色。因此，在設(shè)計(jì)中經(jīng)常使用不同的字體和字體大小來表示層次結(jié)構(gòu)，例如標(biāo)題、副標(biāo)題、正文和引用。
“除了確保文本清晰易讀，排版可以幫助你理清信息層次，傳達(dá)重要內(nèi)容，并表達(dá)你的品牌。” ——蘋果的人機(jī)界面指南
蘭博基尼的網(wǎng)站巧妙地使用了排版風(fēng)格和比例來賦予其設(shè)計(jì)力量
Claude Debussy 曾說過，“音樂是音符之間的空間“。同樣的觀點(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)容，并提供了必要的喘息空間，以確保布局不顯得雜亂。沒有了呼吸空間，人腦就不太可能掃描興趣點(diǎn)，更容易感到困惑。
蘋果官網(wǎng)提供了一個(gè)利用負(fù)空間創(chuàng)造強(qiáng)烈焦點(diǎn)的杰出例子。
人們已經(jīng)開始期待所有平臺(tái)和設(shè)備上的優(yōu)化、無阻礙的用戶體驗(yàn)。理解設(shè)計(jì)原則及其交互方式對(duì)所有設(shè)計(jì)師來說都是至關(guān)重要的。使用專業(yè)技能設(shè)計(jì)它們是創(chuàng)造具有視覺吸引力的功能性設(shè)計(jì)的關(guān)鍵。我們不要忘記，美學(xué)的完整性會(huì)嚴(yán)重影響用戶體驗(yàn)。
基于原則的設(shè)計(jì)是設(shè)計(jì)師在感覺有點(diǎn)迷失或用盡創(chuàng)意時(shí)可以依賴的黃金標(biāo)準(zhǔn)方法。在沒有理解和實(shí)現(xiàn)設(shè)計(jì)原則的情況下，也可能實(shí)現(xiàn)可接受的設(shè)計(jì)。然而，這可能需要大量的嘗試和錯(cuò)誤才能創(chuàng)造出看起來不錯(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ì)給人留下良好的第一印象。”
設(shè)計(jì)的細(xì)節(jié)成就了設(shè)計(jì)本身?！?查爾斯 伊姆斯（Charles Eames）
作者：彩云Sky 來源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)容的信息和操作。卡片可以包含各種元素，但它們都應(yīng)該屬于同一個(gè)主題。
這樣做的目的是為了避免冗長的文字，并呈現(xiàn)更多的內(nèi)容。即使從設(shè)計(jì)的角度來看，用戶可能不熟悉卡片的概念，但他們馬上就知道如何使用它們，因?yàn)樗鼈兣c實(shí)體卡片是一樣的。（彩云注：這個(gè)就是用戶心理學(xué)中隱喻的運(yùn)用）
卡片之所以流行，是因?yàn)樗鼈兡芨玫陌芽貎?nèi)容。卡片是模塊化的，所以不同的內(nèi)容可以堆疊在一起，而不需要注意它們的差異。
卡片通過強(qiáng)制內(nèi)容適應(yīng)卡片邊界和卡片布局上的限制來聚焦內(nèi)容。設(shè)計(jì)師喜歡通過卡片混排大量內(nèi)容，而無需擔(dān)心設(shè)計(jì)會(huì)變得雜亂無章。
卡片可以將內(nèi)容分解成易于理解的小塊，以便用戶與之互動(dòng)。通過給內(nèi)容一個(gè)容器，卡片向用戶表明內(nèi)容是真實(shí)和感性的。
卡片 UI 設(shè)計(jì)流行的原因還有很多：
直觀：卡片在界面中看起來與現(xiàn)實(shí)世界中的卡片相同，它們對(duì)用戶來說似乎很常見。在卡片成為移動(dòng)和網(wǎng)絡(luò)應(yīng)用中的流行元素之前，它們?cè)诂F(xiàn)實(shí)生活中無處不在：名片、棒球卡、便簽。卡片代表了一種有益的視覺類比，它允許我們的大腦直觀地將卡片與其所代表的內(nèi)容聯(lián)系起來，就像在現(xiàn)實(shí)生活中一樣。
易于閱讀：卡片不占用太多空間，并敦促設(shè)計(jì)師優(yōu)先考慮其內(nèi)容。不同的是，每張卡片都變成了易于閱讀的內(nèi)容。卡片讓用戶更容易找到他們感興趣的內(nèi)容。
有吸引力且對(duì)用戶更友好：基于卡片的設(shè)計(jì)通常非常依賴視覺效果（尤其是圖片）；就信息架構(gòu)而言，視覺層次會(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è)頁面。
什么時(shí)候應(yīng)用卡片設(shè)計(jì)？
這通常是當(dāng)你有:
基于搜索的界面: 卡片能通過模塊的內(nèi)容快速顯示合適的內(nèi)容，這使得用戶可以深入了解自己的興趣?；诳ㄆ脑O(shè)計(jì)是一種非常適合呈現(xiàn)這類內(nèi)容的方式。
信息瀏覽：當(dāng)用戶瀏覽信息時(shí)，卡片的兼容性更好。
任務(wù)管理：當(dāng)可以將流程中的單個(gè)任務(wù)作為卡片進(jìn)行說明時(shí)， 可以輕松組織卡片以獲取任務(wù)列表。任務(wù)管理應(yīng)用在使用卡片式界面為用戶創(chuàng)建儀表板方面做得很好，其中每張卡片代表一個(gè)單獨(dú)的任務(wù)。
類似項(xiàng)目：卡片最適合于異構(gòu)項(xiàng)目的集合（當(dāng)并非所有內(nèi)容都是相同的基本類型時(shí)）。
可視化分析: 儀表板通常在同一頁上同時(shí)顯示各種內(nèi)容樣本。在這種情況下，卡片類比可以幫助在不同物品之間創(chuàng)造出更明顯的差異，其中每張卡片可以適應(yīng)不同的角色。
卡片的布局可以不同，以支持它們包含的內(nèi)容類別。下面的組件通常可以在多種卡片樣式中找到。
(1)富媒體: 卡片可以包含縮略圖，以顯示圖片，插圖，頭像，Logo，圖標(biāo)或圖形。
(2) 標(biāo)題: 標(biāo)題文本可以包含相冊(cè)或文章的名稱或標(biāo)題。
(3) 描述: 支持文本，如文章摘要或簡短的描述。
(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í)的圖片來吸引用戶對(duì)每張卡片的注意。不僅是圖像，卡片還可以包含插圖、帶有淺色背景框的圖標(biāo)或任何其他類型的富媒體，但需要與內(nèi)容主題相關(guān)。
2. 增加視覺層次
卡片內(nèi)的層次結(jié)構(gòu)有助于引導(dǎo)用戶對(duì)重要信息的閱讀。將主要內(nèi)容放在卡片的頂部，并使用排版來強(qiáng)化主要內(nèi)容。使用空白和對(duì)比來分隔需要更多視覺分隔的內(nèi)容區(qū)域。（彩云注：視覺層級(jí)對(duì)于信息表達(dá)至關(guān)重要?。?nbsp;
3. 限制內(nèi)容長度
一張卡片應(yīng)該只包含重要的信息，并提出一個(gè)相關(guān)的觀點(diǎn)，以獲取額外的細(xì)節(jié)，而不是完整的細(xì)節(jié)本身。當(dāng)我們?cè)噲D在一張卡片中放入太多內(nèi)容時(shí)，卡片可能會(huì)變得很冗長，并失去與卡片類比的實(shí)際聯(lián)系，因?yàn)樗辉傧褚粡埧ㄆ恕?nbsp;
4. 避免嵌入鏈接
不要包含內(nèi)聯(lián)鏈接，卡片應(yīng)該自己鏈接。嵌入文字鏈接會(huì)讓用戶誤操作。
5. 區(qū)分操作主次
包含不同操作的卡片應(yīng)該在視覺上形成對(duì)比。在下面的例子中，我通過使用一種較輕的色調(diào)而不是主要的按鈕風(fēng)格來降低后續(xù)操作的視覺強(qiáng)度。
6. 去掉分割線
對(duì)于新手設(shè)計(jì)師來說，用分割線來區(qū)分內(nèi)容是一種常見的方式，以此定義不同的組。這些邊框會(huì)造成不必要的視覺干擾，從而影響內(nèi)容。
APP中的卡片并不是純粹的擬物概念，但通常情況下，使用一致的類比和物理原理能幫助用戶理解界面并分析內(nèi)容中的視覺層次。在卡片的情況下，你可以做幾件事:
1. 使用圓角
在形態(tài)上與真實(shí)世界的卡片進(jìn)行視覺對(duì)比。圓角更有效，因?yàn)樗鼈冏屛覀兊难劬θ菀赘S視覺動(dòng)線，“因?yàn)樗m合頭部和眼睛的自然運(yùn)動(dòng)”。
2. 增加一個(gè)輕微的外邊框或者投影
增加一條淡淡的描邊框或者增加一個(gè)淡淡的投影都是很好的做法。陰影在界面中創(chuàng)造了一個(gè)層次，這有助于我們區(qū)分UI元素。
然而，在設(shè)計(jì)中添加陰影并不像聽起來那么簡單。有時(shí)候設(shè)計(jì)師會(huì)過分強(qiáng)化投影效果，讓原本看起來不錯(cuò)的設(shè)計(jì)看起來很廉價(jià)。避免使用純黑色的陰影。
3.注意字體和留白
重要的是要讓每一張卡片都能被人看到、閱讀和理解。在每個(gè)塊周圍添加大量的空白，讓用戶有時(shí)間處理并進(jìn)行視覺重置，有精力看完一張卡再到下一張。
選擇簡單和基本的字體，因?yàn)榛镜呐虐孀畲笙薅鹊靥岣吡丝勺x性，并有助于瀏覽。
讓我們看看一些真實(shí)項(xiàng)目中的卡片設(shè)計(jì)案例：
信息流中的卡片設(shè)計(jì)
保持信息流卡片簡單是很重要的。它們應(yīng)該有一個(gè)一致的、重復(fù)的結(jié)構(gòu)，但是使用不同的圖片和字體大小來代表卡片中最重要的和最不重要的元素，以使讀卡片的人更容易理解它們。
由Diseno Constructivo和Webpixels設(shè)計(jì)
他們突出特色圖片和標(biāo)題作為最突出的元素，這能幫助用戶決定文章或發(fā)布的內(nèi)容是否適合他們。
電商卡片設(shè)計(jì)
產(chǎn)品卡片是一個(gè)很重要的東西，它可以幫助你將訪問者轉(zhuǎn)化為客戶。一張優(yōu)秀的產(chǎn)品卡片應(yīng)該能夠吸引人們的注意，激發(fā)人們獲得產(chǎn)品的欲望，激勵(lì)人們購買，并在搜索結(jié)果中得到高效推廣。
由Webpixels設(shè)計(jì)
產(chǎn)品的名稱應(yīng)該放在最顯眼的地方，這樣參觀者就會(huì)立刻明白他來對(duì)地方了。一個(gè)好的配圖能告訴顧客勝過千言萬語，所以你需要一個(gè)高質(zhì)量的產(chǎn)品配圖來設(shè)計(jì)完美的產(chǎn)品卡片。
如果產(chǎn)品有特價(jià)，不僅要在價(jià)格欄中注明促銷價(jià)格，還要注明常規(guī)價(jià)格，以及客戶可以節(jié)省多少錢。
個(gè)人中心卡片設(shè)計(jì)
簡介卡已經(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)于”頁面有剩余的細(xì)節(jié)來完善你的個(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ù)卡似乎是一件非常簡單的事情——拿一張便簽，寫下你需要做什么，然后把它貼在墻上。這些卡片必須包含需要行動(dòng)的單位數(shù)量。它們還可能包含各種各樣的其他信息，清楚地傳達(dá)了必須做什么。
由Neelesh Chaudhary設(shè)計(jì)
卡片上包含的信息包括任務(wù)的名稱和重要的細(xì)節(jié)，如任務(wù)的類型和誰擁有它。看板卡放在狀態(tài)類別下。最基本的狀態(tài)類別是“計(jì)劃要做”、“正在進(jìn)行中”和“完成”，但是狀態(tài)可能因項(xiàng)目而異。
卡片結(jié)構(gòu)最適用于添加或刪除任務(wù)這樣的小改變，而不是改變像你的總體目標(biāo)這樣的大想法。
有幾種方法可以使卡片設(shè)計(jì)更加有效。通過最初定義和觀察卡片，我們可以更好地了解跨行業(yè)的這種設(shè)計(jì)模式。這也讓我們能夠推測用戶希望在這些卡片上采取什么行動(dòng)?？ㄆ谔峁┰S多不同種類內(nèi)容摘要的環(huán)境中尤其有效，而不是簡單地作為內(nèi)容列表的現(xiàn)代替代品。
演出項(xiàng)目可分為【有座項(xiàng)目】和【無座項(xiàng)目】兩種類型，有座項(xiàng)目又可分為【選座售賣項(xiàng)目】和【非選座售賣項(xiàng)目】。
大部分話劇、音樂劇、舞蹈芭蕾項(xiàng)目都是選座售賣項(xiàng)目?？蛻魜淼截堁劭蛻舳酥羞x擇想看的項(xiàng)目，選定座位并下單，最后檢票入場觀演，完成閉環(huán)。其中選座體驗(yàn)是客戶轉(zhuǎn)化重要的一環(huán)，影響客戶決策。
為了提升用戶體驗(yàn)，提升數(shù)據(jù)轉(zhuǎn)化，我們對(duì)貓眼目前選座體驗(yàn)進(jìn)行走查，探討問題原因，找到產(chǎn)品痛點(diǎn)和機(jī)會(huì)點(diǎn)，為產(chǎn)品優(yōu)化做準(zhǔn)備。
貓眼客戶端選座體驗(yàn)問題：
1.自營項(xiàng)目無法直接選座，無論場館大小必須先選擇區(qū)域再選擇座位
如下圖，無法選擇圖中的座位，點(diǎn)擊座位跳轉(zhuǎn)到對(duì)應(yīng)區(qū)域的座位圖，需要再次點(diǎn)擊選擇。
2.無法根據(jù)場館座位分布全局選座
如下圖，選擇A區(qū)后僅能查看到A區(qū)座位，無法看到其他區(qū)域座位和舞臺(tái)。
3.場館分區(qū)圖風(fēng)格樣式不統(tǒng)一
如下圖，繪制精細(xì)程度不一，風(fēng)格樣式不一。
這些問題產(chǎn)生的原因：
問題1：產(chǎn)品結(jié)構(gòu)規(guī)劃上將場館分為區(qū)域和座位兩個(gè)層級(jí)，未根據(jù)場館規(guī)模分級(jí)別展示，例如大型場館先選區(qū)域再選擇座位，小型場館直接選擇座位。
問題2：B端后臺(tái)性能問題阻礙了客戶端全局查看選座。
問題3：區(qū)域圖依靠B端后臺(tái)上傳，沒有統(tǒng)一的繪制標(biāo)準(zhǔn)約束，故客戶端的樣式不統(tǒng)一。
通過以上原因可以看出客戶端選座體驗(yàn)很大程度上取決于B端后臺(tái)的配置，所以要從B端配置入手，從根源上解決體驗(yàn)問題。
本次研究目的
研究對(duì)象
我們通過產(chǎn)品研究和用戶訪談形式，結(jié)合業(yè)務(wù)需求，對(duì)產(chǎn)品功能進(jìn)行審視走查，希望能挖掘出產(chǎn)品痛點(diǎn)和機(jī)會(huì)點(diǎn)。
B端場館圖繪制及座位配置的主要用戶是運(yùn)維人員，所以我們對(duì)運(yùn)維人員進(jìn)行了深度訪談，主要目的：
1.了解用戶使用貓眼B端的操作行為和痛點(diǎn)；
2.觀察用戶使用相似產(chǎn)品【城市售票網(wǎng)B端系統(tǒng)】的行為和痛點(diǎn)。
演出項(xiàng)目座位配置業(yè)務(wù)流程
商務(wù)與場館洽談好合作后，會(huì)提交添加/修改場館座位模板的郵件給到運(yùn)維人員，由運(yùn)維人員在B端后臺(tái)中進(jìn)行創(chuàng)建和修改。商務(wù)可在B端后臺(tái)創(chuàng)建項(xiàng)目關(guān)聯(lián)到對(duì)應(yīng)場館配置票價(jià)等。
在這條業(yè)務(wù)流程中，涉及到B端選座配置的部分：
1.創(chuàng)建/維護(hù)場館分區(qū)模板；
2.創(chuàng)建有座項(xiàng)目、關(guān)聯(lián)對(duì)應(yīng)場館、配置票價(jià)、配置預(yù)留。
一、創(chuàng)建/維護(hù)場館分區(qū)模板
創(chuàng)建場館分區(qū)模板主要分為兩個(gè)步驟：
創(chuàng)建場館分區(qū)：包含兩個(gè)主要頁面和一個(gè)彈窗，承載創(chuàng)建分區(qū)圖和設(shè)置分區(qū)信息功能。創(chuàng)建分區(qū)支持上傳底圖、SVG圖，編輯器繪制。
創(chuàng)建分區(qū)座位：包含一個(gè)主要彈窗，承載畫座位、座位編號(hào)、移動(dòng)座位、統(tǒng)計(jì)座位等功能。
1. 創(chuàng)建分區(qū)體驗(yàn)痛點(diǎn)
1.1 使用SVG編輯器繪制場館分區(qū)圖操作不便
嵌入式畫圖工具僅能繪制較為簡單的圖形，門檻高且繪制成果不理想，對(duì)于復(fù)雜場館無法滿足繪制需求，無法與演出業(yè)務(wù)很好的結(jié)合。
1.2 運(yùn)維使用第三方工具，繪制風(fēng)格差異大
由于畫圖工具繪制不理想，運(yùn)維人員自學(xué)AI、Coreldraw等繪制后上傳到后臺(tái)系統(tǒng)。人和工具的不同導(dǎo)致座位圖風(fēng)格差異較大。
1.3 項(xiàng)目變動(dòng)維護(hù)不便
項(xiàng)目調(diào)整需通過第三方繪制工具修改或重新繪制導(dǎo)出后上傳到后臺(tái)，修改流程長且重復(fù)操作過多。
2. 創(chuàng)建座位體驗(yàn)痛點(diǎn)
2.1 畫座方式不支持繪制傾斜、曲度、錯(cuò)位的座位
固定的座位方格坐標(biāo)對(duì)坐標(biāo)，自由度差，無法自定義座位角度和排布形式。無法精準(zhǔn)還原場館座位分布。
2.2 不支持自定義舞臺(tái)方向和位置
舞臺(tái)位置方向固定，無法滿足多個(gè)舞臺(tái)、座位包圍舞臺(tái)配置。
2.3 繪制座位交互操作單一
僅支持鼠標(biāo)在方格內(nèi)拖動(dòng)繪制，效率低，增刪改操作麻煩。
2.4 交互流程不通順
編號(hào)、移動(dòng)等功能先切換功能再選擇座位的順序不符合用戶行為，符合用戶操作的順序是先選擇座位再點(diǎn)擊對(duì)應(yīng)操作配置。
座位編號(hào)、移動(dòng)、統(tǒng)計(jì)功能不適合tab形式，交互組件使用不當(dāng)。
2.5 交互界面表達(dá)有誤
座位編號(hào)分為排編號(hào)和列編號(hào)兩種方式，選擇一種并填寫配置參數(shù)。系統(tǒng)界面中兩種方式都有*（必填）容易引起誤導(dǎo)。
2.6 刪除編號(hào)語義不明確
選擇座位后點(diǎn)擊刪除編號(hào)按鈕后座位和編號(hào)都被刪除，按鈕語義與實(shí)際意思不符。并且誤刪除座位還會(huì)增加重新繪制工作量。
3. 產(chǎn)品結(jié)構(gòu)體驗(yàn)痛點(diǎn)
3.1 分區(qū)形狀與座位分布關(guān)聯(lián)度低
分區(qū)的大致形狀應(yīng)由分區(qū)座位的排布所決定，而產(chǎn)品中分區(qū)形狀與分區(qū)座位形狀并無直接的關(guān)聯(lián)，導(dǎo)致用戶在選座時(shí)產(chǎn)生較大的割裂感。
3.2 不支持直接選座
為了讓客戶更直觀的掌握?qǐng)鲳^座位分布，運(yùn)維人員繪制時(shí)會(huì)盡可能還原，但客戶選擇時(shí)還要進(jìn)入分區(qū)后才能選擇座位，且僅能查看到一個(gè)分區(qū)的座位，不能全局選座。
4. 框架和容器動(dòng)線體驗(yàn)痛點(diǎn)
4.1 分區(qū)配置位置分散，操作效率低
分區(qū)繪制與信息配置分散在兩個(gè)頁面和1個(gè)彈窗中，頁面布局分散，動(dòng)線復(fù)雜多變。
4.2 座位配置比重弱
座位配置權(quán)重高且操作復(fù)雜，不適合使用彈窗承載，位置層級(jí)太深。
5. 產(chǎn)品與業(yè)務(wù)關(guān)聯(lián)體驗(yàn)痛點(diǎn)
5.1 座位配置功能單一，缺少輔助操作
繪制座位圖是一項(xiàng)龐大的工程，系統(tǒng)內(nèi)大型場館的座位達(dá)到4-9萬個(gè)，例如鳥巢、梅賽德斯奔馳文化中心。繪制大型場館需要花費(fèi)3-4天時(shí)間，座位分布復(fù)雜的場館需要花費(fèi)更長時(shí)間。目前系統(tǒng)僅有單一拖動(dòng)方格的繪制方式，缺少提升繪制效率的輔助工具，例如撤回、復(fù)制座位、多種對(duì)齊/翻轉(zhuǎn)方式等。
6. 體驗(yàn)優(yōu)點(diǎn)
6.1 繪制場館分區(qū)圖時(shí)支持導(dǎo)入SVG
方便繪制大型復(fù)雜的場館。
6.2 系統(tǒng)穩(wěn)定
復(fù)雜的場館繪制時(shí)間長且操作復(fù)雜，系統(tǒng)未產(chǎn)生過崩潰或其他終止情況。
二、配置票價(jià)和預(yù)留
配置票價(jià)和預(yù)留主要分為三個(gè)步驟：
選定場館分區(qū)：確認(rèn)場館并選擇場館內(nèi)分區(qū)
配置票價(jià)：選擇座位配置票價(jià)。
配置預(yù)留：選擇座位配置預(yù)留。
1. 框架和容器動(dòng)線體驗(yàn)痛點(diǎn)
1.1 頁面結(jié)構(gòu)相似，內(nèi)容重復(fù)
票價(jià)和預(yù)留頁面重復(fù)度高，都包含分區(qū)預(yù)覽、選座情況、分區(qū)座位圖模塊。
2. 交互細(xì)節(jié)體驗(yàn)痛點(diǎn)
2.1 同樣功能不同頁面交互和視覺不一致
兩個(gè)頁面都包含分區(qū)預(yù)覽模塊，但交互視覺差別較大，交互視覺操作不統(tǒng)一。
2.2 內(nèi)容表達(dá)不清晰
設(shè)置預(yù)留操作中，“對(duì)象”文案語義表述不清晰、“貓眼”和“釋放”不屬于同一層級(jí)且語義表達(dá)不清楚；新增預(yù)留標(biāo)記按鈕位置有誤，應(yīng)該放置在自定義預(yù)留下方，而不是與“對(duì)象“平級(jí)。
2.3 設(shè)置預(yù)留后無法查看座位編號(hào)
設(shè)置預(yù)留后，座位編號(hào)被預(yù)留標(biāo)簽替換，從而看不到座位編號(hào)，影響識(shí)別。
3. 產(chǎn)品功能體驗(yàn)痛點(diǎn)
3.1 不支持導(dǎo)出票務(wù)方案圖
在項(xiàng)目洽談后、正式開票前，報(bào)批時(shí)需要提供給主辦和公安票務(wù)方案圖，供主辦審核，目前需要運(yùn)維自行制作不支持導(dǎo)出。
一、維護(hù)場館分區(qū)模板
1. 產(chǎn)品結(jié)構(gòu)
與貓眼B端后臺(tái)相同，城市售票網(wǎng)在繪制場館分區(qū)圖時(shí)也是分為兩個(gè)步驟，先配置區(qū)域再配置座位。
區(qū)域配置：支持上傳底圖并通過繪制工具畫出區(qū)域形狀，繪制完成后可直接配置區(qū)域信息。
座位配置：通過繪座工具畫出區(qū)域座位，選座工具和配置工具進(jìn)行輔助繪制。
2. 產(chǎn)品布局
2.1 區(qū)域與座位配置結(jié)構(gòu)清晰，頁面布局規(guī)整；
2.2 區(qū)域和座位配置兩步銜接緊密，操作動(dòng)線流暢。
3. 區(qū)域配置功能分析
優(yōu)點(diǎn)：
1）支持上傳底圖及調(diào)整比例；
2）繪制工具易用性較高；
3）繪制風(fēng)格統(tǒng)一；
4）分區(qū)配置動(dòng)線流暢。
痛點(diǎn)：
1）不支持上傳SVG圖；
2）繪制POH(區(qū)域)的工具少，僅鋼筆工具；
根據(jù)產(chǎn)品定義，繪制座位分區(qū)使用區(qū)域工具，繪制舞臺(tái)、樓梯、出入口等場館輔助設(shè)施使用形狀工具。根據(jù)業(yè)務(wù)實(shí)際情況，區(qū)域繪制為主，形狀繪制為輔。然而區(qū)域繪制工具僅有一個(gè)鋼筆工具，Shape(形狀)繪制工具有三個(gè)，主次顛倒。
3）區(qū)域和形狀繪制工具容易混淆。
左側(cè)工具欄中兩類繪制工具未明確分開，非熟練人員操作時(shí)會(huì)誤用兩種工具。
4. 座位配置功能分析
4.1 創(chuàng)建座位
優(yōu)點(diǎn)：
1）工具繪制靈活自由；
2）支持旋轉(zhuǎn)座位。
痛點(diǎn)：
1）需要熟悉繪制工具交互操作，有一定的上手門檻；
2）單個(gè)座位工具、路徑繪制工具在繪制結(jié)束需要鼠標(biāo)雙擊，在無指導(dǎo)的情況下用戶很難發(fā)現(xiàn)。交互操作缺少說明文字或圖片解釋。
4.2 選擇座位
優(yōu)點(diǎn)：
1）多種輔助工具提升繪制效率；
2）支持區(qū)域內(nèi)復(fù)制黏貼座位。
痛點(diǎn)：
1）僅能在區(qū)域內(nèi)復(fù)制黏貼座位，不具備區(qū)域之間座位復(fù)制或復(fù)制區(qū)域的能力。
對(duì)稱布局是場館中常見的一種布局形式，繪制好一個(gè)區(qū)域座位后復(fù)制并翻轉(zhuǎn)就可以快速畫完另一個(gè)區(qū)域。
如下圖所示，當(dāng)前在G區(qū)域編輯座位，雖然可以復(fù)制G區(qū)的座位黏貼，但僅在G區(qū)能看到，無法復(fù)制到C區(qū)圖層內(nèi)。
2）不支持設(shè)置弧度座位。
如下圖所示場館無法在系統(tǒng)內(nèi)完全還原。
4.3 座位編號(hào)
優(yōu)點(diǎn)：
1）編號(hào)方式支持字母、數(shù)字、字母數(shù)字結(jié)合形式，符合多種場景需求。
痛點(diǎn)：
1）編號(hào)受限于繪制時(shí)的分組；
繪制座位需要根據(jù)座位編號(hào)邏輯繪制分組，不可以一次性全部繪制完后分開編號(hào)。
若第一次繪制有遺漏座位，第二次補(bǔ)充后，無法整體編號(hào)。
2）無法取消編號(hào)。
編號(hào)僅能修改，不能刪除
5. 產(chǎn)品視圖分析
5.1 編輯座位視角
缺點(diǎn)：
1）僅支持在預(yù)覽功能時(shí)查看創(chuàng)建的全部座位。繪制某一區(qū)域座位時(shí)無法看到其他區(qū)域座位，缺少全局參考。
二、配置票價(jià)和預(yù)留
1. 產(chǎn)品布局
優(yōu)點(diǎn)：
1）票檔和預(yù)留配置與場館座位配置結(jié)構(gòu)相似，布局和操作統(tǒng)一，易于理解。
2）票價(jià)和防漲配置在一個(gè)頁面內(nèi)完成，簡單清晰。
2. 票價(jià)及預(yù)留配置功能分析
痛點(diǎn)：
1）設(shè)置預(yù)留后無法查看到座位編號(hào)
如下圖中A標(biāo)記的座位是預(yù)留座位，無法查看座位編號(hào)
2）預(yù)留模式下，選中已設(shè)置票檔、未設(shè)置預(yù)留的座位時(shí)，無法區(qū)分票檔
如下圖選中狀態(tài)下1-6號(hào)座位無法區(qū)分票檔A/B
3. 總結(jié)
城市售票網(wǎng)B端系統(tǒng)的在繪制場館圖上靈活度自由度高，界面布局規(guī)整，動(dòng)線清晰，產(chǎn)品功能適用于多元復(fù)雜場景，不過需要用戶具有一定的繪圖基礎(chǔ)或熟悉成本。
通過以上分析，我們總結(jié)出貓眼B端系統(tǒng)后續(xù)的優(yōu)化方向，框架和容器動(dòng)線上需要提高用戶瀏覽和操作效率，頁面進(jìn)行歸類整合，布局樣式統(tǒng)一；繪制環(huán)境上需要為用戶提供靈活自由的區(qū)域座位繪制工具，配備高效的選座和輔助工具。
一、整體布局
1）打破現(xiàn)有的分區(qū)與座位不平衡布局模式，梳理動(dòng)線
二、功能
1. 場館分區(qū)設(shè)置
1）提供與業(yè)務(wù)關(guān)聯(lián)度高的、易用的分區(qū)繪制工具；
2）支持多種類型分區(qū)，例如舞臺(tái)區(qū)、座位區(qū)、舞池區(qū)等；
3）提高分區(qū)與座位繪制還原度；
4）確立場館規(guī)模分級(jí)，客戶端根據(jù)級(jí)別展示座位層級(jí)或直接進(jìn)入分區(qū)層級(jí)。
2. 場館座位設(shè)置
1）提供易用度高的座位繪制工具或座位添加方式；
2）支持靈活選座，靈活編號(hào)；
3）支持調(diào)整座位角度、弧度、間距參數(shù)；
4）提供提升繪制效率的輔助工具；
5）支持跨區(qū)復(fù)制座位或復(fù)制區(qū)域功能；
6）提升座位配置頁面權(quán)重，完善座位配置界面。
3. 配置票價(jià)和預(yù)留
1）整合票價(jià)和預(yù)留頁面；
2）修正界面交互視覺問題；
3）支持設(shè)置預(yù)留后查看座位號(hào)；
4）增加導(dǎo)出票務(wù)方案圖功能。
這次研究我們從業(yè)務(wù)、產(chǎn)品功能、用戶三方面對(duì)選座配座模塊進(jìn)行走查，抓住產(chǎn)品痛點(diǎn)，為后續(xù)改造指明了方向；對(duì)同類型產(chǎn)品的選座配座解決方案進(jìn)行分析，幫助我們獲得新思路。
隨著沉浸式劇場、互動(dòng)型劇場等新型演出的發(fā)展，場館座位布局不再是單一的座位正對(duì)舞臺(tái)，多個(gè)舞臺(tái)、座位多角度圍繞舞臺(tái)的布局形式不斷出現(xiàn)，今后還會(huì)有更多新型座位布局出現(xiàn)。設(shè)計(jì)適用于多種業(yè)務(wù)場景、頁面動(dòng)線清晰、繪制功能好用的后臺(tái)工具不僅能提升運(yùn)維人員的操作效率，也能提升客戶端用戶選座體驗(yàn)和購票轉(zhuǎn)化，從而提升產(chǎn)品的市場競爭力。隨著演出行業(yè)的逐步復(fù)蘇，大量選座項(xiàng)目上線，改造選座模塊是我們工作重中之重。
筆者在車聯(lián)網(wǎng)行業(yè)任職HMI視覺設(shè)計(jì)師，由于HMI設(shè)計(jì)發(fā)展的較晚，所以基本上在開始進(jìn)入到這個(gè)領(lǐng)域的人，大多來自于互聯(lián)網(wǎng)行業(yè)。由于互聯(lián)網(wǎng)行業(yè)發(fā)展的比較早，形成了一套成熟的工作流程，即：分工明確的遞進(jìn)式協(xié)作：交互設(shè)計(jì)師要等到產(chǎn)品PRD評(píng)審結(jié)束才開始介入需求，然后交付黑白線框稿等給到視覺設(shè)計(jì)師繼續(xù)跟進(jìn)。這種工作模式可以讓每個(gè)人在自己的崗位上做得更加專業(yè)，成為垂直領(lǐng)域的專家。在車聯(lián)網(wǎng)行業(yè)發(fā)展初期的時(shí)候，這種工作模式對(duì)于傳統(tǒng)行業(yè)的來講，比較新穎、高效，所以在一定程度上促進(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ì)來講，需要了解很多專業(yè)知識(shí)，比如：屏幕、硬件、三電、法規(guī)……這些東西都會(huì)影響到設(shè)計(jì)的視覺表達(dá)，所以設(shè)計(jì)協(xié)同就顯得尤為重要，那么什么是設(shè)計(jì)協(xié)同呢？指設(shè)計(jì)師在設(shè)計(jì)之初，即可開啟分享與協(xié)作，讓協(xié)同者盡可能早的參與到設(shè)計(jì)中，通過提供一系列工具，讓協(xié)同者有更加友好地體驗(yàn)，保證每個(gè)人都可以準(zhǔn)確找到相應(yīng)需求的內(nèi)容，并且快速提出修改意見與反饋。簡單地講，就是讓每個(gè)人都參與到設(shè)計(jì)過程中，以使最終的結(jié)果能夠滿足用戶的需求。
從產(chǎn)品功能邏輯層面來講，HMI設(shè)計(jì)的“復(fù)雜度”是具有有一定的“限制性”的，即保證安全第一，過度復(fù)雜的設(shè)計(jì)必然影響駕駛和乘坐人的安全。所以對(duì)于設(shè)計(jì)，是需要進(jìn)行全方位評(píng)估的，必然會(huì)涉及到不同的角色。同時(shí)隨著項(xiàng)目的不斷發(fā)展，設(shè)計(jì)團(tuán)隊(duì)也在不斷壯大，設(shè)計(jì)師之間的協(xié)作也越來越多，相應(yīng)的溝通和協(xié)作成本就會(huì)不斷增加。如何才能更高效的合作，并把設(shè)計(jì)質(zhì)量和一致性做得更好，是我們需要解決的問題。所以設(shè)計(jì)協(xié)同的最終目的是為了解決問題，做正確的事，讓設(shè)計(jì)師做真正該做的事情。
讓設(shè)計(jì)師專注于真正重要的事情，而不是把精力放在可以自動(dòng)化處理的事情上。對(duì)所有人員的工作進(jìn)行集中化管理，所有人員基于統(tǒng)一數(shù)據(jù)源進(jìn)行協(xié)作。
通過構(gòu)建團(tuán)隊(duì)資產(chǎn)庫，比如設(shè)計(jì)規(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)容，并快速提出修改意見與反饋，讓設(shè)計(jì)師更有針對(duì)性的解決問題，讓設(shè)計(jì)師無需做重復(fù)性的工作。
在HMI設(shè)計(jì)的工作流程中，主要涉及到的角色有產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、視覺設(shè)計(jì)師、研發(fā)工程師、測試工程師、項(xiàng)目經(jīng)理。
不同角色主要工作內(nèi)容是：
圍繞著HMI設(shè)計(jì)的整個(gè)工作流程是：
產(chǎn)品經(jīng)理確認(rèn)需求，輸出PRD文檔；交互設(shè)計(jì)師收到PRD文檔以后，基于需求，梳理功能，完善業(yè)務(wù)流程，完成交互文檔的制作，輸出UE文檔；視覺設(shè)計(jì)師在收到UE文檔以后，針對(duì)交互文檔中的流程頁面，進(jìn)行視覺設(shè)計(jì)，輸出UI文件給到研發(fā)同學(xué)；研發(fā)同學(xué)根據(jù)UI文件和交互文檔進(jìn)行代碼化，完成以后進(jìn)入測試環(huán)節(jié)，測試工程師和產(chǎn)品、交互、視覺都需要參與到測試過程中，當(dāng)完成測試工作以后進(jìn)行發(fā)版。
涉及角色
自己、設(shè)計(jì)師小團(tuán)隊(duì)。
痛點(diǎn)
工作中很多重復(fù)的內(nèi)容，比如：Button、List等使用的地方很多，如果每個(gè)元素都重新繪制，勢必會(huì)投入很多時(shí)間，同時(shí)因?yàn)槿藶橐蛩?，難免會(huì)出現(xiàn)不統(tǒng)一的地方。那么怎么樣解決這個(gè)問題呢？
協(xié)同方式
當(dāng)團(tuán)隊(duì)初期發(fā)展的時(shí)候，或者整個(gè)團(tuán)隊(duì)只有少數(shù)幾個(gè)設(shè)計(jì)師的時(shí)候，通過匯總通用樣式和組件，形成視覺指導(dǎo)Guide，方便通用樣式的復(fù)用，減少重復(fù)工作量，達(dá)到快速完成視覺設(shè)計(jì)的目的。
優(yōu)點(diǎn)
通過樣式庫和控件組件庫的搭建，形成了一定的共有樣式，方便復(fù)用，有效的減少了重復(fù)工作量。
缺點(diǎn)
由于控件組件庫是在設(shè)計(jì)進(jìn)行到一定程度以后提煉的，會(huì)存在滯后性，并且隨著設(shè)計(jì)工作越來越往后，會(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ì)越來越大，大家分工越來越細(xì)，想法越來越多，就會(huì)發(fā)現(xiàn)，復(fù)制粘貼guide的方式，已經(jīng)無法滿足團(tuán)隊(duì)的發(fā)展了，經(jīng)常出現(xiàn)組件不能滿足使用的情況，或者是組件相似但不知道怎么選擇等問題。
同時(shí)因?yàn)闆]有統(tǒng)一的流程，會(huì)發(fā)現(xiàn)不同的業(yè)務(wù)對(duì)于同一功能交互邏輯的不統(tǒng)一現(xiàn)象，比如：搜索是很多業(yè)務(wù)都會(huì)使用的功能，因?yàn)闆]有統(tǒng)一定義，有的業(yè)務(wù)會(huì)采用即時(shí)搜索模式，有的業(yè)務(wù)必須點(diǎn)擊搜索以后才可以進(jìn)行搜索，并且這種問題，前期很難發(fā)現(xiàn)，只有到了中后期走查的時(shí)候才會(huì)發(fā)現(xiàn)。
所以在后期會(huì)針對(duì)每一個(gè)差異點(diǎn)進(jìn)行統(tǒng)一，需要全流程重新來一遍，費(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)來指導(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è)問題，而是可以被復(fù)用的。這些標(biāo)準(zhǔn)也是為什么用戶能獲得一致的體驗(yàn)的原因。
通過設(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)的建立本文就不再過多描述，后續(xù)會(huì)出專門的文章進(jìn)行詳述，這里主要是講述設(shè)計(jì)系統(tǒng)搭建以后的協(xié)同方式。
設(shè)計(jì)系統(tǒng)的搭建需要專門的人或者團(tuán)隊(duì)進(jìn)行，當(dāng)搭建完成以后，需要輸出的資源有：UE控件組件庫、顏色/字體樣式庫、UI控件組件庫、UI控件組件說明文檔。這些資源各有什么用呢，接下來進(jìn)行詳細(xì)說明：
UE控件組件庫
提供給交互設(shè)計(jì)師，基于提供的內(nèi)容，交互可以快速的構(gòu)建界面、交互和流程等，就像搭樂高一樣。可以快速的構(gòu)建一些產(chǎn)品原型或者是實(shí)驗(yàn)性的功能，來進(jìn)行測試以快速驗(yàn)證想法。
顏色/字體樣式庫、UI控件組件庫
提供給UI設(shè)計(jì)師，形式可以是Sketch Libraries，一方面方便設(shè)計(jì)師調(diào)用，使不同的設(shè)計(jì)師的設(shè)計(jì)變得更加統(tǒng)一，且更加可預(yù)測，同時(shí)組件也可以讓設(shè)計(jì)師更多的時(shí)間專注于如何構(gòu)建更好的用戶體驗(yàn)，而不是去糾結(jié)于樣式的調(diào)整。
UI控件組件說明文檔
提供給研發(fā)，可以是pdf之類的文檔形式，主要是詳細(xì)的描述每一個(gè)組件的各種屬性，以及里面包含的交互邏輯等，幫助研發(fā)搭建起研發(fā)自己的底層代碼平臺(tái)。
那么這些資源和不同的角色之間是怎么協(xié)作呢？UE控件組件庫不需要常常更新，完成后給到交互設(shè)計(jì)團(tuán)隊(duì)，供交互設(shè)計(jì)師使用搭建UE文檔。在項(xiàng)目開始之前，負(fù)責(zé)設(shè)計(jì)系統(tǒng)的UI團(tuán)隊(duì)進(jìn)行顏色/字體樣式庫、UI控件組件庫制作，完成以后分享到團(tuán)隊(duì)內(nèi)，供業(yè)務(wù)設(shè)計(jì)師使用進(jìn)行界面設(shè)計(jì)，同時(shí)進(jìn)行UI控件組件說明文檔的編撰，完成以后提供給相應(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)的視覺界面進(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ì)師可以快速通過組件庫更新最新的視覺樣式，同時(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)目周期較長等特點(diǎn)，會(huì)出現(xiàn)需求經(jīng)常變更的情況，那么交互就需要不停的更新交互文檔，UI也需要不停的輸出視覺文檔，往往一個(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)行視覺設(shè)計(jì)，交互和設(shè)計(jì)完全可以合二為一，輸出一份高保真交互流程文檔，并且輸出的文檔可以供研發(fā)直接瀏覽器查看，而不需要像之前一樣，不停的進(jìn)行設(shè)計(jì)資源的輸出。極大的節(jié)省了設(shè)計(jì)師輸出時(shí)間。優(yōu)化了協(xié)作工作流。
優(yōu)點(diǎn)
協(xié)作設(shè)計(jì)，云端辦公，多角色參與。
一鍵獲取文件，不需要通過其他平臺(tái)轉(zhuǎn)化，步驟簡單；自動(dòng)生成代碼與標(biāo)注。設(shè)計(jì)稿修改后自動(dòng)更新，無需重復(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è)績，為了達(dá)到這個(gè)目標(biāo)，可以采取的方式大致分為兩種：
第一種是增加更多的人力，不管是招更多的人，還是增加更多的供應(yīng)商人員，都會(huì)增加業(yè)務(wù)支出，并且由于業(yè)務(wù)無法一直保證飽和，所以會(huì)出現(xiàn)一段時(shí)間忙的要命，招了很多人員，過了這段時(shí)間，業(yè)務(wù)不太多了，大家都閑了下來，但是開支還是必要的，所以這算是一種沒有辦法的辦法，對(duì)于團(tuán)隊(duì)或是公司來講，并不可持續(xù)。
另外一種方式就是重新梳理工作流，減少一些重復(fù)無意義的工作，比如像是系統(tǒng)設(shè)置等瀑布流式的界面，不同車型下的區(qū)別只來自于功能的有無，界面上并無太大區(qū)別，這里所說的工作，不僅僅指設(shè)計(jì)師的界面設(shè)計(jì)工作，同時(shí)也包括了研發(fā)同學(xué)的研發(fā)落地工作，同時(shí)因?yàn)檠邪l(fā)同學(xué)的適配，也會(huì)造成測試走查環(huán)節(jié)，這些都是一些重復(fù)性的工作量，所以是否有一種更好的協(xié)作方式可以避免這種情況的發(fā)生呢？
答案就是我們接下來要講的一種全新的工作模式：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的過程。然后將封裝好的組件通過低代碼平臺(tái)進(jìn)行屬性配置、搭建頁面、布局調(diào)整實(shí)現(xiàn)頁面的設(shè)計(jì)就是 D2C 的過程。通過平臺(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）的模式，簡單講就是研發(fā)同學(xué)把設(shè)計(jì)資產(chǎn)通過設(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í)完成了前端開發(fā)，接下來研發(fā)同學(xué)只需要根據(jù)拿到的界面添加簡單的邏輯就算完成了研發(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í)間集中在視覺表現(xiàn)上，有效提升了設(shè)計(jì)輸出的質(zhì)量，保證了產(chǎn)品的設(shè)計(jì)感。
對(duì)于大量適配項(xiàng)目的團(tuán)隊(duì)，可以由設(shè)計(jì)師直接配置項(xiàng)目組件，無需經(jīng)過研發(fā)，減少出錯(cuò)概率，極大提升工作效率。
缺點(diǎn)
前期需要研發(fā)同學(xué)代碼化基礎(chǔ)控件，所以需要投入人力、精力進(jìn)行前期的工作。
由于控件提前進(jìn)行了代碼化，后續(xù)可能會(huì)出現(xiàn)無法滿足業(yè)務(wù)需求等情況出現(xiàn)，所以需要有人及時(shí)對(duì)代碼進(jìn)行維護(hù)更新。
涉及角色
產(chǎn)品、UE、UI、研發(fā)、測試。
痛點(diǎn)
基于上面講述的C2D2C模式，已經(jīng)完成了一個(gè)共享平臺(tái)的搭建，由于配置需要研發(fā)的參與，所以始終需要研發(fā)同學(xué)作為集成人員，并不利于其他角色的使用，那么怎么樣可以讓產(chǎn)品同學(xué)，設(shè)計(jì)同學(xué)，或者說是普通用戶使用呢？
協(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è)性化需求，具體來講，就是把UI界面中元素提煉出相應(yīng)的功能，生成功能清單，通過選擇不同的功能，生成相對(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ì)更多更好的界面布局，視覺表現(xiàn)，然后研發(fā)把上述內(nèi)容通過代碼匯總進(jìn)我們的需求池中，擴(kuò)展我們的平臺(tái)豐富度。
HMI設(shè)計(jì)工作，就變成了：客戶在我們的配置面板中選擇需要的需求，喜歡的布局，想要的視覺，點(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ù)來講短期無法創(chuàng)造價(jià)值。
對(duì)于現(xiàn)在的行業(yè)環(huán)境，增速提效已經(jīng)達(dá)成了基本共識(shí)，設(shè)計(jì)協(xié)同就成了一個(gè)大課題，但是不同的企業(yè)，不同的團(tuán)隊(duì)面對(duì)的具體問題不一樣，可使用的資源也不太一樣，那么采用哪種協(xié)同方式并無定式，需要根據(jù)實(shí)際情況，進(jìn)行具體分析，畢竟效率的提升是為了創(chuàng)造最大的價(jià)值。我們所有的努力最終目的是為了解決問題，做正確的事。
作者：菘藍(lán)C 來源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)公司。
最近 AI 繪畫越來越成熟，能做的事情也越來越多，很多同學(xué)經(jīng)常在群里或私信中問我關(guān)于對(duì) AI 繪畫的觀點(diǎn)和看法，以及 AI 繪畫對(duì) UI 設(shè)計(jì)師有什么影響，所以今天獨(dú)立寫一篇內(nèi)容，來具體討論下這個(gè)話題。
首先輸出一個(gè)太長不看版的結(jié)論：
AI 繪圖可以協(xié)作 UI 設(shè)計(jì)師更快地完成一些邊角料工作，但無法取代 UI 設(shè)計(jì)師的核心價(jià)值，不會(huì)對(duì) UI 崗位造成大范圍沖擊……
那下面就來具體討論吧！
相信大家都有這種感覺，2022年開始，AI 繪畫突然就毫無征兆地火起來了，用火遍大街小巷來形容一點(diǎn)也不過分，當(dāng)我走在地鐵和機(jī)場等公共場所都能隨處可見 AI 繪畫作品的展示。
其實(shí)AI繪畫這個(gè)技術(shù)一直都有，比如 OpenAi 的 Dall·E，但真正產(chǎn)生質(zhì)變的時(shí)候是從 2022 年2月 Disco Diffusion 發(fā)布以后，讓 AI 繪畫的能力得到了質(zhì)的飛躍。
隨后一些使用它創(chuàng)作的作品開始流通，且在美國的某數(shù)碼繪畫比賽中由 AI 作品獲得冠軍，徹底吸引了公眾的視線。隨后，一系列新的 AI 繪畫工具開始開發(fā)和上線，包括目前為大家所熟知的 Stable Diffusion 和 Midjourney、NovelAI。
從上線到現(xiàn)在不到1年的時(shí)間里，這些軟件都完成了多次的大版本更新和迭代，讓 AI 繪圖的能力越來越強(qiáng)，準(zhǔn)確性越來越高，我們甚至很難想象再過五年以后會(huì)發(fā)展到什么可怕的地步。
除了目前已經(jīng)正式發(fā)布的繪圖工具外，還有很多新的產(chǎn)品正在熱火朝天的開發(fā)階段，如巨頭 Adobe 的 Firefly ，Stability 的新產(chǎn)品 REimagine 等。
產(chǎn)品的多樣性，差異化，以及本身的進(jìn)化，為視覺設(shè)計(jì)和藝術(shù)創(chuàng)作提供了全方位的支持和可能性，也對(duì)相關(guān)行業(yè)產(chǎn)生了巨大的沖擊。
我們不得不面臨一個(gè)很現(xiàn)實(shí)的問題，AI 是不是會(huì)取代大多數(shù)插畫、設(shè)計(jì)師？
這是很有可能的，不管是從網(wǎng)上，還是認(rèn)識(shí)的朋友學(xué)員那邊獲得的反饋，高度依賴插畫、場景建模的行業(yè)，都在受到 AI 的劇烈沖擊，有的將接入 AI 制定成 KPI 要求全團(tuán)隊(duì) ALL IN，有的在跑通AI工作流以后直接啟動(dòng)裁員進(jìn)程或關(guān)閉外包渠道。
AI 的出現(xiàn)對(duì)于美術(shù)行業(yè)，就像燃油車出現(xiàn)對(duì)馬車的革命，照相機(jī)的出現(xiàn)對(duì)手繪的沖擊，是非常值得思考的，因?yàn)槲覀兓蚨嗷蛏僖采碓谄渲小?/span>
因?yàn)樵诋a(chǎn)品方向，Midjourney 已經(jīng)可以通過指令生成用戶界面了，試用 ChatGPT-4 已經(jīng)可以用指令10秒創(chuàng)建一個(gè)可以操作和訪問的網(wǎng)頁，看起來未來已經(jīng)提前朝我們走來。
所以 UI 設(shè)計(jì)師是不是很快也要被取代直至消亡？
相信有長期看我們公眾號(hào)分享和公開課的同學(xué)，應(yīng)該知道我一直在強(qiáng)調(diào)，界面對(duì)于 UI 設(shè)計(jì)師的工作只是必要但占比并不高的部分，如果認(rèn)為我們的工作價(jià)值僅僅是最后產(chǎn)出的視覺界面，那淘汰多數(shù) UI 設(shè)計(jì)師的方式根本輪不到 AI 來動(dòng)手，按目前市面流通的前端框架和組件庫就夠了。
之所以有大量的現(xiàn)成素材、模版、組件庫，還不能淘汰 UI 設(shè)計(jì)師，原因就是整個(gè)項(xiàng)目設(shè)計(jì)過程中所需的變通、靈活性、抽象思維要求，是它們完全無法覆蓋的。
一個(gè)稍微成熟點(diǎn)的項(xiàng)目設(shè)計(jì)圖產(chǎn)出和交付，是需要經(jīng)過下面這個(gè)流程的：
從這個(gè)簡化的流程模型里，大家要明白專業(yè)的設(shè)計(jì)稿輸出是有 “黑箱” 加工步驟的，要在這階段，對(duì)工作的需求進(jìn)行大量的研究、分析，并做出決策確定出設(shè)計(jì)目標(biāo)或者方案。
在現(xiàn)代設(shè)計(jì)團(tuán)隊(duì)中，直接拿到需求就做設(shè)計(jì)稿的模式是很難產(chǎn)出高質(zhì)量設(shè)計(jì)的，或者應(yīng)對(duì)更專業(yè)嚴(yán)格的要求。設(shè)計(jì)師需要在這個(gè)階段投入大量精力，盡可能提升設(shè)計(jì)產(chǎn)生的價(jià)值，減少出現(xiàn)不良影響的風(fēng)險(xiǎn)，以及 —— 說服團(tuán)隊(duì)接受當(dāng)前的設(shè)計(jì)思路。
而這是 AI 繪圖完全無法實(shí)現(xiàn)的東西，我們使用 AI 繪畫僅僅是輸入做好的決策，讓它生成結(jié)果，但沒辦法通過輸入業(yè)務(wù)、需求的疑問，讓它給出一個(gè)有詳盡理由和邏輯的設(shè)計(jì)成果。
可能有同學(xué)會(huì)下意識(shí)的想到，那我們用 ChatGPT 這樣的工具，提出問題，讓它自己給出解答并直接給出繪圖指令操作繪圖工具生成界面，順帶再自己開發(fā)號(hào)產(chǎn)品，不就行了，一個(gè)人就是一個(gè)團(tuán)隊(duì)，人人都是產(chǎn)品經(jīng)理終于實(shí)現(xiàn)……
這個(gè)業(yè)務(wù)模型非常合理，看起來似乎完全可以實(shí)現(xiàn)。但真的有項(xiàng)目經(jīng)驗(yàn)的自己去思考一下，就會(huì)發(fā)現(xiàn)中間存在的問題無窮無盡。
第一點(diǎn)，“黑箱” 是給出問題答案的分析處理過程，ChatGPT 再怎么神通廣大，也需要我們?nèi)ソo到有效的問題和需求，它才能給你有用的答案。那么問題來了，你怎么和它描述具體的業(yè)務(wù)需求、產(chǎn)品需求、體驗(yàn)問題和各類用戶痛點(diǎn)？
以上一篇分享為例，我們優(yōu)化 Stable Diffusion 的輸入框，光和 AI 說優(yōu)化輸入框約等于廢話，你得告訴它怎么優(yōu)化，那怎么優(yōu)化這件事不就是得去找出原產(chǎn)品問題的缺陷嘛？如果我自己去找完缺陷了，那最后畫那點(diǎn)圖例的工作量有什么了不起的呢？
更何況一些復(fù)雜的業(yè)務(wù)，尤其是B端行業(yè)，完全無法用簡單的幾句話描述清楚，要搭配各種框架圖和流程圖，光開一個(gè)業(yè)務(wù)評(píng)審和培訓(xùn)的會(huì)議，可能就要花非常長的時(shí)間。
所以該用什么形式去和 AI 描述這些抽象的信息內(nèi)容？
第二點(diǎn)，還是以上面案例為例，在這個(gè)輸入框中，包含很多交互的小細(xì)節(jié)，輸入框內(nèi)光標(biāo)的操作，鍵盤的操作邊界在哪里，輸入文字后提示關(guān)聯(lián)的邏輯，不同輸入指令類型要區(qū)分怎么和 AI 描述，全都成為問題。
所以光生成一個(gè)界面是沒有意義的，這個(gè)界面做的再好看再美觀，也不代表它有真實(shí)落地的可能，只是完成了設(shè)計(jì)工作的一小部分而已。所以看到這里是不是感覺很熟悉？和我們?cè)谧凡ㄉ峡吹降母黝愶w機(jī)稿案例沒有太大的區(qū)別。
第三點(diǎn)，上面的模型只是一個(gè)非常簡化的流程，有過真實(shí)的項(xiàng)目經(jīng)驗(yàn)就應(yīng)該知道流程中會(huì)有反復(fù)拉鋸的事件，需求的變動(dòng)，設(shè)計(jì)稿的修改，方案的調(diào)整，這些零碎的工作去和 AI 提，你會(huì)發(fā)現(xiàn)有輸入問題的時(shí)間，可能設(shè)計(jì)早就修改完了。
尤其在最終的標(biāo)注和切圖環(huán)節(jié)，涉及到設(shè)計(jì)時(shí)對(duì)設(shè)計(jì)稿的制定，標(biāo)注和切圖實(shí)際上有很多主觀性和經(jīng)驗(yàn)化、場景化的輸出要求，它需要設(shè)計(jì)師在經(jīng)歷整個(gè)項(xiàng)目流程后自行判斷。
除了以上三點(diǎn)，還有很多其它的問題難以解決，而這些問題的總和，決定了沒有出現(xiàn)真正的人工智能之前，使用 AI 來輸出 UI 界面是一件不靠譜的事情。
只有視覺領(lǐng)域沒有前期那么多條條框框，也沒有后續(xù)一系列交付和維護(hù)需求的場景，才是 AI 真正產(chǎn)生價(jià)值和影響的方向。
用 AI 做 UI 設(shè)計(jì)不靠譜，但是不代表對(duì)UI設(shè)計(jì)師沒價(jià)值。這話聽著可能挺拗口的，但事實(shí)如此，因?yàn)樵趪鴥?nèi)的UI設(shè)計(jì)環(huán)境中，UI 設(shè)計(jì)師的工作內(nèi)容往往不局限于產(chǎn)品設(shè)計(jì)一個(gè)領(lǐng)域內(nèi)。
還包含下面這些操作：
我相信大多數(shù) UI 設(shè)計(jì)師做平面和運(yùn)營設(shè)計(jì)的感受就和上墳的狀態(tài)是一樣的，上墳起碼是懷有對(duì)先人獻(xiàn)花，做平面和運(yùn)營設(shè)計(jì)只會(huì)產(chǎn)生對(duì)自己深深的唾棄……
所以 AI 的出現(xiàn)可以很好的處理這部分的需求，比如一些雖然用處不大，但就是甲方還是老板就是想用的 3D 風(fēng)格圖標(biāo)。
或者，在登陸頁用的比較濫俗的 3D 場景背景，為了這樣的東西花很長的時(shí)間去建模和渲染，投入和收益是完全不成正比的。所幸使用 AI 也可以幫助我們非常短的時(shí)間內(nèi)獲取想要的效果。
還有就是各類運(yùn)營設(shè)計(jì)圖，互聯(lián)網(wǎng)運(yùn)營設(shè)計(jì)和一般的品牌廣告視覺比較起來，就是對(duì)創(chuàng)意性的忽視，畫面并不需要埋伏大量的隱喻、內(nèi)涵或故事，就是單純的應(yīng)景和吸引用戶注意力，這恰恰也是 AI 最適合輸出的東西。
包括廣告 Banner、H5、啟動(dòng)頁等，都可以通過 AI 快速生成一些高質(zhì)量的插畫，來替代我們自己從頭開始繪制的苦惱。
所以你看，對(duì)于我們職業(yè)價(jià)值不高的這些雜活，AI 都可以很好的去完成，而且可以肯定未來可以完成得越來越好，我們就可以節(jié)省更多的時(shí)間，不管是投入精力給體驗(yàn)和交互，還是準(zhǔn)點(diǎn)下班，都符合我們自身的利益。
所以，UI 設(shè)計(jì)師對(duì) AI 的態(tài)度并不是敵視和悲觀，而是要把它當(dāng)作救星和幫手，把我們從運(yùn)營設(shè)計(jì)的水火中拯救出來……
不僅是觀念上的調(diào)整，掌握一定的 AI 繪制技巧也是必要的，將他們?nèi)谌氲侥阏降墓ぷ髁鞒讨?，所需投入的精力也遠(yuǎn)遠(yuǎn)小于你從頭開始學(xué)插畫和 3D 渲染。
相信不久的將來，UI 設(shè)計(jì)師的招聘中部分要求手繪和建模的 JD，會(huì)替換成熟練使用 AI 繪圖。
作者：酸梅干超人 來源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)公司。
看完本篇文章，你會(huì)學(xué)到以下內(nèi)容：
1，什么是彈窗？
2，彈窗的規(guī)范如何定義？
3，彈窗使用規(guī)則是什么？
4，什么是抽屜？和彈窗對(duì)比優(yōu)缺點(diǎn)是什么？
一、什么是彈窗？
彈窗是在保留當(dāng)前頁面狀態(tài)的情況下，告知用戶并承載相關(guān)操作。
思考：彈窗里面哪些構(gòu)成原件可以根據(jù)業(yè)務(wù)屬性可以有可以沒有呢？
答案：標(biāo)題區(qū)和操作區(qū)。
二、彈窗的規(guī)范如何定義？
1、定義彈窗的大小規(guī)范
彈窗的的大小有兩種定義方式。一種是固定大小，一種是自定義大小。需要根據(jù)自己的業(yè)務(wù)場景二選一。
彈窗寬度一般定義為三種。分別為560px，720px，960px，都是8的倍數(shù)方便記憶。尺寸并不是定死的，可以根據(jù)自身業(yè)務(wù)場景調(diào)節(jié)。
彈框固定高度會(huì)有一個(gè)最小高度200px，一個(gè)最大高度560px。在其之間的高度是由內(nèi)容區(qū)的內(nèi)容決定，超過最大高度560px時(shí)出滾動(dòng)條。
彈窗自定義高度，只定義最大高度，隨著頁面拉升縮小，彈窗邊距不變。
2、定義彈窗內(nèi)容規(guī)范
定義：標(biāo)題欄操作欄高度，內(nèi)容區(qū)邊距。
3、彈窗類型
彈框類型是根據(jù)使用場景區(qū)分提示彈窗，自定義彈窗兩種
彈窗優(yōu)點(diǎn)：沒有跳出父級(jí)頁面，彈窗任務(wù)完成后仍然會(huì)留在父頁面進(jìn)行操作，減少用戶操作中步驟體感
彈窗缺點(diǎn)：信息承載量少，信息內(nèi)容過多的時(shí)候會(huì)出現(xiàn)上下左右滾動(dòng)條，彈窗會(huì)降低用戶操作效率
三、彈窗使用規(guī)則是什么？
1、不超過兩種操作選項(xiàng)
假如承載的操作項(xiàng)比較多，建議新跳轉(zhuǎn)一個(gè)落地頁。
2、多步驟操作，選擇用頁面承載
3、盡量避免彈窗疊彈窗
第一個(gè)彈窗的內(nèi)容考慮用頁面承載或者第二個(gè)彈窗是否可以用氣泡或者下拉來承載。
假設(shè)一定要疊，二級(jí)彈窗的復(fù)雜度要低于一級(jí)彈窗，滿足形式上的平衡，遵循從大到小的邏輯或者是覆蓋上級(jí)，完成任務(wù)后點(diǎn)“返回”返回。
四、什么是抽屜？和彈窗相比優(yōu)缺點(diǎn)是什么？
抽屜是信息承載量和頁面比肩，又兼具彈窗的優(yōu)點(diǎn)。
作者：鯤sky 來源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)公司。
看完本篇文章，你會(huì)學(xué)到以下內(nèi)容：
1， 什么是表單頁？
2，表單頁設(shè)計(jì)原則
3，表單的構(gòu)成
4，表單的交互
5，頁面布局
6，提升表單易用性
7，體驗(yàn)衡量指標(biāo)
1、采集/錄入數(shù)據(jù)信息。2、編輯數(shù)據(jù)信息。3、特殊的條件設(shè)置。后臺(tái)產(chǎn)品的本質(zhì)是針對(duì)數(shù)據(jù)的增、刪、改、查。而增、改、查都可以用表單完成。
OA系統(tǒng)里面的請(qǐng)假申請(qǐng)，報(bào)銷申請(qǐng)，錄入員工，新建會(huì)議。教育類的創(chuàng)建課程。HRM系統(tǒng)里面發(fā)布職位以及物聯(lián)網(wǎng)管理系統(tǒng)新建設(shè)備等等。
用戶快速定位重要信息和目標(biāo)選項(xiàng)同時(shí)文案和組件能夠準(zhǔn)確傳達(dá)相應(yīng)含義
整體表單排布有合理的交互形式；科學(xué)的信息布局和組織形式；盡可能“少操作一步”用戶在面對(duì)50和表單和500個(gè)表單的心理壓力是不一樣的。
操作前：提示和防錯(cuò)。
操作中：實(shí)時(shí)反饋與糾錯(cuò)
操作后：合理的保存、清空、取消、撤銷機(jī)制。
表單通常由表單標(biāo)簽、表單域、提示提示、操作按鈕四部分構(gòu)成。
左標(biāo)簽
優(yōu)點(diǎn)：表意明確，節(jié)約縱向空間，多用于web端
缺點(diǎn)：不太適用于移動(dòng)端等狹長空間
頂標(biāo)簽
優(yōu)點(diǎn)：對(duì)齊舒適，節(jié)約橫向空間，多用于移動(dòng)端及英文場景下。
缺點(diǎn)：縱向空間利用率不高
行內(nèi)標(biāo)簽
優(yōu)點(diǎn)：最節(jié)省空間，多用于注冊(cè)登錄
缺點(diǎn)：輸入狀態(tài)標(biāo)簽消失，用戶陷入迷茫
左對(duì)齊標(biāo)簽
視線從標(biāo)簽移動(dòng)到表單域時(shí)間為500ms，這比右對(duì)齊標(biāo)簽所用的時(shí)間長的多，所以更適合閱讀，用于詳情的陳列。
特點(diǎn)：閱讀效率高，操作效率較低；
右對(duì)齊標(biāo)簽
視覺動(dòng)線參差不齊，不適合高效閱讀，但適合高效操作，更適合表單填寫。
特點(diǎn)：閱讀效率不高，標(biāo)簽指向明確，操作效率高
步驟一：根據(jù)業(yè)務(wù)已經(jīng)有的字段長度定義4-5種寬度規(guī)范，建議寬度可以是8或者是40的倍數(shù)。
步驟二：根據(jù)你要搭建的表單，選用合適的規(guī)范，長度與輸入預(yù)期成正比。有人會(huì)說排出來的表單左邊沒對(duì)齊，右邊也沒對(duì)齊，其實(shí)這就是B端產(chǎn)品特征那就是是好用大于好看，就要給用戶一種心智那就是給你的這個(gè)長度那就是要輸入一個(gè)這么長的內(nèi)容。
避免“正確的廢話”：給不到用戶任何的幫助還增加了用戶的閱讀成本。
按鈕常見位置：一般出現(xiàn)在頁面頂部、跟隨表單里的內(nèi)容、表單內(nèi)容底部、頁面底部。
按鈕閱讀順序：按鈕出現(xiàn)頁面右上角或右下角時(shí)，閱讀順序是從右往左，這符合pc端操作習(xí)慣以及人閱讀習(xí)慣。按鈕跟隨表單內(nèi)容或在表單內(nèi)容底部時(shí)，閱讀順序?yàn)閺淖笸?，這符合人的填寫順序從上往下，從左往右。
底部按鈕右對(duì)齊：一般用在彈框，因?yàn)閺椏蝽撁姹容^小，右對(duì)齊比較符合操作習(xí)慣。
底部按鈕居中：一般用在頁面中，因?yàn)橛蚁陆遣僮骶嚯x會(huì)有點(diǎn)遠(yuǎn)，所以表單用頁面承載的話按鈕建議居中。
表單中字體全部統(tǒng)一采用14px。表單上下間距一般有三種，1.內(nèi)容與內(nèi)容間距為24px。2.內(nèi)容與說明文案間距為4px。3.內(nèi)容與子內(nèi)容間距以及及子內(nèi)容之間的間距為8px。
表單交互方式有四種。1.原位編輯；2.氣泡卡片；3.彈窗/抽屜；4.頁面跳轉(zhuǎn)。
原位編輯
編輯內(nèi)容即為展示內(nèi)容，容量低于5個(gè)時(shí)使用。
氣泡卡片
設(shè)置項(xiàng)與看板內(nèi)容緊密相關(guān)時(shí)使用氣泡卡片，建議設(shè)置項(xiàng)低于5個(gè)。
彈窗/抽屜
設(shè)置項(xiàng)與看板內(nèi)容可以有關(guān)聯(lián)也不可以沒有，大于三個(gè)以上的錄入項(xiàng)使用。
如果錄入項(xiàng)較多，用彈框承載出現(xiàn)翻頁的情況下可考慮使用抽屜。
頁面跳轉(zhuǎn)
如果容量超出了彈框/抽屜的承載量并且錄入項(xiàng)與看板沒有那么強(qiáng)的關(guān)聯(lián)性可采用頁面跳轉(zhuǎn)的方式。
頁面布局方式有四種。1.分組；2.錨點(diǎn)定位；3.標(biāo)簽頁；4.分步驟
5.1.1標(biāo)題分組
設(shè)置項(xiàng)超過7個(gè)；彼此間的關(guān)聯(lián)性較弱且可以分類去歸納
5.1.2卡片分組
有多個(gè)設(shè)置項(xiàng)，多個(gè)分類；彼此之間的關(guān)聯(lián)性更弱，分類明確
有多個(gè)分類的情況可通過錨點(diǎn)定位迅速找到相關(guān)信息
彼此之間沒有特定的相關(guān)性，可以獨(dú)立設(shè)置。每個(gè)設(shè)置包含了多個(gè)錄入項(xiàng)且使用了標(biāo)題分組。
小結(jié)
當(dāng)錄入項(xiàng)少于7個(gè)時(shí)使用基礎(chǔ)布局；當(dāng)錄入項(xiàng)在7-15個(gè)時(shí)可采用標(biāo)題分組，卡片分組、錨點(diǎn)定位布局；當(dāng)錄入項(xiàng)大于15個(gè)時(shí)需采用標(biāo)簽頁布局。
利用步驟條將大型，復(fù)雜任務(wù)拆解為多個(gè)部分，并按照相關(guān)性分組。
建議3種分組依據(jù)
1.采用必填項(xiàng)劃分，把必填的選項(xiàng)分在一起；2.采用相關(guān)性劃分；3.以操作成本劃分。把好填的簡單的表單放在前面，復(fù)雜的放在后面。
提升表單易用性方式有5種。1.信息降噪；2.清晰易讀；3.高效智能；4.防錯(cuò)糾錯(cuò)；5.所見即所得
場景一：當(dāng)表單中大多數(shù)都是必填只有極少數(shù)非必填時(shí)
場景二：表單項(xiàng)非必填項(xiàng)比較多，可將低頻的非必填項(xiàng)收起
場景一：盡量采用單列布局，視覺動(dòng)線流暢，不容易遺漏信息；按enter鍵換行。
場景二：如果出于業(yè)務(wù)方需要，必須在橫向添加內(nèi)容，那最好有一定的分組依據(jù)。但這樣就不應(yīng)該出現(xiàn)豎向分組，以免遺漏信息。
6.3.1根據(jù)上下文信息可以自動(dòng)獲取的，無需用戶再次填寫。
例如根據(jù)手機(jī)號(hào)帶出用戶姓名；根據(jù)地址帶出郵政編碼；根據(jù)身份信息帶出生日。
6.3.2提供合適的“默認(rèn)項(xiàng)”。
例如根據(jù)行業(yè)現(xiàn)狀提供常規(guī)的比例分配；根據(jù)定位把地區(qū)做默認(rèn)的填充。
6.3.3提供搜索、聯(lián)想，自動(dòng)顯示匹配的信息
用戶在進(jìn)行輸入等操作時(shí)可以提供智能輔助，例如表單填寫時(shí)對(duì)需要錄入信息的區(qū)域提供輔助提示，通過自動(dòng)補(bǔ)全或聯(lián)想詞來幫助用戶快速錄入信息，在保持用戶的操作自由度的情況下提效。
6.3.4 OCR識(shí)別文件內(nèi)容
對(duì)于一些標(biāo)準(zhǔn)證件信息的錄入，可以通過OCR識(shí)別文件內(nèi)容。當(dāng)用戶上傳圖片后，運(yùn)用圖像識(shí)別技術(shù)提取關(guān)鍵信息并自動(dòng)填入結(jié)果。
6.4.1對(duì)于長數(shù)字，四位一空格，用來分段
例如輸入銀行卡號(hào)；充值場景下輸入手機(jī)號(hào)等
6.4.2為用戶封閉不正確道路
將超出時(shí)間選擇范圍的日期置灰。電話號(hào)、身份證錄入時(shí)只允許輸入數(shù)字同時(shí)設(shè)置字?jǐn)?shù)上限。
6.4.3告訴用戶哪里錯(cuò)了，而非簡單粗暴的錯(cuò)誤提示
表單頁對(duì)填寫的物料內(nèi)容進(jìn)行映射，展示真實(shí)效果預(yù)覽，降低用戶心理的不確定性。適合對(duì)移動(dòng)端、小程序、H5頁面的設(shè)置。
體驗(yàn)衡量指標(biāo)有4種。1.任務(wù)完成率；2.任務(wù)完成時(shí)長；3.必填項(xiàng)目數(shù)；4.易用度評(píng)分
7.1任務(wù)完成率
7.2任務(wù)完成時(shí)長
7.3必填項(xiàng)目數(shù)
結(jié)合業(yè)務(wù)場景給出最適合的必填項(xiàng)設(shè)定，提高用戶填寫效率。
7.4易用度評(píng)分（用戶完成某項(xiàng)任務(wù)的難易程度）
易用度可通過調(diào)研問卷和評(píng)分量表獲取。
作者：鯤sky 來源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)場的品牌化
二、情感化的彈窗設(shè)計(jì)
三、最小化顯示提高空間利用率
四、動(dòng)態(tài)化的設(shè)置引導(dǎo)
五、沉浸式的活動(dòng)氛圍設(shè)計(jì)
六、人性化的提示設(shè)置
七、動(dòng)態(tài)感知的溫度設(shè)計(jì)
八、無處不在的廣告位開發(fā)
九、主題化的圖標(biāo)設(shè)計(jì)
十、新穎的卡片式設(shè)計(jì)
一、Banner 輪播轉(zhuǎn)場的品牌化
立足于品牌做設(shè)計(jì)，才能強(qiáng)化自身產(chǎn)品的差異化。如何在更多設(shè)計(jì)場景中融入品牌基因，是設(shè)計(jì)師需要深入思考的關(guān)鍵。
最近在使用騰訊視頻 APP 時(shí)，發(fā)現(xiàn)首頁 Banner 圖在輪播的轉(zhuǎn)場過程中，以品牌 LOGO 造型作為轉(zhuǎn)場過度。一個(gè)小小的細(xì)節(jié)強(qiáng)化了用戶對(duì)于品牌的記憶度，也體現(xiàn)出專屬的設(shè)計(jì)差異。
二、情感化的彈窗設(shè)計(jì)
通過彈窗設(shè)計(jì)可以提高用戶操作效率，也是傳播信息（活動(dòng)/廣告）最直觀的形式。但是體驗(yàn)多了用戶便會(huì)開始排斥，提高彈窗的情感化設(shè)計(jì)變得尤為重要，降低用戶的排斥感才能提高彈窗的作用。
很多娛樂影視等 APP 都會(huì)有“青少年模式”彈窗提示，抖音將彈窗視覺表達(dá)融入了精美的國風(fēng)插畫。也通過針對(duì)性的內(nèi)容作為設(shè)置的引導(dǎo)，提高了用戶對(duì)“青少年模式”的深入理解，增強(qiáng)了體驗(yàn)的積極性。
插畫的形式在彈窗設(shè)計(jì)中表現(xiàn)比較突出，比如嘀嗒出行 APP 將“推送通知”的彈窗設(shè)計(jì)運(yùn)用插畫增強(qiáng)情感化表達(dá)。相較于生硬的表達(dá)方式用戶更能接受，通過營銷的文案引導(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í)慣和操作方式選擇收起/展開，提高了當(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)用戶開啟通知權(quán)限的設(shè)計(jì)中，采用了動(dòng)態(tài)畫面的表達(dá)來強(qiáng)調(diào)開啟通知的利好政策，以此來攻破用戶的心理防備。相較于生硬的彈窗提示，動(dòng)態(tài)的表達(dá)和引導(dǎo)性的文案更能拉近與用戶的距離感。
五、沉浸式的活動(dòng)氛圍設(shè)計(jì)
沉浸式的體驗(yàn)可以帶給用戶更好的場景感，提高用戶的參與度。在活動(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è)置
短視頻近些年改變了大家的生活方式和娛樂形式，也有用戶容易過度依賴進(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)餐之后，首頁會(huì)顯示配送情況和當(dāng)前的天氣溫度，背景以動(dòng)態(tài)的天氣畫面增強(qiáng)視覺感知。也希望用戶可以根據(jù)天氣情況對(duì)外賣員多一份理解，加強(qiáng)人與人之間的寬容心，帶給用戶更強(qiáng)的情感化體驗(yàn)。
最近在使用愛奇藝 APP 時(shí)，發(fā)現(xiàn)左上角的品牌位置也結(jié)合了天氣情況，結(jié)合頂部視覺區(qū)域的流體漸變，新增的天氣預(yù)報(bào)和品牌 LOGO 完美的通過動(dòng)效過度。整個(gè)設(shè)計(jì)表達(dá)流暢自然，感官體驗(yàn)也是非常值得學(xué)習(xí)的。
八、無處不在的廣告位開發(fā)
廣告是眾多產(chǎn)品實(shí)現(xiàn)流量變現(xiàn)的方式之一，廣告位的開發(fā)也是見縫插針，如何在僅有的空間增加更多廣告位，產(chǎn)品設(shè)計(jì)師也在不斷探索。
最近在使用騰訊視頻 APP 時(shí)，進(jìn)入到個(gè)人中心時(shí)會(huì)默認(rèn)有個(gè)下拉廣告。這個(gè)見縫插針的廣告位新增，對(duì)于設(shè)計(jì)師來說讓我感受到了廣告的無處不在，不過對(duì)于用戶來說是否會(huì)心生排斥感得通過數(shù)據(jù)去驗(yàn)證。但是作為產(chǎn)品設(shè)計(jì)師這也是一個(gè)啟發(fā)，將有限的空間進(jìn)行深度開發(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)品的視覺感知。
十、新穎的卡片式設(shè)計(jì)
卡片式設(shè)計(jì)已經(jīng)流行好幾年了，目前依然是非常普及的 UI 設(shè)計(jì)趨勢之一。如何進(jìn)一步強(qiáng)化卡片式設(shè)計(jì)的創(chuàng)新度，我們需要不斷的嘗試和總結(jié)。
嘩哩嘩哩 APP 的創(chuàng)作中心設(shè)計(jì)也許是一個(gè)不錯(cuò)的啟發(fā)，卡片內(nèi)部右上角的視覺強(qiáng)化使得原本普通的表達(dá)變得更有視覺感。突出的設(shè)計(jì)也成功的吸引了 UP 主的注意力，強(qiáng)化了該入口的點(diǎn)擊欲。這樣的設(shè)計(jì)表達(dá)在保留卡片式設(shè)計(jì)的基礎(chǔ)上，也是一種新穎的視覺表現(xiàn)，可以作為突出業(yè)務(wù)入口的表現(xiàn)方式進(jìn)行探索。
作者：黑馬青年 來源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)公司。
如何讓自己的產(chǎn)品在保證基本的可用性和易用性的同時(shí)，還能讓界面看起來柔和、更富有親和力？一個(gè)產(chǎn)品能留住用戶的雖然是內(nèi)容本身的質(zhì)量與吸引力，但一個(gè)小小的細(xì)節(jié)卻能夠阻止用戶的流失，成為內(nèi)容轉(zhuǎn)化的最后一道防線，讓人眼前一亮，值得借鑒。
體驗(yàn)?zāi)夸洠?/strong>
01. 【剪映】化繁為簡，突破性的C端深度編輯交互界面！
02.【剪映】組合操作，簡化界面跳轉(zhuǎn)的“批量編輯”
03.【必剪】軌道按鈕文案自適應(yīng)滑動(dòng)跟隨
04.【剪映/IOS】首頁新增（試試看）教程專區(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)，并且用極為精簡易懂的文案，對(duì)功能進(jìn)行了一個(gè)充分的描述。這一舉動(dòng)，大大降低了用戶對(duì)剪輯軟件復(fù)雜功能的理解門檻，用一種整合式的思維，提供功能給用戶合成使用。這簡單易懂的交互體驗(yàn)，也大大提高了用戶的黏度，忠誠度。讓小白用戶接觸了剪映后，再也無法回到Ae、Pr了。
交互思考：
在AI人工智能浪潮下，一切機(jī)器輔助，機(jī)器完成，需要人效的地方越來越少，在這大背景下，我們軟件的用戶只會(huì)變得越來越懶。
在新時(shí)代的背景下，我們UI、交互設(shè)計(jì)師，需要一種寶貴的「化繁為簡」能力，在不影響最終呈現(xiàn)效果的前提下，將一個(gè)軟件的交互體驗(yàn)，文案、功能理解，以及功能使用操作做得越簡單，用戶的黏度，忠誠度就會(huì)越高。
一個(gè)工具類APP何為「好用」？也許就是像剪上映一樣，“化繁為簡，成效依然”
產(chǎn)品體驗(yàn)：
在剪映中，識(shí)別字幕的交互邏輯，是自動(dòng)識(shí)別所有視頻片段的語音，并且插入時(shí)間線中，識(shí)別字幕是【批量進(jìn)入時(shí)間軸】的。所以想統(tǒng)一進(jìn)行編輯，得一個(gè)個(gè)反復(fù)選中，然后逐一檢查，這種累人的交互體驗(yàn)，讓用戶用了第一次就不會(huì)想用第二次。
剪映推出了「批量編輯」交互功能。
語音識(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)，讓用戶無論滑動(dòng)到何處，什么位置，都能清晰的知道軌道的應(yīng)用名稱，而不會(huì)出現(xiàn)混淆的情況。最大程度上，減輕了用戶的理解成本
設(shè)計(jì)思考：
當(dāng)我們的圖標(biāo)，功能板塊，或者某些重要信息，被用戶左右、上下滑動(dòng)導(dǎo)致超出屏幕展示區(qū)域，用戶想回頭找到這些元素，就得重新滑動(dòng)到對(duì)應(yīng)位置，走一趟“回頭路操作” 。這對(duì)用戶來說其實(shí)是不便捷的，對(duì)交互設(shè)計(jì)來說，是不聰明的
我們可以利用【必剪】的文字跟隨交互，來舉一反三，讓一些重要的功能，信息區(qū)域，隨著用戶的滑動(dòng)而自適應(yīng)跟隨，最大限度地保證用戶他不錯(cuò)過這些重要的功能、信息。
產(chǎn)品體驗(yàn)：
在用戶（特別是大齡用戶），在初次使用【剪映】這種有一定入門難度的APP的時(shí)候，其實(shí)都是感到陌生的，新手指引雖然能一定程度解決此問題，但是新手引導(dǎo)只能在第一次打開APP時(shí)展示，而且新手指引有非常強(qiáng)的局限性，它只能告訴能這功能要怎么用，而無法告訴你這功能的使用場景。
所以在首頁中新增一個(gè)軟件使用技巧、教程專區(qū)，可以讓有需要的用戶第一時(shí)間觀看課程，入門軟件，而且課程用戶可反復(fù)觀看，不像新手指引般一次性展示。
這種交互體驗(yàn)，大大減輕了用戶入門軟件的難度。
設(shè)計(jì)思考：
在我們?cè)O(shè)計(jì)的產(chǎn)品是一個(gè)工具型軟件，且有一定入門、使用難度的時(shí)候，不妨參考一下【剪映】的首頁+軟件使用教程 的交互思維。
用最低成本教會(huì)用戶如何使用這個(gè)軟件，而且展示位置是每次打開APP時(shí)都會(huì)看到的首頁，不用擔(dān)心一些粗心的用戶錯(cuò)過。
產(chǎn)品體驗(yàn)：
在剪映Tap欄中，有一個(gè) “剪同款” 功能，選中對(duì)應(yīng)的視頻模版后，填入自己相冊(cè)的素材，聽過自動(dòng)剪輯，特效覆蓋，自動(dòng)填充文字、BGM等一系列操作，支持用戶一鍵快速成片。
設(shè)計(jì)思考：
在流量為王的時(shí)代，內(nèi)容輸出效率就代表了一切，剪映的 “剪同款” 功能，就是讓用戶的內(nèi)容輸出效率大大提高，將輸出內(nèi)容的過程簡單化，無腦化，用戶無需再去想用什么創(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)容，大大增加視覺傳達(dá)效率。
讓用戶不會(huì)被窗口高度限制，更高效地瀏覽、選用列表中的元素，增加產(chǎn)品功能成效效率
設(shè)計(jì)思考：
當(dāng)我們的瀏覽窗口，因UI布局高度受限時(shí)，設(shè)計(jì)師可以通過【窗口隨著滑動(dòng)響應(yīng)移動(dòng)】的交互方式，使得界面UI交互更多變幻，更為靈活。
產(chǎn)品體驗(yàn)：
在剪輯APP中，難免會(huì)有許多種類不同，作用各樣的模塊，但是剪輯軌道UI展示的空間有限，如果沒有分區(qū)思維，那么整個(gè)剪輯軌道將會(huì)變得雜亂不堪，用戶用久了看到各種軌道模塊，也會(huì)疲勞過載
而剪映提供的UI解決方案也非常值得參考，將各種不同種類的效果軌道模塊，分區(qū)展示，在用戶點(diǎn)擊【特效】前，剪輯軌道不展示所有的【特效模塊】，在用戶點(diǎn)擊【特效】功能后，才展示對(duì)應(yīng)的【特效模塊】軌道
設(shè)計(jì)思考：
在我們面對(duì)多種不同類型，但是作用相同對(duì)象的作用對(duì)象時(shí)，利用交互思維，在UI界面上進(jìn)行視覺分類很重要，否則你整個(gè)APP的操作界面將會(huì)雜亂無章。
剪映給了我們一個(gè)很好的參考，就是將不同種類的對(duì)象 【分區(qū)展示，分區(qū)管理，分區(qū)操作】，最大限度的保證交互界面的簡潔舒適，且分類也能讓用戶更好的“點(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í)長3s，那么系統(tǒng)播放完3s特效效果后會(huì)自動(dòng)暫停，不會(huì)繼續(xù)播放）
用戶可以直接了當(dāng)?shù)夭榭刺匦c畫面融合的效果，而不用選中后，再點(diǎn)擊播放預(yù)覽效果，覺得效果不滿意，還得反復(fù)切換。這種交互方式，大大節(jié)省了用戶的選擇模版時(shí)間，讓其成為（選擇+預(yù)覽=選中） 的高效交互流程
設(shè)計(jì)思考：
在我們?cè)O(shè)計(jì)一些需要實(shí)時(shí)預(yù)覽的功能時(shí)，我們不妨參考一下剪映的（選擇+預(yù)覽=選中）的高效交互流程，讓用戶免去反復(fù)操作預(yù)覽，重復(fù)選擇的無效交互，提升用戶在工具型APP的內(nèi)容輸出效率
產(chǎn)品體驗(yàn)：
當(dāng)用戶在剪映中喚起濾鏡功能列表時(shí)，難免會(huì)感到驚訝，以及提出疑問：“為什么剪映要用單行瀏覽這種低效的交互方式？”
但是只要你仔細(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ì)方式，來防止我們?cè)O(shè)計(jì)的列表在視覺交互上顯得雜亂無章
作者：堅(jiān)行 來源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)公司。
追波年度最佳作品來自大家最熟悉的UI8團(tuán)隊(duì)中的Tran Mau Tri Tam ?，作者來自越南西貢，最佳作品截止目前355K瀏覽量，2933個(gè)贊。
為什么看似平平無奇的作品卻能獲得追波年度最佳作品呢？既不是C端也不是純B端的作品，更像一個(gè)網(wǎng)頁與平面的結(jié)合體。如果去掉搜索圖標(biāo)、分類圖標(biāo)和按鈕，你可以理解它就是一個(gè)平面作品，一個(gè)字體加幾何形體構(gòu)建的作品，為了豐富畫面的層次，讓畫面更加的活潑采用了多彩加幾何色塊，讓標(biāo)題閱讀有停頓感和呼吸感。faster底部的橫線讓它從標(biāo)題文字中脫穎而出，這種使用線條突出重要信息的設(shè)計(jì)也是今年追波設(shè)計(jì)流行趨勢之一。
MetroUI是Windows8的界面設(shè)計(jì)語言，在2010年至2013年間曾經(jīng)風(fēng)靡一時(shí)，那也是移動(dòng)互聯(lián)網(wǎng)的發(fā)展元年，現(xiàn)在國家推行實(shí)體經(jīng)濟(jì)、數(shù)字化帶動(dòng)To B 、To G 的發(fā)展元年，通過幾何色塊（MetroUI）實(shí)現(xiàn)B端產(chǎn)品與C端設(shè)計(jì)風(fēng)格的傳承與銜接，你會(huì)發(fā)現(xiàn)歷史總是驚人的相似。最后背景結(jié)合今年最流行的微軟風(fēng)，毛玻璃的多彩高斯模糊漸變風(fēng)，年度作品當(dāng)之無愧。
最后來看下按鈕的設(shè)計(jì)，正常的按鈕要么文字加色塊，要么左圖標(biāo)加右文字，它設(shè)計(jì)成左文本加右圖標(biāo)，更加注重信息的可讀性和易讀性，也體現(xiàn)B端設(shè)計(jì)重功能和交互體驗(yàn)，視覺點(diǎn)到為止的設(shè)計(jì)理念。
下面我們來欣賞年度最佳作品里面的流行趨勢吧。
字體三原則：可讀性、易識(shí)性、易讀性。當(dāng)你同時(shí)讀一篇文言文和一篇設(shè)計(jì)文章，肯定設(shè)計(jì)文章的內(nèi)容可讀性更好。易識(shí)性是用在字體設(shè)計(jì)上，不能過于浮夸的改變字體骨架、形體而不易識(shí)別。易讀性和每個(gè)位設(shè)計(jì)師都息息相關(guān)，因?yàn)槲覀兌夹枰幣盼谋?。?dāng)我們小時(shí)候?qū)懽魑臅r(shí)，不會(huì)寫的文字可以用拼音代替。這時(shí)候讀者讀到拼音時(shí)會(huì)有停頓感，更加適合用戶閱讀。
通過給用戶制作停頓感來增加用戶的易讀性。可以在相關(guān)聯(lián)文本后面添加圖片、表情、圖標(biāo)來更好的理解文本內(nèi)容，豐富文本內(nèi)涵。比如情侶間表達(dá)愛意時(shí)會(huì)輸入文本，“我愛你”、“我Love你”、“我ai你”、“我??你”，哪個(gè)更加會(huì)有情感共鳴呢？不言而喻，相信你心中已經(jīng)有答案了。
在標(biāo)題文字上添加曲線來突出重要文案是2021追波最流行的趨勢之一，第一個(gè)設(shè)計(jì)目的就是突顯文字，其次就是想表現(xiàn)鉛筆真實(shí)書寫的感覺。之前很多帶有簽名的設(shè)計(jì)中，簽字的文本都是手寫體的感覺，手寫體對(duì)比電腦的機(jī)械字體會(huì)帶有一種人文氣息，也會(huì)讓兩者之間產(chǎn)生一種對(duì)比、矛盾。
除了突顯文本外，曲線還有視覺引導(dǎo)的作用。通過視覺引導(dǎo)讓用戶按照設(shè)計(jì)師編排的順序進(jìn)行瀏覽界面。當(dāng)然還有比這更科學(xué)的工具就是眼動(dòng)儀測試，通過真實(shí)用戶眼睛瀏覽界面顯示對(duì)應(yīng)的熱點(diǎn)圖。
多彩高斯?jié)u變風(fēng)是從色彩的角度來傳達(dá)和豐富畫面的，多彩高斯?jié)u變風(fēng)其實(shí)是從制造矛盾到平衡矛盾的過程，多彩漸變多為冷暖對(duì)比來制造畫面的沖突，需要控制冷暖畫面的大小來實(shí)現(xiàn)平衡。主流的還是以暖色突顯為主。多彩漸變主要起到活躍氣氛、吸引目光、平衡畫面的作用。
多彩高斯?jié)u變還可以結(jié)合輕擬物、幾何圖形、三維等新的組合方式去創(chuàng)新，給用戶呈現(xiàn)一種更加新穎的視覺表現(xiàn)形式。最后我們還是要回歸到內(nèi)容上，為了更好的傳達(dá)信息需要去設(shè)計(jì)與內(nèi)容相匹配的視覺風(fēng)格。
B端設(shè)計(jì)的火爆帶動(dòng)了B端相關(guān)模塊設(shè)計(jì)，更多的人也愿意嘗試B端相關(guān)模塊設(shè)計(jì)，側(cè)邊欄作為產(chǎn)品架構(gòu)中重要的導(dǎo)航系統(tǒng)，好的側(cè)邊欄設(shè)計(jì)能為用戶帶來更好的效率。主流側(cè)邊欄都做了展開、收起、拖拽等交互效果，也是受限于PC屏幕為展示更多數(shù)據(jù)而騰空間。側(cè)邊欄主要承擔(dān)的功能有導(dǎo)航、分類、自定義篩選、共享、新增等。追波的B端產(chǎn)品設(shè)計(jì)已經(jīng)不再是假大空概念設(shè)計(jì)，而是一套實(shí)用美觀可落地的設(shè)計(jì)。
儀表盤設(shè)計(jì)是一個(gè)很好的隱喻，想象一下開摩托車或汽車主駕駛前面的屏幕，汽車儀表有燃油表、車速表、里程表、水溫表、轉(zhuǎn)速表、故障指示燈等。B端類產(chǎn)品后臺(tái)界面的儀表盤設(shè)計(jì)也需要展示一些重要的數(shù)據(jù)和各種狀態(tài)，大體分為側(cè)標(biāo)欄、導(dǎo)航欄、待辦任務(wù)、個(gè)人信息、報(bào)表數(shù)據(jù)、消息中心、快捷入口等。當(dāng)然最重要的就是報(bào)表數(shù)據(jù)，團(tuán)隊(duì)收益、任務(wù)進(jìn)度、轉(zhuǎn)化比例、新增、存量、團(tuán)隊(duì)工作時(shí)長等都是老板或領(lǐng)導(dǎo)關(guān)心的內(nèi)容。每個(gè)公司業(yè)務(wù)不同、每個(gè)人員權(quán)限不同，自定義的儀表盤也各有差異。重要的是突顯數(shù)據(jù)和業(yè)務(wù)狀態(tài)，需要分層級(jí)系統(tǒng)性去思考和設(shè)計(jì)。
復(fù)雜的事情簡單化，簡單的事情標(biāo)準(zhǔn)化，標(biāo)準(zhǔn)的事情流程化，流程的事情自動(dòng)化。流程設(shè)計(jì)是每一個(gè)企業(yè)核心功能和業(yè)務(wù)，可自定義的管理流程系統(tǒng)搭建也是B端產(chǎn)品設(shè)計(jì)的難點(diǎn)，需要對(duì)業(yè)務(wù)高度抽象，讓每一個(gè)業(yè)務(wù)人員可自定義的流程才是好的流程設(shè)計(jì)。
B端C化是B端產(chǎn)品設(shè)計(jì)的視覺表現(xiàn)力慢慢往C端產(chǎn)品設(shè)計(jì)的視覺靠齊，國內(nèi)B端產(chǎn)品界面設(shè)計(jì)視覺水平還有很大的提高空間。除了視覺上的提升外，由于業(yè)務(wù)的發(fā)展，B端產(chǎn)品也開始移動(dòng)化、智能化，國內(nèi)主流還是通過小程序、H5來現(xiàn)實(shí)B端產(chǎn)品C端化。
輕代碼化是一種低代碼賦能無代碼的方式，彌補(bǔ)無代碼拓展性差、覆蓋場景少的問題。在保有無代碼靈活、易用、快捷的同時(shí)，又能覆蓋低代碼使用場景。簡單理解就是無需代碼開發(fā)即可如搭積木般快速、靈活地創(chuàng)造屬于你的個(gè)性化管理系統(tǒng)，輕松實(shí)現(xiàn)多元業(yè)務(wù)場景的數(shù)字化管理。
輕代碼化將功能進(jìn)行打包，升級(jí)成全局可以用的配置，技術(shù)人員配置好后，業(yè)務(wù)人員在應(yīng)用編輯時(shí)直接選擇使用模版，綁定對(duì)應(yīng)的變量即可使用。
為什么人加色塊的組合方式能流行起來？還是B端行業(yè)流行帶動(dòng)的。B端講的更多的是企業(yè)對(duì)企業(yè)。企業(yè)對(duì)企業(yè)除了講行業(yè)解決方案外，還需要傳達(dá)公司的價(jià)值觀、使命、愿景。人加色塊的組合方式非常適合體現(xiàn)公司的企業(yè)文化。對(duì)于一家全球化的公司不同膚色的人物組合在一起，這種人文氣息和價(jià)值觀已經(jīng)就不言而喻了。
當(dāng)然企業(yè)也需要進(jìn)行營銷，抓人眼球。幾千年來的遺傳證明了，人的大腦對(duì)食物、性、動(dòng)的東西、人臉和眼睛、危險(xiǎn)的動(dòng)物很敏感。人加色塊的組合方式也具有抓人眼球營銷的功能。真可謂一舉兩得。
這種風(fēng)格更適合大公司，國內(nèi)的一些手機(jī)廠商OPPO、VIVO等也會(huì)通過手機(jī)+背景+人物來體現(xiàn)科技與人文的結(jié)合，而對(duì)于中小型公司產(chǎn)品差異化和行業(yè)解決方案展現(xiàn)應(yīng)該還是重中之重。
毛玻璃效果加大了模糊程度，透明效果更加扁平，很好的順應(yīng)當(dāng)下UI扁平化的設(shè)計(jì)趨勢。蘋果Mac OS Big Sur系統(tǒng)的圖標(biāo)、界面中運(yùn)用了大量毛玻璃和半透明元素，界面更扁平。至于C4D三維彩色玻璃的視頻教程可以在B站搜索“透光藝術(shù)-C4D創(chuàng)建彩色玻璃的4個(gè)技法”，完全能滿足UI設(shè)計(jì)師。當(dāng)然還有一個(gè)好消息就是Mac用戶可以享有OC一年免費(fèi)的使用權(quán)，具體安裝購買方法可以上“某寶”就可以輕松搞定，真香。
輕擬物這幾年一直流行，在UI設(shè)計(jì)中趨于穩(wěn)定的位置。從寫實(shí)到扁平再到輕擬物，其實(shí)是設(shè)計(jì)師們一路不斷探索的結(jié)果。本質(zhì)就是光影對(duì)形體產(chǎn)生的視覺感受。在色彩中對(duì)高光、亮面、明暗交界線、暗面、反光（環(huán)境光）五個(gè)部分的處理。寫實(shí)三維的圖標(biāo)等設(shè)計(jì)更適用于簡潔的畫面中，扁平等設(shè)計(jì)更適用于復(fù)雜一點(diǎn)的界面中，比如B端產(chǎn)品界面中的功能圖標(biāo)。輕擬物可使用的范圍更廣，效果更佳。Sketch、Figma軟件對(duì)于漸變、高光、投影、高斯模糊處理已經(jīng)非常簡單且出彩。
簡潔設(shè)計(jì)遵從了密斯·凡德羅的“少即是多”的設(shè)計(jì)原則，在B端產(chǎn)品界面中更加需要簡潔設(shè)計(jì)，我們最熟悉的Sketch軟件界面已經(jīng)是相當(dāng)?shù)暮啙嵙?。回到現(xiàn)實(shí)當(dāng)需求功能不斷增加，產(chǎn)品界面的編排如何取舍，如何保證界面的簡潔是設(shè)計(jì)師需要深度思考的問題？如何與上級(jí)溝通？該功能是否可做可不做？是否需要埋點(diǎn)用數(shù)據(jù)說話？如果只是一味競品有我們就需要有，功能不斷累加只會(huì)讓界面越來越重。
幾何圖形和幾何插畫有異曲同工之妙，幾何圖形多為產(chǎn)品界面和宣傳內(nèi)容的抽象，產(chǎn)品界面的幾何圖形多為占位符形式，加上色彩和幾何色塊讓其成為一個(gè)整體。B端產(chǎn)品視覺設(shè)計(jì)C端化的進(jìn)程中，幾何圖形、幾何色彩不失為最好的突破口，相信今年追波B端產(chǎn)品的視覺設(shè)計(jì)一定會(huì)更上一個(gè)臺(tái)階。
幾何圖形另一個(gè)場景化的地方就是品牌，作為一名UI設(shè)計(jì)師一定會(huì)經(jīng)歷從圖標(biāo)到幾何圖形到品牌設(shè)計(jì)的過程，品牌設(shè)計(jì)的技巧基本還是以幾何圖形為主，至于品牌的內(nèi)涵需要更深層次的解讀。掌握主流品牌設(shè)計(jì)的技巧對(duì)產(chǎn)品定位、品牌宣傳打下扎實(shí)的基礎(chǔ)。
暗黑模式的設(shè)計(jì)是解決在微弱環(huán)境下內(nèi)容也可以有更高的可讀性。隨著用戶夜晚及深夜使用電子設(shè)備時(shí)長增大，如何在夜晚這個(gè)特定場景下使用更加舒適。合理使用暗黑模式可以減輕眼睛疲勞，提高在夜間使用的可讀性。
在設(shè)計(jì)暗黑主題時(shí)，不能為了突顯視覺上的逼格，而去使用高飽和度鮮艷的色彩來突顯界面的品質(zhì)感。而應(yīng)該把舒適度、可讀性作為設(shè)計(jì)的衡量指標(biāo)。Material Design給出了暗黑主題的設(shè)計(jì)準(zhǔn)則，即正文和背景之間的對(duì)比度應(yīng)至少為15.8:1。按照此標(biāo)準(zhǔn)設(shè)計(jì)，可讀性都還不錯(cuò)。這里介紹一個(gè)插件“Stark”（Figma、Sketch、XD、Chrome插件）用來測試界面的對(duì)比度。
為什么叫模塊化，而不叫組件化，組件化更多的利用原子系統(tǒng)從原子、分子、組織、模版、頁面來快速的搭建界面，但在B端產(chǎn)品設(shè)計(jì)中基礎(chǔ)組件和業(yè)務(wù)組件的搭建是以提高工作效率為前提，是否有從0到1搭建B端產(chǎn)品組件的經(jīng)歷是設(shè)計(jì)師一生中最寶貴的經(jīng)驗(yàn)之一，它能提高設(shè)計(jì)師的系統(tǒng)化思維、邏輯思維和抽象思維能力。
產(chǎn)品模塊化設(shè)計(jì)就是將產(chǎn)品分成幾個(gè)部分，也就是幾個(gè)模塊，每一部分都是具有獨(dú)立功能，具有一致的連接接口和一致的輸入、輸出接口的單元，相同種類的模塊在產(chǎn)品族中可以重用和互換，相關(guān)模塊的排列組合就可以形成最終的產(chǎn)品。通過模塊的組合配置，就可以創(chuàng)建不同需求的產(chǎn)品，滿足客戶的定制需求 。
插畫作為設(shè)計(jì)的一大品類，不同的插畫師都有自己擅長的風(fēng)格，本質(zhì)是都有自己的個(gè)性，但是在產(chǎn)品設(shè)計(jì)中更多是需要共情、共性來講故事，表達(dá)產(chǎn)品理念和價(jià)值觀。這就需要插畫師去嘗試并探尋出適合互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)類的插畫風(fēng)格。設(shè)計(jì)的本質(zhì)是舊元素的重新組合，插畫不會(huì)過時(shí)，而是需要結(jié)合當(dāng)下和產(chǎn)品找到最匹配的設(shè)計(jì)風(fēng)格。
幾何插畫算是插畫簡化的一種表現(xiàn)形式，人和物的形態(tài)不再寫實(shí)，而是抽象成幾何圖形拼湊的感覺，同時(shí)保留人物形態(tài)的神韻。加上幾何色塊與人物交互形態(tài)的表現(xiàn)，傳達(dá)出簡潔、科技的現(xiàn)代感。難點(diǎn)還是在人物形態(tài)的表現(xiàn)上，平時(shí)多練習(xí)練習(xí)速寫還是很有必要的。
線面插畫最近一兩年非常流行，準(zhǔn)確的說是非常適合。首先線面插畫主要是由線條和塊面組合而成，用塊面表現(xiàn)人物形態(tài)時(shí)某些結(jié)構(gòu)會(huì)表現(xiàn)不出來，這時(shí)候用線條簡單勾勒后，結(jié)構(gòu)就會(huì)清晰明了。其次當(dāng)線面插畫運(yùn)用在界面上時(shí)，可以打破界面純文字或組件化的機(jī)械和沉悶感。線面插畫的風(fēng)格提升畫面熱鬧感的同時(shí)，還能保持界面的干凈整潔。
界面微交互動(dòng)效會(huì)讓用戶的體驗(yàn)更加精致到位。想要打造優(yōu)秀的產(chǎn)品設(shè)計(jì)，微交互和動(dòng)效設(shè)計(jì)是繞不開的，UI界面設(shè)計(jì)通過微交互反饋告知用戶當(dāng)前正在發(fā)生的事情，所處的狀態(tài)。細(xì)微的動(dòng)效更能調(diào)動(dòng)用戶情緒，取悅用戶。C端產(chǎn)品微交互和動(dòng)效已經(jīng)很成熟了，一部分功勞來自iOS系統(tǒng)原生自帶的效果。B端產(chǎn)品的微交互和動(dòng)效更多還是在學(xué)習(xí)海外產(chǎn)品，還需要給前端工程師灌輸微交互和動(dòng)效的設(shè)計(jì)價(jià)值，共同打造產(chǎn)品體驗(yàn)細(xì)節(jié)。
Mg動(dòng)畫需要很好的節(jié)奏感、韻律，每一個(gè)場景動(dòng)畫都需要其中的元素進(jìn)行連接變化，讓轉(zhuǎn)場動(dòng)畫更加自然，MG人物動(dòng)畫通過點(diǎn)線面的動(dòng)效變化讓畫面更加有趣、自然，通過粒子效果讓特定場景無限循環(huán)會(huì)讓人更加印象深刻。
MacOS Big Sur系統(tǒng)圖標(biāo)的更新帶動(dòng)了三維圖標(biāo)的流行，三維圖標(biāo)的應(yīng)該場景還是需要有較大留白空間的界面，因?yàn)槿S圖標(biāo)太小后就看不到更多細(xì)節(jié)。三維圖標(biāo)感覺又回到了擬物化和扁平化哪個(gè)更好的問題上？設(shè)計(jì)師應(yīng)該保持開放多元的視角。設(shè)計(jì)本身也在不斷的演化融合，存在即合理。合適最重要，它們都會(huì)有適合自己的場景和設(shè)計(jì)價(jià)值。
為什么輕三維在界面設(shè)計(jì)中占有一席之位？一個(gè)是設(shè)計(jì)師不斷追求差異化的產(chǎn)物。另一個(gè)是更好的表現(xiàn)內(nèi)容，并與用戶產(chǎn)生共鳴。輕三維的基礎(chǔ)模型都是來自手機(jī)界面中的各種元素，比如組件、開關(guān)、按鈕、占位符、圖表、幾何圖形、圖標(biāo)、進(jìn)度條等，這些都是用戶日常使用系統(tǒng)軟件常見的元素，通過簡單的幾何形體建?！驘艄狻硬馁|(zhì)—渲染—PS調(diào)色。難度系數(shù)不大但效果很出彩。第一個(gè)出彩點(diǎn)是模型帶有厚度的倒角，結(jié)合燈光渲染的光澤是二維軟件不能比擬的。第二個(gè)出彩點(diǎn)就是材質(zhì)自由添加，特別是當(dāng)下流行的毛玻璃效果，玻璃材質(zhì)渲染效果更佳。第三個(gè)出彩點(diǎn)就是可以加局部燈光，局部的漸變色或環(huán)境光更佳出彩。
P4D是PS加C4D的設(shè)計(jì)表現(xiàn)技法，也是視覺設(shè)計(jì)的最后一個(gè)環(huán)節(jié)，通過PS對(duì)C4D的渲染圖片進(jìn)行調(diào)色，利用PS的調(diào)色技巧可以很好的解決C4D打燈光的瑕疵，還可以利用PS強(qiáng)大的合成功能，將渲染圖片與圖片素材進(jìn)行合成，來表現(xiàn)畫面的視覺度，當(dāng)然三維軟件比較難實(shí)現(xiàn)的水、粒子、煙花等效果，也可以通過PS的后期合成來實(shí)現(xiàn)，這也是P4D的強(qiáng)大之處。
卡通IP設(shè)計(jì)最近三四年技術(shù)的迭代已經(jīng)慢慢的走上成熟，卡通IP也從傳統(tǒng)的純PS手繪技法，轉(zhuǎn)到C4D建?！巧壎ā狹D衣服制作—OC渲染—PS（靜態(tài)）/AE（動(dòng)態(tài)）調(diào)色。
卡通IP火的本質(zhì)更適合做營銷，相比于品牌或Slogan，卡通IP具有親和力和畫面感。隨著各種手辦行業(yè)大熱，受互聯(lián)網(wǎng)大廠影響下，卡通IP已經(jīng)是互聯(lián)網(wǎng)B輪以上公司的標(biāo)配了。如果團(tuán)隊(duì)中沒有這樣能力的人，也可以通過繪制好二維，一套三維可以選擇外包完成。
對(duì)于UI設(shè)計(jì)師來說學(xué)習(xí)是有成本的，暫時(shí)并不是必備技能，如果喜歡完全可以學(xué)習(xí)，從設(shè)計(jì)差異化的角度來看三維視覺確實(shí)有一定的競爭力。
C4D三維場景動(dòng)畫通過構(gòu)建實(shí)物和場景模擬生活中的現(xiàn)實(shí)場景，會(huì)讓用戶體驗(yàn)真實(shí)感，三維軟件制作動(dòng)效的最大優(yōu)勢是通過動(dòng)力學(xué)和表達(dá)式來模擬真實(shí)感，未來在AR/VR領(lǐng)域會(huì)有更好的發(fā)展。相對(duì)于界面動(dòng)效學(xué)習(xí)成本難度也相對(duì)較大。在三維動(dòng)畫中C4D軟件對(duì)于域、動(dòng)力學(xué)還是有一定的優(yōu)勢。
作者：水手哥。 來源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)公司。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn