02.柔色

03.花瓣素材

04.扁平插畫素材

05.展示原材料

06.使用手寫字

07.超強食欲的圖片

08.以食物圖片作為主視覺

09.食物俯拍

10.有動感的構(gòu)圖

以上就是日式食品海報中常常會用的一些設(shè)計技巧，當然，這些技巧并不是必須的，也不能保證你能做出優(yōu)秀的設(shè)計，但優(yōu)秀的設(shè)計確實會有很多共同點和方法，找到它們，并結(jié)合自己的設(shè)計需求合理使用，你就能夠事半功倍。

原文地址：蔥爺（公眾號）

作者：蔥爺

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》優(yōu)秀日本食品海報的10個設(shè)計細節(jié)

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

包豪斯（Bauhaus）以德語命名，意為“建筑之家”，由建筑師沃爾特·格羅皮烏斯于 1919 年在德國魏瑪創(chuàng)立。1915 年，他接管了大公撒克遜工藝美術(shù)學(xué)院，四年后該學(xué)院與魏瑪美術(shù)學(xué)院合并，形成了激進的新設(shè)計學(xué)院。

包豪斯從一開始就不僅僅是一種建筑風(fēng)格，而是一所結(jié)合了手工藝和美術(shù)的學(xué)校，受到現(xiàn)代主義、英國工藝美術(shù)運動和建構(gòu)主義的影響，包豪斯也最終成為20世紀最具影響力的現(xiàn)代主義藝術(shù)學(xué)校。

學(xué)校被定義為一個將工業(yè)設(shè)計、建筑、雕塑和繪畫融為一體的烏托邦工藝行會，為藝術(shù)家和設(shè)計師提供了由實踐技能、工藝、技術(shù)和理論知識組成的原創(chuàng)和有影響力的課程。

包豪斯的設(shè)計理念是形式追隨功能，少即是多，去除一些不必要的裝飾，也是包豪斯整個設(shè)計風(fēng)格特點的精髓，包豪斯設(shè)計在保持功能性的同時體現(xiàn)了未來主義的外觀。

包豪斯倡導(dǎo)功能為主，不花哨，簡單而優(yōu)雅的幾何形狀，理性化和簡潔設(shè)計為主，它偏向于實用而不是炫耀。這種理念在包豪斯產(chǎn)生重大影響的領(lǐng)域非常突出。

在設(shè)計中包豪斯更看重產(chǎn)品實用性，而非純美學(xué)。不過，這并不是說包豪斯在視覺上沒有吸引力，極簡美學(xué)特征就是它最大的標致，以至于流傳到現(xiàn)在一些經(jīng)典設(shè)計，看起來依舊沒有覺得過時。

 CFB 2018

Bauhaus Football Club

BRANDING ? 19-19 Cabinet d’Architecture Indépendant

BRANDING ? 19-19 Cabinet d’Architecture Indépendant

版式設(shè)計中的應(yīng)用

Robert Gutmann | 20TH CENTURY DESIGN

Blockchain mobile Franko Komljenovi?

Glyphs app Brand Identity & Website

包裝設(shè)計中的應(yīng)用

Plácida

包豪斯設(shè)計風(fēng)格在其長達一百年的發(fā)展歷史中，仍然延續(xù)至今，也在過程中經(jīng)歷了諸多挫折和逆境，在其發(fā)展的三個階段中不斷變化迭代，以及其革新的設(shè)計理念影響了當時諸多設(shè)計。在 21 世紀包豪斯風(fēng)格仍然存在，激勵著前前后后的設(shè)計師學(xué)習(xí)和借鑒思考。

回個頭來我們也需要思考，為什么我們現(xiàn)在看一些設(shè)計風(fēng)格可能就一年或者半年就被市場給拋棄了，究其原因還是過于形式化和追求華麗的外表設(shè)計。而包豪斯風(fēng)格帶給我我們的設(shè)計理念就是功能為主，少即是多。

原文地址：功夫體驗設(shè)計（公眾號）

作者：Tony

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》百年包豪斯設(shè)計風(fēng)格，憑什么這么牛？

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

01 互補色的定義

互補色分為“光學(xué)互補色”和“印刷（色料）互補色”兩種。

光學(xué)互補色：兩種色光以適當?shù)谋壤旌希墚a(chǎn)生白光時，則這兩種顏色就稱為“互為補色”。

本文主要探討的是印刷（色料）方面的互補色：在色相環(huán)上相對180°角的兩種顏色，這兩個顏色混合會得到灰色。

互補色由于在色環(huán)上相距最遠，色彩差異最大，色彩對比很強烈，合理的搭配往往會產(chǎn)生強烈的視覺沖擊力。

雖然從色環(huán)上來看，互補色可以有很多組，但最常用的互補色有3組，分別是紅和綠、藍和橙、紫和黃。

由于紅色和綠色在色相上缺乏共性，放在一起會造成極強的視覺反差，搭在一起容易有格格不入、扎眼的感覺，容易出現(xiàn)散亂、土氣的感覺。

要取得好的視覺效果，則需要使用一些調(diào)和手段，可以在明度、飽和度上中和兩種色彩的突兀，使其形成和諧統(tǒng)一的對比。

藍橙是一組經(jīng)典的冷暖互補色，溫暖的橙色在與偏冷的藍色搭配時，更加醒目，活潑的橙色可以很好的緩解深藍色的沉悶，增加畫面的愉悅氣氛，可以很好的營造出畫面的層次感。

紫色和黃色不論是色相還是明度差異都非常大，因此黃色與紫色的搭配容易產(chǎn)生相當高的視覺強度。

02 互補色配色的方法

互補色對比性強烈，因此在視覺上會產(chǎn)生極大的隔離作用。由于色相對比過大，配色難度也最大，如何化解互補色之間的沖突感，是用好互補色的關(guān)鍵。

1.通過面積比來達到平衡

如果使用面積相近的互補色的搭配，具有強烈的沖突感，產(chǎn)生的視覺效果強烈而鮮明，情感濃烈，令人記憶深刻。非常適合夸張的、張揚的情感表達。

大多數(shù)情況下，我們會選擇一種顏色作為主色調(diào)，大面積的色相占據(jù)主導(dǎo)位置，再用小面積的互補色去點綴畫面。這樣才能表現(xiàn)出主次關(guān)系和豐富的色調(diào)效果，色彩對比強烈卻又不違和。

2、調(diào)整明度與飽和度來減弱色彩沖突

高明度與高飽和的互補色搭配，對比強烈，在視覺上會產(chǎn)生極大的隔離作用，它們組合在起，會產(chǎn)生相互襯托、相互抗衡、相互排斥的感覺，并使各自的色相更顯突出，更為艷麗，具有強烈的視覺沖擊力。

可以考慮降低互補色的明度與飽和度，來減弱沖突，既保留了對比色搭配的特點，同時降低了過強的視覺刺激。

3、加入中性色緩沖其強烈的對抗性

互補色鮮艷熱烈，而中性色（黑白灰）則剛好相反，它們毫無情緒感，中庸冷靜。在對比色中加入中性色可以很好的調(diào)和畫面的平衡感。通過中性色的調(diào)和，既保持了互補色所帶來的豐富的層次感，也避免了互補色之間強烈的沖突。

原文地址：藝海拾貝Design（公眾號）

作者：鄧海貝

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》聽說這是最難的配色方法——互補色篇

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

1. 一定要注意識別度

其實我一直不敢使用毛玻璃效果的原因，就是害怕有識別度問題，其實網(wǎng)上現(xiàn)在有很多毛玻璃圖標：

做概念稿練習(xí)練習(xí)還好，如果真的落地肯定不行，太影響識別了。

為了不影響識別，我們可以有兩個做法。

其一：就是毛玻璃的透明度別太低，像騰訊視頻這種：

這樣不影響我們識別圖形的輪廓。

其二，我們可以把圖標主圖形用顏色填充，毛玻璃的面積只是很小一部分，起到輔助作用即可，比如像喜馬拉雅這種：

這樣整體的識別度也不會太受影響。

以上就是關(guān)于不影響識別的小方法。

2. 技法

毛玻璃圖標大部分一共分三層，填充層、玻璃層，模糊層（模糊層是嵌入到玻璃層的）。

其中最重要的一個關(guān)鍵點就是，玻璃層其實是假的，并不是透明的，而是100%的填充色。

舉個最簡單的例子，我們先畫一個深藍色的填充層：

然后加一個玻璃層，這個玻璃層不是透明的，而是100%填充色：

那有同學(xué)就會問了，毛玻璃效果怎么產(chǎn)生呢？其實就是把下面的深藍色圓復(fù)制一個進入到前面的玻璃層：

有人又會問，這也沒效果啊，對，因為復(fù)制進入玻璃層的圓形和后面的原型位置一摸一樣，如果不做改變，就看不出變化，所以我們先來模糊下：

區(qū)分的還是不夠開，我們再降低透明度：

這效果就立馬出來了。

所以從技法層面來說，并不是很難，主要是要注意識別度和整體的設(shè)計感。（當然，這只是我個人制作的方法，可能別人也有其他的方式）。

3. 底色

前幾天在群里看到一位星友問，說為什么他做的效果是第二個，而不是第一個那種透透的毛玻璃感覺：

其實我在最開始做毛玻璃效果的時候和她遇到了一樣的問題，這個問題產(chǎn)生的原因就是因為底色，現(xiàn)在的底色是黑色，一個玻璃放在黑色上面，透出來的顏色肯定是深灰色，而不是淺白色（除非你這塊毛玻璃本來就是白色的）。

我在之前的一次練習(xí)時，做一個黑金配的的毛玻璃效果，最開始就做成了這個樣子：

總感覺有點奇怪，其實就是因為在黑色背景上，玻璃層的顏色用了白色，感覺沒透過去，就感覺怪怪的，后來我把玻璃層的顏色變成深灰色：

這樣看起來就好多了。

制作的原理和剛才說的是一樣的，先把大形畫完：

然后前面整一個玻璃層，選一個深灰色：

然后把下面的形狀復(fù)制一個剪切到玻璃層中：

現(xiàn)在看不出效果是因為玻璃層里面的圖形和后面的圖形位置是一摸一樣的，這時候我們把玻璃層的圖形模糊：

現(xiàn)在已經(jīng)差不多區(qū)分出來了，如果想要更明顯的區(qū)分，可以把透明度再降低一點：

也還ok，當然，我覺得加不加透明度，還是看具體效果調(diào)整就可以了！

再強調(diào)下，大家在做毛玻璃的時候一定要注意背景色哦，不然可能就會看起來很奇怪。

總結(jié)

好了，以上就是我個人對于毛玻璃效果的一點總結(jié)，我個人還是比較喜歡一組毛玻璃圖標是多色的，如果是一個顏色，比如這種：

相對來說沒那么耐看，如果是多色的：

就會耐看很多，希望給大家一點啟發(fā)，下期見，默默扔！

01. 評論區(qū)雙指上滑送出“抱抱”

在聽一首喜歡的音樂時，參與評論可以表達自己對音樂帶來的共鳴感，也可以看其它聽友的評論尋找知音。在網(wǎng)易云音樂的評論區(qū)隱藏著一個手勢交互，對某一條評論雙指上滑就會針對其給出擁抱，兩個小人微笑擁抱的動畫顯示在該條評論右下角，進而用戶頭像下方會顯示“收到了抱抱”的標簽提示。

在不新增功能入口的同時，借助雙指手勢交互來滿足需求，既能不破壞原生的結(jié)構(gòu)，又能帶給用戶不一樣的操作體驗。這個隱藏的彩蛋你是否注意到？以后在體驗產(chǎn)品的時候除了發(fā)現(xiàn)視覺表層的可見內(nèi)容以外，也要加強手勢交互的操作來發(fā)現(xiàn)更多隱藏的功能。

02. 長按激活單擊退出

iOS 的設(shè)計在手勢交互的探索上比較多，全屏的模式將手勢發(fā)揮到了極致，也帶給我們對于手勢交互的更多理解。在蘋果手機桌面，我們可以通過長按激活應(yīng)用管理，單擊則會退出管理模式，操作非常便利。

無需在當前的設(shè)計上面新增更多繁瑣的控件，手勢的借助可以使得我們的設(shè)計更加極簡，減少過多的內(nèi)容對用戶的干擾。

03. 長按與時間跨度的結(jié)合

長按激活功能比較常見，但是結(jié)合時間長短的變化相對較少。蘋果手機桌面的應(yīng)用管理，在長按應(yīng)用圖標時會彈窗展示功能列表，繼續(xù)維持長按則會進入應(yīng)用管理，隨著長按的時間跨度不一樣激活不同功能需求。

在手勢交互設(shè)計過程中，除了通過動作的不同激活功能操作之外，也可以結(jié)合時間跨度、力度、位置等進行組合交互，來滿足多重功能操作的需求。

04. 可以移動的紅包

通過紅包吸引用戶進而轉(zhuǎn)化是很多電商產(chǎn)品的玩法，在必要 APP 中紅包通過倒計時的形式營造出緊迫感，促使用戶立即使用，進而提高紅包的使用率。紅包懸浮在左側(cè)會擋住分類的展示，為了解決這個問題紅包借助滑動手勢可以移動，用戶可以在左側(cè)導(dǎo)航欄到底部標簽欄之間任意滑動，方便預(yù)覽分類。

單指滑動是常用的手勢交互，精準定位元素之后可以拖動使其改變位置，不僅方便內(nèi)容的展示也不會造成底層內(nèi)容的閱讀干擾。

05. 同一個功能不同的手勢交互

我們在觀看視頻的時候，短視頻是單擊控制播放/暫停，而視頻播放軟件則是通過雙擊控制。由于長視頻用戶需要觀看很久，容易觸屏造成誤操作，雙擊是為了形成二次確認，降低誤操作的概率。

短視頻播放由于內(nèi)容比較簡短，可以通過單擊控制播放/暫停，雙擊則是更多功能的輔助，同一個功能在不同的場景需要配合不同的手勢。我們在進行產(chǎn)品設(shè)計的時候，可以根據(jù)業(yè)務(wù)類型和用戶場景的差異借助手勢來滿足更多功能的操作，用戶習(xí)慣培養(yǎng)之后將會提高其操作體驗度。

06. 通過左滑程度控制刪除

左滑動是產(chǎn)品設(shè)計中非常普遍的手勢交互，通過左滑展開列表隱藏功能，比如編輯、置頂、刪除等。

在脈脈 APP 的消息模塊，消息列表左滑可以進行置頂和刪除，如果繼續(xù)往左側(cè)滑動則會實現(xiàn)自動刪除，以此來替代點擊刪除圖標完成刪除操作的步驟。通過左滑配合點擊刪除操作路徑多一步，而左滑程度控制刪除效率更高，針對一些消息較多的產(chǎn)品，可以方便用戶快速清理未讀消息。

07. 雙擊頭像“拍一拍”

在微信群聊或者與好友聊天的時候，為了重點提示好友，可以通過雙擊好友頭像進行“拍一拍”，晃動的頭像和震動的提示加強好友對信息的關(guān)注度。

結(jié)合雙擊的手勢交互，在不改變當前布局的情況下加強社交屬性，增強好友間的互動提示，通過手勢豐富了社交體驗。

08. 單擊進入全屏模式

雖然手機逐步進入大屏?xí)r代，但是用戶還是希望獲得更少的干擾，全屏模式的操作可以讓干擾降到最低。

百度地圖在操作后會有彈窗式的內(nèi)容呈現(xiàn)，用戶可以通過單擊屏幕退出彈窗，再次單擊則會進一步隱藏基礎(chǔ)控件，進入全屏模式。通過單擊的手勢交互來簡化內(nèi)容結(jié)構(gòu)，降低干擾帶給用戶更集中的操作體驗。

09. 長按快速預(yù)覽精彩片段

通過愛奇藝 APP 刷劇的時候，在搜尋影視作品的過程中，可以通過長按作品封面進行快速預(yù)覽，播放精彩片段來判斷是否值得追劇。

通過長按激活彈窗，可以在不改變當前布局結(jié)構(gòu)的前提下，進行更多功能操作。適合針對隱藏式功能，也能避免誤操作。

10. 長按結(jié)合位置區(qū)域變化

很多影視類產(chǎn)品在全屏播放視頻時，除了通過拖動進度條進行快進/倒退之外，也能通過長按屏幕進行快進。

而騰訊視頻與之不同的是結(jié)合了屏幕區(qū)域，在全屏狀態(tài)下，左側(cè)區(qū)域長按快退，右側(cè)區(qū)域長按快進。長按結(jié)合位置區(qū)域變化功能狀態(tài)，深入了手勢交互的操作，也能帶來不一樣的操作體驗。

11. 三擊激活“輔助觸控”

單擊和雙擊的手勢交互較為常見，而三擊手勢應(yīng)用較少，有待深入探索。目前來說，帶有 Home 鍵的蘋果系列手機，可以通過三擊 Home 鍵激活“輔助觸控”快捷鍵，再次三擊隱藏快捷鍵。

通過三擊可以快速激活功能快捷鍵，減少了多個步驟路徑，也不會導(dǎo)致用戶誤操作。

12. 下拉程度影響功能變化

手勢下滑形成下拉刷新已經(jīng)成為產(chǎn)品設(shè)計中的基礎(chǔ)操作，為了進一步延展功能，很多產(chǎn)品在下拉過程中根據(jù)下拉的程度判斷是刷新還是進入二層樓（活動或者功能模塊）。

通常是通過控制下拉的距離來做判斷，會提示“松開刷新”的字樣，如果繼續(xù)下拉則會激活功能變化。進入二級功能界面或者二層樓活動界面，深度的功能開發(fā)帶給用戶更多的選擇性。

13. 縮放預(yù)覽相冊大小

蘋果手機自帶的相冊（照片）APP，可以通過雙指縮放來改變照片預(yù)覽的大小，方便用戶在眾多照片中通過縮小快速查看，再通過放大做進一步的選擇。借助縮放的手勢交互，方便用戶自由縮放預(yù)覽并作出快捷的操作，提高了用戶的操作體驗感。

雙指縮放對于屏幕的縮放預(yù)覽十分便利，在很多應(yīng)用場景都有涉足，比如相冊、地圖、繪圖工具等。

