蘭亭妙微（藍藍設計）m.dzxscac.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
無法想象沒有按鈕的頁面是什么滋味，那定會像沒有方向盤的汽車，讓人不知所措吧？也無法想象按鈕設計不恰當，會給用戶帶來怎樣的困擾？
面對十萬火急的任務需求，如果需要調動全部理性腦，深呼吸三秒，才能找到想要執行操作的按鈕入口，我想這樣的產品設計是失敗的，是會被用戶所唾棄的。
蘭亭妙微UI設計公司，將詳細剖析按鈕的神秘面紗，了解它、研究它，讓按鈕設計成為產品的得力助手，為我們的產品賦能，為我們的工作提效，下面就讓我們開啟這場神秘之旅吧!
一、按鈕的定義
二、按鈕設計的種類
三、按鈕設計的尺寸
四、按鈕的構成
五、按鈕設計的作用
六、按鈕的位置
七、按鈕的顏色
八、按鈕在UI界面的設計原則
九、按鈕設計的注意事項
十、按鈕弱化設計的六種方式
按鈕在我們生活中起著很大的作用，它就像我們的小助手一樣，幫我們一鍵開啟想要的任務，凡事都能一鍵觸達。
按鈕在UI界面中，是一種界面交互控件，通常以矩形、圓形或其他幾何形狀呈現，具有明確的視覺邊界。它通過用戶的點擊、觸摸等操作來觸發特定的功能或操作，如提交表單、執行命令、導航頁面、切換狀態等。
按鈕一般包含文字標簽、圖標或兩者的組合，以清晰傳達其功能。同時，按鈕在不同狀態下會呈現出不同的視覺效果，如默認狀態、按下狀態、懸浮狀態、禁用狀態等，為用戶提供操作反饋和引導。
? 次按鈕
常規按鈕，用于非主要動作。如果不確定選擇哪種按鈕，次按鈕永遠是最安全的選擇。
? 主按鈕
突出“完成”、“推薦”類操作；一個按鈕區最多使用一個主按鈕。
? 文字按鈕
弱化的按鈕，采用更輕量的按鈕樣式，可用于需大面積展示按鈕場景，例如下面的站酷活動頁就用了很多的文字按鈕，只有當按鈕被選中時，按鈕才會高亮選中。
? 圖標按鈕
圖標提供視覺線索，避免逐字閱讀按鈕文案，更高效地使用界面，讓頁面看起來更加的簡潔。
? 在按鈕中添加圖標
用于對按鈕含義補充解釋，提高按鈕識別效率。
按鈕的樣式可以從多個方面進行分類和設計，以下是一些常見的樣式分類：
? 按顏色劃分
? 按形狀分
? 按邊框分
? 按圖標分
? 按陰影樣式分
? 按動畫種類分
馬蜂窩的功能主按鈕，在點擊的時候都會產生動畫，交互感十足。
加載動畫按鈕：
當按鈕處于加載狀態時，按鈕會有加載動畫效果，如旋轉圖標、進度條等，常用于告知用戶操作正在進行中。
3.1 默認按鈕
按鈕的初始狀態，通常具有正常的顏色、形狀和文字顯示，等待用戶操作。
3.2 待激活狀態按鈕
待激活狀態按鈕通常用于指示某個功能或服務尚未激活或啟用，用戶需要執行某些操作來激活它。這種按鈕的設計和實現需要清晰地傳達當前的狀態，并引導用戶進行下一步操作。
3.3 點擊狀態按鈕
當用戶點擊按鈕時，按鈕會呈現按下的狀態，通常通過改變顏色、形狀或添加陰影等方式來表示。
3.4 禁用按鈕
在某些情況下，按鈕會處于禁用狀態，無法進行操作，通常會以灰色或半透明的方式顯示，提示用戶當前操作不可用。
3.5 加載狀態按鈕
加載狀態按鈕通常用于指示某個過程正在進行中，例如數據加載、文件上傳或頁面正在加載等。這種按鈕可以讓用戶知道他們的操作正在被處理，而不是卡住或出現錯誤。
3.6 危險提示狀態按鈕
危險提示狀態按鈕通常用于提醒用戶即將執行的操作可能帶來風險或不可逆的結果，例如刪除重要文件、注銷賬戶等。這種按鈕的設計和實現需要讓用戶明確意識到操作的危險性，以避免誤操作。
下邊這兩組彈框就是運用了危險按鈕，來提示客戶未來即將面臨的風險，警示作用非常的明顯。
在Web端，按鈕尺寸沒有固定標準。不過，一般來講，按鈕的高度常在32px-48px之間，寬度可根據內容靈活設置，但最好不要小于48px，這樣方便用戶用手指（觸屏設備）或鼠標點擊。
像一個簡單的“提交”按鈕，寬度可能是80px左右，高度是36px左右。這些尺寸能保證按鈕在視覺上比較舒適，易于交互。
麻省理工觸摸實驗室通過對人類指尖的研究，得出了關于界面按鈕大小設計的一些重要參考數據。
對于食指，平均寬度在16至20毫米，指腹觸摸區域尺寸為10至14毫米，指尖觸摸區域尺寸為8至10毫米；對于拇指，平均寬度為25毫米，指腹觸摸區域尺寸為12至16毫米，指尖觸摸區域尺寸為10至12毫米。
由此建議，食指觸摸的按鈕應保證在8毫米×8毫米以上，且控件間距應保證至少在1毫米以上；拇指觸摸的按鈕應保證在10毫米×10毫米以上，且控件間距應保證至少在2毫米以上。
該研究還指出，大多數用戶可以舒適可靠地擊中 10 毫米×10 毫米的觸摸目標 。
從按鈕圖標尺寸來看，根據蘋果官方設計指南，iOS中按鈕圖標有不同標準。小圖標尺寸為24×24pt，用于小型按鈕，如導航；標準圖標為32×32pt，用于普通按鈕，適合次要操作按鈕；大圖標是 40×40pt，用于寬大按鈕；特大圖標則為48×48pt，用于特大按鈕。
不同設備屏幕尺寸也有對應的建議圖標尺寸，如iPhoneSE建議24pt，iPhone14及iPhone14Pro建議32pt，iPad 建議40pt 。
在最小觸摸區域方面，iOS規定最小觸碰區域為44×44pt，這種尺寸一般適合主要操作按鈕。
UI按鈕的組成主要包括以下幾個關鍵元素：
圓角的大小決定了按鈕的氣質和視覺感受。小圓角常用于常規按鈕，如4px圓角；圓角越大，越有親和力，人眼往往不喜歡非常鋒利的物體，所以通常不建議使用0圓角的按鈕樣式，根據我大量的體驗，我發現市面上確實也是帶圓角的按鈕居多些。
圖標用于直觀表達按鈕的功能或狀態，如加載中、編輯等。圖標的設計應與整體頁面風格一致，并確保其含義明確易懂。
內邊距能夠擴大按鈕的可點擊范圍，幫助用戶更容易點擊按鈕。一個好的設計間距是把按鈕的水平內邊距設計成垂直內邊距的2倍。當然，你也可以根據你設計的實際情況做適當調整，規矩不是死的。
容器是包含所有視覺和交互元素的框架，包括顏色、紋理、文案和圖標等。容器的設計應支持按鈕的功能和美觀。
邊框定義了按鈕的邊界，常用于次級按鈕的描邊。邊框的粗細和樣式可以影響按鈕的視覺層次和交互效果。
文案是按鈕上的文字描述，用于表達按鈕的含義和功能。文案應簡潔明了，易于理解，同時具有一定的吸引力。
背景用于表達按鈕的狀態和品牌氣質。不同的背景顏色和紋理可以增強按鈕的視覺吸引力和品牌識別度。
投影用于凸顯層級關系，幫助用戶更好地區分不同的按鈕。投影通常與紋理、漸變色結合使用，以打造更好的視覺體驗。
佐糖首頁為了促進轉化，特意將“開通會員”的按鈕用投影凸顯處理，帶投影的按鈕明顯有向前走的感覺，比沒有投影的按鈕看起來更加顯眼。
小小投影在頁面中不僅起到增加空間感的作用，還起到了業務強調的作用，已經不僅僅是樣式的一個承載了。
這些元素共同作用，不僅提升了按鈕的功能性，還增強了其美觀性和用戶體驗。在設計UI按鈕時，應綜合考慮這些因素，以確保按鈕既美觀又實用。
Antdesign指出按鈕的作用是指導用戶采取你希望他們采取的行動，并幫助用戶防錯。
1.1 提交與確認
在表單填寫場景中，如用戶注冊、登錄、信息提交等，按鈕用于觸發提交或確認操作，將用戶輸入的信息發送給系統進行處理。
1.2 執行功能
在各類軟件中，按鈕是執行具體功能的主要方式，如在圖像編輯軟件中，“裁剪”“旋轉”“調整顏色”等按鈕，可讓用戶快速實現相應功能。
2.1 頁面切換
在多頁面的應用或網站中，按鈕可實現頁面之間的切換，如網站的首頁、產品頁、關于我們頁等，通過點擊按鈕，用戶能方便地瀏覽不同頁面內容。
2.2 菜單展開與收起
用于控制導航菜單的展開與收起，節省頁面空間，提高界面的整潔度和易用性。
3.1 顯示與隱藏
可用于控制某些元素的顯示與隱藏，如在電商網站中，點擊“查看更多商品詳情”按鈕，可展開隱藏的詳細商品信息。
飛書中的這個小小按鈕，它承載著隱藏折疊的功能，讓頁面看起來更加的簡潔有序。
3.2 啟用與禁用
在某些功能需要滿足一定條件才能使用時，按鈕可用于表示該功能的啟用或禁用狀態，如在未填寫完必填項時，“提交”按鈕處于禁用狀態，無法點擊。
中國移動云盤的登錄頁就是這么設計的，當前面信息沒有填完，后面的登錄按鈕始終是禁用的狀態，只有當信息填完，且填寫正確，按鈕才會亮起。
4.1 操作反饋
當用戶點擊按鈕后，按鈕會通過顏色、形狀、動畫等方式的改變，向用戶提供操作反饋，告知用戶系統已接收到操作指令。
4.2 引導提示
在一些復雜操作或新功能引導時，按鈕可作為引導提示的一部分，告知用戶下一步操作，如在新手引導流程中，突出顯示“下一步”按鈕。
心島日志的新手指引中就是這樣設計的，按鈕在其中起了很重要的指引作用。
5.1 數據篩選
在數據展示界面，如表格、列表等，按鈕可用于對數據進行篩選，方便用戶快速找到所需信息。
釘釘打卡這個界面中，多虧有了日、周、月的篩選按鈕，才讓數據篩選變得如此便捷。
5.2 數據排序
通過點擊“按時間排序”“按銷量排序”等按鈕，用戶可對數據進行重新排序，以滿足不同的查看需求。
很多產品的按鈕顏色都是與它的品牌色高度一致的，它既是按鈕，又是品牌色的傳遞大使。
網易云音樂的按鈕色用的網易紅，釘釘打卡的按鈕用的騰訊藍，都是在傳遞自己的品牌色，同時也是在進行指令的傳達。
在日常設計中，頁面無疑少不了按鈕位置的擺放，那么按鈕放置在什么樣的位置合適，這也是一個值得深思的問題，也許我們已經司空見慣了按鈕的位置擺放，但是我們知道它為什么要放這里或者那里嗎？下面我們來看下這幾種設計模型，讓它告訴我們，為什么，在特定場景下，按鈕位置要這么放？
1.1 原理含義
Z型視覺模型是一種描述用戶在瀏覽網頁或界面時視覺軌跡的理論模型。
它的布局遵循字母Z的形狀，指用戶的瀏覽路線——從左到右，從上到下的的視覺運動軌跡。
首先，人們從左上角到右上角進行掃描，形成一條水平線；第二步，向頁面的左下側，創建一條對角線；最后，再次向右轉，形成第二條水平線，當觀眾的視角以這種模式移動時，它形成一個虛構的“Z”字形。
1.2 視覺區域
1.3 應用案例
在電商網站中，商家會把熱門推薦或主打產品放在區域1和區域3，以吸引用戶的注意力。
在產品詳情頁面，將“加入購物車”“立即購買”等按鈕放在區域4，方便用戶在瀏覽完產品信息后進行購買操作。
天貓商城就是這樣做的，把網站的LOGO圖放置在左上角（區域1），把產品圖放置在左下角（區域3），最后在用戶瀏覽了全部頁面之后，在右下角（區域4）放置購買按鈕，引導用戶下單。
在這個帶有銷售場景的頁面設計中，購買按鈕放置在右下角符合用戶瀏覽習慣，也符合Z型視覺模型。
在B端應用軟件中，可能運用的功能比較多，按鈕也比較多，通過大量分析和觀察發現，它們大部分喜歡把按鈕放置在每次視覺運動線的起點或者終點的位置。
騰訊云是這樣處理的，中國移動網盤是這么處理的，看似巧合，其實也有它合情合理的一面，因為每一個動作的開始和結束都會更加的引人注意。
這就跟人們每次入職一個新公司一樣，剛進去時會特別賣力、小心，后面時間長了，也就形成免疫，習慣了，但是當最后要離開這家公司的時候，最后心情又會特別復雜，回想起自己在這里成長的歲月，就會心生很多的感慨，也會特別的記憶深刻。
也許這也是為啥很多頁面設計，喜歡把重要的按鈕放置在每次視覺運動線的起點或者終點吧！
按鈕的顏色在界面中不僅起到視覺點綴的作用，同時也是按鈕狀態的一種呈現和反饋。
按鈕顏色不是千篇一律的品牌色，它也經常需要根據業務場景的不同，更換顏色，比方說紅色-刪除按鈕、黃色-告警按鈕、綠色-通過按鈕、藍色-更多按鈕，不同的按鈕在顏色設計上都會有所區別。
此外，在設計按鈕顏色時，有一些基本規范。
首先，從功能角度看，主要按鈕通常會使用比較突出的顏色，像鮮艷的藍色，這是因為藍色醒目又不會過于刺眼，能引導用戶去點擊。次要按鈕（如取消、返回）的顏色會稍淡一些，比如淺灰色，讓用戶知道這是相對次要的操作。
從顏色搭配來說，按鈕顏色要和背景色有足夠的對比度，方便用戶識別。比如背景是白色，深色按鈕就會很清晰；如果背景顏色較深，那按鈕可以用淺色或者高亮度顏色。
另外，顏色的選擇也要考慮產品的風格和使用場景。例如，在一個游戲軟件里可能會使用更活潑的色彩，像紅色、橙色；而在辦公軟件里，通常會采用比較沉穩的色調，如藍色、黑色。
1.1 視覺清晰
按鈕應采用用戶熟悉的設計樣式，如帶有矩形或圓角矩形邊框的填充按鈕、帶有陰影的填充按鈕、幽靈按鈕等。
1.2 文字明確
按鈕上的標簽應準確、簡明直接地介紹其功能，避免使用過于通用或模糊的表述，讓用戶清楚點擊后會發生什么。
2.1 位置合理
將按鈕放在用戶期望看到的地方，如遵循F型或古騰堡原則，在頁面的視覺焦點區域放置重要按鈕。
2.2 尺寸適宜
按鈕大小應反映其在屏幕上的優先級，更大的按鈕用于更重要的操作，同時要適配用戶的手指，避免誤觸。
3.1順序得當、邏輯一致
按鈕的順序應反映用戶與界面之間交互的邏輯，如“上一步”按鈕通常在左邊，“下一步”按鈕在右邊。
3.2 狀態樣式一致
按鈕應具有一致的狀態樣式，如默認、按下、聚焦、禁用等，一個產品中，這些狀態樣式要高度的一致，不能在這個頁面按鈕樣式是這樣的，跑到另一個頁面，樣式又發生了改變。
著名的格式塔心理學也是這么認為的，它強調人對事物的理解是基于整體的、有組織結構的，如果按鈕設計做到一致性，對提高產品的整體性是有非常大的改進的。
4.1 避免過多
避免在一個界面中使用過多的按鈕，以免讓用戶感到無所適從，應優先考慮最重要的操作。
4.2 功能單一
每個按鈕應盡量只執行一個主要功能，避免一個按鈕承載過多復雜的操作，降低用戶的認知成本。
希克定律指出，人的決策時間會隨著選擇的增加而增加。在按鈕設計中，簡潔的設計能減少用戶的選擇和認知負擔，使用戶能更快地做出決策并執行操作。
5.1 風格統一
按鈕的設計風格應與整個UI界面的風格保持一致，包括顏色、形狀、字體等方面，形成統一的視覺體系。
5.2 對比協調
在保持整體協調的基礎上，通過對比突出重要按鈕，如使用高對比度的顏色、較大的尺寸等，吸引用戶的注意力。
情感化設計理論強調設計應該注重用戶的情感體驗。美觀的按鈕設計能夠傳遞積極的情感信息，增強用戶和產品的情感連接。
奧斯卡·王爾德說過：“習慣一旦養成，便很難改變。”
所以我們在設計按鈕的時候，一定要符合人性的習慣，而不是試圖改變人們的習慣。
帶有分組的按鈕擺放，讓人看起來總是更加的有序，也更利于用戶進行操作，面對同類型的功能操作點無需跳躍著去尋找，能很快在相似功能操作區域找到。
360的分組意識很強烈，三個不同區域的圖標按鈕樣式都做了明顯的區分，讓界面看起來更加有序，操作起來也更加的便捷。
切不可一行按鈕中出現多個高強調的按鈕，Antdesign對這個也做了詮釋，會對用戶的行為進行錯誤的引導，也不利于聚焦。
通義這個頁面雖然有多個選中的按鈕，但是沒有全部用高強調的按鈕，只有強推薦的操作“開始錄音”才用了強按鈕。
其它通過相對淺的顏色做了弱按鈕選中處理，視覺上主次分明，信息主次表達上也清晰可見。
當一個按鈕同時兼顧兩個交互動作的時候，一定要區分設計，不能赤裸裸的展示在一個按鈕中，而不做任何區分。
具有返回意義的按鈕，應該放在左側，暗示其方向是回到之前，例如上一步。
簡短的文字更易被用戶閱讀和記住，在一個按鈕上最多不超過5個文字，重要的按鈕一般使用2~4個字。
? 用純灰色文字的弱化按鈕
? 用灰色邊框＋灰色文字的弱化按鈕
? 用顏色邊框+顏色文字的弱化按鈕
? 用灰底+灰色文字的弱化按鈕
? 用淺色底+顏色文字的弱化按鈕
? 用純顏色的弱化按鈕
通過本篇文章的探討，我們深入了解了B端按鈕設計的九大核心要素。
從按鈕的基本定義到Antdesign的分類，再到尺寸、構成、作用、位置和顏色等細節，每一部分都是提升用戶體驗的關鍵。
按鈕設計不僅關乎美觀，更影響著用戶的操作效率和滿意度。在UI界面中，遵循設計原則和注意事項，確保按鈕既實用又具有吸引力，是每位設計師的職責。
希望本文能為設計師們提供有價值的參考，激發更多創新靈感，共同推動B端產品的交互設計向更高水平發展。
轉載：人人都是產品經理
蘭亭妙微（藍藍設計）m.dzxscac.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微（藍藍設計）m.dzxscac.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微（藍藍設計）m.dzxscac.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
轉載：優設
蘭亭妙微（藍藍設計）m.dzxscac.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
那好話不多說，我們正式開始～
在開始之前先來說說 什么是 B 端產品，我們通常也叫做管理后臺。
這里會有兩個問題：“它管理什么？到底如何管理？”給大家三秒鐘可以思考一下。
首先它管理的是數據，無論是 ERP 系統的訂單數據、CRM 的客戶數據、OA 的流程數據，你都會發現管理后臺就是在不停的對數據進行補充、整合。
那到底應該如何管理？簡單來說就是 數據的“增刪改查”，篩選其實就是查詢的一種重要方式。
比如一個客戶關系管理系統（CRM），銷售人員去拜訪客戶就會提前查詢客戶信息，來了解客戶關注內容進而去組織銷售話術。
那這里的篩選應該如何設計？怎樣設計既能高效便利，同時也具備擴展性？那今天我們系統盤點篩選組件究竟應該如何設計？
這里我們先來講講篩選的鄰居“搜索”，因為很多同學其實對于這兩者之間的差別不太了解，只知道它們都是在工具欄當中，都是在做查詢數據的工作。但在功能上是有明顯的區分：
搜索是對系統的關鍵詞進行精準匹配，比如用戶 ID、手機號、昵稱、地址等信息內容
篩選則是給出產品的固定條件選項，比如歸屬人、狀態、類型 等，你可以按需勾選條件，就能得出對應數據
這里稍微多說一句，因為所有的 B 端系統都是由字段組成，而在大的分類上，字段主要包含有輸入、選擇、上傳三大類型。
搜索服務于輸入類字段，比如剛才講到了 用戶 ID、手機號、昵稱、地址等 都是得讓用戶自行輸入才會得到，因此在表單里輸入，在表格當中也是輸入搜索，所以系統是關聯的。
篩選則是選擇類字段，也就是歸屬人、狀態、類型 等，在 B 端系統當中，選擇字段尤為重要，所以在表單處選擇同樣在篩選處也是相同邏輯。
理解篩選與搜索的差異后，我們再來說說篩選～
在篩選的過程當中，有著非常多重要的邏輯需要提前掌握，我們通過簡單的快問快答，幫助大家快速拆解。
第一題：什么是 且、或、非
這是篩選當中必須要了解的基礎運算條件。
且就是篩選的條件必須同時滿足才能出結果，比如一個電商數據分析師，需要篩選潛在高意向客戶，在篩選條件為「時間在近 30 天有支付訂單、近 30 天累計消費金額≥800 元、近 30 天訂單次數≥2 次」，必須同時滿足才會滿足用戶需求。
或就是這些條件滿足任意一個就能出結果，比如還是電商數據，需要尋找對產品有興趣的潛在客戶，就需要篩選「近 90 天內有過人工咨詢記錄、近 30 天內訪問產品詳情頁≥6 次、近 180 天內提交過試用申請」，三個條件滿足任意一個，這樣就能涵蓋更為全面。
非就是這些條件必須排除掉才能出結果，比如電商數據，因為涉及到刷單、退款的情況，需要將其進行清洗，因此在篩選條件上就需要滿足「訂單狀態≠測試訂單、支付狀態≠已退款、客戶類型≠內部員工」，需要同時排除這些數據。
所以對應的篩選運算規則，其實背后都是用戶在使用時需要深度分析使用的最為重要的工具～
第二題：在B端系統當中多個篩選條件默認的運算規則是什么？
A：且 B：或 C：非
在 B 端系統當中，最常用的運算規則就是且，也就是取多個篩選當中的交集。
比如下面這三個篩選項，所計算的呈現規則就是 「銷售負責人是李強」且「銷售時間是 近一個月」且「價值為高價值」的客戶，這樣就是一個典型的且的關系。
因為這種思維方式是最符合用戶的思考邏輯，這也是眾多 B 端系統當中的常見邏輯。
第三題：且、或、非可以同時存在于一個篩選組合當中嗎？
A.可以
B.不可以
它們可以出現在同一個篩選組合當中，因為實際的業務往往是“多條件、多邏輯” 的復合場景。
比如在教育管理系統當中，班主任要篩選 初三年級且數學月考不及格 或 非 住校生 的學生，來針對這兩類人群進行重點管理與監控。
但在篩選的設計當中，為了讓用戶理解邏輯，我們需要通過 條件組（如括號、層級縮進、虛線框）讓用戶直觀感知分組關系，避免依賴抽象的優先級規則。
第四題：如果你是一個設計師，應該如何降低成本表達這個關系？
因為邏輯較為復雜，所以在篩選時有些基礎辦法可以降低門檻。
① 可視化展示篩選運算，如果用戶對于且、或邏輯不太了解，可以使用圖標快速表示
② 實時校驗邏輯規則，不要出現相互矛盾的篩選邏輯
這個功能其實不太好做，但 ONES 做了一個最簡單的邏輯判斷。在且條件當中，同一篩選條件不得選擇兩次，這樣用于避免在且條件當中經常出現的相互矛盾的篩選邏輯。
好的，準備工作已經完成，我們就可以順利了解篩選的類型。
由于篩選的類型眾多，我們會按照 業務復雜度、容器差異 兩個維度，來對篩選進行歸類。
通過業務復雜度，將其分為：基礎篩選、高級篩選、自定義篩選
按照容器差異，將其分為：標簽篩選、折疊篩選、浮窗篩選、抽屜篩選、表頭篩選、AI 篩選
基礎篩選是將 高頻使用（使用頻率≥80%）的篩選條件進行固定，一直保持在頁面中的核心位置，不折疊、不隱藏，讓用戶能夠直接看到的篩選類型。
這是一個最為基礎的篩選方式，在常見的 Ant Design、Arco Design 的頁面模板當中都會有基礎篩選的身影。
使用基礎篩選最為重要的便是 快速觸達，用戶打開頁面就會查看篩選條件，不需要點擊“更多”“展開” 等入口，這能滿足 B 端用戶 高效完成日常操作 的核心需求。
在使用基礎篩選時，我們需要注意以下問題：
① 基礎篩選條件的數量不宜過多，一般 3-4 個最為合適
因為篩選條件過多，就失去了常駐的意義。但在實際業務當中，我們也需要考慮 5 個、7 個這類極端場景，畢竟常駐是最為基礎的方案，難免會遇到特殊情況。（需要在篩選的規則當中進行梳理，將交互邏輯呈現清楚）
② 基礎篩選當中，排序規則會非常重要
一般按照 高頻-低頻 的方式，從左到右依次排列，對于高頻低頻的獲取方式，我們可以數據埋點、卡片分類、問卷調研等多種方式進行搜集。
③ 篩選基礎，樣式就不基礎
基礎篩選有著較多的篩選樣式，大家可以結合自身業務進行選擇，這里推薦樣式一與二，因為展示效率更高～
這里列舉一些常見的基礎篩選產品，大家可以一并查看：
高級篩選是較為復雜的篩選形式，它為了滿足更多 低頻、復雜、個性 的業務需求，通常會提供相對獨立篩選面板，展示更多的篩選條件。
獨立面板也就是我們后續會提到的 浮窗篩選、抽屜篩選、表頭篩選...，所以它們的關系也會相對復雜。
高級篩選與基礎篩選最大的區別在于：
基礎篩選只能覆蓋 3 個左右的高頻篩選，而高級篩選可支持 10 + 維度的靈活組合；常駐只能使用且的邏輯相對簡單，而高級可以有條件組嵌套支持復雜業務邏輯；常駐位置較為固定，而高級則有面板加持，可以更為靈活。
其實選擇高級篩選或者基礎篩選，最大的話語權還是場景。
如果你的篩選是簡單篩選幾個條件，那基礎篩選就已經足夠，反之對篩選條件、篩選效率有著更高要求，我們則會考慮更為復雜的篩選方式。
在使用高級篩選時，這些問題尤為重要：
① 因為高級篩選需要訪問獨立面板，因此在入口的設計就會尤為重要。一般會用文字鏈接或者圖標來提示用戶，便于尋找。
② 基礎篩選與高級篩選可以并存，因為角色不同、使用場景不同，常駐可以作為高頻使用的固定模塊，高級則作為特定角色需要更多篩選的補充，這部分放在下面 篩選的原則-篩選角色化 給大家詳細說明。
這里列舉一些常見的高級篩選產品，大家可以一并查看：
自定義篩選則是在高級篩選的基礎上，進一步業務化。
它是為了滿足 字段不固定、需求差異化 的業務場景，用戶能夠自定義選擇 篩選字段，配置字段的篩選規則。
使用自定義字段最重要的核心要素就是 突破固定字段限制，因為高級篩選是針對產品預設好的固定字段進行篩選，自定義則是用戶可以自行選擇字段，用于適配更為靈活、多變的業務場景，如 CRM 的客戶自定義字段、OA 的流程表單（因為不同的公司對于 流程、客戶信息的管理不太相同，因此需要提供自定義字段進行支持）
在設計自定義篩選時，我們的方案選擇主要受到“篩選頻率、條件復雜度、界面空間”的影響。
① 小入口+大彈窗，以篩選圖標作為入口，點擊過后彈窗展示所有篩選條件。這種方式適合 中低頻（每天 1-3 次）使用篩選，界面空間緊張用大彈窗容納復雜配置
② 展開收起式，當用戶點擊篩選后，將表格與工具欄之間的部分展開，用于呈現篩選條件。它能夠避免彈窗的跳轉感，篩選時用戶的視線可以無需離開表格區域，適用于 篩選條件數量多、高頻使用的場景
③ 固定常駐式，在頂部區域固定，默認展開，這樣就無需點擊入口，這樣更適合“篩選是核心工作流” 的場景
自定義篩選是最難設計的，在使用過程中會有 四大基本元素。
篩選入口：需要讓用戶快速找到入口，同時不干擾主界面。
邏輯運算區：主要就是 且、或 邏輯的展示，只是在運算區域里面，需要考慮切換時究竟應該如何做？
神策數據是通過文字方式，快速展示 且、或 邏輯，并且支持手動直接切換，這個方案目前看來是用戶最容易理解的。
字段選擇區：選擇你所需要篩選的字段，點擊 添加、選擇，整體邏輯較為簡單。
條件組管理區：篩選條件全部展示過的后續動作，比如保存，批量錄入 等相關動作都可以放在條件組管理當中，進行呈現。
接下來的 標簽篩選、折疊篩選、浮窗篩選、抽屜篩選，都是對容器進行分類。因此我們需要進行展開講解，窮舉一下不同容器的形式和變化。
先來說說標簽篩選（外露篩選）
標簽篩選是將重要的篩選選項設計成“可點擊的標簽按鈕”，將篩選過程當中的選項直接來進行展示，目的是為了能夠讓篩選條件，直接暴露出來給到用戶進行使用。
它最重要的是提升效率，針對高頻使用的篩選維度將其外露展示，將多步操作壓縮為 一步點擊，同時能夠凸顯當前的篩選狀態，避免用戶忘記自己選了什么。
在使用標簽篩選時，需要注意這些內容：
比如我想外露的內容是各種狀態，我就可以將其放在頂部，進行指標圖+篩選功能的雜糅，像在小紅書千帆系統當中，對于訂單的多種狀態，就會使用這一技巧，進行呈現。
折疊篩選則是用隱藏的方式，按照使用頻率將篩選條件分層。高頻條件平鋪展示、低頻條件收折在面板當中，點擊展開的篩選類型。
它最重要的價值是要平衡“空間與效率”的問題，當篩選條件 4-8 個時，如果全部平鋪頁面就會過于冗余，如果全部隱藏又會增加操作步驟，折疊篩選通過 “高頻展示 + 低頻折疊”，讓用戶既能快速操作高頻條件，又能按需調用低頻條件，兼顧 “便捷性” 與 “功能完整性”。
正因為這樣的特性，所以很多基礎固定的篩選一旦變多后，通常就會使用折疊的方式進行呈現。
浮窗其實是將篩選包起來，用浮窗進行承載，臨時喚起，用完即走。
在設計時首先會有一個統一的篩選入口，浮窗彈出后設置對應條件，然后點擊確認、取消，浮窗自動收起，不占用頁面只提示有篩選條件。
對于系統而言，它為什么需要浮窗篩選？本質上會有三個原因：
我們之前就有相同的業務，需要將桌面端的部分移植到 Pad 端與移動端，使用浮窗性價比就會更高。
抽屜篩選就是浮窗篩選的另一種表達，它主要是平衡 篩選條件與界面空間 的另一種選擇。
但確實會發現現在的抽屜篩選已經沒有當年的雄風，感覺大家就避之不談，基本不會使用它。其實也會有幾個原因：
很多之前沿用抽屜篩選的產品，現在都在調整自己的交互方案。
并且因為抽屜的不穩定性，我們其實不太建議同學們使用抽屜進行選擇自己的選項條件。
表頭篩選是一種相對特殊的篩選形式，它是將篩選入口放置在頭部，提供給到用戶進行快捷的篩選操作。
本質上是在滿足長時間使用 Excel 用戶的使用習慣，因為在 Excel 當中表格眾多，對于篩選只能使用一種影響較小，最為通用的做法，隨著 B 端產品的發展，也會發現很多設計方式都被得到了延續。
在理解表頭篩選時，會有兩種使用場景：
① 空間較少，使用表頭篩選可以進行輕量的篩選動作。
這樣點擊篩選過后便可直接選擇篩選選項，執行篩選操作。你可以看到飛書文檔，在主頁列表中就會這樣設計便可以輕量滿足篩選需求。
② 字段太多，需要表頭篩選帶入更多篩選值，進行篩選安排。
這種方案本質上是針對高級篩選的體驗補充，記住！是需要高級篩選 or 自定義篩選時才會用到篩選策略。
因為在這兩種篩選當中，需要選擇篩選字段，有大量的選項，這對用戶來說會十分影響其正常使用，通過表頭處的點擊，就能夠將字段默認帶入，縮短篩選路徑，提高篩選效率。
這種方案的表頭篩選也會有相應弊端，首先是表頭空間問題，因為表頭本身需要展示的信息就相對較多，比如凍結、排序、等等，過多的操作會導致表頭過于復雜，如果還加上篩選，表頭空間就會更大，更不適合進行使用。
其次用戶理解成本也會相對過高，因為很多行業屬性相對較為簡單的 B 端產品并不會使用這類篩選，對于用戶初次使用也會有不小的負擔。但表頭篩選目前的普及率仍然比較低，使用比較頻繁的便是紛享銷客。
來到重點，AI 篩選。它不僅僅是未來篩選設計的大趨勢，更是能夠在產品層面解決 篩選復雜化的問題。
比如剛才的高級篩選、自定義篩選，無疑都是在增加用戶的操作層面，他們需要不斷的選擇，才會得到自己想要的結果。而 AI 篩選的價值在于它解決了 用戶自然語言與程序邏輯執行 之間的壁壘，讓篩選能夠響應用戶的自然語言訴求。
比如我想篩選最近一個月的高價值客戶，就只需要在 AI 輸入框中說出自己想法，然后就能得到篩選結果。
程序邏輯執行，程序就可以根據自身知識庫，對高價值客戶進行拆解，邏輯變為 客戶時間為：最近創建一個月客戶、類型為高價值。
這樣一來，其得到的結果就會更為簡單合理，但是在設計 AI 篩選時，它的難度還是會相對較大。
因為 AI 的結果可能會出現差錯，那對應的修改策略就會極為重要。
所以我們可以看到，像 Jira 對于 AI 篩選就會有更多的修改入口讓用戶對于篩選結果進行快速修正，同時在入口上也需要做更多的設計進行提示。
轉載：優設
蘭亭妙微（藍藍設計）m.dzxscac.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
| 樣式規范 | 字號 | 行距 (折行) | 核心使用場景 |
|---|---|---|---|
| 大標題級 | 40px | 60px | 模塊標題、核心數據、頁面大標題 |
| 小標題級 | 32px | 48px | 內容標題、板塊小標題 |
| 正文級 | 28px | 42px | 正文內容、按鈕文字、副標題 |
| 輔助說明級 | 24px | 36px | 金剛區文字、Tab 欄、輔助說明 |
| 微提示級 | 24px | 36px | 容器標簽、彈窗提示、小紅點數字 |
蘭亭妙微（藍藍設計）m.dzxscac.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
我們經常會使用到很多產品，一些產品里的色彩搭配也會給我們留下深刻的影響，比如你會記得淘寶的橙色、支付寶的藍色等等，色彩對于用戶的體驗也很重要；蘭亭妙微ui設計公司分享了關于色彩在UI設計中的應用，我們一起來看一下。
人腦對于色彩的記憶度要高于形態，即一個App給用戶留下深刻印象的往往是界面的色彩；例如說到支付寶，我們可能想不起它的首頁長什么樣子，標簽欄圖標是那些，但能馬上記起它的界面主色是藍色；因此運用好色彩對UI設計十分重要，它能直觀的呈現產品的氣質和性格，能有效的幫助用戶組織和閱讀信息，與界面設計產生聯系和記憶。
好的配色往往依靠設計師審美、感覺搭配出來，但合理的顏色搭配必定存在合理的配色規律和配色方法論的支撐，下面結合相關案例為大家講解色彩運用的幾個技巧。
分析研究了很多優秀設計作品，發現他們在用色的時候有一部分區域是不會使用的，也就是我們常說的“配色禁區”；當然，這里的“禁區”是帶雙引號帶的，并沒有什么絕對的禁區，只是說這些顏色不易控制，在連基礎色都沒有駕馭好之前，盡量少碰。
配色禁區大概分為這三種：三角形禁區、矩形禁區、扇形禁區（紅色為禁區），如下圖：
綜合看來，不管是那種禁區，右下角區域的顏色是很少用的。畢竟他們又臟又深，當然什么顏色都能駕馭的大師請略過。
知識點：
在界面設計中，一般主色和輔助色都集中在右上角，次要的和不可點的顏色都集中在中中上方，而文字信息和背景色則集中在左側，右下角禁區是我們要重點避開的對象。
在App設計之前應先確定界面的主色調，主色將占據界面中很大的比例，通常是品牌色，而輔助色、點綴色、背景色等都應以主色調為基準來搭配，這樣才能保證App整體色調的一致。
色調一致的界面，能帶給用戶始終如一的視覺體驗。例如馬蜂窩將黃色（品牌色）作為主色，以及從主色搭配出的藍色（對比色）貫穿App始終。
60% 30% 10%的原則，是達到色彩平衡的最佳比例。在60%的空間使用主色，可以運用到導航欄、按鈕、圖標等關鍵的元素中，使之成為整個App的視覺焦點和色彩關系；30%的空間使用輔助色，可以平衡過多的主色而造成的視覺疲勞；最后剩下10%的空間為點綴色，可以用在一些不太重要的元素又需要區分的時候。
6:3:1原則構建了一種豐富的色彩層次，讓界面看上去和諧、平衡和不雜亂。
嗶哩嗶哩將粉色運用到頁簽、標簽欄、按鈕、入口圖標等上，藍色的輔助色用在角標、圖標上，還有黃色、紅色用在一些小圖標、小標簽上，主次非常清晰明了。
經常很多大神在網上說配色不要超過三種色，其實就是「色不過三」原則，即在一個頁面中不要使用超過3種顏色搭配，這也和上面說的“60-30-10原則”類似，即一個主色、一個輔助色和一個點綴色。
但在實際UI設計中，迫于產品的需要可能會使用更多數量的色彩，但切記不可超過7種色相（注意不是7種色值），每個色相還可以運用其飽和度、明度的變化分解出豐富的色彩搭配。
美團外賣的首頁20個功能入口大圖標的背景用了9種不同的色彩，每種色彩又包含一種低飽和度色彩進行彩色漸變，但并沒有顯得雜亂，而是呈現一種年輕時尚的律動感。
這是因為這里雖然使用了9種不同的色彩，但仔細觀察發現只使用了3種色彩，其他6種則是從前者鄰近色中提取出來的搭配，再將它們錯落放置，呈現出豐富多彩的色彩搭配，整體和諧統一。
黑色就像沒有生命力的深淵，使用戶陷入冷冷的負面情緒中。遠離純黑色和純灰色，是因為它們不存在于現實世界里；嘗試在純黑和純灰中加入一些色調，會讓界面看上去更柔和自然；另外，純黑色還會與白色產生強烈的對比度，看久了會使人疲勞，讓用戶產生焦慮的情緒。
MONO的導航欄并不是深黑色，而是加入了藍色的低飽和度藍黑色，它的界面背景也是加入了藍色的的淺色，這樣就不會讓界面看上去死氣沉沉的。
前文我們已經了解過各種色彩的心理學知識，就是為了我們在進行App設計時提供依據；這些色彩都是源于人類對大自然最原始的感受，藍色的天空、綠色的草地、黃色的沙漠等等，自然的色彩，對于我們來說是司空見慣的，但其中卻蘊含著豐富的美感，并達到了和諧統一。
網易云音樂使用紅色作為主色，這種熱情奔放的顏色傳遞出一種充滿能量、自信的氣質。
良好的可讀性在界面設計中能為用戶提供主次分明、層次清晰的閱讀體驗，而一個可讀性差的界面則會成為用戶瀏覽的障礙。
那如何確保界面具有良好的可讀性呢？
這就需要在界面設計中注意色彩搭配的對比，如在淺色背景上使用深色文字，在深色背景上使用淺色文字，使用高對比的度的亮色展示重要的元素，用低對比度的淺色來體現需要弱化和次要的內容；例如蘋果Music的主要功能入口，標簽欄圖標、按鈕等都是用了高純度的紅色，與其他元素從形成鮮明對比，就連深灰色的輔助文字都有著清晰的可讀性。
配色中盡量使用大眾熟悉的色彩，如自然界中人們常見的色彩等；從大自然中獲取的配色靈感可以使你的設計更加切合用戶的審美，非常自然；而藝術是對自然的直接反映，是非常寶貴的資源，值得好好利用。
我們可以搜集各種與自然風光相關的圖片，從中提取色彩運用到設計中，這些幾近完美的搭配呈現出來的和諧美感能瞬間打動人心；天氣應用Marline就是一個很好的例子，它的界面背景漸變就參考大自然的變化，隨著不同時間段呈現出清晨、日出、正午、日落、深夜、雨天等漸變色，打開應用即喚起了用戶的快樂情緒。
品牌價值在創建調色板中發揮關鍵作用，但是它們不是唯一重要的因素，行業規范也是關鍵；使用與品牌主要競爭產品幾乎相同的配色方案不失一種好方法。
配色在品牌視覺中所發揮的作用是不言而喻的，但是，色彩本身的內涵和情緒特質并不是全部；比如一個行業當中，很多產品都使用了藍色，那么你的產品繼續使用藍色，可以讓用戶更快「識別出」你所屬的領域；但是本身也存在讓人混淆的風險。如果你想要在視覺上脫穎而出，可以試著使用不同的色彩。
中國區或美國區，紅色和藍色都是最流行的顏色
在進行品牌設計的時候，選擇配色的第一步，始終是了解各種顏色或者色相的氣質和情感屬性；然后，在具體設計的時候，再進一步根據品牌的氣質和需求，再在色相的基礎上調整明暗和飽和度。也可以打破常規創造出與眾不同的配色方案。
想要讓配色方案更加突出，在設計中添加強調色可能是最容易入手的地方；舉個例子，一個律師咨詢的App可能會使用傳統的藍色作為基礎配色，但是，如果能夠加入檸檬綠作為強調色，會顯得獨特很多。
冷暖對比色是自然平衡的規律，可以在設計中大量使用，這樣的配色會使作品非常的出彩，同時不顯單調，讓用戶感覺舒服平和；而且這種搭配方法基本沒有啥缺點，使用在設計中，技巧性比較多，對設計的細膩感受要求比較高，需要多練習。
黑色是所有中性色中最強的，而白色是最常用的背景顏色。
黑色是一個很好的選擇，有種高端和永恒的感覺，而白色可以帶給用戶自由，寬敞和透氣的感覺；如上所述，黑色和白色也是最大的對比色，如果合理的使用黑色配合白色，會營造出一種優雅的氛圍。
交互色彩在執行過程中必須清晰且在界面中保持一致。
號召性用語必須相對于背景具有足夠的對比度，并且相對于其他組件必須具有足夠的視覺權重，以便用戶可以輕松識別它們；Nike健身應用中，「開始」按鈕以高飽和度的檸檬綠作為主色，從背景中脫引而出。
但是，交互色彩并不總是以最具飽和度或最亮為特征，而是通過色調、形狀、大小或對比度，從屏幕上脫穎而出；因此，交互色彩的有效性將基于用戶識別交互區域和執行任務的速度來衡量。
同時，次要功能權重要更輕，并在視覺上更接近信息元素。如上圖Nike Training界面中，“設置”和“聲音”按鈕只用簡單的白色，減輕對主按鈕的干擾，也避免了頁面中出現多個強交互按鈕。
可讀性是任何設計中的重要因素。你的顏色應該清晰易讀，尤其是在處理文字時；因此對比度對視覺效果對影響就非常關鍵，對比度過小，就會使得界面出現灰蒙蒙對效果。
清晰的對比度，一般會采用色彩的兩極，黑紙白字或白紙黑字；而在彩色背景上要讓內容清晰可見，就需要搭配純白或高明度的文字，避免灰色文字；也要注意避免彩色背景上搭配互補色和明度接近的文字，因為這兩種搭配會產生一種“震顫效應”，發出光暈的視覺效果。
沒有完全純黑的陰影，陰影的顏色是會受到物體本身固有色的影響，一定要避免使用純黑色（#000000），使用不太深的灰色，效果會更好；對于有顏色的元素，好的做法是為陰影設定與元素相同的顏色，并使其更暗一些。
如果是有顏色的元素，并且它處在黑暗的背景下，一般情況下，是不建議使用陰影的；但是如果你一定要用，把陰影透明度調到小于10%及以下，并且顏色跟隨主色調來；比如按鈕為綠色，則可以為按鈕設定一個更深的綠色陰影，并加上小于10%的透明度數值。
如下圖，左側的按鈕陰影很自然，右側的則有一層模糊發光的效果，顯得不夠漂亮。
知識點：
為什么「超鏈接文字」要用藍色？
簡單說，因為在最早期的網站頁面中，藍色能呈現最高的對比度。
Tim Berners-Lee——web 的主要開創者，被認為是最早用藍色鏈接的人。
一個很早期的 web 瀏覽器 Mosaic，用的是深灰色背景和黑色文字；那時候，能用的非黑色、最深的文字顏色，就是藍色；所以，讓超鏈接文字突出顯示，同時保證可讀性，就選定了藍色，此后超鏈接文字都用藍色的傳統沿用至今。
App的色彩搭配能直觀、快速的反饋到用戶的大腦中形成記憶思維；好的色彩搭配可以加深用戶對產品的印象；明確界面的視覺層次，讓用戶分清主次信息；同時還能給用戶賞心悅目的視覺享受。那么，在UI設計時該如何進行色彩搭配呢？
我們可以從App中都包含了那些色彩開始，通常一個App中包含了主色、輔助色、點綴色、背景色這4類，下面就以微信讀書為例進行詳細的講解（個人角度）。
主色是指在配色中處于主導地位的色彩，給用戶的第一眼印象，通常是產品的品牌色。
在App設計中，主色一般占有色相色彩的60%的比例；這里指的是60%的界面都使用到的主色比例，而不是使用面積（因為通常一個界面中使用面積最大的是背景色）；還有就是背景色多為淺灰色或白色，它們都屬于無色相色彩，因此不涉及到配色過程中。
我們看到微信讀書的第一印象，就可以判斷它的主色為藍色，這也是它的品牌色；在標簽欄、按鈕、圖標、注冊登陸全都使用了這種純凈的主色，使界面看上去非常和諧一致。
輔助色與主色相輔相成，輔助色的功能是幫助主色建立更完整的形象，使界面豐富精彩起來，避免畫面過于單一。
通常，主色的鄰近色、互補色、分散互補色和三角對立色都可以成為優秀的輔助色，但注意輔助色不宜過多，否則就會使界面看上去花哨分散了主題；根據6:3:1原則，輔助色可以占有色相色彩的30%或更少為宜。
在微信讀書中，綠色、橙色、梅紅、藍紫色是除了主色以外使用最多的顏色，它們都是輔助色，主要用于功能圖標和欄目分類上。
雖然輔助色看起來有點多，但其實都是從主色的鄰近色和對比色（及其鄰近色）中提取出來的搭配，而且只用在頁面中很少的地方，這種搭配技巧既可以豐富色彩的搭配，傳遞出年輕活躍的產品氣質，又保證了整體搭配的和諧統一。
點綴色是除了主色和輔助色以外的另一種色彩，通常體現在細節上。
其作用是，當頁面中主色和輔助色不能滿足關鍵信息的提示時，就需要點綴色來吸引用戶眼球，還有就是利用點綴色來平衡畫面的冷暖色調。
點綴色通常都是分散的，使用面積小，顏色非常顯眼，能與主色形成強烈的對比；一般點綴色是主色的互補色。在微信讀書中，使用了香檳金、梅紅和紅色作為點綴色；香檳金用在文章分享按鈕上，梅紅色用在點贊圖標上，強調其特殊性，紅色用在通知及退出登錄提醒上，用于警示。
來康康這三種點綴色與主色之間存在什么樣的關系，在色相（H）上，3種點綴色為鄰近色，與主色為互補色；在明度（B）上，3種點綴色均為高明度色彩，起到強提醒的作用。這種強對比的互補色的點綴色可以快速引起用戶注意力。
背景色就比較好理解了，通常為了襯托內容，大多數App都是用淺灰色作為背景色，以白色作為背景色的對比色，來區分視覺層次；建議是可以根據前景色來提取背景色，將其調亮或變暗，這樣可以讓界面色調更加統一。
在微信讀書中背景色是偏藍色調的淺灰色，而不是純灰色，背景對比色是在白色里加入了藍色色相，而不是純白色，整體對比較柔和，給人清爽通透的感覺。
支付寶 Alipay Design 團隊提出過一個配色原則：
以同色系配色為主導，多色搭配為輔。
同色系為統一的色相，使用中可以加深品牌色的感知，可以讓界面更有層次，同時可以讓界面保持色彩上的一致性；由于業務的多樣化，我們需要多色搭配為輔；多色的輔助顏色，也可稱之為功能色，可設定不同的任務屬性和情感表達；再搭配中性色黑白灰，賦予更多的變化和層次。
兩種配色通過主次、使用比例，可靈活運用在業務的各個場景中，具有非常好的延展性。
不同于單一色彩，漸變色不屬于任何色彩，它營造出千變萬化的視覺效果，卻又不會增加視覺負擔。
相較于單一的色彩，漸變色的復合性質讓它在界面設計中具有更強的視覺沖擊力，有助于快速搶占視線；如今，這種獨一無二的色彩正逐漸成為一種潮流，究其原因是目前大量的扁平風格造成UI設計的嚴重同質化，人們需要追求更加個性的視覺語言來滿足日益增長的設計需求。
下面我們來了解幾種常見的漸變的使用技巧：
色相（H）漸變是指由一種色彩向另一種色彩的過渡，這種漸變因跨度大產生的視覺效果非常明顯；飽和度（S）漸變是指同一種色彩不同純度的過度，其產生的視覺效果比較和諧單調；明度（B）漸變是同一種色彩不同明暗的過度，這種漸變的視覺效果給人一種沉靜的氛圍。
在界面設計中經常看多各種各樣的漸變表現方式，使用最多的有以下幾種：
水平漸變：
這個很好理解，是指角度為0的線性漸變，是最流行的漸變形式；界面設計中多用在導航欄、進度條、按鈕等元素上，能讓畫面變得精致而通透；例如京東使用橙紅漸變的設計語言貫穿整個App，從應用圖標到導航欄、按鈕、標簽，全部都運用了這種由紅色到橙色的過渡；仔細觀察發現在很多小標簽上都使用了水平漸變設計手法，使產品看起來更年輕化。
知識點：
在水平漸變中，通常把輕（亮）的色彩放在左邊，重（暗）的色彩放在右邊，這樣由左向右的方向感剛好與人的瀏覽習慣保持一致；而反過來就會與人的瀏覽視線相悖，應避免。
垂直漸變：
即角度為90°的線性漸變，它通常被用在正方形或豎條形的元素上，如注冊登陸頁，個人中心頭部等；垂直漸變中上下兩種色彩的深淺變化會產生截然不同的視覺效果，上淺下深會讓給人一種凸起的立體感，而上深下淺會給人一種凹陷下去的空間感。
例如「紀念碑谷」的背景是采用了單色相和多色相的垂直漸變作為游戲背景，在讓整個畫面豐富的同時又不會太搶奪主體的色彩，使畫面顯得清新透氣而不沉悶。
角度漸變：
角度漸變通常有對角漸變和多角度漸變；有角度的漸變相比水平和垂直漸變，它的使用場景更廣，如圖標背板、啟動頁、注冊登錄頁、標簽等；想讓界面更加絢麗、動感和迷人，這時候我們可以考慮多組漸變搭配使用。
色塊漸變：
漸變的顏色不只可以運用在一個色塊上，還可以運用在一組色塊上；設計師運用一組近似性色彩，將每個菜單項清晰區分開，讓界面平衡在一個頻率上，這樣的畫面更有節奏感和舒適性。
不同于平滑的漸變，色塊漸變不再是單純的背景裝飾，在某些地方還具有一定的功能性，比如使用不同的色塊來分割的列表樣式；Clear Todos是一款日常任務清單的APP，它拋棄了傳統的列表樣式，使用了一系列色塊來作為列表的分割，非常漂亮和精致。
徑向漸變：
是指色彩以圓心向四周擴散的漸變，是一種模擬光源照射的視覺效果，因此光源是整個畫面的視覺焦點，將關鍵元素放在光源中心就會成為主角；通常被運用到大背景上，如啟動頁、引導頁等。
Solar天氣應用的背景就是徑向漸變，光源擴散的效果營造出一種夢幻般的美感。
漸變色是由一個色彩走向另一個色彩的過程，有著迷人的視覺效果；如果你仔細觀察兩種色彩的過渡關系，就會發現不是每次都會得到滿意的效果，例如紅綠漸變就很糟糕，因為它們兩者是互為對立的色彩，但是如果加入黃色的過渡色就會好很多；原因是當兩種色彩之間超過90度就會導致其漸變色看上去不太和諧自然，只有控制在90度之內才會產生美妙的變化。
如何改善超過90度的兩種色相的漸變呢？這時候可以在兩色之間加入過渡色進行調和。例如當從黃色到藍色漸變時，就可以加入紫色作為過渡才能呈現完美的視覺效果。
知識點：
在搭配漸變色時，盡量只改變其色相（H）、飽和度（S）、明度（B）中的一項，這樣才能創造出和諧的漸變色方案
轉載：人人都是產品經理
蘭亭妙微（藍藍設計）m.dzxscac.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
我們平常會使用很多APP，久而久之我們會發現一些APP的設計非常的相似；一個有新意、精致的APP界面可以讓用戶產生很深的影響，對產品的形象也有一定的幫助；本文由蘭亭妙微UI設計公司分享了關于如何提升UI設計的高級感的方法，我們一起來看一下。
一個App設計是否精致，是否富有設計感，在于它的細節，這就意味著我們在進行設計的時候，要從細微之處著手，從多方面去鉆研如何創造出打動人心的UI設計。
本文總結了12個簡單直觀的提升設計感的小細節，一起來學習。
在對UI 文本進行樣式控制的時候，最常見的錯誤莫過于過度依賴字體大小差異來營造對比；單純使用字體大小對比，所營造的對比并不夠，嘗試結合色彩和字重來營造更好的對比效果。
每種顏色都有一個視覺權重，這有助于在內容中建立層次結構；通過使用顏色的深淺，為元素賦予不同的重要性。
如果可以的話，你甚至可以采用兩到三種顏色：
類似的，在UI設計的時候，通常兩種不同的字重足以營造出優秀的層次感：
▲主標題字重為600，其他標綠點的文字字重都為400
應當盡量不要讓正文部分字重低于400，因為這一部分字體本身尺寸已經較小，低于400會使得可讀性不佳。
如果你依然需要降低字重，那么不妨讓字體色彩更淺一點，或者替換成其他識別度較強、字重相對較小的字體。
灰色文字在無彩/彩色背景下要分開處理：
不要在有色背景上使用灰色的文本，在白色背景下，將黑色的文本改成灰色（或者在黑色背景下使用灰色文本），是不錯的淡化其視覺效果的做法。
但是在彩色背景下，想要降低和背景色之間的對比，通常有兩種方法：
一是降低白色文本的不透明度；二是讓文本逐步接近背景色，而不是改為灰色。
▲左圖設計師職位信息為白色文字降低不透明度，右圖為和背景同色相高明度的顏色
其次當涉及長篇內容時，大面積的深色粗體字會給人一種沉重感，而且很跳躍；通過選擇類似深灰色（#4F4F4F）這樣的顏色可以很容易地解決這個問題，使文字更容易被識別。
選擇一種基礎色，再調整色調和顏色深淺來增加均衡；設計時避免用過多的顏色。如果項目允許，只需使用固定的色板，通過調整基礎色的飽和度和明度，利用這種簡單的方式為設計增加一致性。
陰影是UI設計中最常見的視覺表現手法，它可以增加元素的深度，使其從背景中脫穎而出，引起用戶的注意力，同時也能增強畫面的視覺層次感。
相比于采用大范圍的擴散模糊陰影，使用微妙的垂直偏移陰影效果更明顯，更自然，它模擬了最常見的光源特征，光線從上往下照下來所營造的陰影效果。
這種輕柔的陰影呈現出的干凈，增加了畫面的精致；如果陰影的范圍太小或顏色太深，位置也沒有偏移，而是聚集在元素的四周，就會讓畫面更加扁平，讓視覺變得厚重，呈現出不精致的畫面感。
陰影不一定是黑色的，還有一種擴算陰影是模擬元素本身的顏色投射在背景上，由于陰影與元素的色調一致，因此呈現出十分融洽的畫面感。
在UI設計中，這種手法不宜過多使用，否則呈現出的各種色彩搭配會讓人眼花繚亂。
合格的設計師能夠繪制風格統一的圖標，而優秀的設計師能夠創造風格獨特的圖標。
我們能否在追求大小一致，圓角一致，線寬一致和配色一致的同時，為它的視覺表現力加入更多的創意呢？例如下面這組圖標設計，無論是在圖形上的創新，還是顏色搭配上都呈現出無與倫比的創意。
標簽欄作為一個App的全局導航起著至關重要的作用，它的設計影響著整個產品的視覺風格。
通常，大多數App都是使用iOS規范的設計樣式（默認灰色，選中填充品牌色），這樣的設計太普通，太常見了；要想讓標簽欄圖標設計精致和富有個性，可以豐富每一個選中態圖標的視覺表現，例如給圖標加上背景和表情，即顯得生動有趣，又增加了用戶的好感，給人留下深刻的印象。
3D立體圖標設計是近幾年來的流行趨勢，看上去十分精致、華麗，但是看久了會讓人產生輕微的視覺疲勞，同時因其復雜的結構會增加用戶的認知成本，一般在外賣美食類應用中比較常見。
Tab是App設計中最常見的控件之一，它源自Material Design的設計規范；現在很多iOS產品當中也開始使用這種導航欄樣式來進行設計，而原本屬于iOS規范當中的分段選擇器變得不那么常見了。
在視覺表現形式上，Tab和標簽欄同樣也分為選中態和未選態，它的設計較為簡單，通常是使用一組文字標簽，通過顏色或在標簽下加上小長條來區分兩者的狀態；因為它簡單，卻越難設計出彩，要發揮極大的設計想象力，跳脫出設計規范的限制，才能找到完美的方案。
例如蝦米音樂的Tab選中態是一段音頻波線，再配合文字的大小對比，一個富有設計感又符合產品特征的Tabs就被創造出來了。
我們還可以從品牌基因中獲取靈感，品牌作為用戶熟知的形象是個絕佳的來源。
從品牌形象中提取具有獨特氣質的視覺富豪作為Tab選中態的小長條，這樣就建立起視覺上的聯系，讓用戶產生由內而外的一致感受；例如馬蜂窩品牌形象中的微笑符號和飛豬旅行品牌形象中的豬頭都被延伸到Tab的設計上，既讓界面視覺獨一無二，又進一步強化了用戶對品牌形象的認知。
在UI設計中，有許多的裝飾元素，如卡片的邊框、列表的分割線等，雖然邊框，分割線是分隔兩個元素的好辦法，但是它不是唯一的方法；使用過多會讓整個布局的設計感降低，或多或少都會干擾用戶瀏覽的視線，讓信息內容失去注意力，因此可以減少不必要的裝飾元素。
我們可以通過以下幾個方法來劃分元素的視覺層次，讓畫面變得干凈，整齊：
1）使用陰影
陰影同樣可以營造出邊界感，而且相比邊框分割線更加微妙，并不會顯得突兀，不會分散用戶的注意力，讓內容更聚焦。
2）使用不同的背景色來區分
通常，相鄰的元素背景只需要有微妙的差別就能夠讓人對他們進行區分；所以，你所需要做的就是在不同的區塊采用不同的背景色，并且嘗試刪除分割線，因為你根本不需要它。
3）增加額外的留白
創建元素之間的分離效果，并不一定要通過線框來表現，只要增加留白，讓它們分隔開就行了，通過留白和間距來實現元素分組是UI設計中的常用手法。
在App中的每一個界面都有許多元素，那些同類的元素應保持統一的設計樣式。
通常個人中心的標簽欄圖標是一個人形剪影，它代表著用戶，因此可以在展示用戶頭像和用戶形象的界面中延續使用。
如果圖形擁有獨特的外觀，如橢圓矩形，也可以作為視覺符號的一種，延續到其他界面中，成為圖形或按鈕的外觀；這樣，整個界面就被統一的設計元素聯系起來了，給用戶始終如一的一致感。
選擇符合產品氣質的字體，可以與產品的定位相吻合，傳遞給用戶正確的情感意識。
雖然默認字體可以滿足大多數App 的設計需求，但會出現一個問題就是——系統字體的普適性并沒有什么特色，在一些特定的情境下就顯得收效甚微；例如在運動類App中更適合粗壯的斜體來傳遞力量、爆發力、速度的感覺，換成系統字體后，整體感覺在氣勢上就變弱了很多。
大多數App都支持三方登陸，他可以減輕用戶注冊的時間成本。
通常是在注冊登陸頁的底部展示第三方圖標入口，這也是設計師最常忽略的內容，往往是直接將第三方圖標調整一致大小和擺放整齊位置，沒有針對它們再設計；一個設計精致的App不應漏過任何的細節，我們可以以自家App的圖標風格為依據，對第三方圖標進行優化設計。
App中優美的圖文設計，能帶給用戶如沐春風的視覺享受，它非常重要。我們經常看到文字疊加在圖片背景上的設計樣式；為了減少復雜圖片背景對文字的干擾，通常的做法是疊加半透明度的黑色蒙版，讓白色文字清晰可見，但這不是最優的辦法。
我們可以從圖片中提取主色調用于疊加背景的填充色，這樣就使文字、色塊和圖片融入到一起了，畫面變得高級和富有設計感。
圖片的質量影響著整個App的格調和用戶的情緒，高品質的圖片給人愉悅的視覺享受，產生美好的聯想；而低品質的圖片會瞬間拉低App的質感。
在App設計中，一張漂亮的圖片從收集到上線，需要經過裁剪，調色等過程才能被使用；即使是普通的商品圖片，我們將它摳圖后調整成統一大小，再加上干凈的背景，就能立刻提升商品的美感，界面視覺也會變得美觀、整潔。
現在的UI界面設計中，卡片式設計已經是一種非常常見的設計形式，它有利于信息分層和整合，劃分出更加清晰的組織結構，實現復雜內容的簡化處理，提高空間利用率；同時卡片式設計通常很依賴視覺元素，很強的視覺元素正是卡片式設計的一種優勢，也是提升設計品質感的良方。
轉載：人人都是產品經理
蘭亭妙微（藍藍設計）m.dzxscac.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
UI設計有設計規范要遵循，同樣的原型圖也有自己的規范。
任何通過圖形示意的東西一樣，規范帶來的最大的好處是提高信息傳達效率。
人是視覺動物，好看的東西總喜歡多看兩眼，混亂的東西給人最直白的感受就是邏輯混亂。
這就是「卷面分」。
這篇文章我們說下原型圖的規范。
所謂的規范就是定規則，按照這一套規則作為標準進行執行，這里邊包含元素規范、布局、顏色等等。
我對畫原型圖對規范的要求是：盡量向著規范靠近。
原型圖不像UI圖，不用去到像素級別去摳。
因為畫原型我們需要考慮時間，考慮效率，我們需要將最大的精力去放到方案的產出，寫需求文檔上。
規范只是為了讓我們有個標準，如果你想畫的規范時，給你一個參考。
對于手機端、PC端、平板、車機等不同的產品形態，最大的區別是尺寸。
在畫原型圖之前，我們要做的就是先把頁面原型尺寸給定下來。
可以參考的規范有：手機端首屏的尺寸設置為 375×667 px。
注：375 × 667 是首屏高度，也就是原型圖的最小高度，并不是原型的固定高度，當內容很多時，直接把高度拉長到合適的內容即可。下邊提到的PC端尺寸也是這個道理。
狀態欄：375 × 20 px
導航欄：375 × 44 px
底部tab：375 × 49 px
這個規范的尺寸是使用的 iPhone8 的尺寸，產品經理火的那幾年就是這個尺寸火，所以用這個尺寸的多。
你同樣的也可以使用其他常用的手機端尺寸，這沒有固定限制。
我比較建議用這個尺寸，因為很多Axure組件也都是按照這個尺寸去做的，適配的比較好。
對于PC端，尺寸可以按照 1440×900px。
雖然當前使用最多的屏幕尺寸是1920×1080。
對于原型圖1440的寬度，如果是左邊是原型圖，右邊寫需求描述的話，在屏幕上可以正好展示出原型圖+需求描述，不用左右滑動去看。
對于平板，建議直接使用 768×1024 px。
對于原型圖的顏色，我們可以分別來看：
1）有UI設計師參與的
我們可以考慮使用中性色，中性色是指不強烈的色彩，常見的就是黑白灰。
在選擇黑白灰時，我很推薦的是Axure色板中自帶的顏色，在畫原型時直接選取使用就行。
另外一些大廠規范中，都有自己的中性色定義，你也可以選擇使用。不過我不建議你花費太多時間去處理顏色。
如下圖，左邊是用Axure中的黑白灰，右邊是使用的Arcodesign的中性色，在畫原型時，整體上影響并沒有那么大。
雖然右邊的更好點，如果你要用其它中性色，可以將顏色收藏進Axure的色板中，方便下次使用。
2）沒有UI設計參與的
比如說后臺，可以添加一些顏色。
后臺一般都是內部使用，對樣式沒有太高要求，也不會讓UI進行設計；
因為后臺一般都是使用現成的UI組件進行開發的，比如Antdesign、Element等；
具體什么顏色，可以用萬能的藍色作為主色調，使用其他顏色作為輔助即可。
對于語義色，來表達成功、警告、錯誤語義，可以選擇紅綠黃進行使用即可。
對于文字，涉及到字體、字號、粗細、行間距等。
字體
可以使用 Arial，也就是Axure默認的字體。
同樣的，也可以使用蘋方、微軟雅黑，這兩個字體則需要單獨安裝。
不過當你通過Axure打包發布出去時，如果對方沒有安裝對應的字體，將則不會展示為蘋方/微軟雅黑字體進行展示。
對方查看的效果和你看的效果會不一樣，我正在找處理方案，目前還沒找到。
字號、字重
也就是字體大小、字體粗細，對于字體大小、粗細，還有顏色，影響的信息層級關系。
我們直接看規范：
一級標題：20px、加粗，顏色#000000
主標題：18px、選擇性加粗，顏色#000000
次標題：16px、選擇性加粗，顏色#000000
小標題：14px、選擇性加粗，顏色#000000
正文：14px、選擇性加粗，顏色#000000/#333333
輔助文字：14px/12px，不加粗，顏色#333333/#555555
次級文字：12px/10px，不加粗，顏色#555555/#7F7F7F
注：對于文字的大小，前提是在 375×667、1440×900 的頁面尺寸下的。如果你使用的尺寸過大，對應的字號也需要加大。
這個規范不用記，可以用字號 14 作為標準，層級高的字號+2，加粗、顏色加重即可，層級低的字號就-2，不加粗，顏色淺一些。
行間距
在原型中不重要，Axure時會根據字體大小自動調整行間距，如果文字內容過多時，可以手動進行加大間距。
原型中如果是「圖標+文字說明」一起出現，不用管圖標，直接使用圓形或矩形代替即可。
占位符太丑，不建議用。
顏色不要使用太深的中性色。如下圖示例：
如果只有「圖標」，可以選擇能表達具體含義的圖標。
從iconfont、iconpark中搜索復制svg格式粘貼到Axure使用即可。
如下圖中的掃一掃、設置、播放圖標。
如果你覺得使用圓形或矩形表達圖標的意思不明顯，或者是不想找圖標，就在加個「icon」文字，或者直接用寫文字。
如下圖的掃一掃、設置、播放，直接使用文字說明即可。
對于頭像、圖片等，都可以加個文字說明。
如果是沒有UI介入設計，當需要確定圖標時，則需要產品經理確定，同樣的去iconfont、iconpark中找到圖標，按前端要求提供過去即可。
圖片在原型中不需要使用真實圖片，直接使用矩形代替即可。
Axure中自帶的圖片元件太丑了，不建議用。
可以再加上文字說明，來表達這是圖片，比如加個img，或者根據圖片特性，如封面、頭像，都是可以的。
原型中的圖片規范可以按照寬高比，比如 4:3，3:2，16:9，1:1。
當然這個沒那么嚴格，如果你想規范些，可以這樣用。
圓角在原型中不重要，如果你想使用圓角，可以按照2的倍數調整。
圓角在UI中的作用很大，而且規范還挺多，原型中就無所謂了。
陰影不重要。如果想使用陰影，可以將陰影使用純黑色號000000，透明度30%，模糊5。
對齊是版式設計的基本原則，使用工具進行對齊即可。
具體采用「左對齊、右對齊、上對齊、底對齊、居中對齊」，你可以按照布局來，比如靠右的元件，使用右對齊。
分布是指將頁面內容使用水平分布、垂直分布的方式進行平均分布，來保證頁面元素之間的間距相同。
當相同的元素多次出現時，我們可以使用分布快速調整，讓頁面更規范。
間距沒有那么重要，但是規范的原型一定要有會有間距。
間距分為上下左右間距，分為模塊與模塊間的間距，子模塊與子模塊的間距，元素與元素之間的間距。
對于整個移動端來說，可以使用 5 的倍數調整間距。
對于尺寸較大的PC端原型，可以按照 10 的倍數調整間距。
也可以直接將元件結合「對齊、分布」直接調整，不用關注具體間距。
根據我們之前提到的設計原則「親密性」，屬于同組的內容間距小，不同組的內容間距大。
組件是就是可以直接拿過來的元件組合。
對于每個組件都是通過基礎的形狀、文字、顏色、尺寸、間距等進行組合形成的。
就是UI設計中的原子化設計。
當完成基礎的形狀、文字、顏色、尺寸、間距等規范確定后，進行基礎元素的組合即可得到規范的組件。
你可以基于上邊的規范去制定自己的產品組件庫，可以快速使用規范的組件。
在畫原型時，可以將原型中的內容盡量填寫為真實內容，使用極值狀態，將內容最多、數據最多的情況畫出來。
規范建立好是為了使用，我們了解清楚原型的規范后，可以在畫原型時往規范上靠，慢慢的養成好習慣。
一個規范好看的原型圖在求職面試、評審的時候，會是個加分項。
當然，不要過度遵循規范，原型圖不是UI圖，重要的是使用原型將功能表達出來。
對于剛入門的產品經理來說，原型圖是日常的基本工作。
轉載：人人都是產品經理
蘭亭妙微（藍藍設計）m.dzxscac.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
藍藍設計的小編 http://m.dzxscac.cn