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

文章目錄

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

水晶宮與拉斯金

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

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

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

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

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

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

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

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

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

他們一共生育了九個孩子，因為近親結(jié)婚的緣故，四個王子中的三個都是血友病患者，所幸的是五位公主個個健康美麗，但也是血友病基因攜帶者，關(guān)于他們更多的故事請自行搜集，因為咱們今天是來聊倫敦世界博覽會的。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

莫里斯跟簡伯頓的婚姻對整個世界的設(shè)計發(fā)展來說都是一件大事，因為他們的婚姻促使了莫里斯開始從繪畫轉(zhuǎn)向設(shè)計方向，同時被視為現(xiàn)代設(shè)計開端的代表性建筑「紅屋」也誕生，事情的經(jīng)過是這樣的：

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

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

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

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

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

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

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

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

工藝美術(shù)運動中的平面設(shè)計

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

他們的設(shè)計直接影響了下一代的平面設(shè)計師及插畫家，比方我們在包豪斯那期分享里聊到的比利時設(shè)計師亨利·凡德·威爾德。

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

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

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

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

總結(jié)

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

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

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

工藝美術(shù)運動在平面設(shè)計上，特別是在書籍上具體體現(xiàn)，莫里斯同樣擔(dān)當(dāng)領(lǐng)軍人物，并由此對歐洲各國的平面設(shè)計產(chǎn)生深刻影響。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

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

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

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

模型一：SWOT 模型

1. 概念介紹

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

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

2. 使用場景

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

3. 計價值

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

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

4. 具體實踐案例說明

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

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

模型二：Google Design Sprint

1. 概念介紹

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

2. 使用場景

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

3. 設(shè)計價值

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

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

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

4.  具體實踐案例說明

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

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

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

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

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

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

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

模型三：GUCDR 模型

1.概念介紹

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

G：Goal

U：User

C：Condition

D：Design

R：Realize

2. 使用場景

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

3. 設(shè)計價值

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

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

4.  具體實踐案例說明

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

模型四：雙鉆模型

1. 概念介紹

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

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

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

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

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

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

2. 使用場景

一般應(yīng)用在產(chǎn)品開發(fā)過程中的需求定義和交互設(shè)計階段；教我們?nèi)绾螌ξ粗目赡艿氖挛镞M(jìn)行探索；一步步到達(dá)已知的理應(yīng)的層面。

3. 操作使用說明

雙鉆模型的四個階段也許很精簡并且合并到兩個主要的階段。

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

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

4.  具體實踐案例說明

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

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

模型五：卡諾模型

1.概念介紹

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

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

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

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

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

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

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

2. 使用場景

卡諾模型的主要使用場景是對用戶需求分類；

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

3. 具體使用操作

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

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

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

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

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

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

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

步驟二：問卷結(jié)果整理，進(jìn)行數(shù)據(jù)分析

根據(jù)問卷結(jié)果進(jìn)行 KANO 模型二維屬性歸屬分析，可得出魅力屬性、期望屬性、必備屬性、無差異屬性、反向?qū)傩耘c可疑結(jié)果的功能屬性歸類百分比。除了對屬性的歸屬探討外，并通過百分比計算出 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ù)值，將散點圖劃分為四個象限。

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

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

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

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

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

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

4. 具體案例實踐說明

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

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

步驟二：問卷統(tǒng)計，進(jìn)行 KANO 模型二維屬性歸屬分析

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

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

