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

          首頁

          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界面設計 、 包裝設計

          原來日本設計還能這么萌!53歲老頑童的“腦洞之作”風靡日本!

          資深UI設計者

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

          說起日本設計,你腦子里冒出的第一個印象是不是「性冷淡」

          MUJI、優衣庫、nendo工作室,清一色的簡單灰白掛,看了就讓人想到「斷舍離」。

          但是,并非所有的日本設計,都是這個調調的,也有可能是下面這樣的。

          平淡無奇的紅綠燈,搖身一變竟然變成了楓葉的形狀?

          綠、黃、紅三色正好對應不同季節下楓葉的顏色,有了它就算一路碰到紅燈,情緒也不會暴躁咯。

          那些乘電梯永遠不看腳下的小孩,銀杏落葉鋪成的電梯,足夠吸引你的目光了吧?這玩意兒可比「注意腳下」的標語好使多了。

          以上這些腦洞大開的設計全都來自于日本GOES公司創始人前田賢剛,他是個53歲的老頑童,低調到日站君只能找到他的這么一張小照片。

          雖然公司總共就5個人,但卻和資生堂、奧林巴斯、加拿大觀光局等大客戶都合作過。

          看了他們的作品之后,或許會顛覆你對日本設計的認知。原來日本人認真賣起萌來,也是一把好手吶!

          居家好物篇

          看到這個日站君忍不住哼出聲「童年的紙飛機終于飛回我手里~」

          但是千萬別真飛出去,因為它的真實身份其實是一個鹽罐。

          「靈魂撒鹽」都弱爆了,「紙飛機撒鹽」了解一下,做飯的時候還能順便追憶下童年。

          欸,這堆雪是干嘛的?

          答案揭曉,其實這是一個門擋。

          或者用來做書立也可以。永遠不化的積雪,簡直圓了南方孩子一個「看雪夢」,以后再也不用花5塊錢,雇北方人在雪上寫名字了。

          雖然摸清了前田賢剛「不按套路出牌」的秉性,但日站君看到下面這個還是迷茫了,曲別針被掰彎了?

          而它的實際用途竟然是固定海報的釘子!一眼掃過去,毫無違和感。不知道的可能還想求鏈接,哪家的回形針這么剛連墻都能戳穿。

          回形針都能釘海報了,所以這肯定不是普通辦公用的燕尾夾。

          沒錯,從底部的桿子就能看出些端倪,人家就是個吧臺椅。

          事情變得沒那么簡單了,看GOES家的作品,仿佛演變成了一個「猜猜我是誰」的游戲。偶爾加班來一瓶啤酒,還挺有情調的。

          哈哈你又猜錯了,它只是提醒你工作的便利貼。

          有情調的來了,磁帶卷筆刀。

          高科技儀器卷筆刀,連削鉛筆都能變成一件有儀式感的事。

          吃貨篇

          一塊吐司,看上去松軟香甜,讓人忍不住想咬上一口。

          不過別真咬,因為它是個如假包換的手機殼。這樣的手機殼千萬別給我,我每天都會餓醒的。

          藏了塊「蛋糕」的茶杯,有了它喝水都是甜甜的。

          一箱來自遠方的包裹,中間透出的紅蘋果又大又圓,任哪個快遞小哥看了,都會輕拿輕放吧。

          嘿嘿又被騙啦,人家只是一卷膠帶,就是長得逼真了點。

          夏日炎炎,來把「五花肉扇子」扇扇風。友情提醒,別在午飯前夕使用,不然可能會慘遭同事群毆!

          再穿雙「牛排拖鞋」,總覺得腳底板好像油油的。

          冰淇淋掛鉤,牢固性有待檢驗,總擔心天一熱就化了……

          還有新鮮出爐的「蔬菜瓜果戒指」,青椒、草莓、胡蘿卜、玉米,應有盡有,敢戴出去的,日站君敬你是條漢子。

          萌寵篇

          之前的巧克力總算知道是被誰偷吃的了,巧克力上的貓腳印透露了一切。

          想和你家阿喵玩躲貓貓嗎?紙袋子就是個不錯的藏身處噢,露出的一截小尾巴,能萌死個人。

          往袋子里一瞅,果然在這兒躲著呢。

          喵星人款「暗中觀察」插座,你家主子盯著呢,看你還敢忘拔插頭!

          路障也貼上阿喵的照片,醒目值立馬翻了個倍。

          這只萌萌的小兔子表盤,總覺得少了點什么。

          如果你穿的是小白鞋,調整好角度抬眼看,少的兩兔子耳朵終于補齊了。

          難以想象,這些居然全出自一個大叔之手,所以說,千萬別小看大叔,他可能比20多歲的你更有少女心。

          宅男篇

          一個畫著美女的扇子,就能夠成為宅男愛用品了嗎?

          那是你沒get它的正確使用方式,只要角度找的好,就能營造出下圖的場景,簡直是單身男性的福音哇。

          誰說露肩裝是女性的專屬?

          男生照樣可以擁有。穿上它,保準你是整條街最靚的仔。

          精神病人思維廣,中二少年歡樂多,漫畫式鏡子專為每一位中二魂爆棚的你而設。

          每天起床一照鏡子,誰還不是故事的主人公。

          一般的傘都不夠符合中二少年的氣質,得撐這一把才行。

          別人在明你在暗,再也不怕和陌生人進行迷之眼神對視了。

          要是嫌那把不夠炫酷,八星八箭全鉆石豪華版足夠閃瞎你的眼了吧?

          下面是新時代年輕人必備的手機三件套,自帶打光板的手機,絕對的合影利器!

          手機也得好好防曬,「臉基尼」也給用上。

          手指不夠長的少年,只需一根「手指加長器」,單手按到手機屏的各個角落,從此不再是夢。

          這突破銀河系的腦洞,日站君不禁想為它們雙擊666。

          GOES公司的理念是要做「引人注意而獨特的idea」,看了他們的作品應該沒有人會覺得他們沒做到吧。

          人們總會忽視眼前的風景,前田把生活中的小物件摘出來,再融入自己的腦洞。

          于是當大家再看到它們時會眼前一亮,然后會心一笑,感受到創意的美好,這就是設計的意義吧。

          當性冷淡、極簡風大行其道,他們卻致力于把普通平凡的事物玩出新花樣,告別無聊的日常。果然有趣的靈魂才是萬里挑一!

          以上小物均為良心介紹,如有種草概不負責,別問日站君要鏈接,因為日站君也沒有。2019年都到了,我們也稍微來點改變唄,或許比起性冷淡,不如賣萌來的贊。

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

          為什么這些畫面更耐看?

          資深UI設計者

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


          導語


          為什么視覺效果很重要,因為我們的大腦處理視覺信息的速度比其他信息快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中的黃金分割線





          總結:


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


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

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

          用心設計

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

           

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

          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界面設計 、 包裝設計

          如何合理的使用插圖來擴展用戶界面?

          用心設計

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

           

          合理的功能是良好的用戶體驗基礎。但我們都只關注函數嗎?用戶是人,他們不僅有解決問題的邏輯,也有情緒支配他們的決定。



          合理的功能是良好的用戶體驗基礎。但我們都只關注函數嗎?用戶是人,他們不僅有解決問題的邏輯,也有情緒支配他們的決定。支持這兩種方法的訣竅是將插圖應用于web和移動接口。讓我們看看它們是如何增強UI設計的。



          一、什么是插圖?


          插圖使一個故事的一個片斷可視化。它展示了一個過程、動作、環境等的視覺解釋。它與純粹藝術的不同之處在于交流的目的:插圖提供信息,傳遞信息。它們通常是為某種目的而創建的,并集成到各種出版媒體中,包括印刷媒體和交互式媒體。插圖也成功地作為一種裝飾,添加風格的環境或媒體應用。



          二、插圖對用戶體驗的好處


          在這個信息消費迅速而龐大的時代,視覺效果的作用越來越大。根據S.Thorpe,D.Fize和C. Marlot 對人類視覺系統處理速度的探索,人們平均需要150毫秒來處理圖片,并且需要100毫秒才能理解其意義。圖片更容易記憶和回憶,不同語言的人,無論他們的閱讀能力如何,他們傳達的信息都是清晰的。這就是為什么信息圖、圖標、插圖和其他圖形設計師的資產被廣泛使用的原因。



          簡單的說,在UI中使用自定義插圖有五大好處 :


          • 它們比文本更快被感知,因此用戶可以快速覆蓋關鍵信息


          • 它們支持頁面或屏幕的可視層次結構


          • 它們增強了界面的美感和情感吸引力


          • 它們激活了色彩、形狀和視覺隱喻的心理


          • 這些都很吸引人,并吸引用戶注意必要的細節



          應用于網站和移動應用,首先,插圖是另一個功能元素,只有在那之后裝飾。要發現上面提到的所有好處,分析目標受眾并找到有助于用戶導航和實現目標的想法和隱喻是至關重要的。另一件事是UI插圖應該是簡潔的,并且適當地使用:過高的圖形強度會增加界面超載的風險。



          三、UI插圖的類型


          在現代界面中,我們可以找到各種風格和方向表達在插圖中,從矢量圖像和圖標到精心制作的數字藝術品。作為功能布局元素,它們可以滿足不同的需求和功能。



          新員工培訓


          “入職”是從就業和人力資源領域引入UX設計的概念。它處理一些步驟和技術,幫助新手理解接口如何工作。此外,當新特性和更新被引入或用戶與非典型功能交互時,它也被應用。


          許多數字產品,包括像Dropbox和Slack這樣的大公司,有效地為這個目標應用了插圖。支持有意義的藝術作品的入職支持,允許更快的解釋功能,并使UI生動。




          主題

          另一種類型的插畫是那些能立即設定網站或應用的總體主題和情緒的插畫。它們呈現出強烈的視覺隱喻和聯想,從互動的第一秒起就建立起一種情感訴求。它節省了用戶的時間和精力,支持積極的用戶體驗和創造必要的氛圍。




          教程

          教程和工具提示插圖展示了可視化提示。這種類型激活了解釋的潛力,其主要目的是澄清或鼓勵具體的行動。對于不喜歡或無法閱讀副本的人來說,這種類型的圖像使UI更加友好。它尤其適用于屏幕空間有限的移動界面。另一方面,這意味著即使是最細微的細節都應該考慮清楚,不要引起誤解。顯然,教程插圖是針對青少年和兒童的應用程序的一個好主意。




          獎勵

          獎勵是另一種流行的界面插圖。例如:徽章、貼紙、獎章、星星、杯子以及其他類似的東西都為用戶體驗增加了游戲化,標志著用戶的進步。有什么比感覺自己是贏家更甜蜜的呢?




          吉祥物

          吉祥物是人格化的角色,可以輕松地為界面添加擬人化。它們成為界面和用戶之間的一種溝通者。吉祥物對網站或應用程序的聲音和語氣做出了很大貢獻,甚至可以成為產品的隱喻面孔。這些圖像的象征性使它們令人難忘:它們將生命注入到互動之中。



          娛樂

          有時候,UI插圖的主要目的是娛樂用戶。你可能會說它與功能無關,這可能是對的。但它直接關系到情感和審美滿足感。誰說美麗、時尚或者只是樂趣不能成為留住用戶的可靠因素?



          寫在最后

          Aarron Walter 在他的“ 為情感設計”一書中說:“我們一直在設計可使用的界面,就像廚師烹飪可食用食物一樣。當然,我們都想吃有營養價值的可食用食品,但我們也渴望味道。當我們能夠使界面既可用又令人愉快時,為什么我們滿足于使用它呢?插畫有一種強大的力量,它能給每一件接觸到的東西添加美感、情感甚至故事情節。這使得它們值得作為一種增強用戶界面的強大方式來考慮。

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

          帶你了解荷蘭設計史的前世今生(下)

          資深UI設計者

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

          在荷蘭的現代設計當中,有兩個人物無法繞開,那就是風格派里的twins──杜斯伯格與蒙德里安。根據出生年份,蒙德里安是比杜斯伯格年長11歲的,長者為尊,所以我們先來聊聊蒙德里安。

          去年荷蘭搞了一個活動,叫「風格派100年」,意思是從1917年開始計算到2017年,而海報上面就用了一個人物,就是蒙德里安。而且最后還將2017年定為「蒙德里安年」。

          其實按歷史上的蓋棺論定,風格派的創始人是杜斯伯格,那為什么海報不放杜先生呢?原理很簡單,就是蒙德里安比杜斯伯格要紅。

          蒙德里安最廣為人知的特點自然就是畫格子和討厭綠色,畫格子好理解,但為什么要討厭綠色呢?他討厭綠色的程度到要將家里的綠色植物的葉子涂成白色,作為一個男人如此討厭綠色難道是跟他的一些人生經歷有關系嗎,這些自然是一個謎團,但是多數人愿意接受的一個答案是,他討厭自然。

          蒙德里安被稱為「一輩子畫格子的男人」其實是一種誤解,他并非接觸畫畫就開始畫格子的,反而是畫他后來被認為很討厭的大自然。比方畫荷蘭風車、教堂、蘋果樹,色彩鮮明,造型準確,所以20出頭已經是繪畫界的一股清流及潛力股,但為什么后來他變了呢,據說是因為一個男人。

          這個男人出現在1911年,那就是西班牙鼎鼎大名的畫家畢加索先生,畢加索和布拉克在荷蘭的阿姆斯特丹舉辦了一場立體主義畫派展。在設計史太濃當中如果大家注意一些年份數字就會發現原來如此多的大師是在同一個時期存在、彼此認識或者彼此影響的,如果要歸納原因只能說是時勢造英雄,因為時勢的形成會讓一些有共同特點的人同時順應機會出現。比方中國90年代的搖滾人物,及后來中國互聯網創業大潮中的騰訊百度及阿里巴巴等,都成為順勢而為的既得利益者。

          蒙德里安參觀了畢加索跟布拉克的畫展,被他們的作品感動到一塌糊涂,因為立體派講究的立體事實和明確客觀都是蒙德里安當時希望追求的目標,于是他那根潛在的抽象神經開始膨脹和律動,他如饑似渴地吸收著立體主義的養分,同年畫出了一張習作叫《灰色的樹》。畫中的樹帶有一些橢圓形構圖,這是模仿了畢加索與布拉克的立體派風格,但其仍然帶有不少具象元素,而他在1912年創作的相似尺寸的樹系列習作《花叢中的蘋果樹》(Apple Tree in Flower),雖然大致構圖和《灰色的樹》很相似,但這幅畫已經明顯更加抽象,更具形式感,畫面被一個個小的塊面魚鱗般拼接起來。

          坦白說從《花叢中的蘋果樹》開始,蒙德里安就不容易看懂,這個時候的蒙德里安去了巴黎發展,因為他覺得那邊的環境更加適合從事藝術探索,在法國巴黎他遇到一群同他一樣在尋求現代性、革新藝術形式的藝術家、作家、思想家,對他的蛻變產生了不同程度的影響。

          隨著對立體主義的探索跟創作,他又慢慢覺得立體主義仍然達不到自己想要的純粹實在,他希望有更加本質的表達。玩熱抽象的康定斯基跟玩冷抽象的蒙德里安都十分熱愛音樂,他們都曾借用音樂的概念放到自身的創作上,比方節奏與韻律??刀ㄋ够旧砭褪且幻麡I余大提琴手,而蒙德里安人生中最后的一張作品就叫《百老匯爵士樂》。

          在巴黎的那段歲月后期蒙德里安已經開始嘗試從立體主義繪畫變成一個畫格子的男人,只是這個時期的格子一般都沒有鮮明的顏色,體現的只是類似音樂里的節奏與韻律。

          1914年時候,蒙德里安因為第一次世界大戰所以回到荷蘭,遇到他生命中第二個重要的男人,就是杜斯伯格,兩人在抽象藝術上有很多共同話題,越來越欣賞對方,于是決定組隊一起玩。他們在一次很偶然的機會中見到一名彩色玻璃藝術家的作品,其中僅僅使用三原色的色彩計劃讓蒙德里安深受啟發,而這個時候,時間已經來到1917年,他跟杜斯伯格創立了一本奠定風格派江湖地位的雜志,就叫《風格》。而這一年也正是里特維爾德創作「紅藍椅」的同一年,而更準確的說法是,這個椅子在早幾年已經創作出形態結構,而受《風格》雜志的影響,才涂上了紅藍黃顏色,不知道這算不算靠蹭熱點成名的典型案例。

          這個時候的蒙德里安就開始一直創作不同的紅黃藍格子畫,這些畫甚至連名字都懶得改,基本就是《紅黃藍》大哥,二嫂,表弟,堂弟之類的關系,普遍以《紅黃藍構圖》加數字來命名。我們看到這批作品時,會想這不就是扁平化風格的鼻祖大師嗎?

          好了,這個時候我們要留一點戲份給杜斯伯格。杜斯伯格1883年出生于荷蘭的烏得勒之。他在早期撰寫過寓言、劇本以及通過臨摹博物館的名畫自學繪畫。25歲那年,他首次舉行個人作品展。其后,他開始發表藝術評論,創作詩歌作品《滿月》,說明是有文學根基的。自1916年(33歲)起,他參加了先鋒派的所有重要活動,這個時候他已經認識了回國的蒙德里安,隨后和他在荷蘭萊德創建「風格派」及其同名雜志。

          所以嚴格一點來說,杜斯伯格類似搶注域名的性質,這個風格可以說是他跟蒙德里安一起探索形成的,但是他拿到了奠基人名分。當然我們也可以看看杜斯伯格的作品,其實跟蒙德里安的作品非常接近,都喜歡玩格子,區別是我們會在他的作品中看到一樣差異,就是他玩了斜線與對角線,這一點后來導致了他跟蒙德里安的決裂。

          這個時候時間已經去到1920年,也就是德國包豪斯也已經成立了,而蒙德里安在跟杜斯伯格鬧翻后去了巴黎,在巴黎他因為這種全新的藝術形態加上不斷通過寫作、演講、發表作品等方式而成了大名,并成為風格派的代表人物,所以在搶注域名這個競爭中,蒙德里安順利地掰回了一局。

          而1921年時候杜斯伯格也開始到德國包豪斯參觀,期間他對這所學校非常感興趣,甚至決定將《風格》雜志遷移到包豪斯來出版,他在講學中高度贊揚包豪斯的行動,卻又同時批評包豪斯的發展方向。他的《風格》雜志就類似現在的自媒體大號,擁有非常巨大的影響力,所以這對格羅皮烏斯也造成困擾,這也是杜斯伯格一直以來的性格,就是性情變幻無常。當時也正值俄國構成主義觀光團在德國游學,他可以當天對他們的作品高度贊揚,但是隔天又提出猛烈批評,完全不按常規套路出牌。另外關于他的一些故事也可以詳見《用一篇超全面的好文,帶你了解包豪斯的前世與今生》,他跟包豪斯的伊頓在著裝上喜歡一黑一白,相映成趣。

          包豪斯里有一位著名的教員叫費寧格,他倒是喜歡杜斯伯格直接凌厲的性情,因為杜斯伯格雖然不按常規套路出牌,但是批評的時候理據都非常充分在理,而且杜斯伯格本身具備深厚扎實的藝術素養,并且當時他擁有自媒體大號,被他罵也是出名的一種渠道,所以費寧格建議格羅皮烏斯可以游說杜斯伯格干脆在包豪斯開課程,成為特聘教員,開明的格羅皮烏斯同意了這個建議。

          但是這樣導致了包豪斯一場噩夢,因為杜斯伯格雖然在藝術理論上有主張,但是教學上傾向無政府主義,說白了就是完全不服從組織的管理與安排。當時位于德國魏瑪的包豪斯搞結構主義與達達主義大會,但是在教學上這些激進思想并沒有給學生帶來太多實質性的支持與幫助,課堂上的杜斯伯格大吵大叫,而他的夫人則在一旁用鋼琴演奏構成主義的非調性音樂。關于什么是無調性音樂,大家可以看看網易云音樂這些朋友的評論:

          所以現場非常混亂,簡直無法進行下去,而且他還經常在包豪斯的課堂上批評包豪斯是非理性的,是浪漫主義的,而自身卻在進行非理性的行為。于是在1922年,格羅皮烏斯跟其他教員都實在無法忍受,決定由格羅皮烏斯為代表對杜斯伯格進行勸退,最后杜斯伯格雖然是離開了包豪斯,但很快就在包豪斯附近建立自己的培訓學校。他傳授「風格派」抽象主義藝術思想與創作原則,這也吸引了大量的包豪斯學生前去聽他的講學,但期間他繼續對包豪斯的教學方向進行批評,可謂是非常執著。

          但不管如何,杜斯伯格是將風格派思想帶到德國包豪斯的關鍵人物,他主張的「風格派」(style-less),期望找到更加簡單、更加國際的術語來建立國際風格基礎。

          這種藝術觀點為包豪斯所吸納并產生重大影響,抽象藝術也因此逐漸成為現代設計的一種國際風格,引導了整個20世紀的產品造型。他其實也通過包豪斯提升了「風格派」在國際上的地位,所以相輔相成。「風格派」也因此與俄國的「構成主義」、德國現代設計運動一起成為現代藝術設計運動的重要組成部分。

          杜斯伯格與蒙德里安在個性及氣質上形成比較鮮明的對比:蒙德里安溫和且有耐性,總是緩慢前進,不斷精益求精;杜斯伯格則常常顯得沖動,性格中更多的是挑釁性和攻擊性,而較少有建設性成分。

          但不管如何,兩人仍是風格派中的twins,缺一不可。

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

          帶你了解荷蘭設計史的前世今生(中)

          資深UI設計者

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

          荷蘭風格派設計及其相關的一些大咖在之前的各種分享當中都曾經客串走場,比方杜斯伯格出現在包豪斯的分享,蒙德里安出現在俄羅斯的構成主義分享等,今天他們終于要唱主角,其實經過今天的了解,大家會發現風格派一直以來都不容小覷。

          首先我們來了解一下,風格派的特點是什么。其實風格派單單看名稱就特別牛氣,比方我們會說這個汽車叫奔馳,或者這個汽車叫捷豹,不會說這個汽車叫汽車,然而當我們說起風格派時跟這個汽車叫汽車一樣,這個風格就叫風格派。

          風格派有一句名言,出自杜斯伯格,叫「剝去本質的外形,你就會得到風格?!?

          這句話有點抽象,但有這種感覺已經對了,因為風格派確實是抽象的,而且屬于「冷抽象」,關于冷熱抽象這個概念大家可以回顧我們之前的分享《用一篇超全面的好文,帶你了解俄羅斯設計史的前世今生》,因為這種冷是相對俄國康定斯基的熱抽象而言的。

          冷抽象大致是這樣的:

          這是多數人對風格派的一種理解及印象,說白了就是紅黃藍三原色的組合設計,然后很多縱橫錯落的線條。因為風格派幾乎沒有曲線,直線讓人感覺很冷靜,很理性,很穩定,所以被定義為冷酷抽象。

          我們再看看下面這幾個圖:

          其實這也叫風格派設計,但并沒有出現紅黃藍,所以風格派設計一定就有紅黃藍是一個認識誤區,其實風格派的形式定義是這樣的:

          把傳統建筑、家具、產品、繪畫、雕塑的特征完全去除,變成最基本的元素集合,甚至把某個元素單獨孤立起來絕對化,這些元素最后基本都以幾何形態呈現,形成簡單的結構組合,強調縱橫運用及不對稱,并且只使用三原色及黑白色(極色)。

          看完這個解釋再回味杜斯伯格那句「剝去本質的外形,你就會得到風格」就相對好理解了。

          那么這種風格到底是怎么形成的呢,說來話長,但可以確定的是不絕對源于某一個人,某一個時間及地點,它就像一個集體完成的雕塑,其實大部分的風格都是如此,但自然離不開一些關鍵的大咖。

          在敘述這些大咖之前,我們先來了解一下時代背景,在什么樣的外部環境中孕育了風格派。

          在第一次世界大戰,1914-1918年期間,歐洲列強為了重新瓜分殖民地及爭奪世界霸權而打得不可開交時,位于西歐的荷蘭宣稱保持中立,意思是各位兄弟你們可以在我附近打架,但盡量保持安靜,歐洲列強自然清楚荷蘭曾經也是海上霸主及殖民地大國,并非省油的燈,所以荷蘭就在一戰期間獲得了安靜發展文化的環境。

          由于中立,荷蘭成為歐洲各國藝術家的避難圣地,一時間人才濟濟,各種野獸主義、立體主義、未來主義等現代探索名家開始紛紛在此聚義,趁世界大亂之際研究如何形成一種新的藝術形式,因此慢慢就有風格派的雛形。風格派的萌芽基于了這幾個主義的風格及思想。

          這個時候出現了一位人物,叫托馬斯·里特維爾德,他1888年生于荷蘭烏得勒支,是一位木工的兒子,從小自學繪畫,后來從事建筑設計。似乎那個年代的設計師都是建筑設計師起家,或者具備建筑設計技能,就好比當代很多UI設計師都是平面設計出身居多,這也屬于時代發展的一種特征。里特維爾德在1917年做了一件大事,設計了一個劃時代的椅子叫「紅藍椅」,這個椅子被視為家具設計史上第一件現代家具,在色彩上幾乎就是紅黃藍加極色(黑白)。雖然是一百年前的椅子,但就算放到當代展覽館也一點不顯得過時。

          紅藍椅整體是木結構,13根木條互相垂直,組成椅子的空間結構,結構間用螺絲緊固而非傳統的榫接方式,最初曾經是灰黑色的,后來里特維爾德希望用單純明亮的色彩來強化結構,于是參考了蒙德里安的三原色風格,而且被認為簡直是蒙德里安《紅黃藍相間》這個繪畫系列作品的立體版。椅子就這樣產生了紅色的靠背和藍色的坐墊,但手和椅腿仍保持黑色,少量黃色被用來強化斷面,于是成了一個典型的風格派作品。

          但這個作品其實歷史意義與形式主義大于其功能意義,因為很多有機會試坐這個椅子的人都感覺坐得很不舒服,特別對腰椎間盤突出者來講簡直是災難。我們很多時候衡量一個設計作品靠的主要是兩把尺子,就是形式與功能,有時候很難去界定哪一個更加重要,但總的來說很多人是能夠忍受形式上的缺憾而無法忍受功能上的不足。比方你可以忍受一對鞋子顏色不太滿意,但無法忍受它比你的腳少了3碼,所以很多時候這兩者是優先級問題,假設三雙鞋子都合腳,那么你選擇的時候形式就很重要了。

          在設計紅藍椅之前里特維爾德還是一個無名之輩,他的工作仍然以建筑及室內設計方面為主。比方為一名與丈夫分居的女士設計房間,讓這位女士對其設計水平非??隙ǎ钡?917年后里特維爾德成名,這位女士也成了寡婦,憑借過往交情,她希望里特維爾德能為其孤兒寡母再設計一棟生活的寓所,并且任由里特維爾德發揮,于是歷時五年這個房子在1924年落成,就是歷史上非常著名的「施羅德住宅」:

          而經過五年相處,里特維爾德與這名女士日久生情,兩人談起戀愛并且在這座共同完成的房子生活了一輩子,直到1964年里特維爾德去世,而這名女士一直在這所房子里活到95歲。

          我們可以看看房子內部,簡潔的體塊,大片的玻璃,明快的三原色,錯落的線條,被視為現代設計建筑及室內設計教科書級的作品,同時也是風格派建筑當中重要的代表作品之一。

          其實在我印象中,似乎九十年代初的廣東地區有很多住宅或者室內設計是模仿了這種風格的,特別是一些工裝設計,所以一直有莫名的熟悉感,而且也分不出是在電影里看到還是現實中見過,不知道屏幕前的廣東朋友是否有同感。

          跟里特維爾德差不多時期,有一名畫家叫萊克,畫風是這樣的:

          很多人第一眼看到這種作品通常都會驚訝,他將很多視覺元素降低到了的界限,基本上就是使用三角形、四邊形和不規則的多邊形來表達,可謂是將設計上的減法做到了。網上已經很難找到這位畫家的詳細資料,但當時風格派已經形成氣候,所以很多人都開始使用這種風格來進行探索。

          很多人看到風格派的表達形式時都覺得很容易偽裝,其實這種想法是很天真的,比方我們看看某個房產項目在模仿風格派時的建筑效果圖,就明白東施效顰的含義:

          風格派有另外一個別稱叫新造型主義,至于風格派的形成除了客觀的一戰時代背景外,也跟其核心思想有關,曾經有一種分析認為,風格派的思想與哲學里的「二元論」有關,至于什么是二元論,簡單來說就是物質與精神都是世界的本原,好比風格派里堅持使用的橫線與豎線,但是把設計說到這個份上就很容易上神壇,而且很多時候也是后來者的一種臆想或者牽強附會,這并非史太濃傾向的敘述方式。風格派里的重要人物蒙德里安有過一些接觸通神論的經歷,所以他認為設計與藝術是一種純粹自我的精神表達,因而放棄寫實風格,而重視內心世界的表達一直是荷蘭人的一種藝術特色。

          我們在最后來總結一下風格派的作品特點,一共有三點:

          帶你了解荷蘭設計史的前世今生(上)

          資深UI設計者

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

          其實荷蘭,不止有風車與郁金香。

          有句話叫:神造了世界,而荷蘭人用設計造了荷蘭。到底怎么回事呢,今天一起來探討吧。

          話說現代主義設計的形成離不開三駕馬車,分別是德國包豪斯、俄國構成主義跟荷蘭風格派,包豪斯及俄國構成主義我們均已在之前的分享里詳細談過,所以今天我們聊一聊最后一架馬車——荷蘭設計。

          相比英國、美國及日本,荷蘭這個國家于大部分設計師而言未免有點陌生,但如果歐洲的設計圈要按國家排座次的話,撇開愛國熱情,史太濃認為荷蘭挺進前三甲是毫無毛病的,關于荷蘭設計水平發達的原因有幾種說法,其中廣受公認的是因為荷蘭的生存空間太狹窄。

          荷蘭41000平方公里的土地上容納了1675萬人口(2018數據),成為人口密度最高的國家之一,因為土地資源的缺乏,所以在1920年政府動手排干一個叫伊塞米地區的海水,形成低于海平面的人造陸地,是歐洲最大的填海工程之一,項目成功后荷蘭故技重施,陸陸續續進行填海,最后有四分之一的陸地低于海平面,所以整個國家在跟大自然搏斗中不得不進行各種設計思考,否則生存都成為問題,于是荷蘭設計總體而言發展到當代變得特別功能主義及理性主義。

          荷蘭的發展歷史

          荷蘭位于西歐,東接德國,南接比利時,有悠久的文明歷史,文藝復興之后還曾經一度是海上霸權國家,比方印度尼西亞就是它的殖民地之一。第二次世界大戰后的荷蘭開始高速發展資本主義,經過幾十年進取,進入「世界最富有國家」俱樂部。

          荷蘭的社會福利在江湖上令很多國家聞風喪膽,比方我隨便列舉三個第一:

          • 全球養老金指數世界第一
          • 歐盟各國醫療體系排名第一
          • 全球兒童福利世界排名第一

          這樣可能有點不夠具體,我羅列一個兒童福利的具體數據,比方小孩從出生至18歲,政府每月發放約300多歐元(大致2500元人民幣)兒女金,政府補貼兒童日托或幼兒園的費用達70%,而且從小學到大學一直享受超過學費的現金補貼,說白了就是以各種不同形式給你錢花,等于說父母只是負責生,政府來養,甚至一不小心還能賺到錢。

          荷蘭是一個工業高度發達的國家,比方擁有1891年成立的百年跨國大企業飛利浦,全球員工13萬人,在28個國家擁有生產基地,所以飛利浦是荷蘭的國家電器制造業中心,同時也是歐洲及世界最大的電器企業之一。它的設計系統非常完善,屬于戰后早期成立內部設計部的大型企業之一,設計帶動了整個公司的發展,甚至在戰后一度成為荷蘭的經濟核心,能與德國的 AEG(德國現代設計之父彼得貝倫斯設計世界最早的vi系統就是AEG)及西門子公司競爭,其中荷蘭有45%的出口產品都是飛利浦公司的,所以地位非常顯赫。

          由于荷蘭的「風格派」設計過于知名,所以一談荷蘭設計大家都認為是紅黃藍類型,也正因為如此所以很多荷蘭當代杰出的設計師往往不為荷蘭以外的國家所熟知,但這不能完全怪罪風格派,造成這個狀況還有一個更重要的原因,就是荷蘭政府跟社會太過重視設計了。

          除了設計師本身,荷蘭很多產品也不為世界普遍認識,比方汽車,荷蘭有一個跑車品牌叫「世爵(spyker)」,在中國基本看不到,我在網上找了很久才找到一個深圳二手車信息:

          這臺09款的汽車原價550萬,9年后仍需要200萬出手,沒錯,「世爵」的跑車全部只做純手工定制,所以只服務美國、西歐、中東及一些小型而富裕的國家,比方瑞士跟摩納哥,我們也可以從下面的圖片感受一下荷蘭的奢華汽車設計,還有純手工打造的內飾質感:

          因為設計與荷蘭的國計民生密切相關,比方大量的圍海造田,強大安全的排水系統,農村的防潮汐堤壩,擁堵城市的合理交通網絡,都需要高水平的精心設計。荷蘭人民的歷史就是一場以設計建立生存空間的斗爭史,荷蘭鹿特丹布寧根博物館館長威廉·科羅威爾曾經說過:只有依靠設計,我們才能使我們的國家成為一個可以日日生存的地方。

          所以荷蘭設計師在國內地位非常高,也因為如此設計市場非常繁榮,所以單單政府與市場需要消化的設計項目就忙不過來,也就少到其它國家行走,自然在名聲上也相對局限。

          荷蘭政府對設計的重視猶如中國人對面子的重視,我們搞的是面子工程,而他們則搞的工程都是面子。

          比方以下幾個荷蘭本土項目,被視為世界上「教科書級」的設計范本。

          荷蘭「教科書級」的設計范本

          1. 貨幣設計

          全世界的貨幣設計都有一種無言的默契,就是愛使用名人肖像為設計的中心元素,而荷蘭的貨幣設計是第一個打破這種規則,不使用任何人物的,如果一個國家并非重視設計行業,并非充分尊重設計師的話,這完全是匪夷所思的事情。

          荷蘭的貨幣由財政部統一管理,在荷蘭財政部當中的設計管理部門的提議與組織下,聘請了荷蘭最知名的平面設計師來參與,其中也有不少獨立設計師,比方在去年很遺憾離世的荷蘭紙幣設計大師奧克斯納,他曾經在1964年受邀參加紙幣設計,他回憶說:每種面額紙鈔的設計周期需要3年,所以當最后一種面額投入流通,距離我剛剛開始紙鈔設計工作相隔整整30周年。

          不以人物為中心的荷蘭貨幣設計主要是使用抽象圖案進行創作,體現出荷蘭從「風格派」以來的立體主義、構成主義形式傳統,所以世界上有諸多收藏家是專門收藏荷蘭紙幣的,比方250吉德(荷蘭貨幣單位)被視為藝術品,極具收藏價值,這是世界貨幣設計中的一種創舉。

          2. 西佛爾國際機場

          荷蘭的首都阿姆斯特丹國際機場又稱為西佛爾國際機場,它的設計面貌完整代表了荷蘭戰后政府對于基本建設及現代設計的積極態度和正確引導。

          荷蘭長期以來一直沒有卷入地區性或者世界性的戰爭,比方第一次世界大戰它始終保持中立,但無奈第二次世界大戰中被德國短暫占領,時間為1940-1945年,隨后繼續獨立。西佛爾機場就是戰后1967年4月建成及投入運營的,當時世界各國都在著手建立自己的國際機場,但是一個為世界服務的現代化機場需要什么特征與設計考慮呢,幾乎沒有一個國家可以拿出成熟的方案。

          荷蘭政府牽頭組織了大量社會的優秀設計人員,技術人員成立項目組,充分考慮機場未來的交通流量、國際乘客的共同性要求及乘客特征,盡量讓機場達成中性、合理、理想等設計特點,跟著名的國際主義設計特點吻合,達到了能為廣泛乘客服務的目的,機場落成之后在整體性與完整性功能性上都讓歐洲國家感到震驚,這座巨大的標志性建筑在建筑設計、室內設計、平面設計及導視設計等方面所具備的現代主義風格在長達20年的時間里,都成為歐洲國家設計國際機場時的重要參考依據。

          所以當時的荷蘭設計師完全可以喊一個口號,叫:厲害了,我的機場!

          3. 鐵路系統

          荷蘭的鐵路系統是在機場完工之后相繼落成的,荷蘭設計有一個非常厲害的特點就是總體化規劃。如果設計師是演員,那么總體化規劃就是導演技能,荷蘭設計師善于此道,所以它的鐵路系統視覺化高度統一,形象與導視系統清晰簡明,功能性強,而且設計項目中包含的內容非常多,比方火車廂、火車站、客戶內部、車票、路牌、標識、乘務員制服等等,所以如果缺乏總體規劃,這是一項難以出色完成的設計工作。

          經過一段時間的運營,荷蘭的這個鐵路系統在效率、安全性、舒適性上在全球都名列前茅。甚至被評為世界上設計得最完善的鐵路系統。

          荷蘭的設計業為何如此的發達成熟,原因總的來說有幾個方面,比方國家相對比較小,擁有悠久的藝術歷史,比如產生倫勃朗、梵高、蒙德里安等世界知名藝術家,同時經濟富裕繁榮,需要通過設計思考與自然搏斗等幾個綜合因素,形成具有很濃厚創作性的社會氛圍。

          其中尤為重要的還有荷蘭政府對文化事業非常慷慨,形成一個寬松的文化贊助系統,設計師在一個資金充裕的環境里工作,很多時候不太需要考慮經濟效益,所以更加專注于設計的合理性及藝術性上,自然就有更高層次的輸出。

          談到荷蘭設計自然無法繞過其標簽式的「風格派」運動,因為當代設計其實受其影響非常深遠,史太濃這次使用倒敘手法,先看結果再找原因,所以下一期我們將會聊一聊荷蘭的風格派產生、特點、代表人物及對現代設計的影響。

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

          日歷

          鏈接

          個人資料

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

          存檔

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