今年是騰訊發起99公益日的第七個年頭。騰訊公益不僅在配捐機制、產品體系、企業聯動、公益基礎建設上全面升級，還連接數億網友、近萬家慈善組織和愛心企業，為全民公益交出一張漂亮的成績單：
數據顯示，小紅花互動人次超1.25億，送小紅花、答公益題目等行為公益實現破圈傳播，億萬愛心網友共同領取了超9000萬朵助力小紅花，共計有超過6870萬人次在99公益日期間捐出35.69億元，加上騰訊公益慈善基金會的6億元資金支持，共募得善款41.69億元。
99 公益日為何能實現破圈傳播，作為騰訊公益日和 99 公益日的品牌符號，小紅花的設計背后又傳達了怎樣的思考？今天就來聊聊小紅花那些事。
2015年9月9日，騰訊公益聯合國內數百家公益組織、知名企業共同發起了中國第一個互聯網公益日。
為了讓用戶了解互聯網公益的核心特色與參與方式，讓更多的人參與到互聯網公益中，第一屆 99 公益日的活動主題定調為“一起愛”，在logo的設計中也借用了“無限”符號表示“愛無止境”的含義。
在前三年的 99 公益日中，募款額度得到了廣度上的增長，在用戶已經了解到互聯網公益低門檻、多形式、透明度、可記錄的特點之后，如何留住用戶，對互聯網公益形成日常習慣和持久投入，就成為了設計亟需解決的問題。
“小紅花”是騰訊公益平臺在2018年給出的答案。因為小紅花作為國人的集體回憶，關聯著你我兒時從老師那里收獲到的鼓勵。每一朵小紅花背后，是我們完成的一件“好事”。
延續小紅花的記憶線索進行延展，在公益中，小紅花是對用戶的捐贈給予的最大肯定，是受助者正在發生的改變。在傳播上，小紅花是記錄用戶每一次公益行為的符號，通過「戴小紅花，一塊做好事」而得到成就感的有效激勵。
于是，2018年99公益日的主視覺上，無數的愛心化為花瓣，匯聚成一朵小紅花，這是小紅花在騰訊公益平臺的初次綻放。
為了讓品牌有延續性，加深用戶對小紅花和99公益日的認知，小紅花作為核心品牌元素開始貫穿在每一年99公益日的主視覺中，并通過不同的畫面故事表達每一年的主題。
比如，2018年的主題是積小善，成大愛，于是在設計中，讓很多愛心小花匯聚在一起，讓小的愛心變成大愛；2019年的主題是一塊做好事，通過每個人的善意匯聚成小紅花……
在2019年，“小紅花”正式成為騰訊公益與99公益日的品牌符號。
從2020年開始，小紅花開始發力于傳播，聯動外部品牌 IP 如QQ、微信、Bilibili、狐妖小紅娘等開啟推廣，在各種不同的場景，詮釋“一塊做好事”的內涵。
這一年，小紅花之歌火了，同名神曲MV播放量超1億次；在線下，小紅花也開到喜茶等連鎖品牌的店里。
而2021年，屬于用戶獨特的小紅花愛心賬戶上線了，用戶在騰訊公益平臺做好事打卡，向好友發起集小紅花的自發傳播，從而爭取更大的配捐額，在增強用戶捐款積極性的同時，撬動更多用戶了解并參與到活動中來。
小紅花愛心賬戶
用戶還可將積累的小紅花兌換周邊禮品。在推廣上則從創作入手，發起共繪小紅花的活動。
可以說，小紅花串聯起了用戶從感知、到行動、到反饋的全流程，保證了用戶參與互聯網公益的動機和動力。
在預熱推廣階段，騰訊公益推出一支小紅花為主角的宣傳片，試圖為小紅花是什么，做出來自官方的定義。
不管是線上線下征集用戶繪制的小紅花，“每個人的小紅花”畫展，還是在感恩日隨證書送出的小紅花畫作，都讓用戶全方位地感受到騰訊公益小紅花的“玩法”，也為小紅花元素賦予了豐富的內涵。
征集到的部分小紅花作品
寄出公益榮譽證書
愛心用戶的開箱視頻
99公益日期間，小紅花與騰訊新聞、微保、騰訊視頻、騰訊會議等多產品的玩法聯動，讓小紅花開遍“地球村”。
多款產品聯動一塊做好事
而在線下，小紅花也伴隨系列廣告，落地在線上下，IP聯盟、異業合作、核心城市燈光投影秀等，讓小紅花無處不在。
部分城市地標燈光投影秀
最后，小紅花這一品牌形象的成功，不僅在公益設計這一領域上有借鑒的意義，在品牌IP的設計上同樣有值得學習的地方。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
設計師日常工作中，經常遇見的那些顯而易見的設計邏輯，卻難以給出設計理由的情況到底指的是什么呢？
以我自己近期的工作為例，不妨為大家舉個簡單的例子：
下圖是一個補貼規則的設置流程，在用戶未設置補貼規則之前，明確告知用戶還未設置補貼規則，當用戶設置了補貼規則后，可以對補貼規則進行修改。
我認為這是一個非常簡單且合理的頁面路徑跳轉，并且在很多現有的產品中都有類似這樣的邏輯存在。然而在與上下游同學對接的過程中，卻遇到了不同的意見：有人認為沒有必要區分用戶是否設置了規則，用戶未設置規則可以直接展示系統默認的補貼條件和補貼范圍，如果用戶認為不合理，自行修改便是。
不知道大家看到這里是什么感覺，我在聽到「方案二」時的反應是：能夠理解卻并不認同，說不出來哪里不對，就是覺得這事它不應該這樣。
以上，就是在我工作中發生的一次非常具體的案例。
那么為什么我會產生“感覺哪里不對，卻又說不出為什么”的強烈感受呢？
最直接的原因是，這樣的設計方案（方案一）是用直覺做出來的，缺少了對方案本身的思考。
直覺，指的是那些沒有經過分析推理的觀點，因此常常給人一種不靠譜的感覺。
可是有時候我們依賴「直覺」做事真的就完全不靠譜嗎？帶著這樣的疑惑，我去查閱了一些相關的資料來輔助我更好理解這種直覺性思考，恰好找到了一個真實的實驗案例：
1997年，Bechara, Antoine et在一個賭博游戲實驗中發現：「直覺」比「意識」更能指引正常人做出有利的的選擇。
該實驗先后邀請了10名正常人和6名前額葉損傷的決策缺陷患者，以探究人們做出正確選擇是在對相關知識進行推理之前還是之后。在游戲開始前，工作人員給予每位參與者2000美金、發放4副牌，要求參與者在游戲過程中翻出100張卡片，并盡可能的多贏錢，但他們不會告知參與者每副牌中的卡片價值：從A、B兩副牌中翻出正常的卡片能賺100美金，C、D兩副牌中的正常卡片值50美金，同時每副牌中也隱藏著罰款，A、B兩副牌中的罰款比C、D兩副牌的罰款重，參與者很可能會輸光所有的錢。
實驗結果顯示：正常人在意識到哪副牌贏面更大之前就開始選擇有利的卡牌，而決策缺陷患者即使知道了正確的策略，卻仍然繼續選擇對自己不利的卡牌。
根據上述實驗，我們起碼能發現直覺未見得不可靠，也就是說，憑借直覺出的設計方案，并不意味著不是一個正確的方案。
可是在日常溝通協作的過程中，「直覺設計」一旦遇到不同的意見，就會缺少理論支撐。決策者無法判斷設計師的直覺是否可靠，從而覺得方案本身也不可靠。
遇到這種看似「死胡同」的情況，我們應該怎么去思考呢？
很簡單，直覺在前，策略性推理在后。
喬納森?海特（Jonathan Haidt），著名社會心理學家，在《正義之心》中有提到：
判斷和論證是兩個相互分離的過程，直覺與推理的關系就像大象與騎象人，騎象人（推理）騎在大象（直覺）上，騎象人不斷發展以服務于大象。
拿上述的方案來說，當我面對這類的質疑時，我也會有愣住，但我知道我不能驚慌，而是該讓騎象人（推理）表演了。
其實仔細分析一下上述案例就會發現，方案一和方案二最本質的區別在于：
是否需要區分用戶（商家）自行設置過「補貼規則 」？
百度百科對規則的定義是：
規則，一般指由群眾共同制定、公認或由代表人統一制定并通過的，由群體里的所有成員一起遵守的條例和章程。
規則本身是屬于利益相關者之間的約定。按照這個邏輯，「補貼規則」可以理解為用戶（商家）與消費者形成的基本約定。
用戶（商家）未設置規則，如果系統直接展示默認的補貼條件和補貼范圍，就會給用戶（商家）一種平臺借以商家的名義與消費者形成了約定的印象，這與現實不符，甚至可能給用戶（商家）的業務帶來不必要的紛爭。因此，區分用戶是否設置過補貼規則是非常有必要的。
在上述場景中，雖然我的直覺先于理性給我發送了信號，但設計師如果光依靠直覺卻給不出任何說明，同樣會帶來一系列麻煩。
湯姆·格里弗（Tom Greever）在一篇文章提到，偉大的設計往往取決于你怎么說。
描述設計不是一件容易的事情，但每個設計師都不得不向很多沒有設計經驗的人講述自己的設計，并且要讓他們信服自己是對的，這群人很可能是方案的決策者。決策者通常會選擇那個聽上去最合理的方案，所以方案的表述對于最終方案的確立至關重要。
普通設計師和頂級設計師之間的差距不僅僅是他們解決問題的能力，還在于他們能否用一種讓人心服口服、并促使人們同意的方式來闡述他們是怎么解決問題的。理論上，最好的設計應該勝出，然而事實并非如此，設計評審很容易變成設計批判會，每個人都在告訴設計師要怎么設計。
最終，那些能夠說服別人“我是對的”的人會勝出。設計師如果沒有辦法說服別人為什么他們要這么做，就不得不按照他們不同意的方式去修改設計，原因僅僅是因為他們沒有辦法簡要的為自己的設計辯護。
聽起來似乎這些決策有失公允，甚至成了設計師的辯護大會，那么對于一些有著出色能力卻不善言辭的設計師而言，就真的沒有任何方法了嗎？
設計師要想守衛自己的設計，就要警惕那些單憑設計直覺做出來的方案。
設計直覺的形成與個人經歷、閱讀經歷相關。遇到相似的問題，設計師如果有這方面的經驗固然是好的，直接復用之前的做法可以大大提升設計效率。但我們完成設計后，最好想想哪些地方存在路徑依賴，以確保自己的方案能經得住質疑。
一個最實用的可以判斷自己的設計方案，是不是由直覺得來的，就是多向自己提問。
同樣，我們來用實際的案例做個說明：
想想下圖中「智能上傳」「更多操作」按鈕放在表格的左下方行不行？
很明顯不行，但重點是支持這么做不行的理由是什么？
如果你的理由是：
“別的頁面是將按鈕放在了列表左上角的”
“放在左下角不好看呀”
“沒見過有產品這么放啊”
“......”
那這個方案就是直覺設計的產物了。
想要突破直覺設計，設計師需要盡可能在每個設計點上多思考幾步，比如：
為什么別的頁面會將按鈕放在左上角？
根據2006年NNGroup 在眼動實驗中的發現，人們在網絡中的閱讀成F型，即用戶進入頁面中的第一眼，通常會落在頁面的左上角，也就是說左上方的區域是頁面的黃金區?！钢悄苌蟼鳌埂父嗖僮鳌箤儆陧撁娴暮诵牟僮鳎敲捶旁诹斜碜笊戏绞欠浅：侠淼?。
此外，我們可以看到頁面的翻頁器是可以篩選列表展示的條數，假設用戶設置的條數，超出了屏幕顯示范圍，也就意味用戶進入到頁面會看不到操作選項，所以按鈕放在表格的左下方也是不合理的。
為什么別的頁面按鈕放在左上角這個頁面也要這么做？
因為我們需要保障產品的一致性，產品的核心操作方式保持一致，可以有效地降低用戶的學習成本，避免不必要的思考。
在設計協作的過程中，設計師不可避免地會接收到來自四面八方的聲音，而我自己也曾在設計溝通中陷入過類似困境，因此我越發明白只有清晰地表述出自己的設計思考，才可能贏得每個人的支持。
憑借直覺出的設計方案，并不意味著不是一個正確的方案。
直覺在前，策略性推理在后。
頂尖的設計師，也是頂尖的交流者。
要想守衛自己的設計，就要警惕那些單憑設計直覺做出來的方案。
多向自己提問，以確保自己的方案能經得住質疑。
以上是關于這篇文章的關鍵思考總結，回到設計師個體而言，我認為我們需要對直覺設計保持警惕，因為看似簡單的設計背后往往蘊含著復雜的設計原理，而一個好的設計師除了擁有過硬的設計能力，強大的設計思考力和表達能力以外，我相信同樣在跨學科的研究和學習上會遠強于普通設計師，否則根本無法支撐起背后的設計思考。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
我們需要什么樣的配色方案？
B端的系統的主色代表著一個系統的氣質，與所在行業、產品的定位、用戶群體都有一定的關系。前面調研了眾多竟品及市場前沿配色方案，目的就是期望從它們身上找出共性，引領我們的系統找到最適合的方案，這是知彼。
光有“知彼”是不夠的，我們還要清晰的知道自己是誰？這樣我們才可以說我們的配色方案是最適合我們的，有理有據的方案。
B端系統的真正使用人群比較復雜，具有年齡跨度大，文化水平參差不等，從事行業廣泛等特點。
源于自然之美的色調，突顯靈活性與再生的創意！
依據彩通色彩研究所專家的說法，紐約時裝周2021春夏季的色彩強調我們渴望能激發出巧思與創意的色彩，這些色彩的百搭性質穿越季節，容許更多的選擇自由，適于表達原創的風格，也足夠靈活來適應現代新的更片斷化的生活方式 。
“2021春夏的色調呈現出大自然，強調我們渴望擁有全年皆宜的靈活色彩，這一季的色彩充滿道地真實的感覺，這種感覺對色彩而言愈來愈重要，同時結合了某種程度的舒適與輕松感，并散發出活力，激勵振奮我們的心情”
說到這里“主題色”如何來選擇？
色彩對于人的大腦的沖擊力大于造型，比如淘寶，我們會記憶起淘寶的主色是橙色；色彩是影響人類視覺思維的重要因素，色彩能直觀的體現產品的性格和氣質，所以選擇一款適合產品的主色很重要。
我們的用戶在更替，如何讓產品年輕化、品牌年輕化是現在幾乎所有企業都在思考的問題，新的用戶群體從小接受的教育和喜好決定著產品的發展方向。
比如：我們這次顏色升級中律動、青春活力是核心關鍵詞，而藍色則可以讓產品視覺符號得到延續。
對于主題色的選擇指標有哪些？
通過關鍵詞圖片像素化提取顏色，同時參考B端產品顏色流行趨勢和當年的年度流行色，以及竟品顏色分析結果，獲取藍色的色相、純度、明度范圍。
2020潘通年度顏色經典藍（19-4052 Classic Blue），顏色值為#174A7B（H207 S81 B48）
2021潘通年度顏色搭配色鳥舍系列中19-4151Skydiver，顏色值為#02569D（H207 S99 B62）
假設：竟品的主題色藍色的色相范圍為205-225；純度的范圍為70-96，平均值為86；明度的范圍為70-98，平均值為88，B端產品流行趨勢的主色也多是藍色系，色相范圍為200-232；純度的平均值為70；明度的平均值為68。
色彩的使用范圍及色階有哪些？
色彩的應用場景包括：關鍵行動點，操作狀態、重要信息高亮，圖形化等場景；針對這些使用場景只有一個色值是不能滿足所有場景使用的，所以我們要建立主題色的不同色階來滿足不同場景下顏色的使用。以建立色彩層級，或傳達信息，或強化界面層級。
在色彩系統中，常使用 Tints and shades 系統來建立調色板，通過在顏色上面增加白色，或者增加黑色，來改變它的明度和飽和度，形成同色系的調色板，在符合無障標準的區域，選擇不同明度飽和度的色彩，形成有梯度、有層級的彩色調色板。
B端產品中光有“主角”是不夠的，還要有“配角” 所以我們還要看一下輔助顏色是如何定義的？
輔助色是為了幫助頁面區分狀態和層級而設立的顏色，主要包括圖表類儀表盤顏色和功能色，通過合理的顏色傳遞產品正確的信息，讓其信息傳達更明確清晰。
輔助色的作用是配合襯托產品主色調，在不同的產品中，輔助色運用的策略是不同的，比如我們在竟品調研中發現，輔助色經常是取自主色的鄰近色、對比色和互補色等。
儀表盤配色：通過對竟品的分析可得知，優秀的儀表盤的配色有多系列及低純度的特點，多系列配色是為了滿足用戶個性化的需求，而低純度是考慮用戶在長時間使用產品，色彩對其心理的影響。
功能色：這類顏色在系統一般不會隨意更改，而且特定的語義一般都有固定的色相，只需改變其純度和明度，使其視覺上符合主色的氣質，使其搭配和諧。
1.通過默認主題色選擇輔助色及默認儀表盤顏色
我們以默認主題色為#467FEA（H 219 S 70 B 92) 為起始點，S（飽和度）、B（明度）保持不變，H（色相）以180°為起點，以15°為增量或減量標準，生成24色色板。這個色板是我們選取輔助色的重要依據。
以鄰近色、互補色、對比色為原則選擇豐富的顏色
鄰近色：在色相環中，相差15°的顏色為鄰近色，凡在60°范圍內的顏色都屬于鄰近色的范圍，主色和鄰近色的色系組成的搭配，可以在同一個色調中構建出豐富的視覺層次感和質感，賦予不同的功能含義，信息表達明確，和諧統一感很好，視覺上的趣味性，顏色的搭配顯得很柔和。
對比色： 在色相環中，角度相差120°-180°之間的色彩，這里使用了120°為角度來選擇對比色。
互補色： 在色相環中成180°角的兩種顏色，互為補色；主色可以和其互補色的兩個色彩的搭配，該色彩可以為鄰近色，例如：藍色和黃色、橙色的搭配；這種搭配既能保持互補色搭配強烈的對比度，區分關鍵信息，次要信息，又能增加視覺上的趣味性，色彩看上去豐富多彩。
例如：藍色作為主色，互補色黃色作為輔助色應用在圖表、圖標和標簽上，再選擇黃色的鄰近色橙色作為另外一個輔助色，應用在不同的關鍵信息上，有助于用戶更好的閱讀產品的功能和內容。
獲得輔助色-9色相
通過鄰近色、互補色和對比色的選擇，我們從24色色相環中得到了9色相色環，9色相色盤優化后將做為圖表的儀表盤顏色和語義類的功能色出現頁面設計中。
校正輔助顏色
雖然我們保持相同的飽和度和明度，使用科學的方法得到了較為合適的色相，但由于色彩本身自帶感官明度屬性，導致在視覺感受上的感官體驗并不同頻。
黃色、綠色的明度即發光度較高，藍色就稍微偏暗一些，導致色板看起來不一致，為了讓不同色相看起來更加協調，需要調整色板的明度和飽和度，以保證視覺感官體驗同頻且更加和諧舒適。
校正后的顏色主要用于功能色和儀表盤顏色。
從輔助色中提取功能色及儀表盤色系
通過對竟品的分析總結同時結合默認主題色分析得出的9色色環，歸納分離，最后形成系統的默認儀表盤顏色。
功能色的目的是明確信息及狀態，比如成功、出錯、失敗、提醒、鏈接等；功能色的選取需要遵守用戶對色彩的基本認知，結合分析得出的9色色環，顏色校正，得出系統功能色。
輔助色的色階
為了度量不同的可視化從高到低的數值，我們儀表盤顏色遠遠不夠，所有為了保證視覺上的統一性，我們需要加入輔助色的明度色階來區分數據層級。
同時我們產品有深色和淺色兩種模式，由于視覺對比的原因，在深色的場景看下看的顏色，和淺色場景下看到的顏色是兩種感受，深色場景下顏色會發亮，所以為了保持視覺上統一，我們也需要加入輔助色的色階。
輔助色色階建立方法與主色的色階建立方法一致，使用 Tints and shades 系統，通過在顏色上面增加白色，或者增加黑色，來改變它的明度和飽和度，形成同色系的調色板。
模擬方案一主色、輔助色及消色匯總
通過以上分析我們得出模擬的主題色、儀表盤顏色、功能色及消色。為了方便記憶，我們分別給顏色取了名字和編號，命名方式采用植物色彩命名，這也是200多年前顏色數值出來之前的命名方式，最早見于1814 年出版的《維爾納色彩命名法》
本期交流就先到這里，希望這個配色的思路能夠幫到大家，感謝大家的耐心觀看！
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
作為設計師的我們總會在自己的閑暇時間去做設計有關的練習，那么我們到底有沒有深入思考過我們怎么去練習以及如何思考才是最有效的呢？也許有的人練習了很久發現自己的進步速度很緩慢，有的人練習的不多，但每次輸出的作品質量跟上次相比卻提升很多。那么其中的差異到底是出現在哪些方面呢，我之前也一直在思考這方面的問題?，F在將自己領悟出來的一些方法分享給大家，希望能夠起到一些幫助。
前言：什么是最有效的學習方式
在開始正文之前，我希望大家能夠理解什么是最有效的學習方式。在當前的大環境下，各個平臺學習類的教程或者文章層出不窮，我們似乎總是有學不完的知識，每天也都在積極地學習，當時看完覺得收獲頗豐，但一天工作下來也許看過的東西就忘了50%，甚至過了一周后發現自己已經什么都忘了。
那么你有沒有思考過為什么會產生這樣的結果呢？對于自身的學習和思考方式我們是不是還有待改進的方法？我們可以先來了解一下學習金字塔這個模型：
學習金字塔是美國緬因州的國家訓練實驗室研究成果
從圖上我們可以看出，我們平常用的最多的聽講或者閱讀的學習內容留存率[兩周以后還能記住內容的多少]僅僅只占5%~10%這個區間，而討論/實踐/教授給他人等這種需要自身參與性強的學習內容留存率則高達50%-90%，平常通過閱讀等獲取信息很容易遺忘的原因也有一部分在于此。
不難發現，前四類的學習行為都是屬于被動輸入型學習，而后三類學習行為則是屬于主動輸出型學習。這也就是常說的“最有效的輸入方式就是輸出”。
因此要想提高聽講或者閱讀的學習內容停留率，我們需要將被動輸入轉化成主動輸出，即我們在進行這類活動時需要調動大腦積極思考，將大腦接觸到的信息與我們已經掌握的知識產生關聯，去想一下我看了這些內容可以運用在哪些方面以及怎么去運用，并在最后真正用于實踐[經歷過實踐去輸出你才會發現那些潛在性的問題]。我們才能更為有效地去消化一篇文章或教程。好了，希望大家看完能積極思考一下本文所闡述的內容，能夠擁有一些不一樣的收獲就是我寫這篇文章最大心愿。那么接下來進入正題。
01 明確自己的設計目的
做任何事情都應該擁有一定的目的，因此我們在開始一項設計練習時，第一件需要做的就是確定我們的練習目的，即你通過這次練習想要表達什么，這種表達可以是技法的展現或者說內心情感的表達，只有明確當前的目的性，你才能有更精準的方向。
但很多人會發現即使自己設立了目的卻總是會因為各種原因而中途放棄掉，那么能讓我們去堅持完成目的的核心是什么呢，就是去量化你的目的和設立明確的截止日期。量化目標就是要將你的大目標分解到具體每一天應該完成的小任務，這樣拆解不僅降低了目標的難度，也能清楚知道每天該做什么，有明確截止日期的話就能避免拖延。
比如拿“在一個月內我的練習目的是做電影界面的設計“和”在1月1日至1月30日期間我要完成30張電影界面“相比，顯而易見后者的目標更具象，更具操作性。只要我保證每天一張界面，即可在規定時間內完成任務，偶爾如果遇到特殊事件也能及時彌補落下的部分。前者模糊不清的目標很容易讓我們三天打魚兩天曬網，一張界面也是練習，一百張界面也是練習，也許一個月下來發現自己就做了那么幾張界面，完全達不到練習效果。
02 目標的確立要跳出我們的舒適區
很多人會說，我確立了明確的目標啊，也有在堅持練習，可一段時間下來卻感覺自己的能力沒有很明顯的提高。這有可能就是你的目標建立出了問題。那么怎樣的目的才能最有效地提升我們自身的能力呢，在我看來跳出自身舒適區去建立目標效果才是最正確的。
舒適區指的是一個人所表現的心理狀態和習慣性的行為模式，人會在這種狀態或模式中感到舒適。舒適區，又稱為心理舒適區。
如果你發現你每次確立的目標自己都能夠很輕松愉快地完成的話，那么你可能只是一直在自己的舒適區內做著重復性的工作， 對自身的能力提升并不會出現顯著變化，也就是常說的那句話“你不是有五年工作經驗，而是把一個經驗用了五年！“
跳出舒適區，指的是來到學習區，去有意識地練習那些你了解過，但是不能熟練應用的技能。例如你對界面的設計已經比較熟練了，但是你對交互動效這一部分仍然感到比較陌生，那么如果繼續堅持界面練習可能只是簡單在堆積你的練習數量，這時你更應該去嘗試一下界面的一些交互效果并將其制作出來。
這樣你就可以將你已經掌握的知識與并不熟練的知識連接起來，從而能夠更高效地學習和吸收新的知識。前期盡量選擇簡單的效果練習，循序漸進，以此來建立你的自信心，不要急于求成而誤入恐慌區，妄想在幾天之內就能夠做出和從業幾年的大神一樣的高難度復雜效果，那樣不僅學習效果差，還會打擊你的自信心，造成反效果。
03 多看的重要性以及怎樣去看
相信大家對于多看這一點已經是耳熟能詳的詞匯了，曾經也聽過很多次大神分享，無一不提及多看多練這種類似的話。那么你有沒有深入思考過為什么很多高手都在提及這一點呢，我們所謂的看和他們的看是否說的是一個概念呢？
牛頓曾說“我之所以比別人看得遠一些，是因為我站在巨人的肩膀上”，那么在我的理解范圍內，多看即是站在巨人的世界里看設計。
在諸如國內網站站酷/UI中國以及外國網站dribbble/behance等平臺上，我們可以找到很多優秀的設計作品（在看的過程中可以不要只是局限于UI設計，可以更多地看看首頁的其他作品，能夠最大限度地提高你的審美），遇見好的作品我們不要只停留在視覺表面，要學會去分析好的設計，以及與我們自身所做的界面產生對比。
分析最直接的方式就是自我提問。“這個設計我為什么會覺得它好看，是顏色的搭配吸引了我，還是版式的設計非常合理，又或者是整體的配圖非常和諧?”當然，你還可以更近一步——“顏色的搭配是哪里吸引了我，是對比色用得非常合理，還是整體色彩的占比非常平衡，又或者說是顏色的明度和飽和度搭配得非常好看？“
最重要的是要聯想到自己已經掌握的知識，將你發現的好的方面與自己的知識進行結合。“如果我下次在做界面練習的時候，我該怎么去使用這種色彩搭配，如果換成其它顏色，我有沒有能力將它搭配得像這樣和諧美觀？“
這樣自我提問的方式最終目的是將好的東西內化為自己的知識，否則你看再多的東西，也只是你每天所接觸的信息而已，過眼即忘，并不能有效轉化成為你的設計認知。當然，你要將那么好看的設計都收進你的素材庫里，好記性不如爛筆頭，建立素材庫就是為了讓我們更好地去復習我們曾經欣賞和思考過的東西。
自己的eagle資料庫
04 不找參考的設計都是耍流氓
畢加索曾說過這樣一句話：好的設計師借鑒，偉大的設計師偷。喬布斯也曾說過類似的話。舉個例子，我們可以先看左邊一個比較古老的界面-施樂公司70年代的界面，再看右邊喬布斯拿來改進的做的macintosh界面：
以及經過改良后的macintosh界面，然后比爾蓋茨在看過這個設計后而做出的關于微軟的界面
看了上面兩幅對比圖，我們可以發現，偉大的人在創作時也需要找參考，但他們都是盡量吸收參考好的部分，然后加入自己的思考和理解，去創造更好的東西。他們并不是說憑空就可以創造出經典的東西。
所以說，找參考是設計過程中非常關鍵的一個步驟，在找參考的過程中，就相當于你在和其他優秀的設計師對話。因為一個設計師的腦容量是沒法與全世界設計師的腦容量相比的。雖然參考不一定是你做設計的標準，但卻能對你的創意和設計帶來一定的方向和靈感。因此我們在開始一項新的設計目標前找參考，去觀察別人的作品是怎樣表現的，他們設計的東西出彩的地方在哪里，和我心中所想的有哪些不一樣，我該怎么在我的設計中去融合那些出彩的東西。
只有當你找到足夠多的參考，你的心中才會有一定的衡量的標準，才會知道好的設計和壞的設計差距在哪里。最終體現在你所做的設計上。也許有人會說，有的厲害設計師感覺都不怎么找參考，那是因為他們的腦海中已經積累了足夠的參考來讓他們自由調動。
05 你在設計時是否做到了專注
我們可以做一個小實驗，在自己手機上下一個Forest[番茄時鐘],設定兩個小時的設計練習時間，看看在這個持續時間內你有多少次會情不自禁地拿起手機看消息。（我在做這個測試的時候會發現有很多次都會無意識拿起手機看信息），由此可見我們即使是在練習時間內也會存在很多浪費時間的小動作，如果丟掉這些小動作，我們在有限時間內的產出將會大大提升。
我也是在前些日子看《深度工作》這本書時才意識到專注工作的重要性。書中說:想要迅速掌握困難的技能，你必須高度專注，不能有任何干擾。高質量工作產出=時間x專注度。而現實中的我們往往是花費了很多時間，卻由于自己的專注度很低，導致整體效率和產出都大打折扣。我想這也能解釋為什么都是在同樣的時間內，每個個體的成長度都不一樣，成長快的人會把單位時間的效率發揮到極致。
因此在每次給自己規定設計練習時間的過程中，盡量找一個安靜不受打擾的環境，將手機設置成番茄時鐘模式，保持高度的注意力去完成自己的練習目標，你會發現你比平時用了更少的時間卻做出了更好的東西。
06 對于規范的理解
我們應該知道，UI設計不同于繪畫以及平面設計，它是基于一定限制而進行的設計活動，而這些限制我們稱之為設計規范。就像你在開始游戲之前需要知道游戲規則一樣，我們在開始設計前也是必須要了解相應的設計規范的。比如狀態欄的高度，底部圖標的大小，間距的大小，字號的規范等，在這里不做詳細解讀。也許剛入行的人會覺得設計規范限制了設計的發揮性，但其實規范只是讓你能夠朝著一個統一的方向和保持基本數值的準確性，但卻依然能夠給設計很大的發揮空間。就像之前看到的一段話：[此處將其做成了一個圖片]
也許看完這個你更能理解規范對于UI的一種作用，盒子就像我們的手機，展示空間就那么大，你需要在一定的限制內發揮你最大的能力去做出好的設計。
因此，當我們在練習app界面時，心中一定要有自己的一套規范（不論是否做出來），執行過程中嚴格按照定義的基礎規范來，從而更能夠高效地完成練習任務和保證界面的統一性。
07 學會建立自己的界面走查表
就像在學校時，老師總是強調我們試卷答題完成后一定要進行自我檢查去排除一些不該犯的錯誤。同理，設計也是一樣，每當我們初步完成了設計界面后，我覺得最重要的也是進行自我檢查，排除一些界面常見的錯誤。當然，我說的走查并不是單純看文字等顯而易見的錯誤，而是按照一個優秀的界面要求去走查我們的界面：
設計風格統一了嗎？
界面的整體設計風格是否統一，符合產品調性。顏色的使用/圖標的設計風格/圓角大小的統一等；
圖片是否清晰？有無版權？
你在整個設計界面所使用的圖片是否是高清的，有無模糊或者水印，圖片是否會構成侵權等，一個低質量的圖片會瞬間讓你的界面下降了一個檔次；
信息層級拉開了嗎？
做的界面整體的字號大小是否有重點區分，能不能清晰地看出文字的層級關系，元素間距有沒有符合各層級的對比關系；
投影用對了嗎？
你的投影考慮了環境色的影響嗎，如果用純黑的投影會讓整個投影看起來非常沉重；
你的界面有呼吸感嗎？
你的界面看起來會不會很擁擠？不要堆得滿滿的，注意留白以保持元素的呼吸感，從而讓界面更耐看；
對齊了嗎？
不論你是工作幾年還是剛入行的新人，都一定不要忽略這個問題。左對齊右對對齊以及居中對齊。說起來很簡單，但不要因為這個錯誤的發生而讓別人質疑你的專業性；
以上列舉了一些部分常見的界面問題走查，還有更多的界面基本問題值得大家去留意。我認為走查表的建立還是應該基于自身的經驗來制定，那樣不僅會更符合你的設計風格，更會讓你走查起來更加高效。剛入行的同學的話可以多看看高手關于界面精度提升的一些建議來作為自己的走查參考。
08 不要閉門造車，走出去
相信通過走查表的建立會讓你發現一部分的問題，但礙于自己的審美水平以及理解能力，我們很難去完全找出自己的問題。也就是說，當我們通過走查表糾正了一些常見問題后，我們要學會向大神們去請教問題。
通過你認識的一些大神或者在設計群里發出自己的界面，讓其他更厲害的人去發現你界面的其它問題，這樣會讓你意識到一些你不曾發現的問題，從而提高你的判斷能力和界面水平，督促自己的進步。當然，不要把請教別人當成一件理所當然的事情，學會向那些給你提出界面修改意見的人們說一聲謝謝。（在這里也謝謝曾經幫助過我的那些可愛的人們~）
寫在最后：少熬夜多鍛煉，注意身體健康
在這里想向廣大辛苦奮斗的設計師們說一句，每次做完設計練習還有時間就多多鍛煉吧，身體從來就是我們奮斗的本錢，只有身體健康才能更好地作圖呢。所用時間的長短從來不是衡量一個人厲害的標準，熬夜不一定代表就能夠做出更好的界面，專注和高效才是我們應該學會的方式，希望大家在新的一年能夠用更少的時間做出更精致的界面。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
信息架構這篇是本人在現階段覺得較難學習與闡述的知識點，網上關于信息架構的知識內容也是參差不齊。在學習與探究的過程中查閱了很多資料，反復修改多次，盡量用直白的語言結合實例來闡述信息架構。目錄如下：
大家可以根據上述目錄來進行選擇性閱讀，當然全文閱讀也是極好的～
這篇文章的起源，來源于最近看到的話題“B端設計師會被組件庫取代嗎？”。從表面上看，在組件庫越來越完善的時代，很多頁面設計依靠組件庫就能夠快速搭建。
那么在這種情況下，B端設計師存在的意義和價值到底體現在哪里呢？其實B端設計的重點并不在頁面的視覺上，視覺只是作為設計師最終輸出成果的一小部分。個人認為B端設計師工作重心體現在做「正確的設計」，比如以下幾個方面：
1.這個設計能否完成對應的商業目標和產品目標；
2.我們的信息呈現是否合理以及能否解決當前需求；
3.用戶能否在頁面上快速找到想要的信息；
而想要弄清楚并解決上述這些問題，在眾多的話題闡述之下，我發現其論述本質上都逃離不了「信息架構」這個概念。因此我認為設計師都需要對這個概念有充分的認知，這能夠幫助我們做出正確且出色的設計。
關于信息架構的概念，在百科上面的定義大部分都比較晦澀難懂，比如維基百科和百度百科的解釋：
相信大部分人都很難明白其中描述的意思。在這里換種思路，將信息架構拆分為信息與架構去理解。
信息指的是內容的載體，常見的文字、圖像等都是信息；架構的含義則形容對應的組織和結構。那么信息架構就是將信息通過一定的形式組織起來，然后呈現出來。其本質就是研究信息的表達與傳遞。
通俗點講，信息架構就是讓用戶可以更容易的理解我們的產品，讓用戶在使用我們的產品時可以更順利、更自然。因此信息架構沒有一個具體的呈現形式，它更多的是體現在產品設計的各方面。具體主要表現為組織系統、標簽系統、導航系統和搜索系統。
為什么需要信息架構？我們都知道B端產品設計的核心是「降本提效」，在設計這一側的可以將其理解為降低認知成本，提升使用效率。
降低認知成本需要我們更好的表達信息，讓用戶能看明白我們的產品能夠做什么，如何用；提升使用效率需要提升信息的傳遞效率，讓用戶能夠很容易的找到需要的功能；
而信息架構從本質上來講也正是研究信息的表達和傳遞。因此我們需要通過它來幫助我們更好的完成B端產品設計。如果沒有信息架構來作底層支撐，那么我們在頁面上看到的可能就只有功能的堆疊，讓產品陷入難以上手或者不知道怎么用的尷尬境地。
一個強大信息架構是產品質量的保證，是作為設計支撐點的骨架，它會減少可用性問題，提升整體導航行，創造對用戶友好的體驗。比如舉一個工具層面的例子：
PS的工具欄堆疊在界面各個部分，而Figma的工具欄則集中在右側且只出現當前需要的功能。很明顯Figma在信息架構中的信息組織部分做得更為友好，PS則會顯得遜色一些。這也是我們在學習PS的時候會顯得比較吃力的原因之一。
可以說良好的信息架構是高效用戶體驗的基礎。視覺元素，功能，交互和導航都是在信息架構的基礎上構建的。因此想要做出體驗好且合理的頁面設計，我們就需要參與到信息架構這個過程中來，和產品一起完成對應架構的梳理。而不是只完成從原型到頁面這個部分。
如果想要搭建一個好的建筑，我們需要知道其建造的目的，是按照什么樣的結構搭建，內部有哪些系統，以及最后呈現的模樣。
那么信息架構也同理，我們首先需要知道信息是為了什么目標服務，然后我們通過怎樣的結構來組織這些信息，以及過程中會用到的信息元素，最后如何呈現它們。這都是我們在搭建信息架構中需要進行的必要步驟。如果某些環節沒有做好或者沒有了解透徹，那么在輸出信息架構時往往會出現方向或者策略上的問題。接下來我們看看這些步驟是如何具體呈現的。
B端行業對于業務理解的要求是比較高的，只有在理解業務的基礎上，將業務需求轉化為對應的設計目標，我們才能夠輸出合理的信息架構方案。
個人認為理解業務的基礎，就是能夠用一句話講清楚當前設計的產品。這句話可以描述為：誰在什么地方想要完成什么目標。比如「用戶想要不出門就能夠吃到東西」，這就是外賣軟件提供的產品服務。
雖然看上去這句話很簡單，但其中包括了三個要素：用戶、場景和目標。因此我們在分析和梳理業務的過程中首先要弄清楚的就是這三個要素。
用戶永遠是排在第一位的，也是我們首先需要弄清楚的。在B端設計中，本質上可以分為兩類角色：客戶和用戶。比如我們常用的釘釘或企業微信，購買客戶是企業，實際用戶是員工。
對于企業：「我想要有一款軟件可以更好的管理員工」
對于員工：「我想要這款軟件能夠更好地提高工作效率」
客戶決定了我們產品的購買（部分情況下也兼顧使用），而用戶則決定了后續產品的復購率。因此在業務理解中，我們需要弄清楚當前產品所處的服務階段，比如初期為了打開市場肯定更傾向于客戶，而中后期為了提高產品的使用體驗又會偏向于用戶。
因此我們首先需要弄清楚的就是當前產品是為哪些「目標用戶」服務，這也就決定了我們在設計信息架構時對應的不同側重點。
場景是指需求產生的某種條件，這個條件包括但不限于環境、時間、地點、空間等，只有上述條件滿足，這個需求才能成立。這里可以把場景理解為產生該問題的原因。
比如當用戶提出「她需要一件衣服」，那么我們就需要弄清楚用戶為什么需要添加衣服，是她感冒了自身覺得冷還是因為外界環境冷。這兩種場景涉及到的解決方案是完全不一樣的。
在平日的工作中我們可以通過以下兩種方式來更好的了解業務場景：
1.通過業務方文檔進行業務背景的初步理解。業務文檔中一般都會包括需求背景，我們可以通過文檔進行初步了解。
2.通過業務溝通進一步加深業務背景的理解。由于很多B端業務離設計師本身的生活比較遠。因此對于需求背景中不理解或者比較模糊的部分，我們可以通過與業務方或產品多次溝通來挖掘最底層的背景。
畢竟需求背景是理解業務的重要步驟，我們只有知道需求產生的原因，才能夠針對性的給出解決方案。
目標決定了我們的產品最終的方向。我們首先接觸到的一般都是業務目標，而我們要做的就是將業務目標轉化為我們此次的設計目標。
A.業務目標
業務目標就是此次業務想要解決的實際問題，它通常是一個宏觀上的描述。比如打車軟件的業務目標簡單概括來講就是讓用戶能夠更快速地打到車，減少等待焦慮。我們一般通過文檔或者溝通來了解該目標。
B.設計目標
設計目標是我們基于業務目標而給出的設計策略，是一種更具體的實現方式。比如我們要讓用戶快速的打到車，那么這個時候我們的設計目標就是通過將用戶位置和司機位置進行快速匹配，并通過超時補貼紅包的方案來降低用戶焦慮。從而實現業務目標。而這一過程涉及到的信息點就有：司機位置、乘客位置、等車時間、補貼金額等元素，并需要思考它們之間的關系和呈現方式。
可以發現從業務目標轉化到設計目標這個過程，實際上就是在確定功能和信息點的過程。這樣才能讓我們更好地設計信息架構。
從前文可以看出我們會在整體設計過程中出現很多的信息元素。如果不經過對應的組織和處理，直接堆疊在一起，那么信息含義會比較亂且難以調用。比如下方：
而右側圖片信息的組織過程可以理解為通過將零散的數據信息進行分類，再以某種結構化的形式將它們重新組合排布的過程，直白一點就是先分類，再結構化呈現。我用一張圖來表明這個過程：
那么這個過程中「信息組織」和「結構呈現」到底應該怎么做，也就是接下來要講的組織方式和結構類型。
組織方式可以分為精確分類和模糊分類。精確分類就是我們會利用物體本身物理屬性來進行分類，比如位置、字母表、時間、類別、層級等方式進行組織。一些工具類應用例如滴答清單內容信息都是按照時間來進行組織的：
而模糊分類則是按照更為主觀的邏輯對信息進行分類, 如主題、任務、用戶、隱喻等來進行歸類，比如我們常用的APP商城是按照不同的主題類別來進行區分的。
但在很多時候，產品傾向于將兩種組織方式結合起來形成復合型組織方式，從而能夠使我們的整體組織形式更符合用戶的使用習慣。比如藍湖的信息組織，其中既包含了模糊分類（按使用類型等分類），也包含了精確分類（按上傳文件時間等）。
其實在大部分B端產品中，大都按照模糊分類來進行處理，比如按照任務、流程等方式。而精確分類更多用于在頁面內的局部信息模塊，比如創建時間和文件大小等。
歸根結底，我們分類方式的選擇需要結合我們前面提到的用戶、場景和目標，這樣才能讓我們的分類更具說服力。
當信息按照分類維度組織后，我們接下來就是把整體信息進行結構化，這樣才可以將信息整體連接起來并呈現出來。一般分為以下四種組織方式：
A.層級結構（最重要的結構）
這是信息架構中最為常見的結構，也是比較符合用戶認知的結構。有時也稱為「樹狀結構」。以子父節點的形式一層一層延展。
層級結構的優勢就在于可以承載復雜的多層級內容，通過層級遞進的方式將復雜的多層級拆解得更簡潔。
但我們需要把控好內容的廣度和深度，廣度指的是在層級結構中每一層的數目，最好控制在7個以內。如果廣度太寬意味著每個頁面會給用戶展示太多的信息，增加尋找內容的負擔。深度為縱向結構，建議一般3層，最多不超過5層。過深的層級會讓用戶點擊很多次，且不容易被用戶發現。比如飛書的基本信息架構也是主要以層級結構來進行的。
B.矩陣結構（多維度結構）
矩陣結構是各個節點都相互連接的一種信息架構方式，通俗來講就是用戶既可以通過多個維度去觸達同一信息，也可以從單個維度連接多種信息。
這種結構其實就更類似于我們在做相關功能時：比如當你進入電影全屏時想要退出時，既可以通過點擊按鈕退出，還可以通過鍵盤的Esc返回到，通過多點觸達同一操作。
又比如我們的聯系人功能，我們既可以通過輸入數字撥打電話，也可以查找聯系人進行撥打，還可以查詢電話記錄進行回撥。
矩陣結構最重要的意義在于給用戶提供多種路徑，使用戶能夠在不同路徑中尋找各自想要的東西。
C.自然結構（隨機性）
自然結構不遵循任何一致的模式，節點都是被逐一連接起來的。
自然結構一般都具有隨機性和不確定性。這種更傾向于泛娛樂化的C端應用。比如我們常見視頻網站的在推薦流都是應用的自然結構。比如打開B站等視頻平臺，你很難猜到剛進入看到的是什么。
但一般自然結構不會單獨存在，比如B站在自然結構中也綁定了層級結構來進行層級上的劃分。
D.線性結構（單一性）
線性結構是非常單一的一個結構，整體是一層一層向下遞進。比較強調先后順序的一種結構。
這種結構通常用于我們常見的軟件安裝程序等，也可以用于部分功能結構，比如網站的視頻發布，一般都是經過上傳-編輯-發布這三個步驟來依次進行。
大家可以發現在進行信息架構時，我們在很多情況下可能會運用多種組織結構方式，我們需要根據對應的用戶決策場景來考慮讓最適合的幾種方式相結合。但最終目的都是為了讓用戶能夠更快速的獲取信息。
在信息的組織過程中，我們需要注意用戶的心智模型。比如當我們看到紅點就知道有新信息通知，看到下拉箭頭就知道可以展開。這是互聯網產品在無形中給用戶建立的底層習慣認知。用戶目前對于普遍產品的一些基礎布局、功能名稱和交互邏輯都形成了一定的習慣，這都屬于用戶的心智模型的內容。
因此我們在組織信息時盡可能不要去打破用戶常見的心智模型，否則必然會導致用戶的不習慣。我們常見的「掃一掃」功能，微信、支付寶和QQ會隱藏在「+」號里面。而微博和抖音卻分別放置在了「我的」和「搜索」里面。
這樣會導致用戶難以發現該功能。因為用戶接觸新的信息時，會以最初接觸的局部信息為依據展開并形成初步認知，而用戶認知中的信息組織邏輯和實際信息的吻合度越高, 他在進一步查看或尋找信息的過程中體驗會更順暢, 反之, 若一開始形成的認知與實際信息的差異過大, 在后期的信息搜尋過程中則容易遇到困難。而這個吻合程度其實就是用戶心智模型。
雖然建議在一定程度上遵循用戶心智，但并不是說絕對遵循。對于用戶不熟知的場景或者某些專業術語，我們需要通過靈活有效的提示（比如標記注釋等）來引導用戶就可以了。比如我們剛才提出的抖音掃一掃，它的應用場景其實是用于抖音官網后臺登錄，且在后臺登錄時已經給出了對應提示，那么這樣的設計也是合理的。
當經過上面的信息組織，其實我們已經能夠歸納出一個大體的信息架構框架。但在信息組織之外，我們還需要關注以下三點：標簽、導航和搜索。這對于信息架構的完整性也有非常重要的意義。
標簽系統，通俗來講就是要我們對當前整個系統信息節點的命名，從而讓信息的呈現更容易識別。拿個最簡單的例子來進行說明：
可以看到左側和右側關于衛生間的信息標示，可能左邊你能一眼區分，右邊可能就需要反應半天才能猜出到底代表什么含義了。
這其實就是關于我們的信息命名是否能夠被大多數用戶所接受的場景，也就是我們標簽作用所起的作用。標簽可以分為圖片和文字標簽，都需要考慮用戶對該信息命名的認知程度，也就是前面提到的心智模型。那么如何能夠更好的去定義標簽名稱呢，這里需要注意2個方面：
A.優先選用被行業廣泛接受的詞或圖標
在進行標簽定義的時候，盡量選擇已經被用戶所熟知的詞語，比如「工作臺」「通訊錄」等已經被運用得非常熟練，對于類似功能就直接以該形式命名，比如我們的設計軟件中，很多圖標和功能名稱都是通用的：
這樣做能夠很大程度減少用戶的學習成本。因此在B端設計中我們也需要注意到我們所在的行業，哪些名詞已經達成了共識，就無需再造新名詞。
B.不確定的詞語可以參考競品或調研來決策
當某類功能或場景的標簽難以確定時，我們就可以嘗試去找一下競品是否有類似功能，或者找該行業的領頭羊（比如聊天工具的巨頭微信），那么在進行標簽定義的時候，可以參考它的命名體系。因為它已經替我們教育了一部分用戶，會間接降低學習成本。
如果某些標簽在上述過程中還是無法確定，那么我們結合自己經驗或者與咨詢業務相關人員來進行討論，在必要時候可以在標簽旁邊添加注釋來進一步說明。
導航系統其實應該是大家比較熟知的一個系統了。就像使用導航系統來規劃行程一樣，導航系統都會存在于每個網站中。比如我們常見的側邊導航、頂部導航等。
因為網上關于導航系統已經有很多資料的講解了，在這里闡述下四類導航的含義：
1.全局導航：位于頁面最上層的導航，用戶幾乎在頁面的每個地方都可以看見，是最高層級的導航系統；
2.局部導航：位于最高導航的下級子類導航，子類導航并不是必須的導航，根據場景進行取舍；
3.情景式導航：通過點擊文字鏈接進行跳轉的導航，比如在個人資料里面植入其它網站的鏈接地址；
4.輔助導航：這里包括網站地圖，網站索引，網站指南等輔助類型的導航。
輔助導航的網站指南包括新手引導和演示教程等?，F階段更巧妙的功能引導，是當用戶在進行某些功能的操作時及時進行提示，這樣不僅達到了為用戶引導的效果，還減少了一連串的新手引導對于用戶的打擾。比如figma在進行組件更新后，只有當你調用組件功能時，才會及時進行提醒。
搜索，是我們平日最常用的查找信息的功能，它能夠幫助我們快速進行信息的檢索。雖然搜索功能非常重要，但并不是每個系統每個頁面都需要搜索。我們決策是否添加搜索時需要考慮下列三點：
1:內容復雜度：當前頁面承載的內容復雜度如果較少，對于簡單內容頁面往往不需要搜索；
2:內容性質：當前頁面的性質是偏向于用戶瀏覽還是查找，根據用戶行為來決定是否需要搜索；
3.搜索場景：如果搜索場景很簡單，考慮是否只用篩選或分類就能夠解決問題；反之如果搜索內容很復雜，我們還可以搜索結合篩選來更好的查找信息；
上述3點決定了我們是否需要考慮搜索功能。而關于搜索的其他細節點，比如搜索規則和搜索結果等，在這里不做進一步的闡述。在這篇文章中更重要的是弄清楚我們何時需要搜索功能。
我們通過上述方法已經知道如何梳理信息架構了，那么我們應該如何呈現它呢。這部分其實也是很多資料中比較模糊的點。
在學習的過程中，發現部分資料認為信息架構就是單純的指思維導圖，但實際上信息架構并不能單純只用思維導圖就能夠完全表示。
因為信息架構包含了很多部分的內容。只能說思維導圖可以是信息架構的一種表現形式，其可以幫助我們在思考階段梳理整體產品的信息構成。
這里拋出一個很有意思的觀點，那就是「功能結構圖」和「信息架構圖」到底什么關系，這里用兩張圖示例：
可以看到，功能結構圖更多體現的形式是功能闡述，一般形式為名詞+動詞，比如頭像設置；而信息架構圖重點呈現的應該都為信息元素，一般為名詞，比如頭像圖片。
但在大多數時候我們看到的產品架構圖，其實更偏向于功能結構圖和信息架構圖的結合。因為在很多時候闡述信息構成時需要依賴功能進行輔助說明。
因此這篇文章講述的信息架構更偏向于基于產品的整體架構。其實信息架構對于呈現形式并沒有特別的限制，只要能夠幫助你清晰表達產品整體結構就行?！缎畔⒓軜嫞撼絯eb設計》第4版中其實也并沒有對表現形式這一塊進行嚴苛的定義，其用「顯示信息元素間的關系——站點地圖」的說法概括了信息架構的呈現形式，其表達如下：
可以看到其表達形式包括思維導圖和流程圖等形式：思維導圖的優勢是能夠總覽全局信息，查看信息的深度和廣度，而流程圖的優勢則更能夠表達整體的邏輯關系。
因此信息架構的呈現需要根據你的產品場景選擇合適的視覺框架表達。不必讓形式限制了我們的發揮，而是應該形式追隨于我們的架構表達。其只是一個信息梳理結構的說明結果（類似于中間態），我們需要借助它來更好的闡述思路與溝通想法。
在輸出信息架構之后，其實這里想聊一聊頁面的呈現。因為當梳理好大的框架后，剩余的頁面細節其實都需要通過原型圖來進行體現。這個過程是從框架到頁面的階段，其實對于設計師來說也是很重要的部分。在這里根據自己的理解列出了以下幾方面的注意點：
A.頁面能夠讓用戶看懂
這其實就是涉及到我們的信息組織和標簽系統。如果當我們的某個頁面不能讓用戶第一時間獲取到該頁面表達的信息，反思一下是在哪個方面做得不好。是標簽系統含義模糊呢，還是信息的組織分類方式不對。從頁面呈現倒推信息架構。
綜合來說就是設計時的排列要考慮用戶的心智模型（比如網頁的常規排版和通用名詞定義等），對于某些難以理解的地方給予用戶幫助和解釋。雖然B端產品想要完全避免學習成本是不可能的，但我們可以盡量減少其學習成本。
B.考慮用戶的視覺動線
當我們在進行信息排列時，這時需要思考的就是用戶的視覺動線，也就是我們常說的視覺瀏覽「F模型」和「Z模型」。對于不同的信息流來說，采用不同的動線模型能夠讓用戶更好地查找信息。
F模型和Z模型的使用區分其實就是在使用場景上，對于內容頁面來說F模型會更為合適（比如文章或者搜索結果），適合文本類的內容。但對于非文本的頁面，則更適合用Z模型，Z型模式的設計跟蹤了人眼掃描頁面時的路線——從左到右，從上到下，能夠更好引導用戶的視線。
C.掌控好適度的信息層級
B端由于在視覺的發揮空間不多，那么相對來說保持良好的信息層級能夠讓整體的體驗變得更為良好。
不管是原型圖還是視覺，整體的視覺層級要體現得更為清晰。按理說最好的視覺層級控制在三級左右。如果發現視覺層級過多，需要考慮是不是因為信息架構設計時縱向層級過深，通過調整架構的形式來更好的呈現信息。以及對同頁面的信息進行重要程度分級。
當我們做完或者聽別人闡述對應的信息架構時，該如何評判呢，到底怎樣的信息架構才算優秀呢。個人認為可以從3方面去進行判斷：
業務層：
1.設計目標合理：能平衡商業目標和用戶的目標，保證客戶和用戶都有較為良好的體驗；
2.核心任務目標：能夠讓用戶順利完成產品的核心任務，需要通過用戶測試來進行驗證
結構層：
1.平衡廣度和深度：在進行功能使用時不會隱藏的太深而找不到，是否有冗余步驟
2.保證拓展性：當前信息架構在面對未來新增或者刪減信息時能夠穩定拓展
體驗層：
1.保證易讀性：用戶不經過介紹，通過頁面信息呈現能夠看懂該產品是用來做什么的
2.保證易查找性：用戶在需要某個功能時能否快捷的找到，是否有多種查找方法（比如搜索或篩選）
合理的信息架構需要具備以上條件，我們需要在做設計呈現時也盡量保證以上條件。但在很多情況下其實并不能完全滿足，這個時候我們需要根據業務目標的重要性來選擇某些點進行滿足。
梳理一下整體文章的架構，其實是按照「是什么-為什么-怎么做」的形式來進行拆分的：
這篇文章想要表達的觀點，不是讓設計師獨立去梳理整體信息架構，而是讓設計師擁有信息架構意識，了解其是如何進行并產生的。這樣你在看到整體架構時，有足夠的理論支撐去判斷它的好壞，并通過自己的理論認知去理解和改進不好的地方。
當我們對信息架構有足夠的認知時，我們在設計頁面時才能有合理的思考方向，做出「正確的設計」，避免成為無情的作圖機器。信息架構作為產品交互視覺最底層的支撐，只有骨架搭好，對于用戶的使用體驗才能夠有本質上的提升。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
按鈕的點擊率低，用戶在放置按鈕的頁面上花費了大量時間，這可能是由于按鈕不直觀和混亂。
我們將從用戶體驗的角度詳細解釋直觀且易于用戶理解的按鈕，例如內容中按鈕的排列、按鈕的形狀以及基于內容的配色方案。
什么是用戶友好按鈕？
您擁有的按鈕越多，做出決定所需的時間就越長。用戶使用每個按鈕以確定需要哪個按鈕來實現目標。對按鈕的不確定性會導致對按鈕不做任何操作。
為防止出現這種情況，請直觀地確定每個操作的優先級。用戶一旦知道哪些按鈕對其任務很重要，就可以立即采取行動。
1. 按視覺掃描模式排列按鈕
應用程序中最常見的錯誤就是按與用戶自然掃描模式不同的順序排列按鈕。優先級最高的按鈕放在最前面，以便用戶首先注意到它。然而，通過視覺加權，用戶會以任何順序注意到按鈕。
按鈕的順序不是為了提高可見度，而是為了提高效率。首先放置高優先級按鈕會使掃描方向從上到下顛倒，從而破壞視線的自然流動。
它不是強制用戶重新掃描按鈕，而是允許用戶在單向掃描中執行高優先級操作。這允許用戶在做出決定之前依次掃描按鈕所需的所有信息。
將最高優先級的動作放在底部使其成為視覺阻力最小的路徑，并且可以快速輕松地點擊。此外，底部位置是手指最容易觸及的位置，進一步提高了效率。
2. 使用形狀區分按鈕和文本
應用程序中的另一個常見錯誤是使用文本來表示按鈕。設計師使用文本按鈕來表明它們的優先級低于其他操作。但是，這對于操作按鈕來說是不合適的選擇。文本看起來不像按鈕。通過使用文本按鈕，用戶可以忽略操作而只看到主要操作。
文本按鈕也會使得用戶對內容是按鈕還是信息而引起混淆。這種不確定性會導致這些按鈕被跳過。
文本按鈕不僅令人困惑，而且還是難以點擊的小目標。將文本標簽放置在按鈕形狀內可以更輕松地調用操作并點擊它。
按鈕形狀是抑制優先級低于文本按鈕的操作的好方法。使用戶更容易識別以他們喜歡的方式實現目標的所有選項。
3. 為漸進式動作添加顏色
高優先級操作是最容易看到的。此操作與用戶的目標直接相關。如果您不確定其余的操作，請考慮哪些操作將用戶推向目標，哪些操作正在遠離目標。
在上面的例子中，“結帳”是優先的，這是用戶達到目標的一個動作。但是，尚不清楚“查看購物車”或“繼續購物”操作是否具有中等優先級。
“查看購物車”操作允許用戶查看他們添加到購物車中的產品，這會促進結帳?！袄^續購物”操作將用戶從結賬返回到產品頁面。
通過查看每個操作，很明顯“查看購物車”具有中等優先級，而“繼續購物”具有低優先級。
按鈕顏色從文本顏色中脫穎而出并吸引用戶的注意力，因此它是顯示漸進式動作的有效方式。如果按鈕顏色與文字顏色相同，則信號不是很強。為漸進式動作添加不同的顏色意味著用戶應該采取的動作。
如果您為每個漸進式動作使用相同的顏色，則用戶無法確定哪個具有更高的優先級。此外，為每種顏色使用不同的顏色只會使用戶感到困惑，并且不會理解不同的顏色。并且，您還會在每個按鈕上感受到相同的視覺重量。
設計的訣竅是使用相同的色調，但改變中等優先級動作的飽和度和亮度，使其看起來比高優先級動作更亮?，F在按鈕權重不沖突，很明顯哪個突出。
對比以增強對比度。主要按鈕使用深色背景上的淺色文字，次要按鈕使用淺色背景上的深色文字。這為高優先級操作提供了更亮的文本標簽和最佳對比度。
4. 改變標簽上文字的粗細
到目前為止，應用這些技術足以區分優先級，但您還可以做更多的事情。按鈕越直觀，用戶就越不需要考慮它。
對每個標簽上的文本使用相同的粗體可以賦予該文本相同的強調量。因此，建議根據優先級分別強調每個標簽的文本。更改文本的粗細，使高優先級按鈕最厚重，低優先級按鈕相對單薄。這樣，當用戶閱讀文本標簽時，文本的權重表示優先級。
在上面的例子中，“結賬”標簽比其他標簽更厚更亮?！安榭促徫镘嚒睒撕灋榘氪煮w，“繼續購物”標簽為中等。因此，文本標簽反映了每個動作的視覺權重?！安榭促徫镘嚒睒撕炆现甘尽?件商品”的文字沒有加粗，因為它是補充信息，并不代表所執行的操作。
5. 為高優先級操作提供圖標
最后一種技術是讓色盲用戶可以訪問您的按鈕。色盲用戶無法通過顏色區分重量差異。因此，我們需要的東西是不是顏色作為一個視覺線索。
為高優先級操作添加圖標將進一步強調它以使其脫穎而出。用戶瀏覽時，用戶通常關注視覺元素而不是文本。該圖標將使所有用戶更加關注高優先級操作。
用戶仍然可以通過移除顏色和標簽來識別結賬按鈕。
總結
如果用戶在操作屏幕上花費大量時間，或者點擊率較低，可能就是按鈕設計的不直觀。在這種情況下，可以使用這些技術來增強按鈕顯示并有利于突顯優先級。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
桌面和大屏幕上導航欄要怎么設計其實是一個經常被拿來探討的問題，如今這也是 B 端設計中繞不開的一個設計問題。Jennifer Rose Kingsburg 曾經有針對網頁的三級菜單導航進行過一份研究，結論是在左側設置導航好處多多。此外還有很多類似的研究，你可以在這里看到很多相關研究的摘要。值得注意的是，這些研究大都是 2017年之前的研究成果，而如今很多設計范式發生了變化。
Eyetrac?荷蘭國際集團的研究表明，用戶習慣于使用 F 式的瀏覽路徑，這使得左側導航在一般情況下有著相對更強的可用性，它不需要用戶視線上的查找，因為用戶會下意識注意到它們的存在。
如果我們經常使用筆記本電腦來瀏覽頁面，會很容易注意到不同的導航模塊對于頁面空間的占用比例，左側導航所占用的頁面控件通常是同樣內容量的頂部導航的占用空間的3倍，因為縱向的側邊欄導航需要考慮到橫向的標題占用空間，再加上搜索等功能模塊的加入，這種空間占用就成了不可避免的結果。即使左側的菜單欄可以折疊，這種處理方法也不總是有效的，因為這可能會隱藏相關條目的標簽信息，降低了導航的可用性。
也正是左側導航本身的排版邏輯，它通?？梢燥@示比頂部導航多一倍的條目內容，如果你的信息架構本身涉及到的一級菜單條目較多的時候，采用左側邊欄導航是明顯更合理的選擇，而且這種導航非常適合隨著時間推移逐漸增加條目的需求。
側邊導航本身雖然占用的空間更大，但是它也有著更多的空間根據需求來定制各種不同的需求，相比于頂部導航，側邊導航甚至可以直接將分層的二級菜單直接展現出來，就像 Outlook 的側邊欄和 Slack 的側邊欄導航。
你會注意到 macOS 和 Windows 操作系統當中，系統默認的用戶界面大都采用了靈活的側邊欄導航設計，很多 web 應用也是如此，它們會將頂部空間留給系統默認的菜單模塊。采用側邊欄導航的 UI 界面可以和操作系統的邏輯保持一致。
懸停激活抽屜式下拉菜單的設計在頂部導航當中是非常自然的，但是在側邊欄導航當中，這種設計可能會在一定程度上遮擋住下級菜單，如果使用在旁邊展開的方式，可能會占用大量的空間，總而言之，它更貼合頂部導航的交互模式。
頂部導航正是因為和懸停出發下級菜單的功能很搭，所以很多電商和大型網站上會使用它來呈現條目眾多的超級菜單。它是用來一次容納超多條目的下級菜單的有效方式，這種布局也為產品展示和廣告留出了足夠多的空間。
如果一種導航模式看起來不夠好用，那么是否要借助重設計的機會，切換到另外一種模式呢？根據 Jira 的用戶測試，95% 的早期用戶對于這種情況會感到非常迷惑，即使是再小的導航功能修改都可能直接影響到大量用戶的日常使用，因此不管哪種導航模式，一旦選定，盡量不要改變。
對于沒有太多條目的頂部導航，在移動端上依然可以直接在頂部呈現，不過如果太多了就需要使用漢堡菜單來承載，或者切換為垂直的側邊欄導航。而側邊欄導航在移動端上相對好一點，因為導航模式本身是一致的，但是有限的空間內如何呈現大量的導航條目同樣存在挑戰。
頂部導航：占用空間小，在頁面的位置最為顯著，涉及條目不多的時候效果非常好。對于層次結構簡單的中小型網站，頂部導航還是很好用的，對于層級較少但是二級條目特別多的超級導航，頂部導航也是不二選擇。
側邊導航：側邊導航支持一級條目較多且層級較多的導航需求，擴展性良好，對于復雜的產品和自定義需求較多的產品、涉及到管理功能、 桌面級產品、 都適合使用側邊導航。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
印象中，Windows 就一直伴隨著我們的成長，它有著 35 年的豐富歷史并不斷帶給我們新的體驗，它的存在充分展現了計算機如何豐富我們的生活習慣：用 Word 寫下第一篇文章，用 Paint 畫出第一幅畫，或者用電腦寫出第一行代碼。
設計下一代 Windows 需要我們理解過去，但更重要的是對當前和新興人類需求的深切共情，以及對技術如何更好落地的理解。當我們開始 Windows 11 的設計之旅時，我們研究了過去 18 個月世界是如何變化的，包括疫情大流行暴露出未被滿足的需求和新的行為方式。更重要的是，我們與人們談論他們的夢想和抱負，這樣我們就可以了解什么驅動著他們，以及他們需要從他們的技術中獲得什么來實現他們的目標。Windows 11 的設計專注于對人的關注，計算機如何賦予他們力量，以及用戶到底喜歡什么。
創造大量的愛需要大量與人的溝通，我們喜歡這種溝通，因為以人為本是我們設計理念的核心。在 85 個以上的專題研究和數萬輪測試中，我們與所有人進行了交談，從喜歡我們產品的忠實粉絲，到希望 Windows 更容易和更平易近人的新用戶。
Windows 10 之前使用 Metro 設計語言，Windows 11 使用 Fluent 設計語言
（彩云注，可能有的朋友分不清這 2 個設計語言，彩云專門研究了一些資料，也跟大家一起分享下：
Metro UI 是一種界面展示技術，和蘋果的 iOS、谷歌的 Android 界面語言最大的區別在于：后兩種都是以應用為主要呈現對象，而 Metro 界面強調的是信息本身，而不是冗余的界面元素。顯示下一個界面的部分元素在功能上的作用主要是提示用戶信息的存在。同時在視覺效果方面，這有助于形成沉浸感。
Fluent Design System（以下簡稱 FDS）主要包括五大核心元素：Light（光感）、Depth（深度）、Motion（動畫）、Material（材質）和 Scale（縮放）。
Fluent UI 設計語言的核心就是在美觀的前提下，應用的使用更加自然和流暢。在體驗上用戶會獲得全新的過渡動畫、視覺效果、半透明和模糊等等。毛玻璃效果重新成為趨勢就是微軟通過這套設計全新語言一手帶起來。
這是 Windows 有史以來最受人期待的發布之一，這得益于基于研究過程中得出的一個關鍵設計指導原則：平靜的技術讓我們的生活真正變得更好。在今天的世界中，平靜是非常需要的，它往往取決于我們掌控、放松和信任的能力。Windows 11 通過讓人感受到熟悉的基本體驗，軟化了以前冰冷的 UI，并增加了情感聯系，最終促進了這一點。這些改進讓你更接近你最愛的東西:家庭、朋友、激情、娛樂和創作。Windows 11 是將所有東西結合在一起的地方，對它的需求從未像現在這樣強烈。
就像它對所有東西造成的影響一樣，疫情也影響了 Windows 11。雖然移動設備的崛起讓 PC 從聚光燈下淡出，但去年它又重新回到了舞臺中心。在個人與專業相結合的新型虛擬模式中，PC 的強大功能和靈活性使我們能夠在家中的各個角落工作。它始終是一個值得信賴的工具和伙伴，跨越工作、家庭和學校，靜靜地等待我們的輝煌時刻。
過去的一年充分展示了人類的智慧。在一片混亂中，我們看到人們實時學習如何在混合環境中工作，幫助孩子學習，并找到新的連接和娛樂方式。我們在 Windows 11 的設計上不斷迭代，努力創造一種深受大家喜愛的體驗，讓我們更容易專注于對我們每個人來說最重要的東西。
情緒板捕捉各種新的圖標、主題、UI 和插圖。
微軟的 Windows 設計團隊是由創造性的實用主義驅動的。為超過 10 億人設計需要同理心。它依賴于將人類的需求內化，以建立一個包容所有人的解決方案，同時仍能傳遞獨立的個性。隨著 Windows 躍入下一個時代，它的演變故事再次被講述，通過以人為本的產品設計，以及打造最具包容性和個性化的操作系統的承諾愈加堅定。
以“開始”菜單為例：Windows 體驗的基礎被移到了核心位置。在聽到人們在使用“開始”時希望提高效率、減少噪音后，我們設計了一種更干凈、更簡單的體驗，通過優先排序人們喜歡的應用和他們需要的文件，將用戶置于中心位置。它還適配現代設備的尺寸因素，使所有屏幕尺寸的訪問更容易，從 Surface Go 到超寬顯示器都能獲得一致的體驗。
在微軟，這些設計決策不是輕易做出的。團隊癡迷于每個像素，我們更新了“開始”Logo，以配合我們新的視覺語言和動畫，為互動增加樂趣和信心。我們也有意地選擇了壁紙，開機畫面，并調整了新的中心對齊，使用戶的體驗更加平衡和集中。我們希望你進入 Windows 11 的旅程從一開始就真正處于中心。（彩云注：大廠的設計團隊做項目更看重整體品牌感知，各個元素間都要能形成一致的設計語言。這里連居中對齊都可以跟設計理念聯系上，值得學習的思路。）
我們對讓技術更人性化的關注也反映在“開箱即用”體驗上，這個體驗曾經的歡迎詞是你“進來”，但現在是歡迎你“回來”。我們知道不是每個人都是新用戶，我們渴望通過我們的設計來尊重我們與長期忠實客戶的關系。你也可以在安裝過程中給你的電腦起一個名字，這樣 Windows 就會給你一種獨特的感覺，比系統設置中使用的隨機名字更人性化。Windows 是你們的，我們設計它是為了慶祝你們的生活和工作方式。（彩云注：在文案上也是精雕細琢，也是為了緊貼他們的設計理念）
新的 Windows 11 主題提供了個性化和自我表達的不同主題選擇
一旦你開始正常使用，Windows 11 就會記住你是誰，以及你在日常生活中需要什么。一鍵交互將帶你從一個任務到另一個任務，而不會中斷你的工作流程。在過去的一年里，工作和生活的界限被重新定義了。在新版本的 Windows 中，組織活動的能力是我們密切關注的東西，確保無論環境如何變化，你都能保持專注和心流狀態。窗口和截圖功能已經被重新設計，以記住你的喜好，所以當你離開工作流去查看新聞的時候（新的窗口部件故意設計來尊重你的工作流程），系統會記住你是如何組織你的空間的。我們創造了一個數字版的辦公桌，它就像依偎在你家里的辦公桌，讓你能夠實現一些偉大的事情，同時又能感受到與生活的緊密相連。
這些變化通過一種優美的新設計語言來實現，使 Windows 在體驗上比以往任何時候都更加連貫。聽到人們對更加柔和、友好和優美 UI 的渴望，我們進化了視覺和聽覺表達。我們圓滑了尖銳的棱角，并創建了一個溫暖的調色板，以構建一個更人性化、更平易近人的語言，同時不會妨礙你的工作效率。
一些新的 Fluent 圖標，UI 和插圖內容的選擇，以及我們的 Segoe UI 變量字體的示意
如何為超過 10 億有著不同和獨特需求的人開發產品？傾聽、迭代、適配。通過用戶的洞察，我們通過軟化邊緣、減少雜亂和一致性設計，使 Windows 11 更加人性化和受歡迎。這些變化還通過新材質、字體、新調色板、新壁紙和主題包來提升自我表達，以兼顧廣泛的品味。
在 Windows 11 中，我們看到了一種從單純的功能性技術向情感、人性和個性化技術的轉變。Windows 不僅僅是一個操作系統，它是編織在我們生活中的一塊織物，讓我們更接近我們所愛的一切，幫助我們創造和連接。
如文章開頭所說，彩云為大家搜集到了 Windows 11 最新設計語言 Fluent UI 的設計組件，供大家參考學習，
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
2021 年已經九月份了，毫不例外，今年也給大家準備了明年的八個視覺設計趨勢，這些將在 2022 年出鏡率繼續升高。設計趨勢一直都處于不斷變化與輪回之中，設計風格技法也跟隨時代潮流在不斷變化。
“趨勢不一定每年都全新，但是趨勢每年都很重要”，與大家共勉。下面，我們一起來看看明年視覺設計大方向，到底有多精彩。
style="font-size:16px;white1;margin-top:0px;margin-bottom:30px;padding:0px;width1;caret-color:#525252;color:#525252;font-family:"letter10000000149011612px;">
幻彩立體也是 3D 設計的演化，在 2022 年它會依然會瘋狂的出現。不過風格上有些微妙的變化，質感更輕盈純粹、色彩更少量、圖形上更幾何塊面化，保持更真實的空間立體感受，直觀自然。
我們可以從 Dribbble 上面看到像 UI8、craftwork、Is 等，他們的 3D 作品逐漸趨近走向更簡潔風格調性，減少復雜的光影，這也是在扁平化中找到的思路。
美國電視頻道 Turner Classic Movies
今年發現越來越多幾何形狀在平面作品或者 UI 中出現，新的幾何圖形更具表意，更趨于表達真實情感。少了一些圖形的抽象化裝飾，更多的是傳達設計理念，品牌符號穿透。當分形形狀與色彩完美結合，可以創建出極具吸引力的視覺效果。
Goodfood Market
HANBOK CULTURE WEEK
unipapa 推出的衛生紙，以簡潔純白的包裝令人眼前一亮。
Gucci 發布首款只能在數字環境中穿著的虛擬運動鞋
AR 和 VR 這個大家都知道，前幾年就火起來了。今天主要提一下今年備受關注的 NFT 藝術，什么 NFT？其中文名稱是非同質化代幣，一種應用區塊鏈技術驗證的數字資產。它最容易理解的外號，是數字藝術品。
Andrés Reisinger 在 2 月份售出支持 NFT 家具
將 NFT 與平面設計聯系起來，就是我們所說的數字平面藝術。它的到來對設計師影響有很大變化，橫向能力要求有所提高，比如了解虛擬數字化設計，以及對全新審美和新三維技術有更高的要求。
Beeple 一幅拼貼畫，經過區塊鏈驗證的藝術品在拍賣會上以超過 6900 萬美元的價格成交。
Beeple 的其中一幅作品
Moooi 與 3D 藝術家 Andrés Reisinger 合作完成了這把不能生產的虛擬椅子
來源：騰訊 ISUX 出品
圖標設計一直是社交領域的重頭戲，自從去年大量在設計作品中后，截止今年依然很強勁。因為很多設計師意識到單一的枯燥圖標無法滿足一些特殊場景的情感化設計表達，平面超萌趣圖標來了，帶來更強的視覺觀欣賞性與生動性。
來源：騰訊 ISUX 出品
襯線字體在今年 Behance 作品集首頁上，可謂出鏡率可比以往高，喚起一種懷舊的感覺。也許是因為看多了襯線字體版式，設計師更多想嘗試用襯線字體來打破僵局，設計出新穎的視覺效果。
Vocation
自然設計，主張可持續性發展與環境建立聯系，是一種新生活態度，是百轉千回，回歸本源的理想之態。設計師通過設計表達對環境的敬意，與產品建立強相關，既能表達產品自然純粹之意，又可以宣傳品牌貼近我們生活自然之意。
&SMITH 涼茶包裝“循環生活”理念
TR?VE
dia Design studio
今年很多平面海報設計、品牌符號的動態系統設計中，都可以看到字體被扭曲、變形，以一種新的形態出現在眼前，沒錯，這就是超變形字體。它打破常規，以不同尋常的路子出現在大眾視野中，帶來全新視覺體驗。
1. Pinterest Sans
說到動態包裝，這是在國內外這兩年火起來一個大趨勢，首先微軟早期各種產品宣傳視頻，在到 Google、IBM、Apple 的視覺語言更新宣傳視頻?，F在越來越多廠商喜歡廠商動態包裝產品，這樣比平面展示更多細節與生動。
2. Rise
格拉斯哥設計工作室 Need 為 Rise 全新重塑品牌，同時通過動態展示品牌延展設計。
今天的趨勢分析差不多到這結束了，設計趨勢沒有好壞之分，選擇合適的應用在設計中，將發揮不可估量的作用。希望今天的分享能給大家帶來一些啟發。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近讀了《有效競品分析》這本書，書中系統地介紹了競品分析方法論，全面、透徹，收獲頗多；為了更好地形成知識體系，加深理解和印象，書寫成文，分享給現在看到的你。
書中說這是好產品必備的競品分析方法論，作為設計師，總說要有產品思維，那么學習產品必備技能，便是一個培養產品思維的重要途徑。
這篇小文，將從四個模塊講述如何有效競品分析。
競品分析顧名思義，是對競爭對手的產品進行比較分析。
不同的角色做分析的方向是不同的，UX設計師做產品體驗分析，從視覺和感覺兩個方面去分析；產品經理做競品分析從功能、框架、技術、戰略等，分析產品背后的部分，比如競品為什么這么做？是如何做到的？下一步會怎么做……這里作者主要是分析產品層面的競品分析。
競品分析的意義根據產品發展階段不同，可歸納為以下四點：
通過競品分析，可以快速了解這個行業、市場、競爭對手的產品以及自己的產品。
從產品戰略層面來說，可以為企業制定戰略、布局規劃提供依據；可以通過MVP來測試產品是否符合市場預期，找準產品定位。
做競品分析會讓我們時刻關注競爭對手，關注環境的變化，關注政策的變化等，有效的競品分析可以預警避險。
定方向、定目標、定策略，包括競品分析、用戶研究、需求分析、產品規劃、產品設計等。
輸出一份完整的競品分析，需要完成六個核心流程：
明確目標：明確為什么要做、想解決什么問題、競品分析的目標是什么
選擇競品：選擇要分析的競品、直接競品、間接競品、參照品
確定分析維度：根據競品分析目標，確定要從哪些維度分析競品
收集競品信息：從各種渠道收集競品信息
信息整理與分析：對收集到的競品信息進行整理與分析
總結報告：得到競品分析的結論，輸出競品分析報告
在第一部分全面認識競品分析中有提到競品分析的意義，也是競品分析的目標所在，概括的可以分為四類：決策支持、學習借鑒、市場預警、機會探索。
根據產品生命周期不同，競品分析的目標和側重點不同。所以在競品分析之前一定要了解當前產品處于什么階段，需要分析的目標是什么。
競品的選擇，首先要了解競品的分類：直接競品、間接競品、替代品、參照品。然后根據目標針對性的選擇產品。
直接競品
是指產品形式和目標用戶群是完全相同的產品。比如生活中最鮮明的例子：可口可樂 VS 百事可樂。
間接競品
是指產品形式不同，目標用戶群類似的產品。比如：可口可樂 VS 元氣森林，都是飲品。
替代品
是指產品形式不同、品類不同，目標用戶群類似，能滿足用戶相同需求的產品。比如：公交車 VS 滴滴打車。
參照品
是指有參考價值的產品，可能是跨界的各種產品，開放式的產品類別。
競品的選擇不是數量越多越好，而是要選擇合適的，做深度分析，分析出有價值的信息。
分析維度是指從哪些方面、哪些角度去分析，在這個階段要確定產品分析的廣度和深度?？梢詮漠a品視角和用戶視角兩個不同的視角去確定分析維度。
產品視角：從產品本身的信息量上去選擇要分析的維度。以功能、框架、技術、體驗、用戶……等維度進行分析；
用戶視角：從用戶最關注的信息上去選擇要分析的維度。以$APPEALS（客戶需求分析）框架作為分析框架。
$APPEALS方法是IBM在IPD總結和分析出來的客戶需求分析的一種方法。它從8個方面對產品進行客戶需求定義和產品定位。具體如下：
$-產品價格（Price）；
A-可獲得性（Availability）；
P-包裝（Packaging）；
P-性能（Performance）；
E-易用性（Easy to use）；
A-保證程度（Assurances）；
L-生命周期成本（Life cycle ofcost）；
S-社會接受程度（Social acceptance）。
收集競品信息的渠道總結為三種：官方渠道公開資料、第三方競品分析平臺獲取、打入產品自行體驗或與用戶接觸調研出來的等。
在之前公眾號文章里曾分享過有關用戶分析、產品分析等數據分析平臺的匯總表。
信息收集完成后，并不是所有信息都是可用的，需要對其進行篩選、分類、剔除、評級等，得到有效信息，針對有效信息進行分析。
這里也是競品分析重要的一個環節，不同的目標，需要選擇不同的分析方法，匯總一下競品分析的方法有：比較法、矩陣分析法、競品跟蹤矩陣、功能拆解、探索需求、PEST分析、波特五力模型、SWOT分析……（下一部分會具體講解）
所有的分析步驟都完成之后，需要對分析結果進行總結，從中挑選出有價值的信息，形成一份分析報告，報告的格式可根據展示場景輸出選擇適當的格式。
與競品做橫向比較，深入了解競品，并通過分析得出優勢、劣勢。
打勾比較法：有無某功能，如果產品功能復雜，要拆解成2級功能等再橫向比較
評分比較法：應用于用戶體驗設計評估和$APPEALS要素評估
描述比較法：通常會用“界面截屏+文字描述”的形式
以二維矩陣的方式分析產品與競品的定位、特色或優勢。
跟蹤競品的版本更新，找到競品各版本的發展規律，以推測競品下一步的行動計劃。競品跟蹤矩陣包括幾個要素：時間、版本號、版本變化要點（新增、優化、刪除）以及外部環境變化。
把競品分解成1級功能、2級功能、3級功能，甚至4級功能，以便更全面地了解競品的構成，避免遺漏。
挖掘競品功能所滿足的深層次的需求，以便找到更好的解決方案，提升產品的競爭力。
PEST分析法是對宏觀環境進行分析，以便找到機會，認清威脅與挑戰。
所謂PEST ，P是政治（Politics），E是經濟（Economy），S是社會（Society），T是技術（Technology）。
對行業環境進行分析，評估某一行業的吸引力、利潤率。
PEST分析和波特五力模型可歸納出SWOT分析中的機會和威脅，通過SWOT分析找出產品的優勢、劣勢、機會、威脅，以便制定競爭策略。
產品越發展難免會進入同質化的競爭，與其更好，不如尋找更好的機會點。在競品的基礎上做“加減乘除”，以便進行差異化創新。
借助精益畫布、競品畫布、戰略畫布這三個工具可以提升競品分析的效率。
精益畫布是關于產品商業模式分析的一種很實用的工具，可以用來做產品商業模式規劃和分析。精益畫布可以幫助產品更全面的思考、決策，從系統、商業的角度來規劃產品、分析產品，建立產品的全局觀。
精益畫布在日常工作中的使用場景包含：編寫PRD、項目立項、商業計劃書……
知己 用精益畫布--規劃自己的產品
知彼 用競品畫布--規劃競爭對手的產品
競品畫布是前面提到的競品分析的一種方式，是把競品分析的六個步驟固化到一張表上，作為一個規范性的模板，引導大家更規范的做競品分析。
競品畫布相當于競品分析報告的MVP（最小可用產品），用來低成本快速驗證分析的思路是正確的，避免返工。
很多人在剛接觸一個新產品時，很容易盲目的去分析，找不到方向，此時借助競品畫布這個標準化的模板，一步步的去分析產品，可以很快地了解一個產品。
戰略畫布是做產品差異化競爭的有效工具，是通過價值曲線的方式，在某一時間段內尋找到有用戶價值的戰略方向。
價值曲線
價值曲線是以圖形的方式描繪出一個產品在各個競爭元素上表現得相對強弱程度，由此可以看出一個產品的戰略輪廓。
橫坐標顯示產品的競爭元素、價值點（用戶在意點）等，通過用戶的評價就可以了解到對于用戶來說他們最在意的是什么，他們使用產品的原因是產品給他們帶來了什么，這就是要尋找的競爭元素的來源。
縱坐標顯示相對水平。
通過價值曲線的方式，可以清晰的看到產品與競品間的差異點，戰略畫布是做產品差異化創新的有效工具。
最后，利用思維導圖結構化的方式，整合了競品分析核心知識點，分享給看到的你：
看似這些競品分析的方法論是在做一些與設計無關的事情，但很多方法論是通用的，可以應用到視覺、交互的競品分析當中；作為設計師不能給自己設限，要多去學習跨界的知識，了解這些競品分析的方法論后，以后再接觸新項目，便可以借助文中的規范嘗試做競品分析，助力自己快速了解業務、行業等。
總之，多讀、多看、多學，步履不?！?br />
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn