我們生活在一個信息大爆炸的數據化時代，隨著網絡科技的飛速發展，產品和用戶之間的互動也日趨復雜，新功能不斷涌現，帶來便利的同時也導致用戶對功能的認知摩擦日益加劇。在這種情況下，人們對交互設計的需求就越來越大，市場對交互設計師的需求也越來越多。許多公司都注意到交互設計對品牌創建、用戶滿意度以及回頭率等方面的影響。那么，什么是交互？交互設計應該做什么？希望今天這篇文章，能夠加強你對交互的理解。

交互就是與另一個人或者物進行交流互動，比如你說話或按動鼠標，對方給你反饋，這就是交互。對于設計師們來講，交互多指用戶與計算機、手機等產品進行的交互。

交互設計是一個頁面或者一個界面的內容規劃，例如哪里放圖片，哪里放按鈕，哪里出現文字；或者說是一個龐大網站以及產品的整體邏輯梳理，例如如何安排信息層級，如何讓用戶更輕松地找到自己想要了解的信息，如何讓整個網站或產品更加合理、有效地運轉。

一個城市有合理的規劃交通才會便利，城市里面的人才會覺得更加舒適，而一個合理的交互設計也直接影響著一個網站、一個產品甚至一個品牌。

視覺設計是感性的，更注重一切表象的東西，比如顏色、版式、形狀、調性等，視覺設計最終的成品是視覺的效果圖設計稿。

交互設計相對來說更加理性，交互設計更加注重用戶是誰，通過需求分析得出問題、解決問題，交互設計的最終成品是原型圖。

看過了文字解釋，再讓我們一起來看看生活中無處不在的交互設計。

疊貓貓、蓋樓、星秀貓……每年雙11，天貓都會創新活動，激發用戶對雙11購物節的期待，營造蓄勢。

今年的雙11的主題為喵糖總動員，用戶通過組隊一起做任務賺喵糖，通過擲骰子的方式獲取糖果數，占領格子，擊敗對手。獲取喵糖的過程中，營銷或引流設置無處不在。除了做每日簽到獎勵的簡單任務外，最簡單的方式就是用15秒的時間去瀏覽平臺推送給你的主會場、各大分會場、各細分品類、各個商家店鋪等頁面。通過這樣的任務設計，可以引導用戶瀏覽會場店鋪或各品類商品，最大程度地完成各個淘寶店鋪的曝光需求。

 

天貓雙11-喵糖總動員活動頁面

新冠疫情還在持續蔓延，飛豬App貼心的在行程頁面，添加了防疫工具引導欄，通過點擊按鈕，可跳轉至支付寶中行程碼、核酸預約等界面，為用戶出行提供便捷的準備工作。

用戶在滑動頁面時該導航欄會被隱藏，靜態時則顯示兩個應用，點擊展開才能查看更多。設計采用浮層式引導，提供便利的同時，且不會對用戶產生干擾。

 

飛豬App界面

一切交互設計所要達到的效果就是形成良好的用戶體驗，讓用戶在使用界面時更方便找到自己感興趣的東西。

通過地圖及定位，通過氣泡及icon的區別，把附近的美食等進行排名，讓用戶更快知道自己的距離。還設置了點擊卡片展示店鋪信息同時支持查詢路線等功能。

 

美團App界面

“優秀的設計是考慮周到且不放過每個細節”。往往在那些不易被察覺的細微之處，傾注了設計師的諸多巧思與心血，嗶哩嗶哩在設計中做了以下一個有趣的小細節。

在賬號登陸頁面，當我們輸入賬號或者手機號的時候，頁面插畫中的22和33是睜大眼睛的，而當我們輸入密碼或者驗證碼的時候，他們則用手捂住了眼睛。這個有趣的設計生動地傳遞了App對用戶隱私的尊重與保護。

 

嗶哩嗶哩App界面

當你使用百度搜索物品，查看圖片時，左右滑動即可切換下一張圖片，上劃即可關閉圖片，這樣的操作手勢，更加方便快捷。

在查看物品圖片時，下方還會出現商品推薦購買鏈接，仿佛“一站式”購物的貼心服務。

 

百度App界面

交互設計的核心目的是信息的傳遞，無論如何設計交互圖、如何設計交互流程，我們要思考的核心和準則是如何把想要傳遞給用戶的信息以最簡單、最容易的方式讓客戶接收，反之用戶也能用最簡單的方式找到自己想要的信息。

這些信息包括內容、按鈕、文字、圖片等一切信息的載體。我們要明白在進行交互設計時的前提是如何去梳理信息更好地傳遞。

那么，如何才能讓信息更好地進行傳遞？我們要搞明白信息傳遞時需要營造什么樣的氛圍，哪些信息元素需要突出，目標用戶是誰，根據這些才能以一個正確的方向有邏輯地進行交互設計，而這一切的最終結果就是實現一個良好的用戶體驗。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：站酷  作者：全速設計
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

兼顧“突出”與“融合”兩方面

進行配色時，要從兩方面考慮，既突出提升的方面又融合平穩方面。

例如，以自己最喜歡的顏色為中心完成了初稿，然后應該檢查一下，是否過于沉重模糊，或者是否過于喧鬧令人不安。如果過于沉靜，則下點功夫突出一下即可；如果過于喧鬧，則向著沉靜、融合的方向調整即可。

1.1 突出型配色1

使主角更鮮明

畫面整體顯得模糊時，要放棄幾個要點，明確主題。大力強調作為主角的部分，并刪去曖昧模糊的地方。主題明確后，不僅氣氛被提升，畫面也會顯得清爽踏實。

減少黑色的分量，提高純度

感覺配色過于沉重壓抑時，應該減少黑色，增加鮮艷的顏色，配色將瞬間明朗起來。色調沉重是由于混入過多黑色，減少黑色后自然會呈現出鮮艷的色彩。這是最有代表性的突出配色的方法，也是效果最顯著的方法。

烘托畫面的中心

明確畫面主角

當畫面的中心部分被提升后，才會使配色給人深刻印象。我們還可以強化明度對比，加強畫面中心部分明度，這樣的畫面會格外令人印象深刻。

A海報帶點夢幻的感覺，但是主角不夠清晰。而B海報提升了背景亮度，擴大與中心人物的明度對比度，從而能強調了主角。

加強中心部分的方法

提高顏色純度

強化明度對比

強化色相對比

給畫面添加亮點

我們很多小伙伴喜歡沉穩踏實的配色，這種配色方法雖然是好的，但是畫面的配色過于均一則平淡無奇。那怎么解決這個問題呢？其實我們可以在畫面中心設置小面積的亮點，給畫面增添品味和活力。

抑制背景色，凸顯亮點

要記住，亮點的面積越小給人的印象就越深刻。如果你想更加凸顯亮點，那就要抑制周邊的背景色。只有這樣，即使在平穩不顯眼的配色中，這個亮點一樣很顯眼。

A圖中整體色調沉穩，但是總覺得少了點什么。而B圖中鮮艷的紅色成為寧靜配色的亮點，給原本平淡的畫面注入了活力。

制造亮點的方法

弱化背景色，突出亮點

控制好背景色，即使純度不高的亮點也有很好的效果

給畫面加入鮮艷色彩

鮮艷的色彩盡顯活力

如果你想增加配色的歡快感，就應該加入純度高的顏色。

A產品整體是暗色調，高雅莊重，但是似乎有些欠缺。而B產品加上了小面積的鮮艷色彩，高雅不變，華麗有余。

加入鮮艷色，變得活力

增加畫面色彩面

添加色彩，畫面變得生動

當人們看到無彩色畫面時，總會感到有所欠缺。如果在無彩色畫面當中加入一些色彩，畫面頓時變得歡快活躍。

A海報是無彩色的，畫面過于單調；而B海報只是在A海報的基礎上增加了色彩面，畫面頓時變得歡快活躍，生動了許多。

增加色彩面，變得明快

減少黑色

調整畫面部分明亮度

