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