14. 雙擊最大化圖片預(yù)覽

在圖片預(yù)覽的時候，可以通過雙擊最大化圖片，方便對細節(jié)的觀察。通過雙擊的手勢交互來快速放大圖片，在很多相冊應(yīng)用、電商產(chǎn)品、微信等社交產(chǎn)品中都有涉足，只要是全屏模式下預(yù)覽圖片，都可以通過該手勢交互完成縮放。

雙指縮放屬于慢動作，而雙擊最大化屬于快速一步到位，適合查看圖片細節(jié)等操作。通常是雙擊最大化，再次雙擊恢復(fù)正常。

15. 手勢交互控制地圖預(yù)覽

手勢交互在地圖軟件中的運用表現(xiàn)得淋漓盡致，對于用戶來說操作變得更加便利和快捷。

以高德地圖舉例：單擊手勢可以隱藏操作欄進入全屏模式；長按固定區(qū)域會激活當前位置定位，方便隨時查看和開始導(dǎo)航；雙擊手勢可以對地圖進行固定倍數(shù)放大；雙指縮放可以對地圖進行任意縮放，便于精準查看位置區(qū)域等。手勢交互控制地圖預(yù)覽提升了操作便捷度，借助手勢提升了地圖類產(chǎn)品的體驗感。

16. 拖動完成自定義設(shè)置

隨著用戶對個性化的需求升級，很多產(chǎn)品都開放了部分常用功能模塊的自定義設(shè)置。比如網(wǎng)易云音樂的底部導(dǎo)航欄在設(shè)置環(huán)節(jié)中，便可通過拖動完成自定義設(shè)置。

利用壓力結(jié)合滑動可以實現(xiàn)拖動手勢交互，對于一些需要用戶謹慎操作的功能比較適合，也能有效防止誤操作。

17. 拖動疊加實現(xiàn)應(yīng)用建組

當用戶下載的應(yīng)用很多的時候，通常都會通過建組管理手機桌面上的各類應(yīng)用軟件?？梢酝ㄟ^拖動應(yīng)用疊加到其他應(yīng)用軟件上實現(xiàn)自動建組，建組、進組、移出等操作均可通過拖動手勢完成，操作非常便利。

拖動手勢交互針對一些防止誤操作的功能比較適合，相當于二次確認的過程。

18. 長按滑動實現(xiàn)多選

在百度網(wǎng)盤中可以通過單擊選擇控件對文件進行選擇操作，也可以通過長按整個區(qū)域?qū)崿F(xiàn)選中，長按過程中可以結(jié)合滑動實現(xiàn)多選。

長按滑動進行多選針對文件較多的場景非常便利，也不用擔(dān)心誤操作。在一些相冊應(yīng)用中點擊選擇按鈕之后也可以通過滑動實現(xiàn)多選，操作路徑多一步。無論是通過激活選擇按鈕，還是長按都是起到二次確認的作用，長按滑動操作相對更簡單。

小結(jié)

如果想做HMI體驗設(shè)計了解開發(fā)流程后，首先開始設(shè)計前最需要知道的是以什么為基準去設(shè)計，以及設(shè)計的限制，也就是設(shè)計原則。尤其HMI體驗設(shè)計是整車體驗的一部分，也變得越來越重要。

剛開始進入車載行業(yè)的同學(xué)都會存在一個誤區(qū)，會拿互聯(lián)網(wǎng)那一套設(shè)計規(guī)范套路汽車HMI設(shè)計，但其實汽車HMI有自己的設(shè)計原則和設(shè)計規(guī)范以及美學(xué)理念。

汽車行業(yè)本身是一個有著強烈美學(xué)理念和設(shè)計規(guī)范的行業(yè)，其實準確的說應(yīng)該是汽車HMI中控設(shè)計是基于自身傳統(tǒng)規(guī)范，結(jié)合互聯(lián)網(wǎng)移動端和Web端的基礎(chǔ)上，慢慢形成了一種新的設(shè)計規(guī)范。加上龐大的行業(yè)從業(yè)者的外溢，互聯(lián)網(wǎng)的美學(xué)理念和設(shè)計規(guī)范，已經(jīng)在入侵進來形成HMI設(shè)計新興的細分領(lǐng)域。

那很多同學(xué)問了我們想去做HMI設(shè)計應(yīng)該從哪里下手啊，在這里我建議大家無論做任何的設(shè)計都應(yīng)該從用戶場景、用戶痛點下手。

一、了解與用戶溝通的設(shè)計語言

在設(shè)計HMI的過程當中，都是基于用戶在智能車的場景里。就像設(shè)計APP會基于用戶痛點和用戶場景來的一樣。在智能車的體驗里，首先是駕駛員、其次是車、以及系統(tǒng)三個要元素組成了車內(nèi)場景。

在結(jié)合了現(xiàn)有的互聯(lián)網(wǎng)車機設(shè)計原則，主要考慮的還是簡單易用和高效專注。

簡單易用

在設(shè)計上應(yīng)該為駕駛員提供更完善的包容機制，操作和信息的統(tǒng)一性和延續(xù)性，幫助用戶降低操作成本，提升用戶體驗。

高效專注

考慮駕駛員的實際場景的多樣性，注意力容易分散或暫時中斷。所以在設(shè)計的時候 要考慮除非重要的警報，盡量用聽覺給到用戶的提示。操作上可以滿足單手操作，并為用戶的每一步操作提供及時的反饋。

二、三秒原則

之前看過一個“三秒原則”的理論，開車時在高速上要保持和前面通過一個參照物三秒的距離，才是安全的，說明人在高速行駛的反應(yīng)時間是三秒。

用戶的注意力管理對減少由注意力分散導(dǎo)致的交通事故十分必要，開車過程中，必要操作需要遵循3秒原則，用戶必須在第1秒內(nèi)找到應(yīng)用場景的重點信息與功能入口，然后第2秒進行交互動作，最后第3秒得到想要的信息結(jié)果。準確把握每個過程中的時間，排除多余元素干擾，避免分散注意力。

相關(guān)鏈接：車載系統(tǒng)中，交互設(shè)計的「三秒原則」

在三秒原則里，一秒視覺、兩秒交互。排除車的硬件體驗，那HMI設(shè)計師在系統(tǒng)里要給到用戶一個什么樣的視覺原則和交互原則是我們今天要研究的問題。

三、HMI視覺設(shè)計原則

1.顏色

車載的美學(xué)他們大多是深色的，金屬質(zhì)感，邊框和陰影。早期的車載用戶界面都是硬性的感覺。但是現(xiàn)在行業(yè)已經(jīng)成熟到一個包羅萬象的男女皆宜的當代審美。所以現(xiàn)在的視覺可以在以往的傳統(tǒng)上，是汽車界面更新潮更科技。

1.1 關(guān)于色彩

主流的背景以深色為主，那是因為深色的背景更不容易分散司機注意力，減少了眩光的問題?，F(xiàn)在一些新能源車可以切換白天黑夜模式，也會出現(xiàn)淺色的背景，淺色模式的整體色調(diào)不好把控，處理不好會使屏幕一直處于高亮狀態(tài)，會讓駕駛員產(chǎn)生一定視覺疲勞。

色彩規(guī)則以 中華人民共和國國家標準 關(guān)于駕駛安全的基礎(chǔ)標準為大前提，設(shè)定符合車載場景的取色類型。

色彩對比度

由于駕駛環(huán)境的復(fù)雜光線條件，需要滿足在不同照明條件（日間/夜間/暗光/眩光）下的可讀性，對比度需滿足以下條件：

• 文本與底圖對比度建議大于7：1（至少4.5：1）。背景推薦使用深色，避免大面積使用純白色，過度吸引用戶注意。

• 過高的對比度導(dǎo)致視覺疲勞和閱讀效率的降低。深色模式下背景與文本或圖形的對比度建議不大于18：1。

* 注：下圖來自 https://color.review/可在此鏈接查閱色彩對比度關(guān)系。

飽和度與明度的合理搭配

長時間駕駛本身精神與視覺會更加需要集中注意力在前方，此時車內(nèi)環(huán)境中，不宜有過于強烈明顯的色彩干擾視線，可試想你在電影院中看電影時，身邊的人的手機亮度最高，此時會嚴重影響視覺的余光，難以聚焦在前方畫面上。

因此視覺設(shè)計的整體色彩體系應(yīng)當適當?shù)慕档惋柡投?，同樣的，車載系統(tǒng)視覺的設(shè)計也應(yīng)避免使用同一色系的方案，這樣無法在1秒的安全時間以內(nèi)讓用戶有效果的判斷識別信息

根據(jù) Munsell Color 原理得出，飽和度和明度的兩個數(shù)值越大，顏色越鮮艷。在車機配色選擇上請遵循以下規(guī)則：

• 越靠右上角的色值越鮮艷，所以不建議選取。

• 取色時，同時考慮飽和度和明度，這兩個因素的值之和盡量小于180（即：S + B ≤ 180）。

不建議選擇單色，建議增加輔助色

更好的可以幫助我們分組，提高信息的獲取能力。

結(jié)合 ISO 15008 （道路車輛.運輸信息和控制系統(tǒng)的人類工效學(xué)方面.車輛目視顯示用規(guī)范和試驗程序）

車載界面色彩傾向度定義了適合作為品牌主要控件的色調(diào)的功能色，強調(diào)品牌視覺形象。并結(jié)合 GB 4094 相關(guān)信號顏色規(guī)定同樣定義不適合的色彩闕值。

按照功能色分類可以根據(jù)常規(guī)場景將功能定位一級色、二級色、三級色。

狀態(tài)顏色

反饋成功及警戒提醒在駕駛場景中至關(guān)重要，結(jié)合 GB4094相關(guān)信號顏色規(guī)定，狀態(tài)定義需要與相關(guān)法規(guī)及駕駛者習(xí)慣思維的明確色相相結(jié)合。

狀態(tài)用色分類：此處顏色以 HSV 顏色模型參數(shù)為標準。

百度主題案例：

阿里顏色規(guī)范：

華為顏色設(shè)計規(guī)范：

設(shè)計走查自測表：阿里車載-設(shè)計走查自測表

為方便車載小程序設(shè)計，提供輕量化的小程序設(shè)計走查表以供參考； 可用于項目前期設(shè)計自測、項目中研發(fā)自測檢查、項目上線后設(shè)計/產(chǎn)品協(xié)同開發(fā)同學(xué)完成自測問題，查缺補漏規(guī)避風(fēng)險點；

2. 字體

中控與駕駛員的距離處在70cm-85cm之間，設(shè)計稿一定要在實車上感受，是否足夠清晰，是否能快速識別，中控屏搭載的更多是各種應(yīng)用，顯示的文字相對會多一點，除了文字需要保證在可視區(qū)間里，文字內(nèi)容應(yīng)當通過字號字重來區(qū)分主次關(guān)系，用戶在掃一眼的過程中即可準確的看到重點信息。保證易讀性。

字體的顏色盡量選擇對比度高的，參考WCAG標準。方便用戶能快速掃視。

字體的大小，層級，對比度等都是影響視覺可讀性和閱讀效率的重要因素，為保障文本的易讀性，界面文字需滿足以下要求：

• 最小可識別文字尺寸：5.4mm。
• 字體層級：區(qū)分文本主副層級，字號差距需保持4-6sp。
• 需要用戶閱讀和處理的重要段落文字不超過20個字（700字/分鐘，2秒內(nèi)讀完）。
• 對于需要用戶關(guān)注的文本信息可通過增加字重的方式突出內(nèi)容。

推薦閱讀：適合車載顯示的10款字體

百度字體設(shè)計規(guī)范：

阿里字體設(shè)計規(guī)范：

3. ICON

ICON的設(shè)計形式，可更多結(jié)合應(yīng)用的內(nèi)容，應(yīng)注意在內(nèi)容與形式結(jié)合時，視線上要保持一致性，可有助于在一秒的安全時間內(nèi)讓用戶快速瀏覽并判斷信息

點擊是交互行為中最為常用的動作，為確保用戶點擊操作的易用性和成功率，操作按鈕及熱區(qū)需滿足以下規(guī)則：

• 圖標：最小的圖標尺寸為6.9mm，推薦圖標大小為9.2mm。
• 熱區(qū)：最小10.7mm，推薦熱區(qū)15.3mm以上，熱區(qū)間隔3mm以上。

4. 內(nèi)容排版

車載以駕駛員的操作為主，功能布局盡量設(shè)計在離手最近的位置，縮短操作距離，盡可能將熱區(qū)放大，展示信息放在右側(cè)。

4.1 層次和數(shù)量

所有的信息按照使用場景、功能。分組展示，確保信息按照的優(yōu)先級進行交付。在任何場景下展示盡可能少的信息。避免過多信息的干擾，必須做到界面顯示輕量化。數(shù)量盡量不超過3-4個。

4.2 閱讀排版

可以根據(jù)閱讀瀏覽模型Z字型和F字型?；炫诺臅r候建議使用一種字體。

4.3 預(yù)留安全熱區(qū)

避免元素?zé)釁^(qū)過近或重疊，需要使可觸摸目標之間預(yù)留足夠的安全距離，至少保持 3.5mm 的熱區(qū)間隔。

5、品牌IP

用戶對傳統(tǒng)汽車的品牌感認知，還是停留在車標、車造型等硬件外觀，而智能汽車，搭載了一個智能系統(tǒng)，除了駕駛需求，人和車的交互更多的會停留在HMI，所以，對于HMI融入品牌元素也相當重要，品牌化是智能座艙視覺設(shè)計重要的發(fā)展趨勢之一。

現(xiàn)在主要品牌的體現(xiàn)形式是車載的IP管家，他有具體的名字，可以用語音喚醒。

四、HMI的設(shè)計六大交互原則

說到HMI設(shè)計，雖然所有人都很容易理解，HMI設(shè)計要考慮注重安全，需要在設(shè)計上適應(yīng)車載的使用場景。但是UI設(shè)計原則和UX設(shè)計原則很少有人系統(tǒng)性的回答過。對比原有的交互六大原則，適配到車載的場景下，提煉出六大交互設(shè)計原則。

1、基本原則

1.1、安全性原則  ?? ?? ?? ?? ??

HMI涉及到的載體都是汽車零部件中的安全件，HMI設(shè)計首先考慮的必須是以安全為第一導(dǎo)向， 所有顯示信息都應(yīng)該按照人機工程學(xué)進行合理排布，按照駕駛者的行為習(xí)慣進行設(shè)計。

與移動端的視覺顯示不同，HMI設(shè)計師需要注意除了基礎(chǔ)的視覺顯示規(guī)范外，還需格外注意與安全相關(guān)信息的展示、視覺警告、文字易讀性和顯示眩光等顯示問題。

1.2、及時反饋原則

人的大腦每天通過五種感官接受外部信息的比例分別為：味覺1%；觸覺1.5%；嗅覺3.5%；聽覺11%；視覺83%。

時刻保障關(guān)鍵信息是最高優(yōu)先級的，保證在各種環(huán)境場景下具有良好的可見性和易讀性，無需駕駛員費力尋找和識別。

隨著大屏、多屏化的發(fā)展趨勢，除了依賴視覺反饋，以及減少或避免觸摸屏的誤觸功能，聽覺和觸覺也可以輔助視覺反饋。

1.2.1 不同場景下的提示

除以上正常駕駛場景外，還有部分對特殊場景的提示，如油耗、故障、雨雪天、超速、疲勞等

車載系統(tǒng)需要有能力面對復(fù)雜的應(yīng)用場景，處理需要更加智能，（比如復(fù)雜路況+不良天氣的提示），以及車內(nèi)的環(huán)境控制（如聲音、氣溫）需要更加敏感。

車載系統(tǒng)的設(shè)計相比于移動端有著更明顯的約束，不論是從空間（使用環(huán)境）、時間（三秒原則）、行為（交互方式）、心智（心理訴求），都有著明顯獨特的場景和特點，要做好車載系統(tǒng)設(shè)計，我們需要有豐富的同理心以及親身體驗并反復(fù)驗證設(shè)計。

圖片來源：https://dribbble.com/czx

1.2.2 信息獲取效率

同樣，現(xiàn)在的智能汽車，信息呈現(xiàn)的方式，主要也還是視覺為主，聽覺為輔。在還沒有完全實現(xiàn)自動駕駛前，信息呈現(xiàn)層級保持不變。

在汽車行駛的過程中當中最高優(yōu)先級是視覺，時刻要觀察道路，查看導(dǎo)航。聽覺輔助也是很有必要考慮的場景，通過語音反饋司機需要獲取的信息，能讓司機盡量保持視覺焦點在路況上。多場景的融合考慮信息獲取的效率，能減少在開車過程中的安全隱患。

1.3、完整性原則

將頁面信息根據(jù)某些關(guān)聯(lián)性，分區(qū)塊進行顯示，這將有助于用戶更容易的建立信息位置記憶，用極少量的時間查看車輛狀態(tài)，減少搜索信息帶來的注意力分散，保障駕駛安全。

1.4、簡單學(xué)習(xí)原則

面對C端用戶，設(shè)計師要考慮盡最大可能使用符合用戶習(xí)慣交互方式，減少學(xué)習(xí)和適應(yīng)。讓駕駛員更有安全感和便捷的操作。如果交互界面改變了，用戶極有可能必須從頭開始學(xué)習(xí)一些基本操做。在市場競爭壓力這么大的情況下，用戶很容易就轉(zhuǎn)向自己接受程度高的產(chǎn)品。隨著屏幕越做越大，需要駕駛員操做的功能也越來越多，所以駕駛員會因為復(fù)雜操做，面臨交通路況擁擠的情況下的額外壓力。

1.5、信息可視化原則

盡可能的采用圖像化/擬物化風(fēng)格，避免或減少使用復(fù)雜的、過于專業(yè)的、技術(shù)性的圖標和術(shù)語。

1.6、情感化原則

馬斯洛需求指出，人們需要動力實現(xiàn)某些需求，有些需求優(yōu)先于其他需求。我們當下在滿足基礎(chǔ)需求后需要的更高階的需求。情感化設(shè)計是用戶體驗和需求金字塔的最高層級，情感化需求也是必然的需求。在移動端，情感化的體現(xiàn)主要還是視覺層面，比如加載過程中的動效、缺省頁的插畫、異常狀態(tài)的提示等，還有就是和品牌的結(jié)合，增加用戶對品牌的認知。

而對于汽車而言，它是一個空間，就靠屏幕里的視覺元素是遠遠不夠的，應(yīng)該從整車的角度去分析，通過五感（視、聽、觸、嗅、知）創(chuàng)造更豐富的全局體驗，比如可以根據(jù)自己的駕駛需求和個人行為習(xí)慣，自定義氛圍燈，香氛、語音等。

汽車IP

汽車IP用虛擬的人物語音來扮演管家的角色，功能包括了記錄車主的駕駛習(xí)慣，不斷優(yōu)化程序來契合車主習(xí)慣，讓車主有更好的駕駛體驗。

比如蔚來的nomi，既可以陪玩陪聊，還有表情互動，若是加上管家功能，汽車豈不立馬變身駕駛員最好的伙伴？看這小表情，是不是還挺可愛、暖心的哇？

2、分場景

在討論如何對超寬一體屏進行體驗設(shè)計前，我們需要對人在不同場景下的多樣化需求有大致的了解。為此，我們將人與車空間關(guān)系的場景劃分為四大方向依次是：生活、娛樂、辦公和共享。

如生活場景下，全家出游，疲憊的人可以直接在車上睡覺休息，無聊的人可以玩游戲，車內(nèi)空間采用多音道技術(shù)，不同的音道技術(shù)可以避免彼此干擾。除此之外，還可以起到保護隱私的作用，滿足每個人對個人空間的需求。

在娛樂場景下，人可以進行多項休閑娛樂，比如：看電影或者讀書看報，其中使用超寬一體屏觀看電影時，大屏?xí)o人以良好的觀感體驗。

在辦公場景下，人可以在駕艙內(nèi)進行各項辦公活動，諸如：視頻會議、電腦辦公、商務(wù)信息處理等。

在共享場景下，車不僅可以是運輸人的移動工具，還能成為運輸貨物的移動工具、移動商城、移動酒店等等。

3、交互方式

3.1觸控：

這里分兩種，一種是通過按鍵控制；一種是通過觸屏控制。都是通過不斷的觸控功能按鈕行程鍛煉肌肉記憶，現(xiàn)在的趨勢越來越趨向重觸屏，輕按鈕，這樣不僅系統(tǒng)迭代成本小，功能可以動態(tài)分布。但是對于一些精準調(diào)節(jié)的功能還是按鍵控制好一些。

微軟 的Surface Dial可以給我們很好的啟發(fā)，智能旋鈕可以解決大部分屏幕調(diào)節(jié)的不精準的痛點，而效率又高。

3.2語音：

在汽車人機交互中，語音交互被認為是車內(nèi)場景下最自然的交互方式，而語音交互需要一個載體來傳達多樣化的情感。

語音控制的前景主要在于兩個因素，一個是可以把除了界面以外的利用起來，一個可以與HMI自由交談，二是最小化HMI手動操作產(chǎn)生的干擾，增加安全性。

3.3手勢：

手勢交互是對語音交互、觸控交互的很好補充，能夠讓車主通過簡單的手勢和語音就能完成車內(nèi)的交互任務(wù)，也是能夠增加交互趣味性、表達情感、傳達情緒的另一個自然交互方式。

常用的手勢：單指滑動（上下左右）、雙指滑動（左右）、五指抓取等。

HMI的交互手勢不同于手機和IPAD，手機和IPAD握在手里，左右手都可以操作，多指組合的可能性也多，而HMI的手勢定義，更多的是需要滿足駕駛員的使用場景，屏幕是固定在車上的，要規(guī)避掉一些不方便的手勢。比如雙指往上滑動就很不方便，向上推不靈活，也有阻力。

五、六大車載系統(tǒng)開源網(wǎng)站

大家要是想了解的更深入，或者想針對于某個平臺去做設(shè)計可以參考一下開源網(wǎng)站。

1. 阿里 Alios 開放平臺

https://miniapp.alios.cn/index#/document

2. 百度車載生態(tài)開放平臺

https://chelianwang.baidu.com/homepage/openPlateform/design/sec-4-1.html

3. 騰訊-車載小場景 (私我領(lǐng)取PDF)

4. 谷歌駕駛

https://developers.google.com/cars/design/design-foundations

5. 蘋果 Apple Car Play

iOS – CarPlay 車載

6. 華為車機三方應(yīng)用交互設(shè)計規(guī)范

https://developer.huawei.com/consumer/cn/doc/50902

六、設(shè)計開眼

如果同學(xué)們還是對中控設(shè)計的設(shè)計標準沒有一個概念的話，建議多去看些現(xiàn)有設(shè)計，去展廳試駕試乘實車，感受下交互，或者在網(wǎng)站上看看視覺不錯的界面設(shè)計都是可以的。

部分圖片來源于https://dribbble.com/czx

圖片來源于網(wǎng)絡(luò)，侵刪

今天的分享就到這里！接下來我會分模塊去跟大家講解歡迎持續(xù)關(guān)注

歡迎大家補充交流！

原文地址：站酷

作者：郝小七

 轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》HMI設(shè)計需要遵循什么設(shè)計原則？

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

▽

這是今天一個學(xué)員發(fā)來要修改的海報，不管是重新還是修改設(shè)計，最重要的是能從圖中分析問題并進行改正。

1、主體不夠明顯

文字在整個版面中的占比過大后，擠壓了主體視覺的產(chǎn)品展現(xiàn)，弱化了視覺信息。

2、信息缺少層次

當文字越多時，就越要將內(nèi)容的主次進行有效的區(qū)分，讓用戶在閱讀畫面時，清晰直觀的體現(xiàn)出文字信息，而如果所有的文字都一樣的大小并且每段文字之間都沒有很好的間隔和空間的留出，這就容易造成閱讀的障礙。

3、背景不匹配

高飽和度的色彩雖然看起來鮮艷，但不代表就一定適用于所有的物體和設(shè)計中，比如畫面中的質(zhì)感和主體的關(guān)聯(lián)，就很難體現(xiàn)出來。

4、字體不統(tǒng)一

字體是要與主題、風(fēng)格的調(diào)性形成一致性，當一個畫面中使用了非常多的字體在進行展現(xiàn)時，不僅無法展示出設(shè)計的美觀，也降低了整體的和諧感。

當分析完這張圖后，我們用兩種構(gòu)圖技巧可以在最短的時間內(nèi)快速改正以上的問題，這里我做了2個修改示例供大家參考。

示例一

1、首先我們運用三等分的構(gòu)圖方法，也就是將畫布分成三個同樣等分大小的區(qū)域。

2、將重要的文字、圖形或者物體分別置入進這三個區(qū)域中。

3、這時會觸發(fā)新的問題，左右以及部分過多的留白應(yīng)該怎么處理，可以將一些次要的文字或點綴裝飾性的圖形搭配在上面，以補足留白過多的問題。

4、之前我們分析修改前的海報中提到，主體被壓縮后不夠明顯，在這里面我們需要一個能明顯被注視的主體。

一個牛丸很孤獨，很孤獨。

它需要人陪。

于是，用手給它搓一下。

一只手，肯定不行，得兩只手，但干搓也太難受了。

還得加點水，讓畫面多點有趣的聯(lián)系。

就這樣，海報原本的問題就這么以合理的排版方式解決了。

示例二

利用的是對焦線構(gòu)圖的方式，這次我們以主體放置為先，看看后面不同的版式變化。

還是一個牛丸，很孤獨，很孤獨。

它需要人陪。

于是，我找到了它的同伴陪它一起。

同伴說咱倆有點無趣，要不再叫點人一起玩。

于是大伙紛紛跟上，并給它們加了點動力。

對角線的引導(dǎo)會幫助我們加深被引導(dǎo)的內(nèi)容記憶，所以我們放置了LOGO，并且四周分布了信息內(nèi)容。

隨之而來的就是新的問題出現(xiàn)了，

下面很空，看起來它也很孤獨。

于是我攜帶著它們，穿越季節(jié)，掠過高架，鋪在留白的框架之間。

而信息主次的變化就在文字的大小、粗細、比例布局之間形成。

我們最后再看下兩個示例中，不同的構(gòu)圖帶來的變化。

這就是今天帶來排版那點事！

原文地址：修先森撩設(shè)計（公眾號）

作者：修先森

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》版式教程 | 海報修改，構(gòu)圖版式的變化

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

1. 怎么算好用

用戶覺得軟件不好用通常是由于操作界面不符合常識，交互邏輯出人意料導(dǎo)致的。這里我們要引入三個模型的概念：實現(xiàn)模型，心理模型和呈現(xiàn)模型。實現(xiàn)模型是軟件的內(nèi)部運行原理，用戶無需關(guān)心。心理模型是用戶期望中完成任務(wù)的方式，呈現(xiàn)模型則是軟件被設(shè)計來完成任務(wù)的方式。呈現(xiàn)模型越是接近用戶的心理預(yù)期，用戶的學(xué)習(xí)成本越低，也就會覺得這款軟件很好用。

2. 理解業(yè)務(wù)訴求