很多小伙伴喜歡把畫面背景色設為暗色調，因為這樣有踏實感。這樣做畫面雖然高雅卻有失歡快，我們不妨試試將背景色調亮一個等級，最后你會發現畫面變得明朗愉悅了許多。

因為A畫面沉穩有余，但過于灰暗，缺乏歡快氣氛；將A背景色中的黑色調到零就得到如圖B背景色，調整之后的畫面能給人明快的印象。

減少黑色使畫面明亮

如何創造有踏實感的明亮？

如果你希望畫面變得明亮，又不想破壞原有的踏實感時，則可以保留10%的黑色。

分離配色

什么是分離配色？

大家都知道按照色相、明度次序配色稱為“漸進配色”；那與之相對的配色方式就是“分離配色”，獨立配置每個顏色。

A圖采用的是漸進式配色，按色相順序排列，給人安靜平穩之感，但有失緊湊，略顯無趣。而B圖采用的是分離式配色，使用與A圖中相同的色彩，只是簡單變換順序，突出各色的獨立性，沖破秩序感，給人以活潑的感覺。

打破顏色順序，隨機分離，使之獨立，釋放出動感

1.2 突出型配色2

用對比色達到突出效果

在色相圖在相對的為對比色，相鄰的為鄰近色。單用鄰近色配色，則畫面感覺平穩；加入對比色，則頗具緊湊感。

在色相環中的相對位置創造出各樣的色彩表情

挑選色相環中的相對兩色，則帶來歡快的節日型配色。若組合在色相環圖中呈正三角形的紅、黃、藍，則得到理性安定的畫面。通過顏色在色相環中的形狀，能創造出各式各樣的色彩表情。

黑白制造緊湊感

不難想像加入黑色會起提升效果，其實白色同樣能在輕松氛圍中制造緊湊感。

給畫面加入對比色

對比色是主色的必要補充

色相環中相對的色相成為對比色，也叫補色，甚至可以說，配色的基本就在于補色，配色完成于補充顏色的過程之中。加入補色使人心情舒暢，缺乏補色的畫面容易令人覺得不自然。

A圖是以同色系為中心的平穩配色；圖B加入對比色藍色后，畫面效果加強了些許。

加入對比色，使畫面生動突出

終極純粹三角型

平衡的三角型

紅、黃、藍在色相環上組成一個正三角形，被稱為三原色，是特殊的顏色。綠色、紫色等顏色都可以通過混合這3種顏色得來，但是無論怎樣混合其他顏色都無法得到三原色。隨著畢加索、蒙德里安等現代派畫家們追求終極的純粹色，三原色的組合得到了重視。

蒙德里安《紅、黃、藍的構成》

這幅作于1930年的《紅、黃、藍的構成》是蒙德里安幾何抽象風格的代表作。蒙德里安將色彩、形狀純粹化的結果，是否定紅、黃、藍三色以外的一切色彩。線條的方向也限定于水平或垂直，排斥斜線。

三角型的效果，掌握好平衡即可

十字型配色

強烈的緊湊感

將兩組對比配色交叉組合后，便得到十字型配色。醒目安定的同時，又具有緊湊感。在一組對比色產生的緊湊感上加一組，自然成為最強配色型。

梵高《軍人》

A畫面只用了一組紅綠對比色，看上去很有緊湊感，但是過于硬朗。在A的基礎上增加了一組藍橙對比色，帶來有力的安定感及緊湊感，畫面豐富了許多。

由于把兩組補色組成十字型，達到了完全的平衡。

黑色起突出作用

無色彩的黑色是最有力的搭配色

黑色是“無色”的特殊色，純度、色相、明度都為零。但是，加入黑色會突出原有的顏色，使畫面有力度。黑色與其他色彩組合時，是最有力的配角色。

海報A藍綠色均為冷色，綠色背景下，表現出輕快自然、明亮卻趨于平淡。海報B背景變為黑色后，綠色變得深邃而閃爍。這時，黑色本身難掩的光輝甚至會使人誤將其當成主角，但是不會喧賓奪主掩蓋主角色。

黑色無論與任何色彩搭配，都起強調提升作用。使強色更加強烈，使淺色更加突出，產生生動醒目的效果。

白色起強調作用

作為中立色的白色，不會破壞其他顏色

白色是所有色彩中最中立、最無個性的顏色，但是可以通過特定的使用方法，使畫面整體更突出。在不破壞其他色彩感覺的基礎上提升整體。

白色與任何顏色的反差都很大。人眼對最明亮的白色頗為敏感。即使是相當低的明度下，白色的效果也顯而易見。海報B加入白色，瞬間被突出。

白色有著意想不到的效果。配上過于強硬的顏色則使之緩和，配上淺色則使之被強調。保持淺色原本的感覺，突出整體效果。

1.3 融合型配色

使用三屬性達到融合效果

與突出型配色一樣，我們采用三屬性（色相、純度、明度）來緩和過于喧鬧、醒目的顏色。突出時要增強三屬性的對比，融合時則要減弱對比色的對立。

靠近色相

使用同系色，畫面統一和諧

色相差越大越活潑，反之，色相越靠近越穩定。色彩給人感覺過于突出喧鬧時，可以靠近色相，協調各種色彩，使畫面穩定下來。

B圖使用近似色配色，表現出平穩安詳的感覺。而A圖紅綠色相之間變化幅度過大，流于散漫，給人一種不安定的感覺。

色相被靠近后稱為鄰近色，進一步靠近則稱為同系色，越偏離對比色、接近同系色，就越有平穩踏實感。

統一明度

明度差破壞安定感

即使色相差很大，只要明度統一，畫面整體就會給人以安定的感覺。這是在不破壞色相平衡、維持原有氣氛的同時，得到安定感的巧妙方法。

A圖明度差較大，產生活潑感。而B圖縮減明度差至零后，畫面整體變得和諧，給人一種安定的感覺。

無論多么松散的配色，統一明度后都會呈現出整齊穩定的效果。零明度差營造出踏實穩定的感覺，因此最好盡量擴大色相差，力求維持色彩之間的跳躍感。

色調靠近

氣氛的統一

色調也稱“調子”，表示色彩的感覺、品位。因此，可以把同一色調的色群歸為具有同一類色彩感覺。組合同一色調的顏色，則相當于統一了畫面氣氛。

A畫面組合有所偏高的色調，會破壞畫面的統一，而B畫面將鮮艷的色調換為明灰色調，畫面感覺統一和諧了許多。

如果畫面松散，缺乏統一感，則需要統一色調。統一至相同或相近色調后，原本混亂的配色將變得緩和穩定。

群化方法

通過群化法收斂混亂，將三屬性共通化

將混亂的配色群化會得到踏實的效果。所謂群化，就是賦予色相、色調、明度等以共通性，制造出整齊劃一的組合。畫面松散時，將三屬性的一部分共通化，會得到統一感。

A圖的配色過于混亂，色彩紛繁的效果使畫面整體顯得混亂。B圖的配色明度、色相以及色調都比較相近，畫面整體顯得統一和諧。

所謂群化，指的就是分組、共通化。將前面講述的明度、色相、色調等綜合地共通化后，產生群化效果，畫面收斂、緩和。

雙色調配色

同一色相的明暗兩色

所謂“雙色調”，指從相同或相近色相中抽出兩種色調的組合。最有代表性的雙色調是同一色相的單色與明色的組合。制造色差，或是組合進濁色，都能創造出豐富的色彩表情。

B圖的配色采用的是同一色相的淡色與暗色的組合雙色調；而A圖中的綠色與淡紅色的色相差過大，無法組合成相同或相近色相的雙色調。

雙色調組合類型

濃淡法

節奏感產生舒適感

濃淡法指按照色相或明度順序的配色。由于順序被明示出來，因此產生節奏感，給人以舒適的感覺。對畫面的一部分使用濃淡法配色，則該部分周報有著踏實的效果。

A圖中彩虹的配色排列松散，但頗為活潑；B圖中彩虹按色相順序排列后產生穩定感、節奏感，就會顯得既張揚又踏實。

