首頁

用一篇超全面的好文,帶你了解英國設計史的前世今生

資深UI設計者

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

文章目錄

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

水晶宮與拉斯金

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

這群反對者當中有一位后來非常著名的人,最后成為「工藝美術運動」的理論指導者,他就是約翰·拉斯金。

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

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

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

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

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

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

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

生平不識莫里斯,設計十年也枉然。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

莫里斯的設計風格有別于當時的維多利亞風格,獨樹一幟,后來史稱「工藝美術」運動風格,特征包含了以下幾點:

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

工藝美術運動中的平面設計

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

總結

整個分享我們大致談了三部分內容。

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

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

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


藍藍設計www.sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計  ipad界面設計 、 包裝設計  圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


交互設計-設計模型

用心設計

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

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

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

模型一:SWOT 模型

1. 概念介紹

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

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

2. 使用場景

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

3. 計價值

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

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

4. 具體實踐案例說明

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

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

模型二:Google Design Sprint

1. 概念介紹

Design Sprint, 設計沖刺,顧名思義就是要在短時間內做出好設計;是由 Google 提出的設計方法。

2. 使用場景

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

3. 設計價值

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

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

作為一種理想的設計教育工具,讓非科班的設計人員完整又快速了解產品&設計。

4.  具體實踐案例說明

設計沖刺的主要內容包括 6 個階段:

理解(Understand):理解要為用戶解決的問題

定義(Define):明確產品策略(數(shù)據(jù)分析,用戶調研,設計原則制定等)

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

決定(Decide):確定設計方案

原型(Prototype):構建產品原型

驗證(Validate):驗證產品原型

模型三:GUCDR 模型

1.概念介紹

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

G:Goal

U:User

C:Condition

D:Design

R:Realize

2. 使用場景

GUCDR 模型很適合用于前期需求調研和整理階段;特別是在自己不是很熟悉的領域中,把信息按照模型和畫布中的點進行歸類匯總;最大限度的讓自己的設計思維和信息邏輯得到詮釋。

3. 設計價值

3.1  對設計的需求來源及設計目標的聚焦定位,非常有價值,能快入深入了解業(yè)務背景;

3.2  對設計階段的目標拆解,從設計目標 > 設計策略 > 設計方案,層層遞進,設計方案輸出的邏輯性和針對性很強。

4.  具體實踐案例說明

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

模型四:雙鉆模型

1. 概念介紹

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

雙鉆模型是一個結構化的設計方法,被很多設計師喜愛和使用。

探索/調研——透析問題(發(fā)散)

定義/合成——聚焦領域(集中)

發(fā)展/構思——潛在問題(發(fā)散)

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

2. 使用場景

一般應用在產品開發(fā)過程中的需求定義和交互設計階段;教我們如何對未知的可能的事物進行探索;一步步到達已知的理應的層面。

3. 操作使用說明

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

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

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

4.  具體實踐案例說明

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

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

模型五:卡諾模型

1.概念介紹

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

在卡諾模型中,將產品和服務的質量特性分為五種類型:

1> 魅力屬性:用戶意想不到的,如果不提供此需求,用戶滿意度不會降低,但當提供此需求,用戶滿意度會有很大提升;

2> 期望屬性:當提供此需求,用戶滿意度會提升,當不提供此需求,用戶滿意度會降低;

3> 必備屬性:當優(yōu)化此需求,用戶滿意度不會提升,當不提供此需求,用戶滿意度會大幅降低;

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

5> 反向屬性:用戶根本都沒有此需求,提供后用戶滿意度反而會下降。

2. 使用場景

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

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

3. 具體使用操作

步驟一:設計問卷調查表,實施有效的問卷調查

KANO 模型的問卷問法,是對每個質量特性都由正向和負向兩個問題構成,分別測量用戶在面對存在或不存在某項質量特性時的反應。問卷中的問題答案采用五級選項分別是:

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

理應如此:你覺得是應該且必備的功能。

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

勉強接受:你不喜歡,但可以接受。

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

步驟二:問卷結果整理,進行數(shù)據(jù)分析

根據(jù)問卷結果進行 KANO 模型二維屬性歸屬分析,可得出魅力屬性、期望屬性、必備屬性、無差異屬性、反向屬性與可疑結果的功能屬性歸類百分比。除了對屬性的歸屬探討外,并通過百分比計算出 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ù)成正比;表示產品提供此功能,用戶滿意度會提升,不提供此功能,用戶滿意度會降低,這是質量的競爭性屬性,應盡力去滿足用戶的期望型需求。

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

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

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

步驟三:數(shù)據(jù)解讀,將結果落地實施

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