有個很恰當?shù)谋扔鳎河脩舨皇切枰话央娿@，而是墻上要有個洞。后來的研究理論更進一步：還得搞明白為什么用戶需要在墻上打洞，他要連接什么東西？能不能做成無線的？等等。

接到需求后產(chǎn)品經(jīng)理一般會在 PRD 評審時向設(shè)計側(cè)講解需求背景和功能邏輯，在這個階段我們可以了解到產(chǎn)品經(jīng)理規(guī)劃中的用戶流程和使用方式。產(chǎn)品原型呈現(xiàn)的只是無數(shù)解決方案中的一種，了解了業(yè)務(wù)訴求再回顧原型方案，經(jīng)?？梢詭砣碌囊曇?，并由此推導(dǎo)設(shè)計方案。下面我們就看下如何從組件，結(jié)構(gòu)，功能，狀態(tài)幾個層面解決設(shè)計問題。

一. 明確功能用途

1.1 信達雅的文案

文案是界面的重要構(gòu)成，卻是界面設(shè)計中最不被重視的一部分。很多軟件之所以用起來有一層朦朧的隔閡感，罪魁禍首就是晦澀的文案。簡單的糾正文案可能會帶來煥然一新的使用感受。

• 信：語義準確，明確事件的主體客體。
• 達：避免無效或重復(fù)文案，減少被動語態(tài)，簡潔通順地進行描述。
• 雅：優(yōu)雅且有涵養(yǎng)地與用戶溝通。
• 配圖：有些流程或者用詞比較特殊，單用語言難以描述，配上圖一目了然。

1.2 視覺線索（功能可見性）

圖形用戶界面誕生之初，界面元素對物理世界的模擬是為了便于用戶將現(xiàn)實中的常識套用到虛擬界面上；擬物化通過質(zhì)感暗示用戶界面的交互方式；在扁平化時代，提供視覺線索仍然是必要的原則。拿拖拽操作來說，首先可以拖動的組件上要有把手，暗示可以被撿起。組件被拿起來時要明顯擴大的投影樣式描繪高度，并在列表中顯示一條瞄準線便于用戶精確定位。

再比如卡片式設(shè)計，和現(xiàn)實中的卡片相同，它可以明確地劃分出功能和信息的關(guān)系。要注意的是，視覺分區(qū)越多，頁面復(fù)雜度越高，設(shè)計時需要控制平衡。

1.3 熟悉的組件

用戶點擊下拉選擇器的時候，自然會期望在周圍彈開一個選項浮層，因為他們用過的所有軟件交互都是這樣。這個就是習(xí)慣用法范式的應(yīng)用[注]，盡可能套用常規(guī)的交互方式讓軟件的操作容易預(yù)測，用戶理解成本低。

然而在常規(guī)組件無法承載實際需求時，有必要跳出慣用范式，通過差異的視覺樣式給用戶思想準備。例如一些原型圖中的選擇器使用了下拉的樣式，觸發(fā)的卻是選擇抽屜或者彈窗。這種意外的發(fā)生或多或少會降低用戶使用時的信心，因為他們再也不確定點擊下拉后會發(fā)生什么。通過特殊與常規(guī)的區(qū)分，其實也維護了慣用范式的一致性。

二. 導(dǎo)航結(jié)構(gòu)分配

你一定遇到過這種棘手的原型：頁面導(dǎo)航又多又深，林林總總地鋪灑在導(dǎo)航區(qū)和功能區(qū)，信息密度堪比柯林斯英漢辭典。頁面導(dǎo)航是界面的基本框架，處理系統(tǒng)的導(dǎo)航方式是頁面設(shè)計早期就需要完成的工作。

2.1 幾種反例

• 主導(dǎo)航級數(shù)過多：視覺樣式復(fù)雜，操作時需要頻繁卷展。
• 內(nèi)容區(qū)頭部導(dǎo)航堆積：用戶先看到的不是內(nèi)容而是導(dǎo)航，瀏覽效率較低。
• 橫縱導(dǎo)航分配不合理：不合理的結(jié)構(gòu)會影響視線掃描和點選，且空間利用率低。以圖中的結(jié)構(gòu)為例，一級導(dǎo)航下不一定都會有二級或三級導(dǎo)航，就會導(dǎo)致頁面版式差異過大。

2.2 控制一級導(dǎo)航深度

一級導(dǎo)航過深時，有必要進行降級。頂欄導(dǎo)航可以向邊欄導(dǎo)航卸載。邊欄導(dǎo)航是一級時，可將最低級的導(dǎo)航放到內(nèi)容區(qū)吸頂；若層級仍然不夠用或?qū)Ш綏l目較多，可以再增加一個縱向?qū)Ш健?

2.3 平衡內(nèi)容區(qū)導(dǎo)航

吸頂導(dǎo)航會占用內(nèi)容區(qū)的縱向空間，但可以隨時跳轉(zhuǎn)。內(nèi)容區(qū)內(nèi)的導(dǎo)航性質(zhì)更類似于篩選，能夠隨內(nèi)容滾動，不便于隨時切換。頁簽類型區(qū)別大或是需要切換對比時，可以將導(dǎo)航吸頂；頁簽下內(nèi)容形式近似或需要更多瀏覽空間時，可以將導(dǎo)航放在內(nèi)容區(qū)。

2.4 減少空間浪費

很多原型會習(xí)慣性地在頁面頂部配置一個頂欄。實際上里面的商標，賬戶信息，設(shè)置等功能可以整合到邊欄中，這樣內(nèi)容區(qū)上方會多一些縱向空間。

三. 合理布置功能

3.1 分級展示功能

比如一些的圖表類頁面主要用于瀏覽而不是編輯，這種情況下將操作隱藏到省略號或者漢堡菜單中，不僅可以減少信息干擾，還能避免誤操作。

高級功能的隱藏很好理解，比如 macOS 的網(wǎng)絡(luò)配置只顯示基礎(chǔ)的連接功能，DNS 配置等高級操作被整理到了一個按鈕中。你可以想象如果所有的配置項都展示一個頁面，對于用戶日常聯(lián)網(wǎng)操作會有多么不友好。

3.2 拆分功能

除了分級，當頁面或區(qū)域內(nèi)的功能過于集中時，可以進行拆分以降低信息壓力。

分離檢索與查看：列表同時兼具瀏覽與管理的功能，但在字段眾多，空間有限的情況下，可以選擇其中有代表性的字段在單元行中顯示，便于快速掃描和管理，完整的單元行信息放到下一個層級顯示。

分離表單區(qū)塊：當表單存在區(qū)塊表單時，可以只在表單中顯示區(qū)塊的預(yù)覽，將區(qū)塊的新增和配置放到抽屜中進行，由此減少功能堆積。

3.3 數(shù)據(jù)的編輯

涉及數(shù)據(jù)編輯的頁面存在四種設(shè)計方式，需要綜合考慮表單的數(shù)量，用戶的操作頻次和使用方式來判斷采用哪種。對于此類問題的推敲，也可以在 StackExchange 的用戶體驗社區(qū)參考更多案例：

例1：https://ux.stackexchange.com/questions/28210/inline-editing-vs-edit-view?rq=1

例2：https://ux.stackexchange.com/questions/93159/view-mode-or-always-in-edit-mode

查看模式：帶查看模式的頁面視覺效果整齊，信息干擾最小，且不會誤操作。但需要進入編輯模式修改頁面內(nèi)容。

直接編輯模式：用戶到達頁面時，數(shù)據(jù)就可以被修改生效。常見于設(shè)置類頁面。該模式使用效率最高。但由于容易誤操作且視覺信息冗雜，不太適合大型表單。

行內(nèi)編輯模式：頁面樣式類似查看模式，當鼠標懸停在數(shù)據(jù)上，界面會提示用戶此處可以編輯，用戶點擊后可以快速針對局部數(shù)據(jù)做修改。該模式只適用表單項少的情況。

實時保存：頁面長期處于編輯模式，系統(tǒng)會自動保存用戶的操作。常見于線上文檔工具。該模式誤操作風(fēng)險最高，需要提供版本控制和操作撤回功能。

3.4 減輕視覺壓力

業(yè)務(wù)層面上無法避免單頁出現(xiàn)大量表單時，可以在視覺上分節(jié)。注意！和真正的分步不同，這里的只是從視覺層面對頁面信息進行處理，沒有流程先后的概念，所以盡可能不要拆分頁面。以下圖為例，通過視覺上的劃分，即使在同一個頁面顯示同樣數(shù)量的表單，版面空間的呼吸給予了用戶喘歇的余地。錨點導(dǎo)航是個錦上添花的控件，空間允許時可以加上。

3.5 定制化交互

3DS Max 的四元菜單是一個很有代表性的設(shè)計，在視口右鍵時會圍繞光標彈出4個內(nèi)容敏感菜單而不是一個，這四個菜單顯示的工具甚至可以自定義。普通系統(tǒng)在處理此類問題時，要么采用需要滾動的長菜單，要么用聯(lián)級選擇器分類。而這個設(shè)計的優(yōu)越性在于，通過分類并同時顯示四個面板，用戶點擊次數(shù)少，光標的移動距離短，大大提高了工作效率。

再比如 Spotify 底欄的探索頁簽，點擊會進入音樂探索頁面（頂部有搜索框），雙擊會直接進入搜索框，長按則會激活語音助手。這些定制化交互的特點在于，它們巧妙地簡化了操作流程，但是用戶不知道也絲毫不影響使用。

四. 補救意外情況

4.1 空狀態(tài)引導(dǎo)

一個列表出現(xiàn)空狀態(tài)的可能性有：

• 確實沒有條目：如果能添加的話，可以提示用戶如何添加。
• 應(yīng)用了過多篩選器：提示用戶嘗試其他篩選方式或重置篩選器。
• 加載異常：提示用戶刷新頁面。

雖然后果一樣，但問題本質(zhì)不同，解決方式自然也不同，此時需要分別給出對應(yīng)的引導(dǎo)。

4.2 異常引導(dǎo)

再沒有什么比一行“操作失敗”的提示更讓人絕望，用戶不知道哪出了問題，也不清楚如何解決。異常流程時有發(fā)生，此時系統(tǒng)的引導(dǎo)會起到至關(guān)重要的作用，它能夠帶用戶走回正軌，減少無助感。

4.3 標明功能不可用的原因

該問題的重災(zāi)區(qū)是工具類軟件，用著用著一些功能突然就灰掉了，只能慢慢摸索是哪里的問題。功能之所以不可用肯定有個原因，不論是直接顯示還是鼠標懸停時顯示，有必要要讓用戶明白原由或者如何解決，避免把用戶困在死胡同。

4.4 提供幫助

新手教程特別考驗用戶的記憶力，尤其是在新接觸軟件的學(xué)習(xí)爬坡階段，而且很難保證在一段時間不用后，用戶還能記得如何操作。當系統(tǒng)引入了晦澀概念或復(fù)雜交互時，最好在該功能周圍提供說明，或懸停時展示 tooltip. 使用戶無需長期記憶，在用到該功能時又可以快速上手。

我曾經(jīng)寫過一篇介紹 Protopie 的文章，慚愧的說，由于日常項目中的交互大多比較基礎(chǔ)，其實用到 Protopie 的并不是很多，重新打開難免手生。但這款軟件界面上可以見到很多問號圖標，點擊即可跳轉(zhuǎn)到詳細的功能講解文檔，不論是對于新人上手還是發(fā)掘軟件功能都很有幫助。

結(jié)語

圖形界面的本質(zhì)是人與機器交流的語言。與現(xiàn)實生活一樣，我們傾向與禮貌體貼的對象溝通。所以下手設(shè)計時要盡最大可能從人類的本性出發(fā)，才能在業(yè)務(wù)和產(chǎn)品邏輯的限制下，為用戶塑造更具親和力的界面模型。

注：文章中均為設(shè)計時遇到的真實案例，為脫敏隱去了細節(jié)。三種模型和界面范式的內(nèi)容整理自 About Face，分別在14頁和240頁, 有興趣可以詳細閱讀了解。

原文地址：京東設(shè)計中心JDC（公眾號）

作者：邢禹

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》引起舒適！什么是好用的界面

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

1.  屏幕尺寸

iOS 規(guī)范沒有特別規(guī)定的屏幕尺寸，因為不同尺寸的 iPhone 寬度不同。

以前常用的是 iPhone 8 的 375×667，后來常用的是 iPhone 11 Pro / X 的 375×812。

但是 Material Design 的屏幕尺寸就很明確，一直都是 360×640，看起來就讓強迫癥很舒適的數(shù)字。

2. 手勢指示條

iPhone 的底部都是統(tǒng)一的手勢指示條，而 Android 手機底部可能是三個導(dǎo)航按鈕，也可能是手勢指示條，甚至可能什么都沒有。

Material design 的示意圖上，通常底部沒有任何東西，所以設(shè)計稿也可以簡單點，手勢條和導(dǎo)航按鈕都不用放。

3.  狀態(tài)欄

iOS 的狀態(tài)欄很高的，如果改成 Material Design 就會窄很多。

上面是比較簡單的展示形式，下面是 Material Desgin 官網(wǎng)的示意圖，高度是 24：

4.  底導(dǎo)航

iOS 的底導(dǎo)航比 Material Design 更高，給手勢條留出的位置更高，而且常用磨砂玻璃做背景。

而下圖是 Material Design 官網(wǎng)給出的底導(dǎo)航尺寸，字號規(guī)定是 12，非常清晰了吧：

5. 下拉浮層

iOS 使用很多 Action Sheet，而 Material Design 則較少使用這類浮層，較多使用頁面。

當然，Material Design 也是有類似浮層的，叫做 Bottom Sheets，只是一般只作為菜單使用：

6.  頁簽

iOS 規(guī)范的頁簽是上圖左側(cè)這種擬物風(fēng)格的，而 Material Design 的頁簽是上圖右側(cè)這種簡單的線條風(fēng)格。

下圖是 Material Design 官網(wǎng)給出的尺寸規(guī)范，推薦字號是 14:

7. 表單

iOS 和 Material Design 的表單還是有挺多差異的，例如：

• iOS 的表單項之間有分割線，而 Material Design 沒有。
• iOS 的表單項之間右側(cè)一般放置箭頭，Material Design 則可能是圖標。
• iOS 的文本框都是簡單的下劃線，Material Design 可能是矩形框也可能是下劃線。
• ……

內(nèi)容太多不一一舉例了，還是自己去看規(guī)范比較好。

8. 樣式

iOS 喜歡用淺色大陰影，而 Material Design 一般用比較細的深色陰影。

兩邊的復(fù)選框也不一樣，iOS 喜歡全部用圓形，而 Material 則嚴格遵照復(fù)選框應(yīng)該是方形的心理習(xí)慣。

對比

對比一下兩邊的差異，看看有多不同。

總結(jié)

大部分公司為了節(jié)約成本，并不會為手機端搞兩套設(shè)計，通常是兩個平臺規(guī)范都要綜合考慮。

所以 Material Design 這把 iOS 規(guī)范直接改成 Material Design 的教程，顯然是不建議直接拿來用。

在不同的場景，尋找最適合的方案才是上策。

原文地址：體驗進階（公眾號）

作者：設(shè)計師ZoeYZ

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》iOS 規(guī)范與 Material Design 哪里不同？官網(wǎng)總結(jié)了這幾點

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

01.  什么是巴黎風(fēng)格 

如果要追溯巴黎風(fēng)格的歷史，得回到大概100年前后，這個城市的時尚和設(shè)計就已經(jīng)開始得到重視，20世紀初，由于當?shù)叵M和隨之而來的出口，巴黎的時裝行業(yè)完全爆炸式成為一個產(chǎn)生了大量財富的產(chǎn)業(yè)。

我們要特別贊揚一位法國人，他把時尚設(shè)計與時尚風(fēng)格聯(lián)系在了一起，尤其是巴黎，至今仍享有這樣的聲譽，都需要感謝上圖這個人Louis XIV路易十四，太陽王。

自1643年起直到1715年去世，這位來自波旁王朝的君主保持著歐洲歷史上在位時間最長的國王的記錄，為72年零110天。法國和巴黎之所以成為路易十四統(tǒng)治時期的時尚主導(dǎo)力量，與他在位期間的極度集權(quán)有關(guān)。在那個時候，王室控制了奢侈品和時尚產(chǎn)業(yè)，從根本上使他們服從于王室的品味和特點。

這種時尚在影響法國國內(nèi)外的人們，對于當時什么是“熱門”時尚方面扮演了重要的角色。它通過超越宮廷的營銷設(shè)計和發(fā)明創(chuàng)意，如改變時尚的風(fēng)格和季節(jié)，用一種在當代有意義的方式來談?wù)摪屠栾L(fēng)格。

二戰(zhàn)后的法國，是法國時尚界的轉(zhuǎn)折點，由于設(shè)計師克里斯蒂安 · 迪奧（Christian Dior）1947年推出的New Look，巴黎重新成為世界時尚之都。他當時對時裝設(shè)計的大膽嘗試，是自路易十四（Louis XIV）時代以來讓法國時裝引人注目的東西，即對魅力和青春的關(guān)注。在二戰(zhàn)期間被納粹占領(lǐng)后，這些東西引領(lǐng)了巴黎高級定制時裝的復(fù)興。

與此同時，著名的時尚雜志，香奈兒于1945年在法國成立，著名時裝設(shè)計師可可 · 香奈兒本人于1952年回到巴黎。

到了20世紀60年代，法國的高端時裝再次全面展開，這導(dǎo)致了其他著名設(shè)計師的（成衣）時裝獲得了巨大的成功和銷售。法國設(shè)計和時尚的爆炸式增長導(dǎo)致許多品牌被集團化，如大家熟悉的LV，Dior，讓我們快速回到今天。

如今基礎(chǔ)歷史，巴黎已經(jīng)擁有法國八大奢侈品牌，愛馬仕、LV、香奈兒、迪奧等等。這座著名的城市里除了有奢侈品牌，同時巴黎風(fēng)格還被用到了生活方式、室內(nèi)設(shè)計、室外建筑等各種場合。

標志性的鐵塔，讓全世界都想來打卡的圣地，鐵塔的設(shè)計也是非常有特色。

這座鐵塔也被用在了很多知名設(shè)計、品牌中，更是巴黎的一個代名詞。還有巴黎的建筑，也是充滿歷史與文化底蘊。

