2021-4-19 ui設(shè)計分享達(dá)人
為什么那么多人覺得應(yīng)該先學(xué)UI設(shè)計再學(xué)交互設(shè)計，因?yàn)閁I門檻低所以入手快。其實(shí)交互比UI更早出現(xiàn)，從需求理論可以看出人們在追逐主觀體驗(yàn)的感受，在基礎(chǔ)需求未被滿足前是不會出現(xiàn)更高層次的需求的。所以UI設(shè)計讓更多用戶感受到了舒適和更好的體驗(yàn)。殊不知，如果底層的交互和產(chǎn)品的可用性未被滿足，那么UI做的再好也是徒勞。
市面上大量出現(xiàn)同質(zhì)化產(chǎn)品、設(shè)計，就是因?yàn)榇蠹叶荚诎凑宅F(xiàn)有的，常用的模版在設(shè)計，現(xiàn)在其實(shí)比早兩年會好很多，很多設(shè)計師已經(jīng)開始從美化工作逐漸深挖到區(qū)分甚至自我驅(qū)動或者價值探尋的工作。
例如下面的案例，這是一個電瓶車電池租賃的一個產(chǎn)品。
從美觀角度，左側(cè)的界面更加簡潔信息也有規(guī)律，有美觀的banner和看起來讓人有點(diǎn)擊欲望的大按鈕以及“令人覺得很熱門”的熱門租賃板塊。當(dāng)我不放出右側(cè)的對比圖時，大家在第一反應(yīng)中，有多少人可以重啟自己的視角，還是說已經(jīng)被這個頁面所拉入到不可自拔的漩渦中去了呢？
如果讓你盯著第一個界面進(jìn)行改版，我相信還是會有很多小伙伴可能只是會把底下的信息流挪上來，或者新增一些“我們覺得”有用的板塊。但其實(shí)這整個形態(tài)就是錯的，即便將錯誤路徑3改成了路徑2，你以然還是在錯誤的路徑上，本質(zhì)沒變。所以為什么我們說要做正確的事而不是正確的做事。
交互不僅僅能夠讓產(chǎn)品好用的，也要讓產(chǎn)品走對方向。
另外，UI也是交互的一部分，屬于看的懂。好用可以分為看得懂，學(xué)的快，用的會，交互體現(xiàn)在人們?nèi)粘Ｋ佑|到的大部分媒介，并且與之產(chǎn)生聯(lián)系。例如一把水壺，水壺的設(shè)計形式首先通過視覺讓你感知這是一個水壺，如果把水壺的外形做成一個馬桶，你覺得它還是一個水壺嗎，這叫看的懂。學(xué)的快指的是當(dāng)我看懂了之后我馬上就可以對這個產(chǎn)品進(jìn)行基礎(chǔ)操作，例如裝水、倒水。而用的會就是這個水壺更多的附加功能，例如燒水、定時、調(diào)溫等等。
交互的媒介是不可缺少的，大家是否去研究過為什么古代人們撰寫文字是從上至下，從右往左而現(xiàn)代人的習(xí)慣是從左右的？古代受限于工具、媒介，竹簡是主流的記錄文字信息的媒介， 有人會說竹簡可以從做往右寫不是非要從上往下啊，但是大家可以看到人們是如何打開進(jìn)行閱讀的，如果是橫著閱讀但是打開是上下展開就會非常不自然了。
所以在當(dāng)時人們?yōu)榱诉m應(yīng)非常有限的工具資源，改變了自然的操作方式。但現(xiàn)代社會如果說你的產(chǎn)品不為用戶的使用和場景去考慮，那基本也就涼涼了。
從2g到5g時代的發(fā)展，除了生活方式發(fā)生翻天覆地的變化外，我們所接觸到的媒介也發(fā)生了變化，從2g時代以文字為主的信息到5g時代視頻、游戲、影音等為主的信息化進(jìn)步，讓人們對信息的獲取更加方便快捷。除了內(nèi)容，外對于像移動手機(jī)這樣的設(shè)備用戶對其操作方式和習(xí)慣也有了更多的變化，從當(dāng)初的搬磚按鍵手機(jī)到支持ar等新技術(shù)的超智能化手機(jī)，改變了我們的認(rèn)知也改變了我們的生活方式。
平臺遷移的交互成本，很多同學(xué)可能都玩過moba類游戲-dota，這是一款在電腦端戰(zhàn)術(shù)競技類游戲。在dota中我們經(jīng)常使用的交互形式主要分為鍵盤和鼠標(biāo)的控制，鍵盤用來控制技能的釋放和其他快捷物品的使用，都是通過按按鍵的形式進(jìn)行釋放。通過鼠標(biāo)右鍵來控制人物的移動和左鍵選擇技能和物品釋放的目標(biāo)，這是端游中基本的交互行為與操作。
在現(xiàn)在非常火熱并且模式和dota相似度很高的王者榮耀手游中，我們看到了，如何從端游到手游的交互遷移。從鼠標(biāo)控制移動到左手拇指來控制移動，右手拇指來控制技能的釋放，在這里大家要注意，在端游中技能的釋放是可以非常精準(zhǔn)的，并且可以指向性釋放在某一個角色中，但手游不行。鼠標(biāo)擁有移動、視角、釋放技能、使用物品多個功能，但是在手游中我們無法做到選中某一個技能再點(diǎn)擊到某一個角色上，所以手游中只能進(jìn)行非指向性的預(yù)判技能釋放。
同樣在端游和手游的吃雞游戲中，端游鍵盤控制人物移動，鼠標(biāo)控制射擊與視角，但是在手游中控制射擊與視角就需要2個手指來完成非常不方便，也很影響射擊的精度，但是如果做成吸附式準(zhǔn)星那么也就失去了很多的樂趣。所以很多的廠商為了解決的這個用戶痛點(diǎn)開發(fā)出了吃雞專用的輔助設(shè)備，專門用來給多余的手指進(jìn)行射擊操作。
另外，大家如果做b端的同學(xué)應(yīng)該也深有感觸，平臺遷移的成本非常高。想要把集成非常復(fù)雜的業(yè)務(wù)后臺切換到移動端是一件很麻煩的事，因?yàn)樵诰W(wǎng)頁端我們有大量的空間和更自由的控件形式去承載信息，比如聯(lián)動的左側(cè)標(biāo)簽導(dǎo)航和頂部聯(lián)動的標(biāo)簽導(dǎo)航，在增刪改查的操作中顯得清晰高效。但是到移動端上雖然可以到做聯(lián)動導(dǎo)航，但是頁面顯示實(shí)在有限，很多的信息完全無法在一個界面中呈現(xiàn)，所以要么將頁面進(jìn)行左右滑動，要么拆分進(jìn)行多步操作。但本身擁有復(fù)雜業(yè)務(wù)功能的后臺系統(tǒng)就不適宜遷移到移動端上。
web端的工具和網(wǎng)頁通常都會有撤銷操作，按CMD（ctrl）+Z大部分都可進(jìn)行撤銷上一步操作，但是在移動端我們無法通過特定、或者統(tǒng)一的手勢進(jìn)行撤銷，所以很多時候在表單輸入的時候會有一鍵刪除圖標(biāo)，卻無法進(jìn)行撤銷。所以我在想是不是可以在用戶一鍵刪除信息后，刪除按鈕變?yōu)槌蜂N按鈕，有待考量。
到底什么是交互設(shè)計，這個問題其實(shí)是比較復(fù)雜的，也是我一直在思考的問題。所以也翻閱了很多文獻(xiàn)，嘗試做更多的案例來解釋。交互設(shè)計的概念真的挺多的，光網(wǎng)上能夠找到的定義就不下5種，這些對交互設(shè)計的定義中，比較頻繁出現(xiàn)的是行為、場景、用戶等詞匯，交互設(shè)計到底設(shè)計的是用戶的行為，還是設(shè)計用戶正在交互的媒介或者是用戶正在使用媒介這件事情，我覺得可能還是沒有能夠解釋清楚交互設(shè)計的本質(zhì)。
中國歷史文字的演變，它并不是一個模仿的過程，而是一個從底層對文化、自由、精神、環(huán)境、人的深刻理解而發(fā)生的一種進(jìn)化過程。但現(xiàn)在其實(shí)很多的交互形式都是來源于一些大流量產(chǎn)品的模仿，更多的是擔(dān)心用戶成本過高而妥協(xié)為滿足用戶預(yù)期。
事實(shí)上，為什么我們講不清楚什么是交互設(shè)計，其實(shí)UI設(shè)計也一樣，她絕不可能單純的指代用工具繪制出用戶界面，其實(shí)是因?yàn)樾畔⒉粚Τ?、詞不達(dá)意或者叫做你說的比人聽不懂。我可以舉例的是我們的漢語
例如“你可以意思一下”，單就這句話，我們大概知道最關(guān)鍵的是“意思”二字，包含了特別多的含義，含義需要通過語境、使用場景來區(qū)分，說者的“意思”是想告訴聽者什么呢？沒人知道，是一口氣干完一瓶酒，還是喝一口？還是送一點(diǎn)禮還是？應(yīng)付一下？
當(dāng)然這句話中的“可以”也很有講究，加上“可以”說明你也能選擇不“意思”，是不是覺得這7個字讓我們整一句話都活了起來，說者與聽者如果不在一個境中，聽著就壓根不知道說者的具體表達(dá)含義。
同樣的，在設(shè)計領(lǐng)域，很多設(shè)計師喜歡用大氣、高級、逼格、有呼吸感描述的自己的感受。 說出來自己都要笑出聲，還有什么五彩斑斕的黑等等。就比如呼吸感這樣的詞，這個詞聽起來比較抽象，讓聽者都有點(diǎn)不太好意思追問什么是呼吸感，其實(shí)你問了，說者也不知道怎么描述?？赡苷f者覺得現(xiàn)在信息太密集讓人無法呼吸，但設(shè)計者覺得現(xiàn)在剛好，所以本身就沒有一個標(biāo)準(zhǔn)，更多的就是主觀的感受，讓你不得不接受這個建議的原因是因?yàn)閮烧叩纳矸荨?
我們用我們能夠講述的語言去描繪我們不懂的事物，再例如設(shè)計師和開發(fā)還原只會說往左移動10px，而不會說給這個view加上padding left 10px。還有你和開發(fā)為什么溝通起來那么累就是因?yàn)槟銈z完全無法站在對方的角度對這件事達(dá)成共識，設(shè)計師通常喜歡描述從左到右或者從上到下，但是在開發(fā)的語音認(rèn)知理，他需要知道的是空間坐標(biāo)，并且具體的移動單位。所以為什么我們那么鼓勵廣大設(shè)計師去學(xué)習(xí)一些開發(fā)知識，開發(fā)也盡可能的去補(bǔ)充設(shè)計背景。
在這里，交互設(shè)計師產(chǎn)出的交互說明文檔就是能夠幫助設(shè)計師與開發(fā)有一個更好的溝通，所以能力較強(qiáng)的交互設(shè)計或者視覺設(shè)計都能夠把自己想表達(dá)的信息表達(dá)的很清楚。
再舉個例子，不知道大家有沒有編輯過問卷或者做過用戶訪談，很多時候是不是覺得收集到的信息無效、無用，其實(shí)很多的原因是因?yàn)槲覀兒陀脩魧τ谶@些問題壓根不在一個頻道，比如：你的問卷問的是，您喝酒的頻率是多少，選項(xiàng)有：從不、偶爾、經(jīng)常，在用戶的眼里偶爾可能是1年喝一次，而我們覺得差不多1個月喝一次算偶爾，再比如訪談的時候問用戶這個問題：您覺得您喜歡下面哪個頁面的風(fēng)格？用戶：“什么是風(fēng)格？”
所以交互設(shè)計師有一個能力久顯得很重要了：讓萬物都可與之對話的能力，對話需要什么，是語言。
我們都知道，語言是我們溝通的根本，語言是由詞匯按照一定的語法結(jié)構(gòu)在不同的語境中所組成的復(fù)雜系統(tǒng)。不同的種族有不同的語言，不同的專業(yè)有不同的語言例如在圍棋中有長、立、并、空、頂?shù)鹊?，例如在模型手辦中有分線、滲線、勾線、補(bǔ)土等，這也都是在特頂專業(yè)領(lǐng)域中的一些術(shù)語，但這些并不是語言，只是在某個領(lǐng)域中大家總結(jié)出來便于溝通的文字符號。
所以我們再回到上方看一下定義，首先語言是由詞匯所組成，詞匯是由符號做組成，大家可能都聽說過比如樂高啊、原子理論這樣的組件搭建方法，但這些都僅僅只是規(guī)范，而并不是語言。語言擁有更強(qiáng)的普適性和通用性。
那么我所認(rèn)為的語言他首先包含了能夠組成詞匯的符號，這些符號大概就是指：點(diǎn)、線、面、體、色彩由這些點(diǎn)線面體可以組成的詞匯有：按鈕、文字、圖標(biāo)、圖片等。但是光有詞匯不行，在漢語中有12種詞類：名詞、動詞、形容詞，在由句子組成的詞匯中包含了不同的成分：主、謂、賓、定、狀、補(bǔ)...這里不過多敘述。
語言很重要的一點(diǎn)它具有語境，語言的運(yùn)用包含了看聽讀寫4個方面，看和聽指的是輸入，讀和寫指的是輸出，那么交互設(shè)計語言中，也包含輸入和輸出兩種屬性，例如輸入指的是由不同“詞匯”組成的“句子”，比如由標(biāo)題、箭頭、色塊組成的一個itme，是一個可被理解、看懂的輸入屬性的控件。輸出指的是該控件可被出發(fā)并且進(jìn)行狀態(tài)的變化和所進(jìn)行的任務(wù)跳轉(zhuǎn)。
這里的控件雖然有兩個屬性，但是還需要語境來幫助我們理解，一個是它本身所能夠輸出的默認(rèn)狀態(tài)的，比如點(diǎn)擊之后的跳轉(zhuǎn)頁面，另外他也可以具備產(chǎn)品賦予的自定義屬性，例如底部滑出picker。
還有，在漢語中“去買兩個桃子吧”，這里的“兩”肯能是虛數(shù)也可能是實(shí)數(shù)，但是在交互設(shè)計中，我們?nèi)绾伪硎军c(diǎn)擊1下和兩下或者是多次呢，一般單擊的屬性通常可以有一些特性的符號屬性所表示出來，例如加下劃線的文字、一個帶箭頭的item、一個圖標(biāo)、一個帶有主色的文案等等，那么雙擊的話可以用雙箭頭來表示嗎，當(dāng)然不可以，雙擊在移動端的手勢中具有放大、點(diǎn)贊、返回頂部、定位消息、定位光標(biāo)等功能。
那我們發(fā)現(xiàn)如果把交互設(shè)計能夠做成類似于語言的系統(tǒng)是非常有意思，并且有用的。這會讓更多信息不對稱的情況消失，不僅僅是設(shè)計師，在產(chǎn)品團(tuán)隊(duì)中大家都能夠有一套共性的交互語言系統(tǒng)，無疑是一件非常提高效率的事。但是目前的很多交互規(guī)范的文檔中，大多都是多種元素的拼合，給出常用的、可復(fù)用的控件、組件，但是大家依然還是無法從語言角度去創(chuàng)新，這就導(dǎo)致了很難會有新的、有用的交互形式的出現(xiàn)，比如很多搜索控件都是承載在頂部導(dǎo)航欄中，那么在做規(guī)范的時候也只能在這個組件上去微調(diào)，殊不知搜索這個控件的“語境”并不單單只能在頁面頂部，例如高德地圖做的就很好。這樣一來，這個組件的常規(guī)規(guī)范形式就能和很多產(chǎn)品區(qū)分開來了，當(dāng)然要視產(chǎn)品形態(tài)不同。
市面上有許多的新零售電商產(chǎn)品，頁面中的信息流也是大同小異，但是無論是交互還是產(chǎn)品在做設(shè)計師必須要考慮的就是產(chǎn)品定位與當(dāng)前狀態(tài)。例如目前我們看到的都是以下的信息流樣式，但是我們要知道，30000個sku和3000個sku的展示策略肯定是不同的根據(jù)算法的瀑布流在30000個sku中可以隨意展示，但是3000個就不行了，很可能在算法的過程中用戶會頻繁看到重復(fù)的商品。所以使用雙列布局的方法并不合適。
所以這樣的產(chǎn)品首屏策略就顯得非常關(guān)鍵。我們可以看到常規(guī)的電商產(chǎn)品中，首屏基本上都是呈現(xiàn)這樣的策略，從頂部的搜索、分類、banner、分流入口、cta、營銷瓷片區(qū)這樣的布局，從基本上能夠滿足一個大量sku電商產(chǎn)品的所有需求，但是如果用戶定位和產(chǎn)品本身的基礎(chǔ)無法支撐起這樣的場景又該如何去做首屏策略呢？
從交互角度入手，那么既然我們無法做到大而全，那么我們至少可以做到精準(zhǔn)、限時，讓用戶上癮的策略，上癮模型這邊不再贅述。所以類似云集在首屏的策略可以概括為整合搜索與banner、分流入口、cta、營銷瓷片以及以時間為緯度展示的大圖信息流。重點(diǎn)在于可隨意控制的營銷工具，以及時間軸的商品推薦，讓有限的資源呈現(xiàn)更多的形式變化以及讓用戶有時間概念，每天固定時間來進(jìn)行活躍。
通過交互手段我們也可以給運(yùn)營工具更加靈活化打基礎(chǔ)。例如我們經(jīng)?？吹降臓I銷瓷片可以劃分為非常多樣式與可能性，并且在后臺工具中靈活控制，同時除了日常的營銷目的之外，在大促或者活動需求下更可以將整一個首屏切換為極具氛圍的信息呈現(xiàn)。
最后總結(jié)一下，我認(rèn)為交互設(shè)計也包含了視覺，所以我們在決定用什么樣的設(shè)計形式之前需要考慮更多，入業(yè)務(wù)、用戶價值等等，從而用更加有價值的交互策略提出問題、解決問題會比單純的用規(guī)范去搭建界面更加有效。
不管是做UI設(shè)計還是畫插畫，有很多同學(xué)覺得自己是因?yàn)樘熨x不夠所以對色彩的敏感度不夠，其實(shí)不然。一個可能是大家總結(jié)的太少，從來都是憑感覺和運(yùn)氣去配色，但其實(shí)都是有講究的。本文不會給大家重復(fù)講解什么是rgb，什么是hsb，什么是cmyk或者什么三原色，這些大家都可以從某度中直接搜到。我今天要給大家分享的是人們是如何認(rèn)識色彩，并且在產(chǎn)品設(shè)計中使用的。
大家都知道，對于不同的顏色，我們對其的感知是不同的，有人覺得暖色在前，冷色在后。暖色更醒目，冷色不醒目。那這是什么原因呢？首先我們要知道我們眼睛內(nèi)存在兩種感光細(xì)胞：視錐細(xì)胞和視桿細(xì)胞，視桿細(xì)胞能夠感知光線強(qiáng)弱但無法感知顏色，而視錐細(xì)胞卻相反，視錐細(xì)胞內(nèi)還有3種對不同頻率光敏感的細(xì)胞。我們經(jīng)常會用到視錐細(xì)胞，而視桿細(xì)胞卻用的少，更多的是在黑暗的環(huán)境中使用的多。
視錐細(xì)胞的三種類型分別是低頻、中頻和高頻視錐細(xì)胞，分別對紅、綠、藍(lán)三種顏色的光敏感。而且這三個視錐細(xì)胞分別也有重合的部分。低頻視錐細(xì)胞對整個可見光頻譜都敏感，它的范圍包含的比較廣，特別是對于頻譜中段的黃色到紅色部分更加敏感。但是像高頻的紫色幾乎只有藍(lán)視錐細(xì)胞可以感知。
大家在平時生活中都能看到，在馬路上、機(jī)動車道上以及一些警示牌都會采用黃色、橙色等標(biāo)識，因?yàn)檫@些非常醒目。更容易被紅視錐細(xì)胞感知到，但如果你的標(biāo)識用的是冷色調(diào)那這個交通事故可能要發(fā)生的頻繁的多。
我們來做個實(shí)驗(yàn)，如下圖，大家覺得在中間的灰色塊是純色還是漸變色，可能很多同學(xué)看上去都會覺得是個漸變色，但其實(shí)它就是一個純色，不信的同學(xué)可以自己在工具中嘗試一下。
但如果你把這個色塊拿出來后，不在這個環(huán)境中直接進(jìn)行邊緣對比，那就不會出現(xiàn)漸變的情況了。那光說原理，我們也來看一下在產(chǎn)品設(shè)計中需要注意的地方，因?yàn)樵赨I界面設(shè)計中我們通常需要把一些圖片、卡片疊加放置，這樣就會造成邊緣視覺的對比，本來不明顯的兩個元素重疊之后變的很明顯。所以例如一些標(biāo)簽的背景色和頁面整體的背景色。
如果你想要讓兩個顏色接近的元素具有識別度，那么最好將這兩個元素進(jìn)行重疊擺放而不是分開擺放。另外，如果是卡片樣式的設(shè)計，背景色一定不要過于灰暗也不要過于淺白，過于深的話會讓卡片輪廓過于明顯而導(dǎo)致整體看上去顯臟以及很明顯的對比，顯得不自然和舒適。如果過于淺的話也會導(dǎo)致信息的不聚焦。
還有，為什么被框起來的文字會看上去更加有點(diǎn)擊的欲望其實(shí)也是這個道理，因?yàn)槲淖趾捅尘隘B加產(chǎn)生的輪廓只是文字的輪廓，在我們的第一印象中只是一種符號，當(dāng)它被賦予顏色之后我們才會意識到它需要我們?nèi)プ⒁饣蛘呖杀稽c(diǎn)擊，但依然還是不夠明顯，所以為了強(qiáng)化可點(diǎn)擊這個感覺，我們才用了線框、背景色、箭頭等方式。
一般來說，產(chǎn)品都會有一個品牌的主色。而這個品牌的主色也通常會運(yùn)用在外面的產(chǎn)品界面中，所以例如閑魚、馬蜂窩等，主色都采用了黃色，黃色具有非常活潑、有趣、好玩的特性，無論是線上還是線下都使用了這個品牌黃色，從每一個線上元素的主色，到線下包裝的印刷色。
但一定要注意的是，如果品牌的主色偏灰偏暗的話，可能不太適合線上的產(chǎn)品進(jìn)行通用。例如之前的嚴(yán)選、云集、711便利店、宜家等產(chǎn)品的主色都是偏深和暗的，所以在線上的界面用起來會非常不和諧，和整體偏淺色、輕的風(fēng)格對比起來太強(qiáng)烈，引起不適。
而且線上覺得還OK的顏色，由于印刷的原理，實(shí)物也會更加偏低飽和和偏暗。
我們在上一篇十萬個為什么文章里提到了人們?nèi)绾伍喿x信息，提到了一個視覺凹的概念。所以在界面中，什么樣的地方使用色彩是有講究的。所以在這里通常會需要使用顏色的地方在于希望引導(dǎo)用戶和吸引用戶注意的地方才會使用色彩。例如下方產(chǎn)品，使用了高亮色來引導(dǎo)用戶視覺。
當(dāng)然色彩的運(yùn)用也會講整個頁面的層級凸顯出來，而不單純的用中性色來區(qū)分層級。
同樣是上兩張圖，大家可以清晰的看到，美團(tuán)中的附近熱賣好點(diǎn)、滿減標(biāo)簽、價格，其實(shí)都只具備信息的呈現(xiàn)，但不具備交互的特征和狀態(tài)。但淘票票中的“4.7萬”和“展開”卻不一樣，“展開”使用了輔助藍(lán)色，這里的展開就具備這個文案所描述的這個控件具備的交互特性-點(diǎn)擊后將隱藏的文字展示出來。藍(lán)色一般我們都會使用在某個可點(diǎn)的鏈接上，當(dāng)然也會有其他的色彩來表示可點(diǎn)擊。
所以不是所有的元素都要賦予顏色，這樣會使整個頁面非?；靵y
另外，UI設(shè)計中主色除了引導(dǎo)用戶的作用外，也可以表示當(dāng)前正被激活的信息狀態(tài)。例如愛奇藝app中播放詳情頁面，當(dāng)前板塊標(biāo)簽和正在播放劇集的激活狀態(tài)。
色彩除了上方所述的字段中的不同使用，在圖片和整體氛圍營造中也起了很大的作用，目前很多2c的產(chǎn)品往往會在界面氛圍的營造中運(yùn)用一些手段。例如導(dǎo)航欄、底部標(biāo)簽欄上的圖標(biāo)，或者在首頁營銷板塊的瓷片區(qū)域都會用品牌色在活動時段內(nèi)進(jìn)行氛圍打造
在色彩的心理學(xué)上，大家都知道每個顏色具有一定的性格特征和表達(dá)。而且都會有正反兩面，可以看下方多種色彩的描述。
然而其實(shí)很多的產(chǎn)品使用的色彩和我們所認(rèn)知的會有一些差別，比如咖啡品牌的主色選擇，在我們常規(guī)人之中，咖啡應(yīng)該是褐色、棕色，但是大家看到星巴克、瑞幸、漫咖啡其實(shí)都用了和咖啡本質(zhì)沒什么關(guān)系的顏色
在瑞幸剛出來的時候，很多人其實(shí)不太習(xí)慣把這個藍(lán)色和咖啡結(jié)合起來，但是為了塑造品牌差異化，瑞幸一直將“藍(lán)色”作為品牌的主基調(diào)，“小藍(lán)杯”這一稱呼不但讓消費(fèi)者感到親切，也在眾多的咖啡中有了屬于自己的記憶點(diǎn)。在這支廣告片中，主基調(diào)同樣是使用藍(lán)色，不但符合了當(dāng)下消費(fèi)者的視覺偏好，也在為用戶留下記憶點(diǎn)之后，也讓用戶在看到藍(lán)色時自然而然的想到瑞幸咖啡。
但凡各位使用了這樣的配色，保證各位過不了試用期，相信我。所以大家千萬要避開。
會讓人產(chǎn)生“幻覺”！讓人產(chǎn)生視覺疲勞，例如我將餓了么這個界面的色調(diào)調(diào)整一下大家看一下，不亮瞎算我輸。
為什么很多時候我們總覺得界面臟兮兮的。是因?yàn)槲覀冊诮缑婊蛘吲渖惺褂昧诉^多的低飽和度、灰度較多的配色。所以這個也是要避免的
讓界面或者插畫看起來非?；靵y。一般來說顏色的使用也需要有側(cè)重點(diǎn)，所以我們常用的方法是6、3、1的色彩配比。
熒光色絕對不可以使用在UI界面中，尤其是主色。會讓你瞬間失明！
在很多dribbble的飛機(jī)稿中，經(jīng)常能看到這樣的配色和練習(xí)。無論是在練習(xí)中還是實(shí)際項(xiàng)目中，這樣的界面也完全無法讓用戶看到想看的信息，沒有重點(diǎn)且輕飄飄的感覺。
說真的，這樣的風(fēng)格確實(shí)耳目一新，但個人覺得可能不會成為主流。因?yàn)樗秃偷谖宸N一樣：信息可識別性很差。就不說色弱的人群，就正常的用戶來說大面積的白色+飽和度低的元素結(jié)合感覺就是得了“白內(nèi)障”。另外我們常說的一點(diǎn)就是所有元素都強(qiáng)調(diào)就等于什么都沒有強(qiáng)調(diào)，這樣的風(fēng)格在每一個元素都具有陰影的情況下都在爭先恐后讓用戶感知，原則是輕量化卻又需要那么多陰影，這樣就有點(diǎn)自相矛盾的感覺。
為了營造這樣的“新擬物”的輕量氛圍，還不得不在整個界面中簡化大部分元素，能不加文字就不能加文字，說的好聽叫做使用了奧卡姆剃刀原則，有一句話一直非常影響我做設(shè)計：“設(shè)計是需要被簡化的，但是簡化的過程一定不簡單”。所以不是單純的簡化所有元素為了達(dá)到這個風(fēng)格的目的。
例如下方，兩種對抗色重疊后會引起視覺閃爍的感覺。是不是覺得我有點(diǎn)帥的晃眼
首先我們必須要說，色彩肯定是需要結(jié)合產(chǎn)品和用戶的定位去指定和提煉的，所以前期會需要去做一些研究例如用戶畫像，品牌沖刺或者是情緒板等方法。得到幾類“真實(shí)的虛擬用戶”，從而確定一些主色的方案。然后我們在主色的選擇中需要避開上面體到的坑，并且對市面上的app進(jìn)行總結(jié)，我們發(fā)現(xiàn)大部分的產(chǎn)品色，簡單來講在我們HSB模式中去色都在一個固定的范圍，就像這樣。
在上文中也說到用色比例的631法則，所以在選取輔助色的時候我們需要定義好輔助色可以用在什么地方。例如知乎，其實(shí)輔助色沒有非常明顯的1種或者兩種，都是多色的輔助色方案，都在一個配色的系統(tǒng)中選取顏色即可。大部分產(chǎn)品目前都是這樣的策略，一個主色搭配多個輔色，如果有其他獨(dú)立的板塊可能需要重新定義專屬的配色策略。
其次再定義中性色，比如字體和線條以及背景色。字體是為了讓信息有對比，顯示層級，那么通常給2-3種層級即可，至少2種，至多3種。在選擇3個層次的中性色文字是，給大家一個建議：標(biāo)題/正文文字顏色HSB的B值不要大于20.備注和次要文字b值不要大于50，默認(rèn)文字不要大于80，大家可以去嘗試一下，且中性色不得使用純黑。
文章來源：站酷 作者：應(yīng)駿
藍(lán)藍(lán)設(shè)計( www.miumiuwan.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.miumiuwan.com