如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

文章目錄

• 水晶宮與拉斯金
• 現(xiàn)代設(shè)計(jì)之父誕生
• 工藝美術(shù)運(yùn)動(dòng)中的平面設(shè)計(jì)
• 總結(jié)

水晶宮與拉斯金

談這個(gè)運(yùn)動(dòng)之前，我們先來交代一下背景，150年前的歐洲版圖大致有法國(guó)、奧匈帝國(guó)、英國(guó)、西班牙、荷蘭、波蘭等國(guó)家，由于后來世界大戰(zhàn)打來打去相互瓜分，所以對(duì)這些國(guó)家目前的領(lǐng)土范圍、名稱等不需要特別較真。

18世紀(jì)初期的英國(guó)還處于農(nóng)業(yè)經(jīng)濟(jì)時(shí)代，經(jīng)濟(jì)發(fā)展取決于勞動(dòng)力資源的占有和配置。比方你家有100人在干活，理論上經(jīng)濟(jì)效益就比隔壁老王10個(gè)人干活要強(qiáng)許多。

然后到了18世界中葉，也就是1765年珍妮紡紗機(jī)的發(fā)明標(biāo)志了第一次工業(yè)革命在英國(guó)開始，由此100年間，英國(guó)就像被開光加持，走上發(fā)展快車道，一下子躍升為世界大國(guó)。

這個(gè)時(shí)候我們橫向看看中國(guó)的情況，18世紀(jì)的中國(guó)正處在清朝統(tǒng)治之下，清朝歷史上最著名的康乾盛世就是在18世紀(jì)中期（乾隆早期）達(dá)到頂峰，當(dāng)時(shí) GDP 占世界總量的三分之一，也很厲害。我們可以從建筑面貌，生活場(chǎng)景，商店來感受一下當(dāng)時(shí)中國(guó)的生活水平與設(shè)計(jì)面貌。

工業(yè)革命在英國(guó)發(fā)展了100年后，正好來到英國(guó)著名的維多利亞女皇時(shí)代，維多利亞時(shí)代前接喬治時(shí)代，后啟愛德華時(shí)代，被認(rèn)為是英國(guó)工業(yè)革命和大英帝國(guó)的巔峰。它的時(shí)限一般定義為1851年～1901年長(zhǎng)達(dá)50年，這個(gè)時(shí)期的英帝國(guó)走向世界之巔，領(lǐng)土達(dá)到3600萬(wàn)平方公里，給大家一個(gè)參考數(shù)據(jù)，咱們大中國(guó)目前的領(lǐng)土面積960萬(wàn)平方公里，僅僅是當(dāng)時(shí)的英國(guó)領(lǐng)土的四分之一，而經(jīng)濟(jì)占了全球的70%，貿(mào)易出口更是比全世界其他國(guó)家的總和還多上幾倍。

所以，現(xiàn)代設(shè)計(jì)由此時(shí)此地發(fā)生萌芽，似乎是合情合理。

這個(gè)時(shí)期英國(guó)的設(shè)計(jì)風(fēng)格就是鼎鼎大名的「維多利亞風(fēng)格」，后世對(duì)這個(gè)風(fēng)格進(jìn)行歸納后認(rèn)為，它屬于一種古典藝術(shù)復(fù)辟整合的風(fēng)格，因?yàn)槟憧梢詮木S多利亞設(shè)計(jì)風(fēng)格的產(chǎn)物中，看到：哥特樣式、文藝復(fù)興樣式、都鐸樣式甚至意大利風(fēng)格樣式。維多利亞時(shí)期通過融合當(dāng)代審美元素及使用了新建筑材料等方式，重新演繹及完善這些風(fēng)格，因?yàn)轸酆狭吮姸喙诺滹L(fēng)格，所以在視覺上顯得矯揉造作，裝飾繁瑣，色彩豐富細(xì)膩，顯得唯美主義。

也正是1851年，英國(guó)為了向世界炫耀工業(yè)革命成果決定搞點(diǎn)事情，于是聯(lián)合歐洲各大國(guó)，舉辦歷史上有名的倫敦世界博覽會(huì)，而籌辦這個(gè)博覽會(huì)的又是歷史上有名的阿爾伯特親王，下面請(qǐng)注意我介紹他和維多利亞女皇之間的關(guān)系。

阿爾伯特是德國(guó)薩克森-科堡-哥達(dá)公爵恩斯特一世的小兒子。比利時(shí)國(guó)王利奧波德一世是維多利亞的舅舅和阿爾伯特的叔叔。維多利亞的母親和利奧波德一世是姐弟，所以阿爾伯特是與他的表姐維多利亞女王結(jié)婚，是否有點(diǎn)小燒腦，沒關(guān)系，你只要知道他們是夫妻，然后屬于近親結(jié)婚。

他們一共生育了九個(gè)孩子，因?yàn)榻H結(jié)婚的緣故，四個(gè)王子中的三個(gè)都是血友病患者，所幸的是五位公主個(gè)個(gè)健康美麗，但也是血友病基因攜帶者，關(guān)于他們更多的故事請(qǐng)自行搜集，因?yàn)樵蹅兘裉焓莵砹膫惗厥澜绮┯[會(huì)的。

阿爾伯特一直對(duì)設(shè)計(jì)方面的事務(wù)非常感興趣，所以很積極籌辦這次博覽會(huì)，但期間碰到一個(gè)極大的難題，就是當(dāng)其它國(guó)家往英國(guó)運(yùn)送大型工業(yè)設(shè)計(jì)產(chǎn)品時(shí)，比方火車頭、蒸汽機(jī)，建筑模型等東西時(shí)，英國(guó)暫時(shí)沒有如此龐大的場(chǎng)地進(jìn)行安放，并且當(dāng)發(fā)現(xiàn)這個(gè)問題時(shí)距離對(duì)外宣布開展的日期只剩不到半年，按正常流程壓根無法完成這樣的場(chǎng)館，問一眾大臣無人敢吭聲，阿爾伯特心急如焚，某天他在花園里眉頭緊皺思考這個(gè)問題時(shí)，一位皇室花農(nóng)的兒子忍不住問親王怎么回事，親王跟他簡(jiǎn)單說了情況，沒想到這個(gè)花農(nóng)的兒子居然說：如果親王相信我，不如讓我試試看吧。這位花農(nóng)兒子就是后來英國(guó)著名的建筑師：伯克斯頓。

基于花卉種植的技術(shù)，伯克斯頓大膽運(yùn)用了種植花卉的溫室結(jié)構(gòu)原理，使用鋼鐵與玻璃為原料，快捷實(shí)用又經(jīng)濟(jì)并且采光一流的方式做了這個(gè)場(chǎng)館，那就是后來一開展立刻震驚全世界，歷史上著名的「水晶宮」，這個(gè)建筑物也被后世視為現(xiàn)代設(shè)計(jì)拉開帷幕的標(biāo)志性產(chǎn)物，也被視為「工藝美術(shù)運(yùn)動(dòng)」的開始。

水晶宮在1854年曾經(jīng)從倫敦中心遷址南部，無奈在1936年的一場(chǎng)大火中被付之一炬。英國(guó)前首相丘吉爾曾表示它的燒毀是「一個(gè)時(shí)代的終結(jié)」。

這個(gè)世界知名的博覽會(huì)所展覽的作品以工業(yè)產(chǎn)品為主，并且全部都沒有一點(diǎn)現(xiàn)代設(shè)計(jì)風(fēng)格的影子。那我們不是在聊現(xiàn)代設(shè)計(jì)的萌芽嗎，對(duì)的，這個(gè)博覽會(huì)的最大作用是反面刺激，因?yàn)檎钩龅漠a(chǎn)品大部分非常粗陋，原因很多，其一是誰(shuí)也沒經(jīng)驗(yàn)做工業(yè)產(chǎn)品，好比香港第一屆特首，前無古人很難做好；其二是工業(yè)發(fā)展本來就是初期，工藝水準(zhǔn)遠(yuǎn)遠(yuǎn)沒有成熟。

而在一些人看來最要命的是為工業(yè)產(chǎn)品強(qiáng)制添加裝飾，比方把哥特式的紋樣刻到鑄鐵的蒸汽機(jī)體上，在金屬椅子上面畫個(gè)油漆畫，在縫紉機(jī)上面加一個(gè)丘比特造型等等，完全是不實(shí)用并且談不上美觀的設(shè)計(jì)。

這種情況在意見上形成兩面派，比方愛國(guó)者立場(chǎng)的人大唱頌歌，甚至要寫詩(shī)來贊美，比方英國(guó)大詩(shī)人丁尼生就為這個(gè)博覽會(huì)專門創(chuàng)作了頌詩(shī)。

而另一派自然就是批評(píng)者，批評(píng)的角度是博覽會(huì)大部分產(chǎn)品都缺乏一種從整體出發(fā)的設(shè)計(jì)構(gòu)思，形式遠(yuǎn)遠(yuǎn)大于功能，能夠意識(shí)到這種問題的人其實(shí)已經(jīng)具備了新設(shè)計(jì)思想，但很可悲的是他們又多數(shù)是機(jī)械否定論者，意思就是反對(duì)工業(yè)，崇尚手工，顯然違背了社會(huì)發(fā)展規(guī)律。

這群反對(duì)者當(dāng)中有一位后來非常著名的人，最后成為「工藝美術(shù)運(yùn)動(dòng)」的理論指導(dǎo)者，他就是約翰·拉斯金。

在博覽會(huì)現(xiàn)場(chǎng)，32歲的約翰拉斯金已經(jīng)是英國(guó)成名作家，藝術(shù)評(píng)論家，同時(shí)也是教師及業(yè)余地質(zhì)學(xué)家，成名作是1843年寫作的《現(xiàn)代畫家》，他看到水晶宮的展覽后，發(fā)出感概：藝術(shù)家已經(jīng)脫離了日常生活，只是沉醉在古希臘及意大利的迷夢(mèng)當(dāng)中，如果這些產(chǎn)品只能被少數(shù)人理解而脫離大眾，藝術(shù)沒什么作用，真正的藝術(shù)必須是為人民創(chuàng)作，不然就是一件無聊的東西。

其實(shí)按現(xiàn)代的觀點(diǎn)，我們補(bǔ)充一下拉斯金這個(gè)說法，他提到的藝術(shù)嚴(yán)格來說應(yīng)該就是當(dāng)代定義的設(shè)計(jì)，因?yàn)?60年前不存在設(shè)計(jì)的說法，設(shè)計(jì)跟藝術(shù)之間的定義非常模糊。

當(dāng)時(shí)會(huì)場(chǎng)中的拉斯金可以說是憤怒的，隨后幾年，他開始通過著書跟演講來宣傳他的設(shè)計(jì)美學(xué)概念，比方他提出設(shè)計(jì)的實(shí)用性目的，他認(rèn)為：世界上最偉大的作品都要適用于某一特定場(chǎng)合，從屬某種目的。這個(gè)觀點(diǎn)說出設(shè)計(jì)的功能性問題，屬于初步的現(xiàn)代設(shè)計(jì)思想。

同時(shí)拉斯金極力反對(duì)精英主義，強(qiáng)調(diào)設(shè)計(jì)的民主特性，強(qiáng)調(diào)設(shè)計(jì)為大眾服務(wù)，這一點(diǎn)也是后來德國(guó)包豪斯非常重要的思想內(nèi)核之一，拉斯金認(rèn)為以往的美術(shù)都被貴族的利己主義控制，范圍一直局限在上層社會(huì)，如今不應(yīng)該再為取悅公爵太太們，而應(yīng)該更多的關(guān)注農(nóng)村中的勞動(dòng)人民，為他們生產(chǎn)一些實(shí)實(shí)在在的東西。

約翰·拉斯金1819年生于倫敦。是個(gè)獨(dú)生子加富二代，因?yàn)楦赣H是成功的蘇格蘭雪利酒商人，父母對(duì)拉斯金要求嚴(yán)格，把所有的希望和理想都寄托在約翰·拉斯金身上。他的父親一直鼓勵(lì)他從事繪畫和詩(shī)歌創(chuàng)作等文藝工作，而母親卻希望他能做一名牧師。年少的他一般在家庭和基督教堂學(xué)習(xí)。每年夏天隨父母游覽名山大川，參觀古代建筑和名畫，培養(yǎng)了對(duì)自然和藝術(shù)的愛好。

拉斯金在1836年進(jìn)入牛津大學(xué)基督學(xué)院，1840年因病退學(xué)。此后兩年在意大利養(yǎng)病，同時(shí)搜集資料從事著述。其實(shí)拉斯金本身也做部分藝術(shù)創(chuàng)作，比方繪畫，但后期專注于理論研究及普及設(shè)計(jì)思想。但拉斯金的設(shè)計(jì)思想非常龐雜，也有一部分對(duì)時(shí)代消極的內(nèi)容存在，但我們這里基本不談及。

現(xiàn)代設(shè)計(jì)之父誕生

生平不識(shí)莫里斯，設(shè)計(jì)十年也枉然。

就在水晶宮誕生的前幾年，1848年世界上也發(fā)生一件大事，就是德國(guó)的卡爾馬克思先生發(fā)表了他的重要著作《共產(chǎn)黨宣言》，因?yàn)楣I(yè)化發(fā)展過程中，造成了很多社會(huì)問題，比方貧民窟的出現(xiàn)，因?yàn)闄C(jī)器代替了人力，大部分工人下崗了，換到我們身處的時(shí)代，隱隱感覺人工智能與大數(shù)據(jù)的迅速發(fā)展是一樣的，機(jī)器人及信息化工具也將取替大量人力，比方無人汽車，無人機(jī)送貨，餐館的二維碼下單及收款等，都會(huì)讓一批勞動(dòng)力被取代。

當(dāng)時(shí)發(fā)展工業(yè)革命的歐洲國(guó)家，資本主義開始產(chǎn)生及成熟化，于是就產(chǎn)生了兩個(gè)對(duì)立階級(jí)，就是著名的無產(chǎn)階級(jí)與資產(chǎn)階級(jí)，無產(chǎn)階級(jí)的生活條件及工作條件隨著工業(yè)革命發(fā)展，逐步惡化得非常惡劣，這就是當(dāng)時(shí)「工藝美術(shù)運(yùn)動(dòng)」發(fā)展的時(shí)代背景。

我們第一部分談及了「工藝美術(shù)運(yùn)動(dòng)」的理論指導(dǎo)者約翰拉斯金，他在1953年出版了一本書籍叫《威尼斯的石頭》，這本書講述了中世紀(jì)設(shè)計(jì)精華的思想內(nèi)容，深刻影響了一位年輕人，這位年輕人后來通過自己的努力，掀起工藝美術(shù)運(yùn)動(dòng)，成為了現(xiàn)代設(shè)計(jì)的奠基人，他就是大神威廉莫里斯先生，他同時(shí)是世界第一所設(shè)計(jì)事務(wù)所的開設(shè)人，所以他也被視為現(xiàn)代設(shè)計(jì)之父。

不過關(guān)于這個(gè)說法其實(shí)存在爭(zhēng)議，因?yàn)楣に嚸佬g(shù)運(yùn)動(dòng)被后世認(rèn)為在思想上是倒退的，因?yàn)樗麄兊囊庾R(shí)形態(tài)是反工業(yè)，重塑手工藝的，主張從自然和哥德風(fēng)格中找尋出路，比方「向自然學(xué)習(xí)」就是工藝美術(shù)運(yùn)動(dòng)的重要口號(hào)之一，而我們回顧當(dāng)時(shí)的諸多作品，我們也發(fā)現(xiàn)大量動(dòng)植物紋樣的設(shè)計(jì)形式，同時(shí)這個(gè)運(yùn)動(dòng)其實(shí)也受東方風(fēng)格的影響，特別是日本的浮世繪，我們后面會(huì)論述這塊。

