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