色相的漸進

明度的漸進

莫里斯派·對比雙色調

莫里斯偏愛的配色

使兩組雙色調對比后，同時呈現出平穩與緊湊的畫面感，將雙色調具有的舒適感與色相對比具有的緊湊感調和至平衡，是活躍在19世紀的英國裝飾藝術大師威廉·莫里斯鐘愛的配色形式。

A圖由綠色的明、中、暗三階段構成的配色。由于是同一色相，所以畫面踏實，不過似乎太過單調而顯無趣。鑒于出現3個階段的顏色，應成為三色調，不過與雙色調效果大致相同。而B圖中加入對比色紅色系的雙色調。對比色效果強調了整體，雙色調的平穩感與色相對比的緊湊感共存。

組合身為對比色的雙色調，產生緊湊感，給人以自然的印象。

微差·品位浮雕裝飾

近似色相與小明度差

使用幾乎令人察覺不到的微笑色彩差別配色，會傳達出高雅寂靜的感覺。一般情況下，微差因其曖昧模糊感并不討好，不過一旦被有意圖地巧妙使用，會有意想不到的效果。想運用好微差，周邊色尤為關鍵。若不小心搭配進強色，則會瞬間破壞來之不易的靜感，稱為庸俗失敗的模糊配色。

A圖鮮艷的黃色破壞了整體的寧靜氣氛；而B圖去掉了鮮艷的色彩，包的色調具有微差的特點，微差配色表現靜謐。

微差配色可以營造出幽靜氣氛

重復法

通過重復融合整體，制造共同之處

在稍稍偏離的位置上放置統一色彩，會達到共鳴融合的效果。這就是重復法。一致的色彩不僅互相呼應，整個畫面也融為一體。

A圖頂部與下面的顏色沒有呼應，使得上下分離，破壞了畫面的整體效果；而B圖下面汽車的青藍色與頂部天空的青藍色呼應，形成一致的色相，上下便產生一體感，使得整體緊湊嚴密。

在偏離的位置上放置與主要色彩同色系的顏色，使得整體融合，產生統一感

利用白色間隔使畫面更柔和

在過于濃艷的配色在使用白色背景

白色的色彩度為零，可以說是完全中立的顏色，但是由于搭配方法不同，可以產生十分鮮艷的效果。白色可以令平淡的配色鮮明，也可以令濃艷的配色柔和。

A畫面全部是過于強烈的顏色，濃艷而令人膩煩；而B畫面換成白色背景去除了濃艷的感覺，畫面表現得柔和起來了。

如果強烈的帶有刺激性的色彩讓人感覺很浮躁的話，可以嘗試在中間插入白色間隔，這樣不僅減弱了壓迫感，也使這種顏色的特征更加鮮明生動

2.1 營造畫面氛圍

畫面的安排決定配色的成功與否

如果商品與畫面不一致的話，即使有了漂亮的配色也沒有任何價值。已完成配色的畫面能否與目光鎖定的方向一致是成功與否的關鍵。想要隨意表現一個快樂的畫面，如果用上等的格調和高雅的配色，就會令畫面混亂，無法傳達正確的意思。

大部分畫面由色調決定

決定畫面的三要素是色調、色相和對比強度。其中最重要的就是色調。色調換言之是“格調”，是和“心情、品位、興趣”具有相同語感的詞匯。選擇哪種色調進行畫面的配色，決定性因素就是心情。

色調

大部分畫面由色調決定

即使是相同的材料、相同風格的形狀，當色彩的色調發生變化時，畫面也會完全不同。色調在營造畫面氛圍的要素之中起決定性作用，如果錯誤地選擇了色調，無論在色相和明度上下多少工夫都無法修正畫面。

選擇的色調就決定了配色的畫面。如設計嬰兒產品，就不適合用鮮艷或嚴肅的色調。

色相

暖色與冷色

色相大致可以分為暖色和冷色。由紅色至橙色、黃色被稱為暖色，正如字面上的意義一樣，這些顏色給人溫暖的感覺。相反，由藍色至青紫色被稱為冷色，表現出清涼、冷靜的感覺。一方面，各自的顏色都與各自特有的氛圍相聯系。綠色、褐色是用來表現大自然的色彩，字色無論濃淡都散發著女性的氣息。

色相帶來不同的畫面效果

色相大致可以分為冷色與暖色，一級位于其中間的色相共4部分。以暖色為主體進行配色給人以溫暖健康的印象，以冷色為中心則給人寒冷的印象。

對比強度

加強對比凸顯活力

組合色彩之間的色相之差、明度之差和純度之差稱為對比強度。增加對比強度可以增添活力，減少對比強度則顯得沉穩。想要創造富予活力、精神飽滿的畫面就要增加對比強度，想要表現靜謐高雅的畫面，就要限制對比強度。

A圖中的運動鞋色相對比較小，給人穩重的印象；反觀B圖的配色色相對比強烈，表現年輕人的朝氣蓬勃。

面積比

利用大面積比使畫面鮮明銳利

即使使用相同顏色的搭配，當面積比例改變時印象也會隨之改變。增大面積比（大小差）可以產生輕快的動感，相反，減小面積就會帶給人輕松愉快的印象。

A圖中的橙色地面在畫面中占據了相當大的面積，給人以輕松舒適的印象。較少地面橙色的面積，畫面變得銳利鮮明起來。

2.2 色彩印象指南

檢查畫面的差別

如果想要傳達的內容與畫面的配色產生分歧，那么無論怎樣美麗的配色都不會有任何效果。觀看者的印象與配色所表達的畫面無法產生共鳴，那么無論怎樣美麗的配色都沒有任何意義了。

男性——冷靜且有力的形象

令人感覺到男性特征的色彩，必須具有強大的力量。表現強大力量的純色，接近純色的暗色都是符合男性形象的色彩。

女性——冷溫柔親切的形象

和藹、親切、溫柔的色調與保守色調的對比是關鍵因素。以紅色為中心的暖色十分有效。另外，紫色是可以表現女性溫柔的特殊色相。

寒冷

如果只用藍色為主的冷色進行配色，就可以營造出冰天雪地的寒冷感覺。增大明度差能夠進一步強調寒冷的感覺。

涼爽

以冷色為主的大部分色相，減小其對比強度即可減弱寒冷的程度，使畫面表現出涼爽的感覺。由于亮度是主要因素所以要避免使用強色調。

溫暖

橙色、紅色、茶色等以暖色為中心的色相用來表現溫暖。減小對比強度就可以營造出溫暖的感覺。使用任何色調均可。

炎熱

加入對比色相更能夠強調暖色。純色色調是基本要素，素雅的色調與明亮的色調都無法表現出炎熱的感覺。

活力

朝氣、活力、休閑

可愛·浪漫

都市氣息·優雅

略顯素雅的明亮色調帶給人平靜和安詳的感覺。表現出橙色生活的優雅氛圍。

豪華感·高級感

將暗色色調放置在純色的旁邊，表現出豪華氣質。即使是同樣的暗色，由于被放置在離純色較遠的位置上而失去了鮮艷色澤，豪華的氛圍也一下子消失不見了。

自然之美

樹木的綠色、大地的褐色使人直接聯想到大自然，心情也變得安定祥和。

力量·速度

充滿力量的畫面不可缺少重量感，但并不一定適合于表現速度感。速度感是以鮮艷的純色色調為基調，而力量感則與鮮艷的厚重色調相吻合。

幻想·神秘

同色系色彩帶來幻想世界的縹緲感。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