1951年的倫敦世界博覽會(huì)期間，威廉莫里斯也到過現(xiàn)場(chǎng)觀看，那時(shí)的他年僅17歲，他對(duì)于工業(yè)化產(chǎn)出的丑陋產(chǎn)品感到非常震驚與厭惡，根據(jù)小道消息記錄，他在觀看時(shí)候曾經(jīng)放聲大哭。雖然這種反應(yīng)未免有夸張之嫌，但是確實(shí)在那次經(jīng)歷之后，莫里斯就立志開始學(xué)習(xí)設(shè)計(jì)，希望通過自己的努力來扭轉(zhuǎn)這種設(shè)計(jì)頹敗的局面。

跟約翰拉斯金一樣，1934年出生的威廉莫里斯也是一名富二代，有一個(gè)富足的家庭跟一位經(jīng)商的父親，所以起點(diǎn)高一直不是壞事，特別是起點(diǎn)高的同時(shí)還有一位重視教育的父親，莫里斯的父親對(duì)他學(xué)習(xí)情況非常關(guān)心，一直嚴(yán)格要求莫里斯，所以1851年博覽會(huì)后莫里斯順利考入牛津大學(xué)建筑系。早期的設(shè)計(jì)師基本都是搞建筑為主，比方德國(guó)包豪斯的幾位校長(zhǎng)都是建筑師。

在牛津大學(xué)畢業(yè)后的莫里斯去了一所專門從事哥德風(fēng)格建筑設(shè)計(jì)的事務(wù)所里工作，這個(gè)期間他對(duì)哥德風(fēng)格有了實(shí)踐上的深刻認(rèn)識(shí)，但是莫里斯的內(nèi)心其實(shí)對(duì)繪畫及詩(shī)歌（莫里斯本身也是一位成熟的詩(shī)人，曾出版《地上樂園》等詩(shī)集）更為熱衷，他感覺自己并沒有對(duì)建筑的熱忱，所以他呆了不夠8個(gè)月就走了，隨后參加了著名的「拉斐爾前派兄弟會(huì)」。

拉斐爾前派是1848年由3名年輕的英國(guó)畫家亨特、羅塞蒂和米萊斯在英國(guó)倫敦所發(fā)起組織的一個(gè)藝術(shù)團(tuán)體，目的是為了改變其時(shí)的藝術(shù)潮流，反對(duì)在米開朗基羅和拉斐爾的時(shí)代之后偏向機(jī)械論的風(fēng)格主義畫家。總的來說，他們的風(fēng)格偏向傳統(tǒng)寫實(shí)，主張忠于自然，所以跟拉斯金及莫里斯的理念都接近，莫里斯在此期間創(chuàng)作了一些畫作，其中比較有代表性的是《岡尼芙皇后》，畫風(fēng)已經(jīng)明顯有設(shè)計(jì)的裝飾性感覺。

參加拉斐爾前派后的莫里斯不久就馬上要步入人生另一個(gè)階段——結(jié)婚，而對(duì)象是下面這位非常擅長(zhǎng)配合攝影師擺pose 的美女簡(jiǎn)·伯頓，深諳現(xiàn)代頭疼腳疼肚子疼三大法則，莫里斯第一次見到她時(shí)是這樣描述的：美艷動(dòng)人，身材高挑，皮膚黝黑，有一種野性美，留有自然的鬈發(fā)，長(zhǎng)著細(xì)長(zhǎng)的脖子、大大的眼睛和性感的雙唇，與當(dāng)時(shí)優(yōu)雅而傳統(tǒng)的美女很不相同，有標(biāo)準(zhǔn)的模特風(fēng)范。

所以拉斐爾前派的成員之一羅塞蒂就經(jīng)常以她為繪畫模特進(jìn)行創(chuàng)作，后來兩人也因此鬧出了不少緋聞，導(dǎo)致莫里斯和簡(jiǎn)伯頓的關(guān)系出現(xiàn)裂縫。

另外關(guān)注設(shè)計(jì)史太濃的朋友知道，我們的內(nèi)容一直不乏美女身影，比方包豪斯創(chuàng)始人格羅皮烏斯的太太，神一樣存在的阿爾馬·馬勒，關(guān)于她的傳奇故事可以詳見《用一篇超全面的好文，帶你了解包豪斯的前世與今生》。

莫里斯跟簡(jiǎn)伯頓的婚姻對(duì)整個(gè)世界的設(shè)計(jì)發(fā)展來說都是一件大事，因?yàn)樗麄兊幕橐龃偈沽四锼归_始從繪畫轉(zhuǎn)向設(shè)計(jì)方向，同時(shí)被視為現(xiàn)代設(shè)計(jì)開端的代表性建筑「紅屋」也誕生，事情的經(jīng)過是這樣的：

莫里斯跟簡(jiǎn)伯頓確立關(guān)系后決定在1859年喜結(jié)連理，而成家就要立室，說白了就是需要買房子，于是莫里斯開始在倫敦市區(qū)及郊區(qū)到處尋找合適的住宅，但是經(jīng)過多輪的折騰，一直沒有找到自己滿意的住宅，以及對(duì)住宅的用品也十分不滿，因?yàn)楫?dāng)時(shí)存在的建筑跟家居用品都充斥維多利亞風(fēng)格的繁瑣，不然就是極度簡(jiǎn)陋。

于是莫里斯開始產(chǎn)生自己動(dòng)手建房子的想法，他邀請(qǐng)了一位叫威伯的朋友幫忙，在郊區(qū)肯特郡弄了塊地，周圍是果園，擁有非常開闊的視野與景色，符合莫里斯喜好接近大自然的性格，也符合新婚夫婦對(duì)浪漫的訴求，他們開始在這里做自己想要的房子。這個(gè)房子一開始的定位就是非常規(guī)的套路，比方結(jié)構(gòu)是非對(duì)稱的，然后表面沒有粉飾，并且充分考慮了居住的功能性，其中最突出的特征就是房子全部使用紅磚修建，既是材料，又成為裝飾動(dòng)機(jī)，所以史稱「紅屋」，其中也使用了諸多莫里斯喜歡的哥特元素雕飾細(xì)節(jié)，比方塔樓、尖拱入口等。我們來看看歷史上紅屋的樣子：

其實(shí)紅屋最特別的部分在于，除了房子本身的建筑外，里面全部家具、燈具、地毯、裝飾品、墻紙、掛畫都是莫里斯親手設(shè)計(jì)的，就是現(xiàn)代俗稱的硬裝與軟裝，莫里斯都一手包辦，所以風(fēng)格非常統(tǒng)一協(xié)調(diào)，而且別具一格，這種風(fēng)格也被視為工藝美術(shù)運(yùn)動(dòng)的代表性風(fēng)格。

時(shí)間已經(jīng)去到1860年，紅屋的落成讓周邊的人好奇與驚訝，紛紛來參觀，慢慢在英國(guó)設(shè)計(jì)界開始引發(fā)廣泛的興趣與贊譽(yù)，好的設(shè)計(jì)、講究功能的設(shè)計(jì)自然會(huì)激發(fā)大眾的熱情與需求，越來越多人詢問他能否也幫忙設(shè)計(jì)一些家具用品，他開始萌生為大家提供設(shè)計(jì)服務(wù)這樣的想法，此時(shí)的他只是跟朋友經(jīng)營(yíng)畫室搞創(chuàng)作，屬于一個(gè)沒有固定職業(yè)的下崗人員，于是他決定破天荒的成立一間獨(dú)立設(shè)計(jì)事務(wù)所，這是世界上最早由藝術(shù)家經(jīng)營(yíng)的設(shè)計(jì)事務(wù)所，也就是現(xiàn)在所有設(shè)計(jì)公司的前身。

剛開始他是跟兩位朋友一起合伙經(jīng)營(yíng)，幾年后奇貨可居，業(yè)務(wù)蒸蒸日上，他果斷將另外兩位朋友的股份買下，在1864年更名為「莫里斯設(shè)計(jì)事務(wù)所」。其實(shí)西方大部分品牌、公司都會(huì)以靈魂人物的名稱來命名，比方沃爾瑪、惠普、戴爾、保時(shí)捷、迪斯尼等等，遍及各行各業(yè)，這在我看來屬于部落文化，也是羅振宇說的人格體，在設(shè)計(jì)行業(yè)其實(shí)也越來越多這種現(xiàn)象，中國(guó)這種情況較少，但香港已經(jīng)有諸多成功的示例，比方陳幼堅(jiān)設(shè)計(jì)有限公司，香港李永銓設(shè)計(jì)有限公司等， 內(nèi)地深圳有韓家英、王粵飛等，老板的氣質(zhì)就是企業(yè)的氣質(zhì)，老板的風(fēng)格就是作品的風(fēng)格。

莫里斯的設(shè)計(jì)事務(wù)所為顧客提供各種各樣的設(shè)計(jì)服務(wù)，范圍包括家具、地毯、毛毯、墻紙、書籍、海報(bào)、建筑等，涵蓋全面而完整，后期莫里斯越來越善于經(jīng)營(yíng)，聯(lián)合工廠直接生產(chǎn)自己設(shè)計(jì)的產(chǎn)品，包括陶瓷、玻璃、地毯等，再直接銷售給客戶，所以這也是一個(gè)用設(shè)計(jì)創(chuàng)造財(cái)富的典型例子，值得現(xiàn)代設(shè)計(jì)師借鑒。

莫里斯的設(shè)計(jì)風(fēng)格有別于當(dāng)時(shí)的維多利亞風(fēng)格，獨(dú)樹一幟，后來史稱「工藝美術(shù)」運(yùn)動(dòng)風(fēng)格，特征包含了以下幾點(diǎn)：

• 強(qiáng)調(diào)手工藝，明確反對(duì)機(jī)械化生產(chǎn)（這算是違背社會(huì)發(fā)展規(guī)律的倒退觀念）。
• 反對(duì)矯揉造作、繁瑣、裝飾過度的維多利亞風(fēng)格，及其它古典、傳統(tǒng)的復(fù)興風(fēng)格（這是進(jìn)步的觀念）。
• 提倡哥德風(fēng)格，講究簡(jiǎn)單、樸實(shí)，重視功能（這特點(diǎn)具備現(xiàn)代設(shè)計(jì)思想）。
• 推崇自然主義、裝飾上借鑒東方藝術(shù)，比方日本的華年魚蟲。

工藝美術(shù)運(yùn)動(dòng)中的平面設(shè)計(jì)

第二部分聊到威廉莫里斯自從跟簡(jiǎn)伯頓結(jié)婚后，親力親為修建一間紅屋，引發(fā)了設(shè)計(jì)圈轟動(dòng)，隨后他成立了自己的設(shè)計(jì)事務(wù)所后，引領(lǐng)出「工藝美術(shù)」運(yùn)動(dòng)風(fēng)格，從1860年到1880年達(dá)到運(yùn)動(dòng)高峰，帶動(dòng)歐洲各國(guó)的同類設(shè)計(jì)運(yùn)動(dòng)，但因?yàn)楸敬蔚闹黝}是英國(guó)設(shè)計(jì)，所以我們主要先聊英國(guó)情況，關(guān)于這場(chǎng)運(yùn)動(dòng)歐洲其它各國(guó)的狀況我們將會(huì)在其它分享里講述。

莫里斯初期主要的設(shè)計(jì)方向是家具、墻紙、家居用品等，墻紙?jiān)O(shè)計(jì)是其最具代表性的作品之一，而且風(fēng)格上特別容易識(shí)別，就是使用大量植物紋樣，我們通過下面的圖片來大致感受一下，現(xiàn)代的產(chǎn)品假設(shè)使用這種特征很容易重現(xiàn)莫里斯風(fēng)格：

但后來英國(guó)出版界發(fā)生了一些事情，讓莫里斯在平面設(shè)計(jì)范圍也開始有極大拓展，并且發(fā)展出強(qiáng)大的影響力，進(jìn)一步深化工藝美術(shù)運(yùn)動(dòng)的范疇。

事情的起因是19世紀(jì)以來，因?yàn)楣I(yè)革命發(fā)展，引入機(jī)器操作后書籍開始大批量發(fā)行出版，導(dǎo)致書籍設(shè)計(jì)的粗制濫造情況越發(fā)嚴(yán)重，開始讓當(dāng)時(shí)一批平面設(shè)計(jì)家感到很焦慮，情況就跟現(xiàn)在區(qū)塊鏈的急速發(fā)展，產(chǎn)生大量粗制濫造的app、網(wǎng)站平臺(tái)的情況雷同，讓做UI設(shè)計(jì)的我們也感覺局促不安。

所謂時(shí)勢(shì)造英雄，總有一些人要被歷史選中，比方有一位出版家叫威廉帕克林，在24歲時(shí)候開設(shè)了自己的書店，專門經(jīng)營(yíng)善本（泛指刻印較早、流傳較少的精美古籍）和古本圖書，后來他跟朋友合伙經(jīng)營(yíng)出版社，自行設(shè)計(jì)與出版書籍，多數(shù)與散文及詩(shī)集為主，他們對(duì)書籍有非常嚴(yán)格跟精細(xì)的要求，而且也使用了哥德風(fēng)格結(jié)合簡(jiǎn)單明快的方式進(jìn)行設(shè)計(jì)，符合工藝美術(shù)運(yùn)動(dòng)的特點(diǎn)，給出版界帶來一股清流。

在這種風(fēng)氣影響下，慢慢的又出現(xiàn)另一位人物，就是建筑家出身的阿瑟·瑪克穆多，他出生于1851年，就是水晶宮面世同一年，在26歲時(shí)候他認(rèn)識(shí)了43歲的莫里斯，受到當(dāng)時(shí)已經(jīng)成大名的莫里斯的思想影響，決心追隨他發(fā)展工藝美術(shù)設(shè)計(jì)改革，他專注于平面設(shè)計(jì)，并且體現(xiàn)在書籍設(shè)計(jì)上。

1882年他成立了自己的設(shè)計(jì)公司「世紀(jì)行會(huì)」，然后在1884年出版了一本《玩具馬》刊物，這是最早最系統(tǒng)，利用文字方式宣傳工藝美術(shù)運(yùn)動(dòng)主張的出版物。但非?？上шP(guān)于這方面的圖片資料在互聯(lián)網(wǎng)上已經(jīng)無法找到。

這本刊物是工藝美術(shù)運(yùn)動(dòng)當(dāng)中平面設(shè)計(jì)的最典型作品，刊物當(dāng)中的封面及插圖、排版裝飾使用了吸收日本浮世繪元素，從植物紋樣當(dāng)中提煉出抽象圖案，并采用一些中世紀(jì)的裝飾動(dòng)機(jī)，流暢、生動(dòng)，形成一種特別，能代表工藝美術(shù)運(yùn)動(dòng)的平面設(shè)計(jì)風(fēng)格。

做這個(gè)刊物時(shí)候瑪克穆多曾經(jīng)多次跟莫里斯探討版面編排、空間布局比例，文字間距、字體風(fēng)格、紙張材質(zhì)等具體的設(shè)計(jì)問題，這個(gè)過程讓莫里斯很興奮，因?yàn)槟锼箤?duì)工藝美術(shù)運(yùn)動(dòng)風(fēng)格可以應(yīng)用到書籍平面設(shè)計(jì)當(dāng)中感到很高興，于是他又決定搞點(diǎn)事情了。

這個(gè)時(shí)候時(shí)間已經(jīng)去到1888年，莫里斯的事業(yè)已經(jīng)發(fā)展很成功，說白了就是通過設(shè)計(jì)獲得了財(cái)務(wù)自由，一旦財(cái)務(wù)自由就可以比較任性的做一些事情，比方將精力從家具、墻紙、工業(yè)產(chǎn)品方面轉(zhuǎn)移到平面設(shè)計(jì)，而且本來他就是一名文學(xué)愛好者，所以他一轉(zhuǎn)身就成立了個(gè)人出版社，雇傭了一批鑄字工人及印刷工人，起名為克姆斯各特出版社。

這個(gè)出版社一成立，基于莫里斯本人的影響力馬上就生產(chǎn)出一本成功的書籍，就是莫里斯與插圖畫家克萊因合作，設(shè)計(jì)出版的英國(guó)傳說故事《呼嘯平原的故事》，第一次出版了200冊(cè)紙張本跟6本羊皮紙本，這本書設(shè)計(jì)非常精美，而且完全符合工藝美術(shù)運(yùn)動(dòng)風(fēng)格，一上市就吸引了英國(guó)讀者的強(qiáng)烈興趣，并且將克姆斯各特出版社的名頭一炮打響。