4. 具體案例實踐說明

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

步驟一:設計問卷問題,發(fā)放問卷

步驟二:問卷統(tǒng)計,進行 KANO 模型二維屬性歸屬分析

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

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

具體百分比得出后,將下表中標 A、O、M、I、R、Q 的格子中百分比相加,即可得到五種屬性對應的百分比。本調查結果可以得到A魅力屬性占比為42.1%,O期望屬性占比9%,M必備屬性占比1.2%,I無差異屬性占比38.9%,R反向屬性占比1.8%,Q可疑結果占比7%。

步驟四:根據(jù) Better-Worse 計算公式,得出 Better-Worse 系數(shù),明確功能落點象限。

步驟五:多個功能需求結果對比進行優(yōu)先級排序。

模型六:METUX 幸福模型

1. 概念介紹

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

2. 使用場景

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

3. 主要使用操作

在考慮用戶體驗時,從4個層次進行考慮:

??  第一層是“界面”體驗:用戶與產品交互時的體驗如何。

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

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

??  第四層是“生活”體驗:行為會對生活產生影響。如運動過量可能導致身體受損。

在設計過程中,應該關注“勝任力”、“自主性”和“關系”三個關鍵因素,這些基本心理訴求是動機、投入感和幸福感的根本。

途家APP V7.0改版——交互設計總結

資深UI設計者


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



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




核心流程


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




 

首頁


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




列表頁


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


詳情頁


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


結語


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


藍藍設計www.sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計  ipad界面設計 、 包裝設計  圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

 

大型醫(yī)療管理系統(tǒng)設計:eCare EHR Platform

用心設計

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

 

藍藍設計

這是一個關于大型醫(yī)療管理系統(tǒng)的設計案例,對于這類平臺案例的分享我們非常少見,要么沒多少設計師能接觸得到,要么是禁止分享,所以建議大家有空就看一下,同時感謝設計師 Tusacha 分享管理平臺的設計經驗,下面大家一看看 eCare EHR Platform 的醫(yī)療系統(tǒng)設計。

PS:由于醫(yī)療平臺針對的用戶一半是外國用戶,因此用英文版來做頁面展示,用中英文做講解。

醫(yī)療管理系統(tǒng)設計

設計師:Tusacha
個人主頁:http://i.ui.cn/ucenter/285814.html

產品概述

“全科”

整合看病,防病、病后康復、人文關懷于一體的學科,涵蓋了各個器官系統(tǒng)以及各類疾病,解決80%的疾病。

eCare全科診所管理平臺

基于多角色可配置的權限管理平臺,融合各科室業(yè)務流程醫(yī)療形成統(tǒng)一的全科診所管理系統(tǒng)。以診療規(guī)范化,管理標準化、決策數(shù)據(jù)化、營銷社交化及辦公移動化為產品的運用核心模式。

挑戰(zhàn)與機遇,改版大思考

很多初期項目在快速選代開發(fā)過程中,大量以功能疊加、業(yè)務調整為主,交互及視覺缺乏統(tǒng)一性,整體缺乏美感,對用戶使用場景及體驗考慮欠佳。因此eCare全科診所管理平臺是站在用戶使用場景及體驗的角度來做的全新改版(主要是結構層,框架層及表現(xiàn)層),整體設計過程中,要考慮國內外用戶的操作習慣,并取之平衡點。這對從未接觸過PC端大型平臺設計的我來說,就是巨大的挑戰(zhàn)與機遇。

結構層與框架層

了解產品:調整信息架構,減化信息層級,簡少操作流程,以角色來配置功能界面(分清主次) ,整體布局考慮用戶操作習慣及心理感受。

用戶操作習慣

關注用戶:在設計細節(jié)當中考慮用戶操作習慣,使用場景(醫(yī)院/衛(wèi)生院/其它醫(yī)療中心)及心理感受,信息用詞統(tǒng)一(減少誤解),人性化引導(避免不必要的錯誤操作) .

表現(xiàn)層

做好設計:規(guī)范視覺與交互方式,提高前端與開發(fā)效率,突出產品整體特性。

PS: 以下內容由與版式問題,小編無法文字排版,請直接點擊圖片查看大圖,以便更好理解。

請點擊圖片查看大圖:


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

福報從身體上看出來

藍藍設計的小編

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


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


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


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


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

 

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


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


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


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

 

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


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


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

 


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


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


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


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


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


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


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

 

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


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


藍藍設計www.sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

 


設計思維中的十大黃金法則——良好原則在為功能設計系??統(tǒng)奠定堅實基礎的過程中的重要性

資深UI設計者

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

首先,在這10條原則之上,我只想說對我來說最有幫助的習慣是不斷嘗試將簡單性放在我的選擇中,并且永遠不要停止學習并發(fā)現(xiàn)最適合我的新想法。

但是現(xiàn)在這里是我設計思維中的十條黃金法則:

1)要謙虛

不要認為自己是個天才。這是第一個要避免的大錯誤。把你的自我放在一邊,讓你身邊的每個人都參與其中。聆聽其他人的意見,與您的意見進行比較,并獲得新的和不同的解決方案。

2)相互信任和尊重

花點時間了解您正在與之合作的團隊及其行為。請注意,整個團隊為表格帶來了獨特的技能。這是建立良好工作關系并建立信任和尊重的堅實基礎的良好開端。這是推動團隊取得令人敬畏成果的最重要規(guī)則之一。

3)用戶先到先得

用同理心思考它是非常重要的。設計過程中的良好用戶體驗使用戶能夠充分利用產品,提高客戶滿意度。重要的是要理解并牢記UX設計始終關注客戶的情緒以及如何吸引他們的注意力。因此,抓住執(zhí)行積極和令人印象深刻的UX設計體驗的基本方面是至關重要的。此外,在開始使用UI之前,構建一個包含許多正確策略(如研究,信息架構,分析數(shù)據(jù)和可視化設計)的良好UX基礎架構總是更好。最終目標應始終是幫助人們享受愉快的用戶體驗。

4)打破挑戰(zhàn)

通過許多小任務,可以輕松分析和定義每個問題的關鍵設計元素。這將有助于提出一種最有效且最可靠的設計解決方案。在您確切知道設計的外觀之前,切勿開始設計。考慮到這一過程,最終設計始終非常接近原始想法。

5)心理清晰度和焦點。你知道你要去哪里嗎?

有時候喝一杯咖啡然后出去散散步是非常好的。在辦公桌后面停留太多并不總是很有效率。將注意力從復雜的環(huán)境中轉移到其他事物上是一種很好的做法,并試圖消除思路中的混亂。這是一個很好的練習時間,以獲得一些新鮮空氣,讓你的頭腦清醒。一個混亂的頭腦會對你的選擇產生負面影響,并會帶來糟糕的結果。

6)不斷重新考慮設計

重新考慮產品,功能和整個架構,這是產品設計中另一個重要的規(guī)則,以便創(chuàng)建一個表演產品。刪除已經變得不必要的東西而不是總是添加到它(功能隨著時間的推移將創(chuàng)建更糟糕的用戶體驗)。在不斷重新評估的整個過程中,將更容易找出哪些領域需要更多的工作和什么不需要。

7)永遠不要害怕丟棄設計思路和重構新的解決方案

靈活的思維將有助于實現(xiàn)重構和重新設計過程。在創(chuàng)建新產品的整個過程中,很容易遇到以前不存在的任務。通過牢記整體功能,重新考慮和重構整個結構(或其中很大一部分)是非常重要的。例如,每次向項目添加新任務時都應該這樣做。通過這樣做,可以更容易地用一個更好的解決方案一次解決新舊問題。因此,更改可以將想法轉化為可以創(chuàng)建更好,更簡單的用戶體驗的解決方案。

8)好的設計是自我解釋的

每個設計師都應該記住,不需要解釋好的設計。有時,最佳和更直觀的用戶體驗具有簡單的設計解決方案。用戶應該本能地知道如何與產品進行交互。因此,在推動像素之前,必須牢記這一概念。如果一個設計,即使是美麗的不是自我解釋,需要重構,考慮重新開始一切。

9)要有創(chuàng)新精神

通常,第一種解決方案并不總是最好的解決方案。允許工作流中的空間發(fā)現(xiàn)并迭代您的設計。開箱即用,讓自己遠離舒適區(qū)。即使在第一眼看到它們也無法發(fā)展,創(chuàng)造顛覆性的體驗。多個設計草圖可以相互迭代或合并,以創(chuàng)建最終解決方案,更好地實現(xiàn)項目的最終目標。

10)少即是多

保持盡可能簡單是最難應用的行為模式,但一旦它被釘住,將更容易回頭沒有任何遺憾。聽起來很簡單,主要是與你自己的一致性和耐心。


結論

每個設計師都應該擁有自己的一套黃金法則,以形成良好的產品設計基礎。這肯定有助于更好地處理決策并找到正確的總體方向。

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

這里是:

https://principles.design

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

祝你有美好的一天!


藍藍設計www.sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制  用戶體驗 、交互設計、 網站建設 平面設計服務。

 

可能是最詳細的大屏數(shù)據(jù)可視化設計指南!

資深UI設計者

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


文章目錄

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

基礎概念

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

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

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

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

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

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

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

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

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

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

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

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

△ 圖片來源:必應,圖片作者:帆軟軟件有限公司

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

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

1. 設計服務需求

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

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

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

大屏可視化設計流程

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

1. 根據(jù)業(yè)務場景抽取關鍵指標

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

確定關鍵指標后,根據(jù)業(yè)務需求擬定各個指標展示的優(yōu)先級(主、次、輔)。

2. 確立指標分析維度

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

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

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

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

3. 選定可視化圖表類型

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

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

易理解

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

可實現(xiàn)

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

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

4. 了解物理大屏,確定設計稿尺寸

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

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

5. 頁面布局、劃分

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

6. 定義設計風格

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

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

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

編者按:一篇好文幫你掃盲,運用情緒板搞定設計→《該怎么運用情緒板,才能讓設計作品更有說服力?》

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

7. 可視化設計

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

8. 樣圖溝通確認

這里的溝通分三個層面:設計師對內溝通、設計師對外溝通、設計師與大屏的「溝通」。

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

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

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

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

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

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

切圖與標注

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

切圖:哪些元素需要切圖,怎么切?

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

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

10. 整體細節(jié)調優(yōu)與測試

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

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

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

大屏設計的注意事項

1. 字體使用

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

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

2. 顏色搭配

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

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

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

3. 頁面布局

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

Q&A

1. 設計稿投到大屏上顯示效果不佳怎么辦?

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

2. 大屏設計定稿后,切圖切幾倍圖?

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

3. 1920*1080的設計稿,投到9000*4320的屏幕上,文字圖片會虛么?

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

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

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

離大屏的距離也影響觀感,一般離得近,顆粒感明顯,距離稍遠,會顯的較為清晰。

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

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

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

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

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

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

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

總結

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

藍藍設計www.sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

 

設計太小氣?試試從這五方面入手

用心設計

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

 

改稿絕對算得上是設計師的一項日常操作,這一點我們都深有體會,至于改稿的原因則五花八門,不是客戶嫌棄太小氣、沒創(chuàng)意,就是上級嫌棄太土、太單薄等等。

如何解決設計太小氣這個問題,主要是從以下五個方面入手:

  1. 構圖要飽滿有張力;
  2. 主題要大、要用大場景的圖片;
  3. 使用強烈的大小對比和空間對比;
  4. 用仰視的角度;
  5. 采用逆光拍攝效果。

一、構圖要飽滿有張力

導致設計看起來小氣的首要原因就是構圖不飽滿,也就是我們通常所說的沒有張力,那么什么樣的構圖才是飽滿有張力的呢?

1.要充分利用好版面的空間

下圖是一則背景板海報設計,我們可以看到所有視覺元素都集中在版面的正中心,左右兩邊的空間完全沒有被利用起來,所以看上去會比較小氣。

對于這種情況,我們應該適當把圖片元素往兩邊擴張,把版面的空間充分利用起來,使得圖形部分的輪廓盡量與版面輪廓貼近。

調整后的構圖變得更飽滿、更大氣了。

2.視覺主體至少占據(jù)版心的兩個角

以常見的矩形版面為例,它的版心是一個四邊形,有四個角,我們可以把這四個角理解成四個點,而版心就是通過這四個點的連線建立起來的,改變任何一個點的位置,版心的輪廓都會發(fā)生變化。

所以這四個點(角)也直接影響了版面的張力,元素覆蓋的角越多張力就越大,元素覆蓋低于版心兩個角時會顯得張力不足,因而難以大氣起來。例如在下圖的海報中,圖片部分只覆蓋到了左下角一個點,所以版面的張力不足。

為了加強版面的張力,我把圖片的火焰部分進行了延伸,并同時覆蓋了版心的三個角,所以調整后的效果比調整之前要大氣很多。

二、大

既然要做大氣的設計,那自然離不開“大”字,怎么個大法呢?一是主體元素要大,二是要用大的場景:

1.主體要大

如果覺得你做的設計太小氣,很簡單,直接把主體拉大,占據(jù)盡量多的版面空間,這是一種很粗暴但是很有效的方式,不過我們在拉大視覺元素的時候要注意,要保證元素本身的識別性和清晰度。

上圖的主體比較小,所以顯得比較小氣。

把主體拉大后,該設計就變得大氣了很多。

2.背景要用大景

你應該也發(fā)現(xiàn)了,凡是電影大片里肯定都會有很多大場景的鏡頭,比如城市、山川、大海、宇宙等等,這種鏡頭就很大氣,因為它呈現(xiàn)的是一個非常大的空間。而如果特寫一座房子、一張桌子、一朵花之類的小場景,則不會有這種感覺。

