header_v1.7.40

跳槽進大廠,這些設計技法必須會 | 技法系列第四彈-晶白風格

3天前發布

原創文章 / 多領域 / 觀點
我們的設計日記 原創,如需商業用途或轉載請與我們的設計日記聯系,謝謝配合。

2019年,不要再玩扁平化,大廠設計師技法全公開,第四彈-晶白風格


今天和大家聊聊設計中的白色,說到白色不得不說蘋果的白雪設計語言,在很多設計師心中,白雪設計是蘋果的設計巔峰期,也是蘋果設計最黃金時期。


▲ 當年喬布斯就是靠著這款iMac把蘋果起死回生的,這款電腦設計,采用了透明的設計,也是蘋果白雪設計語言典型的代表作。


▲ 整個白雪語言不止是在硬件ID設計,在蘋果的一系列軟件里面也大量運用到,比如垃圾桶這個圖標,白色的設計,但是細節卻是讓人過目難忘。


▲ 雖然蘋果iOS系統更新了幾個版本,但是白色的設計理念一直伴隨到現在,如上圖我們能看到一些細微的變化,比如白色由之前純白慢慢有些透明度變化。


▲ 新的備忘錄,從擬物變成扁平,但是整體的設計語言的延續還是很明顯的。


▲ Finder的設計也是延續之前,其實“最大化”按鈕已更改為“全屏”可以說蘋果的設計一直都在變化,但是都有一個核心理念在延續著每一次的變化,就是白雪設計語言!


▲ 包括全球的一些知名應用,整體的風格也逐漸驅動,都以內容為主,設計輔助內容,整體白色為主。那么今天我們一起來學習下,今天和大家研究的趨勢也是白色,不過我個人叫它為-晶白,因為它不僅僅是純白,在白色的風格基礎上,有很多微妙的變化。


什 么 是 晶 白 風 格   



簡單來說,晶白就是在白色質感下,通過一些透明度變化,投影,外發光等等,讓整體設計更加富有層次感!晶白不一定是純白,因為它的細節變化,使得在不同背景,不同場景會呈現出不一樣的設計細節!我們來看一些案例:


▲這個設計就是一個晶白風格,整體視覺就是大拇指點贊的圖形,這個圖形整體為白色質感,但是相對于扁平的純白色圖形,這種晶白質感更有細節,層次更加豐富,同時白色的質感很好的和背景融為一體。


▲美拍早期的啟動圖標,整體風格同樣運用的晶白處理,相對千篇一律的白色,這種質感會顯得更加精致。


▲這套UI作品,采用晶白設計手法,來加強背景的Z空間,通過白色的疊加和前景白色形成一個很有層次的空間。


▲這套圖標系列作品,上面線型圖標雖然設計很棒,但是在線型圖標爛大街的今天很難讓人過目不忘,設計師將新的風格改成這種面型,同時質感運用這種晶白,通過透明度的處理,顯得非常有細節和層次感,每一個都很精致。


▲晶白除了運用在圖形里面,在一些網站背景或者插圖都可以運用,國外知名IT服務公司DigitalOcean的官網設計中,背景就是運用這種晶白質感,將抽象的IT服務變得更好理解。


晶 白 風 格 特 點   


1.白色透明漸變


晶白最大一個特點就是運用漸變,白色到透明的漸變,通過透明度來拉開明暗差別,形成設計空間感。漸變可以是純白色變化,也可以是帶環境色的白色漸變,如上圖中,漸變白色就是帶有環境色的漸變過度!


▲一個網站設計,整體輔助圖形運用的抽象幾何圖形,呈現出秩序感,整體的圖形細節配合,白色透明度變化,很好的將每個圖形的背景色融于其中,細節豐富。


▲此圖形采用的立方塊設計,整體也是從白色過度到透明,透明的白色透出深色的背景,整體呈現出高級感。


▲這個LOGO設計,也是采用白色到透明運用,很巧妙的通過一個漸變和字母轉折關聯起來。


2.多色透明漸變



▲這套插畫作品整體也是運用的白色到透明質感,但是除了運用白色到透明,也充分運用背景藍色,通過環境色運用,整體層次更加豐富。


▲這組圖形的設計,也是采用環境色運用,重復運用背景多色漸變,整體更加融合一體。


▲這組插畫設計,插畫中核心人物太空人整體呈現白色質感,但是在頭部以及白色的投影上重復運用背景橙色,使得更加整體協調。


3.投影運用


▲晶白風格,還一個很重要特點就是運用投影,來形成前后關系,上圖在桃心交叉點,運用透明處理,形成兩層空間感。


▲這個時鐘的圖標,運用投影拉開層次,讓整體沒有那么平淡。


▲這個 LOGO就是一個很好運用投影的案例,通過白色暗面,凸現白熊的立體感。


U I 中 運 用 

  

▲這個數獨游戲設計中,頁面主圖形就是運用晶白作為主圖形風格,整體顏色清爽,細節豐富,其實白色透明幾何圖形作為背景,主圖形,運用白色和環境色融合處理,整體呈現高級感。


▲航空公司的選座設計,作者很好的將飛機運用晶白設計手法,讓飛機整體有一定厚重感,然后將選座的操作行動點融于其中。


