<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          從心理學聊下構圖那些事

          濤濤

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

          平面與版式背后是千年來人類讀取信息形成的習慣、約定俗成的閱讀方式和心理學等,想成為一個優秀的設計師,我們需要進一步了解設計背后的原理以及表達信息的多種方法。

          Image title


          在中國繪畫中,有所謂章法、布局。中國繪畫最講究“經營位置”,因而有了中國畫高遠,深遠,平遠獨特意境的畫風體系。大家學習的設計體系中對構圖的分析就更加的全面,比如大家都了解的形式美學法則:均衡與對稱、漸次與重復、對比與調和、比例與尺度、節奏與韻律、體與主體、微差與統調、特異與秩序、前者多顯示生動型,而后者顯示秩序型。


          那為什么會總結出這些理論與法則?究竟又是什么在影響著我們的觀察與思考呢?有時候我們會不會遇到這些問題:


          1. 有時候我們在面對需求,需要強理論支撐自己的設計,但又找不到切入點,總會拿什么對比,對稱,韻律說事,需求方卻不為所動……


          2. 在平時的設計工作當中,大家不可避免的會參考和研習其他設計大師,同行的各類設計作品,大家肯定會有各自關注的點,創意,排版,顏色,細節刻畫等等等等,無論是那種類型的設計作品(平面,招貼,海報,H5,banner等),有時候會不會感到:看了好多作品,臨摹了好多作品,依然做不好設計;問題出在哪里呢?


          3. 我們總會收集一大堆的素材參考,那你的評判方式是什么?你又是如何分析畫面?為什么好,好又好在哪里?……


          接下來我們透過視覺表象,揭開那些神秘的面紗,希望通過我自己的學習和研究,能夠對大家有所幫助。






          Image title




          Image title


          為了更快地解析周圍的世界,大腦會投機取巧地偷懶。大腦每秒要接收約4000萬次的感官信息輸入,并試圖完全解析出它們的意義,所以它會根據以往的經驗,猜測我們看見了什么。 


          Image title


          經典再現,看左邊的圖,第一眼能看到一個黑邊三角形,上面疊了一個白色倒三角,右邊的圖,你能明顯感知到一個矩形。


          卡尼薩三角


          這是1955年,由意大利心理學家發現,并以她名字命名的“卡尼薩三角”。這個視錯覺表明我們的大腦把實際上不存在的三角形輪廓線畫了出來。


          我們把根本不存在的輪廓線稱為主觀輪廓。




          Image title


          對于識別具體物體來說,中央視覺是最重要的;

          對于認知整體場景而言,周邊視覺更為關鍵 ;


          Image title



          通過電腦屏幕觀看網頁,你并不用刻意瀏覽,而是整體掃過就能判斷整個頁面的內容。所以大多數人都低估了周邊視覺對于我們理解事物的重要性,人對場景的認知似乎都來自周邊視覺。




          Image title


          發現規律有助于快速處理時刻接收的感官信息。


          Image title



          看上面的圖,你會很自然的將其分成4組,每兩個點一組,共8個點,而不是上來就直接定義有8個點。


          大腦視覺皮質中的細胞分工不同,分別只對橫線、豎線、邊線和特定角度的線作出反應。  




          講完上述三個心理學常識,我們看下這三個點對應到我們設計當中又是如何一番情景,看下圖:


          Image title




          輪廓



          之所以將第一個心理學觀點與輪廓關聯,是因為在我們設計過程中任何一個形式的產生都會形成一個輪廓,那畫面元素多起來之后,畫面就會被這些輪廓分割成一個負向空間,很多時候我們都會忽視這個隱藏存在的形式,有時大家怎么調整一個設計元素本身,都會感覺不盡如人意,其實有一種可能是:這個元素在整個畫面中所形成的輪廓并沒有達到同步的和諧;


          如下圖插畫,一個女性形象,畫風簡潔干凈,畫面給人很強的整體感與完整型。如果是我們,會不會更多的去關注這個插畫的精彩之處是比基尼處理很生動,人物陰影細節刻畫的很到位?但是關鍵點是這些嗎?


          Image title


          繼續分析,如下圖:


          Image title


          圖A,把整個圖形黑白化后,想想我們的第一個心理學觀點,一幅畫面第一影響我們的是腦海里形成的這個輪廓。像這個畫面,一個完整近似幾何般的人物輪廓(樣圖白色部分),同時這個輪廓所分割形成的空間(樣圖黑色部分),讓整個畫面安靜有序規則,讓人的視線能夠自然流淌,不會輕易地跳動轉換;所以圖B,你會發覺,不管我如何填充紋理圖片,這樣一個畫面是始終和諧,沒有違和感的。再比較下圖:


          Image title



          筆者隨機處理的一個形狀,有沒有發覺,在沒有一個有序優美的輪廓之下,縱然你把內部的修飾刻畫的再如何精彩,這個畫面依然是索然無味,毫無生氣的。




          Image title



          設計元素要注重輪廓的修飾提煉——在設計表達過程中,不管是何種設計,我們都要注重每個呈現元素的輪廓是否精巧,注意腦海里主觀輪廓之外的負空間是否舒服與和諧,畫面是通過這些彼此聯系的,不要一上來就關注所謂的細節,經營你的形狀。


          Image title




          留白



          第二個心理學觀點與留白相關,是因為整體認知與周邊視覺關聯極大,看下圖:


          Image title


          好了,大家能夠認知到什么程度,這是什么?怕是大家怎么猜都不會確定這個是什么。


          Image title


          當筆者呈現完整圖畫后,大家是不是一下子就豁然開朗了。留白是至關重要的,留白很重要的一點是加強了元素與元素之間的關系,我們通過創建輪廓來形成元素,元素與元素之間的關系,通過留白-元素之間形成的負空間,來相互影響,最終形成協調的畫面。留白可以形成空間,引導,形狀等多種可能,讓作品更生動更有呼吸。


          Image title


          看上圖,蘋果設計對留白的使用很了,通過產品嚴謹的排布,大家可以很清晰的感受到物體分割畫面后,留白的清晰走向以及秩序,你的視線會通過大腦的分析呈現出無限擴展的空間,安靜空靈不干擾,更能彰顯蘋果設備本身的高端屬性。再簡單一點解釋,通過弱化周邊視覺的干擾,讓人更多的聚焦中央視覺,讓你對產品的感知更加深刻。這時候留白是空間,烘托畫面,安靜的美少女


          Image title


          看上述網頁設計作品,畫面通過主視覺形成的輪廓之后,呈現出大面積的留白空間,在這些空間基礎上,進行了核心信息的展示。注意左圖黑色主輪廓的部分并沒有信息呈現(集中展示了品牌形象氣息),而在留白部分展示了文字信息加以說明;右圖部分則在折線這條主輪廓型的兩側,有序展示了信息。這樣的設計,在網頁滑屏過程中,增加了畫面的動感效果,更重要的一點是在引導視線過程中,你會更關注內容的信息呈現,想想我們的視覺,對于認知整體場景而言,周邊視覺更為關鍵;因為你會很不經意的在意留在中央視覺(在設計中就是刻意設計引導你視覺的主輪廓)之外的東西,這時候留白是引導,展示信息,完美的指揮家。


          Image title


          再看這組作品,理解這組留白相對比較復雜,注意筆者圖示位置的留白,很多時候,我們都習慣把畫滿一個畫面當作第一要務,填滿是可以保證我們看到的畫面至少是飽滿不空的,但是往往適得其反就是亂和沒有靈氣,所以一些設計作品試圖去突破一些視覺固式,那這時候留白就是一個極好的幫手,無形中啟到一個形狀的作用,補充畫面達到畫面的和諧統一,又增加韻味。像左圖就是通過一個紅色面積的模塊留白,與標題呼應的同時,讓畫面方圓能夠更自然的流淌,增強畫面的靈動感,右圖則通過添加元素,讓留白區域形成某種場景或者縱深,這樣就對文字形成了一種補充,烘托文字的效果,增強感受,兩者看似有明顯空白,但是整體又是完整的??聪聢D,其實這又牽扯到我們第一個講到的心理學:眼見非腦見,我們的大腦會自動去找尋某種輪廓。而這里輪廓的形成是通過留白去幫助實現的。這時候,留白是形狀,參與構成,積極的組織者。


          Image title




          Image title



          留白,是形式的延展...空間,引導,形狀——元素在構成畫面中一定會產生留白,留白對畫面的意義在于可以幫助我們更好的展示內容,幫助我們營造空間,創造聯系,配合形式,讓畫面更加有序有感。




          構成



          講到構成,這個名詞大家都不陌生:一定的形態元素,按照視覺規律、力學原理、心理特性、審美法則進行的創造性的組合。很顯然跟我們的心理學原理三不謀而合,人是習慣尋找規律,也很習慣創造規律,所以在設計領域,才有了對點,線,面等不斷的研究與實踐,在抽象的形、色、質的造型方法上不斷追求與探索。


          Image title


          看上圖,這是一張展覽海報,海報簡潔干凈,穩重大氣,沒有太多筆墨渲染,背景圖的選擇,以靜制動,讓整個海報有種高山流水,知音無限的濃郁氣息。先想下我們之前的說明:大腦視覺皮質中的細胞分工不同,分別只對橫線、豎線、邊線和特定角度的線作出反應。再結合下點線面構成的知識。首先畫面三個大字,這是點,然后由上到下一個“之”字形排開,斜線至此形成,你的第一視感規律完結,接下來注意畫面背景圖的選擇,瀑布從上而下,這個水流的動勢極大得幫助和引導了我們的視線閱讀,豎線至此形。畫面感就形成了,你會很自然舒服的去閱讀這個海報。


          但是就此就結束了,視線總體流動是這樣的,為什么設計師要把字放到畫面這個位置,而不是其他位置呢?想想剛剛說的規律,人喜歡規律,創造找尋規律,并以此為根據去實踐,這里就牽扯出了大自然里最神奇的定律黃金分割(今天的文章暫時不講,之后我會帶來關于黃金分割的文章分享哦),繼續看下圖,


          Image title


          首先,A1,A2這是畫面橫向寬度上兩條黃金風格線,B1,B2,B3這是畫面縱向按順序的三條黃金風格線,當畫出這幾條黃金分割線,是不是一目了然,海報作者把核心元素有序安排在黃金風格線及焦點之上,和諧之美,一張看似簡單的海報蘊藏著如此豐富的魅力,我們也可以感悟到設計師本身嚴謹的氣息和對構成形式的細心推敲。如果是我們,又會是怎樣的呢?


          Image title


          再看上圖,大家可以自行按照上述的方式去分析一下。下圖海報可能更復雜些,但是其中的規律也是可以尋找的,畫面通過兩組不同斜面創造大的規律動勢(右圖黑紅示意),同時巧妙的利用交叉后形成的三角形,形成點的元素,作為人物畫像的載體之用,因而三角形是從整體上而來,有序而有組織,相互有關系,不會顯得亂。


          Image title


          更令人驚奇的是,當我也使用黃金分割試圖去進一步分析和理解畫面的時候,你會發現人物的面部表情—眼神,全在分割線上,所以有沒有覺得,這個海報的每個人都感覺實在你在對視,莫名的一種震撼,畫面的張力,不得不佩服國外設計師的嚴謹。


          Image title




          Image title



          合理使用點線面,引導組織畫面——優秀的畫面從來不是無組織無秩序的,都是通過點線面的仔細經營來創造最佳的視覺效果,而這個視覺效果,是能夠自發的去引導觀眾的視線,讓規律自然被閱讀,達到形神合一。




          今天通過三個心理學,引出設計中三個設計要點輪廓,留白,構成,其實彼此之間是一個遞進聯系,有了元素就會產生形狀,躍然紙上,則需要足夠的留白去為元素講故事,然后這個故事就是構成,你使用如何的手段,讓他更豐富更有內涵,一目了然。三者的有機結合就形成了我們所說的構圖,視覺語言中構圖是非常重要的底層環節,相比華麗的細節和各種炫目的效果,畫面中隱藏的構圖實際上才是視覺設計的核心!


          Image title

          Image title


          看一下這些電影場景,是不是恍然大悟,看似復雜的場景,都建立在這些幾何圖形的基礎骨架之上,回憶下文章之初的心理學觀點,其實設計知識背后是人類讀取信息幾千年來形成的習慣以及現代社會約定俗成的閱讀方式和心理學等,要想成為一個優秀的設計師,我們需要進一步地了解設計背后的原理以及表達信息的多種方法,就像研究表明,人類能識別 24 種基本形體,這些基礎形狀稱為幾何離子(方形,圓形,三角形,圓柱體,圓錐體等),這就落回到我們講到的心理學:我們眼睛能夠尋找的規律,而上圖的電影畫面也都構建在此基礎之上,因為這樣的形式更容易讓我們的視覺去捕捉去理解。


          講了這么多,就是希望能夠幫助大家在平時的設計工作和日常的學習積累過程中,能夠有一種思路和方法,去判斷和解讀作品,去分析這個設計為什么好,好在哪里,去把設計進行有效的分解(元素本身的樣式,元素所在空間的留白,以及彼此之間的關聯)給你自己的設計說明增加籌碼,以便更加得擲地有聲。


          最后,既然我們知道了這些心理學知識,了解到了我們的觀察習慣,在之后的設計過程中我們就需要努力做到以下幾點:


          1.  經營好元素的輪廓和位置;


          2.  人會不由自主地尋找規律,那就盡量多使用規律,利用分組和間隔創造規律;


          3.  要讓某個物體(例如圖標)易于識別,就用簡單的幾何圖形來畫它。這會讓構成物體的幾何離子更明顯,從而使人更快、更輕松地識別該物體;


          4.  控制好你的形式,形式在內容之下,形式服務內容。文繁則質衰,末勝則本虧,過分強調文飾與修辭,內容就會受到遮蔽而顯得軟弱無力,形式重于內容,其實就是舍本逐末。

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

          如何讓一個創意想法落地?阿里設計師告訴你!

          濤濤

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

          作為一名設計師,在基礎業務支持外,大家都會萌生一些很有創意的設計想法,并希望通過自發項目推進其落地。而現實往往是殘酷的,即使熬盡心力去推進各方,業務方仍不認可價值、開發資源一度緊缺,外部因素的各種影響最終令項目陷入一度停滯、甚至夭折。今天將 B類全景視圖項目中沉淀的一套設計驅動方法分享出來,希望對大家有所裨益。

          文章目錄

          • 前提一:避免自嗨,緊盯業務問題
          • 前提二:構建獨創性解決方案
          • 前提三:讓成本可控
          • 完成資源整合、確立多方共建
          • 做好時間規劃、節點有效驅動

          經過全景項目組一年不懈的努力,全景圖像工具已實現從0到1的迭代上線,覆蓋了1688及ICBU 兩個業務,服務了近30000個商家。順利完成了設計驅動業務增長、商業價值變現的過程,2.0升級蓄勢待發中。

          幾個自發項目的實戰讓我明白了一個道理,用設計驅動力去落地一個項目就像建造一幢建筑。一幢建筑的使用離不開地基、骨架結構、設備與裝飾,地基可以保證建筑基礎的穩固,梁、柱、板等主體性結構可以支撐起整個空間框架,水、電、暖甚至一些功能性家居可以增強空間的使用性。同樣,一個自發項目也需要不同的結構來支撐,你需要思考并拆解一下項目的不同階段,要重點完成項目的預先評估、前期成立、后期執行與落地等環節,以保證項目的基礎、骨架及節點內容的階段性落地。

          良好的項目前提可以讓你精準地評估、判斷設計驅動的機會點,確保項目有一個堅實的基礎;鏈接各方資源組建項目團隊,以支撐起整個項目骨架;有效執行項目節奏及時間節點,來確保項目如期上線。

          設計驅動的完成不是一蹴而就的,良好的前提會助力項目順利起航。要學會在業務中挖掘設計驅動的機會點,預先評估好項目的各種可能性。

          前提一:避免自嗨,緊盯業務問題

          1. 認知設計價值屬性

          從崗位觀層面來講,設計師作為資源方,是運營及產品的下游環節,除了解決用戶痛點,提升用戶體驗以外,還必須助力業務持續發展,實現商業價值變現。而在做設計方案時,我們有可能只從用戶角度考慮,脫離當前業務現狀,標榜超前的概念以及的效果,產出各種天馬行空的方案,卻不考慮數據在哪里采集、內容該如何生成。有些設計價值不能為數據所佐證,導致我們經常沉浸在自我的設計觀內,過分夸大設計的能動性,錯誤地評估設計帶來的價值。脫離業務現狀的設計,往往不會被業務所采用,合作關系也可能陷入僵局。所以一定要端正好心態,設計在以用戶為本的同時,也一定要以業務為基。

          2. 收口當前業務問題

          很多新人設計師會遇到不知道如何梳理業務問題的情況,在這里給幾點建議。首先,這塊業務如果之前有人負責過,你可以咨詢相應的前輩設計師,以更快地了解業務問題;其次,你還可以主動求教你的老板,對方的經驗及閱歷會幫助你快速起步;再次,積極鏈接業務同事,歷年報告及規劃PPT 先搜羅起來,細讀之后將不理解的問題羅列出來,找一個合適的時間向對方求教;當然,用戶永遠是你最好的溝通對象,邀約幾個核心用戶做下深度訪談,相信你會收獲更多。在此過程中一定要保持謙虛求學的態度,多問、多聽、多記,并主動思考業務遇到的問題,在業務與用戶之間需建立平衡的關系,探尋能為現在的業務做什么、未來可以做什么。

          前提二:構建獨創性解決方案

          明確了具體的業務問題,又該如何提出獨創性解決方案呢?你要基于業務現狀深入用戶,進行全面且有深度的用戶調研,明確核心用戶群體、核心使用場景以及切中要害的用戶痛點。明晰問題后,可通過內部設計小組頭腦風暴的形式來發散思維,從多重角度(如新技術、新工藝、新模式等)來考慮解決方案的多樣性及創新性,從中選擇具體方向深化創新。

          1. 結合新趨勢、善用新技術

          在日常積累中多關注新鮮及熱點資訊,研究行業及設計趨勢;分析相關或同類競品,比對其優勢及特色是哪些;隨時關注新技術,例如人工智能、AR、VR、語音交互等技術的發展趨勢,思考新技術是如何與現有場景融合的。當你的設計方案需要借助某項新技術來實現時,你需要提前調研該技術的可實施性,新技術的應用一般是有一定成本的,某些技術存在的壁壘可能讓設計方案付諸東流。而在這一環節中,需要注意無論是設計還是技術都是為了解決用戶問題而存在的,不要為了炫酷的效果而盲目在方案中硬潛入某些技術。

          2. 線上、線下模式轉換

          你還可以深挖用戶場景,什么人在什么場景下做了什么,他的目標及痛點是什么,并嘗試還原用戶的原生場景訴求,找尋是否存在將線下模式轉換線上、線上模式轉換線下的機會點。舉個例子,在深度認證報告改版項目中,通過幾輪深度用戶調研,發現B類買家與C類買家有很大差異,除了商品本身的決策因素外,還會著重考慮賣家的服務質量、供應能力、公司經營信息等內容,聚焦到具體的用戶行為,很多B類買家在尋找新的供應商時,經常會去賣家的工廠、公司、店鋪進行線下實地考察。而這種行為的背后其實滲透著用戶的基礎訴求,那就是對賣家企業實力真實情況的渴求。為了將賣家信息更好地可視化,提出了用全景技術來實現線上驗廠的設計提案,方案獲得了買家及業務方的一致認可。

          前提三:讓成本可控

          有了方案之后,你還要反復校驗方案的可實施性。方案的實現勢必需要投入各方成本,你需要評估一下設計提案的投入產出比,讓業務、設計、技術甚至是三方的成本可控。這里的成本主要有兩個層面,一個是運營經費成本,一個是人力成本。對于運營經費的評估,你可以做幾套運營方案,從低成本低回報到高成本高回報幾個維度來向業務申請運營經費,如果有低成本高回報的方案更有可能獲得運營的支持。而對于人力成本而言,往往內部成本是較為可控的,可讓各方按照設計提案預估出需要的人力資源。

          而三方服務成本則是運營成本及人力成本交叉混合的一種形式,也是最難評估的一種類型。這里舉個例子,當全景驗廠自發項目起步時,需要同時考慮客戶、業務及三方價值,為了讓各方利益最大化,需架構出一套商業模式,商家購買全景拍攝服務、服務商上門采集商家的全景圖像,平臺則通過運營這套服務模式獲取利潤。在項目初期,為了刺激服務商團隊快速增長,提高運營規模,對每個訂單補貼了一定的服務經費。而為了提高全景服務的商業變現能力,必須解決一個問題,如何提高該業務模式下的營收利潤率。為此,我們需要拆解一下該模式下的利潤率模型,發現可以通過提高全年訂單數(開源)、減少總成本投入(節流)的方式來提高利潤率。因開源涉及因素較多,這里不再詳細描述,重點講一下節流的模式。而節流的關鍵就是在降低總成本,用全景的方式去采集工廠圖像,就需要考慮三方人力拍攝成本;因工廠分布在全國各地,上門拍攝產生的差旅成本也是一筆大支出;而全景拍攝勢必離不開設備,設備的投入成本更是難以預估,一臺專業設備至少需要近萬的價格。

          • 為了合理控制差旅成本預算,必須避免因過長旅途造成的交通成本上揚。為了解決該問題,劃分了全國服務的覆蓋范圍,建立了區域負責制,以不同省市的中心位置來輻射服務半徑,可將交通費用限制在一定范圍內。
          • 為了降低設備總成本,需要先評估需要的設備數量。是不是每個服務商都必須配備一臺設備呢?答案是否定的。通過核算一年的服務訂購量,評估出日平均同時作業的訂單數,按照合理的供需關系來配置最優資源,按需采購相應的設備數量,減少因非必需設備量帶來的支出損耗。
          • 為了降低服務商的拍攝成本,需保證拍攝質量的基礎上,降低服務單次時長,為此梳理了多場景下全景設備的采集規范,并組織了大規模服務商培訓,以提高服務商工作效能。

          所以善用商業模式、建立二方及三方共贏模式,可以撬動更多資源推動自發項目落地。

          有了以上前提的鋪墊,就可以開始著手項目執行階段了。在具體推動過程中你會遇到一些問題,其實歸根結底就是兩類問題:一是前期項目成立的資源問題,二是后期項目執行的時間節點問題。處理好這兩大問題,可對項目如期上線起到關鍵性作用。

          完成資源整合、確立多方共建

          作為一個設計驅動者,承擔著比設計師更深刻的責任,需要從一名需求翻譯者轉變為項目管理者,你需要學會協同多方業務資源實現項目共建。

          1. 驅動業務各方協同

          項目的成功是每個項目組成員心血凝結而成的,少不了各個角色的相互配合,而業務角色的配合往往起到核心作用。

          多方價值思辨:為了更好地撬動業務資源,你需要主動去游說各方。除了提供一份獨創性、有價值的設計方案之外,還需要深入思考對方需要什么。你需要對各個職能的工作內容有一個明晰的了解,需要站在對方視角將各方價值論證清楚,思考用戶、平臺、業務、技術價值分別是什么,你能給對方帶來什么,「思其所想、破其所難」的方式更容易打動對方。

          一致的目標導向:當你拿著一份自以為很滿意的設計方案,業務卻不感冒的時候,多數是因為你們雙方的目標不對標。說的更直接一些,大家的職能不同,自然所關注的重點會不一樣,利益點也就不同(KPI不一致)。運營會關注自己業務數據是否突出,產品會關注有無商業價值,設計師則更多關注體驗、美感。所以要想拉到項目資源,不要總是「紙上談兵」,要學會走出去主動咨詢對方的目標是什么,能否通過一定的抓手讓彼此的目標更為契合,可以對不同的對象角色(如產品、運營、技術)提出與之對應的目標方向(如產品化、品牌運營化、技術平臺化)。

          自身角色轉換:當業務各方已經愿意一起共建完成落地,而在實際配合過程中,可能也會因為多項目并行造成對方無暇分身,導致合作推進較為困難。這個時候,你需要擺正心態,切換一下自己的角色,以一個產品、運營的角色主動去承擔一些設計以外的工作內容,在設計思維之外培養自己產品、運營的思維,輔助產品及運營完成相應任務,需要考慮如何將自己的設計方案打造成通用性產品,如何通過一些活動或渠道來樹立自己產品的品牌影響力,切實推進項目發展。

          2. 撬動多技術共建

          利用三方技術資源:在很多情況下,即使方案有價值、業務也認可,但受限于業務技術資源,項目排期一拖再拖無法上線,這種時候可以善用三方技術資源,并勇于調動內部開發來把控技術質量,順利保證項目起航。

          聯動集團技術資源:而開發一般都會有幾種擅長的代碼語言,你所對接的技術可能受開發語言的限制,不能完成某些創新性方案的開發,這種情況下要學會利用集團的技術力量。全景視圖課題剛起步的時候,內部技術并不熟悉全景實現的代碼語言,而學習成本又相當大。多方咨詢后了解到集團有專業的技術團隊正在研究這塊,我們有應用場景,對方有技術儲備,幾輪溝通后大家很快就明確了合作方向。所以當你最需要的技術資源內部不能滿足時,要學會去聯動集團其他資源,鏈接雙方價值以實現共贏。

          做好時間規劃、節點有效驅動

          組建好項目組團隊之后,又該如何保證項目節點平穩實施、保證項目如期落地呢?主要從計劃彈性制定及節點風險控制兩個層面來具體執行。

          1. 確保計劃的彈性制定

          計劃的彈性:在項目管理中,我們需要全面考慮產品、運營、設計、技術等各方進度,一份詳細且合理的進度表有利于將項目拆解成各個節點。為了確保項目有計劃地完成,可按照時間或事件等緯度來安排具體節點,并將主要節點進行重點標注,比如上線時間、大型運營活動,可通過主線Action、次線Action有彈性地牽引項目節奏。

          計劃的可執行性:在做設計提案的時候,我們會全面考慮用戶在不同場景下遇到的問題,提出全鏈路設計。而在一般情況下,項目資源會受到各種因素限制,方案不可能一次性全部上線,往往需要多版本迭代完成。這就需要作為項目管理者的你,設定出合理有序的多版本方案,讓每一步都可執行,先推進1.0最小可行性方案落地上線,再來快速校驗數據效果,進而優化2.0版本,用不同版本迭代的方式,逐步實現較為理想的效果。

          2. 完成項目節點的風險管理

          項目在進行過程中,往往會出現一些突發風險,導致項目遲遲得不到進展。而在這些風險處理上,作為一個項目owner 不可避免地要和各方溝通來協調資源、對接需求、催促進度,可以抓住「人」這個關鍵因素做一些跟進及處理。

          建立張弛有度的關系鏈接:當項目遇到一定問題或阻力時,可根據問題的輕急緩重,采用不同維度的方式來處理與項目組成員的關系。

          • 遇到問題時,不要直接把問題丟給對方,也不要盲目催促對方。要把問題梳理清楚,具體的緊急程度是多少,你需要的 Deadline 是什么時候,想要的效果是什么。這樣才能讓雙方在溝通過程中更好地對焦問題,提高問題解決效率。
          • 在需要對方協助處理一些問題時,還可以通過一些互動形式來積極鏈接對方,以更了解對方的性格習慣和工作問題。輕松愉悅的環境更利于雙方溝通,通過「小恩小惠」的形式請對方喝杯咖啡、吃個飯,傾聽對方「吐槽」,了解對方在項目中遇到的難處,并疏導對方情緒,讓對方樂于主動去解決問題,避免在合作過程中踩到對方的雷。
          • 在項目中也會遇到一些重大挫折,最終效果不佳影響了用戶體驗,對方卻不能提出較佳的解決方案,甚至會影響產品上線,卻礙于對方資源問題無法進行優化。這時候你要勇于找到對方老板,俗話說「擒賊先擒王」,勇于向對方老板說出你對項目的要求,甚至可以帶著一份詳細的項目規劃及價值給到對方老板,搞定對方老板,也就搞定了你需要的項目資源。

          善用技巧、讓溝通更有效:在實際項目過程中,大部分同事都是多個項目并行的,各方都會有一定的業務壓力,在溝通過程中難免會有些摩擦和碰撞。當你與未建立穩定合作關系的同事溝通時,其實是一種黏度很小的社交弱關系的表現。過于強硬的溝通方式可能會造成冒犯之意,甚至對合作關系起到消極作用;而過軟的溝通方式會顯得不夠迫切與急促,可能會造成推進緩慢。你可以根據項目節點不同的緊急程度,采用力度不同的溝通方式,以下排序從弱到強。

          • 給對方分享一些與業務或生活相關的新鮮事,借著話題表達自己的關注點,委婉地提示對方「需求請盡快完成」。
          • 用一定措施來激勵對方盡快解決問題,激發對方積極性。為了鼓舞項目組士氣,可對項目組成員說:下周項目上線后,就請項目組一起聚個餐。
          • 直接表明自己的立場,敦促對方緊急處理。舉個例子:親,這個問題我說過好幾次了,已經嚴重影響到用戶的操作體驗,造成了頁面跳失率增加,請你務必解決一下。
          • 擺明態度,給對方一個最后期限:周五之前還不能解決問題的話,我要去找一下你們老板了!

          除了以上內容,設計驅動項目落地時肯定還會遇到各種不可控因素,務必要保持良好的心態,用韌勁去克服重重困難,隨機應變各種情況。全景視圖項目行至今日,用設計驅動業務的形式已經賦能了30000個B類商家,其中也是經歷了多次業務調整、項目成員幾翻變化,我們一直堅守初心,積極探索多業務場景的落地,期待2.0年底與大家再次見面。設計驅動,行在路上,心在遠方,與大家共勉。

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

          你的配色看起來總是不舒服?用這個策略性配色法則!

          濤濤

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

          配色并沒有所謂的固定方程式,生搬硬套配色理論并不能真正解決問題。本文帶你從配色的策略性角度出發,深入分析配色的正確打開方式,讓你從本質上解決不同場景的配色問題,并通過配色提升整體的設計品質。

          文章目錄

          • 明確配色目標
          • 確定主色,精簡層級
          • 選擇正確的色系
          • 提升品質感

          明確配色目標

          1. 色彩規律≠配色規律

          我們都學習過非常多的色彩知識,也看過很多的配色書籍或文章。然而當我們嘗試在設計中運用這些理論時,就會發現:配色的理論往往在實際運用中并不好使,使用后的效果也不是特別明顯。為什么會出現這種現象呢?

          配色是否就是色彩某種的規律?當我們學習并掌握這種規律以后,就能掌控雷電,呼風喚雨,成為配色大魔王了呢?

          答案并非如此。

          配色并非單獨存在,而是依附于不同的設計載體中。不同的設計載體,所要達到的目標不一樣,就決定了配色理論也會存在差別。

          我們會發現,雖然有很多書本、文章都在寫配色的理論,每個人講的配色理論有很多相同的地方,但是最核心的理論往往都不是相同的。

          因為大家講的相同部分,大多都是色彩的理論部分,這部分僅僅只是色彩本身的規律;而大家所講的不同部分,則通常是作者在自己所在領域總結的一套配色規律。

          因此,并非每一篇文章的配色理論都適合你,這也是當你學習并使用配色理論后,效果依然不好的原因了。

          因此在學習配色時,僅僅學習配色理論是不夠的。首先要思考配色的使用場景,以及整個設計所要達到的目標,然后再學習相應領域的配色知識,才能讓配色理論發揮最大的作用。

          2. 不同的行業,不同的配色目標

          雖然設計是相通的,但是在不同的設計領域進行配色時,依然會存在巨大的區別。

          比如廣告設計的配色理論,放在室內設計上,往往是行不通的。因為廣告設計的目標在于傳遞信息,需要吸引你,而室內設計的目標則是要營造舒適理想的生活氛圍。同樣的道理,推廣設計的配色理論,往往在界面設計時也是行不通的。

          不同行業間設計目標的差異,決定了配色目標和理論的差異。

          △ 廣告設計:準確地傳遞商品、廣告等信息

          △ 品牌設計:創造品牌概念,留下品牌印象

          △ 工業設計:營造產品氛圍,引導產品使用

          △ 室內設計:傳遞生活理念,創造理想的生活氛圍

          △ 數字產品設計:傳遞產品信息,引導用戶閱讀和操作

          3. 明確配色目標

          對于大部分互聯網行業的視覺設計師來說,平時的工作內容大體會分為產品界面設計和推廣設計兩個大的方向。很多設計師需要同時負責這兩塊內容,于是就可能會出現將同一個配色理論用在不同地方的情況,導致一些配色問題的出現。比如:推廣設計的配色太素,無法吸引用戶的注意;而產品頁面的配色又過于雜亂刺眼,影響用戶閱讀和操作體驗等。

          所以,配色的第一步,首先要明確配色目標。

          產品界面設計的配色目標:

          • 信息傳遞:產品的首要目的是傳遞用戶所需要的信息,這就需要界面有清晰的層級關系,明確、舒適的閱讀體驗。
          • 引導操作:清晰合理的操作引導,讓用戶能夠準確地根據引導進行下一步操作。
          • 品牌價值:很多同學會忽略這一點,導致產品的界面與品牌關聯性差,整體界面沒有品牌感。

          推廣設計的配色目標:

          • 吸引流量:強有力的吸引力,快速抓住眼球,留下深刻印象。
          • 營造氛圍:需要營造氛圍,讓用戶通過氛圍快速理解和融入到推廣內容中,加深印象。
          • 快速傳遞:在短時間內快速傳遞信息。這就需要設計時信息表達明確,使內容能夠精準快速地傳遞給用戶。

          我們將這兩種配色目標做一下關鍵詞提煉,產品界面設計的配色關鍵詞:清晰、舒適、引導、品牌感。而推廣設計的配色關鍵詞為:吸引力、氛圍、快速傳遞。

          我們可以將這些關鍵詞作為衡量目標,以此來尋找正確的配色方向,或者用于檢驗設計作品的配色問題。

          所以當我們接到項目需求后,可以先與需求方一同確定好設計的目標,以此來確定正確的配色方向,提升配色與設計方向的準確性。而這樣做的另一個好處是,我們可以在項目之初就與需求方之間取得溝通和信任,達成共識,為后續溝通打好基礎。

          確定主色,精簡層級

          當我們確定好配色的目標以后,如何開始配色工作呢?通常情況下,我們首先來確定整個設計的主色,然后再開始進行后續的設計。

          1. 主色與副色的定義

          什么是主色和副色?

          主色是整個色調的核心顏色,通常也是相對占比最多的顏色,它決定了整體的風格和基調。而副色則是畫面中占比相對較少的顏色,它通常起到輔助主色、豐富畫面的作用。

          假如把一個畫面看成一部電影,那么主色就是整個電影的主角,而副色則是除了主角以外的其他配角。

          2. 確定主色,精簡色彩層級

          一部好的電影,通常情況下需要有一個明確的主角,它主導了整個電影的走向,對于設計作品來說,也是相同的道理。所以在配色過程中,首要的任務是確定配色的主色,并在整個作品中明確它的地位,讓它來主導整個畫面。

          在產品界面的設計中,主色是傳達品牌感的重要元素。明確的主色能夠讓整個界面產生強烈的品牌感。反之,整體的配色會顯的十分混亂,影響品牌感的傳達。

          我們可以來看兩個案例:

          這兩個案例在配色上有什么問題嗎?為什么?

          如何更準確地分析配色的問題? 我們可以使用前面講的目標分析法,從產品界面的配色目標入手,逐一尋找和發現問題。

          我們通過三個維度去分析問題:

          • 信息傳遞的維度:這兩個界面的顏色過于繁雜,導致信息層級混亂,沒有視覺中心,用戶也不知道從何開始閱讀。而兩個界面中的卡片設計上,也都存在同一個問題:底色的明度過高,導致卡片上的文字閱讀性非常差。
          • 引導操作維度:整體核心操作路徑不明確,用戶進入后無明確的操作引導;按鈕的視覺效果也很弱,導致用戶無法識別。
          • 品牌價值維度:品牌主色不明確,導致整體品牌感弱。

          如何去解決以上的問題?可以用八個字概括:明確主色,精簡層級。

          我們可以來看一下 Keep 的產品界面設計。同樣是健身App,Keep 的配色方式則完全符合了產品界面的配色目標。相比前面案例的兩個界面,Keep 的產品界面呈現出優秀的整體品牌感和品質感。

          在 Keep 的整體配色中,最核心的思想就是簡化色彩層級——明確主色,減少不必要的顏色。從配色的角度來分析,作為品牌的主色,「Keep綠」貫穿了所有的產品界面,使整個產品顯得非常統一和整體,凸顯了整體的品牌感和品質感。

          其次,Keep 的整體界面將除了主色以外的其他顏色精簡到了,并將主要的輔助灰以外的所有中性色都控制在三個層級以內;首頁的插畫運用了同色系來精簡色彩層級;視頻的封面圖風格也經過處理,使色調與整體界面統一。

          整個界面的閱讀體驗非常舒適,字體顏色層級清晰,重點明確。而在操作引導上,Keep 將大量的品牌色用于核心操作路徑和按鈕上,這使得整個產品的引導邏輯清晰明確。

          3. 精簡色彩層級的意義

          色彩層級越精簡,就越容易達到整體色彩平衡,從而提升設計的整體品質感。當我們去看很多大廠的頁面設計時,可以感受到很多的相同點:整體而強烈的品牌感,簡約而高級的配色,豐富細膩的細節等。

          用戶在閱讀頁面時,配色是我們大腦接收到的畫面信息。所以精簡配色對于產品界面的設計來說至關重要。以品牌色為主色,精簡色彩層級,可以讓整個頁面富有品牌感。

          △ 網易云官網

          △ 阿里云官網

          △ 騰訊云官網

          4. 品牌升級時的色彩簡化趨勢

          在品牌Logo 的升級中,簡化色彩層級同樣是一個大的趨勢。簡化層級,可以讓品牌更加簡約和高級,提升品牌的品質感和包容性,使品牌擁有更大延展性和更多的可能性。

          星巴克的品牌升級中,除了去掉 Logo 字母和咖啡字母外,更簡化了 Logo 的圖形和色彩。從而強化了星巴克標志性的人魚形象和星巴克綠,讓品牌更加簡潔有力,易于傳播。

          大麥網在去年也經歷了戰略性的品牌升級。全新的品牌形象包括新 LOGO 以及新的 Slogan,配色上則重新定義了更具年輕活力的紅色作為主色,同時精簡了整體的色彩層級。

          而寶馬在最近官方宣傳圖中,將藍白色相間的 Logo 簡化為黑白單色,而新 Logo 專為品牌旗下即將推出的高端豪華車型使用。

          選擇正確的色系

          明確配色目標,確定主色以及色彩層級后,如何進行下一步的配色?

          這時候我們可以根據不同的配色目標來選擇合適的色系,豐富整個畫面的配色。需要注意的是,在豐富配色的同時,仍然要嚴格控制色彩層級,以保證整體色彩層級的精簡。

          1. 巧用同色系,統一不單調

          同色系是指在色環上相距不超過45°的兩種顏色,我們可以選擇主色的同色系范圍內的顏色來豐富整體配色。那么如何選擇同色系的顏色呢?

          首先在色環中確定顏色的位置,通過色環兩邊45°延展出我們所需要的同色系。

          在主色的同色系范圍內,我們可以選出同色系顏色作為延展色,單獨使用或者組合成漸變色進行使用。

          下面的案例就是運用同色系原理來進行配色的。可以看到,整個頁面在保持色彩統一的前提下,增強了畫面的層次和豐富性,從而提升了整個頁面的層次感和品質感。

          同色系的配色特點是整體頁面統一而富有層次,從而傳遞出一種穩定、專業的形象,適合絕大多數的場景使用,是最為簡單和有效的配色方式。

          我們可以總結一下同色系的配色方法。首先確定主色,主色兩邊45°以內的同色系色彩范圍,在范圍中選取合適的單色作為輔助色,或者選取一段漸變色單獨使用。

          2. 不同場景的對比色用法

          對比色是指在色環上相距120°~180°之間的兩種顏色(180°時則互為互補色)。處于對比色關系的兩種顏色,通常色相差異較大,能夠相互產生強烈的對比效果,我們可以利用這種原理來增強畫面的吸引力。

          在不同的場景中,對比色同樣有著不一樣的使用方式。在產品設計中,通過小面積的顏色對比,可以加強主色的活力與整體豐富性;而在推廣設計中,通常會使用大面積的對比色增強頁面的吸引力。

          產品界面中的對比色應用

          產品界面的配色對于產品來說至關重要,好的配色不僅能夠準確地反映產品的調性,還能正確地引導用戶閱讀并理解產品。

          我們可以結合網易七魚的官網改版案例,來了解如何通過配色來提升官網的設計品質。

          下圖是七魚的舊版官網頁面,在配色上,產品方認為原來的配色過于單調和沉悶,希望可以讓整體更活潑一些。且網站的整體跳出率過高,希望我們能夠找到原因并通過改版解決這個問題。

          首先第一步,需要找出舊版官網存在的問題。這時候,我們就需要再次運用前面所講的目標分析法。通過不同維度的目標分析,尋找頁面中存在的問題。

          我們還是通過三個維度去分析問題:

          • 信息傳遞維度:整體的配色過于單調,使頁面和信息缺少吸引力,導致用戶不想閱讀;其次插圖和 icon 在配色和表現形式上都過于單調,表現力弱。
          • 引導操作維度:核心功能模塊邏輯展示混亂且繁雜,導致用戶無法正確理解內容。
          • 品牌價值維度:品牌主色沉悶,整體品牌的品質感弱;而且漸變色與品牌色差異過大,不夠統一。

          由于七魚首頁的修改涉及到整體官網的配色修改,單純從每個頁面入手并不能從根本解決問題,容易造成整體官網配色不統一的情況。這個時候,我們就要從品牌配色入手,通過修改配色并制定新的設計規范,在整體上解決問題。

          首先從品牌主色入手。經過嚴格的討論,我們重新制定了七魚的品牌主色。為了解決顏色沉悶的問題,我們選擇了接近原有主色,但更鮮亮且富有活力的藍色作為主色。而輔助色上,為了讓七魚品牌更有溫度,我們選擇主色的對比色——橙色。

          藍色與橙色在小面積上的互相對比,可以互相襯托,讓兩種顏色更顯活力。

          我們以新的配色規范為基礎,重新制定了全新的七魚設計規范。規范中包含了配色的使用比例、不同的icon樣式與配色的結合方式等一系列的頁面細節,以保證規范可以完整、統一地落實到每個頁面和元素中。

          運用新的配色規范進行頁面設計時,要靈活地將配色與產品內容相結合,讓配色更好的融于頁面中,而不是生搬硬套地將配色裝到頁面里。

          比如我們在優化首頁的主要功能模塊時,首先做的便是重新梳理產品功能的展示構架,然后再結合新的設計形式和配色規范,讓新的規范發揮最大的作用。

          在不同頁面的功能icon 上,我們豐富了 icon 的表現形式,同時將新的對比色配色加入到每個 icon 元素中,增強了 icon 的活力和吸引力,讓每個 icon 看起來更精致。

          而在功能插圖中上,我們采用了與 icon 統一的配色和表現形式,讓頁面中的所有元素具有統一的品牌感。

          最終,我們將新的配色規范逐步落實到網易七魚所有的 Web端和 Mob端頁面中,使七魚的整體官網設計煥然一新。在新的官網頁面中,不僅提升了整體的設計品質,同時也解決了前面分析的問題,整體提升了15%的客戶留存率。

          通過這個案例我們可以發現,整體配色的改變,可以極大的提升官網對于用戶的第一印象。用戶往往在進來的一瞬間就決定了對官網的印象,并最終影響用戶是否進一步閱讀,而配色則是其中非常重要的一部分,正確的配色能夠讓用戶更愿意停留并閱讀內容。

          推廣活動頁面中的對比色應用

          在推廣頁面的設計中,通常需要用營造強烈的視覺沖擊,以達到快速吸引用戶并傳遞信息的目標。這就需要大面積的對比色,來達到強烈的對比效果。而在較大面積使用對比色時,整體色彩的主次和整體平衡至關重要。

          我們可以來看一個案例:

          可以看到,整個頁面主要由橙色和深藍紫色兩個主要對比色構成。大面積的對比色產生了強烈的視覺沖擊,讓整個頁面充滿了吸引力。整個畫面用最強烈的對比色重點突出了兩個主要的人物角色,從而吸引用戶注意并進行閱讀,最終將用戶引導至購買入口。至此,整個頁面的任務也算是完成了。

          在推廣頁面中,我們需要注意的是,重點信息并非只能是文字內容,也可以是最吸引用戶的畫面核心元素。

          3. 嘗試更多的創新配色

          除了掌握以上的幾種基本色系的配色方法外,大家可以在此基礎上嘗試更多的配色風格。比如在同色系、對比色系的基礎上,有目的地加入色彩元素豐富色調,在保持整體色彩層級的同時,加入更豐富的變化,從而達到配色目標。

          △ 更清新的「同色系」配色

          △ 更豐富的「同色系」配色

          △ 更多彩的「對比色」配色

          △ 復古的平面風配色

          而對于很多初學者來說,我建議大家能夠首先明確配色的目標,在配色時保持色彩層級的精簡明確。在此基礎上,循序漸進,逐步去嘗試更多地配色風格。只有這樣,才能養成良好的配色習慣。

          提升品質感

          我們按照之前的方法,正確的確定了配色的目標,選擇了合適的配色方向,并逐步完成了整體的設計排版。很多同學到這一步之后,就覺得作品已經完成,便停止不繼續深入了,而這也是初級設計師經常容易出現的問題。這個時候的作品,從整體上看并沒有太多問題。但是當用戶被頁面吸引,開始仔細欣賞作品時,往往會發現作品沒什么看點。

          出現這種問題的原因,就是作品缺乏足夠的細節和品質,導致作品不夠耐看。就像一本書有著精美的封面,但是打開以后卻平淡無奇,最終對整本書都非常失望。

          想要讓作品更優秀,除了基本的版式和配色之外,往往還需要更深入地去雕刻作品,讓作品帶有一種更高級的「氣質」,而這種「氣質」就是我們所說的品質感。

          1. 什么是品質感?

          品質感對于設計作品來說,是一個綜合性的評價。我們可以將這個詞分為「品」和「質」,「品」代表物體本身的品相和細節,而「質」則代表質感。

          怎樣的設計才算是有品質感的?如何提升設計的品質感?我們可以先來研究一些優秀的設計案例,尋找其中的共同點。蘋果的產品和頁面設計,是公認的具有較高品質感的,我們可以來看一下蘋果的部分官網頁面。

          蘋果的所有產品和頁面,從產品圖到頁面的設計都非常有質感。為什么這種質感會如此吸引我們,令我們覺得非常舒適?如何才能讓設計產生質感?

          要了解如何產生質感,首先要了解一下物體產生質感的原理。

          當光線照射在富有質感的物體表面時,會產生不同程度的漫反射,最終反射進入我們的眼球后,就會顯現出一層富有質感的漸變色。所以想讓物體獲得質感,漸變是一個關鍵要素。

          我們可以利用這一原理來提升質感。下面的案例,是 FishDesign 組件庫官網的一個局部頁面。其中就運用了大量的漸變色質感原理,將漸變色融入到 icon 和頁面元素中,從而提升了整個頁面的質感。

          2. 獲得品質感的關鍵要素

          漸變只是獲得品質感的關鍵因素之一,蘋果官網將漸變這種原理加入到頁面和元素中,配合精美的產品圖片,讓頁面保持了非常高的品質感。

          那么是否還有其他要素的存在,能夠提升質感呢?

          仔細觀察蘋果的所有元素設計,在漸變的同時,還加入了微量的投影和豐富的細節,使所有的元素在簡潔中充滿了細膩的質感。

          我們可以總結一下,讓設計獲得品質感的幾個要點:細膩的漸變+輕微的光影+細節/紋理。

          發現這些原理以后,我們可以嘗試將這些原理運用到設計中,從而提升設計的品質感。下面的幾個案例,就是我在研究時所做的一些練習,在不同的頁面細節中都可以看到以上原理的運用效果。

          總結

          看完前面的內容,大家會發現,其實配色并沒有想象中那么復雜。

          只要掌握正確的配色策略,并逐漸適應這種方法,就可以應付各種不同的設計類型。最后,我們將前面講的配色法則做一個簡要的總結:明確目標 – 確定主色 – 精簡層級 – 選擇色系豐富配色 – 提升品質感。

          希望大家讀完這篇文章以后,能夠真正理解和掌握策略性配色法則,在不同的項目中靈活運用,并最終形成自己的優秀配色習慣。


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

           

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

          濤濤

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

          文章目錄

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

          水晶宮與拉斯金

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

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

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

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

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

          所以,現代設計由此時此地發生萌芽,似乎是合情合理。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

          現代設計之父誕生

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

          他們的目的是希望書籍設計能夠真正為廣大讀者服務,改變書籍長期被少數人掌控的局面,也力圖改變莫里斯那種比較凝重的考古味道。這三人都基于為大眾的共同立場,但是各自有自身的風格,他們為眾人皆知的一些英國童話故事設計書籍,人物、動物、植物跟風景都栩栩如生,生動活潑,是工藝美術運動后期平面設計范圍里一個重大的發展與突破。

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

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

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

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

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

          總結

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

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

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

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


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


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

          濤濤


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



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




          核心流程


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




           

          首頁


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




          列表頁


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


          詳情頁


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


          結語


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


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

           

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

          濤濤

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

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

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

          1)要謙虛

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

          2)相互信任和尊重

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

          3)用戶先到先得

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

          4)打破挑戰

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

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

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

          6)不斷重新考慮設計

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

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

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

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

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

          9)要有創新精神

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

          10)少即是多

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


          結論

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

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

          這里是:

          https://principles.design

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

          祝你有美好的一天!


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

           

          可能是最詳細的大屏數據可視化設計指南!

          濤濤

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


          文章目錄

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

          基礎概念

          1. 什么是數據可視化

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

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

          △ 數據可視化作品《 launchit 》,作者:Shane Mielke

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

          △ 數據可視化作品《 world-drawn-by-travelers 》,作者:TripHappy

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

          2. 什么是大屏數據可視化

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

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

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

          數據分析類:

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

          大屏數據可視化設計原則

          大屏數據可視化設計原則:設計服務需求、先總覽后細節。

          1. 設計服務需求

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

          2. 先總覽后細節

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

          大屏可視化設計流程

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

          1. 根據業務場景抽取關鍵指標

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

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

          2. 確立指標分析維度

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

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

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

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

          3. 選定可視化圖表類型

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

          選定圖表注意事項:易理解、可實現。

          易理解

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

          可實現

          我們需要了解現有數據的信息、規模、特征、聯系等,然后評估數據是否能夠支撐相應的可視化表現。

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

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

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

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

          5. 頁面布局、劃分

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

          6. 定義設計風格

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

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

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

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

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

          7. 可視化設計

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

          8. 樣圖溝通確認

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

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

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

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

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

          9. 頁面定稿、開發

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

          切圖與標注

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

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

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

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

          10. 整體細節調優與測試

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

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

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

          大屏設計的注意事項

          1. 字體使用

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

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

          2. 顏色搭配

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

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

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

          3. 頁面布局

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

          Q&A

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

          總結

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

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

           

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

          濤濤

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

           

          文章目錄

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

          品牌定義

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

          1. 收集相關數據

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

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

          △ 用戶評價詞云圖

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

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

          △ 品牌心智地圖

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

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

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

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

          △ 品牌精髓

          小結

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

          △ 品牌概念抽象過程

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

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

          1. 文案風格構建

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

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

          改版前文案風格分析

          現有方案中可窺見以下特征:

          △ 改版前文案風格

          設計策略

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

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

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

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

          △ 句式結構構建過程

          2. 視覺風格推導

          風格構建

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

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

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

          △ 色的定義

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

          △ 形的定義

          風格應用

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

          • 光影
          • 背景

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

          △ 品牌色的處理

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

          △ 人的顏色應用

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

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

          對應到結構,分別為:

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

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

          △ 物的顏色應用

          光影

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

          △ 光照的顏色應用

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

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

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

          △ 元素形狀定義

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

          △ 元素方向定義

          主體占比:占據畫面中較大比例。

          △ 主體占比定義

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

          △ 主體位置定義

          驗證方案設計

          1. 驗證思路推導

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

          那如何測量人的情感呢?

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

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

          △ 驗證思路

          2. 樣本量設定

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

          筆者認為其建設性在于:

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

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

          △ 樣本量設定

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

          3. 量表設計

          量尺設計

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

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

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

          △ 量尺標度數

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

          筆者按照所用的標度數,選擇了對應能產生等現間距的修飾詞:

          △ 量尺修飾詞

          測量對象的語義轉化

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

          △ 語義轉化過程

          量表結構設計

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

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

          △ 量表結構

          空狀態設計

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

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

          1. 表現空狀態

          空狀態內容

          空狀態由兩部分構成——反饋和引導。基于當前情境的反饋能讓用戶獲悉所發生的事;在此基礎之上,還需提供引導以幫助用戶完成最終的任務。

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

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

          空狀態結構類型

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

          △ 空狀態結構

          視圖結構類型

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

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

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

          △ 完整視圖的布局邏輯

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

          △ 模塊布的局邏輯

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

          2. 圖示的設計策略

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

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

          根據場景筆者設定了三類意象:

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

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

          △ 「虛無」的意象表達

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

          △ 「評論」的意象表達

          其他場景示例:

          △ 其他場景示例

          驗證實施及結果

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

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

          △  第一輪測試輪廓圖

          具體分析如下:

          △ 第一輪測試結果分析

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

          △ 迭代前后方案對比

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

          △ 第二輪測試輪廓圖

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

          △  第三輪測試輪廓圖

          遺留問題及后續關注

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

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

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

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

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

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

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

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

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

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

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

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

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

          這直接影響到數據收集的準確性。

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

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

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

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


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

          濤濤

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


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

          往期回顧:

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

          文章目錄

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

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

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

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

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

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

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

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

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

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

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

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

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

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

          支付寶的小無奈

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

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

          優優教程網首頁里藏著的可愛表情,你發現了幾個?

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

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

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

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

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

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

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

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

          大家都知道 iOS系統的時鐘桌面圖標會始終顯示當前時間,但很少有人關注過時鐘圖標里秒針的走動方式。在常規狀態下,時鐘圖標的秒針會呈現掃秒式地轉動;但當桌面圖標處于長按狀態的晃動效果時,小時鐘的秒針會立馬變為跳秒式滴答滴答地走動起來。

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

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

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


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

           

          產品設計師必備的模態體驗知識

          濤濤

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


          很多設計師根據直覺進行產品設計。雖然大部分情況下是沒問題的,但是已經證明了的通用標準可以更好的幫助你從邏輯上構建有理有據的UI解決方案,而不是僅僅依賴于你的直覺。


          本文我們將探討UI設計中的模態通用標準,討論為什么僅有兩種類型的原因,并且分析App和網站在將信息體系結構和用戶信息流轉換為直觀的用戶界面是如何失敗的,本文將使用“Purrrfect”這個產品來講解。


          兩種基本屏幕類型:模態屏幕、非模態屏幕


          基本每個可視化窗口幾乎都屬于這兩類中的一個。為了理解模態與非模態的區別,我們首先要定義模態屏幕。


          什么是“模態屏幕”?

          模態屏幕示例模態屏幕示例

          模態屏幕有不同的形狀和大小:

          全屏模態視圖(左1)

          彈出窗口(左2)

          氣泡彈窗(左3)

          燈箱彈窗(左4)

          快訊/通知

          ...


          模態屏幕和非模態屏幕這兩種類型看起來似乎很好理解,它們都從屬于App的主窗口。但是有一個重要的區別:


          模態窗口

          創建一個禁用主窗口的模式,模態窗口作為前面的子窗口使其保持可見。用戶必須先與模態窗口進行交互才能返回父級應用程序。

           —— 維基百科


          大多數模態屏幕,特別是在桌面應用上可以輕松識別,因為它們覆蓋主窗口并且可見:主窗口背景遮罩的彈出窗,彈出菜單和彈出框對話框,燈箱彈框,警告等...


          但是移動設備上的屏幕空間有限,這也是移動設備上的許多模態屏幕占據整個屏幕的原因。它們不再保持底層主窗口可見,所以很難將它與非模態屏幕區分開來:


          Image title

          iOS示例:移動設備上的模態屏幕


          兩者的主要區別在于屏幕的交互方式不同。雖然非模態屏幕允許用戶簡單地返回到父級屏幕,但是模態屏幕要求用戶在返回主窗口之前完成操作(示例中為“保存”)或取消當前操作。


          非模態屏幕最明顯可視信息便是導航欄(示例中為標簽欄)。即使在子級頁面,非模態屏幕也允許用戶在主導航來回跳轉。另外模態屏幕要求用戶在再次使用主導航之前必須關閉窗口(示例中為“Save ”或“ Cancel ”)。


          為什么要使用模態?

          模態屏幕解決了一個簡單的問題:用戶容易分心,所以有時候必須讓用戶全神貫注的進行操作。單一的模態屏幕正是要求人集中在單一的任務上,然后再繼續其他操作。


          “模態通過阻止人們在完成任務或解除消息或視圖之前做其他事情來創造焦點” 

          —— Apple


          什么時候應該使用模態?

          模態屏幕的規則我們已經了然于胸,與非模態屏幕相比,它能達到的目的是什么,應該在什么樣的情況下使用它呢?


          試想一下,我們正在創造一個巧妙而新穎的App:“ Purrrfect ” , 一個小貓數據庫,它允許用戶上傳,查看和評論可愛的貓咪GIF。

          Image title

          資料來源:https://giphy.com/gifs/tDgXAst2PhIYw


          我們App(簡化)用戶流程如下圖所示:用戶打開App,進入幾個可用選項卡之一(我們的小貓數據庫),點擊其中一只小貓(進入詳細的單一小貓視圖),然后點擊評論部分(進入評論部分)。

          Image title

          Purrrfect用戶流程


          另外用戶可以在每個階段執行補充操作。例如他可以在小貓數據庫頁面中將另一只小貓添加到數據庫中,又或者他可以在小貓詳情頁中編輯數據。


          如何分辨模態與非模態,其實沒有那么容易,這些只是我個人的經驗總結:對自包含過程使用模態屏幕,對其他所有內容使用非模態屏幕。


          “自包含過程”是指每個操作都有明確的起點和終點。此操作有明確的時間范圍,將用戶從一般用戶流中移出,讓他專注于操作,然后再將他帶回到開始的位置。


          “需要特定的用戶任務,決策或確認的關鍵信息”

          ——Google


          對于Purrrfect App來說,這意味著主要用戶流不是模態的。但是特殊的限時操作,如添加小貓,編輯小貓和撰寫評論都是模態的。

          Image title

          在用戶返回主流程之前,可以取消或保存完成所有模態操作。因此模態屏幕使用取消和保存按鈕(或其他類似操作)而不是后退按鈕。如果您的后退按鈕在非模態屏幕中觸發保存操作,您可能需要考慮使用取消和保存按鈕切換到模態屏幕。如果在模態屏幕中有兩個不同的操作,例如取消和保存,則無意義(因為它們會觸發相同的操作)您可能希望切換到非模態視圖。在這種情況下,主導航(例如標簽欄)也應保持在屏幕上可見。


          讓我們回到我們改變游戲規則的App,Purrrfect界面如下圖所示:

          Image title

          Purrrfect用戶界面


          在實際情況中,模態和非模態屏幕之間的區別通常沒那么明顯。例如圖像全屏頁面在大多數應用中都是模態的,盡管它不是進程或對話框。在一些特殊情況下,模態屏幕可能會承載頁面的焦點。如果我們的App屏幕中間是沒有其他操作(如編輯或評論)的情況,我們可能使用模態(全屏視圖)。但由于它允許用戶更深入地進入信息架構并執行各種附加操作(顯示注釋,編輯  ......),因此它不再具有明確的終點,因此它是主流程的一部分,所以應該選擇非模態視圖。


          設計師有責任了解清楚App的流程,評估某個操作是否應該單獨展示,從而決定來模態是否有意義。如有疑問,請記住Apple的指導方針:


          盡量減少模態的使用。通常人們更喜歡以非線性的方式與應用交互。只有在獲得某人注意、任務必須完成或放棄,以繼續使用應用或保存重要數據時,才考慮創建一個模態來連接上下層級。

          ——? Apple


          雖然不需要嚴格區分模態和非模態,界面也可以完美展現。但是模態的概念深深植根于Apple,Google,Microsoft等企業的界面生態系統中,且用戶已經形成了相應的期望值。


          如果Apple時不時的違反自己的規則,那么Apple將不會是Apple。例如,新版App Store在“今日”標簽中打開亮點作為模態屏幕,但仍然允許用戶在屏幕底部導航到下一步(沒有明確的終點)。這樣用戶就可以在模態屏幕內部更深入地導航到其他流程。從推薦以外的其他內容打開相同的App屏幕會導致屏幕顯示為非模態屏幕。這將保留標簽欄和后退操作(再次單擊當前標簽欄圖標以轉到其主屏幕)。

          Image title

          不一致的Apple UI


          左邊的不一致可以通過....來解決

          A:...在非模態子屏幕中打開高亮顯示,并帶有后退按鈕并保留標簽欄

          B:...一旦用戶點擊模態屏幕內的鏈接并繼續在App的父級別上的非模態子屏幕操作,從而關閉模態屏幕。


          如何使用模態?

          現在我們對何時使用模態有了一個大致的了解。那么“我們如何進行設計?”這是目前唯一的問題。下面是對模態屏幕檢查后得到的列表:


          頂部導航欄始終顯示關閉按鈕(或“取消”/“丟棄”/“最小化”/ ...)。當用戶迷路時,可以輕松關閉疊加層并導航回App的頂層。


          iOS和Android上的取消按鈕通常位于導航欄的左上角。Android更喜歡關閉/“x”圖標,而iOS則喜歡“取消”文本,但是圖標按鈕在ios也很常見,經常使用ios設備的應該都知道。


          一般情況下,iOS和Android上的保存按鈕都位于導航欄的右上角。但是這種放置規則在大屏幕設備上是不可取的。所以在屏幕底部固定浮動或頁面末端的內嵌是我個人推薦的放置位置。

          Image title


          多步模態

          一旦模態對話框由多個步驟或子級頁面組成,事情就會變得更加復雜。一般情況下,繼續按鈕顯示在右上角。第二步不會打開新的模態屏幕,而是保留在當前模態屏幕,并在現有模態上覆蓋非模態子屏幕。


          當在屏幕底部放置主要操作(“保存”,“應用”或“繼續”)時,模態第二步的右上區域釋放了可選取消按鈕的空間。雖然會從左到右跳轉,但這種方案仍然比不能在子屏幕上直接關閉更好一些。

          Image title


          動畫

          截止目前,iOS和Android在模態的使用方面非常相似。但是動畫方面并不是這樣的。


          iOS:動畫在iOS中高度標準化。

          非模態屏幕從右側進入框架。標簽欄在屏幕底部保持不變。頂部的導航欄也保持不變,但其內容在自定義轉換中淡入淡出。此動畫還為用于返回的邊緣滑動手勢提供了基礎。


          另一方面模態屏幕從框架的底部滑入并覆蓋整個界面(新的頂部導航欄)。他們不使用邊緣滑動手勢,如果沒有保存之類的重要操作,自定義下拉關閉手勢可能會好一些。


          Android: Android上的動畫更加的豐富多樣。

          Google建議在Material Design指南中使用“有意義的過渡” 。Android本身并不區分動畫是否為模態或者非模態。


          總結

          大部分設計師根據直覺來進行產品設計。有時候直覺的確很重要。但是更重要的是要我們需要了解一些通用標準,以便于在特定的時候選擇更好的適應或者改變。


          在我看來模態的概念是當今應用設計中最被忽視的UX原則之一??缙脚_和Web本地混合應用并不能很好的使用模態的指南和規范。但是模態的基本規則你應該了解,以便在必要的時候適應或者改變它。


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

           

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合