<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>

          首頁

          運營設計中的視覺動線

          資深UI設計者

          我們的作品信息的傳遞效率高嗎?
          什么樣的設計是清晰有效的?
          想要搞清楚這些問題,首先你得了解視覺動線這個概念。


          本文3200字,主要分為三個部分,閱讀時間約15分鐘。



          —————   

                動線


          動線一詞最早是源自建筑與室內設計領域。指的是人在某個空間內的移動軌跡。例如住宅空間的動線設計,我們會經常聽到動靜分離的概念,講的就是動線的設計。住宅動線的設計目的是提高居住體驗,減少在室內的重復行走軌跡。


          例如家務動線的設計,從進門到廚房再到生活陽臺,是家務勞動中最經常行走的路線。通過設計動線,減少家務勞動的行走,就能提高家務勞動的效率。在這里動線越短,效率越高。





          在商業建筑領域,動線的設計也被頻繁的運用。例如店鋪的顧客動線設計,通過興趣區吸引顧客,引導顧客盡量多的瀏覽店鋪的商品,從而提高銷售額。商業空間的動線設計講究的是坪效(每平米的銷售額),動線的設計更側重迂回。




          還有比如動物園、游樂場的路線設計,就涉及到游玩順序的體驗,以及緩解擁堵等問題。因此動線設計的目的在于提高效率,在家居和商業空間領域已廣泛應用。而在視覺設計領域,也存在動線的概念。



          ————————

                視覺動線


          大家在生活中有沒有遇到這樣的情況,你要找的東西就在眼前,但是找了好久仍然沒有找到。


          人眼之所以能看清物體,是因為視網膜中央有個很小的區域叫做中央凹,這個區域集中了大多數的視錐細胞,專門負責視力的高清成像。


          但是中央凹的面積極小,高清區域有限。人眼只有在10度視角范圍內才最為敏感,30度范圍內可以分辨出顏色。這就導致人眼可視范圍有限,一次只能產生一個視覺焦點。因此人眼在觀察物體時,沒辦法一下子看到所有信息,需要逐個地移動搜尋,這種視線的移動過程,就構成了視覺動線。


          例如我們在閱讀文章時,一般是從左到右逐行地閱讀,這個閱讀順序就構成了視覺動線。如果文字的排版過于跳躍,沒有規律,就會造成視覺焦點過多動線混亂的情況,容易出現閱讀障礙,大大影響了閱讀體驗。





          在視覺設計中動線的設計尤為重要,例如下圖的banner,左圖動線混亂主次不清。右圖則能清晰地引導觀眾從左到右閱讀信息,降低無效的閱讀成本。
          因此構建合理有效的視覺動線,將有助于打造良好的閱讀體驗,能更高效地讓用戶獲取到信息,避免用戶的流失。








          我們以運營設計為例,來討論一下常見的動線類型。在運營設計中,banner和活動專題是最為常見的,這類型的設計,畫面往往很有感染力,內容豐富。這里介紹的動線,是指某張banner或者活動頭部同屏類的動線軌跡。一般我們可以將常見的動線分為這幾個類型:直線型、匯聚型、發散型、扇型、以及Z型。


          ———————

                直線型


          直線型動線顧名思義,就是在一條路徑上依次展示信息元素。我們以banner為例來看看如何應用。



          在分析動線軌跡的時候,我們應該逐一地尋找視覺焦點。這個案例中我們第一眼看到的是左側的標題,我們稱第一眼看到的焦點為視覺入口點;緊接著視線轉移到了右側的龍身上。這就構成了一條清晰的從左到右的視線軌跡。


          banner中只在標題和火焰上使用了色彩,其他背景使用較灰的色系,這使得視覺焦點突出,動線清晰。



          2.1.1動線角度  

          直線型動線在運用的時候,不一定都是從左到右的橫向角度。常見的有對角線以及豎線的形式。


          例如左圖這張banner就是對角線式的動線軌跡。對角線具有傾斜的角度,容易塑造出速度感。因此這樣的動線軌跡往往畫面更加的有動感。而豎向的動線一般用在窄長比例的畫面中,例如手機端的運營活動。右圖的活動頁面就構成了從上到下,從標題到主體人物的動線瀏覽軌跡。



          2.1.2視覺焦點個數  

          直線型動線中,人們的瀏覽軌跡是根據視覺焦點的位置進行的。在直線上依次排列視覺焦點,但并不是焦點越多越好,一般2-3個視覺焦點較為合理。較多的視覺焦點反而影響閱讀效率。 



          ———————

                匯聚


          匯聚型動線是將用戶的視線聚焦到中心的一種動線軌跡。一般有多個視覺入口點來引導用戶的視線。




          例如下面這張banner,我們的視線會先被左右兩側英雄所吸引,延著他們沖刺的方向視線轉移到了中間的標題,這就構成了匯聚型的視覺動線。匯聚型動線在元素擺放上一般具有引導性,最終目的是讓觀眾的視線聚焦到中心,以突出中心的標題或者主體信息。



          匯聚型動線的視覺入口點一般在2個以上,例如下面這張活動頭部,通過兩側的煙霧塑造視覺入口點,引導觀眾視線匯聚到中心。是一種側重突出中心內容的動線類型。




          ———————

                發散


          匯聚型動線是由四周向中心聚集的動線軌跡,而發散型動線則相反,它是由中心向四周轉移的動線軌跡。視覺入口點在中心,并逐步向四周擴散的動線類型。



          例如下面這個暑假活動頁面,就是視線由中心往四周轉移的發散型動線。我們第一眼會被醒目的標題所吸引,這就是視覺入口點。之后視線逐步地往兩側移動,依次看到人物、書本、臺燈以及兩側的云朵。構成了漸進式的視覺瀏覽軌跡。



          而下面這個四周年的活動,最醒目的也是標題,它將觀眾的視線聚焦到了中心,之后逐步向四周發散。按照放射的方向,依次瀏覽了人物、按鈕、獎勵、圓球等信息。


          可以看到發散型動線一般運用在有較多信息元素的畫面中,瀏覽順序層層遞進,比較適合對信息元素進行歸類閱讀。


          4.1入口點位置 

          發散型動線一般是由中心往四周發散,視覺入口點一般在中心線位置。不過入口點也有位于邊緣的情況。例如下面這張banner,作為視覺入口點的人物位于右下角,通過手勢逐步引導觀眾閱讀標題和玩具。是一種單邊發散的動線類型。



          ——————

                


          扇型動線一般會在中心線上塑造一個視覺入口點,之后保持著至上而下、從左到右的視線軌跡,這種軌跡就好比一把扇子。



          例如下面這個手機端活動,我們第一眼會被可愛的小狗頭部所吸引,之后視線往下,看到主標題和副標題,并按從左到右的視線軌跡閱讀了標題。這就構成了扇型的動線軌跡。


          可以看到扇型的動線軌跡保持了從上到下的結構關系,一般用在畫面較長的版式中。容易塑造至上而下、內容由少及多的閱讀關系。



          —————

                Z


          Z型動線是最為常見的類型,它遵循了人們從左到右的閱讀順序習慣。并且在長頁面中可以一直做反復的延續。




          例如下圖的活動頁面,我們的閱讀順序就是從左到右逐行地掃視關系。先是主標題,再是副標題,最后是木牌上的信息。這構成了循環的Z型動線軌跡。此類動線比較適合應用于文字類信息較多的畫面中。







          在動線的設計過程中,比較難的是如何去引導信息之間的先后關系。這里介紹幾種便捷的技巧,如何更有效的來設計動線。


          ————————

                閱讀順序


          第一種就是根據人們的閱讀習慣來設計,也就是從左到右,至上而下的順序。因為人的眼睛,左右轉動所看到的角度和區域,要比上下轉動所看到的要廣闊的多。從左到右也是人們通用的閱讀習慣和標準,橫向閱讀也更為舒適。在設計中我們只需要按照從左至右自上而下的規律來擺放信息元素,就能保證有良好的閱讀體驗。



          ——————————

                元素指向性


          第二種是利用元素本身的指向性來進行引導,特別是主體人物的肢體動作、手勢等。例如下圖中的banner就分別通過人物的眼神和手勢進行引導,讓觀眾的視線轉移到標題上,構成了很強的關聯性。讓動線的引導更為自然緊密。




          ———————————

                引導線的設計


          第三種是引導線的設計,我們可以通過設計一些引導性的線條來引導觀眾的視線。常見的有放射線,或者虛擬的線條。

          例如下圖1的banner,就是通過左右兩側放射性的線條來增強引導,讓觀眾的視線匯聚到中心,構成了匯聚型的動線。圖2除了蜘蛛的視線引導外,標題文字的透視處理也構建出一條無形的引導線,讓整個視線的引導更加緊密自然。在元素本身指向性不強的時候,引導線的設計能讓視線的引導更加緊密,有規律。



          —————————

                層級的設計


          第四種是通過層級關系的設計來構建動線,也是經常要用到的方法,構建層級關系的方式有很多,這里只做簡單介紹,有機會再跟大家交流。


          例如下面這個活動頭部,我們的閱讀軌跡是從左到右的關系,先看到左邊的人物然后是標題,最后是右邊的人物,構成了直線型的動線軌跡。如果我們拉開人物之間的空間關系,我們首先會注意到離我們近的物體,依據遠近關系,形成了一條視覺引導軌跡。這就是層級對于視線引導的作用。


          通過層級的塑造,可以更有效的來制造動線,引導觀眾的閱讀。



          [ 小結 ]


          綜上,只要我們能夠理解動線的概念和目的,在排列元素時就能有更清晰的目的性,設計更有方向感。信息的傳遞是我們構建作品和觀眾之間交流的橋梁,也是設計中首要考慮的因素。有效的信息傳遞才能發揮設計最大的價值。以上僅是個人的觀感與體會,希望對大家有幫助。

          文章來源:站酷   作者:Tony老司機
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          字體設計丨逆反差的知感悟

          ui設計分享達人

          前言

          2021年至今「逆反差字體」這個原本偏小眾的字體設計風格,從卷土重來到廣泛應用,再次受到諸多設計師的追捧,一股新浪潮撲面而來。


          縱觀它的出現、流行與發展,身為設計師,期待本文可以通過對經典設計的客觀分析,蓄力字體設計領域的經驗和技巧,為2022年的創作積累更多靈感。



          特征

          PART 1.

          ——————————

          商業的發展與驅動

          Reverse contrast現在國內被稱為「逆反差字體」。設計師皮特·比亞克(Peter Bi?ak)在2012年發表的文章中曾提到:這種逆反差字體的設計是有意通過違背讀者的預期來吸引注意的,怪異的字母形式在日益飽和的商業信息世界中脫穎而出。



          PART 2.

          ——————————

          打破認知 重塑觀感


          二十世紀中,荷蘭著名書法家和設計師格里特·諾澤爾(Gerrit Noordzij)倡導以書寫走向作為字體設計的基礎,通過習慣來定義書寫理論:平移和擴張。這個邏輯反映出人們對拉丁字母普遍造型認知:橫細豎粗。


          豎筆畫在西文字體中起到承重、平衡結構的作用。如果顛倒粗細對比關系,使其橫粗豎細,就會造成橫向視覺,讓人產生印錯的感覺,這與傳統的三大主流西文字體的設計方法也是相差甚遠。





          逆向設計的規則營造出視覺上強烈的差異感,比起普通字體更怪誕、夸張,更具有戲劇性和情緒化,讓人印象深刻。它最大的特點是重構了拉丁字母的視覺比例。經發展,中文表達上使用“逆反差”還是生動準確的。







          知丨西字歷史(逆反差字體的思辨)

          PART 1-1

          ——————————

          溯源

          在商業廣告海報張貼應用中Caslon Italian字體被鑄造出來。這是19世紀初,工業革命在金屬活字印刷領域的一個新奇的創新。



          1825年,印刷工和社會改革家托馬斯·卡森·漢薩德(Thomas Curson Hansard)把逆反差字體描述為“排版怪物”。


          1854年,French Antique字體發行,造型如鐵軌般的字型引來了一種新的風格——French Clarendon。它在美國廣告制作中展開了大量生產使用。在獲得市場認可后的半個多世紀,它仍在馬戲團的海報和西部電影宣傳上被廣泛應用。




          這組彩色的活字印刷樣本,讓逆反差的設計風格在當下更顯復古。


          19世紀,在追求創新的歐洲人看來,逆反差字體的古怪造型仍是離經叛道的。而現代設計師則帶著更多反思和辯證,以非傳統的審美來認識這種字體風格。



          PART 1-2

          ——————————

          遍布世界

          20世紀,逆反差字體的浪潮席卷歐洲。瑞士著名的字體設計師馬克斯·米丁格(Max Miedinger)于 1954年設計了自己的第一款逆反差字體Pro Arte。大名鼎鼎的Helvetica字體就是由他設計的。


          20世紀80年代,遠在亞洲的日本也接受了這股“逆浪潮”。當時的動漫和游戲開始風靡,熱血與科幻的世界里結合字體夸張的造型,讓設計簡直天衣無縫。



          1980年,在游戲UI中誕生了世界上第一款逆反差像素字體,讓游戲世界充滿著奇幻感。



          這種像素化的設計方法,如今是很潮的視覺表達。



          80年代,逆反差字體在音樂和書籍等多個包裝領域的應用也是繼往開來。





          PART 1-3

          ——————————

          今日應用

          逆反差字體從未真正流行但也從未被拋棄過。如今,除了趣味盎然,又增加了更加瘋狂的風格效果,最為典型的是Maelstrom。很多字體的誕生,都證明著逆反差的無無限可能性。




          感丨漢字之力(民族文化的養分)

          西文有著較為完整的逆反差字體更迭歷史,漢字相對創造力偏弱。中國設計師在進行漢字逆反差設計的探索時,不妨大膽些,打破局限,從中國書法中吸取創作養分,這是民族文化理解上的考驗,也是對民族文化的尊重。



          PART 2-1

          ——————————

          漢字書法與逆反差實踐

          大多書法風格多變,并沒有嚴謹的橫粗豎細。不過,難得能在清代的漆書中找到橫粗豎細的規律存在,它犧牲了部分漢字的視覺結構,傳達出一種鈍拙感和趣味性,這正是漆書的魅力所在。



          漢儀2020年1月出品一款漢儀吉金,靈感來源就是漆書,在其基礎之上造型更加現代。



          民國時期,在廣告招貼、書籍封面上,也能發現很多逆反差風格的字體設計。這些都是漢字設計上逆反差的初次實驗。



          PART 2-2

          ——————————

          漢字逆反差的設計鑒賞

          徐學成是中國第一代字體設計師,在晚年仍堅持實驗性設計的嘗試,1998年他主持設計出華康雅藝體這款逆反差字體。



          造字工房也推出過幾款視覺沖擊力強、節奏分明、充滿藝術張力的字體:造字工房溢尚真體、彩體、超凡體等。



          3type(三言)設計研發的基本美術體,在2020年10月進入試用階段。它簡單明了,擁有大膽靈動的字形,是為數不多的優秀中字逆反差字體。


          基本美術體也是本文的靈感來源。曾路過順愛烤肉公司,被牌匾上的字體所吸引,便開始了我對逆反差風格字體的探索研究。



          日本一度受到美國Fantail(扇形尾)風格的西字影響,也展開過一系列的實驗性嘗試。最為典型的是寫研在80年代,推出的「扇尾蘭」字體,它憑借寫研在行業內的影響力得以廣泛的運用。




          其后,C&G 花束字體、TA-Sigma字體等,這些極具逆反差風格的扇尾字形也在市場應用中大放異彩。





          PART 2-3

          ——————————

          案例賞析

          歷經200年的鍛造與發展,逆反差字體如今獲得了越來越多設計師的青睞,中外設計有目共睹。



          野獸派美學(The brutalist aesthetic)頻繁的應用于當代平面設計和網頁設計中,逆反差字體有著原始且未經雕琢的質樸風格,往往在簡潔精致的物體上形成鮮明對比,增加設計內容的趣味性。




          悟丨關聯與創造(結語)

          近兩年,看到了很多比例夸張、造型狂野的驗性字體形式出現,這要歸功于酸性設計的盛行。


          酸性設計,是一種主觀情緒化、美感與欲望交織、傳達致幻又辛辣酸澀的一種復雜感受的體現。它強調出了失調和混沌共存的狀態,這和逆反差字體的反叛精神極為契合,二者結合來表達科幻感與未來主義時情緒飽滿而熱烈。希望本文能幫助更多朋友梳理逆反差字體與設計風格的關聯性。




          逆反差字體是一場字體設計的視覺革命。看似怪誕,其實是對視覺設計規律的突破與創新,雖“有悖常理”,但并非曇花一現,它在字體設計的歷史上擁有自己長久的舞臺。


          任何一個新穎的設計浪潮,都會影響設計師的設計表達。我們能做的就是感受浪潮、尋找源頭、思考走向,隨時精準有力的擁抱變化。


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷 作者:騰訊ISUX
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          「克萊因藍」是如何產生的?聊聊背后的極限藝術

          資深UI設計者

          本次跟大家聊一個比較純粹的藝術風格,英文原名叫“Minimal Art”,為什么一開始就上英文呢,因為這個風格特別多不同的翻譯名,如果只看中文資料有時候你不知道原來不同書籍中談的是同一回事。

          我列舉幾個常見的名稱,分別有“減少主義“、”極少主義“、”質樸藝術“、”ABC 藝術“跟”極限藝術“等,因為”Minimal“是極少的意思,所以不同的研究者根據理解作了不同翻譯。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          極限藝術雕塑作品

          這個藝術的特征是用極少的形式,極簡單的色彩,通過繪畫或者雕塑來表達一種周密的理念。

          “ABC 藝術“這個名稱要特別說明一下,因為 ABC 是拉丁字母表開始的字母,有簡單初步的意思,而且順口,所以在運動初期就有人以這個名字來稱呼。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          極限藝術繪畫作品

          在我們的講述內容中,統一以“極限藝術“來稱呼。

          大家對這個藝術相信比較陌生,因為確實是比較“脫離群眾“,史太濃可以列舉一個歷史作品拉近這種距離,那就是 1957 年在米蘭畫展上誕生的《純藍》,作者是法國藝術家伊夫·克萊因(Yves Klein)。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          克萊因作品《純藍》

          這個作品就是一張圖上鋪滿一片由克萊因自己混合的藍色,其它什么都沒有,但是這個藍色純凈得直擊心靈,藍得很理想,很絕對,展出后馬上引發轟動,克萊因跟他的藍色都一炮而紅,這個藍色就是后來大名鼎鼎的“國際克萊因藍”(International Klein Blue,簡稱 IKB)。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          伊夫·克萊因

          說到這里肯定還有朋友不甚了解,不過沒關系,這個“克萊因藍”誕生后曾經火遍過時尚圈,迪奧(Dior)、紀梵希(Givenchy)等大品牌都曾經推出過“克萊因藍”色的服裝設計。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          迪奧曾經推出的“克萊因藍“包包

          而在 2021 年時候,這個藍色又再復興,被不少設計師用于商業設計,比如知名設計師潘虎老師不久之前為植物醫生設計的產品包裝就采用了這個“克萊因藍”,效果非常驚艷。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          植物醫生的產品包裝設計

          克萊因當時的這個叫《純藍》的作品,就屬于一種極限藝術的一種。

          為什么產生極限藝術


          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          “至上主義”繪畫作品

          第二個端點就是在 1960 年代的美國,我們先從這里講會比較好理解,因為這個運動其實主要就發生在美國,在歐洲的影響都不算太大。

          如果一直有看史太濃「風格列傳」的朋友就清楚,1950-60 年代的美國曾經有過“抽象表現主義”(Abstractexpressionism)跟“波普藝術”兩個重要藝術運動,而極限藝術的誕生跟兩者密切相關。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          抽象表現主義風格作品

          此處順便多說一句「風格列傳」的正確“打開方式”,就是每一個篇章的內容雖然各自獨立,但應該順著時間線順序來看,這樣會更加清楚很多藝術風格的承接關系。

          因為極限藝術可以說就是針對抽象表現主義與波普藝術而發起的。

          極限藝術陣營中的成員認為,抽象表現主義僅僅是表達藝術家一種瞬間的感覺,太不嚴肅,而波普藝術更是刻意要打破藝術中的高低雅俗,是反藝術的行為,這兩種運動對于藝術發展而言都有著高度危害性。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          60 年代的波普風格作品

          當然,這是極限藝術陣營的看法,所以它的誕生就是要明確的反對前兩者,并消滅他們。

          極限藝術主張藝術創作必須通過精心設計,有周密計劃,而且作品必須是通過高度專業訓練形成的結果,類似抽象表現主義那種隨意性及波普藝術中的平庸商業感都是“垃圾“。

          有了戰略目標隨之就是戰術考慮,于是極限藝術的成員們就從 1910 年代時候馬列維奇創作的《白上白》這個作品中找到形式的靈感。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          馬列維奇作品《白上白》

          馬列維奇曾經說過:藝術不為政府與宗教服務,不描述行為歷史,僅僅表達客觀對象,表明簡單的客觀對象可以存在,不依賴于任何東西。

          這種理念被極限藝術者們十分推崇,聽上去也確實非常高端。

          因此至上主義這樣極其簡潔的表現形式就成為極限藝術的首選,由此可見極限藝術在反對“抽象表現主義”的時候,其實也是從他們的源頭“抽象主義”那里分割出來。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          馬列維奇作品《黑色正方形》

          這種關系真心不好理解,我舉個宗教發展的例子,比如天主教中曾經分裂出東正教,隨后又再分裂出新教,但三者的主張不相同,而且新教是因為反對前兩者而誕生的,大致這樣,也許還不夠貼切。

          極限藝術源自抽象主義還有兩個佐證,就是他們的思想根源除了靠攏馬列維奇,跟“風格派”(詳見「風格列傳」-風格派篇)中蒙德里安(Piet Cornelies Mondrian)的藝術思想也十分一致,蒙德里安認為藝術品被創作出來以前,必須在藝術家的頭腦中完全成熟。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          蒙德里安的風格派作品

          蒙德里安的繪畫藝術曾經被我們收錄進抽象主義的范圍進行講述,這里要補充一句,就是關于藝術流派之間的關系難以理清,通常每個研究者都只能是無限接近,或者說各自有一套歸納方法。

          另一個佐證就是很多極限藝術家之前就是搞抽象表現主義的,我們后面會介紹一下,這種情況太常見了,比如很多后現代主義設計師是從國際主義陣營中轉變的,超現實主義藝術家很多從達達主義中產生。

          我們在談抽象表現主義的時候講過一個分支,就是色域繪畫,其實跟極限藝術在形式上已經非常相似。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          抽象表現主義中的色域繪畫

          當然,極限藝術家們指責抽象表現主義與波普藝術的作品沒有思考是有些過分與不厚道的,等于說人家混飯吃,也等于一些甲方苛責設計師設計出品不上心一樣,這些其實都無法證明,只能是主觀感受或者是刻意發難。

          那么,極限藝術在抨擊他人的時候,自身的表現形式有什么特點呢,我們接下來看看。

          表現形式與奠基人

          其實馬列維奇的至上主義具有很理性的本質,簡潔圖形的背后都有嚴謹的數學與幾何思維,這一點就屬于極限藝術的理論基礎。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          馬列維奇

          他跟馬列維奇是老鄉,構成主義跟至上主義有著師承關系,意思是構成主義的一些思路源自至上主義,兩種風格基本上是并行發展的,而構成主義更偏向設計這個端口多一些。

          塔特林當時提出過一個藝術理念,就是:真實的空間感與真實的質感。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          工作中的塔特林

          這種理念跟至上主義一樣,都尊崇嚴謹的理性主義及數學思維,再形成審美品味,而且是一種比較曲高和寡的高度審美化。

          塔特林的這個理念后來主要體現在極限藝術的雕塑作品中。

          這里我想到了古龍小說中的小李飛刀李尋歡,他的武功特點就是不管對方怎么厲害,他都是一刀解決,所謂“小李飛刀,例不虛發”,沒有任何花哨的招式,一招致命。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          《小李飛刀》又名《多情劍客無情劍》

          確實是種深不可測的武功,這個時候我們再回看克萊因的《純藍》也許就是這種味道。

          但如果你讓我說清楚《純藍》到底表達了什么,坦白說不可能,我不認為除了作者之外有人有資格談作品的創作概念,如果談都是扯淡居多,賞析沒問題,可以談感受,或者揣摩作者想法。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          克萊因作品《純藍》

          但有一點可以肯定,克萊因調出這個顏色花的功夫費的心思不亞于愛迪生研究他的電燈泡。

          極限藝術正式的開始被定義在 1959 年,當時美國紐約的現代藝術博物館舉辦了一個畫展,一名 23 歲名叫法蘭克·史提拉(Frank Stella)的青年藝術家展出一張名為《16 個美國人》的作品。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          史提拉作品《16 個美國人》

          作品畫面空空如也,只是黑色畫面上有簡單白色直線條,非常耐人尋味,但產生很大影響,極限藝術第一槍就這樣打響,或者說浮出水面,開始逐漸形成流派與理論。

          這個風格另外還有兩位重要奠基人,分別是巴涅特·紐曼(Barnett Newman)及阿德·萊因哈特(Ad Reinhardt),兩人最初也是活躍于抽象表現主義陣營,后來投身到極限藝術的探索。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          紐曼與萊因哈特

          先說一下紐曼,他在美國屬于波蘭的移民,生于 1905 年,1922 年開始學習繪畫與藝術,1930 年代之后逐漸全職從事藝術創作。

          1948 年時候,43 歲的他創作了一張名為《溫曼一號》(Onement 1)的繪畫,畫面就是黑紅的底色上畫了一條橙黃色條紋,非常簡單,屬于極限藝術的潛伏期作品。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          《溫曼一號》

          紐曼從這個作品開始就一直以這種風格進行創作,他的作品尺寸非常大,而且幾乎都是一個底色上畫些橫線或者畫些豎線,然后就沒有然后了。

          所以當他在 1950 年開始搞個展的時候引發藝術評論界的批判,因為也有混飯吃的嫌疑,直到 1960 年代極限藝術理論體系逐步完善,而且有走紅跡象的時候評論界才改變對他的態度,轉而將他奉為極限藝術的大師。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          紐曼的極限藝術繪畫作品

          所以有時候,成也媒體敗也媒體,評論界有一部分評論家對藝術的評價常常見風使舵,針對自身利益出發,比如希望吸引大家注意力,就像如今很多吃“人血饅頭”的自媒體。

          不管如何,60 年代的紐曼成名了,然后他的作品影響另一位藝術家,那就是前面談到的另一位奠基人阿德·萊因哈特。

          萊因哈特比紐曼年輕 8 歲,生于 1913 年,早年從學習設計轉而進修藝術,1937 年到 1947 年期間都是抽象表現主義流派的成員。

          他的早期作品色彩鮮艷明亮,有著硬邊幾何的形式風格,有點像立體主義,也像風格派。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          萊因哈特早期作品

          1950 年代開始他就將自己的創作形式變得越來越簡單,比如將作品限制在單色范圍,而到了 1960 年代,因為紐曼的影響,他堅決投身于極限藝術的創作中。

          他的作品開始表現變得更加極致,大部分都是采用不同明暗程度的黑色長方形進行重疊,非常單純,如果用前些年比較流行的網絡語句來形容看他的畫,就是“看了個寂寞”。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          萊因哈特極限藝術繪畫作品

          萊因哈特除了創作之外,熱心于通過寫作及演講來推廣極限藝術,產生不錯的效果,所以大家將其視為極限藝術的奠基人之一。

          極限藝術與雕塑

          極限藝術除了在繪畫中表現,還有一個重要載體是雕塑。

          有些從事極限藝術的藝術家本身橫跨繪畫與雕塑兩個領域,其中最突出的就是法蘭克·史提拉(Frank Stella)。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          法蘭克·史提拉

          他被譽為美國最知名的極限藝術大師,原因在于他的作品有強烈個人特色,早期主要進行繪畫創作,隨之轉向雕塑與裝置,正是雕塑作品讓他成了大名。

          史提拉成大名的原因在于他反其道而行,不是采用“少即是多”(Less is more)的原則,而是“多即是少”(More is less),將作品做得非常繁雜。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          史提拉的繪畫作品

          這里很多朋友就奇怪了,那不是跟極限藝術中的“極少”產生矛盾嗎?所以史提拉是將極限藝術拔高到哲學高度,讓人產生深刻的思辨。

          情況如同硬幣的兩面,如果在一張白色畫紙上只畫上一筆黑色,大家的注意力就只集中黑色,但當黑色的筆畫不停增加,直到最后只剩下一小片白色底色時,大家則變成關注白色,所以“以少見多”變成了“以多見少”。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          史提拉的繪畫作品

          再比如一個人最開始只擁有一個專業身份的時候,他感覺很少,但其實因為這種少形成的專注讓他擁有更多,分別是專業領域深度上的多跟時間自由上的多,因為專業上的極致能讓回報更大,越到后面越輕松自如,能騰出更多時間放在生活。

          而當身份越來越多自以為擁有更多時,因為散焦反而讓收獲更少,疲于奔命失去生活。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          史提拉的繪畫作品

          舉個更現實的例子,當你買多一部車或者買多一套房子的時候,確實物質的擁有多了,但會相應產生一系列更多的問題,比如忙于車的停放、保養、改裝,俱樂部活動。

          擁有多一套房子就要多思考新的裝修,擺設,還不得不做更多工作還貸,所以這時候“多”與“少”讓人迷惑,根本無法分辨清楚到底是多還是少。

          史提拉在這方面最著名的雕塑作品是 1990 年創作的《梅杜莎之筏·之一》(法國浪漫主義畫家席里柯有同名作品《梅杜莎之筏》)。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          史提拉作品《梅杜莎之筏·之一》

          這個作品使用一個堅固的金屬支架,橫向支撐出一大堆支離破碎,纏繞在一起的金屬片、金屬線與金屬構件,看上去就是一團亂糟糟。

          史提拉對這個作品沒有作任何解釋,他說作品沒有象征意義,沒有隱喻,所有內容與思想都在作品本身,大家只需要觀察,這一點倒是很符合前面談到的塔特林藝術理念,就是:真實的空間感與真實的質感。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          史提拉的其它雕塑作品

          其他極限藝術的雕塑作品則跟主流的極限藝術繪畫差不多,都是用最少最簡單的形式進行創作。

          比如卡爾·安德勒(CarlAndre)在 1969 年創作的《鎂和鎂》(Magnesium-Magnesiumplain),其實就是用 30 厘米見方的鎂金屬以 6*6 的數量(有一個版本是 12*12)鋪在地上,簡單到不得了。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          安德勒作品《鎂和鎂》

          展覽過程中也沒設阻擋,所以經常有觀眾很自然的從上面走過,以為是金屬地板。

          安德勒的創作特點就是喜歡采用現成品以數學的韻律進行不同方式的組合、排列、堆砌形成簡單的雕塑,大部分是金屬片材、磚頭、木塊等。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          安德勒與他的雕塑作品

          還有一位知名的極限藝術雕塑家名為羅伯特·莫里斯(Robert Morris)。

          他在 1988 年時候創作名為《艾爾斯》(The Ells)的雕塑作品,其實就是三個 L 字形狀的鐵籠用非對稱的方法進行擺設。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          莫里斯作品《艾爾斯》

          莫里斯有時候也很喜歡采用圓形進行創作,這種幾何中最基本的形式被很多極限藝術家喜愛,因為圓形統一又簡單,同時具有飽滿的形式特點,他的作品常有這種元素。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          莫里斯極限藝術雕塑作品

          極限藝術的雕塑情況大致如此,余不一一。

          結案陳詞

          極限藝術其實發展到如今都仍然存在,但聲勢明顯變得比較弱,因為他主力反對的抽象表現主義及波普藝術都衰退了,等于也失去發展的著力點。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          現代家居中的極限藝術裝飾畫

          情況就如同商業市場,百事可樂需要可口可樂的存在,麥當勞需要肯德基的存在,所謂遇強越強,對手變弱甚至消失,也會讓自己也不再進步甚至消亡。

          我們如今還經常會聽到設計中的 “極簡主義”,其實并非完全一回事, “極簡主義”更多是種延展的設計概念,還是屬于基于功能問題為基礎的形式考慮,而極限藝術不需要考慮任何功能。

          今年最火的「克萊因藍」是如何產生的?聊聊背后的極限藝術

          極限藝術海報《皮爾斯怪獸公司》

          在一些概念海報,裝飾畫或者公眾裝置藝術中極限藝術仍然適用,至于怎么才能真正用好,這期分享相信一定對你有所幫助。

          文章來源:優設   作者:設計史太濃VS遠麥劉斌


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          如何把握好平面設計中的節奏感?

          資深UI設計者

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!

          如何把握好平面設計中的節奏感?來看高手的分析!


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:優設  作者:美工美邦
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          UI設計師如何高效支援Banner設計需求

          資深UI設計者


          為什么需要高效?


          當下互聯網進入以內容運營為核心的時代,市場競爭激烈,需要對于市場的熱點進行快速反應,持續迭代。不管是大廠還是小廠的UI設計師多多少少需要支援運營需求。U1S1 做簡單運營圖對于體驗設計方向的設計師來說,性價比確實有點低,一般難度較高的運營設計需求都由專業的視覺設計師來做,體驗設計師一般接到的都是比較簡單或者緊急的需求,這對于設計的能力提升來說是比較有限的,大量的時間被占用在運營設計上,持續被榨干,有些本末倒置,但人生就是這么操蛋,總得想辦法解決。



          Banner構成拆解


          就目前大部分互聯產品的Banner而言。

          其構成一般由標題文案、主體元素(人物、物品等)、背景(場景、底色等)元素構成。



          模板化沉淀


          面向設計師:模板化運營設計 + 素材資源同步盤

          第一種方法是本文的核心方法,原理很簡單,其實就是利用Sketch和或者Figma的組件化(為了統一語義本文統一稱為組件,其子集為用例)進行設計。

          我們將這些元素分別打包成組件.



          把組件的用例調整后放置在預覽區所有不同尺寸的畫板中。

          當出現需要特殊調整的時候可以解綁微調。如果希望給畫面添加一些細節的話,再另外添加即可~


          這么一波操作,大概1個多鐘就可以輸出一整套7個圖,足以應付一周22套運營圖的需求了(悲傷的故事)


          當然要達到這種速度還需要一個通用素材庫的加持??臻e時間把一些KV的圖素拆出來放到Eagle共享盤,這樣你和你的小伙伴們就可以高效愉快地拉圖了...



          面向運營同學:創客貼等第三方設計平臺

          在創客貼搞個團隊模式,然后設計師把常用的一些模板上傳上去,運營同學只要自己改改文案,換換人就可以啦



          設計規范制定


          雖然有了模板化的設計工具,但如果缺少了設計規范的引導,就會宛如脫韁野馬,設計出各種偏離業務需求或風格不一致的Banner出來。

          設計規范需要與運營同學共同協商制定,比如標題最長長度、排版構圖、圖素尺寸等等。具體規范需要根據不同的業務需求進行定制化。

          下面就以我們團隊的制定方式作為范例說明一下。



          排版構圖

          常規的排版構圖模式有居中式構圖、左右構圖。

          居中式構圖:居中式構圖是將主體放置畫面的中心進行構圖。這種構圖方式這種構圖方式的最大優點就在于主體突出、明確而且畫面容易取得左右平衡的效果

          左右式構圖:左右構圖將文字標題元素和主體物按照比例分割進行位置安排。符合用戶閱讀習慣:閱讀視線要符合用戶從左到右或從上到下的瀏覽習慣。



          尺寸

          Banner的尺寸需要根據UI界面的需求進行制定。

          例如針對我司的產品,一個活動最多有7個運營位的樣式,分別在首頁、搜索位、文章封面、活動中心、閃屏等。


          標題長度限制

          由于運營同學有時候對于標題的長度沒有經過精簡優化,標題特別長長長長長長長長,加上Banner本身就小,在手機屏幕上基本看不清,也就沒有意義了。因此需要共同制定好主標題副標題長度限制,超過就直接打回重改。


          出血設置

          制定出血位的原因是某些尺寸的圖素可能出現在多個不同的入口,以及不同尺寸的手機屏幕可能會出現裁剪的現象。



          視覺走查


          不論是設計師也好,運營同學也好,完成設計之后最好建立一個視覺自查表進行對照,目的是盡量減少一些原則性錯誤,減少來回改稿的情況。



          流程化閉環


          為了更完美的提升整個流程效率,不僅需要升級中部流程,前后端的流程都需要進行優化。

          首先是最好在需求的前端建立需求排期表進行需求的篩選。

          分門別類地將需求的詳細信息進行可視化展示,對應的需求文檔接入。這里不得不吹一波飛書文檔,太**好用了。

          針對需求的后端即設計交付環節,最好是在設計稿導出的時候使用工具進行壓縮,更小的體積意味著更快的加載速度,這對于提升產品的用戶體驗是毋庸置疑的。這里推薦2個工具:

          1.imageOptim

          2.Picdiet https://www.picdiet.com/zh-cn (個人推薦JPG使用這個網站,壓縮的質量最高)


          總結


          最后,如果實在人力不足的情況下,就把項目外包出去吧,畢竟占用UI設計師太多時間產出如果沒什么價值的話,其實roi也是很低的,設計師的人力成本也是錢!

          “能用錢解決的問題,就用錢解決!”—— 魯迅

          如果運營經常提出很多無理的需求,比如量很大,沒有什么依據都是拍腦袋想的,那可以考慮把項目外包出去,一旦外包出去,花的就是真金白銀,讓運營也知道,這是設計師嘔心瀝血畫的,市場的價格就擺在那,整天搞些有的沒的是否真的能對項目帶來價值。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷  作者:坡安Chris 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          全面剖析視覺專題設計

          ui設計分享達人

          本文做設計探討交流分享,不涉及商業,如有不足多多指教。 其中的優秀案例、插圖部分來自站酷、花瓣和百度(詳情請查看原鏈接)僅供參考學習。 

           本文從“視覺專題設計簡述”也就是視覺專題設計的基礎理論、“專題設計思維養成”就是總結一些常用的設計前期思維方向如何找到和“案例參考”三個部分構成。

          首先是視覺專題設計簡述:  

          大家有知道”視覺傳達藝術設計“專業吧,這個作為大學藝術設計專業中的一種(Visual Communication Design)是為傳播特定事物通過可視形式的主動行為。大部分或者部分依賴視覺,并且以標識、排版、繪畫、平面設計、插畫、色彩及電子設備等二度空間的影像表現。總之就是針對眼睛可以看到的具備美學影響的設計符號,稱之為“視覺傳達”。 

          視覺設計的領域很廣,總的大致分為7種,所以印象中視覺傳達專業的同學會的都挺多!??!哈哈哈 

          字體設計、標志設計、 插圖設計 ,這三種就是字面意思,大家也常接觸就不做文字說明。 

          而下面這幾種,我用括號內的文字做區分說明。

          編排設計(文字、圖像、圖形、廣告招貼、書籍等編排設計) 

          廣告設計(主題、創意、語言文字、形象、襯托等要素組合進行平面藝術創意的一種設計) 

          包裝設計(綜合運用自然科學和美學知識,為在商品流通進行的包裝造型、結構、裝潢設計) 

          展示設計(主體為商品,在既定的時間和空間范圍內,對展示空間的創作過程)

          當視覺設計前面加兩個字,“視覺專題設計”,這個就是將視覺設計加了限制條件,是針對產品某個主題活動,以特定風格傳遞產品想要表達的信息,為提高產品轉化率,達到流量、曝光、口碑收益的運營設計。 

          如果說需求方讓你只是做一個視覺設計,那么他們的需求就是為了能夠準確傳達信息,有些童鞋做設計過于自嗨,沉浸自己的設計風格中,沒有get到需求方一個簡簡單單的想法,他們只是想要傳達信息,所以給出合適的信息展示就能完成,而設計圖片的美感只是錦上添花,你說他們的審美不過關,也能否先反思一下自己的設計圖是否能讓別人不思考就看懂。如果他們要求是一個專題設計,這是為品牌服務,最后落腳點是品牌,那他們需要的就不僅僅是個美感、信息傳遞、突出符合產品自身的調性,以及帶來流量的設計才是他們想要的目標。

           因此想要做好一個視覺專題,不妨倒推一下整個專題設計的目標: 

          1. 流量增長(當今最具價值證明,數據說話) 

          2. 曝光增加(好的壞的,只要有,就有熱度,就有話題,區別同類的“臉盲”) 

          3. 口碑更好(毫無疑問對品牌屬于積極正面的影響) 

          4. 帶來收益(前三條都是為這條準備,收益才是王)

           所以當我們產出一個設計任務時,可以從以下4個不同層次的設計把控點來,反思調整自己的作品:  

          首先,基礎層級是傳遞出準確的信息,也就是這個信息是能被人識別讀懂(如果一個視覺專題設計產出除了設計師本人能看懂,其余人不明所以,那么只能說明這個設計夠“藝術”不夠“過關”); 

          其次,高一點的層級就是除了能準確傳遞正確的信息以外還能包含一定的信息量,說明這個設計傳達出不止是一點有效信息; 

          再來就是“視覺效果來源于匹配程度”,意思是看完這個設計我能夠聯想或者關聯到一些和他相關的信息事物,證明此設計傳達出了準確有效的信息還能讓所有信息,規律的結合,成為觀看者聯想起過往瀏覽過事物與之匹配的事物; 

          最高一層就是視覺與信息的唯一匹配,這也就是我以后看到這個設計就只會想起某個特定品牌, (例:看到少了一塊的蘋果圖片,一定會想到“喬布斯的蘋果公司、他的手機等”;看到一定會想到“騰訊公司的QQ企鵝”)


          市場固定資源有限,想要瓜分到一口蛋糕, 現在每個企業都需要一定的專題設計來提升自己品牌的影響力,借機造勢,作為企業形象與美譽度的提升突破口,結合各種銷售玩法達到目標。

           企業發展的不同階段對專題設計的要求也是不同,起初需要一個視覺符號來代表,讓大眾記住公司,這也是初期階段受美學影響,各個公司和企業都想要注冊商標;隨著時間變遷企業的發展和轉型需要,誕生了一批品牌符號,也就是我們常說的IP形象、文創、動漫、虛擬智能人工等等,這些是受營銷思維主導催生的視覺設計產業鏈;最后能扛住時間檢驗,并且讓自己的企業視覺設計做到極致,成為為社會文化審美的標桿,推動風格潮流的風向,就成為了一種特定的文化符號,這是所有企業向往的方向,也是最難成就的頂端。當我們能在制作自己的專題設計時,包含企業所想,那么你一定是個格局大家!

          接下來是講述思維養成的一些方法:拆解需求——了解清楚現在的事實、目前商業需求的背景,收集通常這樣的需求在市場上的視覺風格,分析定量現狀和定型現狀,從而推導出商業假設,得出用戶體驗目標,反復推敲找出設計發力點。    


          定量屬性是指以數量形式存在著的屬性,并因此可以對其進行測量。測量的結果用一個具體的量(稱為單位)和一個數的乘積來表示。以物理量為例,距離、質量、時間等都是定量屬性。

          定性是指通過非量化的手段來探究事物的本質。其概念與定量相對應。

          定性的手段可以包括觀測、實驗和分析等,以此來考察研究對象是否具有這種或那種屬性或特征以及它們之間是否有關系。

          定性研究是與定量研究相對的概念,也稱質化研究,是社會科學領域的一種基本研究范式,也是科學研究的重要步驟和方法之一。

          如果說定量研究解決“是什么”的問題,那么定性研究解決的就是“為什么”的問題。

           專題設計一般分為三類:活動、信息、組合;確定好自己的設計類型,

          活動類專題設計——時效性強整體活動時間短、活動類主體利益針對人群、設計調性喜慶,通常大紅色,

          為了達到想要的商業回饋,爭取利益點,主要信息簡單明了; 

          信息類專題設計——活動周期可循環、活動類主體利益是產品、設計調性多數貼合品牌性質,為了

          穩固原有商業形象、讓品質再次提升,拉近與用戶的距離,多數采用品牌的ip或者文藝的插畫來凸顯溫馨; 

          舉例為“京東618”和“face u”、“支付寶 花唄”、“飛豬旅行”各有特色 

           

          信息組合類的專題設計——活動周期可長可短,也沒有特定的時效性,既包含活動類的特點,也包含信息類的特點。它的定量現狀和定性現狀都可用不同場景區分。從舉例就可看出, 

          “阿里巴巴云棲大會”、“成都國際設計論壇”、“臺北燈光節”、“海信發布會” 主視覺海報——

           思維方式2是分析構思: 

          團隊的小伙伴一起頭腦風暴,發散思維寫出與主題相關的,盡可能的多寫,然后再根據意向分類,提取出自己關鍵詞匯,結合詞匯在腦海產生的視覺元素,整合篩選定好方向

           方向定好后,我們就要選取如何通過創意與表現,來實現專題設計讓人記住。 

          常見的創意方法,通過流行的表現風格做視覺呈現,如三維立體、手繪插畫、賽博朋克等;

          通過獨特風格、操作難度高、技術含量大的表現手法做視覺呈現,如手工塑造、超寫實還原、概念模擬等; 

          通過具有情感化設計的圖文做視覺呈現,圖文具有強有力共性(例如“杜蕾斯文案”、“江小白酒情懷”堪稱文案絕絕子······)通過動畫實現等等···· 

          而表現從淺至深就是,引導——刺激——價值 

          ?

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          文章來源:優設 作者:YiVi_eleven

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          五步提升你的版面精致度

          資深UI設計者


          首先,我們怎么去理解在作品集版面中的“精致度”。我覺得可以將其轉化為“質感”,“細節”,“細膩”這樣的詞匯。其實“精致度”不足這個問題大部分同學也是能有所感知的,只是不知道哪里出了問題,也就無從下手。當然還有一小部分同學,可能并不覺得自己有什么問題,也無法體會修改前后的差別,這樣的同學,我建議你平時應該多看一些優秀的設計作品,多沉淀一下,這樣的方式對你幫助更大。


          很多同學經常把“精致度”理解為形式感不夠,或者是不夠酷炫,這么理解是不準確的。這就好像一個產品,它的精致和它的外觀設計并沒有什么直接聯系,而是更多的取決于這個產品的做工和材質。做工體現在接縫的處理,邊角的打磨等等,而材質決定了其質感的好壞。那么同理,版面的“精致度”實際上和你的設計感也是沒有直接聯系。那么從哪些方面體現版面中的“精致度”呢?我結合自己的經驗總結了以下幾個方面:

          1.舒適的間距。一個合適的,讓人舒適的間距特別重要。無論是文字與的,或者說認為不重要的事情。混亂的,不統一的,不舒適的間距會讓版面變的排布變的無章,這就好像一個產品各個部件的拼接接縫大小不一,會導致“精致度”下降。

          2.大小比例。版面中所有元素的互相之間,以及相對于整個版面的大小比例問題。這個也是非常重要的一個體現“精致度”的地方。所有內容都過于傻大粗,無疑會讓版面看起來非常粗糙。

          3.層次感。層次感實際上是一個非常好的提升質感從而體現出“精致感”的手段。缺乏層次感的版面會顯得非常的寡淡,以及在內容較多時可能會在視覺上造成較亂的感覺。那么如何提升層次感,主要是靠對比的強弱。比如:深與淺,粗與細,大與小,疏與密等等。

          4.字體。選擇一個精致好看的字體,對版面的精致度有一定的提升,不過還是要注意,字體的與版面之間的大小比例要注意。


          5.配圖。配圖的質量也一定程度上影響了版面的精致度。無論是你自己做的圖,比如分析圖,效果圖等,還是你網上找的圖,如參考圖等,都很大程度上決定了你這一頁的精致度。


          通過以上幾點的提升,我相信你的版面“精致度”一定會有較為顯著的提升,而版面效果也會看上去更為高級。不過這里還是要再次提醒,精致度和設計感是兩回事兒,如果只有精致度,而設計感較差,那也是不行的。希望本期的內容對你的版面有所幫助。


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png


          文章來源:站酷   作者:馬克筆留學設計

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          掌握好「視覺重力原則」,構圖的奧秘很簡單!

          資深UI設計者

          掌握好「視覺重力原則」,構圖的奧秘很簡單!(超多案例)

          生活在地球上的我們,每時每刻其實都在感受著重力的存在。除了物理層面的影響,重力是否會改變我們對于視覺畫面的認知呢?又或者說,物理學中經常聽到的重力概念,和設計中的構圖、排版又存在著怎樣的關聯呢?

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          我們或許能夠從格式塔學派對認知心理學的研究里,尋找到一些蛛絲馬跡。

          人們的大腦總是會去腦補眼前看到的事物。就像我們看到的這三個被遮擋住的圓形圖案,位于中心的倒三角雖然沒有實際出現,但我們確實認為它是存在的對吧。

          掌握好「視覺重力原則」,構圖的奧秘很簡單!(超多案例)

          視覺本身是很容易被周圍環境影響的,就像我們現在看到的這個畫面。如果忽略掉空間和透視的話,你還會覺得右側的豎線更高嗎?

          而實際上的情況是,左邊的豎線高度要遠遠高于右邊的豎線高度。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          再看這個例子,兩側位于中央的白色球形,它們之間,誰看起來更大,誰又看起來更?。恳苍S有的朋友會說左邊更大,這個答案是沒錯的,但它也僅僅是看起來更大而已。

          如果我們在畫面中拉出兩條輔助線,我們就會發現,原本右邊看起來更小的圓球,要比左邊的圓球更大。

          通過剛剛的幾個小測試,相信大家已經對于用眼睛的判斷能力有了一些認識了,是不是有一種眼見不一定為實的感覺?視覺重力原則,其實就是建立在這樣的認知基礎之上的。我們大腦所認為的重心或平衡感,和真實的情況,往往并不相同。

          在做版式設計的時候,我們的構圖越接近重心的平穩狀態,就越會激發和諧的美感。因為重力在自然界中是再平常不過的現象了,生活在這樣環境中的我們,自然也會有這種審美上的傾向了。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          我們來看這個例子,這張紙最穩定的位置在哪里呢?答案是它的正中心。

          我們把信息添加在頁面的中心位置,現在它看起來更平穩了嗎?然而并沒有,可問題出在哪?一定是我們沒有把文字擺正吧?上方的區域(a),看起來要比下方的區域(b)面積更大一些,真的是這樣么?

          掌握好「視覺重力原則」,構圖的奧秘很簡單!(超多案例)

          可實際上,文字確實是在頁面的正中心位置上了,這同樣我們的眼睛在作怪。

          所以為了抵消視覺上的這種墜落感,我們需要將文字略微向上移動,這樣我們看這段文字才是真正居中的。

          正向

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          我們再舉個例子,這是一個數字 8,我們來仔細觀察一下它的造型,頂部與底部的負空間看起來是一樣大的對嗎?

          垂直翻轉

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          而事實上并不是這樣的,通過將它倒置,我們就會更明顯的看出來,其實為了抵消人眼的錯覺,我們在做字的時候,需要將上面做的更小,底部做的更大一些。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          這是兩個完全等大的黑色圓形,但它在視覺上其實并不是平衡的,人們的眼睛會覺得右邊更輕,這雖然沒有頂部和底部那么明顯,但也確實存在。那么解決的方法就是將左邊的圓形略微縮小一些,現在這個頁面看起來平衡多了。我們總是會下意識的認為左側要更重要些。

          掌握好「視覺重力原則」,構圖的奧秘很簡單!(超多案例)

          ? 畫作:The Creation of Adam

          看這幅畫,很明顯左側的內容要比右側更少,可如果我們將它鏡像翻轉過來,它原版的平衡感就會被打破了。人們更多會認為左邊看起來更重了。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          同樣的,在我們的漢字設計中,也會應用這種做法,比如林字的兩個木字旁,就并不是左右等大的,因為這樣在視覺上會顯得不平衡。所以需要將左側的偏旁削弱,才會在視覺上看起來更加和諧。

          掌握好「視覺重力原則」,構圖的奧秘很簡單!(超多案例)

          具有左右結構的漢字,基本上都遵循了這個原則。形成了左收右放的構成樣式。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          漢字“田”的中心十字筆畫,為了看起來是居中的感覺,實際上也特地微調了文字的重心部分。利用輔助線,我們會更容易察覺到這其中的變化??梢钥吹?,橫筆部分,向上移動了很多。豎筆部分也相應向左做了位置上的調整。

          人們常說,細節決定成敗。也正是這些不起眼的細節,拉開了專業平面設計和業余設計師之間的距離。相信看到這里的小伙伴們,應該已經領略到了視覺重力原則在設計中的重要地位了。那么光知道有這么一回事兒可不行,我們更應該去了解它的特點,以及嘗試著去掌握它。

          我們看到的所有圖像,無論抽象的還是具象的,其實都是具有重量感的。那么都有哪些因素會影響到視覺重力的大小呢?找到視覺重心之后,我們又要怎樣去利用它們?接下來我們就一起去尋找相應的答案。

          掌握好「視覺重力原則」,構圖的奧秘很簡單!(超多案例)

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          色彩對視覺重量有影響嗎?我們看畫面中的這兩個圖形,是不是很明顯感覺到右邊更重呢?黃色的色相本身的視覺明度就要比藍色更淺,所以我們會感覺到右邊更重。

          為了抵消顏色對視覺重量的影響,我們需要降低藍色的面積,這樣才能讓兩個圖形看起來是平衡的。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          那么換成具象的物體呢?道理其實也是一樣的。我們依然可以把它們看成是純粹的色彩。經過這一步分析,我們是不是發現了左側紅色的蘋果,顯然會更深和更重呢?

          所以,為了保持左右的平衡感,我們也需要把紅色相應的縮小一些。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          我們看這兩個圖形,它們誰更重?左側的八邊形,它的頁面邊緣更復雜,角度變化也更多,所以承載了更多的信息量,相比正方形更簡潔的造型來說,左側會更重。

          掌握好「視覺重力原則」,構圖的奧秘很簡單!(超多案例)

          那么換成大小相同的秤砣和棉花呢?誰更重?幾乎沒懸念了,棉花完敗。當具象的物體出現時,結合以往的視覺經驗后,誰更重誰更輕也就很顯而易見了。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          掌握好「視覺重力原則」,構圖的奧秘很簡單!(超多案例)

          對齊也需要考慮到視覺重力嗎?如果你也有這種疑問的話,接著往下看。這是兩個馬克杯,它們雖然造型類似,但是色彩卻不同。很顯然藍色的版本會更重,而在位置上更靠近左邊,也就顯得更重了。

          所以,為了抵消這種重量上的輕微不平穩,我們可以把顏色更淺的橙色放到左側的位置上。這樣雖然色彩上橙色更輕,可由于它的位置更重要,也就不會給人不平穩的感覺了。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          那么構圖基本確定之后,我們為這兩個杯子搭配上一段文案信息。這樣兩個商品的展示也就做完了。你發現這兩個組合出現什么問題了嗎?當文字信息加入到頁面之后,是不是覺得哪里不對呢?

          電腦是看不懂圖像的,所以用到對齊命令時,它們會圍繞著像素的邊緣去做對齊??蓡栴}在于,并不是所有圖片的視覺重心都剛好在方框的中間位置。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          所以我們要去修改的地方,也正是這個視覺重心的對齊位置?,F在再看這兩個組合,是不是感覺和諧了很多。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          當西文和漢字相互組合時,需不需要考慮到視覺重心的對齊呢?我們看,如果僅僅是依據邊緣進行對齊的話,就會讓西文部分看上去很小。而正確的做法是需要我們忽略掉一些文字邊緣的。

          分別找到兩組文字的視覺大小。只有這樣,才能讓兩組文字在視覺面積上達到相同的重量。當然,文字字重部分也是需要做出相應匹配。我們看,經過調整后,中西文的搭配明顯要更加平穩了。

          掌握好「視覺重力原則」,構圖的奧秘很簡單!(超多案例)

          但也是有例外的,比如這個例子,明明是按照之前的調整方式,僅僅是更換了文字的內容。為什么它看上去依然沒有對齊呢?這里的問題其實出現在西文部分,有些單詞組合,字母并沒有占據下伸部的空間。所以在整體上,就會顯得有高低的錯落感。

          這種情況,當然就需要重新去匹配了。解決方法依然是對齊文字之間的視覺重心部分。所以,方法并不是死記硬背的。我們需要根據不同的情況去做出有針對性的調整。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          接下來我們來做一個包裝的案例。它是一個螃蟹口味的海鮮調味料。首先,我們選擇這個手繪的螃蟹作為這個畫面中的視覺焦點,把它放在版面的中心位置。經過前面的學習,我們知道了,選擇對齊元素時,我們要忽略掉那些細枝末節的部分,才能找到真正的視覺中心位置。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          找到了視覺重心后,我們把它安排到頁面真正的中央部位。頂部和底部的空間,我們就繼續調整其他的信息。首先從層級上來說,在頁面頂部我們需要一個相對第二大面積的文字組合。

          掌握好「視覺重力原則」,構圖的奧秘很簡單!(超多案例)

          而其余的元素,圍繞著底部的負空間去排列就可以了,到這里這個包裝也就做完了。

          無論是版式設計,還是繪畫攝影,構圖從來都是一個講究的事情。想要做一版在視覺上平穩的版面,最簡單的辦法,就是把主體固定在頁面的中心位置??墒沁@種對稱的設計,由于太過完美,也多少會給人一種單調和乏味的印象。那么有沒有一種既讓頁面保持平衡,又能在結構上做出變化的設計方法呢?這就引出了我們接下來的內容了。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          掌握好「視覺重力原則」,構圖的奧秘很簡單!(超多案例)

          這個案例,屬于網頁中會出現的廣告頁面。首先,如果我想要讓版面達到平衡狀態,就需要把主體的重心安排在頁面的中央位置。

          掌握好「視覺重力原則」,構圖的奧秘很簡單!(超多案例)

          但是,為了讓頁面中加入更多信息,我們也不得不讓主體向頁面的一端靠攏,從而預留出足夠的空間。

          可這樣就導致了頁面的不平衡,左側的文字重量并不能平衡整個版面。

          掌握好「視覺重力原則」,構圖的奧秘很簡單!(超多案例)

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          其實,解決的辦法也很簡單,我們可以試著將主體略微移向頁面的中心部分。這樣一來,就實現了一種動態的平衡狀態。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          這背后的知識其實很簡單,就是最基本的杠桿原理。如果天平兩端并不平衡,那就讓更重那個的靠近中心,更輕的遠離中心。這樣也就恢復到平衡狀態了。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          這同樣是一個網頁中會出現的廣告頁面。我們看,它都出現了哪些問題。版面中所有的元素都集中到了頂部,這就導致了頁面底部重量過輕,頂部重量過重的極端對比。也就是我們俗稱的頭重腳輕。那么經過調整之后問題依然存在。過多的空白,會讓人們感覺這個版面作品沒有完成。所有的重量都集中到了版面的左側,這依然是一個極端的構圖。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          正確的做法應該是怎樣的呢?我們可以將重量最大的元素安排在中心位置。并且讓其他元素以對稱的樣式排布。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          當然,你也可以將信息放大,和原本的圖像進行一個疊壓組合,形成一個更重更大的整體。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          又或者,采用頂部圖像,底部文字的做法,讓頁面中的重量分配均等。

          掌握好「視覺重力原則」,構圖的奧秘很簡單!(超多案例)

          反過來也是一樣的,頂部安排文字,底部安排圖像。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          再或者,我們可以將信息安排在頁面的左側,形成左字右圖的配置。這樣的構成,有助于人們第一眼發現你想傳達的信息。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          而反過來呢?圖像就成為了更重要的那個。人們會先看到圖,然后緊接著去閱讀相應的文字信息。

          到這里,我們分別從細節的刻畫,再到元素的重心對齊;又從視覺重心的動態調整,一直講解到了宏觀頁面的構建思路。我們可以看到,視覺重力原則幾乎滲透了整個設計流程。很多時候我們其實并不缺乏理論知識的武裝,可一到自己實際動手,就馬上繳槍投降了。矛盾點還是出在對理論知識點靈活運用上,接下來我就帶著大家再做幾個案例。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          打算做一套大米的包裝設計。產品的名字就叫高山巖米。它長什么樣子呢,就像我們現在看到的這樣,類似葡萄干一樣,和我們平時見到的大米顏色是有一些區別的,據說營養價值很高,也被譽為米中黃金。

          我想利用圖形的切割來表現這個巖米的部分。同時,在輔助一個篆書結構的山字,以這樣的圖形來體現這個主題內容。并且,我也希望這個大米的部分是鏤空的,能夠透過它看到真實的米。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          主視覺的刻畫差不多后,接下來我把它放到包裝上,并且將其他信息也一并加入到版面里。不過這樣一來,信息和主視覺相互疊壓,對于內容來說可能會有些相互干擾了。所以我們來試著編排一下。到這里,好像出現了我們前面提到過的問題了,那就是,整個布局顯得頭重腳輕了。

          掌握好「視覺重力原則」,構圖的奧秘很簡單!(超多案例)

          接下來再試著調整一下?,F在我們把底部和頂部的空間都占據了,同時也預留出了三分之一的留白,這該不會有什么問題了吧。相信看到這里的小伙伴應該都能看出問題了,那就是這樣的配置確實有些左重右輕了。留白可以有,但絕對不是這樣做的。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          除了我們之前提到的上圖下字,或者是左圖右字之外。我們當然也可以綜合的應用它們。我們現在這個構成,其實就是一種全包圍的結構。

          掌握好「視覺重力原則」,構圖的奧秘很簡單!(超多案例)

          又或者,將一部分內容放在底部,而主要去刻畫上方的文本樣式。這就形成了類似半包圍的結構。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          如果說之前的版本是上下樣式的半包圍構成的話。那么接下來的這個構圖,就是融合了重心動態布局的左右樣式半包圍構成了。

          掌握好「視覺重力原則」,構圖的奧秘很簡單!(超多案例)

          當我們不知道怎樣去安排版式構成時,視覺重力原則就成為了一個很好的參考依據。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          我們再做一版活動海報。畫面中出現的各種電器,都是經過退底處理的。這樣的處理,能夠讓它們毫無違和感的出現在同一個頁面中。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          在頁面的部分,我加入了這個活動的具體內容。展覽的主題叫《模塊世界展》,是著名設計師迪特拉姆斯的個人展覽。

          掌握好「視覺重力原則」,構圖的奧秘很簡單!(超多案例)

          拿到這樣的內容時,最保險的做法就是讓頂部的圖片成為一個更大的組合。上圖下字,很平穩,也很保守。

          我們可以看到,圖片部分,我盡量將它們還原成了現實中它們本來的比例關系。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          或許,我們也可以再換一種思路,相對的更突破一些。將圖片通過顏色劃分成組。我們能夠看到,其中有全黑的,也有彩色的,更有白色的。

          掌握好「視覺重力原則」,構圖的奧秘很簡單!(超多案例)

          除了像剛剛的堆積到角落,我們也可以把圖片組合規劃成對角線的樣式,在這樣的形式下,版面構圖依然是平衡的。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          我們當然也能讓圖片組合劃分成一個更大的組合,以及一個更小的組合。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          又或者,打亂圖片的順序,完全依據視覺重心去匹配其中的位置關系。

          掌握好「視覺重力原則」,構圖的奧秘很簡單!(超多案例)

          最終,我決定從展覽的主題中尋找突破口,以“錯位”的手法去呼應“模塊化”這個概念。不僅僅是文字部分的錯位和拆解,圖片部分也通過硬邊的投影,形成了一種嵌套于版面中的視覺印象。

          掌握好「視覺重力原則」,構圖的奧秘很簡單?。ǔ喟咐? loading=

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          文章來源:優設   作者:研習社

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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





          信息可視化是什么?

          資深UI設計者


          今天我要和大家介紹的這位設計師,他在業內被譽為是“信息可視化設計”領域的天花板。一提到信息可視化這么高大上的詞,相信大家都多少有些了解,在日益復雜的信息交流活動中,將信息圖表化已經是一名設計所必須掌握的技能之一了。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          舉些常見的例子,比如在公共場合中,我們看到的交通標志,以及用來顯示地理位置的地圖、將時間具象化的時刻表等等,這些數據都以某種圖形化的形式呈現在我們周圍。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          而信息可視化領域也不僅僅是將簡單的數據繪制成圖表那么簡單,比如要弄清楚社會中隱藏著的各種問題,從而促進新觀點的提出和對問題解決的思考。這種并不以信息為主導,而是著重于根據創建者的主題來選擇要傳達的信息,并尋求接收者的主動解釋。

          而我們今天要介紹的這位設計大神就是這個領域的專家

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          △ 中野豪雄 TAKEO NAKANO 圖形設計師

          1977 年出生于東京都。武藏野美術大學畢業,師從著名設計師勝井三雄。2005 年設立中野設計事務所。以信息的構造化和上下文的可視化為主題,在各種領域探索圖形設計的可能性。日本 typographic 年鑒大獎賽,同最佳作品,造書裝幀比賽經濟產業大臣獎等獲獎。入選世界海報三年展和拉哈蒂國際海報雙年展等。作為邀請作家參加了國際泰晤士報雙年展“首爾 2011”。文藝博物館永久收藏。武藏野美術大學、多摩美術大學教授。

          咱們先來看看中野老師平時的作品都長什么樣吧!

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          是不是很厲害!但說實話,這種信息的密度,工作量絕對是巨大的!而在一些訪談中,中野老師也明確指出,自己更傾向于采用更宏觀的視角去做設計,因為這樣不僅能夠達到傳達目標,同時也由于對比的存在,進而產生嶄新的視角。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          圖中我們現在看到的信息可視化海報,是 graphic trial 2015 的一次展覽。老師一共設計了五張 B1 大小的凸版印刷海報。內容是關于地震的四年時間里,哪些話題被人們報道直到事件完結,然后回歸到日常生活中。以及在大數據為主的信息社會中,思考有關制作印刷物的意義。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          人們在地震發生時,所接受到的信息,就像圖中展示的這樣,是從喧囂到日?;耐埔坪脱葑?,老師會考慮到,促進這個過程的因素和推動力是否能夠被可視化。從當代語言推動社會發展的角度去考察,想象著是否能將這個語言本身地圖話。從而建立起一個提供人們思考的平臺,這也是平面設計能否引發輿論爭議的關鍵。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          首先我們從信息收集的角度來向大家講解,這張圖是國立情報研究所的北本先生制作的數據圖,搜索關鍵詞是“受災地”。圖中折線展示的是,受災四年間,相關詞被搜索的高峰和頻率。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          接下來我們來看這張語言地圖是如何被延展出來的,常規情況下,我們形容時間的話,當然會使用線性的橫向時間軸。而中野老師的解決辦法,是將時間軸以環形的方式呈現,并且將起點與終點之間的差異可視化。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          五張海報,分別從受災后第一個月、半年后、一年后、兩年后以及四年后展開。呈現出由遠到近的視角變化,第一張海報中,展示的是受災后 31 天內的變化,逐漸到最后一樣,受災后 1460 天時,人們對于這個事件的關注轉變。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          老師從北本先生那里得到的數據,大概可以劃分成四個種類,分別是時間、主題的力度、語言關鍵詞頻繁出現的次數以及與東日本大地震的關聯度。時間就是剛剛提到的,以環形角度的方式呈現。話題的力度越高,就會離中心越近,反之就越遠。頻率則是按照關鍵詞出現的數量,以圓的大小來呈現。另外也通過顏色來區分與地震話題相關的詞語。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          △ 一個月,六個月,一年,兩年,四年

          最終就呈現出了這樣的畫面,首先這個項目是單人項目,所以合成這樣圖的工作量是非常巨大的,過程當中老師也請到了一些研究者對這個項目進行一些幫助。整個海報的重量據說非常重,拿起來大約有二十四千克。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          如果使用常規的四色印刷的話,也就需要利用青品黃黑去合成不同的顏色。不過這樣最終的效果并不理想。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          于是老師選擇了專色印制,也就是每一種顏色都單獨去印制一版。單獨印制一張海報,就需要反復印刷 16 版。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          其中的黑色,也就是全部 16 版疊壓到一塊的效果,可以說是黑中之黑了。當然這個黑色也是有所比喻的,也就是龐大的信息是無法單獨存在的,當所有信息混在一起,才能比對出彼此的聯系。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          第一張圖展示的是災害發生時的第一個月,畫面中展示了很多的圓圈,大部分都發生在外圓,也就是說當時各種各樣的搜索關鍵詞,與災害相關聯,被搜索的頻率非常高。在色彩的區分中,我們也能感受到相當強大的熱度。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          這是兩年后的情況,也就是說圓的一半就是一年,左半邊就是第二年,可以很直觀的看到,前半年使用的暖色是比較多的,當來到了后半年時,話題熱度逐漸冷卻的樣子。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          來到第四年的時候,也就是圓的四分之一是一年。右半邊展示的是過去來年的樣子,而左半邊就是又過了兩年之后的樣子。整個圖標展示的是起點“311”大地震動開始的日期,直到截止四年后的 3 月 11 日。

          可以看到暖色的部分逐漸變得零星起來。為什么會有這樣比較有規律的分布呢,那是因為暖色出現的位置都是所謂的紀念日,也就是人們會想起那次事件的日期。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          比如其中煙花這個詞,就是從災難過后才開始頻繁出現的,它代表了人們對于災難的一種寄托,人們期盼著生活能夠回歸正軌。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          這樣的可視化設計,意義在于人們能夠通過它,俯瞰全局,通過使用宏觀的視野來連接新的視角,讓人們意識到它們沒有注意到的觀點。各個詞語,會根據時間軸的變化與聯動,起到喚醒記憶的作用。通過這個設計作品投影人們過去的經歷。

          它是從整體到部分之間的一種信息差異。就圖的整體視角來看,它表示了“人們遺忘的節奏”,進而對遺忘進行批判。另外從圖的部分視角出發,它表示了“記憶的意外發現”包含了對回憶的期待。

          看到這是不是覺得中野老師很厲害呢。那么接下來,咱們再來看看他的成長經歷

          成為一名設計師的契機有很多,比如父母是設計師,或者是有看過一部激動人心的電影海報,想要成為一名從業人員??芍幸袄蠋熯x擇設計這個專業時卻完全不是這樣的。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          他選擇的了一種極度理性的方法,逐一排除自己不喜歡的東西。

          但這種做法本身就很難,最終中野猶豫著要不要選擇美術專業。始終沒有鼓足勇氣的他,還是向附近的預備校老師請教了這個事情。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          聽了中野的情況后,老師的評價是,他覺得中野很適合平面設計這個專業,還問他要不要試試呢?

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          因此在報考志愿里,中野寫下了武藏野美術大學和多摩美術大學。如果按照主角光環的劇本,這個時候,中野老師應該就已經平步青云,從此走上人生巔峰了。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          然而現實卻是,在第一次考試中,他卻落榜了。作為“差生”的他,周圍都是什么樣的人呢?插畫、攝影甚至編程,這樣的擁有特殊技能的人幾乎占據了大多數。在這樣的環境里,中野老師當時卻并沒有什么特別的特長,對于不善于表達的他,在當時感到很無奈。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          那時的他一直在問自己。我的特長是什么?我的興趣點是什么?有次散步的機會,他終于得到了靈感。那就是雖然自己沒辦法做出特別厲害的作品,但踏踏實實的繪制圖形卻是可行的。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          當意識到了這一點之后,于是在一次研究宋體(明朝體)的過程中,就產生了做一本書去記錄這段悠久歷史的想法。他想通過探索歷史的過程,去尋找屬于自己的興趣點。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          當從宏觀角度看待一段歷史的進程,通過推演,人們總能或多或少看到未來的一些可能性。通過研究書籍的過去,會發現最初的書籍形態起源與泥板,也就是說,從人類發展初期就存在了書的概念。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          就是這樣一步步的研究,信息的宏觀樣貌,如果從宏觀的視角來看待的話,會發現人們通常能夠了解到的信息其實并不多,當從更高的維度看到相同的事件時,是能夠展現出事物本質的。所以在之后做視覺圖表作品時,中野就開始有意識的展現從整體到局部之間的相互對照。

          我們接下來一起看看中野老師還有哪些精彩的作品吧!

          以信息結構和文章脈絡的可視化設計為主題,探索各個領域中平面設計的可能性。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          △ 這是中野老師從 2012 年到 2013 年期間,為建筑雜志設計的封面,因為是月刊,所以在兩年時間里,一共做了 24 本。

          雜志的內容主要和災害相關,比如第一版,是關于日本東北地區的一些內容、第二本是關于海嘯的內容,除此之外,還有關于建筑產業、能源、以及關于福島災難重建等問題。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          每本雜志都有各自的特征,數據來源主要由政府以及大學中的一些數據研究者們提供。當接收到這些信息之后,中野老師需要甄別哪些內容是需要保留的,哪些是需要刪減的。在這個過程中,不斷的思考”怎樣才能將這些數據清晰的傳達給讀者”這類問題。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          這個展覽是 2018 的時候,中野老師在印刷博物館策劃的一個天文學與印刷的展覽 。主要展覽的是 15 世紀到 18 世紀的書籍和印刷物。希望能夠以全新的視角,向大家展現天文學與印刷之間的關系。畫面中左上角的同心圓,是哥白尼提出的太陽中心說,從此人們開始以全新的視野觀察這個世界。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          這是這個展覽的宣傳單頁,博物館的宣傳單頁通常都是 A4 尺寸的,最初老師設計了八張相同的傳單頁面。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          隨后最終通過局部特寫的方式,構建出了八種不同的傳單樣式。如果全部收集完全,可以拼接成完成了一個大畫面。

          從天文學和印刷術之間的關系開始發展聯想,結合了天文學,哲學、數學等等一些學科,統一展現出了宇宙的這個概念。老師分別從三個角度思考這個問題,分別是“秩序”“整合”“規格”。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          如果把文字去掉,我們會看到這樣一張插圖,我們來分析一下為什么需要做成這個樣子。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          這里的橫軸代表著時間,豎軸代表著規模,畫面頂部展現的是關于宇宙的圖像,而下方主要以人的視角,展現了地球的圖像。學術本身是建立在各種各樣的理論之上,前人建立起的理論,可能會被后來者推翻重建,逐步形成了我們今天的天文學。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          這個展覽中會展示各種各樣的宇宙學理論體系,通過各種各樣的宇宙論,去展現這個世界的演變。讓人們隨著時間的進程,在各種學術體系中了解了文明的變遷,通過圖像讓觀賞者提前在腦海中呈現出視覺化的內容。也就是說,我們從看到這個宣傳畫面的那一刻起,這個展覽的內容就已經開始了。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          這個展會的名字叫《改變世界的信息》,畫面長度有 12 米左右,這個畫面是展會的入口處。從數據我們可以看到,受到貧困和災難的人群,占據著百分之七十的人群。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          中野老師針對這一點,將世界各個地區以及不同的國家,把其受災的程度和數據都集中到了一塊。分別是水資源、糧食、能源、醫療、住房、交通、識字率、通訊等問題。一共有一百多個國家。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          通過這個圖,我們會發現這其中每一個問題都是相互牽制,相互影響的。比如說水的問題就和所有的內容都有關系。整個圖標并非是想要解決某些問題,而是希望人們在看到它們時,能夠從中發現到一些問題。

          信息可視化是什么?來看看日本設計大牛是怎么做的!

          通過人們的議論,去碰撞出全新的思考。由此可以知道,圖表設計其實是對社會非常有幫助的設計領域。



          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          文章來源:花瓣   作者:研習社

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          網頁UI設計如何體現視覺層次感

          seo達人




          但是,究竟如何才能結合網頁/產品特色和用戶的真實需求, 將頁面視覺內容層級化, 從而提供更加優質的用戶體驗,實現與用戶的互動, 最終促成產品購買呢?下面小編就結合最新且具有極佳視覺層次感的網頁設計實例分析和介紹視覺內容組織技巧,以及在原型化這些網頁設計的過程中(結合小編最愛的一款又快又簡單的原型工具Mockplus)需要注意的原型設計技巧:


          1.利用界面元素尺寸大小建立層級結構

          界面元素(例如文字,圖片或形狀等)尺寸越大,越突出,越容易吸引用戶的注意。所以,在具體的網頁界面設計中,設計師可以通過有梯度的尺寸變化,創建頁面信息的層級關系。當然內容重要性上,也應該是與尺寸大小成正比的(即越大越重要)。

          大圖模式

          如圖,利用文字的尺寸大小,體現網頁信息的層級。

          注意:尺寸大小也要控制在用戶能夠接受的范圍內

          太大,能夠展示的內容有限。太小,易讀性差,也會比較繁雜。


          原型設計技巧:

          在利用Mockplus (一款具有豐富組件庫和圖標庫的原型工具)創建網頁原型時,絕大部分的組件都是可以簡單通過寬高屬性或拖拉邊框兩種方式調整其尺寸,輕松創建直觀的層次結構。

          大圖模式

          如圖,Mockplus允許用戶簡單通過寬高屬性或拖拉邊框的方式調整組件尺寸大小。


          2.利用界面元素明暗,陰影以及透明度的不同,體現簡單層級

          如白底黑字般,同類元素,同一色彩,不同的明暗,陰影以及透明度,也可體現簡單的層級關系。當然,在沒有過多顏色的參與下,不同文字,圖片等多種的頁面元素結合透明度,陰影以及明暗,也可使整款設計極具簡約風和層次感。(點擊鏈接更多的簡約風網頁設計技巧)

          大圖模式

          如圖,文字明暗,結合尺寸變化,讓頁面層級更加清晰簡約:


          原型設計技巧:

          而在這一方面,小編發現Mockplus提供了專門透明度屬性,可以根據層級設計需求,修改屬性數值進行設置。


          如若,需要添加元素陰影,也可輕松通過組件的重疊實現。

          大圖模式

          如圖,“圖片”與“形狀”組件的組合,實現陰影的添加。


          3.利用色彩,劃分頁面層級

          色彩,作為設計師最常使用的視覺層次工具,也為他們創建極富層級感的網頁設計發揮著舉足輕重的作用。而具體的設計技巧,大家可以參考以下幾點:


          首先,色彩明亮的頁面元素更容易從相對柔和的元素中脫穎而出。如圖:

          大圖模式

          如圖,明亮的紅色和黃色更易從相對較柔和的粉色背景中脫穎而出。


          而且,某些色彩,尤其是某些主題配色方案的選擇,對于確定網頁的整體基調,吸引用戶注意,作用也非常明顯。例如,藍色,一般代表平靜祥和,適合一些日常事物管理類軟件選擇。而紅色,則代表熱情喜氣,適合一些節日相關購物促銷類軟件選擇。


          大圖模式

          如圖,利用紅色突出網頁促銷信息。

          其次,色彩飽和度的梯度變化,也可體現直觀而豐富的層次結構。

          同一色彩,飽和度的梯度變化,也可幫助展現網站元素的層次結構。如圖:

          大圖模式

          最后,色彩模塊,對于體現界面元素的邏輯關系,作用也是顯而易見

          存在同一邏輯關系的各個頁面元素就近放置在同一色彩模塊,可以讓頁面組織結構更加清晰,易于用戶快速查看相關內容。


          大圖模式

          如圖,利用色彩模塊,更直觀地劃分功能區。

          原型設計技巧:

          而這一方面,Mockplus提供了非常強大的色彩選擇器,設計師們可以簡單點擊實現色彩的選擇和添加。其色彩收藏功能,也為以后復用和保持整款設計配色的一致性提供了可能。


          當然,結合“形狀”組件,為頁面添加豐富的功能色塊,以及添加“鼠標懸停時”或“點擊時”的簡單色彩交互狀態,也不是難事。

          大圖模式

          如圖,添加色塊劃分界面功能結構。

          4.利用頁面布局,展現網頁層級結構

          頁面布局也是設計師們常用的視覺工具之一。一方面,同一網站,內部各個頁面可以根據軟件或產品展示內容需求,采用多樣的布局模式,增加頁面的多變性和可讀性。另一方面,也可直接在不同頁面采用重復的頁面布局,方便幫助用戶形成一定的閱讀習慣,快速有效的查詢需要的信息。

          而具體單個頁面的布局模式,大家可以嘗試以下的方式實現:


          *利用網格劃分不同頁面模塊

          網格是公認的劃分頁面功能模塊的工具之一。而它在組織界面視覺內容方面,作用也不可小視。加之,結合各個網格的色彩變化,也能使整個頁面更加炫酷直觀。如下圖:

          大圖模式

          *利用位置不同體現邏輯關系

          同一邏輯關系(比如同類,從屬,因果等)或相近/相關的元素放在同一或并列的網頁位置或模塊內,更易于用戶瀏覽所需頁面信息。


          當然,每個邏輯關系內,結合大小標題和列表進行展示,層級關系會更加深入清晰。


          *利用點線

          網頁設計中,設計師不僅可以直接使用點線標出需要強調的內容,還可以利用點線劃分頁面板塊和布局。

          大圖模式

          如圖,通過位置的不同體現內容之間的邏輯關系。同時,利用線條劃分頁面結構和布局。


          *利用對齊方式的不同

          文字,圖片以及相關元素的對齊方式,也是體驗不同層級結構的重要工具。

          總之,頁面布局也可幫助設計師們創建更具美感和層次感的網頁設計。


          原型設計技巧:

          在使用Mockplus時,設計師可簡單使用“快速格子+自動填充”的功能組合,實現界面網格的輕松添加。而且,在具體的設計過程中,對齊方式,標尺以及參考線等工具的使用,也可使網頁布局設計更加簡便快捷。


          大圖模式

          如圖,利用Mockplus的快速格子和自動填充功能制作網頁網格,劃分界面功能結構。


          5.利用留白和間距,突出界面視覺內容

          留白的巧妙運用,能夠非常有效地突出頁面信息。而頁面內部元素之間,保持適當的間距,讓彼此之間的相互聯系而不“擁擠雜亂”,也是吸引用戶注意的不錯策略。如圖:


          大圖模式

          6.利用對比,凸顯網頁層級結構關系

          以上所提及的各種視覺組織工具,例如尺寸,色彩,明暗,間距等等,同類或不同類之間的鮮明對比,也可以讓頁面視覺上更加美觀而豐富,同時體現元素之間的結構層次關系。


          大圖模式

          如圖,利用色彩的強烈對比,突出頁面層級。

          此外,頁面元素的相互疊加,清晰度,以及細節展示程度的對比,也能有效地凸顯網頁內容的重要性層級。


          大圖模式

          如圖,靠前的圖片和文字應該更加重要,清晰,細節也應更豐富,從而方便用戶識別讀取,避免層次混亂。


          7.采用不同的界面風格,打造獨特的網頁視覺層級

          當然,并不是說設計師就必須通過以上的設計工具展示網頁重要性層級結構。實際上,結合設計師特有創意,獨特紋理(texture),圖形或圖像元素等,打造出具有設計師獨特風格的視覺層級,也會是不錯的嘗試。如下圖:


          大圖模式

          總之,不管是否使用以上的設計工具,結合設計師創意,打造獨具一格的視覺層級風格,都是不錯的設計理念。


          原型設計技巧:

          而在這一點上,Mockplus提供了很多優質功能,幫助設計師隨心設計,并簡單快捷的原型化,測試和迭代這些天馬行空的創意。


          比如,其團隊協作和團隊管理功能,方便設計師更加高效地完成設計。其8種演示和分享方式,例如導出圖片,HTML以及演示包等等,為設計師根據切實需要,選擇適當的方式測試和分享相關設計提供了便利。


          此外,其組件樣式庫,也為保存和分享需要的組件樣式并隨時復用提供了可能。


          8.分析用戶需求和網頁瀏覽模式,優化頁面內容和位置

          在進行網頁界面層級結構化的過程中,并不是毫無章法,盲目的隨意添加或突出某個部分,而是需要分析用戶行為,根據用戶需求等級進行相應結構層次的劃分。否則,再怎么賦有層次感,用戶也會因為找不到需要的東西,莞爾離開。


          此外,除了根據用需求決定哪些內容需要放在最緊要,最突出的位置,以吸引用戶。同時還需要根據用戶瀏覽網頁時的閱讀模式,分析重要內容的頁面位置。


          根據美國著名網站設計工程師Nielsen Norman Group研究表示,用戶總是在網頁瀏覽中慣用“F”或“Z”型閱讀模式,即用戶常常是從左到右,開頭結尾詳細閱讀,而中間部分則根據網頁或文章大小標題結構,選擇性閱讀的模式。如下圖:

          大圖模式

          那么,網頁設計中,設計師就需要注意頁面首尾內容的趣味性和實用性,以及中間主體部分注意大小標題簡潔明了,建立清晰的框架層次結構。

          總之,無論是用戶行為畫像,還是用戶瀏覽模式分析,最終都是希望能夠根據用戶需求,更加合理的安排和分布頁面內容,直觀清晰,易識別。


          9.其他設計工具

          而其它視覺設計工具,例如界面文本方面,文本字體,排版,對齊方式等等,也可突出頁面的層級關系。


          原型設計技巧:

          如若設計師希望通過網頁文本的尺寸,字體,顏色,排版以及對齊方式等實現框架結構的構建時,Mockplus的“單行文字”和“多行文字”組件就可以輕松幫助實現。而且,適當的結合一定的交互設計,也可使整款設計更具吸引力。


          結語

          當然,層次結構化不僅能讓網頁更加直觀清晰,賞心悅目。而且,具有一定局限性的Android 或iOS app,例如頁面尺寸的限制,設備屏幕的限制,響應與否的限制等等,更需要清晰的層次結構,讓頁面擺脫混亂繁雜,吸引更多用戶點擊使用。而這方面,也同樣適用以上所有設計技巧。


          總之, 無論如何, 及時地將各種設計想法,通過一款實用且強大的原型工具(比如以上介紹到的Mockplus), 轉化成直觀可視的原型,更進一步的測試和迭代,才是創建真正美觀實用,深受用戶喜愛的web/app的必經之道。


          總之,希望以上介紹的相關層次結構設計技巧和原型設計技巧能對你有所啟發。



          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

                                                                      微信圖片_20210513163802.png

           

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

           

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



          日歷

          鏈接

          個人資料

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

          存檔

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