▲在這個引導頁設計中,核心的主風格插畫,也是運用晶白質感,通過環境色處理,背景處理,整體既有空間感,也充滿細節。


▲這組引導頁設計中,核心色調也是圍繞白色處理,很好通過灰色調來體現生活場景感。


▲在UI中作為背景運用,也是常用的一種方式,讓整體界面空間感更強。


▲這組卡片設計非常棒,作者很好的將這種晶白質感和文案融合在一起,運用幾何圖形的表現很好的讓整個背景生動起來,同時也不影響文案閱讀 。


▲運用在頁面背景,簡單干凈,如果你的背景太空,不知道放什么圖形,運用這個風格準沒錯。


▲Riko的這套作品就是很好將晶白作為整體的背景圖形處理,圖標,引導頁以及背景底紋都是運用這個風格,在配合干凈的配色,整體呈現出高級感。 


▲Yar設計的官方榜單,很好的運用晶白質感效果作為背景,將榜單名詞凸現出來,恰到好處。


圖 標 中 運 用   


▲晶白在圖標中運用比較方法,能讓圖形更加更豐富,呈現出透明的細節質感,無論是在圖標運用還是在界面運用。


▲系統小圖標,相對傳統的線型圖標,這種帶透明度的小細節會讓圖形更加有層次感。


▲一組面的圖形運用,簡單的技法,讓你的圖標差異性瞬間拉開。


▲透明的變化有很多,可以是帶漸變,可以是純透明度變化,也可以在透明漸變中加一些立體感。

▲非常精致的一個設計,巧妙的將讀書和頭像剪影融合在一起了,扁平和擬物的巧妙結合。


▲誰說扁平就一定要同質化,一點點簡單的變化讓簡約而不簡單。


▲很巧妙的背景融合,一個帶著環境色的漸變,讓整個圖形層次更加分明。


插 畫 中 運 用   


▲這只老鷹的插圖設計,造型優美對稱,技法上通過透明度運用,讓整個羽毛充滿層次。


▲設計師很好的將抽象的幾何圖形,以及白色,藍色透明的融合,很好呈現出科技感。


▲脈脈的一組插畫設計,整體運用白色質感,以及脈脈品牌藍色,非常酷。


總 結   


趨勢的關注和研究,是設計師必備的技巧,我們只有通過大量閱讀提煉出有用風格去學習,運用,落地到我們日常設計中,才算真正融匯貫通,希望在設計日記里,能夠與大家一起來挖掘最新的趨勢和方向!


相關閱讀:


跳槽進大廠,這些設計技法必須會 | 技法系列第一彈-紋理風格

跳槽進大廠,這些設計技法必須會 | 技法系列第二彈-卡通簡筆風格

跳槽進大廠,這些設計技法必須會 | 技法系列第三彈-柔光風格


作者:sky,支付寶設計專家 ,公眾號:我們的設計日記(ID:helloskys),設計交流請添加微信:helloskys000

本文由 @sky原創發布于站酷。未經許可,禁止轉載。


845

    文章信息

    • 文章標簽

    沒有新消息

    提示文案

    提示文案

    提示失敗
    提示成功
    波音平台菠菜网排名 木里| 天长市| 平顶山市| 大荔县| 磐安县| 图们市| 靖远县| 樟树市| 白山市| 永登县| 葵青区| 昌乐县| 敖汉旗| 滨海县| 抚远县| 铜鼓县| 尤溪县| 阳城县| 平邑县| 长宁区| 安阳市| 广安市| 漠河县| 广灵县| 搜索| 浙江省| 南开区| 天台县| 洪泽县| 信阳市| 青阳县| 揭西县| 英德市| 普格县| 长治县| 灵武市| 射阳县| 巴中市| 揭西县| 大名县| 澄城县| 枞阳县| 名山县| 玉树县| 宝山区| 富锦市| 泽库县| 轮台县| 奉化市| 临海市| 星子县| 西乡县| 临夏县| 津市市| 宜宾市| 尚志市| 大方县| 齐河县| 长治市| 兴业县| 安吉县| 涿州市| 太仆寺旗| 兴和县| 明星| 曲沃县| 新建县| 博客| 遵义市| 遂平县| 理塘县| 揭东县| 垣曲县| 名山县| 湖南省| 京山县| 鹤壁市| 巩留县| 阿荣旗| 双城市| 手游| 巴林右旗| 托里县| 锦州市| 班戈县| 独山县| 嘉义县| 张家港市| 万山特区| 荔浦县| 准格尔旗| 靖江市| 宁都县| 德安县| 盐源县| 宁化县| 宕昌县| 虹口区| 天柱县| 疏附县| 兴业县| 乾安县| 济宁市| 盐边县| 申扎县| 华阴市| 肇源县| 阿勒泰市| 美姑县| 灌云县| 毕节市| 阿拉善右旗| 邹城市| 株洲市| 望谟县| 大邑县| 普陀区| 科技| 永川市| 赤城县| 蓬莱市| 汕头市| 宽甸| 卫辉市| 井冈山市| 山西省| 中西区| 什邡市| 综艺| 奉节县| 余江县| 鄂托克前旗| 普兰店市| 蒲江县| 襄樊市| 裕民县| 伊吾县|