莫里斯這個(gè)出版社在英國(guó)的「工藝美術(shù)」運(yùn)動(dòng)當(dāng)中發(fā)展起到非常重要的作用，因?yàn)樵谀锼沟膸ьI(lǐng)下，出版社是這個(gè)運(yùn)動(dòng)當(dāng)中平面設(shè)計(jì)領(lǐng)域最集中的體現(xiàn)，影響了其它出版公司，甚至影響到歐美各國(guó)的印刷出版行業(yè)。

克姆斯各特出版社無疑是威廉莫里斯的平面設(shè)計(jì)大本營(yíng)，他的大部分書籍都是由這家出版社完成，不過他的設(shè)計(jì)充滿了企圖恢復(fù)古典，中世紀(jì)哥特時(shí)期的風(fēng)格特征，版面編排非常擁擠，很多細(xì)節(jié)也比較繁瑣，并且因?yàn)閷?duì)質(zhì)量的追求，所以產(chǎn)量低，價(jià)格高，有經(jīng)濟(jì)能力購(gòu)買的群體不多，于是慢慢引起一些評(píng)論家的指責(zé)，可見名人做事情是要受社會(huì)監(jiān)督的，比方英國(guó)有一位平面設(shè)計(jì)家劉易斯·戴依就曾經(jīng)在1899年的《東方雜志》這個(gè)期刊中撰文批評(píng)威廉莫里斯。

他認(rèn)為莫里斯后期的書籍設(shè)計(jì)完成沉溺在復(fù)古主義，完全違背了他一貫主張和倡導(dǎo)的設(shè)計(jì)社會(huì)化、民主化、大眾化的立場(chǎng)與原則，讓書籍無法成為普及大眾的讀物，而淪落為少數(shù)收藏家的藏品。而此時(shí)莫里斯其實(shí)已經(jīng)離世，莫里斯是在1896年因?yàn)椴』既ナ赖?，而克姆斯各特出版社?891年經(jīng)營(yíng)到1898年，期間一共出版53種圖書，總印刷量達(dá)到18000本，這個(gè)數(shù)量在英國(guó)及歐洲都是可觀的，在莫里斯離世兩年后，因?yàn)槿狈`魂人物，出版社因?yàn)榻?jīng)營(yíng)不善就關(guān)閉了。

后來這位批評(píng)莫里斯的設(shè)計(jì)大師戴依聯(lián)合了插圖畫家杰西·金及格里那維，三人合作創(chuàng)造出一種以兒童為受眾的讀物設(shè)計(jì)風(fēng)格，設(shè)計(jì)當(dāng)中充滿了天真風(fēng)格、色彩浪漫，無論字體、插圖風(fēng)格跟布局排版都輕松可愛，廣受當(dāng)時(shí)的兒童歡迎。

他們的目的是希望書籍設(shè)計(jì)能夠真正為廣大讀者服務(wù)，改變書籍長(zhǎng)期被少數(shù)人掌控的局面，也力圖改變莫里斯那種比較凝重的考古味道。這三人都基于為大眾的共同立場(chǎng)，但是各自有自身的風(fēng)格，他們?yōu)楸娙私灾囊恍┯?guó)童話故事設(shè)計(jì)書籍，人物、動(dòng)物、植物跟風(fēng)景都栩栩如生，生動(dòng)活潑，是工藝美術(shù)運(yùn)動(dòng)后期平面設(shè)計(jì)范圍里一個(gè)重大的發(fā)展與突破。

他們的設(shè)計(jì)直接影響了下一代的平面設(shè)計(jì)師及插畫家，比方我們?cè)诎浪鼓瞧诜窒砝锪牡降谋壤麜r(shí)設(shè)計(jì)師亨利·凡德·威爾德。

莫里斯離世之后余威尚在，很多年輕設(shè)計(jì)師受他的影響，都成立了一些小型出版公司來探索書籍平面設(shè)計(jì)，被后世稱為「私營(yíng)出版運(yùn)動(dòng)」，其中有一個(gè)比較突出的機(jī)構(gòu)叫「手工藝行會(huì)」，領(lǐng)導(dǎo)人是杰出建筑師查爾斯·阿什比，同時(shí)他也從事首飾跟銀器設(shè)計(jì)，他跟三位朋友一起，僅僅使用50英鎊成立了這個(gè)行會(huì)。

手工藝行會(huì)的風(fēng)格在工藝美術(shù)風(fēng)格基礎(chǔ)上再次產(chǎn)生了一些突破，比方把古埃及及古羅馬的風(fēng)格也融合平面設(shè)計(jì)，特別是字體設(shè)計(jì)上重視書法效果，他們的設(shè)計(jì)業(yè)務(wù)和制作業(yè)務(wù)都發(fā)展得很繁榮，訂單接踵而來。

另一個(gè)比較突出的「私營(yíng)印刷運(yùn)動(dòng)」組織是多佛出版社，他們有一個(gè)很具進(jìn)步性的設(shè)計(jì)思想觀點(diǎn)，認(rèn)為平面設(shè)計(jì)的核心并非單純的視覺美好，而是準(zhǔn)確的形象信息傳達(dá)，在良好的傳達(dá)前提下，達(dá)成設(shè)計(jì)美觀的目的。他們的代表作是1903年的《圣經(jīng)》，字體和版面編排都非常方便閱讀，插圖講究，達(dá)到功能與形式的完美平衡，是工藝美術(shù)運(yùn)動(dòng)后期越發(fā)成熟的代表作品之一。

以約翰拉斯金的指導(dǎo)思想為基礎(chǔ)，威廉莫里斯設(shè)計(jì)為代表所發(fā)起的英國(guó)「工藝美術(shù)」運(yùn)動(dòng)，雖然思想跟形式上也有倒退的部分，但仍有諸多具備現(xiàn)代設(shè)計(jì)的先進(jìn)思想，比方希望設(shè)計(jì)普及大眾、重視功能等，所以對(duì)西方各國(guó)的設(shè)計(jì)發(fā)展都有促進(jìn)與推動(dòng)作用，并且在歷史上被視為現(xiàn)代設(shè)計(jì)的開端。

總結(jié)

整個(gè)分享我們大致談了三部分內(nèi)容。

現(xiàn)代設(shè)計(jì)的起源發(fā)生于英國(guó)，倫敦博覽會(huì)水晶宮的出現(xiàn)刺激了設(shè)計(jì)理論先驅(qū)約翰拉斯金對(duì)設(shè)計(jì)的思考，并發(fā)展出具有進(jìn)步及前瞻性的現(xiàn)代設(shè)計(jì)思想。

設(shè)計(jì)師威廉莫里斯建造紅屋這件事，拉開現(xiàn)代設(shè)計(jì)的序幕，并引發(fā)出工藝美術(shù)運(yùn)動(dòng)，該運(yùn)動(dòng)風(fēng)格特征以莫里斯借鑒東方植物紋樣的元素，形式簡(jiǎn)單明快，講究功能等特點(diǎn)為代表。

工藝美術(shù)運(yùn)動(dòng)在平面設(shè)計(jì)上，特別是在書籍上具體體現(xiàn)，莫里斯同樣擔(dān)當(dāng)領(lǐng)軍人物，并由此對(duì)歐洲各國(guó)的平面設(shè)計(jì)產(chǎ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ù)。

工欲善其事，必先利其器”；作為設(shè)計(jì)人員來說，設(shè)計(jì)方法和設(shè)計(jì)模型就是輔助我們更好做設(shè)計(jì)的工具。就像廚師做菜時(shí)候的菜譜一樣；面對(duì)新的菜種，能更快指引我們做出味道不錯(cuò)的菜肴。

體系化的設(shè)計(jì)方法不僅能更好的指導(dǎo)設(shè)計(jì)師做設(shè)計(jì)；另一個(gè)方面，經(jīng)過設(shè)計(jì)方法包裝后的設(shè)計(jì)，能讓設(shè)計(jì)師更坦然面對(duì)來自各方的質(zhì)疑，更專業(yè)的講述自己的設(shè)計(jì)依據(jù)。在做不同菜肴的時(shí)候，我們需要不同的菜譜來指引；而在不同的設(shè)計(jì)階段，設(shè)計(jì)師也需要不同的設(shè)計(jì)模型/方法，讓我們更靈活的做設(shè)計(jì)分析與輸出。

下面從接到項(xiàng)目需求 > 體驗(yàn)迭代優(yōu)化階段，筆者將為大家詳細(xì)講解以下 5 種設(shè)計(jì)模型，并配出具體實(shí)踐的案例，希望對(duì)大家有所啟發(fā)。

模型一：SWOT 模型

1. 概念介紹

SWOT分析法（也稱 TOWS 分析法、道斯矩陣）即態(tài)勢(shì)分析法，20世紀(jì)80年代初由美國(guó)舊金山大學(xué)的管理學(xué)教授韋里克提出，經(jīng)常被用于企業(yè)戰(zhàn)略制定、競(jìng)爭(zhēng)對(duì)手分析等場(chǎng)合。

在現(xiàn)在的戰(zhàn)略規(guī)劃報(bào)告里，SWOT分析應(yīng)該算是一個(gè)眾所周知的工具。來自于麥肯錫咨詢公司的SWOT分析，包括分析企業(yè)的優(yōu)勢(shì)（Strengths）、劣勢(shì)（Weaknesses）、機(jī)會(huì)（Opportunities）和威脅（Threats）。

2. 使用場(chǎng)景

主要用在產(chǎn)品前期的戰(zhàn)略規(guī)劃中；用于項(xiàng)目成員知己知彼，同時(shí)也能知道在行業(yè)領(lǐng)域自己的產(chǎn)品所處的位置和核心競(jìng)爭(zhēng)力是什么；對(duì)于產(chǎn)品方向的定位和全方位分析有復(fù)用價(jià)值。

3. 計(jì)價(jià)值

SWOT分析實(shí)際上是將對(duì)企業(yè)內(nèi)外部條件各方面內(nèi)容進(jìn)行綜合和概括，進(jìn)而分析組織的優(yōu)劣勢(shì)、面臨的機(jī)會(huì)和威脅的一種方法。

優(yōu)劣勢(shì)分析主要是著眼于企業(yè)自身的實(shí)力及其與競(jìng)爭(zhēng)對(duì)手的比較，而機(jī)會(huì)和威脅分析將注意力放在外部環(huán)境的變化及對(duì)企業(yè)的可能影響上 。在分析時(shí)，應(yīng)把所有的內(nèi)部因素（即優(yōu)劣勢(shì)）集中在一起，然后用外部的力量來對(duì)這些因素進(jìn)行評(píng)估。

4. 具體實(shí)踐案例說明

下圖是筆者曾為的阿里內(nèi)部某個(gè)數(shù)據(jù)服務(wù)平臺(tái)分析的案例；側(cè)重介紹了為什么要做這個(gè)數(shù)據(jù)平臺(tái)；以及做這個(gè)平臺(tái)我們項(xiàng)目組的優(yōu)劣勢(shì)和機(jī)會(huì)點(diǎn)分別是什么。在給老板匯報(bào)產(chǎn)品來源&方向時(shí)是非常有效的。

最后，SWOT 分析模型其實(shí)還可以與商業(yè)畫布相結(jié)合，便于更全面對(duì)項(xiàng)目/業(yè)務(wù)進(jìn)行快速分析和深入了解；深入懂業(yè)務(wù)的設(shè)計(jì)師才能真正在團(tuán)隊(duì)中進(jìn)行發(fā)聲，提出超越 UI 層的建設(shè)性意見。

模型二：Google Design Sprint

1. 概念介紹

Design Sprint, 設(shè)計(jì)沖刺，顧名思義就是要在短時(shí)間內(nèi)做出好設(shè)計(jì)；是由 Google 提出的設(shè)計(jì)方法。

2. 使用場(chǎng)景

設(shè)計(jì)沖刺這個(gè)設(shè)計(jì)方法主要適用于短時(shí)間就需要產(chǎn)出設(shè)計(jì)方案；例如一些 Workshop 的共建, 產(chǎn)品迭代周期很快的新需求/任務(wù)，需要系統(tǒng)化分析與輸出設(shè)計(jì)方案。

3. 設(shè)計(jì)價(jià)值

可以在很短的時(shí)間內(nèi)輸出一套系統(tǒng)化的設(shè)計(jì)策略及方案；

通過與不同背景的參與者進(jìn)行溝通協(xié)作，能獲取更多看事物的角度和差異化知識(shí)；創(chuàng)造更多可能；

作為一種理想的設(shè)計(jì)教育工具，讓非科班的設(shè)計(jì)人員完整又快速了解產(chǎn)品&設(shè)計(jì)。

4.  具體實(shí)踐案例說明

設(shè)計(jì)沖刺的主要內(nèi)容包括 6 個(gè)階段：

理解（Understand）：理解要為用戶解決的問題

定義（Define）：明確產(chǎn)品策略（數(shù)據(jù)分析，用戶調(diào)研，設(shè)計(jì)原則制定等）

發(fā)散（Diverge）：探索實(shí)現(xiàn)方案

決定（Decide）：確定設(shè)計(jì)方案

原型（Prototype）：構(gòu)建產(chǎn)品原型

驗(yàn)證（Validate）：驗(yàn)證產(chǎn)品原型

模型三：GUCDR 模型

1.概念介紹

相比前一個(gè)設(shè)計(jì)沖刺模型，GUCDR 模型在設(shè)計(jì)過程中的實(shí)用性更強(qiáng)，能讓你快速用起來，幫你系統(tǒng)性梳理信息；在實(shí)際工作中，只要能夠回答畫布中的每個(gè)點(diǎn)，即可形成完整的設(shè)計(jì)推演過程，讓設(shè)計(jì)思路逐漸清晰起來。

G：Goal

U：User

C：Condition

D：Design

R：Realize

2. 使用場(chǎng)景

GUCDR 模型很適合用于前期需求調(diào)研和整理階段；特別是在自己不是很熟悉的領(lǐng)域中，把信息按照模型和畫布中的點(diǎn)進(jìn)行歸類匯總；最大限度的讓自己的設(shè)計(jì)思維和信息邏輯得到詮釋。

3. 設(shè)計(jì)價(jià)值

3.1  對(duì)設(shè)計(jì)的需求來源及設(shè)計(jì)目標(biāo)的聚焦定位，非常有價(jià)值，能快入深入了解業(yè)務(wù)背景；

3.2  對(duì)設(shè)計(jì)階段的目標(biāo)拆解，從設(shè)計(jì)目標(biāo) > 設(shè)計(jì)策略 > 設(shè)計(jì)方案，層層遞進(jìn)，設(shè)計(jì)方案輸出的邏輯性和針對(duì)性很強(qiáng)。

4.  具體實(shí)踐案例說明

GUCDR 模型在具體的使用過程中，可以和 GUCDR 畫布結(jié)合起來一起使用。信息下鉆的更深入具體，從項(xiàng)目目標(biāo)到設(shè)計(jì)落地，每個(gè)階段都有具體的節(jié)點(diǎn)支撐，在使用過程中只需要把信息直接輸入到對(duì)應(yīng)的位置即可。下圖為 GUCDR 畫布模板，可直接把業(yè)務(wù)相關(guān)信息輸入進(jìn)來。

模型四：雙鉆模型

1. 概念介紹

雙鉆設(shè)計(jì)模型由英國(guó)設(shè)計(jì)協(xié)會(huì)提出，該設(shè)計(jì)模型的核心是：發(fā)現(xiàn)正確的問題、發(fā)現(xiàn)正確的解決方案。

雙鉆模型是一個(gè)結(jié)構(gòu)化的設(shè)計(jì)方法，被很多設(shè)計(jì)師喜愛和使用。

探索/調(diào)研——透析問題（發(fā)散）

定義/合成——聚焦領(lǐng)域（集中）

發(fā)展/構(gòu)思——潛在問題（發(fā)散）

傳達(dá)/實(shí)現(xiàn)——實(shí)施方案（集中）

2. 使用場(chǎng)景

一般應(yīng)用在產(chǎn)品開發(fā)過程中的需求定義和交互設(shè)計(jì)階段；教我們?nèi)绾螌?duì)未知的可能的事物進(jìn)行探索；一步步到達(dá)已知的理應(yīng)的層面。

3. 操作使用說明

雙鉆模型的四個(gè)階段也許很精簡(jiǎn)并且合并到兩個(gè)主要的階段。

第一階段——做對(duì)的事（菱形1——探索和定義）

第二階段——把事情做對(duì)（菱形2——開發(fā)和履行）

4.  具體實(shí)踐案例說明

下圖是對(duì)阿里內(nèi)部一款移動(dòng)運(yùn)維產(chǎn)品的分析，分析其從 0-1 的方向探索和從 1-1.5 的發(fā)展歷程：

下圖是曾經(jīng)在一個(gè)設(shè)計(jì)講座中，滴滴 CDX 一位設(shè)計(jì)師的分享，她把雙鉆模型利用到設(shè)計(jì)的研究和輸出階段，個(gè)人感覺此模型此刻的使用場(chǎng)景也很貼切；不僅僅是在完整的一個(gè)項(xiàng)目中，在單一的某個(gè)階段雙鉆模型也是理念很好的承載容器。

模型五：卡諾模型

1.概念介紹

kano模型是狩野紀(jì)昭教授發(fā)明的一種工具，以分析用戶需求對(duì)用戶滿意的影響為基礎(chǔ)，體現(xiàn)了產(chǎn)品性能和用戶滿意之間的非線性關(guān)系。

在卡諾模型中，將產(chǎn)品和服務(wù)的質(zhì)量特性分為五種類型：

1> 魅力屬性：用戶意想不到的，如果不提供此需求，用戶滿意度不會(huì)降低，但當(dāng)提供此需求，用戶滿意度會(huì)有很大提升；

2> 期望屬性：當(dāng)提供此需求，用戶滿意度會(huì)提升，當(dāng)不提供此需求，用戶滿意度會(huì)降低；

3> 必備屬性：當(dāng)優(yōu)化此需求，用戶滿意度不會(huì)提升，當(dāng)不提供此需求，用戶滿意度會(huì)大幅降低；

4> 無差異因素：無論提供或不提供此需求，用戶滿意度都不會(huì)有改變，用戶根本不在意；

5> 反向?qū)傩裕河脩舾径紱]有此需求，提供后用戶滿意度反而會(huì)下降。

2. 使用場(chǎng)景

卡諾模型的主要使用場(chǎng)景是對(duì)用戶需求分類；

另一種是對(duì)多個(gè)功能點(diǎn)進(jìn)行優(yōu)先級(jí)排序。

3. 具體使用操作

步驟一：設(shè)計(jì)問卷調(diào)查表，實(shí)施有效的問卷調(diào)查

KANO 模型的問卷問法，是對(duì)每個(gè)質(zhì)量特性都由正向和負(fù)向兩個(gè)問題構(gòu)成，分別測(cè)量用戶在面對(duì)存在或不存在某項(xiàng)質(zhì)量特性時(shí)的反應(yīng)。問卷中的問題答案采用五級(jí)選項(xiàng)分別是：

我很喜歡：讓你感到滿意、開心、驚喜。

理應(yīng)如此：你覺得是應(yīng)該且必備的功能。

無所謂：你不會(huì)特別在意，但還可以接受。

勉強(qiáng)接受：你不喜歡，但可以接受。

我很不喜歡：讓你感到不滿意。

步驟二：?jiǎn)柧斫Y(jié)果整理，進(jìn)行數(shù)據(jù)分析

根據(jù)問卷結(jié)果進(jìn)行 KANO 模型二維屬性歸屬分析，可得出魅力屬性、期望屬性、必備屬性、無差異屬性、反向?qū)傩耘c可疑結(jié)果的功能屬性歸類百分比。除了對(duì)屬性的歸屬探討外，并通過百分比計(jì)算出 Better-Worse 系數(shù)，表示某功能可以增加滿意或者消除很不喜歡的影響程度。

增加后的滿意系數(shù) Better/SI=(A+O)/(A+O+M+I)

消除后的不滿意系數(shù) Worse/DSI=-1*(O+M)/(A+O+M+I)

根據(jù) better-worse 系數(shù)值，將散點(diǎn)圖劃分為四個(gè)象限。

第一象限/期望屬性：better 與 worse系數(shù)成正比；表示產(chǎn)品提供此功能，用戶滿意度會(huì)提升，不提供此功能，用戶滿意度會(huì)降低，這是質(zhì)量的競(jìng)爭(zhēng)性屬性，應(yīng)盡力去滿足用戶的期望型需求。

第二象限/魅力屬性：better系數(shù)值高，worse 系數(shù)絕對(duì)值低的情況。表示不提供此功能，用戶滿意度不會(huì)降低，提供此功能，用戶滿意度和忠誠(chéng)度會(huì)有很大提升；

第三象限/無差異屬性：better系數(shù)值低，worse系數(shù)絕對(duì)值也低的情況。即無論提供或不提供這些功能，用戶滿意度都不會(huì)有改變，這些功能點(diǎn)是用戶并不在意的功能。

第四象限/必備屬性：better系數(shù)值低，worse系數(shù)絕對(duì)值高的情況。當(dāng)產(chǎn)品提供此功能，用戶滿意度不會(huì)提升，當(dāng)不提供此功能，用戶滿意度會(huì)大幅降低；此象限的功能是最基本的功能，這些需求是用戶認(rèn)為產(chǎn)品有義務(wù)做到的事情。

步驟三：數(shù)據(jù)解讀，將結(jié)果落地實(shí)施

KANO 模型是對(duì)功能需求的優(yōu)先級(jí)進(jìn)行探索，具體情況還需要和業(yè)務(wù)方進(jìn)行討論，結(jié)合實(shí)際情況后制定可行的產(chǎn)品功能開發(fā)優(yōu)先級(jí)順序，以將調(diào)研結(jié)果落地實(shí)施。

4. 具體案例實(shí)踐說明

題目：根據(jù)報(bào)警內(nèi)容，“掌上運(yùn)維”提供運(yùn)維操作建議（如磁盤滿了智能推薦執(zhí)行日志清理等）

步驟一：設(shè)計(jì)問卷問題，發(fā)放問卷

步驟二：?jiǎn)柧斫y(tǒng)計(jì)，進(jìn)行 KANO 模型二維屬性歸屬分析

步驟三：根據(jù)問卷統(tǒng)計(jì)的用戶數(shù)據(jù)；計(jì)算出每個(gè)區(qū)域的百分比；

具體計(jì)算方式是全部區(qū)域的人數(shù)相加作為分母；每個(gè)格子中的數(shù)字作為分子，即可得出每個(gè)格子的百分比出來。

具體百分比得出后，將下表中標(biāo) A、O、M、I、R、Q 的格子中百分比相加，即可得到五種屬性對(duì)應(yīng)的百分比。本調(diào)查結(jié)果可以得到A魅力屬性占比為42.1%，O期望屬性占比9%，M必備屬性占比1.2%，I無差異屬性占比38.9%，R反向?qū)傩哉急?.8%，Q可疑結(jié)果占比7%。

步驟四：根據(jù) Better-Worse 計(jì)算公式，得出 Better-Worse 系數(shù)，明確功能落點(diǎn)象限。

步驟五：多個(gè)功能需求結(jié)果對(duì)比進(jìn)行優(yōu)先級(jí)排序。

模型六：METUX 幸福模型

1. 概念介紹

為了幫助大家更好地進(jìn)行“幸福設(shè)計(jì)”，卡里羅教授分享了他的一個(gè)模型——Motivation, Engagement and Thriving in theUser Experience (METUX)。

2. 使用場(chǎng)景

產(chǎn)品成熟穩(wěn)定期，需對(duì)產(chǎn)品&用戶體驗(yàn)進(jìn)行提升時(shí)；或需綜合對(duì)產(chǎn)品體驗(yàn)進(jìn)行評(píng)估分析時(shí)；提升用戶幸福感，希望產(chǎn)品能對(duì)用戶行為方式及生活質(zhì)量有所影響時(shí)。

3. 主要使用操作

在考慮用戶體驗(yàn)時(shí)，從4個(gè)層次進(jìn)行考慮：

??  第一層是“界面”體驗(yàn)：用戶與產(chǎn)品交互時(shí)的體驗(yàn)如何。

??  第二層是“任務(wù)”體驗(yàn)：界面之上是用戶完成的任務(wù)。如利用智能手環(huán)計(jì)步，用戶在完成任務(wù)時(shí)體驗(yàn)如何。

??  第三層是“行為”體驗(yàn)：任務(wù)之上是用戶的行為。如用戶購(gòu)買智能手環(huán)的目的是運(yùn)動(dòng)，此時(shí)行為可能是跑步、騎自行車。因此產(chǎn)品在任務(wù)之上應(yīng)該深入關(guān)注用戶行為上的體驗(yàn)。

??  第四層是“生活”體驗(yàn)：行為會(huì)對(duì)生活產(chǎn)生影響。如運(yùn)動(dòng)過量可能導(dǎo)致身體受損。

在設(shè)計(jì)過程中，應(yīng)該關(guān)注“勝任力”、“自主性”和“關(guān)系”三個(gè)關(guān)鍵因素，這些基本心理訴求是動(dòng)機(jī)、投入感和幸福感的根本。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

途家網(wǎng)是全球民宿預(yù)訂平臺(tái)，與傳統(tǒng)酒店住宿不同，致力于為用戶提供更個(gè)性化、更人性化的出行體驗(yàn)。作為電商類產(chǎn)品，改版最終的目的自然是提升轉(zhuǎn)化率、提升GMV，除了這個(gè)簡(jiǎn)單粗暴的商業(yè)目標(biāo)，設(shè)計(jì)團(tuán)隊(duì)同時(shí)需要考慮如何改善產(chǎn)品的用戶體驗(yàn)。本文主要圍繞途家App中的首頁(yè)、列表頁(yè)、詳情頁(yè)三個(gè)環(huán)節(jié)，為大家分享改版的思路和最終的設(shè)計(jì)方案。

核心流程

核心流程指的是用戶進(jìn)入途家App到完成一單預(yù)訂所經(jīng)歷的過程，主要包含以下幾個(gè)環(huán)節(jié)：搜索&瀏覽、比較、決策、預(yù)訂、支付。要提升用戶體驗(yàn)，就需要設(shè)計(jì)師在每一個(gè)環(huán)節(jié)中，思考如何更好的幫助用戶達(dá)成他們的目標(biāo)，以促使用戶進(jìn)入下一個(gè)環(huán)節(jié)，最終完成預(yù)訂。

首頁(yè)

進(jìn)入App首頁(yè)的用戶，大致會(huì)分為兩類。一類是需求明確的用戶，他們有比較清晰的出行日期和目的地，這類用戶大多會(huì)直接通過搜索來尋找房源，因此首頁(yè)上需要有明顯的搜索框來引導(dǎo)他們說出出行需求，這樣他們就會(huì)順利進(jìn)入核心流程。另一類進(jìn)入app的用戶則沒有明確的出行需求，甚至可能是不太了解產(chǎn)品的新用戶，直接使用搜索會(huì)讓他們感到不知所措，他們需要通過先逛一逛來汲取靈感。那么對(duì)于這一部分用戶，首頁(yè)就需要給予一些有吸引力的內(nèi)容，推薦一些好東西給用戶，讓他們能隨意看看，一方面旨在激發(fā)用戶消費(fèi)欲進(jìn)入核心流程，另一方面能夠讓用戶對(duì)產(chǎn)品產(chǎn)生好感和信任感。

列表頁(yè)

列表頁(yè)是承載房源卡片集合的搜索結(jié)果頁(yè)，用戶通常會(huì)經(jīng)過首頁(yè)的搜索框，在輸入了位置和日期后，進(jìn)入列表頁(yè)。當(dāng)然通過城市、位置和日期搜索得到的結(jié)果，只能是一個(gè)初步的搜索結(jié)果，用戶還需要通過入住人數(shù)、價(jià)格、戶型等縮小范圍，篩選出更符合自己入住需求的房源，以便于逐一比較和進(jìn)行查看。所以在用戶進(jìn)入列表頁(yè)后，如何幫助他們得到符合入住需求的精細(xì)化搜索結(jié)果，是我們首先需要解決的問題。

詳情頁(yè)

房屋詳情頁(yè)是用戶進(jìn)行購(gòu)買決策的重要環(huán)節(jié)。用戶在詳情頁(yè)停留時(shí)間相對(duì)較長(zhǎng)且有較強(qiáng)烈的購(gòu)買意愿，因此，在詳情頁(yè)充分展示房屋優(yōu)勢(shì)，吸引用戶，是對(duì)于提升轉(zhuǎn)化率十分重要的。詳情頁(yè)的信息涵蓋了多個(gè)維度，比如有關(guān)于房屋的描述、關(guān)于房東的介紹、還有來自房客的評(píng)價(jià)、入住須知等，如何將大量的信息合理的分組，突出房屋優(yōu)勢(shì)，并以合適的順序清晰地展示給用戶，是詳情頁(yè)的設(shè)計(jì)難點(diǎn)。

結(jié)語(yǔ)

每一次改版都需要公司多個(gè)業(yè)務(wù)方及團(tuán)隊(duì)的支持，做為設(shè)計(jì)師會(huì)收到來自各方的需求及關(guān)于方案的反饋。面對(duì)來自四面八方的觀點(diǎn)輸入，我們要時(shí)刻牢記改版目標(biāo)，并且明白評(píng)判方案的好壞并不能簡(jiǎn)單地用對(duì)與錯(cuò)，而是當(dāng)下面對(duì)此人此情此景，取舍是否合理，是否盡力做到了的權(quán)衡。同時(shí)，作為可能是唯一能夠單純?yōu)橛脩粽f話的角色，設(shè)計(jì)師還是要在考慮商業(yè)目標(biāo)之外，多為用戶爭(zhēng)取一絲閑暇吧。

藍(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ù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

我們現(xiàn)在追求幸福的方式是錯(cuò)誤的。包括很多人學(xué)佛，就求福求發(fā)財(cái)，這只是勾牽你進(jìn)來的方式，其實(shí)道的門都沒有進(jìn)來。要進(jìn)道的門，確實(shí)不容易，不是福報(bào)大小的問題，而是陰德厚重的問題。

我們對(duì)幸福有個(gè)錯(cuò)誤的覺知，認(rèn)為吃得越好，住得越高檔舒服，飲食住宿千萬(wàn)般求細(xì)膩，認(rèn)為這是幸福生活。這個(gè)是凡夫之見。我現(xiàn)在也在反省，學(xué)佛，還是修道，很多人都在追求住得更好，更豪華，吃得更細(xì)膩，更有營(yíng)養(yǎng)。認(rèn)為這就是福報(bào)，那真的如此嗎？

其實(shí)福報(bào)和物質(zhì)沒有關(guān)系，可是不知道什么時(shí)候，大家把福報(bào)和錢財(cái)?shù)韧饋怼?dǎo)致很多人一學(xué)佛，發(fā)財(cái)了，就說自己福報(bào)來了。古人講，真?zhèn)饕痪湓挘賯魅f(wàn)卷書。我們現(xiàn)在看到的佛經(jīng)，很多名相，都是假傳萬(wàn)卷書。我們誤解了這些名相，所以越修越錯(cuò)。就單單一個(gè)福報(bào)這個(gè)名詞。

人對(duì)外界的追求是沒有止境的。就像你看速度，我們對(duì)速度的追求也沒有止境，飛機(jī)、火車，導(dǎo)致越來越快。就像人的欲望一樣，一旦升騰起來，也沒有止境。你會(huì)想要越多，尤其是世俗福報(bào)越大的人，他欲望就越大。因?yàn)橄蛲獾淖非?，是一條不歸路，所以你看城市里頭，誰(shuí)活得最幸福。告訴各位，沒有的。在城市的欲望里頭，每個(gè)人都活得很痛苦。

所以我們對(duì)福報(bào)的誤解，導(dǎo)致追求的錯(cuò)誤。人要怎么修行？人應(yīng)該要念念歸于清凈時(shí)。所以不管是佛教，還是道家的修行，最基本的要做到清凈。很多人錢財(cái)，權(quán)力很大，為什么那么痛苦？因?yàn)樗麤]有得到清凈。所以道家修行經(jīng)典有句話：人神欲清而心擾之，人心欲靜而欲牽之。如果能懂這句話，也能開悟。

真修道，就要回歸到心神的安寧上來，才能得到真正的幸福。我們現(xiàn)在都在鼓動(dòng)很多的欲望，包括出家，也希望廟宇越蓋越大，甚至超負(fù)荷，貸款來蓋。導(dǎo)致佛教和經(jīng)濟(jì)越來越掛鉤，這已經(jīng)慢慢偏離了道的根本了。因?yàn)榈朗且獨(dú)w于心神的清凈。

我用口味來比喻。世俗人吃的，要追求越吃越好，口味越來越重。所以人的吃的欲望永遠(yuǎn)無法滿足。為了滿足吃和住的欲望，開始了大面積的造惡業(yè)，賺非分錢財(cái)、殺生。發(fā)展人的欲望，是一條不歸路。

那佛教怎么辦呢？佛教的方法，就是告訴人舌根要清凈，吃的很簡(jiǎn)單，很粗糙，普通五谷都能得健康。當(dāng)人的舌根清凈時(shí)，人可以減少非常多的惡業(yè)。同時(shí)人不需要那么多的精力，就為了滿足自己的口欲。

再比如身根清凈的問題。人一味地享受，吃的臟，只會(huì)讓身根更污染。身根一污染，人就要花大批的精力和財(cái)力去照顧他。身根臟臭的人，身體有臭味，就會(huì)花很多時(shí)間去打扮身體，洗澡，甚至用很漂亮的衣服。

身根臟了，就導(dǎo)致人體力下降，免疫力下降，花很多財(cái)力去吃藥，住的要追求高檔，甚至產(chǎn)生潔癖，力氣不足，再也無法適應(yīng)普通的交通工具。對(duì)交通工具的要求也越來越高，硬座的火車就承受不了，就要軟臥，或者飛機(jī)，或者購(gòu)買更高級(jí)的車。然后我們就認(rèn)為，這個(gè)是有福報(bào)的表現(xiàn)。

按照佛法來講，這個(gè)是人類身根下劣啦。說實(shí)話，比起毛澤東時(shí)代，這代人臉上的紅潤(rùn)少了，力氣也少了，精神也不比他們。倒是疾病增多了，而且對(duì)環(huán)境越來越挑剔了。動(dòng)不動(dòng)就要?dú)⒕荆t(yī)院總是人滿為患。為什么？

我組織多次去五臺(tái)山走五個(gè)臺(tái)，走三天一百多公里。我發(fā)現(xiàn)那些福報(bào)太大，錢財(cái)過多的人，走不動(dòng)。我就開玩笑地說，你看，都被自己的福報(bào)害了吧。

你有好車，卻沒有好腿腳，有好吃的，卻沒好胃口，有好房，卻沒有好睡眠。有些人一換個(gè)環(huán)境，根本就睡不著。這就是身根下劣。城市人的福報(bào)，把健步如飛的腿腳換成車，把好胃口換成冰箱，把好睡眠換成床。

這一塊，佛教一定要宣傳起來。我發(fā)現(xiàn)香客對(duì)住宿的地方，越來越挑剔，要求越來越高。要有獨(dú)立衛(wèi)生間，床鋪要很干凈，被子要經(jīng)常換。很奇怪，我們很害怕被傳染。為什么你那么容易被傳染？因?yàn)樯砀铝恿恕?/span>

我們都認(rèn)為最大的疾病來在外面，卻不知道，真正的疾病，是來自嘴巴吃的肉，和魚，以及不干凈的東西。這些是直接污染人的身體內(nèi)部，而外在的環(huán)境，只能污染身體外部而已。

如果真要修道，最起碼的一條，食清凈食。人的身體清凈了，欲望就少了，你根本不要求那么多東西。就有很多時(shí)間來修行，學(xué)佛了。身體清凈后，對(duì)環(huán)境的要求也不會(huì)很高，也沒有潔癖。

比如睡覺來講，最好的床鋪是硬硬的木板床，人在硬的木板床上，體內(nèi)的氣就不會(huì)被堵住。一直睡的太柔軟，彈簧床，會(huì)影響人的骨骼發(fā)育。椅子也要硬的，人做沙發(fā)椅，很軟的坐久了，氣都堵住了。

現(xiàn)在人為什么那么多的氣血淤堵，跟睡的太柔軟，以及坐的太柔軟有關(guān)。這一點(diǎn)估計(jì)很少人去提。你看老一輩子的床都是木板的，最好的。睡的姿勢(shì)最好是佛陀的吉祥臥。向右側(cè)身，右手枕頭，左手放在左側(cè)腿上。這個(gè)姿勢(shì)叫吉祥臥。這是最好的睡的姿勢(shì)。其它姿勢(shì)都不行。

要修道，要把欲望降低，慢慢地回歸來。這時(shí)多念經(jīng)就顯得很重要了。經(jīng)文有加持力，能讓色身清凈。要達(dá)到人心清凈，天地自歸寧。這個(gè)是很不容易的。

古人講，安貧樂道。其實(shí)是很高的境界。一個(gè)人耐得住清貧，因?yàn)樗闹杏械?。永嘉證道歌說的，窮釋子，口稱貧，實(shí)則身貧道不貧。身上穿的百衲衣，心里卻懷無價(jià)珍。我們一直奔波在外頭，因?yàn)闆]有道，所以才會(huì)追求外在的物質(zhì)。 

藍(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ù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

---

結(jié)論

每個(gè)設(shè)計(jì)師都應(yīng)該擁有自己的一套黃金法則，以形成良好的產(chǎn)品設(shè)計(jì)基礎(chǔ)。這肯定有助于更好地處理決策并找到正確的總體方向。

總而言之，我想與大家分享我前一段時(shí)間遇到的一個(gè)非常有用的網(wǎng)頁(yè)，我經(jīng)常檢查它，我覺得它非常好，鼓舞人心。有時(shí)讀這個(gè)頁(yè)面讓我的思緒充滿動(dòng)力。

這里是：

設(shè)計(jì)原則
設(shè)計(jì)原則和方法的開源集合principle.design

感謝您閱讀本文，我希望它對(duì)您們中的某些人有任何幫助和靈感。

祝你有美好的一天！

藍(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ù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

文章目錄

1. 基礎(chǔ)概念
2. 大屏數(shù)據(jù)可視化設(shè)計(jì)原則
3. 大屏可視化設(shè)計(jì)流程
4. 大屏設(shè)計(jì)的注意事項(xiàng)
5. Q&A
6. 總結(jié)

基礎(chǔ)概念

1. 什么是數(shù)據(jù)可視化

把相對(duì)復(fù)雜、抽象的數(shù)據(jù)通過可視的方式以人們更易理解的形式展示出來的一系列手段叫做數(shù)據(jù)可視化，數(shù)據(jù)可視化是為了更形象地表達(dá)數(shù)據(jù)內(nèi)在的信息和規(guī)律，促進(jìn)數(shù)據(jù)信息的傳播和應(yīng)用。

在當(dāng)前新技術(shù)支持下，數(shù)據(jù)可視化除了「可視」，還有可交流、可互動(dòng)的特點(diǎn)。數(shù)據(jù)可視化的本質(zhì)是數(shù)據(jù)空間到圖形空間的映射，是抽象數(shù)據(jù)的具象表達(dá)。

△ 數(shù)據(jù)可視化作品《 launchit 》，作者：Shane Mielke

作者寫了本書，地圖上顯示了世界各地讀者的分布情況及對(duì)應(yīng)人數(shù)。

△ 數(shù)據(jù)可視化作品《 world-drawn-by-travelers 》，作者：TripHappy

國(guó)家之間相互連通的旅游路線，顏色越相近的國(guó)家，表明兩個(gè)國(guó)家的人們互動(dòng)越頻繁。

2. 什么是大屏數(shù)據(jù)可視化

大屏數(shù)據(jù)可視化是以大屏為主要展示載體的數(shù)據(jù)可視化設(shè)計(jì)。

「大面積、炫酷動(dòng)效、豐富色彩」，大屏易在觀感上給人留下震撼印象，便于營(yíng)造某些獨(dú)特氛圍、打造儀式感。電商雙11時(shí)大屏利用此特點(diǎn)打造了熱烈、狂歡的節(jié)日氛圍，原本看不見的數(shù)據(jù)可視化后，便能調(diào)動(dòng)人的情緒、引發(fā)人的共鳴，傳遞企業(yè)文化和價(jià)值。

利用面積大、可展示信息多的特點(diǎn)，通過關(guān)鍵信息大屏共享的方式可方便團(tuán)隊(duì)討論和決策，故大屏也常用來做數(shù)據(jù)分析監(jiān)測(cè)使用。大屏數(shù)據(jù)可視化目前主要有信息展示、數(shù)據(jù)分析及監(jiān)控預(yù)警三大類。

數(shù)據(jù)分析類：

△ 圖片來源：必應(yīng)，圖片作者：帆軟軟件有限公司

大屏數(shù)據(jù)可視化設(shè)計(jì)原則

大屏數(shù)據(jù)可視化設(shè)計(jì)原則：設(shè)計(jì)服務(wù)需求、先總覽后細(xì)節(jié)。

1. 設(shè)計(jì)服務(wù)需求

大屏設(shè)計(jì)要避免為了展示而展示，排版布局、圖表選用等應(yīng)服務(wù)于業(yè)務(wù)，所以大屏設(shè)計(jì)是在充分了解業(yè)務(wù)需求的基礎(chǔ)上進(jìn)行的。那什么是業(yè)務(wù)需求呢？業(yè)務(wù)需求就是要解決的問題或達(dá)成的目標(biāo)。設(shè)計(jì)師通過設(shè)計(jì)的手段幫助相關(guān)人員達(dá)成這個(gè)目標(biāo)，是大屏數(shù)據(jù)可視化的價(jià)值所在。

2. 先總覽后細(xì)節(jié)

大屏因?yàn)榇螅休d數(shù)據(jù)多，為了避免觀者迷失，大屏信息呈現(xiàn)要有焦點(diǎn)、有主次。可以通過對(duì)比，先把核心數(shù)據(jù)拋給用戶，待用戶理解大屏主要內(nèi)容與展示邏輯后，再逐級(jí)瀏覽二三級(jí)內(nèi)容。部分細(xì)節(jié)數(shù)據(jù)可暫時(shí)隱藏，用戶需要時(shí)可通過鼠標(biāo)點(diǎn)擊等交互方式喚起。

大屏可視化設(shè)計(jì)流程

規(guī)范的流程是好結(jié)果的保證。找到一個(gè)可參考的流程，然后步步為營(yíng)，就能避免很多不必要的返工，保證設(shè)計(jì)質(zhì)量和項(xiàng)目進(jìn)度。

1. 根據(jù)業(yè)務(wù)場(chǎng)景抽取關(guān)鍵指標(biāo)

關(guān)鍵指標(biāo)是一些概括性詞語(yǔ)，是對(duì)一組或者一系列數(shù)據(jù)的統(tǒng)稱。一般情況下，一個(gè)指標(biāo)在大屏上獨(dú)占一塊區(qū)域，所以通過關(guān)鍵指標(biāo)定義，我們就知道大屏上大概會(huì)顯示哪些內(nèi)容以及大屏?xí)环譃閹讐K。以共享單車電子圍欄監(jiān)控系統(tǒng)為例，這里的關(guān)鍵指標(biāo)有：企業(yè)停車時(shí)長(zhǎng)、企業(yè)違停量、熱點(diǎn)違停區(qū)域、車輛入欄率等。

確定關(guān)鍵指標(biāo)后，根據(jù)業(yè)務(wù)需求擬定各個(gè)指標(biāo)展示的優(yōu)先級(jí)（主、次、輔）。

2. 確立指標(biāo)分析維度

「橫看成嶺側(cè)成峰」。同一個(gè)指標(biāo)的數(shù)據(jù)，從不同維度分析就有不同結(jié)果。很多小伙伴做完可視化設(shè)計(jì)，發(fā)現(xiàn)可視化圖形并沒有準(zhǔn)確表達(dá)自己的意圖，也沒能向觀者傳達(dá)出應(yīng)有的信息，可視化圖形讓人困惑或看不懂。出現(xiàn)這種情況很大程度就是因?yàn)榉治龅木S度沒有找準(zhǔn)或定義的比較混亂。

上圖向大家展示了數(shù)據(jù)分析常用的4個(gè)維度，我們?cè)谶x定指標(biāo)后，就需要跟項(xiàng)目組其他小伙伴討論：我們的各個(gè)指標(biāo)主要想給大家展示什么，更進(jìn)一步的講，是我們想通過可視化表達(dá)什么樣的規(guī)律和信息。而上圖，可以引導(dǎo)我們從「聯(lián)系、分布、比較、構(gòu)成」四個(gè)維度更有邏輯的思考這個(gè)問題。

• 聯(lián)系：數(shù)據(jù)之間的相關(guān)性。
• 分布：指標(biāo)里的數(shù)據(jù)主要集中在什么范圍、表現(xiàn)出怎樣的規(guī)律。
• 比較：數(shù)據(jù)之間存在何種差異、差異主要體現(xiàn)在哪些方面。
• 構(gòu)成：指標(biāo)里的數(shù)據(jù)都由哪幾部分組成、每部分占比如何。

當(dāng)然，上圖例舉的示例圖表都比較傳統(tǒng)，在大屏數(shù)據(jù)可視化中常還有另一類地理信息（常以2/3D地圖、地球呈現(xiàn)）出現(xiàn)。上圖雖未包含這類圖形，但它提供給我們的確定數(shù)據(jù)分析維度的思路和方法是相通的，可借鑒。

3. 選定可視化圖表類型

當(dāng)確定好分析維度后，事實(shí)上我們所能選用的圖表類型也就基本確定了。接下來我們只需要從少數(shù)幾個(gè)圖表里篩選出最能體現(xiàn)我們?cè)O(shè)計(jì)意圖的那個(gè)就好了。

選定圖表注意事項(xiàng)：易理解、可實(shí)現(xiàn)。

易理解

可視化設(shè)計(jì)要考慮大屏最終用戶，可視化結(jié)果應(yīng)該是一看就懂，不需要思考和過度理解，因而選定圖表時(shí)要理性，避免為了視覺上的效果而選擇一些對(duì)用戶不太友好的圖形。

可實(shí)現(xiàn)

我們需要了解現(xiàn)有數(shù)據(jù)的信息、規(guī)模、特征、聯(lián)系等，然后評(píng)估數(shù)據(jù)是否能夠支撐相應(yīng)的可視化表現(xiàn)。

我們?cè)O(shè)計(jì)的圖形圖表，要開發(fā)能夠?qū)崿F(xiàn)。實(shí)際工作中，一些可視化效果開發(fā)用代碼寫很容易實(shí)現(xiàn)，效果也不錯(cuò)，但這些效果設(shè)計(jì)師用 Ps / Ai / Ae 這些工具模擬時(shí)會(huì)發(fā)現(xiàn)比較困難；同樣的，某些效果設(shè)計(jì)師用設(shè)計(jì)工具可以輕易實(shí)現(xiàn)，但開發(fā)要用代碼落地卻非常困難，所以大屏設(shè)計(jì)中跟開發(fā)常溝通非常重要，我們需要明確哪些地方設(shè)計(jì)師可以盡情發(fā)揮，哪些地方需要謹(jǐn)慎設(shè)計(jì)。一個(gè)項(xiàng)目總有周期與預(yù)算限制，不會(huì)無限期的修改迭代，所以設(shè)計(jì)師在這里需要抓住重點(diǎn)，有取舍，不鉆牛角尖、不死磕不放。

4. 了解物理大屏，確定設(shè)計(jì)稿尺寸

多數(shù)情況下設(shè)計(jì)稿分辨率即被投大屏的信號(hào)源電腦屏幕的分辨率。有多個(gè)信號(hào)源時(shí)，就會(huì)有多個(gè)設(shè)計(jì)稿，此時(shí)每個(gè)設(shè)計(jì)稿的尺寸即對(duì)應(yīng)信號(hào)源電腦屏幕的分辨率。

一般情況下設(shè)計(jì)稿的分辨率就是電腦的分辨率，當(dāng)有多個(gè)信號(hào)源時(shí)，有時(shí)會(huì)通過顯卡自定義電腦屏幕分辨率，從而使電腦顯示分辨率不等于其物理分辨率，此時(shí)，對(duì)應(yīng)設(shè)計(jì)稿的分辨率也就變成了設(shè)置后的分辨率。此外，當(dāng)被投電腦分辨率長(zhǎng)寬比與大屏物理長(zhǎng)寬比不一致時(shí)（單信號(hào)源），也會(huì)對(duì)被投電腦屏幕分辨率做自定義調(diào)整，這種情況設(shè)計(jì)稿分辨率也會(huì)發(fā)生變化。所以設(shè)計(jì)開始前了解物理大屏長(zhǎng)寬比很重要。

5. 頁(yè)面布局、劃分

尺寸確立后，接下來要對(duì)設(shè)計(jì)稿進(jìn)行布局和頁(yè)面的劃分。這里的劃分，主要根據(jù)我們之前定好的業(yè)務(wù)指標(biāo)進(jìn)行，核心業(yè)務(wù)指標(biāo)安排在中間位置、占較大面積；其余的指標(biāo)按優(yōu)先級(jí)依次在核心指標(biāo)周圍展開。一般把有關(guān)聯(lián)的指標(biāo)讓其相鄰或靠近，把圖表類型相近的指標(biāo)放一起，這樣能減少觀者認(rèn)知上的負(fù)擔(dān)并提高信息傳遞的效率。

6. 定義設(shè)計(jì)風(fēng)格

很多小伙伴也許沒接觸過大屏設(shè)計(jì)工作，但大多數(shù)人都應(yīng)該有 APP 或者 Web 風(fēng)格定義的經(jīng)驗(yàn)。我們?cè)诙x一款 APP 或者 Web 頁(yè)面設(shè)計(jì)風(fēng)格時(shí)常用的方法是什么呢？情緒板。

大屏雖酷炫，但實(shí)際上也是運(yùn)行在瀏覽器里的 Web 頁(yè)面，所以大屏設(shè)計(jì)風(fēng)格定義方法也同樣可以用情緒板來做，這種方法也是目前比較科學(xué)的風(fēng)格定義手段。

上圖提供了情緒板應(yīng)用的腦圖，具體操作細(xì)節(jié)不做介紹，不太了解的小伙伴可以自己找找資料。

編者按：一篇好文幫你掃盲，運(yùn)用情緒板搞定設(shè)計(jì)→《該怎么運(yùn)用情緒板，才能讓設(shè)計(jì)作品更有說服力？》

情緒板的一套流程下來，我們定義的風(fēng)格基本是科學(xué)準(zhǔn)確的，可以指導(dǎo)我們執(zhí)行設(shè)計(jì)。如果是給甲方做大屏，這個(gè)流程也可以讓我們提出的方案更有說服力。

7. 可視化設(shè)計(jì)

根據(jù)定義好的設(shè)計(jì)風(fēng)格與選定的圖表類型進(jìn)行合理的可視化設(shè)計(jì)。目前來說大屏可視化主要有指標(biāo)類信息點(diǎn)和地理類信息點(diǎn)兩大可視化數(shù)據(jù)。指標(biāo)類信息點(diǎn)可視化效果相對(duì)簡(jiǎn)單易實(shí)現(xiàn)，而地理類信息點(diǎn)一般可視化效果酷炫，但是開發(fā)相對(duì)困難，需要設(shè)計(jì)師跟開發(fā)多溝通。地理類信息一般具有很強(qiáng)的空間感、豐富的粒子、流光等動(dòng)效、高精度的模型和材質(zhì)以及可交互實(shí)時(shí)演算等特點(diǎn)，所以對(duì)于被投電腦、大屏拼接器等硬件設(shè)備的性能會(huì)有要求，硬件配置不夠的情況下可能出現(xiàn)卡頓甚至崩潰的情況，所以這點(diǎn)也是需要提前溝通評(píng)估的。

8. 樣圖溝通確認(rèn)

這里的溝通分三個(gè)層面：設(shè)計(jì)師對(duì)內(nèi)溝通、設(shè)計(jì)師對(duì)外溝通、設(shè)計(jì)師與大屏的「溝通」。

樣圖溝通環(huán)節(jié)，最初的樣圖不需要十分精致，我們可以把它理解為一個(gè)「低保真」原型，然后通過不斷溝通修改，讓它逐步完善精致起來，也就是小步快跑，避免那種一下子走到終點(diǎn)，然后又大修大改的情況。

因?yàn)槲覀冊(cè)谇皫撞揭呀?jīng)分別確定了頁(yè)面布局、圖表類型、頁(yè)面風(fēng)格特點(diǎn)，所以這一步我們需要用盡可能簡(jiǎn)單的方法 ，把之前幾步的成果在頁(yè)面上快速體現(xiàn)出來，然后根據(jù)樣圖效果嘗試確定五方面內(nèi)容：

• 之前確立的布局在放入設(shè)計(jì)內(nèi)容后是否依然合適；
• 確立的圖表類型帶入數(shù)據(jù)后是否仍然客觀準(zhǔn)確；
• 根據(jù)關(guān)鍵元素、色彩、結(jié)構(gòu)、質(zhì)感打造出的頁(yè)面風(fēng)格是否基本傳達(dá)出了預(yù)期的氛圍和感受；
• 已有的樣式、數(shù)據(jù)內(nèi)容、動(dòng)效等在開發(fā)實(shí)現(xiàn)方面是否存在問題；
• 大屏是否存在色差、文字內(nèi)容是否清晰可見、頁(yè)面是否存在變形拉伸等現(xiàn)象。

跟大屏「溝通」是比較重要也是個(gè)特殊的環(huán)節(jié)，這也是我覺得大屏設(shè)計(jì)跟其它設(shè)計(jì)不一樣的地方，大屏有它自己獨(dú)特的分辨率、屏幕組成、色彩顯示以及運(yùn)行、展示環(huán)境，這里的很多問題只有設(shè)計(jì)稿投到大屏上才能夠被發(fā)現(xiàn)，所以這一步在樣圖溝通確認(rèn)環(huán)節(jié)非常重要，有時(shí)候需要開發(fā)出 demo，反復(fù)測(cè)試多次。

9. 頁(yè)面定稿、開發(fā)

事實(shí)上頁(yè)面開發(fā)階段并不是到了這一步才進(jìn)行，這里說的頁(yè)面開發(fā)僅指前端樣式的實(shí)現(xiàn)，實(shí)際上后臺(tái)數(shù)據(jù)準(zhǔn)備工作在定義好分析指標(biāo)后就已經(jīng)開始進(jìn)行了，而我們當(dāng)前的工作是把數(shù)據(jù)接入到前端，然后用設(shè)計(jì)的樣式呈現(xiàn)出來。

切圖與標(biāo)注

由于大屏實(shí)際就是一個(gè) web 頁(yè)面，所以開發(fā)階段的切圖與標(biāo)注是少不了的。

切圖：哪些元素需要切圖，怎么切？

一般開發(fā)用代碼寫不出的樣式或動(dòng)效，都需要設(shè)計(jì)師切圖作支持：比如數(shù)據(jù)容器的邊框、小的動(dòng)效、頁(yè)面整體大背景、部分圖標(biāo)等。切圖按正常網(wǎng)頁(yè)設(shè)計(jì)標(biāo)準(zhǔn)切就可以了。

標(biāo)注：Web頁(yè)面用什么插件做標(biāo)注這個(gè)大家都很熟悉，我就不多說了。需要注意的是，如果大屏頁(yè)面需要在不同比例的終端展示，那么此時(shí)的標(biāo)注與開發(fā)可以使用 rem 作為基本單位來實(shí)現(xiàn)，這樣實(shí)現(xiàn)的大屏頁(yè)面在后期會(huì)有更好的擴(kuò)展性與適應(yīng)性。

10. 整體細(xì)節(jié)調(diào)優(yōu)與測(cè)試

這部分是指頁(yè)面開發(fā)完成后，將真實(shí)頁(yè)面投放到大屏進(jìn)行的測(cè)試與優(yōu)化。這里主要有兩部分工作。

視覺方面的測(cè)試（有點(diǎn)像 APP 的 UI走查）：關(guān)鍵視覺元素、字體字號(hào)、頁(yè)面動(dòng)效、圖形圖表等是否按預(yù)期顯示、有無變形、錯(cuò)位等情況。

性能與數(shù)據(jù)方面的測(cè)試：圖形圖表動(dòng)畫是否流暢、數(shù)據(jù)加載、刷新有無異常；頁(yè)面長(zhǎng)時(shí)間展示是否存在崩潰、卡死等情況；后臺(tái)控制系統(tǒng)能否正常切換前端頁(yè)面顯示。

大屏設(shè)計(jì)的注意事項(xiàng)

1. 字體使用

字體優(yōu)先使用系統(tǒng)默認(rèn)字體，需要嵌入字體時(shí)考慮字體的可識(shí)別性、與當(dāng)前設(shè)計(jì)風(fēng)格是否融合、是否可免費(fèi)商用。

如果頁(yè)面是云端部署，需要嵌入字體包時(shí)，我們可以使用 FontCreator 這類的軟件把那些用不到的字符從字體包中刪掉，然后重新打包上傳，減小字體包大小，可以優(yōu)化頁(yè)面加載體驗(yàn)，避免在替換默認(rèn)字體的過程中出現(xiàn)頁(yè)面文字跳動(dòng)等現(xiàn)象。（一般來講一套字體文件包含了阿拉伯文、符號(hào)、拉丁文、日文、西里爾文、希臘文、拼音、注音符號(hào)等多種字符，對(duì)于大屏這個(gè)明確的場(chǎng)景，我們可以刪掉其它使用不到的字符，僅保留中文、拼音和數(shù)字）

2. 顏色搭配

色彩明度與飽和度差異顯著、對(duì)比鮮明， 盡量避免使用鄰近色配色。

使用深色暗色背景：深色暗色背景可減少拼縫帶來的不適感。由于背景面積大，使用暗色背景還能夠減少屏幕色差對(duì)整體表現(xiàn)的影響；同時(shí)暗色背景更能聚焦視覺，也方便突出內(nèi)容，做出一些流光、粒子等酷炫的效果。

漸變色慎重使用：大屏普遍色域有偏差，顯示偏色，因而使用漸變色需要根據(jù)大屏反饋確定是否調(diào)整，純色最佳。

3. 頁(yè)面布局

主次分明、條理清晰、注意留白，合理利用大屏上各個(gè)小的顯示單元，并盡量避免關(guān)鍵數(shù)據(jù)被拼縫分割。

Q&A

1. 設(shè)計(jì)稿投到大屏上顯示效果不佳怎么辦？

大屏的分辨率、比例、使用環(huán)境、投射方式等均會(huì)對(duì)設(shè)計(jì)造成影響。理想情況下，我們應(yīng)該在設(shè)計(jì)開始前，就能打開大屏系統(tǒng)做一些簡(jiǎn)單測(cè)試。我們可以從網(wǎng)上收集不同設(shè)計(jì)師不同風(fēng)格的大屏設(shè)計(jì)作品，然后投上去查看實(shí)際效果。因?yàn)榇蠖鄶?shù)時(shí)候大屏都會(huì)存在色彩偏差，這時(shí)通過測(cè)試我們就能發(fā)現(xiàn)漸變色、鄰近色等不同類型的色彩搭配是否可以在目標(biāo)大屏上良好呈現(xiàn)，如果不可以，那我們?cè)O(shè)計(jì)進(jìn)行時(shí)就不要使用顯示效果不佳的色彩搭配。另一方面，樣圖溝通環(huán)節(jié)及時(shí)測(cè)試也很重要。

2. 大屏設(shè)計(jì)定稿后，切圖切幾倍圖？

由于是將我們電腦屏幕投射到了大屏，大屏上的內(nèi)容是運(yùn)行在我們電腦瀏覽器上的頁(yè)面。所以切圖根據(jù)我們電腦的分辨率，正常切1倍圖就可以了。

3. 1920*1080的設(shè)計(jì)稿，投到9000*4320的屏幕上，文字圖片會(huì)虛么？

看情況，視大屏系統(tǒng)硬件規(guī)格與觀看距離來定。這塊有四個(gè)概念需要跟大家交流一下。

大屏邏輯分辨率（設(shè)計(jì)稿尺寸）、顯卡輸出分辨率、視頻矩陣切換器（ DVI ）支持分辨率、大屏實(shí)際物理分辨率。

一般后兩個(gè)是沒問題的，大屏跟矩陣切換器是由大屏廠商提供，一般剛好配套大屏。容易出問題的是顯卡輸出分辨率，我們電腦屏幕分辨率并不是最終顯卡傳遞到 DVI 接口的分辨率，傳遞到 DVI 接口的分辨率是電腦顯卡所能輸出的最大分辨率（部分電腦可設(shè)置或自定義輸出分辨率）。輸出分辨率等于 DVI 支持分辨率時(shí)顯示效果最佳。輸出分辨率低于 DVI 支持分辨率，DVI 會(huì)將信號(hào)放大后傳遞到大屏，放大的過程中就有圖像信息丟失，雖然此過程中有各種算法支持去保證圖像盡可能清晰，但算法再好，跟真實(shí)圖形還是有差距的。此外，多信號(hào)源投射效果優(yōu)于單個(gè)信號(hào)源投射。對(duì)于現(xiàn)場(chǎng)直播數(shù)據(jù)大屏，一般至少有兩個(gè)信號(hào)源，一個(gè)投屏，另一個(gè)也投屏但是處于備用狀態(tài)。

離大屏的距離也影響觀感，一般離得近，顆粒感明顯，距離稍遠(yuǎn)，會(huì)顯的較為清晰。

4. 設(shè)計(jì)稿完成開發(fā)后，發(fā)現(xiàn)在大屏上頁(yè)面有被拉伸或者壓縮的情況，怎么補(bǔ)救？

一般來講，開發(fā)只需要對(duì)設(shè)計(jì)圖做還原即可。但特殊情況下，比如顯示器擴(kuò)展不正確導(dǎo)致頁(yè)面被拉伸或壓縮，這時(shí)就需做處理：我們可以先得到被拉伸/壓縮的比例，然后對(duì)整體視圖做壓縮/拉伸處理，再由其拉伸/壓縮，這樣被拉伸/壓縮的瑕疵就可以得到一定程度上的矯正。另外，了解被投電腦硬件特點(diǎn)，有的電腦可以通過自定義分辨率解決這部分問題。

5. 除自行開發(fā)可視化大屏外，還可以通過哪些第三方服務(wù)來快速實(shí)現(xiàn)？

阿里云 DataV、騰訊云圖、百度 Sugar 等。

6. 數(shù)據(jù)可視化的圖表樣式可以在哪些地方找到參考？

圖表部分的二個(gè)庫(kù)是我們?cè)O(shè)計(jì)師可以打開瀏覽查看的，這里面所有的圖表樣式都是基于代碼實(shí)現(xiàn)的，可以作為我們?cè)O(shè)計(jì)圖表的參考，也可以讓開發(fā)拿代碼去用，或者在這些圖表的基礎(chǔ)上修改。

工具類的需要有一定的代碼基礎(chǔ)，里面同樣有豐富的圖表，所以跟開發(fā)的溝通也很重要，因?yàn)樗麄兛赡軙?huì)了解多一些更新的前沿的圖表形式，是我們?cè)O(shè)計(jì)師不知道的，所以彼此多溝通交流實(shí)在太重要了。

總結(jié)

數(shù)據(jù)可視化是一門龐大系統(tǒng)的科學(xué)，本文所有討論僅針對(duì)大屏數(shù)據(jù)可視化這一特定領(lǐng)域，管中窺豹，如有遺漏或不足之處歡迎大家討論交流。

藍(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ù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎ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ì) 

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

 

文章目錄

1. 品牌定義
2. 品牌映射（設(shè)計(jì)風(fēng)格構(gòu)建）
3. 驗(yàn)證方案設(shè)計(jì)
4. 空狀態(tài)設(shè)計(jì)
5. 驗(yàn)證實(shí)施及結(jié)果
6. 遺留問題及后續(xù)關(guān)注

品牌定義

此前，除了產(chǎn)品名及代言人的形象露出外，產(chǎn)品層面尚未有過明確且體系化的品牌概念傳達(dá)，因此無既有的概念或相關(guān)信息可遵循或參考，需從頭理清。

1. 收集相關(guān)數(shù)據(jù)

如上所述，由于目前所處階段，本次將以品牌自身單方面輸出為主，因此我們?cè)L談了相關(guān)業(yè)務(wù)負(fù)責(zé)人，探討了產(chǎn)品當(dāng)前在服務(wù)層面關(guān)注的方向以及力爭(zhēng)為用戶營(yíng)造的體驗(yàn)。

同時(shí)，我們也想了解用戶在使用安居客過程中所形成的總體印象并將其作為補(bǔ)充，因此，抓取了應(yīng)用市場(chǎng)上安居客用戶的正面反饋并從中提煉出高頻詞匯。

△ 用戶評(píng)價(jià)詞云圖

2. 建立品牌心智地圖（Mental Map）

通過繪制品牌心智地圖，可將以上零散的信息分類及提煉，以此來組織并簡(jiǎn)化我們對(duì)產(chǎn)品品牌認(rèn)知的心智結(jié)構(gòu)，最終描繪出一幅由品牌內(nèi)核所延展出的圖景，其組成可以是品牌的各個(gè)方面，凝練了關(guān)于一個(gè)品牌之所以是一個(gè)品牌的構(gòu)成。

△ 品牌心智地圖

3. 提煉品牌精髓（Brand Mantra）

進(jìn)一步的，從品牌心智地圖中提煉出構(gòu)成品牌的核心部分，分別從品牌功能（Brand Functions）、描述性修飾語(yǔ)（Descriptive Modifier）及情感性修飾語(yǔ)（Emotional Modifier）這三個(gè)維度去詮釋。

品牌功能描述了產(chǎn)品或服務(wù)的性質(zhì)，即品牌能夠向用戶提供的體驗(yàn)或益處的類型；描述性修飾語(yǔ)將進(jìn)一步分類及明確品牌所傳達(dá)出樣貌之性質(zhì)；情感性修飾語(yǔ)則解釋了給用戶帶來的益處是什么。

對(duì)安居客而言，作為連接房地產(chǎn)行業(yè)中中介與需求端的平臺(tái)，其本質(zhì)上是一個(gè)信息服務(wù)平臺(tái)；而由其對(duì)信息的深度、廣度及有效性的努力以及對(duì)信息傳達(dá)效率的追求可看出，其力求提供的是一種專業(yè)的信息服務(wù)；結(jié)合監(jiān)管機(jī)制的建設(shè)力爭(zhēng)為用戶營(yíng)造一種可靠、安心的體驗(yàn)。

△ 品牌精髓

小結(jié)

通過以上步驟，基本能夠逐漸抽象出所要表達(dá)之物。可簡(jiǎn)單將上述過程的目的理解為定義視覺風(fēng)格的方向。

△ 品牌概念抽象過程

品牌映射（設(shè)計(jì)風(fēng)格構(gòu)建）

明確所要表現(xiàn)的對(duì)象后，便可開始構(gòu)建從內(nèi)容到形式這一轉(zhuǎn)化過程，最終構(gòu)建出契合品牌的設(shè)計(jì)風(fēng)格。

1. 文案風(fēng)格構(gòu)建

首先，嘗試將品牌概念人格化，以作為后續(xù)推導(dǎo)過程中的燈塔，避免偏離航向?；谒釤挸龅钠放凭?，演繹出以下設(shè)定：

• 品牌性別：男性
• 品牌角色：專家
• 品牌性格：沉著、從容
• 與用戶的關(guān)系：安居客之于用戶就像是一位專業(yè)、貼心的「私人顧問」，在用戶遇到問題時(shí)沉著冷靜地為其指點(diǎn)迷津，在用戶產(chǎn)生疑惑時(shí)體貼入微地為其答疑解惑。

改版前文案風(fēng)格分析

現(xiàn)有方案中可窺見以下特征：

△ 改版前文案風(fēng)格

設(shè)計(jì)策略

為了貼合所設(shè)定的人格化形象，筆者制定了以下策略來調(diào)整文案寫作風(fēng)格：

• 以書面語(yǔ)語(yǔ)體替代口語(yǔ)語(yǔ)體——遣詞更豐富、正式。如：挑選房源（去看看房子）；樓盤優(yōu)惠活動(dòng)供你參與（快去看看哪些房子有活動(dòng)吧）；查看樓盤詳情（你還可以看看其他的哦~）。
• 以平鋪直敘的敘事風(fēng)格替代行銷口吻及俏皮語(yǔ)氣。如：除了旁觀，你也能發(fā)表自己的真知灼見（快參與你喜歡的話題發(fā)表評(píng)論吧?。?；可查看全部樓盤資訊（先看看其他人的動(dòng)態(tài)~）。
• 構(gòu)建統(tǒng)一的句式結(jié)構(gòu)。

此前，空狀態(tài)經(jīng)手不同設(shè)計(jì)師，且團(tuán)隊(duì)中尚無可遵從的寫作風(fēng)格指南，原有文案多少顯得混雜零亂，而句式結(jié)構(gòu)也是文案風(fēng)格的構(gòu)成要素，因此，筆者嘗試構(gòu)建統(tǒng)一的句式結(jié)構(gòu)來滿足現(xiàn)已發(fā)現(xiàn)的五十多處以及將來仍會(huì)不斷產(chǎn)生的空狀態(tài)在表達(dá)時(shí)的需求。

將重新設(shè)計(jì)的所有文案按句式結(jié)構(gòu)的異同分類，從中可發(fā)現(xiàn)明顯的規(guī)律，其對(duì)應(yīng)的正是針對(duì)不同場(chǎng)景所使用的差異化策略，對(duì)于單獨(dú)出現(xiàn)的句型，在分析其所屬場(chǎng)景及所需引導(dǎo)策略后，判斷其是必要句型還是可復(fù)用其他句型，最終形成了能夠覆蓋當(dāng)前所有場(chǎng)景的五種句式結(jié)構(gòu)，可指導(dǎo)未來同類場(chǎng)景的應(yīng)用。

△ 句式結(jié)構(gòu)構(gòu)建過程

2. 視覺風(fēng)格推導(dǎo)

風(fēng)格構(gòu)建

構(gòu)建思路：以品牌精髓中的情感修飾語(yǔ)及描述性修飾語(yǔ)作為核心意象，同時(shí)解構(gòu)對(duì)應(yīng)表現(xiàn)形式的形態(tài)要素，其后分別以形態(tài)要素為對(duì)象將核心意象進(jìn)行演繹。由于品牌精髓所處抽象層次較高，無法直接指向具體表達(dá)方式的選擇——再以得到的具體情感意象作為標(biāo)尺，尋求契合的表達(dá)方式。

色：將品牌精髓以顏色能夠觸發(fā)的感受為視角進(jìn)行演繹，并根據(jù)顏色與人類心理感知的映射關(guān)系確定基本色相范圍。

而對(duì)顏色具體的定義可在相同的表達(dá)訴求下進(jìn)一步控制色彩要素來獲取，如中性色的視覺表現(xiàn)在于色相上的控制，我們通過在色相上加入藍(lán)來獲取「高級(jí)感」；而由于安居客本身的品牌色即屬綠色，因此我們直接選用；對(duì)于藍(lán)色，考慮到實(shí)際應(yīng)用時(shí)與綠色的搭配，在色相上融入綠色使兩者呈現(xiàn)時(shí)能夠相互融合。

△ 色的定義

形：在實(shí)際建構(gòu)「形」的表達(dá)方式與情緒感受的映射關(guān)系時(shí)筆者發(fā)現(xiàn)，不同于顏色的千變?nèi)f化，「形」在各維度的表達(dá)方式上更多的呈現(xiàn)一種二元對(duì)立的局面，這種情況下，不對(duì)品牌精髓進(jìn)行演繹亦可對(duì)表達(dá)方式作出選擇。

△ 形的定義

風(fēng)格應(yīng)用

色的應(yīng)用：由空狀態(tài)設(shè)計(jì)中對(duì)所有場(chǎng)景的意象設(shè)定，可對(duì)場(chǎng)景刻畫中所需的元素進(jìn)行如下分類：

• 人
• 物
• 光影
• 背景

針對(duì)插畫，且處于空狀態(tài)這種非正常場(chǎng)景，當(dāng)前濃郁的品牌色不便直接使用，因此從明度層面對(duì)其進(jìn)行處理，以得到適用的顏色。

△ 品牌色的處理

人作為場(chǎng)景構(gòu)建中的組成部分，并非主體，且需要與物形成對(duì)比，因此使用白色。

△ 人的顏色應(yīng)用

物在場(chǎng)景的構(gòu)筑中承擔(dān)了以下角色：

• 與人的交互形成行為意象的傳達(dá)；
• 作為對(duì)環(huán)境的勾勒，構(gòu)成對(duì)場(chǎng)景的交代或環(huán)境意象的傳達(dá)。

對(duì)應(yīng)到結(jié)構(gòu)，分別為：

• 作為主體的單一物件；
• 構(gòu)成近景與遠(yuǎn)景的不同物件。

對(duì)于前者，以中性色呈現(xiàn)其主體，主色點(diǎn)綴于次一級(jí)元素；而后者，遠(yuǎn)景作為主要場(chǎng)景元素施以中性色，近景混合應(yīng)用主色。如此，既保證情緒色的露出，也豐富畫面的細(xì)膩程度。

△ 物的顏色應(yīng)用

光影

• 背景光：在表達(dá)虛無的場(chǎng)景中，以線性漸變來表達(dá)此概念，此時(shí)混合應(yīng)用兩個(gè)主色來呈現(xiàn)調(diào)性。
• 光照：對(duì)于自然光的呈現(xiàn)，另取暖色來表現(xiàn)光影，進(jìn)一步增加質(zhì)感。
• 投影：陰影當(dāng)使用中性色。

△ 光照的顏色應(yīng)用

背景：白色或明亮的顏色更讓人有安全感，且我們希望圖示能融入界面中，因此設(shè)定為白色。

形的應(yīng)用：元素形狀、元素方向、主體占比、主體位置。

元素形狀：避免銳利的切角，更多的用矩形及圓形這類相對(duì)更穩(wěn)定的形狀。

△ 元素形狀定義

元素方向：以水平面或不同面構(gòu)成的穩(wěn)定體系為主，避免單獨(dú)應(yīng)用斜切面。

△ 元素方向定義

主體占比：占據(jù)畫面中較大比例。

△ 主體占比定義

主體位置：置于畫面中心偏下。

△ 主體位置定義

驗(yàn)證方案設(shè)計(jì)

1. 驗(yàn)證思路推導(dǎo)

我們的設(shè)計(jì)目標(biāo)是形成契合品牌的視覺風(fēng)格，若目標(biāo)達(dá)成，用戶應(yīng)當(dāng)能被具備明確視覺風(fēng)格的界面激發(fā)相應(yīng)感受，從而可得到如下測(cè)試過程：安排被試瀏覽相關(guān)界面，測(cè)量其情感感受。

那如何測(cè)量人的情感呢？

在對(duì)情感測(cè)量方法的搜尋中，筆者發(fā)現(xiàn)了心理測(cè)量（相對(duì)的是生理測(cè)量）中常用的語(yǔ)義差異量表（semantic differential scale），其由若干表達(dá)情感體驗(yàn)的詞匯和量尺組成，由用戶根據(jù)感受程度選取相應(yīng)的等級(jí)，從而獲取到情感信息。

最終，可得到如下驗(yàn)證思路：

△ 驗(yàn)證思路

2. 樣本量設(shè)定

定性研究方法并非如定量研究方法那般天然具備確定樣本量的統(tǒng)計(jì)技術(shù)，目前也尚無通用的技術(shù)，業(yè)界較為熟知的 Jakob Nielsen 所提出的「可用性研究只需測(cè)試5個(gè)用戶」的說法，由于其限于可用性研究，「測(cè)試5個(gè)用戶」的說法也只是總結(jié)性的論述，實(shí)際也需酌情判斷，因此，為了確保獲取足夠的數(shù)據(jù)，筆者嘗試尋求更和通用的解決方案，最終鎖定在了市場(chǎng)研究公司 Research by Design 的 Donna Bonde 所提出的指南（Qualitative market research: When enough is enough）。

筆者認(rèn)為其建設(shè)性在于：

• 從不同研究方法的用途出發(fā)，論證了定性研究適用樣本量的數(shù)量級(jí)迥異于定量研究的合理性；
• 從實(shí)際的操作過程來探究樣本量與所發(fā)現(xiàn)問題數(shù)量的關(guān)系；
• 在上述論述范圍內(nèi)，再去嘗試解構(gòu)對(duì)樣本量構(gòu)成影響的因素，這使其能夠根據(jù)具體情況進(jìn)行相對(duì)的樣本量估算；
• 這種思路，使得其脫離了具體的使用場(chǎng)景——所使用的具體定性研究方法，單純針對(duì)「樣本量的設(shè)定」這一問題本身，這使其具備了相當(dāng)?shù)耐ㄓ眯浴?

因此，筆者參照其分析進(jìn)行了對(duì)樣本量的設(shè)定。先根據(jù)實(shí)際項(xiàng)目及團(tuán)隊(duì)情況，對(duì)相關(guān)因素進(jìn)行賦值：

△ 樣本量設(shè)定

再根據(jù)以下公式可得出適用于本項(xiàng)目的樣本量：

3. 量表設(shè)計(jì)

量尺設(shè)計(jì)

量表類型：由于對(duì)評(píng)價(jià)對(duì)象提供了對(duì)立的形象，自然需要使用雙級(jí)量尺，即要求被試從0點(diǎn)開始向兩端方向發(fā)展的數(shù)值中做出評(píng)選。

標(biāo)度數(shù)：設(shè)定標(biāo)度數(shù)時(shí)需平衡兩點(diǎn)，足夠精細(xì)，充分滿足被試表達(dá)的需求；控制數(shù)量，避免選項(xiàng)太過瑣碎。

常用的標(biāo)度數(shù)中，七點(diǎn)評(píng)分量表相比五點(diǎn)評(píng)分量表能夠得到更準(zhǔn)確的結(jié)果，而11點(diǎn)量表所能收集到的數(shù)據(jù)雖然最接近正態(tài)分布，但對(duì)被試來說成本也會(huì)隨之增加，增大疲勞效應(yīng)，因此，筆者最終選擇了七點(diǎn)標(biāo)度：

△ 量尺標(biāo)度數(shù)

修飾詞：對(duì)于量尺的數(shù)字，需要通過形容詞來賦予意義，否則被試很難進(jìn)行判斷；且修飾詞需在意義上和相應(yīng)數(shù)值對(duì)應(yīng)，這似乎很難實(shí)現(xiàn)，幸而前人已對(duì)不同量尺形容詞就其表示的程度水平進(jìn)行過系統(tǒng)的評(píng)估，使得筆者能直接繞過這個(gè)問題。

筆者按照所用的標(biāo)度數(shù)，選擇了對(duì)應(yīng)能產(chǎn)生等現(xiàn)間距的修飾詞：

△ 量尺修飾詞

測(cè)量對(duì)象的語(yǔ)義轉(zhuǎn)化

基于輸出的文案風(fēng)格與視覺意象及其對(duì)應(yīng)策略，可分別確定具體的測(cè)量對(duì)象，再以此設(shè)定能夠顯示其對(duì)立形象的形容詞：

△ 語(yǔ)義轉(zhuǎn)化過程

量表結(jié)構(gòu)設(shè)計(jì)

為了避免語(yǔ)義啟動(dòng)造成被試評(píng)價(jià)時(shí)產(chǎn)生偏差，需將有關(guān)系的條目隨機(jī)擺放，并將褒義詞和貶義詞分布在量表兩端而不是互相集中在一邊，以起到語(yǔ)義抑制效果，避免被試在作答前不經(jīng)思考。

另外，在第一輪測(cè)試中，筆者發(fā)現(xiàn)不止一位被試在對(duì)某一條目評(píng)價(jià)時(shí)混淆了其描述對(duì)象，除了其個(gè)人認(rèn)知水平外，某些條目在當(dāng)前語(yǔ)境下所展現(xiàn)出的描述關(guān)系依然不夠明確，因此筆者按照條目的描述對(duì)象對(duì)其進(jìn)行了分類，并說明其描述對(duì)象。

△ 量表結(jié)構(gòu)

空狀態(tài)設(shè)計(jì)

關(guān)于空狀態(tài)本身，相對(duì)于本文所涉及的其他內(nèi)容，其作為范式更被設(shè)計(jì)師所熟識(shí)，但在設(shè)計(jì)策略及視覺表現(xiàn)上似乎又并非如想象中簡(jiǎn)單。

「空狀態(tài)」之稱乃立足于表現(xiàn)層之觀察，其承載的實(shí)際是若干種場(chǎng)景，反饋「空」只是其中的一種也是最后一種手段，條件允許的情況下，應(yīng)當(dāng)首先考慮如何去引導(dǎo)用戶。因本項(xiàng)目落地于空狀態(tài)，上述其他設(shè)計(jì)策略不在此展開，下文將詳述空狀態(tài)的設(shè)計(jì)。

1. 表現(xiàn)空狀態(tài)

空狀態(tài)內(nèi)容

空狀態(tài)由兩部分構(gòu)成——反饋和引導(dǎo)。基于當(dāng)前情境的反饋能讓用戶獲悉所發(fā)生的事；在此基礎(chǔ)之上，還需提供引導(dǎo)以幫助用戶完成最終的任務(wù)。

反饋：反饋通常由圖像與文案組成，其風(fēng)格應(yīng)契合品牌調(diào)性，其內(nèi)容除了基本的反饋信息外也應(yīng)更多地考慮如何引導(dǎo)用戶。

引導(dǎo)：此處的引導(dǎo)指的就是最終根據(jù)實(shí)際情境提供的操作，如無可支持的功能，可以文案形式進(jìn)行表達(dá)。

空狀態(tài)結(jié)構(gòu)類型

針對(duì)安居客產(chǎn)品中的場(chǎng)景，除了完整的空狀態(tài)結(jié)構(gòu)，對(duì)于模塊化的頁(yè)面，由于模塊本身的高度有限，在數(shù)據(jù)為空時(shí)，只取描述文案作為反饋，并在樣式上弱化按鈕使其在當(dāng)前結(jié)構(gòu)下保持原有的視覺權(quán)重，以其為另一種空狀態(tài)結(jié)構(gòu)。

△ 空狀態(tài)結(jié)構(gòu)

視圖結(jié)構(gòu)類型

空狀態(tài)本身的結(jié)構(gòu)和布局應(yīng)當(dāng)一致，但對(duì)于平臺(tái)型產(chǎn)品，伴隨著業(yè)務(wù)復(fù)雜性的是頁(yè)面結(jié)構(gòu)的多樣性，這使得空狀態(tài)呈現(xiàn)于不同容器中，為達(dá)到一致的視覺效果在視覺輸出環(huán)節(jié)就需要針對(duì)性地定義布局邏輯。

而上述所謂的一致效果即為空狀態(tài)模塊應(yīng)當(dāng)居中展示于所有容器中，但由于空狀態(tài)模塊的重心并非在其物理中心上，因此為達(dá)到視覺居中的效果，在將其物理居中的基礎(chǔ)上還需在垂直方向上作相應(yīng)調(diào)整。

完整視圖：視圖的高度隨設(shè)備而變化，因此使用相對(duì)定位，布局邏輯即為將空狀態(tài)模塊相對(duì)于視圖中心垂直上移固定距離。

△ 完整視圖的布局邏輯

模塊與列表：對(duì)于相近的模塊，可統(tǒng)一其高度（無法通用的場(chǎng)景還需另外定義高度），此時(shí)可使用絕對(duì)定位，布局邏輯即為空狀態(tài)模塊相對(duì)容器頂部保持固定距離。

△ 模塊布的局邏輯

對(duì)于列表，由于其高度不固定，在空狀態(tài)時(shí)常規(guī)的處理方式是將空狀態(tài)置于背景之上或 cell 之中，前者不適用于基于白色背景的空狀態(tài)設(shè)計(jì)，而后者的形式與其實(shí)際層級(jí)關(guān)系不符，因此我們最終選擇了添加 view 來實(shí)現(xiàn)效果，如此就需定義高度來滿足此種場(chǎng)景中的所有情況，其布局邏輯也就與模塊中所應(yīng)用的相同。

2. 圖示的設(shè)計(jì)策略

圖示的設(shè)計(jì)策略核心在于其內(nèi)容的表達(dá)即意象的設(shè)定，常規(guī)的以空對(duì)象為意象的做法，無更多信息傳達(dá)，亦無助于信息傳達(dá)，是一種徒增冗余的可視化；以情緒為意象的做法由于其抽象程度和表意當(dāng)應(yīng)用于所有空狀態(tài)，這種重復(fù)容易讓用戶厭煩且無趣；而近來越來越多見的場(chǎng)景化表現(xiàn)形式，設(shè)計(jì)者對(duì)于意象的設(shè)定依舊未脫離于上述范疇，更有甚者，一股腦鉆進(jìn)表現(xiàn)形式中不可自拔，竟無明確意象的設(shè)定。

基于上述分析，筆者認(rèn)為更合適的做法是：內(nèi)容上表現(xiàn)所引導(dǎo)的行為（如有），形式上以場(chǎng)景的構(gòu)筑間接表達(dá)意象。此作法更豐滿地引導(dǎo)了行為，表達(dá)方式上也更具感染力。

根據(jù)場(chǎng)景筆者設(shè)定了三類意象：

• 平臺(tái)無內(nèi)容：虛無
• 用戶無操作：行為
• 異常情況：環(huán)境

對(duì)于「虛無」的概念，即以寫實(shí)的方式在空間層面描繪出來，并讓人置身其中，營(yíng)造出一種孤寂的氛圍。

△ 「虛無」的意象表達(dá)

對(duì)于行為及環(huán)境，筆者將抽象的概念具象化，以其為意象。以「用戶未曾對(duì)相關(guān)對(duì)象發(fā)表評(píng)論」為例，對(duì)事物進(jìn)行主觀或客觀的闡述是一種抽象的概念，難以直接可視化，因此筆者將視角落在了行為的表達(dá)或?qū)嵤┬问缴?，從中選擇了「書寫」這一動(dòng)作作為意象，同時(shí)在構(gòu)建場(chǎng)景時(shí)，打破人和物的比例關(guān)系并夸張?zhí)幚?，形成一種趣味性的觀感，進(jìn)一步觸發(fā)用戶的共情。

△ 「評(píng)論」的意象表達(dá)

其他場(chǎng)景示例：

△ 其他場(chǎng)景示例

驗(yàn)證實(shí)施及結(jié)果

定性類驗(yàn)證方法相對(duì)于埋點(diǎn)數(shù)據(jù)這類定量方法附帶的優(yōu)勢(shì)是可在設(shè)計(jì)過程中幫助改進(jìn)設(shè)計(jì)，因此，整個(gè)過程中我們根據(jù)測(cè)試結(jié)果和測(cè)試過程中遇到的問題迭代著設(shè)計(jì)方案以及測(cè)試流程本身。

第一輪測(cè)試中，被試被觸發(fā)的情感感知與我們的目標(biāo)方向相反，且還發(fā)現(xiàn)了超出我們預(yù)期的視覺可用性問題；文案方面，多組條目用戶無法感知（本身為中性對(duì)象除外）。

△  第一輪測(cè)試輪廓圖

具體分析如下：

△ 第一輪測(cè)試結(jié)果分析

經(jīng)過對(duì)這些結(jié)果和反饋的分析后，我們著手調(diào)整視覺表現(xiàn)：進(jìn)一步地分解插畫中視覺表達(dá)構(gòu)成的元素，并探究不同的處理手段與受眾感受間的關(guān)系，以此摸索達(dá)成目標(biāo)風(fēng)格的設(shè)計(jì)策略。并在此基礎(chǔ)上，調(diào)整對(duì)應(yīng)的形容詞詞對(duì)，使其更的表達(dá)對(duì)應(yīng)的情感感受。

△ 迭代前后方案對(duì)比

其后，我們選擇了幾個(gè)具有代表性的場(chǎng)景進(jìn)行了應(yīng)用便進(jìn)行了第二輪測(cè)試，在得到了命中預(yù)期范圍的測(cè)試結(jié)果后，再對(duì)其他頁(yè)面進(jìn)行了統(tǒng)一調(diào)整。

△ 第二輪測(cè)試輪廓圖

在所有方案產(chǎn)出后，針對(duì)整體視覺和文案風(fēng)格進(jìn)行了第三輪測(cè)試，最終的結(jié)果基本都達(dá)到了預(yù)期，測(cè)試到此結(jié)束。

△  第三輪測(cè)試輪廓圖

遺留問題及后續(xù)關(guān)注

1. 明確「品牌精髓」的定義及應(yīng)用

在撰寫此文的過程中，伴隨著對(duì)品牌精髓產(chǎn)生了更深的理解，筆者對(duì)于描述性修飾語(yǔ)及情感性修飾語(yǔ)的定義及提煉方式產(chǎn)生了疑問——如「專業(yè)」一詞作為描述性修飾語(yǔ)是否會(huì)顯得寬泛？且由于品牌精髓作為后續(xù)加工過程的源頭，決定了整個(gè)加工過程的順利和準(zhǔn)確，因此，對(duì)其的準(zhǔn)確理解和應(yīng)用顯得尤為重要。

2. 進(jìn)一步探索情感轉(zhuǎn)換及其應(yīng)用

在有形產(chǎn)品設(shè)計(jì)領(lǐng)域，早在上世紀(jì)八十年代初便開始關(guān)注人的感性需求及意象與產(chǎn)品設(shè)計(jì)的形態(tài)要素間的關(guān)系，并形成了體系化的理論——感性工學(xué)，并從日本汽車行業(yè)的應(yīng)用滲透到了日本各個(gè)產(chǎn)品設(shè)計(jì)領(lǐng)域，進(jìn)而逐漸傳播到西方國(guó)家及中國(guó)等國(guó)家。但在「用戶體驗(yàn)設(shè)計(jì)」行業(yè)，尚停留在對(duì)「情感化設(shè)計(jì)」一詞朗朗上口卻又渾然無知的階段。

而目前業(yè)界所「熟知」的 Donad. A. Norman 教授提出的三層次理論——亦是情感化設(shè)計(jì)領(lǐng)域除感性工學(xué)理論外另一個(gè)被公認(rèn)的理論體系，更接近于一種世界觀，解決「是什么」的問題，而非方法論；解決「怎么辦」的問題。這和 Jesse Jame Garrett 提出的「用戶體驗(yàn)要素」在軟件產(chǎn)品設(shè)計(jì)領(lǐng)域知識(shí)框架中的定位類似，因此，在實(shí)際應(yīng)用于交互設(shè)計(jì)與界面設(shè)計(jì)時(shí)還需彌補(bǔ)中間的斷層。

借此次空狀態(tài)改版，筆者在品牌輸出的過程中摸索著情緒感受與設(shè)計(jì)風(fēng)格的映射關(guān)系，形成了初步的構(gòu)建思路，且在關(guān)于感性工程的相關(guān)文獻(xiàn)中得到了印證，但在風(fēng)格應(yīng)用層面，此次只是初作嘗試，尚存在很大優(yōu)化空間。未來，將以此為基礎(chǔ)針對(duì)界面進(jìn)行嘗試，并在情感轉(zhuǎn)換層面進(jìn)行更深入的挖掘與探索。

3. 嘗試建立視覺情感語(yǔ)義詞庫(kù)

在設(shè)計(jì)量表的過程中，筆者明顯感受到為測(cè)量對(duì)象設(shè)定形容詞詞對(duì)的困難——準(zhǔn)確把握測(cè)量對(duì)象與對(duì)應(yīng)形象間的聯(lián)想關(guān)系，甚至在實(shí)際測(cè)試過程中基于用戶的測(cè)試結(jié)果和反饋，筆者持續(xù)迭代著問卷?xiàng)l目及對(duì)應(yīng)形容詞詞對(duì)的選用。

而以筆者目前對(duì)語(yǔ)義差別量表的理解和應(yīng)用，其作為「測(cè)量某一客體對(duì)受眾的意義」的工具，對(duì)于視覺風(fēng)格的構(gòu)建將會(huì)是重要的設(shè)計(jì)驗(yàn)證手段。

基于此，有必要尋求并建立一套視覺情感語(yǔ)義詞庫(kù)，以保證量表設(shè)計(jì)的有效性。

4. 確認(rèn)情感測(cè)試中建立基準(zhǔn)線的必要性

在測(cè)試過程中，筆者明顯覺察到不同被試對(duì)相同概念顯著的理解差異，大致分為如下兩種情形：

• 認(rèn)識(shí)不一樣：如某被試對(duì)于文案是否有趣的判斷標(biāo)準(zhǔn)為是否直白。
• 錨定偏差：如某被試認(rèn)為文案就應(yīng)該是比較俏皮、小清新的，當(dāng)他看到的方案沒達(dá)到其預(yù)期時(shí)，便會(huì)認(rèn)為其是沉悶的——實(shí)際上是中性的。

這直接影響到數(shù)據(jù)收集的準(zhǔn)確性。

筆者當(dāng)下的反應(yīng)是應(yīng)當(dāng)對(duì)被試先建立基準(zhǔn)線，從而能夠?qū)?shù)據(jù)進(jìn)行加權(quán)處理，但鑒于需要針對(duì)問卷?xiàng)l目設(shè)計(jì)對(duì)應(yīng)的問題及素材，筆者選擇了更敏捷的做法——把通過訪談所認(rèn)定的存在明顯偏差的結(jié)果作為異常值剔除出最后的統(tǒng)計(jì)。

因此，如后期將語(yǔ)義差別量表列入針對(duì)視覺風(fēng)格構(gòu)建的標(biāo)準(zhǔn)驗(yàn)證方法之中，為保證數(shù)據(jù)的準(zhǔn)確性，有必要對(duì)是否加設(shè)「建立被試對(duì)相關(guān)概念理解及程度的基準(zhǔn)線」這一環(huán)節(jié)進(jìn)行研究和確認(rèn)。

本文以項(xiàng)目為描述對(duì)象，因此，并未冗述所涉及到方法的更多細(xì)節(jié)（諸如其概念、優(yōu)劣、使用原則、注意事項(xiàng)等），待時(shí)機(jī)成熟時(shí)我們會(huì)陸續(xù)輸出相關(guān)方法及工具（如定性研究中樣本量的設(shè)定、量表中量尺的設(shè)計(jì)、訪談中的注意事項(xiàng)、語(yǔ)義差別量表的設(shè)計(jì)和使用等）的使用指南，包括封裝好的文檔工具，望能拋磚引玉。

藍(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ù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

當(dāng)你的產(chǎn)品短時(shí)間內(nèi)無法使用時(shí)，如斷網(wǎng)、跨平臺(tái)無法分享等等。用戶可能會(huì)因而產(chǎn)生挫敗感，產(chǎn)生焦慮不爽的負(fù)面情緒。如何安撫用戶情緒？如何拉近用戶和平臺(tái)的距離？如何改善或提高用戶體驗(yàn)?zāi)兀勘酒诎咐?，就分享一些有趣的小彩蛋、微交互，讓你靈感爆棚！

藍(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ù)。