所以,如果使用大場景的圖片來做設計,會比較容易做出氣勢。

三、制造強烈的對比

制造強烈的對比也是使設計更大氣的有效方法,當然,也不是所有對比都行,效果比較顯著的主要是大小對比和空間對比。

1.大小對比

當在版面中同時呈現(xiàn)一大一小兩個對比很懸殊的元素,且這兩個元素之間有緊密的聯(lián)系或互動時,就會有很大氣的感覺,很多科幻電影的海報設計就喜歡運用這種對比手法,比如《黑豹》和《大圣歸來》的海報。

▲黑豹與踩在其腳下的豹頭雕塑形成強烈的大小對比,而且二者都是豹,在視覺上有很強的關聯(lián)。

▲猴子與其面前的巨龍形成非常強烈的大小對比,他們的關聯(lián)在于二者正處于對峙的狀態(tài),霸氣背漏有沒有?

2.空間對比

如果畫面中有強烈的空間對比也會顯得很大氣,比如說畫面中的元素形成非常強的透視關系時,整個版面就會有一種縱深感,仿佛畫面中的元素從視線的遠端奔向我們的眼睛,這也是為什么發(fā)散式的構圖會顯得比較大氣的原因。

四、用仰視的角度

從攝影作品中我們可以發(fā)現(xiàn),采用平拍或者俯拍的角度拍出來的照片很難大氣起來,而如果采用仰拍的角度,拍出來的照片則會大氣很多,這是因為仰拍會把照片中的主體顯得很高大,而我們自己很渺小。例如以下兩張攝影作品,同是以埃菲爾鐵塔為拍攝對象,但右圖比左圖要大氣很多。

在設計中也是同樣的道理,比如廣告設計中常常用到立體字,仰視的效果會比俯視的效果更有氣勢。

▲俯視

▲仰視

五、采用逆光效果

這也是從攝影中發(fā)現(xiàn)的一個技巧,在同等條件下,逆光拍攝的效果要比順光和側光拍攝的效果更大氣,原因是因為逆光拍攝有強烈的明暗對比,而且更能襯托出光的效果。

汽車廣告就非常喜歡用逆光的效果,再加上仰視的拍攝角度,看起來會非常大氣。不過為了使主角更清晰,我們通常需要給它的逆光面進行補光。

結語

最后總結一下,想做大氣的設計,我們可以從以下五個方面入手:1.構圖要飽滿有張力;2.主題要大、要用大場景的圖片;3.使用強烈的大小對比和空間對比;4.用仰視的角度;5.采用逆光拍攝效果。你都領悟了嗎?

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

如何構建和驗證設計風格?來看高手的實戰(zhàn)案例!

資深UI設計者

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

 

文章目錄

  1. 品牌定義
  2. 品牌映射(設計風格構建)
  3. 驗證方案設計
  4. 空狀態(tài)設計
  5. 驗證實施及結果
  6. 遺留問題及后續(xù)關注

品牌定義

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

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

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

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

△ 用戶評價詞云圖

2. 建立品牌心智地圖(Mental Map)

通過繪制品牌心智地圖,可將以上零散的信息分類及提煉,以此來組織并簡化我們對產品品牌認知的心智結構,最終描繪出一幅由品牌內核所延展出的圖景,其組成可以是品牌的各個方面,凝練了關于一個品牌之所以是一個品牌的構成。

△ 品牌心智地圖

3. 提煉品牌精髓(Brand Mantra)

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

品牌功能描述了產品或服務的性質,即品牌能夠向用戶提供的體驗或益處的類型;描述性修飾語將進一步分類及明確品牌所傳達出樣貌之性質;情感性修飾語則解釋了給用戶帶來的益處是什么。

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

△ 品牌精髓

小結

通過以上步驟,基本能夠逐漸抽象出所要表達之物。可簡單將上述過程的目的理解為定義視覺風格的方向。

△ 品牌概念抽象過程

品牌映射(設計風格構建)

明確所要表現(xiàn)的對象后,便可開始構建從內容到形式這一轉化過程,最終構建出契合品牌的設計風格。

1. 文案風格構建

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

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

改版前文案風格分析

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

△ 改版前文案風格

設計策略

為了貼合所設定的人格化形象,筆者制定了以下策略來調整文案寫作風格:

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

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

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

△ 句式結構構建過程

2. 視覺風格推導

風格構建

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

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

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

△ 色的定義

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

△ 形的定義

風格應用

色的應用:由空狀態(tài)設計中對所有場景的意象設定,可對場景刻畫中所需的元素進行如下分類:

  • 光影
  • 背景

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

△ 品牌色的處理

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

△ 人的顏色應用

物在場景的構筑中承擔了以下角色:

  • 與人的交互形成行為意象的傳達;
  • 作為對環(huán)境的勾勒,構成對場景的交代或環(huán)境意象的傳達。

對應到結構,分別為:

  • 作為主體的單一物件;
  • 構成近景與遠景的不同物件。

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

△ 物的顏色應用

光影

  • 背景光:在表達虛無的場景中,以線性漸變來表達此概念,此時混合應用兩個主色來呈現(xiàn)調性。
  • 光照:對于自然光的呈現(xiàn),另取暖色來表現(xiàn)光影,進一步增加質感。
  • 投影:陰影當使用中性色。

△ 光照的顏色應用

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

形的應用:元素形狀、元素方向、主體占比、主體位置。

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

△ 元素形狀定義

元素方向:以水平面或不同面構成的穩(wěn)定體系為主,避免單獨應用斜切面。

△ 元素方向定義

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

△ 主體占比定義

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

△ 主體位置定義

驗證方案設計

1. 驗證思路推導

我們的設計目標是形成契合品牌的視覺風格,若目標達成,用戶應當能被具備明確視覺風格的界面激發(fā)相應感受,從而可得到如下測試過程:安排被試瀏覽相關界面,測量其情感感受。

那如何測量人的情感呢?

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

最終,可得到如下驗證思路:

△ 驗證思路

2. 樣本量設定

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

筆者認為其建設性在于:

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

因此,筆者參照其分析進行了對樣本量的設定。先根據(jù)實際項目及團隊情況,對相關因素進行賦值:

△ 樣本量設定

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

3. 量表設計

量尺設計

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

標度數(shù):設定標度數(shù)時需平衡兩點,足夠精細,充分滿足被試表達的需求;控制數(shù)量,避免選項太過瑣碎。

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

△ 量尺標度數(shù)

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

筆者按照所用的標度數(shù),選擇了對應能產生等現(xiàn)間距的修飾詞:

△ 量尺修飾詞

測量對象的語義轉化

基于輸出的文案風格與視覺意象及其對應策略,可分別確定具體的測量對象,再以此設定能夠顯示其對立形象的形容詞:

△ 語義轉化過程

量表結構設計

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

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

△ 量表結構

空狀態(tài)設計

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

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

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

空狀態(tài)內容

空狀態(tài)由兩部分構成——反饋和引導?;诋斍扒榫车姆答伳茏層脩臬@悉所發(fā)生的事;在此基礎之上,還需提供引導以幫助用戶完成最終的任務。

反饋:反饋通常由圖像與文案組成,其風格應契合品牌調性,其內容除了基本的反饋信息外也應更多地考慮如何引導用戶。

引導:此處的引導指的就是最終根據(jù)實際情境提供的操作,如無可支持的功能,可以文案形式進行表達。

空狀態(tài)結構類型

針對安居客產品中的場景,除了完整的空狀態(tài)結構,對于模塊化的頁面,由于模塊本身的高度有限,在數(shù)據(jù)為空時,只取描述文案作為反饋,并在樣式上弱化按鈕使其在當前結構下保持原有的視覺權重,以其為另一種空狀態(tài)結構。

△ 空狀態(tài)結構

視圖結構類型

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

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

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

△ 完整視圖的布局邏輯

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

△ 模塊布的局邏輯

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

2. 圖示的設計策略

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

基于上述分析,筆者認為更合適的做法是:內容上表現(xiàn)所引導的行為(如有),形式上以場景的構筑間接表達意象。此作法更豐滿地引導了行為,表達方式上也更具感染力。

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

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

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

△ 「虛無」的意象表達

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

△ 「評論」的意象表達

其他場景示例:

△ 其他場景示例

驗證實施及結果

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

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

△  第一輪測試輪廓圖

具體分析如下:

△ 第一輪測試結果分析

經過對這些結果和反饋的分析后,我們著手調整視覺表現(xiàn):進一步地分解插畫中視覺表達構成的元素,并探究不同的處理手段與受眾感受間的關系,以此摸索達成目標風格的設計策略。并在此基礎上,調整對應的形容詞詞對,使其更的表達對應的情感感受。

△ 迭代前后方案對比

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

△ 第二輪測試輪廓圖

在所有方案產出后,針對整體視覺和文案風格進行了第三輪測試,最終的結果基本都達到了預期,測試到此結束。

△  第三輪測試輪廓圖

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

1. 明確「品牌精髓」的定義及應用

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

2. 進一步探索情感轉換及其應用

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

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

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

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

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

而以筆者目前對語義差別量表的理解和應用,其作為「測量某一客體對受眾的意義」的工具,對于視覺風格的構建將會是重要的設計驗證手段。

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

4. 確認情感測試中建立基準線的必要性

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

  • 認識不一樣:如某被試對于文案是否有趣的判斷標準為是否直白。
  • 錨定偏差:如某被試認為文案就應該是比較俏皮、小清新的,當他看到的方案沒達到其預期時,便會認為其是沉悶的——實際上是中性的。

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

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

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

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

藍藍設計www.sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務。


這些UI和UX趨勢,在2019年最值得關注

資深UI設計者

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


當你的產品短時間內無法使用時,如斷網、跨平臺無法分享等等。用戶可能會因而產生挫敗感,產生焦慮不爽的負面情緒。如何安撫用戶情緒?如何拉近用戶和平臺的距離?如何改善或提高用戶體驗呢?本期案例,就分享一些有趣的小彩蛋、微交互,讓你靈感爆棚!

往期回顧:

  1. 每月更新!10個記憶深刻的產品設計神細節(jié)!(1)》
  2. 《每月更新!10個記憶深刻的產品設計神細節(jié)!(2)》

文章目錄

  1. 我見過最贊的招聘啟事,來自程序員的別樣浪漫
  2. 斷網環(huán)境下,Google瀏覽器頁面的小恐龍可以打游戲喲
  3. 「親戚計算器」?原來小米還有這么有趣的功能設計
  4. 揉成一團的廢紙,會讓你聯(lián)想到「刪除」這個動作么?
  5. 支付寶的小無奈
  6. 優(yōu)優(yōu)教程網首頁里藏著的可愛表情,你發(fā)現(xiàn)了幾個?
  7. 2233娘真是貼心的小姐姐(*?▽?*)
  8. 讓人意想不到的團隊展示hover效果
  9. 時間走著滴答滴,iPhone的時鐘藏著自己的小秘密
  10. 有道詞典也賣萌,一句有溫度的文案會有怎樣的力量?

我見過最贊的招聘啟事,來自程序員的別樣浪漫

如果不是互聯(lián)網從業(yè)者,大概你永遠都不會發(fā)現(xiàn)百度主頁的代碼控制臺(console)里藏著那條最浪漫的招聘啟事。因為只有擁有開發(fā)網頁習慣的人,才會在瀏覽喜歡的網站時按下F12 調出網頁代碼查看。所以這條百度針對程序員的招聘被寫進網站首頁代碼的console里,可謂是絕對精準的招聘廣告投放了。

據(jù)說這個彩蛋的設計并非百度的獨創(chuàng)而是 Google 先使用過的「小心機」,可是由于無從考證,所以小編并不能確定是哪家公司有才華的程序員小哥哥想出了這個妙計(知道的大神麻煩留言告知哦)。

但不得不承認的是,很多時候我們都對程序員有太多刻板印象的誤解。那些看起來「木訥無趣」的程序員們認真起來,真的可能是最浪漫的人呢。

斷網環(huán)境下,Google瀏覽器頁面的小恐龍可以打游戲喲

Google Chrome 是一款由 Google開發(fā)的 Web瀏覽工具,大氣的界面設計、良好的使用體驗以及強大的插件擴展功能,使其受到大量用戶的喜愛。在完善產品功能的同時,Google 的設計師們也不忘花費一些「小心思」讓產品更加有趣味性:在瀏覽器出現(xiàn)錯誤或無網的情況下(想試試么?斷開Wi-Fi或者拔下網線看看),我們會看到這只可愛的像素小恐龍。

小恐龍出現(xiàn)時是靜止的,但只要你按下鍵盤的左右鍵,這只小恐龍就會跑起來,而操控上下鍵它就能躲避路上的障礙物。當出錯頁面變成可愛的小游戲,原本焦慮不爽的負面情緒好像也就沒那么嚴重了。一旦網絡恢復,瀏覽器會自動刷新到你所要瀏覽的頁面。真的是超貼心的設計了。

「親戚計算器」?原來小米還有這么有趣的功能設計

小米計算器內置「親戚計算器」的功能,各種復雜的親戚關系幫你一鍵解決。老婆弟弟的妻子應該怎樣稱呼呢?相信很多人都有過類似的對親戚關系產生疑問的困擾。

梳理親戚關系有時候真讓人頭大,小米手機就很貼心的在系統(tǒng)里自帶了「親戚計算器」。將日常的復雜關系都羅列了出來,真是符合中國特色的計算器設計呢~

揉成一團的廢紙,會讓你聯(lián)想到「刪除」這個動作么?