“價值”在百度百科的解釋是————“價值屬于關系范疇，從認識論上來說，是指客體能夠滿足主體需要的效益關系，是表示客體的屬性和功能與主體需要間的一種效用、效益或效應關系的哲學范疇。”
因為一些外部原因，讓我最近一段時間都在思考一個問題，作為一名設計師，我的價值是什么？？？我的設計能力。那我設計能力的價值是什么？？？完成產品視覺的呈現，幫助項目上線和產品落地？
當這個回答擺到我面前的時候，我竟然有了一絲的不安。
因為在我看來視覺呈現這只是能力，并不是真正的價值。如果作為設計師只是這樣的能力，你會發現在團隊的位置是很容易就會被頂替的。
那作為設計師的我，那如何才能讓自己不容易被頂替，體現自身價值到底是什么就成了重中之重的事情。
那體現自身價值之前，我需要去知道設計價值是什么。設計價值說到底就是解決問題，從而帶來了想要的效益。

那我需要思考的方向（我工作主要方向B端產品）

一、設計師解決了什么問題
1、發現問題
2、定義問題
3、分析問題
二、設計師如何解決的問題
1、明確設計目標
2、制定設計策略
三、設計師如何驗證問題是否解決
1、收集用戶反饋
2、跟蹤數據指標
四、舉個例子
五、總結一下

 

第一步：「設計師解決了什么問題」

發現問題、定義問題、分析問題
一開始工作的時候很長一段時間都是被動接需求、找參考、輸出設計稿，這樣一個流程下來，解決的問題無非就是如何用設計呈現需求的過程，設計師的價值發揮就會非常有限。所以如果想發掘更多設計價值，就需要轉被動為主動，將設計前置，從業務出發去發現問題（通過分析項目背景/目標、用戶調研、行業/競品分析等）、定義問題（問題出現的原因是什么？用戶的原因？還是產品本身的原因）并且分析問題（細化出現問題的原因，給出解決問題的方案）

第二步：「設計師如何解決的問題」

明確設計目標、制定設計策略
雖然如何解決問題每個人的側重點都不一樣的，但是設計目標作為體驗提升的開始，正確的設計目標決定了提升的方向，而設計目標可以由產品目標（提升某個具體的指標、提高用戶的操作效率）和用戶目標（用戶的想要得到什么、用戶使用產品的痛點是什么）的推導出來。目標有了就要落地去實現，作為設計師，設計策略是落地的重要一步：統一規范、縮短操作路徑、提升用戶滿意度等等

第三步：「設計師如何驗證問題解決與否」

收集用戶反饋、跟蹤數據指標
我們總是在主觀的評價這個設計好不好看、好不好用，導致設計的價值很難去真正的衡量。其實衡量價值最基本的方法無非就是你這樣做帶來了什么，結果導向是衡量設計最為標準的，也是流程閉環的最后一步，如果沒有結果，流程無法閉環，那設計價值也無法衡量。而產品上線后得到結果又是什么？無非就是用戶反饋是否滿意和數據指標是否達標。 

舉個例子

項目背景是在公司業務快速增長和用戶對于服務品質的訴求提升，加上客服團隊一直處于被動依靠人力處理用戶問題的服務模式的情況下，排除大幅度疊加人員的方案，希望通過數據驅動+服務產品智能化的方式來對客服體系的升級。從而提高客服人員的工作效率，減少公司的招聘成本的同時提升用戶的體驗，最終實現公司業務的快速增長。

第一步：「設計師解決了什么問題」

1、發現問題

通過項目背景不難發現其中問題所在：在不增加人員的情況下，當前客服團隊的服務模式，已經滿足不了現有的業務增長趨勢和客戶的品質訴求。

那我們需要做的就是解決服務模式的問題。

服務模式有什么問題呢？一直處于被動依靠人力處理用戶問題。

2、定義問題

為什么一直處于被動依靠人力處理用戶問題呢？

· 用戶一遇到問題就去找客服，用戶做不到遇到問題可以通過自我查詢或者其他不依賴客服的方式來解決。

· 客服人員能力有限，每天的用戶承接量大，重復性問題多，問題處理流程繁瑣，導致單個問題處理時間較長。

3、分析問題

排除人力堆加的方法以外，如何才能解決服務模式的問題呢？

方法就是

增強用戶自主解決能力：自主渠道的升級，實現渠道擴增和業務分流，通過內容分層，簡化用戶查找問題的流程，培養用戶自主解決能力的心智模型；引入智能機器人能力，實現簡單性、高頻率問題由機器人代理解決。

提升客服解決問題能力：調整問題的優先級排序，優先解決重要客戶的問題，減少重要客戶的投訴和流失；尋找問題處理流程的機會點，減少客服單個處理時長；分析不同程度客服同時處理問題量的數據，限制客服最大承接量。

既然問題已經確定了，那就要去解決問題。根據對問題的分析結果，該如何轉換為設計呢？

第二步：「設計師如何解決的問題」

1、確定設計目標

結合產品目標（自助渠道升級、產品智能化/數據化）+用戶目標=設計目標的推導公式

產品目標是產品經理/需求方給到你的，但是用戶目標則是設計師自己調研分析得來的

----用戶想做什么？

用戶想快速解決遇到的問題

----客服想做什么？

客服想輕松快速的幫助用戶解決遇到的問題，完成工作中的KPI指標

----用戶的痛點？

用戶在自助渠道找不到答案，于是遇到問題就找客服去解決問題，智能機器人的回答也解決不了問題，所以需要找人工客服，但是需要等待很長的時間

----客服的痛點？

每天高負壓的的工作環境，枯燥重復的工作流程，敏感繁多的考核指標。

2、制定設計策略

那在確定好設計目標之后，就需要通過制定設計策略，以達到設計目標。

注意：我們在做設計之前，必須要確定設計目標。因為目標是方向，不然做到最后發現自己做的設計沒有解決產品目標和用戶目標，那就是白白的浪費時間，也說明自己做的設計是又問題的。

第三步：「設計師如何驗證問題解決與否」

項目上線后，我們需要去收集用戶反饋，關注我們設定好的指標去衡量、驗證構建的設計方案是否解決用了用戶問題以及是否達成了產品目標，因為這樣設計工作才能實現一個閉環。

1、收集用戶反饋

可通過在產品上線初期以及上線一段時間后進行調查問卷的發放，通過調查問卷得到用戶在使用新的產品的感受，直觀感受產品迭代后的反響，同時也可以為下次的迭代提供方向和依據

2、跟蹤數據指標

從產品目標我們可以看出，我們的數據指標就是提高用戶對自主渠道的使用率，那我們只需要在自主渠道的頁面增加一定的數據埋點：頁面點擊率、頁面瀏覽時長等等

總結一下

寫了這么多，才發現自己現在欠缺的，還有環境欠缺的。所以冷靜的理一理自己的工作的流程，多關注業界的動態。主動的將設計前置，提升自己的價值，提高自己在團隊/項目中的話語權。不然如果只是簡簡單單的設計呈現，自己永遠處于被動挨打的狀態，沒有話語權，沒有價值體現，隨時都有可能被替代。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

如何選擇合適的B端設計風格？

1.B端后臺分類：

根據服務對象劃分：

一類支持有C端前臺，支持前臺產品管理各種資源。第二類服務企業，提高企業工作效率和營收。

根據后臺功能：

1.監控運營：時效性強，旨在實時反饋異常情況，快速判斷下達命令，回復信息、多用于數據控制中心。

2.數據分析：數據結果的對比和分析趨勢，時效性要求并不高，了解整體和各部分數據水平，助力決策。

3.記錄管理類：主要用于人員、設備、資產等增刪改查，文本信息容量大，頻繁便捷的操作。

4.系統配置：權限配置、設備功能配置，操作為主。

2.后臺深淺兩大風格分類：

淺色：

適合文本信息多密集的表單列表類后臺，淺色更符合人眼白底黑字的閱讀習慣，瀏覽速度更快，信息獲取效率更高。

深色：

圖像信息密集的后臺適合圖片、數據可視化圖表等；深色對彩色的圖像信息襯托更強。信息獲取速度較慢，長時間可能視疲勞。

3.作者常向產品方提供的風格參考

較常見