這幾年比較火的新銳法國品牌AMI就是誕生于巴黎，我也很喜歡這個品牌的設(shè)計。

巴黎每年的時裝周，最新最潮的設(shè)計理念，無不向世界傳遞著這座城市的設(shè)計態(tài)度。從室內(nèi)設(shè)計到室外設(shè)計，這使得巴黎的設(shè)計風(fēng)格不僅存在于時尚行業(yè)，在各行各業(yè)都有所體現(xiàn)。巴黎的風(fēng)格經(jīng)典，獨特，是一個非常高端的設(shè)計。

除了今天介紹的巴黎風(fēng)格，國內(nèi)一些大公司對于設(shè)計風(fēng)格也有很多研究，比如天貓之前官方發(fā)布的一個報告，今天也分享給大家，可以用來參考和學(xué)習(xí)，需要的話可以添加叮當貓回復(fù)“報告”領(lǐng)取。

長按掃碼添加叮當貓回復(fù)：報告

e

02.  巴黎風(fēng)格設(shè)計特點 

了解完巴黎風(fēng)格歷史后，那我們來學(xué)習(xí)下，巴黎風(fēng)格給人視覺感受到底是什么？

f

▍1.有趣的紋理

巴黎風(fēng)格很大一個特點就是高級感，經(jīng)常用一些非常有趣的紋理，比如上圖的金屬質(zhì)感紋理，以及右側(cè)像羽毛的一樣的紋理，紋理無論在服裝上，還是在奢侈品包包上都體現(xiàn)的淋漓盡致。

無論是LV經(jīng)典的老花紋理，還是今年新款，對于皮革的不同運用，都能感受到巴黎風(fēng)格對于紋理極致的運用。有趣的紋理能讓產(chǎn)品有自己獨特的氣質(zhì)。

包括在LV這些有代表性的門店設(shè)計，紋理是很核心的元素，看這個LV門店設(shè)計，使用了非常強烈的紋理作為主視覺。

同樣來自法國巴黎另外一個品牌香奈兒，也是在紋理上下了很多功夫，他們的衣服紋理運用，包的紋理運用，都在引領(lǐng)時尚界。

香奈兒在海報品牌宣傳上的設(shè)計，也延續(xù)了這種紋理的高級感。

f

▍2.白色（負空間）的運用

巴黎風(fēng)格還有一個特點就是負空間用的比較多，頁面留白比較多，當然這個白色不一定的純白，而是頁面空間感，這點可以從一些大牌的設(shè)計中看到身影，通過大氣、空曠簡單的背景，聚焦到元素主題上。

愛馬仕的這組海報，就是這種風(fēng)格，人物主體就是模特，后面深邃起伏的山丘作為烘托。讓頁面呈現(xiàn)出這種動感，放飛自我的氣質(zhì)。也能傳遞出品牌的釋放、狂野的感受。

白色空間的運用，遵循少即是多原理。再配合巴黎風(fēng)格對于人物的選擇，對于紋理的運用，讓畫面形成焦點，同時這樣的設(shè)計能體現(xiàn)出很強魅力，萬眾矚目的視覺感受，上圖巴黎八大奢侈品牌的一些設(shè)計中，都能看見這樣的身影。

g

▍3.極簡主義

以香奈兒為例，就是極簡的典范，無論是門店設(shè)計極簡的線條，還是到日常產(chǎn)品設(shè)計，都遵循著極簡，但是極簡不代表沒有質(zhì)感，巴黎設(shè)計風(fēng)格的紋理，配合極簡的設(shè)計，讓設(shè)計別出一格。

上圖的兩件服裝設(shè)計，就是最簡單的黑白配色，搭配不簡單的裁剪，有紋理的材質(zhì)，讓整個衣服的氣質(zhì)呈現(xiàn)出高級，優(yōu)雅感。

如上圖的棒球設(shè)計，香奈兒將極簡主義發(fā)揮到了極致，就是簡單的配色，放上一個精致紋理就讓這個棒球充滿了藝術(shù)氣息。周邊的桌球臺面設(shè)計，一個簡單的logo，整體桌球臺也是運用黑色。

再看上圖案例，無論是香奈兒的香水、口紅包裝，還是周邊時鐘設(shè)計，簡約的線條，黑白經(jīng)典的配色。

包括愛馬仕的很多設(shè)計，橙色的配色，加上極簡的包裝。讓設(shè)計簡約之中透著高級。

愛馬仕的工業(yè)設(shè)計，遵旨著極簡主義和功能實用主義，如上圖的吃藥提醒，分為白天吃的和晚上吃的，讓人文設(shè)計溫暖到了每個細節(jié)。

f

▍4.整潔干凈

巴黎設(shè)計風(fēng)格還有一大特點就是整潔干凈，可能和文化差異有關(guān)，無論是他們的建筑風(fēng)格，還是人文，都給人干凈整潔的感覺。

在服裝設(shè)計上，巴黎風(fēng)格整體給人一種干凈的視覺感受，哪怕是在深色服裝設(shè)計，或者在不同材質(zhì)上運用，都能將這種整潔干凈的感覺運用到淋漓盡致。

那么，在設(shè)計上，巴黎風(fēng)格又是如何運用？又有哪些特點呢？我們一起來看看。

e

03.  巴黎風(fēng)格在平面中的運用 

a

▍1.粗莖的襯線體

巴黎風(fēng)格的設(shè)計很大一個特點，就是在字體選擇上，一般襯線體比較多，并且襯線體的粗莖比較粗，形成很鮮明的反差，如上圖的GUCCI海報設(shè)計，就是一個很典型的特點。

如果你想做一款有巴黎風(fēng)格的設(shè)計，一定要選擇一個有特點的襯線字體，這里推薦一款免費的，就是google旗下的playfair字體。

上圖海報設(shè)計，這個字體就是巴黎風(fēng)格最大的一個特征之一。

上圖的品牌海報，就是一個巴黎風(fēng)格設(shè)計，大的襯線字體，有紋理質(zhì)感的圖片的運用，讓頁面非常低調(diào)的高級。

f

▍2.連體的運用

連體賦予了巴黎風(fēng)格靈魂，運用的場景也非常非常多，可以當標題，也可以單獨直接使用。

這種筆畫之間的組合，讓畫面充滿了優(yōu)雅和獨特的氣質(zhì)，就像巴黎這座城市一樣充滿了神秘。

連體的運用讓設(shè)計細節(jié)更加豐富，同時字體本身也具有裝飾性，是一個非常高級的設(shè)計手法。

g

▍3.引人矚目的數(shù)字字體

巴黎風(fēng)格的字體，除了上面我說帶一些英文字體特征外，在數(shù)字上的運用也很特別，數(shù)字一般很有特點，非常引人入勝，如上圖香奈兒官網(wǎng)的數(shù)字字體，運用的恰到好處。

數(shù)字字體一般比較大，襯線為主，配合標題的襯線為輔，形式?jīng)_擊力很強的對比。

數(shù)字字體和襯線體搭配一起，是巴黎風(fēng)格最有代表性的手法之一，雜志感也非常強。

f

04.  巴黎風(fēng)格在界面中的運用 

巴黎風(fēng)格在UI中用的也比較多，特別適合一些高端電商，或者一些有雜志感的設(shè)計。如上圖的圖文排版，清晰的圖片，搭上高級的顏色，再搭配有代表性的襯線體，給人的視覺感受很高級。

上圖是愛馬仕的官方APP，整體風(fēng)格呈現(xiàn)出雜志感，清晰的留白，明快的配色，經(jīng)典的襯線字體。

香奈兒官網(wǎng)設(shè)計，經(jīng)典的巴黎風(fēng)格設(shè)計，無論字體選擇，數(shù)字運用，還是留白空間關(guān)系，整體呈現(xiàn)的感覺非常整潔干凈。

頁面保持了香奈兒一直堅持的黑白風(fēng)格，大的圖片，大的留白，襯線體的運用恰到好處，簡約的線條，網(wǎng)格似的布局都讓整個頁面很高級。

這組設(shè)計也是充滿了巴黎風(fēng)格，干凈整潔的背景，模塊的色卡，清晰的商品圖，襯線字體設(shè)計。

f

05.  巴黎風(fēng)格在網(wǎng)頁中的運用 

在網(wǎng)頁中，巴黎風(fēng)格也是用的比較多，如上圖，粗莖的襯線體，簡單的背景，有焦點的人物運用。

整體的頁面設(shè)計非常得體，雖然頁面看起來簡單，但是細節(jié)和統(tǒng)一每個點都值得推敲，也值得我們學(xué)習(xí)。

上圖兩個網(wǎng)頁設(shè)計也是巴黎經(jīng)典風(fēng)格，所有的上述特點都有，襯線字體，留白，整潔清晰的圖片等等，都讓這個頁面充滿了濃濃巴黎風(fēng)格。

r

05.  最后 

今天這個分享，也是源于我對巴黎風(fēng)格的喜歡，巴黎風(fēng)格對于設(shè)計潮流而言，是一種設(shè)計手法，它也不僅僅用于高端品牌，而是顯示出平易近人的態(tài)度。希望今天這篇文章，對你有些啟發(fā)。