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

          首頁

          版式設計里的「張力」是什么意思?今天幫你解答!

          用心設計

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

           

           

          本期給大家帶來的內容是關于視覺張力的應用技巧,聽到這個詞也許會給人一種云里霧里的感覺,我們在日常工作中也總會聽到這些「視覺張力」「視覺沖擊力」「視覺重力」等等專業詞匯。那么這些帶有視覺前綴的力學詞到底是什么意思呢?今天我們來一起分析一下這其中的「視覺張力」,看它在版式設計中都起著哪些作用。接下來讓我們一起學習今天的內容吧。

          何為張力

          首先我們來了解一下張力的概念,從百科中的解釋可以初步了解到,張力是物體受到拉力而產生的牽引力,這么說是不是還有點暈?

          通俗一些解釋,可以將它理解成在拔河時繩子兩端受到的左右拉力,我們看整個畫面在視覺心理上產生了一種向左右擴張的感覺。

          就像上圖中的氣球一樣,內部充氣后產生了向外膨脹的擴張力。外部的包裹部分也同時向內產生收縮的力,從而產生了一種相互制約的緊張感。

          在藝術和設計以及文學領域中,視覺張力這個詞也經常用來形容和諧與沖突之間的強烈對比,它是一種經過美學經驗與審美傾向后的主觀評價。

          原理與解析

          今天我們不講那么深奧的直覺式感受,而是從平面構成的角度來深度解析視覺張力在版式設計中的作用,客觀的了解康定斯基在其著作《點線面》中所提及到的視覺張力理論。

          支撐起我們身體外形的是藏在內部的骨骼部分。而在版式設計中也同樣需要支撐起整個版面的骨骼元素。

          新人設計師經常會出現的問題就是會把整個版面填充的很滿,他們認為這樣能讓版面變得飽滿。但事實上這樣并不能解決什么問題。

          我們需要轉換思維模式,客觀的重新認識版面中元素起到的作用。

          從構成的角度說,版面中只要出現一個很小的點就已經足夠吸引觀者的注意力了。點是視覺力量的中心,它在版面中能夠產生占據空間的作用。

          當版面中出現兩個點元素時,我們的視線會下意識的在他們之間形成一條隱形的線,即使他們離的很遠。正是由于存在著這條無形的線段連接,才讓兩個點之間產生了關聯。包括兩點之間的空白區域在內,它們都會被看做一個整體。

          當版面中出現三個點時,我們在心理上便會自然形成一個負形的三角形,它與背景之間會形成圖底關系,點與點之間的距離決定了這個三角形的大小。

          同樣的道理,當版面中出現四個點時,矩形的負空間與版面形狀產生了呼應。四個點之間的內部會形成一個假想的視覺面積,點與邊界的距離也為我們定義的版心的大小,這也是版面中張力的主要來源。

          點具有相互連接的屬性,當很多個距離相等的點占著水平方向排列會產生線段的印象。

          而一個陣列的點相互連接就成了一個面。

          舉個比較常見的例子,段落文字就是由許多個點組合而成的面。

          古人為了記憶天空中的星象,會將相鄰的星星連接起來,就像圖中的北斗七星,通過同形聯想,它就像是一個勺子。人們就是通過記憶勺子形狀來找到北斗七星的。

          西方的星座也是同樣的道理,將相鄰的點連接形成對應的圖案,最終形成我們現在看到的星座圖形。

          當版面中只有兩個點時,我們可以得到的信息只有版心的寬度距離,而想要得到一個完整的版面。我們還需要一個確定高度的點才行,通過這三個點的位置來腦補出整個版心的張力大小。

          也就是說,想要達到支撐起整個版心的目的,版面內最少需要三個支撐點。

          這種腦補的原因來自于視覺的閉合心理,我們會將那些區域閉合的圖形自動視為一個完整的內容,就像圖中的圖形。通常人們會認為他們是三個完整的組,因為括號內的距離更接近,那么事實上真的是這樣嗎?

          實際上六組圖形的物理距離是完全相等的,之所以會產生括號外大于括號內的錯覺完全是因為視覺心理在作怪。

          到此我們可以大致總結一下版面中的張力是怎樣產生的,以版面的四角作為支撐點,在這一基礎上,如果還有剩余的元素可以編排在垂直與水平的位置上。這樣整個版面就被支撐起來了,形成了一個完整的面積,給人傳達出了飽滿的視覺印象。在實際編排中由于層級的介入,版面中的元素并不一定都是等大的,同時隨著主體輪廓的不同,也會形成繞排等不同位置的結果。但萬變不離其宗,版面中每個元素的聚散離合都會影響到整個版面的張力大小。

          案例解構

          這個版面主要運用了點的分散和連接作用,點與點之間雖然面積較遠但是依然在視覺上會被看成一個整體,其余層級的內容則是以線的形態出現在版面中。經過解構我們可以看出,版面中的張力主要來源于版心四角的位置,這個版面是通過四個點支撐起來的。

          接下來看這個版面,首先我們標示出人物的面積,隨后是山峰的面積,文字以點的形式分散于版面中。由于點與點之間的連接作用,我們可以將其看做四條豎線。而線與線之間相連就成了一個面,這個版面主要起到支撐作用的是邊緣的三個點。

          對于這個版面來說,與之前的版面相比,版面中元素并不是等大的。它的元素分布情況大概是這樣的,接下來我們標出它的版心大小,可以明顯看出這個版面中起到張力作用元素主要有三個,而其余的元素則分布在版心的內部空白位置。

          從元素的排布上看就基本可以得出版心的大小了,元素之間通過對齊與擴張,形成了一個方形的面積,版心的四個角落都有支撐點。

          我們再看這個版面,它由一個主體,和兩個文字組以及 logo 構成,這是一個典型的由三點支撐起來的版面。

          這個同樣是由三個點支撐起來的。

          這個版面經過結構可以很明顯的看到,元素分散到版面的四角,形成向外擴張的結構,其余信息放置在空白位置。

          這個版面較之前就要更復雜一些了,來看一下它的結構,標出版心后可以看出元素基本上是圍繞著版心的大小進行排布的,左下角為了增加元素的張力作用,依然采用了三點的分布方式來占據更大的空間面積,從宏觀角度來說版面依然采用了三個點的骨骼結構。

          這個版面,可以看出版心采用了四個點來支撐,剩余兩個文字信息分布在版面的水平方向,就是圖中標注成藍色的位置。

          這個版面中出現了帶有出血的元素,看一下它的版心和元素的構成情況,采用了四個點的出血結構。

          這個版面的變化性相對難度更大,我們來看它的構成結構,可以看到整個版面大致分為兩欄,左側小欄和右側大欄內的元素編排都采用了三大支撐點來產生版心的張力效果。從整體的角度觀看版面,也會得出同樣的三點支撐版心的印象。

          這個版面中,主體的形狀變化較強。除編排在四角的元素外,其余元素都采用了繞排的呼應形式安排在了空白位置上,整體看去采用了四個點來產生張力作用。

          這個也是一樣,采用純文字的版面編排,占據四個角落,其余元素編排在空白位置。

          這個呢,版心的張力主要來源是四個角落的元素位置。

          我們來總結一下,當版面底部已經有一個很大的圖像或者文字時,版面頂部只要有一個元素就可以撐起整個版面的張力。

          頂部也可以是兩個元素來同時產生張力作用。

          對于主體位于中心位置的版面,我們最少需要三個點來起到支撐版心的作用。

          這里也可以是四個點來描述版面的張力大小。

          此外,如果這時還有其余的元素需要添加,可以添加到垂直和水平的空白位置上。

          接下來我們拿這個版面來進行舉例,中心的圓形是版面中最大的元素,被編排到了版面的正中心位置。

          隨后出現在版面中的是四個角落的文字元素,它們的出現加大了版心的張力大小。

          隨后,其余的文字信息被編排到了版心的垂直和水平的位置并貼近版心的邊緣。

          接下來在垂直位置添加裝飾性的點元素來起到占據空間的目的。

          最后在版面的空白處繼續添加其余的文字信息,這個版面就基本上變得非常飽滿了。

          接下來我們看一下它的元素構成結構。

          并不是只有文字的位置才能起到加強版面張力的作用,換成圖形和圖像也是同樣的道理。我們看這個圖,將周圍的元素去除后,版面中原本熱鬧的氛圍消失了,版面占據空間的張力也隨之變小了,但絕對不是說底部的版面就是不對的,一切都是根據項目的定位來判定的。

          這個版面同樣具有熱鬧的節日氛圍,去掉周圍的圖像元素后,明顯變得冷清起來,版面的張力也隨之縮小了很多。

          這個版面也是同樣的道理,去除周圍的元素后,版面的視覺張力縮小了,與之前相比缺少了沖擊力,變得安靜了。

          這個版面因為點元素的出現,整體給人的感受非常飽滿,將點去除后,原本被占據的空間變小了,明顯沒有之前的版面具有視覺張力。

          案例演示

          這是廣告牌,投放尺寸主要設定在一個人能夠近距離觀看的大小,也就是說版面中可以出現一些比較細小的文字。

          (這里需要特別提醒的是,在實際應用中如果廣告牌掛得比較高,就需要根據實際情況來調整最小的文字字號了。否則說明文字的出現也就沒有實際意義了。)

          接下來我們來看一下文案內容,一個航拍無人機的宣傳廣告,含有品牌的標志和文案以及圖片信息。

          根據文案信息,我們給項目添加氣質關鍵詞,及表現出科技的領先感,同時因為產品屬于親民定位,我們還需要加入具有輕松與溫情的氣質。主視覺決定采用文字為主強調產品名稱,加入文字并放大成為版面中最大的面積。

          這里需要注意的是,這個文字的外形輪廓給人一種濃厚的歷史氣息,就像演員走錯了片場,完全與我們的定位不符。

          換成無襯線體后,明顯覺得好多了。但是還是覺得哪里怪怪的。原因在于它的外形沒有給人很特別的印象。從「S」的收口處可以明顯看出切割感很強,缺少一些書寫的痕跡,整體顯得有些平淡無奇。

          這個字體大體感覺上還不錯,帶有書寫感的曲線,幾何形的外觀似乎都很符合定位。但作為版面中的主視覺元素似乎還少了點裝飾感。

          最后選擇了這個字體,同樣具有書寫感的曲線開口,帶有幾何特征的外形以及類似電路排線一樣的裝飾結構。

          色彩方面采用橙紅色作為主色調,烘托親民的色彩氛圍。接下來將產品疊壓在文字之上,加強版面的層次感。

          為了繼續加強版面的中層次變化,我們在文字與圖像之間添加陰影,細節決定成敗,一個簡單的陰影也是需要體現出層次變化的。從模糊到清晰,從暗淡到濃重的變化都是塑造細節的關鍵,這里為投影添加三層強中弱的變化,這樣一來,陰影部分的刻畫就完成了。

          與之前相比,添加陰影后的畫面在視覺層次上要更豐富一些。在視覺表現上也更立體。

          最后我們將文字信息劃分好層級后一次添加到版面中。這個畫面就完成了。主體位于版面的中心位置,其余信息分布在版面四周,形成向外擴散的視覺張力,一共使用了三個點元素來支撐版心的大小,剩余的文字信息則添加在版面底部的空白位置。

          我們試著將信息全都集中到一起會怎樣呢?

          可以看到,版面中元素全都集中在了版面的中心位置,這使得原本占據整個版面的視覺張力變小,版面的兩端會顯得很空曠,相對于之前的版面來說變得沒有那么飽滿了。這種情況下,也可以采用添加圖形元素的手法來填充版面兩端的空白處,讓畫面變得熱鬧起來,增強版面的動感與活力。

          這里我們添加一些抽象的氣泡元素,為版面添加一些概念性的印象。添加元素后,新的問題又出現了,由于兩側的元素僅作為裝飾出現,但是目前的視覺又顯得比較搶眼,這就有些干擾到了主視覺的層級地位了。

          那么解決這個問題的方式也很簡單,就是弱化掉兩端的氣泡元素,讓主視覺與裝飾元素之間的層次更分明。經過弱化處理后,這個版面看上去就舒服多了。這里需要注意的是,氣泡的虛化程度也同樣遵循了強中弱的層次變化,這樣的處理也進一步加強了整體的視覺縱深感。

          經過圓形氣泡的填充后,版面的張力恢復到了之前的大小。整體給人更加飽滿的視覺印象。

          今天我們一起學習了視覺張力在版面中的應用技巧,一起了解到了圖像與文字在版面中不同位置所起到的作用,也講解了版面的骨骼是如何構成的,希望我們的內容依然能夠對你有所幫助。

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

          巧用Keynote,為你的演示錦上添花

          用心設計

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

           

          對于今天的設計師來說,無論是知識分享會,還是項目提案評審,甚至是求職面試等等,越來越多的場合需要考驗我們的演講表達能力了。那么對于設計師來說,除了口述表達能力,美觀大方的幻燈片往往也是必不可少的。而Keynote因其酷炫的動效儼然已經成為演示界的神器,但是現狀是很多設計師朋友對于Keynote的掌握還不是很熟練,特別是五花八門的動效以及復雜的構建順序,在此作者就與大家分享總結一些個人的使用心得,希望對大家能有所幫助。


          目錄

          1、認識keynote

          2、制作準備

          3、動效

          4、構件順序

          5、演講相關



          下圖即是Keynote的主界面,與我們熟悉的Sketch還是挺相似的。其中中間為舞臺區域,當前頁面的所有元素都會出現在此;頂部是工具欄,包含一些常用的功能,并且跟Sketch一樣支持自定義;左側是幻燈片的導航,可以快速在各個幻燈片之間切換;右側是參數調整,可以分別針對幻燈片以及其中的某個元素進行參數調整。

          其中,右側的參數調整又分為“格式”、“動畫效果”和“文稿”三個Tab。當選中左側導航中的幻燈片或舞臺中的某個元素時,對應的參數調整面板是不同的。


          在開始動手之前,還有一些準備工作需要完成。首先就是整個幻燈片的尺寸,常見的尺寸比例有4:3和16:9,需要根據演示現場的幕布寬高比來確定選擇哪一種。如果是在移動設備上演示,就根據移動設備的屏幕比例來選擇,一般手機是16:9,Pad是4:3。當然,也可以自定義幻燈片的寬高尺寸?;脽羝叽缭谟覀鹊摹拔母濉盩ab中調整。

          其次,編輯母版。母版有點類似于Sketch中的Symbol,改變了其中的某個元素,所有使用這個母版的幻燈片都會出現相應的改變。不同的是,母版的對象是整張幻燈片,而不是其中的某幾個元素組合,也就是說,一張幻燈片只能選擇一種母版。如果你的所有幻燈片都需要加上logo或者水印,使用母版就很方便了。母版的編輯以及調用在右側的“格式”Tab中(選中幻燈片的情況下)。

          最后,將你需要用到的圖片元素,按幻燈片順序整理好命名,以便于在后續調整構件順序時使用(命名混亂會對調整構件順序造成很大的干擾,在稍后構件順序的時候會講到)。


          Keynote中的動效分為幻燈片之間的過渡動效和單個元素的動效。


          幻燈片之間的過渡動效有以下這些:

          這里重點要介紹的是神奇移動。它的原理是為兩張幻燈片中的同一個元素添加補間動畫,通過這個元素在兩張幻燈片中的位置、大小、形狀、顏色、旋轉角度、透明度這些屬性差異來實現過渡動畫。當然,還可以選擇抹入抹出來使其過渡更自然。

          單個元素的動效又分為三個階段:出現、動作、消失。


          出現,顧名思義就是從無到有的一個過程,主要有以下這些:

          動作,主要是移動、縮放、透明度、旋轉這些基本的屬性變化。大部分的動效都是通過這些基本屬性的變化組合來產生的。

          消失,顧名思義與出現相反,是一個從有到無的過程。

          其中,打字效果和跟蹤這兩個動效只針對文本才會有效果。

          這么多的動效,其中有一些還是蠻有意思的,比如“解體掉落”、“碎屑”、“轟然墜落”,這里就不展開細講了,大家有興趣可以一一去嘗試一番。


          使用動效還有一個誤區就是,不是所有的頁面之間或者元素出現消失都是需要動效的,過多泛濫地使用動效反而會給觀眾造成視覺疲勞,讓他們的關注點都集中在你的動效上,從而對本身的演示內容失去關注。


          構件順序是針對單張幻燈片內添加了動效的元素而設定的。可想而知,一張幻燈片內的所有元素,很少會有同時產生動作的情況,因此必然有個先后順序,這個順序就是構件順序。通過構件順序,可以組合出變化多端的動畫效果來。


          構件順序分為三種:一起、之后、點按。如下圖:

          可以看到,通過構件順序列表上兩個構件之間的樣式變化,我們就可以一眼區分出它們之間是什么順序。一起,兩個構件連在一起并且中間沒有分隔線;之后,兩個構件連在一起中間有分隔線;點按,兩個構件不相連。


          點按比較好理解,就是兩個構件動作之間需要手動控制。下面重點來講一下,“一起”與“之后”。我們通過時間軸的形式,來讓大家更容易理解。

          當然,我們還可以設置延遲時間,讓構件交替動作。

          前面我們提到過,要為圖片元素整理命名,其目的就是在構件順序列表中便于查看。如果我們沒有整理命名,那一張幻燈片中的構件順序列表可能就是如下圖這樣:

          那么這時候,我們如果要調整其中一個元素的動作順序就顯得異常困難了。因為在舞臺區域中,這些元素可能都是疊加在一起的,想要通過點選找到元素幾乎是不可能的,而構件順序列表中的命名也顯得很混亂……


          此外,即使是整理命名了這些元素,最好也不要把許多動效做在一張幻燈片中。原因同上,如果后期要修改,尋找起來也是非常困難。我們可以利用幻燈片之間的自動過渡效果來將它們拆分到不同的幻燈片中。

          圖中在第2張幻燈片與第3張幻燈片之間選擇“無過渡效果”,且開始過渡設置為“自動”,延遲“0秒”,那么第2張幻燈片播放完,就自動無縫進入第3張幻燈片了。


          做完了演示稿,那么就要開始準備演講了。首先需要考慮的問題就是文件大小了,如果圖片內容不多倒還好,一旦圖片較多,整個.key文件就會變得很大。這時候我們可以先壓縮圖片再將其置于Keynote中,或者有一些元素或者文字可以通過Keynote直接繪制,就不要采用圖片的形式了。這樣可以將.key文件的體積大大縮小。


          其次,Keynote的版本也是需要考慮的問題,最好可以拿到演示所用的電腦來演示一遍,作者就曾經因為軟件版本問題導致一個動效無法展現,進而影響了那個片段的演講。


          此外,我們不可能講所有要講的內容全部呈現在幻燈片上,適當的注釋是必不可少的。

          添加完成的注釋我們可以在演講者模式中看到。

          演講者模式中,我們還可以看到當前幻燈片、下一張幻燈片以及還有多少個構件動效沒有播放。在頂部,靠左的是當前時間,靠右的則是定時器,可以設置成計時器或者倒計時來幫助我們控制演講時間。

          最后,如果你不在電腦邊上而又不想別人幫你控制幻燈片播放時,可以利用iPhone來遙控播放。打開iPhone上的Keynote,點擊右上角的遙控模式進入如下圖左側的界面,然后前往Mac端的Keynote,進入偏好設置,選擇遙控器,然后連接上你的iPhone(需要在同一WiFi下),iPhone上的界面就會提示你開始播放幻燈片。

          這時,你的iPhone就變身為一個遙控器了,并且點擊右上角的菜單還有激光筆功能,便于你在演講過程中做臨時批注。


          這篇文章旨在幫助你更充分地運用Keynote來傳播分享知識、展示設計作品,并不能美化你的幻燈片。想要做出美觀大方的幻燈片其本質還是需要版式排列、色彩搭配這樣的基礎技能;同樣,酷炫的動效也需要多欣賞臨摹別人的作品才能運用得恰到好處。

           

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

          圖標該配上文字嗎

          用心設計

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

           

          圖標在增加界面美觀性的同時也在破壞著界面的清晰性,在設計的過程中如果你糾結于圖標是否需要配上文字那請仔細閱讀這篇文章。

          首先捫心自問下是否清楚在設計中什么時候用圖標? 什么時候用文字?什么時候用圖標+文字?你是否能清晰的分辨他們分別在什么場景下使用呢?


          前言

          之所以要寫一篇這樣的文章是因為最近有很多的設計小伙伴反復在爭論一個觀點 圖標配上文字是否有必要?

          舉個栗子:

          如下圖一位設計同學覺得右上角紅圈里面只需要圖標就好了不需要文字的存在,并且節省屏幕空間,可是公司的開發和測試同學一臉懵,這個操作覺得不夠清晰,識別性較差嚴重影響用戶體驗,當前視覺層面和功能層面產生了強烈的撞擊。帶著這個問題我們從圖標的定義,圖標變遷史,圖標的優劣勢來講述今天的文章,相信文末你會有自己的答案。


          圖標定義

          廣義

          圖標是指代意義的圖形符號,具有高度濃縮并快捷傳達信息、便于記憶的特性。應用范圍很廣,軟硬件網頁社交場所公共場合無所不在,例如:男女廁所標志和各種交通標志等。

          狹義

          應用于計算機軟件方面,包括:程序標識、數據標識、命令選擇、模式信號或切換開關、狀態指示等。


          圖標變遷

          圖標是具有指代意義的具有標識性質的圖形,它不僅是一種圖形,更是一種標識,它具有高度濃縮并快捷傳達信息、便于記憶的特性。它不僅歷史久遠,從上古時代的圖騰,到20、21世紀具有更多含義和功能的各種圖標,而且應用范圍極為廣泛,可以說它無所不在。一個國家的圖標就是國旗;一件商品的圖標是注冊商標;軍隊的圖標是軍旗;學校的圖標是?;?。

          我們通過圖標看到的不僅僅是圖標本身,而是它所代表的內在含義。


          而在計算設備上,圖標隨著時代的發展而迅速流行。從最早的計算機GUI(施樂之星Xerox Star)再到之后的喬布斯Apple lisa,Windows1.0,Amiga Workbench,從最初的黑白到隨著顯示技術在分辨率和色域上的提高出現的彩色圖標,設計師漸漸的有了更大的發揮空間。


          圖標的優勢

          1.節省屏幕空間

          圖標可以替代文字,相對于長文字來說只需要占用一個圖標的位置如:worktile移動端新建聊天操作四個文字如果用圖標來代替的話只需要占用一個文字的文字,并且把干巴巴的文字變為圖形符號,用戶對于圖形的識別速度對于文字來說更快。

          2.沒有地域語言限制,針對國際通用圖標。

          國際上通用的圖標對于每個人來說都能很快的識別處理,比如同樣一個“放大鏡”圖標經過長期許多不同的網站、應用程序和操作系統的用戶培養,讓放大鏡圖標作為搜索的操作代表符號變得越來越流行,不論任何國家任務種族,用戶很清楚這是搜索操作,相對于文字來說圖形識別大大減少的用戶識別的時間,用戶也可以花更多的時間去做他真正要去做的事情,從而提升工作效率

          3.圖標可以提供視覺引導,迅速識別減少用戶思考時間

          人腦處理圖形圖像的速度是處理文字的60萬倍,人會記住80%看過的東西,20%閱讀過的東西,和10%聽到過的東西,所以在我們發朋友圈或者寫文章的時候避免干巴巴的文字描述,勁量配上相關圖片,提升整體的圖版率,俗話說看圖說話不是沒有道理。

          4.提升整體視覺體驗

          好的一套圖標能夠從圖標的獨特性、象征性、記憶性、應用性、組合性、變化性上打動人心,激發人們的點擊欲望。這樣才能使圖標設計達到上乘水準,從而提升整體的視覺水準


          圖標不適用場景

          1.表達含義復雜,難以揣測

          圖標的目的就是快速識別并引導用戶,用戶如果無法快速識別通常會下意識的回避掉無法識別的界面元素,這是人類的天性,反而logo的設計更加適合深層次的寓意。之前喬布斯做的一個實驗,他拿著蘋果設備到一個智障兒童福利院讓兒童們把玩,每個小朋友都認識那些圖標的含義,當時的寫實圖標都是來源于生活,對于來源于生活而設計的圖標對于孩子們來說識別效率更高花費的識別成本更低。

          2.圖標存在多重含義

          如果圖標不能言簡意賅的表達出寓意,并且存在爭議的請避免使用,如果非要使用請采用圖標+文字的形式。比如appstore側邊導航第一個你覺得是什么?收藏?標記?錯!他是探索,如果我不告訴你可能每個人猜的含義都不同。所以我們在設計圖標的時候要勁量去避免多重含義的圖標。

          3.專業性過強很難作為通用圖標

          圖標如果專業性過強,而沒有辦法簡化為一個很直觀通用符號時,二八原則我們只能考慮80%的人,而20%的人需要付出學習成本,,比如下面的這個圖標,如果用它來代表“研發”,我相信會有很大一部分人沒法識別代表什么意思。但是對于開發人員就是一個很通用的圖標,在這種情況下,只能是允許20%人員付出學習成本來解決這個問題,除非你配上文字。


          小結

          1.為了提升產品視覺體驗,圖標設計一定要極簡,如果使用圖標能夠百分百表達其含義時,請優先使用

          2.針對國際上面通用的有大眾認知的如:搜索、wifi、設置、藍牙等圖標無需配上文字,除非做視覺引導為了保持一致而統一添加文字的列表

          3.禁止使用多意圖標(不讓用戶思考,如果用戶不能在5s內很快識別出圖標的意思,那這個圖標的設計是失敗的)

          4.針對專業性很強的并且局限于空間的采用文字形式,或者二八原則只要考慮80%的人員無識別壓力,而20%的人付出學習成本。

          5.我們不討厭圖標加文字的形式,前提為圖標要足夠簡化表達其含義(如文章開始的案例,圖標簡化為加號并且加文字放到商品2做一個通欄操作就好了,這樣更加符合用戶操作的視線流,這樣做的還有釘釘的報銷審批界面)

           

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

          APP注冊流程及視覺優化

          用心設計

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

           

          本次分享闡述了我關于理財APP注冊流程的視覺及結構上的改進,分為理論闡述、競品分析、改版實踐三個部分。

          主要向大家講解一下當一個UI設計師在做UI設計改版的時候,他在思考什么,他做出這一步設計的原因是什么。同時在大家的討論反饋中,我作為一個UI設計師,也能更好的明白產品看待一個界面設計的角度。

          一、關于注冊

          一旦用戶體驗時涉及到資金進出,留言互動以及定制個人信息等內容,那么就會觸發注冊或者登錄環節。

          目前,手機已經成了移動互聯網時代的天然身份證,而且可以實時驗證。這也是互聯網金融領域基本都采用的注冊方法。

          手機注冊都是通過手機短信獲得驗證碼,注冊效率極高。好的注冊頁,就是“簡約而不簡單”,做到體驗流暢又抓住了核心。

          二、設計中“5w+1H”原則的實踐

          1.WHAT(目標):

          石投金融移動端注冊流程+視覺的優化

          現版本石投金融移動端的注冊截圖

          其實光從視覺上,我們的APP其實屬于市面較大眾的類型,沒有追求設計趨勢,但是中規中矩,在很多網貸APP中都能見到。但是我們應該思考的是,注冊作為吸引新用戶的重要一環,我們能否做的更好?

          2.WHY(優化原因):

          石投金融目標用戶為40歲的中年人,我對此設定其實是不太同意的,使用過程中我注意到其實對于產品的結構流程來說,

          3.WHO(目標用戶):

          中凈值用戶(年齡結構為30-45歲之間,對互聯網新事物有開放性心態,對APP的設計水平有一定要求,并且操作流程不可像PC端一樣交互繁瑣死板。產品偏好:安全保障三件套(風險準備經+陽光保險+資金托管)+高收益,運營拉新策略:促銷+再促銷+拉好友+再拉好友)

          4.WHERE(使用場景):

          互聯網金融領域方向的移動端APP。用戶、需求和場景是產品設計前必須要考慮的三大核心要素,只有能滿足目標用戶在特定場景下特定需求的產品,才有可能成長為獨角獸產品。

          5.WHEN(何時使用):

          用戶體驗時涉及到資金進出及個人信息等內容。

          6.HOW:

          后文闡述。

          三、產品的注冊流程

          定了這個研究主題之后,我著手研究了APP的注冊流程。用戶點擊【我的】icon之后,彈出登錄頁面,注冊按鈕位于次要按鈕區域,用戶需要點擊之后才能進行注冊。首先我考慮的是,對于一個剛下載APP的用戶來說,登錄是比注冊更高優先級的交互嗎?從第一步開始,我們的流程就在消耗用戶的手指點擊次數。點擊次數越少,用戶使用產品感受越舒適流暢,注冊轉化率越高。

          然后用戶點擊注冊之后,會讓他輸入手機號。這時又涉及到一個小的交互缺陷,就是用戶需要再次點擊輸入框才會彈出鍵盤開始輸入,又消耗占用了一次用戶的手指點擊次數,屬于無效交互。

          下面我們終于到了輸入手機號的環節,用戶輸入手機號,如果用戶早就注冊了我們的產品,但是忘記了,輸入了已經注冊的手機號之后,我們產品現版本的流程是【彈窗告知用戶“您的手機號已注冊”】,需要用戶點擊“確認”才能關閉這個彈窗,然后就什么操作都沒有,停留在這個輸入手機號的頁面。用戶需要手動點擊“登錄”文字按鈕才能切換到登錄界面。如果是一個40歲的中年人,他的使用APP經驗不多,他可能會適應這個硬中斷的過程,反應一下確實是自己操作問題,是自己的過錯,而乖乖的去點擊“登錄”按鈕,但是如果是一個30歲左右的年輕人,在各種APP如親媽一般的母愛關懷下,他可能就很不舒服,對APP的印象不好從而流失。

          現版本注冊錯誤的界面交互

          四、相關理論——分步注冊

          1.分步注冊適合移動端設計:移動端屏幕小、加上彈出鍵盤,假設將多個輸入項放在一個頁面,會給用戶造成擁擠感,然而分步注冊則可以較好地解決該問題。

          2.分步注冊可減少用戶點擊輸入框的次數:幾乎所有的注冊關鍵步驟中都有:輸入手機號、獲取驗證碼、設定密碼這3個步驟。如果這三個步驟在同一個頁面,則需要用戶手動點擊輸入框呼出對應鍵盤來填寫這些信息。如果遵循分步注冊,分成三個頁面的話,進入每個頁面都會自動置入焦點并彈出鍵盤,將減少用戶手動點擊輸入框的次數。

          3.分步注冊在一定程度上可以提高轉化率:Facebook曾經針對分步注冊與非分步注冊做過A/B Test,其結果指出分步注冊的轉化率遠高于非分步注冊。由此可見,非分步注冊強行減少注冊頁面倒不如拉長戰線,給用戶輕負荷的操作,讓用戶在不知不覺中完成注冊流程。

          上頁我們講述了【分步注冊】的理論,結合這個理論我們來看APP的第二步——輸入驗證碼及輸入密碼。屬于非分步流程。雖然看似減少了用戶的操作步驟,但是使用過程中用戶需要經過等待驗證碼——點擊喚出數字鍵盤——輸入驗證碼——點擊喚出英文鍵盤——輸入密碼——點擊注冊(如果驗證碼或者密碼有一項錯誤,便會彈出錯誤提示之后停留在此頁面等待用戶重新點擊輸入框自己刪除輸入的數據然后重新填寫)這樣的流程。寫到這里我的頭有點疼,所以不做過多闡述,大家可以自己體會。

          五、競品分析

          由于市面上網貸APP數量太多,但是注冊流程都一致為【輸入手機號】-【輸入驗證碼】-【輸入密碼】這類三要素流程,所以我選取了A級網貸產品微貸網、翼龍貸、拍拍貸及支付寶(副參考)作為分析對象。由于我沒有可用于注冊的多余手機號,所以很多流程沒有進入輸入驗證碼之后的下一步,但是已經足夠看出一個APP關于注冊流程的優化思路。

          拍拍貸

          拍拍貸的流程其實跟我們產品的比較一致,最后一步屬于非分布流程。但是第一步的注冊登錄判定以及設計上的通過字號對比讓用戶明確自己所處的位置這樣的iOS11設計理念值得我們參考學習。拍拍貸的最后一步點擊完成注冊之后如果輸入有誤的體驗也不好。我還有不滿意的地方是拍拍貸的整體界面設計偏簡潔清晰、以內容為主,而作為最重要的頁面之一的登錄注冊頁顏色大面積的使用了他們產品不怎么突出強調的藍色,視覺觀感非常的沉重,跟整個產品的基調嚴重不符。

          微貸網

          前不久剛發布版本——“七年微貸”的微貸網的注冊流程是與我的改版方向高度一致的,這點我感到很榮幸。它從用戶頁面就開始合并登錄和注冊的判定。用戶點擊【登錄/注冊】按鈕之后自動彈出數字鍵盤,用戶輸入手機號之后系統判定是否注冊,如果已注冊,引導用戶進入登錄界面,自動彈出英文鍵盤填寫登錄密碼,如果沒有注冊,引導用戶填寫自動發送的驗證碼并跟隨頁面切換自動彈出數字鍵盤,減少用戶的點擊次數,優化產品使用體驗。

          翼龍貸

          翼龍貸的注冊流程中規中矩,從注冊中就讓用戶感受到自己是傳統金融企業的這個概念。它有很多可取之處,包括注冊首頁的活動拉新(但是做成入口圖形式會讓用戶一直想點擊并且分散其它信息的注意力)、通過主色調紅色的步驟進度條讓用戶明確流程總共幾步和自己所處的位置,最后的獎勵回饋,還有開通存管賬戶的適當引導都是我可以從中學習到的一些設計思路,跟我們的產品理念也非常一致。

          我們的注冊完成獎勵反饋提示。作為小白用戶以及30歲左右的目標人群的我來說,我看懵了,反應不過來這些獎勵對我來說意味著什么,我不知道積分是啥概念,我也不知道投標本金是什么概念,而且關閉或者開通存管賬戶之后我也不知道這些獎勵具體去哪里找和使用。但是這個不屬于注冊流程的優化,所以我只做了部分改動,具體可能會在以后分析改進。

          支付寶

          爸爸的APP,不想多夸。采用了分步注冊設計保證了用戶每步操作的視覺焦點都在自己要輸入的內容上。輸入4位驗證碼之后自動判定驗證碼是否正確,如果不正確,清空所有驗證碼并且配合手機震動和錯誤提示紅字抖動告訴用戶輸入錯誤,減少彈窗打斷,降低錯誤反饋造成用戶心里的不愉快。之所以賬號已經注冊的提示放在輸入驗證碼之后,是因為用戶點擊【立即登錄】的話,會直接登錄,而驗證碼就自動變為登錄需要接收的驗證碼,這點也是做得挺出乎意料的。

          六、最終改版結果

          首先,我對產品做了一個視覺上的改版。采用了iOS11大對比的設計理念。首先分析頁面信息優先級,將頁面信息按權重排序,依次為核心步驟層、內容輸入層、輔助信息層,還有包含可點擊交互操作的操作引導層。然后通過字號、字色與字重拉開信息層級間的差距,最終將用戶聚焦到核心信息上來。

          a.核心步驟層:是指用戶在短暫時間內瀏覽頁面時,能讓其一目了然的獲知當下應該操作的某個步驟。例如“輸入手機號碼”是這個頁面的重點核心內容,其設計需要重點突出,且精煉文字。

          b.內容輸入層:是指用戶被核心步驟層吸引后,需要進行相關內容的輸入,例如昵稱和密碼的輸入等等。其設計需要引導用戶進行輸入操作,并且在輸入中給用戶帶來便捷性。例如包括密碼明文/暗文的切換,以及輸入驗證碼到最后一位后直接進入下一步,來確保便捷性。

          c.輔助信息層:是指用戶理解了以上兩個信息層后,輔助信息層會有更多信息讓感興趣的用戶去了解。這里往往提供更多說明或者跳轉鏈接,例如使用條款和隱私政策等。

          我在視覺上使用了CR設計語言(iOS11的設計風格)。Complexion Reduction設計語言是指使用更加簡化的界面顏色,更大更突出的標題字體,以及簡潔的圖標,來拉開頁面信息層級,突出頁面主要功能。作為用戶體驗設計師應該進行“最小化設計”和“逐步簡化”的設計模式,毫不留情的砍掉“沒有重要功能的元素”,使用戶快速關注到信息的本質。

          改版前:

          改版后:

          1.簡單且突出的告知用戶在頁面中需要做的唯一一件事

          2.減少零碎信息的展現,最大限度的精簡文案

          3.各類信息分組,拉大信息戰線層級

          七、具體改動內容

          1.增大了輸入內容的字號,簡單清晰明了。延續舊版本,對手機號碼進行344的分布

          2.增加一鍵清空icon

          在輸入時偶爾會出現輸入錯誤,如果沒有清除的icon,用戶只能一直按鍵盤中的清除按鈕,需要一直按住直到輸入框為空。點擊注冊時候,注冊按鈕變為加載狀態,清空icon與鍵盤同時消失/收起。

          3.優化了不可點擊狀態的按鈕狀態表達

          舊版本不可點擊狀態為灰色,比較老舊過時,并且顏色的視覺層次不高。

          4.手機號位數不對/格式錯誤時,按鈕為不可點擊狀態

          當input為空時,關聯按鈕為disabled的狀態,這是采用了防錯的原則:如當使用條件沒有滿足時,常常通過使功能失效來表示(一般按鈕會變為灰色無法點擊),以避免誤按,這是在提交之前的視覺驗證輸入的另一種方式。

          5.修改了按鈕上按鈕的名稱

          表單按鈕應該準確描述用戶正在執行的任務——創建帳戶或登錄等。

          另外,我還優化了文字的顯示層級,共分為五類

          涉及到文字/色彩規范是一個很大的工程,我們的理財APP在這點做的不是很好,因為這次改版設計是私下在做,所以我便做得隨心所欲了一點,甚至重新定義了品牌色:)。

          關于負反饋的處理

          所謂負反饋,指用戶行為出現問題時出現,比如投資金額小于可投金額,或者密碼不正確等等。雖然負反饋在產品交互設計中對于警示用戶不該做的行為或者是該行為會導致不良后果的可能時起到了不可或缺的作用。但是顯然更多的時候人們不愿意收到負反饋,任何用戶在得到負反饋的時候都會感到沮喪,因此盡量減少通過特定的反饋頁面來進行負反饋。

          1.盡量減少用戶犯錯的機會,包括突出的標題及重要文字,清晰的文案,分步輸入等

          2.輸入驗證碼步驟中,如果用戶輸入的驗證碼有誤,驗證碼自動清空并且輸入欄返回第一個,降低用戶操作及點擊數。

          3.采用了手機振動+文字震動加文字標紅的方式提示用戶的輸入錯誤,用比較輕量化的反饋來弱化。

          1.優化文案

          ·將會讓用戶看暈的獎勵文案整合至【我的獎勵】中,方便后續查看。

          ·增加了銀行存管的解釋文案,使強突出按鈕更有指向性,也更好的引導用戶去開通銀行存管。

          2.優化主輔按鈕表達

          這里我參考了翼龍貸的設計思路,但是做了一個優化,將主按鈕調整到右側。大數據表明,一般將傾向于用戶點擊的按鈕放在右側,點擊率更高。

          七、最終成果動效展示

           

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

          平面中的構圖技巧

          用心設計

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

           

          平面中的9種構圖,但有的同學還不是太明白,所以小編今天細說里面其中一種構圖:視覺引導線,加深大家的理解。

          視覺引導線構圖

          什么是視覺引導線?(視覺動線)

          視覺動線會將觀眾視覺引導到特定的方向,先創造一個視覺中心點,之后會提供一條讓觀眾可隱約跟隨的視覺路徑,劃分視覺階級明顯讓觀眾知道元素之間的相對重要性。引導線是運用元素本身的原始形象或直接畫出實體線條,借用這些引導線觀眾的視線可以被指向畫面的其它元素哦。

          上圖中使用了視覺動線 + 留白,留白可以讓海報中的「手」更加搶眼,使觀眾第一眼就會看那只手。接著就是視覺引導線了,引導線不一定是實體線條,它可以是元素本身的原始形狀、人物視線以及元素組合等等,借用這些引導線讓觀眾的視線可以被指向畫面中的其它元素。

          說到這里,我想大家也知道上圖的引導線是什么了吧?引導線是手與線的組合,觀眾的第一視線是手,然后會順著手拉的線方向延伸,最后停留到右下角的小字里。這幾行小字就是作者要表達的主要信息。

          但為什么不直接居中非要弄個引導線?雖然可以用這些中規中矩的構圖,但往往會顯得無趣,也不一定能吸引用戶去看了。

          下面小編用一些案例來讓大家更好理解。

          案例:

          上面的海報設計是很好的例子,首先利用視覺中心點讓觀眾集中到大字區域,然后順著線條查看下方的內容,先是 bla 的內容,接著就是 zer,所以這圖主要信息應該是 RYDER BLAZER(但小編不知道是啥……)

          上圖中,人物的視線也可以算是一種引導作用。

          總之好的視覺引導線可以讓作品富有故事性和藝術性,還能提升作品視覺上的觀賞度。所以我們創造時應該重視構圖。

           

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

          2019廣告營銷案例搶先看

          用心設計

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

           

          2018年已過,轉眼又到了2019,但營銷圈中戰火從未消停過……

          2018年各大品牌營銷玩出了新花樣,優秀的營銷案例層出不窮,攬獲了眾人的芳心。

          面對2019新的一年到來,各大品牌當然也不會放過一個大好的借勢營銷黃金機會,都爭先恐后搭上了這趟“借勢營銷”的順風車,為打響2019年第一炮,自然是無可厚非的。

          然而,迎來2019新年,各品牌紛紛借勢“?;ㄕ小保什惠斖?,各種多元化新玩法碰撞在一起產生了巨大的火花,再次燃燒整個營銷界。因此,在這個競爭激烈的營銷戰場上,頻繁出現了眾多品牌活躍的身影,各種刷屏級的案例也相繼誕生。

          下面為大家盤點的刷屏案例,看看這些品牌都是如何借助“新年”這個熱點事件的勢能,迅速搶占超級流量,賺足眾人的眼球?

          特侖蘇

          主題文案:更好的2019,做更好的自己!

          點評:往年的特侖蘇代言人只有陳道明、靳東,而今年又有兩位新代言人加入特侖蘇——張鈞甯和鄧倫。特侖蘇邀請了這四大代言人共同拍攝了2019廣告,又以一個全新的面孔面向用戶。

          廣告中花式植入產品,將產品巧妙融入到畫面情境中,以達到潛移默化的宣傳效果,順理成章地符合了產品植入講究“隨風潛入夜,潤物細無聲”的最高境界。

          四大代言人共同拍攝廣告,無疑是突破了傳統的廣告模式,強大陣容助陣,可大大體現出明星在營銷中的號召力與影響力,明星背后帶著龐大的粉絲群體,推動這次廣告更廣泛地覆蓋目標受眾。加大了此次廣告營銷的宣傳力度,從中也表達了特侖蘇堅持“從更好的開始”的品牌主張。其次,對于用戶而言,特侖蘇這波新年廣告帶給大家更多的是驚喜與新年的美好祝愿:更好的2019,努力做更好的自己。

          京東白條

          主題文案:“一點當典行”網紅店橫空出世

          點評:就在2018年尾聲已敲響時,京東白條又出來“搞事情”了,竟然在京城“四大兇宅之首”—— 朝內81號開了快閃店,使得擁有百年歷史的“京城第一鬼宅”, 搖身一變,成為了一家網紅店,吸引眾多時尚潮人前來打卡,深夜排隊的壯觀場面實在令人驚嘆。

          京東白條精準洞察年輕人現實痛點和情感需求,以及抓住了他們的獵奇心理,將無數傳說的冒險勝地——朝內81號,首次改造成京東白條“一點當典行”,為大眾提供了全新的刺激潮玩體驗。讓年輕人通過【當與換】的儀式感,把負能量、情緒、雜念統統“分期”丟掉,切身感受“一點改變,好過一成不變”,告別社畜、廢青的過去,獲得新生,在2019開始更好的人生。

          京東白條“一點當典行”網紅店的問世,可謂打破傳統印象中的金融理財玩法和當鋪玩法,從一點事務局到一點當典行,京東金融始終在突破體系和行業的限定,持續打造坐擁“潮人”人設的品牌。同時也彰顯出一個擁有年輕人的潮玩精神、有溫度的品牌,更有效建立了品牌與用戶深度溝通的情感紐帶。不得不說,這一反常態玩起時尚新潮,簡直是顛覆了人們對京東白條的印象,京東白條這波營銷實在是妙!

          據悉,2019年將會有5期系列活動陸續落地全國,既佛系又喪的年輕人,不可錯過!

          OLAY

          主題文案:下一站,無懼年齡

          點評:新的一年里,BBDO廣州攜手OLAY,帶來無懼年齡的《下一站》,OLAY這支反逼婚廣告,戳中了多少人的心窩?相信,給了你不少啟發。

          廣告中講述的是一個發生在“年齡列車”上的故事,女主手握一張名為“年齡”的車票,正在尋找著自己的位置,突然驚奇發現這里的車廂都是按照年齡劃分的。通過這極為扎心的故事情節激發更多“大齡剩女”的思考,但也引發了更多女性產生堅定的想法,不應該因為年齡而倉促步入婚姻的殿堂。

          其實,這一廣告刷屏朋友圈,那是因為這廣告基于對女性的心理洞察,找準眾多女性的痛點,讓人產生強烈的代入感,更能給予女性啟發,正確面對自己的每一個年齡階段。由始至終,OLAY給人傳達了一種“不畏年齡,勇敢做最真實的自己”的精神,無形中體現了OLAY對用戶的最切實的關懷,使得其品牌深得人心。

          迪士尼

          主題文案:“夢想成真”

          點評:迎來新的一年,這支由迪士尼推出的暖心廣告正式上線后,獲得眾多網友的一致好評,都稱這已被故事中的“小白鴨”所吸引。

          廣告片講述了一只小白鴨費盡千辛萬苦,終于和偶像唐老鴨見面的故事。以呆萌的“小白鴨”形象,然后制造感人的故事,直擊用戶的內心深處的情感,從而引起用戶的共鳴,加強了用戶對品牌的認同感。

          這次廣告貼合了現實生活,從用戶的情感出發,喚醒人們的夢想,不忘初心,勇往直前,因此,迪士尼給人傳遞的不只是對美好生活的向往,更多的是對夢想的追求與執著。還有向用戶表達了:盡管我們都長大了,迪士尼還在守護我們最童真的夢想。所以,迪士尼通過這一波觸動人心的情感營銷,為品牌與用戶之間架起了一座真正的情感橋梁。

          榮耀手機

          手機性能測試

          (掃描二維碼觀看視頻)

          點評:說到手機的耐摔性,很多人都會想到諾基亞,但諾基亞在現如今的手機市場普及性明顯不如其他品牌。而在今年,榮耀手機開始耍出了新招——推出一創意廣告,鐵證榮耀手機才是“堅強者”。

          這是一支榮耀測試手機性能的宣傳片,讓手機歷經各種考驗,包括油煙考驗、零下40度的超低溫測試、高達55度的超高溫測試、殘酷的刮擦實驗等,最后用結果彰顯:榮耀手機的性能強大。

          所以,榮耀手機通過展示這優質的手機性能來加強用戶對其產品的認知,刷新用戶的榮耀手機原有的印象。從用戶的角度考慮,用實驗證明,體現產品的最大價值,從而滿足用戶對手機產品的各種需求,也引導用戶對榮耀手機產生正面的認識。最后也突顯了“生活中1%的可能,也要100%的做到”的品牌理念,然而,既有可看性,又“用實力說話”的產品廣告,自然會把人征服得心服口服。

          網易云音樂

          主題文案:“遇見你真好”年度聽歌報告

          點評:2018年的網易云音樂的年度報告,居然在2019年的第四天才遲到出現,網易云音樂的“遇見你真好”年度聽歌報告,又雙叒叕刷屏了……

          眾所周知,網易云音樂于2013年4月23日正式發布,也是國內首個以“歌單”作為核心架構的音樂APP,每次網易云音樂的營銷與“走心”產生了密不可分的關系,大眾千呼萬喚始出來的網易云音樂年度總結報告終于出來了,雖然QQ音樂、酷狗音樂也在年前亮出了年度音樂總結,但偏偏是網易云音樂的年度聽歌報告刷屏了。

          這次的年度總結,滿足了用戶對音樂的需求,也滿足了一些有情懷的用戶,而且其歌單給予用戶滿滿的成就感,輕易地完成了一次階段總結。吸引更多用戶參與其中,紛紛曬出自己的年度歌單報告,使得這次網易云的年度聽歌報告,引發了廣泛的傳播。

          屈臣氏

          主題文案:“做自己,美有道理”

          (掃描二維碼觀看視頻)

          點評:就在2019年到來的鐘聲一響起,大家便紛紛立了新的flag,而屈臣氏上線的H5,彰顯著“做自己,美有道理”的品牌主張,剛好迎合了各大女性在新的年“追求更完美的自己”的美好愿望。

          視頻中的“四位小姐姐”show出了“不跟隨、不妥協、不偽裝”的模樣,還有人的語言配合動感的畫面,折射出現實生活中年輕女生渴望表達自我,追求個性與態度。呼喚大家在新的一年,立起了2019新flag。同樣也展現了屈臣氏就是一個有態度的品牌。

          只想說,在這2019新年之際,屈臣氏推出了這一波滿滿正能量的廣告,能俘獲用戶的芳心也是毋庸置疑的了。

          縱觀以上品牌營銷案例,可謂各有千秋,但共同點旨在使得品牌深入人心。

          然而,眾多品牌營銷過程中需要從用戶角度出發,都說,一個成功的營銷,是因為“走心”,在傳達品牌產品信息的同時,也能使得受眾與品牌成功產生情感的共鳴,讓用戶更深刻地記住其品牌。

          當然,我們也更期待2019,品牌主們能推出更多刷屏級的好案例。

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

          輕量級的時尚主題

          用心設計

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

           

          目前從官方介紹來看,UI組件還相當齊全,可用它來快速搭建漂亮、時尚的網頁和UI設計作品,下面一起來看看介紹。

          bootstrap 4 主題:shards

          關于 Shards 這個主題雖然免費,但并不代表它只有「表面」,制作者還為性能性能考慮,壓縮版僅12KB大小,實在太好了,以這樣的大小,制作出來的網頁直接能秒開。

          它并不是直接使用 Bootstrap 的設計樣式,所有的組件都是重新設計,以便得到統一的風格!

          著陸頁演示

          這是非常不錯的UI KIT素材 ,它還包含了10個額外的自定義組件,可以讓使用者快事制作著陸頁。

          演示地址:https://designrevision.com/demo/shards/extra/app-promo.html

          演示地址:https://designrevision.com/demo/shards/extra/agency-landing.html

          UI 組件演示

          Shards 含有豐富的 UI 組件,網頁端常用的元素幾乎包含了,大方便用戶自由定制。

          顏色:

          字體

          圖標支持900+ Material icons 和 Font awesome 兩大圖標庫!

          表單上的細節,也不容忽視:

          還有日期組件的設計:

          卡片

          按鈕

          導航菜單

          我想這些漂亮的元素,已經足夠你設計一般的網頁,即使不夠,也完全可以自己利用 Sketch 源文件或 HTML 模板再創作。

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

          用迪士尼動畫原則,提升UI動效體驗

          用心設計

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

           

          迪士尼動畫的12條原則是設計師必須要掌握的經典指導性原則,是由Ollie Johnston和Frank Thomas在他們的書《The Illusion of Life》中提出來的觀點(譯者注:這本書在豆瓣的評分有9.3分,值得一看)。這些原則最初是用來為動畫片這種傳統的形式設計的,然而,這些原則也同樣適用于UI設計。所以,我想在這里做一個有趣的嘗試,看能否將這些動畫原則聯系起來。

          用迪士尼動畫原則,提升UI動效體驗

          一、擠壓和拉伸

          在動畫中,擠壓和拉伸代表了物體的重力,質量,重量和靈活性。舉例來說,當一個彈球在它撞擊地面時會發生形態變化,就是擠壓和拉伸。

          在界面中,擠壓和拉伸很容易就聯想到按鈕。當一個按鈕被按下時,就可以理解為受到了擠壓,通過控制按鈕的擠壓和拉伸,我們可以很輕易的做好一個按鈕的交互動畫。除了按鈕之外,這種原則也可以應用于UI中的任何交互元素上。

          按鈕在交互時的擠壓和拉伸

          擠壓和拉伸被應用于側邊欄

          二、預期動作

          讓觀眾能預先知道接下來將會發生什么,它是先于下一步會發生的動作。舉例來說,迪士尼動畫里經常有從高空往下跳躍時會先彎曲膝蓋再跳、正在跑步的人要停止跑步前會逐漸變慢步伐等等。

          在界面中,懸停狀態就是很好的例子。當我們把鼠標懸停在元素上時,元素會提供反饋,表明它是可以點擊的,并且在點擊時,又會有一些別的反饋。

          懸停的交互通常會暗示這個按鈕是可以點的

          在有水平滾動界面里,通常在交互時會顯示下一個元素的部分內容。這其實是一個很好的例子,因為它是在告知用戶下一步的一些信息。

          三、時間節奏

          在傳統動畫中,時間會決定關鍵幀的繪制方式。幀數越多,動畫就越流暢,同時也更慢,時間能夠給動畫賦予情緒和性格。

          時間的節奏感是任何動畫的基礎,速度在元素編排中起著非常重要的作用。速度太慢,用戶會不耐煩,速度太快,用戶又會錯過一些內容。一般來說,大多數UI動畫在200-600ms之間,其中懸停和反饋交互時長大約為300ms,精細的轉場動畫大約在500ms。也可以去參考谷歌的動畫規范(https://material.io/design/motion/speed.html#duration),里面非常詳細的解釋了每種動畫類型的持續時間。

          一些設計系統,如Carbon(https://www.carbondesignsystem.com/guidelines/motion/)、Lightning(https://www.lightningdesignsystem.com/guidelines/animation/styleguidelines/)都把運動的節奏感視為一個很重要的方面,并為每種類型的過渡都制定了嚴格的規范。

          右邊的過渡動畫顯得太過于漫長,繁瑣。

          四、漸快與漸慢

          在現實世界中,大多數物體都遵循著緩動運動規律。也就是說,物體的運動并不會瞬間開始或瞬間結束,就像一個物體自由落體,也是一開始很慢后面才變會變快。

          左側的卡片是沒有緩動的,右側的是帶有緩動的,看起來會自然很多。

          給UI中的元素加上緩動會讓它看起來更加自然,緩動和節奏感都是可以有效的提升動畫的品質。

          五、呈現方式

          舞臺中的表演需要合適的編排才會精彩。也就是說,對象在場景中如何擺放,每個動畫又如何出現,關乎演出的質量。通過這種編排,能夠將注意力引向最重要的角色。

          在界面中,呈現方式能夠決定元素的位置,以及在交互時,它應該如何編排才能將用戶的注意力引向預期的元素。

          比如現在有一個基于興趣的音樂APP,對這個應用來說,最重要的事就是讓動畫引導用戶選擇他們所喜歡的音樂。因此,有必要將類似的操作與其他元素分開編排,有目的的引導用戶。

          六、弧形軌跡

          一個從高處拋出的小球,運動軌跡會做拋物線軌跡運動,弧線能使物體的運動更加自然。

          在界面中,沿著對角線的元素沿著弧線軌跡將會使運動變得更加自然。當需要凸顯出元素的運動路徑時,多嘗試使用弧線軌跡。

          通過對比,能夠發現右側的弧線運動軌跡會比左側的直線運動軌跡顯得更加自然。

          七、附屬動作

          在動畫中,次要動作能夠起到烘托主要動作,比如動畫中的角色在走路時,頭部的晃動就是次要動作,卻能夠讓角色行走顯得更加自然。

          在界面中,次要操作能夠起到強化關鍵動作,當元素需要向用戶提供反饋時,這個方法非常管用。所有的微交互都是基于這個附屬動作原理。

          按鈕邊上的粒子效果強化了主按鈕的點擊效果

          八、夸張和吸引力

          場景中的重要角色通常會采用一些比較夸張的動作來獲得更多的注意力。

          在界面中,重要的交互也會通過一些夸張的動畫來引起用戶的注意。谷歌設計規范中的FAB按鈕就是一個很好的例子,FAB按鈕在不動的時候也比較能引起注意,因為它通常會帶有比較鮮明的顏色,并且是獨立懸浮在界面元素之上的。當它被點擊時,FAB的動畫被放大,把整個界面都占滿,使得它完全占據用戶的注意力。

          FAB 夸張的交互形式

          對于支付這么重要功能的按鈕,通過夸張的動效引起用戶的注意

          九、跟隨動作和重疊動作

          想象一只兔子從高處跳下來,當兔子開始起跳時,它的耳朵動作會與身體動作發生錯位。然后當它著陸時,它的身體停下來了,但是耳朵還在動。前者稱之為跟隨動作,后者被稱為重疊動作。其原理說的就是:沒有任何一種物體會突然停止,物體的運動是一個部分接著另一個部分的。

          在界面中,可以使元素在停止之前超過它們原本的位置,使得元素運動更加自然。(譯者注:大白話就是我們常說的回彈效果。)

          界面有一定的回彈,會顯得更加自然。

          當界面滾動時,文字會跟隨圖片的運動,圖片與文字以不同的速度運動會更加自然。(譯者注:像是被拖著走的那種感覺)

          總結

          界面中的每一次交互都必須在適當的場景中精心設計,讓整個體驗更具沉靜感。在正確的地方使用這些原則能夠確保產品中的交互體驗更加協調自然。

          這些原則正在以不同的形式應用于當今的數字產品中,值得敬畏的是,30年前設計的一套規則到今天仍然適用。

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

          可讀性在網頁設計中的重要性

          用心設計

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

           

          當我們打開一個網站,我們會看網站界面是否美觀,交互是否符合人性化,布局是否合理等等,這些因素對網站起到一定的影響作用,但最根本影響一個網站的是整個網站的可讀性。
          良好的設計應該都是可讀的設計,如果信息都無法正常而清晰的傳達,那么設計就失去了意義。設計的可讀性和排版設計息息相關,與此同時,對比度的控制也是其中的核心。想要提升內容的可讀性,讓內容以更加順暢、更符合邏輯的形式呈現在用戶面前,可以通過以下幾種方式來提高網頁的可讀性。

          1.文字的可讀性

          要讓文字提高可讀性,可以通過調整字體樣式、外邊距、內邊距、顏色和對比度等參數來提高文字的可讀性。

          • 字體樣式:字體的樣式會影響可讀性。


          • 行長度:每行的字符個數對于整體的可讀性起著主要作用。如果文字段落非常寬,閱讀性差。同理,每行文字太短也不行,會給讀者的眼睛帶來壓力,造成混亂。

          • 外邊距和內邊距:和行距一樣,元素周邊和之間的空隙也影響著用戶閱讀文字本身。

          • 顏色與對比度:文字顏色與相應背景也至關重要。如果在綠色背景上寫綠色文字,就難以閱讀了。設計師選擇淺色字深色背景,或是深色字淺色背景,都是有原因的。對比使得字符容易閱讀。

          目前文章內容流行的字體是14PX(像素),這樣不容易造成視覺疲勞??梢越y一去設置全局的字體大小,包括行距。

          除此,文字鏈接最好用顏色或是其他樣式跟正文區分開來,這樣讀者可以清楚的知道哪里可以點擊。例如:可以給a標簽寫個下劃線代碼text-decoration: underline;。

          2.段落的可讀性

          段落的可讀性一樣可以用過文字和圖片來提高。文字方面跟上面提到的,可以通過字體樣式、外邊距、內邊距、顏色和對比度等參數來調整之外,還可以通過段落行距來調整字段間距。

          • 行距:每行文字間的間距也同樣重要??纯催@篇文章,如果每行文字都與上下兩行粘在一起,你就無法理解這些句子。

          可以從上圖看出,文字段落之間不留白可讀性不高。右邊的標題和段落之間、行與行之間和段落與段落之間都留了一定的距離,所以整體會顯得更為整潔和可讀性高,這些在網站當中用Margin、Padding和Line-height可以來調整留白的大小。切記,行距大小不是越大越好,一定要適當。


          在通篇文字的文章當中也可以考慮適當的穿插一兩張圖片進去,配圖可以提高文章的可讀性。

          3.區塊的可讀性

          區塊間也要有一定的間距才能提高區塊的可讀性。

          區塊留白這個有點類似上面的文字段落留白,在網頁當中,每個區塊與區塊之間也要適當的留白,而這個留白主要還是體現在Margin和Padding上。如果取消兩個區塊的Margin和Padding,那兩個區塊的內容會聚集在一起,這樣不利于觀者去區分區塊之間的關系,也不利于閱讀。所以一般我們在給網站做界面的時候,都會設置一定的間距,就像蟬知系統中默認的間距是7px,當然,這個間距的大小都是可以調整的,看你怎么去設計這個頁面和頁面的整體風格是否和諧而定。

          可以看到上圖左側區塊之間的間距為0,整體區塊和區塊之間看不出間隙,給人擁堵的感覺。但是右側留有一定的間隙,所以看起來比較舒暢,可讀性也相對高很多。

          4.圖片的可讀性

          為什么說圖片也具有可讀性,要知道一張好的幻燈片設計可以起到一定的作用,大部分的網站第一眼看的就是幻燈片,所以圖片的設計也不能忽視。
          圖片的設計可以通過對比來設計,比如色彩對比、字體對比等。切記勿用復雜的背景來當幻燈片,這樣標題在畫面上就不夠突出。

          上面的例子,顯而易見,當圖片背景比較復雜的時候,文字的閱讀性就差一點。第一張圖的背景比較簡潔大方,加上不用設計的字體,自然而然的主題就凸顯出來了。

          5.導航的可讀性

          說到導航,這個其實是整個網站架構當中最重要的,所以我也把這點放到最后來講。網站一定要有清晰的導航,方便讀者瀏覽和了解整個網站的架構。所以在設計導航的時候一定要考慮到瀏覽者的習慣。

          • 導航要簡單明了,避免奇怪的布局。

          上面這個導航不是說做得不好看,而是找交互的設計用起來讓用戶會有點不舒服,導航下拉時,除頭部內容整個頁面整體下移,這也可能就是設計師特意做的效果,但是很明顯,效果不是特別出彩。

          • 導航點擊狀態下的樣式和普通樣式需要有明顯區別。

          上面的這個導航,點擊狀態下和正常顯示的樣式效果區別不大,所以識別性不夠高。

          • 導航的層級關系設計簡單點,最好不要超過三級。

          現在很多導航設計都將二級導航和三級導航放在一起,這樣受眾在瀏覽的時候也可以更清晰網站的架構。


          優秀的網站,通常在用戶體驗上非常用心,而網站良好的客戶體驗除了優秀的界面設計、合理簡潔的框架布局,還有一點至關重要——網頁的可讀性。


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

          為什么這些畫面更耐看

          用心設計

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

           

          在同樣的設計框架中,要如何快準狠找到最終傳達的信息?有時候選對圖片讓你的設計事半功倍。


          導語


          為什么視覺效果很重要,因為我們的大腦處理視覺信息的速度比其他信息快6萬倍。在同樣的設計框架中,要如何快準狠找到最終傳達的信息?有時候選對圖片讓你的設計事半功倍。


          阿思海姆《藝術與視知覺》曾經提到“視覺形象永遠不是對于感性材料的機械復制,而是對現實的一種創造性的把握,它創造的形象是含有豐富的想象性、創造性、敏銳性的美的形象?!?


          這段話是不是太抽象了?簡單總結來說意思是:美是有規律。


          這本出版于1962年的經典書籍,書里說到提升美感的十個點,分別是平衡、形狀、形式、發展、空間、光線、色彩、運動、張力、表現。


          不要小看區區這10個詞語,里面暗藏著與美感相關的知識點。


          以大圖和小圖為例,給人的心理感受是完全不一樣。大圖更多給人以沖擊力的感覺。小圖則是平靜陳述內容。選有感覺圖片,建議根據這些選項再進行選擇。

           




          一、 說服力畫面養成法


          那么,圖片如何正確傳達信息呢?這不得不提,藝術與視知覺的平衡。我們在觀察一個建筑物的時候,以巴黎圣母院來說為例:當你第一眼看上去的時候很神圣,華麗的外表,中軸對稱的形式,讓人們對宗教產生了一種無言的崇敬。


          同樣的結構,將圖片給換成下圖時,給人完全沒有崇敬的感覺。


           

          同樣的結構為什么會有這么大的差異?和圖片給人的隱藏信息有很大的關系。


          小測試:上圖你能得到的信息時什么?

            ● 怪異?

            ● 螺絲釘?

            ● 不合常理?


          特異是能打破現有框架的元素,譬如一個人身掛著狗頭,絕對能快速吸引你的目光。因為和常識有所偏差,所以能特別吸引目光。


          返回平衡的話題,好設計都需要分析其平衡之處。就像杜尚的這幅作品《坐在黃色扶手椅上的塞尚夫人》,利用黃金分割的輔助線,以中軸對稱的形式體現平衡。同時,傾斜的躺椅和身體有形成另一種平衡。


           

          這種結構配合婦女的造型,形成一種端莊既視感。如果你有時間,再分析以前的繪畫,都能或多或少滿足找出畫面給人好感的原因。


          那么,有什么特征才會有這樣的感覺呢?




          二、 有感覺圖片的具有這些特征


          1、善用眼睛,影響他人


          眼神選圖的關鍵。我們都知道眼睛是人心靈的窗口,人類身上最迷人的部分,眼睛肯定算其中之一。


          很多小說里都會提到通過對方的一個眼神,就能確定那個人在想干什么。聽上去有點神奇,不過確實眼神有這樣的魔力。



          如上圖所呈現的狀態一樣。我們看到左邊的三個人的視覺焦點一致向右,我們的注意力也不自覺的往右邊的區域移動。


          怎么樣的眼睛是具有引導作用呢?


          可以參考以下這張圖,一般來說,當人臉的朝向了正面的時候,他的眼睛的引導力并不算很強。因為這時候他的眼神是盯著你看,并不會在畫面其它區域留下痕跡,所以引導的作用并不強。


          這就是為什么畫人像的時候,基本不會畫完全正臉的頭像,是一樣的道理。因為正臉的人像會顯得很嚴肅,并不生動。

           



          根據這樣的眼神理論,我們排版的時候就顯得很容易,只需要將重點的內容往眼神指向的方向放置即可。



          關鍵字:明確眼神方向



          具體請看下圖,我把標題文字放在眼神聚焦的地方,就會顯得特別醒目。配合粗體大標題,畫面內容主旨十分明確。



          相反我們將文字內容移到左側的時候,這種吸引力會弱化??瓷先ニ坪踹€不錯,但總感覺有點不對路的地方。就是因為眼睛的朝向是在畫面之外,而文字是在畫面內部,他們兩者產生了引導線沖突導致的。



          同樣在視覺語言中。左側跟右側的眼睛相互交匯到中間時就會產生一種對峙感。特別適合表現一種競爭和比賽的視覺效果。



          如果你喜歡,可以利用大小對比的效果,將同一張圖片進行重復排列,就像下圖所展示的效果一樣,能產生很特別的版式。


           




          三、 動作產生邏輯思考力


          選圖時,除了眼神能產生很強的吸引力之外,人物自身的動作也有類似的效果,比如人體動作或者手指指向的行為。


          仔細觀察會發現,我們用的鼠標指針就有類似的明確指向性。你會很清楚,它指向的頂端就是可以操作的區域。



          在圖庫里面搜索到關鍵字:『手指 指向』,能找到很多不錯的指向性圖片。尤其是比較親和的人物造型,或者快速聚焦某項內容時配合手指具有很明確的指引效果。


          一本日本暢銷的文案書里提到過一個觀點,什么是優秀的文案?就是看完之后,能讓人產生行動,這就是好的文案。



          關鍵字:有身體動作



          舉個例子:

            ● 迷人的姑娘,便宜的產品(狀態描述)

            ● 作為普通文員,她為什么擁有令人羨慕的小資生活?(動作描述)


          好的圖片也具備了這樣的特點,搭配手部動作,圖片具有很強的誘導性。



          人物的手部動作,可以清楚告訴用戶什么樣的內容是重點。就如同下圖所示的一樣。左側的圖片明顯要比右側的圖片更有吸引力。


          以往可能你并不清楚,為什么有這樣的不一樣的感受。經過上述分析的案例,應該就理解其中的原因了。



          同樣的指向性動作是可以連續搭配使用。圖片展示的效果如下圖,通過一個向左動作跟一個向下動作,形成了完整的指向型視覺引導方案。


          這個方案既有明確的引導性,也有人物間的大小對比,整體看上去會顯得比較完整和耐看。



          我們分析一下,如果將顏色去掉,效果是不是不一樣的?得到的是這樣的結果。


          可以明顯的感覺到, 圖一的指向性要比圖二好很多。



          試圖通過視覺點的分布,看看問題出在哪里?


          圖二視覺點會有兩個,第一個是往下的視覺點,一個是往右的視覺點。整體感受就會比較凌亂。


          相反,圖一比較明確,只有一個按順序移動的視覺點,即先向左再向下,最終觸達核心文字。








          四、 具象,遵循潮流的方向


          當你找到圖片之后,不清楚要做成什么風格的時候,趨勢可以幫到你。


          趨勢是從哪里來呢?



          關鍵字:具有明確眼神方向



          一般可以從各大時裝周得到,另外還有很多大型的設計網站,每年都會發布下一年的趨勢報告,那里也有大量的參考性案例。我們試圖挑選其中一個風格趨勢,配合我們找圖的技巧,看看能得到什么不一樣的結果。


            ● 大膽的用色(Bold Color) 




          大膽的用色風格有一個很大的特點,顏色使用特別大膽跟前衛,可以配合一定的矢量圖形搭配使用。需要采用多于3種的色彩,以及高飽和度色調。


          那么這個風格的特點,就可以整理成以下關鍵字:

            ● ins 

            ● 時尚

            ● 粉色




          挑選其中一張圖片作為主題,再利用初始用到的參照物分解原理,將其拆分成這三塊內容,即點綴,主題跟色調。


          為什么會選擇這張嘴唇的圖片呢?


          首先前衛風格使用的元素都會比較另類,于是圖片素材就需要滿足另類的特點。而另類廣義來說是超出原來的正常理解范圍。


          譬如:像嘴唇、鼻子、鞋子這類本不該出現的物體,取代了原本頭部的位置,結構成為了另一種獵奇的物體。



          仔細分析大膽前衛的風格。首先發現這些風格的圖片都會經過處理,不會直觀表現原來的樣子。意味著直接將找到的圖片拉進這種設計是不合適的。


          利用曲線跟色彩飽和度兩個參數進行特別的調整,形成下圖。當然如果你愿意,也可以變成其他任何高飽和度的色彩,形成的感覺也是差不多的。



           

          特別注意要利用對撞色的原理,配粗字體,參考波普風格元素,在關鍵字里添加上『波普』這個詞語會得到更多驚喜。



          最終形成的海報,如圖所示。






          五、 圖片傳達實驗室——迅速提高圖片魅力


          看了那么多有魅力的特征圖片,肯定要動手實踐,怎么將這部分的知識融入到選圖之中。


          我將這部分內容稱為圖片傳達實驗室理論,是以一個界面為例,結合我們選圖和處理圖片的技巧,形成一批有說服力的界面。


           

          目錄會分為發現問題,列舉課題,評價方案和實施策略。文字會以這四部分為主要核心,簡述整體提高圖片魅力的方法。

           


          在聊這個問題之前,我們不妨來看一下這張圖片,每日新聞的一張漫畫。好像沒有什么問題,就是一個有關特朗普跟普京的故事。



          但是我們試著換另一種角度去看。每個角度都能呈現不一樣的內容。雖然它們都是引用了同一張圖片,但是表達的意思卻是完全不一樣,另外所表現出來的視覺語言也是相當不同。



          這意味著一張圖片是可以被多次利用,而且只要你用的圖片尺寸夠大,局部是可以用作很多用途,你能創作的可能性就會多元化。




          1、發現問題


          我們以關鍵字『靜謐』開始,對這個技巧進行討論。通過搜索,在圖庫里面找到了這么一張圖片。初看下來沒有什么特別大的問題,顏色,圖形和構圖都還可以。


           

          試著將它植入到音樂界面里,得到了以下效果。用直接將圖片以默認方式嵌套到這個矩形里,能清楚的發現圖片下半部分顯得空蕩蕩。效果并不是很好,而且圖片的上半部分,文字和背景粘在在一起,造成的閱讀影響。


           


          2、解決的課題


          我們該怎么解決上述問題呢?很簡單,只要將圖片進行反翻轉可以了,最終形成以下所示的效果。


          拿到圖片,特別是這種類似背景的圖片,翻轉是很有用的技巧,它可以實現從不同的角度適用圖片。


            ● 文字:在圖片里顯得清晰。

            ● 重點:變得更有視覺焦點。





          3、列舉替代方案


          當我們找到了這么一個角度之后,可以分析顏色,進而列舉出更多可選的方案。


          也可以通過軟件,將圖片顏色進行抽離和分解的工作,快速形成一組可供我們參考的顏色。


          如圖所示,就能快速實現配色方案的目的。

           



          能列舉不同結果的方式還有很多,除了配色分類之外,我們還可以用以下3種方式。這里的每種方式與之前的素材整理法相似,都是一種快速擴展素材的模式。



          ① 以圖搜圖:


          這是一種快速得到圖片的方式,不用怎么動腦,只要你覺得這張圖片還可以,就能找到跟它相似的一堆圖片。


           


          ② 顏色關鍵字搜索:


          對目標圖片顏色的分析,列舉出顏色趨勢,并將這些名稱放到專業的圖庫里進行搜索。

           



          ③ 高級自定義搜索:


          可以只用普通引擎進行針對站點檢索,進行指向性搜索。你只要知道目標就可以針對搜索。


           





          六、 實施方案策略




          1. 權威高質量相關性圖片


          這部分主要是結合之前聊到的三個圖片特征,進行組合搭配。如果只有背景的畫,圖片的魅力是不太夠,這時候我們需要引用人物的造型。


          人物和靜謐這個主題相關,我們找到了有靜音動作的圖片,具體如下圖所示。


          我們直接將這張圖片摳出來,放到我們之前整理的背景里的話,明顯是顯得有點格格不入了。因為兩種畫面的風格不太一致,這就需要進行統一的調整。



          調整會利用到photoshop 里面的曲線工具,色階工具以及曝光工具。分別針對亮色系跟暗色系做了兩套版本進行對比。做出來的結果,亮色系對整體的界面更有幫助。


           



          2. 能引起行為的動作按鈕


          還記得前面的章節提到,一個令人引起動作的手勢,是很重要的行為嗎?


          我們可以通過眼神和手部動作,進行視覺焦點的鎖定,類似下圖所示的結果,并且結合圖片合成的技巧進行一致性的輸出。


          對于眼神望向右邊而言,『80%和購買按鈕』顯得就非常明顯。

           




          3. 減少視覺噪音


          完成上面那一步還是不夠,我們試圖減少一點視覺噪音。什么是噪音呢?就是對整體畫面沒有幫助,卻能吸引觀眾目光的元素。往往這些東西都會出現在背景里。


          我們都知道,如果背景越復雜的話,前景的重點性會減弱。這一步可以對背景進行簡易化的處理。最終形成的樣子,如下圖所示。






          4. 款式一致


          除了上述能為圖片加分的選項以外,還有一點,就是當多圖片使用時,一定要注意款式的一致。





          七、 延伸思考:技術思考


          已經簡述很多關于圖片處理的技巧,另外還有一個很重要的概念,我也將此放在這里進行延伸思考。吉薩金字塔和達芬奇傳世畫作《蒙娜麗莎》有什么關系?它們都是基于黃金分割設計!


          黃金分割是一個數學比例。我們在大自然中很容易找到這樣的比例,當它用于設計時,能創造出有生命力的、純天然的視覺作品,愉悅我們的眼睛。



          無論是設計或是攝影構圖,合理使用黃金比例可以讓你的作品更美觀,因為這套系統已經是被歷史驗證過,超越感覺的一般性方法。


          但黃金比例不只上圖所示的樣子,還有許許多多的形式。一般我們使用時,將主要元素放在交界線的位置就可以了。



          但是我們適用設計軟件里并沒有這一選項,自己動手做的話明顯也不是很合適。這時候,我們就要使用到萬能的插件。


          在介紹插件前不妨看一下,我們利用黃金比例去分解世界名畫,可以得到這樣的結果。就是主要的元素都能放在線段交界的部分。這就是為什么有些版式,看上去很有美感的原因所在。



          那我嘗試用這種ps插件,將生成的黃金比例圖,放到了我們所需圖片里。插件有個地方,它可以根據的圖片尺寸。自動適配一個黃金比例圖給你。


            ● 插件一:Divine Proportions Toolkit


            ● 插件二:GoldenCurve黃金分割線GoldenCurve - PHOTOSHOP中的黃金分割線





          總結:


          具有說服力的畫面是什么樣子呢?或者換一種說法,什么是耐看的畫面?應該就是能讓人產生行動的效果,注意『行動』這兩個字很重要。


          什么樣的情況會產生行動呢?我們可以利用眼神,動作以及趨勢塑造有動作感的畫面。一般,有感覺的設計也會緊緊遵循這樣的原則,另外我們對這套理論進行實踐,得出快速提升圖片魅力的方式,即發現問題,列舉課題,評價方案和實施策略。

           

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

          日歷

          鏈接

          個人資料

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

          存檔

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