「作文紙條」App對于每日信息與文章的推送有著自己獨特的設計邏輯,如果推送內容用戶當天未讀,系統(tǒng)會將推送內容自動移到「廢紙簍」里。為了讓用戶在瀏覽「廢紙簍」內容時,明確感知到被刪內容與正常內容的差別,躺在「廢紙簍」里的信息視覺上模擬了揉皺紙團的形象。

如同我們在現(xiàn)實生活里,會將寫作時不滿意的內容從筆記本中撕掉,并揉成紙團丟進垃圾桶的行為一般。將用戶熟悉的真實生活里的行為狀態(tài),移植到虛擬的交互設計里,會使用戶與產品的交互過程更形象生動。

支付寶的小無奈

偶然在支付寶的芝麻信用里發(fā)現(xiàn)滿700分,就可以免押金租用一些數(shù)碼產品了。覺得很不錯想分享這個信息給朋友,就點了一下轉發(fā)微信好友,結果發(fā)現(xiàn)微信不讓分享支付寶的信息。

本來分享受限的挫敗感讓人心情很不好,但當看到支付寶很無奈的提示文案「微信又不讓分享了,整個人都不好了」,不愉快的心情立馬被逗樂了。相較之前微信分享失敗的一串鏈接,這樣幽默的微文案提示真的可愛多了呢~

優(yōu)優(yōu)教程網首頁里藏著的可愛表情,你發(fā)現(xiàn)了幾個?

當初在制作優(yōu)優(yōu)網首頁的時候,為了不讓 hover狀態(tài)(鼠標懸?。┻^于無趣,分別在「靈感頻道」「教程排行榜 」「軟件排行榜」的 hover狀態(tài)里設計了不同的3個小表情,而且設計者大有來頭,正是人見人愛、花見花開的美丫姐。

她機靈的調整了圖標狀態(tài)后,從后臺數(shù)據(jù)來看,這里的點擊確實停駐時間長了一些,相信讓用戶會心一笑的同時,也拉近了用戶和平臺的距離感。不妨在你的下一個案例里也試試喲~

2233娘真是貼心的小姐姐(*?▽?*)

登錄網站或應用在輸入密碼時,無論周圍環(huán)境如何,我們總會潛意識里產生一絲不安全感。B站對于這個問題的處理方式顯得十分可愛,在用戶登錄賬號輸入密碼時背景里的2233娘會出現(xiàn)雙手捂眼的小動畫。整個輸入密碼的操作其實與其他應用可能并無差別,但因為有了這個蒙眼動作的心理暗示作用,用戶會感到自己的隱私受到保護與尊重從而產生安全感。

讓人意想不到的團隊展示hover效果

drygital設計工作室的網站有著個性又炫酷的視覺與交互效果。團隊展示界面的 hover效果,就讓人意想不到眼前一亮:當鼠標的光標移到單個成員的半身像時,原本正襟危坐的照片會變成另一張,展示該成員個性或喜好的搞怪照片。

原照片展示了團隊成員在工作中嚴謹專業(yè)的一面,而 hover效果呈現(xiàn)的圖片則展示了成員們私下生活里幽默有趣、個性鮮明的另一面。這樣的設計不僅突出了團隊成員的個人特色展示,利于團隊的歸屬感與凝聚力提升,也展現(xiàn)了團隊的開放包容與活力創(chuàng)新。

時間走著滴答滴,iPhone的時鐘藏著自己的小秘密

大家都知道 iOS系統(tǒng)的時鐘桌面圖標會始終顯示當前時間,但很少有人關注過時鐘圖標里秒針的走動方式。在常規(guī)狀態(tài)下,時鐘圖標的秒針會呈現(xiàn)掃秒式地轉動;但當桌面圖標處于長按狀態(tài)的晃動效果時,小時鐘的秒針會立馬變?yōu)樘胧降未鸬未鸬刈邉悠饋怼?

據(jù)說這個隱蔽的小細節(jié)設計是想表達向傳統(tǒng)時鐘的運行模式致敬的意思。機械鐘秒變石英鐘,你 get到了 iPhone時鐘的小秘密了么?

有道詞典也賣萌,一句有溫度的文案會有怎樣的力量?

似信息崩潰,或加載緩慢的問題,在產品實際使用中實在在所難免,一旦出現(xiàn),用戶的好情緒一定會受到影響。在這種時刻,一句生動而有溫度的文案就是可以安撫用戶情緒、改善使用體驗的利器法寶。


藍藍設計www.sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計  ipad界面設計 、 包裝設計  圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

 

日歷

鏈接

個人資料

藍藍設計的小編 http://www.sillybuy.com

存檔