具體百分比得出后，將下表中標(biāo) A、O、M、I、R、Q 的格子中百分比相加，即可得到五種屬性對應(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 計算公式，得出 Better-Worse 系數(shù)，明確功能落點象限。

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

模型六：METUX 幸福模型

1. 概念介紹

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

2. 使用場景

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

3. 主要使用操作

在考慮用戶體驗時，從4個層次進(jìn)行考慮：

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

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

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

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

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

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

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

核心流程

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

首頁

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

列表頁

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

詳情頁

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

結(jié)語

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

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

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

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

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

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

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

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

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

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

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

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

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

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

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

按照佛法來講，這個是人類身根下劣啦。說實話，比起毛澤東時代，這代人臉上的紅潤少了，力氣也少了，精神也不比他們。倒是疾病增多了，而且對環(huán)境越來越挑剔了。動不動就要殺菌消毒，醫(yī)院總是人滿為患。為什么？

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

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

這一塊，佛教一定要宣傳起來。我發(fā)現(xiàn)香客對住宿的地方，越來越挑剔，要求越來越高。要有獨立衛(wèi)生間，床鋪要很干凈，被子要經(jīng)常換。很奇怪，我們很害怕被傳染。為什么你那么容易被傳染？因為身根下劣了。

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

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

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

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

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

古人講，安貧樂道。其實是很高的境界。一個人耐得住清貧，因為他心中有道。永嘉證道歌說的，窮釋子，口稱貧，實則身貧道不貧。身上穿的百衲衣，心里卻懷無價珍。我們一直奔波在外頭，因為沒有道，所以才會追求外在的物質(zhì)。 

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

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

---

結(jié)論

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

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

這里是：

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

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

祝你有美好的一天！

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

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

文章目錄

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

基礎(chǔ)概念

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

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

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

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

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

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

國家之間相互連通的旅游路線，顏色越相近的國家，表明兩個國家的人們互動越頻繁。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 聯(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ù)幾個圖表里篩選出最能體現(xiàn)我們設(shè)計意圖的那個就好了。

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

易理解

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

可實現(xiàn)

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

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

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

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

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

5. 頁面布局、劃分

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

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

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

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

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

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

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

7. 可視化設(shè)計

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

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

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

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

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

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

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

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

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

切圖與標(biāo)注

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

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

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

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

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

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

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

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

大屏設(shè)計的注意事項

1. 字體使用

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

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

2. 顏色搭配

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

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

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

3. 頁面布局

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

Q&A

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

工具類的需要有一定的代碼基礎(chǔ)，里面同樣有豐富的圖表，所以跟開發(fā)的溝通也很重要，因為他們可能會了解多一些更新的前沿的圖表形式，是我們設(shè)計師不知道的，所以彼此多溝通交流實在太重要了。

總結(jié)

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

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

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

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

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

 

文章目錄

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

品牌定義

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

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

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

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

△ 用戶評價詞云圖

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

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

△ 品牌心智地圖

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

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

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

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

△ 品牌精髓

小結(jié)

通過以上步驟，基本能夠逐漸抽象出所要表達(dá)之物?？珊唵螌⑸鲜鲞^程的目的理解為定義視覺風(fēng)格的方向。

△ 品牌概念抽象過程

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

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

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

首先，嘗試將品牌概念人格化，以作為后續(xù)推導(dǎo)過程中的燈塔，避免偏離航向。基于所提煉出的品牌精髓，演繹出以下設(shè)定：

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

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

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

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

設(shè)計策略

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

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

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

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

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

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

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

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

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

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

△ 色的定義

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

△ 形的定義

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

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

• 人
• 物
• 光影
• 背景

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

△ 品牌色的處理

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

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

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

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

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

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

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

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

光影

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

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

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

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

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

△ 元素形狀定義

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

△ 元素方向定義

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

△ 主體占比定義

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

△ 主體位置定義

驗證方案設(shè)計

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

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

那如何測量人的情感呢？

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

最終，可得到如下驗證思路：

△ 驗證思路

2. 樣本量設(shè)定

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

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

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

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

△ 樣本量設(shè)定

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

3. 量表設(shè)計

量尺設(shè)計

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

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

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

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

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

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

△ 量尺修飾詞

測量對象的語義轉(zhuǎn)化

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

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

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

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

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

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

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

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

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

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ù)實際情境提供的操作，如無可支持的功能，可以文案形式進(jìn)行表達(dá)。

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

針對安居客產(chǎn)品中的場景，除了完整的空狀態(tài)結(jié)構(gòu)，對于模塊化的頁面，由于模塊本身的高度有限，在數(shù)據(jù)為空時，只取描述文案作為反饋，并在樣式上弱化按鈕使其在當(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)一致，但對于平臺型產(chǎn)品，伴隨著業(yè)務(wù)復(fù)雜性的是頁面結(jié)構(gòu)的多樣性，這使得空狀態(tài)呈現(xiàn)于不同容器中，為達(dá)到一致的視覺效果在視覺輸出環(huán)節(jié)就需要針對性地定義布局邏輯。

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

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

△ 完整視圖的布局邏輯

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

△ 模塊布的局邏輯

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

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

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

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

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

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

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

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

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

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

其他場景示例：

△ 其他場景示例

驗證實施及結(jié)果

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

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

△  第一輪測試輪廓圖

具體分析如下：

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

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

△ 迭代前后方案對比

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

△ 第二輪測試輪廓圖

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

△  第三輪測試輪廓圖

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

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

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

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

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

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

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

3. 嘗試建立視覺情感語義詞庫

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

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

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

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

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

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

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

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

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

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

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

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

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

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。