沒有難看的顏色，只有難看的搭配每一種顏色有其獨特的作用，令人產生不同的情感。合理使用色彩可以取得宜人的效果。
1、色彩由色相、飽和度、明度三要素構成
色相(Hue)
即各類色彩的相貌稱謂，如大紅、普蘭、檸檬黃等。色相是色彩的首要特征，是區別各種不同色彩的最準確的的標準。事實上任何黑白灰以外的顏色都有色相的屬性，而色相也是由原色、間色和復色來構成。
飽和度(Saturation)
飽和度是指色彩的鮮艷程度，也稱色彩的純度。飽和度取決于該色中含色成分和消色成分(灰色)的比例。含色成分越大，飽和度越高；消色成分越大，飽和度越低。
明度(Brightness）
明度是眼睛對光源體和物體表面的明暗程度的感覺，主要有由光線強弱決定的一種視覺經驗。明度不僅取決于物體照明程度，而且取決于物體表現的反射系數。
2、配色的基本認識
基本色環(Color Wheel）
按照光譜順序為：紅、橙紅、黃橙、黃、黃綠、綠、綠藍、藍、藍紫、紫、紫紅、紅和紫中間在加個中間色。在色相環的圓圈里，各種色調按照不同角度排列，則十二色相環每一色相距30度，24色相環每一色相距15度。
同一色
色相環中的任意色因明度變化而呈現的色彩。顏色混合是通過在色彩中加入黑、白、灰形成的。統一色調，色彩的純度和明度是具有共同性，明度按照色相略有變化。
同色系配色是指主色和輔色都在同一色相上，這種配色方法往往會給人頁面很一致化的感受
同類色
同類色又稱類似色。色相環原色起45度以內，含有較多共同的色彩元素的色彩，同類色指色相性質相同，但色度有深淺之分。
相鄰色
色相環中相距90度，或者相隔五六個數位的兩色，為鄰近色關系，屬中對比效果的色組。色相彼此近似，冷暖性質一致，色調統一和諧，感情特性一致。
相鄰色不同于同一色的枯燥乏味。稍微跳動的的色彩也一樣保持著設計的穩定性，還能起到強調單獨作品的作用
對比色
指色相環上色相對比較大、純度較高的任意兩色。對比色之間無過多的共性，對比效果強烈。當對比的兩色具有相同的彩度和明度時，對比效果越明顯；兩色越接近補色，對比效果越強烈。
主導的對比配色需要精準掌控色彩搭配和面積，其中主導色會帶動頁面的氣氛，產生激烈的心理感受。
補色
補色又稱互補色、余色，亦稱強度比色，就是兩種顏色(等量)混合后呈現黑灰色，那么這兩種顏色以定位互補色。色環的任何直徑兩端相對之色都稱為互補色
補色對比由于色彩過于沖撞，很少用戶傳統網頁界面，一般用于活動 banner，起到吸引用戶眼球的作用。
如果你寫過HTML和CSS，那么肯定熟悉RGB，三個字母分別表示：R(紅)、G(綠)、B(藍)。這種方式對電腦來說非常直接明了，也是電腦理解顏色的默認方式。對電腦友好并不意味對人類易用，這也是HSB誕生的原因。
HSB代表色相(Hue) - 飽和度(Saturation) - 明度(Brightness)，又稱HSV，是一種更人性化的顏色描述方式。為什么這么講？因為它與人們描述顏色的自然方法一致。
2、HSB色彩模式設置及優點
1)、比起 RGB 系統，HSB使用了更貼近人類感官直覺的方式來描述色彩 ，對于設計師來說更容易理解
HSB 的概念很接近色彩學所常使用的色彩空間模型，由于是由三個屬性所組合而成，因此常以色立體表示，
但由于我們常用的操作系統依然為二度空間的系統，因此在計算機系統的選色接口中常以不同的接口出現，我想其實大家都很熟悉，像是下圖為sketch中的選色器，可以看見一個全彩的色相條，和一個顏色的窗口，滑動色相條即可得到不一樣的顏色
2)、HSB可以更加科學地保證設計師所使用的不同顏色處于同一明度和飽和度，使用戶的視覺體驗感更好
也許你會覺得 HSB 并沒有比較簡單，但是實際使用過就會發現，它是多么的好用。例如下圖的男女比例的背景色塊，如果用RGB調色只能通過設計師的眼睛和經驗來調整他們是否處于同樣的色調中，但是用HSB來調色，保持S和B值相同，只需要滑動色相條即可得到完全一樣的色調，省時省力還科學
1、色調的分類
色調（color tone）是不同色相但是具有同樣亮度和純度的顏色進行的分組，
極淺vp（very pale）色調：
是純度最低、亮度最高的，干凈清淡的顏色，給人清的，柔弱的，女性的，年輕的，淡的，可愛的印象。
亮灰色lg（light grayish）色調：
純度低，中高亮度的色調，給人高貴、安定、古樸的印象和輕柔的感覺。
中灰色mg（medium grayish）色調：
低純度中亮度，具有濁，不起眼，古樸，穩健，安定的氣氛。
深灰dg（dark grayish）色調：
低純度和中低亮度，給人漂亮、安定、自然的感覺。
極暗vd（very dark）色調：
是純度和亮度都最低的色調，具有厚重牢固的感覺，給人非常暗，陰暗，厚重，堅固、男性的印象。
淺的pl（pale）色調：
中純度和高亮度的色調，給人干凈、淺、爽朗的感覺。
柔軟sf（soft）色調：
中純度和中高亮度，給人穩健溫柔的感覺。相比淺色給人感覺更安定。
晦暗dl（dull）色調：
中純度和中亮度的色調，給人安心高雅的感覺，一般說的中間色就是晦暗色調。
暗dk（dark）色調：
中純度和低亮度的色調，具有結實，成熟，古樸的色調印象。
亮It（light）色調:
高純度高亮度的色調，具有明亮、健康、活潑，年輕而穩定的印象。
強st（strong）色調：
高純度和中高亮度的色調，充滿活力，冗長，熱情，開放的印象。
深dp（deep）色調：
高純度和低亮度的色調，具有力量感和深度，給人深的，濃的，傳統的等印象。
活潑VV（vivid）色調：
高純度和中亮度的色調，較為鮮艷，鮮明，華麗，鮮艷，鮮活的印象。
2、色調配色技巧
同色相環配色技巧原理一樣，色調也有3種基本的配色技巧。
1）同色調的配色：
同色調的顏色幾乎沒有亮度和純度差，是比較容易統一和協調的配色。
2）鄰近色調配色：
具有一定的亮度和純度差但是差值不大，比較容易調和，容易傳達原有印象。有縱向鄰近、橫向鄰近、和斜向鄰近三種。
3）對比色調配色：
亮度與純度差很大，是極具張力的配色方法。是色調圖上相隔很遠的色調的配色。自由選擇色相，有亮度對比、純度對比、亮度和純度對比這三種配色方式。
推薦是三個比較好用的、簡單操作的配色網站，有需要的可以收藏
1、coolors.co
2、designspiration.com
3、materialpalette.com
除了醫療作用外，顏色還有一定的象征意義和社會屬性，對人類生活有著舉足輕重的影響。顏色心理學領域的佼佼者，美國羅切斯特大學安德魯.埃利奧特說，以前從來沒有人做過這種聯系。他表示：“顏色研究表明的是，我們的行為會受到我們沒有留意，習以為常的事物的影響?！?/span>
據國外媒體報道，人們常常認為，穿著紅色服裝是自信的表現。同時，科學家們也認為，運動員身穿紅色運動服更容易取得好成績。然而，英國羅徹斯特大學的安德魯·埃里奧特等人開展的一項最新研究卻顯示，紅色會抑制人們思維的活躍性。
埃里奧特和他的研究小組共對一些中學的高年級學生和部分大學生進行了四次研究。期間，他們向被測試者發放了一些用于進行智力水平測試的紙片——在各張紙片的右上角分別用紅色、灰色或綠色表明了序號。
結果，凡是所持紙片上用紅色標明序號的學生，其所獲得的智力水平評分均明顯低于那些手持灰色或綠色序號紙片的學生。先前的研究已經證實，人們在日常生活中所接觸到的顏色會對人的潛意識產生影響，只不過這種影響非常短暫。
埃里奧特教授認為，紅色首先會使人們聯想到錯誤和失敗。談到這一點，大多數人肯定都會想到老師在判卷時所使用的紅墨水。當然，有關禁止的信號通常也以紅色表示。而在自然界中，紅色則是一種警示色。隨后進行的另外兩項研究則證實，當受測試者眼看著紅色回答問題時，他們通常會選擇那些較為簡單的問題進行解答－－這是人們在面對困難時所選擇的最經典的方法。
與紅色相對的是，藍色能夠促進創新；黃色，則是最令人愉快的顏色，它被認為是愉快的象征，可以刺激神經系統和改善大腦功能，激發人的朝氣，令人思維敏捷。另外還有，橙色，是新思想和年輕的象征，令人感到溫暖、活潑和熱情，能啟發人的思維，可有效地激發人的情緒和促進消化功能。
賞心悅目的色彩能夠通過視神經傳遞到大腦神經細胞，從而有利于促進人的智力發育。在和諧色彩中生活的少年兒童，其創造力高于普通環境中的成長者。若常處于讓人心情壓抑的色彩環境中，則會影響大腦神經細胞的發育，從而使智力下降。所以，我們在平時日常生活中，正確的應用色彩心理學，改善生活環境色彩，讓我們的心情更舒適，思維更敏銳。
所以一定不要讓自己孩子在高考的時候穿什么紅色的外套，旗開得勝什么的，可能會影響思維活躍度，導致考試成績不理想
橙色稍稍混入黑色或白色，會變成一種穩重、含蓄又火熱的暖色，但混入較多的黑色，就成為一種燒焦的色；橙色中加入較多的白色會帶來一種甜膩的感覺。由于位于可見光的中低頻頻段,橙色在空氣中的衍射能力僅次于紅色，而其色感比紅色更暖，最飽和的橙色應該是色彩中感受最暖的顏色，能給人有莊嚴、尊貴、神秘等感覺，所以基本上屬于心理色性。歷史上許多權貴和宗教界都用以裝點自己，現代社會上往往作為標志色和宣傳色。不過也是容易造成視覺疲勞的色。
英國埃塞克斯大學做了一項研究顯示，綠色是很特別的顏色，在四季分明之地方，如見到春天之樹木、有綠色的嫩葉，大自然的顏色。在綠色環境中鍛煉能提高情緒、活力和愉悅感。也就是說，戶外鍛煉有益身心。
色彩心理學家早就指出，人們在高頻率顏色(如綠色，藍色和紫色)的環境下會產生平靜的感覺，而在中低頻率顏色(如紅色，橙色和黃色)的環境下更容易興奮和激動。這一現象可能是在人類進化的過程出現的。因為對于原始人類來說，綠色的環境意味著充足的食物和水源，對綠色的積極感覺在進化過程中融入大腦。
英國埃塞克斯大學的研究者選取十四名男大學生，要求他們在室內固定單車上騎行5分鐘，并觀看關于森林的紀錄片。隨后，研究者將視頻背景由綠色轉換為黑色、白色和紅色，讓志愿者在觀看這3種顏色視頻的同時，又分別騎行了5分鐘。結果發現，他們在觀看綠色視頻時疲勞感低，情緒也能保持愉悅；而觀看紅色背景視頻時，他們更容易情緒不穩。
紫色跨越了暖色和冷色，所以可以根據所結合的色彩創建與眾不同的情調。帶些紅色的深紫色可以產生一個暖色盤。淺紫色是較貴的，常常會聯想到浪漫。當結合玫紅色的時候，可以創建一個很女性化的色盤。一個比較男人的色盤可以使用偏紅偏黑的深紫色。泥土和自然的色彩可以結合紅紫色和淺褐色或者亮紫色+綠色。黃色和紫色是對比色，可以創建強對比度的色盤。
作者：木子淺談 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
我們已經或多或少看過一些優秀作品，也知道了一些設計方法和技巧，了解到了一些相關的理論知識，自己也做過一些項目或者是練習，總體來說都掌握了一定的設計能力；但是設計師想要擁有更多的資源（指薪資、工作機會等等）或者是想職業進階，除了一定的設計能力之外是遠遠不夠的，設計師還需要掌握更多的能力，才能讓自己成長提升，并且擁有他人無法取代的價值。我通過自己的經歷和整理收集，發現目前如今不同階段的設計師對待同一個問題不同的角度以及特征，如下圖所示：
不難發現，當大家還是初級設計師的時候，剛剛接觸設計行業，我們更多的是去觀察、學習、臨摹一些“好看”的作品，熟練地使用設計軟件和提升設計技法，最后的是自己做出來的產品是否漂亮美觀，最重要的是客戶/老板是否會買單，而自己無法清晰地定義自己設計的產品價值，也不能很好表達出自己的想法和觀點。所以產品走向會根據老板/客戶的水準來定義，輪到自己表達只是支支吾吾，最后只是做為執行無休止地改改改。一切由老板/客戶說的算，無法清晰地了解自己產品的定位，缺乏表達觀點的能力，缺乏一定的審美，作為執行角色無休止加班成為了初級設計師最大的痛點。
而經過一段時間的學習和工作后，逐漸轉型成為中級設計師后，有了一定的設計技法和軟件使用熟練度，有了一定的審美和視覺表現能力，平臺規模合作團隊也逐漸變大，基本能滿足老板/客戶/業務方提出的需求。開始學習一些設計相關理論，開始拆解自己或別人產品的交互架構，更多地開始關注用戶體驗起來，也會融入品牌元素到自己的產品當中，為自己的產品做情感化設計和制定設計規范，會組織一些專業語言和業務溝通以及陳述自己的產品。但是如何從眾多的設計方案中找到最優的方案來解決問題，如何更多地體現產品的價值，產品利益鏈如何形成商業閉環，如何在團隊/設計圈體現自己個人的價值，如何提升自己的個人影響力，成為了中級設計師這階段的痛點。
通過三年五年的沉淀，成為高級設計師后，形成了自己獨有的一套方法論和設計思維，能熟練地拆解每款產品和定義產品，視覺表現層已經完全能駕馭，能清晰地闡述自己的設計思路和結論，產品用戶體驗層也有了一定的經驗和方法，在團隊中或者設計圈有自己一定的個人影響力，更多地會在工作中思考產品帶來的社會價值和商業價值，會用不同的思維去思考產品的各個維度，找到最優的方法解決問題，會把固有的利益鏈轉換成商業閉環，提升用戶轉化率等等。而這階段的設計師的主要痛點就是面臨著團隊管理和溝通，朝著資深設計師和設計專家轉型，以及如何為平臺帶來的利益價值考核等等問題。
資深設計師或者設計專家這里不談，因為這階段所思考的問題大都和設計無關了。通過上述不難發現，每個階段的設計師都有各自的特征和痛點，雖然其中都包含著設計相關的能力，但是隨著階段的進階設計相關的能力占比逐漸變少，更多的是其他的能力增長，所以設計師除了設計以外其他能力的重要程度顯而易見，那么我們來看看除了設計以外，設計師應該掌握其他什么能力。
思考能力(Thinking)
思考能力作為首要的能力，不僅僅是設計師，其他職業一樣需要這個能力，這里所涵蓋的面太廣泛了也說不了，這里主要針對三點來講：核心競爭力、批判思維和分析能力。思考分為兩個層面：自我層面的和業務層面的思考；自我層面的思考就是要通過深度剖析自我，發掘自己處于哪個階段，有什么長處和不足，自己想要什么，需要往怎樣的方向發展；而業務層面的則是要需要思考業務產品的結構框架、用戶體驗、商業價值等等等等，前者更加關注自身的成長，后者更加關注業務的成長。
· 核心競爭力
核心競爭力就是有與別人不一樣的競爭力，想要做到別人無法替代你的地步，就要有自己個人核心的競爭力。如果你會做一張 Banner，我也會做一張 Banner，你會搞一個頁面，我也會搞一個頁面，那么你這個人就成為了可有可無的螺絲釘，唯一的優勢就是年輕能拼能熬，等你熬銹了老了，隨時可以換一顆新的螺絲釘來取代你的位置。所以不管什么階段，我們要深度剖析自己，認清自己的優勢劣勢，并采取相應的措施。
剖析自己的核心競爭力給大家一個大致思路，從異樣性和共通性入手。自己周圍或多或少有團隊，條件不足的話現在網絡各大平臺都很發達，也能融入一些設計圈子中，和不同的人對比尋找自己的核心競爭力。異樣性是當前的優勢，找出其中的優點，不斷地放大深造，變成你的核心競爭力，而和別人不一樣的缺點找出來摒棄改正；共通性就是和大家一樣的地方，可以看作是偽劣勢，因為諸多共通性中總有你最喜歡最擅長的一個，將它單獨拿出來不斷擴大，逐漸就拉開了差異性，慢慢就轉化成你的核心競爭力了，而大家都有的缺點，你把它糾正了，就成為你的核心競爭力了。
來舉一個栗子：小王是一名工作了3年的設計師，研究生畢業，由于公司的原因平時工作最多接觸的就是一些運營圖 banner，也有過很多品牌 VI 的經驗，逐漸自己在視覺表現上有自己一定的見解和想法，也更加感興趣做視覺表現的東西。
那么他的共通性就有：1.工作3年之久；2.研究生畢業；3.視覺表現能力強也更感興趣；4.做過品牌 VI 的經驗；5.有自己的見解和想法。
由此推斷出小王的共通性是：1.工作經驗豐富；2.視覺表現力強；3.有想法和見解；
異樣性是：1.學歷優勢；2.品牌 VI 相關經驗
那么小王可以保持自己學歷優勢下，可以繼續深造品牌 VI 相關，逐漸轉型成為高學歷的品牌 VI 設計師，那么學歷和很多品牌 VI 的經驗就是小王的核心競爭力；也可以通過熱愛去學習 C4D 動效等軟件繼續增強自己視覺表現力，配合自己豐富的工作經驗逐漸轉型成高學歷的創意藝術設計師，然后通過將自己的想法見解通過分享會、文章等模式產出，將這一點升級成個人影響力，那么綜合下來更加優秀的視覺表現力、豐富的工作經驗和個人影響力也會逐漸變成小王的核心競爭力。
只有通過不同維度深度地剖析自己，找到自己的共通和異樣點，清晰自己的價值定位，然后制定出適合自己成長目標和方案，不斷放大增加自己的核心競爭力，成為不可取代的那個人。
· 批判思維
批判思維是一名設計師必須具備的思維能力，我們不僅僅要學會批判別人的作品，還要學會自我批判。這里不是指無腦的批判（之前遇到過一個實習生剛進到公司里，就把之前所有人做的東西全部批判了一遍，重點是只說產品好看與否，完全不顧及平臺一致性商業價值用戶體驗等等，最后只批判卻沒有任何實質性的建議，頗有一種指點江山的感覺，然后后面再也沒見到過他了），這里是指在自己通過批判別人或自我的方案，不斷地優化糾正，最后產出最優質的方案，這是批判思維的出發點。
不同的人有不同的經歷，看待問題的維度是多種多樣的，所以一個方案產出后，通過不同的人思考后的結果是最好的解決方案。這也印證了波克定理：只有在爭辯中，才可能誕生最好的主意和最好的決定。所以當設計師接到產品交互給到的原型圖后，不要上手就做圖，要通過自己經驗和想法去看待原型圖，然后提出更加優質的方案進行討論，如果你的方案更加優質，那么不僅是產品的質量得到了優化，你個人的經驗也得到了沉淀，下次遇到相同的場景就可以拿出來復用，直到遇到更好的方案。
唯一注意的事項就是注意溝通的方法，這里后文會提到，比你資歷高的人提出的觀點更加具有建設性，在毫無頭緒沒有創新的情況下就聽比你更有經驗的人的；遇到比你資歷低的人提出的觀點也不要嗤之以鼻，抓取其中有用的點，沒準是一個新的思維方向；總之，有數據說數據，沒數據舉案例，沒案例講觀點，如果連觀點都沒有的話，照著大佬說的話做就是了。
· 分析能力
分析能力也是設計師必須掌握的能力之一，無論你是創意藝術設計師，還是用戶體驗設計師，譬如一張 Banner 氛圍傳遞或者文案排版，譬如插畫的配色或者場景搭建，譬如產品的布局結構或者用戶體驗，這些都需要有一定的分析能力。通過拆解改版/競品/參照產品等，明確產品的最終目的、商業價值等等，有了這些準備后才能對自己的產品進行設計或者改版。而分析產品可以以用戶體驗五要素的角度來分析，分別是：戰略層、范圍層、結構層、框架層和表現層，具體相關的文章站酷、PM 社區、36氪等等都搜的到，這里不再細說；之前在分析產品的時候發現有些產品強行套用這五個要素進去不適用，因為有些產品的頁面它不存在戰略層或者范圍層的東西，所以我總結歸納了三個角度來分析產品。
案例就用淘搶購 v4.1 頁面（已上線）來講，三個角度主要是：表現層、用戶體驗層和價值層。表現層主要就是產品頁面的配色、布局結構之類的；用戶體驗層就是產品的心智透出、交互流程之類的；價值層就是產品深度的價值體現了，比如商業價值、社會價值和用戶留存率之類的；大致可以套用這個公式去思考：為什么這里會用這種表現形式，它想要表達怎樣的效果，它要達到怎樣的最終目的，如果是自己去設計會怎樣做。舉例：因為淘寶規范為卡片式設計，在視覺表現上要統一，所以淘搶購 v4.1 的業務目的是統一視覺樣式，并且它需要給用戶產生一種“商品很便宜快去搶購再不搶購就沒了”的心智認知，它的最終目的是引導用戶去商品 Detail 頁面購買商品和提高商品的點擊率，這樣通過協調關系形成平臺、商家和用戶之間的利益鏈商業閉環。
想要提升自己的分析能力除了項目和時間的沉淀外，更多的時候需要自己平時的積累，站酷等平臺有很多優秀的作品，作者會把自己設計的分析和思路寫出來，我們可以看看別人的想法是否值得借鑒，然后再去分析一下，最后思考如果是自己的話會怎么去做；其次做設計的時候帶著同理心去做，把自己當作用戶去看待自己的產品，通過不斷的積累提升自己對產品的敏銳度，將一些產品的隱性問題挖掘出來；另外可以多看一些好的設計分析書，比如《U一點料1、2》、《以匠心 致設計》等等，將學到的分析方法代入自己的產品或作品中，逐漸分析能力就增強了。
規劃能力(Plan)
規劃能力是日常工作生活中所需要掌握的能力，主要講業務規劃和職業生涯規劃，業務規劃能力應對的是我們工作中處理業務所需要具備的能力，而職業生涯規劃應對的是我們整個人生職業生涯規劃的能力。掌握這個能力后前者會給我們帶來業務處理效率上的提升，后者給我們帶來整個人生有益的好處，所以這個能力非常重要。
· 業務規劃
很多時候我們還在有條不紊地處理某個需求，心想著下班去吃個飯買水果回家洗澡睡覺的時候，突然來了一個緊急的需求，就把我們整天的計劃給打亂了，火急火燎地處理完這個需求，然后又把之前的需求做了，最后加班改改改導致整個計劃泡湯了。工作中遇到這樣的情況很多很多，處理方法有很多種，最經典的就是四象限法則，把事情的緊急重要程度分為：重要且緊急、緊急不重要、重要不緊急和不重要且不緊急四個象限。
很多時候都是道理我們都懂，可是一遇到情況依舊手忙腳亂，根本原因是沒有認真地把它代入自己的工作生活當中。畫一個象限表，把自己今天所要處理的事務陳列出來五分鐘都不需要，一開始可能因為事情不多就沒堅持下去，一旦養成習慣后，將來遇到多種緊急情況突發的時候就能認識到這個習慣給你帶來的好處了，所謂養兵千日，用兵一時就是這個道理。
在做業務需求的時候，可能會碰到有些需求價值高，有些需求價值低但又很緊急，不知道怎么處理之間的關系，我們依舊可以套用四象限法則來制定一個四象限表：價值高且緊急、緊急但價值低、價值高不緊急和價值低不緊急。什么是價值高的需求呢，就是能讓你有充分思考和分析的需求，比如某個頁面的改版；價值低的需求則是相對不怎么需要思考和分析的需求，比如根據已有的規范改個顏色之類的。在時間的優先級前，價值高的需求大于價值低的，最后剩下的就是價值不高且不緊急的。因為我們無法拒絕需求，需求來了肯定要是做的，工作不是愛好可以有多種選擇性，但我們要學會將需求分解成不同類型的，對自己有成長沉淀的需求那可以作為最高優先級去處理，留夠充裕的時間去思考分析，然后沉淀經驗穩定提升。
· 職業生涯規劃
這個在大學期間就學過相關的課程，只不過當時并沒有太深的感觸，而是等工作以后才知道這項能力的重要性，它相當于關系著你每個階段的里程碑，當成游戲中的成就任務也不為過，還是自己設定的成就任務。某個階段想要達成什么樣的目標，想要獲得怎樣的成就，都是要自己一步一步慢慢規劃并且完成出來的。
因為我遇到過幾個非常努力的人，努力到讓人心悸的地步，每天除去吃飯睡覺工作時間就是在努力學習，到最后還是很迷茫，不知道做什么，不知道如何體現自己的價值。這類沒有目的的努力的人是很可怕的，他們努力得沒有錯，但是這樣下去沒有成效的努力會讓他們覺得努力并沒什么用，然后逐漸開始產生抱怨、泄氣和放棄等負面情緒。
舉個例子來說明：如果你剛畢業，給自己制定的長遠的職業生涯規劃是在工作3～5年后進到大廠工作提升自己，那么所拆分下來就需要一些項目工作經驗和優秀的作品，再拆分下來就是如何做出優秀的作品，細分到最后就是作品當中的元素，比如圖標排版布局之類的，那么就制定一段時間內的練習就按照各類元素去做，比如圖標畫兩個星期，APP 設計排版布局練習兩個星期，插畫練習畫兩個星期，這樣堅持下來就組成一個完整的項目作品了，以此類推。有了規劃目標并且在自我驅動的推動下，逐漸實現自己的職業目標。
設計師要如何培養自我驅動可以看我之前的文章：
淺談設計師的自我驅動
https://www.zcool.com.cn/article/ZODEzMTky.html
執行能力(Execute)
執行能力是指自我在工作&學習中執行的能力，執行能力為一個設計師最主要的核心技能，一切的能力都凌駕于這個基礎之上；哪怕你再能說會道，能賦予你的設計各種價值，能給予你的設計各種環境，但這些都是第二步，第一步就是你的設計表現達到期望值，如若第一步稿子都不好看，那么沒人愿意會聽你敘述的。前文已經提及到了，設計師在初級至中級階段的時候大多數注重的就是表現手法，如同學說話一樣，表現手法可以看作是漢語拼音，然后才是組成一個個字，最后組成一句完整的話語。
· 自我執行力
提升自我執行的能力我大致分為兩個步驟：看和做。
首先先來說看，看其實是提高自己審美的一個過程，通過看一些平臺網站的優秀設計作品，久而久之自己的審美能力才會提高，然而看分下來一種是帶有目的性和不帶有目的性的。不帶有目的性地去看是在自己有空余或學習時間，通過瀏覽設計網站采集學習一些你覺得好看的作品；采集是一個很好的習慣，我覺得是每個設計師必須養成的習慣，把自己平時覺得好的表現形式收集起來，等到某一天需要用到的時候，腦海中對當前場景會有一定的印象，再根據印象去尋找采集到的作品，能很大程度上節省自己腦爆的時間，哪怕沒有采集或者文件丟失，自己的腦中大致也會有一個雛形方向。而帶有目的性地看是指針對某一個模塊去搜集整理，比如今天我需要做一個關于內容的模塊，那么我就會去尋找一些做內容的產品設計，搜集到的各類關于內容的表現手法，然后結合自己的經驗和分析，找出最適合自己產品的一種。
僅僅看是不夠的，在看過之后我們需要動手嘗試才能算真正地沉淀自己所看到、學到的東西。做設計最忌諱的就是“眼高手低或者眼低手高”這種狀態，有了審美但表現手法跟不上，或者說表現手法有但是審美跟不上。一定要在自己吸收了一定的審美后，通過自己的嘗試去做出來，才能真正的沉淀到自己的大腦當中，變成自己的表現手法之一。最后通過大量的積累，結合對商業需求的判斷形成設計策略，才能從容應對不同的產品需求，哪怕你今天做金融相關的產品，還是明天做電商的產品，后天又改做工具類產品，一旦形成了自己不同的應對策略，才能做到真正意義上的游刃有余。
很多時候我們只關注到魚的大小、魚的肉質是否鮮美那20%層面的東西，往往忽視了80%最重要的捕魚技巧和方法；看到的只是產品是否好看，交互是否流暢，體驗是否良好，沒有往更深層次地去想這個產品的商業背景是什么，設計師為什么要這樣設計，如果換做自己的話會去怎么做；畢竟我們所做的一切訓練、思考都是為了更好地為工作服務，就如同脫離了商業背景以后，有些設計就只是單純的炫技，并沒有解決問題的價值，而設計師的工作核心就是解決問題，所以我們要結合作品的背景、價值等因素，去看、去做、去學相應的表現手法才是自我執行的核心所在。
表達能力(Express)
表達能力是設計師除去執行能力外第二重要的能力，小到平日里的溝通對接，大到述職晉升面試，都離不開表達能力的支持。有些設計師經常面試怎么都過不了關，我本以為是作品集的問題，可是看完之后作品方面完全沒有什么問題，具體了解后才知道是在面試過程當中不知如何闡述自己的作品和思路或者在闡述過程中由于緊張等因素導致表達斷斷續續不順暢，面試官就會覺得這個人不靠譜然后 PASS，明明做圖很優秀卻輸在了表達上，這種情況就很憋屈。在廣告公司中，一個 LOGO 或者廣告視頻往往只是贈品，出售的卻是這個品牌VI的故事；如果一個設計師不懂得怎么闡述自己的業務，不懂得怎么推銷自己的方案，不懂得拓寬自己的個人影響力，就單純的只會執行作圖的話，那么這名設計師是不合格的。網傳有一個段子“一個公司的工資排名規律：用 Word 的不如用 Excel 的，用 Excel 的不如用 PPT 的，用 PPT 的不如講 PPT 的，講 PPT 的不如聽 PPT 的，聽 PPT 的不如聽匯報的，聽匯報的不如決定的，決定的不如簽字的”，由此可見表達能力在職場中的重要性。
· 業務表達
業務表達是指在自己工作的過程當中，對自己的設計方案進行闡述。大部分設計師會遇到一個困擾，當設計稿做完以后就不知道怎么去表達自己的設計理念，被業務方/面試官/老板提出質疑時，比如：“你這產品的設計為什么要用紅色？”、“聊天信息這塊兒為什么要用小氣泡的樣式？”，往往不知道怎么去說，有一種當時就覺得好看所以這樣做了，也沒有去想那么多的感覺，或者其他優秀的作品/競品是這樣做的，我也就這樣做了；那么結果往往就是自己的專業性遭到質疑，然后轉變成業務方/老板進行設計主導，形成“改來改去還是第一版好”這樣類似的惡性循環中。
那么如何提升自己的業務表達能力呢？首先設計師要提升在設計領域的專業度，通過學習吸納設計相關的知識，然后代入自己的設計當中去試著闡述設計稿，準備工作先做到位，收集相關的數據，掌握相對應的設計理論，先說服自己再去說服別人。比如：“通過色彩心理學得知，紅色能帶給人興奮、激動、熱情等積極情緒，而我們產品所需要透出的氛圍是熱情的、積極向上的，相對應地激發出用戶的正向情緒，所以我這里使用紅色。”、“根據近半年數據研究得出，產品聊天信息模塊使用過程當中女性用戶占總用戶數的85.9%，而小氣泡樣式相對比其他樣式更能迎合女性用戶群體的喜好，通過 A/B 測試結果得出，使用小氣泡樣式后數據上漲了15%左右，所以聊天信息模塊整體改版成小氣泡的樣式?！?
通過自己前期的準備（設計理論知識補充、用戶調研、數據測試等），將自己的設計理念表達出來，主導整個設計的方向，必要時可以理性地堅持自己的設計方案，畢竟無論是老板還是業務方，出發點都是希望自己的產品能做到最好最完善，只要你給出數據支撐和專業性的建議，他們一定都會采納接受的，而最后你的能力和專業性也得到了對應的認可。
· 書面表達
我本人是強烈建議在能力達到一定程度的時候，通過寫作來檢視自己成果的。因為往往很多東西自己是明白的，但是寫出來讓其他人看懂是另外一種能力了。自己一段時間的職業經驗總結、對設計的見解看法、自己獨特的設計思維、一本書的讀后感等等都可以通過書面表達出來，某個知識理論難的不是學習，而是將它教授出去，因為只有你想要把某件事說明白，闡述得其他人都能看懂，那么首先你要對這件事理解得很透徹，然后通過自己的經驗和見解，轉化成通俗的語言說給別人聽。最好的狀態就是與你同樣級別的人你能與他用專業術語對話，級別比你低的人你能把理論轉換成他能聽懂的語言進行交流，這樣才算是對理論概念理解透徹到位。
大家也明白，學習最有效的方法不是輸入而是輸出，設計也是一樣的。在學習某種理論方法后，通過書面表達出自己的見解和想法，并代入到相應的例子當中，做到舉一反三才能算是真正的學到了這個知識點。
· 述職
述職一般出現在晉升報告或者面試當中，“諸侯朝于天子曰述職，述職者，述所職也?！笔雎毧梢哉f是工作報告中的總結性報告。向自己的老板述職是為了升職加薪，向面試官述職是為了獲取更好的工作機會；工作成果有了，但是述職做不好的話，在老板/面試官眼里你就做了無成效的工作，述職沒有想象的那么簡單，但是也沒有那么難，很多人都會經歷兩個述職的誤區，這些誤區我經歷過也看到過，所以總結出來警醒大家。
一、把述職當作流水賬
把述職當作流水賬是很多新人容易犯的錯誤，當述職的時候，有的人就會陳列出自己今年做了多少多少工作：“我今年改版了 XXX 模塊”、“我設計了 XXX 的首頁”、“我通過調查研究自主推導改版了 XXX 模塊并落地成功”等等，這時候你的老板/面試官會心里會想：“所以呢？”“然后呢？”，工作結果固然重要，但是決定你能否晉升/錄用的，不僅僅是把你做的工作進行流水賬般的描述就夠了的。
二、把述職當作邀功大會
這個誤區相對來說更高端一些，述職的時候有的人常常會像邀功一樣：“我今年通過改版了 XXX 模塊，導致用戶量從50%上漲到了80%”、“通過調查研究改版了 XXX 模塊，最后通過 A/B 測試發現數據上漲了5%，最后落地全部實施新的設計方案”，這些看似闡述了產品的背景、自己做了什么以及結果，但是往往來說還是不夠的，以上統統可以歸為無效述職。
你做了什么重要嗎？沒那么重要，重要的是你帶了什么樣的價值。述職所需要你做的，老板/面試官所想要了解的就是：分析為什么產品之前數據會那么低？你是通過那些方法得出解決方案的？為什么那么多種解決方案里你要選擇這一種？你這樣的方法能否沉淀成體系？如果換一個人來按照你的方法做是否可以得到同樣的效果？有效述職也就是決定你能向上一步的，是把你在工作中的感性認知上升到理性規律的歸納總結的能力體現。
· SCQA模型
SCQA 模型是一個“結構化表達”工具，是麥肯錫咨詢顧問芭芭拉·明托在《金字塔原理》中提出的，而這個模型可以套用在業務表達、書面表達以及述職任何場景當中；S是指場景(Situation)，C是指沖突(Complication),Q是指問題(Question)，A是指解決方案(Answer)。
無論你是在向業務方/老板闡述方案做工作匯報，還是自己寫作梳理都可以用到這個模型；S場景陳述的通常是大家都熟悉的事、普遍認同的事、事情發生的背景。由此切入既不突兀交代了事情背景又容易讓大家產生共鳴，產生代入感，然后引出沖突C。Q是其中發現的問題，最后A給出相對應的解決方案，是對Q的回答也是接下來我們要闡述的內容。整個結構其實是形成良好的溝通氛圍，然后帶出沖突和疑問，最后提供可行的解決方案。
我們熟知的廣告詞經常使用這個套路：
得了灰指甲——描述場景【S】
一個傳染兩——發生了沖突【C】
問我怎么辦？——提出問題【Q】
馬上用亮甲！——給出解決方案【A】
這個模型無論作為演講的開場白，作為向業務方/老板闡述設計方案的開場，還是作為一篇文章的序言都是屢試不爽的。S場景需要讓對方產生共鳴，必須讓對方產生一種：“是的，你說的好有道理”的反應，只有場景被認同了才能繼續故事的發展，這時候打破你給對方營造的安全感，制造C沖突，相繼提出Q問題，共同確認面臨的一個問題，然后你給出你的A解決方案，而這個解決方案就是你整個敘述的核心和中心思想。
比如你要向業務方/老板闡述你的設計方案，就可以這樣來描述：“在 XXv2.0 版本上線后（交代場景），收集了近半年以來的數據發現，女性用戶相對減少了20%（發生沖突），為什么會減少20%的女性用戶（提出疑問），根據我的調查研究發現原因是改版后整個產品色調偏男性化，由于我們產品的受眾群體大多是女性用戶，男女比例為1:3，所以在 v.2.1 的改版中我將整個產品色調改為偏女性化的方向（給出解決方案）”。
同樣，我寫這個章節的思路就可以這樣理解：設計師們工作中通常會面臨述職、面試以及寫文章等情況（交代場景），但是往往很多設計師不知道如何去表達，思路也不是很清晰，導致述職無效、面試失敗等情況（發生沖突），要如何避免這種情況發生？如何鍛煉自己的表達能力？（提出疑問），那就要多通過 SCQA 模型在生活工作中去練習表達（給出解決方案）。
生活能力(Lives)
最后是生活能力，設計不是工作的全部，工作不是生活的全部，我們應該過好自己的生活，產品設計都是從生活中獲得靈感和啟發的，我們如何對待自己的生活，我們就會得到怎樣的反饋。多陪伴下自己的家人、培養一個興趣愛好、保持學習新鮮事物的動力等等，成為一個有趣的靈魂。往往設計師能從多樣化的生活中發現靈感和啟發，也能從生活中找到不同用戶的痛點和感知；如何做一名好的設計師，就是帶著同理心去做設計，如何帶著同理心做設計，就是將自己當作用戶，而用戶是融入到生活中的。下面我就來例舉兩個通過生活中的啟發改變產品設計的例子。
· 用戶擁有感
在購買星巴克的時候，為什么服務員要把顧客的名字寫在杯子上呢？難道僅僅是為了分辨嘛？像其他奶茶店一樣貼一張打印好的便簽不就好了么？去宜家購置家具的時候，為什么要讓顧客自己親手組裝家具？可口可樂為什么可以定制自己城市的易拉罐？因為這一切都是要給用戶塑造擁有感，人是一種很不理性的生物，只要先拿到一個東西，就會覺得自己擁有這個東西，就不想放掉它了，這就是擁有感最根本的示范。從心理學的角度來說這被稱為稟賦效應，意思就是我們對于自己所擁有東西的價值往往會看得更重。這就是為什么小時候玩的玩具、收集的畫冊、穿的衣服都已經沒什么用了，我們還要留著當紀念的原因。因為我們的人性對于擁有感非常執著，對于自己得到的東西非常迷戀，當我們覺得要失去它的時候，會有一種損失感，覺得很不舍，會覺得心里很難受，這就是稟賦效應在我們身上發生了最明顯的效果。
而這樣的營銷策略被用到產品設計當中，例如前段時間很火的軟件 Zepeto，每個人都不一樣的生成圖片洗刷著我們的朋友圈；例如每年年末的賬單、網易云音樂總結等等，賬單它只是一份賬單，根據不同用戶生成不同的賬單，也就賦予了不同的意義；又例如各種 H5 性格測試生成的分享卡等等，這些都是產品設計中從生活中營銷案例中汲取經驗的體現。
· 線下導購轉線上
每當我們去到商場線下商店的時候，導購員和我們素未謀面，但是卻可以通過我們的大致年齡、穿著、性別等因素推斷我們需要什么樣的產品，然后向我們推銷對應的產品，如若剛好觸動我們的需求，于是我們就會發生購買這個行為。生活中線下導購的方式也被運用到線上導購的產品中，同樣平臺和用戶素未謀面，可是可以通過掌握大數據，分析用戶近半年、近一個月的購買和瀏覽商品的數據，結合相對應季節等因素推送給用戶所需要的產品。比如我平時經常瀏覽一些潮牌個性的衣物，現在正值冬季，想買一件冬季穿的棉衣，那么當我打開淘寶的時候，系統會推送一些潮牌大衣等冬季衣物在首頁，我正好有這個需求又符合我的口味愛好，自然而然就會點進去購買了。
有一條創業準則是這樣說的：“如果有點兒閑錢，還有點時間，但又找不到商機，最好的辦法就是去鬧市、電梯、小區人流量最高的那個大門口，端杯茶，靜靜的聽人們抱怨?！保雀?、蘋果公司的設計思維首當其沖的就是帶著同理心去設計、去制定設計策略，同理心來源于生活，而這一切只有設計師把自己的生活經營好，才能從當中獲得啟發和感悟，然后代入自己的設計理念當中，設計出真正能根本解決問題的產品。
其次偶爾會從網上看到或者聽說 XX 設計師猝死，XX 設計師檢驗出 XX 疾病等等，每每看到此類消息都會感到痛心，工作不是生活的全部，如果連自己的工作和生活都處理不好的話，那么說明這個人生活能力真的很糟糕。如果一個人整天筋疲力盡打不起精神，那么他的工作會做得好嘛？所以在這請求大家合理安排好工作時間，勞逸結合，多鍛煉身體，多花些時間陪伴父母、家人，這樣才能帶著健康的身心去工作，從而取得更好的工作成果，形成一個良性的循環。你怎樣對待生活，生活就會怎樣對待你。
作者：雨灰 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
標簽欄也叫Tab Bar，是移動端應用程序中最常用的UI元素之一。標簽欄出現在應用程序屏幕的底部，可以讓用戶在應用程序中的不同部分之間快速切換。標簽欄可以是半透明的，也可以具有背景色，在所有屏幕方向上都保持相同的高度，并且在顯示鍵盤時被隱藏。標簽欄可以包含任意數量的標簽，但是可見標簽的數量根據設備的大小和方向而變化。如果由于水平空間有限而無法顯示某些選項卡，則最終的可見選項卡將變為“更多”選項卡，該選項卡將在單獨屏幕上的列表中顯示其他選項卡。
標簽欄在任何目標頁面中的高度是不變的，iOS 規定它的高度為98px(iOS @2x)。但因為 iPhone X 之后的全面屏手機引入了 Home Bar ，所以在進行界面適配的時候，請務必要加上 Home Bar 自身的68px高度。別讓Home Bar遮擋標簽欄中標簽的展示，這會讓兩個控件發生操作手勢沖突。
史蒂文·霍伯（Steven Hoober）在對移動設備使用情況的研究中發現，人們會根據自己的設備，需求和背景以多種方式觸摸手機，觸摸手機屏幕或按鈕的用戶分三種基本方式：抱著手機的人占36%、兩只手使用手機的人占15%，而49％的人依靠一只手在手機上完成事情，除此之外75％的用戶僅用一個拇指觸摸屏幕。
在下圖中，出現在手機屏幕上的圖表是近似覆蓋圖，其中的顏色表示用戶的拇指可以接觸到哪些區域以與屏幕交互。綠色表示用戶可以輕松到達的區域；黃色，需要伸展的區域；紅色區域，要求用戶改變握持設備的方式。
這意味著：
將常用的“行為”放在屏幕底部很重要，因為只需一鍵式的交互即可輕松到達這些“行為”。
底部標簽欄設計應當遵循三大原則：結構合理、位置清晰、可預測行為。
為了讓標簽欄表現清晰，兩大平臺在規范里都對標簽數量給出了相同的建議：建議標簽欄內的標簽個數為3個至5個。因為標簽過多會使每一個單元標簽的可觸空間降低，人們在物理上（手指）難以點擊或誤觸，除此之外還會增加應用程序結構的復雜性。
注：如果你因為產品結構非常繁雜，標簽數量想要達到更多，那么在 iOS 中就會給你強硬處理，iOS 人機交互規范告訴產品設計者們：標簽欄雖然可以包含任意數量的標簽，但可見標簽的數量會根據設備的大小(平板或手機)和方向(豎屏或橫屏)而自適應變化。如果由于水平空間有限而無法顯示某些標簽時，最后的一個可見標簽將被會被系統強行轉換為“更多”選項，需要用戶點擊“更多”選項之后，系統才將在單獨屏幕上的列表中顯示其他被隱藏的標簽。
“我在哪里？” 是用戶成功導航所需要回答的一個基本問題，我們應當采用適當的視覺提示讓用戶知道目前所處的位置（選中狀態）。在APP應用中我們常見的處理方式有4種：改變圖標樣式、改變大小、改變顏色、改變展示樣式。它們并不一定是獨立存在的，可以同時作用于一個標簽。
選取每個底部導航選項都有通向它的目的地，底部導航應當將用戶直接引導到相關頁面，不應該打開菜單或其他窗口。如果在某些情況下可以使用標簽，但在其他情況下則無法使用，則應用程序的界面將變得不穩定且不可預測。我們要確保所有選項卡始終處于啟用狀態，并說明為什么選項卡內容不可用。例如造作新家APP，當用戶處于未登錄狀態時，就不能查看底部標簽“我的”信息，當我點擊標簽“我的”，就會彈出快捷登陸界面，這樣就能讓用戶明白不能使用的原因是賬號未登陸，從另一層面講也很好的引導了用戶注冊與登陸。
注：不要使用標簽欄為用戶提供對當前屏幕或應用程序模式下的元素起作用的控件，如果需要提供控件，請使用工具欄。
在設計標簽欄前我們首先要了解它的基礎規范，在保證基礎規范合理的情況下再去進行設計。
為了保證圖標的尺寸大小一致性，我們往往會建立基礎的網格尺寸來進行繪制圖標，下面就以常用的24x24為大家舉例：
網格包含2px出血位。這樣可以確保圖標在導出時將保留其所需的比例和周圍的空白區域，同時還能夠很好的平衡圖標的視覺重心。
最后加入圖標的keyline，keyline由圓形，正方形，矩形，正交，三角形和對角線組成。它可以為您提供圖標集中基本形狀或比例的一致大小。這使創建視覺上的穩定變得更加容易，并有助于在設計相似比例的圖標時有共同的參考準則。
在24尺寸下的keyline構成如下（24尺寸下的出血區域為2）：
當把圖標畫在網格上時可以很好的規范圖標，讓它們從整體的視覺上看著統一規范。
標簽的數量以及標簽的展示形式決定了標簽的布局形式，標簽的常見布局一共有2種：屏幕等分、圖標左右間距相等。
屏幕等分是最常見的標簽布局形式，因為不管它存在多少圖標，都可以用它進行屏幕劃分，計算方法也十分簡單，屏幕的寬度除以標簽個數就是每列寬度。采用此等劃分的案例有：懂車帝、今日頭條。
圖標左右距離相等多用在標簽數量為3個的情況下，計算方法是先去除中間圖標的尺寸，然后再左右平均劃分等距。相對于屏幕等分，圖標左右間距相等劃分更為緊湊。
根據菲茲定律，使用指點設備到達一個目標的時間，與當前設備位置和目標位置的距離（D）和目標大?。⊿）有關。標簽欄作為向用戶展現產品框架的關鍵控件，熱點區域（可點擊區域范圍）的設定一定要合理。底部圖標尺寸較小，如果將圖標作為熱點區域，那么可點擊區域就偏小，很可能出現用戶點擊不到的情況，正確的做法是以標簽欄的布局作為基礎設定，在標簽相鄰的部分劃出一定區域作為不可點擊區域，以免用戶誤操作，參考如下，紅色為可熱點區域，藍色為不可點擊區域：
在產品設計中，不同樣式的圖標會給人不同的感受，隨著APP風格越來越簡潔化，標簽欄圖標風格緊緊地跟著界面的風格而改變。經過長時間的沉淀，標簽欄圖標常見的默認設計樣式一共可分為四類：線性圖標、面性圖標、線性+面性圖標、輕質感圖標。
線性圖標通過線來塑造輪廓，在圖標設計中使用的線有粗細之分，常用的App圖標設計線的粗細一般有2px、3px、4px，不同的線條粗細所帶來的視覺感受也不同，我在“如何讓你的圖標具有說服力”文章中提到過，線條越粗那么圖標的性格就越活潑、粗曠，線條越細圖標性格就越精致、商務，圖標使用描邊的粗細可以根據產品的氣質來決定。
選中狀態：當選中狀態為高亮線性圖標時，選中狀態的圖標顏色會與默認狀態的圖標顏色形成較強的反差，但由于線和線的差異性并不強，線性圖標沒有面性圖標更具吸引力（引導性），即使加入了高亮色識別度也不及面性強。airbnb在處理線性圖標選中狀態時就考慮到了這一點，選中狀態下不僅對圖標的顏色做了較大變化，還加大了圖標及文字的描邊粗細，從一定程度上加強了圖標的引導性。（注：線性狀態的圖標選中狀態也可以變為面性圖標或線性+面性圖標）
面性圖標是通過面來塑造形體的圖標，采用了剪影的設計形式，通過線或者面去切割基礎輪廓面，通過分型來塑造圖標的體積感，面性圖標的承載信息相對與線性圖標來說更重，更具有引導性。
選中狀態：面性圖標的選中狀態為高亮面性圖標，顏色可以為純色、也可以為漸變、透明。愛奇藝的選中狀態就采用了高亮面性圖標的展現方式，除了把圖標底色及文字的顏色加深以外，還加入了品牌色，甚至為了讓“會員”標簽更加突出，還單獨對“會員”標簽的顏色進行了修改。
線面結合圖標相較單一的線性圖標或單一的面性圖標樣式更加豐富、也更富有趣味性。從設計的角度上說，由于元素的多樣化，設計更容易獲得好的效果。相反，如果運用不當會顯得圖標非常雜亂，如何有效的把控好兩者之間的過度是關鍵。
選中狀態：線性圖標的選中狀可以為高亮的線性+面性圖標。懂車帝在處理標簽選中狀態時就把圖標底部加入了高亮黃色圓形塊狀，即保存了線性也添加了面，加深了選中狀態的視覺重量，更加明確的讓用戶感知自己所處的位置。
輕質感圖標層次簡單，用色素雅干凈，采用輕投影、輕漸變的方法設計，這類圖標具有一定的立體感，能給人輕盈、簡潔、精致的感覺。輕質感圖標在標簽欄中運用的較少，在特殊情況下才會使用，例如盒馬，就把輕質感圖標用在了首頁標簽與盒馬小鎮標簽，首頁標簽的引入是為了讓用戶加強對品牌形象的認知，而盒馬小鎮標簽的引入則是為了加強圖標的引導性。
*圖標樣式的常用變化（選中與未選中）
在我調研上百種應用程序中，發現主流的APP標簽欄樣式變化大致分為六種：線性-線性、線性-面性、線性-線+面、面性-面性、面性-線+面、線+面-線+面。雖然標簽的樣式變化繁多，但是使用率最多的是“由線性轉面性”標簽。
標簽欄的不同展示形式會給用戶帶來不同的使用習慣和使用感受，常見的標簽展示形式有四種：圖標+文字、純圖標、純文字、舵式。
圖標+文字是最常見的標簽展示形式，為了讓用戶能夠很好的明白圖標的意圖，所以在圖標下方會配有文字提示，這樣就能大大的降低誤讀的可能性。正因為有文字提示，所以沒有必要過于擔心圖標的識別性問題，那么圖標就可以得到更深的延展，可以做的更有趣，更具有產品氣質，甚至可以代入更深層次的動效。
例如東家·守藝人APP，專門售賣各種手藝人的親手制作的各種藝術品，面向的對象是喜歡傳統文化的人群，在這樣的背景下東家結合宋體的筆畫（筆畫拆分）把圖標設計的更加傳統、古樸，創造出具有東方韻味且極具形式感的圖標設計。
采用純圖標展示形式的產品比較少見，純圖標樣式的最大缺點就是識別性低，沒有文字說明會導致用戶很難找到自己想要去的位置，也不明確自己所處的狀態。所以我們如果要設計純圖標形式，那么必須要考慮到圖標的識別性問題，間接的舍棄掉圖標更多的延展性，讓圖標變得更規矩。（識別性的提升我之前寫的圖標文章中提到過，主要可以從大眾認知隱喻與真實世界映射兩個方向出發去提升）
使用純圖標樣式的產品特征：產品單一、領域垂直、小眾化、用戶群體接受度高。即使滿足這些條件下產品使用純圖標標簽，用戶第一次使用往往也是比較迷茫，需要等用戶熟悉后才會得到好轉，所以一定要慎用。除此之外不太建議用于電商、視頻、學習、社交等領域。
對于我們設計師來說使用純圖標樣式的產品中最為熟悉的就是花瓣了。
采用純文字展示形式能夠更直觀的讓用戶進行操作，遵循簡單易用的原則。適合用戶群體跨度較大的產品，多用于直播類、內容類、簡單工具類APP中。缺點也顯而易見，圖標樣式比較單一，沒法加入更多趣味化、具有產品特性的元素到標簽中。
采用純文字展示形式的產品有很多，最熟悉不過的就是抖音，抖音的標簽默認狀態下采用了純文字形式，選中狀態則把文字高亮顯示，并且底部加入了圓角矩形，對于用戶群體跨度較大的產品，這樣的展現形式再好不過了。（抖音在途中改用過圖標+文字格式，不過后面也放棄了，我當時用著圖標+文字類型的抖音，的確感覺太奇怪?。?/span>
舵式標簽可以看為底部標簽式導航的一種變體。它在后者的基礎上，突出強調了一個標簽并且放在中間的位置，樣子看起來像攢了一個舵，所以取名為舵式標簽。一般舵式標簽的顏色、大小等視覺表現會被設計得和其他普通標簽有所差異，通過視覺對比的方式吸引用戶關注。舵式標簽通常和產品框架體現無關，大多數應用程序使用舵式標簽是用來承載系統功能。起初是因為社區類APP為了激勵和方便用戶隨時隨地地輸出UGC內容，所以把觸發用戶創作/發布的功能按鈕放置在標簽欄中。
因為舵式標簽可以很好地承載產品的重要功能，而被許多的應用程序設計所采用，經過越來越多的應用采用舵式標簽，使用的形式也越來越多樣，它現在并不再單一地用于承載產品功能，而是配合營銷場景、付費場景，給產品的變現、拉新賦能。拼多多就把它拉新的主要入口作用到了舵式圖標上，并且為了讓圖標更加顯目，甚至把圖標做成了輕質感的形式體現，同時也通過2像素的線性圖標減弱其他4個標簽的引導性。
標簽欄不僅是向用戶展現產品框架的關鍵控件，還可以貫穿整個產品的商業價值的體現，它是連接著整個產品最重要的頂層信息。如果想要讓標簽變得更加豐富，想要標簽內容中含有更多的情感需求、 商業需求、運營需求，那么我們可以重點從這兩個層面考慮：視覺層面、交互層面。
在視覺層面上我們可以迎合用戶的偏好與期望，通過豐富視覺體驗的方法來增加內容的觀賞性，這樣不僅能夠很好的向用戶傳遞著產品調性還能吸引用戶關注以及引導用戶進行操作。
裝飾性圖標僅僅是用來提升整個界面的視覺體驗，通過豐富視覺體驗的方法來增加內容的觀賞性，這樣不僅可以吸引并留住用戶，還可以讓整個用戶體驗更加積極。
整體裝飾性圖標的出現往往是為了滿足情感需求與商業需求，整體裝飾圖標并不是一直存在的，它的特點是季節性與周期性，并且它并不具備任何功能性。
從情感需求出發設計裝飾圖標：例如世界杯火熱進行時，優酷為了滿足用戶的情感需求，就把標簽欄的圖標全部替換為帶有世界杯元素的圖案，讓用戶與其產生情感的共鳴。
從商業需求出發設計裝飾圖標：現在的年貨節，之前的雙十二、雙十一、618等，每到節日促銷活動的時候，很多電商應用都會換上裝飾性圖標，例如一號店，在過年前就把標簽欄圖標全部改為含帶過年氣息的元素，提前來預熱活動，引導用戶消費。
單個裝飾性圖標的出現大部分都是為了滿足運營需求，運營為了推出某個活動或功能，往往會單獨裝飾某個圖標的設計視覺，以便于提高圖標的引導性，最直接的例子就是我剛才提到過的拼多多。
我們可以在標簽中加入更多的品牌基因，讓其與品牌產生聯動性，這一形式是大部分應用程序都在做的，我們可以從這6個層面加入品牌基因：品牌顏色、品牌LOGO、品牌元素、品牌名稱、品牌性格、品牌吉祥物。
色彩是圖標設計中重要的構成元素之一，我們可以直接提取品牌色作為圖標設計視覺元素。例如站酷，站酷的品牌色是黃色，標簽欄的圖標（選中狀態）就提取了品牌的黃色，讓其與品牌調性高度一致。
當然品牌顏色除了可以直接用外，還可以在提取時適當調整色彩的飽和度、明度，做更多的形式變化。例如懂車帝，就在原有的黃色基礎上做了些許調整，圖標采用黃色透明漸變的處理方式，在與品牌顏色呼應的同時，使得整個圖標更加精致、有活力。
提取品牌LOGO是最常用的使用方式，我們從品牌中提取出來的圖標一般運用在APP首頁標簽。因為首頁是APP中最重要的頁面，也是進入APP默認的頁面，把首頁圖標替換成品牌LOGO，能反復加強了用戶對App的LOGO印象，這樣不但使App內外形成了視覺聯系，同時也二次傳遞了品牌形象。例如大眾點評，它的首頁標簽就用了品牌LOGO，同時也使用了品牌顏色。
我們可以在品牌中提取它識別性較強的局部元素作為圖標。例如虎牙直播，它就提取了品牌卡通形象的外輪廓作為首頁圖標。
品牌提取的元素并不只是所見到的品牌視覺形象，還可以提取與品牌內容強相關的元素。例如QQ音樂，它并沒有把它的品牌LOGO直接放于其中，而是通過大眾所熟知的音符作為首頁圖標。
如果你的品牌還不為大眾所熟知，那么為了強化用戶對品牌名稱的認知，可以把品牌名稱直接放入標簽欄中。例如MONO，就把它的名稱分為四個字母分別放在了4個標簽內，需要注意的是這類圖標不能單獨出現，因為它本身不具備識別性與引導性，必須配合文字一起出現，這樣才能讓用戶理解標簽的真正功能，我們不能為了設計而設計。
圖標風格可以與品牌性格保持一致，一套帶有濃厚品牌感的圖標，會讓人記憶猶新。例如：每日故宮，它的圖標就非常具有特色，結合了品牌的性格以及定位，加入了眾多的古代中國元素，整體看起來有股濃濃的古韻之風。
現在大部分品牌都會含帶吉祥物，我們可以在設計圖標時提取吉祥物的外形，把它用于產品的標簽中。例如盒馬，它就把吉祥物做為了底部標簽，不過需要我們注意的是如果吉祥物的風格與我們的圖標風格差別較大，我們就需要對它做風格化的處理，不然看起來就十分突兀。（盒馬對吉祥物做了輕質感的風格化處理）
讓用戶自定義的標簽現在越來越常見，而每個產品對其思考的層面也都有所不同。自定義標簽往往出現在個人中心，它會根據用戶上傳的頭像或用戶的捏臉生成圖標。
目前市面上很多APP都把用戶上傳的頭像作為了個人中心標簽展示，例如我們常用的百度網盤就采用了此方案，當用戶注冊未上傳用戶頭像時，會默認顯示系統標簽，當用戶上傳完后就會顯示用戶頭像，并且如果你是會員，還會把會員標示顯示在標簽的右上方，彰顯會員用戶的尊貴性。
我們可以很明顯的發現百度網盤的底部標簽默認狀態為線性圖標，而個人中心不管默認狀態還是選擇狀態都為面性圖標，所以如果你想要加強個人中心的引導性，那么可以采取此方案。
捏臉功能作為SOUL的一大特色，捏臉的虛擬形象賦予了真實人格屬性，加強了社交的傳播性，所以SOUL決定把用戶自定義的捏臉放于個人中心標簽中。
除了對標簽做視覺的提升外，我們還可以對其加入合理的交互效果，一方面可以提升用戶在使用產品過程中的樂趣，另一方面還可以為用戶提供更多便利，從而增強用戶體驗。
在不同的狀態下點擊標簽的功能也不一樣，一個標簽可承載2到3個功能，可以滿足不同狀態下的用戶需求。
SOUL的廣場標簽（進入選取頁+刷新）
SOUL的廣告標簽承載了2個功能，當你處于其他標簽時，點擊廣場標簽則直接進入到廣場頁面；當你處于廣場頁面中時，再次點擊標簽則會刷新整個頁面。
有貨的發現標簽（進入選取頁+上傳圖片）
有貨的發現標簽也承載了2個功能，在設計上運用的非常巧妙，當你處于其他標簽時，點擊發現標簽則進入到發現頁面；當你在發現頁面時你的發現標簽則變為了上傳圖片標簽，可以點擊上傳圖片。
淘寶首頁標簽（進入選取頁+刷新+置頂）
淘寶的首頁標簽同時承載了3個功能，當你處于其他標簽中，點擊首頁標簽則直接進入到首頁頁面；當你在首頁頁面第一屏時，你點擊首頁標簽則會刷新整個頁面；當你滑過3分之1屏時，首頁標簽的功能則變為置頂。所以在不同狀態下首頁標簽也會具備不同的功能，并且每種狀態下的標簽樣式也是不同。
愛奇藝首頁標簽（進入選取頁+到達指定位置+置頂）
愛奇藝的首頁標簽也是同時承載了3個功能，不過它與淘寶有些許不同，愛奇藝并不能刷新頁面，而作為替換的功能是直接到達指定位置“猜你喜歡”。
我們做的設計不要僅限于視覺所看到的，還要考慮到所觸摸的、所聽到的，我們可以利用觸覺與聽覺去輔助用戶確認自己的選擇，當然我們一定要合理利用，反之則會讓用戶感到十分反感。
西瓜視頻與今日頭條在點擊標簽欄圖標時手機就會發出輕微的震動，給予了用戶很好的點擊反饋。
SOUL點擊星球標簽時手機就會發出戀愛鈴聲，在SOUL的產品報告中，SOUL主要面對女性用戶，女性用戶約為男性用戶的2.4倍（女人更偏感性），并且它的主要需求是滿足測試、匹配、交友，所以戀愛鈴聲能夠很好的引起用戶的情感共鳴。不過鈴聲有利有弊，當你在特定場景下使用SOUL時，點擊到星球標簽周圍人也都能聽到戀愛鈴聲，實屬尷尬，所以我在特定場景下使用SOUL時都會默默的關掉聲音。
精彩的圖標動畫，對整體的設計具有畫龍點睛的作用，降低標簽切換時的枯燥感，提升操作的愉悅度和期待感。甚至可以通過 tab 的動畫設計給用戶傳達出整個 APP 設計的品牌及理念。標簽動畫往往都比較簡單，主要有：縮放、旋轉、顏色過渡、位移、抖動、填充、線性軌跡、結合容器、元素介質等。接下來我們來看看SOUl、虎牙、汽車之家是怎么做的。
SOUL的底部標簽欄運用到了彈性動畫、結合容器以及線性軌跡。帶有彈性縮放的標簽反饋，讓整體的設計更加具有趣味性，相比線性縮放也更有視覺沖擊力。圖標的運動規則：先從 0 放大到最大（數值根據實際情況設定），然后再回彈至正常大小。除了彈性動畫外，它還結合了容器的元素對內部進行了顏色的替換以及單線條的軌跡動畫。這樣的處理不僅趣味性十足，還強化了選中當前狀態，整體標簽切換的一致性也較高。
虎牙一直是我比較喜歡的直播平臺，它的底部標簽動畫也是非常值得借鑒，運用到的動畫形式是抖動與趣味表達。抖動是通過圖標的左右、上下快速位移或旋轉形成，整體的動畫效果節奏較快，具有一定的速度感，使整個標簽切換的情緒表達較為俏皮、可愛。除了抖動外還在切換過程中代入了更多小元素的趣味表達，賦予了圖標更多的性格，對我們的設計進行再升華，從而提高整體設計的質感和趣味。
因為用戶群體的不同，汽車之家在標簽動畫的設計上也相對簡單、嚴謹，它的動畫形式主要是結合容器與細節晃動。選中效果由線切換為面，并加入了品牌底色，這樣能夠清晰的給用戶傳達當前頁面。并且為了不使整體的切換效果變得生硬，在切換過程中采用了透明度與彈性縮放，讓其過渡的相對柔和。在細節的處理上也是非常用心，每個圖標都帶有笑臉的形狀，間接的給用戶傳達“笑臉”信息，在選取標簽時內部形狀會輕微晃動。整體來看汽車之家的標簽動效雖然偏向嚴謹，但是在細節上也給予用戶傳達了更多的情感。
作者：黑獅力 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
一、圖標的定義及分類
圖標是具有高度概括性的、用于視覺信息傳達的圖像。圖標常?？梢詡鬟_出豐富的信息，并且常常和詞匯、文本搭配相互搭配使用，兩者互相支撐，或隱晦或直白地共同傳遞出其中所包含的意義、特征、內容和信息。
在數字設計領域，圖標作為網頁或者UI界面中的象形圖和表意文字而存在，是確保界面可用性的基礎設施，也是達成人機交互這一目標的有效途徑。
釋意性圖標是用來解釋和闡明特定功能或者內容類別的視覺標記。它并不是一定被點擊可交互的UI元素，在很多時候只是有輔助解釋其含義的文案。在不搭配文本的情況下用戶會借助這些圖標來獲取信息。不過有時候圖標表達的含義可能還不夠完整或者清晰，所以會將圖標和文案搭配起來一起使用，這樣可以大大降低誤讀的可能性，釋意性圖標一共可以分為以下三類：
2-1-1純圖標：
例如火球買手APP中的店家“特定標簽”，以及圖文展示下的“觀看數量圖標”與“收藏圖標”，它們并不需要用文字去解釋，用戶也知道它表達的是什么。
2-1-2圖文結合：
例如造作APP中的“購物車圖標”與“收貨地址圖標”，為了讓用戶能夠很好的明白圖標的意圖，所以在圖標下方會配有文字提示，這樣就能大大的降低誤讀的可能性。
2-1-3純圖標（圖標內含文字）：
例如開眼APP中視頻封面左上角“開眼精選圖標”，它把圖標與重要文字結合在一起展示給用戶，看起來不僅十分具有個性，而且用戶對其理解性也非常強。
交互圖標的最大意義在于可以引導用戶進行交互行為，是在產品中不可或缺的組成部分。它們可以在用戶不同的操作手勢下幫助用戶執行不同的交互過程，這種類型圖標也是APP中最常見的，常見的交互性圖標如：搜索、底部標簽、返回、點贊、收藏、掃一掃等。
裝飾性圖標僅僅是用來提升整個界面的視覺體驗，它并不具備任何功能性。這類圖標往往是為了迎合用戶的偏好與期望，通過豐富視覺體驗的方法來增加內容的觀賞性，這樣不僅可以吸引并留住用戶，還可以讓整個用戶體驗更加積極，最為大家所熟悉的就是滴滴出行APP中的“小車圖標”。
圖標基于基礎樣式（線、面、線面結合）+表現手法（顏色、透明度、投影、疊加...）劃分，一共可以分為20種類型，每種類型的展示方式也都各有不同。
線性圖標通過線來塑造輪廓，在界面中App的圖標尺寸并不大，所以如果線過于復雜，在小面積中過多的線會對識別性產生較大的困擾。在圖標設計中使用的線有粗細之分，常用的App圖標設計線的粗細一般有2PX或者3PX，不同的線條粗細所帶來的視覺感受也不同，細線顯得精致，粗線視覺面積大，顯得厚重。
面性圖標是通過面來塑造形體的圖標，采用了剪影的設計形式，通過線或者面去切割基礎輪廓面，通過分型來塑造圖標的體積感。不同的切割手法造成了面性圖標設計感的差別。
線面結合圖標相較單一的線性圖標或單一的面性圖標樣式更加豐富、也更富有趣味性。從設計的角度上說，由于元素的多樣化，設計更容易獲得好的效果。相反，如果運用不當會顯得圖標非常雜亂，如何有效的把控好兩者之間的過度是關鍵。
這類圖標的特點是通過細節和光影還原現實物品的造型和質感，能給用戶極強的代入感，用戶可通過對現實事物的聯想，快速領會圖標表達的意圖。但是隨著 ICON 的發展，擬物圖標也帶來了一些問題，因為用戶關注的核心永遠都是信息本身，華麗的視覺元素或許在用戶使用的初期，起到賞心悅目的裝飾，但久而久之，這都將成為對用戶獲取信息的一種干擾，所以現在擬物化的圖標很少運用在APP界面之內。
相較于擬物風格不會有太多復雜的視覺元素，層次簡單，用色素雅干凈，采用輕投影、輕漸變的方法設計，這類圖標具有一定的立體感，能給人輕盈、簡潔、精致的感覺，在界面設計中，一般在面積比較大的區域我們會使用加入輕質感的圖標。
合理的遵循圖標規范可以有利于設計師之間合作使用，指導設計師如何規范的去設計圖標，以確保企業所有產品圖標風格的一致性和可用性達到統一，同時也是為了后續產品更新迭代有可參考的地方。
為了保證圖標的尺寸大小一致性，我們往往會建立基礎的網格尺寸來進行繪制圖標，常用的網格繪制尺寸為：16、24、36、48、64、128、512、1024。這些尺寸并不是固定的，在設計中也會存在特殊的尺寸，例如谷歌在臺式機上設計圖標，當鼠標和鍵盤是主要輸入方法時，就會使用密集布局，基礎網格就會縮小到20。
下面就以常用的24x24為大家展示：
網格包含2px出血位。這樣可以確保圖標在導出時將保留其所需的比例和周圍的空白區域，同時還能夠很好的平衡圖標的視覺重心。
*在使用常規圖標時避免一部分在出血位。
*在使用多個元素的圖標時，避免圖標擁擠我們可以讓其部分出現在出血位，確保它們之間有足夠的空間。
keyline由圓形，正方形，矩形，正交，三角形和對角線組成。它可以為您提供圖標集中基本形狀或比例的一致大小。這使創建視覺上的穩定變得更加容易，并有助于在設計相似比例的圖標時有共同的參考準則。
在24尺寸下的keyline構成如下（24尺寸下的出血區域為2）：
當把圖標畫在網格上時可以很好的規范圖標，讓它們從整體的視覺上看著統一規范。
在設計一整套系統化的圖標時，我們一定要注意圖標的像素大小，要運用相同的網格尺寸設計相同線條粗細的圖標，包括曲線，角度以及內部和外部筆劃。這樣圖標看起來才更統一，也有利于后期圖標的迭代更新。
當然，描邊像素的粗細并不是絕對的，如果我們要做一些密集型的圖標時，可以考慮適當的縮小線的像素大小。如下，我們設定的系統圖標線條粗細為3px，當你用3px作用于指紋圖標上時就會顯得非常擁擠，并且在視覺上比其余圖標更重，這時我們就可以把它的線條像素降級，設定為2px。
我們在用矢量工具繪制圖標時，要仔細看好圖標的網格尺寸和圖標結構尺寸，避免產生小數位。
曲率簡單來講就是圖標中帶有圓角的邊角度數，只要是帶有圓角的矩形就都會有一定的曲率。在圖標中曲率的呈現方式有兩種：外曲、內曲。
外曲與內曲并不一定同時存在，在特定情況下內部結構可以是直角（無曲率）。如下圖：當內部結構都是圓角時會發現整個圖標稍顯臃腫，這時我們可以把部分內部圓角直接變為直角（也可以改變曲率大?。淖兒缶蜁l現圖標的整體結構會顯得更加協調。需要注意的是如果一個圖標做了這樣的處理，在同等情況下的圖標都要做一樣的處理，不然圖標會顯得非常雜亂，不統一。
根據像素的網格線來設置兩條對角線，會讓你的圖標看起來更清晰。在傾斜的角度選擇上，不要出現7.8°、14.2°這樣的奇怪數值。我們可以將15°的增量用于傾斜角度（也可以采用其他有規律的角度方案），這樣會使得整體的圖形變化顯得更加規律，也能夠滿足不同圖形的角度需求。
在做很多圖標時都會用斷點的缺口來打破“全包邊圖標”的沉悶感，使圖標具有透氣性，如果想給圖標添加斷點，那么要保證斷點的形態保持一致。
確保圖標內每個細節和元素都有足夠的空間，圖標的相鄰元素之間的空間在整個圖標中不應太小，我們可以定義最小間隙以避免輪廓“粘住”，在24px尺寸下的間距不得小于1px。
如果在做圖標時牽涉到了透視需求，那么就一定要保證圖標的透視角度一致。
非中心對稱圖形物理對齊時視覺上會有偏離感，多個不同形狀的圖標視覺重心并不在一條水平線上，需要微調才能保證平衡感。
在圖形的處理上，不要留有多余的節點，干掉多余的節點，保持圖形的整潔。
ICON命名要求較為嚴格，涉及到我們切圖給開發，所以我們命名爭取做對，且需嚴格遵守規則，正確的命名原則：類型_位置_功能_狀態_大小
每個App應該有自己獨特的產品氣質，同樣圖標性格也應當與產品氣質保持一致。圖標性格一共分為了4個走向：粗曠（粗直）、活潑（粗圓）、商務（細直）、精致（細圓）。
圖標結構特點：線條較粗（或面性圖標、線面結合圖標）、拐角為直角。
粗曠類圖標讓人看起來非常飽滿、剛正，它更多適用于男性、潮流、有格調類型等產品中。例如VSCO，它的底部標簽欄圖標全部采用了粗線條的直角設計。
圖標結構特點：線條較粗（或面性圖標、線面結合圖標）、拐角為圓角。
活潑類圖標讓人看起來十分容易接近，能讓人感受到溫暖、舒適，它更多適用于電商、社交、母嬰、二次元、娛樂、直播、美食等產品中。例如閑魚，不管是在LOGO字體的處理還是APP內部的圖標處理，都是采用了線條較粗的圓角設計。
圖標結構特點：線條較細、拐角為直角。
商務類圖標讓人看起來十分規矩、嚴謹、值得信賴，它更多適用于新聞、政府、商務、工具等產品中。例如工具類的思維導圖APP，它的可操作按鈕都是商務類的圖標。因為這類圖標的特性，所以目前我們很少在移動端上看到它，它更多適用于PC端的后臺界面中。
圖標結構特點：線條較細、拐角為圓角。
精致類圖標讓人看起來非常干凈、柔和、顯得高級感，它更多適用于旅游、奢侈品、藝術、領域垂直等產品中。例如airbnb，在APP應用中大部分都采用了精致類圖標。
當圖標設計完后，我們應該如何去評判一個圖標的好壞？很多設計師并沒有完整的評判體系，其實我們可以從這五個維度對圖標進行評判：識別性、圖標氣質、協調性、一致性、品牌調性。
圖標最主要的用途就是輔助用戶理解信息，特別是對于當圖標單獨存在時，一定不能讓用戶產生疑慮。要想圖標達到高識別，我們可以從這2個方向入手：大眾認知隱喻、真實世界映射。
在互聯網普及的今天，許多界面的隱喻圖標已被廣大用戶熟知認可，對于這類隱喻圖標用戶不用思考身體就已做出反應，我們在設計圖標時可以從隱喻圖標中添加修改部分元素，從而形成新的圖標，這樣既能保證圖標的識別性，也能做出差異化。
選擇真實世界中的物品映射，能使人下意識對圖標的作用有近似預期，降低學習成本，提高識別度。
每個App應該有自己獨特的產品氣質，而我們所做的圖標就是要跟隨產品的氣質。例如當你要做一款二次元產品，你的圖標氣質就應該偏活潑、可愛、萌、青春，而不是剛硬、嚴謹、規矩。
一致性是圖標的基礎，我們在繪制整套圖標時要確保它們的基礎屬性全部一致，細節統一，圖標內容的統一在視覺上也更加和諧美觀。圖標是否具有一致性，就要從以下七個方向去評判：尺寸大小、圖形角度、拐角（曲率）、描邊、間距、透視、顏色。
3-1 尺寸大小：網格大小是否統一、是否遵守圖標的keyline規則。
3-2 圖形角度：是否遵循設定的角度規范（15°的增量用于傾斜角度）
3-3 拐角（曲率）：拐角的曲率是否統一，如果圖形太多且復雜，那么我們可以根據圖標的特性去設定曲率的規則，例如可以設定當邊角像素在1-2px時內外曲率為2px；當邊角像素在3px時內外曲為2px，內曲為1px；當邊角像素大于或等于4px時，外曲為2px，內部則為直角。
3-4 描邊：描邊大小是否一致。
3-5 間距：是否遵守間距規范。
3-6 透視：透視是否一致，避免在同一套圖標中出現正視圖/側視圖混雜的情況。
3-7顏色：在圖標的配色上要保持一致的規律，采用相同的顏色是比較常見的配色方式。如果采用不同色相的配色方式。也需要保持整體的配色協調，避免出現飽和度、明度反差過大的配色。
一致性代表的是圖標的基礎，而協調性則代表圖標的整體狀態，協調性的呈現狀態是驗證一致性是否合理的標準，當協調性存在問題時，我們就要反過來查看一致性存在的誤區并給予修改。在圖標的協調性上我們主要審視這三點：視覺大小、飽滿度、透析感。
視覺大小對標的是一致性的尺寸大小與描邊大小，當你發現圖標視覺大小不對等時，你就要回過去查看你的網格與keyline是否運用正確，確保正確后再查看你的圖標是否按照keyline的規范繪制以及描邊大小是否一致。（同樣尺寸下的圖標，從光感上來看描邊粗的圖標視覺偏大）
飽滿度對標的一致性的間距，當你發現圖標不夠飽滿時，你就要去查看你設定的間距值是否偏大，是否合理。
透析感簡單來說就是留白區域。透析感對標的也是一致性的間距，當元素的描邊過大時，我們就要合理的設定間距的最小值，不然整個圖標就顯得非常臃腫。
品牌調性是我們經常提到的緯度，我們打開很多APP都會發現他們的圖標設計都非常普通，沒有任何特色，過于大眾化，雖然都做了一些形式上的改變，但總是與品牌缺乏聯動性。其實我們可以結合品牌調性，在圖標上做更多的聯動、創新。
色彩是圖標設計中重要的構成元素之一，我們可以直接提取品牌色作為圖標設計視覺元素。例如站酷，站酷的品牌色是黃色，標簽欄的圖標（選中狀態）就提取了品牌的黃色，讓其與品牌調性高度一致。
當然品牌顏色除了可以直接用外，還可以在提取時適當調整色彩的飽和度、明度，做更多的形式變化。例如懂車帝，就在原有的黃色基礎上做了些許調整，圖標采用黃色透明漸變的處理方式，在與品牌顏色呼應的同時，使得整個圖標更加精致、有活力。
提取品牌LOGO是最常用的使用方式，我們從品牌中提取出來的圖標一般運用在APP首頁標簽。因為首頁是APP中最重要的頁面，也是進入APP默認的頁面，把首頁圖標替換成品牌LOGO，能反復加強了用戶對App的logo印象，這樣不但使App內外形成了視覺聯系，同時也二次傳遞了品牌形象。例如大眾點評，它的首頁標簽就用了品牌LOGO。
我們可以在品牌中提取它識別性較強的局部元素作為圖標。例如虎牙直播，它就提取了品牌卡通形象的外輪廓作為首頁圖標。
品牌提取的元素并不只是所見到的品牌視覺形象，還可以提取與品牌內容強相關的元素。例如QQ音樂，就把音符作為首頁圖標。
如果你的品牌還不為大眾所熟知，那么為了強化用戶對品牌名稱的認知，可以把品牌名稱直接放入標簽欄中。例如MONO，就把它的名稱分為四個字母分別放在了4個標簽內，需要注意的是這類圖標不能單獨出現，因為它本身不具備引導含義，必須配合文字一起出現，這樣才能讓用戶能易理解。
圖標風格可以與品牌性格保持一致，一套帶有濃厚品牌感的圖標，會讓人記憶猶新。例如：每日故宮，它的圖標就非常具有特色，結合了品牌的性格以及定位，加入了眾多的古代中國元素，整體看起來有股濃濃的古韻之風。
如果品牌中含有吉祥物，我們可以提取吉祥物的外形，把它用于產品的圖標中。例如盒馬，它就把盒馬的吉祥物做了風格化的處理，放于APP的首頁標簽。
作者：黑獅力 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
大部分設計師應該都遇到過這種場景：在做設計前并沒有考慮到加載，但在進行還原度走查或者驗收的時候才發現，由于某些頁面數據請求較慢，導致在頁面中會出現空屏狀態。這時才想起需要在這些頁面添加動畫來承載頁面的過渡。
歸根結底是因為設計師在設計過程中，更多關注頁面本身，而很少去思考頁面在呈現過程中何時會出現白屏狀態，都是后知后覺去補充完善。加載作為必備的一環，卻總是被忽略。目前很多B端產品在這方面都沒有一個系統合理的規劃，導致系統的加載體驗缺失或者不統一。
因此希望這篇文章能夠講清楚中后臺加載出現的場景和規則，對需要深入了解加載以及在制定加載規則的設計師朋友們帶來一些幫助。
加載通俗來講就是用戶從觸發頁面操作，到頁面最終呈現的一個等待過程。這個過程始終存在不可避免，只是時間有快有慢?？斓募虞d只需要幾百毫秒就結束，但慢的加載就可能會達到幾秒甚至十幾秒，讓人產生焦慮。
而為什么會有如此大的差距，這就需要從頁面渲染的整體過程來進行說明。當我們從瀏覽器輸入網址，再到我們看到完整頁面的這個過程，網頁到底經過了哪些步驟呢。經過資料查詢和與前端確認，整體過程可以闡述如下：
從這里我們可以看到頁面的呈現是程序經過了一系列操作才最終呈現到我們面前的。在這里可以將其簡化為四個階段：用戶操作功能→頁面向服務器發送請求→服務器接受并返回數據→頁面呈現。
而決定整個頁面加載快慢的就在于請求與數據這里。一般我們可以將頁面的數據分為2種類型：靜態資源和動態資源。
靜態資源：前端的固定頁面，這里面包含HTML、CSS、JS、圖片等等，不需要查數據庫也不需要程序處理，直接就能夠顯示的頁面?？梢院唵卫斫鉃槟?strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;">頁面上的固定字段和結構。這種頁面一般加載速度比較快，比如我們看到的展示型官網一般都是前端寫好的靜態資源。
動態資源：而對于頁面上的動態變化的，需要程序處理或者從數據庫中讀數據，能根據不同的條件在頁面顯示不同的數據，比如表格數據、統計數據等稱為動態資源，這種都需要調用后臺接口來進行返回，因此加載速度相比于靜態資源就會更慢。
而它們的區分點用下圖可以表示：
可以看到靜態資源基本是直接返回，而動態資源還需要連接數據庫調取資源，尤其是在遇到數據庫調取較慢時就會花費更多時間。而我們加載緩慢的大多數問題，也基本上更多出現在動態資源的獲取上。
當我們清楚加載形成的原因，接下來要做的就是在需要加載的地方對其進行處理。這也是在設計過程中我們經常遺漏的地方。我們先看一下目前常見的2種處理方式：「默認處理」和「使用進度指示器」
當我們對加載過程不進行任何處理時，程序就會以默認的方式進行-即根據資源獲取速度一步步呈現?？梢钥吹胶俚旰笈_的處理過程就是一種默認處理方式：
但是這種做法就會導致我們在頁面加載過程中會出現空屏狀態，比如上圖切換到概覽時出現了空屏狀態，尤其是當遇到了網絡緩慢的情況，會造成在加載時頁面停留在當前狀態下不動，往往會讓用戶陷入到「系統故障」的錯覺。
這個名詞說起來可能比較陌生，它指代的就是我們平時經?？吹降募虞d動畫、骨架屏或者進度條等。進度指示器的作用就是告知用戶當前頁面并沒有故障，而是正在讀取數據。
通過添加進度指示器來對空屏狀態進行承載，能夠減輕用戶的焦慮感。目前很多B端產品更通用的形式是添加動畫來過渡。
但是在體驗過程中很容易發現一個問題，就是在產品的整體加載過程中，某些空屏狀態是沒被加載動畫覆蓋到的。當這些沒被覆蓋到的加載過程過長時，很容易出現焦慮感。比如神策數據在左側列表切換時的加載過程就沒被覆蓋：
想要更全面的把加載動畫覆蓋到所有頁面，我們就需要弄清頁面在哪些狀態下會出現空屏狀態，從而制定統一的加載動畫規則。這個問題可以先思考一下，后面解答。
在制定統一加載規則之前，我們需要明確一個概念，就是加載的模態與非模態。
模態加載的含義就是當前加載會中斷用戶其余操作，用戶在這個期間只能等待加載而不能進行其他操作（有的模態會提供取消按鈕）。如果你的頁面涉及到以下2種情況，可以考慮使用：
1.用戶當前的操作本身不能與其他操作同時進行。比如系統更新，或者工具類的導入導出相關操作，我們只能等待更新、導出完成才能繼續進行后續的操作。這時候可以使用模態加載來承載，比如protopie的導入操作；
2.當用戶進入到一個全新的頁面時，這個時候頁面什么都沒有，我們只能等待頁面加載完成才能進行后續的操作，因此在這種情況下也可以采用模態加載，比如我們剛進入Asanan產品頁面看到的首屏加載動畫：
除了上述2種情況外，你也可以根據你的業務場景來進行模態加載的選擇，但建議是盡量少用模態加載，其會對用戶的打斷和干擾性比較強。
非模態加載的話，這種加載通常只會出現在需要加載的部分，不會中斷用戶其他操作。對用戶干擾比較小。比如我們常見的功能切換加載、數據篩選加載等都屬于非模態加載。
非模態加載相比于模態加載會更輕量，因為用戶隨時都可以打斷也不會影響到其他操作。因此建議在大部分情況下都可以使用非模態彈窗來進行承載，比如飛書的左側欄切換操作：
接下來我們進入正題，在這里我從加載的角度將網頁整體加載過程分為呈現加載規則和操作加載規則。
我們先談頁面呈現規則。前面已經明確加載產生的原因和類型后，我們就可以開始為我們的產品制定統一的加載規則，以保證后續頁面加載的一致性。
在拆解頁面的加載過程前，我們進一步闡述之前提到的渲染原則，從前文中提到最后會經過「解碼」和「渲染」2個步驟，這也是決定了我們看到的頁面的最終呈現順序：
我們看到的頁面是由HTML、CSS和JavaScript來進行構成的。HTML可以看作最簡單的框架、CSS則是賦予了框架樣式，JavaScript則是負責頁面中的交互(當然JS也可以控制樣式，這里只描述主要功能)。
頁面在「解碼」階段，拿到的HTML文檔會被解碼為DOM樹，同時將CSS文件解析成CSSOM，這兩者結合后一起渲染頁面，JS一般是在最后渲染。所以邏輯上就是框架和樣式一起渲染，最后渲染交互。視覺的角度來講就是先看到元素樣式，然后才能進行對應操作。
由于瀏覽器渲染順序一般會根據代碼的順序進行渲染，而代碼在頁面中的構建一般也是按照頁面的上下和左右的順序去寫的，因此我們看到的頁面的視覺呈現順序也是遵循從上到下，從左到右。
所以幾乎所有的產品都是先看到頂欄，然后左側邊欄，然后其他內容。因此我們可以通過這個原則來拆解對應的頁面，我們按照頁面常規結構可以將其分為三個加載部分：頂欄、左側導航欄、內容區域。而其加載順序如圖所示：
當知道對應頁面的渲染順序后，我們就能夠清楚在頁面渲染的過程中哪些地方會出現空屏了。因此將頁面加載過程拆解為如下順序：
我們的加載動畫需要承載的就是上述這些白屏的地方，從而將加載細化為三種場景的拆分：全局加載+局部加載+內部加載。如圖所示：
通過這三種加載就可以涵蓋頁面所涉及到的所有部分。接下來詳細闡述一下這三種類型的定義和用法。
如上圖所示，全局加載的目的是為了覆蓋用戶從輸入網址到頁面的資源渲染的這個中間過程的空屏狀態而存在的。而這種狀態會涉及三種場景：
1.通過網址進入到一個新的頁面時；
2.通過鼠標右鍵或網頁刷新按鈕對該頁面刷新時；
3.通過頁面操作需要新開頁面時。
該全局加載的動畫構成為：
1：覆蓋整個頁面的加載，由純白色+加載動畫構成；
2：加載類型為模態加載，因為用戶在這種頁面狀態下并不能進行其它操作。
但在這里我們需要注意全局加載的開始和結束時間：
開始時間：當進入頁面時立即呈現加載動畫；
結束時間：當頁面加載出頂欄的時候，此時停止加載。
為何要這么處理結束時間，原因其實圖中已經給出了。這里再解釋一下原則：只要有頁面資源返回，我們的全局加載動畫就會結束，隨后啟用局部加載來承接后續的狀態，避免用戶在當前狀態長時間等待。而頂欄在一般情況下都是最先加載出來的，所以以頂欄出現作為結束全局加載的標準。當然如果你的結構沒有頂欄，可以以左側欄來作為結束標準。
局部加載是用在頁面整體框架加載的過程中，承接在全局加載后。局部加載的使用場景可以概括如下：
1.頂欄加載結束后，用在剩余框架的加載效果（具體體現為左側邊欄和右側內容區域）；
2.對于涉及到局部頁面的切換操作都會進行局部加載（比如左側邊欄的切換）；
光看文字可能不是特別清晰，在這里可以舉一個動態的例子來幫助理解：
上述展示的是在頁面呈現的時候一個完整的局部加載。在這里需要注意的是我們首次渲染和第二次渲染在加載動畫上是可以有區分的，可以通過程序控制讓這種加載動畫只在初次加載時出現。
第一次加載時出現是因為我們需要有加載動畫來承接框架首次加載的空屏時間：
但第二次的時候由于有緩存（緩存會加載我們的靜態資源，能夠讓我們的頁面框架在第二次時更快顯示），這樣在讀取框架時基本不需要加載，我們就可以通過程序來直接去掉其中的局部加載動畫，直接顯示框架來進行呈現。
目前在飛書和釘釘等B端產品后臺均采用了這種處理方式?？梢钥吹綀D中我在第一次切換到角色管理時是有碰撞小球的局部動畫存在的，而第二次再次進入時則直接出現框架。這樣既能夠保證加載動畫能夠覆蓋所有的空屏狀態，又避免了局部加載動畫的頻繁出現。
內部加載是用在頁面內部不同模塊數據間的加載。當框架都已經加載結束，但某些數據由于接口比較慢，此時還沒有返回，這時我們就可以用內部加載來進行承載。這應該是我們更常見的加載情況：
在進行內部加載的時候，需要注意，內部加載的時候一般標題是存在的，因為標題基本都是固定的，所以能夠很快被拉取。比如Zoho的內部加載，加載時標題已經出現了：
通過這三種類型的加載，能夠覆蓋從用戶輸入網址，到頁面渲染完成這個頁面呈現過程中的全部加載場景。
說完頁面的呈現規則，再談頁面操作加載規則。頁面的操作其實對應的是頁面控件的反饋。而我們的常用的控件比如有按鈕、tab切換等。我們不僅需要考慮控件本身的加載狀態，而且需要考慮到控件影響的其他頁面范圍。
控件的加載并不是隨時都需要，我們要根據實際的數據量大小及業務場景來選擇性使用。目前我們需要考慮的控件及其加載狀態主要有如下：
比如圖中的按鈕的加載狀態是必備的，在很多場景下都會用到。但是下拉列表和級聯列表，在一般的場景下都不太需要進行加載，當遇到列表中的數據特別多或者調取特別慢時就可以考慮為其加上加載狀態。
這種控件比如日期篩選、表格篩選或者保存等操作，當你切換篩選條件后所有與其相關的頁面元素都會發生變化。在這種情況下我們需要考慮到被影響元素的狀態。目前的設計實現上有兩種做法：
1.被影響元素不可被操作，且該區域有遮罩+加載動畫來覆蓋；
2.被影響元素可進行操作，無任何動畫，但操作并不會影響之前提交的結果；
這兩種方案一種是利用遮罩防止用戶無效操作，另一種則是保持了足夠的操作自由性。個人在這里更傾向于處理方式1，我認為被影響的元素是需要有遮罩+動畫的，來避免用戶在加載期間對其進行無效操作，比如示例中方案2后面修改的名稱是沒有被系統保存的。
需要注意的是如果在產品中使用方案1，我們的遮罩區域只需要覆蓋被影響的元素就可以了（保存這種可以將按鈕一起覆蓋），比如通過篩選導致圖表數據發生變化，這時只需覆蓋圖表區域，而不用覆蓋篩選區域。這樣的好處是當某些篩選數據出現加載過慢問題時，用戶可以通過切換篩選項來打斷當前加載。
上述描述的操作都是針對于當前頁加載。當控件導致頁面刷新或者跳轉時，則整體遵照頁面呈現的規則進行加載。
上面闡述的加載已經完全能夠覆蓋我們頁面整體的加載，但是還是需要提及一下骨架屏和進度條這兩種加載形式。
先說骨架屏。實際上骨架屏的使用效果體驗是優于加載動畫的體驗的（骨架屏的加入使用會讓用戶感覺網頁出現的更快）。那么為什么在大部分的B端業務頁面中沒被用到呢，主要有2點原因：
1.每種骨架屏都需要進行對應的定制開發，需要與加載后的頁面框架保持一致，這會增加了開發成本。
2.中后臺的業務界面對來說固定結構的頁面會較少，這對于骨架屏的使用機會就相對較少。
個人認為在前期可以以統一加載體驗為主，在后期業務相對成熟后，可以針對固定結構，通過骨架屏的使用優化加載體驗。
再說進度條。我理解的進度條的使用條件：對于加載時間較長的規定場景可以考慮用進度條來承載，比如我們常見的游戲加載中進度條就用得比較多，因為游戲一般資源比較大。還比如figma在進入設計文件的過程中也采用了進度條加載也是因為設計文件可能會很大。
進度條在特定場景下能夠緩解用戶焦慮，讓用戶知道進展。但進度條在多數情況下都抓取不到程序的真實進度，這也會導致有時候我們看著加載到99%，那最后的1%遲遲加載不出來的的原因。目前很多中后臺產品對于進度條加載使用相對較少的原因，很大程度是沒有那種加載特別長的場景。
因此這兩種加載場景的使用會更加定制化，如果需要使用請根據具體的業務場景來進行選擇。
如果把加載動畫等比作頁面加載的外在，那么緩存和加載策略則是頁面加載的內核，合理使用緩存和加載策略可以從根本上提升我們頁面的加載速度，讓用戶更快速地看到頁面。
大家肯定聽過緩存這個概念，前后端都可以使用緩存。緩存就是數據交換的緩沖區（稱作Cache），是存貯數據（使用頻繁的數據）的臨時地方。在這里主要講一下瀏覽器緩存：
從這張圖可以看出，服務器在請求數據時，會進行緩存的判斷，如果有緩存則首先讀取緩存，如果沒有則從服務器中拿取。調取緩存會在很大程度上提升頁面的加載速度，縮短了從服務獲取數據的時間。通常瀏覽器會主動對頁面的靜態資源進行對應的緩存，這也就解釋了我們第二次進入頁面會比初次進入頁面時加載快的原因。
但程序其實也可以對動態資源（也就是需要從數據庫等拿到的資源）進行緩存的，并且可以設置緩存的過期時間（比如設置過期時間為1小時，那么1小時過后就會重新拉取新資源）。對于某些動態資源拉取過慢并且更新頻率不高的我們可以采用動態資源緩存的策略，從而提升整體的頁面加載體驗。
現階段我們常用的主要有下列6種加載策略：
加載策略的本質就是通過對應的加載設置來縮短產品與服務器交換數據的時間，接下來我們詳細看一下每種加載策略的具體使用策略：
懶加載是當內容落入視窗被用戶看到時，才會進行加載。這種比較節省資源和減輕服務器壓力。對于當前頁面內容很多的可以采用這種加載策略。而這種加載策略的設計，能夠讓用戶更快看到當前屏幕內的內容，減少等待時間。
比如蘋果官網的加載策略就采取了這樣的一種方式。我們可以看到右側的資源只有在我們向下滾動出現在屏幕中時才會進行對應的加載，這樣能夠保證用戶在進入網頁第一時間看到首屏內容，并且用戶幾乎感知不到這種加載延遲。
預加載是在頁面空閑的時候就把用戶即將用到的資源加載完存到緩存中，等用戶需要使用時，通過緩存直接調用呈現。比如用戶在看A頁面的時候，就可以通過預加載來準備用戶需要的B頁面資源。當用戶需要B頁面的時候，立刻就可以呈現。
比如某些頁面在實際中加載比較慢，這個時候就可以考慮是否用預加載的策略來提升網頁整體加載速度。比如知乎的視頻和文字在都進行了對應的預加載。即使當你處于斷網狀態（圖中我將頁面網絡切換為斷開狀態），可以看到依舊可以點擊全文進行查看和視頻的部分預覽。
當頁面中有文字和圖片時，優先加載占用網絡資源小的，比如文字資源，然后再進行占用資源較大的加載，比如圖片資源。通過分步加載也能有效減少頁面等待時間。比如大眾點評等圖片很多的網站往往會采用這種加載策略。
分頁加載是我們目前很常見的方式，比如我們常用的百度和谷歌等搜索引擎都是使用的分頁加載，分頁適用于數據量比較大的內容，比如表格數據或者大數據搜索場景可以使用。
分頁加載可以理解為當前獲取到100條數據，但是將100條數據分別拆成5頁每頁20條數據提供給用戶，這樣也可以讓用戶減少等待時間：
在目前還有一種滾動分頁的加載，就是不提供視覺上的分頁，而是當用戶進行滾動時，自動加載一定數量的內容，這樣從用戶的視角看就是一個連續不間斷的數據展示。比如一些資訊類的網站就是采用的這種加載策略，有的也把這種滾動分頁的方式稱為自動加載。
這里講的延遲加載更多的是一種防護加載機制，一般延遲設置的時間為300ms。這里的延遲加載有2種使用，第一種多用于搜索，通過延遲加載能夠讓用戶更好進行連續輸入，避免搜索結果被高頻率刷新，同時緩解服務器壓力。如下圖，可以看到我在輸入1后會有個延遲才出現加載列表，并且我在連續輸入12306的過程中是沒有對結果進行更新的，當我輸入完后才更新。
第二種則是通過延遲加載可以更好防止反復操作。當用戶在同一組件上面進行切換時，如果該操作小于300ms,則只記錄最后的點擊操作。這種情況可以用在我們的表格翻頁和開關等狀態上，防止用戶瘋狂點擊導致數據反復請求和屏幕閃爍的情況。我們可以通過下面這個組件演示例子來進行對應的感知：
延遲加載更多用于上述2種場景，對于其他情況的加載，直接加上就可以了，并不需要刻意設置延遲。
這里想要表達的含義是當用戶在操作后，客戶端立即反饋操作成功，然后把請求放到后臺與服務器交互，這一過程用戶不需要了解，不需要等待。無論在什么網絡環境下你基本上都能操作成功。比如微信的朋友圈發布就是這樣的操作，即使你在斷網的情況下都能夠立刻發布，但實際上這個時候并沒有發送成功，還需要上傳到服務器后才你的朋友們才能看見。
這樣的好處是用戶使用起來非常流暢，但是壞處就是，當操作不成功時，用戶并不能及時進行感知，仍然以為操作已經成功了。所以這種場景我們也需要根據場景進行對應的判斷和選擇。對于復雜的B端場景個人建議慎用或者不用這種操作，畢竟很多發布的功能會同時影響很多業務線。
這里就拿微信的朋友圈發布來進行舉例，下方手機狀態都為斷網狀態，可以看到微信立即發布，而貼吧在這種狀態下提示網絡錯誤。
通過這些加載策略的選擇性使用，能夠在特定環境下提升我們系統的整體使用體驗。因此我們需要對這些加載策略有一個比較全面的認識，這樣我們不僅知道加載慢的原因，還可以利用加載策略去提升頁面性能。
在整體的加載過程中，別忘了考慮加載異常的情況。在通常情況下我們會我們會遇到網絡速度過慢或者突然斷網這兩種狀況讓頁面一直加載不出來，這時我們需要考慮對長時間的加載過程進行處理。
通常做法是我們要對加載狀態有一個最長時間的限制，一般為加載不超過10s，超過最長時間后就進行異常狀態顯示（提示語+刷新按鈕）。這樣用戶可以選擇重新加載或者離開此頁面，而不是一直等待。
在這里還想到一點，就是對于編輯頁面，我們應當加入網絡連接是否異常的判斷，比如當進入到編輯頁面后，如果遇到網絡斷開，需要在頁面的頂部加上常駐提示條【當前網絡連接斷開】，這樣用戶能夠及時進行察覺并修復。避免在無網環境下繼續輸入。這對于某些需要輸入很多內容且并不提供本地保存的頁面來講是非常有必要的。
加載在設計中是非常容易被忽略的模塊，因為在大部分情況下網絡速度都較快，人們很難深刻地感受到加載過程。但加載卻在產品運行中起著不可或缺的作用。通過這篇文章想要告訴大家的有幾個點：
1.我們需要明白加載為什么會出現，這個過程是怎么樣的；
2.加載的通用處理手段是怎么樣的，非通用處理方式有哪些；
3.通過緩存和對應加載策略能夠讓頁面加載速度有本質上的提升。
這樣當我們在頁面上遇到加載速度慢的問題時，在為其加上動畫承載過渡的同時，還應該思考其加載緩慢背后的原因，是因為數據量太大還是加載策略的相關問題，是否可以將其進行懶加載或者分步加載，這時我應該去找前端或者后端如何溝通。從源頭上解決加載時間長的問題，才是后續產品設計過程中的長久思路。
作者：蒙東東 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
設計開始要了解設計的目標，用戶的行為都是有「目標動機」的，B端產品的業務目標往往都是為了為企業或個人為了解決某一項工作上的問題。
當設計過程以「目標」為出發點，可以增強設計判斷力，輸出更有效設計解決方案。
B端產品的設計原則：提高使用者的工作效率，同時降低業務鏈路的操作及學習成本。
當你有了目標以后你的設計就可以圍繞這個目標展開：
對于B端的產品而言，用戶最關心它能為實際的工作帶來哪些便利，而并非這個界面做的多么的好看，以及用戶體驗多么棒。所以B端產品設計價值優先級往往是 功能性＞表現力
B端產品設計需要站在整個業務線全局角度去把控各個設計點，不再是「用戶體驗」至上，為實現「任務目標」，「犧牲」一部分「用戶體驗」是必要的，這個時候視覺和一些體驗就不那么重要了。通過調研業務去了解各個角色職能的工作流程、相關痛點，讓產品能用，好用。
理想的B端設計需要了解業務目標以及業務鏈路中每一個環節的過程。將業務邏輯理解透徹再考慮應該如何進行設計實現。
這樣做的原因當你站在使用者的角度進行同理心設計可以更好的幫助用戶完成他要完成的工作，從而提高效率。產品原型一般基于「功能」本身，而設計師從用戶實際場景規劃用戶的任務流，可以優化產品邏輯，補全缺失場景，通過了解業務流程也能給予創造性解決方案
B端產品往往是是服務于企業用戶，用戶畫像需要專注于用戶特征中的「群體職業身份」這類人無論性別、年齡、地區有何差異，他們都是一類角色，我們的產品要提供給這類角色使用，而不是某個人使用。
由于B端設計師不是產品的用戶，無法沉浸在與用戶相同的真實場景中，建立共情。所以設計師最好親自感受一下業務流程，獲得一手的用戶洞察，
「通過業務人員交流」業務人員可以幫助我們快速高效的描繪出典型客戶案例的用戶畫像。
「實地走訪」：觀察在自然狀態下用戶如何完成工作任務，并提問題：「你怎么做？」或者「為什么這么做？」
「建立種子用戶群」：聚集活躍的種子用戶群，收集意見和建議，并在群里驗證設計想法。
「親身體驗」：成為真正的客服小二，接聽客戶電話，記錄自己在工作臺場景下的真實體驗和感受。
獲取用戶畫像后了解該群體背后工作感受，行為習慣，以及任務類型。
安全感和信任感建立：人們越來越關注隱私和信息安全。如果你要求必須填寫敏感信息，請確保使用字段下方的注釋文本解釋為什么需要這些信息。
實際工作中我們曾經自動獲取過用戶之前表單中填寫的的支付類賬戶信息，在收集的用戶反饋中，用戶會感覺到隱私正在泄露并讓用戶信任感降低。所以即使用戶輸入體驗會更好，但是考慮到信任感，敏感類信息請不要自動獲取。
讓用戶感受到你正在幫助他操作：Jakob Nielsen于1994年提出的十大可用性原則中，其最后一條原則Help and documentation（幫助性指導原則）是搭建B端用戶幫助體系的核心準則，在理想情況下，沒有幫助文檔就可以使用系統是最好的，但在某些情況下（尤其是B端系統），提供一些引導性的幫助其實是必要的。
B端系統中可以嘗試搭建用戶幫助系統：
對B端產品來講，設計師在設計的時候是不需要耗費太多的思考的，只是去按照交互設計師的規劃堆砌圖表和列表。但是對于使用者來講，其中縱橫交錯的商業邏輯和業務邏輯卻是給用戶搭建了一個十分高的門檻。
例如修改資料的時候，使用彈窗、浮層等等交互操作會減少頁面跳轉的頻率。
但是與此同時，減少頁面跳轉并不代表真正的高效，例如瑞幸的供應商系統，供應商所產生的訂單需要按照指定的流程一步步進行操作確保不會出現問題這樣雖然頁面的跳轉增加，但是可以避免操作出錯給用戶帶來更大的困擾。
設計要根據用戶的瀏覽習慣和視覺動線。要嘗試引導用戶的視覺，舉個例子，如何引導：
B 端產品是以業務為核心，是需要用戶長時間操作并完成工作任務的，對于操作和展示內容無關的元素，越少越好。視覺為功能讓步，追求簡潔、清晰、克制、理性的視覺風格。設計語言盡量做到不干擾不打擾。
輸入順序：先易后難；先必填后選填；先公開信息后隱私信息；有關聯性的合成一組，特殊問題后置，用戶輸入時、不會覺得突兀、門檻太高 。
自動對焦（PC端）進行表單頁面，自動對焦第一個輸入字段可以引導用戶開始進行輸入。
標題：標題是對下文最短最精的概括。用戶一般都會跳過表單內容，而且幾乎都不會仔細閱讀那種特別詳細的描述。所以用最少的文字說清楚一個表單的目的尤其重要。
用戶應該可以看一眼標題就知道他們應該怎么做，而不是非得把剩下的全部看完，
（附：這部分感興趣的同學可以搜索“微文案設計”）
在表單編寫方面，或者說各種寫作中，刪減詞語都要比添加詞語更加有益。 在仔細檢查不必要的詞語后，文章會更篤實，更連貫，更吸引人。
這個鏈接有什么用？關閉是點擊右上角的按鈕嗎？如果并沒有增效，那就是減效。每一個字，每一張圖片，都不是100% 必需的，這些都會降低你表單的轉換率。
刪除一個字段，表單提交率就可以提高 26%。（本篇筆記原本有12000余字，為了避免浪費大家時間，我僅保留4000余字的高頻要點內容）
PC端產品提示文字盡量不要放在框內
提示文字存在于框內常用在移動端，它的空間占比很小，對移動端的小屏來說，是非常友好的，但如果在交互上處理不好，會有很大的缺陷。
內部標簽結構，只有提示性文字，用作提示用戶應該輸入什么內容，但用戶在輸入的時候，內部的標簽/提示性文字就會消失，這時候，用戶會失去它是否輸入準確的唯一判別標準。
字段輸入通過部分人工智能自動將操作步驟可以變得簡潔高效 ，也包括諸如一些、自動定位、圖片識別、自動獲取，第三方導入等方式來使用戶的效率得以提升的功能。
打字是在線表單中最耗時、最密集的部分，而且經常會導致錯誤——尤其是在手機上。用按鈕、滑塊替換文本框并使用自動完成功能，將減少工作量并提高轉化率。
文本塊會更容易讓用戶記住內容：例如銀行賬戶、電話號碼等等。它指的是將信息排列成「塊」的過程，使內容更容易保留、處理和回憶。一份研究聲稱數字 3 是幫助人們吸收和回憶信息的神奇數字。
如果一個字段需要特定的格式輸入，請告訴用戶。例如密碼要求、語法規則、編號間距等等。
可以用輸入框長度提示用戶輸入的內容是否正確。
德萊厄斯研究所的可用性研究發現，如果一個字段太長或太短，用戶開始懷疑他們是否正確理解了標簽。
在用戶輸入的時候，右下角告訴用戶已經輸入了多少字，如果超過 限定字數后輸入框紅色，用來警示用戶，此時用戶依舊可以再輸入字符，但當出現警示，用戶繼續輸入一定數量字符后，系統需要強行限制無法輸入新的內容，避免用戶沒有察覺到警示反饋導致的過多輸入，從而浪費的時間。
（該部分感謝酷友@sh9513 提出的反饋）
如果用戶填寫錯誤，向用戶顯示錯誤發生的位置，并說明原因。
如果你的表單里的選項少于5個可以列出所有選項供用戶快速選擇，當大于5個時候可以嘗試用下拉框解決。
將第一個選項作為用戶最有可能的默認選項，且是最安全的選項，提前預判用戶的操作提升選擇效率。排列方式推薦數直排列，豎直排列相對于水平排列容易讀取和定位，提高用戶的瀏覽順序。
當前需要用戶填寫相對隱私的信息時，請給予解釋這么做的原因及目的。
完成表單的設計后可以給業務用戶進行簡單的測試，并記錄他們填寫的時間收集反饋，以及對這一連串的問題他們體驗如何。這也將有助于你下次評估表單的設計。
最后在情感化設計系統里記得感謝用戶填寫或者反饋問題，因為用戶是花時間的。所以請表示感謝。
表格的設計圍繞著「可讀性」和「易操作」兩個設計原則。設計易讀，易掃視，易比較，易操作的表格結構是表格設計的首要目標。
列寬有三種常見處理方式：
1. 根據內容的極限長度給出足夠的固定寬度；
2. 可以固定部分列的寬，其余列按百分比處理；
3. 列寬需要考慮最低寬度/最大寬度/文字極限狀態，內容為空狀態顯示方案；
4.需要設置列之間的最小寬度，表格響應式布局情況下最小不小于此寬度。
M-Densign規范中對齊方式會遵循如下規則：
表格的排序，應從用戶目的出發，遵循用戶查看數據的習慣，尊重數據之間的關聯性，設計用戶查看、操作數據的路徑，而非隨機排列（這部分可以在業務側調研時驗證，提高用戶體驗和閱讀效率）。
1. 文本信息/混合型文本左對齊，符合從左到右的閱讀習慣；
2. 數字信息右對齊，方便數字之間的直觀對比；
（該圖片感謝好友@晴藍 同學反饋的一個錯字，圖片已修正）
設計規范需要定義按鈕的四種狀態：正常狀態(Normal)、懸停狀態(Hover)、激活狀態(Active)、加載狀態(Loading)、禁用狀態(Disabled)
B端產品的開發一般涉及多個開發團隊協作，例如瑞幸的后臺修改按鈕顏色，都可能牽動10+工程師的協同。
所以B端產品在進行設計改版以及設計側調整時候要思考調整對于業務側是否有直接幫助，在設計和規范建立之前，切勿頻繁改動。
除了完全獨立設計開發的項目以外，還有大量的 B 端項目是采用第三方框架開發而成的，如 Ant、Element 等等。這是因為這些第三方程序可以幫助團隊節省大量的開發時間和精力。
作者：Cesare_玄漓 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
信息無障礙，是指任何人在任何情況下都能平等地、方便地、無障礙地獲取信息和利用信息。隨著互聯網覆蓋越來越廣，對于身體有局限的群體而言，更加迫切通過互聯網獲取信息，而這就需要互聯網產品進行信息無障礙的優化。在我國其受益人群至少包括：8500多萬殘障人士，2億多60歲以上的老年人，數量龐大。率先考慮信息無障礙能為產品增加優勢而帶來更多用戶。
如今智能手機掀起了一場無障礙輔助工具的革命，而站在這個關鍵點的互聯網設計師，也要開始行動起來，先從以下這幾個容易實現的事情開始著手進行無障礙的優化吧。
對視障用戶來說，是用聽取讀屏語音來了解你設計的界面信息的。讀屏軟件就像他們了解互聯網世界的眼睛，它的原理是直接讀出界面里的文字，如果icon按鈕未加無障礙標簽讀屏會讀為"無法發音"，那么視障者就無法獲取這些信息，自然也就無法使用你設計的功能。
解決的辦法是:
1.需要在產品代碼中添加無障礙標簽(Android :contentDescription ; iOS:accessibilityLabel在對應的開發者文檔里很容易找到，可以發給你合作的研發同學)。
2.裝飾性icon可隱藏標簽不讀，提升讀屏效率。不建議不做處理也不加標簽，那么用戶聽到的就是“無標簽”，這樣會讓用戶以為這里有什么重要信息讀不到而感到不安。
3.標簽語義簡短準確，盡可能使用動詞。
4.必要時需要走查焦點順序，確保不會被錯誤的焦點順序誤導頁面含義。
并且最好由設計師進行語義的標注，因為設計師才是對頁面里圖形應用最了解的人。避免出現“搜索”被寫成“放大鏡”、或者是“searchBtn_123”之類的情況。
顏色可以用來區分信息數據的類別和維度，也可以幫助傳達情緒等重要信息。然而，世界上有超過8%的男性和0.4%的女性都被色覺障礙的問題困擾。我們通常籠統的稱這類人群為“色盲”，他們是典型的識別顏色有問題的群體。
"色彩"的目標是"易于感知"，指的是互聯網產品的內容信息的色彩對任何人來說，都應該擁有足夠高的辨識度和舒適度，我從以下4個方向進行介紹。
1.更安全的配色
a.色盲人群：
設計師在進行設計配色時應時刻自測，避免明度相似的橙黃綠兩兩配色和明度相似的紅綠配色，因為這樣的配色勢必會造成色盲用戶的可讀性問題。并且，紅色在紅綠色盲眼中并不是一種明亮醒目的顏色。相反紅色對他們來說顯得非常深，而暗紅色則幾乎接近黑色。因此色盲人士很難分辨出文章內的深紅色的強調字，從而遺漏關鍵信息（設計時，可利用此插件模擬色盲眼中的顏色：Color Oracle） 。
b.文化差異：
因為色彩在不同國家文化中代表不同含義,所以對于國際用戶來說也是存在障礙的。在西方文化里，紅色通常用于表示消極趨勢，而綠色則表示積極趨勢，但在東方文化中卻正相反。
c.特殊群體：
臨床醫學研究表明對于部分自閉癥患者來說，高飽和高對比度的顏色，甚至只是黃色都會讓他們感到不舒服和不安，因此在自閉癥康復中心是不會出現過于對比刺激的顏色的。
另外，老年群體隨著年齡的增長，晶狀體變黃變渾濁，會選擇性的吸收藍光，從而導致老年人對藍色的鑒別能力下降明顯，如果你的主流用戶是老年人，請盡量避免將藍色運用到重要的按鍵中去。
2.更強的文本對比度
文本對比度與可讀性息息相關，它測量的文本顏色和背景色之間的明度差。WCAG AA對于文本對比度的規范是：4.5:1，若字號夠大（>18pt，或粗體>14pt）時，標準可降到3:1。如果滿足4.5:1這個標準會讓你的頁面視覺看起來不那么優雅，可以嘗試局部加強可視性的方法：
關于可讀性其他需要注意的點：盡量不要在圖片上疊加文字，除非你能保證圖片背景顏色單一且對比度足夠高。
Material Design設計規范建議，需要淡淡的遮罩確保上層文字的可讀性；并且不建議極高對比度的文本，因為這樣會使一部分視障者看到的字旋轉模糊。
3.更多樣的視覺變量
顏色是數據可視化中最常用的視覺變量之一。但是對于無法辨別顏色的用戶，如果顏色作為的唯一的提示信息，他們可能將無法理解你傳達的信息。那么有什么改善的方法呢?
a. 不讓顏色成為唯一的視覺變量：除顏色外，我們可以追加圖標、紋理或者文字來加以標注。
b.色盲模式：Trello作為一款工具產品，在標注信息時，提供色盲模式可打開和關閉，并用不同紋理加以區別，色盲友好模式是一個很好的范例，它可以有效幫助色盲，又不會妨礙非色盲用戶。
c.以明度飽和度為度量：雖然色盲人士對色相的辨識能力較弱，但卻對明度、飽和度非常敏感。我們可以使用明度或飽和度區分信息?？催@個例子：傳統熱力圖習慣用暖色代表熱力高冷色代表熱力低，Google Analaytics的熱力圖采用深藍色顯示熱度高的時段、淺藍色顯示熱度低的時段，簡單有效。
控件可以是按鈕、鏈接、輸入框或任何帶有事件監聽器的HTML元素?？丶』虮舜颂拷赡軙o用戶帶來糟糕的體驗問題。
比如對于無法用指尖精確定位的用戶（有顫抖疾病的用戶），或因年齡而導致靈活性降低的老年用戶，都會難以點擊過小控件。
為了給用戶足夠的間距來準確選擇控件，Material Design建議至少48×48dp，iOS設計系統將目標熱區尺寸最小值定為44 x 44pt，而WCAG對WEB的規范則建議至少44×44px。一個控件可以在視覺上是24 x 24px，但是在所有邊上都會有一個額外的填充使它達到44×44px。并且太靠近的控件可能會因誤點擊而帶來挫敗感，所以同時還建議控件之間的空間足夠遠以減少誤觸。Microsoft給pc的建議是至少有8px的間距，而Material Design推薦的控件至少間隔8dp。我們可根據以上規范來審視自己設計的控件。
1.文字大?。?/strong>
有視覺障礙的用戶可能會把字號調得很大。你需要保證你的設計在大字號的情況下內容不會溢出或排版錯亂。做設計的時候，可以使用2倍以上的字體測試你的設計。
在互聯網早期，設計了字號在9-14px之間的網頁，如今已與20年前不同，瀏覽器已經可以在任何尺寸設備上使用，小到智能手表大到4K熒幕，我們不能再使用固定的字號來設計產品了。字號應該與設計本身一樣具有響應性。例如可以允許用戶自定義字號、行高或字間距等以達到舒適的閱讀水平。
2.文字樣式:
文字作為傳達信息的重要載體，對于許多用戶來說，裝飾字體或草書字體都是比較難閱讀的。且用過細的、過小的、斜體和全大寫文本，也會降低識別度。
有效的動畫可以給頁面帶來生命感，但如果濫用動效不僅會分散用戶注意力，嚴重的話對某些用戶來說來說可能是致命的（光敏性癲癇的臨床誘因之一就是閃光圖像的刺激）。
1997年的一天，日本電視臺正在播放《精靈寶可夢》第38集“電腦戰士3D龍”，但就在這天晚上發生了600多名兒童昏倒在家中集體送醫事件，轟動了動畫界，任天堂的股價也隨之大跌。原來，為了達到震撼效果，3D龍的背景運用了“藍-紅-藍”的快速閃爍來表現爆炸，這樣高頻率的閃爍刺激了孩子們脆弱的眼睛，導致他們集體患上了急性光敏癥。也因為這件事日本開始著手對動畫片的制作制定規范。Twitter在2019年為了保護對閃爍圖像敏感的人員安全，也采取了禁用APNG動圖格式的措施。
另外WCAG 2.3.3官方說明，一些用戶會因滾動頁面的動效（例如緩動和視差滾動）而觸發大腦前庭疾病從而產生頭暈的癥狀，所以iOS、Mac、Windows 10都具有關閉動效的功能。
為了避免給特殊人群造成困擾，設計師在開始做動效之前，應該看看以下四條是否滿足：
1.動效每秒閃動不超過3次，發生的閃光區域不超過超過25％否則，光敏癲癇患者會有發病的風險。
2.避免過于夸張的視差和運動效果，因為大腦前庭失調者會引發眩暈。
3.避免有多個元素通過不斷移動、閃爍而分散注意力，因為這可能會讓注意力缺陷者產生困擾 。
4.如果有上述情況，需提供一些控件或選項來暫停、隱藏或者更改任何動畫或效果的頻率。
作為體驗設計師，研究無障礙會讓我們收獲良多。當然，目前所做的改進并非一勞永逸，而是我們與更廣范圍的用戶保持持續對話的開端。不斷改進產品的無障礙體驗，讓產品更友善，讓美妙的互聯網的世界變得更平等，我們希望能不斷向這一目標前進。
作者：百度MEUX 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
人類與其他物種最顯著的不同點之一是人類擁有與他人溝通和交流的能力。在整個人類社會的發展史中，溝通和交流行為需要雙方處在同一個物理空間中。但進入21世紀，虛擬空間的出現讓我們社交方式正在發生翻天覆地的變化，它已經成為我們每天生活的一部分，對設計師而言，虛擬空間設計仍是一個全新的、亟待探索的領域，我們有很多事可以做。
你或許聽說過元宇宙這一新興概念，它是一個增強的、或者說是一個完全虛擬的空間，我們需要使用VR頭戴設備和數字形象才能進入。在這個有社交距離的時代，元宇宙可以讓我們感受到更加緊密的社交關系：不論我們相隔多遠，我們都可以看到和感受到對方。包括META（前身為Facebook）在內的很多商業巨頭正在入局元宇宙，在他們洞察到的的商業機會上投資數十億美金，這些投資在未來將為大量的元宇宙設計創造機會。
考慮到這一點，這篇文章主要描述關于元宇宙設計的一切：包括元宇宙的概念、設計元宇宙的技術，以及設計元宇宙的工具。
元宇宙一詞首次出現在Neal Stephenson于1992創作的科幻小說《雪崩》中，講述了主人公在被稱為“元宇宙”的虛擬空間和現實空間中來回穿梭旅行。斯皮爾伯格的電影《頭號玩家》也描繪了一個在不久的將來會出現的類似元宇宙的概念，在電影中，主角生活在類似于虛擬現實中，與其他玩家一起在元宇宙世界中探索。
《頭號玩家》
雖然最初元宇宙可能起源于科幻小說，但它無法被單一的定義，它更像是創建一個沉浸式虛擬空間的想法，人們可以在其中自然地互動。你可以想象一個充滿數字形象的 3D 世界，它能提供全方位的數字體驗。
事實上，元宇宙并不是一個新興的概念，早在2000年，一款名為“第二人生”的平臺就已經擁有了許多在我們今天看來與元宇宙有關的功能。作為一個用戶，你可以在“第二世界”中完成與現實世界中相同的事情，但它與現在我們所說的元宇宙有一個關鍵區別——“第二人生”并不是一個必須要借助VR/AR設備體驗的互動世界，最主要的原因是當時的 AR/VR 設備還無法創造沉浸式的交互體驗。
從2022年開始，我們逐漸意識到，AR和VR才是組成元宇宙的關鍵元素，因為它們可以創造更加真實的虛擬體驗（并且我們已經擁有可以使其實現的技術）。只要用戶戴上頭戴裝置，他們就能立刻進入一個完全不同的世界。盡管用戶周圍的所有物體都是虛擬的，但它們對用戶來說是真實自然的。
下面是一些日常交互行為如何在元宇宙中應用的示例：
工作
辦公室這個場景其實可以自然的進化成元宇宙，因為現在流行的混合辦公模式（一部分員工在實體辦公室辦公，一部分員工遠程辦公）非常適合在元宇宙中實現。無論人們住在哪里，他們都可以作為一個團隊一起工作，因為元宇宙給了他們一種共享物理空間的感覺。Oculus 的 Horizon WorkRoom就是一個很好的例子。
培訓課程
元宇宙可以成為學習的絕佳場所，它可以讓學生與老師或教練在元宇宙中進行實時互動，就像在現實中上課一樣真實自然，你甚至可以認為他們是同處于一個空間中的。
游戲
元宇宙很可能會首先在游戲行業中脫穎而出，自然而然地繼承許多游戲設計的許多屬性。比如元宇宙里的內容可能會由用戶生成，并且元宇宙鼓勵用戶長期參與。
從設計師的視角來看，元宇宙是擁有許多可交互的服務的巨大平臺，用戶可以在其中完全自主的選擇他們想要的服務。進入元宇宙需要用戶創建數字形象，它不僅僅是用戶名和圖片，更像是用戶真實形象的數字孿生，用來與虛擬世界中的任何對象進行交互。就像真人一樣，數字形象有一個身份來幫助用戶進行訪問。
用Oculus Quest來創建屬于你自己的形象
元宇宙有很大概率成為Web3.0的關鍵元素，這是基于區塊鏈的新一代更加民主化的互聯網版本。產品設計師將專注于創建 3D 空間，這些空間可以是現有物理場所（即家庭、辦公室、俱樂部），也可以是一個全新的世界（空間站、卡通世界等），但無論是什么樣的虛擬空間，它都應該讓用戶感到舒適。
虛擬辦公空間. 圖片取自Meta.
為元宇宙設計意味著設計一個完全沉浸的世界，設計師需要更全面更綜合的能力。
下面列舉了設計師在設計元宇宙時需要特別關注的幾個領域：
可用性是優秀設計的基本屬性，創造一個易用的元宇宙體驗是非常巨大的挑戰，因為許多關鍵的設計因素都會對用戶產生消極影響，比如暈動病（motion sickness）：用戶長期佩戴 VR設備所帶來的頭暈、惡心等癥狀，設計師在設計元宇宙的體驗時就應該想到這一點，并想辦法進行優化。
元宇宙設計目前仍舊處于早期階段，這提供了從一開始就構建易用性體驗的絕佳機會。設計師不應該只是在已有的經驗基礎上進行適配，而應該找到新的、更舒適的方法來幫助用戶長時間停留在虛擬空間中。
技術造成的暈動病。圖片來自Harmony.
互聯網時代的用戶習慣瀏覽網站和應用程序來獲取內容，那么元宇宙中，用戶會期待什么樣的內容呢？答案很有趣：和現在他們每天正在獲取的內容一樣就可以了。在元宇宙世界中，用戶會選擇他們熟悉的內容進行互動，比如文章、視頻、音樂、電影等等。但他們消費這些內容的方式可能不同，比如元宇宙中用戶無需購買大屏幕電視即可觀看電影，他們可以依靠他們的頭戴設備。
從設計的視角來看，在元宇宙中內容以最適合的形式展示給用戶這一點尤為重要，但目前還沒有簡單且正確方法可以實現這一目標，因此設計師必須嘗試各種內容形式，才能找到適合在元宇宙展示內容的形式。
元宇宙是一個擁有數字商品的數字世界。數字商品有它的局限性，你不能把它們帶到物理世界中去，但它們也擁有巨大的優勢——你在元宇宙中購買的數字商品可以以不同的方式在不同的環境中使用。例如，你可以購買一頂棒球帽，在你最喜歡的游戲和辦公室中佩戴它，使其成為你個人風格的重要組成部分。當然，這個功能目前只是一個構想，需要那些在元宇宙運營的公司愿意支持數字商品在不同場景下的切換時才有可能實現。
去中心化支付是元宇宙體驗的重要一環。在虛擬空間中用加密貨幣支付數字商品比用真錢支付要方便得多。加密貨幣可以在用戶加入的所有不同虛擬世界中發揮作用，在今天，一些虛擬世界也證明了這種商業模式的可持續性。Decentraland就是一個很好的例子，它是一個 3D 虛擬世界平臺，提供自己專有的貨幣，名為 Mana。
從技術角度來看，AR 和 VR 設備的質量在未來一定會大幅提升，它們是用戶進入元宇宙的硬件基礎。在過去，AR技術被認為是邁向虛擬世界的第一步，但隨著技術不斷進步，我們逐漸發現虛擬世界的真正力量將通過 VR 展現?？梢灶A見的是 VR 技術在未來會更加吸引用戶，因為它可以創造一種逼真的感覺，一種讓用戶沉浸在交互中的體驗。
以下幾個方面值得在設計時重點關注：
環境理解
理解物理環境中的用戶。景深和透視是物理環境的兩大特征，因此，VR 設備中的傳感器將能夠映射用戶周圍的世界，以便設計師可以在創造沉浸虛擬世界的同時保證用戶的安全。
真實的面部表情設計
眾所周知，人類之間的互動很多都是不依賴語言的，面部表情可以幫助人們傳達感受，因此，數字形象要像真實的人與人交互一樣傳達人類情感。
VR手勢設計標準化（頭部、手部和身體移動）
設計標準化將會制定一些通用交互模型，這樣當設計師為元宇宙制作產品時，用戶將更輕松地學習如何使用它。
聲音交互
以聲音為基礎的交互很可能成為虛擬世界中的一個重要組成部分。對用戶來說，在私密環境中用語音進行交互要比在公開場合更加舒適。
在元宇宙中，侵犯在線隱私的行為會讓用戶感到被冒犯，所以從元宇宙設計第一天開始，隱私、安全和數據保護就應該是重要的組成部分。
不僅如此，防止網絡霸凌也應是元宇宙設計中不能忽視的一部分，用戶應該有自由決定他們在何時想和誰在一起的權利（或一個人獨處，或去公司上班），并將那些對他們產生負面影響的人從他們的社交圈中移除。產品設計師需要與數據安全專家以及行為心理學家密切合作，以創建更安全和人性化的服務。
談到元宇宙，或許我們腦中會想到一些基于廣告曝光的商業模式，因為在元宇宙中植入廣告將會是一件收入頗豐的生意，然而事實上，將廣告植入虛擬世界需要謹慎、謹慎再謹慎。
想象一下，在你未來生活的元宇宙中，一些公司為了能更有針對性的為你提供服務，會跟蹤你并記錄下你的一舉一動。這是一件讓人非?？謶值氖?，雖然元宇宙的創建者可能并不會這么做，但我們必須意識到這樣做的風險非常高，特別對于那些把廣告曝光作為商業模式重點一環的商業巨頭來說（比如Meta），需要非常嚴肅的去思考是否可以接受過度廣告植入帶來的風險。
這里列舉了5個設計工具，對于想要設計元宇宙的設計師來說，這些工具都應該派上用場。
故事板是來自電影行業的創作工具。它是一個圖形組織板，其中包含按順序顯示的動作場景的圖片，這些能讓工作人員更容易理解場景的性質和演員必須傳達的情感。就像拍攝電影一樣，如果沒有好的故事講述，就不可能創造出身臨其境的虛擬世界體驗。
故事版案例。圖片來自NN Group.
元宇宙是一個天然的3D世界，這個世界越真實，用戶越能夠進入沉浸式的體驗。對于想要創造元宇宙體驗的設計師來說，最好能成為3D建模大師，熟練使用如Blender、Cinema 4D、Houdini等建模工具。
使用 Blender 創建房屋模型。圖片來自Blender.
設計師如果只通過搭建一些高質量的3D物體（例如房子、汽車和其他人類環境屬性）就想創造出一個元宇宙，那幾乎是不可能的。讓元宇宙看起來和現實世界一樣真實的關鍵因素是如何能讓設計的物體之間的相互協作達到和諧統一。為了設計出一個擁有健康社會的的虛擬世界，設計師應該了解現實世界是如何運作的，這就是產品創造者必須學習人類學、建筑學和城市設計的原因。
諸如用戶訪談、問卷、非參與性觀察研究（在不知道被觀察者的情況下進行觀察）等方法對于創建好的用戶體驗來說非常重要。
創造真實的交互對設計師來說是首要目標。在設計互動體驗時，很重要的一點是不要白費力去做重復的事情，使用一些在過往設計中驗證過的經驗和方法會更有效。
現在，有一些工具可以幫助我們做到這一點，其中很重要的一個工具是“交互SDK模塊”（Interaction SDK)，這是一個模塊化組件庫，元宇宙設計師可以在其產品中使用。在這個組件庫中有很多元宇宙會用到的的基本框架和對象，比如基礎手部控制模型、距離計算器、手勢檢測等等。
使用交互 SDK 創建的虛擬手部和控件。圖片來自Macprotricks.
對于設計師來說，僅僅將一個產品設計出來是遠遠不夠的，我們還需要對設計的產品不斷的進行測試，看看它是否能為用戶提供出色的使用體驗。情景研究是一個非常好的方法和技術，這項技術可以幫助設計師直接了解虛擬世界中發生了什么，以及哪些設計領域需要改進。通過沉浸在你所創造的體驗中，你會看到它的優點和缺點。
元宇宙代表了數字技術進化歷程的下一個階段，最終元宇宙設計將融合人們的真實生活和虛擬生活。人們不僅會在元宇宙中互動，還會在元宇宙中生活。目前，我們正處于這一旅程的早期階段，它為產品設計師提供了一個塑造互聯網未來的絕佳機會。
作者：Nick Babich 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
所謂的“產品設計導向”指的是產品建設之前要圍繞著產品的立項、目標用戶等等去規劃產品的功能點，明確產品核心價值；在產品上線之后，通過數據分析和功能反饋，發掘更多的需求，去規劃下一步的”功能增刪改“，將產品的設計方向引導到更正確的位置，提升用戶留存率，延伸挖掘出產品更多的可能。
另一方面，從現在的設計環境而言，對所有的設計師既是機遇，又是挑戰。大量的UI專用工具（Sketch、Principle、Flinto、Origami等）的出現，大大提升了產品前期的UI設計師的工作效率，所以現在“全鏈路思維”已經從剛出現時的“概念化思維”變成了“主流化趨勢”。所以現在很多的UI設計師在站酷發布自己的作品的時候大部分都喜歡加入一些產品前期分析（功能設計、用戶畫像等）內容。
但是很多設計師的分析環節明顯就是為了證明“有”而去“做”，缺少了真正的分析部分。給我印象很深刻的就是之前看到的一個二手房買賣的UI設計作品，典型用戶畫像里主流用戶是：“男、七十歲、目標是給自己的兒子購買婚房”。實際上這種所謂的產品分析流程對于設計師而言是沒有任何幫助的，只是從形式上走個過場罷了。
本篇主要講述產品設計中的一些分析方法，范圍從“個人練習式設計”到“團隊合作式運作”，知識點大概有：空雨傘思維、文章大概六千字左右，建議閱讀時間：15分鐘。適讀人群：初級產品經理、交互設計師、在工作中職能范圍與產品規劃有關的UI設計師、想要學習產品設計的新人（文中含有大量配圖用來輔助觀點，因此建議PC端閱讀）。
產品運作流程概覽
我遇到的比較普遍的問題是：很多設計師對于自己所在公司產品的運作流程并不是十分了解。這樣會在你實際配合工作的時候感到無從下手。有的甚至于同一家公司的不同設計師對于產品設計方面的理解也不盡然相同。所以說要從淺到深的學習產品功能設計，就必須先理清當前工作的常規流程，例如常見的產品運作流程（如下圖）
上面是一個相對規范的產品開發流程，實際上你在看到上述流程圖后，對照自己公司的情況，會發現有一些崗位上的缺失。出現這種情況最大的原因是因為很多公司會把一些職能進行合并用來節省成本，現在仍然有大多數的公司并沒有交互設計師的崗位，但是交互設計的職能不代表沒有，而是被產品經理或者視覺設計師兼任了。你需要明確團隊中各個人負責的職能部分，才能更好地提升溝通效率。
個人思考方法（一）：空·雨·傘
上面講到了設計師的“全鏈路思維”現在已經成為了一種主流的觀點，將來的前期的鐵三角“產品經理、交互設計師、UI設計師”很有可能結合變成是“交互視覺二合一”甚至是“產品交互視覺三合一”的狀態。所以現在很多的設計師開始嘗試自己去DIY一個需求或者做ReDesign這樣的設計，希望可以通過這樣的方式完成自己跨領域能力的一個積累。但是當他們打開電腦的時候，大部分人會發現自己突然變得沒有思路，從產品方向點確定到產品視覺產出之間出現了斷層。
其實做過設計練習的人都知道，由于一些現實場景的不同，一些人在做設計練習的過程中會受到很多條件的局限，尤其是在孤立無援的情況下，你面對自己的練習作品往往會無從下手。當然，不同的場景下有不同的分析方法。
在團隊協作的時候，分析方法要全面、嚴謹、反復推敲。
在個人練習的時候，分析方法要高效、直接、簡化不必要的流程，以培養自己的分析能力為主，在這種場景下，空·雨·傘就是一個非常好的思考提升方法（如下圖）
簡單概述“空雨傘”思考方式：觀察（事實） → 思考（內在） → 產出（解決方案）
運用在設計上就是：發現痛點 → 思考原因 → 提出解決方案。“空·雨·傘”因為簡單、成本低、易上手，可以作為設計入門培養思考能力的一種方法，但是在使用空·雨·傘的分析方法時需要結合一定的具體調研（或者輕量級的用戶研究）相配合，不然又會變成一味的“拍腦門兒”式的主觀臆測，對于分析能力提升沒有絲毫幫助。
個人思考方法（二）：邏輯樹
邏輯樹又稱問題樹、演繹樹或分解樹等。很多咨詢公司分析問題最常使用的工具就是“邏輯樹”。邏輯樹是將問題的所有子問題分層羅列，從最高層開始，并逐步向下擴展。
簡單來形容一下邏輯樹：把一個已知問題當成樹干，然后開始考慮這個問題和哪些相關問題或者子任務有關。每想到一點，就給這個問題（也就是樹干）加一個“樹枝”，并標明這個“樹枝”代表什么問題。一個大的“樹枝”上還可以有小的“樹枝”，如此類推，找出問題的所有相關聯項目。邏輯樹主要是幫助你理清自己的思路，不進行重復和無關的思考。
如果你要運用邏輯樹方法去分析產品，主要的一點在于學會細化拆解目標。
舉個例子：
在2017年我創建了自己的個人站酷號，但在發布了一部分的文章之后，我開始意識到文章的可讀性始終不高。在這個時候我們就可以按照邏輯樹的分析方法去進行拆解分析，去發現自己提升的空間。
如上圖，就是邏輯樹最簡單的一種場景應用。確定目標后向下進行拆分，拆分出三級邏輯樹是比較容易的，甚至你可以沿著已經列出來的大綱繼續深入細化，再拆分出更細更深層的各種提升點。
邏輯樹分析法在個人作品中的主要作用是發散思維；在實際工作中的作用則是針對特定問題進行分析，理清思路?？偠灾?，是讓你在分析的過程中更加有條理，避免重復思考。但是邏輯樹分析也有一個缺陷，就是在邏輯樹分析的過程中，根據現象分裂出子層級的步驟十分依賴你的認知能力，就如同做設計一樣，當你感覺界面的視覺出現出題的時候，需要利用你學出來的知識去進行視覺優化，如果你對設計理論知識掌握程度并不是很強，那就不能采用邏輯樹分析法解決問題。
總而言之，邏輯樹分析法適用于對問題研究十分深入的情況下，如果你對當前的環境認知并不充足，那么就很容易走入歪路，跑偏主題。
實際項目：用戶調研訪談
在一些實際項目中，用戶調研是需求來源的主要渠道。提起用戶調研，很多人會覺得這不屬于UI設計師應該做的事情。其實行業逐漸規范的現在，用戶調研、分析需求的能力也成為了衡量UI設計師能力的一個標準?，F在的互聯網產品種類繁多，從早期只做主流行業，到現在基本所有的冷門行業都有涉及；作為設計者而言，大多數設計師已經開始在設計的過程中心有余而力不足。
造成這種現象的主要原因為是因為隨著行業的細分以及范圍的擴大，我們距離用戶的真實場景偏離太遠，導致我們在設計中很容易理所當然的賦予給用戶大量無用的東西。偏離了用戶所需要的主要軌道。因此對于很多的設計師來說，學會了解用戶以及分析需求成為了十分重要的事情。
然后整理了一下我在用戶調研過程中的幾點認知：
第一，保證調研的目標的準確性
我們需要明確，我們希望通過調研達到怎樣的目的？（例如：提升部分頁面轉化率、收集用戶對于產品不滿意的地方、通過用戶使用產品發現用戶潛在的痛點）
第二，有目標的選擇用戶
一般來講互聯網公司都有收集客戶反饋的部門，他們掌握著所有客戶的反饋意見。我們在選擇調研用戶的時候，最好可以根據我們在調研行動確立初期擬定的目標去選擇調研目標
第三，適當的準備調研內容
當我們確定了調研目標和調研用戶之后，就可以根據現有狀況去準備調研內容。調研內容一定是要在事先擬定好（開始調研之后根據實際情況進行改動）
一般市場調研細分的維度通常有四種，分別是：地理、人口統計、行為、心理統計。運用在互聯網產品里面就更加的復雜。以B端產品為例：我們在調研中可能要把調研對象分為客戶（老板）和用戶（業務員）去進行不同情況的信息跟蹤，而且根據產品的屬性不同，需要提前預設好調研內容的側重
第四，調研過程中
在調研過程中，我們可以適當結合上文講述到的“空雨傘”方式去進行調研觀察，收集用戶需求（如下圖）
在調研過程中，除了思考之外更多需要注意的是對用戶洞察的記錄與剖析，在記錄用戶行為的過程中，需要遵循“不干擾”、“不引導”、“記錄客觀”等原則，這樣可以才可以保持用戶行為記錄的準確性。
第五，獲取反饋整理結果
在調研結束后，我們應該產出一份完整的調查報告，按照本次調研預設目標進行整理，規劃出合適的大綱，把調研收獲轉化為明確的產出，產出形式最好以報告（PPT、PDF），而不是口述或者微信消息，這兩者之間差別很大~
需求歸類：KANO模型
雖然說現在很多的公司都開始建立了用戶體驗類的部門，但是因為用戶調研或者體驗類的工作很難去量化產出。而且在大部分情況下當產品按照用戶調研反饋的結果進行調整后，往往很少會出現我們幻想中的“逆襲”、“口碑急劇上升”，有時還會因為受到一部分用戶觀點的帶偏導致產品口碑下降，用戶表示不滿；又或者會出現需求級規劃混亂，重要功能反而后上線這種尷尬的情況。
所以這驅使著團隊中負擔“用研用體”職能的角色對用戶需求進行正確的分類和排序
這個時候就可以運用到卡諾模型（KANO模型）。
KANO 模型是東京理工大學教授狩野紀昭(Noriaki Kano)發明的對用戶需求分類和優先排序的有用工具，以分析用戶需求對用戶滿意的影響為基礎，體現了產品性能和用戶滿意之間的非線性關系。根據不同類型的質量特性與用戶滿意度之間的關系，狩野教授將產品服務的質量特性分為五類：
1.基本型需求
用戶對企業提供的產品或服務因素的基本要求。是用戶認為產品“必須有”的屬性或功能。當其特性不充足(不滿足顧客需求)時，用戶很不滿意；當其特性充足(滿足用戶需求)時，用戶也可能不會因而表現出滿意。對于基本型需求，即使超過了用戶的期望，但用戶充其量達到滿意，不會對此表現出更多的好感。
例如對于網盤類產品來說，用戶的基本需求是有快速的上傳和下載。如果下載速度達不到用戶的期望，則用戶滿意度將一落千丈。對于顧客而言，這些需求是必須滿足的，理所當然的。對于這類需求，企業的做法應該是注重不要在這方面失分，需要企業不斷地調查和了解顧客需求，并通過合適的方法在產品中體現這些要求。
2.期望型需求
提供該功能，用戶滿意度提高，如果不提供該功能，用戶會感覺到不滿。當然在這里要補充一句，這里的需求并不都是我們整理出的主觀需求，也有可能是用戶在使用的過程中產生的客觀類需求，例如遇到不會的體驗，需求得到響應時我們給的反饋
例如對于一些O2O類的產品，雖然做的都比較成熟，但是由于體量龐大的原因，偶爾也會受到糟糕體驗，用戶在受到糟糕的體驗之后往往會期望能通過反饋得到心理上的安慰。例如攜程（旅程預計時間偏差）、美團（酒店體驗差）、餓了么（用餐體驗差）等。在用戶遇到這種糟糕體驗之后，期望能通過投訴建議獲得官方的反饋，那么官方把這種問題解決的越圓滿，用戶的滿意度也會隨之提高。
3.興奮型需求
又稱魅力型需求。指不會被用戶過分期望的需求。對于興奮型需求，隨著滿足用戶期望程度的增加，用戶滿意度也會急劇上升，但一旦得到滿足，即使表現并不完善，用戶表現出的滿意狀況則也是非常高的。反之，即使在期望不滿足時，用戶也不會因而表現出明顯的不滿意。
4.無差異型需求
不論提供與否，對用戶體驗無影響。是質量中既不好也不壞的方面，它們不會導致顧客滿意或不滿意。
5.反向型需求
用戶沒有這個需求，提供后用戶滿意度反而會下降。
按照kano模型分析可以對收集到的產品需求進行分類，篩選掉一些不合理的需求。更好更有目的性的完成產品待辦清單的記錄。
作者：千夜Ryan_Vision 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
咱一起來聊聊排版的問題：
如果你看過我過往的文章，也許會對我的排版多少有點印象，夸張的大字，極強的對比，還有一些微妙的層級關系；坦誠的講，我的風格揉雜了 2 種設計體系 —— 瑞士風格 / 擬物風格；
整潔、嚴謹、工整、理性化、實用的特征是瑞士平面設計的精神所在；這種一絲不茍，傳達準確的風格，即所謂瑞士國際主義風格。簡單的說，由于 Swiss Design 這種風格簡單明確，傳達功能準確，因而很快得到世界范圍內的普遍認可，成為戰后影響最大的一種平面設計風格，也是國際最流行的風格，因此，又被稱為國際主義平面設計風格；
簡單的說，瑞士的這種設計風格典型的代表就是我們看到的雜志，其中有 3 個特點：講究網格 / 非常理智的克制顏色的使用 / 層級關系；有趣的是，審美和潮流是循環的，隨著時代的發展，越來越多的app開始重新挖掘出來瑞士風格并加以使用，比如我們iOS系統自帶的應用們，Spotify：
年少的時候，我經常看著這些個app會不禁的問，為什么在沒有一張圖片的情況下還能如此好看？這些年終于明白了前人良苦用心：文字是內容，同樣也是構成；是信息，同樣也是裝飾；簡單可以理解為，不管在平面還是網頁亦或者是UI界面，在沒有可用的裝飾下，信息本身要承擔起裝飾和傳達的雙重功能，這就是瑞士風格的核心本質。
iOS是擬物的典型代表，網上對于這塊的講解已經過于飽和了，我也沒必要贅述；那么這一趴，來聊聊對我產生深遠影響的錘子科技吧。我第一次接觸到 smartisan OS 并沒有覺著多么驚艷，潛意識里只不過是覺著把 iOS 的圖標畫的更漂亮了一點而已…
但當我打開下圖這個頁面的時候，我意識到我對擬物的理解還是淺薄了，第一次被光影的層次震撼到：
通過光影塑造了一個三維空間，讓整個畫面豐富飽滿，也打破了我幼稚的設計觀，PS.不管錘子科技現在如何，我依然敬佩 Paco / 方遲 / 羅子雄的設計團隊為這個行業做出的貢獻，respect！
毫無保留的說，我的設計就是二者的融合，以 層次對比 作為核心理念。
啰嗦了半天，趕緊進入正題；如果你是一名產品體驗設計師，一定聽說過 “奧卡姆剃刀” ，這個定律通常用在交互鏈路的設計上（意思就是在用戶路徑中沒必要的步驟，省了就完事了），“如無必要，勿增實體” 即簡單有效原理；
通常來講，如果想要不平，把二維空間轉化成三維空間是必要的一步，需要在Z軸上下功夫；如果你恰巧也是一名攝影愛好者，可以想象下照相機的焦距和景深，工作原理是相同的，需要 前景 / 主體和背景 三個層次；當然，虛實的對比對信息的呈現和層次的拉開是極其重要的，這里需要通過景深來控制效果，你可以通過 photoshop 濾鏡-模糊畫廊的“場景模糊”來做到：
另外，空間的感覺想要被突顯，那么“光影和空氣”的價值就可以無限放大了，按照如上所說的結構，把內容和自然物質擺進去就好了，甚至可以做到舉一反三（比如不同顏色的氛圍，我就不展開了）：
整個case下來，你會發現用光來聚焦在信息上，自然而然就形成了我們說所得 “信息優先級”；有點時候空氣和光影的飽滿程度超乎你的想象，這種自然存在的物質可以很好的幫助畫面分層，以達到填充的效果，并不是一定要依賴于實體化的裝飾。
本來不打算再開一個章節說這個，但還是覺著很有必要再說下（我好糾結），作為PPT來講，ta的主要用途分為兩種：其一是給人看的，其二是給人講的；不管是哪種，盡可能的簡化文字，是對輸入者關愛；
以上圖為例（實名diss自己的作品），坦誠的講左邊的部分大多數觀者是不會有心思來看的，按照視覺系統的處理，這部分就會被當成一個“面”而被忽略掉，這種情況下右邊顯得有力很多，也能幫助觀者聚焦信息，所以還是那句話，能不寫的就別寫，能少些的別多寫，保持信息的密度也是設計師必要的職責之一。
作者：負能量的補給站 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn