用戶體驗是一個老生常談的話題。在進行 UI & UX 設計時，我們經常會忽略一些細節，雖然我們并沒有覺得有什么問題，但往往會極大地影響用戶的體驗，從而影響整個產品。作者在本文中提出了 6 條提升用戶體驗的微技巧，一起來學習吧！
在設計高效、易讀和漂亮的 UI 界面時，只需要小的改動就能讓你的設計眼前一亮。在這篇文章中，我為你帶來了另一些容易付諸實踐的 UI 和 UX 微技巧。這些技巧只需很小的改動就可以幫助你提升用戶體驗。讓我們開始吧！
如果你有一個設計項目，可以讓你在顏色選擇方面有比較多的自由，不要總是傾向于用彩虹般的顏色來進行設計。
如果你走的是彩虹路線，你很快就會發現很多內容看起來都不匹配。簡單地使用一個基礎色，然后將該顏色的色調和明暗進行變化并應用，可以令你的設計更加協調和一致，并且看起來更專業，而不需要那些閃亮的彩虹和需要色彩理論學位。
UI 可以是干凈的、極簡的和直截了當的，這毋庸置疑。但不能以犧牲用戶體驗為代價。對于像選項菜單這樣簡單的東西，要確保用戶只需快速瀏覽一下，就能夠找到選擇的項目。
你不需要在這里追究更多細節。簡潔的粗體就足夠讓用戶輕松的分辨出他們選中的目標，而且他們的輸入已經得到反饋。
當涉及到長篇文字內容時，你可能會傾向于使用灰色的中間色調，這可能沒什么問題。但如果你同時使用更輕字重的字體，就會發現這影響了這段內容在任何尺寸屏幕上的可讀性。
不要讓用戶因為這種原因退出頁面?？梢酝ㄟ^將文字的顏色加深來簡單地解決這個問題，讓每個人都更加易讀。對于較輕字重的字體，只需將其顏色加深幾個級別，就能顯著的改善其可讀性。
你希望用戶的眼睛每次都能快速、有效地注意到頁面上最重要的元素，并將認知的努力降到最低。通過使用視覺層級原則，如字體大小、字重、顏色和布局，僅舉幾例，你可以通過這些技巧輕松地把最重要的元素放在突出位置。遵循這些原則有助于改善用戶的體驗，并有助于引導用戶以更直接、準確地方式使用產品。
在用戶進行操作之前，特別是點擊某些 CTA 按鈕之前，要確保他們不會被蒙在鼓里，知道接下來會發生什么。在執行操作之前，始終讓用戶清楚地了解他們在點擊突出顯示的 CTA 按鈕時可以期待些什么。改善每一步的用戶體驗，不要讓他們在旅程中任何一個觸點產生疑問。
CTA 按鈕在頁面中哪怕不是最重要的部分，也是最重要的之一，讓它在頁面中突出出來!
不要讓用戶將它與頁面上其他類型的元素（例如通知或標簽）混淆。它需要很容易地被分辨出來，而這可以通過簡單地為 CTA 設置單獨一種顏色就做到。當然，你可以在尺寸、形狀等方面做更多的細節，但只要為你的 CTA 保留一種顏色，僅此一點就可以減少大部分問題。
我希望通過這幾條簡短的小貼士，你能意識到對你的設計進行小的調整也能帶來完全不一樣的用戶體驗。
譯者：吳鵬飛；授權獲?。簠蛆i飛；審核指導：王翎旭；
本文由@三分設 翻譯發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協議。
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
毫無疑問，表格之于B端產品而言是及其重要的一部分，那么，如何系統掌握B端產品中的表格設計呢？本文作者從表格設計規范與交互邏輯兩個角度提出了15點建議，干貨滿滿，希望對你有幫助。
表格作為B端產品中重要的界面組成部分，承載著內容展示、數據記錄等多重任務。每家產品的表格看起來構成差不多，但在交互細節上仍然有很多好的地方值得我們仔細思考。
本次通過整理10條B端表格設計規范+5條B端表格交互邏輯，系統掌握B端產品中的表格設計～
表格內的信息通過對齊，會更加規范易理解，給用戶視覺上的統一感，且視線流動順暢，能夠讓人快速捕捉到所要的內容。
默認展示的列數為3-8列，如果需要展示更多列數，則需要優先固定展示重要列，其余的列的內容會以滾動條滑動而展示出來。
有操作時需固定，操作項不固定時無法快速定位會降低操作效率；重要信息固定，有利于快速獲取重要的內容。
寬度的尺寸大小自適應，但需要根據文字的重要性顯示，重要文字內容優先完整顯示。（如果由于屏幕小表格會出現省略，就要考慮多一個瀏覽器自帶的title提示。）
注：當第一列是序號或多選項時，列寬不需要太寬，這樣視覺不會顯得空洞。
字符不要多，如果文字太多，就需要做文字信息精簡化。同樣，對于專業術語或用戶不常見的名詞應給予一定的幫助說明。
表格內容較多且有長文本時，長文本縮略展示；表格內容較少時有長文本，長文本換行展示。
表格中經常會出現空數據或無數據的情況，留白處理會給用戶造成一定的困惑和誤解，是系統沒有加載出來嗎？明智的做法，使用「-」填充顯示。圖片為空時使用圖片占位符。
同一項目中的操作列命名應該保持統一，例如：常規增、刪、改、查命名為新增、刪除、編輯、詳情。
操作項超過三個時，將操作低頻折疊收起，可以幫助頁面突出更加重要的信息，減輕空間壓力，減少干擾。
給數據做升降區分可以快速判斷數據的趨勢，國內數據升圖標默認為紅色，降的為綠色。
全局操作為無需選擇數據內容即可進行的操作，常見的有新增、導入、篩選。
批量操作就是對表格的多行數據同時操作，常見的有導出、刪除。
全局和批量都不屬于單個對象因此需要放在表格外，操作具體的位置排放根據操作的重要程度一次從左到右遞減。
條紋顏色：標題背景色透明度60%左右；（條紋顏色視覺上應該比標題欄弱一點）鼠標hover顏色：主題色透明度10%。
當閱讀豐富且繁多的表格時，由于屏幕有限，用戶不得不拖動橫向或縱向滾動條來閱讀信息。
固定表頭，能夠讓用戶明白當前單元格內信息的屬性而不至于不知道該信息的意思。固定表頭也是一種界面友好性的體現。
可以讓無序信息內容進行有序排列，排序分為升序和降序，一般用在數據、時間、數量上。
允許調整列的寬度來查看更加完整的縮略數據。被截斷的數據，默認支持鼠標懸停時瀏覽器自帶title顯示完整數據。
呈現大型數據集時，水平滾動是不可避免的，通過橫向滾動查看其它數據。將首列進行固定（若包含勾選操作，則一起固定），以便用戶將數據與對象進行對應。
若表格是分頁處理的，分頁會放在上部、下部或上下部均有，分頁固定省去了用戶需要翻到頂部或底部進行操作的麻煩。
作者：譚檀檀
本文由 @Clippp 授權發布于人人都是產品經理，未經作者許可，禁止轉載
題圖來自 Pixabay，基于 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
前人留下的一些設計原則能夠幫助我們更好地進行頁面以及產品的設計，讓用戶有更好的體驗。本文對帕累托法則進行了介紹，希望能幫助大家在以后的設計中更好的理解與運用。
威廉·斯特倫克（William Strunk）說過：“優秀的設計師有時會無視設計法則，但當他們這樣做的時候，通常會有一些補償性的措施，除非你確定你能做得那么好，否則最好還是遵守這些法則”，所以設計師需要對一些通用性的法則有所理解，做好相應的知識儲備，以便在需要時從中找尋相通的規律和事務的本源。
設計常常是以一種美觀且富有規律的形態出現，不論大家是何種姿態、什么樣的知識背景，一旦踏入設計領域之后就會忍不住的去尋求設計法則，探索期背后的設計規律，因此經過長期沉淀，一些大佬和前輩們留下了大量的通用設計法則。
今天，筆者就說說帕累托法則，希望能幫助大家在以后的設計中更好的理解與運用。
19世紀末，意大利經濟學家和工程師維爾弗雷多·帕累托（Vilfredo Pareto）發現，自家花園中80%的豌豆產自于20%的豌豆莢，在隨后研究土地所有權和財富不平等的問題中，再次發現意大利 80%的土地屬于 20%的人。
20世紀初，由管理學家約瑟夫·朱蘭（Joseph Juran）將其命名為帕累托法則，即80%的結果是20%的原因造成的，并且號召關注「重要的少數」而不是在「瑣碎的多數」當中投注精力。后續在經濟學中得出結論（80%的財富掌握在20%的人手里）更加證實了帕累托法則的觀點。
帕累托法則有很多不同的叫法，如帕列托法則、關鍵少數法則、二八法則、巴萊特定律、最省力的法則、不平衡原則等，后續筆者將其稱為「80/20法則」。
其實，80/20法則是一個較為抽象的概念，可以理解為：大部分的效果由少數幾項關鍵的因素來決定。在實際的場景中，“大部分”不是精確的80%，“幾項關鍵因素”也不是固定的20%，數據會有所浮動，可能是70%+30%或者90%+10%，但不管這些數字如何波動，其背后蘊含的規律（集中的投入將產出大于預期的結果）是不變的，并且生活中存在的許多不平衡現象，都與這個規律相當接近。
80/20法則并不受人為直接控職，更多時后是自然而然的形成，其適用領域非常廣泛。早期大多數用于社會、經濟、管理以及工程等領域，而在80年代末就已經有設計師將其設計領域，在各行各業中，已經有大量的案例證明了 80/20原則：
70年代中期出現圖形化界面，而到80年代末，80/20法則就已經被設計師引用在設計規范當中，后續經過不斷的發展及優化，現已深入設計中的方方面面，PM用來處理KPI、UX用來劃分權重、UI用來決策版面布局等。
界面設計中該如何應用80/20法則，這就需要設計師時刻注意如何讓用戶更快找到目標、如何更順暢的完成任務以及如何擁有更愉悅的心理感受。例如80%的用戶只會用到20%的功能，那么設計師就應該將80%的時間、精力集中在這20%的功能上，不斷迎合用戶需求以及使用體驗。
80/20法則能夠幫助我們提供決策思路、梳理設計方向，通過前面的了解，我們應該清楚了產品80%的用戶只會用到20%的功能，而80%的收益也恰恰來自于20%的付費用戶，甚至低于20%。
雖然一直呼吁盡量滿足所有用戶，但產品團隊的重心始終要圍繞著20%來進行，從產品到設計、再到開發測試，都能以此為方向制定問題的解決方案。
任何一款產品都不能忽略主次，每隔一段時間就要重新評估功能價值，以備后續的更新迭代，針對非關鍵性的80%切勿耗費過多的精力，以免喧賓奪主，不僅得到不好的反饋、還會帶來不必要的損失，吃力不討好。
對于已經過期的核心（曾經20%）功能，需要及時降低權重以及精力的消耗，不然即便是掌聲一片、也可能無法變現。
用20%的部分創造80%的價值，并不意味著只關注20%的關鍵性指標、其它的就可以被忽略，這樣做表面上看是挺誘人，但會讓其他很多指標停滯，呈現出產品過度優化的情況，造成短時間內隱藏的負面影響。
團隊應該要有眾覽全局的眼光，考慮到各指標間的相互影響，可視情況而定將時間和精力合理分配，如90%+10%、80%+20%、70%+30%等，只要是將大部分用在關鍵性指標上即可。
在UI設計中，我們會將主要精力花費在20%的頁面設計上，例如APP底部標簽欄的幾大主頁或其它重要的一/二級頁面，會花費更多的心思去構思不一樣的布局、表現手法，將設計功底凸顯出來。而剩下80%的頁面就相對機械化，會使用一些常規樣式以及復用的方式像搭積木一樣快速完成，成本之低、效率之高毋庸置疑。
同一個頁面的設計方式也是如此，設計師將大量心思放在首屏及位置靠上的功能上，待超過一屏后下滑時，設計也會逐漸輕量、組件化，這有助于節省產品、設計、開發更多的時間。
用戶瀏覽屏幕時，眼球移動的順序通常都是從左到右、從上到下（基于網頁瀏覽眼動測試），這種移動軌跡很像字母「F」，這也讓F型布局成為網頁設計中效率最高的方式之一，所以設計師通常會將重要的信息放在左上角或左側，不重要的信息放在右側。
如下面這張眼動測試圖，F型布局也正好詮釋了80/20法則合理性與可行性，在頁面中20%的關鍵區域，吸引了用戶80%的注意力。
很多產品因為業務功能的龐大，一股腦的將信息全部展示出來，看起來十分臃腫，用戶不能快速找到自己想要的信內容，就會失去信心。
優酷APP首頁將熱門頻道和點擊頻率較高的頻道顯示在頂部導航中，如精選、電視劇、電影、最新院線等，而其他更多的分類則隱藏在頻道選項卡中，將少量（≈20%）重要的內容放在明顯的位置，目的就是為了讓大部分用戶更快觸達，提高了產品的易用性。
在一些選項列表中，由于選項數量的龐大，會給用戶增加使用難度。
例如，使用美團購買火車票在選擇地址時，面對超長的地址列表，逐個查看或通過字母篩選，都要花費一定的時間和操作成本，即便可以通過碼字搜索來完成，但因為自行輸入有很多的不可控性，能讓用戶選擇的就不要讓其輸入。
對于地址列表，除開自動定位和搜索歷史，運用80/20法則就能很好的解決這一問題，系統將約20%高頻選擇的熱門城市作為單獨的模塊放在全部列表之前，提高了大部分用戶的搜索效率。
極簡風格的界面設計跟80/20法則在精神上保持著高度的一致，剔除多余、無用的元素，而保留的每一個元素都是有目的、有針對性的，也是絕對必要的存在。在極簡主義設計中，視覺上簡單干凈，大部分都是通過通過留白來襯托關鍵性元素的存在，讓用戶更加聚焦于主要功能/信息。
奧卡姆剃刀指出「如無必要，勿增實體」，需知頁面中每多一個元素都會增加視覺“噪聲”，意味著用戶需要花費額外的時間和理解成本，對用戶體驗的影響是很大的。那么問題來了，當產品需要增加一項需求量小但確實存在的功能，該怎么處理？
這時我們可以將奧卡姆剃刀原則作為最終的評判標準，是否需要增加上述所說的功能，就要看看能否很好的控制團隊開發成本和用戶體驗成本。
其實在80/20法則中，很多小眾但確實存在的功能需求基本很難抵消所造成的用戶體驗損失，所以即便實現了這個需求，也很難分配出20%的精力去維護與迭代，甚至“俺耳盜鈴”般的將其遺忘，但這個視覺“噪聲”一直存在，如果事先能分析出這種結果，這個需求根本不需要增加。
在2004年長尾模型才被提出來的時候，很多人認為這是在顛覆80/20法則，它們的曲線長得很像，但結論完全相反，那條長長的“尾巴”（非關鍵的80%）所占據的長度幾乎與頭部的（關鍵的20%）高度相當，這說明收益雖低，但這么多數量的累積，依然值得重點關注。
所以有很多企業在采集差異化戰略時運用了長尾理論，例如小米搭建的全品類商城用的是長尾理論。
乍一聽好像很有道理，難道80/20法則被推翻了嗎？事實并非如此，長尾理論的成立必須要滿足兩個條件，第一是尾巴真的足夠長（小眾需求確實非常多），第二長尾巴能被用戶發現（龐大的用戶量），這兩個條件缺一不可。例如京東、淘寶、微信、支付寶等，其前提都是建立在大規模、且海量的用戶資源之上，不管多么隱蔽、多小的動能，總能擁有一些不錯的曝光度，所以才能發揮長尾模型的作用。
說道這里，大家應該就明白了，那些中小型的產品對長尾模型大多是望塵莫及，所以在你的產品規模、用戶量沒有達到一定的級別之前，就不要妄捧長尾模型，用好80/20法則就好。
80/20法則在實際工作中是一個相對普遍的定律，它能讓我們靈活思考設計問題，更好的為用戶服務，雖然80/20法則也存在一定的爭議，但還是適用于覺絕大多數的場景，在關鍵時候使用，能幫助我們準確的找到問題點，在有限的時間和精力下快速作出優化決策并、關注核心功能，最終達成目標。
專欄作家
大漠飛鷹；公眾號：能量眼球，人人都是產品經理專欄作家。致力于產品需求的驅動、產品體驗的挖掘，利用設計的手段為受眾用戶帶來更好的體驗，即好看、好用。
本文原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協議。
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
都是交互反饋和提示組件，大家可能會疑惑：文字氣泡 Tooltips 和氣泡卡片 Popover 的區別是什么，兩者之間的應用場景如何？本文對兩者的差異進行總結，希望對你有所幫助。
同樣都是交互反饋及提示組件，你可能會疑惑：文字氣泡 Tooltips 和氣泡卡片 Popover 有什么區別？分別有哪些特定的使用場景？
本文就來詳細分析下這兩個組件的區別和聯系，幫助你做好應用。
氣泡卡片（Popover）是當用戶點擊 / 鼠標移入元素時，就會彈出氣泡式的卡片浮層。當對于某個元素有更多的解釋性描述和相關操作時，這些內容可以收納到元素的氣泡卡片中，根據用戶的操作行為進行展現。
其用法特征是：
1. 用戶可以在浮層卡片上進行相關操作，也即氣泡卡片可以并需要承載更復雜的內容和交互功能。
2. 卡片中可以包括的內容有：文字說明，圖片內容，操作按鈕，相關鏈接等等。
3. 組件功能側重于：承載信息和操作。即收納并在需要的時候展示與該元素內容相關的信息和操作。這些信息的特征通常是：
文字氣泡（Tooltips）是相對簡單的文字提示氣泡框。用戶使用鼠標移入元素后顯示提示，移出后提示消失。
其用法特征是：
1. 文字氣泡通常不承載復雜的信息和操作，僅提供一段文案解釋，也即用戶在文字氣泡中不能做除閱讀外的其它操作。
2. 該組件功能側重于：解釋說明。即對局部內容或元素進行文字性的解釋說明。通常來說該氣泡是對其載體本身的解釋，比如：
有同學看過 Ant Design 組件庫提供的組件樣例，會覺得氣泡卡片 Popover 是白色背景，而文字氣泡 Tooltips 是半透明黑色背景。
其實這兩個組件的背景顏色上的差異并不是重點，因為這兩個組件都可以使用其他顏色（比如帶有透明度的品牌色）做背景底色。顏色并不具備唯一標準。AntD 就提供了多種顏色的文字氣泡樣式：
也許你已經發現，即使我們將一個組件的使用規范和應用場景解釋得再全面，在使用時也總會出現一些特殊的業務需求和應用場景無法嚴格按照規范來執行。
面對復雜多樣的業務需求，我們更應該學會：在理解業務需求的基礎上，合理調整組件的使用方式和樣式。
組件的規范對設計師來說并不應該是限制或約束，而是一種能夠幫助我們快速實現產品設計一致性，保證基礎體驗的快速方式。
專欄作家
元堯，人人都是產品經理專欄作家。
本文原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協議。
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
關于“管理模式下是否需要確認按鈕”這一問題，作者結合自己最近的一次設計方案復盤，從三個維度展開分析，希望對你有所啟發。
需求：在課程章節頁面，老師希望可以對章節、單元編輯名稱和調整順序。
設計問題：
最開始想到的就是放在章節單元后，增加更多 icon，用戶點擊更多進行章節單元的編輯刪除，拖拽直接調整排序。可是這種設計方式讓章節看起來復雜很多，而且老師使用頻率很低，一般只有在學期剛開始，備課時設置，后期幾乎不再會進行調整。
為了降低頁面復雜度，我把編輯排序放在統一入口，點擊后，再進行操作。我給這個入口命名為管理。點擊管理，進入到管理模式，調整章節、單元的名稱和層級結構。
實時保存就是用戶的每一步操作都會立即生效。比如一些標題的編輯，鼠標hover上去會展示輸入框，光標消失即保存成功?；蛘咧蹙庉嬑恼聲r，也會告訴你保存中。
實時保存相較于確認保存少一步操作路徑，每一步操作立即生效同步更新，相對來說效率較高。由于人們總是會忘記收尾工作，實時保存也避免了讓用戶承擔忘記點擊確認按鈕而使數據丟失的風險。
實時保存也有缺點，比如當用戶想要反悔撤銷的話，就會比較困難。一般會根據具體需求搭配撤銷按鈕、歷史版本等方式，給用戶一個反悔撤銷的機會。
用戶進行的一系列操作，都不會立即生效，而需點擊確認（保存等）按鈕后，所有操作才會生效。比如飛書管理后臺對于會議室預約規則的設置。默認是查看模式，修改字段進入編輯模式，展示取消、保存按鈕，點擊保存更新修改，取消則回到編輯前的狀態。
這種方式的好處是，減少用戶修改過程的心理壓力。用戶在修改過程中可以隨意調整，內容不會被同步，修改好后點擊確認按鈕統一保存，內容同步。
為什么用戶在編輯時會有心理壓力？重點就在于同步給誰，以及同步的內容是什么。
內容修改后只同步給自己。
例如微信標簽管理，進入管理模式后，對于標簽的排序，刪除都實時保存更新，沒有確認按鈕。標簽修改后的結果只會同步給自己，而自己在管理標簽的過程已經知道了修改結果，如果增加確認按鈕倒顯得較為繁瑣。
內容修改后會同步給其他用戶。
例如飛書管理后臺對于會議室預約規則的設置，設置結果會影響其他用戶預約會議室，比如能不能約、幾點能約，所以同步設置結果就必須要謹慎一些。而多一步確認（保存）按鈕可以幫用戶再次確認自己的操作行為，讓同步結果更謹慎。
以上可以總結為，如果內容修改后只同步給自己，則實時保持更便捷。如果內容修改后會同步給其他用戶，則需考慮增加確認按鈕讓操作行為更謹慎。具體還需考慮內容本身。
如果內容對其他用戶影響不大，也可以使用實時更新。
比如飛書管理后臺對于會議室名稱的修改，修改后，光標移開即保存成功。會議室名稱對于用戶來說只有信息的傳遞，沒有功能上的制約，甚至也不影響用戶行為目標?？梢运伎枷?，當用戶想約會議室時，什么會影響用戶決策？比如位置-用戶會考慮距離是否合適、或者狀態-是否當前被占用等，但會議室名稱幾乎不會影響用戶預約決策。所以內容對用戶影響較小，使用實時更新。
編輯者對于內容的重視程度。
比如知乎內容發布后，二次編輯，需點擊保存更新才會同步給其他人。創作者寫文章耗費了自己的時間成本，好的內容可以幫創作者帶來流量和價值感，所以創作者會更重視文章內容的完整性。而實時同步編輯過程所展示的內容是不完整的，會影響讀者閱讀內容的感受。所以點擊保存更新，統一同步內容可以避免這些問題的發生。
回到自己的產品上，老師對于章節的管理操作會同步給學生，調整結果會影響學生查看章節結構。作為學生，主要任務是完成章節或者單元下的學習活動。所以調整的內容并不影響學生完成學習任務，按照我們所總結的規則，內容對于同步者影響不大，可以使用實時更新。
再來看編輯者對于內容的重視程度。老師會在學期前開始備課，管理層級結構屬于備課環節，教學內容一般都是固定的，所以后期調整層級結構的頻率很低。操作行為低頻且優先級不高，內容固定，對于老師來說，重視程度一般。所以也可采用實時更新。
由于老師編輯章節或單元已有保存按鈕，如果管理模式還存在保存操作的話，對于編輯功能來說需 2 次保存才算是真的保存，理解成本過高。選擇實時保存方式更合適。
根據以上 3 點，我的方案選擇實時保存，實時更新。
以上是我對于工作內容中關于管理模式的復盤思考，最終設計方案的產出還是需要結合自己產品的業務，在體驗和功能的權衡之下做出最合理的設計。
關于第三部分排序放在下次在寫….
本文由 @阿青 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議。
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
編輯導語：在做UI設計時，定義并統一顏色規范對產品設計和團隊整體推進具有重要作用，本篇文章通過一個國外大廠真實的顏色組件升級案例為我們分享了統一顏色規范的好方法，一起來看。
Hi，我是彩云。咱們平時在做UI組件庫的時候，會遇到一個問題，定義了很多顏色但在團隊合作的時候，卻依然還是會根據每個設計師自己的喜好來配色，很難將顏色規范很好的統一起來。這其中有一個很嚴重的問題就是對于顏色的命名和管理不夠清晰，那么今天這篇文章通過一個國外大廠真實的顏色組件升級案例，希望能幫你解決這個難題。
我們花了幾個月的時間改進了設計系統 Cobalt 中顏色的處理方式。顏色是 UI 的基本元素：它們構成視覺語言，幫助定義品牌，并被開發和設計師每天用在產品設計中。
但如果我們在使用顏色上沒有明確的指導原則，如顏色被團隊中的設計師按喜好使用時，將會導致產品看起來非常混亂。
我們APP中的不一致例子
接下來我會告訴你，我們是如何做好顏色規范以及在整個項目中面臨的挑戰，正如你將看到的，這個項目并不像看上去那么簡單：
如何通過 Getaround 在設計和技術方面管理顏色概述這個系統的局限性，并說明我們如何改進它什么是語義顏色我們是如何實現它的，以及它帶來的優勢！
和許多設計團隊一樣，我們使用 Figma 作為我們的主要設計工具。我們的顏色被放在“基礎”庫中，可以在其中找到我們在產品中使用的所有常見樣式，例如字體樣式、顏色、圖標等。這個庫提供了我們每天使用的專用系統庫（iOS、Android、Web、電子郵件）。顏色名稱過去是基于它們的外觀。例如：紫色顏色是我們的主要顏色，而石墨色是基本文本的常規顏色。
在我們的APP中，曾經會用相同的系統來管理顏色。此外，還有一些語義顏色，但僅限于 iOS，開發用的也不多。
在使用這個系統時，團隊反復面臨同樣的問題：如何確保從一位設計師到另一位設計師以相同的方式使用顏色？如果沒有適當的指導原則，我們如何確保開發很好的還原？如果明天我們必須用全新的配色方案來改造我們的品牌，要怎么快速統一？讓我們試著找出我們是如何陷入這種境地的？
所有設計師都使用相同的色板，但自 2019 年 Getaround 品牌重塑以來，除了引入不一致之外，沒有明確關于如何使用它們的規范，所以設計師在選擇顏色時迷失了方向。然后他們將開始建立自己的參考資料，每個設計師都有不同的配色想法。
例如：設計師應該在所有這些灰色陰影中為次級文本選擇哪種灰色？顏色命名在這里不是很有幫助
以前品牌的一些舊顏色仍在使用（按鈕上的藍色陰影，標題……）。到現在也沒有真正的行動計劃來迭代它們。
舊驅動器品牌
在 2021 年初，我們有機會為我們的 iOS 和 Android APP來制定長期的 UI 規劃。我們問自己“5年后我們的APP會是什么樣的？”。我們會回顧， Getaround 品牌是如何成為我們視覺方法中心的。
以上是我們品牌和設計團隊在 2020 年完成的全面工作的一小部分致力于設計系統的 Cobalt 團隊借此機會重新考慮了顏色系統。然而，為了使這一目標成為現實，我們面臨著一些挑戰：
我們如何確保每個設計師都可以依賴易于理解和使用色彩系統？擁有一個簡單系統將加快使用速度。
我們如何確保從一開始就設計出易于使用的顏色？
我們如何才能使系統易于維護并符合現在和未來的行業標準（例如：暗模式）
在我們的探索階段，在 Figma 的共享環境中工作促使我們保存和記錄我們所做的設計決策。就像我們應該如何命名我們的強調色：（主要？強調？）我們還測試了APP界面在黑暗模式下的外觀，以及如何正確支持這一點。我們應該創建一個單獨的調色板還是為每個組件都創建一個深色版本？
我們開始與開發討論這個問題，以了解他們有什么解決方案來處理這些問題。語義顏色的概念很快就被開發人員提出來，因為他們知道并且很好地使用了這個概念。但對于設計師來說，又要如何準確理解呢？
語義指的是根據顏色的使用方式而不是色調來命名顏色的方法。
例如，你可以將顏色命名為“成功”或“積極”，因為它指的是含義，而不是“綠色”或“翡翠綠”。甚至可以根據顏色在屏幕上的應用方式來命名顏色，例如背景顏色、按鈕背景顏色、文本顏色、圖標顏色等……
語義顏色并不新鮮，越來越多的產品開始采用這種方式來定義顏色。我們可以從下面一些大廠的顏色規范來學習google
顯然，這種顏色系統有很多優點。因此，現在讓我解釋一下我們如何在實踐中將這個概念應用到我們的產品中。
我們的新顏色系統由兩部分組成：
基礎調
我們與品牌團隊密切合作，他們定義了一個全新的品牌，我們在工作時會圍繞這個品牌考慮。該品牌的每種顏色都采用多種色調進行調整，以創造更大的靈活性，一次構建成為基礎調色板。它代表可以在產品中顯示的所有可能顏色。團隊可能不會全部使用它們，但他們會選擇在產品中效果最好的那些。
基礎調色板
語義顏色建立在用作參考的基礎調色板之上。正如我之前解釋的，命名不再是指顏色的“外觀”（洋紅色、棕色、綠色……），而是指UI 元素它們被應用于（文本、圖標、按鈕、背景……）以及該元素的狀態（活動、非活動、成功……）。請參閱此處的命名法和一些示例：
語義顏色結構和示例這意味著來自基礎調色板的顏色可以用于多種語義顏色：
這就是我們根據這個新原則重新調整顏色命名的方式：
我們通過設計師和開發進行了內部用戶測試，以確定命名語義顏色的最佳方式。我們嘗試了很多不同的命名方法，發現過于詳細的命名系統對于我們的團隊和產品的規模來說維護和使用太復雜了。我們決定做一些簡單的維護，同時在命名方面有足夠的延展性。
語義顏色側重于顏色的用途。它消除了設計師和開發對使用什么顏色的盲目猜測，因為視覺語言直接傳達了設計決策。
例如：在這里，顏色命名使設計師更容易做出正確的選擇。在我們的原則中， *Accent* state 用于交互元素。
語義顏色可以適應不同的主題。語義顏色的名稱始終相同，但它的外觀可能會根據所選模式而改變。例如，語義顏色“主背景”可以指淺模式下的“白色”和深色模式下的“黑色 500”。根據用戶選擇的模式，將自動顯示正確的顏色。這對我們的設計系統來說是一個真正的游戲規則改變者，因為它將使它更加面向未來。
明暗模式下的語義顏色 Primary.Background
如果我們將來要更新顏色，使用語義顏色也會變得更容易。假設我們想要將我們的主色更改為藍色。我們只需要將基礎調色板中的“紫色”更新為“藍色”。與該顏色相關的所有語義顏色也將神奇地更新。另一種情況可能是更新特定 UI 元素的顏色，例如按鈕，而無需觸摸使用紫色顏色的其他元素。
在這種情況下，我們只需要更新 ButtonBackground.Primary 顏色，非常簡單。如果沒有該系統，更新顏色將需要經過大量 QA 以確保將更改應用到任何地方。
這個系統似乎很容易使用，但設計師仍然有一些問題：
為了幫助設計師選擇顏色，我們創建了一個交互式指南，列出了所有可能的顏色組合。我們在 figma 原型中創建了這個指導原則，每次更改設計系統顏色時都會更新該規范。它突出了允許的語義顏色組合，以最大限度地保持一致性。
點擊可以查看大圖Figma 中內置的語義色彩交互指南
采用這種新的顏色系統產生了一些變化：
1）我們從“Foundation”庫中提取顏色，并將它們分為深色和淺色模式。這一舉措使我們能夠使用 Figma 開關功能輕松地將設計文件從? Light 切換到 ? Dark 模式。這也使庫更輕且更易于維護。
2）語義顏色已在我們的 iOS 和 Android 應用程序上成功實現，我們現在正在努力在我們網絡平臺上使用相同的系統。我們很快就會有一個集中的配色方案來處理所有系統上的顏色。
總結下今天學到的內容：
（授權截圖）
作者：Fabien Gavinet，譯者：彩云Sky
原文鏈接：https://medium.com/getaround-eu/colors-that-make-sense-505d0f3509c1
本文由 @彩云Sky 翻譯發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基于CC0協議。
蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
編輯導語：各大APP的圖標都各有特點，圖標的設計也是一門學問。在這篇文章中，作者全面解析了各類APP圖標設計背后的用意，一起學習一下吧。
如果說一個人的臉面、衣著打扮是給陌生人的第一印象，那么APP的應用圖標風格與氣質就是留給新用戶的第一印象，關系著用戶是否對這個APP感興趣、是否會打開應用介紹、是否會點擊下載按鈕起著決定性的作用。
一個好的應用圖標有著無限可能，無形中對用戶產生強大的吸引力，并有一種想要了解的沖動，況且圖形本身就能讓人充分發揮想象力，這就是為什么不管在哪個應用市場第一眼看到的是應用圖標，而非應用名稱。
在一部手機就能解決很多問題的互聯網時代，相信每個人都有下載幾十上百個APP，琳瑯滿目的列表，應用圖標是否能在第一時間抓住用戶眼球（目標明確或鐵粉除外）非常重要，一個視覺傳達清晰且有吸引力的圖標能提升用戶點擊率，即便用戶只使用過一次，相對來說，印象也會更深刻。
本文根據筆者對大量應用圖標的分析、結合設計準則進行總結，希望能幫助大家在設計過程中規避掉一些常見的問題，歡迎一起探討、取長補短、共同進步。
應用圖標代表產品的外在形象，設計的精美與否決定著用戶的第一印象，是否產生打開的欲望跟當前圖標的視覺所傳達的內涵有最直接的關系。應用圖標雖然不同于設計LOGO，表現方式也千變萬化，但必定有自身的設計準則要去遵守，利用設計的手段將視覺傳播的價值最大化。
首先，應用圖標需要盡量簡約。過于復雜的圖標會增加用戶的理解成本、甚至誤導用戶，但如果過于追求簡約，缺乏細節、個性化以及必要的隱喻信息，也會因過于單調，造成表意不明確等問題。
簡約并非簡單，設計師需要通過專業的知識進行合理的簡化，以提升應用圖標的設計品質，方便用戶在不同場景中都能清晰的辨認。其次，需表意明確、易于理解。
應用圖標代表的是產品的行業屬性、功能作用或與眾不同的優勢，要讓用戶第一眼就能識別出所代表的含義，貼近用戶的心理預期。
簡約易識別是應用圖標必備的基礎屬性之一，這也是為什么大部分產品都將logo作為應用圖標主視覺的原因，因為logo設計考慮到了方方面面以及后續延展的問題，即便有些logo較為復雜，也會通過提取局部元素、吉祥物、主體色等方式來強化應用圖標屬性，給用戶形成獨特的記憶，以提升應用的下載量和使用率。
應用圖標應該與產品的屬性、品牌有極強的關聯性，通過品牌延展賦予產品更強的生命力，讓用戶從接觸應用圖標的第一眼開始、再到后面的使用，整個過程始終都能保持清晰且統一的品牌認知，通過和諧統一的視覺效果，帶來更好的用戶體驗。
應用圖標需要與品牌之間必須保持高度的一致，著重從以下幾點體現：
1）LOGO
毫無疑問，用品牌logo作為主體圖形是最佳選擇，結合品牌色搭配使用，能將產品核心理念、品牌形象的傳播效果達到極致，在APP應用市場中，大家會發現大多數產品都在使用logo作為應用圖標的主視覺圖形。
2）品牌色
品牌色即主體色，將貫穿APP所有頁面的元素組件。眾所周知，每種顏色都有其特定的含義，能傳遞給用戶不同的心理感受。用主體色作為應用圖標的背景色，可以烘托出產品的情感氛圍，并與進入應用后的主體色遙相呼應，以最小的視覺跳躍性將前后關聯，強化用戶對產品的記憶感知。
3）IP/吉祥物
吉祥物屬于品牌logo延展的一部分， 也是產品的靈魂。當logo較為復雜時，因移動設備應用圖標位置空間有限，logo細節無法在短時間被用戶捕捉，不宜展示時，使用IP/吉祥物或其局部元素代替也是不錯的選擇。
4）產品名稱
如果說logo是產品的臉面，通過暗示和隱喻給用戶無限遐想并讓用戶記住它的樣子，那么名稱的出現就相當于產品主動進行了自我介紹，并讓用戶知道如何稱呼它。
將產品名稱作為應用圖標需謹慎使用：首先，文字傳達的信息量有限：其次，用戶對于圖形的理解效率要優于文字；再者，應用圖標都會有對應的產品名稱展示（應用市場在右、桌面在下方），多少有些信息重復。
所以大家見到的應用圖標主體是產品名稱的不外乎兩種情況，一種是產品本身將名稱設計成字體logo，例如美團、懶飯；另一種是將產品名稱作為logo的輔助信息提示，例如繽紛生活。
以上是應用圖標與品牌屬性關聯最常見的四種方式，在設計中可靈活搭配，使用兩種及以上的方式組合，能將品牌傳播的途徑發揮到最大值。
筆者上小學時，曾經在一次彩鉛繪畫作業中得到了老師的真心夸贊，但內心卻備受打擊。老師對著我畫的桃子說“這西紅柿畫的太像了”。
舉這個例子似乎并不恰當，但結果是驚人的相似，筆者想要陳述的一個觀點是，不要讓你辛苦做出的設計成為別人的嫁衣，讓用戶誤以為這是其他企業的“某某某…”產品。
目前，應用市場中的APP數量巨大，且還處于增長的趨勢，同行業的圖標設計同質化相當嚴重。想要讓自身產品應用圖標脫穎而出，就有必要在設計之前做好競品分析，借鑒競品的優點，在突出自身產品核心特征、屬性的基礎上，還要用不同的表現手法突出其差異性，給用戶留下獨特的印象，避免同質化。
應用圖標在設計完成之后（測試小組）、上線后（用戶反饋）進行可用性測試，主要針對圖標對用戶的吸引力、識別度等問題作進一步優化，以確保圖標在不同場景中都能被用戶清晰識別并提升印象。
雖然可用性測試存在設計之后，但這一環節至關重要，它決定著產品的下載量以及使用率。
單色圖標通常以品牌色作為背景色、logo以反白的形式呈現，既能突出品牌色、還能用于烘托主體圖形，不過這種方式僅適合色值單一的logo，多色值可能會與背景色產生融合或色彩反差太大影響視覺傳達效果。另外，如果logo視覺重量較大，也可使用白色背景+原品牌色logo，這樣會更直觀。
單色應用圖標雖然色彩比較單一、表現形式也受到局限，但視覺清晰、簡潔且識別性強，如果能運用其他設計手法豐富圖標細節就再好不過了。
多色圖標使用了兩種及以上的顏色，更多是直接使原多色彩的logo圖形+白色背景，無需任何加工，控制好尺寸規范就行。如果是運營推廣所需，如春節、618、雙11等活動，會對應用圖標加以其他色彩烘托、點綴元素或標簽等，色彩就會更多，但一般都具有時效性，活動過期即圖標復原。
多色圖標的細節、層次更加豐富，設計時確保各色彩搭配協調，一旦因色彩過多造成視覺混亂，就得不償失了。
無論是單色還是多色，添加漸變會讓應用圖標更加細膩、耐看。漸變的表現手法應用廣泛，簡單的漸變能讓圖標細節豐富，同時也具備空間感和微立體感。
設計漸變色圖標需注意圖形銜接處的對比度，花里胡哨的漸變色會拉低品質感，要確保色彩的和諧，讓圖標視覺清晰且容易識別。
單色、多色或是漸變都可通過調整不透明度、圖層疊加的方式來豐富應用圖標細節，相比純粹的漸變，立體感和空間感更強。使用顏色疊加需注意色彩對比及明暗關系，否則會衍生出臟亂的顏色。
環形構圖為主，由多個元素復制并以統一的中心點、旋轉角度，旋轉衍生出一個主體圖形。這種應用圖標的設計構圖飽滿、色彩豐富，能給用戶傳遞出輕松愉快的視覺體驗。
需要注意的是，由于顏色較多，至少在三種顏色及以上，否則無法構成色環類的主體圖形（錯覺）。如果沒有超強的配色功底，最好按照色環的順序依次取色，即便沒有太大的優勢，但至少不會出錯。
一個好的應用圖標應該是多元素、多信息結合運用，才能達到更好的效果。雖然大部分主體圖形使用了logo，但并不影響設計師們對其進行拆解，提取局部元素、色彩、名稱等信息進行二次創作，從原則上來說，是一次線上logo的設計。
應用圖標種類繁多，切不可盲目跟風，需經過認真的分析、研究，找到最適合自身產品的才是最重要的，且每種類型并非獨立，在條件允許的情況下還能跨類型靈活搭配、相互組合。
1）單中文字體
僅次于圖形logo的表現方式，通常會在產品名稱中提取一個具有代表性的文字對筆畫、結構等進行再設計?；趪宋幕膬瀯菀约皩h字的敏感度，既能降低用戶對應用圖標的認知成本、還能根據產品特性設計出差異化的視覺效果。
不過因為文字筆畫的原因，單個文字提取難度較大，避免信息傳遞有誤或影響識別度，建議選擇筆畫較少且具有特性/代表性的文字，若達不到條件，最好選擇其他表現方式。
2）多中文字體
使用兩個及以上漢字，大多直接將產品名稱用在圖當中，對用戶來說更容易記憶，有利于品牌推廣。相比單字體，設計感會受到一定的局限，不宜做過于夸張的表現方式，因文字較多，設計時一定要注意文字的協調與可讀性。
多文字圖標建議將字數控制在2~6個范圍內，3字以內一行顯示，超過3字即兩行顯示且最多不超過兩行，否則會影響圖標的識別效果。
3）中文、圖形組合
適當添加帶有產品特性的輔助圖形，用引導或指向性的方式對文字進行強調，圖標細節會更豐富，可以突出產品想要傳達的信息、以及不同的氣質，還能增加圖標的形式感和趣味性。注意添加的圖形不要過于復雜，不然會讓信息混亂，適得其反。
4）中文圖形化
根據單個字體筆畫的特點進行巧妙的變形或延展，會讓你的應用圖標更具設計感、品質好。這種方式對設計功底的要求較高，需要確保字體的識別度，切勿霸王硬上弓，如果是為了設計而設計，就違背的信息傳播的初衷。
5）中文、IP形象組合
由產品名稱和IP形象組合而成，這種方式能通過品牌IP不同的視覺形象帶給用戶情感化的體驗，讓產品更具親和力，拉近與用戶之間的關系。例如，IP的喜、怒、哀、樂表情變化分別對應用戶不同的心理感受，以加深用戶對產品的印象及品牌認知。
1）單英文字體
單英文字體通常是提取產品名稱拼音首字母或英文首字母進行創意設計，跟中文字體相比，基于字母本身線條的簡潔及流暢性，再結合產品特點，很容易設計出兼具美感、高識別度的應用圖標。
需要明確一點，不管如何創意，也僅局限于在26個英文字母中選擇，如果想設計出差異化的應用圖標，對設計師來說，是一個很大的挑戰。
2）多英文字體
跟多中文不同，中文產品名稱在移動端基本不會超出6個字，而全拼音或英文名則多達十幾位甚至更多，為了用戶能更好容易識別、記憶，依然是提取不同拼音或單詞的首字母（中文全稱）進行設計。
多英文的應用圖標很很容易形成獨有的產品簡稱，更利于用戶記憶，但字母一定不要過多，如果無法刪減，那就只突出特定的2~4個字母。
3）其他類型
字母與圖形、IP形象組合以及字母圖形化，其表現方式、設計原則與中文字體圖標類似，這里不做過多闡述。
1）數字設計
人們對于數字來說是非常敏感的，不存在文化差異或認知誤區，基于數字便于記憶且容易識別的特點，將數字圖形化后應用到圖標當中，會讓產品具有親和力，有利于品牌傳播。單純的數字過于簡單，需增加一些細節，豐富圖標層次，讓其具備獨特的記憶點，不然會顯得單調。
2）符號設計
每個符號都有特定的含義，因此，在選擇符號作為應用圖標之前，首先需要了解清楚該符號是否能體現出產品屬性以及想要表達的意思，例如“¥”適合攢錢、理財相關的應用，而“+-×÷”則適合用于計算器或數學相關的應用；其次，符號跟數字一樣，都比較簡單，需經過二次創作后才會使用。
1）線性圖形
線性風格的應用圖標能給人一種簡潔輕快的感覺，設計師通過提取產品的品牌信息、功能服務等進行創意設計，將得到的關鍵詞以一條或多條線段組成高度抽象的圖形來達到信息傳播的目的。
通常以反白的形式出現，背景可以是單色、漸變色或加以輔助圖形點綴。
線性圖形非常適合文藝類簡約風格的應用，通過不同的線條帶給用戶不同的心理感受，例如直線代表大方、專業、正直；斜線代表張力、速度；曲線代表流暢、飄逸及柔軟等。
設計時，切記圖形不能過于復雜，否則會影響其辨識度，增加用戶的認知成本，也不利于品牌推廣。
2）面性圖形
也可稱之為剪影圖形，根據產品屬性，將日常生活中被大眾所熟知的動物、植物、食品、工具、玩具…等事物進行簡化，通過刻畫事物的造型輪廓來形成獨立的剪影圖形。
高識別度的剪影圖形會讓整體看起來非常醒目，提高信息傳播的效率，只要控制好造型，即便把圖標縮到很小也能清晰辨認。
因現實世界中事務的復雜性，被提煉出的圖形如果細節過多會顯的復雜且不夠干練、細節過少則難以辨認，所以需要對圖形進行創意加工，最終以確保應用圖標的功能和美感兼具。
3）幾何圖形
幾何圖形在應用圖標中使用的很廣泛，可以是線性或面性，表現形式也非常豐富，利用幾何圖形通過單獨、組合、布爾運算等方式形成簡單且個性化的創意圖形，帶給用戶簡約、現代、空間、熱鬧等不同的心理感受。
幾何圖形構圖簡潔，設計形式豐富多樣，想設計出具備設計感和差異化的應用圖標，很考驗設計師的創意能力。
對純色剪影圖形增加太多細節，無疑是將其“大卸八塊”，變成一堆零件，但通過多色、漸變、圖層樣式等表現手法設計成卡通形象，就完全不一樣了。
卡通形象能體現出產品的生命力、親和力，以及直觀且易于理解和記憶的特質，對品牌形象的塑造、傳播起到了很好作用。
在畫卡通形象時，需要注意產品主用戶群體的年齡段，切勿一開始就把活潑可愛作為卡通形象的代名詞，避免絕對低齡化的表達，同時需要設計師有一定的繪畫功底。
利用人體的局部元素，如眼睛、嘴巴、手足、頭部等，再結合常見的表情動作進行圖形化設計，相當于給原本冷冰冰的圖形賦予了生命力，傳達出不一樣的情感，而且用戶原本就對人體元素敏感度更高，更容易打動用戶并形成較強的記憶。
擬人化的應用圖標會顯得親民，便于拉近與用戶之間的關系，適度在抽象的圖形上加入情感化（動作/表情）表達，能生動、形象的體現出產品獨有的特性。
如果想要較強的視覺沖擊力，建議元素不要過多，最好是對某個單一的元素作放大或特寫處理，讓用戶看到更多的細節，也可用夸張、比喻、襯托等表現手法強化特點。
擬物化圖標使用的比較少，它更偏向于某種行業類型，例如工具、游戲類型的應用，通過超接近于現實世界中的物體造型，基本不需要用戶思考，一眼就能理解，但也正因為這種特性，信息量的傳播受到很大局限，僅適合單一且大眾化的信息傳達。
在如今，想同時融入行業、屬性、品牌等多元化內容的信息化時代，顯然不太實用了。
應用圖標背景通常以單色、漸變色居多，除此之外，還可以添加與主體圖形相呼應的輔助圖形背景，以豐富圖標的視覺層次。圖形背景一定是為襯托或突出主體圖形的輔助存在，切勿過分表達，以免喧賓奪主。
當主體圖形的結構、色彩不是很復雜，且產品面對的是年輕化用戶群體時，可通過色彩拼接、晶格化或多種鮮明的色彩漸變等方式設計出炫彩效果，色彩表現豐富的應用圖標，能帶給用戶更強的視覺沖擊力。色彩可多但不可亂，需要把控好色彩之間的對比關系。
常見于在特定的節日中，例如618、雙11、雙12及傳統節日等，產品會存在促銷、打折活動，為了更早的讓用戶知道，會在應用圖標的某個區域以標簽的方式出現，起到引導用戶的作用。
不過這種表現方式具有時效性，活動截止即圖標樣式復原。
通過配色或節日相關的元素點綴，營造出一種感同身受的節日氛圍。例如：春節期間，部分應用圖標背景會調整為紅色，并使用燈籠、煙花、文案等元素點綴，制造出普天同慶、與用戶同樂的喜慶感，或者在高考期間鼓勵學生，少了套路、多了真誠，給用戶留下較深的印象。
通過元素的大小、長短、虛實、稀疏、方向以及不同的色彩、明暗關系等方式進行對比，形成強烈的反差效果，同時兼具張力和美感，這也是應用圖標設計中很常見的技法表現之一。
對稱在自然界中隨處可見，在互聯網設計中也是如此，應用圖標中的主體圖形以對稱的方式呈現，能給用戶平衡、和諧的感覺，也讓圖標更具有觀賞性。
將應用圖標中的主體圖形分割，賦予不同的顏色、樣式等，明確層級劃分，可提升圖標的美感。例如：將色塊分割成不同的比例、形狀，就能組合成一個完整的熊貓圖形（百度搜“熊貓剪影”圖片）。
如果適合使用0.168黃金比例分割就再好不過了，這是被公認為最具美感的比例。
將相同或相近的圖形以某種規律連續性的排列，相比單調的圖形，會更加飽滿。重復性的表現手法以大小、色彩、位置、形狀等作為出發點進行有序的排列，最終形成一種規律、整齊的節奏和藝術感。
需要注意的是基礎圖形不能過于復雜，一定是有規律的重復，否則會讓圖形變的混亂，無法形成整體。
在保證識別度清晰的前提下，將兩個或以上的元素相互重疊、交叉在一起，能形成前后左右的層級關系，制造空間感，同時也能將多個圖形關聯在一起，避免圖標元素零散或單調，讓整體性更強，豐富用戶視覺感知。
正負形也是常見的表現手法之一，利用正圖為底，通過減去底層挖空的方式突出（錯覺）負形，將產品特征、屬性及服務多途徑的傳達給用戶，可謂是“一石二鳥”。
正負形圖標能將信息傳播最大化，且設計感十足，好的正負形圖標能給用戶形成獨特的記憶點，但設計時需要注意正、負銜接的順暢度，否則無法清晰的傳播信息。
通過產品屬性、功能或特點進行思維發散，例如：夏天，我們會想到空調、海灘、冰淇淋、比基尼、裙子（女性）、夜空等一系列相關聯的事和物，搜集起來并做好整理歸類，確定大致的設計方向。
確定了大致的設計方向，就去找同行業、同類型或相似的應用圖標分析其形狀、配色、組合類型等，取長補短，這也是避免同質化非常重要的一個環節，幫助自己在后續設計出具備差異化的應用圖標做鋪墊。
可以從產品名稱或功能屬性方面找出產品最想傳達的核心信息，并提煉出關鍵詞。切記，關鍵詞不可脫離帶水、表意不明確，一定要夠精煉、能表達出核心內容。關鍵詞在精不在多，如果太多，需要通過層層遞進，篩選出“一主三輔”，要知道這關系著后續應用圖標傳達信息的精準度。
將上一步得到的關鍵詞轉化成抽象圖形，進行視覺化提煉，這時應用圖標的雛形已經形成，再結合前面所提到的圖形分類、表現手法以及注意事項等，進入圖標繪制流程。關于圖標設計規范及原則，在之前的《圖標篇 | 圖標設計必備的基礎知識！》文章中有詳細說明，這里不做闡述。
基本圖形繪制完成后，通過添加點綴、輔助圖形、背景處理等方式豐富圖標細節，進行精細化處理，使其更精致，具備高識別度及品質感。
分別通過移動端應用商店列表、應用詳情、設置中應用列表、桌面以及WEB商店等，對不同位置的大小、不同的桌面背景進行虛擬測試，以確保在不同場景中都能被用戶高度識別，如果這些問題等著被用戶發現，很可能給產品帶來不利的影響。
需要對iOS和Android系統各輸出一套圖標，iOS只需一個1024px的切圖便能適配所有，且無需設定圓角。Android則需要多套切圖規范，如512px、198px、144px、96px、72px、48px，圓角半徑以512px為基準設定為90px（參考值）。
這些固定的尺寸規范并不在技術能力范疇，如果實在不清楚，需要用時就“百度一下”一大把，或直接找開發人員拿尺寸都不是難事。
首先，筆者要感謝耐心看到這里的小伙伴，希望總結的內容能幫到大家，在前期設計中作為資料參考，避免出現常見的問題，防止進入誤區。
其次，要想設計出優秀的應用圖標僅看上述內容是遠遠不夠的，少不了平時的多看、多練、多思考，需日積月累，逐漸提升自己的視覺審美、造型提煉、執行效率等多方面設計能力。
應用圖標的總結分享就到這里了，對你有幫助的話就給筆者點個贊吧，如果有不同意見，歡迎在評論區交流或指正，以便查漏補缺，共同進步。
大漠飛鷹；公眾號：能量眼球，人人都是產品經理專欄作家。致力于產品需求的驅動、產品體驗的挖掘，利用設計的手段為受眾用戶帶來更好的體驗，即好看、好用。
本文原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基于 CC0 協議
蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
編劇導語：折疊菜單是在頁面中垂直堆疊的菜單列表，通過展開/折疊來顯示或隱藏更多菜單內容。APP中的折疊菜單該如何設計呢？本文作者分享了折疊菜單的設計解析及設計應用，一起來看看吧！
大家好，這里是設計夾，今天為大家分享的是「折疊菜單」。
折疊菜單(Accordion)，又稱手風琴菜單，是在頁面中垂直堆疊的菜單列表，通過展開/折疊來顯示或隱藏更多菜單內容。
接下里通過講解折疊菜單的構成、樣式和設計解析來更進一步了解折疊菜單的運用～
折疊菜單的狀態包括收起、展開、懸停、選中、禁用狀態等。
在折疊菜單中，通常用“V形”圖標表示菜單展開/收起的狀態。“V形”圖標可以在左側，也可以放在右側，用來表示狀態。
除了使用最常見的“V形”圖標，還可以用以下圖標來代替：上/下填充圖標；加號/減號；向上/向下箭頭。
當我們把展開圖標放在右側的情況下，我們可以面板左側設計一些圖標，來增強菜單的含義，并讓頁面看起來更精致。
在某些場景下，還可以通過使用不同的顏色，更加直觀地分隔每個菜單。
在頁面設計中，大多數情況下都是使用封閉式折疊面板。
通過一條淺色的的分隔線將不同的菜單分隔開，這種樣式的優點是可以節省一些豎向的屏幕空間，尤其是在移動端屏幕尺寸較小的情況下。
分離式折疊面板常用在桌面端中，每個菜單的展示更清晰，設計樣式更簡潔。
突出顯示菜單展開的狀態，這樣在多個折疊菜單打開的情況下，用戶也能清晰找到需要的信息。
常用的突出顯示的方式有：增加陰影、背景填充、輪廓描邊等。
例如在頁面背景是白色的情況下，我們可以使用透明度很低的灰色作為下拉菜單的背景，更清晰地展示展開的菜單。另外，還可以為下來菜單填充和品牌色一致的顏色描邊，起到強調品牌的效果。
通過在主菜單的下面添加已選擇的內容，這樣在不需要展開面板的情況下，用戶就能知道選擇了哪些內容，進一步提高操作效率。
當已選內容太多時，我們不可能將這些內容全部在主菜單羅列出來，在這樣的情況下，可以使用數字徽標的形式來展示已選擇的菜單數。這樣的設計有點像購物車中不斷變化的數字徽標，告訴用戶加購的數量。
通過在折疊面板中添加提示文案，起到輔助作用，展示更多和菜單相關的信息。這種設計形式更適合用在移動端中，在有限的屏幕尺寸上盡可能多的展示內容。
等寬使用：在移動端中使用等寬的折疊菜單，方方便用戶點擊操作。
側邊欄：將折疊菜單放在側邊的導航抽屜中，點擊左上角的圖標來展開菜單項。
菜單篩選：將側邊欄與折疊面板配合使用，實現菜單篩選的功能。
側邊導航：和移動端類似，桌面端最常用的方法是把折疊菜單放到頁面左側，作為網頁的側邊導航使用。
過濾器：根據桌面端的頁面布局結構，折疊菜單可以放在頁面左側或右側，實現精確查找、內容過濾等功能。
以上就是折疊菜單的設計解析及設計應用，希望通過這些知識能幫你進一步了解折疊菜單的用法。
「組件系列」的其他文章，近期也會不斷更新，歡迎大家關注~
作者：Clippp，微信公眾號：Clip設計夾。每周精選設計文章，專注分享關于產品、交互、UI視覺上的設計思考。
本文原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自 Pixabay，基于CC0協議。
蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
編輯導語：B端產品的展現形式包含了很多類型，標簽頁、彈窗、懸浮層等等。本篇文章中作者分享了如何正確的呈現B端產品，讓產品的交互體驗更加絲滑。感興趣的小伙伴們快來一起看看吧，希望對你有所幫助。
在B端產品操作中，需要高頻率地打開各類鏈接和按鈕，如果點擊后需要展示新的內容，那么展現形式就包含了很多種類型，標簽頁、新頁面、懸浮層、彈窗、抽屜等等。
在面對數量龐大的B端頁面、組件、交互場景下，應該選擇哪種展示形式就變成了一個棘手的問題。
本篇分享就將集中在解決如何選擇正確的呈現形式上，讓產品的交互體驗更順滑。
網頁是一種可視化的UI界面，也是一種內容載體，它是瀏覽器訪問網站后顯示的主要對象，也是瀏覽器展示內容中層級最高的單位。
在同一個網站中，如果我們想要訪問其它網頁，就需要點擊按鈕或鏈接觸發，這時候，打開新網頁的方式就有兩種，在新窗口/標簽中打開（_blank）或者在本窗口/標簽中打開（_self）。
不管是哪種，本質上都需要瀏覽器重新加載新的頁面。對于一般的企業官網、新聞網站來說，這種加載的模式沒有太大的問題，因為操作頻次相對適中，用戶中間會有比較長的時間停頓下來查看頁面的內容信息。
而B端項目則不同，雖然也有不少查看頁面信息的需求，但是包含了更多需要短平快完成操作目標的使用場景，比如修改個標題，更改商品價格，添加分類字段等。
如果所有高頻操作的場景，都要重新加載頁面，使用起來的 “頓挫感” 是非常強的，降低使用體驗。
早期的網站加載內容必須刷新頁面，所以頓挫感是難以解決的，只能想辦法減少跳轉流程來提升用戶體驗。
隨著網頁技術的發展，異步處理（AJAX數據交換方式）技術的應用，讓網頁的內容可以通過不刷新或加載新網頁的形式加載和顯示。
簡單解釋，就是早期的網頁加載完成以后就是 “靜止” 的，里面所有內容是固定的（不是HTML的靜態）。而異步處理，就是讓頁面中的指定模塊處于 “運動” 的狀態，客戶端可以在不重載網頁的情況下只加載和更新這個模塊的內容。
比如下面的案例，設置不同的條件選項，在過去的網頁中只能重載頁面更新，而使用異步處理就可以直接和服務器請求數據刷新這個圖表模塊，而不用重載整個頁面。
所以，在B端項目中，我們不再是只有重載網頁一個選項，而有了其它的選擇，如下圖所示。
其中，網頁展示作為一個基礎展示對象，我就不多做介紹了。我會通過分別介紹其它幾個內容的載體，幫助大家區分它們和重載頁面有何不同，以及如何正確選擇內容加載形式。
首先介紹浮層，它是我對通過懸浮在頁面基礎內容之上的內容層的統稱。例如各類氣泡、提示框、下拉菜單，都是浮層的表現形式。
浮層是比較底層的形式，其展示內的容完全不需要使用一個新的頁面，且和觸發的元素有較強的視覺聯系（對比彈窗）。
浮層并不是由內容的多和少決定的，復雜的浮層可以包含非常多的交互選項和內容信息，導致我們很容易和下方解釋的彈窗搞混。
比如客戶端軟件常見的隱藏式側邊欄，搜索欄中展開的復雜面板，都是浮層的一種而不是彈窗。
浮層最大的特點，源自它的位置定義邏輯，它會和觸發它的元素具有非常緊密的位置關系，而不是像彈窗一樣無差別顯示在界面或瀏覽器視圖的固定區域。
如果我們想要顯示內容，完全沒到用一個新頁面展示的地步（如搜索建議面板），且和觸發它的控件有較強的聯系，就可以考慮使用浮層來展示。
彈窗，也是一種懸浮在基礎內容之上的內容層，它和浮層的不同之處，就在于彈窗通常是居中固定的顯示區域，和觸發它的元素沒有什么位置聯系。并且，彈窗可以包含的內容量級也是高于浮層的?；A的彈窗包含強提示彈窗，或類似注冊登錄這種表單彈窗。
而高級的彈窗，則類似下方案例，約等于打開一個獨立的網頁。
之所以使用這些高級彈窗作為頁面載體，原因就是對原觸發頁面的使用和關注并沒有結束，需要支持快速關閉當前的窗口并返回原來的頁面中去。
比如在一個非常長的列表中，你下滑了幾十頁的高度，肯定不想放棄掉當前的頁面位置，所以Behance或者花瓣等應用，都采用窗口模式加載新頁面。
或者類似一個列表頁面中需要大量創建新的數據，這些數據又不復雜。于是就通過彈窗表單的形式，快速完成創建并在原頁面中再次點擊 “新增” 按鈕。
高級的彈窗使用除了保持原頁面位置、高頻操作等防止加載的原因之外，還有個更重要的特征，就是強制吸引用戶的注意力到窗口上。
因為彈窗主要以模態 （Modal，后方有黑色遮罩）居中顯示，通過深色蒙版進行前后隔斷，凸顯彈窗區域，意味著我們強制讓用戶關注眼前的信息和任務。
如果我們想要顯示的內容，需要保留原頁面狀態，減少頁面跳轉數量，又需求用戶強行關注，就可以使用這種模式展示。
最后，就是最難選擇，也最容易和其它組件搞混的抽屜了。
抽屜本身的特征包含懸浮屬性，覆蓋在原頁面之上。而我們常見的側邊欄、側邊菜單并不能和抽屜畫上等號，因為他們會占用畫布的實際顯示區域，和原有內容同層。
比如下方案例中，Jira左側導航（不分左右）可以隱藏收入，頁面內容變大，這是側邊欄。而點擊列表選項，右側彈窗的窗口覆蓋原有頁面，才是抽屜。
和高級的彈窗類似，抽屜也可以當成一個獨立的頁面展示信息。但它和彈窗不同的是，抽屜通常是從頁面的右側展開，沒有遮擋左側的空間。它的主要特征是還需要在原頁面進行交互。
比如Teambition案例中的列表，我們每開一個抽屜都還可以直接點擊原列表的其它選項切換下一個抽屜，省掉關閉步驟或者原頁面被遮擋的情況。
它比較適合應用在表格/列表環境中，作為表格/列表內容的詳情頁形式展開，這樣用戶可以在一個頁面中快速查看不同列表的具體信息或編輯。并且，表格/列表本身的特征會將標題放在最左側，也方便抽屜的切換。
也因為這種特性，抽屜不太需要使用模態和遮罩將左側內容遮擋掉。如果需要通過遮擋來吸引用戶注意力，那么這種情況往往更適合使用彈窗。
所以，如果不想通過新頁面打開的列表詳情內容，且不是強制要求用戶聚焦的任務，就可以使用抽屜的形式展現。
以上就是幾種基本的內容展現形式說明，時間關系還有后半部分關于如何站在系統框架級的角度使用內容載體的分享，我會留在下次分享。
如果有關于這部分的實際項目疑問，也可以在下方留言。
我們下篇再見～
作者：酸梅干超人；公眾號：超人的電話亭
本文由 @超人的電話亭 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Unsplash，基于CC0協議。
專欄作家
韓敘，微信公眾號：運營狗工作日記，人人都是產品經理專欄作家。原貓眼電影產品運營專家，創業時經歷了0到1的艱辛，在百度時規劃了海量用戶的玩法。從業10年，專注互聯網運營領域，包括產品運營、用戶運營、社區運營和UGC運營。
本文原創發布于人人都是產品經理，未經許可，不得轉載。
題圖來自Unsplash，基于CC0協議。
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
編輯導語：產品設計上的許多細節都有可能影響到用戶的產品使用體驗，進而影響到產品的打開率以及留存率等。這就要求產品設計師在交互體驗層上結合一定小技巧，以提升用戶體驗。本篇文章里，作者結合案例，總結了一些UI技巧，一起來看看吧。
對于很多設計師來講在設計界面過程中往往會忽略掉很多的細節，比如卡片的排版、文字的排版、各種狀態的反饋等等，特別是剛入行的設計師在做頁面時往往是直接拿到競品的頁面搬運到自己產品上，這種做法理論上不會讓自己的頁面出錯。
但是很多人往往忽略了一點，就是別人這么設計的目標是什么，是否會匹配自己的設計目標，如果不了解這些貿然地去搬運設計，那么時間久了會養成一個不好的習慣，需要設計師去進行設計時可能就會遇到很多難點，作為初級設計師或者剛入行的設計師，前期可以去進行搬運設計，但是一定要了解別人為什么這么做。
接下來將分享12個設計上的小技巧，大部分在日常設計中都會遇到，了解到這些設計細節，可以讓我們的界面更加高效、易用、美觀提升用戶體驗。
我在做界面時可以時常利用交互手勢去幫助用戶提升操作效率，避免繁雜小操作步驟。
左圖中針對單條消息的操作匯聚到了icon內，對于用戶理解成本比較高，當用戶想要去刪除或者屏蔽消息時需要通過聚合入口才能完成操作，大大的提升了用戶操作成本。
我們可以在類似的消息場景或者其他列表形式的場景中，添加一些交互手勢，隨著手機系統的更新，用戶的操作習慣已經被各大產品培養的非常成熟，并不用擔心用戶無法操作的情況，增加手勢有弊端也有優勢，右圖中手勢增加了用戶首次使用的學習成本，但是降低了高頻功能的操作成本，這個理論上是可以接受的。
利用拇指定律把關鍵的操作入口元素等，放置右側提升用戶操作效率。
左圖中把按鈕放置了模塊左下側，這樣是不利于用戶進行操作，當然如果整個模塊的熱區都是同一個，這樣并沒有什么問題，用戶點擊卡片區域任何位置都能夠完成下一步操作，如果出現一個模塊內存在多個熱區入口，而用戶想要到達目標必須通過按鈕點擊才能進入，那么左圖中的排版位置就會提升用戶的操作時間。
當一個頁面內出現多個相同模塊或者一個模塊出現多個熱區入口時，按鈕點擊區域有限，我們設計時就可以利用拇指定律進行排版，如右圖中布局，將按鈕放置右側可以便于用戶在右手操作時快速到達目標，因為國內使用右手的人數遠遠大于左手用戶，所以我們需要滿足大部分的體驗，合理利用拇指定律。
相關定律：費茲定律、拇指定律。
對于我們來講很多東西是簡單的，但是不乏會有一些用戶是陌生的，對于他們來講可能會有填寫成本。
左圖中理論上并不是錯，我們經常設計表單時都會用的提示話術，但是我們需要考慮更多維度的東西，對于我們來講填寫這種表單非常簡單，例如個別用戶，可能會臨時忘了郵箱格式，又或者輸入手機號時多填了一位數等等情況，用戶錯誤一次操作步驟就會多一步，反之就是降低使用產品時的體驗。
如右圖中，我們設計時可以更改提示的話術，幫助用戶把問題前置，當用戶看到提示郵箱時就會按照格式去填寫，通過把手機號的位數拆分，讓用戶更好的記憶數字，這樣無論對產品還是用戶都沒有任何損失，反而能降低錯誤頻率。
無論是頁面還是模塊，用戶在閱讀時是已掃讀的方式進行瀏覽，我們需要保證頁面的文字元素具備一定的規律，以此來提升閱讀效率。
左圖中可以看到，文字與輸入框放在同一列進行展示，這樣一方面不利于后續的文字擴展，通常這種表單填寫的頁面，在頁面中都是具有很大的空間位置，這樣排布會造成視覺上的不規律和擁擠，降低了篩選效率，當然如果是模塊區域很小的情況下，可以適當的進行使用。
右圖中我們把文字與輸入區域上下排布，雖然文字長短不一，但依據對齊原則在豎列情況看是具備對齊規律的，有效地提升信息篩選效率。
我們在做系統功能模塊時需要注意添加功能點擊引導，用戶對此類消息模塊認知上會默認不可點擊，因此需要我們加以引導。
我們常見的消息模塊內容為兩種，一種是互動類消息即用戶與用戶，另一種時是系統消息即產品推送的內容。
前者基于用戶習慣而言用戶已經沒有使用成本默認是可以進行點擊交互，后者因為部分產品會把系統消息作為展示的形式給用戶，但是有些產品的系統消息卻是可以點擊交互，這就導致了用戶認知上出現了混亂，左圖中像系統通知功能通知其實從視覺上看，并不具備點擊欲望，因此可能會對用戶造成錯誤的理解。
當我們在設計時需要注意，若消息列表中存在系統類消息并且可以進行交互，在設計時可以添加向箭頭、紅點提示等方式告知用戶可以點擊，如果該功能有數據指標，這種方式也同樣能賦能產品指標。
目前市場上產品幾乎都有深色版本，我們在設計時深色版本的顏色時需要注意飽和度的高低，同樣的飽和度在黑色背景上會比白色背景上更加亮，這跟人的視覺感官有很大的關系，因此我們在做黑色版本時需要注意是否調整飽和度。
在黑色背景中使用過高的飽和度會刺激眼睛，很多深色版本都是從白色模式通過反向顏色直接調整，而彩色元素會直接運用到深色中，那么就會造成一個問題，因為我們習慣在白色模式下看顏色，忽然切換到黑色中看彩色刺激程度非常高“就像黑夜中忽然打開手電筒”，對眼睛的傷害很高。
我們在設計深色版本時可以根據產品主色降低飽和度，包括圖標等元素，以此來緩沖對用戶視覺感官的刺激，目前很多大廠的處理方式是直接在彩色元素上添加一層黑色透明遮罩進行處理，這樣無需在添加更多的顏色規范。
在設計模塊或者頁面時不建議使用特殊字體來突出文字層級，這樣會導致視覺不統一，以及開發成本增加。
左圖中灰色字使用了特殊字體，看起來雖然好看，但在實際開發中會導致開發成本增加，我們產品一般使用的是系統字體，若使用特殊字體需要讓開發同學添加對應字體包，這樣會導致我們的產品包的內存過大，除非產品中默認一直使用該特殊字體，這樣才有使用的價值。
一般系統字體就能夠滿足我們的設計需求，在UI設計中我們可以通過不同的字體粗細來調整文字層級，這樣能夠保證視覺更加統一，減少產品包大小。
在設計時需要注意多個入口在同一位置時，需要把它們進行層級劃分，避免影響用戶決策。
圖中可以看到，兩個面性按鈕非常明顯的在模塊中，當用戶在瀏覽頁面中很容易出現困惑，到底需要點擊哪個才能購買預定，因為兩個都是面性無法快速進行定位入口，這樣不僅影響用戶決策效率，還會影響產品點擊率。
建議設計類似模塊中時，無論是pc還是移動端都需要對入口進行結構劃分，這樣能夠使用戶在瀏覽頁面時快速定位到入口，提升決策效率，做體驗是解決用戶的思考時間。
在UI設計中使用圖標時，要保持一致性，確保他們共有相同的視覺風格，相同的重量，填充和描邊。不要混搭。
可以看到左圖中的圖標并不統一，線性里面摻雜著面性點綴，這在UI設計中嚴重違背了一致性的原則，會導致我們的頁面不夠嚴謹專業。
在設計圖標時，首先要保證圖標風格一致，其次在這個基礎上保證圖標的描邊粗細、視覺占比重量、顏色等，不要出現混搭風格。
在設計頁面模塊時，可以多利對比度的方式來體現設計的表現力，鮮明直接的色值能夠直接表達事物的性質以及特點，通過對比，也能夠更加清晰的強調設計中的重點，這樣給用戶的印象會更深刻，同樣會給產品帶來一定的趣味性。
左圖中單看視覺也沒問題，只是在表現上圖標與背景融入到一塊了，導致視覺表現力較差，在設計中如果符合產品風格的前提下，我們可以避免這種方式，這種方式雖然具有視覺效果但不夠強，對用戶的記憶點不夠深刻。
設計到類似的模塊時我們可以利用對比的關系，以此突出視覺元素，通過顏色焦點引導用戶關注，強化用戶印象同時還能增加頁面的視覺表現力和氛圍感。
在設計圖文疊加的卡片或者頁面時，我們需要注意不同明度的圖片上，文字識別是否有阻礙，一般情況會通過遮罩方式避免這個情況。
左圖中在深色圖片下字體的可讀性是沒有問題的，但當出現文字底部區域的圖片相對復雜時便會影響識別，第二種情況當圖片明度過高時文字同樣無法識別，試想一下，一張白色調性的圖片上放文字，那基本無法看清，嚴重影響閱讀體驗。
在界面設計時如果遇到類似的卡片，建議在文字區域添加漸變遮罩的方式，以此保證文字的識別度，或者添加純黑色透明遮罩進行處理，這樣可以兼容不同環境的圖片與文字的重疊，保證基本的閱讀體驗。
UI設計中經常會遇到彈窗，彈窗是需要配合頁面遮罩來讓用戶進行專注操作，不同的遮罩透明度所帶來的專注度也不同。
左圖中我們看到，遮罩的透明度過低，我案例設置的是17%，此時彈窗內容與頁面內容結構上區分并不是很明顯，一般彈窗是用來讓用戶跳脫頁面內容，從而瀏覽彈窗內容，轉變用戶目標，當彈窗無法聚焦時便很難達到目標，并且視覺上層級更加混亂。
右圖中案例我把透明度調整到了37%，我們此時再看彈窗很容易就忽略頁面內容，因為灰色越高，遮擋度越高，用戶跳脫感就越強，這樣我們可以讓用戶專注彈窗內容，同時視覺結構上也區分很明顯
作者：愛吃貓的魚；公眾號：防脫發藥水
本文由 @愛吃貓的魚 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自Pexels，基于CC0協議
蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
藍藍設計的小編 http://www.gerard.com.cn