1.經典商務風（導航深、內容淺）——專業、高效、成熟、可信賴（對照深色西裝人物形象）

      優點：市面最常見的風格，普世性高，大多數用戶可快速接受，層次分明

      缺點：視覺缺乏記憶點

 2.輕量科技感（導航淺、內容淺）——簡潔、明快、輕量、年輕（對照白襯衫打領帶男性）

      優點：視覺清新明快更年輕化更輕量，對其他文本及圖形展示包容性高，就像A4白紙一樣容器存在感弱

      缺點：純白色導航+頁面層次略曖昧。

 3.藍色科技風（導航中、內容中）

      適合：適合科技屬性強的產品界面，圖像圖形展示

      缺點：對其他色彩信息有干擾，持續性長時間觀看易視覺疲勞

 4.暗黑科技風（導航深、內容深）

      優點：對色彩表現力強

      缺點：密集文本信息獲取速度會下降，持續性長時間觀看易視覺疲勞

4.精準選擇風格時可以進一步的考慮：

1.整體行業風格

比如美妝和科技行業的整體設計基調就不太相同。

2.產品想要傳達的氣質：

理性可靠 or  簡潔輕松輕量 or 關懷普世 or 酷炫吸睛….這個可以和相關產品經理、銷售共同商討

3.目標用戶的群體特點及喜好。

根據目標用戶的性別、年齡層、受教育水平，審美水平考量（可能包含多種角色，選取1.2個核心角色為參考）帶入目標用戶工作場景及愛用物常用物品味，去判斷基調。

如主要用戶群：40+男性用戶，本科以上受教育水平，使用windows電腦進行專業管理操作，審美傾向明確內斂。

如主要用戶群：20-40歲，男女比例約6：4；大專；操作水平參差

4.使用場景及高頻的操作。

例如：最常使用數據分析管理，需要快速閱覽多條數據，對數據進行比對，更適合淺色風格展示表單數據。

5.判斷獨立的平臺是否為獨立開發

獨立開發的，可以采取更獨特設計。若平臺很大需要不同外包公司的合作屬于整合類平臺則更注重設計的包容性。

5.如何讓后臺設計更具特色：

1.重點色的使用

“731配色比例”70%的面板色，30%的導航面板色，10%的強調色。（這里的用色比例可以根據內容具體再去調節只是大概比例）品牌色或重點色：強調行動關鍵點、重要信息高亮、圖形化說明等。強調色用就要用的像蛋糕上的櫻桃。起到畫龍點睛作用即可。

2.圖標的優化

后臺高頻出現的圖標，值得我們花時間去統一設計打磨，調整圓角粗細疏密，符合整體界面氣質。從圖標庫里拖出的圖標很多在線條粗細上是不統一的，好的設計在細節處也要動人。

B端工具類圖標識別性第一，美觀性第二。B端導航圖標更多是在基礎造型上打磨，不需要加花里胡哨的漸變、投影，導航圖標一般在24px-16px大小，太復雜反而看不清。在區分狀態的時候可以考慮加點品牌色

3.空狀態小插畫

空狀態插畫是B端設計師少有能發揮自己繪畫天賦小巧思的地方。

圖形化狀態語言，輔助用戶理解內容。可以將產品機械蒼白的文案設計表現的更加具有溫度，具有引導性。讓乏味的工作出現一些共情小彩蛋，有趣的插圖動畫可以緩解等待的焦慮。

4.登錄注冊頁

純色背景卡片式：簡單大方更聚焦登錄操作

插畫背景：場景化展示產品的功能及亮點，讓用戶更有心理預期

幾何圖形背景：最后和品牌圖形相關，加深用戶對產品的品牌印象。

照片背景：相關場景或產品類型，具象圖片信息更直觀

5.圓角的大小

不同大小的圓角傳達產品不同的氣質，大圓角親和、小圓角精致、中等圓角大眾中庸。

6.優化信息層級

優化信息層級，區分信息主次可以使閱讀更快，操作更快，界面更有節奏感。

這時候你就是那個考前畫重點的老師

判斷一個頁面里最重要的是那些信息或操作，強化它！并弱化輔助信息；

判斷一個模塊里那些是重要信息，強化它！

6.新人需要避免的雷點：

1.追求炫酷的視覺效果舍棄操作效率。比如追波風滿屏花里胡哨的卡片及面板，滿屏大投影及高飽和色彩。對于B端界面來說信息噪音太多，反而干擾信息獲取效率。

2.反常規用戶習慣的操作。尊重用戶習慣，不要為了個性化去嘗試改變，不要妄圖改變用戶的操作和認知的慣性。慣性思維大于設計思維，曾經遇到過產品因為右手操作所以要把導航放在右邊的離譜例子。

3.數量多，動靜大的夸張的動效。B端與C端不同的地方在于希望操作者沉浸式工作，遵循非必要不打擾。之前看過一個反面例子后臺，在每一步操作后都出現大的場景動效鼓勵完成，如果作為一個長期使用的工作者，我會覺得每次完成任務都需要等待動畫完成可能只需要2-3s也很浪費我的時間。

4.新人建議多看Antdesign和Element等成熟的組件，創新類組件樣式，最好和和開發商量是否能夠實現。

5.在確定主要風格及2-5張主要頁面后，就應該著手基礎規范（色彩字體等，不然后面越做越亂）。

6.一段時間一個審美，同一界面中的元素風格不統一。

7.避免大面積使用高飽和高明度的色彩，及曖昧含糊的臨近色彩。長時間使用眼睛會累，產生不耐煩焦躁的負面情緒。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

本文將從理論到實踐，從軟件到插件，再到不同應用場景拆解和團隊協同的重構，一步步教你如何搭建產品KIT組件庫。也給大家帶來逆天的Anima插件教程，組件化設計的必備插件，目前國內還比較少有文章講到。手把手！嘴對嘴！堪稱全網最細保姆級教程！

01. 什么是KIT組件庫？

一個成熟的設計團隊，都會為產品制定設計規范，搭建產品KIT組件庫，組件化思維也是設計師的必備思維之一。組件庫會讓團隊協作變得高效且一致，讓團隊成員專注于深耕體驗和細節，實現設計向產品賦能。極大的節省設計和開發成本，優化用戶在界面流轉間的感知差異體驗。

02. 原子設計理論

如果將【UI設計】比喻成一位新型時髦的青年，那么【公共藝術】則是一位已在歷史長河中摸爬滾打數十載的老者，一位偉人曾說過：人類的發展從歷史中獲得啟迪，故筆者旨在從探討公共藝術在地性觀念的角度，來淺談如何在UI設計中凸顯情感關懷。

1 公共藝術在地性觀念

“藝術是什么”

當代藝術作品（圖片來源：網絡）

學者王瑞蕓認為當代藝術邊界模糊且藝術家創作手段任意， 不僅沒有一個能夠稱得上固定的風格，也不存在相應的美術主張，因此無法用語言對其進行概述。 而二十世紀實驗藝術的先鋒馬塞爾·杜尚 (Marcel Duchamp) 曾用種種藝術實踐行為向公眾宣告：經由藝術家之手創造的就是藝術。

“什么是公共藝術”

公共藝術作品（圖片來源：網絡）

學者金江波在其專著《地方重塑—公共藝術的挑戰與機遇》中指出：公共藝術體現的藝術主張依托于關注人文的公共理想。 復旦大學的湯筠冰教授曾在其公開課《城市公共藝術》中講述到，公共藝術與純藝術的不同之處體現在，公共藝術中包含了一種地域文化。

相較于說不清、道不明的“藝術”，公共藝術有別于純藝術“為我性”的情感抒發，更加強調藝術作品與空間、人之間有意識產生的情感聯系，用語言來概況其特性可以總結為：公共性、藝術性、在地性。

“什么是公共藝術在地性”

公共藝術作品《爬墻的熊貓》（圖片來源：網絡）

相較于“公共性”與“藝術性”的“基本性質”，筆者認為受“他人”影響而產生的“在地性”更能明顯地體現公共藝術中的文化關懷，什么是公共藝術在地性觀念，用一句話來概括：公共藝術與空間的關聯性。

縱觀藝術史，公共藝術的在地性范式可以總結為以下三類：

(一） 與空間的融合關聯性

古希臘帕特農神廟（圖片來源：網絡）

最常見的一種在地性范式，起源于人民的基本需求已得到滿足，開始追求更高層次的精神追求——對美的追求。例如古希臘帕特農神廟的建造依托于古希臘人民對細節美與民主性的崇尚與追求，以及中世紀的“城市美化運動”，“依附于建筑的藝術”，均是以在依托于周圍環境、融入當前環境的方式來體現公共藝術的藝術性價值。

(二） 與空間的沖突關聯性

藝術家佩爾施克策劃的公共藝術活動《紅球計劃》 （圖片來源：網絡）

主要集中在后現代主義時期，后現代主義藝術批判以往藝術的精英化，追求藝術“生活化”。這一時期許多藝術家將與需求空間格格不入的通俗化形象放大植入公共空間中，產生與當下空間沖突的視覺感官體驗，以“介入”空間的“逆向之美”的方式來體現出了公共藝術的藝術評判性價值。

藝術家奧登伯格創作的《世俗豐碑系列》（圖片來源：網絡）

(三） 與空間的無關聯性

《瑞秋豬》與《乳牛大游行》（圖片來源：網絡）

出現在后現代主義時期，此時藝術家致力于使藝術擺脫架上束縛，追求藝術的開放性，諸如《柏林熊》、《乳牛大游行》以及《瑞秋豬》等社區參與類公共藝術作品，以藝術家主導的活動形式讓大眾參與到藝術創作過程中，打破以往以藝術家為中心開展的藝術創作行為，去中心化，此類公共藝術擺脫空間的束縛，其在地性含義由參與者構成，其開放性藝術價值仿佛實現了大同之美。

2 在地性藝術語言與UI設計-以沖突關聯性為例

(一）關聯性的意義

例子1

上圖中左邊是由英國藝術家安尼什.卡普爾（Anish Kapoor）創作的公共藝術作品《云門》，將芝加哥市民引以為傲的摩天大樓與天際線的形象利用鏡像反射的原理映射在光滑的雕塑表面，凸顯城市文化與自信。右邊為新疆克拉瑪依油田新地標，似乎與芝加哥的《云門》沒有太大的區別，拋開是否購買版權這一點涉及到法律層面的考量，從藝術價值層面來考量這件“作品”，周遭土黃色的大樓并非是需要凸顯的城市文化與特質，強硬的植入只會削弱了作品的藝術價值。

例子2

再舉一個例子，以美的美居APP的缺省頁為例，在最新的版本中，美的美居設計團隊將缺省頁的視覺元素替換成了自身IP形象“小藍”，運用與產品相關聯的視覺元素，不僅在美化的基礎上增強了頁面與產品的關聯性，更是彰顯了品牌自信。

以上兩個例子也是為了說明，在UI設計中視覺元素的運用需站在“有理有據”的立場上，貫徹“取之有道 用之有理”的思想。以公共藝術中“與空間的沖突關聯性”藝術語言為例，來探討下此藝術語言在UI設計中的運用。而選擇沖突性藝術語言來探討的原因，主要在于該藝術語言包含的批判性、先鋒性與幽默性特質，能夠滿足當今人們對情感化產品的需求。

(二）公共藝術中的沖突性

聊到公共藝術，不得不提到的一位藝術家：致力于把生活用品變成藝術品——克萊斯.奧登伯格（Claes Oldenburg），其世俗豐碑系列作品運用幽默風趣的藝術手法，提取與日常生活中通俗的現成物的形象介入公共空間，是對藝術精英化以及國際主義千篇一律設計風格的不滿與批判，以及藝術生活化精神的體現。該藝術形式可以引起大眾對其的新鮮感以及體現出一種趣味性，但當好奇與新鮮感退卻之后，對其剩余價值的質疑也是各學者對這種藝術形式爭議不斷的原因，持有質疑態度的學者認為“沖突式”公共藝術具有時效限制性，只能在時代特定階段發揮其藝術作用。

筆者認為站在城市形象塑造的角度來看：

a、"沖突式”公共藝術能夠體現一個城市的包容性與開放性，萬千藝術姿態都能被接受與容納。

b、藝術家選取的藝術形象均來源于人們的日常生活形態，其藝術元素并不因地域等物質外在條件的不同，而對不同城市地區的人們產生不同意義，其體現的是一種全球共通性文化，其藝術性是針對城市公共空間而言。 

綜上所述，筆者認為在沖突式在地性語言中，運用的藝術元素具有以下幾點特征：

通俗性：大眾對其有相似的認知與理解

原生性：夸張、未修飾的規模與形態來展示

戲謔性：不按常理出牌，以“格格不入”的形式存在

(三）沖突關聯性語言在UI設計中的運用

例子1

針對上述三種特征，在一些APP的UI設計中，也可以找到相應的案例。例如B站番劇《總之就是非常可愛》的進度條的圖標設計案例之一，該案例的運用起因在于該番劇的劇情甜份過高，網友們紛紛用彈幕類似于表達“我酸了”的通俗網絡語言來刷屏，引起了B站的關注，于是就有了檸檬代替進度條的操作。

例子2

而Instagram推出的視頻產品「IGTV」，其加載頁借用了8090年代人們對老式電視信息收視不良的記憶——雪花屏元素，該元素與當前高科技信息技術時代的沖突性不僅營造出了炫酷的視覺效果，同時也使得產品飽含了懷舊的情感關懷，代表了一個時代的通俗回憶，得以與用戶產生共情。

例子3

嗶哩嗶哩閱讀的停更通知用更加通俗易懂的【請假】來代替，以及克拉克拉APP用【拔掉電線】的口語化用語來描述退出直播間的行為，不僅拉近了產品與生活的距離，也凸顯了幽默的情感化設計。

雖然藝術與設計的邊界日益模糊，但是二者之間仍然具有本質上的區別，那么我們在探討藝術語言在設計中的運用時，應把用戶體驗的良好與普適性也考慮其中，將藝術語言進行設計化的處理，結合上述藝術案例與設計案例來看，沖突式在地性藝術語言在UI設計中的運用時，其運用元素的特性可以歸納為：

• 基礎條件-通俗性：能夠引起大眾的共識與話題，大多數的靈感來源于生活；

• 必要條件-適應性：將原元素的特性進行特質提煉與設計化，與公共藝術不同，在UI設計中是將原元素的特征運用在設計中，同時注重例如提煉的雪花屏幕的閃爍特質，而不是直接將整個雪花屏幕運用在界面上；

• 增味條件-創新性：跨領域找參考元素。（舉個例子，從B領域提取一個元素運用在A領域上，但B領域和A領域的在大家通俗認知中的兼容性并不強，其創新性是由疏離性凸顯）

  
  

簡而言之：

1、保證元素的通俗性，結合當代語境，亦可以理解為#話題性#；

2、可跨領域找參考元素；

3、需要對元素的特質進行加工提??；

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

大綱

1、研究背景

2、案例分析

3、無障礙設計工具推薦

在特殊的場景下所有人都存在殘疾

一聽無障礙設計就覺得可能和殘障人士有關，其實不然；除了先天或后天出現的眼盲；耳聾的這種：永久性的障礙。在正常人身上也存在著情境式障礙；暫時性障礙；例如：

提著大包小包的你,想使用手機—情境式的肢體障礙

在喝熱粥時,霧氣遮擋住的眼鏡—情境式的視覺障礙

骨折的腿無法正常行走—暫時性的肢體障礙

剛睡醒迷糊的你—暫時性的認知障礙

 ……

所以即使你是正常人，在日常使用產品時也會受到和殘障人士一樣的局限性。而大家說的用戶體驗設計其實就在特定場景下解決給特定的人群產生的局限性。

城市無障礙坡道

先普及一個概念（curb cut effect）直譯過來就是“遏制分割效應”，其實意思就是機會共同體的概念、弱勢群體受益的法律和計劃往往最終使整個社會受益；最普適的就像是路緣處會做臨時的斜坡處理，目的是為了幫助坐輪椅和推薦不便的人出行順利通過，但是實際上，對于推著嬰兒車，和行李箱的人同樣受益。

傻傻分不清楚的洗發水和沐浴液

為了統一品牌設計語言，往往會將洗發水和沐浴液的瓶體設計成一樣，不僅是視障人士，任何人在閉上眼睛洗頭時都分辨不出來。花王在1991年在瓶身做鋸齒狀處理用來區分兩個產品，通過觸感也可以輕松辨認。

原文傳送門：シャンプーのきざみに込められた思い

接下來就是軟件端的案例，軟件產品在無障礙設計的例子上也很多。

哈啰出行-司機端

哈啰出行的司機端，在司機開始行程后，在司機端進行操作,APP會進行類似于IOS VoiceOver的語音播報，就是對你點擊的位置做中文的播報，規避對情景式障礙的分神的危險。

滴滴-老年版

滴滴打車首頁的“老人打車”，除了對布局的簡介化，對字體的放大化，還可以設置常用地址然后一鍵打車，或者通過電話聯系客服叫車，還是比較方便的。、對于60歲以上并通過實名認證的用戶，如果終點是醫院等特定目的地的話，后臺還會優先派單，為老年人提供救急服務。

無障礙設計工具推薦

檢查色彩對比度

色彩對比度意為：【識別對象】和【其背景顏色】之間的對比度，對比度越高，越清晰，對比度越低。越模糊。如把重要的文字信息的對比度設計到AAA.次級的文字信息的對比度設計到AA。 把色彩對比度量化的話，可以計算出比例值，最低1:1（黑底黑字）、最高21:1（白底黑字）。

最權威的互聯網無障礙規范 —— WCAG2.1(Web Content Accessibility Guideline，Web內容無障礙指南

對比度量化工具：點擊這里

對比度cheome插件：點擊這里

Funkify - 殘疾模擬器

通過極端用戶的視角來體驗網絡和界面，包括視線模糊、對比度下降（所有人的視覺對比度都會隨著年齡而下降）、雜色、白內障、糖尿病視網膜病變等。

殘疾模擬器cheome插件：點擊這里

屏幕閱讀器

用于在 Chrome 瀏覽器中朗讀內容

屏幕閱讀器cheome插件：點擊這里

Color Oracle-色弱；色盲模擬器

支持Mac / Win / Linux。大約8%的男人和0.5%的女人有色盲或色弱、是相當大的族群。當然，UI中不應該只通過顏色來區分信息，但有時無論如何會用到色彩區分（比如數據可視化），那么就一定要使用色盲友善的配色方案。一般來講，藍/黃、藍/橙是比較萬用的搭配。

色盲模擬器工具：點擊這里

總結：

雖然在現實的資本市場不太會在邊緣人群身上花那么大的資源，但是體驗設計存在的意義不就是為了解決各種因素給人產生的局限性么。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

背景

在 B 端設計領域中，不管是內部用戶、產品、設計師、開發，還是外部產品、設計師等，總能聽到關于界面「屏效」方面的訴求或吐槽。

「屏效」狹義理解是「界面過度留白」；廣義理解，「屏效」源自諧音“坪效”，指的是每坪的面積可以產出多少營業額(營業額/專柜所占總坪數）。而「屏效」對于界面而言可以指屏幕單位時間、單位面積內的信息可以帶來多少商業效益/效率提升。

為了探索在 B 端產品中用戶為何對「界面過度留白」或「屏效」問題如此敏感，于是我們展開了「屏效」專題的設計探索與實踐?！钙列А箤ｎ}探索主要以「探索」與「實踐」相結合的方式展開，將實踐過程中反復驗證有效的設計策略沉淀成設計手冊，同步將部分功能進行工程化，確保可以開箱即用。

探索階段-為誰在何時何地設計

用戶聲音｜不同的故事相似的訴求

面向內部設計師和終端用戶投放的《高屏效訴求》《中后臺產品滿意度調研》問卷中認為提高屏效能極大提升用戶體驗的設計師占 58.14%；認為提升屏效對體驗有提升的終端用戶占 50.6%。

外部知乎上針對《Ant Design 4.0 設計價值觀》的 13 條反饋里，其中就有 2 點提到關鍵字「效率」。

通過了解不同用戶和產品類型發現，不同的用戶在工作場景的產品使用中有著相似的特征：

案例收集｜發現問題，大膽假設

縱觀 B 端產品界面，發現普遍問題和收錄在解決屏效問題上實踐得比較好的案例，為了逐步突破問題，選擇以數據產品中覆蓋率極高的表格為設計切入點，通過線上跨產品多端地毯式的體驗走查，發現表格三個層次的問題：

視覺、交互層在無需理解業務場景和用戶目標的情況下，都較容易發現，屬基礎問題，但很多「過度留白」的屏效問題往往是信息被組織方式的差異導致的「過度留白」。

綜上我們提出假設：為提高屏效，可從視覺、交互、信息三個層次解決

視覺層為提高信息查閱速度，可以通過提高信息密度；交互層為提高操作速度，可以縮短當前手勢到目標之間的距離；信息層為提高信息被理解的速度，可以通過重組織等方式。

基于假設，我們進行了進一步的桌面研究，查閱論文等書籍，尋找設計理論的驗證和指導。

競品分析｜尋找實踐證據，謹慎驗證

我們知道視覺上界面留白過多（過疏會增加滾屏成本，過密因易串行而影響閱讀效率），以表格「行高」為例，探索各表格在字號、字高和行高的關系，因為不同字體的同字號實際像素高度會有差異，因此選擇的是字高（即文字垂直高度的視覺大?。┒亲痔柣蜃中懈?，決定留白的兩個重要因子是字高和表格行高，以次推演，界面元素和元素間距的留白關系，探究在視覺層怎樣的留白率能保證甚至提升屏效。

以數據產品中的表格為例，通過直接和間接競對的方式，分別從數據的查閱（視覺）、分析（交互）維度進行功能點和設計細節上的比對，來看看優秀產品是如何解決屏效問題。

直接競對：內部用戶口碑較好的產品 A、B外界競對：同領域的 Tableau、網易有數、金山、微軟表格；間接競對：谷歌郵箱、AntD 等的緊湊主題的常規列表（一維表格）

通過競品分析可以發現，數據分析領域的表格留白率普遍較低（信息密度高），尤其是金山和微軟的電子表格，其次是同類面向數據用戶的 Tableau、網易有數，而谷歌郵箱等工作臺常用的常規列表緊湊版本中，留白率和數據領域的電子表格不相上下。

緊湊版的使用場景也常常是面對數據量巨大的信息呈現，通過切換緊湊主題，提升信息的快速瀏覽，而這也非常適合數據分析場景中巨大的數據量呈現。因此我們的產品在留白率的提升空間極大，而在實際案例實踐中，也已經將表格行高優化至 30px，克制的使用留白。

除此外，競品其他層次的設計也做了比對，總結來看整體設計做法：高密度、少屏數、少留白等。

文字陷阱：中英文字高不等于字號

舉個容易犯錯的競品參考是，谷歌在緊湊版主題下字號 12px，列表行高是 28px，但在 AntD Table 中同樣的 12px 和列表行高 28px 就會發現非常擁擠，缺乏呼吸感。

原因在于谷歌的 12px 是英文字體，實際字高只有 10px，而 AntD Table 的語境是中文字偏多，實際字高有 12px，所以留白的差異在于一個是 18px（28-10），一個是 16px（28-12），這也是為什么決定決定留白的兩個重要因子是「字高」和表格行高，而非「字號」和表格行高，進一步推演，決定界面留白的是「元素視覺高度」和「元素間距」。

論文查閱｜尋找理論證據，謹慎驗證

研究表明，低密度認知負荷低，但高密度任務完成率高，用戶更喜好

參考資料：論文《基于眼動的網頁對稱性和復雜度對用戶認知的影響的研究》

對于信息，用戶需要需要閱讀（視覺），思考和理解（認知），需要點擊按鈕、操作鼠標和打字（行動），在人機工程學中，統稱為負荷。即認知（記憶）負荷、視覺負荷、動作負荷，即分別對應用戶體驗設計的三個層級，信息/視覺/交互。而負荷所花費資源從多到少依次為：認知 > 視覺 > 行動。

認知負荷，舉個例子，看了但不一定懂了。你是否有這么一種體驗——刷抖音，雖然很多（信息密度小，輸出效率低），但可以一直刷下去并且刷很久；而看一門 C4D 教學視頻，即使就短短十來分鐘（信息密度大，輸出效率高），但是卻要看上半天。因為刷短視頻時，你的輸入效率遠高于作者的輸出效率，而看一門 C4D 教學視頻時，你的輸入效率遠低于作者的輸出效率。可是，輸出效率是客觀的，輸入效率是主觀的。如果輸出效率很高，你可以通過提高自己的輸入效率（比如讓自己成為 C4D 專家）來跟上作者，從而變強；否則輸出效率很低（信息質量低），你的輸入效率很高（很專業），信息于你而言都是無效的。

假設負荷總量不變的情況下，那么以上三類場景界面需要對用戶負擔分配大致如下，官網品宣類需要低認知成本，低視覺負擔，視覺要求高，用戶才會被吸引過來閱讀，甚至酷炫的交互更能增加互動體驗而帶來的趣味感，比如蘋果官網，信息量極少、圖版率高帶來極具藝術的視覺體驗、進而吸引用戶愿意跟隨屏幕滾動漸進式接受信息，而 B 端應用因為是專業使用，首先認知方面隨著員工的專業度提高而降低，因此可以通過提高視覺負擔，來降低行動負擔，進而減少操作用時，當然最佳情況是三個維度能整體降低負擔，讓總負擔降低，就需要更多設計巧思了。

面向內部設計師和終端用戶投放的《高屏效訴求調研》預設解決方案中，設計師常用的 Top 3 做法為：【信息層】隱藏不必要信息、【視覺層】提高布局緊湊度、【交互層】減少點擊跳轉。

實踐階段-如何設計

通過以上的探索，我們可以確定的是，B 端產品面向專業人員的工作界面設計中，提高屏效可從視覺、交互、信息三個層次進行，視覺層-高密度，即提高屏幕信息密度；交互層-低跳轉，通過減少頁面跳轉、手勢與常用操作的距離等；信息層-有效性，通過重組織或輔助信息幫助用戶理解，甚至提供幫助手冊等以提高用戶專業能力。

基于以上的總結，對產品進行優化。下面以一個簡單案例進行設計策略的解讀。一位運營同學想對比 A、B 兩不同人群在相同維度（白領-有信用卡）下的人數差異，尋找運營機會點。

如下表格經過高屏效策略優化前后對比圖，優化前相同維度下不同人群數量的對比需要視線來回跳動比對，而優化后的表格內容，更符合用戶看差異場景下分析目的數據查閱，視線鎖定相同維度，即可快速比對數值大小。

下面以視覺、交互、信息三個層次解剖設計過程背后的思考。

視覺層｜高密度-克制的留白

眼動理論：研究表明，人眼最小可視視角 0.3 度，水平最大眼動舒適轉動區 30度，垂直最大眼動舒適轉動區 55度?？傻贸鋈搜圩钚∽R別范圍 12px，水平視野舒適眼動寬 1200px，垂直視野舒適眼動高 2200px。參考資料：論文《基于眼動交互的用戶界面設計與研究》

如圖，縮小表格行高的同時，目標信息之間的眼動距離隨之縮短，在眼動舒適區內看到更多信息，便于信息的高效獲取。

交互層｜低跳轉-高頻信息前置

理論基礎：菲茨定律是用來預測從任意一點到目標位置所需時間的數學模型，它由保羅·菲茨在1954年首先提出。這個模型考慮了用戶定位點的初始位置與目標的相對距離、目標的大小、移動的最短時間。三者之間關系公式為：T=a+blog2(D/W+1)，W為其中目標的大小；D為到目標的距離；T為移動到目標所用最短時間。參考資料：菲茲定律

表格單元格借助交互狀態，增加懸浮出現的信息組件，前置顯示目標單元格明細信息，同時通過交互出現的指示器輔助行列信息的獲取，高頻操作考慮手勢位置放置，縮短與操作目標的距離，以提高整體操作效率。

信息層｜有效性-信息重組織

理論基礎：交互設計四大策略「組織、刪除、隱藏、轉移」參考資料：《簡約至上》

用戶為了對比 A、B 兩不同人群在相同維度（白領-有信用卡）下的人數差異，但內容的重組織方式讓兩數據行需要頻繁點擊滾動條來查看，根據用戶目標，將關聯性大的數據放置相鄰列（即將要對比的人群放置列頭），即可快速查閱，減少眼跳距離。

結語

設計趨勢中常見的大字體大留白界面，但在 B 端場景中，面對緊張的工作節奏，時間和注意力變得尤為可貴，相對而言，基于復雜度守恒定律， B 端信息量大且高頻訪問的產品中，「用得快」要比「看得美」更重要，「高密度」「低跳轉」詮釋的即是「空間換時間」，少一次點擊，少一次跳轉，少一份等待，就多一份時間和效率。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

What 是什么

簡介「行動號召按鈕」是用來號召用戶點擊的進行下一步的操作按鈕/可點擊的組件。

例子 螞蟻金融科技首頁的“開始探索”按鈕，點擊后跳轉到一個新的頁面進行下一步操作。

Why 為什么

「行動號召按鈕」是在事件操作的最后一步出現的，可以讓用戶知道當按下此按鈕時，當前事件的操作流程已經完成或即將發起一個新的流程，可以給用戶一個明確的反饋。

When 什么時候使用

當你需要在界面中放置“完成”、“提交”、“確定”或“繼續”等按鈕時，可以使用這個模式，一般放置在一系列操作的最后一個步驟中。

使用條件

• 頁面中即將進行下一步操作或最終確認的時候；

• 需要一個醒目的按鈕提示用戶結束當前流程時。

How 如何使用

創建行動號召按鈕時可以使用平臺默認的按鈕樣式，或者使用更大的按鈕樣式（注意不能是一個鏈接），讓它在頁面中非常醒目，讓用戶可以快速找到并點擊它。

需要注意：

• 按鈕可以放在頁面的底部或右邊，即任務流程最后一步的下面，也可以是你的平臺規范中規定的位置，只要能讓用戶能夠快速找到它就可以，避免用戶因為找不到按鈕而結束了這個流程；

• 最好使用文字按鈕而不是圖標，因為文字能讓用戶更好的理解，比如像“完成”、“提交”這樣的按鈕用文字更能讓用戶理解。

Example 案例

案例一：Google Play商店

用戶需求：安裝應用

安卓設備上的 Google Play 商店中軟件名稱右下方的“INSTALL安裝”按鈕就是一個很好的案例。此按鈕放置的位置是軟件名稱的下方和右側，周圍的空白區域較大，是用戶視線最終會停留的位置，顏色是綠色與白色背景形成對比，且尺寸也很大，所以非常醒目 ，用戶一眼就能看見并點擊它。

案例二：12306官網

用戶需求：查詢火車班次并預定

12306官網的首頁的搜索火車班次的界面上就使用了強按鈕，橙色的長按鈕非常醒目，且位于信息的最下方，當一切信息輸入完畢后，用戶可以立即看到查詢按鈕并順利點擊進入到下一個頁面。

案例三：App Store

用戶需求：安裝軟件

用戶在搜索到軟件進入到軟件詳情頁面時，一眼就看到軟件名稱右方的藍色“獲取”按鈕，點擊它就可以安裝軟件，作為整個頁面唯一的動作按鈕它十分醒目，符合用戶的“Z”字形的瀏覽信息習慣，確保用戶能看到它，快速達到目的。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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